@marco.colia/react-fast-scheduler 1.0.2 → 2.1.0

package/dist/index.js

@@ -1,8 +1,37 @@
-import * as React from 'react';
-import { format } from 'date-fns';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { format } from 'date-fns';
+import * as React2 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/components/constants.ts
 var STEP_MIN = 15;
@@ -12,26 +41,75 @@ 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));
+
+// src/utils/scheduler-core.utils.ts
+function isNameLike(resource) {
+  if (!resource || typeof resource !== "object") {
+    return false;
+  }
+  const maybe = resource;
+  return typeof maybe.firstName === "string" || typeof maybe.lastName === "string";
+}
+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;
+  }
+  return new Date(year, month - 1, day);
+}
+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,225 +124,314 @@ 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 Scheduler({
+function defaultRenderDatePicker({ selectedDate, onSelectedDateChange }) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "date",
+      value: toInputDateValue(selectedDate),
+      onChange: (event) => {
+        const nextDate = fromInputDateValue(event.target.value);
+        if (nextDate) {
+          onSelectedDateChange(nextDate);
+        }
+      },
+      className: "h-7 rounded-md border border-border bg-card px-2 text-xs text-foreground",
+      "aria-label": "Select date"
+    }
+  );
+}
+function defaultRenderResourceHeader({ resource }) {
+  return /* @__PURE__ */ jsx("strong", { children: resource.label });
+}
+
+// src/utils/scheduler-data.utils.ts
+function buildResourceMap({
+  fallback,
+  getValue,
   resources,
-  appointments,
-  selectedDate,
-  onSelectedDateChange,
+  toKey
+}) {
+  const map = /* @__PURE__ */ new Map();
+  for (const resource of resources) {
+    map.set(toKey(resource), getValue(resource) ?? fallback);
+  }
+  return map;
+}
+function normalizeAppointments({
   adapter,
-  onPersistMoveResize,
-  onAppointmentChange,
-  renderResourceHeader,
-  renderAppointment,
-  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 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 byResource;
-  }, [effectiveAppts, resources]);
-  const appointmentBgByResource = React.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    if (!getResourceAppointmentBackground) {
-      return map;
+    return {
+      ...appointment,
+      resourceId: drag.resourceId,
+      startMin: drag.startMin,
+      endMin: drag.endMin,
+      start: dateAtMinute(selectedDate, dayStartAbs, drag.startMin),
+      end: dateAtMinute(selectedDate, dayStartAbs, drag.endMin)
+    };
+  });
+}
+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) {
-      map.set(resource.id, getResourceAppointmentBackground(resource));
+    const appearance = getResourceAppointmentAppearance?.(resource);
+    if (appearance) {
+      map.set(resource.id, appearance);
+      continue;
     }
-    return map;
-  }, [getResourceAppointmentBackground, resources]);
-  const pointerToMin = (resourceId, clientY) => {
-    const col = colRefs.current[String(resourceId)];
-    if (!col) {
-      return 0;
+    const tokenClass = appointmentColorTokenClassByResource.get(resource.id);
+    if (tokenClass) {
+      map.set(resource.id, { className: tokenClass });
+      continue;
     }
-    const y = clientY - col.getBoundingClientRect().top - TOP_PAD;
-    return clamp(snap(y / PX_PER_MIN), 0, dayMinutes);
+    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 = 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,
+      dayMinutes,
+      dayStartAbs,
+      selectedISO
+    });
+  }, [adapter, appointments, dayMinutes, dayStartAbs, selectedISO]);
+  const appointmentMap = React2.useMemo(() => buildAppointmentMap(renderAppts), [renderAppts]);
+  return {
+    appointmentMap,
+    dayEndAbs,
+    dayMinutes,
+    dayStartAbs,
+    gridHeight,
+    gridMinWidth,
+    renderAppts
   };
