@lightbird/ui 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React10 = require('react');
+var React11 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var SliderPrimitive = require('@radix-ui/react-slider');
@@ -11,6 +11,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var LabelPrimitive = require('@radix-ui/react-label');
+var react = require('@lightbird/core/react');
 var lucideReact = require('lucide-react');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var core$1 = require('@dnd-kit/core');
@@ -20,7 +21,6 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var SelectPrimitive = require('@radix-ui/react-select');
 var core = require('@lightbird/core');
 var DialogPrimitive = require('@radix-ui/react-dialog');
-var react = require('@lightbird/core/react');
 var reactSdk = require('@openfeature/react-sdk');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var ToastPrimitives = require('@radix-ui/react-toast');
@@ -43,7 +43,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
+var React11__namespace = /*#__PURE__*/_interopNamespace(React11);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
@@ -58,7 +58,7 @@ var ToastPrimitives__namespace = /*#__PURE__*/_interopNamespace(ToastPrimitives)
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-var Slider = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var Slider = React11__namespace.forwardRef(({ className, trackClassName, rangeClassName, thumbClassName, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SliderPrimitive__namespace.Root,
   {
     ref,
@@ -68,8 +68,33 @@ var Slider = React10__namespace.forwardRef(({ className, ...props }, ref) => /*
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SliderPrimitive__namespace.Track,
+        {
+          className: cn(
+            "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary transition-all duration-150 ease-out",
+            trackClassName
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            SliderPrimitive__namespace.Range,
+            {
+              className: cn(
+                "absolute h-full bg-primary transition-[box-shadow] duration-150",
+                rangeClassName
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SliderPrimitive__namespace.Thumb,
+        {
+          className: cn(
+            "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-[transform,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+            thumbClassName
+          )
+        }
+      )
     ]
   }
 ));
@@ -99,7 +124,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React10__namespace.forwardRef(
+var Button = React11__namespace.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -115,7 +140,7 @@ var Button = React10__namespace.forwardRef(
 Button.displayName = "Button";
 var Popover = PopoverPrimitive__namespace.Root;
 var PopoverTrigger = PopoverPrimitive__namespace.Trigger;
-var PopoverContent = React10__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+var PopoverContent = React11__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
   PopoverPrimitive__namespace.Content,
   {
     ref,
@@ -132,7 +157,7 @@ PopoverContent.displayName = PopoverPrimitive__namespace.Content.displayName;
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var Tooltip = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
-var TooltipContent = React10__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var TooltipContent = React11__namespace.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TooltipPrimitive__namespace.Content,
   {
     ref,
@@ -148,7 +173,7 @@ TooltipContent.displayName = TooltipPrimitive__namespace.Content.displayName;
 var labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Label = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   LabelPrimitive__namespace.Root,
   {
     ref,
@@ -157,7 +182,164 @@ var Label = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 Label.displayName = LabelPrimitive__namespace.Root.displayName;
-var RadioGroup = React10__namespace.forwardRef(({ className, ...props }, ref) => {
+var formatTime = (time) => {
+  if (isNaN(time)) return "00:00";
+  const date = /* @__PURE__ */ new Date(0);
+  date.setSeconds(time);
+  const timeString = date.toISOString().substr(11, 8);
+  return timeString.startsWith("00:") ? timeString.substr(3) : timeString;
+};
+var SeekBar = React11__namespace.default.memo(function SeekBar2({
+  progress,
+  duration,
+  isPlaying,
+  onSeek,
+  videoRef,
+  chapters = [],
+  abLoop = { pointA: null, pointB: null, isLooping: false },
+  onSeekHover,
+  seekPreviewThumbnail = null
+}) {
+  const noopRef = React11.useRef(null);
+  const smooth = react.useSmoothProgress(videoRef ?? noopRef, {
+    isPlaying: !!videoRef && isPlaying,
+    fallback: progress
+  });
+  const displayProgress = videoRef ? smooth : progress;
+  const [seekHover, setSeekHover] = React11.useState(null);
+  const [isHovering, setIsHovering] = React11.useState(false);
+  const [isScrubbing, setIsScrubbing] = React11.useState(false);
+  const active = isHovering || isScrubbing;
+  const handleSeekHover = (e) => {
+    if (duration <= 0) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    if (rect.width <= 0) return;
+    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    const time = ratio * duration;
+    setSeekHover({ ratio, time });
+    onSeekHover?.(time);
+  };
+  const handleSeekLeave = () => {
+    setSeekHover(null);
+    setIsHovering(false);
+    onSeekHover?.(null);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "relative w-full py-2",
+      "data-testid": "seek-bar",
+      "data-scrubbing": isScrubbing || void 0,
+      "data-hover": isHovering || void 0,
+      onMouseEnter: () => setIsHovering(true),
+      onMouseMove: handleSeekHover,
+      onMouseLeave: handleSeekLeave,
+      children: [
+        seekHover && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-testid": "seek-preview",
+            className: "absolute bottom-full mb-3 -translate-x-1/2 pointer-events-none flex flex-col items-center z-20",
+            style: { left: `${seekHover.ratio * 100}%` },
+            children: [
+              seekPreviewThumbnail ? /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: seekPreviewThumbnail,
+                  alt: "",
+                  className: "w-40 h-[90px] rounded border border-white/20 bg-black object-cover shadow-lg"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-[90px] rounded border border-white/20 bg-black/80 shadow-lg" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 rounded bg-black/80 px-1.5 py-0.5 font-mono text-xs text-white", children: formatTime(seekHover.time) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Slider,
+          {
+            value: [displayProgress],
+            max: duration || 0,
+            step: 0.05,
+            onValueChange: ([val]) => onSeek(val),
+            onPointerDown: () => setIsScrubbing(true),
+            onPointerUp: () => setIsScrubbing(false),
+            onLostPointerCapture: () => setIsScrubbing(false),
+            className: "w-full",
+            trackClassName: cn(
+              "rounded-none transition-all duration-150 ease-out",
+              active ? "h-1.5" : "h-[3px]"
+            ),
+            rangeClassName: cn(
+              "rounded-none",
+              active && "shadow-[0_0_6px_hsl(var(--primary)/0.6)]"
+            ),
+            thumbClassName: cn(
+              "h-3 w-3 border transition-[transform,opacity] duration-150",
+              active ? "scale-100 opacity-100" : "scale-0 opacity-0",
+              isScrubbing && "scale-125"
+            )
+          }
+        ),
+        chapters.length > 0 && duration > 0 && chapters.slice(1).map((chapter) => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              "data-testid": "chapter-tick",
+              style: {
+                position: "absolute",
+                left: `${chapter.startTime / duration * 100}%`,
+                top: "50%",
+                width: "2px",
+                height: active ? "10px" : "6px",
+                background: "white",
+                opacity: 0.55,
+                pointerEvents: "none",
+                transform: "translate(-1px, -50%)",
+                transition: "height 150ms ease-out"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+            chapter.title,
+            " \u2014 ",
+            formatTime(chapter.startTime)
+          ] }) })
+        ] }, chapter.index)),
+        duration > 0 && abLoop.pointA !== null && abLoop.pointB !== null && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-testid": "ab-loop-region",
+            className: cn(
+              "pointer-events-none absolute top-1/2 -translate-y-1/2 bg-primary/40 transition-[height] duration-150",
+              active ? "h-1.5" : "h-[3px]"
+            ),
+            style: {
+              left: `${abLoop.pointA / duration * 100}%`,
+              width: `${(abLoop.pointB - abLoop.pointA) / duration * 100}%`
+            }
+          }
+        ),
+        duration > 0 && abLoop.pointA !== null && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-testid": "ab-marker-a",
+            className: "pointer-events-none absolute top-1/2 -translate-y-1/2 h-4 w-0.5 -translate-x-1/2 bg-primary",
+            style: { left: `${abLoop.pointA / duration * 100}%` }
+          }
+        ),
+        duration > 0 && abLoop.pointB !== null && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-testid": "ab-marker-b",
+            className: "pointer-events-none absolute top-1/2 -translate-y-1/2 h-4 w-0.5 -translate-x-1/2 bg-primary",
+            style: { left: `${abLoop.pointB / duration * 100}%` }
+          }
+        )
+      ]
+    }
+  );
+});
+var RadioGroup = React11__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Root,
     {
@@ -168,7 +350,7 @@ var RadioGroup = React10__namespace.forwardRef(({ className, ...props }, ref) =>
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive__namespace.Root.displayName;
-var RadioGroupItem = React10__namespace.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React11__namespace.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     RadioGroupPrimitive__namespace.Item,
     {
@@ -183,14 +365,14 @@ var RadioGroupItem = React10__namespace.forwardRef(({ className, ...props }, ref
   );
 });
 RadioGroupItem.displayName = RadioGroupPrimitive__namespace.Item.displayName;
-var formatTime = (time) => {
+var formatTime2 = (time) => {
   if (isNaN(time)) return "00:00";
   const date = /* @__PURE__ */ new Date(0);
   date.setSeconds(time);
   const timeString = date.toISOString().substr(11, 8);
   return timeString.startsWith("00:") ? timeString.substr(3) : timeString;
 };
-var PlayerControls = React10__namespace.default.memo(function PlayerControls2({
+var PlayerControls = React11__namespace.default.memo(function PlayerControls2({
   isPlaying,
   progress,
   duration,
@@ -234,355 +416,260 @@ var PlayerControls = React10__namespace.default.memo(function PlayerControls2({
   onSeekHover,
   seekPreviewThumbnail = null,
   abLoop = { pointA: null, pointB: null, isLooping: false },
-  onABLoopCycle
+  onABLoopCycle,
+  videoRef,
+  isDisabled = false
 }) {
-  const formattedProgress = React10.useMemo(() => formatTime(progress), [progress]);
-  const formattedDuration = React10.useMemo(() => formatTime(duration), [duration]);
-  const [chaptersMenuOpen, setChaptersMenuOpen] = React10.useState(false);
-  const [seekHover, setSeekHover] = React10.useState(null);
-  const handleSeekHover = (e) => {
-    if (duration <= 0) return;
-    const rect = e.currentTarget.getBoundingClientRect();
-    if (rect.width <= 0) return;
-    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-    const time = ratio * duration;
-    setSeekHover({ ratio, time });
-    onSeekHover?.(time);
-  };
-  const handleSeekLeave = () => {
-    setSeekHover(null);
-    onSeekHover?.(null);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-in-out flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "relative w-full",
-        "data-testid": "seek-bar",
-        onMouseMove: handleSeekHover,
-        onMouseLeave: handleSeekLeave,
-        children: [
-          seekHover && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              "data-testid": "seek-preview",
-              className: "absolute bottom-full mb-3 -translate-x-1/2 pointer-events-none flex flex-col items-center z-20",
-              style: { left: `${seekHover.ratio * 100}%` },
-              children: [
-                seekPreviewThumbnail ? /* @__PURE__ */ jsxRuntime.jsx(
-                  "img",
-                  {
-                    src: seekPreviewThumbnail,
-                    alt: "",
-                    className: "w-40 h-[90px] rounded border border-white/20 bg-black object-cover shadow-lg"
-                  }
-                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-40 h-[90px] rounded border border-white/20 bg-black/80 shadow-lg" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 rounded bg-black/80 px-1.5 py-0.5 font-mono text-xs text-white", children: formatTime(seekHover.time) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Slider,
-            {
-              value: [progress],
-              max: duration,
-              step: 1,
-              onValueChange: ([val]) => onSeek(val),
-              className: "w-full h-2"
-            }
-          ),
-          chapters.length > 0 && duration > 0 && chapters.slice(1).map((chapter) => /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                "data-testid": "chapter-tick",
-                style: {
-                  position: "absolute",
-                  left: `${chapter.startTime / duration * 100}%`,
-                  top: 0,
-                  width: "2px",
-                  height: "100%",
-                  background: "white",
-                  opacity: 0.5,
-                  pointerEvents: "none",
-                  transform: "translateX(-1px)"
-                }
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-              chapter.title,
-              " \u2014 ",
-              formatTime(chapter.startTime)
-            ] }) })
-          ] }, chapter.index)),
-          duration > 0 && abLoop.pointA !== null && abLoop.pointB !== null && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "data-testid": "ab-loop-region",
-              className: "pointer-events-none absolute top-0 h-full bg-primary/30",
-              style: {
-                left: `${abLoop.pointA / duration * 100}%`,
-                width: `${(abLoop.pointB - abLoop.pointA) / duration * 100}%`
-              }
-            }
-          ),
-          duration > 0 && abLoop.pointA !== null && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "data-testid": "ab-marker-a",
-              className: "pointer-events-none absolute top-0 h-full w-0.5 -translate-x-1/2 bg-primary",
-              style: { left: `${abLoop.pointA / duration * 100}%` }
-            }
-          ),
-          duration > 0 && abLoop.pointB !== null && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              "data-testid": "ab-marker-b",
-              className: "pointer-events-none absolute top-0 h-full w-0.5 -translate-x-1/2 bg-primary",
-              style: { left: `${abLoop.pointB / duration * 100}%` }
-            }
-          )
-        ]
-      }
-    ),
-    currentChapter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: currentChapter.title }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-white", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onPrevious, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SkipBack, {}) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Previous (N)" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onPlayPause, children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, {}) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-            isPlaying ? "Pause" : "Play",
-            " (Space)"
-          ] }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onNext, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SkipForward, {}) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Next (P)" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onMuteToggle, children: isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, {}) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Mute (M)" }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [isMuted ? 0 : volume], max: 1, step: 0.05, onValueChange: ([val]) => onVolumeChange(val), className: "w-24" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-sm", children: [
-          formattedProgress,
-          " / ",
-          formattedDuration
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: () => onFrameStep("backward"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Rewind, { size: 18 }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Frame Backward" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: () => onFrameStep("forward"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FastForward, { size: 18 }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Frame Forward" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", className: "font-mono w-16", children: [
-            playbackRate,
-            "x"
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-40", children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroup, { value: String(playbackRate), onValueChange: (val) => onPlaybackRateChange(Number(val)), children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4].map((rate) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: String(rate), id: `rate-${rate}` }),
-            /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: `rate-${rate}`, children: [
-              rate,
-              "x"
-            ] })
-          ] }, rate)) }) })
-        ] }),
-        audioTracks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "icon", className: "relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AudioLines, {}),
-            tracksLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "absolute top-0 right-0 h-2.5 w-2.5 animate-spin text-primary" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-48 overflow-y-auto overscroll-contain pr-1", children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroup, { value: activeAudioTrack, onValueChange: onAudioTrackChange, children: audioTracks.map((track) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: track.id, id: `audio-${track.id}` }),
-            /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `audio-${track.id}`, children: track.name })
-          ] }, track.id)) }) }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "icon", className: "relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Subtitles, {}),
-            tracksLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "absolute top-0 right-0 h-2.5 w-2.5 animate-spin text-primary" }) : activeSubtitle !== "-1" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-0 right-0 block h-2 w-2 rounded-full bg-primary ring-2 ring-background" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium", children: "Subtitles" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                Button,
+  const formattedProgress = React11.useMemo(() => formatTime2(progress), [progress]);
+  const formattedDuration = React11.useMemo(() => formatTime2(duration), [duration]);
+  const [chaptersMenuOpen, setChaptersMenuOpen] = React11.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-disabled": isDisabled || void 0,
+      className: cn(
+        "absolute bottom-0 left-0 right-0 px-4 pb-3 pt-10 flex flex-col gap-1.5",
+        "bg-gradient-to-t from-black/80 via-black/40 to-transparent transition-opacity duration-300 ease-in-out",
+        isDisabled ? "opacity-60 pointer-events-none" : "opacity-0 group-hover:opacity-100"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SeekBar,
+          {
+            progress,
+            duration,
+            isPlaying,
+            onSeek,
+            videoRef,
+            chapters,
+            abLoop,
+            onSeekHover,
+            seekPreviewThumbnail
+          }
+        ),
+        currentChapter && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground -mt-0.5", children: currentChapter.title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between text-white", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onPrevious, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SkipBack, {}) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Previous (N)" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onPlayPause, children: isPlaying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pause, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, {}) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                isPlaying ? "Pause" : "Play",
+                " (Space)"
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onNext, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SkipForward, {}) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Next (P)" }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ml-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onMuteToggle, children: isMuted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.VolumeX, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Volume2, {}) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Mute (M)" }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Slider,
                 {
-                  variant: "outline",
-                  size: "sm",
-                  onClick: onSubtitleUpload,
-                  className: "h-7 px-2",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3 w-3 mr-1" }),
-                    "Add"
-                  ]
+                  value: [isMuted ? 0 : volume],
+                  max: 1,
+                  step: 0.05,
+                  onValueChange: ([val]) => onVolumeChange(val),
+                  "aria-label": "Volume",
+                  className: "w-24",
+                  trackClassName: "h-[3px]",
+                  thumbClassName: "h-3 w-3 border"
                 }
               )
             ] }),
