@optifye/dashboard-core 6.9.8 → 6.9.11

package/dist/index.mjs

@@ -7,17 +7,15 @@ import { subDays, format, parseISO, isValid, formatDistanceToNow, isFuture, isTo
 import mixpanel from 'mixpanel-browser';
 import { EventEmitter } from 'events';
 import { createClient, REALTIME_SUBSCRIBE_STATES } from '@supabase/supabase-js';
-import Hls2 from 'hls.js';
+import Hls3, { Events, ErrorTypes } from 'hls.js';
 import useSWR from 'swr';
 import { noop, warning, invariant, progress, secondsToMilliseconds, millisecondsToSeconds, memo as memo$1 } from 'motion-utils';
 import { getValueTransition, hover, press, isPrimaryPointer, GroupPlaybackControls, setDragLock, supportsLinearEasing, attachTimeline, isGenerator, calcGeneratorDuration, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, generateLinearEasing, isBezierDefinition } from 'motion-dom';
-import { Camera, ChevronDown, ChevronUp, Check, Map as Map$1, Video, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, AlertCircle, Loader2, Minus, ArrowDown, ArrowUp, ChevronLeft, ChevronRight, Pause, Play, XCircle, Maximize2, Sparkles, TrendingUp, Settings2, CheckCircle2, RefreshCw, TrendingDown, FolderOpen, Folder, HelpCircle, Sliders, Activity, Layers, Filter, Search, Edit2, AlertTriangle, CheckCircle, Building2, Mail, Users, User, Lock, ArrowRight, Info, Share2, Trophy, Target, Download, Sun, Moon, MousePointer, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, UserPlus, Settings, LifeBuoy, EyeOff, Eye, MoreVertical, UserCog, Zap, Shield, UserCircle } from 'lucide-react';
+import { Camera, ChevronDown, ChevronUp, Check, Map as Map$1, Video, ShieldCheck, Star, Award, ArrowLeft, X, Coffee, Plus, Clock, Calendar, Save, AlertCircle, Loader2, Minus, ArrowDown, ArrowUp, ChevronLeft, ChevronRight, Pause, Play, XCircle, Sparkles, TrendingUp, Settings2, CheckCircle2, RefreshCw, TrendingDown, FolderOpen, Folder, HelpCircle, Sliders, Activity, Layers, Filter, Search, Edit2, AlertTriangle, CheckCircle, Building2, Mail, Users, User, Lock, ArrowRight, Info, Share2, Trophy, Target, Download, Sun, Moon, MousePointer, MessageSquare, Trash2, Menu, Send, Copy, UserCheck, LogOut, Package, UserPlus, Settings, LifeBuoy, EyeOff, Eye, MoreVertical, UserCog, Zap, Shield, UserCircle } from 'lucide-react';
 import { toast } from 'sonner';
 import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Legend, Bar, LabelList, ResponsiveContainer, LineChart as LineChart$1, Line, PieChart, Pie, Cell, ReferenceLine, ComposedChart, Area, ScatterChart, Scatter } from 'recharts';
 import { Slot } from '@radix-ui/react-slot';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import videojs from 'video.js';
-import 'video.js/dist/video-js.css';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
 import { XMarkIcon, ArrowRightIcon, HomeIcon, TrophyIcon, ChartBarIcon, AdjustmentsHorizontalIcon, ClockIcon, UsersIcon, TicketIcon, CubeIcon, SparklesIcon, QuestionMarkCircleIcon, HeartIcon, UserCircleIcon, ExclamationCircleIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, Bars3Icon, CheckCircleIcon, ChatBubbleLeftRightIcon, ArrowLeftIcon, XCircleIcon, InformationCircleIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
@@ -8989,12 +8987,12 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
     const video = videoRef.current;
     if (!video) return;
     isNativeHlsRef.current = video.canPlayType("application/vnd.apple.mpegurl") === "probably";
-    if (Hls2.isSupported() && !isNativeHlsRef.current) {
-      const hls = new Hls2(HLS_CONFIG);
+    if (Hls3.isSupported() && !isNativeHlsRef.current) {
+      const hls = new Hls3(HLS_CONFIG);
       hlsRef.current = hls;
       hls.attachMedia(video);
       hls.loadSource(src);
-      hls.on(Hls2.Events.ERROR, (_, data) => {
+      hls.on(Hls3.Events.ERROR, (_, data) => {
         if (!data.fatal) return;
         console.error("[HLS] Fatal error:", data.type, data.details);
         if (data.response?.code === 404) {
@@ -9002,8 +9000,8 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
           return;
         }
         switch (data.type) {
-          case Hls2.ErrorTypes.NETWORK_ERROR:
-          case Hls2.ErrorTypes.MEDIA_ERROR:
+          case Hls3.ErrorTypes.NETWORK_ERROR:
+          case Hls3.ErrorTypes.MEDIA_ERROR:
             softRestart(`${data.type}: ${data.details}`);
             break;
           default:
@@ -9011,7 +9009,7 @@ function useHlsStream(videoRef, { src, shouldPlay, onFatalError }) {
             break;
         }
       });
-      hls.on(Hls2.Events.MANIFEST_PARSED, () => {
+      hls.on(Hls3.Events.MANIFEST_PARSED, () => {
         if (failedUrls.has(src)) {
           console.log(`[HLS] Stream loaded successfully, resetting failure count for: ${src}`);
           failedUrls.delete(src);
@@ -14054,9 +14052,9 @@ var S3VideoPreloader = class {
         this.processQueue();
       };
       if (url.endsWith(".m3u8")) {
-        import('hls.js').then(({ default: Hls3 }) => {
-          if (Hls3.isSupported()) {
-            const hls = new Hls3({
+        import('hls.js').then(({ default: Hls4 }) => {
+          if (Hls4.isSupported()) {
+            const hls = new Hls4({
               maxBufferLength: 10,
               startFragPrefetch: true,
               lowLatencyMode: false,
@@ -14068,7 +14066,7 @@ var S3VideoPreloader = class {
               hls.destroy();
               cleanup();
             }, 4e3);
-            hls.on(Hls3.Events.BUFFER_APPENDED, () => {
+            hls.on(Hls4.Events.BUFFER_APPENDED, () => {
               window.clearTimeout(timeout);
               hls.destroy();
               cleanup();
@@ -23072,7 +23070,7 @@ var OutputProgressChartComponent = ({
   ];
   const COLORS = ["#00AB45", "#f3f4f6"];
   const percentage = (currentOutput / targetOutput * 100).toFixed(1);
-  return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[200px] sm:max-w-[240px] lg:max-w-[280px] aspect-square", style: { minHeight: "120px", minWidth: "120px" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full aspect-square max-h-full", style: { maxWidth: "min(100%, 280px)", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsx(
       Pie,
       {
@@ -23096,16 +23094,33 @@ var OutputProgressChartComponent = ({
         ))
       }
     ) }) }),
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-800", children: [
-        percentage,
-        "%"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-xs sm:text-sm lg:text-base text-gray-500 mt-1 sm:mt-2", children: [
-        currentOutput,
-        " / ",
-        Math.round(targetOutput)
-      ] })
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "font-bold text-gray-800",
+          style: { fontSize: "clamp(1.25rem, 8cqw, 2.5rem)" },
+          children: [
+            percentage,
+            "%"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: {
+            fontSize: "clamp(0.7rem, 3.5cqw, 1rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.5rem)"
+          },
+          children: [
+            currentOutput,
+            " / ",
+            Math.round(targetOutput)
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -23123,7 +23138,7 @@ var LargeOutputProgressChart = ({
   ];
   const COLORS = ["#00AB45", "#f3f4f6"];
   const percentage = (currentOutput / targetOutput * 100).toFixed(1);
-  return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", style: { minHeight: "100px", minWidth: "100px" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", style: { minHeight: "100px", minWidth: "100px", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsx(
       Pie,
       {
@@ -23147,16 +23162,40 @@ var LargeOutputProgressChart = ({
         ))
       }
     ) }) }),
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-4xl sm:text-5xl font-bold text-gray-900", children: currentOutput }),
-      /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-500", children: [
-        "of ",
-        targetOutput
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-base font-medium text-gray-600 mt-1", children: [
-        percentage,
-        "%"
-      ] })
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "font-bold text-gray-900",
+          style: { fontSize: "clamp(1.5rem, 10cqw, 3rem)" },
+          children: currentOutput
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: { fontSize: "clamp(0.75rem, 3.5cqw, 1rem)" },
+          children: [
+            "of ",
+            targetOutput
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "font-medium text-gray-600",
+          style: {
+            fontSize: "clamp(0.875rem, 4.5cqw, 1.25rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.5rem)"
+          },
+          children: [
+            percentage,
+            "%"
+          ]
+        }
+      )
     ] }) })
   ] }) });
 };
@@ -25250,7 +25289,7 @@ var GaugeChart = ({
   };
   const gaugeColor = getColor();
   const targetAngle = target !== void 0 ? 180 - (target - min) / (max - min) * 180 : null;
-  return /* @__PURE__ */ jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", style: { minHeight: "100px", minWidth: "100px" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: `relative w-full h-full flex flex-col items-center justify-center ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-[280px] aspect-square", style: { minHeight: "100px", minWidth: "100px", containerType: "inline-size" }, children: [
     /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsxs(
       Pie,
       {
@@ -25283,17 +25322,44 @@ var GaugeChart = ({
         children: /* @__PURE__ */ jsx("div", { className: "absolute -top-1 -left-1.5 w-3 h-3 bg-gray-800 rounded-full" })
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-3xl font-bold text-gray-800", children: [
-        value.toFixed(unit === "%" ? 1 : 0),
-        unit
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600 mt-1 font-medium", children: label }),
-      target !== void 0 && /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 mt-1", children: [
-        "Target: ",
-        target,
-        unit
-      ] })
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", style: { width: "100%", padding: "0 10%" }, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "font-bold text-gray-800",
+          style: { fontSize: "clamp(1.25rem, 8cqw, 2rem)" },
+          children: [
+            value.toFixed(unit === "%" ? 1 : 0),
+            unit
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "text-gray-600 font-medium",
+          style: {
+            fontSize: "clamp(0.75rem, 3.5cqw, 1rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.25rem)"
+          },
+          children: label
+        }
+      ),
+      target !== void 0 && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "text-gray-500",
+          style: {
+            fontSize: "clamp(0.7rem, 3cqw, 0.875rem)",
+            marginTop: "clamp(0.125rem, 1cqw, 0.25rem)"
+          },
+          children: [
+            "Target: ",
+            target,
+            unit
+          ]
+        }
+      )
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: "absolute bottom-[15%] left-[15%] text-xs text-gray-500", children: [
       min,
@@ -26024,12 +26090,6 @@ var AxelNotificationPopup = ({
 };
 
 // src/views/components/workspace/BottlenecksContent.utils.ts
-var formatTime2 = (seconds) => {
-  if (isNaN(seconds)) return "0:00";
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = Math.floor(seconds % 60);
-  return `${minutes}:${remainingSeconds < 10 ? "0" : ""}${remainingSeconds}`;
-};
 var getSeverityColor = (severity) => {
   switch (severity) {
     case "low":
@@ -26042,957 +26102,575 @@ var getSeverityColor = (severity) => {
       return "bg-gray-500";
   }
 };
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
-}
-var Select = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "flex h-11 sm:h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 touch-manipulation",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollUpButton,
-  {
-    ref,
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
-  }
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollDownButton,
-  {
-    ref,
-    className: cn("flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
-  }
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-    ]
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Label,
-  {
-    ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", className),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-var LoadingOverlay = ({
-  isVisible,
-  message = "Loading...",
-  className
+var PlayPauseIndicator = ({
+  show,
+  isPlaying,
+  duration = 600
 }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isFading, setIsFading] = useState(false);
+  useEffect(() => {
+    if (show) {
+      setIsVisible(true);
+      setIsFading(false);
+      const fadeTimer = setTimeout(() => {
+        setIsFading(true);
+      }, 100);
+      const hideTimer = setTimeout(() => {
+        setIsVisible(false);
+        setIsFading(false);
+      }, duration);
+      return () => {
+        clearTimeout(fadeTimer);
+        clearTimeout(hideTimer);
+      };
+    }
+  }, [show, duration]);
   if (!isVisible) return null;
   return /* @__PURE__ */ jsx(
-    motion.div,
+    "div",
     {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
-      transition: { duration: 0.2 },
-      className: `fixed inset-0 z-[100] flex items-center justify-center bg-black/30 backdrop-blur-sm ${className || ""}`,
-      "aria-modal": "true",
-      role: "dialog",
-      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center space-y-3 rounded-lg bg-white p-8 shadow-xl", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message }) })
+      className: "absolute inset-0 flex items-center justify-center pointer-events-none z-10",
+      style: {
+        opacity: isFading ? 0 : 1,
+        transition: `opacity ${duration - 100}ms ease-out`
+      },
+      children: /* @__PURE__ */ jsx("div", { className: "bg-black/70 rounded-full p-6", children: isPlaying ? (
+        // Play icon (triangle)
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "white",
+            className: "w-16 h-16",
+            children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
+          }
+        )
+      ) : (
+        // Pause icon (two bars)
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "white",
+            className: "w-16 h-16",
+            children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
+          }
+        )
+      ) })
     }
   );
 };
-var LoadingOverlay_default = LoadingOverlay;
-var TimeDisplay = ({ className, variant = "default" }) => {
-  const { dateTimeConfig } = useDashboardConfig();
-  const [time2, setTime] = useState("");
-  const dbTimezone = useAppTimezone();
-  const timezoneToDisplay = dbTimezone || dateTimeConfig?.defaultTimezone || "UTC";
-  const localeToUse = dateTimeConfig?.defaultLocale || "en-US";
-  const timeSuffix = "";
-  useEffect(() => {
-    const updateTime = () => {
-      const now2 = /* @__PURE__ */ new Date();
-      const effectiveFormatOptions = {
-        hour: "2-digit",
-        minute: "2-digit",
-        second: "2-digit",
-        hour12: true,
-        timeZone: timezoneToDisplay,
-        ...dateTimeConfig?.timeFormatOptions || {}
-        // Allow override from config
-      };
-      try {
-        setTime(new Intl.DateTimeFormat(localeToUse, effectiveFormatOptions).format(now2));
-      } catch (e) {
-        console.error("Error formatting time:", e);
-        setTime("Error");
-      }
-    };
-    updateTime();
-    const interval = setInterval(updateTime, 1e3);
-    return () => clearInterval(interval);
-  }, [timezoneToDisplay, dateTimeConfig?.timeFormatOptions, localeToUse]);
-  if (!time2) return null;
-  if (variant === "minimal") {
-    return /* @__PURE__ */ jsxs("span", { className: className || "", children: [
-      time2,
-      " ",
-      timeSuffix
-    ] });
+var ERROR_MAPPING = {
+  "networkError": {
+    code: 2,
+    type: "recoverable",
+    message: "Network error - please check your internet connection",
+    canRetry: true
+  },
+  "mediaError": {
+    code: 3,
+    type: "non_recoverable",
+    message: "Stream corrupted due to internet connection",
+    canRetry: false
+  },
+  "muxError": {
+    code: 3,
+    type: "non_recoverable",
+    message: "Error processing media stream",
+    canRetry: false
+  },
+  "otherError": {
+    code: 4,
+    type: "non_recoverable",
+    message: "Video format not supported by your browser. Please use Google Chrome.",
+    canRetry: false
   }
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      initial: { opacity: 0, y: -5 },
-      animate: { opacity: 1, y: 0 },
-      transition: { duration: 0.3 },
-      className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-[var(--primary-DEFAULT)]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }),
-        /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-[11px] font-medium text-gray-800 tabular-nums tracking-tight", children: [
-          time2,
-          " ",
-          timeSuffix
-        ] })
-      ]
-    }
-  );
 };
