@marco.colia/react-fast-scheduler 2.1.1 → 2.2.0

package/dist/index.js

@@ -1,10 +1,11 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { format, startOfMonth, startOfWeek, endOfWeek, endOfMonth, addDays, addMonths, isSameDay, isToday, isSameMonth } from 'date-fns';
-import * as React5 from 'react';
+import * as React2 from 'react';
 
 // src/components/defaultRenderAppointment/index.tsx
 function defaultRenderAppointment({
   appointment,
+  isDropInvalid,
   onPointerDown,
   onResizePointerDown,
   appointmentAppearance,
@@ -14,224 +15,37 @@ function defaultRenderAppointment({
   const description = typeof rawMaybe.description === "string" ? rawMaybe.description : void 0;
   const legacyClassName = typeof appointmentBackgroundColor === "string" ? appointmentBackgroundColor : void 0;
   const backgroundClassName = appointmentAppearance?.className ?? legacyClassName ?? "bg-muted/40 dark:bg-muted/30";
-  const className = `relative h-full cursor-grab overflow-hidden rounded-md border border-border p-2 pb-5 text-foreground ${backgroundClassName}`;
-  return /* @__PURE__ */ jsxs("div", { onPointerDown, className, children: [
-    /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold", children: appointment.title }),
-    description ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-[10px] font-medium text-muted-foreground", children: description }) : null,
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "button",
-        "aria-label": "Resize appointment",
-        onPointerDown: (event) => {
-          event.stopPropagation();
-          onResizePointerDown(event);
-        },
-        className: "absolute inset-x-1 bottom-1 h-2 cursor-ns-resize rounded-full bg-border/90 transition-colors hover:bg-border"
-      }
-    )
-  ] });
-}
-
-// src/lib/cn.ts
-function cn(...inputs) {
-  return inputs.filter(Boolean).join(" ");
-}
-var variantClasses = {
-  default: "bg-primary text-primary-foreground hover:bg-primary/90",
-  outline: "border border-border bg-card text-foreground hover:bg-muted",
-  ghost: "text-foreground hover:bg-muted"
-};
-var sizeClasses = {
-  default: "h-9 px-4 py-2",
-  sm: "h-8 px-3 text-xs",
-  icon: "h-8 w-8"
-};
-var Button = React5.forwardRef(function Button2({ className, variant = "default", size = "default", type = "button", ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type,
-      className: cn(
-        "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-        variantClasses[variant],
-        sizeClasses[size],
-        className
-      ),
-      ...props
-    }
-  );
-});
-function Calendar({
-  selected,
-  onSelect
-}) {
-  const [month, setMonth] = React5.useState(selected ?? /* @__PURE__ */ new Date());
-  React5.useEffect(() => {
-    if (selected) {
-      setMonth(selected);
-    }
-  }, [selected]);
-  const monthStart = startOfMonth(month);
-  const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 });
-  const calendarEnd = endOfWeek(endOfMonth(month), { weekStartsOn: 1 });
-  const days = [];
-  for (let day = calendarStart; day <= calendarEnd; day = addDays(day, 1)) {
-    days.push(day);
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "w-72 rounded-md bg-popover", children: [
-    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Previous month", onClick: () => setMonth(addMonths(month, -1)), children: "<" }),
-      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: format(month, "MMMM yyyy") }),
-      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", "aria-label": "Next month", onClick: () => setMonth(addMonths(month, 1)), children: ">" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 text-center text-xs text-muted-foreground", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((label) => /* @__PURE__ */ jsx("div", { className: "py-1", children: label }, label)) }),
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day) => {
-      const isSelected = selected ? isSameDay(day, selected) : false;
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: isSelected ? "default" : "ghost",
-          size: "icon",
-          className: cn(
-            "text-xs",
-            !isSameMonth(day, month) && "text-muted-foreground opacity-60",
-            isToday(day) && !isSelected && "border border-border"
-          ),
-          onClick: () => onSelect?.(day),
-          children: format(day, "d")
-        },
-        day.toISOString()
-      );
-    }) })
-  ] });
-}
-var PopoverContext = React5.createContext(null);
-function usePopoverContext() {
-  const context = React5.useContext(PopoverContext);
-  if (!context) {
-    throw new Error("Popover components must be used within Popover.");
-  }
-  return context;
-}
-function Popover({
-  children,
-  open: controlledOpen,
-  onOpenChange
-}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React5.useState(false);
-  const triggerRef = React5.useRef(null);
-  const contentRef = React5.useRef(null);
-  const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = React5.useCallback(
-    (value) => {
-      const nextValue = typeof value === "function" ? value(open) : value;
-      if (controlledOpen === void 0) {
-        setUncontrolledOpen(nextValue);
-      }
-      onOpenChange?.(nextValue);
-    },
-    [controlledOpen, onOpenChange, open]
-  );
-  React5.useEffect(() => {
-    if (!open) {
-      return void 0;
-    }
-    const handlePointerDown = (event) => {
-      const target = event.target;
-      if (triggerRef.current?.contains(target) || contentRef.current?.contains(target)) {
-        return;
-      }
-      setOpen(false);
-    };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handlePointerDown);
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", handlePointerDown);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [open, setOpen]);
-  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, contentRef }, children: /* @__PURE__ */ jsx("div", { className: "relative inline-flex", children }) });
-}
-function PopoverTrigger({
-  children,
-  asChild = false
-}) {
-  const { open, setOpen, triggerRef } = usePopoverContext();
-  if (asChild && React5.isValidElement(children)) {
-    const child = children;
-    return React5.cloneElement(child, {
-      ref: triggerRef,
-      "aria-expanded": open,
-      onClick: (event) => {
-        child.props.onClick?.(event);
-        setOpen((current) => !current);
-      }
-    });
-  }
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref: triggerRef,
-      type: "button",
-      "aria-expanded": open,
-      onClick: () => setOpen((current) => !current),
-      children
-    }
-  );
-}
-function PopoverContent({
-  children,
-  className,
-  align = "start"
-}) {
-  const { open, contentRef } = usePopoverContext();
-  if (!open) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
+  const invalidStateClassName = isDropInvalid ? "border-red-500 bg-red-100/80 text-red-950 ring-1 ring-red-500/60 dark:bg-red-950/40 dark:text-red-100" : "";
+  const visualStateClassName = appointment.visualState === "ghost" ? "cursor-grab border-dashed opacity-35" : appointment.visualState === "dragging" ? "cursor-grabbing opacity-55 shadow-xl ring-1 ring-border/70" : "cursor-grab";
+  const className = `relative h-full overflow-hidden rounded-md border border-border p-2 pb-5 text-foreground ${backgroundClassName} ${invalidStateClassName} ${visualStateClassName}`;
+  return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: contentRef,
-      className: cn(
-        "absolute top-full z-50 mt-2 min-w-72 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md outline-none",
-        align === "start" && "left-0",
-        align === "center" && "left-1/2 -translate-x-1/2",
-        align === "end" && "right-0",
-        className
-      ),
-      children
+      onPointerDown,
+      className,
+      children: [
+        isDropInvalid ? /* @__PURE__ */ jsx("div", { className: "absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-600 text-[10px] font-bold text-white", children: "X" }) : null,
+        /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold", children: appointment.title }),
+        description ? /* @__PURE__ */ jsx("div", { className: "mt-1 text-[10px] font-medium text-muted-foreground", children: description }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "button",
+            "aria-label": "Resize appointment",
+            onPointerDown: (event) => {
+              if (appointment.visualState === "ghost") {
+                return;
+              }
+              event.stopPropagation();
+              onResizePointerDown(event);
+            },
+            className: "absolute inset-x-1 bottom-1 h-2 cursor-ns-resize rounded-full bg-border/90 transition-colors hover:bg-border"
+          }
+        )
+      ]
     }
   );
 }
