@haklex/rich-renderer-video 0.0.80 → 0.0.81

package/dist/VideoRenderer-DUHsloDe.js

@@ -0,0 +1,286 @@
+import { Download, Loader2, Maximize, Minimize, Pause, Play, Volume2, VolumeX } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Slider } from "@base-ui/react/slider";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/styles.css.ts
+var semanticClassNames = {
+	root: "rr-video-root",
+	player: "rr-video-player",
+	element: "rr-video-element",
+	indicator: "rr-video-indicator",
+	controls: "rr-video-controls",
+	button: "rr-video-btn",
+	progress: "rr-video-progress",
+	progressControl: "rr-video-progress-control",
+	progressTrack: "rr-video-progress-track",
+	progressRange: "rr-video-progress-range",
+	progressThumb: "rr-video-progress-thumb",
+	spin: "rr-video-spin",
+	editTrigger: "rr-video-edit-trigger",
+	editPreview: "rr-video-edit-preview",
+	editVideo: "rr-video-edit-video",
+	editOverlay: "rr-video-edit-overlay",
+	editPlaceholder: "rr-video-edit-placeholder",
+	editPanel: "rr-video-edit-panel",
+	editField: "rr-video-edit-field",
+	editFieldIcon: "rr-video-edit-field-icon",
+	editInput: "rr-video-edit-input"
+};
+var root = "_1x2h1ol0";
+var player = "_1x2h1ol1";
+var element = "_1x2h1ol2";
+var controls = "_1x2h1ol5";
+var button = "_1x2h1ol6";
+var progress = "_1x2h1ol7";
+var progressControl = "_1x2h1ol8";
+var progressTrack = "_1x2h1ol9";
+var progressRange = "_1x2h1ola";
+var progressThumb = "_1x2h1olb";
+var spin = "_1x2h1old";
+var editTrigger = "_1x2h1ole";
+var editPreview = "_1x2h1olf";
+var editVideo = "_1x2h1olg";
+var editOverlay = "_1x2h1olh";
+var editPlaceholder = "_1x2h1oli";
+var editPanel = "_1x2h1olj";
+var editField = "_1x2h1olk";
+var editFieldIcon = "_1x2h1oll";
+var editInput = "_1x2h1olm";
+//#endregion
+//#region src/VideoRenderer.tsx
+var PlayIcon = ({ size = 20 }) => /* @__PURE__ */ jsx(Play, { size });
+var PauseIcon = ({ size = 20 }) => /* @__PURE__ */ jsx(Pause, { size });
+var VolumeIcon = () => /* @__PURE__ */ jsx(Volume2, { size: 20 });
+var VolumeMuteIcon = () => /* @__PURE__ */ jsx(VolumeX, { size: 20 });
+var DownloadIcon = () => /* @__PURE__ */ jsx(Download, { size: 20 });
+var LoadingIcon = () => /* @__PURE__ */ jsx(Loader2, {
+	className: `${spin} ${semanticClassNames.spin}`,
+	size: 20
+});
+var FullscreenIcon = () => /* @__PURE__ */ jsx(Maximize, { size: 20 });
+var ExitFullscreenIcon = () => /* @__PURE__ */ jsx(Minimize, { size: 20 });
+var VideoRenderer = ({ src, poster, width, height }) => {
+	const wrapperRef = useRef(null);
+	const videoRef = useRef(null);
+	const [playing, setPlaying] = useState(false);
+	const [duration, setDuration] = useState(0);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [muted, setMuted] = useState(false);
+	const [isFullscreen, setIsFullscreen] = useState(false);
+	const [indicator$1, setIndicator] = useState(null);
+	const [draggingTime, setDraggingTime] = useState(null);
+	const [isDownloading, setIsDownloading] = useState(false);
+	const dragWasPlayingRef = useRef(false);
+	const indicatorTimerRef = useRef(void 0);
+	const indicatorKeyRef = useRef(0);
+	const aspectRatio = useMemo(() => {
+		if (width && height && width > 0 && height > 0) return `${width} / ${height}`;
+		return "16 / 9";
+	}, [height, width]);
+	const showIndicator = useCallback((type) => {
+		indicatorKeyRef.current += 1;
+		setIndicator({
+			type,
+			key: indicatorKeyRef.current
+		});
+		clearTimeout(indicatorTimerRef.current);
+		indicatorTimerRef.current = setTimeout(() => setIndicator(null), 500);
+	}, []);
+	const play = useCallback(() => {
+		videoRef.current?.play();
+	}, []);
+	const pause = useCallback(() => {
+		videoRef.current?.pause();
+	}, []);
+	const togglePlay = useCallback(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		if (video.paused) {
+			play();
+			showIndicator("play");
+		} else {
+			pause();
+			showIndicator("pause");
+		}
+	}, [
+		pause,
+		play,
+		showIndicator
+	]);
+	const seekTo = useCallback((time) => {
+		const video = videoRef.current;
+		if (!video) return;
+		const clamped = Math.min(Math.max(0, time), Number.isFinite(video.duration) ? video.duration : time);
+		video.currentTime = clamped;
+		setCurrentTime(clamped);
+	}, []);
+	const toggleMute = useCallback(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		video.muted = !video.muted;
+		setMuted(video.muted);
+	}, []);
+	const toggleFullscreen = useCallback(() => {
+		const wrapper = wrapperRef.current;
+		if (!wrapper) return;
+		if (!document.fullscreenElement) wrapper.requestFullscreen();
+		else document.exitFullscreen();
+	}, []);
+	const downloadingRef = useRef(false);
+	const downloadVideo = useCallback(() => {
+		if (downloadingRef.current) return;
+		downloadingRef.current = true;
+		setIsDownloading(true);
+		const filename = src.split("/").pop() || "video";
+		const fallback = () => {
+			const a = document.createElement("a");
+			a.href = src;
+			a.download = filename;
+			a.rel = "noopener noreferrer";
+			a.click();
+		};
+		fetch(src).then((res) => {
+			if (!res.ok) throw new Error(res.statusText);
+			return res.blob();
+		}).then((blob) => {
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = filename;
+			a.click();
+			setTimeout(() => URL.revokeObjectURL(url), 1e3);
+		}).catch(() => fallback()).finally(() => {
+			downloadingRef.current = false;
+			setIsDownloading(false);
+		});
+	}, [src]);
+	useEffect(() => {
+		const video = videoRef.current;
+		if (!video) return;
+		const onLoadedMetadata = () => {
+			setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+			setMuted(video.muted);
+		};
+		const onDurationChange = () => {
+			setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+		};
+		const onTimeUpdate = () => setCurrentTime(video.currentTime);
+		const onPlay = () => setPlaying(true);
+		const onPause = () => setPlaying(false);
+		const onVolumeChange = () => setMuted(video.muted);
+		video.addEventListener("loadedmetadata", onLoadedMetadata);
+		video.addEventListener("durationchange", onDurationChange);
+		video.addEventListener("timeupdate", onTimeUpdate);
+		video.addEventListener("play", onPlay);
+		video.addEventListener("pause", onPause);
+		video.addEventListener("volumechange", onVolumeChange);
+		return () => {
+			video.removeEventListener("loadedmetadata", onLoadedMetadata);
+			video.removeEventListener("durationchange", onDurationChange);
+			video.removeEventListener("timeupdate", onTimeUpdate);
+			video.removeEventListener("play", onPlay);
+			video.removeEventListener("pause", onPause);
+			video.removeEventListener("volumechange", onVolumeChange);
+		};
+	}, []);
+	useEffect(() => {
+		const handler = () => setIsFullscreen(!!document.fullscreenElement);
+		document.addEventListener("fullscreenchange", handler);
+		return () => document.removeEventListener("fullscreenchange", handler);
+	}, []);
+	useEffect(() => {
+		return () => clearTimeout(indicatorTimerRef.current);
+	}, []);
+	const timelineValue = draggingTime ?? currentTime;
+	return /* @__PURE__ */ jsx("figure", {
+		className: `${root} ${semanticClassNames.root}`,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `${player} ${semanticClassNames.player}`,
+			ref: wrapperRef,
+			style: { aspectRatio },
+			children: [
+				/* @__PURE__ */ jsx("video", {
+					playsInline: true,
+					className: `${element} ${semanticClassNames.element}`,
+					poster,
+					preload: "metadata",
+					ref: videoRef,
+					src,
+					onClick: togglePlay,
+					onDoubleClick: toggleFullscreen
+				}),
+				indicator$1 && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: `_1x2h1ol4 ${semanticClassNames.indicator}`,
+					children: indicator$1.type === "play" ? /* @__PURE__ */ jsx(PlayIcon, { size: 32 }) : /* @__PURE__ */ jsx(PauseIcon, { size: 32 })
+				}, indicator$1.key),
+				/* @__PURE__ */ jsxs("div", {
+					className: `${controls} ${semanticClassNames.controls}`,
+					onClick: (e) => e.stopPropagation(),
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							"aria-label": playing ? "Pause" : "Play",
+							className: `${button} ${semanticClassNames.button}`,
+							type: "button",
+							onClick: togglePlay,
+							children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+						}),
+						/* @__PURE__ */ jsx(Slider.Root, {
+							className: `${progress} ${semanticClassNames.progress}`,
+							max: duration || 0,
+							min: 0,
+							step: .01,
+							value: timelineValue,
+							onValueChange: (value) => {
+								setDraggingTime(value);
+							},
+							onValueCommitted: (value) => {
+								seekTo(value);
+								setDraggingTime(null);
+								if (dragWasPlayingRef.current) play();
+							},
+							children: /* @__PURE__ */ jsx(Slider.Control, {
+								className: `${progressControl} ${semanticClassNames.progressControl}`,
+								onPointerDown: () => {
+									dragWasPlayingRef.current = playing;
+									pause();
+									setDraggingTime(currentTime);
+								},
+								children: /* @__PURE__ */ jsxs(Slider.Track, {
+									className: `${progressTrack} ${semanticClassNames.progressTrack}`,
+									children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: `${progressRange} ${semanticClassNames.progressRange}` }), /* @__PURE__ */ jsx(Slider.Thumb, {
+										"aria-label": "Playback progress",
+										className: `${progressThumb} ${semanticClassNames.progressThumb}`
+									})]
+								})
+							})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							"aria-label": muted ? "Unmute" : "Mute",
+							className: `${button} ${semanticClassNames.button}`,
+							type: "button",
+							onClick: toggleMute,
+							children: muted ? /* @__PURE__ */ jsx(VolumeMuteIcon, {}) : /* @__PURE__ */ jsx(VolumeIcon, {})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							"aria-label": "Download",
+							className: `${button} ${semanticClassNames.button}`,
+							type: "button",
+							onClick: downloadVideo,
+							children: isDownloading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : /* @__PURE__ */ jsx(DownloadIcon, {})
+						}),
+						/* @__PURE__ */ jsx("button", {
+							"aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
+							className: `${button} ${semanticClassNames.button}`,
+							type: "button",
+							onClick: toggleFullscreen,
+							children: isFullscreen ? /* @__PURE__ */ jsx(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
+						})
+					]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { editOverlay as a, editPreview as c, root as d, semanticClassNames as f, editInput as i, editTrigger as l, editField as n, editPanel as o, editFieldIcon as r, editPlaceholder as s, VideoRenderer as t, editVideo as u };

