@bylqwjc/media-editor-react 1.0.12

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 media-editor-sdk contributors
+
+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,51 @@
+# @bylqwjc/media-editor-react
+
+React 适配包，提供 `MediaEditor`、`ImageEditor`、`VideoEditor` 和 `useVideoEditor`。
+
+## 安装
+
+```bash
+pnpm add @bylqwjc/media-editor-react
+```
+
+React 和 ReactDOM 是 peer dependency，需要由业务应用提供。
+
+`locale` 支持 `zh`、`en`、`es` 和 `zh-Hant`。
+
+## 示例
+
+```tsx
+import { ImageEditor, VideoEditor } from '@bylqwjc/media-editor-react';
+import '@bylqwjc/media-editor-react/theme.css';
+import '@bylqwjc/media-editor-react/filerobot.css';
+import '@bylqwjc/media-editor-react/style.css';
+
+export function Editor({ type, source }: { type: 'image' | 'video'; source?: string | File }) {
+  if (type === 'image') {
+    return <ImageEditor source={source} locale="zh" theme="auto" onSave={saveImageToYourApp} />;
+  }
+  return (
+    <VideoEditor
+      source={source instanceof File ? source : undefined}
+      baseUrl="/api/editor"
+      locale="zh"
+      theme="auto"
+      onExported={saveVideoToYourApp}
+    />
+  );
+}
+```
+
+## 统一入口
+
+```tsx
+import { MediaEditor } from '@bylqwjc/media-editor-react';
+
+<MediaEditor
+  baseUrl="/api/editor"
+  locale="zh"
+  theme="auto"
+  onImageSave={saveImageToYourApp}
+  onExported={(blob) => saveVideoToYourApp(blob, 'video.mp4')}
+/>;
+```

package/dist/index.cjs

