@sia.soul/sia-react-ui 0.1.44 → 0.1.45

package/dist/index.js

@@ -4707,11 +4707,8 @@ function TableCellContent({ children, ellipsis, title }) {
   return /* @__PURE__ */ jsx20("div", { ref, className: "sia-table__cell-content", "data-custom-content": customContent || void 0, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children: title ? /* @__PURE__ */ jsx20(Tooltip, { title, className: "sia-table__cell-tooltip", children: /* @__PURE__ */ jsx20("span", { children }) }) : children });
 }
 
-// src/components/Table/Table.tsx
-import { Fragment as Fragment8, forwardRef as forwardRef5, isValidElement as isValidElement4, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef15, useState as useState18 } from "react";
-
-// src/components/Table/plugins.tsx
-import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef14, useState as useState17 } from "react";
+// src/components/Table/TableCanvasLayer.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef14 } from "react";
 
 // src/components/Table/utils.ts
 var AUTO_WIDTH_COLUMN_KEYS = /* @__PURE__ */ new Set(["action", "actions", "operation", "operations"]);
@@ -4763,8 +4760,115 @@ function toTablePageParams(current, pageSize) {
   return { current, pageIndex: current, pageSize, skipCount: Math.max(0, current - 1) * pageSize, maxResultCount: pageSize };
 }
 
+// src/components/Table/TableCanvasLayer.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function TableCanvasLayer({ viewport, rows, columns, widths, rowHeight, headerHeight }) {
+  const canvasRef = useRef14(null);
+  useLayoutEffect3(() => {
+    const canvas = canvasRef.current;
+    const scroller = viewport.current;
+    if (!canvas || !scroller) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let frame = 0;
+    const draw = () => {
+      frame = 0;
+      const width = scroller.clientWidth, height = scroller.clientHeight;
+      const ratio = window.devicePixelRatio || 1;
+      if (canvas.width !== Math.round(width * ratio) || canvas.height !== Math.round(height * ratio)) {
+        canvas.width = Math.round(width * ratio);
+        canvas.height = Math.round(height * ratio);
+      }
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+      const style = getComputedStyle(scroller);
+      const foreground = style.color;
+      ctx.font = `${style.fontSize} ${style.fontFamily}`;
+      ctx.textBaseline = "middle";
+      const leftWidth = columns.reduce((n, c) => n + (normalizeFixed(c.fixed) === "left" ? widths.get(c.key) ?? 160 : 0), 0);
+      const rightWidth = columns.reduce((n, c) => n + (normalizeFixed(c.fixed) === "right" ? widths.get(c.key) ?? 160 : 0), 0);
+      let offset = 0, fixedLeft = 0, fixedRight = rightWidth;
+      const geometry = columns.map((column) => {
+        const cellWidth = widths.get(column.key) ?? 160;
+        const fixed = normalizeFixed(column.fixed);
+        const x = fixed === "left" ? fixedLeft : fixed === "right" ? width - fixedRight : offset - scroller.scrollLeft;
+        offset += cellWidth;
+        if (fixed === "left") fixedLeft += cellWidth;
+        if (fixed === "right") fixedRight -= cellWidth;
+        return { column, x, cellWidth, fixed };
+      });
+      const first = Math.max(0, Math.floor(scroller.scrollTop / rowHeight));
+      const last = Math.min(rows.length, Math.ceil((scroller.scrollTop + height) / rowHeight));
+      for (const { column, x, cellWidth, fixed } of geometry) {
+        if (x + cellWidth <= 0 || x >= width || !column.canvasRender && column.render) continue;
+        const clipLeft = Math.max(x, fixed ? 0 : leftWidth);
+        const clipRight = Math.min(x + cellWidth, fixed ? width : width - rightWidth);
+        if (clipRight <= clipLeft) continue;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(clipLeft, headerHeight, clipRight - clipLeft, height - headerHeight);
+        ctx.clip();
+        for (let index = first; index < last; index++) {
+          const row = rows[index];
+          const value = getTableValue(row.record, column.dataIndex, column.code ?? column.key);
+          const content = column.canvasRender ? column.canvasRender(value, row.record, row.sourceIndex, { row, rowIndex: index, column }) : { text: value == null ? "" : String(value) };
+          if (!content?.text) continue;
+          const y = headerHeight + index * rowHeight - scroller.scrollTop + rowHeight / 2;
+          const available = Math.max(0, cellWidth - (content.background ? 32 : 16));
+          let text = content.text;
+          if (ctx.measureText(text).width > available) {
+            let lo = 0, hi = text.length;
+            while (lo < hi) {
+              const mid = Math.ceil((lo + hi) / 2);
+              if (ctx.measureText(text.slice(0, mid) + "\u2026").width <= available) lo = mid;
+              else hi = mid - 1;
+            }
+            text = text.slice(0, lo) + "\u2026";
+          }
+          const textWidth = ctx.measureText(text).width;
+          const total = textWidth + (content.background ? 16 : 0);
+          const tx = column.align === "right" ? x + cellWidth - total - 8 : column.align === "center" ? x + (cellWidth - total) / 2 : x + 8;
+          if (content.background) {
+            ctx.fillStyle = content.background;
+            ctx.beginPath();
+            ctx.roundRect(tx, y - 12, total, 24, 4);
+            ctx.fill();
+          }
+          ctx.fillStyle = content.color ?? foreground;
+          ctx.fillText(text, tx + (content.background ? 8 : 0), y);
+        }
+        ctx.restore();
+      }
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(draw);
+    };
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    const resize = new ResizeObserver(schedule);
+    resize.observe(scroller);
+    const theme = new MutationObserver(schedule);
+    theme.observe(document.documentElement, { attributes: true });
+    window.addEventListener("resize", schedule);
+    draw();
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      theme.disconnect();
+      scroller.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [viewport, rows, columns, widths, rowHeight, headerHeight]);
+  return /* @__PURE__ */ jsx21("canvas", { ref: canvasRef, "aria-hidden": "true", className: "sia-table__canvas-layer" });
+}
+
+// src/components/Table/Table.tsx
+import { Fragment as Fragment8, forwardRef as forwardRef5, isValidElement as isValidElement4, memo, useCallback as useCallback2, useEffect as useEffect12, useImperativeHandle, useMemo as useMemo9, useRef as useRef16, useState as useState18 } from "react";
+
 // src/components/Table/plugins.tsx
