@underverse-ui/underverse 0.2.93 → 0.2.94

package/dist/index.cjs

@@ -8236,8 +8236,19 @@ function useHorizontalScrollSync(args) {
     };
   }, [bodyRef, headerRef, leftRef]);
 }
-function useVirtualRows(args) {
-  const { enabled, overscan, rowHeight, itemCount, scrollRef } = args;
+function lowerBound(arr, target) {
+  let lo = 0;
+  let hi = arr.length;
+  while (lo < hi) {
+    const mid = lo + hi >> 1;
+    if (arr[mid] < target) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+function useVirtualVariableRows(args) {
+  const { enabled, overscan, rowHeights, scrollRef } = args;
+  const itemCount = rowHeights.length;
   const [viewportHeight, setViewportHeight] = React27.useState(0);
   const [scrollTop, setScrollTop] = React27.useState(0);
   React27.useEffect(() => {
@@ -8256,16 +8267,28 @@ function useVirtualRows(args) {
     el.addEventListener("scroll", onScroll, { passive: true });
     return () => el.removeEventListener("scroll", onScroll);
   }, [scrollRef]);
+  const prefix = React27.useMemo(() => {
+    const out = new Array(itemCount + 1);
+    out[0] = 0;
+    for (let i = 0; i < itemCount; i++) {
+      out[i + 1] = out[i] + (rowHeights[i] ?? 0);
+    }
+    return out;
+  }, [itemCount, rowHeights]);
   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]);
+      return { startIndex: 0, endIndex: itemCount, topSpacer: 0, bottomSpacer: 0, totalHeight: prefix[itemCount] ?? 0 };
+    }
+    const total = prefix[itemCount] ?? 0;
+    const startPos = Math.max(0, Math.min(scrollTop, total));
+    const endPos = Math.max(0, Math.min(scrollTop + viewportHeight, total));
+    let startIndex = Math.max(0, lowerBound(prefix, startPos) - 1);
+    let endIndex = Math.min(itemCount, lowerBound(prefix, endPos) + overscan);
+    startIndex = clamp3(startIndex - overscan, 0, itemCount);
+    const topSpacer = prefix[startIndex] ?? 0;
+    const bottomSpacer = total - (prefix[endIndex] ?? total);
+    return { startIndex, endIndex, topSpacer, bottomSpacer, totalHeight: total };
+  }, [enabled, itemCount, overscan, prefix, scrollTop, viewportHeight]);
 }
 
 // ../../components/ui/CalendarTimeline/CalendarTimeline.tsx