-function defaultRenderDatePicker({ selectedDate, onSelectedDateChange }) {
-  return /* @__PURE__ */ jsxs(Popover, { children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "min-w-40 justify-start text-left font-normal", children: format(selectedDate, "PPP") }) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-2", align: "center", children: /* @__PURE__ */ jsx(Calendar, { selected: selectedDate, onSelect: onSelectedDateChange }) })
-  ] });
-}
-function defaultRenderResourceHeader({ resource }) {
-  return /* @__PURE__ */ jsx("strong", { children: resource.label });
-}
-function defaultRenderToolbar({
-  goToPreviousDay,
-  goToNextDay,
-  defaultDatePicker,
-  prevButtonLabel = "Prev",
-  nextButtonLabel = "Next"
-}) {
-  return /* @__PURE__ */ jsx("div", { className: "rfs-toolbar", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-card p-1 shadow-xs", children: [
-    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToPreviousDay, children: prevButtonLabel }),
-    defaultDatePicker,
-    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: goToNextDay, children: nextButtonLabel })
-  ] }) });
-}
 
 // src/components/constants.ts
 var STEP_MIN = 15;
@@ -390,17 +204,22 @@ function normalizeAppointments({
       end,
       startMin: clamp(minutesFromDayStart(dayStartAbs, start), 0, dayMinutes),
       endMin: clamp(minutesFromDayStart(dayStartAbs, end), 0, dayMinutes),
-      title: adapter.getTitle(appointment)
+      title: adapter.getTitle(appointment),
+      renderKey: String(adapter.getId(appointment)),
+      visualState: "normal"
     };
   }).filter((appointment) => dayISO(appointment.start) === selectedISO);
 }
 function buildAppointmentMap(appointments) {
   return new Map(appointments.map((appointment) => [appointment.id, appointment]));
 }
-function applyDragToAppointments(appointments, drag, selectedDate, dayStartAbs) {
+function buildPresentationAppointments(appointments, drag, selectedDate, dayStartAbs) {
   if (drag.kind === "none") {
     return appointments;
   }
+  if (drag.kind === "move") {
+    return appointments;
+  }
   return appointments.map((appointment) => {
     if (appointment.id !== drag.appointmentId) {
       return appointment;
@@ -411,7 +230,8 @@ function applyDragToAppointments(appointments, drag, selectedDate, dayStartAbs)
       startMin: drag.startMin,
       endMin: drag.endMin,
       start: dateAtMinute(selectedDate, dayStartAbs, drag.startMin),
-      end: dateAtMinute(selectedDate, dayStartAbs, drag.endMin)
+      end: dateAtMinute(selectedDate, dayStartAbs, drag.endMin),
+      visualState: "dragging"
     };
   });
 }
@@ -424,10 +244,22 @@ function buildLaidOutByResource(resources, appointments) {
   }
   const result = /* @__PURE__ */ new Map();
   for (const resource of resources) {
-    result.set(resource.id, layoutOverlaps(appointmentsByResource.get(resource.id) ?? []));
+    result.set(resource.id, buildLaidOutAppointments(appointmentsByResource.get(resource.id) ?? []));
   }
   return result;
 }
