@marcoschwartz/lite-ui 0.26.3 → 0.27.0

package/dist/index.mjs

@@ -3511,8 +3511,244 @@ var Radio = ({
   }) });
 };
 
-// src/components/ProgressBar.tsx
+// src/components/SegmentedControl.tsx
+import { useState as useState12, useRef as useRef6, useEffect as useEffect9, useId, useCallback as useCallback2 } from "react";
 import { jsx as jsx99, jsxs as jsxs27 } from "react/jsx-runtime";
+function normalizeData(data) {
+  return data.map(
+    (item) => typeof item === "string" ? { value: item, label: item } : item
+  );
+}
+var sizeConfig = {
+  xs: {
+    padding: "px-2 py-0.5",
+    text: "text-xs",
+    height: "h-6",
+    minWidth: "min-w-[2rem]"
+  },
+  sm: {
+    padding: "px-2.5 py-1",
+    text: "text-sm",
+    height: "h-8",
+    minWidth: "min-w-[2.5rem]"
+  },
+  md: {
+    padding: "px-3 py-1.5",
+    text: "text-sm",
+    height: "h-9",
+    minWidth: "min-w-[3rem]"
+  },
+  lg: {
+    padding: "px-4 py-2",
+    text: "text-base",
+    height: "h-11",
+    minWidth: "min-w-[3.5rem]"
+  }
+};
+var radiusConfig = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full"
+};
+var colorConfig = {
+  primary: "bg-[hsl(var(--primary))]",
+  secondary: "bg-[hsl(var(--secondary))]",
+  neutral: "bg-[hsl(var(--muted))]"
+};
+var activeTextConfig = {
+  primary: "text-[hsl(var(--primary-foreground))]",
+  secondary: "text-[hsl(var(--secondary-foreground))]",
+  neutral: "text-[hsl(var(--foreground))]"
+};
+var SegmentedControl = ({
+  data,
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  size = "md",
+  radius = "md",
+  color = "primary",
+  fullWidth = false,
+  disabled = false,
+  orientation = "horizontal",
+  className = "",
+  transitionDuration = 200,
+  name,
+  ariaLabel
+}) => {
+  const groupId = useId();
+  const groupName = name || `segmented-control-${groupId}`;
+  const containerRef = useRef6(null);
+  const [indicatorStyle, setIndicatorStyle] = useState12({});
+  const options = normalizeData(data);
+  const [internalValue, setInternalValue] = useState12(
+    defaultValue || options[0]?.value || ""
+  );
+  const isControlled = controlledValue !== void 0;
+  const currentValue = isControlled ? controlledValue : internalValue;
+  const handleChange = useCallback2((newValue) => {
+    if (disabled) return;
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onChange?.(newValue);
+  }, [disabled, isControlled, onChange]);
+  const updateIndicator = useCallback2(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const activeIndex = options.findIndex((opt) => opt.value === currentValue);
+    if (activeIndex === -1) return;
+    const buttons = container.querySelectorAll("[data-segment-button]");
+    const activeButton = buttons[activeIndex];
+    if (!activeButton) return;
+    const containerRect = container.getBoundingClientRect();
+    const buttonRect = activeButton.getBoundingClientRect();
+    if (orientation === "horizontal") {
+      setIndicatorStyle({
+        width: buttonRect.width,
+        height: "100%",
+        transform: `translateX(${buttonRect.left - containerRect.left}px)`,
+        transition: `transform ${transitionDuration}ms ease, width ${transitionDuration}ms ease`
+      });
+    } else {
+      setIndicatorStyle({
+        width: "100%",
+        height: buttonRect.height,
+        transform: `translateY(${buttonRect.top - containerRect.top}px)`,
+        transition: `transform ${transitionDuration}ms ease, height ${transitionDuration}ms ease`
+      });
+    }
+  }, [currentValue, options, orientation, transitionDuration]);
+  useEffect9(() => {
+    updateIndicator();
+    const handleResize = () => updateIndicator();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [updateIndicator]);
+  const handleKeyDown = useCallback2((e, index) => {
+    const enabledOptions = options.filter((opt) => !opt.disabled);
+    const currentEnabledIndex = enabledOptions.findIndex((opt) => opt.value === currentValue);
+    let nextIndex = -1;
+    if (orientation === "horizontal") {
+      if (e.key === "ArrowRight") {
+        nextIndex = (currentEnabledIndex + 1) % enabledOptions.length;
+      } else if (e.key === "ArrowLeft") {
+        nextIndex = (currentEnabledIndex - 1 + enabledOptions.length) % enabledOptions.length;
+      }
+    } else {
+      if (e.key === "ArrowDown") {
+        nextIndex = (currentEnabledIndex + 1) % enabledOptions.length;
+      } else if (e.key === "ArrowUp") {
+        nextIndex = (currentEnabledIndex - 1 + enabledOptions.length) % enabledOptions.length;
+      }
+    }
+    if (e.key === "Home") {
+      nextIndex = 0;
+    } else if (e.key === "End") {
+      nextIndex = enabledOptions.length - 1;
+    }
+    if (nextIndex !== -1) {
+      e.preventDefault();
+      const nextOption = enabledOptions[nextIndex];
+      handleChange(nextOption.value);
+      const buttons = containerRef.current?.querySelectorAll("[data-segment-button]");
+      const nextButton = Array.from(buttons || []).find(
+        (btn) => btn.getAttribute("data-value") === nextOption.value
+      );
+      nextButton?.focus();
+    }
+  }, [options, currentValue, orientation, handleChange]);
+  const sizeStyles2 = sizeConfig[size];
+  const radiusStyle = radiusConfig[radius];
+  const containerClasses = [
+    "relative inline-flex p-1",
+    "bg-[hsl(var(--muted))]",
+    radiusStyle,
+    orientation === "vertical" ? "flex-col" : "flex-row",
+    fullWidth ? "w-full" : "",
+    disabled ? "opacity-50 cursor-not-allowed" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs27(
+    "div",
+    {
+      ref: containerRef,
+      role: "radiogroup",
+      "aria-label": ariaLabel || "Segmented control",
+      className: containerClasses,
+      children: [
+        /* @__PURE__ */ jsx99(
+          "div",
+          {
+            className: [
+              "absolute top-1 left-1 z-0",
+              radiusStyle,
+              colorConfig[color],
+              "shadow-sm"
+            ].join(" "),
+            style: indicatorStyle,
+            "aria-hidden": "true"
+          }
+        ),
+        options.map((option, index) => {
+          const isActive = option.value === currentValue;
+          const isDisabled = disabled || option.disabled;
+          const buttonClasses = [
+            "relative z-10 flex items-center justify-center",
+            "font-medium select-none",
+            "transition-colors duration-150",
+            sizeStyles2.padding,
+            sizeStyles2.text,
+            sizeStyles2.minWidth,
+            radiusStyle,
+            fullWidth ? "flex-1" : "",
+            isActive ? activeTextConfig[color] : "text-[hsl(var(--muted-foreground))]",
+            isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:text-[hsl(var(--foreground))]",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-1"
+          ].filter(Boolean).join(" ");
+          return /* @__PURE__ */ jsxs27(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": isActive,
+              "data-segment-button": true,
+              "data-value": option.value,
+              disabled: isDisabled,
+              tabIndex: isActive ? 0 : -1,
+              className: buttonClasses,
+              onClick: () => !isDisabled && handleChange(option.value),
+              onKeyDown: (e) => handleKeyDown(e, index),
+              children: [
+                option.label,
+                /* @__PURE__ */ jsx99(
+                  "input",
+                  {
+                    type: "radio",
+                    name: groupName,
+                    value: option.value,
+                    checked: isActive,
+                    disabled: isDisabled,
+                    onChange: () => {
+                    },
+                    className: "sr-only",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            },
+            option.value
+          );
+        })
+      ]
+    }
+  );
+};
+
+// src/components/ProgressBar.tsx
+import { jsx as jsx100, jsxs as jsxs28 } from "react/jsx-runtime";
 var ProgressBar = ({
   value,
   max = 100,
@@ -3534,15 +3770,15 @@ var ProgressBar = ({
     warning: "bg-[hsl(var(--warning))]",
     danger: "bg-[hsl(var(--destructive))]"
   };
-  return /* @__PURE__ */ jsxs27("div", { className: `w-full ${className}`, children: [
-    (showLabel || label) && /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center mb-1", children: [
-      label && /* @__PURE__ */ jsx99("span", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
-      showLabel && /* @__PURE__ */ jsxs27("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
+  return /* @__PURE__ */ jsxs28("div", { className: `w-full ${className}`, children: [
+    (showLabel || label) && /* @__PURE__ */ jsxs28("div", { className: "flex justify-between items-center mb-1", children: [
+      label && /* @__PURE__ */ jsx100("span", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
+      showLabel && /* @__PURE__ */ jsxs28("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
         Math.round(percentage),
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ jsx99(
+    /* @__PURE__ */ jsx100(
       "div",
       {
         className: `w-full bg-[hsl(var(--muted))] rounded-full overflow-hidden ${sizeClasses7[size]}`,
@@ -3550,7 +3786,7 @@ var ProgressBar = ({
         "aria-valuenow": value,
         "aria-valuemin": 0,
         "aria-valuemax": max,
-        children: /* @__PURE__ */ jsx99(
+        children: /* @__PURE__ */ jsx100(
           "div",
           {
             className: `${sizeClasses7[size]} ${variantClasses[variant]} rounded-full transition-all duration-300 ease-out`,
@@ -3563,8 +3799,8 @@ var ProgressBar = ({
 };
 
 // src/components/Slider.tsx
-import React20, { useRef as useRef6 } from "react";
-import { jsx as jsx100, jsxs as jsxs28 } from "react/jsx-runtime";
+import React21, { useRef as useRef7 } from "react";
+import { jsx as jsx101, jsxs as jsxs29 } from "react/jsx-runtime";
 var Slider = ({
   value: controlledValue,
   defaultValue = 50,
@@ -3581,10 +3817,10 @@ var Slider = ({
   defaultRangeValue = [25, 75],
   onRangeChange
 }) => {
-  const [internalValue, setInternalValue] = React20.useState(defaultValue);
-  const [internalRangeValue, setInternalRangeValue] = React20.useState(defaultRangeValue);
-  const trackRef = useRef6(null);
-  const [isDragging, setIsDragging] = React20.useState(null);
+  const [internalValue, setInternalValue] = React21.useState(defaultValue);
+  const [internalRangeValue, setInternalRangeValue] = React21.useState(defaultRangeValue);
+  const trackRef = useRef7(null);
+  const [isDragging, setIsDragging] = React21.useState(null);
   const value = controlledValue !== void 0 ? controlledValue : internalValue;
   const rangeValue = controlledRangeValue !== void 0 ? controlledRangeValue : internalRangeValue;
   const handleChange = (e) => {
@@ -3632,7 +3868,7 @@ var Slider = ({
   const handleRangeEnd = () => {
     setIsDragging(null);
   };
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (isDragging) {
       document.addEventListener("mousemove", handleRangeMouseMove);
       document.addEventListener("mouseup", handleRangeEnd);
@@ -3650,18 +3886,18 @@ var Slider = ({
   const minPercentage = (rangeValue[0] - min) / (max - min) * 100;
   const maxPercentage = (rangeValue[1] - min) / (max - min) * 100;
   if (range) {
-    return /* @__PURE__ */ jsxs28("div", { className: `w-full ${className}`, children: [
-      (label || showValue) && /* @__PURE__ */ jsxs28("div", { className: "flex justify-between items-center mb-2", children: [
-        label && /* @__PURE__ */ jsx100("label", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
-        showValue && /* @__PURE__ */ jsxs28("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
+    return /* @__PURE__ */ jsxs29("div", { className: `w-full ${className}`, children: [
+      (label || showValue) && /* @__PURE__ */ jsxs29("div", { className: "flex justify-between items-center mb-2", children: [
+        label && /* @__PURE__ */ jsx101("label", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
+        showValue && /* @__PURE__ */ jsxs29("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
           rangeValue[0],
           " - ",
           rangeValue[1]
         ] })
       ] }),
-      /* @__PURE__ */ jsxs28("div", { className: "relative h-10 flex items-center", ref: trackRef, children: [
-        /* @__PURE__ */ jsx100("div", { className: "absolute w-full h-2 bg-[hsl(var(--muted))] rounded-full" }),
-        /* @__PURE__ */ jsx100(
+      /* @__PURE__ */ jsxs29("div", { className: "relative h-10 flex items-center", ref: trackRef, children: [
+        /* @__PURE__ */ jsx101("div", { className: "absolute w-full h-2 bg-[hsl(var(--muted))] rounded-full" }),
+        /* @__PURE__ */ jsx101(
           "div",
           {
             className: "absolute h-2 bg-[hsl(var(--primary))] rounded-full pointer-events-none",
@@ -3671,7 +3907,7 @@ var Slider = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx100(
+        /* @__PURE__ */ jsx101(
           "div",
           {
             className: `absolute w-4 h-4 -ml-2 rounded-full bg-[hsl(var(--background))] border-2 border-[hsl(var(--primary))] shadow-md cursor-pointer z-10
@@ -3688,7 +3924,7 @@ var Slider = ({
             tabIndex: disabled ? -1 : 0
           }
         ),
-        /* @__PURE__ */ jsx100(
+        /* @__PURE__ */ jsx101(
           "div",
           {
             className: `absolute w-4 h-4 -ml-2 rounded-full bg-[hsl(var(--background))] border-2 border-[hsl(var(--primary))] shadow-md cursor-pointer z-10
@@ -3708,21 +3944,21 @@ var Slider = ({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs28("div", { className: `w-full ${className}`, children: [
-    (label || showValue) && /* @__PURE__ */ jsxs28("div", { className: "flex justify-between items-center mb-2", children: [
-      label && /* @__PURE__ */ jsx100("label", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
-      showValue && /* @__PURE__ */ jsx100("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: value })
+  return /* @__PURE__ */ jsxs29("div", { className: `w-full ${className}`, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs29("div", { className: "flex justify-between items-center mb-2", children: [
+      label && /* @__PURE__ */ jsx101("label", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: label }),
+      showValue && /* @__PURE__ */ jsx101("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: value })
     ] }),
-    /* @__PURE__ */ jsxs28("div", { className: "relative h-10 flex items-center", children: [
-      /* @__PURE__ */ jsx100("div", { className: "absolute w-full h-2 bg-[hsl(var(--muted))] rounded-full" }),
-      /* @__PURE__ */ jsx100(
+    /* @__PURE__ */ jsxs29("div", { className: "relative h-10 flex items-center", children: [
+      /* @__PURE__ */ jsx101("div", { className: "absolute w-full h-2 bg-[hsl(var(--muted))] rounded-full" }),
+      /* @__PURE__ */ jsx101(
         "div",
         {
           className: "absolute h-2 bg-[hsl(var(--primary))] rounded-full pointer-events-none",
           style: { width: `${percentage}%` }
         }
       ),
-      /* @__PURE__ */ jsx100(
+      /* @__PURE__ */ jsx101(
         "div",
         {
           className: `absolute w-4 h-4 -ml-2 rounded-full bg-[hsl(var(--background))] border-2 border-[hsl(var(--primary))] shadow-md pointer-events-none z-10
@@ -3731,7 +3967,7 @@ var Slider = ({
           style: { left: `${percentage}%` }
         }
       ),
-      /* @__PURE__ */ jsx100(
+      /* @__PURE__ */ jsx101(
         "input",
         {
           type: "range",
@@ -3753,8 +3989,8 @@ var Slider = ({
 };
 
 // src/components/Avatar.tsx
-import React21 from "react";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import React22 from "react";
+import { jsx as jsx102 } from "react/jsx-runtime";
 var Avatar = ({
   src,
   alt,
@@ -3764,7 +4000,7 @@ var Avatar = ({
   className = "",
   fallbackColor = "bg-[hsl(var(--primary))]"
 }) => {
-  const [imageError, setImageError] = React21.useState(false);
+  const [imageError, setImageError] = React22.useState(false);
   const sizeClasses7 = {
     xs: "w-6 h-6 text-xs",
     sm: "w-8 h-8 text-sm",
@@ -3782,11 +4018,11 @@ var Avatar = ({
   };
   const showImage = src && !imageError;
   const showInitials = !showImage && name;
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx102(
     "div",
     {
       className: `${sizeClasses7[size]} ${shapeClass} flex items-center justify-center overflow-hidden ${showImage ? "bg-[hsl(var(--muted))]" : `${fallbackColor} text-white`} ${className}`,
-      children: showImage ? /* @__PURE__ */ jsx101(
+      children: showImage ? /* @__PURE__ */ jsx102(
         "img",
         {
           src,
@@ -3794,13 +4030,13 @@ var Avatar = ({
           className: "w-full h-full object-cover",
           onError: () => setImageError(true)
         }
-      ) : showInitials ? /* @__PURE__ */ jsx101("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ jsx101(
+      ) : showInitials ? /* @__PURE__ */ jsx102("span", { className: "font-semibold select-none", children: getInitials(name) }) : /* @__PURE__ */ jsx102(
         "svg",
         {
           className: "w-full h-full text-[hsl(var(--muted-foreground))]",
           fill: "currentColor",
           viewBox: "0 0 24 24",
-          children: /* @__PURE__ */ jsx101("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
+          children: /* @__PURE__ */ jsx102("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })
         }
       )
     }
@@ -3808,7 +4044,7 @@ var Avatar = ({
 };
 
 // src/components/Textarea.tsx
-import { jsx as jsx102, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs30 } from "react/jsx-runtime";
 var Textarea = ({
   label,
   error,
@@ -3835,9 +4071,9 @@ var Textarea = ({
     bg-transparent text-[hsl(var(--foreground))]
     placeholder:text-[hsl(var(--muted-foreground))]
     disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-[hsl(var(--muted))]`;
-  return /* @__PURE__ */ jsxs29("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ jsx102("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
-    /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsxs30("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx103("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-1.5", children: label }),
+    /* @__PURE__ */ jsx103(
       "textarea",
       {
         className: `${baseClasses} ${sizeClasses7[size]} ${resizeClasses[resize]}`,
@@ -3845,14 +4081,14 @@ var Textarea = ({
         ...props
       }
     ),
-    error && /* @__PURE__ */ jsx102("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
-    helperText && !error && /* @__PURE__ */ jsx102("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
+    error && /* @__PURE__ */ jsx103("p", { className: "mt-1.5 text-sm text-[hsl(var(--destructive))]", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx103("p", { className: "mt-1.5 text-sm text-[hsl(var(--muted-foreground))]", children: helperText })
   ] });
 };
 
 // src/components/RichTextEditor.tsx
-import { useRef as useRef7, useCallback as useCallback2, useState as useState13, useEffect as useEffect9, useLayoutEffect } from "react";
-import { jsx as jsx103, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useRef as useRef8, useCallback as useCallback3, useState as useState14, useEffect as useEffect10, useLayoutEffect } from "react";
+import { jsx as jsx104, jsxs as jsxs31 } from "react/jsx-runtime";
 var RichTextEditor = ({
   value = "",
   onChange,
@@ -3866,15 +4102,15 @@ var RichTextEditor = ({
   helperText
 }) => {
   const { themeName } = useTheme();
-  const editorRef = useRef7(null);
-  const [isFocused, setIsFocused] = useState13(false);
-  const [activeFormats, setActiveFormats] = useState13(/* @__PURE__ */ new Set());
-  const [showLinkModal, setShowLinkModal] = useState13(false);
-  const [linkUrl, setLinkUrl] = useState13("");
-  const [showImageModal, setShowImageModal] = useState13(false);
-  const [imageUrl, setImageUrl] = useState13("");
-  const [imageAlt, setImageAlt] = useState13("");
-  const savedSelection = useRef7(null);
+  const editorRef = useRef8(null);
+  const [isFocused, setIsFocused] = useState14(false);
+  const [activeFormats, setActiveFormats] = useState14(/* @__PURE__ */ new Set());
+  const [showLinkModal, setShowLinkModal] = useState14(false);
+  const [linkUrl, setLinkUrl] = useState14("");
+  const [showImageModal, setShowImageModal] = useState14(false);
+  const [imageUrl, setImageUrl] = useState14("");
+  const [imageAlt, setImageAlt] = useState14("");
+  const savedSelection = useRef8(null);
   useLayoutEffect(() => {
     const styleId = "rich-text-editor-styles";
     if (!document.getElementById(styleId)) {
@@ -3937,9 +4173,9 @@ var RichTextEditor = ({
       document.head.appendChild(style);
     }
   }, []);
-  const isInitialRender = useRef7(true);
-  const isInternalUpdate = useRef7(false);
-  useEffect9(() => {
+  const isInitialRender = useRef8(true);
+  const isInternalUpdate = useRef8(false);
+  useEffect10(() => {
     if (isInitialRender.current && editorRef.current) {
       editorRef.current.innerHTML = value;
       isInitialRender.current = false;
@@ -3950,7 +4186,7 @@ var RichTextEditor = ({
       }
     }
   }, []);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!isInitialRender.current && !isInternalUpdate.current && editorRef.current) {
       const currentHtml = editorRef.current.innerHTML;
       if (currentHtml !== value) {
@@ -3993,7 +4229,7 @@ var RichTextEditor = ({
     }
     isInternalUpdate.current = false;
   }, [value]);
-  const updateActiveFormats = useCallback2(() => {
+  const updateActiveFormats = useCallback3(() => {
     const formats = /* @__PURE__ */ new Set();
     if (document.queryCommandState("bold")) formats.add("bold");
     if (document.queryCommandState("italic")) formats.add("italic");
@@ -4010,14 +4246,14 @@ var RichTextEditor = ({
     }
     setActiveFormats(formats);
   }, []);
-  const handleInput = useCallback2(() => {
+  const handleInput = useCallback3(() => {
     if (editorRef.current && onChange) {
       isInternalUpdate.current = true;
       onChange(editorRef.current.innerHTML);
     }
     updateActiveFormats();
   }, [onChange, updateActiveFormats]);
-  const handleFocus = useCallback2(() => {
+  const handleFocus = useCallback3(() => {
     setIsFocused(true);
     if (editorRef.current && (!editorRef.current.innerHTML || editorRef.current.innerHTML === "")) {
       editorRef.current.innerHTML = "<p><br></p>";
@@ -4031,28 +4267,28 @@ var RichTextEditor = ({
       }
     }
   }, []);
-  const handleFormat = useCallback2((command) => {
+  const handleFormat = useCallback3((command) => {
     if (disabled) return;
     document.execCommand(command, false);
     editorRef.current?.focus();
     updateActiveFormats();
     handleInput();
   }, [disabled, updateActiveFormats, handleInput]);
-  const handleList = useCallback2((command) => {
+  const handleList = useCallback3((command) => {
     if (disabled) return;
     document.execCommand(command, false);
     editorRef.current?.focus();
     updateActiveFormats();
     handleInput();
   }, [disabled, updateActiveFormats, handleInput]);
-  const handleHeading = useCallback2((level) => {
+  const handleHeading = useCallback3((level) => {
     if (disabled) return;
     document.execCommand("formatBlock", false, level);
     editorRef.current?.focus();
     updateActiveFormats();
     handleInput();
   }, [disabled, updateActiveFormats, handleInput]);
-  const handleLink = useCallback2(() => {
+  const handleLink = useCallback3(() => {
     if (disabled) return;
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
@@ -4060,7 +4296,7 @@ var RichTextEditor = ({
     }
     setShowLinkModal(true);
   }, [disabled]);
-  const insertLink = useCallback2(() => {
+  const insertLink = useCallback3(() => {
     if (!linkUrl || !editorRef.current) return;
     const selection = window.getSelection();
     if (savedSelection.current && selection) {
@@ -4078,7 +4314,7 @@ var RichTextEditor = ({
     editorRef.current?.focus();
     handleInput();
   }, [linkUrl, handleInput]);
-  const handleCode = useCallback2(() => {
+  const handleCode = useCallback3(() => {
     if (disabled) return;
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
@@ -4094,7 +4330,7 @@ var RichTextEditor = ({
     }
     editorRef.current?.focus();
   }, [disabled, handleInput]);
-  const handleImage = useCallback2(() => {
+  const handleImage = useCallback3(() => {
     if (disabled) return;
     const selection = window.getSelection();
     if (selection && selection.rangeCount > 0) {
@@ -4102,7 +4338,7 @@ var RichTextEditor = ({
     }
     setShowImageModal(true);
   }, [disabled]);
-  const insertImage = useCallback2(() => {
+  const insertImage = useCallback3(() => {
     if (!imageUrl || !editorRef.current) return;
     editorRef.current.focus();
     const img = document.createElement("img");
@@ -4182,11 +4418,11 @@ var RichTextEditor = ({
   const editorBaseClass = themeName === "minimalistic" ? "bg-transparent border-2 border-white text-white placeholder:text-[hsl(var(--muted-foreground))]" : "bg-[hsl(var(--card))] border border-[hsl(var(--input))] text-[hsl(var(--foreground))]";
   const focusClass = isFocused && !disabled ? themeName === "minimalistic" ? "border-white" : "border-[hsl(var(--primary))] ring-1 ring-[hsl(var(--ring))]/50" : "";
   const errorClass = error ? "border-red-500 dark:border-red-400" : "";
-  return /* @__PURE__ */ jsxs30("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ jsx103("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-2", children: label }),
-    /* @__PURE__ */ jsxs30("div", { className: `rounded-t-lg border-b ${editorBaseClass} p-2 flex flex-wrap gap-1`, children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsxs31("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx104("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-2", children: label }),
+    /* @__PURE__ */ jsxs31("div", { className: `rounded-t-lg border-b ${editorBaseClass} p-2 flex flex-wrap gap-1`, children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4194,10 +4430,10 @@ var RichTextEditor = ({
             className: getButtonClass(activeFormats.has("bold")),
             disabled,
             title: "Bold (Ctrl+B)",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("path", { d: "M12.78 4c1.09 0 2.04.38 2.84 1.14.8.76 1.2 1.74 1.2 2.94 0 .9-.25 1.68-.76 2.36-.51.68-1.2 1.14-2.04 1.38v.08c1.06.22 1.89.7 2.48 1.44.59.74.88 1.64.88 2.7 0 1.34-.47 2.43-1.41 3.27C14.96 19.77 13.74 20 12.24 20H4V4h8.78zm-.66 7.14c.62 0 1.12-.18 1.5-.54.38-.36.57-.84.57-1.44 0-.6-.19-1.08-.57-1.44-.38-.36-.88-.54-1.5-.54H7.5v3.96h4.62zm.24 6.86c.68 0 1.24-.19 1.68-.57.44-.38.66-.9.66-1.56 0-.66-.22-1.18-.66-1.56-.44-.38-1-.57-1.68-.57H7.5v4.26h4.86z" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("path", { d: "M12.78 4c1.09 0 2.04.38 2.84 1.14.8.76 1.2 1.74 1.2 2.94 0 .9-.25 1.68-.76 2.36-.51.68-1.2 1.14-2.04 1.38v.08c1.06.22 1.89.7 2.48 1.44.59.74.88 1.64.88 2.7 0 1.34-.47 2.43-1.41 3.27C14.96 19.77 13.74 20 12.24 20H4V4h8.78zm-.66 7.14c.62 0 1.12-.18 1.5-.54.38-.36.57-.84.57-1.44 0-.6-.19-1.08-.57-1.44-.38-.36-.88-.54-1.5-.54H7.5v3.96h4.62zm.24 6.86c.68 0 1.24-.19 1.68-.57.44-.38.66-.9.66-1.56 0-.66-.22-1.18-.66-1.56-.44-.38-1-.57-1.68-.57H7.5v4.26h4.86z" }) })
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4205,10 +4441,10 @@ var RichTextEditor = ({
             className: getButtonClass(activeFormats.has("italic")),
             disabled,
             title: "Italic (Ctrl+I)",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("path", { d: "M11.59 4H16v2h-1.71l-3.58 8H13v2H8v-2h1.71l3.58-8H11.59V4z" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("path", { d: "M11.59 4H16v2h-1.71l-3.58 8H13v2H8v-2h1.71l3.58-8H11.59V4z" }) })
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4216,10 +4452,10 @@ var RichTextEditor = ({
             className: getButtonClass(activeFormats.has("underline")),
             disabled,
             title: "Underline (Ctrl+U)",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("path", { d: "M10 16c-2.21 0-4-1.79-4-4V4h2v8c0 1.1.9 2 2 2s2-.9 2-2V4h2v8c0 2.21-1.79 4-4 4zM4 18h12v2H4v-2z" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("path", { d: "M10 16c-2.21 0-4-1.79-4-4V4h2v8c0 1.1.9 2 2 2s2-.9 2-2V4h2v8c0 2.21-1.79 4-4 4zM4 18h12v2H4v-2z" }) })
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4227,13 +4463,13 @@ var RichTextEditor = ({
             className: getButtonClass(activeFormats.has("strikeThrough")),
             disabled,
             title: "Strikethrough",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("path", { d: "M10 4c-2 0-3.5.5-4.5 1.5S4 7.5 4 9h2c0-.7.2-1.2.6-1.6.4-.4 1-.6 1.9-.6.8 0 1.4.2 1.8.5.4.3.7.8.7 1.4 0 .5-.2.9-.5 1.2-.3.3-.9.6-1.8.9l-.7.2c-1.2.3-2.1.7-2.7 1.2C4.2 12.7 4 13.5 4 14.5c0 1.1.4 2 1.1 2.6.7.6 1.7.9 3 .9 2.1 0 3.6-.5 4.6-1.5.9-1 1.3-2.3 1.3-3.8h-2c0 .9-.2 1.6-.7 2.1-.5.5-1.2.7-2.2.7-.8 0-1.4-.2-1.8-.5-.4-.3-.6-.8-.6-1.4 0-.5.2-.9.5-1.2.3-.3.9-.6 1.8-.9l.7-.2c1.2-.3 2.1-.7 2.7-1.2.6-.5.9-1.3.9-2.3 0-1.2-.4-2.1-1.2-2.8-.8-.7-1.9-1-3.3-1zM2 10h16v1H2v-1z" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("path", { d: "M10 4c-2 0-3.5.5-4.5 1.5S4 7.5 4 9h2c0-.7.2-1.2.6-1.6.4-.4 1-.6 1.9-.6.8 0 1.4.2 1.8.5.4.3.7.8.7 1.4 0 .5-.2.9-.5 1.2-.3.3-.9.6-1.8.9l-.7.2c-1.2.3-2.1.7-2.7 1.2C4.2 12.7 4 13.5 4 14.5c0 1.1.4 2 1.1 2.6.7.6 1.7.9 3 .9 2.1 0 3.6-.5 4.6-1.5.9-1 1.3-2.3 1.3-3.8h-2c0 .9-.2 1.6-.7 2.1-.5.5-1.2.7-2.2.7-.8 0-1.4-.2-1.8-.5-.4-.3-.6-.8-.6-1.4 0-.5.2-.9.5-1.2.3-.3.9-.6 1.8-.9l.7-.2c1.2-.3 2.1-.7 2.7-1.2.6-.5.9-1.3.9-2.3 0-1.2-.4-2.1-1.2-2.8-.8-.7-1.9-1-3.3-1zM2 10h16v1H2v-1z" }) })
           }
         )
       ] }),
-      /* @__PURE__ */ jsx103("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx103(
+      /* @__PURE__ */ jsx104("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
+      /* @__PURE__ */ jsxs31("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4241,10 +4477,10 @@ var RichTextEditor = ({
             className: getButtonClass(activeFormats.has("h1")),
             disabled,
             title: "Heading 1",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H1" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H1" }) })
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4252,10 +4488,10 @@ var RichTextEditor = ({
             className: getButtonClass(activeFormats.has("h2")),
             disabled,
             title: "Heading 2",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H2" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H2" }) })
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4263,13 +4499,13 @@ var RichTextEditor = ({
             className: getButtonClass(activeFormats.has("h3")),
             disabled,
             title: "Heading 3",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H3" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("text", { x: "2", y: "16", fontSize: "14", fontWeight: "bold", children: "H3" }) })
           }
         )
       ] }),
-      /* @__PURE__ */ jsx103("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx103(
+      /* @__PURE__ */ jsx104("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
+      /* @__PURE__ */ jsxs31("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4277,10 +4513,10 @@ var RichTextEditor = ({
             className: getButtonClass(activeFormats.has("ul")),
             disabled,
             title: "Bullet List",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("path", { d: "M4 4h2v2H4V4zm4 0h8v2H8V4zM4 8h2v2H4V8zm4 0h8v2H8V8zm-4 4h2v2H4v-2zm4 0h8v2H8v-2zm-4 4h2v2H4v-2zm4 0h8v2H8v-2z" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("path", { d: "M4 4h2v2H4V4zm4 0h8v2H8V4zM4 8h2v2H4V8zm4 0h8v2H8V8zm-4 4h2v2H4v-2zm4 0h8v2H8v-2zm-4 4h2v2H4v-2zm4 0h8v2H8v-2z" }) })
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4288,13 +4524,13 @@ var RichTextEditor = ({
             className: getButtonClass(activeFormats.has("ol")),
             disabled,
             title: "Numbered List",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx103("path", { d: "M4 4h1v3H4V4zm0 4h1v1H3V8h2v1H4zm1 2H3v1h2v1H3v1h2v-3zM8 4h8v2H8V4zm0 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h8v2H8v-2z" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("path", { d: "M4 4h1v3H4V4zm0 4h1v1H3V8h2v1H4zm1 2H3v1h2v1H3v1h2v-3zM8 4h8v2H8V4zm0 4h8v2H8V8zm0 4h8v2H8v-2zm0 4h8v2H8v-2z" }) })
           }
         )
       ] }),
-      /* @__PURE__ */ jsx103("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx103(
+      /* @__PURE__ */ jsx104("div", { className: "w-px bg-[hsl(var(--border))] mx-1" }),
+      /* @__PURE__ */ jsxs31("div", { className: "flex gap-1", children: [
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4302,10 +4538,10 @@ var RichTextEditor = ({
             className: getButtonClass(false),
             disabled,
             title: "Insert Link",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx103("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx104("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) })
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4313,10 +4549,10 @@ var RichTextEditor = ({
             className: getButtonClass(false),
             disabled,
             title: "Insert Image/Video",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx103("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx104("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
           }
         ),
-        /* @__PURE__ */ jsx103(
+        /* @__PURE__ */ jsx104(
           "button",
           {
             type: "button",
@@ -4324,12 +4560,12 @@ var RichTextEditor = ({
             className: getButtonClass(false),
             disabled,
             title: "Code",
-            children: /* @__PURE__ */ jsx103("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx103("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) })
+            children: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx104("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" }) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx103(
+    /* @__PURE__ */ jsx104(
       "div",
       {
         ref: editorRef,
@@ -4353,9 +4589,9 @@ var RichTextEditor = ({
         suppressContentEditableWarning: true
       }
     ),
-    error && /* @__PURE__ */ jsx103("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
-    helperText && !error && /* @__PURE__ */ jsx103("p", { className: "mt-1 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
-    /* @__PURE__ */ jsx103(
+    error && /* @__PURE__ */ jsx104("p", { className: "mt-1 text-sm text-red-600 dark:text-red-400", children: error }),
+    helperText && !error && /* @__PURE__ */ jsx104("p", { className: "mt-1 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
+    /* @__PURE__ */ jsx104(
       Modal,
       {
         isOpen: showLinkModal,
@@ -4365,8 +4601,8 @@ var RichTextEditor = ({
         },
         title: "Insert Link",
         size: "sm",
-        children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx103(
+        children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx104(
             TextInput,
             {
               label: "URL",
@@ -4382,8 +4618,8 @@ var RichTextEditor = ({
               }
             }
           ),
-          /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 justify-end", children: [
-            /* @__PURE__ */ jsx103(
+          /* @__PURE__ */ jsxs31("div", { className: "flex gap-2 justify-end", children: [
+            /* @__PURE__ */ jsx104(
               Button,
               {
                 variant: "secondary",
@@ -4394,7 +4630,7 @@ var RichTextEditor = ({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx103(
+            /* @__PURE__ */ jsx104(
               Button,
               {
                 variant: "primary",
@@ -4407,7 +4643,7 @@ var RichTextEditor = ({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx103(
+    /* @__PURE__ */ jsx104(
       Modal,
       {
         isOpen: showImageModal,
@@ -4418,8 +4654,8 @@ var RichTextEditor = ({
         },
         title: "Insert Image",
         size: "sm",
-        children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ jsx103(
+        children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
+          /* @__PURE__ */ jsx104(
             TextInput,
             {
               label: "Image URL",
@@ -4435,7 +4671,7 @@ var RichTextEditor = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx103(
+          /* @__PURE__ */ jsx104(
             TextInput,
             {
               label: "Alt Text (optional)",
@@ -4444,8 +4680,8 @@ var RichTextEditor = ({
               placeholder: "Describe the image"
             }
           ),
-          /* @__PURE__ */ jsxs30("div", { className: "flex gap-2 justify-end", children: [
-            /* @__PURE__ */ jsx103(
+          /* @__PURE__ */ jsxs31("div", { className: "flex gap-2 justify-end", children: [
+            /* @__PURE__ */ jsx104(
               Button,
               {
                 variant: "secondary",
@@ -4457,7 +4693,7 @@ var RichTextEditor = ({
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx103(
+            /* @__PURE__ */ jsx104(
               Button,
               {
                 variant: "primary",
@@ -4474,8 +4710,8 @@ var RichTextEditor = ({
 };
 
 // src/components/Toast.tsx
-import { createContext as createContext5, useContext as useContext5, useState as useState14, useCallback as useCallback3 } from "react";
-import { jsx as jsx104, jsxs as jsxs31 } from "react/jsx-runtime";
+import { createContext as createContext5, useContext as useContext5, useState as useState15, useCallback as useCallback4 } from "react";
+import { jsx as jsx105, jsxs as jsxs32 } from "react/jsx-runtime";
 var ToastContext = createContext5(void 0);
 var useToast = () => {
   const context = useContext5(ToastContext);
@@ -4485,8 +4721,8 @@ var useToast = () => {
   return context;
 };
 var ToastProvider = ({ children, position = "top-right" }) => {
-  const [toasts, setToasts] = useState14([]);
-  const addToast = useCallback3((toast2) => {
+  const [toasts, setToasts] = useState15([]);
+  const addToast = useCallback4((toast2) => {
     const id = Math.random().toString(36).substring(7);
     const newToast = { ...toast2, id };
     setToasts((prev) => [...prev, newToast]);
@@ -4495,7 +4731,7 @@ var ToastProvider = ({ children, position = "top-right" }) => {
       removeToast(id);
     }, duration);
   }, []);
-  const removeToast = useCallback3((id) => {
+  const removeToast = useCallback4((id) => {
     setToasts((prev) => prev.filter((toast2) => toast2.id !== id));
   }, []);
   const positionClasses2 = {
@@ -4506,9 +4742,9 @@ var ToastProvider = ({ children, position = "top-right" }) => {
     "top-center": "top-4 left-1/2 -translate-x-1/2",
     "bottom-center": "bottom-4 left-1/2 -translate-x-1/2"
   };
-  return /* @__PURE__ */ jsxs31(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+  return /* @__PURE__ */ jsxs32(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
     children,
-    /* @__PURE__ */ jsx104("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ jsx104(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) })
+    /* @__PURE__ */ jsx105("div", { className: `fixed ${positionClasses2[position]} z-50 flex flex-col gap-2 max-w-md`, children: toasts.map((toast2) => /* @__PURE__ */ jsx105(ToastItem, { toast: toast2, onClose: () => removeToast(toast2.id) }, toast2.id)) })
   ] });
 };
 var ToastItem = ({ toast: toast2, onClose }) => {
@@ -4519,27 +4755,27 @@ var ToastItem = ({ toast: toast2, onClose }) => {
     info: "bg-[hsl(var(--info))]/10 border-[hsl(var(--info))] text-[hsl(var(--info))]"
   };
   const typeIcons = {
-    success: /* @__PURE__ */ jsx104(CheckIcon, { size: "sm", className: "text-[hsl(var(--success))]" }),
-    error: /* @__PURE__ */ jsx104(CloseIcon, { size: "sm", className: "text-[hsl(var(--destructive))]" }),
-    warning: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4 text-[hsl(var(--warning))]", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
-    info: /* @__PURE__ */ jsx104("svg", { className: "w-4 h-4 text-[hsl(var(--info))]", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx104("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
+    success: /* @__PURE__ */ jsx105(CheckIcon, { size: "sm", className: "text-[hsl(var(--success))]" }),
+    error: /* @__PURE__ */ jsx105(CloseIcon, { size: "sm", className: "text-[hsl(var(--destructive))]" }),
+    warning: /* @__PURE__ */ jsx105("svg", { className: "w-4 h-4 text-[hsl(var(--warning))]", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx105("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+    info: /* @__PURE__ */ jsx105("svg", { className: "w-4 h-4 text-[hsl(var(--info))]", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx105("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) })
   };
   const type = toast2.type || "info";
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: `flex items-start gap-3 p-4 rounded-md border-l-4 shadow-lg bg-[hsl(var(--card))] ${typeStyles[type]} animate-slide-in`,
       role: "alert",
       children: [
-        /* @__PURE__ */ jsx104("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
-        /* @__PURE__ */ jsx104("p", { className: "flex-1 text-sm font-medium text-[hsl(var(--foreground))]", children: toast2.message }),
-        /* @__PURE__ */ jsx104(
+        /* @__PURE__ */ jsx105("div", { className: "flex-shrink-0 mt-0.5", children: typeIcons[type] }),
+        /* @__PURE__ */ jsx105("p", { className: "flex-1 text-sm font-medium text-[hsl(var(--foreground))]", children: toast2.message }),
+        /* @__PURE__ */ jsx105(
           "button",
           {
             onClick: onClose,
             className: "flex-shrink-0 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
             "aria-label": "Close",
-            children: /* @__PURE__ */ jsx104(CloseIcon, { size: "sm" })
+            children: /* @__PURE__ */ jsx105(CloseIcon, { size: "sm" })
           }
         )
       ]
@@ -4570,8 +4806,8 @@ var toast = {
 };
 
 // src/components/Stepper.tsx
-import React24 from "react";
-import { jsx as jsx105, jsxs as jsxs32 } from "react/jsx-runtime";
+import React25 from "react";
+import { jsx as jsx106, jsxs as jsxs33 } from "react/jsx-runtime";
 var Stepper = ({
   steps,
   currentStep,
@@ -4591,8 +4827,8 @@ var Stepper = ({
     return { mobile: mobileVisible, desktop: desktopVisible };
   };
   const shouldShowCounter = isHorizontal && steps.length > 3;
-  return /* @__PURE__ */ jsxs32("div", { className: `${isHorizontal ? "flex items-start w-full" : "flex flex-col"} ${className}`, children: [
-    shouldShowCounter && /* @__PURE__ */ jsx105("div", { className: "md:hidden flex items-center mr-4 flex-shrink-0", children: /* @__PURE__ */ jsxs32("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: `${isHorizontal ? "flex items-start w-full" : "flex flex-col"} ${className}`, children: [
+    shouldShowCounter && /* @__PURE__ */ jsx106("div", { className: "md:hidden flex items-center mr-4 flex-shrink-0", children: /* @__PURE__ */ jsxs33("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: [
       currentStep,
       "/",
       steps.length
@@ -4605,19 +4841,19 @@ 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__ */ jsxs32(React24.Fragment, { children: [
-        /* @__PURE__ */ jsxs32("div", { className: `
+      return /* @__PURE__ */ jsxs33(React25.Fragment, { children: [
+        /* @__PURE__ */ jsxs33("div", { className: `
               flex ${isHorizontal ? "flex-col items-center flex-shrink-0" : "flex-row items-start"}
               ${isHorizontal ? "" : isLast ? "" : "mb-6"}
               ${!visibility.mobile ? "hidden md:flex" : ""}
               ${!visibility.desktop && visibility.mobile ? "md:hidden" : ""}
             `, children: [
-          /* @__PURE__ */ jsxs32("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-col items-center flex-shrink-0"}`, children: [
-            /* @__PURE__ */ jsx105(
+          /* @__PURE__ */ jsxs33("div", { className: `flex ${isHorizontal ? "flex-col items-center" : "flex-col items-center flex-shrink-0"}`, children: [
+            /* @__PURE__ */ jsx106(
               "div",
               {
                 className: `flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${isCompleted ? "bg-[hsl(var(--primary))] border-[hsl(var(--primary))]" : isActive ? "border-[hsl(var(--primary))] bg-[hsl(var(--background))]" : "border-[hsl(var(--border))] bg-[hsl(var(--background))]"}`,
-                children: isCompleted ? /* @__PURE__ */ jsx105(CheckIcon, { size: "sm", className: "text-[hsl(var(--primary-foreground))]" }) : /* @__PURE__ */ jsx105(
+                children: isCompleted ? /* @__PURE__ */ jsx106(CheckIcon, { size: "sm", className: "text-[hsl(var(--primary-foreground))]" }) : /* @__PURE__ */ jsx106(
                   "span",
                   {
                     className: `text-sm font-semibold ${isActive ? "text-[hsl(var(--primary))]" : "text-[hsl(var(--muted-foreground))]"}`,
@@ -4626,29 +4862,29 @@ var Stepper = ({
                 )
               }
             ),
-            !isLast && !isHorizontal && /* @__PURE__ */ jsx105(
+            !isLast && !isHorizontal && /* @__PURE__ */ jsx106(
               "div",
               {
                 className: `w-0.5 flex-1 min-h-[24px] ${isCompleted ? "bg-[hsl(var(--primary))]" : "bg-[hsl(var(--border))]"}`
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs32("div", { className: `${isHorizontal ? "mt-3 text-center" : "ml-4 flex-1 min-h-[40px] flex flex-col justify-center"}`, children: [
-            /* @__PURE__ */ jsx105(
+          /* @__PURE__ */ jsxs33("div", { className: `${isHorizontal ? "mt-3 text-center" : "ml-4 flex-1 min-h-[40px] flex flex-col justify-center"}`, children: [
+            /* @__PURE__ */ jsx106(
               "p",
               {
                 className: `text-sm font-medium whitespace-nowrap ${isActive || isCompleted ? "text-[hsl(var(--foreground))]" : "text-[hsl(var(--muted-foreground))]"}`,
                 children: step.label
               }
             ),
-            step.description && /* @__PURE__ */ jsx105("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-1 whitespace-nowrap", children: step.description })
+            step.description && /* @__PURE__ */ jsx106("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-1 whitespace-nowrap", children: step.description })
           ] })
         ] }),
-        !isLast && isHorizontal && /* @__PURE__ */ jsx105("div", { className: `
+        !isLast && isHorizontal && /* @__PURE__ */ jsx106("div", { className: `
                 flex items-start pt-5 mx-4 min-w-[80px] max-w-[200px] flex-1
                 ${!visibility.mobile || isLastVisibleMobile ? "hidden md:flex" : ""}
                 ${!visibility.desktop && visibility.mobile ? "md:hidden" : ""}
-              `, children: /* @__PURE__ */ jsx105(
+              `, children: /* @__PURE__ */ jsx106(
           "div",
           {
             className: `h-0.5 w-full ${isCompleted ? "bg-[hsl(var(--primary))]" : "bg-[hsl(var(--border))]"}`
@@ -4660,7 +4896,7 @@ var Stepper = ({
 };
 
 // src/components/Divider.tsx
-import { jsx as jsx106, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs34 } from "react/jsx-runtime";
 var Divider = ({
   orientation = "horizontal",
   variant = "solid",
@@ -4679,14 +4915,14 @@ var Divider = ({
       center: "justify-center",
       right: "justify-end"
     };
-    return /* @__PURE__ */ jsxs33("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
-      labelPosition !== "left" && /* @__PURE__ */ jsx106("div", { className: `flex-1 border-t ${variantClasses[variant]} border-[hsl(var(--input))]` }),
-      /* @__PURE__ */ jsx106("span", { className: "px-4 text-sm text-[hsl(var(--muted-foreground))]", children: label }),
-      labelPosition !== "right" && /* @__PURE__ */ jsx106("div", { className: `flex-1 border-t ${variantClasses[variant]} border-[hsl(var(--input))]` })
+    return /* @__PURE__ */ jsxs34("div", { className: `flex items-center ${alignmentClasses[labelPosition]} ${className}`, role: "separator", children: [
+      labelPosition !== "left" && /* @__PURE__ */ jsx107("div", { className: `flex-1 border-t ${variantClasses[variant]} border-[hsl(var(--input))]` }),
+      /* @__PURE__ */ jsx107("span", { className: "px-4 text-sm text-[hsl(var(--muted-foreground))]", children: label }),
+      labelPosition !== "right" && /* @__PURE__ */ jsx107("div", { className: `flex-1 border-t ${variantClasses[variant]} border-[hsl(var(--input))]` })
     ] });
   }
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx106(
+    return /* @__PURE__ */ jsx107(
       "div",
       {
         className: `inline-block h-full border-l ${variantClasses[variant]} border-[hsl(var(--input))] ${className}`,
@@ -4695,7 +4931,7 @@ var Divider = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx107(
     "hr",
     {
       className: `border-t ${variantClasses[variant]} border-[hsl(var(--input))] ${className}`,
@@ -4705,8 +4941,8 @@ var Divider = ({
 };
 
 // src/components/FileUpload.tsx
-import { useRef as useRef8, useState as useState15 } from "react";
-import { jsx as jsx107, jsxs as jsxs34 } from "react/jsx-runtime";
+import { useRef as useRef9, useState as useState16 } from "react";
+import { jsx as jsx108, jsxs as jsxs35 } from "react/jsx-runtime";
 var FileUpload = ({
   accept,
   multiple = false,
@@ -4719,9 +4955,9 @@ var FileUpload = ({
   label,
   helperText
 }) => {
-  const [files, setFiles] = useState15([]);
-  const [isDragging, setIsDragging] = useState15(false);
-  const fileInputRef = useRef8(null);
+  const [files, setFiles] = useState16([]);
+  const [isDragging, setIsDragging] = useState16(false);
+  const fileInputRef = useRef9(null);
   const formatFileSize = (bytes) => {
     if (bytes === 0) return "0 Bytes";
     const k = 1024;
@@ -4779,9 +5015,9 @@ var FileUpload = ({
     setFiles(newFiles);
     onChange?.(newFiles);
   };
-  return /* @__PURE__ */ jsxs34("div", { className: `w-full ${className}`, children: [
-    label && /* @__PURE__ */ jsx107("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-2", children: label }),
-    /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35("div", { className: `w-full ${className}`, children: [
+    label && /* @__PURE__ */ jsx108("label", { className: "block text-sm font-medium text-[hsl(var(--foreground))] mb-2", children: label }),
+    /* @__PURE__ */ jsxs35(
       "div",
       {
         onDrop: handleDrop,
@@ -4790,7 +5026,7 @@ var FileUpload = ({
         onClick: handleClick,
         className: `relative border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-all ${isDragging ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]/10" : "border-[hsl(var(--input))] hover:border-[hsl(var(--muted-foreground))]"} ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
         children: [
-          /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx108(
             "input",
             {
               ref: fileInputRef,
@@ -4802,14 +5038,14 @@ var FileUpload = ({
               className: "hidden"
             }
           ),
-          /* @__PURE__ */ jsxs34("div", { className: "flex flex-col items-center gap-2", children: [
-            /* @__PURE__ */ jsx107("div", { className: "w-12 h-12 rounded-full bg-[hsl(var(--muted))] flex items-center justify-center", children: /* @__PURE__ */ jsx107(UploadIcon, { size: "lg", className: "text-[hsl(var(--muted-foreground))]" }) }),
-            /* @__PURE__ */ jsxs34("div", { children: [
-              /* @__PURE__ */ jsxs34("p", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: [
-                /* @__PURE__ */ jsx107("span", { className: "text-[hsl(var(--primary))]", children: "Click to upload" }),
+          /* @__PURE__ */ jsxs35("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx108("div", { className: "w-12 h-12 rounded-full bg-[hsl(var(--muted))] flex items-center justify-center", children: /* @__PURE__ */ jsx108(UploadIcon, { size: "lg", className: "text-[hsl(var(--muted-foreground))]" }) }),
+            /* @__PURE__ */ jsxs35("div", { children: [
+              /* @__PURE__ */ jsxs35("p", { className: "text-sm font-medium text-[hsl(var(--foreground))]", children: [
+                /* @__PURE__ */ jsx108("span", { className: "text-[hsl(var(--primary))]", children: "Click to upload" }),
                 " or drag and drop"
               ] }),
-              /* @__PURE__ */ jsxs34("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-1", children: [
+              /* @__PURE__ */ jsxs35("p", { className: "text-xs text-[hsl(var(--muted-foreground))] mt-1", children: [
                 accept ? `Accepted: ${accept}` : "Any file type",
                 maxSize && ` \u2022 Max size: ${formatFileSize(maxSize)}`
               ] })
@@ -4818,17 +5054,17 @@ var FileUpload = ({
         ]
       }
     ),
-    helperText && /* @__PURE__ */ jsx107("p", { className: "mt-2 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
-    files.length > 0 && /* @__PURE__ */ jsx107("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ jsxs34(
+    helperText && /* @__PURE__ */ jsx108("p", { className: "mt-2 text-sm text-[hsl(var(--muted-foreground))]", children: helperText }),
+    files.length > 0 && /* @__PURE__ */ jsx108("div", { className: "mt-4 space-y-2", children: files.map((file, index) => /* @__PURE__ */ jsxs35(
       "div",
       {
         className: "flex items-center justify-between p-3 bg-[hsl(var(--muted))] rounded-lg border border-[hsl(var(--border))]",
         children: [
-          /* @__PURE__ */ jsxs34("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx107("p", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: file.name }),
-            /* @__PURE__ */ jsx107("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: formatFileSize(file.size) })
+          /* @__PURE__ */ jsxs35("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx108("p", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: file.name }),
+            /* @__PURE__ */ jsx108("p", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: formatFileSize(file.size) })
           ] }),
-          /* @__PURE__ */ jsx107(
+          /* @__PURE__ */ jsx108(
             "button",
             {
               onClick: (e) => {
@@ -4837,7 +5073,7 @@ var FileUpload = ({
               },
               className: "ml-4 text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--destructive))] transition-colors",
               "aria-label": "Remove file",
-              children: /* @__PURE__ */ jsx107(CloseIcon, { size: "sm" })
+              children: /* @__PURE__ */ jsx108(CloseIcon, { size: "sm" })
             }
           )
         ]
@@ -4848,8 +5084,8 @@ var FileUpload = ({
 };
 
 // src/components/AudioPlayer.tsx
-import { useRef as useRef9, useState as useState16, useEffect as useEffect10 } from "react";
-import { jsx as jsx108, jsxs as jsxs35 } from "react/jsx-runtime";
+import { useRef as useRef10, useState as useState17, useEffect as useEffect11 } from "react";
+import { jsx as jsx109, jsxs as jsxs36 } from "react/jsx-runtime";
 var AudioPlayer = ({
   src,
   title,
@@ -4872,18 +5108,18 @@ var AudioPlayer = ({
   showChapters = true,
   onChapterChange
 }) => {
-  const audioRef = useRef9(null);
-  const [isPlaying, setIsPlaying] = useState16(false);
-  const [currentTime, setCurrentTime] = useState16(0);
-  const [duration, setDuration] = useState16(0);
-  const [volume, setVolume] = useState16(1);
-  const [isMuted, setIsMuted] = useState16(false);
-  const [isLoading, setIsLoading] = useState16(true);
-  const [currentChapter, setCurrentChapter] = useState16(null);
-  const [showChapterList, setShowChapterList] = useState16(false);
-  const [hoveredChapter, setHoveredChapter] = useState16(null);
-  const [hoverPosition, setHoverPosition] = useState16({ x: 0, y: 0 });
-  useEffect10(() => {
+  const audioRef = useRef10(null);
+  const [isPlaying, setIsPlaying] = useState17(false);
+  const [currentTime, setCurrentTime] = useState17(0);
+  const [duration, setDuration] = useState17(0);
+  const [volume, setVolume] = useState17(1);
+  const [isMuted, setIsMuted] = useState17(false);
+  const [isLoading, setIsLoading] = useState17(true);
+  const [currentChapter, setCurrentChapter] = useState17(null);
+  const [showChapterList, setShowChapterList] = useState17(false);
+  const [hoveredChapter, setHoveredChapter] = useState17(null);
+  const [hoverPosition, setHoverPosition] = useState17({ x: 0, y: 0 });
+  useEffect11(() => {
     const audio = audioRef.current;
     if (!audio) return;
     const handleLoadedMetadata = () => {
@@ -4947,7 +5183,7 @@ var AudioPlayer = ({
       audio.removeEventListener("error", handleError);
     };
   }, [onPlay, onPause, onEnded, onTimeUpdate]);
-  useEffect10(() => {
+  useEffect11(() => {
     const audio = audioRef.current;
     if (!audio) return;
     audio.load();
@@ -5034,9 +5270,9 @@ var AudioPlayer = ({
   };
   const progress = duration > 0 ? currentTime / duration * 100 : 0;
   if (variant === "mini") {
-    return /* @__PURE__ */ jsxs35("div", { className: `flex items-center gap-2 p-2 bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] ${className}`, children: [
-      /* @__PURE__ */ jsx108("audio", { ref: audioRef, src, preload, loop, autoPlay }),
-      /* @__PURE__ */ jsx108(
+    return /* @__PURE__ */ jsxs36("div", { className: `flex items-center gap-2 p-2 bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] ${className}`, children: [
+      /* @__PURE__ */ jsx109("audio", { ref: audioRef, src, preload, loop, autoPlay }),
+      /* @__PURE__ */ jsx109(
         Button,
         {
           iconOnly: true,
@@ -5045,16 +5281,16 @@ var AudioPlayer = ({
           onClick: togglePlayPause,
           disabled: isLoading,
           "aria-label": isPlaying ? "Pause" : "Play",
-          children: isPlaying ? /* @__PURE__ */ jsx108(PauseIcon, { size: "sm" }) : /* @__PURE__ */ jsx108(PlayIcon, { size: "sm" })
+          children: isPlaying ? /* @__PURE__ */ jsx109(PauseIcon, { size: "sm" }) : /* @__PURE__ */ jsx109(PlayIcon, { size: "sm" })
         }
       ),
-      title && /* @__PURE__ */ jsx108("span", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: title })
+      title && /* @__PURE__ */ jsx109("span", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: title })
     ] });
   }
   if (variant === "compact") {
-    return /* @__PURE__ */ jsxs35("div", { className: `flex items-center gap-3 p-3 bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-sm ${className}`, children: [
-      /* @__PURE__ */ jsx108("audio", { ref: audioRef, src, preload, loop, autoPlay }),
-      /* @__PURE__ */ jsx108(
+    return /* @__PURE__ */ jsxs36("div", { className: `flex items-center gap-3 p-3 bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-sm ${className}`, children: [
+      /* @__PURE__ */ jsx109("audio", { ref: audioRef, src, preload, loop, autoPlay }),
+      /* @__PURE__ */ jsx109(
         Button,
         {
           iconOnly: true,
@@ -5063,17 +5299,17 @@ var AudioPlayer = ({
           onClick: togglePlayPause,
           disabled: isLoading,
           "aria-label": isPlaying ? "Pause" : "Play",
-          children: isPlaying ? /* @__PURE__ */ jsx108(PauseIcon, { size: "md" }) : /* @__PURE__ */ jsx108(PlayIcon, { size: "md" })
+          children: isPlaying ? /* @__PURE__ */ jsx109(PauseIcon, { size: "md" }) : /* @__PURE__ */ jsx109(PlayIcon, { size: "md" })
         }
       ),
-      /* @__PURE__ */ jsxs35("div", { className: "flex-1 min-w-0", children: [
-        title && /* @__PURE__ */ jsx108("div", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: title }),
-        artist && /* @__PURE__ */ jsx108("div", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: artist })
+      /* @__PURE__ */ jsxs36("div", { className: "flex-1 min-w-0", children: [
+        title && /* @__PURE__ */ jsx109("div", { className: "text-sm font-medium text-[hsl(var(--foreground))] truncate", children: title }),
+        artist && /* @__PURE__ */ jsx109("div", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: artist })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 flex-1", children: [
-        /* @__PURE__ */ jsx108("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(currentTime) }),
-        /* @__PURE__ */ jsxs35("div", { className: "relative flex-1 h-1.5 bg-[hsl(var(--muted))] rounded-full overflow-visible", children: [
-          /* @__PURE__ */ jsx108(
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 flex-1", children: [
+        /* @__PURE__ */ jsx109("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(currentTime) }),
+        /* @__PURE__ */ jsxs36("div", { className: "relative flex-1 h-1.5 bg-[hsl(var(--muted))] rounded-full overflow-visible", children: [
+          /* @__PURE__ */ jsx109(
             "div",
             {
               className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
@@ -5082,7 +5318,7 @@ var AudioPlayer = ({
           ),
           showChapters && chapters.length > 0 && chapters.map((chapter, index) => {
             const markerPosition = duration > 0 ? chapter.startTime / duration * 100 : 0;
-            return /* @__PURE__ */ jsx108(
+            return /* @__PURE__ */ jsx109(
               "div",
               {
                 className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-[hsl(var(--background))] opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
@@ -5098,7 +5334,7 @@ var AudioPlayer = ({
               index
             );
           }),
-          /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsx109(
             "input",
             {
               type: "range",
@@ -5112,23 +5348,23 @@ var AudioPlayer = ({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx108("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(duration) }),
-        currentChapter && showChapters && /* @__PURE__ */ jsxs35("span", { className: "text-xs text-[hsl(var(--primary))] font-medium truncate max-w-[120px]", children: [
+        /* @__PURE__ */ jsx109("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(duration) }),
+        currentChapter && showChapters && /* @__PURE__ */ jsxs36("span", { className: "text-xs text-[hsl(var(--primary))] font-medium truncate max-w-[120px]", children: [
           "\u2022 ",
           currentChapter.title
         ] })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx108(
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx109(
           "button",
           {
             onClick: toggleMute,
             className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]",
             "aria-label": isMuted ? "Unmute" : "Mute",
-            children: isMuted ? /* @__PURE__ */ jsx108(VolumeOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx108(VolumeUpIcon, { size: "sm" })
+            children: isMuted ? /* @__PURE__ */ jsx109(VolumeOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx109(VolumeUpIcon, { size: "sm" })
           }
         ),
-        /* @__PURE__ */ jsx108(
+        /* @__PURE__ */ jsx109(
           "input",
           {
             type: "range",
@@ -5142,24 +5378,24 @@ var AudioPlayer = ({
           }
         )
       ] }),
-      hoveredChapter && showChapters && /* @__PURE__ */ jsxs35(
+      hoveredChapter && showChapters && /* @__PURE__ */ jsxs36(
         "div",
         {
           className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
           style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
           children: [
-            /* @__PURE__ */ jsx108("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
-            /* @__PURE__ */ jsx108("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
-            /* @__PURE__ */ jsx108("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
+            /* @__PURE__ */ jsx109("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
+            /* @__PURE__ */ jsx109("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
+            /* @__PURE__ */ jsx109("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
           ]
         }
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs35("div", { className: `bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-md overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsx108("audio", { ref: audioRef, src, preload, loop, autoPlay }),
-    /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-4 p-4 border-b border-[hsl(var(--border))]", children: [
-      coverArt && /* @__PURE__ */ jsx108("div", { className: "w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-[hsl(var(--muted))]", children: /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsxs36("div", { className: `bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-md overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsx109("audio", { ref: audioRef, src, preload, loop, autoPlay }),
+    /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-4 p-4 border-b border-[hsl(var(--border))]", children: [
+      coverArt && /* @__PURE__ */ jsx109("div", { className: "w-16 h-16 flex-shrink-0 rounded-md overflow-hidden bg-[hsl(var(--muted))]", children: /* @__PURE__ */ jsx109(
         "img",
         {
           src: coverArt,
@@ -5167,15 +5403,15 @@ var AudioPlayer = ({
           className: "w-full h-full object-cover"
         }
       ) }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex-1 min-w-0", children: [
-        title && /* @__PURE__ */ jsx108("h3", { className: "text-base font-semibold text-[hsl(var(--foreground))] truncate", children: title }),
-        artist && /* @__PURE__ */ jsx108("p", { className: "text-sm text-[hsl(var(--muted-foreground))] truncate", children: artist }),
-        album && /* @__PURE__ */ jsx108("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: album })
+      /* @__PURE__ */ jsxs36("div", { className: "flex-1 min-w-0", children: [
+        title && /* @__PURE__ */ jsx109("h3", { className: "text-base font-semibold text-[hsl(var(--foreground))] truncate", children: title }),
+        artist && /* @__PURE__ */ jsx109("p", { className: "text-sm text-[hsl(var(--muted-foreground))] truncate", children: artist }),
+        album && /* @__PURE__ */ jsx109("p", { className: "text-xs text-[hsl(var(--muted-foreground))] truncate", children: album })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs35("div", { className: "px-4 pt-4", children: [
-      /* @__PURE__ */ jsxs35("div", { className: "relative h-2 bg-[hsl(var(--muted))] rounded-full overflow-visible", children: [
-        /* @__PURE__ */ jsx108(
+    /* @__PURE__ */ jsxs36("div", { className: "px-4 pt-4", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "relative h-2 bg-[hsl(var(--muted))] rounded-full overflow-visible", children: [
+        /* @__PURE__ */ jsx109(
           "div",
           {
             className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
@@ -5184,7 +5420,7 @@ var AudioPlayer = ({
         ),
         showChapters && chapters.length > 0 && chapters.map((chapter, index) => {
           const markerPosition = duration > 0 ? chapter.startTime / duration * 100 : 0;
-          return /* @__PURE__ */ jsx108(
+          return /* @__PURE__ */ jsx109(
             "div",
             {
               className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-[hsl(var(--background))] opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
@@ -5200,19 +5436,19 @@ var AudioPlayer = ({
             index
           );
         }),
-        hoveredChapter && showChapters && /* @__PURE__ */ jsxs35(
+        hoveredChapter && showChapters && /* @__PURE__ */ jsxs36(
           "div",
           {
             className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
             style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
             children: [
-              /* @__PURE__ */ jsx108("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
-              /* @__PURE__ */ jsx108("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
-              /* @__PURE__ */ jsx108("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
+              /* @__PURE__ */ jsx109("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
+              /* @__PURE__ */ jsx109("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
+              /* @__PURE__ */ jsx109("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
             ]
           }
         ),
-        /* @__PURE__ */ jsx108(
+        /* @__PURE__ */ jsx109(
           "input",
           {
             type: "range",
@@ -5226,24 +5462,24 @@ var AudioPlayer = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex justify-between items-center mt-1 text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: [
-        /* @__PURE__ */ jsx108("span", { children: formatTime(currentTime) }),
-        currentChapter && showChapters && /* @__PURE__ */ jsx108("span", { className: "text-[hsl(var(--primary))] font-medium truncate max-w-[200px]", children: currentChapter.title }),
-        /* @__PURE__ */ jsx108("span", { children: formatTime(duration) })
+      /* @__PURE__ */ jsxs36("div", { className: "flex justify-between items-center mt-1 text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: [
+        /* @__PURE__ */ jsx109("span", { children: formatTime(currentTime) }),
+        currentChapter && showChapters && /* @__PURE__ */ jsx109("span", { className: "text-[hsl(var(--primary))] font-medium truncate max-w-[200px]", children: currentChapter.title }),
+        /* @__PURE__ */ jsx109("span", { children: formatTime(duration) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between px-4 py-4", children: [
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 flex-1", children: [
-        /* @__PURE__ */ jsx108(
+    /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between px-4 py-4", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 flex-1", children: [
+        /* @__PURE__ */ jsx109(
           "button",
           {
             onClick: toggleMute,
             className: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors",
             "aria-label": isMuted ? "Unmute" : "Mute",
-            children: isMuted ? /* @__PURE__ */ jsx108(VolumeOffIcon, { size: "md" }) : /* @__PURE__ */ jsx108(VolumeUpIcon, { size: "md" })
+            children: isMuted ? /* @__PURE__ */ jsx109(VolumeOffIcon, { size: "md" }) : /* @__PURE__ */ jsx109(VolumeUpIcon, { size: "md" })
           }
         ),
-        /* @__PURE__ */ jsx108(
+        /* @__PURE__ */ jsx109(
           "input",
           {
             type: "range",
@@ -5257,8 +5493,8 @@ var AudioPlayer = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-        showSkipButtons && /* @__PURE__ */ jsx108(
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+        showSkipButtons && /* @__PURE__ */ jsx109(
           Button,
           {
             iconOnly: true,
@@ -5267,10 +5503,10 @@ var AudioPlayer = ({
             onClick: handleSkipBack,
             disabled: isLoading,
             "aria-label": "Skip back 10 seconds",
-            children: /* @__PURE__ */ jsx108(SkipBackIcon, { size: "md" })
+            children: /* @__PURE__ */ jsx109(SkipBackIcon, { size: "md" })
           }
         ),
-        /* @__PURE__ */ jsx108(
+        /* @__PURE__ */ jsx109(
           Button,
           {
             iconOnly: true,
@@ -5279,10 +5515,10 @@ var AudioPlayer = ({
             onClick: togglePlayPause,
             disabled: isLoading,
             "aria-label": isPlaying ? "Pause" : "Play",
-            children: isPlaying ? /* @__PURE__ */ jsx108(PauseIcon, { size: "lg" }) : /* @__PURE__ */ jsx108(PlayIcon, { size: "lg" })
+            children: isPlaying ? /* @__PURE__ */ jsx109(PauseIcon, { size: "lg" }) : /* @__PURE__ */ jsx109(PlayIcon, { size: "lg" })
           }
         ),
-        showSkipButtons && /* @__PURE__ */ jsx108(
+        showSkipButtons && /* @__PURE__ */ jsx109(
           Button,
           {
             iconOnly: true,
@@ -5291,11 +5527,11 @@ var AudioPlayer = ({
             onClick: handleSkipForward,
             disabled: isLoading,
             "aria-label": "Skip forward 10 seconds",
-            children: /* @__PURE__ */ jsx108(SkipForwardIcon, { size: "md" })
+            children: /* @__PURE__ */ jsx109(SkipForwardIcon, { size: "md" })
           }
         )
       ] }),
-      /* @__PURE__ */ jsx108("div", { className: "flex-1 flex justify-end", children: showChapters && chapters.length > 0 && /* @__PURE__ */ jsxs35(
+      /* @__PURE__ */ jsx109("div", { className: "flex-1 flex justify-end", children: showChapters && chapters.length > 0 && /* @__PURE__ */ jsxs36(
         "button",
         {
           onClick: () => setShowChapterList(!showChapterList),
@@ -5309,16 +5545,16 @@ var AudioPlayer = ({
         }
       ) })
     ] }),
-    showChapters && showChapterList && chapters.length > 0 && /* @__PURE__ */ jsx108("div", { className: "border-t border-[hsl(var(--border))] bg-[hsl(var(--muted))]/50 max-h-48 overflow-y-auto", children: chapters.map((chapter, index) => {
+    showChapters && showChapterList && chapters.length > 0 && /* @__PURE__ */ jsx109("div", { className: "border-t border-[hsl(var(--border))] bg-[hsl(var(--muted))]/50 max-h-48 overflow-y-auto", children: chapters.map((chapter, index) => {
       const isCurrentChapter = currentChapter?.startTime === chapter.startTime;
-      return /* @__PURE__ */ jsx108(
+      return /* @__PURE__ */ jsx109(
         "button",
         {
           onClick: () => jumpToChapter(chapter),
           className: `w-full text-left px-4 py-2 hover:bg-[hsl(var(--accent))] transition-colors ${isCurrentChapter ? "bg-[hsl(var(--primary))]/10 border-l-2 border-[hsl(var(--primary))]" : ""}`,
-          children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx108("span", { className: `text-sm font-medium ${isCurrentChapter ? "text-[hsl(var(--primary))]" : "text-[hsl(var(--foreground))]"}`, children: chapter.title }),
-            /* @__PURE__ */ jsx108("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(chapter.startTime) })
+          children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx109("span", { className: `text-sm font-medium ${isCurrentChapter ? "text-[hsl(var(--primary))]" : "text-[hsl(var(--foreground))]"}`, children: chapter.title }),
+            /* @__PURE__ */ jsx109("span", { className: "text-xs text-[hsl(var(--muted-foreground))] tabular-nums", children: formatTime(chapter.startTime) })
           ] })
         },
         index
@@ -5328,8 +5564,8 @@ var AudioPlayer = ({
 };
 
 // src/components/VideoPlayer.tsx
-import { useRef as useRef10, useState as useState17, useEffect as useEffect11 } from "react";
-import { jsx as jsx109, jsxs as jsxs36 } from "react/jsx-runtime";
+import { useRef as useRef11, useState as useState18, useEffect as useEffect12 } from "react";
+import { jsx as jsx110, jsxs as jsxs37 } from "react/jsx-runtime";
 var VideoPlayer = ({
   src,
   poster,
@@ -5353,21 +5589,21 @@ var VideoPlayer = ({
   showChapters = true,
   onChapterChange
 }) => {
-  const videoRef = useRef10(null);
-  const containerRef = useRef10(null);
-  const [isPlaying, setIsPlaying] = useState17(false);
-  const [currentTime, setCurrentTime] = useState17(0);
-  const [duration, setDuration] = useState17(0);
-  const [volume, setVolume] = useState17(muted ? 0 : 1);
-  const [isMuted, setIsMuted] = useState17(muted);
-  const [isLoading, setIsLoading] = useState17(true);
-  const [isFullscreen, setIsFullscreen] = useState17(false);
-  const [showControlsOverlay, setShowControlsOverlay] = useState17(true);
-  const hideControlsTimeout = useRef10(null);
-  const [currentChapter, setCurrentChapter] = useState17(null);
-  const [hoveredChapter, setHoveredChapter] = useState17(null);
-  const [hoverPosition, setHoverPosition] = useState17({ x: 0, y: 0 });
-  useEffect11(() => {
+  const videoRef = useRef11(null);
+  const containerRef = useRef11(null);
+  const [isPlaying, setIsPlaying] = useState18(false);
+  const [currentTime, setCurrentTime] = useState18(0);
+  const [duration, setDuration] = useState18(0);
+  const [volume, setVolume] = useState18(muted ? 0 : 1);
+  const [isMuted, setIsMuted] = useState18(muted);
+  const [isLoading, setIsLoading] = useState18(true);
+  const [isFullscreen, setIsFullscreen] = useState18(false);
+  const [showControlsOverlay, setShowControlsOverlay] = useState18(true);
+  const hideControlsTimeout = useRef11(null);
+  const [currentChapter, setCurrentChapter] = useState18(null);
+  const [hoveredChapter, setHoveredChapter] = useState18(null);
+  const [hoverPosition, setHoverPosition] = useState18({ x: 0, y: 0 });
+  useEffect12(() => {
     const video = videoRef.current;
     if (!video) return;
     const handleLoadedMetadata = () => {
@@ -5436,12 +5672,12 @@ var VideoPlayer = ({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
     };
   }, [onPlay, onPause, onEnded, onTimeUpdate]);
-  useEffect11(() => {
+  useEffect12(() => {
     const video = videoRef.current;
     if (!video) return;
     video.load();
   }, [src]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isPlaying) {
       setShowControlsOverlay(true);
       return;
@@ -5557,7 +5793,7 @@ var VideoPlayer = ({
     }
   };
   if (variant === "compact") {
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs37(
       "div",
       {
         ref: containerRef,
@@ -5565,7 +5801,7 @@ var VideoPlayer = ({
         style: { width, height },
         onMouseMove: handleMouseMove,
         children: [
-          /* @__PURE__ */ jsx109(
+          /* @__PURE__ */ jsx110(
             "video",
             {
               ref: videoRef,
@@ -5579,8 +5815,8 @@ var VideoPlayer = ({
               onClick: togglePlayPause
             }
           ),
-          showControls && /* @__PURE__ */ jsxs36("div", { className: `absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent transition-opacity duration-300 ${showControlsOverlay || !isPlaying ? "opacity-100" : "opacity-0 pointer-events-none"}`, children: [
-            /* @__PURE__ */ jsx109("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx109(
+          showControls && /* @__PURE__ */ jsxs37("div", { className: `absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent transition-opacity duration-300 ${showControlsOverlay || !isPlaying ? "opacity-100" : "opacity-0 pointer-events-none"}`, children: [
+            /* @__PURE__ */ jsx110("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx110(
               "button",
               {
                 onClick: togglePlayPause,
@@ -5588,12 +5824,12 @@ var VideoPlayer = ({
                 className: "flex items-center justify-center w-16 h-16 rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed",
                 style: { width: 64, height: 64, borderRadius: "50%" },
                 "aria-label": isPlaying ? "Pause" : "Play",
-                children: isPlaying ? /* @__PURE__ */ jsx109(PauseIcon, { size: "xl" }) : /* @__PURE__ */ jsx109(PlayIcon, { size: "xl" })
+                children: isPlaying ? /* @__PURE__ */ jsx110(PauseIcon, { size: "xl" }) : /* @__PURE__ */ jsx110(PlayIcon, { size: "xl" })
               }
             ) }),
-            /* @__PURE__ */ jsxs36("div", { className: "absolute bottom-0 left-0 right-0 p-3 space-y-2", children: [
-              /* @__PURE__ */ jsxs36("div", { className: "relative h-1 bg-white/30 rounded-full overflow-visible", children: [
-                /* @__PURE__ */ jsx109(
+            /* @__PURE__ */ jsxs37("div", { className: "absolute bottom-0 left-0 right-0 p-3 space-y-2", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "relative h-1 bg-white/30 rounded-full overflow-visible", children: [
+                /* @__PURE__ */ jsx110(
                   "div",
                   {
                     className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
@@ -5602,7 +5838,7 @@ var VideoPlayer = ({
                 ),
                 showChapters && chapters.length > 0 && chapters.map((chapter, index) => {
                   const markerPosition = duration > 0 ? chapter.startTime / duration * 100 : 0;
-                  return /* @__PURE__ */ jsx109(
+                  return /* @__PURE__ */ jsx110(
                     "div",
                     {
                       className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-white opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
@@ -5618,7 +5854,7 @@ var VideoPlayer = ({
                     index
                   );
                 }),
-                /* @__PURE__ */ jsx109(
+                /* @__PURE__ */ jsx110(
                   "input",
                   {
                     type: "range",
@@ -5632,50 +5868,50 @@ var VideoPlayer = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between gap-2", children: [
-                /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsxs36("span", { className: "text-xs text-white tabular-nums", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs37("span", { className: "text-xs text-white tabular-nums", children: [
                     formatTime(currentTime),
                     " / ",
                     formatTime(duration)
                   ] }),
-                  currentChapter && showChapters && /* @__PURE__ */ jsxs36("span", { className: "text-xs text-white/90 font-medium truncate max-w-[150px]", children: [
+                  currentChapter && showChapters && /* @__PURE__ */ jsxs37("span", { className: "text-xs text-white/90 font-medium truncate max-w-[150px]", children: [
                     "\u2022 ",
                     currentChapter.title
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx109(
+                /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx110(
                     "button",
                     {
                       onClick: toggleMute,
                       className: "text-white/80 hover:text-white transition-colors",
                       "aria-label": isMuted ? "Unmute" : "Mute",
-                      children: isMuted ? /* @__PURE__ */ jsx109(VolumeOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx109(VolumeUpIcon, { size: "sm" })
+                      children: isMuted ? /* @__PURE__ */ jsx110(VolumeOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx110(VolumeUpIcon, { size: "sm" })
                     }
                   ),
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx110(
                     "button",
                     {
                       onClick: toggleFullscreen,
                       className: "text-white/80 hover:text-white transition-colors",
                       "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-                      children: isFullscreen ? /* @__PURE__ */ jsx109(FullscreenExitIcon, { size: "sm" }) : /* @__PURE__ */ jsx109(FullscreenIcon, { size: "sm" })
+                      children: isFullscreen ? /* @__PURE__ */ jsx110(FullscreenExitIcon, { size: "sm" }) : /* @__PURE__ */ jsx110(FullscreenIcon, { size: "sm" })
                     }
                   )
                 ] })
               ] })
             ] })
           ] }),
-          hoveredChapter && showChapters && /* @__PURE__ */ jsxs36(
+          hoveredChapter && showChapters && /* @__PURE__ */ jsxs37(
             "div",
             {
               className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
               style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
               children: [
-                /* @__PURE__ */ jsx109("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
-                /* @__PURE__ */ jsx109("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
-                /* @__PURE__ */ jsx109("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
+                /* @__PURE__ */ jsx110("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
+                /* @__PURE__ */ jsx110("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
+                /* @__PURE__ */ jsx110("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
               ]
             }
           )
@@ -5683,9 +5919,9 @@ var VideoPlayer = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs36("div", { className: `bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-md overflow-hidden ${className}`, children: [
-    title && /* @__PURE__ */ jsx109("div", { className: "px-4 py-3 border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ jsx109("h3", { className: "text-base font-semibold text-[hsl(var(--foreground))] truncate", children: title }) }),
-    /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37("div", { className: `bg-[hsl(var(--card))] rounded-lg border border-[hsl(var(--border))] shadow-md overflow-hidden ${className}`, children: [
+    title && /* @__PURE__ */ jsx110("div", { className: "px-4 py-3 border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ jsx110("h3", { className: "text-base font-semibold text-[hsl(var(--foreground))] truncate", children: title }) }),
+    /* @__PURE__ */ jsxs37(
       "div",
       {
         ref: containerRef,
@@ -5693,7 +5929,7 @@ var VideoPlayer = ({
         style: { width, height },
         onMouseMove: handleMouseMove,
         children: [
-          /* @__PURE__ */ jsx109(
+          /* @__PURE__ */ jsx110(
             "video",
             {
               ref: videoRef,
@@ -5708,8 +5944,8 @@ var VideoPlayer = ({
               onClick: togglePlayPause
             }
           ),
-          showControls && !controls && /* @__PURE__ */ jsxs36("div", { className: `absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent transition-opacity duration-300 ${showControlsOverlay || !isPlaying ? "opacity-100" : "opacity-0 pointer-events-none"}`, children: [
-            /* @__PURE__ */ jsx109("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx109(
+          showControls && !controls && /* @__PURE__ */ jsxs37("div", { className: `absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent transition-opacity duration-300 ${showControlsOverlay || !isPlaying ? "opacity-100" : "opacity-0 pointer-events-none"}`, children: [
+            /* @__PURE__ */ jsx110("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx110(
               "button",
               {
                 onClick: togglePlayPause,
@@ -5717,12 +5953,12 @@ var VideoPlayer = ({
                 className: "flex items-center justify-center w-20 h-20 rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed",
                 style: { width: 80, height: 80, borderRadius: "50%" },
                 "aria-label": isPlaying ? "Pause" : "Play",
-                children: isPlaying ? /* @__PURE__ */ jsx109(PauseIcon, { size: "xl" }) : /* @__PURE__ */ jsx109(PlayIcon, { size: "xl" })
+                children: isPlaying ? /* @__PURE__ */ jsx110(PauseIcon, { size: "xl" }) : /* @__PURE__ */ jsx110(PlayIcon, { size: "xl" })
               }
             ) }),
-            /* @__PURE__ */ jsxs36("div", { className: "absolute bottom-0 left-0 right-0 p-4 space-y-3", children: [
-              /* @__PURE__ */ jsxs36("div", { className: "relative h-1.5 bg-white/30 rounded-full overflow-visible", children: [
-                /* @__PURE__ */ jsx109(
+            /* @__PURE__ */ jsxs37("div", { className: "absolute bottom-0 left-0 right-0 p-4 space-y-3", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "relative h-1.5 bg-white/30 rounded-full overflow-visible", children: [
+                /* @__PURE__ */ jsx110(
                   "div",
                   {
                     className: "absolute h-full bg-[hsl(var(--primary))] rounded-full transition-all",
@@ -5731,7 +5967,7 @@ var VideoPlayer = ({
                 ),
                 showChapters && chapters.length > 0 && chapters.map((chapter, index) => {
                   const markerPosition = duration > 0 ? chapter.startTime / duration * 100 : 0;
-                  return /* @__PURE__ */ jsx109(
+                  return /* @__PURE__ */ jsx110(
                     "div",
                     {
                       className: "absolute top-0 bottom-0 w-1 -ml-0.5 bg-white opacity-70 hover:opacity-100 hover:w-1.5 hover:-ml-0.5 cursor-pointer z-10 transition-all",
@@ -5747,7 +5983,7 @@ var VideoPlayer = ({
                     index
                   );
                 }),
-                /* @__PURE__ */ jsx109(
+                /* @__PURE__ */ jsx110(
                   "input",
                   {
                     type: "range",
@@ -5761,42 +5997,42 @@ var VideoPlayer = ({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between gap-4", children: [
-                /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsx109(
+              /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between gap-4", children: [
+                /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx110(
                     "button",
                     {
                       onClick: togglePlayPause,
                       disabled: isLoading,
                       className: "flex items-center justify-center w-10 h-10 rounded-lg bg-white/20 hover:bg-white/30 backdrop-blur-sm text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed",
                       "aria-label": isPlaying ? "Pause" : "Play",
-                      children: isPlaying ? /* @__PURE__ */ jsx109(PauseIcon, { size: "md" }) : /* @__PURE__ */ jsx109(PlayIcon, { size: "md" })
+                      children: isPlaying ? /* @__PURE__ */ jsx110(PauseIcon, { size: "md" }) : /* @__PURE__ */ jsx110(PlayIcon, { size: "md" })
                     }
                   ),
-                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsxs36("span", { className: "text-sm text-white tabular-nums", children: [
+                  /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxs37("span", { className: "text-sm text-white tabular-nums", children: [
                       formatTime(currentTime),
                       " / ",
                       formatTime(duration)
                     ] }),
-                    currentChapter && showChapters && /* @__PURE__ */ jsxs36("span", { className: "text-sm text-white/90 font-medium truncate max-w-[200px]", children: [
+                    currentChapter && showChapters && /* @__PURE__ */ jsxs37("span", { className: "text-sm text-white/90 font-medium truncate max-w-[200px]", children: [
                       "\u2022 ",
                       currentChapter.title
                     ] })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3", children: [
-                  /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx109(
+                /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx110(
                       "button",
                       {
                         onClick: toggleMute,
                         className: "text-white/80 hover:text-white transition-colors",
                         "aria-label": isMuted ? "Unmute" : "Mute",
-                        children: isMuted ? /* @__PURE__ */ jsx109(VolumeOffIcon, { size: "md" }) : /* @__PURE__ */ jsx109(VolumeUpIcon, { size: "md" })
+                        children: isMuted ? /* @__PURE__ */ jsx110(VolumeOffIcon, { size: "md" }) : /* @__PURE__ */ jsx110(VolumeUpIcon, { size: "md" })
                       }
                     ),
-                    /* @__PURE__ */ jsx109(
+                    /* @__PURE__ */ jsx110(
                       "input",
                       {
                         type: "range",
@@ -5810,28 +6046,28 @@ var VideoPlayer = ({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx109(
+                  /* @__PURE__ */ jsx110(
                     "button",
                     {
                       onClick: toggleFullscreen,
                       className: "text-white/80 hover:text-white transition-colors",
                       "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-                      children: isFullscreen ? /* @__PURE__ */ jsx109(FullscreenExitIcon, { size: "md" }) : /* @__PURE__ */ jsx109(FullscreenIcon, { size: "md" })
+                      children: isFullscreen ? /* @__PURE__ */ jsx110(FullscreenExitIcon, { size: "md" }) : /* @__PURE__ */ jsx110(FullscreenIcon, { size: "md" })
                     }
                   )
                 ] })
               ] })
             ] })
           ] }),
-          hoveredChapter && showChapters && /* @__PURE__ */ jsxs36(
+          hoveredChapter && showChapters && /* @__PURE__ */ jsxs37(
             "div",
             {
               className: "fixed z-50 px-3 py-2 bg-[hsl(var(--popover))] text-white text-xs font-medium rounded shadow-lg pointer-events-none transform -translate-x-1/2 -translate-y-full",
               style: { left: hoverPosition.x, top: hoverPosition.y - 8 },
               children: [
-                /* @__PURE__ */ jsx109("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
-                /* @__PURE__ */ jsx109("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
-                /* @__PURE__ */ jsx109("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
+                /* @__PURE__ */ jsx110("div", { className: "whitespace-nowrap", children: hoveredChapter.title }),
+                /* @__PURE__ */ jsx110("div", { className: "text-[hsl(var(--muted-foreground))] text-[10px] mt-0.5", children: formatTime(hoveredChapter.startTime) }),
+                /* @__PURE__ */ jsx110("div", { className: "absolute left-1/2 -bottom-1 w-2 h-2 bg-[hsl(var(--popover))] transform -translate-x-1/2 rotate-45" })
               ]
             }
           )
@@ -5842,7 +6078,7 @@ var VideoPlayer = ({
 };
 
 // src/charts/LineChart.tsx
-import React30, { useMemo as useMemo2, useCallback as useCallback4, useRef as useRef12, useState as useState20 } from "react";
+import React31, { useMemo as useMemo2, useCallback as useCallback5, useRef as useRef13, useState as useState21 } from "react";
 
 // src/charts/constants.ts
 var CHART_DEFAULTS = {
@@ -5909,7 +6145,7 @@ var CHART_DEFAULTS = {
 };
 
 // src/charts/hooks/useResponsiveChart.ts
-import { useState as useState18, useEffect as useEffect12 } from "react";
+import { useState as useState19, useEffect as useEffect13 } from "react";
 var BREAKPOINTS = {
   mobile: 640,
   // < 640px
@@ -5928,8 +6164,8 @@ var DEFAULT_ASPECT_RATIOS = {
   desktop: 2
 };
 function useBreakpoint() {
-  const [breakpoint, setBreakpoint] = useState18("desktop");
-  useEffect12(() => {
+  const [breakpoint, setBreakpoint] = useState19("desktop");
+  useEffect13(() => {
     const update = () => {
       const width = window.innerWidth;
       if (width < BREAKPOINTS.mobile) {
@@ -6226,8 +6462,8 @@ function createTickFormatter(domain) {
 }
 
 // src/charts/components/ChartTooltip.tsx
-import React28, { useRef as useRef11, useEffect as useEffect13, useState as useState19 } from "react";
-import { jsx as jsx110, jsxs as jsxs37 } from "react/jsx-runtime";
+import React29, { useRef as useRef12, useEffect as useEffect14, useState as useState20 } from "react";
+import { jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
 var DefaultTooltipContent = ({
   active,
   label,
@@ -6239,22 +6475,22 @@ var DefaultTooltipContent = ({
     return null;
   }
   const formattedLabel = labelFormatter ? labelFormatter(label ?? "") : String(label ?? "");
-  return /* @__PURE__ */ jsxs37("div", { className: "bg-[hsl(var(--popover))] text-white rounded-lg shadow-xl border border-[hsl(var(--border))] overflow-hidden min-w-[120px]", children: [
-    formattedLabel && /* @__PURE__ */ jsx110("div", { className: "px-3 py-2 bg-[hsl(var(--popover))] border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ jsx110("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: formattedLabel }) }),
-    /* @__PURE__ */ jsx110("div", { className: "px-3 py-2 space-y-1", children: payload.map((item, index) => {
+  return /* @__PURE__ */ jsxs38("div", { className: "bg-[hsl(var(--popover))] text-white rounded-lg shadow-xl border border-[hsl(var(--border))] overflow-hidden min-w-[120px]", children: [
+    formattedLabel && /* @__PURE__ */ jsx111("div", { className: "px-3 py-2 bg-[hsl(var(--popover))] border-b border-[hsl(var(--border))]", children: /* @__PURE__ */ jsx111("span", { className: "text-sm font-medium text-[hsl(var(--muted-foreground))]", children: formattedLabel }) }),
+    /* @__PURE__ */ jsx111("div", { className: "px-3 py-2 space-y-1", children: payload.map((item, index) => {
       const formattedValue = formatter ? formatter(item.value, item.name, item) : String(item.value);
-      return /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between gap-4", children: [
-        /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
-          item.color && /* @__PURE__ */ jsx110(
+      return /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2", children: [
+          item.color && /* @__PURE__ */ jsx111(
             "span",
             {
               className: "w-2.5 h-2.5 rounded-full flex-shrink-0",
               style: { backgroundColor: item.color }
             }
           ),
-          /* @__PURE__ */ jsx110("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: item.name })
+          /* @__PURE__ */ jsx111("span", { className: "text-xs text-[hsl(var(--muted-foreground))]", children: item.name })
         ] }),
-        /* @__PURE__ */ jsx110("span", { className: "text-sm font-semibold text-white", children: formattedValue })
+        /* @__PURE__ */ jsx111("span", { className: "text-sm font-semibold text-white", children: formattedValue })
       ] }, `${item.name}-${index}`);
     }) })
   ] });
@@ -6273,10 +6509,10 @@ var ChartTooltip = ({
   containerBounds,
   animationDuration = 150
 }) => {
-  const tooltipRef = useRef11(null);
-  const [position, setPosition] = useState19({ x: 0, y: 0 });
-  const [isVisible, setIsVisible] = useState19(false);
-  useEffect13(() => {
+  const tooltipRef = useRef12(null);
+  const [position, setPosition] = useState20({ x: 0, y: 0 });
+  const [isVisible, setIsVisible] = useState20(false);
+  useEffect14(() => {
     if (!active || !tooltipRef.current) {
       setIsVisible(false);
       return;
@@ -6305,19 +6541,19 @@ var ChartTooltip = ({
   if (!active) {
     return null;
   }
-  const tooltipContent = content ? React28.isValidElement(content) ? React28.cloneElement(content, {
+  const tooltipContent = content ? React29.isValidElement(content) ? React29.cloneElement(content, {
     active,
     label,
     payload,
     formatter,
     labelFormatter
-  }) : React28.createElement(content, {
+  }) : React29.createElement(content, {
     active,
     label,
     payload,
     formatter,
     labelFormatter
-  }) : /* @__PURE__ */ jsx110(
+  }) : /* @__PURE__ */ jsx111(
     DefaultTooltipContent,
     {
       active,
@@ -6327,7 +6563,7 @@ var ChartTooltip = ({
       labelFormatter
     }
   );
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx111(
     "div",
     {
       ref: tooltipRef,
@@ -6344,26 +6580,26 @@ var ChartTooltip = ({
   );
 };
 function useTooltip() {
-  const [tooltipData, setTooltipData] = useState19({
+  const [tooltipData, setTooltipData] = useState20({
     active: false,
     x: 0,
     y: 0,
     label: void 0,
     payload: void 0
   });
-  const showTooltip = React28.useCallback((data) => {
+  const showTooltip = React29.useCallback((data) => {
     setTooltipData({
       active: true,
       ...data
     });
   }, []);
-  const hideTooltip = React28.useCallback(() => {
+  const hideTooltip = React29.useCallback(() => {
     setTooltipData((prev) => ({
       ...prev,
       active: false
     }));
   }, []);
-  const updatePosition = React28.useCallback((x, y) => {
+  const updatePosition = React29.useCallback((x, y) => {
     setTooltipData((prev) => ({
       ...prev,
       x,
@@ -6379,7 +6615,7 @@ function useTooltip() {
 }
 
 // src/charts/components/Legend.tsx
-import { jsx as jsx111, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs39 } from "react/jsx-runtime";
 var Legend = ({
   items = [],
   layout = "horizontal",
@@ -6403,7 +6639,7 @@ var Legend = ({
     const style = { backgroundColor: item.color };
     switch (item.type) {
       case "line":
-        return /* @__PURE__ */ jsx111(
+        return /* @__PURE__ */ jsx112(
           "div",
           {
             className: "flex-shrink-0",
@@ -6415,7 +6651,7 @@ var Legend = ({
           }
         );
       case "circle":
-        return /* @__PURE__ */ jsx111(
+        return /* @__PURE__ */ jsx112(
           "div",
           {
             className: "rounded-full flex-shrink-0",
@@ -6429,7 +6665,7 @@ var Legend = ({
       case "rect":
       case "square":
       default:
-        return /* @__PURE__ */ jsx111(
+        return /* @__PURE__ */ jsx112(
           "div",
           {
             className: "rounded-sm flex-shrink-0",
@@ -6442,12 +6678,12 @@ var Legend = ({
         );
     }
   };
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx112(
     "div",
     {
       className: `flex gap-4 px-4 py-2 ${layoutClass} ${alignClass} ${className}`,
       style: wrapperStyle,
-      children: items.map((item, index) => /* @__PURE__ */ jsxs38(
+      children: items.map((item, index) => /* @__PURE__ */ jsxs39(
         "button",
         {
           type: "button",
@@ -6461,7 +6697,7 @@ var Legend = ({
           onMouseLeave,
           children: [
             renderIcon(item),
-            /* @__PURE__ */ jsx111("span", { className: "text-[hsl(var(--foreground))]", children: formatter ? formatter(item.name, item, index) : item.name })
+            /* @__PURE__ */ jsx112("span", { className: "text-[hsl(var(--foreground))]", children: formatter ? formatter(item.name, item, index) : item.name })
           ]
         },
         `${item.name}-${index}`
@@ -6471,7 +6707,7 @@ var Legend = ({
 };
 
 // src/charts/components/ReferenceLine.tsx
-import { jsx as jsx112, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx113, jsxs as jsxs40 } from "react/jsx-runtime";
 var ReferenceLine = ({
   x,
   y,
@@ -6583,8 +6819,8 @@ var ReferenceLine = ({
   } else {
     return null;
   }
-  return /* @__PURE__ */ jsxs39("g", { className: `reference-line ${className}`, children: [
-    /* @__PURE__ */ jsx112(
+  return /* @__PURE__ */ jsxs40("g", { className: `reference-line ${className}`, children: [
+    /* @__PURE__ */ jsx113(
       "line",
       {
         x1,
@@ -6596,7 +6832,7 @@ var ReferenceLine = ({
         strokeDasharray
       }
     ),
-    label && (typeof label === "string" ? /* @__PURE__ */ jsx112(
+    label && (typeof label === "string" ? /* @__PURE__ */ jsx113(
       "text",
       {
         x: labelX,
@@ -6608,7 +6844,7 @@ var ReferenceLine = ({
         className: "fill-[hsl(var(--muted-foreground))]",
         children: label
       }
-    ) : /* @__PURE__ */ jsx112(
+    ) : /* @__PURE__ */ jsx113(
       "foreignObject",
       {
         x: labelX - 50,
@@ -6622,7 +6858,7 @@ var ReferenceLine = ({
 };
 
 // src/charts/components/ReferenceArea.tsx
-import { jsx as jsx113, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx114, jsxs as jsxs41 } from "react/jsx-runtime";
 var ReferenceArea = ({
   x1,
   x2,
@@ -6730,8 +6966,8 @@ var ReferenceArea = ({
       labelX = rectX + rectWidth / 2;
       labelY = rectY + rectHeight / 2;
   }
-  return /* @__PURE__ */ jsxs40("g", { className: `reference-area ${className}`, children: [
-    /* @__PURE__ */ jsx113(
+  return /* @__PURE__ */ jsxs41("g", { className: `reference-area ${className}`, children: [
+    /* @__PURE__ */ jsx114(
       "rect",
       {
         x: rectX,
@@ -6744,7 +6980,7 @@ var ReferenceArea = ({
         strokeWidth
       }
     ),
-    label && (typeof label === "string" ? /* @__PURE__ */ jsx113(
+    label && (typeof label === "string" ? /* @__PURE__ */ jsx114(
       "text",
       {
         x: labelX,
@@ -6756,7 +6992,7 @@ var ReferenceArea = ({
         className: "fill-[hsl(var(--muted-foreground))]",
         children: label
       }
-    ) : /* @__PURE__ */ jsx113(
+    ) : /* @__PURE__ */ jsx114(
       "foreignObject",
       {
         x: labelX - 50,
@@ -6771,7 +7007,7 @@ var ReferenceArea = ({
 
 // src/charts/components/CartesianGrid.tsx
 import { useMemo } from "react";
-import { jsx as jsx114, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx115, jsxs as jsxs42 } from "react/jsx-runtime";
 var CartesianGrid = ({
   horizontal = true,
   vertical = true,
@@ -6798,8 +7034,8 @@ var CartesianGrid = ({
     const count = 6;
     return Array.from({ length: count + 1 }, (_, i) => width / count * i);
   }, [verticalPoints, width]);
-  return /* @__PURE__ */ jsxs41("g", { className: `cartesian-grid ${className}`, children: [
-    horizontal && hPoints.map((y, i) => /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsxs42("g", { className: `cartesian-grid ${className}`, children: [
+    horizontal && hPoints.map((y, i) => /* @__PURE__ */ jsx115(
       "line",
       {
         x1: 0,
@@ -6814,7 +7050,7 @@ var CartesianGrid = ({
       },
       `h-${i}`
     )),
-    vertical && vPoints.map((x, i) => /* @__PURE__ */ jsx114(
+    vertical && vPoints.map((x, i) => /* @__PURE__ */ jsx115(
       "line",
       {
         x1: x,
@@ -6833,7 +7069,7 @@ var CartesianGrid = ({
 };
 
 // src/charts/LineChart.tsx
-import { jsx as jsx115, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx116, jsxs as jsxs43 } from "react/jsx-runtime";
 var LineChart = ({
   data,
   width: providedWidth,
@@ -6869,10 +7105,10 @@ var LineChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef12(null);
-  const svgRef = useRef12(null);
-  const [hoveredPoint, setHoveredPoint] = useState20(null);
-  const [crosshairX, setCrosshairX] = useState20(null);
+  const containerRef = useRef13(null);
+  const svgRef = useRef13(null);
+  const [hoveredPoint, setHoveredPoint] = useState21(null);
+  const [crosshairX, setCrosshairX] = useState21(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -6967,7 +7203,7 @@ var LineChart = ({
     const ticks = getTicks(xDomainCalc, tickCount);
     return ticks.map((t) => ({ value: t, index: 0 }));
   }, [xValueType, xDomainCalc, data]);
-  const xFormatter = useCallback4((value) => {
+  const xFormatter = useCallback5((value) => {
     if (formatXValue) return formatXValue(value);
     if (value instanceof Date) {
       const range = xDomainCalc[1] - xDomainCalc[0];
@@ -7004,7 +7240,7 @@ var LineChart = ({
       return { points, path };
     });
   }, [data, xScale, yScale]);
-  const handlePointEnter = useCallback4((e, seriesIndex, pointIndex) => {
+  const handlePointEnter = useCallback5((e, seriesIndex, pointIndex) => {
     const series = data[seriesIndex];
     const point = series.data[pointIndex];
     const scaledPoint = seriesPaths[seriesIndex].points[pointIndex];
@@ -7031,13 +7267,13 @@ var LineChart = ({
     }
     onPointHover?.(point, seriesIndex, pointIndex);
   }, [data, seriesPaths, showCrosshair, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
-  const handlePointLeave = useCallback4(() => {
+  const handlePointLeave = useCallback5(() => {
     setHoveredPoint(null);
     setCrosshairX(null);
     hideTooltip();
     onPointHover?.(null, -1, -1);
   }, [hideTooltip, onPointHover]);
-  const handlePointClick = useCallback4((seriesIndex, pointIndex) => {
+  const handlePointClick = useCallback5((seriesIndex, pointIndex) => {
     const point = data[seriesIndex].data[pointIndex];
     onPointClick?.(point, seriesIndex, pointIndex);
   }, [data, onPointClick]);
@@ -7066,10 +7302,10 @@ var LineChart = ({
       },
       yScale
     };
-    return React30.Children.map(children, (child) => {
-      if (!React30.isValidElement(child)) return child;
+    return React31.Children.map(children, (child) => {
+      if (!React31.isValidElement(child)) return child;
       if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
-        return React30.cloneElement(child, {
+        return React31.cloneElement(child, {
           _chartDimensions: chartDimensions,
           _scales: scales
         });
@@ -7082,14 +7318,14 @@ var LineChart = ({
     const seriesNames = data.map((s) => s.name).join(", ");
     return `Line chart with ${data.length} series: ${seriesNames}`;
   }, [data, ariaLabel]);
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     "div",
     {
       ref: containerRef,
       className: `relative ${className}`,
       style: containerStyle,
       children: [
-        /* @__PURE__ */ jsxs42(
+        /* @__PURE__ */ jsxs43(
           "svg",
           {
             ref: svgRef,
@@ -7102,14 +7338,14 @@ var LineChart = ({
             className: "bg-[hsl(var(--card))]",
             style: svgStyle,
             children: [
-              /* @__PURE__ */ jsx115("defs", { children: animate && data.map((series, i) => /* @__PURE__ */ jsx115("style", { children: `
+              /* @__PURE__ */ jsx116("defs", { children: animate && data.map((series, i) => /* @__PURE__ */ jsx116("style", { children: `
               @keyframes drawLine${i} {
                 from { stroke-dashoffset: 2000; }
                 to { stroke-dashoffset: 0; }
               }
             ` }, `anim-${i}`)) }),
-              /* @__PURE__ */ jsxs42("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-                showGrid && /* @__PURE__ */ jsx115(
+              /* @__PURE__ */ jsxs43("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+                showGrid && /* @__PURE__ */ jsx116(
                   CartesianGrid,
                   {
                     _chartDimensions: { width: chartWidth, height: chartHeight },
@@ -7117,7 +7353,7 @@ var LineChart = ({
                   }
                 ),
                 referenceElements,
-                showCrosshair && crosshairX !== null && /* @__PURE__ */ jsx115(
+                showCrosshair && crosshairX !== null && /* @__PURE__ */ jsx116(
                   "line",
                   {
                     x1: crosshairX,
@@ -7135,7 +7371,7 @@ var LineChart = ({
                   const { path } = seriesPaths[seriesIndex];
                   const color = series.color || colors[seriesIndex % colors.length];
                   const strokeWidth = series.strokeWidth || CHART_DEFAULTS.line.strokeWidth;
-                  return /* @__PURE__ */ jsx115(
+                  return /* @__PURE__ */ jsx116(
                     "path",
                     {
                       d: path,
@@ -7160,7 +7396,7 @@ var LineChart = ({
                   return points.map((point, pointIndex) => {
                     const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
                     const animateDots = animate && !isResponsive;
-                    return /* @__PURE__ */ jsx115(
+                    return /* @__PURE__ */ jsx116(
                       "circle",
                       {
                         cx: point.x,
@@ -7188,8 +7424,8 @@ var LineChart = ({
                   const lastScaled = points[points.length - 1];
                   const color = series.color || colors[seriesIndex % colors.length];
                   if (!lastPoint || !lastScaled) return null;
-                  return /* @__PURE__ */ jsxs42("g", { children: [
-                    /* @__PURE__ */ jsx115(
+                  return /* @__PURE__ */ jsxs43("g", { children: [
+                    /* @__PURE__ */ jsx116(
                       "circle",
                       {
                         cx: chartWidth + 12,
@@ -7198,7 +7434,7 @@ var LineChart = ({
                         fill: color
                       }
                     ),
-                    /* @__PURE__ */ jsx115(
+                    /* @__PURE__ */ jsx116(
                       "text",
                       {
                         x: chartWidth + 22,
@@ -7212,8 +7448,8 @@ var LineChart = ({
                     )
                   ] }, `label-${seriesIndex}`);
                 }),
-                showXAxis && /* @__PURE__ */ jsxs42("g", { transform: `translate(0, ${chartHeight})`, children: [
-                  /* @__PURE__ */ jsx115(
+                showXAxis && /* @__PURE__ */ jsxs43("g", { transform: `translate(0, ${chartHeight})`, children: [
+                  /* @__PURE__ */ jsx116(
                     "line",
                     {
                       x1: 0,
@@ -7226,9 +7462,9 @@ var LineChart = ({
                   ),
                   xTicks.map((tick, i) => {
                     const x = xValueType === "string" ? xScale(tick.value, tick.index) : xScale(xValueType === "date" ? new Date(tick.value) : tick.value, 0);
-                    return /* @__PURE__ */ jsxs42("g", { transform: `translate(${x}, 0)`, children: [
-                      /* @__PURE__ */ jsx115("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
-                      /* @__PURE__ */ jsx115(
+                    return /* @__PURE__ */ jsxs43("g", { transform: `translate(${x}, 0)`, children: [
+                      /* @__PURE__ */ jsx116("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
+                      /* @__PURE__ */ jsx116(
                         "text",
                         {
                           y: 20,
@@ -7240,7 +7476,7 @@ var LineChart = ({
                       )
                     ] }, `x-tick-${i}`);
                   }),
-                  xAxisLabel && /* @__PURE__ */ jsx115(
+                  xAxisLabel && /* @__PURE__ */ jsx116(
                     "text",
                     {
                       x: chartWidth / 2,
@@ -7253,8 +7489,8 @@ var LineChart = ({
                     }
                   )
                 ] }),
-                showYAxis && /* @__PURE__ */ jsxs42("g", { children: [
-                  /* @__PURE__ */ jsx115(
+                showYAxis && /* @__PURE__ */ jsxs43("g", { children: [
+                  /* @__PURE__ */ jsx116(
                     "line",
                     {
                       x1: 0,
@@ -7265,9 +7501,9 @@ var LineChart = ({
                       strokeWidth: 1
                     }
                   ),
-                  yTicks.map((tick, i) => /* @__PURE__ */ jsxs42("g", { transform: `translate(0, ${yScale(tick)})`, children: [
-                    /* @__PURE__ */ jsx115("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
-                    /* @__PURE__ */ jsx115(
+                  yTicks.map((tick, i) => /* @__PURE__ */ jsxs43("g", { transform: `translate(0, ${yScale(tick)})`, children: [
+                    /* @__PURE__ */ jsx116("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
+                    /* @__PURE__ */ jsx116(
                       "text",
                       {
                         x: -12,
@@ -7279,7 +7515,7 @@ var LineChart = ({
                       }
                     )
                   ] }, `y-tick-${i}`)),
-                  yAxisLabel && /* @__PURE__ */ jsx115(
+                  yAxisLabel && /* @__PURE__ */ jsx116(
                     "text",
                     {
                       x: -chartHeight / 2,
@@ -7294,7 +7530,7 @@ var LineChart = ({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsx115("style", { children: `
+              /* @__PURE__ */ jsx116("style", { children: `
           @keyframes fadeIn {
             from { opacity: 0; }
             to { opacity: 1; }
@@ -7303,7 +7539,7 @@ var LineChart = ({
             ]
           }
         ),
-        showLegend && /* @__PURE__ */ jsx115(
+        showLegend && /* @__PURE__ */ jsx116(
           Legend,
           {
             items: legendItems,
@@ -7311,7 +7547,7 @@ var LineChart = ({
             align: "center"
           }
         ),
-        showTooltip && /* @__PURE__ */ jsx115(
+        showTooltip && /* @__PURE__ */ jsx116(
           ChartTooltip,
           {
             ...tooltipData,
@@ -7327,8 +7563,8 @@ var LineChart = ({
 };
 
 // src/charts/BarChart.tsx
-import React31, { useMemo as useMemo3, useCallback as useCallback5, useRef as useRef13, useState as useState21 } from "react";
-import { jsx as jsx116, jsxs as jsxs43 } from "react/jsx-runtime";
+import React32, { useMemo as useMemo3, useCallback as useCallback6, useRef as useRef14, useState as useState22 } from "react";
+import { jsx as jsx117, jsxs as jsxs44 } from "react/jsx-runtime";
 var BarChart = ({
   data,
   width: providedWidth,
@@ -7364,8 +7600,8 @@ var BarChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef13(null);
-  const [hoveredBar, setHoveredBar] = useState21(null);
+  const containerRef = useRef14(null);
+  const [hoveredBar, setHoveredBar] = useState22(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -7434,7 +7670,7 @@ var BarChart = ({
   const numSeries = data.length;
   const bandwidth = xBandScale.bandwidth();
   const barWidth = stacked ? bandwidth : (bandwidth - bandwidth * barGap * (numSeries - 1)) / numSeries;
-  const handleBarEnter = useCallback5((e, seriesIndex, barIndex) => {
+  const handleBarEnter = useCallback6((e, seriesIndex, barIndex) => {
     const series = data[seriesIndex];
     const point = series.data[barIndex];
     setHoveredBar({ seriesIndex, barIndex });
@@ -7457,12 +7693,12 @@ var BarChart = ({
     }
     onBarHover?.(point, seriesIndex, barIndex);
   }, [data, showTooltip, colors, showTooltipFn, onBarHover]);
-  const handleBarLeave = useCallback5(() => {
+  const handleBarLeave = useCallback6(() => {
     setHoveredBar(null);
     hideTooltip();
     onBarHover?.(null, -1, -1);
   }, [hideTooltip, onBarHover]);
-  const handleBarClick = useCallback5((seriesIndex, barIndex) => {
+  const handleBarClick = useCallback6((seriesIndex, barIndex) => {
     const point = data[seriesIndex].data[barIndex];
     onBarClick?.(point, seriesIndex, barIndex);
   }, [data, onBarClick]);
@@ -7514,7 +7750,7 @@ var BarChart = ({
         }
         const isHovered = hoveredBar?.seriesIndex === seriesIndex && hoveredBar?.barIndex === barIndex;
         result.push(
-          /* @__PURE__ */ jsx116(
+          /* @__PURE__ */ jsx117(
             "rect",
             {
               x: barX,
@@ -7542,7 +7778,7 @@ var BarChart = ({
           const labelX = horizontal ? barX + barW + 8 : barX + barW / 2;
           const labelY = horizontal ? barY + barH / 2 : barY - 8;
           result.push(
-            /* @__PURE__ */ jsx116(
+            /* @__PURE__ */ jsx117(
               "text",
               {
                 x: labelX,
@@ -7593,10 +7829,10 @@ var BarChart = ({
       xScale: (value) => xBandScale.scale(String(value)) + bandwidth / 2,
       yScale
     };
-    return React31.Children.map(children, (child) => {
-      if (!React31.isValidElement(child)) return child;
+    return React32.Children.map(children, (child) => {
+      if (!React32.isValidElement(child)) return child;
       if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
-        return React31.cloneElement(child, {
+        return React32.cloneElement(child, {
           _chartDimensions: chartDimensions,
           _scales: scales
         });
@@ -7609,14 +7845,14 @@ var BarChart = ({
     const seriesNames = data.map((s) => s.name).join(", ");
     return `Bar chart with ${data.length} series: ${seriesNames}`;
   }, [data, ariaLabel]);
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       ref: containerRef,
       className: `relative ${className}`,
       style: containerStyle,
       children: [
-        /* @__PURE__ */ jsxs43(
+        /* @__PURE__ */ jsxs44(
           "svg",
           {
             width: svgWidth,
@@ -7628,7 +7864,7 @@ var BarChart = ({
             className: "bg-[hsl(var(--card))]",
             style: svgStyle,
             children: [
-              /* @__PURE__ */ jsx116("defs", { children: /* @__PURE__ */ jsx116("style", { children: `
+              /* @__PURE__ */ jsx117("defs", { children: /* @__PURE__ */ jsx117("style", { children: `
             @keyframes growY {
               from { transform: scaleY(0); }
               to { transform: scaleY(1); }
@@ -7642,8 +7878,8 @@ var BarChart = ({
               to { opacity: 1; }
             }
           ` }) }),
-              /* @__PURE__ */ jsxs43("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-                showGrid && /* @__PURE__ */ jsx116(
+              /* @__PURE__ */ jsxs44("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+                showGrid && /* @__PURE__ */ jsx117(
                   CartesianGrid,
                   {
                     _chartDimensions: { width: chartWidth, height: chartHeight },
@@ -7655,8 +7891,8 @@ var BarChart = ({
                 ),
                 referenceElements,
                 bars,
-                showXAxis && /* @__PURE__ */ jsxs43("g", { transform: `translate(0, ${chartHeight})`, children: [
-                  /* @__PURE__ */ jsx116(
+                showXAxis && /* @__PURE__ */ jsxs44("g", { transform: `translate(0, ${chartHeight})`, children: [
+                  /* @__PURE__ */ jsx117(
                     "line",
                     {
                       x1: 0,
@@ -7668,9 +7904,9 @@ var BarChart = ({
                   ),
                   categories.map((cat, i) => {
                     const x = xBandScale.scale(cat) + bandwidth / 2;
-                    return /* @__PURE__ */ jsxs43("g", { transform: `translate(${x}, 0)`, children: [
-                      /* @__PURE__ */ jsx116("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
-                      /* @__PURE__ */ jsx116(
+                    return /* @__PURE__ */ jsxs44("g", { transform: `translate(${x}, 0)`, children: [
+                      /* @__PURE__ */ jsx117("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
+                      /* @__PURE__ */ jsx117(
                         "text",
                         {
                           y: 20,
@@ -7682,7 +7918,7 @@ var BarChart = ({
                       )
                     ] }, `x-tick-${i}`);
                   }),
-                  xAxisLabel && /* @__PURE__ */ jsx116(
+                  xAxisLabel && /* @__PURE__ */ jsx117(
                     "text",
                     {
                       x: chartWidth / 2,
@@ -7695,8 +7931,8 @@ var BarChart = ({
                     }
                   )
                 ] }),
-                showYAxis && /* @__PURE__ */ jsxs43("g", { children: [
-                  /* @__PURE__ */ jsx116(
+                showYAxis && /* @__PURE__ */ jsxs44("g", { children: [
+                  /* @__PURE__ */ jsx117(
                     "line",
                     {
                       x1: 0,
@@ -7706,9 +7942,9 @@ var BarChart = ({
                       className: "stroke-[hsl(var(--border))]"
                     }
                   ),
-                  yTicks.map((tick, i) => /* @__PURE__ */ jsxs43("g", { transform: `translate(0, ${yScale(tick)})`, children: [
-                    /* @__PURE__ */ jsx116("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
-                    /* @__PURE__ */ jsx116(
+                  yTicks.map((tick, i) => /* @__PURE__ */ jsxs44("g", { transform: `translate(0, ${yScale(tick)})`, children: [
+                    /* @__PURE__ */ jsx117("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
+                    /* @__PURE__ */ jsx117(
                       "text",
                       {
                         x: -12,
@@ -7720,7 +7956,7 @@ var BarChart = ({
                       }
                     )
                   ] }, `y-tick-${i}`)),
-                  yAxisLabel && /* @__PURE__ */ jsx116(
+                  yAxisLabel && /* @__PURE__ */ jsx117(
                     "text",
                     {
                       x: -chartHeight / 2,
@@ -7738,8 +7974,8 @@ var BarChart = ({
             ]
           }
         ),
-        showLegend && /* @__PURE__ */ jsx116(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
-        showTooltip && /* @__PURE__ */ jsx116(
+        showLegend && /* @__PURE__ */ jsx117(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
+        showTooltip && /* @__PURE__ */ jsx117(
           ChartTooltip,
           {
             ...tooltipData,
@@ -7753,8 +7989,8 @@ var BarChart = ({
 };
 
 // src/charts/AreaChart.tsx
-import React32, { useMemo as useMemo4, useCallback as useCallback6, useRef as useRef14, useState as useState22 } from "react";
-import { jsx as jsx117, jsxs as jsxs44 } from "react/jsx-runtime";
+import React33, { useMemo as useMemo4, useCallback as useCallback7, useRef as useRef15, useState as useState23, useId as useId2 } from "react";
+import { jsx as jsx118, jsxs as jsxs45 } from "react/jsx-runtime";
 var AreaChart = ({
   data,
   width: providedWidth,
@@ -7789,8 +8025,9 @@ var AreaChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef14(null);
-  const [hoveredPoint, setHoveredPoint] = useState22(null);
+  const containerRef = useRef15(null);
+  const chartId = useId2();
+  const [hoveredPoint, setHoveredPoint] = useState23(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -7892,7 +8129,7 @@ var AreaChart = ({
     const ticks = getTicks(xDomainCalc, tickCount);
     return ticks.map((t) => ({ value: t, index: 0 }));
   }, [xValueType, xDomainCalc, data]);
-  const xFormatter = useCallback6((value) => {
+  const xFormatter = useCallback7((value) => {
     if (formatXValue) return formatXValue(value);
     if (value instanceof Date) {
       const range = xDomainCalc[1] - xDomainCalc[0];
@@ -7938,7 +8175,7 @@ var AreaChart = ({
     });
     return paths;
   }, [data, xScale, yScale, stacked, curved]);
-  const handlePointEnter = useCallback6((e, seriesIndex, pointIndex) => {
+  const handlePointEnter = useCallback7((e, seriesIndex, pointIndex) => {
     const series = data[seriesIndex];
     const point = series.data[pointIndex];
     setHoveredPoint({ seriesIndex, pointIndex });
@@ -7961,12 +8198,12 @@ var AreaChart = ({
     }
     onPointHover?.(point, seriesIndex, pointIndex);
   }, [data, showTooltip, colors, xFormatter, showTooltipFn, onPointHover]);
-  const handlePointLeave = useCallback6(() => {
+  const handlePointLeave = useCallback7(() => {
     setHoveredPoint(null);
     hideTooltip();
     onPointHover?.(null, -1, -1);
   }, [hideTooltip, onPointHover]);
-  const handlePointClick = useCallback6((seriesIndex, pointIndex) => {
+  const handlePointClick = useCallback7((seriesIndex, pointIndex) => {
     const point = data[seriesIndex].data[pointIndex];
     onPointClick?.(point, seriesIndex, pointIndex);
   }, [data, onPointClick]);
@@ -7991,10 +8228,10 @@ var AreaChart = ({
       },
       yScale
     };
-    return React32.Children.map(children, (child) => {
-      if (!React32.isValidElement(child)) return child;
+    return React33.Children.map(children, (child) => {
+      if (!React33.isValidElement(child)) return child;
       if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
-        return React32.cloneElement(child, {
+        return React33.cloneElement(child, {
           _chartDimensions: chartDimensions,
           _scales: scales
         });
@@ -8007,14 +8244,14 @@ var AreaChart = ({
     const seriesNames = data.map((s) => s.name).join(", ");
     return `Area chart with ${data.length} series: ${seriesNames}`;
   }, [data, ariaLabel]);
-  return /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45(
     "div",
     {
       ref: containerRef,
       className: `relative ${className}`,
       style: containerStyle,
       children: [
-        /* @__PURE__ */ jsxs44(
+        /* @__PURE__ */ jsxs45(
           "svg",
           {
             width: svgWidth,
@@ -8026,26 +8263,26 @@ var AreaChart = ({
             className: "bg-[hsl(var(--card))]",
             style: svgStyle,
             children: [
-              /* @__PURE__ */ jsxs44("defs", { children: [
+              /* @__PURE__ */ jsxs45("defs", { children: [
                 data.map((series, i) => {
                   const color = series.color || colors[i % colors.length];
-                  return /* @__PURE__ */ jsxs44(
+                  return /* @__PURE__ */ jsxs45(
                     "linearGradient",
                     {
-                      id: `area-gradient-${i}`,
+                      id: `area-gradient-${chartId}-${i}`,
                       x1: "0",
                       y1: "0",
                       x2: "0",
                       y2: "1",
                       children: [
-                        /* @__PURE__ */ jsx117("stop", { offset: "0%", stopColor: color, stopOpacity: series.fillOpacity ?? fillOpacity }),
-                        /* @__PURE__ */ jsx117("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
+                        /* @__PURE__ */ jsx118("stop", { offset: "0%", stopColor: color, stopOpacity: series.fillOpacity ?? fillOpacity }),
+                        /* @__PURE__ */ jsx118("stop", { offset: "100%", stopColor: color, stopOpacity: 0.05 })
                       ]
                     },
                     `gradient-${i}`
                   );
                 }),
-                /* @__PURE__ */ jsx117("style", { children: `
+                /* @__PURE__ */ jsx118("style", { children: `
             @keyframes fadeIn {
               from { opacity: 0; }
               to { opacity: 1; }
@@ -8056,8 +8293,8 @@ var AreaChart = ({
             }
           ` })
               ] }),
-              /* @__PURE__ */ jsxs44("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-                showGrid && /* @__PURE__ */ jsx117(
+              /* @__PURE__ */ jsxs45("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+                showGrid && /* @__PURE__ */ jsx118(
                   CartesianGrid,
                   {
                     _chartDimensions: { width: chartWidth, height: chartHeight },
@@ -8070,19 +8307,19 @@ var AreaChart = ({
                   const { areaPath, linePath } = areaPaths[seriesIndex];
                   const color = series.color || colors[seriesIndex % colors.length];
                   const strokeWidth = series.strokeWidth || CHART_DEFAULTS.line.strokeWidth;
-                  return /* @__PURE__ */ jsxs44("g", { children: [
-                    /* @__PURE__ */ jsx117(
+                  return /* @__PURE__ */ jsxs45("g", { children: [
+                    /* @__PURE__ */ jsx118(
                       "path",
                       {
                         d: areaPath,
-                        fill: `url(#area-gradient-${seriesIndex})`,
+                        fill: `url(#area-gradient-${chartId}-${seriesIndex})`,
                         style: animate ? {
                           opacity: 0,
                           animation: `fadeIn ${animationDuration}ms ease-out forwards`
                         } : void 0
                       }
                     ),
-                    /* @__PURE__ */ jsx117(
+                    /* @__PURE__ */ jsx118(
                       "path",
                       {
                         d: linePath,
@@ -8106,7 +8343,7 @@ var AreaChart = ({
                   if (!showSeriesDots) return null;
                   return points.map((point, pointIndex) => {
                     const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
-                    return /* @__PURE__ */ jsx117(
+                    return /* @__PURE__ */ jsx118(
                       "circle",
                       {
                         cx: point.x,
@@ -8128,8 +8365,8 @@ var AreaChart = ({
                     );
                   });
                 }),
-                showXAxis && /* @__PURE__ */ jsxs44("g", { transform: `translate(0, ${chartHeight})`, children: [
-                  /* @__PURE__ */ jsx117(
+                showXAxis && /* @__PURE__ */ jsxs45("g", { transform: `translate(0, ${chartHeight})`, children: [
+                  /* @__PURE__ */ jsx118(
                     "line",
                     {
                       x1: 0,
@@ -8141,9 +8378,9 @@ var AreaChart = ({
                   ),
                   xTicks.map((tick, i) => {
                     const x = xValueType === "string" ? xScale(tick.value, tick.index) : xScale(xValueType === "date" ? new Date(tick.value) : tick.value, 0);
-                    return /* @__PURE__ */ jsxs44("g", { transform: `translate(${x}, 0)`, children: [
-                      /* @__PURE__ */ jsx117("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
-                      /* @__PURE__ */ jsx117(
+                    return /* @__PURE__ */ jsxs45("g", { transform: `translate(${x}, 0)`, children: [
+                      /* @__PURE__ */ jsx118("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
+                      /* @__PURE__ */ jsx118(
                         "text",
                         {
                           y: 20,
@@ -8155,7 +8392,7 @@ var AreaChart = ({
                       )
                     ] }, `x-tick-${i}`);
                   }),
-                  xAxisLabel && /* @__PURE__ */ jsx117(
+                  xAxisLabel && /* @__PURE__ */ jsx118(
                     "text",
                     {
                       x: chartWidth / 2,
@@ -8168,8 +8405,8 @@ var AreaChart = ({
                     }
                   )
                 ] }),
-                showYAxis && /* @__PURE__ */ jsxs44("g", { children: [
-                  /* @__PURE__ */ jsx117(
+                showYAxis && /* @__PURE__ */ jsxs45("g", { children: [
+                  /* @__PURE__ */ jsx118(
                     "line",
                     {
                       x1: 0,
@@ -8179,9 +8416,9 @@ var AreaChart = ({
                       className: "stroke-[hsl(var(--border))]"
                     }
                   ),
-                  yTicks.map((tick, i) => /* @__PURE__ */ jsxs44("g", { transform: `translate(0, ${yScale(tick)})`, children: [
-                    /* @__PURE__ */ jsx117("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
-                    /* @__PURE__ */ jsx117(
+                  yTicks.map((tick, i) => /* @__PURE__ */ jsxs45("g", { transform: `translate(0, ${yScale(tick)})`, children: [
+                    /* @__PURE__ */ jsx118("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
+                    /* @__PURE__ */ jsx118(
                       "text",
                       {
                         x: -12,
@@ -8193,7 +8430,7 @@ var AreaChart = ({
                       }
                     )
                   ] }, `y-tick-${i}`)),
-                  yAxisLabel && /* @__PURE__ */ jsx117(
+                  yAxisLabel && /* @__PURE__ */ jsx118(
                     "text",
                     {
                       x: -chartHeight / 2,
@@ -8211,8 +8448,8 @@ var AreaChart = ({
             ]
           }
         ),
-        showLegend && /* @__PURE__ */ jsx117(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
-        showTooltip && /* @__PURE__ */ jsx117(
+        showLegend && /* @__PURE__ */ jsx118(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
+        showTooltip && /* @__PURE__ */ jsx118(
           ChartTooltip,
           {
             ...tooltipData,
@@ -8226,8 +8463,8 @@ var AreaChart = ({
 };
 
 // src/charts/PieChart.tsx
-import { useMemo as useMemo5, useCallback as useCallback7, useRef as useRef15, useState as useState23 } from "react";
-import { jsx as jsx118, jsxs as jsxs45 } from "react/jsx-runtime";
+import { useMemo as useMemo5, useCallback as useCallback8, useRef as useRef16, useState as useState24 } from "react";
+import { jsx as jsx119, jsxs as jsxs46 } from "react/jsx-runtime";
 var PieChart = ({
   data,
   width: providedWidth,
@@ -8260,9 +8497,9 @@ var PieChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef15(null);
-  const [hoveredSlice, setHoveredSlice] = useState23(null);
-  const [activeSlice, setActiveSlice] = useState23(null);
+  const containerRef = useRef16(null);
+  const [hoveredSlice, setHoveredSlice] = useState24(null);
+  const [activeSlice, setActiveSlice] = useState24(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -8329,7 +8566,7 @@ var PieChart = ({
       };
     });
   }, [data, total, startAngle, endAngle, paddingAngle, centerX, centerY, outerRadius, innerRadius, isDonut, colors]);
-  const handleSliceEnter = useCallback7((e, index) => {
+  const handleSliceEnter = useCallback8((e, index) => {
     const slice = slices[index];
     setHoveredSlice(index);
     if (showTooltip && containerRef.current) {
@@ -8351,16 +8588,16 @@ var PieChart = ({
     }
     onSliceHover?.(data[index], index);
   }, [slices, data, showTooltip, showTooltipFn, onSliceHover]);
-  const handleSliceLeave = useCallback7(() => {
+  const handleSliceLeave = useCallback8(() => {
     setHoveredSlice(null);
     hideTooltip();
     onSliceHover?.(null, -1);
   }, [hideTooltip, onSliceHover]);
-  const handleSliceClick = useCallback7((index) => {
+  const handleSliceClick = useCallback8((index) => {
     setActiveSlice((prev) => prev === index ? null : index);
     onSliceClick?.(data[index], index);
   }, [data, onSliceClick]);
-  const getLabelText = useCallback7((slice) => {
+  const getLabelText = useCallback8((slice) => {
     if (labelFormatter) {
       return labelFormatter(data[slice.index], slice.percent);
     }
@@ -8388,14 +8625,14 @@ var PieChart = ({
     const sliceNames = data.map((d) => `${d.label}: ${d.value}`).join(", ");
     return `${isDonut ? "Donut" : "Pie"} chart with ${data.length} slices: ${sliceNames}`;
   }, [data, isDonut, ariaLabel]);
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     "div",
     {
       ref: containerRef,
       className: `relative inline-flex flex-col items-center ${className}`,
       style: containerStyle,
       children: [
-        /* @__PURE__ */ jsxs45(
+        /* @__PURE__ */ jsxs46(
           "svg",
           {
             width: svgWidth,
@@ -8407,7 +8644,7 @@ var PieChart = ({
             className: "bg-[hsl(var(--card))]",
             style: svgStyle,
             children: [
-              /* @__PURE__ */ jsx118("defs", { children: /* @__PURE__ */ jsx118("style", { children: `
+              /* @__PURE__ */ jsx119("defs", { children: /* @__PURE__ */ jsx119("style", { children: `
             @keyframes rotateIn {
               from {
                 transform: rotate(-90deg);
@@ -8423,7 +8660,7 @@ var PieChart = ({
               to { opacity: 1; }
             }
           ` }) }),
-              /* @__PURE__ */ jsx118("g", { style: animate ? {
+              /* @__PURE__ */ jsx119("g", { style: animate ? {
                 transformOrigin: `${centerX}px ${centerY}px`,
                 animation: `rotateIn ${animationDuration}ms ease-out forwards`
               } : void 0, children: slices.map((slice) => {
@@ -8431,8 +8668,8 @@ var PieChart = ({
                 const isActive = activeSlice === slice.index;
                 const scale = isHovered || isActive ? 1.03 : 1;
                 const transform = `translate(${centerX}px, ${centerY}px) scale(${scale}) translate(${-centerX}px, ${-centerY}px)`;
-                return /* @__PURE__ */ jsxs45("g", { children: [
-                  /* @__PURE__ */ jsx118(
+                return /* @__PURE__ */ jsxs46("g", { children: [
+                  /* @__PURE__ */ jsx119(
                     "path",
                     {
                       d: slice.path,
@@ -8446,7 +8683,7 @@ var PieChart = ({
                       onClick: () => handleSliceClick(slice.index)
                     }
                   ),
-                  showLabels && slice.percent >= minLabelPercent && /* @__PURE__ */ jsx118(
+                  showLabels && slice.percent >= minLabelPercent && /* @__PURE__ */ jsx119(
                     "text",
                     {
                       x: slice.labelX,
@@ -8465,8 +8702,8 @@ var PieChart = ({
                   )
                 ] }, slice.index);
               }) }),
-              isDonut && (centerLabel || centerValue !== void 0) && /* @__PURE__ */ jsxs45("g", { children: [
-                centerValue !== void 0 && /* @__PURE__ */ jsx118(
+              isDonut && (centerLabel || centerValue !== void 0) && /* @__PURE__ */ jsxs46("g", { children: [
+                centerValue !== void 0 && /* @__PURE__ */ jsx119(
                   "text",
                   {
                     x: centerX,
@@ -8479,7 +8716,7 @@ var PieChart = ({
                     children: typeof centerValue === "number" ? formatNumber(centerValue) : centerValue
                   }
                 ),
-                centerLabel && (typeof centerLabel === "string" ? /* @__PURE__ */ jsx118(
+                centerLabel && (typeof centerLabel === "string" ? /* @__PURE__ */ jsx119(
                   "text",
                   {
                     x: centerX,
@@ -8490,7 +8727,7 @@ var PieChart = ({
                     className: "fill-[hsl(var(--muted-foreground))]",
                     children: centerLabel
                   }
-                ) : /* @__PURE__ */ jsx118(
+                ) : /* @__PURE__ */ jsx119(
                   "foreignObject",
                   {
                     x: centerX - innerRadius * 0.7,
@@ -8504,7 +8741,7 @@ var PieChart = ({
             ]
           }
         ),
-        showLegend && /* @__PURE__ */ jsx118(
+        showLegend && /* @__PURE__ */ jsx119(
           Legend,
           {
             items: legendItems,
@@ -8515,7 +8752,7 @@ var PieChart = ({
             onMouseLeave: () => setHoveredSlice(null)
           }
         ),
-        showTooltip && /* @__PURE__ */ jsx118(
+        showTooltip && /* @__PURE__ */ jsx119(
           ChartTooltip,
           {
             ...tooltipData,
@@ -8529,8 +8766,8 @@ var PieChart = ({
 };
 
 // src/charts/ScatterChart.tsx
-import React34, { useMemo as useMemo6, useCallback as useCallback8, useRef as useRef16, useState as useState24 } from "react";
-import { jsx as jsx119, jsxs as jsxs46 } from "react/jsx-runtime";
+import React35, { useMemo as useMemo6, useCallback as useCallback9, useRef as useRef17, useState as useState25 } from "react";
+import { jsx as jsx120, jsxs as jsxs47 } from "react/jsx-runtime";
 function linearRegression(points) {
   const n = points.length;
   if (n === 0) return { slope: 0, intercept: 0 };
@@ -8551,7 +8788,7 @@ var renderShape = (shape, x, y, size, color, commonProps) => {
   const { className, stroke, strokeWidth, onMouseEnter, onMouseLeave, onClick } = commonProps;
   switch (shape) {
     case "square":
-      return /* @__PURE__ */ jsx119(
+      return /* @__PURE__ */ jsx120(
         "rect",
         {
           x: x - size / 2,
@@ -8570,7 +8807,7 @@ var renderShape = (shape, x, y, size, color, commonProps) => {
     case "triangle": {
       const h = size * 0.866;
       const points = `${x},${y - h / 2} ${x - size / 2},${y + h / 2} ${x + size / 2},${y + h / 2}`;
-      return /* @__PURE__ */ jsx119(
+      return /* @__PURE__ */ jsx120(
         "polygon",
         {
           points,
@@ -8587,7 +8824,7 @@ var renderShape = (shape, x, y, size, color, commonProps) => {
     case "diamond": {
       const d = size / 1.414;
       const diamondPoints = `${x},${y - d} ${x + d},${y} ${x},${y + d} ${x - d},${y}`;
-      return /* @__PURE__ */ jsx119(
+      return /* @__PURE__ */ jsx120(
         "polygon",
         {
           points: diamondPoints,
@@ -8603,7 +8840,7 @@ var renderShape = (shape, x, y, size, color, commonProps) => {
     }
     case "circle":
     default:
-      return /* @__PURE__ */ jsx119(
+      return /* @__PURE__ */ jsx120(
         "circle",
         {
           cx: x,
@@ -8657,8 +8894,8 @@ var ScatterChart = ({
   colors = CHART_DEFAULTS.colors,
   ariaLabel
 }) => {
-  const containerRef = useRef16(null);
-  const [hoveredPoint, setHoveredPoint] = useState24(null);
+  const containerRef = useRef17(null);
+  const [hoveredPoint, setHoveredPoint] = useState25(null);
   const { tooltipData, showTooltip: showTooltipFn, hideTooltip } = useTooltip();
   const {
     width,
@@ -8745,7 +8982,7 @@ var ScatterChart = ({
       };
     });
   }, [data, showTrendLine, xDomainCalc, xScale, yScale]);
-  const handlePointEnter = useCallback8((e, seriesIndex, pointIndex) => {
+  const handlePointEnter = useCallback9((e, seriesIndex, pointIndex) => {
     const series = data[seriesIndex];
     const point = series.data[pointIndex];
     setHoveredPoint({ seriesIndex, pointIndex });
@@ -8769,12 +9006,12 @@ var ScatterChart = ({
     }
     onPointHover?.(point, seriesIndex, pointIndex);
   }, [data, showTooltip, colors, bubble, showTooltipFn, onPointHover]);
-  const handlePointLeave = useCallback8(() => {
+  const handlePointLeave = useCallback9(() => {
     setHoveredPoint(null);
     hideTooltip();
     onPointHover?.(null, -1, -1);
   }, [hideTooltip, onPointHover]);
-  const handlePointClick = useCallback8((seriesIndex, pointIndex) => {
+  const handlePointClick = useCallback9((seriesIndex, pointIndex) => {
     const point = data[seriesIndex].data[pointIndex];
     onPointClick?.(point, seriesIndex, pointIndex);
   }, [data, onPointClick]);
@@ -8790,10 +9027,10 @@ var ScatterChart = ({
     if (!children) return null;
     const chartDimensions = { width: chartWidth, height: chartHeight, padding };
     const scales = { xScale, yScale };
-    return React34.Children.map(children, (child) => {
-      if (!React34.isValidElement(child)) return child;
+    return React35.Children.map(children, (child) => {
+      if (!React35.isValidElement(child)) return child;
       if (child.type === ReferenceLine || child.type === ReferenceArea || child.type === CartesianGrid) {
-        return React34.cloneElement(child, {
+        return React35.cloneElement(child, {
           _chartDimensions: chartDimensions,
           _scales: scales
         });
@@ -8806,14 +9043,14 @@ var ScatterChart = ({
     const totalPoints = data.reduce((sum, s) => sum + s.data.length, 0);
     return `Scatter chart with ${data.length} series and ${totalPoints} data points`;
   }, [data, ariaLabel]);
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs47(
     "div",
     {
       ref: containerRef,
       className: `relative ${className}`,
       style: containerStyle,
       children: [
-        /* @__PURE__ */ jsxs46(
+        /* @__PURE__ */ jsxs47(
           "svg",
           {
             width: svgWidth,
@@ -8825,7 +9062,7 @@ var ScatterChart = ({
             className: "bg-[hsl(var(--card))]",
             style: svgStyle,
             children: [
-              /* @__PURE__ */ jsx119("defs", { children: /* @__PURE__ */ jsx119("style", { children: `
+              /* @__PURE__ */ jsx120("defs", { children: /* @__PURE__ */ jsx120("style", { children: `
             @keyframes popIn {
               from {
                 transform: scale(0);
@@ -8837,8 +9074,8 @@ var ScatterChart = ({
               }
             }
           ` }) }),
-              /* @__PURE__ */ jsxs46("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-                showGrid && /* @__PURE__ */ jsx119(
+              /* @__PURE__ */ jsxs47("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+                showGrid && /* @__PURE__ */ jsx120(
                   CartesianGrid,
                   {
                     _chartDimensions: { width: chartWidth, height: chartHeight },
@@ -8847,7 +9084,7 @@ var ScatterChart = ({
                   }
                 ),
                 referenceElements,
-                showTrendLine && trendLines.map((line, i) => /* @__PURE__ */ jsx119(
+                showTrendLine && trendLines.map((line, i) => /* @__PURE__ */ jsx120(
                   "line",
                   {
                     x1: line.x1,
@@ -8871,7 +9108,7 @@ var ScatterChart = ({
                     const size = bubble && point.z !== void 0 ? sizeScale(point.z) : baseSize;
                     const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
                     const displaySize = isHovered ? size * 1.3 : size;
-                    return /* @__PURE__ */ jsx119(
+                    return /* @__PURE__ */ jsx120(
                       "g",
                       {
                         style: animate ? {
@@ -8892,8 +9129,8 @@ var ScatterChart = ({
                     );
                   });
                 }),
-                showXAxis && /* @__PURE__ */ jsxs46("g", { transform: `translate(0, ${chartHeight})`, children: [
-                  /* @__PURE__ */ jsx119(
+                showXAxis && /* @__PURE__ */ jsxs47("g", { transform: `translate(0, ${chartHeight})`, children: [
+                  /* @__PURE__ */ jsx120(
                     "line",
                     {
                       x1: 0,
@@ -8903,9 +9140,9 @@ var ScatterChart = ({
                       className: "stroke-[hsl(var(--border))]"
                     }
                   ),
-                  xTicks.map((tick, i) => /* @__PURE__ */ jsxs46("g", { transform: `translate(${xScale(tick)}, 0)`, children: [
-                    /* @__PURE__ */ jsx119("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
-                    /* @__PURE__ */ jsx119(
+                  xTicks.map((tick, i) => /* @__PURE__ */ jsxs47("g", { transform: `translate(${xScale(tick)}, 0)`, children: [
+                    /* @__PURE__ */ jsx120("line", { y2: 6, className: "stroke-[hsl(var(--border))]" }),
+                    /* @__PURE__ */ jsx120(
                       "text",
                       {
                         y: 20,
@@ -8916,7 +9153,7 @@ var ScatterChart = ({
                       }
                     )
                   ] }, `x-tick-${i}`)),
-                  xAxisLabel && /* @__PURE__ */ jsx119(
+                  xAxisLabel && /* @__PURE__ */ jsx120(
                     "text",
                     {
                       x: chartWidth / 2,
@@ -8929,8 +9166,8 @@ var ScatterChart = ({
                     }
                   )
                 ] }),
-                showYAxis && /* @__PURE__ */ jsxs46("g", { children: [
-                  /* @__PURE__ */ jsx119(
+                showYAxis && /* @__PURE__ */ jsxs47("g", { children: [
+                  /* @__PURE__ */ jsx120(
                     "line",
                     {
                       x1: 0,
@@ -8940,9 +9177,9 @@ var ScatterChart = ({
                       className: "stroke-[hsl(var(--border))]"
                     }
                   ),
-                  yTicks.map((tick, i) => /* @__PURE__ */ jsxs46("g", { transform: `translate(0, ${yScale(tick)})`, children: [
-                    /* @__PURE__ */ jsx119("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
-                    /* @__PURE__ */ jsx119(
+                  yTicks.map((tick, i) => /* @__PURE__ */ jsxs47("g", { transform: `translate(0, ${yScale(tick)})`, children: [
+                    /* @__PURE__ */ jsx120("line", { x2: -6, className: "stroke-[hsl(var(--border))]" }),
+                    /* @__PURE__ */ jsx120(
                       "text",
                       {
                         x: -12,
@@ -8954,7 +9191,7 @@ var ScatterChart = ({
                       }
                     )
                   ] }, `y-tick-${i}`)),
-                  yAxisLabel && /* @__PURE__ */ jsx119(
+                  yAxisLabel && /* @__PURE__ */ jsx120(
                     "text",
                     {
                       x: -chartHeight / 2,
@@ -8972,8 +9209,8 @@ var ScatterChart = ({
             ]
           }
         ),
-        showLegend && /* @__PURE__ */ jsx119(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
-        showTooltip && /* @__PURE__ */ jsx119(
+        showLegend && /* @__PURE__ */ jsx120(Legend, { items: legendItems, layout: "horizontal", align: "center" }),
+        showTooltip && /* @__PURE__ */ jsx120(
           ChartTooltip,
           {
             ...tooltipData,
@@ -8987,8 +9224,8 @@ var ScatterChart = ({
 };
 
 // src/charts/components/ResponsiveContainer.tsx
-import React35, { useRef as useRef17, useState as useState25, useEffect as useEffect14, useCallback as useCallback9 } from "react";
-import { jsx as jsx120 } from "react/jsx-runtime";
+import React36, { useRef as useRef18, useState as useState26, useEffect as useEffect15, useCallback as useCallback10 } from "react";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var ResponsiveContainer = ({
   width = "100%",
   height,
@@ -9002,13 +9239,13 @@ var ResponsiveContainer = ({
   children,
   onResize
 }) => {
-  const containerRef = useRef17(null);
-  const [dimensions, setDimensions] = useState25({
+  const containerRef = useRef18(null);
+  const [dimensions, setDimensions] = useState26({
     width: 0,
     height: 0
   });
-  const debounceTimerRef = useRef17(null);
-  const calculateDimensions = useCallback9((containerWidth, containerHeight) => {
+  const debounceTimerRef = useRef18(null);
+  const calculateDimensions = useCallback10((containerWidth, containerHeight) => {
     let finalWidth = containerWidth;
     let finalHeight = containerHeight;
     if (aspect && !height) {
@@ -9024,7 +9261,7 @@ var ResponsiveContainer = ({
     }
     return { width: finalWidth, height: finalHeight };
   }, [aspect, height, minWidth, minHeight, maxWidth, maxHeight]);
-  const handleResize = useCallback9((entries) => {
+  const handleResize = useCallback10((entries) => {
     const entry = entries[0];
     if (!entry) return;
     const { width: containerWidth, height: containerHeight } = entry.contentRect;
@@ -9042,7 +9279,7 @@ var ResponsiveContainer = ({
       updateDimensions();
     }
   }, [calculateDimensions, debounce, onResize]);
-  useEffect14(() => {
+  useEffect15(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new ResizeObserver(handleResize);
@@ -9066,7 +9303,7 @@ var ResponsiveContainer = ({
     maxHeight: maxHeight ? `${maxHeight}px` : void 0
   };
   if (dimensions.width === 0 || dimensions.height === 0) {
-    return /* @__PURE__ */ jsx120(
+    return /* @__PURE__ */ jsx121(
       "div",
       {
         ref: containerRef,
@@ -9075,14 +9312,14 @@ var ResponsiveContainer = ({
       }
     );
   }
-  const chartElement = React35.cloneElement(
+  const chartElement = React36.cloneElement(
     children,
     {
       width: dimensions.width,
       height: dimensions.height
     }
   );
-  return /* @__PURE__ */ jsx120(
+  return /* @__PURE__ */ jsx121(
     "div",
     {
       ref: containerRef,
@@ -9094,8 +9331,8 @@ var ResponsiveContainer = ({
 };
 
 // src/components/Heatmap.tsx
-import React36, { useMemo as useMemo7, useState as useState26 } from "react";
-import { jsx as jsx121, jsxs as jsxs47 } from "react/jsx-runtime";
+import React37, { useMemo as useMemo7, useState as useState27 } from "react";
+import { jsx as jsx122, jsxs as jsxs48 } from "react/jsx-runtime";
 var COLOR_SCALES = {
   blue: {
     light: ["#eff6ff", "#dbeafe", "#bfdbfe", "#93c5fd", "#60a5fa", "#3b82f6", "#2563eb", "#1d4ed8", "#1e40af"],
@@ -9138,9 +9375,9 @@ var Heatmap = ({
   formatValue = (v) => v.toFixed(0),
   formatTooltip
 }) => {
-  const [hoveredCell, setHoveredCell] = useState26(null);
-  const [isDarkMode, setIsDarkMode] = useState26(false);
-  React36.useEffect(() => {
+  const [hoveredCell, setHoveredCell] = useState27(null);
+  const [isDarkMode, setIsDarkMode] = useState27(false);
+  React37.useEffect(() => {
     const checkDarkMode = () => {
       setIsDarkMode(document.documentElement.classList.contains("dark"));
     };
@@ -9200,15 +9437,15 @@ var Heatmap = ({
   const labelHeight = 30;
   const width = labelWidth + uniqueX.length * (cellSize + cellGap);
   const height = labelHeight + uniqueY.length * (cellSize + cellGap);
-  return /* @__PURE__ */ jsxs47("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsxs47(
+  return /* @__PURE__ */ jsxs48("div", { className: `relative inline-block ${className}`, children: [
+    /* @__PURE__ */ jsxs48(
       "svg",
       {
         width,
         height,
         className: "select-none",
         children: [
-          uniqueX.map((label, i) => /* @__PURE__ */ jsx121(
+          uniqueX.map((label, i) => /* @__PURE__ */ jsx122(
             "text",
             {
               x: labelWidth + i * (cellSize + cellGap) + cellSize / 2,
@@ -9220,7 +9457,7 @@ var Heatmap = ({
             },
             `x-${label}`
           )),
-          uniqueY.map((label, j) => /* @__PURE__ */ jsx121(
+          uniqueY.map((label, j) => /* @__PURE__ */ jsx122(
             "text",
             {
               x: labelWidth - 8,
@@ -9238,8 +9475,8 @@ var Heatmap = ({
               const point = data.find((d) => String(d.x) === xLabel && String(d.y) === yLabel);
               const x = labelWidth + i * (cellSize + cellGap);
               const y = labelHeight + j * (cellSize + cellGap);
-              return /* @__PURE__ */ jsxs47("g", { children: [
-                /* @__PURE__ */ jsx121(
+              return /* @__PURE__ */ jsxs48("g", { children: [
+                /* @__PURE__ */ jsx122(
                   "rect",
                   {
                     x,
@@ -9262,7 +9499,7 @@ var Heatmap = ({
                     }
                   }
                 ),
-                showValues && value !== void 0 && /* @__PURE__ */ jsx121(
+                showValues && value !== void 0 && /* @__PURE__ */ jsx122(
                   "text",
                   {
                     x: x + cellSize / 2,
@@ -9279,7 +9516,7 @@ var Heatmap = ({
         ]
       }
     ),
-    showTooltip && hoveredCell && /* @__PURE__ */ jsxs47(
+    showTooltip && hoveredCell && /* @__PURE__ */ jsxs48(
       "div",
       {
         className: "absolute z-50 px-3 py-2 text-sm bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] border border-[hsl(var(--border))] rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
@@ -9290,7 +9527,7 @@ var Heatmap = ({
         },
         children: [
           getTooltipContent(hoveredCell.point),
-          /* @__PURE__ */ jsx121(
+          /* @__PURE__ */ jsx122(
             "div",
             {
               className: "absolute w-2 h-2 bg-[hsl(var(--popover))] rotate-45",
@@ -9321,9 +9558,9 @@ var CalendarHeatmap = ({
   onCellClick,
   formatTooltip
 }) => {
-  const [hoveredCell, setHoveredCell] = useState26(null);
-  const [isDarkMode, setIsDarkMode] = useState26(false);
-  React36.useEffect(() => {
+  const [hoveredCell, setHoveredCell] = useState27(null);
+  const [isDarkMode, setIsDarkMode] = useState27(false);
+  React37.useEffect(() => {
     const checkDarkMode = () => {
       setIsDarkMode(document.documentElement.classList.contains("dark"));
     };
@@ -9392,9 +9629,9 @@ var CalendarHeatmap = ({
   const monthLabelHeight = showMonthLabels ? 20 : 0;
   const width = dayLabelWidth + weeks.length * (cellSize + cellGap);
   const height = monthLabelHeight + 7 * (cellSize + cellGap);
-  return /* @__PURE__ */ jsxs47("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsxs47("svg", { width, height, className: "select-none", children: [
-      showMonthLabels && monthLabels.map(({ label, weekIndex }, i) => /* @__PURE__ */ jsx121(
+  return /* @__PURE__ */ jsxs48("div", { className: `relative inline-block ${className}`, children: [
+    /* @__PURE__ */ jsxs48("svg", { width, height, className: "select-none", children: [
+      showMonthLabels && monthLabels.map(({ label, weekIndex }, i) => /* @__PURE__ */ jsx122(
         "text",
         {
           x: dayLabelWidth + weekIndex * (cellSize + cellGap),
@@ -9405,7 +9642,7 @@ var CalendarHeatmap = ({
         },
         `month-${i}`
       )),
-      showDayLabels && [1, 3, 5].map((dayIndex) => /* @__PURE__ */ jsx121(
+      showDayLabels && [1, 3, 5].map((dayIndex) => /* @__PURE__ */ jsx122(
         "text",
         {
           x: dayLabelWidth - 6,
@@ -9423,7 +9660,7 @@ var CalendarHeatmap = ({
           const value = dataMap.get(key);
           const x = dayLabelWidth + weekIndex * (cellSize + cellGap);
           const y = monthLabelHeight + dayIndex * (cellSize + cellGap);
-          return /* @__PURE__ */ jsx121(
+          return /* @__PURE__ */ jsx122(
             "rect",
             {
               x,
@@ -9448,7 +9685,7 @@ var CalendarHeatmap = ({
         })
       )
     ] }),
-    hoveredCell && /* @__PURE__ */ jsxs47(
+    hoveredCell && /* @__PURE__ */ jsxs48(
       "div",
       {
         className: "absolute z-50 px-3 py-2 text-sm bg-[hsl(var(--popover))] text-[hsl(var(--popover-foreground))] border border-[hsl(var(--border))] rounded-lg shadow-lg pointer-events-none whitespace-nowrap",
@@ -9459,7 +9696,7 @@ var CalendarHeatmap = ({
         },
         children: [
           getTooltipContent(hoveredCell.date, hoveredCell.value),
-          /* @__PURE__ */ jsx121(
+          /* @__PURE__ */ jsx122(
             "div",
             {
               className: "absolute w-2 h-2 bg-[hsl(var(--popover))] rotate-45",
@@ -9477,7 +9714,7 @@ var CalendarHeatmap = ({
 };
 
 // src/theme/ColorSchemeScript.tsx
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 function getColorSchemeScript(defaultColorMode, localStorageKey) {
   return `(function(){try{var d=document.documentElement,s=d.style,c=localStorage.getItem('${localStorageKey}')||'${defaultColorMode}',r=c;if(c==='system'||!c)r=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';d.setAttribute('data-color-mode',r);s.colorScheme=r;if(r==='dark'){d.classList.add('dark');s.setProperty('--background','0 0% 3.9%');s.setProperty('--foreground','0 0% 98%');s.setProperty('--card','0 0% 5.9%');s.setProperty('--card-foreground','0 0% 98%');s.setProperty('--popover','0 0% 5.9%');s.setProperty('--popover-foreground','0 0% 98%');s.setProperty('--muted','0 0% 14.9%');s.setProperty('--muted-foreground','0 0% 63.9%');s.setProperty('--border','0 0% 25%');s.setProperty('--input','0 0% 25%');s.setProperty('--primary','217 91% 60%');s.setProperty('--secondary','0 0% 14.9%');s.setProperty('--accent','0 0% 14.9%');s.backgroundColor='hsl(0,0%,3.9%)';s.color='hsl(0,0%,98%)'}else{d.classList.remove('dark');s.backgroundColor='hsl(0,0%,100%)';s.color='hsl(0,0%,3.9%)'}d.setAttribute('data-theme-initialized','true')}catch(e){}})()`;
 }
@@ -9487,7 +9724,7 @@ function ColorSchemeScript({
   nonce
 } = {}) {
   const scriptContent = getColorSchemeScript(defaultColorMode, localStorageKey);
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx123(
     "script",
     {
       nonce,
@@ -9598,6 +9835,7 @@ export {
   SaveIcon,
   ScatterChart,
   SearchIcon,
+  SegmentedControl,
   Select,
   SettingsIcon,
   ShieldIcon,