@spacesync/client 0.1.7 → 0.1.10

package/dist/booking-schedule-calendars.js

@@ -1,5 +1,5 @@
-import { AnalogClockPicker } from './chunk-34332W2P.js';
-import { formatTimeForDisplay } from './chunk-H3CNZCYU.js';
+import { currentWeekStart, PRICING_TODAY, weekCountBetween, weekRangeLabel, currentMonthYm, monthCount, monthLabel, addMonthsYm, todayLocalYmd, addDays, diffDays, MIN_WEEK_START, localDateYmd } from './chunk-OTSA5ROL.js';
+import { CheckboxField, hourlyEndTimes, addMinutesToHm, formatTimeForDisplay, snapScheduleEndTime, TimeField } from './chunk-F7MU5T46.js';
 import './chunk-RV5PMZYZ.js';
 import './chunk-L65F4EMK.js';
 import './chunk-PBNBLCC2.js';
@@ -15,65 +15,6 @@ import { useState, useEffect } from 'react';
 import { Info, ChevronLeft, ChevronRight } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-// src/lib/booking-schedule.ts
-var PRICING_TODAY = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-function computeMinMonth() {
-  const d = /* @__PURE__ */ new Date();
-  if (d.getDate() === 1) {
-    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}`;
-  }
-  const n = new Date(d.getFullYear(), d.getMonth() + 1, 1);
-  return `${n.getFullYear()}-${String(n.getMonth() + 1).padStart(2, "0")}`;
-}
-function computeMinWeekStart() {
-  const d = /* @__PURE__ */ new Date();
-  const day = d.getDay();
-  if (day === 1) return d.toISOString().split("T")[0];
-  const skip = day === 0 ? 1 : 8 - day;
-  d.setDate(d.getDate() + skip);
-  return d.toISOString().split("T")[0];
-}
-var MIN_MONTH = computeMinMonth() || `${(/* @__PURE__ */ new Date()).getFullYear()}-${String((/* @__PURE__ */ new Date()).getMonth() + 2).padStart(2, "0")}`;
-var MIN_WEEK_START = computeMinWeekStart() || PRICING_TODAY;
-var IS_PARTIAL_MONTH = (/* @__PURE__ */ new Date()).getDate() !== 1;
-function monthLabel(ym) {
-  const [y, m] = ym.split("-").map(Number);
-  return new Date(y, m - 1, 1).toLocaleDateString("en-US", { month: "long", year: "numeric" });
-}
-function monthCount(from, to) {
-  if (!from || !to || !from.includes("-") || !to.includes("-")) return 0;
-  const [fy, fm] = from.split("-").map(Number);
-  const [ty, tm] = to.split("-").map(Number);
-  return (ty - fy) * 12 + (tm - fm) + 1;
-}
-function weekRangeLabel(weekFrom, weekCount) {
-  if (!weekFrom || isNaN(new Date(weekFrom).getTime())) return "\u2014";
-  const end = new Date(weekFrom);
-  end.setDate(end.getDate() + weekCount * 7 - 1);
-  const s = new Date(weekFrom).toLocaleDateString("en-US", { month: "short", day: "numeric" });
-  const e = end.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
-  return `${s} \u2013 ${e}`;
-}
-function parseDateOnly(date) {
-  const [y, m, d] = date.split("-").map(Number);
-  return new Date(y, m - 1, d);
-}
-function formatDateOnly(d) {
-  const y = d.getFullYear();
-  const m = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  return `${y}-${m}-${day}`;
-}
-function diffDays(a, b) {
-  const da = parseDateOnly(a);
-  const db = parseDateOnly(b);
-  return Math.max(0, Math.round((db.getTime() - da.getTime()) / 864e5));
-}
-function addDays(date, days) {
-  const d = parseDateOnly(date);
-  d.setDate(d.getDate() + days);
-  return formatDateOnly(d);
-}
 var MONTH_NAMES = [
   "January",
   "February",
@@ -89,7 +30,22 @@ var MONTH_NAMES = [
   "December"
 ];
 function dayStr(d) {
-  return d.toISOString().split("T")[0];
+  return localDateYmd(d);
+}
+var calendarBlockClass = "flex flex-col overflow-hidden rounded-xl border border-border/60";
+var calendarNavRowClass = "flex items-center justify-between border-b border-border/40 px-2 py-1.5";
+var calendarWeekdayRowClass = "grid grid-cols-7 border-b border-border/40";
+var calendarWeekdayCellClass = "flex h-9 items-center justify-center border-r border-border/40 text-[10px] font-medium text-muted-foreground last:border-r-0";
+function cellGridLines(index, total, cols) {
+  return cn(
+    "border-border/40",
+    index % cols !== cols - 1 && "border-r",
+    index < total - cols && "border-b"
+  );
+}
+function weekEndMonday(weekFrom, weekCount) {
+  if (!weekFrom || weekCount < 1) return weekFrom;
+  return addDays(weekFrom, (weekCount - 1) * 7);
 }
 function getCalendarGrid(year, month) {
   const firstDay = new Date(year, month, 1);
@@ -145,6 +101,8 @@ function ScheduleStepper({
 }
 function WeekCalendarPicker({
   weekFrom,
+  weekCount,
+  rangeMode,
   onChange,
   flat = false
 }) {
@@ -152,10 +110,22 @@ function WeekCalendarPicker({
   const [calYear, setCalYear] = useState(initDate.getFullYear());
   const [calMonth, setCalMonth] = useState(initDate.getMonth());
   const [hoverMon, setHoverMon] = useState(null);
+  const [phase, setPhase] = useState("from");
+  useEffect(() => {
+    setPhase("from");
+  }, [rangeMode]);
   const days = getCalendarGrid(calYear, calMonth);
-  const minDate = /* @__PURE__ */ new Date((MIN_WEEK_START || PRICING_TODAY) + "T00:00:00");
-  const selectedMonStr = weekFrom || null;
-  const hoverMonStr = hoverMon;
+  const minDate = /* @__PURE__ */ new Date((currentWeekStart() || PRICING_TODAY) + "T00:00:00");
+  const endMon = weekEndMonday(weekFrom, weekCount);
+  const [dispFrom, dispTo] = (() => {
+    if (!rangeMode || !weekFrom) return [weekFrom, endMon];
+    if (phase === "to" && hoverMon) {
+      if (hoverMon >= weekFrom) return [weekFrom, hoverMon];
+      return [hoverMon, hoverMon];
+    }
+    return [weekFrom, endMon];
+  })();
+  const previewCount = rangeMode && phase === "to" && hoverMon && hoverMon >= weekFrom ? weekCountBetween(weekFrom, hoverMon) : weekCount;
   const prevMonth = () => {
     if (calMonth === 0) {
       setCalYear((y) => y - 1);
@@ -170,6 +140,24 @@ function WeekCalendarPicker({
   };
   const weeks = [];
   for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));
+  const handleWeekClick = (monStr) => {
+    if (!rangeMode) {
+      onChange(monStr, 1);
+      return;
+    }
+    if (phase === "from") {
+      onChange(monStr, 1);
+      setPhase("to");
+      return;
+    }
+    if (monStr >= weekFrom) {
+      onChange(weekFrom, weekCountBetween(weekFrom, monStr));
+      setPhase("from");
+      return;
+    }
+    onChange(monStr, 1);
+    setPhase("to");
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -178,70 +166,113 @@ function WeekCalendarPicker({
         flat ? "gap-3" : "gap-1 rounded-2xl border border-border bg-card p-3"
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between px-1", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: prevMonth,
-              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground", children: [
-            MONTH_NAMES[calMonth],
-            " ",
-            calYear
+        rangeMode ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 px-1 text-[11px] font-medium",
+              phase === "to" ? "text-blue-600 dark:text-blue-400" : "text-muted-foreground"
+            ),
+            children: phase === "from" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50" }),
+              "Click the first week"
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-blue-500" }),
+              "Click the last week",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onChange(weekFrom, 1);
+                    setPhase("to");
+                  },
+                  className: "ml-auto text-[10px] text-blue-400 underline underline-offset-2 hover:text-blue-600 dark:text-blue-400",
+                  children: "Reset"
+                }
+              )
+            ] })
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: calendarBlockClass, children: [
+          /* @__PURE__ */ jsxs("div", { className: calendarNavRowClass, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: prevMonth,
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground", children: [
+              MONTH_NAMES[calMonth],
+              " ",
+              calYear
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: nextMonth,
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
+                children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: nextMonth,
-              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
-              children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
-            }
-          )
+          /* @__PURE__ */ jsx("div", { className: calendarWeekdayRowClass, children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => /* @__PURE__ */ jsx("span", { className: calendarWeekdayCellClass, children: d }, d)) }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border/40", children: weeks.map((week, wi) => {
+            const mondayDate = week[0];
+            const monStr = dayStr(mondayDate);
+            const isSelectable = mondayDate >= minDate;
+            const isStartWeek = Boolean(weekFrom) && monStr === dispFrom;
+            const isEndWeek = Boolean(weekFrom) && monStr === dispTo;
+            const inRange = rangeMode && Boolean(weekFrom) && monStr >= dispFrom && monStr <= dispTo;
+            const isSelected = rangeMode ? inRange : monStr === weekFrom;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "relative flex cursor-pointer transition-colors",
+                  isSelected && (isStartWeek || isEndWeek) && "bg-blue-100/80",
+                  isSelected && !isStartWeek && !isEndWeek && "bg-blue-50",
+                  isSelectable ? "hover:bg-accent/60" : "cursor-not-allowed opacity-60"
+                ),
+                onMouseEnter: () => isSelectable && setHoverMon(monStr),
+                onMouseLeave: () => setHoverMon(null),
+                onClick: () => isSelectable && handleWeekClick(monStr),
+                children: week.map((d, di) => {
+                  const isCurrentMonth = d.getMonth() === calMonth;
+                  const isMon = di === 0;
+                  const isSun = di === 6;
+                  const filled = rangeMode ? isStartWeek && isMon || isEndWeek && isSun : isSelected && isMon;
+                  return /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "relative z-10 flex h-9 flex-1 items-center justify-center border-r border-border/40 last:border-r-0",
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "flex h-7 w-7 items-center justify-center rounded-full text-[11px] transition-colors",
+                            isCurrentMonth ? "text-muted-foreground" : "text-muted-foreground/50",
+                            !isSelectable && "text-muted-foreground/40",
+                            isSelected && "font-medium text-blue-700 dark:text-blue-300",
+                            filled && "bg-blue-500 font-semibold text-white shadow-sm"
+                          ),
+                          children: d.getDate()
+                        }
+                      )
+                    },
+                    di
+                  );
+                })
+              },
+              wi
+            );
+          }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mb-0.5 grid grid-cols-7", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => /* @__PURE__ */ jsx("span", { className: "py-0.5 text-center text-[10px] font-medium text-muted-foreground", children: d }, d)) }),
-        weeks.map((week, wi) => {
-          const mondayDate = week[0];
-          const monStr = dayStr(mondayDate);
-          const isSelectable = mondayDate >= minDate;
-          const isSelected = monStr === selectedMonStr;
-          const isHovered = monStr === hoverMonStr && isSelectable && !isSelected;
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `flex cursor-pointer overflow-hidden rounded-xl transition-colors
-              ${isSelected ? "bg-blue-100" : isHovered ? "bg-blue-50" : isSelectable ? "hover:bg-accent" : "cursor-not-allowed"}`,
-              onMouseEnter: () => isSelectable && setHoverMon(monStr),
-              onMouseLeave: () => setHoverMon(null),
-              onClick: () => isSelectable && onChange(monStr),
-              children: week.map((d, di) => {
-                const isCurrentMonth = d.getMonth() === calMonth;
-                const isMon = di === 0;
-                const isSelectedMon = isSelected && isMon;
-                return /* @__PURE__ */ jsx("div", { className: "flex h-8 flex-1 items-center justify-center", children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `
-                    flex h-7 w-7 items-center justify-center rounded-full text-[11px] transition-colors
-                    ${isSelectedMon ? "bg-blue-500 font-semibold text-white" : ""}
-                    ${!isSelectedMon && isSelected ? "text-blue-700 dark:text-blue-400" : ""}
-                    ${!isSelected && isSelectable && isCurrentMonth ? "text-muted-foreground" : ""}
-                    ${!isSelectable && isCurrentMonth ? "text-muted-foreground/60" : ""}
-                    ${!isCurrentMonth ? "text-muted-foreground/60" : ""}
-                  `,
-                    children: d.getDate()
-                  }
-                ) }, di);
-              })
-            },
-            wi
-          );
-        }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1 text-center text-[10px] text-muted-foreground", children: "Click any row to select that week" })
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-center text-[10px] text-muted-foreground", children: rangeMode ? phase === "from" ? "Click a week to start the range" : previewCount > 1 ? `${previewCount} weeks \xB7 ${weekRangeLabel(dispFrom, previewCount)}` : "Click a week to finish the range" : weekFrom ? `Selected week of ${formatDateLabel(weekFrom)}` : "Click any row to select that week" })
       ]
     }
   );
@@ -250,16 +281,21 @@ function MonthRangeCalendar({
   monthFrom,
   monthTo,
   onChange,
+  rangeMode,
   flat = false
 }) {
   const initYear = monthFrom ? parseInt(monthFrom.split("-")[0], 10) : (/* @__PURE__ */ new Date()).getFullYear();
   const [calYear, setCalYear] = useState(initYear);
   const [phase, setPhase] = useState("from");
   const [hoverYm, setHoverYm] = useState(null);
+  useEffect(() => {
+    setPhase("from");
+  }, [rangeMode]);
   const ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   const toYm = (y, m) => `${y}-${String(m + 1).padStart(2, "0")}`;
-  const minYm = MIN_MONTH || `${(/* @__PURE__ */ new Date()).getFullYear()}-01`;
+  const minYm = currentMonthYm() || `${(/* @__PURE__ */ new Date()).getFullYear()}-01`;
   const [dispFrom, dispTo] = (() => {
+    if (!rangeMode) return [monthFrom, monthFrom || monthTo];
     if (phase === "to" && hoverYm) {
       if (hoverYm >= monthFrom) return [monthFrom, hoverYm];
       return [hoverYm, hoverYm];
@@ -269,6 +305,10 @@ function MonthRangeCalendar({
   const isSingle = dispFrom === dispTo;
   const handleClick = (ymStr) => {
     if (ymStr < minYm) return;
+    if (!rangeMode) {
+      onChange(ymStr, ymStr);
+      return;
+    }
     if (phase === "from") {
       onChange(ymStr, ymStr);
       setPhase("to");
@@ -277,6 +317,7 @@ function MonthRangeCalendar({
       setPhase("from");
     } else {
       onChange(ymStr, ymStr);
+      setPhase("to");
     }
   };
   const actualCount = monthCount(monthFrom, monthTo);
@@ -289,28 +330,7 @@ function MonthRangeCalendar({
         flat ? "flex flex-col gap-5" : "overflow-hidden rounded-2xl border border-border bg-card"
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", flat ? "px-1" : "px-4 pb-2 pt-4"), children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setCalYear((y) => y - 1),
-              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: calYear }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: () => setCalYear((y) => y + 1),
-              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
-              children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
+        rangeMode ? /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
@@ -322,10 +342,10 @@ function MonthRangeCalendar({
             ),
             children: phase === "from" ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50" }),
-              "Click a month to set the start"
+              "Click the first month"
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-blue-500" }),
-              "Now click to set the end month",
+              "Click the last month",
               /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -340,59 +360,76 @@ function MonthRangeCalendar({
               )
             ] })
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("grid grid-cols-4", flat ? "gap-2 py-1" : "px-2 pb-3 pt-1"),
-            style: flat ? void 0 : { gap: 0 },
-            children: ABBR.map((label, i) => {
-              const ymStr = toYm(calYear, i);
-              const disabled = ymStr < minYm;
-              const inRange = !disabled && ymStr >= dispFrom && ymStr <= dispTo;
-              const isFrom = ymStr === dispFrom;
-              const isTo = ymStr === dispTo;
-              const showStrip = inRange && !isSingle;
-              const sLeft = isFrom ? "left-1/2" : "left-0";
-              const sRight = isTo ? "right-1/2" : "right-0";
-              const filled = (isFrom || isTo) && !disabled;
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn(
-                    "relative",
-                    flat ? "h-14" : "h-12",
-                    disabled ? "cursor-not-allowed" : "cursor-pointer"
-                  ),
-                  onMouseEnter: () => !disabled && setHoverYm(ymStr),
-                  onMouseLeave: () => setHoverYm(null),
-                  onClick: () => handleClick(ymStr),
-                  children: [
-                    showStrip ? /* @__PURE__ */ jsx("div", { className: `absolute bottom-1.5 top-1.5 bg-blue-100 ${sLeft} ${sRight}` }) : null,
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: cn(
-                          "relative z-10 flex w-full items-center justify-center",
-                          flat ? "h-14" : "h-12"
-                        ),
-                        children: /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            className: `flex h-9 w-9 items-center justify-center rounded-full text-xs font-medium transition-all duration-100
-                  ${filled ? "bg-blue-500 text-white shadow-md shadow-blue-200" : inRange ? "text-blue-700 dark:text-blue-400" : !disabled ? "text-muted-foreground hover:bg-accent" : "text-muted-foreground/60"}`,
-                            children: label
-                          }
-                        )
-                      }
-                    )
-                  ]
-                },
-                i
-              );
-            })
-          }
-        ),
+        ) : null,
+        /* @__PURE__ */ jsxs("div", { className: cn(calendarBlockClass, !flat && "mx-3 mb-3"), children: [
+          /* @__PURE__ */ jsxs("div", { className: calendarNavRowClass, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setCalYear((y) => y - 1),
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-muted-foreground", children: calYear }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setCalYear((y) => y + 1),
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-muted-foreground",
+                children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4", children: ABBR.map((label, i) => {
+            const ymStr = toYm(calYear, i);
+            const disabled = ymStr < minYm;
+            const inRange = !disabled && ymStr >= dispFrom && ymStr <= dispTo;
+            const isFrom = ymStr === dispFrom;
+            const isTo = ymStr === dispTo;
+            const showStrip = rangeMode && inRange && !isSingle;
+            const sLeft = isFrom ? "left-1/2" : "left-0";
+            const sRight = isTo ? "right-1/2" : "right-0";
+            const filled = (isFrom || isTo || !rangeMode && ymStr === monthFrom) && !disabled;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "relative",
+                  cellGridLines(i, 12, 4),
+                  flat ? "h-14" : "h-12",
+                  disabled ? "cursor-not-allowed" : "cursor-pointer"
+                ),
+                onMouseEnter: () => !disabled && setHoverYm(ymStr),
+                onMouseLeave: () => setHoverYm(null),
+                onClick: () => handleClick(ymStr),
+                children: [
+                  showStrip ? /* @__PURE__ */ jsx("div", { className: `absolute bottom-1.5 top-1.5 bg-blue-100 ${sLeft} ${sRight}` }) : null,
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "relative z-10 flex w-full items-center justify-center",
+                        flat ? "h-14" : "h-12"
+                      ),
+                      children: /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: `flex h-9 w-9 items-center justify-center rounded-full text-xs font-medium transition-all duration-100
+                    ${filled ? "bg-blue-500 text-white shadow-md shadow-blue-200" : inRange ? "text-blue-700 dark:text-blue-400" : !disabled ? "text-muted-foreground hover:bg-accent" : "text-muted-foreground/60"}`,
+                          children: label
+                        }
+                      )
+                    }
+                  )
+                ]
+              },
+              i
+            );
+          }) })
+        ] }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -400,10 +437,13 @@ function MonthRangeCalendar({
               "flex items-center justify-between transition-colors",
               flat ? "border-t border-border/70 pt-4 text-xs" : cn(
                 "border-t px-4 py-2.5",
-                phase === "from" && actualCount > 0 ? "border-border bg-muted" : "border-transparent"
+                rangeMode && phase === "from" && actualCount > 0 ? "border-border bg-muted" : "border-transparent"
               )
             ),
-            children: phase === "from" && actualCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            children: !rangeMode && monthFrom ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: monthLabel(monthFrom) }),
+              /* @__PURE__ */ jsx("span", { className: "rounded-full bg-blue-50 px-2 py-0.5 text-[10px] font-semibold text-blue-600 dark:bg-blue-950/40 dark:text-blue-400", children: "1 month" })
+            ] }) : rangeMode && phase === "from" && actualCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
                 monthLabel(monthFrom),
                 " \u2192 ",
@@ -414,14 +454,14 @@ function MonthRangeCalendar({
                 " month",
                 actualCount !== 1 ? "s" : ""
               ] })
-            ] }) : phase === "to" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            ] }) : rangeMode && phase === "to" ? /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: hoverYm && hoverYm >= monthFrom ? `${monthLabel(monthFrom)} \u2192 ${monthLabel(hoverYm)}` : `Start: ${monthLabel(monthFrom)}` }),
               hoverYm && hoverYm >= monthFrom && previewCount > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-medium text-blue-400", children: [
                 previewCount,
                 " month",
                 previewCount !== 1 ? "s" : ""
               ] }) : null
-            ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/60", children: "No months selected" })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/60", children: rangeMode ? "Select a month range" : "Click a month to book" })
           }
         )
       ]
@@ -433,25 +473,58 @@ function MonthPeriodPicker({
   onChange,
   flat = true
 }) {
+  const [rangeMode, setRangeMode] = useState(
+    () => Boolean(booking.monthFrom && booking.monthTo && booking.monthFrom !== booking.monthTo)
+  );
+  useEffect(() => {
+    if (booking.monthFrom && booking.monthTo && booking.monthFrom !== booking.monthTo) {
+      setRangeMode(true);
+    }
+  }, [booking.monthFrom, booking.monthTo]);
+  const monthCountSelected = monthCount(booking.monthFrom, booking.monthTo);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", flat ? "gap-5" : "gap-3"), children: [
-    IS_PARTIAL_MONTH ? /* @__PURE__ */ jsxs(ScheduleInfoBanner, { children: [
-      "Today is ",
-      new Date(PRICING_TODAY).toLocaleDateString("en-US", { month: "long", day: "numeric" }),
-      ". Current month is partially elapsed \u2014 earliest bookable month is",
-      " ",
-      /* @__PURE__ */ jsx("strong", { children: monthLabel(MIN_MONTH) }),
-      "."
-    ] }) : null,
-    /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Select month range" }),
+    /* @__PURE__ */ jsx(ScheduleInfoBanner, { children: "Current month is available at full price, or choose a future month." }),
+    /* @__PURE__ */ jsx(
+      CheckboxField,
+      {
+        size: "sm",
+        label: "Select multiple months",
+        className: "w-fit items-center",
+        checked: rangeMode,
+        onCheckedChange: (checked) => {
+          setRangeMode(checked);
+          const from = booking.monthFrom || currentMonthYm();
+          if (!checked) {
+            onChange({ monthFrom: from, monthTo: from });
+            return;
+          }
+          const to = booking.monthTo && booking.monthTo > from ? booking.monthTo : addMonthsYm(from, 1);
+          onChange({ monthFrom: from, monthTo: to });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: rangeMode ? "Select month range" : "Select month" }),
     /* @__PURE__ */ jsx(
       MonthRangeCalendar,
       {
         flat,
+        rangeMode,
         monthFrom: booking.monthFrom,
         monthTo: booking.monthTo,
         onChange: (from, to) => onChange({ monthFrom: from, monthTo: to })
       }
-    )
+    ),
+    monthCountSelected > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-xl border border-border bg-muted px-3 py-2.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Period" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: rangeMode && monthCountSelected > 1 ? `${monthLabel(booking.monthFrom)} \u2192 ${monthLabel(booking.monthTo)}` : monthLabel(booking.monthFrom) })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "rounded-lg bg-blue-50 px-2 py-1 text-xs font-semibold text-blue-600 dark:bg-blue-950/40 dark:text-blue-400", children: [
+        monthCountSelected,
+        " month",
+        monthCountSelected !== 1 ? "s" : ""
+      ] })
+    ] }) : null
   ] });
 }
 function WeekPeriodPicker({
@@ -459,49 +532,47 @@ function WeekPeriodPicker({
   onChange,
   flat = true
 }) {
+  const [rangeMode, setRangeMode] = useState(() => booking.weekCount > 1);
+  useEffect(() => {
+    if (booking.weekCount > 1) setRangeMode(true);
+  }, [booking.weekCount]);
   const rangeStr = weekRangeLabel(booking.weekFrom, booking.weekCount);
-  const isCurrentWeekPartial = new Date(PRICING_TODAY).getDay() !== 1;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", flat ? "gap-5" : "gap-3"), children: [
-    isCurrentWeekPartial ? /* @__PURE__ */ jsxs(ScheduleInfoBanner, { children: [
-      "This week started on a ",
-      new Date(PRICING_TODAY).toLocaleDateString("en-US", { weekday: "long" }),
-      " \u2014 earliest full week begins",
-      " ",
-      /* @__PURE__ */ jsx("strong", { children: new Date(MIN_WEEK_START).toLocaleDateString("en-US", {
-        month: "long",
-        day: "numeric"
-      }) }),
-      "."
-    ] }) : null,
+    /* @__PURE__ */ jsx(ScheduleInfoBanner, { children: "Current week is available at full price, or choose a future week." }),
+    /* @__PURE__ */ jsx(
+      CheckboxField,
+      {
+        size: "sm",
+        label: "Select multiple weeks",
+        className: "w-fit items-center",
+        checked: rangeMode,
+        onCheckedChange: (checked) => {
+          setRangeMode(checked);
+          const from = booking.weekFrom || currentWeekStart();
+          if (!checked) {
+            onChange({ weekFrom: from, weekCount: 1 });
+            return;
+          }
+          onChange({
+            weekFrom: from,
+            weekCount: Math.max(2, booking.weekCount)
+          });
+        }
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Starting week" }),
+      /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: rangeMode ? "Select week range" : "Select week" }),
       /* @__PURE__ */ jsx(
         WeekCalendarPicker,
         {
           flat,
+          rangeMode,
           weekFrom: booking.weekFrom,
-          onChange: (v) => onChange({ weekFrom: v })
+          weekCount: booking.weekCount,
+          onChange: (weekFrom, weekCount) => onChange({ weekFrom, weekCount })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-      /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Number of weeks" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(
-          ScheduleStepper,
-          {
-            value: booking.weekCount,
-            max: 52,
-            onChange: (v) => onChange({ weekCount: v })
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
-          booking.weekCount,
-          " week",
-          booking.weekCount !== 1 ? "s" : ""
-        ] })
-      ] })
-    ] }),
     booking.weekFrom && booking.weekCount > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between rounded-xl border border-border bg-muted px-3 py-2.5", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
         /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Period" }),
@@ -529,7 +600,7 @@ function isBillableDay(day, start, end) {
 function DayCalendarPicker({
   selectedDate,
   onChange,
-  minDate = PRICING_TODAY,
+  minDate = todayLocalYmd(),
   flat = false
 }) {
   const initDate = /* @__PURE__ */ new Date((selectedDate || minDate) + "T00:00:00");
@@ -556,65 +627,68 @@ function DayCalendarPicker({
         flat ? "gap-3" : "gap-1 rounded-2xl border border-border bg-card p-3"
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between px-1", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: prevMonth,
-              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground", children: [
-            MONTH_NAMES[calMonth],
-            " ",
-            calYear
+        /* @__PURE__ */ jsxs("div", { className: calendarBlockClass, children: [
+          /* @__PURE__ */ jsxs("div", { className: calendarNavRowClass, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: prevMonth,
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground", children: [
+              MONTH_NAMES[calMonth],
+              " ",
+              calYear
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: nextMonth,
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
+                children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: nextMonth,
-              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
-              children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
-            }
-          )
+          /* @__PURE__ */ jsx("div", { className: calendarWeekdayRowClass, children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => /* @__PURE__ */ jsx("span", { className: calendarWeekdayCellClass, children: d }, d)) }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: days.map((d, i) => {
+            const ds = dayStr(d);
+            const isCurrentMonth = d.getMonth() === calMonth;
+            const isSelectable = ds >= minDate;
+            const isSelected = ds === selectedDate;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: !isSelectable,
+                onClick: () => isSelectable && onChange(ds),
+                className: cn(
+                  "flex h-9 items-center justify-center",
+                  cellGridLines(i, days.length, 7),
+                  !isSelectable && "cursor-not-allowed"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex h-8 w-8 items-center justify-center rounded-full text-[11px] transition-colors",
+                      isSelectable && isCurrentMonth && "text-foreground hover:bg-accent",
+                      isSelectable && !isCurrentMonth && "text-muted-foreground hover:bg-accent",
+                      !isSelectable && isCurrentMonth && "text-muted-foreground/40",
+                      !isSelectable && !isCurrentMonth && "text-muted-foreground/30",
+                      isSelected && "bg-blue-500 font-semibold text-white shadow-sm"
+                    ),
+                    children: d.getDate()
+                  }
+                )
+              },
+              ds
+            );
+          }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mb-0.5 grid grid-cols-7", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => /* @__PURE__ */ jsx("span", { className: "py-0.5 text-center text-[10px] font-medium text-muted-foreground", children: d }, d)) }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: days.map((d) => {
-          const ds = dayStr(d);
-          const isCurrentMonth = d.getMonth() === calMonth;
-          const isSelectable = ds >= minDate;
-          const isSelected = ds === selectedDate;
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled: !isSelectable,
-              onClick: () => isSelectable && onChange(ds),
-              className: cn(
-                "flex h-9 items-center justify-center",
-                !isSelectable && "cursor-not-allowed"
-              ),
-              children: /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "flex h-8 w-8 items-center justify-center rounded-full text-[11px] transition-colors",
-                    isSelected && "bg-blue-500 font-semibold text-white shadow-sm",
-                    !isSelected && isSelectable && isCurrentMonth && "text-foreground hover:bg-accent",
-                    !isSelected && isSelectable && !isCurrentMonth && "text-muted-foreground hover:bg-accent",
-                    !isSelectable && isCurrentMonth && "text-muted-foreground/40",
-                    !isSelectable && !isCurrentMonth && "text-muted-foreground/30"
-                  ),
-                  children: d.getDate()
-                }
-              )
-            },
-            ds
-          );
-        }) }),
         selectedDate ? /* @__PURE__ */ jsxs("p", { className: "mt-1 text-center text-[10px] text-muted-foreground", children: [
           "Selected ",
           formatDateLabel(selectedDate)
@@ -627,7 +701,7 @@ function DayRangeCalendar({
   startDate,
   endDate,
   onChange,
-  minDate = PRICING_TODAY,
+  minDate = currentWeekStart(),
   flat = false
 }) {
   const initDate = /* @__PURE__ */ new Date((startDate || minDate) + "T00:00:00");
@@ -680,31 +754,6 @@ function DayRangeCalendar({
         flat ? "gap-3" : "gap-1 rounded-2xl border border-border bg-card p-3"
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between px-1", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: prevMonth,
-              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
-              children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
-            }
-          ),
-          /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground", children: [
-            MONTH_NAMES[calMonth],
-            " ",
-            calYear
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: nextMonth,
-              className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
-              children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
-            }
-          )
-        ] }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -733,57 +782,85 @@ function DayRangeCalendar({
             ] })
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "mb-0.5 grid grid-cols-7", children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => /* @__PURE__ */ jsx("span", { className: "py-0.5 text-center text-[10px] font-medium text-muted-foreground", children: d }, d)) }),
-        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: days.map((d) => {
-          const ds = dayStr(d);
-          const isCurrentMonth = d.getMonth() === calMonth;
-          const isSelectable = ds >= minDate;
-          const inRange = isBillableDay(ds, dispStart, dispEnd);
-          const isStart = ds === dispStart;
-          const isEnd = ds === lastBillableDay && dispEnd && diffDays(dispStart, dispEnd) > 1;
-          const isSingle = dispStart && dispEnd && diffDays(dispStart, dispEnd) === 1 && ds === dispStart;
-          return /* @__PURE__ */ jsxs(
-            "button",
-            {
-              type: "button",
-              disabled: !isSelectable,
-              onMouseEnter: () => isSelectable && setHoverDay(ds),
-              onMouseLeave: () => setHoverDay(null),
-              onClick: () => isSelectable && handleClick(ds),
-              className: cn(
-                "relative flex h-9 items-center justify-center",
-                !isSelectable && "cursor-not-allowed"
-              ),
-              children: [
-                inRange && !isSingle ? /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "absolute inset-y-1.5 bg-blue-100",
-                      isStart ? "left-1/2 right-0 rounded-l-full" : isEnd ? "left-0 right-1/2 rounded-r-full" : "inset-x-0"
-                    )
-                  }
-                ) : null,
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: cn(
-                      "relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[11px] transition-colors",
-                      (isStart || isEnd || isSingle) && "bg-blue-500 font-semibold text-white shadow-sm",
-                      !isStart && !isEnd && !isSingle && inRange && "font-medium text-blue-700 dark:text-blue-400",
-                      !inRange && isSelectable && isCurrentMonth && "text-foreground hover:bg-accent",
-                      !inRange && isSelectable && !isCurrentMonth && "text-muted-foreground hover:bg-accent",
-                      !isSelectable && isCurrentMonth && "text-muted-foreground/40",
-                      !isSelectable && !isCurrentMonth && "text-muted-foreground/30"
-                    ),
-                    children: d.getDate()
-                  }
-                )
-              ]
-            },
-            ds
-          );
-        }) }),
+        /* @__PURE__ */ jsxs("div", { className: calendarBlockClass, children: [
+          /* @__PURE__ */ jsxs("div", { className: calendarNavRowClass, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: prevMonth,
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
+                children: /* @__PURE__ */ jsx(ChevronLeft, { size: 12, strokeWidth: 2.25 })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-muted-foreground", children: [
+              MONTH_NAMES[calMonth],
+              " ",
+              calYear
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: nextMonth,
+                className: "flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent",
+                children: /* @__PURE__ */ jsx(ChevronRight, { size: 12, strokeWidth: 2.25 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: calendarWeekdayRowClass, children: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => /* @__PURE__ */ jsx("span", { className: calendarWeekdayCellClass, children: d }, d)) }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", children: days.map((d, i) => {
+            const ds = dayStr(d);
+            const isCurrentMonth = d.getMonth() === calMonth;
+            const isSelectable = ds >= minDate;
+            const inRange = isBillableDay(ds, dispStart, dispEnd);
+            const isStart = ds === dispStart;
+            const isEnd = ds === lastBillableDay && dispEnd && diffDays(dispStart, dispEnd) > 1;
+            const isSingle = dispStart && dispEnd && diffDays(dispStart, dispEnd) === 1 && ds === dispStart;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                disabled: !isSelectable,
+                onMouseEnter: () => isSelectable && setHoverDay(ds),
+                onMouseLeave: () => setHoverDay(null),
+                onClick: () => isSelectable && handleClick(ds),
+                className: cn(
+                  "relative flex h-9 items-center justify-center",
+                  cellGridLines(i, days.length, 7),
+                  !isSelectable && "cursor-not-allowed"
+                ),
+                children: [
+                  inRange && !isSingle ? /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute inset-y-1.5 bg-blue-100",
+                        isStart ? "left-1/2 right-0 rounded-l-full" : isEnd ? "left-0 right-1/2 rounded-r-full" : "inset-x-0"
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[11px] transition-colors",
+                        !inRange && isSelectable && isCurrentMonth && "text-foreground hover:bg-accent",
+                        !inRange && isSelectable && !isCurrentMonth && "text-muted-foreground hover:bg-accent",
+                        !isSelectable && isCurrentMonth && "text-muted-foreground/40",
+                        !isSelectable && !isCurrentMonth && "text-muted-foreground/30",
+                        inRange && "font-medium text-blue-700 dark:text-blue-300",
+                        (isStart || isEnd || isSingle) && "bg-blue-500 font-semibold text-white shadow-sm"
+                      ),
+                      children: d.getDate()
+                    }
+                  )
+                ]
+              },
+              ds
+            );
+          }) })
+        ] }),
         /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-t border-border/70 pt-3 text-xs", children: dayCount > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
             formatDateLabel(startDate),
@@ -807,30 +884,24 @@ function DayPeriodPicker({
   const oneDay = booking.oneDayBooking ?? true;
   const dayCount = oneDay ? 1 : diffDays(booking.startDate, booking.endDate);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", flat ? "gap-5" : "gap-3"), children: [
-    /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
-      { key: true, label: "Single day" },
-      { key: false, label: "Multiple days" }
-    ].map(({ key, label }) => /* @__PURE__ */ jsx(
-      "button",
+    /* @__PURE__ */ jsx(
+      CheckboxField,
       {
-        type: "button",
-        onClick: () => {
-          const start = booking.startDate || PRICING_TODAY;
-          if (key) {
+        size: "sm",
+        label: "Select a date range",
+        className: "w-fit items-center",
+        checked: !oneDay,
+        onCheckedChange: (checked) => {
+          const start = booking.startDate || todayLocalYmd();
+          if (!checked) {
             onChange({ oneDayBooking: true, startDate: start, endDate: addDays(start, 1) });
-          } else {
-            const end = booking.endDate && booking.endDate > start && diffDays(start, booking.endDate) > 1 ? booking.endDate : addDays(start, 7);
-            onChange({ oneDayBooking: false, startDate: start, endDate: end });
+            return;
           }
-        },
-        className: cn(
-          "flex h-9 flex-1 items-center justify-center rounded-xl border text-sm font-medium transition-colors",
-          oneDay === key ? "border-blue-400 bg-blue-50 text-blue-600 dark:bg-blue-950/40 dark:text-blue-400" : "border-border bg-card text-muted-foreground hover:bg-accent"
-        ),
-        children: label
-      },
-      String(key)
-    )) }),
+          const end = booking.endDate && booking.endDate > start && diffDays(start, booking.endDate) > 1 ? booking.endDate : addDays(start, 7);
+          onChange({ oneDayBooking: false, startDate: start, endDate: end });
+        }
+      }
+    ),
     oneDay ? /* @__PURE__ */ jsx(
       DayCalendarPicker,
       {
@@ -860,17 +931,149 @@ function DayPeriodPicker({
     ] }) : null
   ] });
 }
+function HourlyTimeRangeFields({
+  fromTime,
+  scheduleEndTime,
+  chargeBy,
+  timeFormat,
+  toOptions,
+  minTo,
+  onFromChange,
+  onToChange,
+  vertical = false
+}) {
+  const fields = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "From" }),
+      /* @__PURE__ */ jsx(TimeField, { value: fromTime, onChange: onFromChange, timeFormat })
+    ] }),
+    vertical ? /* @__PURE__ */ jsx("div", { className: "h-px bg-border", "aria-hidden": true }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "To" }),
+      chargeBy === "hours" ? /* @__PURE__ */ jsx(
+        TimeField,
+        {
+          value: scheduleEndTime,
+          onChange: onToChange,
+          timeFormat,
+          allowedTimes: toOptions,
+          disabled: toOptions.length === 0,
+          placeholder: toOptions.length === 0 ? "No later times" : "Select time"
+        }
+      ) : /* @__PURE__ */ jsx(
+        TimeField,
+        {
+          value: scheduleEndTime,
+          onChange: onToChange,
+          timeFormat,
+          minTime: minTo,
+          disabled: !minTo,
+          placeholder: minTo ? "Select time" : "No later times"
+        }
+      )
+    ] })
+  ] });
+  if (vertical) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: fields });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-3", children: fields });
+}
 function HourlySchedulePicker({
   scheduleDate,
   scheduleTime,
+  scheduleEndTime = "",
   onChange,
   timeFormat = "24h",
-  flat = true
+  flat = true,
+  chargeBy = "hours",
+  splitLayout = false,
+  stackLayout = false
 }) {
-  const [step, setStep] = useState(() => scheduleDate ? "time" : "date");
-  useEffect(() => {
-    if (!scheduleDate) setStep("date");
-  }, [scheduleDate]);
+  const [step, setStep] = useState("date");
+  const fromTime = scheduleTime || "09:00";
+  const toOptions = chargeBy === "hours" ? hourlyEndTimes(fromTime) : [];
+  const minTo = chargeBy === "minutes" ? addMinutesToHm(fromTime, 1) ?? void 0 : void 0;
+  const handleFromChange = (nextFrom) => {
+    onChange({
+      scheduleTime: nextFrom,
+      scheduleEndTime: snapScheduleEndTime(nextFrom, scheduleEndTime, chargeBy)
+    });
+  };
+  const handleDateChange = (v) => {
+    const nextFrom = scheduleTime || "09:00";
+    onChange({
+      scheduleDate: v,
+      scheduleTime: nextFrom,
+      scheduleEndTime: scheduleEndTime || snapScheduleEndTime(nextFrom, "", chargeBy) || "10:00"
+    });
+  };
+  const summary = scheduleDate && fromTime && scheduleEndTime ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-xl border border-border bg-muted px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Scheduled for" }),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+      formatDateLabel(scheduleDate),
+      " \xB7 ",
+      formatTimeForDisplay(fromTime, timeFormat),
+      " \u2192",
+      " ",
+      formatTimeForDisplay(scheduleEndTime, timeFormat)
+    ] })
+  ] }) }) : null;
+  const timeFields = /* @__PURE__ */ jsx(
+    HourlyTimeRangeFields,
+    {
+      fromTime,
+      scheduleEndTime,
+      chargeBy,
+      timeFormat,
+      toOptions,
+      minTo,
+      onFromChange: handleFromChange,
+      onToChange: (v) => onChange({ scheduleEndTime: v }),
+      vertical: splitLayout || stackLayout
+    }
+  );
+  if (stackLayout) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", flat ? "" : "rounded-2xl border border-border bg-card p-4"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Date" }),
+        /* @__PURE__ */ jsx(
+          DayCalendarPicker,
+          {
+            flat,
+            selectedDate: scheduleDate,
+            minDate: todayLocalYmd(),
+            onChange: handleDateChange
+          }
+        )
+      ] }),
+      timeFields,
+      summary
+    ] });
+  }
+  if (splitLayout) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", flat ? "" : "rounded-2xl border border-border bg-card p-4"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 sm:flex-row sm:items-start", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Date" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(
+            DayCalendarPicker,
+            {
+              flat,
+              selectedDate: scheduleDate,
+              minDate: todayLocalYmd(),
+              onChange: handleDateChange
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "hidden w-px shrink-0 self-stretch bg-border sm:block", "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-[9.5rem] shrink-0 sm:w-44", children: [
+          /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Time" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: timeFields })
+        ] })
+      ] }),
+      summary
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", flat ? "" : "rounded-2xl border border-border bg-card p-4"), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [
       /* @__PURE__ */ jsx(
@@ -889,7 +1092,7 @@ function HourlySchedulePicker({
         {
           className: cn(
             step === "time" && "font-semibold text-blue-600 dark:text-blue-400",
-            !scheduleDate && "text-muted-foreground/60"
+            step !== "time" && "text-muted-foreground/60"
           ),
           children: "Time"
         }
@@ -902,9 +1105,9 @@ function HourlySchedulePicker({
         {
           flat,
           selectedDate: scheduleDate,
-          minDate: PRICING_TODAY,
+          minDate: todayLocalYmd(),
           onChange: (v) => {
-            onChange({ scheduleDate: v });
+            handleDateChange(v);
             setStep("time");
           }
         }
@@ -927,29 +1130,110 @@ function HourlySchedulePicker({
           ]
         }
       ),
+      timeFields,
+      summary
+    ] })
+  ] });
+}
+function ServiceNeededAtPicker({
+  scheduleDate,
+  scheduleTime,
+  onChange,
+  timeFormat = "24h",
+  flat = true,
+  stackLayout = true,
+  minDate = todayLocalYmd(),
+  preparationMinutes = 0
+}) {
+  const neededTime = scheduleTime || "09:00";
+  const todayYmd = todayLocalYmd();
+  const minTimeToday = preparationMinutes > 0 && scheduleDate === todayYmd ? minNeededTimeHm(preparationMinutes) : void 0;
+  const syncNeeded = (date, time) => {
+    let nextTime = time;
+    if (preparationMinutes > 0 && date === todayYmd) {
+      const floor = minNeededTimeHm(preparationMinutes);
+      if (floor && nextTime < floor) nextTime = floor;
+    }
+    onChange({
+      scheduleDate: date,
+      scheduleTime: nextTime,
+      scheduleEndTime: nextTime,
+      startDate: date,
+      endDate: date
+    });
+  };
+  const handleDateChange = (v) => syncNeeded(v, neededTime);
+  const handleTimeChange = (v) => {
+    if (!scheduleDate) return;
+    syncNeeded(scheduleDate, v);
+  };
+  const summary = scheduleDate && neededTime ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-xl border border-border bg-muted px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Needed at" }),
+    /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+      formatDateLabel(scheduleDate),
+      " \xB7 ",
+      formatTimeForDisplay(neededTime, timeFormat)
+    ] })
+  ] }) }) : null;
+  const timeField = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Needed at" }),
+    /* @__PURE__ */ jsx(
+      TimeField,
+      {
+        value: neededTime,
+        onChange: handleTimeChange,
+        timeFormat,
+        minTime: minTimeToday,
+        disabled: Boolean(minTimeToday && !minTimeToday),
+        placeholder: minTimeToday ? "Select time" : void 0
+      }
+    )
+  ] });
+  if (stackLayout) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5", flat ? "" : "rounded-2xl border border-border bg-card p-4"), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-        /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Pick a time" }),
-        /* @__PURE__ */ jsx("div", { className: "flex justify-center rounded-2xl border border-border bg-card py-6", children: /* @__PURE__ */ jsx(
-          AnalogClockPicker,
+        /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Date" }),
+        /* @__PURE__ */ jsx(
+          DayCalendarPicker,
           {
-            value: scheduleTime,
-            onChange: (v) => onChange({ scheduleTime: v }),
-            timeFormat
+            flat,
+            selectedDate: scheduleDate,
+            minDate,
+            onChange: handleDateChange
           }
-        ) })
+        )
       ] }),
-      scheduleDate && scheduleTime ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between rounded-xl border border-border bg-muted px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "Scheduled for" }),
-        /* @__PURE__ */ jsxs("span", { className: "text-xs font-medium text-foreground", children: [
-          formatDateLabel(scheduleDate),
-          " \xB7 ",
-          formatTimeForDisplay(scheduleTime, timeFormat)
-        ] })
-      ] }) }) : null
-    ] })
+      timeField,
+      summary
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-5 sm:flex-row sm:items-start", flat ? "" : "rounded-2xl border border-border bg-card p-4"), children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx(ScheduleFieldLabel, { children: "Date" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(
+        DayCalendarPicker,
+        {
+          flat,
+          selectedDate: scheduleDate,
+          minDate,
+          onChange: handleDateChange
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "hidden w-px shrink-0 self-stretch bg-border sm:block", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("div", { className: "min-w-[9.5rem] shrink-0 sm:w-44", children: timeField }),
+    summary ? /* @__PURE__ */ jsx("div", { className: "w-full", children: summary }) : null
   ] });
 }
+function minNeededTimeHm(prepMinutes, now = /* @__PURE__ */ new Date()) {
+  const earliest = new Date(now.getTime() + prepMinutes * 6e4);
+  if (earliest.getSeconds() > 0 || earliest.getMilliseconds() > 0) {
+    earliest.setMinutes(earliest.getMinutes() + 1);
+  }
+  earliest.setSeconds(0, 0);
+  return `${String(earliest.getHours()).padStart(2, "0")}:${String(earliest.getMinutes()).padStart(2, "0")}`;
+}
 
-export { DayCalendarPicker, DayPeriodPicker, DayRangeCalendar, HourlySchedulePicker, MonthPeriodPicker, MonthRangeCalendar, ScheduleFieldLabel, ScheduleInfoBanner, ScheduleStepper, WeekCalendarPicker, WeekPeriodPicker };
+export { DayCalendarPicker, DayPeriodPicker, DayRangeCalendar, HourlySchedulePicker, MonthPeriodPicker, MonthRangeCalendar, ScheduleFieldLabel, ScheduleInfoBanner, ScheduleStepper, ServiceNeededAtPicker, WeekCalendarPicker, WeekPeriodPicker };
 //# sourceMappingURL=booking-schedule-calendars.js.map
 //# sourceMappingURL=booking-schedule-calendars.js.map