pxengine 0.1.97 → 0.1.98

package/dist/index.cjs

@@ -51,6 +51,7 @@ __export(index_exports, {
   AlertDialogTitle: () => AlertDialogTitle,
   AlertDialogTrigger: () => AlertDialogTrigger,
   AlertTitle: () => AlertTitle,
+  AnalyticsChart: () => AnalyticsChart,
   ApprovalCard: () => ApprovalCard,
   ArrowToggleAtom: () => ArrowToggleAtom,
   AspectRatio: () => AspectRatio,
@@ -354,7 +355,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/render/PXEngineRenderer.tsx
-var import_react95 = __toESM(require("react"), 1);
+var import_react96 = __toESM(require("react"), 1);
 
 // src/atoms/index.ts
 var atoms_exports = {};
@@ -33941,6 +33942,7 @@ var molecules_exports = {};
 __export(molecules_exports, {
   ActionButton: () => ActionButton,
   ActionPriorityCard: () => ActionPriorityCard,
+  AnalyticsChart: () => AnalyticsChart,
   ApprovalCard: () => ApprovalCard,
   AudienceDemographicsCard: () => AudienceDemographicsCard,
   AudienceMetricCard: () => AudienceMetricCard,
@@ -39290,7 +39292,8 @@ var FullscreenModal = ({ url, title, slideCount, initialSlide = 1, onClose }) =>
           setIframeReady(true);
           iframeRef.current?.contentWindow?.postMessage({ type: "goToSlide", slide: initialSlide }, "*");
         },
-        sandbox: "allow-same-origin allow-scripts allow-fullscreen",
+        sandbox: "allow-same-origin allow-scripts",
+        allow: "fullscreen",
         className: "absolute inset-0 w-full h-full border-0"
       }
     ) })
