@underverse-ui/underverse 1.0.4 → 1.0.6

package/dist/index.cjs

@@ -733,6 +733,8 @@ var defaultTranslations = {
       month: "Month",
       week: "Week",
       day: "Day",
+      sprint: "Sprint",
+      sprints: "{n} sprints",
       resourcesHeader: "Resources",
       expandGroup: "Expand group",
       collapseGroup: "Collapse group",
@@ -809,6 +811,8 @@ var defaultTranslations = {
       month: "Th\xE1ng",
       week: "Tu\u1EA7n",
       day: "Ng\xE0y",
+      sprint: "Sprint",
+      sprints: "{n} sprint",
       resourcesHeader: "T\xE0i nguy\xEAn",
       expandGroup: "M\u1EDF nh\xF3m",
       collapseGroup: "Thu g\u1ECDn nh\xF3m",
@@ -885,6 +889,8 @@ var defaultTranslations = {
       month: "\uC6D4",
       week: "\uC8FC",
       day: "\uC77C",
+      sprint: "\uC2A4\uD504\uB9B0\uD2B8",
+      sprints: "{n} \uC2A4\uD504\uB9B0\uD2B8",
       resourcesHeader: "\uB9AC\uC18C\uC2A4",
       expandGroup: "\uADF8\uB8F9 \uD3BC\uCE58\uAE30",
       collapseGroup: "\uADF8\uB8F9 \uC811\uAE30",
@@ -961,6 +967,8 @@ var defaultTranslations = {
       month: "\u6708",
       week: "\u9031",
       day: "\u65E5",
+      sprint: "\u30B9\u30D7\u30EA\u30F3\u30C8",
+      sprints: "{n} \u30B9\u30D7\u30EA\u30F3\u30C8",
       resourcesHeader: "\u30EA\u30BD\u30FC\u30B9",
       expandGroup: "\u30B0\u30EB\u30FC\u30D7\u3092\u5C55\u958B",
       collapseGroup: "\u30B0\u30EB\u30FC\u30D7\u3092\u6298\u308A\u305F\u305F\u3080",
@@ -8571,6 +8579,10 @@ function startOfZonedMonth(date, timeZone) {
   const p = getZonedParts(date, timeZone);
   return new Date(zonedTimeToUtcMs({ year: p.year, month: p.month, day: 1, hour: 0, minute: 0, second: 0 }, timeZone));
 }
+function startOfZonedYear(date, timeZone) {
+  const p = getZonedParts(date, timeZone);
+  return new Date(zonedTimeToUtcMs({ year: p.year, month: 1, day: 1, hour: 0, minute: 0, second: 0 }, timeZone));
+}
 function addZonedDays(date, days, timeZone) {
   const p = getZonedParts(date, timeZone);
   return new Date(zonedTimeToUtcMs({ ...p, day: p.day + days }, timeZone));
@@ -8583,6 +8595,9 @@ function addZonedMonths(date, months, timeZone) {
   const clampedDay = Math.min(p.day, daysInTargetMonth);
   return new Date(zonedTimeToUtcMs({ year: next.year, month: next.month, day: clampedDay, hour: p.hour, minute: p.minute, second: p.second }, timeZone));
 }
+function addZonedYears(date, years, timeZone) {
+  return addZonedMonths(date, years * 12, timeZone);
+}
 function startOfZonedWeek(date, weekStartsOn, timeZone) {
   const p = getZonedParts(date, timeZone);
   const weekday = new Date(Date.UTC(p.year, p.month - 1, p.day)).getUTCDay();
@@ -8821,6 +8836,13 @@ function defaultSlotHeader(slotStart, view, locale, timeZone) {
   if (view === "day") {
     return getDtf(locale, timeZone, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" }).format(slotStart);
   }
+  if (view === "sprint") {
+    const { week } = getIsoWeekInfo(slotStart, timeZone);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "inline-flex flex-col items-center leading-tight", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70", children: "S" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-sm font-semibold text-foreground", children: String(week).padStart(2, "0") })
+    ] });
+  }
   const weekday = getDtf(locale, timeZone, { weekday: "short" }).format(slotStart);
   const day = getDtf(locale, timeZone, { day: "numeric" }).format(slotStart);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "inline-flex flex-col items-center leading-tight", children: [
@@ -8881,7 +8903,10 @@ function getGroupResourceCounts(resources) {
 function computeSlotStarts(args) {
   const { view, date, timeZone, weekStartsOn, dayTimeStepMinutes, dayRangeMode, workHours } = args;
   const baseDayStart = startOfZonedDay(date, timeZone);
-  const start = view === "month" ? startOfZonedMonth(date, timeZone) : view === "week" ? startOfZonedWeek(date, weekStartsOn, timeZone) : baseDayStart;
+  const start = view === "month" ? startOfZonedMonth(date, timeZone) : view === "week" ? startOfZonedWeek(date, weekStartsOn, timeZone) : view === "sprint" ? (() => {
+    const yearStart = startOfZonedYear(date, timeZone);
+    return startOfZonedWeek(yearStart, weekStartsOn, timeZone);
+  })() : baseDayStart;
   if (view === "day") {
     const step = Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes)));
     const stepMs = step * 6e4;
@@ -8898,6 +8923,21 @@ function computeSlotStarts(args) {
     }
     return { start: start2, end: end3, slotStarts: slotStarts2 };
   }
+  if (view === "sprint") {
+    const yearStart = startOfZonedYear(date, timeZone);
+    const nextYearStart = startOfZonedYear(addZonedMonths(yearStart, 12, timeZone), timeZone);
+    const lastDayOfYear = addZonedDays(nextYearStart, -1, timeZone);
+    const lastSlotStart = startOfZonedWeek(lastDayOfYear, weekStartsOn, timeZone);
+    const end2 = addZonedDays(lastSlotStart, 7, timeZone);
+    const slotStarts2 = [];
+    let cur2 = start;
+    let guard2 = 0;
+    while (cur2.getTime() < end2.getTime() && guard2++ < 60) {
+      slotStarts2.push(cur2);
+      cur2 = addZonedDays(cur2, 7, timeZone);
+    }
+    return { start, end: end2, slotStarts: slotStarts2 };
+  }
   const end = view === "month" ? startOfZonedMonth(addZonedMonths(start, 1, timeZone), timeZone) : addZonedDays(start, 7, timeZone);
   const slotStarts = [];
   let cur = start;
@@ -8946,7 +8986,8 @@ var import_jsx_runtime34 = require("react/jsx-runtime");
 var VIEW_ICONS = {
   month: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.CalendarRange, { className: "h-4 w-4" }),
   week: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.CalendarDays, { className: "h-4 w-4" }),
-  day: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Calendar, { className: "h-4 w-4" })
+  day: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.Calendar, { className: "h-4 w-4" }),
+  sprint: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.CalendarDays, { className: "h-4 w-4" })
 };
 function CalendarTimelineHeader(props) {
   const {
@@ -8971,7 +9012,7 @@ function CalendarTimelineHeader(props) {
     slotHeaderNodes
   } = props;
   const resolvedAvailableViews = React28.useMemo(
-    () => availableViews?.length ? availableViews : ["month", "week", "day"],
+    () => availableViews?.length ? availableViews : ["month", "week", "day", "sprint"],
     [availableViews]
   );
   const showViewSwitcher = resolvedAvailableViews.length > 1;
@@ -9034,7 +9075,7 @@ function CalendarTimelineHeader(props) {
     onApplyDateTime(tempDate);
     setTodayOpen(false);
   }, [onApplyDateTime, tempDate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "sticky top-0 z-30 bg-linear-to-b from-background via-background to-background/95 border-b border-border/40 backdrop-blur-xl", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "sticky top-0 z-30 bg-linear-to-b from-card via-card to-card/95 border-b border-border/40 backdrop-blur-xl", children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("flex items-center justify-between gap-4", sizeConfig.headerPaddingClass), children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center bg-muted/40 rounded-full p-1 gap-0.5", children: [
@@ -9045,7 +9086,7 @@ function CalendarTimelineHeader(props) {
               size: "icon",
               onClick: () => navigate(-1),
               "aria-label": labels.prev,
-              className: cn(sizeConfig.controlButtonIconClass, "rounded-full hover:bg-background/80 transition-all duration-200"),
+              className: cn(sizeConfig.controlButtonIconClass, "rounded-full hover:bg-card/80 transition-all duration-200"),
               children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.ChevronLeft, { className: "h-4 w-4" })
             }
           ),
@@ -9060,7 +9101,7 @@ function CalendarTimelineHeader(props) {
                 {
                   variant: "ghost",
                   size: "sm",
-                  className: cn(sizeConfig.controlButtonTextClass, "rounded-full hover:bg-background/80 font-medium transition-all duration-200"),
+                  className: cn(sizeConfig.controlButtonTextClass, "rounded-full hover:bg-card/80 font-medium transition-all duration-200"),
                   children: labels.today
                 }
               ),
@@ -9140,7 +9181,7 @@ function CalendarTimelineHeader(props) {
               size: "icon",
               onClick: () => navigate(1),
               "aria-label": labels.next,
-              className: cn(sizeConfig.controlButtonIconClass, "rounded-full hover:bg-background/80 transition-all duration-200"),
+              className: cn(sizeConfig.controlButtonIconClass, "rounded-full hover:bg-card/80 transition-all duration-200"),
               children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react18.ChevronRight, { className: "h-4 w-4" })
             }
           )
