@kne/react-calendar 1.0.6 → 1.1.0

package/dist/index.modern.js

@@ -2,10 +2,11 @@ import { useState, useLayoutEffect, useMemo, useEffect, useCallback, useRef } fr
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import useControlValue from '@kne/use-control-value';
-import { Popover, Space, Button, Badge, List, Tag, Card, Spin, Empty, Tooltip, Calendar } from 'antd';
+import { Popover, Space, Button, Badge, List, Tag, Card, Spin, Empty, Tooltip, Alert, Drawer, Calendar } from 'antd';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import FormInfo, { Input, TextArea, Form, SubmitButton } from '@kne/form-info';
+import { useIsMobile } from '@kne/responsive-utils';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -29,16 +30,19 @@ const locale$1 = {
   'PanelTitle.dateLabel': '{year}年{monthName}{day}日',
   'PanelTitle.eventCount': '共 {count} 个日程',
   'ViewPanel.empty': '暂无日程',
-  'SchedulePanel.selectFreeSlot': '选择空闲时间段',
-  'SchedulePanel.newSchedule': '新增日程：{range}',
+  'SchedulePanel.selectFreeSlot': '点击或拖拽空白处选择时间',
   'SchedulePanel.cancel': '取消',
   'SchedulePanel.save': '保存',
-  'SlotItem.disabled': '不可选',
-  'SlotItem.occupied': '已占用',
+  'SchedulePanel.newScheduleTitle': '新增日程',
+  'SchedulePanel.conflict': '与 {count} 个日程时间冲突',
   'DefaultFormInner.title': '标题',
   'DefaultFormInner.titlePlaceholder': '请输入日程标题',
   'DefaultFormInner.detail': '详情',
   'DefaultFormInner.detailPlaceholder': '请输入日程详情',
+  'TimeWindow.hours': '{count} 小时',
+  'TimeWindow.minutes': '{count} 分钟',
+  'TimeWindow.editable': '允许编辑',
+  'TimeWindow.locked': '已锁定',
   'Calendar.month.1': '1月',
   'Calendar.month.2': '2月',
   'Calendar.month.3': '3月',
@@ -65,16 +69,19 @@ const locale = {
   'PanelTitle.dateLabel': '{monthName} {day}, {year}',
   'PanelTitle.eventCount': '{count} events',
   'ViewPanel.empty': 'No events',
-  'SchedulePanel.selectFreeSlot': 'Select an available time slot',
-  'SchedulePanel.newSchedule': 'New event: {range}',
+  'SchedulePanel.selectFreeSlot': 'Click or drag on free time',
   'SchedulePanel.cancel': 'Cancel',
   'SchedulePanel.save': 'Save',
-  'SlotItem.disabled': 'Unavailable',
-  'SlotItem.occupied': 'Occupied',
+  'SchedulePanel.newScheduleTitle': 'New event',
+  'SchedulePanel.conflict': 'Overlaps {count} event(s)',
   'DefaultFormInner.title': 'Title',
   'DefaultFormInner.titlePlaceholder': 'Enter event title',
   'DefaultFormInner.detail': 'Details',
   'DefaultFormInner.detailPlaceholder': 'Enter event details',
+  'TimeWindow.hours': '{count} h',
+  'TimeWindow.minutes': '{count} min',
+  'TimeWindow.editable': 'Editable',
+  'TimeWindow.locked': 'Locked',
   'Calendar.month.1': 'Jan',
   'Calendar.month.2': 'Feb',
   'Calendar.month.3': 'Mar',
@@ -382,13 +389,13 @@ const getMonthPickerItemLabel = (formatMessage, value, monthIndex) => formatMess
   monthName: getMonthName(formatMessage, monthIndex)
 });
 