-            subtitles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-48 overflow-y-auto overscroll-contain pr-1", children: /* @__PURE__ */ jsxRuntime.jsxs(RadioGroup, { value: activeSubtitle, onValueChange: onSubtitleChange, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "-1", id: "sub-off" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "sub-off", children: "Off" })
-              ] }),
-              subtitles.map((sub) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between space-x-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 flex-1", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: sub.id, id: `sub-${sub.id}` }),
-                  /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `sub-${sub.id}`, className: "truncate", children: sub.name })
-                ] }),
-                sub.type === "external" && onSubtitleRemove && /* @__PURE__ */ jsxRuntime.jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "sm",
-                    onClick: () => onSubtitleRemove(sub.id),
-                    className: "h-6 w-6 p-0",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" })
-                  }
-                )
-              ] }, sub.id))
-            ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground text-center py-2", children: "No subtitles available" })
-          ] }) })
-        ] }),
-        chapters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: chaptersMenuOpen, onOpenChange: setChaptersMenuOpen, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Chapters", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "h-4 w-4" }) }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Chapters" }) })
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono text-xs tabular-nums ml-2 text-white/90", children: [
+              formattedProgress,
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-white/50", children: [
+                "/ ",
+                formattedDuration
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-72 p-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col max-h-64 overflow-y-auto", children: chapters.map((chapter) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              className: cn(
-                "flex items-center justify-between px-4 py-2 text-sm hover:bg-accent transition-colors text-left",
-                currentChapter?.index === chapter.index && "bg-accent font-medium"
-              ),
-              onClick: () => {
-                onGoToChapter?.(chapter.index);
-                setChaptersMenuOpen(false);
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: chapter.title }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-4 font-mono text-xs text-muted-foreground shrink-0", children: formatTime(chapter.startTime) })
-              ]
-            },
-            chapter.index
-          )) }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {}) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { className: "w-64 space-y-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
-                "Brightness: ",
-                filters.brightness,
-                "%"
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            audioTracks.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "icon", className: "relative", "aria-label": "Audio track", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AudioLines, {}),
+                  tracksLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "absolute top-0 right-0 h-2.5 w-2.5 animate-spin text-primary" })
+                ] }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Audio track" }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [filters.brightness], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, brightness: val }) })
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-56", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-48 overflow-y-auto overscroll-contain pr-1", children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroup, { value: activeAudioTrack, onValueChange: onAudioTrackChange, children: audioTracks.map((track) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: track.id, id: `audio-${track.id}` }),
+                /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `audio-${track.id}`, children: track.name })
+              ] }, track.id)) }) }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
-                "Contrast: ",
-                filters.contrast,
-                "%"
+            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", size: "icon", className: "relative", "aria-label": "Subtitles", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Subtitles, {}),
+                  tracksLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "absolute top-0 right-0 h-2.5 w-2.5 animate-spin text-primary" }) : activeSubtitle !== "-1" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-0 right-0 block h-2 w-2 rounded-full bg-primary ring-2 ring-background" })
+                ] }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Subtitles" }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [filters.contrast], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, contrast: val }) })
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-64", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-sm font-medium", children: "Subtitles" }),
+                  onSubtitleUpload && /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "sm", onClick: onSubtitleUpload, className: "h-7 px-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3 w-3 mr-1" }),
+                    "Add"
+                  ] })
+                ] }),
+                subtitles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-48 overflow-y-auto overscroll-contain pr-1", children: /* @__PURE__ */ jsxRuntime.jsxs(RadioGroup, { value: activeSubtitle, onValueChange: onSubtitleChange, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: "-1", id: "sub-off" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: "sub-off", children: "Off" })
+                  ] }),
+                  subtitles.map((sub) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between space-x-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 flex-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: sub.id, id: `sub-${sub.id}` }),
+                      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: `sub-${sub.id}`, className: "truncate", children: sub.name })
+                    ] }),
+                    sub.type === "external" && onSubtitleRemove && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", onClick: () => onSubtitleRemove(sub.id), className: "h-6 w-6 p-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }) })
+                  ] }, sub.id))
+                ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground text-center py-2", children: "No subtitles available" })
+              ] }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
-                "Saturation: ",
-                filters.saturate,
-                "%"
+            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "ghost", className: "font-mono w-12 h-9 px-2 text-xs", children: [
+                  playbackRate,
+                  "x"
+                ] }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Playback speed" }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [filters.saturate], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, saturate: val }) })
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-40", children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroup, { value: String(playbackRate), onValueChange: (val) => onPlaybackRateChange(Number(val)), children: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 4].map((rate) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(RadioGroupItem, { value: String(rate), id: `rate-${rate}` }),
+                /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: `rate-${rate}`, children: [
+                  rate,
+                  "x"
+                ] })
+              ] }, rate)) }) })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
-                "Hue: ",
-                filters.hue,
-                "\xB0"
+            /* @__PURE__ */ jsxRuntime.jsxs(Popover, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Settings", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, {}) }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Settings" }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [filters.hue], max: 360, onValueChange: ([val]) => onFiltersChange({ ...filters, hue: val }) })
+              /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent, { className: "w-72 p-2 space-y-1", align: "end", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+                  pipSupported && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "button",
+                    {
+                      onClick: onTogglePiP,
+                      "aria-label": isPiP ? "Exit picture-in-picture" : "Enter picture-in-picture",
+                      className: cn(
+                        "flex items-center gap-2 w-full px-2 py-1.5 rounded text-sm hover:bg-accent text-left",
+                        isPiP && "text-primary"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PictureInPicture2, { className: "h-4 w-4" }),
+                        "Picture-in-Picture"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onScreenshot, className: "flex items-center gap-2 w-full px-2 py-1.5 rounded text-sm hover:bg-accent text-left", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: "h-4 w-4" }),
+                    "Screenshot"
+                  ] }),
+                  onShowInfo && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onShowInfo, className: "flex items-center gap-2 w-full px-2 py-1.5 rounded text-sm hover:bg-accent text-left", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-4 w-4" }),
+                    "Video information"
+                  ] }),
+                  onOpenShortcuts && /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: onOpenShortcuts, className: "flex items-center gap-2 w-full px-2 py-1.5 rounded text-sm hover:bg-accent text-left", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, { className: "h-4 w-4" }),
+                    "Keyboard shortcuts"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border/40 pt-2 space-y-2 px-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Label, { className: "text-[10px] uppercase tracking-wider text-muted-foreground", children: "Display" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Brightness: ",
+                      filters.brightness,
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [filters.brightness], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, brightness: val }), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Contrast: ",
+                      filters.contrast,
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [filters.contrast], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, contrast: val }), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Saturation: ",
+                      filters.saturate,
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [filters.saturate], max: 200, onValueChange: ([val]) => onFiltersChange({ ...filters, saturate: val }), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Hue: ",
+                      filters.hue,
+                      "\xB0"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [filters.hue], max: 360, onValueChange: ([val]) => onFiltersChange({ ...filters, hue: val }), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(Label, { className: "text-xs text-muted-foreground", children: [
+                      "Zoom: ",
+                      Math.round(zoom * 100),
+                      "%"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [zoom], min: 1, max: 3, step: 0.1, onValueChange: ([val]) => onZoomChange(val), trackClassName: "h-[3px]", thumbClassName: "h-3 w-3 border" })
+                  ] })
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
-                "Zoom: ",
-                Math.round(zoom * 100),
-                "%"
+            chapters.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: chaptersMenuOpen, onOpenChange: setChaptersMenuOpen, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Chapters", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "h-4 w-4" }) }) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Chapters" }) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Slider, { value: [zoom], min: 1, max: 3, step: 0.1, onValueChange: ([val]) => onZoomChange(val) })
+              /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-72 p-0", align: "end", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col max-h-64 overflow-y-auto", children: chapters.map((chapter) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  className: cn(
+                    "flex items-center justify-between px-4 py-2 text-sm hover:bg-accent transition-colors text-left",
+                    currentChapter?.index === chapter.index && "bg-accent font-medium"
+                  ),
+                  onClick: () => {
+                    onGoToChapter?.(chapter.index);
+                    setChaptersMenuOpen(false);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: chapter.title }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-4 font-mono text-xs text-muted-foreground shrink-0", children: formatTime2(chapter.startTime) })
+                  ]
+                },
+                chapter.index
+              )) }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onFullScreenToggle, children: isFullScreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, {}) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Fullscreen (F)" }) })
             ] })
           ] })
