@underverse-ui/underverse 0.2.84 → 0.2.86

package/dist/index.cjs

@@ -7757,20 +7757,21 @@ var DateTimePicker = ({
   ] });
 };
 
-// ../../components/ui/CalendarTimeline.tsx
-var React27 = __toESM(require("react"), 1);
+// ../../components/ui/CalendarTimeline/CalendarTimeline.tsx
+var React28 = __toESM(require("react"), 1);
 var import_lucide_react18 = require("lucide-react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+
+// ../../components/ui/CalendarTimeline/date.ts
 function toDate2(input) {
   return input instanceof Date ? input : new Date(input);
 }
-var localeToBCP47 = (l) => {
-  if (l === "vi") return "vi-VN";
-  if (l === "en") return "en-US";
-  if (l === "ko") return "ko-KR";
-  if (l === "ja") return "ja-JP";
-  return l;
-};
+function localeToBCP47(locale) {
+  if (locale === "vi") return "vi-VN";
+  if (locale === "en") return "en-US";
+  if (locale === "ko") return "ko-KR";
+  if (locale === "ja") return "ja-JP";
+  return locale;
+}
 var dtfCache = /* @__PURE__ */ new Map();
 function getDtf(locale, timeZone, options) {
   const key = `${locale}__${timeZone}__${JSON.stringify(options)}`;
@@ -7840,6 +7841,8 @@ function startOfZonedWeek(date, weekStartsOn, timeZone) {
   const diff = (weekday - weekStartsOn + 7) % 7;
   return new Date(zonedTimeToUtcMs({ year: p.year, month: p.month, day: p.day - diff, hour: 0, minute: 0, second: 0 }, timeZone));
 }
+
+// ../../components/ui/CalendarTimeline/layout.ts
 function clamp3(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
@@ -7884,6 +7887,80 @@ function intervalPack(items) {
   }
   return { packed: out, laneCount: lanes.length };
 }
+
+// ../../components/ui/CalendarTimeline/hooks.ts
+var React27 = __toESM(require("react"), 1);
+function useHorizontalScrollSync(args) {
+  const { bodyRef, headerRef } = args;
+  React27.useEffect(() => {
+    const body = bodyRef.current;
+    const header = headerRef.current;
+    if (!body || !header) return;
+    let raf = 0;
+    let syncing = false;
+    const syncHeader = () => {
+      if (syncing) return;
+      syncing = true;
+      header.scrollLeft = body.scrollLeft;
+      syncing = false;
+    };
+    const syncBody = () => {
+      if (syncing) return;
+      syncing = true;
+      body.scrollLeft = header.scrollLeft;
+      syncing = false;
+    };
+    const onBodyScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(syncHeader);
+    };
+    const onHeaderScroll = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(syncBody);
+    };
+    body.addEventListener("scroll", onBodyScroll, { passive: true });
+    header.addEventListener("scroll", onHeaderScroll, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      body.removeEventListener("scroll", onBodyScroll);
+      header.removeEventListener("scroll", onHeaderScroll);
+    };
+  }, [bodyRef, headerRef]);
+}
+function useVirtualRows(args) {
+  const { enabled, overscan, rowHeight, itemCount, scrollRef } = args;
+  const [viewportHeight, setViewportHeight] = React27.useState(0);
+  const [scrollTop, setScrollTop] = React27.useState(0);
+  React27.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const update = () => setViewportHeight(el.clientHeight);
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [scrollRef]);
+  React27.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onScroll = () => setScrollTop(el.scrollTop);
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [scrollRef]);
+  return React27.useMemo(() => {
+    if (!enabled) {
+      return { startIndex: 0, endIndex: itemCount, topSpacer: 0, bottomSpacer: 0 };
+    }
+    const startIndex = clamp3(Math.floor(scrollTop / rowHeight) - overscan, 0, itemCount);
+    const endIndex = clamp3(Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan, 0, itemCount);
+    const topSpacer = startIndex * rowHeight;
+    const bottomSpacer = (itemCount - endIndex) * rowHeight;
+    return { startIndex, endIndex, topSpacer, bottomSpacer };
+  }, [enabled, itemCount, overscan, rowHeight, scrollTop, viewportHeight]);
+}
+
+// ../../components/ui/CalendarTimeline/CalendarTimeline.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function defaultMonthTitle(date, locale, timeZone) {
   return getDtf(locale, timeZone, { month: "long", year: "numeric" }).format(date);
 }
@@ -7893,9 +7970,9 @@ function defaultSlotHeader(slotStart, view, locale, timeZone) {
   }
   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 leading-tight", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-[11px] text-muted-foreground", children: weekday }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-[12px] font-medium", children: day })