package/dist/index.mjs

@@ -1,199 +1,169 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { a as editOverlay, c as editPreview, d as root, f as semanticClassNames, i as editInput, l as editTrigger, n as editField, o as editPanel, r as editFieldIcon, s as editPlaceholder, t as VideoRenderer, u as editVideo } from "./VideoRenderer-DUHsloDe.js";
 import { useRendererMode } from "@haklex/rich-editor";
-import { Popover, PopoverTrigger, PopoverPanel, ActionBar, ActionButton } from "@haklex/rich-editor-ui";
+import { ActionBar, ActionButton, Popover, PopoverPanel, PopoverTrigger } from "@haklex/rich-editor-ui";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNearestNodeFromDOMNode } from "lexical";
-import { Video, ImageIcon, ExternalLink, Trash2 } from "lucide-react";
-import { useRef, useState, useEffect, useCallback } from "react";
-import { V as VideoRenderer, r as root, s as semanticClassNames, e as editPreview, a as editVideo, b as editOverlay, c as editPlaceholder, d as editTrigger, f as editPanel, g as editField, h as editFieldIcon, i as editInput } from "./VideoRenderer-1dPzqoJZ.js";
-const UNSAFE_VIDEO_URL_RE = /^(?:javascript\s*:|vbscript\s*:|data\s*:(?!video\/))/i;
+import { ExternalLink, ImageIcon, Trash2, Video } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/VideoEditRenderer.tsx
+var UNSAFE_VIDEO_URL_RE = /^(?:javascript\s*:|vbscript\s*:|data\s*:(?!video\/))/i;
 function VideoEditRenderer(props) {
-  const mode = useRendererMode();
-  if (mode !== "editor") {
-    return /* @__PURE__ */ jsx(VideoRenderer, { ...props });
-  }
-  return /* @__PURE__ */ jsx(VideoEditRendererInner, { ...props });
+	if (useRendererMode() !== "editor") return /* @__PURE__ */ jsx(VideoRenderer, { ...props });
+	return /* @__PURE__ */ jsx(VideoEditRendererInner, { ...props });
 }
 function VideoEditRendererInner({ src, poster, width, height }) {
-  const [editor] = useLexicalComposerContext();
-  const editable = editor.isEditable();
-  const wrapperRef = useRef(null);
-  const srcInputRef = useRef(null);
-  const [open, setOpen] = useState(!src);
-  const [editSrc, setEditSrc] = useState(src);
-  const [editPoster, setEditPoster] = useState(poster || "");
-  useEffect(() => {
-    setEditSrc(src);
-    setEditPoster(poster || "");
-  }, [src, poster]);
-  useEffect(() => {
-    if (!src) setOpen(true);
-  }, [src]);
-  useEffect(() => {
-    if (open) {
-      requestAnimationFrame(() => srcInputRef.current?.focus());
-    }
-  }, [open]);
-  const commitChanges = useCallback(() => {
-    const trimmedSrc = editSrc.trim();
-    if (!trimmedSrc) return;
-    if (UNSAFE_VIDEO_URL_RE.test(trimmedSrc)) return;
-    if (!wrapperRef.current) return;
-    editor.update(() => {
-      const node = $getNearestNodeFromDOMNode(wrapperRef.current);
-      if (!node) return;
-      const writable = node.getWritable();
-      writable.__src = trimmedSrc;
-      writable.__poster = editPoster.trim() || void 0;
-    });
-    setOpen(false);
-  }, [editor, editSrc, editPoster]);
-  const handleDelete = useCallback(() => {
-    if (!wrapperRef.current) return;
-    editor.update(() => {
-      const node = $getNearestNodeFromDOMNode(wrapperRef.current);
-      if (node) node.remove();
-    });
-    setOpen(false);
-  }, [editor]);
-  const handleOpen = useCallback(() => {
-    if (src) window.open(src, "_blank", "noopener,noreferrer");
-  }, [src]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        commitChanges();
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        setEditSrc(src);
-        setEditPoster(poster || "");
-        setOpen(false);
-      }
-    },
-    [commitChanges, src, poster]
-  );
-  if (!editable) {
-    return /* @__PURE__ */ jsx(VideoRenderer, { height, poster, src, width });
-  }
-  const aspectRatio = width && height && width > 0 && height > 0 ? `${width} / ${height}` : "16 / 9";
-  return /* @__PURE__ */ jsxs(
-    Popover,
-    {
-      open,
-      onOpenChange: (nextOpen) => {
-        setOpen(nextOpen);
-        if (!nextOpen) {
-          setEditSrc(src);
-          setEditPoster(poster || "");
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          PopoverTrigger,
-          {
-            nativeButton: false,
-            render: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: `${editTrigger} ${semanticClassNames.editTrigger}`,
-                ref: wrapperRef
-              }
-            ),
-            children: src ? /* @__PURE__ */ jsx("figure", { className: `${root} ${semanticClassNames.root}`, children: /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: `${editPreview} ${semanticClassNames.editPreview}`,
-                style: {
-                  aspectRatio,
-                  backgroundImage: poster ? `url(${poster})` : void 0
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "video",
-                    {
-                      className: `${editVideo} ${semanticClassNames.editVideo}`,
-                      poster,
-                      preload: "metadata",
-                      src
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: `${editOverlay} ${semanticClassNames.editOverlay}`, children: /* @__PURE__ */ jsx(Video, { size: 32 }) })
-                ]
-              }
-            ) }) : /* @__PURE__ */ jsxs("div", { className: `${editPlaceholder} ${semanticClassNames.editPlaceholder}`, children: [
-              /* @__PURE__ */ jsx(Video, { size: 24 }),
-              /* @__PURE__ */ jsx("span", { children: "Click to add video" })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          PopoverPanel,
-          {
-            className: `${editPanel} ${semanticClassNames.editPanel}`,
-            side: "bottom",
-            sideOffset: 8,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: `${editField} ${semanticClassNames.editField}`, children: [
-                /* @__PURE__ */ jsx(
-                  Video,
-                  {
-                    className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
-                    size: 14
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: `${editInput} ${semanticClassNames.editInput}`,
-                    placeholder: "Video URL",
-                    ref: srcInputRef,
-                    type: "url",
-                    value: editSrc,
-                    onChange: (e) => setEditSrc(e.target.value),
-                    onKeyDown: handleKeyDown
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: `${editField} ${semanticClassNames.editField}`, children: [
-                /* @__PURE__ */ jsx(
-                  ImageIcon,
-                  {
-                    className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
-                    size: 14
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: `${editInput} ${semanticClassNames.editInput}`,
-                    placeholder: "Poster URL (optional)",
-                    type: "url",
-                    value: editPoster,
-                    onBlur: commitChanges,
-                    onChange: (e) => setEditPoster(e.target.value),
-                    onKeyDown: handleKeyDown
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs(ActionBar, { children: [
-                /* @__PURE__ */ jsxs(ActionButton, { onClick: handleOpen, children: [
-                  /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
-                  "Open"
-                ] }),
-                /* @__PURE__ */ jsxs(ActionButton, { danger: true, onClick: handleDelete, children: [
-                  /* @__PURE__ */ jsx(Trash2, { size: 14 }),
-                  "Remove"
-                ] })
-              ] })
-            ]
-          }
-        )
-      ]
-    }
-  );
+	const [editor] = useLexicalComposerContext();
+	const editable = editor.isEditable();
+	const wrapperRef = useRef(null);
+	const srcInputRef = useRef(null);
+	const [open, setOpen] = useState(!src);
+	const [editSrc, setEditSrc] = useState(src);
+	const [editPoster, setEditPoster] = useState(poster || "");
+	useEffect(() => {
+		setEditSrc(src);
+		setEditPoster(poster || "");
+	}, [src, poster]);
+	useEffect(() => {
+		if (!src) setOpen(true);
+	}, [src]);
+	useEffect(() => {
+		if (open) requestAnimationFrame(() => srcInputRef.current?.focus());
+	}, [open]);
+	const commitChanges = useCallback(() => {
+		const trimmedSrc = editSrc.trim();
+		if (!trimmedSrc) return;
+		if (UNSAFE_VIDEO_URL_RE.test(trimmedSrc)) return;
+		if (!wrapperRef.current) return;
+		editor.update(() => {
+			const node = $getNearestNodeFromDOMNode(wrapperRef.current);
+			if (!node) return;
+			const writable = node.getWritable();
+			writable.__src = trimmedSrc;
+			writable.__poster = editPoster.trim() || void 0;
+		});
+		setOpen(false);
+	}, [
+		editor,
+		editSrc,
+		editPoster
+	]);
+	const handleDelete = useCallback(() => {
+		if (!wrapperRef.current) return;
+		editor.update(() => {
+			const node = $getNearestNodeFromDOMNode(wrapperRef.current);
+			if (node) node.remove();
+		});
+		setOpen(false);
+	}, [editor]);
+	const handleOpen = useCallback(() => {
+		if (src) window.open(src, "_blank", "noopener,noreferrer");
+	}, [src]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "Enter") {
+			e.preventDefault();
+			commitChanges();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			setEditSrc(src);
+			setEditPoster(poster || "");
+			setOpen(false);
+		}
+	}, [
+		commitChanges,
+		src,
+		poster
+	]);
+	if (!editable) return /* @__PURE__ */ jsx(VideoRenderer, {
+		height,
+		poster,
+		src,
+		width
+	});
+	const aspectRatio = width && height && width > 0 && height > 0 ? `${width} / ${height}` : "16 / 9";
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (nextOpen) => {
+			setOpen(nextOpen);
+			if (!nextOpen) {
+				setEditSrc(src);
+				setEditPoster(poster || "");
+			}
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			nativeButton: false,
+			render: /* @__PURE__ */ jsx("div", {
+				className: `${editTrigger} ${semanticClassNames.editTrigger}`,
+				ref: wrapperRef
+			}),
+			children: src ? /* @__PURE__ */ jsx("figure", {
+				className: `${root} ${semanticClassNames.root}`,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: `${editPreview} ${semanticClassNames.editPreview}`,
+					style: {
+						aspectRatio,
+						backgroundImage: poster ? `url(${poster})` : void 0
+					},
+					children: [/* @__PURE__ */ jsx("video", {
+						className: `${editVideo} ${semanticClassNames.editVideo}`,
+						poster,
+						preload: "metadata",
+						src
+					}), /* @__PURE__ */ jsx("span", {
+						className: `${editOverlay} ${semanticClassNames.editOverlay}`,
+						children: /* @__PURE__ */ jsx(Video, { size: 32 })
+					})]
+				})
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: `${editPlaceholder} ${semanticClassNames.editPlaceholder}`,
+				children: [/* @__PURE__ */ jsx(Video, { size: 24 }), /* @__PURE__ */ jsx("span", { children: "Click to add video" })]
+			})
+		}), /* @__PURE__ */ jsxs(PopoverPanel, {
+			className: `${editPanel} ${semanticClassNames.editPanel}`,
+			side: "bottom",
+			sideOffset: 8,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: `${editField} ${semanticClassNames.editField}`,
+					children: [/* @__PURE__ */ jsx(Video, {
+						className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
+						size: 14
+					}), /* @__PURE__ */ jsx("input", {
+						className: `${editInput} ${semanticClassNames.editInput}`,
+						placeholder: "Video URL",
+						ref: srcInputRef,
+						type: "url",
+						value: editSrc,
+						onChange: (e) => setEditSrc(e.target.value),
+						onKeyDown: handleKeyDown
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: `${editField} ${semanticClassNames.editField}`,
+					children: [/* @__PURE__ */ jsx(ImageIcon, {
+						className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
+						size: 14
+					}), /* @__PURE__ */ jsx("input", {
+						className: `${editInput} ${semanticClassNames.editInput}`,
+						placeholder: "Poster URL (optional)",
+						type: "url",
+						value: editPoster,
+						onBlur: commitChanges,
+						onChange: (e) => setEditPoster(e.target.value),
+						onKeyDown: handleKeyDown
+					})]
+				}),
+				/* @__PURE__ */ jsxs(ActionBar, { children: [/* @__PURE__ */ jsxs(ActionButton, {
+					onClick: handleOpen,
+					children: [/* @__PURE__ */ jsx(ExternalLink, { size: 14 }), "Open"]
+				}), /* @__PURE__ */ jsxs(ActionButton, {
+					danger: true,
+					onClick: handleDelete,
+					children: [/* @__PURE__ */ jsx(Trash2, { size: 14 }), "Remove"]
+				})] })
+			]
+		})]
+	});
 }
