@underverse-ui/underverse 1.0.211 → 2.0.1

package/dist/index.cjs

@@ -2077,35 +2077,29 @@ function NextIntlAdapterProvider({
   messages
 }) {
   const normalizedLocale = normalizeLocale(locale, "en");
-  const translatorCache = React7.useMemo(
-    () => /* @__PURE__ */ new Map(),
-    [normalizedLocale, messages]
-  );
-  const translate = React7.useCallback((namespace, key, values) => {
-    let translator = translatorCache.get(namespace);
-    if (!translator) {
-      const runtimeTranslator = (0, import_next_intl.createTranslator)({
-        locale: normalizedLocale,
-        messages,
-        namespace,
-        onError: () => {
-        }
-      });
-      translator = (translationKey, translationValues) => runtimeTranslator(translationKey, translationValues);
-      translatorCache.set(namespace, translator);
-    }
-    try {
-      return {
-        locale: normalizedLocale,
-        translated: translator(key, values)
-      };
-    } catch {
-      return {
-        locale: normalizedLocale,
-        translated: null
-      };
+  const runtimeTranslator = React7.useMemo(() => (0, import_next_intl.createTranslator)({
+    locale: normalizedLocale,
+    messages,
+    onError: () => {
     }
-  }, [messages, normalizedLocale, translatorCache]);
+  }), [messages, normalizedLocale]);
+  const translate = React7.useCallback(
+    (namespace, key, values) => {
+      const namespacedKey = namespace ? `${namespace}.${key}` : key;
+      try {
+        return {
+          locale: normalizedLocale,
+          translated: runtimeTranslator(namespacedKey, values)
+        };
+      } catch {
+        return {
+          locale: normalizedLocale,
+          translated: null
+        };
+      }
+    },
+    [normalizedLocale, runtimeTranslator]
+  );
   const value = React7.useMemo(() => ({
     locale: normalizedLocale,
     translate
@@ -2670,7 +2664,7 @@ var init_Tooltip = __esm({
         onBlur: chainEventHandlers(
           triggerPassthroughProps.onBlur,
           childProps.onBlur,
-          (e) => {
+          () => {
             handleBlur();
           }
         )
@@ -4934,6 +4928,9 @@ function getClipboardData(dataTransfer, type) {
     return "";
   }
 }
+function hasClipboardHtmlTable(dataTransfer) {
+  return /<table(?:\s|>)/i.test(getClipboardData(dataTransfer, "text/html"));
+}
 function extractClipboardHtmlFragment(html) {
   const startMarker = "<!--StartFragment-->";
   const endMarker = "<!--EndFragment-->";
@@ -4944,6 +4941,13 @@ function extractClipboardHtmlFragment(html) {
   }
   return html;
 }
+function hasMeaningfulContentOutsideTable(container) {
+  const clone = container.cloneNode(true);
+  clone.querySelectorAll("table, style, script, meta, link").forEach((element) => element.remove());
+  const remainingText = (clone.textContent ?? "").replace(/\u00a0/g, " ").replace(/\u200b/g, "").trim();
+  if (remainingText) return true;
+  return !!clone.querySelector("img, video, audio, iframe, object, embed, svg, canvas, hr, input, textarea, select, button");
+}
 function normalizeClipboardCellText(value) {
   return value.replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\u00a0/g, " ").replace(/[ \t]+\n/g, "\n").replace(/\n[ \t]+/g, "\n").replace(/\n+$/g, "").replace(/^\n+/g, "").trim();
 }
@@ -5554,7 +5558,10 @@ function getClipboardTableContent(dataTransfer) {
   const fragment = extractClipboardHtmlFragment(html);
   const fragmentDoc = new DOMParser().parseFromString(fragment, "text/html");
   const styleMap = parseClipboardCssClassStyles(doc);
-  const table = fragmentDoc.querySelector("table") ?? doc.querySelector("table");
+  const sourceBody = fragmentDoc.querySelector("table") ? fragmentDoc.body : doc.body;
+  const tables = sourceBody.querySelectorAll("table");
+  if (tables.length !== 1 || hasMeaningfulContentOutsideTable(sourceBody)) return null;
+  const table = tables[0];
   if (!(table instanceof HTMLTableElement)) return null;
   return createTableContent(getHtmlTableRows(table, styleMap), 1, {
     backgroundColor: DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR
@@ -5733,6 +5740,7 @@ var init_clipboard_images = __esm({
                   editor.chain().focus().insertContent(tableContent).run();
                   return true;
                 }
+                if (hasClipboardHtmlTable(event.clipboardData)) return false;
                 const tsvTableContent = getClipboardTsvTableContent(event.clipboardData);
                 if (tsvTableContent) {
                   event.preventDefault();
@@ -6422,7 +6430,7 @@ var init_colors = __esm({
   "src/components/UEditor/colors.tsx"() {
     "use strict";
     "use client";
-    import_react71 = require("react");
+    import_react71 = __toESM(require("react"), 1);
     init_useSmartTranslations();
     import_lucide_react50 = require("lucide-react");
     init_cn();
@@ -6590,12 +6598,25 @@ var init_colors = __esm({
       colors,
       currentColor,
       onSelect,
+      onCustomColorSelect,
       label
     }) => {
       const t = useSmartTranslations("UEditor");
       const colorInputRef = (0, import_react71.useRef)(null);
       const automaticColor = colors[0]?.color ?? "";
       const paletteColors = colors.slice(1);
+      const customColorSelect = onCustomColorSelect ?? onSelect;
+      import_react71.default.useEffect(() => {
+        const input = colorInputRef.current;
+        if (!input) return;
+        const commitColor = () => customColorSelect(input.value);
+        input.addEventListener("change", commitColor);
+        return () => input.removeEventListener("change", commitColor);
+      }, [customColorSelect]);
+      import_react71.default.useEffect(() => {
+        const input = colorInputRef.current;
+        if (input) input.value = currentColor.startsWith("#") ? currentColor : "#000000";
+      }, [currentColor]);
       return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "w-56 p-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
@@ -6649,20 +6670,19 @@ var init_colors = __esm({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "flex-1 text-center", children: t("colors.moreColors") }),
-              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react50.Palette, { className: "h-4 w-4 text-muted-foreground" }),
-              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-                "input",
-                {
-                  ref: colorInputRef,
-                  type: "color",
-                  value: currentColor.startsWith("#") ? currentColor : "#000000",
-                  onChange: (event) => onSelect(event.target.value),
-                  className: "sr-only",
-                  tabIndex: -1
-                }
-              )
+              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react50.Palette, { className: "h-4 w-4 text-muted-foreground" })
             ]
           }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          "input",
+          {
+            ref: colorInputRef,
+            type: "color",
+            defaultValue: currentColor.startsWith("#") ? currentColor : "#000000",
+            className: "sr-only",
+            tabIndex: -1
+          }
         )
       ] });
     };
@@ -8242,7 +8262,7 @@ var init_editor_styles = __esm({
       "[&_td]:px-2",
       "[&_td]:py-0",
       "[&_td]:whitespace-normal",
-      "[&_td]:[overflow-wrap:anywhere]",
+      "[&_td]:wrap-anywhere",
       "[&_td]:[word-break:normal]",
       "[&_td[data-text-wrap='nowrap']]:whitespace-nowrap",
       "[&_td[data-text-wrap='nowrap']]:[overflow-wrap:normal]",
@@ -8254,7 +8274,7 @@ var init_editor_styles = __esm({
       "[&_th]:px-2",
       "[&_th]:py-0",
       "[&_th]:whitespace-normal",
-      "[&_th]:[overflow-wrap:anywhere]",
+      "[&_th]:wrap-anywhere",
       "[&_th]:[word-break:normal]",
       "[&_th[data-text-wrap='nowrap']]:whitespace-nowrap",
       "[&_th[data-text-wrap='nowrap']]:[overflow-wrap:normal]",
@@ -10284,19 +10304,7 @@ function useOverlayScrollbarTarget(targetRef, options = {}) {
     return () => {
       controller.destroy();
     };
-  }, [
-    targetRef,
-    resolved.enabled,
-    resolved.theme,
-    resolved.visibility,
-    resolved.autoHide,
-    resolved.autoHideDelay,
-    resolved.dragScroll,
-    resolved.clickScroll,
-    resolved.overflowX,
-    resolved.overflowY,
-    resolved.exclude
-  ]);
+  }, [resolved, targetRef]);
 }
 var OverlayScrollbarProvider_default = OverlayScrollbarProvider;
 
@@ -13702,19 +13710,19 @@ var variantStyles5 = {
   },
   underline: {
     container: "relative border-b border-border/60",
-    tab: "relative transition-colors duration-200 pb-3 border-b-2 border-transparent hover:border-primary/30",
+    tab: "relative transition-colors duration-200 border-b-2 border-transparent hover:border-primary/30",
     activeTab: "text-primary border-primary font-semibold",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   },
   card: {
-    container: "space-y-1.5 bg-muted/20 p-2 rounded-2xl border border-border/30",
+    container: "bg-muted/20 p-1.5 rounded-2xl border border-border/30",
     tab: "rounded-xl border border-transparent transition-all duration-200",
     activeTab: "bg-primary text-primary-foreground border-primary shadow-md",
     inactiveTab: "text-muted-foreground hover:text-foreground hover:bg-accent/50 hover:border-border/50"
   },
   "underline-card": {
     container: "border-b border-border/60 bg-card/80 backdrop-blur-sm rounded-t-2xl p-1",
-    tab: "relative transition-all duration-200 pb-3 px-4 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
+    tab: "relative transition-all duration-200 rounded-t-xl border-b-2 border-transparent hover:border-primary/30 hover:bg-accent/30",
     activeTab: "text-primary border-primary font-semibold bg-accent/30",
     inactiveTab: "text-muted-foreground hover:text-foreground"
   }
@@ -13824,7 +13832,7 @@ var Tabs = ({
   }, [baseId, tabs]);
   const containerClasses = cn(
     "relative",
-    orientation === "horizontal" ? "w-full flex space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
+    orientation === "horizontal" ? "w-full flex items-center space-x-1 overflow-x-auto" : "flex flex-col space-y-1 shrink-0",
     variantStyles5[variant].container,
     className
   );
@@ -13859,10 +13867,7 @@ var Tabs = ({
           tab.href && tab.disabled && "pointer-events-none cursor-not-allowed opacity-50"
         );
         const sharedStyle = {
-          boxShadow: "none",
-          transform: "none",
-          outline: "none",
-          border: "none"
+          outline: "none"
         };
         const sharedProps = {
           ref: (el) => {
@@ -15307,6 +15312,10 @@ init_radius();
 init_UnderverseConfigContext();
 init_form_control_size();
 var import_jsx_runtime38 = require("react/jsx-runtime");
+function normalizeToLocalDate(date) {
+  if (!date) return null;
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
 var DatePicker = ({
   id,
   value,
@@ -15340,16 +15349,15 @@ var DatePicker = ({
   const [isFocused, setIsFocused] = React34.useState(false);
   const [inputValue, setInputValue] = React34.useState("");
   React34.useEffect(() => {
-    if (value) {
-      const parsed = parseDateString(inputValue, locale);
-      const isSame = parsed && parsed.getTime() === value.getTime();
-      if (!isSame) {
-        setInputValue(formatDateShort(value, locale));
+    setInputValue((currentInput) => {
+      if (value) {
+        const parsed = parseDateString(currentInput, locale);
+        const isSame = parsed && parsed.getTime() === value.getTime();
+        return isSame ? currentInput : formatDateShort(value, locale);
       }
-    } else if (!isFocused) {
-      setInputValue("");
-    }
-  }, [value, locale, isFocused]);
+      return isFocused ? currentInput : "";
+    });
+  }, [isFocused, locale, value]);
   const handleInputChange = (e) => {
     const text = e.target.value;
     setInputValue(text);
@@ -15368,7 +15376,7 @@ var DatePicker = ({
       if (required) {
         setLocalRequiredError(tv("required"));
       } else {
-        onChange(void 0);
+        if (value) onChange(void 0);
         setLocalRequiredError(void 0);
       }
     } else {
@@ -15766,6 +15774,7 @@ var DatePicker = ({
   const autoId = (0, import_react22.useId)();
   const resolvedId = id ? String(id) : `datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
   const labelSize = sizeStyles8[size].label;
   const radiusClass = size === "sm" ? "rounded-md" : "rounded-lg";
   const verticalGap = size === "sm" ? "space-y-1.5" : size === "lg" ? "space-y-2.5" : "space-y-2";
@@ -15814,6 +15823,7 @@ var DatePicker = ({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         disabled,
         contentWidth: sizeStyles8[size].contentWidth,
@@ -15830,12 +15840,6 @@ var DatePicker = ({
           "div",
           {
             ref: triggerRef,
-            id: resolvedId,
-            role: "button",
-            "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
-            "aria-labelledby": labelId,
-            "aria-required": required,
-            "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
               formControlFixedClass,
@@ -15867,8 +15871,16 @@ var DatePicker = ({
                   "input",
                   {
                     ref: inputRef,
+                    id: resolvedId,
                     type: "text",
+                    role: "combobox",
                     "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
+                    "aria-labelledby": labelId,
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": isOpen,
+                    "aria-controls": panelId,
+                    "aria-required": required,
+                    "aria-invalid": !!effectiveError,
                     disabled,
                     placeholder: placeholder || t("placeholder"),
                     value: isFocused ? inputValue : value ? formatDateDisplay(value) : "",
@@ -15975,19 +15987,18 @@ var DateRangePicker = ({
     return `${startStr} - ${formatDateShort(e, locale)}`;
   }, [locale]);
   React34.useEffect(() => {
-    if (startDate) {
-      const parts = inputValue.split(/\s*-\s*/);
-      const inputStart = parts[0] ? parseDateString(parts[0], locale) : null;
-      const inputEnd = parts[1] ? parseDateString(parts[1], locale) : null;
-      const startSame = inputStart && startDate && inputStart.getTime() === startDate.getTime();
-      const endSame = !endDate && !inputEnd || endDate && inputEnd && endDate.getTime() === inputEnd.getTime();
-      if (!(startSame && endSame)) {
-        setInputValue(getRangeString(startDate, endDate));
-      }
-    } else if (!isFocused) {
-      setInputValue("");
-    }
-  }, [startDate, endDate, locale, isFocused, getRangeString]);
+    setInputValue((currentInput) => {
+      if (startDate) {
+        const parts = currentInput.split(/\s*-\s*/);
+        const inputStart = parts[0] ? parseDateString(parts[0], locale) : null;
+        const inputEnd = parts[1] ? parseDateString(parts[1], locale) : null;
+        const startSame = inputStart && inputStart.getTime() === startDate.getTime();
+        const endSame = !endDate && !inputEnd || endDate && inputEnd && endDate.getTime() === inputEnd.getTime();
+        return startSame && endSame ? currentInput : getRangeString(startDate, endDate);
+      }
+      return isFocused ? currentInput : "";
+    });
+  }, [endDate, getRangeString, isFocused, locale, startDate]);
   const handleInputChange = (e) => {
     const text = e.target.value;
     setInputValue(text);
@@ -16036,7 +16047,7 @@ var DateRangePicker = ({
       } else {
         setTempStart(null);
         setTempEnd(null);
-        onChange(void 0, void 0);
+        if (startDate || endDate) onChange(void 0, void 0);
         setLocalRequiredError(void 0);
       }
     } else {
@@ -16067,8 +16078,8 @@ var DateRangePicker = ({
         }
       }
       if (startDate) {
-        setTempStart(normalizeToLocal(startDate));
-        setTempEnd(normalizeToLocal(endDate));
+        setTempStart(normalizeToLocalDate(startDate));
+        setTempEnd(normalizeToLocalDate(endDate));
         setInputValue(getRangeString(startDate, endDate));
         setLocalRequiredError(void 0);
       } else {
@@ -16172,21 +16183,17 @@ var DateRangePicker = ({
       footerMargin: "mt-5 pt-4 gap-2.5"
     }
   };
-  const normalizeToLocal = (date) => {
-    if (!date) return null;
-    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-  };
-  const minDay = React34.useMemo(() => normalizeToLocal(minDate), [minDate]);
-  const maxDay = React34.useMemo(() => normalizeToLocal(maxDate), [maxDate]);
+  const minDay = normalizeToLocalDate(minDate);
+  const maxDay = normalizeToLocalDate(maxDate);
   const [viewDate, setViewDate] = React34.useState(startDate || /* @__PURE__ */ new Date());
-  const [tempStart, setTempStart] = React34.useState(normalizeToLocal(startDate));
-  const [tempEnd, setTempEnd] = React34.useState(normalizeToLocal(endDate));
+  const [tempStart, setTempStart] = React34.useState(normalizeToLocalDate(startDate));
+  const [tempEnd, setTempEnd] = React34.useState(normalizeToLocalDate(endDate));
   const [hoveredDate, setHoveredDate] = React34.useState(null);
   React34.useEffect(() => {
-    setTempStart(normalizeToLocal(startDate));
+    setTempStart(normalizeToLocalDate(startDate));
   }, [startDate]);
   React34.useEffect(() => {
-    setTempEnd(normalizeToLocal(endDate));
+    setTempEnd(normalizeToLocalDate(endDate));
   }, [endDate]);
   React34.useEffect(() => {
     if (!isOpen) {
@@ -16205,12 +16212,12 @@ var DateRangePicker = ({
   const inRange = (d, s, e) => d > s && d < e;
   const getDaysInMonth = (d) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();
   const getFirstDayOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1).getDay();
-  const navigateMonth = React34.useCallback((direction) => {
+  const navigateMonth = (direction) => {
     setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
-  }, []);
-  const navigateYearRange = React34.useCallback((direction) => {
+  };
+  const navigateYearRange = (direction) => {
     setViewDate((prev) => new Date(prev.getFullYear() + (direction === "next" ? 12 : -12), prev.getMonth(), 1));
-  }, []);
+  };
   const isElementVerticallyScrollable = (el) => {
     const style = window.getComputedStyle(el);
     const overflowY = style.overflowY;
@@ -16239,11 +16246,13 @@ var DateRangePicker = ({
       const steps = Math.trunc(wheelDeltaRef.current / threshold);
       wheelDeltaRef.current -= steps * threshold;
       const direction = steps > 0 ? "next" : "prev";
-      for (let i = 0; i < Math.abs(steps); i++) navigateMonth(direction);
+      for (let i = 0; i < Math.abs(steps); i++) {
+        setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth() + (direction === "next" ? 1 : -1), 1));
+      }
     };
     container.addEventListener("wheel", onWheel, { passive: false });
     return () => container.removeEventListener("wheel", onWheel);
-  }, [isOpen, navigateMonth]);
+  }, [isOpen]);
   const handleSelect = (date) => {
     const localDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
     if (!tempStart || tempStart && tempEnd) {
@@ -16526,6 +16535,7 @@ var DateRangePicker = ({
   const autoId = (0, import_react22.useId)();
   const resolvedId = id ? String(id) : `daterangepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
   const globalConfig = useUnderverseUIConfig();
   const resolvedBorderMode = borderMode ?? globalConfig.borderMode ?? "full";
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("space-y-1.5", className), children: [
@@ -16570,6 +16580,7 @@ var DateRangePicker = ({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         disabled,
         contentWidth: sizeStyles8[size].contentWidth,
@@ -16585,12 +16596,6 @@ var DateRangePicker = ({
           "div",
           {
             ref: triggerRef,
-            id: resolvedId,
-            role: "button",
-            "aria-label": tempStart ? displayLabel : placeholder,
-            "aria-labelledby": labelId,
-            "aria-required": required,
-            "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
               formControlFixedClass,
@@ -16621,8 +16626,16 @@ var DateRangePicker = ({
                   "input",
                   {
                     ref: inputRef,
+                    id: resolvedId,
                     type: "text",
+                    role: "combobox",
                     "aria-label": tempStart ? displayLabel : placeholder,
+                    "aria-labelledby": labelId,
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": isOpen,
+                    "aria-controls": panelId,
+                    "aria-required": required,
+                    "aria-invalid": !!effectiveError,
                     disabled,
                     placeholder,
                     value: isFocused ? inputValue : tempStart ? displayLabel : "",
@@ -17464,6 +17477,7 @@ var LunarDatePicker = ({
   const autoId = (0, import_react23.useId)();
   const resolvedId = id ? String(id) : `lunar-datepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
   const labelSize = sizeStyles8[size].label;
   const verticalGap = size === "sm" ? "space-y-1.5" : size === "lg" ? "space-y-2.5" : "space-y-2";
   const effectiveError = localRequiredError;
@@ -17509,6 +17523,7 @@ var LunarDatePicker = ({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         borderMode: resolvedBorderMode,
         disabled,
@@ -17525,12 +17540,6 @@ var LunarDatePicker = ({
           "div",
           {
             ref: triggerRef,
-            id: resolvedId,
-            role: "button",
-            "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
-            "aria-labelledby": labelId,
-            "aria-required": required,
-            "aria-invalid": !!effectiveError,
             className: cn(
               "group flex w-full items-center justify-between border bg-background/80 backdrop-blur-sm",
               formControlFixedClass,
@@ -17562,8 +17571,16 @@ var LunarDatePicker = ({
                   "input",
                   {
                     ref: inputRef,
+                    id: resolvedId,
                     type: "text",
+                    role: "combobox",
                     "aria-label": value ? formatDateDisplay(value) : placeholder || t("placeholder"),
+                    "aria-labelledby": labelId,
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": isOpen,
+                    "aria-controls": panelId,
+                    "aria-required": required,
+                    "aria-invalid": !!effectiveError,
                     disabled,
                     placeholder: placeholder || t("placeholder"),
                     value: isFocused ? inputValue : value ? formatDateDisplay(value) : "",
@@ -18090,6 +18107,7 @@ var LunarDateRangePicker = ({
   const autoId = (0, import_react23.useId)();
   const resolvedId = id ? String(id) : `lunardaterangepicker-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
+  const panelId = `${resolvedId}-panel`;
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("space-y-1.5", className), children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "label",
@@ -18132,6 +18150,7 @@ var LunarDateRangePicker = ({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         disabled,
         contentWidth: sizeStyles8[size].contentWidth,
@@ -18144,13 +18163,18 @@ var LunarDateRangePicker = ({
           "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
         ),
         trigger: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
-          "div",
+          "button",
           {
             ref: triggerRef,
             id: resolvedId,
-            role: "button",
+            type: "button",
+            role: "combobox",
+            disabled,
             "aria-label": tempStart ? displayLabel : placeholder,
             "aria-labelledby": labelId,
+            "aria-haspopup": "dialog",
+            "aria-expanded": isOpen,
+            "aria-controls": panelId,
             "aria-required": required,
             "aria-invalid": !!effectiveError,
             className: cn(
@@ -18692,6 +18716,9 @@ function MonthYearPicker({
   const resolvedBorderMode = borderMode ?? globalConfig.input?.borderMode ?? globalConfig.borderMode ?? "full";
   const gi18n = useGlobalI18n();
   const tv = useSmartTranslations("ValidationInput");
+  const autoId = React36.useId();
+  const triggerId = `month-year-picker-trigger-${autoId}`;
+  const panelId = `${triggerId}-panel`;
   const now = /* @__PURE__ */ new Date();
   const currentYear = now.getFullYear();
   const resolvedMinYear = minYear ?? minDate?.getFullYear() ?? currentYear - 50;
@@ -18839,11 +18866,14 @@ function MonthYearPicker({
   const trigger = variant === "inline" ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "button",
     {
+      id: triggerId,
       type: "button",
+      role: "combobox",
       disabled,
       "aria-label": gi18n.selectMonthYear ?? "Select month and year",
       "aria-haspopup": "dialog",
       "aria-expanded": open,
+      "aria-controls": panelId,
       "aria-required": required,
       "aria-invalid": !!effectiveError,
       className: cn(
@@ -19067,6 +19097,7 @@ function MonthYearPicker({
         trigger,
         open,
         onOpenChange: handleOpenChange,
+        contentProps: { id: panelId },
         placement: "bottom",
         contentWidth,
         matchTriggerWidth,
@@ -20246,6 +20277,7 @@ function TimePicker({
   const directEditInputRef = React38.useRef(null);
   const triggerId = `time-picker-trigger-${autoId}`;
   const labelId = label ? `time-picker-label-${autoId}` : void 0;
+  const panelId = `${triggerId}-panel`;
   React38.useEffect(() => {
     if (isControlled) {
       const parsed = parseTime(value, format, includeSeconds);
@@ -20556,11 +20588,13 @@ function TimePicker({
     {
       id: triggerId,
       type: "button",
+      role: "combobox",
       disabled,
       "aria-label": gi18n.selectTime ?? "Select time",
       "aria-labelledby": labelId,
       "aria-haspopup": "dialog",
       "aria-expanded": open,
+      "aria-controls": panelId,
       "aria-required": required,
       "aria-invalid": !!effectiveError,
       className: cn(
@@ -21000,6 +21034,7 @@ function TimePicker({
         trigger,
         open,
         onOpenChange: handleOpenChange,
+        contentProps: { id: panelId },
         placement: "bottom-start",
         matchTriggerWidth: shouldMatchTriggerWidth,
         contentWidth: shouldMatchTriggerWidth ? void 0 : contentWidth,
@@ -21059,6 +21094,10 @@ var DateTimePicker = ({
   const t = useSmartTranslations("DateTimePicker");
   const tv = useSmartTranslations("ValidationInput");
   const locale = useSmartLocale();
+  const autoId = React39.useId();
+  const triggerId = `date-time-picker-trigger-${autoId}`;
+  const panelId = `${triggerId}-panel`;
+  const labelId = label ? `${triggerId}-label` : void 0;
   const [open, setOpen] = React39.useState(false);
   const [localRequiredError, setLocalRequiredError] = React39.useState();
   const sizeStyles8 = {
@@ -21199,11 +21238,19 @@ var DateTimePicker = ({
   const weekdays = getWeekdays(locale);
   const effectiveError = localRequiredError;
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("space-y-1.5", className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("label", { className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1", effectiveError && "text-destructive", labelClassName), children: [
-      label,
-      " ",
-      required && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-destructive", children: "*" })
-    ] }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+      "label",
+      {
+        id: labelId,
+        htmlFor: triggerId,
+        className: cn(sizeStyles8[size].label, "font-medium text-foreground flex items-center gap-1", effectiveError && "text-destructive", labelClassName),
+        children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-destructive", children: "*" })
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "input",
       {
@@ -21226,11 +21273,19 @@ var DateTimePicker = ({
       {
         open,
         onOpenChange: setOpen,
+        contentProps: { id: panelId },
         trigger: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "button",
           {
+            id: triggerId,
             type: "button",
+            role: "combobox",
             disabled,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            "aria-controls": panelId,
+            "aria-label": labelId ? void 0 : displayValue || placeholder || "Select date & time",
+            "aria-labelledby": labelId,
             "aria-required": required,
             "aria-invalid": !!effectiveError,
             className: cn(
@@ -24768,7 +24823,7 @@ var MultiCombobox = ({
             );
           }),
           hiddenCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn("inline-flex items-center bg-muted text-muted-foreground rounded-lg shrink-0", sizeStyles8[size].tag), children: gi18n.moreCount ? gi18n.moreCount(hiddenCount) : `+${hiddenCount} more` })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "text-muted-foreground"), children: placeholder }) }),
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "font-medium"), children: gi18n.selectedCount ? gi18n.selectedCount(value.length) : `${value.length} item${value.length > 1 ? "s" : ""} selected` }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: cn(formControlValueClass, "text-left text-muted-foreground"), children: placeholder }) }),
         /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-1.5 shrink-0", children: [
           showClear && value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "div",
@@ -31209,6 +31264,7 @@ function DataTableHeader({
     },
     [
       filters,
+      gi18n,
       headerAlign,
       headerMinHeightClass,
       headerTitleClass,
@@ -31217,6 +31273,7 @@ function DataTableHeader({
       setFilters,
       setSort,
       sort,
+      sortByLabel,
       sortIconClass,
       t
     ]
@@ -38567,15 +38624,18 @@ var FloatingMenuContent = ({ editor }) => {
     }
   );
 };
-function applyTableCellBackground(editor, color) {
+function applyTableCellBackground(editor, color, options = {}) {
+  const shouldFocus = options.focus ?? true;
   const value = color || null;
   const { state, view } = editor;
   const applied = (0, import_tables8.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
   if (applied) {
-    view.focus();
+    if (shouldFocus) view.focus();
     return;
   }
-  editor.chain().focus().setCellAttribute("backgroundColor", value).run();
+  const chain = editor.chain();
+  if (shouldFocus) chain.focus();
+  chain.setCellAttribute("backgroundColor", value).run();
 }
 function applyTableCellAttribute2(editor, name, value, options = {}) {
   const shouldFocus = options.focus ?? true;
@@ -38633,6 +38693,30 @@ function BorderPositionPreviewIcon({ position }) {
     showVertical && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M10 2V18", strokeWidth: "2" })
   ] });
 }
+function getBubbleMenuPosition({
+  start,
+  end,
+  menuSize,
+  viewport,
+  offset = 16,
+  padding = 8
+}) {
+  const selectionTop = Math.min(start.top, end.top);
+  const selectionBottom = Math.max(start.bottom, end.bottom);
+  const spaceAbove = selectionTop - offset - padding;
+  const spaceBelow = viewport.height - padding - selectionBottom - offset;
+  const placement = menuSize.height <= spaceAbove || spaceAbove >= spaceBelow ? "top" : "bottom";
+  const halfWidth = menuSize.width / 2;
+  const minLeft = padding + halfWidth;
+  const maxLeft = viewport.width - padding - halfWidth;
+  const selectionCenter = (start.left + end.left) / 2;
+  const left = maxLeft >= minLeft ? Math.min(maxLeft, Math.max(minLeft, selectionCenter)) : viewport.width / 2;
+  const requestedTop = placement === "top" ? selectionTop - offset : selectionBottom + offset;
+  const minTop = placement === "top" ? padding + menuSize.height : padding;
+  const maxTop = placement === "top" ? viewport.height - padding : viewport.height - padding - menuSize.height;
+  const top = maxTop >= minTop ? Math.min(maxTop, Math.max(minTop, requestedTop)) : Math.max(padding, requestedTop);
+  return { top, left, placement };
+}
 function getBubbleMenuContext(editor) {
   const { selection } = editor.state;
   if (editor.isActive("image")) return "image";
@@ -38798,24 +38882,34 @@ var BubbleMenuContent = ({
     setActiveColorPalette(null);
     onKeepOpenChange?.(false);
   }, [onKeepOpenChange]);
-  const applyInlineColorAndClose = (0, import_react75.useCallback)((color) => {
+  const applyInlineColor = (0, import_react75.useCallback)((color, focus) => {
     if (activeColorPalette === "text") {
+      const chain = editor.chain();
+      if (focus) chain.focus();
       if (color === "inherit") {
-        editor.chain().focus().unsetColor().run();
+        chain.unsetColor().run();
       } else {
-        editor.chain().focus().setColor(color).run();
+        chain.setColor(color).run();
       }
     } else if (activeColorPalette === "highlight") {
+      const chain = editor.chain();
+      if (focus) chain.focus();
       if (color === "") {
-        editor.chain().focus().unsetHighlight().run();
+        chain.unsetHighlight().run();
       } else {
-        editor.chain().focus().toggleHighlight({ color }).run();
+        chain.toggleHighlight({ color }).run();
       }
     } else {
-      applyTableCellBackground(editor, color);
+      applyTableCellBackground(editor, color, { focus });
     }
+  }, [activeColorPalette, editor]);
+  const applyInlineColorAndClose = (0, import_react75.useCallback)((color) => {
+    applyInlineColor(color, true);
     closeColorPalette();
-  }, [activeColorPalette, closeColorPalette, editor]);
+  }, [applyInlineColor, closeColorPalette]);
+  const applyCustomColor = (0, import_react75.useCallback)((color) => {
+    applyInlineColor(color, false);
+  }, [applyInlineColor]);
   (0, import_react75.useEffect)(() => {
     if (!showLinkInput) return;
     const close2 = () => setShowLinkInput(false);
@@ -39010,6 +39104,7 @@ var BubbleMenuContent = ({
         colors: isTextPalette ? textColors : highlightColors,
         currentColor: isTextPalette ? currentTextColor : isHighlightPalette ? currentHighlightColor : currentCellBgColor,
         onSelect: applyInlineColorAndClose,
+        onCustomColorSelect: applyCustomColor,
         label: isTextPalette ? t("colors.textColor") : isHighlightPalette ? t("colors.highlight") : t("tableMenu.cellBackground") || "Cell background"
       }
     ) });
@@ -39296,6 +39391,7 @@ var BubbleMenuContent = ({
       /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         ToolbarButton,
         {
+          onMouseDown: () => onKeepOpenChange?.(true),
           onClick: () => setActiveColorPalette("cell-bg"),
           active: Boolean(currentCellBgColor),
           title: t("tableMenu.cellBackground") || "Cell background",
@@ -39527,6 +39623,8 @@ var CustomBubbleMenu = ({
     placement: "top"
   });
   const menuRef = (0, import_react75.useRef)(null);
+  const updatePositionRef = (0, import_react75.useRef)(() => {
+  });
   const keepOpenRef = (0, import_react75.useRef)(false);
   const [keepOpen, setKeepOpenState] = (0, import_react75.useState)(false);
   const showTimeoutRef = (0, import_react75.useRef)(null);
@@ -39584,19 +39682,15 @@ var CustomBubbleMenu = ({
         setIsVisible(false);
         return;
       }
-      const viewportPadding = 8;
       const menuHeight = menuRef.current?.getBoundingClientRect().height || BUBBLE_MENU_ESTIMATED_HEIGHT;
-      const editorTop = view.dom.getBoundingClientRect().top;
-      const selectionTop = Math.min(start.top, end.top);
-      const selectionBottom = Math.max(start.bottom, end.bottom);
-      const hasRoomAboveEditor = selectionTop - BUBBLE_MENU_OFFSET - menuHeight >= editorTop + viewportPadding;
-      const placement = hasRoomAboveEditor ? "top" : "bottom";
-      const left = Math.min(
-        window.innerWidth - viewportPadding,
-        Math.max(viewportPadding, (start.left + end.left) / 2)
-      );
-      const top = placement === "top" ? Math.max(viewportPadding, selectionTop - BUBBLE_MENU_OFFSET) : Math.min(window.innerHeight - viewportPadding, selectionBottom + BUBBLE_MENU_OFFSET);
-      setPosition2({ top, left, placement });
+      const menuWidth = menuRef.current?.getBoundingClientRect().width || 0;
+      setPosition2(getBubbleMenuPosition({
+        start,
+        end,
+        menuSize: { width: menuWidth, height: menuHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        offset: BUBBLE_MENU_OFFSET
+      }));
       if (keepOpenRef.current) {
         clearShowTimeout();
         setIsVisible(true);
@@ -39625,8 +39719,11 @@ var CustomBubbleMenu = ({
     editor.on("transaction", schedulePositionUpdate);
     editor.on("focus", schedulePositionUpdate);
     editor.on("blur", handleBlur);
+    updatePositionRef.current = updatePosition;
     schedulePositionUpdate();
     return () => {
+      updatePositionRef.current = () => {
+      };
       if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
       clearShowTimeout();
       editor.off("transaction", schedulePositionUpdate);
@@ -39634,6 +39731,24 @@ var CustomBubbleMenu = ({
       editor.off("blur", handleBlur);
     };
   }, [editor]);
+  (0, import_react75.useEffect)(() => {
+    if (!isVisible || typeof ResizeObserver === "undefined") return;
+    const menu = menuRef.current;
+    if (!menu) return;
+    let animationFrameId = null;
+    const observer = new ResizeObserver(() => {
+      if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+      animationFrameId = requestAnimationFrame(() => {
+        animationFrameId = null;
+        updatePositionRef.current();
+      });
+    });
+    observer.observe(menu);
+    return () => {
+      if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
+      observer.disconnect();
+    };
+  }, [isVisible]);
   (0, import_react75.useEffect)(() => {
     if (!isVisible) return;
     const handlePointerDown = (event) => {
@@ -45190,7 +45305,7 @@ function TableResizeHandles({
       "data-resizing": active ? "true" : "false",
       className: cn(
         "pointer-events-none absolute z-[38] box-border border border-primary/55",
-        active && "border-primary bg-primary/[0.03]"
+        active && "border-primary bg-primary/3"
       ),
       style: {
         left: layout.tableLeft,
@@ -47253,11 +47368,17 @@ function useUEditorOutput({
   onJsonChange,
   outputDebounceMs
 }) {
-  const callbacksRef = React91.useRef({});
+  const callbacksRef = React91.useRef({
+    onChange,
+    onHtmlChange,
+    onJsonChange
+  });
   const pendingEditorRef = React91.useRef(null);
   const timeoutRef = React91.useRef(null);
   const debounceMs = normalizeDebounceMs(outputDebounceMs);
-  callbacksRef.current = { onChange, onHtmlChange, onJsonChange };
+  React91.useLayoutEffect(() => {
+    callbacksRef.current = { onChange, onHtmlChange, onJsonChange };
+  }, [onChange, onHtmlChange, onJsonChange]);
   const flushOutputUpdates = React91.useCallback(() => {
     if (timeoutRef.current !== null) {
       clearTimeout(timeoutRef.current);