-        ] }),
-        onShowInfo && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onShowInfo, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { className: "h-4 w-4" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Video Information" }) })
-        ] }),
-        onOpenShortcuts && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onOpenShortcuts, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, { className: "h-4 w-4" }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Keyboard Shortcuts" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onScreenshot, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, {}) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Screenshot" }) })
-        ] }),
-        onABLoopCycle && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              onClick: onABLoopCycle,
-              "aria-label": "A-B loop",
-              "data-testid": "ab-loop-button",
-              "data-active": abLoop.isLooping,
-              className: cn("font-mono text-xs font-bold", abLoop.isLooping && "text-primary"),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(abLoop.pointA !== null && "text-primary"), children: "A" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-50", children: "-" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(abLoop.pointB !== null && "text-primary"), children: "B" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: abLoop.pointA === null ? "Set loop start (A)" : abLoop.pointB === null ? "Set loop end (B)" : "Clear A-B loop" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onLoopToggle, "data-active": loop, className: "data-[active=true]:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, {}) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Loop" }) })
-        ] }),
-        pipSupported && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-            Button,
-            {
-              variant: "ghost",
-              size: "icon",
-              onClick: onTogglePiP,
-              "aria-label": isPiP ? "Exit picture-in-picture" : "Enter picture-in-picture",
-              className: isPiP ? "text-primary" : "",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PictureInPicture2, {})
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: isPiP ? "Exit picture-in-picture" : "Enter picture-in-picture" }) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "icon", onClick: onFullScreenToggle, children: isFullScreen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize, {}) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Fullscreen (F)" }) })
         ] })