-export {
-  VideoEditRenderer,
-  VideoRenderer
-};
+//#endregion
+export { VideoEditRenderer, VideoRenderer };

package/dist/rich-renderer-video.css

@@ -1 +1,2 @@
-:root{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-fill: #e8e8ec;--rc-fill-secondary: #eeeeef;--rc-fill-tertiary: #f4f4f6;--rc-fill-quaternary: #f9f9fa;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}:root.dark{--rc-text: #fafafa;--rc-text-secondary: #a1a1aa;--rc-text-tertiary: #71717a;--rc-text-quaternary: #52525b;--rc-bg: #09090b;--rc-bg-secondary: #18181b;--rc-bg-tertiary: #27272a;--rc-fill: #2a2a2f;--rc-fill-secondary: #222226;--rc-fill-tertiary: #1b1b1f;--rc-fill-quaternary: #131316;--rc-border: #27272a;--rc-accent: #60a5fa;--rc-accent-light: #60a5fa20;--rc-link: #60a5fa;--rc-code-text: #e4e4e7;--rc-code-bg: #27272a;--rc-hr-border: #27272a;--rc-quote-border: #60a5fa;--rc-quote-bg: #1e3a5f;--rc-alert-info: #7db9e5;--rc-alert-warning: #da864a;--rc-alert-tip: #54da48;--rc-alert-caution: #e16973;--rc-alert-important: #9966e0;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.35);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.4);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}._1ju0cb20{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-fill: #e8e8ec;--rc-fill-secondary: #eeeeef;--rc-fill-tertiary: #f4f4f6;--rc-fill-quaternary: #f9f9fa;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.7;--rc-line-height-tight: 1.4;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}._1ju0cb21{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-fill: #e8e8ec;--rc-fill-secondary: #eeeeef;--rc-fill-tertiary: #f4f4f6;--rc-fill-quaternary: #f9f9fa;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #2563eb;--rc-quote-bg: #eff6ff;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: 700px;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 4px;--rc-space-sm: 8px;--rc-space-md: 16px;--rc-space-lg: 24px;--rc-space-xl: 32px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 16px;--rc-font-size-small: 14px;--rc-line-height: 1.8;--rc-line-height-tight: 1.4;--rc-font-family: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm: 4px;--rc-radius-md: 8px;--rc-radius-lg: 12px}._1ju0cb22{--rc-text: #000;--rc-text-secondary: #27272a;--rc-text-tertiary: #71717a;--rc-text-quaternary: #a1a1aa;--rc-bg: #ffffff;--rc-bg-secondary: #fafafa;--rc-bg-tertiary: #f4f4f5;--rc-fill: #e8e8ec;--rc-fill-secondary: #eeeeef;--rc-fill-tertiary: #f4f4f6;--rc-fill-quaternary: #f9f9fa;--rc-border: #f4f4f5;--rc-accent: #2563eb;--rc-accent-light: #2563eb20;--rc-link: #2563eb;--rc-code-text: #3f3f46;--rc-code-bg: #f4f4f5;--rc-hr-border: #e4e4e7;--rc-quote-border: #a1a1aa;--rc-quote-bg: #fafafa;--rc-alert-info: #006bb7;--rc-alert-warning: #cc5500;--rc-alert-tip: #11cc00;--rc-alert-caution: #cc0011;--rc-alert-important: #5500cc;--rc-max-width: none;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .06);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.08);--rc-space-xs: 2px;--rc-space-sm: 4px;--rc-space-md: 10px;--rc-space-lg: 16px;--rc-space-xl: 20px;--rc-font-family-sans: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif: "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs: .625em;--rc-font-size-xs: .75em;--rc-font-size-sm: .8125em;--rc-font-size-md: .875em;--rc-font-size-lg: 1.25em;--rc-font-size-base: 14px;--rc-font-size-small: 12px;--rc-line-height: 1.5;--rc-line-height-tight: 1.3;--rc-font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm: 3px;--rc-radius-md: 6px;--rc-radius-lg: 12px}.dark ._1ju0cb20,[data-theme=dark] ._1ju0cb20,.dark._1ju0cb20,[data-theme=dark]._1ju0cb20,.dark ._1ju0cb21,[data-theme=dark] ._1ju0cb21,.dark._1ju0cb21,[data-theme=dark]._1ju0cb21,.dark ._1ju0cb22,[data-theme=dark] ._1ju0cb22,.dark._1ju0cb22,[data-theme=dark]._1ju0cb22{--rc-text: #fafafa;--rc-text-secondary: #a1a1aa;--rc-text-tertiary: #71717a;--rc-text-quaternary: #52525b;--rc-bg: #09090b;--rc-bg-secondary: #18181b;--rc-bg-tertiary: #27272a;--rc-fill: #2a2a2f;--rc-fill-secondary: #222226;--rc-fill-tertiary: #1b1b1f;--rc-fill-quaternary: #131316;--rc-border: #27272a;--rc-accent: #60a5fa;--rc-accent-light: #60a5fa20;--rc-link: #60a5fa;--rc-code-text: #e4e4e7;--rc-code-bg: #27272a;--rc-hr-border: #27272a;--rc-quote-border: #60a5fa;--rc-quote-bg: #1e3a5f;--rc-alert-info: #7db9e5;--rc-alert-warning: #da864a;--rc-alert-tip: #54da48;--rc-alert-caution: #e16973;--rc-alert-important: #9966e0;--rc-shadow-top-bar: 0 8px 30px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .3);--rc-shadow-modal: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.35);--rc-shadow-menu: 0 1px 4px rgba(0,0,0,.25), 0 4px 16px rgba(0,0,0,.4)}@keyframes _1x2h1ol3{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.3)}}@keyframes _1x2h1olc{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._1x2h1ol0{margin:1.25rem 0}._1x2h1ol1{position:relative;width:100%;background:#000;border-radius:.75rem;overflow:hidden}._1x2h1ol2{width:100%;height:100%;display:block;object-fit:contain;background:#000;cursor:pointer}._1x2h1ol4{position:absolute;inset:0;margin:auto;width:5rem;height:5rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#000000b3;color:#fff;pointer-events:none;animation:_1x2h1ol3 .5s ease forwards}._1x2h1ol5{position:absolute;left:2rem;right:2rem;bottom:.5rem;height:2.5rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--rc-border) 20%,transparent);background:color-mix(in srgb,var(--rc-bg-secondary) 90%,transparent);backdrop-filter:blur(24px) saturate(180%);color:var(--rc-text);display:flex;align-items:center;gap:.75rem;padding:0 1rem;max-width:80vw;margin:0 auto;opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}._1x2h1ol1:hover ._1x2h1ol5,._1x2h1ol1:focus-within ._1x2h1ol5{opacity:1;transform:translateY(0)}._1x2h1ol6{appearance:none;border:none;background:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:.125rem;line-height:1;flex-shrink:0;transition:transform .15s ease}._1x2h1ol6:hover{transform:scale(1.1)}._1x2h1ol6:active{transform:scale(.93)}._1x2h1ol6:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}._1x2h1ol6:disabled{opacity:.5;pointer-events:none}._1x2h1ol7{flex:1;height:100%}._1x2h1ol8{position:relative;display:flex;align-items:center;width:100%;height:100%;touch-action:none;user-select:none}._1x2h1ol9{position:relative;flex:1;height:.25rem;border-radius:999px;background:var(--rc-bg)}._1x2h1ola{position:absolute;height:100%;border-radius:999px;background:color-mix(in srgb,var(--rc-text-secondary) 40%,transparent)}._1x2h1olb{display:block;height:.75rem;width:3px;border-radius:1px;border:none;background:var(--rc-text-secondary)}._1x2h1old{animation:_1x2h1olc .8s linear infinite}._1x2h1ole{display:block;cursor:pointer}._1x2h1olf{position:relative;width:100%;border-radius:.75rem;overflow:hidden;background:#000;background-size:cover;background-position:center;cursor:pointer}._1x2h1olg{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none}._1x2h1olh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#00000059;color:#fff;transition:background .2s}._1x2h1ole:hover ._1x2h1olh{background:#00000080}._1x2h1oli{display:flex;align-items:center;justify-content:center;gap:8px;padding:2rem;border:2px dashed var(--rc-border);border-radius:var(--rc-radius-md);color:var(--rc-text-secondary);font-size:var(--rc-font-size-md);cursor:pointer;transition:border-color .2s,color .2s}._1x2h1oli:hover{border-color:var(--rc-accent);color:var(--rc-text)}._1x2h1olj{display:flex;flex-direction:column;gap:8px;width:340px;padding:12px;font-family:var(--rc-font-family-sans)}._1x2h1olk{display:flex;align-items:center;gap:8px;padding:6px 10px;background-color:var(--rc-bg-secondary);border-radius:6px;min-width:0}._1x2h1oll{flex-shrink:0;color:var(--rc-text-secondary)}._1x2h1olm{flex:1;appearance:none;border:none;background-color:transparent;color:inherit;font-size:var(--rc-font-size-sm);padding:0;outline:none;min-width:0}._1x2h1olm::placeholder{color:var(--rc-text-secondary)}@media(max-width:768px){._1x2h1ol5{left:.75rem;right:.75rem;opacity:1;transform:none;gap:.5rem;padding:0 .75rem}}
+:root{--rc-text:#000;--rc-text-secondary:#27272a;--rc-text-tertiary:#71717a;--rc-text-quaternary:#a1a1aa;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f4f4f5;--rc-fill:#e8e8ec;--rc-fill-secondary:#eeeeef;--rc-fill-tertiary:#f4f4f6;--rc-fill-quaternary:#f9f9fa;--rc-border:#f4f4f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#3f3f46;--rc-code-bg:#f4f4f5;--rc-hr-border:#e4e4e7;--rc-quote-border:#2563eb;--rc-quote-bg:#eff6ff;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}:root.dark{--rc-text:#fafafa;--rc-text-secondary:#a1a1aa;--rc-text-tertiary:#71717a;--rc-text-quaternary:#52525b;--rc-bg:#09090b;--rc-bg-secondary:#18181b;--rc-bg-tertiary:#27272a;--rc-fill:#2a2a2f;--rc-fill-secondary:#222226;--rc-fill-tertiary:#1b1b1f;--rc-fill-quaternary:#131316;--rc-border:#27272a;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#e4e4e7;--rc-code-bg:#27272a;--rc-hr-border:#27272a;--rc-quote-border:#60a5fa;--rc-quote-bg:#1e3a5f;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._1ju0cb20{--rc-text:#000;--rc-text-secondary:#27272a;--rc-text-tertiary:#71717a;--rc-text-quaternary:#a1a1aa;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f4f4f5;--rc-fill:#e8e8ec;--rc-fill-secondary:#eeeeef;--rc-fill-tertiary:#f4f4f6;--rc-fill-quaternary:#f9f9fa;--rc-border:#f4f4f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#3f3f46;--rc-code-bg:#f4f4f5;--rc-hr-border:#e4e4e7;--rc-quote-border:#2563eb;--rc-quote-bg:#eff6ff;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.7;--rc-line-height-tight:1.4;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._1ju0cb21{--rc-text:#000;--rc-text-secondary:#27272a;--rc-text-tertiary:#71717a;--rc-text-quaternary:#a1a1aa;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f4f4f5;--rc-fill:#e8e8ec;--rc-fill-secondary:#eeeeef;--rc-fill-tertiary:#f4f4f6;--rc-fill-quaternary:#f9f9fa;--rc-border:#f4f4f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#3f3f46;--rc-code-bg:#f4f4f5;--rc-hr-border:#e4e4e7;--rc-quote-border:#2563eb;--rc-quote-bg:#eff6ff;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:700px;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:4px;--rc-space-sm:8px;--rc-space-md:16px;--rc-space-lg:24px;--rc-space-xl:32px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:16px;--rc-font-size-small:14px;--rc-line-height:1.8;--rc-line-height-tight:1.4;--rc-font-family:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-radius-sm:4px;--rc-radius-md:8px;--rc-radius-lg:12px}._1ju0cb22{--rc-text:#000;--rc-text-secondary:#27272a;--rc-text-tertiary:#71717a;--rc-text-quaternary:#a1a1aa;--rc-bg:#fff;--rc-bg-secondary:#fafafa;--rc-bg-tertiary:#f4f4f5;--rc-fill:#e8e8ec;--rc-fill-secondary:#eeeeef;--rc-fill-tertiary:#f4f4f6;--rc-fill-quaternary:#f9f9fa;--rc-border:#f4f4f5;--rc-accent:#2563eb;--rc-accent-light:#2563eb20;--rc-link:#2563eb;--rc-code-text:#3f3f46;--rc-code-bg:#f4f4f5;--rc-hr-border:#e4e4e7;--rc-quote-border:#a1a1aa;--rc-quote-bg:#fafafa;--rc-alert-info:#006bb7;--rc-alert-warning:#c50;--rc-alert-tip:#1c0;--rc-alert-caution:#c01;--rc-alert-important:#50c;--rc-max-width:none;--rc-shadow-top-bar:0 8px 30px #0000001f, 0 2px 8px #0000000f;--rc-shadow-modal:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--rc-shadow-menu:0 1px 4px #0000000a, 0 4px 16px #00000014;--rc-space-xs:2px;--rc-space-sm:4px;--rc-space-md:10px;--rc-space-lg:16px;--rc-space-xl:20px;--rc-font-family-sans:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-font-family-serif:"Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif", "source-han-serif-sc", "Songti SC", STSong, "华文宋体", serif;--rc-font-mono:"SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;--rc-font-size-2xs:.625em;--rc-font-size-xs:.75em;--rc-font-size-sm:.8125em;--rc-font-size-md:.875em;--rc-font-size-lg:1.25em;--rc-font-size-base:14px;--rc-font-size-small:12px;--rc-line-height:1.5;--rc-line-height-tight:1.3;--rc-font-family:"PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, "noto sans sc", "hiragino sans gb", -apple-system, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Not Color Emoji;--rc-radius-sm:3px;--rc-radius-md:6px;--rc-radius-lg:12px}.dark ._1ju0cb20,[data-theme=dark] ._1ju0cb20,.dark._1ju0cb20,[data-theme=dark]._1ju0cb20,.dark ._1ju0cb21,[data-theme=dark] ._1ju0cb21,.dark._1ju0cb21,[data-theme=dark]._1ju0cb21,.dark ._1ju0cb22,[data-theme=dark] ._1ju0cb22,.dark._1ju0cb22,[data-theme=dark]._1ju0cb22{--rc-text:#fafafa;--rc-text-secondary:#a1a1aa;--rc-text-tertiary:#71717a;--rc-text-quaternary:#52525b;--rc-bg:#09090b;--rc-bg-secondary:#18181b;--rc-bg-tertiary:#27272a;--rc-fill:#2a2a2f;--rc-fill-secondary:#222226;--rc-fill-tertiary:#1b1b1f;--rc-fill-quaternary:#131316;--rc-border:#27272a;--rc-accent:#60a5fa;--rc-accent-light:#60a5fa20;--rc-link:#60a5fa;--rc-code-text:#e4e4e7;--rc-code-bg:#27272a;--rc-hr-border:#27272a;--rc-quote-border:#60a5fa;--rc-quote-bg:#1e3a5f;--rc-alert-info:#7db9e5;--rc-alert-warning:#da864a;--rc-alert-tip:#54da48;--rc-alert-caution:#e16973;--rc-alert-important:#9966e0;--rc-shadow-top-bar:0 8px 30px #00000073, 0 2px 8px #0000004d;--rc-shadow-modal:0 10px 15px -3px #0006, 0 4px 6px -4px #00000059;--rc-shadow-menu:0 1px 4px #00000040, 0 4px 16px #0006}@keyframes _1x2h1ol3{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.3)}}@keyframes _1x2h1olc{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._1x2h1ol0{margin:1.25rem 0}._1x2h1ol1{background:#000;border-radius:.75rem;width:100%;position:relative;overflow:hidden}._1x2h1ol2{object-fit:contain;cursor:pointer;background:#000;width:100%;height:100%;display:block}._1x2h1ol4{color:#fff;pointer-events:none;background:#000000b3;border-radius:999px;justify-content:center;align-items:center;width:5rem;height:5rem;margin:auto;animation:.5s forwards _1x2h1ol3;display:inline-flex;position:absolute;top:0;bottom:0;left:0;right:0}._1x2h1ol5{border:1px solid color-mix(in srgb, var(--rc-border) 20%, transparent);background:color-mix(in srgb, var(--rc-bg-secondary) 90%, transparent);-webkit-backdrop-filter:blur(24px)saturate(180%);backdrop-filter:blur(24px)saturate(180%);height:2.5rem;color:var(--rc-text);opacity:0;border-radius:999px;align-items:center;gap:.75rem;max-width:80vw;margin:0 auto;padding:0 1rem;transition:opacity .2s,transform .2s;display:flex;position:absolute;bottom:.5rem;left:2rem;right:2rem;transform:translateY(4px)}._1x2h1ol1:hover ._1x2h1ol5,._1x2h1ol1:focus-within ._1x2h1ol5{opacity:1;transform:translateY(0)}._1x2h1ol6{-webkit-appearance:none;appearance:none;color:inherit;cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:.125rem;line-height:1;transition:transform .15s;display:inline-flex}._1x2h1ol6:hover{transform:scale(1.1)}._1x2h1ol6:active{transform:scale(.93)}._1x2h1ol6:focus-visible{outline-offset:2px;border-radius:4px;outline:2px solid}._1x2h1ol6:disabled{opacity:.5;pointer-events:none}._1x2h1ol7{flex:1;height:100%}._1x2h1ol8{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;height:100%;display:flex;position:relative}._1x2h1ol9{background:var(--rc-bg);border-radius:999px;flex:1;height:.25rem;position:relative}._1x2h1ola{background:color-mix(in srgb, var(--rc-text-secondary) 40%, transparent);border-radius:999px;height:100%;position:absolute}._1x2h1olb{background:var(--rc-text-secondary);border:none;border-radius:1px;width:3px;height:.75rem;display:block}._1x2h1old{animation:.8s linear infinite _1x2h1olc}._1x2h1ole{cursor:pointer;display:block}._1x2h1olf{cursor:pointer;background:#000 50%/cover;border-radius:.75rem;width:100%;position:relative;overflow:hidden}._1x2h1olg{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}._1x2h1olh{color:#fff;background:#00000059;justify-content:center;align-items:center;transition:background .2s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}._1x2h1ole:hover ._1x2h1olh{background:#00000080}._1x2h1oli{border:2px dashed var(--rc-border);border-radius:var(--rc-radius-md);color:var(--rc-text-secondary);font-size:var(--rc-font-size-md);cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:2rem;transition:border-color .2s,color .2s;display:flex}._1x2h1oli:hover{border-color:var(--rc-accent);color:var(--rc-text)}._1x2h1olj{width:340px;font-family:var(--rc-font-family-sans);flex-direction:column;gap:8px;padding:12px;display:flex}._1x2h1olk{background-color:var(--rc-bg-secondary);border-radius:6px;align-items:center;gap:8px;min-width:0;padding:6px 10px;display:flex}._1x2h1oll{color:var(--rc-text-secondary);flex-shrink:0}._1x2h1olm{-webkit-appearance:none;appearance:none;color:inherit;font-size:var(--rc-font-size-sm);background-color:#0000;border:none;outline:none;flex:1;min-width:0;padding:0}._1x2h1olm::placeholder{color:var(--rc-text-secondary)}@media (max-width:768px){._1x2h1ol5{opacity:1;gap:.5rem;padding:0 .75rem;left:.75rem;right:.75rem;transform:none}}
+/*$vite$:1*/

package/dist/static.mjs

@@ -1,4 +1,2 @@
-import { V } from "./VideoRenderer-1dPzqoJZ.js";
-export {
-  V as VideoRenderer
-};
+import { t as VideoRenderer } from "./VideoRenderer-DUHsloDe.js";
+export { VideoRenderer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderer-video",
-  "version": "0.0.80",
+  "version": "0.0.81",
   "description": "Video player renderer",
   "repository": {
     "type": "git",
@@ -27,9 +27,9 @@
   "dependencies": {
     "@base-ui/react": "^1.2.0",
     "lucide-react": "^0.577.0",
-    "@haklex/rich-editor": "0.0.80",
-    "@haklex/rich-editor-ui": "0.0.80",
-    "@haklex/rich-style-token": "0.0.80"
+    "@haklex/rich-editor": "0.0.81",
+    "@haklex/rich-editor-ui": "0.0.81",
+    "@haklex/rich-style-token": "0.0.81"
   },
   "devDependencies": {
     "@lexical/react": "^0.41.0",

package/dist/VideoRenderer-1dPzqoJZ.js

@@ -1,321 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Slider } from "@base-ui/react/slider";
-import { Play, Pause, VolumeX, Volume2, Loader2, Download, Minimize, Maximize } from "lucide-react";
-import { useRef, useState, useMemo, useCallback, useEffect } from "react";
-var semanticClassNames = { root: "rr-video-root", player: "rr-video-player", element: "rr-video-element", indicator: "rr-video-indicator", controls: "rr-video-controls", button: "rr-video-btn", progress: "rr-video-progress", progressControl: "rr-video-progress-control", progressTrack: "rr-video-progress-track", progressRange: "rr-video-progress-range", progressThumb: "rr-video-progress-thumb", spin: "rr-video-spin", editTrigger: "rr-video-edit-trigger", editPreview: "rr-video-edit-preview", editVideo: "rr-video-edit-video", editOverlay: "rr-video-edit-overlay", editPlaceholder: "rr-video-edit-placeholder", editPanel: "rr-video-edit-panel", editField: "rr-video-edit-field", editFieldIcon: "rr-video-edit-field-icon", editInput: "rr-video-edit-input" };
-var root = "_1x2h1ol0";
-var player = "_1x2h1ol1";
-var element = "_1x2h1ol2";
-var indicator = "_1x2h1ol4";
-var controls = "_1x2h1ol5";
-var button = "_1x2h1ol6";
-var progress = "_1x2h1ol7";
-var progressControl = "_1x2h1ol8";
-var progressTrack = "_1x2h1ol9";
-var progressRange = "_1x2h1ola";
-var progressThumb = "_1x2h1olb";
-var spin = "_1x2h1old";
-var editTrigger = "_1x2h1ole";
-var editPreview = "_1x2h1olf";
-var editVideo = "_1x2h1olg";
-var editOverlay = "_1x2h1olh";
-var editPlaceholder = "_1x2h1oli";
-var editPanel = "_1x2h1olj";
-var editField = "_1x2h1olk";
-var editFieldIcon = "_1x2h1oll";
-var editInput = "_1x2h1olm";
-const PlayIcon = ({ size = 20 }) => /* @__PURE__ */ jsx(Play, { size });
-const PauseIcon = ({ size = 20 }) => /* @__PURE__ */ jsx(Pause, { size });
-const VolumeIcon = () => /* @__PURE__ */ jsx(Volume2, { size: 20 });
-const VolumeMuteIcon = () => /* @__PURE__ */ jsx(VolumeX, { size: 20 });
-const DownloadIcon = () => /* @__PURE__ */ jsx(Download, { size: 20 });
-const LoadingIcon = () => /* @__PURE__ */ jsx(Loader2, { className: `${spin} ${semanticClassNames.spin}`, size: 20 });
-const FullscreenIcon = () => /* @__PURE__ */ jsx(Maximize, { size: 20 });
-const ExitFullscreenIcon = () => /* @__PURE__ */ jsx(Minimize, { size: 20 });
-const VideoRenderer = ({
-  src,
-  poster,
-  width,
-  height
-}) => {
-  const wrapperRef = useRef(null);
-  const videoRef = useRef(null);
-  const [playing, setPlaying] = useState(false);
-  const [duration, setDuration] = useState(0);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [muted, setMuted] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [indicator$1, setIndicator] = useState(null);
-  const [draggingTime, setDraggingTime] = useState(null);
-  const [isDownloading, setIsDownloading] = useState(false);
-  const dragWasPlayingRef = useRef(false);
-  const indicatorTimerRef = useRef(void 0);
-  const indicatorKeyRef = useRef(0);
-  const aspectRatio = useMemo(() => {
-    if (width && height && width > 0 && height > 0) {
-      return `${width} / ${height}`;
-    }
-    return "16 / 9";
-  }, [height, width]);
-  const showIndicator = useCallback((type) => {
-    indicatorKeyRef.current += 1;
-    setIndicator({ type, key: indicatorKeyRef.current });
-    clearTimeout(indicatorTimerRef.current);
-    indicatorTimerRef.current = setTimeout(() => setIndicator(null), 500);
-  }, []);
-  const play = useCallback(() => {
-    void videoRef.current?.play();
-  }, []);
-  const pause = useCallback(() => {
-    videoRef.current?.pause();
-  }, []);
-  const togglePlay = useCallback(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    if (video.paused) {
-      play();
-      showIndicator("play");
-    } else {
-      pause();
-      showIndicator("pause");
-    }
-  }, [pause, play, showIndicator]);
-  const seekTo = useCallback((time) => {
-    const video = videoRef.current;
-    if (!video) return;
-    const clamped = Math.min(
-      Math.max(0, time),
-      Number.isFinite(video.duration) ? video.duration : time
-    );
-    video.currentTime = clamped;
-    setCurrentTime(clamped);
-  }, []);
-  const toggleMute = useCallback(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    video.muted = !video.muted;
-    setMuted(video.muted);
-  }, []);
-  const toggleFullscreen = useCallback(() => {
-    const wrapper = wrapperRef.current;
-    if (!wrapper) return;
-    if (!document.fullscreenElement) {
-      void wrapper.requestFullscreen();
-    } else {
-      void document.exitFullscreen();
-    }
-  }, []);
-  const downloadingRef = useRef(false);
-  const downloadVideo = useCallback(() => {
-    if (downloadingRef.current) return;
-    downloadingRef.current = true;
-    setIsDownloading(true);
-    const filename = src.split("/").pop() || "video";
-    const fallback = () => {
-      const a = document.createElement("a");
-      a.href = src;
-      a.download = filename;
-      a.rel = "noopener noreferrer";
-      a.click();
-    };
-    fetch(src).then((res) => {
-      if (!res.ok) throw new Error(res.statusText);
-      return res.blob();
-    }).then((blob) => {
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = filename;
-      a.click();
-      setTimeout(() => URL.revokeObjectURL(url), 1e3);
-    }).catch(() => fallback()).finally(() => {
-      downloadingRef.current = false;
-      setIsDownloading(false);
-    });
-  }, [src]);
-  useEffect(() => {
-    const video = videoRef.current;
-    if (!video) return;
-    const onLoadedMetadata = () => {
-      setDuration(Number.isFinite(video.duration) ? video.duration : 0);
-      setMuted(video.muted);
-    };
-    const onDurationChange = () => {
-      setDuration(Number.isFinite(video.duration) ? video.duration : 0);
-    };
-    const onTimeUpdate = () => setCurrentTime(video.currentTime);
-    const onPlay = () => setPlaying(true);
-    const onPause = () => setPlaying(false);
-    const onVolumeChange = () => setMuted(video.muted);
-    video.addEventListener("loadedmetadata", onLoadedMetadata);
-    video.addEventListener("durationchange", onDurationChange);
-    video.addEventListener("timeupdate", onTimeUpdate);
-    video.addEventListener("play", onPlay);
-    video.addEventListener("pause", onPause);
-    video.addEventListener("volumechange", onVolumeChange);
-    return () => {
-      video.removeEventListener("loadedmetadata", onLoadedMetadata);
-      video.removeEventListener("durationchange", onDurationChange);
-      video.removeEventListener("timeupdate", onTimeUpdate);
-      video.removeEventListener("play", onPlay);
-      video.removeEventListener("pause", onPause);
-      video.removeEventListener("volumechange", onVolumeChange);
-    };
-  }, []);
-  useEffect(() => {
-    const handler = () => setIsFullscreen(!!document.fullscreenElement);
-    document.addEventListener("fullscreenchange", handler);
-    return () => document.removeEventListener("fullscreenchange", handler);
-  }, []);
-  useEffect(() => {
-    return () => clearTimeout(indicatorTimerRef.current);
-  }, []);
-  const timelineValue = draggingTime ?? currentTime;
-  return /* @__PURE__ */ jsx("figure", { className: `${root} ${semanticClassNames.root}`, children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `${player} ${semanticClassNames.player}`,
-      ref: wrapperRef,
-      style: { aspectRatio },
-      children: [
-        /* @__PURE__ */ jsx(
-          "video",
-          {
-            playsInline: true,
-            className: `${element} ${semanticClassNames.element}`,
-            poster,
-            preload: "metadata",
-            ref: videoRef,
-            src,
-            onClick: togglePlay,
-            onDoubleClick: toggleFullscreen
-          }
-        ),
-        indicator$1 && /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": true,
-            className: `${indicator} ${semanticClassNames.indicator}`,
-            children: indicator$1.type === "play" ? /* @__PURE__ */ jsx(PlayIcon, { size: 32 }) : /* @__PURE__ */ jsx(PauseIcon, { size: 32 })
-          },
-          indicator$1.key
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `${controls} ${semanticClassNames.controls}`,
-            onClick: (e) => e.stopPropagation(),
-            children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": playing ? "Pause" : "Play",
-                  className: `${button} ${semanticClassNames.button}`,
-                  type: "button",
-                  onClick: togglePlay,
-                  children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Slider.Root,
-                {
-                  className: `${progress} ${semanticClassNames.progress}`,
-                  max: duration || 0,
-                  min: 0,
-                  step: 0.01,
-                  value: timelineValue,
-                  onValueChange: (value) => {
-                    setDraggingTime(value);
-                  },
-                  onValueCommitted: (value) => {
-                    seekTo(value);
-                    setDraggingTime(null);
-                    if (dragWasPlayingRef.current) {
-                      play();
-                    }
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    Slider.Control,
-                    {
-                      className: `${progressControl} ${semanticClassNames.progressControl}`,
-                      onPointerDown: () => {
-                        dragWasPlayingRef.current = playing;
-                        pause();
-                        setDraggingTime(currentTime);
-                      },
-                      children: /* @__PURE__ */ jsxs(
-                        Slider.Track,
-                        {
-                          className: `${progressTrack} ${semanticClassNames.progressTrack}`,
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              Slider.Indicator,
-                              {
-                                className: `${progressRange} ${semanticClassNames.progressRange}`
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              Slider.Thumb,
-                              {
-                                "aria-label": "Playback progress",
-                                className: `${progressThumb} ${semanticClassNames.progressThumb}`
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": muted ? "Unmute" : "Mute",
-                  className: `${button} ${semanticClassNames.button}`,
-                  type: "button",
-                  onClick: toggleMute,
-                  children: muted ? /* @__PURE__ */ jsx(VolumeMuteIcon, {}) : /* @__PURE__ */ jsx(VolumeIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": "Download",
-                  className: `${button} ${semanticClassNames.button}`,
-                  type: "button",
-                  onClick: downloadVideo,
-                  children: isDownloading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : /* @__PURE__ */ jsx(DownloadIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
-                  className: `${button} ${semanticClassNames.button}`,
-                  type: "button",
-                  onClick: toggleFullscreen,
-                  children: isFullscreen ? /* @__PURE__ */ jsx(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  VideoRenderer as V,
-  editVideo as a,
-  editOverlay as b,
-  editPlaceholder as c,
-  editTrigger as d,
-  editPreview as e,
-  editPanel as f,
-  editField as g,
-  editFieldIcon as h,
-  editInput as i,
-  root as r,
-  semanticClassNames as s
-};