@underverse-ui/underverse 0.2.75 → 0.2.77

package/dist/index.cjs

@@ -159,6 +159,7 @@ __export(index_exports, {
   ToastProvider: () => Toast_default,
   Tooltip: () => Tooltip,
   TranslationProvider: () => TranslationProvider,
+  UEditor: () => UEditor_default,
   UnderverseProvider: () => UnderverseProvider,
   VARIANT_STYLES_ALERT: () => VARIANT_STYLES_ALERT,
   VARIANT_STYLES_BTN: () => VARIANT_STYLES_BTN,
@@ -13143,6 +13144,103 @@ function DataTablePagination({
   ] });
 }
 
+// ../../components/ui/DataTable/utils/headers.ts
+function isLeafColumn(col) {
+  return !col.children || col.children.length === 0;
+}
+function getLeafColumns(columns) {
+  const leaves = [];
+  function traverse(cols) {
+    for (const col of cols) {
+      if (isLeafColumn(col)) {
+        leaves.push(col);
+      } else if (col.children) {
+        traverse(col.children);
+      }
+    }
+  }
+  traverse(columns);
+  return leaves;
+}
+function getHeaderDepth(columns) {
+  function getDepth(cols) {
+    if (!cols || cols.length === 0) return 0;
+    let maxDepth = 1;
+    for (const col of cols) {
+      if (col.children && col.children.length > 0) {
+        maxDepth = Math.max(maxDepth, 1 + getDepth(col.children));
+      }
+    }
+    return maxDepth;
+  }
+  return getDepth(columns);
+}
+function getColSpan(col) {
+  if (col.colSpan !== void 0) return col.colSpan;
+  if (isLeafColumn(col)) return 1;
+  return col.children.reduce((sum, child) => sum + getColSpan(child), 0);
+}
+function getRowSpan(col, maxDepth, currentDepth) {
+  if (col.rowSpan !== void 0) return col.rowSpan;
+  if (isLeafColumn(col)) {
+    return maxDepth - currentDepth + 1;
+  }
+  return 1;
+}
+function buildHeaderRows(columns) {
+  const maxDepth = getHeaderDepth(columns);
+  const rows = Array.from({ length: maxDepth }, () => []);
+  function buildCell(col, rowIndex, colIndex) {
+    const colSpan = getColSpan(col);
+    const rowSpan = getRowSpan(col, maxDepth, rowIndex + 1);
+    const isLeaf = isLeafColumn(col);
+    rows[rowIndex].push({
+      column: col,
+      colSpan,
+      rowSpan,
+      isLeaf,
+      rowIndex,
+      colIndex
+    });
+    if (col.children && col.children.length > 0) {
+      let childColIndex = colIndex;
+      for (const child of col.children) {
+        childColIndex = buildCell(child, rowIndex + 1, childColIndex);
+      }
+    }
+    return colIndex + colSpan;
+  }
+  let currentColIndex = 0;
+  for (const col of columns) {
+    currentColIndex = buildCell(col, 0, currentColIndex);
+  }
+  return rows;
+}
+function filterVisibleColumns(columns, visibleKeys) {
+  return columns.map((col) => {
+    if (col.children) {
+      const visibleChildren = filterVisibleColumns(col.children, visibleKeys);
+      if (visibleChildren.length > 0) {
+        return { ...col, children: visibleChildren };
+      }
+      return null;
+    }
+    return visibleKeys.has(col.key) ? col : null;
+  }).filter((col) => col !== null);
+}
+function getLeafColumnsWithFixedInheritance(columns, inheritedFixed) {
+  const leaves = [];
+  for (const col of columns) {
+    const effectiveFixed = col.fixed ?? inheritedFixed;
+    if (isLeafColumn(col)) {
+      leaves.push({ ...col, fixed: effectiveFixed });
+    } else if (col.children) {
+      leaves.push(...getLeafColumnsWithFixedInheritance(col.children, effectiveFixed));
+    }
+  }
+  return leaves;
+}
+
 // ../../components/ui/DataTable/components/Toolbar.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
 function DataTableToolbar({
@@ -13177,36 +13275,39 @@ function DataTableToolbar({
           ]
         }
       ),
-      enableColumnVisibilityToggle && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-        DropdownMenu_default,
-        {
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-              "path",
+      enableColumnVisibilityToggle && (() => {
+        const leafCols = getLeafColumns(columns);
+        return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          DropdownMenu_default,
+          {
+            trigger: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Button_default, { variant: "ghost", size: "sm", className: "h-8 px-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
+                }
+              ) }),
+              labels?.columns || t("columns")
+            ] }),
+            children: leafCols.map((c) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+              DropdownMenuItem,
               {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
-              }
-            ) }),
-            labels?.columns || t("columns")
-          ] }),
-          children: columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
-            DropdownMenuItem,
-            {
-              onClick: () => {
-                setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                onClick: () => {
+                  setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "truncate", children: c.title })
+                ]
               },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { type: "checkbox", className: "mr-2 rounded-md border-border", readOnly: true, checked: visibleCols.includes(c.key) }),
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "truncate", children: c.title })
-              ]
-            },
-            c.key
-          ))
-        }
-      ),
+              c.key
+            ))
+          }
+        );
+      })(),
       enableHeaderAlignToggle && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         DropdownMenu_default,
         {
@@ -13281,32 +13382,40 @@ var import_react34 = __toESM(require("react"), 1);
 // ../../components/ui/DataTable/utils/columns.ts
 function getColumnWidth(col, fallback = 150) {
   if (typeof col.width === "number") return col.width;
-  const raw = col.width ? String(col.width) : String(fallback);
-  const parsed = parseInt(raw, 10);
-  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+  if (col.width) {
+    const raw = String(col.width);
+    const parsed = parseInt(raw, 10);
+    if (Number.isFinite(parsed) && parsed > 0) return parsed;
+  }
+  if (col.children && col.children.length > 0) {
+    return col.children.reduce((sum, child) => sum + getColumnWidth(child, fallback), 0);
+  }
+  return fallback;
 }
 
 // ../../components/ui/DataTable/hooks/useStickyColumns.ts
-function useStickyColumns(visibleColumns) {
+function useStickyColumns(columns, visibleKeys) {
+  const visibleColumns = import_react34.default.useMemo(() => filterVisibleColumns(columns, visibleKeys), [columns, visibleKeys]);
+  const leafColumns = import_react34.default.useMemo(() => getLeafColumnsWithFixedInheritance(visibleColumns), [visibleColumns]);
   const stickyPositions = import_react34.default.useMemo(() => {
     const positions = {};
     let leftOffset = 0;
-    for (const col of visibleColumns) {
+    for (const col of leafColumns) {
       if (col.fixed === "left") {
         positions[col.key] = { left: leftOffset };
         leftOffset += getColumnWidth(col);
       }
     }
     let rightOffset = 0;
-    for (let i = visibleColumns.length - 1; i >= 0; i--) {
-      const col = visibleColumns[i];
+    for (let i = leafColumns.length - 1; i >= 0; i--) {
+      const col = leafColumns[i];
       if (col.fixed === "right") {
         positions[col.key] = { right: rightOffset };
         rightOffset += getColumnWidth(col);
       }
     }
     return positions;
-  }, [visibleColumns]);
+  }, [leafColumns]);
   const getStickyColumnStyle = import_react34.default.useCallback(
     (col) => {
       if (!col.fixed) return {};
@@ -13336,7 +13445,109 @@ function useStickyColumns(visibleColumns) {
       isStripedRow ? "bg-muted!" : "bg-card!"
     );
   }, []);
-  return { getStickyColumnStyle, getStickyHeaderClass, getStickyCellClass };
+  const getStickyHeaderCellStyle = import_react34.default.useCallback(
+    (headerCell) => {
+      const col = headerCell.column;
+      if (headerCell.isLeaf) {
+        return getStickyColumnStyle(col);
+      }
+      const descendants = getLeafColumns([col]);
+      const stickyDescendants = descendants.filter((d) => d.fixed);
+      if (stickyDescendants.length === 0) return {};
+      const firstSticky = stickyDescendants[0];
+      const lastSticky = stickyDescendants[stickyDescendants.length - 1];
+      if (firstSticky.fixed === "left") {
+        const pos = stickyPositions[firstSticky.key];
+        return pos?.left !== void 0 ? { left: pos.left } : {};
+      }
+      if (lastSticky.fixed === "right") {
+        const pos = stickyPositions[lastSticky.key];
+        return pos?.right !== void 0 ? { right: pos.right } : {};
+      }
+      return {};
+    },
+    [stickyPositions, getStickyColumnStyle]
+  );
+  return {
+    getStickyColumnStyle,
+    getStickyHeaderClass,
+    getStickyCellClass,
+    getStickyHeaderCellStyle
+  };
+}
+
+// ../../components/ui/DataTable/utils/validation.ts
+function validateColumns(columns) {
+  const warnings = [];
+  const keys = /* @__PURE__ */ new Set();
+  function validate(cols, path = "") {
+    for (const col of cols) {
+      const fullPath = path ? `${path}.${col.key}` : col.key;
+      if (keys.has(col.key)) {
+        warnings.push(`Duplicate key "${col.key}" at ${fullPath}`);
+      }
+      keys.add(col.key);
+      const isGroup = col.children && col.children.length > 0;
+      if (isGroup) {
+        if (col.dataIndex) {
+          warnings.push(`Group column "${fullPath}" has dataIndex (will be ignored)`);
+        }
+        if (col.sortable) {
+          warnings.push(`Group column "${fullPath}" has sortable (will be ignored)`);
+        }
+        if (col.filter) {
+          warnings.push(`Group column "${fullPath}" has filter (will be ignored)`);
+        }
+        if (col.render) {
+          warnings.push(`Group column "${fullPath}" has render function (will be ignored)`);
+        }
+        if (col.colSpan !== void 0) {
+          const actualColSpan = getColSpan(col);
+          if (col.colSpan !== actualColSpan) {
+            warnings.push(
+              `Column "${fullPath}" has colSpan=${col.colSpan} but structure suggests ${actualColSpan} (based on ${col.children.length} children)`
+            );
+          }
+        }
+        if (col.fixed) {
+          const conflictingChildren = col.children.filter((c) => c.fixed && c.fixed !== col.fixed);
+          if (conflictingChildren.length > 0) {
+            warnings.push(
+              `Group column "${fullPath}" has fixed="${col.fixed}" but children have different fixed values: ${conflictingChildren.map((c) => c.key).join(", ")}`
+            );
+          }
+        }
+        validate(col.children, fullPath);
+      } else {
+        if (col.children !== void 0) {
+          warnings.push(`Leaf column "${fullPath}" has children property (should be omitted for leaf columns)`);
+        }
+      }
+    }
+  }
+  validate(columns);
+  const depth = getHeaderDepth(columns);
+  if (depth > 4) {
+    warnings.push(`Header depth is ${depth} rows. Consider simplifying - too many header rows may impact user experience.`);
+  }
+  function checkMixedSticky(cols, parentPath = "") {
+    for (const col of cols) {
+      if (col.children && col.children.length > 0) {
+        const childrenFixed = col.children.map((c) => c.fixed);
+        const hasStickyChild = childrenFixed.some((f) => f !== void 0);
+        const hasNonStickyChild = childrenFixed.some((f) => f === void 0);
+        if (hasStickyChild && hasNonStickyChild) {
+          const fullPath = parentPath ? `${parentPath}.${col.key}` : col.key;
+          warnings.push(
+            `Group column "${fullPath}" has mixed sticky children (some fixed, some not). This may cause visual separation when scrolling.`
+          );
+        }
+        checkMixedSticky(col.children, parentPath ? `${parentPath}.${col.key}` : col.key);
+      }
+    }
+  }
+  checkMixedSticky(columns);
+  return warnings;
 }
 
 // ../../components/ui/DataTable/DataTable.tsx
@@ -13372,6 +13583,12 @@ function DataTable({
   const [density, setDensity] = import_react35.default.useState("normal");
   const [curPage, setCurPage] = import_react35.default.useState(page);
   const { curPageSize, setCurPageSize } = usePageSizeStorage({ pageSize, storageKey });
+  import_react35.default.useEffect(() => {
+    if (process.env.NODE_ENV === "development") {
+      const warnings = validateColumns(columns);
+      warnings.forEach((w) => console.warn(`[DataTable] ${w}`));
+    }
+  }, [columns]);
   import_react35.default.useEffect(() => {
     const newColKeys = columns.filter((c) => c.visible !== false).map((c) => c.key);
     setVisibleCols((prev) => {
@@ -13396,11 +13613,19 @@ function DataTable({
   const densityRowClass = density === "compact" ? "h-9" : density === "comfortable" ? "h-14" : "h-12";
   const cellPadding = density === "compact" ? "py-1.5 px-3" : density === "comfortable" ? "py-3 px-4" : "py-2.5 px-4";
   const visibleColsSet = import_react35.default.useMemo(() => new Set(visibleCols), [visibleCols]);
-  const visibleColumns = columns.filter((c) => visibleColsSet.has(c.key));
-  const totalColumnsWidth = import_react35.default.useMemo(() => {
-    return visibleColumns.reduce((sum, col) => sum + getColumnWidth(col), 0);
+  const visibleColumns = import_react35.default.useMemo(() => {
+    return filterVisibleColumns(columns, visibleColsSet);
+  }, [columns, visibleColsSet]);
+  const leafColumns = import_react35.default.useMemo(() => {
+    return getLeafColumns(visibleColumns);
   }, [visibleColumns]);
-  const { getStickyCellClass, getStickyColumnStyle, getStickyHeaderClass } = useStickyColumns(visibleColumns);
+  const totalColumnsWidth = import_react35.default.useMemo(() => {
+    return leafColumns.reduce((sum, col) => sum + getColumnWidth(col), 0);
+  }, [leafColumns]);
+  const { getStickyCellClass, getStickyColumnStyle, getStickyHeaderClass, getStickyHeaderCellStyle } = useStickyColumns(
+    columns,
+    visibleColsSet
+  );
   const getRowKey = (row, idx) => {
     if (!rowKey) return String(idx);
     if (typeof rowKey === "function") return String(rowKey(row));
@@ -13456,127 +13681,150 @@ function DataTable({
     }
     return null;
   };
-  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: visibleColumns.map((col, colIdx) => {
-    const prevCol = colIdx > 0 ? visibleColumns[colIdx - 1] : null;
+  const headerRows = import_react35.default.useMemo(() => buildHeaderRows(visibleColumns), [visibleColumns]);
+  const renderHeaderContent = (col, isLeaf) => {
+    if (!isLeaf) {
+      return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-1 min-h-10",
+            col.align === "right" && "justify-end",
+            col.align === "center" && "justify-center",
+            !col.align && "justify-start"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-medium text-sm whitespace-nowrap", children: col.title })
+        }
+      );
+    }
+    const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
+    const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
+    const titleContent = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "font-medium text-sm whitespace-nowrap", children: col.title }),
+      col.sortable && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        "button",
+        {
+          className: cn(
+            "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
+            sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
+          ),
+          onClick: () => {
+            setCurPage(1);
+            setSort((s) => {
+              if (!s || s.key !== col.key) return { key: col.key, order: "asc" };
+              if (s.order === "asc") return { key: col.key, order: "desc" };
+              return null;
+            });
+          },
+          "aria-label": "Sort",
+          title: `Sort by ${String(col.title)}`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "path",
+              {
+                d: "M7 8l3-3 3 3",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "path",
+              {
+                d: "M7 12l3 3 3-3",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+    const filterContent = col.filter ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      Popover,
+      {
+        placement: "bottom-start",
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          "button",
+          {
+            className: cn(
+              "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
+              filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
+            ),
+            "aria-label": "Filter",
+            title: `Filter by ${String(col.title)}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react27.Filter, { className: "w-4 h-4" })
+          }
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "p-3 w-64 space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-sm font-medium", children: col.title }),
+            filters[col.key] !== void 0 && filters[col.key] !== null && filters[col.key] !== "" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              "button",
+              {
+                onClick: () => {
+                  setCurPage(1);
+                  setFilters((f) => ({ ...f, [col.key]: void 0 }));
+                },
+                className: "text-xs text-destructive hover:underline",
+                children: t("clearFilter")
+              }
+            )
+          ] }),
+          renderFilterControl(col)
+        ] })
+      }
+    ) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 select-none min-h-10",
+          isRightAlign && "justify-end",
+          isCenterAlign && "justify-center",
+          !isRightAlign && !isCenterAlign && "justify-start"
+        ),
+        children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+          filterContent,
+          titleContent
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+          titleContent,
+          filterContent
+        ] })
+      }
+    );
+  };
+  const renderHeader = /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_jsx_runtime59.Fragment, { children: headerRows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: row.map((headerCell, cellIndex) => {
+    const { column: col, colSpan, rowSpan, isLeaf } = headerCell;
+    const prevCell = cellIndex > 0 ? row[cellIndex - 1] : null;
+    const prevCol = prevCell?.column;
     const isAfterFixedLeft = prevCol?.fixed === "left";
-    const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
+    const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
     return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       TableHead,
       {
-        style: { width: col.width, ...getStickyColumnStyle(col) },
+        colSpan,
+        rowSpan,
+        style: {
+          width: col.width,
+          ...getStickyHeaderCellStyle(headerCell)
+        },
         className: cn(
           (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: (() => {
-          const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
-          const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
-          const titleContent = /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cn("flex items-center gap-1", !col.fixed && "min-w-0 shrink"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: cn("font-medium text-sm", !col.fixed && "truncate"), children: col.title }),
-            col.sortable && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-              "button",
-              {
-                className: cn(
-                  "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
-                  sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
-                ),
-                onClick: () => {
-                  setCurPage(1);
-                  setSort((s) => {
-                    if (!s || s.key !== col.key) return { key: col.key, order: "asc" };
-                    if (s.order === "asc") return { key: col.key, order: "desc" };
-                    return null;
-                  });
-                },
-                "aria-label": "Sort",
-                title: `Sort by ${String(col.title)}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", className: "inline-block", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                    "path",
-                    {
-                      d: "M7 8l3-3 3 3",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                    "path",
-                    {
-                      d: "M7 12l3 3 3-3",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
-                    }
-                  )
-                ] })
-              }
-            )
-          ] });
-          const filterContent = col.filter ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            Popover,
-            {
-              placement: "bottom-start",
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                "button",
-                {
-                  className: cn(
-                    "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
-                    filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
-                  ),
-                  "aria-label": "Filter",
-                  title: `Filter by ${String(col.title)}`,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_lucide_react27.Filter, { className: "w-4 h-4" })
-                }
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "p-3 w-64 space-y-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-sm font-medium", children: col.title }),
-                  filters[col.key] !== void 0 && filters[col.key] !== null && filters[col.key] !== "" && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-                    "button",
-                    {
-                      onClick: () => {
-                        setCurPage(1);
-                        setFilters((f) => ({ ...f, [col.key]: void 0 }));
-                      },
-                      className: "text-xs text-destructive hover:underline",
-                      children: t("clearFilter")
-                    }
-                  )
-                ] }),
-                renderFilterControl(col)
-              ] })
-            }
-          ) : null;
-          return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-            "div",
-            {
-              className: cn(
-                "flex items-center gap-2 select-none min-h-10",
-                isRightAlign && "justify-end",
-                isCenterAlign && "justify-center",
-                !isRightAlign && !isCenterAlign && "justify-start"
-              ),
-              children: isRightAlign ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-                filterContent,
-                titleContent
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-                titleContent,
-                filterContent
-              ] })
-            }
-          );
-        })()
+        children: renderHeaderContent(col, isLeaf)
       },
       col.key
     );