-  const pointerToResourceId = (clientX, fallbackResourceId) => {
-    for (const resource of resources) {
-      const col = colRefs.current[String(resource.id)];
+}
+function useSchedulerInteractions({
+  appointmentMap,
+  dayMinutes,
+  dayStartAbs,
+  onAppointmentChange,
+  onPersistMoveResize,
+  renderAppts,
+  resources,
+  selectedDate
+}) {
+  const [drag, setDrag] = React2.useState({ kind: "none" });
+  const colRefs = React2.useRef({});
+  const suppressClickRef = React2.useRef(false);
+  const pointerToMin = React2.useCallback(
+    (resourceId, clientY) => {
+      const col = colRefs.current[String(resourceId)];
       if (!col) {
-        continue;
+        return 0;
       }
-      const rect = col.getBoundingClientRect();
-      if (clientX >= rect.left && clientX <= rect.right) {
-        return resource.id;
+      const y = clientY - col.getBoundingClientRect().top - TOP_PAD;
+      return clamp(snap(y / PX_PER_MIN), 0, dayMinutes);
+    },
+    [dayMinutes]
+  );
+  const pointerToResourceId = React2.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;
+        }
       }
-    }
-    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
+      return fallbackResourceId;
+    },
+    [resources]
+  );
+  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 }));
+    },
+    [renderAppts]
+  );
+  const persistDrag = React2.useCallback(
+    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 = React2.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 = React2.useCallback((event, appointment) => {
     if (event.button !== 0) {
       return;
     }
@@ -278,39 +445,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 = React2.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 = React2.useCallback(() => {
     if (drag.kind === "none") {
       return;
     }
@@ -319,89 +489,281 @@ function Scheduler({
     if (suppressClickRef.current) {
       void persistDrag(current);
     }
+  }, [drag, persistDrag]);
+  return {
+    colRefs,
+    drag,
+    onApptPointerDown,
+    onGlobalPointerMove,
+    onGlobalPointerUp,
+    onResizePointerDown,
+    suppressClickRef
   };
+}
+function useSchedulerPresentationData({
+  appointmentColorTokenClassMap,
+  dayStartAbs,
+  drag,
+  getResourceAppointmentAppearance,
+  getResourceAppointmentBackground,
+  getResourceAppointmentColorToken,
+  renderAppts,
+  resourceAppointmentClassMap,
+  resources,
+  selectedDate
+}) {
+  const effectiveAppts = React2.useMemo(() => {
+    return applyDragToAppointments(renderAppts, drag, selectedDate, dayStartAbs);
+  }, [dayStartAbs, drag, renderAppts, selectedDate]);
+  const laidOutByResource = React2.useMemo(() => {
+    return buildLaidOutByResource(resources, effectiveAppts);
+  }, [effectiveAppts, resources]);
+  const appointmentBgByResource = React2.useMemo(() => {
+    if (!getResourceAppointmentBackground) {
+      return /* @__PURE__ */ new Map();
+    }
+    return buildResourceMap({
+      fallback: void 0,
+      getValue: getResourceAppointmentBackground,
+      resources,
+      toKey: (resource) => resource.id
+    });
+  }, [getResourceAppointmentBackground, resources]);
+  const appointmentColorTokenClassByResource = React2.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 = React2.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,
+  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 });
   return /* @__PURE__ */ jsxs(
     "section",
     {
-      className: `rfs-root ${drag.kind === "move" ? "rfs-root--drag-move" : ""} ${drag.kind === "resize" ? "rfs-root--drag-resize" : ""}`,
+      className: `rfs-root rounded-lg bg-background text-foreground ${drag.kind === "move" ? "rfs-root--drag-move" : ""} ${drag.kind === "resize" ? "rfs-root--drag-resize" : ""}`,
       onPointerMove: onGlobalPointerMove,
       onPointerUp: onGlobalPointerUp,
       onPointerCancel: onGlobalPointerUp,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "rfs-toolbar", children: [
-          /* @__PURE__ */ jsx("button", { className: "rfs-btn", type: "button", onClick: () => onSelectedDateChange(shiftDays(selectedDate, -1)), children: prevButtonLabel }),
-          renderDatePicker ? renderDatePicker({ selectedDate, onSelectedDateChange }) : /* @__PURE__ */ jsx("strong", { className: "rfs-date-label", children: selectedISO }),
-          /* @__PURE__ */ jsx("button", { className: "rfs-btn", type: "button", onClick: () => onSelectedDateChange(shiftDays(selectedDate, 1)), children: nextButtonLabel })
+          /* @__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
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "rfs-shell", children: /* @__PURE__ */ jsxs("div", { style: { minWidth: gridMinWidth }, children: [
-          /* @__PURE__ */ jsxs("div", { className: "rfs-header", children: [
-            /* @__PURE__ */ jsx("div", { className: "rfs-gutter", style: { width: GUTTER_W } }),
-            resources.map((resource) => /* @__PURE__ */ jsxs("div", { className: "rfs-resource-header", style: { minWidth: RESOURCE_MIN_W, flex: 1 }, children: [
-              renderResourceHeader(resource),
-              isNameLike(resource) ? /* @__PURE__ */ jsx("div", { className: "rfs-resource-subtitle", children: fullName(resource) }) : null
-            ] }, String(resource.id)))
+        /* @__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__ */ jsxs("div", { className: "rfs-body", children: [
-            /* @__PURE__ */ jsx("div", { className: "rfs-times", style: { width: GUTTER_W, height: gridHeight }, children: Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsxs("div", { className: "rfs-time-tick", 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}`)) }),
-            /* @__PURE__ */ jsx("div", { className: "rfs-grid", children: resources.map((resource) => /* @__PURE__ */ jsx("div", { className: "rfs-col", style: { minWidth: RESOURCE_MIN_W, flex: 1 }, children: /* @__PURE__ */ jsxs(
+            /* @__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",
               {
-                ref: (el) => {
-                  colRefs.current[String(resource.id)] = el;
-                },
-                className: "rfs-col-inner",
-                style: { height: gridHeight },
+                className: "rfs-time-tick text-muted-foreground",
+                style: { top: TOP_PAD + i * 60 * PX_PER_MIN },
                 children: [
-                  Array.from({ length: Math.floor(dayMinutes / 60) + 1 }).map((_, i) => /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "rfs-hour-line",
-                      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",
-                      style: { top: TOP_PAD + i * STEP_MIN * PX_PER_MIN }
+                  String(Math.floor((dayStartAbs + i * 60) / 60)).padStart(2, "0"),
+                  ":",
+                  String((dayStartAbs + i * 60) % 60).padStart(2, "0")
+                ]
+              },
+              `tick-${i}`
+            )) }),
+            /* @__PURE__ */ jsx("div", { className: "rfs-grid", children: resources.map((resource) => /* @__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;
                     },
-                    `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 appointmentBackgroundColor = appointmentBgByResource.get(resource.id);
-                    return /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: "rfs-card-slot",
-                        style: {
-                          top,
-                          left: `${laneWidthPct * appointment.lane}%`,
-                          width: `${laneWidthPct}%`,
-                          height
+                    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 }
                         },
-                        children: renderAppointment({
-                          appointment,
-                          onPointerDown: (event) => onApptPointerDown(event, appointment),
-                          onResizePointerDown: (event) => onResizePointerDown(event, appointment),
-                          appointmentBackgroundColor,
-                          drag,
-                          suppressClickRef
-                        })
-                      },
-                      String(appointment.id)
-                    );
-                  })
-                ]
-              }
-            ) }, String(resource.id))) })
+                        `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)
+                        );
+                      })
+                    ]
+                  }
+                )
+              },
+              String(resource.id)
+            )) })
           ] })
         ] }) })
       ]
@@ -409,6 +771,18 @@ function Scheduler({
   );
 }
 
-export { Scheduler };
+// src/utils/scheduler-appointment-change.utils.ts
+function applySchedulerAppointmentChange(appointments, change, options) {
+  return appointments.map((item) => {
+    if (options.getId(item) !== options.getId(change.appointment)) {
+      return item;
+    }
+    const withResource = options.setResourceId(item, change.next.resourceId);
+    const withStart = options.setStart(withResource, change.next.start);
+    return options.setEnd(withStart, change.next.end);
+  });
+}
+
+export { Scheduler, applySchedulerAppointmentChange };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map