@marcoschwartz/lite-ui 0.11.0 → 0.16.0

package/dist/index.mjs

@@ -3182,6 +3182,7 @@ var RichTextEditor = ({
   const [showImageModal, setShowImageModal] = useState12(false);
   const [imageUrl, setImageUrl] = useState12("");
   const [imageAlt, setImageAlt] = useState12("");
+  const savedSelection = useRef7(null);
   useLayoutEffect(() => {
     const styleId = "rich-text-editor-styles";
     if (!document.getElementById(styleId)) {
@@ -3208,6 +3209,15 @@ var RichTextEditor = ({
           font-weight: bold;
           margin: 0.83em 0;
         }
+        [contenteditable] p {
+          margin: 0.5em 0;
+        }
+        [contenteditable] p:first-child {
+          margin-top: 0;
+        }
+        [contenteditable] p:last-child {
+          margin-bottom: 0;
+        }
         [contenteditable] ul, [contenteditable] ol {
           margin: 1em 0;
           padding-left: 2em;
@@ -3236,11 +3246,60 @@ var RichTextEditor = ({
     }
   }, []);
   const isInitialRender = useRef7(true);
+  const isInternalUpdate = useRef7(false);
   useEffect8(() => {
-    if (!isInitialRender.current && editorRef.current && editorRef.current.innerHTML !== value) {
+    if (isInitialRender.current && editorRef.current) {
       editorRef.current.innerHTML = value;
+      isInitialRender.current = false;
+      try {
+        document.execCommand("defaultParagraphSeparator", false, "p");
+      } catch (e) {
+        console.warn("Could not set defaultParagraphSeparator", e);
+      }
     }
-    isInitialRender.current = false;
+  }, []);
+  useEffect8(() => {
+    if (!isInitialRender.current && !isInternalUpdate.current && editorRef.current) {
+      const currentHtml = editorRef.current.innerHTML;
+      if (currentHtml !== value) {
+        const selection = window.getSelection();
+        const range = selection && selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
+        const preSelectionRange = range ? range.cloneRange() : null;
+        if (preSelectionRange && editorRef.current.contains(preSelectionRange.startContainer)) {
+          preSelectionRange.selectNodeContents(editorRef.current);
+          preSelectionRange.setEnd(range.startContainer, range.startOffset);
+          const start = preSelectionRange.toString().length;
+          editorRef.current.innerHTML = value;
+          const textNodes = [];
+          const getTextNodes = (node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+              textNodes.push(node);
+            } else {
+              node.childNodes.forEach(getTextNodes);
+            }
+          };
+          getTextNodes(editorRef.current);
+          let charCount = 0;
+          let foundStart = false;
+          for (const textNode of textNodes) {
+            const textLength = textNode.textContent?.length || 0;
+            if (!foundStart && charCount + textLength >= start) {
+              const newRange = document.createRange();
+              newRange.setStart(textNode, start - charCount);
+              newRange.collapse(true);
+              selection?.removeAllRanges();
+              selection?.addRange(newRange);
+              foundStart = true;
+              break;
+            }
+            charCount += textLength;
+          }
+        } else {
+          editorRef.current.innerHTML = value;
+        }
+      }
+    }
+    isInternalUpdate.current = false;
   }, [value]);
   const updateActiveFormats = useCallback(() => {
     const formats = /* @__PURE__ */ new Set();
@@ -3261,10 +3320,25 @@ var RichTextEditor = ({
   }, []);
   const handleInput = useCallback(() => {
     if (editorRef.current && onChange) {
+      isInternalUpdate.current = true;
       onChange(editorRef.current.innerHTML);
     }
     updateActiveFormats();
   }, [onChange, updateActiveFormats]);
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    if (editorRef.current && (!editorRef.current.innerHTML || editorRef.current.innerHTML === "")) {
+      editorRef.current.innerHTML = "<p><br></p>";
+      const selection = window.getSelection();
+      const range = document.createRange();
+      if (editorRef.current.firstChild) {
+        range.setStart(editorRef.current.firstChild, 0);
+        range.collapse(true);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+      }
+    }
+  }, []);
   const handleFormat = useCallback((command) => {
     if (disabled) return;
     document.execCommand(command, false);
@@ -3288,16 +3362,29 @@ var RichTextEditor = ({
   }, [disabled, updateActiveFormats, handleInput]);
   const handleLink = useCallback(() => {
     if (disabled) return;
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      savedSelection.current = selection.getRangeAt(0).cloneRange();
+    }
     setShowLinkModal(true);
   }, [disabled]);
   const insertLink = useCallback(() => {
-    if (linkUrl) {
-      document.execCommand("createLink", false, linkUrl);
-      setShowLinkModal(false);
-      setLinkUrl("");
-      editorRef.current?.focus();
-      handleInput();
+    if (!linkUrl || !editorRef.current) return;
+    const selection = window.getSelection();
+    if (savedSelection.current && selection) {
+      try {
+        selection.removeAllRanges();
+        selection.addRange(savedSelection.current);
+        document.execCommand("createLink", false, linkUrl);
+        savedSelection.current = null;
+      } catch (e) {
+        console.warn("Could not insert link at saved position", e);
+      }
     }
+    setShowLinkModal(false);
+    setLinkUrl("");
+    editorRef.current?.focus();
+    handleInput();
   }, [linkUrl, handleInput]);
   const handleCode = useCallback(() => {
     if (disabled) return;
@@ -3317,33 +3404,82 @@ var RichTextEditor = ({
   }, [disabled, handleInput]);
   const handleImage = useCallback(() => {
     if (disabled) return;
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      savedSelection.current = selection.getRangeAt(0).cloneRange();
+    }
     setShowImageModal(true);
   }, [disabled]);
   const insertImage = useCallback(() => {
-    if (!imageUrl) return;
+    if (!imageUrl || !editorRef.current) return;
+    editorRef.current.focus();
     const img = document.createElement("img");
     img.src = imageUrl;
     img.alt = imageAlt || "";
     img.style.maxWidth = "100%";
     img.style.height = "auto";
     const selection = window.getSelection();
-    if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0);
-      range.deleteContents();
-      range.insertNode(img);
-      range.setStartAfter(img);
-      range.setEndAfter(img);
-      selection.removeAllRanges();
-      selection.addRange(range);
-    } else if (editorRef.current) {
-      editorRef.current.appendChild(img);
+    if (savedSelection.current && selection && editorRef.current.contains(savedSelection.current.commonAncestorContainer)) {
+      try {
+        selection.removeAllRanges();
+        selection.addRange(savedSelection.current);
+        savedSelection.current.deleteContents();
+        savedSelection.current.insertNode(img);
+        const br = document.createElement("br");
+        savedSelection.current.setStartAfter(img);
+        savedSelection.current.insertNode(br);
+        savedSelection.current.setStartAfter(br);
+        savedSelection.current.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(savedSelection.current);
+        savedSelection.current = null;
+      } catch (e) {
+        console.warn("Could not insert at saved position", e);
+        if (selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0);
+          if (editorRef.current.contains(range.commonAncestorContainer)) {
+            range.insertNode(img);
+            const br = document.createElement("br");
+            range.setStartAfter(img);
+            range.insertNode(br);
+            range.setStartAfter(br);
+            range.collapse(true);
+          } else {
+            editorRef.current.appendChild(img);
+            editorRef.current.appendChild(document.createElement("br"));
+          }
+        } else {
+          editorRef.current.appendChild(img);
+          editorRef.current.appendChild(document.createElement("br"));
+        }
+      }
+    } else {
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        if (editorRef.current.contains(range.commonAncestorContainer)) {
+          range.deleteContents();
+          range.insertNode(img);
+          const br = document.createElement("br");
+          range.setStartAfter(img);
+          range.insertNode(br);
+          range.setStartAfter(br);
+          range.collapse(true);
+          selection.removeAllRanges();
+          selection.addRange(range);
+        } else {
+          editorRef.current.appendChild(img);
+          editorRef.current.appendChild(document.createElement("br"));
+        }
+      } else {
+        editorRef.current.appendChild(img);
+        editorRef.current.appendChild(document.createElement("br"));
+      }
     }
     setShowImageModal(false);
     setImageUrl("");
     setImageAlt("");
-    editorRef.current?.focus();
     handleInput();
-  }, [imageUrl, imageAlt, handleInput, disabled]);
+  }, [imageUrl, imageAlt, handleInput]);
   const getButtonClass = (isActive) => {
     const baseClass = themeName === "minimalistic" ? "border border-white text-white transition-colors" : "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 transition-colors";
     const activeClass = themeName === "minimalistic" ? "bg-white text-black" : "bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-400";
@@ -3507,11 +3643,10 @@ var RichTextEditor = ({
         ref: editorRef,
         contentEditable: !disabled,
         onInput: handleInput,
-        onFocus: () => setIsFocused(true),
+        onFocus: handleFocus,
         onBlur: () => setIsFocused(false),
         onMouseUp: updateActiveFormats,
         onKeyUp: updateActiveFormats,
-        dangerouslySetInnerHTML: { __html: value },
         className: `
           w-full px-4 py-3 rounded-b-lg outline-none overflow-y-auto
           ${editorBaseClass} ${focusClass} ${errorClass}
@@ -5000,8 +5135,10 @@ var defaultColors = [
 ];
 var LineChart = ({
   data,
-  width = 600,
-  height = 400,
+  width: providedWidth,
+  height: providedHeight,
+  aspectRatio = 16 / 9,
+  responsive = true,
   showGrid = true,
   showXAxis = true,
   showYAxis = true,
@@ -5012,12 +5149,32 @@ var LineChart = ({
   strokeWidth = 2,
   className = "",
   xAxisLabel,
-  yAxisLabel
+  yAxisLabel,
+  baseFontSize = 14
 }) => {
+  const viewBoxWidth = 1e3;
+  const viewBoxHeight = 600;
+  const containerRef = React26.useRef(null);
+  const svgRef = React26.useRef(null);
+  const [tooltipPosition, setTooltipPosition] = React26.useState(null);
   const [hoveredPoint, setHoveredPoint] = React26.useState(null);
-  const padding = { top: 20, right: 20, bottom: showXAxis ? 60 : 20, left: showYAxis ? 60 : 20 };
-  const chartWidth = width - padding.left - padding.right;
-  const chartHeight = height - padding.top - padding.bottom;
+  const chartId = React26.useId();
+  const wrapperClass = `chart-svg-wrapper-${chartId.replace(/:/g, "-")}`;
+  const gridLabelClass = `chart-grid-label-${chartId.replace(/:/g, "-")}`;
+  const axisLabelClass = `chart-axis-label-${chartId.replace(/:/g, "-")}`;
+  const lineClass = `chart-line-${chartId.replace(/:/g, "-")}`;
+  const pointClass = `chart-point-${chartId.replace(/:/g, "-")}`;
+  const padding = {
+    top: 50,
+    right: 50,
+    bottom: showXAxis ? 120 : 50,
+    left: showYAxis ? 130 : 50
+  };
+  const chartWidth = viewBoxWidth - padding.left - padding.right;
+  const chartHeight = viewBoxHeight - padding.top - padding.bottom;
+  const gridLabelFontSize = viewBoxWidth * 0.045;
+  const axisLabelFontSize = viewBoxWidth * 0.05;
+  const titleFontSize = viewBoxWidth * 0.055;
   const allPoints = data.flatMap((series) => series.data);
   const allYValues = allPoints.map((p) => p.y);
   const firstXValue = data[0]?.data[0]?.x;
@@ -5030,7 +5187,7 @@ var LineChart = ({
   const minY = Math.min(0, ...allYValues);
   const maxY = Math.max(...allYValues);
   const yRange = maxY - minY;
-  const yMin = minY - yRange * 0.1;
+  const yMin = Math.max(0, minY - yRange * 0.1);
   const yMax = maxY + yRange * 0.1;
   const scaleX = (x, index) => {
     const numX = isStringX ? index : x;
@@ -5077,28 +5234,32 @@ var LineChart = ({
               x2: chartWidth,
               y2: y,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showYAxis && /* @__PURE__ */ jsx108(
             "text",
             {
-              x: -10,
-              y: y + 4,
+              x: -25,
+              y,
               textAnchor: "end",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              dominantBaseline: "middle",
+              fontSize: gridLabelFontSize,
+              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
               children: yValue.toFixed(1)
             }
           )
         ] }, `grid-h-${i}`)
       );
     }
-    const numXGridLines = Math.min(allPoints.length, 6);
+    const numXGridLines = Math.max(2, Math.min(allPoints.length, 6));
+    const xGridStep = numXGridLines > 1 ? 1 / (numXGridLines - 1) : 0;
     for (let i = 0; i < numXGridLines; i++) {
-      const x = chartWidth / (numXGridLines - 1) * i;
-      const xValue = data[0]?.data[Math.floor((data[0].data.length - 1) * (i / (numXGridLines - 1)))]?.x || "";
+      const x = chartWidth * (i * xGridStep);
+      const dataIndex = Math.floor((data[0]?.data.length - 1) * (i * xGridStep));
+      const xValue = data[0]?.data[Math.max(0, Math.min(dataIndex, data[0].data.length - 1))]?.x || "";
       gridLines.push(
         /* @__PURE__ */ jsxs35("g", { children: [
           /* @__PURE__ */ jsx108(
@@ -5109,18 +5270,20 @@ var LineChart = ({
               x2: x,
               y2: chartHeight,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showXAxis && /* @__PURE__ */ jsx108(
             "text",
             {
               x,
-              y: chartHeight + 20,
+              y: chartHeight + 35,
               textAnchor: "middle",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              dominantBaseline: "hanging",
+              fontSize: gridLabelFontSize,
+              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
               children: xValue
             }
           )
@@ -5128,108 +5291,197 @@ var LineChart = ({
       );
     }
   }
-  return /* @__PURE__ */ jsxs35("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsx108(
-      "svg",
-      {
-        width,
-        height,
-        className: "bg-white dark:bg-gray-800",
-        style: { overflow: "visible" },
-        children: /* @__PURE__ */ jsxs35("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-          gridLines,
-          data.map((series, seriesIndex) => /* @__PURE__ */ jsx108(
-            "path",
-            {
-              d: generatePath(series),
-              fill: "none",
-              stroke: series.color || defaultColors[seriesIndex % defaultColors.length],
-              strokeWidth,
-              strokeLinecap: "round",
-              strokeLinejoin: "round"
-            },
-            `line-${seriesIndex}`
-          )),
-          showDots && data.map(
-            (series, seriesIndex) => series.data.map((point, pointIndex) => {
-              const x = scaleX(point.x, pointIndex);
-              const y = scaleY(point.y);
-              const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
-              return /* @__PURE__ */ jsx108(
-                "circle",
+  const getTooltipPosition = React26.useCallback((x, y) => {
+    if (!containerRef.current) return { x, y };
+    const rect = containerRef.current.getBoundingClientRect();
+    const tooltipWidth = 120;
+    const tooltipHeight = 80;
+    let tooltipX = x + 10;
+    let tooltipY = y - 30;
+    if (tooltipX + tooltipWidth > rect.width) {
+      tooltipX = x - tooltipWidth - 10;
+    }
+    if (tooltipY + tooltipHeight > rect.height) {
+      tooltipY = y + 30;
+    }
+    return { x: tooltipX, y: tooltipY };
+  }, []);
+  const containerStyle = {
+    "--font-size-base": `${baseFontSize}px`,
+    "--font-size-lg": `calc(var(--font-size-base) * 1.125)`,
+    "--font-size-sm": `calc(var(--font-size-base) * 0.875)`,
+    "--font-size-xs": `calc(var(--font-size-base) * 0.75)`
+  };
+  return /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: {
+        ...containerStyle
+      },
+      children: [
+        /* @__PURE__ */ jsx108("style", { children: `
+        /* Mobile: Large fonts, hidden axis titles, thicker lines (default) */
+        .${gridLabelClass} { font-size: ${gridLabelFontSize}px !important; }
+        .${axisLabelClass} { display: none; }
+        .${lineClass} { stroke-width: ${strokeWidth * 2.5} !important; }
+        .${pointClass} { r: 6 !important; stroke-width: 3 !important; }
+
+        /* Tablet: Medium fonts, show axis titles, medium lines */
+        @media (min-width: 640px) {
+          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.7}px !important; }
+          .${axisLabelClass} {
+            font-size: ${axisLabelFontSize * 0.7}px !important;
+            display: block;
+          }
+          .${lineClass} { stroke-width: ${strokeWidth * 1.5} !important; }
+          .${pointClass} { r: 4 !important; stroke-width: 2 !important; }
+        }
+
+        /* Desktop: Small fonts, show axis titles, normal lines */
+        @media (min-width: 1024px) {
+          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.4}px !important; }
+          .${axisLabelClass} {
+            font-size: ${axisLabelFontSize * 0.4}px !important;
+            display: block;
+          }
+          .${lineClass} { stroke-width: ${strokeWidth} !important; }
+          .${pointClass} { r: 3 !important; stroke-width: 1.5 !important; }
+        }
+      ` }),
+        /* @__PURE__ */ jsx108(
+          "svg",
+          {
+            ref: svgRef,
+            width: "100%",
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
+            preserveAspectRatio: "xMidYMid meet",
+            className: "bg-white dark:bg-gray-800 block w-full",
+            style: { height: "auto", overflow: "visible" },
+            children: /* @__PURE__ */ jsxs35("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+              gridLines,
+              data.map((series, seriesIndex) => /* @__PURE__ */ jsx108(
+                "path",
                 {
-                  cx: x,
-                  cy: y,
-                  r: isHovered ? 6 : 4,
-                  fill: series.color || defaultColors[seriesIndex % defaultColors.length],
-                  stroke: "white",
-                  strokeWidth: "2",
-                  className: "cursor-pointer transition-all",
-                  onMouseEnter: () => showTooltip && setHoveredPoint({ seriesIndex, pointIndex, x, y }),
-                  onMouseLeave: () => setHoveredPoint(null)
+                  d: generatePath(series),
+                  fill: "none",
+                  stroke: series.color || defaultColors[seriesIndex % defaultColors.length],
+                  strokeWidth,
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: lineClass
                 },
-                `point-${seriesIndex}-${pointIndex}`
-              );
-            })
-          ),
-          xAxisLabel && showXAxis && /* @__PURE__ */ jsx108(
-            "text",
+                `line-${seriesIndex}`
+              )),
+              showDots && data.map(
+                (series, seriesIndex) => series.data.map((point, pointIndex) => {
+                  const x = scaleX(point.x, pointIndex);
+                  const y = scaleY(point.y);
+                  const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
+                  return /* @__PURE__ */ jsx108(
+                    "circle",
+                    {
+                      cx: x,
+                      cy: y,
+                      r: isHovered ? 5 : 3,
+                      fill: series.color || defaultColors[seriesIndex % defaultColors.length],
+                      stroke: "white",
+                      strokeWidth: "1.5",
+                      className: `cursor-pointer transition-all ${pointClass}`,
+                      onMouseEnter: (e) => {
+                        if (showTooltip && containerRef.current) {
+                          setHoveredPoint({ seriesIndex, pointIndex, x, y });
+                          const containerRect = containerRef.current.getBoundingClientRect();
+                          const mouseX = e.clientX - containerRect.left;
+                          const mouseY = e.clientY - containerRect.top;
+                          setTooltipPosition(getTooltipPosition(mouseX, mouseY));
+                        }
+                      },
+                      onMouseMove: (e) => {
+                        if (showTooltip && hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex && containerRef.current) {
+                          const containerRect = containerRef.current.getBoundingClientRect();
+                          const mouseX = e.clientX - containerRect.left;
+                          const mouseY = e.clientY - containerRect.top;
+                          setTooltipPosition(getTooltipPosition(mouseX, mouseY));
+                        }
+                      },
+                      onMouseLeave: () => {
+                        setHoveredPoint(null);
+                        setTooltipPosition(null);
+                      }
+                    },
+                    `point-${seriesIndex}-${pointIndex}`
+                  );
+                })
+              ),
+              xAxisLabel && showXAxis && /* @__PURE__ */ jsx108(
+                "text",
+                {
+                  x: chartWidth / 2,
+                  y: chartHeight + 80,
+                  textAnchor: "middle",
+                  dominantBaseline: "hanging",
+                  fontSize: axisLabelFontSize,
+                  fontWeight: "600",
+                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
+                  children: xAxisLabel
+                }
+              ),
+              yAxisLabel && showYAxis && /* @__PURE__ */ jsx108(
+                "text",
+                {
+                  x: -chartHeight / 2,
+                  y: -100,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  fontSize: axisLabelFontSize,
+                  fontWeight: "600",
+                  transform: "rotate(-90)",
+                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
+                  children: yAxisLabel
+                }
+              )
+            ] })
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx108("div", { className: "flex flex-wrap gap-3 justify-center px-4", children: data.map((series, index) => /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx108(
+            "div",
             {
-              x: chartWidth / 2,
-              y: chartHeight + 50,
-              textAnchor: "middle",
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: xAxisLabel
+              className: "w-3 h-3 rounded-sm flex-shrink-0",
+              style: {
+                backgroundColor: series.color || defaultColors[index % defaultColors.length]
+              }
             }
           ),
-          yAxisLabel && showYAxis && /* @__PURE__ */ jsx108(
-            "text",
-            {
-              x: -chartHeight / 2,
-              y: -45,
-              textAnchor: "middle",
-              transform: `rotate(-90, 0, 0)`,
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: yAxisLabel
-            }
-          )
-        ] })
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsx108("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx108(
-        "div",
-        {
-          className: "w-4 h-4 rounded-sm",
-          style: {
-            backgroundColor: series.color || defaultColors[index % defaultColors.length]
+          /* @__PURE__ */ jsx108("span", { className: "text-gray-700 dark:text-gray-300", children: series.name })
+        ] }, `legend-${index}`)) }),
+        showTooltip && hoveredPoint && tooltipPosition && /* @__PURE__ */ jsxs35(
+          "div",
+          {
+            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg pointer-events-none z-50 text-sm whitespace-nowrap",
+            style: {
+              left: `${tooltipPosition.x}px`,
+              top: `${tooltipPosition.y}px`,
+              transform: "translateZ(0)"
+            },
+            children: [
+              /* @__PURE__ */ jsx108("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
+              /* @__PURE__ */ jsxs35("div", { className: "text-xs opacity-90", children: [
+                "x: ",
+                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
+              ] }),
+              /* @__PURE__ */ jsxs35("div", { className: "text-xs opacity-90", children: [
+                "y: ",
+                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
+              ] })
+            ]
           }
-        }
-      ),
-      /* @__PURE__ */ jsx108("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
-    ] }, `legend-${index}`)) }),
-    showTooltip && hoveredPoint && /* @__PURE__ */ jsxs35(
-      "div",
-      {
-        className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg text-sm pointer-events-none z-50",
-        style: {
-          left: `${padding.left + hoveredPoint.x + 10}px`,
-          top: `${padding.top + hoveredPoint.y - 30}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx108("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            "x: ",
-            data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
-          ] }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            "y: ",
-            data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
-          ] })
-        ]
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 
 // src/components/BarChart.tsx