+function buildLaidOutAppointments(appointments) {
+  return layoutOverlaps(
+    appointments.map((appointment) => ({
+      ...appointment,
+      appointmentId: appointment.id,
+      id: appointment.renderKey
+    }))
+  ).map(({ appointmentId, ...appointment }) => ({
+    ...appointment,
+    id: appointmentId
+  }));
+}
 function buildAppointmentAppearanceByResource(resources, resourceAppointmentClassMap, getResourceAppointmentAppearance, appointmentColorTokenClassByResource, appointmentBgByResource) {
   const map = /* @__PURE__ */ new Map();
   for (const resource of resources) {
@@ -451,8 +283,6 @@ function buildAppointmentAppearanceByResource(resources, resourceAppointmentClas
   }
   return map;
 }
-
-// src/hooks/useSchedulerBaseData.ts
 function useSchedulerBaseData({
   adapter,
   appointments,
@@ -461,13 +291,22 @@ function useSchedulerBaseData({
   resources,
   selectedDate
 }) {
-  const dayStartAbs = React5.useMemo(() => parseHHMM(dayStart), [dayStart]);
-  const dayEndAbs = React5.useMemo(() => parseHHMM(dayEnd), [dayEnd]);
-  const dayMinutes = React5.useMemo(() => Math.max(0, dayEndAbs - dayStartAbs), [dayEndAbs, dayStartAbs]);
-  const gridHeight = React5.useMemo(() => TOP_PAD + dayMinutes * PX_PER_MIN + BOTTOM_PAD, [dayMinutes]);
-  const gridMinWidth = React5.useMemo(() => GUTTER_W + Math.max(resources.length, 1) * RESOURCE_MIN_W, [resources.length]);
-  const selectedISO = React5.useMemo(() => dayISO(selectedDate), [selectedDate]);
-  const renderAppts = React5.useMemo(() => {
+  const dayStartAbs = React2.useMemo(() => parseHHMM(dayStart), [dayStart]);
+  const dayEndAbs = React2.useMemo(() => parseHHMM(dayEnd), [dayEnd]);
+  const dayMinutes = React2.useMemo(
+    () => Math.max(0, dayEndAbs - dayStartAbs),
+    [dayEndAbs, dayStartAbs]
+  );
+  const gridHeight = React2.useMemo(
+    () => TOP_PAD + dayMinutes * PX_PER_MIN + BOTTOM_PAD,
+    [dayMinutes]
+  );
+  const gridMinWidth = React2.useMemo(
+    () => GUTTER_W + Math.max(resources.length, 1) * RESOURCE_MIN_W,
+    [resources.length]
+  );
+  const selectedISO = React2.useMemo(() => dayISO(selectedDate), [selectedDate]);
+  const renderAppts = React2.useMemo(() => {
     return normalizeAppointments({
       adapter,
       appointments,
@@ -476,7 +315,7 @@ function useSchedulerBaseData({
       selectedISO
     });
   }, [adapter, appointments, dayMinutes, dayStartAbs, selectedISO]);
-  const appointmentMap = React5.useMemo(() => buildAppointmentMap(renderAppts), [renderAppts]);
+  const appointmentMap = React2.useMemo(() => buildAppointmentMap(renderAppts), [renderAppts]);
   return {
     appointmentMap,
     dayEndAbs,
@@ -487,7 +326,157 @@ function useSchedulerBaseData({
     renderAppts
   };
 }
-function useSchedulerInteractions({
+
+// src/hooks/useSchedulerInteractions.helpers.ts
+var DRAG_START_THRESHOLD_PX = 4;
+var updateMovePreviewPosition = (setMovePreview, pointer) => {
+  setMovePreview(
+    (current) => current ? {
+      ...current,
+      clientX: pointer.clientX,
+      clientY: pointer.clientY
+    } : current
+  );
+};
+var startPendingDragIfThresholdPassed = (args) => {
+  const { dragRef, pendingDragRef, pointer, setDrag, setMovePreview, suppressClickRef } = args;
+  const pending = pendingDragRef.current;
+  if (!pending || pending.drag.pointerId !== pointer.pointerId) {
+    return;
+  }
+  const deltaX = pointer.clientX - pending.startClientX;
+  const deltaY = pointer.clientY - pending.startClientY;
+  if (Math.hypot(deltaX, deltaY) < DRAG_START_THRESHOLD_PX) {
+    return;
+  }
+  suppressClickRef.current = true;
+  dragRef.current = pending.drag;
+  setDrag(pending.drag);
+  if (pending.drag.kind === "move") {
+    setMovePreview({
+      appointment: pending.appointment,
+      clientX: pointer.clientX,
+      clientY: pointer.clientY,
+      width: pending.width,
+      height: pending.height,
+      offsetX: pending.offsetX,
+      offsetY: pending.offsetY
+    });
+  }
+  pendingDragRef.current = null;
+};
+var buildNextMoveDrag = (drag, pointer, dayMinutes, pointerToResourceId, pointerToMin) => {
+  const nextResourceId = pointerToResourceId(pointer.clientX, drag.resourceId);
+  const pointerMin = pointerToMin(nextResourceId, pointer.clientY);
+  const rawStart = pointerMin - drag.offsetMin;
+  const nextStartMin = clamp(snap(rawStart), 0, dayMinutes - drag.durationMin);
+  const nextEndMin = nextStartMin + drag.durationMin;
+  if (nextStartMin === drag.startMin && nextEndMin === drag.endMin && nextResourceId === drag.resourceId) {
+    return null;
+  }
+  return {
+    ...drag,
+    resourceId: nextResourceId,
+    startMin: nextStartMin,
+    endMin: nextEndMin
+  };
+};
+var buildNextResizeDrag = (drag, pointer, dayMinutes, pointerToMin) => {
+  const pointerMin = pointerToMin(drag.resourceId, pointer.clientY);
+  const nextEndMin = clamp(snap(pointerMin), drag.startMin + MIN_EVENT_MIN, dayMinutes);
+  if (nextEndMin === drag.endMin) {
+    return null;
+  }
+  return {
+    ...drag,
+    endMin: nextEndMin
+  };
+};
+var processPointerFrame = (args) => {
+  const {
+    dayMinutes,
+    dragRef,
+    latestPointerRef,
+    pendingDragRef,
+    pointerToMin,
+    pointerToResourceId,
+    setDrag,
+    setMovePreview,
+    suppressClickRef
+  } = args;
+  const pointer = latestPointerRef.current;
+  if (!pointer) {
+    return;
+  }
+  const currentDrag = dragRef.current;
+  if (currentDrag.kind === "none" && pendingDragRef.current) {
+    startPendingDragIfThresholdPassed({
+      pointer,
+      pendingDragRef,
+      setDrag,
+      setMovePreview,
+      dragRef,
+      suppressClickRef
+    });
+    return;
+  }
+  if (currentDrag.kind === "none") {
+    return;
+  }
+  if (currentDrag.kind === "move") {
+    updateMovePreviewPosition(setMovePreview, pointer);
+    const nextDrag2 = buildNextMoveDrag(
+      currentDrag,
+      pointer,
+      dayMinutes,
+      pointerToResourceId,
+      pointerToMin
+    );
+    if (nextDrag2) {
+      suppressClickRef.current = true;
+      dragRef.current = nextDrag2;
+      setDrag(nextDrag2);
+    }
+    return;
+  }
+  const nextDrag = buildNextResizeDrag(currentDrag, pointer, dayMinutes, pointerToMin);
+  if (nextDrag) {
+    suppressClickRef.current = true;
+    dragRef.current = nextDrag;
+    setDrag(nextDrag);
+  }
+};
+var finishDrag = (args) => {
+  const {
+    dragRef,
+    frameRef,
+    latestPointerRef,
+    pendingDragRef,
+    persistDrag,
+    setDrag,
+    setMovePreview,
+    suppressClickRef
+  } = args;
+  if (frameRef.current !== null) {
+    window.cancelAnimationFrame(frameRef.current);
+    frameRef.current = null;
+  }
+  latestPointerRef.current = null;
+  pendingDragRef.current = null;
+  setMovePreview(null);
+  const current = dragRef.current;
+  if (current.kind === "none") {
+    return;
+  }
+  setDrag({ kind: "none" });
+  dragRef.current = { kind: "none" };
+  if (suppressClickRef.current) {
+    void persistDrag(current);
+  }
+};
+
+// src/hooks/useSchedulerInteractions.ts
+var useSchedulerInteractions = ({
   appointmentMap,
   dayMinutes,
   dayStartAbs,
@@ -496,11 +485,28 @@ function useSchedulerInteractions({
   renderAppts,
   resources,
   selectedDate
-}) {
-  const [drag, setDrag] = React5.useState({ kind: "none" });
-  const colRefs = React5.useRef({});
-  const suppressClickRef = React5.useRef(false);
-  const pointerToMin = React5.useCallback(
+}) => {
+  const [drag, setDrag] = React2.useState({ kind: "none" });
+  const [movePreview, setMovePreview] = React2.useState(
+    null
+  );
+  const colRefs = React2.useRef({});
+  const suppressClickRef = React2.useRef(false);
+  const dragRef = React2.useRef({ kind: "none" });
+  const pendingDragRef = React2.useRef(null);
+  const latestPointerRef = React2.useRef(null);
+  const frameRef = React2.useRef(null);
+  React2.useEffect(() => {
+    dragRef.current = drag;
+  }, [drag]);
+  React2.useEffect(() => {
+    return () => {
+      if (frameRef.current !== null) {
+        window.cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, []);
+  const pointerToMin = React2.useCallback(
     (resourceId, clientY) => {
       const col = colRefs.current[String(resourceId)];
       if (!col) {
@@ -511,7 +517,7 @@ function useSchedulerInteractions({
     },
     [dayMinutes]
   );
-  const pointerToResourceId = React5.useCallback(
+  const pointerToResourceId = React2.useCallback(
     (clientX, fallbackResourceId) => {
       for (const resource of resources) {
         const col = colRefs.current[String(resource.id)];
@@ -527,14 +533,24 @@ function useSchedulerInteractions({
     },
     [resources]
   );
-  const hasOverlap = React5.useCallback(
+  const hasOverlap = React2.useCallback(
     (appointmentId, resourceId, startMin, endMin) => {
-      const events = renderAppts.filter((appointment) => appointment.resourceId === resourceId && appointment.id !== appointmentId);
-      return events.some((appointment) => overlaps(appointment, { startMin, endMin }));
+      const events = renderAppts.filter(
+        (appointment) => appointment.resourceId === resourceId && appointment.id !== appointmentId
+      );
+      return events.some(
+        (appointment) => overlaps(appointment, { startMin, endMin })
+      );
     },
     [renderAppts]
   );
-  const persistDrag = React5.useCallback(
+  const isDropInvalid = React2.useMemo(() => {
+    if (drag.kind === "none") {
+      return false;
+    }
+    return hasOverlap(drag.appointmentId, drag.resourceId, drag.startMin, drag.endMin);
+  }, [drag, hasOverlap]);
+  const persistDrag = React2.useCallback(
     async (state) => {
       const target = appointmentMap.get(state.appointmentId);
       if (!target) {
@@ -570,98 +586,124 @@ function useSchedulerInteractions({
         });
       }
     },
-    [appointmentMap, dayStartAbs, hasOverlap, onAppointmentChange, onPersistMoveResize, selectedDate]
+    [
+      appointmentMap,
+      dayStartAbs,
+      hasOverlap,
+      onAppointmentChange,
+      onPersistMoveResize,
+      selectedDate
+    ]
   );
-  const onApptPointerDown = React5.useCallback(
+  const onApptPointerDown = React2.useCallback(
     (event, appointment) => {
       if (event.button !== 0) {
         return;
       }
       event.stopPropagation();
       suppressClickRef.current = false;
+      const rect = event.currentTarget.getBoundingClientRect();
       const pointerMin = pointerToMin(appointment.resourceId, event.clientY);
-      setDrag({
-        kind: "move",
-        appointmentId: appointment.id,
-        pointerId: event.pointerId,
-        resourceId: appointment.resourceId,
-        durationMin: Math.max(MIN_EVENT_MIN, appointment.endMin - appointment.startMin),
-        offsetMin: pointerMin - appointment.startMin,
-        startMin: appointment.startMin,
-        endMin: appointment.endMin
-      });
+      pendingDragRef.current = {
+        drag: {
+          kind: "move",
+          appointmentId: appointment.id,
+          pointerId: event.pointerId,
+          resourceId: appointment.resourceId,
+          durationMin: Math.max(MIN_EVENT_MIN, appointment.endMin - appointment.startMin),
+          offsetMin: pointerMin - appointment.startMin,
+          startMin: appointment.startMin,
+          endMin: appointment.endMin
+        },
+        appointment,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+        width: rect.width,
+        height: rect.height,
+        offsetX: event.clientX - rect.left,
+        offsetY: event.clientY - rect.top
+      };
     },
     [pointerToMin]
   );
-  const onResizePointerDown = React5.useCallback((event, appointment) => {
-    if (event.button !== 0) {
-      return;
-    }
-    event.stopPropagation();
-    suppressClickRef.current = false;
-    setDrag({
-      kind: "resize",
-      appointmentId: appointment.id,
-      pointerId: event.pointerId,
-      resourceId: appointment.resourceId,
-      startMin: appointment.startMin,
-      endMin: appointment.endMin
-    });
-  }, []);
-  const onGlobalPointerMove = React5.useCallback(
-    (event) => {
-      if (drag.kind === "none") {
+  const onResizePointerDown = React2.useCallback(
+    (event, appointment) => {
+      if (event.button !== 0) {
         return;
       }
-      if (drag.kind === "move") {
-        const nextResourceId = pointerToResourceId(event.clientX, drag.resourceId);
-        const pointerMin2 = pointerToMin(nextResourceId, event.clientY);
-        const rawStart = pointerMin2 - drag.offsetMin;
-        const nextStartMin = clamp(snap(rawStart), 0, dayMinutes - drag.durationMin);
-        const nextEndMin2 = nextStartMin + drag.durationMin;
-        if (nextStartMin !== drag.startMin || nextEndMin2 !== drag.endMin || nextResourceId !== drag.resourceId) {
-          suppressClickRef.current = true;
-          setDrag({
-            ...drag,
-            resourceId: nextResourceId,
-            startMin: nextStartMin,
-            endMin: nextEndMin2
-          });
-        }
+      event.stopPropagation();
+      suppressClickRef.current = false;
+      pendingDragRef.current = {
+        drag: {
+          kind: "resize",
+          appointmentId: appointment.id,
+          pointerId: event.pointerId,
+          resourceId: appointment.resourceId,
+          startMin: appointment.startMin,
+          endMin: appointment.endMin
+        },
+        appointment,
+        startClientX: event.clientX,
+        startClientY: event.clientY,
+        width: 0,
+        height: 0,
+        offsetX: 0,
+        offsetY: 0
+      };
+    },
+    []
+  );
+  const onGlobalPointerMove = React2.useCallback(
+    (event) => {
+      latestPointerRef.current = {
+        clientX: event.clientX,
+        clientY: event.clientY,
+        pointerId: event.pointerId
+      };
+      if (frameRef.current !== null) {
         return;
       }
-      const pointerMin = pointerToMin(drag.resourceId, event.clientY);
-      const nextEndMin = clamp(snap(pointerMin), drag.startMin + MIN_EVENT_MIN, dayMinutes);
-      if (nextEndMin !== drag.endMin) {
-        suppressClickRef.current = true;
-        setDrag({
-          ...drag,
-          endMin: nextEndMin
+      frameRef.current = window.requestAnimationFrame(() => {
+        frameRef.current = null;
+        processPointerFrame({
+          dayMinutes,
+          dragRef,
+          latestPointerRef,
+          pendingDragRef,
+          pointerToMin,
+          pointerToResourceId,
+          setDrag,
+          setMovePreview,
+          suppressClickRef
         });
-      }
+      });
     },
-    [dayMinutes, drag, pointerToMin, pointerToResourceId]
+    [dayMinutes, pointerToMin, pointerToResourceId]
   );
-  const onGlobalPointerUp = React5.useCallback(() => {
-    if (drag.kind === "none") {
-      return;
-    }
-    const current = drag;
-    setDrag({ kind: "none" });
-    if (suppressClickRef.current) {
-      void persistDrag(current);
-    }
-  }, [drag, persistDrag]);
+  const onGlobalPointerUp = React2.useCallback(() => {
+    finishDrag({
+      dragRef,
+      frameRef,
+      latestPointerRef,
+      pendingDragRef,
+      persistDrag,
+      setDrag,
+      setMovePreview,
+      suppressClickRef
+    });
+  }, [persistDrag]);
   return {
     colRefs,
     drag,
+    isDropInvalid,
+    movePreview,
     onApptPointerDown,
     onGlobalPointerMove,
     onGlobalPointerUp,
     onResizePointerDown,
     suppressClickRef
   };
-}
+};
 function useSchedulerPresentationData({
   appointmentColorTokenClassMap,
   dayStartAbs,
@@ -674,13 +716,24 @@ function useSchedulerPresentationData({
   resources,
   selectedDate
 }) {
-  const effectiveAppts = React5.useMemo(() => {
-    return applyDragToAppointments(renderAppts, drag, selectedDate, dayStartAbs);
+  const effectiveAppts = React2.useMemo(() => {
+    return buildPresentationAppointments(renderAppts, drag, selectedDate, dayStartAbs);
   }, [dayStartAbs, drag, renderAppts, selectedDate]);
-  const laidOutByResource = React5.useMemo(() => {
-    return buildLaidOutByResource(resources, effectiveAppts);
-  }, [effectiveAppts, resources]);
-  const appointmentBgByResource = React5.useMemo(() => {
+  const baseLaidOutByResource = React2.useMemo(() => {
+    return buildLaidOutByResource(resources, renderAppts);
+  }, [renderAppts, resources]);
+  const laidOutByResource = React2.useMemo(() => {
+    if (drag.kind !== "resize") {
+      return baseLaidOutByResource;
+    }
+    const next = new Map(baseLaidOutByResource);
+    const nextAppointmentsForResource = effectiveAppts.filter(
+      (appointment) => appointment.resourceId === drag.resourceId
+    );
+    next.set(drag.resourceId, buildLaidOutAppointments(nextAppointmentsForResource));
+    return next;
+  }, [baseLaidOutByResource, drag, effectiveAppts]);
+  const appointmentBgByResource = React2.useMemo(() => {
     if (!getResourceAppointmentBackground) {
       return /* @__PURE__ */ new Map();
     }
@@ -691,7 +744,7 @@ function useSchedulerPresentationData({
       toKey: (resource) => resource.id
     });
   }, [getResourceAppointmentBackground, resources]);
-  const appointmentColorTokenClassByResource = React5.useMemo(() => {
+  const appointmentColorTokenClassByResource = React2.useMemo(() => {
     if (!getResourceAppointmentColorToken) {
       return /* @__PURE__ */ new Map();
     }
@@ -709,7 +762,7 @@ function useSchedulerPresentationData({
       toKey: (resource) => resource.id
     });
   }, [appointmentColorTokenClassMap, getResourceAppointmentColorToken, resources]);
-  const appointmentAppearanceByResource = React5.useMemo(() => {
+  const appointmentAppearanceByResource = React2.useMemo(() => {
     return buildAppointmentAppearanceByResource(
       resources,
       resourceAppointmentClassMap,
@@ -731,6 +784,453 @@ function useSchedulerPresentationData({
     laidOutByResource
   };
 }
+function Gutter({ dayMinutes, dayStartAbs, gridHeight }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rfs-times border-border bg-card",
+      style: { width: GUTTER_W, height: gridHeight },
+      children: Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "rfs-time-tick text-muted-foreground",
+          style: { top: TOP_PAD + i * 60 * PX_PER_MIN },
+          children: [
+            String(Math.floor((dayStartAbs + i * 60) / 60)).padStart(2, "0"),
+            ":",
+            String((dayStartAbs + i * 60) % 60).padStart(2, "0")
+          ]
+        },
+        `tick-${i}`
+      ))
+    }
+  );
+}
+function defaultRenderResourceHeader({ resource }) {
+  return /* @__PURE__ */ jsx("strong", { children: resource.label });
+}
+function Header({ resources, renderResourceHeader }) {
+  return /* @__PURE__ */ jsxs("div", { className: "rfs-header border-border bg-card", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "rfs-gutter border-border",
+        style: { width: GUTTER_W }
+      }
+    ),
+    resources.map((resource) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "rfs-resource-header border-border bg-card text-foreground",
+        style: { minWidth: RESOURCE_MIN_W, flex: 1 },
+        children: [
+          (renderResourceHeader ?? ((r) => defaultRenderResourceHeader({ resource: r })))(
+            resource
+          ),
+          isNameLike(resource) ? /* @__PURE__ */ jsx("div", { className: "rfs-resource-subtitle text-muted-foreground", children: fullName(resource) }) : null
+        ]
+      },
+      String(resource.id)
+    ))
+  ] });
+}
+var ResourceColInner = ({
+  resource,
+  colRefs,
+  gridHeight,
+  dayMinutes,
+  appointments,
+  appointmentAppearance,
+  appointmentBg,
+  isDropInvalid,
+  renderAppointment,
+  onApptPointerDown,
+  onResizePointerDown,
+  drag,
+  suppressClickRef
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rfs-col border-border bg-card",
+      style: { minWidth: RESOURCE_MIN_W, flex: 1 },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (el) => {
+            colRefs.current[String(resource.id)] = el;
+          },
+          className: "rfs-col-inner bg-card",
+          style: { height: gridHeight },
+          children: [
+            Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rfs-hour-line border-border/70",
+                style: { top: TOP_PAD + i * 60 * PX_PER_MIN }
+              },
+              `major-${i}`
+            )),
+            Array.from({ length: Math.floor(dayMinutes / STEP_MIN) + 1 }).map((_, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rfs-slot-line border-border/50",
+                style: { top: TOP_PAD + i * STEP_MIN * PX_PER_MIN }
+              },
+              `minor-${i}`
+            )),
+            appointments.map((appointment) => {
+              const laneWidthPct = 100 / appointment.lanes;
+              const top = TOP_PAD + appointment.startMin * PX_PER_MIN;
+              const height = Math.max(
+                MIN_EVENT_MIN * PX_PER_MIN,
+                (appointment.endMin - appointment.startMin) * PX_PER_MIN
+              );
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `rfs-card-slot ${appointment.visualState === "ghost" ? "rfs-card-slot--ghost" : ""} ${appointment.visualState === "dragging" ? "rfs-card-slot--dragging" : ""}`,
+                  style: {
+                    top,
+                    left: `${laneWidthPct * appointment.lane}%`,
+                    width: `${laneWidthPct}%`,
+                    height
+                  },
+                  children: (renderAppointment ?? defaultRenderAppointment)({
+                    appointment,
+                    isDropInvalid: isDropInvalid && drag.kind === "resize" && appointment.id === drag.appointmentId,
+                    onPointerDown: (event) => onApptPointerDown(event, appointment),
+                    onResizePointerDown: (event) => onResizePointerDown(event, appointment),
+                    appointmentAppearance,
+                    appointmentBackgroundColor: appointmentBg,
+                    drag,
+                    suppressClickRef
+                  })
+                },
+                appointment.renderKey
+              );
+            })
+          ]
+        }
+      )
+    }
+  );
+};
+
+// src/components/scheduler/parts/ResourceCol.tsx
+var areResourceColsEqual = (prev, next) => [
+  prev.resource === next.resource,
+  prev.colRefs === next.colRefs,
+  prev.gridHeight === next.gridHeight,
+  prev.dayMinutes === next.dayMinutes,
+  prev.appointments === next.appointments,
+  prev.appointmentAppearance === next.appointmentAppearance,
+  prev.appointmentBg === next.appointmentBg,
+  prev.isDropInvalid === next.isDropInvalid,
+  prev.renderAppointment === next.renderAppointment,
+  prev.onApptPointerDown === next.onApptPointerDown,
+  prev.onResizePointerDown === next.onResizePointerDown,
+  prev.drag === next.drag,
+  prev.suppressClickRef === next.suppressClickRef
+].every(Boolean);
+var ResourceCol = React2.memo(
+  ResourceColInner,
+  areResourceColsEqual
+);
+
+// src/lib/cn.ts
+function cn(...inputs) {
+  return inputs.filter(Boolean).join(" ");
+}
+var variantClasses = {
+  default: "bg-primary text-primary-foreground hover:bg-primary/90",
+  outline: "border border-border bg-card text-foreground hover:bg-muted",
+  ghost: "text-foreground hover:bg-muted"
+};
+var sizeClasses = {
+  default: "h-9 px-4 py-2",
+  sm: "h-8 px-3 text-xs",
+  icon: "h-8 w-8"
+};
+var Button = React2.forwardRef(function Button2({ className, variant = "default", size = "default", type = "button", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        variantClasses[variant],
+        sizeClasses[size],
+        className
+      ),
+      ...props
+    }
+  );
+});
+function Calendar({
+  selected,
+  onSelect
+}) {
+  const [month, setMonth] = React2.useState(selected ?? /* @__PURE__ */ new Date());
+  React2.useEffect(() => {
+    if (selected) {
+      setMonth(selected);
+    }
+  }, [selected]);
+  const monthStart = startOfMonth(month);
+  const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 });
+  const calendarEnd = endOfWeek(endOfMonth(month), { weekStartsOn: 1 });
+  const days = [];
+  for (let day = calendarStart; day <= calendarEnd; day = addDays(day, 1)) {
+    days.push(day);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "w-72 rounded-md bg-popover", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": "Previous month",
+          onClick: () => setMonth(addMonths(month, -1)),
+          children: "<"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: format(month, "MMMM yyyy") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          "aria-label": "Next month",
+          onClick: () => setMonth(addMonths(month, 1)),
+          children: ">"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 text-center text-xs text-muted-foreground", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((label) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "py-1",
+        children: label
+      },
+      label
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: days.map((day) => {
+      const isSelected = selected ? isSameDay(day, selected) : false;
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: isSelected ? "default" : "ghost",
+          size: "icon",
+          className: cn(
+            "text-xs",
+            !isSameMonth(day, month) && "text-muted-foreground opacity-60",
+            isToday(day) && !isSelected && "border border-border"
+          ),
+          onClick: () => onSelect?.(day),
+          children: format(day, "d")
+        },
+        day.toISOString()
+      );
+    }) })
+  ] });
+}
+var PopoverContext = React2.createContext(null);
+function usePopoverContext() {
+  const context = React2.useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within Popover.");
+  }
+  return context;
+}
+function Popover({
+  children,
+  open: controlledOpen,
+  onOpenChange
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(false);
+  const triggerRef = React2.useRef(null);
+  const contentRef = React2.useRef(null);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = React2.useCallback(
+    (value) => {
+      const nextValue = typeof value === "function" ? value(open) : value;
+      if (controlledOpen === void 0) {
+        setUncontrolledOpen(nextValue);
+      }
+      onOpenChange?.(nextValue);
+    },
+    [controlledOpen, onOpenChange, open]
+  );
+  React2.useEffect(() => {
+    if (!open) {
+      return void 0;
+    }
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (triggerRef.current?.contains(target) || contentRef.current?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, setOpen]);
+  return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: { open, setOpen, triggerRef, contentRef }, children: /* @__PURE__ */ jsx("div", { className: "relative inline-flex", children }) });
+}
+function PopoverTrigger({
+  children,
+  asChild = false
+}) {
+  const { open, setOpen, triggerRef } = usePopoverContext();
+  if (asChild && React2.isValidElement(children)) {
+    const child = children;
+    return React2.cloneElement(child, {
+      ref: triggerRef,
+      "aria-expanded": open,
+      onClick: (event) => {
+        child.props.onClick?.(event);
+        setOpen((current) => !current);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      "aria-expanded": open,
+      onClick: () => setOpen((current) => !current),
+      children
+    }
+  );
+}
+function PopoverContent({
+  children,
+  className,
+  align = "start"
+}) {
+  const { open, contentRef } = usePopoverContext();
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: cn(
+        "absolute top-full z-50 mt-2 min-w-72 rounded-md border border-border bg-popover p-2 text-popover-foreground shadow-md outline-none",
+        align === "start" && "left-0",
+        align === "center" && "left-1/2 -translate-x-1/2",
+        align === "end" && "right-0",
+        className
+      ),
+      children
+    }
+  );
+}
+function defaultRenderDatePicker({
+  selectedDate,
+  onSelectedDateChange
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        className: "min-w-40 justify-start text-left font-normal",
+        children: format(selectedDate, "PPP")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "w-auto p-2",
+        align: "center",
+        children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            selected: selectedDate,
+            onSelect: onSelectedDateChange
+          }
+        )
+      }
+    )
+  ] });
+}
+function defaultRenderToolbar({
+  goToPreviousDay,
+  goToNextDay,
+  defaultDatePicker,
+  prevButtonLabel = "Prev",
+  nextButtonLabel = "Next"
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "rfs-toolbar", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-card p-1 shadow-xs", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: goToPreviousDay,
+        children: prevButtonLabel
+      }
+    ),
+    defaultDatePicker,
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "sm",
+        onClick: goToNextDay,
+        children: nextButtonLabel
+      }
+    )
+  ] }) });
+}
+function Toolbar({
+  selectedDate,
+  onSelectedDateChange,
+  prevButtonLabel,
+  nextButtonLabel,
+  renderToolbar,
+  renderDatePicker
+}) {
+  const goToPreviousDay = () => onSelectedDateChange(shiftDays(selectedDate, -1));
+  const goToNextDay = () => onSelectedDateChange(shiftDays(selectedDate, 1));
+  const defaultDatePicker = (renderDatePicker ?? defaultRenderDatePicker)({
+    selectedDate,
+    onSelectedDateChange
+  });
+  if (renderToolbar) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderToolbar({
+      selectedDate,
+      onSelectedDateChange,
+      goToPreviousDay,
+      goToNextDay,
+      defaultDatePicker
+    }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: defaultRenderToolbar({
+    goToPreviousDay,
+    goToNextDay,
+    defaultDatePicker,
+    prevButtonLabel,
+    nextButtonLabel
+  }) });
+}
+var IDLE_DRAG = { kind: "none" };
 function Scheduler({
   resources,
   appointments,
@@ -753,24 +1253,12 @@ function Scheduler({
   dayStart = "09:00",
   dayEnd = "18:00"
 }) {
-  const {
-    appointmentMap,
-    dayMinutes,
-    dayStartAbs,
-    gridHeight,
-    gridMinWidth,
-    renderAppts
-  } = useSchedulerBaseData({
-    adapter,
-    appointments,
-    dayEnd,
-    dayStart,
-    resources,
-    selectedDate
-  });
+  const { appointmentMap, dayMinutes, dayStartAbs, gridHeight, gridMinWidth, renderAppts } = useSchedulerBaseData({ adapter, appointments, dayEnd, dayStart, resources, selectedDate });
   const {
     colRefs,
     drag,
+    isDropInvalid,
+    movePreview,
     onApptPointerDown,
     onGlobalPointerMove,
     onGlobalPointerUp,
@@ -786,11 +1274,7 @@ function Scheduler({
     resources,
     selectedDate
   });
-  const {
-    appointmentAppearanceByResource,
-    appointmentBgByResource,
-    laidOutByResource
-  } = useSchedulerPresentationData({
+  const { appointmentAppearanceByResource, appointmentBgByResource, laidOutByResource } = useSchedulerPresentationData({
     appointmentColorTokenClassMap,
     dayStartAbs,
     drag,
@@ -802,23 +1286,29 @@ function Scheduler({
     resources,
     selectedDate
   });
-  const defaultResourceHeaderRenderer = (resource) => defaultRenderResourceHeader({ resource });
-  const goToPreviousDay = () => onSelectedDateChange(shiftDays(selectedDate, -1));
-  const goToNextDay = () => onSelectedDateChange(shiftDays(selectedDate, 1));
-  const defaultDatePicker = (renderDatePicker ?? defaultRenderDatePicker)({ selectedDate, onSelectedDateChange });
-  const toolbar = renderToolbar ? renderToolbar({
-    selectedDate,
-    onSelectedDateChange,
-    goToPreviousDay,
-    goToNextDay,
-    defaultDatePicker
-  }) : defaultRenderToolbar({
-    goToPreviousDay,
-    goToNextDay,
-    defaultDatePicker,
-    prevButtonLabel,
-    nextButtonLabel
-  });
+  const moveOverlay = React2.useMemo(() => {
+    if (drag.kind !== "move" || !movePreview) {
+      return null;
+    }
+    return {
+      appointment: {
+        ...movePreview.appointment,
+        resourceId: drag.resourceId,
+        startMin: drag.startMin,
+        endMin: drag.endMin,
+        visualState: "ghost",
+        renderKey: `${movePreview.appointment.renderKey}-overlay`,
+        lane: 0,
+        lanes: 1
+      },
+      appearance: appointmentAppearanceByResource.get(drag.resourceId),
+      background: appointmentBgByResource.get(drag.resourceId),
+      left: movePreview.clientX - movePreview.offsetX,
+      top: movePreview.clientY - movePreview.offsetY,
+      width: movePreview.width,
+      height: movePreview.height
+    };
+  }, [appointmentAppearanceByResource, appointmentBgByResource, drag, movePreview]);
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -827,104 +1317,77 @@ function Scheduler({
       onPointerUp: onGlobalPointerUp,
       onPointerCancel: onGlobalPointerUp,
       children: [
-        toolbar,
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            selectedDate,
+            onSelectedDateChange,
+            prevButtonLabel,
+            nextButtonLabel,
+            renderToolbar,
+            renderDatePicker
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: "rfs-shell border-border bg-card", children: /* @__PURE__ */ jsxs("div", { style: { minWidth: gridMinWidth }, children: [
-          /* @__PURE__ */ jsxs("div", { className: "rfs-header border-border bg-card", children: [
-            /* @__PURE__ */ jsx("div", { className: "rfs-gutter border-border", style: { width: GUTTER_W } }),
-            resources.map((resource) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "rfs-resource-header border-border bg-card text-foreground",
-                style: { minWidth: RESOURCE_MIN_W, flex: 1 },
-                children: [
-                  (renderResourceHeader ?? defaultResourceHeaderRenderer)(resource),
-                  isNameLike(resource) ? /* @__PURE__ */ jsx("div", { className: "rfs-resource-subtitle text-muted-foreground", children: fullName(resource) }) : null
-                ]
-              },
-              String(resource.id)
-            ))
-          ] }),
+          /* @__PURE__ */ jsx(
+            Header,
+            {
+              resources,
+              renderResourceHeader
+            }
+          ),
           /* @__PURE__ */ jsxs("div", { className: "rfs-body", children: [
-            /* @__PURE__ */ jsx("div", { className: "rfs-times border-border bg-card", style: { width: GUTTER_W, height: gridHeight }, children: Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsxs(
-              "div",
+            /* @__PURE__ */ jsx(
+              Gutter,
               {
-                className: "rfs-time-tick text-muted-foreground",
-                style: { top: TOP_PAD + i * 60 * PX_PER_MIN },
-                children: [
-                  String(Math.floor((dayStartAbs + i * 60) / 60)).padStart(2, "0"),
-                  ":",
-                  String((dayStartAbs + i * 60) % 60).padStart(2, "0")
-                ]
-              },
-              `tick-${i}`
-            )) }),
+                dayMinutes,
+                dayStartAbs,
+                gridHeight
+              }
+            ),
             /* @__PURE__ */ jsx("div", { className: "rfs-grid", children: resources.map((resource) => /* @__PURE__ */ jsx(
-              "div",
+              ResourceCol,
               {
-                className: "rfs-col border-border bg-card",
-                style: { minWidth: RESOURCE_MIN_W, flex: 1 },
-                children: /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    ref: (el) => {
-                      colRefs.current[String(resource.id)] = el;
-                    },
-                    className: "rfs-col-inner bg-card",
-                    style: { height: gridHeight },
-                    children: [
-                      Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "rfs-hour-line border-border/70",
-                          style: { top: TOP_PAD + i * 60 * PX_PER_MIN }
-                        },
-                        `major-${String(resource.id)}-${i}`
-                      )),
-                      Array.from({ length: Math.floor(dayMinutes / STEP_MIN) + 1 }).map((_, i) => /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: "rfs-slot-line border-border/50",
-                          style: { top: TOP_PAD + i * STEP_MIN * PX_PER_MIN }
-                        },
-                        `minor-${String(resource.id)}-${i}`
-                      )),
-                      (laidOutByResource.get(resource.id) ?? []).map((appointment) => {
-                        const laneWidthPct = 100 / appointment.lanes;
-                        const top = TOP_PAD + appointment.startMin * PX_PER_MIN;
-                        const height = Math.max(MIN_EVENT_MIN * PX_PER_MIN, (appointment.endMin - appointment.startMin) * PX_PER_MIN);
-                        const appointmentAppearance = appointmentAppearanceByResource.get(resource.id);
-                        const appointmentBackgroundColor = appointmentBgByResource.get(resource.id);
-                        return /* @__PURE__ */ jsx(
-                          "div",
-                          {
-                            className: "rfs-card-slot",
-                            style: {
-                              top,
-                              left: `${laneWidthPct * appointment.lane}%`,
-                              width: `${laneWidthPct}%`,
-                              height
-                            },
-                            children: (renderAppointment ?? defaultRenderAppointment)({
-                              appointment,
-                              onPointerDown: (event) => onApptPointerDown(event, appointment),
-                              onResizePointerDown: (event) => onResizePointerDown(event, appointment),
-                              appointmentAppearance,
-                              appointmentBackgroundColor,
-                              drag,
-                              suppressClickRef
-                            })
-                          },
-                          String(appointment.id)
-                        );
-                      })
-                    ]
-                  }
-                )
+                resource,
+                colRefs,
+                gridHeight,
+                dayMinutes,
+                appointments: laidOutByResource.get(resource.id) ?? [],
+                appointmentAppearance: appointmentAppearanceByResource.get(resource.id),
+                appointmentBg: appointmentBgByResource.get(resource.id),
+                isDropInvalid,
+                renderAppointment,
+                onApptPointerDown,
+                onResizePointerDown,
+                drag: drag.kind === "resize" && drag.resourceId === resource.id ? drag : IDLE_DRAG,
+                suppressClickRef
               },
               String(resource.id)
             )) })
           ] })
-        ] }) })
+        ] }) }),
+        moveOverlay ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "rfs-drag-overlay",
+            style: {
+              left: moveOverlay.left,
+              top: moveOverlay.top,
+              width: moveOverlay.width,
+              height: moveOverlay.height
+            },
+            children: (renderAppointment ?? defaultRenderAppointment)({
+              appointment: moveOverlay.appointment,
+              isDropInvalid,
+              onPointerDown: () => void 0,
+              onResizePointerDown: () => void 0,
+              appointmentAppearance: moveOverlay.appearance,
+              appointmentBackgroundColor: moveOverlay.background,
+              drag,
+              suppressClickRef
+            })
+          }
+        ) : null
       ]
     }
   );