@underverse-ui/underverse 1.0.70 → 1.0.71

package/dist/index.js

@@ -20112,10 +20112,65 @@ var TableCaption = React52.forwardRef(({ className, ...props }, ref) => /* @__PU
 TableCaption.displayName = "TableCaption";
 
 // src/components/DataTable/DataTable.tsx
-import React61 from "react";
+import React62 from "react";
 
 // src/components/DataTable/components/DataTableBody.tsx
+import React53 from "react";
 import { jsx as jsx62, jsxs as jsxs52 } from "react/jsx-runtime";
+function DataTableOverflowText({
+  text,
+  align
+}) {
+  const triggerId = React53.useId();
+  const [isOverflowing, setIsOverflowing] = React53.useState(false);
+  const alignClass = align === "right" ? "text-right" : align === "center" ? "text-center" : "text-left";
+  const measureOverflow = React53.useCallback(() => {
+    if (typeof document === "undefined") return;
+    const element = document.querySelector(`[data-underverse-datatable-cell="${triggerId}"]`);
+    if (!element) return;
+    setIsOverflowing(
+      element.scrollWidth - element.clientWidth > 1 || element.scrollHeight - element.clientHeight > 1
+    );
+  }, [triggerId]);
+  React53.useLayoutEffect(() => {
+    measureOverflow();
+  }, [measureOverflow, text]);
+  React53.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const element = document.querySelector(`[data-underverse-datatable-cell="${triggerId}"]`);
+    if (!element) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      measureOverflow();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [measureOverflow, triggerId]);
+  const trigger = /* @__PURE__ */ jsx62(
+    "button",
+    {
+      type: "button",
+      "data-underverse-datatable-cell": triggerId,
+      onMouseEnter: measureOverflow,
+      onFocus: measureOverflow,
+      className: cn(
+        "block w-full truncate bg-transparent p-0 font-inherit text-inherit select-text",
+        "cursor-text",
+        alignClass
+      ),
+      children: text
+    }
+  );
+  return /* @__PURE__ */ jsx62(
+    Tooltip,
+    {
+      disabled: !isOverflowing,
+      placement: "top",
+      content: /* @__PURE__ */ jsx62("div", { className: cn("max-w-[min(40rem,calc(100vw-2rem))] whitespace-pre-wrap break-all select-text", alignClass), children: text }),
+      children: trigger
+    }
+  );
+}
 function DataTableBodyRows({
   leafColumns,
   displayedData,
@@ -20164,6 +20219,7 @@ function DataTableBodyRows({
           return /* @__PURE__ */ jsx62(
             TableCell,
             {
+              "data-underverse-column-key": col.key,
               style: getStickyColumnStyle(col),
               className: cn(
                 cellPadding,
@@ -20172,7 +20228,7 @@ function DataTableBodyRows({
                 showBorderLeft && "border-l border-border/60",
                 getStickyCellClass(col, isStripedRow)
               ),
-              children: col.render ? col.render(value, row, idx) : String(value ?? "")
+              children: col.render ? col.render(value, row, idx) : /* @__PURE__ */ jsx62(DataTableOverflowText, { text: String(value ?? ""), align: col.align })
             },
             col.key
           );
@@ -20184,7 +20240,7 @@ function DataTableBodyRows({
 }
 
 // src/components/DataTable/components/DataTableHeader.tsx
-import React53 from "react";
+import React54 from "react";
 import { Filter as FilterIcon } from "lucide-react";
 import { Fragment as Fragment22, jsx as jsx63, jsxs as jsxs53 } from "react/jsx-runtime";
 function DataTableHeader({
@@ -20200,11 +20256,13 @@ function DataTableHeader({
   setCurPage,
   setFilters,
   setSort,
+  onAutoFitColumn,
+  enableHeaderAutoFit,
   getStickyHeaderClass,
   getStickyHeaderCellStyle,
   t
 }) {
-  const renderFilterControl = React53.useCallback(
+  const renderFilterControl = React54.useCallback(
     (col) => {
       if (!col.filter) return null;
       const key = col.key;
@@ -20257,7 +20315,7 @@ function DataTableHeader({
     },
     [filters, setCurPage, setFilters, size]
   );
-  const renderHeaderContent = React53.useCallback(
+  const renderHeaderContent = React54.useCallback(
     (col, isLeaf) => {
       if (!isLeaf) {
         return /* @__PURE__ */ jsx63(
@@ -20397,22 +20455,55 @@ function DataTableHeader({
     const prevCol = prevCell?.column;
     const isAfterFixedLeft = prevCol?.fixed === "left";
     const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsxs53(
       TableHead,
       {
         colSpan,
         rowSpan,
+        "data-underverse-column-key": isLeaf ? col.key : void 0,
         style: {
           width: col.width,
           ...getStickyHeaderCellStyle(headerCell)
         },
         className: cn(
+          "relative",
           (col.align === "right" || !col.align && headerAlign === "right") && "text-right",
           (col.align === "center" || !col.align && headerAlign === "center") && "text-center",
           showBorderLeft && "border-l border-border/60",
           getStickyHeaderClass(col)
         ),
-        children: renderHeaderContent(col, isLeaf)
+        children: [
+          renderHeaderContent(col, isLeaf),
+          isLeaf && enableHeaderAutoFit && /* @__PURE__ */ jsx63(
+            Tooltip,
+            {
+              placement: "top",
+              content: /* @__PURE__ */ jsx63("span", { className: "text-xs font-medium", children: "Double click to auto-fit" }),
+              children: /* @__PURE__ */ jsx63(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": `Auto fit ${String(col.title)}`,
+                  onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                  },
+                  onDoubleClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    onAutoFitColumn?.(col.key);
+                  },
+                  className: cn(
+                    "absolute inset-y-0 right-0 z-10 w-3 -mr-1",
+                    "cursor-col-resize select-none bg-transparent",
+                    "after:absolute after:inset-y-2 after:right-[3px] after:w-px after:bg-border/0 after:transition-colors",
+                    "hover:after:bg-primary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary"
+                  )
+                }
+              )
+            }
+          )
+        ]
       },
       col.key
     );
@@ -20420,7 +20511,7 @@ function DataTableHeader({
 }
 
 // src/components/DataTable/components/Pagination.tsx
-import React54 from "react";
+import React55 from "react";
 import { jsx as jsx64, jsxs as jsxs54 } from "react/jsx-runtime";
 function DataTablePagination({
   totalItems,
@@ -20432,7 +20523,7 @@ function DataTablePagination({
   size
 }) {
   const totalPages = Math.ceil(totalItems / curPageSize);
-  const pages = React54.useMemo(() => {
+  const pages = React55.useMemo(() => {
     const result = [];
     if (totalPages <= 5) {
       for (let i = 1; i <= totalPages; i++) result.push(i);
@@ -20514,7 +20605,7 @@ function DataTablePagination({
 }
 
 // src/components/DataTable/components/Toolbar.tsx
-import React55 from "react";
+import React56 from "react";
 
 // src/components/DataTable/utils/headers.ts
 function isLeafColumn(col) {
@@ -20635,7 +20726,7 @@ function DataTableToolbar({
   const controlButtonClass = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-9 px-3 text-sm" : "h-8 px-2";
   const iconClass = size === "sm" ? "w-3.5 h-3.5 mr-1" : "w-4 h-4 mr-1";
   const captionClass = size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-sm";
-  const leafCols = React55.useMemo(() => getLeafColumns(columns), [columns]);
+  const leafCols = React56.useMemo(() => getLeafColumns(columns), [columns]);
   return /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
     /* @__PURE__ */ jsx65("div", { className: captionClass + " text-muted-foreground", children: caption }),
     /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2", children: [
@@ -20703,10 +20794,10 @@ function DataTableToolbar({
 }
 
 // src/components/DataTable/hooks/useDebounced.ts
-import React56 from "react";
+import React57 from "react";
 function useDebounced(value, delay = 300) {
-  const [debounced, setDebounced] = React56.useState(value);
-  React56.useEffect(() => {
+  const [debounced, setDebounced] = React57.useState(value);
+  React57.useEffect(() => {
     const id = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(id);
   }, [value, delay]);
@@ -20714,7 +20805,7 @@ function useDebounced(value, delay = 300) {
 }
 
 // src/components/DataTable/hooks/useDataTableModel.ts
-import React57 from "react";
+import React58 from "react";
 
 // src/components/DataTable/utils/columns.ts
 function getColumnWidth(col, fallback = 150) {
@@ -20742,22 +20833,22 @@ function useDataTableModel({
   isServerMode,
   total
 }) {
-  const visibleColsSet = React57.useMemo(() => new Set(visibleCols), [visibleCols]);
-  const allLeafColumns = React57.useMemo(() => getLeafColumns(columns), [columns]);
-  const columnMap = React57.useMemo(() => {
+  const visibleColsSet = React58.useMemo(() => new Set(visibleCols), [visibleCols]);
+  const allLeafColumns = React58.useMemo(() => getLeafColumns(columns), [columns]);
+  const columnMap = React58.useMemo(() => {
     return new Map(allLeafColumns.map((column) => [column.key, column]));
   }, [allLeafColumns]);
-  const visibleColumns = React57.useMemo(() => {
+  const visibleColumns = React58.useMemo(() => {
     return filterVisibleColumns(columns, visibleColsSet);
   }, [columns, visibleColsSet]);
-  const leafColumns = React57.useMemo(() => {
+  const leafColumns = React58.useMemo(() => {
     return getLeafColumnsWithFixedInheritance(visibleColumns);
   }, [visibleColumns]);
-  const headerRows = React57.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
-  const totalColumnsWidth = React57.useMemo(() => {
+  const headerRows = React58.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
+  const totalColumnsWidth = React58.useMemo(() => {
     return leafColumns.reduce((sum, column) => sum + getColumnWidth(column), 0);
   }, [leafColumns]);
-  const processedData = React57.useMemo(() => {
+  const processedData = React58.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
     if (Object.keys(filters).length > 0) {
@@ -20789,7 +20880,7 @@ function useDataTableModel({
     return result;
   }, [columnMap, data, filters, isServerMode, sort]);
   const totalItems = isServerMode ? total : processedData.length;
-  const displayedData = React57.useMemo(() => {
+  const displayedData = React58.useMemo(() => {
     if (isServerMode) return data;
     const start = (curPage - 1) * curPageSize;
     return processedData.slice(start, start + curPageSize);
@@ -20805,10 +20896,10 @@ function useDataTableModel({
 }
 
 // src/components/DataTable/hooks/useDataTableState.ts
-import React59 from "react";
+import React60 from "react";
 
 // src/components/DataTable/hooks/usePageSizeStorage.ts
-import React58 from "react";
+import React59 from "react";
 function readStoredPageSize(storageKey) {
   if (typeof window === "undefined" || !storageKey) return null;
   try {
@@ -20821,8 +20912,8 @@ function readStoredPageSize(storageKey) {
   }
 }
 function usePageSizeStorage({ pageSize, storageKey }) {
-  const storedPageSize = React58.useMemo(() => readStoredPageSize(storageKey), [storageKey]);
-  const [overrideState, setOverrideState] = React58.useState({
+  const storedPageSize = React59.useMemo(() => readStoredPageSize(storageKey), [storageKey]);
+  const [overrideState, setOverrideState] = React59.useState({
     storageKey,
     pageSize: null
   });
@@ -20830,7 +20921,7 @@ function usePageSizeStorage({ pageSize, storageKey }) {
   const persistedPageSize = storageKey ? overridePageSize ?? storedPageSize : null;
   const loadedFromStorage = persistedPageSize != null;
   const curPageSize = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
-  const setCurPageSize = React58.useCallback(
+  const setCurPageSize = React59.useCallback(
     (nextPageSize) => {
       const baseValue = storageKey ? persistedPageSize ?? pageSize : overridePageSize ?? pageSize;
       const resolved = typeof nextPageSize === "function" ? nextPageSize(baseValue) : nextPageSize;
@@ -20859,17 +20950,17 @@ function useDataTableState({
   size,
   storageKey
 }) {
-  const allLeafColumns = React59.useMemo(() => getLeafColumns(columns), [columns]);
-  const defaultVisibleLeafKeys = React59.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
-  const knownLeafKeysRef = React59.useRef(new Set(defaultVisibleLeafKeys));
-  const [headerAlign, setHeaderAlign] = React59.useState("left");
-  const [visibleCols, setVisibleCols] = React59.useState(defaultVisibleLeafKeys);
-  const [filters, setFilters] = React59.useState({});
-  const [sort, setSort] = React59.useState(null);
-  const [density, setDensity] = React59.useState(() => SIZE_TO_DENSITY[size]);
-  const [curPage, setCurPage] = React59.useState(page);
+  const allLeafColumns = React60.useMemo(() => getLeafColumns(columns), [columns]);
+  const defaultVisibleLeafKeys = React60.useMemo(() => allLeafColumns.filter((column) => column.visible !== false).map((column) => column.key), [allLeafColumns]);
+  const knownLeafKeysRef = React60.useRef(new Set(defaultVisibleLeafKeys));
+  const [headerAlign, setHeaderAlign] = React60.useState("left");
+  const [visibleCols, setVisibleCols] = React60.useState(defaultVisibleLeafKeys);
+  const [filters, setFilters] = React60.useState({});
+  const [sort, setSort] = React60.useState(null);
+  const [density, setDensity] = React60.useState(() => SIZE_TO_DENSITY[size]);
+  const [curPage, setCurPage] = React60.useState(page);
   const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     const knownLeafKeys = knownLeafKeysRef.current;
     setVisibleCols((prev) => {
       const prevSet = new Set(prev);
@@ -20877,10 +20968,10 @@ function useDataTableState({
     });
     knownLeafKeysRef.current = new Set(allLeafColumns.map((column) => column.key));
   }, [allLeafColumns]);
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     setCurPage(page);
   }, [page]);
-  React59.useEffect(() => {
+  React60.useEffect(() => {
     setDensity(SIZE_TO_DENSITY[size]);
   }, [size]);
   return {
@@ -20902,7 +20993,7 @@ function useDataTableState({
 }
 
 // src/components/DataTable/hooks/useStickyColumns.ts
-import React60 from "react";
+import React61 from "react";
 
 // src/components/DataTable/utils/sticky.ts
 function buildStickyLayout(visibleColumns) {
@@ -20949,8 +21040,8 @@ function resolveGroupStickyPosition(column, positions) {
 
 // src/components/DataTable/hooks/useStickyColumns.ts
 function useStickyColumns(visibleColumns) {
-  const { positions, leftBoundaryKey, rightBoundaryKey } = React60.useMemo(() => buildStickyLayout(visibleColumns), [visibleColumns]);
-  const getStickyColumnStyle = React60.useCallback(
+  const { positions, leftBoundaryKey, rightBoundaryKey } = React61.useMemo(() => buildStickyLayout(visibleColumns), [visibleColumns]);
+  const getStickyColumnStyle = React61.useCallback(
     (col) => {
       const pos = resolveStickyPosition(col, positions);
       if (!pos) return {};
@@ -20961,7 +21052,7 @@ function useStickyColumns(visibleColumns) {
     },
     [positions]
   );
-  const getBoundaryShadowClass = React60.useCallback(
+  const getBoundaryShadowClass = React61.useCallback(
     (col) => {
       if (col.fixed === "left" && col.key === leftBoundaryKey) {
         return "border-r border-border/80 shadow-[10px_0_16px_-10px_rgba(0,0,0,0.55)]";
@@ -20973,14 +21064,14 @@ function useStickyColumns(visibleColumns) {
     },
     [leftBoundaryKey, rightBoundaryKey]
   );
-  const getStickyHeaderClass = React60.useCallback(
+  const getStickyHeaderClass = React61.useCallback(
     (col) => {
       if (!col.fixed) return "";
       return cn("sticky", col.fixed === "left" && "left-0", col.fixed === "right" && "right-0", getBoundaryShadowClass(col), "z-50 !bg-muted");
     },
     [getBoundaryShadowClass]
   );
-  const getStickyCellClass = React60.useCallback(
+  const getStickyCellClass = React61.useCallback(
     (col, isStripedRow) => {
       if (!col.fixed) return "";
       return cn(
@@ -20993,7 +21084,7 @@ function useStickyColumns(visibleColumns) {
     },
     [getBoundaryShadowClass]
   );
-  const getStickyHeaderCellStyle = React60.useCallback(
+  const getStickyHeaderCellStyle = React61.useCallback(
     (headerCell) => {
       const col = headerCell.column;
       if (headerCell.isLeaf) {
@@ -21092,6 +21183,66 @@ function validateColumns(columns) {
 
 // src/components/DataTable/DataTable.tsx
 import { jsx as jsx66, jsxs as jsxs56 } from "react/jsx-runtime";
+function applyColumnWidthOverrides(columns, widthOverrides) {
+  return columns.map((column) => {
+    if (column.children?.length) {
+      return {
+        ...column,
+        children: applyColumnWidthOverrides(column.children, widthOverrides)
+      };
+    }
+    const nextWidth = widthOverrides[column.key];
+    if (nextWidth == null) {
+      return column;
+    }
+    return {
+      ...column,
+      width: nextWidth
+    };
+  });
+}
+function measureNaturalContentWidth(node) {
+  if (typeof document === "undefined") return 0;
+  const measurementRoot = document.createElement("div");
+  measurementRoot.style.position = "absolute";
+  measurementRoot.style.left = "-99999px";
+  measurementRoot.style.top = "0";
+  measurementRoot.style.visibility = "hidden";
+  measurementRoot.style.pointerEvents = "none";
+  measurementRoot.style.whiteSpace = "nowrap";
+  measurementRoot.style.width = "max-content";
+  measurementRoot.style.maxWidth = "none";
+  measurementRoot.style.minWidth = "0";
+  measurementRoot.style.overflow = "visible";
+  const clone = (node.firstElementChild instanceof HTMLElement ? node.firstElementChild : node).cloneNode(true);
+  if (!(clone instanceof HTMLElement)) {
+    return 0;
+  }
+  const sourceStyle = window.getComputedStyle(node);
+  const cloneStyle = window.getComputedStyle(clone);
+  clone.style.width = "max-content";
+  clone.style.maxWidth = "none";
+  clone.style.minWidth = "0";
+  clone.style.overflow = "visible";
+  clone.style.textOverflow = "clip";
+  clone.style.whiteSpace = cloneStyle.whiteSpace === "normal" ? "pre-wrap" : "nowrap";
+  measurementRoot.appendChild(clone);
+  document.body.appendChild(measurementRoot);
+  const horizontalPadding = parseFloat(sourceStyle.paddingLeft || "0") + parseFloat(sourceStyle.paddingRight || "0");
+  const horizontalBorder = parseFloat(sourceStyle.borderLeftWidth || "0") + parseFloat(sourceStyle.borderRightWidth || "0");
+  const cloneRectWidth = clone.getBoundingClientRect().width;
+  const cloneScrollWidth = clone.scrollWidth;
+  const sourceScrollWidth = node.scrollWidth;
+  const measuredContentWidth = Math.max(cloneRectWidth, cloneScrollWidth) || sourceScrollWidth;
+  const measured = Math.ceil(measuredContentWidth + horizontalPadding + horizontalBorder);
+  document.body.removeChild(measurementRoot);
+  return measured;
+}
+function isNodeOverflowing(node) {
+  const contentNode = node.firstElementChild instanceof HTMLElement ? node.firstElementChild : node;
+  return node.scrollWidth > node.clientWidth + 1 || contentNode.scrollWidth > contentNode.clientWidth + 1;
+}
+var AUTO_FIT_BUFFER_PX = 8;
 function DataTable({
   columns,
   data,
@@ -21115,9 +21266,15 @@ function DataTable({
   stickyHeader = true,
   maxHeight = 500,
   useOverlayScrollbar = false,
+  enableHeaderAutoFit = true,
   labels
 }) {
   const t = useSmartTranslations("Common");
+  const [columnWidthOverrides, setColumnWidthOverrides] = React62.useState({});
+  const columnsWithWidthOverrides = React62.useMemo(
+    () => applyColumnWidthOverrides(columns, columnWidthOverrides),
+    [columnWidthOverrides, columns]
+  );
   const {
     headerAlign,
     setHeaderAlign,
@@ -21134,22 +21291,22 @@ function DataTable({
     curPageSize,
     setCurPageSize
   } = useDataTableState({
-    columns,
+    columns: columnsWithWidthOverrides,
     page,
     pageSize,
     size,
     storageKey
   });
-  React61.useEffect(() => {
+  React62.useEffect(() => {
     if (process.env.NODE_ENV === "development") {
-      const warnings = validateColumns(columns);
+      const warnings = validateColumns(columnsWithWidthOverrides);
       warnings.forEach((w) => console.warn(`[DataTable] ${w}`));
     }
-  }, [columns]);
+  }, [columnsWithWidthOverrides]);
   const debouncedFilters = useDebounced(filters, 350);
   const isServerMode = Boolean(onQueryChange);
-  const hasEmittedQuery = React61.useRef(false);
-  React61.useEffect(() => {
+  const hasEmittedQuery = React62.useRef(false);
+  React62.useEffect(() => {
     if (!onQueryChange) return;
     if (!hasEmittedQuery.current) {
       hasEmittedQuery.current = true;
@@ -21157,7 +21314,7 @@ function DataTable({
     }
     onQueryChange({ filters: debouncedFilters, sort, page: curPage, pageSize: curPageSize });
   }, [debouncedFilters, sort, curPage, curPageSize, onQueryChange]);
-  React61.useEffect(() => {
+  React62.useEffect(() => {
     if (process.env.NODE_ENV !== "development" || rowKey) return;
     const hasQueryFeatures = columns.some((column) => column.sortable || column.filter) || Boolean(pageSizeOptions?.length) || isServerMode;
     if (!hasQueryFeatures) return;
@@ -21169,7 +21326,7 @@ function DataTable({
   const headerMinHeightClass = size === "sm" ? "min-h-9" : size === "lg" ? "min-h-11" : "min-h-10";
   const sortIconClass = size === "sm" ? "w-3.5 h-3.5" : size === "lg" ? "w-4 h-4" : "w-3.5 h-3.5";
   const { visibleColumns, leafColumns, headerRows, totalColumnsWidth, totalItems, displayedData } = useDataTableModel({
-    columns,
+    columns: columnsWithWidthOverrides,
     data,
     visibleCols,
     filters,
@@ -21185,15 +21342,45 @@ function DataTable({
     if (typeof rowKey === "function") return String(rowKey(row));
     return String(row[rowKey]);
   };
-  const viewportRef = React61.useRef(null);
+  const viewportRef = React62.useRef(null);
+  const tableRef = React62.useRef(null);
   useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
+  const autoFitColumn = React62.useCallback((columnKey) => {
+    const tableElement = tableRef.current;
+    if (!tableElement) return;
+    const nodes = Array.from(
+      tableElement.querySelectorAll(`[data-underverse-column-key="${columnKey}"]`)
+    );
+    if (nodes.length === 0) return;
+    const hasOverflow = nodes.some((node) => isNodeOverflowing(node));
+    if (!hasOverflow) return;
+    const measuredWidth = nodes.reduce((maxWidth, node) => {
+      const nextWidth2 = measureNaturalContentWidth(node);
+      return Math.max(maxWidth, nextWidth2);
+    }, 0);
+    const currentRenderedWidth = nodes.reduce((maxWidth, node) => {
+      const nextWidth2 = Math.max(
+        Math.ceil(node.getBoundingClientRect().width || 0),
+        node.offsetWidth || 0,
+        node.clientWidth || 0
+      );
+      return Math.max(maxWidth, nextWidth2);
+    }, 0);
+    if (measuredWidth <= 0) return;
+    if (currentRenderedWidth > 0 && measuredWidth <= currentRenderedWidth + AUTO_FIT_BUFFER_PX) return;
+    const nextWidth = Math.max(80, measuredWidth + AUTO_FIT_BUFFER_PX);
+    setColumnWidthOverrides((prev) => {
+      if (prev[columnKey] === nextWidth) return prev;
+      return { ...prev, [columnKey]: nextWidth };
+    });
+  }, []);
   return /* @__PURE__ */ jsxs56("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsx66(
       DataTableToolbar,
       {
         caption,
         toolbar,
-        columns,
+        columns: columnsWithWidthOverrides,
         visibleCols,
         setVisibleCols,
         enableDensityToggle,
@@ -21223,6 +21410,7 @@ function DataTable({
             children: /* @__PURE__ */ jsxs56(
               Table,
               {
+                ref: tableRef,
                 disableContainer: true,
                 className: cn(
                   "table-fixed",
@@ -21245,6 +21433,8 @@ function DataTable({
                       setCurPage,
                       setFilters,
                       setSort,
+                      onAutoFitColumn: autoFitColumn,
+                      enableHeaderAutoFit,
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
                       t
@@ -21291,10 +21481,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // src/components/Form.tsx
-import * as React62 from "react";
+import * as React63 from "react";
 import { Controller, FormProvider, useFormContext, useForm } from "react-hook-form";
 import { jsx as jsx67, jsxs as jsxs57 } from "react/jsx-runtime";
-var FormConfigContext = React62.createContext({ size: "md" });
+var FormConfigContext = React63.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -21307,7 +21497,7 @@ var FormWrapper = ({
   const methods = useForm({
     defaultValues: initialValues
   });
-  React62.useEffect(() => {
+  React63.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
@@ -21316,15 +21506,15 @@ var FormWrapper = ({
   return /* @__PURE__ */ jsx67(FormProvider, { ...methods, children: /* @__PURE__ */ jsx67(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx67("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React62.createContext({});
+var FormFieldContext = React63.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsx67(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx67(Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React62.useContext(FormFieldContext);
-  const itemContext = React62.useContext(FormItemContext);
+  const fieldContext = React63.useContext(FormFieldContext);
+  const itemContext = React63.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
   if (!fieldContext) {
     throw new Error("useFormField must be used within FormField");
@@ -21340,16 +21530,16 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React62.createContext({});
-var FormItem = React62.forwardRef(({ className, ...props }, ref) => {
-  const id = React62.useId();
+var FormItemContext = React63.createContext({});
+var FormItem = React63.forwardRef(({ className, ...props }, ref) => {
+  const id = React63.useId();
   return /* @__PURE__ */ jsx67(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx67("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React62.forwardRef(
+var FormLabel = React63.forwardRef(
   ({ className, children, required, ...props }, ref) => {
     const { error, formItemId } = useFormField();
-    const config = React62.useContext(FormConfigContext);
+    const config = React63.useContext(FormConfigContext);
     const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
     return /* @__PURE__ */ jsxs57(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
       children,
@@ -21358,7 +21548,7 @@ var FormLabel = React62.forwardRef(
   }
 );
 FormLabel.displayName = "FormLabel";
-var FormControl = React62.forwardRef(({ ...props }, ref) => {
+var FormControl = React63.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ jsx67(
     "div",
@@ -21372,12 +21562,12 @@ var FormControl = React62.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React62.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React63.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ jsx67("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React62.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React63.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
@@ -21386,7 +21576,7 @@ var FormMessage = React62.forwardRef(({ className, children, ...props }, ref) =>
   return /* @__PURE__ */ jsx67("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(
+var FormInput = React63.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(
   FormField,
   {
     name,
@@ -21397,7 +21587,7 @@ var FormInput = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(
+var FormCheckbox = React63.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(
   FormField,
   {
     name,
@@ -21421,9 +21611,9 @@ var FormCheckbox = React62.forwardRef(({ name, ...props }, ref) => /* @__PURE__
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React62.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React63.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx67("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React62.forwardRef(
+var FormSubmitButton = React63.forwardRef(
   ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ jsx67(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ jsx67(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
 );
 FormSubmitButton.displayName = "FormSubmitButton";
@@ -21713,7 +21903,7 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // ../../lib/i18n/translation-adapter.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 import { jsx as jsx72 } from "react/jsx-runtime";
 function isUnresolvedTranslation2(value, namespace, key) {
   return value === key || value === `${namespace}.${key}`;
@@ -21738,7 +21928,7 @@ function useTranslations(namespace) {
   const nextIntlBridge = useNextIntlBridge();
   const internalLocale = useUnderverseLocale();
   const internalT = useUnderverseTranslations(namespace);
-  return React64.useCallback((key, params) => {
+  return React65.useCallback((key, params) => {
     if (nextIntlBridge) {
       const nextIntlResult = nextIntlBridge.translate(namespace, key, params);
       if (nextIntlResult.translated && !isUnresolvedTranslation2(nextIntlResult.translated, namespace, key)) {
@@ -21763,7 +21953,7 @@ function useLocale2() {
 }
 
 // src/components/UEditor/UEditor.tsx
-import React74, { useEffect as useEffect35, useImperativeHandle as useImperativeHandle3, useMemo as useMemo25, useRef as useRef32 } from "react";
+import React75, { useEffect as useEffect35, useImperativeHandle as useImperativeHandle3, useMemo as useMemo25, useRef as useRef32 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -21803,7 +21993,7 @@ import { common, createLowlight } from "lowlight";
 import { Extension } from "@tiptap/core";
 import Suggestion from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
-import React65, { forwardRef as forwardRef13, useEffect as useEffect30, useImperativeHandle, useRef as useRef26 } from "react";
+import React66, { forwardRef as forwardRef13, useEffect as useEffect30, useImperativeHandle, useRef as useRef26 } from "react";
 import {
   FileCode as FileCode2,
   Heading1,
@@ -21846,9 +22036,9 @@ var DEFAULT_MESSAGES = {
   tableDesc: "Insert a table"
 };
 function useResettingIndex2(resetToken) {
-  const [state, setState] = React65.useState({ resetToken, index: 0 });
+  const [state, setState] = React66.useState({ resetToken, index: 0 });
   const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
-  const setSelectedIndex = React65.useCallback((nextIndex) => {
+  const setSelectedIndex = React66.useCallback((nextIndex) => {
     setState((prev) => {
       const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
       return {
@@ -22227,14 +22417,14 @@ import { Extension as Extension3 } from "@tiptap/core";
 import Suggestion2 from "@tiptap/suggestion";
 import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
 import { PluginKey } from "@tiptap/pm/state";
-import React66, { forwardRef as forwardRef14, useImperativeHandle as useImperativeHandle2 } from "react";
+import React67, { forwardRef as forwardRef14, useImperativeHandle as useImperativeHandle2 } from "react";
 import { Smile as Smile2 } from "lucide-react";
 import tippy2 from "tippy.js";
 import { jsx as jsx74, jsxs as jsxs63 } from "react/jsx-runtime";
 function useResettingIndex3(resetToken) {
-  const [state, setState] = React66.useState({ resetToken, index: 0 });
+  const [state, setState] = React67.useState({ resetToken, index: 0 });
   const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
-  const setSelectedIndex = React66.useCallback((nextIndex) => {
+  const setSelectedIndex = React67.useCallback((nextIndex) => {
     setState((prev) => {
       const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
       return {
@@ -22875,7 +23065,7 @@ function buildUEditorExtensions({
 }
 
 // src/components/UEditor/toolbar.tsx
-import React71, { useRef as useRef30, useState as useState44 } from "react";
+import React72, { useRef as useRef30, useState as useState44 } from "react";
 import {
   AlignCenter,
   AlignJustify,
@@ -23362,7 +23552,7 @@ function fileToDataUrl2(file) {
     reader.readAsDataURL(file);
   });
 }
-var ToolbarButton = React71.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
+var ToolbarButton = React72.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
   const button = /* @__PURE__ */ jsx79(
     "button",
     {
@@ -24580,7 +24770,7 @@ async function prepareUEditorContentForSave({
 }
 
 // src/components/UEditor/table-controls.tsx
-import React73 from "react";
+import React74 from "react";
 
 // node_modules/prosemirror-model/dist/index.js
 function findDiffStart(a, b, pos) {
@@ -28907,14 +29097,14 @@ function collectChildren(node) {
 }
 function TableControls({ editor, containerRef }) {
   const t = useSmartTranslations("UEditor");
-  const [layout, setLayout] = React73.useState(null);
-  const [dragPreview, setDragPreview] = React73.useState(null);
-  const layoutRef = React73.useRef(null);
-  const dragStateRef = React73.useRef(null);
-  React73.useEffect(() => {
+  const [layout, setLayout] = React74.useState(null);
+  const [dragPreview, setDragPreview] = React74.useState(null);
+  const layoutRef = React74.useRef(null);
+  const dragStateRef = React74.useRef(null);
+  React74.useEffect(() => {
     layoutRef.current = layout;
   }, [layout]);
-  const syncFromCell = React73.useCallback((cell) => {
+  const syncFromCell = React74.useCallback((cell) => {
     const surface = containerRef.current;
     if (!surface || !cell) {
       setLayout(null);
@@ -28922,10 +29112,10 @@ function TableControls({ editor, containerRef }) {
     }
     setLayout(buildLayout(editor, surface, cell));
   }, [containerRef, editor]);
-  const syncFromSelection = React73.useCallback(() => {
+  const syncFromSelection = React74.useCallback(() => {
     syncFromCell(getSelectedCell(editor));
   }, [editor, syncFromCell]);
-  const refreshCurrentLayout = React73.useCallback(() => {
+  const refreshCurrentLayout = React74.useCallback(() => {
     setLayout((prev) => {
       if (!prev) return prev;
       const surface = containerRef.current;
@@ -28935,12 +29125,12 @@ function TableControls({ editor, containerRef }) {
       return cell ? buildLayout(editor, surface, cell) : null;
     });
   }, [containerRef, editor]);
-  const clearDrag = React73.useCallback(() => {
+  const clearDrag = React74.useCallback(() => {
     dragStateRef.current = null;
     setDragPreview(null);
     document.body.style.cursor = "";
   }, []);
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     const proseMirror = editor.view.dom;
     const surface = containerRef.current;
     if (!surface) return void 0;
@@ -28974,7 +29164,7 @@ function TableControls({ editor, containerRef }) {
       editor.off("update", refreshCurrentLayout);
     };
   }, [clearDrag, containerRef, editor, refreshCurrentLayout, syncFromCell, syncFromSelection]);
-  const runAtCellPos = React73.useCallback((cellPos, command, options) => {
+  const runAtCellPos = React74.useCallback((cellPos, command, options) => {
     if (cellPos == null) return false;
     focusCell(editor, cellPos);
     const result = command(editor.chain().focus(null, { scrollIntoView: false })).run();
@@ -28983,17 +29173,17 @@ function TableControls({ editor, containerRef }) {
     }
     return result;
   }, [editor, syncFromSelection]);
-  const runAtActiveCell = React73.useCallback((command, options) => {
+  const runAtActiveCell = React74.useCallback((command, options) => {
     return runAtCellPos(layoutRef.current?.cellPos ?? null, command, options);
   }, [runAtCellPos]);
-  const getCurrentCornerCellPos = React73.useCallback(() => {
+  const getCurrentCornerCellPos = React74.useCallback(() => {
     const activePos = layoutRef.current?.cellPos ?? editor.state.selection.from;
     return getLastCellPosFromState(editor, activePos);
   }, [editor]);
-  const runAtCornerCell = React73.useCallback((command, options) => {
+  const runAtCornerCell = React74.useCallback((command, options) => {
     return runAtCellPos(getCurrentCornerCellPos(), command, options);
   }, [getCurrentCornerCellPos, runAtCellPos]);
-  const replaceTableAtCellPos = React73.useCallback((cellPos, updateTable) => {
+  const replaceTableAtCellPos = React74.useCallback((cellPos, updateTable) => {
     if (cellPos == null) return false;
     const tableInfo = findTableInfo(editor, cellPos);
     if (!tableInfo) return false;
@@ -29003,10 +29193,10 @@ function TableControls({ editor, containerRef }) {
     requestAnimationFrame(syncFromSelection);
     return true;
   }, [editor, syncFromSelection]);
-  const createEmptyCellNode = React73.useCallback((cellNode) => {
+  const createEmptyCellNode = React74.useCallback((cellNode) => {
     return cellNode.type.createAndFill(cellNode.attrs) ?? cellNode;
   }, []);
-  const duplicateRowAt = React73.useCallback((rowIndex, cellPos) => {
+  const duplicateRowAt = React74.useCallback((rowIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode);
       const rowNode = rows[rowIndex];
@@ -29015,7 +29205,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [replaceTableAtCellPos]);
-  const clearRowAt = React73.useCallback((rowIndex, cellPos) => {
+  const clearRowAt = React74.useCallback((rowIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode);
       const rowNode = rows[rowIndex];
@@ -29025,7 +29215,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [createEmptyCellNode, replaceTableAtCellPos]);
-  const duplicateColumnAt = React73.useCallback((columnIndex, cellPos) => {
+  const duplicateColumnAt = React74.useCallback((columnIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode).map((rowNode) => {
         const cells = collectChildren(rowNode);
@@ -29037,7 +29227,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [replaceTableAtCellPos]);
-  const clearColumnAt = React73.useCallback((columnIndex, cellPos) => {
+  const clearColumnAt = React74.useCallback((columnIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode).map((rowNode) => {
         const cells = collectChildren(rowNode);
@@ -29049,7 +29239,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [createEmptyCellNode, replaceTableAtCellPos]);
-  const expandTableBy = React73.useCallback((rows, cols) => {
+  const expandTableBy = React74.useCallback((rows, cols) => {
     let ok = true;
     for (let index = 0; index < rows; index += 1) {
       ok = runAtCornerCell((chain) => chain.addRowAfter(), { sync: false });
@@ -29063,7 +29253,7 @@ function TableControls({ editor, containerRef }) {
     return true;
   }, [runAtCornerCell, syncFromSelection]);
   const canExpandTable = Boolean(layout);
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     const handleMouseMove = (event) => {
       const dragState = dragStateRef.current;
       const activeLayout = layoutRef.current;
@@ -29150,7 +29340,7 @@ function TableControls({ editor, containerRef }) {
       window.removeEventListener("blur", clearDrag);
     };
   }, [clearDrag, containerRef, editor, expandTableBy, syncFromSelection]);
-  const menuItems = React73.useMemo(() => {
+  const menuItems = React74.useMemo(() => {
     if (!layout) return [];
     return [
       {
@@ -29203,7 +29393,7 @@ function TableControls({ editor, containerRef }) {
       }
     ];
   }, [layout, runAtActiveCell, t]);
-  const getRowHandleMenuItems = React73.useCallback((rowHandle) => [
+  const getRowHandleMenuItems = React74.useCallback((rowHandle) => [
     {
       label: t("tableMenu.addRowBefore"),
       icon: ArrowUp2,
@@ -29231,7 +29421,7 @@ function TableControls({ editor, containerRef }) {
       destructive: true
     }
   ], [clearRowAt, duplicateRowAt, runAtCellPos, t]);
-  const getColumnHandleMenuItems = React73.useCallback((columnHandle) => [
+  const getColumnHandleMenuItems = React74.useCallback((columnHandle) => [
     {
       label: t("tableMenu.addColumnBefore"),
       icon: ArrowLeft2,
@@ -29579,7 +29769,7 @@ function getRelativeBoundaryMetrics(surface, table, row, cell) {
     columnRight: cellRect.right - surfaceRect.left + surface.scrollLeft
   };
 }
-var UEditor = React74.forwardRef(({
+var UEditor = React75.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,
@@ -29607,32 +29797,32 @@ var UEditor = React74.forwardRef(({
   const tableColumnGuideRef = useRef32(null);
   const tableRowGuideRef = useRef32(null);
   const rowResizeStateRef = useRef32(null);
-  const setEditorResizeCursor = React74.useCallback((cursor) => {
+  const setEditorResizeCursor = React75.useCallback((cursor) => {
     const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
   }, []);
-  const hideColumnGuide = React74.useCallback(() => {
+  const hideColumnGuide = React75.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-cursor");
     const guide = tableColumnGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const hideRowGuide = React74.useCallback(() => {
+  const hideRowGuide = React75.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-row-cursor");
     const guide = tableRowGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const clearAllTableResizeHover = React74.useCallback(() => {
+  const clearAllTableResizeHover = React75.useCallback(() => {
     setEditorResizeCursor("");
     hideColumnGuide();
     hideRowGuide();
   }, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
-  const showColumnGuide = React74.useCallback((table, row, cell) => {
+  const showColumnGuide = React75.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableColumnGuideRef.current;
     if (!surface || !guide) return;
@@ -29645,7 +29835,7 @@ var UEditor = React74.forwardRef(({
     surface.classList.add("resize-cursor");
     setEditorResizeCursor("col-resize");
   }, [setEditorResizeCursor]);
-  const showRowGuide = React74.useCallback((table, row, cell) => {
+  const showRowGuide = React75.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
     if (!surface || !guide) return;