@@ -0,0 +1,282 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ImageEditor: () => ImageEditor,
+  MediaEditor: () => MediaEditor,
+  VideoEditor: () => VideoEditor,
+  VideoEditorEngine: () => import_engine2.VideoEditorEngine,
+  buildVideoExportFormData: () => import_browser2.buildVideoExportFormData,
+  useVideoEditor: () => useVideoEditor
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/useVideoEditor.ts
+var import_react = require("react");
+var import_engine = require("@media-editor/core/engine");
+function useVideoEditor(provided) {
+  const ref = (0, import_react.useRef)(null);
+  if (!ref.current) ref.current = provided ?? new import_engine.VideoEditorEngine();
+  const engine = ref.current;
+  const state = (0, import_react.useSyncExternalStore)(engine.subscribe, engine.getSnapshot, engine.getSnapshot);
+  return (0, import_react.useMemo)(
+    () => ({
+      engine,
+      state,
+      canUndo: engine.canUndo(),
+      canRedo: engine.canRedo(),
+      totalDuration: engine.totalDuration(),
+      contentDuration: engine.contentDuration()
+    }),
+    [engine, state]
+  );
+}
+
+// src/ImageEditor.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var imageRuntimePromise = null;
+function loadImageRuntime() {
+  imageRuntimePromise ?? (imageRuntimePromise = import("@media-editor/image"));
+  return imageRuntimePromise;
+}
+function ImageEditor({ className, style, ...opts }) {
+  const elRef = (0, import_react2.useRef)(null);
+  const handleRef = (0, import_react2.useRef)(null);
+  const optsRef = (0, import_react2.useRef)(opts);
+  optsRef.current = opts;
+  (0, import_react2.useEffect)(() => {
+    if (!elRef.current) return;
+    let disposed = false;
+    void loadImageRuntime().then(({ mountImageEditor }) => {
+      if (!elRef.current || disposed) return;
+      const handle = mountImageEditor(elRef.current, optsRef.current);
+      if (disposed) {
+        handle.destroy();
+        return;
+      }
+      handleRef.current = handle;
+    });
+    return () => {
+      disposed = true;
+      handleRef.current?.destroy();
+      handleRef.current = null;
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    handleRef.current?.update(optsRef.current);
+  }, [opts.source, opts.locale, opts.theme]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: elRef, className, style: { width: "100%", height: "100%", ...style } });
+}
+
+// src/VideoEditor.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var videoRuntimePromise = null;
+function loadVideoRuntime() {
+  videoRuntimePromise ?? (videoRuntimePromise = import("@media-editor/video"));
+  return videoRuntimePromise;
+}
+function VideoEditor({ className, style, ...opts }) {
+  const elRef = (0, import_react3.useRef)(null);
+  const handleRef = (0, import_react3.useRef)(null);
+  const optsRef = (0, import_react3.useRef)(opts);
+  optsRef.current = opts;
+  (0, import_react3.useEffect)(() => {
+    if (!elRef.current) return;
+    let disposed = false;
+    void loadVideoRuntime().then(({ mountVideoEditor }) => {
+      if (!elRef.current || disposed) return;
+      const handle = mountVideoEditor(elRef.current, optsRef.current);
+      if (disposed) {
+        handle.destroy();
+        return;
+      }
+      handleRef.current = handle;
+    });
+    return () => {
+      disposed = true;
+      handleRef.current?.destroy();
+      handleRef.current = null;
+    };
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    handleRef.current?.update(optsRef.current);
+  }, [opts.source, opts.locale, opts.theme, opts.baseUrl]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: elRef, className, style: { width: "100%", height: "100%", ...style } });
+}
+
+// src/MediaEditor.tsx
+var import_react4 = require("react");
+var import_browser = require("@media-editor/core/browser");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function MediaEditor({
+  baseUrl,
+  client,
+  locale = "zh",
+  theme = "auto",
+  className,
+  style,
+  onExported,
+  onImageSave
+}) {
+  const [mode, setMode] = (0, import_react4.useState)("home");
+  const [videoSource, setVideoSource] = (0, import_react4.useState)(null);
+  const [imageSource, setImageSource] = (0, import_react4.useState)(null);
+  const videoFileRef = (0, import_react4.useRef)(null);
+  const imageFileRef = (0, import_react4.useRef)(null);
+  const shellRef = (0, import_react4.useRef)(null);
+  const actionsRef = (0, import_react4.useRef)(null);
+  const fullscreenRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    fullscreenRef.current?.dispose();
+    fullscreenRef.current = null;
+    if (mode === "home" || !shellRef.current || !actionsRef.current) return;
+    const fs = (0, import_browser.createFullscreenToggle)(shellRef.current, { mode: "inline" });
+    actionsRef.current.appendChild(fs.button);
+    fullscreenRef.current = fs;
+    return () => {
+      fs.dispose();
+      fullscreenRef.current = null;
+    };
+  }, [mode]);
+  (0, import_react4.useLayoutEffect)(() => {
+    const shell = shellRef.current;
+    if (mode === "home" || !shell) return;
+    const update = () => {
+      if (document.fullscreenElement === shell) return;
+      const top = shell.getBoundingClientRect().top;
+      const available = window.innerHeight - top - 16;
+      const isCompact = window.matchMedia("(max-width: 760px)").matches;
+      const minHeight = isCompact ? 0 : 560;
+      shell.style.setProperty("--me-editor-shell-height", `${Math.max(minHeight, available)}px`);
+    };
+    update();
+    const raf = requestAnimationFrame(update);
+    window.addEventListener("resize", update);
+    document.addEventListener("fullscreenchange", update);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", update);
+      document.removeEventListener("fullscreenchange", update);
+    };
+  }, [mode]);
+  const back = () => {
+    setVideoSource(null);
+    if (imageSource) {
+      URL.revokeObjectURL(imageSource);
+      setImageSource(null);
+    }
+    setMode("home");
+  };
+  if (mode === "home") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className, style: { ...HOME, ...style }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: TITLE, children: "\u5A92\u4F53\u7F16\u8F91\u5668" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: SUB, children: "\u9009\u62E9\u8981\u7F16\u8F91\u7684\u5185\u5BB9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: CARDS, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "me-card", style: CARD, onClick: () => videoFileRef.current?.click(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: EMOJI, children: "\u{1F3AC}" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: CARD_T, children: "\u7F16\u8F91\u89C6\u9891" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: CARD_S, children: "\u591A\u7247\u6BB5\u65F6\u95F4\u8F74 \xB7 \u88C1\u526A \xB7 \u8C03\u8272 \xB7 \u5BFC\u51FA" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { className: "me-card", style: CARD, onClick: () => imageFileRef.current?.click(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: EMOJI, children: "\u{1F5BC}\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: CARD_T, children: "\u7F16\u8F91\u56FE\u7247" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: CARD_S, children: "\u88C1\u526A \xB7 \u6EE4\u955C \xB7 \u6807\u6CE8 \xB7 \u6C34\u5370" })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          ref: videoFileRef,
+          type: "file",
+          accept: "video/*",
+          hidden: true,
+          onChange: (e) => {
+            const f = e.target.files?.[0];
+            if (f) {
+              setVideoSource(f);
+              setMode("video");
+            }
+            e.target.value = "";
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "input",
+        {
+          ref: imageFileRef,
+          type: "file",
+          accept: "image/*",
+          hidden: true,
+          onChange: (e) => {
+            const f = e.target.files?.[0];
+            if (f) {
+              setImageSource(URL.createObjectURL(f));
+              setMode("image");
+            }
+          }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: shellRef, className: "editor-shell", style: SHELL, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: actionsRef, className: "editor-actions", style: ACTIONS, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { style: BACK, onClick: back, children: "\u2190 \u8FD4\u56DE" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { flex: "1 1 0", minHeight: 0 }, children: mode === "video" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VideoEditor, { source: videoSource ?? void 0, baseUrl, client, locale, theme, onExported, onError: (e) => console.error("[VideoEditor]", e) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ImageEditor, { source: imageSource, locale, theme, onSave: onImageSave, onClose: back }) })
+  ] }) });
+}
+var HOME = { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: "60vh", gap: 4, textAlign: "center", color: "var(--me-fg,#e7e7ee)" };
+var TITLE = { margin: 0, fontSize: 24, fontWeight: 600 };
+var SUB = { margin: "4px 0 24px", color: "var(--me-fg-muted,#8a8f9c)", fontSize: 14 };
+var CARDS = { display: "flex", gap: 16, flexWrap: "wrap", justifyContent: "center" };
+var CARD = { display: "flex", flexDirection: "column", alignItems: "center", gap: 8, width: 240, padding: "32px 24px", background: "var(--me-elevated,#1c1c20)", color: "var(--me-fg,#e7e7ee)", border: "1px solid var(--me-border,#26262b)", borderRadius: 12, cursor: "pointer", font: "inherit" };
+var EMOJI = { fontSize: 40, lineHeight: 1 };
+var CARD_T = { fontSize: 16, fontWeight: 600 };
+var CARD_S = { fontSize: 12, color: "var(--me-fg-muted,#8a8f9c)" };
+var SHELL = { display: "flex", flexDirection: "column", height: "var(--me-editor-shell-height)", minHeight: 0, position: "relative" };
+var ACTIONS = { display: "flex", alignItems: "center", gap: 8, marginBottom: 10 };
+var BACK = { padding: "6px 10px", background: "var(--me-chip,#1c1c20)", color: "var(--me-fg,#e7e7ee)", border: "1px solid var(--me-border,#26262b)", borderRadius: 6, cursor: "pointer", font: "inherit" };
+
+// src/buildExport.ts
+var import_browser2 = require("@media-editor/core/browser");
+
+// src/index.ts
+var import_engine2 = require("@media-editor/core/engine");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ImageEditor,
+  MediaEditor,
+  VideoEditor,
+  VideoEditorEngine,
+  buildVideoExportFormData,
+  useVideoEditor
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/useVideoEditor.ts","../src/ImageEditor.tsx","../src/VideoEditor.tsx","../src/MediaEditor.tsx","../src/buildExport.ts"],"sourcesContent":["/**\n * @media-editor/react —— React 适配层。\n * 视频:useVideoEditor(无头引擎绑定)+ <VideoEditor>(参考 UI)+ buildVideoExportFormData。\n * 图片:<ImageEditor>(薄包 @media-editor/image,内部 React 不外泄)。\n */\nexport { useVideoEditor, type UseVideoEditor } from './useVideoEditor';\nexport { ImageEditor, type ImageEditorProps } from './ImageEditor';\nexport { VideoEditor, type VideoEditorProps } from './VideoEditor';\nexport { MediaEditor, type MediaEditorProps } from './MediaEditor';\nexport { buildVideoExportFormData } from './buildExport';\n\n// 透传常用类型,免消费方再装 core\nexport { VideoEditorEngine } from '@media-editor/core/engine';\nexport type { MountImageEditorOptions, ImageEditorHandle } from '@media-editor/image';\n","/**\n * useVideoEditor —— 把无头 VideoEditorEngine 绑进 React。\n * 通过 useSyncExternalStore 订阅引擎;命令直接调 engine.*(引擎引用稳定)。\n */\nimport { useMemo, useRef, useSyncExternalStore } from 'react';\nimport { VideoEditorEngine } from '@media-editor/core/engine';\nimport type { VideoEditStateT } from '@media-editor/core';\n\nexport interface UseVideoEditor {\n  /** 引擎实例(命令式 API:engine.splitAtPlayhead/setFilter/undo… ) */\n  engine: VideoEditorEngine;\n  /** 当前编辑状态(变更即重渲染) */\n  state: VideoEditStateT;\n  canUndo: boolean;\n  canRedo: boolean;\n  totalDuration: number;\n  contentDuration: number;\n}\n\n/**\n * @param provided 复用外部引擎(跨组件共享);省略则组件内自建一个,生命周期跟随组件。\n */\nexport function useVideoEditor(provided?: VideoEditorEngine): UseVideoEditor {\n  const ref = useRef<VideoEditorEngine | null>(null);\n  if (!ref.current) ref.current = provided ?? new VideoEditorEngine();\n  const engine = ref.current;\n\n  const state = useSyncExternalStore(engine.subscribe, engine.getSnapshot, engine.getSnapshot);\n\n  return useMemo<UseVideoEditor>(\n    () => ({\n      engine,\n      state,\n      canUndo: engine.canUndo(),\n      canRedo: engine.canRedo(),\n      totalDuration: engine.totalDuration(),\n      contentDuration: engine.contentDuration(),\n    }),\n    [engine, state],\n  );\n}\n","/**\n * <ImageEditor> —— @media-editor/image 的 React 薄包(ref + useEffect 管挂载/更新/卸载)。\n * 编辑器内部的 React 封在 @media-editor/image 里,与宿主 React 互不干扰。\n */\nimport { useEffect, useRef, type CSSProperties } from 'react';\nimport type { ImageEditorHandle, MountImageEditorOptions } from '@media-editor/image';\n\nlet imageRuntimePromise: Promise<typeof import('@media-editor/image')> | null = null;\n\nfunction loadImageRuntime() {\n  imageRuntimePromise ??= import('@media-editor/image');\n  return imageRuntimePromise;\n}\n\nexport interface ImageEditorProps extends MountImageEditorOptions {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function ImageEditor({ className, style, ...opts }: ImageEditorProps) {\n  const elRef = useRef<HTMLDivElement>(null);\n  const handleRef = useRef<ImageEditorHandle | null>(null);\n  const optsRef = useRef(opts);\n  optsRef.current = opts; // 始终持最新 opts(回调不过期),挂载/更新都读它\n\n  // 挂载一次,卸载销毁\n  useEffect(() => {\n    if (!elRef.current) return;\n    let disposed = false;\n    void loadImageRuntime().then(({ mountImageEditor }) => {\n      if (!elRef.current || disposed) return;\n      const handle = mountImageEditor(elRef.current, optsRef.current);\n      if (disposed) {\n        handle.destroy();\n        return;\n      }\n      handleRef.current = handle;\n    });\n    return () => {\n      disposed = true;\n      handleRef.current?.destroy();\n      handleRef.current = null;\n    };\n  }, []);\n\n  // 仅在 source / locale / theme 变更时重渲染(其余 prop 变动靠 optsRef 透传)\n  useEffect(() => {\n    handleRef.current?.update(optsRef.current);\n  }, [opts.source, opts.locale, opts.theme]);\n\n  return <div ref={elRef} className={className} style={{ width: '100%', height: '100%', ...style }} />;\n}\n","/**\n * <VideoEditor> —— @media-editor/video 的 React 薄包(ref + useEffect 管挂载/更新/卸载)。\n * 完整视频富 UI(时间轴/裁剪/标注/贴纸/滤镜/封面)封在 @media-editor/video 内部,内置 React 不外泄。\n * 想要无头自建 UI 的用户用 useVideoEditor + VideoEditorEngine。\n */\nimport { useEffect, useRef, type CSSProperties } from 'react';\nimport type { MountVideoEditorOptions, VideoEditorHandle } from '@media-editor/video';\n\nlet videoRuntimePromise: Promise<typeof import('@media-editor/video')> | null = null;\n\nfunction loadVideoRuntime() {\n  videoRuntimePromise ??= import('@media-editor/video');\n  return videoRuntimePromise;\n}\n\ntype VideoSourceOption = { source?: File };\n\nexport interface VideoEditorProps extends MountVideoEditorOptions, VideoSourceOption {\n  className?: string;\n  style?: CSSProperties;\n}\n\nexport function VideoEditor({ className, style, ...opts }: VideoEditorProps) {\n  const elRef = useRef<HTMLDivElement>(null);\n  const handleRef = useRef<VideoEditorHandle | null>(null);\n  const optsRef = useRef(opts);\n  optsRef.current = opts; // 始终持最新 opts(回调不过期)\n\n  useEffect(() => {\n    if (!elRef.current) return;\n    let disposed = false;\n    void loadVideoRuntime().then(({ mountVideoEditor }) => {\n      if (!elRef.current || disposed) return;\n      const handle = mountVideoEditor(elRef.current, optsRef.current);\n      if (disposed) {\n        handle.destroy();\n        return;\n      }\n      handleRef.current = handle;\n    });\n    return () => {\n      disposed = true;\n      handleRef.current?.destroy();\n      handleRef.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    handleRef.current?.update(optsRef.current);\n  }, [opts.source, opts.locale, opts.theme, opts.baseUrl]);\n\n  return <div ref={elRef} className={className} style={{ width: '100%', height: '100%', ...style }} />;\n}\n","/**\n * <MediaEditor> —— 统一入口参考 UI。\n * 先选「编辑视频 / 编辑图片」,再进对应编辑器;编辑器内点返回回到选择页。\n * 视频和图片都在入口卡处选文件后进编辑器,打开后即导入素材。\n */\nimport { useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from 'react';\nimport type { EditorClient } from '@media-editor/client';\nimport type { EditorLocale } from '@media-editor/core';\nimport { createFullscreenToggle, type FullscreenToggle } from '@media-editor/core/browser';\nimport { VideoEditor } from './VideoEditor';\nimport { ImageEditor } from './ImageEditor';\n\nexport interface MediaEditorProps {\n  baseUrl?: string;\n  client?: EditorClient;\n  locale?: EditorLocale;\n  theme?: 'auto' | 'light' | 'dark';\n  className?: string;\n  style?: CSSProperties;\n  onExported?: (blob: Blob) => void;\n  onImageSave?: (img: unknown, designState: unknown) => void;\n}\n\ntype Mode = 'home' | 'video' | 'image';\n\nexport function MediaEditor({\n  baseUrl,\n  client,\n  locale = 'zh',\n  theme = 'auto',\n  className,\n  style,\n  onExported,\n  onImageSave,\n}: MediaEditorProps) {\n  const [mode, setMode] = useState<Mode>('home');\n  const [videoSource, setVideoSource] = useState<File | null>(null);\n  const [imageSource, setImageSource] = useState<string | null>(null);\n  const videoFileRef = useRef<HTMLInputElement>(null);\n  const imageFileRef = useRef<HTMLInputElement>(null);\n  const shellRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const fullscreenRef = useRef<FullscreenToggle | null>(null);\n\n  useEffect(() => {\n    fullscreenRef.current?.dispose();\n    fullscreenRef.current = null;\n    if (mode === 'home' || !shellRef.current || !actionsRef.current) return;\n    const fs = createFullscreenToggle(shellRef.current, { mode: 'inline' });\n    actionsRef.current.appendChild(fs.button);\n    fullscreenRef.current = fs;\n    return () => {\n      fs.dispose();\n      fullscreenRef.current = null;\n    };\n  }, [mode]);\n\n  useLayoutEffect(() => {\n    const shell = shellRef.current;\n    if (mode === 'home' || !shell) return;\n    const update = () => {\n      if (document.fullscreenElement === shell) return;\n      const top = shell.getBoundingClientRect().top;\n      const available = window.innerHeight - top - 16;\n      const isCompact = window.matchMedia('(max-width: 760px)').matches;\n      const minHeight = isCompact ? 0 : 560;\n      shell.style.setProperty('--me-editor-shell-height', `${Math.max(minHeight, available)}px`);\n    };\n    update();\n    const raf = requestAnimationFrame(update);\n    window.addEventListener('resize', update);\n    document.addEventListener('fullscreenchange', update);\n    return () => {\n      cancelAnimationFrame(raf);\n      window.removeEventListener('resize', update);\n      document.removeEventListener('fullscreenchange', update);\n    };\n  }, [mode]);\n\n  const back = () => {\n    setVideoSource(null);\n    if (imageSource) {\n      URL.revokeObjectURL(imageSource);\n      setImageSource(null);\n    }\n    setMode('home');\n  };\n\n  if (mode === 'home') {\n    return (\n      <div className={className} style={{ ...HOME, ...style }}>\n        <h2 style={TITLE}>媒体编辑器</h2>\n        <p style={SUB}>选择要编辑的内容</p>\n        <div style={CARDS}>\n          <button className=\"me-card\" style={CARD} onClick={() => videoFileRef.current?.click()}>\n            <span style={EMOJI}>🎬</span>\n            <span style={CARD_T}>编辑视频</span>\n            <span style={CARD_S}>多片段时间轴 · 裁剪 · 调色 · 导出</span>\n          </button>\n          <button className=\"me-card\" style={CARD} onClick={() => imageFileRef.current?.click()}>\n            <span style={EMOJI}>🖼️</span>\n            <span style={CARD_T}>编辑图片</span>\n            <span style={CARD_S}>裁剪 · 滤镜 · 标注 · 水印</span>\n          </button>\n        </div>\n        <input\n          ref={videoFileRef}\n          type=\"file\"\n          accept=\"video/*\"\n          hidden\n          onChange={(e) => {\n            const f = e.target.files?.[0];\n            if (f) {\n              setVideoSource(f);\n              setMode('video');\n            }\n            e.target.value = '';\n          }}\n        />\n        <input\n          ref={imageFileRef}\n          type=\"file\"\n          accept=\"image/*\"\n          hidden\n          onChange={(e) => {\n            const f = e.target.files?.[0];\n            if (f) {\n              setImageSource(URL.createObjectURL(f));\n              setMode('image');\n            }\n          }}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className={className} style={style}>\n      <div ref={shellRef} className=\"editor-shell\" style={SHELL}>\n        <div ref={actionsRef} className=\"editor-actions\" style={ACTIONS}>\n          <button style={BACK} onClick={back}>← 返回</button>\n        </div>\n        <div style={{ flex: '1 1 0', minHeight: 0 }}>\n          {mode === 'video' ? (\n            <VideoEditor source={videoSource ?? undefined} baseUrl={baseUrl} client={client} locale={locale} theme={theme} onExported={onExported} onError={(e) => console.error('[VideoEditor]', e)} />\n          ) : (\n            <ImageEditor source={imageSource!} locale={locale} theme={theme} onSave={onImageSave} onClose={back} />\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nconst HOME: CSSProperties = { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '60vh', gap: 4, textAlign: 'center', color: 'var(--me-fg,#e7e7ee)' };\nconst TITLE: CSSProperties = { margin: 0, fontSize: 24, fontWeight: 600 };\nconst SUB: CSSProperties = { margin: '4px 0 24px', color: 'var(--me-fg-muted,#8a8f9c)', fontSize: 14 };\nconst CARDS: CSSProperties = { display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center' };\nconst CARD: CSSProperties = { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, width: 240, padding: '32px 24px', background: 'var(--me-elevated,#1c1c20)', color: 'var(--me-fg,#e7e7ee)', border: '1px solid var(--me-border,#26262b)', borderRadius: 12, cursor: 'pointer', font: 'inherit' };\nconst EMOJI: CSSProperties = { fontSize: 40, lineHeight: 1 };\nconst CARD_T: CSSProperties = { fontSize: 16, fontWeight: 600 };\nconst CARD_S: CSSProperties = { fontSize: 12, color: 'var(--me-fg-muted,#8a8f9c)' };\nconst SHELL: CSSProperties = { display: 'flex', flexDirection: 'column', height: 'var(--me-editor-shell-height)', minHeight: 0, position: 'relative' };\nconst ACTIONS: CSSProperties = { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 };\nconst BACK: CSSProperties = { padding: '6px 10px', background: 'var(--me-chip,#1c1c20)', color: 'var(--me-fg,#e7e7ee)', border: '1px solid var(--me-border,#26262b)', borderRadius: 6, cursor: 'pointer', font: 'inherit' };\n","/**\n * 导出 FormData 组装器现集中在 @media-editor/core/browser(React/Vue 共用);此处仅 re-export 保持入口稳定。\n */\nexport { buildVideoExportFormData } from '@media-editor/core/browser';\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_browser","import_engine"]}

