@aicut/react 0.5.0 → 0.6.0

package/README.md

@@ -241,6 +241,43 @@ const factory = isWebCodecsSupported()
 
 `WebCodecsEngine` v1 covers single-track MP4/MOV playback (H.264 / HEVC / VP9 / AV1 — whatever the browser's `VideoDecoder` supports). Multi-track compositing, audio, transitions land in follow-up releases.
 
+## Keyframes (panX / panY / scale animation)
+
+Off by default. Flip the `keyframes` prop and **all three** playback engines (HTML5, Canvas, WebCodecs) start interpolating per-clip transforms between adjacent keyframes. Diamond markers appear on the timeline; drag them, edit values via the floating panel, snap them to each other.
+
+```tsx
+const [kfEnabled, setKfEnabled] = useState(true);
+const [edgeNav, setEdgeNav] = useState(true);
+
+<VideoEditor
+  defaultProject={project}
+  keyframes={{ enabled: kfEnabled }}
+  clipEdgeNav={{ enabled: edgeNav }} // adds the |◀ ▶| buttons + I/O shortcuts
+  onKeyframeSelectionChange={(target) => console.log(target)}
+  /* … */
+/>
+
+// Per-property mutators (panX / panY / scale animate independently).
+apiRef.current?.addKeyframe("clip-1", "scale", { time: 0, value: 1 });
+apiRef.current?.addKeyframe("clip-1", "scale", {
+  time: 2000,
+  value: 2.5,
+  easing: "easeInOut",
+});
+apiRef.current?.setKeyframeValue("clip-1", kfId, 1.8);
+apiRef.current?.setKeyframeEasing("clip-1", kfId, "easeOut");
+
+// Toolbar-style "K at playhead" drops all 3 props at once.
+apiRef.current?.setSelection("clip-1");
+apiRef.current?.toggleKeyframeAtPlayhead();
+```
+
+`Keyframe`, `KeyframeProp`, `EasingKind`, `EffectiveTransform`, `getEffectiveTransform`, `getTransformAtTimelineTime`, `IDENTITY_TRANSFORM`, `isIdentityTransform` are all re-exported from `@aicut/react` for thumbnail / preview rendering outside the editor.
+
+**Backend export:** both `@aicut/backend-ts` and `@aicut/backend-go` compile keyframes to ffmpeg `t`-expressions (`scale=…:eval=frame` + `overlay=…:eval=frame`). Pass `output: { width, height, fps }` in the export request — required for the keyframe filter graph to apply.
+
+See [@aicut/core's keyframes section](https://www.npmjs.com/package/@aicut/core#keyframes-per-clip-panx--pany--scale-animation) for the full API surface.
+
 ## `<LightingEditor>` (opt-in sub-entry)
 
 A 3D lighting director for AI relighting flows — separate component that doesn't pull three.js into the rest of your bundle.

package/dist/index.cjs

@@ -23,6 +23,7 @@ __export(index_exports, {
   CanvasCompositorEngine: () => import_core3.CanvasCompositorEngine,
   HEADER_WIDTH: () => import_core3.HEADER_WIDTH,
   HtmlVideoEngine: () => import_core3.HtmlVideoEngine,
+  IDENTITY_TRANSFORM: () => import_core3.IDENTITY_TRANSFORM,
   RULER_HEIGHT: () => import_core3.RULER_HEIGHT,
   TRACK_HEIGHT: () => import_core3.TRACK_HEIGHT,
   Timeline: () => Timeline,
@@ -30,7 +31,10 @@ __export(index_exports, {
   canvasCompositorEngineFactory: () => import_core3.canvasCompositorEngineFactory,
   createEmptyProject: () => import_core3.createEmptyProject,
   createId: () => import_core3.createId,
+  getEffectiveTransform: () => import_core3.getEffectiveTransform,
+  getTransformAtTimelineTime: () => import_core3.getTransformAtTimelineTime,
   htmlVideoEngineFactory: () => import_core3.htmlVideoEngineFactory,
+  isIdentityTransform: () => import_core3.isIdentityTransform,
   localeEn: () => import_core3.localeEn,
   localeZh: () => import_core3.localeZh,
   setTimelineMetrics: () => import_core3.setTimelineMetrics
@@ -59,7 +63,9 @@ function VideoEditor(props) {
       playbackEngine: cbRef.current.playbackEngine,
       ...cbRef.current.trackHeight != null ? { trackHeight: cbRef.current.trackHeight } : {},
       ...cbRef.current.rulerHeight != null ? { rulerHeight: cbRef.current.rulerHeight } : {},
-      ...cbRef.current.timelineHeight != null ? { timelineHeight: cbRef.current.timelineHeight } : {}
+      ...cbRef.current.timelineHeight != null ? { timelineHeight: cbRef.current.timelineHeight } : {},
+      ...cbRef.current.keyframes != null ? { keyframes: cbRef.current.keyframes } : {},
+      ...cbRef.current.clipEdgeNav != null ? { clipEdgeNav: cbRef.current.clipEdgeNav } : {}
     });
     editorRef.current = editor;
     setSlots({
@@ -78,6 +84,10 @@ function VideoEditor(props) {
         "selectionChange",
         ({ clipId }) => cbRef.current.onSelectionChange?.(clipId)
       ),
+      editor.on(
+        "keyframeSelectionChange",
+        ({ target }) => cbRef.current.onKeyframeSelectionChange?.(target)
+      ),
       editor.on("error", ({ error }) => cbRef.current.onError?.(error))
     ];
     cbRef.current.onReady?.(editor);
@@ -94,6 +104,22 @@ function VideoEditor(props) {
   (0, import_react.useEffect)(() => {
     if (props.locale) editorRef.current?.setLocale(props.locale);
   }, [props.locale]);
+  (0, import_react.useEffect)(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const desired = props.keyframes?.enabled === true;
+    if (editor.isKeyframesEnabled() !== desired) {
+      editor.setKeyframesEnabled(desired);
+    }
+  }, [props.keyframes?.enabled]);
+  (0, import_react.useEffect)(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const desired = props.clipEdgeNav?.enabled === true;
+    if (editor.isClipEdgeNavEnabled() !== desired) {
+      editor.setClipEdgeNavEnabled(desired);
+    }
+  }, [props.clipEdgeNav?.enabled]);
   (0, import_react.useEffect)(() => {
     const host = hostRef.current;
     if (!host) return;
@@ -222,6 +248,7 @@ var import_core3 = require("@aicut/core");
   CanvasCompositorEngine,
   HEADER_WIDTH,
   HtmlVideoEngine,
+  IDENTITY_TRANSFORM,
   RULER_HEIGHT,
   TRACK_HEIGHT,
   Timeline,
@@ -229,7 +256,10 @@ var import_core3 = require("@aicut/core");
   canvasCompositorEngineFactory,
   createEmptyProject,
   createId,
+  getEffectiveTransform,
+  getTransformAtTimelineTime,
   htmlVideoEngineFactory,
+  isIdentityTransform,
   localeEn,
   localeZh,
   setTimelineMetrics

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/VideoEditor.tsx","../src/Timeline.tsx"],"sourcesContent":["export { VideoEditor } from \"./VideoEditor.js\";\nexport type { VideoEditorProps, VideoEditorApi } from \"./VideoEditor.js\";\nexport { Timeline } from \"./Timeline.js\";\nexport type { TimelineProps, TimelineApi } from \"./Timeline.js\";\nexport type {\n  Project,\n  MediaSource,\n  Track,\n  Clip,\n  Ms,\n  Theme,\n  EditorApi,\n  Locale,\n  PlaybackEngine,\n  PlaybackEngineFactory,\n  PlaybackEngineOptions,\n  CanvasCompositorEngineOptions,\n} from \"@aicut/core\";\nexport {\n  createEmptyProject,\n  createId,\n  localeEn,\n  localeZh,\n  HtmlVideoEngine,\n  htmlVideoEngineFactory,\n  CanvasCompositorEngine,\n  canvasCompositorEngineFactory,\n  // Live bindings — re-reading them after `setTimelineMetrics` (which\n  // EditorOptions.trackHeight / .rulerHeight calls under the hood)\n  // returns the updated values.\n  TRACK_HEIGHT,\n  RULER_HEIGHT,\n  HEADER_WIDTH,\n  setTimelineMetrics,\n} from \"@aicut/core\";\n","import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  Editor,\n  type EditorApi,\n  type Locale,\n  type Ms,\n  type PlaybackEngineFactory,\n  type Project,\n  type Theme,\n} from \"@aicut/core\";\n\nexport type VideoEditorApi = EditorApi;\n\nexport interface VideoEditorProps {\n  /**\n   * Initial project. Read once on mount — to swap projects after mount,\n   * call `apiRef.current.setProject(...)` so React doesn't reinstantiate\n   * the editor and lose playback state.\n   */\n  defaultProject?: Project;\n  /** CSS variable overrides applied on mount and whenever this ref changes. */\n  theme?: Theme;\n  /**\n   * UI string overrides (English default). Mirror prop — switching the\n   * value calls `editor.setLocale` and the toolbar / canvas labels\n   * update in place. Use `localeZh` from `@aicut/core` for Chinese.\n   */\n  locale?: Partial<Locale>;\n\n  className?: string;\n  style?: CSSProperties;\n\n  /** Imperative handle for cut/seek/getProject/setProject/etc. */\n  apiRef?: Ref<VideoEditorApi | null>;\n\n  onReady?: (api: VideoEditorApi) => void;\n  onChange?: (project: Project) => void;\n  onExport?: (project: Project) => void;\n  onTimeUpdate?: (timeMs: Ms) => void;\n  onPlay?: () => void;\n  onPause?: () => void;\n  onSelectionChange?: (clipId: string | null) => void;\n  onError?: (error: Error) => void;\n\n  /**\n   * Rendered into the very left of the editor's top toolbar — host\n   * adds anything here (size dropdown, branding, status badge). The\n   * library reserves no space for it; if you pass nothing, no\n   * separator appears.\n   */\n  toolbarLeft?: ReactNode;\n  /** Same as `toolbarLeft` but at the very right of the toolbar. */\n  toolbarRight?: ReactNode;\n  /**\n   * Rendered into the LEFT side of an optional header bar above the\n   * preview (project name, file menu, breadcrumbs). The header\n   * collapses entirely when both header slots are empty, so the\n   * default layout is identical to before this slot existed.\n   */\n  headerLeft?: ReactNode;\n  /** Right side of the editor header — conventionally Share / Export / profile. */\n  headerRight?: ReactNode;\n\n  /**\n   * Initial-only — picks the playback engine used by the underlying\n   * core Editor. Defaults to the built-in `HtmlVideoEngine`. Pass a\n   * factory to plug in a custom engine (WebCodecs, WebGL compositor,\n   * IPC bridge to a native player, …). Swapping this prop after mount\n   * has no effect — the editor binds its engine at construction.\n   */\n  playbackEngine?: PlaybackEngineFactory;\n  /**\n   * Initial-only — pixel height of each track row (default 56). Lower\n   * values (~32–40) shrink the timeline for small viewports where the\n   * default crowds out the preview. Applied process-wide; to re-apply\n   * change this prop AND remount the component (e.g. via `key`).\n   */\n  trackHeight?: number;\n  /** Initial-only — pixel height of the timeline ruler (default 24). */\n  rulerHeight?: number;\n  /**\n   * Pixel height of the whole bottom timeline area (default 240).\n   * Reactive — set anytime to change. The canvas inside fills 100%\n   * and shows an internal scrollbar when track count overflows.\n   * Useful range: [120, 480] depending on viewport.\n   */\n  timelineHeight?: number;\n}\n\n/**\n * Declarative React shell over `@aicut/core` `Editor`. Mounts the\n * editor instance once, mirrors prop changes (`theme`) into it, and\n * forwards events as React-style callbacks.\n *\n * Intentionally uncontrolled for project state — the editor owns the\n * current project. Use `onChange` to persist and `apiRef.setProject`\n * to restore.\n */\nexport function VideoEditor(props: VideoEditorProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const editorRef = useRef<Editor | null>(null);\n  // Toolbar slot DOM nodes don't exist until the editor mounts; we\n  // hold them in state so React re-runs the render after mount and\n  // the portals attach. Tracked separately for left + right because\n  // each is independently controlled by host props.\n  const [slots, setSlots] = useState<{\n    left: HTMLElement;\n    right: HTMLElement;\n    headerLeft: HTMLElement;\n    headerRight: HTMLElement;\n  } | null>(null);\n\n  // Latest-callback refs so the effect that creates the editor doesn't\n  // re-run on every parent render just because props.onChange is a new\n  // identity — the editor would otherwise be torn down constantly.\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const editor = Editor.create({\n      container: host,\n      project: cbRef.current.defaultProject,\n      theme: cbRef.current.theme,\n      locale: cbRef.current.locale,\n      playbackEngine: cbRef.current.playbackEngine,\n      ...(cbRef.current.trackHeight != null\n        ? { trackHeight: cbRef.current.trackHeight }\n        : {}),\n      ...(cbRef.current.rulerHeight != null\n        ? { rulerHeight: cbRef.current.rulerHeight }\n        : {}),\n      ...(cbRef.current.timelineHeight != null\n        ? { timelineHeight: cbRef.current.timelineHeight }\n        : {}),\n    });\n    editorRef.current = editor;\n    setSlots({\n      left: editor.toolbarLeft,\n      right: editor.toolbarRight,\n      headerLeft: editor.headerLeft,\n      headerRight: editor.headerRight,\n    });\n\n    const offs = [\n      editor.on(\"change\", ({ project }) => cbRef.current.onChange?.(project)),\n      editor.on(\"export\", ({ project }) => cbRef.current.onExport?.(project)),\n      editor.on(\"time\", ({ timeMs }) => cbRef.current.onTimeUpdate?.(timeMs)),\n      editor.on(\"play\", () => cbRef.current.onPlay?.()),\n      editor.on(\"pause\", () => cbRef.current.onPause?.()),\n      editor.on(\"selectionChange\", ({ clipId }) =>\n        cbRef.current.onSelectionChange?.(clipId),\n      ),\n      editor.on(\"error\", ({ error }) => cbRef.current.onError?.(error)),\n    ];\n\n    cbRef.current.onReady?.(editor);\n\n    return () => {\n      for (const off of offs) off();\n      editor.destroy();\n      editorRef.current = null;\n      setSlots(null);\n    };\n    // Editor lifecycle is tied to mount; we deliberately don't list\n    // any reactive deps. `theme` changes are pushed through the\n    // separate effect below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.theme) editorRef.current?.setTheme(props.theme);\n  }, [props.theme]);\n\n  useEffect(() => {\n    if (props.locale) editorRef.current?.setLocale(props.locale);\n  }, [props.locale]);\n\n  // Reactive — the underlying CSS custom property can be updated on\n  // the container any time; the timeline picks up the new height\n  // immediately via CSS. No remount required.\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    if (props.timelineHeight != null && props.timelineHeight > 0) {\n      host.style.setProperty(\n        \"--aicut-timeline-height\",\n        `${Math.round(props.timelineHeight)}px`,\n      );\n    } else {\n      host.style.removeProperty(\"--aicut-timeline-height\");\n    }\n  }, [props.timelineHeight]);\n\n  // Deps must include `slots`. Without it, the factory ran once during\n  // the first commit — BEFORE the useEffect above had a chance to\n  // create the editor — so `apiRef.current` was permanently locked to\n  // null. `slots` flips from null to a real value the same instant\n  // the editor is created, so it's the cleanest re-run trigger.\n  useImperativeHandle<VideoEditorApi | null, VideoEditorApi | null>(\n    props.apiRef,\n    () => editorRef.current,\n    [slots],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={props.style}\n      data-aicut-host=\"\"\n    >\n      {slots && props.toolbarLeft != null\n        ? createPortal(props.toolbarLeft, slots.left)\n        : null}\n      {slots && props.toolbarRight != null\n        ? createPortal(props.toolbarRight, slots.right)\n        : null}\n      {slots && props.headerLeft != null\n        ? createPortal(props.headerLeft, slots.headerLeft)\n        : null}\n      {slots && props.headerRight != null\n        ? createPortal(props.headerRight, slots.headerRight)\n        : null}\n    </div>\n  );\n}\n","import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  Timeline as CoreTimeline,\n  type Clip,\n  type Locale,\n  type Ms,\n  type Project,\n  type TimelineOptions,\n} from \"@aicut/core\";\n\n/** Imperative handle exposed via `apiRef`. */\nexport interface TimelineApi {\n  setProject(p: Project): void;\n  getProject(): Project;\n  setTime(t: Ms): void;\n  getTime(): Ms;\n  setScale(pxPerSec: number): void;\n  getScale(): number;\n  setSelection(id: string | null): void;\n  getSelection(): string | null;\n  setSnap(snap: boolean): void;\n  fitToWindow(): void;\n  getDebugInfo(): ReturnType<CoreTimeline[\"getDebugInfo\"]>;\n}\n\nexport interface TimelineProps {\n  /** Initial project. Use `apiRef.current.setProject(...)` to swap. */\n  defaultProject: Project;\n  /** Initial scale (px/sec). Defaults to 80; auto-fits on first render. */\n  defaultScale?: number;\n  /** Initial playhead position. */\n  defaultTime?: Ms;\n  /** Initial selection. */\n  defaultSelectedClipId?: string | null;\n\n  /** Hide the left header column (compact / frame-picker mode). */\n  showHeader?: boolean;\n  /** Disable all editing interactions. */\n  readOnly?: boolean;\n  /** Snap to clip edges + playhead when dragging. Default true. */\n  snap?: boolean;\n  /** Apply fit-to-window on mount once duration is known. Default true. */\n  autoFit?: boolean;\n  /** UI string overrides (English default). */\n  locale?: Partial<Locale>;\n  /**\n   * Render a 36px top toolbar strip with empty left/right flex slots\n   * for host-supplied controls. Default false. Pair with `toolbarLeft`\n   * / `toolbarRight` to inject content.\n   */\n  toolbar?: boolean;\n  /** Rendered into the left slot of the timeline toolbar (toolbar must be true). */\n  toolbarLeft?: ReactNode;\n  /** Rendered into the right slot of the timeline toolbar. */\n  toolbarRight?: ReactNode;\n\n  className?: string;\n  style?: CSSProperties;\n\n  apiRef?: Ref<TimelineApi | null>;\n\n  onSeek?: (timeMs: Ms) => void;\n  onSelectClip?: (clipId: string | null) => void;\n  onScaleChange?: (pxPerSec: number) => void;\n  onMoveClip?: TimelineOptions[\"onMoveClip\"];\n  onResizeClip?: TimelineOptions[\"onResizeClip\"];\n  onChange?: (project: Project) => void;\n}\n\n/**\n * Standalone, framework-agnostic canvas Timeline wrapped for React.\n * Mount it without an `Editor` for use cases like a video frame-picker:\n *\n * ```tsx\n * <Timeline\n *   defaultProject={{ version: 1, sources: [video], tracks: [{ id, kind: \"video\", clips: [{...}] }] }}\n *   showHeader={false}\n *   readOnly\n *   onSeek={(ms) => setCurrentMs(ms)}\n * />\n * ```\n *\n * Uncontrolled for `project` and `pxPerSec` — the underlying Timeline\n * owns them and reports changes via callbacks. Call methods on\n * `apiRef.current` to drive it imperatively (mirroring ag-Grid /\n * VideoEditor patterns).\n */\nexport function Timeline(props: TimelineProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const tlRef = useRef<CoreTimeline | null>(null);\n  const [slots, setSlots] = useState<{\n    left: HTMLElement;\n    right: HTMLElement;\n  } | null>(null);\n\n  // Latest-callback ref so the create-once effect doesn't tear the\n  // timeline down on every render just because callback identities\n  // change.\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const tl = CoreTimeline.create({\n      container: host,\n      project: cbRef.current.defaultProject,\n      pxPerSec: cbRef.current.defaultScale,\n      time: cbRef.current.defaultTime,\n      selectedClipId: cbRef.current.defaultSelectedClipId ?? null,\n      showHeader: cbRef.current.showHeader,\n      readOnly: cbRef.current.readOnly,\n      snap: cbRef.current.snap,\n      autoFit: cbRef.current.autoFit,\n      locale: cbRef.current.locale,\n      toolbar: cbRef.current.toolbar,\n      onSeek: (t) => cbRef.current.onSeek?.(t),\n      onSelectClip: (id) => cbRef.current.onSelectClip?.(id),\n      onScaleChange: (s) => cbRef.current.onScaleChange?.(s),\n      onMoveClip: (id, opts) => cbRef.current.onMoveClip?.(id, opts),\n      onResizeClip: (id, e) => cbRef.current.onResizeClip?.(id, e),\n      onChange: (p) => cbRef.current.onChange?.(p),\n    });\n    tlRef.current = tl;\n    if (tl.toolbarLeft && tl.toolbarRight) {\n      setSlots({ left: tl.toolbarLeft, right: tl.toolbarRight });\n    }\n    return () => {\n      tl.destroy();\n      tlRef.current = null;\n      setSlots(null);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.locale) tlRef.current?.setLocale(props.locale);\n  }, [props.locale]);\n\n  useImperativeHandle<TimelineApi | null, TimelineApi | null>(\n    props.apiRef,\n    () => {\n      const tl = tlRef.current;\n      if (!tl) return null;\n      return {\n        setProject: (p) => tl.setProject(p),\n        getProject: () => tl.getProject(),\n        setTime: (t) => tl.setTime(t),\n        getTime: () => tl.getTime(),\n        setScale: (s) => tl.setScale(s),\n        getScale: () => tl.getScale(),\n        setSelection: (id) => tl.setSelection(id),\n        getSelection: () => tl.getSelection(),\n        setSnap: (s) => tl.setSnap(s),\n        fitToWindow: () => tl.fitToWindow(),\n        getDebugInfo: () => tl.getDebugInfo(),\n      };\n    },\n    // Same caveat as VideoEditor.tsx — factory must re-run once the\n    // timeline is created in useEffect, otherwise apiRef.current is\n    // null forever. `slots` flips from null to a real value the\n    // instant the timeline is ready, so it's the cleanest trigger.\n    [slots],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={{ width: \"100%\", height: 240, ...props.style }}\n      data-aicut-timeline-host=\"\"\n    >\n      {slots && props.toolbarLeft != null\n        ? createPortal(props.toolbarLeft, slots.left)\n        : null}\n      {slots && props.toolbarRight != null\n        ? createPortal(props.toolbarRight, slots.right)\n        : null}\n    </div>\n  );\n\n  // Type-only re-export used to keep React/Vue prop typings in lockstep\n  // with the core. Reference here so the symbol isn't tree-shaken.\n  void ({} as Clip);\n}\n"],"mappings":"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","names":["import_react","import_react_dom","import_core","import_jsx_runtime","CoreTimeline","import_core"]}
+{"version":3,"sources":["../src/index.ts","../src/VideoEditor.tsx","../src/Timeline.tsx"],"sourcesContent":["export { VideoEditor } from \"./VideoEditor.js\";\nexport type { VideoEditorProps, VideoEditorApi } from \"./VideoEditor.js\";\nexport { Timeline } from \"./Timeline.js\";\nexport type { TimelineProps, TimelineApi } from \"./Timeline.js\";\nexport type {\n  Project,\n  MediaSource,\n  Track,\n  Clip,\n  Keyframe,\n  Ms,\n  Theme,\n  EditorApi,\n  Locale,\n  PlaybackEngine,\n  PlaybackEngineFactory,\n  PlaybackEngineOptions,\n  CanvasCompositorEngineOptions,\n  EffectiveTransform,\n} from \"@aicut/core\";\nexport {\n  createEmptyProject,\n  createId,\n  localeEn,\n  localeZh,\n  HtmlVideoEngine,\n  htmlVideoEngineFactory,\n  CanvasCompositorEngine,\n  canvasCompositorEngineFactory,\n  // Live bindings — re-reading them after `setTimelineMetrics` (which\n  // EditorOptions.trackHeight / .rulerHeight calls under the hood)\n  // returns the updated values.\n  TRACK_HEIGHT,\n  RULER_HEIGHT,\n  HEADER_WIDTH,\n  setTimelineMetrics,\n  // Pure-math keyframe helpers — hosts can read effective transforms\n  // for previews / thumbnails without touching the playback engine.\n  IDENTITY_TRANSFORM,\n  isIdentityTransform,\n  getEffectiveTransform,\n  getTransformAtTimelineTime,\n} from \"@aicut/core\";\n","import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  Editor,\n  type EditorApi,\n  type Locale,\n  type Ms,\n  type PlaybackEngineFactory,\n  type Project,\n  type Theme,\n} from \"@aicut/core\";\n\nexport type VideoEditorApi = EditorApi;\n\nexport interface VideoEditorProps {\n  /**\n   * Initial project. Read once on mount — to swap projects after mount,\n   * call `apiRef.current.setProject(...)` so React doesn't reinstantiate\n   * the editor and lose playback state.\n   */\n  defaultProject?: Project;\n  /** CSS variable overrides applied on mount and whenever this ref changes. */\n  theme?: Theme;\n  /**\n   * UI string overrides (English default). Mirror prop — switching the\n   * value calls `editor.setLocale` and the toolbar / canvas labels\n   * update in place. Use `localeZh` from `@aicut/core` for Chinese.\n   */\n  locale?: Partial<Locale>;\n\n  className?: string;\n  style?: CSSProperties;\n\n  /** Imperative handle for cut/seek/getProject/setProject/etc. */\n  apiRef?: Ref<VideoEditorApi | null>;\n\n  onReady?: (api: VideoEditorApi) => void;\n  onChange?: (project: Project) => void;\n  onExport?: (project: Project) => void;\n  onTimeUpdate?: (timeMs: Ms) => void;\n  onPlay?: () => void;\n  onPause?: () => void;\n  onSelectionChange?: (clipId: string | null) => void;\n  onError?: (error: Error) => void;\n\n  /**\n   * Rendered into the very left of the editor's top toolbar — host\n   * adds anything here (size dropdown, branding, status badge). The\n   * library reserves no space for it; if you pass nothing, no\n   * separator appears.\n   */\n  toolbarLeft?: ReactNode;\n  /** Same as `toolbarLeft` but at the very right of the toolbar. */\n  toolbarRight?: ReactNode;\n  /**\n   * Rendered into the LEFT side of an optional header bar above the\n   * preview (project name, file menu, breadcrumbs). The header\n   * collapses entirely when both header slots are empty, so the\n   * default layout is identical to before this slot existed.\n   */\n  headerLeft?: ReactNode;\n  /** Right side of the editor header — conventionally Share / Export / profile. */\n  headerRight?: ReactNode;\n\n  /**\n   * Initial-only — picks the playback engine used by the underlying\n   * core Editor. Defaults to the built-in `HtmlVideoEngine`. Pass a\n   * factory to plug in a custom engine (WebCodecs, WebGL compositor,\n   * IPC bridge to a native player, …). Swapping this prop after mount\n   * has no effect — the editor binds its engine at construction.\n   */\n  playbackEngine?: PlaybackEngineFactory;\n  /**\n   * Initial-only — pixel height of each track row (default 56). Lower\n   * values (~32–40) shrink the timeline for small viewports where the\n   * default crowds out the preview. Applied process-wide; to re-apply\n   * change this prop AND remount the component (e.g. via `key`).\n   */\n  trackHeight?: number;\n  /** Initial-only — pixel height of the timeline ruler (default 24). */\n  rulerHeight?: number;\n  /**\n   * Pixel height of the whole bottom timeline area (default 240).\n   * Reactive — set anytime to change. The canvas inside fills 100%\n   * and shows an internal scrollbar when track count overflows.\n   * Useful range: [120, 480] depending on viewport.\n   */\n  timelineHeight?: number;\n  /**\n   * Per-clip keyframe animation (X / Y / Scale). Reactive — set\n   * `{ enabled: true }` to surface keyframe diamonds on the timeline\n   * and route the canvas-based engines through the transform pipeline.\n   * Disabling hides the editing UI but preserves the data in\n   * `Project.tracks[].clips[].keyframes`.\n   *\n   * `HtmlVideoEngine` cannot animate frames; swap to\n   * `CanvasCompositorEngine` or `WebCodecsEngine` for live preview.\n   */\n  keyframes?: { enabled?: boolean };\n  /** Fires when the user selects or deselects a keyframe diamond. */\n  onKeyframeSelectionChange?: (\n    target: { clipId: string; keyframeId: string } | null,\n  ) => void;\n  /**\n   * Jump-to-clip-edge toolbar cluster (|◀ ▶|) + I/O keyboard shortcuts.\n   * Reactive — set `{ enabled: true }` to surface the buttons next to\n   * the keyframe diamond and bind the shortcuts. Off hides the buttons\n   * entirely (display: none, no toolbar space cost) and lets I/O\n   * fall through to the page.\n   */\n  clipEdgeNav?: { enabled?: boolean };\n}\n\n/**\n * Declarative React shell over `@aicut/core` `Editor`. Mounts the\n * editor instance once, mirrors prop changes (`theme`) into it, and\n * forwards events as React-style callbacks.\n *\n * Intentionally uncontrolled for project state — the editor owns the\n * current project. Use `onChange` to persist and `apiRef.setProject`\n * to restore.\n */\nexport function VideoEditor(props: VideoEditorProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const editorRef = useRef<Editor | null>(null);\n  // Toolbar slot DOM nodes don't exist until the editor mounts; we\n  // hold them in state so React re-runs the render after mount and\n  // the portals attach. Tracked separately for left + right because\n  // each is independently controlled by host props.\n  const [slots, setSlots] = useState<{\n    left: HTMLElement;\n    right: HTMLElement;\n    headerLeft: HTMLElement;\n    headerRight: HTMLElement;\n  } | null>(null);\n\n  // Latest-callback refs so the effect that creates the editor doesn't\n  // re-run on every parent render just because props.onChange is a new\n  // identity — the editor would otherwise be torn down constantly.\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const editor = Editor.create({\n      container: host,\n      project: cbRef.current.defaultProject,\n      theme: cbRef.current.theme,\n      locale: cbRef.current.locale,\n      playbackEngine: cbRef.current.playbackEngine,\n      ...(cbRef.current.trackHeight != null\n        ? { trackHeight: cbRef.current.trackHeight }\n        : {}),\n      ...(cbRef.current.rulerHeight != null\n        ? { rulerHeight: cbRef.current.rulerHeight }\n        : {}),\n      ...(cbRef.current.timelineHeight != null\n        ? { timelineHeight: cbRef.current.timelineHeight }\n        : {}),\n      ...(cbRef.current.keyframes != null\n        ? { keyframes: cbRef.current.keyframes }\n        : {}),\n      ...(cbRef.current.clipEdgeNav != null\n        ? { clipEdgeNav: cbRef.current.clipEdgeNav }\n        : {}),\n    });\n    editorRef.current = editor;\n    setSlots({\n      left: editor.toolbarLeft,\n      right: editor.toolbarRight,\n      headerLeft: editor.headerLeft,\n      headerRight: editor.headerRight,\n    });\n\n    const offs = [\n      editor.on(\"change\", ({ project }) => cbRef.current.onChange?.(project)),\n      editor.on(\"export\", ({ project }) => cbRef.current.onExport?.(project)),\n      editor.on(\"time\", ({ timeMs }) => cbRef.current.onTimeUpdate?.(timeMs)),\n      editor.on(\"play\", () => cbRef.current.onPlay?.()),\n      editor.on(\"pause\", () => cbRef.current.onPause?.()),\n      editor.on(\"selectionChange\", ({ clipId }) =>\n        cbRef.current.onSelectionChange?.(clipId),\n      ),\n      editor.on(\"keyframeSelectionChange\", ({ target }) =>\n        cbRef.current.onKeyframeSelectionChange?.(target),\n      ),\n      editor.on(\"error\", ({ error }) => cbRef.current.onError?.(error)),\n    ];\n\n    cbRef.current.onReady?.(editor);\n\n    return () => {\n      for (const off of offs) off();\n      editor.destroy();\n      editorRef.current = null;\n      setSlots(null);\n    };\n    // Editor lifecycle is tied to mount; we deliberately don't list\n    // any reactive deps. `theme` changes are pushed through the\n    // separate effect below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.theme) editorRef.current?.setTheme(props.theme);\n  }, [props.theme]);\n\n  useEffect(() => {\n    if (props.locale) editorRef.current?.setLocale(props.locale);\n  }, [props.locale]);\n\n  // Reactive — flipping `keyframes.enabled` instantly toggles diamond\n  // visibility on the timeline and routes the canvas / WebCodecs\n  // engines through the transform pipeline (or not). Data is\n  // preserved either way.\n  useEffect(() => {\n    const editor = editorRef.current;\n    if (!editor) return;\n    const desired = props.keyframes?.enabled === true;\n    if (editor.isKeyframesEnabled() !== desired) {\n      editor.setKeyframesEnabled(desired);\n    }\n  }, [props.keyframes?.enabled]);\n\n  useEffect(() => {\n    const editor = editorRef.current;\n    if (!editor) return;\n    const desired = props.clipEdgeNav?.enabled === true;\n    if (editor.isClipEdgeNavEnabled() !== desired) {\n      editor.setClipEdgeNavEnabled(desired);\n    }\n  }, [props.clipEdgeNav?.enabled]);\n\n  // Reactive — the underlying CSS custom property can be updated on\n  // the container any time; the timeline picks up the new height\n  // immediately via CSS. No remount required.\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    if (props.timelineHeight != null && props.timelineHeight > 0) {\n      host.style.setProperty(\n        \"--aicut-timeline-height\",\n        `${Math.round(props.timelineHeight)}px`,\n      );\n    } else {\n      host.style.removeProperty(\"--aicut-timeline-height\");\n    }\n  }, [props.timelineHeight]);\n\n  // Deps must include `slots`. Without it, the factory ran once during\n  // the first commit — BEFORE the useEffect above had a chance to\n  // create the editor — so `apiRef.current` was permanently locked to\n  // null. `slots` flips from null to a real value the same instant\n  // the editor is created, so it's the cleanest re-run trigger.\n  useImperativeHandle<VideoEditorApi | null, VideoEditorApi | null>(\n    props.apiRef,\n    () => editorRef.current,\n    [slots],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={props.style}\n      data-aicut-host=\"\"\n    >\n      {slots && props.toolbarLeft != null\n        ? createPortal(props.toolbarLeft, slots.left)\n        : null}\n      {slots && props.toolbarRight != null\n        ? createPortal(props.toolbarRight, slots.right)\n        : null}\n      {slots && props.headerLeft != null\n        ? createPortal(props.headerLeft, slots.headerLeft)\n        : null}\n      {slots && props.headerRight != null\n        ? createPortal(props.headerRight, slots.headerRight)\n        : null}\n    </div>\n  );\n}\n","import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  Timeline as CoreTimeline,\n  type Clip,\n  type Locale,\n  type Ms,\n  type Project,\n  type TimelineOptions,\n} from \"@aicut/core\";\n\n/** Imperative handle exposed via `apiRef`. */\nexport interface TimelineApi {\n  setProject(p: Project): void;\n  getProject(): Project;\n  setTime(t: Ms): void;\n  getTime(): Ms;\n  setScale(pxPerSec: number): void;\n  getScale(): number;\n  setSelection(id: string | null): void;\n  getSelection(): string | null;\n  setSnap(snap: boolean): void;\n  fitToWindow(): void;\n  getDebugInfo(): ReturnType<CoreTimeline[\"getDebugInfo\"]>;\n}\n\nexport interface TimelineProps {\n  /** Initial project. Use `apiRef.current.setProject(...)` to swap. */\n  defaultProject: Project;\n  /** Initial scale (px/sec). Defaults to 80; auto-fits on first render. */\n  defaultScale?: number;\n  /** Initial playhead position. */\n  defaultTime?: Ms;\n  /** Initial selection. */\n  defaultSelectedClipId?: string | null;\n\n  /** Hide the left header column (compact / frame-picker mode). */\n  showHeader?: boolean;\n  /** Disable all editing interactions. */\n  readOnly?: boolean;\n  /** Snap to clip edges + playhead when dragging. Default true. */\n  snap?: boolean;\n  /** Apply fit-to-window on mount once duration is known. Default true. */\n  autoFit?: boolean;\n  /** UI string overrides (English default). */\n  locale?: Partial<Locale>;\n  /**\n   * Render a 36px top toolbar strip with empty left/right flex slots\n   * for host-supplied controls. Default false. Pair with `toolbarLeft`\n   * / `toolbarRight` to inject content.\n   */\n  toolbar?: boolean;\n  /** Rendered into the left slot of the timeline toolbar (toolbar must be true). */\n  toolbarLeft?: ReactNode;\n  /** Rendered into the right slot of the timeline toolbar. */\n  toolbarRight?: ReactNode;\n\n  className?: string;\n  style?: CSSProperties;\n\n  apiRef?: Ref<TimelineApi | null>;\n\n  onSeek?: (timeMs: Ms) => void;\n  onSelectClip?: (clipId: string | null) => void;\n  onScaleChange?: (pxPerSec: number) => void;\n  onMoveClip?: TimelineOptions[\"onMoveClip\"];\n  onResizeClip?: TimelineOptions[\"onResizeClip\"];\n  onChange?: (project: Project) => void;\n}\n\n/**\n * Standalone, framework-agnostic canvas Timeline wrapped for React.\n * Mount it without an `Editor` for use cases like a video frame-picker:\n *\n * ```tsx\n * <Timeline\n *   defaultProject={{ version: 1, sources: [video], tracks: [{ id, kind: \"video\", clips: [{...}] }] }}\n *   showHeader={false}\n *   readOnly\n *   onSeek={(ms) => setCurrentMs(ms)}\n * />\n * ```\n *\n * Uncontrolled for `project` and `pxPerSec` — the underlying Timeline\n * owns them and reports changes via callbacks. Call methods on\n * `apiRef.current` to drive it imperatively (mirroring ag-Grid /\n * VideoEditor patterns).\n */\nexport function Timeline(props: TimelineProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const tlRef = useRef<CoreTimeline | null>(null);\n  const [slots, setSlots] = useState<{\n    left: HTMLElement;\n    right: HTMLElement;\n  } | null>(null);\n\n  // Latest-callback ref so the create-once effect doesn't tear the\n  // timeline down on every render just because callback identities\n  // change.\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const tl = CoreTimeline.create({\n      container: host,\n      project: cbRef.current.defaultProject,\n      pxPerSec: cbRef.current.defaultScale,\n      time: cbRef.current.defaultTime,\n      selectedClipId: cbRef.current.defaultSelectedClipId ?? null,\n      showHeader: cbRef.current.showHeader,\n      readOnly: cbRef.current.readOnly,\n      snap: cbRef.current.snap,\n      autoFit: cbRef.current.autoFit,\n      locale: cbRef.current.locale,\n      toolbar: cbRef.current.toolbar,\n      onSeek: (t) => cbRef.current.onSeek?.(t),\n      onSelectClip: (id) => cbRef.current.onSelectClip?.(id),\n      onScaleChange: (s) => cbRef.current.onScaleChange?.(s),\n      onMoveClip: (id, opts) => cbRef.current.onMoveClip?.(id, opts),\n      onResizeClip: (id, e) => cbRef.current.onResizeClip?.(id, e),\n      onChange: (p) => cbRef.current.onChange?.(p),\n    });\n    tlRef.current = tl;\n    if (tl.toolbarLeft && tl.toolbarRight) {\n      setSlots({ left: tl.toolbarLeft, right: tl.toolbarRight });\n    }\n    return () => {\n      tl.destroy();\n      tlRef.current = null;\n      setSlots(null);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.locale) tlRef.current?.setLocale(props.locale);\n  }, [props.locale]);\n\n  useImperativeHandle<TimelineApi | null, TimelineApi | null>(\n    props.apiRef,\n    () => {\n      const tl = tlRef.current;\n      if (!tl) return null;\n      return {\n        setProject: (p) => tl.setProject(p),\n        getProject: () => tl.getProject(),\n        setTime: (t) => tl.setTime(t),\n        getTime: () => tl.getTime(),\n        setScale: (s) => tl.setScale(s),\n        getScale: () => tl.getScale(),\n        setSelection: (id) => tl.setSelection(id),\n        getSelection: () => tl.getSelection(),\n        setSnap: (s) => tl.setSnap(s),\n        fitToWindow: () => tl.fitToWindow(),\n        getDebugInfo: () => tl.getDebugInfo(),\n      };\n    },\n    // Same caveat as VideoEditor.tsx — factory must re-run once the\n    // timeline is created in useEffect, otherwise apiRef.current is\n    // null forever. `slots` flips from null to a real value the\n    // instant the timeline is ready, so it's the cleanest trigger.\n    [slots],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={{ width: \"100%\", height: 240, ...props.style }}\n      data-aicut-timeline-host=\"\"\n    >\n      {slots && props.toolbarLeft != null\n        ? createPortal(props.toolbarLeft, slots.left)\n        : null}\n      {slots && props.toolbarRight != null\n        ? createPortal(props.toolbarRight, slots.right)\n        : null}\n    </div>\n  );\n\n  // Type-only re-export used to keep React/Vue prop typings in lockstep\n  // with the core. Reference here so the symbol isn't tree-shaken.\n  void ({} as Clip);\n}\n"],"mappings":"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","names":["import_react","import_react_dom","import_core","import_jsx_runtime","CoreTimeline","import_core"]}

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { CSSProperties, Ref, ReactNode } from 'react';
 import { Project, Theme, Locale, EditorApi, Ms, PlaybackEngineFactory, Timeline as Timeline$1, TimelineOptions } from '@aicut/core';
-export { CanvasCompositorEngine, CanvasCompositorEngineOptions, Clip, EditorApi, HEADER_WIDTH, HtmlVideoEngine, Locale, MediaSource, Ms, PlaybackEngine, PlaybackEngineFactory, PlaybackEngineOptions, Project, RULER_HEIGHT, TRACK_HEIGHT, Theme, Track, canvasCompositorEngineFactory, createEmptyProject, createId, htmlVideoEngineFactory, localeEn, localeZh, setTimelineMetrics } from '@aicut/core';
+export { CanvasCompositorEngine, CanvasCompositorEngineOptions, Clip, EditorApi, EffectiveTransform, HEADER_WIDTH, HtmlVideoEngine, IDENTITY_TRANSFORM, Keyframe, Locale, MediaSource, Ms, PlaybackEngine, PlaybackEngineFactory, PlaybackEngineOptions, Project, RULER_HEIGHT, TRACK_HEIGHT, Theme, Track, canvasCompositorEngineFactory, createEmptyProject, createId, getEffectiveTransform, getTransformAtTimelineTime, htmlVideoEngineFactory, isIdentityTransform, localeEn, localeZh, setTimelineMetrics } from '@aicut/core';
 
 type VideoEditorApi = EditorApi;
 interface VideoEditorProps {
@@ -73,6 +73,34 @@ interface VideoEditorProps {
      * Useful range: [120, 480] depending on viewport.
      */
     timelineHeight?: number;
+    /**
+     * Per-clip keyframe animation (X / Y / Scale). Reactive — set
+     * `{ enabled: true }` to surface keyframe diamonds on the timeline
+     * and route the canvas-based engines through the transform pipeline.
+     * Disabling hides the editing UI but preserves the data in
+     * `Project.tracks[].clips[].keyframes`.
+     *
+     * `HtmlVideoEngine` cannot animate frames; swap to
+     * `CanvasCompositorEngine` or `WebCodecsEngine` for live preview.
+     */
+    keyframes?: {
+        enabled?: boolean;
+    };
+    /** Fires when the user selects or deselects a keyframe diamond. */
+    onKeyframeSelectionChange?: (target: {
+        clipId: string;
+        keyframeId: string;
+    } | null) => void;
+    /**
+     * Jump-to-clip-edge toolbar cluster (|◀ ▶|) + I/O keyboard shortcuts.
+     * Reactive — set `{ enabled: true }` to surface the buttons next to
+     * the keyframe diamond and bind the shortcuts. Off hides the buttons
+     * entirely (display: none, no toolbar space cost) and lets I/O
+     * fall through to the page.
+     */
+    clipEdgeNav?: {
+        enabled?: boolean;
+    };
 }
 /**
  * Declarative React shell over `@aicut/core` `Editor`. Mounts the

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { CSSProperties, Ref, ReactNode } from 'react';
 import { Project, Theme, Locale, EditorApi, Ms, PlaybackEngineFactory, Timeline as Timeline$1, TimelineOptions } from '@aicut/core';
-export { CanvasCompositorEngine, CanvasCompositorEngineOptions, Clip, EditorApi, HEADER_WIDTH, HtmlVideoEngine, Locale, MediaSource, Ms, PlaybackEngine, PlaybackEngineFactory, PlaybackEngineOptions, Project, RULER_HEIGHT, TRACK_HEIGHT, Theme, Track, canvasCompositorEngineFactory, createEmptyProject, createId, htmlVideoEngineFactory, localeEn, localeZh, setTimelineMetrics } from '@aicut/core';
+export { CanvasCompositorEngine, CanvasCompositorEngineOptions, Clip, EditorApi, EffectiveTransform, HEADER_WIDTH, HtmlVideoEngine, IDENTITY_TRANSFORM, Keyframe, Locale, MediaSource, Ms, PlaybackEngine, PlaybackEngineFactory, PlaybackEngineOptions, Project, RULER_HEIGHT, TRACK_HEIGHT, Theme, Track, canvasCompositorEngineFactory, createEmptyProject, createId, getEffectiveTransform, getTransformAtTimelineTime, htmlVideoEngineFactory, isIdentityTransform, localeEn, localeZh, setTimelineMetrics } from '@aicut/core';
 
 type VideoEditorApi = EditorApi;
 interface VideoEditorProps {
@@ -73,6 +73,34 @@ interface VideoEditorProps {
      * Useful range: [120, 480] depending on viewport.
      */
     timelineHeight?: number;
+    /**
+     * Per-clip keyframe animation (X / Y / Scale). Reactive — set
+     * `{ enabled: true }` to surface keyframe diamonds on the timeline
+     * and route the canvas-based engines through the transform pipeline.
+     * Disabling hides the editing UI but preserves the data in
+     * `Project.tracks[].clips[].keyframes`.
+     *
+     * `HtmlVideoEngine` cannot animate frames; swap to
+     * `CanvasCompositorEngine` or `WebCodecsEngine` for live preview.
+     */
+    keyframes?: {
+        enabled?: boolean;
+    };
+    /** Fires when the user selects or deselects a keyframe diamond. */
+    onKeyframeSelectionChange?: (target: {
+        clipId: string;
+        keyframeId: string;
+    } | null) => void;
+    /**
+     * Jump-to-clip-edge toolbar cluster (|◀ ▶|) + I/O keyboard shortcuts.
+     * Reactive — set `{ enabled: true }` to surface the buttons next to
+     * the keyframe diamond and bind the shortcuts. Off hides the buttons
+     * entirely (display: none, no toolbar space cost) and lets I/O
+     * fall through to the page.
+     */
+    clipEdgeNav?: {
+        enabled?: boolean;
+    };
 }
 /**
  * Declarative React shell over `@aicut/core` `Editor`. Mounts the

package/dist/index.js

@@ -27,7 +27,9 @@ function VideoEditor(props) {
       playbackEngine: cbRef.current.playbackEngine,
       ...cbRef.current.trackHeight != null ? { trackHeight: cbRef.current.trackHeight } : {},
       ...cbRef.current.rulerHeight != null ? { rulerHeight: cbRef.current.rulerHeight } : {},
-      ...cbRef.current.timelineHeight != null ? { timelineHeight: cbRef.current.timelineHeight } : {}
+      ...cbRef.current.timelineHeight != null ? { timelineHeight: cbRef.current.timelineHeight } : {},
+      ...cbRef.current.keyframes != null ? { keyframes: cbRef.current.keyframes } : {},
+      ...cbRef.current.clipEdgeNav != null ? { clipEdgeNav: cbRef.current.clipEdgeNav } : {}
     });
     editorRef.current = editor;
     setSlots({
@@ -46,6 +48,10 @@ function VideoEditor(props) {
         "selectionChange",
         ({ clipId }) => cbRef.current.onSelectionChange?.(clipId)
       ),
+      editor.on(
+        "keyframeSelectionChange",
+        ({ target }) => cbRef.current.onKeyframeSelectionChange?.(target)
+      ),
       editor.on("error", ({ error }) => cbRef.current.onError?.(error))
     ];
     cbRef.current.onReady?.(editor);
@@ -62,6 +68,22 @@ function VideoEditor(props) {
   useEffect(() => {
     if (props.locale) editorRef.current?.setLocale(props.locale);
   }, [props.locale]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const desired = props.keyframes?.enabled === true;
+    if (editor.isKeyframesEnabled() !== desired) {
+      editor.setKeyframesEnabled(desired);
+    }
+  }, [props.keyframes?.enabled]);
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    const desired = props.clipEdgeNav?.enabled === true;
+    if (editor.isClipEdgeNavEnabled() !== desired) {
+      editor.setClipEdgeNavEnabled(desired);
+    }
+  }, [props.clipEdgeNav?.enabled]);
   useEffect(() => {
     const host = hostRef.current;
     if (!host) return;
@@ -203,12 +225,17 @@ import {
   TRACK_HEIGHT,
   RULER_HEIGHT,
   HEADER_WIDTH,
-  setTimelineMetrics
+  setTimelineMetrics,
+  IDENTITY_TRANSFORM,
+  isIdentityTransform,
+  getEffectiveTransform,
+  getTransformAtTimelineTime
 } from "@aicut/core";
 export {
   CanvasCompositorEngine,
   HEADER_WIDTH,
   HtmlVideoEngine,
+  IDENTITY_TRANSFORM,
   RULER_HEIGHT,
   TRACK_HEIGHT,
   Timeline,
@@ -216,7 +243,10 @@ export {
   canvasCompositorEngineFactory,
   createEmptyProject,
   createId,
+  getEffectiveTransform,
+  getTransformAtTimelineTime,
   htmlVideoEngineFactory,
+  isIdentityTransform,
   localeEn,
   localeZh,
   setTimelineMetrics

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/VideoEditor.tsx","../src/Timeline.tsx","../src/index.ts"],"sourcesContent":["import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  Editor,\n  type EditorApi,\n  type Locale,\n  type Ms,\n  type PlaybackEngineFactory,\n  type Project,\n  type Theme,\n} from \"@aicut/core\";\n\nexport type VideoEditorApi = EditorApi;\n\nexport interface VideoEditorProps {\n  /**\n   * Initial project. Read once on mount — to swap projects after mount,\n   * call `apiRef.current.setProject(...)` so React doesn't reinstantiate\n   * the editor and lose playback state.\n   */\n  defaultProject?: Project;\n  /** CSS variable overrides applied on mount and whenever this ref changes. */\n  theme?: Theme;\n  /**\n   * UI string overrides (English default). Mirror prop — switching the\n   * value calls `editor.setLocale` and the toolbar / canvas labels\n   * update in place. Use `localeZh` from `@aicut/core` for Chinese.\n   */\n  locale?: Partial<Locale>;\n\n  className?: string;\n  style?: CSSProperties;\n\n  /** Imperative handle for cut/seek/getProject/setProject/etc. */\n  apiRef?: Ref<VideoEditorApi | null>;\n\n  onReady?: (api: VideoEditorApi) => void;\n  onChange?: (project: Project) => void;\n  onExport?: (project: Project) => void;\n  onTimeUpdate?: (timeMs: Ms) => void;\n  onPlay?: () => void;\n  onPause?: () => void;\n  onSelectionChange?: (clipId: string | null) => void;\n  onError?: (error: Error) => void;\n\n  /**\n   * Rendered into the very left of the editor's top toolbar — host\n   * adds anything here (size dropdown, branding, status badge). The\n   * library reserves no space for it; if you pass nothing, no\n   * separator appears.\n   */\n  toolbarLeft?: ReactNode;\n  /** Same as `toolbarLeft` but at the very right of the toolbar. */\n  toolbarRight?: ReactNode;\n  /**\n   * Rendered into the LEFT side of an optional header bar above the\n   * preview (project name, file menu, breadcrumbs). The header\n   * collapses entirely when both header slots are empty, so the\n   * default layout is identical to before this slot existed.\n   */\n  headerLeft?: ReactNode;\n  /** Right side of the editor header — conventionally Share / Export / profile. */\n  headerRight?: ReactNode;\n\n  /**\n   * Initial-only — picks the playback engine used by the underlying\n   * core Editor. Defaults to the built-in `HtmlVideoEngine`. Pass a\n   * factory to plug in a custom engine (WebCodecs, WebGL compositor,\n   * IPC bridge to a native player, …). Swapping this prop after mount\n   * has no effect — the editor binds its engine at construction.\n   */\n  playbackEngine?: PlaybackEngineFactory;\n  /**\n   * Initial-only — pixel height of each track row (default 56). Lower\n   * values (~32–40) shrink the timeline for small viewports where the\n   * default crowds out the preview. Applied process-wide; to re-apply\n   * change this prop AND remount the component (e.g. via `key`).\n   */\n  trackHeight?: number;\n  /** Initial-only — pixel height of the timeline ruler (default 24). */\n  rulerHeight?: number;\n  /**\n   * Pixel height of the whole bottom timeline area (default 240).\n   * Reactive — set anytime to change. The canvas inside fills 100%\n   * and shows an internal scrollbar when track count overflows.\n   * Useful range: [120, 480] depending on viewport.\n   */\n  timelineHeight?: number;\n}\n\n/**\n * Declarative React shell over `@aicut/core` `Editor`. Mounts the\n * editor instance once, mirrors prop changes (`theme`) into it, and\n * forwards events as React-style callbacks.\n *\n * Intentionally uncontrolled for project state — the editor owns the\n * current project. Use `onChange` to persist and `apiRef.setProject`\n * to restore.\n */\nexport function VideoEditor(props: VideoEditorProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const editorRef = useRef<Editor | null>(null);\n  // Toolbar slot DOM nodes don't exist until the editor mounts; we\n  // hold them in state so React re-runs the render after mount and\n  // the portals attach. Tracked separately for left + right because\n  // each is independently controlled by host props.\n  const [slots, setSlots] = useState<{\n    left: HTMLElement;\n    right: HTMLElement;\n    headerLeft: HTMLElement;\n    headerRight: HTMLElement;\n  } | null>(null);\n\n  // Latest-callback refs so the effect that creates the editor doesn't\n  // re-run on every parent render just because props.onChange is a new\n  // identity — the editor would otherwise be torn down constantly.\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const editor = Editor.create({\n      container: host,\n      project: cbRef.current.defaultProject,\n      theme: cbRef.current.theme,\n      locale: cbRef.current.locale,\n      playbackEngine: cbRef.current.playbackEngine,\n      ...(cbRef.current.trackHeight != null\n        ? { trackHeight: cbRef.current.trackHeight }\n        : {}),\n      ...(cbRef.current.rulerHeight != null\n        ? { rulerHeight: cbRef.current.rulerHeight }\n        : {}),\n      ...(cbRef.current.timelineHeight != null\n        ? { timelineHeight: cbRef.current.timelineHeight }\n        : {}),\n    });\n    editorRef.current = editor;\n    setSlots({\n      left: editor.toolbarLeft,\n      right: editor.toolbarRight,\n      headerLeft: editor.headerLeft,\n      headerRight: editor.headerRight,\n    });\n\n    const offs = [\n      editor.on(\"change\", ({ project }) => cbRef.current.onChange?.(project)),\n      editor.on(\"export\", ({ project }) => cbRef.current.onExport?.(project)),\n      editor.on(\"time\", ({ timeMs }) => cbRef.current.onTimeUpdate?.(timeMs)),\n      editor.on(\"play\", () => cbRef.current.onPlay?.()),\n      editor.on(\"pause\", () => cbRef.current.onPause?.()),\n      editor.on(\"selectionChange\", ({ clipId }) =>\n        cbRef.current.onSelectionChange?.(clipId),\n      ),\n      editor.on(\"error\", ({ error }) => cbRef.current.onError?.(error)),\n    ];\n\n    cbRef.current.onReady?.(editor);\n\n    return () => {\n      for (const off of offs) off();\n      editor.destroy();\n      editorRef.current = null;\n      setSlots(null);\n    };\n    // Editor lifecycle is tied to mount; we deliberately don't list\n    // any reactive deps. `theme` changes are pushed through the\n    // separate effect below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.theme) editorRef.current?.setTheme(props.theme);\n  }, [props.theme]);\n\n  useEffect(() => {\n    if (props.locale) editorRef.current?.setLocale(props.locale);\n  }, [props.locale]);\n\n  // Reactive — the underlying CSS custom property can be updated on\n  // the container any time; the timeline picks up the new height\n  // immediately via CSS. No remount required.\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    if (props.timelineHeight != null && props.timelineHeight > 0) {\n      host.style.setProperty(\n        \"--aicut-timeline-height\",\n        `${Math.round(props.timelineHeight)}px`,\n      );\n    } else {\n      host.style.removeProperty(\"--aicut-timeline-height\");\n    }\n  }, [props.timelineHeight]);\n\n  // Deps must include `slots`. Without it, the factory ran once during\n  // the first commit — BEFORE the useEffect above had a chance to\n  // create the editor — so `apiRef.current` was permanently locked to\n  // null. `slots` flips from null to a real value the same instant\n  // the editor is created, so it's the cleanest re-run trigger.\n  useImperativeHandle<VideoEditorApi | null, VideoEditorApi | null>(\n    props.apiRef,\n    () => editorRef.current,\n    [slots],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={props.style}\n      data-aicut-host=\"\"\n    >\n      {slots && props.toolbarLeft != null\n        ? createPortal(props.toolbarLeft, slots.left)\n        : null}\n      {slots && props.toolbarRight != null\n        ? createPortal(props.toolbarRight, slots.right)\n        : null}\n      {slots && props.headerLeft != null\n        ? createPortal(props.headerLeft, slots.headerLeft)\n        : null}\n      {slots && props.headerRight != null\n        ? createPortal(props.headerRight, slots.headerRight)\n        : null}\n    </div>\n  );\n}\n","import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  Timeline as CoreTimeline,\n  type Clip,\n  type Locale,\n  type Ms,\n  type Project,\n  type TimelineOptions,\n} from \"@aicut/core\";\n\n/** Imperative handle exposed via `apiRef`. */\nexport interface TimelineApi {\n  setProject(p: Project): void;\n  getProject(): Project;\n  setTime(t: Ms): void;\n  getTime(): Ms;\n  setScale(pxPerSec: number): void;\n  getScale(): number;\n  setSelection(id: string | null): void;\n  getSelection(): string | null;\n  setSnap(snap: boolean): void;\n  fitToWindow(): void;\n  getDebugInfo(): ReturnType<CoreTimeline[\"getDebugInfo\"]>;\n}\n\nexport interface TimelineProps {\n  /** Initial project. Use `apiRef.current.setProject(...)` to swap. */\n  defaultProject: Project;\n  /** Initial scale (px/sec). Defaults to 80; auto-fits on first render. */\n  defaultScale?: number;\n  /** Initial playhead position. */\n  defaultTime?: Ms;\n  /** Initial selection. */\n  defaultSelectedClipId?: string | null;\n\n  /** Hide the left header column (compact / frame-picker mode). */\n  showHeader?: boolean;\n  /** Disable all editing interactions. */\n  readOnly?: boolean;\n  /** Snap to clip edges + playhead when dragging. Default true. */\n  snap?: boolean;\n  /** Apply fit-to-window on mount once duration is known. Default true. */\n  autoFit?: boolean;\n  /** UI string overrides (English default). */\n  locale?: Partial<Locale>;\n  /**\n   * Render a 36px top toolbar strip with empty left/right flex slots\n   * for host-supplied controls. Default false. Pair with `toolbarLeft`\n   * / `toolbarRight` to inject content.\n   */\n  toolbar?: boolean;\n  /** Rendered into the left slot of the timeline toolbar (toolbar must be true). */\n  toolbarLeft?: ReactNode;\n  /** Rendered into the right slot of the timeline toolbar. */\n  toolbarRight?: ReactNode;\n\n  className?: string;\n  style?: CSSProperties;\n\n  apiRef?: Ref<TimelineApi | null>;\n\n  onSeek?: (timeMs: Ms) => void;\n  onSelectClip?: (clipId: string | null) => void;\n  onScaleChange?: (pxPerSec: number) => void;\n  onMoveClip?: TimelineOptions[\"onMoveClip\"];\n  onResizeClip?: TimelineOptions[\"onResizeClip\"];\n  onChange?: (project: Project) => void;\n}\n\n/**\n * Standalone, framework-agnostic canvas Timeline wrapped for React.\n * Mount it without an `Editor` for use cases like a video frame-picker:\n *\n * ```tsx\n * <Timeline\n *   defaultProject={{ version: 1, sources: [video], tracks: [{ id, kind: \"video\", clips: [{...}] }] }}\n *   showHeader={false}\n *   readOnly\n *   onSeek={(ms) => setCurrentMs(ms)}\n * />\n * ```\n *\n * Uncontrolled for `project` and `pxPerSec` — the underlying Timeline\n * owns them and reports changes via callbacks. Call methods on\n * `apiRef.current` to drive it imperatively (mirroring ag-Grid /\n * VideoEditor patterns).\n */\nexport function Timeline(props: TimelineProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const tlRef = useRef<CoreTimeline | null>(null);\n  const [slots, setSlots] = useState<{\n    left: HTMLElement;\n    right: HTMLElement;\n  } | null>(null);\n\n  // Latest-callback ref so the create-once effect doesn't tear the\n  // timeline down on every render just because callback identities\n  // change.\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const tl = CoreTimeline.create({\n      container: host,\n      project: cbRef.current.defaultProject,\n      pxPerSec: cbRef.current.defaultScale,\n      time: cbRef.current.defaultTime,\n      selectedClipId: cbRef.current.defaultSelectedClipId ?? null,\n      showHeader: cbRef.current.showHeader,\n      readOnly: cbRef.current.readOnly,\n      snap: cbRef.current.snap,\n      autoFit: cbRef.current.autoFit,\n      locale: cbRef.current.locale,\n      toolbar: cbRef.current.toolbar,\n      onSeek: (t) => cbRef.current.onSeek?.(t),\n      onSelectClip: (id) => cbRef.current.onSelectClip?.(id),\n      onScaleChange: (s) => cbRef.current.onScaleChange?.(s),\n      onMoveClip: (id, opts) => cbRef.current.onMoveClip?.(id, opts),\n      onResizeClip: (id, e) => cbRef.current.onResizeClip?.(id, e),\n      onChange: (p) => cbRef.current.onChange?.(p),\n    });\n    tlRef.current = tl;\n    if (tl.toolbarLeft && tl.toolbarRight) {\n      setSlots({ left: tl.toolbarLeft, right: tl.toolbarRight });\n    }\n    return () => {\n      tl.destroy();\n      tlRef.current = null;\n      setSlots(null);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.locale) tlRef.current?.setLocale(props.locale);\n  }, [props.locale]);\n\n  useImperativeHandle<TimelineApi | null, TimelineApi | null>(\n    props.apiRef,\n    () => {\n      const tl = tlRef.current;\n      if (!tl) return null;\n      return {\n        setProject: (p) => tl.setProject(p),\n        getProject: () => tl.getProject(),\n        setTime: (t) => tl.setTime(t),\n        getTime: () => tl.getTime(),\n        setScale: (s) => tl.setScale(s),\n        getScale: () => tl.getScale(),\n        setSelection: (id) => tl.setSelection(id),\n        getSelection: () => tl.getSelection(),\n        setSnap: (s) => tl.setSnap(s),\n        fitToWindow: () => tl.fitToWindow(),\n        getDebugInfo: () => tl.getDebugInfo(),\n      };\n    },\n    // Same caveat as VideoEditor.tsx — factory must re-run once the\n    // timeline is created in useEffect, otherwise apiRef.current is\n    // null forever. `slots` flips from null to a real value the\n    // instant the timeline is ready, so it's the cleanest trigger.\n    [slots],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={{ width: \"100%\", height: 240, ...props.style }}\n      data-aicut-timeline-host=\"\"\n    >\n      {slots && props.toolbarLeft != null\n        ? createPortal(props.toolbarLeft, slots.left)\n        : null}\n      {slots && props.toolbarRight != null\n        ? createPortal(props.toolbarRight, slots.right)\n        : null}\n    </div>\n  );\n\n  // Type-only re-export used to keep React/Vue prop typings in lockstep\n  // with the core. Reference here so the symbol isn't tree-shaken.\n  void ({} as Clip);\n}\n","export { VideoEditor } from \"./VideoEditor.js\";\nexport type { VideoEditorProps, VideoEditorApi } from \"./VideoEditor.js\";\nexport { Timeline } from \"./Timeline.js\";\nexport type { TimelineProps, TimelineApi } from \"./Timeline.js\";\nexport type {\n  Project,\n  MediaSource,\n  Track,\n  Clip,\n  Ms,\n  Theme,\n  EditorApi,\n  Locale,\n  PlaybackEngine,\n  PlaybackEngineFactory,\n  PlaybackEngineOptions,\n  CanvasCompositorEngineOptions,\n} from \"@aicut/core\";\nexport {\n  createEmptyProject,\n  createId,\n  localeEn,\n  localeZh,\n  HtmlVideoEngine,\n  htmlVideoEngineFactory,\n  CanvasCompositorEngine,\n  canvasCompositorEngineFactory,\n  // Live bindings — re-reading them after `setTimelineMetrics` (which\n  // EditorOptions.trackHeight / .rulerHeight calls under the hood)\n  // returns the updated values.\n  TRACK_HEIGHT,\n  RULER_HEIGHT,\n  HEADER_WIDTH,\n  setTimelineMetrics,\n} from \"@aicut/core\";\n"],"mappings":"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","names":["useEffect","useImperativeHandle","useRef","useState","createPortal","jsxs"]}
+{"version":3,"sources":["../src/VideoEditor.tsx","../src/Timeline.tsx","../src/index.ts"],"sourcesContent":["import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  Editor,\n  type EditorApi,\n  type Locale,\n  type Ms,\n  type PlaybackEngineFactory,\n  type Project,\n  type Theme,\n} from \"@aicut/core\";\n\nexport type VideoEditorApi = EditorApi;\n\nexport interface VideoEditorProps {\n  /**\n   * Initial project. Read once on mount — to swap projects after mount,\n   * call `apiRef.current.setProject(...)` so React doesn't reinstantiate\n   * the editor and lose playback state.\n   */\n  defaultProject?: Project;\n  /** CSS variable overrides applied on mount and whenever this ref changes. */\n  theme?: Theme;\n  /**\n   * UI string overrides (English default). Mirror prop — switching the\n   * value calls `editor.setLocale` and the toolbar / canvas labels\n   * update in place. Use `localeZh` from `@aicut/core` for Chinese.\n   */\n  locale?: Partial<Locale>;\n\n  className?: string;\n  style?: CSSProperties;\n\n  /** Imperative handle for cut/seek/getProject/setProject/etc. */\n  apiRef?: Ref<VideoEditorApi | null>;\n\n  onReady?: (api: VideoEditorApi) => void;\n  onChange?: (project: Project) => void;\n  onExport?: (project: Project) => void;\n  onTimeUpdate?: (timeMs: Ms) => void;\n  onPlay?: () => void;\n  onPause?: () => void;\n  onSelectionChange?: (clipId: string | null) => void;\n  onError?: (error: Error) => void;\n\n  /**\n   * Rendered into the very left of the editor's top toolbar — host\n   * adds anything here (size dropdown, branding, status badge). The\n   * library reserves no space for it; if you pass nothing, no\n   * separator appears.\n   */\n  toolbarLeft?: ReactNode;\n  /** Same as `toolbarLeft` but at the very right of the toolbar. */\n  toolbarRight?: ReactNode;\n  /**\n   * Rendered into the LEFT side of an optional header bar above the\n   * preview (project name, file menu, breadcrumbs). The header\n   * collapses entirely when both header slots are empty, so the\n   * default layout is identical to before this slot existed.\n   */\n  headerLeft?: ReactNode;\n  /** Right side of the editor header — conventionally Share / Export / profile. */\n  headerRight?: ReactNode;\n\n  /**\n   * Initial-only — picks the playback engine used by the underlying\n   * core Editor. Defaults to the built-in `HtmlVideoEngine`. Pass a\n   * factory to plug in a custom engine (WebCodecs, WebGL compositor,\n   * IPC bridge to a native player, …). Swapping this prop after mount\n   * has no effect — the editor binds its engine at construction.\n   */\n  playbackEngine?: PlaybackEngineFactory;\n  /**\n   * Initial-only — pixel height of each track row (default 56). Lower\n   * values (~32–40) shrink the timeline for small viewports where the\n   * default crowds out the preview. Applied process-wide; to re-apply\n   * change this prop AND remount the component (e.g. via `key`).\n   */\n  trackHeight?: number;\n  /** Initial-only — pixel height of the timeline ruler (default 24). */\n  rulerHeight?: number;\n  /**\n   * Pixel height of the whole bottom timeline area (default 240).\n   * Reactive — set anytime to change. The canvas inside fills 100%\n   * and shows an internal scrollbar when track count overflows.\n   * Useful range: [120, 480] depending on viewport.\n   */\n  timelineHeight?: number;\n  /**\n   * Per-clip keyframe animation (X / Y / Scale). Reactive — set\n   * `{ enabled: true }` to surface keyframe diamonds on the timeline\n   * and route the canvas-based engines through the transform pipeline.\n   * Disabling hides the editing UI but preserves the data in\n   * `Project.tracks[].clips[].keyframes`.\n   *\n   * `HtmlVideoEngine` cannot animate frames; swap to\n   * `CanvasCompositorEngine` or `WebCodecsEngine` for live preview.\n   */\n  keyframes?: { enabled?: boolean };\n  /** Fires when the user selects or deselects a keyframe diamond. */\n  onKeyframeSelectionChange?: (\n    target: { clipId: string; keyframeId: string } | null,\n  ) => void;\n  /**\n   * Jump-to-clip-edge toolbar cluster (|◀ ▶|) + I/O keyboard shortcuts.\n   * Reactive — set `{ enabled: true }` to surface the buttons next to\n   * the keyframe diamond and bind the shortcuts. Off hides the buttons\n   * entirely (display: none, no toolbar space cost) and lets I/O\n   * fall through to the page.\n   */\n  clipEdgeNav?: { enabled?: boolean };\n}\n\n/**\n * Declarative React shell over `@aicut/core` `Editor`. Mounts the\n * editor instance once, mirrors prop changes (`theme`) into it, and\n * forwards events as React-style callbacks.\n *\n * Intentionally uncontrolled for project state — the editor owns the\n * current project. Use `onChange` to persist and `apiRef.setProject`\n * to restore.\n */\nexport function VideoEditor(props: VideoEditorProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const editorRef = useRef<Editor | null>(null);\n  // Toolbar slot DOM nodes don't exist until the editor mounts; we\n  // hold them in state so React re-runs the render after mount and\n  // the portals attach. Tracked separately for left + right because\n  // each is independently controlled by host props.\n  const [slots, setSlots] = useState<{\n    left: HTMLElement;\n    right: HTMLElement;\n    headerLeft: HTMLElement;\n    headerRight: HTMLElement;\n  } | null>(null);\n\n  // Latest-callback refs so the effect that creates the editor doesn't\n  // re-run on every parent render just because props.onChange is a new\n  // identity — the editor would otherwise be torn down constantly.\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const editor = Editor.create({\n      container: host,\n      project: cbRef.current.defaultProject,\n      theme: cbRef.current.theme,\n      locale: cbRef.current.locale,\n      playbackEngine: cbRef.current.playbackEngine,\n      ...(cbRef.current.trackHeight != null\n        ? { trackHeight: cbRef.current.trackHeight }\n        : {}),\n      ...(cbRef.current.rulerHeight != null\n        ? { rulerHeight: cbRef.current.rulerHeight }\n        : {}),\n      ...(cbRef.current.timelineHeight != null\n        ? { timelineHeight: cbRef.current.timelineHeight }\n        : {}),\n      ...(cbRef.current.keyframes != null\n        ? { keyframes: cbRef.current.keyframes }\n        : {}),\n      ...(cbRef.current.clipEdgeNav != null\n        ? { clipEdgeNav: cbRef.current.clipEdgeNav }\n        : {}),\n    });\n    editorRef.current = editor;\n    setSlots({\n      left: editor.toolbarLeft,\n      right: editor.toolbarRight,\n      headerLeft: editor.headerLeft,\n      headerRight: editor.headerRight,\n    });\n\n    const offs = [\n      editor.on(\"change\", ({ project }) => cbRef.current.onChange?.(project)),\n      editor.on(\"export\", ({ project }) => cbRef.current.onExport?.(project)),\n      editor.on(\"time\", ({ timeMs }) => cbRef.current.onTimeUpdate?.(timeMs)),\n      editor.on(\"play\", () => cbRef.current.onPlay?.()),\n      editor.on(\"pause\", () => cbRef.current.onPause?.()),\n      editor.on(\"selectionChange\", ({ clipId }) =>\n        cbRef.current.onSelectionChange?.(clipId),\n      ),\n      editor.on(\"keyframeSelectionChange\", ({ target }) =>\n        cbRef.current.onKeyframeSelectionChange?.(target),\n      ),\n      editor.on(\"error\", ({ error }) => cbRef.current.onError?.(error)),\n    ];\n\n    cbRef.current.onReady?.(editor);\n\n    return () => {\n      for (const off of offs) off();\n      editor.destroy();\n      editorRef.current = null;\n      setSlots(null);\n    };\n    // Editor lifecycle is tied to mount; we deliberately don't list\n    // any reactive deps. `theme` changes are pushed through the\n    // separate effect below.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.theme) editorRef.current?.setTheme(props.theme);\n  }, [props.theme]);\n\n  useEffect(() => {\n    if (props.locale) editorRef.current?.setLocale(props.locale);\n  }, [props.locale]);\n\n  // Reactive — flipping `keyframes.enabled` instantly toggles diamond\n  // visibility on the timeline and routes the canvas / WebCodecs\n  // engines through the transform pipeline (or not). Data is\n  // preserved either way.\n  useEffect(() => {\n    const editor = editorRef.current;\n    if (!editor) return;\n    const desired = props.keyframes?.enabled === true;\n    if (editor.isKeyframesEnabled() !== desired) {\n      editor.setKeyframesEnabled(desired);\n    }\n  }, [props.keyframes?.enabled]);\n\n  useEffect(() => {\n    const editor = editorRef.current;\n    if (!editor) return;\n    const desired = props.clipEdgeNav?.enabled === true;\n    if (editor.isClipEdgeNavEnabled() !== desired) {\n      editor.setClipEdgeNavEnabled(desired);\n    }\n  }, [props.clipEdgeNav?.enabled]);\n\n  // Reactive — the underlying CSS custom property can be updated on\n  // the container any time; the timeline picks up the new height\n  // immediately via CSS. No remount required.\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    if (props.timelineHeight != null && props.timelineHeight > 0) {\n      host.style.setProperty(\n        \"--aicut-timeline-height\",\n        `${Math.round(props.timelineHeight)}px`,\n      );\n    } else {\n      host.style.removeProperty(\"--aicut-timeline-height\");\n    }\n  }, [props.timelineHeight]);\n\n  // Deps must include `slots`. Without it, the factory ran once during\n  // the first commit — BEFORE the useEffect above had a chance to\n  // create the editor — so `apiRef.current` was permanently locked to\n  // null. `slots` flips from null to a real value the same instant\n  // the editor is created, so it's the cleanest re-run trigger.\n  useImperativeHandle<VideoEditorApi | null, VideoEditorApi | null>(\n    props.apiRef,\n    () => editorRef.current,\n    [slots],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={props.style}\n      data-aicut-host=\"\"\n    >\n      {slots && props.toolbarLeft != null\n        ? createPortal(props.toolbarLeft, slots.left)\n        : null}\n      {slots && props.toolbarRight != null\n        ? createPortal(props.toolbarRight, slots.right)\n        : null}\n      {slots && props.headerLeft != null\n        ? createPortal(props.headerLeft, slots.headerLeft)\n        : null}\n      {slots && props.headerRight != null\n        ? createPortal(props.headerRight, slots.headerRight)\n        : null}\n    </div>\n  );\n}\n","import {\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  Timeline as CoreTimeline,\n  type Clip,\n  type Locale,\n  type Ms,\n  type Project,\n  type TimelineOptions,\n} from \"@aicut/core\";\n\n/** Imperative handle exposed via `apiRef`. */\nexport interface TimelineApi {\n  setProject(p: Project): void;\n  getProject(): Project;\n  setTime(t: Ms): void;\n  getTime(): Ms;\n  setScale(pxPerSec: number): void;\n  getScale(): number;\n  setSelection(id: string | null): void;\n  getSelection(): string | null;\n  setSnap(snap: boolean): void;\n  fitToWindow(): void;\n  getDebugInfo(): ReturnType<CoreTimeline[\"getDebugInfo\"]>;\n}\n\nexport interface TimelineProps {\n  /** Initial project. Use `apiRef.current.setProject(...)` to swap. */\n  defaultProject: Project;\n  /** Initial scale (px/sec). Defaults to 80; auto-fits on first render. */\n  defaultScale?: number;\n  /** Initial playhead position. */\n  defaultTime?: Ms;\n  /** Initial selection. */\n  defaultSelectedClipId?: string | null;\n\n  /** Hide the left header column (compact / frame-picker mode). */\n  showHeader?: boolean;\n  /** Disable all editing interactions. */\n  readOnly?: boolean;\n  /** Snap to clip edges + playhead when dragging. Default true. */\n  snap?: boolean;\n  /** Apply fit-to-window on mount once duration is known. Default true. */\n  autoFit?: boolean;\n  /** UI string overrides (English default). */\n  locale?: Partial<Locale>;\n  /**\n   * Render a 36px top toolbar strip with empty left/right flex slots\n   * for host-supplied controls. Default false. Pair with `toolbarLeft`\n   * / `toolbarRight` to inject content.\n   */\n  toolbar?: boolean;\n  /** Rendered into the left slot of the timeline toolbar (toolbar must be true). */\n  toolbarLeft?: ReactNode;\n  /** Rendered into the right slot of the timeline toolbar. */\n  toolbarRight?: ReactNode;\n\n  className?: string;\n  style?: CSSProperties;\n\n  apiRef?: Ref<TimelineApi | null>;\n\n  onSeek?: (timeMs: Ms) => void;\n  onSelectClip?: (clipId: string | null) => void;\n  onScaleChange?: (pxPerSec: number) => void;\n  onMoveClip?: TimelineOptions[\"onMoveClip\"];\n  onResizeClip?: TimelineOptions[\"onResizeClip\"];\n  onChange?: (project: Project) => void;\n}\n\n/**\n * Standalone, framework-agnostic canvas Timeline wrapped for React.\n * Mount it without an `Editor` for use cases like a video frame-picker:\n *\n * ```tsx\n * <Timeline\n *   defaultProject={{ version: 1, sources: [video], tracks: [{ id, kind: \"video\", clips: [{...}] }] }}\n *   showHeader={false}\n *   readOnly\n *   onSeek={(ms) => setCurrentMs(ms)}\n * />\n * ```\n *\n * Uncontrolled for `project` and `pxPerSec` — the underlying Timeline\n * owns them and reports changes via callbacks. Call methods on\n * `apiRef.current` to drive it imperatively (mirroring ag-Grid /\n * VideoEditor patterns).\n */\nexport function Timeline(props: TimelineProps) {\n  const hostRef = useRef<HTMLDivElement | null>(null);\n  const tlRef = useRef<CoreTimeline | null>(null);\n  const [slots, setSlots] = useState<{\n    left: HTMLElement;\n    right: HTMLElement;\n  } | null>(null);\n\n  // Latest-callback ref so the create-once effect doesn't tear the\n  // timeline down on every render just because callback identities\n  // change.\n  const cbRef = useRef(props);\n  cbRef.current = props;\n\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const tl = CoreTimeline.create({\n      container: host,\n      project: cbRef.current.defaultProject,\n      pxPerSec: cbRef.current.defaultScale,\n      time: cbRef.current.defaultTime,\n      selectedClipId: cbRef.current.defaultSelectedClipId ?? null,\n      showHeader: cbRef.current.showHeader,\n      readOnly: cbRef.current.readOnly,\n      snap: cbRef.current.snap,\n      autoFit: cbRef.current.autoFit,\n      locale: cbRef.current.locale,\n      toolbar: cbRef.current.toolbar,\n      onSeek: (t) => cbRef.current.onSeek?.(t),\n      onSelectClip: (id) => cbRef.current.onSelectClip?.(id),\n      onScaleChange: (s) => cbRef.current.onScaleChange?.(s),\n      onMoveClip: (id, opts) => cbRef.current.onMoveClip?.(id, opts),\n      onResizeClip: (id, e) => cbRef.current.onResizeClip?.(id, e),\n      onChange: (p) => cbRef.current.onChange?.(p),\n    });\n    tlRef.current = tl;\n    if (tl.toolbarLeft && tl.toolbarRight) {\n      setSlots({ left: tl.toolbarLeft, right: tl.toolbarRight });\n    }\n    return () => {\n      tl.destroy();\n      tlRef.current = null;\n      setSlots(null);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    if (props.locale) tlRef.current?.setLocale(props.locale);\n  }, [props.locale]);\n\n  useImperativeHandle<TimelineApi | null, TimelineApi | null>(\n    props.apiRef,\n    () => {\n      const tl = tlRef.current;\n      if (!tl) return null;\n      return {\n        setProject: (p) => tl.setProject(p),\n        getProject: () => tl.getProject(),\n        setTime: (t) => tl.setTime(t),\n        getTime: () => tl.getTime(),\n        setScale: (s) => tl.setScale(s),\n        getScale: () => tl.getScale(),\n        setSelection: (id) => tl.setSelection(id),\n        getSelection: () => tl.getSelection(),\n        setSnap: (s) => tl.setSnap(s),\n        fitToWindow: () => tl.fitToWindow(),\n        getDebugInfo: () => tl.getDebugInfo(),\n      };\n    },\n    // Same caveat as VideoEditor.tsx — factory must re-run once the\n    // timeline is created in useEffect, otherwise apiRef.current is\n    // null forever. `slots` flips from null to a real value the\n    // instant the timeline is ready, so it's the cleanest trigger.\n    [slots],\n  );\n\n  return (\n    <div\n      ref={hostRef}\n      className={props.className}\n      style={{ width: \"100%\", height: 240, ...props.style }}\n      data-aicut-timeline-host=\"\"\n    >\n      {slots && props.toolbarLeft != null\n        ? createPortal(props.toolbarLeft, slots.left)\n        : null}\n      {slots && props.toolbarRight != null\n        ? createPortal(props.toolbarRight, slots.right)\n        : null}\n    </div>\n  );\n\n  // Type-only re-export used to keep React/Vue prop typings in lockstep\n  // with the core. Reference here so the symbol isn't tree-shaken.\n  void ({} as Clip);\n}\n","export { VideoEditor } from \"./VideoEditor.js\";\nexport type { VideoEditorProps, VideoEditorApi } from \"./VideoEditor.js\";\nexport { Timeline } from \"./Timeline.js\";\nexport type { TimelineProps, TimelineApi } from \"./Timeline.js\";\nexport type {\n  Project,\n  MediaSource,\n  Track,\n  Clip,\n  Keyframe,\n  Ms,\n  Theme,\n  EditorApi,\n  Locale,\n  PlaybackEngine,\n  PlaybackEngineFactory,\n  PlaybackEngineOptions,\n  CanvasCompositorEngineOptions,\n  EffectiveTransform,\n} from \"@aicut/core\";\nexport {\n  createEmptyProject,\n  createId,\n  localeEn,\n  localeZh,\n  HtmlVideoEngine,\n  htmlVideoEngineFactory,\n  CanvasCompositorEngine,\n  canvasCompositorEngineFactory,\n  // Live bindings — re-reading them after `setTimelineMetrics` (which\n  // EditorOptions.trackHeight / .rulerHeight calls under the hood)\n  // returns the updated values.\n  TRACK_HEIGHT,\n  RULER_HEIGHT,\n  HEADER_WIDTH,\n  setTimelineMetrics,\n  // Pure-math keyframe helpers — hosts can read effective transforms\n  // for previews / thumbnails without touching the playback engine.\n  IDENTITY_TRANSFORM,\n  isIdentityTransform,\n  getEffectiveTransform,\n  getTransformAtTimelineTime,\n} from \"@aicut/core\";\n"],"mappings":"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","names":["useEffect","useImperativeHandle","useRef","useState","createPortal","jsxs"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aicut/react",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "React wrapper for the AiCut video editor + lighting picker — thin declarative shells over @aicut/core.",
   "license": "MIT",
   "author": "ziqiang <ziqiangytu@gmail.com>",
@@ -64,7 +64,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@aicut/core": "0.5.0"
+    "@aicut/core": "0.6.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",