@optifye/dashboard-core 6.12.47 → 6.12.49

package/dist/automation.js

@@ -2093,8 +2093,8 @@ var VideoCard = React__default.default.memo(({
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "blue" ? "bg-[#0EA5E9]/30" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "blue" ? "bg-[#0EA5E9]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
   const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "blue" ? "Best" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
-  const worstMarkerClassName = compact ? "left-1.5 top-1.5 gap-1.5 px-2 py-1 text-[11px]" : "left-2 top-2 gap-2 px-3 py-1.5 text-xs";
-  const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-8 left-1.5 gap-1" : "top-10 left-2 gap-1.5" : compact ? "top-1.5 left-1.5 gap-1" : "top-2 left-2 gap-1.5";
+  const worstMarkerClassName = compact ? "left-1 top-1 sm:left-1.5 sm:top-1.5 gap-1 sm:gap-1.5 p-1 sm:px-2 sm:py-1 text-[10px] sm:text-[11px]" : "left-1.5 top-1.5 sm:left-2 sm:top-2 gap-1 sm:gap-2 px-1.5 sm:px-3 py-0.5 sm:py-1.5 text-[10px] sm:text-xs";
+  const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-6 sm:top-8 left-1 sm:left-1.5 gap-1" : "top-7 sm:top-10 left-1.5 sm:left-2 gap-1 sm:gap-1.5" : compact ? "top-1 sm:top-1.5 left-1 sm:left-1.5 gap-1" : "top-1.5 sm:top-2 left-1.5 sm:left-2 gap-1 sm:gap-1.5";
   const trendInfo = workspace.trend !== void 0 ? getTrendArrowAndColor(workspace.trend) : null;
   const handleClick = React.useCallback(() => {
     trackCoreEvent("Workspace Card Clicked", {
@@ -2130,8 +2130,8 @@ var VideoCard = React__default.default.memo(({
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `w-5 h-5 sm:${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `w-5 h-5 ${compact ? "sm:w-4 sm:h-4" : "sm:w-6 sm:h-6"} text-gray-500` }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} text-gray-500 mt-1`, children: "Loading..." })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-10", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -2193,7 +2193,7 @@ var VideoCard = React__default.default.memo(({
                     "data-testid": `video-card-status-badge-${badge.kind}`,
                     "aria-label": tooltipText,
                     "aria-describedby": tooltipId,
-                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-10 w-10" : "h-11 w-11"}`,
+                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-7 w-7 sm:h-10 sm:w-10" : "h-8 w-8 sm:h-11 sm:w-11"}`,
                     style: {
                       borderColor: presentation.hex
                     },
@@ -2202,7 +2202,7 @@ var VideoCard = React__default.default.memo(({
                         Icon,
                         {
                           "aria-hidden": "true",
-                          className: `${compact ? "h-5 w-5" : "h-6 w-6"} text-white`,
+                          className: `${compact ? "h-4 w-4 sm:h-5 sm:w-5" : "h-4 w-4 sm:h-6 sm:w-6"} text-white`,
                           strokeWidth: 2.4
                         }
                       ),
@@ -2230,10 +2230,10 @@ var VideoCard = React__default.default.memo(({
             "div",
             {
               "data-testid": "video-card-worst-performance-marker",
-              className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl ${worstMarkerClassName}`,
+              className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-sm sm:rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl max-w-[calc(100%-8px)] sm:max-w-[calc(100%-16px)] ${worstMarkerClassName}`,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: `${compact ? "h-3.5 w-3.5" : "h-4 w-4"} text-[#E34329]`, "aria-hidden": "true" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Overall Underperformer" })
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: `${compact ? "h-3 w-3 sm:h-3.5 sm:w-3.5" : "h-3.5 w-3.5 sm:h-4 sm:w-4"} shrink-0 text-[#E34329]`, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `truncate leading-tight min-w-0 ${compact ? "hidden sm:block" : ""}`, children: "Overall Underperformer" })
               ]
             }
           ),
@@ -2246,10 +2246,10 @@ var VideoCard = React__default.default.memo(({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 sm:${compact ? "p-1" : "p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 ${compact ? "sm:p-1" : "sm:p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
             /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { size: compact ? 10 : 12, className: "shrink-0 text-white" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `min-w-0 truncate text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `min-w-0 truncate text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex shrink-0 items-center ${compact ? "gap-1" : "gap-1.5"}`, children: [
             trendInfo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2266,7 +2266,7 @@ var VideoCard = React__default.default.memo(({
                 className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full ${showOffline ? "bg-red-500" : "bg-green-500"}`
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: showOffline ? "Offline" : "Live" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"}`, children: showOffline ? "Offline" : "Live" })
           ] })
         ] })
       ]

package/dist/automation.mjs

@@ -2086,8 +2086,8 @@ var VideoCard = React.memo(({
   const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "blue" ? "bg-[#0EA5E9]/30" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
   const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "blue" ? "bg-[#0EA5E9]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
   const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "blue" ? "Best" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
-  const worstMarkerClassName = compact ? "left-1.5 top-1.5 gap-1.5 px-2 py-1 text-[11px]" : "left-2 top-2 gap-2 px-3 py-1.5 text-xs";
-  const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-8 left-1.5 gap-1" : "top-10 left-2 gap-1.5" : compact ? "top-1.5 left-1.5 gap-1" : "top-2 left-2 gap-1.5";
+  const worstMarkerClassName = compact ? "left-1 top-1 sm:left-1.5 sm:top-1.5 gap-1 sm:gap-1.5 p-1 sm:px-2 sm:py-1 text-[10px] sm:text-[11px]" : "left-1.5 top-1.5 sm:left-2 sm:top-2 gap-1 sm:gap-2 px-1.5 sm:px-3 py-0.5 sm:py-1.5 text-[10px] sm:text-xs";
+  const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-6 sm:top-8 left-1 sm:left-1.5 gap-1" : "top-7 sm:top-10 left-1.5 sm:left-2 gap-1 sm:gap-1.5" : compact ? "top-1 sm:top-1.5 left-1 sm:left-1.5 gap-1" : "top-1.5 sm:top-2 left-1.5 sm:left-2 gap-1 sm:gap-1.5";
   const trendInfo = workspace.trend !== void 0 ? getTrendArrowAndColor(workspace.trend) : null;
   const handleClick = useCallback(() => {
     trackCoreEvent("Workspace Card Clicked", {
@@ -2123,8 +2123,8 @@ var VideoCard = React.memo(({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
           /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
-            /* @__PURE__ */ jsx(Camera, { className: `w-5 h-5 sm:${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
-            /* @__PURE__ */ jsx("span", { className: `text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
+            /* @__PURE__ */ jsx(Camera, { className: `w-5 h-5 ${compact ? "sm:w-4 sm:h-4" : "sm:w-6 sm:h-6"} text-gray-500` }),
+            /* @__PURE__ */ jsx("span", { className: `text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} text-gray-500 mt-1`, children: "Loading..." })
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10", children: [
             /* @__PURE__ */ jsx(
@@ -2186,7 +2186,7 @@ var VideoCard = React.memo(({
                     "data-testid": `video-card-status-badge-${badge.kind}`,
                     "aria-label": tooltipText,
                     "aria-describedby": tooltipId,
-                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-10 w-10" : "h-11 w-11"}`,
+                    className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-7 w-7 sm:h-10 sm:w-10" : "h-8 w-8 sm:h-11 sm:w-11"}`,
                     style: {
                       borderColor: presentation.hex
                     },
@@ -2195,7 +2195,7 @@ var VideoCard = React.memo(({
                         Icon,
                         {
                           "aria-hidden": "true",
-                          className: `${compact ? "h-5 w-5" : "h-6 w-6"} text-white`,
+                          className: `${compact ? "h-4 w-4 sm:h-5 sm:w-5" : "h-4 w-4 sm:h-6 sm:w-6"} text-white`,
                           strokeWidth: 2.4
                         }
                       ),
@@ -2223,10 +2223,10 @@ var VideoCard = React.memo(({
             "div",
             {
               "data-testid": "video-card-worst-performance-marker",
-              className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl ${worstMarkerClassName}`,
+              className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-sm sm:rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl max-w-[calc(100%-8px)] sm:max-w-[calc(100%-16px)] ${worstMarkerClassName}`,
               children: [
-                /* @__PURE__ */ jsx(AlertTriangle, { className: `${compact ? "h-3.5 w-3.5" : "h-4 w-4"} text-[#E34329]`, "aria-hidden": "true" }),
-                /* @__PURE__ */ jsx("span", { children: "Overall Underperformer" })
+                /* @__PURE__ */ jsx(AlertTriangle, { className: `${compact ? "h-3 w-3 sm:h-3.5 sm:w-3.5" : "h-3.5 w-3.5 sm:h-4 sm:w-4"} shrink-0 text-[#E34329]`, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: `truncate leading-tight min-w-0 ${compact ? "hidden sm:block" : ""}`, children: "Overall Underperformer" })
               ]
             }
           ),
@@ -2239,10 +2239,10 @@ var VideoCard = React.memo(({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 sm:${compact ? "p-1" : "p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 ${compact ? "sm:p-1" : "sm:p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
           /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
             /* @__PURE__ */ jsx(Camera, { size: compact ? 10 : 12, className: "shrink-0 text-white" }),
-            /* @__PURE__ */ jsx("p", { className: `min-w-0 truncate text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
+            /* @__PURE__ */ jsx("p", { className: `min-w-0 truncate text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: `flex shrink-0 items-center ${compact ? "gap-1" : "gap-1.5"}`, children: [
             trendInfo && /* @__PURE__ */ jsx(
@@ -2259,7 +2259,7 @@ var VideoCard = React.memo(({
                 className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full ${showOffline ? "bg-red-500" : "bg-green-500"}`
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: showOffline ? "Offline" : "Live" })
+            /* @__PURE__ */ jsx("span", { className: `text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"}`, children: showOffline ? "Offline" : "Live" })
           ] })
         ] })
       ]

package/dist/index.css

@@ -490,8 +490,8 @@ body {
 .-top-10 {
   top: -2.5rem;
 }
-.-top-4 {
-  top: -1rem;
+.-top-5 {
+  top: -1.25rem;
 }
 .-top-7 {
   top: -1.75rem;
@@ -523,6 +523,9 @@ body {
 .bottom-8 {
   bottom: 2rem;
 }
+.bottom-\[-4px\] {
+  bottom: -4px;
+}
 .bottom-\[15\%\] {
   bottom: 15%;
 }
@@ -604,9 +607,6 @@ body {
 .top-1\/4 {
   top: 25%;
 }
-.top-10 {
-  top: 2.5rem;
-}
 .top-14 {
   top: 3.5rem;
 }
@@ -628,12 +628,21 @@ body {
 .top-5 {
   top: 1.25rem;
 }
+.top-6 {
+  top: 1.5rem;
+}
+.top-7 {
+  top: 1.75rem;
+}
 .top-8 {
   top: 2rem;
 }
 .top-\[-12px\] {
   top: -12px;
 }
+.top-\[19px\] {
+  top: 19px;
+}
 .top-full {
   top: 100%;
 }
@@ -673,15 +682,27 @@ body {
 .z-\[110\] {
   z-index: 110;
 }
+.z-\[190\] {
+  z-index: 190;
+}
+.z-\[1\] {
+  z-index: 1;
+}
+.z-\[200\] {
+  z-index: 200;
+}
+.z-\[2\] {
+  z-index: 2;
+}
+.z-\[35\] {
+  z-index: 35;
+}
 .z-\[60\] {
   z-index: 60;
 }
 .z-\[65\] {
   z-index: 65;
 }
-.z-\[70\] {
-  z-index: 70;
-}
 .z-\[9998\] {
   z-index: 9998;
 }
@@ -1232,6 +1253,9 @@ body {
 .max-h-\[90vh\] {
   max-height: 90vh;
 }
+.max-h-\[calc\(100vh-12rem\)\] {
+  max-height: calc(100vh - 12rem);
+}
 .max-h-\[calc\(100vh-80px\)\] {
   max-height: calc(100vh - 80px);
 }
@@ -1521,6 +1545,9 @@ body {
 .min-w-\[140px\] {
   min-width: 140px;
 }
+.min-w-\[146px\] {
+  min-width: 146px;
+}
 .min-w-\[150px\] {
   min-width: 150px;
 }
@@ -1671,6 +1698,9 @@ body {
 .max-w-\[calc\(100\%-2rem\)\] {
   max-width: calc(100% - 2rem);
 }
+.max-w-\[calc\(100\%-8px\)\] {
+  max-width: calc(100% - 8px);
+}
 .max-w-\[calc\(100vw-32px\)\] {
   max-width: calc(100vw - 32px);
 }
@@ -2392,6 +2422,10 @@ body {
 .border-none {
   border-style: none;
 }
+.\!border-blue-300 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)) !important;
+}
 .border-\[\#00AB45\]\/20 {
   border-color: rgb(0 171 69 / 0.2);
 }
@@ -2417,6 +2451,9 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
 }
+.border-amber-300\/30 {
+  border-color: rgb(252 211 77 / 0.3);
+}
 .border-amber-300\/80 {
   border-color: rgb(252 211 77 / 0.8);
 }
@@ -2588,6 +2625,9 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
 }
+.border-red-200\/30 {
+  border-color: rgb(254 202 202 / 0.3);
+}
 .border-red-200\/60 {
   border-color: rgb(254 202 202 / 0.6);
 }
@@ -2598,6 +2638,12 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
 }
+.border-red-300\/25 {
+  border-color: rgb(252 165 165 / 0.25);
+}
+.border-red-300\/35 {
+  border-color: rgb(252 165 165 / 0.35);
+}
 .border-red-400 {
   --tw-border-opacity: 1;
   border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
@@ -2652,6 +2698,9 @@ body {
 .border-slate-50\/50 {
   border-color: rgb(248 250 252 / 0.5);
 }
+.border-slate-500\/70 {
+  border-color: rgb(100 116 139 / 0.7);
+}
 .border-teal-200 {
   --tw-border-opacity: 1;
   border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
@@ -2667,9 +2716,11 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(221 214 254 / var(--tw-border-opacity, 1));
 }
-.border-white {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+.border-violet-200\/35 {
+  border-color: rgb(221 214 254 / 0.35);
+}
+.border-violet-300\/30 {
+  border-color: rgb(196 181 253 / 0.3);
 }
 .border-white\/10 {
   border-color: rgb(255 255 255 / 0.1);
@@ -2778,6 +2829,9 @@ body {
 .bg-\[\#0EA5E9\]\/30 {
   background-color: rgb(14 165 233 / 0.3);
 }
+.bg-\[\#0b101b\]\/95 {
+  background-color: rgb(11 16 27 / 0.95);
+}
 .bg-\[\#1A0B09\]\/95 {
   background-color: rgb(26 11 9 / 0.95);
 }
@@ -2850,6 +2904,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
 }
+.bg-amber-500\/20 {
+  background-color: rgb(245 158 11 / 0.2);
+}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -3159,12 +3216,15 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
 }
-.bg-red-500\/10 {
-  background-color: rgb(239 68 68 / 0.1);
+.bg-red-500\/15 {
+  background-color: rgb(239 68 68 / 0.15);
 }
 .bg-red-500\/20 {
   background-color: rgb(239 68 68 / 0.2);
 }
+.bg-red-500\/25 {
+  background-color: rgb(239 68 68 / 0.25);
+}
 .bg-red-500\/30 {
   background-color: rgb(239 68 68 / 0.3);
 }
@@ -3182,6 +3242,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
 }
+.bg-red-950\/75 {
+  background-color: rgb(69 10 10 / 0.75);
+}
 .bg-rose-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
@@ -3194,10 +3257,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
 }
-.bg-sky-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
-}
 .bg-slate-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
@@ -3267,6 +3326,12 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
 }
+.bg-violet-500\/20 {
+  background-color: rgb(139 92 246 / 0.2);
+}
+.bg-violet-950\/75 {
+  background-color: rgb(46 16 101 / 0.75);
+}
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -4553,6 +4618,9 @@ body {
 .leading-tight {
   line-height: 1.25;
 }
+.tracking-\[-0\.01em\] {
+  letter-spacing: -0.01em;
+}
 .tracking-\[0\.02em\] {
   letter-spacing: 0.02em;
 }
@@ -4565,6 +4633,9 @@ body {
 .tracking-\[0\.15em\] {
   letter-spacing: 0.15em;
 }
+.tracking-\[0\.16em\] {
+  letter-spacing: 0.16em;
+}
 .tracking-\[0\.25em\] {
   letter-spacing: 0.25em;
 }
@@ -4888,6 +4959,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
 }
+.text-red-50 {
+  --tw-text-opacity: 1;
+  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
+}
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
@@ -4923,6 +4998,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(14 165 233 / var(--tw-text-opacity, 1));
 }
+.text-slate-100 {
+  --tw-text-opacity: 1;
+  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
+}
 .text-slate-200 {
   --tw-text-opacity: 1;
   color: rgb(226 232 240 / var(--tw-text-opacity, 1));
@@ -4970,10 +5049,18 @@ body {
 .text-transparent {
   color: transparent;
 }
+.text-violet-100 {
+  --tw-text-opacity: 1;
+  color: rgb(237 233 254 / var(--tw-text-opacity, 1));
+}
 .text-violet-300 {
   --tw-text-opacity: 1;
   color: rgb(196 181 253 / var(--tw-text-opacity, 1));
 }
+.text-violet-50 {
+  --tw-text-opacity: 1;
+  color: rgb(245 243 255 / var(--tw-text-opacity, 1));
+}
 .text-violet-600 {
   --tw-text-opacity: 1;
   color: rgb(124 58 237 / var(--tw-text-opacity, 1));
@@ -5157,6 +5244,22 @@ body {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.shadow-\[0_16px_36px_rgba\(0\,0\,0\,0\.48\)\] {
+  --tw-shadow: 0 16px 36px rgba(0,0,0,0.48);
+  --tw-shadow-colored: 0 16px 36px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.shadow-\[0_16px_45px_rgba\(37\,99\,235\,0\.16\)\] {
+  --tw-shadow: 0 16px 45px rgba(37,99,235,0.16);
+  --tw-shadow-colored: 0 16px 45px var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.04\)\] {
   --tw-shadow: 0 1px 2px rgba(0,0,0,0.04);
   --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color);
@@ -5213,6 +5316,14 @@ body {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.shadow-\[inset_3px_0_0_rgba\(37\,99\,235\,0\.75\)\] {
+  --tw-shadow: inset 3px 0 0 rgba(37,99,235,0.75);
+  --tw-shadow-colored: inset 3px 0 0 var(--tw-shadow-color);
+  box-shadow:
+    var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
 .shadow-inner {
   --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
@@ -5398,6 +5509,9 @@ body {
 .ring-amber-500\/10 {
   --tw-ring-color: rgb(245 158 11 / 0.1);
 }
+.ring-amber-500\/20 {
+  --tw-ring-color: rgb(245 158 11 / 0.2);
+}
 .ring-amber-600\/30 {
   --tw-ring-color: rgb(217 119 6 / 0.3);
 }
@@ -5494,6 +5608,9 @@ body {
 .ring-slate-300\/30 {
   --tw-ring-color: rgb(203 213 225 / 0.3);
 }
+.ring-violet-500\/20 {
+  --tw-ring-color: rgb(139 92 246 / 0.2);
+}
 .ring-white {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
@@ -5573,6 +5690,11 @@ body {
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.backdrop-blur {
+  --tw-backdrop-blur: blur(8px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
 .backdrop-blur-2xl {
   --tw-backdrop-blur: blur(40px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -5902,6 +6024,9 @@ input[type=range]:active::-moz-range-thumb {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-blue-100\/80:hover {
+  background-color: rgb(219 234 254 / 0.8);
+}
 .hover\:bg-blue-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
@@ -6021,10 +6146,6 @@ input[type=range]:active::-moz-range-thumb {
   --tw-bg-opacity: 1;
   background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
 }
-.hover\:bg-sky-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(56 189 248 / var(--tw-bg-opacity, 1));
-}
 .hover\:bg-slate-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
@@ -6437,10 +6558,6 @@ input[type=range]:active::-moz-range-thumb {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1));
 }
-.focus\:ring-sky-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(186 230 253 / var(--tw-ring-opacity, 1));
-}
 .focus\:ring-slate-400:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity, 1));
@@ -6711,6 +6828,12 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:left-0 {
     left: 0px;
   }
+  .sm\:left-1\.5 {
+    left: 0.375rem;
+  }
+  .sm\:left-2 {
+    left: 0.5rem;
+  }
   .sm\:left-auto {
     left: auto;
   }
@@ -6729,9 +6852,21 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:top-0 {
     top: 0px;
   }
+  .sm\:top-1\.5 {
+    top: 0.375rem;
+  }
+  .sm\:top-10 {
+    top: 2.5rem;
+  }
+  .sm\:top-2 {
+    top: 0.5rem;
+  }
   .sm\:top-3 {
     top: 0.75rem;
   }
+  .sm\:top-8 {
+    top: 2rem;
+  }
   .sm\:order-1 {
     order: 1;
   }
@@ -6817,6 +6952,12 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:hidden {
     display: none;
   }
+  .sm\:h-10 {
+    height: 2.5rem;
+  }
+  .sm\:h-11 {
+    height: 2.75rem;
+  }
   .sm\:h-12 {
     height: 3rem;
   }
@@ -6829,6 +6970,9 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:h-3 {
     height: 0.75rem;
   }
+  .sm\:h-3\.5 {
+    height: 0.875rem;
+  }
   .sm\:h-4 {
     height: 1rem;
   }
@@ -6874,6 +7018,12 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:min-h-\[320px\] {
     min-height: 320px;
   }
+  .sm\:w-10 {
+    width: 2.5rem;
+  }
+  .sm\:w-11 {
+    width: 2.75rem;
+  }
   .sm\:w-12 {
     width: 3rem;
   }
@@ -6889,6 +7039,9 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:w-3 {
     width: 0.75rem;
   }
+  .sm\:w-3\.5 {
+    width: 0.875rem;
+  }
   .sm\:w-36 {
     width: 9rem;
   }
@@ -6955,6 +7108,9 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:max-w-\[85\%\] {
     max-width: 85%;
   }
+  .sm\:max-w-\[calc\(100\%-16px\)\] {
+    max-width: calc(100% - 16px);
+  }
   .sm\:max-w-\[calc\(100\%-200px\)\] {
     max-width: calc(100% - 200px);
   }
@@ -7071,6 +7227,9 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }
+  .sm\:rounded-md {
+    border-radius: 0.375rem;
+  }
   .sm\:rounded-xl {
     border-radius: 0.75rem;
   }
@@ -7167,6 +7326,10 @@ input[type=range]:active::-moz-range-thumb {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
+  .sm\:py-1 {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
   .sm\:py-1\.5 {
     padding-top: 0.375rem;
     padding-bottom: 0.375rem;

package/dist/index.d.mts

@@ -1110,6 +1110,7 @@ interface RedFlowTimelineBin {
     actual_ppm?: number | null;
     target_ppm?: number | null;
     efficiency_percent?: number | null;
+    is_idle?: boolean | null;
 }
 interface RedFlowWorstMinute {
     start_time?: string | null;
@@ -7822,6 +7823,7 @@ interface HourlyOutputChartProps {
     onHourClick?: (payload: HourlyOutputBarClickPayload) => void;
     onWatchClipsClick?: (payload: HourlyOutputBarClickPayload) => void;
     onAiSummaryClick?: (payload: HourlyOutputBarClickPayload) => void;
+    onSelectSku?: (skuId: string | null) => void;
 }
 
 declare const HourlyOutputChart: (props: HourlyOutputChartProps) => react_jsx_runtime.JSX.Element;