@haklex/rich-renderer-video 0.0.4 → 0.0.5

package/dist/VideoEditRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoEditRenderer.d.ts","sourceRoot":"","sources":["../src/VideoEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAErB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAU7D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}
+{"version":3,"file":"VideoEditRenderer.d.ts","sourceRoot":"","sources":["../src/VideoEditRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAW7D,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAQ1D"}

package/dist/VideoRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoRenderer.d.ts","sourceRoot":"","sources":["../src/VideoRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAA;AAGrB,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAW7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAY1C,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CA8Q3D,CAAA"}
+{"version":3,"file":"VideoRenderer.d.ts","sourceRoot":"","sources":["../src/VideoRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAW7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAmB1C,eAAO,MAAM,aAAa,EAAE,aAAa,CAAC,kBAAkB,CA6R3D,CAAA"}

package/dist/index.mjs

@@ -6,12 +6,43 @@ import { $getNearestNodeFromDOMNode } from "lexical";
 import { Play, Pause, VolumeX, Volume2, Loader2, Download, Minimize, Maximize, Video, ImageIcon, ExternalLink, Trash2 } from "lucide-react";
 import { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import { Slider } from "@base-ui/react/slider";
+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", editActions: "rr-video-edit-actions", editActionButton: "rr-video-edit-action-btn", editActionButtonEnd: "rr-video-edit-action-btn--end" };
+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";
+var editActions = "_1x2h1oln";
+var editActionButton = "_1x2h1olo";
+var editActionButtonEnd = "_1x2h1olp";
 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, { size: 20, className: "rr-video-spin" });
+const LoadingIcon = () => /* @__PURE__ */ jsx(
+  Loader2,
+  {
+    size: 20,
+    className: `${spin} ${semanticClassNames.spin}`
+  }
+);
 const FullscreenIcon = () => /* @__PURE__ */ jsx(Maximize, { size: 20 });
 const ExitFullscreenIcon = () => /* @__PURE__ */ jsx(Minimize, { size: 20 });
 const VideoRenderer = ({
@@ -27,7 +58,7 @@ const VideoRenderer = ({
   const [currentTime, setCurrentTime] = useState(0);
   const [muted, setMuted] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
-  const [indicator, setIndicator] = useState(null);
+  const [indicator$1, setIndicator] = useState(null);
   const [draggingTime, setDraggingTime] = useState(null);
   const [isDownloading, setIsDownloading] = useState(false);
   const dragWasPlayingRef = useRef(false);
@@ -153,105 +184,139 @@ const VideoRenderer = ({
     return () => clearTimeout(indicatorTimerRef.current);
   }, []);
   const timelineValue = draggingTime ?? currentTime;
-  return /* @__PURE__ */ jsx("figure", { className: "rr-video-root", children: /* @__PURE__ */ jsxs("div", { className: "rr-video-player", ref: wrapperRef, style: { aspectRatio }, children: [
-    /* @__PURE__ */ jsx(
-      "video",
-      {
-        ref: videoRef,
-        className: "rr-video-element",
-        src,
-        poster,
-        preload: "metadata",
-        playsInline: true,
-        onClick: togglePlay,
-        onDoubleClick: toggleFullscreen
-      }
-    ),
-    indicator && /* @__PURE__ */ jsx("span", { className: "rr-video-indicator", "aria-hidden": true, children: indicator.type === "play" ? /* @__PURE__ */ jsx(PlayIcon, { size: 32 }) : /* @__PURE__ */ jsx(PauseIcon, { size: 32 }) }, indicator.key),
-    /* @__PURE__ */ jsxs("div", { className: "rr-video-controls", onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "rr-video-btn",
-          "aria-label": playing ? "Pause" : "Play",
-          onClick: togglePlay,
-          children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Slider.Root,
-        {
-          className: "rr-video-progress",
-          min: 0,
-          max: duration || 0,
-          step: 0.01,
-          value: timelineValue,
-          onValueChange: (value) => {
-            setDraggingTime(value);
-          },
-          onValueCommitted: (value) => {
-            seekTo(value);
-            setDraggingTime(null);
-            if (dragWasPlayingRef.current) {
-              play();
-            }
+  return /* @__PURE__ */ jsx("figure", { className: `${root} ${semanticClassNames.root}`, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${player} ${semanticClassNames.player}`,
+      ref: wrapperRef,
+      style: { aspectRatio },
+      children: [
+        /* @__PURE__ */ jsx(
+          "video",
+          {
+            ref: videoRef,
+            className: `${element} ${semanticClassNames.element}`,
+            src,
+            poster,
+            preload: "metadata",
+            playsInline: true,
+            onClick: togglePlay,
+            onDoubleClick: toggleFullscreen
+          }
+        ),
+        indicator$1 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `${indicator} ${semanticClassNames.indicator}`,
+            "aria-hidden": true,
+            children: indicator$1.type === "play" ? /* @__PURE__ */ jsx(PlayIcon, { size: 32 }) : /* @__PURE__ */ jsx(PauseIcon, { size: 32 })
           },
-          children: /* @__PURE__ */ jsx(
-            Slider.Control,
-            {
-              className: "rr-video-progress-control",
-              onPointerDown: () => {
-                dragWasPlayingRef.current = playing;
-                pause();
-                setDraggingTime(currentTime);
-              },
-              children: /* @__PURE__ */ jsxs(Slider.Track, { className: "rr-video-progress-track", children: [
-                /* @__PURE__ */ jsx(Slider.Indicator, { className: "rr-video-progress-range" }),
-                /* @__PURE__ */ jsx(
-                  Slider.Thumb,
-                  {
-                    className: "rr-video-progress-thumb",
-                    "aria-label": "Playback progress"
-                  }
-                )
-              ] })
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "rr-video-btn",
-          "aria-label": muted ? "Unmute" : "Mute",
-          onClick: toggleMute,
-          children: muted ? /* @__PURE__ */ jsx(VolumeMuteIcon, {}) : /* @__PURE__ */ jsx(VolumeIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "rr-video-btn",
-          "aria-label": "Download",
-          onClick: downloadVideo,
-          children: isDownloading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : /* @__PURE__ */ jsx(DownloadIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "rr-video-btn",
-          "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
-          onClick: toggleFullscreen,
-          children: isFullscreen ? /* @__PURE__ */ jsx(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
-        }
-      )
-    ] })
-  ] }) });
+          indicator$1.key
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${controls} ${semanticClassNames.controls}`,
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${button} ${semanticClassNames.button}`,
+                  "aria-label": playing ? "Pause" : "Play",
+                  onClick: togglePlay,
+                  children: playing ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Slider.Root,
+                {
+                  className: `${progress} ${semanticClassNames.progress}`,
+                  min: 0,
+                  max: duration || 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,
+                              {
+                                className: `${progressThumb} ${semanticClassNames.progressThumb}`,
+                                "aria-label": "Playback progress"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${button} ${semanticClassNames.button}`,
+                  "aria-label": muted ? "Unmute" : "Mute",
+                  onClick: toggleMute,
+                  children: muted ? /* @__PURE__ */ jsx(VolumeMuteIcon, {}) : /* @__PURE__ */ jsx(VolumeIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${button} ${semanticClassNames.button}`,
+                  "aria-label": "Download",
+                  onClick: downloadVideo,
+                  children: isDownloading ? /* @__PURE__ */ jsx(LoadingIcon, {}) : /* @__PURE__ */ jsx(DownloadIcon, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: `${button} ${semanticClassNames.button}`,
+                  "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
+                  onClick: toggleFullscreen,
+                  children: isFullscreen ? /* @__PURE__ */ jsx(ExitFullscreenIcon, {}) : /* @__PURE__ */ jsx(FullscreenIcon, {})
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
 };
 function VideoEditRenderer(props) {
   const mode = useRendererMode();
@@ -344,32 +409,56 @@ function VideoEditRendererInner({
         /* @__PURE__ */ jsx(
           PopoverTrigger,
           {
-            render: /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: "rr-video-edit-trigger" }),
-            children: src ? /* @__PURE__ */ jsx("figure", { className: "rr-video-root", children: /* @__PURE__ */ jsxs(
+            render: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: wrapperRef,
+                className: `${editTrigger} ${semanticClassNames.editTrigger}`
+              }
+            ),
+            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}`,
+                          src,
+                          poster,
+                          preload: "metadata"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `${editOverlay} ${semanticClassNames.editOverlay}`,
+                          children: /* @__PURE__ */ jsx(Video, { size: 32 })
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsxs(
               "div",
               {
-                className: "rr-video-edit-preview",
-                style: {
-                  aspectRatio,
-                  backgroundImage: poster ? `url(${poster})` : void 0
-                },
+                className: `${editPlaceholder} ${semanticClassNames.editPlaceholder}`,
                 children: [
-                  /* @__PURE__ */ jsx(
-                    "video",
-                    {
-                      className: "rr-video-edit-video",
-                      src,
-                      poster,
-                      preload: "metadata"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("span", { className: "rr-video-edit-overlay", children: /* @__PURE__ */ jsx(Video, { size: 32 }) })
+                  /* @__PURE__ */ jsx(Video, { size: 24 }),
+                  /* @__PURE__ */ jsx("span", { children: "Click to add video" })
                 ]
               }
-            ) }) : /* @__PURE__ */ jsxs("div", { className: "rr-video-edit-placeholder", children: [
-              /* @__PURE__ */ jsx(Video, { size: 24 }),
-              /* @__PURE__ */ jsx("span", { children: "Click to add video" })
-            ] })
+            )
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -377,64 +466,94 @@ function VideoEditRendererInner({
           {
             side: "bottom",
             sideOffset: 8,
-            className: "rr-video-edit-panel",
+            className: `${editPanel} ${semanticClassNames.editPanel}`,
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "rr-video-edit-field", children: [
-                /* @__PURE__ */ jsx(Video, { className: "rr-video-edit-field-icon", size: 14 }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    ref: srcInputRef,
-                    className: "rr-video-edit-input",
-                    type: "url",
-                    value: editSrc,
-                    onChange: (e) => setEditSrc(e.target.value),
-                    onKeyDown: handleKeyDown,
-                    placeholder: "Video URL"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "rr-video-edit-field", children: [
-                /* @__PURE__ */ jsx(ImageIcon, { className: "rr-video-edit-field-icon", size: 14 }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    className: "rr-video-edit-input",
-                    type: "url",
-                    value: editPoster,
-                    onChange: (e) => setEditPoster(e.target.value),
-                    onBlur: commitChanges,
-                    onKeyDown: handleKeyDown,
-                    placeholder: "Poster URL (optional)"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "rr-video-edit-actions", children: [
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    className: "rr-video-edit-action-btn",
-                    type: "button",
-                    onClick: handleOpen,
-                    children: [
-                      /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
-                      "Open"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    className: "rr-video-edit-action-btn rr-video-edit-action-btn--end",
-                    type: "button",
-                    onClick: handleDelete,
-                    children: [
-                      /* @__PURE__ */ jsx(Trash2, { size: 14 }),
-                      "Remove"
-                    ]
-                  }
-                )
-              ] })
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${editField} ${semanticClassNames.editField}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Video,
+                      {
+                        className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
+                        size: 14
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: srcInputRef,
+                        className: `${editInput} ${semanticClassNames.editInput}`,
+                        type: "url",
+                        value: editSrc,
+                        onChange: (e) => setEditSrc(e.target.value),
+                        onKeyDown: handleKeyDown,
+                        placeholder: "Video URL"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${editField} ${semanticClassNames.editField}`,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      ImageIcon,
+                      {
+                        className: `${editFieldIcon} ${semanticClassNames.editFieldIcon}`,
+                        size: 14
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        className: `${editInput} ${semanticClassNames.editInput}`,
+                        type: "url",
+                        value: editPoster,
+                        onChange: (e) => setEditPoster(e.target.value),
+                        onBlur: commitChanges,
+                        onKeyDown: handleKeyDown,
+                        placeholder: "Poster URL (optional)"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: `${editActions} ${semanticClassNames.editActions}`,
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: `${editActionButton} ${semanticClassNames.editActionButton}`,
+                        type: "button",
+                        onClick: handleOpen,
+                        children: [
+                          /* @__PURE__ */ jsx(ExternalLink, { size: 14 }),
+                          "Open"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: `${editActionButton} ${semanticClassNames.editActionButton} ${editActionButtonEnd} ${semanticClassNames.editActionButtonEnd}`,
+                        type: "button",
+                        onClick: handleDelete,
+                        children: [
+                          /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+                          "Remove"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
             ]
           }
         )

package/dist/rich-renderer-video.css

@@ -1,4 +1,4 @@
-@keyframes _1x2h1ol0 {
+@keyframes _1x2h1ol3 {
   0% {
     opacity: 1;
     transform: scale(1);
@@ -8,7 +8,7 @@
     transform: scale(1.3);
   }
 }
-@keyframes _1x2h1ol1 {
+@keyframes _1x2h1olc {
   from {
     transform: rotate(0deg);
   }
@@ -16,17 +16,17 @@
     transform: rotate(360deg);
   }
 }
-.rr-video-root {
+._1x2h1ol0 {
   margin: 1.25rem 0;
 }
-.rr-video-player {
+._1x2h1ol1 {
   position: relative;
   width: 100%;
   background: #000;
   border-radius: 0.75rem;
   overflow: hidden;
 }
-.rr-video-element {
+._1x2h1ol2 {
   width: 100%;
   height: 100%;
   display: block;
@@ -34,7 +34,7 @@
   background: #000;
   cursor: pointer;
 }
-.rr-video-indicator {
+._1x2h1ol4 {
   position: absolute;
   inset: 0;
   margin: auto;
@@ -47,9 +47,9 @@
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
   pointer-events: none;
-  animation: _1x2h1ol0 0.5s ease forwards;
+  animation: _1x2h1ol3 0.5s ease forwards;
 }
-.rr-video-controls {
+._1x2h1ol5 {
   position: absolute;
   left: 2rem;
   right: 2rem;
@@ -70,11 +70,11 @@
   transform: translateY(4px);
   transition: opacity 0.2s ease, transform 0.2s ease;
 }
-.rr-video-player:hover .rr-video-controls, .rr-video-player:focus-within .rr-video-controls {
+._1x2h1ol1:hover ._1x2h1ol5, ._1x2h1ol1:focus-within ._1x2h1ol5 {
   opacity: 1;
   transform: translateY(0);
 }
-.rr-video-btn {
+._1x2h1ol6 {
   appearance: none;
   border: none;
   background: none;
@@ -88,26 +88,26 @@
   flex-shrink: 0;
   transition: transform 0.15s ease;
 }
-.rr-video-btn:hover {
+._1x2h1ol6:hover {
   transform: scale(1.1);
 }
-.rr-video-btn:active {
+._1x2h1ol6:active {
   transform: scale(0.93);
 }
-.rr-video-btn:focus-visible {
+._1x2h1ol6:focus-visible {
   outline: 2px solid currentColor;
   outline-offset: 2px;
   border-radius: 4px;
 }
-.rr-video-btn:disabled {
+._1x2h1ol6:disabled {
   opacity: 0.5;
   pointer-events: none;
 }
-.rr-video-progress {
+._1x2h1ol7 {
   flex: 1;
   height: 100%;
 }
-.rr-video-progress-control {
+._1x2h1ol8 {
   position: relative;
   display: flex;
   align-items: center;
@@ -116,20 +116,20 @@
   touch-action: none;
   user-select: none;
 }
-.rr-video-progress-track {
+._1x2h1ol9 {
   position: relative;
   flex: 1;
   height: 0.25rem;
   border-radius: 999px;
   background: var(--rc-bg);
 }
-.rr-video-progress-range {
+._1x2h1ola {
   position: absolute;
   height: 100%;
   border-radius: 999px;
   background: color-mix(in srgb, var(--rc-text-secondary) 40%, transparent);
 }
-.rr-video-progress-thumb {
+._1x2h1olb {
   display: block;
   height: 0.75rem;
   width: 3px;
@@ -137,14 +137,14 @@
   border: none;
   background: var(--rc-text-secondary);
 }
-.rr-video-spin {
-  animation: _1x2h1ol1 0.8s linear infinite;
+._1x2h1old {
+  animation: _1x2h1olc 0.8s linear infinite;
 }
-.rr-video-edit-trigger {
+._1x2h1ole {
   display: block;
   cursor: pointer;
 }
-.rr-video-edit-preview {
+._1x2h1olf {
   position: relative;
   width: 100%;
   border-radius: 0.75rem;
@@ -154,14 +154,14 @@
   background-position: center;
   cursor: pointer;
 }
-.rr-video-edit-video {
+._1x2h1olg {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: contain;
   pointer-events: none;
 }
-.rr-video-edit-overlay {
+._1x2h1olh {
   position: absolute;
   inset: 0;
   display: flex;
@@ -171,10 +171,10 @@
   color: #fff;
   transition: background 0.2s;
 }
-.rr-video-edit-trigger:hover .rr-video-edit-overlay {
+._1x2h1ole:hover ._1x2h1olh {
   background: rgba(0, 0, 0, 0.5);
 }
-.rr-video-edit-placeholder {
+._1x2h1oli {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -187,11 +187,11 @@
   cursor: pointer;
   transition: border-color 0.2s, color 0.2s;
 }
-.rr-video-edit-placeholder:hover {
+._1x2h1oli:hover {
   border-color: var(--rc-accent);
   color: var(--rc-text);
 }
-.rr-video-edit-panel {
+._1x2h1olj {
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -200,7 +200,7 @@
   font-size: 13px;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }
-.rr-video-edit-field {
+._1x2h1olk {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -209,11 +209,11 @@
   border-radius: 6px;
   min-width: 0;
 }
-.rr-video-edit-field-icon {
+._1x2h1oll {
   flex-shrink: 0;
   color: var(--rc-text-secondary);
 }
-.rr-video-edit-input {
+._1x2h1olm {
   flex: 1;
   appearance: none;
   border: none;
@@ -224,15 +224,15 @@
   outline: none;
   min-width: 0;
 }
-.rr-video-edit-input::placeholder {
+._1x2h1olm::placeholder {
   color: var(--rc-text-secondary);
 }
-.rr-video-edit-actions {
+._1x2h1oln {
   display: flex;
   align-items: center;
   gap: 4px;
 }
-.rr-video-edit-action-btn {
+._1x2h1olo {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -248,14 +248,14 @@
   transition: color 0.15s ease, background-color 0.15s ease;
   white-space: nowrap;
 }
-.rr-video-edit-action-btn:hover {
+._1x2h1olo:hover {
   background-color: var(--rc-bg-secondary);
 }
-.rr-video-edit-action-btn--end {
+._1x2h1olp {
   margin-left: auto;
 }
 @media (max-width: 768px) {
-  .rr-video-controls {
+  ._1x2h1ol5 {
     left: 0.75rem;
     right: 0.75rem;
     opacity: 1;

package/dist/styles.css.d.ts

@@ -1,2 +1,51 @@
-export {};
+export declare const semanticClassNames: {
+    readonly root: "rr-video-root";
+    readonly player: "rr-video-player";
+    readonly element: "rr-video-element";
+    readonly indicator: "rr-video-indicator";
+    readonly controls: "rr-video-controls";
+    readonly button: "rr-video-btn";
+    readonly progress: "rr-video-progress";
+    readonly progressControl: "rr-video-progress-control";
+    readonly progressTrack: "rr-video-progress-track";
+    readonly progressRange: "rr-video-progress-range";
+    readonly progressThumb: "rr-video-progress-thumb";
+    readonly spin: "rr-video-spin";
+    readonly editTrigger: "rr-video-edit-trigger";
+    readonly editPreview: "rr-video-edit-preview";
+    readonly editVideo: "rr-video-edit-video";
+    readonly editOverlay: "rr-video-edit-overlay";
+    readonly editPlaceholder: "rr-video-edit-placeholder";
+    readonly editPanel: "rr-video-edit-panel";
+    readonly editField: "rr-video-edit-field";
+    readonly editFieldIcon: "rr-video-edit-field-icon";
+    readonly editInput: "rr-video-edit-input";
+    readonly editActions: "rr-video-edit-actions";
+    readonly editActionButton: "rr-video-edit-action-btn";
+    readonly editActionButtonEnd: "rr-video-edit-action-btn--end";
+};
+export declare const root: string;
+export declare const player: string;
+export declare const element: string;
+export declare const indicator: string;
+export declare const controls: string;
+export declare const button: string;
+export declare const progress: string;
+export declare const progressControl: string;
+export declare const progressTrack: string;
+export declare const progressRange: string;
+export declare const progressThumb: string;
+export declare const spin: string;
+export declare const editTrigger: string;
+export declare const editPreview: string;
+export declare const editVideo: string;
+export declare const editOverlay: string;
+export declare const editPlaceholder: string;
+export declare const editPanel: string;
+export declare const editField: string;
+export declare const editFieldIcon: string;
+export declare const editInput: string;
+export declare const editActions: string;
+export declare const editActionButton: string;
+export declare const editActionButtonEnd: string;
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":""}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../src/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBrB,CAAA;AAEV,eAAO,MAAM,IAAI,QAAiC,CAAA;AAElD,eAAO,MAAM,MAAM,QAMjB,CAAA;AAEF,eAAO,MAAM,OAAO,QAOlB,CAAA;AAOF,eAAO,MAAM,SAAS,QAcpB,CAAA;AAEF,eAAO,MAAM,QAAQ,QAoCnB,CAAA;AAEF,eAAO,MAAM,MAAM,QAuBjB,CAAA;AAEF,eAAO,MAAM,QAAQ,QAAqC,CAAA;AAE1D,eAAO,MAAM,eAAe,QAQ1B,CAAA;AAEF,eAAO,MAAM,aAAa,QAMxB,CAAA;AAEF,eAAO,MAAM,aAAa,QAKxB,CAAA;AAEF,eAAO,MAAM,aAAa,QAOxB,CAAA;AAOF,eAAO,MAAM,IAAI,QAEf,CAAA;AAEF,eAAO,MAAM,WAAW,QAGtB,CAAA;AAEF,eAAO,MAAM,WAAW,QAStB,CAAA;AAEF,eAAO,MAAM,SAAS,QAMpB,CAAA;AAEF,eAAO,MAAM,WAAW,QActB,CAAA;AAEF,eAAO,MAAM,eAAe,QAkB1B,CAAA;AAEF,eAAO,MAAM,SAAS,QASpB,CAAA;AAEF,eAAO,MAAM,SAAS,QAQpB,CAAA;AAEF,eAAO,MAAM,aAAa,QAGxB,CAAA;AAEF,eAAO,MAAM,SAAS,QAepB,CAAA;AAEF,eAAO,MAAM,WAAW,QAItB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAoB3B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAAgC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderer-video",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Video player renderer",
   "license": "MIT",
   "type": "module",
@@ -18,9 +18,9 @@
   "dependencies": {
     "@base-ui/react": "^1.1.0",
     "lucide-react": "^0.574.0",
-    "@haklex/rich-editor": "0.0.4",
-    "@haklex/rich-style-token": "0.0.4",
-    "@haklex/rich-editor-ui": "0.0.4"
+    "@haklex/rich-editor": "0.0.5",
+    "@haklex/rich-style-token": "0.0.5",
+    "@haklex/rich-editor-ui": "0.0.5"
   },
   "devDependencies": {
     "@lexical/react": "^0.39.0",