-  }) });
+  }) }, `header-row-${rowIndex}`)) });
   const processedData = import_react35.default.useMemo(() => {
     if (isServerMode) return data;
     let result = [...data];
@@ -13652,7 +13900,7 @@ function DataTable({
             style: { minWidth: totalColumnsWidth > 0 ? `${totalColumnsWidth}px` : void 0 },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableHeader, { children: renderHeader }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableBody, { children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-8", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-center gap-2 text-muted-foreground", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
                   /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -13668,7 +13916,7 @@ function DataTable({
                   t("loading"),
                   "\u2026"
                 ] })
-              ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: visibleColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
+              ] }) }) }) : !displayedData || displayedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TableCell, { colSpan: leafColumns.length, className: "text-center py-6 text-muted-foreground", children: t("noData") }) }) : displayedData.map((row, idx) => {
                 const isLastRow = idx === displayedData.length - 1;
                 return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   TableRow,
@@ -13678,10 +13926,10 @@ function DataTable({
                       contentVisibility: "auto",
                       containIntrinsicSize: density === "compact" ? "0 36px" : density === "comfortable" ? "0 56px" : "0 48px"
                     },
-                    children: visibleColumns.map((col, colIdx) => {
+                    children: leafColumns.map((col, colIdx) => {
                       const value = col.dataIndex ? row[col.dataIndex] : void 0;
                       const isStripedRow = striped && idx % 2 === 0;
-                      const prevCol = colIdx > 0 ? visibleColumns[colIdx - 1] : null;
+                      const prevCol = colIdx > 0 ? leafColumns[colIdx - 1] : null;
                       const isAfterFixedLeft = prevCol?.fixed === "left";
                       const showBorderLeft = columnDividers && colIdx > 0 && !isAfterFixedLeft && !col.fixed;
                       return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -13693,8 +13941,8 @@ function DataTable({
                             col.align === "right" && "text-right",
                             col.align === "center" && "text-center",
                             showBorderLeft && "border-l border-border/60",
-                            isLastRow && col === visibleColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
-                            isLastRow && col === visibleColumns[visibleColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
+                            isLastRow && col === leafColumns[0] && "rounded-bl-2xl md:rounded-bl-3xl",
+                            isLastRow && col === leafColumns[leafColumns.length - 1] && "rounded-br-2xl md:rounded-br-3xl",
                             getStickyCellClass(col, isStripedRow),
                             !col.fixed && isStripedRow && "bg-muted/50"
                           ),
@@ -15057,6 +15305,1511 @@ function useSmartLocale() {
   }
 }
 
+// ../../components/ui/UEditor/UEditor.tsx
+var import_react44 = require("react");
+var import_next_intl6 = require("next-intl");
+var import_react45 = require("@tiptap/react");
+
+// ../../components/ui/UEditor/extensions.ts
+var import_extension_document = __toESM(require("@tiptap/extension-document"), 1);
+var import_extension_paragraph = __toESM(require("@tiptap/extension-paragraph"), 1);
+var import_extension_text = __toESM(require("@tiptap/extension-text"), 1);
+var import_extension_bold = __toESM(require("@tiptap/extension-bold"), 1);
+var import_extension_italic = __toESM(require("@tiptap/extension-italic"), 1);
+var import_extension_strike = __toESM(require("@tiptap/extension-strike"), 1);
+var import_extension_underline = __toESM(require("@tiptap/extension-underline"), 1);
+var import_extension_heading = __toESM(require("@tiptap/extension-heading"), 1);
+var import_extension_bullet_list = __toESM(require("@tiptap/extension-bullet-list"), 1);
+var import_extension_ordered_list = __toESM(require("@tiptap/extension-ordered-list"), 1);
+var import_extension_list_item = __toESM(require("@tiptap/extension-list-item"), 1);
+var import_extension_task_list = __toESM(require("@tiptap/extension-task-list"), 1);
+var import_extension_task_item = __toESM(require("@tiptap/extension-task-item"), 1);
+var import_extension_blockquote = __toESM(require("@tiptap/extension-blockquote"), 1);
+var import_extension_code = __toESM(require("@tiptap/extension-code"), 1);
+var import_extension_code_block_lowlight = __toESM(require("@tiptap/extension-code-block-lowlight"), 1);
+var import_extension_history = __toESM(require("@tiptap/extension-history"), 1);
+var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
+var import_extension_link = __toESM(require("@tiptap/extension-link"), 1);
+var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
+var import_extension_text_style = require("@tiptap/extension-text-style");
+var import_extension_color = __toESM(require("@tiptap/extension-color"), 1);
+var import_extension_highlight = __toESM(require("@tiptap/extension-highlight"), 1);
+var import_extension_text_align = __toESM(require("@tiptap/extension-text-align"), 1);
+var import_extension_table = require("@tiptap/extension-table");
+var import_extension_table_row = __toESM(require("@tiptap/extension-table-row"), 1);
+var import_extension_table_cell = __toESM(require("@tiptap/extension-table-cell"), 1);
+var import_extension_table_header = __toESM(require("@tiptap/extension-table-header"), 1);
+var import_extension_character_count = __toESM(require("@tiptap/extension-character-count"), 1);
+var import_extension_typography = __toESM(require("@tiptap/extension-typography"), 1);
+var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"), 1);
+var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"), 1);
+var import_extension_horizontal_rule = __toESM(require("@tiptap/extension-horizontal-rule"), 1);
+var import_lowlight = require("lowlight");
+
+// ../../components/ui/UEditor/slash-command.tsx
+var import_core = require("@tiptap/core");
+var import_suggestion = __toESM(require("@tiptap/suggestion"), 1);
+var import_react38 = require("@tiptap/react");
+var import_react39 = require("react");
+var import_lucide_react33 = require("lucide-react");
+var import_tippy = __toESM(require("tippy.js"), 1);
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var CommandList = (0, import_react39.forwardRef)((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = (0, import_react39.useState)(0);
+  const listRef = (0, import_react39.useRef)(null);
+  (0, import_react39.useEffect)(() => {
+    setSelectedIndex(0);
+  }, [props.items]);
+  (0, import_react39.useEffect)(() => {
+    const selectedElement = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
+    selectedElement?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex, props.items]);
+  (0, import_react39.useImperativeHandle)(ref, () => ({
+    onKeyDown: ({ event }) => {
+      if (event.key === "ArrowUp") {
+        setSelectedIndex((prev) => (prev + props.items.length - 1) % props.items.length);
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        setSelectedIndex((prev) => (prev + 1) % props.items.length);
+        return true;
+      }
+      if (event.key === "Enter") {
+        const item = props.items[selectedIndex];
+        if (item) {
+          props.command(item);
+        }
+        return true;
+      }
+      return false;
+    }
+  }));
+  if (props.items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: "No results" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { ref: listRef, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Basic Blocks" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "p-1", children: props.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-index": index,
+        onClick: () => props.command(item),
+        className: cn(
+          "flex items-center w-full px-3 py-2.5 rounded-lg transition-colors group",
+          selectedIndex === index ? "bg-accent" : "hover:bg-accent/50"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center w-10 h-10 rounded-lg mr-3 transition-colors",
+                selectedIndex === index ? "bg-primary/10" : "bg-muted/50 group-hover:bg-muted"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(item.icon, { className: cn("w-5 h-5", selectedIndex === index ? "text-primary" : "text-muted-foreground") })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: cn("text-sm font-medium", selectedIndex === index && "text-primary"), children: item.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "text-xs text-muted-foreground", children: item.description })
+          ] })
+        ]
+      },
+      item.title
+    )) })
+  ] });
+});
+CommandList.displayName = "CommandList";
+var getSuggestionItems = ({ query }) => {
+  return [
+    {
+      icon: import_lucide_react33.Type,
+      title: "Text",
+      description: "Start writing with plain text",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setParagraph().run();
+      }
+    },
+    {
+      icon: import_lucide_react33.Heading1,
+      title: "Heading 1",
+      description: "Large section heading",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+      }
+    },
+    {
+      icon: import_lucide_react33.Heading2,
+      title: "Heading 2",
+      description: "Medium section heading",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+      }
+    },
+    {
+      icon: import_lucide_react33.Heading3,
+      title: "Heading 3",
+      description: "Small section heading",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+      }
+    },
+    {
+      icon: import_lucide_react33.List,
+      title: "Bullet List",
+      description: "Create a simple bullet list",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleBulletList().run();
+      }
+    },
+    {
+      icon: import_lucide_react33.ListOrdered,
+      title: "Numbered List",
+      description: "Create a list with numbering",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+      }
+    },
+    {
+      icon: import_lucide_react33.ListTodo,
+      title: "Todo List",
+      description: "Track tasks with a todo list",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleTaskList().run();
+      }
+    },
+    {
+      icon: import_lucide_react33.Quote,
+      title: "Quote",
+      description: "Capture a quote",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleBlockquote().run();
+      }
+    },
+    {
+      icon: import_lucide_react33.FileCode,
+      title: "Code Block",
+      description: "Display code with syntax highlighting",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+      }
+    },
+    {
+      icon: import_lucide_react33.Minus,
+      title: "Divider",
+      description: "Visually divide blocks",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).setHorizontalRule().run();
+      }
+    },
+    {
+      icon: import_lucide_react33.Table,
+      title: "Table",
+      description: "Insert a table",
+      command: ({ editor, range }) => {
+        editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
+      }
+    }
+  ].filter((item) => item.title.toLowerCase().includes(query.toLowerCase()));
+};
+var SlashCommand = import_core.Extension.create({
+  name: "slashCommand",
+  addProseMirrorPlugins() {
+    return [
+      (0, import_suggestion.default)({
+        editor: this.editor,
+        char: "/",
+        command: ({ editor, range, props }) => {
+          props.command({ editor, range });
+        },
+        items: getSuggestionItems,
+        render: () => {
+          let component;
+          let popup;
+          return {
+            onStart: (props) => {
+              component = new import_react38.ReactRenderer(CommandList, {
+                props,
+                editor: props.editor
+              });
+              if (!props.clientRect) {
+                return;
+              }
+              popup = (0, import_tippy.default)("body", {
+                getReferenceClientRect: props.clientRect,
+                appendTo: () => document.body,
+                content: component.element,
+                showOnCreate: true,
+                interactive: true,
+                trigger: "manual",
+                placement: "bottom-start"
+              });
+            },
+            onUpdate(props) {
+              component?.updateProps(props);
+              if (!props.clientRect) {
+                return;
+              }
+              popup?.[0]?.setProps({
+                getReferenceClientRect: props.clientRect
+              });
+            },
+            onKeyDown(props) {
+              if (props.event.key === "Escape") {
+                popup?.[0]?.hide();
+                return true;
+              }
+              return component?.ref?.onKeyDown(props) ?? false;
+            },
+            onExit() {
+              popup?.[0]?.destroy();
+              component?.destroy();
+            }
+          };
+        }
+      })
+    ];
+  }
+});
+
+// ../../components/ui/UEditor/extensions.ts
+var lowlight = (0, import_lowlight.createLowlight)(import_lowlight.common);
+function buildUEditorExtensions({ placeholder, maxCharacters }) {
+  return [
+    import_extension_document.default,
+    import_extension_paragraph.default,
+    import_extension_text.default,
+    import_extension_bold.default,
+    import_extension_italic.default,
+    import_extension_strike.default,
+    import_extension_underline.default,
+    import_extension_subscript.default,
+    import_extension_superscript.default,
+    import_extension_heading.default.configure({
+      levels: [1, 2, 3]
+    }),
+    import_extension_bullet_list.default.configure({
+      HTMLAttributes: {
+        class: "list-disc pl-6 my-2 space-y-1"
+      }
+    }),
+    import_extension_ordered_list.default.configure({
+      HTMLAttributes: {
+        class: "list-decimal pl-6 my-2 space-y-1"
+      }
+    }),
+    import_extension_list_item.default.configure({
+      HTMLAttributes: {
+        class: "pl-1"
+      }
+    }),
+    import_extension_task_list.default,
+    import_extension_task_item.default.configure({
+      nested: true
+    }),
+    import_extension_blockquote.default.configure({
+      HTMLAttributes: {
+        class: "border-l-4 border-primary pl-4 py-2 my-4 bg-muted/30 rounded-r-lg italic text-muted-foreground"
+      }
+    }),
+    import_extension_code.default.configure({
+      HTMLAttributes: {
+        class: "px-1.5 py-0.5 rounded bg-muted font-mono text-sm"
+      }
+    }),
+    import_extension_code_block_lowlight.default.configure({
+      lowlight,
+      HTMLAttributes: {
+        class: "rounded-lg bg-[#1e1e1e] p-4 font-mono text-sm overflow-x-auto"
+      }
+    }),
+    import_extension_horizontal_rule.default,
+    import_extension_link.default.configure({
+      openOnClick: false,
+      HTMLAttributes: {
+        class: "text-primary underline underline-offset-2 hover:text-primary/80 cursor-pointer"
+      }
+    }),
+    import_extension_image.default.configure({
+      HTMLAttributes: {
+        class: "rounded-lg max-w-full h-auto my-4"
+      }
+    }),
+    import_extension_text_style.TextStyle,
+    import_extension_color.default,
+    import_extension_highlight.default.configure({
+      multicolor: true
+    }),
+    import_extension_text_align.default.configure({
+      types: ["heading", "paragraph"]
+    }),
+    import_extension_table.Table.configure({
+      resizable: true,
+      HTMLAttributes: {
+        class: "border-collapse w-full my-4"
+      }
+    }),
+    import_extension_table_row.default,
+    import_extension_table_cell.default.configure({
+      HTMLAttributes: {
+        class: "border border-border p-2 min-w-[100px]"
+      }
+    }),
+    import_extension_table_header.default.configure({
+      HTMLAttributes: {
+        class: "border border-border p-2 bg-muted font-semibold min-w-[100px]"
+      }
+    }),
+    import_extension_character_count.default.configure({
+      limit: maxCharacters
+    }),
+    import_extension_typography.default,
+    import_extension_history.default,
+    import_extension_placeholder.default.configure({
+      placeholder,
+      emptyEditorClass: "is-editor-empty",
+      emptyNodeClass: "is-empty"
+    }),
+    SlashCommand
+  ];
+}
+
+// ../../components/ui/UEditor/toolbar.tsx
+var import_react42 = __toESM(require("react"), 1);
+var import_next_intl3 = require("next-intl");
+var import_lucide_react36 = require("lucide-react");
+
+// ../../components/ui/UEditor/colors.tsx
+var import_react40 = require("react");
+var import_next_intl = require("next-intl");
+var import_lucide_react34 = require("lucide-react");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var useEditorColors = () => {
+  const t = (0, import_next_intl.useTranslations)("UEditor");
+  const textColors = (0, import_react40.useMemo)(
+    () => [
+      { name: t("colors.default"), color: "inherit", cssClass: "text-foreground" },
+      { name: t("colors.muted"), color: "var(--muted-foreground)", cssClass: "text-muted-foreground" },
+      { name: t("colors.primary"), color: "var(--primary)", cssClass: "text-primary" },
+      { name: t("colors.secondary"), color: "var(--secondary)", cssClass: "text-secondary" },
+      { name: t("colors.success"), color: "var(--success)", cssClass: "text-success" },
+      { name: t("colors.warning"), color: "var(--warning)", cssClass: "text-warning" },
+      { name: t("colors.destructive"), color: "var(--destructive)", cssClass: "text-destructive" },
+      { name: t("colors.info"), color: "var(--info)", cssClass: "text-info" }
+    ],
+    [t]
+  );
+  const highlightColors = (0, import_react40.useMemo)(
+    () => [
+      { name: t("colors.default"), color: "", cssClass: "" },
+      { name: t("colors.muted"), color: "var(--muted)", cssClass: "bg-muted" },
+      { name: t("colors.primary"), color: "color-mix(in oklch, var(--primary) 20%, transparent)", cssClass: "bg-primary/20" },
+      { name: t("colors.secondary"), color: "color-mix(in oklch, var(--secondary) 20%, transparent)", cssClass: "bg-secondary/20" },
+      { name: t("colors.success"), color: "color-mix(in oklch, var(--success) 20%, transparent)", cssClass: "bg-success/20" },
+      { name: t("colors.warning"), color: "color-mix(in oklch, var(--warning) 20%, transparent)", cssClass: "bg-warning/20" },
+      { name: t("colors.destructive"), color: "color-mix(in oklch, var(--destructive) 20%, transparent)", cssClass: "bg-destructive/20" },
+      { name: t("colors.info"), color: "color-mix(in oklch, var(--info) 20%, transparent)", cssClass: "bg-info/20" },
+      { name: t("colors.accent"), color: "var(--accent)", cssClass: "bg-accent" }
+    ],
+    [t]
+  );
+  return { textColors, highlightColors };
+};
+var EditorColorPalette = ({
+  colors,
+  currentColor,
+  onSelect,
+  label
+}) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "p-2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider px-2", children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    "button",
+    {
+      type: "button",
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => onSelect(c.color),
+      className: cn(
+        "flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all hover:scale-105",
+        currentColor === c.color ? "border-primary ring-2 ring-primary/20" : "border-border/50 hover:border-primary/50"
+      ),
+      style: { backgroundColor: c.color || "transparent" },
+      title: c.name,
+      children: [
+        c.color === "" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react34.X, { className: "w-4 h-4 text-muted-foreground" }),
+        c.color === "inherit" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "text-xs font-medium", children: "A" })
+      ]
+    },
+    c.name
+  )) })
+] });
+
+// ../../components/ui/UEditor/inputs.tsx
+var import_react41 = require("react");
+var import_next_intl2 = require("next-intl");
+var import_lucide_react35 = require("lucide-react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var LinkInput = ({
+  onSubmit,
+  onCancel,
+  initialUrl = ""
+}) => {
+  const t = (0, import_next_intl2.useTranslations)("UEditor");
+  const [url, setUrl] = (0, import_react41.useState)(initialUrl);
+  const inputRef = (0, import_react41.useRef)(null);
+  (0, import_react41.useEffect)(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (url) {
+      onSubmit(url.startsWith("http") ? url : `https://${url}`);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("form", { onSubmit: handleSubmit, className: "flex items-center gap-2 p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value: url,
+        onChange: (e) => setUrl(e.target.value),
+        placeholder: t("linkInput.placeholder"),
+        className: "flex-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "submit", className: "p-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react35.Check, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", onClick: onCancel, className: "p-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react35.X, { className: "w-4 h-4" }) })
+  ] });
+};
+var ImageInput = ({ onSubmit, onCancel }) => {
+  const t = (0, import_next_intl2.useTranslations)("UEditor");
+  const [url, setUrl] = (0, import_react41.useState)("");
+  const [alt, setAlt] = (0, import_react41.useState)("");
+  const inputRef = (0, import_react41.useRef)(null);
+  (0, import_react41.useEffect)(() => {
+    inputRef.current?.focus();
+  }, []);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (url) {
+      onSubmit(url, alt);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("form", { onSubmit: handleSubmit, className: "p-3 space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.urlLabel") }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          placeholder: t("imageInput.urlPlaceholder"),
+          className: "w-full mt-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.altLabel") }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        "input",
+        {
+          type: "text",
+          value: alt,
+          onChange: (e) => setAlt(e.target.value),
+          placeholder: t("imageInput.altPlaceholder"),
+          className: "w-full mt-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        "button",
+        {
+          type: "submit",
+          disabled: !url,
+          className: "flex-1 py-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50",
+          children: t("imageInput.addBtn")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", onClick: onCancel, className: "px-4 py-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: t("imageInput.cancelBtn") })
+    ] })
+  ] });
+};
+
+// ../../components/ui/UEditor/toolbar.tsx
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var ToolbarButton = import_react42.default.forwardRef(({ onClick, active, disabled, children, title, className }, ref) => {
+  const button = /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    "button",
+    {
+      ref,
+      type: "button",
+      onMouseDown: (e) => e.preventDefault(),
+      onClick,
+      disabled,
+      className: cn(
+        "flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200",
+        "hover:bg-accent hover:scale-105",
+        "focus:outline-none focus:ring-2 focus:ring-primary/20",
+        "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:scale-100",
+        active ? "bg-primary/10 text-primary shadow-sm" : "text-muted-foreground hover:text-foreground",
+        className
+      ),
+      children
+    }
+  );
+  if (title) {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Tooltip, { content: title, placement: "top", delay: { open: 500, close: 0 }, children: button });
+  }
+  return button;
+});
+ToolbarButton.displayName = "ToolbarButton";
+var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" });
+var EditorToolbar = ({ editor, variant }) => {
+  const t = (0, import_next_intl3.useTranslations)("UEditor");
+  const { textColors, highlightColors } = useEditorColors();
+  const [showImageInput, setShowImageInput] = (0, import_react42.useState)(false);
+  if (variant === "minimal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex items-center gap-1 p-2 border-b bg-muted/30", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Bold, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleItalic().run(),
+          active: editor.isActive("italic"),
+          title: t("toolbar.italic"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Italic, { className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        ToolbarButton,
+        {
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+          active: editor.isActive("bulletList"),
+          title: t("toolbar.bulletList"),
+          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.List, { className: "w-4 h-4" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex flex-wrap items-center gap-1 p-2 border-b bg-linear-to-r from-muted/30 to-transparent", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Type, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropdownMenuItem, { icon: import_lucide_react36.Type, label: t("toolbar.normal"), onClick: () => editor.chain().focus().setParagraph().run(), active: editor.isActive("paragraph") }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.Heading1,
+              label: t("toolbar.heading1"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+              active: editor.isActive("heading", { level: 1 }),
+              shortcut: "Ctrl+Alt+1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.Heading2,
+              label: t("toolbar.heading2"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+              active: editor.isActive("heading", { level: 2 }),
+              shortcut: "Ctrl+Alt+2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.Heading3,
+              label: t("toolbar.heading3"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+              active: editor.isActive("heading", { level: 3 }),
+              shortcut: "Ctrl+Alt+3"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Bold, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleItalic().run(),
+        active: editor.isActive("italic"),
+        title: t("toolbar.italic"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Italic, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleUnderline().run(),
+        active: editor.isActive("underline"),
+        title: t("toolbar.underline"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Underline, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleStrike().run(),
+        active: editor.isActive("strike"),
+        title: t("toolbar.strike"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Strikethrough, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Code, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("colors.textColor"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Palette, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          EditorColorPalette,
+          {
+            colors: textColors,
+            currentColor: editor.getAttributes("textStyle").color || "inherit",
+            onSelect: (color) => {
+              if (color === "inherit") {
+                editor.chain().focus().unsetColor().run();
+              } else {
+                editor.chain().focus().setColor(color).run();
+              }
+            },
+            label: t("colors.textColor")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarButton, { onClick: () => {
+        }, active: editor.isActive("highlight"), title: t("colors.highlight"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Highlighter, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
+        ] }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          EditorColorPalette,
+          {
+            colors: highlightColors,
+            currentColor: editor.getAttributes("highlight").color || "",
+            onSelect: (color) => {
+              if (color === "") {
+                editor.chain().focus().unsetHighlight().run();
+              } else {
+                editor.chain().focus().toggleHighlight({ color }).run();
+              }
+            },
+            label: t("colors.highlight")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.alignment"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.AlignLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.AlignLeft,
+              label: t("toolbar.alignLeft"),
+              onClick: () => editor.chain().focus().setTextAlign("left").run(),
+              active: editor.isActive({ textAlign: "left" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.AlignCenter,
+              label: t("toolbar.alignCenter"),
+              onClick: () => editor.chain().focus().setTextAlign("center").run(),
+              active: editor.isActive({ textAlign: "center" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.AlignRight,
+              label: t("toolbar.alignRight"),
+              onClick: () => editor.chain().focus().setTextAlign("right").run(),
+              active: editor.isActive({ textAlign: "right" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.AlignJustify,
+              label: t("toolbar.justify"),
+              onClick: () => editor.chain().focus().setTextAlign("justify").run(),
+              active: editor.isActive({ textAlign: "justify" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.bulletList"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.List, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.List,
+              label: t("toolbar.bulletList"),
+              onClick: () => editor.chain().focus().toggleBulletList().run(),
+              active: editor.isActive("bulletList"),
+              shortcut: "Ctrl+Shift+8"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.ListOrdered,
+              label: t("toolbar.orderedList"),
+              onClick: () => editor.chain().focus().toggleOrderedList().run(),
+              active: editor.isActive("orderedList"),
+              shortcut: "Ctrl+Shift+7"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.ListTodo,
+              label: t("toolbar.taskList"),
+              onClick: () => editor.chain().focus().toggleTaskList().run(),
+              active: editor.isActive("taskList"),
+              shortcut: "Ctrl+Shift+9"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.quote"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Quote, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.Quote,
+              label: t("toolbar.quote"),
+              onClick: () => editor.chain().focus().toggleBlockquote().run(),
+              active: editor.isActive("blockquote"),
+              shortcut: "Ctrl+Shift+B"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.FileCode,
+              label: t("toolbar.codeBlock"),
+              onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+              active: editor.isActive("codeBlock"),
+              shortcut: "Ctrl+Alt+C"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.image"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Image, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
+        ] }),
+        children: showImageInput ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          ImageInput,
+          {
+            onSubmit: (url, alt) => {
+              editor.chain().focus().setImage({ src: url, alt }).run();
+              setShowImageInput(false);
+            },
+            onCancel: () => setShowImageInput(false)
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropdownMenuItem, { icon: import_lucide_react36.Link, label: t("imageInput.addFromUrl"), onClick: () => setShowImageInput(true) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.table"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Table, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.ChevronDown, { className: "w-3 h-3" })
+        ] }),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropdownMenuItem, { icon: import_lucide_react36.Table, label: t("tableMenu.insert3x3"), onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run() }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.ArrowDown,
+              label: t("tableMenu.addColumnBefore"),
+              onClick: () => editor.chain().focus().addColumnBefore().run(),
+              disabled: !editor.can().addColumnBefore()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.ArrowDown,
+              label: t("tableMenu.addColumnAfter"),
+              onClick: () => editor.chain().focus().addColumnAfter().run(),
+              disabled: !editor.can().addColumnAfter()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.ArrowRight,
+              label: t("tableMenu.addRowBefore"),
+              onClick: () => editor.chain().focus().addRowBefore().run(),
+              disabled: !editor.can().addRowBefore()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.ArrowRight,
+              label: t("tableMenu.addRowAfter"),
+              onClick: () => editor.chain().focus().addRowAfter().run(),
+              disabled: !editor.can().addRowAfter()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.Trash2,
+              label: t("tableMenu.deleteColumn"),
+              onClick: () => editor.chain().focus().deleteColumn().run(),
+              disabled: !editor.can().deleteColumn()
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DropdownMenuItem, { icon: import_lucide_react36.Trash2, label: t("tableMenu.deleteRow"), onClick: () => editor.chain().focus().deleteRow().run(), disabled: !editor.can().deleteRow() }),
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react36.Trash2,
+              label: t("tableMenu.deleteTable"),
+              onClick: () => editor.chain().focus().deleteTable().run(),
+              disabled: !editor.can().deleteTable()
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleSubscript().run(), active: editor.isActive("subscript"), title: t("toolbar.subscript"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Subscript, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleSuperscript().run(), active: editor.isActive("superscript"), title: t("toolbar.superscript"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Superscript, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Undo, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react36.Redo, { className: "w-4 h-4" }) })
+  ] });
+};
+
+// ../../components/ui/UEditor/menus.tsx
+var import_react43 = require("react");
+var import_react_dom9 = require("react-dom");
+var import_next_intl4 = require("next-intl");
+var import_lucide_react37 = require("lucide-react");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
+  const t = (0, import_next_intl4.useTranslations)("UEditor");
+  const [selectedIndex, setSelectedIndex] = (0, import_react43.useState)(0);
+  const menuRef = (0, import_react43.useRef)(null);
+  const allCommands = (0, import_react43.useMemo)(
+    () => [
+      {
+        icon: import_lucide_react37.Type,
+        label: t("slashCommand.text"),
+        description: t("slashCommand.textDesc"),
+        action: () => editor.chain().focus().setParagraph().run()
+      },
+      {
+        icon: import_lucide_react37.Heading1,
+        label: t("slashCommand.heading1"),
+        description: t("slashCommand.heading1Desc"),
+        action: () => editor.chain().focus().toggleHeading({ level: 1 }).run()
+      },
+      {
+        icon: import_lucide_react37.Heading2,
+        label: t("slashCommand.heading2"),
+        description: t("slashCommand.heading2Desc"),
+        action: () => editor.chain().focus().toggleHeading({ level: 2 }).run()
+      },
+      {
+        icon: import_lucide_react37.Heading3,
+        label: t("slashCommand.heading3"),
+        description: t("slashCommand.heading3Desc"),
+        action: () => editor.chain().focus().toggleHeading({ level: 3 }).run()
+      },
+      {
+        icon: import_lucide_react37.List,
+        label: t("slashCommand.bulletList"),
+        description: t("slashCommand.bulletListDesc"),
+        action: () => editor.chain().focus().toggleBulletList().run()
+      },
+      {
+        icon: import_lucide_react37.ListOrdered,
+        label: t("slashCommand.orderedList"),
+        description: t("slashCommand.orderedListDesc"),
+        action: () => editor.chain().focus().toggleOrderedList().run()
+      },
+      {
+        icon: import_lucide_react37.ListTodo,
+        label: t("slashCommand.todoList"),
+        description: t("slashCommand.todoListDesc"),
+        action: () => editor.chain().focus().toggleTaskList().run()
+      },
+      {
+        icon: import_lucide_react37.Quote,
+        label: t("slashCommand.quote"),
+        description: t("slashCommand.quoteDesc"),
+        action: () => editor.chain().focus().toggleBlockquote().run()
+      },
+      {
+        icon: import_lucide_react37.FileCode,
+        label: t("slashCommand.codeBlock"),
+        description: t("slashCommand.codeBlockDesc"),
+        action: () => editor.chain().focus().toggleCodeBlock().run()
+      },
+      {
+        icon: import_lucide_react37.Minus,
+        label: t("slashCommand.divider"),
+        description: t("slashCommand.dividerDesc"),
+        action: () => editor.chain().focus().setHorizontalRule().run()
+      },
+      {
+        icon: import_lucide_react37.Table,
+        label: t("slashCommand.table"),
+        description: t("slashCommand.tableDesc"),
+        action: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+      }
+    ],
+    [editor, t]
+  );
+  const commands = (0, import_react43.useMemo)(() => {
+    if (!filterText) return allCommands;
+    const lowerFilter = filterText.toLowerCase();
+    return allCommands.filter((cmd) => cmd.label.toLowerCase().includes(lowerFilter) || cmd.description.toLowerCase().includes(lowerFilter));
+  }, [allCommands, filterText]);
+  (0, import_react43.useEffect)(() => {
+    setSelectedIndex(0);
+  }, [filterText]);
+  (0, import_react43.useEffect)(() => {
+    const selectedElement = menuRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
+    selectedElement?.scrollIntoView({ block: "nearest" });
+  }, [selectedIndex]);
+  const selectCommand = (0, import_react43.useCallback)(
+    (index) => {
+      const command = commands[index];
+      if (command) {
+        command.action();
+        onClose();
+      }
+    },
+    [commands, onClose]
+  );
+  (0, import_react43.useEffect)(() => {
+    const handleKeyDown = (e) => {
+      if (commands.length === 0) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev + 1) % commands.length);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setSelectedIndex((prev) => (prev - 1 + commands.length) % commands.length);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        selectCommand(selectedIndex);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [commands, selectedIndex, selectCommand, onClose]);
+  if (commands.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-72 p-4 text-center text-muted-foreground text-sm", children: t("slashCommand.noResults") });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { ref: menuRef, className: "w-72 max-h-80 overflow-y-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("slashCommand.basicBlocks") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "p-1", children: commands.map((cmd, index) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+      "button",
+      {
+        type: "button",
+        "data-index": index,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => selectCommand(index),
+        onMouseEnter: () => setSelectedIndex(index),
+        className: cn(
+          "flex items-center w-full px-3 py-2.5 rounded-lg transition-colors group",
+          selectedIndex === index ? "bg-accent" : "hover:bg-accent/50"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-center w-10 h-10 rounded-lg mr-3 transition-colors",
+                selectedIndex === index ? "bg-primary/10" : "bg-muted/50 group-hover:bg-muted"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(cmd.icon, { className: cn("w-5 h-5", selectedIndex === index ? "text-primary" : "text-muted-foreground") })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: cn("text-sm font-medium", selectedIndex === index && "text-primary"), children: cmd.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "text-xs text-muted-foreground", children: cmd.description })
+          ] })
+        ]
+      },
+      cmd.label
+    )) })
+  ] });
+};
+var FloatingMenuContent = ({ editor }) => {
+  const t = (0, import_next_intl4.useTranslations)("UEditor");
+  const [showCommands, setShowCommands] = (0, import_react43.useState)(false);
+  if (showCommands) {
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(SlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShowCommands(true),
+      className: "flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-accent transition-all group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "text-sm text-muted-foreground group-hover:text-foreground", children: t("floatingMenu.addBlock") })
+      ]
+    }
+  );
+};
+var BubbleMenuContent = ({ editor }) => {
+  const t = (0, import_next_intl4.useTranslations)("UEditor");
+  const { textColors, highlightColors } = useEditorColors();
+  const [showLinkInput, setShowLinkInput] = (0, import_react43.useState)(false);
+  const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react43.useState)(false);
+  if (showLinkInput) {
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      LinkInput,
+      {
+        initialUrl: editor.getAttributes("link").href || "",
+        onSubmit: (url) => {
+          editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+        },
+        onCancel: () => setShowLinkInput(false)
+      }
+    );
+  }
+  if (showEditorColorPalette) {
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "w-48", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        EditorColorPalette,
+        {
+          colors: textColors,
+          currentColor: editor.getAttributes("textStyle").color || "inherit",
+          onSelect: (color) => {
+            if (color === "inherit") {
+              editor.chain().focus().unsetColor().run();
+            } else {
+              editor.chain().focus().setColor(color).run();
+            }
+          },
+          label: t("colors.textColor")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "border-t my-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        EditorColorPalette,
+        {
+          colors: highlightColors,
+          currentColor: editor.getAttributes("highlight").color || "",
+          onSelect: (color) => {
+            if (color === "") {
+              editor.chain().focus().unsetHighlight().run();
+            } else {
+              editor.chain().focus().toggleHighlight({ color }).run();
+            }
+          },
+          label: t("colors.highlight")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "p-2 border-t", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowEditorColorPalette(false),
+          className: "w-full py-1.5 text-sm rounded-lg hover:bg-muted transition-colors",
+          children: t("colors.done")
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "flex items-center gap-0.5 p-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Bold, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Italic, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleUnderline().run(),
+        active: editor.isActive("underline"),
+        title: t("toolbar.underline"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Underline, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Strikethrough, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Code, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => setShowLinkInput(true), active: editor.isActive("link"), title: t("toolbar.link"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Link, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ToolbarButton, { onClick: () => setShowEditorColorPalette(true), title: t("colors.textColor"), children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Palette, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleSubscript().run(),
+        active: editor.isActive("subscript"),
+        title: t("toolbar.subscript"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Subscript, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleSuperscript().run(),
+        active: editor.isActive("superscript"),
+        title: t("toolbar.superscript"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react37.Superscript, { className: "w-4 h-4" })
+      }
+    )
+  ] });
+};
+var CustomBubbleMenu = ({ editor }) => {
+  const [isVisible, setIsVisible] = (0, import_react43.useState)(false);
+  const [position, setPosition] = (0, import_react43.useState)({ top: 0, left: 0 });
+  const menuRef = (0, import_react43.useRef)(null);
+  (0, import_react43.useEffect)(() => {
+    const updatePosition = () => {
+      const { state, view } = editor;
+      const { from, to, empty } = state.selection;
+      if (empty || !view.hasFocus()) {
+        setIsVisible(false);
+        return;
+      }
+      const start = view.coordsAtPos(from);
+      const end = view.coordsAtPos(to);
+      const left = (start.left + end.left) / 2;
+      const top = start.top - 10;
+      setPosition({ top, left });
+      setIsVisible(true);
+    };
+    const handleBlur = () => setIsVisible(false);
+    editor.on("selectionUpdate", updatePosition);
+    editor.on("focus", updatePosition);
+    editor.on("blur", handleBlur);
+    return () => {
+      editor.off("selectionUpdate", updatePosition);
+      editor.off("focus", updatePosition);
+      editor.off("blur", handleBlur);
+    };
+  }, [editor]);
+  if (!isVisible) return null;
+  return (0, import_react_dom9.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      "div",
+      {
+        ref: menuRef,
+        className: "fixed z-50 flex rounded-2xl border border-border bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 zoom-in-95",
+        style: {
+          top: `${position.top}px`,
+          left: `${position.left}px`,
+          transform: "translate(-50%, -100%)"
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(BubbleMenuContent, { editor })
+      }
+    ),
+    document.body
+  );
+};
+var CustomFloatingMenu = ({ editor }) => {
+  const [isVisible, setIsVisible] = (0, import_react43.useState)(false);
+  const [position, setPosition] = (0, import_react43.useState)({ top: 0, left: 0 });
+  (0, import_react43.useEffect)(() => {
+    const updatePosition = () => {
+      const { state, view } = editor;
+      const { $from, empty } = state.selection;
+      const isEmptyTextBlock = $from.parent.isTextblock && $from.parent.type.name === "paragraph" && $from.parent.textContent === "" && empty;
+      if (!isEmptyTextBlock || !view.hasFocus()) {
+        setIsVisible(false);
+        return;
+      }
+      const coords = view.coordsAtPos($from.pos);
+      setPosition({ top: coords.top - 10, left: coords.left });
+      setIsVisible(true);
+    };
+    const handleBlur = () => setIsVisible(false);
+    editor.on("selectionUpdate", updatePosition);
+    editor.on("focus", updatePosition);
+    editor.on("blur", handleBlur);
+    editor.on("update", updatePosition);
+    return () => {
+      editor.off("selectionUpdate", updatePosition);
+      editor.off("focus", updatePosition);
+      editor.off("blur", handleBlur);
+      editor.off("update", updatePosition);
+    };
+  }, [editor]);
+  if (!isVisible) return null;
+  return (0, import_react_dom9.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+      "div",
+      {
+        className: "fixed z-50 rounded-2xl border border-border bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 slide-in-from-bottom-2",
+        style: {
+          top: `${position.top}px`,
+          left: `${position.left}px`,
+          transform: "translate(-50%, -100%)"
+        },
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FloatingMenuContent, { editor })
+      }
+    ),
+    document.body
+  );
+};
+
+// ../../components/ui/UEditor/CharacterCount.tsx
+var import_next_intl5 = require("next-intl");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var CharacterCountDisplay = ({ editor, maxCharacters }) => {
+  const t = (0, import_next_intl5.useTranslations)("UEditor");
+  const storage = editor.storage;
+  const characterCount = storage.characterCount?.characters?.() ?? 0;
+  const wordCount = storage.characterCount?.words?.() ?? 0;
+  const percentage = maxCharacters ? Math.round(characterCount / maxCharacters * 100) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex items-center gap-3 px-3 py-2 text-xs text-muted-foreground border-t bg-muted/20", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { children: [
+      wordCount,
+      " ",
+      t("words")
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { children: [
+      characterCount,
+      " ",
+      t("characters")
+    ] }),
+    maxCharacters && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: cn(percentage > 90 && "text-destructive", percentage > 100 && "font-bold"), children: [
+      characterCount,
+      "/",
+      maxCharacters
+    ] })
+  ] });
+};
+
+// ../../components/ui/UEditor/UEditor.tsx
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var UEditor = ({
+  content = "",
+  onChange,
+  onHtmlChange,
+  onJsonChange,
+  placeholder,
+  className,
+  editable = true,
+  autofocus = false,
+  showToolbar = true,
+  showBubbleMenu = true,
+  showFloatingMenu = false,
+  showCharacterCount = true,
+  maxCharacters,
+  minHeight = "200px",
+  maxHeight = "auto",
+  variant = "default"
+}) => {
+  const t = (0, import_next_intl6.useTranslations)("UEditor");
+  const effectivePlaceholder = placeholder ?? t("placeholder");
+  const extensions = (0, import_react44.useMemo)(
+    () => buildUEditorExtensions({ placeholder: effectivePlaceholder, maxCharacters }),
+    [effectivePlaceholder, maxCharacters]
+  );
+  const editor = (0, import_react45.useEditor)({
+    immediatelyRender: false,
+    extensions,
+    content,
+    editable,
+    autofocus,
+    editorProps: {
+      handleDOMEvents: {
+        keydown: (_view, event) => {
+          if (!(event instanceof KeyboardEvent)) return false;
+          if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
+            event.stopPropagation();
+          }
+          return false;
+        }
+      },
+      attributes: {
+        class: cn(
+          "prose prose-sm sm:prose dark:prose-invert max-w-none",
+          "focus:outline-none",
+          "px-4 py-4",
+          "[&_.is-editor-empty]:before:content-[attr(data-placeholder)]",
+          "[&_.is-editor-empty]:before:text-muted-foreground/50",
+          "[&_.is-editor-empty]:before:float-left",
+          "[&_.is-editor-empty]:before:pointer-events-none",
+          "[&_.is-editor-empty]:before:h-0",
+          "[&_ul[data-type='taskList']]:list-none",
+          "[&_ul[data-type='taskList']]:pl-0",
+          "[&_ul[data-type='taskList']_li]:flex",
+          "[&_ul[data-type='taskList']_li]:items-start",
+          "[&_ul[data-type='taskList']_li]:gap-2",
+          "[&_ul[data-type='taskList']_li>label]:mt-0.5",
+          "[&_ul[data-type='taskList']_li>label>input]:w-4",
+          "[&_ul[data-type='taskList']_li>label>input]:h-4",
+          "[&_ul[data-type='taskList']_li>label>input]:rounded",
+          "[&_ul[data-type='taskList']_li>label>input]:border-2",
+          "[&_ul[data-type='taskList']_li>label>input]:border-primary/50",
+          "[&_ul[data-type='taskList']_li>label>input]:accent-primary",
+          "[&_pre]:!bg-[#1e1e1e]",
+          "[&_pre]:!text-[#d4d4d4]",
+          "[&_pre_code]:!bg-transparent",
+          "[&_hr]:border-t-2",
+          "[&_hr]:border-primary/30",
+          "[&_hr]:my-8",
+          "[&_h1]:text-3xl",
+          "[&_h1]:font-bold",
+          "[&_h1]:mt-6",
+          "[&_h1]:mb-4",
+          "[&_h1]:text-foreground",
+          "[&_h2]:text-2xl",
+          "[&_h2]:font-semibold",
+          "[&_h2]:mt-5",
+          "[&_h2]:mb-3",
+          "[&_h2]:text-foreground",
+          "[&_h3]:text-xl",
+          "[&_h3]:font-semibold",
+          "[&_h3]:mt-4",
+          "[&_h3]:mb-2",
+          "[&_h3]:text-foreground",
+          "[&_ul:not([data-type='taskList'])]:list-disc",
+          "[&_ul:not([data-type='taskList'])]:pl-6",
+          "[&_ul:not([data-type='taskList'])]:my-3",
+          "[&_ol]:list-decimal",
+          "[&_ol]:pl-6",
+          "[&_ol]:my-3",
+          "[&_li]:my-1",
+          "[&_li]:pl-1",
+          "[&_li_p]:my-0",
+          "[&_blockquote]:border-l-4",
+          "[&_blockquote]:border-primary",
+          "[&_blockquote]:pl-4",
+          "[&_blockquote]:py-2",
+          "[&_blockquote]:my-4",
+          "[&_blockquote]:bg-muted/30",
+          "[&_blockquote]:rounded-r-lg",
+          "[&_blockquote]:italic",
+          "[&_blockquote]:text-muted-foreground",
+          "[&_blockquote_p]:my-0"
+        )
+      }
+    },
+    onUpdate: ({ editor: editor2 }) => {
+      const html = editor2.getHTML();
+      onChange?.(html);
+      onHtmlChange?.(html);
+      onJsonChange?.(editor2.getJSON());
+    }
+  });
+  (0, import_react44.useEffect)(() => {
+    if (editor && content !== editor.getHTML()) {
+      if (editor.isEmpty && content) {
+        editor.commands.setContent(content);
+      }
+    }
+  }, [content, editor]);
+  if (!editor) {
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      "div",
+      {
+        className: cn("w-full rounded-lg border bg-background flex items-center justify-center text-muted-foreground", className),
+        style: { minHeight },
+        children: t("loading")
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+    "div",
+    {
+      className: cn(
+        "group relative flex flex-col rounded-2xl md:rounded-3xl border border-border bg-card text-card-foreground overflow-hidden",
+        "transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
+        "shadow-sm focus-within:shadow-md focus-within:border-primary/15",
+        "backdrop-blur-sm",
+        variant === "notion" && "hover:shadow-md",
+        className
+      ),
+      children: [
+        editable && showToolbar && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(EditorToolbar, { editor, variant }),
+        editable && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(CustomBubbleMenu, { editor }),
+        editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(CustomFloatingMenu, { editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          import_react45.EditorContent,
+          {
+            editor,
+            className: "flex-1 overflow-y-auto",
+            style: {
+              minHeight,
+              maxHeight
+            }
+          }
+        ),
+        showCharacterCount && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(CharacterCountDisplay, { editor, maxCharacters })
+      ]
+    }
+  );
+};
+var UEditor_default = UEditor;
+
 // src/index.ts
 var underverseMessages = { en: en_default, vi: vi_default, ko: ko_default, ja: ja_default };
 function getUnderverseMessages(locale = "en") {
@@ -15193,6 +16946,7 @@ function getUnderverseMessages(locale = "en") {
   ToastProvider,
   Tooltip,
   TranslationProvider,
+  UEditor,
   UnderverseProvider,
   VARIANT_STYLES_ALERT,
   VARIANT_STYLES_BTN,