@pisell/materials 6.11.37 → 6.11.39

package/lib/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarDayView.js

@@ -0,0 +1,812 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRecordBoard/shellFrame/Calendar/view/BookingCalendarDayView.tsx
+var BookingCalendarDayView_exports = {};
+__export(BookingCalendarDayView_exports, {
+  BookingCalendarDayView: () => BookingCalendarDayView
+});
+module.exports = __toCommonJS(BookingCalendarDayView_exports);
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_pisellDateTimeDisplay = require("../../../../pisellDateTimeDisplay");
+var import_bookingCalendarDateUtils = require("../utils/bookingCalendarDateUtils");
+var import_bookingCalendarConstants = require("../const/bookingCalendarConstants");
+var import_bookingCalendarViewShared = require("../bookingCalendarViewShared");
+var import_calendarI18n = require("../calendarI18n");
+var import_BookingCalendarDaySelectionBar = require("./BookingCalendarDaySelectionBar");
+var import_bookingCalendarDayViewContext = require("./bookingCalendarDayViewContext");
+function BookingCalendarDayView(dayProps) {
+  var _a, _b, _c;
+  const props = dayProps.calendarProps;
+  const {
+    isLight,
+    view,
+    anchorDate,
+    dayKey,
+    hourSlots,
+    resolvedSlotMinutes,
+    slotColWidth,
+    firstTimelineHour,
+    endTimelineExclusive,
+    isBusinessHour,
+    dayHourRemaining,
+    timelinePxPerHour,
+    dayContentHeight,
+    dayRowHeights,
+    visibleCourtRows,
+    overlayBookings,
+    dayOverlayOverflowPluses,
+    setCollapsedGroups,
+    visibleCourts,
+    bookings,
+    slotStepHours,
+    isFreeSelected,
+    isBlockSelected,
+    toggleSlot,
+    handleDropMove,
+    hiddenDayOverlayIdSet,
+    courtDayDisplayLaneCount,
+    openBookingDetail,
+    setDraggingItem,
+    setNavDirection,
+    commitAnchor,
+    setFocusedCourtId,
+    setOverflowListModal,
+    selectedFreeSlots,
+    selectedBlockSlots,
+    deselectAll,
+    openSelectedBlocks,
+    onOpenBlockPanel,
+    createBookingFromSelection,
+    focusedCourtId,
+    dayRowRemainingByCourt
+  } = dayProps;
+  const dayScrollRef = (0, import_react.useRef)(null);
+  const dayBodyGridRef = (0, import_react.useRef)(null);
+  const dayVirtRafRef = (0, import_react.useRef)(null);
+  const dayDragRef = (0, import_react.useRef)({
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    startLeft: 0,
+    startTop: 0,
+    moved: false
+  });
+  const [dayVirt, setDayVirt] = (0, import_react.useState)({
+    i0: 0,
+    i1: 0,
+    r0: 0,
+    r1: 0,
+    ready: false
+  });
+  const [dayDragging, setDayDragging] = (0, import_react.useState)(false);
+  const dayRowPrefixTop = (0, import_react.useMemo)(() => {
+    const p = [0];
+    for (let i = 0; i < dayRowHeights.length; i++) {
+      p.push(p[i] + (dayRowHeights[i] ?? import_bookingCalendarConstants.dayRowHeight));
+    }
+    return p;
+  }, [dayRowHeights]);
+  const updateDayViewport = (0, import_react.useCallback)(() => {
+    const root = dayScrollRef.current;
+    const body = dayBodyGridRef.current;
+    if (!root || !body) return;
+    if (props.renderTimelineHeader) {
+      setDayVirt({
+        i0: 0,
+        i1: Math.max(0, hourSlots.length - 1),
+        r0: 0,
+        r1: Math.max(0, visibleCourtRows.length - 1),
+        ready: false
+      });
+      return;
+    }
+    const n = hourSlots.length;
+    const nr = visibleCourtRows.length;
+    if (n <= 0 || nr <= 0) return;
+    const W = slotColWidth;
+    const FC = import_bookingCalendarConstants.frozenColWidth;
+    const sl = root.scrollLeft;
+    const st = root.scrollTop;
+    const vw = root.clientWidth;
+    const vh = root.clientHeight;
+    const bodyTop = body.offsetTop;
+    let i0 = Math.floor((sl - FC) / W) - import_bookingCalendarConstants.DAY_VIEW_COL_BUFFER;
+    let i1 = Math.ceil((sl + vw - FC) / W) - 1 + import_bookingCalendarConstants.DAY_VIEW_COL_BUFFER;
+    i0 = Math.max(0, i0);
+    i1 = Math.min(n - 1, i1);
+    if (i0 > i1) {
+      i0 = 0;
+      i1 = n - 1;
+    }
+    const vTop = st;
+    const vBot = st + vh;
+    const buf = import_bookingCalendarConstants.DAY_VIEW_ROW_BUFFER_PX;
+    let r0 = 0;
+    let r1 = nr - 1;
+    const pfx = dayRowPrefixTop;
+    for (let r = 0; r < nr; r++) {
+      const y0 = bodyTop + (pfx[r] ?? 0);
+      const y1 = bodyTop + (pfx[r + 1] ?? 0);
+      if (y1 > vTop - buf) {
+        r0 = r;
+        break;
+      }
+    }
+    for (let r = nr - 1; r >= 0; r--) {
+      const y0 = bodyTop + (pfx[r] ?? 0);
+      if (y0 < vBot + buf) {
+        r1 = r;
+        break;
+      }
+    }
+    if (r0 > r1) {
+      r0 = 0;
+      r1 = nr - 1;
+    }
+    setDayVirt((prev) => {
+      if (prev.ready && prev.i0 === i0 && prev.i1 === i1 && prev.r0 === r0 && prev.r1 === r1) {
+        return prev;
+      }
+      return { i0, i1, r0, r1, ready: true };
+    });
+  }, [
+    props.renderTimelineHeader,
+    hourSlots.length,
+    visibleCourtRows.length,
+    slotColWidth,
+    import_bookingCalendarConstants.frozenColWidth,
+    dayRowPrefixTop
+  ]);
+  const scheduleDayViewportUpdate = (0, import_react.useCallback)(() => {
+    if (dayVirtRafRef.current != null) return;
+    dayVirtRafRef.current = requestAnimationFrame(() => {
+      dayVirtRafRef.current = null;
+      updateDayViewport();
+    });
+  }, [updateDayViewport]);
+  (0, import_react.useLayoutEffect)(() => {
+    const root = dayScrollRef.current;
+    if (!root) return void 0;
+    scheduleDayViewportUpdate();
+    const onScroll = () => scheduleDayViewportUpdate();
+    root.addEventListener("scroll", onScroll, { passive: true });
+    let ro;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(() => scheduleDayViewportUpdate());
+      try {
+        ro.observe(root);
+      } catch {
+      }
+    }
+    return () => {
+      root.removeEventListener("scroll", onScroll);
+      if (ro) ro.disconnect();
+      if (dayVirtRafRef.current != null) {
+        cancelAnimationFrame(dayVirtRafRef.current);
+        dayVirtRafRef.current = null;
+      }
+    };
+  }, [
+    dayKey,
+    scheduleDayViewportUpdate,
+    hourSlots.length,
+    visibleCourtRows.length
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!focusedCourtId || !dayScrollRef.current) return;
+    const timer = setTimeout(() => {
+      var _a2;
+      const el = (_a2 = dayScrollRef.current) == null ? void 0 : _a2.querySelector(
+        `[data-court-row="${focusedCourtId}"]`
+      );
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }, 180);
+    return () => clearTimeout(timer);
+  }, [focusedCourtId, anchorDate, dayKey]);
+  const handleDayMouseMove = (0, import_react.useCallback)(
+    (e) => {
+      if (!dayDragRef.current.dragging || !dayScrollRef.current) return;
+      const dx = e.clientX - dayDragRef.current.startX;
+      const dy = e.clientY - dayDragRef.current.startY;
+      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dayDragRef.current.moved = true;
+      dayScrollRef.current.scrollLeft = dayDragRef.current.startLeft - dx;
+      dayScrollRef.current.scrollTop = dayDragRef.current.startTop - dy;
+      scheduleDayViewportUpdate();
+    },
+    [scheduleDayViewportUpdate]
+  );
+  const handleDayMouseUp = (0, import_react.useCallback)(() => {
+    dayDragRef.current.dragging = false;
+    setDayDragging(false);
+  }, []);
+  const handleDayMouseDown = (0, import_react.useCallback)((e) => {
+    if (!dayScrollRef.current) return;
+    const interactive = e.target.closest(
+      "button, input, select, textarea, a, label"
+    );
+    if (interactive) return;
+    const dragHost = e.target.closest("[draggable]");
+    if (dragHost instanceof HTMLElement && dragHost.draggable) return;
+    const el = dayScrollRef.current;
+    dayDragRef.current = {
+      dragging: true,
+      startX: e.clientX,
+      startY: e.clientY,
+      startLeft: el.scrollLeft,
+      startTop: el.scrollTop,
+      moved: false
+    };
+    setDayDragging(true);
+    e.preventDefault();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    window.addEventListener("mousemove", handleDayMouseMove);
+    window.addEventListener("mouseup", handleDayMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleDayMouseMove);
+      window.removeEventListener("mouseup", handleDayMouseUp);
+    };
+  }, [anchorDate, visibleCourts.length, handleDayMouseMove, handleDayMouseUp]);
+  const daySlotVirtEnabled = !props.renderTimelineHeader && dayVirt.ready;
+  const dayVirtI0 = daySlotVirtEnabled ? dayVirt.i0 : 0;
+  const dayVirtI1 = daySlotVirtEnabled ? dayVirt.i1 : Math.max(0, hourSlots.length - 1);
+  const dayVirtR0 = daySlotVirtEnabled ? dayVirt.r0 : 0;
+  const dayVirtR1 = daySlotVirtEnabled ? dayVirt.r1 : Math.max(0, visibleCourtRows.length - 1);
+  const dayVisibleSlotIndices = (0, import_react.useMemo)(() => {
+    const out = [];
+    for (let hi = dayVirtI0; hi <= dayVirtI1; hi++) out.push(hi);
+    return out;
+  }, [dayVirtI0, dayVirtI1]);
+  const courtRowIndexById = (0, import_react.useMemo)(() => {
+    const m = /* @__PURE__ */ new Map();
+    visibleCourtRows.forEach((row, idx) => {
+      if (row.kind === "court") m.set(row.id, idx);
+    });
+    return m;
+  }, [visibleCourtRows]);
+  const visibleDayOverlayBookings = (0, import_react.useMemo)(() => {
+    if (!daySlotVirtEnabled) return overlayBookings;
+    const t0 = hourSlots[dayVirtI0];
+    const t1 = hourSlots[dayVirtI1] + slotStepHours;
+    return overlayBookings.filter((b) => {
+      if (b.rowIndex < dayVirtR0 || b.rowIndex > dayVirtR1) return false;
+      const bs = b.start;
+      const be = b.start + b.span;
+      return be > t0 - 1e-6 && bs < t1 + 1e-6;
+    });
+  }, [
+    daySlotVirtEnabled,
+    overlayBookings,
+    hourSlots,
+    dayVirtI0,
+    dayVirtI1,
+    dayVirtR0,
+    dayVirtR1,
+    slotStepHours
+  ]);
+  const visibleDayOverflowPluses = (0, import_react.useMemo)(() => {
+    if (!daySlotVirtEnabled) return dayOverlayOverflowPluses;
+    const t0 = hourSlots[dayVirtI0];
+    const t1 = hourSlots[dayVirtI1] + slotStepHours;
+    return dayOverlayOverflowPluses.filter((pill) => {
+      const ri = courtRowIndexById.get(pill.courtId);
+      if (ri == null || ri < dayVirtR0 || ri > dayVirtR1) return false;
+      const ps = pill.start;
+      const pe = pill.start + pill.span;
+      return pe > t0 - 1e-6 && ps < t1 + 1e-6;
+    });
+  }, [
+    daySlotVirtEnabled,
+    dayOverlayOverflowPluses,
+    hourSlots,
+    dayVirtI0,
+    dayVirtI1,
+    dayVirtR0,
+    dayVirtR1,
+    slotStepHours,
+    courtRowIndexById
+  ]);
+  const dayChromeValue = (0, import_react.useMemo)(
+    () => ({ calendarProps: props, isLight }),
+    [props, isLight]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(import_bookingCalendarDayViewContext.BookingCalendarDayChromeProvider, { value: dayChromeValue }, /* @__PURE__ */ import_react.default.createElement("div", { key: `day-${dayKey}`, className: "flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "relative flex min-h-0 flex-1 flex-col p-2 md:p-4" }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: dayScrollRef,
+      onMouseDown: handleDayMouseDown,
+      onMouseMove: handleDayMouseMove,
+      onMouseUp: handleDayMouseUp,
+      onMouseLeave: handleDayMouseUp,
+      className: `pisell-scroll-hidden relative rounded-3xl border min-h-0 max-h-none flex-1 overflow-auto overscroll-contain touch-pan-x touch-pan-y select-none ${isLight ? "theme-panel theme-border" : "border-zinc-800 bg-[#121217]"} ${dayDragging ? "cursor-grabbing" : "cursor-grab"}`
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: "relative",
+        style: {
+          minWidth: `${import_bookingCalendarConstants.frozenColWidth + hourSlots.length * slotColWidth}px`,
+          minHeight: `${dayContentHeight}px`
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "grid sticky top-0 z-50",
+          style: {
+            gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${hourSlots.length}, ${slotColWidth}px)`,
+            ...((_a = props.timelineHeaderGroups) == null ? void 0 : _a.length) && !props.renderTimelineHeader ? { gridTemplateRows: "auto auto" } : {}
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            className: `sticky left-0 top-0 z-[60] w-[132px] min-w-[132px] max-w-[132px] px-3 py-4 font-semibold border-b shadow-[8px_0_16px_rgba(0,0,0,0.08)] ${isLight ? "surface-brand-side text-slate-900" : "bg-[#241d40] border-zinc-800 text-zinc-100"}`,
+            style: ((_b = props.timelineHeaderGroups) == null ? void 0 : _b.length) && !props.renderTimelineHeader ? { gridRow: "1 / span 2" } : void 0
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_pisellDateTimeDisplay.PisellDateTimeDisplay,
+            {
+              value: anchorDate,
+              disableAutoRefresh: true,
+              layout: "vertical",
+              textAlign: "left",
+              fields: {
+                showTime: false,
+                showWeekday: false,
+                fieldOrder: ["date"]
+              },
+              dateFormat: {
+                showYear: true,
+                showChineseUnit: true
+              },
+              style: { color: "inherit" },
+              dateStyle: {
+                color: "inherit",
+                fontWeight: 600,
+                fontSize: 14
+              }
+            }
+          )
+        ),
+        props.renderTimelineHeader ? /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "contents" } }, props.renderTimelineHeader({
+          anchorDate,
+          hourSlots,
+          slotStepMinutes: resolvedSlotMinutes,
+          slotColWidthPx: slotColWidth,
+          isLight,
+          firstTimelineHour,
+          endTimelineExclusive,
+          isBusinessHour,
+          formatHourLabel: import_bookingCalendarDateUtils.formatHourLabel,
+          getSlotStartHour: (i) => hourSlots[i],
+          slotCount: hourSlots.length,
+          dayHourRemaining
+        })) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (_c = props.timelineHeaderGroups) == null ? void 0 : _c.map((g, gi) => {
+          if (daySlotVirtEnabled && (g.endSlotIndex < dayVirtI0 || g.startSlotIndex > dayVirtI1)) {
+            return null;
+          }
+          const span = g.endSlotIndex - g.startSlotIndex + 1;
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key: `cal-hdr-g-${gi}`,
+              className: `border-b border-l px-2 py-1.5 text-center text-xs font-semibold ${isLight ? "theme-border theme-panel-soft theme-text-soft" : "border-zinc-800 bg-[#1e1a32] text-zinc-200"}`,
+              style: {
+                gridColumn: `${2 + g.startSlotIndex} / span ${span}`,
+                gridRow: 1
+              }
+            },
+            g.label
+          );
+        }), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map((_, hi) => hi)).map((hi) => {
+          var _a2;
+          const hour = hourSlots[hi];
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key: `hdr-${hi}-${hour}`,
+              className: `border-b border-l px-2 py-2.5 text-center text-sm font-medium ${isLight ? "theme-border" : "border-zinc-800"} ${isBusinessHour(hour) ? isLight ? "theme-panel-soft theme-text-soft" : "bg-[#1a1a22] text-zinc-300" : isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500"}`,
+              style: ((_a2 = props.timelineHeaderGroups) == null ? void 0 : _a2.length) ? { gridRow: 2, gridColumn: hi + 2 } : { gridColumn: hi + 2 }
+            },
+            /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center justify-center gap-1" }, /* @__PURE__ */ import_react.default.createElement(import_icons.ClockCircleOutlined, { style: { fontSize: 14 } }), " ", (0, import_bookingCalendarDateUtils.formatHourLabel)(hour)),
+            isBusinessHour(hour) && dayHourRemaining[hour] && /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: `mt-1 text-[11px] font-semibold ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
+                  dayHourRemaining[hour].ratio,
+                  isLight
+                )}`
+              },
+              (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.day.freeRatio", {
+                remaining: dayHourRemaining[hour].remaining,
+                total: dayHourRemaining[hour].total
+              })
+            )
+          );
+        }))
+      ),
+      dayKey === (0, import_bookingCalendarDateUtils.getViewNowReference)().dateKey && /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: "pointer-events-none absolute inset-y-0 z-20",
+          style: {
+            left: `${import_bookingCalendarConstants.frozenColWidth + ((0, import_bookingCalendarDateUtils.getViewNowReference)().hourFloat - firstTimelineHour) * timelinePxPerHour}px`
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { className: "relative h-full" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute inset-y-0 w-[2px] bg-emerald-400/95 shadow-[0_0_10px_rgba(16,185,129,0.65)]" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "sticky top-2 z-30 -translate-x-1/2 rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-semibold text-white shadow-lg w-fit" }, (0, import_bookingCalendarDateUtils.currentTimeLabel)()))
+      ),
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ref: dayBodyGridRef,
+          className: "grid relative",
+          style: {
+            gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${hourSlots.length}, ${slotColWidth}px)`,
+            gridTemplateRows: dayRowHeights.map((h) => `${h}px`).join(" ")
+          }
+        },
+        visibleCourtRows.map(
+          (row, rowIndex) => daySlotVirtEnabled && (rowIndex < dayVirtR0 || rowIndex > dayVirtR1) ? /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key: `${row.id}-skip`,
+              className: `pointer-events-none border-b ${isLight ? "theme-border" : "border-zinc-800"}`,
+              style: {
+                gridColumn: "1 / -1",
+                gridRow: rowIndex + 1
+              },
+              "aria-hidden": true
+            }
+          ) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: row.id }, row.kind === "group" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: `sticky left-0 z-30 w-[132px] min-w-[132px] max-w-[132px] border-b px-2.5 py-2 shadow-[8px_0_16px_rgba(0,0,0,0.08)] ${isLight ? "border-slate-200 bg-gradient-to-b from-slate-100 to-slate-50" : "border-zinc-800/80 bg-gradient-to-b from-[#252038] to-[#1a1628]"}`,
+              style: daySlotVirtEnabled ? {
+                gridRow: rowIndex + 1,
+                gridColumn: 1
+              } : void 0
+            },
+            props.renderResourceCell ? props.renderResourceCell({
+              view: "day",
+              row: {
+                kind: "group",
+                id: row.id,
+                label: row.label,
+                count: row.count,
+                collapsed: row.collapsed
+              },
+              isLight,
+              onToggleGroup: (label) => setCollapsedGroups((prev) => ({
+                ...prev,
+                [label]: !prev[label]
+              }))
+            }) : /* @__PURE__ */ import_react.default.createElement(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": !row.collapsed,
+                onClick: () => setCollapsedGroups((prev) => ({
+                  ...prev,
+                  [row.label]: !prev[row.label]
+                })),
+                className: `flex w-full items-center gap-2 rounded-lg px-1 py-1 text-left transition-colors ${isLight ? "hover:bg-white/60" : "hover:bg-white/[0.04] active:bg-white/[0.07]"}`
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                import_icons.DownOutlined,
+                {
+                  style: { fontSize: 15 },
+                  className: `shrink-0 transition-transform duration-200 ${isLight ? "text-slate-500" : "text-zinc-500"} ${row.collapsed ? "-rotate-90" : "rotate-0"}`,
+                  "aria-hidden": true
+                }
+              ),
+              /* @__PURE__ */ import_react.default.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-1.5" }, /* @__PURE__ */ import_react.default.createElement(
+                "span",
+                {
+                  className: `truncate text-[13px] font-semibold leading-snug ${isLight ? "text-slate-800" : "text-zinc-100"}`
+                },
+                row.label
+              ), /* @__PURE__ */ import_react.default.createElement(
+                "span",
+                {
+                  className: `shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-semibold tabular-nums ${isLight ? "bg-violet-100 text-violet-800" : "bg-zinc-800/90 text-zinc-300 ring-1 ring-zinc-600/40"}`
+                },
+                row.count
+              ))
+            )
+          ), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map((_, hi) => hi)).map((hi) => {
+            const hour = hourSlots[hi];
+            const groupCourts = visibleCourts.filter(
+              (court) => court.type === row.label
+            );
+            const remaining = groupCourts.filter(
+              (court) => !(0, import_bookingCalendarDateUtils.dayOccupancy)(
+                court.id,
+                dayKey,
+                bookings,
+                hourSlots,
+                slotStepHours
+              )[hour]
+            ).length;
+            const ratio = groupCourts.length > 0 ? remaining / groupCourts.length : 0;
+            const outsideBusiness = !isBusinessHour(hour);
+            return /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                key: `${row.id}-${hour}-${hi}`,
+                className: `border-b border-l px-2 py-1.5 text-center text-sm font-medium ${isLight ? "theme-border" : "border-zinc-800"} ${outsideBusiness ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500" : isLight ? "theme-panel-soft" : "bg-[#151a2f] text-zinc-300"}`,
+                style: daySlotVirtEnabled ? {
+                  gridRow: rowIndex + 1,
+                  gridColumn: hi + 2
+                } : void 0
+              },
+              outsideBusiness ? /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs opacity-60" }, "—") : /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: `text-xs font-semibold ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
+                    ratio,
+                    isLight
+                  )}`
+                },
+                remaining,
+                "/",
+                groupCourts.length,
+                " free"
+              )
+            );
+          })) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              "data-court-row": row.id,
+              className: `sticky left-0 z-30 flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] flex-col border-b px-3 py-3 shadow-[8px_0_16px_rgba(0,0,0,0.06)] ${isLight ? focusedCourtId === row.id ? "surface-brand-side ring-2 ring-[var(--brand-light)]/70" : "surface-brand-side-muted" : focusedCourtId === row.id ? "ring-2 ring-violet-400/70 bg-violet-900/20 border-zinc-800" : "bg-[#1a1a22] border-zinc-800"}`,
+              style: daySlotVirtEnabled ? {
+                gridRow: rowIndex + 1,
+                gridColumn: 1
+              } : void 0
+            },
+            props.renderResourceCell ? props.renderResourceCell({
+              view: "day",
+              row: {
+                kind: "court",
+                id: row.id,
+                name: row.name,
+                type: row.type
+              },
+              isLight
+            }) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "font-semibold text-base leading-tight break-all" }, row.name), dayRowRemainingByCourt[row.id] && /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                className: `mt-2 text-xs font-semibold ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
+                  dayRowRemainingByCourt[row.id].ratio,
+                  isLight
+                )}`
+              },
+              dayRowRemainingByCourt[row.id].remaining,
+              "/",
+              dayRowRemainingByCourt[row.id].total,
+              " slots free"
+            ))
+          ), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map((_, hi) => hi)).map((hi) => {
+            const hour = hourSlots[hi];
+            const item = (0, import_bookingCalendarDateUtils.dayOccupancy)(
+              row.id,
+              dayKey,
+              bookings,
+              hourSlots,
+              slotStepHours
+            )[hour];
+            const isBlock = (item == null ? void 0 : item.kind) === "block";
+            const isOccupied = !!item;
+            const freeSelected = isFreeSelected(row.id, hour);
+            const blockSelected = isBlockSelected(row.id, hour);
+            const outsideBusiness = !isBusinessHour(hour);
+            return /* @__PURE__ */ import_react.default.createElement(
+              "button",
+              {
+                key: `${row.id}-${hour}-${hi}`,
+                style: daySlotVirtEnabled ? {
+                  gridRow: rowIndex + 1,
+                  gridColumn: hi + 2
+                } : void 0,
+                onClick: () => !outsideBusiness && toggleSlot(row.id, hour),
+                onDragOver: (e) => {
+                  if (!outsideBusiness) e.preventDefault();
+                },
+                onDrop: (e) => {
+                  if (!outsideBusiness) {
+                    e.preventDefault();
+                    handleDropMove(row.id, dayKey, hour);
+                  }
+                },
+                className: `relative h-full min-h-0 p-2 text-left transition outline-none ${isOccupied && !outsideBusiness ? "border-l-transparent border-b-transparent" : `border-b border-l ${isLight ? "theme-border" : "border-zinc-700"}`} ${outsideBusiness ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500 border-zinc-700" : isBlock ? blockSelected ? "bg-red-500/25 border-red-400 ring-2 ring-red-400/60" : isLight ? "bg-red-50 border-red-200" : "bg-red-900/50 border-red-700/50" : isOccupied ? "bg-transparent" : freeSelected ? isLight ? "bg-violet-50 border-violet-300 ring-2 ring-violet-300/60" : "bg-white/10 border-violet-400 ring-2 ring-violet-400/60" : isLight ? "theme-grid-cell hover:bg-violet-50/60" : "bg-zinc-900 border-zinc-700 hover:bg-zinc-800"}`
+              },
+              outsideBusiness ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex h-full items-center justify-center rounded-xl border border-dashed border-zinc-700 text-xs text-zinc-500" }, (0, import_calendarI18n.tCal)(
+                "pisell2.recordBoard.calendar.day.outsideHours"
+              )) : (item == null ? void 0 : item.kind) === "block" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex h-full w-full flex-col justify-center rounded-xl px-3 text-sm font-medium" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate" }, blockSelected ? (0, import_calendarI18n.tCal)(
+                "pisell2.recordBoard.calendar.day.selectedBlock"
+              ) : item.name), item.note && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-xs text-zinc-300/90 truncate" }, item.note), (0, import_bookingCalendarViewShared.getBlockMetaLine)(item) && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] text-zinc-400 truncate" }, (0, import_bookingCalendarViewShared.getBlockMetaLine)(item))) : !item ? /* @__PURE__ */ import_react.default.createElement(
+                "div",
+                {
+                  className: `flex h-full items-center justify-center rounded-xl border border-dashed ${isLight ? "border-[#d8d0eb] text-[#8f86a9] hover:border-violet-300 hover:text-violet-500" : "border-zinc-600 text-zinc-500 hover:border-violet-500 hover:text-violet-300"}`
+                },
+                freeSelected ? (0, import_calendarI18n.tCal)(
+                  "pisell2.recordBoard.calendar.day.selected"
+                ) : (0, import_calendarI18n.tCal)(
+                  "pisell2.recordBoard.calendar.day.tapToSelect"
+                )
+              ) : null
+            );
+          })))
+        ),
+        visibleDayOverlayBookings.map((booking) => {
+          if (hiddenDayOverlayIdSet.has(
+            (0, import_bookingCalendarDateUtils.dayOverlayHiddenKey)(booking.item, dayKey, booking.courtId)
+          )) {
+            return null;
+          }
+          const left = import_bookingCalendarConstants.frozenColWidth + (booking.start - firstTimelineHour) * timelinePxPerHour;
+          const width = booking.span * timelinePxPerHour;
+          const rowH = booking.rowHeight ?? import_bookingCalendarConstants.dayRowHeight;
+          const totalInner = Math.max(
+            40,
+            rowH - import_bookingCalendarConstants.DAY_OVERLAY_INNER_TOP - import_bookingCalendarConstants.DAY_OVERLAY_INNER_BOTTOM
+          );
+          const laneCount = Math.max(
+            1,
+            courtDayDisplayLaneCount[booking.courtId] ?? 1
+          );
+          const lane = Number.isFinite(booking.lane) && booking.lane >= 0 ? booking.lane : 0;
+          const laneGeom = (0, import_bookingCalendarDateUtils.dayOverlayLaneMetrics)(
+            totalInner,
+            laneCount,
+            import_bookingCalendarConstants.DAY_OVERLAY_LANE_GAP
+          );
+          const styleTop = booking.rowTop + import_bookingCalendarConstants.DAY_OVERLAY_INNER_TOP + laneGeom.topFor(lane);
+          const styleHeight = laneGeom.heightFor(lane);
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key: `${booking.item.id}-${dayKey}`,
+              className: "absolute z-[25] isolate",
+              style: {
+                left,
+                top: styleTop,
+                width,
+                height: styleHeight
+              }
+            },
+            props.renderBooking ? props.renderBooking({
+              booking,
+              dayKey,
+              calendarView: view,
+              isLight,
+              overlayWidthPx: width,
+              onOpenDetail: openBookingDetail,
+              onDragStart: setDraggingItem,
+              onJumpNext: () => {
+                const nextDay = (0, import_bookingCalendarDateUtils.parseDate)(dayKey);
+                nextDay.setDate(nextDay.getDate() + 1);
+                setNavDirection(1);
+                commitAnchor(nextDay);
+                setFocusedCourtId(booking.courtId);
+              }
+            }) : /* @__PURE__ */ import_react.default.createElement(
+              import_bookingCalendarViewShared.BookingCard,
+              {
+                booking,
+                dayKey,
+                overlayWidthPx: width,
+                onOpenDetail: openBookingDetail,
+                onDragStart: setDraggingItem,
+                onJumpNext: () => {
+                  const nextDay = (0, import_bookingCalendarDateUtils.parseDate)(dayKey);
+                  nextDay.setDate(nextDay.getDate() + 1);
+                  setNavDirection(1);
+                  commitAnchor(nextDay);
+                  setFocusedCourtId(booking.courtId);
+                }
+              }
+            )
+          );
+        }),
+        visibleDayOverflowPluses.map((pill) => {
+          const left = import_bookingCalendarConstants.frozenColWidth + (pill.start - firstTimelineHour) * timelinePxPerHour;
+          const width = pill.span * timelinePxPerHour;
+          const rowH = pill.rowHeight ?? import_bookingCalendarConstants.dayRowHeight;
+          const totalInner = Math.max(
+            40,
+            rowH - import_bookingCalendarConstants.DAY_OVERLAY_INNER_TOP - import_bookingCalendarConstants.DAY_OVERLAY_INNER_BOTTOM
+          );
+          const laneCount = Math.max(
+            1,
+            courtDayDisplayLaneCount[pill.courtId] ?? 1
+          );
+          const laneGeom = (0, import_bookingCalendarDateUtils.dayOverlayLaneMetrics)(
+            totalInner,
+            laneCount,
+            import_bookingCalendarConstants.DAY_OVERLAY_LANE_GAP
+          );
+          const lane = import_bookingCalendarConstants.DAY_OVERLAY_VISIBLE_BOOKING_CAP;
+          const styleTop = pill.rowTop + import_bookingCalendarConstants.DAY_OVERLAY_INNER_TOP + laneGeom.topFor(lane);
+          const styleHeight = laneGeom.heightFor(lane);
+          return /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              key: pill.key,
+              className: "absolute z-[26] isolate",
+              style: {
+                left,
+                top: styleTop,
+                width,
+                height: styleHeight
+              }
+            },
+            /* @__PURE__ */ import_react.default.createElement(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setOverflowListModal({
+                    scope: `day-lane-overflow-${pill.key}`,
+                    date: dayKey,
+                    title: (0, import_calendarI18n.tCal)(
+                      "pisell2.recordBoard.calendar.overflow.moreCount",
+                      { count: pill.plusCount }
+                    ),
+                    items: pill.overflowItems
+                  });
+                },
+                className: `flex h-full w-full items-center justify-center rounded-xl px-2 text-sm font-semibold text-white shadow-sm ${isLight ? "bg-zinc-500/90" : "bg-zinc-600/90 hover:bg-zinc-500/90"}`
+              },
+              "+",
+              pill.plusCount
+            )
+          );
+        })
+      )
+    )
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_BookingCalendarDaySelectionBar.BookingCalendarDaySelectionBar,
+    {
+      slotStepHours,
+      selectedFreeSlots,
+      selectedBlockSlots,
+      deselectAll,
+      openSelectedBlocks,
+      onOpenBlockPanel,
+      createBookingFromSelection
+    }
+  ))));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BookingCalendarDayView
+});