-      ] })
-    ] })
-  ] }) });
+      ]
+    }
+  ) });
 });
 var player_controls_default = PlayerControls;
-var ScrollArea = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var ScrollArea = React11__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   ScrollAreaPrimitive__namespace.Root,
   {
     ref,
@@ -596,23 +683,23 @@ var ScrollArea = React10__namespace.forwardRef(({ className, children, ...props
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
-var ScrollBar = React10__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ScrollBar = React11__namespace.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
   {
     ref,
     orientation,
     className: cn(
       "flex touch-none select-none transition-colors",
-      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      orientation === "vertical" && "h-full w-2 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2 flex-col border-t border-t-transparent p-[1px]",
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-muted-foreground/30 hover:bg-muted-foreground/55 active:bg-muted-foreground/75 transition-colors" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
-var Input = React10__namespace.forwardRef(
+var Input = React11__namespace.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
@@ -631,7 +718,7 @@ var Input = React10__namespace.forwardRef(
 Input.displayName = "Input";
 var Select = SelectPrimitive__namespace.Root;
 var SelectValue = SelectPrimitive__namespace.Value;
-var SelectTrigger = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectTrigger = React11__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Trigger,
   {
     ref,
@@ -647,7 +734,7 @@ var SelectTrigger = React10__namespace.forwardRef(({ className, children, ...pro
   }
 ));
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
-var SelectScrollUpButton = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollUpButton = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollUpButton,
   {
     ref,
@@ -660,7 +747,7 @@ var SelectScrollUpButton = React10__namespace.forwardRef(({ className, ...props
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
-var SelectScrollDownButton = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectScrollDownButton = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.ScrollDownButton,
   {
     ref,
@@ -673,7 +760,7 @@ var SelectScrollDownButton = React10__namespace.forwardRef(({ className, ...prop
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
-var SelectContent = React10__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectContent = React11__namespace.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Content,
   {
     ref,
@@ -701,7 +788,7 @@ var SelectContent = React10__namespace.forwardRef(({ className, children, positi
   }
 ) }));
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
-var SelectLabel = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectLabel = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Label,
   {
     ref,
@@ -710,7 +797,7 @@ var SelectLabel = React10__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
-var SelectItem = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+var SelectItem = React11__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
   SelectPrimitive__namespace.Item,
   {
     ref,
@@ -726,7 +813,7 @@ var SelectItem = React10__namespace.forwardRef(({ className, children, ...props
   }
 ));
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
-var SelectSeparator = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var SelectSeparator = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   SelectPrimitive__namespace.Separator,
   {
     ref,
@@ -745,7 +832,7 @@ var NEXT_SIZE = {
   md: "lg",
   lg: "sm"
 };
-function formatTime2(seconds) {
+function formatTime3(seconds) {
   if (!seconds || !isFinite(seconds)) return "";
   const h = Math.floor(seconds / 3600);
   const m = Math.floor(seconds % 3600 / 60);
@@ -774,7 +861,7 @@ function SortablePlaylistItem({ item, index, isActive, downloadReady, onSelect,
     transition,
     opacity: isDragging ? 0.5 : 1
   };
-  const duration = formatTime2(item.duration ?? 0);
+  const duration = formatTime3(item.duration ?? 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -858,14 +945,14 @@ var PlaylistPanel = ({
   onTogglePin,
   onSizeChange
 }) => {
-  const fileInputRef = React10.useRef(null);
-  const folderInputRef = React10.useRef(null);
-  const m3uInputRef = React10.useRef(null);
-  const [streamUrl, setStreamUrl] = React10.useState("");
-  const [magnetUri, setMagnetUri] = React10.useState("");
-  const [showMagnetInput, setShowMagnetInput] = React10.useState(false);
-  const [magnetError, setMagnetError] = React10.useState(null);
-  const [sortKey, setSortKey] = React10.useState("");
+  const fileInputRef = React11.useRef(null);
+  const folderInputRef = React11.useRef(null);
+  const m3uInputRef = React11.useRef(null);
+  const [streamUrl, setStreamUrl] = React11.useState("");
+  const [magnetUri, setMagnetUri] = React11.useState("");
+  const [showMagnetInput, setShowMagnetInput] = React11.useState(false);
+  const [magnetError, setMagnetError] = React11.useState(null);
+  const [sortKey, setSortKey] = React11.useState("");
   const handleStreamUrlSubmit = (e) => {
     e.preventDefault();
     if (streamUrl) {
@@ -928,296 +1015,306 @@ var PlaylistPanel = ({
     });
     onReorder(sorted);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: !isOpen ? (
-    /* ── Collapsed drawer strip ── */
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center w-11 h-full bg-card border-l border-border shrink-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: "h-9 w-9 mt-2 shrink-0",
-            onClick: onToggle,
-            "aria-label": "Expand Playlist",
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "left", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Expand Playlist" }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: "text-[10px] font-semibold text-muted-foreground tracking-widest uppercase select-none",
-          style: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
-          children: "Playlist"
-        }
-      ) }),
-      playlist.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 text-[10px] font-bold text-primary bg-primary/10 rounded-full w-6 h-6 flex items-center justify-center shrink-0", children: playlist.length > 99 ? "99+" : playlist.length })
-    ] })
-  ) : (
-    /* ── Full panel ── */
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-full flex flex-col bg-card border-l border-border shrink-0 transition-[width] duration-200", SIZE_WIDTHS[size]), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border shrink-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListVideo, { className: "h-4 w-4 text-primary shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm truncate", children: "Playlist" }),
-          playlist.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground bg-muted rounded-full px-1.5 py-0.5 shrink-0 leading-none", children: playlist.length })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [
-          playlist.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-7 w-7",
-                onClick: () => core.exportPlaylist(playlist),
-                "aria-label": "Export Playlist",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Export as M3U8" }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-7 w-7",
-                onClick: () => m3uInputRef.current?.click(),
-                "aria-label": "Import Playlist",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Import M3U/M3U8" }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: cn("h-7 w-7", isPinned && "text-primary bg-primary/10"),
-                onClick: onTogglePin,
-                "aria-label": isPinned ? "Unpin Playlist" : "Pin Playlist",
-                children: isPinned ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PinOff, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: isPinned ? "Unpin (allow auto-hide on play)" : "Pin (keep open while playing)" }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "icon",
-                className: "h-7 w-7",
-                onClick: () => onSizeChange(NEXT_SIZE[size]),
-                "aria-label": "Resize Playlist",
-                children: size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: size === "lg" ? "Make smaller" : "Make larger" }) })
-          ] }),
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "h-full flex flex-col bg-card border-l border-border shrink-0 overflow-hidden",
+        "transition-[width] duration-300 ease-in-out motion-reduce:transition-none",
+        isOpen ? SIZE_WIDTHS[size] : "w-11"
+      ),
+      children: !isOpen ? (
+        /* ── Collapsed drawer strip ── */
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center w-11 h-full shrink-0", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
               Button,
               {
                 variant: "ghost",
                 size: "icon",
-                className: "h-7 w-7",
+                className: "h-9 w-9 mt-2 shrink-0",
                 onClick: onToggle,
-                "aria-label": "Collapse Playlist",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+                "aria-label": "Expand Playlist",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-4 w-4" })
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Collapse" }) })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-2 border-b border-border shrink-0", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => fileInputRef.current?.click(), className: "flex-1 h-8 text-xs", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FilePlus, { className: "mr-1.5 h-3.5 w-3.5" }),
-            " Add Files"
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "left", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Expand Playlist" }) })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
-              {
-                variant: "outline",
-                size: "icon",
-                className: "h-8 w-8 shrink-0",
-                onClick: () => folderInputRef.current?.click(),
-                "aria-label": "Open Folder",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "h-3.5 w-3.5" })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Open Folder" }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "file",
-            ref: fileInputRef,
-            className: "hidden",
-            multiple: true,
-            accept: "video/*,.mkv,.avi,.mov,.wmv,.flv,.webm,.vtt,.srt",
-            onChange: (e) => e.target.files && onFilesAdded(e.target.files)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "file",
-            ref: folderInputRef,
-            className: "hidden",
-            multiple: true,
-            accept: "video/*",
-            webkitdirectory: "",
-            onChange: handleFolderSelect
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "file",
-            ref: m3uInputRef,
-            className: "hidden",
-            accept: ".m3u,.m3u8",
-            onChange: handleM3USelect
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleStreamUrlSubmit, className: "flex gap-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            Input,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
-              type: "url",
-              placeholder: "Enter stream URL",
-              value: streamUrl,
-              onChange: (e) => setStreamUrl(e.target.value),
-              className: "h-8 text-xs"
+              className: "text-[10px] font-semibold text-muted-foreground tracking-widest uppercase select-none",
+              style: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
+              children: "Playlist"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "icon", variant: "secondary", className: "h-8 w-8 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-3.5 w-3.5" }) }),
-          showMagnet && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
+          ) }),
+          playlist.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-3 text-[10px] font-bold text-primary bg-primary/10 rounded-full w-6 h-6 flex items-center justify-center shrink-0", children: playlist.length > 99 ? "99+" : playlist.length })
+        ] })
+      ) : (
+        /* ── Full panel ── */
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("h-full flex flex-col shrink-0 transition-[width] duration-200", SIZE_WIDTHS[size]), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListVideo, { className: "h-4 w-4 text-primary shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-sm truncate", children: "Playlist" }),
+              playlist.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-bold text-muted-foreground bg-muted rounded-full px-1.5 py-0.5 shrink-0 leading-none", children: playlist.length })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 shrink-0", children: [
+              playlist.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    onClick: () => core.exportPlaylist(playlist),
+                    "aria-label": "Export Playlist",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Export as M3U8" }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    onClick: () => m3uInputRef.current?.click(),
+                    "aria-label": "Import Playlist",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Import M3U/M3U8" }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: cn("h-7 w-7", isPinned && "text-primary bg-primary/10"),
+                    onClick: onTogglePin,
+                    "aria-label": isPinned ? "Unpin Playlist" : "Pin Playlist",
+                    children: isPinned ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PinOff, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: isPinned ? "Unpin (allow auto-hide on play)" : "Pin (keep open while playing)" }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    onClick: () => onSizeChange(NEXT_SIZE[size]),
+                    "aria-label": "Resize Playlist",
+                    children: size === "lg" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minimize2, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: size === "lg" ? "Make smaller" : "Make larger" }) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    onClick: onToggle,
+                    "aria-label": "Collapse Playlist",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Collapse" }) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-2 border-b border-border shrink-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(Button, { onClick: () => fileInputRef.current?.click(), className: "flex-1 h-8 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FilePlus, { className: "mr-1.5 h-3.5 w-3.5" }),
+                " Add Files"
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    size: "icon",
+                    className: "h-8 w-8 shrink-0",
+                    onClick: () => folderInputRef.current?.click(),
+                    "aria-label": "Open Folder",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Open Folder" }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
               {
-                type: "button",
-                size: "icon",
-                variant: showMagnetInput ? "default" : "outline",
-                className: "h-8 w-8 shrink-0",
-                onClick: () => {
-                  setShowMagnetInput((v) => !v);
-                  setMagnetError(null);
-                },
-                "aria-label": "Add magnet link",
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { className: "h-3.5 w-3.5" })
+                type: "file",
+                ref: fileInputRef,
+                className: "hidden",
+                multiple: true,
+                accept: "video/*,.mkv,.avi,.mov,.wmv,.flv,.webm,.vtt,.srt",
+                onChange: (e) => e.target.files && onFilesAdded(e.target.files)
               }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Add Magnet Link" }) })
