@marcoschwartz/lite-ui 0.27.10 → 0.27.11

package/dist/index.js

@@ -664,7 +664,7 @@ var Navbar = ({
   sticky = false,
   variant = "solid"
 }) => {
-  const baseClasses = sticky ? "sticky top-0 z-40" : "";
+  const baseClasses2 = sticky ? "sticky top-0 z-40" : "";
   const getVariantClasses2 = () => {
     switch (variant) {
       case "glass":
@@ -676,7 +676,7 @@ var Navbar = ({
         return "bg-[hsl(var(--background))] border-b border-[hsl(var(--border))]";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `${getVariantClasses2()} ${baseClasses} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { className: `${getVariantClasses2()} ${baseClasses2} ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-between items-center h-16", children: [
     logo && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center", children: logo }),
     children && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex items-center gap-6", children })
   ] }) }) });
@@ -869,7 +869,7 @@ var SidebarNavItem = ({
   const iconElement = leftSection || icon;
   const hasChildren = import_react4.default.Children.count(children) > 0;
   const Component = component || (href ? "a" : "button");
-  const baseClasses = `
+  const baseClasses2 = `
     flex items-center gap-3 w-full px-3 py-2.5 rounded-lg
     text-sm font-medium
     transition-colors duration-150
@@ -898,7 +898,7 @@ var SidebarNavItem = ({
         "button",
         {
           onClick: handleClick,
-          className: baseClasses,
+          className: baseClasses2,
           "aria-disabled": disabled,
           "aria-expanded": childrenOpen,
           children: content
@@ -912,7 +912,7 @@ var SidebarNavItem = ({
     {
       href,
       onClick: handleClick,
-      className: baseClasses,
+      className: baseClasses2,
       "aria-disabled": disabled,
       "aria-current": active ? "page" : void 0,
       children: content
@@ -2473,10 +2473,10 @@ var Code = ({
       setTimeout(() => setCopied(false), 2e3);
     }
   };
-  const baseClasses = `font-mono text-sm ${colorClasses[color]}`;
+  const baseClasses2 = `font-mono text-sm ${colorClasses[color]}`;
   if (block) {
     return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: `relative group ${className}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("pre", { className: `${baseClasses} p-4 rounded-lg overflow-x-auto`, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("code", { children }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("pre", { className: `${baseClasses2} p-4 rounded-lg overflow-x-auto`, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("code", { children }) }),
       copyable && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         "button",
         {
@@ -2488,7 +2488,7 @@ var Code = ({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("code", { className: `${baseClasses} px-1.5 py-0.5 rounded ${className}`, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("code", { className: `${baseClasses2} px-1.5 py-0.5 rounded ${className}`, children });
 };
 Code.displayName = "Code";
 
@@ -3907,7 +3907,7 @@ var ProgressBar = ({
   className = ""
 }) => {
   const percentage = Math.min(Math.max(value / max * 100, 0), 100);
-  const sizeClasses7 = {
+  const sizeClasses8 = {
     sm: "h-1",
     md: "h-2",
     lg: "h-3"
@@ -3929,7 +3929,7 @@ var ProgressBar = ({
     /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
       "div",
       {
-        className: `w-full bg-[hsl(var(--muted))] rounded-full overflow-hidden ${sizeClasses7[size]}`,
+        className: `w-full bg-[hsl(var(--muted))] rounded-full overflow-hidden ${sizeClasses8[size]}`,
         role: "progressbar",
         "aria-valuenow": value,
         "aria-valuemin": 0,
@@ -3937,7 +3937,7 @@ var ProgressBar = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
           "div",
           {
-            className: `${sizeClasses7[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
+            className: `${sizeClasses8[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
             style: { width: `${percentage}%` }
           }
         )
@@ -4149,7 +4149,7 @@ var Avatar = ({
   fallbackColor = "bg-[hsl(var(--primary))]"
 }) => {
   const [imageError, setImageError] = import_react22.default.useState(false);
-  const sizeClasses7 = {
+  const sizeClasses8 = {
     xs: "w-6 h-6 text-xs",
     sm: "w-8 h-8 text-sm",
     md: "w-10 h-10 text-base",
@@ -4169,7 +4169,7 @@ var Avatar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     "div",
     {
-      className: `${sizeClasses7[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-[hsl(var(--muted))]" : `${fallbackColor} text-white`} ${className}`,
+      className: `${sizeClasses8[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-[hsl(var(--muted))]" : `${fallbackColor} text-white`} ${className}`,
       children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
         "img",
         {
@@ -4192,8 +4192,23 @@ var Avatar = ({
 };
 
 // src/components/Textarea.tsx
+var import_react23 = require("react");
 var import_jsx_runtime105 = require("react/jsx-runtime");
-var Textarea = ({
+var sizeClasses7 = {
+  sm: "px-3 py-1.5 text-sm min-h-[80px]",
+  md: "px-4 py-2.5 text-base min-h-[100px]",
+  lg: "px-4 py-3 text-lg min-h-[120px]"
+};
+var resizeClasses = {
+  none: "resize-none",
+  vertical: "resize-y",
+  horizontal: "resize-x",
+  both: "resize"
+};
+var baseClasses = "w-full rounded-md border bg-transparent text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[hsl(var(--muted))]";
+var normalBorderClasses = "border-[hsl(var(--input))] hover:border-[hsl(var(--muted-foreground))] focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))]";
+var errorBorderClasses = "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50";
+var Textarea = (0, import_react23.memo)(({
   label,
   error,
   helperText,
@@ -4203,28 +4218,16 @@ var Textarea = ({
   disabled,
   ...props
 }) => {
-  const sizeClasses7 = {
-    sm: "px-3 py-1.5 text-sm min-h-[80px]",
-    md: "px-4 py-2.5 text-base min-h-[100px]",
-    lg: "px-4 py-3 text-lg min-h-[120px]"
-  };
-  const resizeClasses = {
-    none: "resize-none",
-    vertical: "resize-y",
-    horizontal: "resize-x",
-    both: "resize"
-  };
-  const baseClasses = `w-full rounded-md border transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))]/50 focus:border-[hsl(var(--ring))]
-    ${error ? "border-[hsl(var(--destructive))] focus:ring-[hsl(var(--destructive))]/50" : "border-[hsl(var(--input))] hover:border-[hsl(var(--muted-foreground))]"}
-    bg-transparent text-[hsl(var(--foreground))]
-    placeholder:text-[hsl(var(--muted-foreground))]
-    disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[hsl(var(--muted))]`;
+  const textareaClassName = (0, import_react23.useMemo)(() => {
+    const borderClasses = error ? errorBorderClasses : normalBorderClasses;
+    return `${baseClasses} ${borderClasses} ${sizeClasses7[size]} ${resizeClasses[resize]}`;
+  }, [error, size, resize]);
   return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { className: `w-full ${className}`, children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       "textarea",
       {
-        className: `${baseClasses} ${sizeClasses7[size]} ${resizeClasses[resize]}`,
+        className: textareaClassName,
         disabled,
         ...props
       }
@@ -4232,10 +4235,11 @@ var Textarea = ({
     error && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
     helperText && !error && /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
   ] });
-};
+});
+Textarea.displayName = "Textarea";
 
 // src/components/RichTextEditor.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var RichTextEditor = ({
   value = "",
@@ -4250,16 +4254,16 @@ var RichTextEditor = ({
   helperText
 }) => {
   const { themeName } = useTheme();
-  const editorRef = (0, import_react23.useRef)(null);
-  const [isFocused, setIsFocused] = (0, import_react23.useState)(false);
-  const [activeFormats, setActiveFormats] = (0, import_react23.useState)(/* @__PURE__ */ new Set());
-  const [showLinkModal, setShowLinkModal] = (0, import_react23.useState)(false);
-  const [linkUrl, setLinkUrl] = (0, import_react23.useState)("");
-  const [showImageModal, setShowImageModal] = (0, import_react23.useState)(false);
-  const [imageUrl, setImageUrl] = (0, import_react23.useState)("");
-  const [imageAlt, setImageAlt] = (0, import_react23.useState)("");
-  const savedSelection = (0, import_react23.useRef)(null);
-  (0, import_react23.useLayoutEffect)(() => {
+  const editorRef = (0, import_react24.useRef)(null);
+  const [isFocused, setIsFocused] = (0, import_react24.useState)(false);
+  const [activeFormats, setActiveFormats] = (0, import_react24.useState)(/* @__PURE__ */ new Set());
+  const [showLinkModal, setShowLinkModal] = (0, import_react24.useState)(false);
+  const [linkUrl, setLinkUrl] = (0, import_react24.useState)("");
+  const [showImageModal, setShowImageModal] = (0, import_react24.useState)(false);
+  const [imageUrl, setImageUrl] = (0, import_react24.useState)("");
+  const [imageAlt, setImageAlt] = (0, import_react24.useState)("");
+  const savedSelection = (0, import_react24.useRef)(null);
+  (0, import_react24.useLayoutEffect)(() => {
     const styleId = "rich-text-editor-styles";
     if (!document.getElementById(styleId)) {
       const style = document.createElement("style");
@@ -4321,9 +4325,9 @@ var RichTextEditor = ({
       document.head.appendChild(style);
     }
   }, []);
-  const isInitialRender = (0, import_react23.useRef)(true);
-  const isInternalUpdate = (0, import_react23.useRef)(false);
-  (0, import_react23.useEffect)(() => {
+  const isInitialRender = (0, import_react24.useRef)(true);
+  const isInternalUpdate = (0, import_react24.useRef)(false);
+  (0, import_react24.useEffect)(() => {
     if (isInitialRender.current && editorRef.current) {
       editorRef.current.innerHTML = value;
       isInitialRender.current = false;
@@ -4334,7 +4338,7 @@ var RichTextEditor = ({
       }
     }
   }, []);
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (!isInitialRender.current && !isInternalUpdate.current && editorRef.current) {
       const currentHtml = editorRef.current.innerHTML;
       if (currentHtml !== value) {
@@ -4377,7 +4381,7 @@ var RichTextEditor = ({
     }
     isInternalUpdate.current = false;
   }, [value]);
-  const updateActiveFormats = (0, import_react23.useCallback)(() => {
+  const updateActiveFormats = (0, import_react24.useCallback)(() => {
     const formats = /* @__PURE__ */ new Set();
     if (document.queryCommandState("bold")) formats.add("bold");
     if (document.queryCommandState("italic")) formats.add("italic");
@@ -4394,14 +4398,14 @@ var RichTextEditor = ({
     }
     setActiveFormats(formats);
   }, []);
-  const handleInput = (0, import_react23.useCallback)(() => {
+  const handleInput = (0, import_react24.useCallback)(() => {
     if (editorRef.current && onChange) {
       isInternalUpdate.current = true;
       onChange(editorRef.current.innerHTML);
     }
     updateActiveFormats();
   }, [onChange, updateActiveFormats]);
-  const handleFocus = (0, import_react23.useCallback)(() => {
+  const handleFocus = (0, import_react24.useCallback)(() => {
     setIsFocused(true);
     if (editorRef.current && (!editorRef.current.innerHTML || editorRef.current.innerHTML === "")) {
       editorRef.current.innerHTML = "<p><br></p>";
@@ -4415,28 +4419,28 @@ var RichTextEditor = ({
       }
     }
   }, []);
-  const handleFormat = (0, import_react23.useCallback)((command) => {
+  const handleFormat = (0, import_react24.useCallback)((command) => {
     if (disabled) return;
     document.execCommand(command, false);
     editorRef.current?.focus();
     updateActiveFormats();
     handleInput();
   }, [disabled, updateActiveFormats, handleInput]);
-  const handleList = (0, import_react23.useCallback)((command) => {
+  const handleList = (0, import_react24.useCallback)((command) => {
     if (disabled) return;
     document.execCommand(command, false);
     editorRef.current?.focus();
     updateActiveFormats();
     handleInput();
   }, [disabled, updateActiveFormats, handleInput]);
-  const handleHeading = (0, import_react23.useCallback)((level) => {
+  const handleHeading = (0, import_react24.useCallback)((level) => {
     if (disabled) return;
     document.execCommand("formatBlock", false, level);
     editorRef.current?.focus();
     updateActiveFormats();
     handleInput();
   }, [disabled, updateActiveFormats, handleInput]);
-  const handleLink = (0, import_react23.useCallback)(() => {
+  const handleLink = (0, import_react24.useCallback)(() => {
     if (disabled) return;
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
@@ -4444,7 +4448,7 @@ var RichTextEditor = ({
     }
     setShowLinkModal(true);
   }, [disabled]);
-  const insertLink = (0, import_react23.useCallback)(() => {
+  const insertLink = (0, import_react24.useCallback)(() => {
     if (!linkUrl || !editorRef.current) return;
     const selection = window.getSelection();
     if (savedSelection.current && selection) {
@@ -4462,7 +4466,7 @@ var RichTextEditor = ({
     editorRef.current?.focus();
     handleInput();
   }, [linkUrl, handleInput]);
-  const handleCode = (0, import_react23.useCallback)(() => {
+  const handleCode = (0, import_react24.useCallback)(() => {
     if (disabled) return;
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
@@ -4478,7 +4482,7 @@ var RichTextEditor = ({
     }
     editorRef.current?.focus();
   }, [disabled, handleInput]);
-  const handleImage = (0, import_react23.useCallback)(() => {
+  const handleImage = (0, import_react24.useCallback)(() => {
     if (disabled) return;
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
@@ -4486,7 +4490,7 @@ var RichTextEditor = ({
     }
     setShowImageModal(true);
   }, [disabled]);
-  const insertImage = (0, import_react23.useCallback)(() => {
+  const insertImage = (0, import_react24.useCallback)(() => {
     if (!imageUrl || !editorRef.current) return;
     editorRef.current.focus();
     const img = document.createElement("img");
@@ -4858,19 +4862,19 @@ var RichTextEditor = ({
 };
 
 // src/components/Toast.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime107 = require("react/jsx-runtime");
-var ToastContext = (0, import_react24.createContext)(void 0);
+var ToastContext = (0, import_react25.createContext)(void 0);
 var useToast = () => {
-  const context = (0, import_react24.useContext)(ToastContext);
+  const context = (0, import_react25.useContext)(ToastContext);
   if (!context) {
     throw new Error("useToast must be used within a ToastProvider");
   }
   return context;
 };
 var ToastProvider = ({ children, position = "top-right" }) => {
-  const [toasts, setToasts] = (0, import_react24.useState)([]);
-  const addToast = (0, import_react24.useCallback)((toast2) => {
+  const [toasts, setToasts] = (0, import_react25.useState)([]);
+  const addToast = (0, import_react25.useCallback)((toast2) => {
     const id = Math.random().toString(36).substring(7);
     const newToast = { ...toast2, id };
     setToasts((prev) => [...prev, newToast]);
@@ -4879,7 +4883,7 @@ var ToastProvider = ({ children, position = "top-right" }) => {
       removeToast(id);
     }, duration);
   }, []);
-  const removeToast = (0, import_react24.useCallback)((id) => {
+  const removeToast = (0, import_react25.useCallback)((id) => {
     setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
   }, []);
   const positionClasses2 = {
@@ -4954,7 +4958,7 @@ var toast = {
 };
 
 // src/components/Stepper.tsx
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var Stepper = ({
   steps,
@@ -4989,7 +4993,7 @@ var Stepper = ({
       const visibility = getStepVisibility(index);
       const visibleMobileSteps = steps.filter((_, i) => getStepVisibility(i).mobile);
       const isLastVisibleMobile = index === steps.map((_, i) => i).filter((i) => getStepVisibility(i).mobile).slice(-1)[0];
-      return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_react25.default.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(import_react26.default.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: `
               flex ${isHorizontal ? "flex-col items-center flex-shrink-0" : "flex-row items-start"}
               ${isHorizontal ? "" : isLast ? "" : "mb-6"}
@@ -5089,7 +5093,7 @@ var Divider = ({
 };
 
 // src/components/FileUpload.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var FileUpload = ({
   accept,
@@ -5103,9 +5107,9 @@ var FileUpload = ({
   label,
   helperText
 }) => {
-  const [files, setFiles] = (0, import_react26.useState)([]);
-  const [isDragging, setIsDragging] = (0, import_react26.useState)(false);
-  const fileInputRef = (0, import_react26.useRef)(null);
+  const [files, setFiles] = (0, import_react27.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react27.useState)(false);
+  const fileInputRef = (0, import_react27.useRef)(null);
   const formatFileSize = (bytes) => {
     if (bytes === 0) return "0 Bytes";
     const k = 1024;
@@ -5232,7 +5236,7 @@ var FileUpload = ({
 };
 
 // src/components/AudioPlayer.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime111 = require("react/jsx-runtime");
 var AudioPlayer = ({
   src,
@@ -5256,18 +5260,18 @@ var AudioPlayer = ({
   showChapters = true,
   onChapterChange
 }) => {
-  const audioRef = (0, import_react27.useRef)(null);
-  const [isPlaying, setIsPlaying] = (0, import_react27.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react27.useState)(0);
-  const [duration, setDuration] = (0, import_react27.useState)(0);
-  const [volume, setVolume] = (0, import_react27.useState)(1);
-  const [isMuted, setIsMuted] = (0, import_react27.useState)(false);
-  const [isLoading, setIsLoading] = (0, import_react27.useState)(true);
-  const [currentChapter, setCurrentChapter] = (0, import_react27.useState)(null);
-  const [showChapterList, setShowChapterList] = (0, import_react27.useState)(false);
-  const [hoveredChapter, setHoveredChapter] = (0, import_react27.useState)(null);
-  const [hoverPosition, setHoverPosition] = (0, import_react27.useState)({ x: 0, y: 0 });
-  (0, import_react27.useEffect)(() => {
+  const audioRef = (0, import_react28.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react28.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react28.useState)(0);
+  const [duration, setDuration] = (0, import_react28.useState)(0);
+  const [volume, setVolume] = (0, import_react28.useState)(1);
+  const [isMuted, setIsMuted] = (0, import_react28.useState)(false);
+  const [isLoading, setIsLoading] = (0, import_react28.useState)(true);
+  const [currentChapter, setCurrentChapter] = (0, import_react28.useState)(null);
+  const [showChapterList, setShowChapterList] = (0, import_react28.useState)(false);
+  const [hoveredChapter, setHoveredChapter] = (0, import_react28.useState)(null);
+  const [hoverPosition, setHoverPosition] = (0, import_react28.useState)({ x: 0, y: 0 });
+  (0, import_react28.useEffect)(() => {
     const audio = audioRef.current;
     if (!audio) return;
     const handleLoadedMetadata = () => {
@@ -5331,7 +5335,7 @@ var AudioPlayer = ({
       audio.removeEventListener("error", handleError);
     };
   }, [onPlay, onPause, onEnded, onTimeUpdate]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const audio = audioRef.current;
     if (!audio) return;
     audio.load();
@@ -5712,7 +5716,7 @@ var AudioPlayer = ({
 };
 
 // src/components/VideoPlayer.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var VideoPlayer = ({
   src,
@@ -5737,21 +5741,21 @@ var VideoPlayer = ({
   showChapters = true,
   onChapterChange
 }) => {
-  const videoRef = (0, import_react28.useRef)(null);
-  const containerRef = (0, import_react28.useRef)(null);
-  const [isPlaying, setIsPlaying] = (0, import_react28.useState)(false);
-  const [currentTime, setCurrentTime] = (0, import_react28.useState)(0);
-  const [duration, setDuration] = (0, import_react28.useState)(0);
-  const [volume, setVolume] = (0, import_react28.useState)(muted ? 0 : 1);
-  const [isMuted, setIsMuted] = (0, import_react28.useState)(muted);
-  const [isLoading, setIsLoading] = (0, import_react28.useState)(true);
-  const [isFullscreen, setIsFullscreen] = (0, import_react28.useState)(false);
-  const [showControlsOverlay, setShowControlsOverlay] = (0, import_react28.useState)(true);
-  const hideControlsTimeout = (0, import_react28.useRef)(null);
-  const [currentChapter, setCurrentChapter] = (0, import_react28.useState)(null);
-  const [hoveredChapter, setHoveredChapter] = (0, import_react28.useState)(null);
-  const [hoverPosition, setHoverPosition] = (0, import_react28.useState)({ x: 0, y: 0 });
-  (0, import_react28.useEffect)(() => {
+  const videoRef = (0, import_react29.useRef)(null);
+  const containerRef = (0, import_react29.useRef)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react29.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react29.useState)(0);
+  const [duration, setDuration] = (0, import_react29.useState)(0);
+  const [volume, setVolume] = (0, import_react29.useState)(muted ? 0 : 1);
+  const [isMuted, setIsMuted] = (0, import_react29.useState)(muted);
+  const [isLoading, setIsLoading] = (0, import_react29.useState)(true);
+  const [isFullscreen, setIsFullscreen] = (0, import_react29.useState)(false);
+  const [showControlsOverlay, setShowControlsOverlay] = (0, import_react29.useState)(true);
+  const hideControlsTimeout = (0, import_react29.useRef)(null);
+  const [currentChapter, setCurrentChapter] = (0, import_react29.useState)(null);
+  const [hoveredChapter, setHoveredChapter] = (0, import_react29.useState)(null);
+  const [hoverPosition, setHoverPosition] = (0, import_react29.useState)({ x: 0, y: 0 });
+  (0, import_react29.useEffect)(() => {
     const video = videoRef.current;
     if (!video) return;
     const handleLoadedMetadata = () => {
@@ -5820,12 +5824,12 @@ var VideoPlayer = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [onPlay, onPause, onEnded, onTimeUpdate]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const video = videoRef.current;
     if (!video) return;
     video.load();
   }, [src]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (!isPlaying) {
       setShowControlsOverlay(true);
       return;
@@ -6226,7 +6230,7 @@ var VideoPlayer = ({
 };
 
 // src/charts/LineChart.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 
 // src/charts/constants.ts
 var CHART_DEFAULTS = {
@@ -6293,7 +6297,7 @@ var CHART_DEFAULTS = {
 };
 
 // src/charts/hooks/useResponsiveChart.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 var BREAKPOINTS = {
   mobile: 640,
   // < 640px
@@ -6312,8 +6316,8 @@ var DEFAULT_ASPECT_RATIOS = {
   desktop: 2
 };
 function useBreakpoint() {
-  const [breakpoint, setBreakpoint] = (0, import_react29.useState)("desktop");
-  (0, import_react29.useEffect)(() => {
+  const [breakpoint, setBreakpoint] = (0, import_react30.useState)("desktop");
+  (0, import_react30.useEffect)(() => {
     const update = () => {
       const width = window.innerWidth;
       if (width < BREAKPOINTS.mobile) {
@@ -6610,7 +6614,7 @@ function createTickFormatter(domain) {
 }
 
 // src/charts/components/ChartTooltip.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var DefaultTooltipContent = ({
   active,
@@ -6657,10 +6661,10 @@ var ChartTooltip = ({
   containerBounds,
   animationDuration = 150
 }) => {
-  const tooltipRef = (0, import_react30.useRef)(null);
-  const [position, setPosition] = (0, import_react30.useState)({ x: 0, y: 0 });
-  const [isVisible, setIsVisible] = (0, import_react30.useState)(false);
-  (0, import_react30.useEffect)(() => {
+  const tooltipRef = (0, import_react31.useRef)(null);
+  const [position, setPosition] = (0, import_react31.useState)({ x: 0, y: 0 });
+  const [isVisible, setIsVisible] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
     if (!active || !tooltipRef.current) {
       setIsVisible(false);
       return;
@@ -6689,13 +6693,13 @@ var ChartTooltip = ({
   if (!active) {
     return null;
   }
-  const tooltipContent = content ? import_react30.default.isValidElement(content) ? import_react30.default.cloneElement(content, {
+  const tooltipContent = content ? import_react31.default.isValidElement(content) ? import_react31.default.cloneElement(content, {
     active,
     label,
     payload,
     formatter,
     labelFormatter
-  }) : import_react30.default.createElement(content, {
+  }) : import_react31.default.createElement(content, {
     active,
     label,
     payload,
@@ -6728,26 +6732,26 @@ var ChartTooltip = ({
   );
 };
 function useTooltip() {
-  const [tooltipData, setTooltipData] = (0, import_react30.useState)({
+  const [tooltipData, setTooltipData] = (0, import_react31.useState)({
     active: false,
     x: 0,
     y: 0,
     label: void 0,
     payload: void 0
   });
-  const showTooltip = import_react30.default.useCallback((data) => {
+  const showTooltip = import_react31.default.useCallback((data) => {
     setTooltipData({
       active: true,
       ...data
     });
   }, []);
-  const hideTooltip = import_react30.default.useCallback(() => {
+  const hideTooltip = import_react31.default.useCallback(() => {
     setTooltipData((prev) => ({
       ...prev,
       active: false
     }));
   }, []);
-  const updatePosition = import_react30.default.useCallback((x, y) => {
+  const updatePosition = import_react31.default.useCallback((x, y) => {
     setTooltipData((prev) => ({
       ...prev,
       x,
@@ -7154,7 +7158,7 @@ var ReferenceArea = ({
 };
 
 // src/charts/components/CartesianGrid.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime117 = require("react/jsx-runtime");
 var CartesianGrid = ({
   horizontal = true,
@@ -7172,12 +7176,12 @@ var CartesianGrid = ({
     return null;
   }
   const { width, height } = _chartDimensions;
-  const hPoints = (0, import_react31.useMemo)(() => {
+  const hPoints = (0, import_react32.useMemo)(() => {
     if (horizontalPoints) return horizontalPoints;
     const count = 5;
     return Array.from({ length: count + 1 }, (_, i) => height / count * i);
   }, [horizontalPoints, height]);
-  const vPoints = (0, import_react31.useMemo)(() => {
+  const vPoints = (0, import_react32.useMemo)(() => {
     if (verticalPoints) return verticalPoints;
     const count = 6;
     return Array.from({ length: count + 1 }, (_, i) => width / count * i);
@@ -7253,9 +7257,9 @@ var LineChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = (0, import_react32.useRef)(null);
-  const svgRef = (0, import_react32.useRef)(null);
-  const [activeIndex, setActiveIndex] = (0, import_react32.useState)(null);
+  const containerRef = (0, import_react33.useRef)(null);
+  const svgRef = (0, import_react33.useRef)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react33.useState)(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -7273,7 +7277,7 @@ var LineChart = ({
     providedHeight
   });
   const animate = animateProp && !_isResizing;
-  const padding = (0, import_react32.useMemo)(() => ({
+  const padding = (0, import_react33.useMemo)(() => ({
     top: customPadding?.top ?? CHART_DEFAULTS.padding.top,
     right: customPadding?.right ?? (showValueLabels ? 80 : CHART_DEFAULTS.padding.right),
     bottom: customPadding?.bottom ?? (showXAxis ? 60 : CHART_DEFAULTS.padding.bottom),
@@ -7281,17 +7285,17 @@ var LineChart = ({
   }), [customPadding, showXAxis, showYAxis, showValueLabels]);
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
-  const allPoints = (0, import_react32.useMemo)(
+  const allPoints = (0, import_react33.useMemo)(
     () => data.flatMap((series) => series.data),
     [data]
   );
-  const xValueType = (0, import_react32.useMemo)(() => {
+  const xValueType = (0, import_react33.useMemo)(() => {
     const firstX = data[0]?.data[0]?.x;
     if (firstX instanceof Date) return "date";
     if (typeof firstX === "number") return "number";
     return "string";
   }, [data]);
-  const xDomainCalc = (0, import_react32.useMemo)(() => {
+  const xDomainCalc = (0, import_react33.useMemo)(() => {
     if (xValueType === "date") {
       const dates = allPoints.map((p) => p.x.getTime());
       return [Math.min(...dates), Math.max(...dates)];
@@ -7303,12 +7307,12 @@ var LineChart = ({
     const maxLen = Math.max(...data.map((s) => s.data.length));
     return [0, maxLen - 1];
   }, [allPoints, xValueType, data]);
-  const yDomainCalc = (0, import_react32.useMemo)(() => {
+  const yDomainCalc = (0, import_react33.useMemo)(() => {
     if (yDomain) return yDomain;
     const yValues = allPoints.map((p) => p.y);
     return calculateDomain(yValues, { includeZero: true, padding: 0.1 });
   }, [allPoints, yDomain]);
-  const xScale = (0, import_react32.useMemo)(() => {
+  const xScale = (0, import_react33.useMemo)(() => {
     if (xValueType === "date") {
       return (value) => {
         const time = value instanceof Date ? value.getTime() : Number(value);
@@ -7331,18 +7335,18 @@ var LineChart = ({
       return index / maxLen * chartWidth;
     };
   }, [xValueType, xDomainCalc, chartWidth, data]);
-  const yScale = (0, import_react32.useMemo)(
+  const yScale = (0, import_react33.useMemo)(
     () => scaleLinear({
       domain: yDomainCalc,
       range: [chartHeight, 0]
     }),
     [yDomainCalc, chartHeight]
   );
-  const yTicks = (0, import_react32.useMemo)(
+  const yTicks = (0, import_react33.useMemo)(
     () => getTicks(yDomainCalc, yAxisTickCount),
     [yDomainCalc, yAxisTickCount]
   );
-  const xTicks = (0, import_react32.useMemo)(() => {
+  const xTicks = (0, import_react33.useMemo)(() => {
     if (xValueType === "string") {
       return data[0]?.data.map((p, i) => ({ value: p.x, index: i })) || [];
     }
@@ -7350,7 +7354,7 @@ var LineChart = ({
     const ticks = getTicks(xDomainCalc, tickCount);
     return ticks.map((t) => ({ value: t, index: 0 }));
   }, [xValueType, xDomainCalc, data]);
-  const xFormatter = (0, import_react32.useCallback)((value) => {
+  const xFormatter = (0, import_react33.useCallback)((value) => {
     if (formatXValue) return formatXValue(value);
     if (value instanceof Date) {
       const range = xDomainCalc[1] - xDomainCalc[0];
@@ -7358,11 +7362,11 @@ var LineChart = ({
     }
     return String(value);
   }, [formatXValue, xDomainCalc]);
-  const yFormatter = (0, import_react32.useMemo)(() => {
+  const yFormatter = (0, import_react33.useMemo)(() => {
     if (formatYValue) return formatYValue;
     return createTickFormatter(yDomainCalc);
   }, [formatYValue, yDomainCalc]);
-  const seriesPaths = (0, import_react32.useMemo)(() => {
+  const seriesPaths = (0, import_react33.useMemo)(() => {
     return data.map((series) => {
       const points = series.data.map((point, i) => ({
         x: xScale(point.x, i),
@@ -7387,7 +7391,7 @@ var LineChart = ({
       return { points, path };
     });
   }, [data, xScale, yScale]);
-  const handleChartMouseMove = (0, import_react32.useCallback)((e) => {
+  const handleChartMouseMove = (0, import_react33.useCallback)((e) => {
     if (!svgRef.current || !containerRef.current || data.length === 0 || data[0].data.length === 0) return;
     const svgElement = svgRef.current;
     const point = svgElement.createSVGPoint();
@@ -7427,12 +7431,12 @@ var LineChart = ({
     }
     onPointHover?.(data[0].data[nearestIndex], 0, nearestIndex);
   }, [data, seriesPaths, padding, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
-  const handleChartMouseLeave = (0, import_react32.useCallback)(() => {
+  const handleChartMouseLeave = (0, import_react33.useCallback)(() => {
     setActiveIndex(null);
     hideTooltip();
     onPointHover?.(null, -1, -1);
   }, [hideTooltip, onPointHover]);
-  const handleChartClick = (0, import_react32.useCallback)(() => {
+  const handleChartClick = (0, import_react33.useCallback)(() => {
     if (activeIndex === null || !onPointClick) return;
     data.forEach((series, seriesIndex) => {
       if (series.data[activeIndex]) {
@@ -7440,7 +7444,7 @@ var LineChart = ({
       }
     });
   }, [activeIndex, data, onPointClick]);
-  const legendItems = (0, import_react32.useMemo)(
+  const legendItems = (0, import_react33.useMemo)(
     () => data.map((series, i) => ({
       name: series.name,
       color: series.color || colors[i % colors.length],
@@ -7448,7 +7452,7 @@ var LineChart = ({
     })),
     [data, colors]
   );
-  const referenceElements = (0, import_react32.useMemo)(() => {
+  const referenceElements = (0, import_react33.useMemo)(() => {
     if (!children) return null;
     const chartDimensions = {
       width: chartWidth,
@@ -7465,10 +7469,10 @@ var LineChart = ({
       },
       yScale
     };
-    return import_react32.default.Children.map(children, (child) => {
-      if (!import_react32.default.isValidElement(child)) return child;
+    return import_react33.default.Children.map(children, (child) => {
+      if (!import_react33.default.isValidElement(child)) return child;
       if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
-        return import_react32.default.cloneElement(child, {
+        return import_react33.default.cloneElement(child, {
           _chartDimensions: chartDimensions,
           _scales: scales
         });
@@ -7476,7 +7480,7 @@ var LineChart = ({
       return child;
     });
   }, [children, chartWidth, chartHeight, padding, xScale, yScale, xValueType, data]);
-  const accessibleDescription = (0, import_react32.useMemo)(() => {
+  const accessibleDescription = (0, import_react33.useMemo)(() => {
     if (ariaLabel) return ariaLabel;
     const seriesNames = data.map((s) => s.name).join(", ");
     return `Line chart with ${data.length} series: ${seriesNames}`;
@@ -7756,7 +7760,7 @@ var LineChart = ({
 };
 
 // src/charts/BarChart.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_jsx_runtime119 = require("react/jsx-runtime");
 var BarChart = ({
   data,
@@ -7793,8 +7797,8 @@ var BarChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = (0, import_react33.useRef)(null);
-  const [hoveredBar, setHoveredBar] = (0, import_react33.useState)(null);
+  const containerRef = (0, import_react34.useRef)(null);
+  const [hoveredBar, setHoveredBar] = (0, import_react34.useState)(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -7812,7 +7816,7 @@ var BarChart = ({
     providedHeight
   });
   const animate = animateProp && !_isResizing && !isResponsive;
-  const padding = (0, import_react33.useMemo)(() => ({
+  const padding = (0, import_react34.useMemo)(() => ({
     top: customPadding?.top ?? CHART_DEFAULTS.padding.top,
     right: customPadding?.right ?? CHART_DEFAULTS.padding.right,
     bottom: customPadding?.bottom ?? (showXAxis ? 70 : CHART_DEFAULTS.padding.bottom),
@@ -7820,11 +7824,11 @@ var BarChart = ({
   }), [customPadding, showXAxis, showYAxis]);
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
-  const categories = (0, import_react33.useMemo)(() => {
+  const categories = (0, import_react34.useMemo)(() => {
     const cats = data[0]?.data.map((d) => String(d.x)) || [];
     return [...new Set(cats)];
   }, [data]);
-  const yDomainCalc = (0, import_react33.useMemo)(() => {
+  const yDomainCalc = (0, import_react34.useMemo)(() => {
     if (yDomain) return yDomain;
     if (stacked) {
       const maxStacked = categories.map((_, catIndex) => {
@@ -7837,7 +7841,7 @@ var BarChart = ({
     const allY = data.flatMap((s) => s.data.map((d) => d.y));
     return calculateDomain(allY, { includeZero: true, padding: 0.1 });
   }, [data, categories, stacked, yDomain]);
-  const xBandScale = (0, import_react33.useMemo)(
+  const xBandScale = (0, import_react34.useMemo)(
     () => scaleBand({
       domain: categories,
       range: horizontal ? [chartHeight, 0] : [0, chartWidth],
@@ -7845,25 +7849,25 @@ var BarChart = ({
     }),
     [categories, chartWidth, chartHeight, horizontal, barCategoryGap]
   );
-  const yScale = (0, import_react33.useMemo)(
+  const yScale = (0, import_react34.useMemo)(
     () => scaleLinear({
       domain: yDomainCalc,
       range: horizontal ? [0, chartWidth] : [chartHeight, 0]
     }),
     [yDomainCalc, chartWidth, chartHeight, horizontal]
   );
-  const yTicks = (0, import_react33.useMemo)(
+  const yTicks = (0, import_react34.useMemo)(
     () => getTicks(yDomainCalc, yAxisTickCount),
     [yDomainCalc, yAxisTickCount]
   );
-  const yFormatter = (0, import_react33.useMemo)(() => {
+  const yFormatter = (0, import_react34.useMemo)(() => {
     if (formatYValue) return formatYValue;
     return createTickFormatter(yDomainCalc);
   }, [formatYValue, yDomainCalc]);
   const numSeries = data.length;
   const bandwidth = xBandScale.bandwidth();
   const barWidth = stacked ? bandwidth : (bandwidth - bandwidth * barGap * (numSeries - 1)) / numSeries;
-  const handleBarEnter = (0, import_react33.useCallback)((e, seriesIndex, barIndex) => {
+  const handleBarEnter = (0, import_react34.useCallback)((e, seriesIndex, barIndex) => {
     const series = data[seriesIndex];
     const point = series.data[barIndex];
     setHoveredBar({ seriesIndex, barIndex });
@@ -7886,16 +7890,16 @@ var BarChart = ({
     }
     onBarHover?.(point, seriesIndex, barIndex);
   }, [data, showTooltip, colors, showTooltipFn, onBarHover]);
-  const handleBarLeave = (0, import_react33.useCallback)(() => {
+  const handleBarLeave = (0, import_react34.useCallback)(() => {
     setHoveredBar(null);
     hideTooltip();
     onBarHover?.(null, -1, -1);
   }, [hideTooltip, onBarHover]);
-  const handleBarClick = (0, import_react33.useCallback)((seriesIndex, barIndex) => {
+  const handleBarClick = (0, import_react34.useCallback)((seriesIndex, barIndex) => {
     const point = data[seriesIndex].data[barIndex];
     onBarClick?.(point, seriesIndex, barIndex);
   }, [data, onBarClick]);
-  const legendItems = (0, import_react33.useMemo)(
+  const legendItems = (0, import_react34.useMemo)(
     () => data.map((series, i) => ({
       name: series.name,
       color: series.color || colors[i % colors.length],
@@ -7903,7 +7907,7 @@ var BarChart = ({
     })),
     [data, colors]
   );
-  const bars = (0, import_react33.useMemo)(() => {
+  const bars = (0, import_react34.useMemo)(() => {
     const result = [];
     const cumulativeValues = {};
     data.forEach((series, seriesIndex) => {
@@ -8015,17 +8019,17 @@ var BarChart = ({
     handleBarLeave,
     handleBarClick
   ]);
-  const referenceElements = (0, import_react33.useMemo)(() => {
+  const referenceElements = (0, import_react34.useMemo)(() => {
     if (!children) return null;
     const chartDimensions = { width: chartWidth, height: chartHeight, padding };
     const scales = {
       xScale: (value) => xBandScale.scale(String(value)) + bandwidth / 2,
       yScale
     };
-    return import_react33.default.Children.map(children, (child) => {
-      if (!import_react33.default.isValidElement(child)) return child;
+    return import_react34.default.Children.map(children, (child) => {
+      if (!import_react34.default.isValidElement(child)) return child;
       if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
-        return import_react33.default.cloneElement(child, {
+        return import_react34.default.cloneElement(child, {
           _chartDimensions: chartDimensions,
           _scales: scales
         });
@@ -8033,7 +8037,7 @@ var BarChart = ({
       return child;
     });
   }, [children, chartWidth, chartHeight, padding, xBandScale, bandwidth, yScale]);
-  const accessibleDescription = (0, import_react33.useMemo)(() => {
+  const accessibleDescription = (0, import_react34.useMemo)(() => {
     if (ariaLabel) return ariaLabel;
     const seriesNames = data.map((s) => s.name).join(", ");
     return `Bar chart with ${data.length} series: ${seriesNames}`;
@@ -8182,7 +8186,7 @@ var BarChart = ({
 };
 
 // src/charts/AreaChart.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var AreaChart = ({
   data,
@@ -8218,10 +8222,10 @@ var AreaChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = (0, import_react34.useRef)(null);
-  const svgRef = (0, import_react34.useRef)(null);
-  const chartId = (0, import_react34.useId)();
-  const [activeIndex, setActiveIndex] = (0, import_react34.useState)(null);
+  const containerRef = (0, import_react35.useRef)(null);
+  const svgRef = (0, import_react35.useRef)(null);
+  const chartId = (0, import_react35.useId)();
+  const [activeIndex, setActiveIndex] = (0, import_react35.useState)(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -8239,7 +8243,7 @@ var AreaChart = ({
     providedHeight
   });
   const animate = animateProp && !_isResizing && !isResponsive;
-  const padding = (0, import_react34.useMemo)(() => ({
+  const padding = (0, import_react35.useMemo)(() => ({
     top: customPadding?.top ?? CHART_DEFAULTS.padding.top,
     right: customPadding?.right ?? CHART_DEFAULTS.padding.right,
     bottom: customPadding?.bottom ?? (showXAxis ? 60 : CHART_DEFAULTS.padding.bottom),
@@ -8247,17 +8251,17 @@ var AreaChart = ({
   }), [customPadding, showXAxis, showYAxis]);
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
-  const allPoints = (0, import_react34.useMemo)(
+  const allPoints = (0, import_react35.useMemo)(
     () => data.flatMap((series) => series.data),
     [data]
   );
-  const xValueType = (0, import_react34.useMemo)(() => {
+  const xValueType = (0, import_react35.useMemo)(() => {
     const firstX = data[0]?.data[0]?.x;
     if (firstX instanceof Date) return "date";
     if (typeof firstX === "number") return "number";
     return "string";
   }, [data]);
-  const xDomainCalc = (0, import_react34.useMemo)(() => {
+  const xDomainCalc = (0, import_react35.useMemo)(() => {
     if (xValueType === "date") {
       const dates = allPoints.map((p) => p.x.getTime());
       return [Math.min(...dates), Math.max(...dates)];
@@ -8269,7 +8273,7 @@ var AreaChart = ({
     const maxLen = Math.max(...data.map((s) => s.data.length));
     return [0, maxLen - 1];
   }, [allPoints, xValueType, data]);
-  const yDomainCalc = (0, import_react34.useMemo)(() => {
+  const yDomainCalc = (0, import_react35.useMemo)(() => {
     if (yDomain) return yDomain;
     if (stacked) {
       const maxPoints = Math.max(...data.map((s) => s.data.length));
@@ -8281,7 +8285,7 @@ var AreaChart = ({
     const yValues = allPoints.map((p) => p.y);
     return calculateDomain(yValues, { includeZero: true, padding: 0.1 });
   }, [allPoints, stacked, data, yDomain]);
-  const xScale = (0, import_react34.useMemo)(() => {
+  const xScale = (0, import_react35.useMemo)(() => {
     if (xValueType === "date") {
       return (value) => {
         const time = value instanceof Date ? value.getTime() : Number(value);
@@ -8304,18 +8308,18 @@ var AreaChart = ({
       return index / maxLen * chartWidth;
     };
   }, [xValueType, xDomainCalc, chartWidth, data]);
-  const yScale = (0, import_react34.useMemo)(
+  const yScale = (0, import_react35.useMemo)(
     () => scaleLinear({
       domain: yDomainCalc,
       range: [chartHeight, 0]
     }),
     [yDomainCalc, chartHeight]
   );
-  const yTicks = (0, import_react34.useMemo)(
+  const yTicks = (0, import_react35.useMemo)(
     () => getTicks(yDomainCalc, yAxisTickCount),
     [yDomainCalc, yAxisTickCount]
   );
-  const xTicks = (0, import_react34.useMemo)(() => {
+  const xTicks = (0, import_react35.useMemo)(() => {
     if (xValueType === "string") {
       return data[0]?.data.map((p, i) => ({ value: p.x, index: i })) || [];
     }
@@ -8323,7 +8327,7 @@ var AreaChart = ({
     const ticks = getTicks(xDomainCalc, tickCount);
     return ticks.map((t) => ({ value: t, index: 0 }));
   }, [xValueType, xDomainCalc, data]);
-  const xFormatter = (0, import_react34.useCallback)((value) => {
+  const xFormatter = (0, import_react35.useCallback)((value) => {
     if (formatXValue) return formatXValue(value);
     if (value instanceof Date) {
       const range = xDomainCalc[1] - xDomainCalc[0];
@@ -8331,11 +8335,11 @@ var AreaChart = ({
     }
     return String(value);
   }, [formatXValue, xDomainCalc]);
-  const yFormatter = (0, import_react34.useMemo)(() => {
+  const yFormatter = (0, import_react35.useMemo)(() => {
     if (formatYValue) return formatYValue;
     return createTickFormatter(yDomainCalc);
   }, [formatYValue, yDomainCalc]);
-  const areaPaths = (0, import_react34.useMemo)(() => {
+  const areaPaths = (0, import_react35.useMemo)(() => {
     const paths = [];
     const cumulativeY = Array(data[0]?.data.length || 0).fill(0);
     data.forEach((series) => {
@@ -8369,7 +8373,7 @@ var AreaChart = ({
     });
     return paths;
   }, [data, xScale, yScale, stacked, curved]);
-  const handleChartMouseMove = (0, import_react34.useCallback)((e) => {
+  const handleChartMouseMove = (0, import_react35.useCallback)((e) => {
     if (!svgRef.current || !containerRef.current || data.length === 0 || data[0].data.length === 0) return;
     const svgElement = svgRef.current;
     const point = svgElement.createSVGPoint();
@@ -8409,12 +8413,12 @@ var AreaChart = ({
     }
     onPointHover?.(data[0].data[nearestIndex], 0, nearestIndex);
   }, [data, areaPaths, padding, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
-  const handleChartMouseLeave = (0, import_react34.useCallback)(() => {
+  const handleChartMouseLeave = (0, import_react35.useCallback)(() => {
     setActiveIndex(null);
     hideTooltip();
     onPointHover?.(null, -1, -1);
   }, [hideTooltip, onPointHover]);
-  const handleChartClick = (0, import_react34.useCallback)(() => {
+  const handleChartClick = (0, import_react35.useCallback)(() => {
     if (activeIndex === null || !onPointClick) return;
     data.forEach((series, seriesIndex) => {
       if (series.data[activeIndex]) {
@@ -8422,7 +8426,7 @@ var AreaChart = ({
       }
     });
   }, [activeIndex, data, onPointClick]);
-  const legendItems = (0, import_react34.useMemo)(
+  const legendItems = (0, import_react35.useMemo)(
     () => data.map((series, i) => ({
       name: series.name,
       color: series.color || colors[i % colors.length],
@@ -8430,7 +8434,7 @@ var AreaChart = ({
     })),
     [data, colors]
   );
-  const referenceElements = (0, import_react34.useMemo)(() => {
+  const referenceElements = (0, import_react35.useMemo)(() => {
     if (!children) return null;
     const chartDimensions = { width: chartWidth, height: chartHeight, padding };
     const scales = {
@@ -8443,10 +8447,10 @@ var AreaChart = ({
       },
       yScale
     };
-    return import_react34.default.Children.map(children, (child) => {
-      if (!import_react34.default.isValidElement(child)) return child;
+    return import_react35.default.Children.map(children, (child) => {
+      if (!import_react35.default.isValidElement(child)) return child;
       if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
-        return import_react34.default.cloneElement(child, {
+        return import_react35.default.cloneElement(child, {
           _chartDimensions: chartDimensions,
           _scales: scales
         });
@@ -8454,7 +8458,7 @@ var AreaChart = ({
       return child;
     });
   }, [children, chartWidth, chartHeight, padding, xScale, yScale, xValueType, data]);
-  const accessibleDescription = (0, import_react34.useMemo)(() => {
+  const accessibleDescription = (0, import_react35.useMemo)(() => {
     if (ariaLabel) return ariaLabel;
     const seriesNames = data.map((s) => s.name).join(", ");
     return `Area chart with ${data.length} series: ${seriesNames}`;
@@ -8723,7 +8727,7 @@ var AreaChart = ({
 };
 
 // src/charts/PieChart.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_jsx_runtime121 = require("react/jsx-runtime");
 var PieChart = ({
   data,
@@ -8757,9 +8761,9 @@ var PieChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = (0, import_react35.useRef)(null);
-  const [hoveredSlice, setHoveredSlice] = (0, import_react35.useState)(null);
-  const [activeSlice, setActiveSlice] = (0, import_react35.useState)(null);
+  const containerRef = (0, import_react36.useRef)(null);
+  const [hoveredSlice, setHoveredSlice] = (0, import_react36.useState)(null);
+  const [activeSlice, setActiveSlice] = (0, import_react36.useState)(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -8786,11 +8790,11 @@ var PieChart = ({
   const outerRadius = providedOuterRadius || maxRadius;
   const innerRadius = providedInnerRadius ?? (donut ? outerRadius * 0.6 : 0);
   const isDonut = innerRadius > 0;
-  const total = (0, import_react35.useMemo)(
+  const total = (0, import_react36.useMemo)(
     () => data.reduce((sum, d) => sum + d.value, 0),
     [data]
   );
-  const slices = (0, import_react35.useMemo)(() => {
+  const slices = (0, import_react36.useMemo)(() => {
     const angleRange = endAngle - startAngle;
     let currentAngle = startAngle;
     return data.map((item, index) => {
@@ -8826,7 +8830,7 @@ var PieChart = ({
       };
     });
   }, [data, total, startAngle, endAngle, paddingAngle, centerX, centerY, outerRadius, innerRadius, isDonut, colors]);
-  const handleSliceEnter = (0, import_react35.useCallback)((e, index) => {
+  const handleSliceEnter = (0, import_react36.useCallback)((e, index) => {
     const slice = slices[index];
     setHoveredSlice(index);
     if (showTooltip && containerRef.current) {
@@ -8848,16 +8852,16 @@ var PieChart = ({
     }
     onSliceHover?.(data[index], index);
   }, [slices, data, showTooltip, showTooltipFn, onSliceHover]);
-  const handleSliceLeave = (0, import_react35.useCallback)(() => {
+  const handleSliceLeave = (0, import_react36.useCallback)(() => {
     setHoveredSlice(null);
     hideTooltip();
     onSliceHover?.(null, -1);
   }, [hideTooltip, onSliceHover]);
-  const handleSliceClick = (0, import_react35.useCallback)((index) => {
+  const handleSliceClick = (0, import_react36.useCallback)((index) => {
     setActiveSlice((prev) => prev === index ? null : index);
     onSliceClick?.(data[index], index);
   }, [data, onSliceClick]);
-  const getLabelText = (0, import_react35.useCallback)((slice) => {
+  const getLabelText = (0, import_react36.useCallback)((slice) => {
     if (labelFormatter) {
       return labelFormatter(data[slice.index], slice.percent);
     }
@@ -8872,7 +8876,7 @@ var PieChart = ({
         return `${slice.percent.toFixed(1)}%`;
     }
   }, [labelType, labelFormatter, data]);
-  const legendItems = (0, import_react35.useMemo)(
+  const legendItems = (0, import_react36.useMemo)(
     () => data.map((item, i) => ({
       name: `${item.label}${showPercentages ? ` (${(item.value / total * 100).toFixed(1)}%)` : ""}`,
       color: item.color || colors[i % colors.length],
@@ -8880,7 +8884,7 @@ var PieChart = ({
     })),
     [data, colors, total, showPercentages]
   );
-  const accessibleDescription = (0, import_react35.useMemo)(() => {
+  const accessibleDescription = (0, import_react36.useMemo)(() => {
     if (ariaLabel) return ariaLabel;
     const sliceNames = data.map((d) => `${d.label}: ${d.value}`).join(", ");
     return `${isDonut ? "Donut" : "Pie"} chart with ${data.length} slices: ${sliceNames}`;
@@ -9026,7 +9030,7 @@ var PieChart = ({
 };
 
 // src/charts/ScatterChart.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var import_jsx_runtime122 = require("react/jsx-runtime");
 function linearRegression(points) {
   const n = points.length;
@@ -9154,8 +9158,8 @@ var ScatterChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = (0, import_react36.useRef)(null);
-  const [hoveredPoint, setHoveredPoint] = (0, import_react36.useState)(null);
+  const containerRef = (0, import_react37.useRef)(null);
+  const [hoveredPoint, setHoveredPoint] = (0, import_react37.useState)(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -9173,7 +9177,7 @@ var ScatterChart = ({
     providedHeight
   });
   const animate = animateProp && !_isResizing && !isResponsive;
-  const padding = (0, import_react36.useMemo)(() => ({
+  const padding = (0, import_react37.useMemo)(() => ({
     top: customPadding?.top ?? CHART_DEFAULTS.padding.top,
     right: customPadding?.right ?? CHART_DEFAULTS.padding.right,
     bottom: customPadding?.bottom ?? (showXAxis ? 60 : CHART_DEFAULTS.padding.bottom),
@@ -9181,52 +9185,52 @@ var ScatterChart = ({
   }), [customPadding, showXAxis, showYAxis]);
   const chartWidth = width - padding.left - padding.right;
   const chartHeight = height - padding.top - padding.bottom;
-  const allPoints = (0, import_react36.useMemo)(
+  const allPoints = (0, import_react37.useMemo)(
     () => data.flatMap((series) => series.data),
     [data]
   );
-  const xDomainCalc = (0, import_react36.useMemo)(() => {
+  const xDomainCalc = (0, import_react37.useMemo)(() => {
     if (xDomain) return xDomain;
     const xValues = allPoints.map((p) => p.x);
     return calculateDomain(xValues, { includeZero: false, padding: 0.1 });
   }, [allPoints, xDomain]);
-  const yDomainCalc = (0, import_react36.useMemo)(() => {
+  const yDomainCalc = (0, import_react37.useMemo)(() => {
     if (yDomain) return yDomain;
     const yValues = allPoints.map((p) => p.y);
     return calculateDomain(yValues, { includeZero: false, padding: 0.1 });
   }, [allPoints, yDomain]);
-  const zDomain = (0, import_react36.useMemo)(() => {
+  const zDomain = (0, import_react37.useMemo)(() => {
     if (!bubble) return [0, 1];
     const zValues = allPoints.map((p) => p.z || 0).filter((z) => z > 0);
     if (zValues.length === 0) return [0, 1];
     return [Math.min(...zValues), Math.max(...zValues)];
   }, [allPoints, bubble]);
-  const xScale = (0, import_react36.useMemo)(
+  const xScale = (0, import_react37.useMemo)(
     () => scaleLinear({
       domain: xDomainCalc,
       range: [0, chartWidth]
     }),
     [xDomainCalc, chartWidth]
   );
-  const yScale = (0, import_react36.useMemo)(
+  const yScale = (0, import_react37.useMemo)(
     () => scaleLinear({
       domain: yDomainCalc,
       range: [chartHeight, 0]
     }),
     [yDomainCalc, chartHeight]
   );
-  const sizeScale = (0, import_react36.useMemo)(() => {
+  const sizeScale = (0, import_react37.useMemo)(() => {
     if (!bubble) return () => pointSize;
     return scaleLinear({
       domain: zDomain,
       range: [minBubbleSize, maxBubbleSize]
     });
   }, [bubble, zDomain, minBubbleSize, maxBubbleSize, pointSize]);
-  const xTicks = (0, import_react36.useMemo)(() => getTicks(xDomainCalc, xAxisTickCount), [xDomainCalc, xAxisTickCount]);
-  const yTicks = (0, import_react36.useMemo)(() => getTicks(yDomainCalc, yAxisTickCount), [yDomainCalc, yAxisTickCount]);
-  const xFormatter = (0, import_react36.useMemo)(() => formatXValue || createTickFormatter(xDomainCalc), [formatXValue, xDomainCalc]);
-  const yFormatter = (0, import_react36.useMemo)(() => formatYValue || createTickFormatter(yDomainCalc), [formatYValue, yDomainCalc]);
-  const trendLines = (0, import_react36.useMemo)(() => {
+  const xTicks = (0, import_react37.useMemo)(() => getTicks(xDomainCalc, xAxisTickCount), [xDomainCalc, xAxisTickCount]);
+  const yTicks = (0, import_react37.useMemo)(() => getTicks(yDomainCalc, yAxisTickCount), [yDomainCalc, yAxisTickCount]);
+  const xFormatter = (0, import_react37.useMemo)(() => formatXValue || createTickFormatter(xDomainCalc), [formatXValue, xDomainCalc]);
+  const yFormatter = (0, import_react37.useMemo)(() => formatYValue || createTickFormatter(yDomainCalc), [formatYValue, yDomainCalc]);
+  const trendLines = (0, import_react37.useMemo)(() => {
     if (!showTrendLine) return [];
     return data.map((series) => {
       const regression = linearRegression(series.data);
@@ -9242,7 +9246,7 @@ var ScatterChart = ({
       };
     });
   }, [data, showTrendLine, xDomainCalc, xScale, yScale]);
-  const handlePointEnter = (0, import_react36.useCallback)((e, seriesIndex, pointIndex) => {
+  const handlePointEnter = (0, import_react37.useCallback)((e, seriesIndex, pointIndex) => {
     const series = data[seriesIndex];
     const point = series.data[pointIndex];
     setHoveredPoint({ seriesIndex, pointIndex });
@@ -9266,16 +9270,16 @@ var ScatterChart = ({
     }
     onPointHover?.(point, seriesIndex, pointIndex);
   }, [data, showTooltip, colors, bubble, showTooltipFn, onPointHover]);
-  const handlePointLeave = (0, import_react36.useCallback)(() => {
+  const handlePointLeave = (0, import_react37.useCallback)(() => {
     setHoveredPoint(null);
     hideTooltip();
     onPointHover?.(null, -1, -1);
   }, [hideTooltip, onPointHover]);
-  const handlePointClick = (0, import_react36.useCallback)((seriesIndex, pointIndex) => {
+  const handlePointClick = (0, import_react37.useCallback)((seriesIndex, pointIndex) => {
     const point = data[seriesIndex].data[pointIndex];
     onPointClick?.(point, seriesIndex, pointIndex);
   }, [data, onPointClick]);
-  const legendItems = (0, import_react36.useMemo)(
+  const legendItems = (0, import_react37.useMemo)(
     () => data.map((series, i) => ({
       name: series.name,
       color: series.color || colors[i % colors.length],
@@ -9283,14 +9287,14 @@ var ScatterChart = ({
     })),
     [data, colors]
   );
-  const referenceElements = (0, import_react36.useMemo)(() => {
+  const referenceElements = (0, import_react37.useMemo)(() => {
     if (!children) return null;
     const chartDimensions = { width: chartWidth, height: chartHeight, padding };
     const scales = { xScale, yScale };
-    return import_react36.default.Children.map(children, (child) => {
-      if (!import_react36.default.isValidElement(child)) return child;
+    return import_react37.default.Children.map(children, (child) => {
+      if (!import_react37.default.isValidElement(child)) return child;
       if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
-        return import_react36.default.cloneElement(child, {
+        return import_react37.default.cloneElement(child, {
           _chartDimensions: chartDimensions,
           _scales: scales
         });
@@ -9298,7 +9302,7 @@ var ScatterChart = ({
       return child;
     });
   }, [children, chartWidth, chartHeight, padding, xScale, yScale]);
-  const accessibleDescription = (0, import_react36.useMemo)(() => {
+  const accessibleDescription = (0, import_react37.useMemo)(() => {
     if (ariaLabel) return ariaLabel;
     const totalPoints = data.reduce((sum, s) => sum + s.data.length, 0);
     return `Scatter chart with ${data.length} series and ${totalPoints} data points`;
@@ -9484,7 +9488,7 @@ var ScatterChart = ({
 };
 
 // src/charts/components/ResponsiveContainer.tsx
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var ResponsiveContainer = ({
   width = "100%",
@@ -9499,13 +9503,13 @@ var ResponsiveContainer = ({
   children,
   onResize
 }) => {
-  const containerRef = (0, import_react37.useRef)(null);
-  const [dimensions, setDimensions] = (0, import_react37.useState)({
+  const containerRef = (0, import_react38.useRef)(null);
+  const [dimensions, setDimensions] = (0, import_react38.useState)({
     width: 0,
     height: 0
   });
-  const debounceTimerRef = (0, import_react37.useRef)(null);
-  const calculateDimensions = (0, import_react37.useCallback)((containerWidth, containerHeight) => {
+  const debounceTimerRef = (0, import_react38.useRef)(null);
+  const calculateDimensions = (0, import_react38.useCallback)((containerWidth, containerHeight) => {
     let finalWidth = containerWidth;
     let finalHeight = containerHeight;
     if (aspect && !height) {
@@ -9521,7 +9525,7 @@ var ResponsiveContainer = ({
     }
     return { width: finalWidth, height: finalHeight };
   }, [aspect, height, minWidth, minHeight, maxWidth, maxHeight]);
-  const handleResize = (0, import_react37.useCallback)((entries) => {
+  const handleResize = (0, import_react38.useCallback)((entries) => {
     const entry = entries[0];
     if (!entry) return;
     const { width: containerWidth, height: containerHeight } = entry.contentRect;
@@ -9539,7 +9543,7 @@ var ResponsiveContainer = ({
       updateDimensions();
     }
   }, [calculateDimensions, debounce, onResize]);
-  (0, import_react37.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(handleResize);
@@ -9572,7 +9576,7 @@ var ResponsiveContainer = ({
       }
     );
   }
-  const chartElement = import_react37.default.cloneElement(
+  const chartElement = import_react38.default.cloneElement(
     children,
     {
       width: dimensions.width,
@@ -9591,7 +9595,7 @@ var ResponsiveContainer = ({
 };
 
 // src/components/Heatmap.tsx
-var import_react38 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var COLOR_SCALES = {
   blue: {
@@ -9635,9 +9639,9 @@ var Heatmap = ({
   formatValue = (v) => v.toFixed(0),
   formatTooltip
 }) => {
-  const [hoveredCell, setHoveredCell] = (0, import_react38.useState)(null);
-  const [isDarkMode, setIsDarkMode] = (0, import_react38.useState)(false);
-  import_react38.default.useEffect(() => {
+  const [hoveredCell, setHoveredCell] = (0, import_react39.useState)(null);
+  const [isDarkMode, setIsDarkMode] = (0, import_react39.useState)(false);
+  import_react39.default.useEffect(() => {
     const checkDarkMode = () => {
       setIsDarkMode(document.documentElement.classList.contains("dark"));
     };
@@ -9646,7 +9650,7 @@ var Heatmap = ({
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
     return () => observer.disconnect();
   }, []);
-  const { uniqueX, uniqueY, dataMap, minValue, maxValue } = (0, import_react38.useMemo)(() => {
+  const { uniqueX, uniqueY, dataMap, minValue, maxValue } = (0, import_react39.useMemo)(() => {
     const xSet = /* @__PURE__ */ new Set();
     const ySet = /* @__PURE__ */ new Set();
     const map = /* @__PURE__ */ new Map();
@@ -9818,9 +9822,9 @@ var CalendarHeatmap = ({
   onCellClick,
   formatTooltip
 }) => {
-  const [hoveredCell, setHoveredCell] = (0, import_react38.useState)(null);
-  const [isDarkMode, setIsDarkMode] = (0, import_react38.useState)(false);
-  import_react38.default.useEffect(() => {
+  const [hoveredCell, setHoveredCell] = (0, import_react39.useState)(null);
+  const [isDarkMode, setIsDarkMode] = (0, import_react39.useState)(false);
+  import_react39.default.useEffect(() => {
     const checkDarkMode = () => {
       setIsDarkMode(document.documentElement.classList.contains("dark"));
     };
@@ -9829,7 +9833,7 @@ var CalendarHeatmap = ({
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
     return () => observer.disconnect();
   }, []);
-  const { weeks, minValue, maxValue, dataMap, monthLabels } = (0, import_react38.useMemo)(() => {
+  const { weeks, minValue, maxValue, dataMap, monthLabels } = (0, import_react39.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     let min = Infinity;
     let max = -Infinity;