-var TimeDisplay_default = TimeDisplay;
-var DateDisplay = ({ className, variant = "default" }) => {
-  const { dateTimeConfig } = useDashboardConfig();
-  const [date, setDate] = useState("");
-  const timezoneToDisplay = dateTimeConfig?.defaultTimezone || "UTC";
-  const localeToUse = dateTimeConfig?.defaultLocale || "en-US";
+var hlsVideoPlayerStyles = `
+  .hls-video-player-container {
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Center the video and maintain aspect ratio */
+  .hls-video-element {
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  /* Custom loading indicator styles */
+  .hls-video-player-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+  }
+`;
+if (typeof document !== "undefined") {
+  const styleId = "hls-video-player-custom-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = hlsVideoPlayerStyles;
+    document.head.appendChild(style);
+  }
+}
+var BASE_HLS_CONFIG = {
+  maxBufferLength: 3,
+  maxMaxBufferLength: 8,
+  maxBufferSize: 50 * 1e3 * 1e3,
+  maxBufferHole: 0.25,
+  manifestLoadingTimeOut: 15e3,
+  manifestLoadingMaxRetry: 3,
+  manifestLoadingRetryDelay: 500,
+  levelLoadingTimeOut: 6e4,
+  levelLoadingMaxRetry: 5,
+  levelLoadingRetryDelay: 500,
+  fragLoadingTimeOut: 6e4,
+  fragLoadingMaxRetry: 5,
+  fragLoadingRetryDelay: 500,
+  startPosition: -1,
+  debug: false,
+  enableWorker: true,
+  lowLatencyMode: false,
+  progressive: true,
+  abrEwmaSlowLive: 9,
+  abrEwmaFastLive: 3,
+  abrBandWidthFactor: 0.95,
+  abrBandWidthUpFactor: 0.7,
+  abrMaxWithRealBitrate: false,
+  abrEwmaDefaultEstimate: 5e7
+};
+var HlsVideoPlayer = forwardRef(({
+  src,
+  poster,
+  autoplay = false,
+  controls = true,
+  loop = false,
+  muted = false,
+  playsInline = true,
+  className = "",
+  hlsConfig = {},
+  options = {},
+  // Backward compatibility with Video.js
+  externalLoadingControl = false,
+  onLoadingChange,
+  onReady,
+  onPlay,
+  onPause,
+  onPlaying,
+  onTimeUpdate,
+  onDurationChange,
+  onEnded,
+  onError,
+  onLoadStart,
+  onLoadedMetadata,
+  onLoadedData,
+  onSeeking,
+  onSeeked,
+  onClick
+}, ref) => {
+  const videoContainerRef = useRef(null);
+  const videoRef = useRef(null);
+  const hlsRef = useRef(null);
+  const blobUrlRef = useRef(null);
+  const [isReady, setIsReady] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [showIndicator, setShowIndicator] = useState(false);
+  const [indicatorIsPlaying, setIndicatorIsPlaying] = useState(false);
+  const indicatorKeyRef = useRef(0);
+  const eventCallbacksRef = useRef({
+    onReady,
+    onPlay,
+    onPause,
+    onPlaying,
+    onTimeUpdate,
+    onDurationChange,
+    onEnded,
+    onError,
+    onLoadStart,
+    onLoadedMetadata,
+    onLoadedData,
+    onSeeking,
+    onSeeked,
+    onLoadingChange
+  });
   useEffect(() => {
-    const getCurrentFormattedDate = () => {
-      const now2 = /* @__PURE__ */ new Date();
-      const effectiveFormatOptions = {
-        weekday: "short",
-        day: "numeric",
-        month: "short",
-        timeZone: timezoneToDisplay,
-        ...dateTimeConfig?.dateFormatOptions || {}
-        // Allow override from config
-      };
-      try {
-        return new Intl.DateTimeFormat(localeToUse, effectiveFormatOptions).format(now2);
-      } catch (e) {
-        console.error("Error formatting date:", e);
-        return "Error";
-      }
+    eventCallbacksRef.current = {
+      onReady,
+      onPlay,
+      onPause,
+      onPlaying,
+      onTimeUpdate,
+      onDurationChange,
+      onEnded,
+      onError,
+      onLoadStart,
+      onLoadedMetadata,
+      onLoadedData,
+      onSeeking,
+      onSeeked,
+      onLoadingChange
     };
-    const updateDate = () => {
-      setDate(getCurrentFormattedDate());
+  }, [
+    onReady,
+    onPlay,
+    onPause,
+    onPlaying,
+    onTimeUpdate,
+    onDurationChange,
+    onEnded,
+    onError,
+    onLoadStart,
+    onLoadedMetadata,
+    onLoadedData,
+    onSeeking,
+    onSeeked,
+    onLoadingChange
+  ]);
+  const stableHlsConfigRef = useRef(hlsConfig);
+  const stableOptionsRef = useRef(options);
+  const configSignatureRef = useRef("");
+  const [configVersion, setConfigVersion] = useState(0);
+  useEffect(() => {
+    const serialized = JSON.stringify({
+      hlsConfig: hlsConfig || null,
+      options: options || null
+    });
+    if (!configSignatureRef.current) {
+      configSignatureRef.current = serialized;
+      stableHlsConfigRef.current = hlsConfig;
+      stableOptionsRef.current = options;
+      return;
+    }
+    if (configSignatureRef.current !== serialized) {
+      configSignatureRef.current = serialized;
+      stableHlsConfigRef.current = hlsConfig;
+      stableOptionsRef.current = options;
+      setConfigVersion((prev) => prev + 1);
+    }
+  }, [hlsConfig, options]);
+  const cleanupBlobUrl = useCallback(() => {
+    if (blobUrlRef.current) {
+      URL.revokeObjectURL(blobUrlRef.current);
+      blobUrlRef.current = null;
+    }
+  }, []);
+  const dispose = useCallback(() => {
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    cleanupBlobUrl();
+    setIsReady(false);
+  }, [cleanupBlobUrl]);
+  const playerLikeObject = useCallback(() => {
+    return {
+      el: () => videoRef.current,
+      currentTime: () => videoRef.current?.currentTime || 0,
+      duration: () => videoRef.current?.duration || 0,
+      paused: () => videoRef.current?.paused ?? true,
+      play: () => videoRef.current?.play(),
+      pause: () => videoRef.current?.pause(),
+      muted: (val) => {
+        if (videoRef.current) {
+          if (val !== void 0) videoRef.current.muted = val;
+          return videoRef.current.muted;
+        }
+        return false;
+      },
+      volume: (val) => {
+        if (videoRef.current) {
+          if (val !== void 0) videoRef.current.volume = val;
+          return videoRef.current.volume;
+        }
+        return 1;
+      },
+      error: () => null,
+      dispose: () => dispose()
     };
-    updateDate();
-    const interval = setInterval(() => {
-      const currentDateStr = getCurrentFormattedDate();
-      if (currentDateStr !== date) {
-        updateDate();
+  }, [dispose]);
+  const initializePlayer = useCallback(() => {
+    if (!videoRef.current || !src) return;
+    const video = videoRef.current;
+    const player = playerLikeObject();
+    const mergedHlsConfig = {
+      ...BASE_HLS_CONFIG,
+      ...stableHlsConfigRef.current || {},
+      ...stableOptionsRef.current || {}
+    };
+    cleanupBlobUrl();
+    const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
+    if (isHLS) {
+      if (src.startsWith("#EXTM3U")) {
+        const safariMode = isSafari();
+        const browserName = getBrowserName();
+        if (safariMode) {
+          const clipIdMatch = src.match(/# Clip ID: ([a-f0-9-]+)/i);
+          if (clipIdMatch) {
+            const proxyUrl = `/api/clips/playlist/${clipIdMatch[1]}`;
+            console.log(`[HlsVideoPlayer] Safari detected (${browserName}) - using playlist proxy URL:`, proxyUrl);
+            video.src = proxyUrl;
+          } else {
+            console.warn("[HlsVideoPlayer] Safari detected but no clip ID found in playlist, trying blob URL fallback");
+            const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
+            const blobUrl = URL.createObjectURL(blob);
+            blobUrlRef.current = blobUrl;
+            video.src = blobUrl;
+          }
+        } else if (Hls3.isSupported()) {
+          const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
+          const blobUrl = URL.createObjectURL(blob);
+          blobUrlRef.current = blobUrl;
+          console.log(`[HlsVideoPlayer] Non-Safari browser (${browserName}) - using HLS.js with blob URL`);
+          const hls = new Hls3(mergedHlsConfig);
+          hlsRef.current = hls;
+          hls.on(Events.MANIFEST_PARSED, () => {
+            console.log("[HlsVideoPlayer] Manifest parsed, ready to play");
+            setIsReady(true);
+            eventCallbacksRef.current.onReady?.(player);
+          });
+          hls.on(Events.ERROR, (event, data) => {
+            console.error("[HlsVideoPlayer] HLS.js error:", data);
+            if (data.fatal) {
+              let errorInfo;
+              switch (data.type) {
+                case ErrorTypes.NETWORK_ERROR:
+                  errorInfo = ERROR_MAPPING.networkError;
+                  console.log("[HlsVideoPlayer] Attempting to recover from network error");
+                  hls.startLoad();
+                  break;
+                case ErrorTypes.MEDIA_ERROR:
+                  errorInfo = ERROR_MAPPING.mediaError;
+                  console.log("[HlsVideoPlayer] Attempting to recover from media error");
+                  hls.recoverMediaError();
+                  break;
+                case ErrorTypes.MUX_ERROR:
+                  errorInfo = ERROR_MAPPING.muxError;
+                  break;
+                default:
+                  errorInfo = ERROR_MAPPING.otherError;
+                  break;
+              }
+              errorInfo.details = data.details;
+              eventCallbacksRef.current.onError?.(player, errorInfo);
+            }
+          });
+          hls.on(Events.FRAG_LOADING, () => {
+            setIsLoading(true);
+            eventCallbacksRef.current.onLoadingChange?.(true);
+          });
+          hls.on(Events.FRAG_LOADED, () => {
+            setIsLoading(false);
+            eventCallbacksRef.current.onLoadingChange?.(false);
+          });
+          hls.loadSource(blobUrl);
+          hls.attachMedia(video);
+        } else {
+          console.error("[HlsVideoPlayer] HLS.js not supported and not Safari - cannot play HLS content");
+          const errorInfo = ERROR_MAPPING.otherError;
+          onError?.(player, errorInfo);
+        }
+      } else {
+        if (Hls3.isSupported() && !isSafari()) {
+          const hls = new Hls3(mergedHlsConfig);
+          hlsRef.current = hls;
+          hls.on(Events.MANIFEST_PARSED, () => {
+            setIsReady(true);
+            eventCallbacksRef.current.onReady?.(player);
+          });
+          hls.on(Events.ERROR, (event, data) => {
+            console.error("[HlsVideoPlayer] HLS.js error:", data);
+            if (data.fatal) {
+              let errorInfo;
+              switch (data.type) {
+                case ErrorTypes.NETWORK_ERROR:
+                  errorInfo = ERROR_MAPPING.networkError;
+                  hls.startLoad();
+                  break;
+                case ErrorTypes.MEDIA_ERROR:
+                  errorInfo = ERROR_MAPPING.mediaError;
+                  hls.recoverMediaError();
+                  break;
+                default:
+                  errorInfo = ERROR_MAPPING.otherError;
+                  break;
+              }
+              errorInfo.details = data.details;
+              eventCallbacksRef.current.onError?.(player, errorInfo);
+            }
+          });
+          hls.loadSource(src);
+          hls.attachMedia(video);
+        } else {
+          video.src = src;
+        }
       }
-    }, 60 * 1e3);
-    return () => clearInterval(interval);
-  }, [date, timezoneToDisplay, dateTimeConfig?.dateFormatOptions, localeToUse]);
-  if (!date) return null;
-  if (variant === "minimal") {
-    return /* @__PURE__ */ jsx("span", { className: className || "", children: date });
-  }
-  return /* @__PURE__ */ jsxs(
-    motion.div,
-    {
-      initial: { opacity: 0, y: -5 },
-      animate: { opacity: 1, y: 0 },
-      transition: { duration: 0.3 },
-      className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
-      children: [
-        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-blue-600", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z", clipRule: "evenodd" }) }),
-        /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-gray-800 tracking-tight", children: date })
-      ]
+    } else {
+      video.src = src;
     }
-  );
-};
-var DateDisplay_default = DateDisplay;
-var Card3 = Card2;
-var CardHeader3 = CardHeader2;
-var CardTitle3 = CardTitle2;
-var CardContent3 = CardContent2;
-var MetricCard2 = ({ title, value, unit = "", trend = null }) => {
-  const getTrendColor = (trendValue) => {
-    if (trendValue === null || trendValue === void 0) return "";
-    return trendValue > 0 ? "text-green-500" : trendValue < 0 ? "text-red-500" : "text-gray-500";
-  };
-  const getTrendSymbol = (trendValue) => {
-    if (trendValue === null || trendValue === void 0) return "";
-    return trendValue > 0 ? "\u2191" : trendValue < 0 ? "\u2193" : "";
-  };
-  return /* @__PURE__ */ jsxs(Card3, { className: "bg-white", children: [
-    /* @__PURE__ */ jsx(CardHeader3, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle3, { className: "text-sm font-medium text-gray-500", children: title }) }),
-    /* @__PURE__ */ jsx(CardContent3, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold", children: [
-        value,
-        unit && /* @__PURE__ */ jsx("span", { className: "ml-1 text-sm text-gray-500", children: unit })
-      ] }),
-      trend !== null && trend !== void 0 && // Check trend for null/undefined before accessing
-      /* @__PURE__ */ jsx("div", { className: `flex items-center ${getTrendColor(trend)}`, children: /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
-        getTrendSymbol(trend),
-        " ",
-        Math.abs(trend),
-        "%"
-      ] }) })
-    ] }) })
-  ] });
-};
-var MetricCard_default = MetricCard2;
-var TimePickerDropdown = ({
-  value,
-  onChange,
-  placeholder = "Select time",
-  className = "",
-  disabled = false
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-  const dropdownRef = useRef(null);
-  const inputRef = useRef(null);
-  const generateTimeSlots = () => {
-    const slots = [];
-    for (let hour = 0; hour < 24; hour++) {
-      for (let minute = 0; minute < 60; minute += 15) {
-        const time24 = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
-        const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
-        const ampm = hour < 12 ? "AM" : "PM";
-        const time12 = `${hour12}:${minute.toString().padStart(2, "0")} ${ampm}`;
-        slots.push({ value: time24, label: time12 });
-      }
-    }
-    return slots;
-  };
-  const timeSlots = generateTimeSlots();
-  const filteredSlots = timeSlots.filter(
-    (slot) => slot.label.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-  const getDisplayValue = (value2) => {
-    if (!value2) return "";
-    const normalizedValue = value2.substring(0, 5);
-    const slot = timeSlots.find((s) => s.value === normalizedValue);
-    return slot ? slot.label : value2;
-  };
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsOpen(false);
-        setSearchTerm("");
+    const handleCanPlay = () => {
+      if (!hlsRef.current) {
+        setIsReady(true);
+        onReady?.(player);
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const handleKeyDown = (e) => {
-    if (e.key === "Escape") {
-      setIsOpen(false);
-      setSearchTerm("");
-    } else if (e.key === "Enter") {
-      e.preventDefault();
-      if (filteredSlots.length > 0) {
-        onChange(filteredSlots[0].value);
-        setIsOpen(false);
-        setSearchTerm("");
-      }
-    }
-  };
-  const handleSelect = (timeValue) => {
-    onChange(timeValue);
-    setIsOpen(false);
-    setSearchTerm("");
-  };
-  const handleToggle = () => {
-    if (disabled) return;
-    setIsOpen(!isOpen);
-    if (!isOpen) {
-      setTimeout(() => inputRef.current?.focus(), 100);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleToggle,
-        disabled,
-        className: `
-          w-full px-3 py-2 text-left bg-white border border-gray-300 rounded-md shadow-sm
-          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
-          hover:border-gray-400 transition-colors duration-200
-          ${disabled ? "bg-gray-50 cursor-not-allowed" : "cursor-pointer"}
-          ${isOpen ? "ring-2 ring-blue-500 border-blue-500" : ""}
-        `,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-gray-400" }),
-            /* @__PURE__ */ jsx("span", { className: `text-sm ${value ? "text-gray-900" : "text-gray-500"}`, children: value ? getDisplayValue(value) : placeholder })
-          ] }),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: `h-4 w-4 text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
-            }
-          )
-        ] })
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-hidden", children: [
-      /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref: inputRef,
-          type: "text",
-          placeholder: "Search time...",
-          value: searchTerm,
-          onChange: (e) => setSearchTerm(e.target.value),
-          onKeyDown: handleKeyDown,
-          className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-        }
-      ) }),
-      /* @__PURE__ */ jsx("div", { className: "overflow-y-auto max-h-48", children: filteredSlots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: "No times found" }) : filteredSlots.map((slot) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => handleSelect(slot.value),
-          className: `
-                    w-full px-3 py-2 text-left text-sm hover:bg-blue-50 hover:text-blue-600
-                    transition-colors duration-150 border-b border-gray-100 last:border-b-0
-                    ${slot.value === value ? "bg-blue-50 text-blue-600 font-medium" : "text-gray-700"}
-                  `,
-          children: slot.label
-        },
-        slot.value
-      )) })
-    ] })
-  ] });
-};
-var SilentErrorBoundary = class extends React23__default.Component {
-  constructor(props) {
-    super(props);
-    this.handleClearAndReload = () => {
-      console.log("[ErrorBoundary] User initiated reset");
-      if (typeof window !== "undefined") {
-        try {
-          localStorage.clear();
-          sessionStorage.clear();
-          console.log("[ErrorBoundary] Cleared all storage");
-        } catch (error) {
-          console.error("[ErrorBoundary] Failed to clear storage:", error);
-        }
-      }
-      window.location.href = "/login";
+    const handlePlay = () => eventCallbacksRef.current.onPlay?.(player);
+    const handlePause = () => eventCallbacksRef.current.onPause?.(player);
+    const handlePlaying = () => {
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      eventCallbacksRef.current.onPlaying?.(player);
     };
-    this.state = {
-      hasError: false,
-      errorCount: 0,
-      lastError: null,
-      errorInfo: null
+    const handleTimeUpdate = () => {
+      const currentTime2 = video.currentTime || 0;
+      eventCallbacksRef.current.onTimeUpdate?.(player, currentTime2);
     };
-  }
-  static getDerivedStateFromError(error) {
-    return { hasError: true };
-  }
-  componentDidCatch(error, errorInfo) {
-    console.error("[ErrorBoundary] Caught render error:", {
-      error: error.message,
-      stack: error.stack,
-      componentStack: errorInfo.componentStack,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    });
-    this.setState((prev) => ({
-      errorCount: prev.errorCount + 1,
-      lastError: error,
-      errorInfo
-    }));
-    try {
-      if (typeof window !== "undefined" && window.mixpanel) {
-        window.mixpanel.track("React Render Error", {
-          error: error.message,
-          component: errorInfo.componentStack?.split("\n")[1] || "unknown",
-          errorCount: this.state.errorCount + 1
-        });
-      }
-    } catch (analyticsError) {
-      console.warn("[ErrorBoundary] Analytics tracking failed:", analyticsError);
-    }
-  }
-  render() {
-    if (!this.state.hasError) {
-      return this.props.children;
-    }
-    return /* @__PURE__ */ jsx("div", { className: "flex h-screen w-screen items-center justify-center bg-slate-50", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-6 text-center", children: [
-      /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading Dashboard..." }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Taking longer than usual..." }),
-      /* @__PURE__ */ jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "#",
-          onClick: (e) => {
-            e.preventDefault();
-            this.handleClearAndReload();
-          },
-          className: "text-xs text-gray-400 hover:text-gray-600 underline transition-colors",
-          children: "Reset and try again"
-        }
-      ) }),
-      process.env.NODE_ENV === "development" && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 italic mt-4", children: "Check console for error details" })
-    ] }) });
-  }
-};
-var PlayPauseIndicator = ({
-  show,
-  isPlaying,
-  duration = 600
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const [isFading, setIsFading] = useState(false);
-  useEffect(() => {
-    if (show) {
-      setIsVisible(true);
-      setIsFading(false);
-      const fadeTimer = setTimeout(() => {
-        setIsFading(true);
-      }, 100);
-      const hideTimer = setTimeout(() => {
-        setIsVisible(false);
-        setIsFading(false);
-      }, duration);
-      return () => {
-        clearTimeout(fadeTimer);
-        clearTimeout(hideTimer);
-      };
-    }
-  }, [show, duration]);
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "absolute inset-0 flex items-center justify-center pointer-events-none z-10",
-      style: {
-        opacity: isFading ? 0 : 1,
-        transition: `opacity ${duration - 100}ms ease-out`
-      },
-      children: /* @__PURE__ */ jsx("div", { className: "bg-black/70 rounded-full p-6", children: isPlaying ? (
-        // Play icon (triangle)
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "white",
-            className: "w-16 h-16",
-            children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" })
-          }
-        )
-      ) : (
-        // Pause icon (two bars)
-        /* @__PURE__ */ jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "white",
-            className: "w-16 h-16",
-            children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" })
-          }
-        )
-      ) })
-    }
-  );
-};
-var ERROR_MAPPING = {
-  1: {
-    // MEDIA_ERR_ABORTED
-    code: 1,
-    type: "recoverable" /* RECOVERABLE */,
-    message: "Video loading was interrupted",
-    canRetry: true
-  },
-  2: {
-    // MEDIA_ERR_NETWORK
-    code: 2,
-    type: "recoverable" /* RECOVERABLE */,
-    message: "Network error - please check your internet connection",
-    canRetry: true
-  },
-  3: {
-    // MEDIA_ERR_DECODE
-    code: 3,
-    type: "non_recoverable" /* NON_RECOVERABLE */,
-    message: "Stream corrupted due to internet connection",
-    canRetry: false
-  },
-  4: {
-    // MEDIA_ERR_SRC_NOT_SUPPORTED
-    code: 4,
-    type: "non_recoverable" /* NON_RECOVERABLE */,
-    message: "Video format not supported by your browser. Please use Google Chrome.",
-    canRetry: false
-  }
-};
-var videoPlayerStyles = `
-  .video-player-container {
-    width: 100%;
-    height: 100%;
-    background-color: #000;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  /* Center the video player and maintain aspect ratio */
-  .video-js {
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-  }
-  
-  /* Ensure video maintains aspect ratio and shows fully */
-  .video-js .vjs-tech {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-  
-  /* Hide default Video.js loading spinner */
-  .video-js .vjs-loading-spinner {
-    display: none !important;
-  }
-  
-  /* Custom loading indicator styles */
-  .video-player-loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 10;
-  }
-`;
-if (typeof document !== "undefined") {
-  const styleId = "video-player-custom-styles";
-  if (!document.getElementById(styleId)) {
-    const style = document.createElement("style");
-    style.id = styleId;
-    style.textContent = videoPlayerStyles;
-    document.head.appendChild(style);
-  }
-}
-var VideoPlayer = React23__default.forwardRef(({
-  src,
-  poster,
-  autoplay = false,
-  controls = true,
-  loop = false,
-  muted = false,
-  playsInline = true,
-  className = "",
-  options = {},
-  externalLoadingControl = false,
-  onLoadingChange,
-  onReady,
-  onPlay,
-  onPause,
-  onPlaying,
-  onTimeUpdate,
-  onDurationChange,
-  onEnded,
-  onError,
-  onLoadStart,
-  onLoadedMetadata,
-  onLoadedData,
-  onSeeking,
-  onSeeked,
-  onClick
-}, ref) => {
-  const videoRef = useRef(null);
-  const playerRef = useRef(null);
-  const [isReady, setIsReady] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
-  const [showIndicator, setShowIndicator] = useState(false);
-  const [indicatorIsPlaying, setIndicatorIsPlaying] = useState(false);
-  const indicatorKeyRef = useRef(0);
-  const defaultOptions = {
-    controls: false,
-    // Always disable Video.js controls - we use custom controls
-    // Don't use fluid or fill - let the video maintain its natural aspect ratio
-    fluid: false,
-    // Disable fluid mode to prevent stretching
-    responsive: false,
-    // Disable responsive mode
-    fill: false,
-    // Don't fill - maintain aspect ratio
-    playsinline: playsInline,
-    preload: "metadata",
-    autoplay: autoplay ? "any" : false,
-    muted,
-    loop,
-    poster,
-    // Optimized HLS configuration for VOD content with LARGE SEGMENTS (40MB)
-    // Strategy: Aggressive buffer reduction for faster startup with large segments
-    html5: {
-      vhs: {
-        // VHS (Video HTTP Streaming) options for HLS
-        withCredentials: false,
-        handleManifestRedirect: true,
-        overrideNative: !videojs.browser.IS_SAFARI,
-        // Use native HLS on Safari
-        enableLowInitialPlaylist: true,
-        smoothQualityChange: true,
-        // Optimized bandwidth and buffering for VOD
-        bandwidth: 5e7,
-        // Start with high bandwidth assumption (50 Mbps)
-        initialBandwidth: 5e7,
-        // Assume good connection initially
-        limitRenditionByPlayerDimensions: true,
-        // Buffer configuration optimized for large segments (40MB each)
-        maxBufferLength: 3,
-        // Start playing with just 3 seconds ahead
-        maxMaxBufferLength: 8,
-        // Maximum 8 seconds buffer for faster startup
-        maxBufferSize: 50 * 1e3 * 1e3,
-        // 50MB max buffer size (1.25 segments)
-        maxBufferHole: 0.25,
-        // Smaller holes for better continuity
-        bufferBasedABR: false,
-        // Disable for more predictable behavior
-        // Segment loading optimization for large segments (40MB)
-        maxPlaylistRetries: 3,
-        playlistRetryDelay: 500,
-        // 500ms between retries
-        playlistExclusionDuration: 60,
-        segmentLoadingRetryAttempts: 5,
-        // More retries for large segments
-        segmentLoadingRetryDelay: 500,
-        // Faster retry for responsiveness
-        segmentLoadingTimeOut: 6e4,
-        // 60s timeout for 40MB segments
-        manifestLoadingTimeOut: 15e3,
-        // 15s timeout for manifest
-        // Performance optimizations
-        experimentalBufferBasedCodecSwitching: true,
-        experimentalCacheEncryptionKeys: true,
-        handlePartialData: true,
-        allowSeeksWithinUnsafeLiveWindow: false,
-        // VOD content
-        experimentalLLHLS: false,
-        // Disable Low Latency HLS for VOD
-        // Connection settings
-        // Chrome 130+ started throwing "Cannot perform Construct on a detached ArrayBuffer"
-        // whenever the transmux worker tried to rehydrate transferred buffers that originated
-        // from Blob-based playlists. Disabling the worker keeps playback stable at the cost
-        // of slightly higher main-thread usage, which is acceptable for the dashboard usage.
-        enableWorker: false,
-        progressive: true,
-        // Progressive download
-        // Adaptive bitrate settings (if multi-quality available)
-        abrEwmaFastLive: 3,
-        abrEwmaSlowLive: 9,
-        abrBandWidthFactor: 0.95,
-        abrBandWidthUpFactor: 0.7,
-        abrMaxWithRealBitrate: false,
-        // Request options optimized for large segments
-        requestOptions: {
-          timeout: 9e4,
-          // 90s timeout for 40MB segments
-          maxRetry: 5
-          // More retries for reliability
-        }
-      },
-      nativeVideoTracks: false,
-      nativeAudioTracks: false,
-      nativeTextTracks: false
-    },
-    // Improved seeking and scrubbing
-    inactivityTimeout: 3e3,
-    // Better error handling
-    errorDisplay: false,
-    // We'll handle errors with callbacks
-    // Fullscreen options
-    fullscreen: {
-      options: {
-        navigationUI: "hide"
-      }
-    },
-    ...options
-  };
-  const initializePlayer = useCallback(() => {
-    if (!videoRef.current || playerRef.current) return;
-    const videoElement = document.createElement("video-js");
-    videoElement.className = "vjs-default-skin";
-    videoRef.current.appendChild(videoElement);
-    const player = videojs(videoElement, defaultOptions);
-    playerRef.current = player;
-    player.ready(() => {
-      setIsReady(true);
-      onReady?.(player);
-    });
-    player.on("play", () => onPlay?.(player));
-    player.on("pause", () => onPause?.(player));
-    player.on("playing", () => onPlaying?.(player));
-    player.on("timeupdate", () => {
-      const currentTime2 = player.currentTime() || 0;
-      onTimeUpdate?.(player, currentTime2);
-    });
-    player.on("durationchange", () => {
-      const duration2 = player.duration() || 0;
-      onDurationChange?.(player, duration2);
-    });
-    player.on("ended", () => onEnded?.(player));
-    player.on("loadstart", () => {
+    const handleDurationChange = () => {
+      const duration2 = video.duration || 0;
+      eventCallbacksRef.current.onDurationChange?.(player, duration2);
+    };
+    const handleEnded = () => eventCallbacksRef.current.onEnded?.(player);
+    const handleLoadStart = () => {
       setIsLoading(true);
-      onLoadingChange?.(true);
-      onLoadStart?.(player);
-    });
-    player.on("loadeddata", () => {
+      eventCallbacksRef.current.onLoadingChange?.(true);
+      eventCallbacksRef.current.onLoadStart?.(player);
+    };
+    const handleLoadedMetadata = () => eventCallbacksRef.current.onLoadedMetadata?.(player);
+    const handleLoadedData = () => {
       setIsLoading(false);
-      onLoadingChange?.(false);
-      onLoadedData?.(player);
-    });
-    player.on("waiting", () => {
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      eventCallbacksRef.current.onLoadedData?.(player);
+    };
+    const handleWaiting = () => {
       setIsLoading(true);
-      onLoadingChange?.(true);
-    });
-    player.on("playing", () => {
-      setIsLoading(false);
-      onLoadingChange?.(false);
-    });
-    player.on("loadedmetadata", () => {
-      onLoadedMetadata?.(player);
-    });
-    player.on("seeking", () => onSeeking?.(player));
-    player.on("seeked", () => onSeeked?.(player));
-    player.on("error", () => {
-      const error = player.error();
-      const errorCode = error?.code ?? 0;
-      const errorInfo = ERROR_MAPPING[errorCode] || {
-        code: errorCode || 0,
-        type: "non_recoverable" /* NON_RECOVERABLE */,
-        message: "Unknown playback error occurred",
-        canRetry: false
-      };
-      console.error("[VideoPlayer] Video.js error:", {
-        code: errorCode,
-        type: errorInfo.type,
-        message: errorInfo.message,
-        canRetry: errorInfo.canRetry,
-        originalError: error
-      });
-      onError?.(player, errorInfo);
-    });
-    if (src) {
-      const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
-      let videoSrc = src;
-      let blobUrl = null;
-      if (src.startsWith("#EXTM3U")) {
-        const safariMode = isSafari();
-        const browserName = getBrowserName();
-        if (safariMode) {
-          const clipIdMatch = src.match(/# Clip ID: ([a-f0-9-]+)/i);
-          if (clipIdMatch) {
-            videoSrc = `/api/clips/playlist/${clipIdMatch[1]}`;
-            console.log(`[VideoPlayer] Safari detected (${browserName}) - using playlist proxy URL:`, videoSrc);
-          } else {
-            console.warn("[VideoPlayer] Safari detected but no clip ID found in playlist, trying blob URL fallback");
-            const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
-            blobUrl = URL.createObjectURL(blob);
-            videoSrc = blobUrl;
-            player._blobUrl = videoSrc;
-          }
-        } else {
-          const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
-          blobUrl = URL.createObjectURL(blob);
-          videoSrc = blobUrl;
-          console.log(`[VideoPlayer] Non-Safari browser (${browserName}) - using blob URL for optimal performance`);
-          player._blobUrl = videoSrc;
-        }
+      eventCallbacksRef.current.onLoadingChange?.(true);
+    };
+    const handleSeeking = () => eventCallbacksRef.current.onSeeking?.(player);
+    const handleSeeked = () => eventCallbacksRef.current.onSeeked?.(player);
+    const handleError = () => {
+      const error = video.error;
+      if (error) {
+        const errorInfo = {
+          code: error.code,
+          type: error.code <= 2 ? "recoverable" : "non_recoverable",
+          message: error.message || "Unknown error occurred",
+          canRetry: error.code <= 2
+        };
+        eventCallbacksRef.current.onError?.(player, errorInfo);
       }
-      player.src({
-        src: videoSrc,
-        type: isHLS ? "application/x-mpegURL" : "video/mp4"
-      });
-    }
+    };
+    video.addEventListener("canplay", handleCanPlay);
+    video.addEventListener("play", handlePlay);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("playing", handlePlaying);
+    video.addEventListener("timeupdate", handleTimeUpdate);
+    video.addEventListener("durationchange", handleDurationChange);
+    video.addEventListener("ended", handleEnded);
+    video.addEventListener("loadstart", handleLoadStart);
+    video.addEventListener("loadedmetadata", handleLoadedMetadata);
+    video.addEventListener("loadeddata", handleLoadedData);
+    video.addEventListener("waiting", handleWaiting);
+    video.addEventListener("seeking", handleSeeking);
+    video.addEventListener("seeked", handleSeeked);
+    video.addEventListener("error", handleError);
+    return () => {
+      video.removeEventListener("canplay", handleCanPlay);
+      video.removeEventListener("play", handlePlay);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("playing", handlePlaying);
+      video.removeEventListener("timeupdate", handleTimeUpdate);
+      video.removeEventListener("durationchange", handleDurationChange);
+      video.removeEventListener("ended", handleEnded);
+      video.removeEventListener("loadstart", handleLoadStart);
+      video.removeEventListener("loadedmetadata", handleLoadedMetadata);
+      video.removeEventListener("loadeddata", handleLoadedData);
+      video.removeEventListener("waiting", handleWaiting);
+      video.removeEventListener("seeking", handleSeeking);
+      video.removeEventListener("seeked", handleSeeked);
+      video.removeEventListener("error", handleError);
+    };
   }, [
     src,
-    defaultOptions,
-    onReady,
-    onPlay,
-    onPause,
-    onTimeUpdate,
-    onDurationChange,
-    onEnded,
-    onError,
-    onLoadStart,
-    onLoadedMetadata,
-    onSeeking,
-    onSeeked
+    cleanupBlobUrl,
+    playerLikeObject,
+    configVersion
   ]);
   useEffect(() => {
-    if (playerRef.current && src) {
-      const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
-      let videoSrc = src;
-      let blobUrl = null;
-      if (src.startsWith("#EXTM3U")) {
-        const safariMode = isSafari();
-        const browserName = getBrowserName();
-        if (safariMode) {
-          const clipIdMatch = src.match(/# Clip ID: ([a-f0-9-]+)/i);
-          if (clipIdMatch) {
-            videoSrc = `/api/clips/playlist/${clipIdMatch[1]}`;
-            console.log(`[VideoPlayer] Safari detected (${browserName}) - using playlist proxy URL for source update:`, videoSrc);
-          } else {
-            console.warn("[VideoPlayer] Safari detected but no clip ID found in playlist (source update), trying blob URL fallback");
-            const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
-            blobUrl = URL.createObjectURL(blob);
-            videoSrc = blobUrl;
-          }
-        } else {
-          const blob = new Blob([src], { type: "application/vnd.apple.mpegurl" });
-          blobUrl = URL.createObjectURL(blob);
-          videoSrc = blobUrl;
-          console.log(`[VideoPlayer] Non-Safari browser (${browserName}) - using blob URL for source update`);
-        }
-      }
-      playerRef.current.src({
-        src: videoSrc,
-        type: isHLS ? "application/x-mpegURL" : "video/mp4"
-      });
-      return () => {
-        if (blobUrl) {
-          URL.revokeObjectURL(blobUrl);
-        }
-      };
-    }
-  }, [src]);
-  useEffect(() => {
-    initializePlayer();
+    const cleanup = initializePlayer();
     return () => {
-      if (playerRef.current) {
-        const blobUrl = playerRef.current._blobUrl;
-        if (blobUrl) {
-          URL.revokeObjectURL(blobUrl);
-        }
-        playerRef.current.dispose();
-        playerRef.current = null;
-        setIsReady(false);
+      cleanup?.();
+      if (hlsRef.current) {
+        hlsRef.current.destroy();
+        hlsRef.current = null;
       }
+      cleanupBlobUrl();
+      setIsReady(false);
     };
-  }, []);
+  }, [src, initializePlayer, cleanupBlobUrl]);
+  useEffect(() => {
+    if (videoRef.current) {
+      if (autoplay) {
+        videoRef.current.play().catch((err) => {
+          console.warn("[HlsVideoPlayer] Autoplay failed:", err);
+        });
+      }
+    }
+  }, [autoplay]);
   const play = useCallback(() => {
-    return playerRef.current?.play();
+    return videoRef.current?.play();
   }, []);
   const pause = useCallback(() => {
-    playerRef.current?.pause();
+    videoRef.current?.pause();
   }, []);
   const currentTime = useCallback((time2) => {
-    if (time2 !== void 0) {
-      playerRef.current?.currentTime(time2);
+    if (time2 !== void 0 && videoRef.current) {
+      videoRef.current.currentTime = time2;
       return time2;
     }
-    return playerRef.current?.currentTime() || 0;
+    return videoRef.current?.currentTime || 0;
   }, []);
   const duration = useCallback(() => {
-    return playerRef.current?.duration() || 0;
+    return videoRef.current?.duration || 0;
   }, []);
   const paused = useCallback(() => {
-    return playerRef.current?.paused() ?? true;
+    return videoRef.current?.paused ?? true;
   }, []);
   const mute = useCallback((isMuted) => {
-    if (isMuted !== void 0) {
-      playerRef.current?.muted(isMuted);
+    if (isMuted !== void 0 && videoRef.current) {
+      videoRef.current.muted = isMuted;
       return isMuted;
     }
-    return playerRef.current?.muted() ?? false;
+    return videoRef.current?.muted ?? false;
   }, []);
   const volume = useCallback((level) => {
-    if (level !== void 0) {
-      playerRef.current?.volume(level);
+    if (level !== void 0 && videoRef.current) {
+      videoRef.current.volume = level;
       return level;
     }
-    return playerRef.current?.volume() ?? 1;
+    return videoRef.current?.volume ?? 1;
   }, []);
-  const dispose = useCallback(() => {
-    if (playerRef.current) {
-      playerRef.current.dispose();
-      playerRef.current = null;
-      setIsReady(false);
+  const playbackRate = useCallback((rate) => {
+    if (rate !== void 0 && videoRef.current) {
+      videoRef.current.playbackRate = rate;
+      return rate;
     }
+    return videoRef.current?.playbackRate ?? 1;
   }, []);
-  React23__default.useImperativeHandle(ref, () => ({
-    player: playerRef.current,
+  useImperativeHandle(ref, () => ({
+    hls: hlsRef.current,
+    video: videoRef.current,
     play,
     pause,
     currentTime,
@@ -27000,13 +26678,15 @@ var VideoPlayer = React23__default.forwardRef(({
     paused,
     mute,
     volume,
+    playbackRate,
     dispose,
-    isReady
-  }));
+    isReady,
+    // For backward compatibility with Video.js API
+    player: playerLikeObject()
+  }), [play, pause, currentTime, duration, paused, mute, volume, playbackRate, dispose, isReady, playerLikeObject]);
   const handleClickWithIndicator = useCallback(() => {
-    if (!onClick || !playerRef.current) return;
-    const player = playerRef.current;
-    const willBePlaying = player.paused();
+    if (!onClick || !videoRef.current) return;
+    const willBePlaying = videoRef.current.paused;
     setIndicatorIsPlaying(willBePlaying);
     setShowIndicator(false);
     setTimeout(() => {
@@ -27015,17 +26695,30 @@ var VideoPlayer = React23__default.forwardRef(({
     }, 0);
     onClick();
   }, [onClick]);
-  return /* @__PURE__ */ jsxs("div", { className: `video-player-wrapper ${className}`, style: { position: "relative", width: "100%", height: "100%" }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `hls-video-player-wrapper ${className}`, style: { position: "relative", width: "100%", height: "100%" }, children: [
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: "video-player-container",
-        ref: videoRef,
-        "data-vjs-player": true
+        className: "hls-video-player-container",
+        ref: videoContainerRef,
+        children: /* @__PURE__ */ jsx(
+          "video",
+          {
+            ref: videoRef,
+            className: "hls-video-element",
+            poster,
+            controls,
+            loop,
+            muted,
+            playsInline,
+            autoPlay: autoplay,
+            preload: "metadata"
+          }
+        )
       }
     ),
-    isLoading && !externalLoadingControl && /* @__PURE__ */ jsx("div", { className: "video-player-loading", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-    onClick && /* @__PURE__ */ jsx(
+    isLoading && !externalLoadingControl && /* @__PURE__ */ jsx("div", { className: "hls-video-player-loading", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+    onClick && !controls && /* @__PURE__ */ jsx(
       "div",
       {
         onClick: handleClickWithIndicator,
@@ -27041,7 +26734,7 @@ var VideoPlayer = React23__default.forwardRef(({
         "aria-label": "Click to play/pause"
       }
     ),
-    onClick && /* @__PURE__ */ jsx(
+    onClick && !controls && /* @__PURE__ */ jsx(
       PlayPauseIndicator,
       {
         show: showIndicator,
@@ -27051,13 +26744,25 @@ var VideoPlayer = React23__default.forwardRef(({
     )
   ] });
 });
-VideoPlayer.displayName = "VideoPlayer";
-var CroppedVideoPlayer = forwardRef(({
+HlsVideoPlayer.displayName = "HlsVideoPlayer";
+var VideoPlayer = HlsVideoPlayer;
+var CroppedHlsVideoPlayer = forwardRef(({
   crop,
   debug = false,
   onClick,
   ...videoProps
 }, ref) => {
+  const {
+    onReady: onReadyProp,
+    onPlay: onPlayProp,
+    onPause: onPauseProp,
+    onEnded: onEndedProp,
+    onSeeking: onSeekingProp,
+    onSeeked: onSeekedProp,
+    onLoadedMetadata: onLoadedMetadataProp,
+    className: inheritedClassName = ""
+  } = videoProps;
+  const videoSrc = videoProps.src;
   const videoContainerRef = useRef(null);
   const hiddenVideoRef = useRef(null);
   const canvasRef = useRef(null);
@@ -27076,8 +26781,11 @@ var CroppedVideoPlayer = forwardRef(({
     }
   }, []);
   useImperativeHandle(ref, () => ({
-    get player() {
-      return hiddenVideoRef.current?.player || null;
+    get hls() {
+      return hiddenVideoRef.current?.hls || null;
+    },
+    get video() {
+      return hiddenVideoRef.current?.video || null;
     },
     play: () => hiddenVideoRef.current?.play() || void 0,
     pause: () => hiddenVideoRef.current?.pause(),
@@ -27091,12 +26799,36 @@ var CroppedVideoPlayer = forwardRef(({
     paused: () => hiddenVideoRef.current?.paused() || true,
     mute: (isMuted) => hiddenVideoRef.current?.mute(isMuted) || false,
     volume: (level) => hiddenVideoRef.current?.volume(level) || 0,
+    playbackRate: (rate) => hiddenVideoRef.current?.playbackRate(rate) || 1,
     dispose: () => {
       hiddenVideoRef.current?.dispose();
       stopCanvasRendering();
     },
     get isReady() {
       return hiddenVideoRef.current?.isReady || false;
+    },
+    // For backward compatibility with Video.js API
+    get player() {
+      const video = hiddenVideoRef.current?.video;
+      if (!video) return null;
+      return {
+        el: () => video,
+        currentTime: () => video.currentTime || 0,
+        duration: () => video.duration || 0,
+        paused: () => video.paused ?? true,
+        play: () => video.play(),
+        pause: () => video.pause(),
+        muted: (val) => {
+          if (val !== void 0) video.muted = val;
+          return video.muted;
+        },
+        volume: (val) => {
+          if (val !== void 0) video.volume = val;
+          return video.volume;
+        },
+        error: () => null,
+        dispose: () => hiddenVideoRef.current?.dispose()
+      };
     }
   }), [stopCanvasRendering]);
   const calculateCanvasDimensions = useCallback(() => {
@@ -27156,24 +26888,38 @@ var CroppedVideoPlayer = forwardRef(({
     animationFrameRef.current = requestAnimationFrame(renderFrameToCanvas);
   }, [crop]);
   const handleVideoReady = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video player ready");
-    const videoEl = player.el().querySelector("video");
+    console.log("[CroppedHlsVideoPlayer] Video player ready");
+    const videoEl = hiddenVideoRef.current?.video;
     if (videoEl) {
       videoElementRef.current = videoEl;
       setIsVideoReady(true);
     }
-    videoProps.onReady?.(player);
-  }, [videoProps]);
+    onReadyProp?.(player);
+  }, [onReadyProp]);
   const handleVideoPlay = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video playing, starting canvas rendering");
+    console.log("[CroppedHlsVideoPlayer] Video playing, starting canvas rendering");
     if (crop && canvasRef.current) {
       setIsProcessing(true);
       renderFrameToCanvas();
     }
-    videoProps.onPlay?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
+    onPlayProp?.(player);
+  }, [crop, renderFrameToCanvas, onPlayProp]);
   const handleVideoPause = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video paused, stopping canvas rendering and CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video paused, stopping canvas rendering and CLEARING canvas");
+    stopCanvasRendering();
+    setIsProcessing(false);
+    if (canvasRef.current) {
+      const ctx = canvasRef.current.getContext("2d");
+      if (ctx) {
+        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+      }
+    }
+    onPauseProp?.(player);
+  }, [stopCanvasRendering, onPauseProp]);
+  const handleVideoEnded = useCallback((player) => {
+    console.log("[CroppedHlsVideoPlayer] Video ended, CLEARING canvas");
     stopCanvasRendering();
     setIsProcessing(false);
     if (canvasRef.current) {
@@ -27184,159 +26930,677 @@ var CroppedVideoPlayer = forwardRef(({
         ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
       }
     }
-    videoProps.onPause?.(player);
-  }, [stopCanvasRendering, videoProps]);
-  const handleVideoEnded = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video ended, CLEARING canvas");
-    stopCanvasRendering();
-    setIsProcessing(false);
-    if (canvasRef.current) {
-      const ctx = canvasRef.current.getContext("2d");
-      if (ctx) {
-        ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
+    onEndedProp?.(player);
+  }, [stopCanvasRendering, onEndedProp]);
+  const handleSeeking = useCallback((player) => {
+    console.log("[CroppedHlsVideoPlayer] Video seeking");
+    if (crop && !videoElementRef.current?.paused) {
+      renderFrameToCanvas();
+    }
+    onSeekingProp?.(player);
+  }, [crop, renderFrameToCanvas, onSeekingProp]);
+  const handleSeeked = useCallback((player) => {
+    console.log("[CroppedHlsVideoPlayer] Video seeked");
+    if (crop && !videoElementRef.current?.paused) {
+      renderFrameToCanvas();
+    }
+    onSeekedProp?.(player);
+  }, [crop, renderFrameToCanvas, onSeekedProp]);
+  const handleLoadedMetadata = useCallback((player) => {
+    console.log("[CroppedHlsVideoPlayer] Video metadata loaded");
+    calculateCanvasDimensions();
+    onLoadedMetadataProp?.(player);
+  }, [calculateCanvasDimensions, onLoadedMetadataProp]);
+  useEffect(() => {
+    calculateCanvasDimensions();
+    const handleResize = () => {
+      calculateCanvasDimensions();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [calculateCanvasDimensions]);
+  useLayoutEffect(() => {
+    if (canvasRef.current && crop) {
+      const canvas = canvasRef.current;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        console.log("[CroppedHlsVideoPlayer] Source changing - CLEARING CANVAS IMMEDIATELY");
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = "black";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+      }
+    }
+  }, [videoSrc, crop]);
+  useEffect(() => {
+    return () => {
+      stopCanvasRendering();
+    };
+  }, [stopCanvasRendering]);
+  if (!crop) {
+    return /* @__PURE__ */ jsx(HlsVideoPlayer, { ref, ...videoProps, onClick });
+  }
+  const handleClickWithIndicator = () => {
+    if (!onClick || !hiddenVideoRef.current?.video) return;
+    const video = hiddenVideoRef.current.video;
+    const willBePlaying = video.paused;
+    setIndicatorIsPlaying(willBePlaying);
+    setShowIndicator(false);
+    setTimeout(() => {
+      indicatorKeyRef.current += 1;
+      setShowIndicator(true);
+    }, 0);
+    onClick();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: videoContainerRef,
+      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${inheritedClassName}`,
+      onClick: handleClickWithIndicator,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
+          HlsVideoPlayer,
+          {
+            ref: hiddenVideoRef,
+            ...videoProps,
+            onReady: handleVideoReady,
+            onPlay: handleVideoPlay,
+            onPause: handleVideoPause,
+            onEnded: handleVideoEnded,
+            onSeeking: handleSeeking,
+            onSeeked: handleSeeked,
+            onLoadedMetadata: handleLoadedMetadata,
+            onLoadedData: videoProps.onLoadedData,
+            onPlaying: videoProps.onPlaying,
+            onLoadingChange: videoProps.onLoadingChange
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            width: canvasDimensions.width,
+            height: canvasDimensions.height,
+            className: "max-w-full max-h-full",
+            style: {
+              display: isVideoReady ? "block" : "none",
+              width: `${canvasDimensions.width}px`,
+              height: `${canvasDimensions.height}px`
+            }
+          }
+        ),
+        !isVideoReady && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
+        debug && isVideoReady && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            "Crop: ",
+            crop.x,
+            ",",
+            crop.y,
+            " ",
+            crop.width,
+            "x",
+            crop.height,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            "Canvas: ",
+            canvasDimensions.width,
+            "x",
+            canvasDimensions.height,
+            "px"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            "Processing: ",
+            isProcessing ? "Yes" : "No"
+          ] })
+        ] }),
+        onClick && /* @__PURE__ */ jsx(
+          PlayPauseIndicator,
+          {
+            show: showIndicator,
+            isPlaying: indicatorIsPlaying
+          },
+          indicatorKeyRef.current
+        )
+      ]
+    }
+  );
+});
+CroppedHlsVideoPlayer.displayName = "CroppedHlsVideoPlayer";
+var CroppedVideoPlayer = CroppedHlsVideoPlayer;
+var getSupabaseClient2 = () => {
+  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
+  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+  if (!url || !key) {
+    throw new Error("Supabase configuration missing");
+  }
+  return createClient(url, key);
+};
+var getAuthToken3 = async () => {
+  try {
+    const supabase = getSupabaseClient2();
+    const { data: { session } } = await supabase.auth.getSession();
+    return session?.access_token || null;
+  } catch (error) {
+    console.error("[useWorkspaceCrop] Error getting auth token:", error);
+    return null;
+  }
+};
+function useWorkspaceCrop(workspaceId) {
+  const [crop, setCrop] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (!workspaceId) {
+      setIsLoading(false);
+      return;
+    }
+    const fetchCrop = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const token = await getAuthToken3();
+        if (!token) {
+          throw new Error("Authentication required");
+        }
+        const response = await fetch("/api/clips/supabase", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+          },
+          body: JSON.stringify({
+            action: "crop",
+            workspaceId
+          })
+        });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch crop: ${response.statusText}`);
+        }
+        const data = await response.json();
+        console.log(`[useWorkspaceCrop] Fetched crop for workspace ${workspaceId}:`, data.crop);
+        setCrop(data.crop);
+      } catch (err) {
+        console.error("[useWorkspaceCrop] Error fetching crop:", err);
+        setError(err instanceof Error ? err.message : "Failed to fetch crop configuration");
+        setCrop(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchCrop();
+  }, [workspaceId]);
+  return { crop, isLoading, error };
+}
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("animate-pulse rounded-md bg-muted", className), ...props });
+}
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-11 sm:h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 touch-manipulation",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          className: cn(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+var LoadingOverlay = ({
+  isVisible,
+  message = "Loading...",
+  className
+}) => {
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: { duration: 0.2 },
+      className: `fixed inset-0 z-[100] flex items-center justify-center bg-black/30 backdrop-blur-sm ${className || ""}`,
+      "aria-modal": "true",
+      role: "dialog",
+      children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center space-y-3 rounded-lg bg-white p-8 shadow-xl", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message }) })
+    }
+  );
+};
+var LoadingOverlay_default = LoadingOverlay;
+var TimeDisplay = ({ className, variant = "default" }) => {
+  const { dateTimeConfig } = useDashboardConfig();
+  const [time2, setTime] = useState("");
+  const dbTimezone = useAppTimezone();
+  const timezoneToDisplay = dbTimezone || dateTimeConfig?.defaultTimezone || "UTC";
+  const localeToUse = dateTimeConfig?.defaultLocale || "en-US";
+  const timeSuffix = "";
+  useEffect(() => {
+    const updateTime = () => {
+      const now2 = /* @__PURE__ */ new Date();
+      const effectiveFormatOptions = {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: true,
+        timeZone: timezoneToDisplay,
+        ...dateTimeConfig?.timeFormatOptions || {}
+        // Allow override from config
+      };
+      try {
+        setTime(new Intl.DateTimeFormat(localeToUse, effectiveFormatOptions).format(now2));
+      } catch (e) {
+        console.error("Error formatting time:", e);
+        setTime("Error");
+      }
+    };
+    updateTime();
+    const interval = setInterval(updateTime, 1e3);
+    return () => clearInterval(interval);
+  }, [timezoneToDisplay, dateTimeConfig?.timeFormatOptions, localeToUse]);
+  if (!time2) return null;
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxs("span", { className: className || "", children: [
+      time2,
+      " ",
+      timeSuffix
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: -5 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3 },
+      className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-[var(--primary-DEFAULT)]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-[11px] font-medium text-gray-800 tabular-nums tracking-tight", children: [
+          time2,
+          " ",
+          timeSuffix
+        ] })
+      ]
+    }
+  );
+};
+var TimeDisplay_default = TimeDisplay;
+var DateDisplay = ({ className, variant = "default" }) => {
+  const { dateTimeConfig } = useDashboardConfig();
+  const [date, setDate] = useState("");
+  const timezoneToDisplay = dateTimeConfig?.defaultTimezone || "UTC";
+  const localeToUse = dateTimeConfig?.defaultLocale || "en-US";
+  useEffect(() => {
+    const getCurrentFormattedDate = () => {
+      const now2 = /* @__PURE__ */ new Date();
+      const effectiveFormatOptions = {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        timeZone: timezoneToDisplay,
+        ...dateTimeConfig?.dateFormatOptions || {}
+        // Allow override from config
+      };
+      try {
+        return new Intl.DateTimeFormat(localeToUse, effectiveFormatOptions).format(now2);
+      } catch (e) {
+        console.error("Error formatting date:", e);
+        return "Error";
+      }
+    };
+    const updateDate = () => {
+      setDate(getCurrentFormattedDate());
+    };
+    updateDate();
+    const interval = setInterval(() => {
+      const currentDateStr = getCurrentFormattedDate();
+      if (currentDateStr !== date) {
+        updateDate();
+      }
+    }, 60 * 1e3);
+    return () => clearInterval(interval);
+  }, [date, timezoneToDisplay, dateTimeConfig?.dateFormatOptions, localeToUse]);
+  if (!date) return null;
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsx("span", { className: className || "", children: date });
+  }
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 0, y: -5 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3 },
+      className: `flex items-center space-x-1.5 bg-white/60 backdrop-blur-sm px-2 py-0.5 rounded-md shadow-xs ${className || ""}`,
+      children: [
+        /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-3 w-3 text-blue-600", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z", clipRule: "evenodd" }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-gray-800 tracking-tight", children: date })
+      ]
+    }
+  );
+};
+var DateDisplay_default = DateDisplay;
+var Card3 = Card2;
+var CardHeader3 = CardHeader2;
+var CardTitle3 = CardTitle2;
+var CardContent3 = CardContent2;
+var MetricCard2 = ({ title, value, unit = "", trend = null }) => {
+  const getTrendColor = (trendValue) => {
+    if (trendValue === null || trendValue === void 0) return "";
+    return trendValue > 0 ? "text-green-500" : trendValue < 0 ? "text-red-500" : "text-gray-500";
+  };
+  const getTrendSymbol = (trendValue) => {
+    if (trendValue === null || trendValue === void 0) return "";
+    return trendValue > 0 ? "\u2191" : trendValue < 0 ? "\u2193" : "";
+  };
+  return /* @__PURE__ */ jsxs(Card3, { className: "bg-white", children: [
+    /* @__PURE__ */ jsx(CardHeader3, { className: "pb-2", children: /* @__PURE__ */ jsx(CardTitle3, { className: "text-sm font-medium text-gray-500", children: title }) }),
+    /* @__PURE__ */ jsx(CardContent3, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-2xl font-semibold", children: [
+        value,
+        unit && /* @__PURE__ */ jsx("span", { className: "ml-1 text-sm text-gray-500", children: unit })
+      ] }),
+      trend !== null && trend !== void 0 && // Check trend for null/undefined before accessing
+      /* @__PURE__ */ jsx("div", { className: `flex items-center ${getTrendColor(trend)}`, children: /* @__PURE__ */ jsxs("span", { className: "text-sm", children: [
+        getTrendSymbol(trend),
+        " ",
+        Math.abs(trend),
+        "%"
+      ] }) })
+    ] }) })
+  ] });
+};
+var MetricCard_default = MetricCard2;
+var TimePickerDropdown = ({
+  value,
+  onChange,
+  placeholder = "Select time",
+  className = "",
+  disabled = false
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const dropdownRef = useRef(null);
+  const inputRef = useRef(null);
+  const generateTimeSlots = () => {
+    const slots = [];
+    for (let hour = 0; hour < 24; hour++) {
+      for (let minute = 0; minute < 60; minute += 15) {
+        const time24 = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+        const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+        const ampm = hour < 12 ? "AM" : "PM";
+        const time12 = `${hour12}:${minute.toString().padStart(2, "0")} ${ampm}`;
+        slots.push({ value: time24, label: time12 });
+      }
+    }
+    return slots;
+  };
+  const timeSlots = generateTimeSlots();
+  const filteredSlots = timeSlots.filter(
+    (slot) => slot.label.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  const getDisplayValue = (value2) => {
+    if (!value2) return "";
+    const normalizedValue = value2.substring(0, 5);
+    const slot = timeSlots.find((s) => s.value === normalizedValue);
+    return slot ? slot.label : value2;
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchTerm("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      setIsOpen(false);
+      setSearchTerm("");
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filteredSlots.length > 0) {
+        onChange(filteredSlots[0].value);
+        setIsOpen(false);
+        setSearchTerm("");
       }
     }
-    videoProps.onEnded?.(player);
-  }, [stopCanvasRendering, videoProps]);
-  const handleSeeking = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video seeking");
-    if (crop && !player.paused()) {
-      renderFrameToCanvas();
-    }
-    videoProps.onSeeking?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
-  const handleSeeked = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video seeked");
-    if (crop && !player.paused()) {
-      renderFrameToCanvas();
+  };
+  const handleSelect = (timeValue) => {
+    onChange(timeValue);
+    setIsOpen(false);
+    setSearchTerm("");
+  };
+  const handleToggle = () => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+    if (!isOpen) {
+      setTimeout(() => inputRef.current?.focus(), 100);
     }
-    videoProps.onSeeked?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
-  const handleLoadedMetadata = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video metadata loaded");
-    calculateCanvasDimensions();
-    videoProps.onLoadedMetadata?.(player);
-  }, [calculateCanvasDimensions, videoProps]);
-  useEffect(() => {
-    calculateCanvasDimensions();
-    const handleResize = () => {
-      calculateCanvasDimensions();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleToggle,
+        disabled,
+        className: `
+          w-full px-3 py-2 text-left bg-white border border-gray-300 rounded-md shadow-sm
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500
+          hover:border-gray-400 transition-colors duration-200
+          ${disabled ? "bg-gray-50 cursor-not-allowed" : "cursor-pointer"}
+          ${isOpen ? "ring-2 ring-blue-500 border-blue-500" : ""}
+        `,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4 text-gray-400" }),
+            /* @__PURE__ */ jsx("span", { className: `text-sm ${value ? "text-gray-900" : "text-gray-500"}`, children: value ? getDisplayValue(value) : placeholder })
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: `h-4 w-4 text-gray-400 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+            }
+          )
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-gray-200", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          placeholder: "Search time...",
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value),
+          onKeyDown: handleKeyDown,
+          className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "overflow-y-auto max-h-48", children: filteredSlots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-gray-500 text-center", children: "No times found" }) : filteredSlots.map((slot) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => handleSelect(slot.value),
+          className: `
+                    w-full px-3 py-2 text-left text-sm hover:bg-blue-50 hover:text-blue-600
+                    transition-colors duration-150 border-b border-gray-100 last:border-b-0
+                    ${slot.value === value ? "bg-blue-50 text-blue-600 font-medium" : "text-gray-700"}
+                  `,
+          children: slot.label
+        },
+        slot.value
+      )) })
+    ] })
+  ] });
+};
+var SilentErrorBoundary = class extends React23__default.Component {
+  constructor(props) {
+    super(props);
+    this.handleClearAndReload = () => {
+      console.log("[ErrorBoundary] User initiated reset");
+      if (typeof window !== "undefined") {
+        try {
+          localStorage.clear();
+          sessionStorage.clear();
+          console.log("[ErrorBoundary] Cleared all storage");
+        } catch (error) {
+          console.error("[ErrorBoundary] Failed to clear storage:", error);
+        }
+      }
+      window.location.href = "/login";
     };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
+    this.state = {
+      hasError: false,
+      errorCount: 0,
+      lastError: null,
+      errorInfo: null
     };
-  }, [calculateCanvasDimensions]);
-  useLayoutEffect(() => {
-    if (canvasRef.current && crop) {
-      const canvas = canvasRef.current;
-      const ctx = canvas.getContext("2d");
-      if (ctx) {
-        console.log("[CroppedVideoPlayer] Source changing - CLEARING CANVAS IMMEDIATELY");
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    console.error("[ErrorBoundary] Caught render error:", {
+      error: error.message,
+      stack: error.stack,
+      componentStack: errorInfo.componentStack,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    this.setState((prev) => ({
+      errorCount: prev.errorCount + 1,
+      lastError: error,
+      errorInfo
+    }));
+    try {
+      if (typeof window !== "undefined" && window.mixpanel) {
+        window.mixpanel.track("React Render Error", {
+          error: error.message,
+          component: errorInfo.componentStack?.split("\n")[1] || "unknown",
+          errorCount: this.state.errorCount + 1
+        });
       }
+    } catch (analyticsError) {
+      console.warn("[ErrorBoundary] Analytics tracking failed:", analyticsError);
     }
-  }, [videoProps.src, crop]);
-  useEffect(() => {
-    return () => {
-      stopCanvasRendering();
-    };
-  }, [stopCanvasRendering]);
-  if (!crop) {
-    return /* @__PURE__ */ jsx(VideoPlayer, { ref, ...videoProps, onClick });
   }
-  const handleClickWithIndicator = () => {
-    if (!onClick || !hiddenVideoRef.current?.player) return;
-    const player = hiddenVideoRef.current.player;
-    const willBePlaying = player.paused();
-    setIndicatorIsPlaying(willBePlaying);
-    setShowIndicator(false);
-    setTimeout(() => {
-      indicatorKeyRef.current += 1;
-      setShowIndicator(true);
-    }, 0);
-    onClick();
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: videoContainerRef,
-      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${videoProps.className || ""}`,
-      onClick: handleClickWithIndicator,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden", children: /* @__PURE__ */ jsx(
-          VideoPlayer,
-          {
-            ref: hiddenVideoRef,
-            ...videoProps,
-            onReady: handleVideoReady,
-            onPlay: handleVideoPlay,
-            onPause: handleVideoPause,
-            onEnded: handleVideoEnded,
-            onSeeking: handleSeeking,
-            onSeeked: handleSeeked,
-            onLoadedMetadata: handleLoadedMetadata,
-            onLoadedData: videoProps.onLoadedData,
-            onPlaying: videoProps.onPlaying,
-            onLoadingChange: videoProps.onLoadingChange
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "canvas",
-          {
-            ref: canvasRef,
-            width: canvasDimensions.width,
-            height: canvasDimensions.height,
-            className: "max-w-full max-h-full",
-            style: {
-              display: isVideoReady ? "block" : "none",
-              width: `${canvasDimensions.width}px`,
-              height: `${canvasDimensions.height}px`
-            }
-          }
-        ),
-        !isVideoReady && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
-        debug && isVideoReady && /* @__PURE__ */ jsxs("div", { className: "absolute top-2 left-2 bg-black/80 text-white text-xs p-2 rounded font-mono", children: [
-          /* @__PURE__ */ jsxs("div", { children: [
-            "Crop: ",
-            crop.x,
-            ",",
-            crop.y,
-            " ",
-            crop.width,
-            "x",
-            crop.height,
-            "%"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            "Canvas: ",
-            canvasDimensions.width,
-            "x",
-            canvasDimensions.height,
-            "px"
-          ] }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            "Processing: ",
-            isProcessing ? "Yes" : "No"
-          ] })
-        ] }),
-        onClick && /* @__PURE__ */ jsx(
-          PlayPauseIndicator,
-          {
-            show: showIndicator,
-            isPlaying: indicatorIsPlaying
-          },
-          indicatorKeyRef.current
-        )
-      ]
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children;
     }
-  );
-});
-CroppedVideoPlayer.displayName = "CroppedVideoPlayer";
+    return /* @__PURE__ */ jsx("div", { className: "flex h-screen w-screen items-center justify-center bg-slate-50", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center space-y-6 text-center", children: [
+      /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading Dashboard..." }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Taking longer than usual..." }),
+      /* @__PURE__ */ jsx("div", { className: "pt-4", children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            this.handleClearAndReload();
+          },
+          className: "text-xs text-gray-400 hover:text-gray-600 underline transition-colors",
+          children: "Reset and try again"
+        }
+      ) }),
+      process.env.NODE_ENV === "development" && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-400 italic mt-4", children: "Check console for error details" })
+    ] }) });
+  }
+};
 var BackButton = ({
   onClick,
   text = "Back",
@@ -27701,70 +27965,6 @@ var NewClipsNotification = ({
     }
   );
 };
-var getSupabaseClient2 = () => {
-  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
-  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
-  if (!url || !key) {
-    throw new Error("Supabase configuration missing");
-  }
-  return createClient(url, key);
-};
-var getAuthToken3 = async () => {
-  try {
-    const supabase = getSupabaseClient2();
-    const { data: { session } } = await supabase.auth.getSession();
-    return session?.access_token || null;
-  } catch (error) {
-    console.error("[useWorkspaceCrop] Error getting auth token:", error);
-    return null;
-  }
-};
-function useWorkspaceCrop(workspaceId) {
-  const [crop, setCrop] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(null);
-  useEffect(() => {
-    if (!workspaceId) {
-      setIsLoading(false);
-      return;
-    }
-    const fetchCrop = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const token = await getAuthToken3();
-        if (!token) {
-          throw new Error("Authentication required");
-        }
-        const response = await fetch("/api/clips/supabase", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "Authorization": `Bearer ${token}`
-          },
-          body: JSON.stringify({
-            action: "crop",
-            workspaceId
-          })
-        });
-        if (!response.ok) {
-          throw new Error(`Failed to fetch crop: ${response.statusText}`);
-        }
-        const data = await response.json();
-        console.log(`[useWorkspaceCrop] Fetched crop for workspace ${workspaceId}:`, data.crop);
-        setCrop(data.crop);
-      } catch (err) {
-        console.error("[useWorkspaceCrop] Error fetching crop:", err);
-        setError(err instanceof Error ? err.message : "Failed to fetch crop configuration");
-        setCrop(null);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchCrop();
-  }, [workspaceId]);
-  return { crop, isLoading, error };
-}
 var parseCycleTime = (value) => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -29020,6 +29220,11 @@ var BottlenecksContent = ({
     return Number.isFinite(numericValue) ? numericValue : null;
   })();
   const videoRef = useRef(null);
+  const videoPlayerOptions = useMemo(() => ({
+    fluid: false,
+    responsive: false,
+    fill: false
+  }), []);
   const [initialFilter, setInitialFilter] = useState("");
   const currentIndexRef = useRef(0);
   const activeFilterRef = useRef(initialFilter);
@@ -29030,6 +29235,7 @@ var BottlenecksContent = ({
   const [duration, setDuration] = useState(0);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [currentClipId, setCurrentClipId] = useState(null);
+  const [playbackSpeed, setPlaybackSpeed] = useState(1);
   const [isTransitioning, setIsTransitioning] = useState(false);
   const [pendingVideo, setPendingVideo] = useState(null);
   const [isVideoBuffering, setIsVideoBuffering] = useState(false);
@@ -29047,6 +29253,31 @@ var BottlenecksContent = ({
   const [categoryMetadata, setCategoryMetadata] = useState([]);
   const [currentMetadataIndex, setCurrentMetadataIndex] = useState(0);
   const [metadataCache, setMetadataCache] = useState({});
+  const invalidateMetadataCache = useCallback((categories) => {
+    setMetadataCache((prevCache) => {
+      if (!prevCache || Object.keys(prevCache).length === 0) {
+        return prevCache;
+      }
+      const targetCategories = categories ? (Array.isArray(categories) ? categories : [categories]).filter(Boolean) : null;
+      let updatedCache = null;
+      const shouldInvalidate = (key) => {
+        if (!targetCategories || targetCategories.length === 0) {
+          return true;
+        }
+        const [categoryId] = key.split("-");
+        return targetCategories.includes(categoryId);
+      };
+      Object.keys(prevCache).forEach((cacheKey) => {
+        if (shouldInvalidate(cacheKey)) {
+          if (!updatedCache) {
+            updatedCache = { ...prevCache };
+          }
+          delete updatedCache[cacheKey];
+        }
+      });
+      return updatedCache || prevCache;
+    });
+  }, []);
   const [triageClips, setTriageClips] = useState([]);
   const [isLoadingTriageClips, setIsLoadingTriageClips] = useState(false);
   const [isFullscreen, setIsFullscreen] = useState(false);
@@ -29066,6 +29297,12 @@ var BottlenecksContent = ({
     onNewClips: (notification) => {
       console.log(`[BottlenecksContent] New clips detected:`, notification);
       if (notification.clips.length > 0) {
+        const categoryIds = notification.clips.map((clip) => clip.clip_type).filter(Boolean).map((value) => String(value));
+        if (categoryIds.length > 0) {
+          invalidateMetadataCache(categoryIds);
+        } else {
+          invalidateMetadataCache();
+        }
         fetchClipCounts();
       }
     }
@@ -29112,24 +29349,37 @@ var BottlenecksContent = ({
     shift: shift || "0"
   });
   useEffect(() => {
-    if (clipTypes.length > 0 && !initialFilter) {
-      const priorityOrder = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
-      let selectedType = null;
-      for (const priorityType of priorityOrder) {
-        const type = clipTypes.find((t) => t.type === priorityType && (dynamicCounts[t.type] || 0) > 0);
-        if (type) {
-          selectedType = type;
-          break;
+    if (clipTypes.length > 0) {
+      const currentFilterCount = initialFilter ? dynamicCounts[initialFilter] || 0 : 0;
+      const hasAnyCounts = Object.values(dynamicCounts).some((c) => c > 0);
+      const userHasNotNavigated = !initialFilter || activeFilterRef.current === initialFilter;
+      const shouldRunSelection = !initialFilter || userHasNotNavigated && currentFilterCount === 0 && hasAnyCounts;
+      if (shouldRunSelection) {
+        let selectedType = null;
+        if (clipTypes.length === 1) {
+          selectedType = clipTypes[0];
+        } else {
+          const priorityOrder = ["cycle_completion", "fast-cycles", "slow-cycles", "idle_time"];
+          for (const priorityType of priorityOrder) {
+            const type = clipTypes.find((t) => t.type === priorityType && (dynamicCounts[t.type] || 0) > 0);
+            if (type) {
+              selectedType = type;
+              break;
+            }
+          }
+          if (!selectedType) {
+            selectedType = clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0);
+          }
+          if (!selectedType) {
+            selectedType = clipTypes[0];
+          }
+        }
+        if (selectedType && selectedType.type !== initialFilter) {
+          console.log(`[BottlenecksContent] Auto-selecting filter: ${selectedType.type} (count: ${dynamicCounts[selectedType.type] || 0})`);
+          setInitialFilter(selectedType.type);
+          setActiveFilter(selectedType.type);
+          activeFilterRef.current = selectedType.type;
         }
-      }
-      if (!selectedType) {
-        selectedType = clipTypes.find((type) => (dynamicCounts[type.type] || 0) > 0);
-      }
-      const firstType = selectedType || clipTypes[0];
-      if (firstType) {
-        setInitialFilter(firstType.type);
-        setActiveFilter(firstType.type);
-        activeFilterRef.current = firstType.type;
       }
     }
   }, [clipTypes, dynamicCounts, initialFilter]);
@@ -29181,7 +29431,7 @@ var BottlenecksContent = ({
     } finally {
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts]);
+  }, [workspaceId, date, s3ClipsService, effectiveShift, dashboardConfig, updateClipCounts, timezone, totalOutput]);
   const loadingCategoryRef = useRef(null);
   const loadFirstVideoForCategory = useCallback(async (category) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
@@ -29271,15 +29521,16 @@ var BottlenecksContent = ({
       loadingCategoryRef.current = null;
       fetchInProgressRef.current.delete(operationKey);
     }
-  }, [workspaceId, date, s3ClipsService, mergedCounts, effectiveShift]);
+  }, [workspaceId, date, s3ClipsService, mergedCounts, effectiveShift, timezone]);
   const handleRefreshClips = useCallback(async () => {
     console.log("[BottlenecksContent] Refreshing clips after new additions");
     acknowledgeNewClips();
+    invalidateMetadataCache();
     await fetchClipCounts();
     if (activeFilter && mergedCounts[activeFilter] > 0) {
       await loadFirstVideoForCategory(activeFilter);
     }
-  }, [acknowledgeNewClips, fetchClipCounts, activeFilter, mergedCounts, loadFirstVideoForCategory]);
+  }, [acknowledgeNewClips, fetchClipCounts, activeFilter, mergedCounts, loadFirstVideoForCategory, invalidateMetadataCache]);
   useEffect(() => {
     if (s3ClipsService) {
       fetchClipCounts();
@@ -29449,38 +29700,38 @@ var BottlenecksContent = ({
       loadingTimeoutRef.current = null;
     }
   }, []);
-  const loadCategoryMetadata = useCallback(async (categoryId, autoLoadFirstVideo = false) => {
+  const loadCategoryMetadata = useCallback(async (categoryId, autoLoadFirstVideo = false, forceRefresh = false) => {
     if (!workspaceId) {
       return;
     }
-    const cacheKey = `${categoryId}-${date || getOperationalDate(timezone)}-${effectiveShift}`;
-    if (metadataCache[cacheKey]) {
-      console.log(`[BottlenecksContent] Using cached metadata for ${categoryId}`);
-      setCategoryMetadata(metadataCache[cacheKey]);
-      categoryMetadataRef.current = metadataCache[cacheKey];
-      if (autoLoadFirstVideo && metadataCache[cacheKey].length > 0 && s3ClipsService) {
-        const firstClipMeta = metadataCache[cacheKey][0];
-        try {
-          const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
-          if (video && isMountedRef.current) {
-            setCurrentClipId(firstClipMeta.clipId);
-            setAllVideos([video]);
-            setCurrentIndex(0);
-            setCurrentMetadataIndex(0);
-            currentMetadataIndexRef.current = 0;
-            setIsCategoryLoading(false);
-            console.log(`[BottlenecksContent] Auto-loaded first video from cache: ${video.id} (1/${metadataCache[cacheKey].length})`);
+    const resolvedDate = date || getOperationalDate(timezone);
+    const cacheKey = `${categoryId}-${resolvedDate}-${effectiveShift}`;
+    const cachedMetadata = !forceRefresh ? metadataCache[cacheKey] : void 0;
+    try {
+      if (cachedMetadata) {
+        console.log(`[BottlenecksContent] Using cached metadata for ${categoryId}`);
+        setCategoryMetadata(cachedMetadata);
+        categoryMetadataRef.current = cachedMetadata;
+        if (autoLoadFirstVideo && cachedMetadata.length > 0 && s3ClipsService) {
+          const firstClipMeta = cachedMetadata[0];
+          try {
+            const video = await s3ClipsService.getClipById(firstClipMeta.clipId);
+            if (video && isMountedRef.current) {
+              setCurrentClipId(firstClipMeta.clipId);
+              setAllVideos([video]);
+              setCurrentIndex(0);
+              setCurrentMetadataIndex(0);
+              currentMetadataIndexRef.current = 0;
+              console.log(`[BottlenecksContent] Auto-loaded first video from cache: ${video.id} (1/${cachedMetadata.length})`);
+            }
+          } catch (error2) {
+            console.error(`[BottlenecksContent] Error loading first video from cache:`, error2);
+            clearLoadingState();
           }
-        } catch (error2) {
-          console.error(`[BottlenecksContent] Error loading first video from cache:`, error2);
-          setIsCategoryLoading(false);
-          clearLoadingState();
         }
+        return;
       }
-      return;
-    }
-    try {
-      console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}`);
+      console.log(`[BottlenecksContent] Loading metadata for category: ${categoryId}${forceRefresh ? " (force refresh)" : ""}`);
       const { createClient: createClient5 } = await import('@supabase/supabase-js');
       const supabase = createClient5(
         process.env.NEXT_PUBLIC_SUPABASE_URL || "",
@@ -29505,8 +29756,8 @@ var BottlenecksContent = ({
             action: "percentile-clips",
             percentileAction: percentileType,
             workspaceId,
-            startDate: `${date || getOperationalDate(timezone)}T00:00:00Z`,
-            endDate: `${date || getOperationalDate(timezone)}T23:59:59Z`,
+            startDate: `${resolvedDate}T00:00:00Z`,
+            endDate: `${resolvedDate}T23:59:59Z`,
             percentile: 10,
             shiftId: effectiveShift,
             limit: 100
@@ -29522,7 +29773,7 @@ var BottlenecksContent = ({
           body: JSON.stringify({
             action: "clip-metadata",
             workspaceId,
-            date: date || getOperationalDate(timezone),
+            date: resolvedDate,
             shift: effectiveShift,
             category: categoryId,
             page: 1,
@@ -29567,19 +29818,22 @@ var BottlenecksContent = ({
               setCurrentIndex(0);
               setCurrentMetadataIndex(0);
               currentMetadataIndexRef.current = 0;
-              setIsCategoryLoading(false);
               console.log(`[BottlenecksContent] Auto-loaded first video: ${video.id} (1/${metadataClips.length})`);
             }
           } catch (error2) {
             console.error(`[BottlenecksContent] Error loading first video:`, error2);
-            setIsCategoryLoading(false);
           }
         }
+      } else {
+        setCategoryMetadata([]);
+        categoryMetadataRef.current = [];
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading category metadata:`, error2);
+    } finally {
+      setIsCategoryLoading(false);
     }
-  }, [workspaceId, date, effectiveShift, isPercentileCategory, metadataCache, s3ClipsService]);
+  }, [workspaceId, date, effectiveShift, isPercentileCategory, metadataCache, s3ClipsService, timezone, clearLoadingState]);
   const loadAndPlayClipById = useCallback(async (clipId, categoryId, position) => {
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
     console.log(`[BottlenecksContent] Loading clip by ID: ${clipId}, category=${categoryId}, position=${position}`);
@@ -29603,21 +29857,31 @@ var BottlenecksContent = ({
     }
     try {
       await loadCategoryMetadata(categoryId, false);
-      const metadataArray = categoryMetadataRef.current;
-      if (metadataArray.length > 0) {
-        const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
-        if (clickedClipIndex !== -1) {
-          setCurrentMetadataIndex(clickedClipIndex);
-          currentMetadataIndexRef.current = clickedClipIndex;
-          const video = await s3ClipsService.getClipById(clipId);
-          if (video) {
-            setPendingVideo(video);
-            setCurrentClipId(clipId);
-            setAllVideos([video]);
-            setCurrentIndex(0);
-            console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
-          }
-        }
+      let metadataArray = categoryMetadataRef.current;
+      const clipExistsInMetadata = metadataArray.some((clip) => clip.clipId === clipId);
+      if (metadataArray.length === 0 || !clipExistsInMetadata) {
+        console.warn(`[BottlenecksContent] Clip ${clipId} not found in metadata for ${categoryId} (cache hit: ${metadataArray.length > 0}) - forcing refresh`);
+        await loadCategoryMetadata(categoryId, false, true);
+        metadataArray = categoryMetadataRef.current;
+      }
+      if (metadataArray.length === 0) {
+        throw new Error(`No metadata available for category ${categoryId}`);
+      }
+      const clickedClipIndex = metadataArray.findIndex((clip) => clip.clipId === clipId);
+      if (clickedClipIndex === -1) {
+        throw new Error(`Clip ${clipId} not found after metadata refresh`);
+      }
+      setCurrentMetadataIndex(clickedClipIndex);
+      currentMetadataIndexRef.current = clickedClipIndex;
+      const video = await s3ClipsService.getClipById(clipId);
+      if (video) {
+        setPendingVideo(video);
+        setCurrentClipId(clipId);
+        setAllVideos([video]);
+        setCurrentIndex(0);
+        console.log(`[BottlenecksContent] Loaded clip ${clipId} (${clickedClipIndex + 1}/${metadataArray.length})`);
+      } else {
+        throw new Error(`Failed to load video data for clip ${clipId}`);
       }
     } catch (error2) {
       console.error(`[BottlenecksContent] Error loading clip by ID (${clipId}):`, error2);
@@ -29631,7 +29895,7 @@ var BottlenecksContent = ({
         clearLoadingState();
       }
     }
-  }, [workspaceId, s3ClipsService, date, effectiveShift, updateActiveFilter, clearLoadingState]);
+  }, [workspaceId, s3ClipsService, updateActiveFilter, clearLoadingState, loadCategoryMetadata]);
   useCallback(async (categoryId, clipIndex) => {
     console.warn("[BottlenecksContent] loadAndPlayClip is deprecated, use loadAndPlayClipById instead");
     if (!workspaceId || !s3ClipsService || !isMountedRef.current) return;
@@ -29658,7 +29922,7 @@ var BottlenecksContent = ({
       });
       setIsNavigating(false);
     }
-  }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById]);
+  }, [workspaceId, s3ClipsService, date, effectiveShift, loadAndPlayClipById, timezone]);
   const handleNext = useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -29675,8 +29939,18 @@ var BottlenecksContent = ({
     }
     try {
       const currentMetaIndex = currentMetadataIndexRef.current;
-      const metadataArray = categoryMetadataRef.current;
+      let metadataArray = categoryMetadataRef.current;
+      if (metadataArray.length === 0) {
+        console.log(`[handleNext] Metadata empty for ${currentFilter}, loading before navigation`);
+        await loadCategoryMetadata(currentFilter, false);
+        metadataArray = categoryMetadataRef.current;
+      }
       console.log(`[handleNext] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (metadataArray.length === 0) {
+        console.warn("[handleNext] No metadata available after refresh - stopping navigation");
+        clearLoadingState();
+        return;
+      }
       if (currentMetaIndex < metadataArray.length - 1) {
         const nextMetadataIndex = currentMetaIndex + 1;
         const nextClipMeta = metadataArray[nextMetadataIndex];
@@ -29711,7 +29985,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const handlePrevious = useCallback(async () => {
     if (!isMountedRef.current) return;
     const currentFilter = activeFilterRef.current;
@@ -29728,8 +30002,18 @@ var BottlenecksContent = ({
     }
     try {
       const currentMetaIndex = currentMetadataIndexRef.current;
-      const metadataArray = categoryMetadataRef.current;
+      let metadataArray = categoryMetadataRef.current;
+      if (metadataArray.length === 0) {
+        console.log(`[handlePrevious] Metadata empty for ${currentFilter}, loading before navigation`);
+        await loadCategoryMetadata(currentFilter, false);
+        metadataArray = categoryMetadataRef.current;
+      }
       console.log(`[handlePrevious] Unified navigation: ${currentFilter}, metadata index: ${currentMetaIndex}/${metadataArray.length}`);
+      if (metadataArray.length === 0) {
+        console.warn("[handlePrevious] No metadata available after refresh - stopping navigation");
+        clearLoadingState();
+        return;
+      }
       if (currentMetaIndex > 0) {
         const prevMetadataIndex = currentMetaIndex - 1;
         const prevClipMeta = metadataArray[prevMetadataIndex];
@@ -29760,7 +30044,7 @@ var BottlenecksContent = ({
       });
       clearLoadingState();
     }
-  }, [clearLoadingState, s3ClipsService]);
+  }, [clearLoadingState, s3ClipsService, loadCategoryMetadata]);
   const currentVideo = useMemo(() => {
     if (!filteredVideos || filteredVideos.length === 0 || currentIndex >= filteredVideos.length) {
       return null;
@@ -29773,7 +30057,10 @@ var BottlenecksContent = ({
     if (error?.isRetrying) {
       setError(null);
     }
-  }, [error]);
+    if (videoRef.current?.playbackRate && playbackSpeed !== 1) {
+      videoRef.current.playbackRate(playbackSpeed);
+    }
+  }, [error, playbackSpeed]);
   const handleVideoPlay = useCallback(async (player) => {
     setIsPlaying(true);
     setIsInitialLoading(false);
@@ -29943,7 +30230,13 @@ var BottlenecksContent = ({
       player.pause();
     }
   };
-  const toggleFullscreen = useCallback((e) => {
+  const handlePlaybackSpeedChange = useCallback((speed) => {
+    setPlaybackSpeed(speed);
+    if (videoRef.current?.playbackRate) {
+      videoRef.current.playbackRate(speed);
+    }
+  }, []);
+  useCallback((e) => {
     e.stopPropagation();
     setIsFullscreen((prev) => !prev);
   }, []);
@@ -30117,12 +30410,7 @@ var BottlenecksContent = ({
                   onLoadedData: handleLoadedData,
                   onPlaying: handleVideoPlaying,
                   onLoadingChange: handleVideoLoadingChange,
-                  options: {
-                    // Ensure full height is always visible - no cropping
-                    fluid: false,
-                    responsive: false,
-                    fill: false
-                  }
+                  options: videoPlayerOptions
                 }
               )
             }
@@ -30183,58 +30471,7 @@ var BottlenecksContent = ({
               /* @__PURE__ */ jsx("span", { className: "font-medium mr-2", children: getClipTypeLabel(currentVideo) }),
               /* @__PURE__ */ jsx("span", { className: "opacity-80 hidden sm:inline", children: currentVideo.description })
             ] }) })
-          ),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-white", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    togglePlayback();
-                  },
-                  className: "p-1.5 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
-                  "aria-label": isPlaying ? "Pause" : "Play",
-                  children: isPlaying ? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.118l-.001 3.764a1 1 0 001.555.832l3.196-1.882a1 1 0 000-1.664l-3.196-1.882z", clipRule: "evenodd" }) })
-                }
-              ),
-              /* @__PURE__ */ jsxs("span", { className: "text-xs font-mono px-2", children: [
-                formatTime2(currentTime),
-                " / ",
-                formatTime2(duration)
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "range",
-                min: "0",
-                max: duration || 0,
-                value: currentTime,
-                onChange: (e) => {
-                  if (videoRef.current) {
-                    videoRef.current.currentTime(Number(e.target.value));
-                  }
-                },
-                className: "flex-grow mx-3 h-2.5 bg-white/30 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-white/50 touch-manipulation",
-                style: {
-                  WebkitAppearance: "none",
-                  appearance: "none"
-                },
-                "aria-label": "Seek slider"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: toggleFullscreen,
-                className: "p-1.5 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
-                "aria-label": "Fullscreen",
-                title: "Expand to fullscreen",
-                children: /* @__PURE__ */ jsx(Maximize2, { className: "h-5 w-5" })
-              }
-            )
-          ] }) })
+          )
         ] }) }) }) : (
           /* Priority 5: Show "no clips found" only if we have counts and there are truly no clips for workspace */
           hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsx("div", { className: `flex items-center justify-center ${triageMode ? "h-full" : "h-[calc(100%-4rem)]"}`, children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
@@ -30452,11 +30689,7 @@ var BottlenecksContent = ({
                     onLoadedData: handleLoadedData,
                     onPlaying: handleVideoPlaying,
                     onLoadingChange: handleVideoLoadingChange,
-                    options: {
-                      fluid: false,
-                      responsive: false,
-                      fill: false
-                    }
+                    options: videoPlayerOptions
                   }
                 )
               }
@@ -30464,45 +30697,32 @@ var BottlenecksContent = ({
             (isTransitioning || isVideoBuffering && isInitialLoading) && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
             !isTransitioning && isVideoBuffering && !isInitialLoading && !error && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-30 flex items-center justify-center bg-black/60", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading video..." }) }),
             /* @__PURE__ */ jsx("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-300 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-white", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-                /* @__PURE__ */ jsx(
-                  "button",
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Speed:" }),
+                /* @__PURE__ */ jsxs(
+                  "select",
                   {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      togglePlayback();
-                    },
-                    className: "p-2 hover:bg-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50",
-                    "aria-label": isPlaying ? "Pause" : "Play",
-                    children: isPlaying ? /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1zm5 0a1 1 0 00-1 1v2a1 1 0 102 0V9a1 1 0 00-1-1z", clipRule: "evenodd" }) }) : /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.118l-.001 3.764a1 1 0 001.555.832l3.196-1.882a1 1 0 000-1.664l-3.196-1.882z", clipRule: "evenodd" }) })
+                    value: playbackSpeed,
+                    onChange: (e) => handlePlaybackSpeedChange(Number(e.target.value)),
+                    className: "px-2 py-1 bg-white/20 hover:bg-white/30 rounded text-sm font-medium cursor-pointer focus:outline-none focus:ring-2 focus:ring-white/50 transition-colors",
+                    "aria-label": "Playback speed",
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "0.25", children: "0.25x" }),
+                      /* @__PURE__ */ jsx("option", { value: "0.5", children: "0.5x" }),
+                      /* @__PURE__ */ jsx("option", { value: "0.75", children: "0.75x" }),
+                      /* @__PURE__ */ jsx("option", { value: "1", children: "1x" }),
+                      /* @__PURE__ */ jsx("option", { value: "1.25", children: "1.25x" }),
+                      /* @__PURE__ */ jsx("option", { value: "1.5", children: "1.5x" }),
+                      /* @__PURE__ */ jsx("option", { value: "1.75", children: "1.75x" }),
+                      /* @__PURE__ */ jsx("option", { value: "2", children: "2x" }),
+                      /* @__PURE__ */ jsx("option", { value: "3", children: "3x" }),
+                      /* @__PURE__ */ jsx("option", { value: "4", children: "4x" }),
+                      /* @__PURE__ */ jsx("option", { value: "5", children: "5x" }),
+                      /* @__PURE__ */ jsx("option", { value: "10", children: "10x" })
+                    ]
                   }
