@pactor-app/ui 1.22.0 → 1.23.0

package/dist/{chunk-EDUMGNT6.js → chunk-VTCNWVKQ.js}

@@ -9425,10 +9425,10 @@ function EChartBase({
         dataIndex: params.dataIndex
       });
     });
-    const observer = new ResizeObserver(() => chart?.resize());
-    observer.observe(host);
+    const observer2 = new ResizeObserver(() => chart?.resize());
+    observer2.observe(host);
     return () => {
-      observer.disconnect();
+      observer2.disconnect();
       chart?.dispose();
       chartRef.current = null;
     };
@@ -9889,6 +9889,9 @@ function buildComposedOption(input, theme) {
   };
 }
 
+// src/components/chart/lib/use-chart-theme.ts
+import { useSyncExternalStore } from "react";
+
 // src/components/chart/lib/color.ts
 var LPAREN = String.fromCharCode(40);
 var RPAREN = String.fromCharCode(41);
@@ -9985,6 +9988,64 @@ function getChartTheme() {
     return FALLBACK_THEME;
   }
 }
+function resetChartTheme() {
+  cached = null;
+}
+var CHART_SKIN_CHANGE_EVENT = "pactor:skin-change";
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+var scheduled = false;
+function scheduleNotify() {
+  if (scheduled) return;
+  scheduled = true;
+  const enqueue = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
+  enqueue(() => {
+    scheduled = false;
+    resetChartTheme();
+    for (const listener of [...listeners]) {
+      listener();
+    }
+  });
+}
+function handleResourceLoad(event) {
+  const target = event.target;
+  if (target instanceof HTMLLinkElement || target instanceof HTMLStyleElement) {
+    scheduleNotify();
+  }
+}
+function subscribeChartTheme(listener) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return () => {
+    };
+  }
+  listeners.add(listener);
+  if (!observer) {
+    observer = new MutationObserver(scheduleNotify);
+    observer.observe(document.documentElement, { attributes: true });
+    observer.observe(document.head, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    document.addEventListener("load", handleResourceLoad, true);
+    window.addEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && observer) {
+      observer.disconnect();
+      observer = null;
+      document.removeEventListener("load", handleResourceLoad, true);
+      window.removeEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+    }
+  };
+}
+
+// src/components/chart/lib/use-chart-theme.ts
+function useChartTheme() {
+  return useSyncExternalStore(subscribeChartTheme, getChartTheme, getChartTheme);
+}
 
 // src/components/chart/AreaChart/index.tsx
 import { jsx as jsx131 } from "react/jsx-runtime";
