@aicut/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ziqiang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,143 @@
+# @aicut/react
+
+React 18 / 19 wrapper around **[@aicut/core](https://www.npmjs.com/package/@aicut/core)** — a canvas-rendered video editor component you can drop into any host app. Import the core stylesheet once and you're done.
+
+```bash
+pnpm add @aicut/react @aicut/core
+```
+
+## Quick start
+
+```tsx
+import { useRef } from "react";
+import {
+  VideoEditor,
+  type VideoEditorApi,
+  type Project,
+} from "@aicut/react";
+import "@aicut/core/styles.css";
+
+const project: Project = {
+  version: 1,
+  sources: [{ id: "s1", url: "/media/a.mp4", kind: "video", name: "a.mp4" }],
+  tracks: [
+    { id: "t1", kind: "video", clips: [
+      { id: "c1", sourceId: "s1", in: 0, out: 5000, start: 0 },
+    ]},
+  ],
+};
+
+export function Editor() {
+  const apiRef = useRef<VideoEditorApi | null>(null);
+  return (
+    <VideoEditor
+      apiRef={apiRef}
+      defaultProject={project}
+      onChange={(p) => console.log("autosave", p)}
+      onExport={(p) => fetch("/api/export", {
+        method: "POST",
+        body: JSON.stringify({ project: p }),
+      })}
+      style={{ height: 600 }}
+    />
+  );
+}
+```
+
+The component is **uncontrolled for project state** — the editor owns the current project. To restore from JSON later, `apiRef.current?.setProject(saved)`.
+
+## Props
+
+| Prop | Type | Notes |
+| --- | --- | --- |
+| `defaultProject` | `Project` | Initial project. Read once on mount. |
+| `theme` | `Theme` | CSS variable overrides. Reactive — mirrors to `editor.setTheme`. |
+| `locale` | `Partial<Locale>` | UI strings. English by default; pass `localeZh` for Chinese. Reactive. |
+| `toolbarLeft` | `ReactNode` | Portaled into the editor toolbar's left bookend slot. |
+| `toolbarRight` | `ReactNode` | Portaled into the right slot — host's Export button lives here. |
+| `apiRef` | `Ref<VideoEditorApi \| null>` | Imperative API handle. |
+| `onReady` | `(api) => void` | Fires synchronously on mount. |
+| `onChange` | `(project) => void` | Any model mutation. |
+| `onExport` | `(project) => void` | Fired by `api.requestExport()`. |
+| `onTimeUpdate` | `(ms) => void` | Playback tick. |
+| `onPlay` / `onPause` | `() => void` | |
+| `onSelectionChange` | `(clipId \| null) => void` | |
+| `onError` | `(err) => void` | |
+| `className` / `style` | `string` / `CSSProperties` | Forwarded to the host `<div>`. |
+
+The `apiRef` value implements **every method on `EditorApi`** — `play`, `pause`, `seek`, `split`, `trimLeft`, `trimRight`, `setProject`, `getProject`, `addSource`, `addTrack`, `removeClip`, `setSelection`, `undo`, `redo`, `setTheme`, `setLocale`, `requestExport`, etc. See [`@aicut/core`](https://www.npmjs.com/package/@aicut/core) for the full surface.
+
+## Custom toolbar controls
+
+Drop any React node into `toolbarLeft` / `toolbarRight`. The library renders nothing into the slots and hides the separator until they're populated.
+
+```tsx
+<VideoEditor
+  apiRef={apiRef}
+  defaultProject={project}
+  toolbarLeft={
+    <select value={aspect} onChange={(e) => setAspect(e.target.value)}>
+      <option value="16:9">16:9</option>
+      <option value="9:16">9:16</option>
+      <option value="1:1">1:1</option>
+    </select>
+  }
+  toolbarRight={
+    <button onClick={() => apiRef.current?.requestExport()}>Export</button>
+  }
+/>
+```
+
+`api.requestExport()` fires the `export` event with the current project JSON, which flows back through your `onExport` prop. From there, POST it to your own backend.
+
+## Theming
+
+```tsx
+<VideoEditor
+  theme={{
+    controlsBg: "#f6f6f8",
+    controlsText: "rgba(0, 0, 0, 0.78)",
+    controlsBorder: "rgba(0, 0, 0, 0.08)",
+    controlsHover: "rgba(0, 0, 0, 0.06)",
+    controlsActive: "rgba(0, 0, 0, 0.08)",
+    previewBg: "#e4e4e7",     // letterbox colour around the video
+  }}
+  /* … */
+/>
+```
+
+The `theme` prop is reactive — swap it any time and the editor calls `setTheme` internally.
+
+## i18n
+
+English is default. Pass the bundled `localeZh` for Chinese, or a partial object to override specific keys.
+
+```tsx
+import { VideoEditor, localeZh } from "@aicut/react";
+
+<VideoEditor locale={localeZh} /* … */ />
+<VideoEditor locale={{ undo: "Annuler" }} /* … */ />
+```
+
+## Standalone `<Timeline>`
+
+Use the canvas timeline without the rest of the editor.
+
+```tsx
+import { Timeline, type TimelineApi } from "@aicut/react";
+
+<Timeline
+  apiRef={timelineRef}
+  defaultProject={singleClipProject}
+  showHeader={false}
+  readOnly
+  toolbar                                            // 36px top strip
+  toolbarLeft={<span>Picked at {ms / 1000}s</span>}
+  toolbarRight={<button onClick={pick}>Use frame</button>}
+  onSeek={(ms) => setPicked(ms)}
+/>
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,198 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Timeline: () => Timeline,
+  VideoEditor: () => VideoEditor,
+  createEmptyProject: () => import_core3.createEmptyProject,
+  createId: () => import_core3.createId,
+  localeEn: () => import_core3.localeEn,
+  localeZh: () => import_core3.localeZh
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/VideoEditor.tsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_core = require("@aicut/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function VideoEditor(props) {
+  const hostRef = (0, import_react.useRef)(null);
+  const editorRef = (0, import_react.useRef)(null);
+  const [slots, setSlots] = (0, import_react.useState)(null);
+  const cbRef = (0, import_react.useRef)(props);
+  cbRef.current = props;
+  (0, import_react.useEffect)(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const editor = import_core.Editor.create({
+      container: host,
+      project: cbRef.current.defaultProject,
+      theme: cbRef.current.theme,
+      locale: cbRef.current.locale
+    });
+    editorRef.current = editor;
+    setSlots({ left: editor.toolbarLeft, right: editor.toolbarRight });
+    const offs = [
+      editor.on("change", ({ project }) => cbRef.current.onChange?.(project)),
+      editor.on("export", ({ project }) => cbRef.current.onExport?.(project)),
+      editor.on("time", ({ timeMs }) => cbRef.current.onTimeUpdate?.(timeMs)),
+      editor.on("play", () => cbRef.current.onPlay?.()),
+      editor.on("pause", () => cbRef.current.onPause?.()),
+      editor.on(
+        "selectionChange",
+        ({ clipId }) => cbRef.current.onSelectionChange?.(clipId)
+      ),
+      editor.on("error", ({ error }) => cbRef.current.onError?.(error))
+    ];
+    cbRef.current.onReady?.(editor);
+    return () => {
+      for (const off of offs) off();
+      editor.destroy();
+      editorRef.current = null;
+      setSlots(null);
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (props.theme) editorRef.current?.setTheme(props.theme);
+  }, [props.theme]);
+  (0, import_react.useEffect)(() => {
+    if (props.locale) editorRef.current?.setLocale(props.locale);
+  }, [props.locale]);
+  (0, import_react.useImperativeHandle)(
+    props.apiRef,
+    () => editorRef.current,
+    [slots]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref: hostRef,
+      className: props.className,
+      style: props.style,
+      "data-aicut-host": "",
+      children: [
+        slots && props.toolbarLeft != null ? (0, import_react_dom.createPortal)(props.toolbarLeft, slots.left) : null,
+        slots && props.toolbarRight != null ? (0, import_react_dom.createPortal)(props.toolbarRight, slots.right) : null
+      ]
+    }
+  );
+}
+
+// src/Timeline.tsx
+var import_react2 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_core2 = require("@aicut/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Timeline(props) {
+  const hostRef = (0, import_react2.useRef)(null);
+  const tlRef = (0, import_react2.useRef)(null);
+  const [slots, setSlots] = (0, import_react2.useState)(null);
+  const cbRef = (0, import_react2.useRef)(props);
+  cbRef.current = props;
+  (0, import_react2.useEffect)(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const tl = import_core2.Timeline.create({
+      container: host,
+      project: cbRef.current.defaultProject,
+      pxPerSec: cbRef.current.defaultScale,
+      time: cbRef.current.defaultTime,
+      selectedClipId: cbRef.current.defaultSelectedClipId ?? null,
+      showHeader: cbRef.current.showHeader,
+      readOnly: cbRef.current.readOnly,
+      snap: cbRef.current.snap,
+      autoFit: cbRef.current.autoFit,
+      locale: cbRef.current.locale,
+      toolbar: cbRef.current.toolbar,
+      onSeek: (t) => cbRef.current.onSeek?.(t),
+      onSelectClip: (id) => cbRef.current.onSelectClip?.(id),
+      onScaleChange: (s) => cbRef.current.onScaleChange?.(s),
+      onMoveClip: (id, opts) => cbRef.current.onMoveClip?.(id, opts),
+      onResizeClip: (id, e) => cbRef.current.onResizeClip?.(id, e),
+      onChange: (p) => cbRef.current.onChange?.(p)
+    });
+    tlRef.current = tl;
+    if (tl.toolbarLeft && tl.toolbarRight) {
+      setSlots({ left: tl.toolbarLeft, right: tl.toolbarRight });
+    }
+    return () => {
+      tl.destroy();
+      tlRef.current = null;
+      setSlots(null);
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (props.locale) tlRef.current?.setLocale(props.locale);
+  }, [props.locale]);
+  (0, import_react2.useImperativeHandle)(
+    props.apiRef,
+    () => {
+      const tl = tlRef.current;
+      if (!tl) return null;
+      return {
+        setProject: (p) => tl.setProject(p),
+        getProject: () => tl.getProject(),
+        setTime: (t) => tl.setTime(t),
+        getTime: () => tl.getTime(),
+        setScale: (s) => tl.setScale(s),
+        getScale: () => tl.getScale(),
+        setSelection: (id) => tl.setSelection(id),
+        getSelection: () => tl.getSelection(),
+        setSnap: (s) => tl.setSnap(s),
+        fitToWindow: () => tl.fitToWindow(),
+        getDebugInfo: () => tl.getDebugInfo()
+      };
+    },
+    // Same caveat as VideoEditor.tsx — factory must re-run once the
+    // timeline is created in useEffect, otherwise apiRef.current is
+    // null forever. `slots` flips from null to a real value the
+    // instant the timeline is ready, so it's the cleanest trigger.
+    [slots]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref: hostRef,
+      className: props.className,
+      style: { width: "100%", height: 240, ...props.style },
+      "data-aicut-timeline-host": "",
+      children: [
+        slots && props.toolbarLeft != null ? (0, import_react_dom2.createPortal)(props.toolbarLeft, slots.left) : null,
+        slots && props.toolbarRight != null ? (0, import_react_dom2.createPortal)(props.toolbarRight, slots.right) : null
+      ]
+    }
+  );
+  void {};
+}
+
+// src/index.ts
+var import_core3 = require("@aicut/core");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Timeline,
+  VideoEditor,
+  createEmptyProject,
+  createId,
+  localeEn,
+  localeZh
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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} from \"@aicut/core\";\nexport { createEmptyProject, createId, localeEn, localeZh } 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 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\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  } | 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    });\n    editorRef.current = editor;\n    setSlots({ left: editor.toolbarLeft, right: editor.toolbarRight });\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  // 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    </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

@@ -0,0 +1,128 @@
+import * as react from 'react';
+import { CSSProperties, Ref, ReactNode } from 'react';
+import { Project, Theme, Locale, EditorApi, Ms, Timeline as Timeline$1, TimelineOptions } from '@aicut/core';
+export { Clip, EditorApi, Locale, MediaSource, Ms, Project, Theme, Track, createEmptyProject, createId, localeEn, localeZh } from '@aicut/core';
+
+type VideoEditorApi = EditorApi;
+interface VideoEditorProps {
+    /**
+     * Initial project. Read once on mount — to swap projects after mount,
+     * call `apiRef.current.setProject(...)` so React doesn't reinstantiate
+     * the editor and lose playback state.
+     */
+    defaultProject?: Project;
+    /** CSS variable overrides applied on mount and whenever this ref changes. */
+    theme?: Theme;
+    /**
+     * UI string overrides (English default). Mirror prop — switching the
+     * value calls `editor.setLocale` and the toolbar / canvas labels
+     * update in place. Use `localeZh` from `@aicut/core` for Chinese.
+     */
+    locale?: Partial<Locale>;
+    className?: string;
+    style?: CSSProperties;
+    /** Imperative handle for cut/seek/getProject/setProject/etc. */
+    apiRef?: Ref<VideoEditorApi | null>;
+    onReady?: (api: VideoEditorApi) => void;
+    onChange?: (project: Project) => void;
+    onExport?: (project: Project) => void;
+    onTimeUpdate?: (timeMs: Ms) => void;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onSelectionChange?: (clipId: string | null) => void;
+    onError?: (error: Error) => void;
+    /**
+     * Rendered into the very left of the editor's top toolbar — host
+     * adds anything here (size dropdown, branding, status badge). The
+     * library reserves no space for it; if you pass nothing, no
+     * separator appears.
+     */
+    toolbarLeft?: ReactNode;
+    /** Same as `toolbarLeft` but at the very right of the toolbar. */
+    toolbarRight?: ReactNode;
+}
+/**
+ * Declarative React shell over `@aicut/core` `Editor`. Mounts the
+ * editor instance once, mirrors prop changes (`theme`) into it, and
+ * forwards events as React-style callbacks.
+ *
+ * Intentionally uncontrolled for project state — the editor owns the
+ * current project. Use `onChange` to persist and `apiRef.setProject`
+ * to restore.
+ */
+declare function VideoEditor(props: VideoEditorProps): react.JSX.Element;
+
+/** Imperative handle exposed via `apiRef`. */
+interface TimelineApi {
+    setProject(p: Project): void;
+    getProject(): Project;
+    setTime(t: Ms): void;
+    getTime(): Ms;
+    setScale(pxPerSec: number): void;
+    getScale(): number;
+    setSelection(id: string | null): void;
+    getSelection(): string | null;
+    setSnap(snap: boolean): void;
+    fitToWindow(): void;
+    getDebugInfo(): ReturnType<Timeline$1["getDebugInfo"]>;
+}
+interface TimelineProps {
+    /** Initial project. Use `apiRef.current.setProject(...)` to swap. */
+    defaultProject: Project;
+    /** Initial scale (px/sec). Defaults to 80; auto-fits on first render. */
+    defaultScale?: number;
+    /** Initial playhead position. */
+    defaultTime?: Ms;
+    /** Initial selection. */
+    defaultSelectedClipId?: string | null;
+    /** Hide the left header column (compact / frame-picker mode). */
+    showHeader?: boolean;
+    /** Disable all editing interactions. */
+    readOnly?: boolean;
+    /** Snap to clip edges + playhead when dragging. Default true. */
+    snap?: boolean;
+    /** Apply fit-to-window on mount once duration is known. Default true. */
+    autoFit?: boolean;
+    /** UI string overrides (English default). */
+    locale?: Partial<Locale>;
+    /**
+     * Render a 36px top toolbar strip with empty left/right flex slots
+     * for host-supplied controls. Default false. Pair with `toolbarLeft`
+     * / `toolbarRight` to inject content.
+     */
+    toolbar?: boolean;
+    /** Rendered into the left slot of the timeline toolbar (toolbar must be true). */
+    toolbarLeft?: ReactNode;
+    /** Rendered into the right slot of the timeline toolbar. */
+    toolbarRight?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    apiRef?: Ref<TimelineApi | null>;
+    onSeek?: (timeMs: Ms) => void;
+    onSelectClip?: (clipId: string | null) => void;
+    onScaleChange?: (pxPerSec: number) => void;
+    onMoveClip?: TimelineOptions["onMoveClip"];
+    onResizeClip?: TimelineOptions["onResizeClip"];
+    onChange?: (project: Project) => void;
+}
+/**
+ * Standalone, framework-agnostic canvas Timeline wrapped for React.
+ * Mount it without an `Editor` for use cases like a video frame-picker:
+ *
+ * ```tsx
+ * <Timeline
+ *   defaultProject={{ version: 1, sources: [video], tracks: [{ id, kind: "video", clips: [{...}] }] }}
+ *   showHeader={false}
+ *   readOnly
+ *   onSeek={(ms) => setCurrentMs(ms)}
+ * />
+ * ```
+ *
+ * Uncontrolled for `project` and `pxPerSec` — the underlying Timeline
+ * owns them and reports changes via callbacks. Call methods on
+ * `apiRef.current` to drive it imperatively (mirroring ag-Grid /
+ * VideoEditor patterns).
+ */
+declare function Timeline(props: TimelineProps): react.JSX.Element;
+
+export { Timeline, type TimelineApi, type TimelineProps, VideoEditor, type VideoEditorApi, type VideoEditorProps };

package/dist/index.d.ts

@@ -0,0 +1,128 @@
+import * as react from 'react';
+import { CSSProperties, Ref, ReactNode } from 'react';
+import { Project, Theme, Locale, EditorApi, Ms, Timeline as Timeline$1, TimelineOptions } from '@aicut/core';
+export { Clip, EditorApi, Locale, MediaSource, Ms, Project, Theme, Track, createEmptyProject, createId, localeEn, localeZh } from '@aicut/core';
+
+type VideoEditorApi = EditorApi;
+interface VideoEditorProps {
+    /**
+     * Initial project. Read once on mount — to swap projects after mount,
+     * call `apiRef.current.setProject(...)` so React doesn't reinstantiate
+     * the editor and lose playback state.
+     */
+    defaultProject?: Project;
+    /** CSS variable overrides applied on mount and whenever this ref changes. */
+    theme?: Theme;
+    /**
+     * UI string overrides (English default). Mirror prop — switching the
+     * value calls `editor.setLocale` and the toolbar / canvas labels
+     * update in place. Use `localeZh` from `@aicut/core` for Chinese.
+     */
+    locale?: Partial<Locale>;
+    className?: string;
+    style?: CSSProperties;
+    /** Imperative handle for cut/seek/getProject/setProject/etc. */
+    apiRef?: Ref<VideoEditorApi | null>;
+    onReady?: (api: VideoEditorApi) => void;
+    onChange?: (project: Project) => void;
+    onExport?: (project: Project) => void;
+    onTimeUpdate?: (timeMs: Ms) => void;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onSelectionChange?: (clipId: string | null) => void;
+    onError?: (error: Error) => void;
+    /**
+     * Rendered into the very left of the editor's top toolbar — host
+     * adds anything here (size dropdown, branding, status badge). The
+     * library reserves no space for it; if you pass nothing, no
+     * separator appears.
+     */
+    toolbarLeft?: ReactNode;
+    /** Same as `toolbarLeft` but at the very right of the toolbar. */
+    toolbarRight?: ReactNode;
+}
+/**
+ * Declarative React shell over `@aicut/core` `Editor`. Mounts the
+ * editor instance once, mirrors prop changes (`theme`) into it, and
+ * forwards events as React-style callbacks.
+ *
+ * Intentionally uncontrolled for project state — the editor owns the
+ * current project. Use `onChange` to persist and `apiRef.setProject`
+ * to restore.
+ */
+declare function VideoEditor(props: VideoEditorProps): react.JSX.Element;
+
+/** Imperative handle exposed via `apiRef`. */
+interface TimelineApi {
+    setProject(p: Project): void;
+    getProject(): Project;
+    setTime(t: Ms): void;
+    getTime(): Ms;
+    setScale(pxPerSec: number): void;
+    getScale(): number;
+    setSelection(id: string | null): void;
+    getSelection(): string | null;
+    setSnap(snap: boolean): void;
+    fitToWindow(): void;
+    getDebugInfo(): ReturnType<Timeline$1["getDebugInfo"]>;
+}
+interface TimelineProps {
+    /** Initial project. Use `apiRef.current.setProject(...)` to swap. */
+    defaultProject: Project;
+    /** Initial scale (px/sec). Defaults to 80; auto-fits on first render. */
+    defaultScale?: number;
+    /** Initial playhead position. */
+    defaultTime?: Ms;
+    /** Initial selection. */
+    defaultSelectedClipId?: string | null;
+    /** Hide the left header column (compact / frame-picker mode). */
+    showHeader?: boolean;
+    /** Disable all editing interactions. */
+    readOnly?: boolean;
+    /** Snap to clip edges + playhead when dragging. Default true. */
+    snap?: boolean;
+    /** Apply fit-to-window on mount once duration is known. Default true. */
+    autoFit?: boolean;
+    /** UI string overrides (English default). */
+    locale?: Partial<Locale>;
+    /**
+     * Render a 36px top toolbar strip with empty left/right flex slots
+     * for host-supplied controls. Default false. Pair with `toolbarLeft`
+     * / `toolbarRight` to inject content.
+     */
+    toolbar?: boolean;
+    /** Rendered into the left slot of the timeline toolbar (toolbar must be true). */
+    toolbarLeft?: ReactNode;
+    /** Rendered into the right slot of the timeline toolbar. */
+    toolbarRight?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    apiRef?: Ref<TimelineApi | null>;
+    onSeek?: (timeMs: Ms) => void;
+    onSelectClip?: (clipId: string | null) => void;
+    onScaleChange?: (pxPerSec: number) => void;
+    onMoveClip?: TimelineOptions["onMoveClip"];
+    onResizeClip?: TimelineOptions["onResizeClip"];
+    onChange?: (project: Project) => void;
+}
+/**
+ * Standalone, framework-agnostic canvas Timeline wrapped for React.
+ * Mount it without an `Editor` for use cases like a video frame-picker:
+ *
+ * ```tsx
+ * <Timeline
+ *   defaultProject={{ version: 1, sources: [video], tracks: [{ id, kind: "video", clips: [{...}] }] }}
+ *   showHeader={false}
+ *   readOnly
+ *   onSeek={(ms) => setCurrentMs(ms)}
+ * />
+ * ```
+ *
+ * Uncontrolled for `project` and `pxPerSec` — the underlying Timeline
+ * owns them and reports changes via callbacks. Call methods on
+ * `apiRef.current` to drive it imperatively (mirroring ag-Grid /
+ * VideoEditor patterns).
+ */
+declare function Timeline(props: TimelineProps): react.JSX.Element;
+
+export { Timeline, type TimelineApi, type TimelineProps, VideoEditor, type VideoEditorApi, type VideoEditorProps };

package/dist/index.js

@@ -0,0 +1,180 @@
+// src/VideoEditor.tsx
+import {
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import {
+  Editor
+} from "@aicut/core";
+import { jsxs } from "react/jsx-runtime";
+function VideoEditor(props) {
+  const hostRef = useRef(null);
+  const editorRef = useRef(null);
+  const [slots, setSlots] = useState(null);
+  const cbRef = useRef(props);
+  cbRef.current = props;
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const editor = Editor.create({
+      container: host,
+      project: cbRef.current.defaultProject,
+      theme: cbRef.current.theme,
+      locale: cbRef.current.locale
+    });
+    editorRef.current = editor;
+    setSlots({ left: editor.toolbarLeft, right: editor.toolbarRight });
+    const offs = [
+      editor.on("change", ({ project }) => cbRef.current.onChange?.(project)),
+      editor.on("export", ({ project }) => cbRef.current.onExport?.(project)),
+      editor.on("time", ({ timeMs }) => cbRef.current.onTimeUpdate?.(timeMs)),
+      editor.on("play", () => cbRef.current.onPlay?.()),
+      editor.on("pause", () => cbRef.current.onPause?.()),
+      editor.on(
+        "selectionChange",
+        ({ clipId }) => cbRef.current.onSelectionChange?.(clipId)
+      ),
+      editor.on("error", ({ error }) => cbRef.current.onError?.(error))
+    ];
+    cbRef.current.onReady?.(editor);
+    return () => {
+      for (const off of offs) off();
+      editor.destroy();
+      editorRef.current = null;
+      setSlots(null);
+    };
+  }, []);
+  useEffect(() => {
+    if (props.theme) editorRef.current?.setTheme(props.theme);
+  }, [props.theme]);
+  useEffect(() => {
+    if (props.locale) editorRef.current?.setLocale(props.locale);
+  }, [props.locale]);
+  useImperativeHandle(
+    props.apiRef,
+    () => editorRef.current,
+    [slots]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: hostRef,
+      className: props.className,
+      style: props.style,
+      "data-aicut-host": "",
+      children: [
+        slots && props.toolbarLeft != null ? createPortal(props.toolbarLeft, slots.left) : null,
+        slots && props.toolbarRight != null ? createPortal(props.toolbarRight, slots.right) : null
+      ]
+    }
+  );
+}
+
+// src/Timeline.tsx
+import {
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import {
+  Timeline as CoreTimeline
+} from "@aicut/core";
+import { jsxs as jsxs2 } from "react/jsx-runtime";
+function Timeline(props) {
+  const hostRef = useRef2(null);
+  const tlRef = useRef2(null);
+  const [slots, setSlots] = useState2(null);
+  const cbRef = useRef2(props);
+  cbRef.current = props;
+  useEffect2(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const tl = CoreTimeline.create({
+      container: host,
+      project: cbRef.current.defaultProject,
+      pxPerSec: cbRef.current.defaultScale,
+      time: cbRef.current.defaultTime,
+      selectedClipId: cbRef.current.defaultSelectedClipId ?? null,
+      showHeader: cbRef.current.showHeader,
+      readOnly: cbRef.current.readOnly,
+      snap: cbRef.current.snap,
+      autoFit: cbRef.current.autoFit,
+      locale: cbRef.current.locale,
+      toolbar: cbRef.current.toolbar,
+      onSeek: (t) => cbRef.current.onSeek?.(t),
+      onSelectClip: (id) => cbRef.current.onSelectClip?.(id),
+      onScaleChange: (s) => cbRef.current.onScaleChange?.(s),
+      onMoveClip: (id, opts) => cbRef.current.onMoveClip?.(id, opts),
+      onResizeClip: (id, e) => cbRef.current.onResizeClip?.(id, e),
+      onChange: (p) => cbRef.current.onChange?.(p)
+    });
+    tlRef.current = tl;
+    if (tl.toolbarLeft && tl.toolbarRight) {
+      setSlots({ left: tl.toolbarLeft, right: tl.toolbarRight });
+    }
+    return () => {
+      tl.destroy();
+      tlRef.current = null;
+      setSlots(null);
+    };
+  }, []);
+  useEffect2(() => {
+    if (props.locale) tlRef.current?.setLocale(props.locale);
+  }, [props.locale]);
+  useImperativeHandle2(
+    props.apiRef,
+    () => {
+      const tl = tlRef.current;
+      if (!tl) return null;
+      return {
+        setProject: (p) => tl.setProject(p),
+        getProject: () => tl.getProject(),
+        setTime: (t) => tl.setTime(t),
+        getTime: () => tl.getTime(),
+        setScale: (s) => tl.setScale(s),
+        getScale: () => tl.getScale(),
+        setSelection: (id) => tl.setSelection(id),
+        getSelection: () => tl.getSelection(),
+        setSnap: (s) => tl.setSnap(s),
+        fitToWindow: () => tl.fitToWindow(),
+        getDebugInfo: () => tl.getDebugInfo()
+      };
+    },
+    // Same caveat as VideoEditor.tsx — factory must re-run once the
+    // timeline is created in useEffect, otherwise apiRef.current is
+    // null forever. `slots` flips from null to a real value the
+    // instant the timeline is ready, so it's the cleanest trigger.
+    [slots]
+  );
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: hostRef,
+      className: props.className,
+      style: { width: "100%", height: 240, ...props.style },
+      "data-aicut-timeline-host": "",
+      children: [
+        slots && props.toolbarLeft != null ? createPortal2(props.toolbarLeft, slots.left) : null,
+        slots && props.toolbarRight != null ? createPortal2(props.toolbarRight, slots.right) : null
+      ]
+    }
+  );
+  void {};
+}
+
+// src/index.ts
+import { createEmptyProject, createId, localeEn, localeZh } from "@aicut/core";
+export {
+  Timeline,
+  VideoEditor,
+  createEmptyProject,
+  createId,
+  localeEn,
+  localeZh
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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 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\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  } | 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    });\n    editorRef.current = editor;\n    setSlots({ left: editor.toolbarLeft, right: editor.toolbarRight });\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  // 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    </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} from \"@aicut/core\";\nexport { createEmptyProject, createId, localeEn, localeZh } from \"@aicut/core\";\n"],"mappings":"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","names":["useEffect","useImperativeHandle","useRef","useState","createPortal","jsxs"]}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@aicut/react",
+  "version": "0.1.0",
+  "description": "React wrapper for the AiCut video editor — thin declarative shell over @aicut/core.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@aicut/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}