@sia.soul/sia-react-ui 0.1.80 → 0.1.81

package/dist/core.css

@@ -10376,10 +10376,14 @@ button.sia-treemap__tile:focus-visible,
 }
 .sia-treemap__value {
   flex: 0 0 auto;
+  max-width: 100%;
+  overflow: hidden;
   color: rgb(21 34 56 / 72%);
   font-size: var(--sia-treemap-value-font-size, 11px);
   font-variant-numeric: tabular-nums;
   line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 [data-sia-theme=dark] .sia-treemap__tile {
   --sia-treemap-tile-color: color-mix(in srgb, var(--sia-treemap-color, #7aa8e8) 34%, #243248);

package/dist/index.cjs

@@ -11912,12 +11912,86 @@ function collapseNarrowNodes(nodes, placements, bounds, minimumArea, minimumWidt
   };
   return squarify([...kept, overflowNode], bounds, minimumArea);
 }
-function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWidth, minTileHeight, maxVisibleNodes, overflowLabel, activeKey, depth = 0, parentKey = "root") {
+function placeCompactGrid(nodes, bounds, minimumWidth, minimumHeight) {
+  if (nodes.length === 0 || bounds.width <= 0 || bounds.height <= 0) return [];
+  const preferredAspectRatio = Math.max(0.1, minimumWidth / Math.max(1, minimumHeight));
+  let columnCount = 1;
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (let columns = 1; columns <= nodes.length; columns += 1) {
+    const rows = Math.ceil(nodes.length / columns);
+    const cellWidth = bounds.width / columns;
+    const cellHeight = bounds.height / rows;
+    const widthDeficit = Math.max(0, minimumWidth - cellWidth) / Math.max(1, minimumWidth);
+    const heightDeficit = Math.max(0, minimumHeight - cellHeight) / Math.max(1, minimumHeight);
+    const aspectPenalty = Math.abs(Math.log(Math.max(0.01, cellWidth / Math.max(1, cellHeight)) / preferredAspectRatio));
+    const emptyPenalty = (rows * columns - nodes.length) / nodes.length;
+    const score = (widthDeficit + heightDeficit) * 12 + aspectPenalty + emptyPenalty * 0.25;
+    if (score < bestScore) {
+      bestScore = score;
+      columnCount = columns;
+    }
+  }
+  const orderedNodes = [...nodes].sort((left, right) => layoutValue(right) - layoutValue(left));
+  const rowCount = Math.ceil(orderedNodes.length / columnCount);
+  const rowHeight = bounds.height / rowCount;
+  return orderedNodes.map((node, index) => {
+    const row = Math.floor(index / columnCount);
+    const firstIndex = row * columnCount;
+    const itemsInRow = Math.min(columnCount, orderedNodes.length - firstIndex);
+    const column = index - firstIndex;
+    const cellWidth = bounds.width / itemsInRow;
+    return {
+      node,
+      rectangle: {
+        x: bounds.x + column * cellWidth,
+        y: bounds.y + row * rowHeight,
+        width: column === itemsInRow - 1 ? bounds.x + bounds.width - (bounds.x + column * cellWidth) : cellWidth,
+        height: row === rowCount - 1 ? bounds.y + bounds.height - (bounds.y + row * rowHeight) : rowHeight
+      }
+    };
+  });
+}
+function preserveNarrowNodes(nodes, placements, bounds, minimumArea, minimumWidth, minimumHeight, groupKey) {
+  const narrowKeys = new Set(
+    placements.filter(({ rectangle }) => rectangle.width < minimumWidth || rectangle.height < minimumHeight).map(({ node }) => node.key)
+  );
+  if (narrowKeys.size === 0) return placements;
+  let kept = nodes.filter((node) => !narrowKeys.has(node.key));
+  let compact = nodes.filter((node) => narrowKeys.has(node.key));
+  const totalArea = Math.max(1, bounds.width * bounds.height);
+  while (kept.length > 0) {
+    const keptWeight = kept.reduce((sum, node) => sum + layoutValue(node), 0);
+    const compactWeight = compact.reduce((sum, node) => sum + layoutValue(node), 0);
+    const proportionalArea = totalArea * compactWeight / Math.max(1, keptWeight + compactWeight);
+    const readableArea = Math.min(
+      totalArea * 0.82,
+      Math.max(proportionalArea, compact.length * minimumArea)
+    );
+    const compactLayoutWeight = readableArea * keptWeight / Math.max(1, totalArea - readableArea);
+    const compactGroup = {
+      key: `${groupKey}::sia-compact-grid`,
+      label: "",
+      value: compact.reduce((sum, node) => sum + Math.max(0, node.value), 0),
+      layoutValue: Math.max(compactWeight, compactLayoutWeight)
+    };
+    const outerPlacements = squarify([...kept, compactGroup], bounds, minimumArea);
+    const newlyNarrowKeys = new Set(
+      outerPlacements.filter(({ node, rectangle }) => node.key !== compactGroup.key && (rectangle.width < minimumWidth || rectangle.height < minimumHeight)).map(({ node }) => node.key)
+    );
+    if (newlyNarrowKeys.size === 0) {
+      return outerPlacements.flatMap(({ node, rectangle }) => node.key === compactGroup.key ? placeCompactGrid(compact, rectangle, minimumWidth, minimumHeight) : [{ node, rectangle }]);
+    }
+    compact = [...compact, ...kept.filter((node) => newlyNarrowKeys.has(node.key))];
+    kept = kept.filter((node) => !newlyNarrowKeys.has(node.key));
+  }
+  return placeCompactGrid(compact, bounds, minimumWidth, minimumHeight);
+}
+function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWidth, minTileHeight, maxVisibleNodes, aggregateOverflow, overflowLabel, activeKey, depth = 0, parentKey = "root") {
   const result = [];
   const minimumWidthWithGap = minTileWidth + gap * 2;
   const minimumHeightWithGap = minTileHeight + gap * 2;
   const minimumArea = Math.max(1, minimumWidthWithGap * minimumHeightWithGap);
-  const visibleNodes = limitNodes(
+  const visibleNodes = aggregateOverflow ? limitNodes(
     nodes,
     bounds,
     minimumArea,
@@ -11925,9 +11999,9 @@ function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWid
     `${parentKey}:${depth}`,
     overflowLabel,
     activeKey
-  );
+  ) : nodes;
   const initialPlacements = squarify(visibleNodes, bounds, minimumArea);
-  const placements = parentKey.endsWith("::sia-readable-overflow") ? initialPlacements : collapseNarrowNodes(
+  const placements = aggregateOverflow ? parentKey.endsWith("::sia-readable-overflow") ? initialPlacements : collapseNarrowNodes(
     visibleNodes,
     initialPlacements,
     bounds,
@@ -11937,6 +12011,14 @@ function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWid
     `${parentKey}:${depth}`,
     overflowLabel,
     activeKey
+  ) : preserveNarrowNodes(
+    visibleNodes,
+    initialPlacements,
+    bounds,
+    minimumArea,
+    minimumWidthWithGap,
+    minimumHeightWithGap,
+    `${parentKey}:${depth}`
   );
   placements.forEach(({ node, rectangle }) => {
     const inset = Math.min(gap, rectangle.width / 4, rectangle.height / 4);
@@ -11965,6 +12047,7 @@ function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWid
       minTileWidth,
       minTileHeight,
       maxVisibleNodes,
+      aggregateOverflow,
       overflowLabel,
       activeKey,
       depth + 1,
@@ -12009,9 +12092,11 @@ function Treemap({
   minTileWidth = 28,
   minTileHeight = 18,
   maxVisibleNodes = 180,
+  aggregateOverflow = true,
   emptyContent = "\u6682\u65E0\u6570\u636E",
   valueFormatter = defaultValueFormatter,
   overflowLabel = (count) => `\u5176\u4ED6 ${count} \u9879`,
+  showValueInCompactTiles = false,
   onExpandedChange,
   onFocusedChange,
   onNodeClick,
@@ -12041,10 +12126,11 @@ function Treemap({
       Math.max(1, minTileWidth),
       Math.max(1, minTileHeight),
       Math.max(1, maxVisibleNodes),
+      aggregateOverflow,
       overflowLabel,
       activeKey
     ),
-    [activeKey, data, effectiveFocusedNode, expandedSet, gap, headerHeight, maxVisibleNodes, minTileHeight, minTileWidth, overflowLabel, size]
+    [activeKey, aggregateOverflow, data, effectiveFocusedNode, expandedSet, gap, headerHeight, maxVisibleNodes, minTileHeight, minTileWidth, overflowLabel, size]
   );
   (0, import_react47.useEffect)(() => {
     const element = containerRef.current;
@@ -12102,7 +12188,7 @@ function Treemap({
             "--sia-treemap-value-font-size": `${Math.max(7, fontSize - 1)}px`
           };
           const showLabel = rectangle.width >= minLabelWidth && rectangle.height >= minLabelHeight;
-          const showValue = rectangle.width >= Math.max(52, minLabelWidth) && rectangle.height >= Math.max(34, minLabelHeight + 12);
+          const showValue = showLabel && (showValueInCompactTiles || rectangle.width >= Math.max(52, minLabelWidth) && rectangle.height >= Math.max(34, minLabelHeight + 12));
           const hasChildren = Boolean(node.hasChildren || node.children?.length);
           const title = `${node.label} \xB7 ${String(valueFormatter(node.value, node))}`;
           if (expanded) {
@@ -12494,6 +12580,69 @@ var import_react53 = require("react");
 
 // src/components/Table/plugins.tsx
 var import_react52 = require("react");
+
+// src/components/Table/columnSettings.ts
+function reconcileColumnSettings(columns, defaults, saved) {
+  const stored = new Map(saved.map((item) => [item.key, item]));
+  const base = new Map(defaults.map((item) => [item.key, item]));
+  const result = [];
+  const rank = (column) => {
+    const own = stored.get(column.key)?.order;
+    if (own !== void 0) return own;
+    const children = column.children?.map(rank).filter((value) => value !== void 0);
+    return children?.length ? Math.min(...children) : void 0;
+  };
+  const walk = (source, parent) => {
+    const entries = source.map((column, index) => ({ column, index, rank: rank(column) }));
+    let anchor = -1;
+    for (const entry of entries) {
+      if (entry.rank !== void 0) anchor = entry.rank;
+      else entry.rank = anchor + (entry.index + 1) / (entries.length + 1);
+    }
+    entries.sort((a, b) => a.rank - b.rank || a.index - b.index);
+    for (const { column } of entries) {
+      const own = stored.get(column.key);
+      if (column.children?.length) {
+        walk(column.children, own ?? parent);
+      } else {
+        const fallback = base.get(column.key);
+        if (!fallback) continue;
+        const item = own ?? {
+          ...fallback,
+          fixed: parent?.fixed ?? fallback.fixed,
+          visible: fallback.visible && (parent?.visible ?? true)
+        };
+        result.push({ ...item, order: result.length });
+      }
+    }
+  };
+  walk(columns);
+  return result;
+}
+function mergeColumnSettings(columns, saved, active) {
+  const merged = new Map(saved.filter((item) => !["__index__", "__selection__"].includes(item.key)).map((item) => [item.key, item]));
+  active.forEach((item) => merged.set(item.key, item));
+  const current = new Map(active.map((item) => [item.key, item]));
+  const walk = (column) => {
+    if (!column.children?.length) return current.has(column.key) ? [current.get(column.key)] : [];
+    const leaves = column.children.flatMap(walk);
+    if (leaves.length) {
+      const old = merged.get(column.key);
+      merged.set(column.key, {
+        key: column.key,
+        width: old?.width ?? column.width,
+        fixed: old?.fixed,
+        visible: leaves.some((item) => item.visible),
+        order: Math.min(...leaves.map((item) => item.order))
+      });
+    }
+    return leaves;
+  };
+  columns.forEach(walk);
+  return [...merged.values()].sort((left, right) => left.order - right.order);
+}
+
+// src/components/Table/plugins.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function TableCheckbox({
   checked,
@@ -14584,13 +14733,14 @@ function createColumnSettingPlugin(options = {}) {
     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 currentItems = (context) => reconcileColumnSettings(context.baseColumns, baseItems(context), context.state.items ?? []);
   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(
       editableItems(items, context).sort((a, b) => a.order - b.order)
     );
-    context.setState((state) => ({ ...state, items: normalized, open: false }));
+    const snapshot = mergeColumnSettings(context.baseColumns, context.state.items, normalized);
+    context.setState((state) => ({ ...state, items: snapshot, open: false }));
     const columnMap = new Map(
       flattenTableColumns(context.baseColumns).map((column) => [
         column.key,
@@ -14605,7 +14755,7 @@ function createColumnSettingPlugin(options = {}) {
     );
     if (persist)
       void save({
-        columns: normalized,
+        columns: snapshot,
         pageSize: context.state.pageSize,
         version: 1
       });
@@ -14670,9 +14820,10 @@ function createColumnSettingPlugin(options = {}) {
         const next = currentItems(context).map(
           (item) => item.key === columnKey ? { ...item, width } : item
         );
-        context.setState((state) => ({ ...state, items: next }));
+        const snapshot = mergeColumnSettings(context.baseColumns, context.state.items, next);
+        context.setState((state) => ({ ...state, items: snapshot }));
         void save({
-          columns: next,
+          columns: snapshot,
           pageSize: context.state.pageSize,
           version: 1
         });
@@ -14680,7 +14831,7 @@ function createColumnSettingPlugin(options = {}) {
       if (event.type === "pageSizeChange") {
         const pageSize = event.payload;
         context.setState((state) => ({ ...state, pageSize }));
-        void save({ columns: currentItems(context), pageSize, version: 1 });
+        void save({ columns: mergeColumnSettings(context.baseColumns, context.state.items, currentItems(context)), pageSize, version: 1 });
       }
     },
     renderToolbarEnd: options.showButton === false ? void 0 : (context) => {

package/dist/index.css

@@ -10376,10 +10376,14 @@ button.sia-treemap__tile:focus-visible,
 }
 .sia-treemap__value {
   flex: 0 0 auto;
+  max-width: 100%;
+  overflow: hidden;
   color: rgb(21 34 56 / 72%);
   font-size: var(--sia-treemap-value-font-size, 11px);
   font-variant-numeric: tabular-nums;
   line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 [data-sia-theme=dark] .sia-treemap__tile {
   --sia-treemap-tile-color: color-mix(in srgb, var(--sia-treemap-color, #7aa8e8) 34%, #243248);

package/dist/index.d.cts

@@ -1802,10 +1802,15 @@ interface TreemapProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">
      */
     minTileHeight?: number;
     /**
-     * 最大可见节点数，超出后合并为其他项
+     * 启用节点聚合时允许直接显示的最大节点数；超出后合并为一个汇总节点。
      * @defaultValue 180
      */
     maxVisibleNodes?: number;
+    /**
+     * 是否把数量超限或无法满足最小尺寸的节点合并为汇总节点。关闭后保留每个原始节点，并将尺寸不足的节点排列为紧凑网格；当容器面积不足以容纳所有最小尺寸时，网格仍会按现有空间等分。
+     * @defaultValue true
+     */
+    aggregateOverflow?: boolean;
     /**
      * 没有数据时的显示内容。
      * @defaultValue "暂无数据"
@@ -1816,8 +1821,13 @@ interface TreemapProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">
      * @defaultValue defaultValueFormatter
      */
     valueFormatter?: (value: number, node: TreemapNode) => ReactNode;
-    /** 自定义合并节点文案 */
+    /** 启用节点聚合时用于生成汇总节点名称；参数为被合并的节点数量。 */
     overflowLabel?: (count: number) => string;
+    /**
+     * 是否在紧凑矩形块中也显示格式化后的数值；内容超出矩形块时按组件样式截断。
+     * @defaultValue false
+     */
+    showValueInCompactTiles?: boolean;
     /** 展开状态改变时调用。 */
     onExpandedChange?: (keys: string[]) => void;
     /** 聚焦节点改变时调用。 */
@@ -1826,7 +1836,7 @@ interface TreemapProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">
     onNodeClick?: (info: TreemapNodeClickInfo) => void;
 }
 /** 矩形树图组件。 */
-declare function Treemap({ data, activeKey, expandedKeys, defaultExpandedKeys, focusedKey, defaultFocusedKey, gap, headerHeight, minLabelWidth, minLabelHeight, minTileWidth, minTileHeight, maxVisibleNodes, emptyContent, valueFormatter, overflowLabel, onExpandedChange, onFocusedChange, onNodeClick, className, style, ...props }: TreemapProps): react.JSX.Element;
+declare function Treemap({ data, activeKey, expandedKeys, defaultExpandedKeys, focusedKey, defaultFocusedKey, gap, headerHeight, minLabelWidth, minLabelHeight, minTileWidth, minTileHeight, maxVisibleNodes, aggregateOverflow, emptyContent, valueFormatter, overflowLabel, showValueInCompactTiles, onExpandedChange, onFocusedChange, onNodeClick, className, style, ...props }: TreemapProps): react.JSX.Element;
 
 /** 表格行或列的唯一标识类型。 */
 type TableKey = Key;
@@ -2744,7 +2754,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

@@ -1802,10 +1802,15 @@ interface TreemapProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">
      */
     minTileHeight?: number;
     /**
-     * 最大可见节点数，超出后合并为其他项
+     * 启用节点聚合时允许直接显示的最大节点数；超出后合并为一个汇总节点。
      * @defaultValue 180
      */
     maxVisibleNodes?: number;
+    /**
+     * 是否把数量超限或无法满足最小尺寸的节点合并为汇总节点。关闭后保留每个原始节点，并将尺寸不足的节点排列为紧凑网格；当容器面积不足以容纳所有最小尺寸时，网格仍会按现有空间等分。
+     * @defaultValue true
+     */
+    aggregateOverflow?: boolean;
     /**
      * 没有数据时的显示内容。
      * @defaultValue "暂无数据"
@@ -1816,8 +1821,13 @@ interface TreemapProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">
      * @defaultValue defaultValueFormatter
      */
     valueFormatter?: (value: number, node: TreemapNode) => ReactNode;
-    /** 自定义合并节点文案 */
+    /** 启用节点聚合时用于生成汇总节点名称；参数为被合并的节点数量。 */
     overflowLabel?: (count: number) => string;
+    /**
+     * 是否在紧凑矩形块中也显示格式化后的数值；内容超出矩形块时按组件样式截断。
+     * @defaultValue false
+     */
+    showValueInCompactTiles?: boolean;
     /** 展开状态改变时调用。 */
     onExpandedChange?: (keys: string[]) => void;
     /** 聚焦节点改变时调用。 */
@@ -1826,7 +1836,7 @@ interface TreemapProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">
     onNodeClick?: (info: TreemapNodeClickInfo) => void;
 }
 /** 矩形树图组件。 */
-declare function Treemap({ data, activeKey, expandedKeys, defaultExpandedKeys, focusedKey, defaultFocusedKey, gap, headerHeight, minLabelWidth, minLabelHeight, minTileWidth, minTileHeight, maxVisibleNodes, emptyContent, valueFormatter, overflowLabel, onExpandedChange, onFocusedChange, onNodeClick, className, style, ...props }: TreemapProps): react.JSX.Element;
+declare function Treemap({ data, activeKey, expandedKeys, defaultExpandedKeys, focusedKey, defaultFocusedKey, gap, headerHeight, minLabelWidth, minLabelHeight, minTileWidth, minTileHeight, maxVisibleNodes, aggregateOverflow, emptyContent, valueFormatter, overflowLabel, showValueInCompactTiles, onExpandedChange, onFocusedChange, onNodeClick, className, style, ...props }: TreemapProps): react.JSX.Element;
 
 /** 表格行或列的唯一标识类型。 */
 type TableKey = Key;
@@ -2744,7 +2754,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.js

@@ -4434,12 +4434,86 @@ function collapseNarrowNodes(nodes, placements, bounds, minimumArea, minimumWidt
   };
   return squarify([...kept, overflowNode], bounds, minimumArea);
 }
-function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWidth, minTileHeight, maxVisibleNodes, overflowLabel, activeKey, depth = 0, parentKey = "root") {
+function placeCompactGrid(nodes, bounds, minimumWidth, minimumHeight) {
+  if (nodes.length === 0 || bounds.width <= 0 || bounds.height <= 0) return [];
+  const preferredAspectRatio = Math.max(0.1, minimumWidth / Math.max(1, minimumHeight));
+  let columnCount = 1;
+  let bestScore = Number.POSITIVE_INFINITY;
+  for (let columns = 1; columns <= nodes.length; columns += 1) {
+    const rows = Math.ceil(nodes.length / columns);
+    const cellWidth = bounds.width / columns;
+    const cellHeight = bounds.height / rows;
+    const widthDeficit = Math.max(0, minimumWidth - cellWidth) / Math.max(1, minimumWidth);
+    const heightDeficit = Math.max(0, minimumHeight - cellHeight) / Math.max(1, minimumHeight);
+    const aspectPenalty = Math.abs(Math.log(Math.max(0.01, cellWidth / Math.max(1, cellHeight)) / preferredAspectRatio));
+    const emptyPenalty = (rows * columns - nodes.length) / nodes.length;
+    const score = (widthDeficit + heightDeficit) * 12 + aspectPenalty + emptyPenalty * 0.25;
+    if (score < bestScore) {
+      bestScore = score;
+      columnCount = columns;
+    }
+  }
+  const orderedNodes = [...nodes].sort((left, right) => layoutValue(right) - layoutValue(left));
+  const rowCount = Math.ceil(orderedNodes.length / columnCount);
+  const rowHeight = bounds.height / rowCount;
+  return orderedNodes.map((node, index) => {
+    const row = Math.floor(index / columnCount);
+    const firstIndex = row * columnCount;
+    const itemsInRow = Math.min(columnCount, orderedNodes.length - firstIndex);
+    const column = index - firstIndex;
+    const cellWidth = bounds.width / itemsInRow;
+    return {
+      node,
+      rectangle: {
+        x: bounds.x + column * cellWidth,
+        y: bounds.y + row * rowHeight,
+        width: column === itemsInRow - 1 ? bounds.x + bounds.width - (bounds.x + column * cellWidth) : cellWidth,
+        height: row === rowCount - 1 ? bounds.y + bounds.height - (bounds.y + row * rowHeight) : rowHeight
+      }
+    };
+  });
+}
+function preserveNarrowNodes(nodes, placements, bounds, minimumArea, minimumWidth, minimumHeight, groupKey) {
+  const narrowKeys = new Set(
+    placements.filter(({ rectangle }) => rectangle.width < minimumWidth || rectangle.height < minimumHeight).map(({ node }) => node.key)
+  );
+  if (narrowKeys.size === 0) return placements;
+  let kept = nodes.filter((node) => !narrowKeys.has(node.key));
+  let compact = nodes.filter((node) => narrowKeys.has(node.key));
+  const totalArea = Math.max(1, bounds.width * bounds.height);
+  while (kept.length > 0) {
+    const keptWeight = kept.reduce((sum, node) => sum + layoutValue(node), 0);
+    const compactWeight = compact.reduce((sum, node) => sum + layoutValue(node), 0);
+    const proportionalArea = totalArea * compactWeight / Math.max(1, keptWeight + compactWeight);
+    const readableArea = Math.min(
+      totalArea * 0.82,
+      Math.max(proportionalArea, compact.length * minimumArea)
+    );
+    const compactLayoutWeight = readableArea * keptWeight / Math.max(1, totalArea - readableArea);
+    const compactGroup = {
+      key: `${groupKey}::sia-compact-grid`,
+      label: "",
+      value: compact.reduce((sum, node) => sum + Math.max(0, node.value), 0),
+      layoutValue: Math.max(compactWeight, compactLayoutWeight)
+    };
+    const outerPlacements = squarify([...kept, compactGroup], bounds, minimumArea);
+    const newlyNarrowKeys = new Set(
+      outerPlacements.filter(({ node, rectangle }) => node.key !== compactGroup.key && (rectangle.width < minimumWidth || rectangle.height < minimumHeight)).map(({ node }) => node.key)
+    );
+    if (newlyNarrowKeys.size === 0) {
+      return outerPlacements.flatMap(({ node, rectangle }) => node.key === compactGroup.key ? placeCompactGrid(compact, rectangle, minimumWidth, minimumHeight) : [{ node, rectangle }]);
+    }
+    compact = [...compact, ...kept.filter((node) => newlyNarrowKeys.has(node.key))];
+    kept = kept.filter((node) => !newlyNarrowKeys.has(node.key));
+  }
+  return placeCompactGrid(compact, bounds, minimumWidth, minimumHeight);
+}
+function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWidth, minTileHeight, maxVisibleNodes, aggregateOverflow, overflowLabel, activeKey, depth = 0, parentKey = "root") {
   const result = [];
   const minimumWidthWithGap = minTileWidth + gap * 2;
   const minimumHeightWithGap = minTileHeight + gap * 2;
   const minimumArea = Math.max(1, minimumWidthWithGap * minimumHeightWithGap);
-  const visibleNodes = limitNodes(
+  const visibleNodes = aggregateOverflow ? limitNodes(
     nodes,
     bounds,
     minimumArea,
@@ -4447,9 +4521,9 @@ function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWid
     `${parentKey}:${depth}`,
     overflowLabel,
     activeKey
-  );
+  ) : nodes;
   const initialPlacements = squarify(visibleNodes, bounds, minimumArea);
-  const placements = parentKey.endsWith("::sia-readable-overflow") ? initialPlacements : collapseNarrowNodes(
+  const placements = aggregateOverflow ? parentKey.endsWith("::sia-readable-overflow") ? initialPlacements : collapseNarrowNodes(
     visibleNodes,
     initialPlacements,
     bounds,
@@ -4459,6 +4533,14 @@ function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWid
     `${parentKey}:${depth}`,
     overflowLabel,
     activeKey
+  ) : preserveNarrowNodes(
+    visibleNodes,
+    initialPlacements,
+    bounds,
+    minimumArea,
+    minimumWidthWithGap,
+    minimumHeightWithGap,
+    `${parentKey}:${depth}`
   );
   placements.forEach(({ node, rectangle }) => {
     const inset = Math.min(gap, rectangle.width / 4, rectangle.height / 4);
@@ -4487,6 +4569,7 @@ function collectPositions(nodes, bounds, expanded, gap, headerHeight, minTileWid
       minTileWidth,
       minTileHeight,
       maxVisibleNodes,
+      aggregateOverflow,
       overflowLabel,
       activeKey,
       depth + 1,
@@ -4531,9 +4614,11 @@ function Treemap({
   minTileWidth = 28,
   minTileHeight = 18,
   maxVisibleNodes = 180,
+  aggregateOverflow = true,
   emptyContent = "\u6682\u65E0\u6570\u636E",
   valueFormatter = defaultValueFormatter,
   overflowLabel = (count) => `\u5176\u4ED6 ${count} \u9879`,
+  showValueInCompactTiles = false,
   onExpandedChange,
   onFocusedChange,
   onNodeClick,
@@ -4563,10 +4648,11 @@ function Treemap({
       Math.max(1, minTileWidth),
       Math.max(1, minTileHeight),
       Math.max(1, maxVisibleNodes),
+      aggregateOverflow,
       overflowLabel,
       activeKey
     ),
-    [activeKey, data, effectiveFocusedNode, expandedSet, gap, headerHeight, maxVisibleNodes, minTileHeight, minTileWidth, overflowLabel, size]
+    [activeKey, aggregateOverflow, data, effectiveFocusedNode, expandedSet, gap, headerHeight, maxVisibleNodes, minTileHeight, minTileWidth, overflowLabel, size]
   );
   useEffect10(() => {
     const element = containerRef.current;
@@ -4624,7 +4710,7 @@ function Treemap({
             "--sia-treemap-value-font-size": `${Math.max(7, fontSize - 1)}px`
           };
           const showLabel = rectangle.width >= minLabelWidth && rectangle.height >= minLabelHeight;
-          const showValue = rectangle.width >= Math.max(52, minLabelWidth) && rectangle.height >= Math.max(34, minLabelHeight + 12);
+          const showValue = showLabel && (showValueInCompactTiles || rectangle.width >= Math.max(52, minLabelWidth) && rectangle.height >= Math.max(34, minLabelHeight + 12));
           const hasChildren = Boolean(node.hasChildren || node.children?.length);
           const title = `${node.label} \xB7 ${String(valueFormatter(node.value, node))}`;
           if (expanded) {
@@ -5016,6 +5102,69 @@ import { Fragment as Fragment8, forwardRef as forwardRef5, isValidElement as isV
 
 // src/components/Table/plugins.tsx
 import { isValidElement as isValidElement3, useEffect as useEffect11, useRef as useRef15, useState as useState18 } from "react";
+
+// src/components/Table/columnSettings.ts
+function reconcileColumnSettings(columns, defaults, saved) {
+  const stored = new Map(saved.map((item) => [item.key, item]));
+  const base = new Map(defaults.map((item) => [item.key, item]));
+  const result = [];
+  const rank = (column) => {
+    const own = stored.get(column.key)?.order;
+    if (own !== void 0) return own;
+    const children = column.children?.map(rank).filter((value) => value !== void 0);
+    return children?.length ? Math.min(...children) : void 0;
+  };
+  const walk = (source, parent) => {
+    const entries = source.map((column, index) => ({ column, index, rank: rank(column) }));
+    let anchor = -1;
+    for (const entry of entries) {
+      if (entry.rank !== void 0) anchor = entry.rank;
+      else entry.rank = anchor + (entry.index + 1) / (entries.length + 1);
+    }
+    entries.sort((a, b) => a.rank - b.rank || a.index - b.index);
+    for (const { column } of entries) {
+      const own = stored.get(column.key);
+      if (column.children?.length) {
+        walk(column.children, own ?? parent);
+      } else {
+        const fallback = base.get(column.key);
+        if (!fallback) continue;
+        const item = own ?? {
+          ...fallback,
+          fixed: parent?.fixed ?? fallback.fixed,
+          visible: fallback.visible && (parent?.visible ?? true)
+        };
+        result.push({ ...item, order: result.length });
+      }
+    }
+  };
+  walk(columns);
+  return result;
+}
+function mergeColumnSettings(columns, saved, active) {
+  const merged = new Map(saved.filter((item) => !["__index__", "__selection__"].includes(item.key)).map((item) => [item.key, item]));
+  active.forEach((item) => merged.set(item.key, item));
+  const current = new Map(active.map((item) => [item.key, item]));
+  const walk = (column) => {
+    if (!column.children?.length) return current.has(column.key) ? [current.get(column.key)] : [];
+    const leaves = column.children.flatMap(walk);
+    if (leaves.length) {
+      const old = merged.get(column.key);
+      merged.set(column.key, {
+        key: column.key,
+        width: old?.width ?? column.width,
+        fixed: old?.fixed,
+        visible: leaves.some((item) => item.visible),
+        order: Math.min(...leaves.map((item) => item.order))
+      });
+    }
+    return leaves;
+  };
+  columns.forEach(walk);
+  return [...merged.values()].sort((left, right) => left.order - right.order);
+}
+
+// src/components/Table/plugins.tsx
 import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 function TableCheckbox({
   checked,
@@ -7106,13 +7255,14 @@ function createColumnSettingPlugin(options = {}) {
     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 currentItems = (context) => reconcileColumnSettings(context.baseColumns, baseItems(context), context.state.items ?? []);
   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(
       editableItems(items, context).sort((a, b) => a.order - b.order)
     );
-    context.setState((state) => ({ ...state, items: normalized, open: false }));
+    const snapshot = mergeColumnSettings(context.baseColumns, context.state.items, normalized);
+    context.setState((state) => ({ ...state, items: snapshot, open: false }));
     const columnMap = new Map(
       flattenTableColumns(context.baseColumns).map((column) => [
         column.key,
@@ -7127,7 +7277,7 @@ function createColumnSettingPlugin(options = {}) {
     );
     if (persist)
       void save({
-        columns: normalized,
+        columns: snapshot,
         pageSize: context.state.pageSize,
         version: 1
       });
@@ -7192,9 +7342,10 @@ function createColumnSettingPlugin(options = {}) {
         const next = currentItems(context).map(
           (item) => item.key === columnKey ? { ...item, width } : item
         );
-        context.setState((state) => ({ ...state, items: next }));
+        const snapshot = mergeColumnSettings(context.baseColumns, context.state.items, next);
+        context.setState((state) => ({ ...state, items: snapshot }));
         void save({
-          columns: next,
+          columns: snapshot,
           pageSize: context.state.pageSize,
           version: 1
         });
@@ -7202,7 +7353,7 @@ function createColumnSettingPlugin(options = {}) {
       if (event.type === "pageSizeChange") {
         const pageSize = event.payload;
         context.setState((state) => ({ ...state, pageSize }));
-        void save({ columns: currentItems(context), pageSize, version: 1 });
+        void save({ columns: mergeColumnSettings(context.baseColumns, context.state.items, currentItems(context)), pageSize, version: 1 });
       }
     },
     renderToolbarEnd: options.showButton === false ? void 0 : (context) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.80",
+  "version": "0.1.81",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",