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

package/dist/index.cjs

@@ -3348,7 +3348,17 @@ function FloatingScrollbarProvider({ disabled = false, targetRef }) {
     };
     const scanTargets = () => {
       scanFrame = 0;
-      const candidates = (targetRef ? [targetRef.current] : [document.scrollingElement, ...document.querySelectorAll("*")]).filter((target) => target instanceof HTMLElement);
+      const managedSelector = ".sia-table__viewport, [data-sia-native-scrollbar], .sia-scrollbar-track, .sia-floating-scrollbar-layer";
+      const discovered = [];
+      if (!targetRef) {
+        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, {
+          acceptNode: (node) => node.matches(managedSelector) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+        });
+        for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+          if (node instanceof HTMLElement) discovered.push(node);
+        }
+      }
+      const candidates = (targetRef ? [targetRef.current] : [document.scrollingElement, ...discovered]).filter((target) => target instanceof HTMLElement);
       const nextTargets = /* @__PURE__ */ new Set();
       candidates.forEach((target) => {
         if (canScroll(target, "horizontal") || canScroll(target, "vertical")) {
@@ -3366,9 +3376,12 @@ function FloatingScrollbarProvider({ disabled = false, targetRef }) {
       scanFrame = window.requestAnimationFrame(scanTargets);
     };
     const mutationObserver = new MutationObserver((mutations) => {
-      if (mutations.some((mutation) => !layer.contains(mutation.target))) scheduleScan();
+      if (mutations.some((mutation) => {
+        const target = mutation.target instanceof Element ? mutation.target : mutation.target.parentElement;
+        return target && !layer.contains(target) && !target.closest(".sia-table__viewport, [data-sia-native-scrollbar], .sia-scrollbar-track");
+      })) scheduleScan();
     });
-    mutationObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true });
+    mutationObserver.observe(document.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ["class", "style", "hidden"] });
     window.addEventListener("resize", scheduleScan);
     window.addEventListener("scroll", scheduleUpdateAll, true);
     scheduleScan();
@@ -5071,6 +5084,12 @@ function Card({
   title,
   description,
   extra,
+  selectable = false,
+  selected,
+  defaultSelected = false,
+  disabled = false,
+  onSelectedChange,
+  hoverActions,
   accent,
   accentColor,
   collapsible = false,
@@ -5083,9 +5102,19 @@ function Card({
   className = "",
   style,
   children,
+  onClick,
+  onKeyDown,
   ...props
 }) {
   const [internalCollapsed, setInternalCollapsed] = (0, import_react24.useState)(defaultCollapsed);
+  const [internalSelected, setInternalSelected] = (0, import_react24.useState)(defaultSelected);
+  const isSelected = selected ?? internalSelected;
+  function toggleSelected() {
+    if (!selectable || disabled) return;
+    const next = !isSelected;
+    if (selected === void 0) setInternalSelected(next);
+    onSelectedChange?.(next);
+  }
   const isCollapsed = collapsed ?? internalCollapsed;
   const hasHeader = title || extra || collapsible;
   const mergedStyle = accentColor ? { "--sia-card-accent": accentColor, ...style } : style;
@@ -5099,19 +5128,46 @@ function Card({
     accent || accentColor ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: `sia-card__accent${accent ? ` sia-card__accent--${accent}` : ""}`, "aria-hidden": "true" }) : null,
     title ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "sia-card__title", children: title }) : null
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("section", { className: `sia-card${isCollapsed ? " sia-card--collapsed" : ""} ${className}`.trim(), style: mergedStyle, ...withTitleTooltip(props), children: [
-    hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("header", { className: "sia-card__header", children: [
-      collapsible ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { type: "button", className: "sia-card__collapse-trigger", "aria-expanded": !isCollapsed, onClick: toggleCollapsed, children: [
-        heading,
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: isCollapsed ? "chevron-down" : "chevron-up", size: 16 })
-      ] }) : heading,
-      extra ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-card__extra", children: extra }) : null
-    ] }) : null,
-    !isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-      description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "sia-card__description", children: description }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `sia-card__body ${bodyClassName}`.trim(), style: mergedBodyStyle, children })
-    ] }) : null
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "section",
+    {
+      className: `sia-card${isCollapsed ? " sia-card--collapsed" : ""}${selectable ? " sia-card--selectable" : ""}${selectable && isSelected ? " sia-card--selected" : ""}${hoverActions ? " sia-card--hover-actions" : ""} ${className}`.trim(),
+      style: mergedStyle,
+      role: selectable ? "checkbox" : void 0,
+      "aria-checked": selectable ? isSelected : void 0,
+      "aria-disabled": selectable ? disabled : void 0,
+      tabIndex: selectable && !disabled ? 0 : void 0,
+      ...withTitleTooltip(props),
+      onClick: (event) => {
+        onClick?.(event);
+        const target = event.target;
+        const interactive = target.closest('button, a, input, select, textarea, label, [role="button"], [role="checkbox"], [role="radio"], [role="switch"], [contenteditable="true"], [tabindex]');
+        if (!event.defaultPrevented && (!interactive || interactive === event.currentTarget)) toggleSelected();
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (!event.defaultPrevented && event.target === event.currentTarget && selectable && (event.key === "Enter" || event.key === " ")) {
+          event.preventDefault();
+          toggleSelected();
+        }
+      },
+      children: [
+        selectable && isSelected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-card__selected-corner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "check", size: 16 }) }) : null,
+        hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("header", { className: "sia-card__header", children: [
+          collapsible ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("button", { type: "button", className: "sia-card__collapse-trigger", "aria-expanded": !isCollapsed, onClick: toggleCollapsed, children: [
+            heading,
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: isCollapsed ? "chevron-down" : "chevron-up", size: 16 })
+          ] }) : heading,
+          extra ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-card__extra", children: extra }) : null
+        ] }) : null,
+        !isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+          description ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "sia-card__description", children: description }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `sia-card__body ${bodyClassName}`.trim(), style: mergedBodyStyle, children }),
+          hoverActions ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-card__hover-actions", onClick: (event) => event.stopPropagation(), children: hoverActions }) : null
+        ] }) : null
+      ]
+    }
+  );
 }
 
 // src/components/Layout.tsx