package/dist/index.d.cts

@@ -0,0 +1,54 @@
+import { VideoEditorEngine } from '@media-editor/core/engine';
+export { VideoEditorEngine } from '@media-editor/core/engine';
+import { VideoEditStateT, EditorLocale } from '@media-editor/core';
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { MountImageEditorOptions } from '@media-editor/image';
+export { ImageEditorHandle, MountImageEditorOptions } from '@media-editor/image';
+import { MountVideoEditorOptions } from '@media-editor/video';
+import { EditorClient } from '@media-editor/client';
+export { buildVideoExportFormData } from '@media-editor/core/browser';
+
+interface UseVideoEditor {
+    /** 引擎实例(命令式 API:engine.splitAtPlayhead/setFilter/undo… ) */
+    engine: VideoEditorEngine;
+    /** 当前编辑状态(变更即重渲染) */
+    state: VideoEditStateT;
+    canUndo: boolean;
+    canRedo: boolean;
+    totalDuration: number;
+    contentDuration: number;
+}
+/**
+ * @param provided 复用外部引擎(跨组件共享);省略则组件内自建一个,生命周期跟随组件。
+ */
+declare function useVideoEditor(provided?: VideoEditorEngine): UseVideoEditor;
+
+interface ImageEditorProps extends MountImageEditorOptions {
+    className?: string;
+    style?: CSSProperties;
+}
+declare function ImageEditor({ className, style, ...opts }: ImageEditorProps): react.JSX.Element;
+
+type VideoSourceOption = {
+    source?: File;
+};
+interface VideoEditorProps extends MountVideoEditorOptions, VideoSourceOption {
+    className?: string;
+    style?: CSSProperties;
+}
+declare function VideoEditor({ className, style, ...opts }: VideoEditorProps): react.JSX.Element;
+
+interface MediaEditorProps {
+    baseUrl?: string;
+    client?: EditorClient;
+    locale?: EditorLocale;
+    theme?: 'auto' | 'light' | 'dark';
+    className?: string;
+    style?: CSSProperties;
+    onExported?: (blob: Blob) => void;
+    onImageSave?: (img: unknown, designState: unknown) => void;
+}
+declare function MediaEditor({ baseUrl, client, locale, theme, className, style, onExported, onImageSave, }: MediaEditorProps): react.JSX.Element;
+
+export { ImageEditor, type ImageEditorProps, MediaEditor, type MediaEditorProps, type UseVideoEditor, VideoEditor, type VideoEditorProps, useVideoEditor };

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import { VideoEditorEngine } from '@media-editor/core/engine';
+export { VideoEditorEngine } from '@media-editor/core/engine';
+import { VideoEditStateT, EditorLocale } from '@media-editor/core';
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { MountImageEditorOptions } from '@media-editor/image';
+export { ImageEditorHandle, MountImageEditorOptions } from '@media-editor/image';
+import { MountVideoEditorOptions } from '@media-editor/video';
+import { EditorClient } from '@media-editor/client';
+export { buildVideoExportFormData } from '@media-editor/core/browser';
+
+interface UseVideoEditor {
+    /** 引擎实例(命令式 API:engine.splitAtPlayhead/setFilter/undo… ) */
+    engine: VideoEditorEngine;
+    /** 当前编辑状态(变更即重渲染) */
+    state: VideoEditStateT;
+    canUndo: boolean;
+    canRedo: boolean;
+    totalDuration: number;
+    contentDuration: number;
+}
+/**
+ * @param provided 复用外部引擎(跨组件共享);省略则组件内自建一个,生命周期跟随组件。
+ */
+declare function useVideoEditor(provided?: VideoEditorEngine): UseVideoEditor;
+
+interface ImageEditorProps extends MountImageEditorOptions {
+    className?: string;
+    style?: CSSProperties;
+}
+declare function ImageEditor({ className, style, ...opts }: ImageEditorProps): react.JSX.Element;
+
+type VideoSourceOption = {
+    source?: File;
+};
+interface VideoEditorProps extends MountVideoEditorOptions, VideoSourceOption {
+    className?: string;
+    style?: CSSProperties;
+}
+declare function VideoEditor({ className, style, ...opts }: VideoEditorProps): react.JSX.Element;
+
+interface MediaEditorProps {
+    baseUrl?: string;
+    client?: EditorClient;
+    locale?: EditorLocale;
+    theme?: 'auto' | 'light' | 'dark';
+    className?: string;
+    style?: CSSProperties;
+    onExported?: (blob: Blob) => void;
+    onImageSave?: (img: unknown, designState: unknown) => void;
+}
+declare function MediaEditor({ baseUrl, client, locale, theme, className, style, onExported, onImageSave, }: MediaEditorProps): react.JSX.Element;
+
+export { ImageEditor, type ImageEditorProps, MediaEditor, type MediaEditorProps, type UseVideoEditor, VideoEditor, type VideoEditorProps, useVideoEditor };