@underverse-ui/underverse 0.2.85 → 0.2.87

package/dist/index.cjs

@@ -7891,41 +7891,48 @@ function intervalPack(items) {
 // ../../components/ui/CalendarTimeline/hooks.ts
 var React27 = __toESM(require("react"), 1);
 function useHorizontalScrollSync(args) {
-  const { bodyRef, headerRef } = args;
+  const { bodyRef, headerRef, leftRef } = args;
   React27.useEffect(() => {
     const body = bodyRef.current;
     const header = headerRef.current;
+    const left = leftRef?.current ?? null;
     if (!body || !header) return;
     let raf = 0;
     let syncing = false;
-    const syncHeader = () => {
+    const syncFrom = (source) => {
       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 = () => {
+      if (source === "header") {
+        const x = header.scrollLeft;
+        if (body.scrollLeft !== x) body.scrollLeft = x;
+      } else if (source === "left" && left) {
+        const y = left.scrollTop;
+        if (body.scrollTop !== y) body.scrollTop = y;
+      } else {
+        const x = body.scrollLeft;
+        const y = body.scrollTop;
+        if (header.scrollLeft !== x) header.scrollLeft = x;
+        if (left && left.scrollTop !== y) left.scrollTop = y;
+      }
       cancelAnimationFrame(raf);
-      raf = requestAnimationFrame(syncBody);
+      raf = requestAnimationFrame(() => {
+        syncing = false;
+      });
     };
+    const onBodyScroll = () => syncFrom("body");
+    const onHeaderScroll = () => syncFrom("header");
+    const onLeftScroll = () => syncFrom("left");
+    syncFrom("body");
     body.addEventListener("scroll", onBodyScroll, { passive: true });
     header.addEventListener("scroll", onHeaderScroll, { passive: true });
+    left?.addEventListener("scroll", onLeftScroll, { passive: true });
     return () => {
       cancelAnimationFrame(raf);
       body.removeEventListener("scroll", onBodyScroll);
       header.removeEventListener("scroll", onHeaderScroll);
+      left?.removeEventListener("scroll", onLeftScroll);
     };
-  }, [bodyRef, headerRef]);
+  }, [bodyRef, headerRef, leftRef]);
 }
 function useVirtualRows(args) {
   const { enabled, overscan, rowHeight, itemCount, scrollRef } = args;
@@ -7987,6 +7994,7 @@ function defaultEventTime(args) {
 function CalendarTimeline({
   resources,
   events,
+  size = "md",
   view,
   defaultView = "month",
   onViewChange,
@@ -8002,9 +8010,9 @@ function CalendarTimeline({
   groupCollapsed,
   defaultGroupCollapsed,
   onGroupCollapsedChange,
-  resourceColumnWidth = 240,
-  rowHeight = 52,
-  slotMinWidth = 64,
+  resourceColumnWidth,
+  rowHeight,
+  slotMinWidth,
   dayTimeStepMinutes = 60,
   maxLanesPerRow = 3,
   now,
@@ -8027,6 +8035,62 @@ function CalendarTimeline({
   const detectedLocale = useLocale();
   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] = React28.useState(defaultView);
   const activeView = isControlledView ? view : internalView;
@@ -8156,7 +8220,7 @@ function CalendarTimeline({
     onRangeChange?.(range);
   }, [range.start, range.end, onRangeChange]);
   const slotStarts = React28.useMemo(() => slots.map((s) => s.start), [slots]);
-  const slotWidth = slotMinWidth;
+  const slotWidth = effectiveSlotMinWidth;
   const gridWidth = slots.length * slotWidth;
   const normalizedEvents = React28.useMemo(() => {
     const rangeStart = range.start.getTime();
@@ -8182,16 +8246,17 @@ function CalendarTimeline({
     }
     return map;
   }, [normalizedEvents]);
+  const leftRef = React28.useRef(null);
   const bodyRef = React28.useRef(null);
   const headerRef = React28.useRef(null);
-  useHorizontalScrollSync({ bodyRef, headerRef });
+  useHorizontalScrollSync({ bodyRef, headerRef, leftRef });
   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 {
@@ -8202,7 +8267,7 @@ function CalendarTimeline({
   } = useVirtualRows({
     enabled: virt,
     overscan,
-    rowHeight,
+    rowHeight: effectiveRowHeight,
     itemCount: rows.length,
     scrollRef: bodyRef
   });
@@ -8349,8 +8414,9 @@ function CalendarTimeline({
         type: "button",
         onClick: canToggle ? toggle : void 0,
         className: cn(
-          "w-full h-full flex items-center gap-3 px-4 text-left",
-          "bg-gradient-to-r from-muted/40 to-muted/20 border-b border-border/40",
+          "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"
         ),
@@ -8387,7 +8453,8 @@ function CalendarTimeline({
         "div",
         {
           className: cn(
-            "flex-shrink-0 border-l border-border/30 px-1 py-3 flex items-center justify-center transition-colors duration-150",
+            "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 },
@@ -8406,8 +8473,8 @@ function CalendarTimeline({
     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-gradient-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: "flex items-center justify-between gap-4 px-4 py-3", children: [
+  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)(
@@ -8417,7 +8484,7 @@ function CalendarTimeline({
               size: "icon",
               onClick: () => navigate(-1),
               "aria-label": l.prev,
-              className: "h-8 w-8 rounded-lg hover:bg-background/80 transition-all duration-200",
+              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" })
             }
           ),
@@ -8427,7 +8494,7 @@ function CalendarTimeline({
               variant: "ghost",
               size: "sm",
               onClick: goToday,
-              className: "h-8 px-3 rounded-lg hover:bg-background/80 font-medium transition-all duration-200",
+              className: cn(sizeConfig.controlButtonTextClass, "rounded-lg hover:bg-background/80 font-medium transition-all duration-200"),
               children: l.today
             }
           ),
@@ -8438,12 +8505,12 @@ function CalendarTimeline({
               size: "icon",
               onClick: () => navigate(1),
               "aria-label": l.next,
-              className: "h-8 w-8 rounded-lg hover:bg-background/80 transition-all duration-200",
+              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: "ml-3 text-lg font-semibold tracking-tight truncate text-foreground", children: title })
+        /* @__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.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,
@@ -8452,7 +8519,8 @@ function CalendarTimeline({
           size: "sm",
           onClick: () => setView(v),
           className: cn(
-            "h-8 px-3 rounded-lg font-medium transition-all duration-200 gap-1.5",
+            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: [
@@ -8467,9 +8535,9 @@ function CalendarTimeline({
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "div",
         {
-          className: "flex-shrink-0 border-r border-border/30 bg-muted/20 flex items-center justify-center",
-          style: { width: resourceColumnWidth, minWidth: resourceColumnWidth },
-          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xs font-medium text-muted-foreground/70 uppercase tracking-wider", children: "Resources" })
+          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 scrollbar-none", children: slotHeaderNodes })
@@ -8479,11 +8547,12 @@ function CalendarTimeline({
     "div",
     {
       className: cn(
-        "h-full w-full flex items-center gap-3 px-4 border-b border-border/30 bg-gradient-to-r from-background to-background/95",
+        "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: "flex-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: "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 }) })
       ]
     }
@@ -8526,42 +8595,51 @@ function CalendarTimeline({
       ...rest,
       children: [
         Header,
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-          "div",
-          {
-            ref: bodyRef,
-            className: "relative overflow-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
-            onPointerMove,
-            onPointerUp,
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: topSpacer } }),
-              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: [
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-shrink-0 sticky left-0 z-20", style: { width: resourceColumnWidth, minWidth: resourceColumnWidth }, children: renderGroupRow(row.group) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex-1 border-b border-border/30 bg-gradient-to-r from-muted/15 to-muted/5", style: { minWidth: gridWidth } })
-                  ] }, `g_${row.group.id}_${rowIndex}`);
-                }
-                const r = row.resource;
-                const layout = layoutsByResource.get(r.id) ?? { visible: [], hidden: [] };
-                const canMore = layout.hidden.length > 0 && !!onMoreClick;
-                return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-                  "div",
-                  {
-                    className: "flex group/row hover:bg-muted/5 transition-colors duration-150",
-                    style: { height: rowHeight },
-                    "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/30",
-                          style: { width: resourceColumnWidth, minWidth: resourceColumnWidth },
-                          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.jsxs)("div", { className: "flex min-h-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            "div",
+            {
+              ref: leftRef,
+              className: "shrink-0 overflow-y-auto overflow-x-hidden scrollbar-none",
+              style: { width: effectiveResourceColumnWidth, minWidth: effectiveResourceColumnWidth },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: topSpacer } }),
+                rows.slice(startRow, endRow).map((row, idx) => {
+                  const rowIndex = startRow + idx;
+                  if (row.kind === "group") {
+                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: effectiveRowHeight }, children: renderGroupRow(row.group) }, `lg_${row.group.id}_${rowIndex}`);
+                  }
+                  const r = row.resource;
+                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: effectiveRowHeight }, children: ResourceCell(r) }, `lr_${r.id}_${rowIndex}`);
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: bottomSpacer } })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+            "div",
+            {
+              ref: bodyRef,
+              className: "relative flex-1 overflow-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent",
+              onPointerMove,
+              onPointerUp,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: topSpacer } }),
+                rows.slice(startRow, endRow).map((row, idx) => {
+                  const rowIndex = startRow + idx;
+                  if (row.kind === "group") {
+                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex", style: { height: effectiveRowHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "border-b border-border/30 bg-linear-to-r from-muted/15 to-muted/5", style: { width: gridWidth, minWidth: gridWidth } }) }, `rg_${row.group.id}_${rowIndex}`);
+                  }
+                  const r = row.resource;
+                  const layout = layoutsByResource.get(r.id) ?? { visible: [], hidden: [] };
+                  const canMore = layout.hidden.length > 0 && !!onMoreClick;
+                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                    "div",
+                    {
+                      className: "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.jsxs)("div", { className: "relative shrink-0", style: { width: gridWidth, minWidth: gridWidth, height: "100%" }, 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",
                           {
@@ -8673,15 +8751,15 @@ function CalendarTimeline({
                           }
                         ) : null
                       ] })
-                    ]
-                  },
-                  `r_${r.id}_${rowIndex}`
-                );
-              }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: bottomSpacer } })
-            ]
-          }
-        )
+                    },
+                    `rr_${r.id}_${rowIndex}`
+                  );
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: bottomSpacer } })
+              ]
+            }
+          )
+        ] })
       ]
     }
   );
@@ -18176,9 +18254,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",