@underverse-ui/underverse 0.2.95 → 0.2.97

package/dist/index.cjs

@@ -8308,9 +8308,9 @@ function useClientWidth(ref) {
 var SIZE_CONFIG_BY_SIZE = {
   sm: {
     resourceColumnWidth: 200,
-    rowHeight: 44,
+    rowHeight: 66,
     slotMinWidth: 52,
-    eventHeight: 20,
+    eventHeight: 40,
     laneGap: 3,
     lanePaddingY: 5,
     densityClass: "text-xs",
@@ -8324,9 +8324,9 @@ var SIZE_CONFIG_BY_SIZE = {
   },
   md: {
     resourceColumnWidth: 240,
-    rowHeight: 52,
+    rowHeight: 78,
     slotMinWidth: 64,
-    eventHeight: 24,
+    eventHeight: 48,
     laneGap: 4,
     lanePaddingY: 6,
     densityClass: "text-sm",
@@ -8340,9 +8340,9 @@ var SIZE_CONFIG_BY_SIZE = {
   },
   xl: {
     resourceColumnWidth: 280,
-    rowHeight: 60,
+    rowHeight: 90,
     slotMinWidth: 76,
-    eventHeight: 28,
+    eventHeight: 56,
     laneGap: 5,
     lanePaddingY: 8,
     densityClass: "text-base",
@@ -8492,6 +8492,9 @@ function CalendarTimelineHeader(props) {
     title,
     resourcesHeaderLabel,
     labels,
+    newEventLabel,
+    newEventDisabled,
+    onNewEventClick,
     activeView,
     sizeConfig,
     navigate,
@@ -8542,24 +8545,38 @@ function CalendarTimelineHeader(props) {
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h2", { className: cn("ml-3 font-semibold tracking-tight truncate text-foreground", sizeConfig.titleClass), children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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: [
-            VIEW_ICONS[v],
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hidden sm:inline", children: labels[v] })
-          ]
-        },
-        v
-      )) })
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
+        onNewEventClick ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          Button_default,
+          {
+            variant: "default",
+            size: "sm",
+            icon: import_lucide_react18.Plus,
+            disabled: newEventDisabled,
+            onClick: onNewEventClick,
+            className: cn(sizeConfig.controlButtonTextClass, "rounded-lg font-medium transition-all duration-200 gap-1.5"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hidden sm:inline", children: newEventLabel })
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.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: [
+              VIEW_ICONS[v],
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "hidden sm:inline", children: labels[v] })
+            ]
+          },
+          v
+        )) })
+      ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex border-t border-border/20", children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
@@ -8728,6 +8745,7 @@ function CalendarTimeline({
   onRangeChange,
   onEventClick,
   onEventDoubleClick,
+  onCreateEventClick,
   onCreateEvent,
   onEventMove,
   onEventResize,
@@ -8742,6 +8760,7 @@ function CalendarTimeline({
   const resolvedLocale = React28.useMemo(() => localeToBCP47(locale ?? detectedLocale), [locale, detectedLocale]);
   const resolvedTimeZone = React28.useMemo(() => timeZone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC", [timeZone]);
   const effectiveEnableEventSheet = enableEventSheet ?? Boolean(renderEventSheet);
+  const isViewOnly = interactions?.mode === "view";
   const isControlledSelectedEventId = selectedEventId !== void 0;
   const [internalSelectedEventId, setInternalSelectedEventId] = React28.useState(defaultSelectedEventId ?? null);
   const activeSelectedEventId = isControlledSelectedEventId ? selectedEventId : internalSelectedEventId;
@@ -8767,15 +8786,17 @@ function CalendarTimeline({
   const canResizeColumn = React28.useMemo(() => {
     const cfg = enableLayoutResize;
     if (!cfg) return false;
+    if (isViewOnly) return false;
     if (cfg === true) return true;
     return cfg.column !== false;
-  }, [enableLayoutResize]);
+  }, [enableLayoutResize, isViewOnly]);
   const canResizeRow = React28.useMemo(() => {
     const cfg = enableLayoutResize;
     if (!cfg) return false;
+    if (isViewOnly) return false;
     if (cfg === true) return true;
     return cfg.row !== false;
-  }, [enableLayoutResize]);
+  }, [enableLayoutResize, isViewOnly]);
   const isControlledResourceColumnWidth = resourceColumnWidth !== void 0;
   const [internalResourceColumnWidth, setInternalResourceColumnWidth] = React28.useState(() => {
     const init = defaultResourceColumnWidth ?? sizeConfig.resourceColumnWidth;
@@ -8815,6 +8836,13 @@ function CalendarTimeline({
       month: labels?.month ?? t("month"),
       week: labels?.week ?? t("week"),
       day: labels?.day ?? t("day"),
+      newEvent: labels?.newEvent ?? t("newEvent"),
+      createEventTitle: labels?.createEventTitle ?? t("createEventTitle"),
+      create: labels?.create ?? t("create"),
+      cancel: labels?.cancel ?? t("cancel"),
+      resource: labels?.resource ?? t("resource"),
+      start: labels?.start ?? t("start"),
+      end: labels?.end ?? t("end"),
       expandGroup: labels?.expandGroup ?? t("expandGroup"),
       collapseGroup: labels?.collapseGroup ?? t("collapseGroup"),
       more: labels?.more ?? ((n) => t("more", { n })),
@@ -9082,6 +9110,69 @@ function CalendarTimeline({
   const eventHeight = sizeConfig.eventHeight;
   const laneGap = sizeConfig.laneGap;
   const lanePaddingY = sizeConfig.lanePaddingY;
+  const createMode = interactions?.createMode ?? "drag";
+  const canCreate = !isViewOnly && (interactions?.creatable ?? false) && !!onCreateEvent;
+  const [createOpen, setCreateOpen] = React28.useState(false);
+  const [createResourceId, setCreateResourceId] = React28.useState(null);
+  const [createStartIdx, setCreateStartIdx] = React28.useState(0);
+  const [createEndIdx, setCreateEndIdx] = React28.useState(1);
+  const resourceOptions = React28.useMemo(() => {
+    return resources.map((r) => ({
+      label: typeof r.label === "string" ? r.label : r.id,
+      value: r.id,
+      description: r.groupId ? String(r.groupId) : void 0,
+      disabled: r.disabled ?? false
+    }));
+  }, [resources]);
+  const slotPickerLabel = React28.useMemo(() => {
+    const timeFmt = getDtf(resolvedLocale, resolvedTimeZone, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
+    const dayFmt = getDtf(resolvedLocale, resolvedTimeZone, { weekday: "short", month: "short", day: "numeric" });
+    return (d) => activeView === "day" ? timeFmt.format(d) : dayFmt.format(d);
+  }, [activeView, resolvedLocale, resolvedTimeZone]);
+  const openCreate = React28.useCallback(() => {
+    if (!canCreate) return;
+    if (activeEventSheetOpen) setEventSheetOpen(false);
+    const firstResource = resources.find((r) => !r.disabled)?.id ?? resources[0]?.id ?? null;
+    setCreateResourceId(firstResource ?? null);
+    let startIdx = 0;
+    if (slots.length > 0) {
+      if (activeView === "day") {
+        const inRange = resolvedNow.getTime() >= range.start.getTime() && resolvedNow.getTime() < range.end.getTime();
+        startIdx = clamp3(inRange ? binarySearchFirstGE(slotStarts, resolvedNow) : 0, 0, slots.length - 1);
+      } else {
+        const dayStart = startOfZonedDay(activeDate, resolvedTimeZone);
+        startIdx = clamp3(binarySearchLastLE(slotStarts, dayStart), 0, slots.length - 1);
+      }
+    }
+    setCreateStartIdx(startIdx);
+    setCreateEndIdx(Math.min(slots.length, startIdx + 1));
+    setCreateOpen(true);
+  }, [activeDate, activeEventSheetOpen, activeView, canCreate, range.end, range.start, resolvedNow, resolvedTimeZone, resources, setEventSheetOpen, slotStarts, slots.length]);
+  React28.useEffect(() => {
+    setCreateEndIdx((prev) => Math.min(slots.length, Math.max(prev, createStartIdx + 1)));
+  }, [createStartIdx, slots.length]);
+  const createStartOptions = React28.useMemo(() => {
+    return slotStarts.map((d, idx) => ({ label: slotPickerLabel(d), value: idx }));
+  }, [slotStarts, slotPickerLabel]);
+  const createEndOptions = React28.useMemo(() => {
+    const out = [];
+    for (let idx = createStartIdx + 1; idx <= slotStarts.length; idx++) {
+      const boundary = idx >= slotStarts.length ? range.end : slotStarts[idx];
+      out.push({ label: slotPickerLabel(boundary), value: idx });
+    }
+    return out;
+  }, [createStartIdx, range.end, slotPickerLabel, slotStarts]);
+  const commitCreate = React28.useCallback(() => {
+    if (!onCreateEvent) return;
+    if (!createResourceId) return;
+    const start = slotStarts[clamp3(createStartIdx, 0, Math.max(0, slotStarts.length - 1))];
+    if (!start) return;
+    const endBoundary = createEndIdx >= slotStarts.length ? range.end : slotStarts[createEndIdx];
+    if (!endBoundary) return;
+    if (endBoundary.getTime() <= start.getTime()) return;
+    onCreateEvent({ resourceId: createResourceId, start, end: endBoundary });
+    setCreateOpen(false);
+  }, [createEndIdx, createResourceId, createStartIdx, onCreateEvent, range.end, slotStarts]);
   const dragRef = React28.useRef(null);
   const [preview, setPreview] = React28.useState(null);
   const suppressNextEventClickRef = React28.useRef(false);
@@ -9114,6 +9205,7 @@ function CalendarTimeline({
   );
   const onPointerDownEvent = (e, ev, mode) => {
     if (e.button !== 0 || e.ctrlKey) return;
+    if (isViewOnly) return;
     if (ev.resourceId == null) return;
     const allowDrag = interactions?.draggableEvents ?? true;
     const allowResize = interactions?.resizableEvents ?? true;
@@ -9141,7 +9233,9 @@ function CalendarTimeline({
   };
   const onPointerDownCell = (e) => {
     if (e.button !== 0 || e.ctrlKey) return;
+    if (isViewOnly) return;
     if (!(interactions?.creatable ?? false) || !onCreateEvent) return;
+    if (createMode === "click") return;
     const ctx = getPointerContext(e.clientX, e.clientY, { biasLeft: true });
     if (!ctx?.resourceId) return;
     const { start } = slotToDate(ctx.slotIdx);
@@ -9162,6 +9256,25 @@ function CalendarTimeline({
     e.currentTarget.setPointerCapture(e.pointerId);
     e.preventDefault();
   };
+  const onClickCell = (e) => {
+    if (e.button !== 0 || e.ctrlKey) return;
+    if (isViewOnly) return;
+    if (!(interactions?.creatable ?? false)) return;
+    if (createMode !== "click") return;
+    if (!onCreateEventClick) return;
+    const ctx = getPointerContext(e.clientX, e.clientY, { biasLeft: true });
+    if (!ctx?.resourceId) return;
+    const { start, end } = slotToDate(ctx.slotIdx);
+    onCreateEventClick({
+      resourceId: ctx.resourceId,
+      start,
+      end: ctx.slotIdx + 1 >= slots.length ? range.end : end,
+      slotIdx: ctx.slotIdx,
+      view: activeView,
+      locale: resolvedLocale,
+      timeZone: resolvedTimeZone
+    });
+  };
   const onPointerMove = (e) => {
     const drag = dragRef.current;
     if (!drag || drag.pointerId !== e.pointerId) return;
@@ -9276,6 +9389,9 @@ function CalendarTimeline({
       title,
       resourcesHeaderLabel: t("resourcesHeader"),
       labels: { today: l.today, prev: l.prev, next: l.next, month: l.month, week: l.week, day: l.day },
+      newEventLabel: l.newEvent,
+      newEventDisabled: isViewOnly || !canCreate || resources.length === 0,
+      onNewEventClick: isViewOnly ? void 0 : openCreate,
       activeView,
       sizeConfig,
       navigate,
@@ -9391,7 +9507,7 @@ function CalendarTimeline({
                       "data-uv-ct-row": r.id,
                       children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative shrink-0", style: { width: gridWidth, minWidth: gridWidth, height: "100%" }, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-px bg-border/25" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute inset-0", onPointerDown: onPointerDownCell, "data-uv-ct-timeline": true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute inset-0 flex", children: slots.map((s, i2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute inset-0", onPointerDown: onPointerDownCell, onClick: onClickCell, "data-uv-ct-timeline": true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "absolute inset-0 flex", children: slots.map((s, i2) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                           "div",
                           {
                             className: cn(
@@ -9451,6 +9567,7 @@ function CalendarTimeline({
                               tabIndex: 0,
                               "aria-label": aria,
                               onContextMenu: (e) => {
+                                if (isViewOnly) return;
                                 if (!onEventDelete) return;
                                 if (interactions?.deletableEvents === false) return;
                                 e.preventDefault();
@@ -9473,7 +9590,7 @@ function CalendarTimeline({
                               onDoubleClick: () => onEventDoubleClick?.(ev),
                               onPointerDown: (e) => onPointerDownEvent(e, ev, "move"),
                               children: [
-                                (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+                                !isViewOnly && (interactions?.resizableEvents ?? true) && ev.resizable !== false ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
                                   /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                                     "div",
                                     {
@@ -9563,6 +9680,70 @@ function CalendarTimeline({
               ] })
             ] })
           }
+        ) : null,
+        canCreate ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          Sheet,
+          {
+            open: createOpen,
+            onOpenChange: setCreateOpen,
+            side: "right",
+            size: "md",
+            title: l.createEventTitle,
+            description: activeView === "day" ? l.day : activeView === "week" ? l.week : l.month,
+            children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-xs text-muted-foreground", children: l.resource }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  Combobox,
+                  {
+                    options: resourceOptions,
+                    value: createResourceId,
+                    onChange: (v) => setCreateResourceId(v),
+                    placeholder: l.resource
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-xs text-muted-foreground", children: l.start }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    Combobox,
+                    {
+                      options: createStartOptions,
+                      value: createStartIdx,
+                      onChange: (v) => setCreateStartIdx(Number(v)),
+                      placeholder: l.start
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "text-xs text-muted-foreground", children: l.end }),
+                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                    Combobox,
+                    {
+                      options: createEndOptions,
+                      value: createEndIdx,
+                      onChange: (v) => setCreateEndIdx(Number(v)),
+                      placeholder: l.end
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-end gap-2 pt-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => setCreateOpen(false), children: l.cancel }),
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                  Button_default,
+                  {
+                    variant: "default",
+                    size: "sm",
+                    onClick: commitCreate,
+                    disabled: !createResourceId || createEndIdx <= createStartIdx || createStartOptions.length === 0,
+                    children: l.create
+                  }
+                )
+              ] })
+            ] })
+          }
         ) : null
       ]
     }