@skygraph/react 0.5.3 → 0.5.4

package/dist/index.js

@@ -22,7 +22,7 @@ import {
   zodRule,
   zodRules,
   zodToJsonSchema
-} from "./chunk-YTPUWPWA.js";
+} from "./chunk-Y6XZ5TLD.js";
 import {
   Pagination,
   Select,
@@ -31,7 +31,7 @@ import {
   buildPrintHtml,
   printElement,
   useTable
-} from "./chunk-P4J4PFBG.js";
+} from "./chunk-7AA2JPZB.js";
 import {
   Button,
   Input,
@@ -2676,6 +2676,21 @@ function startOfDay(d) {
 function cloneDate(d) {
   return new Date(d.getTime());
 }
+function startOfWeek(d) {
+  const s = startOfDay(d);
+  s.setDate(s.getDate() - s.getDay());
+  return s;
+}
+function endOfWeek(d) {
+  const e = startOfWeek(d);
+  e.setDate(e.getDate() + 6);
+  return e;
+}
+function getWeekOfYear(d) {
+  const oneJan = new Date(d.getFullYear(), 0, 1);
+  const dayOfYear = Math.floor((startOfDay(d).getTime() - startOfDay(oneJan).getTime()) / 864e5) + 1;
+  return Math.ceil((dayOfYear + oneJan.getDay()) / 7);
+}
 function toValidDate(input) {
   if (input == null || input === "") return null;
   if (input instanceof Date) return isNaN(input.getTime()) ? null : input;
@@ -3077,6 +3092,7 @@ function DatePicker({
   const okBtnLabel = config.locale?.modal?.okText ?? "OK";
   const timeConfig = typeof showTime === "object" ? showTime : {};
   const hasTime = !!showTime;
+  const isWeek = picker === "week";
   const fmt = formatProp ?? (hasTime ? "YYYY-MM-DD HH:mm:ss" : picker === "month" ? "YYYY-MM" : picker === "year" ? "YYYY" : "YYYY-MM-DD");
   const normalizedValue = toValidDate(value);
   const normalizedDefault = toValidDate(defaultValue);
@@ -3226,7 +3242,8 @@ function DatePicker({
     }
     if (e.key === "Escape") closeDropdown();
   };
-  const displayText = isInputting ? inputText : currentValue ? formatDate(currentValue, fmt) : "";
+  const formatValue = (d) => isWeek ? `${d.getFullYear()}-W${String(getWeekOfYear(d)).padStart(2, "0")}` : formatDate(d, fmt);
+  const displayText = isInputting ? inputText : currentValue ? formatValue(currentValue) : "";
   const wrapperCls = unstyled ? className ?? "" : [
     "sg-datepicker",
     `sg-datepicker-${size}`,
@@ -3291,7 +3308,9 @@ function DatePicker({
           {
             viewYear,
             viewMonth,
-            selectedDate: currentValue,
+            selectedDate: isWeek ? null : currentValue,
+            rangeStart: isWeek && currentValue ? startOfWeek(currentValue) : void 0,
+            rangeEnd: isWeek && currentValue ? endOfWeek(currentValue) : void 0,
             disabledDate,
             onSelect: handleDateSelect,
             onMonthChange: (d) => {
@@ -3407,7 +3426,8 @@ function RangePicker({
   const [internalOpen, setInternalOpen] = useState5(false);
   const [activeIndex, setActiveIndex] = useState5(0);
   const [hoverDate, setHoverDate] = useState5(null);
-  const currentValue = normalizedValue ?? internalValue;
+  const [draft, setDraft] = useState5(null);
+  const currentValue = draft ?? normalizedValue ?? internalValue;
   const isOpen = openProp ?? internalOpen;
   const now = /* @__PURE__ */ new Date();
   const [leftYear, setLeftYear] = useState5(() => (currentValue[0] ?? now).getFullYear());
@@ -3424,6 +3444,8 @@ function RangePicker({
       if (ref.current && !ref.current.contains(e.target)) {
         setInternalOpen(false);
         onOpenChange?.(false);
+        setDraft(null);
+        setActiveIndex(0);
       }
     };
     document.addEventListener("mousedown", handle);
@@ -3446,7 +3468,7 @@ function RangePicker({
   };
   const handleDateSelect = (date) => {
     if (activeIndex === 0) {
-      setInternalValue([date, null]);
+      setDraft([date, null]);
       setActiveIndex(1);
     } else {
       let start = currentValue[0];
@@ -3460,9 +3482,10 @@ function RangePicker({
         s.setHours(tempTimes[0].getHours(), tempTimes[0].getMinutes(), tempTimes[0].getSeconds());
         const e = cloneDate(end);
         e.setHours(tempTimes[1].getHours(), tempTimes[1].getMinutes(), tempTimes[1].getSeconds());
-        setInternalValue([s, e]);
+        setDraft([s, e]);
       } else {
         commitRange([start, end]);
+        setDraft(null);
         setInternalOpen(false);
         onOpenChange?.(false);
         setActiveIndex(0);
@@ -3471,6 +3494,7 @@ function RangePicker({
   };
   const handleTimeOk = () => {
     commitRange(currentValue);
+    setDraft(null);
     setInternalOpen(false);
     onOpenChange?.(false);
     setActiveIndex(0);
@@ -3478,6 +3502,7 @@ function RangePicker({
   const handleClear = (e) => {
     e.stopPropagation();
     commitRange([null, null]);
+    setDraft(null);
     setActiveIndex(0);
   };
   const handlePresetSelect = (val) => {
@@ -3486,6 +3511,8 @@ function RangePicker({
     } else {
       commitRange([val, val]);
     }
+    setDraft(null);
+    setActiveIndex(0);
     setInternalOpen(false);
     onOpenChange?.(false);
   };
@@ -3779,12 +3806,18 @@ function TimePicker({
   }, [secondStep]);
   const disHours = useMemo4(() => new Set(disabledHours?.() ?? []), [disabledHours]);
   const disMinutes = useMemo4(() => new Set(disabledMinutes?.(hour) ?? []), [disabledMinutes, hour]);
-  const disSecs = useMemo4(() => new Set(disabledSeconds?.(hour, minute) ?? []), [disabledSeconds, hour, minute]);
-  const commitTime = useCallback5((h, m, s) => {
-    const str = formatTime(h, m, s, fmt, use12Hours);
-    setInternalValue(str);
-    onChange?.(str);
-  }, [fmt, use12Hours, onChange]);
+  const disSecs = useMemo4(
+    () => new Set(disabledSeconds?.(hour, minute) ?? []),
+    [disabledSeconds, hour, minute]
+  );
+  const commitTime = useCallback5(
+    (h, m, s) => {
+      const str = formatTime(h, m, s, fmt, use12Hours);
+      setInternalValue(str);
+      onChange?.(str);
+    },
+    [fmt, use12Hours, onChange]
+  );
   const handleHourChange = (h) => {
     const realH = use12Hours ? h === 12 ? hour >= 12 ? 12 : 0 : hour >= 12 ? h + 12 : h : h;
     setHour(realH);
@@ -3839,10 +3872,26 @@ function TimePicker({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         children: [
-          /* @__PURE__ */ jsx9("span", { className: currentValue ? "" : unstyled ? "" : "sg-timepicker-placeholder", children: currentValue || placeholder }),
+          /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: unstyled ? "" : currentValue ? "sg-timepicker-value" : "sg-timepicker-placeholder",
+              children: currentValue || placeholder
+            }
+          ),
           /* @__PURE__ */ jsx9("span", { className: unstyled ? "" : "sg-timepicker-suffix", children: loading ? /* @__PURE__ */ jsx9(Spin, { size: "small", unstyled }) : /* @__PURE__ */ jsxs9(Fragment3, { children: [
             allowClear && currentValue && /* @__PURE__ */ jsx9("span", { className: unstyled ? "" : "sg-timepicker-clear", onClick: handleClear, children: "\xD7" }),
-            /* @__PURE__ */ jsx9("svg", { className: unstyled ? "" : "sg-timepicker-icon-svg", viewBox: "0 0 16 16", width: "14", height: "14", fill: "currentColor", children: /* @__PURE__ */ jsx9("path", { d: "M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm.5 3v4.5l3 1.5-.5 1-3.5-1.75V4h1z" }) })
+            /* @__PURE__ */ jsx9(
+              "svg",
+              {
+                className: unstyled ? "" : "sg-timepicker-icon-svg",
+                viewBox: "0 0 16 16",
+                width: "14",
+                height: "14",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx9("path", { d: "M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm.5 3v4.5l3 1.5-.5 1-3.5-1.75V4h1z" })
+              }
+            )
           ] }) })
         ]
       }
@@ -3940,7 +3989,9 @@ function TimeRangePicker({
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
   const fmt = formatProp ?? (use12Hours ? "hh:mm:ss A" : showSecond ? "HH:mm:ss" : "HH:mm");
-  const [internalValue, setInternalValue] = useState6(value ?? defaultValue ?? ["", ""]);
+  const [internalValue, setInternalValue] = useState6(
+    value ?? defaultValue ?? ["", ""]
+  );
   const [internalOpen, setInternalOpen] = useState6(false);
   const currentValue = value ?? internalValue;
   const isOpen = openProp ?? internalOpen;
@@ -3985,12 +4036,19 @@ function TimeRangePicker({
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs9("div", { className: wrapperCls, ref, style, children: [
-    /* @__PURE__ */ jsxs9("div", { className: unstyled ? "" : "sg-timepicker-input sg-timepicker-range-input", onClick: openDropdown, children: [
-      /* @__PURE__ */ jsx9("span", { children: currentValue[0] || placeholder[0] }),
-      /* @__PURE__ */ jsx9("span", { className: unstyled ? "" : "sg-timepicker-separator", children: separator }),
-      /* @__PURE__ */ jsx9("span", { children: currentValue[1] || placeholder[1] }),
-      /* @__PURE__ */ jsx9("span", { className: unstyled ? "" : "sg-timepicker-suffix", children: allowClear && (currentValue[0] || currentValue[1]) && /* @__PURE__ */ jsx9("span", { className: unstyled ? "" : "sg-timepicker-clear", onClick: handleClear, children: "\xD7" }) })
-    ] }),
+    /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: unstyled ? "" : "sg-timepicker-input sg-timepicker-range-input",
+        onClick: openDropdown,
+        children: [
+          /* @__PURE__ */ jsx9("span", { children: currentValue[0] || placeholder[0] }),
+          /* @__PURE__ */ jsx9("span", { className: unstyled ? "" : "sg-timepicker-separator", children: separator }),
+          /* @__PURE__ */ jsx9("span", { children: currentValue[1] || placeholder[1] }),
+          /* @__PURE__ */ jsx9("span", { className: unstyled ? "" : "sg-timepicker-suffix", children: allowClear && (currentValue[0] || currentValue[1]) && /* @__PURE__ */ jsx9("span", { className: unstyled ? "" : "sg-timepicker-clear", onClick: handleClear, children: "\xD7" }) })
+        ]
+      }
+    ),
     isOpen && /* @__PURE__ */ jsx9("div", { className: unstyled ? "" : "sg-tp-dropdown sg-tp-dropdown-range", children: /* @__PURE__ */ jsxs9("div", { className: unstyled ? "" : "sg-tp-range-panels", children: [
       /* @__PURE__ */ jsx9(
         TimePicker,
@@ -4055,9 +4113,7 @@ function AutoComplete({
   const [open, setOpen] = useState7(false);
   const ref = useRef6(null);
   const currentValue = value ?? internalValue;
-  const filtered = options.filter(
-    (o) => o.label.toLowerCase().includes(currentValue.toLowerCase())
-  );
+  const filtered = options.filter((o) => o.label.toLowerCase().includes(currentValue.toLowerCase()));
   useEffect8(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -4078,7 +4134,12 @@ function AutoComplete({
     onSelect?.(opt.value, opt);
     setOpen(false);
   };
-  const wrapperClass = unstyled ? className ?? "" : ["sg-autocomplete", `sg-autocomplete-${size}`, loading ? "sg-autocomplete-loading" : "", className].filter(Boolean).join(" ");
+  const wrapperClass = unstyled ? className ?? "" : [
+    "sg-autocomplete",
+    `sg-autocomplete-${size}`,
+    loading ? "sg-autocomplete-loading" : "",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs10("div", { className: wrapperClass, ref, style, children: [
     /* @__PURE__ */ jsxs10("span", { className: unstyled ? "" : "sg-input-wrapper", children: [
       /* @__PURE__ */ jsx10(
@@ -4091,7 +4152,8 @@ function AutoComplete({
           className: unstyled ? "" : `sg-input sg-input-${size}`,
           value: currentValue,
           placeholder,
-          disabled: disabled || loading,
+          disabled,
+          "aria-busy": loading || void 0,
           onChange: handleChange,
           onFocus: () => setOpen(true),
           onBlur
@@ -4559,32 +4621,53 @@ function NotificationCard({
   const type = item.type ?? "info";
   const closeAriaLabel = useConfig().locale?.notification?.closeAriaLabel ?? "Close";
   if (unstyled) {
-    return /* @__PURE__ */ jsxs13("div", { role: "alert", children: [
+    return /* @__PURE__ */ jsxs13("div", { role: "alert", className: item.className, style: item.style, children: [
       /* @__PURE__ */ jsx14("span", { children: typeIcons[type] }),
       /* @__PURE__ */ jsx14("span", { children: item.message }),
       item.description && /* @__PURE__ */ jsx14("div", { children: item.description }),
       /* @__PURE__ */ jsx14("button", { onClick: onClose, "aria-label": closeAriaLabel, children: "\xD7" })
     ] });
   }
-  return /* @__PURE__ */ jsxs13("div", { className: `sg-notification sg-notification-${type}`, role: "alert", children: [
-    /* @__PURE__ */ jsx14("div", { className: "sg-notification-icon", children: typeIcons[type] }),
-    /* @__PURE__ */ jsxs13("div", { className: "sg-notification-content", children: [
-      /* @__PURE__ */ jsx14("div", { className: "sg-notification-message", children: item.message }),
-      item.description && /* @__PURE__ */ jsx14("div", { className: "sg-notification-description", children: item.description })
-    ] }),
-    /* @__PURE__ */ jsx14("button", { className: "sg-notification-close", onClick: onClose, "aria-label": closeAriaLabel, children: "\xD7" })
-  ] });
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: ["sg-notification", `sg-notification-${type}`, item.className].filter(Boolean).join(" "),
+      style: item.style,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx14("div", { className: "sg-notification-icon", children: typeIcons[type] }),
+        /* @__PURE__ */ jsxs13("div", { className: "sg-notification-content", children: [
+          /* @__PURE__ */ jsx14("div", { className: "sg-notification-message", children: item.message }),
+          item.description && /* @__PURE__ */ jsx14("div", { className: "sg-notification-description", children: item.description })
+        ] }),
+        /* @__PURE__ */ jsx14("button", { className: "sg-notification-close", onClick: onClose, "aria-label": closeAriaLabel, children: "\xD7" })
+      ]
+    }
+  );
 }
 
 // src/components/ui/Drawer.tsx
-import { useEffect as useEffect10, useCallback as useCallback7, useId as useId2 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useEffect as useEffect10, useCallback as useCallback7, useId as useId2, useRef as useRef10 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 var PLACEMENT_TRANSITION = {
   left: "sg-slide-left",
   right: "sg-slide-right",
   top: "sg-slide-down",
   bottom: "sg-slide-up"
 };
+function getScopedCssVars(scope) {
+  if (!scope || typeof window === "undefined") return {};
+  const computed = window.getComputedStyle(scope);
+  const vars = {};
+  for (let i = 0; i < computed.length; i += 1) {
+    const name = computed.item(i);
+    if (name.startsWith("--sg-")) {
+      vars[name] = computed.getPropertyValue(name);
+    }
+  }
+  return vars;
+}
 function Drawer({
   open,
   onClose,
@@ -4605,6 +4688,7 @@ function Drawer({
   const titleId = `${uid}-title`;
   const bodyId = `${uid}-body`;
   const trapRef = useFocusTrap(open);
+  const scopeRef = useRef10(null);
   const { locale } = useConfig();
   const closeAriaLabel = locale?.drawer?.closeAriaLabel ?? "Close";
   const handleKeyDown = useCallback7(
@@ -4642,7 +4726,8 @@ function Drawer({
     );
   }
   const transitionName = PLACEMENT_TRANSITION[placement] ?? "sg-slide-right";
-  return /* @__PURE__ */ jsx15(Transition, { visible: open, name: "sg-fade", unmountOnExit: true, duration: 300, children: /* @__PURE__ */ jsxs14("div", { className: "sg-drawer-root", children: [
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+  const drawer = /* @__PURE__ */ jsx15(Transition, { visible: open, name: "sg-fade", unmountOnExit: true, duration: 300, children: /* @__PURE__ */ jsxs14("div", { className: "sg-drawer-root", style: getScopedCssVars(scopeRef.current), children: [
     mask && /* @__PURE__ */ jsx15("div", { className: "sg-drawer-mask", onClick: maskClosable ? onClose : void 0 }),
     /* @__PURE__ */ jsx15(Transition, { visible: open, name: transitionName, unmountOnExit: true, duration: 300, children: /* @__PURE__ */ jsxs14(
       "div",
@@ -4674,10 +4759,14 @@ function Drawer({
       }
     ) })
   ] }) });
+  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+    /* @__PURE__ */ jsx15("span", { ref: scopeRef, hidden: true }),
+    portalTarget ? createPortal(drawer, portalTarget) : drawer
+  ] });
 }
 
 // src/components/ui/Popconfirm.tsx
-import { useState as useState10, useRef as useRef10, useEffect as useEffect11, useId as useId3 } from "react";
+import { useState as useState10, useRef as useRef11, useEffect as useEffect11, useId as useId3 } from "react";
 import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function Popconfirm({
   title,
@@ -4696,7 +4785,7 @@ function Popconfirm({
   const okText = okTextProp ?? popconfirmLocale?.okText ?? "Yes";
   const cancelText = cancelTextProp ?? popconfirmLocale?.cancelText ?? "No";
   const [open, setOpen] = useState10(false);
-  const ref = useRef10(null);
+  const ref = useRef11(null);
   const trapRef = useFocusTrap(open);
   const popconfirmId = useId3();
   useEffect11(() => {
@@ -4967,7 +5056,7 @@ function Breadcrumb({
 }
 
 // src/components/ui/Dropdown.tsx
-import { useState as useState11, useRef as useRef11, useEffect as useEffect12, useId as useId4 } from "react";
+import { useState as useState11, useRef as useRef12, useEffect as useEffect12, useId as useId4 } from "react";
 import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 function Dropdown({
   items: items2,
@@ -4983,8 +5072,8 @@ function Dropdown({
   const disabled = disabledProp ?? config.disabled ?? false;
   const [open, setOpen] = useState11(false);
   const [focusedIndex, setFocusedIndex] = useState11(-1);
-  const ref = useRef11(null);
-  const timerRef = useRef11(void 0);
+  const ref = useRef12(null);
+  const timerRef = useRef12(void 0);
   const menuId = useId4();
   useEffect12(() => {
     if (!open) return;
@@ -5256,7 +5345,7 @@ function Progress({
 }
 
 // src/components/ui/Menu.tsx
-import { useState as useState12, useRef as useRef12, useEffect as useEffect13, useCallback as useCallback8 } from "react";
+import { useState as useState12, useRef as useRef13, useEffect as useEffect13, useCallback as useCallback8 } from "react";
 import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 function collectNavigableItems(items2, openKeys, mode, out = []) {
   for (const item of items2) {
@@ -5315,7 +5404,7 @@ function Menu({
   const [internalOpen, setInternalOpen] = useState12(
     openKeys ?? defaultOpenKeys
   );
-  const rootRef = useRef12(null);
+  const rootRef = useRef13(null);
   const currentSelected = selectedKeys ?? internalSelected;
   const currentOpen = openKeys ?? internalOpen;
   const navigable = collectNavigableItems(items2, currentOpen, mode);
@@ -5591,9 +5680,9 @@ function StyledMenuItem({
   inlineCollapsed,
   depth
 }) {
-  const popoverRef = useRef12(null);
+  const popoverRef = useRef13(null);
   const [hoverOpen, setHoverOpen] = useState12(false);
-  const timerRef = useRef12(void 0);
+  const timerRef = useRef13(void 0);
   useEffect13(() => {
     return () => clearTimeout(timerRef.current);
   }, []);
@@ -5741,7 +5830,7 @@ function StyledMenuItem({
 }
 
 // src/components/ui/Collapse.tsx
-import { useState as useState13, useRef as useRef13, useEffect as useEffect14 } from "react";
+import { useState as useState13, useRef as useRef14, useEffect as useEffect14 } from "react";
 import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 function toArray(val) {
   if (val === void 0) return [];
@@ -5827,9 +5916,9 @@ function CollapsePanel({
   expandIconPosition,
   onToggle
 }) {
-  const contentRef = useRef13(null);
+  const contentRef = useRef14(null);
   const [height, setHeight] = useState13(void 0);
-  const firstRender = useRef13(true);
+  const firstRender = useRef14(true);
   useEffect14(() => {
     if (firstRender.current) {
       firstRender.current = false;
@@ -5905,7 +5994,7 @@ function CollapsePanel({
 // src/components/ui/ColorPicker.tsx
 import {
   useState as useState14,
-  useRef as useRef14,
+  useRef as useRef15,
   useEffect as useEffect15,
   useCallback as useCallback9
 } from "react";
@@ -6048,11 +6137,11 @@ function ColorPicker({
   const [internalOpen, setInternalOpen] = useState14(false);
   const isOpen = controlledOpen ?? internalOpen;
   const [textInput, setTextInput] = useState14(formatColor(currentHex, format));
-  const wrapperRef = useRef14(null);
-  const timerRef = useRef14(void 0);
-  const satPanelRef = useRef14(null);
-  const hueBarRef = useRef14(null);
-  const draggingRef = useRef14(null);
+  const wrapperRef = useRef15(null);
+  const timerRef = useRef15(void 0);
+  const satPanelRef = useRef15(null);
+  const hueBarRef = useRef15(null);
+  const draggingRef = useRef15(null);
   useEffect15(() => {
     if (value) {
       const [r, g, b] = hexToRgb(value);
@@ -6330,7 +6419,7 @@ function ColorPicker({
 }
 
 // src/components/ui/Empty.tsx
-import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 var DefaultImage = () => /* @__PURE__ */ jsx26("svg", { width: "64", height: "41", viewBox: "0 0 64 41", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs24("g", { fill: "none", fillRule: "evenodd", transform: "translate(0 1)", children: [
   /* @__PURE__ */ jsx26("ellipse", { cx: "32", cy: "33", rx: "32", ry: "7", fill: "currentColor", opacity: "0.08" }),
   /* @__PURE__ */ jsxs24("g", { fillRule: "nonzero", stroke: "currentColor", strokeOpacity: "0.25", children: [
@@ -6348,7 +6437,7 @@ var DefaultImage = () => /* @__PURE__ */ jsx26("svg", { width: "64", height: "41
 function Empty({ image, description, children, className, style, unstyled }) {
   const config = useConfig();
   if (config.renderEmpty && image === void 0 && description === void 0 && children === void 0) {
-    return /* @__PURE__ */ jsx26(Fragment5, { children: config.renderEmpty("Empty") });
+    return /* @__PURE__ */ jsx26(Fragment6, { children: config.renderEmpty("Empty") });
   }
   const localeDefault = config.locale?.empty?.description ?? "No Data";
   const desc = description === void 0 ? localeDefault : description;
@@ -6426,7 +6515,7 @@ function Result({
 }
 
 // src/components/ui/Skeleton.tsx
-import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
 function Skeleton({
   active = false,
   avatar,
@@ -6439,7 +6528,7 @@ function Skeleton({
   unstyled
 }) {
   const loadingLabel = useConfig().locale?.skeleton?.loading ?? "Loading";
-  if (!loading) return /* @__PURE__ */ jsx28(Fragment6, { children });
+  if (!loading) return /* @__PURE__ */ jsx28(Fragment7, { children });
   const avatarSize = typeof avatar === "object" ? avatar.size ?? 40 : 40;
   const avatarShape = typeof avatar === "object" ? avatar.shape ?? "circle" : "circle";
   const titleWidth = typeof title === "object" ? title.width ?? "38%" : "38%";
@@ -6929,7 +7018,7 @@ function Descriptions({
 import { useEffect as useEffect17, useMemo as useMemo9, useState as useState18 } from "react";
 
 // src/components/complex/SchemaFormEditor/useSchemaEditor.ts
-import { useCallback as useCallback11, useMemo as useMemo5, useRef as useRef15, useSyncExternalStore } from "react";
+import { useCallback as useCallback11, useMemo as useMemo5, useRef as useRef16, useSyncExternalStore } from "react";
 import { createCore } from "@skygraph/core";
 
 // src/components/complex/SchemaFormEditor/adapters/jsonSchema.ts
@@ -7113,9 +7202,9 @@ function cloneSchema(schema) {
 }
 function useSchemaEditor(options = {}) {
   const { initialSchema, onChange } = options;
-  const onChangeRef = useRef15(onChange);
+  const onChangeRef = useRef16(onChange);
   onChangeRef.current = onChange;
-  const storeRef = useRef15(null);
+  const storeRef = useRef16(null);
   if (storeRef.current === null) {
     const core = options.core ?? createCore();
     const initial = {
@@ -7437,8 +7526,8 @@ function SchemaFormEditorPalette({
 }
 
 // src/components/complex/SchemaFormEditor/SchemaFormEditorCanvas.tsx
-import { useCallback as useCallback12, useMemo as useMemo6, useRef as useRef16, useState as useState17 } from "react";
-import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useCallback as useCallback12, useMemo as useMemo6, useRef as useRef17, useState as useState17 } from "react";
+import { Fragment as Fragment8, jsx as jsx35, jsxs as jsxs33 } from "react/jsx-runtime";
 function SchemaFormEditorCanvas({
   store,
   emptyText = "Drop a field here",
@@ -7465,7 +7554,7 @@ function SchemaFormEditorCanvas({
     [fields]
   );
   const [dropIndicator, setDropIndicator] = useState17(null);
-  const dragRef = useRef16(null);
+  const dragRef = useRef17(null);
   function handleDragOver(e) {
     if (e.dataTransfer.types.includes(PALETTE_DATA_TYPE) || e.dataTransfer.types.includes("text/plain") || dragRef.current !== null) {
       e.preventDefault();
@@ -7616,7 +7705,7 @@ function FieldOverlay({
   function handleDragLeave() {
     onIndicator(null);
   }
-  return /* @__PURE__ */ jsxs33(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment8, { children: [
     showIndicator && /* @__PURE__ */ jsx35("div", { className: "sg-sfe-canvas-drop-indicator", "data-testid": "sfe-drop-indicator" }),
     /* @__PURE__ */ jsxs33(
       "div",
@@ -8118,7 +8207,7 @@ function PreviewPane({ store }) {
 import { createVirtual, createMeasureCache } from "@skygraph/core";
 
 // src/hooks/useGraph.ts
-import { useMemo as useMemo10, useRef as useRef17, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { useMemo as useMemo10, useRef as useRef18, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { createCore as createCore2, createGraph } from "@skygraph/core";
 function useGraph(options = {}) {
   const { core: externalCore, ...graphOptions } = options;
@@ -8127,7 +8216,7 @@ function useGraph(options = {}) {
     const g = createGraph(c, graphOptions);
     return { graph: g, core: c };
   }, [externalCore]);
-  const snapshotRef = useRef17(null);
+  const snapshotRef = useRef18(null);
   if (snapshotRef.current === null) {
     snapshotRef.current = graph.getState();
   }
@@ -8149,7 +8238,7 @@ import {
   useEffect as useEffect18,
   useImperativeHandle,
   useMemo as useMemo11,
-  useRef as useRef18,
+  useRef as useRef19,
   useState as useState19
 } from "react";
 import {
@@ -8411,14 +8500,14 @@ function DiagramInner({
     return m;
   }, [nodes, allBounds]);
   const [view, setView] = useState19({ zoom: 1, panX: 0, panY: 0 });
-  const wrapperRef = useRef18(null);
+  const wrapperRef = useRef19(null);
   const isSelectionControlled = selection !== void 0;
   const [internalSelection, setInternalSelection] = useState19(
     () => defaultSelection ?? []
   );
   const currentSelection = isSelectionControlled ? selection : internalSelection;
   const selectionSet = useMemo11(() => new Set(currentSelection), [currentSelection]);
-  const onSelectionChangeRef = useRef18(onSelectionChange);
+  const onSelectionChangeRef = useRef19(onSelectionChange);
   useEffect18(() => {
     onSelectionChangeRef.current = onSelectionChange;
   }, [onSelectionChange]);
@@ -8475,7 +8564,7 @@ function DiagramInner({
     width: "100%",
     height: "100%"
   };
-  const dragRef = useRef18(null);
+  const dragRef = useRef19(null);
   const [draggingId, setDraggingId] = useState19(null);
   const DRAG_THRESHOLD_PX = 0.5;
   function applyMove(id, x, y) {
@@ -8590,16 +8679,16 @@ function DiagramInner({
     }
   }
   const [lasso, setLasso] = useState19(null);
-  const lassoRef = useRef18(null);
-  const boundsByIdRef = useRef18(boundsById);
+  const lassoRef = useRef19(null);
+  const boundsByIdRef = useRef19(boundsById);
   useEffect18(() => {
     boundsByIdRef.current = boundsById;
   }, [boundsById]);
-  const viewRef = useRef18(view);
+  const viewRef = useRef19(view);
   useEffect18(() => {
     viewRef.current = view;
   }, [view]);
-  const wrapperSessionRef = useRef18(null);
+  const wrapperSessionRef = useRef19(null);
   function startLasso(e) {
     const rect = wrapperRef.current?.getBoundingClientRect();
     if (!rect) return;
@@ -8752,10 +8841,10 @@ function DiagramInner({
   }
   const [hoveredNode, setHoveredNode] = useState19(null);
   const [hoveredEdge, setHoveredEdge] = useState19(null);
-  const nodeHoverShowTimer = useRef18(null);
-  const nodeHoverHideTimer = useRef18(null);
-  const edgeHoverShowTimer = useRef18(null);
-  const edgeHoverHideTimer = useRef18(null);
+  const nodeHoverShowTimer = useRef19(null);
+  const nodeHoverHideTimer = useRef19(null);
+  const edgeHoverShowTimer = useRef19(null);
+  const edgeHoverHideTimer = useRef19(null);
   const clearTimer = (ref) => {
     if (ref.current != null) {
       window.clearTimeout(ref.current);
@@ -9053,7 +9142,7 @@ import {
   useCallback as useCallback14,
   useEffect as useEffect19,
   useMemo as useMemo12,
-  useRef as useRef19,
+  useRef as useRef20,
   useState as useState20
 } from "react";
 import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
@@ -9208,7 +9297,7 @@ function WidgetActionsMenu({
   onActivateMaximize
 }) {
   const dashboardLocale = useConfig().locale?.dashboard;
-  const wrapperRef = useRef19(null);
+  const wrapperRef = useRef20(null);
   useEffect19(() => {
     if (!open) return;
     const onDocClick = (ev) => {
@@ -9312,7 +9401,7 @@ function MoreIcon() {
 // src/components/complex/Dashboard/DashboardEditor.tsx
 import {
   useMemo as useMemo13,
-  useRef as useRef20,
+  useRef as useRef21,
   useState as useState21
 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
@@ -9338,12 +9427,12 @@ function DashboardEditor({
   onWidgetRemove
 }) {
   const dashboardLocale = useConfig().locale?.dashboard;
-  const gridRef = useRef20(null);
-  const dragRef = useRef20(null);
+  const gridRef = useRef21(null);
+  const dragRef = useRef21(null);
   const [maximizedId, setMaximizedId] = useState21(null);
-  const widgetsRef = useRef20(widgets);
+  const widgetsRef = useRef21(widgets);
   widgetsRef.current = widgets;
-  const onChangeRef = useRef20(onLayoutChange);
+  const onChangeRef = useRef21(onLayoutChange);
   onChangeRef.current = onLayoutChange;
   function emitChange(widgetId, patch) {
     const cb = onChangeRef.current;
@@ -9516,7 +9605,7 @@ function DashboardEditor({
 import {
   useCallback as useCallback15,
   useMemo as useMemo14,
-  useRef as useRef21
+  useRef as useRef22
 } from "react";
 import { pointsToPath as pointsToPath2 } from "@skygraph/core";
 import { jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -9603,7 +9692,7 @@ function Gantt({
   style
 }) {
   const ganttLocale = useConfig().locale?.gantt;
-  const onChangeRef = useRef21(onTaskChange);
+  const onChangeRef = useRef22(onTaskChange);
   onChangeRef.current = onTaskChange;
   const resolved = useMemo14(() => {
     const step = STEP_MS[scale];
@@ -9691,7 +9780,7 @@ function Gantt({
     }
     return out;
   }, [taskRects, taskRectById]);
-  const dragRef = useRef21(null);
+  const dragRef = useRef22(null);
   const startInteraction = useCallback15(
     (e, task, kind) => {
       if (e.button !== 0) return;
@@ -9978,7 +10067,7 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect20,
   useMemo as useMemo15,
-  useRef as useRef22,
+  useRef as useRef23,
   useState as useState22
 } from "react";
 import { detectConflicts, isAvailable } from "@skygraph/core";
@@ -10065,9 +10154,9 @@ function ResourceCalendar({
   style
 }) {
   const resourceCalendarLocale = useConfig().locale?.resourceCalendar;
-  const onChangeRef = useRef22(onAssignmentChange);
+  const onChangeRef = useRef23(onAssignmentChange);
   onChangeRef.current = onAssignmentChange;
-  const onConflictRef = useRef22(onConflict);
+  const onConflictRef = useRef23(onConflict);
   onConflictRef.current = onConflict;
   const [ghost, setGhost] = useState22(null);
   const step = STEP_MS2[scale];
@@ -10133,7 +10222,7 @@ function ResourceCalendar({
     () => conflicts.map((c) => `${c.reason}:${c.assignmentIds.join(",")}`).sort().join("|"),
     [conflicts]
   );
-  const lastKeyRef = useRef22("");
+  const lastKeyRef = useRef23("");
   useEffect20(() => {
     if (lastKeyRef.current === conflictKey) return;
     lastKeyRef.current = conflictKey;
@@ -10191,7 +10280,7 @@ function ResourceCalendar({
     }
     return out;
   }, [rules, resources, rowIndexById, rangeStart, rangeEnd, step, pxPerMs, rowHeight]);
-  const dragRef = useRef22(null);
+  const dragRef = useRef23(null);
   const startInteraction = useCallback16(
     (e, assignment, kind) => {
       if (e.button !== 0) return;
@@ -10525,8 +10614,8 @@ function ResourceCalendar({
 }
 
 // src/components/complex/Timeline/Timeline.tsx
-import { Fragment as Fragment8, useMemo as useMemo16 } from "react";
-import { Fragment as Fragment9, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment9, useMemo as useMemo16 } from "react";
+import { Fragment as Fragment10, jsx as jsx45, jsxs as jsxs40 } from "react/jsx-runtime";
 function toMs3(v) {
   return v instanceof Date ? v.getTime() : v;
 }
@@ -10607,7 +10696,7 @@ function EventTimeline({
       "aria-label": timelineLocale?.ariaLabel ?? "Timeline",
       "data-orientation": orientation,
       "data-group-by": groupBy ?? "none",
-      children: groups.map((group) => /* @__PURE__ */ jsxs40(Fragment8, { children: [
+      children: groups.map((group) => /* @__PURE__ */ jsxs40(Fragment9, { children: [
         groupBy && /* @__PURE__ */ jsx45(
           "div",
           {
@@ -10625,7 +10714,7 @@ function EventTimeline({
               "aria-hidden": "true"
             }
           );
-          const body = renderEvent ? renderEvent(ev) : /* @__PURE__ */ jsxs40(Fragment9, { children: [
+          const body = renderEvent ? renderEvent(ev) : /* @__PURE__ */ jsxs40(Fragment10, { children: [
             /* @__PURE__ */ jsx45("div", { className: unstyled ? void 0 : "sg-event-timeline-title", children: ev.title }),
             ev.description !== void 0 && /* @__PURE__ */ jsx45("div", { className: unstyled ? void 0 : "sg-event-timeline-description", children: ev.description })
           ] });
@@ -10766,7 +10855,7 @@ function ChartLegend({ series, className, style }) {
 }
 
 // src/components/complex/Charts/ChartCrosshair.tsx
-import { Fragment as Fragment10 } from "react";
+import { Fragment as Fragment11 } from "react";
 import { jsx as jsx47, jsxs as jsxs42 } from "react/jsx-runtime";
 var TIP_WIDTH = 140;
 var TIP_LINE_HEIGHT = 14;
@@ -10860,7 +10949,7 @@ function ChartCrosshair({
           ),
           points.map((p, i) => {
             const rowY = tipY + TIP_PADDING + headerHeight + i * TIP_LINE_HEIGHT;
-            return /* @__PURE__ */ jsxs42(Fragment10, { children: [
+            return /* @__PURE__ */ jsxs42(Fragment11, { children: [
               /* @__PURE__ */ jsx47(
                 "rect",
                 {
@@ -10905,7 +10994,7 @@ function ChartCrosshair({
 }
 
 // src/components/complex/Charts/ChartBrush.tsx
-import { useMemo as useMemo17, useRef as useRef23, useState as useState23 } from "react";
+import { useMemo as useMemo17, useRef as useRef24, useState as useState23 } from "react";
 import { jsx as jsx48, jsxs as jsxs43 } from "react/jsx-runtime";
 function resolveBrushConfig(brush) {
   if (brush == null || brush === false) return null;
@@ -10940,7 +11029,7 @@ function ChartBrush({
   fill,
   disabled
 }) {
-  const overlayRef = useRef23(null);
+  const overlayRef = useRef24(null);
   const [drag, setDrag] = useState23(null);
   const cls4 = (suffix) => unstyled ? void 0 : `sg-chart-brush-${suffix}`;
   const clientToCategoryIndex = (clientX) => {
@@ -11086,10 +11175,10 @@ function ChartBrush({
 }
 
 // src/components/complex/Charts/LineChart.tsx
-import { forwardRef as forwardRef2, useMemo as useMemo19, useRef as useRef26, useState as useState25 } from "react";
+import { forwardRef as forwardRef2, useMemo as useMemo19, useRef as useRef27, useState as useState25 } from "react";
 
 // src/components/complex/Charts/ChartAxes.tsx
-import { Fragment as Fragment11 } from "react";
+import { Fragment as Fragment12 } from "react";
 import { jsx as jsx49, jsxs as jsxs44 } from "react/jsx-runtime";
 var DEFAULT_Y_TICKS = 5;
 var TICK_LEN = 4;
@@ -11184,7 +11273,7 @@ function ChartAxes({
               strokeWidth: 1
             }
           ),
-          yTicks.map((t, i) => /* @__PURE__ */ jsxs44(Fragment11, { children: [
+          yTicks.map((t, i) => /* @__PURE__ */ jsxs44(Fragment12, { children: [
             /* @__PURE__ */ jsx49(
               "line",
               {
@@ -11244,7 +11333,7 @@ function ChartAxes({
             const cx = xFor(idx);
             const cat = categories[idx];
             const text = xFmt ? xFmt(cat, idx) : String(cat);
-            return /* @__PURE__ */ jsxs44(Fragment11, { children: [
+            return /* @__PURE__ */ jsxs44(Fragment12, { children: [
               /* @__PURE__ */ jsx49(
                 "line",
                 {
@@ -11296,9 +11385,9 @@ function ChartAxes({
 }
 
 // src/components/complex/Charts/chartRef.ts
-import { useCallback as useCallback17, useImperativeHandle as useImperativeHandle2, useMemo as useMemo18, useRef as useRef24 } from "react";
+import { useCallback as useCallback17, useImperativeHandle as useImperativeHandle2, useMemo as useMemo18, useRef as useRef25 } from "react";
 function useChartPrint(forwardedRef, printable) {
-  const rootRef = useRef24(null);
+  const rootRef = useRef25(null);
   const printOptionsFromProp = useMemo18(() => {
     if (typeof printable === "object" && printable !== null) {
       return { fileName: printable.fileName };
@@ -11316,10 +11405,10 @@ function useChartPrint(forwardedRef, printable) {
 }
 
 // src/components/complex/Charts/useChartSize.ts
-import { useEffect as useEffect21, useRef as useRef25, useState as useState24 } from "react";
+import { useEffect as useEffect21, useRef as useRef26, useState as useState24 } from "react";
 function useChartSize(ref, fallback) {
   const [size, setSize] = useState24(fallback);
-  const lastRef = useRef25(size);
+  const lastRef = useRef26(size);
   useEffect21(() => {
     const el = ref.current;
     if (!el) return void 0;
@@ -11465,7 +11554,7 @@ function downloadSvgAsPng(svg, fileNameOrOpts = "chart.png") {
 }
 
 // src/components/complex/Charts/ChartHoverToolbar.tsx
-import { Fragment as Fragment12, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
 function IconStroke(props) {
   return /* @__PURE__ */ jsxs45(
     "svg",
@@ -11490,7 +11579,7 @@ var PRINT_ICON = /* @__PURE__ */ jsx50(
   IconStroke,
   {
     d: "M4 6V2.5h8V6",
-    extra: /* @__PURE__ */ jsxs45(Fragment12, { children: [
+    extra: /* @__PURE__ */ jsxs45(Fragment13, { children: [
       /* @__PURE__ */ jsx50("rect", { x: 3, y: 6, width: 10, height: 6, rx: 1 }),
       /* @__PURE__ */ jsx50("path", { d: "M4.5 10h7v3.5h-7z" })
     ] })
@@ -11500,7 +11589,7 @@ var SVG_ICON = /* @__PURE__ */ jsx50(
   IconStroke,
   {
     d: "M3 8.5v3.25A1.25 1.25 0 0 0 4.25 13h7.5A1.25 1.25 0 0 0 13 11.75V8.5",
-    extra: /* @__PURE__ */ jsxs45(Fragment12, { children: [
+    extra: /* @__PURE__ */ jsxs45(Fragment13, { children: [
       /* @__PURE__ */ jsx50("path", { d: "M8 2.5v7" }),
       /* @__PURE__ */ jsx50("path", { d: "M5 6.5l3 3 3-3" })
     ] })
@@ -11510,7 +11599,7 @@ var PNG_ICON = /* @__PURE__ */ jsx50(
   IconStroke,
   {
     d: "M2.5 3.5h11v9h-11z",
-    extra: /* @__PURE__ */ jsxs45(Fragment12, { children: [
+    extra: /* @__PURE__ */ jsxs45(Fragment13, { children: [
       /* @__PURE__ */ jsx50("circle", { cx: 5.5, cy: 6.5, r: 0.9 }),
       /* @__PURE__ */ jsx50("path", { d: "M2.5 11l3-3 2.5 2.5L10.5 8l3 3" })
     ] })
@@ -11520,7 +11609,7 @@ var RESET_ICON = /* @__PURE__ */ jsx50(
   IconStroke,
   {
     d: "M3 8a5 5 0 1 0 1.5-3.5",
-    extra: /* @__PURE__ */ jsx50(Fragment12, { children: /* @__PURE__ */ jsx50("path", { d: "M3 3v3h3" }) })
+    extra: /* @__PURE__ */ jsx50(Fragment13, { children: /* @__PURE__ */ jsx50("path", { d: "M3 3v3h3" }) })
   }
 );
 function defaultChartActions(opts) {
@@ -11670,7 +11759,7 @@ function LineChartInner({
 }, forwardedRef) {
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
-  const svgRef = useRef26(null);
+  const svgRef = useRef27(null);
   const { min, max } = useMemo19(() => chartBounds(series.map((s) => s.values)), [series]);
   const [pt, pr, pb, pl] = useMemo19(
     () => resolveChartPadding(padding, yAxis, min, max),
@@ -11924,7 +12013,7 @@ var LineChart = forwardRef2(LineChartInner);
 LineChart.displayName = "LineChart";
 
 // src/components/complex/Charts/BarChart.tsx
-import { forwardRef as forwardRef3, useMemo as useMemo20, useRef as useRef27, useState as useState26 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo20, useRef as useRef28, useState as useState26 } from "react";
 import { jsx as jsx52, jsxs as jsxs47 } from "react/jsx-runtime";
 function BarChartInner({
   categories,
@@ -11950,7 +12039,7 @@ function BarChartInner({
 }, forwardedRef) {
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
-  const svgRef = useRef27(null);
+  const svgRef = useRef28(null);
   const { min, max } = useMemo20(() => chartBounds(series.map((s) => s.values)), [series]);
   const baseline = Math.min(0, min);
   const top = Math.max(0, max);
@@ -12132,7 +12221,7 @@ var BarChart = forwardRef3(BarChartInner);
 BarChart.displayName = "BarChart";
 
 // src/components/complex/Charts/AreaChart.tsx
-import { forwardRef as forwardRef4, useMemo as useMemo21, useRef as useRef28, useState as useState27 } from "react";
+import { forwardRef as forwardRef4, useMemo as useMemo21, useRef as useRef29, useState as useState27 } from "react";
 import { jsx as jsx53, jsxs as jsxs48 } from "react/jsx-runtime";
 function AreaChartInner({
   categories,
@@ -12159,7 +12248,7 @@ function AreaChartInner({
 }, forwardedRef) {
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
-  const svgRef = useRef28(null);
+  const svgRef = useRef29(null);
   const stackedValues = useMemo21(() => {
     if (!stacked) return series.map((s) => [...s.values]);
     const totals = new Array(categories.length).fill(0);
@@ -12356,7 +12445,7 @@ var AreaChart = forwardRef4(AreaChartInner);
 AreaChart.displayName = "AreaChart";
 
 // src/components/complex/Charts/PieChart.tsx
-import { forwardRef as forwardRef5, useMemo as useMemo22, useRef as useRef29, useState as useState28 } from "react";
+import { forwardRef as forwardRef5, useMemo as useMemo22, useRef as useRef30, useState as useState28 } from "react";
 import { jsx as jsx54, jsxs as jsxs49 } from "react/jsx-runtime";
 function PieChartInner({
   data,
@@ -12376,7 +12465,7 @@ function PieChartInner({
 }, forwardedRef) {
   const chartsLocale = useConfig().locale?.charts;
   const { rootRef } = useChartPrint(forwardedRef, printable);
-  const svgRef = useRef29(null);
+  const svgRef = useRef30(null);
   const fallbackW = typeof width === "number" && Number.isFinite(width) ? width : 200;
   const fallbackH = typeof height === "number" && Number.isFinite(height) ? height : 200;
   const measured = useChartSize(svgRef, { width: fallbackW, height: fallbackH });
@@ -12631,7 +12720,8 @@ function ListInner({
     (e, index) => {
       if (!draggable || dragIndex === null) return;
       e.preventDefault();
-      setDropIndex(index);
+      e.dataTransfer.dropEffect = "move";
+      setDropIndex((prev) => prev === index ? prev : index);
     },
     [draggable, dragIndex]
   );
@@ -12713,7 +12803,6 @@ function ListInner({
           onDragOver: (e) => handleDragOver(e, index),
           onDrop: (e) => handleDrop(e, index),
           onDragEnd: handleDragEnd,
-          onDragLeave: () => setDropIndex(null),
           children: [
             draggable && /* @__PURE__ */ jsx55("span", { className: "sg-list-drag-handle", children: "\u283F" }),
             renderItem(item, index)
@@ -13275,7 +13364,7 @@ function Transfer({
 }
 
 // src/components/ui/Mentions.tsx
-import { useState as useState29, useRef as useRef30, useEffect as useEffect22, useMemo as useMemo23, useCallback as useCallback18 } from "react";
+import { useState as useState29, useRef as useRef31, useEffect as useEffect22, useMemo as useMemo23, useCallback as useCallback18 } from "react";
 import { jsx as jsx58, jsxs as jsxs53 } from "react/jsx-runtime";
 function Mentions({
   value,
@@ -13305,8 +13394,8 @@ function Mentions({
   const currentValue = value ?? internalValue;
   const [mentionState, setMentionState] = useState29(null);
   const [activeIndex, setActiveIndex] = useState29(0);
-  const textareaRef = useRef30(null);
-  const dropdownRef = useRef30(null);
+  const textareaRef = useRef31(null);
+  const dropdownRef = useRef31(null);
   const filteredOptions = useMemo23(() => {
     if (!mentionState) return [];
     const q = mentionState.query.toLowerCase();
@@ -13551,7 +13640,7 @@ function InputPassword({
 }
 
 // src/components/ui/SearchInput.tsx
-import { useState as useState31, useRef as useRef31 } from "react";
+import { useState as useState31, useRef as useRef32 } from "react";
 import { jsx as jsx60, jsxs as jsxs55 } from "react/jsx-runtime";
 function SearchInput({
   value,
@@ -13575,7 +13664,7 @@ function SearchInput({
   const disabled = disabledProp ?? config.disabled ?? false;
   const [internal, setInternal] = useState31(defaultValue ?? "");
   const current = value ?? internal;
-  const inputRef = useRef31(null);
+  const inputRef = useRef32(null);
   const handleChange = (v) => {
     setInternal(v);
     onChange?.(v);
@@ -13659,7 +13748,7 @@ function SearchInput({
 }
 
 // src/components/ui/TagInput.tsx
-import { useState as useState32, useRef as useRef32, useId as useId5 } from "react";
+import { useState as useState32, useRef as useRef33, useId as useId5 } from "react";
 import { jsx as jsx61, jsxs as jsxs56 } from "react/jsx-runtime";
 function TagInput({
   value,
@@ -13685,7 +13774,7 @@ function TagInput({
   const removeTagLabel = config.locale?.tagInput?.removeTag ?? ((tag) => `Remove ${tag}`);
   const [internalTags, setInternalTags] = useState32(defaultValue);
   const [inputValue, setInputValue] = useState32("");
-  const inputRef = useRef32(null);
+  const inputRef = useRef33(null);
   const id = useId5();
   const tags = value ?? internalTags;
   const updateTags = (next) => {
@@ -13796,7 +13885,7 @@ function TagInput({
 }
 
 // src/components/ui/PinInput.tsx
-import { useState as useState33, useRef as useRef33, useCallback as useCallback19, useId as useId6 } from "react";
+import { useState as useState33, useRef as useRef34, useCallback as useCallback19, useId as useId6 } from "react";
 import { jsx as jsx62 } from "react/jsx-runtime";
 function PinInput({
   length = 6,
@@ -13823,7 +13912,7 @@ function PinInput({
   const pad2 = (s) => s.padEnd(length, "").slice(0, length);
   const [internal, setInternal] = useState33(() => pad2(defaultValue));
   const current = value !== void 0 ? pad2(value) : internal;
-  const refs = useRef33([]);
+  const refs = useRef34([]);
   const pattern = type === "numeric" ? /^\d$/ : /^[a-zA-Z0-9]$/;
   const update = useCallback19(
     (next) => {
@@ -13932,8 +14021,8 @@ function PinInput({
 }
 
 // src/components/ui/InlineEdit.tsx
-import { useState as useState34, useRef as useRef34, useEffect as useEffect23 } from "react";
-import { Fragment as Fragment13, jsx as jsx63, jsxs as jsxs57 } from "react/jsx-runtime";
+import { useState as useState34, useRef as useRef35, useEffect as useEffect23 } from "react";
+import { Fragment as Fragment14, jsx as jsx63, jsxs as jsxs57 } from "react/jsx-runtime";
 function InlineEdit({
   value,
   defaultValue = "",
@@ -13957,7 +14046,7 @@ function InlineEdit({
   const [editing, setEditing] = useState34(false);
   const [internal, setInternal] = useState34(defaultValue);
   const [draft, setDraft] = useState34("");
-  const inputRef = useRef34(null);
+  const inputRef = useRef35(null);
   const current = value ?? internal;
   useEffect23(() => {
     if (editing) {
@@ -13989,7 +14078,7 @@ function InlineEdit({
   };
   if (!editing) {
     if (renderView) {
-      return /* @__PURE__ */ jsx63(Fragment13, { children: renderView(current, startEditing) });
+      return /* @__PURE__ */ jsx63(Fragment14, { children: renderView(current, startEditing) });
     }
     if (unstyled) {
       return /* @__PURE__ */ jsx63(
@@ -14038,7 +14127,7 @@ function InlineEdit({
           onBlur: saveOnBlur ? save : void 0
         }
       ),
-      showButtons && /* @__PURE__ */ jsxs57(Fragment13, { children: [
+      showButtons && /* @__PURE__ */ jsxs57(Fragment14, { children: [
         /* @__PURE__ */ jsx63("button", { type: "button", onClick: save, children: "\u2713" }),
         /* @__PURE__ */ jsx63("button", { type: "button", onClick: cancel, children: "\u2715" })
       ] })