+  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: weekday }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-sm font-semibold text-foreground", children: day })
   ] });
 }
 function defaultEventTime(args) {
@@ -7910,6 +7987,7 @@ function defaultEventTime(args) {
 function CalendarTimeline({
   resources,
   events,
+  size = "md",
   view,
   defaultView = "month",
   onViewChange,
@@ -7925,9 +8003,9 @@ function CalendarTimeline({
   groupCollapsed,
   defaultGroupCollapsed,
   onGroupCollapsedChange,
-  resourceColumnWidth = 220,
-  rowHeight = 48,
-  slotMinWidth = 56,
+  resourceColumnWidth,
+  rowHeight,
+  slotMinWidth,
   dayTimeStepMinutes = 60,
   maxLanesPerRow = 3,
   now,
@@ -7948,19 +8026,72 @@ function CalendarTimeline({
 }) {
   const t = useTranslations("CalendarTimeline");
   const detectedLocale = useLocale();
-  const resolvedLocale = React27.useMemo(() => locale ?? localeToBCP47(detectedLocale), [locale, detectedLocale]);
-  const resolvedTimeZone = React27.useMemo(
-    () => timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC",
-    [timeZone]
-  );
+  const resolvedLocale = React28.useMemo(() => localeToBCP47(locale ?? detectedLocale), [locale, detectedLocale]);
+  const resolvedTimeZone = React28.useMemo(() => timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC", [timeZone]);
+  const sizeConfig = React28.useMemo(() => {
+    const cfgBySize = {
+      sm: {
+        resourceColumnWidth: 200,
+        rowHeight: 44,
+        slotMinWidth: 52,
+        eventHeight: 16,
+        laneGap: 3,
+        lanePaddingY: 5,
+        densityClass: "text-xs",
+        headerPaddingClass: "px-3 py-2",
+        titleClass: "text-base",
+        resourceRowClass: "gap-2 px-3",
+        groupRowClass: "gap-2 px-3",
+        slotHeaderClass: "px-1 py-2",
+        controlButtonIconClass: "h-7 w-7",
+        controlButtonTextClass: "h-7 px-2 text-xs"
+      },
+      md: {
+        resourceColumnWidth: 240,
+        rowHeight: 52,
+        slotMinWidth: 64,
+        eventHeight: 18,
+        laneGap: 4,
+        lanePaddingY: 6,
+        densityClass: "text-sm",
+        headerPaddingClass: "px-4 py-3",
+        titleClass: "text-lg",
+        resourceRowClass: "gap-3 px-4",
+        groupRowClass: "gap-3 px-4",
+        slotHeaderClass: "px-1 py-3",
+        controlButtonIconClass: "h-8 w-8",
+        controlButtonTextClass: "h-8 px-3"
+      },
+      xl: {
+        resourceColumnWidth: 280,
+        rowHeight: 60,
+        slotMinWidth: 76,
+        eventHeight: 20,
+        laneGap: 5,
+        lanePaddingY: 8,
+        densityClass: "text-base",
+        headerPaddingClass: "px-5 py-4",
+        titleClass: "text-xl",
+        resourceRowClass: "gap-4 px-5",
+        groupRowClass: "gap-4 px-5",
+        slotHeaderClass: "px-2 py-4",
+        controlButtonIconClass: "h-9 w-9",
+        controlButtonTextClass: "h-9 px-4 text-sm"
+      }
+    };
+    return cfgBySize[size];
+  }, [size]);
+  const effectiveResourceColumnWidth = resourceColumnWidth ?? sizeConfig.resourceColumnWidth;
+  const effectiveRowHeight = rowHeight ?? sizeConfig.rowHeight;
+  const effectiveSlotMinWidth = slotMinWidth ?? sizeConfig.slotMinWidth;
   const isControlledView = view !== void 0;
-  const [internalView, setInternalView] = React27.useState(defaultView);
+  const [internalView, setInternalView] = React28.useState(defaultView);
   const activeView = isControlledView ? view : internalView;
   const isControlledDate = date !== void 0;
-  const [internalDate, setInternalDate] = React27.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
+  const [internalDate, setInternalDate] = React28.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
   const activeDate = isControlledDate ? date : internalDate;
   const resolvedNow = now ?? /* @__PURE__ */ new Date();
-  const l = React27.useMemo(
+  const l = React28.useMemo(
     () => ({
       today: labels?.today ?? t("today"),
       prev: labels?.prev ?? t("prev"),
@@ -7974,39 +8105,46 @@ function CalendarTimeline({
     }),
     [labels, t]
   );
-  const setView = (next) => {
-    if (!isControlledView) setInternalView(next);
-    onViewChange?.(next);
-  };
-  const setDate = (next) => {
-    if (!isControlledDate) setInternalDate(next);
-    onDateChange?.(next);
-  };
-  const navigate = (dir) => {
-    const base = activeDate;
-    if (activeView === "month") {
-      setDate(addZonedMonths(base, dir, resolvedTimeZone));
-      return;
-    }
-    if (activeView === "week") {
-      setDate(addZonedDays(base, dir * 7, resolvedTimeZone));
-      return;
-    }
-    setDate(addZonedDays(base, dir, resolvedTimeZone));
-  };
-  const goToday = () => setDate(resolvedNow);
-  const [internalCollapsed, setInternalCollapsed] = React27.useState(() => defaultGroupCollapsed ?? {});
+  const setView = React28.useCallback(
+    (next) => {
+      if (!isControlledView) setInternalView(next);
+      onViewChange?.(next);
+    },
+    [isControlledView, onViewChange]
+  );
+  const setDate = React28.useCallback(
+    (next) => {
+      if (!isControlledDate) setInternalDate(next);
+      onDateChange?.(next);
+    },
+    [isControlledDate, onDateChange]
+  );
+  const navigate = React28.useCallback(
+    (dir) => {
+      const base = activeDate;
+      if (activeView === "month") {
+        setDate(addZonedMonths(base, dir, resolvedTimeZone));
+        return;
+      }
+      if (activeView === "week") {
+        setDate(addZonedDays(base, dir * 7, resolvedTimeZone));
+        return;
+      }
+      setDate(addZonedDays(base, dir, resolvedTimeZone));
+    },
+    [activeDate, activeView, resolvedTimeZone, setDate]
+  );
+  const goToday = React28.useCallback(() => setDate(resolvedNow), [resolvedNow, setDate]);
+  const [internalCollapsed, setInternalCollapsed] = React28.useState(() => defaultGroupCollapsed ?? {});
   const collapsed = groupCollapsed ?? internalCollapsed;
-  const setCollapsed = (next) => {
-    if (!groupCollapsed) setInternalCollapsed(next);
-    onGroupCollapsedChange?.(next);
-  };
-  const groupById = React27.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const g of groups ?? []) map.set(g.id, g);
-    return map;
-  }, [groups]);
-  const rows = React27.useMemo(() => {
+  const setCollapsed = React28.useCallback(
+    (next) => {
+      if (!groupCollapsed) setInternalCollapsed(next);
+      onGroupCollapsedChange?.(next);
+    },
+    [groupCollapsed, onGroupCollapsedChange]
+  );
+  const rows = React28.useMemo(() => {
     if (!groups || groups.length === 0) return resources.map((resource) => ({ kind: "resource", resource }));
     const byGroup = /* @__PURE__ */ new Map();
     for (const r of resources) {
@@ -8037,7 +8175,7 @@ function CalendarTimeline({
     }
     return out;
   }, [resources, groups, collapsed]);
-  const { slots, range } = React27.useMemo(() => {
+  const { slots, range } = React28.useMemo(() => {
     const start = activeView === "month" ? startOfZonedMonth(activeDate, resolvedTimeZone) : activeView === "week" ? startOfZonedWeek(activeDate, weekStartsOn, resolvedTimeZone) : startOfZonedDay(activeDate, resolvedTimeZone);
     if (activeView === "day") {
       const step = Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes)));
@@ -8071,13 +8209,13 @@ function CalendarTimeline({
     }));
     return { slots: slotItems, range: { start, end } };
   }, [activeView, activeDate, resolvedTimeZone, resolvedLocale, weekStartsOn, dayTimeStepMinutes, resolvedNow, formatters]);
-  React27.useEffect(() => {
+  React28.useEffect(() => {
     onRangeChange?.(range);
   }, [range.start, range.end, onRangeChange]);
-  const slotStarts = React27.useMemo(() => slots.map((s) => s.start), [slots]);
-  const slotWidth = slotMinWidth;
+  const slotStarts = React28.useMemo(() => slots.map((s) => s.start), [slots]);
+  const slotWidth = effectiveSlotMinWidth;
   const gridWidth = slots.length * slotWidth;
-  const normalizedEvents = React27.useMemo(() => {
+  const normalizedEvents = React28.useMemo(() => {
     const rangeStart = range.start.getTime();
     const rangeEnd = range.end.getTime();
     return events.map((e) => {
@@ -8093,7 +8231,7 @@ function CalendarTimeline({
       return { ...e, _start: cs, _end: ce };
     }).filter(Boolean);
   }, [events, range.start, range.end, activeView, resolvedTimeZone]);
-  const eventsByResource = React27.useMemo(() => {
+  const eventsByResource = React28.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const e of normalizedEvents) {
       if (!map.has(e.resourceId)) map.set(e.resourceId, []);
@@ -8101,97 +8239,59 @@ function CalendarTimeline({
     }
     return map;
   }, [normalizedEvents]);
-  const bodyRef = React27.useRef(null);
-  const headerRef = React27.useRef(null);
-  React27.useEffect(() => {
-    const body = bodyRef.current;
-    const header = headerRef.current;
-    if (!body || !header) return;
-    let raf = 0;
-    let syncing = false;
-    const syncHeader = () => {
-      if (syncing) return;
-      syncing = true;
-      header.scrollLeft = body.scrollLeft;
-      syncing = false;
-    };
-    const syncBody = () => {
-      if (syncing) return;
-      syncing = true;
-      body.scrollLeft = header.scrollLeft;
-      syncing = false;
-    };
-    const onBodyScroll = () => {
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(syncHeader);
-    };
-    const onHeaderScroll = () => {
-      cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(syncBody);
-    };
-    body.addEventListener("scroll", onBodyScroll, { passive: true });
-    header.addEventListener("scroll", onHeaderScroll, { passive: true });
-    return () => {
-      cancelAnimationFrame(raf);
-      body.removeEventListener("scroll", onBodyScroll);
-      header.removeEventListener("scroll", onHeaderScroll);
-    };
-  }, []);
-  const title = React27.useMemo(() => {
+  const bodyRef = React28.useRef(null);
+  const headerRef = React28.useRef(null);
+  useHorizontalScrollSync({ bodyRef, headerRef });
+  const title = React28.useMemo(() => {
     return formatters?.monthTitle?.(activeDate, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultMonthTitle(activeDate, resolvedLocale, resolvedTimeZone);
   }, [activeDate, formatters, resolvedLocale, resolvedTimeZone]);
-  const densityClass = "text-sm";
-  const eventHeight = 18;
-  const laneGap = 4;
-  const lanePaddingY = 6;
+  const densityClass = sizeConfig.densityClass;
+  const eventHeight = sizeConfig.eventHeight;
+  const laneGap = sizeConfig.laneGap;
+  const lanePaddingY = sizeConfig.lanePaddingY;
   const virt = virtualization?.enabled;
   const overscan = virtualization?.overscan ?? 8;
-  const [viewportHeight, setViewportHeight] = React27.useState(0);
-  const [scrollTop, setScrollTop] = React27.useState(0);
-  React27.useEffect(() => {
-    const el = bodyRef.current;
-    if (!el) return;
-    const update = () => setViewportHeight(el.clientHeight);
-    update();
-    const ro = new ResizeObserver(update);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
-  React27.useEffect(() => {
-    const el = bodyRef.current;
-    if (!el) return;
-    const onScroll = () => setScrollTop(el.scrollTop);
-    el.addEventListener("scroll", onScroll, { passive: true });
-    return () => el.removeEventListener("scroll", onScroll);
-  }, []);
-  const totalRows = rows.length;
-  const startRow = virt ? clamp3(Math.floor(scrollTop / rowHeight) - overscan, 0, totalRows) : 0;
-  const endRow = virt ? clamp3(Math.ceil((scrollTop + viewportHeight) / rowHeight) + overscan, 0, totalRows) : totalRows;
-  const topSpacer = startRow * rowHeight;
-  const bottomSpacer = (totalRows - endRow) * rowHeight;
-  const dragRef = React27.useRef(null);
-  const [preview, setPreview] = React27.useState(null);
-  const getPointerContext = (clientX, clientY) => {
-    const body = bodyRef.current;
-    if (!body) return null;
-    const el = document.elementFromPoint(clientX, clientY);
-    const timelineEl = el?.closest?.("[data-uv-ct-timeline]");
-    if (!timelineEl) return null;
-    const timelineRect = timelineEl.getBoundingClientRect();
-    const x = clientX - timelineRect.left + body.scrollLeft;
-    const slotIdx = clamp3(Math.floor(x / slotWidth), 0, Math.max(0, slots.length - 1));
-    const rowEl = el?.closest?.("[data-uv-ct-row]");
-    const rid = rowEl?.dataset?.uvCtRow ?? null;
-    return { slotIdx, resourceId: rid, x };
-  };
-  const slotToDate = (slotIdx) => {
-    const start = slotStarts[clamp3(slotIdx, 0, slotStarts.length - 1)];
-    if (activeView === "day") {
-      const stepMs = Math.trunc(Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes))) * 6e4);
-      return { start, end: new Date(start.getTime() + stepMs) };
-    }
-    return { start, end: addZonedDays(start, 1, resolvedTimeZone) };
-  };
+  const {
+    startIndex: startRow,
+    endIndex: endRow,
+    topSpacer,
+    bottomSpacer
+  } = useVirtualRows({
+    enabled: virt,
+    overscan,
+    rowHeight: effectiveRowHeight,
+    itemCount: rows.length,
+    scrollRef: bodyRef
+  });
+  const dragRef = React28.useRef(null);
+  const [preview, setPreview] = React28.useState(null);
+  const getPointerContext = React28.useCallback(
+    (clientX, clientY) => {
+      const body = bodyRef.current;
+      if (!body) return null;
+      const el = document.elementFromPoint(clientX, clientY);
+      const timelineEl = el?.closest?.("[data-uv-ct-timeline]");
+      if (!timelineEl) return null;
+      const timelineRect = timelineEl.getBoundingClientRect();
+      const x = clientX - timelineRect.left + body.scrollLeft;
+      const slotIdx = clamp3(Math.floor(x / slotWidth), 0, Math.max(0, slots.length - 1));
+      const rowEl = el?.closest?.("[data-uv-ct-row]");
+      const rid = rowEl?.dataset?.uvCtRow ?? null;
+      return { slotIdx, resourceId: rid, x };
+    },
+    [slotWidth, slots.length]
+  );
+  const slotToDate = React28.useCallback(
+    (slotIdx) => {
+      const start = slotStarts[clamp3(slotIdx, 0, slotStarts.length - 1)];
+      if (activeView === "day") {
+        const stepMs = Math.trunc(Math.max(5, Math.min(240, Math.trunc(dayTimeStepMinutes))) * 6e4);
+        return { start, end: new Date(start.getTime() + stepMs) };
+      }
+      return { start, end: addZonedDays(start, 1, resolvedTimeZone) };
+    },
+    [activeView, dayTimeStepMinutes, resolvedTimeZone, slotStarts]
+  );
   const onPointerDownEvent = (e, ev, mode) => {
     if (ev.resourceId == null) return;
     const allowDrag = interactions?.draggableEvents ?? true;
@@ -8306,14 +8406,29 @@ function CalendarTimeline({
         type: "button",
         onClick: canToggle ? toggle : void 0,
         className: cn(
-          "w-full h-full flex items-center gap-2 px-3 text-left",
-          "bg-muted/30 border-b border-border/60",
-          canToggle ? "cursor-pointer hover:bg-muted/50" : "cursor-default"
+          "w-full h-full flex items-center text-left",
+          sizeConfig.groupRowClass,
+          "bg-linear-to-r from-muted/40 to-muted/20 border-b border-border/40",
+          "backdrop-blur-sm",
+          canToggle ? "cursor-pointer hover:from-muted/60 hover:to-muted/30 transition-all duration-200" : "cursor-default"
         ),
         "aria-label": isCollapsed ? l.expandGroup : l.collapseGroup,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: cn("inline-flex transition-transform", isCollapsed ? "" : "rotate-180"), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.ChevronsUpDown, { className: "h-4 w-4 text-muted-foreground" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-semibold", children: g.label })
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center justify-center w-5 h-5 rounded-md bg-background/60 transition-transform duration-200",
+                isCollapsed ? "" : "rotate-180"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-semibold text-foreground/90", children: g.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "ml-auto text-xs text-muted-foreground/60 font-medium", children: [
+            resources.filter((r) => r.groupId === g.id).length,
+            " items"
+          ] })
         ]
       }
     );
@@ -8330,44 +8445,111 @@ function CalendarTimeline({
         "div",
         {
           className: cn(
-            "flex-shrink-0 border-l border-border/60 px-2 py-2",
-            s.isToday && "bg-primary/5"
+            "shrink-0 border-l border-border/30 flex items-center justify-center transition-colors duration-150",
+            sizeConfig.slotHeaderClass,
+            s.isToday && "bg-primary/8 border-l-primary/40"
           ),
           style: { width: slotWidth, minWidth: slotWidth },
           "aria-label": formatters?.ariaSlotLabel?.(s.start, { view: activeView, locale: resolvedLocale, timeZone: resolvedTimeZone }),
-          children: s.label
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("flex flex-col items-center", s.isToday && "relative"), children: [
+            s.isToday && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Dot, { className: "absolute -top-2.5 h-4 w-4 text-primary animate-pulse" }),
+            s.label
+          ] })
         },
         `${s.start.toISOString()}_${idx}`
       ))
     }
   );
-  const Header = /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "sticky top-0 z-30 bg-background border-b border-border/60", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between gap-3 px-3 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigate(-1), "aria-label": l.prev, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.ChevronLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: goToday, children: l.today }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigate(1), "aria-label": l.next, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.ChevronRight, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "ml-2 font-semibold truncate", children: title })
+  const viewIcons = {
+    month: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.CalendarRange, { className: "h-4 w-4" }),
+    week: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.CalendarDays, { className: "h-4 w-4" }),
+    day: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.Calendar, { className: "h-4 w-4" })
+  };
+  const Header = /* @__PURE__ */ (0, import_jsx_runtime33.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: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("flex items-center justify-between gap-4", sizeConfig.headerPaddingClass), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center bg-muted/40 rounded-xl p-1 gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            Button_default,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => navigate(-1),
+              "aria-label": l.prev,
+              className: cn(sizeConfig.controlButtonIconClass, "rounded-lg hover:bg-background/80 transition-all duration-200"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            Button_default,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: goToday,
+              className: cn(sizeConfig.controlButtonTextClass, "rounded-lg hover:bg-background/80 font-medium transition-all duration-200"),
+              children: l.today
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            Button_default,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: () => navigate(1),
+              "aria-label": l.next,
+              className: cn(sizeConfig.controlButtonIconClass, "rounded-lg hover:bg-background/80 transition-all duration-200"),
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.ChevronRight, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h2", { className: cn("ml-3 font-semibold tracking-tight truncate text-foreground", sizeConfig.titleClass), children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button_default, { variant: activeView === "month" ? "default" : "ghost", size: "sm", onClick: () => setView("month"), children: l.month }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button_default, { variant: activeView === "week" ? "default" : "ghost", size: "sm", onClick: () => setView("week"), children: l.week }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button_default, { variant: activeView === "day" ? "default" : "ghost", size: "sm", onClick: () => setView("day"), children: l.day })
-      ] })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center bg-muted/40 rounded-xl p-1 gap-0.5", children: ["month", "week", "day"].map((v) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        Button_default,
+        {
+          variant: activeView === v ? "default" : "ghost",
+          size: "sm",
+          onClick: () => setView(v),
+          className: cn(
+            sizeConfig.controlButtonTextClass,
+            "rounded-lg 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"
+          ),
+          children: [
+            viewIcons[v],
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "hidden sm:inline", children: l[v] })
+          ]
+        },
+        v
+      )) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex border-t border-border/20", children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
-          className: "flex-shrink-0 border-r border-border/60 bg-background",
-          style: { width: resourceColumnWidth, minWidth: resourceColumnWidth }
+          className: "shrink-0 border-r border-border/30 bg-muted/20 flex items-center justify-center",
+          style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xs font-medium text-muted-foreground/70 uppercase tracking-wider", children: t("resourcesHeader") })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: headerRef, className: "overflow-x-auto overflow-y-hidden", children: slotHeaderNodes })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: headerRef, className: "overflow-x-auto overflow-y-hidden scrollbar-none", children: slotHeaderNodes })
     ] })
   ] });
