@bylqwjc/media-editor-react 1.0.12

package/dist/index.js

@@ -0,0 +1,240 @@
+// src/useVideoEditor.ts
+import { useMemo, useRef, useSyncExternalStore } from "react";
+import { VideoEditorEngine } from "@media-editor/core/engine";
+function useVideoEditor(provided) {
+  const ref = useRef(null);
+  if (!ref.current) ref.current = provided ?? new VideoEditorEngine();
+  const engine = ref.current;
+  const state = useSyncExternalStore(engine.subscribe, engine.getSnapshot, engine.getSnapshot);
+  return useMemo(
+    () => ({
+      engine,
+      state,
+      canUndo: engine.canUndo(),
+      canRedo: engine.canRedo(),
+      totalDuration: engine.totalDuration(),
+      contentDuration: engine.contentDuration()
+    }),
+    [engine, state]
+  );
+}
+
+// src/ImageEditor.tsx
+import { useEffect, useRef as useRef2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var imageRuntimePromise = null;
+function loadImageRuntime() {
+  imageRuntimePromise ?? (imageRuntimePromise = import("@media-editor/image"));
+  return imageRuntimePromise;
+}
+function ImageEditor({ className, style, ...opts }) {
+  const elRef = useRef2(null);
+  const handleRef = useRef2(null);
+  const optsRef = useRef2(opts);
+  optsRef.current = opts;
+  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;
+    };
+  }, []);
+  useEffect(() => {
+    handleRef.current?.update(optsRef.current);
+  }, [opts.source, opts.locale, opts.theme]);
+  return /* @__PURE__ */ jsx("div", { ref: elRef, className, style: { width: "100%", height: "100%", ...style } });
+}
+
+// src/VideoEditor.tsx
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var videoRuntimePromise = null;
+function loadVideoRuntime() {
+  videoRuntimePromise ?? (videoRuntimePromise = import("@media-editor/video"));
+  return videoRuntimePromise;
+}
+function VideoEditor({ className, style, ...opts }) {
+  const elRef = useRef3(null);
+  const handleRef = useRef3(null);
+  const optsRef = useRef3(opts);
+  optsRef.current = opts;
+  useEffect2(() => {
+    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;
+    };
+  }, []);
+  useEffect2(() => {
+    handleRef.current?.update(optsRef.current);
+  }, [opts.source, opts.locale, opts.theme, opts.baseUrl]);
+  return /* @__PURE__ */ jsx2("div", { ref: elRef, className, style: { width: "100%", height: "100%", ...style } });
+}
+
+// src/MediaEditor.tsx
+import { useEffect as useEffect3, useLayoutEffect, useRef as useRef4, useState } from "react";
+import { createFullscreenToggle } from "@media-editor/core/browser";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function MediaEditor({
+  baseUrl,
+  client,
+  locale = "zh",
+  theme = "auto",
+  className,
+  style,
+  onExported,
+  onImageSave
+}) {
+  const [mode, setMode] = useState("home");
+  const [videoSource, setVideoSource] = useState(null);
+  const [imageSource, setImageSource] = useState(null);
+  const videoFileRef = useRef4(null);
+  const imageFileRef = useRef4(null);
+  const shellRef = useRef4(null);
+  const actionsRef = useRef4(null);
+  const fullscreenRef = useRef4(null);
+  useEffect3(() => {
+    fullscreenRef.current?.dispose();
+    fullscreenRef.current = null;
+    if (mode === "home" || !shellRef.current || !actionsRef.current) return;
+    const fs = createFullscreenToggle(shellRef.current, { mode: "inline" });
+    actionsRef.current.appendChild(fs.button);
+    fullscreenRef.current = fs;
+    return () => {
+      fs.dispose();
+      fullscreenRef.current = null;
+    };
+  }, [mode]);
+  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__ */ jsxs("div", { className, style: { ...HOME, ...style }, children: [
+      /* @__PURE__ */ jsx3("h2", { style: TITLE, children: "\u5A92\u4F53\u7F16\u8F91\u5668" }),
+      /* @__PURE__ */ jsx3("p", { style: SUB, children: "\u9009\u62E9\u8981\u7F16\u8F91\u7684\u5185\u5BB9" }),
+      /* @__PURE__ */ jsxs("div", { style: CARDS, children: [
+        /* @__PURE__ */ jsxs("button", { className: "me-card", style: CARD, onClick: () => videoFileRef.current?.click(), children: [
+          /* @__PURE__ */ jsx3("span", { style: EMOJI, children: "\u{1F3AC}" }),
+          /* @__PURE__ */ jsx3("span", { style: CARD_T, children: "\u7F16\u8F91\u89C6\u9891" }),
+          /* @__PURE__ */ jsx3("span", { style: CARD_S, children: "\u591A\u7247\u6BB5\u65F6\u95F4\u8F74 \xB7 \u88C1\u526A \xB7 \u8C03\u8272 \xB7 \u5BFC\u51FA" })
+        ] }),
+        /* @__PURE__ */ jsxs("button", { className: "me-card", style: CARD, onClick: () => imageFileRef.current?.click(), children: [
+          /* @__PURE__ */ jsx3("span", { style: EMOJI, children: "\u{1F5BC}\uFE0F" }),
+          /* @__PURE__ */ jsx3("span", { style: CARD_T, children: "\u7F16\u8F91\u56FE\u7247" }),
+          /* @__PURE__ */ jsx3("span", { style: CARD_S, children: "\u88C1\u526A \xB7 \u6EE4\u955C \xB7 \u6807\u6CE8 \xB7 \u6C34\u5370" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "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__ */ jsx3(
+        "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__ */ jsx3("div", { className, style, children: /* @__PURE__ */ jsxs("div", { ref: shellRef, className: "editor-shell", style: SHELL, children: [
+    /* @__PURE__ */ jsx3("div", { ref: actionsRef, className: "editor-actions", style: ACTIONS, children: /* @__PURE__ */ jsx3("button", { style: BACK, onClick: back, children: "\u2190 \u8FD4\u56DE" }) }),
+    /* @__PURE__ */ jsx3("div", { style: { flex: "1 1 0", minHeight: 0 }, children: mode === "video" ? /* @__PURE__ */ jsx3(VideoEditor, { source: videoSource ?? void 0, baseUrl, client, locale, theme, onExported, onError: (e) => console.error("[VideoEditor]", e) }) : /* @__PURE__ */ jsx3(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
+import { buildVideoExportFormData } from "@media-editor/core/browser";
+
+// src/index.ts
+import { VideoEditorEngine as VideoEditorEngine2 } from "@media-editor/core/engine";
+export {
+  ImageEditor,
+  MediaEditor,
+  VideoEditor,
+  VideoEditorEngine2 as VideoEditorEngine,
+  buildVideoExportFormData,
+  useVideoEditor
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useVideoEditor.ts","../src/ImageEditor.tsx","../src/VideoEditor.tsx","../src/MediaEditor.tsx","../src/buildExport.ts","../src/index.ts"],"sourcesContent":["/**\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","/**\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"],"mappings":"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","names":["useRef","useEffect","useRef","jsx","useEffect","useRef","jsx","useRef","useEffect","VideoEditorEngine"]}