dp-widgets-framework 1.7.7 → 1.7.9

package/dist/index.js

@@ -20,6 +20,7 @@ var runtimeClientGql = require('@copilotkit/runtime-client-gql');
 var reactCore = require('@copilotkit/react-core');
 var jsPDF = require('jspdf');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var SliderPrimitive = require('@radix-ui/react-slider');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var dateFns = require('date-fns');
 
@@ -48,6 +49,7 @@ var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPri
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ScrollAreaPrimitive);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 
 function getDefaultExportFromCjs (x) {
@@ -1457,40 +1459,40 @@ const KEYS = {
   ESCAPE: "Escape",
   TAB: "Tab"};
 
-var __defProp$q = Object.defineProperty;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b) => {
+var __defProp$u = Object.defineProperty;
+var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
+var __hasOwnProp$u = Object.prototype.hasOwnProperty;
+var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$u = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$q.call(b, prop))
-      __defNormalProp$q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
-        __defNormalProp$q(a, prop, b[prop]);
+    if (__hasOwnProp$u.call(b, prop))
+      __defNormalProp$u(a, prop, b[prop]);
+  if (__getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(b)) {
+      if (__propIsEnum$u.call(b, prop))
+        __defNormalProp$u(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$d = (source, exclude) => {
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$u.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
+  if (source != null && __getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$u.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Tabs = TabsPrimitive__namespace.Root;
 const TabsList = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$d(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$e(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TabsPrimitive__namespace.List,
-    __spreadValues$q({
+    __spreadValues$u({
       ref,
       className: cn(
         "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
@@ -1501,10 +1503,10 @@ const TabsList = React__namespace.forwardRef((_a, ref) => {
 });
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
 const TabsTrigger = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className } = _d, props = __objRest$d(_d, ["className"]);
+  var _d = _c, { className } = _d, props = __objRest$e(_d, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TabsPrimitive__namespace.Trigger,
-    __spreadValues$q({
+    __spreadValues$u({
       ref,
       className: cn(
         "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
@@ -1515,10 +1517,10 @@ const TabsTrigger = React__namespace.forwardRef((_c, ref) => {
 });
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
 const TabsContent = React__namespace.forwardRef((_e, ref) => {
-  var _f = _e, { className } = _f, props = __objRest$d(_f, ["className"]);
+  var _f = _e, { className } = _f, props = __objRest$e(_f, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TabsPrimitive__namespace.Content,
-    __spreadValues$q({
+    __spreadValues$u({
       ref,
       className: cn(
         "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -1529,40 +1531,40 @@ const TabsContent = React__namespace.forwardRef((_e, ref) => {
 });
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
 
-var __defProp$p = Object.defineProperty;
-var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
-var __hasOwnProp$p = Object.prototype.hasOwnProperty;
-var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$p = (a, b) => {
+var __defProp$t = Object.defineProperty;
+var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
+var __hasOwnProp$t = Object.prototype.hasOwnProperty;
+var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$t = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$p.call(b, prop))
-      __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(b)) {
-      if (__propIsEnum$p.call(b, prop))
-        __defNormalProp$p(a, prop, b[prop]);
+    if (__hasOwnProp$t.call(b, prop))
+      __defNormalProp$t(a, prop, b[prop]);
+  if (__getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(b)) {
+      if (__propIsEnum$t.call(b, prop))
+        __defNormalProp$t(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$c = (source, exclude) => {
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
+  if (source != null && __getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Input = React__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, type } = _b, props = __objRest$c(_b, ["className", "type"]);
+    var _b = _a, { className, type } = _b, props = __objRest$d(_b, ["className", "type"]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "input",
-      __spreadValues$p({
+      __spreadValues$t({
         type,
         className: cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
@@ -1575,30 +1577,30 @@ const Input = React__namespace.forwardRef(
 );
 Input.displayName = "Input";
 
-var __defProp$o = Object.defineProperty;
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$o = (a, b) => {
+var __defProp$s = Object.defineProperty;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$s = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$o.call(b, prop))
-      __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
-        __defNormalProp$o(a, prop, b[prop]);
+    if (__hasOwnProp$s.call(b, prop))
+      __defNormalProp$s(a, prop, b[prop]);
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b)) {
+      if (__propIsEnum$s.call(b, prop))
+        __defNormalProp$s(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$b = (source, exclude) => {
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
+  if (source != null && __getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1607,10 +1609,10 @@ const labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 const Label$1 = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$b(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$c(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     LabelPrimitive__namespace.Root,
-    __spreadValues$o({
+    __spreadValues$s({
       ref,
       className: cn(labelVariants(), className)
     }, props)
@@ -1618,42 +1620,42 @@ const Label$1 = React__namespace.forwardRef((_a, ref) => {
 });
 Label$1.displayName = LabelPrimitive__namespace.Root.displayName;
 
-var __defProp$n = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
+var __defProp$r = Object.defineProperty;
+var __defProps$k = Object.defineProperties;
+var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$r = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
+    if (__hasOwnProp$r.call(b, prop))
+      __defNormalProp$r(a, prop, b[prop]);
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b)) {
+      if (__propIsEnum$r.call(b, prop))
+        __defNormalProp$r(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
-var __objRest$a = (source, exclude) => {
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
+var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$n.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$n.call(source, prop))
+  if (source != null && __getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Switch = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$a(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$b(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SwitchPrimitives__namespace.Root,
-    __spreadProps$g(__spreadValues$n({
+    __spreadProps$k(__spreadValues$r({
       className: cn(
         "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
         className
@@ -1673,33 +1675,33 @@ const Switch = React__namespace.forwardRef((_a, ref) => {
 });
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
 
-var __defProp$m = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$m = (a, b) => {
+var __defProp$q = Object.defineProperty;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$q = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$m.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
+    if (__hasOwnProp$q.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
+  if (source != null && __getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1707,10 +1709,10 @@ var __objRest$9 = (source, exclude) => {
 const Select = SelectPrimitive__namespace.Root;
 const SelectValue = SelectPrimitive__namespace.Value;
 const SelectTrigger = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest$9(_b, ["className", "children"]);
+  var _b = _a, { className, children } = _b, props = __objRest$a(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     SelectPrimitive__namespace.Trigger,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@@ -1726,10 +1728,10 @@ const SelectTrigger = React__namespace.forwardRef((_a, ref) => {
 });
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
 const SelectScrollUpButton = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className } = _d, props = __objRest$9(_d, ["className"]);
+  var _d = _c, { className } = _d, props = __objRest$a(_d, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectPrimitive__namespace.ScrollUpButton,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "flex cursor-default items-center justify-center py-1",
@@ -1742,10 +1744,10 @@ const SelectScrollUpButton = React__namespace.forwardRef((_c, ref) => {
 });
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
 const SelectScrollDownButton = React__namespace.forwardRef((_e, ref) => {
-  var _f = _e, { className } = _f, props = __objRest$9(_f, ["className"]);
+  var _f = _e, { className } = _f, props = __objRest$a(_f, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectPrimitive__namespace.ScrollDownButton,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "flex cursor-default items-center justify-center py-1",
@@ -1758,10 +1760,10 @@ const SelectScrollDownButton = React__namespace.forwardRef((_e, ref) => {
 });
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
 const SelectContent = React__namespace.forwardRef((_g, ref) => {
-  var _h = _g, { className, children, position = "popper" } = _h, props = __objRest$9(_h, ["className", "children", "position"]);
+  var _h = _g, { className, children, position = "popper" } = _h, props = __objRest$a(_h, ["className", "children", "position"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     SelectPrimitive__namespace.Content,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -1789,10 +1791,10 @@ const SelectContent = React__namespace.forwardRef((_g, ref) => {
 });
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
 const SelectLabel = React__namespace.forwardRef((_i, ref) => {
-  var _j = _i, { className } = _j, props = __objRest$9(_j, ["className"]);
+  var _j = _i, { className } = _j, props = __objRest$a(_j, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectPrimitive__namespace.Label,
-    __spreadValues$m({
+    __spreadValues$q({
       ref,
       className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)
     }, props)
@@ -1800,10 +1802,10 @@ const SelectLabel = React__namespace.forwardRef((_i, ref) => {
 });
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
 const SelectItem = React__namespace.forwardRef((_k, ref) => {
-  var _l = _k, { className, children } = _l, props = __objRest$9(_l, ["className", "children"]);
+  var _l = _k, { className, children } = _l, props = __objRest$a(_l, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     SelectPrimitive__namespace.Item,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -1819,10 +1821,10 @@ const SelectItem = React__namespace.forwardRef((_k, ref) => {
 });
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
 const SelectSeparator = React__namespace.forwardRef((_m, ref) => {
-  var _n = _m, { className } = _n, props = __objRest$9(_n, ["className"]);
+  var _n = _m, { className } = _n, props = __objRest$a(_n, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectPrimitive__namespace.Separator,
-    __spreadValues$m({
+    __spreadValues$q({
       ref,
       className: cn("-mx-1 my-1 h-px bg-muted", className)
     }, props)
@@ -1830,42 +1832,42 @@ const SelectSeparator = React__namespace.forwardRef((_m, ref) => {
 });
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
 
-var __defProp$l = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
+var __defProp$p = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$8 = (source, exclude) => {
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
+  if (source != null && __getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const ScrollArea = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest$8(_b, ["className", "children"]);
+  var _b = _a, { className, children } = _b, props = __objRest$9(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     ScrollAreaPrimitive__namespace.Root,
-    __spreadProps$e(__spreadValues$l({
+    __spreadProps$i(__spreadValues$p({
       ref,
       className: cn("relative overflow-hidden", className)
     }, props), {
@@ -1879,10 +1881,10 @@ const ScrollArea = React__namespace.forwardRef((_a, ref) => {
 });
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
 const ScrollBar = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className, orientation = "vertical" } = _d, props = __objRest$8(_d, ["className", "orientation"]);
+  var _d = _c, { className, orientation = "vertical" } = _d, props = __objRest$9(_d, ["className", "orientation"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
-    __spreadProps$e(__spreadValues$l({
+    __spreadProps$i(__spreadValues$p({
       ref,
       orientation,
       className: cn(
@@ -1898,30 +1900,30 @@ const ScrollBar = React__namespace.forwardRef((_c, ref) => {
 });
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
 
-var __defProp$k = Object.defineProperty;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
+var __defProp$o = Object.defineProperty;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$7 = (source, exclude) => {
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
+  if (source != null && __getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1953,11 +1955,11 @@ const buttonVariants = classVarianceAuthority.cva(
 );
 const Button = React__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest$7(_b, ["className", "variant", "size", "asChild"]);
+    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest$8(_b, ["className", "variant", "size", "asChild"]);
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Comp,
-      __spreadValues$k({
+      __spreadValues$o({
         className: cn(buttonVariants({ variant, size, className })),
         ref
       }, props)
@@ -1966,30 +1968,30 @@ const Button = React__namespace.forwardRef(
 );
 Button.displayName = "Button";
 
-var __defProp$j = Object.defineProperty;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+var __defProp$n = Object.defineProperty;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$6 = (source, exclude) => {
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$n.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
+  if (source != null && __getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$n.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2009,10 +2011,10 @@ const alertVariants = classVarianceAuthority.cva(
   }
 );
 const Alert = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, variant } = _b, props = __objRest$6(_b, ["className", "variant"]);
+  var _b = _a, { className, variant } = _b, props = __objRest$7(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$j({
+    __spreadValues$n({
       ref,
       role: "alert",
       className: cn(alertVariants({ variant }), className)
@@ -2021,10 +2023,10 @@ const Alert = React__namespace.forwardRef((_a, ref) => {
 });
 Alert.displayName = "Alert";
 const AlertTitle = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className } = _d, props = __objRest$6(_d, ["className"]);
+  var _d = _c, { className } = _d, props = __objRest$7(_d, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "h5",
-    __spreadValues$j({
+    __spreadValues$n({
       ref,
       className: cn("mb-1 font-medium leading-none tracking-tight", className)
     }, props)
@@ -2032,10 +2034,10 @@ const AlertTitle = React__namespace.forwardRef((_c, ref) => {
 });
 AlertTitle.displayName = "AlertTitle";
 const AlertDescription = React__namespace.forwardRef((_e, ref) => {
-  var _f = _e, { className } = _f, props = __objRest$6(_f, ["className"]);
+  var _f = _e, { className } = _f, props = __objRest$7(_f, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$j({
+    __spreadValues$n({
       ref,
       className: cn("text-sm [&_p]:leading-relaxed", className)
     }, props)
@@ -2068,25 +2070,25 @@ function CodeEditor({
   );
 }
 
-var __defProp$i = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+var __defProp$m = Object.defineProperty;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
 function SearchWidgetFacetSettings({
   value = [],
   onChange,
@@ -2127,14 +2129,14 @@ function SearchWidgetFacetSettings({
   };
   const removeFacet = (index) => {
     const newFields = value.filter((_, i) => i !== index);
-    const reorderedFields = newFields.map((field, idx) => __spreadProps$d(__spreadValues$i({}, field), {
+    const reorderedFields = newFields.map((field, idx) => __spreadProps$h(__spreadValues$m({}, field), {
       order: idx
     }));
     onChange(reorderedFields);
   };
   const updateFacet = (index, updates) => {
     const newFields = value.map(
-      (field, i) => i === index ? __spreadValues$i(__spreadValues$i({}, field), updates) : field
+      (field, i) => i === index ? __spreadValues$m(__spreadValues$m({}, field), updates) : field
     );
     onChange(newFields);
   };
@@ -2145,8 +2147,8 @@ function SearchWidgetFacetSettings({
     const newFields = [...value];
     const newIndex = direction === "up" ? index - 1 : index + 1;
     [newFields[index], newFields[newIndex]] = [
-      __spreadProps$d(__spreadValues$i({}, newFields[newIndex]), { order: index }),
-      __spreadProps$d(__spreadValues$i({}, newFields[index]), { order: newIndex })
+      __spreadProps$h(__spreadValues$m({}, newFields[newIndex]), { order: index }),
+      __spreadProps$h(__spreadValues$m({}, newFields[index]), { order: newIndex })
     ];
     onChange(newFields);
   };
@@ -2232,25 +2234,25 @@ function SearchWidgetFacetSettings({
   ] });
 }
 
-var __defProp$h = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
+var __defProp$l = Object.defineProperty;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
 function WidgetSettingsPanel({
   pageId,
   widget,
@@ -2276,14 +2278,14 @@ function WidgetSettingsPanel({
     }
     const pageData = await pageResponse.json();
     const updatedWidgets = pageData.widgets.map(
-      (w) => w.id === widgetId ? __spreadValues$h(__spreadValues$h({}, w), updates) : w
+      (w) => w.id === widgetId ? __spreadValues$l(__spreadValues$l({}, w), updates) : w
     );
     const response = await fetch(getApiUrl(`/api/pages/${pageId}`), {
       method: "PUT",
       headers: {
         "Content-Type": "application/json"
       },
-      body: JSON.stringify(__spreadProps$c(__spreadValues$h({}, pageData), {
+      body: JSON.stringify(__spreadProps$g(__spreadValues$l({}, pageData), {
         widgets: updatedWidgets
       }))
     });
@@ -2342,12 +2344,12 @@ function WidgetSettingsPanel({
     }
   };
   const updateWidget = (updates) => {
-    const updatedWidget = __spreadValues$h(__spreadValues$h({}, localWidget), updates);
+    const updatedWidget = __spreadValues$l(__spreadValues$l({}, localWidget), updates);
     setLocalWidget(updatedWidget);
   };
   const updateConfig = (updates) => {
     console.log("Updating config with:", updates);
-    const newConfig = __spreadValues$h(__spreadValues$h({}, localWidget.config), updates);
+    const newConfig = __spreadValues$l(__spreadValues$l({}, localWidget.config), updates);
     console.log("New config will be:", newConfig);
     updateWidget({
       config: newConfig
@@ -2356,8 +2358,8 @@ function WidgetSettingsPanel({
   const updateStyle = (updates) => {
     var _a;
     updateWidget({
-      config: __spreadProps$c(__spreadValues$h({}, localWidget.config), {
-        styles: __spreadValues$h(__spreadValues$h({}, ((_a = localWidget.config) == null ? void 0 : _a.styles) || {}), updates)
+      config: __spreadProps$g(__spreadValues$l({}, localWidget.config), {
+        styles: __spreadValues$l(__spreadValues$l({}, ((_a = localWidget.config) == null ? void 0 : _a.styles) || {}), updates)
       })
     });
   };
@@ -2624,8 +2626,8 @@ function WidgetSettingsPanel({
               checked: (_k = (_j = (_i = widget.config) == null ? void 0 : _i.facets) == null ? void 0 : _j.enabled) != null ? _k : false,
               onCheckedChange: (checked) => {
                 var _a2, _b2, _c2;
-                const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-                  facets: __spreadProps$c(__spreadValues$h({}, ((_a2 = widget.config) == null ? void 0 : _a2.facets) || {}), {
+                const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+                  facets: __spreadProps$g(__spreadValues$l({}, ((_a2 = widget.config) == null ? void 0 : _a2.facets) || {}), {
                     enabled: checked,
                     fields: ((_c2 = (_b2 = widget.config) == null ? void 0 : _b2.facets) == null ? void 0 : _c2.fields) || []
                   })
@@ -2641,8 +2643,8 @@ function WidgetSettingsPanel({
             placeHolder: "Select facet field",
             value: widget.config.facets.fields || [],
             onChange: (fields) => {
-              const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-                facets: __spreadProps$c(__spreadValues$h({}, widget.config.facets), {
+              const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+                facets: __spreadProps$g(__spreadValues$l({}, widget.config.facets), {
                   fields
                 })
               });
@@ -2666,7 +2668,7 @@ function WidgetSettingsPanel({
             onValueChange: (value) => {
               var _a2;
               return updateConfig({
-                layout: __spreadProps$c(__spreadValues$h({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), { type: value })
+                layout: __spreadProps$g(__spreadValues$l({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), { type: value })
               });
             },
             children: [
@@ -2689,7 +2691,7 @@ function WidgetSettingsPanel({
             onValueChange: (value) => {
               var _a2;
               return updateConfig({
-                layout: __spreadProps$c(__spreadValues$h({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), {
+                layout: __spreadProps$g(__spreadValues$l({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), {
                   itemsPerPage: parseInt(value)
                 })
               });
@@ -2713,7 +2715,7 @@ function WidgetSettingsPanel({
             onCheckedChange: (checked) => {
               var _a2;
               return updateConfig({
-                layout: __spreadProps$c(__spreadValues$h({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), {
+                layout: __spreadProps$g(__spreadValues$l({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), {
                   infiniteScroll: checked
                 })
               });
@@ -2765,8 +2767,8 @@ function WidgetSettingsPanel({
             placeHolder: "Select metadata field",
             value: ((_l = (_k = widget.config) == null ? void 0 : _k.metadata) == null ? void 0 : _l.fields) || [],
             onChange: (fields) => {
-              const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-                metadata: __spreadProps$c(__spreadValues$h({}, widget.config.metadata), {
+              const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+                metadata: __spreadProps$g(__spreadValues$l({}, widget.config.metadata), {
                   fields
                 })
               });
@@ -2842,8 +2844,8 @@ function WidgetSettingsPanel({
             checked: (_f = (_e = (_d = widget.config) == null ? void 0 : _d.facets) == null ? void 0 : _e.enabled) != null ? _f : false,
             onCheckedChange: (checked) => {
               var _a2, _b2, _c2;
-              const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-                facets: __spreadProps$c(__spreadValues$h({}, ((_a2 = widget.config) == null ? void 0 : _a2.facets) || {}), {
+              const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+                facets: __spreadProps$g(__spreadValues$l({}, ((_a2 = widget.config) == null ? void 0 : _a2.facets) || {}), {
                   enabled: checked,
                   fields: ((_c2 = (_b2 = widget.config) == null ? void 0 : _b2.facets) == null ? void 0 : _c2.fields) || []
                 })
@@ -2860,8 +2862,8 @@ function WidgetSettingsPanel({
           placeHolder: "Select facet field",
           value: widget.config.facets.fields || [],
           onChange: (fields) => {
-            const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-              facets: __spreadProps$c(__spreadValues$h({}, widget.config.facets), {
+            const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+              facets: __spreadProps$g(__spreadValues$l({}, widget.config.facets), {
                 fields
               })
             });
@@ -2979,39 +2981,39 @@ function WidgetSettingsPanel({
   ] });
 }
 
-var __defProp$g = Object.defineProperty;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
+var __defProp$k = Object.defineProperty;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$5 = (source, exclude) => {
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
+  if (source != null && __getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Card = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$5(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$6(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn(
         "rounded-lg border bg-card text-card-foreground shadow-sm",
@@ -3022,10 +3024,10 @@ const Card = React__namespace.forwardRef((_a, ref) => {
 });
 Card.displayName = "Card";
 const CardHeader = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className } = _d, props = __objRest$5(_d, ["className"]);
+  var _d = _c, { className } = _d, props = __objRest$6(_d, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn("flex flex-col space-y-1.5 p-6", className)
     }, props)
@@ -3033,10 +3035,10 @@ const CardHeader = React__namespace.forwardRef((_c, ref) => {
 });
 CardHeader.displayName = "CardHeader";
 const CardTitle = React__namespace.forwardRef((_e, ref) => {
-  var _f = _e, { className } = _f, props = __objRest$5(_f, ["className"]);
+  var _f = _e, { className } = _f, props = __objRest$6(_f, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn(
         "text-2xl font-semibold leading-none tracking-tight",
@@ -3047,10 +3049,10 @@ const CardTitle = React__namespace.forwardRef((_e, ref) => {
 });
 CardTitle.displayName = "CardTitle";
 const CardDescription = React__namespace.forwardRef((_g, ref) => {
-  var _h = _g, { className } = _h, props = __objRest$5(_h, ["className"]);
+  var _h = _g, { className } = _h, props = __objRest$6(_h, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn("text-sm text-muted-foreground", className)
     }, props)
@@ -3058,15 +3060,15 @@ const CardDescription = React__namespace.forwardRef((_g, ref) => {
 });
 CardDescription.displayName = "CardDescription";
 const CardContent = React__namespace.forwardRef((_i, ref) => {
-  var _j = _i, { className } = _j, props = __objRest$5(_j, ["className"]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", __spreadValues$g({ ref, className: cn("p-6 pt-0", className) }, props));
+  var _j = _i, { className } = _j, props = __objRest$6(_j, ["className"]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", __spreadValues$k({ ref, className: cn("p-6 pt-0", className) }, props));
 });
 CardContent.displayName = "CardContent";
 const CardFooter = React__namespace.forwardRef((_k, ref) => {
-  var _l = _k, { className } = _l, props = __objRest$5(_l, ["className"]);
+  var _l = _k, { className } = _l, props = __objRest$6(_l, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn("flex items-center p-6 pt-0", className)
     }, props)
@@ -3175,30 +3177,141 @@ function WidgetPalette({ widgetBackendUrl } = {}) {
   ] });
 }
 
-var __defProp$f = Object.defineProperty;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+class WidgetService {
+  constructor() {
+    this.baseUrl = "/api/widgets";
+  }
+  async getWidgetTypes() {
+    try {
+      const response = await fetch(`${this.baseUrl}/types`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch widget types: ${response.statusText}`);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error("Error fetching widget types:", error);
+      throw error;
+    }
+  }
+  async getWidgetTemplates() {
+    try {
+      const response = await fetch(`${this.baseUrl}/templates`);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch widget templates: ${response.statusText}`
+        );
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error fetching widget templates:", error);
+      throw error;
+    }
+  }
+  async getWidgetCategories() {
+    try {
+      const response = await fetch(`${this.baseUrl}/categories`);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch widget categories: ${response.statusText}`
+        );
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error fetching widget categories:", error);
+      throw error;
+    }
+  }
+  async getPageWidgets(pageId) {
+    try {
+      const response = await fetch(`${this.baseUrl}/page/${pageId}`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch page widgets: ${response.statusText}`);
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error fetching page widgets:", error);
+      throw error;
+    }
+  }
+  async saveWidget(widget) {
+    try {
+      const response = await fetch(this.baseUrl, {
+        method: widget.id ? "PUT" : "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(widget)
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to save widget: ${response.statusText}`);
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error saving widget:", error);
+      throw error;
+    }
+  }
+  async deleteWidget(widgetId) {
+    try {
+      const response = await fetch(`${this.baseUrl}/${widgetId}`, {
+        method: "DELETE"
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to delete widget: ${response.statusText}`);
+      }
+      return true;
+    } catch (error) {
+      console.error("Error deleting widget:", error);
+      throw error;
+    }
+  }
+  async updateWidgetPositions(widgets) {
+    try {
+      const response = await fetch(`${this.baseUrl}/positions`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(widgets)
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Failed to update widget positions: ${response.statusText}`
+        );
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error updating widget positions:", error);
+      throw error;
+    }
+  }
+}
+
+var __defProp$j = Object.defineProperty;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$4 = (source, exclude) => {
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
+  if (source != null && __getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3225,8 +3338,8 @@ const badgeVariants = classVarianceAuthority.cva(
   }
 );
 function Badge(_a) {
-  var _b = _a, { className, variant } = _b, props = __objRest$4(_b, ["className", "variant"]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", __spreadValues$f({ className: cn(badgeVariants({ variant }), className) }, props));
+  var _b = _a, { className, variant } = _b, props = __objRest$5(_b, ["className", "variant"]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", __spreadValues$j({ className: cn(badgeVariants({ variant }), className) }, props));
 }
 
 // src/primitive.tsx
@@ -6862,30 +6975,30 @@ var Root3 = Tooltip$2;
 var Trigger = TooltipTrigger$1;
 var Content2 = TooltipContent$1;
 
-var __defProp$e = Object.defineProperty;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
+var __defProp$i = Object.defineProperty;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$3 = (source, exclude) => {
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+  if (source != null && __getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -6894,10 +7007,10 @@ const TooltipProvider = Provider;
 const Tooltip$1 = Root3;
 const TooltipTrigger = Trigger;
 const TooltipContent = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest$3(_b, ["className", "sideOffset"]);
+  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest$4(_b, ["className", "sideOffset"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Content2,
-    __spreadValues$e({
+    __spreadValues$i({
       ref,
       sideOffset,
       className: cn(
@@ -7059,11 +7172,16 @@ function getWidgetStyles(widget) {
   };
 }
 function shuffleColors(colors, count) {
-  const shuffled = [...colors].sort(() => Math.random() - 0.5);
-  while (shuffled.length < count) {
-    shuffled.push(...[...colors].sort(() => Math.random() - 0.5));
+  const shuffled = [...colors];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
   }
-  return shuffled.slice(0, count);
+  let result = [...shuffled];
+  while (result.length < count) {
+    result.push(...shuffled);
+  }
+  return result.slice(0, count);
 }
 function getBorderRadiusValue(value) {
   switch (value) {
@@ -7094,25 +7212,25 @@ function getPaddingValue(value) {
   }
 }
 
-var __defProp$d = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$h = Object.defineProperty;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 function FacetWidget({
   widget,
   showHeader = true,
@@ -7171,7 +7289,7 @@ function FacetWidget({
   };
   const updateConfig = (newFields) => {
     if (onConfigUpdate) {
-      onConfigUpdate(__spreadProps$b(__spreadValues$d({}, widget.config), {
+      onConfigUpdate(__spreadProps$f(__spreadValues$h({}, widget.config), {
         fields: newFields
       }));
     }
@@ -20168,9 +20286,28 @@ function BarChart({ orientation, title, data, options, className, units, content
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { data, options: options != null ? options : defaultOptions, plugins: [barValuePlugin] });
 }
 
+var __defProp$g = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
-function SeriesChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
-  var _a, _b;
+function SeriesChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title, chartSettings }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
   const formatValue = (value) => {
     const numValue = typeof value === "string" ? parseFloat(value) : value;
     if (!isNaN(numValue)) {
@@ -20240,16 +20377,6 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
       datalabels: {
         display: false
       },
-      title: {
-        display: true,
-        text: title,
-        font: {
-          size: 16,
-          weight: "bold"
-        },
-        color: "#0F172A",
-        padding: 16
-      },
       tooltip: {
         mode: "index",
         intersect: false,
@@ -20310,7 +20437,53 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { data, options: options != null ? options : defaultOptions, plugins: [barValuePlugin] });
+  const mergedOptions = chartSettings ? __spreadProps$e(__spreadValues$g({}, defaultOptions), {
+    plugins: __spreadProps$e(__spreadValues$g({}, defaultOptions.plugins), {
+      legend: __spreadProps$e(__spreadValues$g({}, (_c = defaultOptions.plugins) == null ? void 0 : _c.legend), {
+        display: chartSettings.showLegend !== false,
+        labels: __spreadProps$e(__spreadValues$g({}, (_e = (_d = defaultOptions.plugins) == null ? void 0 : _d.legend) == null ? void 0 : _e.labels), {
+          boxWidth: (_f = chartSettings.legendBoxSize) != null ? _f : 16,
+          boxHeight: (_g = chartSettings.legendBoxSize) != null ? _g : 16,
+          font: { size: (_h = chartSettings.legendFontSize) != null ? _h : 13 }
+        })
+      }),
+      tooltip: __spreadProps$e(__spreadValues$g({}, (_i = defaultOptions.plugins) == null ? void 0 : _i.tooltip), {
+        bodyFont: { size: (_j = chartSettings.tooltipFontSize) != null ? _j : 12 },
+        titleFont: { size: (_k = chartSettings.tooltipFontSize) != null ? _k : 12 }
+      })
+    }),
+    scales: __spreadProps$e(__spreadValues$g({}, defaultOptions.scales), {
+      x: __spreadProps$e(__spreadValues$g({}, (_l = defaultOptions.scales) == null ? void 0 : _l.x), {
+        title: __spreadProps$e(__spreadValues$g({}, (_n = (_m = defaultOptions.scales) == null ? void 0 : _m.x) == null ? void 0 : _n.title), {
+          font: { size: (_o = chartSettings.xAxisTitleFontSize) != null ? _o : 13, weight: "bold" }
+        }),
+        ticks: __spreadProps$e(__spreadValues$g({}, (_q = (_p = defaultOptions.scales) == null ? void 0 : _p.x) == null ? void 0 : _q.ticks), {
+          font: { size: (_r = chartSettings.xAxisTickFontSize) != null ? _r : 12 }
+        })
+      }),
+      y: __spreadProps$e(__spreadValues$g({}, (_s = defaultOptions.scales) == null ? void 0 : _s.y), {
+        title: __spreadProps$e(__spreadValues$g({}, (_u = (_t = defaultOptions.scales) == null ? void 0 : _t.y) == null ? void 0 : _u.title), {
+          font: { size: (_v = chartSettings.yAxisTitleFontSize) != null ? _v : 13, weight: "bold" }
+        }),
+        ticks: __spreadProps$e(__spreadValues$g({}, (_x = (_w = defaultOptions.scales) == null ? void 0 : _w.y) == null ? void 0 : _x.ticks), {
+          font: { size: (_y = chartSettings.yAxisTickFontSize) != null ? _y : 12 }
+        })
+      })
+    })
+  }) : defaultOptions;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
+    ((chartSettings == null ? void 0 : chartSettings.titleText) || title) && (chartSettings == null ? void 0 : chartSettings.showTitle) !== false && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        style: {
+          fontSize: `${(_z = chartSettings == null ? void 0 : chartSettings.titleFontSize) != null ? _z : 16}px`
+        },
+        className: "font-bold text-slate-900 text-center px-2 pt-4 pb-2 select-text cursor-text shrink-0",
+        children: (chartSettings == null ? void 0 : chartSettings.titleText) || title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { data, options: options != null ? options : mergedOptions, plugins: [barValuePlugin] }) })
+  ] });
 }
 
 /*!
@@ -21661,9 +21834,28 @@ var plugin$1 = {
   }
 };
 
-Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
-function SeriesLineChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
-  var _a, _b;
+var __defProp$f = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_tooltip, plugin_legend);
+function SeriesLineChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title, chartSettings }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
   const formatValue = (value) => {
     const numValue = typeof value === "string" ? parseFloat(value) : value;
     if (!isNaN(numValue)) {
@@ -21724,16 +21916,6 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
         },
         formatter: (value) => value
       },
-      title: {
-        display: true,
-        text: title,
-        font: {
-          size: 16,
-          weight: "bold"
-        },
-        color: "#0F172A",
-        padding: 16
-      },
       tooltip: {
         mode: "index",
         intersect: false,
@@ -21799,7 +21981,68 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Line, { data, options: options != null ? options : defaultOptions, plugins: [plugin$1] });
+  const mergedOptions = chartSettings ? __spreadProps$d(__spreadValues$f({}, defaultOptions), {
+    plugins: __spreadProps$d(__spreadValues$f({}, defaultOptions.plugins), {
+      legend: __spreadProps$d(__spreadValues$f({}, (_c = defaultOptions.plugins) == null ? void 0 : _c.legend), {
+        display: chartSettings.showLegend !== false,
+        labels: __spreadProps$d(__spreadValues$f({}, (_e = (_d = defaultOptions.plugins) == null ? void 0 : _d.legend) == null ? void 0 : _e.labels), {
+          boxWidth: (_f = chartSettings.legendBoxSize) != null ? _f : 16,
+          boxHeight: (_g = chartSettings.legendBoxSize) != null ? _g : 16,
+          font: { size: (_h = chartSettings.legendFontSize) != null ? _h : 13 }
+        })
+      }),
+      datalabels: __spreadProps$d(__spreadValues$f({}, (_i = defaultOptions.plugins) == null ? void 0 : _i.datalabels), {
+        display: (context) => {
+          var _a2;
+          return context.dataset.data[context.dataIndex] !== null && ((_a2 = chartSettings.showLabels) != null ? _a2 : false);
+        },
+        font: { size: (_j = chartSettings.dataLabelsFontSize) != null ? _j : 12 }
+      }),
+      tooltip: __spreadProps$d(__spreadValues$f({}, (_k = defaultOptions.plugins) == null ? void 0 : _k.tooltip), {
+        bodyFont: { size: (_l = chartSettings.tooltipFontSize) != null ? _l : 12 },
+        titleFont: { size: (_m = chartSettings.tooltipFontSize) != null ? _m : 12 }
+      })
+    }),
+    scales: __spreadProps$d(__spreadValues$f({}, defaultOptions.scales), {
+      x: __spreadProps$d(__spreadValues$f({}, (_n = defaultOptions.scales) == null ? void 0 : _n.x), {
+        title: __spreadProps$d(__spreadValues$f({}, (_p = (_o = defaultOptions.scales) == null ? void 0 : _o.x) == null ? void 0 : _p.title), {
+          font: { size: (_q = chartSettings.xAxisTitleFontSize) != null ? _q : 13, weight: "bold" }
+        }),
+        ticks: __spreadProps$d(__spreadValues$f({}, (_s = (_r = defaultOptions.scales) == null ? void 0 : _r.x) == null ? void 0 : _s.ticks), {
+          font: { size: (_t = chartSettings.xAxisTickFontSize) != null ? _t : 12 }
+        })
+      }),
+      y: __spreadProps$d(__spreadValues$f({}, (_u = defaultOptions.scales) == null ? void 0 : _u.y), {
+        title: __spreadProps$d(__spreadValues$f({}, (_w = (_v = defaultOptions.scales) == null ? void 0 : _v.y) == null ? void 0 : _w.title), {
+          font: { size: (_x = chartSettings.yAxisTitleFontSize) != null ? _x : 13, weight: "bold" }
+        }),
+        ticks: __spreadProps$d(__spreadValues$f({}, (_z = (_y = defaultOptions.scales) == null ? void 0 : _y.y) == null ? void 0 : _z.ticks), {
+          font: { size: (_A = chartSettings.yAxisTickFontSize) != null ? _A : 12 }
+        })
+      })
+    }),
+    elements: {
+      line: {
+        tension: (_B = chartSettings.lineTension) != null ? _B : 0.3
+      },
+      point: {
+        radius: (_C = chartSettings.pointRadius) != null ? _C : 4
+      }
+    }
+  }) : defaultOptions;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
+    ((chartSettings == null ? void 0 : chartSettings.titleText) || title) && (chartSettings == null ? void 0 : chartSettings.showTitle) !== false && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        style: {
+          fontSize: `${(_D = chartSettings == null ? void 0 : chartSettings.titleFontSize) != null ? _D : 16}px`
+        },
+        className: "font-bold text-slate-900 text-center px-2 pt-4 pb-2 select-text cursor-text shrink-0",
+        children: (chartSettings == null ? void 0 : chartSettings.titleText) || title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Line, { data, options: options != null ? options : mergedOptions, plugins: [plugin$1] }) })
+  ] });
 }
 
 /*!
@@ -22584,9 +22827,29 @@ var plugin = {
     },
 };
 
+var __defProp$e = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 Chart$1.register(ArcElement, plugin_tooltip, plugin_legend);
 const PieChart = (props) => {
-  const { data, title, options, units, content } = props;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  const { data, title, options, units, content, chartSettings } = props;
   const formatValue = (value) => {
     const numValue = typeof value === "string" ? parseFloat(value) : value;
     if (units === "$" && !isNaN(numValue)) {
@@ -22611,16 +22874,16 @@ const PieChart = (props) => {
       },
       outlabels: {
         display: (context) => {
-          var _a;
-          return context.dataset.data[context.dataIndex] !== null && ((_a = content == null ? void 0 : content.showLabels) != null ? _a : false);
+          var _a2;
+          return context.dataset.data[context.dataIndex] !== null && ((_a2 = content == null ? void 0 : content.showLabels) != null ? _a2 : false);
         },
         text: (ctx) => {
-          var _a;
+          var _a2;
           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 ? `${(_a = ctx.chart.data.labels) == null ? void 0 : _a[ctx.dataIndex]} ${value}` : "";
+          return percent >= 5 ? `${(_a2 = ctx.chart.data.labels) == null ? void 0 : _a2[ctx.dataIndex]} ${value}` : "";
         },
         color: "#0F172A",
         stretch: 25,
@@ -22642,19 +22905,6 @@ const PieChart = (props) => {
       datalabels: {
         display: false
       },
-      title: {
-        display: true,
-        text: title,
-        font: {
-          size: 16,
-          weight: "bold"
-        },
-        color: "#0F172A",
-        padding: {
-          bottom: 28,
-          top: 0
-        }
-      },
       tooltip: {
         backgroundColor: "rgba(0, 0, 0, 0.8)",
         titleFont: { size: 13, weight: "bold" },
@@ -22679,7 +22929,41 @@ const PieChart = (props) => {
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Pie, { data, options: options != null ? options : defaultOptions, plugins: [plugin] });
+  const mergedOptions = chartSettings ? __spreadProps$c(__spreadValues$e({}, defaultOptions), {
+    plugins: __spreadProps$c(__spreadValues$e({}, defaultOptions.plugins), {
+      legend: __spreadProps$c(__spreadValues$e({}, (_a = defaultOptions.plugins) == null ? void 0 : _a.legend), {
+        display: chartSettings.showLegend !== false,
+        labels: __spreadProps$c(__spreadValues$e({}, (_c = (_b = defaultOptions.plugins) == null ? void 0 : _b.legend) == null ? void 0 : _c.labels), {
+          boxWidth: (_d = chartSettings.legendBoxSize) != null ? _d : 16,
+          boxHeight: (_e = chartSettings.legendBoxSize) != null ? _e : 16,
+          font: { size: (_f = chartSettings.legendFontSize) != null ? _f : 13 }
+        })
+      }),
+      outlabels: __spreadProps$c(__spreadValues$e({}, (_g = defaultOptions.plugins) == null ? void 0 : _g.outlabels), {
+        font: __spreadProps$c(__spreadValues$e({}, (_i = (_h = defaultOptions.plugins) == null ? void 0 : _h.outlabels) == null ? void 0 : _i.font), {
+          minSize: (_j = chartSettings.dataLabelsFontSize) != null ? _j : 11,
+          maxSize: ((_k = chartSettings.dataLabelsFontSize) != null ? _k : 12) + 2
+        })
+      }),
+      tooltip: __spreadProps$c(__spreadValues$e({}, (_l = defaultOptions.plugins) == null ? void 0 : _l.tooltip), {
+        bodyFont: { size: (_m = chartSettings.tooltipFontSize) != null ? _m : 12 },
+        titleFont: { size: (_n = chartSettings.tooltipFontSize) != null ? _n : 12 }
+      })
+    })
+  }) : defaultOptions;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
+    ((chartSettings == null ? void 0 : chartSettings.titleText) || title) && (chartSettings == null ? void 0 : chartSettings.showTitle) !== false && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        style: {
+          fontSize: `${(_o = chartSettings == null ? void 0 : chartSettings.titleFontSize) != null ? _o : 16}px`
+        },
+        className: "font-bold text-slate-900 text-center px-2 pt-4 pb-2 select-text cursor-text shrink-0",
+        children: (chartSettings == null ? void 0 : chartSettings.titleText) || title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pie, { data, options: options != null ? options : mergedOptions, plugins: [plugin] }) })
+  ] });
 };
 
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
@@ -43604,27 +43888,27 @@ function SummaryWidget({ title, data, metadata, className }) {
   ] });
 }
 
-var __defProp$c = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 const CHART_REFRESH_TIMEOUT$4 = 3e3;
-const DEFAULT_COLORS$3 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const DEFAULT_COLORS$4 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
 const LINE_COLORS = ["#243D84", "#69238B", "#4A959F", "#D0A677", "#B31E47", "#396431"];
 const clearChat$5 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
@@ -43654,7 +43938,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
   const baseState = { dataset_id: datasetId || "home_generation_dataset" };
   switch (agentType) {
     case "Pie Chart Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         pie_chart_data: {
           title: "",
           type: "pie",
@@ -43665,7 +43949,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
       }, baseState);
     case "Line Chart Agent":
     case "Bar Chart Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         bar_chart_data: {
           title: "",
           type: agentType === "Line Chart Agent" ? "line" : "bar",
@@ -43677,7 +43961,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
       }, baseState);
     case "Series Bar Chart Agent":
     case "Series Line Chart Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         series_bar_chart_data: {
           title: "",
           type: "series_bar",
@@ -43703,7 +43987,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
         }
       }, baseState);
     case "Data Grid Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         matrix_grid_data: {
           title: "",
           type: "data_grid",
@@ -43714,7 +43998,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
         }
       }, baseState);
     case "Summary Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         summary_data: {
           title: "",
           type: "summary",
@@ -43723,7 +44007,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
         }
       }, baseState);
     default:
-      return __spreadValues$c({ widget_ids: widgetIds }, baseState);
+      return __spreadValues$d({ widget_ids: widgetIds }, baseState);
   }
 };
 const loadAgentState$5 = async (widgetBackendUrl, threadId, agentName) => {
@@ -43763,7 +44047,7 @@ const parseAndUpdateChartState$4 = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$c({}, prevState);
+          const newChartState = __spreadValues$d({}, prevState);
           if (chartData.bar_chart_data) {
             newChartState.bar_chart_data = chartData.bar_chart_data;
           }
@@ -43862,7 +44146,7 @@ function BarChartComponent({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$3, labels == null ? void 0 : labels.length);
+    return shuffleColors(DEFAULT_COLORS$4, labels == null ? void 0 : labels.length);
   }, [labels.length]);
   if (isEmpty) {
     return createLoadingComponent$5();
@@ -43928,7 +44212,7 @@ function SeriesBarChartComponent$2({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$3, series == null ? void 0 : series.length);
+    return shuffleColors(DEFAULT_COLORS$4, series == null ? void 0 : series.length);
   }, [series.length]);
   if (isEmpty) {
     return createLoadingComponent$5();
@@ -43992,7 +44276,7 @@ function SeriesLineChartComponent({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors([...LINE_COLORS, ...DEFAULT_COLORS$3], series == null ? void 0 : series.length);
+    return shuffleColors([...LINE_COLORS, ...DEFAULT_COLORS$4], series == null ? void 0 : series.length);
   }, [series.length]);
   if (isEmpty) {
     return createLoadingComponent$5();
@@ -44061,7 +44345,7 @@ function PieChartComponent$1({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
   const backgroundColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$3, labels.length);
+    return shuffleColors(DEFAULT_COLORS$4, labels.length);
   }, [labels.length]);
   if (isEmpty) {
     return createLoadingComponent$5();
@@ -44240,7 +44524,7 @@ function SummaryComponent({
   React.useEffect(() => {
     if (isEmpty && query && isFirstLoad && !(summaryState == null ? void 0 : summaryState.agent_message) && !hasCalledRef.current) {
       hasCalledRef.current = true;
-      setChartState(__spreadProps$a(__spreadValues$c({}, summaryState), {
+      setChartState(__spreadProps$b(__spreadValues$d({}, summaryState), {
         widget_ids
       }));
       setTimeout(() => {
@@ -44317,7 +44601,7 @@ function CopilotKitAgent({
     if (apiCallCount >= 10) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$a(__spreadValues$c({}, prevState), {
+      setChartState((prevState) => __spreadProps$b(__spreadValues$d({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -44726,25 +45010,25 @@ function exportChatToPDF(options) {
   doc.save(filename);
 }
 
-var __defProp$b = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 const getStyleValues$4 = (styles = {}) => {
   const borderRadiusMap = {
     none: "0px",
@@ -44864,7 +45148,7 @@ function CopilotKitChatbot({
   const handleSubmit = (e) => {
     e.preventDefault();
     if (!inputValue.trim()) return;
-    setChatbotState((prevState) => __spreadProps$9(__spreadValues$b({}, prevState), {
+    setChatbotState((prevState) => __spreadProps$a(__spreadValues$c({}, prevState), {
       widget_ids: widgetIds,
       dataset_id: datasetId
     }));
@@ -45038,42 +45322,42 @@ function ChatbotWidget({
   );
 }
 
-var __defProp$a = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$2 = (source, exclude) => {
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
+  if (source != null && __getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Checkbox = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$2(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$3(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     CheckboxPrimitive__namespace.Root,
-    __spreadProps$8(__spreadValues$a({
+    __spreadProps$9(__spreadValues$b({
       ref,
       className: cn(
         "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
@@ -45092,25 +45376,25 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
 });
 Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
 
-var __defProp$9 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 const FILTER_REFRESH_TIMEOUT = 3e3;
 const clearChat$4 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
@@ -45179,7 +45463,7 @@ const parseAndUpdateFilterState = (apiResponse, setFilterState) => {
       if (parsedState.state) {
         const filterData = parsedState.state;
         setFilterState((prevState) => {
-          const newFilterState = __spreadValues$9({}, prevState);
+          const newFilterState = __spreadValues$a({}, prevState);
           if (filterData.column_values) {
             newFilterState.column_values = filterData.column_values;
           }
@@ -45268,7 +45552,7 @@ function TableSelectionConfirmation({
         {
           value: selectedTables[col.column] || "",
           onChange: (e) => {
-            setSelectedTables((prev) => __spreadProps$7(__spreadValues$9({}, prev), {
+            setSelectedTables((prev) => __spreadProps$8(__spreadValues$a({}, prev), {
               [col.column]: e.target.value
             }));
           },
@@ -45384,7 +45668,7 @@ function FiltersContent({
     }
   }, [(_a = widget.config) == null ? void 0 : _a.filters, filterGroups]);
   const toggleGroup = (groupId) => {
-    setExpandedGroups((prev) => __spreadProps$7(__spreadValues$9({}, prev), {
+    setExpandedGroups((prev) => __spreadProps$8(__spreadValues$a({}, prev), {
       [groupId]: !prev[groupId]
     }));
   };
@@ -45397,7 +45681,7 @@ function FiltersContent({
       } else {
         newGroupFilters = groupFilters.filter((id) => id !== optionId);
       }
-      const newFilters = __spreadProps$7(__spreadValues$9({}, prev), {
+      const newFilters = __spreadProps$8(__spreadValues$a({}, prev), {
         [groupId]: newGroupFilters
       });
       if (onFilterChange) {
@@ -45407,7 +45691,7 @@ function FiltersContent({
     });
   };
   const handleSearchChange = (groupId, query2) => {
-    setSearchQueries((prev) => __spreadProps$7(__spreadValues$9({}, prev), {
+    setSearchQueries((prev) => __spreadProps$8(__spreadValues$a({}, prev), {
       [groupId]: query2
     }));
   };
@@ -45425,7 +45709,7 @@ function FiltersContent({
   };
   const clearGroupFilters = (groupId) => {
     setSelectedFilters((prev) => {
-      const newFilters = __spreadProps$7(__spreadValues$9({}, prev), { [groupId]: [] });
+      const newFilters = __spreadProps$8(__spreadValues$a({}, prev), { [groupId]: [] });
       if (onFilterChange) {
         onFilterChange(newFilters);
       }
@@ -45587,7 +45871,7 @@ function FiltersContent({
                       "Content-Type": "application/json"
                     },
                     body: JSON.stringify({
-                      config: __spreadProps$7(__spreadValues$9({}, widget.config), {
+                      config: __spreadProps$8(__spreadValues$a({}, widget.config), {
                         filters: filtersWithLabels
                       })
                     })
@@ -45667,7 +45951,7 @@ function CopilotKitFilters({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setFilterState((prevState) => __spreadProps$7(__spreadValues$9({}, prevState), {
+      setFilterState((prevState) => __spreadProps$8(__spreadValues$a({}, prevState), {
         agent_message: "Timeout: Unable to load filter data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -45808,7 +46092,7 @@ function CopilotKitFilters({
     startLoadingTimeout();
   }, [filterState.filter_columns, filterState.ambiguous_columns, (_f = widget.config) == null ? void 0 : _f.query, datasetId, appendMessage, setFilterState, setAgentState, startLoadingTimeout, setApiCallCount, setHasTimeoutError]);
   const handleCancelConfirmation = React.useCallback(() => {
-    setFilterState((prev) => __spreadProps$7(__spreadValues$9({}, prev), {
+    setFilterState((prev) => __spreadProps$8(__spreadValues$a({}, prev), {
       status: void 0,
       ambiguous_columns: void 0,
       message: void 0
@@ -45902,27 +46186,27 @@ function FiltersWidget({
   );
 }
 
-var __defProp$8 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 const CHART_REFRESH_TIMEOUT$3 = 3e3;
-const DEFAULT_COLORS$2 = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
+const DEFAULT_COLORS$3 = ["#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);
@@ -45996,7 +46280,7 @@ const parseAndUpdateChartState$3 = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$8({}, prevState);
+          const newChartState = __spreadValues$9({}, prevState);
           if (chartData.pie_chart_data) {
             newChartState.pie_chart_data = chartData.pie_chart_data;
           }
@@ -46045,9 +46329,11 @@ function PieChartComponent({
   startLoadingTimeout,
   clearLoadingTimeout,
   content,
-  hasWidgetData
+  hasWidgetData,
+  chartSettings,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const hasCalledRef = React.useRef(false);
   const labels = ((_b = (_a = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) || [];
   const values = ((_d = (_c = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.values) || [];
@@ -46055,6 +46341,10 @@ function PieChartComponent({
   const chartTitle = ((_g = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _g.title) || "";
   const units = ((_h = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _h.units) || "";
   const isEmpty = labels.length === 0 || values.length === 0;
+  React.useEffect(() => {
+    console.log("[PieChartComponent] chartSettings:", chartSettings);
+    console.log("[PieChartComponent] seriesColors:", chartSettings == null ? void 0 : chartSettings.seriesColors);
+  }, [chartSettings]);
   const handleRefresh = async () => {
     if (query) {
       await clearChat$3(widgetBackendUrl, widgetId);
@@ -46084,24 +46374,49 @@ function PieChartComponent({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, pieChartState]);
   const backgroundColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$2, labels.length);
+    return shuffleColors(DEFAULT_COLORS$3, labels.length);
   }, [labels.length]);
+  const sortedIndices = React.useMemo(() => {
+    return labels.map((label, index) => ({ label, index, value: values[index] })).sort((a, b) => a.label.localeCompare(b.label)).map((item) => item.index);
+  }, [labels, values]);
+  const sortedLabels = React.useMemo(() => {
+    return sortedIndices.map((i) => labels[i]);
+  }, [sortedIndices, labels]);
+  const sortedValues = React.useMemo(() => {
+    return sortedIndices.map((i) => values[i]);
+  }, [sortedIndices, values]);
+  const colors = React.useMemo(() => {
+    var _a2, _b2;
+    if ((chartSettings == null ? void 0 : chartSettings.seriesColors) && chartSettings.seriesColors.length > 0) {
+      return chartSettings.seriesColors.slice(0, sortedLabels.length);
+    }
+    return ((_b2 = (_a2 = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.colors) || sortedLabels.map((_, index) => backgroundColors[index % backgroundColors.length]);
+  }, [chartSettings == null ? void 0 : chartSettings.seriesColors, sortedLabels, (_j = (_i = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _i.data) == null ? void 0 : _j.colors]);
+  React.useEffect(() => {
+    var _a2;
+    if (!isEmpty && colors.length > 0 && !((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2.length) && onConfigUpdate && widgetId) {
+      onConfigUpdate(widgetId, {
+        chartSettings: __spreadProps$7(__spreadValues$9({}, chartSettings), {
+          seriesColors: colors
+        })
+      });
+    }
+  }, [sortedLabels.length, (_k = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _k.length, onConfigUpdate, widgetId, isEmpty]);
   if (isEmpty) {
     return createLoadingComponent$3();
   }
-  const colors = ((_j = (_i = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _i.data) == null ? void 0 : _j.colors) || labels.map((_, index) => backgroundColors[index % backgroundColors.length]);
   const transformedData = {
-    labels,
+    labels: sortedLabels,
     datasets: [
       {
         label: chartTitle || "Data",
-        data: values,
+        data: sortedValues,
         backgroundColor: colors,
         borderWidth: 0
       }
     ]
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units, content });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units, content, chartSettings });
 }
 function CopilotKitPieChart({
   widget,
@@ -46110,9 +46425,10 @@ function CopilotKitPieChart({
   onResetReady,
   widgetBackendUrl,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const isFirstLoad = (_a = widget.config) == null ? void 0 : _a.isFirstLoad;
   const content = (_b = widget.config) == null ? void 0 : _b.content;
   const widget_data = (_c = widget.widget_data) == null ? void 0 : _c.pie_chart_data;
@@ -46152,7 +46468,7 @@ function CopilotKitPieChart({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$6(__spreadValues$8({}, prevState), {
+      setChartState((prevState) => __spreadProps$7(__spreadValues$9({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -46252,7 +46568,9 @@ function CopilotKitPieChart({
         widgetId: widget.id,
         startLoadingTimeout,
         clearLoadingTimeout,
-        hasWidgetData: !!(((_o = (_n = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _n.labels) == null ? void 0 : _o.length) && ((_q = (_p = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _p.values) == null ? void 0 : _q.length))
+        hasWidgetData: !!(((_o = (_n = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _n.labels) == null ? void 0 : _o.length) && ((_q = (_p = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _p.values) == null ? void 0 : _q.length)),
+        chartSettings: (_r = widget.config) == null ? void 0 : _r.chartSettings,
+        onConfigUpdate
       }
     ) })
   ] });
@@ -46264,7 +46582,8 @@ function PieChartWidget({
   onResetReady,
   widgetIds,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
   var _a, _b;
   const styles = getStyleValues$3((_a = widget.config) == null ? void 0 : _a.styles);
@@ -46288,34 +46607,35 @@ function PieChartWidget({
           styles,
           onResetReady,
           widgetBackendUrl,
-          datasetId
+          datasetId,
+          onConfigUpdate
         }
       )
     }
   );
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 const CHART_REFRESH_TIMEOUT$2 = 3e3;
-const DEFAULT_COLORS$1 = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
+const DEFAULT_COLORS$2 = ["#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);
@@ -46410,7 +46730,7 @@ const parseAndUpdateChartState$2 = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$7({}, prevState);
+          const newChartState = __spreadValues$8({}, prevState);
           if (chartData.series_bar_chart_data) {
             newChartState.series_bar_chart_data = chartData.series_bar_chart_data;
           }
@@ -46460,9 +46780,11 @@ function SeriesBarChartComponent$1({
   startLoadingTimeout,
   clearLoadingTimeout,
   content,
-  hasWidgetData
+  hasWidgetData,
+  chartSettings,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const hasCalledRef = React.useRef(false);
   const labels = ((_b = (_a = seriesBarChartState == null ? void 0 : seriesBarChartState.series_bar_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) || [];
   const series = ((_d = (_c = seriesBarChartState == null ? void 0 : seriesBarChartState.series_bar_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.series) || [];
@@ -46500,18 +46822,40 @@ function SeriesBarChartComponent$1({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, seriesBarChartState]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$1, series.length);
+    return shuffleColors(DEFAULT_COLORS$2, series.length);
   }, [series.length]);
+  const sortedSeries = React.useMemo(() => {
+    return [...series].sort(
+      (a, b) => (a.name || "").localeCompare(b.name || "")
+    );
+  }, [series]);
+  const colors = React.useMemo(() => {
+    return sortedSeries.map((_, index) => finalColors[index % finalColors.length]);
+  }, [sortedSeries, finalColors]);
+  React.useEffect(() => {
+    var _a2;
+    if (!isEmpty && colors.length > 0 && !((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2.length) && onConfigUpdate && widgetId) {
+      onConfigUpdate(widgetId, {
+        chartSettings: __spreadProps$6(__spreadValues$8({}, chartSettings), {
+          seriesColors: colors
+        })
+      });
+    }
+  }, [series.length, (_i = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _i.length, onConfigUpdate, widgetId, isEmpty]);
   if (isEmpty) {
     return createLoadingComponent$2();
   }
   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: sortedSeries.map((seriesItem, index) => {
+      var _a2;
+      const color = ((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2[index]) || (seriesItem == null ? void 0 : seriesItem.colors) || (seriesItem == null ? void 0 : seriesItem.color) || finalColors[index % finalColors.length];
+      return {
+        label: seriesItem.name,
+        data: seriesItem.values,
+        backgroundColor: color
+      };
+    })
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SeriesChart,
@@ -46522,7 +46866,8 @@ function SeriesBarChartComponent$1({
       units,
       content,
       x_axis_title,
-      y_axis_title
+      y_axis_title,
+      chartSettings
     }
   );
 }
@@ -46533,9 +46878,10 @@ function CopilotKitSeriesBarChart$1({
   onResetReady,
   widgetBackendUrl,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const orientation = ((_a = widget.config) == null ? void 0 : _a.orientation) || "vertical";
   const isFirstLoad = (_b = widget.config) == null ? void 0 : _b.isFirstLoad;
   const content = (_c = widget.config) == null ? void 0 : _c.content;
@@ -46576,7 +46922,7 @@ function CopilotKitSeriesBarChart$1({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$5(__spreadValues$7({}, prevState), {
+      setChartState((prevState) => __spreadProps$6(__spreadValues$8({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -46677,7 +47023,9 @@ function CopilotKitSeriesBarChart$1({
         widgetId: widget.id,
         startLoadingTimeout,
         clearLoadingTimeout,
-        hasWidgetData: !!(((_p = (_o = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _o.labels) == null ? void 0 : _p.length) && ((_r = (_q = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _q.series) == null ? void 0 : _r.length))
+        hasWidgetData: !!(((_p = (_o = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _o.labels) == null ? void 0 : _p.length) && ((_r = (_q = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _q.series) == null ? void 0 : _r.length)),
+        chartSettings: (_s = widget.config) == null ? void 0 : _s.chartSettings,
+        onConfigUpdate
       }
     ) })
   ] });
@@ -46689,7 +47037,8 @@ function SeriesBarChartWidget({
   onResetReady,
   widgetIds,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
   var _a, _b;
   const styles = getStyleValues$2((_a = widget.config) == null ? void 0 : _a.styles);
@@ -46713,34 +47062,35 @@ function SeriesBarChartWidget({
           styles,
           onResetReady,
           widgetBackendUrl,
-          datasetId
+          datasetId,
+          onConfigUpdate
         }
       )
     }
   );
 }
 
-var __defProp$6 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const CHART_REFRESH_TIMEOUT$1 = 3e3;
-const DEFAULT_COLORS = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
+const DEFAULT_COLORS$1 = ["#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);
@@ -46835,7 +47185,7 @@ const parseAndUpdateChartState$1 = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$6({}, prevState);
+          const newChartState = __spreadValues$7({}, prevState);
           if (chartData.series_bar_chart_data) {
             newChartState.series_bar_chart_data = chartData.series_bar_chart_data;
           }
@@ -46885,9 +47235,11 @@ function SeriesBarChartComponent({
   startLoadingTimeout,
   clearLoadingTimeout,
   content,
-  hasWidgetData
+  hasWidgetData,
+  chartSettings,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const hasCalledRef = React.useRef(false);
   const labels = ((_b = (_a = seriesBarChartState == null ? void 0 : seriesBarChartState.series_bar_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) || [];
   const series = ((_d = (_c = seriesBarChartState == null ? void 0 : seriesBarChartState.series_bar_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.series) || [];
@@ -46925,24 +47277,43 @@ function SeriesBarChartComponent({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, seriesBarChartState]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS, series.length);
+    return shuffleColors(DEFAULT_COLORS$1, series.length);
   }, [series.length]);
+  const sortedSeries = React.useMemo(() => {
+    return [...series].sort(
+      (a, b) => (a.name || "").localeCompare(b.name || "")
+    );
+  }, [series]);
+  const colors = React.useMemo(() => {
+    return sortedSeries.map((_, index) => finalColors[index % finalColors.length]);
+  }, [sortedSeries, finalColors]);
+  React.useEffect(() => {
+    var _a2;
+    if (!isEmpty && colors.length > 0 && !((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2.length) && onConfigUpdate && widgetId) {
+      onConfigUpdate(widgetId, {
+        chartSettings: __spreadProps$5(__spreadValues$7({}, chartSettings), {
+          seriesColors: colors
+        })
+      });
+    }
+  }, [series.length, (_i = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _i.length, onConfigUpdate, widgetId, isEmpty]);
   if (isEmpty) {
     return createLoadingComponent$1();
   }
   const transformedData = {
     labels,
-    datasets: series.map((seriesItem, index) => {
-      const color = (seriesItem == null ? void 0 : seriesItem.colors) || (seriesItem == null ? void 0 : seriesItem.color) || finalColors[index % finalColors.length];
+    datasets: sortedSeries.map((seriesItem, index) => {
+      var _a2, _b2, _c2;
+      const color = ((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2[index]) || (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,
+        borderWidth: (_b2 = chartSettings == null ? void 0 : chartSettings.lineWidth) != null ? _b2 : 2.5,
         fill: false,
-        pointRadius: 4,
+        pointRadius: (_c2 = chartSettings == null ? void 0 : chartSettings.pointRadius) != null ? _c2 : 4,
         pointHoverRadius: 6,
         pointBackgroundColor: color,
         pointBorderColor: "#ffffff",
@@ -46959,7 +47330,8 @@ function SeriesBarChartComponent({
       units,
       content,
       x_axis_title,
-      y_axis_title
+      y_axis_title,
+      chartSettings
     }
   );
 }
@@ -46970,9 +47342,10 @@ function CopilotKitSeriesBarChart({
   onResetReady,
   widgetBackendUrl,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const orientation = ((_a = widget.config) == null ? void 0 : _a.orientation) || "vertical";
   const isFirstLoad = (_b = widget.config) == null ? void 0 : _b.isFirstLoad;
   const content = (_c = widget.config) == null ? void 0 : _c.content;
@@ -47013,7 +47386,7 @@ function CopilotKitSeriesBarChart({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$4(__spreadValues$6({}, prevState), {
+      setChartState((prevState) => __spreadProps$5(__spreadValues$7({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -47114,7 +47487,9 @@ function CopilotKitSeriesBarChart({
         widgetId: widget.id,
         startLoadingTimeout,
         clearLoadingTimeout,
-        hasWidgetData: !!(((_p = (_o = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _o.labels) == null ? void 0 : _p.length) && ((_r = (_q = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _q.series) == null ? void 0 : _r.length))
+        hasWidgetData: !!(((_p = (_o = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _o.labels) == null ? void 0 : _p.length) && ((_r = (_q = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _q.series) == null ? void 0 : _r.length)),
+        chartSettings: (_s = widget.config) == null ? void 0 : _s.chartSettings,
+        onConfigUpdate
       }
     ) })
   ] });
@@ -47126,7 +47501,8 @@ function SeriesLineChartWidget({
   onResetReady,
   widgetIds,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
   var _a, _b;
   const styles = getStyleValues$1((_a = widget.config) == null ? void 0 : _a.styles);
@@ -47150,32 +47526,33 @@ function SeriesLineChartWidget({
           styles,
           onResetReady,
           widgetBackendUrl,
-          datasetId
+          datasetId,
+          onConfigUpdate
         }
       )
     }
   );
 }
 
-var __defProp$5 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const CHART_REFRESH_TIMEOUT = 3e3;
 const clearChat = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
@@ -47262,7 +47639,7 @@ const parseAndUpdateChartState = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$5({}, prevState);
+          const newChartState = __spreadValues$6({}, prevState);
           if (chartData.matrix_grid_data) {
             newChartState.matrix_grid_data = chartData.matrix_grid_data;
           }
@@ -47409,7 +47786,7 @@ function CopilotKitDataGrid({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$3(__spreadValues$5({}, prevState), {
+      setChartState((prevState) => __spreadProps$4(__spreadValues$6({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -47621,7 +47998,8 @@ function WidgetRenderer({
             widgetBackendUrl,
             onResetReady,
             widgetIds,
-            datasetId
+            datasetId,
+            onConfigUpdate
           }
         ) : widget.config.agentType === "Series Bar Chart Agent" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           SeriesBarChartWidget,
@@ -47631,7 +48009,8 @@ function WidgetRenderer({
             widgetBackendUrl,
             onResetReady,
             widgetIds,
-            datasetId
+            datasetId,
+            onConfigUpdate
           }
         ) : widget.config.agentType === "Series Line Chart Agent" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           SeriesLineChartWidget,
@@ -47641,7 +48020,8 @@ function WidgetRenderer({
             widgetBackendUrl,
             onResetReady,
             widgetIds,
-            datasetId
+            datasetId,
+            onConfigUpdate
           }
         ) : widget.config.agentType === "Data Grid Agent" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           DatagridWidget,
@@ -47674,39 +48054,39 @@ function WidgetRenderer({
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${(widget == null ? void 0 : widget.type) === "text" ? "" : "h-full"}`, children: renderWidget() });
 }
 
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1 = (source, exclude) => {
+var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+  if (source != null && __getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Textarea = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$1(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$2(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "textarea",
-    __spreadValues$4({
+    __spreadValues$5({
       className: cn(
         "flex min-h-[120px] w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-base ring-offset-gray-300 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
@@ -47827,6 +48207,57 @@ function Modal({
   );
 }
 
+var __defProp$4 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Slider = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest$1(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    SliderPrimitive__namespace.Root,
+    __spreadProps$3(__spreadValues$4({
+      ref,
+      className: cn(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SliderPrimitive__namespace.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-[#f1f5f9]", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+      ]
+    })
+  );
+});
+Slider.displayName = SliderPrimitive__namespace.Root.displayName;
+
 var __defProp$3 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
@@ -47846,9 +48277,63 @@ var __spreadValues$3 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const isChartWidget = (agentType) => {
+  if (!agentType) return false;
+  return agentType === "Pie Chart Agent" || agentType === "Line Chart Agent" || agentType === "Series Line Chart Agent" || agentType === "Bar Chart Agent" || agentType === "Series Bar Chart Agent";
+};
+const isLineChart = (agentType) => {
+  if (!agentType) return false;
+  return agentType === "Line Chart Agent" || agentType === "Series Line Chart Agent";
+};
+const DEFAULT_COLORS = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
+const getSeriesNames = (widget) => {
+  var _a, _b, _c, _d;
+  const data = widget == null ? void 0 : widget.widget_data;
+  if (!data) return [];
+  if (((_b = (_a = data == null ? void 0 : data.pie_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) && Array.isArray(data.pie_chart_data.data.labels)) {
+    return data.pie_chart_data.data.labels.sort();
+  }
+  if (((_d = (_c = data == null ? void 0 : data.series_bar_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.series) && Array.isArray(data.series_bar_chart_data.data.series)) {
+    return data.series_bar_chart_data.data.series.map((item) => item.name || item.label || "").filter((name) => name !== "").sort();
+  }
+  if (Array.isArray(data)) {
+    const names = /* @__PURE__ */ new Set();
+    data.forEach((item) => {
+      if (item.series_name) names.add(item.series_name);
+      if (item.label) names.add(item.label);
+    });
+    return Array.from(names).sort();
+  }
+  return [];
+};
+const getDefaultSeriesColors = (widget) => {
+  var _a, _b, _c, _d;
+  const data = widget == null ? void 0 : widget.widget_data;
+  if (!data) return [];
+  if (((_b = (_a = data == null ? void 0 : data.pie_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) && Array.isArray(data.pie_chart_data.data.labels)) {
+    const labels = data.pie_chart_data.data.labels;
+    return shuffleColors(DEFAULT_COLORS, labels.length);
+  }
+  if (((_d = (_c = data == null ? void 0 : data.series_bar_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.series) && Array.isArray(data.series_bar_chart_data.data.series)) {
+    const series = data.series_bar_chart_data.data.series;
+    return shuffleColors(DEFAULT_COLORS, series.length);
+  }
+  if (Array.isArray(data)) {
+    const series = /* @__PURE__ */ new Set();
+    data.forEach((item) => {
+      if (item.series_name) series.add(item.series_name);
+      if (item.label) series.add(item.label);
+    });
+    const seriesArray = Array.from(series).sort();
+    return shuffleColors(DEFAULT_COLORS, seriesArray.length);
+  }
+  return [];
+};
 function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const agentType = (_a = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _a.agentType;
+  const isChart = isChartWidget(agentType);
+  const isLine = isLineChart(agentType);
   const [query, setQuery] = React.useState("");
   const [displayText, setDisplayText] = React.useState("");
   const [blockType, setBlockType] = React.useState("");
@@ -47856,13 +48341,42 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
   const [divider, setDivider] = React.useState("no");
   const [showLabels, setShowLabels] = React.useState(false);
   const [styles, setStyles] = React.useState("");
+  const [chartSettings, setChartSettings] = React.useState({
+    showLegend: true,
+    legendBoxSize: 16,
+    legendFontSize: 13,
+    lineWidth: 2.5,
+    lineTension: 0.3,
+    pointRadius: 4,
+    showLabels: false,
+    seriesColors: [],
+    dataLabelsFontSize: 12,
+    showTitle: true,
+    titleText: "",
+    titleFontSize: 16,
+    xAxisTitleFontSize: 13,
+    yAxisTitleFontSize: 13,
+    xAxisTickFontSize: 12,
+    yAxisTickFontSize: 12,
+    tooltipFontSize: 12
+  });
+  const seriesNames = getSeriesNames(editingWidget);
+  const defaultSeriesColors = getDefaultSeriesColors(editingWidget);
+  const colorCount = seriesNames.length || ((_b = chartSettings.seriesColors) == null ? void 0 : _b.length) || defaultSeriesColors.length || 0;
+  const displaySeriesNames = seriesNames.length > 0 ? seriesNames : Array.from({ length: colorCount }, (_, i) => `Series ${i + 1}`);
+  React.useEffect(() => {
+    console.log("[EditWidgetDialog] Series names:", seriesNames);
+    console.log("[EditWidgetDialog] Default colors:", defaultSeriesColors);
+    console.log("[EditWidgetDialog] Display series names:", displaySeriesNames);
+  }, [seriesNames, defaultSeriesColors, displaySeriesNames]);
   React.useEffect(() => {
     setQuery(initialText);
   }, [initialText]);
   React.useEffect(() => {
-    var _a2, _b;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q, _r, _s, _t;
     const content = (_a2 = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _a2.content;
-    const cssStyles = (_b = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _b.styles;
+    const cssStyles = (_b2 = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _b2.styles;
+    const savedChartSettings = (_c2 = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _c2.chartSettings;
     const text = content == null ? void 0 : content.displayText;
     if (text == null ? void 0 : text.length) {
       setDisplayText(text);
@@ -47883,63 +48397,114 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
     if (hasShowLabel !== void 0) {
       setShowLabels(hasShowLabel);
     }
+    if (savedChartSettings) {
+      setChartSettings({
+        showLegend: (_d2 = savedChartSettings.showLegend) != null ? _d2 : true,
+        legendBoxSize: (_e2 = savedChartSettings.legendBoxSize) != null ? _e2 : 16,
+        legendFontSize: (_f2 = savedChartSettings.legendFontSize) != null ? _f2 : 13,
+        lineWidth: (_g2 = savedChartSettings.lineWidth) != null ? _g2 : 2.5,
+        lineTension: (_h2 = savedChartSettings.lineTension) != null ? _h2 : 0.3,
+        pointRadius: (_i2 = savedChartSettings.pointRadius) != null ? _i2 : 4,
+        showLabels: (_j2 = savedChartSettings.showLabels) != null ? _j2 : false,
+        seriesColors: (_k2 = savedChartSettings.seriesColors) != null ? _k2 : defaultSeriesColors,
+        dataLabelsFontSize: (_l2 = savedChartSettings.dataLabelsFontSize) != null ? _l2 : 12,
+        showTitle: (_m2 = savedChartSettings.showTitle) != null ? _m2 : true,
+        titleText: (_n2 = savedChartSettings.titleText) != null ? _n2 : "",
+        titleFontSize: (_o2 = savedChartSettings.titleFontSize) != null ? _o2 : 16,
+        xAxisTitleFontSize: (_p2 = savedChartSettings.xAxisTitleFontSize) != null ? _p2 : 13,
+        yAxisTitleFontSize: (_q = savedChartSettings.yAxisTitleFontSize) != null ? _q : 13,
+        xAxisTickFontSize: (_r = savedChartSettings.xAxisTickFontSize) != null ? _r : 12,
+        yAxisTickFontSize: (_s = savedChartSettings.yAxisTickFontSize) != null ? _s : 12,
+        tooltipFontSize: (_t = savedChartSettings.tooltipFontSize) != null ? _t : 12
+      });
+    } else {
+      setChartSettings({
+        showLegend: true,
+        legendBoxSize: 16,
+        legendFontSize: 13,
+        lineWidth: 2.5,
+        lineTension: 0.3,
+        pointRadius: 4,
+        showLabels: hasShowLabel != null ? hasShowLabel : false,
+        seriesColors: defaultSeriesColors,
+        dataLabelsFontSize: 12,
+        showTitle: true,
+        titleText: "",
+        titleFontSize: 16,
+        xAxisTitleFontSize: 13,
+        yAxisTitleFontSize: 13,
+        xAxisTickFontSize: 12,
+        yAxisTickFontSize: 12,
+        tooltipFontSize: 12
+      });
+    }
   }, [editingWidget]);
   const handleSubmit = () => {
+    var _a2;
     if (onSubmit && query.trim()) {
-      onSubmit(query, showLabels);
+      if (isChart) {
+        onSubmit(query, (_a2 = chartSettings.showLabels) != null ? _a2 : false, chartSettings);
+      } else {
+        onSubmit(query, showLabels);
+      }
     }
     if (editingWidget.type === "text") {
       const widgetId = editingWidget == null ? void 0 : editingWidget.id;
-      setWidgets && setWidgets((prev) => prev.map((w) => {
-        if (w.id === widgetId) {
-          return __spreadProps$2(__spreadValues$3({}, w), {
-            config: __spreadProps$2(__spreadValues$3({}, w.config), {
-              content: __spreadProps$2(__spreadValues$3({}, w.config.content), {
-                displayText,
-                blockType,
-                divider
-              }),
-              styles: __spreadValues$3(__spreadValues$3({}, w.config.styles), alignment && alignment.length > 0 ? { textAlign: alignment } : {})
-            })
-          });
-        }
-        return w;
-      }));
+      setWidgets && setWidgets(
+        (prev) => prev.map((w) => {
+          if (w.id === widgetId) {
+            return __spreadProps$2(__spreadValues$3({}, w), {
+              config: __spreadProps$2(__spreadValues$3({}, w.config), {
+                content: __spreadProps$2(__spreadValues$3({}, w.config.content), {
+                  displayText,
+                  blockType,
+                  divider
+                }),
+                styles: __spreadValues$3(__spreadValues$3({}, w.config.styles), alignment && alignment.length > 0 ? { textAlign: alignment } : {})
+              })
+            });
+          }
+          return w;
+        })
+      );
       onClose && onClose();
     }
   };
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Modal,
     {
       isOpen,
       onClose,
       title: "Edit Widget",
-      size: "lg",
+      size: "xl",
       noOverflowHidden: true,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pt-7", children: [
-          (agentType === "Pie Chart Agent" || agentType === "Line Chart Agent" || agentType === "Series Line Chart Agent" || agentType === "Bar Chart Agent" || agentType === "Series Bar Chart Agent") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 mb-4", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Data Labels:" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              Select,
-              {
-                value: showLabels ? "yes" : "no",
-                onValueChange: (value) => setShowLabels(value === "yes"),
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Visible data labels?" }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })
-                  ] })
-                ]
-              }
-            )
-          ] }),
-          (editingWidget == null ? void 0 : editingWidget.type) === "text" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `
+        .dialog-scrollable::-webkit-scrollbar {
+          width: 6px;
+        }
+        .dialog-scrollable::-webkit-scrollbar-track {
+          background: #f1f5f9;
+          border-radius: 3px;
+        }
+        .dialog-scrollable::-webkit-scrollbar-thumb {
+          background: #cbd5e1;
+          border-radius: 3px;
+        }
+        .dialog-scrollable::-webkit-scrollbar-thumb:hover {
+          background: #94a3b8;
+        }
+        .dialog-scrollable {
+          scrollbar-width: thin;
+          scrollbar-color: #cbd5e1 #f1f5f9;
+        }
+      ` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-[calc(100vh-260px)] bg-white rounded-lg", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-6 py-4 border-b border-gray-200 flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 font-medium", children: "Customize your widget settings" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto dialog-scrollable px-6 py-4 flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: (editingWidget == null ? void 0 : editingWidget.type) === "text" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-5", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Display text" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Input,
                 {
@@ -47949,88 +48514,463 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Select,
-                {
-                  value: blockType,
-                  onValueChange: (value) => setBlockType(value),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })
-                    ] })
-                  ]
-                }
-              )
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Block type" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Select,
-                {
-                  value: alignment,
-                  onValueChange: (value) => setAlignment(value),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })
-                    ] })
-                  ]
-                }
-              )
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Alignment" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select alignment" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Select,
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Divider" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })
+                ] })
+              ] })
+            ] })
+          ] }) : isChart ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Query" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Textarea,
                 {
-                  value: divider,
-                  onValueChange: (value) => setDivider(value),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })
-                    ] })
-                  ]
+                  className: "w-full p-2 min-h-[120px]",
+                  value: query,
+                  onChange: (e) => {
+                    var _a2;
+                    return setQuery((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value);
+                  }
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
-              {
-                onClick: handleSubmit,
-                className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2",
-                children: "Submit"
-              }
-            ) })
-          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2", value: query, onChange: (e) => {
-                var _a2;
-                return setQuery((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value);
-              } })
+              ) })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Legend" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Show Legend" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      Select,
+                      {
+                        value: chartSettings.showLegend !== false ? "yes" : "no",
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          showLegend: value === "yes"
+                        })),
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Show legend?" }) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Box Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.legendBoxSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 8,
+                        max: 32,
+                        step: 1,
+                        value: [(_c = chartSettings.legendBoxSize) != null ? _c : 16],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          legendBoxSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.legendFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 18,
+                        step: 1,
+                        value: [(_d = chartSettings.legendFontSize) != null ? _d : 13],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          legendFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              displaySeriesNames.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Series Colors" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: displaySeriesNames.map((seriesName, index) => {
+                  var _a2;
+                  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium flex-1 truncate", children: seriesName }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "input",
+                      {
+                        type: "color",
+                        value: ((_a2 = chartSettings.seriesColors) == null ? void 0 : _a2[index]) || defaultSeriesColors[index] || "#3B82F6",
+                        onChange: (e) => {
+                          const newColors = [...chartSettings.seriesColors || []];
+                          newColors[index] = e.target.value;
+                          setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                            seriesColors: newColors
+                          }));
+                        },
+                        className: "w-10 h-10 rounded cursor-pointer border border-gray-300"
+                      }
+                    )
+                  ] }, index);
+                }) })
+              ] }),
+              isLine && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Line Style" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Line Width" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600", children: chartSettings.lineWidth })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 1,
+                        max: 5,
+                        step: 0.5,
+                        value: [(_e = chartSettings.lineWidth) != null ? _e : 2.5],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          lineWidth: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Tension" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600", children: ((_f = chartSettings.lineTension) != null ? _f : 0.3).toFixed(2) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 0,
+                        max: 0.8,
+                        step: 0.05,
+                        value: [(_g = chartSettings.lineTension) != null ? _g : 0.3],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          lineTension: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Point Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.pointRadius,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 0,
+                        max: 8,
+                        step: 0.5,
+                        value: [(_h = chartSettings.pointRadius) != null ? _h : 4],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          pointRadius: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Chart Title" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Show Title" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      Select,
+                      {
+                        value: chartSettings.showTitle !== false ? "yes" : "no",
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          showTitle: value === "yes"
+                        })),
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Show title?" }) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Title Text" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "Enter custom title (optional)",
+                        value: (_i = chartSettings.titleText) != null ? _i : "",
+                        onChange: (e) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          titleText: e.target.value
+                        })),
+                        className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.titleFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 12,
+                        max: 28,
+                        step: 1,
+                        value: [(_j = chartSettings.titleFontSize) != null ? _j : 16],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          titleFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Data Labels" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Show Labels" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      Select,
+                      {
+                        value: chartSettings.showLabels ? "yes" : "no",
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          showLabels: value === "yes"
+                        })),
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Show data labels?" }) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.dataLabelsFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 18,
+                        step: 1,
+                        value: [(_k = chartSettings.dataLabelsFontSize) != null ? _k : 12],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          dataLabelsFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              (agentType === "Series Bar Chart Agent" || agentType === "Bar Chart Agent" || agentType === "Series Line Chart Agent" || agentType === "Line Chart Agent") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Axes" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "X-Axis Title Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.xAxisTitleFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 18,
+                        step: 1,
+                        value: [(_l = chartSettings.xAxisTitleFontSize) != null ? _l : 13],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          xAxisTitleFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "X-Axis Tick Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.xAxisTickFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 14,
+                        step: 1,
+                        value: [(_m = chartSettings.xAxisTickFontSize) != null ? _m : 12],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          xAxisTickFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Y-Axis Title Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.yAxisTitleFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 18,
+                        step: 1,
+                        value: [(_n = chartSettings.yAxisTitleFontSize) != null ? _n : 13],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          yAxisTitleFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Y-Axis Tick Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.yAxisTickFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 14,
+                        step: 1,
+                        value: [(_o = chartSettings.yAxisTickFontSize) != null ? _o : 12],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          yAxisTickFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Tooltip" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Font Size" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                      chartSettings.tooltipFontSize,
+                      "px"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Slider,
+                    {
+                      min: 10,
+                      max: 16,
+                      step: 1,
+                      value: [(_p = chartSettings.tooltipFontSize) != null ? _p : 12],
+                      onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                        tooltipFontSize: value[0]
+                      })),
+                      className: "w-full"
+                    }
+                  )
+                ] }) })
+              ] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Query" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Textarea,
               {
-                onClick: handleSubmit,
-                className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2",
-                children: "Submit"
+                className: "w-full p-2 min-h-[120px]",
+                value: query,
+                onChange: (e) => {
+                  var _a2;
+                  return setQuery((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value);
+                }
               }
-            ) })
-          ] })
+            )
+          ] }) }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 px-6 py-4 border-t border-gray-200 bg-gradient-to-b from-white to-gray-50 flex justify-end", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              onClick: handleSubmit,
+              className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary text-primary-foreground hover:bg-primary/80 focus:ring-primary px-6 py-2 text-sm flex items-center gap-2",
+              children: "Submit"
+            }
+          ) })
         ] })
-      ] })
+      ]
     }
   );
 }
@@ -48534,20 +49474,52 @@ function WidgetDashboard({
   };
   const onClickSettings = (widget) => {
     var _a;
+    const currentWidget = widgets.find((w) => w.id === widget.id) || widget;
     setShowEditModal(true);
-    setEditingWidget(widget);
-    let query = (_a = widget == null ? void 0 : widget.config) == null ? void 0 : _a.query;
+    setEditingWidget(currentWidget);
+    let query = (_a = currentWidget == null ? void 0 : currentWidget.config) == null ? void 0 : _a.query;
     if (query) {
       setEditInitialQuery(query);
     } else {
       setEditInitialQuery("");
     }
   };
-  const handleEditSubmit = async (newQuery, showLabels) => {
+  const saveWidgetConfigToBackend = React.useCallback(
+    lodash.debounce(async (widget) => {
+      try {
+        const widgetService = new WidgetService();
+        await widgetService.saveWidget(widget);
+        console.log(`[WidgetDashboard] Widget ${widget.id} config saved to backend`);
+      } catch (error) {
+        console.error(`[WidgetDashboard] Failed to save widget config:`, error);
+      }
+    }, 1e3),
+    []
+  );
+  const handleConfigUpdate = (widgetId, config) => {
+    setWidgets((prevWidgets) => {
+      const updatedWidgets = prevWidgets.map(
+        (w) => w.id === widgetId ? __spreadProps$1(__spreadValues$1({}, w), {
+          config: __spreadValues$1(__spreadValues$1({}, w.config), config)
+        }) : w
+      );
+      const updatedWidget = updatedWidgets.find((w) => w.id === widgetId);
+      if (updatedWidget) {
+        saveWidgetConfigToBackend(updatedWidget);
+      }
+      return updatedWidgets;
+    });
+  };
+  const handleEditSubmit = async (newQuery, showLabels, chartSettings) => {
     var _a, _b;
     if (!editingWidget) return;
     const updatedWidgets = widgets.map(
-      (w) => w.id === editingWidget.id ? __spreadProps$1(__spreadValues$1({}, w), { config: __spreadProps$1(__spreadValues$1({}, w.config), { query: newQuery, content: __spreadProps$1(__spreadValues$1({}, w.config.content), { showLabels }) }) }) : w
+      (w) => w.id === editingWidget.id ? __spreadProps$1(__spreadValues$1({}, w), {
+        config: __spreadValues$1(__spreadProps$1(__spreadValues$1({}, w.config), {
+          query: newQuery,
+          content: __spreadProps$1(__spreadValues$1({}, w.config.content), { showLabels })
+        }), chartSettings && { chartSettings })
+      }) : w
     );
     setWidgets(updatedWidgets);
     setShowEditModal(false);
@@ -48637,6 +49609,11 @@ function WidgetDashboard({
         setTimeout(() => pollForSqlQuery(), 2e3);
       }
     }
+    try {
+      await stableSaveLayout();
+    } catch (error) {
+      console.error("Failed to save widget configuration:", error);
+    }
   };
   const handleResetReady = React.useCallback((widgetId, resetFn) => {
     setWidgetResetFunctions((prev) => {
@@ -48674,6 +49651,7 @@ function WidgetDashboard({
     }
   };
   const loadData = React.useCallback(async () => {
+    var _a;
     if (!pageId) {
       setIsLoading(false);
       return;
@@ -48694,6 +49672,12 @@ function WidgetDashboard({
       setPageData(data);
       setWidgets(data.widgets || []);
       setDatasetId(data == null ? void 0 : data.dataset_id);
+      (_a = data.widgets) == null ? void 0 : _a.forEach((w) => {
+        var _a2;
+        if ((_a2 = w.config) == null ? void 0 : _a2.chartSettings) {
+          console.log(`[WidgetDashboard] Widget ${w.id} has chartSettings:`, w.config.chartSettings);
+        }
+      });
     } catch (err) {
       console.error("Error loading page data:", err);
     } finally {
@@ -48739,6 +49723,23 @@ function WidgetDashboard({
     const newAgentWidgetIds = widgets.filter((w) => w.type === "agent" && !originalWidgetIdsRef.current.has(w.id)).map((w) => w.id);
     const hasFilterWidget = widgets.some((w) => w.type === "filters");
     try {
+      const widgetsToSave = widgets.map((widget) => __spreadProps$1(__spreadValues$1({}, widget), {
+        config: __spreadProps$1(__spreadValues$1({}, widget.config), {
+          isFirstLoad: false
+        }),
+        position: {
+          x: widget.position_x,
+          y: widget.position_y,
+          width: widget.width,
+          height: widget.height
+        }
+      }));
+      widgetsToSave.forEach((w) => {
+        var _a;
+        if ((_a = w.config) == null ? void 0 : _a.chartSettings) {
+          console.log(`[WidgetDashboard] Saving widget ${w.id} with chartSettings:`, w.config.chartSettings);
+        }
+      });
       const response = await fetch(getApiUrl(`/api/pages/${pageId}`), {
         method: "PUT",
         headers: {
@@ -48747,17 +49748,7 @@ function WidgetDashboard({
         body: JSON.stringify(__spreadProps$1(__spreadValues$1({
           id: pageId
         }, pageData), {
-          widgets: widgets.map((widget) => __spreadProps$1(__spreadValues$1({}, widget), {
-            config: __spreadProps$1(__spreadValues$1({}, widget.config), {
-              isFirstLoad: false
-            }),
-            position: {
-              x: widget.position_x,
-              y: widget.position_y,
-              width: widget.width,
-              height: widget.height
-            }
-          }))
+          widgets: widgetsToSave
         }))
       });
       if (!response.ok) {
@@ -49201,7 +50192,7 @@ function WidgetDashboard({
               const badgeInfo = filterStatus ? getFilterStatusBadge(filterStatus.status) : null;
               const isFocusMode = focusWidgetId && w.id === focusWidgetId;
               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 widgetHoverStyles = isEditing ? "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: [
@@ -49230,7 +50221,7 @@ function WidgetDashboard({
                     w.type !== "spacer" && w.type !== "chatbot" && /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })
                   ] })
                 ] }),
-                /* @__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 }) })
+                /* @__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, onConfigUpdate: handleConfigUpdate }) })
               ] }, w.id);
             })
           }