@@ -8322,7 +8345,19 @@ function CalendarTimeline({
   defaultGroupCollapsed,
   onGroupCollapsedChange,
   resourceColumnWidth,
+  defaultResourceColumnWidth,
+  onResourceColumnWidthChange,
+  minResourceColumnWidth,
+  maxResourceColumnWidth,
   rowHeight,
+  defaultRowHeight,
+  onRowHeightChange,
+  minRowHeight,
+  maxRowHeight,
+  rowHeights,
+  defaultRowHeights,
+  onRowHeightsChange,
+  enableLayoutResize,
   slotMinWidth,
   dayTimeStepMinutes = 60,
   maxLanesPerRow = 3,
@@ -8421,9 +8456,42 @@ function CalendarTimeline({
     };
     return cfgBySize[size];
   }, [size]);
-  const effectiveResourceColumnWidth = resourceColumnWidth ?? sizeConfig.resourceColumnWidth;
-  const effectiveRowHeight = rowHeight ?? sizeConfig.rowHeight;
+  const canResizeColumn = React28.useMemo(() => {
+    const cfg = enableLayoutResize;
+    if (!cfg) return false;
+    if (cfg === true) return true;
+    return cfg.column !== false;
+  }, [enableLayoutResize]);
+  const canResizeRow = React28.useMemo(() => {
+    const cfg = enableLayoutResize;
+    if (!cfg) return false;
+    if (cfg === true) return true;
+    return cfg.row !== false;
+  }, [enableLayoutResize]);
+  const isControlledResourceColumnWidth = resourceColumnWidth !== void 0;
+  const [internalResourceColumnWidth, setInternalResourceColumnWidth] = React28.useState(() => {
+    const init = defaultResourceColumnWidth ?? sizeConfig.resourceColumnWidth;
+    return typeof init === "number" ? init : sizeConfig.resourceColumnWidth;
+  });
+  React28.useEffect(() => {
+    if (isControlledResourceColumnWidth) return;
+    if (defaultResourceColumnWidth == null) return;
+    setInternalResourceColumnWidth(defaultResourceColumnWidth);
+  }, [defaultResourceColumnWidth, isControlledResourceColumnWidth]);
+  const effectiveResourceColumnWidth = isControlledResourceColumnWidth ? resourceColumnWidth : internalResourceColumnWidth;
+  const isControlledRowHeight = rowHeight !== void 0;
+  const [internalRowHeight, setInternalRowHeight] = React28.useState(() => defaultRowHeight ?? sizeConfig.rowHeight);
+  React28.useEffect(() => {
+    if (isControlledRowHeight) return;
+    if (defaultRowHeight == null) return;
+    setInternalRowHeight(defaultRowHeight);
+  }, [defaultRowHeight, isControlledRowHeight]);
+  const effectiveRowHeight = isControlledRowHeight ? rowHeight : internalRowHeight;
   const effectiveSlotMinWidth = slotMinWidth ?? sizeConfig.slotMinWidth;
+  const colMin = minResourceColumnWidth ?? 160;
+  const colMax = maxResourceColumnWidth ?? 520;
+  const rowMin = minRowHeight ?? 36;
+  const rowMax = maxRowHeight ?? 120;
   const isControlledView = view !== void 0;
   const [internalView, setInternalView] = React28.useState(defaultView);
   const activeView = isControlledView ? view : internalView;
@@ -8613,6 +8681,135 @@ function CalendarTimeline({
   const bodyRef = React28.useRef(null);
   const headerRef = React28.useRef(null);
   useHorizontalScrollSync({ bodyRef, headerRef, leftRef });
+  const virt = virtualization?.enabled;
+  const overscan = virtualization?.overscan ?? 8;
+  const isControlledRowHeights = rowHeights !== void 0;
+  const [internalRowHeights, setInternalRowHeights] = React28.useState(() => defaultRowHeights ?? {});
+  React28.useEffect(() => {
+    if (isControlledRowHeights) return;
+    if (!defaultRowHeights) return;
+    setInternalRowHeights(defaultRowHeights);
+  }, [defaultRowHeights, isControlledRowHeights]);
+  const activeRowHeights = isControlledRowHeights ? rowHeights : internalRowHeights;
+  const getResourceRowHeight = React28.useCallback(
+    (resourceId) => {
+      const h = activeRowHeights[resourceId];
+      if (typeof h === "number" && Number.isFinite(h) && h > 0) return h;
+      return effectiveRowHeight;
+    },
+    [activeRowHeights, effectiveRowHeight]
+  );
+  const setRowHeightForResource = React28.useCallback(
+    (resourceId, height) => {
+      const clamped = clamp3(Math.round(height), rowMin, rowMax);
+      onRowHeightChange?.(clamped);
+      if (isControlledRowHeights) {
+        const next = { ...activeRowHeights ?? {}, [resourceId]: clamped };
+        onRowHeightsChange?.(next);
+        return;
+      }
+      setInternalRowHeights((prev) => {
+        const next = { ...prev, [resourceId]: clamped };
+        onRowHeightsChange?.(next);
+        return next;
+      });
+    },
+    [activeRowHeights, isControlledRowHeights, onRowHeightChange, onRowHeightsChange, rowMax, rowMin]
+  );
+  const rowHeightsArray = React28.useMemo(() => {
+    return rows.map((r) => {
+      if (r.kind === "resource") return getResourceRowHeight(r.resource.id);
+      return effectiveRowHeight;
+    });
+  }, [effectiveRowHeight, getResourceRowHeight, rows]);
+  const virtualResult = useVirtualVariableRows({
+    enabled: virt,
+    overscan,
+    rowHeights: rowHeightsArray,
+    scrollRef: bodyRef
+  });
+  const startRow = virt ? virtualResult.startIndex : 0;
+  const endRow = virt ? virtualResult.endIndex : rows.length;
+  const topSpacer = virt ? virtualResult.topSpacer : 0;
+  const bottomSpacer = virt ? virtualResult.bottomSpacer : 0;
+  const resizeRef = React28.useRef(null);
+  const setResourceColumnWidth = React28.useCallback(
+    (next) => {
+      const clamped = clamp3(Math.round(next), colMin, colMax);
+      if (!isControlledResourceColumnWidth) setInternalResourceColumnWidth(clamped);
+      onResourceColumnWidthChange?.(clamped);
+    },
+    [colMax, colMin, isControlledResourceColumnWidth, onResourceColumnWidthChange]
+  );
+  const startResize = React28.useCallback(
+    (mode, e, args) => {
+      resizeRef.current = {
+        mode,
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        startWidth: args.startWidth,
+        startHeight: args.startHeight,
+        resourceId: args.resourceId
+      };
+      document.body.style.cursor = mode === "column" ? "col-resize" : "row-resize";
+      document.body.style.userSelect = "none";
+      const onMove = (ev) => {
+        const st = resizeRef.current;
+        if (!st) return;
+        if (ev.pointerId !== st.pointerId) return;
+        if (st.mode === "column") {
+          setResourceColumnWidth(st.startWidth + (ev.clientX - st.startX));
+        } else {
+          if (!st.resourceId) return;
+          setRowHeightForResource(st.resourceId, st.startHeight + (ev.clientY - st.startY));
+        }
+      };
+      const onUp = (ev) => {
+        const st = resizeRef.current;
+        if (!st) return;
+        if (ev.pointerId !== st.pointerId) return;
+        resizeRef.current = null;
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      e.currentTarget.setPointerCapture?.(e.pointerId);
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [setResourceColumnWidth, setRowHeightForResource]
+  );
+  React28.useEffect(() => {
+    return () => {
+      if (!resizeRef.current) return;
+      resizeRef.current = null;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+  }, []);
+  const beginResizeColumn = React28.useCallback(
+    (e) => {
+      if (!canResizeColumn) return;
+      if (typeof effectiveResourceColumnWidth !== "number") return;
+      startResize("column", e, { startWidth: effectiveResourceColumnWidth, startHeight: effectiveRowHeight });
+    },
+    [canResizeColumn, effectiveResourceColumnWidth, effectiveRowHeight, startResize]
+  );
+  const beginResizeResourceRow = React28.useCallback(
+    (resourceId) => (e) => {
+      if (!canResizeRow) return;
+      startResize("row", e, {
+        startWidth: typeof effectiveResourceColumnWidth === "number" ? effectiveResourceColumnWidth : 0,
+        startHeight: getResourceRowHeight(resourceId),
+        resourceId
+      });
+    },
+    [canResizeRow, effectiveResourceColumnWidth, getResourceRowHeight, startResize]
+  );
   const title = React28.useMemo(() => {
     if (activeView === "month") {
       return formatters?.monthTitle?.(activeDate, { locale: resolvedLocale, timeZone: resolvedTimeZone }) ?? defaultMonthTitle(activeDate, resolvedLocale, resolvedTimeZone);
@@ -8636,20 +8833,6 @@ function CalendarTimeline({
   const eventHeight = sizeConfig.eventHeight;
   const laneGap = sizeConfig.laneGap;
   const lanePaddingY = sizeConfig.lanePaddingY;
-  const virt = virtualization?.enabled;
-  const overscan = virtualization?.overscan ?? 8;
-  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(
@@ -8910,12 +9093,34 @@ function CalendarTimeline({
       )) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex border-t border-border/20", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
         "div",
         {
-          className: "shrink-0 border-r border-border/30 bg-muted/20 flex items-center justify-center",
+          className: "shrink-0 border-r border-border/30 bg-muted/20 flex items-center justify-center relative group/uv-ct-top-left",
           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") })
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-xs font-medium text-muted-foreground/70 uppercase tracking-wider", children: t("resourcesHeader") }),
+            canResizeColumn && typeof effectiveResourceColumnWidth === "number" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+              "div",
+              {
+                role: "separator",
+                "aria-orientation": "vertical",
+                "aria-label": "Resize resource column",
+                className: cn(
+                  "absolute right-0 top-0 h-full w-3 cursor-col-resize z-20",
+                  "bg-transparent hover:bg-primary/10 active:bg-primary/15",
+                  "transition-all",
+                  "opacity-0 pointer-events-none",
+                  "group-hover/uv-ct-top-left:opacity-100 group-hover/uv-ct-top-left:pointer-events-auto"
+                ),
+                onPointerDown: beginResizeColumn,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-y-2 left-1/2 w-px -translate-x-1/2 bg-border/70" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-70", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.GripVertical, { className: "h-4 w-4 text-muted-foreground" }) })
+                ]
+              }
+            ) : null
+          ]
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref: headerRef, className: "overflow-x-auto overflow-y-hidden scrollbar-none", children: slotHeaderNodes })
@@ -8925,13 +9130,33 @@ function CalendarTimeline({
     "div",
     {
       className: cn(
-        "h-full w-full flex items-center border-b border-border/30 bg-linear-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 relative",
         sizeConfig.resourceRowClass,
-        "hover:from-muted/30 hover:to-muted/10 transition-all duration-200 group"
+        "hover:from-muted/30 hover:to-muted/10 transition-all duration-200 group/uv-ct-row-header"
       ),
       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 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "shrink-0 opacity-0 group-hover/uv-ct-row-header: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 }) }),
+        canResizeRow ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          "div",
+          {
+            role: "separator",
+            "aria-orientation": "horizontal",
+            "aria-label": "Resize row height",
+            className: cn(
+              "absolute left-0 bottom-0 w-full h-3 cursor-row-resize z-20",
+              "bg-transparent hover:bg-primary/10 active:bg-primary/15",
+              "transition-all",
+              "opacity-0 pointer-events-none",
+              "group-hover/uv-ct-row-header:opacity-100 group-hover/uv-ct-row-header:pointer-events-auto"
+            ),
+            onPointerDown: beginResizeResourceRow(r.id),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute inset-x-3 top-1/2 h-px -translate-y-1/2 bg-border/70" }),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "absolute top-1/2 right-3 -translate-y-1/2 opacity-70", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react18.GripVertical, { className: "h-4 w-4 text-muted-foreground rotate-90" }) })
+            ]
+          }
+        ) : null
       ]
     }
   );
@@ -8984,11 +9209,12 @@ function CalendarTimeline({
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: topSpacer } }),
                 rows.slice(startRow, endRow).map((row, idx) => {
                   const rowIndex = startRow + idx;
+                  const h = rowHeightsArray[rowIndex] ?? effectiveRowHeight;
                   if (row.kind === "group") {
-                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: effectiveRowHeight }, children: renderGroupRow(row.group) }, `lg_${row.group.id}_${rowIndex}`);
+                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: h }, 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}`);
+                  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: h }, children: ResourceCell(r) }, `lr_${r.id}_${rowIndex}`);
                 }),
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: bottomSpacer } })
               ]
@@ -9005,8 +9231,9 @@ function CalendarTimeline({
                 /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { height: topSpacer } }),
                 rows.slice(startRow, endRow).map((row, idx) => {
                   const rowIndex = startRow + idx;
+                  const h = rowHeightsArray[rowIndex] ?? effectiveRowHeight;
                   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}`);
+                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex", style: { height: h }, 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: [] };
@@ -9015,7 +9242,7 @@ function CalendarTimeline({
                     "div",
                     {
                       className: "group/row hover:bg-muted/5 transition-colors duration-150",
-                      style: { height: effectiveRowHeight },
+                      style: { height: h },
                       "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)(