@underverse-ui/underverse 1.0.98 → 1.0.100

package/README.md

@@ -109,27 +109,26 @@ All components follow [Vercel Web Interface Guidelines](https://github.com/verce
 
 ---
 
-## � Entry Points
+## Package Exports
 
-Package được chia thành 2 entry points để tối ưu cho Server Components:
-
-### Main Entry (Server-safe)
+Hiện tại package publish **một public entry point duy nhất**:
 
 ```tsx
-// dist/index.js - Các components không phụ thuộc react-hook-form
-// Có thể sử dụng trong cả Server Components và Client Components
-import { Button, Skeleton, DatePicker, DataTable } from "@underverse-ui/underverse";
+import {
+  Button,
+  DataTable,
+  Form,
+  FormField,
+  UEditor,
+} from "@underverse-ui/underverse";
 ```
 
-### Form Entry (Client-only)
-
-```tsx
-// dist/form.js - Form components (phụ thuộc react-hook-form)
-// Chỉ sử dụng trong Client Components ("use client")
-import { Form, FormField, FormItem, FormLabel, FormMessage } from "@underverse-ui/underverse/form";
-```
+Không có subpath export như `@underverse-ui/underverse/form` ở version hiện tại.
 
-**Lưu ý:** Form components yêu cầu `react-hook-form` và `@hookform/resolvers` nên chỉ hoạt động ở client-side.
+Lưu ý:
+- Nhiều component trong package là client component và nên dùng trong môi trường React client.
+- Form primitives yêu cầu `react-hook-form` và `@hookform/resolvers`.
+- `UEditor` và các component dựa trên Tiptap yêu cầu peer dependencies tương ứng.
 
 ---
 

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.98",
+  "version": "1.0.100",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [
@@ -361,7 +361,7 @@
     {
       "name": "cn",
       "kind": "value",
-      "source": "../../../lib/utils/cn",
+      "source": "./utils/cn",
       "reexport": true,
       "local": false
     },
@@ -1487,14 +1487,14 @@
     {
       "name": "UnderverseProvider",
       "kind": "value",
-      "source": "../../../lib/i18n/translation-adapter",
+      "source": "./contexts/translation-adapter",
       "reexport": true,
       "local": false
     },
     {
       "name": "UnderverseProviderProps",
       "kind": "type",
-      "source": "../../../lib/i18n/translation-adapter",
+      "source": "./contexts/translation-adapter",
       "reexport": true,
       "local": false
     },
@@ -1557,7 +1557,7 @@
     {
       "name": "useUnderverseI18n",
       "kind": "value",
-      "source": "../../../lib/i18n/translation-adapter",
+      "source": "./contexts/translation-adapter",
       "reexport": true,
       "local": false,
       "aliasOf": "useTranslations"
@@ -1565,7 +1565,7 @@
     {
       "name": "useUnderverseI18nLocale",
       "kind": "value",
-      "source": "../../../lib/i18n/translation-adapter",
+      "source": "./contexts/translation-adapter",
       "reexport": true,
       "local": false,
       "aliasOf": "useLocale"
@@ -1587,7 +1587,7 @@
     {
       "name": "VARIANT_STYLES_ALERT",
       "kind": "value",
-      "source": "../../../lib/constants/constants-ui/alert",
+      "source": "./constants/alert",
       "reexport": true,
       "local": false
     },

package/dist/index.cjs

@@ -171,7 +171,7 @@ __export(index_exports, {
   VIETNAM_HOLIDAYS: () => VIETNAM_HOLIDAYS,
   VerticalTabs: () => VerticalTabs,
   Watermark: () => Watermark_default,
-  cn: () => cn2,
+  cn: () => cn,
   cnLocal: () => cn,
   extractImageSrcsFromHtml: () => extractImageSrcsFromHtml,
   getAnimationStyles: () => getAnimationStyles,
@@ -2000,8 +2000,9 @@ function useSmartTranslations(namespace) {
     return internalT;
   }
   return (key) => {
-    const primaryLocale = nextIntlBridge?.locale ?? internalLocale;
-    const fallbackLocale = environmentLocale && environmentLocale !== primaryLocale ? environmentLocale : null;
+    const resolvedEnvironmentLocale = environmentLocale && environmentLocale !== internalLocale ? environmentLocale : null;
+    const primaryLocale = nextIntlBridge?.locale ?? resolvedEnvironmentLocale ?? internalLocale;
+    const fallbackLocale = resolvedEnvironmentLocale && resolvedEnvironmentLocale !== primaryLocale ? resolvedEnvironmentLocale : null;
     let translated = null;
     if (nextIntlBridge) {
       const nextIntlResult = nextIntlBridge.translate(namespace, key);
@@ -2033,10 +2034,20 @@ function useSmartLocale() {
   const forceInternal = React6.useContext(ForceInternalContext);
   const nextIntlBridge = useNextIntlBridge();
   const internalLocale = useUnderverseLocale();
+  const [environmentLocale, setEnvironmentLocale] = React6.useState(null);
+  React6.useEffect(() => {
+    if (forceInternal) return;
+    if (nextIntlBridge) return;
+    if (internalLocale !== "en") return;
+    const detected = getEnvironmentLocale(internalLocale);
+    if (detected !== internalLocale) {
+      setEnvironmentLocale(detected);
+    }
+  }, [forceInternal, internalLocale, nextIntlBridge]);
   if (forceInternal) {
     return internalLocale;
   }
-  return nextIntlBridge?.locale ?? internalLocale;
+  return nextIntlBridge?.locale ?? environmentLocale ?? internalLocale;
 }
 
 // src/components/Input.tsx
@@ -7381,9 +7392,10 @@ var Combobox = ({
       {
         id: `combobox-item-${index}`,
         type: "button",
+        role: "option",
         tabIndex: -1,
         disabled: itemDisabled,
-        "aria-pressed": isSelected,
+        "aria-selected": isSelected,
         onClick: () => handleSelect(item),
         style: {
           animationDelay: open ? `${Math.min(index * 15, 150)}ms` : "0ms"
@@ -7488,40 +7500,50 @@ var Combobox = ({
             }
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref: optionsViewportRef, className: "overflow-y-auto overscroll-contain", style: { maxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn(size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText })
-        ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
-          // Render grouped options with global index tracking
-          (() => {
-            let globalIndex = 0;
-            return Object.entries(groupedOptions).map(([group, items]) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn(globalIndex > 0 && "mt-2 pt-2 border-t border-border/30"), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "space-y-0.5", children: items.map((item) => {
-                const index = globalIndex++;
-                return renderOptionItem(item, index);
-              }) })
-            ] }, group));
-          })()
-        ) : (
-          // Render flat options
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "space-y-0.5", children: filteredOptions.map((item, index) => renderOptionItem(item, index)) })
-        ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-12 h-12 rounded-full bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.SearchX, { className: "h-6 w-6 text-muted-foreground/60" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block text-sm font-medium text-foreground", children: emptyText }),
-            query && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block text-xs text-muted-foreground", children: "Try a different search term" })
-          ] }),
-          query && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "button",
-            {
-              type: "button",
-              onClick: () => setQuery(""),
-              className: "px-3 py-1.5 text-xs font-medium text-primary bg-primary/10 rounded-full hover:bg-primary/20 transition-colors",
-              children: "Clear search"
-            }
-          )
-        ] }) }) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "div",
+          {
+            ref: optionsViewportRef,
+            role: "listbox",
+            "aria-labelledby": labelId,
+            className: "overflow-y-auto overscroll-contain",
+            style: { maxHeight },
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn(size === "sm" ? "p-1" : size === "lg" ? "p-2" : "p-1.5"), children: loading2 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-10 h-10 rounded-full border-2 border-primary/20 border-t-primary animate-spin" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-sm text-muted-foreground", children: loadingText })
+            ] }) }) : filteredOptions.length > 0 ? groupedOptions ? (
+              // Render grouped options with global index tracking
+              (() => {
+                let globalIndex = 0;
+                return Object.entries(groupedOptions).map(([group, items]) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn(globalIndex > 0 && "mt-2 pt-2 border-t border-border/30"), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: group }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "space-y-0.5", children: items.map((item) => {
+                    const index = globalIndex++;
+                    return renderOptionItem(item, index);
+                  }) })
+                ] }, group));
+              })()
+            ) : (
+              // Render flat options
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("ul", { className: "space-y-0.5", children: filteredOptions.map((item, index) => renderOptionItem(item, index)) })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "px-3 py-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col items-center gap-3 animate-in fade-in-0 zoom-in-95 duration-300", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-12 h-12 rounded-full bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.SearchX, { className: "h-6 w-6 text-muted-foreground/60" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block text-sm font-medium text-foreground", children: emptyText }),
+                query && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "block text-xs text-muted-foreground", children: "Try a different search term" })
+              ] }),
+              query && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setQuery(""),
+                  className: "px-3 py-1.5 text-xs font-medium text-primary bg-primary/10 rounded-full hover:bg-primary/20 transition-colors",
+                  children: "Clear search"
+                }
+              )
+            ] }) }) })
+          }
+        )
       ]
     }
   );
