@skygraph/react 0.5.2 → 0.6.4

package/dist/index.js

@@ -22,7 +22,7 @@ import {
   zodRule,
   zodRules,
   zodToJsonSchema
-} from "./chunk-MLEBVELO.js";
+} from "./chunk-Y6XZ5TLD.js";
 import {
   Pagination,
   Select,
@@ -31,28 +31,30 @@ import {
   buildPrintHtml,
   printElement,
   useTable
-} from "./chunk-NXB3VAVF.js";
+} from "./chunk-7AA2JPZB.js";
 import {
   Button,
   Input,
   Transition
-} from "./chunk-ZJF6SJLP.js";
+} from "./chunk-45YW5VSP.js";
 import {
   Tree,
   TreeSelect,
   useTree
-} from "./chunk-UO6VJC3C.js";
+} from "./chunk-KGFFQGCM.js";
 import {
   DataGrid
-} from "./chunk-Z5UGF7EO.js";
+} from "./chunk-EFDB2ENB.js";
 import {
   Checkbox
-} from "./chunk-FSV73JI4.js";
+} from "./chunk-PEX2UTNG.js";
 import {
   ConfigProvider,
   Spin,
-  useConfig
-} from "./chunk-2OCEO636.js";
+  buildThemeVars,
+  useConfig,
+  useConfigWithDefaults
+} from "./chunk-VLRLCHEL.js";
 import {
   VirtualList
 } from "./chunk-BNMJSYI2.js";