@@ -11805,6 +11861,22 @@ function Treemap({
 // src/components/Table/TableCellContent.tsx
 var import_react49 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
+var pendingLayouts = /* @__PURE__ */ new Map();
+var layoutFrame;
+function scheduleLayout(element, task) {
+  pendingLayouts.set(element, task);
+  if (layoutFrame !== void 0) return;
+  layoutFrame = requestAnimationFrame(() => {
+    layoutFrame = void 0;
+    const tasks = [...pendingLayouts.values()];
+    pendingLayouts.clear();
+    const layouts = tasks.flatMap((task2) => task2.layouts());
+    layouts.forEach((layout) => {
+      if (!layout.hasAttribute("data-table-inline-layout")) layout.setAttribute("data-table-inline-layout", "");
+    });
+    tasks.forEach((task2) => task2.measure());
+  });
+}
 function TableCellContent({ children, ellipsis, title }) {
   const ref = (0, import_react49.useRef)(null);
   const [overflowing, setOverflowing] = (0, import_react49.useState)(false);
@@ -11812,29 +11884,33 @@ function TableCellContent({ children, ellipsis, title }) {
   (0, import_react49.useLayoutEffect)(() => {
     const element = ref.current;
     if (!element || !ellipsis || !customContent) return;
-    const layouts = [];
-    const normalizeLayouts = (parent) => {
+    const normalizeLayouts = (parent, layouts) => {
       for (const child of parent.children) {
         if (!(child instanceof HTMLElement)) continue;
         const component = [...child.classList].some((name) => name.startsWith("sia-") && !name.startsWith("sia-space") && name !== "sia-flex");
         if (component || child.matches("button, input, textarea, select, [contenteditable]")) continue;
         const display = getComputedStyle(child).display;
         if (["flex", "inline-flex", "grid", "inline-grid"].includes(display)) {
-          child.setAttribute("data-table-inline-layout", "");
           layouts.push(child);
         }
-        normalizeLayouts(child);
+        normalizeLayouts(child, layouts);
       }
     };
-    normalizeLayouts(element);
     const update = () => setOverflowing(element.scrollWidth > element.clientWidth + 1 || element.scrollHeight > element.clientHeight + 1);
-    update();
+    scheduleLayout(element, {
+      layouts: () => {
+        const layouts = [];
+        normalizeLayouts(element, layouts);
+        return layouts;
+      },
+      measure: update
+    });
     const observer = new ResizeObserver(update);
     observer.observe(element);
     for (const child of element.children) observer.observe(child);
     return () => {
       observer.disconnect();
-      layouts.forEach((layout) => layout.removeAttribute("data-table-inline-layout"));
+      pendingLayouts.delete(element);
     };
   }, [children, ellipsis, customContent]);
   return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { ref, className: "sia-table__cell-content", "data-custom-content": customContent || void 0, "data-content-overflow": ellipsis && customContent && overflowing || void 0, children: title ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Tooltip, { title, className: "sia-table__cell-tooltip", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children }) }) : children });
@@ -13637,8 +13713,11 @@ function createResizePlugin(options = {}) {
     })
   };
 }