-  const ResourceCell = (r) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-full w-full flex items-center px-3 border-b border-border/60 bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("truncate", r.disabled && "opacity-50"), children: renderResource ? renderResource(r) : r.label }) });
-  const layoutsByResource = React27.useMemo(() => {
+  const ResourceCell = (r) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "div",
+    {
+      className: cn(
+        "h-full w-full flex items-center border-b border-border/30 bg-linear-to-r from-background to-background/95",
+        sizeConfig.resourceRowClass,
+        "hover:from-muted/30 hover:to-muted/10 transition-all duration-200 group"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "shrink-0 opacity-0 group-hover:opacity-60 transition-opacity cursor-grab", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.GripVertical, { className: "h-4 w-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("flex-1 min-w-0", r.disabled && "opacity-50"), children: renderResource ? renderResource(r) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-medium text-sm truncate block", children: r.label }) })
+      ]
+    }
+  );
+  const layoutsByResource = React28.useMemo(() => {
     const map = /* @__PURE__ */ new Map();
     for (const [resourceId, list] of eventsByResource.entries()) {
       const mapped = list.map((ev) => {
@@ -8396,7 +8578,12 @@ function CalendarTimeline({
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
-      className: cn("border border-border/60 rounded-2xl overflow-hidden bg-background", densityClass, className),
+      className: cn(
+        "border border-border/40 rounded-2xl overflow-hidden bg-background/95 backdrop-blur-sm",
+        "shadow-sm hover:shadow-md transition-shadow duration-300",
+        densityClass,
+        className
+      ),
       ...rest,
       children: [
         Header,
@@ -8404,7 +8591,7 @@ function CalendarTimeline({
           "div",
           {
             ref: bodyRef,
-            className: "relative overflow-auto",
+            className: "relative overflow-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
             onPointerMove,
             onPointerUp,
             children: [
@@ -8412,16 +8599,16 @@ function CalendarTimeline({
               rows.slice(startRow, endRow).map((row, idx) => {
                 const rowIndex = startRow + idx;
                 if (row.kind === "group") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex", style: { height: rowHeight }, children: [
+                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex", style: { height: effectiveRowHeight }, children: [
                     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       "div",
                       {
-                        className: "flex-shrink-0 sticky left-0 z-20",
-                        style: { width: resourceColumnWidth, minWidth: resourceColumnWidth },
+                        className: "shrink-0 sticky left-0 z-20",
+                        style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
                         children: renderGroupRow(row.group)
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 border-b border-border/60 bg-muted/20", style: { minWidth: gridWidth } })
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 border-b border-border/30 bg-linear-to-r from-muted/15 to-muted/5", style: { minWidth: gridWidth } })
                   ] }, `g_${row.group.id}_${rowIndex}`);
                 }
                 const r = row.resource;
@@ -8430,122 +8617,130 @@ function CalendarTimeline({
                 return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
                   "div",
                   {
-                    className: "flex",
-                    style: { height: rowHeight },
+                    className: "flex group/row hover:bg-muted/5 transition-colors duration-150",
+                    style: { height: effectiveRowHeight },
                     "data-uv-ct-row": r.id,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                         "div",
                         {
-                          className: "flex-shrink-0 sticky left-0 z-20 border-r border-border/60",
-                          style: { width: resourceColumnWidth, minWidth: resourceColumnWidth },
+                          className: "shrink-0 sticky left-0 z-20 border-r border-border/30",
+                          style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
                           children: ResourceCell(r)
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-                        "div",
-                        {
-                          className: "relative flex-shrink-0",
-                          style: { width: gridWidth, minWidth: gridWidth },
-                          children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                              "div",
-                              {
-                                className: "absolute inset-0",
-                                onPointerDown: onPointerDownCell,
-                                "data-uv-ct-timeline": true,
-                                children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-0 flex", children: slots.map((s, i2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                                  "div",
-                                  {
-                                    className: cn("h-full border-l border-border/60", s.isToday && "bg-primary/5"),
-                                    style: { width: slotWidth, minWidth: slotWidth }
-                                  },
-                                  `${r.id}_${i2}`
-                                )) })
-                              }
+                      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "relative shrink-0", style: { width: gridWidth, minWidth: gridWidth }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-0", onPointerDown: onPointerDownCell, "data-uv-ct-timeline": true, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-0 flex", children: slots.map((s, i2) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                          "div",
+                          {
+                            className: cn(
+                              "h-full border-l border-border/20 transition-colors duration-100",
+                              s.isToday && "bg-primary/5 border-l-primary/30",
+                              "hover:bg-muted/10"
                             ),
-                            layout.visible.map(({ ev, left, width, lane }) => {
-                              const top = lanePaddingY + lane * (eventHeight + laneGap);
-                              const isPreview = preview?.eventId === ev.id;
-                              const bg = ev.color ? ev.color : "var(--primary-soft)";
-                              const border = ev.color ? ev.color : "var(--primary)";
-                              const aria = formatters?.ariaEventLabel?.(ev, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? (typeof ev.title === "string" ? ev.title : "Event");
-                              const timeText = formatters?.eventTime?.({ start: ev._start, end: ev._end, locale: resolvedLocale, timeZone: resolvedTimeZone, view: activeView }) ?? defaultEventTime({ start: ev._start, end: ev._end, locale: resolvedLocale, timeZone: resolvedTimeZone, view: activeView });
-                              const node = renderEvent?.(ev, { left, width, lane }) ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "px-2 py-[2px] truncate text-[11px] leading-tight", children: [
-                                ev.title ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "font-semibold truncate", children: ev.title }) : null,
-                                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "text-[10px] opacity-80 truncate", children: timeText })
-                              ] });
-                              return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-                                "div",
-                                {
-                                  className: cn(
-                                    "absolute rounded-md border shadow-sm select-none",
-                                    "hover:shadow transition-shadow",
-                                    ev.className,
-                                    isPreview && "ring-2 ring-primary/40"
+                            style: { width: slotWidth, minWidth: slotWidth }
+                          },
+                          `${r.id}_${i2}`
+                        )) }) }),
+                        layout.visible.map(({ ev, left, width, lane }) => {
+                          const top = lanePaddingY + lane * (eventHeight + laneGap);
+                          const isPreview = preview?.eventId === ev.id;
+                          const bg = ev.color ? ev.color : "hsl(var(--primary) / 0.15)";
+                          const border = ev.color ? ev.color : "hsl(var(--primary))";
+                          const aria = formatters?.ariaEventLabel?.(ev, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? (typeof ev.title === "string" ? ev.title : "Event");
+                          const timeText = formatters?.eventTime?.({
+                            start: ev._start,
+                            end: ev._end,
+                            locale: resolvedLocale,
+                            timeZone: resolvedTimeZone,
+                            view: activeView
+                          }) ?? defaultEventTime({ start: ev._start, end: ev._end, locale: resolvedLocale, timeZone: resolvedTimeZone, view: activeView });
+                          const node = renderEvent?.(ev, { left, width, lane }) ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "px-2.5 py-1 truncate flex items-center gap-1.5", children: [
+                            ev.title ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "font-semibold text-[11px] truncate leading-tight", children: ev.title }) : null,
+                            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-[10px] opacity-70 truncate ml-auto", children: timeText })
+                          ] });
+                          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                            "div",
+                            {
+                              className: cn(
+                                "absolute rounded-lg border select-none cursor-pointer",
+                                "shadow-sm hover:shadow-md hover:scale-[1.02] hover:z-10",
+                                "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] z-10"
+                              ),
+                              style: {
+                                left,
+                                top,
+                                width,
+                                height: eventHeight,
+                                background: bg,
+                                borderColor: border,
+                                borderLeftWidth: 3
+                              },
+                              role: "button",
+                              tabIndex: 0,
+                              "aria-label": aria,
+                              onClick: () => onEventClick?.(ev),
+                              onDoubleClick: () => onEventDoubleClick?.(ev),
+                              onPointerDown: (e) => onPointerDownEvent(e, ev, "move"),
+                              children: [
+                                (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                                    "div",
+                                    {
+                                      className: "absolute left-0 top-0 h-full w-2 cursor-ew-resize opacity-0 hover:opacity-100 bg-primary/20 rounded-l-lg transition-opacity",
+                                      onPointerDown: (e) => onPointerDownEvent(e, ev, "resize-start")
+                                    }
                                   ),
-                                  style: {
-                                    left,
-                                    top,
-                                    width,
-                                    height: eventHeight,
-                                    background: bg,
-                                    borderColor: border
-                                  },
-                                  role: "button",
-                                  tabIndex: 0,
-                                  "aria-label": aria,
-                                  onClick: () => onEventClick?.(ev),
-                                  onDoubleClick: () => onEventDoubleClick?.(ev),
-                                  onPointerDown: (e) => onPointerDownEvent(e, ev, "move"),
-                                  children: [
-                                    (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                                        "div",
-                                        {
-                                          className: "absolute left-0 top-0 h-full w-2 cursor-ew-resize",
-                                          onPointerDown: (e) => onPointerDownEvent(e, ev, "resize-start")
-                                        }
-                                      ),
-                                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                                        "div",
-                                        {
-                                          className: "absolute right-0 top-0 h-full w-2 cursor-ew-resize",
-                                          onPointerDown: (e) => onPointerDownEvent(e, ev, "resize-end")
-                                        }
-                                      )
-                                    ] }) : null,
-                                    node
-                                  ]
-                                },
-                                ev.id
-                              );
-                            }),
-                            preview && preview.resourceId === r.id && !preview.eventId ? (() => {
-                              const startIdx = binarySearchLastLE(slotStarts, preview.start);
-                              const endIdx = clamp3(binarySearchFirstGE(slotStarts, preview.end), startIdx + 1, slots.length);
-                              const left = startIdx * slotWidth;
-                              const width = Math.max(1, (endIdx - startIdx) * slotWidth);
-                              return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                                "div",
-                                {
-                                  className: "absolute rounded-md border border-primary/60 bg-primary/20",
-                                  style: { left, top: lanePaddingY, width, height: eventHeight }
-                                }
-                              );
-                            })() : null,
-                            canMore ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-                              "button",
-                              {
-                                type: "button",
-                                className: "absolute right-2 bottom-1 text-[11px] text-primary hover:underline",
-                                onClick: () => onMoreClick?.({ resourceId: r.id, hiddenEvents: layout.hidden }),
-                                children: l.more(layout.hidden.length)
-                              }
-                            ) : null
-                          ]
-                        }
-                      )
+                                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                                    "div",
+                                    {
+                                      className: "absolute right-0 top-0 h-full w-2 cursor-ew-resize opacity-0 hover:opacity-100 bg-primary/20 rounded-r-lg transition-opacity",
+                                      onPointerDown: (e) => onPointerDownEvent(e, ev, "resize-end")
+                                    }
+                                  )
+                                ] }) : null,
+                                node
+                              ]
+                            },
+                            ev.id
+                          );
+                        }),
+                        preview && preview.resourceId === r.id && !preview.eventId ? (() => {
+                          const startIdx = binarySearchLastLE(slotStarts, preview.start);
+                          const endIdx = clamp3(binarySearchFirstGE(slotStarts, preview.end), startIdx + 1, slots.length);
+                          const left = startIdx * slotWidth;
+                          const width = Math.max(1, (endIdx - startIdx) * slotWidth);
+                          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                            "div",
+                            {
+                              className: "absolute rounded-lg border-2 border-dashed border-primary/60 bg-primary/10 backdrop-blur-sm animate-pulse",
+                              style: { left, top: lanePaddingY, width, height: eventHeight }
+                            }
+                          );
+                        })() : null,
+                        canMore ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+                          "button",
+                          {
+                            type: "button",
+                            className: cn(
+                              "absolute right-2 bottom-1.5 text-[10px] font-semibold",
+                              "px-2 py-0.5 rounded-full",
+                              "bg-primary/10 text-primary hover:bg-primary/20",
+                              "transition-all duration-200 hover:scale-105"
+                            ),
+                            onClick: () => onMoreClick?.({ resourceId: r.id, hiddenEvents: layout.hidden }),
+                            children: [
+                              "+",
+                              layout.hidden.length,
+                              " ",
+                              l.more(layout.hidden.length).replace(/^\+?\d+\s*/, "")
+                            ]
+                          }
+                        ) : null
+                      ] })
                     ]
                   },
                   `r_${r.id}_${rowIndex}`