-                ),
-                /* @__PURE__ */ jsxs("span", { className: "text-sm font-mono px-2", children: [
-                  formatTime2(currentTime),
-                  " / ",
-                  formatTime2(duration)
-                ] })
+                )
               ] }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "range",
-                  min: "0",
-                  max: duration || 0,
-                  value: currentTime,
-                  onChange: (e) => {
-                    if (videoRef.current) {
-                      videoRef.current.currentTime(Number(e.target.value));
-                    }
-                  },
-                  className: "flex-grow mx-4 h-2.5 bg-white/30 rounded-full appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-white/50 touch-manipulation",
-                  style: {
-                    WebkitAppearance: "none",
-                    appearance: "none"
-                  },
-                  "aria-label": "Seek slider"
-                }
-              ),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ jsx(
                   "button",
@@ -37603,26 +37823,26 @@ var SingleVideoStream = ({
     const hlsStreamUrl = streamUrl || getCameraStreamUrl(workspaceName, baseUrl);
     console.log(`Using camera URL for ${workspaceName}: ${hlsStreamUrl}`);
     const mergedHlsConfig = { ...DEFAULT_HLS_CONFIG, ...hlsConfig };
-    if (Hls2.isSupported()) {
-      const hls = new Hls2(mergedHlsConfig);
+    if (Hls3.isSupported()) {
+      const hls = new Hls3(mergedHlsConfig);
       hlsRef.current = hls;
-      hls.on(Hls2.Events.MEDIA_ATTACHED, () => {
+      hls.on(Hls3.Events.MEDIA_ATTACHED, () => {
         console.log("HLS media attached");
         hls.loadSource(hlsStreamUrl);
       });
-      hls.on(Hls2.Events.MANIFEST_PARSED, () => {
+      hls.on(Hls3.Events.MANIFEST_PARSED, () => {
         console.log("HLS manifest parsed");
         attemptPlay(video);
       });
-      hls.on(Hls2.Events.ERROR, (_, data) => {
+      hls.on(Hls3.Events.ERROR, (_, data) => {
         if (data.fatal) {
           console.error("Fatal HLS error:", data.type, data.details);
           switch (data.type) {
-            case Hls2.ErrorTypes.NETWORK_ERROR:
+            case Hls3.ErrorTypes.NETWORK_ERROR:
               console.error("Fatal network error encountered");
               setError("Network error: Please check your connection");
               break;
-            case Hls2.ErrorTypes.MEDIA_ERROR:
+            case Hls3.ErrorTypes.MEDIA_ERROR:
               console.error("Fatal media error encountered, trying to recover");
               hls.recoverMediaError();
               break;
@@ -42383,9 +42603,9 @@ var MetricCards = memo(({ lineInfo }) => {
       animate: "animate",
       className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mb-2 md:h-[35vh] h-auto",
       children: [
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[200px] sm:h-[280px] md:h-auto lg:col-span-1 sm:col-span-2 lg:col-span-1", children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 mb-1 sm:mb-2 text-center", children: "Line Output" }),
-          /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-1.75rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
+          /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(
             OutputProgressChart,
             {
               currentOutput: lineInfo?.metrics.current_output || 0,
@@ -42393,9 +42613,9 @@ var MetricCards = memo(({ lineInfo }) => {
             }
           ) }) })
         ] }),
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
           /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: [
             /* @__PURE__ */ jsx("span", { className: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
             /* @__PURE__ */ jsxs("span", { className: "text-xl sm:text-2xl md:text-2xl lg:text-3xl text-gray-500 ml-1 sm:ml-2", children: [
               "/ ",
@@ -42403,9 +42623,9 @@ var MetricCards = memo(({ lineInfo }) => {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
+        /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
           /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxs("span", { className: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold ${(lineInfo?.metrics.avg_efficiency || 0) >= 90 ? "text-green-600" : (lineInfo?.metrics.avg_efficiency || 0) >= 70 ? "text-yellow-600" : "text-red-600"}`, children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxs("span", { className: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold ${(lineInfo?.metrics.avg_efficiency || 0) >= 90 ? "text-green-600" : (lineInfo?.metrics.avg_efficiency || 0) >= 70 ? "text-yellow-600" : "text-red-600"}`, children: [
             lineInfo?.metrics.avg_efficiency.toFixed(1),
             "%"
           ] }) })
@@ -51923,4 +52143,4 @@ function shuffleArray(array) {
   return shuffled;
 }
 
-export { ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, DiagnosisVideoModal, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, InvitationService, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserManagementService, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createInvitationService, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getNextUpdateInterval, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isSafari, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthStatus, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };
+export { ACTION_NAMES, AIAgentView_default as AIAgentView, AcceptInvite, AcceptInviteView_default as AcceptInviteView, AdvancedFilterDialog, AdvancedFilterPanel, AudioService, AuthCallback, AuthCallbackView_default as AuthCallbackView, AuthProvider, AuthService, AuthenticatedBottleneckClipsView, AuthenticatedFactoryView, AuthenticatedHelpView, AuthenticatedHomeView, AuthenticatedShiftsView, AuthenticatedTargetsView, AuthenticatedTicketsView, AuthenticatedWorkspaceHealthView, AxelNotificationPopup, AxelOrb, BackButton, BackButtonMinimal, BarChart, BaseHistoryCalendar, BottleneckClipsModal, BottleneckClipsView_default as BottleneckClipsView, BottlenecksContent, BreakNotificationPopup, CachePrefetchStatus, Card2 as Card, CardContent2 as CardContent, CardDescription2 as CardDescription, CardFooter2 as CardFooter, CardHeader2 as CardHeader, CardTitle2 as CardTitle, ClipFilterProvider, CompactWorkspaceHealthCard, CongratulationsOverlay, CroppedHlsVideoPlayer, CroppedVideoPlayer, CycleTimeChart, CycleTimeOverTimeChart, DEFAULT_ANALYTICS_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_CONFIG, DEFAULT_DATABASE_CONFIG, DEFAULT_DATE_TIME_CONFIG, DEFAULT_ENDPOINTS_CONFIG, DEFAULT_ENTITY_CONFIG, DEFAULT_MAP_VIEW_CONFIG, DEFAULT_SHIFT_CONFIG, DEFAULT_THEME_CONFIG, DEFAULT_VIDEO_CONFIG, DEFAULT_WORKSPACE_CONFIG, DEFAULT_WORKSPACE_POSITIONS, DashboardHeader, DashboardLayout, DashboardOverridesProvider, DashboardProvider, DateDisplay_default as DateDisplay, DateTimeDisplay, DebugAuth, DebugAuthView_default as DebugAuthView, DetailedHealthStatus, DiagnosisVideoModal, EmptyStateMessage, EncouragementOverlay, FactoryView_default as FactoryView, FileManagerFilters, FilterDialogTrigger, FirstTimeLoginDebug, FirstTimeLoginHandler, GaugeChart, GridComponentsPlaceholder, HamburgerButton, Header, HealthStatusGrid, HealthStatusIndicator, HelpView_default as HelpView, HlsVideoPlayer, HomeView_default as HomeView, HourlyOutputChart2 as HourlyOutputChart, ISTTimer_default as ISTTimer, InlineEditableText, InteractiveOnboardingTour, InvitationService, KPICard, KPIDetailView_default as KPIDetailView, KPIGrid, KPIHeader, KPISection, KPIsOverviewView_default as KPIsOverviewView, LINE_1_UUID, LINE_2_UUID, LargeOutputProgressChart, LeaderboardDetailView_default as LeaderboardDetailView, Legend6 as Legend, LineChart, LineHistoryCalendar, LineMonthlyHistory, LineMonthlyPdfGenerator, LinePdfExportButton, LinePdfGenerator, LineWhatsAppShareButton, LinesService, LiveTimer, LoadingInline, LoadingOverlay_default as LoadingOverlay, LoadingPage_default as LoadingPage, LoadingSkeleton, LoadingState, LoginPage, LoginView_default as LoginView, Logo, MainLayout, MapGridView, MetricCard_default as MetricCard, MinimalOnboardingPopup, NewClipsNotification, NoWorkspaceData, OnboardingDemo, OnboardingTour, OptifyeAgentClient, OptifyeLogoLoader_default as OptifyeLogoLoader, OutputProgressChart, PageHeader, PieChart4 as PieChart, PlayPauseIndicator, PrefetchConfigurationError, PrefetchError, PrefetchEvents, PrefetchStatus, PrefetchTimeoutError, ProfileView_default as ProfileView, RegistryProvider, S3ClipsSupabaseService as S3ClipsService, S3Service, SKUManagementView, SOPComplianceChart, SSEChatClient, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, ShiftDisplay_default as ShiftDisplay, ShiftsView_default as ShiftsView, SideNavBar, SignupWithInvitation, SilentErrorBoundary, SimpleOnboardingPopup, SingleVideoStream_default as SingleVideoStream, Skeleton, SubscriptionManager, SubscriptionManagerProvider, SupabaseProvider, SupervisorDropdown_default as SupervisorDropdown, SupervisorManagementView_default as SupervisorManagementView, SupervisorService, TargetWorkspaceGrid, TargetsView_default as TargetsView, TeamManagementView_default as TeamManagementView, ThreadSidebar, TicketHistory_default as TicketHistory, TicketHistoryService, TicketsView_default as TicketsView, TimeDisplay_default as TimeDisplay, TimePickerDropdown, Timer_default as Timer, TimezoneProvider, TimezoneService, UserManagementService, UserService, VideoCard, VideoGridView, VideoPlayer, VideoPreloader, WORKSPACE_POSITIONS, WhatsAppShareButton, WorkspaceCard, WorkspaceDetailView_default as WorkspaceDetailView, WorkspaceDisplayNameExample, WorkspaceGrid, WorkspaceGridItem, WorkspaceHealthCard, WorkspaceHealthView_default as WorkspaceHealthView, WorkspaceHistoryCalendar, WorkspaceMetricCards, WorkspaceMetricCardsImpl, WorkspaceMonthlyDataFetcher, WorkspaceMonthlyHistory, WorkspaceMonthlyPdfGenerator, WorkspacePdfExportButton, WorkspacePdfGenerator, WorkspaceWhatsAppShareButton, actionService, apiUtils, authCoreService, authOTPService, authRateLimitService, checkRateLimit2 as checkRateLimit, clearAllRateLimits2 as clearAllRateLimits, clearRateLimit2 as clearRateLimit, clearS3VideoCache, clearS3VideoFromCache, clearWorkspaceDisplayNamesCache, cn, createInvitationService, createLinesService, createStreamProxyHandler, createSupabaseClient, createSupervisorService, createThrottledReload, createUserManagementService, createUserService, dashboardService, deleteThread, forceRefreshWorkspaceDisplayNames, formatDateInZone, formatDateTimeInZone, formatISTDate, formatIdleTime, formatRelativeTime, formatTimeInZone, fromUrlFriendlyName, getAllLineDisplayNames, getAllThreadMessages, getAllWorkspaceDisplayNamesAsync, getAnonClient, getBrowserName, getCameraNumber, getCompanyMetricsTableName, getConfigurableShortWorkspaceDisplayName, getConfigurableWorkspaceDisplayName, getConfiguredLineIds, getCoreSessionRecordingProperties, getCoreSessionReplayUrl, getCurrentShift, getCurrentTimeInZone, getDashboardHeaderTimeInZone, getDaysDifferenceInZone, getDefaultCameraStreamUrl, getDefaultLineId, getDefaultTabForWorkspace, getLineDisplayName, getManufacturingInsights, getMetricsTablePrefix, getNextUpdateInterval, getOperationalDate, getS3SignedUrl, getS3VideoSrc, getShortWorkspaceDisplayName, getShortWorkspaceDisplayNameAsync, getStoredWorkspaceMappings, getSubscriptionManager, getThreadMessages, getUserThreads, getUserThreadsPaginated, getWorkspaceDisplayName, getWorkspaceDisplayNameAsync, getWorkspaceDisplayNamesMap, getWorkspaceFromUrl, getWorkspaceNavigationParams, identifyCoreUser, initializeCoreMixpanel, isLegacyConfiguration, isPrefetchError, isSafari, isTransitionPeriod, isUrlPermanentlyFailed, isValidFactoryViewConfiguration, isValidLineInfoPayload, isValidPrefetchParams, isValidPrefetchStatus, isValidWorkspaceDetailedMetricsPayload, isValidWorkspaceMetricsPayload, isWorkspaceDisplayNamesLoaded, isWorkspaceDisplayNamesLoading, linesService, mergeWithDefaultConfig, migrateLegacyConfiguration, optifyeAgentClient, parseS3Uri, preInitializeWorkspaceDisplayNames, preloadS3Video, preloadS3VideoUrl, preloadS3VideosUrl, preloadVideoUrl, preloadVideosUrl, qualityService, realtimeService, refreshWorkspaceDisplayNames, resetCoreMixpanel, resetFailedUrl, resetSubscriptionManager, s3VideoPreloader, shuffleArray, simulateApiDelay, skuService, startCoreSessionRecording, stopCoreSessionRecording, storeWorkspaceMapping, streamProxyConfig, throttledReloadDashboard, toUrlFriendlyName, trackCoreEvent, trackCorePageView, updateThreadTitle, useAccessControl, useActiveBreaks, useActiveLineId, useAllWorkspaceMetrics, useAnalyticsConfig, useAppTimezone, useAudioService, useAuth, useAuthConfig, useAxelNotifications, useCanSaveTargets, useClipFilter, useClipTypes, useClipTypesWithCounts, useComponentOverride, useCustomConfig, useDashboardConfig, useDashboardMetrics, useDatabaseConfig, useDateFormatter, useDateTimeConfig, useDynamicShiftConfig, useEndpointsConfig, useEntityConfig, useFactoryOverviewMetrics, useFeatureFlags, useFormatNumber, useHasLineAccess, useHistoricWorkspaceMetrics, useHlsStream, useHlsStreamWithCropping, useHookOverride, useHourEndTimer, useHourlyTargetAchievements, useHourlyTargetMisses, useLeaderboardMetrics, useLineDetailedMetrics, useLineKPIs, useLineMetrics, useLineShiftConfig, useLineSupervisor, useLineWorkspaceMetrics, useMessages, useMetrics, useNavigation, useOverrides, usePageOverride, usePrefetchClipCounts, useRealtimeLineMetrics, useRegistry, useSKUs, useSessionKeepAlive, useShiftConfig, useShifts, useSubscriptionManager, useSubscriptionManagerSafe, useSupabase, useSupabaseClient, useTargets, useTeamManagementPermissions, useTheme, useThemeConfig, useThreads, useTicketHistory, useTimezoneContext, useUserLineAccess, useVideoConfig, useWorkspaceConfig, useWorkspaceDetailedMetrics, useWorkspaceDisplayName, useWorkspaceDisplayNames, useWorkspaceDisplayNamesMap, useWorkspaceHealthById, useWorkspaceHealthStatus, useWorkspaceMetrics, useWorkspaceNavigation, useWorkspaceOperators, userService, videoPrefetchManager, videoPreloader, whatsappService, withAccessControl, withAuth, withRegistry, withTimezone, workspaceHealthService, workspaceService };