+function isTableAuxiliaryColumn(column) {
+  return column.meta?.plugin === "index" || column.meta?.plugin === "selection" || column.key === "__index__" || column.key === "__selection__";
+}
 function createColumnSettingItems(columns, visibleKeys) {
-  return flattenTableColumns(columns).map((column, order) => ({
+  return flattenTableColumns(columns).filter((column) => !isTableAuxiliaryColumn(column)).map((column, order) => ({
     key: column.key,
     width: column.width,
     fixed: normalizeFixed(column.fixed),
@@ -13649,6 +13728,7 @@ function createColumnSettingItems(columns, visibleKeys) {
 function applyColumnSettingsToTree(columns, items) {
   const itemMap = new Map(items.map((item) => [item.key, item]));
   const walk = (source) => source.flatMap((column, sourceOrder) => {
+    if (isTableAuxiliaryColumn(column)) return [{ column, order: column.meta?.plugin === "selection" || column.key === "__selection__" ? -2 : -1 }];
     if (column.children?.length) {
       const children = walk(column.children);
       if (children.length === 0) return [];
@@ -13958,11 +14038,15 @@ function ColumnSettingPanel({
 var columnSettingLoadTokens = /* @__PURE__ */ new WeakMap();
 function createColumnSettingPlugin(options = {}) {
   const baseItems = (context) => createColumnSettingItems(context.baseColumns, options.defaultVisibleKeys);
-  const currentItems = (context) => context.state.items?.length ? context.state.items : baseItems(context);
+  const editableItems = (items, context) => {
+    const keys = new Set(baseItems(context).map((item) => item.key));
+    return items.filter((item) => keys.has(item.key));
+  };
+  const currentItems = (context) => context.state.items?.length ? editableItems(context.state.items, context) : baseItems(context);
   const save = (snapshot) => options.adapter && options.scope ? options.adapter.save(options.scope, snapshot).catch(() => void 0) : Promise.resolve();
   function apply(items, context, persist = true) {
     const normalized = orderColumnSettings(
-      [...items].sort((a, b) => a.order - b.order)
+      editableItems(items, context).sort((a, b) => a.order - b.order)
     );
     context.setState((state) => ({ ...state, items: normalized, open: false }));
     const columnMap = new Map(
@@ -14369,10 +14453,9 @@ function buildHeaderRows(columns) {
 function resolveInitialState(plugin) {
   return typeof plugin.initialState === "function" ? plugin.initialState() : plugin.initialState;
 }
-function measureTableCellContentWidth(cell) {
+function prepareTableCellMeasurement(cell) {
   const content = cell.querySelector(":scope > .sia-table__cell-content");
   const target = cell.classList.contains("sia-table__header-cell") ? cell.querySelector(".sia-table__resizable-header > span:first-child, .sia-table__header-label-content") : content;
-  let contentWidth = cell.scrollWidth;
   if (target) {
     const measurement = target.cloneNode(true);
     Object.assign(measurement.style, {
@@ -14390,11 +14473,8 @@ function measureTableCellContentWidth(cell) {
     });
     measurement.setAttribute("aria-hidden", "true");
     cell.appendChild(measurement);
-    contentWidth = Math.max(measurement.scrollWidth, measurement.getBoundingClientRect().width);
-    measurement.remove();
+    return measurement;
   }
-  const style = window.getComputedStyle(cell);
-  return contentWidth + (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0) + (Number.parseFloat(style.borderLeftWidth) || 0) + (Number.parseFloat(style.borderRightWidth) || 0);
 }
 function getTableHorizontalMetrics(viewport, table) {
   const contentWidth = Math.max(viewport.clientWidth, table?.getBoundingClientRect().width ?? viewport.clientWidth);
@@ -14615,18 +14695,22 @@ 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);
-    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 setFlag = (key, value) => {
+      const next = String(value);
+      if (root.dataset[key] !== next) root.dataset[key] = next;
+    };
+    setFlag("overflowX", maxLeft > 1);
+    setFlag("overflowY", maxTop > 1);
+    const horizontalTrackElement = root.querySelector(".sia-table__scrollbar--horizontal");
+    const verticalTrackElement = root.querySelector(".sia-table__scrollbar--vertical");
+    const horizontalTrack = horizontalTrackElement?.clientWidth ?? 0;
+    const verticalTrack = verticalTrackElement?.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;
     const verticalPosition = maxTop > 0 ? element.scrollTop / maxTop * Math.max(0, verticalTrack - verticalThumb) : 0;
-    root.dataset.scrolledLeft = String(logicalScrollLeft > 1);
-    root.dataset.scrolledRight = String(maxLeft > 1 && logicalScrollLeft < maxLeft - 1);
-    root.dataset.overflowX = String(maxLeft > 1);
-    root.dataset.overflowY = String(maxTop > 1);
+    setFlag("scrolledLeft", logicalScrollLeft > 1);
+    setFlag("scrolledRight", maxLeft > 1 && logicalScrollLeft < maxLeft - 1);
     const viewportRect = element.getBoundingClientRect();
     const leftEdge = root.querySelector(".sia-table__header-cell.sia-table__cell--fixed-left-edge");
     const rightEdge = root.querySelector(".sia-table__header-cell.sia-table__cell--fixed-right-edge");
@@ -14638,10 +14722,10 @@ function TableInner(props, ref) {
       const rightEdgeRect = rightEdge.getBoundingClientRect();
       root.style.setProperty("--sia-table-fixed-right-width", `${Math.max(0, viewportRect.right - rightEdgeRect.left)}px`);
     }
-    root.style.setProperty("--sia-table-scrollbar-x-size", `${horizontalThumb}px`);
-    root.style.setProperty("--sia-table-scrollbar-x-position", `${horizontalPosition}px`);
-    root.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
-    root.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
+    horizontalTrackElement?.style.setProperty("--sia-table-scrollbar-x-size", `${horizontalThumb}px`);
+    horizontalTrackElement?.style.setProperty("--sia-table-scrollbar-x-position", `${horizontalPosition}px`);
+    verticalTrackElement?.style.setProperty("--sia-table-scrollbar-y-size", `${verticalThumb}px`);
+    verticalTrackElement?.style.setProperty("--sia-table-scrollbar-y-position", `${verticalPosition}px`);
   }, []);
   (0, import_react51.useEffect)(() => {
     const element = scrollRef.current;
@@ -14662,19 +14746,33 @@ function TableInner(props, ref) {
   const orderedColumns = (0, import_react51.useMemo)(() => sortTableColumnsByFixed(pipeline.columns), [pipeline.columns]);
   const leafColumns = (0, import_react51.useMemo)(() => flattenTableColumns(orderedColumns), [orderedColumns]);
   const headerRows = (0, import_react51.useMemo)(() => buildHeaderRows(orderedColumns), [orderedColumns]);
+  const measuredCells = (0, import_react51.useRef)(/* @__PURE__ */ new WeakSet());
+  const autoWidthSignature = leafColumns.map((column) => `${column.key}:${column.autoWidth}:${resizedWidths[column.key] ?? ""}`).join("|");
+  (0, import_react51.useEffect)(() => {
+    measuredCells.current = /* @__PURE__ */ new WeakSet();
+    setAutoColumnWidths({});
+  }, [dataSource, baseColumns, size, autoWidthSignature]);
   (0, import_react51.useEffect)(() => {
     const autoWidthColumns = leafColumns.filter((column) => column.autoWidth && resizedWidths[column.key] === void 0);
     const root = rootRef.current;
     if (!root || autoWidthColumns.length === 0) return;
     const frame = window.requestAnimationFrame(() => {
       const measurements = {};
-      const cells = root.querySelectorAll("[data-column-key]");
+      const columnsByKey = new Map(autoWidthColumns.map((column) => [column.key, column]));
+      const cells = [...root.querySelectorAll("th[data-column-key], td[data-column-key]")].filter((cell) => columnsByKey.has(cell.dataset.columnKey) && !measuredCells.current.has(cell));
+      if (cells.length === 0) return;
+      const prepared = cells.map((cell) => ({ cell, node: prepareTableCellMeasurement(cell) }));
+      for (const { cell, node } of prepared) {
+        const key = cell.dataset.columnKey;
+        const style2 = window.getComputedStyle(cell);
+        const padding = (Number.parseFloat(style2.paddingLeft) || 0) + (Number.parseFloat(style2.paddingRight) || 0) + (Number.parseFloat(style2.borderLeftWidth) || 0) + (Number.parseFloat(style2.borderRightWidth) || 0);
+        measurements[key] = Math.max(measurements[key] ?? 0, node ? Math.max(node.scrollWidth, node.getBoundingClientRect().width) + padding : cell.scrollWidth);
+        measuredCells.current.add(cell);
+      }
+      prepared.forEach(({ node }) => node?.remove());
       for (const column of autoWidthColumns) {
-        let width = column.minWidth ?? 56;
-        for (const cell of cells) {
-          if (cell.dataset.columnKey !== column.key) continue;
-          width = Math.max(width, measureTableCellContentWidth(cell));
-        }
+        if (measurements[column.key] === void 0) continue;
+        const width = Math.max(column.minWidth ?? 56, autoColumnWidths[column.key] ?? 0, measurements[column.key]);
         measurements[column.key] = Math.ceil(Math.min(column.maxWidth ?? Number.POSITIVE_INFINITY, width));
       }
       setAutoColumnWidths((previous) => {
@@ -14730,6 +14828,21 @@ function TableInner(props, ref) {
   const renderedRows = pipeline.rows.slice(startIndex, endIndex);
   const topSpacer = shouldVirtualize ? startIndex * rowHeight : 0;
   const bottomSpacer = shouldVirtualize ? Math.max(0, (pipeline.rows.length - endIndex) * rowHeight) : 0;
+  const rowElements = (0, import_react51.useMemo)(() => /* @__PURE__ */ new Map(), [
+    dataSource,
+    baseColumns,
+    sortedPlugins,
+    pluginStates,
+    autoColumnWidths,
+    viewportWidth,
+    rowHeight,
+    striped,
+    rowClassName,
+    getRowKey,
+    onRowClick,
+    onRowDoubleClick,
+    onCellContextMenu
+  ]);
   const toolbarStart = sortedPlugins.map((plugin) => {
     const content = plugin.renderToolbarStart?.(getContext(plugin));
     return content ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react51.Fragment, { children: content }, `toolbar-start-${plugin.id}`) : null;
@@ -14756,9 +14869,9 @@ function TableInner(props, ref) {
   };
   const handleScroll = (0, import_react51.useCallback)((event) => {
     const element = event.currentTarget;
-    if (shouldVirtualize) setScrollTop(element.scrollTop);
+    if (shouldVirtualize) setScrollTop((previous) => Math.floor(previous / rowHeight) === Math.floor(element.scrollTop / rowHeight) ? previous : element.scrollTop);
     updateScrollMetrics();
-  }, [shouldVirtualize, updateScrollMetrics]);
+  }, [shouldVirtualize, rowHeight, updateScrollMetrics]);
   const handleScrollbarPointerDown = (0, import_react51.useCallback)((axis, event, track = event.currentTarget) => {
     const element = scrollRef.current;
     const thumb = track.firstElementChild;
@@ -14979,10 +15092,12 @@ function TableInner(props, ref) {
             /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("tbody", { children: [
               topSpacer > 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("tr", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("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 ?? "";
-                return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                const element = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
                   TableBodyRow,
                   {
                     row,
@@ -15028,6 +15143,8 @@ function TableInner(props, ref) {
                   },
                   row.key
                 );
+                rowElements.set(row.key, element);
+                return element;
               }),
               bottomSpacer > 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("tr", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("td", { colSpan: leafColumns.length, style: { height: bottomSpacer, padding: 0, border: 0 } }) }) : null
             ] }),
@@ -15213,13 +15330,13 @@ function TypographyContent({
   (0, import_react53.useEffect)(() => () => clearTimeout(timer.current), []);
   (0, import_react53.useLayoutEffect)(() => {
     const element = contentRef.current;
-    if (!element || !ellipsis || editing || expanded) return;
+    if (!element || !ellipsis || !expandable || editing || expanded) return;
     const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
     measure();
     const observer = new ResizeObserver(measure);
     observer.observe(element);
     return () => observer.disconnect();
-  }, [content, ellipsis, rows, editing, expanded]);
+  }, [content, ellipsis, rows, expandable, editing, expanded]);
   async function copy() {
     try {
       const text = typeof copyable === "object" ? copyable.text ?? contentRef.current?.textContent ?? "" : contentRef.current?.textContent ?? "";

package/dist/index.css

@@ -2541,6 +2541,71 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-card--collapsed .sia-card__header {
   border-bottom-color: transparent;
 }
+.sia-card--selectable {
+  position: relative;
+  cursor: pointer;
+}
+.sia-card__selected-corner {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  background: var(--sia-color-primary);
+  color: white;
+  clip-path: polygon(0 0, 100% 0, 100% 100%);
+  border-top-right-radius: var(--sia-radius);
+  pointer-events: none;
+  z-index: 1;
+}
+.sia-card__selected-corner > .sia-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+}
+.sia-card--selectable[aria-disabled=true] {
+  cursor: default;
+}
+.sia-card.sia-card--selected {
+  border-color: var(--sia-color-primary);
+  box-shadow: inset 0 0 0 1px var(--sia-color-primary);
+}
+.sia-card--selectable:focus-visible {
+  outline: 2px solid var(--sia-color-primary);
+  outline-offset: 2px;
+}
+.sia-card--hover-actions {
+  position: relative;
+  overflow: hidden;
+}
+.sia-card__hover-actions {
+  position: absolute;
+  inset: auto 0 0;
+  padding: 8px 16px;
+  background: var(--sia-color-surface);
+  border-top: 1px solid var(--sia-color-border);
+  transform: translateY(100%);
+  visibility: hidden;
+  transition: transform 180ms ease, visibility 180ms;
+}
+.sia-card--hover-actions:hover > .sia-card__hover-actions,
+.sia-card--hover-actions:has(:focus-visible) > .sia-card__hover-actions,
+.sia-card--hover-actions:focus-visible > .sia-card__hover-actions {
+  transform: translateY(0);
+  visibility: visible;
+}
+@media (hover: none) {
+  .sia-card__hover-actions {
+    position: static;
+    transform: none;
+    visibility: visible;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-card__hover-actions {
+    transition: none;
+  }
+}
 .sia-alert {
   display: flex;
   align-items: flex-start;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-C2IieVNm.cjs';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-C2IieVNm.cjs';
+import { T as TagStatus, B as BadgeProps } from './core-CADzSGab.cjs';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-CADzSGab.cjs';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';
@@ -2134,6 +2134,7 @@ interface TableProps<T extends Record<string, unknown> = Record<string, unknown>
     cellSelection?: boolean;
     /**
      * 是否显示序号列，默认从 1 开始；搭配分页插件时按页码连续编号，存在勾选列时放在其后。
+     * 序号列固定在业务列之前（勾选列之后），不参与列设置中的排序、显隐和固定位置调整。
      * 显式传入 createIndexPlugin 可自定义标题、宽度和起始编号，不会重复生成序号列；false 时禁用序号插件（包括显式传入的插件）。
      * @defaultValue true
      */
@@ -2556,7 +2557,7 @@ interface TableIndexPluginOptions {
     /** 序号列的起始编号。 */
     startIndex?: number;
 }
-/** 创建表格序号列插件。Table 默认内置；显式加入 plugins 可覆盖标题、宽度和起始编号，不重复加载。Table 的 showIndex=false 时禁用。 */
+/** 创建表格序号列插件。Table 默认内置；显式加入 plugins 可覆盖标题、宽度和起始编号，不重复加载。Table 的 showIndex=false 时禁用。序号固定在业务列之前（有勾选列时位于其后），不参与列设置。 */
 declare function createIndexPlugin<T extends Record<string, unknown>>(options?: TableIndexPluginOptions): TablePlugin<T, undefined>;
 /** TableTree的插件配置。 */
 interface TableTreePluginOptions<T> {
@@ -2709,7 +2710,7 @@ interface TableColumnSettingApi {
     /** 应用传入的配置；是否持久化由方法参数或插件选项控制。 */
     apply: (settings: readonly TableColumnSettingItem[]) => void;
 }
-/** 创建表格列设置和持久化插件。将返回值加入 Table 的 plugins 后生效。 */
+/** 创建表格列设置和持久化插件。将返回值加入 Table 的 plugins 后生效；序号和勾选附加列不显示在设置中，不参与业务列排序、显隐、固定位置与宽度配置，旧存储中的附加列配置会被忽略。 */
 declare function createColumnSettingPlugin<T extends Record<string, unknown>>(options?: TableColumnSettingPluginOptions<T>): TablePlugin<T, ColumnSettingState, TableColumnSettingApi>;
 /** 创建使用 localStorage 持久化表格设置的适配器，按模块及业务标识隔离配置。 */
 declare function createLocalStorageTableSettingsAdapter(prefix?: string): TableSettingsAdapter;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-ZmKnvCFV.js';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-ZmKnvCFV.js';
+import { T as TagStatus, B as BadgeProps } from './core-wsymjzoC.js';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-wsymjzoC.js';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';
@@ -2134,6 +2134,7 @@ interface TableProps<T extends Record<string, unknown> = Record<string, unknown>
     cellSelection?: boolean;
     /**
      * 是否显示序号列，默认从 1 开始；搭配分页插件时按页码连续编号，存在勾选列时放在其后。
+     * 序号列固定在业务列之前（勾选列之后），不参与列设置中的排序、显隐和固定位置调整。
      * 显式传入 createIndexPlugin 可自定义标题、宽度和起始编号，不会重复生成序号列；false 时禁用序号插件（包括显式传入的插件）。
      * @defaultValue true
      */
@@ -2556,7 +2557,7 @@ interface TableIndexPluginOptions {
     /** 序号列的起始编号。 */
     startIndex?: number;
 }
-/** 创建表格序号列插件。Table 默认内置；显式加入 plugins 可覆盖标题、宽度和起始编号，不重复加载。Table 的 showIndex=false 时禁用。 */
+/** 创建表格序号列插件。Table 默认内置；显式加入 plugins 可覆盖标题、宽度和起始编号，不重复加载。Table 的 showIndex=false 时禁用。序号固定在业务列之前（有勾选列时位于其后），不参与列设置。 */
 declare function createIndexPlugin<T extends Record<string, unknown>>(options?: TableIndexPluginOptions): TablePlugin<T, undefined>;
 /** TableTree的插件配置。 */
 interface TableTreePluginOptions<T> {
@@ -2709,7 +2710,7 @@ interface TableColumnSettingApi {
     /** 应用传入的配置；是否持久化由方法参数或插件选项控制。 */
     apply: (settings: readonly TableColumnSettingItem[]) => void;
 }
-/** 创建表格列设置和持久化插件。将返回值加入 Table 的 plugins 后生效。 */
+/** 创建表格列设置和持久化插件。将返回值加入 Table 的 plugins 后生效；序号和勾选附加列不显示在设置中，不参与业务列排序、显隐、固定位置与宽度配置，旧存储中的附加列配置会被忽略。 */
 declare function createColumnSettingPlugin<T extends Record<string, unknown>>(options?: TableColumnSettingPluginOptions<T>): TablePlugin<T, ColumnSettingState, TableColumnSettingApi>;
 /** 创建使用 localStorage 持久化表格设置的适配器，按模块及业务标识隔离配置。 */
 declare function createLocalStorageTableSettingsAdapter(prefix?: string): TableSettingsAdapter;