@optifye/dashboard-core 6.9.7 → 6.9.9

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);
@@ -9576,9 +9574,6 @@ var getAllWorkspaceDisplayNamesAsync = async (companyId, lineId) => {
   Object.entries(runtimeWorkspaceDisplayNames).forEach(([lineId2, lineNames]) => {
     Object.entries(lineNames).forEach(([workspaceId, displayName]) => {
       allNames[`${lineId2}_${workspaceId}`] = displayName;
-      if (!allNames[workspaceId]) {
-        allNames[workspaceId] = displayName;
-      }
     });
   });
   return allNames;
@@ -14057,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,
@@ -14071,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();
@@ -23075,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)" }, children: [
     /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsx(PieChart, { children: /* @__PURE__ */ jsx(
       Pie,
       {
@@ -24707,7 +24702,8 @@ var VideoGridView = React23__default.memo(({
                 displayName: (
                   // Create line-aware lookup key: lineId_workspaceName
                   // This ensures correct mapping when multiple lines have same workspace names
-                  displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id)
+                  displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
+                  getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id)
                 ),
                 useRAF: canvasConfig?.useRAF,
                 compact: !selectedLine,
@@ -24757,7 +24753,8 @@ var MapGridView = React23__default.memo(({
       efficiency: workspace.efficiency,
       action_count: workspace.action_count
     });
-    const displayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+    const displayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
+    getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
     const navParams = getWorkspaceNavigationParams(workspaceId, displayName, workspace.line_id);
     router.push(`/workspace/${workspaceId}${navParams}`);
   }, [router, displayNames]);
@@ -24786,7 +24783,8 @@ var MapGridView = React23__default.memo(({
           if (!workspace) return null;
           const workspaceId = workspace.workspace_uuid || workspace.workspace_name;
           getPerformanceColor(workspace.efficiency);
-          const workspaceDisplayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || displayNames[workspace.workspace_name] || getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
+          const workspaceDisplayName = displayNames[`${workspace.line_id}_${workspace.workspace_name}`] || // Always pass line_id to fallback to ensure correct mapping per line
+          getWorkspaceDisplayName(workspace.workspace_name, workspace.line_id);
           return /* @__PURE__ */ jsx(
             motion.div,
             {
@@ -26024,12 +26022,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,473 +26034,6 @@ 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
-}) => {
-  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("");
-      }
-    }
-  };
-  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";
-    };
-    this.state = {
-      hasError: false,
-      errorCount: 0,
-      lastError: null,
-      errorInfo: null
-    };
-  }
-  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,
@@ -26571,37 +26096,33 @@ var PlayPauseIndicator = ({
   );
 };
 var ERROR_MAPPING = {
-  1: {
-    // MEDIA_ERR_ABORTED
-    code: 1,
-    type: "recoverable" /* RECOVERABLE */,
-    message: "Video loading was interrupted",
-    canRetry: true
-  },
-  2: {
-    // MEDIA_ERR_NETWORK
+  "networkError": {
     code: 2,
-    type: "recoverable" /* RECOVERABLE */,
+    type: "recoverable",
     message: "Network error - please check your internet connection",
     canRetry: true
   },
-  3: {
-    // MEDIA_ERR_DECODE
+  "mediaError": {
     code: 3,
-    type: "non_recoverable" /* NON_RECOVERABLE */,
+    type: "non_recoverable",
     message: "Stream corrupted due to internet connection",
     canRetry: false
   },
-  4: {
-    // MEDIA_ERR_SRC_NOT_SUPPORTED
+  "muxError": {
+    code: 3,
+    type: "non_recoverable",
+    message: "Error processing media stream",
+    canRetry: false
+  },
+  "otherError": {
     code: 4,
-    type: "non_recoverable" /* NON_RECOVERABLE */,
+    type: "non_recoverable",
     message: "Video format not supported by your browser. Please use Google Chrome.",
     canRetry: false
   }
 };
-var videoPlayerStyles = `
-  .video-player-container {
+var hlsVideoPlayerStyles = `
+  .hls-video-player-container {
     width: 100%;
     height: 100%;
     background-color: #000;
@@ -26609,32 +26130,18 @@ var videoPlayerStyles = `
     align-items: center;
     justify-content: center;
   }
-  
-  /* Center the video player and maintain aspect ratio */
-  .video-js {
+
+  /* Center the video and maintain aspect ratio */
+  .hls-video-element {
     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 {
+  .hls-video-player-loading {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -26643,15 +26150,41 @@ var videoPlayerStyles = `
   }
 `;
 if (typeof document !== "undefined") {
-  const styleId = "video-player-custom-styles";
+  const styleId = "hls-video-player-custom-styles";
   if (!document.getElementById(styleId)) {
     const style = document.createElement("style");
     style.id = styleId;
-    style.textContent = videoPlayerStyles;
+    style.textContent = hlsVideoPlayerStyles;
     document.head.appendChild(style);
   }
 }
-var VideoPlayer = React23__default.forwardRef(({
+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,
@@ -26660,7 +26193,9 @@ var VideoPlayer = React23__default.forwardRef(({
   muted = false,
   playsInline = true,
   className = "",
+  hlsConfig = {},
   options = {},
+  // Backward compatibility with Video.js
   externalLoadingControl = false,
   onLoadingChange,
   onReady,
@@ -26678,321 +26213,396 @@ var VideoPlayer = React23__default.forwardRef(({
   onSeeked,
   onClick
 }, ref) => {
+  const videoContainerRef = useRef(null);
   const videoRef = useRef(null);
-  const playerRef = 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 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", () => {
-      setIsLoading(true);
-      onLoadingChange?.(true);
-      onLoadStart?.(player);
-    });
-    player.on("loadeddata", () => {
-      setIsLoading(false);
-      onLoadingChange?.(false);
-      onLoadedData?.(player);
-    });
-    player.on("waiting", () => {
-      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;
-        }
-      }
-      player.src({
-        src: videoSrc,
-        type: isHLS ? "application/x-mpegURL" : "video/mp4"
-      });
-    }
+  const eventCallbacksRef = useRef({
+    onReady,
+    onPlay,
+    onPause,
+    onPlaying,
+    onTimeUpdate,
+    onDurationChange,
+    onEnded,
+    onError,
+    onLoadStart,
+    onLoadedMetadata,
+    onLoadedData,
+    onSeeking,
+    onSeeked,
+    onLoadingChange
+  });
+  useEffect(() => {
+    eventCallbacksRef.current = {
+      onReady,
+      onPlay,
+      onPause,
+      onPlaying,
+      onTimeUpdate,
+      onDurationChange,
+      onEnded,
+      onError,
+      onLoadStart,
+      onLoadedMetadata,
+      onLoadedData,
+      onSeeking,
+      onSeeked,
+      onLoadingChange
+    };
   }, [
-    src,
-    defaultOptions,
     onReady,
     onPlay,
     onPause,
+    onPlaying,
     onTimeUpdate,
     onDurationChange,
     onEnded,
     onError,
     onLoadStart,
     onLoadedMetadata,
+    onLoadedData,
     onSeeking,
-    onSeeked
+    onSeeked,
+    onLoadingChange
   ]);
+  const stableHlsConfigRef = useRef(hlsConfig);
+  const stableOptionsRef = useRef(options);
+  const configSignatureRef = useRef("");
+  const [configVersion, setConfigVersion] = useState(0);
   useEffect(() => {
-    if (playerRef.current && src) {
-      const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
-      let videoSrc = src;
-      let blobUrl = null;
+    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()
+    };
+  }, [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) {
-            videoSrc = `/api/clips/playlist/${clipIdMatch[1]}`;
-            console.log(`[VideoPlayer] Safari detected (${browserName}) - using playlist proxy URL for source update:`, videoSrc);
+            const proxyUrl = `/api/clips/playlist/${clipIdMatch[1]}`;
+            console.log(`[HlsVideoPlayer] Safari detected (${browserName}) - using playlist proxy URL:`, proxyUrl);
+            video.src = proxyUrl;
           } else {
-            console.warn("[VideoPlayer] Safari detected but no clip ID found in playlist (source update), trying blob URL fallback");
+            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" });
-            blobUrl = URL.createObjectURL(blob);
-            videoSrc = blobUrl;
+            const blobUrl = URL.createObjectURL(blob);
+            blobUrlRef.current = blobUrl;
+            video.src = blobUrl;
           }
-        } else {
+        } else if (Hls3.isSupported()) {
           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`);
+          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);
         }
-      }
-      playerRef.current.src({
-        src: videoSrc,
-        type: isHLS ? "application/x-mpegURL" : "video/mp4"
-      });
-      return () => {
-        if (blobUrl) {
-          URL.revokeObjectURL(blobUrl);
+      } 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;
         }
-      };
+      }
+    } else {
+      video.src = src;
     }
