@pisell/materials 6.11.37 → 6.11.38

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

@@ -0,0 +1,682 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+// @ts-nocheck
+/** 日视图：横向虚拟滚动时间轴 + 资源行，预约条按 lane 叠放与 +N 溢出 */
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { ClockCircleOutlined, DownOutlined } from '@ant-design/icons';
+import { PisellDateTimeDisplay } from "../../../../pisellDateTimeDisplay";
+import { currentTimeLabel, dayOccupancy, dayOverlayHiddenKey, dayOverlayLaneMetrics, formatHourLabel, getViewNowReference, parseDate } from "../utils/bookingCalendarDateUtils";
+import { DAY_OVERLAY_INNER_BOTTOM, DAY_OVERLAY_INNER_TOP, DAY_OVERLAY_LANE_GAP, DAY_OVERLAY_VISIBLE_BOOKING_CAP, DAY_VIEW_COL_BUFFER, DAY_VIEW_ROW_BUFFER_PX, dayRowHeight, frozenColWidth } from "../const/bookingCalendarConstants";
+import { getBlockMetaLine, getRemainingToneClass, BookingCard } from "../bookingCalendarViewShared";
+import { tCal } from "../calendarI18n";
+import { BookingCalendarDaySelectionBar } from "./BookingCalendarDaySelectionBar";
+import { BookingCalendarDayChromeProvider } from "./bookingCalendarDayViewContext";
+
+/** 日视图（含底部多选操作条） */
+export function BookingCalendarDayView(dayProps) {
+  var _props$timelineHeader, _props$timelineHeader2, _props$timelineHeader3;
+  var props = dayProps.calendarProps;
+  var isLight = dayProps.isLight,
+    view = dayProps.view,
+    anchorDate = dayProps.anchorDate,
+    dayKey = dayProps.dayKey,
+    hourSlots = dayProps.hourSlots,
+    resolvedSlotMinutes = dayProps.resolvedSlotMinutes,
+    slotColWidth = dayProps.slotColWidth,
+    firstTimelineHour = dayProps.firstTimelineHour,
+    endTimelineExclusive = dayProps.endTimelineExclusive,
+    isBusinessHour = dayProps.isBusinessHour,
+    dayHourRemaining = dayProps.dayHourRemaining,
+    timelinePxPerHour = dayProps.timelinePxPerHour,
+    dayContentHeight = dayProps.dayContentHeight,
+    dayRowHeights = dayProps.dayRowHeights,
+    visibleCourtRows = dayProps.visibleCourtRows,
+    overlayBookings = dayProps.overlayBookings,
+    dayOverlayOverflowPluses = dayProps.dayOverlayOverflowPluses,
+    setCollapsedGroups = dayProps.setCollapsedGroups,
+    visibleCourts = dayProps.visibleCourts,
+    bookings = dayProps.bookings,
+    slotStepHours = dayProps.slotStepHours,
+    isFreeSelected = dayProps.isFreeSelected,
+    isBlockSelected = dayProps.isBlockSelected,
+    toggleSlot = dayProps.toggleSlot,
+    handleDropMove = dayProps.handleDropMove,
+    hiddenDayOverlayIdSet = dayProps.hiddenDayOverlayIdSet,
+    courtDayDisplayLaneCount = dayProps.courtDayDisplayLaneCount,
+    openBookingDetail = dayProps.openBookingDetail,
+    setDraggingItem = dayProps.setDraggingItem,
+    setNavDirection = dayProps.setNavDirection,
+    commitAnchor = dayProps.commitAnchor,
+    setFocusedCourtId = dayProps.setFocusedCourtId,
+    setOverflowListModal = dayProps.setOverflowListModal,
+    selectedFreeSlots = dayProps.selectedFreeSlots,
+    selectedBlockSlots = dayProps.selectedBlockSlots,
+    deselectAll = dayProps.deselectAll,
+    openSelectedBlocks = dayProps.openSelectedBlocks,
+    onOpenBlockPanel = dayProps.onOpenBlockPanel,
+    createBookingFromSelection = dayProps.createBookingFromSelection,
+    focusedCourtId = dayProps.focusedCourtId,
+    dayRowRemainingByCourt = dayProps.dayRowRemainingByCourt;
+  var dayScrollRef = useRef(null);
+  var dayBodyGridRef = useRef(null);
+  var dayVirtRafRef = useRef(null);
+  var dayDragRef = useRef({
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    startLeft: 0,
+    startTop: 0,
+    moved: false
+  });
+  var _useState = useState({
+      i0: 0,
+      i1: 0,
+      r0: 0,
+      r1: 0,
+      ready: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    dayVirt = _useState2[0],
+    setDayVirt = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dayDragging = _useState4[0],
+    setDayDragging = _useState4[1];
+  var dayRowPrefixTop = useMemo(function () {
+    var p = [0];
+    for (var i = 0; i < dayRowHeights.length; i++) {
+      var _dayRowHeights$i;
+      p.push(p[i] + ((_dayRowHeights$i = dayRowHeights[i]) !== null && _dayRowHeights$i !== void 0 ? _dayRowHeights$i : dayRowHeight));
+    }
+    return p;
+  }, [dayRowHeights]);
+  var updateDayViewport = useCallback(function () {
+    var root = dayScrollRef.current;
+    var 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;
+    }
+    var n = hourSlots.length;
+    var nr = visibleCourtRows.length;
+    if (n <= 0 || nr <= 0) return;
+    var W = slotColWidth;
+    var FC = frozenColWidth;
+    var sl = root.scrollLeft;
+    var st = root.scrollTop;
+    var vw = root.clientWidth;
+    var vh = root.clientHeight;
+    var bodyTop = body.offsetTop;
+    var i0 = Math.floor((sl - FC) / W) - DAY_VIEW_COL_BUFFER;
+    var i1 = Math.ceil((sl + vw - FC) / W) - 1 + DAY_VIEW_COL_BUFFER;
+    i0 = Math.max(0, i0);
+    i1 = Math.min(n - 1, i1);
+    if (i0 > i1) {
+      i0 = 0;
+      i1 = n - 1;
+    }
+    var vTop = st;
+    var vBot = st + vh;
+    var buf = DAY_VIEW_ROW_BUFFER_PX;
+    var r0 = 0;
+    var r1 = nr - 1;
+    var pfx = dayRowPrefixTop;
+    for (var r = 0; r < nr; r++) {
+      var _pfx$r, _pfx;
+      var y0 = bodyTop + ((_pfx$r = pfx[r]) !== null && _pfx$r !== void 0 ? _pfx$r : 0);
+      var y1 = bodyTop + ((_pfx = pfx[r + 1]) !== null && _pfx !== void 0 ? _pfx : 0);
+      if (y1 > vTop - buf) {
+        r0 = r;
+        break;
+      }
+    }
+    for (var _r = nr - 1; _r >= 0; _r--) {
+      var _pfx$_r;
+      var _y = bodyTop + ((_pfx$_r = pfx[_r]) !== null && _pfx$_r !== void 0 ? _pfx$_r : 0);
+      if (_y < vBot + buf) {
+        r1 = _r;
+        break;
+      }
+    }
+    if (r0 > r1) {
+      r0 = 0;
+      r1 = nr - 1;
+    }
+    setDayVirt(function (prev) {
+      if (prev.ready && prev.i0 === i0 && prev.i1 === i1 && prev.r0 === r0 && prev.r1 === r1) {
+        return prev;
+      }
+      return {
+        i0: i0,
+        i1: i1,
+        r0: r0,
+        r1: r1,
+        ready: true
+      };
+    });
+  }, [props.renderTimelineHeader, hourSlots.length, visibleCourtRows.length, slotColWidth, frozenColWidth, dayRowPrefixTop]);
+  var scheduleDayViewportUpdate = useCallback(function () {
+    if (dayVirtRafRef.current != null) return;
+    dayVirtRafRef.current = requestAnimationFrame(function () {
+      dayVirtRafRef.current = null;
+      updateDayViewport();
+    });
+  }, [updateDayViewport]);
+  useLayoutEffect(function () {
+    var root = dayScrollRef.current;
+    if (!root) return undefined;
+    scheduleDayViewportUpdate();
+    var onScroll = function onScroll() {
+      return scheduleDayViewportUpdate();
+    };
+    root.addEventListener('scroll', onScroll, {
+      passive: true
+    });
+    var ro;
+    if (typeof ResizeObserver !== 'undefined') {
+      ro = new ResizeObserver(function () {
+        return scheduleDayViewportUpdate();
+      });
+      try {
+        ro.observe(root);
+      } catch (_unused) {
+        /* ignore */
+      }
+    }
+    return function () {
+      root.removeEventListener('scroll', onScroll);
+      if (ro) ro.disconnect();
+      if (dayVirtRafRef.current != null) {
+        cancelAnimationFrame(dayVirtRafRef.current);
+        dayVirtRafRef.current = null;
+      }
+    };
+  }, [dayKey, scheduleDayViewportUpdate, hourSlots.length, visibleCourtRows.length]);
+  useEffect(function () {
+    if (!focusedCourtId || !dayScrollRef.current) return;
+    var timer = setTimeout(function () {
+      var _dayScrollRef$current;
+      var el = (_dayScrollRef$current = dayScrollRef.current) === null || _dayScrollRef$current === void 0 ? void 0 : _dayScrollRef$current.querySelector("[data-court-row=\"".concat(focusedCourtId, "\"]"));
+      if (el) el.scrollIntoView({
+        behavior: 'smooth',
+        block: 'start'
+      });
+    }, 180);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [focusedCourtId, anchorDate, dayKey]);
+  var handleDayMouseMove = useCallback(function (e) {
+    if (!dayDragRef.current.dragging || !dayScrollRef.current) return;
+    var dx = e.clientX - dayDragRef.current.startX;
+    var 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]);
+  var handleDayMouseUp = useCallback(function () {
+    dayDragRef.current.dragging = false;
+    setDayDragging(false);
+  }, []);
+  var handleDayMouseDown = useCallback(function (e) {
+    if (!dayScrollRef.current) return;
+    /** 原生 `<button draggable>` 会命中 button；宿主自定义 render 常用 `<div draggable>`，必须排除否则会抢 HTML5 拖拽 → 整块日历跟手「平移」 */
+    var interactive = e.target.closest('button, input, select, textarea, a, label');
+    if (interactive) return;
+    var dragHost = e.target.closest('[draggable]');
+    if (dragHost instanceof HTMLElement && dragHost.draggable) return;
+    var 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();
+  }, []);
+  useEffect(function () {
+    window.addEventListener('mousemove', handleDayMouseMove);
+    window.addEventListener('mouseup', handleDayMouseUp);
+    return function () {
+      window.removeEventListener('mousemove', handleDayMouseMove);
+      window.removeEventListener('mouseup', handleDayMouseUp);
+    };
+  }, [anchorDate, visibleCourts.length, handleDayMouseMove, handleDayMouseUp]);
+  var daySlotVirtEnabled = !props.renderTimelineHeader && dayVirt.ready;
+  var dayVirtI0 = daySlotVirtEnabled ? dayVirt.i0 : 0;
+  var dayVirtI1 = daySlotVirtEnabled ? dayVirt.i1 : Math.max(0, hourSlots.length - 1);
+  var dayVirtR0 = daySlotVirtEnabled ? dayVirt.r0 : 0;
+  var dayVirtR1 = daySlotVirtEnabled ? dayVirt.r1 : Math.max(0, visibleCourtRows.length - 1);
+  var dayVisibleSlotIndices = useMemo(function () {
+    var out = [];
+    for (var hi = dayVirtI0; hi <= dayVirtI1; hi++) out.push(hi);
+    return out;
+  }, [dayVirtI0, dayVirtI1]);
+  var courtRowIndexById = useMemo(function () {
+    var m = new Map();
+    visibleCourtRows.forEach(function (row, idx) {
+      if (row.kind === 'court') m.set(row.id, idx);
+    });
+    return m;
+  }, [visibleCourtRows]);
+  var visibleDayOverlayBookings = useMemo(function () {
+    if (!daySlotVirtEnabled) return overlayBookings;
+    var t0 = hourSlots[dayVirtI0];
+    var t1 = hourSlots[dayVirtI1] + slotStepHours;
+    return overlayBookings.filter(function (b) {
+      if (b.rowIndex < dayVirtR0 || b.rowIndex > dayVirtR1) return false;
+      var bs = b.start;
+      var be = b.start + b.span;
+      return be > t0 - 1e-6 && bs < t1 + 1e-6;
+    });
+  }, [daySlotVirtEnabled, overlayBookings, hourSlots, dayVirtI0, dayVirtI1, dayVirtR0, dayVirtR1, slotStepHours]);
+
+  /** 横向按槽位索引 + 纵向按资源行做了可视裁剪，减轻大场地×长时段 DOM（非 react-window，仍为原生滚动） */
+  var visibleDayOverflowPluses = useMemo(function () {
+    if (!daySlotVirtEnabled) return dayOverlayOverflowPluses;
+    var t0 = hourSlots[dayVirtI0];
+    var t1 = hourSlots[dayVirtI1] + slotStepHours;
+    return dayOverlayOverflowPluses.filter(function (pill) {
+      var ri = courtRowIndexById.get(pill.courtId);
+      if (ri == null || ri < dayVirtR0 || ri > dayVirtR1) return false;
+      var ps = pill.start;
+      var pe = pill.start + pill.span;
+      return pe > t0 - 1e-6 && ps < t1 + 1e-6;
+    });
+  }, [daySlotVirtEnabled, dayOverlayOverflowPluses, hourSlots, dayVirtI0, dayVirtI1, dayVirtR0, dayVirtR1, slotStepHours, courtRowIndexById]);
+  var dayChromeValue = useMemo(function () {
+    return {
+      calendarProps: props,
+      isLight: isLight
+    };
+  }, [props, isLight]);
+  return /*#__PURE__*/React.createElement(BookingCalendarDayChromeProvider, {
+    value: dayChromeValue
+  }, /*#__PURE__*/React.createElement("div", {
+    key: "day-".concat(dayKey),
+    className: "flex min-h-0 flex-1 flex-col"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "relative flex min-h-0 flex-1 flex-col p-2 md:p-4"
+  }, /*#__PURE__*/React.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 ".concat(isLight ? 'theme-panel theme-border' : 'border-zinc-800 bg-[#121217]', " ").concat(dayDragging ? 'cursor-grabbing' : 'cursor-grab')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "relative",
+    style: {
+      minWidth: "".concat(frozenColWidth + hourSlots.length * slotColWidth, "px"),
+      minHeight: "".concat(dayContentHeight, "px")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "grid sticky top-0 z-50",
+    style: _objectSpread({
+      gridTemplateColumns: "".concat(frozenColWidth, "px repeat(").concat(hourSlots.length, ", ").concat(slotColWidth, "px)")
+    }, (_props$timelineHeader = props.timelineHeaderGroups) !== null && _props$timelineHeader !== void 0 && _props$timelineHeader.length && !props.renderTimelineHeader ? {
+      gridTemplateRows: 'auto auto'
+    } : {})
+  }, /*#__PURE__*/React.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)] ".concat(isLight ? 'surface-brand-side text-slate-900' : 'bg-[#241d40] border-zinc-800 text-zinc-100'),
+    style: (_props$timelineHeader2 = props.timelineHeaderGroups) !== null && _props$timelineHeader2 !== void 0 && _props$timelineHeader2.length && !props.renderTimelineHeader ? {
+      gridRow: '1 / span 2'
+    } : undefined
+  }, /*#__PURE__*/React.createElement(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__*/React.createElement("div", {
+    style: {
+      display: 'contents'
+    }
+  }, props.renderTimelineHeader({
+    anchorDate: anchorDate,
+    hourSlots: hourSlots,
+    slotStepMinutes: resolvedSlotMinutes,
+    slotColWidthPx: slotColWidth,
+    isLight: isLight,
+    firstTimelineHour: firstTimelineHour,
+    endTimelineExclusive: endTimelineExclusive,
+    isBusinessHour: isBusinessHour,
+    formatHourLabel: formatHourLabel,
+    getSlotStartHour: function getSlotStartHour(i) {
+      return hourSlots[i];
+    },
+    slotCount: hourSlots.length,
+    dayHourRemaining: dayHourRemaining
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, (_props$timelineHeader3 = props.timelineHeaderGroups) === null || _props$timelineHeader3 === void 0 ? void 0 : _props$timelineHeader3.map(function (g, gi) {
+    if (daySlotVirtEnabled && (g.endSlotIndex < dayVirtI0 || g.startSlotIndex > dayVirtI1)) {
+      return null;
+    }
+    var span = g.endSlotIndex - g.startSlotIndex + 1;
+    return /*#__PURE__*/React.createElement("div", {
+      key: "cal-hdr-g-".concat(gi),
+      className: "border-b border-l px-2 py-1.5 text-center text-xs font-semibold ".concat(isLight ? 'theme-border theme-panel-soft theme-text-soft' : 'border-zinc-800 bg-[#1e1a32] text-zinc-200'),
+      style: {
+        gridColumn: "".concat(2 + g.startSlotIndex, " / span ").concat(span),
+        gridRow: 1
+      }
+    }, g.label);
+  }), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map(function (_, hi) {
+    return hi;
+  })).map(function (hi) {
+    var _props$timelineHeader4;
+    var hour = hourSlots[hi];
+    return /*#__PURE__*/React.createElement("div", {
+      key: "hdr-".concat(hi, "-").concat(hour),
+      className: "border-b border-l px-2 py-2.5 text-center text-sm font-medium ".concat(isLight ? 'theme-border' : 'border-zinc-800', " ").concat(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: (_props$timelineHeader4 = props.timelineHeaderGroups) !== null && _props$timelineHeader4 !== void 0 && _props$timelineHeader4.length ? {
+        gridRow: 2,
+        gridColumn: hi + 2
+      } : {
+        gridColumn: hi + 2
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex items-center justify-center gap-1"
+    }, /*#__PURE__*/React.createElement(ClockCircleOutlined, {
+      style: {
+        fontSize: 14
+      }
+    }), ' ', formatHourLabel(hour)), isBusinessHour(hour) && dayHourRemaining[hour] && /*#__PURE__*/React.createElement("div", {
+      className: "mt-1 text-[11px] font-semibold ".concat(getRemainingToneClass(dayHourRemaining[hour].ratio, isLight))
+    }, tCal('pisell2.recordBoard.calendar.day.freeRatio', {
+      remaining: dayHourRemaining[hour].remaining,
+      total: dayHourRemaining[hour].total
+    })));
+  }))), dayKey === getViewNowReference().dateKey && /*#__PURE__*/React.createElement("div", {
+    className: "pointer-events-none absolute inset-y-0 z-20",
+    style: {
+      left: "".concat(frozenColWidth + (getViewNowReference().hourFloat - firstTimelineHour) * timelinePxPerHour, "px")
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "relative h-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "absolute inset-y-0 w-[2px] bg-emerald-400/95 shadow-[0_0_10px_rgba(16,185,129,0.65)]"
+  }), /*#__PURE__*/React.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"
+  }, currentTimeLabel()))), /*#__PURE__*/React.createElement("div", {
+    ref: dayBodyGridRef,
+    className: "grid relative",
+    style: {
+      gridTemplateColumns: "".concat(frozenColWidth, "px repeat(").concat(hourSlots.length, ", ").concat(slotColWidth, "px)"),
+      gridTemplateRows: dayRowHeights.map(function (h) {
+        return "".concat(h, "px");
+      }).join(' ')
+    }
+  }, visibleCourtRows.map(function (row, rowIndex) {
+    return daySlotVirtEnabled && (rowIndex < dayVirtR0 || rowIndex > dayVirtR1) ? /*#__PURE__*/React.createElement("div", {
+      key: "".concat(row.id, "-skip"),
+      className: "pointer-events-none border-b ".concat(isLight ? 'theme-border' : 'border-zinc-800'),
+      style: {
+        gridColumn: '1 / -1',
+        gridRow: rowIndex + 1
+      },
+      "aria-hidden": true
+    }) : /*#__PURE__*/React.createElement(React.Fragment, {
+      key: row.id
+    }, row.kind === 'group' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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)] ".concat(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
+      } : undefined
+    }, props.renderResourceCell ? props.renderResourceCell({
+      view: 'day',
+      row: {
+        kind: 'group',
+        id: row.id,
+        label: row.label,
+        count: row.count,
+        collapsed: row.collapsed
+      },
+      isLight: isLight,
+      onToggleGroup: function onToggleGroup(label) {
+        return setCollapsedGroups(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, label, !prev[label]));
+        });
+      }
+    }) : /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      "aria-expanded": !row.collapsed,
+      onClick: function onClick() {
+        return setCollapsedGroups(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, row.label, !prev[row.label]));
+        });
+      },
+      className: "flex w-full items-center gap-2 rounded-lg px-1 py-1 text-left transition-colors ".concat(isLight ? 'hover:bg-white/60' : 'hover:bg-white/[0.04] active:bg-white/[0.07]')
+    }, /*#__PURE__*/React.createElement(DownOutlined, {
+      style: {
+        fontSize: 15
+      },
+      className: "shrink-0 transition-transform duration-200 ".concat(isLight ? 'text-slate-500' : 'text-zinc-500', " ").concat(row.collapsed ? '-rotate-90' : 'rotate-0'),
+      "aria-hidden": true
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "flex min-w-0 flex-1 items-center gap-1.5"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "truncate text-[13px] font-semibold leading-snug ".concat(isLight ? 'text-slate-800' : 'text-zinc-100')
+    }, row.label), /*#__PURE__*/React.createElement("span", {
+      className: "shrink-0 rounded-md px-1.5 py-0.5 text-[10px] font-semibold tabular-nums ".concat(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(function (_, hi) {
+      return hi;
+    })).map(function (hi) {
+      var hour = hourSlots[hi];
+      var groupCourts = visibleCourts.filter(function (court) {
+        return court.type === row.label;
+      });
+      var remaining = groupCourts.filter(function (court) {
+        return !dayOccupancy(court.id, dayKey, bookings, hourSlots, slotStepHours)[hour];
+      }).length;
+      var ratio = groupCourts.length > 0 ? remaining / groupCourts.length : 0;
+      var outsideBusiness = !isBusinessHour(hour);
+      return /*#__PURE__*/React.createElement("div", {
+        key: "".concat(row.id, "-").concat(hour, "-").concat(hi),
+        className: "border-b border-l px-2 py-1.5 text-center text-sm font-medium ".concat(isLight ? 'theme-border' : 'border-zinc-800', " ").concat(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
+        } : undefined
+      }, outsideBusiness ? /*#__PURE__*/React.createElement("div", {
+        className: "text-xs opacity-60"
+      }, "\u2014") : /*#__PURE__*/React.createElement("div", {
+        className: "text-xs font-semibold ".concat(getRemainingToneClass(ratio, isLight))
+      }, remaining, "/", groupCourts.length, " free"));
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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)] ".concat(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
+      } : undefined
+    }, props.renderResourceCell ? props.renderResourceCell({
+      view: 'day',
+      row: {
+        kind: 'court',
+        id: row.id,
+        name: row.name,
+        type: row.type
+      },
+      isLight: isLight
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "font-semibold text-base leading-tight break-all"
+    }, row.name), dayRowRemainingByCourt[row.id] && /*#__PURE__*/React.createElement("div", {
+      className: "mt-2 text-xs font-semibold ".concat(getRemainingToneClass(dayRowRemainingByCourt[row.id].ratio, isLight))
+    }, dayRowRemainingByCourt[row.id].remaining, "/", dayRowRemainingByCourt[row.id].total, " slots free"))), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map(function (_, hi) {
+      return hi;
+    })).map(function (hi) {
+      var hour = hourSlots[hi];
+      var item = dayOccupancy(row.id, dayKey, bookings, hourSlots, slotStepHours)[hour];
+      var isBlock = (item === null || item === void 0 ? void 0 : item.kind) === 'block';
+      var isOccupied = !!item;
+      var freeSelected = isFreeSelected(row.id, hour);
+      var blockSelected = isBlockSelected(row.id, hour);
+      var outsideBusiness = !isBusinessHour(hour);
+      return /*#__PURE__*/React.createElement("button", {
+        key: "".concat(row.id, "-").concat(hour, "-").concat(hi),
+        style: daySlotVirtEnabled ? {
+          gridRow: rowIndex + 1,
+          gridColumn: hi + 2
+        } : undefined,
+        onClick: function onClick() {
+          return !outsideBusiness && toggleSlot(row.id, hour);
+        },
+        onDragOver: function onDragOver(e) {
+          if (!outsideBusiness) e.preventDefault();
+        },
+        onDrop: function 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 ".concat(isOccupied && !outsideBusiness ? 'border-l-transparent border-b-transparent' : "border-b border-l ".concat(isLight ? 'theme-border' : 'border-zinc-700'), " ").concat(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__*/React.createElement("div", {
+        className: "flex h-full items-center justify-center rounded-xl border border-dashed border-zinc-700 text-xs text-zinc-500"
+      }, tCal('pisell2.recordBoard.calendar.day.outsideHours')) : (item === null || item === void 0 ? void 0 : item.kind) === 'block' ? /*#__PURE__*/React.createElement("div", {
+        className: "flex h-full w-full flex-col justify-center rounded-xl px-3 text-sm font-medium"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "truncate"
+      }, blockSelected ? tCal('pisell2.recordBoard.calendar.day.selectedBlock') : item.name), item.note && /*#__PURE__*/React.createElement("div", {
+        className: "mt-1 text-xs text-zinc-300/90 truncate"
+      }, item.note), getBlockMetaLine(item) && /*#__PURE__*/React.createElement("div", {
+        className: "mt-1 text-[10px] text-zinc-400 truncate"
+      }, getBlockMetaLine(item))) : !item ? /*#__PURE__*/React.createElement("div", {
+        className: "flex h-full items-center justify-center rounded-xl border border-dashed ".concat(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 ? tCal('pisell2.recordBoard.calendar.day.selected') : tCal('pisell2.recordBoard.calendar.day.tapToSelect')) : null);
+    })));
+  }), visibleDayOverlayBookings.map(function (booking) {
+    var _booking$rowHeight, _courtDayDisplayLaneC;
+    if (hiddenDayOverlayIdSet.has(dayOverlayHiddenKey(booking.item, dayKey, booking.courtId))) {
+      return null;
+    }
+    var left = frozenColWidth + (booking.start - firstTimelineHour) * timelinePxPerHour;
+    var width = booking.span * timelinePxPerHour;
+    var rowH = (_booking$rowHeight = booking.rowHeight) !== null && _booking$rowHeight !== void 0 ? _booking$rowHeight : dayRowHeight;
+    var totalInner = Math.max(40, rowH - DAY_OVERLAY_INNER_TOP - DAY_OVERLAY_INNER_BOTTOM);
+    var laneCount = Math.max(1, (_courtDayDisplayLaneC = courtDayDisplayLaneCount[booking.courtId]) !== null && _courtDayDisplayLaneC !== void 0 ? _courtDayDisplayLaneC : 1);
+    var lane = Number.isFinite(booking.lane) && booking.lane >= 0 ? booking.lane : 0;
+    var laneGeom = dayOverlayLaneMetrics(totalInner, laneCount, DAY_OVERLAY_LANE_GAP);
+    var styleTop = booking.rowTop + DAY_OVERLAY_INNER_TOP + laneGeom.topFor(lane);
+    var styleHeight = laneGeom.heightFor(lane);
+    return /*#__PURE__*/React.createElement("div", {
+      key: "".concat(booking.item.id, "-").concat(dayKey),
+      className: "absolute z-[25] isolate",
+      style: {
+        left: left,
+        top: styleTop,
+        width: width,
+        height: styleHeight
+      }
+    }, props.renderBooking ? props.renderBooking({
+      booking: booking,
+      dayKey: dayKey,
+      calendarView: view,
+      isLight: isLight,
+      overlayWidthPx: width,
+      onOpenDetail: openBookingDetail,
+      onDragStart: setDraggingItem,
+      onJumpNext: function onJumpNext() {
+        var nextDay = parseDate(dayKey);
+        nextDay.setDate(nextDay.getDate() + 1);
+        setNavDirection(1);
+        commitAnchor(nextDay);
+        setFocusedCourtId(booking.courtId);
+      }
+    }) : /*#__PURE__*/React.createElement(BookingCard, {
+      booking: booking,
+      dayKey: dayKey,
+      overlayWidthPx: width,
+      onOpenDetail: openBookingDetail,
+      onDragStart: setDraggingItem,
+      onJumpNext: function onJumpNext() {
+        var nextDay = parseDate(dayKey);
+        nextDay.setDate(nextDay.getDate() + 1);
+        setNavDirection(1);
+        commitAnchor(nextDay);
+        setFocusedCourtId(booking.courtId);
+      }
+    }));
+  }), visibleDayOverflowPluses.map(function (pill) {
+    var _pill$rowHeight, _courtDayDisplayLaneC2;
+    var left = frozenColWidth + (pill.start - firstTimelineHour) * timelinePxPerHour;
+    var width = pill.span * timelinePxPerHour;
+    var rowH = (_pill$rowHeight = pill.rowHeight) !== null && _pill$rowHeight !== void 0 ? _pill$rowHeight : dayRowHeight;
+    var totalInner = Math.max(40, rowH - DAY_OVERLAY_INNER_TOP - DAY_OVERLAY_INNER_BOTTOM);
+    var laneCount = Math.max(1, (_courtDayDisplayLaneC2 = courtDayDisplayLaneCount[pill.courtId]) !== null && _courtDayDisplayLaneC2 !== void 0 ? _courtDayDisplayLaneC2 : 1);
+    var laneGeom = dayOverlayLaneMetrics(totalInner, laneCount, DAY_OVERLAY_LANE_GAP);
+    var lane = DAY_OVERLAY_VISIBLE_BOOKING_CAP;
+    var styleTop = pill.rowTop + DAY_OVERLAY_INNER_TOP + laneGeom.topFor(lane);
+    var styleHeight = laneGeom.heightFor(lane);
+    return /*#__PURE__*/React.createElement("div", {
+      key: pill.key,
+      className: "absolute z-[26] isolate",
+      style: {
+        left: left,
+        top: styleTop,
+        width: width,
+        height: styleHeight
+      }
+    }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setOverflowListModal({
+          scope: "day-lane-overflow-".concat(pill.key),
+          date: dayKey,
+          title: 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 ".concat(isLight ? 'bg-zinc-500/90' : 'bg-zinc-600/90 hover:bg-zinc-500/90')
+    }, "+", pill.plusCount));
+  })))), /*#__PURE__*/React.createElement(BookingCalendarDaySelectionBar, {
+    slotStepHours: slotStepHours,
+    selectedFreeSlots: selectedFreeSlots,
+    selectedBlockSlots: selectedBlockSlots,
+    deselectAll: deselectAll,
+    openSelectedBlocks: openSelectedBlocks,
+    onOpenBlockPanel: onOpenBlockPanel,
+    createBookingFromSelection: createBookingFromSelection
+  }))));
+}