@sia.soul/sia-react-ui 0.1.3 → 0.1.5

package/dist/index.js

@@ -56,7 +56,7 @@ import {
   smoothSvgPath,
   svgArcPath,
   transferCompositeValue
-} from "./chunk-I342FGQY.js";
+} from "./chunk-Z3T6RDQP.js";
 import {
   Badge,
   Breadcrumb,
@@ -87,24 +87,24 @@ import {
   message,
   notification,
   useOverlayLifecycle
-} from "./chunk-Q4XNFMUH.js";
+} from "./chunk-S2JAJCLN.js";
 import {
   TextArea
-} from "./chunk-NZAT2RUM.js";
+} from "./chunk-WHARTF2I.js";
 import {
   MarkdownEditor
-} from "./chunk-6VXOLMKZ.js";
+} from "./chunk-5ZTWY3PG.js";
 import {
   RichTextContent,
   RichTextEditor
-} from "./chunk-OQLDEVCF.js";
+} from "./chunk-PX6BOFTW.js";
 import {
   Dropdown,
   Input,
   Menu,
   Segmented,
   Steps
-} from "./chunk-IMZT6VCU.js";
+} from "./chunk-IHTODT53.js";
 import {
   Button
 } from "./chunk-MBS2HXLZ.js";
@@ -112,17 +112,23 @@ import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-R4OWKIXJ.js";
+} from "./chunk-MJUTLEEE.js";
 import {
+  OverflowTags,
   Select
-} from "./chunk-OAC7BSUR.js";
+} from "./chunk-R7BVDN3Q.js";
 import {
   FILLED_ICON_NAMES,
   ICON_NAMES,
   Icon,
-  PopupPortal,
-  useControllableState
-} from "./chunk-2RRTDU3N.js";
+  PopupPortal
+} from "./chunk-EJ23MVR6.js";
+import {
+  PlaceholderModeContext,
+  useControllableState,
+  useFloatingPlaceholder,
+  usePlaceholderMode
+} from "./chunk-EJDPRAU2.js";
 
 // src/components/Alert.tsx
 import { useState } from "react";