-  }, [src]);
+    const handleCanPlay = () => {
+      if (!hlsRef.current) {
+        setIsReady(true);
+        onReady?.(player);
+      }
+    };
+    const handlePlay = () => eventCallbacksRef.current.onPlay?.(player);
+    const handlePause = () => eventCallbacksRef.current.onPause?.(player);
+    const handlePlaying = () => {
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      eventCallbacksRef.current.onPlaying?.(player);
+    };
+    const handleTimeUpdate = () => {
+      const currentTime2 = video.currentTime || 0;
+      eventCallbacksRef.current.onTimeUpdate?.(player, currentTime2);
+    };
+    const handleDurationChange = () => {
+      const duration2 = video.duration || 0;
+      eventCallbacksRef.current.onDurationChange?.(player, duration2);
+    };
+    const handleEnded = () => eventCallbacksRef.current.onEnded?.(player);
+    const handleLoadStart = () => {
+      setIsLoading(true);
+      eventCallbacksRef.current.onLoadingChange?.(true);
+      eventCallbacksRef.current.onLoadStart?.(player);
+    };
+    const handleLoadedMetadata = () => eventCallbacksRef.current.onLoadedMetadata?.(player);
+    const handleLoadedData = () => {
+      setIsLoading(false);
+      eventCallbacksRef.current.onLoadingChange?.(false);
+      eventCallbacksRef.current.onLoadedData?.(player);
+    };
+    const handleWaiting = () => {
+      setIsLoading(true);
+      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);
+      }
+    };
+    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,
+    cleanupBlobUrl,
+    playerLikeObject,
+    configVersion
+  ]);
   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 +26610,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 +26627,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 +26666,7 @@ var VideoPlayer = React23__default.forwardRef(({
         "aria-label": "Click to play/pause"
       }
     ),
-    onClick && /* @__PURE__ */ jsx(
+    onClick && !controls && /* @__PURE__ */ jsx(
       PlayPauseIndicator,
       {
         show: showIndicator,
@@ -27051,13 +26676,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 +26713,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 +26731,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 +26820,24 @@ 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) {
@@ -27184,10 +26848,10 @@ var CroppedVideoPlayer = forwardRef(({
         ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
       }
     }
-    videoProps.onPause?.(player);
-  }, [stopCanvasRendering, videoProps]);
+    onPauseProp?.(player);
+  }, [stopCanvasRendering, onPauseProp]);
   const handleVideoEnded = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video ended, CLEARING canvas");
+    console.log("[CroppedHlsVideoPlayer] Video ended, CLEARING canvas");
     stopCanvasRendering();
     setIsProcessing(false);
     if (canvasRef.current) {
@@ -27198,27 +26862,27 @@ var CroppedVideoPlayer = forwardRef(({
         ctx.fillRect(0, 0, canvasRef.current.width, canvasRef.current.height);
       }
     }
-    videoProps.onEnded?.(player);
-  }, [stopCanvasRendering, videoProps]);
+    onEndedProp?.(player);
+  }, [stopCanvasRendering, onEndedProp]);
   const handleSeeking = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video seeking");