@@ -62,7 +64,7 @@ import {
 import {
   HistoryPanel,
   useHistory
-} from "./chunk-GJDDPZH7.js";
+} from "./chunk-ZJC2QUWA.js";
 
 // src/locales/en_US.ts
 var en_US = {
@@ -131,6 +133,9 @@ var en_US = {
     prevMonth: "Previous month",
     nextMonth: "Next month"
   },
+  input: {
+    clear: "Clear"
+  },
   inputPassword: {
     showPassword: "Show password",
     hidePassword: "Hide password"
@@ -294,6 +299,9 @@ var ru_RU = {
     prevMonth: "\u041F\u0440\u0435\u0434\u044B\u0434\u0443\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446",
     nextMonth: "\u0421\u043B\u0435\u0434\u0443\u044E\u0449\u0438\u0439 \u043C\u0435\u0441\u044F\u0446"
   },
+  input: {
+    clear: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C"
+  },
   inputPassword: {
     showPassword: "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C",
     hidePassword: "\u0421\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u0440\u043E\u043B\u044C"
@@ -457,6 +465,9 @@ var zh_CN = {
     prevMonth: "\u4E0A\u4E2A\u6708",
     nextMonth: "\u4E0B\u4E2A\u6708"
   },
+  input: {
+    clear: "\u6E05\u9664"
+  },
   inputPassword: {
     showPassword: "\u663E\u793A\u5BC6\u7801",
     hidePassword: "\u9690\u85CF\u5BC6\u7801"
@@ -620,6 +631,9 @@ var de_DE = {
     prevMonth: "Vorheriger Monat",
     nextMonth: "N\xE4chster Monat"
   },
+  input: {
+    clear: "Leeren"
+  },
   inputPassword: {
     showPassword: "Passwort anzeigen",
     hidePassword: "Passwort verbergen"
@@ -783,6 +797,9 @@ var fr_FR = {
     prevMonth: "Mois pr\xE9c\xE9dent",
     nextMonth: "Mois suivant"
   },
+  input: {
+    clear: "Effacer"
+  },
   inputPassword: {
     showPassword: "Afficher le mot de passe",
     hidePassword: "Masquer le mot de passe"
@@ -946,6 +963,9 @@ var es_ES = {
     prevMonth: "Mes anterior",
     nextMonth: "Mes siguiente"
   },
+  input: {
+    clear: "Limpiar"
+  },
   inputPassword: {
     showPassword: "Mostrar contrase\xF1a",
     hidePassword: "Ocultar contrase\xF1a"
@@ -2063,7 +2083,9 @@ function Calendar(props) {
                   "span",
                   {
                     className: "sg-calendar-event-dot",
-                    style: { backgroundColor: ev.color ?? "var(--sg-primary, #1677ff)" },
+                    style: {
+                      backgroundColor: ev.color ?? "var(--sg-color-primary, #1677ff)"
+                    },
                     title: ev.title
                   },
                   ev.key ?? ei
@@ -2654,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;
@@ -3055,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);
@@ -3204,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}`,
@@ -3269,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) => {
@@ -3385,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());
@@ -3402,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);
@@ -3424,7 +3468,7 @@ function RangePicker({
   };
   const handleDateSelect = (date) => {
     if (activeIndex === 0) {
-      setInternalValue([date, null]);
+      setDraft([date, null]);
       setActiveIndex(1);
     } else {
       let start = currentValue[0];
@@ -3438,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);
@@ -3449,6 +3494,7 @@ function RangePicker({
   };
   const handleTimeOk = () => {
     commitRange(currentValue);
+    setDraft(null);
     setInternalOpen(false);
     onOpenChange?.(false);
     setActiveIndex(0);
@@ -3456,6 +3502,7 @@ function RangePicker({
   const handleClear = (e) => {
     e.stopPropagation();
     commitRange([null, null]);
+    setDraft(null);
     setActiveIndex(0);
   };
   const handlePresetSelect = (val) => {
@@ -3464,6 +3511,8 @@ function RangePicker({
     } else {
       commitRange([val, val]);
     }
+    setDraft(null);
+    setActiveIndex(0);
     setInternalOpen(false);
     onOpenChange?.(false);
   };
@@ -3757,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);
@@ -3817,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" })
+              }
+            )
           ] }) })
         ]
       }
@@ -3918,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;
@@ -3963,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,
@@ -4033,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);
@@ -4056,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(
@@ -4069,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
@@ -4270,15 +4354,21 @@ function Rate({
 }
 
 // src/components/ui/Upload.tsx
-import { useRef as useRef8 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useRef as useRef8, useState as useState8 } from "react";
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function Upload({
   accept,
   multiple,
   disabled: disabledProp,
   loading,
-  fileList = [],
+  fileList,
   maxCount,
+  maxSize,
+  beforeUpload,
+  customRequest,
+  listType = "text",
+  showUploadList = true,
+  drag = false,
   onUpload,
   onRemove,
   children,
@@ -4293,21 +4383,114 @@ function Upload({
   const removeLabel = uploadLocale?.removeFile ?? "Remove file";
   const uploadAriaLabel = uploadLocale?.uploadAriaLabel ?? "Upload file";
   const inputRef = useRef8(null);
+  const isControlled = fileList !== void 0;
+  const [internalList, setInternalList] = useState8(fileList ?? []);
+  const list = isControlled ? fileList : internalList;
+  const [isDragging, setIsDragging] = useState8(false);
+  const updateList = (next) => {
+    if (!isControlled) {
+      setInternalList((prev) => typeof next === "function" ? next(prev) : next);
+    }
+  };
+  const patchFile = (uid, patch) => {
+    updateList((prev) => prev.map((f) => f.uid === uid ? { ...f, ...patch } : f));
+  };
   const handleClick = () => {
     if (disabled || loading) return;
     inputRef.current?.click();
   };
-  const handleChange = (e) => {
-    const files = Array.from(e.target.files ?? []);
+  const handleFiles = async (rawFiles) => {
+    if (rawFiles.length === 0) return;
+    const accepted = [];
+    for (const file of rawFiles) {
+      if (maxSize !== void 0 && file.size > maxSize) continue;
+      if (beforeUpload) {
+        const ok = await beforeUpload(file, rawFiles);
+        if (ok === false) continue;
+      }
+      accepted.push(file);
+    }
+    if (accepted.length === 0) return;
+    let trimmed = accepted;
     if (maxCount) {
-      const remaining = maxCount - fileList.length;
-      onUpload?.(files.slice(0, Math.max(0, remaining)));
-    } else {
-      onUpload?.(files);
+      const remaining = maxCount - list.length;
+      trimmed = accepted.slice(0, Math.max(0, remaining));
+    }
+    if (customRequest) {
+      const newItems = trimmed.map((file) => ({
+        uid: `sg-upl-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+        name: file.name,
+        size: file.size,
+        status: "uploading",
+        percent: 0,
+        type: file.type,
+        raw: file
+      }));
+      updateList((prev) => [...prev, ...newItems]);
+      for (const item of newItems) {
+        if (!item.raw) continue;
+        customRequest({
+          file: item.raw,
+          onProgress: (percent) => patchFile(item.uid, { percent }),
+          onSuccess: () => patchFile(item.uid, { status: "done", percent: 100 }),
+          onError: () => patchFile(item.uid, { status: "error" })
+        });
+      }
     }
+    onUpload?.(trimmed);
+  };
+  const handleChange = (e) => {
+    const files = Array.from(e.target.files ?? []);
+    void handleFiles(files);
     if (inputRef.current) inputRef.current.value = "";
   };
-  const wrapperClass = unstyled ? className ?? "" : ["sg-upload", loading ? "sg-upload-loading" : "", className].filter(Boolean).join(" ");
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled || loading) return;
+    const files = Array.from(e.dataTransfer.files ?? []);
+    void handleFiles(files);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (disabled || loading) return;
+    setIsDragging(true);
+  };
+  const handleDragLeave = () => setIsDragging(false);
+  const handleRemove = (file) => {
+    updateList((prev) => prev.filter((f) => f.uid !== file.uid));
+    onRemove?.(file);
+  };
+  const wrapperClass = unstyled ? className ?? "" : [
+    "sg-upload",
+    `sg-upload-${listType}`,
+    drag ? "sg-upload-drag" : "sg-upload-select",
+    disabled ? "sg-upload-disabled" : "",
+    loading ? "sg-upload-loading" : "",
+    isDragging ? "sg-upload-dragging" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const renderTrigger = () => {
+    if (drag) {
+      return /* @__PURE__ */ jsx13(
+        "div",
+        {
+          className: unstyled ? "" : "sg-upload-drag-area",
+          role: "button",
+          tabIndex: 0,
+          onClick: handleClick,
+          onDrop: handleDrop,
+          onDragOver: handleDragOver,
+          onDragLeave: handleDragLeave,
+          children: children ?? /* @__PURE__ */ jsxs12(Fragment4, { children: [
+            /* @__PURE__ */ jsx13("p", { className: unstyled ? "" : "sg-upload-drag-icon", children: "\u2B06" }),
+            /* @__PURE__ */ jsx13("p", { className: unstyled ? "" : "sg-upload-drag-text", children: "Click or drag file to this area to upload" })
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx13("div", { className: unstyled ? "" : "sg-upload-select-trigger", onClick: handleClick, children: children ?? /* @__PURE__ */ jsx13(Button, { disabled, loading, children: uploadText }) });
+  };
   return /* @__PURE__ */ jsxs12("div", { className: wrapperClass, style, children: [
     /* @__PURE__ */ jsx13(
       "input",
@@ -4321,8 +4504,8 @@ function Upload({
         onChange: handleChange
       }
     ),
-    /* @__PURE__ */ jsx13("div", { onClick: handleClick, children: children ?? /* @__PURE__ */ jsx13(Button, { disabled, loading, children: uploadText }) }),
-    fileList.length > 0 && /* @__PURE__ */ jsx13("div", { className: unstyled ? "" : "sg-upload-list", children: fileList.map((file) => /* @__PURE__ */ jsxs12(
+    renderTrigger(),
+    showUploadList && list.length > 0 && /* @__PURE__ */ jsx13("div", { className: unstyled ? "" : "sg-upload-list", children: list.map((file) => /* @__PURE__ */ jsxs12(
       "div",
       {
         className: unstyled ? "" : ["sg-upload-item", `sg-upload-item-${file.status}`].filter(Boolean).join(" "),
@@ -4331,12 +4514,16 @@ function Upload({
             file.status === "uploading" && /* @__PURE__ */ jsx13(Spin, { size: "small", unstyled }),
             file.name
           ] }),
+          file.status === "uploading" && /* @__PURE__ */ jsxs12("span", { className: unstyled ? "" : "sg-upload-item-progress", children: [
+            file.percent ?? 0,
+            "%"
+          ] }),
           file.status !== "uploading" && /* @__PURE__ */ jsx13(
             "button",
             {
               type: "button",
               className: unstyled ? "" : "sg-upload-item-remove",
-              onClick: () => onRemove?.(file),
+              onClick: () => handleRemove(file),
               "aria-label": `${removeLabel}: ${file.name}`,
               children: "\xD7"
             }
@@ -4349,7 +4536,7 @@ function Upload({
 }
 
 // src/components/ui/Notification.tsx
-import { useState as useState8, useEffect as useEffect9, useRef as useRef9 } from "react";
+import { useState as useState9, useEffect as useEffect9, useRef as useRef9 } from "react";
 import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var listeners = /* @__PURE__ */ new Set();
 var items = [];
@@ -4392,7 +4579,7 @@ function NotificationContainer({
   placement = "topRight",
   unstyled
 }) {
-  const [list, setList] = useState8([]);
+  const [list, setList] = useState9([]);
   const listenerRef = useRef9(void 0);
   useEffect9(() => {
     const fn = (newItems) => setList(newItems);
@@ -4434,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,
@@ -4480,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(
@@ -4517,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",
@@ -4549,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 useState9, 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,
@@ -4570,8 +4784,8 @@ function Popconfirm({
   const popconfirmLocale = useConfig().locale?.popconfirm;
   const okText = okTextProp ?? popconfirmLocale?.okText ?? "Yes";
   const cancelText = cancelTextProp ?? popconfirmLocale?.cancelText ?? "No";
-  const [open, setOpen] = useState9(false);
-  const ref = useRef10(null);
+  const [open, setOpen] = useState10(false);
+  const ref = useRef11(null);
   const trapRef = useFocusTrap(open);
   const popconfirmId = useId3();
   useEffect11(() => {
@@ -4842,7 +5056,7 @@ function Breadcrumb({
 }
 
 // src/components/ui/Dropdown.tsx
-import { useState as useState10, 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,
@@ -4856,10 +5070,10 @@ function Dropdown({
 }) {
   const config = useConfig();
   const disabled = disabledProp ?? config.disabled ?? false;
-  const [open, setOpen] = useState10(false);
-  const [focusedIndex, setFocusedIndex] = useState10(-1);
-  const ref = useRef11(null);
-  const timerRef = useRef11(void 0);
+  const [open, setOpen] = useState11(false);
+  const [focusedIndex, setFocusedIndex] = useState11(-1);
+  const ref = useRef12(null);
+  const timerRef = useRef12(void 0);
   const menuId = useId4();
   useEffect12(() => {
     if (!open) return;
@@ -5131,7 +5345,7 @@ function Progress({
 }
 
 // src/components/ui/Menu.tsx
-import { useState as useState11, 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) {
@@ -5184,18 +5398,18 @@ function Menu({
   style,
   unstyled
 }) {
-  const [internalSelected, setInternalSelected] = useState11(
+  const [internalSelected, setInternalSelected] = useState12(
     selectedKeys ?? defaultSelectedKeys
   );
-  const [internalOpen, setInternalOpen] = useState11(
+  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);
   const initialActive = currentSelected.find((k) => navigable.some((n) => n.key === k)) ?? navigable[0]?.key ?? "";
-  const [activeKey, setActiveKey] = useState11(initialActive);
+  const [activeKey, setActiveKey] = useState12(initialActive);
   useEffect13(() => {
     if (!activeKey || !navigable.some((n) => n.key === activeKey)) {
       setActiveKey(navigable[0]?.key ?? "");
@@ -5466,9 +5680,9 @@ function StyledMenuItem({
   inlineCollapsed,
   depth
 }) {
-  const popoverRef = useRef12(null);
-  const [hoverOpen, setHoverOpen] = useState11(false);
-  const timerRef = useRef12(void 0);
+  const popoverRef = useRef13(null);
+  const [hoverOpen, setHoverOpen] = useState12(false);
+  const timerRef = useRef13(void 0);
   useEffect13(() => {
     return () => clearTimeout(timerRef.current);
   }, []);
@@ -5616,7 +5830,7 @@ function StyledMenuItem({
 }
 
 // src/components/ui/Collapse.tsx
-import { useState as useState12, 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 [];
@@ -5638,7 +5852,7 @@ function Collapse({
 }) {
   const config = useConfig();
   const size = sizeProp ?? config.size ?? "middle";
-  const [internalActive, setInternalActive] = useState12(
+  const [internalActive, setInternalActive] = useState13(
     toArray(activeKey ?? defaultActiveKey)
   );
   const currentActive = activeKey !== void 0 ? toArray(activeKey) : internalActive;
@@ -5702,9 +5916,9 @@ function CollapsePanel({
   expandIconPosition,
   onToggle
 }) {
-  const contentRef = useRef13(null);
-  const [height, setHeight] = useState12(void 0);
-  const firstRender = useRef13(true);
+  const contentRef = useRef14(null);
+  const [height, setHeight] = useState13(void 0);
+  const firstRender = useRef14(true);
   useEffect14(() => {
     if (firstRender.current) {
       firstRender.current = false;
@@ -5779,8 +5993,8 @@ function CollapsePanel({
 
 // src/components/ui/ColorPicker.tsx
 import {
-  useState as useState13,
-  useRef as useRef14,
+  useState as useState14,
+  useRef as useRef15,
   useEffect as useEffect15,
   useCallback as useCallback9
 } from "react";
@@ -5912,22 +6126,22 @@ function ColorPicker({
   const config = useConfig();
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
-  const [internalColor, setInternalColor] = useState13(
+  const [internalColor, setInternalColor] = useState14(
     value ?? defaultValue ?? DEFAULT_COLOR
   );
   const currentHex = (value ?? internalColor).toLowerCase();
-  const [hsv, setHsv] = useState13(() => {
+  const [hsv, setHsv] = useState14(() => {
     const [r, g, b] = hexToRgb(currentHex);
     return rgbToHsv(r, g, b);
   });
-  const [internalOpen, setInternalOpen] = useState13(false);
+  const [internalOpen, setInternalOpen] = useState14(false);
   const isOpen = controlledOpen ?? internalOpen;
-  const [textInput, setTextInput] = useState13(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 [textInput, setTextInput] = useState14(formatColor(currentHex, format));
+  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);
@@ -6205,7 +6419,7 @@ function ColorPicker({
 }
 
 // src/components/ui/Empty.tsx
-import { 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: [
@@ -6220,15 +6434,12 @@ var DefaultImage = () => /* @__PURE__ */ jsx26("svg", { width: "64", height: "41
     )
   ] })
 ] }) });
-function Empty({
-  image,
-  description,
-  children,
-  className,
-  style,
-  unstyled
-}) {
-  const localeDefault = useConfig().locale?.empty?.description ?? "No Data";
+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(Fragment6, { children: config.renderEmpty("Empty") });
+  }
+  const localeDefault = config.locale?.empty?.description ?? "No Data";
   const desc = description === void 0 ? localeDefault : description;
   if (unstyled) {
     return /* @__PURE__ */ jsxs24("div", { className, style, role: "status", children: [
@@ -6304,7 +6515,7 @@ function Result({
 }
 
 // src/components/ui/Skeleton.tsx
-import { Fragment as Fragment4, 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,
@@ -6317,7 +6528,7 @@ function Skeleton({
   unstyled
 }) {
   const loadingLabel = useConfig().locale?.skeleton?.loading ?? "Loading";
-  if (!loading) return /* @__PURE__ */ jsx28(Fragment4, { 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%";
@@ -6376,7 +6587,7 @@ function Skeleton({
 }
 
 // src/components/ui/Segmented.tsx
-import { useState as useState14 } from "react";
+import { useState as useState15 } from "react";
 import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
 function normalizeOption(opt) {
   if (typeof opt === "string") return { label: opt, value: opt };
@@ -6398,7 +6609,7 @@ function Segmented({
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
   const normalized = options.map(normalizeOption);
-  const [internalValue, setInternalValue] = useState14(
+  const [internalValue, setInternalValue] = useState15(
     value ?? defaultValue ?? normalized[0]?.value ?? ""
   );
   const currentValue = value ?? internalValue;
@@ -6621,7 +6832,7 @@ function Timeline({
 }
 
 // src/components/ui/Carousel.tsx
-import { useState as useState15, useEffect as useEffect16, useCallback as useCallback10, Children } from "react";
+import { useState as useState16, useEffect as useEffect16, useCallback as useCallback10, Children } from "react";
 import { jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
 function Carousel({
   autoplay = false,
@@ -6636,7 +6847,7 @@ function Carousel({
 }) {
   const slides = Children.toArray(children);
   const count = slides.length;
-  const [current, setCurrent] = useState15(0);
+  const [current, setCurrent] = useState16(0);
   const slideLabel = useConfig().locale?.carousel?.slide ?? ((index) => `Slide ${index}`);
   const goTo = useCallback10(
     (index) => {
@@ -6804,10 +7015,10 @@ function Descriptions({
 }
 
 // src/components/complex/SchemaFormEditor/SchemaFormEditor.tsx
-import { useEffect as useEffect17, useMemo as useMemo9, useState as useState17 } from "react";
+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
@@ -6991,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 = {
@@ -7315,8 +7526,8 @@ function SchemaFormEditorPalette({
 }
 
 // src/components/complex/SchemaFormEditor/SchemaFormEditorCanvas.tsx
-import { useCallback as useCallback12, useMemo as useMemo6, useRef as useRef16, useState as useState16 } from "react";
-import { Fragment as Fragment5, 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",
@@ -7342,8 +7553,8 @@ function SchemaFormEditorCanvas({
     () => fields.map((f) => `${f.id}:${f.name}:${f.type}:${String(f.defaultValue ?? "")}`).join("|"),
     [fields]
   );
-  const [dropIndicator, setDropIndicator] = useState16(null);
-  const dragRef = useRef16(null);
+  const [dropIndicator, setDropIndicator] = useState17(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();
@@ -7494,7 +7705,7 @@ function FieldOverlay({
   function handleDragLeave() {
     onIndicator(null);
   }
-  return /* @__PURE__ */ jsxs33(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment8, { children: [
     showIndicator && /* @__PURE__ */ jsx35("div", { className: "sg-sfe-canvas-drop-indicator", "data-testid": "sfe-drop-indicator" }),
     /* @__PURE__ */ jsxs33(
       "div",
@@ -7877,7 +8088,7 @@ function SchemaFormEditor({
   const internalOptions = { initialSchema, onChange };
   const internalStore = useSchemaEditor(internalOptions);
   const store = externalStore ?? internalStore;
-  const [bottomTab, setBottomTab] = useState17("preview");
+  const [bottomTab, setBottomTab] = useState18("preview");
   useEffect17(() => {
     function onKey(e) {
       const target = e.target;
@@ -7996,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;
@@ -8005,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();
   }
@@ -8027,8 +8238,8 @@ import {
   useEffect as useEffect18,
   useImperativeHandle,
   useMemo as useMemo11,
-  useRef as useRef18,
-  useState as useState18
+  useRef as useRef19,
+  useState as useState19
 } from "react";
 import {
   routeOrthogonal,
@@ -8288,15 +8499,15 @@ function DiagramInner({
     nodes.forEach((n, i) => m.set(n.id, allBounds[i]));
     return m;
   }, [nodes, allBounds]);
-  const [view, setView] = useState18({ zoom: 1, panX: 0, panY: 0 });
-  const wrapperRef = useRef18(null);
+  const [view, setView] = useState19({ zoom: 1, panX: 0, panY: 0 });
+  const wrapperRef = useRef19(null);
   const isSelectionControlled = selection !== void 0;
-  const [internalSelection, setInternalSelection] = useState18(
+  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]);
@@ -8353,8 +8564,8 @@ function DiagramInner({
     width: "100%",
     height: "100%"
   };
-  const dragRef = useRef18(null);
-  const [draggingId, setDraggingId] = useState18(null);
+  const dragRef = useRef19(null);
+  const [draggingId, setDraggingId] = useState19(null);
   const DRAG_THRESHOLD_PX = 0.5;
   function applyMove(id, x, y) {
     let nx = x;
@@ -8467,17 +8678,17 @@ function DiagramInner({
       }));
     }
   }
-  const [lasso, setLasso] = useState18(null);
-  const lassoRef = useRef18(null);
-  const boundsByIdRef = useRef18(boundsById);
+  const [lasso, setLasso] = useState19(null);
+  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;
@@ -8628,12 +8839,12 @@ function DiagramInner({
       onEdgeContextMenu(e, edge);
     };
   }
-  const [hoveredNode, setHoveredNode] = useState18(null);
-  const [hoveredEdge, setHoveredEdge] = useState18(null);
-  const nodeHoverShowTimer = useRef18(null);
-  const nodeHoverHideTimer = useRef18(null);
-  const edgeHoverShowTimer = useRef18(null);
-  const edgeHoverHideTimer = useRef18(null);
+  const [hoveredNode, setHoveredNode] = useState19(null);
+  const [hoveredEdge, setHoveredEdge] = useState19(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);
@@ -8931,8 +9142,8 @@ import {
   useCallback as useCallback14,
   useEffect as useEffect19,
   useMemo as useMemo12,
-  useRef as useRef19,
-  useState as useState19
+  useRef as useRef20,
+  useState as useState20
 } from "react";
 import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
 function Dashboard({
@@ -8947,7 +9158,7 @@ function Dashboard({
   onDashboardContextMenu
 }) {
   const dashboardLocale = useConfig().locale?.dashboard;
-  const [maximizedId, setMaximizedId] = useState19(null);
+  const [maximizedId, setMaximizedId] = useState20(null);
   const wrapperClass = unstyled ? className : ["sg-dashboard", className].filter(Boolean).join(" ");
   const gridStyle = {
     display: "grid",
@@ -8996,8 +9207,8 @@ function DashboardWidgetView({
   defaultActions
 }) {
   const dashboardLocale = useConfig().locale?.dashboard;
-  const [hovered, setHovered] = useState19(false);
-  const [menuOpen, setMenuOpen] = useState19(false);
+  const [hovered, setHovered] = useState20(false);
+  const [menuOpen, setMenuOpen] = useState20(false);
   const widgetClass = unstyled ? widget.className : ["sg-dashboard-widget", widget.className].filter(Boolean).join(" ");
   const widgetStyle = isMaximized ? {
     gridColumn: `1 / span ${totalColumns}`,
@@ -9086,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) => {
@@ -9190,8 +9401,8 @@ function MoreIcon() {
 // src/components/complex/Dashboard/DashboardEditor.tsx
 import {
   useMemo as useMemo13,
-  useRef as useRef20,
-  useState as useState20
+  useRef as useRef21,
+  useState as useState21
 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var MIN_W = 1;
@@ -9216,12 +9427,12 @@ function DashboardEditor({
   onWidgetRemove
 }) {
   const dashboardLocale = useConfig().locale?.dashboard;
-  const gridRef = useRef20(null);
-  const dragRef = useRef20(null);
-  const [maximizedId, setMaximizedId] = useState20(null);
-  const widgetsRef = useRef20(widgets);
+  const gridRef = useRef21(null);
+  const dragRef = useRef21(null);
+  const [maximizedId, setMaximizedId] = useState21(null);
+  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;
@@ -9394,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";
@@ -9481,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];
@@ -9569,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;
@@ -9856,8 +10067,8 @@ import {
   useCallback as useCallback16,
   useEffect as useEffect20,
   useMemo as useMemo15,
-  useRef as useRef22,
-  useState as useState21
+  useRef as useRef23,
+  useState as useState22
 } from "react";
 import { detectConflicts, isAvailable } from "@skygraph/core";
 import { jsx as jsx44, jsxs as jsxs39 } from "react/jsx-runtime";
@@ -9943,11 +10154,11 @@ 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] = useState21(null);
+  const [ghost, setGhost] = useState22(null);
   const step = STEP_MS2[scale];
   const resolvedRange = useMemo15(
     () => resolveRange(assignments, step, range),
@@ -10011,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;
@@ -10069,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;
@@ -10403,8 +10614,8 @@ function ResourceCalendar({
 }
 
 // src/components/complex/Timeline/Timeline.tsx
-import { Fragment as Fragment6, useMemo as useMemo16 } from "react";
-import { Fragment as Fragment7, 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;
 }
@@ -10485,7 +10696,7 @@ function EventTimeline({
       "aria-label": timelineLocale?.ariaLabel ?? "Timeline",
       "data-orientation": orientation,
       "data-group-by": groupBy ?? "none",
-      children: groups.map((group) => /* @__PURE__ */ jsxs40(Fragment6, { children: [
+      children: groups.map((group) => /* @__PURE__ */ jsxs40(Fragment9, { children: [
         groupBy && /* @__PURE__ */ jsx45(
           "div",
           {
@@ -10503,7 +10714,7 @@ function EventTimeline({
               "aria-hidden": "true"
             }
           );
-          const body = renderEvent ? renderEvent(ev) : /* @__PURE__ */ jsxs40(Fragment7, { 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 })
           ] });
@@ -10644,7 +10855,7 @@ function ChartLegend({ series, className, style }) {
 }
 
 // src/components/complex/Charts/ChartCrosshair.tsx
-import { Fragment as Fragment8 } 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;
@@ -10738,7 +10949,7 @@ function ChartCrosshair({
           ),
           points.map((p, i) => {
             const rowY = tipY + TIP_PADDING + headerHeight + i * TIP_LINE_HEIGHT;
-            return /* @__PURE__ */ jsxs42(Fragment8, { children: [
+            return /* @__PURE__ */ jsxs42(Fragment11, { children: [
               /* @__PURE__ */ jsx47(
                 "rect",
                 {
@@ -10783,7 +10994,7 @@ function ChartCrosshair({
 }
 
 // src/components/complex/Charts/ChartBrush.tsx
-import { useMemo as useMemo17, useRef as useRef23, useState as useState22 } 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;
@@ -10818,8 +11029,8 @@ function ChartBrush({
   fill,
   disabled
 }) {
-  const overlayRef = useRef23(null);
-  const [drag, setDrag] = useState22(null);
+  const overlayRef = useRef24(null);
+  const [drag, setDrag] = useState23(null);
   const cls4 = (suffix) => unstyled ? void 0 : `sg-chart-brush-${suffix}`;
   const clientToCategoryIndex = (clientX) => {
     const overlay = overlayRef.current;
@@ -10964,10 +11175,10 @@ function ChartBrush({
 }
 
 // src/components/complex/Charts/LineChart.tsx
-import { forwardRef as forwardRef2, useMemo as useMemo19, useRef as useRef26, useState as useState24 } 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 Fragment9 } 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;
@@ -11062,7 +11273,7 @@ function ChartAxes({
               strokeWidth: 1
             }
           ),
-          yTicks.map((t, i) => /* @__PURE__ */ jsxs44(Fragment9, { children: [
+          yTicks.map((t, i) => /* @__PURE__ */ jsxs44(Fragment12, { children: [
             /* @__PURE__ */ jsx49(
               "line",
               {
@@ -11122,7 +11333,7 @@ function ChartAxes({
             const cx = xFor(idx);
             const cat = categories[idx];
             const text = xFmt ? xFmt(cat, idx) : String(cat);
-            return /* @__PURE__ */ jsxs44(Fragment9, { children: [
+            return /* @__PURE__ */ jsxs44(Fragment12, { children: [
               /* @__PURE__ */ jsx49(
                 "line",
                 {
@@ -11174,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 };
@@ -11194,10 +11405,10 @@ function useChartPrint(forwardedRef, printable) {
 }
 
 // src/components/complex/Charts/useChartSize.ts
-import { useEffect as useEffect21, useRef as useRef25, useState as useState23 } from "react";
+import { useEffect as useEffect21, useRef as useRef26, useState as useState24 } from "react";
 function useChartSize(ref, fallback) {
-  const [size, setSize] = useState23(fallback);
-  const lastRef = useRef25(size);
+  const [size, setSize] = useState24(fallback);
+  const lastRef = useRef26(size);
   useEffect21(() => {
     const el = ref.current;
     if (!el) return void 0;
@@ -11343,7 +11554,7 @@ function downloadSvgAsPng(svg, fileNameOrOpts = "chart.png") {
 }
 
 // src/components/complex/Charts/ChartHoverToolbar.tsx
-import { Fragment as Fragment10, 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",
@@ -11368,7 +11579,7 @@ var PRINT_ICON = /* @__PURE__ */ jsx50(
   IconStroke,
   {
     d: "M4 6V2.5h8V6",
-    extra: /* @__PURE__ */ jsxs45(Fragment10, { 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" })
     ] })
@@ -11378,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(Fragment10, { children: [
+    extra: /* @__PURE__ */ jsxs45(Fragment13, { children: [
       /* @__PURE__ */ jsx50("path", { d: "M8 2.5v7" }),
       /* @__PURE__ */ jsx50("path", { d: "M5 6.5l3 3 3-3" })
     ] })
@@ -11388,7 +11599,7 @@ var PNG_ICON = /* @__PURE__ */ jsx50(
   IconStroke,
   {
     d: "M2.5 3.5h11v9h-11z",
-    extra: /* @__PURE__ */ jsxs45(Fragment10, { 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" })
     ] })
@@ -11398,7 +11609,7 @@ var RESET_ICON = /* @__PURE__ */ jsx50(
   IconStroke,
   {
     d: "M3 8a5 5 0 1 0 1.5-3.5",
-    extra: /* @__PURE__ */ jsx50(Fragment10, { children: /* @__PURE__ */ jsx50("path", { d: "M3 3v3h3" }) })
+    extra: /* @__PURE__ */ jsx50(Fragment13, { children: /* @__PURE__ */ jsx50("path", { d: "M3 3v3h3" }) })
   }
 );
 function defaultChartActions(opts) {
@@ -11548,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),
@@ -11579,10 +11790,10 @@ function LineChartInner({
   const animClass = anim.enabled && !unstyled ? "sg-chart-line-animate" : void 0;
   const crosshairEnabled = crosshair !== false && categories.length > 0;
   const crosshairFmt = typeof crosshair === "object" && crosshair !== null ? crosshair.valueFormatter : void 0;
-  const [hoverIdx, setHoverIdx] = useState24(null);
+  const [hoverIdx, setHoverIdx] = useState25(null);
   const brushConfig = resolveBrushConfig(brush);
   const isBrushControlled = brushConfig != null && "range" in brushConfig;
-  const [internalBrushRange, setInternalBrushRange] = useState24(
+  const [internalBrushRange, setInternalBrushRange] = useState25(
     brushConfig?.defaultRange ?? null
   );
   const effectiveBrushRange = isBrushControlled ? brushConfig.range ?? null : internalBrushRange;
@@ -11630,7 +11841,7 @@ function LineChartInner({
     brushConfig.onRangeChange?.(null);
   } : void 0;
   const resolvedActions = resolveChartActions(actions, { fileName, brushReset });
-  const [toolbarVisible, setToolbarVisible] = useState24(false);
+  const [toolbarVisible, setToolbarVisible] = useState25(false);
   const handleSvgContextMenu = makeChartContextMenuHandler(onChartContextMenu);
   const setSvgRef = (el) => {
     svgRef.current = el;
@@ -11802,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 useState25 } 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,
@@ -11828,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);
@@ -11860,7 +12071,7 @@ function BarChartInner({
   const animClass = anim.enabled && !unstyled ? "sg-chart-bar-animate" : void 0;
   const brushConfig = resolveBrushConfig(brush);
   const isBrushControlled = brushConfig != null && "range" in brushConfig;
-  const [internalBrushRange, setInternalBrushRange] = useState25(
+  const [internalBrushRange, setInternalBrushRange] = useState26(
     brushConfig?.defaultRange ?? null
   );
   const effectiveBrushRange = isBrushControlled ? brushConfig.range ?? null : internalBrushRange;
@@ -11873,7 +12084,7 @@ function BarChartInner({
     brushConfig.onRangeChange?.(null);
   } : void 0;
   const resolvedActions = resolveChartActions(actions, { fileName, brushReset });
-  const [toolbarVisible, setToolbarVisible] = useState25(false);
+  const [toolbarVisible, setToolbarVisible] = useState26(false);
   const handleSvgContextMenu = makeChartContextMenuHandler(onChartContextMenu);
   const setSvgRef = (el) => {
     svgRef.current = el;
@@ -12010,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 useState26 } 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,
@@ -12037,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);
@@ -12087,7 +12298,7 @@ function AreaChartInner({
   const animClass = anim.enabled && !unstyled ? "sg-chart-area-animate" : void 0;
   const brushConfig = resolveBrushConfig(brush);
   const isBrushControlled = brushConfig != null && "range" in brushConfig;
-  const [internalBrushRange, setInternalBrushRange] = useState26(
+  const [internalBrushRange, setInternalBrushRange] = useState27(
     brushConfig?.defaultRange ?? null
   );
   const effectiveBrushRange = isBrushControlled ? brushConfig.range ?? null : internalBrushRange;
@@ -12100,7 +12311,7 @@ function AreaChartInner({
     brushConfig.onRangeChange?.(null);
   } : void 0;
   const resolvedActions = resolveChartActions(actions, { fileName, brushReset });
-  const [toolbarVisible, setToolbarVisible] = useState26(false);
+  const [toolbarVisible, setToolbarVisible] = useState27(false);
   const handleSvgContextMenu = makeChartContextMenuHandler(onChartContextMenu);
   const setSvgRef = (el) => {
     svgRef.current = el;
@@ -12234,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 useState27 } 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,
@@ -12254,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 });
@@ -12272,7 +12483,7 @@ function PieChartInner({
     animationDuration: `${anim.duration}ms`
   } : void 0;
   const resolvedActions = resolveChartActions(actions, { fileName });
-  const [toolbarVisible, setToolbarVisible] = useState27(false);
+  const [toolbarVisible, setToolbarVisible] = useState28(false);
   const handleSvgContextMenu = makeChartContextMenuHandler(onChartContextMenu);
   const setSvgRef = (el) => {
     svgRef.current = el;
@@ -12509,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]
   );
@@ -12591,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)
@@ -13153,7 +13364,7 @@ function Transfer({
 }
 
 // src/components/ui/Mentions.tsx
-import { useState as useState28, 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,
@@ -13179,12 +13390,12 @@ function Mentions({
     () => Array.isArray(prefixConfig) ? prefixConfig : [prefixConfig],
     [prefixConfig]
   );
-  const [internalValue, setInternalValue] = useState28(value ?? defaultValue);
+  const [internalValue, setInternalValue] = useState29(value ?? defaultValue);
   const currentValue = value ?? internalValue;
-  const [mentionState, setMentionState] = useState28(null);
-  const [activeIndex, setActiveIndex] = useState28(0);
-  const textareaRef = useRef30(null);
-  const dropdownRef = useRef30(null);
+  const [mentionState, setMentionState] = useState29(null);
+  const [activeIndex, setActiveIndex] = useState29(0);
+  const textareaRef = useRef31(null);
+  const dropdownRef = useRef31(null);
   const filteredOptions = useMemo23(() => {
     if (!mentionState) return [];
     const q = mentionState.query.toLowerCase();
@@ -13304,7 +13515,7 @@ function Mentions({
 }
 
 // src/components/ui/InputPassword.tsx
-import { useState as useState29 } from "react";
+import { useState as useState30 } from "react";
 import { jsx as jsx59, jsxs as jsxs54 } from "react/jsx-runtime";
 function getStrength(password) {
   if (!password || password.length < 4) return "weak";
@@ -13347,8 +13558,8 @@ function InputPassword({
   const config = useConfig();
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
-  const [visible, setVisible] = useState29(false);
-  const [internal, setInternal] = useState29(defaultValue ?? "");
+  const [visible, setVisible] = useState30(false);
+  const [internal, setInternal] = useState30(defaultValue ?? "");
   const current = value ?? internal;
   const labels = { ...defaultStrengthLabels, ...strengthLabels };
   const handleChange = (v) => {
@@ -13429,7 +13640,7 @@ function InputPassword({
 }
 
 // src/components/ui/SearchInput.tsx
-import { useState as useState30, 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,
@@ -13451,9 +13662,9 @@ function SearchInput({
   const config = useConfig();
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
-  const [internal, setInternal] = useState30(defaultValue ?? "");
+  const [internal, setInternal] = useState31(defaultValue ?? "");
   const current = value ?? internal;
-  const inputRef = useRef31(null);
+  const inputRef = useRef32(null);
   const handleChange = (v) => {
     setInternal(v);
     onChange?.(v);
@@ -13537,7 +13748,7 @@ function SearchInput({
 }
 
 // src/components/ui/TagInput.tsx
-import { useState as useState31, 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,
@@ -13561,9 +13772,9 @@ function TagInput({
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
   const removeTagLabel = config.locale?.tagInput?.removeTag ?? ((tag) => `Remove ${tag}`);
-  const [internalTags, setInternalTags] = useState31(defaultValue);
-  const [inputValue, setInputValue] = useState31("");
-  const inputRef = useRef32(null);
+  const [internalTags, setInternalTags] = useState32(defaultValue);
+  const [inputValue, setInputValue] = useState32("");
+  const inputRef = useRef33(null);
   const id = useId5();
   const tags = value ?? internalTags;
   const updateTags = (next) => {
@@ -13674,7 +13885,7 @@ function TagInput({
 }
 
 // src/components/ui/PinInput.tsx
-import { useState as useState32, 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,
@@ -13699,9 +13910,9 @@ function PinInput({
   const disabled = disabledProp ?? config.disabled ?? false;
   const id = useId6();
   const pad2 = (s) => s.padEnd(length, "").slice(0, length);
-  const [internal, setInternal] = useState32(() => pad2(defaultValue));
+  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) => {
@@ -13810,8 +14021,8 @@ function PinInput({
 }
 
 // src/components/ui/InlineEdit.tsx
-import { useState as useState33, useRef as useRef34, useEffect as useEffect23 } from "react";
-import { Fragment as Fragment11, 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 = "",
@@ -13832,10 +14043,10 @@ function InlineEdit({
   const config = useConfig();
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
-  const [editing, setEditing] = useState33(false);
-  const [internal, setInternal] = useState33(defaultValue);
-  const [draft, setDraft] = useState33("");
-  const inputRef = useRef34(null);
+  const [editing, setEditing] = useState34(false);
+  const [internal, setInternal] = useState34(defaultValue);
+  const [draft, setDraft] = useState34("");
+  const inputRef = useRef35(null);
   const current = value ?? internal;
   useEffect23(() => {
     if (editing) {
@@ -13867,7 +14078,7 @@ function InlineEdit({
   };
   if (!editing) {
     if (renderView) {
-      return /* @__PURE__ */ jsx63(Fragment11, { children: renderView(current, startEditing) });
+      return /* @__PURE__ */ jsx63(Fragment14, { children: renderView(current, startEditing) });
     }
     if (unstyled) {
       return /* @__PURE__ */ jsx63(
@@ -13916,7 +14127,7 @@ function InlineEdit({
           onBlur: saveOnBlur ? save : void 0
         }
       ),
-      showButtons && /* @__PURE__ */ jsxs57(Fragment11, { children: [
+      showButtons && /* @__PURE__ */ jsxs57(Fragment14, { children: [
         /* @__PURE__ */ jsx63("button", { type: "button", onClick: save, children: "\u2713" }),
         /* @__PURE__ */ jsx63("button", { type: "button", onClick: cancel, children: "\u2715" })
       ] })
@@ -14094,6 +14305,7 @@ export {
   VirtualList,
   buildPageRule,
   buildPrintHtml,
+  buildThemeVars,
   chartDataKey,
   colorForSeries,
   createEmptyEditorSchema,
@@ -14126,6 +14338,7 @@ export {
   useChartSize,
   useComputed,
   useConfig,
+  useConfigWithDefaults,
   useField,
   useFieldArray,
   useForm,