@@ -5251,8 +5503,10 @@ var defaultColors2 = [
 ];
 var BarChart = ({
   data,
-  width = 600,
-  height = 400,
+  width: providedWidth,
+  height: providedHeight,
+  aspectRatio = 16 / 9,
+  responsive = true,
   showGrid = true,
   showXAxis = true,
   showYAxis = true,
@@ -5264,24 +5518,38 @@ var BarChart = ({
   barWidth = 0.8,
   className = "",
   xAxisLabel,
-  yAxisLabel
+  yAxisLabel,
+  baseFontSize = 14,
+  colors = defaultColors2
 }) => {
+  const viewBoxWidth = 1e3;
+  const viewBoxHeight = 600;
+  const containerRef = React27.useRef(null);
+  const [tooltipPosition, setTooltipPosition] = React27.useState(null);
   const [hoveredBar, setHoveredBar] = React27.useState(null);
+  const chartId = React27.useId();
+  const wrapperClass = `chart-svg-wrapper-${chartId.replace(/:/g, "-")}`;
+  const gridLabelClass = `chart-grid-label-${chartId.replace(/:/g, "-")}`;
+  const axisLabelClass = `chart-axis-label-${chartId.replace(/:/g, "-")}`;
+  const barClass = `chart-bar-${chartId.replace(/:/g, "-")}`;
   const padding = {
-    top: 20,
-    right: 20,
-    bottom: showXAxis ? horizontal ? 60 : 80 : 20,
-    left: showYAxis ? horizontal ? 80 : 60 : 20
+    top: 50,
+    right: 50,
+    bottom: showXAxis ? horizontal ? 120 : 140 : 50,
+    left: showYAxis ? horizontal ? 140 : 130 : 50
   };
-  const chartWidth = width - padding.left - padding.right;
-  const chartHeight = height - padding.top - padding.bottom;
+  const chartWidth = viewBoxWidth - padding.left - padding.right;
+  const chartHeight = viewBoxHeight - padding.top - padding.bottom;
+  const gridLabelFontSize = viewBoxWidth * 0.045;
+  const axisLabelFontSize = viewBoxWidth * 0.05;
+  const titleFontSize = viewBoxWidth * 0.055;
   const allYValues = stacked ? data[0]?.data.map(
     (_, i) => data.reduce((sum, series) => sum + (series.data[i]?.y || 0), 0)
   ) || [] : data.flatMap((series) => series.data.map((p) => p.y));
   const minY = Math.min(0, ...allYValues);
   const maxY = Math.max(...allYValues);
   const yRange = maxY - minY;
-  const yMin = minY - yRange * 0.1;
+  const yMin = Math.max(0, minY - yRange * 0.1);
   const yMax = maxY + yRange * 0.1;
   const numBars = data[0]?.data.length || 0;
   const numSeries = data.length;
@@ -5308,18 +5576,20 @@ var BarChart = ({
               x2: chartWidth,
               y2: y,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showYAxis && !horizontal && /* @__PURE__ */ jsx109(
             "text",
             {
-              x: -10,
-              y: y + 4,
+              x: -25,
+              y,
               textAnchor: "end",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              dominantBaseline: "middle",
+              fontSize: gridLabelFontSize,
+              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
               children: yValue.toFixed(0)
             }
           )
@@ -5368,12 +5638,20 @@ var BarChart = ({
                 x: xPos,
                 y: yPos,
                 width: barW,
-                height: barHeight,
-                fill: data[seriesIndex].color || defaultColors2[seriesIndex % defaultColors2.length],
-                className: "cursor-pointer transition-opacity",
+                height: Math.abs(scaleY(0) - yPos),
+                fill: data[seriesIndex].color || colors[seriesIndex % colors.length],
+                className: `cursor-pointer transition-opacity ${barClass}`,
                 opacity: isHovered ? 0.8 : 1,
-                onMouseEnter: () => showTooltip && setHoveredBar({ seriesIndex, barIndex, x: xPos + barW / 2, y: yPos }),
-                onMouseLeave: () => setHoveredBar(null)
+                onMouseEnter: () => {
+                  if (showTooltip) {
+                    setHoveredBar({ seriesIndex, barIndex, x: xPos + barW / 2, y: yPos });
+                    setTooltipPosition(getTooltipPosition(padding.left + xPos + barW / 2, padding.top + yPos));
+                  }
+                },
+                onMouseLeave: () => {
+                  setHoveredBar(null);
+                  setTooltipPosition(null);
+                }
               },
               `bar-${seriesIndex}-${barIndex}`
             )
@@ -5398,8 +5676,8 @@ var BarChart = ({
                 y: yPos,
                 width: actualBarWidth,
                 height: barHeight,
-                fill: data[seriesIndex].color || defaultColors2[seriesIndex % defaultColors2.length],
-                className: "cursor-pointer transition-opacity",
+                fill: data[seriesIndex].color || colors[seriesIndex % colors.length],
+                className: `cursor-pointer transition-opacity ${barClass}`,
                 opacity: isHovered ? 0.8 : 1,
                 onMouseEnter: () => showTooltip && setHoveredBar({ seriesIndex, barIndex, x: xPos + actualBarWidth / 2, y: yPos }),
                 onMouseLeave: () => setHoveredBar(null)
@@ -5413,9 +5691,12 @@ var BarChart = ({
                 "text",
                 {
                   x: xPos + actualBarWidth / 2,
-                  y: yPos - 5,
+                  y: yPos - 10,
                   textAnchor: "middle",
-                  className: "text-xs fill-gray-700 dark:fill-gray-300 font-medium",
+                  dominantBaseline: "middle",
+                  fontSize: "11",
+                  fontWeight: "600",
+                  className: "fill-gray-700 dark:fill-gray-300",
                   children: point.y
                 },
                 `value-${seriesIndex}-${barIndex}`
@@ -5433,81 +5714,145 @@ var BarChart = ({
       "text",
       {
         x: xPos,
-        y: chartHeight + 20,
+        y: chartHeight + 35,
         textAnchor: "middle",
-        className: "text-xs fill-gray-600 dark:fill-gray-400",
+        dominantBaseline: "hanging",
+        fontSize: gridLabelFontSize,
+        className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
         children: point.x
       },
       `x-label-${i}`
     );
   });
-  return /* @__PURE__ */ jsxs36("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsx109(
-      "svg",
-      {
-        width,
-        height,
-        className: "bg-white dark:bg-gray-800",
-        style: { overflow: "visible" },
-        children: /* @__PURE__ */ jsxs36("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-          gridLines,
-          renderBars(),
-          showXAxis && xAxisLabels,
-          xAxisLabel && showXAxis && /* @__PURE__ */ jsx109(
-            "text",
+  const getTooltipPosition = React27.useCallback((x, y) => {
+    if (!containerRef.current) return { x, y };
+    const rect = containerRef.current.getBoundingClientRect();
+    const tooltipWidth = 140;
+    const tooltipHeight = 80;
+    let tooltipX = x + 10;
+    let tooltipY = y - 30;
+    if (tooltipX + tooltipWidth > rect.width) {
+      tooltipX = x - tooltipWidth - 10;
+    }
+    if (tooltipY + tooltipHeight > rect.height) {
+      tooltipY = y + 30;
+    }
+    return { x: tooltipX, y: tooltipY };
+  }, []);
+  const containerStyle = {
+    "--font-size-base": `${baseFontSize}px`,
+    "--font-size-lg": `calc(var(--font-size-base) * 1.125)`,
+    "--font-size-sm": `calc(var(--font-size-base) * 0.875)`,
+    "--font-size-xs": `calc(var(--font-size-base) * 0.75)`
+  };
+  return /* @__PURE__ */ jsxs36(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: {
+        ...containerStyle
+      },
+      children: [
+        /* @__PURE__ */ jsx109("style", { children: `
+        /* Mobile: Large fonts, hidden axis titles, thicker bars (default) */
+        .${gridLabelClass} { font-size: ${gridLabelFontSize}px !important; }
+        .${axisLabelClass} { display: none; }
+
+        /* Tablet: Medium fonts, show axis titles */
+        @media (min-width: 640px) {
+          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.7}px !important; }
+          .${axisLabelClass} {
+            font-size: ${axisLabelFontSize * 0.7}px !important;
+            display: block;
+          }
+        }
+
+        /* Desktop: Small fonts, show axis titles */
+        @media (min-width: 1024px) {
+          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.4}px !important; }
+          .${axisLabelClass} {
+            font-size: ${axisLabelFontSize * 0.4}px !important;
+            display: block;
+          }
+        }
+      ` }),
+        /* @__PURE__ */ jsx109(
+          "svg",
+          {
+            width: "100%",
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
+            preserveAspectRatio: "xMidYMid meet",
+            className: "bg-white dark:bg-gray-800 block w-full",
+            style: { height: "auto", overflow: "visible" },
+            children: /* @__PURE__ */ jsxs36("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+              gridLines,
+              renderBars(),
+              showXAxis && xAxisLabels,
+              xAxisLabel && showXAxis && /* @__PURE__ */ jsx109(
+                "text",
+                {
+                  x: chartWidth / 2,
+                  y: chartHeight + 80,
+                  textAnchor: "middle",
+                  dominantBaseline: "hanging",
+                  fontSize: axisLabelFontSize,
+                  fontWeight: "600",
+                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
+                  children: xAxisLabel
+                }
+              ),
+              yAxisLabel && showYAxis && /* @__PURE__ */ jsx109(
+                "text",
+                {
+                  x: -chartHeight / 2,
+                  y: -100,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  fontSize: axisLabelFontSize,
+                  fontWeight: "600",
+                  transform: "rotate(-90)",
+                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
+                  children: yAxisLabel
+                }
+              )
+            ] })
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx109("div", { className: "flex flex-wrap gap-3 justify-center px-4", children: data.map((series, index) => /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx109(
+            "div",
             {
-              x: chartWidth / 2,
-              y: chartHeight + 50,
-              textAnchor: "middle",
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: xAxisLabel
+              className: "w-3 h-3 rounded-sm flex-shrink-0",
+              style: {
+                backgroundColor: series.color || colors[index % colors.length]
+              }
             }
           ),
-          yAxisLabel && showYAxis && /* @__PURE__ */ jsx109(
-            "text",
-            {
-              x: -chartHeight / 2,
-              y: -45,
-              textAnchor: "middle",
-              transform: `rotate(-90, 0, 0)`,
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: yAxisLabel
-            }
-          )
-        ] })
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsx109("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx109(
-        "div",
-        {
-          className: "w-4 h-4 rounded-sm",
-          style: {
-            backgroundColor: series.color || defaultColors2[index % defaultColors2.length]
+          /* @__PURE__ */ jsx109("span", { className: "text-gray-700 dark:text-gray-300", children: series.name })
+        ] }, `legend-${index}`)) }),
+        showTooltip && hoveredBar && tooltipPosition && /* @__PURE__ */ jsxs36(
+          "div",
+          {
+            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg pointer-events-none z-50 text-sm whitespace-nowrap",
+            style: {
+              left: `${tooltipPosition.x}px`,
+              top: `${tooltipPosition.y}px`,
+              transform: "translateZ(0)"
+            },
+            children: [
+              /* @__PURE__ */ jsx109("div", { className: "font-semibold", children: data[hoveredBar.seriesIndex].name }),
+              /* @__PURE__ */ jsxs36("div", { className: "text-xs opacity-90", children: [
+                data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].x,
+                ": ",
+                data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].y
+              ] })
+            ]
           }
-        }
-      ),
-      /* @__PURE__ */ jsx109("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
-    ] }, `legend-${index}`)) }),
-    showTooltip && hoveredBar && /* @__PURE__ */ jsxs36(
-      "div",
-      {
-        className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg text-sm pointer-events-none z-50",
-        style: {
-          left: `${padding.left + hoveredBar.x + 10}px`,
-          top: `${padding.top + hoveredBar.y - 30}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx109("div", { className: "font-semibold", children: data[hoveredBar.seriesIndex].name }),
-          /* @__PURE__ */ jsxs36("div", { children: [
-            data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].x,
-            ": ",
-            data[hoveredBar.seriesIndex].data[hoveredBar.barIndex].y
-          ] })
-        ]
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 
 // src/components/AreaChart.tsx
@@ -5529,8 +5874,10 @@ var defaultColors3 = [
 ];
 var AreaChart = ({
   data,
-  width = 600,
-  height = 400,
+  width: providedWidth,
+  height: providedHeight,
+  aspectRatio = 16 / 9,
+  responsive = true,
   showGrid = true,
   showXAxis = true,
   showYAxis = true,
@@ -5543,12 +5890,32 @@ var AreaChart = ({
   strokeWidth = 2,
   className = "",
   xAxisLabel,
-  yAxisLabel
+  yAxisLabel,
+  baseFontSize = 14
 }) => {
+  const viewBoxWidth = 1e3;
+  const viewBoxHeight = 600;
+  const containerRef = React28.useRef(null);
+  const svgRef = React28.useRef(null);
+  const [tooltipPosition, setTooltipPosition] = React28.useState(null);
   const [hoveredPoint, setHoveredPoint] = React28.useState(null);
-  const padding = { top: 20, right: 20, bottom: showXAxis ? 60 : 20, left: showYAxis ? 60 : 20 };
-  const chartWidth = width - padding.left - padding.right;
-  const chartHeight = height - padding.top - padding.bottom;
+  const chartId = React28.useId();
+  const wrapperClass = `chart-svg-wrapper-${chartId.replace(/:/g, "-")}`;
+  const gridLabelClass = `chart-grid-label-${chartId.replace(/:/g, "-")}`;
+  const axisLabelClass = `chart-axis-label-${chartId.replace(/:/g, "-")}`;
+  const lineClass = `chart-line-${chartId.replace(/:/g, "-")}`;
+  const pointClass = `chart-point-${chartId.replace(/:/g, "-")}`;
+  const padding = {
+    top: 50,
+    right: 50,
+    bottom: showXAxis ? 120 : 50,
+    left: showYAxis ? 130 : 50
+  };
+  const chartWidth = viewBoxWidth - padding.left - padding.right;
+  const chartHeight = viewBoxHeight - padding.top - padding.bottom;
+  const gridLabelFontSize = viewBoxWidth * 0.045;
+  const axisLabelFontSize = viewBoxWidth * 0.05;
+  const titleFontSize = viewBoxWidth * 0.055;
   const allPoints = data.flatMap((series) => series.data);
   const allYValues = stacked ? data[0]?.data.map(
     (_, i) => data.reduce((sum, series) => sum + (series.data[i]?.y || 0), 0)
@@ -5562,7 +5929,7 @@ var AreaChart = ({
   const minY = Math.min(0, ...allYValues);
   const maxY = Math.max(...allYValues);
   const yRange = maxY - minY;
-  const yMin = minY - yRange * 0.1;
+  const yMin = Math.max(0, minY - yRange * 0.1);
   const yMax = maxY + yRange * 0.1;
   const scaleX = (x, index) => {
     const numX = isStringX ? index : x;
@@ -5643,19 +6010,21 @@ var AreaChart = ({
               x2: chartWidth,
               y2: y,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showYAxis && /* @__PURE__ */ jsx110(
             "text",
             {
-              x: -10,
-              y: y + 4,
+              x: -25,
+              y,
               textAnchor: "end",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
-              children: yValue.toFixed(0)
+              dominantBaseline: "middle",
+              fontSize: gridLabelFontSize,
+              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
+              children: yValue.toFixed(1)
             }
           )
         ] }, `grid-h-${i}`)
@@ -5675,18 +6044,20 @@ var AreaChart = ({
               x2: x,
               y2: chartHeight,
               stroke: "currentColor",
-              strokeWidth: "1",
+              strokeWidth: "0.5",
               className: "text-gray-200 dark:text-gray-700",
-              strokeDasharray: "2,2"
+              strokeDasharray: "4,4"
             }
           ),
           showXAxis && /* @__PURE__ */ jsx110(
             "text",
             {
               x,
-              y: chartHeight + 20,
+              y: chartHeight + 35,
               textAnchor: "middle",
-              className: "text-xs fill-gray-600 dark:fill-gray-400",
+              dominantBaseline: "hanging",
+              fontSize: gridLabelFontSize,
+              className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
               children: xValue
             }
           )
@@ -5698,130 +6069,217 @@ var AreaChart = ({
   if (stacked) {
     cumulativeValues = Array(data[0]?.data.length || 0).fill(0);
   }
-  return /* @__PURE__ */ jsxs37("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsx110(
-      "svg",
-      {
-        width,
-        height,
-        className: "bg-white dark:bg-gray-800",
-        style: { overflow: "visible" },
-        children: /* @__PURE__ */ jsxs37("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
-          gridLines,
-          data.map((series, seriesIndex) => {
-            const baselineYValues = stacked ? [...cumulativeValues] : void 0;
-            const areaPath = generateAreaPath(series, baselineYValues);
-            const linePath = generateLinePath(series, baselineYValues);
-            if (stacked) {
-              series.data.forEach((point, i) => {
-                cumulativeValues[i] += point.y;
-              });
-            }
-            return /* @__PURE__ */ jsxs37("g", { children: [
-              /* @__PURE__ */ jsx110(
-                "path",
+  const getTooltipPosition = React28.useCallback((x, y) => {
+    if (!containerRef.current) return { x, y };
+    const rect = containerRef.current.getBoundingClientRect();
+    const tooltipWidth = 120;
+    const tooltipHeight = 80;
+    let tooltipX = x + 10;
+    let tooltipY = y - 30;
+    if (tooltipX + tooltipWidth > rect.width) {
+      tooltipX = x - tooltipWidth - 10;
+    }
+    if (tooltipY + tooltipHeight > rect.height) {
+      tooltipY = y + 30;
+    }
+    return { x: tooltipX, y: tooltipY };
+  }, []);
+  const containerStyle = {
+    "--font-size-base": `${baseFontSize}px`,
+    "--font-size-lg": `calc(var(--font-size-base) * 1.125)`,
+    "--font-size-sm": `calc(var(--font-size-base) * 0.875)`,
+    "--font-size-xs": `calc(var(--font-size-base) * 0.75)`
+  };
+  return /* @__PURE__ */ jsxs37(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsx110("style", { children: `
+        /* Mobile: Large fonts, hidden axis titles, thicker lines (default) */
+        .${gridLabelClass} { font-size: ${gridLabelFontSize}px !important; }
+        .${axisLabelClass} { display: none; }
+        .${lineClass} { stroke-width: ${strokeWidth * 2.5} !important; }
+        .${pointClass} { r: 6 !important; stroke-width: 3 !important; }
+
+        /* Tablet: Medium fonts, show axis titles, medium lines */
+        @media (min-width: 640px) {
+          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.7}px !important; }
+          .${axisLabelClass} {
+            font-size: ${axisLabelFontSize * 0.7}px !important;
+            display: block;
+          }
+          .${lineClass} { stroke-width: ${strokeWidth * 1.5} !important; }
+          .${pointClass} { r: 4 !important; stroke-width: 2 !important; }
+        }
+
+        /* Desktop: Small fonts, show axis titles, normal lines */
+        @media (min-width: 1024px) {
+          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.4}px !important; }
+          .${axisLabelClass} {
+            font-size: ${axisLabelFontSize * 0.4}px !important;
+            display: block;
+          }
+          .${lineClass} { stroke-width: ${strokeWidth} !important; }
+          .${pointClass} { r: 3 !important; stroke-width: 1.5 !important; }
+        }
+      ` }),
+        /* @__PURE__ */ jsx110(
+          "svg",
+          {
+            ref: svgRef,
+            width: "100%",
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
+            preserveAspectRatio: "xMidYMid meet",
+            className: "bg-white dark:bg-gray-800 block w-full",
+            style: { height: "auto", overflow: "visible" },
+            children: /* @__PURE__ */ jsxs37("g", { transform: `translate(${padding.left}, ${padding.top})`, children: [
+              gridLines,
+              data.map((series, seriesIndex) => {
+                const baselineYValues = stacked ? [...cumulativeValues] : void 0;
+                const areaPath = generateAreaPath(series, baselineYValues);
+                const linePath = generateLinePath(series, baselineYValues);
+                if (stacked) {
+                  series.data.forEach((point, i) => {
+                    cumulativeValues[i] += point.y;
+                  });
+                }
+                return /* @__PURE__ */ jsxs37("g", { children: [
+                  /* @__PURE__ */ jsx110(
+                    "path",
+                    {
+                      d: areaPath,
+                      fill: series.color || defaultColors3[seriesIndex % defaultColors3.length],
+                      opacity: fillOpacity
+                    }
+                  ),
+                  /* @__PURE__ */ jsx110(
+                    "path",
+                    {
+                      d: linePath,
+                      fill: "none",
+                      stroke: series.color || defaultColors3[seriesIndex % defaultColors3.length],
+                      strokeWidth,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: lineClass
+                    }
+                  )
+                ] }, `area-${seriesIndex}`);
+              }),
+              showDots && data.map((series, seriesIndex) => {
+                const baselineYValues = stacked ? data.slice(0, seriesIndex).reduce((acc, s) => {
+                  return acc.map((val, i) => val + (s.data[i]?.y || 0));
+                }, Array(series.data.length).fill(0)) : void 0;
+                return series.data.map((point, pointIndex) => {
+                  const x = scaleX(point.x, pointIndex);
+                  const y = baselineYValues ? scaleY(baselineYValues[pointIndex] + point.y) : scaleY(point.y);
+                  const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
+                  return /* @__PURE__ */ jsx110(
+                    "circle",
+                    {
+                      cx: x,
+                      cy: y,
+                      r: isHovered ? 6 : 4,
+                      fill: series.color || defaultColors3[seriesIndex % defaultColors3.length],
+                      stroke: "white",
+                      strokeWidth: "2",
+                      className: `cursor-pointer transition-all ${pointClass}`,
+                      onMouseEnter: (e) => {
+                        if (showTooltip && containerRef.current) {
+                          setHoveredPoint({ seriesIndex, pointIndex, x, y });
+                          const containerRect = containerRef.current.getBoundingClientRect();
+                          const mouseX = e.clientX - containerRect.left;
+                          const mouseY = e.clientY - containerRect.top;
+                          setTooltipPosition(getTooltipPosition(mouseX, mouseY));
+                        }
+                      },
+                      onMouseMove: (e) => {
+                        if (showTooltip && hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex && containerRef.current) {
+                          const containerRect = containerRef.current.getBoundingClientRect();
+                          const mouseX = e.clientX - containerRect.left;
+                          const mouseY = e.clientY - containerRect.top;
+                          setTooltipPosition(getTooltipPosition(mouseX, mouseY));
+                        }
+                      },
+                      onMouseLeave: () => {
+                        setHoveredPoint(null);
+                        setTooltipPosition(null);
+                      }
+                    },
+                    `point-${seriesIndex}-${pointIndex}`
+                  );
+                });
+              }),
+              xAxisLabel && showXAxis && /* @__PURE__ */ jsx110(
+                "text",
                 {
-                  d: areaPath,
-                  fill: series.color || defaultColors3[seriesIndex % defaultColors3.length],
-                  opacity: fillOpacity
+                  x: chartWidth / 2,
+                  y: chartHeight + 80,
+                  textAnchor: "middle",
+                  dominantBaseline: "hanging",
+                  fontSize: axisLabelFontSize,
+                  fontWeight: "600",
+                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
+                  children: xAxisLabel
                 }
               ),
-              /* @__PURE__ */ jsx110(
-                "path",
+              yAxisLabel && showYAxis && /* @__PURE__ */ jsx110(
+                "text",
                 {
-                  d: linePath,
-                  fill: "none",
-                  stroke: series.color || defaultColors3[seriesIndex % defaultColors3.length],
-                  strokeWidth,
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round"
+                  x: -chartHeight / 2,
+                  y: -100,
+                  textAnchor: "middle",
+                  dominantBaseline: "middle",
+                  fontSize: axisLabelFontSize,
+                  fontWeight: "600",
+                  transform: "rotate(-90)",
+                  className: `fill-gray-700 dark:fill-gray-300 ${axisLabelClass}`,
+                  children: yAxisLabel
                 }
               )
-            ] }, `area-${seriesIndex}`);
-          }),
-          showDots && data.map((series, seriesIndex) => {
-            const baselineYValues = stacked ? data.slice(0, seriesIndex).reduce((acc, s) => {
-              return acc.map((val, i) => val + (s.data[i]?.y || 0));
-            }, Array(series.data.length).fill(0)) : void 0;
-            return series.data.map((point, pointIndex) => {
-              const x = scaleX(point.x, pointIndex);
-              const y = baselineYValues ? scaleY(baselineYValues[pointIndex] + point.y) : scaleY(point.y);
-              const isHovered = hoveredPoint?.seriesIndex === seriesIndex && hoveredPoint?.pointIndex === pointIndex;
-              return /* @__PURE__ */ jsx110(
-                "circle",
-                {
-                  cx: x,
-                  cy: y,
-                  r: isHovered ? 6 : 4,
-                  fill: series.color || defaultColors3[seriesIndex % defaultColors3.length],
-                  stroke: "white",
-                  strokeWidth: "2",
-                  className: "cursor-pointer transition-all",
-                  onMouseEnter: () => showTooltip && setHoveredPoint({ seriesIndex, pointIndex, x, y }),
-                  onMouseLeave: () => setHoveredPoint(null)
-                },
-                `point-${seriesIndex}-${pointIndex}`
-              );
-            });
-          }),
-          xAxisLabel && showXAxis && /* @__PURE__ */ jsx110(
-            "text",
+            ] })
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx110("div", { className: "flex flex-wrap gap-3 justify-center px-4", children: data.map((series, index) => /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsx110(
+            "div",
             {
-              x: chartWidth / 2,
-              y: chartHeight + 50,
-              textAnchor: "middle",
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: xAxisLabel
+              className: "w-3 h-3 rounded-sm flex-shrink-0",
+              style: {
+                backgroundColor: series.color || defaultColors3[index % defaultColors3.length]
+              }
             }
           ),
-          yAxisLabel && showYAxis && /* @__PURE__ */ jsx110(
-            "text",
-            {
-              x: -chartHeight / 2,
-              y: -45,
-              textAnchor: "middle",
-              transform: `rotate(-90, 0, 0)`,
-              className: "text-sm font-medium fill-gray-700 dark:fill-gray-300",
-              children: yAxisLabel
-            }
-          )
-        ] })
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsx110("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((series, index) => /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx110(
-        "div",
-        {
-          className: "w-4 h-4 rounded-sm",
-          style: {
-            backgroundColor: series.color || defaultColors3[index % defaultColors3.length]
+          /* @__PURE__ */ jsx110("span", { className: "text-gray-700 dark:text-gray-300", children: series.name })
+        ] }, `legend-${index}`)) }),
+        showTooltip && hoveredPoint && tooltipPosition && /* @__PURE__ */ jsxs37(
+          "div",
+          {
+            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg pointer-events-none z-50 text-sm whitespace-nowrap",
+            style: {
+              left: `${tooltipPosition.x}px`,
+              top: `${tooltipPosition.y}px`,
+              transform: "translateZ(0)"
+            },
+            children: [
+              /* @__PURE__ */ jsx110("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
+              /* @__PURE__ */ jsxs37("div", { className: "text-xs opacity-90", children: [
+                "x: ",
+                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
+              ] }),
+              /* @__PURE__ */ jsxs37("div", { className: "text-xs opacity-90", children: [
+                "y: ",
+                data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
+              ] })
+            ]
           }
-        }
-      ),
-      /* @__PURE__ */ jsx110("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: series.name })
-    ] }, `legend-${index}`)) }),
-    showTooltip && hoveredPoint && /* @__PURE__ */ jsxs37(
-      "div",
-      {
-        className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg text-sm pointer-events-none z-50",
-        style: {
-          left: `${padding.left + hoveredPoint.x + 10}px`,
-          top: `${padding.top + hoveredPoint.y - 30}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx110("div", { className: "font-semibold", children: data[hoveredPoint.seriesIndex].name }),
-          /* @__PURE__ */ jsxs37("div", { children: [
-            "x: ",
-            data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].x
-          ] }),
-          /* @__PURE__ */ jsxs37("div", { children: [
-            "y: ",
-            data[hoveredPoint.seriesIndex].data[hoveredPoint.pointIndex].y
-          ] })
-        ]
-      }
-    )
-  ] });
+        )
+      ]
+    }
+  );
 };
 
 // src/components/PieChart.tsx
