import { useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import   type {
  CSSProperties,
  ChangeEvent,
  KeyboardEvent as ReactKeyboardEvent,
  PointerEvent as ReactPointerEvent,
  } from "react";
import {
  Box,
  Camera,
  ChevronDown,
  ChevronRight,
  ChevronUp,
  DiamondPlus,
  Eraser,
  Film,
  MoveHorizontal,
  Pause,
  PersonStanding,
  Play,
  Plus,
  RefreshCw,
  Repeat,
  Settings2,
  SkipBack,
  SkipForward,
  Square,
  Trash2,
  Video,
  X,
  type LucideIcon,
} from "lucide-react";
import {
  CAMERA_KEYFRAME_MIN_GAP,
  DEFAULT_TIMELINE_FPS,
  MAX_TIMELINE_DURATION,
  MIN_TIMELINE_DURATION,
  TIMELINE_DURATION_STEP,
  TIMELINE_FPS_TIERS,
  MIN_CAMERA_TRANSITION_DURATION,
  MAX_CAMERA_TRANSITION_DURATION,
  DEFAULT_CAMERA_TRANSITION_DURATION,
  normalizeCameraTransitionDuration,
  getCameraClipSpan,
  moveCameraKeyframeTime,
  normalizeTimelineDuration,
  normalizeTimelineFps,
  scaleCameraKeyframeStart,
  scaleCameraKeyframeTimes,
  EASING_KINDS,
  EASING_LABELS,
  getCameraCutSegments,
  type CameraKeyframeValue,
  type CameraTransition,
  type CameraTransitionType,
  type EasingKind,
  type KeyframeTransformValue,
} from "../schema/timeline";
import type { DirectorCameraShot, MotionClip, MotionKind, ExportQuality, ExportCodecPreference } from "../schema/directorProject";
import { EXPORT_RESOLUTION_OPTIONS, EXPORT_QUALITY_OPTIONS, EXPORT_CODEC_OPTIONS } from "../schema/directorProject";
import {
  TRAJECTORY_POINT_MIN_GAP,
  getMotionEndTime,
  getMotionStartTime,
  getTrajectoryClipEndTime,
  getTrajectoryPointTimes,
  getTrajectoryStartTime,
  moveTrajectoryPointTime,
  scaleTrajectoryPointTimes,
} from "../schema/trajectoryMotion";
import { useDirectorStore } from "../store/directorStore";
import { usePlaybackStore } from "../runtime/playbackStore";
import { exportVideo, type VideoExportView } from "../io/videoExport";
import { InspectorDropdown } from "../components/InspectorDropdown";

interface SelectedKeyframe {
  kind: "object" | "camera";
  targetId: string;
  keyframeId: string;
}

/**
 * 时间滑块手势的数据主人：
 * - trajectory：人物轨迹（拖单个点走 updateTrajectoryPoint，按点 id 定位）
 * - camera：运镜片段（拖把手 / 拖关键帧都整条覆盖时间，按索引对应）
 */
type TimelineTimeDragOwner =
  | { kind: "trajectory"; objectId: string; pointId: string }
  | { kind: "camera"; cameraId: string }
  | { kind: "motion"; objectId: string }
  | { kind: "motionClip"; objectId: string; clipId: string };

/** 时间轴片段（人物轨迹条 / 运镜片段条 / 动作片段条）的稳定标识 */
function getTimelineClipKey(kind: "trajectory" | "camera" | "motion" | "motionClip", id: string) {
  return `${kind}:${id}`;
}

function formatTime(t: number) {
  return `${t.toFixed(1)}s`;
}

/** 读数里的时间：整秒省掉小数位（1s 而不是 1.0s），非整秒保留一位 */
function formatReadoutTime(t: number) {
  const safeTime = Number.isFinite(t) ? t : 0;
  return `${Number.isInteger(safeTime) ? safeTime : safeTime.toFixed(1)}s`;
}

/** 刻度候选步长（秒）。先按目标刻度数算出「每个刻度大约多少秒」，再取不小于它的最小候选值，
 *  这样 5s / 8s / 30s 等不同时长都能得到疏密稳定的刻度。 */
const TIMELINE_RULER_STEP_CANDIDATES = [0.1, 0.2, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60];
const TIMELINE_RULER_TARGET_TICKS = 8;
/** 主刻度之间的细刻度步长（0.1s）：介于两条主刻度之间，读数更精细 */
export const TIMELINE_RULER_MINOR_STEP = 0.1;
/** 细刻度数量上限：再密就糊成一条色带、没有读数意义，此时干脆不画 */
const TIMELINE_RULER_MINOR_MAX_COUNT = 200;

/** 把秒换算成帧号（四舍五入到最近的一帧）；帧率来自工程设置，默认 30fps */
export function getTimelineFrame(time: number, fps: number = DEFAULT_TIMELINE_FPS): number {
  const safeTime = Number.isFinite(time) ? Math.max(0, time) : 0;
  const safeFps = Number.isFinite(fps) && fps > 0 ? fps : DEFAULT_TIMELINE_FPS;
  return Math.round(safeTime * safeFps);
}

/** 拖动总时长时的灵敏度：横向 25px = 1s，拖起来不会太窜 */
export const TIMELINE_DURATION_DRAG_PIXELS_PER_SECOND = 25;

/**
 * 把秒数对齐到 0.1s 刻度。
 * 顺带消掉浮点尾巴：5 + 0.1 会得到 5.0999999999999996，直接塞进 number 输入框会显示出这一长串小数。
 */
export function alignTimelineDuration(seconds: number): number {
  return Number(seconds.toFixed(2));
}

export interface TimelineRulerTick {
  value: number;
  percent: number;
}

/** 主刻度步长（秒）：时长越长步长越粗，保证刻度数量稳定在目标值附近 */
export function getTimelineRulerStep(duration: number): number {
  const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
  if (safeDuration === 0) return 0;

  const roughStep = safeDuration / TIMELINE_RULER_TARGET_TICKS;
  return (
    TIMELINE_RULER_STEP_CANDIDATES.find((candidate) => candidate >= roughStep) ??
    TIMELINE_RULER_STEP_CANDIDATES[TIMELINE_RULER_STEP_CANDIDATES.length - 1]
  );
}

export function getTimelineRulerTicks(duration: number): TimelineRulerTick[] {
  const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
  if (safeDuration === 0) return [{ value: 0, percent: 0 }];

  const step = getTimelineRulerStep(safeDuration);
  const ticks: TimelineRulerTick[] = [];
  for (let value = 0; value <= safeDuration + 1e-6; value += step) {
    const rounded = Number(value.toFixed(4));
    ticks.push({ value: rounded, percent: (rounded / safeDuration) * 100 });
  }

  const lastTick = ticks[ticks.length - 1];
  // 时长不是步长整数倍时补上末尾刻度，保证最右侧一定有刻度线
  if (lastTick && lastTick.value < safeDuration) {
    ticks.push({ value: safeDuration, percent: 100 });
  }

  return ticks;
}

/**
 * 主刻度之间的 0.1s 细刻度（比秒刻度更矮更淡，只画线不写数字）。
 * - 主刻度本身已经细到 0.1s：不用再插细刻度；
 * - 与主刻度重合的位置由主刻度负责，不重复画；
 * - 时间轴太长（细刻度会糊成一片）时不画。
 */
export function getTimelineRulerMinorTicks(duration: number, majorStep: number): TimelineRulerTick[] {
  const safeDuration = Number.isFinite(duration) && duration > 0 ? duration : 0;
  if (safeDuration === 0 || majorStep <= TIMELINE_RULER_MINOR_STEP + 1e-9) return [];

  const total = Math.floor(safeDuration / TIMELINE_RULER_MINOR_STEP + 1e-6);
  if (total > TIMELINE_RULER_MINOR_MAX_COUNT) return [];

  const ticks: TimelineRulerTick[] = [];
  for (let index = 1; index <= total; index += 1) {
    const value = Number((index * TIMELINE_RULER_MINOR_STEP).toFixed(4));
    if (value >= safeDuration - 1e-6) break;

    const majorRatio = value / majorStep;
    if (Math.abs(majorRatio - Math.round(majorRatio)) < 1e-6) continue;

    ticks.push({ value, percent: (value / safeDuration) * 100 });
  }

  return ticks;
}

function formatRulerTick(value: number) {
  return `${Number.isInteger(value) ? value : value.toFixed(1)}s`;
}

/** 轨道左侧标签列的类型图标：和「对象树 / 添加角色」保持一致的语义 */
const OBJECT_KIND_ICONS: Record<string, LucideIcon> = {
  character: PersonStanding,
  camera: Video,
  prop: Box,
};

/** 人物轨道「动作」子轨道里展示的基础动作名 */
const MOTION_LABELS: Record<MotionKind, string> = {
  none: "无动作",
  idle: "待机",
  walk: "行走",
  run: "跑步",
};

type TimelineTrackKind = "object" | "camera" | "character";

/** 轨道拖拽的启动阈值（px）：小于它当作普通点击，避免抢走关键帧的选中点击 */
const TRACK_DRAG_THRESHOLD_PX = 4;
/** 时间滑块（片段 / 关键帧）吸附阈值（px）：拖动的边缘进入其它片段边缘 / 播放头这么近就吸上去 */
const SNAP_THRESHOLD_PX = 8;

/** 轨道行的纵向几何（拖拽开始时量一次就缓存，移动中只查表） */
interface TrackRowRect {
  top: number;
  bottom: number;
  height: number;
}

/** 时间轴轨道的稳定标识：三种轨道 id 各自命名空间，避免同名 id 撞车 */
function getTimelineTrackKey(kind: TimelineTrackKind, id: string) {
  return `${kind}:${id}`;
}

/**
 * 解析轨道的最终显示顺序：
 * 1. 先按用户保存过的顺序排列（过滤掉已删除的轨道、去重）；
 * 2. 没被记录过的新轨道（新增对象 / 相机 / 角色）按默认顺序追加在后面。
 */
export function resolveTimelineTrackOrder(defaultOrder: string[], savedOrder: string[]): string[] {
  const validKeys = new Set(defaultOrder);
  const seen = new Set<string>();
  const resolved: string[] = [];

  savedOrder.forEach((key) => {
    if (!validKeys.has(key) || seen.has(key)) return;
    seen.add(key);
    resolved.push(key);
  });
  defaultOrder.forEach((key) => {
    if (seen.has(key)) return;
    seen.add(key);
    resolved.push(key);
  });

  return resolved;
}

/** 拖拽落点：落在目标轨道的上方还是下方 */
export type TimelineTrackDropPosition = "before" | "after";

/**
 * 把 sourceKey 移动到 targetKey 的前 / 后（拖拽排序）。
 * 找不到轨道、或移动后顺序没变时原样返回（调用方据此跳过写入）。
 */
export function reorderTimelineTrackKeys(
  order: string[],
  sourceKey: string,
  targetKey: string,
  position: TimelineTrackDropPosition
): string[] {
  if (sourceKey === targetKey) return order;
  if (!order.includes(sourceKey) || !order.includes(targetKey)) return order;

  const withoutSource = order.filter((key) => key !== sourceKey);
  const targetIndex = withoutSource.indexOf(targetKey);
  const insertIndex = position === "after" ? targetIndex + 1 : targetIndex;

  if (insertIndex === order.indexOf(sourceKey)) return order;

  return [...withoutSource.slice(0, insertIndex), sourceKey, ...withoutSource.slice(insertIndex)];
}

/** 轨道行左侧的折叠开关：所有轨道都能折叠（有子轨道的收起子轨道，没有的收起关键帧车道） */
function TimelineTrackCollapseToggle({
  trackLabel,
  trackKindLabel,
  collapsed,
  onToggle,
}: {
  trackLabel: string;
  /** 轨道种类（物体 / 运镜 / 角色），用于区分同名轨道，让无障碍标签唯一 */
  trackKindLabel: string;
  collapsed: boolean;
  onToggle: () => void;
}) {
  const actionLabel = `${collapsed ? "展开" : "折叠"}${trackKindLabel}（${trackLabel}）`;

  return (
    <button
      className="timeline-track-icon-button timeline-track-collapse-button"
      type="button"
      aria-expanded={!collapsed}
      aria-label={actionLabel}
      title={collapsed ? "展开轨道" : "折叠轨道"}
      onClick={(event) => {
        event.stopPropagation();
        onToggle();
      }}
    >
      {collapsed ? (
        <ChevronRight aria-hidden="true" size={13} strokeWidth={2.2} />
      ) : (
        <ChevronDown aria-hidden="true" size={13} strokeWidth={2.2} />
      )}
    </button>
  );
}

export function TimelinePanel() {
  const project = useDirectorStore((state) => state.project);
  const selectedObjectId = useDirectorStore((state) => state.selectedObjectId);

  const addKeyframe = useDirectorStore((state) => state.addKeyframe);
  const removeKeyframe = useDirectorStore((state) => state.removeKeyframe);
  const updateKeyframeValue = useDirectorStore((state) => state.updateKeyframeValue);
  const applyKeyframeToObjectTransform = useDirectorStore((state) => state.applyKeyframeToObjectTransform);
  const addCameraKeyframe = useDirectorStore((state) => state.addCameraKeyframe);
  const removeCameraKeyframe = useDirectorStore((state) => state.removeCameraKeyframe);
  const updateCameraKeyframeValue = useDirectorStore((state) => state.updateCameraKeyframeValue);
  const updateKeyframeEasing = useDirectorStore((state) => state.updateKeyframeEasing);
  const updateExportSettings = useDirectorStore((state) => state.updateExportSettings);
  const updateCameraKeyframeEasing = useDirectorStore((state) => state.updateCameraKeyframeEasing);
  const setCameraKeyframeTransition = useDirectorStore((state) => state.setCameraKeyframeTransition);
  const setCameraKeyframeTimes = useDirectorStore((state) => state.setCameraKeyframeTimes);
  const applyCameraKeyframeToShot = useDirectorStore((state) => state.applyCameraKeyframeToShot);
  const setActiveCamera = useDirectorStore((state) => state.setActiveCamera);
  const setTimelineDuration = useDirectorStore((state) => state.setTimelineDuration);
  const clearAllKeyframes = useDirectorStore((state) => state.clearAllKeyframes);
  const selectedTrajectoryPoint = useDirectorStore((state) => state.selectedTrajectoryPoint);
  const selectTrajectoryPoint = useDirectorStore((state) => state.selectTrajectoryPoint);
  const removeTrajectoryPoint = useDirectorStore((state) => state.removeTrajectoryPoint);
  const updateTrajectoryPoint = useDirectorStore((state) => state.updateTrajectoryPoint);
  const setTrajectoryPointTimes = useDirectorStore((state) => state.setTrajectoryPointTimes);
  const setTrajectoryClipStart = useDirectorStore((state) => state.setTrajectoryClipStart);
  const setTrajectoryClipTrimStart = useDirectorStore((state) => state.setTrajectoryClipTrimStart);
  const setTrajectoryClipEnd = useDirectorStore((state) => state.setTrajectoryClipEnd);
  const setMotionClipStart = useDirectorStore((state) => state.setMotionClipStart);
  const setMotionClipTrimStart = useDirectorStore((state) => state.setMotionClipTrimStart);
  const setMotionClipEnd = useDirectorStore((state) => state.setMotionClipEnd);
  const addMotionClip = useDirectorStore((state) => state.addMotionClip);
  const updateMotionClip = useDirectorStore((state) => state.updateMotionClip);
  const updateMotionClipTime = useDirectorStore((state) => state.updateMotionClipTime);
  const removeMotionClip = useDirectorStore((state) => state.removeMotionClip);
  const selectMotionClip = useDirectorStore((state) => state.selectMotionClip);
  const selectedMotionClipId = useDirectorStore((state) => state.selectedMotionClipId);
  const selectObject = useDirectorStore((state) => state.selectObject);
  const timelineTrackOrder = useDirectorStore((state) => state.timelineTrackOrder);
  const timelineCollapsedTracks = useDirectorStore((state) => state.timelineCollapsedTracks);
  const setTimelineTrackOrder = useDirectorStore((state) => state.setTimelineTrackOrder);
  const toggleTimelineTrackCollapsed = useDirectorStore((state) => state.toggleTimelineTrackCollapsed);
  const setTimelinePlaybackSettings = useDirectorStore((state) => state.setTimelinePlaybackSettings);

  const isPlaying = usePlaybackStore((state) => state.isPlaying);
  const playhead = usePlaybackStore((state) => state.playhead);
  const duration = usePlaybackStore((state) => state.duration);
  const togglePlaying = usePlaybackStore((state) => state.togglePlaying);
  const stopPlayback = usePlaybackStore((state) => state.stop);
  const setPlaying = usePlaybackStore((state) => state.setPlaying);
  const setPlayhead = usePlaybackStore((state) => state.setPlayhead);
  const setScrubbing = usePlaybackStore((state) => state.setScrubbing);

  // 帧率 / 循环来自工程设置（旧工程在 store 迁移时补默认值）
  const fps = project.timeline.fps ?? DEFAULT_TIMELINE_FPS;
  const loop = project.timeline.loop === true;
  // 时长编辑以工程里的值为准：playbackStore 那份是给播放用的副本，靠帧驱动同步、会慢一拍，
  // 连续拖 / 连续点微调按钮时会把上一次的结果吞掉。
  const editableDuration = project.timeline.duration ?? duration;

  const [selectedKeyframe, setSelectedKeyframe] = useState<SelectedKeyframe | null>(null);
  /** 选中的片段（轨迹条 / 运镜条）：点条本体或条上的关键帧都会选中它 */
  const [selectedClip, setSelectedClip] = useState<string | null>(null);
  const [isRecording, setIsRecording] = useState(false);
  const [exportMenuOpen, setExportMenuOpen] = useState(false);
  // 设置弹窗：fps / loop 先放草稿里改，点「完成」才写回工程（不点则原样丢弃）
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [draftFps, setDraftFps] = useState(fps);
  const [draftLoop, setDraftLoop] = useState(loop);
  // 帧率档位：固定常用值；若工程里是档位外的帧率（历史数据），也一并列出避免被吞
  const fpsOptions = Array.from(new Set([...TIMELINE_FPS_TIERS, draftFps])).sort((a, b) => a - b);
  // 多机位切换过渡草稿（全局默认）：类型 + 时长，点「完成」才写回工程
  const [draftTransitionType, setDraftTransitionType] = useState<CameraTransitionType>("smooth");
  const [draftTransitionDuration, setDraftTransitionDuration] = useState(DEFAULT_CAMERA_TRANSITION_DURATION);
  // 导出设置草稿：分辨率 / 画质 / 自定义码率 / 编码档位，点「完成」才写回工程
  const [draftResolution, setDraftResolution] = useState(720);
  const [draftQuality, setDraftQuality] = useState<ExportQuality>("medium");
  const [draftCustomBitrate, setDraftCustomBitrate] = useState(8_000_000);
  const [draftCodec, setDraftCodec] = useState<ExportCodecPreference>("auto");
  /** 拖动总时长：按下时记一次起始时长与指针位置，移动中只做线性换算 */
  const durationDragRef = useRef<{ pointerId: number; startClientX: number; startDuration: number } | null>(null);
  // 轨道拖拽：生命周期（谁在拖 → 高亮 / 毛玻璃降级）走 React state，一次拖拽只重渲染两次；
  // 高频的落点线则完全不经过 React（ref + transform），详见 getTrackDragProps。
  const [draggingTrackKey, setDraggingTrackKey] = useState<string | null>(null);
  /** 当前在「机位切换」概览轨中选中的过渡（按切点关键帧 id 定位），用于弹出编辑器 */
  const [selectedCutKeyframeId, setSelectedCutKeyframeId] = useState<string | null>(null);
  useEffect(() => {
    if (!selectedCutKeyframeId) return;
    function handlePointerDown(event: MouseEvent) {
      const target = event.target as HTMLElement;
      if (target.closest(".timeline-transition-editor")) return;
      if (target.closest(".timeline-transition-marker")) return;
      setSelectedCutKeyframeId(null);
    }
    document.addEventListener("mousedown", handlePointerDown);
    return () => document.removeEventListener("mousedown", handlePointerDown);
  }, [selectedCutKeyframeId]);
  const dropTargetRef = useRef<{ key: string; position: TimelineTrackDropPosition } | null>(null);
  const dropIndicatorRef = useRef<HTMLDivElement | null>(null);
  /** 吸附参考线：拖动片段 / 关键帧时，边缘吸到其它片段边缘或播放头处显示一条高亮竖线 */
  const snapIndicatorRef = useRef<HTMLDivElement | null>(null);
  /** 当前这一次指针手势（按下 → 超过阈值才算真的开始拖拽，否则当普通点击放行） */
  const dragGestureRef = useRef<{
    pointerId: number;
    sourceKey: string;
    active: boolean;
    startX: number;
    startY: number;
  } | null>(null);
  /**
   * 正在拖时间滑块（人物轨迹条 / 运镜片段条共用）：
   * - point：拖单个关键帧，只改这一帧的时间
   * - duration：拖条右端把手，整段时长按比例缩放
   * - clip：拖条本体，整段左右平移（可以脱离 0s 往后放）
   * - trimStart：拖条左端把手，只挪片段起点（各轨迹点原地不动）
   */
  const timeDragRef = useRef<{
    pointerId: number;
    owner: TimelineTimeDragOwner;
    kind: "point" | "duration" | "clip" | "trimStart";
    index: number;
    startTimes: number[];
    /** 片段左端在按下时的位置（平移基准） */
    startEdge: number;
    /** 片段右端在按下时的位置（轨迹最后一点停留结束，作为拖关键帧的上界） */
    endEdge: number;
    startClientX: number;
    secondsPerPixel: number;
    /** 拖拽开始时该角色的全部动作片段（用于「拖动换位」：依据原始布局做确定性重排） */
    startClips?: MotionClip[];
  } | null>(null);
  /** 拖拽开始时一次性量好的行几何：移动中只查表，绝不在事件里读布局（强制同步布局 = layout thrashing） */
  const trackRectsRef = useRef(new Map<string, TrackRowRect>());
  const trackLayoutOriginRef = useRef(0);

  const panelRef = useRef<HTMLElement | null>(null);
  const exportMenuRef = useRef<HTMLDivElement | null>(null);

  // 高度由内容决定（不再手动拖拽）：把实测高度发布成 CSS 变量，
  // 让视口快捷工具条、画幅浮层和左右悬浮卡片自动让出时间轴占用的空间。
  useEffect(() => {
    const element = panelRef.current;
    if (!element) return;

    const root = document.documentElement;
    const publishHeight = () => {
      const height = element.getBoundingClientRect().height;
      if (height > 0) root.style.setProperty("--timeline-panel-height", `${Math.round(height)}px`);
    };

    publishHeight();

    if (typeof ResizeObserver === "undefined") {
      window.addEventListener("resize", publishHeight);
      return () => {
        window.removeEventListener("resize", publishHeight);
        root.style.removeProperty("--timeline-panel-height");
      };
    }

    const resizeObserver = new ResizeObserver(publishHeight);
    resizeObserver.observe(element);

    return () => {
      resizeObserver.disconnect();
      root.style.removeProperty("--timeline-panel-height");
    };
  }, []);

  useEffect(() => {
    if (!exportMenuOpen) return;

    function closeExportMenuOnOutsidePointerDown(event: PointerEvent) {
      if (event.target instanceof Node && exportMenuRef.current?.contains(event.target)) return;
      setExportMenuOpen(false);
    }

    function closeExportMenuOnEscape(event: KeyboardEvent) {
      if (event.key === "Escape") setExportMenuOpen(false);
    }

    document.addEventListener("pointerdown", closeExportMenuOnOutsidePointerDown);
    document.addEventListener("keydown", closeExportMenuOnEscape);

    return () => {
      document.removeEventListener("pointerdown", closeExportMenuOnOutsidePointerDown);
      document.removeEventListener("keydown", closeExportMenuOnEscape);
    };
  }, [exportMenuOpen]);

  // 轨迹关键帧没有独立的删除按钮，选中态（.is-selected）就是「按 Delete 会删掉它」的唯一提示，
  // 所以点到别处（轨道空白、别的轨道、面板其它区域，甚至时间轴之外）就必须取消选中并移走焦点，
  // 否则选中高亮和焦点框会一直留在那颗关键帧上，看起来像还能按 Delete 删它。
  useEffect(() => {
    if (!selectedTrajectoryPoint) return;

    function clearTrajectoryPointOnOutsidePointerDown(event: PointerEvent) {
      const target = event.target instanceof Element ? event.target : null;

      // 点在轨迹关键帧自己身上不算「别处」——那一下是选中它 / 拖它改时间
      if (target?.closest(".timeline-keyframe-trajectory")) return;
      // 右侧「轨迹点」属性面板编辑的就是这个点，点它（滑块 / 数值框 / 标题栏）也不算别处，
      // 否则每改一次位置或角度，选中态就被清掉、面板跳回角色属性卡片。
      if (target?.closest(".trajectory-point-inspector")) return;

      selectTrajectoryPoint(null, null);

      // 焦点还停在那颗关键帧上时一并移走，避免焦点框留在一个已经没选中的元素上
      const active = document.activeElement;
      if (active instanceof HTMLElement && active.classList.contains("timeline-keyframe-trajectory")) {
        active.blur();
      }
    }

    document.addEventListener("pointerdown", clearTrajectoryPointOnOutsidePointerDown);

    return () => document.removeEventListener("pointerdown", clearTrajectoryPointOnOutsidePointerDown);
  }, [selectedTrajectoryPoint, selectTrajectoryPoint]);

  // 设置弹窗：Esc 直接关掉（等同取消，草稿值丢弃）
  useEffect(() => {
    if (!settingsOpen) return;

    function closeSettingsOnEscape(event: KeyboardEvent) {
      if (event.key === "Escape") setSettingsOpen(false);
    }

    document.addEventListener("keydown", closeSettingsOnEscape);
    return () => document.removeEventListener("keydown", closeSettingsOnEscape);
  }, [settingsOpen]);

  const timeline = project.timeline;

  // 选中目标解析：物体 / 相机
  const selectedObject = project.objects.find((o) => o.id === selectedObjectId) ?? null;
  const activeCamera =
    project.activeCameraId
      ? project.cameras.find((c) => c.id === project.activeCameraId) ?? null
      : null;
  // 打关键帧时：选中非相机物体 -> 给该物体打位姿关键帧；
  // 否则（选中相机物体 / 没选中任何物体）-> 给「当前机位（activeCameraId）」打运镜关键帧。
  const addTargetsCamera = Boolean(activeCamera) && (!selectedObject || selectedObject.kind === "camera");
  const canAddCameraKeyframe = Boolean(activeCamera && activeCamera.targetMode === "manual");

  function snapshotObjectTransform(): KeyframeTransformValue {
    if (!selectedObject) throw new Error("no selected object");
    return {
      position: [...selectedObject.transform.position] as [number, number, number],
      rotation: [...selectedObject.transform.rotation] as [number, number, number],
      scale: [...selectedObject.transform.scale] as [number, number, number],
    };
  }

  function handleAddKeyframe() {
    if (addTargetsCamera) {
      if (!activeCamera || activeCamera.targetMode !== "manual") return;
      // 直接按「当前机位」打关键帧：运镜关键帧始终属于 activeCameraId，
      // 与选中了哪个物体无关，这样多个机位都能各自打关键帧
      // （旧逻辑只认「选中物体关联的机位」，第二个机位往往因为没选中其物体而打不上）。
      addCameraKeyframe(activeCamera.id, playhead, {
        position: [...activeCamera.transform.position] as [number, number, number],
        lookRotation: [...activeCamera.lookRotation] as [number, number, number],
        fov: activeCamera.fov,
      });
    } else if (selectedObject && selectedObject.kind !== "character") {
      // 角色由轨迹（trajectory）驱动，不占 transform 关键帧轨道，
      // 否则同一个角色会同时出现「物体轨道」和「角色轨道」两条。
      addKeyframe(selectedObject.id, playhead, snapshotObjectTransform());
    }
  }

  function handleSelectObjectKeyframe(objectId: string, keyframeId: string, time: number, value: KeyframeTransformValue) {
    setPlaying(false);
    setPlayhead(time);
    applyKeyframeToObjectTransform(objectId, value);
    setSelectedKeyframe({ kind: "object", targetId: objectId, keyframeId });
  }
  function handleSelectCameraKeyframe(cameraId: string, keyframeId: string, time: number, value: CameraKeyframeValue) {
    setPlaying(false);
    setPlayhead(time);
    applyCameraKeyframeToShot(cameraId, value);
    // 把该机位设为当前编辑机位：机位面板（CameraPanel）始终按 activeCameraId 编辑，
    // 否则在「机位视角」或当前激活机位与选中物体不一致时，编辑的是别的机位，改动写不回这个关键帧。
    setActiveCamera(cameraId);
    setSelectedKeyframe({ kind: "camera", targetId: cameraId, keyframeId });
  }

  function handleUpdateSelected() {
    if (!selectedKeyframe) return;
    if (selectedKeyframe.kind === "object" && selectedObject) {
      updateKeyframeValue(selectedKeyframe.targetId, selectedKeyframe.keyframeId, snapshotObjectTransform());
    } else if (selectedKeyframe.kind === "camera") {
      // 直接读「这个关键帧所属机位」的当前机位值写回，而不是 selectedShot
      // （selectedShot 是「选中物体关联的机位」，在机位视角 / 激活机位与选中物体不一致时会对错机位，导致改了角度却写不回关键帧）。
      const camera = project.cameras.find((c) => c.id === selectedKeyframe.targetId);
      if (camera) {
        updateCameraKeyframeValue(selectedKeyframe.targetId, selectedKeyframe.keyframeId, {
          position: [...camera.transform.position] as [number, number, number],
          lookRotation: [...camera.lookRotation] as [number, number, number],
          fov: camera.fov,
        });
      }
    }
  }
  function handleDeleteSelected() {
    if (selectedTrajectoryPoint) {
      removeTrajectoryPoint(selectedTrajectoryPoint.objectId, selectedTrajectoryPoint.pointId);
      return;
    }
    if (!selectedKeyframe) return;
    if (selectedKeyframe.kind === "object") {
      removeKeyframe(selectedKeyframe.targetId, selectedKeyframe.keyframeId);
    } else {
      removeCameraKeyframe(selectedKeyframe.targetId, selectedKeyframe.keyframeId);
    }
    setSelectedKeyframe(null);
  }

  /** 选中关键帧当前使用的缓动曲线（用于下拉框的选中项） */
  const selectedKeyframeEasing: EasingKind = useMemo(() => {
    if (!selectedKeyframe) return "linear";
    const findEasing = (track: { keyframes: { id: string; easing?: EasingKind }[] } | undefined) =>
      track?.keyframes.find((k) => k.id === selectedKeyframe.keyframeId)?.easing ?? "linear";
    if (selectedKeyframe.kind === "object") {
      return findEasing(project.timeline.tracks.find((t) => t.objectId === selectedKeyframe.targetId));
    }
    return findEasing(project.timeline.cameraTracks.find((t) => t.cameraId === selectedKeyframe.targetId));
  }, [selectedKeyframe, project.timeline]);

  function handleEasingChange(event: ChangeEvent<HTMLSelectElement>) {
    if (!selectedKeyframe) return;
    const easing = event.target.value as EasingKind;
    if (selectedKeyframe.kind === "object") {
      updateKeyframeEasing(selectedKeyframe.targetId, selectedKeyframe.keyframeId, easing);
    } else {
      updateCameraKeyframeEasing(selectedKeyframe.targetId, selectedKeyframe.keyframeId, easing);
    }
  }

  /** 人物轨迹上的「轨迹关键帧」：轨迹点本身就是关键帧，点它即选中对应轨迹点并把指针定位到该点时间 */
  function handleSelectTrajectoryKeyframe(objectId: string, pointId: string, time: number) {
    setPlaying(false);
    setPlayhead(time);
    selectTrajectoryPoint(objectId, pointId);
  }

  /** 总时长微调（上下按钮 / 键盘左右键）：按 0.1s 刻度走，统一交给 store 夹取 */
  function nudgeDuration(offsetSeconds: number) {
    setTimelineDuration(normalizeTimelineDuration(alignTimelineDuration(editableDuration + offsetSeconds)));
  }

  /**
   * 总时长拖动把手（「总时长」左边的双向箭头）：左右拖动减 / 加总时长。
   * 灵敏度固定（25px = 1s）并对齐到 0.1s，避免拖一下跳一大截。
   */
  function handleDurationDragMove(event: ReactPointerEvent<HTMLElement>) {
    const drag = durationDragRef.current;
    if (!drag || drag.pointerId !== event.pointerId) return;

    event.preventDefault();
    const deltaSeconds = (event.clientX - drag.startClientX) / TIMELINE_DURATION_DRAG_PIXELS_PER_SECOND;
    setTimelineDuration(normalizeTimelineDuration(alignTimelineDuration(drag.startDuration + deltaSeconds)));
  }

  function handleDurationDragEnd(event: ReactPointerEvent<HTMLElement>) {
    const drag = durationDragRef.current;
    if (!drag || drag.pointerId !== event.pointerId) return;

    durationDragRef.current = null;
    try {
      event.currentTarget.releasePointerCapture(event.pointerId);
    } catch {
      // jsdom 等环境不支持 pointer capture，忽略后仍能继续拖动
    }
  }

  function getDurationDragProps() {
    return {
      onPointerDown: (event: ReactPointerEvent<HTMLElement>) => {
        if (event.button !== 0) return;
        // 这次手势归总时长把手，不要被下面的轨道拖拽抢走
        event.stopPropagation();
        durationDragRef.current = {
          pointerId: event.pointerId,
          startClientX: event.clientX,
          startDuration: editableDuration,
        };
        try {
          event.currentTarget.setPointerCapture(event.pointerId);
        } catch {
          // 同上
        }
      },
      onPointerMove: handleDurationDragMove,
      onPointerUp: handleDurationDragEnd,
      onPointerCancel: handleDurationDragEnd,
    };
  }

  function openSettings() {
    // 每次打开都从当前工程值重新生成草稿，避免上次没点「完成」的残留值
    setDraftFps(fps);
    setDraftLoop(loop);
    setDraftTransitionType(project.timeline.cameraTransition.type);
    setDraftTransitionDuration(project.timeline.cameraTransition.duration);
    setDraftResolution(project.exportSettings.resolutionShortEdge);
    setDraftQuality(project.exportSettings.quality);
    setDraftCustomBitrate(project.exportSettings.customBitrate);
    setDraftCodec(project.exportSettings.codec);
    setSettingsOpen(true);
  }

  /** 「完成」才保存并应用：帧率 / 循环 / 过渡 / 导出设置一次性写回工程，弹窗随之关闭 */
  function confirmSettings() {
    setTimelinePlaybackSettings({
      fps: normalizeTimelineFps(draftFps),
      loop: draftLoop,
      cameraTransition: {
        type: draftTransitionType,
        duration: normalizeCameraTransitionDuration(draftTransitionDuration),
      },
    });
    updateExportSettings({
      resolutionShortEdge: draftResolution,
      quality: draftQuality,
      customBitrate: draftCustomBitrate,
      codec: draftCodec,
    });
    setSettingsOpen(false);
  }

  function handleClearAll() {
    if (timeline.tracks.length === 0 && timeline.cameraTracks.length === 0) return;
    if (window.confirm("确定清空所有关键帧吗？此操作可用撤销恢复。")) {
      clearAllKeyframes();
      setSelectedKeyframe(null);
    }
  }

  async function handleExportVideo(view: VideoExportView) {
    setIsRecording(true);
    try {
      await exportVideo(view);
    } catch (error) {
      console.error("[videoExport]", error);
      window.alert(error instanceof Error ? error.message : "视频导出失败");
    } finally {
      setIsRecording(false);
    }
  }

  // 刻度尺本身就是时间指针：点击 / 拖动定位，方向键 / Home / End 微调
  const rulerRef = useRef<HTMLDivElement | null>(null);
  const rulerRectRef = useRef<DOMRect | null>(null);
  const [isScrubbing, setIsScrubbing] = useState(false);

  const rulerTicks = useMemo(() => getTimelineRulerTicks(duration), [duration]);
  const rulerMinorTicks = useMemo(
    () => getTimelineRulerMinorTicks(duration, getTimelineRulerStep(duration)),
    [duration]
  );
  // 刻度节点缓存住：拖拽 / 擦洗导致的重渲染不会再去 diff 上百个刻度元素
  const rulerTickNodes = useMemo(
    () => (
      <>
        {rulerMinorTicks.map((tick) => (
          <span
            className="timeline-ruler-minor-tick"
            key={`minor-${tick.value}`}
            style={{ left: `${tick.percent}%` }}
          />
        ))}
        {rulerTicks.map((tick) => (
          <span className="timeline-ruler-tick" key={tick.value} style={{ left: `${tick.percent}%` }}>
            {formatRulerTick(tick.value)}
          </span>
        ))}
      </>
    ),
    [rulerMinorTicks, rulerTicks]
  );
  const playheadFrame = getTimelineFrame(playhead, fps);
  const totalFrames = getTimelineFrame(duration, fps);
  const playheadPercent = duration === 0 ? 0 : Math.min(100, Math.max(0, (playhead / duration) * 100));
  const hasKeyframes = timeline.tracks.length > 0 || timeline.cameraTracks.length > 0;
  // 相邻刻度间距（百分比）交给 CSS：轨道底色用它画贯穿网格线，与刻度尺天然对齐
  const tickPercent = rulerTicks.length > 1 ? rulerTicks[1].percent : 100;
  const gridStyle = { "--timeline-tick-percent": `${tickPercent}%` } as CSSProperties;
  // 人物轨道：每个角色一条，内含「动作」与「人物轨迹」两条子轨道
  const characterObjects = project.objects.filter((item) => item.kind === "character");

  // 轨道顺序：默认「物体轨道 → 相机运镜轨道 → 人物轨道」，用户可以上移 / 下移调整。
  // 视觉顺序靠 flex order 实现，DOM 顺序保持稳定（不影响既有查询与无障碍阅读顺序）。
  // 角色由轨迹驱动，只走「角色轨道」；其 transform 关键帧不单独占一条「物体轨道」，
  // 否则同一个角色会在时间轴上出现两条。
  const nonCharacterObjectIds = new Set(
    project.objects.filter((item) => item.kind !== "character").map((item) => item.id)
  );
  const defaultTrackKeys = [
    ...timeline.tracks
      .filter((track) => nonCharacterObjectIds.has(track.objectId))
      .map((track) => getTimelineTrackKey("object", track.objectId)),
    ...timeline.cameraTracks.map((track) => getTimelineTrackKey("camera", track.cameraId)),
    ...characterObjects.map((item) => getTimelineTrackKey("character", item.id)),
  ];
  const orderedTrackKeys = resolveTimelineTrackOrder(defaultTrackKeys, timelineTrackOrder);
  const trackOrderIndex = new Map(orderedTrackKeys.map((key, index) => [key, index]));

  function getTrackOrder(key: string) {
    return trackOrderIndex.get(key) ?? 0;
  }

  function renderCollapseToggle(trackKey: string, trackLabel: string, trackKindLabel: string, collapsed: boolean) {
    return (
      <TimelineTrackCollapseToggle
        trackLabel={trackLabel}
        trackKindLabel={trackKindLabel}
        collapsed={collapsed}
        onToggle={() => toggleTimelineTrackCollapsed(trackKey)}
      />
    );
  }

  /** 拖拽开始时量一次所有轨道的几何（此后拖拽期间不再读布局） */
  function measureTrackRows() {
    const panel = panelRef.current;
    const body = panel?.querySelector<HTMLElement>(".timeline-grid-body");
    trackLayoutOriginRef.current = body ? body.getBoundingClientRect().top : 0;

    const rects = new Map<string, { top: number; bottom: number; height: number }>();
    panel?.querySelectorAll<HTMLElement>("[data-track-key]").forEach((row) => {
      const key = row.dataset.trackKey;
      if (!key) return;

      const rect = row.getBoundingClientRect();
      rects.set(key, { top: rect.top, bottom: rect.bottom, height: rect.height });
    });
    trackRectsRef.current = rects;
  }

  /** 把落点线移到目标行的上 / 下边缘：只改 transform（合成层位移），不触发行重绘 */
  function showDropIndicator(rowKey: string, position: TimelineTrackDropPosition) {
    const indicator = dropIndicatorRef.current;
    const rect = trackRectsRef.current.get(rowKey);
    if (!indicator || !rect) return;

    const y = (position === "before" ? rect.top : rect.bottom) - trackLayoutOriginRef.current;
    indicator.style.transform = `translateY(${y}px)`;
    indicator.classList.add("is-visible");
  }

  function hideDropIndicator() {
    dropIndicatorRef.current?.classList.remove("is-visible");
  }

  /** 收尾：落点线、拖拽状态、拖拽期视觉降级一并还原 */
  function clearTrackDragStyles() {
    dropTargetRef.current = null;
    trackRectsRef.current = new Map();
    dragGestureRef.current = null;
    hideDropIndicator();
    setDraggingTrackKey(null);
    document.body.classList.remove("is-timeline-dragging");
  }

  /** 行内真正的按钮 / 输入框自己处理交互，不抢来做轨道拖拽（关键帧等 role=button 的块仍可当拖拽把手） */
  function isTrackDragBlockedTarget(target: EventTarget | null) {
    return target instanceof Element && Boolean(target.closest("button, input, textarea, select, a"));
  }

  /** 由指针位置找落点行：优先命中的行，都没命中就取最近的一行（拖到末尾之外也能落到最后一行） */
  function findDropTargetAt(clientY: number) {
    let hit: { key: string; rect: TrackRowRect } | null = null;
    let nearest: { key: string; rect: TrackRowRect } | null = null;
    let nearestDistance = Number.POSITIVE_INFINITY;

    for (const [key, rect] of trackRectsRef.current) {
      if (clientY >= rect.top && clientY <= rect.bottom) {
        hit = { key, rect };
        break;
      }

      const distance = Math.min(Math.abs(clientY - rect.top), Math.abs(clientY - rect.bottom));
      if (distance < nearestDistance) {
        nearestDistance = distance;
        nearest = { key, rect };
      }
    }

    const target = hit ?? nearest;
    if (!target) return null;

    const { key, rect } = target;
    const position: TimelineTrackDropPosition = clientY - rect.top < rect.height / 2 ? "before" : "after";
    return { key, position };
  }

  function handleTrackPointerDown(event: ReactPointerEvent<HTMLDivElement>, trackKey: string) {
    if (event.button !== 0) return;
    if (isTrackDragBlockedTarget(event.target)) return;

    dragGestureRef.current = {
      pointerId: event.pointerId,
      sourceKey: trackKey,
      active: false,
      startX: event.clientX,
      startY: event.clientY,
    };
  }

  /**
   * 点轨道空白处 = 取消所有已选中的片段 / 关键帧 / 轨迹点 / 动作片段。
   * 片段 / 关键帧 / 各类手柄自己的手势里会 stopPropagation，正常情况冒泡不到这里；
   * 但手势可能因为尺寸未就绪等原因提前返回（那时还没走到 stopPropagation），
   * 所以这里再按事件来源兜一层，避免把刚选中的条目立刻清掉。
   */
  function handleTimelineGridPointerDown(event: ReactPointerEvent<HTMLDivElement>) {
    // 点在交互元素（片段条 / 关键帧 / 拖拽把手 / 删除按钮 / 添加按钮 / 折叠开关）上不算空白处，
    // 那些手势自己会处理选中，这里不能清掉它们。
    if (
      event.target instanceof Element &&
      event.target.closest(
        ".timeline-trajectory-bar, .timeline-keyframe, .timeline-trajectory-trim, .timeline-clip-delete, .timeline-add-clip-button, .timeline-track-icon-button"
      )
    ) {
      return;
    }

    // 点轨道空白处：取消所有已选中项，让右侧编辑面板回到未选中态。
    setSelectedClip(null);
    setSelectedKeyframe(null);
    selectTrajectoryPoint(null, null);
    selectMotionClip(null);
  }

  /**
   * 片段是否处于选中态。只有一个来源：`selectedClip` ——
   * 任何一次片段手势（拖条本体 / 拖把手 / 拖条上的关键帧）都会把这条片段标成选中，
   * 点轨道空白处取消。不跟关键帧 / 轨迹点选中做联动，是为了让「点空白处取消选中」始终有效。
   */
  function isClipSelected(kind: "trajectory" | "camera" | "motion" | "motionClip", id: string) {
    return selectedClip === getTimelineClipKey(kind, id);
  }

  /** 拖整段时长（条右端把手 / 键盘微调）：
   *  - 运镜：末帧落到 newEnd，其余关键帧按比例缩放，片段起点固定；
   *  - 人物轨迹：末点不再等于时间结束位置，这条把手改的是「停留时长」（角色走完最后一点后
   *    原地停留到这一刻），所以只写 trajectoryEndTime，不动各轨迹点的时间。 */
  function scaleClipDuration(
    owner: TimelineTimeDragOwner,
    times: number[],
    startEdge: number,
    deltaSeconds: number
  ) {
    const targetEnd =
      (owner.kind === "trajectory" ? startEdge : times[times.length - 1] ?? startEdge) + deltaSeconds;

    if (owner.kind === "trajectory") {
      setTrajectoryClipEnd(owner.objectId, targetEnd);
      return;
    }

    if (owner.kind === "motion") {
      setMotionClipEnd(owner.objectId, targetEnd);
      return;
    }

    if (owner.kind === "motionClip") {
      updateMotionClipTime(owner.objectId, owner.clipId, times[0], targetEnd, times[0]);
      return;
    }

    setCameraKeyframeTimes(owner.cameraId, scaleCameraKeyframeTimes(times, targetEnd, duration));
  }

  /** 拖单个关键帧：只改它自己的时间（被前后邻居夹住；轨迹最后一点还受停留结束时间约束） */
  function moveClipKeyframe(
    owner: TimelineTimeDragOwner,
    times: number[],
    index: number,
    startEdge: number,
    deltaSeconds: number,
    endEdge = duration
  ) {
    // 动作片段没有「单个关键帧」可拖（只有起点/终点两端，分别由 trimStart / duration 把手负责）
    if (owner.kind === "motion" || owner.kind === "motionClip") return;

    const targetTime = (times[index] ?? 0) + deltaSeconds;

    if (owner.kind === "trajectory") {
      const nextTimes = moveTrajectoryPointTime(times, index, targetTime, duration, startEdge, endEdge);
      updateTrajectoryPoint(owner.objectId, owner.pointId, { time: nextTimes[index] });
      return;
    }

    setCameraKeyframeTimes(owner.cameraId, moveCameraKeyframeTime(times, index, targetTime, duration));
  }

  /**
   * 拖条本体：整段片段左右平移，可以脱离 0s 往后放（前面那段时间角色原地等待 / 相机保持首帧机位）。
   * 先把位移夹住（片段两端都不越出时间轴），再整体平移 —— 片段刚性移动，各关键帧的节奏不变。
   */
  function shiftClip(
    owner: TimelineTimeDragOwner,
    times: number[],
    startEdge: number,
    deltaSeconds: number,
    originalClips?: MotionClip[]
  ) {
    const endEdge = times.length > 0 ? times[times.length - 1] : startEdge;
    const minShift = -startEdge;
    const maxShift = Math.max(duration - endEdge, minShift);
    const shift = Math.min(Math.max(deltaSeconds, minShift), maxShift);
    // 顶到头（例如片段已经占满整条时间轴）时什么都不写，避免留下没有变化的一步撤销
    if (shift === 0) return;

    if (owner.kind === "trajectory") {
      setTrajectoryClipStart(owner.objectId, startEdge + shift);
      return;
    }

    if (owner.kind === "motion") {
      setMotionClipStart(owner.objectId, startEdge + shift);
      return;
    }

    if (owner.kind === "motionClip") {
      updateMotionClipTime(
        owner.objectId,
        owner.clipId,
        startEdge + shift,
        times[times.length - 1] + shift,
        times[0],
        originalClips
      );
      return;
    }

    setCameraKeyframeTimes(owner.cameraId, times.map((time) => time + shift));
  }

  /**
   * 修剪起点（条左端把手），和右端把手对称：
   *  - 人物轨迹：只挪片段起点 —— 角色在这之前原地等待，各轨迹点与停留结束时间留在原地，
   *    所以「等待多久」变了，走位本身的节奏没变；
   *  - 运镜：末帧固定不动，首帧推到新位置，其余关键帧按比例缩放 —— 和右端把手（首帧固定、
   *    末帧伸缩）正好反过来，整段运镜的节奏保持不变。
   */
  function trimClipStart(
    owner: TimelineTimeDragOwner,
    times: number[],
    startEdge: number,
    deltaSeconds: number
  ) {
    if (owner.kind === "camera") {
      setCameraKeyframeTimes(owner.cameraId, scaleCameraKeyframeStart(times, startEdge + deltaSeconds, duration));
      return;
    }

    if (owner.kind === "motion") {
      setMotionClipTrimStart(owner.objectId, startEdge + deltaSeconds);
      return;
    }

    if (owner.kind === "motionClip") {
      updateMotionClipTime(
        owner.objectId,
        owner.clipId,
        startEdge + deltaSeconds,
        times[1] ?? startEdge,
        times[0]
      );
      return;
    }

    if (owner.kind !== "trajectory") return;

    setTrajectoryClipTrimStart(owner.objectId, startEdge + deltaSeconds);
  }

  /**
   * 时间滑块（人物轨迹条 / 运镜片段条同构）：拖动关键帧改「这一帧的时间」，
   * 拖动条右端把手改「整段时长」（其余帧按比例缩放）。像素 → 秒用轨道宽度换算，宽度只在按下时量一次。
   */
  function beginTimeDrag(
    event: ReactPointerEvent<HTMLElement>,
    owner: TimelineTimeDragOwner,
    kind: "point" | "duration" | "clip" | "trimStart",
    index: number,
    times: number[],
    startEdge = 0,
    endEdge = duration
  ) {
    if (event.button !== 0) return;
    if (isTrackDragBlockedTarget(event.target)) return;

    // 任何一次片段手势（拖条本体 / 拖把手 / 拖关键帧）都先把这段片段标成选中
    const clipOwnerId = owner.kind === "camera" ? owner.cameraId : owner.objectId;
    setSelectedClip(getTimelineClipKey(owner.kind, clipOwnerId));
    // 选中动作片段时同步到 store，供右侧「基础动作」卡片编辑对应的片段
    if (owner.kind === "motionClip") selectMotionClip(owner.clipId);

    const lane = event.currentTarget.closest(".timeline-track-lane");
    const laneWidth = lane instanceof HTMLElement ? lane.getBoundingClientRect().width : 0;
    if (laneWidth <= 0 || duration <= 0) return;

    // 这次手势归时间滑块，轨道行的「拖动排序」不要来抢
    event.stopPropagation();

    timeDragRef.current = {
      pointerId: event.pointerId,
      owner,
      kind,
      index,
      startTimes: [...times],
      startEdge,
      endEdge,
      startClientX: event.clientX,
      secondsPerPixel: duration / laneWidth,
      // 拖动作片段本体时记录按下时刻的全部片段，供「拖动换位」使用
      startClips:
        owner.kind === "motionClip"
          ? (project.objects.find((o) => o.id === owner.objectId)?.characterRig?.motionClips ?? []).map((c) => ({ ...c }))
          : undefined,
    };

    // 拖动时冻结全站毛玻璃：条 / 关键帧每次重绘都会让背后 WebGL 画布重算一次模糊
    document.body.classList.add("is-timeline-dragging");

    try {
      event.currentTarget.setPointerCapture(event.pointerId);
    } catch {
      // jsdom 等环境不支持 pointer capture，忽略后仍能继续拖动
    }
  }

  function handleTimeDragMove(event: ReactPointerEvent<HTMLElement>) {
    const drag = timeDragRef.current;
    if (!drag || drag.pointerId !== event.pointerId) return;

    event.preventDefault();
    event.stopPropagation();

    const rawDelta = (event.clientX - drag.startClientX) * drag.secondsPerPixel;
    // 吸附：把要移动的边缘吸到其它片段边缘 / 播放头（磁性对齐）
    const { delta, snappedTime } = computeSnappedDelta(drag, rawDelta);
    showSnapIndicator(snappedTime);

    if (drag.kind === "duration") {
      scaleClipDuration(drag.owner, drag.startTimes, drag.startEdge, delta);
      return;
    }

    if (drag.kind === "clip") {
      shiftClip(drag.owner, drag.startTimes, drag.startEdge, delta, drag.startClips);
      return;
    }

    if (drag.kind === "trimStart") {
      trimClipStart(drag.owner, drag.startTimes, drag.startEdge, delta);
      return;
    }

    moveClipKeyframe(drag.owner, drag.startTimes, drag.index, drag.startEdge, delta, drag.endEdge);
  }

  function handleTimeDragEnd(event: ReactPointerEvent<HTMLElement>) {
    const drag = timeDragRef.current;
    if (!drag || drag.pointerId !== event.pointerId) return;

    timeDragRef.current = null;
    hideSnapIndicator();
    document.body.classList.remove("is-timeline-dragging");

    try {
      event.currentTarget.releasePointerCapture(event.pointerId);
    } catch {
      // 同上，忽略不支持的环境
    }
  }

  /** 把某个关键帧 / 时长把手 / 条本体接到同一套拖拽手势上 */
  function getTimeDragProps(
    owner: TimelineTimeDragOwner,
    kind: "point" | "duration" | "clip" | "trimStart",
    index: number,
    times: number[],
    startEdge = 0,
    endEdge = duration
  ) {
    return {
      onPointerDown: (event: ReactPointerEvent<HTMLElement>) =>
        beginTimeDrag(event, owner, kind, index, times, startEdge, endEdge),
      onPointerMove: handleTimeDragMove,
      onPointerUp: handleTimeDragEnd,
      onPointerCancel: handleTimeDragEnd,
    };
  }

  type TimeDragGesture = NonNullable<typeof timeDragRef.current>;

  /**
   * 收集拖拽时可吸附的目标时刻：同轨道（同角色 / 同相机）其它片段的边缘 + 播放头。
   * 过滤掉被拖元素自身当前的边缘 / 关键帧时刻，避免「吸回原处」导致无法小幅移动。
   */
  function buildSnapTargets(drag: TimeDragGesture): number[] {
    const targets: number[] = [playhead];
    const { owner } = drag;
    if (owner.kind === "motionClip") {
      const obj = project.objects.find((o) => o.id === owner.objectId);
      for (const c of obj?.characterRig?.motionClips ?? []) {
        if (c.id === owner.clipId) continue;
        targets.push(c.start);
        if (Number.isFinite(c.end)) targets.push(c.end);
      }
    } else if (owner.kind === "trajectory") {
      const track = project.timeline.tracks.find((t) => t.objectId === owner.objectId);
      for (const k of track?.keyframes ?? []) {
        if (k.id === owner.pointId) continue;
        targets.push(k.time);
      }
    } else if (owner.kind === "camera") {
      const track = project.timeline.cameraTracks.find((t) => t.cameraId === owner.cameraId);
      for (const k of track?.keyframes ?? []) targets.push(k.time);
    } else if (owner.kind === "motion") {
      const obj = project.objects.find((o) => o.id === owner.objectId);
      if (obj) {
        const start = getMotionStartTime(obj, duration);
        const end = getMotionEndTime(obj, duration, start);
        targets.push(start, end);
      }
    }

    const selfTimes: number[] = [];
    if (drag.kind === "clip") selfTimes.push(drag.startEdge, drag.endEdge);
    else if (drag.kind === "trimStart") selfTimes.push(drag.startEdge);
    else if (drag.kind === "duration") selfTimes.push(drag.endEdge);
    else if (drag.kind === "point") {
      const t = drag.startTimes[drag.index];
      if (typeof t === "number") selfTimes.push(t);
    }
    return targets.filter((tt) => !selfTimes.some((s) => Math.abs(tt - s) < 1e-6));
  }

  /**
   * 收集「网格类」吸附目标：整帧边界（k/fps）+ 刻度网格主刻度线（与车道里画出的竖网格线一致）。
   * 这是一组「静态基准线」，和动态的同轨片段边缘 / 播放头互补：离后者近时优先吸到后者
   * （保留原有磁性对齐，可对齐到非整帧位置），否则吸到最近的整帧 / 刻度线。
   */
  function buildGridSnapTargets(): number[] {
    const targets: number[] = [];
    // 刻度网格：主刻度线（与车道背景的竖网格线一致），便于吸附对齐到可见网格
    for (const tick of getTimelineRulerTicks(duration)) {
      targets.push(tick.value);
    }
    // 整帧：每帧边界（k/fps），视频按帧导出，关键帧落在整帧上更自然
    const frameCount = Math.floor(duration * fps + 1e-6);
    for (let k = 0; k <= frameCount; k += 1) {
      const tick = k / fps;
      if (tick <= duration + 1e-6) targets.push(tick);
    }
    return targets;
  }

  /**
   * 把候选时刻吸附到最近的目标（在阈值内），否则原样返回。
   */
  function snapTimeToTargets(candidate: number, targets: number[], thresholdSec: number): number {
    let best = candidate;
    let bestDist = thresholdSec;
    for (const t of targets) {
      const d = Math.abs(candidate - t);
      if (d < bestDist) {
        bestDist = d;
        best = t;
      }
    }
    return best;
  }

  /**
   * 根据拖拽手势与原始位移算出「吸附后的位移」以及被吸附到的时刻（未吸附则为 null）。
   * 条本体 / 左端把手吸附起点；右端把手吸附终点；关键帧吸附其自身时刻。
   */
  function computeSnappedDelta(drag: TimeDragGesture, rawDelta: number): { delta: number; snappedTime: number | null } {
    const thresholdSec = SNAP_THRESHOLD_PX * drag.secondsPerPixel;
    let candidate: number;
    let base: number;
    if (drag.kind === "clip" || drag.kind === "trimStart") {
      candidate = drag.startEdge + rawDelta;
      base = drag.startEdge;
    } else if (drag.kind === "duration") {
      candidate = drag.endEdge + rawDelta;
      base = drag.endEdge;
    } else {
      const t = drag.startTimes[drag.index] ?? 0;
      candidate = t + rawDelta;
      base = t;
    }
    // 第一阶段：吸附到同轨其它片段边缘 / 播放头（保留原有磁性对齐，可对齐到非整帧位置）。
    const primarySnapped = snapTimeToTargets(candidate, buildSnapTargets(drag), thresholdSec);
    let snapped = primarySnapped;
    let didSnap = Math.abs(snapped - candidate) > 1e-6;
    // 第二阶段：未吸到片段边缘 / 播放头时，再吸附到整帧 / 刻度网格（对齐到可见网格与帧边界）。
    if (!didSnap) {
      const gridSnapped = snapTimeToTargets(candidate, buildGridSnapTargets(), thresholdSec);
      if (Math.abs(gridSnapped - candidate) > 1e-6) {
        snapped = gridSnapped;
        didSnap = true;
      }
    }
    return { delta: snapped - base, snappedTime: didSnap ? snapped : null };
  }

  /** 显示 / 隐藏吸附参考线（直接改样式，不触发 React 重绘） */
  function showSnapIndicator(time: number | null) {
    const el = snapIndicatorRef.current;
    if (!el) return;
    if (time === null || duration <= 0) {
      el.classList.remove("is-visible");
      return;
    }
    const percent = Math.min(100, Math.max(0, (time / duration) * 100));
    el.style.left = `${percent}%`;
    el.classList.add("is-visible");
  }

  function hideSnapIndicator() {
    snapIndicatorRef.current?.classList.remove("is-visible");
  }

  /** 时长把手支持键盘微调（左右方向键 ±0.1s，按住 Shift ±0.5s） */
  function handleTimeHandleKeyDown(
    event: ReactKeyboardEvent<HTMLElement>,
    owner: TimelineTimeDragOwner,
    times: number[],
    startEdge = 0
  ) {
    const step = event.shiftKey ? 0.5 : 0.1;
    const delta = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
    if (delta === 0 || times.length === 0) return;

    event.preventDefault();
    scaleClipDuration(owner, times, startEdge, delta);
  }

  /** 修剪起点的把手同样支持键盘微调（左右方向键 ±0.1s，按住 Shift ±0.5s） */
  function handleTrimStartKeyDown(
    event: ReactKeyboardEvent<HTMLElement>,
    owner: TimelineTimeDragOwner,
    times: number[],
    startEdge: number
  ) {
    const step = event.shiftKey ? 0.5 : 0.1;
    const delta = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
    if (delta === 0) return;

    event.preventDefault();
    trimClipStart(owner, times, startEdge, delta);
  }

  function handleTrackPointerMove(event: ReactPointerEvent<HTMLDivElement>) {
    const gesture = dragGestureRef.current;
    if (!gesture || gesture.pointerId !== event.pointerId) return;

    if (!gesture.active) {
      // 没超过阈值就是在普通点击（选关键帧等），不能抢走交互
      const moved = Math.abs(event.clientY - gesture.startY) + Math.abs(event.clientX - gesture.startX);
      if (moved < TRACK_DRAG_THRESHOLD_PX) return;

      gesture.active = true;
      // 量一次行几何，之后拖拽期间只查表；同时开启拖拽期视觉降级
      measureTrackRows();
      dropTargetRef.current = null;
      setDraggingTrackKey(gesture.sourceKey);
      document.body.classList.add("is-timeline-dragging");

      try {
        event.currentTarget.setPointerCapture(event.pointerId);
      } catch {
        // jsdom 等环境不支持 pointer capture，忽略后仍能继续拖动
      }
    }

    event.preventDefault();

    const target = findDropTargetAt(event.clientY);
    if (!target) return;
    if (dropTargetRef.current?.key === target.key && dropTargetRef.current.position === target.position) return;

    dropTargetRef.current = target;
    showDropIndicator(target.key, target.position);
  }

  function handleTrackPointerUp(event: ReactPointerEvent<HTMLDivElement>) {
    const gesture = dragGestureRef.current;
    if (!gesture || gesture.pointerId !== event.pointerId) return;

    const { active, sourceKey } = gesture;
    const target = dropTargetRef.current;

    try {
      event.currentTarget.releasePointerCapture(event.pointerId);
    } catch {
      // 同上，忽略不支持的环境
    }

    clearTrackDragStyles();

    if (!active || !target) return;

    const nextOrder = reorderTimelineTrackKeys(orderedTrackKeys, sourceKey, target.key, target.position);
    if (nextOrder === orderedTrackKeys) return;
    setTimelineTrackOrder(nextOrder);
  }

  /**
   * 整行作为一个拖拽单元：按住拖动，落到目标轨道上方 / 下方即完成重排。
   *
   * 这里刻意**不用 HTML5 拖拽（draggable + dragstart/dragover/drop）**：原生拖拽会把 drag image
   * 快照、dragover 风暴、命中测试等一整套开销交给浏览器，我们既控不了频率也控不了代价，
   * 在「全屏 WebGL 画布 + 毛玻璃悬浮面板」这种页面里就是拖一次卡一次。
   * 改用 pointer events 自己实现后，每次指针移动只做：查一次缓存表 + 可能移动一条 transform 线。
   */
  function getTrackDragProps(trackKey: string) {
    return {
      onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => handleTrackPointerDown(event, trackKey),
      onPointerMove: handleTrackPointerMove,
      onPointerUp: handleTrackPointerUp,
      onPointerCancel: handleTrackPointerUp,
    };
  }

  function getTimeFromPointer(clientX: number) {
    const element = rulerRef.current;
    if (!element) return null;

    // 拖动播放头时每次 pointermove 都读 rect 会强制同步布局（拖动最常见的卡顿来源），
    // 一次拖动内刻度尺不会移动，缓存一次即可。
    const rect = rulerRectRef.current ?? element.getBoundingClientRect();
    rulerRectRef.current = rect;
    if (rect.width <= 0) return null;

    const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
    return ratio * duration;
  }

  /** 手动定位一律先暂停播放，避免播放循环把指针立刻推走 */
  function seekTo(time: number) {
    setPlaying(false);
    setPlayhead(time);
  }

  function handleRulerPointerDown(event: ReactPointerEvent<HTMLDivElement>) {
    // 每次开始拖动重新量一次刻度尺（窗口可能刚被缩放）
    rulerRectRef.current = null;
    const time = getTimeFromPointer(event.clientX);
    if (time === null) return;

    event.preventDefault();
    setIsScrubbing(true);
    setScrubbing(true);
    seekTo(time);

    try {
      event.currentTarget.setPointerCapture(event.pointerId);
    } catch {
      // jsdom 等环境不支持 pointer capture，忽略后仍可通过 move/up 拖动
    }
  }

  function handleRulerPointerMove(event: ReactPointerEvent<HTMLDivElement>) {
    if (!isScrubbing) return;

    const time = getTimeFromPointer(event.clientX);
    if (time !== null) setPlayhead(time);
  }

  function handleRulerPointerEnd(event: ReactPointerEvent<HTMLDivElement>) {
    if (!isScrubbing) return;

    setIsScrubbing(false);
    setScrubbing(false);
    rulerRectRef.current = null;
    try {
      event.currentTarget.releasePointerCapture(event.pointerId);
    } catch {
      // 同上，忽略不支持的环境
    }
  }

  function handleRulerKeyDown(event: ReactKeyboardEvent<HTMLDivElement>) {
    const step = duration <= 10 ? 0.1 : 0.5;
    const seekActions: Record<string, () => void> = {
      ArrowLeft: () => seekTo(playhead - step),
      ArrowRight: () => seekTo(playhead + step),
      Home: () => seekTo(0),
      End: () => seekTo(duration),
    };

    const action = seekActions[event.key];
    if (!action) return;

    event.preventDefault();
    action();
  }

  // 焦点在时间轴上时：
  // - 空格键切换播放 / 暂停（正在播放则暂停，暂停或停止则播放）；
  // - Delete / Backspace 删除选中的轨迹点（角色轨迹点没有独立删除按钮，选中后按删除键移除）。
  // 焦点落在原生可激活控件（按钮 / 输入框等）上时交给控件自身处理，避免与它们的行为重复触发。
  function handlePanelKeyDown(event: ReactKeyboardEvent<HTMLElement>) {
    const target = event.target as HTMLElement | null;
    const insideNativeControl = !!(
      target && target.closest("button, input, textarea, select, [contenteditable='true']")
    );

    if (event.key === "Delete" || event.key === "Backspace") {
      if (insideNativeControl) return;
      if (selectedTrajectoryPoint) {
        event.preventDefault();
        handleDeleteSelected();
      }
      return;
    }

    if (event.key !== " " && event.key !== "Spacebar") return;
    if (insideNativeControl) return;
    event.preventDefault();
    togglePlaying();
  }

  const addKeyframeDisabled = addTargetsCamera ? !canAddCameraKeyframe : !selectedObject;
  const addKeyframeTitle = addTargetsCamera
    ? canAddCameraKeyframe
      ? `把相机「${activeCamera?.name}」当前机位记录为 ${formatTime(playhead)} 处的运镜关键帧（快捷键 K）`
      : "锁定物体的相机（targetMode=object）不支持运镜关键帧"
    : selectedObject
      ? `把「${selectedObject.name}」当前位置记录为 ${formatTime(playhead)} 处的关键帧（快捷键 K）`
      : "请先选择一个对象或相机";

  return (
    <section
      className={`timeline-panel${draggingTrackKey ? " is-track-dragging" : ""}`}
      aria-label="时间轴"
      ref={panelRef}
      onKeyDown={handlePanelKeyDown}
    >
      {/* tabIndex 让工具栏区可聚焦：点工具栏空白处后焦点落进面板，
          这样「焦点在 timeline-toolbar 时空格切换播放/暂停」才生效（否则焦点在面板外，空格够不到面板级键盘处理） */}
      <div className="timeline-toolbar" tabIndex={0}>
        <div className="timeline-toolbar-group">
          {/* 读数 = 当前帧号 / 当前时间；总时长单独放在右边的时长输入框里 */}
          <span
            className="timeline-time-readout"
            title={`当前第 ${playheadFrame} 帧 / 共 ${totalFrames} 帧（${fps}fps）`}
          >
            <span className="timeline-time-readout-frame">F{playheadFrame}</span>
            <span className="timeline-time-readout-divider" aria-hidden="true">
              /
            </span>
            <span className="timeline-time-readout-clock">{formatReadoutTime(playhead)}</span>
          </span>
          <div className="timeline-duration-chip" title="时间轴总时长（秒）：左右拖动箭头调整，或用上下按钮 ±0.1s">
            {/* 拖动把手：按住左右拖动即可减 / 加总时长（也可以聚焦后用左右方向键） */}
            <span
              className="timeline-duration-drag-handle"
              role="slider"
              tabIndex={0}
              aria-label="拖动调整总时长"
              aria-valuemin={MIN_TIMELINE_DURATION}
              aria-valuemax={MAX_TIMELINE_DURATION}
              aria-valuenow={Number(editableDuration.toFixed(2))}
              aria-valuetext={formatTime(editableDuration)}
              title="按住左右拖动调整总时长（← / → 每次 0.1s）"
              onKeyDown={(event) => {
                const delta =
                  event.key === "ArrowLeft" ? -TIMELINE_DURATION_STEP : event.key === "ArrowRight" ? TIMELINE_DURATION_STEP : 0;
                if (delta === 0) return;
                event.preventDefault();
                nudgeDuration(delta);
              }}
              {...getDurationDragProps()}
            >
              <MoveHorizontal aria-hidden="true" size={14} strokeWidth={1.8} />
            </span>
            <span className="timeline-duration-caption">总时长</span>
            <input
              className="timeline-duration-input"
              aria-label="时间轴总时长"
              type="number"
              min={MIN_TIMELINE_DURATION}
              max={MAX_TIMELINE_DURATION}
              step={TIMELINE_DURATION_STEP}
              value={editableDuration}
              onChange={(event) => setTimelineDuration(Number(event.target.value))}
            />
            <span aria-hidden="true">s</span>
            {/* 上下微调：以 0.1s 为刻度增减总时长 */}
            <span className="timeline-duration-spinner">
              <button
                className="timeline-duration-spinner-button"
                type="button"
                aria-label={`总时长增加 ${TIMELINE_DURATION_STEP}s`}
                title={`+${TIMELINE_DURATION_STEP}s`}
                onClick={() => nudgeDuration(TIMELINE_DURATION_STEP)}
              >
                <ChevronUp aria-hidden="true" size={12} strokeWidth={2.2} />
              </button>
              <button
                className="timeline-duration-spinner-button"
                type="button"
                aria-label={`总时长减少 ${TIMELINE_DURATION_STEP}s`}
                title={`-${TIMELINE_DURATION_STEP}s`}
                onClick={() => nudgeDuration(-TIMELINE_DURATION_STEP)}
              >
                <ChevronDown aria-hidden="true" size={12} strokeWidth={2.2} />
              </button>
            </span>
          </div>
          <div className="timeline-camera-selector" title="当前正在编辑 / 打关键帧的机位，切换后关键帧将归属该机位">
            <Camera aria-hidden="true" size={14} strokeWidth={1.8} />
            <span className="timeline-camera-selector-caption">机位</span>
            <TimelineCameraSelect
              cameras={project.cameras}
              activeCameraId={activeCamera?.id ?? null}
              onSelect={setActiveCamera}
            />
          </div>
        </div>

        <div className="timeline-toolbar-group timeline-toolbar-center">
          <div className="timeline-transport" role="group" aria-label="播放控制">
            <button
              className="timeline-icon-button"
              type="button"
              aria-label="回到首帧"
              title="回到首帧"
              onClick={() => seekTo(0)}
            >
              <SkipBack aria-hidden="true" size={15} strokeWidth={1.8} />
            </button>
            <button
              className="timeline-icon-button timeline-play-button"
              type="button"
              aria-label={isPlaying ? "暂停" : "播放"}
              aria-pressed={isPlaying}
              onClick={togglePlaying}
            >
              {isPlaying ? (
                <Pause aria-hidden="true" size={15} strokeWidth={1.8} />
              ) : (
                <Play aria-hidden="true" size={15} strokeWidth={1.8} />
              )}
            </button>
            <button
              className="timeline-icon-button"
              type="button"
              aria-label="停止"
              title="停止播放并回到起点"
              onClick={stopPlayback}
            >
              <Square aria-hidden="true" size={13} strokeWidth={2} />
            </button>
            <button
              className="timeline-icon-button"
              type="button"
              aria-label="回到尾帧"
              title="回到尾帧"
              onClick={() => seekTo(duration)}
            >
              <SkipForward aria-hidden="true" size={15} strokeWidth={1.8} />
            </button>
          </div>

          <span className="timeline-toolbar-divider" aria-hidden="true" />

          <button
            className="timeline-action-button"
            type="button"
            disabled={addKeyframeDisabled}
            title={addKeyframeTitle}
            onClick={handleAddKeyframe}
          >
            <DiamondPlus aria-hidden="true" size={14} strokeWidth={1.8} />
            在指针处打关键帧
          </button>
          {selectedKeyframe ? (
            <>
              <button className="timeline-action-button" type="button" onClick={handleUpdateSelected}>
                <RefreshCw aria-hidden="true" size={14} strokeWidth={1.8} />
                更新选中关键帧
              </button>
              <button className="timeline-action-button" type="button" onClick={handleDeleteSelected}>
                <Trash2 aria-hidden="true" size={14} strokeWidth={1.8} />
                删除选中关键帧
              </button>
              <label className="timeline-easing-control" title="该关键帧「出去的那一段」使用的缓动曲线">
                <span className="timeline-easing-label">缓动</span>
                <select
                  className="timeline-easing-select"
                  value={selectedKeyframeEasing}
                  onChange={handleEasingChange}
                  aria-label="关键帧缓动曲线"
                >
                  {EASING_KINDS.map((kind) => (
                    <option key={kind} value={kind}>
                      {EASING_LABELS[kind]}
                    </option>
                  ))}
                </select>
              </label>
            </>
          ) : null}
        </div>

        <div className="timeline-toolbar-group timeline-toolbar-end">
          <button
            className="timeline-icon-button"
            type="button"
            aria-haspopup="dialog"
            aria-expanded={settingsOpen}
            aria-label="时间轴设置"
            title="时间轴设置：每秒帧数 / 播放循环"
            onClick={openSettings}
          >
            <Settings2 aria-hidden="true" size={15} strokeWidth={1.8} />
          </button>

          {hasKeyframes ? (
            <button className="timeline-action-button" type="button" onClick={handleClearAll}>
              <Eraser aria-hidden="true" size={14} strokeWidth={1.8} />
              清空全部
            </button>
          ) : null}

          <div className="timeline-export" ref={exportMenuRef}>
            <button
              className="timeline-export-button"
              type="button"
              aria-haspopup="menu"
              aria-expanded={exportMenuOpen}
              disabled={isRecording}
              title="导出整段动画为 MP4 视频"
              onClick={() => setExportMenuOpen((isOpen) => !isOpen)}
            >
              <Film aria-hidden="true" size={14} strokeWidth={1.8} />
              {isRecording ? "导出中…" : "导出"}
              <ChevronDown aria-hidden="true" className="timeline-export-chevron" size={14} strokeWidth={1.8} />
            </button>
            {exportMenuOpen ? (
              <div className="timeline-export-menu" role="menu" aria-label="选择导出视角">
                <button
                  className="timeline-export-option"
                  type="button"
                  role="menuitem"
                  title="按导演视角逐帧快速导出整段动画"
                  onClick={() => {
                    setExportMenuOpen(false);
                    void handleExportVideo("director");
                  }}
                >
                  <Film aria-hidden="true" size={14} strokeWidth={1.8} />
                  上帝视角
                  <span className="timeline-export-option-hint">导演视角整段动画</span>
                </button>
                <button
                  className="timeline-export-option"
                  type="button"
                  role="menuitem"
                  title="按当前选中相机的运镜画面逐帧导出"
                  onClick={() => {
                    setExportMenuOpen(false);
                    void handleExportVideo("camera");
                  }}
                >
                  <Camera aria-hidden="true" size={14} strokeWidth={1.8} />
                  机位视角
                  <span className="timeline-export-option-hint">当前相机运镜画面</span>
                </button>
              </div>
            ) : null}
          </div>
        </div>
      </div>

      <div className="timeline-body">
        {hasKeyframes ? null : (
          <p className="timeline-empty">还没有关键帧。选中对象或相机，摆好姿态后点「在指针处打关键帧」。</p>
        )}

        <div className="timeline-grid" style={gridStyle}>
          <div className="timeline-grid-head">
            <div className="timeline-gutter-cell" aria-hidden="true">
              轨道
            </div>
            <div
              className={`timeline-ruler${isScrubbing ? " is-scrubbing" : ""}`}
              ref={rulerRef}
              role="slider"
              tabIndex={0}
              aria-label="时间指针"
              aria-valuemin={0}
              aria-valuemax={duration}
              aria-valuenow={Number(playhead.toFixed(2))}
              aria-valuetext={formatTime(playhead)}
              onKeyDown={handleRulerKeyDown}
              onPointerDown={handleRulerPointerDown}
              onPointerMove={handleRulerPointerMove}
              onPointerUp={handleRulerPointerEnd}
              onPointerCancel={handleRulerPointerEnd}
            >
              {/* 0.1s 细刻度先画，主刻度的文字与竖线压在上面 */}
              {rulerTickNodes}
            </div>
          </div>

          {/* 点轨道空白处（不含片段与关键帧）＝取消片段选中 */}
          {/* tabIndex 让整块轨道区可聚焦：点轨道空白处后焦点会落进面板，
              这样「焦点在轨道上时空格切换播放/暂停」才能生效（否则焦点在面板外，空格够不到面板级的键盘处理） */}
          <div className="timeline-grid-body" tabIndex={0} onPointerDown={handleTimelineGridPointerDown}>
            {timeline.tracks
              .filter((track) => project.objects.find((o) => o.id === track.objectId)?.kind !== "character")
              .map((track) => {
              const obj = project.objects.find((o) => o.id === track.objectId);
              const KindIcon = (obj ? OBJECT_KIND_ICONS[obj.kind] : undefined) ?? Box;
              const trackName = obj?.name ?? track.objectId;
              const trackKey = getTimelineTrackKey("object", track.objectId);
              const collapsed = timelineCollapsedTracks.includes(trackKey);
              const dragProps = getTrackDragProps(trackKey);

              return (
                <div
                  className={`timeline-track${collapsed ? " is-collapsed" : ""}${
                    draggingTrackKey === trackKey ? " is-dragging" : ""
                  }`}
                  key={track.objectId}
                  data-track-key={trackKey}
                  style={{ order: getTrackOrder(trackKey) }}
                  {...dragProps}
                >
                  <div className="timeline-track-label" title={`${trackName} · 拖动整行可调整轨道顺序`}>
                    {renderCollapseToggle(trackKey, trackName, "物体轨道", collapsed)}
                    <KindIcon aria-hidden="true" className="timeline-track-icon" size={14} strokeWidth={1.8} />
                    <span className="timeline-track-name">{trackName}</span>
                    <span className="timeline-track-count">{track.keyframes.length}</span>
                  </div>
                  <div className="timeline-track-lane">
                    {collapsed ? (
                      <span className="timeline-track-summary">{track.keyframes.length} 个关键帧</span>
                    ) : (
                      track.keyframes.map((kf) => {
                        const leftPercent = duration === 0 ? 0 : (kf.time / duration) * 100;
                        const isSelected =
                          selectedKeyframe?.kind === "object" &&
                          selectedKeyframe.targetId === track.objectId &&
                          selectedKeyframe.keyframeId === kf.id;
                        return (
                          <div
                            key={kf.id}
                            className={`timeline-keyframe${isSelected ? " is-selected" : ""}${
                              kf.easing && kf.easing !== "linear" ? " has-easing" : ""
                            }`}
                            style={{ left: `${leftPercent}%` }}
                            role="button"
                            tabIndex={0}
                            aria-label={`关键帧 ${formatTime(kf.time)}`}
                            onClick={() => handleSelectObjectKeyframe(track.objectId, kf.id, kf.time, kf.value)}
                          >
                            <span className="timeline-keyframe-dot" aria-hidden="true" />
                          </div>
                        );
                      })
                    )}
                  </div>
                </div>
              );
            })}

            {/* 机位切换概览轨：把每个切换切点画成过渡标记（硬切=竖线、平滑=渐变区），点击可编辑类型/时长（逐切点覆盖全局默认） */}
            {(() => {
              const cuts = getCameraCutSegments(
                timeline.cameraTracks,
                timeline.cameraTransition,
                project.activeCameraId
              );
              if (cuts.length === 0) return null;
              const selectedCut = cuts.find((item) => item.keyframe.id === selectedCutKeyframeId) ?? null;
              const selLeft = selectedCut && duration > 0 ? (selectedCut.time / duration) * 100 : 0;
              return (
                <div className="timeline-track timeline-track-transition">
                  <div className="timeline-track-label" title="机位切换：每个切换点的过渡类型与时长，点击可编辑">
                    <Repeat aria-hidden="true" className="timeline-track-icon" size={14} strokeWidth={1.8} />
                    <span className="timeline-track-name">机位切换</span>
                    <span className="timeline-track-count">{cuts.length}</span>
                  </div>
                  <div className="timeline-track-lane timeline-transition-lane">
                    {cuts.map((cut, index) => {
                      const leftPercent = duration > 0 ? (cut.time / duration) * 100 : 0;
                      const nextTime = cuts[index + 1]?.time ?? duration;
                      const maxDur = Math.max(0, nextTime - cut.time);
                      const shownDuration =
                        cut.transition.type === "smooth"
                          ? Math.min(cut.transition.duration, maxDur > 0 ? maxDur : cut.transition.duration)
                          : 0;
                      const widthPercent = duration > 0 ? (shownDuration / duration) * 100 : 0;
                      const isSelected = cut.keyframe.id === selectedCutKeyframeId;
                      const fromName =
                        project.cameras.find((c) => c.id === cut.fromCameraId)?.name ?? (cut.fromCameraId ?? "起始");
                      const toName = project.cameras.find((c) => c.id === cut.toCameraId)?.name ?? cut.toCameraId;
                      const transitionLabel =
                        cut.transition.type === "smooth" ? `平滑运镜 ${formatTime(cut.transition.duration)}` : "硬切";
                      return (
                        <div
                          key={cut.keyframe.id}
                          className={`timeline-transition-marker timeline-transition-${cut.transition.type}${
                            isSelected ? " is-selected" : ""
                          }`}
                          style={
                            cut.transition.type === "smooth"
                              ? { left: `${leftPercent}%`, width: `${widthPercent}%` }
                              : { left: `${leftPercent}%` }
                          }
                          role="button"
                          tabIndex={0}
                          aria-label={`机位切换 ${formatTime(cut.time)} · ${fromName} → ${toName} · ${transitionLabel}`}
                          title={`${fromName} → ${toName} · ${transitionLabel}（点击编辑）`}
                          onClick={() => setSelectedCutKeyframeId(isSelected ? null : cut.keyframe.id)}
                          onKeyDown={(event) => {
                            if (event.key === "Enter" || event.key === " ") {
                              event.preventDefault();
                              setSelectedCutKeyframeId(isSelected ? null : cut.keyframe.id);
                            }
                          }}
                        >
                          {cut.transition.type === "smooth" ? (
                            <span className="timeline-transition-duration">{formatTime(cut.transition.duration)}</span>
                          ) : null}
                        </div>
                      );
                    })}
                    {selectedCut ? (
                      <div
                        className="timeline-transition-editor"
                        style={{ left: `${selLeft}%` }}
                        role="dialog"
                        aria-label="编辑机位切换过渡"
                      >
                        <div className="timeline-transition-editor-row">
                          <span className="timeline-transition-editor-label">类型</span>
                          <InspectorDropdown
                            className="timeline-transition-dropdown"
                            ariaLabel="切换类型"
                            value={selectedCut.transition.type}
                            options={[
                              { value: "cut", label: "硬切" },
                              { value: "smooth", label: "平滑运镜" },
                            ]}
                            onChange={(value) =>
                              setCameraKeyframeTransition(selectedCut.toCameraId, selectedCut.keyframe.id, {
                                type: value as CameraTransitionType,
                                duration: selectedCut.transition.duration,
                              })
                            }
                          />
                        </div>
                        <div className="timeline-transition-editor-row">
                          <span className="timeline-transition-editor-label">时长</span>
                          <div className="timeline-transition-editor-duration-field">
                            <input
                              className="timeline-settings-input timeline-transition-duration-input"
                              aria-label="过渡时长（秒）"
                              type="number"
                              min={MIN_CAMERA_TRANSITION_DURATION}
                              max={MAX_CAMERA_TRANSITION_DURATION}
                              step={0.1}
                              value={selectedCut.transition.duration}
                              disabled={selectedCut.transition.type !== "smooth"}
                              onChange={(event) =>
                                setCameraKeyframeTransition(selectedCut.toCameraId, selectedCut.keyframe.id, {
                                  type: selectedCut.transition.type,
                                  duration: Math.min(
                                    MAX_CAMERA_TRANSITION_DURATION,
                                    Math.max(MIN_CAMERA_TRANSITION_DURATION, Number(event.target.value))
                                  ),
                                })
                              }
                            />
                            <span className="timeline-settings-unit">秒</span>
                          </div>
                        </div>
                        <div className="timeline-transition-editor-actions">
                          <button
                            type="button"
                            className="timeline-transition-editor-reset"
                            disabled={!selectedCut.keyframe.transition}
                            onClick={() => setCameraKeyframeTransition(selectedCut.toCameraId, selectedCut.keyframe.id, null)}
                          >
                            重置为全局默认
                          </button>
                          <button
                            type="button"
                            className="timeline-transition-editor-close"
                            aria-label="关闭编辑器"
                            onClick={() => setSelectedCutKeyframeId(null)}
                          >
                            <X aria-hidden="true" size={12} strokeWidth={2.2} />
                          </button>
                        </div>
                      </div>
                    ) : null}
                  </div>
                </div>
              );
            })()}

            {timeline.cameraTracks.map((track) => {
              const shot = project.cameras.find((c) => c.id === track.cameraId);
              const trackName = shot?.name ?? track.cameraId;
              const trackKey = getTimelineTrackKey("camera", track.cameraId);
              const collapsed = timelineCollapsedTracks.includes(trackKey);
              const dragProps = getTrackDragProps(trackKey);
              // 运镜片段：第一个关键帧 → 最后一个关键帧，这段区间就是「这一段运镜」的时长
              const cameraTimes = track.keyframes.map((keyframe) => keyframe.time);
              const clipSpan = getCameraClipSpan(track.keyframes);
              const clipStart = clipSpan?.start ?? 0;
              const clipEnd = clipSpan?.end ?? 0;
              const clipDuration = clipEnd - clipStart;
              const clipLeftPercent = duration > 0 ? (clipStart / duration) * 100 : 0;
              const clipWidthPercent = duration > 0 ? (clipDuration / duration) * 100 : 0;
              const clipOwner: TimelineTimeDragOwner = { kind: "camera", cameraId: track.cameraId };
              // 运镜关键帧连线：在「机位」子轨道上把各关键帧用折线连起来（视图坐标 0~100 对应整条时间轴宽度，
              // 50 = 轨道垂直中点），直观呈现运镜过程
              const cameraConnectorPoints = cameraTimes
                .map((t) => `${(duration > 0 ? (t / duration) * 100 : 0).toFixed(2)},50`)
                .join(" ");

              return (
                <div
                  className={`timeline-camera-track${collapsed ? " is-collapsed" : ""}${
                    draggingTrackKey === trackKey ? " is-dragging" : ""
                  }`}
                  key={track.cameraId}
                  data-track-key={trackKey}
                  style={{ order: getTrackOrder(trackKey) }}
                  {...dragProps}
                >
                  <div className="timeline-track timeline-track-camera">
                    <div className="timeline-track-label" title={`${trackName} · 拖动整行可调整轨道顺序`}>
                      {renderCollapseToggle(trackKey, trackName, "运镜轨道", collapsed)}
                      <Video aria-hidden="true" className="timeline-track-icon" size={14} strokeWidth={1.8} />
                      <span className="timeline-track-name">{trackName}</span>
                      <span className="timeline-track-count">{track.keyframes.length}</span>
                    </div>
                    {/* 运镜轨道头部车道：展开时放「运镜片段条」，折叠时放一行摘要（与角色轨道头部一致） */}
                    <div className="timeline-track-lane">
                      {collapsed ? (
                        <span className="timeline-track-summary">{track.keyframes.length} 个运镜关键帧</span>
                      ) : cameraTimes.length >= 2 && duration > 0 ? (
                        <div
                          className={`timeline-trajectory-bar timeline-clip-bar-camera${
                            isClipSelected("camera", track.cameraId) ? " is-selected" : ""
                          }`}
                          style={{ left: `${clipLeftPercent}%`, width: `${clipWidthPercent}%` }}
                          title={`运镜片段 ${formatTime(clipStart)} → ${formatTime(
                            clipEnd
                          )}（时长 ${formatTime(clipDuration)}）：拖动条本体整段平移，拖动左右两端把手分别修剪起点与终点`}
                          {...getTimeDragProps(clipOwner, "clip", 0, cameraTimes, clipStart)}
                        >
                          <span className="timeline-trajectory-bar-label">{formatTime(clipDuration)}</span>
                          {/* 左端把手 = 修剪起点：末帧不动，首帧推后，各关键帧按比例缩放 */}
                          <span
                            className="timeline-trajectory-trim is-pre"
                            role="slider"
                            tabIndex={0}
                            aria-label={`${trackName} 运镜起点`}
                            aria-valuemin={0}
                            aria-valuemax={Number(
                              Math.max(
                                clipEnd - CAMERA_KEYFRAME_MIN_GAP * Math.max(cameraTimes.length - 1, 0),
                                0
                              ).toFixed(2)
                            )}
                            aria-valuenow={Number(clipStart.toFixed(2))}
                            aria-valuetext={formatTime(clipStart)}
                            title={`拖动修剪运镜起点（${formatTime(
                              clipStart
                            )} 开始这段运镜，末帧不动、其余关键帧按比例缩放），或用左右方向键微调`}
                            onKeyDown={(event) => handleTrimStartKeyDown(event, clipOwner, cameraTimes, clipStart)}
                            {...getTimeDragProps(clipOwner, "trimStart", 0, cameraTimes, clipStart)}
                          />
                          {/* 右端把手 = 修剪终点：首帧不动，末帧伸缩 */}
                          <span
                            className="timeline-trajectory-trim is-post"
                            role="slider"
                            tabIndex={0}
                            aria-label={`${trackName} 运镜时长`}
                            aria-valuemin={Math.min(clipStart + CAMERA_KEYFRAME_MIN_GAP, clipEnd)}
                            aria-valuemax={Math.max(duration, clipEnd)}
                            aria-valuenow={Number(clipEnd.toFixed(2))}
                            aria-valuetext={`${formatTime(clipDuration)}，结束于 ${formatTime(clipEnd)}`}
                            title="拖动整体缩放这段运镜的时长（第一个运镜关键帧固定不动），或用左右方向键微调"
                            onKeyDown={(event) =>
                              handleTimeHandleKeyDown(event, clipOwner, cameraTimes, clipStart)
                            }
                            {...getTimeDragProps(
                              clipOwner,
                              "duration",
                              cameraTimes.length - 1,
                              cameraTimes,
                              clipStart
                            )}
                          />
                        </div>
                      ) : null}
                    </div>
                  </div>

                  {collapsed ? null : (
                    <>
                      {/* 机位子轨道：运镜关键帧单独一条轨道，并用折线把相邻关键帧连起来呈现运镜过程 */}
                      <div
                        className="timeline-subtrack"
                        title="机位关键帧：每个运镜关键帧，可单独左右拖动改时间，选中后点 × 或按 Delete 删除。折线连接相邻关键帧呈现运镜过程"
                      >
                        <div className="timeline-subtrack-label">关键帧</div>
                        <div className="timeline-track-lane timeline-camera-keyframe-lane">
                          {cameraTimes.length > 0 && duration > 0 ? (
                            <>
                              {/* 折线连接各运镜关键帧，呈现运镜过程 */}
                              <svg
                                className="timeline-trajectory-connector"
                                viewBox="0 0 100 100"
                                preserveAspectRatio="none"
                                aria-hidden="true"
                              >
                                <polyline points={cameraConnectorPoints} />
                              </svg>
                              {track.keyframes.map((kf, index) => {
                                const leftPercent = duration === 0 ? 0 : (kf.time / duration) * 100;
                                const isSelected =
                                  selectedKeyframe?.kind === "camera" &&
                                  selectedKeyframe.targetId === track.cameraId &&
                                  selectedKeyframe.keyframeId === kf.id;
                                return (
                                  <div
                                    key={kf.id}
                                    className={`timeline-keyframe timeline-keyframe-camera${
                                      isSelected ? " is-selected" : ""
                                    }${kf.easing && kf.easing !== "linear" ? " has-easing" : ""}`}
                                    style={{ left: `${leftPercent}%` }}
                                    role="button"
                                    tabIndex={0}
                                    aria-label={`运镜关键帧 ${formatTime(kf.time)}`}
                                    title={`运镜关键帧 · ${formatTime(kf.time)}（左右拖动调整时间）`}
                                    onClick={() => handleSelectCameraKeyframe(track.cameraId, kf.id, kf.time, kf.value)}
                                    {...getTimeDragProps(clipOwner, "point", index, cameraTimes)}
                                  >
                                    <span className="timeline-keyframe-dot" aria-hidden="true" />
                                  </div>
                                );
                              })}
                            </>
                          ) : null}
                        </div>
                      </div>
                    </>
                  )}
                </div>
              );
            })}

            {characterObjects.map((character) => {
              const trajectoryPoints = character.trajectoryPoints ?? [];
              // 动作片段序列：同一角色可叠加多段（如先走再跑）。片段之间允许重叠，后者覆盖前者。
              const clips = character.characterRig?.motionClips ?? [];
              const motionTitle = `动作轨道：共 ${clips.length} 段动作片段（点击片段选中后在右侧编辑；拖拽条体或两端把手调整时间）`;
              const trackKey = getTimelineTrackKey("character", character.id);
              const collapsed = timelineCollapsedTracks.includes(trackKey);
              const dragProps = getTrackDragProps(trackKey);
              // 轨迹片段的起点（拖条本体可整段平移，0 表示从 0s 就走）、每个轨迹点的关键帧时间，
              // 以及片段结束时间（角色走完最后一点后原地停留到这一刻，即「停留时长」）。
              // 默认结束时间 = 时间轴末尾，所以最后一个点落在时间结束处；一旦设置 trajectoryEndTime，
              // 最后一个点只是路径中途的途经点，条右边缘到结束时间之间都是停留段。
              const trajectoryStart = getTrajectoryStartTime(character, duration);
              const trajectoryTimes = getTrajectoryPointTimes(trajectoryPoints, duration, trajectoryStart);
              const trajectoryEndTime = getTrajectoryClipEndTime(character, duration, trajectoryStart);
              // 轨迹点连线：在「轨迹」轨道上把各轨迹点用折线连起来（视图坐标 0~100 对应整条时间轴宽度，
              // 50 = 轨道垂直中点），直观呈现走位路径（最后一个点只是途经点，后面是停留段）
              const trajectoryConnectorPoints = [trajectoryStart, ...trajectoryTimes]
                .map((t) => `${(duration > 0 ? (t / duration) * 100 : 0).toFixed(2)},50`)
                .join(" ");
              const trajectoryLeftPercent = duration > 0 ? (trajectoryStart / duration) * 100 : 0;
              const trajectoryWidthPercent =
                duration > 0 ? Math.min(100, ((trajectoryEndTime - trajectoryStart) / duration) * 100) : 0;
              // 条右端把手 / 键盘微调改的是「整段轨迹时长」，不针对某个点，pointId 留空
              const trajectoryOwner: TimelineTimeDragOwner = {
                kind: "trajectory",
                objectId: character.id,
                pointId: "",
              };

              return (
                <div
                  className={`timeline-character-track${collapsed ? " is-collapsed" : ""}${
                    draggingTrackKey === trackKey ? " is-dragging" : ""
                  }`}
                  key={`character-track-${character.id}`}
                  data-track-key={trackKey}
                  style={{ order: getTrackOrder(trackKey) }}
                  {...dragProps}
                >
                  {/* 分组抬头：折叠开关 + 角色名 + 轨迹点数（整组可拖动排序） */}
                  <div className="timeline-track timeline-character-head">
                    <div className="timeline-track-label" title={`${character.name} · 拖动整行可调整轨道顺序`}>
                      {renderCollapseToggle(trackKey, character.name, "角色轨道", collapsed)}
                      <PersonStanding aria-hidden="true" className="timeline-track-icon" size={14} strokeWidth={1.8} />
                      <span className="timeline-track-name">{character.name}</span>
                      <span className="timeline-track-count">{trajectoryPoints.length}</span>
                    </div>
                    {/* 分组抬头行：展开时显示轨迹片段条，折叠时显示一行摘要 */}
                    <div className="timeline-track-lane timeline-character-head-lane">
                      {collapsed ? (
                        <span className="timeline-track-summary">
                          {clips.length > 0 ? `${clips.length} 段动作 · ` : ""}
                          {trajectoryPoints.length} 个轨迹点
                        </span>
                      ) : trajectoryTimes.length > 0 && duration > 0 ? (
                        <div
                          className={`timeline-trajectory-bar${
                            isClipSelected("trajectory", character.id) ? " is-selected" : ""
                          }`}
                          style={{ left: `${trajectoryLeftPercent}%`, width: `${trajectoryWidthPercent}%` }}
                          title={`轨迹片段 ${formatTime(trajectoryStart)} → ${formatTime(
                            trajectoryEndTime
                          )}（时长 ${formatTime(
                            trajectoryEndTime - trajectoryStart
                          )}，结尾停留到 ${formatTime(
                            trajectoryEndTime
                          )}）：拖动条本体整段平移，拖动左右两端把手分别修剪起点与停留终点`}
                          {...getTimeDragProps(trajectoryOwner, "clip", 0, trajectoryTimes, trajectoryStart)}
                        >
                          <span className="timeline-trajectory-bar-label">{formatTime(trajectoryEndTime)}</span>
                          {/* 左端把手 = 修剪起点：只挪片段起点（角色在此之前原地等待），轨迹点留在原地 */}
                          <span
                            className="timeline-trajectory-trim is-pre"
                            role="slider"
                            tabIndex={0}
                            aria-label={`${character.name} 轨迹起点`}
                            aria-valuemin={0}
                            aria-valuemax={Number(
                              Math.max((trajectoryTimes[0] ?? 0) - TRAJECTORY_POINT_MIN_GAP, 0).toFixed(2)
                            )}
                            aria-valuenow={Number(trajectoryStart.toFixed(2))}
                            aria-valuetext={formatTime(trajectoryStart)}
                            title={`拖动修剪轨迹起点（${formatTime(
                              trajectoryStart
                            )} 之前角色原地等待），或用左右方向键微调`}
                            onKeyDown={(event) =>
                              handleTrimStartKeyDown(event, trajectoryOwner, trajectoryTimes, trajectoryStart)
                            }
                            {...getTimeDragProps(trajectoryOwner, "trimStart", 0, trajectoryTimes, trajectoryStart)}
                          />
                          {/* 右端把手 = 修剪停留终点：角色走完最后一点后停留到这一刻 */}
                          <span
                            className="timeline-trajectory-trim is-post"
                            role="slider"
                            tabIndex={0}
                            aria-label={`${character.name} 轨迹停留时长`}
                            aria-valuemin={0}
                            aria-valuemax={duration}
                            aria-valuenow={Number(trajectoryEndTime.toFixed(2))}
                            aria-valuetext={formatTime(trajectoryEndTime)}
                            title="拖动调整轨迹停留时长（角色走完最后一点后原地停留到这一刻），或用左右方向键微调"
                            onKeyDown={(event) =>
                              handleTimeHandleKeyDown(event, trajectoryOwner, trajectoryTimes, trajectoryEndTime)
                            }
                            {...getTimeDragProps(
                              trajectoryOwner,
                              "duration",
                              trajectoryTimes.length - 1,
                              trajectoryTimes,
                              trajectoryEndTime
                            )}
                          />
                        </div>
                      ) : null}
                    </div>
                  </div>

                  {collapsed ? null : (
                    <>
                      {/* 动作轨道：角色的基础动作序列，可添加多段（如先走再跑），每段独立可拖拽 / 删除 */}
                      <div className="timeline-subtrack" title={motionTitle}>
                        <div className="timeline-subtrack-label timeline-subtrack-label-action">
                          <span>动作</span>
                          <button
                            type="button"
                            className="timeline-add-clip-button"
                            aria-label={`${character.name} 添加动作片段`}
                            title="添加动作片段：在当前播放头位置新增一段动作（如先走再跑），形成动作序列"
                            onClick={() => {
                              selectObject(character.id);
                              addMotionClip(character.id, { start: playhead });
                            }}
                          >
                            <Plus aria-hidden="true" size={12} strokeWidth={2.4} />
                          </button>
                        </div>
                        <div className="timeline-track-lane timeline-motion-lane">
                          {clips.length === 0 ? (
                            <span className="timeline-motion-chip">暂无动作 · 点「+」添加</span>
                          ) : (
                            clips.map((clip) => {
                              const clipStart = clip.start;
                              const clipEnd = Number.isFinite(clip.end) ? clip.end : duration;
                              const clipLeftPercent = duration > 0 ? (clipStart / duration) * 100 : 0;
                              const clipWidthPercent =
                                duration > 0 ? Math.min(100, ((clipEnd - clipStart) / duration) * 100) : 0;
                              const clipLabel = MOTION_LABELS[clip.kind];
                              const clipTimes = [clipStart, clipEnd];
                              const clipOwner: TimelineTimeDragOwner = {
                                kind: "motionClip",
                                objectId: character.id,
                                clipId: clip.id,
                              };
                              const isSelected =
                                selectedMotionClipId === clip.id || isClipSelected("motionClip", clip.id);
                              return (
                                <div
                                  key={clip.id}
                                  className={`timeline-trajectory-bar timeline-clip-bar-motion${
                                    isSelected ? " is-selected" : ""
                                  }${clip.enabled === false ? " is-disabled" : ""}`}
                                  style={{ left: `${clipLeftPercent}%`, width: `${clipWidthPercent}%` }}
                                  title={`动作片段 ${formatTime(clipStart)} → ${formatTime(clipEnd)}（时长 ${formatTime(
                                    clipEnd - clipStart
                                  )}）：${clipLabel} · 拖动条本体整段平移，拖动左右两端把手分别修剪起点与停止时间`}
                                  onClick={() => {
                                    selectObject(character.id);
                                    selectMotionClip(clip.id);
                                  }}
                                  {...getTimeDragProps(clipOwner, "clip", 0, clipTimes, clipStart, clipEnd)}
                                >
                                  <span className="timeline-trajectory-bar-label">{clipLabel}</span>
                                  <button
                                    type="button"
                                    className="timeline-clip-delete"
                                    aria-label={`${character.name} 删除动作片段`}
                                    title="删除该动作片段"
                                    onPointerDown={(event) => event.stopPropagation()}
                                    onClick={(event) => {
                                      event.stopPropagation();
                                      removeMotionClip(character.id, clip.id);
                                    }}
                                  >
                                    <X aria-hidden="true" size={10} strokeWidth={2.6} />
                                  </button>
                                  {/* 左端把手 = 修剪动作起点：之前角色保持静止，到这一刻才开始动 */}
                                  <span
                                    className="timeline-trajectory-trim is-pre"
                                    role="slider"
                                    tabIndex={0}
                                    aria-label={`${character.name} 动作起点`}
                                    aria-valuemin={0}
                                    aria-valuemax={Math.max(clipEnd - 0.1, 0)}
                                    aria-valuenow={Number(clipStart.toFixed(2))}
                                    aria-valuetext={formatTime(clipStart)}
                                    title={`拖动修剪动作起点（${formatTime(clipStart)} 之前角色保持静止），或用左右方向键微调`}
                                    onKeyDown={(event) =>
                                      handleTrimStartKeyDown(event, clipOwner, clipTimes, clipStart)
                                    }
                                    {...getTimeDragProps(clipOwner, "trimStart", 0, clipTimes, clipStart, clipEnd)}
                                  />
                                  {/* 右端把手 = 停止时间：动作播放到这一刻停止，角色回到静止 */}
                                  <span
                                    className="timeline-trajectory-trim is-post"
                                    role="slider"
                                    tabIndex={0}
                                    aria-label={`${character.name} 动作停止时间`}
                                    aria-valuemin={Number(clipStart.toFixed(2))}
                                    aria-valuemax={duration}
                                    aria-valuenow={Number(clipEnd.toFixed(2))}
                                    aria-valuetext={formatTime(clipEnd)}
                                    title="拖动调整动作停止时间（动作播放到这一刻停止），或用左右方向键微调"
                                    onKeyDown={(event) =>
                                      handleTimeHandleKeyDown(event, clipOwner, clipTimes, clipEnd)
                                    }
                                    {...getTimeDragProps(
                                      clipOwner,
                                      "duration",
                                      1,
                                      clipTimes,
                                      clipStart,
                                      clipEnd
                                    )}
                                  />
                                </div>
                              );
                            })
                          )}
                        </div>
                      </div>

                      {/* 人物轨迹轨道：一条「轨迹」子轨道，显示各轨迹点关键帧（小菱形），
                          并用折线把点连起来呈现走位路径。点可单独左右拖动改时间，选中后按 Delete 删除 */}
                      <div
                        className="timeline-subtrack"
                        title="人物轨迹：每个轨迹点一条关键帧，可单独左右拖动改时间，选中后按 Delete 删除"
                      >
                        <div className="timeline-subtrack-label">轨迹</div>
                        <div className="timeline-track-lane timeline-trajectory-lane">
                          {trajectoryTimes.length > 0 && duration > 0 ? (
                            <>
                              {/* 折线连接各轨迹点，呈现走位路径（最后一个点只是途经点） */}
                              <svg
                                className="timeline-trajectory-connector"
                                viewBox="0 0 100 100"
                                preserveAspectRatio="none"
                                aria-hidden="true"
                              >
                                <polyline points={trajectoryConnectorPoints} />
                              </svg>
                              {trajectoryPoints.map((point, index) => {
                                const pointTime = trajectoryTimes[index] ?? 0;
                                const leftPercent = duration === 0 ? 0 : (pointTime / duration) * 100;
                                const isSelected =
                                  selectedTrajectoryPoint?.objectId === character.id &&
                                  selectedTrajectoryPoint.pointId === point.id;

                                return (
                                  <div
                                    key={point.id}
                                    className={`timeline-keyframe timeline-keyframe-trajectory${
                                      isSelected ? " is-selected" : ""
                                    }`}
                                    style={{ left: `${leftPercent}%` }}
                                    role="button"
                                    tabIndex={0}
                                    aria-label={`轨迹关键帧 ${formatTime(pointTime)}`}
                                    title={`第 ${index + 1} 个轨迹点 · ${formatTime(
                                      pointTime
                                    )}（左右拖动调整时间，选中后按 Delete 删除）`}
                                    onClick={() => handleSelectTrajectoryKeyframe(character.id, point.id, pointTime)}
                                    {...getTimeDragProps(
                                      { kind: "trajectory", objectId: character.id, pointId: point.id },
                                      "point",
                                      index,
                                      trajectoryTimes,
                                      trajectoryStart,
                                      trajectoryEndTime
                                    )}
                                  >
                                    <span className="timeline-keyframe-dot" aria-hidden="true" />
                                  </div>
                                );
                              })}
                            </>
                          ) : null}
                        </div>
                      </div>
                    </>
                  )}
                </div>
              );
            })}

            {/* 拖拽落点线：绝对定位在轨道区上，靠 transform 移动（详见 showDropIndicator） */}
            <div className="timeline-drop-indicator" ref={dropIndicatorRef} aria-hidden="true" />
          </div>

          <div className="timeline-playhead-layer" aria-hidden="true">
            <div className="timeline-playhead" style={{ left: `${playheadPercent}%` }}>
              <span className="timeline-playhead-knob" />
            </div>
            {/* 吸附参考线：拖动片段 / 关键帧时，边缘吸到其它片段边缘或播放头处显示 */}
            <div className="timeline-snap-indicator" ref={snapIndicatorRef} />
          </div>
        </div>
      </div>

      {/* 时间轴设置：帧率 / 循环先改草稿，点「完成」才写回工程并生效。
          用 portal 挂到 body：时间轴面板带 backdrop-filter，会成为 fixed 元素的包含块，
          直接挂在面板里会被缩在面板内并被裁掉。 */}
      {settingsOpen && typeof document !== "undefined"
        ? createPortal(
            <div
              className="timeline-settings-overlay"
              data-testid="timeline-settings-overlay"
            >
              <div
                className="timeline-settings-dialog"
                role="dialog"
                aria-modal="true"
                aria-label="时间轴设置"
                onClick={(event) => event.stopPropagation()}
              >
                <div className="timeline-settings-head">
                  <h3 className="timeline-settings-title">时间轴设置</h3>
                  {/* 右上角关闭按钮：等同取消，草稿值不写回工程 */}
                  <button
                    className="timeline-settings-close"
                    type="button"
                    aria-label="关闭设置"
                    title="关闭（不保存设置）"
                    onClick={() => setSettingsOpen(false)}
                  >
                    <X aria-hidden="true" size={14} strokeWidth={2} />
                  </button>
                </div>

                <div className="timeline-settings-field">
                  <span className="timeline-settings-field-label">每秒帧数</span>
                  <InspectorDropdown
                    ariaLabel="每秒帧数"
                    value={String(draftFps)}
                    options={fpsOptions.map((value) => ({ value: String(value), label: `${value} fps` }))}
                    onChange={(selected) => setDraftFps(Number(selected))}
                  />
                </div>

                <label className="timeline-settings-toggle">
                  <input
                    type="checkbox"
                    aria-label="播放循环"
                    checked={draftLoop}
                    onChange={(event) => setDraftLoop(event.target.checked)}
                  />
                  <span>播放循环（播到末尾自动回到起点接着播）</span>
                </label>

                <div className="timeline-settings-divider" />
                <h4 className="timeline-settings-subtitle">机位切换过渡</h4>

                <div className="timeline-settings-field">
                  <span className="timeline-settings-field-label">切换方式</span>
                  <InspectorDropdown
                    ariaLabel="机位切换过渡方式"
                    value={draftTransitionType}
                    options={[
                      { value: "cut", label: "硬切" },
                      { value: "smooth", label: "平滑运镜" },
                    ]}
                    onChange={(selected) => setDraftTransitionType(selected as CameraTransitionType)}
                  />
                </div>

                <label className="timeline-settings-field">
                  <span className="timeline-settings-field-label">过渡时长</span>
                  <span className="timeline-settings-field-control">
                    <input
                      className="timeline-settings-input"
                      aria-label="过渡时长"
                      type="number"
                      min={MIN_CAMERA_TRANSITION_DURATION}
                      max={MAX_CAMERA_TRANSITION_DURATION}
                      step={0.1}
                      value={draftTransitionDuration}
                      onChange={(event) => setDraftTransitionDuration(Number(event.target.value))}
                    />
                    <span className="timeline-settings-unit">秒</span>
                  </span>
                </label>

                <div className="timeline-settings-divider" />
                <h4 className="timeline-settings-subtitle">视频导出</h4>

                <div className="timeline-settings-field">
                  <span className="timeline-settings-field-label">分辨率（短边）</span>
                  <InspectorDropdown
                    ariaLabel="导出分辨率"
                    value={String(draftResolution)}
                    options={EXPORT_RESOLUTION_OPTIONS.map((opt) => ({ value: String(opt.value), label: opt.label }))}
                    onChange={(selected) => setDraftResolution(Number(selected))}
                  />
                </div>

                <div className="timeline-settings-field">
                  <span className="timeline-settings-field-label">画质 / 码率</span>
                  <InspectorDropdown
                    ariaLabel="导出画质"
                    value={draftQuality}
                    options={EXPORT_QUALITY_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label }))}
                    onChange={(selected) => setDraftQuality(selected as ExportQuality)}
                  />
                </div>

                {draftQuality === "custom" ? (
                  <label className="timeline-settings-field">
                    <span className="timeline-settings-field-label">自定义码率</span>
                    <span className="timeline-settings-field-control">
                      <input
                        className="timeline-settings-input"
                        aria-label="自定义码率（Mbps）"
                        type="number"
                        min={0.1}
                        step={0.5}
                        value={Math.round((draftCustomBitrate / 1_000_000) * 10) / 10}
                        onChange={(event) =>
                          setDraftCustomBitrate(
                            Math.max(100_000, Math.round(Number(event.target.value) * 1_000_000))
                          )
                        }
                      />
                      <span className="timeline-settings-unit">Mbps</span>
                    </span>
                  </label>
                ) : null}

                <div className="timeline-settings-field">
                  <span className="timeline-settings-field-label">编码档位</span>
                  <InspectorDropdown
                    ariaLabel="导出编码档位"
                    value={draftCodec}
                    options={EXPORT_CODEC_OPTIONS.map((opt) => ({ value: opt.value, label: opt.label }))}
                    onChange={(selected) => setDraftCodec(selected as ExportCodecPreference)}
                  />
                </div>

                <p className="timeline-settings-hint">
                  帧率决定时间读数与导出视频的帧数；分辨率 / 画质 / 编码在此设置，点「完成」后才保存并应用。
                </p>

                <div className="timeline-settings-actions">
                  <button className="timeline-settings-confirm" type="button" onClick={confirmSettings}>
                    完成
                  </button>
                </div>
              </div>
            </div>,
            document.body
          )
        : null}
    </section>
  );
}

/**
 * 时间轴工具栏的「当前机位」选择器：自定义下拉（非原生 <select>），
 * 这样深色主题下选项文字也能正常显示，并跟随主题配色。
 * 展开后列出全部机位，当前机位高亮并打勾；点击外部 / Esc 关闭。
 */
function TimelineCameraSelect({
  cameras,
  activeCameraId,
  onSelect,
}: {
  cameras: DirectorCameraShot[];
  activeCameraId: string | null;
  onSelect: (id: string) => void;
}) {
  return (
    <InspectorDropdown
      ariaLabel="当前机位"
      className="timeline-camera-dropdown"
      value={activeCameraId ?? ""}
      placeholder="未选择机位"
      options={cameras.map((camera) => ({ value: camera.id, label: camera.name }))}
      onChange={onSelect}
    />
  );
}