@@ -316,6 +322,7 @@ function Cascader({
   changeOnSelect = false,
   expandTrigger = "click",
   placeholder = "\u8BF7\u9009\u62E9",
+  placeholderMode,
   disabled = false,
   fieldNames,
   displayRender,
@@ -335,7 +342,7 @@ function Cascader({
   const [active, setActive] = useState3([]);
   const [search, setSearch] = useState3("");
   const [loadingKey, setLoadingKey] = useState3("");
-  const selectedPaths = multiple ? current ?? [] : current?.length && !Array.isArray(current[0]) ? [current] : [];
+  const selectedPaths = multiple ? Array.isArray(current) ? current : [] : current?.length && !Array.isArray(current[0]) ? [current] : [];
   const selectedKeys = new Set(selectedPaths.map(pathKey));
   const selectedPathSignature = selectedPaths.map(pathKey).join("");
   const searchPaths = useMemo(() => search ? leafPaths(options, fields).filter((path) => path.some((option) => String(optionLabel(option, fields)).toLowerCase().includes(search.toLowerCase()))) : [], [fields, options, search]);
@@ -411,13 +418,15 @@ function Cascader({
     const children = optionChildren(option, fields);
     if (children?.length) columns.push(children);
   });
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: selectedPaths.length > 0, active: open });
   return /* @__PURE__ */ jsxs3("div", { ref: rootRef, className: `sia-cascader${open ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
-    /* @__PURE__ */ jsxs3("button", { type: "button", className: "sia-cascader__trigger", disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: toggleOpen, children: [
+    /* @__PURE__ */ jsxs3("button", { type: "button", className: `sia-cascader__trigger${floating.className}`, disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: toggleOpen, children: [
       /* @__PURE__ */ jsx3("span", { className: "sia-cascader__value", children: display ? multiple && Array.isArray(display) ? display.map((label, index) => /* @__PURE__ */ jsx3("span", { className: "sia-cascader__tag", children: label }, pathKey(selectedPaths[index] ?? []))) : display : /* @__PURE__ */ jsx3("span", { className: "sia-cascader__placeholder", children: placeholder }) }),
       allowClear && selectedPaths.length ? /* @__PURE__ */ jsx3("span", { className: "sia-cascader__clear", role: "button", "aria-label": "\u6E05\u9664\u9009\u62E9", onClick: (event) => {
         event.stopPropagation();
         clearSelection();
       }, children: /* @__PURE__ */ jsx3(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
+      floating.label,
       /* @__PURE__ */ jsx3(Icon, { name: open ? "chevron-up" : "chevron-down", size: 14 })
     ] }),
     /* @__PURE__ */ jsxs3(PopupPortal, { ref: popupRef, anchorRef: rootRef, open, className: "sia-cascader__popup", children: [
@@ -1250,7 +1259,7 @@ function openDrawer(config) {
   let currentOpen = true;
   let destroyed = false;
   let cleanupTimer;
-  function cleanup() {
+  function cleanup2() {
     if (destroyed) return;
     destroyed = true;
     if (cleanupTimer !== void 0) window.clearTimeout(cleanupTimer);
@@ -1262,7 +1271,7 @@ function openDrawer(config) {
     if (destroyed || !currentOpen) return;
     currentOpen = false;
     render();
-    cleanupTimer = window.setTimeout(cleanup, DRAWER_MOTION_DURATION + 100);
+    cleanupTimer = window.setTimeout(cleanup2, DRAWER_MOTION_DURATION + 100);
   }
   function render() {
     root.render(/* @__PURE__ */ jsx8(
@@ -1277,7 +1286,7 @@ function openDrawer(config) {
         afterOpen: () => currentConfig.afterOpen?.(),
         afterClose: () => {
           currentConfig.afterClose?.();
-          cleanup();
+          cleanup2();
         }
       }
     ));
@@ -1530,6 +1539,7 @@ function FormRoot({
   form,
   initialValues,
   layout = "horizontal",
+  placeholderMode,
   disabled = false,
   requiredMark = true,
   className = "",
@@ -1539,11 +1549,12 @@ function FormRoot({
   children,
   ...props
 }) {
+  const resolvedPlaceholderMode = usePlaceholderMode(placeholderMode);
   const [internalForm] = useForm(form);
   const instance = internalForm;
   instance.configure(initialValues, { onFinish, onFinishFailed, onValuesChange });
   const context = useMemo4(() => instance, [instance]);
-  return /* @__PURE__ */ jsx9(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx9(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx9(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ jsx9(
     "form",
     {
       ...props,
@@ -1555,7 +1566,7 @@ function FormRoot({
       },
       children: /* @__PURE__ */ jsx9("fieldset", { disabled, children })
     }
-  ) });
+  ) }) });
 }
 function defaultEventValue(valuePropName, args) {
   const first = args[0];
@@ -2229,6 +2240,7 @@ function TimePicker({
   onChange,
   onOpenChange,
   placeholder = "\u8BF7\u9009\u62E9\u65F6\u95F4",
+  placeholderMode,
   min,
   max,
   step,
@@ -2283,7 +2295,8 @@ function TimePicker({
     changeOpen(false);
     inputRef.current?.focus();
   }
-  return /* @__PURE__ */ jsxs13("span", { ref: rootRef, style, className: `sia-picker sia-time-picker sia-picker--${size} sia-picker--${status}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: Boolean(display), active: open });
+  return /* @__PURE__ */ jsxs13("span", { ref: rootRef, style, className: `sia-picker sia-time-picker${floating.className} sia-picker--${size} sia-picker--${status}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ jsx13(
       "input",
       {
@@ -2320,6 +2333,7 @@ function TimePicker({
         }
       }
     ),
+    floating.label,
     allowClear && currentValue && !disabled && !readOnly ? /* @__PURE__ */ jsx13("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65F6\u95F4", onMouseDown: (event) => event.preventDefault(), onClick: () => {
       setValue2("");
       changeOpen(false);
@@ -2358,7 +2372,7 @@ function TimePicker({
   ] });
 }
 function TimeRangePicker({ value, defaultValue = ["", ""], placeholder = ["\u5F00\u59CB\u65F6\u95F4", "\u7ED3\u675F\u65F6\u95F4"], separator = "\u2192", onChange, className = "", style, ...props }) {
-  const [currentValue, setValue2] = useControllableState({ value, defaultValue, onChange });
+  const [currentValue, setValue2] = useControllableState({ value: value === void 0 ? void 0 : Array.isArray(value) ? value : ["", ""], defaultValue, onChange });
   function update(index, next) {
     const pair = [currentValue[0], currentValue[1]];
     pair[index] = next;
@@ -2406,6 +2420,7 @@ function TreeSelect({
   allowClear = false,
   treeDefaultExpandAll = false,
   placeholder = "\u8BF7\u9009\u62E9",
+  placeholderMode,
   searchPlaceholder = "\u641C\u7D22\u8282\u70B9",
   maxTagCount = 3,
   disabled = false,
@@ -2469,7 +2484,7 @@ function TreeSelect({
     collect(treeData);
     return new Set(values);
   });
-  const selectedValues = Array.isArray(currentValue) ? [...currentValue] : currentValue === void 0 ? [] : [currentValue];
+  const selectedValues = Array.isArray(currentValue) ? [...currentValue] : currentValue === void 0 || currentValue === "" && !nodeIndex.has("") ? [] : [currentValue];
   const expandedSet = treeExpandedKeys ? new Set(treeExpandedKeys) : expanded;
   const selectedNodes = resolveNodes(selectedValues);
   const visibleNodes = flattenTree(treeData, expandedSet, search, filterTreeNode);
@@ -2584,6 +2599,7 @@ function TreeSelect({
       changeOpen(false);
     }
   }
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: selectedNodes.length > 0, active: open });
   return /* @__PURE__ */ jsxs14(
     "div",
     {
@@ -2603,7 +2619,7 @@ function TreeSelect({
             "button",
             {
               type: "button",
-              className: "sia-tree-select__trigger",
+              className: `sia-tree-select__trigger${floating.className}`,
               disabled,
               "aria-haspopup": "tree",
               "aria-expanded": open,
@@ -2617,13 +2633,8 @@ function TreeSelect({
                 if (event.key === "Escape") changeOpen(false);
               },
               children: [
-                /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__value", children: selectedNodes.length ? displayRender ? displayRender(selectedNodes) : multi ? /* @__PURE__ */ jsxs14(Fragment4, { children: [
-                  selectedNodes.slice(0, maxTagCount).map((node) => /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__tag", children: node.title }, node.value)),
-                  selectedNodes.length > maxTagCount ? /* @__PURE__ */ jsxs14("span", { className: "sia-tree-select__tag", children: [
-                    "+",
-                    selectedNodes.length - maxTagCount
-                  ] }) : null
-                ] }) : selectedNodes[0]?.title : /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__placeholder", children: placeholder }) }),
+                /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__value", children: selectedNodes.length ? displayRender ? displayRender(selectedNodes) : multi ? /* @__PURE__ */ jsx14(OverflowTags, { tagClassName: "sia-tree-select__tag", maxCount: maxTagCount, items: selectedNodes.map((node) => ({ key: node.value, label: node.title })) }) : selectedNodes[0]?.title : /* @__PURE__ */ jsx14("span", { className: "sia-tree-select__placeholder", children: placeholder }) }),
+                floating.label,
                 /* @__PURE__ */ jsx14(Icon, { name: open ? "chevron-up" : "chevron-down", size: 14 })
               ]
             }
@@ -3795,7 +3806,7 @@ function Markdown({ content, emptyText = "\u6682\u65E0 Markdown \u5185\u5BB9", r
     });
     return () => {
       cancelled = true;
-      cleanups.forEach((cleanup) => cleanup());
+      cleanups.forEach((cleanup2) => cleanup2());
     };
   }, [html, imagePreview, resolveImageSrc]);
   function openImagePreview(target) {
@@ -3842,7 +3853,7 @@ var InputNumber = forwardRef4(function InputNumber2({
   prefix,
   suffix,
   controls = true,
-  placeholderMode = "default",
+  placeholderMode,
   placeholder,
   disabled,
   readOnly,
@@ -3911,7 +3922,7 @@ var InputNumber = forwardRef4(function InputNumber2({
   }
   const increaseDisabled = disabled || readOnly || max !== void 0 && currentValue !== null && currentValue >= max;
   const decreaseDisabled = disabled || readOnly || min !== void 0 && currentValue !== null && currentValue <= min;
-  const floatingPlaceholder = placeholderMode === "floating" && Boolean(placeholder);
+  const floatingPlaceholder = usePlaceholderMode(placeholderMode) === "floating" && Boolean(placeholder);
   const input = /* @__PURE__ */ jsx17(
     "input",
     {
@@ -4387,11 +4398,93 @@ function Treemap({
   );
 }
 
+// src/components/useScrollbarProximity.ts
+import { useEffect as useEffect11 } from "react";
+var users = 0;
+var cleanup;
+function useScrollbarProximity() {
+  useEffect11(() => {
+    if (users++ === 0) {
+      let frame = 0;
+      let x = -Infinity;
+      let y = -Infinity;
+      const nearby = /* @__PURE__ */ new Set();
+      const clear = () => {
+        nearby.forEach((track) => track.removeAttribute("data-scrollbar-near"));
+        nearby.clear();
+      };
+      const update = () => {
+        frame = 0;
+        const next = /* @__PURE__ */ new Set();
+        document.querySelectorAll(".sia-scrollbar-track").forEach((track) => {
+          const rect = track.getBoundingClientRect();
+          const proximity = Number.parseFloat(getComputedStyle(track).getPropertyValue("--sia-scrollbar-proximity")) || 16;
+          if (rect.width && rect.height && x >= rect.left - proximity && x <= rect.right + proximity && y >= rect.top - proximity && y <= rect.bottom + proximity) {
+            next.add(track);
+            if (!nearby.has(track)) track.setAttribute("data-scrollbar-near", "true");
+          }
+        });
+        nearby.forEach((track) => {
+          if (!next.has(track)) track.removeAttribute("data-scrollbar-near");
+        });
+        nearby.clear();
+        next.forEach((track) => nearby.add(track));
+      };
+      const move = (event) => {
+        if (event.pointerType === "touch") return;
+        x = event.clientX;
+        y = event.clientY;
+        if (!frame) frame = requestAnimationFrame(update);
+      };
+      const leave = () => {
+        x = y = -Infinity;
+        clear();
+      };
+      document.addEventListener("pointermove", move, { passive: true });
+      document.documentElement.addEventListener("pointerleave", leave);
+      window.addEventListener("blur", leave);
+      cleanup = () => {
+        if (frame) cancelAnimationFrame(frame);
+        document.removeEventListener("pointermove", move);
+        document.documentElement.removeEventListener("pointerleave", leave);
+        window.removeEventListener("blur", leave);
+        clear();
+      };
+    }
+    return () => {
+      if (--users === 0) {
+        cleanup?.();
+        cleanup = void 0;
+      }
+    };
+  }, []);
+}
+
+// src/components/Table/TableCellContent.tsx
+import { useLayoutEffect, useRef as useRef12, useState as useState15 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function TableCellContent({ children, ellipsis, title }) {
+  const ref = useRef12(null);
+  const [overflowing, setOverflowing] = useState15(false);
+  const customContent = typeof children !== "string" && typeof children !== "number" && children != null;
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element || !ellipsis || !customContent) return;
+    const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(element);
+    for (const child of element.children) observer.observe(child);
+    return () => observer.disconnect();
+  }, [children, ellipsis, customContent]);
+  return /* @__PURE__ */ jsx19("div", { ref, className: "sia-table__cell-content", title, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children });
+}
+
 // src/components/Table/Table.tsx
-import { Fragment as Fragment7, forwardRef as forwardRef5, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef13, useState as useState16 } from "react";
+import { Fragment as Fragment7, forwardRef as forwardRef5, memo, useCallback as useCallback2, useEffect as useEffect13, useImperativeHandle, useMemo as useMemo9, useRef as useRef14, useState as useState17 } from "react";
 
 // src/components/Table/plugins.tsx
-import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef12, useState as useState15 } from "react";
+import { isValidElement as isValidElement3, useEffect as useEffect12, useRef as useRef13, useState as useState16 } from "react";
 
 // src/components/Table/utils.ts
 var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
@@ -4444,9 +4537,9 @@ function toTablePageParams(current, pageSize) {
 }
 
 // src/components/Table/plugins.tsx
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 function TableCheckbox({ checked, indeterminate, disabled, label, onChange }) {
-  return /* @__PURE__ */ jsx19(Checkbox, { className: "sia-table__checkbox", "aria-label": label, checked, indeterminate, disabled, onClick: (event) => event.stopPropagation(), onChange });
+  return /* @__PURE__ */ jsx20(Checkbox, { className: "sia-table__checkbox", "aria-label": label, checked, indeterminate, disabled, onClick: (event) => event.stopPropagation(), onChange });
 }
 function flattenRecords(data, childrenColumnName) {
   const result = [];
@@ -4898,7 +4991,7 @@ function TableSelectedItemsPanel({
   onRemove,
   onClear
 }) {
-  const [showAll, setShowAll] = useState15(false);
+  const [showAll, setShowAll] = useState16(false);
   const visibleEntries = showAll ? entries : entries.slice(0, maxCount);
   const hiddenCount = Math.max(0, entries.length - visibleEntries.length);
   const baseColumnMap = new Map(flattenTableColumns(baseColumns).map((column) => [column.key, column]));
@@ -4906,33 +4999,33 @@ function TableSelectedItemsPanel({
     /* @__PURE__ */ jsxs19("div", { className: "sia-table-selection-panel__header", children: [
       /* @__PURE__ */ jsxs19("strong", { children: [
         "\u5DF2\u9009 ",
-        /* @__PURE__ */ jsx19("span", { children: entries.length }),
+        /* @__PURE__ */ jsx20("span", { children: entries.length }),
         " \u9879"
       ] }),
-      /* @__PURE__ */ jsx19(Button, { size: "small", variant: "link", disabled: entries.length === 0, onClick: onClear, children: "\u6E05\u7A7A" })
+      /* @__PURE__ */ jsx20(Button, { size: "small", variant: "link", disabled: entries.length === 0, onClick: onClear, children: "\u6E05\u7A7A" })
     ] }),
-    /* @__PURE__ */ jsx19("div", { className: "sia-table-selection-panel__body", children: /* @__PURE__ */ jsxs19("table", { children: [
-      /* @__PURE__ */ jsx19("thead", { children: /* @__PURE__ */ jsxs19("tr", { children: [
-        columns.map((column) => /* @__PURE__ */ jsx19("th", { children: getColumnLabel(column) }, column.key)),
-        /* @__PURE__ */ jsx19("th", { "aria-label": "\u64CD\u4F5C" })
+    /* @__PURE__ */ jsx20("div", { className: "sia-table-selection-panel__body", children: /* @__PURE__ */ jsxs19("table", { children: [
+      /* @__PURE__ */ jsx20("thead", { children: /* @__PURE__ */ jsxs19("tr", { children: [
+        columns.map((column) => /* @__PURE__ */ jsx20("th", { children: getColumnLabel(column) }, column.key)),
+        /* @__PURE__ */ jsx20("th", { "aria-label": "\u64CD\u4F5C" })
       ] }) }),
-      /* @__PURE__ */ jsx19("tbody", { children: visibleEntries.map((entry, selectedIndex) => /* @__PURE__ */ jsxs19("tr", { children: [
+      /* @__PURE__ */ jsx20("tbody", { children: visibleEntries.map((entry, selectedIndex) => /* @__PURE__ */ jsxs19("tr", { children: [
         columns.map((column) => {
-          if (column.meta?.plugin === "index") return /* @__PURE__ */ jsx19("td", { children: entry.sourceIndex + 1 }, column.key);
+          if (column.meta?.plugin === "index") return /* @__PURE__ */ jsx20("td", { children: entry.sourceIndex + 1 }, column.key);
           const baseColumn = baseColumnMap.get(column.key) ?? column;
           const value = getTableValue(entry.record, baseColumn.dataIndex, baseColumn.code ?? baseColumn.key);
           const row = { key: entry.key, record: entry.record, sourceIndex: entry.sourceIndex, depth: 0, meta: {} };
           const content = baseColumn.render?.(value, entry.record, entry.sourceIndex, { row, rowIndex: entry.sourceIndex, column: baseColumn }) ?? value;
-          return /* @__PURE__ */ jsx19("td", { children: content }, column.key);
+          return /* @__PURE__ */ jsx20("td", { children: content }, column.key);
         }),
-        /* @__PURE__ */ jsx19("td", { children: /* @__PURE__ */ jsx19(Button, { size: "small", variant: "link", onClick: () => onRemove(entry.key), children: "\u53D6\u6D88" }) })
+        /* @__PURE__ */ jsx20("td", { children: /* @__PURE__ */ jsx20(Button, { size: "small", variant: "link", onClick: () => onRemove(entry.key), children: "\u53D6\u6D88" }) })
       ] }, entry.key)) })
     ] }) }),
     hiddenCount > 0 ? /* @__PURE__ */ jsxs19("div", { className: "sia-table-selection-panel__more", children: [
       "\u8FD8\u6709 ",
       hiddenCount,
       " \u9879\u672A\u5C55\u793A",
-      /* @__PURE__ */ jsx19(Button, { size: "small", variant: "link", onClick: () => setShowAll(true), children: "\u5C55\u793A\u5168\u90E8" })
+      /* @__PURE__ */ jsx20(Button, { size: "small", variant: "link", onClick: () => setShowAll(true), children: "\u5C55\u793A\u5168\u90E8" })
     ] }) : null
   ] });
 }
@@ -5010,12 +5103,12 @@ function createSelectionPlugin(options = {}) {
           const keys = selected(context);
           const allChecked = enabledRows.length > 0 && enabledRows.every((row) => keys.includes(row.key));
           const someChecked = enabledRows.some((row) => keys.includes(row.key));
-          return /* @__PURE__ */ jsx19(TableCheckbox, { label: "\u9009\u62E9\u5F53\u524D\u9875\u5168\u90E8\u884C", checked: allChecked, indeterminate: !allChecked && someChecked, onChange: (checked) => {
+          return /* @__PURE__ */ jsx20(TableCheckbox, { label: "\u9009\u62E9\u5F53\u524D\u9875\u5168\u90E8\u884C", checked: allChecked, indeterminate: !allChecked && someChecked, onChange: (checked) => {
             const pageKeys = enabledRows.map((row) => row.key);
             setKeys(checked ? [.../* @__PURE__ */ new Set([...keys, ...pageKeys])] : keys.filter((key) => !pageKeys.includes(key)), context);
           } });
         },
-        render: (_value, record, _index, info) => mode === "single" ? /* @__PURE__ */ jsx19(Radio2, { className: "sia-table__checkbox", value: String(info.row.key), "aria-label": `\u9009\u62E9\u7B2C ${info.rowIndex + 1} \u884C`, checked: selected(context).includes(info.row.key), disabled: options.getCheckboxDisabled?.(record), onClick: (event) => event.stopPropagation(), onChange: () => toggle(info.row.key, record, context) }) : /* @__PURE__ */ jsx19(TableCheckbox, { label: `\u9009\u62E9\u7B2C ${info.rowIndex + 1} \u884C`, checked: selected(context).includes(info.row.key), disabled: options.getCheckboxDisabled?.(record), onChange: (checked) => toggle(info.row.key, record, context, checked) })
+        render: (_value, record, _index, info) => mode === "single" ? /* @__PURE__ */ jsx20(Radio2, { className: "sia-table__checkbox", value: String(info.row.key), "aria-label": `\u9009\u62E9\u7B2C ${info.rowIndex + 1} \u884C`, checked: selected(context).includes(info.row.key), disabled: options.getCheckboxDisabled?.(record), onClick: (event) => event.stopPropagation(), onChange: () => toggle(info.row.key, record, context) }) : /* @__PURE__ */ jsx20(TableCheckbox, { label: `\u9009\u62E9\u7B2C ${info.rowIndex + 1} \u884C`, checked: selected(context).includes(info.row.key), disabled: options.getCheckboxDisabled?.(record), onChange: (checked) => toggle(info.row.key, record, context, checked) })
       };
       return [selectionColumn, ...columns];
     },
@@ -5043,7 +5136,7 @@ function createSelectionPlugin(options = {}) {
       const entries = entriesForKeys(keys, context);
       const columns = flattenTableColumns(context.columns).filter((column) => !column.hidden && column.meta?.plugin !== "selection").slice(0, Math.max(1, options.selectionPanelColumnCount ?? 4));
       return /* @__PURE__ */ jsxs19("span", { className: "sia-table__selection-footer", children: [
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx20(
           Popover,
           {
             placement: "top-start",
@@ -5051,7 +5144,7 @@ function createSelectionPlugin(options = {}) {
             open: context.state.panelOpen && entries.length > 0,
             onOpenChange: (panelOpen) => context.setState((state) => ({ ...state, panelOpen })),
             overlayClassName: "sia-table-selection-popover",
-            content: /* @__PURE__ */ jsx19(TableSelectedItemsPanel, { entries, columns, baseColumns: context.baseColumns, maxCount: Math.max(1, options.selectionPanelMaxCount ?? 100), onRemove: (key) => {
+            content: /* @__PURE__ */ jsx20(TableSelectedItemsPanel, { entries, columns, baseColumns: context.baseColumns, maxCount: Math.max(1, options.selectionPanelMaxCount ?? 100), onRemove: (key) => {
               setKeys(keys.filter((item) => item !== key), context);
             }, onClear: () => setKeys([], context) }),
             children: /* @__PURE__ */ jsxs19(Button, { className: "sia-table__selected-trigger", size: "small", variant: "link", disabled: entries.length === 0, children: [
@@ -5061,7 +5154,7 @@ function createSelectionPlugin(options = {}) {
             ] })
           }
         ),
-        mode === "multiple" && options.showPreserveSelectedRowKeys !== false ? /* @__PURE__ */ jsx19(Checkbox, { checked: preserving(context), onChange: (checked) => setPreserving(checked, context), children: "\u8DE8\u9875\u4FDD\u7559\u52FE\u9009" }) : null
+        mode === "multiple" && options.showPreserveSelectedRowKeys !== false ? /* @__PURE__ */ jsx20(Checkbox, { checked: preserving(context), onChange: (checked) => setPreserving(checked, context), children: "\u8DE8\u9875\u4FDD\u7559\u52FE\u9009" }) : null
       ] });
     },
     getApi(context) {
@@ -5106,13 +5199,13 @@ function createSortPlugin(options = {}) {
         return { ...column, renderHeader: (currentColumn, coreContext) => {
           const info = current(context);
           return /* @__PURE__ */ jsxs19("span", { className: "sia-table__sortable-header", children: [
-            /* @__PURE__ */ jsx19("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
+            /* @__PURE__ */ jsx20("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
             /* @__PURE__ */ jsxs19("button", { type: "button", className: "sia-table__sort-button", "aria-label": `\u5207\u6362${getColumnLabel(currentColumn)}\u6392\u5E8F`, onClick: (event) => {
               event.stopPropagation();
               cycle(field, context);
             }, children: [
-              /* @__PURE__ */ jsx19(Icon, { name: "chevron-up", size: 11, className: info?.field === field && info.order === "ascend" ? "is-active" : "" }),
-              /* @__PURE__ */ jsx19(Icon, { name: "chevron-down", size: 11, className: info?.field === field && info.order === "descend" ? "is-active" : "" })
+              /* @__PURE__ */ jsx20(Icon, { name: "chevron-up", size: 11, className: info?.field === field && info.order === "ascend" ? "is-active" : "" }),
+              /* @__PURE__ */ jsx20(Icon, { name: "chevron-down", size: 11, className: info?.field === field && info.order === "descend" ? "is-active" : "" })
             ] })
           ] });
         } };
@@ -5138,10 +5231,10 @@ function TableFilterControl({
   placeholder,
   onApply
 }) {
-  const [open, setOpen] = useState15(false);
-  const [draft, setDraft] = useState15(value);
+  const [open, setOpen] = useState16(false);
+  const [draft, setDraft] = useState16(value);
   const label = getColumnLabel(column);
-  useEffect11(() => {
+  useEffect12(() => {
     if (open) setDraft(value);
   }, [open, value]);
   const apply = (nextValue) => {
@@ -5149,8 +5242,8 @@ function TableFilterControl({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs19("span", { className: "sia-table__filter-header", children: [
-    /* @__PURE__ */ jsx19("span", { children: column.title ?? column.name ?? column.key }),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx20("span", { children: column.title ?? column.name ?? column.key }),
+    /* @__PURE__ */ jsx20(
       Popover,
       {
         open,
@@ -5158,7 +5251,7 @@ function TableFilterControl({
         placement: "bottom-end",
         overlayClassName: "sia-table-filter-popover",
         content: /* @__PURE__ */ jsxs19("div", { className: "sia-table-filter-panel", children: [
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             Input,
             {
               size: "small",
@@ -5173,14 +5266,14 @@ function TableFilterControl({
             }
           ),
           /* @__PURE__ */ jsxs19("div", { className: "sia-table-filter-panel__actions", children: [
-            /* @__PURE__ */ jsx19(Button, { size: "small", disabled: !value && !draft, onClick: () => {
+            /* @__PURE__ */ jsx20(Button, { size: "small", disabled: !value && !draft, onClick: () => {
               setDraft("");
               apply("");
             }, children: "\u6E05\u9664" }),
-            /* @__PURE__ */ jsx19(Button, { size: "small", variant: "primary", onClick: () => apply(draft), children: "\u5E94\u7528" })
+            /* @__PURE__ */ jsx20(Button, { size: "small", variant: "primary", onClick: () => apply(draft), children: "\u5E94\u7528" })
           ] })
         ] }),
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx20(
           "button",
           {
             type: "button",
@@ -5188,7 +5281,7 @@ function TableFilterControl({
             "aria-label": `\u7B5B\u9009${label}`,
             "aria-pressed": Boolean(value),
             onClick: (event) => event.stopPropagation(),
-            children: /* @__PURE__ */ jsx19(Icon, { name: "search", size: 13 })
+            children: /* @__PURE__ */ jsx20(Icon, { name: "search", size: 13 })
           }
         )
       }
@@ -5229,7 +5322,7 @@ function createFilterPlugin(options = {}) {
         return { ...column, renderHeader: (currentColumn, coreContext) => {
           const renderedColumn = { ...currentColumn, title: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title };
           const placeholder = typeof options.placeholder === "function" ? options.placeholder(currentColumn) : options.placeholder ?? `\u8F93\u5165${getColumnLabel(currentColumn)}\u7B5B\u9009`;
-          return /* @__PURE__ */ jsx19(TableFilterControl, { column: renderedColumn, value: current(context)[column.key] ?? "", placeholder, onApply: (value) => update({ ...current(context), [column.key]: value }, context) });
+          return /* @__PURE__ */ jsx20(TableFilterControl, { column: renderedColumn, value: current(context)[column.key] ?? "", placeholder, onApply: (value) => update({ ...current(context), [column.key]: value }, context) });
         } };
       });
     },
@@ -5282,7 +5375,7 @@ function createPaginationPlugin(options = {}) {
       const page = currentPage(context);
       const filteredCount = context.getPluginApi("filter")?.getFilteredRows().length;
       const totalRecords = options.totalCount ?? filteredCount ?? context.sourceData.length;
-      return /* @__PURE__ */ jsx19(
+      return /* @__PURE__ */ jsx20(
         Pagination,
         {
           className: "sia-table__pagination",
@@ -5371,10 +5464,10 @@ function createTreePlugin(options = {}) {
         wrapped = true;
         const previousRender = column.render;
         return { ...column, render: (value, record, index, info) => /* @__PURE__ */ jsxs19("span", { className: "sia-table__tree-cell", style: { paddingLeft: info.row.depth * 18 }, children: [
-          info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx19("button", { type: "button", className: "sia-table__tree-toggle", "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9", "aria-expanded": current(context).includes(info.row.key), onClick: (event) => {
+          info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx20("button", { type: "button", className: "sia-table__tree-toggle", "aria-label": current(context).includes(info.row.key) ? "\u6536\u8D77\u5B50\u8282\u70B9" : "\u5C55\u5F00\u5B50\u8282\u70B9", "aria-expanded": current(context).includes(info.row.key), onClick: (event) => {
             event.stopPropagation();
             toggle(info.row.key, context);
-          }, children: /* @__PURE__ */ jsx19(Icon, { name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right", size: 13 }) }) : /* @__PURE__ */ jsx19("span", { className: "sia-table__tree-placeholder" }),
+          }, children: /* @__PURE__ */ jsx20(Icon, { name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right", size: 13 }) }) : /* @__PURE__ */ jsx20("span", { className: "sia-table__tree-placeholder" }),
           previousRender ? previousRender(value, record, index, info) : value
         ] }) };
       });
@@ -5406,15 +5499,15 @@ function EditableTableCell({
   trigger
 }) {
   const config = typeof editable === "object" ? editable : { type: "input" };
-  const [editValue, setEditValue] = useState15(value);
-  const [saving, setSaving] = useState15(false);
-  const inputRef = useRef12(null);
-  const editorRef = useRef12(null);
-  const editValueRef = useRef12(value);
-  const savingRef = useRef12(false);
-  const saveRef = useRef12(async () => {
+  const [editValue, setEditValue] = useState16(value);
+  const [saving, setSaving] = useState16(false);
+  const inputRef = useRef13(null);
+  const editorRef = useRef13(null);
+  const editValueRef = useRef13(value);
+  const savingRef = useRef13(false);
+  const saveRef = useRef13(async () => {
   });
-  useEffect11(() => {
+  useEffect12(() => {
     if (!active) return;
     editValueRef.current = value;
     setEditValue(value);
@@ -5445,7 +5538,7 @@ function EditableTableCell({
     }
   }
   saveRef.current = save;
-  useEffect11(() => {
+  useEffect12(() => {
     if (!active || config.type === "select" || config.type === "custom") return;
     const handleOutsidePointerDown = (event) => {
       const target = event.target;
@@ -5456,14 +5549,14 @@ function EditableTableCell({
     return () => document.removeEventListener("pointerdown", handleOutsidePointerDown, true);
   }, [active, config.type]);
   if (!active) return /* @__PURE__ */ jsxs19("div", { className: "sia-table__editable-display", onClick: trigger === "click" ? onStart : void 0, onDoubleClick: trigger === "doubleClick" ? onStart : void 0, children: [
-    /* @__PURE__ */ jsx19("span", { children: content }),
-    /* @__PURE__ */ jsx19(Icon, { name: "edit", size: 13 })
+    /* @__PURE__ */ jsx20("span", { children: content }),
+    /* @__PURE__ */ jsx20(Icon, { name: "edit", size: 13 })
   ] });
   let editor;
   if (config.type === "custom" && config.editRender) {
     editor = config.editRender(record, (next) => void save(next), onCancel);
   } else if (config.type === "inputNumber") {
-    editor = /* @__PURE__ */ jsx19(InputNumber, { ref: inputRef, size: "small", value: typeof editValue === "number" ? editValue : null, onChange: updateEditValue, disabled: saving, onBlur: () => void save(), onKeyDown: (event) => {
+    editor = /* @__PURE__ */ jsx20(InputNumber, { ref: inputRef, size: "small", value: typeof editValue === "number" ? editValue : null, onChange: updateEditValue, disabled: saving, onBlur: () => void save(), onKeyDown: (event) => {
       if (event.key === "Enter") {
         const rawValue = event.currentTarget.value.trim();
         const nextValue = rawValue === "" ? null : Number(rawValue);
@@ -5472,17 +5565,17 @@ function EditableTableCell({
       if (event.key === "Escape") onCancel();
     } });
   } else if (config.type === "select") {
-    editor = /* @__PURE__ */ jsx19(Select, { size: "small", value: editValue, options: config.options ?? [], disabled: saving, onChange: (next) => {
+    editor = /* @__PURE__ */ jsx20(Select, { size: "small", value: editValue, options: config.options ?? [], disabled: saving, onChange: (next) => {
       updateEditValue(next);
       void save(next);
     } });
   } else {
-    editor = /* @__PURE__ */ jsx19(Input, { ref: inputRef, size: "small", value: String(editValue ?? ""), disabled: saving, suffix: saving ? /* @__PURE__ */ jsx19(Icon, { name: "loader", size: 13, spin: true }) : null, onChange: (event) => updateEditValue(event.target.value), onBlur: () => void save(), onKeyDown: (event) => {
+    editor = /* @__PURE__ */ jsx20(Input, { ref: inputRef, size: "small", value: String(editValue ?? ""), disabled: saving, suffix: saving ? /* @__PURE__ */ jsx20(Icon, { name: "loader", size: 13, spin: true }) : null, onChange: (event) => updateEditValue(event.target.value), onBlur: () => void save(), onKeyDown: (event) => {
       if (event.key === "Enter") void save();
       if (event.key === "Escape") onCancel();
     } });
   }
-  return /* @__PURE__ */ jsx19("div", { ref: editorRef, className: "sia-table__editor", children: editor });
+  return /* @__PURE__ */ jsx20("div", { ref: editorRef, className: "sia-table__editor", children: editor });
 }
 function createEditablePlugin(options = {}) {
   const trigger = options.trigger ?? "click";
@@ -5500,7 +5593,7 @@ function createEditablePlugin(options = {}) {
           const active = canEdit && context.state.editing?.rowKey === info.row.key && context.state.editing.columnKey === column.key;
           const content = previousRender ? previousRender(value, record, index, info) : value;
           if (!canEdit) return content;
-          return /* @__PURE__ */ jsx19(EditableTableCell, { active, editable: column.editable, value, record, content, trigger, onStart: () => context.setState({ editing: { rowKey: info.row.key, columnKey: column.key } }), onCancel: () => context.setState((state) => state.editing?.rowKey === info.row.key && state.editing.columnKey === column.key ? { editing: null } : state), onSave: async (nextValue) => await options.onCellChange?.(column.key, record, nextValue) !== false });
+          return /* @__PURE__ */ jsx20(EditableTableCell, { active, editable: column.editable, value, record, content, trigger, onStart: () => context.setState({ editing: { rowKey: info.row.key, columnKey: column.key } }), onCancel: () => context.setState((state) => state.editing?.rowKey === info.row.key && state.editing.columnKey === column.key ? { editing: null } : state), onSave: async (nextValue) => await options.onCellChange?.(column.key, record, nextValue) !== false });
         } };
       });
     },
@@ -5528,8 +5621,8 @@ function createResizePlugin(options = {}) {
         const width = configuredWidth ?? (autoWidth ? void 0 : 160);
         const previousHeader = column.renderHeader;
         return { ...column, autoWidth, width, renderHeader: (currentColumn, coreContext) => /* @__PURE__ */ jsxs19("span", { className: "sia-table__resizable-header", children: [
-          /* @__PURE__ */ jsx19("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
-          /* @__PURE__ */ jsx19("span", { className: "sia-table__resize-handle", role: "separator", "aria-label": `\u8C03\u6574${getColumnLabel(currentColumn)}\u5217\u5BBD`, onMouseDown: (event) => {
+          /* @__PURE__ */ jsx20("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
+          /* @__PURE__ */ jsx20("span", { className: "sia-table__resize-handle", role: "separator", "aria-label": `\u8C03\u6574${getColumnLabel(currentColumn)}\u5217\u5BBD`, onMouseDown: (event) => {
             if (event.button !== 0) return;
             event.preventDefault();
             event.stopPropagation();
@@ -5604,9 +5697,9 @@ function applyColumnSettingsToTree(columns, items) {
   return walk(columns).map((entry) => entry.column);
 }
 function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
-  const [draft, setDraft] = useState15(items);
-  const dragIndex = useRef12(null);
-  useEffect11(() => {
+  const [draft, setDraft] = useState16(items);
+  const dragIndex = useRef13(null);
+  useEffect12(() => {
     if (open) setDraft(items);
   }, [items, open]);
   const labels = new Map(flattenTableColumns(columns).map((column) => [column.key, getColumnLabel(column)]));
@@ -5625,11 +5718,11 @@ function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
   return /* @__PURE__ */ jsxs19(Drawer2, { open, title: "\u5217\u8BBE\u7F6E", size: 440, onOpenChange: (next) => {
     if (!next) onClose();
   }, footer: /* @__PURE__ */ jsxs19(Fragment6, { children: [
-    /* @__PURE__ */ jsx19(Button, { onClick: onClose, children: "\u53D6\u6D88" }),
-    /* @__PURE__ */ jsx19(Button, { variant: "primary", onClick: () => onApply(draft), children: "\u5E94\u7528" })
+    /* @__PURE__ */ jsx20(Button, { onClick: onClose, children: "\u53D6\u6D88" }),
+    /* @__PURE__ */ jsx20(Button, { variant: "primary", onClick: () => onApply(draft), children: "\u5E94\u7528" })
   ] }), children: [
     /* @__PURE__ */ jsxs19("label", { className: "sia-table-settings__all", children: [
-      /* @__PURE__ */ jsx19(TableCheckbox, { label: "\u5168\u9009\u5217", checked: visibleCount === draft.length && draft.length > 0, indeterminate: visibleCount > 0 && visibleCount < draft.length, onChange: (checked) => setDraft((previous) => previous.map((item) => ({ ...item, visible: checked }))) }),
+      /* @__PURE__ */ jsx20(TableCheckbox, { label: "\u5168\u9009\u5217", checked: visibleCount === draft.length && draft.length > 0, indeterminate: visibleCount > 0 && visibleCount < draft.length, onChange: (checked) => setDraft((previous) => previous.map((item) => ({ ...item, visible: checked }))) }),
       /* @__PURE__ */ jsxs19("span", { children: [
         "\u5168\u9009\uFF08",
         visibleCount,
@@ -5638,7 +5731,7 @@ function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
         "\uFF09"
       ] })
     ] }),
-    /* @__PURE__ */ jsx19("div", { className: "sia-table-settings__list", children: draft.map((item, index) => /* @__PURE__ */ jsxs19("div", { className: "sia-table-settings__item", draggable: true, onDragStart: () => {
+    /* @__PURE__ */ jsx20("div", { className: "sia-table-settings__list", children: draft.map((item, index) => /* @__PURE__ */ jsxs19("div", { className: "sia-table-settings__item", draggable: true, onDragStart: () => {
       dragIndex.current = index;
     }, onDragOver: (event) => event.preventDefault(), onDrop: () => {
       if (dragIndex.current == null || dragIndex.current === index) return;
@@ -5648,14 +5741,14 @@ function ColumnSettingPanel({ open, items, columns, onClose, onApply }) {
       setDraft(next.map((entry, order) => ({ ...entry, order })));
       dragIndex.current = null;
     }, children: [
-      /* @__PURE__ */ jsx19(Icon, { name: "menu", size: 15 }),
-      /* @__PURE__ */ jsx19(TableCheckbox, { label: `\u663E\u793A${labels.get(item.key) ?? item.key}\u5217`, checked: item.visible, onChange: (checked) => setDraft((previous) => previous.map((entry) => entry.key === item.key ? { ...entry, visible: checked } : entry)) }),
-      /* @__PURE__ */ jsx19("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
+      /* @__PURE__ */ jsx20(Icon, { name: "menu", size: 15 }),
+      /* @__PURE__ */ jsx20(TableCheckbox, { label: `\u663E\u793A${labels.get(item.key) ?? item.key}\u5217`, checked: item.visible, onChange: (checked) => setDraft((previous) => previous.map((entry) => entry.key === item.key ? { ...entry, visible: checked } : entry)) }),
+      /* @__PURE__ */ jsx20("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
       /* @__PURE__ */ jsxs19("div", { className: "sia-table-settings__actions", children: [
-        /* @__PURE__ */ jsx19(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ jsx19(Icon, { name: "arrow-up", size: 13 }), "aria-label": "\u4E0A\u79FB", disabled: index === 0, onClick: () => move(index, -1) }),
-        /* @__PURE__ */ jsx19(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ jsx19(Icon, { name: "arrow-down", size: 13 }), "aria-label": "\u4E0B\u79FB", disabled: index === draft.length - 1, onClick: () => move(index, 1) }),
-        /* @__PURE__ */ jsx19(Button, { size: "small", variant: item.fixed === "left" ? "primary" : "text", "aria-label": "\u5DE6\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "left" ? void 0 : "left"), children: "\u5DE6" }),
-        /* @__PURE__ */ jsx19(Button, { size: "small", variant: item.fixed === "right" ? "primary" : "text", "aria-label": "\u53F3\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "right" ? void 0 : "right"), children: "\u53F3" })
+        /* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ jsx20(Icon, { name: "arrow-up", size: 13 }), "aria-label": "\u4E0A\u79FB", disabled: index === 0, onClick: () => move(index, -1) }),
+        /* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", icon: /* @__PURE__ */ jsx20(Icon, { name: "arrow-down", size: 13 }), "aria-label": "\u4E0B\u79FB", disabled: index === draft.length - 1, onClick: () => move(index, 1) }),
+        /* @__PURE__ */ jsx20(Button, { size: "small", variant: item.fixed === "left" ? "primary" : "text", "aria-label": "\u5DE6\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "left" ? void 0 : "left"), children: "\u5DE6" }),
+        /* @__PURE__ */ jsx20(Button, { size: "small", variant: item.fixed === "right" ? "primary" : "text", "aria-label": "\u53F3\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "right" ? void 0 : "right"), children: "\u53F3" })
       ] })
     ] }, item.key)) })
   ] });
@@ -5701,8 +5794,31 @@ function createColumnSettingPlugin(options = {}) {
         void save({ columns: currentItems(context), pageSize, version: 1 });
       }
     },
-    renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */ jsx19(Button, { size: "small", variant: "text", className: "sia-table__toolbar-icon", icon: /* @__PURE__ */ jsx19(Icon, { name: "settings", size: 16 }), "aria-label": "\u6253\u5F00\u5217\u8BBE\u7F6E", title: "\u5217\u8BBE\u7F6E", onClick: () => context.setState((state) => ({ ...state, open: true })) }),
-    renderOverlay: (context) => /* @__PURE__ */ jsx19(ColumnSettingPanel, { open: context.state.open, items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
+    renderToolbarEnd: options.showButton === false ? void 0 : (context) => {
+      const exportApi = () => context.getPluginApi("export") ?? createExportPlugin().getApi({ ...context, state: void 0, setState: () => {
+      } });
+      const customItems = (options.menuItems ?? []).filter((item) => !(item.hidden === true || typeof item.hidden === "function" && item.hidden(context)));
+      const items = [
+        ...options.showExport === false ? [] : [
+          { key: "builtin:export", label: "\u8868\u683C\u5BFC\u51FA", icon: /* @__PURE__ */ jsx20(Icon, { name: "download", size: 18 }), disabled: exportApi().getRows().length === 0 },
+          { key: "builtin:divider", type: "divider" }
+        ],
+        { key: "builtin:columns", label: "\u5217\u8BBE\u7F6E", icon: /* @__PURE__ */ jsx20(Icon, { name: "settings", size: 18 }) },
+        ...customItems.map((item) => ({
+          key: "custom:" + item.key,
+          label: item.label,
+          icon: item.icon,
+          danger: item.danger,
+          disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
+        }))
+      ];
+      return /* @__PURE__ */ jsx20(Dropdown, { trigger: ["hover", "click"], placement: "bottomRight", popupClassName: "sia-table__settings-dropdown", menu: { items, onClick: ({ key }) => {
+        if (key === "builtin:export") void exportApi().download();
+        else if (key === "builtin:columns") context.setState((state) => ({ ...state, open: true }));
+        else void customItems.find((item) => "custom:" + item.key === key)?.onClick?.(context);
+      } }, children: /* @__PURE__ */ jsx20(Button, { size: "small", variant: "text", className: "sia-table__toolbar-icon", icon: /* @__PURE__ */ jsx20(Icon, { name: "settings", size: 16 }), "aria-label": "\u8868\u683C\u8BBE\u7F6E" }) });
+    },
+    renderOverlay: (context) => /* @__PURE__ */ jsx20(ColumnSettingPanel, { open: context.state.open, items: currentItems(context), columns: context.baseColumns, onClose: () => context.setState((state) => ({ ...state, open: false })), onApply: (items) => apply(items, context) }),
     getApi: (context) => ({ open: () => context.setState((state) => ({ ...state, open: true })), close: () => context.setState((state) => ({ ...state, open: false })), getSettings: () => currentItems(context), apply: (items) => apply(items, context) })
   };
 }
@@ -5725,10 +5841,10 @@ function createLocalStorageTableSettingsAdapter(prefix = "sia-table") {
   };
 }
 function ToolbarItems({ items, context }) {
-  return /* @__PURE__ */ jsx19(Fragment6, { children: items.map((item) => {
+  return /* @__PURE__ */ jsx20(Fragment6, { children: items.map((item) => {
     if (item.hidden === true || typeof item.hidden === "function" && item.hidden(context)) return null;
     const disabled = item.disabled === true || typeof item.disabled === "function" && item.disabled(context);
-    return /* @__PURE__ */ jsx19(Button, { size: "small", danger: item.danger, icon: item.icon, disabled, title: typeof item.label === "string" ? item.label : void 0, onClick: () => void item.onClick?.(context), children: item.label }, item.key);
+    return /* @__PURE__ */ jsx20(Button, { size: "small", danger: item.danger, icon: item.icon, disabled, title: typeof item.label === "string" ? item.label : void 0, onClick: () => void item.onClick?.(context), children: item.label }, item.key);
   }) });
 }
 function createToolbarPlugin(options) {
@@ -5739,14 +5855,14 @@ function createToolbarPlugin(options) {
     order: 5,
     renderToolbarStart: (context) => /* @__PURE__ */ jsxs19(Fragment6, { children: [
       options.start,
-      /* @__PURE__ */ jsx19(ToolbarItems, { items: items("start"), context })
+      /* @__PURE__ */ jsx20(ToolbarItems, { items: items("start"), context })
     ] }),
     renderToolbarEnd: (context) => /* @__PURE__ */ jsxs19(Fragment6, { children: [
       options.end,
-      /* @__PURE__ */ jsx19(ToolbarItems, { items: items("end"), context }),
+      /* @__PURE__ */ jsx20(ToolbarItems, { items: items("end"), context }),
       items("end", true).length > 0 ? /* @__PURE__ */ jsxs19("details", { className: "sia-table__toolbar-menu", children: [
-        /* @__PURE__ */ jsx19("summary", { "aria-label": "\u66F4\u591A\u8868\u683C\u64CD\u4F5C", children: /* @__PURE__ */ jsx19(Icon, { name: "more-horizontal", size: 16 }) }),
-        /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsx19(ToolbarItems, { items: items("end", true), context }) })
+        /* @__PURE__ */ jsx20("summary", { "aria-label": "\u66F4\u591A\u8868\u683C\u64CD\u4F5C", children: /* @__PURE__ */ jsx20(Icon, { name: "more-horizontal", size: 16 }) }),
+        /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsx20(ToolbarItems, { items: items("end", true), context }) })
       ] }) : null
     ] })
   };
@@ -5816,11 +5932,11 @@ function createExportPlugin(options = {}) {
   return {
     id: "export",
     order: 95,
-    renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */ jsx19(
+    renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */ jsx20(
       Button,
       {
         size: "small",
-        icon: /* @__PURE__ */ jsx19(Icon, { name: "download", size: 14 }),
+        icon: /* @__PURE__ */ jsx20(Icon, { name: "download", size: 14 }),
         disabled: getRows(context).length === 0,
         onClick: () => void download(context),
         children: options.buttonLabel ?? "\u5BFC\u51FA"
@@ -5835,7 +5951,7 @@ function createExportPlugin(options = {}) {
 }
 
 // src/components/Table/Table.tsx
-import { jsx as jsx20, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 var EMPTY_DATA = [];
 var EMPTY_COLUMNS = [];
 var EMPTY_PLUGINS = [];
@@ -5927,7 +6043,7 @@ var TableBodyRow = memo(function TableBodyRow2({
   onCellPointerDown,
   onCellPointerMove
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "tr",
     {
       className: `sia-table__row${striped && rowIndex % 2 === 1 ? " sia-table__row--striped" : ""} ${className}`.trim(),
@@ -5945,7 +6061,7 @@ var TableBodyRow = memo(function TableBodyRow2({
         const fixedStyle = fixed === "left" ? { left: leftOffsets.get(column.key) } : fixed === "right" ? { right: rightOffsets.get(column.key) } : void 0;
         const fixedEdgeClass = fixed === "left" && column.key === leftFixedEdgeKey ? " sia-table__cell--fixed-left-edge" : fixed === "right" && column.key === rightFixedEdgeKey ? " sia-table__cell--fixed-right-edge" : "";
         const autoWidthClass = column.autoWidth ? " sia-table__cell--auto-width" : "";
-        return /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx21(
           "td",
           {
             "data-column-key": column.key,
@@ -5959,10 +6075,10 @@ var TableBodyRow = memo(function TableBodyRow2({
             onContextMenu: (event) => onCellContextMenu(column, event),
             onPointerDown: (event) => onCellPointerDown(column, event),
             onPointerMove: (event) => onCellPointerMove(column, event),
-            children: /* @__PURE__ */ jsx20(
-              "div",
+            children: /* @__PURE__ */ jsx21(
+              TableCellContent,
               {
-                className: "sia-table__cell-content",
+                ellipsis: column.ellipsis !== false,
                 title: column.showTitle !== false && column.ellipsis !== false && typeof value === "string" ? value : void 0,
                 children: pluginCellProps.content !== void 0 ? pluginCellProps.content : column.render ? column.render(value, row.record, row.sourceIndex, { row, rowIndex, column }) : value
               }
@@ -5986,6 +6102,7 @@ function TableInner(props, ref) {
     tableHeight,
     size = "medium",
     bordered = true,
+    toolbarBordered = false,
     striped = true,
     virtual,
     virtualThreshold = 100,
@@ -6002,15 +6119,16 @@ function TableInner(props, ref) {
     style,
     ...htmlProps
   } = props;
-  const rootRef = useRef13(null);
-  const scrollRef = useRef13(null);
-  const tableRef = useRef13(null);
-  const scrollbarDragRef = useRef13(null);
-  const [internalLoading, setInternalLoading] = useState16(false);
-  const [scrollTop, setScrollTop] = useState16(0);
-  const [viewportHeight, setViewportHeight] = useState16(420);
-  const [viewportWidth, setViewportWidth] = useState16(0);
-  const [autoColumnWidths, setAutoColumnWidths] = useState16({});
+  const rootRef = useRef14(null);
+  const scrollRef = useRef14(null);
+  const tableRef = useRef14(null);
+  useScrollbarProximity();
+  const scrollbarDragRef = useRef14(null);
+  const [internalLoading, setInternalLoading] = useState17(false);
+  const [scrollTop, setScrollTop] = useState17(0);
+  const [viewportHeight, setViewportHeight] = useState17(420);
+  const [viewportWidth, setViewportWidth] = useState17(0);
+  const [autoColumnWidths, setAutoColumnWidths] = useState17({});
   const getRowKey = useCallback2((record, index) => typeof rowKey === "function" ? rowKey(record, index) : record[String(rowKey)] ?? index, [rowKey]);
   const builtInResizePlugin = useMemo9(() => createResizePlugin(), []);
   const builtInHighlightPlugin = useMemo9(() => createHighlightPlugin(), []);
@@ -6021,14 +6139,14 @@ function TableInner(props, ref) {
     return plugins;
   }, [builtInHighlightPlugin, builtInResizePlugin, providedPlugins, resizable]);
   const sortedPlugins = useMemo9(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
-  const pluginsByIdRef = useRef13(/* @__PURE__ */ new Map());
+  const pluginsByIdRef = useRef14(/* @__PURE__ */ new Map());
   pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
-  const [pluginStates, setPluginStates] = useState16(() => Object.fromEntries(
+  const [pluginStates, setPluginStates] = useState17(() => Object.fromEntries(
     sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
   ));
-  const pluginApisRef = useRef13({});
-  const contextsRef = useRef13(/* @__PURE__ */ new Map());
-  const mountedPluginsRef = useRef13(/* @__PURE__ */ new Map());
+  const pluginApisRef = useRef14({});
+  const contextsRef = useRef14(/* @__PURE__ */ new Map());
+  const mountedPluginsRef = useRef14(/* @__PURE__ */ new Map());
   const pipeline = { columns: baseColumns, rows: createTableRows(dataSource, getRowKey) };
   const nextApis = {};
   const contexts = /* @__PURE__ */ new Map();
@@ -6085,7 +6203,7 @@ function TableInner(props, ref) {
   });
   pluginApisRef.current = nextApis;
   contextsRef.current = contexts;
-  useEffect12(() => {
+  useEffect13(() => {
     const activePlugins2 = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
     for (const [pluginId, mounted] of mountedPluginsRef.current) {
       if (activePlugins2.get(pluginId) === mounted.plugin) continue;
@@ -6097,7 +6215,7 @@ function TableInner(props, ref) {
       mountedPluginsRef.current.set(plugin.id, { plugin, cleanup: plugin.onMount(contextsRef.current.get(plugin.id)) });
     }
   }, [sortedPlugins]);
-  useEffect12(() => () => {
+  useEffect13(() => () => {
     for (const mounted of mountedPluginsRef.current.values()) mounted.cleanup?.();
     mountedPluginsRef.current.clear();
   }, []);
@@ -6109,8 +6227,10 @@ function TableInner(props, ref) {
     if (element.scrollLeft > maxLeft) element.scrollLeft = maxLeft > 1 ? maxLeft : 0;
     const logicalScrollLeft = Math.min(element.scrollLeft, maxLeft);
     const maxTop = Math.max(0, element.scrollHeight - element.clientHeight);
-    const horizontalTrack = Math.max(0, element.clientWidth - 8);
-    const verticalTrack = Math.max(0, element.clientHeight - 8);
+    root.dataset.overflowX = String(maxLeft > 1);
+    root.dataset.overflowY = String(maxTop > 1);
+    const horizontalTrack = root.querySelector(".sia-table__scrollbar--horizontal")?.clientWidth ?? 0;
+    const verticalTrack = root.querySelector(".sia-table__scrollbar--vertical")?.clientHeight ?? 0;
     const horizontalThumb = maxLeft > 1 ? Math.min(horizontalTrack, Math.max(36, horizontalTrack * element.clientWidth / horizontalContentWidth)) : 0;
     const verticalThumb = maxTop > 1 ? Math.min(verticalTrack, Math.max(36, verticalTrack * element.clientHeight / element.scrollHeight)) : 0;
     const horizontalPosition = maxLeft > 0 ? logicalScrollLeft / maxLeft * Math.max(0, horizontalTrack - horizontalThumb) : 0;
@@ -6135,7 +6255,7 @@ function TableInner(props, ref) {
     root.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
     root.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
   }, []);
-  useEffect12(() => {
+  useEffect13(() => {
     const element = scrollRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(() => {
@@ -6148,13 +6268,13 @@ function TableInner(props, ref) {
     updateScrollMetrics();
     return () => observer.disconnect();
   }, [updateScrollMetrics]);
-  useEffect12(() => {
+  useEffect13(() => {
     updateScrollMetrics();
   });
   const orderedColumns = useMemo9(() => sortTableColumnsByFixed(pipeline.columns), [pipeline.columns]);
   const leafColumns = useMemo9(() => flattenTableColumns(orderedColumns), [orderedColumns]);
   const headerRows = useMemo9(() => buildHeaderRows(orderedColumns), [orderedColumns]);
-  useEffect12(() => {
+  useEffect13(() => {
     const autoWidthColumns = leafColumns.filter((column) => column.autoWidth && resizedWidths[column.key] === void 0);
     const root = rootRef.current;
     if (!root || autoWidthColumns.length === 0) return;
@@ -6224,20 +6344,20 @@ function TableInner(props, ref) {
   const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
   const toolbarStart = sortedPlugins.map((plugin) => {
     const content = plugin.renderToolbarStart?.(getContext(plugin));
-    return content ? /* @__PURE__ */ jsx20(Fragment7, { children: content }, `toolbar-start-${plugin.id}`) : null;
+    return content ? /* @__PURE__ */ jsx21(Fragment7, { children: content }, `toolbar-start-${plugin.id}`) : null;
   }).filter(Boolean);
   const toolbarEnd = sortedPlugins.map((plugin) => {
     const content = plugin.renderToolbarEnd?.(getContext(plugin));
-    return content ? /* @__PURE__ */ jsx20(Fragment7, { children: content }, `toolbar-end-${plugin.id}`) : null;
+    return content ? /* @__PURE__ */ jsx21(Fragment7, { children: content }, `toolbar-end-${plugin.id}`) : null;
   }).filter(Boolean);
   const summaries = sortedPlugins.flatMap((plugin) => plugin.renderSummary?.(getContext(plugin)) ?? []);
   const footers = sortedPlugins.map((plugin) => {
     const content = plugin.renderFooter?.(getContext(plugin));
-    return content ? /* @__PURE__ */ jsx20(Fragment7, { children: content }, `footer-${plugin.id}`) : null;
+    return content ? /* @__PURE__ */ jsx21(Fragment7, { children: content }, `footer-${plugin.id}`) : null;
   }).filter(Boolean);
   const overlays = sortedPlugins.map((plugin) => {
     const content = plugin.renderOverlay?.(getContext(plugin));
-    return content ? /* @__PURE__ */ jsx20(Fragment7, { children: content }, `overlay-${plugin.id}`) : null;
+    return content ? /* @__PURE__ */ jsx21(Fragment7, { children: content }, `overlay-${plugin.id}`) : null;
   }).filter(Boolean);
   const hasToolbar = toolbarStart.length > 0 || toolbarEnd.length > 0;
   const effectiveHeight = height ?? tableHeight ?? (shouldVirtualize ? 420 : void 0);
@@ -6251,16 +6371,26 @@ function TableInner(props, ref) {
     if (shouldVirtualize) setScrollTop(element.scrollTop);
     updateScrollMetrics();
   }, [shouldVirtualize, updateScrollMetrics]);
-  const handleScrollbarPointerDown = useCallback2((axis, event) => {
+  const handleScrollbarPointerDown = useCallback2((axis, event, track = event.currentTarget) => {
     const element = scrollRef.current;
-    const track = event.currentTarget.parentElement;
-    if (!element || !track) return;
+    const thumb = track.firstElementChild;
+    if (!element || !thumb || event.button !== 0) return;
     event.preventDefault();
     event.stopPropagation();
-    event.currentTarget.setPointerCapture(event.pointerId);
+    track.setPointerCapture(event.pointerId);
     const trackLength = axis === "x" ? track.clientWidth : track.clientHeight;
-    const thumbLength = axis === "x" ? event.currentTarget.offsetWidth : event.currentTarget.offsetHeight;
+    const thumbLength = axis === "x" ? thumb.offsetWidth : thumb.offsetHeight;
     const maxScroll = axis === "x" ? getTableHorizontalMetrics(element, tableRef.current).maxLeft : element.scrollHeight - element.clientHeight;
+    const thumbRect = thumb.getBoundingClientRect();
+    const coordinate = axis === "x" ? event.clientX : event.clientY;
+    const thumbStart = axis === "x" ? thumbRect.left : thumbRect.top;
+    if (coordinate < thumbStart || coordinate > thumbStart + thumbLength) {
+      const trackRect = track.getBoundingClientRect();
+      const trackStart = axis === "x" ? trackRect.left : trackRect.top;
+      const ratio = Math.max(0, Math.min(1, (coordinate - trackStart - thumbLength / 2) / Math.max(1, trackLength - thumbLength)));
+      if (axis === "x") element.scrollLeft = ratio * maxScroll;
+      else element.scrollTop = ratio * maxScroll;
+    }
     scrollbarDragRef.current = {
       axis,
       pointerId: event.pointerId,
@@ -6324,8 +6454,8 @@ function TableInner(props, ref) {
   function renderHeaderContent(column, content) {
     if (column.description === void 0 || column.description === null) return content;
     return /* @__PURE__ */ jsxs20("span", { className: "sia-table__header-label", children: [
-      /* @__PURE__ */ jsx20("span", { className: "sia-table__header-label-content", children: content }),
-      /* @__PURE__ */ jsx20(Tooltip, { title: column.description, placement: "top", trigger: ["hover", "focus"], children: /* @__PURE__ */ jsx20("button", { type: "button", className: "sia-table__header-description", "aria-label": `${column.name ?? column.key}\u5217\u8BF4\u660E`, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx20(Icon, { name: "info", size: 14 }) }) })
+      /* @__PURE__ */ jsx21("span", { className: "sia-table__header-label-content", children: content }),
+      /* @__PURE__ */ jsx21(Tooltip, { title: column.description, placement: "top", trigger: ["hover", "focus"], children: /* @__PURE__ */ jsx21("button", { type: "button", className: "sia-table__header-description", "aria-label": `${column.name ?? column.key}\u5217\u8BF4\u660E`, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx21(Icon, { name: "info", size: 14 }) }) })
     ] });
   }
   function getPluginCellProps(row, column) {
@@ -6353,45 +6483,94 @@ function TableInner(props, ref) {
       };
     }, {});
   }
+  function scrollbarAtPoint(event) {
+    const tracks = rootRef.current?.querySelectorAll(".sia-table__scrollbar");
+    for (const track of tracks ?? []) {
+      if (track.closest(".sia-table") !== rootRef.current) continue;
+      const rect = track.getBoundingClientRect();
+      if (rect.width > 0 && rect.height > 0 && event.clientX >= rect.left && event.clientX < rect.right && event.clientY >= rect.top && event.clientY < rect.bottom) {
+        return { track, axis: track.classList.contains("sia-table__scrollbar--vertical") ? "y" : "x" };
+      }
+    }
+  }
   function renderSummaryRow(summary) {
     let labelRendered = false;
-    return /* @__PURE__ */ jsx20("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
+    return /* @__PURE__ */ jsx21("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
       const value = summary.values[column.key];
       const content = value !== void 0 ? value : !labelRendered && summary.label !== void 0 ? (labelRendered = true, summary.label) : null;
       const fixed = normalizeFixed(column.fixed);
       const fixedEdgeClass = fixed === "left" && column.key === leftFixedEdgeKey ? " sia-table__cell--fixed-left-edge" : fixed === "right" && column.key === rightFixedEdgeKey ? " sia-table__cell--fixed-right-edge" : "";
       const autoWidthClass = column.autoWidth ? " sia-table__cell--auto-width" : "";
-      return /* @__PURE__ */ jsx20("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__summary-cell${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: content }, column.key);
+      return /* @__PURE__ */ jsx21("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__summary-cell${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: content }, column.key);
     }) }, summary.key);
   }
   return /* @__PURE__ */ jsxs20(
     "div",
     {
       ref: rootRef,
-      className: `sia-table sia-table--${size}${bordered ? " sia-table--bordered" : ""} ${className}`.trim(),
+      className: `sia-table sia-table--${size}${bordered ? " sia-table--bordered" : ""}${hasToolbar && !toolbarBordered ? " sia-table--borderless-toolbar" : ""} ${className}`.trim(),
       style: rootStyle,
       "data-has-fixed-left": left > 0,
       "data-has-fixed-right": right > 0,
       "data-scrolled-left": "false",
       "data-scrolled-right": "true",
       ...htmlProps,
+      onPointerDownCapture: (event) => {
+        htmlProps.onPointerDownCapture?.(event);
+        if (event.defaultPrevented || loading || internalLoading) return;
+        const hit = scrollbarAtPoint(event);
+        if (hit) handleScrollbarPointerDown(hit.axis, event, hit.track);
+      },
+      onPointerMoveCapture: (event) => {
+        htmlProps.onPointerMoveCapture?.(event);
+        const hit = scrollbarAtPoint(event);
+        rootRef.current?.querySelectorAll(".sia-table__scrollbar").forEach((track) => {
+          const hovered = track === hit?.track;
+          if (hovered !== track.hasAttribute("data-pointer-hover")) track.toggleAttribute("data-pointer-hover", hovered);
+        });
+        if (hit || scrollbarDragRef.current) {
+          handleScrollbarPointerMove(event);
+          event.stopPropagation();
+        }
+      },
+      onPointerLeave: (event) => {
+        htmlProps.onPointerLeave?.(event);
+        rootRef.current?.querySelectorAll("[data-pointer-hover]").forEach((track) => track.removeAttribute("data-pointer-hover"));
+      },
+      onClickCapture: (event) => {
+        if (scrollbarAtPoint(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        htmlProps.onClickCapture?.(event);
+      },
+      onDoubleClickCapture: (event) => {
+        if (scrollbarAtPoint(event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        htmlProps.onDoubleClickCapture?.(event);
+      },
       children: [
         hasToolbar ? /* @__PURE__ */ jsxs20("div", { className: "sia-table__toolbar", children: [
-          /* @__PURE__ */ jsx20("div", { children: toolbarStart }),
-          /* @__PURE__ */ jsx20("div", { children: toolbarEnd })
+          /* @__PURE__ */ jsx21("div", { children: toolbarStart }),
+          /* @__PURE__ */ jsx21("div", { children: toolbarEnd })
         ] }) : null,
         /* @__PURE__ */ jsxs20("div", { className: "sia-table__viewport-wrap", children: [
-          /* @__PURE__ */ jsx20("div", { className: "sia-table__viewport", ref: scrollRef, onScroll: handleScroll, children: /* @__PURE__ */ jsxs20("table", { ref: tableRef, className: "sia-table__element", style: { width: Math.max(totalWidth, 1), ...manualColumnLayout ? { minWidth: 0 } : {}, ...tableStyle }, children: [
-            /* @__PURE__ */ jsx20("colgroup", { children: leafColumns.map((column) => /* @__PURE__ */ jsx20("col", { "data-column-key": column.key, style: { width: columnWidths.get(column.key) ?? DEFAULT_WIDTH } }, column.key)) }),
-            /* @__PURE__ */ jsx20("thead", { className: stickyHeader ? "sia-table__head sia-table__head--sticky" : "sia-table__head", children: headerRows.map((headerRow, depth) => /* @__PURE__ */ jsx20("tr", { children: headerRow.map((cell) => {
+          /* @__PURE__ */ jsx21("div", { className: "sia-table__viewport", ref: scrollRef, onScroll: handleScroll, children: /* @__PURE__ */ jsxs20("table", { ref: tableRef, className: "sia-table__element", style: { width: Math.max(totalWidth, 1), ...manualColumnLayout ? { minWidth: 0 } : {}, ...tableStyle }, children: [
+            /* @__PURE__ */ jsx21("colgroup", { children: leafColumns.map((column) => /* @__PURE__ */ jsx21("col", { "data-column-key": column.key, style: { width: columnWidths.get(column.key) ?? DEFAULT_WIDTH } }, column.key)) }),
+            /* @__PURE__ */ jsx21("thead", { className: stickyHeader ? "sia-table__head sia-table__head--sticky" : "sia-table__head", children: headerRows.map((headerRow, depth) => /* @__PURE__ */ jsx21("tr", { children: headerRow.map((cell) => {
               const fixed = cell.leaf ? normalizeFixed(cell.column.fixed) : void 0;
               const pluginHeaderProps = getPluginHeaderCellProps(cell.column);
               const fixedEdgeClass = fixed === "left" && cell.column.key === leftFixedEdgeKey ? " sia-table__cell--fixed-left-edge" : fixed === "right" && cell.column.key === rightFixedEdgeKey ? " sia-table__cell--fixed-right-edge" : "";
               const autoWidthClass = cell.column.autoWidth ? " sia-table__cell--auto-width" : "";
-              return /* @__PURE__ */ jsx20(
+              return /* @__PURE__ */ jsx21(
                 "th",
                 {
                   "data-column-key": cell.column.key,
+                  "data-last-leaf-column": cell.leaf && cell.column.key === leafColumns[leafColumns.length - 1]?.key || void 0,
                   colSpan: cell.colSpan,
                   rowSpan: cell.rowSpan,
                   className: `sia-table__header-cell sia-table__cell--${cell.column.align ?? "left"}${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass} ${cell.column.headerClassName ?? ""} ${pluginHeaderProps.className ?? ""}`.trim(),
@@ -6409,12 +6588,12 @@ function TableInner(props, ref) {
               );
             }) }, depth)) }),
             /* @__PURE__ */ jsxs20("tbody", { children: [
-              topSpacer > 0 ? /* @__PURE__ */ jsx20("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx20("td", { colSpan: leafColumns.length, style: { height: topSpacer, padding: 0, border: 0 } }) }) : null,
+              topSpacer > 0 ? /* @__PURE__ */ jsx21("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx21("td", { colSpan: leafColumns.length, style: { height: topSpacer, padding: 0, border: 0 } }) }) : null,
               renderedRows.map((row, offset) => {
                 const rowIndex = startIndex + offset;
                 const pluginClasses = sortedPlugins.map((plugin) => plugin.getRowClassName?.(row, getContext(plugin))).filter(Boolean).join(" ");
                 const customClass = typeof rowClassName === "function" ? rowClassName(row.record, row.sourceIndex) : rowClassName ?? "";
-                return /* @__PURE__ */ jsx20(
+                return /* @__PURE__ */ jsx21(
                   TableBodyRow,
                   {
                     row,
@@ -6461,36 +6640,44 @@ function TableInner(props, ref) {
                   row.key
                 );
               }),
-              bottomSpacer > 0 ? /* @__PURE__ */ jsx20("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx20("td", { colSpan: leafColumns.length, style: { height: bottomSpacer, padding: 0, border: 0 } }) }) : null
+              bottomSpacer > 0 ? /* @__PURE__ */ jsx21("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx21("td", { colSpan: leafColumns.length, style: { height: bottomSpacer, padding: 0, border: 0 } }) }) : null
             ] }),
-            summaries.length > 0 ? /* @__PURE__ */ jsx20("tfoot", { className: "sia-table__summary", children: summaries.map(renderSummaryRow) }) : null
+            summaries.length > 0 ? /* @__PURE__ */ jsx21("tfoot", { className: "sia-table__summary", children: summaries.map(renderSummaryRow) }) : null
           ] }) }),
-          pipeline.rows.length === 0 ? /* @__PURE__ */ jsx20("div", { className: "sia-table__empty", role: "status", children: emptyText }) : null,
-          /* @__PURE__ */ jsx20("div", { className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--horizontal", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(
+          pipeline.rows.length === 0 ? /* @__PURE__ */ jsx21("div", { className: "sia-table__empty", role: "status", children: emptyText }) : null,
+          /* @__PURE__ */ jsx21(
             "div",
             {
-              className: "sia-table__scrollbar-thumb",
+              className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--horizontal",
+              "aria-hidden": "true",
               onPointerDown: (event) => handleScrollbarPointerDown("x", event),
+              onClick: (event) => event.stopPropagation(),
+              onDoubleClick: (event) => event.stopPropagation(),
               onPointerMove: handleScrollbarPointerMove,
               onPointerUp: handleScrollbarPointerEnd,
-              onPointerCancel: handleScrollbarPointerEnd
+              onPointerCancel: handleScrollbarPointerEnd,
+              children: /* @__PURE__ */ jsx21("div", { className: "sia-table__scrollbar-thumb" })
             }
-          ) }),
-          /* @__PURE__ */ jsx20("div", { className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--vertical", "aria-hidden": "true", children: /* @__PURE__ */ jsx20(
+          ),
+          /* @__PURE__ */ jsx21(
             "div",
             {
-              className: "sia-table__scrollbar-thumb",
+              className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--vertical",
+              "aria-hidden": "true",
               onPointerDown: (event) => handleScrollbarPointerDown("y", event),
+              onClick: (event) => event.stopPropagation(),
+              onDoubleClick: (event) => event.stopPropagation(),
               onPointerMove: handleScrollbarPointerMove,
               onPointerUp: handleScrollbarPointerEnd,
-              onPointerCancel: handleScrollbarPointerEnd
+              onPointerCancel: handleScrollbarPointerEnd,
+              children: /* @__PURE__ */ jsx21("div", { className: "sia-table__scrollbar-thumb" })
             }
-          ) })
+          )
         ] }),
-        footers.length > 0 ? /* @__PURE__ */ jsx20("div", { className: "sia-table__footer", children: footers }) : null,
+        footers.length > 0 ? /* @__PURE__ */ jsx21("div", { className: "sia-table__footer", children: footers }) : null,
         loading || internalLoading ? /* @__PURE__ */ jsxs20("div", { className: "sia-table__loading", role: "status", children: [
-          /* @__PURE__ */ jsx20(Icon, { name: "loader", size: 22, spin: true }),
-          /* @__PURE__ */ jsx20("span", { children: "\u52A0\u8F7D\u4E2D" })
+          /* @__PURE__ */ jsx21(Icon, { name: "loader", size: 22, spin: true }),
+          /* @__PURE__ */ jsx21("span", { children: "\u52A0\u8F7D\u4E2D" })
         ] }) : null,
         overlays
       ]
@@ -6501,7 +6688,7 @@ var Table = forwardRef5(TableInner);
 
 // src/components/ThemeSwitch.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 var ThemeSwitch = forwardRef6(function ThemeSwitch2({
   checked,
   onCheckedChange,
@@ -6527,19 +6714,19 @@ var ThemeSwitch = forwardRef6(function ThemeSwitch2({
       onClick: handleClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsx21("span", { className: "sia-theme-switch__selection", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx21("span", { className: `sia-theme-switch__icon${checked ? "" : " is-active"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxs21("svg", { viewBox: "0 0 24 24", children: [
-          /* @__PURE__ */ jsx21("circle", { cx: "12", cy: "12", r: "3.5" }),
-          /* @__PURE__ */ jsx21("path", { d: "M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4" })
+        /* @__PURE__ */ jsx22("span", { className: "sia-theme-switch__selection", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx22("span", { className: `sia-theme-switch__icon${checked ? "" : " is-active"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxs21("svg", { viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "3.5" }),
+          /* @__PURE__ */ jsx22("path", { d: "M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M18.7 5.3l-1.4 1.4M6.7 17.3l-1.4 1.4" })
         ] }) }),
-        /* @__PURE__ */ jsx21("span", { className: `sia-theme-switch__icon${checked ? " is-active" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx21("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { d: "M20 15.2A8 8 0 0 1 8.8 4 8.5 8.5 0 1 0 20 15.2Z" }) }) })
+        /* @__PURE__ */ jsx22("span", { className: `sia-theme-switch__icon${checked ? " is-active" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx22("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx22("path", { d: "M20 15.2A8 8 0 0 1 8.8 4 8.5 8.5 0 1 0 20 15.2Z" }) }) })
       ]
     }
   );
 });
 
 // src/components/FloatingScrollbarProvider.tsx
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect14 } from "react";
 var scrollableOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
 var clippingOverflow = /* @__PURE__ */ new Set(["auto", "scroll", "overlay", "hidden", "clip"]);
 function isRootScroller(target) {
@@ -6602,7 +6789,8 @@ function createTrack(axis) {
   return { track, thumb };
 }
 function FloatingScrollbarProvider({ disabled = false }) {
-  useEffect13(() => {
+  useScrollbarProximity();
+  useEffect14(() => {
     if (disabled) return;
     const layer = document.createElement("div");
     layer.className = "sia-floating-scrollbar-layer";
@@ -6632,7 +6820,7 @@ function FloatingScrollbarProvider({ disabled = false }) {
       const hasHorizontal = canScroll(target, "horizontal");
       const hasVertical = canScroll(target, "vertical");
       const rect = visibleRect(target);
-      const thickness = 8;
+      const thickness = 10;
       horizontalTrack.hidden = !hasHorizontal || rect.width <= thickness || rect.height <= 0;
       verticalTrack.hidden = !hasVertical || rect.height <= thickness || rect.width <= 0;
       if (!horizontalTrack.hidden) {
@@ -6871,8 +7059,8 @@ function applySiaTheme(mode, target = document.documentElement) {
 }
 
 // src/components/SelectionPanel.tsx
-import { useEffect as useEffect14, useId as useId7, useMemo as useMemo10, useRef as useRef14, useState as useState17 } from "react";
-import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useEffect as useEffect15, useId as useId7, useMemo as useMemo10, useRef as useRef15, useState as useState18 } from "react";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function SelectionPanel({
   options,
   value,
@@ -6890,11 +7078,11 @@ function SelectionPanel({
   maxHeight = 250,
   autoFocusSearch = false
 }) {
-  const [localSearch, setLocalSearch] = useState17("");
+  const [localSearch, setLocalSearch] = useState18("");
   const search = searchValue ?? localSearch;
-  const [scrollTop, setScrollTop] = useState17(0);
-  const [active, setActive] = useState17();
-  const listRef = useRef14(null);
+  const [scrollTop, setScrollTop] = useState18(0);
+  const [active, setActive] = useState18();
+  const listRef = useRef15(null);
   const id = useId7();
   const selected = useMemo10(() => new Set(value), [value]);
   const count = Math.max(1, Math.floor(columns));
@@ -6932,7 +7120,7 @@ function SelectionPanel({
   const virtual = filtered.length > 100;
   const renderedRows = virtual ? rows.filter((row) => row.top + row.height >= scrollTop - 100 && row.top <= scrollTop + maxHeight + 100) : rows;
   const enabled = filtered.filter((option) => !option.disabled && option.optionType !== "divider");
-  useEffect14(() => {
+  useEffect15(() => {
     setScrollTop(0);
     if (listRef.current) listRef.current.scrollTop = 0;
     setActive(void 0);
@@ -6954,7 +7142,7 @@ function SelectionPanel({
     onChange([...retained, ...add]);
   }
   return /* @__PURE__ */ jsxs22("div", { className: "sia-selection-panel", children: [
-    showSearch && /* @__PURE__ */ jsx22(
+    showSearch && /* @__PURE__ */ jsx23(
       Input,
       {
         "aria-label": "\u641C\u7D22\u9009\u9879",
@@ -6969,16 +7157,16 @@ function SelectionPanel({
       }
     ),
     multiple && /* @__PURE__ */ jsxs22("div", { className: "sia-selection-panel__actions", children: [
-      /* @__PURE__ */ jsx22(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
-      /* @__PURE__ */ jsx22(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
-      /* @__PURE__ */ jsx22(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
+      /* @__PURE__ */ jsx23(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("all"), children: "\u5168\u9009" }),
+      /* @__PURE__ */ jsx23(Button, { variant: "link", size: "small", disabled: disabled || loading || !enabled.length, onClick: () => batch("invert"), children: "\u53CD\u9009" }),
+      /* @__PURE__ */ jsx23(Button, { variant: "link", size: "small", disabled: disabled || loading || !value.length, onClick: () => batch("clear"), children: "\u6E05\u7A7A" }),
       /* @__PURE__ */ jsxs22("span", { children: [
         "\u5DF2\u9009 ",
         value.length,
         " \u9879"
       ] })
     ] }),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(
       "div",
       {
         ref: listRef,
@@ -7008,12 +7196,12 @@ function SelectionPanel({
             toggle(enabled[index]);
           }
         },
-        children: loading ? /* @__PURE__ */ jsx22("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ jsx22("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ jsx22("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ jsx22(
+        children: loading ? /* @__PURE__ */ jsx23("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ jsx23("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ jsx23("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ jsx23(
           "div",
           {
             className: row.title !== void 0 ? "sia-selection-panel__group" : "sia-selection-panel__row",
             style: { position: "absolute", top: row.top, height: row.height, width: "100%", gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` },
-            children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ jsx22("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ jsx22(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ jsxs22(
+            children: row.title ?? row.items?.map((option, index) => option.optionType === "divider" ? /* @__PURE__ */ jsx23("div", { role: "separator", className: "sia-selection-panel__divider" }, `divider-${index}`) : /* @__PURE__ */ jsx23(Tooltip, { title: option.disabled ? option.disabledTip : void 0, placement: "right", children: /* @__PURE__ */ jsxs22(
               "button",
               {
                 type: "button",
@@ -7025,10 +7213,10 @@ function SelectionPanel({
                 className: `sia-selection-panel__option${active === option.value ? " is-active" : ""}`,
                 onClick: () => toggle(option),
                 children: [
-                  multiple && /* @__PURE__ */ jsx22("span", { "aria-hidden": "true", className: "sia-selection-panel__check", children: selected.has(option.value) ? "\u2713" : "" }),
+                  multiple && /* @__PURE__ */ jsx23("span", { "aria-hidden": "true", className: "sia-selection-panel__check", children: selected.has(option.value) ? "\u2713" : "" }),
                   /* @__PURE__ */ jsxs22("span", { className: "sia-selection-panel__text", children: [
                     showValue || displayField === "label" ? option.label : String(option.value),
-                    showValue && /* @__PURE__ */ jsx22("small", { children: String(option.value) })
+                    showValue && /* @__PURE__ */ jsx23("small", { children: String(option.value) })
                   ] })
                 ]
               }
@@ -7042,8 +7230,8 @@ function SelectionPanel({
 }
 
 // src/components/InputSelect.tsx
-import { forwardRef as forwardRef7, useEffect as useEffect15, useRef as useRef15, useState as useState18 } from "react";
-import { jsx as jsx23, jsxs as jsxs23 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7, useEffect as useEffect16, useRef as useRef16, useState as useState19 } from "react";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var InputSelect = forwardRef7(function InputSelect2({
   options,
   value,
@@ -7053,6 +7241,7 @@ var InputSelect = forwardRef7(function InputSelect2({
   displayField = "label",
   showValue = false,
   placeholder = "\u8BF7\u9009\u62E9",
+  placeholderMode,
   size = "medium",
   status,
   disabled = false,
@@ -7068,22 +7257,22 @@ var InputSelect = forwardRef7(function InputSelect2({
   onOpenChange,
   ...inputProps
 }, forwardedRef) {
-  const [internal, setInternal] = useState18(defaultValue);
+  const [internal, setInternal] = useState19(defaultValue);
   const current = value !== void 0 ? value : internal;
   const values = current == null ? [] : Array.isArray(current) ? current : [current];
   const text = values.map((item) => displayField === "label" ? String(options.find((option) => option.optionType !== "divider" && option.value === item)?.label ?? item) : String(item)).join(",");
-  const [draft, setDraft] = useState18(text);
-  useEffect15(() => {
+  const [draft, setDraft] = useState19(text);
+  useEffect16(() => {
     setDraft(text);
   }, [text, current]);
-  const [open, setOpen] = useState18(false);
-  const [search, setSearch] = useState18("");
-  const [modalOpen, setModalOpen] = useState18(false);
-  const [modalValues, setModalValues] = useState18([]);
-  const [selectedOnly, setSelectedOnly] = useState18(false);
-  const rootRef = useRef15(null);
-  const popupRef = useRef15(null);
-  const inputRef = useRef15(null);
+  const [open, setOpen] = useState19(false);
+  const [search, setSearch] = useState19("");
+  const [modalOpen, setModalOpen] = useState19(false);
+  const [modalValues, setModalValues] = useState19([]);
+  const [selectedOnly, setSelectedOnly] = useState19(false);
+  const rootRef = useRef16(null);
+  const popupRef = useRef16(null);
+  const inputRef = useRef16(null);
   const config = typeof enableModal === "object" ? enableModal : {};
   function changeOpen(next) {
     if (next && (disabled || loading)) return;
@@ -7103,7 +7292,7 @@ var InputSelect = forwardRef7(function InputSelect2({
       inputRef.current?.focus();
     }
   }
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open) return;
     const outside = (event) => {
       if (!rootRef.current?.contains(event.target) && !popupRef.current?.contains(event.target)) changeOpen(false);
@@ -7111,7 +7300,7 @@ var InputSelect = forwardRef7(function InputSelect2({
     document.addEventListener("pointerdown", outside);
     return () => document.removeEventListener("pointerdown", outside);
   }, [open, onOpenChange]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (disabled || loading) {
       changeOpen(false);
       setModalOpen(false);
@@ -7124,14 +7313,14 @@ var InputSelect = forwardRef7(function InputSelect2({
     setSelectedOnly(false);
     setModalOpen(true);
   }
-  return /* @__PURE__ */ jsxs23("div", { ref: rootRef, style, className: `sia-input-select ${className}`, onKeyDown: (event) => {
+  return /* @__PURE__ */ jsxs23("div", { ref: rootRef, style, className: `sia-input-select${open || modalOpen ? " is-open" : ""} ${className}`, onKeyDown: (event) => {
     if (event.key === "Escape" && open) {
       event.stopPropagation();
       changeOpen(false);
       inputRef.current?.focus();
     }
   }, children: [
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       Input,
       {
         ...inputProps,
@@ -7149,6 +7338,7 @@ var InputSelect = forwardRef7(function InputSelect2({
         disabled,
         readOnly: displayField === "label" || loading,
         placeholder,
+        placeholderMode,
         value: draft,
         maxLength: inputMaxLength && inputMaxLength > 0 ? inputMaxLength : void 0,
         showCount: !!inputMaxLength && inputMaxLength > 0,
@@ -7168,25 +7358,25 @@ var InputSelect = forwardRef7(function InputSelect2({
           changeOpen(true);
         },
         suffix: /* @__PURE__ */ jsxs23("span", { className: "sia-input-select__suffix", children: [
-          allowClear && draft && !disabled && /* @__PURE__ */ jsx23(Button, { variant: "text", size: "small", disabled: loading, "aria-label": "\u6E05\u9664\u8F93\u5165\u9009\u62E9", onClick: (event) => {
+          allowClear && draft && !disabled && /* @__PURE__ */ jsx24(Button, { variant: "text", size: "small", disabled: loading, "aria-label": "\u6E05\u9664\u8F93\u5165\u9009\u62E9", onClick: (event) => {
             event.stopPropagation();
             setDraft("");
             emit(multiple ? [] : void 0);
             inputRef.current?.focus();
           }, children: "\xD7" }),
           suffix,
-          enableModal && /* @__PURE__ */ jsx23(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u6253\u5F00\u9009\u62E9\u5F39\u7A97", onClick: (event) => {
+          enableModal && /* @__PURE__ */ jsx24(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u6253\u5F00\u9009\u62E9\u5F39\u7A97", onClick: (event) => {
             event.stopPropagation();
             openModal();
           }, children: "\u2026" }),
-          /* @__PURE__ */ jsx23(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u5C55\u5F00\u9009\u9879", onClick: (event) => {
+          /* @__PURE__ */ jsx24(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u5C55\u5F00\u9009\u9879", onClick: (event) => {
             event.stopPropagation();
             changeOpen(!open);
-          }, children: /* @__PURE__ */ jsx23(Icon, { name: loading ? "refresh" : open ? "chevron-up" : "chevron-down", size: 13 }) })
+          }, children: /* @__PURE__ */ jsx24(Icon, { name: loading ? "refresh" : open ? "chevron-up" : "chevron-down", size: 13 }) })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx23(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && !disabled && !loading, className: "sia-input-select__popup", children: /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && !disabled && !loading, className: "sia-input-select__popup", children: /* @__PURE__ */ jsx24(
       SelectionPanel,
       {
         options,
@@ -7215,14 +7405,14 @@ var InputSelect = forwardRef7(function InputSelect2({
         },
         children: [
           /* @__PURE__ */ jsxs23("div", { className: "sia-selection-panel__actions", role: "tablist", "aria-label": "\u9009\u9879\u8303\u56F4", children: [
-            /* @__PURE__ */ jsx23(Button, { role: "tab", "aria-selected": !selectedOnly, variant: !selectedOnly ? "primary" : "text", onClick: () => setSelectedOnly(false), children: "\u5168\u90E8" }),
+            /* @__PURE__ */ jsx24(Button, { role: "tab", "aria-selected": !selectedOnly, variant: !selectedOnly ? "primary" : "text", onClick: () => setSelectedOnly(false), children: "\u5168\u90E8" }),
             /* @__PURE__ */ jsxs23(Button, { role: "tab", "aria-selected": selectedOnly, variant: selectedOnly ? "primary" : "text", onClick: () => setSelectedOnly(true), children: [
               "\u5DF2\u9009\u9879(",
               modalValues.length,
               ")"
             ] })
           ] }),
-          modalOpen && /* @__PURE__ */ jsx23(
+          modalOpen && /* @__PURE__ */ jsx24(
             SelectionPanel,
             {
               options,