@underverse-ui/underverse 0.2.85 → 0.2.86

package/dist/index.cjs

@@ -7987,6 +7987,7 @@ function defaultEventTime(args) {
 function CalendarTimeline({
   resources,
   events,
+  size = "md",
   view,
   defaultView = "month",
   onViewChange,
@@ -8002,9 +8003,9 @@ function CalendarTimeline({
   groupCollapsed,
   defaultGroupCollapsed,
   onGroupCollapsedChange,
-  resourceColumnWidth = 240,
-  rowHeight = 52,
-  slotMinWidth = 64,
+  resourceColumnWidth,
+  rowHeight,
+  slotMinWidth,
   dayTimeStepMinutes = 60,
   maxLanesPerRow = 3,
   now,
@@ -8027,6 +8028,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 +8213,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();
@@ -8188,10 +8245,10 @@ function CalendarTimeline({
   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 +8259,7 @@ function CalendarTimeline({
   } = useVirtualRows({
     enabled: virt,
     overscan,
-    rowHeight,
+    rowHeight: effectiveRowHeight,
     itemCount: rows.length,
     scrollRef: bodyRef
   });
@@ -8349,8 +8406,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 +8445,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 +8465,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 +8476,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 +8486,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 +8497,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 +8511,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 +8527,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 +8539,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 }) })
       ]
     }
@@ -8538,9 +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: [
-                    /* @__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 } })
+                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex", style: { height: effectiveRowHeight }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                      "div",
+                      {
+                        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/30 bg-linear-to-r from-muted/15 to-muted/5", style: { minWidth: gridWidth } })
                   ] }, `g_${row.group.id}_${rowIndex}`);
                 }
                 const r = row.resource;
@@ -8550,18 +8618,18 @@ function CalendarTimeline({
                   "div",
                   {
                     className: "flex group/row hover:bg-muted/5 transition-colors duration-150",
-                    style: { height: rowHeight },
+                    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/30",
-                          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.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",
                           {
@@ -18176,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",