@underverse-ui/underverse 1.0.161 → 1.0.163

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.161",
+  "version": "1.0.163",
   "sourceEntry": "src/index.ts",
   "totalExports": 232,
   "exports": [

package/dist/index.cjs

@@ -771,6 +771,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",
@@ -1166,6 +1169,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",
@@ -1561,6 +1567,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",
@@ -1956,6 +1965,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",
@@ -23095,6 +23107,88 @@ function DataTableBodyRows({
 // src/components/DataTable/components/DataTableHeader.tsx
 var import_react30 = __toESM(require("react"), 1);
 var import_lucide_react36 = require("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
 var import_jsx_runtime65 = require("react/jsx-runtime");
 function getColumnLabel(title) {
   if (typeof title === "string" || typeof title === "number") {
@@ -23126,7 +23220,8 @@ function DataTableHeader({
   getStickyHeaderClass,
   getStickyHeaderCellStyle,
   sortByLabel,
-  t
+  t,
+  columnColorGroups
 }) {
   const gi18n = useGlobalI18n();
   const renderFilterControl = import_react30.default.useCallback(
@@ -23275,7 +23370,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__ */ (0, import_jsx_runtime65.jsx)(import_lucide_react36.Filter, { className: "w-4 h-4" })
@@ -23343,6 +23438,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__ */ (0, import_jsx_runtime65.jsxs)(
       TableHead,
       {
@@ -23351,6 +23448,8 @@ function DataTableHeader({
         "data-underverse-column-key": isLeaf ? col.key : void 0,
         style: {
           width: col.width,
+          backgroundColor: headerBackgroundColor,
+          color: headerColor,
           ...getStickyHeaderCellStyle(headerCell)
         },
         className: cn(
@@ -23427,7 +23526,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";
@@ -23609,13 +23707,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 = import_react32.default.useMemo(() => getLeafColumns(columns), [columns]);
+  const { groups, ungrouped } = import_react32.default.useMemo(() => groupColumnsByColorTag(leafCols, columnColorGroups), [leafCols, columnColorGroups]);
+  const handleSelectAll = () => setVisibleCols(leafCols.map((c) => c.key));
+  const handleDefault = () => setVisibleCols(defaultVisibleKeys);
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: captionClass + " text-muted-foreground", children: caption }),
     /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -23633,7 +23736,7 @@ function DataTableToolbar({
           ]
         }
       ),
-      enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
         DropdownMenu_default,
         {
           trigger: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Button_default, { variant: "ghost", size: controlButtonSize, className: controlButtonClass, children: [
@@ -23648,19 +23751,49 @@ function DataTableToolbar({
             ) }),
             labels?.columns || t("columns")
           ] }),
-          children: leafCols.map((c) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
-            DropdownMenuItem,
-            {
-              onClick: () => {
-                setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "truncate", children: c.title })
-              ]
-            },
-            c.key
-          ))
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center gap-2 px-2 py-1.5 mb-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button_default, { variant: "outline", size: "sm", className: "h-7 text-xs flex-1", onClick: handleSelectAll, children: labels?.selectAll || t("selectAll") || "Select All" }),
+              /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Button_default, { variant: "outline", size: "sm", className: "h-7 text-xs flex-1", onClick: handleDefault, children: labels?.default || t("default") || "Default" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "max-h-80 overflow-y-auto min-w-50", children: [
+              groups.length > 0 && groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react32.default.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("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__ */ (0, import_jsx_runtime67.jsx)("span", { className: "w-2.5 h-2.5 rounded-full shadow-sm", style: { backgroundColor: group.colorTag } }),
+                  group.label
+                ] }),
+                group.columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+                  DropdownMenuItem,
+                  {
+                    onClick: () => {
+                      setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                    },
+                    closeOnSelect: false,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "truncate", children: c.title })
+                    ]
+                  },
+                  c.key
+                ))
+              ] }, group.colorTag)),
+              groups.length > 0 && ungrouped.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("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__ */ (0, import_jsx_runtime67.jsxs)(
+                DropdownMenuItem,
+                {
+                  onClick: () => {
+                    setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                  },
+                  closeOnSelect: false,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "truncate", children: c.title })
+                  ]
+                },
+                c.key
+              ))
+            ] })
+          ]
         }
       ),
       enableHeaderAlignToggle && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