@@ -5847,22 +6305,37 @@ var defaultColors4 = [
 ];
 var PieChart = ({
   data,
-  width = 400,
-  height = 400,
+  width: providedWidth,
+  height: providedHeight,
+  aspectRatio = 1,
+  responsive = true,
   showLegend = true,
   showLabels = true,
   showValues = false,
   showPercentages = false,
   donut = false,
   donutWidth = 60,
-  className = ""
+  className = "",
+  baseFontSize = 14
 }) => {
+  const viewBoxWidth = 600;
+  const viewBoxHeight = 600;
+  const containerRef = React29.useRef(null);
+  const [tooltipPosition, setTooltipPosition] = React29.useState(null);
   const [hoveredSlice, setHoveredSlice] = React29.useState(null);
+  const chartId = React29.useId();
+  const wrapperClass = `chart-svg-wrapper-${chartId.replace(/:/g, "-")}`;
+  const gridLabelClass = `chart-grid-label-${chartId.replace(/:/g, "-")}`;
+  const axisLabelClass = `chart-axis-label-${chartId.replace(/:/g, "-")}`;
+  const sliceClass = `chart-slice-${chartId.replace(/:/g, "-")}`;
   const total = data.reduce((sum, item) => sum + item.value, 0);
-  const centerX = width / 2;
-  const centerY = height / 2;
-  const radius = Math.min(width, height) / 2 - 40;
+  const centerX = viewBoxWidth / 2;
+  const centerY = viewBoxHeight / 2;
+  const radius = Math.min(viewBoxWidth, viewBoxHeight) / 2 - 40;
   const innerRadius = donut ? radius - donutWidth : 0;
+  const gridLabelFontSize = viewBoxWidth * 0.045;
+  const axisLabelFontSize = viewBoxWidth * 0.05;
+  const titleFontSize = viewBoxWidth * 0.055;
   let currentAngle = -90;
   const slices = data.map((item, index) => {
     const percentage = item.value / total * 100;
@@ -5914,112 +6387,194 @@ var PieChart = ({
       index
     };
   });
-  return /* @__PURE__ */ jsxs38("div", { className: `relative inline-block ${className}`, children: [
-    /* @__PURE__ */ jsxs38(
-      "svg",
-      {
-        width,
-        height,
-        className: "bg-white dark:bg-gray-800",
-        children: [
-          slices.map((slice) => {
-            const isHovered = hoveredSlice === slice.index;
-            return /* @__PURE__ */ jsxs38("g", { children: [
+  const getTooltipPosition = React29.useCallback((x, y) => {
+    if (!containerRef.current) return { x, y };
+    const rect = containerRef.current.getBoundingClientRect();
+    const tooltipWidth = 120;
+    const tooltipHeight = 80;
+    let tooltipX = x + 10;
+    let tooltipY = y - 30;
+    if (tooltipX + tooltipWidth > rect.width) {
+      tooltipX = x - tooltipWidth - 10;
+    }
+    if (tooltipY + tooltipHeight > rect.height) {
+      tooltipY = y + 30;
+    }
+    return { x: tooltipX, y: tooltipY };
+  }, []);
+  const containerStyle = {
+    "--font-size-base": `${baseFontSize}px`,
+    "--font-size-lg": `calc(var(--font-size-base) * 1.125)`,
+    "--font-size-sm": `calc(var(--font-size-base) * 0.875)`,
+    "--font-size-xs": `calc(var(--font-size-base) * 0.75)`,
+    "--font-size-xl": `calc(var(--font-size-base) * 1.5)`,
+    "--font-size-2xl": `calc(var(--font-size-base) * 2)`
+  };
+  if (responsive) {
+    containerStyle["--font-size-base"] = `clamp(${baseFontSize * 0.8}px, 4vw, ${baseFontSize}px)`;
+  }
+  return /* @__PURE__ */ jsxs38(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative flex flex-col gap-4 ${responsive ? "w-full" : "inline-block"} ${className}`,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsx111("style", { children: `
+        /* Mobile: Large fonts (default) */
+        .${gridLabelClass} { font-size: ${gridLabelFontSize}px !important; }
+        .${axisLabelClass} { font-size: ${titleFontSize}px !important; }
+
+        /* Tablet: Medium fonts */
+        @media (min-width: 640px) {
+          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.7}px !important; }
+          .${axisLabelClass} { font-size: ${titleFontSize * 0.7}px !important; }
+        }
+
+        /* Desktop: Small fonts */
+        @media (min-width: 1024px) {
+          .${gridLabelClass} { font-size: ${gridLabelFontSize * 0.4}px !important; }
+          .${axisLabelClass} { font-size: ${titleFontSize * 0.4}px !important; }
+        }
+      ` }),
+        /* @__PURE__ */ jsxs38(
+          "svg",
+          {
+            width: "100%",
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxHeight}`,
+            preserveAspectRatio: "xMidYMid meet",
+            className: "bg-white dark:bg-gray-800 block w-full",
+            style: { height: "auto", overflow: "visible" },
+            children: [
+              slices.map((slice) => {
+                const isHovered = hoveredSlice === slice.index;
+                return /* @__PURE__ */ jsxs38("g", { children: [
+                  /* @__PURE__ */ jsx111(
+                    "path",
+                    {
+                      d: slice.path,
+                      fill: slice.color,
+                      stroke: "white",
+                      strokeWidth: "2",
+                      className: "cursor-pointer transition-opacity",
+                      opacity: isHovered ? 0.8 : 1,
+                      onMouseEnter: (e) => {
+                        setHoveredSlice(slice.index);
+                        if (containerRef.current) {
+                          const rect = containerRef.current.getBoundingClientRect();
+                          const svgX = e.clientX - rect.left;
+                          const svgY = e.clientY - rect.top;
+                          setTooltipPosition(getTooltipPosition(svgX, svgY));
+                        }
+                      },
+                      onMouseLeave: () => {
+                        setHoveredSlice(null);
+                        setTooltipPosition(null);
+                      }
+                    }
+                  ),
+                  showLabels && slice.percentage > 5 && /* @__PURE__ */ jsxs38(
+                    "text",
+                    {
+                      x: slice.labelX,
+                      y: slice.labelY,
+                      textAnchor: "middle",
+                      dominantBaseline: "middle",
+                      fontSize: gridLabelFontSize,
+                      fontWeight: "600",
+                      className: `fill-gray-700 dark:fill-gray-200 pointer-events-none ${gridLabelClass}`,
+                      children: [
+                        showPercentages && `${slice.percentage.toFixed(1)}%`,
+                        showPercentages && showValues && " ",
+                        showValues && `(${slice.value})`,
+                        !showPercentages && !showValues && slice.label
+                      ]
+                    }
+                  )
+                ] }, slice.index);
+              }),
+              donut && /* @__PURE__ */ jsxs38("g", { children: [
+                /* @__PURE__ */ jsx111(
+                  "text",
+                  {
+                    x: centerX,
+                    y: centerY - 10,
+                    textAnchor: "middle",
+                    dominantBaseline: "middle",
+                    fontSize: titleFontSize,
+                    fontWeight: "700",
+                    className: `fill-gray-900 dark:fill-gray-100 ${axisLabelClass}`,
+                    children: total
+                  }
+                ),
+                /* @__PURE__ */ jsx111(
+                  "text",
+                  {
+                    x: centerX,
+                    y: centerY + 15,
+                    textAnchor: "middle",
+                    dominantBaseline: "middle",
+                    fontSize: axisLabelFontSize,
+                    className: `fill-gray-600 dark:fill-gray-400 ${gridLabelClass}`,
+                    children: "Total"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx111("div", { className: "flex flex-wrap gap-3 justify-center px-4", children: data.map((item, index) => /* @__PURE__ */ jsxs38(
+          "div",
+          {
+            className: "flex items-center gap-2 text-sm cursor-pointer",
+            onMouseEnter: () => setHoveredSlice(index),
+            onMouseLeave: () => setHoveredSlice(null),
+            children: [
               /* @__PURE__ */ jsx111(
-                "path",
+                "div",
                 {
-                  d: slice.path,
-                  fill: slice.color,
-                  stroke: "white",
-                  strokeWidth: "2",
-                  className: "cursor-pointer transition-opacity",
-                  opacity: isHovered ? 0.8 : 1,
-                  onMouseEnter: () => setHoveredSlice(slice.index),
-                  onMouseLeave: () => setHoveredSlice(null)
+                  className: "w-3 h-3 rounded-sm flex-shrink-0",
+                  style: {
+                    backgroundColor: item.color || defaultColors4[index % defaultColors4.length]
+                  }
                 }
               ),
-              showLabels && slice.percentage > 5 && /* @__PURE__ */ jsxs38(
-                "text",
-                {
-                  x: slice.labelX,
-                  y: slice.labelY,
-                  textAnchor: "middle",
-                  dominantBaseline: "middle",
-                  className: "text-xs font-semibold fill-gray-700 dark:fill-gray-200 pointer-events-none",
-                  children: [
-                    showPercentages && `${slice.percentage.toFixed(1)}%`,
-                    showPercentages && showValues && " ",
-                    showValues && `(${slice.value})`,
-                    !showPercentages && !showValues && slice.label
-                  ]
-                }
-              )
-            ] }, slice.index);
-          }),
-          donut && /* @__PURE__ */ jsxs38("g", { children: [
-            /* @__PURE__ */ jsx111(
-              "text",
-              {
-                x: centerX,
-                y: centerY - 10,
-                textAnchor: "middle",
-                className: "text-2xl font-bold fill-gray-900 dark:fill-gray-100",
-                children: total
-              }
-            ),
-            /* @__PURE__ */ jsx111(
-              "text",
-              {
-                x: centerX,
-                y: centerY + 15,
-                textAnchor: "middle",
-                className: "text-sm fill-gray-600 dark:fill-gray-400",
-                children: "Total"
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsx111("div", { className: "flex flex-wrap gap-4 mt-4 justify-center", children: data.map((item, index) => /* @__PURE__ */ jsxs38(
-      "div",
-      {
-        className: "flex items-center gap-2 cursor-pointer",
-        onMouseEnter: () => setHoveredSlice(index),
-        onMouseLeave: () => setHoveredSlice(null),
-        children: [
-          /* @__PURE__ */ jsx111(
-            "div",
-            {
-              className: "w-4 h-4 rounded-sm",
-              style: {
-                backgroundColor: item.color || defaultColors4[index % defaultColors4.length]
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs38("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: [
-            item.label,
-            ": ",
-            item.value,
-            showPercentages && ` (${(item.value / total * 100).toFixed(1)}%)`
-          ] })
-        ]
-      },
-      `legend-${index}`
-    )) }),
-    hoveredSlice !== null && /* @__PURE__ */ jsxs38("div", { className: "absolute top-2 right-2 bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg text-sm pointer-events-none z-50", children: [
-      /* @__PURE__ */ jsx111("div", { className: "font-semibold", children: data[hoveredSlice].label }),
-      /* @__PURE__ */ jsxs38("div", { children: [
-        "Value: ",
-        data[hoveredSlice].value
-      ] }),
-      /* @__PURE__ */ jsxs38("div", { children: [
-        "Percentage: ",
-        (data[hoveredSlice].value / total * 100).toFixed(1),
-        "%"
-      ] })
-    ] })
-  ] });
+              /* @__PURE__ */ jsxs38("span", { className: "text-gray-700 dark:text-gray-300", children: [
+                item.label,
+                ": ",
+                item.value,
+                showPercentages && ` (${(item.value / total * 100).toFixed(1)}%)`
+              ] })
+            ]
+          },
+          `legend-${index}`
+        )) }),
+        hoveredSlice !== null && tooltipPosition && /* @__PURE__ */ jsxs38(
+          "div",
+          {
+            className: "absolute bg-gray-900 dark:bg-gray-700 text-white px-3 py-2 rounded shadow-lg pointer-events-none z-50 text-sm whitespace-nowrap",
+            style: {
+              left: `${tooltipPosition.x}px`,
+              top: `${tooltipPosition.y}px`,
+              transform: "translateZ(0)"
+            },
+            children: [
+              /* @__PURE__ */ jsx111("div", { className: "font-semibold", children: data[hoveredSlice].label }),
+              /* @__PURE__ */ jsxs38("div", { className: "text-xs opacity-90", children: [
+                "Value: ",
+                data[hoveredSlice].value
+              ] }),
+              /* @__PURE__ */ jsxs38("div", { className: "text-xs opacity-90", children: [
+                "Percentage: ",
+                (data[hoveredSlice].value / total * 100).toFixed(1),
+                "%"
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 
 // src/utils/theme-script.ts