@@ -41501,13 +41504,63 @@ async function defaultPersistSelection(sessionId, questionKey, value) {
 
 // src/molecules/creator-discovery/MCQCard/MCQCard.tsx
 var import_jsx_runtime153 = require("react/jsx-runtime");
+var NUMBER_WORDS = {
+  one: 1,
+  two: 2,
+  three: 3,
+  four: 4,
+  five: 5,
+  six: 6,
+  seven: 7,
+  eight: 8,
+  nine: 9,
+  ten: 10
+};
+function wordToNum(s) {
+  const n = parseInt(s, 10);
+  if (!Number.isNaN(n)) return n;
+  return NUMBER_WORDS[s.toLowerCase()] ?? NaN;
+}
+function toPositiveInt(v) {
+  const n = Math.floor(Number(v));
+  return Number.isFinite(n) && n > 0 ? n : void 0;
+}
+function inferSelectionLimits(text, optionCount) {
+  if (!text) return null;
+  const q = text.toLowerCase();
+  const all = optionCount > 0 ? optionCount : 99;
+  if (/all that apply|select all|check all|choose all|select multiple|choose multiple|more than one|as many as|any that apply/.test(q)) {
+    return { max: all, min: 1, mode: "all" };
+  }
+  const upTo = q.match(/up to (\d+|one|two|three|four|five|six|seven|eight|nine|ten)/);
+  if (upTo) {
+    const n = wordToNum(upTo[1]);
+    if (n > 1) return { max: Math.min(n, all), min: 1, mode: "upto" };
+  }
+  const pickN = q.match(/(?:select|choose|pick)\s+(?:any\s+|your\s+|the\s+)?(?:top\s+)?(\d+|one|two|three|four|five|six|seven|eight|nine|ten)\b/);
+  if (pickN) {
+    const n = wordToNum(pickN[1]);
+    if (n > 1 && n <= all) return { max: n, min: n, mode: "exact" };
+  }
+  if (/(?:select|choose|pick)\s+(?:your\s+|the\s+)?(?:preferred|favorite|favourite|relevant|applicable|matching)\s+\w+s\b/.test(q)) {
+    return { max: all, min: 1, mode: "all" };
+  }
+  if (/(?:choose|select|pick)\s+the\s+\w+s\s+that\s+(?:match|apply|fit|describe|best|are)/.test(q)) {
+    return { max: all, min: 1, mode: "all" };
+  }
+  return null;
+}
 var MCQCard = import_react83.default.memo(
   ({
     question,
     options,
     recommended,
     selectedOption: propsSelectedOption,
+    selectedOptions: propsSelectedOptions,
+    maxSelections,
+    minSelections,
     onSelect,
+    onSelectMultiple,
     onProceed,
     isLatestMessage = true,
     isLoading = false,
@@ -41525,20 +41578,54 @@ var MCQCard = import_react83.default.memo(
   }) => {
     const resolvedQuestion = question || allProps.Question || allProps.q || "";
     const resolvedOptions = options || allProps.Options || allProps.opts || {};
+    const optionCount = resolvedOptions && typeof resolvedOptions === "object" ? Object.keys(resolvedOptions).length : 0;
+    const explicitMax = toPositiveInt(
+      maxSelections ?? allProps.MaxSelections ?? allProps.max_selections ?? allProps.maxSelect
+    );
+    const explicitMin = toPositiveInt(
+      minSelections ?? allProps.MinSelections ?? allProps.min_selections
+    );
+    const inferenceText = [
+      resolvedQuestion,
+      allProps.Context,
+      allProps.context,
+      allProps.instruction,
+      allProps.helperText
+    ].filter(Boolean).join("  ");
+    const inferred = explicitMax ? null : inferSelectionLimits(inferenceText, optionCount);
+    const maxSel = explicitMax ?? inferred?.max ?? 1;
+    const isMulti = maxSel > 1;
+    const minSel = Math.min(
+      maxSel,
+      Math.max(1, explicitMin ?? inferred?.min ?? (isMulti ? maxSel : 1))
+    );
+    const isSelectAll = isMulti && !explicitMax && inferred?.mode === "all";
     const t = th(theme);
-    const [selectedOption, setSelectedOption] = import_react83.default.useState(propsSelectedOption);
-    const [isProceeded, setIsProceeded] = import_react83.default.useState(false);
+    const seedSelection = () => {
+      if (Array.isArray(propsSelectedOptions) && propsSelectedOptions.length > 0) {
+        return propsSelectedOptions.slice(0, maxSel);
+      }
+      if (propsSelectedOption) return [propsSelectedOption];
+      return [];
+    };
+    const [selectedKeys, setSelectedKeys] = import_react83.default.useState(seedSelection);
+    const [isProceeded, setIsProceeded] = import_react83.default.useState(
+      Boolean(propsSelectedOption || propsSelectedOptions && propsSelectedOptions.length)
+    );
     const fetchedSessionRef = import_react83.default.useRef("");
     import_react83.default.useEffect(() => {
       if (propsSelectedOption) {
-        setSelectedOption(propsSelectedOption);
+        setSelectedKeys([propsSelectedOption]);
+        setIsProceeded(true);
+      } else if (Array.isArray(propsSelectedOptions) && propsSelectedOptions.length > 0) {
+        setSelectedKeys(propsSelectedOptions.slice(0, maxSel));
         setIsProceeded(true);
       }
-    }, [propsSelectedOption]);
-    const buildQuestionKey = import_react83.default.useCallback((sid, question2) => {
+    }, [propsSelectedOption, propsSelectedOptions]);
+    const buildQuestionKey = import_react83.default.useCallback((sid, q) => {
       let hash = 2166136261;
-      for (let i = 0; i < question2.length; i++) {
-        hash ^= question2.charCodeAt(i);
+      for (let i = 0; i < q.length; i++) {
+        hash ^= q.charCodeAt(i);
         hash = hash * 16777619 >>> 0;
       }
       return `mcq_${sid}_${hash.toString(36)}`;
@@ -41553,54 +41640,83 @@ var MCQCard = import_react83.default.memo(
       fetchSelections(sessionId).then((selections) => {
         const stored = selections[questionKey] || selections[resolvedQuestion] || selections[`mcq_${sessionId}`];
         if (stored) {
-          setSelectedOption(stored);
-          setIsProceeded(true);
+          const restored = String(stored).split(",").map((s) => s.trim()).filter(Boolean);
+          if (restored.length) {
+            setSelectedKeys(restored);
+            setIsProceeded(true);
+          }
         }
       }).catch(() => {
       });
     }, [sessionId, propsSelectedOption, resolvedQuestion, buildQuestionKey]);
     const isDiscovery = disableContinueInDiscovery !== void 0 ? disableContinueInDiscovery : typeof window !== "undefined" && window.location.pathname.includes("creator-discovery");
+    const isOptionsDisabled = disabled || !isLatestMessage || isProceeded && !disableContinueInDiscovery;
     const handleOptionClick = (key, e) => {
       e.preventDefault();
       e.stopPropagation();
-      if (isLatestMessage && !isLoading && !disabled && !isProceeded) {
-        setSelectedOption(key);
+      if (!isLatestMessage || isLoading || disabled || isProceeded) return;
+      if (!isMulti) {
+        setSelectedKeys([key]);
         onSelect?.(key);
+        onSelectMultiple?.([key]);
+        return;
       }
+      setSelectedKeys((prev) => {
+        let next;
+        if (prev.includes(key)) {
+          next = prev.filter((k) => k !== key);
+        } else if (prev.length < maxSel) {
+          next = [...prev, key];
+        } else {
+          next = prev;
+        }
+        onSelect?.(key);
+        onSelectMultiple?.(next);
+        return next;
+      });
+    };
+    const optionsEntries = resolvedOptions && Object.keys(resolvedOptions).length > 0 ? Object.entries(resolvedOptions).map(([key, val]) => [
+      key,
+      typeof val === "string" ? val : typeof val === "object" && val !== null ? val.label || val.description || val.id || JSON.stringify(val) : String(val ?? "")
+    ]) : [];
+    const labelFor = (key) => {
+      const found = optionsEntries.find(([k]) => k === key);
+      return found ? found[1] : key;
     };
     const handleProceed = async (e) => {
       e.preventDefault();
       e.stopPropagation();
-      if ((selectedOption || recommended) && !disabled && !isProceeded) {
-        const result = selectedOption || recommended || "";
-        if (!selectedOption && recommended) {
-          setSelectedOption(recommended);
-        }
-        const rawLabel = options && options[result];
-        const label = typeof rawLabel === "string" ? rawLabel : typeof rawLabel === "object" && rawLabel !== null ? rawLabel.label || rawLabel.description || result : result;
-        setIsProceeded(true);
-        if (sessionId && resolvedQuestion) {
-          const questionKey = buildQuestionKey(sessionId, resolvedQuestion);
-          await persistSelection(sessionId, questionKey, result);
-        }
-        if (sendMessage) {
-          sendMessage(`Q: ${resolvedQuestion}
+      if (disabled || isProceeded) return;
+      let finalKeys = selectedKeys.length ? selectedKeys : recommended ? [recommended] : [];
+      finalKeys = finalKeys.slice(0, maxSel);
+      if (finalKeys.length < minSel) return;
+      if (selectedKeys.length === 0 && recommended) {
+        setSelectedKeys(finalKeys);
+      }
+      const value = finalKeys.join(",");
+      const label = finalKeys.map(labelFor).join(", ");
+      setIsProceeded(true);
+      if (sessionId && resolvedQuestion) {
+        const questionKey = buildQuestionKey(sessionId, resolvedQuestion);
+        await persistSelection(sessionId, questionKey, value);
+      }
+      if (sendMessage) {
+        sendMessage(`Q: ${resolvedQuestion}
 A: ${label}`);
-        }
-        onProceed?.(result);
-        onAction?.({
-          type: "mcq_selection",
-          value: result,
-          label
-        });
       }
+      onProceed?.(value);
+      onAction?.({
+        type: "mcq_selection",
+        value,
+        label,
+        values: finalKeys,
+        labels: finalKeys.map(labelFor)
+      });
     };
-    const isOptionsDisabled = disabled || !isLatestMessage || isProceeded && !disableContinueInDiscovery;
+    const selectedCount = selectedKeys.length;
+    const meetsMin = (selectedCount || (recommended ? 1 : 0)) >= minSel;
     const isContinueDisabled = disabled || !isLatestMessage || isProceeded || isDiscovery;
-    const optionsEntries = resolvedOptions && Object.keys(resolvedOptions).length > 0 ? Object.entries(resolvedOptions).map(([key, val]) => [
-      key,
-      typeof val === "string" ? val : typeof val === "object" && val !== null ? val.label || val.description || val.id || JSON.stringify(val) : String(val ?? "")
-    ]) : [];
+    const guidance = !isMulti ? "Select one option" : isSelectAll ? "Select all that apply" : minSel === maxSel ? `Select ${maxSel} options` : minSel <= 1 ? `Choose up to ${maxSel} options` : `Select between ${minSel} and ${maxSel} options`;
     return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
       "div",
       {
@@ -41611,10 +41727,24 @@ A: ${label}`);
         ),
         style: t.root,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "text-sm text-cardText", style: t.text, children: resolvedQuestion || "Select an option:" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "mb-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "text-sm text-cardText", style: t.text, children: resolvedQuestion || "Select an option:" }),
+            isMulti && /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("p", { className: "mt-1 text-xs text-gray500 flex items-center gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { children: guidance }),
+              /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("span", { className: "text-gold", style: t.accent, children: [
+                "(",
+                selectedCount,
+                "/",
+                maxSel,
+                " selected)"
+              ] })
+            ] })
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "space-y-2.5 mb-4", children: optionsEntries.map(([key, label]) => {
-            const isSelected = selectedOption === key;
+            const isSelected = selectedKeys.includes(key);
             const isRecommended = key === recommended;
+            const atCap = isMulti && !isSelected && selectedCount >= maxSel;
+            const allowHover = !isOptionsDisabled && !atCap && (isMulti || selectedCount === 0);
             return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
               "div",
               {
@@ -41625,8 +41755,8 @@ A: ${label}`);
                   "cursor-pointer rounded-lg p-3 transition-colors",
                   "border bg-black",
                   isSelected ? "border-cardBorder" : "border-gray400",
-                  !selectedOption && !isOptionsDisabled && "hover:border-gray500",
-                  (isLoading || isOptionsDisabled) && "opacity-50 cursor-not-allowed"
+                  allowHover && "hover:border-gray500",
+                  (isLoading || isOptionsDisabled || atCap) && "opacity-50 cursor-not-allowed"
                 ),
                 style: isSelected ? { ...t.surface, ...t.accentBorder } : t.surface,
                 children: /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex items-start gap-3", children: [
@@ -41634,14 +41764,28 @@ A: ${label}`);
                     "div",
                     {
                       className: cn(
-                        "w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors",
+                        "w-4 h-4 border-2 flex items-center justify-center transition-colors",
+                        isMulti ? "rounded" : "rounded-full",
                         isSelected ? "border-gold" : cn(
                           "border-gray500",
-                          !selectedOption && !isOptionsDisabled && "hover:border-gold"
+                          allowHover && "hover:border-gold"
                         )
                       ),
                       style: isSelected ? t.accentBorder : void 0,
-                      children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "w-2 h-2 rounded-full bg-gold", style: t.accentBg })
+                      children: isSelected && (isMulti ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+                        "svg",
+                        {
+                          viewBox: "0 0 16 16",
+                          className: "w-3 h-3 text-gold",
+                          style: t.accent,
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("path", { d: "M3.5 8.5l3 3 6-7" })
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "w-2 h-2 rounded-full bg-gold", style: t.accentBg }))
                     }
                   ) }),
                   /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex-1 min-w-0", children: [
@@ -41658,7 +41802,7 @@ A: ${label}`);
             {
               "data-testid": "mcq-continue",
               onClick: handleProceed,
-              disabled: isContinueDisabled || isLoading || !selectedOption && !recommended,
+              disabled: isContinueDisabled || isLoading || !meetsMin,
               className: cn(
                 "px-4 py-1.5 border rounded-lg text-xs font-medium transition-colors",
                 "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -44865,6 +45009,190 @@ function CreatorWidgetInner({
 }
 var CreatorWidget = (0, import_react93.memo)(CreatorWidgetInner);
 
+// src/molecules/analytics/AnalyticsChart.tsx
+var import_react94 = require("react");
+var import_jsx_runtime178 = require("react/jsx-runtime");
+function getCSSVar(name) {
+  if (typeof document === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+var FALLBACK_COLORS = ["#C4AD7C", "#A189E8", "#5BC582", "#F59E0B", "#3B82F6", "#EC81B6", "#4DB8AC", "#F97316"];
+function normalizeConfig(config) {
+  const xAxisType = Array.isArray(config.xAxis) ? config.xAxis[0]?.type : config.xAxis?.type;
+  if (xAxisType !== "category") return config;
+  return {
+    ...config,
+    series: (config.series || []).map((s) => ({
+      ...s,
+      data: (s.data || []).map((pt) => {
+        if (pt && typeof pt === "object" && typeof pt.x === "string") {
+          const { x, ...rest } = pt;
+          return rest;
+        }
+        return pt;
+      })
+    }))
+  };
+}
+function stripNulls(val) {
+  if (val === null || val === void 0) return void 0;
+  if (Array.isArray(val)) return val.map(stripNulls).filter((v) => v !== void 0);
+  if (typeof val === "object") {
+    const out = {};
+    for (const k of Object.keys(val)) {
+      const v = stripNulls(val[k]);
+      if (v !== void 0) out[k] = v;
+    }
+    return out;
+  }
+  return val;
+}
+var hcSingleton = null;
+var hcLoadPromise = null;
+function loadHighcharts() {
+  if (hcSingleton) return Promise.resolve(hcSingleton);
+  if (hcLoadPromise) return hcLoadPromise;
+  hcLoadPromise = import("highcharts").then((m) => {
+    hcSingleton = m.default ?? m;
+    return hcSingleton;
+  });
+  return hcLoadPromise;
+}
+function buildTheme(height) {
+  const colors = [1, 2, 3, 4, 5, 6, 7, 8].map((i) => getCSSVar(`--chart-${i}`)).filter(Boolean);
+  return {
+    colors: colors.length ? colors : FALLBACK_COLORS,
+    chart: {
+      backgroundColor: getCSSVar("--paperBackground") || "#0a0a0a",
+      style: { fontFamily: "Inter, sans-serif" },
+      height
+    },
+    title: { style: { color: getCSSVar("--txtColor") || "#E5E5E5", fontSize: "14px", fontWeight: "600" } },
+    subtitle: { style: { color: getCSSVar("--textSecondary") || "#9A9080", fontSize: "12px" } },
+    xAxis: {
+      labels: { style: { color: getCSSVar("--textSecondary") || "#9A9080", fontSize: "11px" } },
+      gridLineColor: getCSSVar("--chart-grid") || "rgba(255,255,255,0.05)",
+      lineColor: getCSSVar("--gray300") || "#363843",
+      tickColor: getCSSVar("--gray300") || "#363843"
+    },
+    yAxis: {
+      labels: { style: { color: getCSSVar("--textSecondary") || "#9A9080", fontSize: "11px" } },
+      gridLineColor: getCSSVar("--chart-grid") || "rgba(255,255,255,0.05)",
+      title: { style: { color: getCSSVar("--textSecondary") || "#9A9080" } }
+    },
+    legend: {
+      itemStyle: { color: getCSSVar("--txtColor") || "#E5E5E5", fontSize: "11px", fontWeight: "normal" },
+      itemHoverStyle: { color: getCSSVar("--gray900") || "#f5f5f5" }
+    },
+    tooltip: {
+      backgroundColor: getCSSVar("--gray100") || "#1b1c22",
+      style: { color: getCSSVar("--txtColor") || "#E5E5E5", fontSize: "12px" },
+      borderColor: getCSSVar("--gray300") || "#363843",
+      borderRadius: 6
+    },
+    plotOptions: { series: { animation: { duration: 400 } } },
+    credits: { enabled: false }
+  };
+}
+function AnalyticsChart({
+  config: configProp,
+  chartId,
+  apiBase = "",
+  authToken,
+  height = 400,
+  className,
+  loading: loadingProp,
+  error: errorProp
+}) {
+  const [mounted, setMounted] = (0, import_react94.useState)(false);
+  const [fetchedConfig, setFetchedConfig] = (0, import_react94.useState)(null);
+  const [fetching, setFetching] = (0, import_react94.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react94.useState)(null);
+  const containerRef = (0, import_react94.useRef)(null);
+  const chartRef = (0, import_react94.useRef)(null);
+  (0, import_react94.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  (0, import_react94.useEffect)(() => {
+    if (!chartId || configProp) return;
+    let cancelled = false;
+    setFetching(true);
+    setFetchError(null);
+    const headers = {};
+    if (authToken) headers["Authorization"] = `Bearer ${authToken}`;
+    fetch(`${apiBase}/api/charts/${chartId}`, { headers }).then((r) => {
+      if (!r.ok) throw new Error(`${r.status}`);
+      return r.json();
+    }).then((d) => {
+      if (!cancelled) setFetchedConfig(d.chart_config ?? d);
+    }).catch((e) => {
+      if (!cancelled) setFetchError(e.message ?? "Failed to load chart");
+    }).finally(() => {
+      if (!cancelled) setFetching(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [chartId, apiBase, authToken, configProp]);
+  const activeConfig = configProp ?? fetchedConfig;
+  (0, import_react94.useEffect)(() => {
+    if (!mounted || !activeConfig || !containerRef.current) return;
+    const container = containerRef.current;
+    let cancelled = false;
+    loadHighcharts().then((HC) => {
+      if (cancelled || !container) return;
+      if (chartRef.current) {
+        try {
+          chartRef.current.destroy();
+        } catch {
+        }
+        chartRef.current = null;
+      }
+      HC.setOptions(buildTheme(height));
+      chartRef.current = HC.chart(container, normalizeConfig(stripNulls(activeConfig)));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [mounted, activeConfig]);
+  (0, import_react94.useEffect)(() => {
+    return () => {
+      if (chartRef.current) {
+        try {
+          chartRef.current.destroy();
+        } catch {
+        }
+        chartRef.current = null;
+      }
+    };
+  }, []);
+  (0, import_react94.useEffect)(() => {
+    if (!mounted || !containerRef.current) return;
+    const obs = new ResizeObserver(() => {
+      try {
+        chartRef.current?.reflow();
+      } catch {
+      }
+    });
+    obs.observe(containerRef.current);
+    return () => obs.disconnect();
+  }, [mounted]);
+  const bg = getCSSVar("--paperBackground") || "#0a0a0a";
+  const mutedColor = getCSSVar("--gray300") || "#363843";
+  const displayError = errorProp ?? fetchError;
+  const isLoading = loadingProp || fetching || !mounted || !activeConfig;
+  if (displayError) {
+    return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { className, style: { height, display: "flex", alignItems: "center", justifyContent: "center", backgroundColor: bg, borderRadius: 8, border: `1px solid ${mutedColor}` }, children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("p", { style: { color: getCSSVar("--redText") || "#f87171", fontSize: 13, margin: 0 }, children: displayError }) });
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className, style: { height, borderRadius: 8, overflow: "hidden", position: "relative", backgroundColor: bg, border: `1px solid ${mutedColor}` }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.06) 50%,transparent 100%)", animation: "hc-shimmer 1.6s ease-in-out infinite" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("style", { children: `@keyframes hc-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}` })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("div", { ref: containerRef, className, style: { width: "100%", minWidth: 0, height } });
+}
+
 // src/components/ui/index.ts
 var ui_exports = {};
 __export(ui_exports, {
@@ -45157,7 +45485,7 @@ __export(ui_exports, {
 // src/components/ui/button-group.tsx
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime178 = require("react/jsx-runtime");
+var import_jsx_runtime179 = require("react/jsx-runtime");
 var buttonGroupVariants = (0, import_class_variance_authority8.cva)(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
@@ -45177,7 +45505,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
     "div",
     {
       role: "group",
@@ -45194,7 +45522,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? import_react_slot4.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
     Comp,
     {
       className: cn(
@@ -45210,7 +45538,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
     Separator2,
     {
       "data-slot": "button-group-separator",
@@ -45226,9 +45554,9 @@ function ButtonGroupSeparator({
 
 // src/components/ui/empty.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime179 = require("react/jsx-runtime");
+var import_jsx_runtime180 = require("react/jsx-runtime");
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
     "div",
     {
       "data-slot": "empty",
@@ -45241,7 +45569,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
     "div",
     {
       "data-slot": "empty-header",
@@ -45272,7 +45600,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
     "div",
     {
       "data-slot": "empty-icon",
@@ -45283,7 +45611,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
     "div",
     {
       "data-slot": "empty-title",
@@ -45293,7 +45621,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
     "div",
     {
       "data-slot": "empty-description",
@@ -45306,7 +45634,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
     "div",
     {
       "data-slot": "empty-content",
@@ -45320,11 +45648,11 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-var import_react94 = require("react");
+var import_react95 = require("react");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime180 = require("react/jsx-runtime");
+var import_jsx_runtime181 = require("react/jsx-runtime");
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -45342,7 +45670,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     "legend",
     {
       "data-slot": "field-legend",
@@ -45358,7 +45686,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     "div",
     {
       "data-slot": "field-group",
@@ -45398,7 +45726,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     "div",
     {
       role: "group",
@@ -45410,7 +45738,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     "div",
     {
       "data-slot": "field-content",
@@ -45426,7 +45754,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     Label,
     {
       "data-slot": "field-label",
@@ -45441,7 +45769,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     "div",
     {
       "data-slot": "field-label",
@@ -45454,7 +45782,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     "p",
     {
       "data-slot": "field-description",
@@ -45473,7 +45801,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(
     "div",
     {
       "data-slot": "field-separator",
@@ -45484,8 +45812,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
           "span",
           {
             className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
@@ -45503,7 +45831,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = (0, import_react94.useMemo)(() => {
+  const content = (0, import_react95.useMemo)(() => {
     if (children) {
       return children;
     }
@@ -45513,14 +45841,14 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
-      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("li", { children: error.message }, index)
+    return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     "div",
     {
       role: "alert",
@@ -45534,9 +45862,9 @@ function FieldError({
 
 // src/components/ui/input-group.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime181 = require("react/jsx-runtime");
+var import_jsx_runtime182 = require("react/jsx-runtime");
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
     "div",
     {
       "data-slot": "input-group",
@@ -45580,7 +45908,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
     "div",
     {
       role: "group",
@@ -45620,7 +45948,7 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
     Button,
     {
       type,
@@ -45632,7 +45960,7 @@ function InputGroupButton({
   );
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
     "span",
     {
       className: cn(
@@ -45647,7 +45975,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
     Input,
     {
       "data-slot": "input-group-control",
@@ -45663,7 +45991,7 @@ function InputGroupTextarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -45679,9 +46007,9 @@ function InputGroupTextarea({
 // src/components/ui/item.tsx
 var import_react_slot5 = require("@radix-ui/react-slot");
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_jsx_runtime182 = require("react/jsx-runtime");
+var import_jsx_runtime183 = require("react/jsx-runtime");
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     "div",
     {
       role: "list",
@@ -45695,7 +46023,7 @@ function ItemSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     Separator2,
     {
       "data-slot": "item-separator",
@@ -45733,7 +46061,7 @@ function Item8({
   ...props
 }) {
   const Comp = asChild ? import_react_slot5.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     Comp,
     {
       "data-slot": "item",
@@ -45764,7 +46092,7 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     "div",
     {
       "data-slot": "item-media",
@@ -45775,7 +46103,7 @@ function ItemMedia({
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     "div",
     {
       "data-slot": "item-content",
@@ -45788,7 +46116,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     "div",
     {
       "data-slot": "item-title",
@@ -45801,7 +46129,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     "p",
     {
       "data-slot": "item-description",
@@ -45815,7 +46143,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     "div",
     {
       "data-slot": "item-actions",
@@ -45825,7 +46153,7 @@ function ItemActions({ className, ...props }) {
   );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     "div",
     {
       "data-slot": "item-header",
@@ -45838,7 +46166,7 @@ function ItemHeader({ className, ...props }) {
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     "div",
     {
       "data-slot": "item-footer",
@@ -45852,9 +46180,9 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/kbd.tsx
-var import_jsx_runtime183 = require("react/jsx-runtime");
+var import_jsx_runtime184 = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
     "kbd",
     {
       "data-slot": "kbd",
@@ -45869,7 +46197,7 @@ function Kbd({ className, ...props }) {
   );
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
     "kbd",
     {
       "data-slot": "kbd-group",
@@ -45902,7 +46230,7 @@ function useIsMobile() {
 }
 
 // src/components/ui/sidebar.tsx
-var import_jsx_runtime184 = require("react/jsx-runtime");
+var import_jsx_runtime185 = require("react/jsx-runtime");
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
@@ -45969,7 +46297,7 @@ var SidebarProvider = React116.forwardRef(
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
       "div",
       {
         style: {
@@ -46000,7 +46328,7 @@ var Sidebar = React116.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
         "div",
         {
           className: cn(
@@ -46014,7 +46342,7 @@ var Sidebar = React116.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -46025,16 +46353,16 @@ var Sidebar = React116.forwardRef(
           },
           side,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("div", { className: "flex h-full w-full flex-col", children })
+            /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: "flex h-full w-full flex-col", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
       "div",
       {
         ref,
@@ -46044,7 +46372,7 @@ var Sidebar = React116.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
             "div",
             {
               className: cn(
@@ -46055,7 +46383,7 @@ var Sidebar = React116.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
             "div",
             {
               className: cn(
@@ -46066,7 +46394,7 @@ var Sidebar = React116.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -46084,7 +46412,7 @@ var Sidebar = React116.forwardRef(
 Sidebar.displayName = "Sidebar";
 var SidebarTrigger = React116.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
     Button,
     {
       ref,
@@ -46098,8 +46426,8 @@ var SidebarTrigger = React116.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(PanelLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(PanelLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
@@ -46107,7 +46435,7 @@ var SidebarTrigger = React116.forwardRef(({ className, onClick, ...props }, ref)
 SidebarTrigger.displayName = "SidebarTrigger";
 var SidebarRail = React116.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     "button",
     {
       ref,
@@ -46131,7 +46459,7 @@ var SidebarRail = React116.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarRail.displayName = "SidebarRail";
 var SidebarInset = React116.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     "main",
     {
       ref,
@@ -46146,7 +46474,7 @@ var SidebarInset = React116.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInset.displayName = "SidebarInset";
 var SidebarInput = React116.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     Input,
     {
       ref,
@@ -46161,7 +46489,7 @@ var SidebarInput = React116.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarInput.displayName = "SidebarInput";
 var SidebarHeader = React116.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     "div",
     {
       ref,
@@ -46173,7 +46501,7 @@ var SidebarHeader = React116.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarHeader.displayName = "SidebarHeader";
 var SidebarFooter = React116.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     "div",
     {
       ref,
@@ -46185,7 +46513,7 @@ var SidebarFooter = React116.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarFooter.displayName = "SidebarFooter";
 var SidebarSeparator = React116.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     Separator2,
     {
       ref,
@@ -46197,7 +46525,7 @@ var SidebarSeparator = React116.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarSeparator.displayName = "SidebarSeparator";
 var SidebarContent = React116.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     "div",
     {
       ref,
@@ -46212,7 +46540,7 @@ var SidebarContent = React116.forwardRef(({ className, ...props }, ref) => {
 });
 SidebarContent.displayName = "SidebarContent";
 var SidebarGroup = React116.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     "div",
     {
       ref,
@@ -46225,7 +46553,7 @@ var SidebarGroup = React116.forwardRef(({ className, ...props }, ref) => {
 SidebarGroup.displayName = "SidebarGroup";
 var SidebarGroupLabel = React116.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     Comp,
     {
       ref,
@@ -46242,7 +46570,7 @@ var SidebarGroupLabel = React116.forwardRef(({ className, asChild = false, ...pr
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
 var SidebarGroupAction = React116.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     Comp,
     {
       ref,
@@ -46259,7 +46587,7 @@ var SidebarGroupAction = React116.forwardRef(({ className, asChild = false, ...p
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+var SidebarGroupContent = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
   "div",
   {
     ref,
@@ -46269,7 +46597,7 @@ var SidebarGroupContent = React116.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+var SidebarMenu = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
   "ul",
   {
     ref,
@@ -46279,7 +46607,7 @@ var SidebarMenu = React116.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+var SidebarMenuItem = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
   "li",
   {
     ref,
@@ -46321,7 +46649,7 @@ var SidebarMenuButton = React116.forwardRef(
   }, ref) => {
     const Comp = asChild ? import_react_slot6.Slot : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
       Comp,
       {
         ref,
@@ -46340,9 +46668,9 @@ var SidebarMenuButton = React116.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
         TooltipContent,
         {
           side: "right",
@@ -46357,7 +46685,7 @@ var SidebarMenuButton = React116.forwardRef(
 SidebarMenuButton.displayName = "SidebarMenuButton";
 var SidebarMenuAction = React116.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     Comp,
     {
       ref,
@@ -46378,7 +46706,7 @@ var SidebarMenuAction = React116.forwardRef(({ className, asChild = false, showO
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+var SidebarMenuBadge = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
   "div",
   {
     ref,
@@ -46400,7 +46728,7 @@ var SidebarMenuSkeleton = React116.forwardRef(({ className, showIcon = false, ..
   const width = React116.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
     "div",
     {
       ref,
@@ -46408,14 +46736,14 @@ var SidebarMenuSkeleton = React116.forwardRef(({ className, showIcon = false, ..
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
           Skeleton,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
@@ -46430,7 +46758,7 @@ var SidebarMenuSkeleton = React116.forwardRef(({ className, showIcon = false, ..
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+var SidebarMenuSub = React116.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
   "ul",
   {
     ref,
@@ -46444,11 +46772,11 @@ var SidebarMenuSub = React116.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React116.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("li", { ref, ...props }));
+var SidebarMenuSubItem = React116.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
 var SidebarMenuSubButton = React116.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
     Comp,
     {
       ref,
@@ -46472,20 +46800,20 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner = require("sonner");
-var import_jsx_runtime185 = require("react/jsx-runtime");
+var import_jsx_runtime186 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = (0, import_next_themes.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
     import_sonner.Toaster,
     {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(CircleCheck, { className: "h-4 w-4" }),
+        info: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Info, { className: "h-4 w-4" }),
+        warning: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(TriangleAlert, { className: "h-4 w-4" }),
+        error: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(OctagonX, { className: "h-4 w-4" }),
+        loading: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -46503,24 +46831,24 @@ var Toaster = ({ ...props }) => {
 // src/components/ui/toggle-group.tsx
 var React117 = __toESM(require("react"), 1);
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
-var import_jsx_runtime186 = require("react/jsx-runtime");
+var import_jsx_runtime187 = require("react/jsx-runtime");
 var ToggleGroupContext = React117.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React117.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+var ToggleGroup = React117.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 var ToggleGroupItem = React117.forwardRef(({ className, children, variant, size, ...props }, ref) => {
   const context = React117.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -46539,7 +46867,7 @@ var ToggleGroupItem = React117.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
-var import_jsx_runtime187 = require("react/jsx-runtime");
+var import_jsx_runtime188 = require("react/jsx-runtime");
 var MOLECULE_REFS = new Set(Object.values(molecules_exports));
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
@@ -46645,24 +46973,24 @@ var REGISTERED_COMPONENTS = /* @__PURE__ */ new Set([
 ]);
 var renderContextDependentError = (componentName, normalizedName, key) => {
   const suggestion = COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom (if available)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
     "div",
     {
       className: "p-4 border-2 border-amber-500/50 rounded-lg bg-amber-50/80 space-y-2 my-2",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { className: "flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { className: "flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
               "Invalid Component: ",
               componentName
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
+            /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
+        /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
         ] })
       ]
     },
@@ -46755,11 +47083,11 @@ var PXEngineRenderer = ({
   theme,
   onFormSubmit
 }) => {
-  const contextTheme = import_react95.default.useContext(WidgetThemeContext);
+  const contextTheme = import_react96.default.useContext(WidgetThemeContext);
   const effectiveTheme = theme ?? contextTheme;
-  const formValuesRef = import_react95.default.useRef({});
-  const [, forceUpdate] = import_react95.default.useReducer((x) => x + 1, 0);
-  const handleInputValueChange = import_react95.default.useCallback((key, value) => {
+  const formValuesRef = import_react96.default.useRef({});
+  const [, forceUpdate] = import_react96.default.useReducer((x) => x + 1, 0);
+  const handleInputValueChange = import_react96.default.useCallback((key, value) => {
     formValuesRef.current[key] = value;
     forceUpdate();
   }, []);
@@ -46767,12 +47095,12 @@ var PXEngineRenderer = ({
   const root = schema.root || schema;
   const renderRecursive = (component, index) => {
     if (Array.isArray(component)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(import_react95.default.Fragment, { children: component.map((child, idx) => renderRecursive(child, idx)) }, index !== void 0 ? `array-${index}` : "array-root");
+      return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_react96.default.Fragment, { children: component.map((child, idx) => renderRecursive(child, idx)) }, index !== void 0 ? `array-${index}` : "array-root");
     }
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
-    if (import_react95.default.isValidElement(component)) {
+    if (import_react96.default.isValidElement(component)) {
       return component;
     }
     if (!component || typeof component !== "object") return null;
@@ -46890,7 +47218,7 @@ var PXEngineRenderer = ({
     const effectiveOnAction = finalProps.onAction ?? onAction;
     delete finalProps.onAction;
     if (isAtomWithRenderProp) {
-      return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -46902,7 +47230,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -46914,7 +47242,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(WidgetThemeContext.Provider, { value: effectiveTheme, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(WidgetThemeContext.Provider, { value: effectiveTheme, children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -46939,6 +47267,7 @@ var PXEngineRenderer = ({
   AlertDialogTitle,
   AlertDialogTrigger,
   AlertTitle,
+  AnalyticsChart,
   ApprovalCard,
   ArrowToggleAtom,
   AspectRatio,