-var style$4 = {"calendar-header":"kne-react-calendar_X1TYG","calendar-title":"kne-react-calendar_FcQis","calendar-title-part":"kne-react-calendar_LcyYv","header-picker-popover":"kne-react-calendar_T4oWB","picker-panel":"kne-react-calendar_PMS-M","picker-panel-header":"kne-react-calendar_IXQKl","picker-panel-range":"kne-react-calendar_J-Pnh","picker-panel-nav":"kne-react-calendar_Wo74w","picker-panel-nav-icon":"kne-react-calendar_Rwzuj","picker-panel-grid":"kne-react-calendar_rxTOr","picker-cell":"kne-react-calendar_bHuh6","picker-cell-active":"kne-react-calendar_xOfrO","header-actions":"kne-react-calendar_OCJaK","header-today":"kne-react-calendar_SWVUG","header-nav":"kne-react-calendar_BOheC","header-nav-icon":"kne-react-calendar_8IEwS"};
+var style$5 = {"calendar-header":"kne-react-calendar_X1TYG","calendar-title":"kne-react-calendar_FcQis","calendar-title-part":"kne-react-calendar_LcyYv","header-picker-popover":"kne-react-calendar_T4oWB","picker-panel":"kne-react-calendar_PMS-M","picker-panel-header":"kne-react-calendar_IXQKl","picker-panel-range":"kne-react-calendar_J-Pnh","picker-panel-nav":"kne-react-calendar_Wo74w","picker-panel-nav-icon":"kne-react-calendar_Rwzuj","picker-panel-grid":"kne-react-calendar_rxTOr","picker-cell":"kne-react-calendar_bHuh6","picker-cell-active":"kne-react-calendar_xOfrO","header-actions":"kne-react-calendar_OCJaK","header-today":"kne-react-calendar_SWVUG","header-nav":"kne-react-calendar_BOheC","header-nav-icon":"kne-react-calendar_8IEwS"};
 
 const HeaderNavIcon = ({
   direction,
   className
 }) => /*#__PURE__*/jsx("svg", {
-  className: className || style$4['header-nav-icon'],
+  className: className || style$5['header-nav-icon'],
   viewBox: "0 0 16 16",
   "aria-hidden": true,
   focusable: "false",
@@ -411,7 +418,7 @@ const PickerPanelNav = ({
   children
 }) => /*#__PURE__*/jsx("button", {
   type: "button",
-  className: style$4['picker-panel-nav'],
+  className: style$5['picker-panel-nav'],
   "aria-label": label,
   onClick: onClick,
   children: children
@@ -429,9 +436,9 @@ const YearPickerPanel = ({
     length: YEAR_PAGE_SIZE
   }, (_, index) => pageStart + index), [pageStart]);
   return /*#__PURE__*/jsxs("div", {
-    className: style$4['picker-panel'],
+    className: style$5['picker-panel'],
     children: [/*#__PURE__*/jsxs("div", {
-      className: style$4['picker-panel-header'],
+      className: style$5['picker-panel-header'],
       children: [/*#__PURE__*/jsx(PickerPanelNav, {
         label: formatMessage({
           id: 'Header.prevYearPage'
@@ -439,10 +446,10 @@ const YearPickerPanel = ({
         onClick: () => onPageStartChange(pageStart - YEAR_PAGE_SIZE),
         children: /*#__PURE__*/jsx(HeaderNavIcon, {
           direction: "prev",
-          className: style$4['picker-panel-nav-icon']
+          className: style$5['picker-panel-nav-icon']
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: style$4['picker-panel-range'],
+        className: style$5['picker-panel-range'],
         children: [pageStart, "-", pageStart + YEAR_PAGE_SIZE - 1]
       }), /*#__PURE__*/jsx(PickerPanelNav, {
         label: formatMessage({
@@ -451,15 +458,15 @@ const YearPickerPanel = ({
         onClick: () => onPageStartChange(pageStart + YEAR_PAGE_SIZE),
         children: /*#__PURE__*/jsx(HeaderNavIcon, {
           direction: "next",
-          className: style$4['picker-panel-nav-icon']
+          className: style$5['picker-panel-nav-icon']
         })
       })]
     }), /*#__PURE__*/jsx("div", {
-      className: style$4['picker-panel-grid'],
+      className: style$5['picker-panel-grid'],
       children: years.map(year => /*#__PURE__*/jsx("button", {
         type: "button",
-        className: classNames(style$4['picker-cell'], {
-          [style$4['picker-cell-active']]: year === value.year()
+        className: classNames(style$5['picker-cell'], {
+          [style$5['picker-cell-active']]: year === value.year()
         }),
         onClick: () => onSelect(year),
         children: year
@@ -479,13 +486,13 @@ const MonthPickerPanel = ({
     length: 12
   }, (_, index) => index), []);
   return /*#__PURE__*/jsx("div", {
-    className: style$4['picker-panel'],
+    className: style$5['picker-panel'],
     children: /*#__PURE__*/jsx("div", {
-      className: style$4['picker-panel-grid'],
+      className: style$5['picker-panel-grid'],
       children: months.map(month => /*#__PURE__*/jsx("button", {
         type: "button",
-        className: classNames(style$4['picker-cell'], {
-          [style$4['picker-cell-active']]: month === value.month()
+        className: classNames(style$5['picker-cell'], {
+          [style$5['picker-cell-active']]: month === value.month()
         }),
         onClick: () => onSelect(month),
         children: getMonthPickerItemLabel(formatMessage, value, month)
@@ -500,7 +507,7 @@ const HeaderNavButton = ({
   children
 }) => /*#__PURE__*/jsx("button", {
   type: "button",
-  className: style$4['header-nav'],
+  className: style$5['header-nav'],
   "aria-label": label,
   onClick: onClick,
   children: children
@@ -543,9 +550,9 @@ const Header = ({
     setMonthOpen(false);
   };
   return /*#__PURE__*/jsxs("div", {
-    className: style$4['calendar-header'],
+    className: style$5['calendar-header'],
     children: [/*#__PURE__*/jsxs("div", {
-      className: style$4['calendar-title'],
+      className: style$5['calendar-title'],
       children: [/*#__PURE__*/jsx(Popover, {
         open: yearOpen,
         onOpenChange: open => {
@@ -556,7 +563,7 @@ const Header = ({
         },
         trigger: "click",
         placement: "bottomLeft",
-        rootClassName: style$4['header-picker-popover'],
+        rootClassName: style$5['header-picker-popover'],
         content: /*#__PURE__*/jsx(YearPickerPanel, {
           value: date,
           pageStart: yearPageStart,
@@ -565,7 +572,7 @@ const Header = ({
         }),
         children: /*#__PURE__*/jsx("button", {
           type: "button",
-          className: style$4['calendar-title-part'],
+          className: style$5['calendar-title-part'],
           children: yearText
         })
       }), /*#__PURE__*/jsx(Popover, {
@@ -578,22 +585,22 @@ const Header = ({
         },
         trigger: "click",
         placement: "bottomLeft",
-        rootClassName: style$4['header-picker-popover'],
+        rootClassName: style$5['header-picker-popover'],
         content: /*#__PURE__*/jsx(MonthPickerPanel, {
           value: date,
           onSelect: handleMonthSelect
         }),
         children: /*#__PURE__*/jsx("button", {
           type: "button",
-          className: style$4['calendar-title-part'],
+          className: style$5['calendar-title-part'],
           children: monthText
         })
       })]
     }), /*#__PURE__*/jsxs(Space, {
       size: 4,
-      className: style$4['header-actions'],
+      className: style$5['header-actions'],
       children: [showTodayButton ? /*#__PURE__*/jsx(Button, {
-        className: style$4['header-today'],
+        className: style$5['header-today'],
         type: "text",
         size: "small",
         onClick: onSelectToday,
@@ -660,7 +667,7 @@ const useStackedLayout = (ref, stackAt) => {
   return stacked;
 };
 
-var style$3 = {"date-cell":"kne-react-calendar_-a9AL","date-number":"kne-react-calendar_9s0kZ","date-has-events":"kne-react-calendar_-Bh5f","date-selected":"kne-react-calendar_Lpltl","date-muted":"kne-react-calendar_1xgRD","date-disabled":"kne-react-calendar_YTv16"};
+var style$4 = {"date-cell":"kne-react-calendar_-a9AL","date-number":"kne-react-calendar_9s0kZ","date-has-events":"kne-react-calendar_-Bh5f","date-selected":"kne-react-calendar_Lpltl","date-muted":"kne-react-calendar_1xgRD","date-disabled":"kne-react-calendar_YTv16"};
 
 const DateCell = ({
   date,
@@ -681,14 +688,14 @@ const DateCell = ({
     return customCell;
   }
   return /*#__PURE__*/jsxs("div", {
-    className: classNames(style$3['date-cell'], {
-      [style$3['date-selected']]: selected,
-      [style$3['date-muted']]: !currentMonth && !selected,
-      [style$3['date-disabled']]: disabled && !selected,
-      [style$3['date-has-events']]: count > 0 && !selected
+    className: classNames(style$4['date-cell'], {
+      [style$4['date-selected']]: selected,
+      [style$4['date-muted']]: !currentMonth && !selected,
+      [style$4['date-disabled']]: disabled && !selected,
+      [style$4['date-has-events']]: count > 0 && !selected
     }),
     children: [/*#__PURE__*/jsx("div", {
-      className: style$3['date-number'],
+      className: style$4['date-number'],
       children: date.date()
     }), count ? /*#__PURE__*/jsx(Badge, {
       count: count > badgeMaxCount ? `${badgeMaxCount}+` : count,
@@ -714,7 +721,7 @@ const getEventTagLabel = event => {
   return null;
 };
 
-var style$2 = {"event-list-item":"kne-react-calendar_cGTpY","event-item":"kne-react-calendar_3gmHY","event-item-head":"kne-react-calendar_fa3Mn","event-item-tag":"kne-react-calendar_yALGf","event-item-time":"kne-react-calendar_1L-dA","event-item-title":"kne-react-calendar_ISKyA","event-item-detail":"kne-react-calendar_HzTU2","event-item-clickable":"kne-react-calendar_iiYOC","event-item-disabled":"kne-react-calendar_3sXqE"};
+var style$3 = {"event-list-item":"kne-react-calendar_cGTpY","event-item":"kne-react-calendar_3gmHY","event-item-head":"kne-react-calendar_fa3Mn","event-item-tag":"kne-react-calendar_yALGf","event-item-time":"kne-react-calendar_1L-dA","event-item-title":"kne-react-calendar_ISKyA","event-item-detail":"kne-react-calendar_HzTU2","event-item-clickable":"kne-react-calendar_iiYOC","event-item-disabled":"kne-react-calendar_3sXqE"};
 
 const EventItem = ({
   event,
@@ -746,11 +753,11 @@ const EventItem = ({
   };
   const tagLabel = getEventTagLabel(event);
   return /*#__PURE__*/jsx(List.Item, {
-    className: style$2['event-list-item'],
+    className: style$3['event-list-item'],
     children: /*#__PURE__*/jsxs("div", {
-      className: classNames(style$2['event-item'], {
-        [style$2['event-item-clickable']]: clickable,
-        [style$2['event-item-disabled']]: event.disabled
+      className: classNames(style$3['event-item'], {
+        [style$3['event-item-clickable']]: clickable,
+        [style$3['event-item-disabled']]: event.disabled
       }),
       role: clickable ? 'button' : undefined,
       tabIndex: clickable ? 0 : undefined,
@@ -762,20 +769,20 @@ const EventItem = ({
         }
       } : undefined,
       children: [/*#__PURE__*/jsxs("div", {
-        className: style$2['event-item-head'],
+        className: style$3['event-item-head'],
         children: [/*#__PURE__*/jsx("div", {
-          className: style$2['event-item-title'],
+          className: style$3['event-item-title'],
           children: event.title
         }), tagLabel ? /*#__PURE__*/jsx(Tag, {
-          className: style$2['event-item-tag'],
+          className: style$3['event-item-tag'],
           color: event.color,
           children: tagLabel
         }) : null]
       }), /*#__PURE__*/jsx("div", {
-        className: style$2['event-item-time'],
+        className: style$3['event-item-time'],
         children: formatRange(event.start, event.end)
       }), event.detail ? /*#__PURE__*/jsx("div", {
-        className: style$2['event-item-detail'],
+        className: style$3['event-item-detail'],
         children: event.detail
       }) : null]
     })
@@ -898,456 +905,1443 @@ const ViewPanel = ({
   });
 };
 
-const LONG_PRESS_DELAY = 400;
-const SCROLL_CANCEL_THRESHOLD = 12;
-const TAP_MOVE_THRESHOLD = 8;
-const getPopoverKey = slot => slot ? `form:${slot.key}` : null;
-const getSlotIndexFromPoint = (container, clientX, clientY) => {
-  const slotElements = container == null || container.querySelectorAll == null ? void 0 : container.querySelectorAll('[data-slot-index]');
-  if (!(slotElements != null && slotElements.length)) {
-    return null;
+const MINUTE_MS$1 = 60 * 1000;
+const toMs = value => {
+  if (value === null || typeof value === 'undefined') {
+    return NaN;
   }
-  let closestIndex = null;
-  let closestDistance = Infinity;
-  for (const candidate of slotElements) {
-    const rect = candidate.getBoundingClientRect();
-    const index = Number(candidate.getAttribute('data-slot-index'));
-    if (Number.isNaN(index)) {
-      continue;
+  if (typeof value === 'number') {
+    return value;
+  }
+  const date = dayjs(value);
+  return date.isValid() ? date.valueOf() : NaN;
+};
+const snapToStep = (ms, {
+  originMs,
+  stepMs,
+  mode: _mode = 'round'
+}) => {
+  const fn = _mode === 'floor' ? Math.floor : _mode === 'ceil' ? Math.ceil : Math.round;
+  return originMs + fn((ms - originMs) / stepMs) * stepMs;
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+
+/**
+ * Clip events to the day window and lay overlapping ones out side by side.
+ * Returns `{ event, startMs, endMs, column, columns }` sorted by start.
+ */
+const layoutTimelineEvents = (events, {
+  startMs,
+  endMs
+}) => {
+  const items = (events || []).map(event => {
+    const s = Math.max(toMs(event.start), startMs);
+    const e = Math.min(toMs(event.end), endMs);
+    return {
+      event,
+      startMs: s,
+      endMs: e
+    };
+  }).filter(item => Number.isFinite(item.startMs) && Number.isFinite(item.endMs) && item.endMs > item.startMs).sort((a, b) => a.startMs - b.startMs || b.endMs - a.endMs);
+  let cluster = [];
+  let clusterEnd = -Infinity;
+  let columnEnds = [];
+  const flush = () => {
+    cluster.forEach(item => {
+      item.columns = columnEnds.length;
+    });
+    cluster = [];
+    columnEnds = [];
+  };
+  items.forEach(item => {
+    if (item.startMs >= clusterEnd) {
+      flush();
+      clusterEnd = -Infinity;
     }
-    if (clientY >= rect.top && clientY <= rect.bottom && clientX >= rect.left && clientX <= rect.right) {
-      return index;
+    let column = columnEnds.findIndex(end => end <= item.startMs);
+    if (column === -1) {
+      column = columnEnds.length;
+      columnEnds.push(item.endMs);
+    } else {
+      columnEnds[column] = item.endMs;
     }
-    if (clientX < rect.left || clientX > rect.right) {
-      continue;
+    item.column = column;
+    cluster.push(item);
+    clusterEnd = Math.max(clusterEnd, item.endMs);
+  });
+  flush();
+  return items;
+};
+
+/** Merge consecutive disabled slots (same reason) into ranges. */
+const mergeDisabledSlots = slots => {
+  const ranges = [];
+  (slots || []).forEach(slot => {
+    if (slot.status !== 'disabled') {
+      return;
+    }
+    const startMs = toMs(slot.start);
+    const endMs = toMs(slot.end);
+    const last = ranges[ranges.length - 1];
+    if (last && last.endMs === startMs && last.reason === slot.disabledReason) {
+      last.endMs = endMs;
+      return;
+    }
+    ranges.push({
+      startMs,
+      endMs,
+      reason: slot.disabledReason
+    });
+  });
+  return ranges;
+};
+const toBlockers = ranges => (ranges || []).map(range => {
+  var _range$startMs, _range$endMs;
+  return {
+    startMs: toMs((_range$startMs = range.startMs) != null ? _range$startMs : range.start),
+    endMs: toMs((_range$endMs = range.endMs) != null ? _range$endMs : range.end)
+  };
+}).filter(range => Number.isFinite(range.startMs) && Number.isFinite(range.endMs) && range.endMs > range.startMs).sort((a, b) => a.startMs - b.startMs);
+
+/**
+ * The free gap around `ms` between blockers, bounded by the day window.
+ * Returns null when `ms` falls inside a blocker.
+ */
+const getFreeGap = (ms, blockers, {
+  startMs,
+  endMs
+}) => {
+  let gapStart = startMs;
+  let gapEnd = endMs;
+  for (const blocker of blockers || []) {
+    if (blocker.startMs <= ms && ms < blocker.endMs) {
+      return null;
     }
-    const centerY = (rect.top + rect.bottom) / 2;
-    const distance = Math.abs(clientY - centerY);
-    if (distance < closestDistance) {
-      closestDistance = distance;
-      closestIndex = index;
+    if (blocker.endMs <= ms) {
+      gapStart = Math.max(gapStart, blocker.endMs);
+    } else if (blocker.startMs > ms) {
+      gapEnd = Math.min(gapEnd, blocker.startMs);
     }
   }
-  return closestIndex;
+  if (ms < startMs || ms >= endMs || gapEnd <= gapStart) {
+    return null;
+  }
+  return {
+    startMs: gapStart,
+    endMs: gapEnd
+  };
 };
-const clearDocumentTextSelection = () => {
-  const selection = document.getSelection == null ? void 0 : document.getSelection();
-  if (selection && !selection.isCollapsed) {
-    selection.removeAllRanges();
+
+/** Range created by pressing at `anchorMs` and dragging to `pointerMs`, kept inside `gap`. */
+const createSelectionRange = ({
+  anchorMs,
+  pointerMs,
+  gap,
+  originMs,
+  stepMs
+}) => {
+  const anchorStart = clamp(snapToStep(anchorMs, {
+    originMs,
+    stepMs,
+    mode: 'floor'
+  }), gap.startMs, gap.endMs);
+  const anchorEnd = Math.min(anchorStart + stepMs, gap.endMs);
+  const pointer = clamp(pointerMs, gap.startMs, gap.endMs);
+  if (pointer >= anchorStart) {
+    const end = clamp(snapToStep(pointer, {
+      originMs,
+      stepMs,
+      mode: 'ceil'
+    }), anchorEnd, gap.endMs);
+    return {
+      startMs: anchorStart,
+      endMs: end
+    };
   }
+  const start = clamp(snapToStep(pointer, {
+    originMs,
+    stepMs,
+    mode: 'floor'
+  }), gap.startMs, anchorStart);
+  return {
+    startMs: start,
+    endMs: anchorEnd
+  };
 };
-const useScheduleSelectionGesture = ({
-  slots,
-  selectedSlots,
-  setSelectedSlots,
-  allowMultiSelect,
-  onSlotRangeChange,
-  onFreeSlotClick
+
+/** Default range for a single click: one `unitMs` block that contains the pointer, fitted into `gap`. */
+const clickSelectionRange = ({
+  pointerMs,
+  gap,
+  originMs,
+  unitMs
+}) => {
+  const duration = Math.min(unitMs, gap.endMs - gap.startMs);
+  const start = clamp(snapToStep(pointerMs, {
+    originMs,
+    stepMs: unitMs,
+    mode: 'floor'
+  }), gap.startMs, gap.endMs - duration);
+  return {
+    startMs: start,
+    endMs: start + duration
+  };
+};
+const moveSelectionRange = ({
+  range,
+  deltaMs,
+  gap,
+  originMs,
+  stepMs
+}) => {
+  const duration = range.endMs - range.startMs;
+  const start = clamp(snapToStep(range.startMs + deltaMs, {
+    originMs,
+    stepMs
+  }), gap.startMs, gap.endMs - duration);
+  return {
+    startMs: start,
+    endMs: start + duration
+  };
+};
+const resizeSelectionRange = ({
+  range,
+  edge,
+  pointerMs,
+  gap,
+  originMs,
+  stepMs,
+  minMs: _minMs = stepMs
+}) => {
+  const snapped = snapToStep(pointerMs, {
+    originMs,
+    stepMs
+  });
+  if (edge === 'start') {
+    const start = clamp(snapped, gap.startMs, range.endMs - _minMs);
+    return {
+      startMs: start,
+      endMs: range.endMs
+    };
+  }
+  const end = clamp(snapped, range.startMs + _minMs, gap.endMs);
+  return {
+    startMs: range.startMs,
+    endMs: end
+  };
+};
+const findOverlappingEvents = (range, events) => {
+  if (!range) {
+    return [];
+  }
+  return (events || []).filter(event => toMs(event.start) < range.endMs && toMs(event.end) > range.startMs);
+};
+const findOverlappingSlots = (range, slots) => {
+  if (!range) {
+    return [];
+  }
+  return (slots || []).filter(slot => toMs(slot.start) < range.endMs && toMs(slot.end) > range.startMs);
+};
+
+dayjs.extend(customParseFormat);
+const DEFAULT_DURATION = 60;
+const DEFAULT_STEP = 1;
+const DEFAULT_DEBOUNCE_WAIT = 300;
+const DEFAULT_SEPARATOR = ' ～ ';
+const DEFAULT_FORMAT = ['YYYY-MM-DD HH:mm', 'HH:mm'];
+const DEFAULT_MIN_VISIBLE_SPAN = 360;
+const MINUTE_MS = 60 * 1000;
+const HOUR_MS = 60 * MINUTE_MS;
+const PARSE_FORMATS = ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm', 'YYYY-MM-DD'];
+const parseDateLike = value => {
+  if (value == null || value === '') {
+    return null;
+  }
+  if (dayjs.isDayjs(value)) {
+    return value.isValid() ? value : null;
+  }
+  const direct = dayjs(value);
+  if (direct.isValid()) {
+    return direct;
+  }
+  if (typeof value === 'string') {
+    const parsed = dayjs(value, PARSE_FORMATS, true);
+    return parsed.isValid() ? parsed : null;
+  }
+  return null;
+};
+const isEmptyBound = value => value == null || value === '';
+const defaultDayRange = now => {
+  const day = (parseDateLike(now) || dayjs()).startOf('day');
+  return [day, day.add(1, 'day')];
+};
+
+/**
+ * `null` 或 `[null, null]` 表示不限制；单侧为空表示该侧不限制；`undefined` 为当天全天。
+ */
+const resolveRange = (range, now = dayjs()) => {
+  if (range === null) {
+    return [null, null];
+  }
+  if (!Array.isArray(range)) {
+    return defaultDayRange(now);
+  }
+  const start = isEmptyBound(range[0]) ? null : parseDateLike(range[0]);
+  const end = isEmptyBound(range[1]) ? null : parseDateLike(range[1]);
+  const startInvalid = !isEmptyBound(range[0]) && !start;
+  const endInvalid = !isEmptyBound(range[1]) && !end;
+  if (startInvalid || endInvalid || start && end && !end.isAfter(start)) {
+    return defaultDayRange(now);
+  }
+  return [start, end];
+};
+const resolveDuration = (duration, rangeStart, rangeEnd) => {
+  const requested = Number(duration) > 0 ? Number(duration) : DEFAULT_DURATION;
+  if (!rangeStart || !rangeEnd) {
+    return requested;
+  }
+  const rangeMinutes = rangeEnd.diff(rangeStart, 'minute');
+  if (rangeMinutes > 0 && requested > rangeMinutes) {
+    return rangeMinutes;
+  }
+  return requested;
+};
+const resolveStep = step => Number(step) > 0 ? Number(step) : DEFAULT_STEP;
+const resolveVisibleSpan = ({
+  visibleSpan,
+  duration,
+  baseDuration: _baseDuration = duration,
+  rangeStart,
+  rangeEnd
+}) => {
+  const minimum = duration * 1.5;
+  let span = Number(visibleSpan) > 0 ? Number(visibleSpan) : Math.max(_baseDuration * 6, DEFAULT_MIN_VISIBLE_SPAN);
+  if (rangeStart && rangeEnd && !(Number(visibleSpan) > 0)) {
+    span = Math.min(span, rangeEnd.diff(rangeStart, 'minute'));
+  }
+  return Math.max(span, minimum);
+};
+const snapMs = (ms, stepMs, mode = 'round') => {
+  const anchor = dayjs(ms).startOf('day').valueOf();
+  const units = (ms - anchor) / stepMs;
+  const snapped = mode === 'floor' ? Math.floor(units) : mode === 'ceil' ? Math.ceil(units) : Math.round(units);
+  return anchor + snapped * stepMs;
+};
+const clampWindowStart = (startInput, {
+  rangeStart,
+  rangeEnd,
+  duration,
+  step,
+  snap: _snap = true,
+  now
+}) => {
+  const durationMs = duration * MINUTE_MS;
+  const minMs = rangeStart ? rangeStart.valueOf() : -Infinity;
+  const maxMs = rangeEnd ? rangeEnd.valueOf() - durationMs : Infinity;
+  if (maxMs <= minMs) {
+    return dayjs(minMs);
+  }
+  const fallback = rangeStart || parseDateLike(now) || dayjs();
+  const start = parseDateLike(startInput) || fallback;
+  const stepMs = step * MINUTE_MS;
+  let target = _snap ? snapMs(start.valueOf(), stepMs) : start.valueOf();
+  if (target > maxMs) {
+    target = _snap ? snapMs(maxMs, stepMs, 'floor') : maxMs;
+  }
+  if (target < minMs) {
+    target = _snap ? snapMs(minMs, stepMs, 'ceil') : minMs;
+  }
+  return dayjs(Math.min(Math.max(target, minMs), maxMs));
+};
+const createTimeWindow = ({
+  start,
+  duration,
+  range,
+  step,
+  now,
+  snap: _snap2 = true
+} = {}) => {
+  const [rangeStart, rangeEnd] = resolveRange(range, now);
+  const resolvedDuration = resolveDuration(duration, rangeStart, rangeEnd);
+  const resolvedStep = resolveStep(step);
+  const windowStart = clampWindowStart(start == null ? null : start, {
+    rangeStart,
+    rangeEnd,
+    duration: resolvedDuration,
+    step: resolvedStep,
+    snap: _snap2,
+    now
+  });
+  return {
+    start: windowStart,
+    end: windowStart.add(resolvedDuration, 'minute'),
+    rangeStart,
+    rangeEnd,
+    duration: resolvedDuration,
+    step: resolvedStep
+  };
+};
+
+/**
+ * 拖动窗口一侧边界：另一侧保持不动，拖动侧按 step 吸附，并受最短 / 最长时长与范围约束。
+ */
+const resizeTimeWindow = ({
+  edge,
+  pointerMs,
+  startMs,
+  endMs,
+  step,
+  rangeStart,
+  rangeEnd,
+  minDuration,
+  maxDuration
+}) => {
+  const stepMs = resolveStep(step) * MINUTE_MS;
+  const minMs = (Number(minDuration) > 0 ? Number(minDuration) : resolveStep(step)) * MINUTE_MS;
+  const maxMs = Number(maxDuration) > 0 ? Number(maxDuration) * MINUTE_MS : Infinity;
+  const rangeStartMs = rangeStart ? dayjs(rangeStart).valueOf() : -Infinity;
+  const rangeEndMs = rangeEnd ? dayjs(rangeEnd).valueOf() : Infinity;
+  if (edge === 'start') {
+    let _next = snapMs(pointerMs, stepMs);
+    _next = Math.min(_next, endMs - minMs);
+    _next = Math.max(_next, endMs - maxMs, rangeStartMs);
+    return {
+      startMs: _next,
+      duration: (endMs - _next) / MINUTE_MS
+    };
+  }
+  let next = snapMs(pointerMs, stepMs);
+  next = Math.max(next, startMs + minMs);
+  next = Math.min(next, startMs + maxMs, rangeEndMs);
+  return {
+    startMs,
+    duration: (next - startMs) / MINUTE_MS
+  };
+};
+const toWindowValue = window => [window.start.toDate(), window.end.toDate()];
+const getViewport = ({
+  startMs,
+  duration
+}, visibleSpanMinutes) => {
+  const spanMs = visibleSpanMinutes * MINUTE_MS;
+  const centerMs = startMs + duration * MINUTE_MS / 2;
+  return {
+    startMs: centerMs - spanMs / 2,
+    endMs: centerMs + spanMs / 2,
+    spanMs
+  };
+};
+const wheelDeltaToPx = ({
+  delta,
+  deltaMode: _deltaMode = 0,
+  trackWidth
+}) => {
+  if (_deltaMode === 1) {
+    return delta * 16;
+  }
+  if (_deltaMode === 2) {
+    return delta * (trackWidth > 0 ? trackWidth : 1);
+  }
+  return delta;
+};
+
+/**
+ * 把滚轮像素累加为整步数：步数与刻度尺比例一致，单次离散滚动至少移动一步。
+ */
+const consumeWheelSteps = ({
+  accumulatedPx,
+  deltaPx,
+  pxPerStep,
+  discrete
+}) => {
+  const sameDirection = accumulatedPx === 0 || Math.sign(accumulatedPx) === Math.sign(deltaPx);
+  const total = (sameDirection ? accumulatedPx : 0) + deltaPx;
+  const perStep = pxPerStep > 0 ? pxPerStep : 1;
+  let steps = Math.trunc(total / perStep) || 0;
+  let rest = total - steps * perStep;
+  if (steps === 0 && discrete && deltaPx !== 0) {
+    steps = Math.sign(deltaPx);
+    rest = 0;
+  }
+  return {
+    steps,
+    accumulatedPx: rest
+  };
+};
+const DEFAULT_INERTIA_TIME_CONSTANT = 325;
+const VELOCITY_WINDOW_MS = 120;
+
+/**
+ * `true` 为默认强度 1，数字为强度倍数，`false` / `0` 关闭。返回滑行衰减时间常数（ms），0 表示关闭。
+ */
+const resolveInertia = inertia => {
+  if (inertia === false || inertia == null) {
+    return inertia == null ? DEFAULT_INERTIA_TIME_CONSTANT : 0;
+  }
+  if (inertia === true) {
+    return DEFAULT_INERTIA_TIME_CONSTANT;
+  }
+  const strength = Number(inertia);
+  return strength > 0 ? DEFAULT_INERTIA_TIME_CONSTANT * strength : 0;
+};
+
+/**
+ * samples: [{ t, ms }]，按时间顺序；返回最近一段内每毫秒移动的时间量。
+ */
+const estimateVelocity = (samples, now) => {
+  if (!samples || samples.length < 2) {
+    return 0;
+  }
+  const latest = samples[samples.length - 1];
+  const reference = now == null ? latest.t : now;
+  if (reference - latest.t > VELOCITY_WINDOW_MS / 2) {
+    return 0;
+  }
+  const recent = samples.filter(sample => latest.t - sample.t <= VELOCITY_WINDOW_MS);
+  if (recent.length < 2) {
+    return 0;
+  }
+  const first = recent[0];
+  const elapsed = latest.t - first.t;
+  return elapsed > 0 ? (latest.ms - first.ms) / elapsed : 0;
+};
+const timeAtClientX = ({
+  clientX,
+  rectLeft,
+  rectWidth,
+  rangeStartMs,
+  rangeEndMs,
+  grabOffsetMs: _grabOffsetMs = 0
+}) => {
+  const span = Math.max(rangeEndMs - rangeStartMs, 1);
+  const width = rectWidth > 0 ? rectWidth : 1;
+  const ratio = Math.min(Math.max((clientX - rectLeft) / width, 0), 1);
+  return rangeStartMs + ratio * span - _grabOffsetMs;
+};
+const formatTimeWindowParts = ({
+  start,
+  end,
+  format: _format = DEFAULT_FORMAT
 }) => {
-  var _selectedSlots;
+  const startDate = parseDateLike(start);
+  const endDate = parseDateLike(end);
+  if (!startDate || !endDate || typeof _format === 'function') {
+    return null;
+  }
+  const formats = Array.isArray(_format) ? _format : [_format, _format];
+  const startText = startDate.format(formats[0] || DEFAULT_FORMAT[0]);
+  let endFormat = formats[1] || formats[0] || DEFAULT_FORMAT[1];
+  const endAtMidnight = endDate.valueOf() === endDate.startOf('day').valueOf();
+  if (_format === DEFAULT_FORMAT && !endAtMidnight && !endDate.isSame(startDate, 'day')) {
+    endFormat = 'MM-DD HH:mm';
+  }
+  return [startText, endDate.format(endFormat)];
+};
+const formatTimeWindow = ({
+  start,
+  end,
+  format: _format2 = DEFAULT_FORMAT,
+  separator: _separator = DEFAULT_SEPARATOR
+}) => {
+  if (typeof _format2 === 'function') {
+    const startDate = parseDateLike(start);
+    const endDate = parseDateLike(end);
+    return startDate && endDate ? _format2(startDate.toDate(), endDate.toDate()) : '';
+  }
+  const parts = formatTimeWindowParts({
+    start,
+    end,
+    format: _format2
+  });
+  return parts ? `${parts[0]}${_separator}${parts[1]}` : '';
+};
+const LABEL_INTERVALS = [1, 2, 3, 4, 6, 8, 12, 24];
+const pickLabelEvery = (pxPerHour, minLabelPx) => {
+  if (!(pxPerHour > 0)) {
+    return 3;
+  }
+  return LABEL_INTERVALS.find(every => pxPerHour * every >= minLabelPx) || 24;
+};
+const TICK_MINUTES = [1, 2, 5, 10, 15, 30, 60];
+const MIN_TICK_GAP_PX = 7;
+const pickTickMinutes = (pxPerHour, labelEvery) => {
+  const fit = TICK_MINUTES.find(minutes => pxPerHour * minutes / 60 >= MIN_TICK_GAP_PX);
+  return fit || labelEvery * 60;
+};
+
+/**
+ * 只生成当前视窗 [viewStart, viewEnd] 内的刻度；`outOfRange` 标出超出可选范围的刻度。
+ */
+const buildScaleTicks = (viewStart, viewEnd, {
+  trackWidth,
+  rangeStart,
+  rangeEnd,
+  minLabelPx: _minLabelPx = 52
+} = {}) => {
+  const viewStartMs = dayjs(viewStart).valueOf();
+  const viewEndMs = dayjs(viewEnd).valueOf();
+  const span = viewEndMs - viewStartMs;
+  if (span <= 0) {
+    return [];
+  }
+  const pxPerHour = trackWidth > 0 ? trackWidth * HOUR_MS / span : 0;
+  const labelEvery = trackWidth > 0 ? pickLabelEvery(pxPerHour, _minLabelPx) : span / HOUR_MS <= 6 ? 1 : 3;
+  const tickMinutes = trackWidth > 0 ? pickTickMinutes(pxPerHour, labelEvery) : 60;
+  const tickMs = tickMinutes * MINUTE_MS;
+  const rangeStartMs = rangeStart ? dayjs(rangeStart).valueOf() : -Infinity;
+  const rangeEndMs = rangeEnd ? dayjs(rangeEnd).valueOf() : Infinity;
+  const ticks = [];
+  let cursorMs = snapMs(viewStartMs, tickMs, 'ceil');
+  while (cursorMs <= viewEndMs) {
+    const cursor = dayjs(cursorMs);
+    const major = cursor.minute() === 0;
+    const midnight = major && cursor.hour() === 0;
+    const minute = cursor.minute();
+    const level = midnight ? 'day' : major ? 'hour' : minute === 30 ? 'half' : minute % 15 === 0 && tickMinutes < 15 ? 'quarter' : 'minute';
+    ticks.push({
+      key: cursorMs,
+      ratio: (cursorMs - viewStartMs) / span,
+      major,
+      level,
+      label: midnight ? cursor.format('MM-DD') : cursor.format('HH:mm'),
+      showLabel: major && cursor.hour() % labelEvery === 0,
+      outOfRange: cursorMs < rangeStartMs || cursorMs > rangeEndMs
+    });
+    cursorMs = snapMs(cursorMs + tickMs, tickMs);
+  }
+  return ticks;
+};
+const formatDurationParts = minutes => {
+  const total = Math.max(Math.round(minutes), 0);
+  return {
+    hours: Math.floor(total / 60),
+    minutes: total % 60
+  };
+};
+
+var style$2 = {"root":"kne-react-calendar_0I96A","root-large":"kne-react-calendar_eGwaj","root-small":"kne-react-calendar_h50YK","header":"kne-react-calendar_oV0dZ","label":"kne-react-calendar_ES-Jt","separator":"kne-react-calendar_TWzY7","actions":"kne-react-calendar_FiXT7","switch":"kne-react-calendar_uBaQO","switch-on":"kne-react-calendar_c1XaN","duration":"kne-react-calendar_UnlvI","scale":"kne-react-calendar_2q4r3","track":"kne-react-calendar_Psk8T","root-dragging":"kne-react-calendar_lDK6o","ticks":"kne-react-calendar_RAKOV","tick":"kne-react-calendar_0-sBN","tick-minute":"kne-react-calendar_KR68F","tick-quarter":"kne-react-calendar_KG7-G","tick-half":"kne-react-calendar_cxGhs","tick-hour":"kne-react-calendar_eLF-c","tick-day":"kne-react-calendar_bVU--","labels":"kne-react-calendar_ahayU","tick-out":"kne-react-calendar_Crt1q","track-wheel":"kne-react-calendar_6YDSw","cylinder":"kne-react-calendar_zo6Jy","shade":"kne-react-calendar_7IH3i","shade-start":"kne-react-calendar_jm61m","shade-end":"kne-react-calendar_H6JJo","window":"kne-react-calendar_FpwgD","window-resizable":"kne-react-calendar_zx86H","window-fixed":"kne-react-calendar_e3Rls","edge":"kne-react-calendar_XWaYx","edge-start":"kne-react-calendar_Lk0dI","edge-end":"kne-react-calendar_-iQoy","edge-active":"kne-react-calendar_U0aKK","root-resizing":"kne-react-calendar_59sUX","window-compact":"kne-react-calendar_kvOXQ","tick-label":"kne-react-calendar_4LHqw","tick-label-day":"kne-react-calendar_S5S1g","root-locked":"kne-react-calendar_A9Acq"};
+
+const GRIP_MIN_WIDTH = 28;
+const CLICK_MOVE_TOLERANCE = 4;
+const DISCRETE_WHEEL_DELTA = 50;
+const VISUAL_EASE_MS = 70;
+const WHEEL_IDLE_MS = 140;
+const WHEEL_NOTCH_EASE_MS = 90;
+const WHEEL_INERTIA_SCALE = 0.6;
+const sameInstant = (left, right) => {
+  const leftDate = parseDateLike(left);
+  const rightDate = parseDateLike(right);
+  if (!leftDate || !rightDate) {
+    return false;
+  }
+  return Math.abs(leftDate.valueOf() - rightDate.valueOf()) < 1000;
+};
+const readWindowStart = value => {
+  if (!Array.isArray(value)) {
+    return null;
+  }
+  return parseDateLike(value[0]);
+};
+const isDiscreteWheel = (event, deltaPx) => {
+  if (event.deltaMode !== 0) {
+    return true;
+  }
+  const legacy = event.wheelDeltaY || event.wheelDeltaX;
+  if (legacy && Math.abs(legacy) % 120 === 0) {
+    return true;
+  }
+  return Math.abs(deltaPx) >= DISCRETE_WHEEL_DELTA;
+};
+const useElementWidth = ref => {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) {
+      return undefined;
+    }
+    setWidth(node.getBoundingClientRect().width);
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        setWidth(entry.contentRect.width);
+      }
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [ref]);
+  return width;
+};
+const TimeWindowInner = ({
+  value,
+  defaultValue,
+  onChange,
+  duration,
+  range,
+  step,
+  visibleSpan,
+  debounceWait: _debounceWait = DEFAULT_DEBOUNCE_WAIT,
+  format: _format = DEFAULT_FORMAT,
+  separator: _separator = DEFAULT_SEPARATOR,
+  showDuration: _showDuration = true,
+  size: _size = 'default',
+  inertia: _inertia = true,
+  resizable: _resizable = true,
+  wheelEffect: _wheelEffect = true,
+  lockable: _lockable = false,
+  locked,
+  defaultLocked: _defaultLocked = false,
+  onLockedChange,
+  minDuration,
+  maxDuration,
+  className,
+  style: styleProp
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const isControlled = typeof value !== 'undefined';
+  const [innerValue, setInnerValue] = useState(() => {
+    if (Array.isArray(defaultValue) && readWindowStart(defaultValue)) {
+      return defaultValue;
+    }
+    return toWindowValue(createTimeWindow({
+      duration,
+      range,
+      step
+    }));
+  });
+  const [draftStart, setDraftStart] = useState(null);
+  const [draftDuration, setDraftDuration] = useState(null);
   const [dragging, setDragging] = useState(false);
-  const [activePopoverKey, setActivePopoverKey] = useState(null);
-  const slotsRef = useRef(null);
-  const draggingRef = useRef(false);
-  const dragStartIndexRef = useRef(null);
-  const longPressTimerRef = useRef(null);
-  const touchStateRef = useRef(null);
-  const slotsDataRef = useRef(slots);
-  const selectedSlotsRef = useRef(selectedSlots);
-  const allowMultiSelectRef = useRef(allowMultiSelect);
-  const suppressTriggerUntilRef = useRef(0);
-  const suppressMouseUntilRef = useRef(0);
-  const scrollLockRef = useRef(null);
-  const handlersRef = useRef({});
-  slotsDataRef.current = slots;
-  selectedSlotsRef.current = selectedSlots;
-  allowMultiSelectRef.current = allowMultiSelect;
-  const selectedKeys = useMemo(() => new Set(selectedSlots.map(slot => slot.key)), [selectedSlots]);
-  const selectedAnchorKey = (_selectedSlots = selectedSlots[selectedSlots.length - 1]) == null ? void 0 : _selectedSlots.key;
-  const formPopoverKey = selectedAnchorKey ? `form:${selectedAnchorKey}` : null;
-  const clearLongPress = useCallback(() => {
-    if (longPressTimerRef.current) {
-      window.clearTimeout(longPressTimerRef.current);
-      longPressTimerRef.current = null;
+  const [innerLocked, setInnerLocked] = useState(_defaultLocked);
+  const lockedControlled = typeof locked === 'boolean';
+  const isLocked = _lockable && (lockedControlled ? locked : innerLocked);
+  const [resizeView, setResizeView] = useState(null);
+  const resizeRef = useRef(null);
+  const resizeEdge = resizeView ? resizeView.edge : null;
+  const rootRef = useRef(null);
+  const trackRef = useRef(null);
+  const dragRef = useRef(null);
+  const wheelAccumRef = useRef(0);
+  const interactingRef = useRef(false);
+  const timerRef = useRef(null);
+  const pendingRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  const onLockedChangeRef = useRef(onLockedChange);
+  const isLockedRef = useRef(isLocked);
+  onLockedChangeRef.current = onLockedChange;
+  isLockedRef.current = isLocked;
+  const trackWidth = useElementWidth(trackRef);
+  const committedValue = isControlled ? value : innerValue;
+  const committedStart = readWindowStart(committedValue);
+  const committedMs = committedStart ? committedStart.valueOf() : null;
+  const anchorDay = committedStart ? committedStart.startOf('day').valueOf() : undefined;
+  const draftMs = draftStart ? draftStart.valueOf() : null;
+  const committedEnd = Array.isArray(committedValue) ? parseDateLike(committedValue[1]) : null;
+  const committedEndMs = committedEnd ? committedEnd.valueOf() : null;
+  const committedDuration = committedStart && committedEnd && committedEnd.isAfter(committedStart) ? committedEnd.diff(committedStart, 'minute', true) : null;
+  const activeDuration = draftDuration != null ? draftDuration : committedDuration != null ? committedDuration : duration;
+  const initialDurationRef = useRef(committedDuration || DEFAULT_DURATION);
+  const optionsRef = useRef(null);
+  onChangeRef.current = onChange;
+  optionsRef.current = {
+    duration: activeDuration,
+    range,
+    step,
+    now: anchorDay
+  };
+  const baseWindow = useMemo(() => {
+    const start = draftMs == null ? committedMs : draftMs;
+    return createTimeWindow({
+      start,
+      duration: activeDuration,
+      range,
+      step,
+      now: anchorDay
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorDay, committedMs, draftMs, activeDuration, step, JSON.stringify(range === undefined ? 'default' : range)]);
+  const visibleSpanMinutes = resolveVisibleSpan({
+    visibleSpan,
+    duration: baseWindow.duration,
+    baseDuration: Number(duration) > 0 ? Number(duration) : initialDurationRef.current,
+    rangeStart: baseWindow.rangeStart,
+    rangeEnd: baseWindow.rangeEnd
+  });
+  const baseStartMs = baseWindow.start.valueOf();
+  const rangeStartMs = baseWindow.rangeStart ? baseWindow.rangeStart.valueOf() : null;
+  const rangeEndMs = baseWindow.rangeEnd ? baseWindow.rangeEnd.valueOf() : null;
+  const durationMs = baseWindow.duration * 60 * 1000;
+  const [visualMs, setVisualMs] = useState(null);
+  const visualRef = useRef(null);
+  const visualTargetRef = useRef(null);
+  const frameRef = useRef(null);
+  const lastFrameRef = useRef(0);
+  const wheelActiveRef = useRef(false);
+  const wheelIdleRef = useRef(null);
+  const easeRef = useRef(VISUAL_EASE_MS);
+  const glidingRef = useRef(false);
+  const wheelBaseRef = useRef(null);
+  const wheelSamplesRef = useRef([]);
+  const wheelDirectionRef = useRef(0);
+  const inertiaTau = resolveInertia(_inertia);
+  const inertiaRef = useRef(inertiaTau);
+  inertiaRef.current = inertiaTau;
+  const clampVisual = ms => {
+    let next = ms;
+    if (rangeEndMs != null) {
+      next = Math.min(next, rangeEndMs - durationMs);
     }
-  }, []);
-  const unlockContainerScroll = useCallback(() => {
-    const container = slotsRef.current;
-    if (!container || scrollLockRef.current == null) {
-      return;
+    if (rangeStartMs != null) {
+      next = Math.max(next, rangeStartMs);
     }
-    const scrollTop = scrollLockRef.current;
-    container.style.overflow = '';
-    container.style.touchAction = '';
-    container.scrollTop = scrollTop;
-    scrollLockRef.current = null;
-  }, []);
-  const lockContainerScroll = useCallback(() => {
-    const container = slotsRef.current;
-    if (!container || scrollLockRef.current != null) {
+    return next;
+  };
+  const clampVisualRef = useRef(clampVisual);
+  clampVisualRef.current = clampVisual;
+  const runFrame = time => {
+    const target = visualTargetRef.current;
+    const current = visualRef.current == null ? target : visualRef.current;
+    const dt = lastFrameRef.current ? Math.min(time - lastFrameRef.current, 64) : 16;
+    lastFrameRef.current = time;
+    const diff = target - current;
+    const settled = Math.abs(diff) < 1000;
+    const next = settled ? target : current + diff * (1 - Math.exp(-dt / easeRef.current));
+    visualRef.current = next;
+    setVisualMs(next);
+    if (glidingRef.current) {
+      moveToRef.current(next);
+    }
+    if (settled) {
+      frameRef.current = null;
+      lastFrameRef.current = 0;
+      easeRef.current = VISUAL_EASE_MS;
+      glidingRef.current = false;
       return;
     }
-    scrollLockRef.current = container.scrollTop;
-    container.style.overflow = 'hidden';
-    container.style.touchAction = 'none';
-  }, []);
-  const resetGestureState = useCallback(() => {
-    clearLongPress();
-    const container = slotsRef.current;
-    const touchState = touchStateRef.current;
-    if (container && (touchState == null ? void 0 : touchState.pointerId) != null && container.hasPointerCapture != null && container.hasPointerCapture(touchState.pointerId)) {
-      try {
-        container.releasePointerCapture(touchState.pointerId);
-      } catch (_unused) {
-        // Ignore capture release errors on stale pointers.
-      }
+    frameRef.current = requestAnimationFrame(runFrame);
+  };
+  const stopGlide = () => {
+    if (!glidingRef.current) {
+      return false;
     }
-    draggingRef.current = false;
-    dragStartIndexRef.current = null;
-    touchStateRef.current = null;
-    container == null || container.classList.remove('schedule-calendar-touch-dragging');
-    unlockContainerScroll();
-    setDragging(false);
-  }, [clearLongPress, unlockContainerScroll]);
-  const selectSlots = useCallback(nextSlots => {
-    selectedSlotsRef.current = nextSlots;
-    if (!nextSlots.length) {
-      setActivePopoverKey(null);
-      resetGestureState();
-    }
-    setSelectedSlots(nextSlots);
-    onSlotRangeChange == null || onSlotRangeChange(nextSlots, {
-      action: nextSlots.length ? 'select' : 'clear'
-    });
-  }, [onSlotRangeChange, resetGestureState, setSelectedSlots]);
-  const getSelectableRange = useCallback((startIndex, endIndex) => {
-    const [start, end] = [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)];
-    return slotsDataRef.current.slice(start, end + 1).filter(slot => slot.status === 'free');
-  }, []);
-  const showFormPopoverForSlots = useCallback(slotsList => {
-    const anchorSlot = slotsList[slotsList.length - 1];
-    if (anchorSlot) {
-      setActivePopoverKey(getPopoverKey(anchorSlot));
+    glidingRef.current = false;
+    wheelBaseRef.current = null;
+    wheelSamplesRef.current = [];
+    wheelDirectionRef.current = 0;
+    easeRef.current = VISUAL_EASE_MS;
+    if (frameRef.current) {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = null;
+      lastFrameRef.current = 0;
     }
-  }, []);
-  const startSlotSelection = useCallback((slot, index, {
-    showPopover: _showPopover = true,
-    lockScroll: _lockScroll = false
-  } = {}) => {
-    var _slotsRef$current;
-    clearDocumentTextSelection();
-    setActivePopoverKey(getPopoverKey(slot));
-    draggingRef.current = true;
-    dragStartIndexRef.current = index;
-    (_slotsRef$current = slotsRef.current) == null || _slotsRef$current.classList.add('schedule-calendar-touch-dragging');
-    if (_lockScroll) {
-      lockContainerScroll();
-    }
-    setDragging(true);
-    selectSlots([slot]);
-    if (!_showPopover) {
-      suppressTriggerUntilRef.current = Date.now() + 700;
-      setActivePopoverKey(null);
-    }
-    onFreeSlotClick == null || onFreeSlotClick(slot);
-  }, [lockContainerScroll, onFreeSlotClick, selectSlots]);
-  const finishSelection = useCallback(({
-    fromTouch: _fromTouch = false
+    visualTargetRef.current = visualRef.current;
+    return true;
+  };
+  const glideTo = (ms, easeMs = inertiaTau) => {
+    const snapped = createTimeWindow(_extends({
+      start: ms
+    }, optionsRef.current)).start.valueOf();
+    glidingRef.current = true;
+    easeRef.current = easeMs;
+    setVisualTarget(snapped);
+  };
+  const setVisualTarget = (ms, {
+    immediate: _immediate = false
   } = {}) => {
-    const hadSelection = selectedSlotsRef.current.length > 0;
-    resetGestureState();
-    if (hadSelection) {
-      if (_fromTouch) {
-        suppressTriggerUntilRef.current = Date.now() + 500;
+    const target = clampVisualRef.current(ms);
+    visualTargetRef.current = target;
+    if (_immediate || typeof requestAnimationFrame === 'undefined') {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+        lastFrameRef.current = 0;
       }
-      showFormPopoverForSlots(selectedSlotsRef.current);
-    }
-  }, [resetGestureState, showFormPopoverForSlots]);
-  const updateSelectionRange = useCallback(index => {
-    const startIndex = dragStartIndexRef.current;
-    if (startIndex === null || !allowMultiSelectRef.current) {
+      visualRef.current = target;
+      setVisualMs(target);
       return;
     }
-    const nextSlots = getSelectableRange(startIndex, index);
-    selectSlots(nextSlots);
-  }, [getSelectableRange, selectSlots]);
-  const shouldIgnoreMouseSelectionEvent = useCallback(() => {
-    return !!touchStateRef.current || Date.now() < suppressMouseUntilRef.current;
+    if (!frameRef.current) {
+      frameRef.current = requestAnimationFrame(runFrame);
+    }
+  };
+  const setVisualTargetRef = useRef(setVisualTarget);
+  setVisualTargetRef.current = setVisualTarget;
+  const glideToRef = useRef(glideTo);
+  glideToRef.current = glideTo;
+  const stopGlideRef = useRef(stopGlide);
+  stopGlideRef.current = stopGlide;
+  useEffect(() => () => {
+    if (frameRef.current) {
+      cancelAnimationFrame(frameRef.current);
+    }
+    clearTimeout(wheelIdleRef.current);
   }, []);
-  const handleMouseDown = useCallback((event, slot, index) => {
-    if (shouldIgnoreMouseSelectionEvent()) {
+  useEffect(() => {
+    if (dragRef.current || resizeRef.current || wheelActiveRef.current || glidingRef.current) {
       return;
     }
-    if (slot.status !== 'free') {
+    if (visualRef.current == null) {
+      visualRef.current = baseStartMs;
+      visualTargetRef.current = baseStartMs;
       return;
     }
-    event.preventDefault();
-    startSlotSelection(slot, index);
-  }, [shouldIgnoreMouseSelectionEvent, startSlotSelection]);
-  const handleMouseEnter = useCallback(index => {
-    if (shouldIgnoreMouseSelectionEvent() || !draggingRef.current) {
-      return;
+    setVisualTargetRef.current(baseStartMs);
+  }, [baseStartMs]);
+  const displayStartMs = resizeView || visualMs == null ? baseStartMs : visualMs;
+  const viewport = resizeView || getViewport({
+    startMs: displayStartMs,
+    duration: baseWindow.duration
+  }, visibleSpanMinutes);
+  const viewRef = useRef(null);
+  const baseWindowRef = useRef(baseWindow);
+  baseWindowRef.current = baseWindow;
+  viewRef.current = viewport;
+  const ticks = useMemo(() => buildScaleTicks(viewport.startMs, viewport.endMs, {
+    trackWidth,
+    rangeStart: rangeStartMs,
+    rangeEnd: rangeEndMs
+  }), [viewport.startMs, viewport.endMs, trackWidth, rangeStartMs, rangeEndMs]);
+  const toPercent = ms => (ms - viewport.startMs) / viewport.spanMs * 100;
+  const width = durationMs / viewport.spanMs * 100;
+  const left = toPercent(displayStartMs);
+  const windowPx = width / 100 * trackWidth;
+  const leftShade = rangeStartMs != null ? Math.min(Math.max(toPercent(rangeStartMs), 0), 100) : 0;
+  const rightShade = rangeEndMs != null ? Math.min(Math.max(100 - toPercent(rangeEndMs), 0), 100) : 0;
+  const label = useMemo(() => {
+    if (typeof _format === 'function') {
+      return _format(baseWindow.start.toDate(), baseWindow.end.toDate());
     }
-    updateSelectionRange(index);
-  }, [shouldIgnoreMouseSelectionEvent, updateSelectionRange]);
-  const handleMouseUp = useCallback(() => {
-    if (shouldIgnoreMouseSelectionEvent()) {
-      return;
+    const [startText, endText] = formatTimeWindowParts({
+      start: baseWindow.start,
+      end: baseWindow.end,
+      format: _format
+    });
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("span", {
+        children: startText
+      }), /*#__PURE__*/jsx("span", {
+        className: style$2.separator,
+        children: _separator
+      }), /*#__PURE__*/jsx("span", {
+        children: endText
+      })]
+    });
+  }, [baseWindow.end, baseWindow.start, _format, _separator]);
+  const ariaValueText = formatTimeWindow({
+    start: baseWindow.start,
+    end: baseWindow.end,
+    format: typeof _format === 'function' ? DEFAULT_FORMAT : _format,
+    separator: typeof _separator === 'string' ? _separator : DEFAULT_SEPARATOR
+  });
+  const durationText = useMemo(() => {
+    const {
+      hours,
+      minutes
+    } = formatDurationParts(baseWindow.duration);
+    const parts = [];
+    if (hours) {
+      parts.push(formatMessage({
+        id: 'TimeWindow.hours'
+      }, {
+        count: hours
+      }));
     }
-    finishSelection();
-  }, [finishSelection, shouldIgnoreMouseSelectionEvent]);
-  const handleMouseLeave = useCallback(() => {
-    if (shouldIgnoreMouseSelectionEvent()) {
-      return;
+    if (minutes || !hours) {
+      parts.push(formatMessage({
+        id: 'TimeWindow.minutes'
+      }, {
+        count: minutes
+      }));
     }
-    finishSelection();
-  }, [finishSelection, shouldIgnoreMouseSelectionEvent]);
-  const handlePopoverOpenChange = useCallback((open, currentPopoverKey, {
-    isForm: _isForm = false
-  } = {}) => {
-    if (Date.now() < suppressTriggerUntilRef.current) {
-      return;
+    return parts.join(' ');
+  }, [baseWindow.duration, formatMessage]);
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
     }
-    if (!open && _isForm) {
-      selectSlots([]);
+  };
+  useEffect(() => clearTimer, []);
+  useEffect(() => {
+    if (interactingRef.current || draftMs == null) {
       return;
     }
-    setActivePopoverKey(prevKey => {
-      if (open) {
-        return currentPopoverKey;
+    const pending = Array.isArray(pendingRef.current) ? pendingRef.current : null;
+    if (pending && sameInstant(committedMs, pending[0]) && sameInstant(committedEndMs, pending[1])) {
+      pendingRef.current = null;
+      setDraftStart(null);
+      setDraftDuration(null);
+    }
+  }, [committedMs, committedEndMs, draftMs]);
+  const publish = nextWindow => {
+    const nextValue = toWindowValue(nextWindow);
+    baseWindowRef.current = nextWindow;
+    pendingRef.current = nextValue;
+    setDraftStart(nextWindow.start);
+    setDraftDuration(nextWindow.duration);
+    clearTimer();
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null;
+      if (!isControlled) {
+        setInnerValue(nextValue);
       }
-      return prevKey === currentPopoverKey ? null : prevKey;
-    });
-  }, [selectSlots]);
-  handlersRef.current = {
-    clearLongPress,
-    finishSelection,
-    onFreeSlotClick,
-    resetGestureState,
-    selectSlots,
-    showFormPopoverForSlots,
-    startSlotSelection,
-    updateSelectionRange
+      if (onChangeRef.current) {
+        onChangeRef.current(nextValue);
+      }
+    }, _debounceWait);
   };
+  const moveTo = startInput => {
+    const current = baseWindowRef.current;
+    const nextWindow = createTimeWindow(_extends({
+      start: startInput
+    }, optionsRef.current));
+    if (nextWindow.start.valueOf() === current.start.valueOf()) {
+      return;
+    }
+    publish(nextWindow);
+  };
+  const moveToRef = useRef(moveTo);
+  moveToRef.current = moveTo;
+  const durationPropRef = useRef(duration);
   useEffect(() => {
-    const container = slotsRef.current;
-    if (!container) {
-      return undefined;
+    if (durationPropRef.current === duration) {
+      return;
     }
-    const releasePointerCapture = pointerId => {
-      if (pointerId == null || !(container.hasPointerCapture != null && container.hasPointerCapture(pointerId))) {
-        return;
-      }
-      try {
-        container.releasePointerCapture(pointerId);
-      } catch (_unused2) {
-        // Ignore capture release errors on stale pointers.
-      }
+    durationPropRef.current = duration;
+    publish(createTimeWindow(_extends({}, optionsRef.current, {
+      start: baseWindowRef.current.start,
+      duration
+    })));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [duration]);
+  const pointerTimeAt = (clientX, view) => {
+    const rect = trackRef.current ? trackRef.current.getBoundingClientRect() : {
+      left: 0,
+      width: 1
     };
-    const clearPendingTouch = () => {
-      handlersRef.current.clearLongPress();
-      touchStateRef.current = null;
+    return timeAtClientX({
+      clientX,
+      rectLeft: rect.left,
+      rectWidth: rect.width,
+      rangeStartMs: view.startMs,
+      rangeEndMs: view.endMs
+    });
+  };
+  const startResize = (event, edge) => {
+    const view = viewRef.current;
+    const current = baseWindowRef.current;
+    const edgeMs = edge === 'start' ? current.start.valueOf() : current.end.valueOf();
+    resizeRef.current = {
+      pointerId: event.pointerId,
+      edge,
+      view,
+      grabOffsetMs: pointerTimeAt(event.clientX, view) - edgeMs
     };
-    const isStillOnSameSlot = (touchState, clientX, clientY) => {
-      const currentIndex = getSlotIndexFromPoint(container, clientX, clientY);
-      return currentIndex === touchState.index;
+    interactingRef.current = true;
+    setResizeView(_extends({}, view, {
+      edge
+    }));
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch (error) {
+      // pointer may already be released
+    }
+  };
+  const moveResize = event => {
+    const resize = resizeRef.current;
+    const current = baseWindowRef.current;
+    const next = resizeTimeWindow({
+      edge: resize.edge,
+      pointerMs: pointerTimeAt(event.clientX, resize.view) - resize.grabOffsetMs,
+      startMs: current.start.valueOf(),
+      endMs: current.end.valueOf(),
+      step: current.step,
+      rangeStart: current.rangeStart,
+      rangeEnd: current.rangeEnd,
+      minDuration,
+      maxDuration
+    });
+    if (next.startMs === current.start.valueOf() && next.duration === current.duration) {
+      return;
+    }
+    publish(createTimeWindow(_extends({}, optionsRef.current, {
+      start: next.startMs,
+      duration: next.duration
+    })));
+  };
+  const endResize = () => {
+    const resize = resizeRef.current;
+    resizeRef.current = null;
+    interactingRef.current = false;
+    const current = baseWindowRef.current;
+    const centerMs = resize.view.startMs + resize.view.spanMs / 2;
+    const frozenStart = centerMs - current.duration * 60 * 1000 / 2;
+    visualRef.current = frozenStart;
+    setVisualMs(frozenStart);
+    setResizeView(null);
+    setVisualTargetRef.current(current.start.valueOf());
+  };
+  const onPointerDown = event => {
+    if (event.button != null && event.button !== 0) {
+      return;
+    }
+    const braked = stopGlideRef.current();
+    const edgeNode = _resizable && event.target && event.target.closest ? event.target.closest('[data-edge]') : null;
+    if (edgeNode) {
+      startResize(event, edgeNode.getAttribute('data-edge'));
+      return;
+    }
+    dragRef.current = {
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      originMs: visualRef.current == null ? baseWindowRef.current.start.valueOf() : visualRef.current,
+      moved: false,
+      braked,
+      samples: []
     };
-    const shouldCancelPendingGesture = (touchState, clientX, clientY) => {
-      const moveX = Math.abs(clientX - touchState.x);
-      const moveY = Math.abs(clientY - touchState.y);
-      if (moveY > SCROLL_CANCEL_THRESHOLD) {
-        return true;
-      }
-      if (!isStillOnSameSlot(touchState, clientX, clientY)) {
-        return true;
-      }
-      if (!allowMultiSelectRef.current && (moveX > TAP_MOVE_THRESHOLD || moveY > TAP_MOVE_THRESHOLD)) {
-        return true;
+    interactingRef.current = true;
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch (error) {
+      // pointer may already be released
+    }
+  };
+  const onPointerMove = event => {
+    if (resizeRef.current) {
+      if (resizeRef.current.pointerId === event.pointerId) {
+        moveResize(event);
       }
-      return false;
+      return;
+    }
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) {
+      return;
+    }
+    const dx = event.clientX - drag.startX;
+    if (!drag.moved && Math.abs(dx) < CLICK_MOVE_TOLERANCE) {
+      return;
+    }
+    if (!drag.moved) {
+      drag.moved = true;
+      setDragging(true);
+    }
+    const rect = trackRef.current ? trackRef.current.getBoundingClientRect() : {
+      width: 1
     };
-    const activateLongPress = touchState => {
-      var _slotsRef$current2;
-      if (!isStillOnSameSlot(touchState, touchState.lastX, touchState.lastY)) {
-        return;
+    const deltaMs = dx / (rect.width || 1) * viewRef.current.spanMs;
+    const rawMs = drag.originMs - deltaMs;
+    drag.samples.push({
+      t: event.timeStamp,
+      ms: rawMs
+    });
+    if (drag.samples.length > 12) {
+      drag.samples.shift();
+    }
+    moveToRef.current(rawMs);
+    setVisualTargetRef.current(rawMs, {
+      immediate: true
+    });
+  };
+  const endDrag = event => {
+    if (resizeRef.current) {
+      if (!event || resizeRef.current.pointerId === event.pointerId) {
+        endResize();
       }
-      touchState.longPressed = true;
-      touchState.active = true;
-      clearDocumentTextSelection();
-      try {
-        container.setPointerCapture(touchState.pointerId);
-      } catch (_unused3) {
-        // Continue when capture is unavailable.
+      return;
+    }
+    const drag = dragRef.current;
+    if (!drag || event && drag.pointerId !== event.pointerId) {
+      return;
+    }
+    dragRef.current = null;
+    interactingRef.current = false;
+    setDragging(false);
+    if (drag.moved) {
+      const velocity = inertiaRef.current && event ? estimateVelocity(drag.samples, event.timeStamp) : 0;
+      const projection = velocity * inertiaRef.current;
+      if (Math.abs(projection) >= baseWindowRef.current.step * 60 * 1000) {
+        glideToRef.current(visualRef.current + projection);
+      } else {
+        setVisualTargetRef.current(baseWindowRef.current.start.valueOf());
       }
-      (_slotsRef$current2 = slotsRef.current) == null || _slotsRef$current2.classList.add('schedule-calendar-touch-dragging');
-      handlersRef.current.startSlotSelection(touchState.slot, touchState.index, {
-        showPopover: false,
-        lockScroll: true
+    }
+    if (!drag.moved && drag.braked) {
+      moveToRef.current(drag.originMs);
+      setVisualTargetRef.current(baseWindowRef.current.start.valueOf());
+      return;
+    }
+    if (!drag.moved && event && event.type === 'pointerup') {
+      const rect = trackRef.current ? trackRef.current.getBoundingClientRect() : {
+        left: 0,
+        width: 1
+      };
+      const view = viewRef.current;
+      const clickedMs = timeAtClientX({
+        clientX: event.clientX,
+        rectLeft: rect.left,
+        rectWidth: rect.width,
+        rangeStartMs: view.startMs,
+        rangeEndMs: view.endMs
       });
+      const current = baseWindowRef.current;
+      moveToRef.current(clickedMs - current.duration * 60 * 1000 / 2);
+    }
+  };
+  const onKeyDown = event => {
+    stopGlideRef.current();
+    const current = baseWindowRef.current;
+    const stepMinutes = current.step;
+    const moves = {
+      ArrowLeft: -stepMinutes,
+      ArrowDown: -stepMinutes,
+      ArrowRight: stepMinutes,
+      ArrowUp: stepMinutes,
+      PageDown: -current.duration,
+      PageUp: current.duration
     };
-    const handlePointerDown = event => {
-      var _event$target;
-      if (event.pointerType === 'mouse' || event.isPrimary === false) {
-        return;
-      }
-      const slotElement = (_event$target = event.target) == null || _event$target.closest == null ? void 0 : _event$target.closest('[data-slot-index]');
-      if (!slotElement || !container.contains(slotElement)) {
+    if (event.key === 'Home' && current.rangeStart) {
+      event.preventDefault();
+      moveToRef.current(current.rangeStart);
+      return;
+    }
+    if (event.key === 'End' && current.rangeEnd) {
+      event.preventDefault();
+      moveToRef.current(current.rangeEnd);
+      return;
+    }
+    if (!(event.key in moves)) {
+      return;
+    }
+    event.preventDefault();
+    const minutes = event.shiftKey ? Math.sign(moves[event.key]) * Math.max(60, stepMinutes) : moves[event.key];
+    moveToRef.current(current.start.add(minutes, 'minute'));
+  };
+  useEffect(() => {
+    const node = rootRef.current;
+    if (!node) {
+      return undefined;
+    }
+    const onWheel = event => {
+      if (isLockedRef.current) {
         return;
       }
-      const index = Number(slotElement.getAttribute('data-slot-index'));
-      const slot = slotsDataRef.current[index];
-      if (Number.isNaN(index) || (slot == null ? void 0 : slot.status) !== 'free') {
+      const dominant = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+      if (!dominant) {
         return;
       }
-      handlersRef.current.resetGestureState();
-      touchStateRef.current = {
-        pointerId: event.pointerId,
-        x: event.clientX,
-        y: event.clientY,
-        lastX: event.clientX,
-        lastY: event.clientY,
-        slot,
-        index,
-        moved: false,
-        longPressed: false,
-        active: false,
-        selectionTriggered: false
-      };
-      if (!allowMultiSelectRef.current) {
-        return;
-      }
-      longPressTimerRef.current = window.setTimeout(() => {
-        const touchState = touchStateRef.current;
-        if (!touchState || touchState.pointerId !== event.pointerId || touchState.moved) {
+      event.preventDefault();
+      const current = baseWindowRef.current;
+      const rectWidth = trackRef.current ? trackRef.current.getBoundingClientRect().width : node.clientWidth;
+      const deltaPx = wheelDeltaToPx({
+        delta: dominant,
+        deltaMode: event.deltaMode,
+        trackWidth: rectWidth
+      });
+      const stepMs = current.step * 60 * 1000;
+      const pxPerStep = rectWidth * stepMs / viewRef.current.spanMs;
+      const discrete = isDiscreteWheel(event, deltaPx);
+      const {
+        steps,
+        accumulatedPx
+      } = consumeWheelSteps({
+        accumulatedPx: wheelAccumRef.current,
+        deltaPx,
+        pxPerStep,
+        discrete
+      });
+      wheelAccumRef.current = accumulatedPx;
+      wheelActiveRef.current = true;
+      clearTimeout(wheelIdleRef.current);
+      wheelIdleRef.current = setTimeout(() => {
+        wheelActiveRef.current = false;
+        wheelAccumRef.current = 0;
+        wheelBaseRef.current = null;
+        wheelSamplesRef.current = [];
+        wheelDirectionRef.current = 0;
+        if (!glidingRef.current) {
+          setVisualTargetRef.current(baseWindowRef.current.start.valueOf());
+        }
+      }, WHEEL_IDLE_MS);
+      if (discrete && inertiaRef.current) {
+        if (!steps) {
           return;
         }
-        activateLongPress(touchState);
-        longPressTimerRef.current = null;
-      }, LONG_PRESS_DELAY);
-    };
-    const handlePointerMove = event => {
-      const touchState = touchStateRef.current;
-      if (!touchState || event.pointerId !== touchState.pointerId) {
-        return;
-      }
-      touchState.lastX = event.clientX;
-      touchState.lastY = event.clientY;
-      if (!touchState.active) {
-        if (shouldCancelPendingGesture(touchState, event.clientX, event.clientY)) {
-          touchState.moved = true;
-          clearPendingTouch();
+        const samples = wheelSamplesRef.current;
+        if (wheelDirectionRef.current !== Math.sign(steps)) {
+          samples.length = 0;
+          wheelBaseRef.current = null;
+          wheelDirectionRef.current = Math.sign(steps);
         }
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      clearDocumentTextSelection();
-      const index = getSlotIndexFromPoint(container, event.clientX, event.clientY);
-      if (index !== null) {
-        handlersRef.current.updateSelectionRange(index);
-      }
-    };
-    const handlePointerUp = event => {
-      const touchState = touchStateRef.current;
-      if (!touchState || event.pointerId !== touchState.pointerId) {
-        return;
-      }
-      releasePointerCapture(event.pointerId);
-      suppressMouseUntilRef.current = Date.now() + 700;
-      if (touchState.active) {
-        event.preventDefault();
-        touchState.selectionTriggered = true;
-        const index = getSlotIndexFromPoint(container, event.clientX, event.clientY);
-        if (index !== null) {
-          handlersRef.current.updateSelectionRange(index);
-        }
-        suppressTriggerUntilRef.current = Date.now() + 500;
-        handlersRef.current.finishSelection({
-          fromTouch: true
+        const from = wheelBaseRef.current == null ? current.start.valueOf() : wheelBaseRef.current;
+        const base = createTimeWindow(_extends({
+          start: from + steps * stepMs
+        }, optionsRef.current)).start.valueOf();
+        wheelBaseRef.current = base;
+        samples.push({
+          t: event.timeStamp,
+          ms: base
         });
+        if (samples.length > 8) {
+          samples.shift();
+        }
+        const projection = estimateVelocity(samples, event.timeStamp) * inertiaRef.current * WHEEL_INERTIA_SCALE;
+        let target = base + projection;
+        const lastTarget = visualTargetRef.current;
+        if (samples.length > 1 && lastTarget != null && (target - lastTarget) * wheelDirectionRef.current < 0) {
+          target = lastTarget;
+        }
+        glideToRef.current(target, projection ? inertiaRef.current : WHEEL_NOTCH_EASE_MS);
         return;
       }
-      handlersRef.current.clearLongPress();
-      const quickTap = !touchState.moved && !touchState.longPressed && Math.abs(event.clientX - touchState.x) <= TAP_MOVE_THRESHOLD && Math.abs(event.clientY - touchState.y) <= TAP_MOVE_THRESHOLD && isStillOnSameSlot(touchState, event.clientX, event.clientY);
-      const {
-        slot
-      } = touchState;
-      touchStateRef.current = null;
-      if (quickTap) {
-        touchState.selectionTriggered = true;
-        suppressTriggerUntilRef.current = Date.now() + 500;
-        handlersRef.current.selectSlots([slot]);
-        handlersRef.current.showFormPopoverForSlots([slot]);
-        handlersRef.current.onFreeSlotClick == null || handlersRef.current.onFreeSlotClick(slot);
-        return;
-      }
-      handlersRef.current.resetGestureState();
-    };
-    const handleContextMenu = event => {
-      var _touchStateRef$curren;
-      if ((_touchStateRef$curren = touchStateRef.current) != null && _touchStateRef$curren.active || draggingRef.current) {
-        event.preventDefault();
-      }
-    };
-    const handleSelectStart = event => {
-      var _touchStateRef$curren2;
-      if (!((_touchStateRef$curren2 = touchStateRef.current) != null && _touchStateRef$curren2.active) && !draggingRef.current) {
-        return;
-      }
-      event.preventDefault();
-    };
-    const handleTouchMove = event => {
-      var _touchStateRef$curren3;
-      if (!draggingRef.current && !((_touchStateRef$curren3 = touchStateRef.current) != null && _touchStateRef$curren3.active)) {
-        return;
-      }
-      event.preventDefault();
-    };
-    const touchOptions = {
-      passive: false,
-      capture: true
-    };
-    container.addEventListener('pointerdown', handlePointerDown, {
-      passive: true
-    });
-    container.addEventListener('pointermove', handlePointerMove, {
-      passive: false
-    });
-    container.addEventListener('pointerup', handlePointerUp, {
-      passive: false
-    });
-    container.addEventListener('pointercancel', handlePointerUp, {
+      if (steps) {
+        moveToRef.current(current.start.valueOf() + steps * stepMs);
+      }
+      const residualMs = pxPerStep > 0 ? accumulatedPx / pxPerStep * stepMs : 0;
+      setVisualTargetRef.current(baseWindowRef.current.start.valueOf() + residualMs);
+    };
+    node.addEventListener('wheel', onWheel, {
       passive: false
     });
-    container.addEventListener('touchmove', handleTouchMove, touchOptions);
-    container.addEventListener('contextmenu', handleContextMenu);
-    container.addEventListener('selectstart', handleSelectStart);
-    return () => {
-      var _touchStateRef$curren4;
-      releasePointerCapture((_touchStateRef$curren4 = touchStateRef.current) == null ? void 0 : _touchStateRef$curren4.pointerId);
-      handlersRef.current.clearLongPress();
-      handlersRef.current.resetGestureState();
-      longPressTimerRef.current = null;
-      container.removeEventListener('touchmove', handleTouchMove, touchOptions);
-    };
+    return () => node.removeEventListener('wheel', onWheel);
   }, []);
-  return {
-    activePopoverKey,
-    dragging,
-    formPopoverKey,
-    selectedAnchorKey,
-    selectedKeys,
-    setActivePopoverKey,
-    selectSlots,
-    slotsRef,
-    finishSelection,
-    handleMouseDown,
-    handleMouseEnter,
-    handleMouseUp,
-    handleMouseLeave,
-    handlePopoverOpenChange
+  const toggleLocked = () => {
+    const next = !isLockedRef.current;
+    if (next) {
+      stopGlideRef.current();
+    }
+    if (!lockedControlled) {
+      setInnerLocked(next);
+    }
+    if (onLockedChangeRef.current) {
+      onLockedChangeRef.current(next);
+    }
   };
+  const labelTicks = ticks.filter(tick => tick.showLabel);
+  const ariaBounds = {};
+  if (rangeStartMs != null) {
+    ariaBounds['aria-valuemin'] = rangeStartMs;
+  }
+  if (rangeEndMs != null) {
+    ariaBounds['aria-valuemax'] = rangeEndMs - durationMs;
+  }
+  return /*#__PURE__*/jsxs("div", {
+    ref: rootRef,
+    className: classNames(style$2.root, style$2[`root-${_size}`], className, {
+      [style$2['root-dragging']]: dragging,
+      [style$2['root-resizing']]: !!resizeView,
+      [style$2['root-locked']]: isLocked
+    }),
+    style: styleProp,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: style$2.header,
+      children: [/*#__PURE__*/jsx("div", {
+        className: style$2.label,
+        children: label
+      }), /*#__PURE__*/jsxs("div", {
+        className: style$2.actions,
+        children: [_lockable ? /*#__PURE__*/jsx("button", {
+          type: "button",
+          role: "switch",
+          "aria-checked": !isLocked,
+          "aria-label": formatMessage({
+            id: isLocked ? 'TimeWindow.locked' : 'TimeWindow.editable'
+          }),
+          className: classNames(style$2.switch, {
+            [style$2['switch-on']]: !isLocked
+          }),
+          onClick: toggleLocked,
+          children: /*#__PURE__*/jsx("i", {})
+        }) : null, _showDuration ? /*#__PURE__*/jsx("span", {
+          className: style$2.duration,
+          children: durationText
+        }) : null]
+      })]
+    }), isLocked ? null : /*#__PURE__*/jsxs("div", {
+      className: style$2.scale,
+      children: [/*#__PURE__*/jsxs("div", _extends({
+        ref: trackRef,
+        className: classNames(style$2.track, {
+          [style$2['track-wheel']]: _wheelEffect
+        }),
+        role: "slider",
+        tabIndex: 0
+      }, ariaBounds, {
+        "aria-valuenow": baseWindow.start.valueOf(),
+        "aria-valuetext": ariaValueText,
+        onKeyDown: onKeyDown,
+        onPointerDown: onPointerDown,
+        onPointerMove: onPointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        children: [leftShade > 0 ? /*#__PURE__*/jsx("span", {
+          className: classNames(style$2.shade, style$2['shade-start']),
+          style: {
+            width: `${leftShade}%`
+          }
+        }) : null, rightShade > 0 ? /*#__PURE__*/jsx("span", {
+          className: classNames(style$2.shade, style$2['shade-end']),
+          style: {
+            width: `${rightShade}%`
+          }
+        }) : null, /*#__PURE__*/jsx("div", {
+          className: style$2.ticks,
+          children: ticks.map(tick => /*#__PURE__*/jsx("span", {
+            className: classNames(style$2.tick, style$2[`tick-${tick.level}`], {
+              [style$2['tick-out']]: tick.outOfRange
+            }),
+            style: {
+              left: `${tick.ratio * 100}%`
+            }
+          }, tick.key))
+        }), _wheelEffect ? /*#__PURE__*/jsx("span", {
+          className: style$2.cylinder,
+          "aria-hidden": "true"
+        }) : null, /*#__PURE__*/jsx("span", {
+          className: classNames(style$2.window, {
+            [style$2['window-compact']]: windowPx < GRIP_MIN_WIDTH,
+            [style$2['window-resizable']]: _resizable,
+            [style$2['window-fixed']]: !_resizable
+          }),
+          style: {
+            left: `${left}%`,
+            width: `${width}%`
+          },
+          children: _resizable ? /*#__PURE__*/jsxs(Fragment, {
+            children: [/*#__PURE__*/jsx("span", {
+              "data-edge": "start",
+              "aria-hidden": "true",
+              className: classNames(style$2.edge, style$2['edge-start'], {
+                [style$2['edge-active']]: resizeEdge === 'start'
+              })
+            }), /*#__PURE__*/jsx("span", {
+              "data-edge": "end",
+              "aria-hidden": "true",
+              className: classNames(style$2.edge, style$2['edge-end'], {
+                [style$2['edge-active']]: resizeEdge === 'end'
+              })
+            })]
+          }) : null
+        })]
+      })), /*#__PURE__*/jsx("div", {
+        className: style$2.labels,
+        children: labelTicks.map(tick => /*#__PURE__*/jsx("span", {
+          className: classNames(style$2['tick-label'], style$2[`tick-label-${tick.level}`], {
+            [style$2['tick-out']]: tick.outOfRange
+          }),
+          style: {
+            left: `${tick.ratio * 100}%`
+          },
+          children: tick.label
+        }, tick.key))
+      })]
+    })]
+  });
 };
+const TimeWindow = withLocale(TimeWindowInner);
 
 const DefaultFormInner = () => {
   const {
@@ -1378,186 +2372,620 @@ const DefaultFormInner = () => {
   });
 };
 
-var style$1 = {"slots":"kne-react-calendar_Ftp-V","slots-content":"kne-react-calendar_ArIB7","slots-dragging":"kne-react-calendar_zOHks","slot-item":"kne-react-calendar_fkkFH","slot-dot":"kne-react-calendar_XjojI","slot-time":"kne-react-calendar_343hW","slot-title":"kne-react-calendar_mkuiI","slot-free":"kne-react-calendar_7kzzQ","slot-occupied":"kne-react-calendar_gdNm7","slot-disabled":"kne-react-calendar_2LDxX","slot-selected":"kne-react-calendar_TYAi6","slot-tag":"kne-react-calendar_-xuUf","form-popover":"kne-react-calendar_W-I5J","schedule-popover":"kne-react-calendar_rVLO8","form-popover-title":"kne-react-calendar_mMpFQ","slot-popover-content":"kne-react-calendar_xYptY","slot-popover-title":"kne-react-calendar_oagF-","form-actions":"kne-react-calendar_4NPv0"};
+var style$1 = {"kne-responsive-boundary":"kne-react-calendar_U1upa","kne-responsive-scroll":"kne-react-calendar_vKocI","slots":"kne-react-calendar_Ftp-V","timeline":"kne-react-calendar_EaUED","timeline-axis":"kne-react-calendar_X2W6x","timeline-axis-label":"kne-react-calendar_NvxDW","timeline-grid":"kne-react-calendar_gTav1","timeline-grid-dragging":"kne-react-calendar_4qf3-","timeline-line":"kne-react-calendar_Tp2ES","timeline-line-hour":"kne-react-calendar_M5-iS","timeline-disabled":"kne-react-calendar_-g-DR","timeline-disabled-reason":"kne-react-calendar_3vFqg","timeline-event":"kne-react-calendar_Wd-9L","timeline-event-title":"kne-react-calendar_WKbMK","timeline-event-time":"kne-react-calendar_K98yc","timeline-event-compact":"kne-react-calendar_WrUNC","timeline-event-disabled":"kne-react-calendar_C4d2-","timeline-ghost":"kne-react-calendar_0T5mO","timeline-now":"kne-react-calendar_AzaVv","timeline-popover-anchor":"kne-react-calendar_WtBzl","timeline-selection":"kne-react-calendar_z-uOR","timeline-selection-dragging":"kne-react-calendar_MbeJu","timeline-selection-label":"kne-react-calendar_7nYLD","timeline-selection-compact":"kne-react-calendar_CpsWx","timeline-selection-badge":"kne-react-calendar_NqiWA","timeline-selection-conflict":"kne-react-calendar_XQQ3E","timeline-selection-edge":"kne-react-calendar_s2EvF","timeline-selection-edge-start":"kne-react-calendar_PcIon","timeline-selection-edge-end":"kne-react-calendar_nS8Mr","form-popover":"kne-react-calendar_W-I5J","schedule-popover":"kne-react-calendar_rVLO8","form-popover-title":"kne-react-calendar_mMpFQ","form-sheet":"kne-react-calendar_n-MRC","form-sheet-content":"kne-react-calendar_ZaEkY","form-actions":"kne-react-calendar_4NPv0","form-conflict":"kne-react-calendar_PpU92","form-time-window":"kne-react-calendar_Wd4qh","event-detail":"kne-react-calendar_Dc-t3","event-detail-clickable":"kne-react-calendar_C3waU","event-detail-title":"kne-react-calendar_FkbSR","event-detail-disabled":"kne-react-calendar_UsltM","event-detail-bar":"kne-react-calendar_ZETY4","event-detail-body":"kne-react-calendar_v9RjG","event-detail-time":"kne-react-calendar_NT-kw","event-detail-text":"kne-react-calendar_vOb62","event-detail-tag":"kne-react-calendar_rs8bh"};
 
-const SlotEvents = ({
-  slot,
+const EventDetail = ({
+  event,
   date,
   onEventClick
-}) => /*#__PURE__*/jsx("div", {
-  className: style$1['slot-popover-content'],
-  children: /*#__PURE__*/jsx(List, {
-    size: "small",
-    dataSource: slot.events,
-    renderItem: event => /*#__PURE__*/jsx(EventItem, {
-      event: event,
-      date: date,
-      mode: "schedule",
-      onEventClick: onEventClick
-    })
-  })
-});
+}) => {
+  const clickable = !event.disabled && (typeof event.onClick === 'function' || typeof onEventClick === 'function');
+  const handleClick = () => {
+    if (typeof event.onClick === 'function') {
+      event.onClick(event, {
+        date,
+        mode: 'schedule'
+      });
+      return;
+    }
+    onEventClick == null || onEventClick(event, {
+      date,
+      mode: 'schedule'
+    });
+  };
+  const tagLabel = getEventTagLabel(event);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(style$1['event-detail'], {
+      [style$1['event-detail-clickable']]: clickable,
+      [style$1['event-detail-disabled']]: event.disabled
+    }),
+    style: event.color ? {
+      '--timeline-event-color': event.color
+    } : undefined,
+    role: clickable ? 'button' : undefined,
+    tabIndex: clickable ? 0 : undefined,
+    onClick: clickable ? handleClick : undefined,
+    onKeyDown: clickable ? keyEvent => {
+      if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
+        keyEvent.preventDefault();
+        handleClick();
+      }
+    } : undefined,
+    children: [/*#__PURE__*/jsx("span", {
+      className: style$1['event-detail-bar']
+    }), /*#__PURE__*/jsxs("div", {
+      className: style$1['event-detail-body'],
+      children: [/*#__PURE__*/jsx("div", {
+        className: style$1['event-detail-title'],
+        children: event.title
+      }), /*#__PURE__*/jsx("div", {
+        className: style$1['event-detail-time'],
+        children: formatRange(event.start, event.end)
+      }), event.detail ? /*#__PURE__*/jsx("div", {
+        className: style$1['event-detail-text'],
+        children: event.detail
+      }) : null, tagLabel ? /*#__PURE__*/jsx(Tag, {
+        className: style$1['event-detail-tag'],
+        color: event.color,
+        children: tagLabel
+      }) : null]
+    })]
+  });
+};
 
-const SlotItem = ({
-  slot,
+const DRAG_THRESHOLD_PX = 4;
+const TOUCH_SLOP_PX = 8;
+const LONG_PRESS_MS = 350;
+const Timeline = ({
   date,
-  selected,
+  day,
+  hourHeight,
+  timeUnit,
+  timeStep,
+  eventItems,
+  disabledRanges,
+  blockers,
+  conflicts,
+  allowMultiSelect,
+  selection,
+  dragging,
   formPopover,
   popoverOpen,
+  popoverPlacement,
+  popoverAnchor,
   onPopoverOpenChange,
-  onContextMenu,
-  onMouseDown,
-  onPointerDown,
-  onMouseEnter,
-  onMouseUp,
-  onClick,
+  onSelectionDrag,
+  onSelectionCommit,
+  onFreeSlotClick,
   onEventClick,
-  renderTimeSlot,
-  renderOccupiedSlot
+  renderEventBlock,
+  renderOccupiedSlot,
+  interactionRef,
+  isMobile
 }) => {
-  const {
-    formatMessage
-  } = useIntl();
-  const content = renderTimeSlot == null ? void 0 : renderTimeSlot(slot, {
-    selected
-  });
-  if (content) {
-    const customNode = /*#__PURE__*/jsx("div", {
-      "data-slot-index": slot.index,
-      "data-slot-status": slot.status,
-      onContextMenu: onContextMenu,
-      onMouseDown: onMouseDown,
-      onPointerDown: onPointerDown,
-      onMouseEnter: onMouseEnter,
-      onMouseUp: onMouseUp,
-      onClick: onClick,
-      children: content
-    });
-    if (formPopover) {
-      return /*#__PURE__*/jsx(Popover, {
-        rootClassName: style$1['schedule-popover'],
-        open: popoverOpen,
-        onOpenChange: onPopoverOpenChange,
-        content: formPopover,
-        trigger: "click",
-        placement: "bottom",
-        autoAdjustOverflow: true,
-        children: customNode
+  const gridRef = useRef(null);
+  const gestureRef = useRef(null);
+  const suppressClickRef = useRef(false);
+  const touchCommitRef = useRef(0);
+  const [hover, setHover] = useState(null);
+  const [activeEventKey, setActiveEventKey] = useState(null);
+  const pxPerMs = hourHeight / (60 * MINUTE_MS$1);
+  const height = (day.endMs - day.startMs) * pxPerMs;
+  const unitMs = timeUnit * MINUTE_MS$1;
+  const stepMs = timeStep * MINUTE_MS$1;
+  const latest = useRef({});
+  latest.current = {
+    day,
+    blockers,
+    unitMs,
+    stepMs,
+    allowMultiSelect,
+    selection,
+    onSelectionDrag,
+    onSelectionCommit,
+    onFreeSlotClick,
+    pxPerMs
+  };
+  const toY = ms => (ms - day.startMs) * pxPerMs;
+  const lines = useMemo(() => {
+    const list = [];
+    for (let ms = day.startMs; ms <= day.endMs; ms += unitMs) {
+      list.push({
+        ms,
+        hour: dayjs(ms).minute() === 0
       });
     }
-    return customNode;
-  }
-  const wrapWithPopover = node => {
-    if (formPopover) {
-      return /*#__PURE__*/jsx(Popover, {
-        rootClassName: style$1['schedule-popover'],
-        open: popoverOpen,
-        onOpenChange: onPopoverOpenChange,
-        content: formPopover,
-        trigger: "click",
-        placement: "bottom",
-        autoAdjustOverflow: true,
-        children: node
+    return list;
+  }, [day.endMs, day.startMs, unitMs]);
+  const labels = useMemo(() => {
+    const list = [];
+    let cursor = dayjs(day.startMs);
+    if (cursor.minute() !== 0) {
+      list.push(day.startMs);
+      cursor = cursor.add(1, 'hour').startOf('hour');
+    }
+    for (; cursor.valueOf() <= day.endMs; cursor = cursor.add(1, 'hour')) {
+      list.push(cursor.valueOf());
+    }
+    if (list[list.length - 1] !== day.endMs) {
+      list.push(day.endMs);
+    }
+    return list;
+  }, [day.endMs, day.startMs]);
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 60 * 1000);
+    return () => clearInterval(timer);
+  }, []);
+  const showNow = now >= day.startMs && now <= day.endMs;
+  const msAtClientY = clientY => {
+    const rect = gridRef.current.getBoundingClientRect();
+    const {
+      day: currentDay,
+      pxPerMs: currentPx
+    } = latest.current;
+    return Math.min(Math.max(currentDay.startMs + (clientY - rect.top) / currentPx, currentDay.startMs), currentDay.endMs - 1);
+  };
+  const finishGesture = () => {
+    const gesture = gestureRef.current;
+    if (!gesture) {
+      return;
+    }
+    clearTimeout(gesture.timer);
+    window.removeEventListener('pointermove', gesture.onMove);
+    window.removeEventListener('pointerup', gesture.onUp);
+    window.removeEventListener('pointercancel', gesture.onCancel);
+    gestureRef.current = null;
+  };
+  useEffect(() => finishGesture, []);
+  useEffect(() => {
+    const grid = gridRef.current;
+    if (!grid) {
+      return undefined;
+    }
+    const preventScroll = event => {
+      var _gestureRef$current;
+      if ((_gestureRef$current = gestureRef.current) != null && _gestureRef$current.active) {
+        event.preventDefault();
+      }
+    };
+    const preventGhostClick = event => {
+      if (Date.now() - touchCommitRef.current < 300) {
+        event.preventDefault();
+      }
+    };
+    grid.addEventListener('touchmove', preventScroll, {
+      passive: false
+    });
+    grid.addEventListener('touchend', preventGhostClick, {
+      passive: false
+    });
+    return () => {
+      grid.removeEventListener('touchmove', preventScroll);
+      grid.removeEventListener('touchend', preventGhostClick);
+    };
+  }, []);
+  const handlePointerDown = event => {
+    var _gridRef$current;
+    if (!((_gridRef$current = gridRef.current) != null && _gridRef$current.contains(event.target))) {
+      return;
+    }
+    if (interactionRef) {
+      interactionRef.current = Date.now();
+    }
+    if (event.pointerType === 'mouse' && event.button !== 0) {
+      return;
+    }
+    const {
+      day: currentDay,
+      blockers: currentBlockers,
+      selection: currentSelection,
+      allowMultiSelect: multi
+    } = latest.current;
+    const edgeNode = event.target.closest('[data-selection-edge]');
+    const onSelection = event.target.closest('[data-timeline-selection]');
+    const eventNode = event.target.closest('[data-timeline-event]');
+    const pointerMs = msAtClientY(event.clientY);
+    let gesture;
+    if (edgeNode && currentSelection && multi) {
+      gesture = {
+        type: 'resize',
+        edge: edgeNode.dataset.selectionEdge,
+        active: true
+      };
+    } else if (onSelection && currentSelection) {
+      gesture = {
+        type: 'move',
+        active: true
+      };
+    } else {
+      const gap = getFreeGap(pointerMs, currentBlockers, currentDay);
+      if (!gap) {
+        return;
+      }
+      gesture = {
+        type: 'create',
+        gap,
+        active: event.pointerType === 'mouse',
+        onEvent: !!eventNode
+      };
+    }
+    if (gesture.type !== 'create') {
+      const ownGap = getFreeGap(currentSelection.startMs, currentBlockers, currentDay) || currentDay;
+      gesture.gap = ownGap;
+      gesture.range0 = currentSelection;
+      event.preventDefault();
+    }
+    Object.assign(gesture, {
+      pointerId: event.pointerId,
+      pointerType: event.pointerType,
+      startX: event.clientX,
+      startY: event.clientY,
+      startMs: pointerMs,
+      moved: false
+    });
+    setHover(null);
+    gesture.onMove = moveEvent => {
+      if (moveEvent.pointerId !== gesture.pointerId) {
+        return;
+      }
+      const dx = moveEvent.clientX - gesture.startX;
+      const dy = moveEvent.clientY - gesture.startY;
+      if (!gesture.active) {
+        if (Math.hypot(dx, dy) > TOUCH_SLOP_PX) {
+          finishGesture();
+        }
+        return;
+      }
+      if (!gesture.moved && Math.abs(dy) < DRAG_THRESHOLD_PX) {
+        return;
+      }
+      const {
+        stepMs: step,
+        day: d,
+        allowMultiSelect: canResize
+      } = latest.current;
+      const ms = msAtClientY(moveEvent.clientY);
+      let next;
+      if (gesture.type === 'create') {
+        if (!canResize) {
+          return;
+        }
+        next = createSelectionRange({
+          anchorMs: gesture.startMs,
+          pointerMs: ms,
+          gap: gesture.gap,
+          originMs: d.startMs,
+          stepMs: step
+        });
+      } else if (gesture.type === 'move') {
+        next = moveSelectionRange({
+          range: gesture.range0,
+          deltaMs: ms - gesture.startMs,
+          gap: gesture.gap,
+          originMs: d.startMs,
+          stepMs: step
+        });
+      } else {
+        next = resizeSelectionRange({
+          range: gesture.range0,
+          edge: gesture.edge,
+          pointerMs: ms,
+          gap: gesture.gap,
+          originMs: d.startMs,
+          stepMs: step
+        });
+      }
+      gesture.moved = true;
+      gesture.range = next;
+      latest.current.onSelectionDrag(next);
+    };
+    gesture.onUp = upEvent => {
+      if (upEvent.pointerId !== gesture.pointerId) {
+        return;
+      }
+      finishGesture();
+      if (gesture.pointerType !== 'mouse') {
+        touchCommitRef.current = Date.now();
+      }
+      const {
+        unitMs: unit,
+        day: d,
+        onSelectionCommit: commit,
+        onFreeSlotClick: onFreeClick
+      } = latest.current;
+      if (gesture.moved) {
+        suppressClickRef.current = true;
+        setTimeout(() => {
+          suppressClickRef.current = false;
+        }, 0);
+        commit(gesture.range);
+        return;
+      }
+      if (gesture.type !== 'create') {
+        commit(gesture.range0);
+        return;
+      }
+      if (gesture.onEvent) {
+        return;
+      }
+      const range = clickSelectionRange({
+        pointerMs: gesture.startMs,
+        gap: gesture.gap,
+        originMs: d.startMs,
+        unitMs: unit
+      });
+      const slotStart = snapToStep(gesture.startMs, {
+        originMs: d.startMs,
+        stepMs: unit,
+        mode: 'floor'
+      });
+      onFreeClick == null || onFreeClick({
+        start: new Date(slotStart),
+        end: new Date(Math.min(slotStart + unit, d.endMs))
       });
+      commit(range);
+    };
+    gesture.onCancel = cancelEvent => {
+      if (cancelEvent.pointerId !== gesture.pointerId) {
+        return;
+      }
+      const wasMoved = gesture.moved;
+      finishGesture();
+      if (wasMoved) {
+        latest.current.onSelectionCommit(gesture.range);
+      }
+    };
+    if (!gesture.active) {
+      gesture.timer = setTimeout(() => {
+        gesture.active = true;
+        navigator.vibrate == null || navigator.vibrate(10);
+        const {
+          day: d,
+          unitMs: unit
+        } = latest.current;
+        const range = clickSelectionRange({
+          pointerMs: gesture.startMs,
+          gap: gesture.gap,
+          originMs: d.startMs,
+          unitMs: unit
+        });
+        gesture.moved = true;
+        gesture.range = range;
+        gesture.startMs = range.startMs;
+        latest.current.onSelectionDrag(range);
+      }, LONG_PRESS_MS);
     }
-    if (slot.status === 'occupied') {
-      return /*#__PURE__*/jsx(Popover, {
-        rootClassName: style$1['schedule-popover'],
-        open: popoverOpen,
-        onOpenChange: onPopoverOpenChange,
-        content: /*#__PURE__*/jsx(SlotEvents, {
-          slot: slot,
-          date: date,
-          onEventClick: onEventClick
-        }),
-        trigger: "click",
-        placement: "bottom",
-        autoAdjustOverflow: true,
-        children: node
+    finishGesture();
+    gestureRef.current = gesture;
+    window.addEventListener('pointermove', gesture.onMove);
+    window.addEventListener('pointerup', gesture.onUp);
+    window.addEventListener('pointercancel', gesture.onCancel);
+  };
+  const handleHover = event => {
+    var _gridRef$current2;
+    if (event.pointerType !== 'mouse' || gestureRef.current || !((_gridRef$current2 = gridRef.current) != null && _gridRef$current2.contains(event.target))) {
+      return;
+    }
+    if (event.target.closest('[data-timeline-selection]')) {
+      setHover(null);
+      return;
+    }
+    const ms = msAtClientY(event.clientY);
+    const gap = getFreeGap(ms, blockers, day);
+    if (!gap) {
+      setHover(null);
+      return;
+    }
+    const range = clickSelectionRange({
+      pointerMs: ms,
+      gap,
+      originMs: day.startMs,
+      unitMs
+    });
+    setHover(current => current && current.startMs === range.startMs && current.endMs === range.endMs ? current : range);
+  };
+  const renderEventContent = item => {
+    const {
+      event
+    } = item;
+    if (renderEventBlock) {
+      return renderEventBlock(event, {
+        start: new Date(item.startMs),
+        end: new Date(item.endMs)
       });
     }
-    if (slot.disabledReason) {
-      return /*#__PURE__*/jsx(Tooltip, {
-        title: slot.disabledReason,
-        children: node
+    if (renderOccupiedSlot) {
+      return renderOccupiedSlot({
+        start: new Date(item.startMs),
+        end: new Date(item.endMs),
+        status: 'occupied',
+        events: [event]
+      }, {
+        events: [event]
       });
     }
-    return node;
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("div", {
+        className: style$1['timeline-event-title'],
+        children: event.title
+      }), /*#__PURE__*/jsx("div", {
+        className: style$1['timeline-event-time'],
+        children: formatRange(event.start, event.end)
+      })]
+    });
   };
-  const slotClassName = classNames(style$1['slot-item'], style$1[`slot-${slot.status}`], {
-    [style$1['slot-selected']]: selected
-  });
-  const slotChildren = /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("span", {
-      className: style$1['slot-dot']
-    }), /*#__PURE__*/jsx("span", {
-      className: style$1['slot-time'],
-      children: formatRange(slot.start, slot.end)
-    }), slot.status === 'disabled' ? /*#__PURE__*/jsx(Tag, {
-      className: style$1['slot-tag'],
-      children: formatMessage({
-        id: 'SlotItem.disabled'
-      })
-    }) : null, slot.status === 'occupied' ? /*#__PURE__*/jsx(Tag, {
-      className: style$1['slot-tag'],
-      color: "red",
-      children: formatMessage({
-        id: 'SlotItem.occupied'
-      })
-    }) : null, slot.status === 'occupied' && renderOccupiedSlot ? renderOccupiedSlot(slot, {
-      events: slot.events
-    }) : null, slot.status === 'occupied' && !renderOccupiedSlot ? /*#__PURE__*/jsx("span", {
-      className: style$1['slot-title'],
-      children: slot.events.map(event => event.title).join('、')
+  const selectionBlock = selection ? /*#__PURE__*/jsxs("div", {
+    "data-timeline-selection": "",
+    className: classNames(style$1['timeline-selection'], {
+      [style$1['timeline-selection-dragging']]: dragging,
+      [style$1['timeline-selection-conflict']]: conflicts.length > 0,
+      [style$1['timeline-selection-compact']]: (selection.endMs - selection.startMs) * pxPerMs < 34
+    }),
+    style: {
+      top: toY(selection.startMs),
+      height: Math.max((selection.endMs - selection.startMs) * pxPerMs, 6)
+    },
+    children: [allowMultiSelect ? /*#__PURE__*/jsx("span", {
+      "data-selection-edge": "start",
+      className: classNames(style$1['timeline-selection-edge'], style$1['timeline-selection-edge-start'])
+    }) : null, /*#__PURE__*/jsxs("div", {
+      className: style$1['timeline-selection-label'],
+      children: [/*#__PURE__*/jsx("span", {
+        children: formatRange(selection.startMs, selection.endMs)
+      }), conflicts.length ? /*#__PURE__*/jsx("span", {
+        className: style$1['timeline-selection-badge'],
+        children: conflicts.length
+      }) : null]
+    }), allowMultiSelect ? /*#__PURE__*/jsx("span", {
+      "data-selection-edge": "end",
+      className: classNames(style$1['timeline-selection-edge'], style$1['timeline-selection-edge-end'])
     }) : null]
+  }) : null;
+  return /*#__PURE__*/jsxs("div", {
+    className: style$1['timeline'],
+    style: {
+      height
+    },
+    children: [/*#__PURE__*/jsx("div", {
+      className: style$1['timeline-axis'],
+      "aria-hidden": true,
+      children: labels.map(ms => /*#__PURE__*/jsx("span", {
+        className: style$1['timeline-axis-label'],
+        style: {
+          top: toY(ms)
+        },
+        children: dayjs(ms).format(TIME_FORMAT)
+      }, ms))
+    }), /*#__PURE__*/jsxs("div", {
+      ref: gridRef,
+      className: classNames(style$1['timeline-grid'], {
+        [style$1['timeline-grid-dragging']]: dragging
+      }),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handleHover,
+      onPointerLeave: () => setHover(null),
+      onContextMenu: event => {
+        var _gridRef$current3;
+        if ((_gridRef$current3 = gridRef.current) != null && _gridRef$current3.contains(event.target)) {
+          event.preventDefault();
+        }
+      },
+      onClickCapture: event => {
+        var _gridRef$current4;
+        if (suppressClickRef.current && (_gridRef$current4 = gridRef.current) != null && _gridRef$current4.contains(event.target)) {
+          suppressClickRef.current = false;
+          event.stopPropagation();
+        }
+      },
+      children: [lines.map(line => /*#__PURE__*/jsx("span", {
+        className: classNames(style$1['timeline-line'], {
+          [style$1['timeline-line-hour']]: line.hour
+        }),
+        style: {
+          top: toY(line.ms)
+        }
+      }, line.ms)), disabledRanges.map(range => {
+        const block = /*#__PURE__*/jsx("div", {
+          className: style$1['timeline-disabled'],
+          style: {
+            top: toY(range.startMs),
+            height: (range.endMs - range.startMs) * pxPerMs
+          },
+          children: range.reason && (range.endMs - range.startMs) * pxPerMs >= 22 ? /*#__PURE__*/jsx("span", {
+            className: style$1['timeline-disabled-reason'],
+            children: range.reason
+          }) : null
+        }, range.startMs);
+        return range.reason ? /*#__PURE__*/jsx(Tooltip, {
+          title: range.reason,
+          children: block
+        }, range.startMs) : block;
+      }), eventItems.map(item => {
+        const key = `${item.event.id}-${item.startMs}`;
+        const blockHeight = (item.endMs - item.startMs) * pxPerMs;
+        return /*#__PURE__*/jsx(Popover, {
+          arrow: false,
+          trigger: "click",
+          placement: isMobile ? 'bottom' : 'left',
+          rootClassName: style$1['schedule-popover'],
+          open: activeEventKey === key,
+          onOpenChange: open => setActiveEventKey(open ? key : null),
+          content: /*#__PURE__*/jsx(EventDetail, {
+            event: item.event,
+            date: date,
+            onEventClick: onEventClick
+          }),
+          children: /*#__PURE__*/jsx("div", {
+            "data-timeline-event": "",
+            className: classNames(style$1['timeline-event'], {
+              [style$1['timeline-event-disabled']]: item.event.disabled,
+              [style$1['timeline-event-compact']]: blockHeight < 34
+            }),
+            style: _extends({
+              top: toY(item.startMs),
+              height: Math.max(blockHeight - 2, 4),
+              left: `calc(${item.column / item.columns * 100}% + 2px)`,
+              width: `calc(${100 / item.columns}% - 4px)`
+            }, item.event.color ? {
+              '--timeline-event-color': item.event.color
+            } : null),
+            children: renderEventContent(item)
+          })
+        }, key);
+      }), hover && !selection ? /*#__PURE__*/jsxs("div", {
+        className: style$1['timeline-ghost'],
+        style: {
+          top: toY(hover.startMs),
+          height: (hover.endMs - hover.startMs) * pxPerMs
+        },
+        children: ["+ ", dayjs(hover.startMs).format(TIME_FORMAT)]
+      }) : null, showNow ? /*#__PURE__*/jsx("span", {
+        className: style$1['timeline-now'],
+        style: {
+          top: toY(now)
+        }
+      }) : null, selectionBlock, formPopover && popoverAnchor ? /*#__PURE__*/jsx(Popover, {
+        arrow: false,
+        trigger: "click",
+        placement: popoverPlacement,
+        rootClassName: style$1['schedule-popover'],
+        open: popoverOpen && !dragging,
+        onOpenChange: onPopoverOpenChange,
+        content: formPopover,
+        destroyOnHidden: true,
+        children: /*#__PURE__*/jsx("span", {
+          "aria-hidden": true,
+          className: style$1['timeline-popover-anchor'],
+          style: {
+            top: toY(popoverAnchor.startMs),
+            height: (popoverAnchor.endMs - popoverAnchor.startMs) * pxPerMs
+          }
+        })
+      }) : null]
+    })]
   });
-  const slotHandlers = {
-    onContextMenu,
-    onMouseDown,
-    onPointerDown,
-    onMouseEnter,
-    onMouseUp,
-    onClick
-  };
-  const inner = slot.status === 'disabled' ? /*#__PURE__*/jsx("button", {
-    type: "button",
-    className: slotClassName,
-    "data-slot-index": slot.index,
-    "data-slot-status": slot.status,
-    disabled: true,
-    onContextMenu: onContextMenu,
-    onMouseDown: onMouseDown,
-    onPointerDown: onPointerDown,
-    onMouseEnter: onMouseEnter,
-    onMouseUp: onMouseUp,
-    onClick: onClick,
-    children: slotChildren
-  }) : /*#__PURE__*/jsx("div", _extends({
-    role: "button",
-    tabIndex: 0,
-    className: slotClassName,
-    "data-slot-index": slot.index,
-    "data-slot-status": slot.status
-  }, slotHandlers, {
-    children: slotChildren
-  }));
-  return wrapWithPopover(inner);
 };
 
 const SchedulePanel = ({
   date,
   slots,
+  events: dayEvents,
+  dayStart,
+  dayEnd,
+  timeUnit,
+  timeStep,
+  hourHeight,
+  allowConflict,
   loading,
   allowMultiSelect,
-  selectedSlots,
-  setSelectedSlots,
   onSlotRangeChange,
   onFreeSlotClick,
   onCreate,
   formInner,
   formProps,
   defaultFormValues,
-  renderTimeSlot,
+  renderEventBlock,
   renderOccupiedSlot,
   renderPanelHeader,
   onEventClick
@@ -1565,56 +2993,129 @@ const SchedulePanel = ({
   const {
     formatMessage
   } = useIntl();
-  const events = useMemo(() => sortEventsByStart(dedupeEventsById(slots.flatMap(slot => slot.events || []))), [slots]);
+  const isMobile = useIsMobile();
+  const scrollRef = useRef(null);
+  const interactionRef = useRef(0);
+  const openedAtRef = useRef(0);
+  const [selection, setSelection] = useState(null);
+  const [dragging, setDragging] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [popoverPlacement, setPopoverPlacement] = useState('left');
+  const [popoverAnchor, setPopoverAnchor] = useState(null);
+  const day = useMemo(() => ({
+    startMs: parseDayTime(date, dayStart).valueOf(),
+    endMs: parseDayTime(date, dayEnd).valueOf()
+  }), [date, dayEnd, dayStart]);
+  const events = useMemo(() => sortEventsByStart(dayEvents || []), [dayEvents]);
+  const eventItems = useMemo(() => layoutTimelineEvents(events, day), [day, events]);
+  const disabledRanges = useMemo(() => mergeDisabledSlots(slots), [slots]);
+  const blockers = useMemo(() => toBlockers(allowConflict ? disabledRanges : [...disabledRanges, ...eventItems]), [allowConflict, disabledRanges, eventItems]);
+  const conflicts = useMemo(() => findOverlappingEvents(selection, eventItems.map(item => item.event)), [eventItems, selection]);
+  const gap = selection && getFreeGap(selection.startMs, blockers, day) || day;
+  const windowRange = useMemo(() => [new Date(gap.startMs), new Date(gap.endMs)], [gap.startMs, gap.endMs]);
   const panelHeader = renderPanelHeader == null ? void 0 : renderPanelHeader({
     date: date.toDate(),
     mode: 'schedule',
     events
   });
-  const {
-    activePopoverKey,
-    dragging,
-    formPopoverKey,
-    selectedAnchorKey,
-    selectedKeys,
-    selectSlots,
-    slotsRef,
-    handleMouseDown,
-    handleMouseEnter,
-    handleMouseUp,
-    handleMouseLeave,
-    handlePopoverOpenChange
-  } = useScheduleSelectionGesture({
-    slots,
-    selectedSlots,
-    setSelectedSlots,
-    allowMultiSelect,
-    onSlotRangeChange,
-    onFreeSlotClick
-  });
   const {
     scrolled,
     onScroll
-  } = usePanelScrollShadow(date.format(DATE_FORMAT), slotsRef);
-  const formContext = {
+  } = usePanelScrollShadow(date.format(DATE_FORMAT), scrollRef);
+  const getFormContext = range => ({
     date: date.toDate(),
-    slots: selectedSlots
+    start: range ? new Date(range.startMs) : null,
+    end: range ? new Date(range.endMs) : null,
+    slots: findOverlappingSlots(range, slots),
+    conflicts: findOverlappingEvents(range, eventItems.map(item => item.event))
+  });
+  const emitRange = range => {
+    if (range) {
+      onSlotRangeChange == null || onSlotRangeChange(findOverlappingSlots(range, slots), {
+        action: 'select',
+        start: new Date(range.startMs),
+        end: new Date(range.endMs)
+      });
+    } else {
+      onSlotRangeChange == null || onSlotRangeChange([], {
+        action: 'clear'
+      });
+    }
+  };
+  const clearSelection = () => {
+    setPopoverOpen(false);
+    setPopoverAnchor(null);
+    setDragging(false);
+    if (selection) {
+      setSelection(null);
+      emitRange(null);
+    }
   };
-  const formPopover = selectedSlots.length && !dragging ? /*#__PURE__*/jsxs("div", {
-    className: style$1['form-popover'],
+  const commitSelection = range => {
+    setDragging(false);
+    if (!range) {
+      return;
+    }
+    if (!popoverOpen) {
+      var _scrollRef$current;
+      const stacked = !!((_scrollRef$current = scrollRef.current) != null && _scrollRef$current.closest('[data-schedule-layout="stacked"]'));
+      setPopoverPlacement(stacked ? 'bottom' : 'left');
+      setPopoverAnchor(range);
+    }
+    setSelection(range);
+    openedAtRef.current = Date.now();
+    setPopoverOpen(true);
+    emitRange(range);
+  };
+  const formContext = getFormContext(selection);
+  const formPopover = selection ? /*#__PURE__*/jsxs("div", {
+    className: classNames(style$1['form-popover'], {
+      [style$1['form-sheet-content']]: isMobile
+    }),
     children: [/*#__PURE__*/jsx("div", {
       className: style$1['form-popover-title'],
       children: formatMessage({
-        id: 'SchedulePanel.newSchedule'
-      }, {
-        range: formatRange(selectedSlots[0].start, selectedSlots[selectedSlots.length - 1].end)
+        id: 'SchedulePanel.newScheduleTitle'
       })
-    }), /*#__PURE__*/jsxs(Form, _extends({}, formProps, {
+    }), /*#__PURE__*/jsx(TimeWindow, {
+      className: style$1['form-time-window'],
+      size: isMobile ? 'default' : 'small',
+      value: [new Date(selection.startMs), new Date(selection.endMs)],
+      range: windowRange,
+      step: timeStep,
+      minDuration: timeStep,
+      resizable: allowMultiSelect,
+      debounceWait: 120,
+      format: "HH:mm",
+      separator: " - ",
+      onChange: value => {
+        if (!value) {
+          return;
+        }
+        const range = {
+          startMs: value[0].getTime(),
+          endMs: value[1].getTime()
+        };
+        setSelection(range);
+        emitRange(range);
+      }
+    }), conflicts.length ? /*#__PURE__*/jsx(Alert, {
+      className: style$1['form-conflict'],
+      type: "warning",
+      showIcon: true,
+      title: `${formatMessage({
+        id: 'SchedulePanel.conflict'
+      }, {
+        count: conflicts.length
+      })}：${conflicts.map(event => event.title).join('、')}`
+    }) : null, /*#__PURE__*/jsxs(Form, _extends({}, formProps, isMobile ? {
+      size: 'large'
+    } : null, {
       data: getDefaultFormValues(defaultFormValues, formContext),
       onSubmit: async values => {
         try {
-          await (onCreate == null ? void 0 : onCreate(values, formContext));
-          selectSlots([]);
+          await (onCreate == null ? void 0 : onCreate(values, getFormContext(selection)));
+          clearSelection();
         } catch (_unused) {
           // Keep the form open when creation fails.
         }
@@ -1622,7 +3123,7 @@ const SchedulePanel = ({
       children: [formInner || /*#__PURE__*/jsx(DefaultFormInner, {}), /*#__PURE__*/jsxs("div", {
         className: style$1['form-actions'],
         children: [/*#__PURE__*/jsx(Button, {
-          onClick: () => selectSlots([]),
+          onClick: clearSelection,
           children: formatMessage({
             id: 'SchedulePanel.cancel'
           })
@@ -1634,7 +3135,7 @@ const SchedulePanel = ({
       })]
     }))]
   }) : null;
-  return /*#__PURE__*/jsx(Card, {
+  return /*#__PURE__*/jsxs(Card, {
     bordered: false,
     title: panelHeader || /*#__PURE__*/jsx(PanelTitle, {
       date: date,
@@ -1643,60 +3144,82 @@ const SchedulePanel = ({
       })
     }),
     className: panelStyle['panel-card'],
-    children: /*#__PURE__*/jsx(Spin, {
+    children: [/*#__PURE__*/jsx(Spin, {
       spinning: !!loading,
       classNames: {
         root: panelStyle['panel-spin'],
         container: panelStyle['panel-spin-container']
       },
       children: /*#__PURE__*/jsxs("div", {
-        ref: slotsRef,
-        className: classNames(style$1['slots'], {
-          [style$1['slots-dragging']]: dragging
-        }),
+        ref: scrollRef,
+        className: style$1['slots'],
         onScroll: onScroll,
-        onMouseUp: handleMouseUp,
-        onMouseLeave: handleMouseLeave,
         children: [/*#__PURE__*/jsx(PanelScrollShadow, {
           visible: scrolled
-        }), /*#__PURE__*/jsx("div", {
-          className: style$1['slots-content'],
-          children: slots.map((slot, index) => {
-            const slotWithIndex = _extends({}, slot, {
-              index
-            });
-            const occupiedPopoverKey = `occupied:${slot.key}`;
-            const currentPopoverKey = slot.key === selectedAnchorKey && formPopover ? formPopoverKey : slot.status === 'occupied' ? occupiedPopoverKey : null;
-            return /*#__PURE__*/jsx(SlotItem, {
-              slot: slotWithIndex,
-              date: date.toDate(),
-              selected: selectedKeys.has(slot.key),
-              formPopover: slot.key === selectedAnchorKey ? formPopover : null,
-              popoverOpen: !!currentPopoverKey && activePopoverKey === currentPopoverKey,
-              onPopoverOpenChange: open => handlePopoverOpenChange(open, currentPopoverKey, {
-                isForm: currentPopoverKey === formPopoverKey
-              }),
-              renderTimeSlot: renderTimeSlot,
-              renderOccupiedSlot: renderOccupiedSlot,
-              onEventClick: onEventClick,
-              onContextMenu: event => {
-                if (slot.status === 'free') {
-                  event.preventDefault();
-                }
-              },
-              onMouseDown: event => handleMouseDown(event, slot, index),
-              onMouseEnter: () => handleMouseEnter(index),
-              onMouseUp: handleMouseUp,
-              onClick: undefined
-            }, slot.key);
-          })
+        }), /*#__PURE__*/jsx(Timeline, {
+          date: date.toDate(),
+          day: day,
+          hourHeight: hourHeight,
+          timeUnit: timeUnit,
+          timeStep: timeStep,
+          eventItems: eventItems,
+          disabledRanges: disabledRanges,
+          blockers: blockers,
+          conflicts: conflicts,
+          allowMultiSelect: allowMultiSelect,
+          selection: selection,
+          dragging: dragging,
+          formPopover: isMobile ? null : formPopover,
+          isMobile: isMobile,
+          popoverOpen: popoverOpen,
+          popoverPlacement: popoverPlacement,
+          popoverAnchor: popoverAnchor,
+          interactionRef: interactionRef,
+          onPopoverOpenChange: open => {
+            if (open) {
+              setPopoverOpen(true);
+              return;
+            }
+            if (Date.now() - interactionRef.current < 400) {
+              return;
+            }
+            clearSelection();
+          },
+          onSelectionDrag: range => {
+            setDragging(true);
+            setSelection(range);
+          },
+          onSelectionCommit: commitSelection,
+          onFreeSlotClick: slot => onFreeSlotClick == null ? void 0 : onFreeSlotClick(_extends({}, slot, {
+            key: `${date.format(DATE_FORMAT)}-${slot.start.getTime()}`,
+            date: date.format(DATE_FORMAT),
+            status: 'free',
+            events: []
+          })),
+          onEventClick: onEventClick,
+          renderEventBlock: renderEventBlock,
+          renderOccupiedSlot: renderOccupiedSlot
         })]
       })
-    })
+    }), isMobile ? /*#__PURE__*/jsx(Drawer, {
+      placement: "bottom",
+      size: "auto",
+      closable: false,
+      rootClassName: style$1['form-sheet'],
+      open: !!selection && popoverOpen && !dragging,
+      onClose: () => {
+        if (Date.now() - openedAtRef.current < 500) {
+          return;
+        }
+        clearSelection();
+      },
+      destroyOnHidden: true,
+      children: formPopover
+    }) : null]
   });
 };
 
-var style = {"schedule-calendar-shell":"kne-react-calendar_csu63","schedule-calendar":"kne-react-calendar_5p1TK","calendar-side":"kne-react-calendar_nd7DK","panel-side":"kne-react-calendar_rWvHE","schedule-calendar-event-list-expanded":"kne-react-calendar_Av0q4","schedule-calendar-stacked":"kne-react-calendar_zGXr5"};
+var style = {"kne-responsive-boundary":"kne-react-calendar_gh14z","kne-responsive-scroll":"kne-react-calendar_Kfn6L","schedule-calendar-shell":"kne-react-calendar_csu63","schedule-calendar":"kne-react-calendar_5p1TK","calendar-side":"kne-react-calendar_nd7DK","panel-side":"kne-react-calendar_rWvHE","schedule-calendar-event-list-expanded":"kne-react-calendar_Av0q4","schedule-calendar-stacked":"kne-react-calendar_zGXr5"};
 
 dayjs.extend(customParseFormat);
 const buildMonthRuleCache = ({
@@ -1734,10 +3257,13 @@ const ScheduleCalendarInner = props => {
     timeUnit = 30,
     dayStart = '09:00',
     dayEnd = '18:00',
+    timeStep = 5,
+    hourHeight = 56,
+    allowConflict = false,
     allowMultiSelect = mode === 'schedule',
     renderDateCell,
     renderEventItem,
-    renderTimeSlot,
+    renderEventBlock,
     renderOccupiedSlot,
     renderPanelHeader,
     formInner,
@@ -1768,7 +3294,6 @@ const ScheduleCalendarInner = props => {
     onChange: props.onCurrentChange
   });
   const currentDate = useMemo(() => toDayjs(current) || selectedDate, [current, selectedDate]);
-  const [selectedSlots, setSelectedSlots] = useState([]);
   const eventGroup = useMemo(() => groupEventsByDate(events), [events]);
   const selectedEvents = useMemo(() => eventGroup[selectedDate.format(DATE_FORMAT)] || [], [eventGroup, selectedDate]);
   const ruleContext = useMemo(() => ({
@@ -1804,7 +3329,6 @@ const ScheduleCalendarInner = props => {
     const nextDate = date.startOf('day').toDate();
     setValue(nextDate, info);
     onDateChange == null || onDateChange(nextDate, info);
-    setSelectedSlots([]);
   };
   const handleCurrentChange = (date, info) => {
     setCurrent(date.startOf('month').toDate(), info);
@@ -1879,21 +3403,26 @@ const ScheduleCalendarInner = props => {
         children: mode === 'schedule' ? /*#__PURE__*/jsx(SchedulePanel, {
           date: selectedDate,
           slots: slots,
+          events: selectedEvents,
+          dayStart: dayStart,
+          dayEnd: dayEnd,
+          timeUnit: timeUnit,
+          timeStep: timeStep,
+          hourHeight: hourHeight,
+          allowConflict: allowConflict,
           loading: loading,
           allowMultiSelect: allowMultiSelect,
-          selectedSlots: selectedSlots,
-          setSelectedSlots: setSelectedSlots,
           onSlotRangeChange: onSlotRangeChange,
           onFreeSlotClick: onFreeSlotClick,
           onCreate: onCreate,
           formInner: formInner,
           formProps: formProps,
           defaultFormValues: defaultFormValues,
-          renderTimeSlot: renderTimeSlot,
+          renderEventBlock: renderEventBlock,
           renderOccupiedSlot: renderOccupiedSlot,
           renderPanelHeader: renderPanelHeader,
           onEventClick: onEventClick
-        }) : /*#__PURE__*/jsx(ViewPanel, {
+        }, selectedDate.format(DATE_FORMAT)) : /*#__PURE__*/jsx(ViewPanel, {
           date: selectedDate,
           events: selectedEvents,
           loading: loading,
@@ -1908,5 +3437,5 @@ const ScheduleCalendarInner = props => {
 };
 const ScheduleCalendar = withLocale(ScheduleCalendarInner);
 
-export { ScheduleCalendar as ReactCalendar, ScheduleCalendar, dedupeEventsById, ScheduleCalendar as default, generateTimeSlots, groupEventsByDate, normalizeEvent, sortEventsByStart };
+export { ScheduleCalendar as ReactCalendar, ScheduleCalendar, TimeWindow, dedupeEventsById, ScheduleCalendar as default, generateTimeSlots, groupEventsByDate, normalizeEvent, sortEventsByStart };
 //# sourceMappingURL=index.modern.js.map