-import { Fragment as Fragment7, jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef15, useState as useState17 } from "react";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function TableCheckbox({
   checked,
   indeterminate,
@@ -4772,7 +4876,7 @@ function TableCheckbox({
   label,
   onChange
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Checkbox,
     {
       className: "sia-table__checkbox",
@@ -4997,6 +5101,7 @@ function createCellSelectionPlugin(options = {}) {
       info
     );
     if (exported !== void 0) return tableExportText(exported);
+    if (column.canvasRender) return column.canvasRender(value, row.record, row.sourceIndex, info)?.text ?? "";
     if (column.editable) return tableExportCell(value, true);
     const rendered = column.render?.(value, row.record, row.sourceIndex, info);
     return rendered !== void 0 ? tableExportText(rendered) : tableExportCell(value, true);
@@ -5399,10 +5504,10 @@ function TableSelectedItemsPanel({
     /* @__PURE__ */ jsxs20("div", { className: "sia-table-selection-panel__header", children: [
       /* @__PURE__ */ jsxs20("strong", { children: [
         "\u5DF2\u9009 ",
-        /* @__PURE__ */ jsx21("span", { children: entries.length }),
+        /* @__PURE__ */ jsx22("span", { children: entries.length }),
         " \u9879"
       ] }),
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         Button,
         {
           size: "small",
@@ -5413,15 +5518,15 @@ function TableSelectedItemsPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx21("div", { className: "sia-table-selection-panel__body", children: /* @__PURE__ */ jsxs20("table", { children: [
-      /* @__PURE__ */ jsx21("thead", { children: /* @__PURE__ */ jsxs20("tr", { children: [
-        columns.map((column) => /* @__PURE__ */ jsx21("th", { children: getColumnLabel(column) }, column.key)),
-        /* @__PURE__ */ jsx21("th", { "aria-label": "\u64CD\u4F5C" })
+    /* @__PURE__ */ jsx22("div", { className: "sia-table-selection-panel__body", children: /* @__PURE__ */ jsxs20("table", { children: [
+      /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsxs20("tr", { children: [
+        columns.map((column) => /* @__PURE__ */ jsx22("th", { children: getColumnLabel(column) }, column.key)),
+        /* @__PURE__ */ jsx22("th", { "aria-label": "\u64CD\u4F5C" })
       ] }) }),
-      /* @__PURE__ */ jsx21("tbody", { children: visibleEntries.map((entry, selectedIndex) => /* @__PURE__ */ jsxs20("tr", { children: [
+      /* @__PURE__ */ jsx22("tbody", { children: visibleEntries.map((entry, selectedIndex) => /* @__PURE__ */ jsxs20("tr", { children: [
         columns.map((column) => {
           if (column.meta?.plugin === "index")
-            return /* @__PURE__ */ jsx21("td", { children: entry.sourceIndex + 1 }, column.key);
+            return /* @__PURE__ */ jsx22("td", { children: entry.sourceIndex + 1 }, column.key);
           const baseColumn = baseColumnMap.get(column.key) ?? column;
           const value = getTableValue(
             entry.record,
@@ -5441,9 +5546,9 @@ function TableSelectedItemsPanel({
             entry.sourceIndex,
             { row, rowIndex: entry.sourceIndex, column: baseColumn }
           ) ?? value;
-          return /* @__PURE__ */ jsx21("td", { children: content }, column.key);
+          return /* @__PURE__ */ jsx22("td", { children: content }, column.key);
         }),
-        /* @__PURE__ */ jsx21("td", { children: /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22("td", { children: /* @__PURE__ */ jsx22(
           Button,
           {
             size: "small",
@@ -5458,7 +5563,7 @@ function TableSelectedItemsPanel({
       "\u8FD8\u6709 ",
       hiddenCount,
       " \u9879\u672A\u5C55\u793A",
-      /* @__PURE__ */ jsx21(Button, { size: "small", variant: "link", onClick: () => setShowAll(true), children: "\u5C55\u793A\u5168\u90E8" })
+      /* @__PURE__ */ jsx22(Button, { size: "small", variant: "link", onClick: () => setShowAll(true), children: "\u5C55\u793A\u5168\u90E8" })
     ] }) : null
   ] });
 }
@@ -5573,7 +5678,7 @@ 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__ */ jsx21(
+          return /* @__PURE__ */ jsx22(
             TableCheckbox,
             {
               label: "\u9009\u62E9\u5F53\u524D\u9875\u5168\u90E8\u884C",
@@ -5589,7 +5694,7 @@ function createSelectionPlugin(options = {}) {
             }
           );
         },
-        render: (_value, record, _index, info) => mode === "single" ? /* @__PURE__ */ jsx21(
+        render: (_value, record, _index, info) => mode === "single" ? /* @__PURE__ */ jsx22(
           Radio2,
           {
             className: "sia-table__checkbox",
@@ -5600,7 +5705,7 @@ function createSelectionPlugin(options = {}) {
             onClick: (event) => event.stopPropagation(),
             onChange: () => toggle(info.row.key, record, context)
           }
-        ) : /* @__PURE__ */ jsx21(
+        ) : /* @__PURE__ */ jsx22(
           TableCheckbox,
           {
             label: `\u9009\u62E9\u7B2C ${info.rowIndex + 1} \u884C`,
@@ -5640,7 +5745,7 @@ function createSelectionPlugin(options = {}) {
         (column) => !column.hidden && column.meta?.plugin !== "selection"
       ).slice(0, Math.max(1, options.selectionPanelColumnCount ?? 4));
       return /* @__PURE__ */ jsxs20("span", { className: "sia-table__selection-footer", children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           Popover,
           {
             placement: "top-start",
@@ -5648,7 +5753,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__ */ jsx21(
+            content: /* @__PURE__ */ jsx22(
               TableSelectedItemsPanel,
               {
                 entries,
@@ -5680,7 +5785,7 @@ function createSelectionPlugin(options = {}) {
             )
           }
         ),
-        mode === "multiple" && options.showPreserveSelectedRowKeys !== false ? /* @__PURE__ */ jsx21(
+        mode === "multiple" && options.showPreserveSelectedRowKeys !== false ? /* @__PURE__ */ jsx22(
           Checkbox,
           {
             checked: preserving(context),
@@ -5738,8 +5843,8 @@ function createSortPlugin(options = {}) {
             const order = info?.field === field ? info.order : null;
             const sortHint = `${getColumnLabel(currentColumn)}\uFF1A${order === "ascend" ? "\u5F53\u524D\u5347\u5E8F\uFF0C\u70B9\u51FB\u5207\u6362\u4E3A\u964D\u5E8F" : order === "descend" ? "\u5F53\u524D\u964D\u5E8F\uFF0C\u70B9\u51FB\u53D6\u6D88\u6392\u5E8F" : "\u672A\u6392\u5E8F\uFF0C\u70B9\u51FB\u6309\u5347\u5E8F\u6392\u5E8F"}`;
             return /* @__PURE__ */ jsxs20("span", { className: "sia-table__sortable-header", children: [
-              /* @__PURE__ */ jsx21("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
+              /* @__PURE__ */ jsx22(
                 "button",
                 {
                   type: "button",
@@ -5751,9 +5856,9 @@ function createSortPlugin(options = {}) {
                     event.stopPropagation();
                     cycle(field, context);
                   },
-                  children: order ? /* @__PURE__ */ jsx21(Icon, { name: order === "ascend" ? "chevron-up" : "chevron-down", size: 18 }) : /* @__PURE__ */ jsxs20(Fragment7, { children: [
-                    /* @__PURE__ */ jsx21(Icon, { name: "chevron-up", size: 11 }),
-                    /* @__PURE__ */ jsx21(Icon, { name: "chevron-down", size: 11 })
+                  children: order ? /* @__PURE__ */ jsx22(Icon, { name: order === "ascend" ? "chevron-up" : "chevron-down", size: 18 }) : /* @__PURE__ */ jsxs20(Fragment7, { children: [
+                    /* @__PURE__ */ jsx22(Icon, { name: "chevron-up", size: 11 }),
+                    /* @__PURE__ */ jsx22(Icon, { name: "chevron-down", size: 11 })
                   ] })
                 }
               )
@@ -5799,8 +5904,8 @@ function TableFilterControl({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs20("span", { className: "sia-table__filter-header", children: [
-    /* @__PURE__ */ jsx21("span", { children: column.title ?? column.name ?? column.key }),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22("span", { children: column.title ?? column.name ?? column.key }),
+    /* @__PURE__ */ jsx22(
       Popover,
       {
         open,
@@ -5808,7 +5913,7 @@ function TableFilterControl({
         placement: "bottom-end",
         overlayClassName: "sia-table-filter-popover",
         content: /* @__PURE__ */ jsxs20("div", { className: "sia-table-filter-panel", children: [
-          /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx22(
             Input,
             {
               size: "small",
@@ -5823,7 +5928,7 @@ function TableFilterControl({
             }
           ),
           /* @__PURE__ */ jsxs20("div", { className: "sia-table-filter-panel__actions", children: [
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               Button,
               {
                 size: "small",
@@ -5835,7 +5940,7 @@ function TableFilterControl({
                 children: "\u6E05\u9664"
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22(
               Button,
               {
                 size: "small",
@@ -5846,7 +5951,7 @@ function TableFilterControl({
             )
           ] })
         ] }),
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx22(
           "button",
           {
             type: "button",
@@ -5854,7 +5959,7 @@ function TableFilterControl({
             "aria-label": `\u7B5B\u9009${label}`,
             "aria-pressed": Boolean(value),
             onClick: (event) => event.stopPropagation(),
-            children: /* @__PURE__ */ jsx21(Icon, { name: "search", size: 13 })
+            children: /* @__PURE__ */ jsx22(Icon, { name: "search", size: 13 })
           }
         )
       }
@@ -5916,7 +6021,7 @@ function createFilterPlugin(options = {}) {
               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__ */ jsx21(
+            return /* @__PURE__ */ jsx22(
               TableFilterControl,
               {
                 column: renderedColumn,
@@ -6005,7 +6110,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__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         Pagination,
         {
           className: "sia-table__pagination",
@@ -6146,7 +6251,7 @@ function createTreePlugin(options = {}) {
               className: "sia-table__tree-cell",
               style: { paddingLeft: info.row.depth * 18 },
               children: [
-                info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx21(
+                info.row.meta.treeHasChildren ? /* @__PURE__ */ jsx22(
                   "button",
                   {
                     type: "button",
@@ -6157,7 +6262,7 @@ function createTreePlugin(options = {}) {
                       event.stopPropagation();
                       toggle(info.row.key, context);
                     },
-                    children: /* @__PURE__ */ jsx21(
+                    children: /* @__PURE__ */ jsx22(
                       Icon,
                       {
                         name: current(context).includes(info.row.key) ? "chevron-down" : "chevron-right",
@@ -6165,7 +6270,7 @@ function createTreePlugin(options = {}) {
                       }
                     )
                   }
-                ) : /* @__PURE__ */ jsx21("span", { className: "sia-table__tree-placeholder" }),
+                ) : /* @__PURE__ */ jsx22("span", { className: "sia-table__tree-placeholder" }),
                 previousRender ? previousRender(value, record, index, info) : value
               ]
             }
@@ -6218,11 +6323,11 @@ function EditableTableCell({
   const config = typeof editable === "object" ? editable : { type: "input" };
   const [editValue, setEditValue] = useState17(value);
   const [saving, setSaving] = useState17(false);
-  const inputRef = useRef14(null);
-  const editorRef = useRef14(null);
-  const editValueRef = useRef14(value);
-  const savingRef = useRef14(false);
-  const saveRef = useRef14(
+  const inputRef = useRef15(null);
+  const editorRef = useRef15(null);
+  const editValueRef = useRef15(value);
+  const savingRef = useRef15(false);
+  const saveRef = useRef15(
     async () => {
     }
   );
@@ -6280,8 +6385,8 @@ function EditableTableCell({
         onClick: trigger === "click" ? onStart : void 0,
         onDoubleClick: trigger === "doubleClick" ? onStart : void 0,
         children: [
-          /* @__PURE__ */ jsx21("span", { children: content }),
-          /* @__PURE__ */ jsx21(Icon, { name: "edit", size: 13 })
+          /* @__PURE__ */ jsx22("span", { children: content }),
+          /* @__PURE__ */ jsx22(Icon, { name: "edit", size: 13 })
         ]
       }
     );
@@ -6289,7 +6394,7 @@ function EditableTableCell({
   if (config.type === "custom" && config.editRender) {
     editor = config.editRender(record, (next) => void save(next), onCancel);
   } else if (config.type === "inputNumber") {
-    editor = /* @__PURE__ */ jsx21(
+    editor = /* @__PURE__ */ jsx22(
       InputNumber,
       {
         ref: inputRef,
@@ -6310,7 +6415,7 @@ function EditableTableCell({
       }
     );
   } else if (config.type === "select") {
-    editor = /* @__PURE__ */ jsx21(
+    editor = /* @__PURE__ */ jsx22(
       Select,
       {
         size: "small",
@@ -6324,14 +6429,14 @@ function EditableTableCell({
       }
     );
   } else {
-    editor = /* @__PURE__ */ jsx21(
+    editor = /* @__PURE__ */ jsx22(
       Input,
       {
         ref: inputRef,
         size: "small",
         value: String(editValue ?? ""),
         disabled: saving,
-        suffix: saving ? /* @__PURE__ */ jsx21(Icon, { name: "loader", size: 13, spin: true }) : null,
+        suffix: saving ? /* @__PURE__ */ jsx22(Icon, { name: "loader", size: 13, spin: true }) : null,
         onChange: (event) => updateEditValue(event.target.value),
         onBlur: () => void save(),
         onKeyDown: (event) => {
@@ -6341,7 +6446,7 @@ function EditableTableCell({
       }
     );
   }
-  return /* @__PURE__ */ jsx21("div", { ref: editorRef, className: "sia-table__editor", children: editor });
+  return /* @__PURE__ */ jsx22("div", { ref: editorRef, className: "sia-table__editor", children: editor });
 }
 function createEditablePlugin(options = {}) {
   const trigger = options.trigger ?? "click";
@@ -6361,7 +6466,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__ */ jsx21(
+            return /* @__PURE__ */ jsx22(
               EditableTableCell,
               {
                 active,
@@ -6425,8 +6530,8 @@ function createResizePlugin(options = {}) {
           autoWidth,
           width,
           renderHeader: (currentColumn, coreContext) => /* @__PURE__ */ jsxs20("span", { className: "sia-table__resizable-header", children: [
-            /* @__PURE__ */ jsx21("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22("span", { children: previousHeader ? previousHeader(currentColumn, coreContext) : currentColumn.title ?? currentColumn.name ?? currentColumn.key }),
+            /* @__PURE__ */ jsx22(
               "span",
               {
                 className: "sia-table__resize-handle",
@@ -6563,8 +6668,8 @@ function ColumnSettingPanel({
   onApply
 }) {
   const [draft, setDraft] = useState17(items);
-  const listRef = useRef14(null);
-  const cancelDrag = useRef14(null);
+  const listRef = useRef15(null);
+  const cancelDrag = useRef15(null);
   const [preview, setPreview] = useState17(null);
   useEffect11(() => {
     cancelDrag.current?.();
@@ -6707,8 +6812,8 @@ function ColumnSettingPanel({
         if (!next) onClose();
       },
       footer: /* @__PURE__ */ jsxs20(Fragment7, { children: [
-        /* @__PURE__ */ jsx21(Button, { onClick: onClose, children: "\u53D6\u6D88" }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(Button, { onClick: onClose, children: "\u53D6\u6D88" }),
+        /* @__PURE__ */ jsx22(
           Button,
           {
             variant: "primary",
@@ -6721,9 +6826,9 @@ function ColumnSettingPanel({
       children: [
         loadError ? /* @__PURE__ */ jsxs20("p", { role: "alert", children: [
           "\u8BFB\u53D6\u5217\u914D\u7F6E\u5931\u8D25\u3002",
-          /* @__PURE__ */ jsx21(Button, { variant: "link", onClick: onRetry, children: "\u91CD\u8BD5" })
+          /* @__PURE__ */ jsx22(Button, { variant: "link", onClick: onRetry, children: "\u91CD\u8BD5" })
         ] }) : null,
-        /* @__PURE__ */ jsx21(Spin, { spinning: Boolean(loading), className: "sia-table-settings__loading", "aria-label": loading ? "\u6B63\u5728\u8BFB\u53D6\u5217\u914D\u7F6E" : void 0, children: /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsx22(Spin, { spinning: Boolean(loading), className: "sia-table-settings__loading", "aria-label": loading ? "\u6B63\u5728\u8BFB\u53D6\u5217\u914D\u7F6E" : void 0, children: /* @__PURE__ */ jsxs20(
           "fieldset",
           {
             disabled: loading || loadError,
@@ -6731,7 +6836,7 @@ function ColumnSettingPanel({
             "aria-busy": loading,
             children: [
               /* @__PURE__ */ jsxs20("label", { className: "sia-table-settings__all", children: [
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx22(
                   TableCheckbox,
                   {
                     label: "\u5168\u9009\u5217",
@@ -6750,7 +6855,7 @@ function ColumnSettingPanel({
                   "\uFF09"
                 ] })
               ] }),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx22(
                 "div",
                 {
                   ref: listRef,
@@ -6765,8 +6870,8 @@ function ColumnSettingPanel({
                       } : void 0,
                       onPointerDown: (event) => startSort(event, item.key),
                       children: [
-                        /* @__PURE__ */ jsx21(Icon, { name: "menu", size: 15 }),
-                        /* @__PURE__ */ jsx21(
+                        /* @__PURE__ */ jsx22(Icon, { name: "menu", size: 15 }),
+                        /* @__PURE__ */ jsx22(
                           TableCheckbox,
                           {
                             label: `\u663E\u793A${labels.get(item.key) ?? item.key}\u5217`,
@@ -6778,7 +6883,7 @@ function ColumnSettingPanel({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx21(
+                        /* @__PURE__ */ jsx22(
                           "span",
                           {
                             className: "sia-table-settings__name",
@@ -6786,7 +6891,7 @@ function ColumnSettingPanel({
                           }
                         ),
                         /* @__PURE__ */ jsxs20("div", { className: "sia-table-settings__actions", children: [
-                          /* @__PURE__ */ jsx21(
+                          /* @__PURE__ */ jsx22(
                             Button,
                             {
                               size: "small",
@@ -6799,7 +6904,7 @@ function ColumnSettingPanel({
                               children: "\u5DE6"
                             }
                           ),
-                          /* @__PURE__ */ jsx21(
+                          /* @__PURE__ */ jsx22(
                             Button,
                             {
                               size: "small",
@@ -6947,7 +7052,7 @@ function createColumnSettingPlugin(options = {}) {
           {
             key: "builtin:export",
             label: "\u8868\u683C\u5BFC\u51FA",
-            icon: /* @__PURE__ */ jsx21(Icon, { name: "download", size: 18 }),
+            icon: /* @__PURE__ */ jsx22(Icon, { name: "download", size: 18 }),
             disabled: exportApi().getRows().length === 0
           },
           { key: "builtin:divider", type: "divider" }
@@ -6955,7 +7060,7 @@ function createColumnSettingPlugin(options = {}) {
         {
           key: "builtin:columns",
           label: "\u5217\u8BBE\u7F6E",
-          icon: /* @__PURE__ */ jsx21(Icon, { name: "settings", size: 18 })
+          icon: /* @__PURE__ */ jsx22(Icon, { name: "settings", size: 18 })
         },
         ...customItems.map((item) => ({
           key: "custom:" + item.key,
@@ -6965,7 +7070,7 @@ function createColumnSettingPlugin(options = {}) {
           disabled: item.disabled === true || typeof item.disabled === "function" && item.disabled(context)
         }))
       ];
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         Dropdown,
         {
           disabled: options.buttonProps?.disabled || options.buttonProps?.loading,
@@ -6982,12 +7087,12 @@ function createColumnSettingPlugin(options = {}) {
                 void customItems.find((item) => "custom:" + item.key === key)?.onClick?.(context);
             }
           },
-          children: /* @__PURE__ */ jsx21(
+          children: /* @__PURE__ */ jsx22(
             Button,
             {
               size: "small",
               variant: "text",
-              icon: /* @__PURE__ */ jsx21(Icon, { name: "settings", size: 16 }),
+              icon: /* @__PURE__ */ jsx22(Icon, { name: "settings", size: 16 }),
               "aria-label": "\u8868\u683C\u8BBE\u7F6E",
               ...options.buttonProps,
               className: `sia-table__settings-button${options.buttonProps?.children == null ? " sia-table__toolbar-icon" : ""} ${options.buttonProps?.className ?? ""}`.trim()
@@ -6996,7 +7101,7 @@ function createColumnSettingPlugin(options = {}) {
         }
       );
     },
-    renderOverlay: (context) => /* @__PURE__ */ jsx21(
+    renderOverlay: (context) => /* @__PURE__ */ jsx22(
       ColumnSettingPanel,
       {
         open: context.state.open,
@@ -7046,11 +7151,11 @@ function ToolbarItems({
   items,
   context
 }) {
-  return /* @__PURE__ */ jsx21(Fragment7, { children: items.map((item) => {
+  return /* @__PURE__ */ jsx22(Fragment7, { 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__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       Button,
       {
         size: "small",
@@ -7074,14 +7179,14 @@ function createToolbarPlugin(options) {
     order: 5,
     renderToolbarStart: (context) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
       options.start,
-      /* @__PURE__ */ jsx21(ToolbarItems, { items: items("start"), context })
+      /* @__PURE__ */ jsx22(ToolbarItems, { items: items("start"), context })
     ] }),
     renderToolbarEnd: (context) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
       options.end,
-      /* @__PURE__ */ jsx21(ToolbarItems, { items: items("end"), context }),
+      /* @__PURE__ */ jsx22(ToolbarItems, { items: items("end"), context }),
       items("end", true).length > 0 ? /* @__PURE__ */ jsxs20("details", { className: "sia-table__toolbar-menu", children: [
-        /* @__PURE__ */ jsx21("summary", { "aria-label": "\u66F4\u591A\u8868\u683C\u64CD\u4F5C", children: /* @__PURE__ */ jsx21(Icon, { name: "more-horizontal", size: 16 }) }),
-        /* @__PURE__ */ jsx21("div", { children: /* @__PURE__ */ jsx21(ToolbarItems, { items: items("end", true), context }) })
+        /* @__PURE__ */ jsx22("summary", { "aria-label": "\u66F4\u591A\u8868\u683C\u64CD\u4F5C", children: /* @__PURE__ */ jsx22(Icon, { name: "more-horizontal", size: 16 }) }),
+        /* @__PURE__ */ jsx22("div", { children: /* @__PURE__ */ jsx22(ToolbarItems, { items: items("end", true), context }) })
       ] }) : null
     ] })
   };
@@ -7163,11 +7268,11 @@ function createExportPlugin(options = {}) {
   return {
     id: "export",
     order: 95,
-    renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */ jsx21(
+    renderToolbarEnd: options.showButton === false ? void 0 : (context) => /* @__PURE__ */ jsx22(
       Button,
       {
         size: "small",
-        icon: /* @__PURE__ */ jsx21(Icon, { name: "download", size: 14 }),
+        icon: /* @__PURE__ */ jsx22(Icon, { name: "download", size: 14 }),
         disabled: getRows(context).length === 0,
         onClick: () => void download(context),
         children: options.buttonLabel ?? "\u5BFC\u51FA"
@@ -7182,7 +7287,7 @@ function createExportPlugin(options = {}) {
 }
 
 // src/components/Table/Table.tsx
-import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
 var EMPTY_DATA = [];
 var EMPTY_COLUMNS = [];
 var EMPTY_PLUGINS = [];
@@ -7272,6 +7377,8 @@ function getTableHorizontalMetrics(viewport, table) {
   return { contentWidth, maxLeft: Math.max(0, contentWidth - viewport.clientWidth) };
 }
 var TableBodyRow = memo(function TableBodyRow2({
+  canvas,
+  visibleColumns,
   row,
   rowIndex,
   columns,
@@ -7294,7 +7401,7 @@ var TableBodyRow = memo(function TableBodyRow2({
   onCellPointerDown,
   onCellPointerMove
 }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "tr",
     {
       className: `sia-table__row${striped && rowIndex % 2 === 1 ? " sia-table__row--striped" : ""} ${className}`.trim(),
@@ -7303,7 +7410,13 @@ var TableBodyRow = memo(function TableBodyRow2({
       onDoubleClick,
       onMouseEnter,
       onMouseLeave,
-      children: columns.map((column) => {
+      children: columns.map((column, columnIndex) => {
+        if (canvas && !visibleColumns.has(column.key)) {
+          if (columnIndex > 0 && !visibleColumns.has(columns[columnIndex - 1].key)) return null;
+          let count = 1;
+          while (columnIndex + count < columns.length && !visibleColumns.has(columns[columnIndex + count].key)) count++;
+          return /* @__PURE__ */ jsx23("td", { colSpan: count, "aria-hidden": "true", style: { padding: 0 } }, `spacer-${column.key}`);
+        }
         const pluginCellProps = getCellProps(column);
         if (pluginCellProps.hidden) return null;
         const value = getTableValue(row.record, column.dataIndex, column.code ?? column.key);
@@ -7312,10 +7425,11 @@ 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__ */ jsx22(
+        return /* @__PURE__ */ jsx23(
           "td",
           {
             "data-column-key": column.key,
+            "aria-label": canvas ? column.canvasRender?.(value, row.record, row.sourceIndex, { row, rowIndex, column })?.text ?? (value == null ? "" : String(value)) : void 0,
             rowSpan: pluginCellProps.rowSpan,
             colSpan: pluginCellProps.colSpan,
             className: `sia-table__cell sia-table__cell--${column.align ?? "left"}${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}${column.ellipsis !== false ? " sia-table__cell--ellipsis" : ""} ${cellClass} ${pluginCellProps.className ?? ""}`.trim(),
@@ -7326,14 +7440,14 @@ var TableBodyRow = memo(function TableBodyRow2({
             onContextMenu: (event) => onCellContextMenu(column, event),
             onPointerDown: (event) => onCellPointerDown(column, event),
             onPointerMove: (event) => onCellPointerMove(column, event),
-            children: /* @__PURE__ */ jsx22(
+            children: !canvas || visibleColumns.has(column.key) && (pluginCellProps.content !== void 0 || !column.canvasRender && column.render) ? /* @__PURE__ */ jsx23(
               TableCellContent,
               {
                 ellipsis: column.ellipsis !== false,
                 title: column.showTitle === true && 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
               }
-            )
+            ) : null
           },
           column.key
         );
@@ -7358,6 +7472,7 @@ function TableInner(props, ref) {
     toolbarBordered = false,
     striped = true,
     virtual,
+    renderMode = "dom",
     virtualThreshold = 100,
     rowHeight = SIZE_ROW_HEIGHT[size],
     overscan = 6,
@@ -7374,13 +7489,14 @@ function TableInner(props, ref) {
     style,
     ...htmlProps
   } = props;
-  const rootRef = useRef15(null);
-  const scrollRef = useRef15(null);
-  const tableRef = useRef15(null);
+  const rootRef = useRef16(null);
+  const scrollRef = useRef16(null);
+  const tableRef = useRef16(null);
   useScrollbarProximity();
-  const scrollbarDragRef = useRef15(null);
+  const scrollbarDragRef = useRef16(null);
   const [internalLoading, setInternalLoading] = useState18(false);
   const [scrollTop, setScrollTop] = useState18(0);
+  const [scrollLeft, setScrollLeft] = useState18(0);
   const [viewportHeight, setViewportHeight] = useState18(420);
   const [viewportWidth, setViewportWidth] = useState18(0);
   const [autoColumnWidths, setAutoColumnWidths] = useState18({});
@@ -7398,14 +7514,14 @@ function TableInner(props, ref) {
     return plugins;
   }, [builtInHighlightPlugin, builtInResizePlugin, builtInCellSelectionPlugin, builtInIndexPlugin, providedPlugins, resizable, cellSelection, showIndex]);
   const sortedPlugins = useMemo9(() => [...activePlugins].sort((a, b) => (a.order ?? 100) - (b.order ?? 100)), [activePlugins]);
-  const pluginsByIdRef = useRef15(/* @__PURE__ */ new Map());
+  const pluginsByIdRef = useRef16(/* @__PURE__ */ new Map());
   pluginsByIdRef.current = new Map(sortedPlugins.map((plugin) => [plugin.id, plugin]));
   const [pluginStates, setPluginStates] = useState18(() => Object.fromEntries(
     sortedPlugins.map((plugin) => [plugin.id, resolveInitialState(plugin)])
   ));
-  const pluginApisRef = useRef15({});
-  const contextsRef = useRef15(/* @__PURE__ */ new Map());
-  const mountedPluginsRef = useRef15(/* @__PURE__ */ new Map());
+  const pluginApisRef = useRef16({});
+  const contextsRef = useRef16(/* @__PURE__ */ new Map());
+  const mountedPluginsRef = useRef16(/* @__PURE__ */ new Map());
   const pipeline = { columns: baseColumns, rows: createTableRows(dataSource, getRowKey) };
   const nextApis = {};
   const contexts = /* @__PURE__ */ new Map();
@@ -7537,7 +7653,7 @@ function TableInner(props, ref) {
   const orderedColumns = useMemo9(() => sortTableColumnsByFixed(pipeline.columns), [pipeline.columns]);
   const leafColumns = useMemo9(() => flattenTableColumns(orderedColumns), [orderedColumns]);
   const headerRows = useMemo9(() => buildHeaderRows(orderedColumns), [orderedColumns]);
-  const measuredCells = useRef15(/* @__PURE__ */ new WeakSet());
+  const measuredCells = useRef16(/* @__PURE__ */ new WeakSet());
   const autoWidthSignature = leafColumns.map((column) => `${column.key}:${column.autoWidth}:${resizedWidths[column.key] ?? ""}`).join("|");
   useEffect12(() => {
     measuredCells.current = /* @__PURE__ */ new WeakSet();
@@ -7612,11 +7728,19 @@ function TableInner(props, ref) {
   }
   const leftFixedEdgeKey = [...leafColumns].reverse().find((column) => normalizeFixed(column.fixed) === "left")?.key;
   const rightFixedEdgeKey = leafColumns.find((column) => normalizeFixed(column.fixed) === "right")?.key;
-  const shouldVirtualize = (virtual ?? pipeline.rows.length >= virtualThreshold) && !sortedPlugins.some((plugin) => plugin.disableVirtual);
+  const canvas = renderMode === "canvas" && !sortedPlugins.some((plugin) => plugin.disableVirtual);
+  const shouldVirtualize = canvas || pipeline.rows.length > 100 || (virtual ?? pipeline.rows.length >= virtualThreshold) && !sortedPlugins.some((plugin) => plugin.disableVirtual);
   const startIndex = shouldVirtualize ? Math.max(0, Math.floor(scrollTop / rowHeight) - overscan) : 0;
   const visibleCount = shouldVirtualize ? Math.ceil(viewportHeight / rowHeight) + overscan * 2 : pipeline.rows.length;
   const endIndex = shouldVirtualize ? Math.min(pipeline.rows.length, startIndex + visibleCount) : pipeline.rows.length;
   const renderedRows = pipeline.rows.slice(startIndex, endIndex);
+  const visibleColumns = /* @__PURE__ */ new Set();
+  let columnLeft = 0;
+  for (const column of leafColumns) {
+    const width = columnWidths.get(column.key) ?? DEFAULT_WIDTH;
+    if (normalizeFixed(column.fixed) || columnLeft + width >= scrollLeft && columnLeft <= scrollLeft + viewportWidth) visibleColumns.add(column.key);
+    columnLeft += width;
+  }
   const topSpacer = shouldVirtualize ? startIndex * rowHeight : 0;
   const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
   const rowElements = useMemo9(() => /* @__PURE__ */ new Map(), [
@@ -7630,26 +7754,28 @@ function TableInner(props, ref) {
     striped,
     rowClassName,
     getRowKey,
+    canvas,
+    scrollLeft,
     onRowClick,
     onRowDoubleClick,
     onCellContextMenu
   ]);
   const toolbarStart = sortedPlugins.map((plugin) => {
     const content = plugin.renderToolbarStart?.(getContext(plugin));
-    return content ? /* @__PURE__ */ jsx22(Fragment8, { children: content }, `toolbar-start-${plugin.id}`) : null;
+    return content ? /* @__PURE__ */ jsx23(Fragment8, { children: content }, `toolbar-start-${plugin.id}`) : null;
   }).filter(Boolean);
   const toolbarEnd = sortedPlugins.map((plugin) => {
     const content = plugin.renderToolbarEnd?.(getContext(plugin));
-    return content ? /* @__PURE__ */ jsx22(Fragment8, { children: content }, `toolbar-end-${plugin.id}`) : null;
+    return content ? /* @__PURE__ */ jsx23(Fragment8, { 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__ */ jsx22(Fragment8, { children: content }, `footer-${plugin.id}`) : null;
+    return content ? /* @__PURE__ */ jsx23(Fragment8, { children: content }, `footer-${plugin.id}`) : null;
   }).filter(Boolean);
   const overlays = sortedPlugins.map((plugin) => {
     const content = plugin.renderOverlay?.(getContext(plugin));
-    return content ? /* @__PURE__ */ jsx22(Fragment8, { children: content }, `overlay-${plugin.id}`) : null;
+    return content ? /* @__PURE__ */ jsx23(Fragment8, { children: content }, `overlay-${plugin.id}`) : null;
   }).filter(Boolean);
   const hasToolbar = toolbarStart.length > 0 || toolbarEnd.length > 0;
   const effectiveHeight = height ?? tableHeight ?? (shouldVirtualize ? 420 : void 0);
@@ -7661,8 +7787,9 @@ function TableInner(props, ref) {
   const handleScroll = useCallback2((event) => {
     const element = event.currentTarget;
     if (shouldVirtualize) setScrollTop((previous) => Math.floor(previous / rowHeight) === Math.floor(element.scrollTop / rowHeight) ? previous : element.scrollTop);
+    if (canvas) setScrollLeft(element.scrollLeft);
     updateScrollMetrics();
-  }, [shouldVirtualize, rowHeight, updateScrollMetrics]);
+  }, [canvas, shouldVirtualize, rowHeight, updateScrollMetrics]);
   const handleScrollbarPointerDown = useCallback2((axis, event, track = event.currentTarget) => {
     const element = scrollRef.current;
     const thumb = track.firstElementChild;
@@ -7746,8 +7873,8 @@ function TableInner(props, ref) {
   function renderHeaderContent(column, content) {
     const title = getHeaderTitleText(column.title ?? column.name) || column.name || column.key;
     return /* @__PURE__ */ jsxs21("span", { className: "sia-table__header-label", children: [
-      /* @__PURE__ */ jsx22("span", { className: "sia-table__header-label-content", ...withTitleTooltip({ title }), children: content }),
-      column.description != null && /* @__PURE__ */ jsx22(Tooltip, { title: column.description, placement: "top", trigger: ["hover", "focus"], children: /* @__PURE__ */ jsx22("button", { type: "button", className: "sia-table__header-description", "aria-label": `${column.name ?? column.key}\u5217\u8BF4\u660E`, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx22(Icon, { name: "info", size: 14 }) }) })
+      /* @__PURE__ */ jsx23("span", { className: "sia-table__header-label-content", ...withTitleTooltip({ title }), children: content }),
+      column.description != null && /* @__PURE__ */ jsx23(Tooltip, { title: column.description, placement: "top", trigger: ["hover", "focus"], children: /* @__PURE__ */ jsx23("button", { type: "button", className: "sia-table__header-description", "aria-label": `${column.name ?? column.key}\u5217\u8BF4\u660E`, onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx23(Icon, { name: "info", size: 14 }) }) })
     ] });
   }
   function getPluginCellProps(row, column) {
@@ -7787,14 +7914,14 @@ function TableInner(props, ref) {
   }
   function renderSummaryRow(summary) {
     let labelRendered = false;
-    return /* @__PURE__ */ jsx22("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
+    return /* @__PURE__ */ jsx23("tr", { className: `sia-table__summary-row ${summary.className ?? ""}`.trim(), children: leafColumns.map((column) => {
       const value = summary.values[column.key];
       const isLabel = value === void 0 && !labelRendered && summary.label !== void 0;
       const content = value !== void 0 ? value : isLabel ? (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__ */ jsx22("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__cell--${column.align ?? "left"} sia-table__summary-cell${isLabel ? " sia-table__summary-cell--label" : ""}${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: isLabel ? /* @__PURE__ */ jsx22("span", { className: "sia-table__summary-label", children: content }) : content }, column.key);
+      return /* @__PURE__ */ jsx23("td", { "data-column-key": column.key, className: `sia-table__cell sia-table__cell--${column.align ?? "left"} sia-table__summary-cell${isLabel ? " sia-table__summary-cell--label" : ""}${fixed ? ` sia-table__cell--fixed sia-table__cell--fixed-${fixed}` : ""}${fixedEdgeClass}${autoWidthClass}`, style: getFixedStyle(column), children: isLabel ? /* @__PURE__ */ jsx23("span", { className: "sia-table__summary-label", children: content }) : content }, column.key);
     }) }, summary.key);
   }
   return /* @__PURE__ */ jsxs21(
@@ -7804,6 +7931,7 @@ function TableInner(props, ref) {
       className: `sia-table sia-table--${size}${bordered ? " sia-table--bordered" : ""}${!rowBordered ? " sia-table--no-row-borders" : ""}${!columnBordered ? " sia-table--no-column-borders" : ""}${hasToolbar && !toolbarBordered ? " sia-table--borderless-toolbar" : ""} ${className}`.trim(),
       style: rootStyle,
       "data-has-fixed-left": left > 0,
+      "data-render-mode": canvas ? "canvas" : "dom",
       "data-has-fixed-right": right > 0,
       "data-scrolled-left": "false",
       "data-scrolled-right": "true",
@@ -7848,18 +7976,18 @@ function TableInner(props, ref) {
       },
       children: [
         hasToolbar ? /* @__PURE__ */ jsxs21("div", { className: "sia-table__toolbar", children: [
-          /* @__PURE__ */ jsx22("div", { children: toolbarStart }),
-          /* @__PURE__ */ jsx22("div", { children: toolbarEnd })
+          /* @__PURE__ */ jsx23("div", { children: toolbarStart }),
+          /* @__PURE__ */ jsx23("div", { children: toolbarEnd })
         ] }) : null,
         /* @__PURE__ */ jsxs21("div", { className: "sia-table__viewport-wrap", children: [
-          /* @__PURE__ */ jsx22("div", { className: "sia-table__viewport", ref: scrollRef, onScroll: handleScroll, children: /* @__PURE__ */ jsxs21("table", { ref: tableRef, className: "sia-table__element", style: { width: Math.max(totalWidth, 1), ...manualColumnLayout ? { minWidth: 0 } : {}, ...tableStyle }, children: [
-            /* @__PURE__ */ jsx22("colgroup", { children: leafColumns.map((column) => /* @__PURE__ */ jsx22("col", { "data-column-key": column.key, style: { width: columnWidths.get(column.key) ?? DEFAULT_WIDTH } }, column.key)) }),
-            /* @__PURE__ */ jsx22("thead", { className: stickyHeader ? "sia-table__head sia-table__head--sticky" : "sia-table__head", children: headerRows.map((headerRow, depth) => /* @__PURE__ */ jsx22("tr", { children: headerRow.map((cell) => {
+          /* @__PURE__ */ jsx23("div", { className: "sia-table__viewport", ref: scrollRef, onScroll: handleScroll, children: /* @__PURE__ */ jsxs21("table", { ref: tableRef, className: "sia-table__element", style: { width: Math.max(totalWidth, 1), ...manualColumnLayout ? { minWidth: 0 } : {}, ...tableStyle }, children: [
+            /* @__PURE__ */ jsx23("colgroup", { children: leafColumns.map((column) => /* @__PURE__ */ jsx23("col", { "data-column-key": column.key, style: { width: columnWidths.get(column.key) ?? DEFAULT_WIDTH } }, column.key)) }),
+            /* @__PURE__ */ jsx23("thead", { className: stickyHeader ? "sia-table__head sia-table__head--sticky" : "sia-table__head", children: headerRows.map((headerRow, depth) => /* @__PURE__ */ jsx23("tr", { children: headerRow.map((cell) => {
               const fixed = cell.fixed;
               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__ */ jsx22(
+              return /* @__PURE__ */ jsx23(
                 "th",
                 {
                   "data-column-key": cell.column.key,
@@ -7881,16 +8009,18 @@ function TableInner(props, ref) {
               );
             }) }, depth)) }),
             /* @__PURE__ */ jsxs21("tbody", { children: [
-              topSpacer > 0 ? /* @__PURE__ */ jsx22("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx22("td", { colSpan: leafColumns.length, style: { height: topSpacer, padding: 0, border: 0 } }) }) : null,
+              topSpacer > 0 ? /* @__PURE__ */ jsx23("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx23("td", { colSpan: leafColumns.length, style: { height: topSpacer, padding: 0, border: 0 } }) }) : null,
               renderedRows.map((row, offset) => {
                 const cached = rowElements.get(row.key);
                 if (cached) return cached;
                 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 ?? "";
-                const element = /* @__PURE__ */ jsx22(
+                const element = /* @__PURE__ */ jsx23(
                   TableBodyRow,
                   {
+                    canvas,
+                    visibleColumns,
                     row,
                     rowIndex,
                     columns: leafColumns,
@@ -7937,12 +8067,13 @@ function TableInner(props, ref) {
                 rowElements.set(row.key, element);
                 return element;
               }),
-              bottomSpacer > 0 ? /* @__PURE__ */ jsx22("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx22("td", { colSpan: leafColumns.length, style: { height: bottomSpacer, padding: 0, border: 0 } }) }) : null
+              bottomSpacer > 0 ? /* @__PURE__ */ jsx23("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx23("td", { colSpan: leafColumns.length, style: { height: bottomSpacer, padding: 0, border: 0 } }) }) : null
             ] }),
-            summaries.length > 0 ? /* @__PURE__ */ jsx22("tfoot", { className: "sia-table__summary", children: summaries.map(renderSummaryRow) }) : null
+            summaries.length > 0 ? /* @__PURE__ */ jsx23("tfoot", { className: "sia-table__summary", children: summaries.map(renderSummaryRow) }) : null
           ] }) }),
-          pipeline.rows.length === 0 ? /* @__PURE__ */ jsx22("div", { className: "sia-table__empty", role: "status", children: emptyText }) : null,
-          /* @__PURE__ */ jsx22(
+          pipeline.rows.length === 0 ? /* @__PURE__ */ jsx23("div", { className: "sia-table__empty", role: "status", children: emptyText }) : null,
+          canvas ? /* @__PURE__ */ jsx23(TableCanvasLayer, { viewport: scrollRef, rows: pipeline.rows, columns: leafColumns, widths: columnWidths, rowHeight, headerHeight: headerRows.length * rowHeight }) : null,
+          /* @__PURE__ */ jsx23(
             "div",
             {
               className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--horizontal",
@@ -7953,10 +8084,10 @@ function TableInner(props, ref) {
               onPointerMove: handleScrollbarPointerMove,
               onPointerUp: handleScrollbarPointerEnd,
               onPointerCancel: handleScrollbarPointerEnd,
-              children: /* @__PURE__ */ jsx22("div", { className: "sia-table__scrollbar-thumb" })
+              children: /* @__PURE__ */ jsx23("div", { className: "sia-table__scrollbar-thumb" })
             }
           ),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23(
             "div",
             {
               className: "sia-scrollbar-track sia-table__scrollbar sia-table__scrollbar--vertical",
@@ -7967,14 +8098,14 @@ function TableInner(props, ref) {
               onPointerMove: handleScrollbarPointerMove,
               onPointerUp: handleScrollbarPointerEnd,
               onPointerCancel: handleScrollbarPointerEnd,
-              children: /* @__PURE__ */ jsx22("div", { className: "sia-table__scrollbar-thumb" })
+              children: /* @__PURE__ */ jsx23("div", { className: "sia-table__scrollbar-thumb" })
             }
           )
         ] }),
-        footers.length > 0 ? /* @__PURE__ */ jsx22("div", { className: "sia-table__footer", children: footers }) : null,
+        footers.length > 0 ? /* @__PURE__ */ jsx23("div", { className: "sia-table__footer", children: footers }) : null,
         loading || internalLoading ? /* @__PURE__ */ jsxs21("div", { className: "sia-table__loading", role: "status", children: [
-          /* @__PURE__ */ jsx22(Icon, { name: "loader", size: 22, spin: true }),
-          /* @__PURE__ */ jsx22("span", { children: "\u52A0\u8F7D\u4E2D" })
+          /* @__PURE__ */ jsx23(Icon, { name: "loader", size: 22, spin: true }),
+          /* @__PURE__ */ jsx23("span", { children: "\u52A0\u8F7D\u4E2D" })
         ] }) : null,
         overlays
       ]
@@ -7985,7 +8116,7 @@ var Table = forwardRef5(TableInner);
 
 // src/components/ThemeSwitch.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
 var ThemeSwitch = forwardRef6(function ThemeSwitch2({
   checked,
   onCheckedChange,
@@ -8011,12 +8142,12 @@ var ThemeSwitch = forwardRef6(function ThemeSwitch2({
       onClick: handleClick,
       ...withTitleTooltip(props),
       children: [
-        /* @__PURE__ */ jsx23("span", { className: "sia-theme-switch__selection", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx23("span", { className: `sia-theme-switch__icon${checked ? "" : " is-active"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxs22("svg", { viewBox: "0 0 24 24", children: [
-          /* @__PURE__ */ jsx23("circle", { cx: "12", cy: "12", r: "3.5" }),
-          /* @__PURE__ */ jsx23("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__ */ jsx24("span", { className: "sia-theme-switch__selection", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx24("span", { className: `sia-theme-switch__icon${checked ? "" : " is-active"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxs22("svg", { viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx24("circle", { cx: "12", cy: "12", r: "3.5" }),
+          /* @__PURE__ */ jsx24("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__ */ jsx23("span", { className: `sia-theme-switch__icon${checked ? " is-active" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx23("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { d: "M20 15.2A8 8 0 0 1 8.8 4 8.5 8.5 0 1 0 20 15.2Z" }) }) })
+        /* @__PURE__ */ jsx24("span", { className: `sia-theme-switch__icon${checked ? " is-active" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx24("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx24("path", { d: "M20 15.2A8 8 0 0 1 8.8 4 8.5 8.5 0 1 0 20 15.2Z" }) }) })
       ]
     }
   );
@@ -8059,8 +8190,8 @@ function applySiaTheme(mode, target = document.documentElement) {
 }
 
 // src/components/InputSelect.tsx
-import { forwardRef as forwardRef7, useEffect as useEffect13, useRef as useRef16, useState as useState19 } from "react";
-import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7, useEffect as useEffect13, useRef as useRef17, useState as useState19 } from "react";
+import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
 var InputSelect = forwardRef7(function InputSelect2({
   options,
   value,
@@ -8100,9 +8231,9 @@ var InputSelect = forwardRef7(function InputSelect2({
   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 rootRef = useRef17(null);
+  const popupRef = useRef17(null);
+  const inputRef = useRef17(null);
   const config = typeof enableModal === "object" ? enableModal : {};
   function changeOpen(next) {
     if (next && (disabled || loading)) return;
@@ -8150,7 +8281,7 @@ var InputSelect = forwardRef7(function InputSelect2({
       inputRef.current?.focus();
     }
   }, children: [
-    /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(
       Input,
       {
         ...inputProps,
@@ -8188,25 +8319,25 @@ var InputSelect = forwardRef7(function InputSelect2({
           changeOpen(true);
         },
         suffix: /* @__PURE__ */ jsxs23("span", { className: "sia-input-select__suffix", children: [
-          allowClear && draft && !disabled && /* @__PURE__ */ jsx24(Button, { variant: "text", size: "small", disabled: loading, "aria-label": "\u6E05\u9664\u8F93\u5165\u9009\u62E9", onClick: (event) => {
+          allowClear && draft && !disabled && /* @__PURE__ */ jsx25(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__ */ jsx24(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u6253\u5F00\u9009\u62E9\u5F39\u7A97", onClick: (event) => {
+          enableModal && /* @__PURE__ */ jsx25(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u6253\u5F00\u9009\u62E9\u5F39\u7A97", onClick: (event) => {
             event.stopPropagation();
             openModal();
           }, children: "\u2026" }),
-          /* @__PURE__ */ jsx24(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u5C55\u5F00\u9009\u9879", onClick: (event) => {
+          /* @__PURE__ */ jsx25(Button, { variant: "text", size: "small", disabled: disabled || loading, "aria-label": "\u5C55\u5F00\u9009\u9879", onClick: (event) => {
             event.stopPropagation();
             changeOpen(!open);
-          }, children: /* @__PURE__ */ jsx24(Icon, { name: loading ? "refresh" : open ? "chevron-up" : "chevron-down", size: 13 }) })
+          }, children: /* @__PURE__ */ jsx25(Icon, { name: loading ? "refresh" : open ? "chevron-up" : "chevron-down", size: 13 }) })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx24(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && !disabled && !loading, className: "sia-input-select__popup", children: /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: open && !disabled && !loading, className: "sia-input-select__popup", children: /* @__PURE__ */ jsx25(
       SelectionPanel,
       {
         options,
@@ -8235,14 +8366,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__ */ jsx24(Button, { role: "tab", "aria-selected": !selectedOnly, variant: !selectedOnly ? "primary" : "text", onClick: () => setSelectedOnly(false), children: "\u5168\u90E8" }),
+            /* @__PURE__ */ jsx25(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__ */ jsx24(
+          modalOpen && /* @__PURE__ */ jsx25(
             SelectionPanel,
             {
               options,
@@ -8263,8 +8394,8 @@ var InputSelect = forwardRef7(function InputSelect2({
 });
 
 // src/components/QueryForm.tsx
-import { Children as Children4, useLayoutEffect as useLayoutEffect3, useRef as useRef17, useState as useState20 } from "react";
-import { jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Children as Children4, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState20 } from "react";
+import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
 function QueryForm({
   fields,
   children,
@@ -8307,19 +8438,19 @@ function QueryForm({
   const [saveError, setSaveError] = useState20("");
   const [error, setError] = useState20("");
   const [activeShortcut, setActiveShortcut] = useState20("");
-  const source = useRef17({ source: "submit" });
-  const searchLock = useRef17(false);
-  const saveLock = useRef17(false);
-  const removeLock = useRef17(false);
-  const snapshot = useRef17();
+  const source = useRef18({ source: "submit" });
+  const searchLock = useRef18(false);
+  const saveLock = useRef18(false);
+  const removeLock = useRef18(false);
+  const snapshot = useRef18();
   const busy = disabled || loading || searching;
   const shortcutBusy = busy || shortcutsLoading || saving || removing;
-  const entries = fields ? fields.map(({ key, width, ...item }) => ({ key, width, content: /* @__PURE__ */ jsx25(Form.Item, { noStyle: true, ...item }) })) : Children4.toArray(children).map((content, index) => ({ key: String(index), width: void 0, content }));
+  const entries = fields ? fields.map(({ key, width, ...item }) => ({ key, width, content: /* @__PURE__ */ jsx26(Form.Item, { noStyle: true, ...item }) })) : Children4.toArray(children).map((content, index) => ({ key: String(index), width: void 0, content }));
   const limit = Math.max(1, Math.floor(collapsedCount));
-  const rowRef = useRef17(null);
-  const actionsRef = useRef17(null);
+  const rowRef = useRef18(null);
+  const actionsRef = useRef18(null);
   const [fittingCount, setFittingCount] = useState20(limit);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (!collapsed) return;
     const row = rowRef.current;
     const actions = actionsRef.current;
@@ -8439,7 +8570,7 @@ function QueryForm({
         },
         children: [
           quickQueries.length ? /* @__PURE__ */ jsxs24("div", { className: "sia-query-form__quick", "aria-label": "\u9884\u8BBE\u5FEB\u6377\u67E5\u8BE2", children: [
-            quickQueries.map((query) => /* @__PURE__ */ jsx25(Badge, { className: "sia-query-form__quick-badge", showZero: true, size: "small", title: query.count === void 0 ? void 0 : `\u5171 ${query.count} \u6761`, ...query.badgeProps, count: query.count, children: /* @__PURE__ */ jsx25(
+            quickQueries.map((query) => /* @__PURE__ */ jsx26(Badge, { className: "sia-query-form__quick-badge", showZero: true, size: "small", title: query.count === void 0 ? void 0 : `\u5171 ${query.count} \u6761`, ...query.badgeProps, count: query.count, children: /* @__PURE__ */ jsx26(
               Button,
               {
                 size: query.size ?? quickQuerySize,
@@ -8453,7 +8584,7 @@ function QueryForm({
             " "
           ] }) : null,
           /* @__PURE__ */ jsxs24("div", { ref: rowRef, className: `sia-query-form__fields${collapsed ? " is-collapsed" : ""}`, style: { "--sia-query-field-width": typeof fieldWidth === "number" ? `${fieldWidth}px` : fieldWidth }, children: [
-            entries.map((entry, index) => /* @__PURE__ */ jsx25(
+            entries.map((entry, index) => /* @__PURE__ */ jsx26(
               "div",
               {
                 className: "sia-query-form__field",
@@ -8465,21 +8596,21 @@ function QueryForm({
             )),
             /* @__PURE__ */ jsxs24("div", { ref: actionsRef, className: "sia-query-form__actions", children: [
               /* @__PURE__ */ jsxs24(Space.Compact, { children: [
-                /* @__PURE__ */ jsx25(Button, { type: "submit", variant: "primary", loading: loading || searching, disabled, children: searchText }),
-                /* @__PURE__ */ jsx25(Button, { disabled: busy, onClick: reset, children: resetText }),
-                onSaveQuery ? /* @__PURE__ */ jsx25(Button, { disabled: shortcutBusy, onClick: () => {
+                /* @__PURE__ */ jsx26(Button, { type: "submit", variant: "primary", loading: loading || searching, disabled, children: searchText }),
+                /* @__PURE__ */ jsx26(Button, { disabled: busy, onClick: reset, children: resetText }),
+                onSaveQuery ? /* @__PURE__ */ jsx26(Button, { disabled: shortcutBusy, onClick: () => {
                   snapshot.current = form.getFieldsValue();
                   setSaveName("");
                   setSaveError("");
                   setSaveOpen(true);
                 }, children: saveText }) : null
               ] }),
-              collapsible && entries.length > 0 ? /* @__PURE__ */ jsx25(
+              collapsible && entries.length > 0 ? /* @__PURE__ */ jsx26(
                 Button,
                 {
                   variant: "link",
                   "aria-expanded": !collapsed,
-                  icon: /* @__PURE__ */ jsx25(Icon, { name: collapsed ? "chevron-down" : "chevron-up" }),
+                  icon: /* @__PURE__ */ jsx26(Icon, { name: collapsed ? "chevron-down" : "chevron-up" }),
                   iconPosition: "end",
                   onClick: () => {
                     setInternalCollapsed(!collapsed);
@@ -8492,7 +8623,7 @@ function QueryForm({
             ] })
           ] }),
           savedQueries.length && !collapsed ? /* @__PURE__ */ jsxs24("div", { className: "sia-query-form__saved", "aria-label": "\u5DF2\u4FDD\u5B58\u5FEB\u6377\u67E5\u8BE2", children: [
-            savedQueries.map((query, index) => /* @__PURE__ */ jsx25(
+            savedQueries.map((query, index) => /* @__PURE__ */ jsx26(
               Tag,
               {
                 status: query.status ?? ["processing", "success", "warning", "error"][index % 4],
@@ -8518,14 +8649,14 @@ function QueryForm({
             )),
             " "
           ] }) : null,
-          error ? /* @__PURE__ */ jsx25("p", { className: "sia-query-form__error", role: "alert", children: error }) : null
+          error ? /* @__PURE__ */ jsx26("p", { className: "sia-query-form__error", role: "alert", children: error }) : null
         ]
       }
     ),
     /* @__PURE__ */ jsxs24(Modal, { open: saveOpen, title: "\u53E6\u5B58\u4E3A\u5FEB\u6377\u67E5\u8BE2", width: 420, confirmLoading: saving, onOk: save, onOpenChange: (next) => {
       if (!saveLock.current) setSaveOpen(next);
     }, children: [
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         Input,
         {
           autoFocus: true,
@@ -8544,7 +8675,7 @@ function QueryForm({
           }
         }
       ),
-      saveError ? /* @__PURE__ */ jsx25("p", { className: "sia-query-form__error", role: "alert", children: saveError }) : null
+      saveError ? /* @__PURE__ */ jsx26("p", { className: "sia-query-form__error", role: "alert", children: saveError }) : null
     ] })
   ] });
 }