-    if (crop && !player.paused()) {
+    console.log("[CroppedHlsVideoPlayer] Video seeking");
+    if (crop && !videoElementRef.current?.paused) {
       renderFrameToCanvas();
     }
-    videoProps.onSeeking?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
+    onSeekingProp?.(player);
+  }, [crop, renderFrameToCanvas, onSeekingProp]);
   const handleSeeked = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video seeked");
-    if (crop && !player.paused()) {
+    console.log("[CroppedHlsVideoPlayer] Video seeked");
+    if (crop && !videoElementRef.current?.paused) {
       renderFrameToCanvas();
     }
-    videoProps.onSeeked?.(player);
-  }, [crop, renderFrameToCanvas, videoProps]);
+    onSeekedProp?.(player);
+  }, [crop, renderFrameToCanvas, onSeekedProp]);
   const handleLoadedMetadata = useCallback((player) => {
-    console.log("[CroppedVideoPlayer] Video metadata loaded");
+    console.log("[CroppedHlsVideoPlayer] Video metadata loaded");
     calculateCanvasDimensions();
-    videoProps.onLoadedMetadata?.(player);
-  }, [calculateCanvasDimensions, videoProps]);
+    onLoadedMetadataProp?.(player);
+  }, [calculateCanvasDimensions, onLoadedMetadataProp]);
   useEffect(() => {
     calculateCanvasDimensions();
     const handleResize = () => {
@@ -27234,25 +26898,25 @@ var CroppedVideoPlayer = forwardRef(({
       const canvas = canvasRef.current;
       const ctx = canvas.getContext("2d");
       if (ctx) {
-        console.log("[CroppedVideoPlayer] Source changing - CLEARING CANVAS IMMEDIATELY");
+        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);
       }
     }
-  }, [videoProps.src, crop]);
+  }, [videoSrc, crop]);
   useEffect(() => {
     return () => {
       stopCanvasRendering();
     };
   }, [stopCanvasRendering]);
   if (!crop) {
-    return /* @__PURE__ */ jsx(VideoPlayer, { ref, ...videoProps, onClick });
+    return /* @__PURE__ */ jsx(HlsVideoPlayer, { ref, ...videoProps, onClick });
   }
   const handleClickWithIndicator = () => {
-    if (!onClick || !hiddenVideoRef.current?.player) return;
-    const player = hiddenVideoRef.current.player;
-    const willBePlaying = player.paused();
+    if (!onClick || !hiddenVideoRef.current?.video) return;
+    const video = hiddenVideoRef.current.video;
+    const willBePlaying = video.paused;
     setIndicatorIsPlaying(willBePlaying);
     setShowIndicator(false);
     setTimeout(() => {
@@ -27265,11 +26929,11 @@ var CroppedVideoPlayer = forwardRef(({
     "div",
     {
       ref: videoContainerRef,
-      className: `relative w-full h-full flex items-center justify-center bg-black ${onClick ? "cursor-pointer" : ""} ${videoProps.className || ""}`,
+      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(
-          VideoPlayer,
+          HlsVideoPlayer,
           {
             ref: hiddenVideoRef,
             ...videoProps,
@@ -27336,7 +27000,539 @@ var CroppedVideoPlayer = forwardRef(({
     }
   );
 });
-CroppedVideoPlayer.displayName = "CroppedVideoPlayer";
+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("");
+      }
+    }
+  };
+  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";
+    };
+    this.state = {
+      hasError: false,
+      errorCount: 0,
+      lastError: null,
+      errorInfo: null
+    };
+  }
+  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 BackButton = ({
   onClick,
   text = "Back",
@@ -27701,70 +27897,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 +29152,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 +29167,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);
@@ -29773,7 +29911,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 +30084,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 +30264,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 +30325,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 +30543,7 @@ var BottlenecksContent = ({
                     onLoadedData: handleLoadedData,
                     onPlaying: handleVideoPlaying,
                     onLoadingChange: handleVideoLoadingChange,
-                    options: {
-                      fluid: false,
-                      responsive: false,
-                      fill: false
-                    }
+                    options: videoPlayerOptions
                   }
                 )
               }
@@ -30464,45 +30551,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 +37677,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 +42457,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 +42467,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 +42477,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 +51997,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 };