@underverse-ui/underverse 1.0.161 → 1.0.163

package/dist/index.d.cts

@@ -2559,7 +2559,32 @@ type DataTableColumn<T> = {
     /** Advanced: Override auto-calculated colspan (defaults to number of leaf descendants) */
     colSpan?: number;
     /** Advanced: Override auto-calculated rowspan (defaults based on depth) */
+    /** Advanced: Override auto-calculated rowspan (defaults based on depth) */
     rowSpan?: number;
+    /**
+     * Color tag for this column (hex or rgb string, e.g. "#3b82f6").
+     * - Header cell gets a darker tinted background
+     * - Body cells get a lighter tinted background
+     * - Columns with the same colorTag are grouped together in the visibility dropdown
+     */
+    colorTag?: string;
+};
+/** Configuration for a column color group in the visibility dropdown */
+type ColumnColorGroup = {
+    /** Display label for this group (e.g. "Bắt buộc", "Tùy chọn") */
+    label: string;
+    /**
+     * Optional override for the header cell text color of columns in this group.
+     * Accepts any valid CSS color (hex, rgb, rgba, color-mix, var(--token), ...).
+     * When omitted, the table picks a readable foreground (black or white) based
+     * on the perceived luminance of the column's `colorTag` via WCAG formula.
+     *
+     * Useful when:
+     * - the auto-picker doesn't match your brand palette
+     * - you want a fixed color that survives light/dark theme swaps
+     *   (e.g., a CSS var like `var(--foreground)`)
+     */
+    headerTextColor?: string;
 };
 type Sorter = {
     key: string;
@@ -2583,6 +2608,8 @@ type DataTableLabels = {
     alignRight?: string;
     noData?: string;
     sortBy?: string;
+    selectAll?: string;
+    default?: string;
 };
 /** Public props for the `DataTable` component. */
 interface DataTableProps<T> {
@@ -2597,6 +2624,12 @@ interface DataTableProps<T> {
     onQueryChange?: (q: DataTableQuery) => void;
     caption?: React__default.ReactNode;
     toolbar?: React__default.ReactNode;
+    /**
+     * Define color groups for the column visibility dropdown legend.
+     * Key = color value used in column's `colorTag` (e.g. "#1e40af").
+     * If not provided, columns with colorTag still get colored but won't be grouped in dropdown.
+     */
+    columnColorGroups?: Record<string, ColumnColorGroup>;
     /** Visual size preset. Maps to component scales in the table UI. */
     size?: DataTableSize;
     enableColumnVisibilityToggle?: boolean;
@@ -2634,7 +2667,7 @@ interface DataTableProps<T> {
     labels?: DataTableLabels;
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, enableHeaderAutoFit, labels, columnColorGroups, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 /** Public props for the `Table` component. */
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
@@ -3375,6 +3408,9 @@ declare const underverseMessages: {
             loading: string;
             noData: string;
             clearFilter: string;
+            selectAll: string;
+            default: string;
+            other: string;
             headerAlign: string;
             alignLeft: string;
             alignCenter: string;
@@ -3768,6 +3804,9 @@ declare const underverseMessages: {
             loading: string;
             noData: string;
             clearFilter: string;
+            selectAll: string;
+            default: string;
+            other: string;
             headerAlign: string;
             alignLeft: string;
             alignCenter: string;
@@ -4161,6 +4200,9 @@ declare const underverseMessages: {
             loading: string;
             noData: string;
             clearFilter: string;
+            selectAll: string;
+            default: string;
+            other: string;
             headerAlign: string;
             alignLeft: string;
             alignCenter: string;
@@ -4554,6 +4596,9 @@ declare const underverseMessages: {
             loading: string;
             noData: string;
             clearFilter: string;
+            selectAll: string;
+            default: string;
+            other: string;
             headerAlign: string;
             alignLeft: string;
             alignCenter: string;
@@ -4950,6 +4995,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         loading: string;
         noData: string;
         clearFilter: string;
+        selectAll: string;
+        default: string;
+        other: string;
         headerAlign: string;
         alignLeft: string;
         alignCenter: string;
@@ -5342,6 +5390,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         loading: string;
         noData: string;
         clearFilter: string;
+        selectAll: string;
+        default: string;
+        other: string;
         headerAlign: string;
         alignLeft: string;
         alignCenter: string;
@@ -5734,6 +5785,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         loading: string;
         noData: string;
         clearFilter: string;
+        selectAll: string;
+        default: string;
+        other: string;
         headerAlign: string;
         alignLeft: string;
         alignCenter: string;
@@ -6126,6 +6180,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         loading: string;
         noData: string;
         clearFilter: string;
+        selectAll: string;
+        default: string;
+        other: string;
         headerAlign: string;
         alignLeft: string;
         alignCenter: string;

package/dist/index.d.ts

@@ -2559,7 +2559,32 @@ type DataTableColumn<T> = {
     /** Advanced: Override auto-calculated colspan (defaults to number of leaf descendants) */
     colSpan?: number;
     /** Advanced: Override auto-calculated rowspan (defaults based on depth) */
+    /** Advanced: Override auto-calculated rowspan (defaults based on depth) */
     rowSpan?: number;
+    /**
+     * Color tag for this column (hex or rgb string, e.g. "#3b82f6").
+     * - Header cell gets a darker tinted background
+     * - Body cells get a lighter tinted background
+     * - Columns with the same colorTag are grouped together in the visibility dropdown
+     */
+    colorTag?: string;
+};
+/** Configuration for a column color group in the visibility dropdown */
+type ColumnColorGroup = {
+    /** Display label for this group (e.g. "Bắt buộc", "Tùy chọn") */
+    label: string;
+    /**
+     * Optional override for the header cell text color of columns in this group.
+     * Accepts any valid CSS color (hex, rgb, rgba, color-mix, var(--token), ...).
+     * When omitted, the table picks a readable foreground (black or white) based
+     * on the perceived luminance of the column's `colorTag` via WCAG formula.
+     *
+     * Useful when:
+     * - the auto-picker doesn't match your brand palette
+     * - you want a fixed color that survives light/dark theme swaps
+     *   (e.g., a CSS var like `var(--foreground)`)
+     */
+    headerTextColor?: string;
 };
 type Sorter = {
     key: string;
@@ -2583,6 +2608,8 @@ type DataTableLabels = {
     alignRight?: string;
     noData?: string;
     sortBy?: string;
+    selectAll?: string;
+    default?: string;
 };
 /** Public props for the `DataTable` component. */
 interface DataTableProps<T> {
@@ -2597,6 +2624,12 @@ interface DataTableProps<T> {
     onQueryChange?: (q: DataTableQuery) => void;
     caption?: React__default.ReactNode;
     toolbar?: React__default.ReactNode;
+    /**
+     * Define color groups for the column visibility dropdown legend.
+     * Key = color value used in column's `colorTag` (e.g. "#1e40af").
+     * If not provided, columns with colorTag still get colored but won't be grouped in dropdown.
+     */
+    columnColorGroups?: Record<string, ColumnColorGroup>;
     /** Visual size preset. Maps to component scales in the table UI. */
     size?: DataTableSize;
     enableColumnVisibilityToggle?: boolean;
@@ -2634,7 +2667,7 @@ interface DataTableProps<T> {
     labels?: DataTableLabels;
 }
 
-declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, enableHeaderAutoFit, labels, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T extends Record<string, any>>({ columns, data, rowKey, loading, total, page, pageSize, pageSizeOptions, onQueryChange, caption, toolbar, size, enableColumnVisibilityToggle, enableDensityToggle, enableHeaderAlignToggle, striped, columnDividers, className, storageKey, stickyHeader, maxHeight, horizontalMode, overflowHidden, useOverlayScrollbar, virtualizedRows, estimatedRowHeight, overscan, enableHeaderAutoFit, labels, columnColorGroups, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 /** Public props for the `Table` component. */
 interface TableProps extends React__default.HTMLAttributes<HTMLTableElement> {
@@ -3375,6 +3408,9 @@ declare const underverseMessages: {
             loading: string;
             noData: string;
             clearFilter: string;
+            selectAll: string;
+            default: string;
+            other: string;
             headerAlign: string;
             alignLeft: string;
             alignCenter: string;
@@ -3768,6 +3804,9 @@ declare const underverseMessages: {
             loading: string;
             noData: string;
             clearFilter: string;
+            selectAll: string;
+            default: string;
+            other: string;
             headerAlign: string;
             alignLeft: string;
             alignCenter: string;
@@ -4161,6 +4200,9 @@ declare const underverseMessages: {
             loading: string;
             noData: string;
             clearFilter: string;
+            selectAll: string;
+            default: string;
+            other: string;
             headerAlign: string;
             alignLeft: string;
             alignCenter: string;
@@ -4554,6 +4596,9 @@ declare const underverseMessages: {
             loading: string;
             noData: string;
             clearFilter: string;
+            selectAll: string;
+            default: string;
+            other: string;
             headerAlign: string;
             alignLeft: string;
             alignCenter: string;
@@ -4950,6 +4995,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         loading: string;
         noData: string;
         clearFilter: string;
+        selectAll: string;
+        default: string;
+        other: string;
         headerAlign: string;
         alignLeft: string;
         alignCenter: string;
@@ -5342,6 +5390,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         loading: string;
         noData: string;
         clearFilter: string;
+        selectAll: string;
+        default: string;
+        other: string;
         headerAlign: string;
         alignLeft: string;
         alignCenter: string;
@@ -5734,6 +5785,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         loading: string;
         noData: string;
         clearFilter: string;
+        selectAll: string;
+        default: string;
+        other: string;
         headerAlign: string;
         alignLeft: string;
         alignCenter: string;
@@ -6126,6 +6180,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
         loading: string;
         noData: string;
         clearFilter: string;
+        selectAll: string;
+        default: string;
+        other: string;
         headerAlign: string;
         alignLeft: string;
         alignCenter: string;

package/dist/index.js

@@ -585,6 +585,9 @@ var en_default = {
     loading: "Loading",
     noData: "No data",
     clearFilter: "Clear filter",
+    selectAll: "Select all",
+    default: "Default",
+    other: "Other",
     headerAlign: "Header alignment",
     alignLeft: "Align left",
     alignCenter: "Align center",
@@ -980,6 +983,9 @@ var vi_default = {
     loading: "\u0110ang t\u1EA3i",
     noData: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u",
     clearFilter: "X\xF3a b\u1ED9 l\u1ECDc",
+    selectAll: "Ch\u1ECDn t\u1EA5t c\u1EA3",
+    default: "M\u1EB7c \u0111\u1ECBnh",
+    other: "Kh\xE1c",
     headerAlign: "C\u0103n ch\u1EC9nh ti\xEAu \u0111\u1EC1",
     alignLeft: "C\u0103n tr\xE1i",
     alignCenter: "C\u0103n gi\u1EEFa",
@@ -1375,6 +1381,9 @@ var ko_default = {
     loading: "\uB85C\uB529 \uC911",
     noData: "\uB370\uC774\uD130 \uC5C6\uC74C",
     clearFilter: "\uD544\uD130 \uC9C0\uC6B0\uAE30",
+    selectAll: "\uC804\uCCB4 \uC120\uD0DD",
+    default: "\uAE30\uBCF8\uAC12",
+    other: "\uAE30\uD0C0",
     headerAlign: "\uD5E4\uB354 \uC815\uB82C",
     alignLeft: "\uC67C\uCABD \uC815\uB82C",
     alignCenter: "\uAC00\uC6B4\uB370 \uC815\uB82C",
@@ -1770,6 +1779,9 @@ var ja_default = {
     loading: "\u8AAD\u307F\u8FBC\u307F\u4E2D",
     noData: "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093",
     clearFilter: "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
+    selectAll: "\u3059\u3079\u3066\u9078\u629E",
+    default: "\u30C7\u30D5\u30A9\u30EB\u30C8",
+    other: "\u305D\u306E\u4ED6",
     headerAlign: "\u30D8\u30C3\u30C0\u30FC\u914D\u7F6E",
     alignLeft: "\u5DE6\u63C3\u3048",
     alignCenter: "\u4E2D\u592E\u63C3\u3048",
@@ -22925,6 +22937,88 @@ function DataTableBodyRows({
 // src/components/DataTable/components/DataTableHeader.tsx
 import React56 from "react";
 import { Filter as FilterIcon } from "lucide-react";
+
+// src/components/DataTable/utils/colorTag.ts
+function parseColor(color) {
+  if (!color) return null;
+  const c = color.trim().toLowerCase();
+  if (c.startsWith("#")) {
+    let hex = c.substring(1);
+    if (hex.length === 3) {
+      hex = hex.split("").map((char) => char + char).join("");
+    }
+    if (hex.length === 6) {
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
+        return [r, g, b];
+      }
+    }
+    return null;
+  }
+  if (c.startsWith("rgb")) {
+    const match = c.match(/rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (match) {
+      const r = parseInt(match[1], 10);
+      const g = parseInt(match[2], 10);
+      const b = parseInt(match[3], 10);
+      if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
+        return [r, g, b];
+      }
+    }
+    return null;
+  }
+  return null;
+}
+function toRgba(r, g, b, alpha) {
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function getHeaderBgColor(colorTag) {
+  const rgb = parseColor(colorTag);
+  if (!rgb) return colorTag;
+  return toRgba(rgb[0], rgb[1], rgb[2], 1);
+}
+function getReadableForeground(colorTag) {
+  const rgb = parseColor(colorTag);
+  if (!rgb) return void 0;
+  const toLinear = (c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  const L = 0.2126 * toLinear(rgb[0]) + 0.7152 * toLinear(rgb[1]) + 0.0722 * toLinear(rgb[2]);
+  return L > 0.5 ? "rgba(15, 23, 42, 0.92)" : "rgba(255, 255, 255, 0.95)";
+}
+function groupColumnsByColorTag(leafCols, colorGroups) {
+  const groupsMap = /* @__PURE__ */ new Map();
+  const ungrouped = [];
+  for (const col of leafCols) {
+    if (col.colorTag && colorGroups && colorGroups[col.colorTag]) {
+      const tag = col.colorTag;
+      if (!groupsMap.has(tag)) {
+        groupsMap.set(tag, []);
+      }
+      groupsMap.get(tag).push(col);
+    } else {
+      ungrouped.push(col);
+    }
+  }
+  const groups = [];
+  if (colorGroups) {
+    for (const [tag, groupConfig] of Object.entries(colorGroups)) {
+      if (groupsMap.has(tag)) {
+        groups.push({
+          colorTag: tag,
+          label: groupConfig.label,
+          columns: groupsMap.get(tag)
+        });
+      }
+    }
+  }
+  return { groups, ungrouped };
+}
+
+// src/components/DataTable/components/DataTableHeader.tsx
 import { Fragment as Fragment24, jsx as jsx65, jsxs as jsxs53 } from "react/jsx-runtime";
 function getColumnLabel(title) {
   if (typeof title === "string" || typeof title === "number") {
@@ -22956,7 +23050,8 @@ function DataTableHeader({
   getStickyHeaderClass,
   getStickyHeaderCellStyle,
   sortByLabel,
-  t
+  t,
+  columnColorGroups
 }) {
   const gi18n = useGlobalI18n();
   const renderFilterControl = React56.useCallback(
@@ -23105,7 +23200,7 @@ function DataTableHeader({
                   title: gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}`,
                   className: cn(
                     "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
-                    filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
+                    filters[col.key] ? "bg-accent opacity-100" : "opacity-60 hover:opacity-100"
                   ),
                   "aria-label": gi18n.filterByColumn ? gi18n.filterByColumn(columnLabel) : `Filter by ${columnLabel}`,
                   children: /* @__PURE__ */ jsx65(FilterIcon, { className: "w-4 h-4" })
@@ -23173,6 +23268,8 @@ function DataTableHeader({
     const isAfterFixedLeft = prevCol?.fixed === "left";
     const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
     const isLastCell = cellIndex === row.length - 1;
+    const headerBackgroundColor = isLeaf && col.colorTag ? getHeaderBgColor(col.colorTag) : "var(--muted)";
+    const headerColor = isLeaf && col.colorTag ? columnColorGroups?.[col.colorTag]?.headerTextColor ?? getReadableForeground(col.colorTag) : void 0;
     return /* @__PURE__ */ jsxs53(
       TableHead,
       {
@@ -23181,6 +23278,8 @@ function DataTableHeader({
         "data-underverse-column-key": isLeaf ? col.key : void 0,
         style: {
           width: col.width,
+          backgroundColor: headerBackgroundColor,
+          color: headerColor,
           ...getStickyHeaderCellStyle(headerCell)
         },
         className: cn(
@@ -23257,7 +23356,6 @@ function DataTablePagination({
     result.push(totalPages);
     return result;
   }, [curPage, totalPages]);
-  if (!(totalItems > 0 && totalPages > 1)) return null;
   const controlButtonSize = size === "lg" ? "md" : "sm";
   const navBtnClass = size === "sm" ? "h-6 w-6 p-0 rounded-full" : size === "lg" ? "h-8 w-8 p-0 rounded-full" : "h-7 w-7 p-0 rounded-full";
   const navIconClass = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
@@ -23439,13 +23537,18 @@ function DataTableToolbar({
   setDensity,
   setHeaderAlign,
   labels,
-  t
+  t,
+  columnColorGroups,
+  defaultVisibleKeys
 }) {
   const controlButtonSize = size === "lg" ? "md" : "sm";
   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 = React58.useMemo(() => getLeafColumns(columns), [columns]);
+  const { groups, ungrouped } = React58.useMemo(() => groupColumnsByColorTag(leafCols, columnColorGroups), [leafCols, columnColorGroups]);
+  const handleSelectAll = () => setVisibleCols(leafCols.map((c) => c.key));
+  const handleDefault = () => setVisibleCols(defaultVisibleKeys);
   return /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
     /* @__PURE__ */ jsx67("div", { className: captionClass + " text-muted-foreground", children: caption }),
     /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2", children: [
@@ -23463,7 +23566,7 @@ function DataTableToolbar({
           ]
         }
       ),
-      enableColumnVisibilityToggle && /* @__PURE__ */ jsx67(
+      enableColumnVisibilityToggle && /* @__PURE__ */ jsxs55(
         DropdownMenu_default,
         {
           trigger: /* @__PURE__ */ jsxs55(Button_default, { variant: "ghost", size: controlButtonSize, className: controlButtonClass, children: [
@@ -23478,19 +23581,49 @@ function DataTableToolbar({
             ) }),
             labels?.columns || t("columns")
           ] }),
-          children: leafCols.map((c) => /* @__PURE__ */ jsxs55(
-            DropdownMenuItem,
-            {
-              onClick: () => {
-                setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
-              },
-              children: [
-                /* @__PURE__ */ jsx67("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
-                /* @__PURE__ */ jsx67("span", { className: "truncate", children: c.title })
-              ]
-            },
-            c.key
-          ))
+          children: [
+            /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2 px-2 py-1.5 mb-1", children: [
+              /* @__PURE__ */ jsx67(Button_default, { variant: "outline", size: "sm", className: "h-7 text-xs flex-1", onClick: handleSelectAll, children: labels?.selectAll || t("selectAll") || "Select All" }),
+              /* @__PURE__ */ jsx67(Button_default, { variant: "outline", size: "sm", className: "h-7 text-xs flex-1", onClick: handleDefault, children: labels?.default || t("default") || "Default" })
+            ] }),
+            /* @__PURE__ */ jsxs55("div", { className: "max-h-80 overflow-y-auto min-w-50", children: [
+              groups.length > 0 && groups.map((group) => /* @__PURE__ */ jsxs55(React58.Fragment, { children: [
+                /* @__PURE__ */ jsxs55("div", { className: "px-3 py-1.5 text-[11px] font-semibold uppercase text-muted-foreground flex items-center gap-2 mt-1 bg-accent/30 sticky top-0 z-10 backdrop-blur-sm", children: [
+                  /* @__PURE__ */ jsx67("span", { className: "w-2.5 h-2.5 rounded-full shadow-sm", style: { backgroundColor: group.colorTag } }),
+                  group.label
+                ] }),
+                group.columns.map((c) => /* @__PURE__ */ jsxs55(
+                  DropdownMenuItem,
+                  {
+                    onClick: () => {
+                      setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                    },
+                    closeOnSelect: false,
+                    children: [
+                      /* @__PURE__ */ jsx67("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
+                      /* @__PURE__ */ jsx67("span", { className: "truncate", children: c.title })
+                    ]
+                  },
+                  c.key
+                ))
+              ] }, group.colorTag)),
+              groups.length > 0 && ungrouped.length > 0 && /* @__PURE__ */ jsx67("div", { className: "px-3 py-1.5 text-[11px] font-semibold uppercase text-muted-foreground mt-1 bg-accent/30 sticky top-0 z-10 backdrop-blur-sm", children: t("other") || "Other" }),
+              ungrouped.map((c) => /* @__PURE__ */ jsxs55(
+                DropdownMenuItem,
+                {
+                  onClick: () => {
+                    setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                  },
+                  closeOnSelect: false,
+                  children: [
+                    /* @__PURE__ */ jsx67("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
+                    /* @__PURE__ */ jsx67("span", { className: "truncate", children: c.title })
+                  ]
+                },
+                c.key
+              ))
+            ] })
+          ]
         }
       ),
       enableHeaderAlignToggle && /* @__PURE__ */ jsx67(
@@ -23786,7 +23919,7 @@ function useStickyColumns(visibleColumns) {
   const getStickyHeaderClass = React63.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");
+      return cn("sticky", col.fixed === "left" && "left-0", col.fixed === "right" && "right-0", getBoundaryShadowClass(col), "z-50");
     },
     [getBoundaryShadowClass]
   );
@@ -23991,7 +24124,8 @@ function DataTable({
   estimatedRowHeight,
   overscan = 8,
   enableHeaderAutoFit = true,
-  labels
+  labels,
+  columnColorGroups
 }) {
   const t = useSmartTranslations("Common");
   const [columnWidthOverrides, setColumnWidthOverrides] = React64.useState({});
@@ -23999,6 +24133,9 @@ function DataTable({
     () => applyColumnWidthOverrides(columns, columnWidthOverrides),
     [columnWidthOverrides, columns]
   );
+  const defaultVisibleKeys = React64.useMemo(() => {
+    return getLeafColumns(columnsWithWidthOverrides).filter((col) => col.visible !== false).map((col) => col.key);
+  }, [columnsWithWidthOverrides]);
   const {
     headerAlign,
     setHeaderAlign,
@@ -24139,7 +24276,9 @@ function DataTable({
         setDensity,
         setHeaderAlign,
         labels,
-        t
+        t,
+        columnColorGroups,
+        defaultVisibleKeys
       }
     ),
     /* @__PURE__ */ jsx68(
@@ -24188,7 +24327,8 @@ function DataTable({
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
                       sortByLabel: labels?.sortBy,
-                      t
+                      t,
+                      columnColorGroups
                     }
                   ) }),
                   /* @__PURE__ */ jsx68(
@@ -24793,7 +24933,7 @@ var CalloutView = ({ node, updateAttributes, selected }) => {
                 children: currentEmoji
               }
             ),
-            children: /* @__PURE__ */ jsxs62("div", { className: "flex flex-col gap-3 w-64 max-h-[360px] overflow-y-auto p-1", children: [
+            children: /* @__PURE__ */ jsxs62("div", { className: "flex flex-col gap-3 w-64 max-h-90 overflow-y-auto p-1", children: [
               /* @__PURE__ */ jsx76("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider px-1", children: t("callout.selectEmoji") }),
               /* @__PURE__ */ jsx76("div", { className: "h-44 overflow-y-auto border border-border/40 rounded-lg", children: /* @__PURE__ */ jsx76(EmojiPicker2, { onSelect: (emoji) => updateAttributes({ emoji }) }) }),
               /* @__PURE__ */ jsxs62("div", { className: "border-t border-border/50 pt-2 mt-1", children: [
@@ -24977,7 +25117,7 @@ var BookmarkView = ({ node, updateAttributes, selected, editor }) => {
           /* @__PURE__ */ jsx77("div", { className: "h-4 w-5/6 bg-muted-foreground/20 rounded" })
         ] }),
         /* @__PURE__ */ jsx77("div", { className: "h-20 w-32 bg-muted-foreground/20 rounded-lg flex-shrink-0" })
-      ] }) : /* @__PURE__ */ jsxs63("div", { className: "flex flex-col sm:flex-row items-stretch justify-between min-h-[100px]", children: [
+      ] }) : /* @__PURE__ */ jsxs63("div", { className: "flex flex-col sm:flex-row items-stretch justify-between min-h-25", children: [
         /* @__PURE__ */ jsxs63("div", { className: "flex-1 p-4 flex flex-col justify-between gap-1 min-w-0", children: [
           /* @__PURE__ */ jsxs63("div", { className: "flex flex-col gap-1 min-w-0", children: [
             /* @__PURE__ */ jsxs63("span", { className: "text-xs text-muted-foreground font-medium flex items-center gap-1.5 truncate", children: [
@@ -25260,7 +25400,7 @@ var FileCardView = ({ node, selected, editor, updateAttributes }) => {
             /* @__PURE__ */ jsxs64("div", { className: "text-xs text-muted-foreground flex items-center gap-2 mt-0.5", children: [
               fileSize ? /* @__PURE__ */ jsx78("span", { children: formatBytes(fileSize) }) : null,
               isUploading && /* @__PURE__ */ jsx78("span", { className: cn(
-                "font-medium truncate max-w-[200px]",
+                "font-medium truncate max-w-50",
                 uploadError ? "text-destructive" : "text-primary animate-pulse"
               ), children: uploadError ? `${t("fileCard.uploadFailed") || "T\u1EA3i l\xEAn th\u1EA5t b\u1EA1i"}: ${uploadError}` : t("fileCard.uploading") }),
               isUploading && uploadError && /* @__PURE__ */ jsxs64(
@@ -32125,7 +32265,7 @@ var LinkPreviewContent = ({ editor, onEdit }) => {
     editor.chain().focus().unsetLink().run();
   };
   return /* @__PURE__ */ jsxs73("div", { className: "flex items-center gap-1 p-1 max-w-sm", children: [
-    /* @__PURE__ */ jsx87("span", { className: "text-xs text-muted-foreground font-mono px-2 truncate max-w-[180px]", children: url }),
+    /* @__PURE__ */ jsx87("span", { className: "text-xs text-muted-foreground font-mono px-2 truncate max-w-45", children: url }),
     /* @__PURE__ */ jsx87("div", { className: "w-px h-6 bg-border/50 mx-1" }),
     /* @__PURE__ */ jsx87(ToolbarButton, { onClick: handleOpen, title: t("linkPreview.open") || "Open link", children: /* @__PURE__ */ jsx87(ExternalLink3, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ jsx87(ToolbarButton, { onClick: onEdit, title: t("linkPreview.edit") || "Edit link", children: /* @__PURE__ */ jsx87(Edit2, { className: "w-4 h-4" }) }),