@@ -8561,7 +8756,7 @@ function CalendarTimeline({
 }
 
 // ../../components/ui/MultiCombobox.tsx
-var React28 = __toESM(require("react"), 1);
+var React29 = __toESM(require("react"), 1);
 var import_react16 = require("react");
 var import_lucide_react19 = require("lucide-react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
@@ -8596,27 +8791,27 @@ var MultiCombobox = ({
   helperText,
   maxTagsVisible = 3
 }) => {
-  const [query, setQuery] = React28.useState("");
-  const [open, setOpen] = React28.useState(false);
-  const [activeIndex, setActiveIndex] = React28.useState(null);
-  const inputRef = React28.useRef(null);
-  const listRef = React28.useRef([]);
-  const triggerRef = React28.useRef(null);
+  const [query, setQuery] = React29.useState("");
+  const [open, setOpen] = React29.useState(false);
+  const [activeIndex, setActiveIndex] = React29.useState(null);
+  const inputRef = React29.useRef(null);
+  const listRef = React29.useRef([]);
+  const triggerRef = React29.useRef(null);
   useShadCNAnimations();
-  const normalizedOptions = React28.useMemo(
+  const normalizedOptions = React29.useMemo(
     () => options.map(
       (o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label, icon: o.icon, description: o.description, disabled: o.disabled, group: o.group }
     ),
     [options]
   );
   const enableSearch = normalizedOptions.length > 10;
-  const filtered = React28.useMemo(
+  const filtered = React29.useMemo(
     () => enableSearch ? normalizedOptions.filter(
       (opt) => opt.label.toLowerCase().includes(query.toLowerCase()) || opt.description?.toLowerCase().includes(query.toLowerCase())
     ) : normalizedOptions,
     [normalizedOptions, query, enableSearch]
   );
-  const groupedOptions = React28.useMemo(() => {
+  const groupedOptions = React29.useMemo(() => {
     if (!groupBy) return null;
     const groups = /* @__PURE__ */ new Map();
     filtered.forEach((opt) => {
@@ -8652,7 +8847,7 @@ var MultiCombobox = ({
   const handleClearAll = () => {
     onChange([]);
   };
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     if (open && enableSearch) {
       setTimeout(() => {
         inputRef.current?.focus();
@@ -8877,7 +9072,7 @@ var MultiCombobox = ({
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center gap-1.5 flex-wrap min-h-6 flex-1", children: value.length > 0 ? showTags ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
           visibleTags.map((option) => {
             if (renderTag) {
-              return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(React28.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
+              return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(React29.Fragment, { children: renderTag(option, () => handleRemove(option.value)) }, option.value);
             }
             return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
               "span",
@@ -9018,17 +9213,17 @@ var MultiCombobox = ({
 };
 
 // ../../components/ui/RadioGroup.tsx
-var React29 = __toESM(require("react"), 1);
+var React30 = __toESM(require("react"), 1);
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var RadioGroupContext = React29.createContext(void 0);
+var RadioGroupContext = React30.createContext(void 0);
 var useRadioGroup = () => {
-  const context = React29.useContext(RadioGroupContext);
+  const context = React30.useContext(RadioGroupContext);
   if (!context) {
     throw new Error("RadioGroupItem must be used within a RadioGroup");
   }
   return context;
 };
-var RadioGroup = React29.forwardRef(
+var RadioGroup = React30.forwardRef(
   ({
     value,
     defaultValue,
@@ -9044,7 +9239,7 @@ var RadioGroup = React29.forwardRef(
     error = false,
     errorMessage
   }, ref) => {
-    const [internalValue, setInternalValue] = React29.useState(defaultValue || "");
+    const [internalValue, setInternalValue] = React30.useState(defaultValue || "");
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const handleValueChange = (newValue) => {
@@ -9055,7 +9250,7 @@ var RadioGroup = React29.forwardRef(
         onValueChange?.(newValue);
       }
     };
-    const uniqueId = React29.useId();
+    const uniqueId = React30.useId();
     const radioName = name || `radio-group-${uniqueId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       RadioGroupContext.Provider,
@@ -9113,7 +9308,7 @@ var sizeStyles7 = {
     padding: "p-4"
   }
 };
-var RadioGroupItem = React29.forwardRef(
+var RadioGroupItem = React30.forwardRef(
   ({ value, id, disabled, className, children, label, description, icon }, ref) => {
     const { value: selectedValue, onValueChange, name, disabled: groupDisabled, size = "md", variant = "default" } = useRadioGroup();
     const isDisabled = disabled || groupDisabled;
@@ -9290,7 +9485,7 @@ var RadioGroupItem = React29.forwardRef(
 RadioGroupItem.displayName = "RadioGroupItem";
 
 // ../../components/ui/Slider.tsx
-var React30 = __toESM(require("react"), 1);
+var React31 = __toESM(require("react"), 1);
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var SIZE_STYLES = {
   sm: {
@@ -9309,7 +9504,7 @@ var SIZE_STYLES = {
     container: "py-3"
   }
 };
-var Slider = React30.forwardRef(
+var Slider = React31.forwardRef(
   ({
     className,
     value,
@@ -9335,7 +9530,7 @@ var Slider = React30.forwardRef(
     noFocus = true,
     ...props
   }, ref) => {
-    const [internalValue, setInternalValue] = React30.useState(defaultValue);
+    const [internalValue, setInternalValue] = React31.useState(defaultValue);
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const handleChange = (e) => {
@@ -10336,7 +10531,7 @@ function ImageUpload({
 }
 
 // ../../components/ui/Carousel.tsx
-var React33 = __toESM(require("react"), 1);
+var React34 = __toESM(require("react"), 1);
 var import_lucide_react23 = require("lucide-react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 function Carousel({
@@ -10359,19 +10554,19 @@ function Carousel({
   thumbnailRenderer,
   ariaLabel = "Carousel"
 }) {
-  const [currentIndex, setCurrentIndex] = React33.useState(0);
-  const [isPaused, setIsPaused] = React33.useState(false);
-  const [isDragging, setIsDragging] = React33.useState(false);
-  const [startPos, setStartPos] = React33.useState(0);
-  const [currentTranslate, setCurrentTranslate] = React33.useState(0);
-  const [prevTranslate, setPrevTranslate] = React33.useState(0);
-  const progressElRef = React33.useRef(null);
-  const carouselRef = React33.useRef(null);
-  const rafRef = React33.useRef(null);
-  const totalSlides = React33.Children.count(children);
+  const [currentIndex, setCurrentIndex] = React34.useState(0);
+  const [isPaused, setIsPaused] = React34.useState(false);
+  const [isDragging, setIsDragging] = React34.useState(false);
+  const [startPos, setStartPos] = React34.useState(0);
+  const [currentTranslate, setCurrentTranslate] = React34.useState(0);
+  const [prevTranslate, setPrevTranslate] = React34.useState(0);
+  const progressElRef = React34.useRef(null);
+  const carouselRef = React34.useRef(null);
+  const rafRef = React34.useRef(null);
+  const totalSlides = React34.Children.count(children);
   const maxIndex = Math.max(0, totalSlides - slidesToShow);
   const isHorizontal = orientation === "horizontal";
-  const scrollPrev = React33.useCallback(() => {
+  const scrollPrev = React34.useCallback(() => {
     setCurrentIndex((prev) => {
       if (prev === 0) {
         return loop ? maxIndex : 0;
@@ -10379,7 +10574,7 @@ function Carousel({
       return Math.max(0, prev - slidesToScroll);
     });
   }, [loop, maxIndex, slidesToScroll]);
-  const scrollNext = React33.useCallback(() => {
+  const scrollNext = React34.useCallback(() => {
     setCurrentIndex((prev) => {
       if (prev >= maxIndex) {
         return loop ? 0 : maxIndex;
@@ -10387,13 +10582,13 @@ function Carousel({
       return Math.min(maxIndex, prev + slidesToScroll);
     });
   }, [loop, maxIndex, slidesToScroll]);
-  const scrollTo = React33.useCallback(
+  const scrollTo = React34.useCallback(
     (index) => {
       setCurrentIndex(Math.min(maxIndex, Math.max(0, index)));
     },
     [maxIndex]
   );
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
         e.preventDefault();
@@ -10415,7 +10610,7 @@ function Carousel({
       return () => carousel.removeEventListener("keydown", handleKeyDown);
     }
   }, [scrollPrev, scrollNext, scrollTo, maxIndex]);
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     const stop = () => {
       if (rafRef.current != null) {
         cancelAnimationFrame(rafRef.current);
@@ -10474,7 +10669,7 @@ function Carousel({
     setCurrentTranslate(0);
     setPrevTranslate(0);
   };
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     onSlideChange?.(currentIndex);
   }, [currentIndex, onSlideChange]);
   const getAnimationStyles2 = () => {
@@ -10527,7 +10722,7 @@ function Carousel({
             role: "group",
             "aria-atomic": "false",
             "aria-live": autoScroll ? "off" : "polite",
-            children: React33.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            children: React34.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "div",
               {
                 className: cn(
@@ -10617,7 +10812,7 @@ function Carousel({
               "absolute bottom-0 left-0 right-0 flex gap-2 p-4 bg-linear-to-t from-black/50 to-transparent overflow-x-auto",
               isHorizontal ? "flex-row" : "flex-col"
             ),
-            children: React33.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            children: React34.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "button",
               {
                 onClick: () => scrollTo(idx),
@@ -10910,7 +11105,7 @@ function FallingIcons({
 }
 
 // ../../components/ui/List.tsx
-var React35 = __toESM(require("react"), 1);
+var React36 = __toESM(require("react"), 1);
 var import_lucide_react24 = require("lucide-react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var SIZE_STYLES2 = {
@@ -10936,7 +11131,7 @@ var ListItemSkeleton = ({ size }) => {
     ] })
   ] });
 };
-var ListRoot = React35.forwardRef(
+var ListRoot = React36.forwardRef(
   ({
     as = "ul",
     ordered,
@@ -10956,7 +11151,7 @@ var ListRoot = React35.forwardRef(
     ...rest
   }, ref) => {
     const Comp = ordered ? "ol" : as;
-    const childCount = React35.Children.count(children);
+    const childCount = React36.Children.count(children);
     const hasChildren = childCount > 0;
     const variantClasses2 = {
       plain: "",
@@ -10994,14 +11189,14 @@ var ListRoot = React35.forwardRef(
           className
         ),
         ...rest,
-        children: React35.Children.map(children, (child, idx) => {
-          if (!React35.isValidElement(child)) return child;
+        children: React36.Children.map(children, (child, idx) => {
+          if (!React36.isValidElement(child)) return child;
           const childClass = cn(
             child.props?.className,
             hoverable && variant !== "flush" && "hover:bg-accent/50 focus:bg-accent/60 focus:outline-none transition-colors",
             variant === "flush" && "hover:bg-accent/30"
           );
-          return React35.cloneElement(child, {
+          return React36.cloneElement(child, {
             className: childClass,
             // Pass global item class to contentClassName of ListItem
             contentClassName: cn(itemClassName, child.props?.contentClassName),
@@ -11016,7 +11211,7 @@ var ListRoot = React35.forwardRef(
   }
 );
 ListRoot.displayName = "List";
-var ListItem = React35.forwardRef(
+var ListItem = React36.forwardRef(
   ({
     as = "li",
     selected = false,
@@ -11039,7 +11234,7 @@ var ListItem = React35.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const [internalExpanded, setInternalExpanded] = React35.useState(false);
+    const [internalExpanded, setInternalExpanded] = React36.useState(false);
     const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
     const sizeAttr = rest["data-size"];
     const resolvedSize = sizeAttr && ["xs", "sm", "md", "lg"].includes(sizeAttr) ? sizeAttr : "md";
@@ -11107,7 +11302,7 @@ var List = Object.assign(ListRoot, { Item: ListItem });
 var List_default = List;
 
 // ../../components/ui/Watermark.tsx
-var React36 = __toESM(require("react"), 1);
+var React37 = __toESM(require("react"), 1);
 var import_react_dom5 = require("react-dom");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var PRESETS2 = {
@@ -11119,8 +11314,8 @@ var PRESETS2 = {
   internal: { text: "INTERNAL USE ONLY", color: "rgba(156, 163, 175, 0.15)", rotate: -22, fontSize: 13, fontWeight: "600" }
 };
 function useWatermarkDataURL(opts) {
-  const [url, setUrl] = React36.useState(null);
-  React36.useEffect(() => {
+  const [url, setUrl] = React37.useState(null);
+  React37.useEffect(() => {
     let cancelled = false;
     const text = opts.text;
     const image = opts.image;
@@ -11297,9 +11492,9 @@ var Watermark = ({
   children,
   ...rest
 }) => {
-  const [visible, setVisible] = React36.useState(true);
-  const [isDark, setIsDark] = React36.useState(false);
-  React36.useEffect(() => {
+  const [visible, setVisible] = React37.useState(true);
+  const [isDark, setIsDark] = React37.useState(false);
+  React37.useEffect(() => {
     if (!darkMode) return;
     const checkDarkMode = () => {
       const isDarkMode = document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -11401,7 +11596,7 @@ var Watermark = ({
 var Watermark_default = Watermark;
 
 // ../../components/ui/Timeline.tsx
-var React37 = __toESM(require("react"), 1);
+var React38 = __toESM(require("react"), 1);
 var import_lucide_react25 = require("lucide-react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var SIZE_STYLE = {
@@ -11454,7 +11649,7 @@ var STATUS_COLOR = {
   error: "bg-destructive",
   info: "bg-info"
 };
-var TimelineContext = React37.createContext(null);
+var TimelineContext = React38.createContext(null);
 var LINE_STYLE_MAP = {
   solid: "border-solid",
   dashed: "border-dashed",
@@ -11482,7 +11677,7 @@ var Marker = ({ index, last, size, color, status = "default", lineColor, lineSty
     !last && showLine && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cn("flex-1 border-l-2", LINE_STYLE_MAP[lineStyle]), style: { borderColor: lineColor || "hsl(var(--border))" } })
   ] });
 };
-var TimelineRoot = React37.forwardRef(
+var TimelineRoot = React38.forwardRef(
   ({
     align = "left",
     variant = "default",
@@ -11512,7 +11707,7 @@ var TimelineRoot = React37.forwardRef(
   }
 );
 TimelineRoot.displayName = "Timeline";
-var TimelineItem = React37.forwardRef(
+var TimelineItem = React38.forwardRef(
   ({
     title,
     description,
@@ -11531,11 +11726,11 @@ var TimelineItem = React37.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const ctx = React37.useContext(TimelineContext);
+    const ctx = React38.useContext(TimelineContext);
     const idx = rest["data-index"];
     const isLast = Boolean(rest["data-last"]);
     const sz = SIZE_STYLE[ctx.size];
-    const [internalExpanded, setInternalExpanded] = React37.useState(false);
+    const [internalExpanded, setInternalExpanded] = React38.useState(false);
     const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
     const toggleExpanded = () => {
       const newExpanded = !isExpanded;
@@ -11677,7 +11872,7 @@ var Timeline = Object.assign(TimelineRoot, { Item: TimelineItem });
 var Timeline_default = Timeline;
 
 // ../../components/ui/ColorPicker.tsx
-var React38 = __toESM(require("react"), 1);
+var React39 = __toESM(require("react"), 1);
 var import_lucide_react26 = require("lucide-react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var clamp4 = (n, min, max) => Math.max(min, Math.min(max, n));
@@ -11871,12 +12066,12 @@ function ColorPicker({
 }) {
   const isControlled = value !== void 0;
   const initial = parseAnyColor(isControlled ? value : defaultValue) || { r: 79, g: 70, b: 229, a: 1 };
-  const [rgba, setRgba] = React38.useState(initial);
-  const [open, setOpen] = React38.useState(false);
-  const [text, setText] = React38.useState(() => formatOutput(initial, withAlpha, format));
-  const [copied, setCopied] = React38.useState(false);
-  const [recentColors, setRecentColors] = React38.useState([]);
-  React38.useEffect(() => {
+  const [rgba, setRgba] = React39.useState(initial);
+  const [open, setOpen] = React39.useState(false);
+  const [text, setText] = React39.useState(() => formatOutput(initial, withAlpha, format));
+  const [copied, setCopied] = React39.useState(false);
+  const [recentColors, setRecentColors] = React39.useState([]);
+  React39.useEffect(() => {
     if (isControlled) {
       const parsed = parseAnyColor(value);
       if (parsed) {
@@ -14828,10 +15023,10 @@ function DataTable({
 var DataTable_default = DataTable;
 
 // ../../components/ui/Form.tsx
-var React53 = __toESM(require("react"), 1);
+var React54 = __toESM(require("react"), 1);
 var import_react_hook_form = require("react-hook-form");
 var import_jsx_runtime61 = require("react/jsx-runtime");
-var FormConfigContext = React53.createContext({ size: "md" });
+var FormConfigContext = React54.createContext({ size: "md" });
 var FormWrapper = ({
   children,
   onSubmit,
@@ -14844,7 +15039,7 @@ var FormWrapper = ({
   const methods = (0, import_react_hook_form.useForm)({
     defaultValues: initialValues
   });
-  React53.useEffect(() => {
+  React54.useEffect(() => {
     if (initialValues) {
       methods.reset(initialValues);
     }
@@ -14853,15 +15048,15 @@ var FormWrapper = ({
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_hook_form.FormProvider, { ...methods, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FormConfigContext.Provider, { value: { size }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("form", { onSubmit: methods.handleSubmit(onSubmit), className, ...formProps, children }) }) });
 };
 var Form = FormWrapper;
-var FormFieldContext = React53.createContext({});
+var FormFieldContext = React54.createContext({});
 var FormField = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_hook_form.Controller, { ...props }) });
 };
 var useFormField = () => {
-  const fieldContext = React53.useContext(FormFieldContext);
-  const itemContext = React53.useContext(FormItemContext);
+  const fieldContext = React54.useContext(FormFieldContext);
+  const itemContext = React54.useContext(FormItemContext);
   const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
   if (!fieldContext) {
     try {
@@ -14882,16 +15077,16 @@ var useFormField = () => {
     ...fieldState
   };
 };
-var FormItemContext = React53.createContext({});
-var FormItem = React53.forwardRef(({ className, ...props }, ref) => {
-  const id = React53.useId();
+var FormItemContext = React54.createContext({});
+var FormItem = React54.forwardRef(({ className, ...props }, ref) => {
+  const id = React54.useId();
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ref, className: cn("space-y-2", className), ...props }) });
 });
 FormItem.displayName = "FormItem";
-var FormLabel = React53.forwardRef(
+var FormLabel = React54.forwardRef(
   ({ className, children, required, ...props }, ref) => {
     const { error, formItemId } = useFormField();
-    const config = React53.useContext(FormConfigContext);
+    const config = React54.useContext(FormConfigContext);
     const sizeClass = config.size === "sm" ? "text-xs" : config.size === "lg" ? "text-base" : "text-sm";
     return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Label, { ref, className: cn(sizeClass, error && "text-destructive", className), htmlFor: formItemId, ...props, children: [
       children,
@@ -14900,7 +15095,7 @@ var FormLabel = React53.forwardRef(
   }
 );
 FormLabel.displayName = "FormLabel";
-var FormControl = React53.forwardRef(({ ...props }, ref) => {
+var FormControl = React54.forwardRef(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     "div",
@@ -14914,12 +15109,12 @@ var FormControl = React53.forwardRef(({ ...props }, ref) => {
   );
 });
 FormControl.displayName = "FormControl";
-var FormDescription = React53.forwardRef(({ className, ...props }, ref) => {
+var FormDescription = React54.forwardRef(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField();
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { ref, id: formDescriptionId, className: cn("text-sm text-muted-foreground", className), ...props });
 });
 FormDescription.displayName = "FormDescription";
-var FormMessage = React53.forwardRef(({ className, children, ...props }, ref) => {
+var FormMessage = React54.forwardRef(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField();
   const body = error ? String(error?.message) : children;
   if (!body) {
@@ -14928,7 +15123,7 @@ var FormMessage = React53.forwardRef(({ className, children, ...props }, ref) =>
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { ref, id: formMessageId, className: cn("text-sm font-medium text-destructive", className), ...props, children: body });
 });
 FormMessage.displayName = "FormMessage";
-var FormInput = React53.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+var FormInput = React54.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
   FormField,
   {
     name,
@@ -14939,7 +15134,7 @@ var FormInput = React53.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */
   }
 ) }));
 FormInput.displayName = "FormInput";
-var FormCheckbox = React53.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+var FormCheckbox = React54.forwardRef(({ name, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
   FormField,
   {
     name,
@@ -14963,9 +15158,9 @@ var FormCheckbox = React53.forwardRef(({ name, ...props }, ref) => /* @__PURE__
   }
 ) }));
 FormCheckbox.displayName = "FormCheckbox";
-var FormActions = React53.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
+var FormActions = React54.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ref, className: cn("flex gap-2 justify-end", className), ...props }));
 FormActions.displayName = "FormActions";
-var FormSubmitButton = React53.forwardRef(
+var FormSubmitButton = React54.forwardRef(
   ({ children, loading: loading2, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FormConfigContext.Consumer, { children: ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Button_default, { ref, type: "submit", size: props.size ?? size, disabled: loading2, ...props, children }) })
 );
 FormSubmitButton.displayName = "FormSubmitButton";
@@ -15747,7 +15942,7 @@ var VARIANT_STYLES_ALERT = {
 };
 
 // src/contexts/TranslationContext.tsx
-var React55 = __toESM(require("react"), 1);
+var React56 = __toESM(require("react"), 1);
 
 // locales/en.json
 var en_default = {
@@ -16101,9 +16296,9 @@ var defaultTranslations2 = {
   ko: ko_default,
   ja: ja_default
 };
-var TranslationContext2 = React55.createContext(null);
+var TranslationContext2 = React56.createContext(null);
 var TranslationProvider = ({ children, locale = "en", translations }) => {
-  const t = React55.useCallback(
+  const t = React56.useCallback(
     (namespace) => {
       return (key) => {
         const mergedTranslations = {
@@ -16131,7 +16326,7 @@ var TranslationProvider = ({ children, locale = "en", translations }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TranslationContext2.Provider, { value: { locale, t }, children });
 };
 var useUnderverseTranslations = (namespace) => {
-  const context = React55.useContext(TranslationContext2);
+  const context = React56.useContext(TranslationContext2);
   if (!context) {
     return (key) => {
       const parts = namespace.split(".");
@@ -16153,12 +16348,12 @@ var useUnderverseTranslations = (namespace) => {
   return context.t(namespace);
 };
 var useUnderverseLocale = () => {
-  const context = React55.useContext(TranslationContext2);
+  const context = React56.useContext(TranslationContext2);
   return context?.locale || "en";
 };
 
 // src/hooks/useSmartTranslations.tsx
-var React56 = __toESM(require("react"), 1);
+var React57 = __toESM(require("react"), 1);
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var nextIntlHooks = null;
 try {
@@ -16170,12 +16365,12 @@ try {
 } catch {
   nextIntlHooks = null;
 }
-var ForceInternalContext = React56.createContext(false);
+var ForceInternalContext = React57.createContext(false);
 var ForceInternalTranslationsProvider = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ForceInternalContext.Provider, { value: true, children });
 };
 function useSmartTranslations(namespace) {
-  const forceInternal = React56.useContext(ForceInternalContext);
+  const forceInternal = React57.useContext(ForceInternalContext);
   const internalT = useUnderverseTranslations(namespace);
   if (forceInternal || !nextIntlHooks?.useTranslations) {
     return internalT;
@@ -16188,7 +16383,7 @@ function useSmartTranslations(namespace) {
   }
 }
 function useSmartLocale() {
-  const forceInternal = React56.useContext(ForceInternalContext);
+  const forceInternal = React57.useContext(ForceInternalContext);
   const internalLocale = useUnderverseLocale();
   if (forceInternal || !nextIntlHooks?.useLocale) {
     return internalLocale;
@@ -18049,9 +18244,9 @@ var UEditor = ({
           "[&_ul[data-type='taskList']_li>label>input]:border-2",
           "[&_ul[data-type='taskList']_li>label>input]:border-primary/50",
           "[&_ul[data-type='taskList']_li>label>input]:accent-primary",
-          "[&_pre]:!bg-[#1e1e1e]",
-          "[&_pre]:!text-[#d4d4d4]",
-          "[&_pre_code]:!bg-transparent",
+          "[&_pre]:bg-[#1e1e1e]!",
+          "[&_pre]:text-[#d4d4d4]!",
+          "[&_pre_code]:bg-transparent!",
           "[&_img.ProseMirror-selectednode]:ring-2",
           "[&_img.ProseMirror-selectednode]:ring-primary/60",
           "[&_img.ProseMirror-selectednode]:ring-offset-2",