-          ] })
-        ] }),
-        showMagnet && showMagnetInput && /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleMagnetSubmit, className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              Input,
+              "input",
               {
-                placeholder: "magnet:?xt=urn:btih:\u2026",
-                value: magnetUri,
-                onChange: (e) => {
-                  setMagnetUri(e.target.value);
-                  setMagnetError(null);
-                },
-                className: "h-8 text-xs font-mono",
-                disabled: torrentStatus.status === "loading-metadata"
+                type: "file",
+                ref: folderInputRef,
+                className: "hidden",
+                multiple: true,
+                accept: "video/*",
+                webkitdirectory: "",
+                onChange: handleFolderSelect
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
-              Button,
+              "input",
               {
-                type: "submit",
-                size: "icon",
-                variant: "default",
-                className: "h-8 w-8 shrink-0",
-                disabled: !magnetUri.trim() || torrentStatus.status === "loading-metadata",
-                "aria-label": "Load magnet link",
-                children: torrentStatus.status === "loading-metadata" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "h-3.5 w-3.5" })
+                type: "file",
+                ref: m3uInputRef,
+                className: "hidden",
+                accept: ".m3u,.m3u8",
+                onChange: handleM3USelect
               }
-            )
-          ] }),
-          torrentStatus.status === "loading-metadata" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[11px] text-muted-foreground flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 animate-spin" }),
-            "Fetching torrent info\u2026"
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleStreamUrlSubmit, className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  type: "url",
+                  placeholder: "Enter stream URL",
+                  value: streamUrl,
+                  onChange: (e) => setStreamUrl(e.target.value),
+                  className: "h-8 text-xs"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "icon", variant: "secondary", className: "h-8 w-8 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-3.5 w-3.5" }) }),
+              showMagnet && /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "button",
+                    size: "icon",
+                    variant: showMagnetInput ? "default" : "outline",
+                    className: "h-8 w-8 shrink-0",
+                    onClick: () => {
+                      setShowMagnetInput((v) => !v);
+                      setMagnetError(null);
+                    },
+                    "aria-label": "Add magnet link",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link2, { className: "h-3.5 w-3.5" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Add Magnet Link" }) })
+              ] })
+            ] }),
+            showMagnet && showMagnetInput && /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleMagnetSubmit, className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1.5", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Input,
+                  {
+                    placeholder: "magnet:?xt=urn:btih:\u2026",
+                    value: magnetUri,
+                    onChange: (e) => {
+                      setMagnetUri(e.target.value);
+                      setMagnetError(null);
+                    },
+                    className: "h-8 text-xs font-mono",
+                    disabled: torrentStatus.status === "loading-metadata"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    type: "submit",
+                    size: "icon",
+                    variant: "default",
+                    className: "h-8 w-8 shrink-0",
+                    disabled: !magnetUri.trim() || torrentStatus.status === "loading-metadata",
+                    "aria-label": "Load magnet link",
+                    children: torrentStatus.status === "loading-metadata" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] }),
+              torrentStatus.status === "loading-metadata" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[11px] text-muted-foreground flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "h-3 w-3 animate-spin" }),
+                "Fetching torrent info\u2026"
+              ] }),
+              magnetError && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[11px] text-destructive flex items-center gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3 w-3 shrink-0" }),
+                magnetError
+              ] })
+            ] }),
+            showMagnet && torrentStatus.status === "ready" && (torrentStatus.progress >= 1 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-emerald-500 flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3 w-3 shrink-0" }),
+              "Download ready \u2014 hover a file to save it"
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "bg-emerald-500 h-1 rounded-full transition-all duration-500",
+                  style: { width: `${Math.round(torrentStatus.progress * 100)}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-muted-foreground flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "\u2193 ",
+                  formatBytes(torrentStatus.downloadSpeed),
+                  "/s \xB7 ",
+                  torrentStatus.numPeers,
+                  " peer",
+                  torrentStatus.numPeers !== 1 ? "s" : ""
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  Math.round(torrentStatus.progress * 100),
+                  "%"
+                ] })
+              ] })
+            ] })),
+            playlist.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: sortKey, onValueChange: handleSort, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-7 text-xs", "aria-label": "Sort playlist", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Sort by\u2026" }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "name-asc", children: "Name A\u2013Z" }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "name-desc", children: "Name Z\u2013A" }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "duration-asc", children: "Shortest first" }),
+                /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "duration-desc", children: "Longest first" })
+              ] })
+            ] })
           ] }),
-          magnetError && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[11px] text-destructive flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-3 w-3 shrink-0" }),
-            magnetError
-          ] })
-        ] }),
-        showMagnet && torrentStatus.status === "ready" && (torrentStatus.progress >= 1 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-emerald-500 flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-3 w-3 shrink-0" }),
-          "Download ready \u2014 hover a file to save it"
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-muted rounded-full h-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 space-y-0.5", children: playlist.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-xs text-muted-foreground py-10 px-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your playlist is empty." }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Add files or a stream URL to get started." })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(
+            sortable.SortableContext,
             {
-              className: "bg-emerald-500 h-1 rounded-full transition-all duration-500",
-              style: { width: `${Math.round(torrentStatus.progress * 100)}%` }
+              items: playlist.map((i) => i.id),
+              strategy: sortable.verticalListSortingStrategy,
+              children: playlist.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                SortablePlaylistItem,
+                {
+                  item,
+                  index,
+                  isActive: index === currentVideoIndex,
+                  downloadReady: item.source === "torrent" && torrentStatus.progress >= 1,
+                  onSelect: onSelectVideo,
+                  onRemove: onRemoveItem
+                },
+                item.id
+              ))
             }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-muted-foreground flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              "\u2193 ",
-              formatBytes(torrentStatus.downloadSpeed),
-              "/s \xB7 ",
-              torrentStatus.numPeers,
-              " peer",
-              torrentStatus.numPeers !== 1 ? "s" : ""
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              Math.round(torrentStatus.progress * 100),
-              "%"
-            ] })
-          ] })
-        ] })),
-        playlist.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: sortKey, onValueChange: handleSort, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "h-7 text-xs", "aria-label": "Sort playlist", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Sort by\u2026" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(SelectContent, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "name-asc", children: "Name A\u2013Z" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "name-desc", children: "Name Z\u2013A" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "duration-asc", children: "Shortest first" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "duration-desc", children: "Longest first" })
-          ] })
+          ) }) }) })
         ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 space-y-0.5", children: playlist.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-xs text-muted-foreground py-10 px-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your playlist is empty." }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Add files or a stream URL to get started." })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsx(core$1.DndContext, { collisionDetection: core$1.closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(
-        sortable.SortableContext,
-        {
-          items: playlist.map((i) => i.id),
-          strategy: sortable.verticalListSortingStrategy,
-          children: playlist.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-            SortablePlaylistItem,
-            {
-              item,
-              index,
-              isActive: index === currentVideoIndex,
-              downloadReady: item.source === "torrent" && torrentStatus.progress >= 1,
-              onSelect: onSelectVideo,
-              onRemove: onRemoveItem
-            },
-            item.id
-          ))
-        }
-      ) }) }) })
-    ] })
+      )
+    }
   ) });
 };
 var playlist_panel_default = PlaylistPanel;
@@ -1310,7 +1407,7 @@ function PlayerErrorDisplay({ error, onRetry, onSkip, onDismiss }) {
     ] })
   ] });
 }
-function formatTime3(seconds) {
+function formatTime4(seconds) {
   if (isNaN(seconds) || seconds === 0) return "\u2014";
   const h = Math.floor(seconds / 3600);
   const m = Math.floor(seconds % 3600 / 60);
@@ -1333,7 +1430,7 @@ function VideoInfoPanel({ metadata, onClose }) {
   const rows = [
     ["File", metadata.filename ? metadata.filename.split("/").pop() ?? metadata.filename : "\u2014"],
     ["Size", formatSize(metadata.fileSize)],
-    ["Duration", formatTime3(metadata.duration)],
+    ["Duration", formatTime4(metadata.duration)],
     ["Container", metadata.container || "\u2014"],
     ["Resolution", metadata.width && metadata.height ? `${metadata.width} \xD7 ${metadata.height}` : "\u2014"],
     ["Frame Rate", metadata.frameRate ? `${metadata.frameRate} fps` : "\u2014"],
@@ -1371,7 +1468,7 @@ function VideoInfoPanel({ metadata, onClose }) {
 }
 var Dialog = DialogPrimitive__namespace.Root;
 var DialogPortal = DialogPrimitive__namespace.Portal;
-var DialogOverlay = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogOverlay = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Overlay,
   {
     ref,
@@ -1383,7 +1480,7 @@ var DialogOverlay = React10__namespace.forwardRef(({ className, ...props }, ref)
   }
 ));
 DialogOverlay.displayName = DialogPrimitive__namespace.Overlay.displayName;
-var DialogContent = React10__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
+var DialogContent = React11__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsxs(
     DialogPrimitive__namespace.Content,
@@ -1419,7 +1516,7 @@ var DialogHeader = ({
   }
 );
 DialogHeader.displayName = "DialogHeader";
-var DialogTitle = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogTitle = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Title,
   {
     ref,
@@ -1431,7 +1528,7 @@ var DialogTitle = React10__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DialogTitle.displayName = DialogPrimitive__namespace.Title.displayName;
-var DialogDescription = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var DialogDescription = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   DialogPrimitive__namespace.Description,
   {
     ref,
@@ -1540,8 +1637,8 @@ function toast({ ...props }) {
   };
 }
 function useToast() {
-  const [state, setState] = React10__namespace.useState(memoryState);
-  React10__namespace.useEffect(() => {
+  const [state, setState] = React11__namespace.useState(memoryState);
+  React11__namespace.useEffect(() => {
     listeners.push(setState);
     return () => {
       const index = listeners.indexOf(setState);
@@ -1561,10 +1658,10 @@ function ShortcutSettingsDialog({
   onSave,
   onClose
 }) {
-  const [editing, setEditing] = React10.useState(shortcuts);
-  const [capturing, setCapturing] = React10.useState(null);
+  const [editing, setEditing] = React11.useState(shortcuts);
+  const [capturing, setCapturing] = React11.useState(null);
   const { toast: toast2 } = useToast();
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!capturing) return;
     const handler = (e) => {
       e.preventDefault();
@@ -1643,8 +1740,8 @@ function ShortcutSettingsDialog({
   ] }) });
 }
 function SubtitleOverlay({ videoRef, activeSubtitle }) {
-  const [cueText, setCueText] = React10.useState("");
-  React10.useEffect(() => {
+  const [cueText, setCueText] = React11.useState("");
+  React11.useEffect(() => {
     const video = videoRef.current;
     if (!video || activeSubtitle === "-1") {
       setCueText("");
@@ -1737,7 +1834,7 @@ function SubtitleOverlay({ videoRef, activeSubtitle }) {
 }
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogPortal = AlertDialogPrimitive__namespace.Portal;
-var AlertDialogOverlay = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogOverlay = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Overlay,
   {
     className: cn(
@@ -1749,7 +1846,7 @@ var AlertDialogOverlay = React10__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive__namespace.Overlay.displayName;
-var AlertDialogContent = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsxRuntime.jsx(
     AlertDialogPrimitive__namespace.Content,
@@ -1792,7 +1889,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogTitle = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Title,
   {
     ref,
@@ -1801,7 +1898,7 @@ var AlertDialogTitle = React10__namespace.forwardRef(({ className, ...props }, r
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive__namespace.Title.displayName;
-var AlertDialogDescription = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogDescription = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Description,
   {
     ref,
@@ -1810,7 +1907,7 @@ var AlertDialogDescription = React10__namespace.forwardRef(({ className, ...prop
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive__namespace.Description.displayName;
-var AlertDialogAction = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogAction = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Action,
   {
     ref,
@@ -1819,7 +1916,7 @@ var AlertDialogAction = React10__namespace.forwardRef(({ className, ...props },
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive__namespace.Action.displayName;
-var AlertDialogCancel = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var AlertDialogCancel = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   AlertDialogPrimitive__namespace.Cancel,
   {
     ref,
@@ -1834,16 +1931,15 @@ var AlertDialogCancel = React10__namespace.forwardRef(({ className, ...props },
 AlertDialogCancel.displayName = AlertDialogPrimitive__namespace.Cancel.displayName;
 var MAX_RETRIES = 3;
 var LightBirdPlayer = () => {
-  const videoRef = React10.useRef(null);
-  const containerRef = React10.useRef(null);
-  const canvasRef = React10.useRef(null);
-  const subtitleInputRef = React10.useRef(null);
-  const playerRef = React10.useRef(null);
-  const subtitleFilesMapRef = React10.useRef(/* @__PURE__ */ new Map());
-  const retryCountRef = React10.useRef(0);
-  const retryTimerRef = React10.useRef(null);
-  const streamStallDetectorRef = React10.useRef(null);
-  const isStreamRef = React10.useRef(false);
+  const videoRef = React11.useRef(null);
+  const containerRef = React11.useRef(null);
+  const subtitleInputRef = React11.useRef(null);
+  const playerRef = React11.useRef(null);
+  const subtitleFilesMapRef = React11.useRef(/* @__PURE__ */ new Map());
+  const retryCountRef = React11.useRef(0);
+  const retryTimerRef = React11.useRef(null);
+  const streamStallDetectorRef = React11.useRef(null);
+  const isStreamRef = React11.useRef(false);
   const { toast: toast2 } = useToast();
   const playlist = react.usePlaylist();
   const playback = react.useVideoPlayback(videoRef);
@@ -1871,24 +1967,26 @@ var LightBirdPlayer = () => {
   const { chapters, currentChapter, goToChapter } = react.useChapters(videoRef, playerRef);
   const magnetLinkEnabled = reactSdk.useBooleanFlagValue(core.FLAG_MAGNET_LINK, true);
   const magnet = react.useMagnet();
-  const [disclaimerPendingUri, setDisclaimerPendingUri] = React10.useState(null);
-  const [shortcuts, setShortcuts] = React10.useState(() => core.loadShortcuts());
-  const [showShortcutsHelp, setShowShortcutsHelp] = React10.useState(false);
-  const [showShortcutsDialog, setShowShortcutsDialog] = React10.useState(false);
-  const [showInfo, setShowInfo] = React10.useState(false);
-  const progressEstimatorRef = React10.useRef(null);
-  const [audioTracks, setAudioTracks] = React10.useState([]);
-  const [activeAudioTrack, setActiveAudioTrack] = React10.useState("0");
-  const [isLoading, setIsLoading] = React10.useState(false);
-  const [loadingMessage, setLoadingMessage] = React10.useState("");
-  const [processingProgress, setProcessingProgress] = React10.useState(0);
-  const [processingEta, setProcessingEta] = React10.useState(null);
-  const [processingThroughput, setProcessingThroughput] = React10.useState(null);
-  const [playerError, setPlayerError] = React10.useState(null);
-  const [cancellableProcessing, setCancellableProcessing] = React10.useState(false);
-  const [mediaThumbnail, setMediaThumbnail] = React10.useState(null);
-  const [tracksLoading, setTracksLoading] = React10.useState(false);
-  const shortcutHandlers = React10.useMemo(() => ({
+  const [disclaimerPendingUri, setDisclaimerPendingUri] = React11.useState(null);
+  const [shortcuts, setShortcuts] = React11.useState(() => core.loadShortcuts());
+  const [showShortcutsHelp, setShowShortcutsHelp] = React11.useState(false);
+  const [showShortcutsDialog, setShowShortcutsDialog] = React11.useState(false);
+  const [showInfo, setShowInfo] = React11.useState(false);
+  const progressEstimatorRef = React11.useRef(null);
+  const [audioTracks, setAudioTracks] = React11.useState([]);
+  const [activeAudioTrack, setActiveAudioTrack] = React11.useState("0");
+  const [isLoading, setIsLoading] = React11.useState(false);
+  const [loadingMessage, setLoadingMessage] = React11.useState("");
+  const [processingProgress, setProcessingProgress] = React11.useState(0);
+  const [processingEta, setProcessingEta] = React11.useState(null);
+  const [processingThroughput, setProcessingThroughput] = React11.useState(null);
+  const [playerError, setPlayerError] = React11.useState(null);
+  const [cancellableProcessing, setCancellableProcessing] = React11.useState(false);
+  const [mediaThumbnail, setMediaThumbnail] = React11.useState(null);
+  const [tracksLoading, setTracksLoading] = React11.useState(false);
+  const abLoopCycleRef = React11.useRef(() => {
+  });
+  const shortcutHandlers = React11.useMemo(() => ({
     "play-pause": () => playback.togglePlay(),
     "seek-forward-5": () => {
       const el = videoRef.current;
@@ -1937,9 +2035,13 @@ var LightBirdPlayer = () => {
         const prev = chapters[cur.index - 1];
         if (prev) el.currentTime = prev.startTime;
       }
-    }
+    },
+    "frame-step-forward": () => playback.frameStep("forward"),
+    "frame-step-backward": () => playback.frameStep("backward"),
+    "loop-toggle": () => playback.toggleLoop(),
+    "ab-loop-cycle": () => abLoopCycleRef.current()
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }), [playback.togglePlay, playback.seek, playback.setVolume, playback.toggleMute, fullscreen.toggle, chapters, currentChapter]);
+  }), [playback.togglePlay, playback.seek, playback.setVolume, playback.toggleMute, playback.frameStep, playback.toggleLoop, fullscreen.toggle, chapters, currentChapter]);
   react.useKeyboardShortcuts(shortcuts, shortcutHandlers);
   const stopStallDetection = () => {
     if (streamStallDetectorRef.current) {
@@ -1976,11 +2078,11 @@ var LightBirdPlayer = () => {
       retryTimerRef.current = null;
     }
   };
-  const [playlistOpen, setPlaylistOpen] = React10.useState(true);
-  const [playlistPinned, setPlaylistPinned] = React10.useState(false);
-  const [playlistSize, setPlaylistSize] = React10.useState("md");
-  const wasAutoHiddenRef = React10.useRef(false);
-  const processFile = React10.useCallback(async (file, subtitleFiles = []) => {
+  const [playlistOpen, setPlaylistOpen] = React11.useState(true);
+  const [playlistPinned, setPlaylistPinned] = React11.useState(false);
+  const [playlistSize, setPlaylistSize] = React11.useState("md");
+  const wasAutoHiddenRef = React11.useRef(false);
+  const processFile = React11.useCallback(async (file, subtitleFiles = []) => {
     setIsLoading(true);
     setLoadingMessage("Initializing player...");
     setProcessingProgress(0);
@@ -2056,7 +2158,7 @@ var LightBirdPlayer = () => {
       setProcessingThroughput(null);
     }
   }, [subtitles, toast2]);
-  const handleCancelProcessing = React10.useCallback(() => {
+  const handleCancelProcessing = React11.useCallback(() => {
     playerRef.current?.cancel?.();
     playerRef.current = null;
     setCancellableProcessing(false);
@@ -2064,7 +2166,7 @@ var LightBirdPlayer = () => {
     setLoadingMessage("");
     setProcessingProgress(0);
   }, []);
-  const loadVideo = React10.useCallback((index) => {
+  const loadVideo = React11.useCallback((index) => {
     const item = playlist.playlist[index];
     if (!item) return;
     playlist.selectItem(index);
@@ -2087,14 +2189,14 @@ var LightBirdPlayer = () => {
       processFile(item.file, subs);
     }
   }, [playlist.playlist, playlist.selectItem, subtitles, processFile]);
-  const handleSkipToNext = React10.useCallback(() => {
+  const handleSkipToNext = React11.useCallback(() => {
     setPlayerError(null);
     clearRetryTimer();
     if (playlist.currentIndex !== null && playlist.playlist.length > 1) {
       loadVideo((playlist.currentIndex + 1) % playlist.playlist.length);
     }
   }, [playlist.currentIndex, playlist.playlist.length, loadVideo]);
-  const handleRetry = React10.useCallback(() => {
+  const handleRetry = React11.useCallback(() => {
     setPlayerError(null);
     clearRetryTimer();
     retryCountRef.current = 0;
@@ -2102,11 +2204,11 @@ var LightBirdPlayer = () => {
       videoRef.current.load();
     }
   }, []);
-  const handleDismissError = React10.useCallback(() => {
+  const handleDismissError = React11.useCallback(() => {
     setPlayerError(null);
     clearRetryTimer();
   }, []);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const el = videoRef.current;
     if (!el) return;
     const onError = () => {
@@ -2128,7 +2230,7 @@ var LightBirdPlayer = () => {
     el.addEventListener("error", onError);
     return () => el.removeEventListener("error", onError);
   }, [playlist.currentIndex, playlist.playlist.length]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const el = videoRef.current;
     if (!el) return;
     const onEnded = () => {
@@ -2143,14 +2245,14 @@ var LightBirdPlayer = () => {
     el.addEventListener("ended", onEnded);
     return () => el.removeEventListener("ended", onEnded);
   }, [playback.loop, playlist.currentIndex, playlist.playlist.length, loadVideo]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     return () => {
       playerRef.current?.destroy();
       clearRetryTimer();
       stopStallDetection();
     };
   }, []);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const el = videoRef.current;
     if (!el || !playlist.currentItem) {
       setMediaThumbnail(null);
@@ -2169,7 +2271,7 @@ var LightBirdPlayer = () => {
       el.removeEventListener("loadeddata", onLoadedData);
     };
   }, [playlist.currentItem]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (playback.isPlaying) {
       if (!playlistPinned) {
         setPlaylistOpen((current) => {
@@ -2205,7 +2307,7 @@ var LightBirdPlayer = () => {
       await processFile(validVideoFiles[0], subtitleFiles);
     }
   };
-  const handleFolderFilesAdded = React10.useCallback(
+  const handleFolderFilesAdded = React11.useCallback(
     async (files) => {
       const prevLen = playlist.playlist.length;
       await playlist.addFiles(files);
@@ -2217,16 +2319,16 @@ var LightBirdPlayer = () => {
     },
     [playlist, processFile]
   );
-  const handleRemoveItem = React10.useCallback((index) => {
+  const handleRemoveItem = React11.useCallback((index) => {
     playlist.removeItem(index);
   }, [playlist]);
-  const handleReorder = React10.useCallback(
+  const handleReorder = React11.useCallback(
     (newPlaylist) => {
       playlist.reorderItems(newPlaylist);
     },
     [playlist]
   );
-  const handleImportM3U = React10.useCallback(
+  const handleImportM3U = React11.useCallback(
     (items) => {
       items.forEach((item) => {
         playlist.appendItem({ ...item, id: crypto.randomUUID() });
@@ -2242,7 +2344,7 @@ var LightBirdPlayer = () => {
     },
     [playlist, subtitles]
   );
-  const handleAddStream = React10.useCallback((url, name) => {
+  const handleAddStream = React11.useCallback((url, name) => {
     const newIndex = playlist.playlist.length;
     const newItem = {
       id: crypto.randomUUID(),
@@ -2261,7 +2363,7 @@ var LightBirdPlayer = () => {
       startStallDetection();
     }
   }, [playlist, subtitles]);
-  const handleAddMagnet = React10.useCallback(async (uri) => {
+  const handleAddMagnet = React11.useCallback(async (uri) => {
     if (!core.hasAcceptedDisclaimer()) {
       setDisclaimerPendingUri(uri);
       return false;
@@ -2283,7 +2385,7 @@ var LightBirdPlayer = () => {
     }
     return true;
   }, [magnet, playlist, subtitles, toast2]);
-  const handleDisclaimerAccepted = React10.useCallback(async () => {
+  const handleDisclaimerAccepted = React11.useCallback(async () => {
     core.acceptDisclaimer();
     const uri = disclaimerPendingUri;
     setDisclaimerPendingUri(null);
@@ -2295,7 +2397,7 @@ var LightBirdPlayer = () => {
       }
     }
   }, [disclaimerPendingUri, handleAddMagnet, toast2]);
-  const handleSubtitleChange = React10.useCallback(async (id) => {
+  const handleSubtitleChange = React11.useCallback(async (id) => {
     subtitles.switchSubtitle(id);
     if (playerRef.current) {
       try {
@@ -2305,7 +2407,7 @@ var LightBirdPlayer = () => {
       }
     }
   }, [subtitles]);
-  const handleAudioTrackChange = React10.useCallback(async (id) => {
+  const handleAudioTrackChange = React11.useCallback(async (id) => {
     if (!playerRef.current) return;
     try {
       setIsLoading(true);
@@ -2320,66 +2422,67 @@ var LightBirdPlayer = () => {
       setLoadingMessage("");
     }
   }, [toast2]);
-  const captureScreenshot = React10.useCallback(() => {
+  const captureScreenshot = React11.useCallback(() => {
     const video = videoRef.current;
-    const canvas = canvasRef.current;
-    if (!video || !canvas) return;
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    ctx.filter = video.style.filter;
-    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-    const dataUrl = canvas.toDataURL("image/png");
-    const a = document.createElement("a");
-    a.href = dataUrl;
-    a.download = `lightbird-screenshot-${(/* @__PURE__ */ new Date()).toISOString()}.png`;
-    a.click();
+    if (!video) return;
+    const dataUrl = core.exportVideoFrame(video, { filter: video.style.filter });
+    if (!dataUrl) {
+      toast2({
+        title: "Screenshot failed",
+        description: "The frame could not be captured (the video may be cross-origin protected).",
+        variant: "destructive"
+      });
+      return;
+    }
+    core.downloadDataUrl(dataUrl, core.frameExportFilename("png"));
     toast2({ title: "Screenshot Saved" });
   }, [toast2]);
-  const handleABLoopCycle = React10.useCallback(() => {
+  const handleABLoopCycle = React11.useCallback(() => {
     if (abLoop.pointA === null) abLoop.setPointA();
     else if (abLoop.pointB === null) abLoop.setPointB();
     else abLoop.clear();
   }, [abLoop.pointA, abLoop.pointB, abLoop.setPointA, abLoop.setPointB, abLoop.clear]);
-  const abLoopState = React10.useMemo(
+  React11.useEffect(() => {
+    abLoopCycleRef.current = handleABLoopCycle;
+  }, [handleABLoopCycle]);
+  const abLoopState = React11.useMemo(
     () => ({ pointA: abLoop.pointA, pointB: abLoop.pointB, isLooping: abLoop.isLooping }),
     [abLoop.pointA, abLoop.pointB, abLoop.isLooping]
   );
-  const handleNext = React10.useCallback(() => {
+  const handleNext = React11.useCallback(() => {
     if (playlist.currentIndex !== null && playlist.playlist.length > 1) {
       loadVideo((playlist.currentIndex + 1) % playlist.playlist.length);
     }
   }, [playlist.currentIndex, playlist.playlist.length, loadVideo]);
-  const handlePrevious = React10.useCallback(() => {
+  const handlePrevious = React11.useCallback(() => {
     if (playlist.currentIndex !== null && playlist.playlist.length > 1) {
       loadVideo((playlist.currentIndex - 1 + playlist.playlist.length) % playlist.playlist.length);
     }
   }, [playlist.currentIndex, playlist.playlist.length, loadVideo]);
-  const handleSubtitleUpload = React10.useCallback(() => {
+  const handleSubtitleUpload = React11.useCallback(() => {
     subtitleInputRef.current?.click();
   }, []);
-  const handleSelectVideo = React10.useCallback((index) => {
+  const handleSelectVideo = React11.useCallback((index) => {
     loadVideo(index);
   }, [loadVideo]);
   const handlePlaylistToggle = () => {
     wasAutoHiddenRef.current = false;
     setPlaylistOpen((v) => !v);
   };
-  const handleMediaPlay = React10.useCallback(() => {
+  const handleMediaPlay = React11.useCallback(() => {
     const el = videoRef.current;
     if (el) el.play().catch(() => {
     });
   }, []);
-  const handleMediaPause = React10.useCallback(() => {
+  const handleMediaPause = React11.useCallback(() => {
     const el = videoRef.current;
     if (el) el.pause();
   }, []);
-  const handleMediaSeekForward = React10.useCallback(() => {
+  const handleMediaSeekForward = React11.useCallback(() => {
     const el = videoRef.current;
     if (el) playback.seek(el.currentTime + 10);
   }, [playback.seek]);
-  const handleMediaSeekBackward = React10.useCallback(() => {
+  const handleMediaSeekBackward = React11.useCallback(() => {
     const el = videoRef.current;
     if (el) playback.seek(el.currentTime - 10);
   }, [playback.seek]);
@@ -2410,7 +2513,6 @@ var LightBirdPlayer = () => {
               crossOrigin: "anonymous"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "hidden" }),
           /* @__PURE__ */ jsxRuntime.jsx(SubtitleOverlay, { videoRef, activeSubtitle: subtitles.activeSubtitle }),
           /* @__PURE__ */ jsxRuntime.jsx(
             VideoOverlay,
@@ -2470,9 +2572,11 @@ var LightBirdPlayer = () => {
               )
             }
           ),
-          playlist.currentItem && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(
             player_controls_default,
             {
+              isDisabled: !playlist.currentItem,
+              videoRef,
               isPlaying: playback.isPlaying,
               progress: playback.progress,
               duration: playback.duration,
@@ -2541,9 +2645,17 @@ var LightBirdPlayer = () => {
               }
             }
           ),
-          !playlist.currentItem && !isLoading && !loadingMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center text-muted-foreground", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-2xl font-semibold", children: "LightBird Player" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Add a local file or stream to begin." })
+          !playlist.currentItem && !isLoading && !loadingMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center px-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center text-center max-w-sm", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "flex h-16 w-16 items-center justify-center rounded-full bg-accent/10 ring-1 ring-accent/30",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Film, { className: "h-7 w-7", style: { color: "hsl(var(--accent))" } })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-5 text-lg font-medium text-foreground", children: "No video loaded" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Drop files anywhere, or pick a source from the playlist panel." })
           ] }) })
         ]
       }
@@ -2596,7 +2708,7 @@ var LightBirdPlayer = () => {
   ] });
 };
 var lightbird_player_default = LightBirdPlayer;
-var PlayerErrorBoundary = class extends React10.Component {
+var PlayerErrorBoundary = class extends React11.Component {
   constructor() {
     super(...arguments);
     this.state = { hasError: false };
@@ -2626,7 +2738,7 @@ var PlayerErrorBoundary = class extends React10.Component {
   }
 };
 var ToastProvider = ToastPrimitives__namespace.Provider;
-var ToastViewport = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastViewport = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Viewport,
   {
     ref,
@@ -2652,7 +2764,7 @@ var toastVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Toast = React10__namespace.forwardRef(({ className, variant, ...props }, ref) => {
+var Toast = React11__namespace.forwardRef(({ className, variant, ...props }, ref) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToastPrimitives__namespace.Root,
     {
@@ -2663,7 +2775,7 @@ var Toast = React10__namespace.forwardRef(({ className, variant, ...props }, ref
   );
 });
 Toast.displayName = ToastPrimitives__namespace.Root.displayName;
-var ToastAction = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastAction = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Action,
   {
     ref,
@@ -2675,7 +2787,7 @@ var ToastAction = React10__namespace.forwardRef(({ className, ...props }, ref) =
   }
 ));
 ToastAction.displayName = ToastPrimitives__namespace.Action.displayName;
-var ToastClose = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastClose = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Close,
   {
     ref,
@@ -2689,7 +2801,7 @@ var ToastClose = React10__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ToastClose.displayName = ToastPrimitives__namespace.Close.displayName;
-var ToastTitle = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastTitle = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Title,
   {
     ref,
@@ -2698,7 +2810,7 @@ var ToastTitle = React10__namespace.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ToastTitle.displayName = ToastPrimitives__namespace.Title.displayName;
-var ToastDescription = React10__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var ToastDescription = React11__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   ToastPrimitives__namespace.Description,
   {
     ref,
@@ -2725,7 +2837,7 @@ function Toaster() {
 }
 var started = false;
 function FeatureFlagsProvider({ children }) {
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (started) return;
     started = true;
     core.initFeatureFlags().catch(console.error);