dp-widgets-framework 1.7.5 → 1.7.7

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, Loader2, Download, Send, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, SlidersHorizontal, GripHorizontal, Edit, MessageCircleX, ChevronLeft, Maximize2, Grid3X3, Edit2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, ChevronRight, RefreshCw, Loader2, Download, MessageCircleX, Send, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, SlidersHorizontal, GripHorizontal, Edit, ChevronLeft, Maximize2, Grid3X3, Edit2 } from 'lucide-react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { Slot, createSlot, createSlottable } from '@radix-ui/react-slot';
 import { debounce as debounce$1 } from 'lodash';
@@ -3603,10 +3603,6 @@ const oppositeSideMap = {
   bottom: 'top',
   top: 'bottom'
 };
-const oppositeAlignmentMap = {
-  start: 'end',
-  end: 'start'
-};
 function clamp(start, value, end) {
   return max(start, min(value, end));
 }
@@ -3625,9 +3621,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
-const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
 function getSideAxis(placement) {
-  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
+  const firstChar = placement[0];
+  return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -3650,7 +3646,7 @@ function getExpandedPlacements(placement) {
   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
 }
 function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+  return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
 }
 const lrPlacement = ['left', 'right'];
 const rlPlacement = ['right', 'left'];
@@ -3681,7 +3677,8 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
   return list;
 }
 function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+  const side = getSide(placement);
