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

package/dist/index.js

@@ -1,8 +1,237 @@
-import * as React from 'react';
-import { format } from 'date-fns';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { format, startOfMonth, startOfWeek, endOfWeek, endOfMonth, addDays, addMonths, isSameDay, isToday, isSameMonth } from 'date-fns';
+import * as React5 from 'react';
 
-// src/components/Scheduler.tsx
+// src/components/defaultRenderAppointment/index.tsx
+function defaultRenderAppointment({
+  appointment,
+  onPointerDown,
+  onResizePointerDown,
+  appointmentAppearance,
+  appointmentBackgroundColor
+}) {
+  const rawMaybe = appointment.raw;
+  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(
+    "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 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;
@@ -12,26 +241,57 @@ var GUTTER_W = 72;
 var TOP_PAD = 12;
 var BOTTOM_PAD = 24;
 var RESOURCE_MIN_W = 420;
-var clamp = (n, min, max) => {
-  return Math.max(min, Math.min(max, n));
+function isNameLike(resource) {
+  if (!resource || typeof resource !== "object") {
+    return false;
+  }
+  const maybe = resource;
+  return typeof maybe.firstName === "string" || typeof maybe.lastName === "string";
+}
+var DEFAULT_APPOINTMENT_COLOR_TOKEN_CLASS_MAP = {
+  slate: "bg-slate-100 dark:bg-slate-900/40",
+  gray: "bg-gray-100 dark:bg-gray-900/40",
+  zinc: "bg-zinc-100 dark:bg-zinc-900/40",
+  neutral: "bg-neutral-100 dark:bg-neutral-900/40",
+  stone: "bg-stone-100 dark:bg-stone-900/40",
+  red: "bg-red-100 dark:bg-red-950/40",
+  orange: "bg-orange-100 dark:bg-orange-950/40",
+  amber: "bg-amber-100 dark:bg-amber-950/40",
+  yellow: "bg-yellow-100 dark:bg-yellow-950/40",
+  lime: "bg-lime-100 dark:bg-lime-950/40",
+  green: "bg-green-100 dark:bg-green-950/40",
+  emerald: "bg-emerald-100 dark:bg-emerald-950/40",
+  teal: "bg-teal-100 dark:bg-teal-950/40",
+  cyan: "bg-cyan-100 dark:bg-cyan-950/40",
+  sky: "bg-sky-100 dark:bg-sky-950/40",
+  blue: "bg-blue-100 dark:bg-blue-950/40",
+  indigo: "bg-indigo-100 dark:bg-indigo-950/40",
+  violet: "bg-violet-100 dark:bg-violet-950/40",
+  purple: "bg-purple-100 dark:bg-purple-950/40",
+  fuchsia: "bg-fuchsia-100 dark:bg-fuchsia-950/40",
+  pink: "bg-pink-100 dark:bg-pink-950/40",
+  rose: "bg-rose-100 dark:bg-rose-950/40"
 };
-var snap = (mins, stepMin = STEP_MIN) => {
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function snap(mins, stepMin = STEP_MIN) {
   return Math.round(mins / stepMin) * stepMin;
-};
-var parseHHMM = (hhmm) => {
+}
+function parseHHMM(hhmm) {
   const [h, m] = hhmm.split(":").map(Number);
   return h * 60 + m;
-};
-var fullName = (u) => {
-  return `${u.firstName ?? ""} ${u.lastName ?? ""}`.trim();
-};
-var dayISO = (d) => {
-  return format(d, "yyyy-MM-dd");
-};
-var shiftDays = (d, delta) => {
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate() + delta);
-};
-var dateAtMinute = (selectedDate, dayStartAbs, minuteFromStart) => {
+}
+function fullName(resource) {
+  return `${resource.firstName ?? ""} ${resource.lastName ?? ""}`.trim();
+}
+function dayISO(date) {
+  return format(date, "yyyy-MM-dd");
+}
+function shiftDays(date, delta) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + delta);
+}
+function dateAtMinute(selectedDate, dayStartAbs, minuteFromStart) {
   const base = new Date(
     selectedDate.getFullYear(),
     selectedDate.getMonth(),
@@ -46,311 +306,294 @@ var dateAtMinute = (selectedDate, dayStartAbs, minuteFromStart) => {
   const mm = abs % 60;
   base.setHours(hh, mm, 0, 0);
   return base;
-};
-var minutesFromDayStart = (dayStartAbs, dt) => {
-  return dt.getHours() * 60 + dt.getMinutes() - dayStartAbs;
-};
-var overlaps = (a, b) => {
+}
+function minutesFromDayStart(dayStartAbs, date) {
+  return date.getHours() * 60 + date.getMinutes() - dayStartAbs;
+}
+function overlaps(a, b) {
   return a.startMin < b.endMin && b.startMin < a.endMin;
-};
-var layoutOverlaps = (blocks) => {
+}
+function layoutOverlaps(blocks) {
   const sorted = [...blocks].sort((a, b) => a.startMin - b.startMin || a.endMin - b.endMin);
   const groups = [];
   let active = [];
   let current = [];
-  for (const e of sorted) {
-    active = active.filter((x) => x.endMin > e.startMin);
-    const conflicts = active.some((x) => overlaps(x, e));
+  for (const block of sorted) {
+    active = active.filter((item) => item.endMin > block.startMin);
+    const conflicts = active.some((item) => overlaps(item, block));
     if (!conflicts && current.length > 0) {
       groups.push(current);
       current = [];
     }
-    current.push(e);
-    active.push(e);
+    current.push(block);
+    active.push(block);
   }
   if (current.length) {
     groups.push(current);
   }
-  const out = [];
+  const output = [];
   for (const group of groups) {
-    const g = [...group].sort((a, b) => a.startMin - b.startMin || a.endMin - b.endMin);
+    const sortedGroup = [...group].sort((a, b) => a.startMin - b.startMin || a.endMin - b.endMin);
     const laneEnd = [];
     const laneOf = /* @__PURE__ */ new Map();
-    for (const e of g) {
+    for (const block of sortedGroup) {
       let placed = false;
       for (let i = 0; i < laneEnd.length; i++) {
-        if (laneEnd[i] <= e.startMin) {
-          laneEnd[i] = e.endMin;
-          laneOf.set(e.id, i);
+        if (laneEnd[i] <= block.startMin) {
+          laneEnd[i] = block.endMin;
+          laneOf.set(block.id, i);
           placed = true;
           break;
         }
       }
       if (!placed) {
-        laneEnd.push(e.endMin);
-        laneOf.set(e.id, laneEnd.length - 1);
+        laneEnd.push(block.endMin);
+        laneOf.set(block.id, laneEnd.length - 1);
       }
     }
     const lanes = laneEnd.length;
-    for (const e of g) {
-      out.push({ ...e, lane: laneOf.get(e.id) ?? 0, lanes });
+    for (const block of sortedGroup) {
+      output.push({ ...block, lane: laneOf.get(block.id) ?? 0, lanes });
     }
   }
-  return out;
-};
-function isNameLike(resource) {
-  if (!resource || typeof resource !== "object") {
-    return false;
-  }
-  const maybe = resource;
-  return typeof maybe.firstName === "string" || typeof maybe.lastName === "string";
+  return output;
 }
-function toInputDateValue(date) {
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, "0");
-  const day = String(date.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-function fromInputDateValue(value) {
-  const [yearRaw, monthRaw, dayRaw] = value.split("-");
-  const year = Number(yearRaw);
-  const month = Number(monthRaw);
-  const day = Number(dayRaw);
-  if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
-    return null;
+
+// src/utils/scheduler-data.utils.ts
+function buildResourceMap({
+  fallback,
+  getValue,
+  resources,
+  toKey
+}) {
+  const map = /* @__PURE__ */ new Map();
+  for (const resource of resources) {
+    map.set(toKey(resource), getValue(resource) ?? fallback);
   }
-  return new Date(year, month - 1, day);
+  return map;
 }
-var DEFAULT_APPOINTMENT_COLOR_TOKEN_CLASS_MAP = {
-  slate: "bg-slate-100 dark:bg-slate-900/40",
-  gray: "bg-gray-100 dark:bg-gray-900/40",
-  zinc: "bg-zinc-100 dark:bg-zinc-900/40",
-  neutral: "bg-neutral-100 dark:bg-neutral-900/40",
-  stone: "bg-stone-100 dark:bg-stone-900/40",
-  red: "bg-red-100 dark:bg-red-950/40",
-  orange: "bg-orange-100 dark:bg-orange-950/40",
-  amber: "bg-amber-100 dark:bg-amber-950/40",
-  yellow: "bg-yellow-100 dark:bg-yellow-950/40",
-  lime: "bg-lime-100 dark:bg-lime-950/40",
-  green: "bg-green-100 dark:bg-green-950/40",
-  emerald: "bg-emerald-100 dark:bg-emerald-950/40",
-  teal: "bg-teal-100 dark:bg-teal-950/40",
-  cyan: "bg-cyan-100 dark:bg-cyan-950/40",
-  sky: "bg-sky-100 dark:bg-sky-950/40",
-  blue: "bg-blue-100 dark:bg-blue-950/40",
-  indigo: "bg-indigo-100 dark:bg-indigo-950/40",
-  violet: "bg-violet-100 dark:bg-violet-950/40",
-  purple: "bg-purple-100 dark:bg-purple-950/40",
-  fuchsia: "bg-fuchsia-100 dark:bg-fuchsia-950/40",
-  pink: "bg-pink-100 dark:bg-pink-950/40",
-  rose: "bg-rose-100 dark:bg-rose-950/40"
-};
-function Scheduler({
-  resources,
-  appointments,
-  selectedDate,
-  onSelectedDateChange,
+function normalizeAppointments({
   adapter,
-  onPersistMoveResize,
-  onAppointmentChange,
-  renderResourceHeader,
-  renderAppointment,
-  resourceAppointmentClassMap,
-  getResourceAppointmentAppearance,
-  getResourceAppointmentColorToken,
-  appointmentColorTokenClassMap,
-  getResourceAppointmentBackground,
-  renderDatePicker,
-  prevButtonLabel = "Prev",
-  nextButtonLabel = "Next",
-  dayStart = "09:00",
-  dayEnd = "18:00"
+  appointments,
+  dayMinutes,
+  dayStartAbs,
+  selectedISO
 }) {
-  const [drag, setDrag] = React.useState({ kind: "none" });
-  const colRefs = React.useRef({});
-  const suppressClickRef = React.useRef(false);
-  const dayStartAbs = parseHHMM(dayStart);
-  const dayEndAbs = parseHHMM(dayEnd);
-  const dayMinutes = Math.max(0, dayEndAbs - dayStartAbs);
-  const gridHeight = TOP_PAD + dayMinutes * PX_PER_MIN + BOTTOM_PAD;
-  const gridMinWidth = GUTTER_W + Math.max(resources.length, 1) * RESOURCE_MIN_W;
-  const selectedISO = React.useMemo(() => dayISO(selectedDate), [selectedDate]);
-  const renderAppts = React.useMemo(() => {
-    return appointments.map((appointment) => {
-      const start = new Date(adapter.getStart(appointment));
-      const end = new Date(adapter.getEnd(appointment));
-      return {
-        raw: appointment,
-        id: adapter.getId(appointment),
-        resourceId: adapter.getResourceId(appointment),
-        start,
-        end,
-        startMin: clamp(minutesFromDayStart(dayStartAbs, start), 0, dayMinutes),
-        endMin: clamp(minutesFromDayStart(dayStartAbs, end), 0, dayMinutes),
-        title: adapter.getTitle(appointment)
-      };
-    }).filter((appointment) => dayISO(appointment.start) === selectedISO);
-  }, [appointments, adapter, dayStartAbs, dayMinutes, selectedISO]);
-  const appointmentMap = React.useMemo(() => {
-    return new Map(renderAppts.map((appointment) => [appointment.id, appointment]));
-  }, [renderAppts]);
-  const effectiveAppts = React.useMemo(() => {
-    if (drag.kind === "none") {
-      return renderAppts;
-    }
-    return renderAppts.map((appointment) => {
-      if (appointment.id !== drag.appointmentId) {
-        return appointment;
-      }
-      return {
-        ...appointment,
-        resourceId: drag.resourceId,
-        startMin: drag.startMin,
-        endMin: drag.endMin,
-        start: dateAtMinute(selectedDate, dayStartAbs, drag.startMin),
-        end: dateAtMinute(selectedDate, dayStartAbs, drag.endMin)
-      };
-    });
-  }, [drag, renderAppts, selectedDate, dayStartAbs]);
-  const laidOutByResource = React.useMemo(() => {
-    const byResource = /* @__PURE__ */ new Map();
-    for (const resource of resources) {
-      const events = effectiveAppts.filter((appointment) => appointment.resourceId === resource.id);
-      byResource.set(resource.id, layoutOverlaps(events));
-    }
-    return byResource;
-  }, [effectiveAppts, resources]);
-  const appointmentBgByResource = React.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    if (!getResourceAppointmentBackground) {
-      return map;
-    }
-    for (const resource of resources) {
-      map.set(resource.id, getResourceAppointmentBackground(resource));
+  return appointments.map((appointment) => {
+    const start = new Date(adapter.getStart(appointment));
+    const end = new Date(adapter.getEnd(appointment));
+    return {
+      raw: appointment,
+      id: adapter.getId(appointment),
+      resourceId: adapter.getResourceId(appointment),
+      start,
+      end,
+      startMin: clamp(minutesFromDayStart(dayStartAbs, start), 0, dayMinutes),
+      endMin: clamp(minutesFromDayStart(dayStartAbs, end), 0, dayMinutes),
+      title: adapter.getTitle(appointment)
+    };
+  }).filter((appointment) => dayISO(appointment.start) === selectedISO);
+}
+function buildAppointmentMap(appointments) {
+  return new Map(appointments.map((appointment) => [appointment.id, appointment]));
+}
+function applyDragToAppointments(appointments, drag, selectedDate, dayStartAbs) {
+  if (drag.kind === "none") {
+    return appointments;
+  }
+  return appointments.map((appointment) => {
+    if (appointment.id !== drag.appointmentId) {
+      return appointment;
     }
-    return map;
-  }, [getResourceAppointmentBackground, resources]);
-  const appointmentColorTokenClassByResource = React.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    const mergedClassMap = {
-      ...DEFAULT_APPOINTMENT_COLOR_TOKEN_CLASS_MAP,
-      ...appointmentColorTokenClassMap ?? {}
+    return {
+      ...appointment,
+      resourceId: drag.resourceId,
+      startMin: drag.startMin,
+      endMin: drag.endMin,
+      start: dateAtMinute(selectedDate, dayStartAbs, drag.startMin),
+      end: dateAtMinute(selectedDate, dayStartAbs, drag.endMin)
     };
-    if (!getResourceAppointmentColorToken) {
-      return map;
+  });
+}
+function buildLaidOutByResource(resources, appointments) {
+  const appointmentsByResource = /* @__PURE__ */ new Map();
+  for (const appointment of appointments) {
+    const current = appointmentsByResource.get(appointment.resourceId) ?? [];
+    current.push(appointment);
+    appointmentsByResource.set(appointment.resourceId, current);
+  }
+  const result = /* @__PURE__ */ new Map();
+  for (const resource of resources) {
+    result.set(resource.id, layoutOverlaps(appointmentsByResource.get(resource.id) ?? []));
+  }
+  return result;
+}
+function buildAppointmentAppearanceByResource(resources, resourceAppointmentClassMap, getResourceAppointmentAppearance, appointmentColorTokenClassByResource, appointmentBgByResource) {
+  const map = /* @__PURE__ */ new Map();
+  for (const resource of resources) {
+    const classFromIdMap = resourceAppointmentClassMap?.[String(resource.id)];
+    if (classFromIdMap) {
+      map.set(resource.id, { className: classFromIdMap });
+      continue;
     }
-    for (const resource of resources) {
-      const token = getResourceAppointmentColorToken(resource);
-      map.set(resource.id, token ? mergedClassMap[token] : void 0);
+    const appearance = getResourceAppointmentAppearance?.(resource);
+    if (appearance) {
+      map.set(resource.id, appearance);
+      continue;
     }
-    return map;
-  }, [appointmentColorTokenClassMap, getResourceAppointmentColorToken, resources]);
-  const appointmentAppearanceByResource = React.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const resource of resources) {
-      const classFromIdMap = resourceAppointmentClassMap?.[String(resource.id)];
-      if (classFromIdMap) {
-        map.set(resource.id, { className: classFromIdMap });
-        continue;
+    const tokenClass = appointmentColorTokenClassByResource.get(resource.id);
+    if (tokenClass) {
+      map.set(resource.id, { className: tokenClass });
+      continue;
+    }
+    const legacyBackground = appointmentBgByResource.get(resource.id);
+    map.set(resource.id, legacyBackground ? { className: legacyBackground } : void 0);
+  }
+  return map;
+}
+
+// src/hooks/useSchedulerBaseData.ts
+function useSchedulerBaseData({
+  adapter,
+  appointments,
+  dayEnd = "18:00",
+  dayStart = "09:00",
+  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(() => {
+    return normalizeAppointments({
+      adapter,
+      appointments,
+      dayMinutes,
+      dayStartAbs,
+      selectedISO
+    });
+  }, [adapter, appointments, dayMinutes, dayStartAbs, selectedISO]);
+  const appointmentMap = React5.useMemo(() => buildAppointmentMap(renderAppts), [renderAppts]);
+  return {
+    appointmentMap,
+    dayEndAbs,
+    dayMinutes,
+    dayStartAbs,
+    gridHeight,
+    gridMinWidth,
+    renderAppts
+  };
+}
+function useSchedulerInteractions({
+  appointmentMap,
+  dayMinutes,
+  dayStartAbs,
+  onAppointmentChange,
+  onPersistMoveResize,
+  renderAppts,
+  resources,
+  selectedDate
+}) {
+  const [drag, setDrag] = React5.useState({ kind: "none" });
+  const colRefs = React5.useRef({});
+  const suppressClickRef = React5.useRef(false);
+  const pointerToMin = React5.useCallback(
+    (resourceId, clientY) => {
+      const col = colRefs.current[String(resourceId)];
+      if (!col) {
+        return 0;
       }
-      const appearance = getResourceAppointmentAppearance?.(resource);
-      if (appearance) {
-        map.set(resource.id, appearance);
-        continue;
+      const y = clientY - col.getBoundingClientRect().top - TOP_PAD;
+      return clamp(snap(y / PX_PER_MIN), 0, dayMinutes);
+    },
+    [dayMinutes]
+  );
+  const pointerToResourceId = React5.useCallback(
+    (clientX, fallbackResourceId) => {
+      for (const resource of resources) {
+        const col = colRefs.current[String(resource.id)];
+        if (!col) {
+          continue;
+        }
+        const rect = col.getBoundingClientRect();
+        if (clientX >= rect.left && clientX <= rect.right) {
+          return resource.id;
+        }
       }
-      const tokenClass = appointmentColorTokenClassByResource.get(resource.id);
-      if (tokenClass) {
-        map.set(resource.id, { className: tokenClass });
-        continue;
+      return fallbackResourceId;
+    },
+    [resources]
+  );
+  const hasOverlap = React5.useCallback(
+    (appointmentId, resourceId, 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(
+    async (state) => {
+      const target = appointmentMap.get(state.appointmentId);
+      if (!target) {
+        return;
       }
-      const legacyBackground = appointmentBgByResource.get(resource.id);
-      if (!legacyBackground) {
-        map.set(resource.id, void 0);
-        continue;
+      if (hasOverlap(state.appointmentId, state.resourceId, state.startMin, state.endMin)) {
+        return;
       }
-      map.set(resource.id, { className: legacyBackground });
-    }
-    return map;
-  }, [appointmentBgByResource, appointmentColorTokenClassByResource, getResourceAppointmentAppearance, resourceAppointmentClassMap, resources]);
-  const pointerToMin = (resourceId, clientY) => {
-    const col = colRefs.current[String(resourceId)];
-    if (!col) {
-      return 0;
-    }
-    const y = clientY - col.getBoundingClientRect().top - TOP_PAD;
-    return clamp(snap(y / PX_PER_MIN), 0, dayMinutes);
-  };
-  const pointerToResourceId = (clientX, fallbackResourceId) => {
-    for (const resource of resources) {
-      const col = colRefs.current[String(resource.id)];
-      if (!col) {
-        continue;
+      const next = {
+        resourceId: state.resourceId,
+        start: dateAtMinute(selectedDate, dayStartAbs, state.startMin),
+        end: dateAtMinute(selectedDate, dayStartAbs, state.endMin)
+      };
+      if (onAppointmentChange) {
+        await onAppointmentChange({
+          kind: state.kind,
+          appointment: target.raw,
+          previous: {
+            resourceId: target.resourceId,
+            start: target.start,
+            end: target.end
+          },
+          next
+        });
+        return;
       }
-      const rect = col.getBoundingClientRect();
-      if (clientX >= rect.left && clientX <= rect.right) {
-        return resource.id;
+      if (onPersistMoveResize) {
+        await onPersistMoveResize({
+          appointment: target.raw,
+          resourceId: next.resourceId,
+          start: next.start,
+          end: next.end
+        });
       }
-    }
-    return fallbackResourceId;
-  };
-  const hasOverlap = (appointmentId, resourceId, startMin, endMin) => {
-    const events = renderAppts.filter((appointment) => appointment.resourceId === resourceId && appointment.id !== appointmentId);
-    return events.some((appointment) => overlaps(appointment, { startMin, endMin }));
-  };
-  const persistDrag = async (state) => {
-    const target = appointmentMap.get(state.appointmentId);
-    if (!target) {
-      return;
-    }
-    if (hasOverlap(state.appointmentId, state.resourceId, state.startMin, state.endMin)) {
-      return;
-    }
-    const next = {
-      resourceId: state.resourceId,
-      start: dateAtMinute(selectedDate, dayStartAbs, state.startMin),
-      end: dateAtMinute(selectedDate, dayStartAbs, state.endMin)
-    };
-    if (onAppointmentChange) {
-      await onAppointmentChange({
-        kind: state.kind,
-        appointment: target.raw,
-        previous: {
-          resourceId: target.resourceId,
-          start: target.start,
-          end: target.end
-        },
-        next
-      });
-      return;
-    }
-    if (onPersistMoveResize) {
-      await onPersistMoveResize({
-        appointment: target.raw,
-        resourceId: next.resourceId,
-        start: next.start,
-        end: next.end
+    },
+    [appointmentMap, dayStartAbs, hasOverlap, onAppointmentChange, onPersistMoveResize, selectedDate]
+  );
+  const onApptPointerDown = React5.useCallback(
+    (event, appointment) => {
+      if (event.button !== 0) {
+        return;
+      }
+      event.stopPropagation();
+      suppressClickRef.current = false;
+      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
       });
-    }
-  };
-  const onApptPointerDown = (event, appointment) => {
-    if (event.button !== 0) {
-      return;
-    }
-    event.stopPropagation();
-    suppressClickRef.current = false;
-    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
-    });
-  };
-  const onResizePointerDown = (event, appointment) => {
+    },
+    [pointerToMin]
+  );
+  const onResizePointerDown = React5.useCallback((event, appointment) => {
     if (event.button !== 0) {
       return;
     }
@@ -364,39 +607,42 @@ function Scheduler({
       startMin: appointment.startMin,
       endMin: appointment.endMin
     });
-  };
-  const onGlobalPointerMove = (event) => {
-    if (drag.kind === "none") {
-      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) {
+  }, []);
+  const onGlobalPointerMove = React5.useCallback(
+    (event) => {
+      if (drag.kind === "none") {
+        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
+          });
+        }
+        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,
-          resourceId: nextResourceId,
-          startMin: nextStartMin,
-          endMin: nextEndMin2
+          endMin: nextEndMin
         });
       }
-      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
-      });
-    }
-  };
-  const onGlobalPointerUp = () => {
+    },
+    [dayMinutes, drag, pointerToMin, pointerToResourceId]
+  );
+  const onGlobalPointerUp = React5.useCallback(() => {
     if (drag.kind === "none") {
       return;
     }
@@ -405,55 +651,174 @@ function Scheduler({
     if (suppressClickRef.current) {
       void persistDrag(current);
     }
+  }, [drag, persistDrag]);
+  return {
+    colRefs,
+    drag,
+    onApptPointerDown,
+    onGlobalPointerMove,
+    onGlobalPointerUp,
+    onResizePointerDown,
+    suppressClickRef
   };
-  const defaultRenderAppointment = ({
-    appointment,
-    onPointerDown,
-    onResizePointerDown: onResizePointerDown2,
-    appointmentAppearance,
-    appointmentBackgroundColor
-  }) => {
-    const rawMaybe = appointment.raw;
-    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();
-            onResizePointerDown2(event);
-          },
-          className: "absolute inset-x-1 bottom-1 h-2 cursor-ns-resize rounded-full bg-border/90 transition-colors hover:bg-border"
-        }
-      )
-    ] });
-  };
-  const defaultRenderDatePicker = ({
-    selectedDate: value,
-    onSelectedDateChange: onDateChange
-  }) => /* @__PURE__ */ jsx(
-    "input",
-    {
-      type: "date",
-      value: toInputDateValue(value),
-      onChange: (event) => {
-        const nextDate = fromInputDateValue(event.target.value);
-        if (nextDate) {
-          onDateChange(nextDate);
-        }
-      },
-      className: "h-7 rounded-md border border-border bg-card px-2 text-xs text-foreground",
-      "aria-label": "Select date"
+}
+function useSchedulerPresentationData({
+  appointmentColorTokenClassMap,
+  dayStartAbs,
+  drag,
+  getResourceAppointmentAppearance,
+  getResourceAppointmentBackground,
+  getResourceAppointmentColorToken,
+  renderAppts,
+  resourceAppointmentClassMap,
+  resources,
+  selectedDate
+}) {
+  const effectiveAppts = React5.useMemo(() => {
+    return applyDragToAppointments(renderAppts, drag, selectedDate, dayStartAbs);
+  }, [dayStartAbs, drag, renderAppts, selectedDate]);
+  const laidOutByResource = React5.useMemo(() => {
+    return buildLaidOutByResource(resources, effectiveAppts);
+  }, [effectiveAppts, resources]);
+  const appointmentBgByResource = React5.useMemo(() => {
+    if (!getResourceAppointmentBackground) {
+      return /* @__PURE__ */ new Map();
     }
-  );
-  const defaultRenderResourceHeader = (resource) => /* @__PURE__ */ jsx("strong", { children: resource.label });
+    return buildResourceMap({
+      fallback: void 0,
+      getValue: getResourceAppointmentBackground,
+      resources,
+      toKey: (resource) => resource.id
+    });
+  }, [getResourceAppointmentBackground, resources]);
+  const appointmentColorTokenClassByResource = React5.useMemo(() => {
+    if (!getResourceAppointmentColorToken) {
+      return /* @__PURE__ */ new Map();
+    }
+    const mergedClassMap = {
+      ...DEFAULT_APPOINTMENT_COLOR_TOKEN_CLASS_MAP,
+      ...appointmentColorTokenClassMap ?? {}
+    };
+    return buildResourceMap({
+      fallback: void 0,
+      getValue: (resource) => {
+        const token = getResourceAppointmentColorToken(resource);
+        return token ? mergedClassMap[token] : void 0;
+      },
+      resources,
+      toKey: (resource) => resource.id
+    });
+  }, [appointmentColorTokenClassMap, getResourceAppointmentColorToken, resources]);
+  const appointmentAppearanceByResource = React5.useMemo(() => {
+    return buildAppointmentAppearanceByResource(
+      resources,
+      resourceAppointmentClassMap,
+      getResourceAppointmentAppearance,
+      appointmentColorTokenClassByResource,
+      appointmentBgByResource
+    );
+  }, [
+    appointmentBgByResource,
+    appointmentColorTokenClassByResource,
+    getResourceAppointmentAppearance,
+    resourceAppointmentClassMap,
+    resources
+  ]);
+  return {
+    appointmentAppearanceByResource,
+    appointmentBgByResource,
+    effectiveAppts,
+    laidOutByResource
+  };
+}
+function Scheduler({
+  resources,
+  appointments,
+  selectedDate,
+  onSelectedDateChange,
+  adapter,
+  onPersistMoveResize,
+  onAppointmentChange,
+  renderResourceHeader,
+  renderAppointment,
+  resourceAppointmentClassMap,
+  getResourceAppointmentAppearance,
+  getResourceAppointmentColorToken,
+  appointmentColorTokenClassMap,
+  getResourceAppointmentBackground,
+  renderToolbar,
+  renderDatePicker,
+  prevButtonLabel = "Prev",
+  nextButtonLabel = "Next",
+  dayStart = "09:00",
+  dayEnd = "18:00"
+}) {
+  const {
+    appointmentMap,
+    dayMinutes,
+    dayStartAbs,
+    gridHeight,
+    gridMinWidth,
+    renderAppts
+  } = useSchedulerBaseData({
+    adapter,
+    appointments,
+    dayEnd,
+    dayStart,
+    resources,
+    selectedDate
+  });
+  const {
+    colRefs,
+    drag,
+    onApptPointerDown,
+    onGlobalPointerMove,
+    onGlobalPointerUp,
+    onResizePointerDown,
+    suppressClickRef
+  } = useSchedulerInteractions({
+    appointmentMap,
+    dayMinutes,
+    dayStartAbs,
+    onAppointmentChange,
+    onPersistMoveResize,
+    renderAppts,
+    resources,
+    selectedDate
+  });
+  const {
+    appointmentAppearanceByResource,
+    appointmentBgByResource,
+    laidOutByResource
+  } = useSchedulerPresentationData({
+    appointmentColorTokenClassMap,
+    dayStartAbs,
+    drag,
+    getResourceAppointmentAppearance,
+    getResourceAppointmentBackground,
+    getResourceAppointmentColorToken,
+    renderAppts,
+    resourceAppointmentClassMap,
+    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
+  });
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -462,27 +827,7 @@ function Scheduler({
       onPointerUp: onGlobalPointerUp,
       onPointerCancel: onGlobalPointerUp,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "rfs-toolbar", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "rfs-btn border-border bg-card text-foreground hover:bg-muted",
-              type: "button",
-              onClick: () => onSelectedDateChange(shiftDays(selectedDate, -1)),
-              children: prevButtonLabel
-            }
-          ),
-          (renderDatePicker ?? defaultRenderDatePicker)({ selectedDate, onSelectedDateChange }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "rfs-btn border-border bg-card text-foreground hover:bg-muted",
-              type: "button",
-              onClick: () => onSelectedDateChange(shiftDays(selectedDate, 1)),
-              children: nextButtonLabel
-            }
-          )
-        ] }),
+        toolbar,
         /* @__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 } }),
@@ -492,7 +837,7 @@ function Scheduler({
                 className: "rfs-resource-header border-border bg-card text-foreground",
                 style: { minWidth: RESOURCE_MIN_W, flex: 1 },
                 children: [
-                  (renderResourceHeader ?? defaultRenderResourceHeader)(resource),
+                  (renderResourceHeader ?? defaultResourceHeaderRenderer)(resource),
                   isNameLike(resource) ? /* @__PURE__ */ jsx("div", { className: "rfs-resource-subtitle text-muted-foreground", children: fullName(resource) }) : null
                 ]
               },
@@ -585,7 +930,7 @@ function Scheduler({
   );
 }
 
-// src/appointment-change.ts
+// src/utils/scheduler-appointment-change.utils.ts
 function applySchedulerAppointmentChange(appointments, change, options) {
   return appointments.map((item) => {
     if (options.getId(item) !== options.getId(change.appointment)) {