@@ -23956,7 +24089,7 @@ function useStickyColumns(visibleColumns) {
   const getStickyHeaderClass = import_react37.default.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]
   );
@@ -24161,7 +24294,8 @@ function DataTable({
   estimatedRowHeight,
   overscan = 8,
   enableHeaderAutoFit = true,
-  labels
+  labels,
+  columnColorGroups
 }) {
   const t = useSmartTranslations("Common");
   const [columnWidthOverrides, setColumnWidthOverrides] = import_react38.default.useState({});
@@ -24169,6 +24303,9 @@ function DataTable({
     () => applyColumnWidthOverrides(columns, columnWidthOverrides),
     [columnWidthOverrides, columns]
   );
+  const defaultVisibleKeys = import_react38.default.useMemo(() => {
+    return getLeafColumns(columnsWithWidthOverrides).filter((col) => col.visible !== false).map((col) => col.key);
+  }, [columnsWithWidthOverrides]);
   const {
     headerAlign,
     setHeaderAlign,
@@ -24309,7 +24446,9 @@ function DataTable({
         setDensity,
         setHeaderAlign,
         labels,
-        t
+        t,
+        columnColorGroups,
+        defaultVisibleKeys
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -24358,7 +24497,8 @@ function DataTable({
                       getStickyHeaderClass,
                       getStickyHeaderCellStyle,
                       sortByLabel: labels?.sortBy,
-                      t
+                      t,
+                      columnColorGroups
                     }
                   ) }),
                   /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -24963,7 +25103,7 @@ var CalloutView = ({ node, updateAttributes, selected }) => {
                 children: currentEmoji
               }
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-col gap-3 w-64 max-h-[360px] overflow-y-auto p-1", children: [
+            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex flex-col gap-3 w-64 max-h-90 overflow-y-auto p-1", children: [
               /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider px-1", children: t("callout.selectEmoji") }),
               /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "h-44 overflow-y-auto border border-border/40 rounded-lg", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(EmojiPicker2, { onSelect: (emoji) => updateAttributes({ emoji }) }) }),
               /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "border-t border-border/50 pt-2 mt-1", children: [
@@ -25147,7 +25287,7 @@ var BookmarkView = ({ node, updateAttributes, selected, editor }) => {
           /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "h-4 w-5/6 bg-muted-foreground/20 rounded" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "h-20 w-32 bg-muted-foreground/20 rounded-lg flex-shrink-0" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-col sm:flex-row items-stretch justify-between min-h-[100px]", children: [
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-col sm:flex-row items-stretch justify-between min-h-25", children: [
         /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex-1 p-4 flex flex-col justify-between gap-1 min-w-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "flex flex-col gap-1 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("span", { className: "text-xs text-muted-foreground font-medium flex items-center gap-1.5 truncate", children: [
@@ -25430,7 +25570,7 @@ var FileCardView = ({ node, selected, editor, updateAttributes }) => {
             /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "text-xs text-muted-foreground flex items-center gap-2 mt-0.5", children: [
               fileSize ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: formatBytes(fileSize) }) : null,
               isUploading && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("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__ */ (0, import_jsx_runtime78.jsxs)(
@@ -32212,7 +32352,7 @@ var LinkPreviewContent = ({ editor, onEdit }) => {
     editor.chain().focus().unsetLink().run();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center gap-1 p-1 max-w-sm", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-xs text-muted-foreground font-mono px-2 truncate max-w-[180px]", children: url }),
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-xs text-muted-foreground font-mono px-2 truncate max-w-45", children: url }),
     /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
     /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ToolbarButton, { onClick: handleOpen, title: t("linkPreview.open") || "Open link", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react50.ExternalLink, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ToolbarButton, { onClick: onEdit, title: t("linkPreview.edit") || "Edit link", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_lucide_react50.Edit2, { className: "w-4 h-4" }) }),