+  return oppositeSideMap[side] + placement.slice(side.length);
 }
 function expandPaddingObject(padding) {
   return {
@@ -3840,6 +3837,9 @@ async function detectOverflow(state, options) {
   };
 }
 
+// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
+const MAX_RESET_COUNT = 50;
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -3854,7 +3854,10 @@ const computePosition$1 = async (reference, floating, config) => {
     middleware = [],
     platform
   } = config;
-  const validMiddleware = middleware.filter(Boolean);
+  const platformWithDetectOverflow = platform.detectOverflow ? platform : {
+    ...platform,
+    detectOverflow
+  };
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
   let rects = await platform.getElementRects({
     reference,
@@ -3866,14 +3869,17 @@ const computePosition$1 = async (reference, floating, config) => {
     y
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
-  let middlewareData = {};
   let resetCount = 0;
-  for (let i = 0; i < validMiddleware.length; i++) {
-    var _platform$detectOverf;
+  const middlewareData = {};
+  for (let i = 0; i < middleware.length; i++) {
+    const currentMiddleware = middleware[i];
+    if (!currentMiddleware) {
+      continue;
+    }
     const {
       name,
       fn
-    } = validMiddleware[i];
+    } = currentMiddleware;
     const {
       x: nextX,
       y: nextY,
@@ -3887,10 +3893,7 @@ const computePosition$1 = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform: {
-        ...platform,
-        detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
-      },
+      platform: platformWithDetectOverflow,
       elements: {
         reference,
         floating
@@ -3898,14 +3901,11 @@ const computePosition$1 = async (reference, floating, config) => {
     });
     x = nextX != null ? nextX : x;
     y = nextY != null ? nextY : y;
-    middlewareData = {
-      ...middlewareData,
-      [name]: {
-        ...middlewareData[name],
-        ...data
-      }
+    middlewareData[name] = {
+      ...middlewareData[name],
+      ...data
     };
-    if (reset && resetCount <= 50) {
+    if (reset && resetCount < MAX_RESET_COUNT) {
       resetCount++;
       if (typeof reset === 'object') {
         if (reset.placement) {
@@ -4580,7 +4580,6 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
-const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
 function isOverflowElement(element) {
   const {
     overflow,
@@ -4588,32 +4587,35 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle$2(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
 }
-const tableElements$1 = /*#__PURE__*/new Set(['table', 'td', 'th']);
 function isTableElement(element) {
-  return tableElements$1.has(getNodeName(element));
+  return /^(table|td|th)$/.test(getNodeName(element));
 }
-const topLayerSelectors = [':popover-open', ':modal'];
 function isTopLayer(element) {
-  return topLayerSelectors.some(selector => {
-    try {
-      return element.matches(selector);
-    } catch (_e) {
-      return false;
+  try {
+    if (element.matches(':popover-open')) {
+      return true;
     }
-  });
+  } catch (_e) {
+    // no-op
+  }
+  try {
+    return element.matches(':modal');
+  } catch (_e) {
+    return false;
+  }
 }
-const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
-const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
-const containValues = ['paint', 'layout', 'strict', 'content'];
+const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+const containRe = /paint|layout|strict|content/;
+const isNotNone = value => !!value && value !== 'none';
+let isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const webkit = isWebKit();
   const css = isElement(elementOrCss) ? getComputedStyle$2(elementOrCss) : elementOrCss;
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-  return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
+  return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -4628,12 +4630,13 @@ function getContainingBlock(element) {
   return null;
 }
 function isWebKit() {
-  if (typeof CSS === 'undefined' || !CSS.supports) return false;
-  return CSS.supports('-webkit-backdrop-filter', 'none');
+  if (isWebKitValue == null) {
+    isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
+  }
+  return isWebKitValue;
 }
-const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
 function isLastTraversableNode(node) {
-  return lastTraversableNodeNames.has(getNodeName(node));
+  return /^(html|body|#document)$/.test(getNodeName(node));
 }
 function getComputedStyle$2(element) {
   return getWindow(element).getComputedStyle(element);
@@ -4689,8 +4692,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
   if (isBody) {
     const frameElement = getFrameElement(win);
     return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  } else {
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
   }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
@@ -4867,7 +4871,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
-    if (isHTMLElement(offsetParent)) {
+    if (isOffsetParentAnElement) {
       const offsetRect = getBoundingClientRect(offsetParent);
       scale = getScale(offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
@@ -4955,7 +4959,6 @@ function getViewportRect(element, strategy) {
   };
 }
 
-const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
 // Returns the inner client rect, subtracting scrollbars if present.
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -5020,7 +5023,7 @@ function getClippingElementAncestors(element, cache) {
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);
@@ -5045,20 +5048,23 @@ function getClippingRect(_ref) {
   } = _ref;
   const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
   const clippingAncestors = [...elementClippingAncestors, rootBoundary];
-  const firstClippingAncestor = clippingAncestors[0];
-  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
-    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
-    accRect.top = max(rect.top, accRect.top);
-    accRect.right = min(rect.right, accRect.right);
-    accRect.bottom = min(rect.bottom, accRect.bottom);
-    accRect.left = max(rect.left, accRect.left);
-    return accRect;
-  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+  let top = firstRect.top;
+  let right = firstRect.right;
+  let bottom = firstRect.bottom;
+  let left = firstRect.left;
+  for (let i = 1; i < clippingAncestors.length; i++) {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+    top = max(rect.top, top);
+    right = min(rect.right, right);
+    bottom = min(rect.bottom, bottom);
+    left = max(rect.left, left);
+  }
   return {
-    width: clippingRect.right - clippingRect.left,
-    height: clippingRect.bottom - clippingRect.top,
-    x: clippingRect.left,
-    y: clippingRect.top
+    width: right - left,
+    height: bottom - top,
+    x: left,
+    y: top
   };
 }
 
@@ -5309,7 +5315,7 @@ function autoUpdate(reference, floating, update, options) {
     animationFrame = false
   } = options;
   const referenceEl = unwrapElement(reference);
-  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
   ancestors.forEach(ancestor => {
     ancestorScroll && ancestor.addEventListener('scroll', update, {
       passive: true
@@ -5322,7 +5328,7 @@ function autoUpdate(reference, floating, update, options) {
   if (elementResize) {
     resizeObserver = new ResizeObserver(_ref => {
       let [firstEntry] = _ref;
-      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
         // Prevent update loops when using the `size` middleware.
         // https://github.com/floating-ui/floating-ui/issues/1740
         resizeObserver.unobserve(floating);
@@ -5337,7 +5343,9 @@ function autoUpdate(reference, floating, update, options) {
     if (referenceEl && !animationFrame) {
       resizeObserver.observe(referenceEl);
     }
-    resizeObserver.observe(floating);
+    if (floating) {
+      resizeObserver.observe(floating);
+    }
   }
   let frameId;
   let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -5719,28 +5727,39 @@ const arrow$1 = options => {
  * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-const offset = (options, deps) => ({
-  ...offset$1(options),
-  options: [options, deps]
-});
+const offset = (options, deps) => {
+  const result = offset$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift = (options, deps) => ({
-  ...shift$1(options),
-  options: [options, deps]
-});
+const shift = (options, deps) => {
+  const result = shift$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 
 /**
  * Built-in `limiter` that will stop `shift()` at a certain point.
  */
-const limitShift = (options, deps) => ({
-  ...limitShift$1(options),
-  options: [options, deps]
-});
+const limitShift = (options, deps) => {
+  const result = limitShift$1(options);
+  return {
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
@@ -5748,10 +5767,14 @@ const limitShift = (options, deps) => ({
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip = (options, deps) => ({
-  ...flip$1(options),
-  options: [options, deps]
-});
+const flip = (options, deps) => {
+  const result = flip$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 
 /**
  * Provides data that allows you to change the size of the floating element —
@@ -5759,20 +5782,28 @@ const flip = (options, deps) => ({
  * width of the reference element.
  * @see https://floating-ui.com/docs/size
  */
-const size = (options, deps) => ({
-  ...size$1(options),
-  options: [options, deps]
-});
+const size = (options, deps) => {
+  const result = size$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 
 /**
  * Provides data to hide the floating element in applicable situations, such as
  * when it is not in the same clipping context as the reference element.
  * @see https://floating-ui.com/docs/hide
  */
-const hide = (options, deps) => ({
-  ...hide$1(options),
-  options: [options, deps]
-});
+const hide = (options, deps) => {
+  const result = hide$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 
 /**
  * Provides data to position an inner element of the floating element so that it
@@ -5780,10 +5811,14 @@ const hide = (options, deps) => ({
  * This wraps the core `arrow` middleware to allow React refs as the element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow = (options, deps) => ({
-  ...arrow$1(options),
-  options: [options, deps]
-});
+const arrow = (options, deps) => {
+  const result = arrow$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 
 // src/arrow.tsx
 var NAME$1 = "Arrow";
@@ -20120,15 +20155,17 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
     afterDatasetsDraw(chart) {
       if (!(content == null ? void 0 : content.showLabels)) return;
       const { ctx } = chart;
+      const chartHeight = chart.height;
+      const fontSize = Math.max(11, Math.min(14, Math.floor(chartHeight * 0.025)));
       chart.data.datasets.forEach((dataset, i) => {
         const meta = chart.getDatasetMeta(i);
         meta.data.forEach((bar, index) => {
           const value = dataset.data[index];
           ctx.save();
-          ctx.font = "12px sans-serif";
+          ctx.font = `bold ${fontSize}px sans-serif`;
           ctx.textAlign = "center";
-          ctx.fillStyle = "black";
-          ctx.fillText(value, bar.x, bar.y - 5);
+          ctx.fillStyle = "#0F172A";
+          ctx.fillText(value, bar.x, bar.y - 8);
           ctx.restore();
         });
       });
@@ -20148,10 +20185,10 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
     indexAxis: orientation === "horizontal" ? "y" : "x",
     layout: {
       padding: {
-        bottom: 0,
-        top: 0,
-        left: 0,
-        right: 0
+        bottom: 8,
+        top: 24,
+        left: 4,
+        right: 16
       }
     },
     plugins: {
@@ -20163,8 +20200,12 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
           return false;
         }),
         labels: {
-          boxWidth: 12,
-          boxHeight: 12
+          boxWidth: 16,
+          boxHeight: 16,
+          padding: 16,
+          font: { size: 13, weight: "normal" },
+          usePointStyle: true,
+          pointStyle: "rect"
         },
         position: "bottom"
       },
@@ -20175,12 +20216,21 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
         display: true,
         text: title,
         font: {
-          size: 18,
+          size: 16,
           weight: "bold"
         },
-        color: "#0F172A"
+        color: "#0F172A",
+        padding: 16
       },
       tooltip: {
+        mode: "index",
+        intersect: false,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        titleFont: { size: 13, weight: "bold" },
+        bodyFont: { size: 12 },
+        padding: 12,
+        borderColor: "#ccc",
+        borderWidth: 1,
         callbacks: {
           label: function(context) {
             var _a2, _b2;
@@ -20194,23 +20244,40 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
       x: {
         title: {
           display: !!x_axis_title,
-          text: x_axis_title
+          text: x_axis_title,
+          font: { size: 13, weight: "bold" },
+          padding: 8
+        },
+        ticks: {
+          autoSkip: true,
+          maxRotation: 45,
+          minRotation: 0,
+          font: { size: 12 },
+          maxTicksLimit: 12
         },
-        ticks: { autoSkip: false, maxRotation: 45, minRotation: 0 }
+        grid: {
+          color: "rgba(0, 0, 0, 0.05)"
+        }
       },
       y: {
         title: {
           display: true,
-          text: y_axis_title || ((data == null ? void 0 : data.datasets) && ((_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a.length) === 1 ? (_b = data == null ? void 0 : data.datasets) == null ? void 0 : _b[0].label : getAxisLabel(units != null ? units : ""))
+          text: y_axis_title || ((data == null ? void 0 : data.datasets) && ((_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a.length) === 1 ? (_b = data == null ? void 0 : data.datasets) == null ? void 0 : _b[0].label : getAxisLabel(units != null ? units : "")),
+          font: { size: 13, weight: "bold" },
+          padding: 12
         },
         beginAtZero: true,
         ticks: {
+          font: { size: 12 },
           callback: function(value) {
             if (units === "$") {
               return `${units}${formatValue(value)}`;
             }
             return units ? `${formatValue(value)} ${(units == null ? void 0 : units.length) < 3 ? units : ""}` : value;
           }
+        },
+        grid: {
+          color: "rgba(0, 0, 0, 0.05)"
         }
       }
     }
@@ -21589,10 +21656,10 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
     maintainAspectRatio: false,
     layout: {
       padding: {
-        bottom: 0,
-        top: 0,
-        left: 0,
-        right: 0
+        bottom: 8,
+        top: 8,
+        left: 4,
+        right: 16
       }
     },
     plugins: {
@@ -21604,8 +21671,12 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
           return false;
         }),
         labels: {
-          boxWidth: 12,
-          boxHeight: 12
+          boxWidth: 16,
+          boxHeight: 16,
+          padding: 16,
+          font: { size: 13, weight: "normal" },
+          usePointStyle: true,
+          pointStyle: "circle"
         },
         position: "bottom"
       },
@@ -21629,12 +21700,21 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
         display: true,
         text: title,
         font: {
-          size: 18,
+          size: 16,
           weight: "bold"
         },
-        color: "#0F172A"
+        color: "#0F172A",
+        padding: 16
       },
       tooltip: {
+        mode: "index",
+        intersect: false,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        titleFont: { size: 13, weight: "bold" },
+        bodyFont: { size: 12 },
+        padding: 12,
+        borderColor: "#ccc",
+        borderWidth: 1,
         callbacks: {
           label: function(context) {
             var _a2;
@@ -21648,26 +21728,43 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
       x: {
         title: {
           display: !!x_axis_title,
-          text: x_axis_title
+          text: x_axis_title,
+          font: { size: 13, weight: "bold" },
+          padding: 8
         },
-        ticks: { autoSkip: true, maxTicksLimit: 8, maxRotation: 45, minRotation: 0 }
+        ticks: {
+          autoSkip: true,
+          maxRotation: 45,
+          minRotation: 0,
+          font: { size: 12 },
+          maxTicksLimit: 10
+        },
+        grid: {
+          color: "rgba(0, 0, 0, 0.05)"
+        }
       },
       y: {
         title: {
           display: true,
-          text: y_axis_title || ((data == null ? void 0 : data.datasets) && ((_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a.length) === 1 ? (_b = data == null ? void 0 : data.datasets) == null ? void 0 : _b[0].label : getAxisLabel(units != null ? units : ""))
+          text: y_axis_title || ((data == null ? void 0 : data.datasets) && ((_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a.length) === 1 ? (_b = data == null ? void 0 : data.datasets) == null ? void 0 : _b[0].label : getAxisLabel(units != null ? units : "")),
+          font: { size: 13, weight: "bold" },
+          padding: 12
         },
         beginAtZero: true,
         ticks: {
+          font: { size: 12 },
           callback: function(value) {
             return units ? `${formatValue(value)} ${units}` : value;
           }
+        },
+        grid: {
+          color: "rgba(0, 0, 0, 0.05)"
         }
       }
     },
     elements: {
       line: {
-        tension: 0.1
+        tension: 0.3
       },
       point: {
         radius: 4
@@ -22475,8 +22572,12 @@ const PieChart = (props) => {
     plugins: {
       legend: {
         labels: {
-          boxWidth: 4,
-          boxHeight: 4
+          boxWidth: 16,
+          boxHeight: 16,
+          padding: 12,
+          font: { size: 13, weight: "normal" },
+          usePointStyle: true,
+          pointStyle: "circle"
         },
         position: "bottom"
       },
@@ -22493,19 +22594,21 @@ const PieChart = (props) => {
           const percent = value / total * 100;
           return percent >= 5 ? `${(_a = ctx.chart.data.labels) == null ? void 0 : _a[ctx.dataIndex]} ${value}` : "";
         },
-        color: "black",
-        stretch: 15,
+        color: "#0F172A",
+        stretch: 25,
+        padding: 4,
         font: {
           resizable: true,
-          minSize: 12,
-          maxSize: 18
+          minSize: 11,
+          maxSize: 14,
+          weight: "bold"
         },
         backgroundColor: (ctx) => {
           const dataset = ctx.dataset.data;
           const total = dataset.reduce((a, b) => a + b, 0);
           const value = dataset[ctx.dataIndex];
           const percent = value / total * 100;
-          return percent >= 5 ? "rgba(255,255,255,0.7)" : "transparent";
+          return percent >= 5 ? "rgba(255,255,255,0.85)" : "transparent";
         }
       },
       datalabels: {
@@ -22515,12 +22618,22 @@ const PieChart = (props) => {
         display: true,
         text: title,
         font: {
-          size: 18,
+          size: 16,
           weight: "bold"
         },
-        color: "#0F172A"
+        color: "#0F172A",
+        padding: {
+          bottom: 28,
+          top: 0
+        }
       },
       tooltip: {
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        titleFont: { size: 13, weight: "bold" },
+        bodyFont: { size: 12 },
+        padding: 12,
+        borderColor: "#ccc",
+        borderWidth: 1,
         callbacks: {
           label: function(context) {
             const value = context.parsed;
@@ -22531,10 +22644,10 @@ const PieChart = (props) => {
     },
     layout: {
       padding: {
-        bottom: 0,
-        top: 0,
-        left: 0,
-        right: 0
+        bottom: 4,
+        top: 24,
+        left: 4,
+        right: 4
       }
     }
   };
@@ -36903,7 +37016,7 @@ const own$2 = {}.hasOwnProperty;
  *   mdast tree.
  */
 function fromMarkdown(value, encoding, options) {
-  if (typeof encoding !== 'string') {
+  if (encoding && typeof encoding === 'object') {
     options = encoding;
     encoding = undefined;
   }
@@ -44634,7 +44747,9 @@ function CopilotKitChatbot({
   onResetReady,
   widgetIds,
   datasetId,
-  dashboardName
+  dashboardName,
+  onClearChat,
+  isClearing = false
 }) {
   var _a, _b, _c, _d;
   const { threadId, setThreadId } = useCopilotContext();
@@ -44743,25 +44858,46 @@ function CopilotKitChatbot({
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 h-full flex flex-col", children: [
-      chatMessages.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start px-4 py-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
-        {
-          onClick: handleExport,
-          disabled: isExporting,
-          className: cn(
-            "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md",
-            "bg-gray-100 border border-gray-200",
-            "text-gray-700 hover:bg-gray-200 hover:border-gray-300",
-            "disabled:opacity-50 disabled:cursor-not-allowed",
-            "transition-colors duration-150"
-          ),
-          title: "Export conversation as PDF",
-          children: [
-            isExporting ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "h-3.5 w-3.5" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export PDF" })
-          ]
-        }
-      ) }),
+      chatMessages.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-start gap-2 px-4 py-2 border-b border-gray-100", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: handleExport,
+            disabled: isExporting,
+            className: cn(
+              "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md",
+              "bg-gray-100 border border-gray-200",
+              "text-gray-700 hover:bg-gray-200 hover:border-gray-300",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              "transition-colors duration-150"
+            ),
+            title: "Export conversation as PDF",
+            children: [
+              isExporting ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export PDF" })
+            ]
+          }
+        ),
+        onClearChat && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: onClearChat,
+            disabled: isClearing,
+            className: cn(
+              "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md",
+              "bg-gray-100 border border-gray-200",
+              "text-gray-700 hover:bg-gray-200 hover:border-gray-300",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              "transition-colors duration-150"
+            ),
+            title: "Clear chat conversation",
+            children: [
+              isClearing ? /* @__PURE__ */ jsxRuntimeExports.jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(MessageCircleX, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Clear Chat" })
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: chatMessages.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-gray-500 text-xs mt-8", children: ((_b = widget.config) == null ? void 0 : _b.copilotInitialMessage) || ((_c = widget.config) == null ? void 0 : _c.placeholder) || "How can I help you today?" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         chatMessages.map((message) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
@@ -44838,7 +44974,9 @@ function ChatbotWidget({
   onResetReady,
   widgetIds,
   datasetId,
-  dashboardName
+  dashboardName,
+  onClearChat,
+  isClearing = false
 }) {
   var _a, _b;
   const styles = getStyleValues$4((_a = widget.config) == null ? void 0 : _a.styles);
@@ -44863,7 +45001,9 @@ function ChatbotWidget({
           onResetReady,
           widgetIds,
           datasetId,
-          dashboardName
+          dashboardName,
+          onClearChat,
+          isClearing
         }
       )
     }
@@ -45445,7 +45585,7 @@ function FiltersContent({
             ] }) : "Apply Filters"
           }
         ) }) }),
-        isEditing && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "top", children: "Save the layout first to apply filters" })
+        isEditing && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { side: "top", children: "Exit edit mode by saving or canceling your layout changes to apply filters" })
       ] }) })
     ] }) })
   ] });
@@ -45754,7 +45894,7 @@ var __spreadValues$8 = (a, b) => {
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 const CHART_REFRESH_TIMEOUT$3 = 3e3;
-const DEFAULT_COLORS$2 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const DEFAULT_COLORS$2 = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
 const clearChat$3 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
   console.log("clearChat called for widgetId:", widgetId);
@@ -46147,7 +46287,7 @@ var __spreadValues$7 = (a, b) => {
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const CHART_REFRESH_TIMEOUT$2 = 3e3;
-const DEFAULT_COLORS$1 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const DEFAULT_COLORS$1 = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
 const clearChat$2 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
   console.log("clearChat called for widgetId:", widgetId);
@@ -46572,7 +46712,7 @@ var __spreadValues$6 = (a, b) => {
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const CHART_REFRESH_TIMEOUT$1 = 3e3;
-const DEFAULT_COLORS = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const DEFAULT_COLORS = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
 const clearChat$1 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
   console.log("clearChat called for widgetId:", widgetId);
@@ -46764,11 +46904,23 @@ function SeriesBarChartComponent({
   }
   const transformedData = {
     labels,
-    datasets: series.map((seriesItem, index) => ({
-      label: seriesItem.name,
-      data: seriesItem.values,
-      backgroundColor: (seriesItem == null ? void 0 : seriesItem.colors) || (seriesItem == null ? void 0 : seriesItem.color) || finalColors[index % finalColors.length]
-    }))
+    datasets: series.map((seriesItem, index) => {
+      const color = (seriesItem == null ? void 0 : seriesItem.colors) || (seriesItem == null ? void 0 : seriesItem.color) || finalColors[index % finalColors.length];
+      return {
+        label: seriesItem.name,
+        data: seriesItem.values,
+        borderColor: color,
+        backgroundColor: color + "26",
+        // 15% opacity for subtle fill under curve
+        borderWidth: 2.5,
+        fill: false,
+        pointRadius: 4,
+        pointHoverRadius: 6,
+        pointBackgroundColor: color,
+        pointBorderColor: "#ffffff",
+        pointBorderWidth: 2
+      };
+    })
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SeriesLineChart,
@@ -47383,7 +47535,9 @@ function WidgetRenderer({
   pageId,
   onApplyFilters,
   isEditing = false,
-  dashboardName
+  dashboardName,
+  onClearChat,
+  isClearing
 }) {
   const handleConfigUpdate = (config) => {
     if (onConfigUpdate) {
@@ -47415,7 +47569,7 @@ function WidgetRenderer({
           }
         );
       case "chatbot":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(ChatbotWidget, { widget, showHeader: false, widgetBackendUrl, onResetReady, widgetIds, datasetId, dashboardName });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(ChatbotWidget, { widget, showHeader: false, widgetBackendUrl, onResetReady, widgetIds, datasetId, dashboardName, onClearChat: onClearChat ? () => onClearChat(widget.id) : void 0, isClearing: isClearing === widget.id });
       case "filters":
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           FiltersWidget,
@@ -48295,11 +48449,11 @@ function WidgetDashboard({
   const [internalSelectedWidget, setInternalSelectedWidget] = useState(selectedWidget);
   const [currentLayouts, setCurrentLayouts] = useState(defaultLayouts);
   const [draftLayouts, setDraftLayouts] = useState(defaultLayouts);
-  const [visibleClearButton, setVisibleClearButton] = useState("");
   const [showEditModal, setShowEditModal] = useState(false);
   const [editInitialQuery, setEditInitialQuery] = useState("");
   const [editingWidget, setEditingWidget] = useState(null);
   const [widgetResetFunctions, setWidgetResetFunctions] = useState(/* @__PURE__ */ new Map());
+  const [clearingChatWidget, setClearingChatWidget] = useState("");
   const displayWidgets = React__default.useMemo(() => {
     if (focusWidgetId) {
       return widgets.filter((w) => w.id === focusWidgetId);
@@ -48465,6 +48619,7 @@ function WidgetDashboard({
   }, []);
   const handleClearChat = async (widgetId) => {
     try {
+      setClearingChatWidget(widgetId);
       const response = await fetch(getApiUrl("/api/clear-chat"), {
         method: "POST",
         headers: {
@@ -48486,6 +48641,8 @@ function WidgetDashboard({
       }
     } catch (error) {
       console.error("Error clearing chat:", error);
+    } finally {
+      setClearingChatWidget("");
     }
   };
   const loadData = useCallback(async () => {
@@ -49015,10 +49172,10 @@ function WidgetDashboard({
               const filterStatus = w.type === "agent" ? getWidgetFilterStatus(w.id) : null;
               const badgeInfo = filterStatus ? getFilterStatusBadge(filterStatus.status) : null;
               const isFocusMode = focusWidgetId && w.id === focusWidgetId;
-              const widgetBaseStyles = "rounded-xl border border-gray-200 !bg-white";
-              const widgetHoverStyles = isEditing ? "hover:border-primary-500 hover:shadow-lg transition-all duration-200" : "";
-              const widgetShadow = "shadow-[0_2px_8px_-2px_rgba(0,0,0,0.15)]";
-              return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-widget-id": w.id, className: `${w.type === "text" || w.type === "spacer" ? `${((_b = (_a = w == null ? void 0 : w.config) == null ? void 0 : _a.content) == null ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles}` : "flex items-center"}` : `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles} p-4 ${isEditing ? "pb-14" : "pb-5"}`} ${isFocusMode ? "h-full" : ""} relative`, children: [
+              const widgetBaseStyles = "rounded-xl border-2 border-gray-300 !bg-white";
+              const widgetHoverStyles = "hover:border-primary-500 hover:shadow-lg transition-all duration-200 cursor-pointer";
+              const widgetShadow = "shadow-[0_4px_12px_-2px_rgba(0,0,0,0.2)]";
+              return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-widget-id": w.id, className: `${w.type === "text" || w.type === "spacer" ? `${((_b = (_a = w == null ? void 0 : w.config) == null ? void 0 : _a.content) == null ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles}` : "flex items-center"}` : `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles} p-4 ${isEditing ? "pb-14" : "pb-5"}`} ${isFocusMode ? "h-full" : ""} relative overflow-hidden`, children: [
                 w.type === "agent" && badgeInfo && !isApplyingFilters && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-2 right-2 z-10", title: (filterStatus == null ? void 0 : filterStatus.reason) || (filterStatus == null ? void 0 : filterStatus.error) || "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: badgeInfo.variant, className: "text-[10px] px-2 py-0.5 gap-1", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: badgeInfo.icon }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: badgeInfo.label })
@@ -49045,13 +49202,7 @@ function WidgetDashboard({
                     w.type !== "spacer" && w.type !== "chatbot" && /* @__PURE__ */ jsxRuntimeExports.jsx(Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${(w == null ? void 0 : w.type) === "text" || (w == null ? void 0 : w.type) === "spacer" ? `${isEditing ? "px-4" : ""}` : "h-full"} w-full relative`, children: [
-                  (w == null ? void 0 : w.type) === "chatbot" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w == null ? void 0 : w.id), onMouseOver: () => setVisibleClearButton(w == null ? void 0 : w.id), onMouseLeave: () => setVisibleClearButton(""), className: "absolute top-[12px] right-0 z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-primary-300 rounded-l-sm w-fit bg-primary-700 text-white cursor-pointer shadow-md transition-all", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessageCircleX, { className: "w-5 h-5" }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `absolute top-[56px] right-[16px] z-50 w-max py-1 text-xs px-2 rounded-sm text-white bg-gray-950 ${visibleClearButton === (w == null ? void 0 : w.id) ? "block" : "hidden"}`, children: "Clear Chat" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter((widget) => widget.type !== "chatbot").map((widget) => widget.id), datasetId, pageId, onApplyFilters, isEditing, dashboardName: ((_c = pageData == null ? void 0 : pageData.basic) == null ? void 0 : _c.title) || (pageData == null ? void 0 : pageData.name) || (pageData == null ? void 0 : pageData.title) })
-                ] })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${(w == null ? void 0 : w.type) === "text" || (w == null ? void 0 : w.type) === "spacer" ? `${isEditing ? "px-4" : ""}` : "h-full"} w-full relative`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter((widget) => widget.type !== "chatbot").map((widget) => widget.id), datasetId, pageId, onApplyFilters, isEditing, dashboardName: ((_c = pageData == null ? void 0 : pageData.basic) == null ? void 0 : _c.title) || (pageData == null ? void 0 : pageData.name) || (pageData == null ? void 0 : pageData.title), onClearChat: handleClearChat, isClearing: clearingChatWidget }) })
               ] }, w.id);
             })
           }
@@ -49346,7 +49497,7 @@ function PresentationMode({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 bg-white p-6 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full w-full rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 bg-white p-6 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full w-full rounded-xl border-2 border-gray-300 bg-white shadow-[0_4px_12px_-2px_rgba(0,0,0,0.2)] overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               WidgetRenderer,
               {
                 widget: currentFocusWidget,