@@ -9169,7 +9210,7 @@ function CalendarTimelineHeader(props) {
             className: cn(
               sizeConfig.controlButtonTextClass,
               "rounded-full font-medium transition-all duration-200 gap-1.5",
-              activeView === v ? "bg-primary text-primary-foreground shadow-sm shadow-primary/25" : "hover:bg-background/80 text-muted-foreground hover:text-foreground"
+              activeView === v ? "bg-primary text-primary-foreground shadow-sm shadow-primary/25" : "hover:bg-card/80 text-muted-foreground hover:text-foreground"
             ),
             children: [
               VIEW_ICONS[v],
@@ -9184,7 +9225,7 @@ function CalendarTimelineHeader(props) {
       showLeftColumn ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         "div",
         {
-          className: "shrink-0 border-r border-border/30 bg-muted/20 flex items-center justify-center relative group/uv-ct-top-left",
+          className: "shrink-0 border-r border-border/30 bg-card/60 flex items-center justify-center relative group/uv-ct-top-left",
           style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xs font-medium text-muted-foreground/70 uppercase tracking-wider", children: resourcesHeaderLabel }),
@@ -9239,7 +9280,7 @@ function DefaultGroupRow(props) {
           "span",
           {
             className: cn(
-              "inline-flex items-center justify-center w-5 h-5 rounded-md bg-background/60 transition-transform duration-200",
+              "inline-flex items-center justify-center w-5 h-5 rounded-md bg-card/60 transition-transform duration-200",
               collapsed ? "" : "rotate-180"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react19.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
@@ -9260,7 +9301,7 @@ function ResourceRowCell(props) {
     "div",
     {
       className: cn(
-        "h-full w-full flex items-center border-b border-border/30 bg-linear-to-r from-background to-background/95 relative",
+        "h-full w-full flex items-center border-b border-border/30 bg-linear-to-r from-card to-card/95 relative",
         sizeConfig.resourceRowClass,
         "hover:from-muted/30 hover:to-muted/10 transition-all duration-200 group/uv-ct-row-header"
       ),
@@ -9320,7 +9361,7 @@ var CalendarTimelineGridOverlay = React29.memo(function CalendarTimelineGridOver
       if (showToday && idx === todaySlotIdx) return null;
       const left = slotLefts[idx] ?? 0;
       const width = slotWidths[idx] ?? 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute top-0 h-full bg-destructive/5", style: { left, width }, "aria-hidden": true }, `we_${idx}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute top-0 h-full bg-muted/20", style: { left, width }, "aria-hidden": true }, `we_${idx}`);
     }) : null,
     showToday ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "div",
@@ -9383,7 +9424,8 @@ function useTimelineSlots(args) {
     dayRangeMode,
     workHours,
     resolvedNow,
-    formatters
+    formatters,
+    dueDateSprint
   } = args;
   const { slots, range } = React31.useMemo(() => {
     const { start, end, slotStarts: slotStarts2 } = computeSlotStarts({
@@ -9396,17 +9438,89 @@ function useTimelineSlots(args) {
       workHours
     });
     const todayStart = startOfZonedDay(resolvedNow, resolvedTimeZone).getTime();
-    const slotItems = slotStarts2.map((s) => ({
+    const nowMs = resolvedNow.getTime();
+    const sprintDefs = (() => {
+      if (activeView !== "sprint") return [];
+      if (!dueDateSprint) return [];
+      const out = [];
+      for (const v of Object.values(dueDateSprint)) {
+        const startInput = v.range_date?.start;
+        const endInput = v.range_date?.end;
+        if (startInput == null || endInput == null) continue;
+        const startRaw = toDate2(startInput);
+        const endRaw = toDate2(endInput);
+        if (Number.isNaN(startRaw.getTime()) || Number.isNaN(endRaw.getTime())) continue;
+        const startMs = startOfZonedDay(startRaw, resolvedTimeZone).getTime();
+        const endMs = startOfZonedDay(endRaw, resolvedTimeZone).getTime();
+        if (!Number.isFinite(startMs) || !Number.isFinite(endMs)) continue;
+        if (endMs <= startMs) continue;
+        out.push({ startMs, endMs, title: v.title });
+      }
+      out.sort((a, b) => a.startMs - b.startMs);
+      return out;
+    })();
+    const sprintRangeText = (() => {
+      if (activeView !== "sprint") return null;
+      const df = getDtf(resolvedLocale, resolvedTimeZone, { month: "short", day: "numeric" });
+      return (startMs, endMs) => {
+        const a = df.format(new Date(startMs));
+        const b = df.format(new Date(endMs - 1));
+        return a === b ? a : `${a}\u2013${b}`;
+      };
+    })();
+    const matchSprintDef = (slotStart, idx) => {
+      if (activeView !== "sprint") return null;
+      if (sprintDefs.length === 0) return null;
+      const sMs = startOfZonedDay(slotStart, resolvedTimeZone).getTime();
+      const byRange = sprintDefs.find((d) => sMs >= d.startMs && sMs < d.endMs) ?? null;
+      return byRange ?? sprintDefs[idx] ?? null;
+    };
+    const slotItems = slotStarts2.map((s, idx) => ({
       start: s,
-      label: formatters?.slotHeader?.(s, { view: activeView, locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultSlotHeader(s, activeView, resolvedLocale, resolvedTimeZone),
-      isToday: startOfZonedDay(s, resolvedTimeZone).getTime() === todayStart,
-      isWeekend: activeView === "day" ? false : (() => {
+      label: formatters?.slotHeader?.(s, { view: activeView, locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? (() => {
+        if (activeView !== "sprint") return defaultSlotHeader(s, activeView, resolvedLocale, resolvedTimeZone);
+        const match = matchSprintDef(s, idx);
+        if (match && sprintRangeText) {
+          const rangeText = sprintRangeText(match.startMs, match.endMs);
+          return React31.createElement(
+            "span",
+            { className: "inline-flex flex-col items-center leading-tight" },
+            React31.createElement("span", { className: "text-[11px] font-semibold text-foreground truncate max-w-[8rem]" }, match.title),
+            React31.createElement("span", { className: "text-[10px] font-medium text-muted-foreground/70" }, rangeText)
+          );
+        }
+        return React31.createElement(
+          "span",
+          { className: "inline-flex flex-col items-center leading-tight" },
+          React31.createElement("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground/70" }, "S"),
+          React31.createElement("span", { className: "text-sm font-semibold text-foreground" }, String(idx + 1).padStart(2, "0"))
+        );
+      })(),
+      isToday: (() => {
+        if (activeView !== "sprint") return startOfZonedDay(s, resolvedTimeZone).getTime() === todayStart;
+        const match = matchSprintDef(s, idx);
+        const sprintEndMs = match ? match.endMs : addZonedDays(s, 7, resolvedTimeZone).getTime();
+        return nowMs >= s.getTime() && nowMs < sprintEndMs;
+      })(),
+      isWeekend: activeView === "day" || activeView === "sprint" ? false : (() => {
         const wd = getZonedWeekday(s, resolvedTimeZone);
         return wd === 0 || wd === 6;
       })()
     }));
     return { slots: slotItems, range: { start, end } };
-  }, [activeView, activeDate, dayRangeMode, dayTimeStepMinutes, formatters, resolvedLocale, resolvedNow, resolvedTimeZone, weekStartsOn, workHours]);
+  }, [
+    activeView,
+    activeDate,
+    dayRangeMode,
+    dayTimeStepMinutes,
+    dueDateSprint,
+    formatters,
+    resolvedLocale,
+    resolvedNow,
+    resolvedTimeZone,
+    weekStartsOn,
+    workHours
+  ]);
   const slotStarts = React31.useMemo(() => slots.map((s) => s.start), [slots]);
   const todaySlotIdx = React31.useMemo(() => slots.findIndex((s) => s.isToday), [slots]);
   const weekendSlotIdxs = React31.useMemo(() => {
@@ -9697,6 +9811,7 @@ function CalendarTimeline({
   view,
   defaultView = "month",
   onViewChange,
+  dueDateSprint,
   date,
   defaultDate,
   onDateChange,
@@ -9729,6 +9844,8 @@ function CalendarTimeline({
   adaptiveSlotWidths,
   dayEventStyle = "span",
   dayEventMaxWidth,
+  monthEventStyle = "span",
+  monthEventMaxWidth,
   dayTimeStepMinutes = 60,
   enableEventTooltips = true,
   dayHeaderMode = "full",
@@ -9823,18 +9940,29 @@ function CalendarTimeline({
     setInternalRowHeight(defaultRowHeight);
   }, [defaultRowHeight, isControlledRowHeight]);
   const effectiveRowHeight = isControlledRowHeight ? rowHeight : internalRowHeight;
-  const effectiveSlotMinWidth = slotMinWidth ?? sizeConfig.slotMinWidth;
+  const baseSlotMinWidth = slotMinWidth ?? sizeConfig.slotMinWidth;
   const colMin = minResourceColumnWidth ?? 160;
   const colMax = maxResourceColumnWidth ?? 520;
   const rowMin = minRowHeight ?? 36;
   const rowMax = maxRowHeight ?? 120;
   const availableViews = React32.useMemo(
-    () => onlyView ? [onlyView] : ["month", "week", "day"],
+    () => onlyView ? [onlyView] : ["month", "week", "day", "sprint"],
     [onlyView]
   );
   const isControlledView = view !== void 0;
   const [internalView, setInternalView] = React32.useState(() => onlyView ?? defaultView);
   const activeView = onlyView ? onlyView : isControlledView ? view : internalView;
+  const effectiveSlotMinWidth = React32.useMemo(() => {
+    if (slotMinWidth == null) {
+      if (activeView === "month" && monthEventStyle === "compact") {
+        return clamp4(Math.round(sizeConfig.slotMinWidth * 0.55), 32, sizeConfig.slotMinWidth);
+      }
+      if (activeView === "sprint") {
+        return clamp4(Math.round(sizeConfig.slotMinWidth * 0.4), 18, 48);
+      }
+    }
+    return baseSlotMinWidth;
+  }, [activeView, baseSlotMinWidth, monthEventStyle, sizeConfig.slotMinWidth, slotMinWidth]);
   const isControlledDate = date !== void 0;
   const [internalDate, setInternalDate] = React32.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
   const activeDate = isControlledDate ? date : internalDate;
@@ -9847,6 +9975,7 @@ function CalendarTimeline({
       month: labels?.month ?? t("month"),
       week: labels?.week ?? t("week"),
       day: labels?.day ?? t("day"),
+      sprint: labels?.sprint ?? t("sprint"),
       newEvent: labels?.newEvent ?? t("newEvent"),
       createEventTitle: labels?.createEventTitle ?? t("createEventTitle"),
       create: labels?.create ?? t("create"),
@@ -9887,6 +10016,10 @@ function CalendarTimeline({
         setDate(addZonedDays(base, dir * 7, resolvedTimeZone));
         return;
       }
+      if (activeView === "sprint") {
+        setDate(addZonedYears(base, dir, resolvedTimeZone));
+        return;
+      }
       setDate(addZonedDays(base, dir, resolvedTimeZone));
     },
     [activeDate, activeView, resolvedTimeZone, setDate]
@@ -9912,7 +10045,8 @@ function CalendarTimeline({
     dayRangeMode,
     workHours,
     resolvedNow,
-    formatters
+    formatters,
+    dueDateSprint
   });
   React32.useEffect(() => {
     onRangeChange?.(range);
@@ -10158,9 +10292,15 @@ function CalendarTimeline({
       const rangeText = ya === yb ? `${a} \u2013 ${b}, ${ya}` : `${a}, ${ya} \u2013 ${b}, ${yb}`;
       return `${l.week} ${week} \u2022 ${rangeText}`;
     }
+    if (activeView === "sprint") {
+      const fmtYear = getDtf(resolvedLocale, resolvedTimeZone, { year: "numeric" });
+      const yearText = fmtYear.format(activeDate);
+      const count = Math.max(0, slots.length);
+      return `${l.sprint} \u2022 ${yearText} \u2022 ${t("sprints", { n: count })}`;
+    }
     const fmt = getDtf(resolvedLocale, resolvedTimeZone, { weekday: "long", year: "numeric", month: "long", day: "numeric" });
     return fmt.format(range.start);
-  }, [activeDate, activeView, formatters, l.week, range.end, range.start, resolvedLocale, resolvedTimeZone]);
+  }, [activeDate, activeView, formatters, l.sprint, l.week, range.end, range.start, resolvedLocale, resolvedTimeZone, slots.length, t]);
   const createMode = interactions?.createMode ?? "drag";
   const canCreate = !isViewOnly && (interactions?.creatable ?? false) && !!onCreateEvent;
   const [createOpen, setCreateOpen] = React32.useState(false);
@@ -10175,11 +10315,54 @@ function CalendarTimeline({
       disabled: r.disabled ?? false
     }));
   }, [resources]);
-  const slotPickerLabel = React32.useMemo(() => {
+  const formatCreateBoundaryLabel = React32.useMemo(() => {
     const timeFmt = getDtf(resolvedLocale, resolvedTimeZone, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
     const dayFmt = getDtf(resolvedLocale, resolvedTimeZone, { weekday: "short", month: "short", day: "numeric" });
-    return (d) => activeView === "day" ? timeFmt.format(d) : dayFmt.format(d);
-  }, [activeView, resolvedLocale, resolvedTimeZone]);
+    const yearFmt = getDtf(resolvedLocale, resolvedTimeZone, { year: "numeric" });
+    const sprintDefs = (() => {
+      if (!dueDateSprint) return [];
+      const out = [];
+      for (const v of Object.values(dueDateSprint)) {
+        const startInput = v.range_date?.start;
+        const endInput = v.range_date?.end;
+        if (startInput == null || endInput == null) continue;
+        const startRaw = toDate2(startInput);
+        const endRaw = toDate2(endInput);
+        if (Number.isNaN(startRaw.getTime()) || Number.isNaN(endRaw.getTime())) continue;
+        const startMs = startOfZonedDay(startRaw, resolvedTimeZone).getTime();
+        const endMs = startOfZonedDay(endRaw, resolvedTimeZone).getTime();
+        if (endMs <= startMs) continue;
+        out.push({ startMs, endMs, title: v.title });
+      }
+      out.sort((a, b) => a.startMs - b.startMs);
+      return out;
+    })();
+    const sprintTitleForStart = (slotStart, idx) => {
+      if (activeView !== "sprint") return null;
+      if (sprintDefs.length === 0) return null;
+      const sMs = startOfZonedDay(slotStart, resolvedTimeZone).getTime();
+      const match = sprintDefs.find((d) => sMs >= d.startMs && sMs < d.endMs) ?? sprintDefs[idx] ?? null;
+      if (!match) return null;
+      return typeof match.title === "string" || typeof match.title === "number" ? String(match.title) : null;
+    };
+    return (d, opts) => {
+      if (activeView === "day") return timeFmt.format(d);
+      if (activeView === "sprint") {
+        const y = yearFmt.format(d);
+        const idx = opts?.boundaryIdx;
+        if (typeof idx === "number") {
+          const slotStart = slotStarts[clamp4(idx, 0, Math.max(0, slotStarts.length - 1))] ?? d;
+          const dynamicTitle = sprintTitleForStart(slotStart, idx);
+          if (dynamicTitle) return `${dynamicTitle} \u2022 ${dayFmt.format(d)}, ${y}`;
+          const sprintNumber = opts?.kind === "start" ? idx + 1 : Math.min(idx + 1, Math.max(1, slotStarts.length));
+          const sprintText = `${l.sprint} ${String(sprintNumber).padStart(2, "0")}`;
+          const dateText = dayFmt.format(d);
+          return `${sprintText} \u2022 ${dateText}, ${y}`;
+        }
+      }
+      return dayFmt.format(d);
+    };
+  }, [activeView, dueDateSprint, l.sprint, resolvedLocale, resolvedTimeZone, slotStarts, slotStarts.length]);
   const openCreate = React32.useCallback(() => {
     if (!canCreate) return;
     if (activeEventSheetOpen) setEventSheetOpen(false);
@@ -10216,16 +10399,16 @@ function CalendarTimeline({
     setCreateEndIdx((prev) => Math.min(slots.length, Math.max(prev, createStartIdx + 1)));
   }, [createStartIdx, slots.length]);
   const createStartOptions = React32.useMemo(() => {
-    return slotStarts.map((d, idx) => ({ label: slotPickerLabel(d), value: idx }));
-  }, [slotStarts, slotPickerLabel]);
+    return slotStarts.map((d, idx) => ({ label: formatCreateBoundaryLabel(d, { kind: "start", boundaryIdx: idx }), value: idx }));
+  }, [formatCreateBoundaryLabel, slotStarts]);
   const createEndOptions = React32.useMemo(() => {
     const out = [];
     for (let idx = createStartIdx + 1; idx <= slotStarts.length; idx++) {
       const boundary = idx >= slotStarts.length ? range.end : slotStarts[idx];
-      out.push({ label: slotPickerLabel(boundary), value: idx });
+      out.push({ label: formatCreateBoundaryLabel(boundary, { kind: "end", boundaryIdx: idx }), value: idx });
     }
     return out;
-  }, [createStartIdx, range.end, slotPickerLabel, slotStarts]);
+  }, [createStartIdx, formatCreateBoundaryLabel, range.end, slotStarts]);
   const commitCreate = React32.useCallback(() => {
     if (!onCreateEvent) return;
     if (!createResourceId) return;
@@ -10279,6 +10462,9 @@ function CalendarTimeline({
         const stepMs = Math.trunc(Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes))) * 6e4);
         return { start, end: new Date(start.getTime() + stepMs) };
       }
+      if (activeView === "sprint") {
+        return { start, end: addZonedDays(start, 7, resolvedTimeZone) };
+      }
       return { start, end: addZonedDays(start, 1, resolvedTimeZone) };
     },
     [activeView, dayTimeStepMinutes, resolvedTimeZone, slotStarts]
@@ -10561,7 +10747,7 @@ function CalendarTimeline({
                 className: cn(
                   sizeConfig.slotHeaderClass,
                   activeView !== "day" && s.isToday && "bg-primary/8 border-l-primary/40",
-                  activeView !== "day" && !s.isToday && s.isWeekend && "bg-destructive/8 text-destructive-foreground"
+                  activeView !== "day" && !s.isToday && s.isWeekend && "bg-muted/25"
                 ),
                 dayHeaderMarks
               },
@@ -10592,7 +10778,7 @@ function CalendarTimeline({
     {
       title,
       resourcesHeaderLabel: t("resourcesHeader"),
-      labels: { today: l.today, prev: l.prev, next: l.next, month: l.month, week: l.week, day: l.day },
+      labels: { today: l.today, prev: l.prev, next: l.next, month: l.month, week: l.week, day: l.day, sprint: l.sprint },
       newEventLabel: l.newEvent,
       newEventDisabled: isViewOnly || !canCreate || resources.length === 0,
       onNewEventClick: isViewOnly ? void 0 : openCreate,
@@ -10627,8 +10813,9 @@ function CalendarTimeline({
     "div",
     {
       className: cn(
-        "border border-border/40 rounded-2xl md:rounded-3xl overflow-hidden bg-background/95 backdrop-blur-sm",
-        "shadow-sm hover:shadow-md transition-shadow duration-300",
+        "rounded-2xl md:rounded-3xl overflow-hidden bg-card text-card-foreground backdrop-blur-sm",
+        "border border-border shadow-sm md:hover:shadow-md",
+        "transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
         densityClass,
         className
       ),
@@ -10761,12 +10948,19 @@ function CalendarTimeline({
                           })();
                           const resource = resourceById.get(ev.resourceId);
                           const tooltipTitle = ev.title || ev.id;
-                          const shouldCompact = activeView === "day" && dayEventStyle === "compact";
+                          const shouldCompact = activeView === "day" && dayEventStyle === "compact" || activeView === "month" && monthEventStyle === "compact";
                           const eventInsetX = 2;
                           const leftInset = left + eventInsetX;
                           const widthInset = Math.max(1, width - eventInsetX * 2);
-                          const defaultMaxVisual = clamp4(Math.round(fixedSlotWidth * 1.2), 160, 360);
-                          const maxVisual = clamp4(Math.round(dayEventMaxWidth ?? defaultMaxVisual), 80, 1200);
+                          const defaultMaxVisual = (() => {
+                            if (activeView === "month") return clamp4(Math.round(fixedSlotWidth * 2.5), 72, 360);
+                            return clamp4(Math.round(fixedSlotWidth * 1.2), 160, 360);
+                          })();
+                          const maxVisual = clamp4(
+                            Math.round(activeView === "month" ? monthEventMaxWidth ?? defaultMaxVisual : dayEventMaxWidth ?? defaultMaxVisual),
+                            48,
+                            1200
+                          );
                           const visualWidth = shouldCompact ? Math.min(widthInset, maxVisual) : widthInset;
                           const isClipped = shouldCompact && widthInset > visualWidth + 1;
                           const block = /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
@@ -10811,7 +11005,7 @@ function CalendarTimeline({
                                       "transition-all duration-150 ease-out",
                                       "backdrop-blur-sm",
                                       ev.className,
-                                      isPreview && "ring-2 ring-primary/50 ring-offset-1 ring-offset-background scale-[1.02]"
+                                      isPreview && "ring-2 ring-primary/50 ring-offset-1 ring-offset-card scale-[1.02]"
                                     ),
                                     style: {
                                       width: visualWidth,
@@ -10823,7 +11017,7 @@ function CalendarTimeline({
                                     },
                                     children: [
                                       node,
-                                      isClipped ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-10 bg-linear-to-l from-background/50 to-transparent flex items-center justify-end pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs text-muted-foreground/80", children: "\u2026" }) }) : null
+                                      isClipped ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "pointer-events-none absolute inset-y-0 right-0 w-10 bg-linear-to-l from-card/50 to-transparent flex items-center justify-end pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs text-muted-foreground/80", children: "\u2026" }) }) : null
                                     ]
                                   }
                                 ),
@@ -10879,7 +11073,7 @@ function CalendarTimeline({
                             className: cn(
                               "pointer-events-none absolute z-20",
                               "h-5 w-5 rounded-full",
-                              "bg-background/80 backdrop-blur-sm",
+                              "bg-card/80 backdrop-blur-sm",
                               "border border-border/60 shadow-xs",
                               "flex items-center justify-center"
                             ),
@@ -19411,9 +19605,9 @@ function useSmartLocale() {
 }
 
 // ../../components/ui/UEditor/UEditor.tsx
-var import_react47 = require("react");
+var import_react50 = require("react");
 var import_next_intl6 = require("next-intl");
-var import_react48 = require("@tiptap/react");
+var import_react51 = require("@tiptap/react");
 
 // ../../components/ui/UEditor/extensions.ts
 var import_extension_document = __toESM(require("@tiptap/extension-document"), 1);
@@ -19772,12 +19966,924 @@ var ClipboardImages = import_core2.Extension.create({
   }
 });
 
-// ../../components/ui/UEditor/resizable-image.tsx
-var import_react41 = require("react");
-var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
+// ../../components/ui/UEditor/emoji-suggestion.tsx
 var import_core3 = require("@tiptap/core");
-var import_react42 = require("@tiptap/react");
+var import_suggestion2 = __toESM(require("@tiptap/suggestion"), 1);
+var import_react41 = require("@tiptap/react");
+var import_state2 = require("@tiptap/pm/state");
+var import_react42 = require("react");
+var import_lucide_react39 = require("lucide-react");
+var import_tippy2 = __toESM(require("tippy.js"), 1);
+
+// ../../components/ui/UEditor/emojis.ts
+var EMOJI_LIST = [
+  {
+    id: "smileys_people",
+    name: "Smileys & People",
+    emojis: [
+      { emoji: "\u{1F600}", name: "grinning_face" },
+      { emoji: "\u{1F603}", name: "big_eyes_grin" },
+      { emoji: "\u{1F604}", name: "smiling_eyes_grin" },
+      { emoji: "\u{1F601}", name: "beaming_smile" },
+      { emoji: "\u{1F606}", name: "squinting_laugh" },
+      { emoji: "\u{1F605}", name: "sweat_grin" },
+      { emoji: "\u{1F602}", name: "joy_tears" },
+      { emoji: "\u{1F923}", name: "rofl_laugh" },
+      { emoji: "\u{1F972}", name: "tear_smile" },
+      { emoji: "\u263A\uFE0F", name: "warm_smile" },
+      { emoji: "\u{1F60A}", name: "blush_smile" },
+      { emoji: "\u{1F607}", name: "halo_smile" },
+      { emoji: "\u{1F642}", name: "slight_smile" },
+      { emoji: "\u{1F643}", name: "upside_down" },
+      { emoji: "\u{1F609}", name: "wink_face" },
+      { emoji: "\u{1F60C}", name: "relieved_face" },
+      { emoji: "\u{1F60D}", name: "heart_eyes" },
+      { emoji: "\u{1F970}", name: "hearts_face" },
+      { emoji: "\u{1F618}", name: "blow_kiss" },
+      { emoji: "\u{1F617}", name: "kissing_face" },
+      { emoji: "\u{1F619}", name: "smiling_kiss" },
+      { emoji: "\u{1F61A}", name: "closed_eyes_kiss" },
+      { emoji: "\u{1F60B}", name: "yummy_face" },
+      { emoji: "\u{1F61B}", name: "tongue_out" },
+      { emoji: "\u{1F61D}", name: "squinting_tongue" },
+      { emoji: "\u{1F61C}", name: "wink_tongue" },
+      { emoji: "\u{1F92A}", name: "zany_face" },
+      { emoji: "\u{1F928}", name: "raised_eyebrow" },
+      { emoji: "\u{1F9D0}", name: "monocle_face" },
+      { emoji: "\u{1F913}", name: "nerd_face" },
+      { emoji: "\u{1F60E}", name: "sunglasses_face" },
+      { emoji: "\u{1F978}", name: "disguised_face" },
+      { emoji: "\u{1F929}", name: "star_struck" },
+      { emoji: "\u{1F973}", name: "partying_face" },
+      { emoji: "\u{1F60F}", name: "smirking_face" },
+      { emoji: "\u{1F612}", name: "unamused_face" },
+      { emoji: "\u{1F61E}", name: "disappointed_face" },
+      { emoji: "\u{1F614}", name: "pensive_face" },
+      { emoji: "\u{1F61F}", name: "worried_face" },
+      { emoji: "\u{1F615}", name: "confused_face" },
+      { emoji: "\u{1F641}", name: "slight_frown" },
+      { emoji: "\u2639\uFE0F", name: "frowning_face" },
+      { emoji: "\u{1F623}", name: "persevering_face" },
+      { emoji: "\u{1F616}", name: "confounded_face" },
+      { emoji: "\u{1F62B}", name: "tired_face" },
+      { emoji: "\u{1F629}", name: "weary_face" },
+      { emoji: "\u{1F97A}", name: "pleading_face" },
+      { emoji: "\u{1F622}", name: "crying_face" },
+      { emoji: "\u{1F62D}", name: "loudly_crying" },
+      { emoji: "\u{1F624}", name: "steam_nose" },
+      { emoji: "\u{1F621}", name: "pouting_face" },
+      { emoji: "\u{1F92C}", name: "cursing_face" },
+      { emoji: "\u{1F92F}", name: "exploding_head" },
+      { emoji: "\u{1F633}", name: "flushed_face" },
+      { emoji: "\u{1F975}", name: "hot_face" },
+      { emoji: "\u{1F976}", name: "cold_face" },
+      { emoji: "\u{1F631}", name: "screaming_fear" },
+      { emoji: "\u{1F628}", name: "fearful_face" },
+      { emoji: "\u{1F630}", name: "anxious_sweat" },
+      { emoji: "\u{1F625}", name: "relieved_sad" },
+      { emoji: "\u{1F613}", name: "downcast_sweat" },
+      { emoji: "\u{1F917}", name: "hugging_face" },
+      { emoji: "\u{1F914}", name: "thinking_face" },
+      { emoji: "\u{1F92D}", name: "hand_over_mouth" },
+      { emoji: "\u{1F92B}", name: "shushing_face" },
+      { emoji: "\u{1F925}", name: "lying_face" },
+      { emoji: "\u{1F636}", name: "no_mouth" },
+      { emoji: "\u{1F610}", name: "neutral_face" },
+      { emoji: "\u{1F611}", name: "expressionless_face" },
+      { emoji: "\u{1F62C}", name: "grimacing_face" },
+      { emoji: "\u{1F644}", name: "rolling_eyes" },
+      { emoji: "\u{1F62F}", name: "hushed_face" },
+      { emoji: "\u{1F626}", name: "frowning_open" },
+      { emoji: "\u{1F627}", name: "anguished_face" },
+      { emoji: "\u{1F62E}", name: "open_mouth" },
+      { emoji: "\u{1F632}", name: "astonished_face" },
+      { emoji: "\u{1F971}", name: "yawning_face" },
+      { emoji: "\u{1F634}", name: "sleeping_face" },
+      { emoji: "\u{1F924}", name: "drooling_face" },
+      { emoji: "\u{1F62A}", name: "sleepy_face" },
+      { emoji: "\u{1F635}", name: "dizzy_face" },
+      { emoji: "\u{1F910}", name: "zipper_mouth" },
+      { emoji: "\u{1F974}", name: "woozy_face" },
+      { emoji: "\u{1F922}", name: "nauseated_face" },
+      { emoji: "\u{1F92E}", name: "face_vomiting" },
+      { emoji: "\u{1F927}", name: "sneezing_face" },
+      { emoji: "\u{1F637}", name: "medical_mask" },
+      { emoji: "\u{1F912}", name: "thermometer_face" },
+      { emoji: "\u{1F915}", name: "bandage_head" },
+      { emoji: "\u{1F911}", name: "money_mouth" },
+      { emoji: "\u{1F920}", name: "cowboy_hat" },
+      { emoji: "\u{1F608}", name: "devil_smile" },
+      { emoji: "\u{1F47F}", name: "devil_angry" },
+      { emoji: "\u{1F479}", name: "ogre_mask" },
+      { emoji: "\u{1F47A}", name: "goblin_mask" },
+      { emoji: "\u{1F921}", name: "clown_face" },
+      { emoji: "\u{1F4A9}", name: "poop_pile" },
+      { emoji: "\u{1F47B}", name: "ghost_spooky" },
+      { emoji: "\u{1F480}", name: "skull_head" },
+      { emoji: "\u2620\uFE0F", name: "skull_crossbones" },
+      { emoji: "\u{1F47D}", name: "alien_face" },
+      { emoji: "\u{1F47E}", name: "alien_monster" },
+      { emoji: "\u{1F916}", name: "robot_face" },
+      { emoji: "\u{1F383}", name: "pumpkin_jack" },
+      { emoji: "\u{1F63A}", name: "cat_grin" },
+      { emoji: "\u{1F638}", name: "cat_smile" },
+      { emoji: "\u{1F639}", name: "cat_joy" },
+      { emoji: "\u{1F63B}", name: "cat_heart_eyes" },
+      { emoji: "\u{1F63C}", name: "cat_smirk" },
+      { emoji: "\u{1F63D}", name: "cat_kiss" },
+      { emoji: "\u{1F640}", name: "cat_weary" },
+      { emoji: "\u{1F63F}", name: "cat_crying" },
+      { emoji: "\u{1F63E}", name: "cat_pouting" },
+      { emoji: "\u{1F44B}", name: "waving_hand" },
+      { emoji: "\u{1F91A}", name: "raised_back_hand" },
+      { emoji: "\u{1F590}\uFE0F", name: "splayed_fingers" },
+      { emoji: "\u270B", name: "raised_hand" },
+      { emoji: "\u{1F596}", name: "vulcan_salute" },
+      { emoji: "\u{1F44C}", name: "ok_hand" },
+      { emoji: "\u{1F90C}", name: "pinched_fingers" },
+      { emoji: "\u{1F90F}", name: "pinching_hand" },
+      { emoji: "\u270C\uFE0F", name: "victory_hand" },
+      { emoji: "\u{1F91E}", name: "crossed_fingers" },
+      { emoji: "\u{1F91F}", name: "love_you" },
+      { emoji: "\u{1F918}", name: "rock_on" },
+      { emoji: "\u{1F919}", name: "call_me" },
+      { emoji: "\u{1F448}", name: "point_left" },
+      { emoji: "\u{1F449}", name: "point_right" },
+      { emoji: "\u{1F446}", name: "point_up" },
+      { emoji: "\u{1F595}", name: "middle_finger" },
+      { emoji: "\u{1F447}", name: "point_down" },
+      { emoji: "\u261D\uFE0F", name: "index_up" },
+      { emoji: "\u{1F44D}", name: "thumbs_up" },
+      { emoji: "\u{1F44E}", name: "thumbs_down" },
+      { emoji: "\u270A", name: "raised_fist" },
+      { emoji: "\u{1F44A}", name: "oncoming_fist" },
+      { emoji: "\u{1F91B}", name: "left_fist" },
+      { emoji: "\u{1F91C}", name: "right_fist" },
+      { emoji: "\u{1F44F}", name: "clapping_hands" },
+      { emoji: "\u{1F64C}", name: "raising_hands" },
+      { emoji: "\u{1F450}", name: "open_hands" },
+      { emoji: "\u{1F932}", name: "palms_up" },
+      { emoji: "\u{1F91D}", name: "handshake" },
+      { emoji: "\u{1F64F}", name: "folded_hands" },
+      { emoji: "\u270D\uFE0F", name: "writing_hand" },
+      { emoji: "\u{1F485}", name: "nail_polish" },
+      { emoji: "\u{1F933}", name: "selfie_hand" },
+      { emoji: "\u{1F4AA}", name: "flex_biceps" },
+      { emoji: "\u{1F9BE}", name: "robot_arm" },
+      { emoji: "\u{1F9BF}", name: "robot_leg" },
+      { emoji: "\u{1F9B5}", name: "leg_foot" },
+      { emoji: "\u{1F9B6}", name: "foot_leg" },
+      { emoji: "\u{1F442}", name: "ear_listen" },
+      { emoji: "\u{1F9BB}", name: "ear_hearing_aid" },
+      { emoji: "\u{1F443}", name: "nose_smell" },
+      { emoji: "\u{1F9E0}", name: "brain_mind" },
+      { emoji: "\u{1FAC0}", name: "anatomical_heart" },
+      { emoji: "\u{1FAC1}", name: "lungs_organ" },
+      { emoji: "\u{1F9B7}", name: "tooth_dentist" },
+      { emoji: "\u{1F9B4}", name: "bone_skeleton" },
+      { emoji: "\u{1F440}", name: "eyes_look" },
+      { emoji: "\u{1F441}\uFE0F", name: "eye_look" },
+      { emoji: "\u{1F445}", name: "tongue_lick" },
+      { emoji: "\u{1F444}", name: "mouth_lips" },
+      { emoji: "\u{1F48B}", name: "kiss_mark" },
+      { emoji: "\u{1FA78}", name: "blood_drop" },
+      { emoji: "\u{1F476}", name: "baby_face" },
+      { emoji: "\u{1F9D2}", name: "child_face" },
+      { emoji: "\u{1F466}", name: "boy_face" },
+      { emoji: "\u{1F467}", name: "girl_face" },
+      { emoji: "\u{1F9D1}", name: "person_face" },
+      { emoji: "\u{1F471}", name: "blond_person" },
+      { emoji: "\u{1F468}", name: "man_face" },
+      { emoji: "\u{1F9D4}", name: "beard_person" },
+      { emoji: "\u{1F469}", name: "woman_face" },
+      { emoji: "\u{1F9D3}", name: "older_person" },
+      { emoji: "\u{1F474}", name: "old_man" },
+      { emoji: "\u{1F475}", name: "old_woman" },
+      { emoji: "\u{1F472}", name: "skullcap_person" },
+      { emoji: "\u{1F473}", name: "turban_person" },
+      { emoji: "\u{1F9D5}", name: "headscarf_woman" },
+      { emoji: "\u{1F46E}", name: "police_officer" },
+      { emoji: "\u{1F477}", name: "construction_worker" },
+      { emoji: "\u{1F482}", name: "guard_person" },
+      { emoji: "\u{1F575}\uFE0F", name: "detective_spy" },
+      { emoji: "\u{1F469}\u200D\u2695\uFE0F", name: "woman_doctor" },
+      { emoji: "\u{1F468}\u200D\u2695\uFE0F", name: "man_doctor" },
+      { emoji: "\u{1F469}\u200D\u{1F33E}", name: "woman_farmer" },
+      { emoji: "\u{1F468}\u200D\u{1F33E}", name: "man_farmer" },
+      { emoji: "\u{1F469}\u200D\u{1F373}", name: "woman_cook" },
+      { emoji: "\u{1F468}\u200D\u{1F373}", name: "man_cook" },
+      { emoji: "\u{1F469}\u200D\u{1F393}", name: "woman_student" },
+      { emoji: "\u{1F468}\u200D\u{1F393}", name: "man_student" },
+      { emoji: "\u{1F469}\u200D\u{1F3A4}", name: "woman_singer" },
+      { emoji: "\u{1F468}\u200D\u{1F3A4}", name: "man_singer" },
+      { emoji: "\u{1F469}\u200D\u{1F3EB}", name: "woman_teacher" },
+      { emoji: "\u{1F468}\u200D\u{1F3EB}", name: "man_teacher" },
+      { emoji: "\u{1F469}\u200D", name: "woman_factory" },
+      { emoji: "\u{1F468}\u200D", name: "man_factory" },
+      { emoji: "\u{1F469}\u200D\u{1F4BB}", name: "woman_tech" },
+      { emoji: "\u{1F468}\u200D\u{1F4BB}", name: "man_tech" },
+      { emoji: "\u{1F469}\u200D\u{1F4BC}", name: "woman_office" },
+      { emoji: "\u{1F468}\u200D\u{1F4BC}", name: "man_office" },
+      { emoji: "\u{1F469}\u200D\u{1F527}", name: "woman_mechanic" },
+      { emoji: "\u{1F468}\u200D\u{1F527}", name: "man_mechanic" },
+      { emoji: "\u{1F469}\u200D\u{1F52C}", name: "woman_scientist" },
+      { emoji: "\u{1F468}\u200D\u{1F52C}", name: "man_scientist" },
+      { emoji: "\u{1F469}\u200D\u{1F3A8}", name: "woman_artist" },
+      { emoji: "\u{1F468}\u200D\u{1F3A8}", name: "man_artist" },
+      { emoji: "\u{1F469}\u200D\u{1F692}", name: "woman_firefighter" },
+      { emoji: "\u{1F468}\u200D\u{1F692}", name: "man_firefighter" },
+      { emoji: "\u{1F469}\u200D\u2708\uFE0F", name: "woman_pilot" },
+      { emoji: "\u{1F468}\u200D\u2708\uFE0F", name: "man_pilot" },
+      { emoji: "\u{1F469}\u200D\u{1F680}", name: "woman_astronaut" },
+      { emoji: "\u{1F468}\u200D\u{1F680}", name: "man_astronaut" },
+      { emoji: "\u{1F469}\u200D\u2696\uFE0F", name: "woman_judge" },
+      { emoji: "\u{1F468}\u200D\u2696\uFE0F", name: "man_judge" },
+      { emoji: "\u{1F470}", name: "bride_wedding" },
+      { emoji: "\u{1F935}", name: "groom_tuxedo" },
+      { emoji: "\u{1F478}", name: "princess_crown" },
+      { emoji: "\u{1F934}", name: "prince_crown" },
+      { emoji: "\u{1F9B8}", name: "superhero_person" },
+      { emoji: "\u{1F9B9}", name: "supervillain_person" },
+      { emoji: "\u{1F936}", name: "mrs_claus" },
+      { emoji: "\u{1F385}", name: "santa_claus" },
+      { emoji: "\u{1F9D9}", name: "mage_wizard" },
+      { emoji: "\u{1F9DD}", name: "elf_fantasy" },
+      { emoji: "\u{1F9DB}", name: "vampire_dracula" },
+      { emoji: "\u{1F9DF}", name: "zombie_undead" },
+      { emoji: "\u{1F9DE}", name: "genie_magic" },
+      { emoji: "\u{1F9DC}", name: "mermaid_person" },
+      { emoji: "\u{1F9DA}", name: "fairy_magic" },
+      { emoji: "\u{1F47C}", name: "angel_baby" },
+      { emoji: "\u{1F930}", name: "pregnant_woman" },
+      { emoji: "\u{1F931}", name: "breast_feeding" },
+      { emoji: "\u{1F647}", name: "bowing_person" },
+      { emoji: "\u{1F481}", name: "tipping_hand" },
+      { emoji: "\u{1F645}", name: "gesturing_no" },
+      { emoji: "\u{1F646}", name: "gesturing_ok" },
+      { emoji: "\u{1F64B}", name: "raising_hand" },
+      { emoji: "\u{1F9CF}", name: "deaf_person" },
+      { emoji: "\u{1F926}", name: "face_palm" },
+      { emoji: "\u{1F937}", name: "shrugging_person" },
+      { emoji: "\u{1F64E}", name: "pouting_person" },
+      { emoji: "\u{1F64D}", name: "frowning_person" },
+      { emoji: "\u{1F487}", name: "haircut_person" },
+      { emoji: "\u{1F486}", name: "massage_person" },
+      { emoji: "\u{1F9D6}", name: "sauna_person" },
+      { emoji: "\u{1F483}", name: "woman_dancing" },
+      { emoji: "\u{1F57A}", name: "man_dancing" },
+      { emoji: "\u{1F46F}", name: "bunny_friends" },
+      { emoji: "\u{1F574}\uFE0F", name: "levitating_suit" },
+      { emoji: "\u{1F6B6}", name: "walking_person" },
+      { emoji: "\u{1F3C3}", name: "running_person" },
+      { emoji: "\u{1F9CD}", name: "standing_person" },
+      { emoji: "\u{1F9CE}", name: "kneeling_person" },
+      { emoji: "\u{1F468}\u200D\u{1F9AF}", name: "blind_cane" },
+      { emoji: "\u{1F468}\u200D\u{1F9BC}", name: "motor_wheelchair" },
+      { emoji: "\u{1F468}\u200D\u{1F9BD}", name: "manual_wheelchair" },
+      { emoji: "\u{1F9D7}", name: "climbing_person" },
+      { emoji: "\u{1F93A}", name: "fencing_person" },
+      { emoji: "\u{1F3C7}", name: "horse_racing" },
+      { emoji: "\u26F7\uFE0F", name: "skier_snow" },
+      { emoji: "\u{1F3C2}", name: "snowboarder_snow" },
+      { emoji: "\u{1F3CC}\uFE0F", name: "golfing_person" },
+      { emoji: "\u{1F3C4}", name: "surfing_person" },
+      { emoji: "\u{1F6A3}", name: "rowing_person" },
+      { emoji: "\u{1F3CA}", name: "swimming_person" },
+      { emoji: "\u26F9\uFE0F", name: "basketball_person" },
+      { emoji: "\u{1F3CB}\uFE0F", name: "lifting_weights" },
+      { emoji: "\u{1F6B4}", name: "biking_person" },
+      { emoji: "\u{1F6B5}", name: "mountain_biking" },
+      { emoji: "\u{1F938}", name: "cartwheel_person" },
+      { emoji: "\u{1F93C}", name: "wrestling_people" },
+      { emoji: "\u{1F93D}", name: "water_polo" },
+      { emoji: "\u{1F93E}", name: "handball_person" },
+      { emoji: "\u{1F939}", name: "juggling_person" },
+      { emoji: "\u{1F9D8}", name: "yoga_lotus" },
+      { emoji: "\u{1F6C0}", name: "bath_person" },
+      { emoji: "\u{1F6CC}", name: "bed_person" }
+    ]
+  },
+  {
+    id: "animals_nature",
+    name: "Animals & Nature",
+    emojis: [
+      { emoji: "\u{1F435}", name: "monkey_face" },
+      { emoji: "\u{1F436}", name: "dog_face" },
+      { emoji: "\u{1F43A}", name: "wolf_face" },
+      { emoji: "\u{1F431}", name: "cat_face" },
+      { emoji: "\u{1F981}", name: "lion_face" },
+      { emoji: "\u{1F42F}", name: "tiger_face" },
+      { emoji: "\u{1F434}", name: "horse_face" },
+      { emoji: "\u{1F984}", name: "unicorn_face" },
+      { emoji: "\u{1F42E}", name: "cow_face" },
+      { emoji: "\u{1F437}", name: "pig_face" },
+      { emoji: "\u{1F42D}", name: "mouse_face" },
+      { emoji: "\u{1F430}", name: "rabbit_face" },
+      { emoji: "\u{1F43B}", name: "bear_face" },
+      { emoji: "\u{1F428}", name: "koala_bear" },
+      { emoji: "\u{1F43C}", name: "panda_face" },
+      { emoji: "\u{1F414}", name: "chicken_bird" },
+      { emoji: "\u{1F427}", name: "penguin_bird" },
+      { emoji: "\u{1F426}", name: "bird_fly" },
+      { emoji: "\u{1F986}", name: "duck_bird" },
+      { emoji: "\u{1F985}", name: "eagle_bird" },
+      { emoji: "\u{1F989}", name: "owl_bird" },
+      { emoji: "\u{1F438}", name: "frog_face" },
+      { emoji: "\u{1F422}", name: "turtle_slow" },
+      { emoji: "\u{1F40D}", name: "snake_hiss" },
+      { emoji: "\u{1F433}", name: "whale_sprout" },
+      { emoji: "\u{1F42C}", name: "dolphin_jump" },
+      { emoji: "\u{1F41F}", name: "fish_swim" },
+      { emoji: "\u{1F419}", name: "octopus_legs" },
+      { emoji: "\u{1F98B}", name: "butterfly_fly" },
+      { emoji: "\u{1F490}", name: "flower_bouquet" },
+      { emoji: "\u{1F338}", name: "cherry_blossom" },
+      { emoji: "\u{1F339}", name: "rose_flower" },
+      { emoji: "\u{1F33B}", name: "sunflower_yellow" },
+      { emoji: "\u{1F332}", name: "evergreen_tree" },
+      { emoji: "\u{1F333}", name: "deciduous_tree" },
+      { emoji: "\u{1F334}", name: "palm_tree" },
+      { emoji: "\u{1F335}", name: "cactus_plant" },
+      { emoji: "\u{1F525}", name: "fire_flame" },
+      { emoji: "\u{1F4A7}", name: "water_drop" },
+      { emoji: "\u2B50", name: "star_shine" }
+    ]
+  },
+  {
+    id: "food_drink",
+    name: "Food & Drink",
+    emojis: [
+      { emoji: "\u{1F347}", name: "grapes_fruit" },
+      { emoji: "\u{1F348}", name: "melon_fruit" },
+      { emoji: "\u{1F349}", name: "watermelon_slice" },
+      { emoji: "\u{1F34A}", name: "tangerine_orange" },
+      { emoji: "\u{1F34B}", name: "lemon_sour" },
+      { emoji: "\u{1F34C}", name: "banana_fruit" },
+      { emoji: "\u{1F34D}", name: "pineapple_fruit" },
+      { emoji: "\u{1F34E}", name: "red_apple" },
+      { emoji: "\u{1F34F}", name: "green_apple" },
+      { emoji: "\u{1F350}", name: "pear_fruit" },
+      { emoji: "\u{1F351}", name: "peach_fruit" },
+      { emoji: "\u{1F352}", name: "cherries_red" },
+      { emoji: "\u{1F353}", name: "strawberry_red" },
+      { emoji: "\u{1F95D}", name: "kiwi_fruit" },
+      { emoji: "\u{1F345}", name: "tomato_red" },
+      { emoji: "\u{1F951}", name: "avocado_green" },
+      { emoji: "\u{1F346}", name: "eggplant_purple" },
+      { emoji: "\u{1F954}", name: "potato_spud" },
+      { emoji: "\u{1F955}", name: "carrot_veg" },
+      { emoji: "\u{1F33D}", name: "corn_cob" },
+      { emoji: "\u{1F35E}", name: "bread_loaf" },
+      { emoji: "\u{1F9C0}", name: "cheese_wedge" },
+      { emoji: "\u{1F356}", name: "meat_bone" },
+      { emoji: "\u{1F357}", name: "poultry_leg" },
+      { emoji: "\u{1F969}", name: "meat_cut" },
+      { emoji: "\u{1F953}", name: "bacon_strips" },
+      { emoji: "\u{1F354}", name: "hamburger_fast" },
+      { emoji: "\u{1F35F}", name: "french_fries" },
+      { emoji: "\u{1F355}", name: "pizza_slice" },
+      { emoji: "\u{1F32D}", name: "hot_dog" },
+      { emoji: "\u{1F96A}", name: "sandwich_lunch" },
+      { emoji: "\u{1F32E}", name: "taco_mexican" },
+      { emoji: "\u{1F32F}", name: "burrito_wrap" },
+      { emoji: "\u{1F95A}", name: "egg_white" },
+      { emoji: "\u{1F373}", name: "cooking_egg" },
+      { emoji: "\u{1F37F}", name: "popcorn_box" },
+      { emoji: "\u{1F35A}", name: "rice_bowl" },
+      { emoji: "\u{1F35D}", name: "spaghetti_pasta" },
+      { emoji: "\u{1F363}", name: "sushi_roll" },
+      { emoji: "\u{1F364}", name: "fried_shrimp" },
+      { emoji: "\u{1F366}", name: "ice_cream" },
+      { emoji: "\u{1F369}", name: "doughnut_sweet" },
+      { emoji: "\u{1F36A}", name: "cookie_sweet" },
+      { emoji: "\u{1F382}", name: "birthday_cake" },
+      { emoji: "\u{1F370}", name: "shortcake_slice" },
+      { emoji: "\u{1F36B}", name: "chocolate_bar" },
+      { emoji: "\u{1F36C}", name: "candy_sweet" },
+      { emoji: "\u{1F36D}", name: "lollipop_candy" },
+      { emoji: "\u2615", name: "coffee_hot" },
+      { emoji: "\u{1F37A}", name: "beer_mug" },
+      { emoji: "\u{1F37B}", name: "beer_cheers" },
+      { emoji: "\u{1F942}", name: "champagne_cheers" },
+      { emoji: "\u{1F377}", name: "wine_glass" },
+      { emoji: "\u{1F943}", name: "whiskey_glass" },
+      { emoji: "\u{1F379}", name: "tropical_drink" }
+    ]
+  },
+  {
+    id: "activity",
+    name: "Activity",
+    emojis: [
+      { emoji: "\u26BD", name: "soccer_ball" },
+      { emoji: "\u{1F3C0}", name: "basketball_hoop" },
+      { emoji: "\u{1F3C8}", name: "football_american" },
+      { emoji: "\u26BE", name: "baseball_game" },
+      { emoji: "\u{1F3BE}", name: "tennis_ball" },
+      { emoji: "\u{1F3D0}", name: "volleyball_game" },
+      { emoji: "\u{1F3B1}", name: "pool_8ball" },
+      { emoji: "\u{1F3D3}", name: "ping_pong" },
+      { emoji: "\u{1F3F8}", name: "badminton_game" },
+      { emoji: "\u{1F94A}", name: "boxing_glove" },
+      { emoji: "\u{1F945}", name: "goal_net" },
+      { emoji: "\u{1F3A3}", name: "fishing_pole" },
+      { emoji: "\u{1F3AE}", name: "video_game" },
+      { emoji: "\u{1F3B2}", name: "game_die" },
+      { emoji: "\u{1F3AD}", name: "theater_masks" },
+      { emoji: "\u{1F3A8}", name: "artist_palette" },
+      { emoji: "\u{1F3AC}", name: "clapper_board" },
+      { emoji: "\u{1F3A4}", name: "microphone_sing" },
+      { emoji: "\u{1F3A7}", name: "headphone_music" },
+      { emoji: "\u{1F3B7}", name: "saxophone_jazz" },
+      { emoji: "\u{1F3B8}", name: "guitar_rock" },
+      { emoji: "\u{1F3B9}", name: "piano_keys" },
+      { emoji: "\u{1F3BA}", name: "trumpet_horn" },
+      { emoji: "\u{1F3BB}", name: "violin_music" },
+      { emoji: "\u{1F941}", name: "drum_beat" }
+    ]
+  },
+  {
+    id: "objects",
+    name: "Objects",
+    emojis: [
+      { emoji: "\u{1F4F1}", name: "mobile_phone" },
+      { emoji: "\u{1F4BB}", name: "laptop_computer" },
+      { emoji: "\u{1F5A5}\uFE0F", name: "desktop_computer" },
+      { emoji: "\u231A", name: "watch_wrist" },
+      { emoji: "\u{1F4F7}", name: "camera_photo" },
+      { emoji: "\u{1F4A1}", name: "light_bulb" },
+      { emoji: "\u{1F4DA}", name: "books_pile" },
+      { emoji: "\u{1F4B0}", name: "money_bag" },
+      { emoji: "\u{1F381}", name: "gift_box" },
+      { emoji: "\u{1F388}", name: "balloon_red" },
+      { emoji: "\u{1F389}", name: "party_popper" },
+      { emoji: "\u{1F38A}", name: "confetti_ball" },
+      { emoji: "\u2709\uFE0F", name: "envelope_mail" },
+      { emoji: "\u{1F4E6}", name: "package_box" },
+      { emoji: "\u270F\uFE0F", name: "pencil_write" },
+      { emoji: "\u{1F512}", name: "lock_closed" },
+      { emoji: "\u{1F511}", name: "key_gold" },
+      { emoji: "\u{1F528}", name: "hammer_tool" },
+      { emoji: "\u{1F4A3}", name: "bomb_explode" },
+      { emoji: "\u{1F52B}", name: "pistol_toy" },
+      { emoji: "\u{1F48A}", name: "pill_capsule" },
+      { emoji: "\u{1F6D2}", name: "shopping_cart" }
+    ]
+  },
+  {
+    id: "symbols",
+    name: "Symbols",
+    emojis: [
+      { emoji: "\u2764\uFE0F", name: "red_heart" },
+      { emoji: "\u{1F9E1}", name: "orange_heart" },
+      { emoji: "\u{1F49B}", name: "yellow_heart" },
+      { emoji: "\u{1F49A}", name: "green_heart" },
+      { emoji: "\u{1F499}", name: "blue_heart" },
+      { emoji: "\u{1F49C}", name: "purple_heart" },
+      { emoji: "\u{1F5A4}", name: "black_heart" },
+      { emoji: "\u{1F90D}", name: "white_heart" },
+      { emoji: "\u{1F90E}", name: "brown_heart" },
+      { emoji: "\u{1F494}", name: "broken_heart" },
+      { emoji: "\u2763\uFE0F", name: "heart_exclamation" },
+      { emoji: "\u{1F495}", name: "two_hearts" },
+      { emoji: "\u{1F49E}", name: "revolving_hearts" },
+      { emoji: "\u{1F493}", name: "beating_heart" },
+      { emoji: "\u{1F497}", name: "growing_heart" },
+      { emoji: "\u{1F496}", name: "sparkling_heart" },
+      { emoji: "\u{1F498}", name: "cupid_heart" },
+      { emoji: "\u{1F49D}", name: "gift_heart" },
+      { emoji: "\u{1F4AF}", name: "hundred_points" },
+      { emoji: "\u{1F4A2}", name: "anger_symbol" },
+      { emoji: "\u{1F4A5}", name: "collision_boom" },
+      { emoji: "\u{1F4AB}", name: "dizzy_star" },
+      { emoji: "\u{1F4A6}", name: "sweat_drops" },
+      { emoji: "\u{1F4A8}", name: "dash_away" },
+      { emoji: "\u{1F4A4}", name: "sleeping_zzz" },
+      { emoji: "\u2705", name: "check_mark" },
+      { emoji: "\u274C", name: "cross_mark" },
+      { emoji: "\u26A0\uFE0F", name: "warning_sign" },
+      { emoji: "\u26D4", name: "no_entry" },
+      { emoji: "\u{1F6AB}", name: "prohibited_sign" },
+      { emoji: "\u2B06\uFE0F", name: "arrow_up" },
+      { emoji: "\u2B07\uFE0F", name: "arrow_down" },
+      { emoji: "\u2B05\uFE0F", name: "arrow_left" },
+      { emoji: "\u27A1\uFE0F", name: "arrow_right" },
+      { emoji: "\u267B\uFE0F", name: "recycling_symbol" }
+    ]
+  },
+  {
+    id: "flags",
+    name: "Flags",
+    emojis: [
+      { emoji: "\u{1F3C1}", name: "checkered_flag" },
+      { emoji: "\u{1F3F3}\uFE0F", name: "white_flag" },
+      { emoji: "\u{1F3F3}\uFE0F\u200D\u{1F308}", name: "rainbow_flag" },
+      { emoji: "\u{1F3F3}\uFE0F\u200D\u26A7\uFE0F", name: "transgender_flag" },
+      { emoji: "\u{1F3F4}\u200D\u2620\uFE0F", name: "pirate_flag" },
+      { emoji: "\u{1F1E6}\u{1F1E8}", name: "flag_ascension" },
+      { emoji: "\u{1F1E6}\u{1F1E9}", name: "flag_andorra" },
+      { emoji: "\u{1F1E6}\u{1F1EA}", name: "flag_uae" },
+      { emoji: "\u{1F1E6}\u{1F1EB}", name: "flag_afghanistan" },
+      { emoji: "\u{1F1E6}\u{1F1EC}", name: "flag_antigua" },
+      { emoji: "\u{1F1E6}\u{1F1EE}", name: "flag_anguilla" },
+      { emoji: "\u{1F1E6}\u{1F1F1}", name: "flag_albania" },
+      { emoji: "\u{1F1E6}\u{1F1F2}", name: "flag_armenia" },
+      { emoji: "\u{1F1E6}\u{1F1F4}", name: "flag_angola" },
+      { emoji: "\u{1F1E6}\u{1F1F6}", name: "flag_antarctica" },
+      { emoji: "\u{1F1E6}\u{1F1F7}", name: "flag_argentina" },
+      { emoji: "\u{1F1E6}\u{1F1F8}", name: "flag_samoa" },
+      { emoji: "\u{1F1E6}\u{1F1F9}", name: "flag_austria" },
+      { emoji: "\u{1F1E6}\u{1F1FA}", name: "flag_australia" },
+      { emoji: "\u{1F1E6}\u{1F1FC}", name: "flag_aruba" },
+      { emoji: "\u{1F1E6}\u{1F1FD}", name: "flag_aland" },
+      { emoji: "\u{1F1E6}\u{1F1FF}", name: "flag_azerbaijan" },
+      { emoji: "\u{1F1E7}\u{1F1E6}", name: "flag_bosnia" },
+      { emoji: "\u{1F1E7}\u{1F1E7}", name: "flag_barbados" },
+      { emoji: "\u{1F1E7}\u{1F1E9}", name: "flag_bangladesh" },
+      { emoji: "\u{1F1E7}\u{1F1EA}", name: "flag_belgium" },
+      { emoji: "\u{1F1E7}\u{1F1EB}", name: "flag_burkina" },
+      { emoji: "\u{1F1E7}\u{1F1EC}", name: "flag_bulgaria" },
+      { emoji: "\u{1F1E7}\u{1F1ED}", name: "flag_bahrain" },
+      { emoji: "\u{1F1E7}\u{1F1EE}", name: "flag_burundi" },
+      { emoji: "\u{1F1E7}\u{1F1EF}", name: "flag_benin" },
+      { emoji: "\u{1F1E7}\u{1F1F1}", name: "flag_st_barthelemy" },
+      { emoji: "\u{1F1E7}\u{1F1F2}", name: "flag_bermuda" },
+      { emoji: "\u{1F1E7}\u{1F1F3}", name: "flag_brunei" },
+      { emoji: "\u{1F1E7}\u{1F1F4}", name: "flag_bolivia" },
+      { emoji: "\u{1F1E7}\u{1F1F6}", name: "flag_bonaire" },
+      { emoji: "\u{1F1E7}\u{1F1F7}", name: "flag_brazil" },
+      { emoji: "\u{1F1E7}\u{1F1F8}", name: "flag_bahamas" },
+      { emoji: "\u{1F1E7}\u{1F1F9}", name: "flag_bhutan" },
+      { emoji: "\u{1F1E7}\u{1F1FB}", name: "flag_bouvet" },
+      { emoji: "\u{1F1E7}\u{1F1FC}", name: "flag_botswana" },
+      { emoji: "\u{1F1E7}\u{1F1FE}", name: "flag_belarus" },
+      { emoji: "\u{1F1E7}\u{1F1FF}", name: "flag_belize" },
+      { emoji: "\u{1F1E8}\u{1F1E6}", name: "flag_canada" },
+      { emoji: "\u{1F1E8}\u{1F1E8}", name: "flag_cocos" },
+      { emoji: "\u{1F1E8}\u{1F1E9}", name: "flag_congo_dr" },
+      { emoji: "\u{1F1E8}\u{1F1EB}", name: "flag_central_africa" },
+      { emoji: "\u{1F1E8}\u{1F1EC}", name: "flag_congo" },
+      { emoji: "\u{1F1E8}\u{1F1ED}", name: "flag_switzerland" },
+      { emoji: "\u{1F1E8}\u{1F1EE}", name: "flag_cote_divoire" },
+      { emoji: "\u{1F1E8}\u{1F1F0}", name: "flag_cook_islands" },
+      { emoji: "\u{1F1E8}\u{1F1F1}", name: "flag_chile" },
+      { emoji: "\u{1F1E8}\u{1F1F2}", name: "flag_cameroon" },
+      { emoji: "\u{1F1E8}\u{1F1F3}", name: "flag_china" },
+      { emoji: "\u{1F1E8}\u{1F1F4}", name: "flag_colombia" },
+      { emoji: "\u{1F1E8}\u{1F1F5}", name: "flag_clipperton" },
+      { emoji: "\u{1F1E8}\u{1F1F7}", name: "flag_costa_rica" },
+      { emoji: "\u{1F1E8}\u{1F1FA}", name: "flag_cuba" },
+      { emoji: "\u{1F1E8}\u{1F1FB}", name: "flag_cape_verde" },
+      { emoji: "\u{1F1E8}\u{1F1FC}", name: "flag_curacao" },
+      { emoji: "\u{1F1E8}\u{1F1FD}", name: "flag_christmas_island" },
+      { emoji: "\u{1F1E8}\u{1F1FE}", name: "flag_cyprus" },
+      { emoji: "\u{1F1E8}\u{1F1FF}", name: "flag_czechia" },
+      { emoji: "\u{1F1E9}\u{1F1EA}", name: "flag_germany" },
+      { emoji: "\u{1F1E9}\u{1F1EC}", name: "flag_diego_garcia" },
+      { emoji: "\u{1F1E9}\u{1F1EF}", name: "flag_djibouti" },
+      { emoji: "\u{1F1E9}\u{1F1F0}", name: "flag_denmark" },
+      { emoji: "\u{1F1E9}\u{1F1F2}", name: "flag_dominica" },
+      { emoji: "\u{1F1E9}\u{1F1F4}", name: "flag_dominican_rep" },
+      { emoji: "\u{1F1E9}\u{1F1FF}", name: "flag_algeria" },
+      { emoji: "\u{1F1EA}\u{1F1E8}", name: "flag_ecuador" },
+      { emoji: "\u{1F1EA}\u{1F1EA}", name: "flag_estonia" },
+      { emoji: "\u{1F1EA}\u{1F1EC}", name: "flag_egypt" },
+      { emoji: "\u{1F1EA}\u{1F1ED}", name: "flag_western_sahara" },
+      { emoji: "\u{1F1EA}\u{1F1F7}", name: "flag_eritrea" },
+      { emoji: "\u{1F1EA}\u{1F1F8}", name: "flag_spain" },
+      { emoji: "\u{1F1EA}\u{1F1F9}", name: "flag_ethiopia" },
+      { emoji: "\u{1F1EA}\u{1F1FA}", name: "flag_eu" },
+      { emoji: "\u{1F1EB}\u{1F1EE}", name: "flag_finland" },
+      { emoji: "\u{1F1EB}\u{1F1EF}", name: "flag_fiji" },
+      { emoji: "\u{1F1EB}\u{1F1F0}", name: "flag_falkland" },
+      { emoji: "\u{1F1EB}\u{1F1F2}", name: "flag_micronesia" },
+      { emoji: "\u{1F1EB}\u{1F1F4}", name: "flag_faroe" },
+      { emoji: "\u{1F1EB}\u{1F1F7}", name: "flag_france" },
+      { emoji: "\u{1F1EC}\u{1F1E6}", name: "flag_gabon" },
+      { emoji: "\u{1F1EC}\u{1F1E7}", name: "flag_uk" },
+      { emoji: "\u{1F1EC}\u{1F1E9}", name: "flag_grenada" },
+      { emoji: "\u{1F1EC}\u{1F1EA}", name: "flag_georgia" },
+      { emoji: "\u{1F1EC}\u{1F1EB}", name: "flag_french_guiana" },
+      { emoji: "\u{1F1EC}\u{1F1EC}", name: "flag_guernsey" },
+      { emoji: "\u{1F1EC}\u{1F1ED}", name: "flag_ghana" },
+      { emoji: "\u{1F1EC}\u{1F1EE}", name: "flag_gibraltar" },
+      { emoji: "\u{1F1EC}\u{1F1F1}", name: "flag_greenland" },
+      { emoji: "\u{1F1EC}\u{1F1F2}", name: "flag_gambia" },
+      { emoji: "\u{1F1EC}\u{1F1F3}", name: "flag_guinea" },
+      { emoji: "\u{1F1EC}\u{1F1F5}", name: "flag_guadeloupe" },
+      { emoji: "\u{1F1EC}\u{1F1F6}", name: "flag_equatorial_guinea" },
+      { emoji: "\u{1F1EC}\u{1F1F7}", name: "flag_greece" },
+      { emoji: "\u{1F1EC}\u{1F1F8}", name: "flag_south_georgia" },
+      { emoji: "\u{1F1EC}\u{1F1F9}", name: "flag_guatemala" },
+      { emoji: "\u{1F1EC}\u{1F1FA}", name: "flag_guam" },
+      { emoji: "\u{1F1EC}\u{1F1FC}", name: "flag_guinea_bissau" },
+      { emoji: "\u{1F1EC}\u{1F1FE}", name: "flag_guyana" },
+      { emoji: "\u{1F1ED}\u{1F1F0}", name: "flag_hong_kong" },
+      { emoji: "\u{1F1ED}\u{1F1F2}", name: "flag_heard_island" },
+      { emoji: "\u{1F1ED}\u{1F1F3}", name: "flag_honduras" },
+      { emoji: "\u{1F1ED}\u{1F1F7}", name: "flag_croatia" },
+      { emoji: "\u{1F1ED}\u{1F1F9}", name: "flag_haiti" },
+      { emoji: "\u{1F1ED}\u{1F1FA}", name: "flag_hungary" },
+      { emoji: "\u{1F1EE}\u{1F1E8}", name: "flag_canary_islands" },
+      { emoji: "\u{1F1EE}\u{1F1E9}", name: "flag_indonesia" },
+      { emoji: "\u{1F1EE}\u{1F1EA}", name: "flag_ireland" },
+      { emoji: "\u{1F1EE}\u{1F1F1}", name: "flag_israel" },
+      { emoji: "\u{1F1EE}\u{1F1F2}", name: "flag_isle_of_man" },
+      { emoji: "\u{1F1EE}\u{1F1F3}", name: "flag_india" },
+      { emoji: "\u{1F1EE}\u{1F1F4}", name: "flag_british_indian_ocean" },
+      { emoji: "\u{1F1EE}\u{1F1F6}", name: "flag_iraq" },
+      { emoji: "\u{1F1EE}\u{1F1F7}", name: "flag_iran" },
+      { emoji: "\u{1F1EE}\u{1F1F8}", name: "flag_iceland" },
+      { emoji: "\u{1F1EE}\u{1F1F9}", name: "flag_italy" },
+      { emoji: "\u{1F1EF}\u{1F1EA}", name: "flag_jersey" },
+      { emoji: "\u{1F1EF}\u{1F1F2}", name: "flag_jamaica" },
+      { emoji: "\u{1F1EF}\u{1F1F4}", name: "flag_jordan" },
+      { emoji: "\u{1F1EF}\u{1F1F5}", name: "flag_japan" },
+      { emoji: "\u{1F1F0}\u{1F1EA}", name: "flag_kenya" },
+      { emoji: "\u{1F1F0}\u{1F1EC}", name: "flag_kyrgyzstan" },
+      { emoji: "\u{1F1F0}\u{1F1ED}", name: "flag_cambodia" },
+      { emoji: "\u{1F1F0}\u{1F1EE}", name: "flag_kiribati" },
+      { emoji: "\u{1F1F0}\u{1F1F2}", name: "flag_comoros" },
+      { emoji: "\u{1F1F0}\u{1F1F3}", name: "flag_st_kitts" },
+      { emoji: "\u{1F1F0}\u{1F1F5}", name: "flag_north_korea" },
+      { emoji: "\u{1F1F0}\u{1F1F7}", name: "flag_south_korea" },
+      { emoji: "\u{1F1F0}\u{1F1FC}", name: "flag_kuwait" },
+      { emoji: "\u{1F1F0}\u{1F1FE}", name: "flag_cayman" },
+      { emoji: "\u{1F1F0}\u{1F1FF}", name: "flag_kazakhstan" },
+      { emoji: "\u{1F1F1}\u{1F1E6}", name: "flag_laos" },
+      { emoji: "\u{1F1F1}\u{1F1E7}", name: "flag_lebanon" },
+      { emoji: "\u{1F1F1}\u{1F1E8}", name: "flag_st_lucia" },
+      { emoji: "\u{1F1F1}\u{1F1EE}", name: "flag_liechtenstein" },
+      { emoji: "\u{1F1F1}\u{1F1F0}", name: "flag_sri_lanka" },
+      { emoji: "\u{1F1F1}\u{1F1F7}", name: "flag_liberia" },
+      { emoji: "\u{1F1F1}\u{1F1F8}", name: "flag_lesotho" },
+      { emoji: "\u{1F1F1}\u{1F1F9}", name: "flag_lithuania" },
+      { emoji: "\u{1F1F1}\u{1F1FA}", name: "flag_luxembourg" },
+      { emoji: "\u{1F1F1}\u{1F1FB}", name: "flag_latvia" },
+      { emoji: "\u{1F1F1}\u{1F1FE}", name: "flag_libya" },
+      { emoji: "\u{1F1F2}\u{1F1E6}", name: "flag_morocco" },
+      { emoji: "\u{1F1F2}\u{1F1E8}", name: "flag_monaco" },
+      { emoji: "\u{1F1F2}\u{1F1E9}", name: "flag_moldova" },
+      { emoji: "\u{1F1F2}\u{1F1EA}", name: "flag_montenegro" },
+      { emoji: "\u{1F1F2}\u{1F1EB}", name: "flag_st_martin" },
+      { emoji: "\u{1F1F2}\u{1F1EC}", name: "flag_madagascar" },
+      { emoji: "\u{1F1F2}\u{1F1ED}", name: "flag_marshall_islands" },
+      { emoji: "\u{1F1F2}\u{1F1F0}", name: "flag_north_macedonia" },
+      { emoji: "\u{1F1F2}\u{1F1F1}", name: "flag_mali" },
+      { emoji: "\u{1F1F2}\u{1F1F2}", name: "flag_myanmar" },
+      { emoji: "\u{1F1F2}\u{1F1F3}", name: "flag_mongolia" },
+      { emoji: "\u{1F1F2}\u{1F1F4}", name: "flag_macau" },
+      { emoji: "\u{1F1F2}\u{1F1F5}", name: "flag_northern_mariana" },
+      { emoji: "\u{1F1F2}\u{1F1F6}", name: "flag_martinique" },
+      { emoji: "\u{1F1F2}\u{1F1F7}", name: "flag_mauritania" },
+      { emoji: "\u{1F1F2}\u{1F1F8}", name: "flag_montserrat" },
+      { emoji: "\u{1F1F2}\u{1F1F9}", name: "flag_malta" },
+      { emoji: "\u{1F1F2}\u{1F1FA}", name: "flag_mauritius" },
+      { emoji: "\u{1F1F2}\u{1F1FB}", name: "flag_maldives" },
+      { emoji: "\u{1F1F2}\u{1F1FC}", name: "flag_malawi" },
+      { emoji: "\u{1F1F2}\u{1F1FD}", name: "flag_mexico" },
+      { emoji: "\u{1F1F2}\u{1F1FE}", name: "flag_malaysia" },
+      { emoji: "\u{1F1F2}\u{1F1FF}", name: "flag_mozambique" },
+      { emoji: "\u{1F1F3}\u{1F1E6}", name: "flag_namibia" },
+      { emoji: "\u{1F1F3}\u{1F1E8}", name: "flag_new_caledonia" },
+      { emoji: "\u{1F1F3}\u{1F1EA}", name: "flag_niger" },
+      { emoji: "\u{1F1F3}\u{1F1EB}", name: "flag_norfolk" },
+      { emoji: "\u{1F1F3}\u{1F1EC}", name: "flag_nigeria" },
+      { emoji: "\u{1F1F3}\u{1F1EE}", name: "flag_nicaragua" },
+      { emoji: "\u{1F1F3}\u{1F1F1}", name: "flag_netherlands" },
+      { emoji: "\u{1F1F3}\u{1F1F4}", name: "flag_norway" },
+      { emoji: "\u{1F1F3}\u{1F1F5}", name: "flag_nepal" },
+      { emoji: "\u{1F1F3}\u{1F1F7}", name: "flag_nauru" },
+      { emoji: "\u{1F1F3}\u{1F1FA}", name: "flag_niue" },
+      { emoji: "\u{1F1F3}\u{1F1FF}", name: "flag_new_zealand" },
+      { emoji: "\u{1F1F4}\u{1F1F2}", name: "flag_oman" },
+      { emoji: "\u{1F1F5}\u{1F1E6}", name: "flag_panama" },
+      { emoji: "\u{1F1F5}\u{1F1EA}", name: "flag_peru" },
+      { emoji: "\u{1F1F5}\u{1F1EB}", name: "flag_french_polynesia" },
+      { emoji: "\u{1F1F5}\u{1F1EC}", name: "flag_papua_new_guinea" },
+      { emoji: "\u{1F1F5}\u{1F1ED}", name: "flag_philippines" },
+      { emoji: "\u{1F1F5}\u{1F1F0}", name: "flag_pakistan" },
+      { emoji: "\u{1F1F5}\u{1F1F1}", name: "flag_poland" },
+      { emoji: "\u{1F1F5}\u{1F1F2}", name: "flag_st_pierre" },
+      { emoji: "\u{1F1F5}\u{1F1F3}", name: "flag_pitcairn" },
+      { emoji: "\u{1F1F5}\u{1F1F7}", name: "flag_puerto_rico" },
+      { emoji: "\u{1F1F5}\u{1F1F8}", name: "flag_palestine" },
+      { emoji: "\u{1F1F5}\u{1F1F9}", name: "flag_portugal" },
+      { emoji: "\u{1F1F5}\u{1F1FC}", name: "flag_palau" },
+      { emoji: "\u{1F1F5}\u{1F1FE}", name: "flag_paraguay" },
+      { emoji: "\u{1F1F6}\u{1F1E6}", name: "flag_qatar" },
+      { emoji: "\u{1F1F7}\u{1F1EA}", name: "flag_reunion" },
+      { emoji: "\u{1F1F7}\u{1F1F4}", name: "flag_romania" },
+      { emoji: "\u{1F1F7}\u{1F1F8}", name: "flag_serbia" },
+      { emoji: "\u{1F1F7}\u{1F1FA}", name: "flag_russia" },
+      { emoji: "\u{1F1F7}\u{1F1FC}", name: "flag_rwanda" },
+      { emoji: "\u{1F1F8}\u{1F1E6}", name: "flag_saudi_arabia" },
+      { emoji: "\u{1F1F8}\u{1F1E7}", name: "flag_solomon_islands" },
+      { emoji: "\u{1F1F8}\u{1F1E8}", name: "flag_seychelles" },
+      { emoji: "\u{1F1F8}\u{1F1E9}", name: "flag_sudan" },
+      { emoji: "\u{1F1F8}\u{1F1EA}", name: "flag_sweden" },
+      { emoji: "\u{1F1F8}\u{1F1EC}", name: "flag_singapore" },
+      { emoji: "\u{1F1F8}\u{1F1ED}", name: "flag_st_helena" },
+      { emoji: "\u{1F1F8}\u{1F1EE}", name: "flag_slovenia" },
+      { emoji: "\u{1F1F8}\u{1F1EF}", name: "flag_svalbard" },
+      { emoji: "\u{1F1F8}\u{1F1F0}", name: "flag_slovakia" },
+      { emoji: "\u{1F1F8}\u{1F1F1}", name: "flag_sierra_leone" },
+      { emoji: "\u{1F1F8}\u{1F1F2}", name: "flag_san_marino" },
+      { emoji: "\u{1F1F8}\u{1F1F3}", name: "flag_senegal" },
+      { emoji: "\u{1F1F8}\u{1F1F4}", name: "flag_somalia" },
+      { emoji: "\u{1F1F8}\u{1F1F7}", name: "flag_suriname" },
+      { emoji: "\u{1F1F8}\u{1F1F8}", name: "flag_south_sudan" },
+      { emoji: "\u{1F1F8}\u{1F1F9}", name: "flag_sao_tome" },
+      { emoji: "\u{1F1F8}\u{1F1FB}", name: "flag_el_salvador" },
+      { emoji: "\u{1F1F8}\u{1F1FD}", name: "flag_sint_maarten" },
+      { emoji: "\u{1F1F8}\u{1F1FE}", name: "flag_syria" },
+      { emoji: "\u{1F1F8}\u{1F1FF}", name: "flag_eswatini" },
+      { emoji: "\u{1F1F9}\u{1F1E6}", name: "flag_tristan" },
+      { emoji: "\u{1F1F9}\u{1F1E8}", name: "flag_turks_caicos" },
+      { emoji: "\u{1F1F9}\u{1F1E9}", name: "flag_chad" },
+      { emoji: "\u{1F1F9}\u{1F1EB}", name: "flag_french_southern" },
+      { emoji: "\u{1F1F9}\u{1F1EC}", name: "flag_togo" },
+      { emoji: "\u{1F1F9}\u{1F1ED}", name: "flag_thailand" },
+      { emoji: "\u{1F1F9}\u{1F1EF}", name: "flag_tajikistan" },
+      { emoji: "\u{1F1F9}\u{1F1F0}", name: "flag_tokelau" },
+      { emoji: "\u{1F1F9}\u{1F1F1}", name: "flag_timor_leste" },
+      { emoji: "\u{1F1F9}\u{1F1F2}", name: "flag_turkmenistan" },
+      { emoji: "\u{1F1F9}\u{1F1F3}", name: "flag_tunisia" },
+      { emoji: "\u{1F1F9}\u{1F1F4}", name: "flag_tonga" },
+      { emoji: "\u{1F1F9}\u{1F1F7}", name: "flag_turkey" },
+      { emoji: "\u{1F1F9}\u{1F1F9}", name: "flag_trinidad" },
+      { emoji: "\u{1F1F9}\u{1F1FB}", name: "flag_tuvalu" },
+      { emoji: "\u{1F1F9}\u{1F1FC}", name: "flag_taiwan" },
+      { emoji: "\u{1F1F9}\u{1F1FF}", name: "flag_tanzania" },
+      { emoji: "\u{1F1FA}\u{1F1E6}", name: "flag_ukraine" },
+      { emoji: "\u{1F1FA}\u{1F1EC}", name: "flag_uganda" },
+      { emoji: "\u{1F1FA}\u{1F1F2}", name: "flag_us_outlying" },
+      { emoji: "\u{1F1FA}\u{1F1F3}", name: "flag_un" },
+      { emoji: "\u{1F1FA}\u{1F1F8}", name: "flag_usa" },
+      { emoji: "\u{1F1FA}\u{1F1FE}", name: "flag_uruguay" },
+      { emoji: "\u{1F1FA}\u{1F1FF}", name: "flag_uzbekistan" },
+      { emoji: "\u{1F1FB}\u{1F1E6}", name: "flag_vatican" },
+      { emoji: "\u{1F1FB}\u{1F1E8}", name: "flag_st_vincent" },
+      { emoji: "\u{1F1FB}\u{1F1EA}", name: "flag_venezuela" },
+      { emoji: "\u{1F1FB}\u{1F1EC}", name: "flag_bvi" },
+      { emoji: "\u{1F1FB}\u{1F1EE}", name: "flag_usvi" },
+      { emoji: "\u{1F1FB}\u{1F1F3}", name: "flag_vietnam" },
+      { emoji: "\u{1F1FB}\u{1F1FA}", name: "flag_vanuatu" },
+      { emoji: "\u{1F1FC}\u{1F1EB}", name: "flag_wallis" },
+      { emoji: "\u{1F1FC}\u{1F1F8}", name: "flag_samoa" },
+      { emoji: "\u{1F1FD}\u{1F1F0}", name: "flag_kosovo" },
+      { emoji: "\u{1F1FE}\u{1F1EA}", name: "flag_yemen" },
+      { emoji: "\u{1F1FE}\u{1F1F9}", name: "flag_mayotte" },
+      { emoji: "\u{1F1FF}\u{1F1E6}", name: "flag_south_africa" },
+      { emoji: "\u{1F1FF}\u{1F1F2}", name: "flag_zambia" },
+      { emoji: "\u{1F1FF}\u{1F1FC}", name: "flag_zimbabwe" }
+    ]
+  }
+];
+
+// ../../components/ui/UEditor/emoji-suggestion.tsx
 var import_jsx_runtime76 = require("react/jsx-runtime");
+var EmojiList = (0, import_react42.forwardRef)((props, ref) => {
+  const [selectedIndex, setSelectedIndex] = (0, import_react42.useState)(0);
+  (0, import_react42.useEffect)(() => {
+    setSelectedIndex(0);
+  }, [props.items]);
+  (0, import_react42.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 === "ArrowLeft") {
+        setSelectedIndex((prev) => Math.max(0, prev - 8));
+        return true;
+      }
+      if (event.key === "ArrowRight") {
+        setSelectedIndex((prev) => Math.min(props.items.length - 1, prev + 8));
+        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_runtime76.jsx)("div", { className: "w-80 p-4 text-center text-sm text-muted-foreground bg-card border border-border rounded-2xl shadow-lg", children: "No emoji found" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "w-80 max-h-80 overflow-y-auto bg-card border border-border rounded-2xl shadow-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react39.Smile, { className: "w-4 h-4 text-primary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: "Emoji" })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "p-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "grid grid-cols-8 gap-1", children: props.items.slice(0, 64).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: () => props.command(item),
+          className: cn(
+            "w-9 h-9 flex items-center justify-center rounded-lg text-xl transition-colors",
+            selectedIndex === index ? "bg-primary/10 ring-2 ring-primary/30" : "hover:bg-accent"
+          ),
+          title: item.name.replace(/_/g, " "),
+          children: item.emoji
+        },
+        item.name
+      )) }),
+      props.items.length > 64 && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "mt-2 text-xs text-center text-muted-foreground", children: [
+        "Showing first 64 of ",
+        props.items.length,
+        " emojis"
+      ] })
+    ] })
+  ] });
+});
+EmojiList.displayName = "EmojiList";
+var getEmojiSuggestionItems = ({ query }) => {
+  const allEmojis = EMOJI_LIST.flatMap((category) => category.emojis);
+  if (!query.trim()) {
+    return allEmojis.slice(0, 64);
+  }
+  const searchQuery = query.toLowerCase();
+  return allEmojis.filter(
+    (emoji) => emoji.name.toLowerCase().includes(searchQuery) || emoji.emoji.includes(query)
+  );
+};
+var EmojiSuggestion = import_core3.Extension.create({
+  name: "emojiSuggestion",
+  addProseMirrorPlugins() {
+    return [
+      (0, import_suggestion2.default)({
+        editor: this.editor,
+        char: ":",
+        pluginKey: new import_state2.PluginKey("emojiSuggestion"),
+        command: ({ editor, range, props }) => {
+          editor.chain().focus().deleteRange(range).insertContent(props.emoji).run();
+        },
+        items: getEmojiSuggestionItems,
+        render: () => {
+          let component;
+          let popup;
+          return {
+            onStart: (props) => {
+              component = new import_react41.ReactRenderer(EmojiList, {
+                props,
+                editor: props.editor
+              });
+              if (!props.clientRect) {
+                return;
+              }
+              popup = (0, import_tippy2.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/resizable-image.tsx
+var import_react43 = require("react");
+var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
+var import_core4 = require("@tiptap/core");
+var import_react44 = require("@tiptap/react");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var MIN_IMAGE_SIZE_PX = 40;
 var AXIS_LOCK_THRESHOLD_PX = 4;
 function toNullableNumber(value) {
@@ -19793,15 +20899,15 @@ function clamp7(value, min, max) {
 }
 function ResizableImageNodeView(props) {
   const { node, selected, updateAttributes, editor, getPos } = props;
-  const wrapperRef = (0, import_react41.useRef)(null);
-  const imgRef = (0, import_react41.useRef)(null);
-  const [isHovered, setIsHovered] = (0, import_react41.useState)(false);
-  const [isResizing, setIsResizing] = (0, import_react41.useState)(false);
+  const wrapperRef = (0, import_react43.useRef)(null);
+  const imgRef = (0, import_react43.useRef)(null);
+  const [isHovered, setIsHovered] = (0, import_react43.useState)(false);
+  const [isResizing, setIsResizing] = (0, import_react43.useState)(false);
   const widthAttr = toNullableNumber(node.attrs["width"]);
   const heightAttr = toNullableNumber(node.attrs["height"]);
   const textAlign = String(node.attrs["textAlign"] ?? "");
-  const dragStateRef = (0, import_react41.useRef)(null);
-  (0, import_react41.useEffect)(() => {
+  const dragStateRef = (0, import_react43.useRef)(null);
+  (0, import_react43.useEffect)(() => {
     const img = imgRef.current;
     if (!img) return;
     img.style.width = widthAttr ? `${widthAttr}px` : "";
@@ -19895,8 +21001,8 @@ function ResizableImageNodeView(props) {
   const showHandle = selected || isHovered || isResizing;
   const wrapperAlignClass = textAlign === "center" ? "mx-auto" : textAlign === "right" ? "ml-auto" : textAlign === "justify" ? "mx-auto" : "";
   const wrapperWidthClass = "w-fit";
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
-    import_react42.NodeViewWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+    import_react44.NodeViewWrapper,
     {
       as: "div",
       ref: wrapperRef,
@@ -19909,7 +21015,7 @@ function ResizableImageNodeView(props) {
       },
       contentEditable: false,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           "img",
           {
             ref: imgRef,
@@ -19928,7 +21034,7 @@ function ResizableImageNodeView(props) {
             }
           }
         ),
-        showHandle && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        showHandle && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           "div",
           {
             "aria-hidden": "true",
@@ -19974,10 +21080,10 @@ var ResizableImage = import_extension_image.default.extend({
     };
   },
   renderHTML({ HTMLAttributes: HTMLAttributes2 }) {
-    return ["img", (0, import_core3.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes2)];
+    return ["img", (0, import_core4.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes2)];
   },
   addNodeView() {
-    return (0, import_react42.ReactNodeViewRenderer)(ResizableImageNodeView);
+    return (0, import_react44.ReactNodeViewRenderer)(ResizableImageNodeView);
   }
 }).configure({
   allowBase64: true,
@@ -20088,23 +21194,24 @@ function buildUEditorExtensions({
       emptyEditorClass: "is-editor-empty",
       emptyNodeClass: "is-empty"
     }),
-    SlashCommand
+    SlashCommand,
+    EmojiSuggestion
   ];
 }
 
 // ../../components/ui/UEditor/toolbar.tsx
-var import_react45 = __toESM(require("react"), 1);
+var import_react48 = __toESM(require("react"), 1);
 var import_next_intl3 = require("next-intl");
-var import_lucide_react41 = require("lucide-react");
+var import_lucide_react43 = require("lucide-react");
 
 // ../../components/ui/UEditor/colors.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_next_intl = require("next-intl");
-var import_lucide_react39 = require("lucide-react");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_lucide_react40 = require("lucide-react");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var useEditorColors = () => {
   const t = (0, import_next_intl.useTranslations)("UEditor");
-  const textColors = (0, import_react43.useMemo)(
+  const textColors = (0, import_react45.useMemo)(
     () => [
       { name: t("colors.default"), color: "inherit", cssClass: "text-foreground" },
       { name: t("colors.muted"), color: "var(--muted-foreground)", cssClass: "text-muted-foreground" },
@@ -20117,7 +21224,7 @@ var useEditorColors = () => {
     ],
     [t]
   );
-  const highlightColors = (0, import_react43.useMemo)(
+  const highlightColors = (0, import_react45.useMemo)(
     () => [
       { name: t("colors.default"), color: "", cssClass: "" },
       { name: t("colors.muted"), color: "var(--muted)", cssClass: "bg-muted" },
@@ -20138,9 +21245,9 @@ var EditorColorPalette = ({
   currentColor,
   onSelect,
   label
-}) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "p-2", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider px-2", children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-2", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider px-2", children: label }),
+  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
     "button",
     {
       type: "button",
@@ -20153,8 +21260,8 @@ var EditorColorPalette = ({
       style: { backgroundColor: c.color || "transparent" },
       title: c.name,
       children: [
-        c.color === "" && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_lucide_react39.X, { className: "w-4 h-4 text-muted-foreground" }),
-        c.color === "inherit" && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "text-xs font-medium", children: "A" })
+        c.color === "" && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react40.X, { className: "w-4 h-4 text-muted-foreground" }),
+        c.color === "inherit" && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-medium", children: "A" })
       ]
     },
     c.name
@@ -20162,10 +21269,10 @@ var EditorColorPalette = ({
 ] });
 
 // ../../components/ui/UEditor/inputs.tsx
-var import_react44 = require("react");
+var import_react46 = require("react");
 var import_next_intl2 = require("next-intl");
-var import_lucide_react40 = require("lucide-react");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_lucide_react41 = require("lucide-react");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 function normalizeUrl(raw) {
   const url = raw.trim();
   if (!url) return "";
@@ -20179,9 +21286,9 @@ var LinkInput = ({
   initialUrl = ""
 }) => {
   const t = (0, import_next_intl2.useTranslations)("UEditor");
-  const [url, setUrl] = (0, import_react44.useState)(initialUrl);
-  const inputRef = (0, import_react44.useRef)(null);
-  (0, import_react44.useEffect)(() => {
+  const [url, setUrl] = (0, import_react46.useState)(initialUrl);
+  const inputRef = (0, import_react46.useRef)(null);
+  (0, import_react46.useEffect)(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
   }, []);
@@ -20190,8 +21297,8 @@ var LinkInput = ({
     const normalized = normalizeUrl(url);
     if (normalized) onSubmit(normalized);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("form", { onSubmit: handleSubmit, className: "flex items-center gap-2 p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("form", { onSubmit: handleSubmit, className: "flex items-center gap-2 p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "input",
       {
         ref: inputRef,
@@ -20202,16 +21309,16 @@ var LinkInput = ({
         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_runtime78.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_runtime78.jsx)(import_lucide_react40.Check, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("button", { type: "button", onClick: onCancel, className: "p-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react40.X, { className: "w-4 h-4" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime79.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_runtime79.jsx)(import_lucide_react41.Check, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("button", { type: "button", onClick: onCancel, className: "p-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.X, { className: "w-4 h-4" }) })
   ] });
 };
 var ImageInput = ({ onSubmit, onCancel }) => {
   const t = (0, import_next_intl2.useTranslations)("UEditor");
-  const [url, setUrl] = (0, import_react44.useState)("");
-  const [alt, setAlt] = (0, import_react44.useState)("");
-  const inputRef = (0, import_react44.useRef)(null);
-  (0, import_react44.useEffect)(() => {
+  const [url, setUrl] = (0, import_react46.useState)("");
+  const [alt, setAlt] = (0, import_react46.useState)("");
+  const inputRef = (0, import_react46.useRef)(null);
+  (0, import_react46.useEffect)(() => {
     inputRef.current?.focus();
   }, []);
   const handleSubmit = (e) => {
@@ -20220,10 +21327,10 @@ var ImageInput = ({ onSubmit, onCancel }) => {
       onSubmit(url, alt);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("form", { onSubmit: handleSubmit, className: "p-3 space-y-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.urlLabel") }),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("form", { onSubmit: handleSubmit, className: "p-3 space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.urlLabel") }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "input",
         {
           ref: inputRef,
@@ -20235,9 +21342,9 @@ var ImageInput = ({ onSubmit, onCancel }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.altLabel") }),
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("label", { className: "text-xs font-medium text-muted-foreground", children: t("imageInput.altLabel") }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "input",
         {
           type: "text",
@@ -20248,8 +21355,8 @@ var ImageInput = ({ onSubmit, onCancel }) => {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
         "button",
         {
           type: "submit",
@@ -20258,13 +21365,195 @@ var ImageInput = ({ onSubmit, onCancel }) => {
           children: t("imageInput.addBtn")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime78.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") })
+      /* @__PURE__ */ (0, import_jsx_runtime79.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/emoji-picker.tsx
+var import_react47 = require("react");
+var import_lucide_react42 = require("lucide-react");
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var CATEGORY_ICONS = {
+  "smileys_people": import_lucide_react42.Smile,
+  "animals_nature": import_lucide_react42.Leaf,
+  "food_drink": import_lucide_react42.Utensils,
+  "activity": import_lucide_react42.Dumbbell,
+  "objects": import_lucide_react42.Lightbulb,
+  "symbols": import_lucide_react42.Hash,
+  "flags": import_lucide_react42.Flag
+};
+var EmojiPicker = ({ onSelect, onClose }) => {
+  const [search, setSearch] = (0, import_react47.useState)("");
+  const [activeCategory, setActiveCategory] = (0, import_react47.useState)(EMOJI_LIST[0]?.id || "");
+  const scrollContainerRef = (0, import_react47.useRef)(null);
+  const categoryRefs = (0, import_react47.useRef)({});
+  const isUserScrolling = (0, import_react47.useRef)(false);
+  const filteredCategories = (0, import_react47.useMemo)(() => {
+    if (!search.trim()) return EMOJI_LIST;
+    const query = search.toLowerCase();
+    return EMOJI_LIST.map((category) => ({
+      ...category,
+      emojis: category.emojis.filter(
+        (emoji) => emoji.name.toLowerCase().includes(query) || emoji.emoji.includes(search)
+      )
+    })).filter((category) => category.emojis.length > 0);
+  }, [search]);
+  const handleEmojiClick = (emoji) => {
+    onSelect(emoji);
+    setSearch("");
+  };
+  (0, import_react47.useEffect)(() => {
+    if (search) return;
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      if (!isUserScrolling.current) return;
+      const scrollTop = container.scrollTop;
+      const containerHeight = container.clientHeight;
+      let maxVisibility = 0;
+      let mostVisibleCategory = EMOJI_LIST[0]?.id || "";
+      EMOJI_LIST.forEach((category) => {
+        const element = categoryRefs.current[category.id];
+        if (!element) return;
+        const rect = element.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+        const visibleTop = Math.max(rect.top, containerRect.top);
+        const visibleBottom = Math.min(rect.bottom, containerRect.bottom);
+        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
+        if (visibleHeight > maxVisibility) {
+          maxVisibility = visibleHeight;
+          mostVisibleCategory = category.id;
+        }
+      });
+      if (mostVisibleCategory !== activeCategory) {
+        setActiveCategory(mostVisibleCategory);
+      }
+    };
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [search, activeCategory]);
+  const handleCategoryClick = (categoryId) => {
+    const element = categoryRefs.current[categoryId];
+    if (!element || !scrollContainerRef.current) return;
+    isUserScrolling.current = false;
+    setActiveCategory(categoryId);
+    element.scrollIntoView({ behavior: "smooth", block: "start" });
+    setTimeout(() => {
+      isUserScrolling.current = true;
+    }, 500);
+  };
+  (0, import_react47.useEffect)(() => {
+    isUserScrolling.current = true;
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "w-96 bg-card border border-border rounded-2xl shadow-xl overflow-hidden flex flex-col max-h-128", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "p-3 border-b bg-muted/30 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        "input",
+        {
+          type: "text",
+          placeholder: "T\xECm ki\u1EBFm bi\u1EC3u t\u01B0\u1EE3ng c\u1EA3m x\xFAc",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          className: cn(
+            "w-full pl-9 pr-9 py-2 rounded-lg",
+            "bg-background border border-border",
+            "text-sm placeholder:text-muted-foreground",
+            "focus:outline-none focus:ring-2 focus:ring-primary/20"
+          )
+        }
+      ),
+      search && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        "button",
+        {
+          onClick: () => setSearch(""),
+          className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.X, { className: "w-4 h-4" })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      "div",
+      {
+        ref: scrollContainerRef,
+        className: "overflow-y-auto px-3 py-2 shrink",
+        style: { height: "20rem" },
+        children: search ? (
+          // Search Results
+          filteredCategories.length > 0 ? filteredCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "mb-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2 sticky top-0 bg-card py-1", children: category.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+              "button",
+              {
+                onClick: () => handleEmojiClick(emoji.emoji),
+                className: cn(
+                  "w-9 h-9 flex items-center justify-center rounded-lg",
+                  "text-2xl hover:bg-accent transition-colors",
+                  "focus:outline-none focus:ring-2 focus:ring-primary/20"
+                ),
+                title: emoji.name.replace(/_/g, " "),
+                children: emoji.emoji
+              },
+              emoji.name
+            )) })
+          ] }, category.id)) : /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "text-4xl mb-2", children: "\u{1F50D}" }),
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "text-sm font-medium text-muted-foreground", children: "Kh\xF4ng t\xECm th\u1EA5y emoji" }),
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "text-xs text-muted-foreground mt-1", children: "Th\u1EED t\u1EEB kh\xF3a kh\xE1c" })
+          ] })
+        ) : (
+          // All Categories - Messenger Style
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "space-y-4", children: EMOJI_LIST.map((category) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+            "div",
+            {
+              ref: (el) => {
+                categoryRefs.current[category.id] = el;
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2 sticky top-0 bg-card py-1 z-10", children: category.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                  "button",
+                  {
+                    onClick: () => handleEmojiClick(emoji.emoji),
+                    className: cn(
+                      "w-9 h-9 flex items-center justify-center rounded-lg",
+                      "text-2xl hover:bg-accent transition-colors",
+                      "focus:outline-none focus:ring-2 focus:ring-primary/20"
+                    ),
+                    title: emoji.name.replace(/_/g, " "),
+                    children: emoji.emoji
+                  },
+                  emoji.name
+                )) })
+              ]
+            },
+            category.id
+          )) })
+        )
+      }
+    ),
+    !search && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "flex items-center justify-around px-2 py-2 border-t bg-muted/30 shrink-0", children: EMOJI_LIST.map((category) => {
+      const IconComponent = CATEGORY_ICONS[category.id] || import_lucide_react42.Smile;
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        "button",
+        {
+          onClick: () => handleCategoryClick(category.id),
+          className: cn(
+            "p-2 rounded-lg transition-colors",
+            activeCategory === category.id ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground hover:bg-accent"
+          ),
+          title: category.name,
+          children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(IconComponent, { className: "w-5 h-5" })
+        },
+        category.id
+      );
+    }) })
+  ] });
+};
+
 // ../../components/ui/UEditor/toolbar.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 function fileToDataUrl2(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -20273,8 +21562,8 @@ function fileToDataUrl2(file) {
     reader.readAsDataURL(file);
   });
 }
-var ToolbarButton = import_react45.default.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
-  const button = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+var ToolbarButton = import_react48.default.forwardRef(({ onClick, onMouseDown, active, disabled, children, title, className }, ref) => {
+  const button = /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "button",
     {
       ref,
@@ -20297,12 +21586,12 @@ var ToolbarButton = import_react45.default.forwardRef(({ onClick, onMouseDown, a
     }
   );
   if (title) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Tooltip, { content: title, placement: "top", delay: { open: 200, close: 0 }, children: button });
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Tooltip, { content: title, placement: "top", delay: { open: 200, close: 0 }, children: button });
   }
   return button;
 });
 ToolbarButton.displayName = "ToolbarButton";
-var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" });
+var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" });
 var EditorToolbar = ({
   editor,
   variant,
@@ -20311,10 +21600,10 @@ var EditorToolbar = ({
 }) => {
   const t = (0, import_next_intl3.useTranslations)("UEditor");
   const { textColors, highlightColors } = useEditorColors();
-  const [showImageInput, setShowImageInput] = (0, import_react45.useState)(false);
-  const fileInputRef = (0, import_react45.useRef)(null);
-  const [isUploadingImage, setIsUploadingImage] = (0, import_react45.useState)(false);
-  const [imageUploadError, setImageUploadError] = (0, import_react45.useState)(null);
+  const [showImageInput, setShowImageInput] = (0, import_react48.useState)(false);
+  const fileInputRef = (0, import_react48.useRef)(null);
+  const [isUploadingImage, setIsUploadingImage] = (0, import_react48.useState)(false);
+  const [imageUploadError, setImageUploadError] = (0, import_react48.useState)(null);
   const insertImageFiles = async (files) => {
     if (files.length === 0) return;
     setIsUploadingImage(true);
@@ -20333,63 +21622,63 @@ var EditorToolbar = ({
     setIsUploadingImage(false);
   };
   if (variant === "minimal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "flex items-center gap-1 p-2 border-b bg-muted/30", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Bold, { className: "w-4 h-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Italic, { className: "w-4 h-4" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-1 p-2 border-b bg-muted/30", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Bold, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Italic, { className: "w-4 h-4" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         ToolbarButton,
         {
           onClick: () => editor.chain().focus().toggleBulletList().run(),
           active: editor.isActive("bulletList"),
           title: t("toolbar.bulletList"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.List, { className: "w-4 h-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.List, { className: "w-4 h-4" })
         }
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.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_runtime79.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.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_runtime81.jsxs)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(ToolbarButton, { onClick: () => {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Type, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.ChevronDown, { className: "w-3 h-3" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Type, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.ChevronDown, { className: "w-3 h-3" })
         ] }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Type,
+              icon: import_lucide_react43.Type,
               label: t("toolbar.normal"),
               onClick: () => editor.chain().focus().setParagraph().run(),
               active: editor.isActive("paragraph")
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Heading1,
+              icon: import_lucide_react43.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_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Heading2,
+              icon: import_lucide_react43.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_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Heading3,
+              icon: import_lucide_react43.Heading3,
               label: t("toolbar.heading3"),
               onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
               active: editor.isActive("heading", { level: 3 }),
@@ -20399,30 +21688,30 @@ var EditorToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Bold, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Italic, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Bold, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Italic, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       ToolbarButton,
       {
         onClick: () => editor.chain().focus().toggleUnderline().run(),
         active: editor.isActive("underline"),
         title: t("toolbar.underline"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Underline, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Underline, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Strikethrough, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Code, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Strikethrough, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Code, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(ToolbarButton, { onClick: () => {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("colors.textColor"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Palette, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.ChevronDown, { className: "w-3 h-3" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Palette, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.ChevronDown, { className: "w-3 h-3" })
         ] }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           EditorColorPalette,
           {
             colors: textColors,
@@ -20439,15 +21728,15 @@ var EditorToolbar = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(ToolbarButton, { onClick: () => {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, active: editor.isActive("highlight"), title: t("colors.highlight"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Highlighter, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.ChevronDown, { className: "w-3 h-3" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Highlighter, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.ChevronDown, { className: "w-3 h-3" })
         ] }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           EditorColorPalette,
           {
             colors: highlightColors,
@@ -20464,47 +21753,63 @@ var EditorToolbar = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(ToolbarButton, { onClick: () => {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.emoji"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Smile, { className: "w-4 h-4" }) }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          EmojiPicker,
+          {
+            onSelect: (emoji) => {
+              editor.chain().focus().insertContent(emoji).run();
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.alignment"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.AlignLeft, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.ChevronDown, { className: "w-3 h-3" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.AlignLeft, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.ChevronDown, { className: "w-3 h-3" })
         ] }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.AlignLeft,
+              icon: import_lucide_react43.AlignLeft,
               label: t("toolbar.alignLeft"),
               onClick: () => editor.chain().focus().setTextAlign("left").run(),
               active: editor.isActive({ textAlign: "left" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.AlignCenter,
+              icon: import_lucide_react43.AlignCenter,
               label: t("toolbar.alignCenter"),
               onClick: () => editor.chain().focus().setTextAlign("center").run(),
               active: editor.isActive({ textAlign: "center" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.AlignRight,
+              icon: import_lucide_react43.AlignRight,
               label: t("toolbar.alignRight"),
               onClick: () => editor.chain().focus().setTextAlign("right").run(),
               active: editor.isActive({ textAlign: "right" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.AlignJustify,
+              icon: import_lucide_react43.AlignJustify,
               label: t("toolbar.justify"),
               onClick: () => editor.chain().focus().setTextAlign("justify").run(),
               active: editor.isActive({ textAlign: "justify" })
@@ -20513,40 +21818,40 @@ var EditorToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(ToolbarButton, { onClick: () => {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.bulletList"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.List, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.ChevronDown, { className: "w-3 h-3" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.List, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.ChevronDown, { className: "w-3 h-3" })
         ] }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.List,
+              icon: import_lucide_react43.List,
               label: t("toolbar.bulletList"),
               onClick: () => editor.chain().focus().toggleBulletList().run(),
               active: editor.isActive("bulletList"),
               shortcut: "Ctrl+Shift+8"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.ListOrdered,
+              icon: import_lucide_react43.ListOrdered,
               label: t("toolbar.orderedList"),
               onClick: () => editor.chain().focus().toggleOrderedList().run(),
               active: editor.isActive("orderedList"),
               shortcut: "Ctrl+Shift+7"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.ListTodo,
+              icon: import_lucide_react43.ListTodo,
               label: t("toolbar.taskList"),
               onClick: () => editor.chain().focus().toggleTaskList().run(),
               active: editor.isActive("taskList"),
@@ -20556,29 +21861,29 @@ var EditorToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(ToolbarButton, { onClick: () => {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.quote"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Quote, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.ChevronDown, { className: "w-3 h-3" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Quote, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.ChevronDown, { className: "w-3 h-3" })
         ] }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Quote,
+              icon: import_lucide_react43.Quote,
               label: t("toolbar.quote"),
               onClick: () => editor.chain().focus().toggleBlockquote().run(),
               active: editor.isActive("blockquote"),
               shortcut: "Ctrl+Shift+B"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.FileCode,
+              icon: import_lucide_react43.FileCode,
               label: t("toolbar.codeBlock"),
               onClick: () => editor.chain().focus().toggleCodeBlock().run(),
               active: editor.isActive("codeBlock"),
@@ -20588,15 +21893,15 @@ var EditorToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(ToolbarButton, { onClick: () => {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.image"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Image, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.ChevronDown, { className: "w-3 h-3" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Image, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.ChevronDown, { className: "w-3 h-3" })
         ] }),
-        children: showImageInput ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        children: showImageInput ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           ImageInput,
           {
             onSubmit: (url, alt) => {
@@ -20605,19 +21910,19 @@ var EditorToolbar = ({
             },
             onCancel: () => setShowImageInput(false)
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DropdownMenuItem, { icon: import_lucide_react41.Link, label: t("imageInput.addFromUrl"), onClick: () => setShowImageInput(true) }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DropdownMenuItem, { icon: import_lucide_react43.Link, label: t("imageInput.addFromUrl"), onClick: () => setShowImageInput(true) }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Upload,
+              icon: import_lucide_react43.Upload,
               label: isUploadingImage ? t("imageInput.uploading") : t("imageInput.uploadTab"),
               disabled: isUploadingImage,
               onClick: () => fileInputRef.current?.click()
             }
           ),
-          imageUploadError && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DropdownMenuItem, { label: imageUploadError, disabled: true, destructive: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          imageUploadError && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DropdownMenuItem, { label: imageUploadError, disabled: true, destructive: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -20635,83 +21940,83 @@ var EditorToolbar = ({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(ToolbarButton, { onClick: () => {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("toolbar.table"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Table, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.ChevronDown, { className: "w-3 h-3" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Table, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.ChevronDown, { className: "w-3 h-3" })
         ] }),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Table,
+              icon: import_lucide_react43.Table,
               label: t("tableMenu.insert3x3"),
               onClick: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "my-1 border-t" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.ArrowDown,
+              icon: import_lucide_react43.ArrowDown,
               label: t("tableMenu.addColumnBefore"),
               onClick: () => editor.chain().focus().addColumnBefore().run(),
               disabled: !editor.can().addColumnBefore()
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.ArrowDown,
+              icon: import_lucide_react43.ArrowDown,
               label: t("tableMenu.addColumnAfter"),
               onClick: () => editor.chain().focus().addColumnAfter().run(),
               disabled: !editor.can().addColumnAfter()
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.ArrowRight,
+              icon: import_lucide_react43.ArrowRight,
               label: t("tableMenu.addRowBefore"),
               onClick: () => editor.chain().focus().addRowBefore().run(),
               disabled: !editor.can().addRowBefore()
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.ArrowRight,
+              icon: import_lucide_react43.ArrowRight,
               label: t("tableMenu.addRowAfter"),
               onClick: () => editor.chain().focus().addRowAfter().run(),
               disabled: !editor.can().addRowAfter()
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "my-1 border-t" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "my-1 border-t" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Trash2,
+              icon: import_lucide_react43.Trash2,
               label: t("tableMenu.deleteColumn"),
               onClick: () => editor.chain().focus().deleteColumn().run(),
               disabled: !editor.can().deleteColumn()
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Trash2,
+              icon: import_lucide_react43.Trash2,
               label: t("tableMenu.deleteRow"),
               onClick: () => editor.chain().focus().deleteRow().run(),
               disabled: !editor.can().deleteRow()
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              icon: import_lucide_react41.Trash2,
+              icon: import_lucide_react43.Trash2,
               label: t("tableMenu.deleteTable"),
               onClick: () => editor.chain().focus().deleteTable().run(),
               disabled: !editor.can().deleteTable()
@@ -20720,105 +22025,105 @@ var EditorToolbar = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       ToolbarButton,
       {
         onClick: () => editor.chain().focus().toggleSubscript().run(),
         active: editor.isActive("subscript"),
         title: t("toolbar.subscript"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Subscript, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Subscript, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       ToolbarButton,
       {
         onClick: () => editor.chain().focus().toggleSuperscript().run(),
         active: editor.isActive("superscript"),
         title: t("toolbar.superscript"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Superscript, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Superscript, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Undo, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_lucide_react41.Redo, { className: "w-4 h-4" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Undo, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react43.Redo, { className: "w-4 h-4" }) })
   ] });
 };
 
 // ../../components/ui/UEditor/menus.tsx
-var import_react46 = require("react");
+var import_react49 = require("react");
 var import_react_dom9 = require("react-dom");
 var import_next_intl4 = require("next-intl");
-var import_lucide_react42 = require("lucide-react");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_lucide_react44 = require("lucide-react");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
   const t = (0, import_next_intl4.useTranslations)("UEditor");
-  const [selectedIndex, setSelectedIndex] = (0, import_react46.useState)(0);
-  const menuRef = (0, import_react46.useRef)(null);
-  const allCommands = (0, import_react46.useMemo)(
+  const [selectedIndex, setSelectedIndex] = (0, import_react49.useState)(0);
+  const menuRef = (0, import_react49.useRef)(null);
+  const allCommands = (0, import_react49.useMemo)(
     () => [
       {
-        icon: import_lucide_react42.Type,
+        icon: import_lucide_react44.Type,
         label: t("slashCommand.text"),
         description: t("slashCommand.textDesc"),
         action: () => editor.chain().focus().setParagraph().run()
       },
       {
-        icon: import_lucide_react42.Heading1,
+        icon: import_lucide_react44.Heading1,
         label: t("slashCommand.heading1"),
         description: t("slashCommand.heading1Desc"),
         action: () => editor.chain().focus().toggleHeading({ level: 1 }).run()
       },
       {
-        icon: import_lucide_react42.Heading2,
+        icon: import_lucide_react44.Heading2,
         label: t("slashCommand.heading2"),
         description: t("slashCommand.heading2Desc"),
         action: () => editor.chain().focus().toggleHeading({ level: 2 }).run()
       },
       {
-        icon: import_lucide_react42.Heading3,
+        icon: import_lucide_react44.Heading3,
         label: t("slashCommand.heading3"),
         description: t("slashCommand.heading3Desc"),
         action: () => editor.chain().focus().toggleHeading({ level: 3 }).run()
       },
       {
-        icon: import_lucide_react42.List,
+        icon: import_lucide_react44.List,
         label: t("slashCommand.bulletList"),
         description: t("slashCommand.bulletListDesc"),
         action: () => editor.chain().focus().toggleBulletList().run()
       },
       {
-        icon: import_lucide_react42.ListOrdered,
+        icon: import_lucide_react44.ListOrdered,
         label: t("slashCommand.orderedList"),
         description: t("slashCommand.orderedListDesc"),
         action: () => editor.chain().focus().toggleOrderedList().run()
       },
       {
-        icon: import_lucide_react42.ListTodo,
+        icon: import_lucide_react44.ListTodo,
         label: t("slashCommand.todoList"),
         description: t("slashCommand.todoListDesc"),
         action: () => editor.chain().focus().toggleTaskList().run()
       },
       {
-        icon: import_lucide_react42.Quote,
+        icon: import_lucide_react44.Quote,
         label: t("slashCommand.quote"),
         description: t("slashCommand.quoteDesc"),
         action: () => editor.chain().focus().toggleBlockquote().run()
       },
       {
-        icon: import_lucide_react42.FileCode,
+        icon: import_lucide_react44.FileCode,
         label: t("slashCommand.codeBlock"),
         description: t("slashCommand.codeBlockDesc"),
         action: () => editor.chain().focus().toggleCodeBlock().run()
       },
       {
-        icon: import_lucide_react42.Minus,
+        icon: import_lucide_react44.Minus,
         label: t("slashCommand.divider"),
         description: t("slashCommand.dividerDesc"),
         action: () => editor.chain().focus().setHorizontalRule().run()
       },
       {
-        icon: import_lucide_react42.Table,
+        icon: import_lucide_react44.Table,
         label: t("slashCommand.table"),
         description: t("slashCommand.tableDesc"),
         action: () => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
@@ -20826,19 +22131,19 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     ],
     [editor, t]
   );
-  const commands = (0, import_react46.useMemo)(() => {
+  const commands = (0, import_react49.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_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     setSelectedIndex(0);
   }, [filterText]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const selectedElement = menuRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
   }, [selectedIndex]);
-  const selectCommand = (0, import_react46.useCallback)(
+  const selectCommand = (0, import_react49.useCallback)(
     (index) => {
       const command = commands[index];
       if (command) {
@@ -20848,7 +22153,7 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     },
     [commands, onClose]
   );
-  (0, import_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (commands.length === 0) return;
       if (e.key === "ArrowDown") {
@@ -20869,11 +22174,11 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [commands, selectedIndex, selectCommand, onClose]);
   if (commands.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "w-72 p-4 text-center text-muted-foreground text-sm", children: t("slashCommand.noResults") });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "w-72 p-4 text-center text-muted-foreground text-sm", children: t("slashCommand.noResults") });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { ref: menuRef, className: "w-72 max-h-80 overflow-y-auto", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("slashCommand.basicBlocks") }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "p-1", children: commands.map((cmd, index) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { ref: menuRef, className: "w-72 max-h-80 overflow-y-auto", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("slashCommand.basicBlocks") }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "p-1", children: commands.map((cmd, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
       "button",
       {
         type: "button",
@@ -20886,19 +22191,19 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
           selectedIndex === index ? "bg-accent" : "hover:bg-accent/50"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime82.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_runtime80.jsx)(cmd.icon, { className: cn("w-5 h-5", selectedIndex === index ? "text-primary" : "text-muted-foreground") })
+              children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(cmd.icon, { className: cn("w-5 h-5", selectedIndex === index ? "text-primary" : "text-muted-foreground") })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "text-left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: cn("text-sm font-medium", selectedIndex === index && "text-primary"), children: cmd.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "text-xs text-muted-foreground", children: cmd.description })
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: cn("text-sm font-medium", selectedIndex === index && "text-primary"), children: cmd.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "text-xs text-muted-foreground", children: cmd.description })
           ] })
         ]
       },
@@ -20908,19 +22213,19 @@ var SlashCommandMenu = ({ editor, onClose, filterText = "" }) => {
 };
 var FloatingMenuContent = ({ editor }) => {
   const t = (0, import_next_intl4.useTranslations)("UEditor");
-  const [showCommands, setShowCommands] = (0, import_react46.useState)(false);
+  const [showCommands, setShowCommands] = (0, import_react49.useState)(false);
   if (showCommands) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(SlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(SlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.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_runtime80.jsx)(import_lucide_react42.Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "text-sm text-muted-foreground group-hover:text-foreground", children: t("floatingMenu.addBlock") })
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-foreground" }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm text-muted-foreground group-hover:text-foreground", children: t("floatingMenu.addBlock") })
       ]
     }
   );
@@ -20931,12 +22236,12 @@ var BubbleMenuContent = ({
 }) => {
   const t = (0, import_next_intl4.useTranslations)("UEditor");
   const { textColors, highlightColors } = useEditorColors();
-  const [showLinkInput, setShowLinkInput] = (0, import_react46.useState)(false);
-  const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react46.useState)(false);
-  (0, import_react46.useEffect)(() => {
+  const [showLinkInput, setShowLinkInput] = (0, import_react49.useState)(false);
+  const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react49.useState)(false);
+  (0, import_react49.useEffect)(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (!showLinkInput) return;
     const close = () => setShowLinkInput(false);
     editor.on("selectionUpdate", close);
@@ -20947,7 +22252,7 @@ var BubbleMenuContent = ({
     };
   }, [editor, showLinkInput]);
   if (showLinkInput) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       LinkInput,
       {
         initialUrl: editor.getAttributes("link").href || "",
@@ -20964,8 +22269,8 @@ var BubbleMenuContent = ({
     );
   }
   if (showEditorColorPalette) {
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "w-48", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "w-48", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         EditorColorPalette,
         {
           colors: textColors,
@@ -20980,8 +22285,8 @@ var BubbleMenuContent = ({
           label: t("colors.textColor")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "border-t my-1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "border-t my-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         EditorColorPalette,
         {
           colors: highlightColors,
@@ -20996,7 +22301,7 @@ var BubbleMenuContent = ({
           label: t("colors.highlight")
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "p-2 border-t", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "p-2 border-t", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "button",
         {
           type: "button",
@@ -21007,22 +22312,22 @@ var BubbleMenuContent = ({
       ) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "flex items-center gap-0.5 p-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Bold, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Italic, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex items-center gap-0.5 p-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Bold, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Italic, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       ToolbarButton,
       {
         onClick: () => editor.chain().focus().toggleUnderline().run(),
         active: editor.isActive("underline"),
         title: t("toolbar.underline"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Underline, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Underline, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Strikethrough, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Code, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Strikethrough, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Code, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       ToolbarButton,
       {
         onMouseDown: () => {
@@ -21033,41 +22338,41 @@ var BubbleMenuContent = ({
         },
         active: editor.isActive("link"),
         title: t("toolbar.link"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Link, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Link, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ToolbarButton, { onClick: () => setShowEditorColorPalette(true), title: t("colors.textColor"), children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Palette, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => setShowEditorColorPalette(true), title: t("colors.textColor"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Palette, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       ToolbarButton,
       {
         onClick: () => editor.chain().focus().toggleSubscript().run(),
         active: editor.isActive("subscript"),
         title: t("toolbar.subscript"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Subscript, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Subscript, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       ToolbarButton,
       {
         onClick: () => editor.chain().focus().toggleSuperscript().run(),
         active: editor.isActive("superscript"),
         title: t("toolbar.superscript"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_lucide_react42.Superscript, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react44.Superscript, { className: "w-4 h-4" })
       }
     )
   ] });
 };
 var CustomBubbleMenu = ({ editor }) => {
-  const [isVisible, setIsVisible] = (0, import_react46.useState)(false);
-  const [position, setPosition] = (0, import_react46.useState)({ top: 0, left: 0 });
-  const menuRef = (0, import_react46.useRef)(null);
-  const keepOpenRef = (0, import_react46.useRef)(false);
-  const setKeepOpen = (0, import_react46.useCallback)((next) => {
+  const [isVisible, setIsVisible] = (0, import_react49.useState)(false);
+  const [position, setPosition] = (0, import_react49.useState)({ top: 0, left: 0 });
+  const menuRef = (0, import_react49.useRef)(null);
+  const keepOpenRef = (0, import_react49.useRef)(false);
+  const setKeepOpen = (0, import_react49.useCallback)((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
   }, []);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const updatePosition = () => {
       const { state, view } = editor;
       const { from, to, empty } = state.selection;
@@ -21096,7 +22401,7 @@ var CustomBubbleMenu = ({ editor }) => {
   }, [editor]);
   if (!isVisible) return null;
   return (0, import_react_dom9.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
         ref: menuRef,
@@ -21107,7 +22412,7 @@ var CustomBubbleMenu = ({ editor }) => {
           transform: "translate(-50%, -100%)"
         },
         onMouseDown: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           BubbleMenuContent,
           {
             editor,
@@ -21120,9 +22425,9 @@ var CustomBubbleMenu = ({ editor }) => {
   );
 };
 var CustomFloatingMenu = ({ editor }) => {
-  const [isVisible, setIsVisible] = (0, import_react46.useState)(false);
-  const [position, setPosition] = (0, import_react46.useState)({ top: 0, left: 0 });
-  (0, import_react46.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react49.useState)(false);
+  const [position, setPosition] = (0, import_react49.useState)({ top: 0, left: 0 });
+  (0, import_react49.useEffect)(() => {
     const updatePosition = () => {
       const { state, view } = editor;
       const { $from, empty } = state.selection;
@@ -21149,7 +22454,7 @@ var CustomFloatingMenu = ({ editor }) => {
   }, [editor]);
   if (!isVisible) return null;
   return (0, import_react_dom9.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime82.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",
@@ -21159,7 +22464,7 @@ var CustomFloatingMenu = ({ editor }) => {
           transform: "translate(-50%, -100%)"
         },
         onMouseDown: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FloatingMenuContent, { editor })
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(FloatingMenuContent, { editor })
       }
     ),
     document.body
@@ -21168,25 +22473,25 @@ var CustomFloatingMenu = ({ editor }) => {
 
 // ../../components/ui/UEditor/CharacterCount.tsx
 var import_next_intl5 = require("next-intl");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime83 = 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_runtime81.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_runtime81.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime83.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_runtime83.jsxs)("span", { children: [
       wordCount,
       " ",
       t("words")
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("span", { children: [
       characterCount,
       " ",
       t("characters")
     ] }),
-    maxCharacters && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: cn(percentage > 90 && "text-destructive", percentage > 100 && "font-bold"), children: [
+    maxCharacters && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("span", { className: cn(percentage > 90 && "text-destructive", percentage > 100 && "font-bold"), children: [
       characterCount,
       "/",
       maxCharacters
@@ -21195,7 +22500,7 @@ var CharacterCountDisplay = ({ editor, maxCharacters }) => {
 };
 
 // ../../components/ui/UEditor/UEditor.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var UEditor = ({
   content = "",
   onChange,
@@ -21218,11 +22523,11 @@ var UEditor = ({
 }) => {
   const t = (0, import_next_intl6.useTranslations)("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const extensions = (0, import_react47.useMemo)(
+  const extensions = (0, import_react50.useMemo)(
     () => buildUEditorExtensions({ placeholder: effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable }),
     [effectivePlaceholder, maxCharacters, uploadImage, imageInsertMode, editable]
   );
-  const editor = (0, import_react48.useEditor)({
+  const editor = (0, import_react51.useEditor)({
     immediatelyRender: false,
     extensions,
     content,
@@ -21327,7 +22632,7 @@ var UEditor = ({
       onJsonChange?.(editor2.getJSON());
     }
   });
-  (0, import_react47.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     if (editor && content !== editor.getHTML()) {
       if (editor.isEmpty && content) {
         editor.commands.setContent(content);
@@ -21335,7 +22640,7 @@ var UEditor = ({
     }
   }, [content, editor]);
   if (!editor) {
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       "div",
       {
         className: cn("w-full rounded-lg border bg-background flex items-center justify-center text-muted-foreground", className),
@@ -21344,7 +22649,7 @@ var UEditor = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "div",
     {
       className: cn(
@@ -21356,11 +22661,11 @@ var UEditor = ({
         className
       ),
       children: [
-        editable && showToolbar && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(EditorToolbar, { editor, variant, uploadImage, imageInsertMode }),
-        editable && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CustomBubbleMenu, { editor }),
-        editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CustomFloatingMenu, { editor }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          import_react48.EditorContent,
+        editable && showToolbar && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(EditorToolbar, { editor, variant, uploadImage, imageInsertMode }),
+        editable && showBubbleMenu && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CustomBubbleMenu, { editor }),
+        editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CustomFloatingMenu, { editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+          import_react51.EditorContent,
           {
             editor,
             className: "flex-1 overflow-y-auto",
@@ -21370,7 +22675,7 @@ var UEditor = ({
             }
           }
         ),
-        showCharacterCount && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CharacterCountDisplay, { editor, maxCharacters })
+        showCharacterCount && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CharacterCountDisplay, { editor, maxCharacters })
       ]
     }
   );