@@ -17161,6 +17183,42 @@ function getInitialExpandedNodes(categories, {
 function getExpandedNodesState(expandedIds, uncontrolledExpandedNodes) {
   return expandedIds !== void 0 ? new Set(expandedIds) : uncontrolledExpandedNodes;
 }
+function collectAncestorIds(categories, categoryId) {
+  const ancestorIds = getAncestorPathIds(categories, categoryId);
+  ancestorIds.delete(categoryId);
+  return ancestorIds;
+}
+function collectDescendantIds(childrenMap, categoryId) {
+  const descendants = /* @__PURE__ */ new Set();
+  const stack = [categoryId];
+  while (stack.length > 0) {
+    const currentId = stack.pop();
+    for (const child of childrenMap.get(currentId) ?? []) {
+      if (descendants.has(child.id)) continue;
+      descendants.add(child.id);
+      stack.push(child.id);
+    }
+  }
+  return descendants;
+}
+function pruneAncestorSelection(categories, childrenMap, selected, fromCategoryId) {
+  const byId = new Map(categories.map((category) => [category.id, category]));
+  let current = byId.get(fromCategoryId);
+  let guard = 0;
+  while (current && typeof current.parent_id === "number" && guard++ < categories.length) {
+    const parent = byId.get(current.parent_id);
+    if (!parent) break;
+    const descendantIds = collectDescendantIds(childrenMap, parent.id);
+    const hasSelectedDescendant = Array.from(descendantIds).some((id) => selected.has(id));
+    if (!hasSelectedDescendant) {
+      selected.delete(parent.id);
+    }
+    current = parent;
+  }
+}
+function toCategoryOrderSelection(categories, selected) {
+  return categories.map((category) => category.id).filter((categoryId) => selected.has(categoryId));
+}
 function CategoryTreeSelect(props) {
   const tv = useSmartTranslations("ValidationInput");
   const {
@@ -17321,15 +17379,17 @@ function CategoryTreeSelect(props) {
       const newSelected = new Set(valueArray);
       if (newSelected.has(categoryId)) {
         newSelected.delete(categoryId);
-        const children = childrenMap.get(categoryId) || [];
-        children.forEach((child) => newSelected.delete(child.id));
+        for (const descendantId of collectDescendantIds(childrenMap, categoryId)) {
+          newSelected.delete(descendantId);
+        }
+        pruneAncestorSelection(categories, childrenMap, newSelected, categoryId);
       } else {
         newSelected.add(categoryId);
-        if (category.parent_id) {
-          newSelected.add(category.parent_id);
+        for (const ancestorId of collectAncestorIds(categories, categoryId)) {
+          newSelected.add(ancestorId);
         }
       }
-      onChange(Array.from(newSelected));
+      onChange(toCategoryOrderSelection(categories, newSelected));
     }
   };
   const renderCategory = (category, level = 0) => {
@@ -17683,11 +17743,10 @@ function CategoryTreeSelect(props) {
           "shadow-2xl backdrop-blur-xl"
         ),
         trigger: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-          "button",
+          "div",
           {
             id: resolvedId,
-            type: "button",
-            disabled,
+            tabIndex: disabled ? -1 : 0,
             role: "combobox",
             "aria-haspopup": "tree",
             "aria-expanded": isOpen,
@@ -17696,6 +17755,13 @@ function CategoryTreeSelect(props) {
             "aria-describedby": describedBy,
             "aria-required": required,
             "aria-invalid": !!effectiveError,
+            onKeyDown: (event) => {
+              if (disabled) return;
+              if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+                event.preventDefault();
+                handleOpenChange(!isOpen);
+              }
+            },
             className: cn(
               "group flex w-full items-center justify-between rounded-full transition-all duration-200",
               "backdrop-blur-sm",
@@ -17734,13 +17800,11 @@ function CategoryTreeSelect(props) {
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "ml-2 flex shrink-0 items-center gap-1.5", children: [
                 allowClear && selectedCount > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                  "div",
+                  "button",
                   {
-                    role: "button",
-                    tabIndex: 0,
+                    type: "button",
                     "aria-label": "Clear selection",
                     onClick: handleClear,
-                    onKeyDown: (event) => (event.key === "Enter" || event.key === " ") && handleClear(event),
                     className: cn(
                       "opacity-0 group-hover:opacity-100 transition-all duration-200",
                       "p-1 rounded-lg hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
@@ -21447,6 +21511,18 @@ function DataTableBodyRows({
 var import_react30 = __toESM(require("react"), 1);
 var import_lucide_react35 = require("lucide-react");
 var import_jsx_runtime64 = require("react/jsx-runtime");
+function getColumnLabel(title) {
+  if (typeof title === "string" || typeof title === "number") {
+    return String(title).replace(/\s+/g, " ").trim();
+  }
+  if (Array.isArray(title)) {
+    return title.map((item) => getColumnLabel(item)).filter(Boolean).join(" ").replace(/\s+/g, " ").trim();
+  }
+  if (import_react30.default.isValidElement(title)) {
+    return getColumnLabel(title.props.children);
+  }
+  return "";
+}
 function DataTableHeader({
   headerRows,
   headerAlign,
@@ -21471,12 +21547,13 @@ function DataTableHeader({
       if (!col.filter) return null;
       const key = col.key;
       const commonProps = { className: "w-full", size };
+      const columnLabel = getColumnLabel(col.title) || key;
       if (col.filter.type === "text") {
         return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           Input_default,
           {
             ...commonProps,
-            placeholder: col.filter.placeholder || `Search ${String(col.title)}`,
+            placeholder: col.filter.placeholder || `Search ${columnLabel}`,
             value: filters[key] || "",
             onChange: (e) => {
               setCurPage(1);
@@ -21497,7 +21574,7 @@ function DataTableHeader({
               setCurPage(1);
               setFilters((prev) => ({ ...prev, [key]: value || void 0 }));
             },
-            placeholder: col.filter.placeholder || `Select ${String(col.title)}`
+            placeholder: col.filter.placeholder || `Select ${columnLabel}`
           }
         );
       }
@@ -21506,7 +21583,7 @@ function DataTableHeader({
           DatePicker,
           {
             size,
-            placeholder: col.filter.placeholder || `Select ${String(col.title)}`,
+            placeholder: col.filter.placeholder || `Select ${columnLabel}`,
             value: filters[key] || null,
             onChange: (date) => {
               setCurPage(1);
@@ -21538,16 +21615,19 @@ function DataTableHeader({
       }
       const isRightAlign = col.align === "right" || !col.align && headerAlign === "right";
       const isCenterAlign = col.align === "center" || !col.align && headerAlign === "center";
+      const columnLabel = getColumnLabel(col.title) || col.key;
       const titleContent = /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title }),
         col.sortable && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           Tooltip,
           {
             placement: "top",
-            content: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-xs font-medium", children: `Sort by ${String(col.title)}` }),
+            content: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-xs font-medium", children: `Sort by ${columnLabel}` }),
             children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
               "button",
               {
+                type: "button",
+                title: `Sort by ${columnLabel}`,
                 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"
@@ -21560,7 +21640,7 @@ function DataTableHeader({
                     return null;
                   });
                 },
-                "aria-label": "Sort",
+                "aria-label": `Sort by ${columnLabel}`,
                 children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
                   /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                     "path",
@@ -21598,15 +21678,17 @@ function DataTableHeader({
             Tooltip,
             {
               placement: "top",
-              content: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-xs font-medium", children: `Filter by ${String(col.title)}` }),
+              content: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "text-xs font-medium", children: `Filter by ${columnLabel}` }),
               children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
                 "button",
                 {
+                  type: "button",
+                  title: `Filter by ${columnLabel}`,
                   className: cn(
                     "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
                     filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
                   ),
-                  "aria-label": "Filter",
+                  "aria-label": `Filter by ${columnLabel}`,
                   children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react35.Filter, { className: "w-4 h-4" })
                 }
               )
@@ -22762,7 +22844,7 @@ var useFormField = () => {
 var FormItemContext = React63.createContext({});
 var FormItem = React63.forwardRef(({ className, ...props }, ref) => {
   const id = React63.useId();
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref, className: cn("group space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
 var FormLabel = React63.forwardRef(
@@ -22770,10 +22852,24 @@ var FormLabel = React63.forwardRef(
     const { error, formItemId } = useFormField();
     const config = React63.useContext(FormConfigContext);
     const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
-      children,
-      required && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-destructive ml-1", children: "*" })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+      Label,
+      {
+        ref,
+        className: cn(
+          sizeClass,
+          "transition-colors duration-200",
+          error ? "text-destructive" : "group-focus-within:text-primary",
+          className
+        ),
+        htmlFor: formItemId,
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+        ]
+      }
+    );
   }
 );
 FormLabel.displayName = "FormLabel";
@@ -23122,16 +23218,8 @@ function LanguageSwitcherHeadless({
   ] });
 }
 
-// ../../lib/utils/cn.ts
-var import_clsx2 = require("clsx");
-var import_tailwind_merge2 = require("tailwind-merge");
-function cn2(...inputs) {
-  return (0, import_tailwind_merge2.twMerge)((0, import_clsx2.clsx)(...inputs));
-}
-
-// ../../lib/constants/constants-ui/alert.ts
+// src/constants/alert.ts
 var VARIANT_STYLES_ALERT = {
-  // Use system colors for background + border; leave text colors to content
   default: "border border-border bg-card/60 backdrop-blur-sm",
   info: "border border-info/30 bg-info/10 backdrop-blur-sm",
   success: "border border-success/30 bg-success/10 backdrop-blur-sm",
@@ -23139,7 +23227,7 @@ var VARIANT_STYLES_ALERT = {
   error: "border border-destructive/30 bg-destructive/10 backdrop-blur-sm"
 };
 
-// ../../lib/i18n/translation-adapter.tsx
+// src/contexts/translation-adapter.tsx
 var React65 = __toESM(require("react"), 1);
 var import_jsx_runtime73 = require("react/jsx-runtime");
 function isUnresolvedTranslation2(value, namespace, key) {
@@ -31787,6 +31875,7 @@ var UEditor = import_react52.default.forwardRef(({
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
   const inFlightPrepareRef = (0, import_react52.useRef)(null);
+  const lastAppliedContentRef = (0, import_react52.useRef)(content ?? "");
   const editorContentRef = (0, import_react52.useRef)(null);
   const tableColumnGuideRef = (0, import_react52.useRef)(null);
   const tableRowGuideRef = (0, import_react52.useRef)(null);
@@ -32089,10 +32178,12 @@ var UEditor = import_react52.default.forwardRef(({
     [content, editor, uploadImageForSave]
   );
   (0, import_react52.useEffect)(() => {
-    if (editor && content !== editor.getHTML()) {
-      if (editor.isEmpty && content) {
-        editor.commands.setContent(content);
-      }
+    if (!editor) return;
+    const nextContent = content ?? "";
+    if (lastAppliedContentRef.current === nextContent) return;
+    lastAppliedContentRef.current = nextContent;
+    if (editor.getHTML() !== nextContent) {
+      editor.commands.setContent(nextContent, { emitUpdate: false });
     }
   }, [content, editor]);
   (0, import_react52.useEffect)(() => {