@@ -10003,7 +10064,7 @@ function AreaChart({
 }) {
   const option = buildAreaOption(
     { data, xKey, yKeys, stacked, fillOpacity, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx131(
     EChartBase,
@@ -10034,7 +10095,7 @@ function BarChart2({
 }) {
   const option = buildBarOption(
     { data, yKey, yKeys: xKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx132(
     EChartBase,
@@ -10066,7 +10127,7 @@ function BubbleChart({
 }) {
   const option = buildBubbleOption(
     { data, xKey, yKey, sizeKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx133(
     EChartBase,
@@ -10097,7 +10158,7 @@ function ColumnChart({
 }) {
   const option = buildColumnOption(
     { data, xKey, yKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx134(
     EChartBase,
@@ -10127,7 +10188,7 @@ function ComposedChart({
 }) {
   const option = buildComposedOption(
     { data, xKey, series, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx135(
     EChartBase,
@@ -10173,7 +10234,7 @@ function DonutChart({
       colors,
       title
     },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx136(
     EChartBase,
@@ -10204,7 +10265,7 @@ function FunnelChart2({
 }) {
   const option = buildFunnelOption(
     { data, nameKey, valueKey, sort, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx137(
     EChartBase,
@@ -10235,7 +10296,7 @@ function GaugeChart2({
 }) {
   const option = buildGaugeOption(
     { value, min, max, thresholds, unit, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx138(
     EChartBase,
@@ -10265,7 +10326,7 @@ function Heatmap({
 }) {
   const option = buildHeatmapOption(
     { data, xKey, yKey, valueKey, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx139(
     EChartBase,
@@ -10298,7 +10359,7 @@ function LineChart2({
 }) {
   const option = buildLineOption(
     { data, xKey, yKeys, smooth, showArea, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx140(
     EChartBase,
@@ -10337,6 +10398,7 @@ function MapChart2({
   className,
   style
 }) {
+  const theme = useChartTheme();
   const [loadState, setLoadState] = useState46(
     () => geoJson || !geoJsonUrl || hasRegisteredMap(mapName) ? "idle" : "loading"
   );
@@ -10403,7 +10465,7 @@ function MapChart2({
       }
     );
   }
-  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, getChartTheme());
+  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, theme);
   return /* @__PURE__ */ jsx141(
     EChartBase,
     {
@@ -10490,7 +10552,7 @@ function PieChart2({
 }) {
   const option = buildPieOption(
     { data, nameKey, valueKey, showLabel, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx143(
     EChartBase,
@@ -10520,7 +10582,7 @@ function RadarChart2({
 }) {
   const option = buildRadarOption(
     { data, indicatorKey, yKeys, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx144(
     EChartBase,
@@ -10546,7 +10608,7 @@ function SankeyChart2({
   className,
   style
 }) {
-  const option = buildSankeyOption({ nodes, links, title }, getChartTheme());
+  const option = buildSankeyOption({ nodes, links, title }, useChartTheme());
   return /* @__PURE__ */ jsx145(
     EChartBase,
     {
@@ -10576,7 +10638,7 @@ function ScatterChart2({
 }) {
   const option = buildScatterOption(
     { data, xKey, yKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx146(
     EChartBase,
@@ -10606,7 +10668,7 @@ function TreeChart2({
 }) {
   const option = buildTreeOption(
     { data, title, orient, edgeShape, initialTreeDepth },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx147(
     EChartBase,

package/dist/components/index.cjs

@@ -13660,10 +13660,10 @@ function EChartBase({
         dataIndex: params.dataIndex
       });
     });
-    const observer = new ResizeObserver(() => chart?.resize());
-    observer.observe(host);
+    const observer2 = new ResizeObserver(() => chart?.resize());
+    observer2.observe(host);
     return () => {
-      observer.disconnect();
+      observer2.disconnect();
       chart?.dispose();
       chartRef.current = null;
     };
@@ -14124,6 +14124,9 @@ function buildComposedOption(input, theme) {
   };
 }
 
+// src/components/chart/lib/use-chart-theme.ts
+var import_react69 = require("react");
+
 // src/components/chart/lib/color.ts
 var LPAREN = String.fromCharCode(40);
 var RPAREN = String.fromCharCode(41);
@@ -14220,6 +14223,64 @@ function getChartTheme() {
     return FALLBACK_THEME;
   }
 }
+function resetChartTheme() {
+  cached = null;
+}
+var CHART_SKIN_CHANGE_EVENT = "pactor:skin-change";
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+var scheduled = false;
+function scheduleNotify() {
+  if (scheduled) return;
+  scheduled = true;
+  const enqueue = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
+  enqueue(() => {
+    scheduled = false;
+    resetChartTheme();
+    for (const listener of [...listeners]) {
+      listener();
+    }
+  });
+}
+function handleResourceLoad(event) {
+  const target = event.target;
+  if (target instanceof HTMLLinkElement || target instanceof HTMLStyleElement) {
+    scheduleNotify();
+  }
+}
+function subscribeChartTheme(listener) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return () => {
+    };
+  }
+  listeners.add(listener);
+  if (!observer) {
+    observer = new MutationObserver(scheduleNotify);
+    observer.observe(document.documentElement, { attributes: true });
+    observer.observe(document.head, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    document.addEventListener("load", handleResourceLoad, true);
+    window.addEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && observer) {
+      observer.disconnect();
+      observer = null;
+      document.removeEventListener("load", handleResourceLoad, true);
+      window.removeEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+    }
+  };
+}
+
+// src/components/chart/lib/use-chart-theme.ts
+function useChartTheme() {
+  return (0, import_react69.useSyncExternalStore)(subscribeChartTheme, getChartTheme, getChartTheme);
+}
 
 // src/components/chart/AreaChart/index.tsx
 var import_jsx_runtime189 = require("react/jsx-runtime");
@@ -14238,7 +14299,7 @@ function AreaChart({
 }) {
   const option = buildAreaOption(
     { data, xKey, yKeys, stacked, fillOpacity, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
     EChartBase,
@@ -14269,7 +14330,7 @@ function BarChart2({
 }) {
   const option = buildBarOption(
     { data, yKey, yKeys: xKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
     EChartBase,
@@ -14301,7 +14362,7 @@ function BubbleChart({
 }) {
   const option = buildBubbleOption(
     { data, xKey, yKey, sizeKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     EChartBase,
@@ -14332,7 +14393,7 @@ function ColumnChart({
 }) {
   const option = buildColumnOption(
     { data, xKey, yKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
     EChartBase,
@@ -14362,7 +14423,7 @@ function ComposedChart({
 }) {
   const option = buildComposedOption(
     { data, xKey, series, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
     EChartBase,
@@ -14408,7 +14469,7 @@ function DonutChart({
       colors,
       title
     },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
     EChartBase,
@@ -14439,7 +14500,7 @@ function FunnelChart2({
 }) {
   const option = buildFunnelOption(
     { data, nameKey, valueKey, sort, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
     EChartBase,
@@ -14470,7 +14531,7 @@ function GaugeChart2({
 }) {
   const option = buildGaugeOption(
     { value, min, max, thresholds, unit, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
     EChartBase,
@@ -14500,7 +14561,7 @@ function Heatmap({
 }) {
   const option = buildHeatmapOption(
     { data, xKey, yKey, valueKey, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
     EChartBase,
@@ -14533,7 +14594,7 @@ function LineChart2({
 }) {
   const option = buildLineOption(
     { data, xKey, yKeys, smooth, showArea, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
     EChartBase,
@@ -14549,7 +14610,7 @@ function LineChart2({
 }
 
 // src/components/chart/MapChart/index.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_jsx_runtime199 = require("react/jsx-runtime");
 var fetchedMaps = /* @__PURE__ */ new Set();
 function hasRegisteredMap(mapName) {
@@ -14572,7 +14633,8 @@ function MapChart2({
   className,
   style
 }) {
-  const [loadState, setLoadState] = (0, import_react69.useState)(
+  const theme = useChartTheme();
+  const [loadState, setLoadState] = (0, import_react70.useState)(
     () => geoJson || !geoJsonUrl || hasRegisteredMap(mapName) ? "idle" : "loading"
   );
   if (geoJson) {
@@ -14581,7 +14643,7 @@ function MapChart2({
     } catch {
     }
   }
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (geoJson || !geoJsonUrl || hasRegisteredMap(mapName) || fetchedMaps.has(mapName)) {
       setLoadState("idle");
       return;
@@ -14638,7 +14700,7 @@ function MapChart2({
       }
     );
   }
-  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, getChartTheme());
+  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, theme);
   return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
     EChartBase,
     {
@@ -14725,7 +14787,7 @@ function PieChart2({
 }) {
   const option = buildPieOption(
     { data, nameKey, valueKey, showLabel, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
     EChartBase,
@@ -14755,7 +14817,7 @@ function RadarChart2({
 }) {
   const option = buildRadarOption(
     { data, indicatorKey, yKeys, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     EChartBase,
@@ -14781,7 +14843,7 @@ function SankeyChart2({
   className,
   style
 }) {
-  const option = buildSankeyOption({ nodes, links, title }, getChartTheme());
+  const option = buildSankeyOption({ nodes, links, title }, useChartTheme());
   return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
     EChartBase,
     {
@@ -14811,7 +14873,7 @@ function ScatterChart2({
 }) {
   const option = buildScatterOption(
     { data, xKey, yKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
     EChartBase,
@@ -14841,7 +14903,7 @@ function TreeChart2({
 }) {
   const option = buildTreeOption(
     { data, title, orient, edgeShape, initialTreeDepth },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
     EChartBase,

package/dist/components/index.js

@@ -151,7 +151,7 @@ import {
   inferKind,
   registerBuiltinComponents,
   useFormContext
-} from "../chunk-EDUMGNT6.js";
+} from "../chunk-VTCNWVKQ.js";
 import {
   ICONS,
   Icon,

package/dist/index.cjs

@@ -13699,10 +13699,10 @@ function EChartBase({
         dataIndex: params.dataIndex
       });
     });
-    const observer = new ResizeObserver(() => chart?.resize());
-    observer.observe(host);
+    const observer2 = new ResizeObserver(() => chart?.resize());
+    observer2.observe(host);
     return () => {
-      observer.disconnect();
+      observer2.disconnect();
       chart?.dispose();
       chartRef.current = null;
     };
@@ -14163,6 +14163,9 @@ function buildComposedOption(input, theme) {
   };
 }
 
+// src/components/chart/lib/use-chart-theme.ts
+var import_react69 = require("react");
+
 // src/components/chart/lib/color.ts
 var LPAREN = String.fromCharCode(40);
 var RPAREN = String.fromCharCode(41);
@@ -14259,6 +14262,64 @@ function getChartTheme() {
     return FALLBACK_THEME;
   }
 }
+function resetChartTheme() {
+  cached = null;
+}
+var CHART_SKIN_CHANGE_EVENT = "pactor:skin-change";
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+var scheduled = false;
+function scheduleNotify() {
+  if (scheduled) return;
+  scheduled = true;
+  const enqueue = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
+  enqueue(() => {
+    scheduled = false;
+    resetChartTheme();
+    for (const listener of [...listeners]) {
+      listener();
+    }
+  });
+}
+function handleResourceLoad(event) {
+  const target = event.target;
+  if (target instanceof HTMLLinkElement || target instanceof HTMLStyleElement) {
+    scheduleNotify();
+  }
+}
+function subscribeChartTheme(listener) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return () => {
+    };
+  }
+  listeners.add(listener);
+  if (!observer) {
+    observer = new MutationObserver(scheduleNotify);
+    observer.observe(document.documentElement, { attributes: true });
+    observer.observe(document.head, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    document.addEventListener("load", handleResourceLoad, true);
+    window.addEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && observer) {
+      observer.disconnect();
+      observer = null;
+      document.removeEventListener("load", handleResourceLoad, true);
+      window.removeEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+    }
+  };
+}
+
+// src/components/chart/lib/use-chart-theme.ts
+function useChartTheme() {
+  return (0, import_react69.useSyncExternalStore)(subscribeChartTheme, getChartTheme, getChartTheme);
+}
 
 // src/components/chart/AreaChart/index.tsx
 var import_jsx_runtime189 = require("react/jsx-runtime");
@@ -14277,7 +14338,7 @@ function AreaChart({
 }) {
   const option = buildAreaOption(
     { data, xKey, yKeys, stacked, fillOpacity, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
     EChartBase,
@@ -14308,7 +14369,7 @@ function BarChart2({
 }) {
   const option = buildBarOption(
     { data, yKey, yKeys: xKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
     EChartBase,
@@ -14340,7 +14401,7 @@ function BubbleChart({
 }) {
   const option = buildBubbleOption(
     { data, xKey, yKey, sizeKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     EChartBase,
@@ -14371,7 +14432,7 @@ function ColumnChart({
 }) {
   const option = buildColumnOption(
     { data, xKey, yKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
     EChartBase,
@@ -14401,7 +14462,7 @@ function ComposedChart({
 }) {
   const option = buildComposedOption(
     { data, xKey, series, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
     EChartBase,
@@ -14447,7 +14508,7 @@ function DonutChart({
       colors,
       title
     },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
     EChartBase,
@@ -14478,7 +14539,7 @@ function FunnelChart2({
 }) {
   const option = buildFunnelOption(
     { data, nameKey, valueKey, sort, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
     EChartBase,
@@ -14509,7 +14570,7 @@ function GaugeChart2({
 }) {
   const option = buildGaugeOption(
     { value, min, max, thresholds, unit, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
     EChartBase,
@@ -14539,7 +14600,7 @@ function Heatmap({
 }) {
   const option = buildHeatmapOption(
     { data, xKey, yKey, valueKey, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
     EChartBase,
@@ -14572,7 +14633,7 @@ function LineChart2({
 }) {
   const option = buildLineOption(
     { data, xKey, yKeys, smooth, showArea, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
     EChartBase,
@@ -14588,7 +14649,7 @@ function LineChart2({
 }
 
 // src/components/chart/MapChart/index.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_jsx_runtime199 = require("react/jsx-runtime");
 var fetchedMaps = /* @__PURE__ */ new Set();
 function hasRegisteredMap(mapName) {
@@ -14611,7 +14672,8 @@ function MapChart2({
   className,
   style
 }) {
-  const [loadState, setLoadState] = (0, import_react69.useState)(
+  const theme = useChartTheme();
+  const [loadState, setLoadState] = (0, import_react70.useState)(
     () => geoJson || !geoJsonUrl || hasRegisteredMap(mapName) ? "idle" : "loading"
   );
   if (geoJson) {
@@ -14620,7 +14682,7 @@ function MapChart2({
     } catch {
     }
   }
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (geoJson || !geoJsonUrl || hasRegisteredMap(mapName) || fetchedMaps.has(mapName)) {
       setLoadState("idle");
       return;
@@ -14677,7 +14739,7 @@ function MapChart2({
       }
     );
   }
-  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, getChartTheme());
+  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, theme);
   return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
     EChartBase,
     {
@@ -14764,7 +14826,7 @@ function PieChart2({
 }) {
   const option = buildPieOption(
     { data, nameKey, valueKey, showLabel, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
     EChartBase,
@@ -14794,7 +14856,7 @@ function RadarChart2({
 }) {
   const option = buildRadarOption(
     { data, indicatorKey, yKeys, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     EChartBase,
@@ -14820,7 +14882,7 @@ function SankeyChart2({
   className,
   style
 }) {
-  const option = buildSankeyOption({ nodes, links, title }, getChartTheme());
+  const option = buildSankeyOption({ nodes, links, title }, useChartTheme());
   return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
     EChartBase,
     {
@@ -14850,7 +14912,7 @@ function ScatterChart2({
 }) {
   const option = buildScatterOption(
     { data, xKey, yKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
     EChartBase,
@@ -14880,7 +14942,7 @@ function TreeChart2({
 }) {
   const option = buildTreeOption(
     { data, title, orient, edgeShape, initialTreeDepth },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
     EChartBase,
@@ -15117,10 +15179,10 @@ function collectDefaultOpenKeys(registry, activeMenuId) {
 var import_permission = require("@pactor-app/permission");
 var import_router = require("@pactor-app/router");
 var import_runtime27 = require("@pactor-app/runtime");
-var import_react71 = require("react");
+var import_react72 = require("react");
 
 // src/layout/admin/use-media-query.ts
-var import_react70 = require("react");
+var import_react71 = require("react");
 var BREAKPOINT_PX = {
   xs: 480,
   sm: 576,
@@ -15130,10 +15192,10 @@ var BREAKPOINT_PX = {
   xxl: 1600
 };
 function useMediaQuery(query) {
-  const [matches, setMatches] = (0, import_react70.useState)(
+  const [matches, setMatches] = (0, import_react71.useState)(
     () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false
   );
-  (0, import_react70.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
       return;
     }
@@ -15176,8 +15238,8 @@ function CollapsedGroupFlyout({
   activeMenuId,
   defaultOpenKeys
 }) {
-  const [open, setOpen] = (0, import_react71.useState)(false);
-  const closeTimer = (0, import_react71.useRef)(void 0);
+  const [open, setOpen] = (0, import_react72.useState)(false);
+  const closeTimer = (0, import_react72.useRef)(void 0);
   const openNow = () => {
     window.clearTimeout(closeTimer.current);
     setOpen(true);
@@ -15186,7 +15248,7 @@ function CollapsedGroupFlyout({
     window.clearTimeout(closeTimer.current);
     closeTimer.current = window.setTimeout(() => setOpen(false), 200);
   };
-  (0, import_react71.useEffect)(() => () => window.clearTimeout(closeTimer.current), []);
+  (0, import_react72.useEffect)(() => () => window.clearTimeout(closeTimer.current), []);
   return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
       PopoverTrigger,
@@ -15370,16 +15432,16 @@ function AdminLayout({
   const showTabs = config.tabs ?? false;
   const showBreadcrumb = config.breadcrumb ?? false;
   const showFooter = config.footer ?? false;
-  const [collapsed, setCollapsed] = (0, import_react71.useState)(config.collapsed ?? false);
+  const [collapsed, setCollapsed] = (0, import_react72.useState)(config.collapsed ?? false);
   const broken = useBreakpointBelow(config.breakpoint);
   const effectiveCollapsed = collapsed || broken;
-  const [bridgeRoute, setBridgeRoute] = (0, import_react71.useState)(
+  const [bridgeRoute, setBridgeRoute] = (0, import_react72.useState)(
     () => (0, import_router.resolveRoute)(registry, bridge.getLocation())
   );
-  const [tabs, setTabs] = (0, import_react71.useState)([]);
-  const tabsRef = (0, import_react71.useRef)(tabs);
+  const [tabs, setTabs] = (0, import_react72.useState)([]);
+  const tabsRef = (0, import_react72.useRef)(tabs);
   tabsRef.current = tabs;
-  (0, import_react71.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     const handleLocation = (location) => {
       const next = (0, import_router.resolveRoute)(registry, location);
       setBridgeRoute(next);
@@ -15400,16 +15462,16 @@ function AdminLayout({
   }, [registry, bridge]);
   const route = routeProp ?? bridgeRoute;
   const activeMenuId = route?.activeMenu;
-  const visibleMenus = (0, import_react71.useMemo)(
+  const visibleMenus = (0, import_react72.useMemo)(
     () => buildVisibleMenuTree(registry, permissionChecker),
     [registry, permissionChecker]
   );
-  const defaultOpenKeysRef = (0, import_react71.useRef)(null);
+  const defaultOpenKeysRef = (0, import_react72.useRef)(null);
   if (defaultOpenKeysRef.current === null) {
     defaultOpenKeysRef.current = collectDefaultOpenKeys(registry, activeMenuId);
   }
   const defaultOpenKeys = defaultOpenKeysRef.current;
-  const activeTopId = (0, import_react71.useMemo)(() => {
+  const activeTopId = (0, import_react72.useMemo)(() => {
     if (activeMenuId !== void 0) {
       const chain = findMenuChain(registry, activeMenuId);
       if (chain.length > 0) {
@@ -15418,11 +15480,11 @@ function AdminLayout({
     }
     return void 0;
   }, [registry, activeMenuId]);
-  const [selectedTopId, setSelectedTopId] = (0, import_react71.useState)();
+  const [selectedTopId, setSelectedTopId] = (0, import_react72.useState)();
   const secondaryTopId = selectedTopId ?? activeTopId ?? visibleMenus.find((m) => m.type === "group")?.id ?? visibleMenus[0]?.id;
   const secondaryTop = visibleMenus.find((m) => m.id === secondaryTopId);
   const hasSecondary = (secondaryTop?.children?.length ?? 0) > 0;
-  const breadcrumbItems = (0, import_react71.useMemo)(() => {
+  const breadcrumbItems = (0, import_react72.useMemo)(() => {
     if (!showBreadcrumb || activeMenuId === void 0) {
       return [];
     }
@@ -15675,7 +15737,7 @@ function BlankLayout({ children }) {
 
 // src/layout/chat/ChatLayout.tsx
 var import_permission2 = require("@pactor-app/permission");
-var import_react72 = require("react");
+var import_react73 = require("react");
 var import_jsx_runtime208 = require("react/jsx-runtime");
 function ChatLayout({
   brand,
@@ -15691,7 +15753,7 @@ function ChatLayout({
   sidebarFooter,
   children
 }) {
-  const registryMenus = (0, import_react72.useMemo)(() => {
+  const registryMenus = (0, import_react73.useMemo)(() => {
     if (menu !== void 0 || registry === void 0) {
       return [];
     }
@@ -15700,10 +15762,10 @@ function ChatLayout({
     return visible.flatMap((item) => menuItemToMenuData(item));
   }, [menu, registry, permissionChecker]);
   const menuItems = menu ?? registryMenus;
-  const [bridgePath, setBridgePath] = (0, import_react72.useState)(
+  const [bridgePath, setBridgePath] = (0, import_react73.useState)(
     () => bridge?.getLocation().pathname ?? "/"
   );
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     if (bridge === void 0) {
       return;
     }
@@ -15711,7 +15773,7 @@ function ChatLayout({
       setBridgePath(location.pathname);
     });
   }, [bridge]);
-  const activeKey = (0, import_react72.useMemo)(() => {
+  const activeKey = (0, import_react73.useMemo)(() => {
     if (activeMenuKey !== void 0) {
       return activeMenuKey;
     }
@@ -16086,7 +16148,7 @@ function isRecord(value) {
 
 // src/interaction/provider.tsx
 var import_runtime29 = require("@pactor-app/runtime");
-var import_react73 = require("react");
+var import_react74 = require("react");
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime211 = require("react/jsx-runtime");
 var TOAST_DURATION = 3e3;
@@ -16100,11 +16162,11 @@ function InteractionProvider({
   bridge,
   children
 }) {
-  const [confirmState, setConfirmState] = (0, import_react73.useState)(null);
-  const [confirmOpen, setConfirmOpen] = (0, import_react73.useState)(false);
-  const [toasts, setToasts] = (0, import_react73.useState)([]);
+  const [confirmState, setConfirmState] = (0, import_react74.useState)(null);
+  const [confirmOpen, setConfirmOpen] = (0, import_react74.useState)(false);
+  const [toasts, setToasts] = (0, import_react74.useState)([]);
   const { t } = (0, import_runtime29.useI18n)();
-  const { modal, message } = (0, import_react73.useMemo)(() => {
+  const { modal, message } = (0, import_react74.useMemo)(() => {
     const pushToast = (type, content) => {
       const id = Date.now() + Math.random();
       setToasts((prev) => [...prev, { id, type, content }]);
@@ -16126,7 +16188,7 @@ function InteractionProvider({
     };
     return { modal: modalImpl, message: messageImpl };
   }, []);
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     bridge.modal = modal;
     bridge.message = message;
     return () => {
@@ -16209,7 +16271,7 @@ function InteractionProvider({
 // src/interaction/host.tsx
 var import_lucide_react38 = require("lucide-react");
 var import_runtime30 = require("@pactor-app/runtime");
-var import_react74 = require("react");
+var import_react75 = require("react");
 var import_jsx_runtime212 = require("react/jsx-runtime");
 function toCssWidth(width) {
   if (width === void 0) {
@@ -16219,11 +16281,11 @@ function toCssWidth(width) {
 }
 function OverlayHost({ manager, resolvePage }) {
   const renderer = (0, import_runtime30.useRenderer)();
-  const stack = (0, import_react74.useSyncExternalStore)(
+  const stack = (0, import_react75.useSyncExternalStore)(
     (onChange) => manager.subscribe(onChange),
     () => manager.stack()
   );
-  (0, import_react74.useSyncExternalStore)(
+  (0, import_react75.useSyncExternalStore)(
     (onChange) => {
       const offState = renderer.context.state.subscribe(onChange);
       const offData = renderer.context.data.subscribe(onChange);
@@ -16370,9 +16432,9 @@ function PageOverlayBody({
   renderer,
   resolvePage
 }) {
-  const [child, setChild] = (0, import_react74.useState)(null);
-  const [error, setError] = (0, import_react74.useState)(null);
-  (0, import_react74.useEffect)(() => {
+  const [child, setChild] = (0, import_react75.useState)(null);
+  const [error, setError] = (0, import_react75.useState)(null);
+  (0, import_react75.useEffect)(() => {
     if (!resolvePage) {
       setError(
         new Error(

package/dist/index.js

@@ -151,7 +151,7 @@ import {
   inferKind,
   registerBuiltinComponents,
   useFormContext
-} from "./chunk-EDUMGNT6.js";
+} from "./chunk-VTCNWVKQ.js";
 import {
   InteractionProvider,
   OVERLAY_CANCEL_PAYLOAD,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/ui",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Pactor UI kit (shadcn): the single built-in UI kit — vendored shadcn/ui components (Base UI primitives + cva + tailwind-merge + lucide-react), props contracts, interaction core (OverlayManager / UiBridge) and layouts, with build-time Tailwind v4 prebuilt styles.css (zero consumer-side Tailwind config)",
   "keywords": [
     "pactor",
@@ -107,11 +107,11 @@
     "react-resizable-panels": "^4.12.3",
     "tailwind-merge": "^3.6.0",
     "vaul": "^1.1.2",
-    "@pactor-app/core": "1.22.0",
-    "@pactor-app/markdown": "1.22.0",
-    "@pactor-app/router": "1.22.0",
-    "@pactor-app/permission": "1.22.0",
-    "@pactor-app/runtime": "1.22.0"
+    "@pactor-app/core": "1.23.0",
+    "@pactor-app/markdown": "1.23.0",
+    "@pactor-app/permission": "1.23.0",
+    "@pactor-app/runtime": "1.23.0",
+    "@pactor-app/router": "1.23.0"
   },
   "peerDependencies": {
     "react": ">=18",