@cosmoops/connect-sdk 0.17.0 → 0.18.0

package/CHANGELOG.md

@@ -3,6 +3,88 @@
 `@cosmoops/connect-sdk` follows semver, with the 0.x convention that **minor
 versions may carry breaking changes** and patch versions never do.
 
+## 0.18.0
+
+### Added
+
+- **`connect.scheduling.rescheduleBooking()`** - move an appointment without
+  cancelling and rebooking it.
+
+  ```ts
+  const { booking, previous } = await connect.scheduling.rescheduleBooking({
+    workspaceId,
+    bookingId,
+    startAt: newSlot.startAt,
+  });
+  ```
+
+  The original is **retired, not edited**: it stays on the workspace's diary as
+  `rescheduled` with `rescheduledToId` pointing at its replacement, and both
+  come back. So a booking id you cached still resolves and still says where the
+  appointment went, and a report that already counted the original hour is not
+  rewritten under it.
+
+  **A refused move changes nothing.** The new slot is claimed before the old one
+  is released, so a `conflict` leaves the customer holding the appointment they
+  already had.
+
+- **`excludeBookingId` on `findSlots()`** - set it when offering times to move
+  an existing appointment to. Without it the appointment counts as blocking its
+  own replacement, and the adjustment people actually make - same day, half an
+  hour later - comes back with nothing available.
+
+- **`Booking.rescheduledToId`**, set when `status` is `rescheduled`.
+
+- **`<ConnectBookingCalendar>`** - the workspace's week, in your app.
+
+  ```tsx
+  import { ConnectBookingCalendar } from "@cosmoops/connect-sdk/client";
+
+  <ConnectBookingCalendar timeZone="Asia/Kolkata" />
+  ```
+
+  A week grid with booking, rescheduling and cancelling built in. Clicking an
+  empty hour opens a slot picker; clicking an appointment opens it with Move
+  and Cancel. Everything goes through the bridge as the signed-in member, so
+  Connect checks *their* `calendar:read` / `calendar:manage` - pass
+  `canBook={false}` to render the read-only shape without offering a button
+  that would be refused.
+
+  **Two views, and the viewport decides.** A seven-column time grid needs about
+  640px before a column can hold a name, so below `sm:` the same week renders
+  as a grouped agenda - a different shape for a phone, not a squeezed grid.
+
+  **`timeZone` is the business's, not the viewer's.** Every instant is read
+  against it, so a workspace's working day does not shift because a member is
+  travelling. It defaults to the host's zone, which is right when staff and
+  business share one; pass it when they might not.
+
+- **Hooks, if you would rather build your own surface**:
+  `useBookableEventTypes`, `useAvailableSlots`, `useBookings`,
+  `useBookingActions`. None of the actions is optimistic - whether a slot is
+  still free is a question only the server can answer inside the transaction
+  that decides it.
+
+- **`layoutBookings` and friends** from `booking-grid.js`, exported so a custom
+  grid can reuse the arithmetic: zone-correct day bucketing (half-hour zones
+  and DST included), transitive overlap clustering into side-by-side columns,
+  and a minimum height so a fifteen-minute appointment stays clickable.
+
+- **`asUser` on every `scheduling.*` method**, and the six scheduling routes it
+  exists for on `createConnectHandler`'s bridge:
+  `GET /scheduling/{event-types,slots,bookings}` and
+  `POST /scheduling/bookings{,/reschedule,/cancel}`.
+
+  With `asUser`, Connect derives the workspace from **that member's session**
+  and ignores the `workspaceId` you passed, then checks their own
+  `calendar:read` / `calendar:manage`. The bridge always sends it, and that is
+  what makes a browser-facing booking component safe: a browser must never name
+  a tenant, and an end user of your app is not automatically allowed to book on
+  their employer's calendar just because your API key can.
+
+  Without `asUser` nothing changes - the call is your server acting for a
+  workspace you name, gated on your application being installed there.
+
 ## 0.17.0
 
 ### Added

package/README.md

@@ -342,7 +342,7 @@ try {
 | `entitlements` | `getReadiness` · `getSubscription` · `hasFeature` |
 | `billing` | `listPlans` · `getAddonUsage` · `consumeAddon` |
 | `drive` | `upload` · `getFileUrl` · `getPreviewUrl` |
-| `scheduling` | `listEventTypes` · `findSlots` · `listBookings` · `createBooking` · `cancelBooking` |
+| `scheduling` | `listEventTypes` · `findSlots` · `listBookings` · `createBooking` · `rescheduleBooking` · `cancelBooking` |
 | `ai` | `chat` · `extract` |
 | `otp` | `send` · `verify` |
 | `logs` | `write` |
@@ -350,6 +350,24 @@ try {
 | `sessions` | `list` · `revoke` · `revokeOthers` |
 | `integrations` | `list` · `initiateConnect` · `disconnect` · `execute` |
 
+### The calendar, as a component
+
+```tsx
+import { ConnectBookingCalendar } from "@cosmoops/connect-sdk/client";
+
+<ConnectBookingCalendar timeZone="Asia/Kolkata" />
+```
+
+A week grid on a desktop, a grouped agenda on a phone, with booking,
+rescheduling and cancelling built in. It reads through the bridge as the
+signed-in member, so Connect checks their own `calendar:read` /
+`calendar:manage` - not your API key. `canBook={false}` renders the read-only
+shape.
+
+`timeZone` is the **business's** zone. Every instant on the grid is read
+against it, so a workspace's working day does not shift because a member is
+travelling.
+
 ### Booking on a workspace's calendar
 
 One calendar per workspace - the same one their team configures, and the same

package/dist/cjs/client/components/booking-calendar.js

@@ -0,0 +1,170 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectBookingCalendar = ConnectBookingCalendar;
+exports.connectBookingTimeLabel = timeLabel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const empty_state_js_1 = require("../../ui/empty-state.js");
+const use_scheduling_js_1 = require("../use-scheduling.js");
+const booking_grid_js_1 = require("./booking-grid.js");
+const booking_dialogs_js_1 = require("./booking-dialogs.js");
+/**
+ * The visible band of the day. Outside it a booking is drawn at the edge and
+ * flagged rather than hidden - see `layoutBookings`.
+ *
+ * 07:00-21:00 rather than a full day: fourteen hours is the most that stays
+ * legible on a laptop without scrolling, and a booking grid whose first screen
+ * is six empty night-time hours reads as a broken calendar.
+ */
+const DEFAULT_WINDOW = { startMinute: 7 * 60, endMinute: 21 * 60 };
+const LOCATION_ICON = {
+    phone: lucide_react_1.Phone,
+    address: lucide_react_1.CalendarDays,
+    link: lucide_react_1.Video,
+};
+/**
+ * A week of the workspace's calendar, with booking, rescheduling and
+ * cancelling.
+ *
+ * **Two views, and which one you get is a viewport decision, not a
+ * preference.** A seven-column time grid needs roughly 640px before a column
+ * is wide enough to hold a name; below that it degrades into unreadable
+ * slivers. So the grid is `sm:` and up, and the same week renders as a grouped
+ * agenda underneath - not a cut-down grid, a different and better shape for a
+ * phone. Both read the same data and open the same dialogs.
+ *
+ * Everything it does goes through the bridge as the signed-in member, so
+ * Connect checks *their* `calendar:read` / `calendar:manage` rather than the
+ * host application's key. A member who may look but not book gets the grid and
+ * a refusal on the write, which is the correct shape - see `useBookingActions`.
+ */
+function ConnectBookingCalendar({ timeZone, hostMemberId, window: visibleWindow = DEFAULT_WINDOW, canBook = true, className, }) {
+    const zone = timeZone ?? hostTimeZone();
+    const [weekAnchor, setWeekAnchor] = (0, react_2.useState)(() => startOfWeek(new Date(), zone));
+    const [selected, setSelected] = (0, react_2.useState)(null);
+    const [booking, setBooking] = (0, react_2.useState)(null);
+    const now = new Date();
+    const columns = (0, react_2.useMemo)(() => (0, booking_grid_js_1.dayColumns)(weekAnchor, zone, 7, now), 
+    // `now` is deliberately not a dependency: it changes on every render, and
+    // the only thing it decides is which column is highlighted. Recomputing
+    // seven columns per keystroke elsewhere on the page to move a highlight
+    // that changes once a day is not a trade worth making.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [weekAnchor, zone]);
+    const range = (0, react_2.useMemo)(() => ({
+        from: columns[0]?.startsAt ?? weekAnchor,
+        to: new Date((columns.at(-1)?.startsAt.getTime() ?? weekAnchor.getTime()) + 24 * 60 * 60_000),
+    }), [columns, weekAnchor]);
+    const { eventTypes } = (0, use_scheduling_js_1.useBookableEventTypes)();
+    const { bookings, isLoading, error, refetch } = (0, use_scheduling_js_1.useBookings)({
+        from: range.from,
+        to: range.to,
+        hostMemberId,
+    });
+    const positioned = (0, react_2.useMemo)(() => (0, booking_grid_js_1.layoutBookings)(bookings, zone, visibleWindow), [bookings, zone, visibleWindow]);
+    const marks = (0, react_2.useMemo)(() => (0, booking_grid_js_1.hourMarks)(visibleWindow), [visibleWindow]);
+    const shiftWeek = (weeks) => setWeekAnchor((anchor) => new Date(anchor.getTime() + weeks * 7 * 24 * 60 * 60_000));
+    const eventTypeById = (0, react_2.useMemo)(() => new Map(eventTypes.map((eventType) => [eventType.id, eventType])), [eventTypes]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex flex-col gap-4 ${className ?? ""}`, children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Previous week", onPress: () => shiftWeek(-1), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "size-4", "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "secondary", onPress: () => setWeekAnchor(startOfWeek(new Date(), zone)), children: "Today" }), (0, jsx_runtime_1.jsx)(react_1.Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Next week", onPress: () => shiftWeek(1), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "size-4", "aria-hidden": true }) }), (0, jsx_runtime_1.jsx)("p", { className: "ml-2 text-sm font-medium", children: weekLabel(columns, zone) })] }), canBook && eventTypes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: "primary", onPress: () => setBooking({ startAt: nextHour(now) }), children: "New appointment" }))] }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-danger", children: error }), isLoading ? ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { className: "h-96 w-full rounded-lg" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Card, { className: "hidden overflow-hidden sm:block", children: (0, jsx_runtime_1.jsx)(WeekGrid, { columns: columns, marks: marks, window: visibleWindow, positioned: positioned, eventTypeById: eventTypeById, zone: zone, onSelect: setSelected, onPickEmpty: canBook ? (startAt) => setBooking({ startAt }) : undefined }) }), (0, jsx_runtime_1.jsx)("div", { className: "sm:hidden", children: (0, jsx_runtime_1.jsx)(AgendaView, { columns: columns, bookings: bookings, eventTypeById: eventTypeById, zone: zone, onSelect: setSelected }) })] })), booking && ((0, jsx_runtime_1.jsx)(booking_dialogs_js_1.ConnectBookingDialog, { isOpen: true, onOpenChange: (open) => !open && setBooking(null), eventTypes: eventTypes, initialStartAt: booking.startAt, timeZone: zone, onBooked: () => {
+                    setBooking(null);
+                    refetch();
+                } })), selected && ((0, jsx_runtime_1.jsx)(booking_dialogs_js_1.ConnectBookingDetail, { booking: selected, eventType: eventTypeById.get(selected.eventTypeId) ?? null, timeZone: zone, onOpenChange: (open) => !open && setSelected(null), onChanged: () => {
+                    setSelected(null);
+                    refetch();
+                } }))] }));
+}
+function WeekGrid({ columns, marks, window: visibleWindow, positioned, eventTypeById, zone, onSelect, onPickEmpty, }) {
+    const span = visibleWindow.endMinute - visibleWindow.startMinute;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-[3rem_repeat(7,minmax(0,1fr))]", children: [(0, jsx_runtime_1.jsx)("div", { className: "border-b border-separator" }), columns.map((column) => ((0, jsx_runtime_1.jsx)("div", { className: `border-b border-l border-separator px-2 py-2 text-center ${column.isToday ? "bg-accent/5" : ""}`, children: (0, jsx_runtime_1.jsx)("p", { className: `text-xs font-medium ${column.isToday ? "text-accent" : ""}`, children: column.label }) }, column.dateKey))), (0, jsx_runtime_1.jsx)("div", { className: "relative", style: { height: `${(span / 60) * 3}rem` }, children: marks.map((mark) => ((0, jsx_runtime_1.jsx)("span", { className: "absolute right-1 -translate-y-1/2 text-[0.625rem] text-muted", style: { top: `${((mark.minute - visibleWindow.startMinute) / span) * 100}%` }, children: mark.label }, mark.minute))) }), columns.map((column) => ((0, jsx_runtime_1.jsxs)("div", { className: `relative border-l border-separator ${column.isToday ? "bg-accent/5" : ""}`, style: { height: `${(span / 60) * 3}rem` }, children: [marks.map((mark) => ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-x-0 border-t border-separator/60", style: { top: `${((mark.minute - visibleWindow.startMinute) / span) * 100}%` } }, mark.minute))), onPickEmpty &&
+                        marks.map((mark) => ((0, jsx_runtime_1.jsx)("button", { type: "button", "aria-label": `Book ${column.label} at ${mark.label}`, className: "absolute inset-x-0 cursor-pointer transition-colors hover:bg-accent/10", style: {
+                                top: `${((mark.minute - visibleWindow.startMinute) / span) * 100}%`,
+                                height: `${(60 / span) * 100}%`,
+                            }, onClick: () => onPickEmpty(new Date(column.startsAt.getTime() + mark.minute * 60_000)) }, `slot-${mark.minute}`))), positioned
+                        .filter((entry) => entry.dateKey === column.dateKey)
+                        .map((entry) => {
+                        const eventType = eventTypeById.get(entry.booking.eventTypeId);
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: () => onSelect(entry.booking), className: "absolute overflow-hidden rounded-[--radius] border border-accent/30 bg-accent/15 px-1 py-0.5 text-left transition-colors hover:bg-accent/25", style: {
+                                top: `${entry.top * 100}%`,
+                                height: `${entry.height * 100}%`,
+                                // Side-by-side within an overlap cluster, with a hairline
+                                // gap so two adjacent blocks read as two things.
+                                left: `${(entry.column / entry.columns) * 100}%`,
+                                width: `calc(${(1 / entry.columns) * 100}% - 2px)`,
+                            }, children: [(0, jsx_runtime_1.jsx)("span", { className: "block truncate text-[0.625rem] font-medium text-accent", children: timeLabel(new Date(entry.booking.startAt), zone) }), (0, jsx_runtime_1.jsx)("span", { className: "block truncate text-[0.625rem]", children: entry.booking.attendee.name }), eventType && ((0, jsx_runtime_1.jsx)("span", { className: "block truncate text-[0.625rem] text-muted", children: eventType.name }))] }, entry.booking.id));
+                    })] }, column.dateKey)))] }));
+}
+function AgendaView({ columns, bookings, eventTypeById, zone, onSelect, }) {
+    const byDay = (0, react_2.useMemo)(() => {
+        const map = new Map();
+        for (const booking of bookings) {
+            const { dateKey } = (0, booking_grid_js_1.zonedInstant)(new Date(booking.startAt), zone);
+            map.set(dateKey, [...(map.get(dateKey) ?? []), booking]);
+        }
+        return map;
+    }, [bookings, zone]);
+    // Days with nothing on them are omitted rather than rendered empty: an
+    // agenda is a list of what is happening, and seven "nothing" rows is six
+    // screens of scrolling to find the one day that matters.
+    const populated = columns.filter((column) => (byDay.get(column.dateKey)?.length ?? 0) > 0);
+    if (populated.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(empty_state_js_1.ConnectEmptyState, { variant: "dashed", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarDays, { "aria-hidden": true }), title: "Nothing booked this week", description: "Appointments booked here, on your public link, or by a voice agent all show up together." }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-4", children: populated.map((column) => ((0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)("h3", { className: `text-sm font-medium ${column.isToday ? "text-accent" : ""}`, children: column.label }), (byDay.get(column.dateKey) ?? []).map((booking) => {
+                    const eventType = eventTypeById.get(booking.eventTypeId);
+                    const Icon = eventType ? LOCATION_ICON[eventType.locationKind] : lucide_react_1.CalendarDays;
+                    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => onSelect(booking), children: (0, jsx_runtime_1.jsx)(react_1.Card, { className: "transition-colors hover:bg-surface", children: (0, jsx_runtime_1.jsxs)(react_1.Card.Content, { className: "flex items-center gap-3 py-3 text-left", children: [(0, jsx_runtime_1.jsx)(Icon, { className: "size-4 shrink-0 text-muted", "aria-hidden": true }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-medium", children: booking.attendee.name }), (0, jsx_runtime_1.jsxs)("p", { className: "truncate text-xs text-muted", children: [timeLabel(new Date(booking.startAt), zone), eventType ? ` · ${eventType.name}` : ""] })] }), booking.source === "agent-call" && ((0, jsx_runtime_1.jsxs)(react_1.Chip, { size: "sm", variant: "secondary", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Phone, { className: "size-3", "aria-hidden": true }), "Agent"] }))] }) }) }, booking.id));
+                })] }, column.dateKey))) }));
+}
+/* ------------------------------------------------------------------ helpers */
+/** The host's zone, used when the caller does not name the business's. */
+function hostTimeZone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+    }
+    catch {
+        return "UTC";
+    }
+}
+/**
+ * Monday of the week `instant` falls in, in `zone`.
+ *
+ * Monday rather than Sunday: this is a *business* calendar, and a week that
+ * splits the working days across two screens is the one thing a week view must
+ * not do.
+ */
+function startOfWeek(instant, zone) {
+    const { dateKey } = (0, booking_grid_js_1.zonedInstant)(instant, zone);
+    const midnight = (0, booking_grid_js_1.dayStartInstant)(dateKey, zone);
+    // `getUTCDay` on local midnight-as-an-instant is not the local weekday, so
+    // the weekday is read back through the zone.
+    const weekday = new Intl.DateTimeFormat("en-US", { timeZone: zone, weekday: "short" }).format(midnight);
+    const offset = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].indexOf(weekday);
+    return new Date(midnight.getTime() - (offset < 0 ? 0 : offset) * 24 * 60 * 60_000);
+}
+function weekLabel(columns, zone) {
+    const first = columns[0];
+    const last = columns.at(-1);
+    if (!first || !last)
+        return "";
+    const month = new Intl.DateTimeFormat("en-IN", { timeZone: zone, month: "long", year: "numeric" });
+    return first.monthLabel === last.monthLabel
+        ? month.format(first.startsAt)
+        : `${first.monthLabel} - ${month.format(last.startsAt)}`;
+}
+function timeLabel(instant, zone) {
+    return new Intl.DateTimeFormat("en-IN", {
+        timeZone: zone,
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+    }).format(instant);
+}
+/** The next whole hour - where "New appointment" opens with no slot picked. */
+function nextHour(now) {
+    const next = new Date(now);
+    next.setMinutes(0, 0, 0);
+    return new Date(next.getTime() + 60 * 60_000);
+}

package/dist/cjs/client/components/booking-dialogs.js

@@ -0,0 +1,124 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectBookingDialog = ConnectBookingDialog;
+exports.ConnectBookingDetail = ConnectBookingDetail;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@heroui/react");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const use_scheduling_js_1 = require("../use-scheduling.js");
+const SEARCH_DAYS = 14;
+/**
+ * Picking a time, and then who it is for.
+ *
+ * The slot list is read fresh every time this opens and is **never cached
+ * across an open**: it is a snapshot of contention, and offering a time
+ * somebody took ninety seconds ago is how two people end up in the same slot.
+ * The server re-checks inside its transaction regardless, so a stale list
+ * costs a refusal rather than a double booking - this only makes the refusal
+ * rare enough to be surprising when it happens.
+ */
+function ConnectBookingDialog({ isOpen, onOpenChange, eventTypes, initialStartAt, timeZone, onBooked, }) {
+    const [eventTypeId, setEventTypeId] = (0, react_2.useState)(eventTypes[0]?.id ?? "");
+    const [chosen, setChosen] = (0, react_2.useState)(null);
+    const [name, setName] = (0, react_2.useState)("");
+    const [phone, setPhone] = (0, react_2.useState)("");
+    const window = (0, react_2.useMemo)(() => ({
+        // From the start of the day that was clicked, so the times on offer are
+        // the ones near where the person was looking.
+        from: new Date(initialStartAt.getTime() - 12 * 60 * 60_000),
+        to: new Date(initialStartAt.getTime() + SEARCH_DAYS * 24 * 60 * 60_000),
+    }), [initialStartAt]);
+    const { slots, isLoading } = (0, use_scheduling_js_1.useAvailableSlots)(eventTypeId ? { eventTypeId, from: window.from, to: window.to } : null);
+    const { createBooking, isPending, error, clearError } = (0, use_scheduling_js_1.useBookingActions)();
+    const canSubmit = Boolean(chosen && name.trim() && phone.trim()) && !isPending;
+    return ((0, jsx_runtime_1.jsx)(react_1.Modal, { isOpen: isOpen, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: "New appointment" }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { className: "flex flex-col gap-4", children: [eventTypes.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2", children: eventTypes.map((eventType) => ((0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", variant: eventType.id === eventTypeId ? "primary" : "secondary", onPress: () => {
+                                            setEventTypeId(eventType.id);
+                                            // The old pick belongs to the old type's grid and is
+                                            // almost never a legal slot on the new one.
+                                            setChosen(null);
+                                        }, children: eventType.name }, eventType.id))) })), (0, jsx_runtime_1.jsx)(SlotPicker, { slots: slots, isLoading: isLoading, chosen: chosen, onChoose: setChosen, timeZone: timeZone }), (0, jsx_runtime_1.jsxs)(react_1.TextField, { isRequired: true, variant: "secondary", children: [(0, jsx_runtime_1.jsx)(react_1.Label, { children: "Name" }), (0, jsx_runtime_1.jsx)(react_1.Input, { value: name, onChange: (e) => setName(e.currentTarget.value), disabled: isPending })] }), (0, jsx_runtime_1.jsxs)(react_1.TextField, { isRequired: true, variant: "secondary", children: [(0, jsx_runtime_1.jsx)(react_1.Label, { children: "Phone" }), (0, jsx_runtime_1.jsx)(react_1.Input, { type: "tel", value: phone, onChange: (e) => setPhone(e.currentTarget.value), disabled: isPending })] }), error && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-danger", children: error }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "secondary", onPress: () => onOpenChange(false), isDisabled: isPending, children: "Cancel" }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "primary", isDisabled: !canSubmit, onPress: async () => {
+                                                clearError();
+                                                const booked = await createBooking({
+                                                    eventTypeId,
+                                                    startAt: chosen,
+                                                    attendee: { name: name.trim(), phone: phone.trim(), email: null },
+                                                });
+                                                if (booked)
+                                                    onBooked(booked);
+                                            }, children: isPending ? "Booking…" : "Book" })] })] })] }) }) }) }));
+}
+/**
+ * One appointment, and the two things anyone opens it to do.
+ *
+ * Rescheduling re-reads the slots with `excludeBookingId` set to this booking.
+ * Without that the appointment blocks its own replacement, and moving it by
+ * half an hour - the only move most people ever make - offers nothing.
+ */
+function ConnectBookingDetail({ booking, eventType, timeZone, onOpenChange, onChanged, }) {
+    const [isMoving, setMoving] = (0, react_2.useState)(false);
+    const [chosen, setChosen] = (0, react_2.useState)(null);
+    const { rescheduleBooking, cancelBooking, isPending, error, clearError } = (0, use_scheduling_js_1.useBookingActions)();
+    const start = new Date(booking.startAt);
+    const window = (0, react_2.useMemo)(() => ({
+        from: new Date(start.getTime() - 12 * 60 * 60_000),
+        to: new Date(start.getTime() + SEARCH_DAYS * 24 * 60 * 60_000),
+    }), [start]);
+    const { slots, isLoading } = (0, use_scheduling_js_1.useAvailableSlots)(isMoving ? { eventTypeId: booking.eventTypeId, ...window, excludeBookingId: booking.id } : null);
+    return ((0, jsx_runtime_1.jsx)(react_1.Modal, { isOpen: true, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsx)(react_1.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_1.Modal.Container, { children: (0, jsx_runtime_1.jsxs)(react_1.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_1.Modal.Header, { children: booking.attendee.name }), (0, jsx_runtime_1.jsxs)(react_1.Modal.Body, { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1", children: [(0, jsx_runtime_1.jsxs)("p", { className: "flex items-center gap-2 text-sm", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Clock, { className: "size-4 text-muted", "aria-hidden": true }), longLabel(start, timeZone)] }), eventType && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: eventType.name }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: booking.attendee.phone }), booking.notes && (0, jsx_runtime_1.jsx)("p", { className: "pt-1 text-sm", children: booking.notes })] }), isMoving && ((0, jsx_runtime_1.jsx)(SlotPicker, { slots: slots, isLoading: isLoading, chosen: chosen, onChoose: setChosen, timeZone: timeZone })), error && (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-danger", children: error }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap justify-end gap-2", children: isMoving ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "secondary", onPress: () => setMoving(false), isDisabled: isPending, children: "Back" }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "primary", isDisabled: !chosen || isPending, onPress: async () => {
+                                                    clearError();
+                                                    const moved = await rescheduleBooking({
+                                                        bookingId: booking.id,
+                                                        startAt: chosen,
+                                                    });
+                                                    if (moved)
+                                                        onChanged();
+                                                }, children: isPending ? "Moving…" : "Move appointment" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Button, { variant: "danger", isDisabled: isPending, onPress: async () => {
+                                                    clearError();
+                                                    const cancelled = await cancelBooking({ bookingId: booking.id });
+                                                    if (cancelled)
+                                                        onChanged();
+                                                }, children: isPending ? "Cancelling…" : "Cancel appointment" }), (0, jsx_runtime_1.jsx)(react_1.Button, { variant: "secondary", onPress: () => setMoving(true), children: "Reschedule" })] })) })] })] }) }) }) }));
+}
+function SlotPicker({ slots, isLoading, chosen, onChoose, timeZone, }) {
+    const byDay = (0, react_2.useMemo)(() => {
+        const groups = new Map();
+        const dayFormat = new Intl.DateTimeFormat("en-IN", {
+            timeZone,
+            weekday: "short",
+            day: "numeric",
+            month: "short",
+        });
+        for (const slot of slots) {
+            const label = dayFormat.format(new Date(slot.startAt));
+            groups.set(label, [...(groups.get(label) ?? []), slot]);
+        }
+        return [...groups.entries()];
+    }, [slots, timeZone]);
+    if (isLoading)
+        return (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: "Finding free times\u2026" });
+    if (byDay.length === 0) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-lg border border-dashed border-separator p-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CalendarX2, { className: "size-4 text-muted", "aria-hidden": true }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: "Nothing free in the next two weeks." })] }));
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex max-h-56 flex-col gap-3 overflow-y-auto", children: byDay.map(([day, daySlots]) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-1.5", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-muted", children: day }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-1.5 sm:grid-cols-4", children: daySlots.map((slot) => ((0, jsx_runtime_1.jsx)(react_1.Button, { size: "sm", className: "w-full", variant: slot.startAt === chosen ? "primary" : "secondary", onPress: () => onChoose(slot.startAt), children: shortTime(new Date(slot.startAt), timeZone) }, slot.startAt))) })] }, day))) }));
+}
+function shortTime(instant, timeZone) {
+    return new Intl.DateTimeFormat("en-IN", {
+        timeZone,
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+    }).format(instant);
+}
+function longLabel(instant, timeZone) {
+    return new Intl.DateTimeFormat("en-IN", {
+        timeZone,
+        weekday: "long",
+        day: "numeric",
+        month: "long",
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+    }).format(instant);
+}

package/dist/cjs/client/components/booking-grid.js

@@ -0,0 +1,206 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zonedInstant = zonedInstant;
+exports.dayColumns = dayColumns;
+exports.dayStartInstant = dayStartInstant;
+exports.layoutBookings = layoutBookings;
+exports.hourMarks = hourMarks;
+/**
+ * An instant, as the local day and minute it lands on in `timeZone`.
+ *
+ * Built from `formatToParts` rather than by adding a fixed offset. An offset
+ * is only correct until a DST boundary, and "add 5.5 hours" is wrong the
+ * moment the same code is pointed at a zone that observes one - which is
+ * exactly the kind of bug that appears twice a year and never in a test.
+ */
+function zonedInstant(instant, timeZone) {
+    const parts = partsFormatter(timeZone).formatToParts(instant);
+    const read = (type) => parts.find((part) => part.type === type)?.value ?? "00";
+    // `hourCycle: "h23"` so midnight is 00 rather than 24 - `hour12: false`
+    // alone still yields 24 in some engines, and a 24 would push midnight onto
+    // the wrong day.
+    return {
+        dateKey: `${read("year")}-${read("month")}-${read("day")}`,
+        minutes: Number(read("hour")) * 60 + Number(read("minute")),
+    };
+}
+const formatterCache = new Map();
+function partsFormatter(timeZone) {
+    let formatter = formatterCache.get(timeZone);
+    if (!formatter) {
+        // Cached because a grid calls this once per booking per render, and
+        // constructing an `Intl.DateTimeFormat` is the expensive part by a wide
+        // margin.
+        formatter = new Intl.DateTimeFormat("en-CA", {
+            timeZone,
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            hourCycle: "h23",
+        });
+        formatterCache.set(timeZone, formatter);
+    }
+    return formatter;
+}
+/**
+ * `count` consecutive days starting at the local day `anchor` falls on.
+ *
+ * Days are stepped by adding 24 hours and re-reading the zone rather than by
+ * incrementing a date field, so a day that is 23 or 25 hours long still
+ * produces the right sequence of `dateKey`s - the midday anchor is what keeps
+ * a DST shift from landing the step on the previous or next day.
+ */
+function dayColumns(anchor, timeZone, count, now) {
+    const todayKey = zonedInstant(now, timeZone).dateKey;
+    const columns = [];
+    for (let index = 0; index < count; index += 1) {
+        const probe = new Date(anchor.getTime() + index * 24 * 60 * 60_000);
+        const { dateKey } = zonedInstant(probe, timeZone);
+        const startsAt = dayStartInstant(dateKey, timeZone);
+        columns.push({
+            dateKey,
+            label: new Intl.DateTimeFormat("en-IN", {
+                timeZone,
+                weekday: "short",
+                day: "numeric",
+            }).format(startsAt),
+            monthLabel: new Intl.DateTimeFormat("en-IN", { timeZone, month: "short" }).format(startsAt),
+            startsAt,
+            isToday: dateKey === todayKey,
+        });
+    }
+    return columns;
+}
+/**
+ * Local midnight of `dateKey` in `timeZone`, as an instant.
+ *
+ * Solved by probing rather than by arithmetic: guess UTC midnight, read what
+ * local time that actually is, and subtract the difference. One correction is
+ * always enough because a zone's offset cannot change within the few hours the
+ * correction spans - and unlike a fixed-offset formula it is right across DST
+ * and for the half-hour zones (`Asia/Kolkata`, `Australia/Adelaide`) that a
+ * naive implementation quietly breaks on.
+ */
+function dayStartInstant(dateKey, timeZone) {
+    const utcGuess = new Date(`${dateKey}T00:00:00.000Z`);
+    const { dateKey: landedOn, minutes } = zonedInstant(utcGuess, timeZone);
+    // Whether the guess landed on the day before, the day itself, or the day
+    // after decides which way to correct.
+    const dayDelta = compareDateKeys(landedOn, dateKey);
+    return new Date(utcGuess.getTime() - (minutes + dayDelta * 1440) * 60_000);
+}
+function compareDateKeys(a, b) {
+    if (a === b)
+        return 0;
+    return a < b ? -1 : 1;
+}
+/**
+ * A fifteen-minute appointment on a twelve-hour grid is two percent tall -
+ * unreadable and unclickable. Short appointments are drawn at a floor and
+ * allowed to overhang, which is what every calendar does and what makes a
+ * back-to-back pair still look like two things.
+ */
+const MIN_VISIBLE_FRACTION = 0.02;
+/**
+ * Places bookings on the grid, side by side where they collide.
+ *
+ * Overlap handling is the part worth stating. Two appointments at the same
+ * time are not an error - a workspace with two hosts has them constantly - and
+ * stacking them would hide one entirely. So overlapping bookings are grouped
+ * into *clusters* and each cluster is split into equal columns. The cluster is
+ * built transitively: A overlapping B and B overlapping C puts all three in one
+ * cluster even when A and C do not touch, because anything else lets two of
+ * them land on the same column.
+ */
+function layoutBookings(bookings, timeZone, window) {
+    const span = window.endMinute - window.startMinute;
+    if (span <= 0)
+        return [];
+    const byDay = new Map();
+    for (const booking of bookings) {
+        const start = zonedInstant(new Date(booking.startAt), timeZone);
+        const end = zonedInstant(new Date(booking.endAt), timeZone);
+        // An appointment that crosses local midnight is clamped to the end of the
+        // day it started on. Splitting it across two columns would be more correct
+        // and is not worth the complexity for a booking grid, where the longest
+        // event type is capped at eight hours server-side.
+        const endMinutes = end.dateKey === start.dateKey ? end.minutes : 1440;
+        const entries = byDay.get(start.dateKey) ?? [];
+        entries.push({ booking, start: start.minutes, end: Math.max(endMinutes, start.minutes + 1) });
+        byDay.set(start.dateKey, entries);
+    }
+    const positioned = [];
+    for (const [dateKey, entries] of byDay) {
+        entries.sort((a, b) => a.start - b.start || a.end - b.end);
+        for (const cluster of clusterOverlapping(entries)) {
+            cluster.forEach((entry, column) => {
+                const clampedStart = Math.max(entry.start, window.startMinute);
+                const clampedEnd = Math.min(entry.end, window.endMinute);
+                positioned.push({
+                    booking: entry.booking,
+                    dateKey,
+                    top: (clampedStart - window.startMinute) / span,
+                    height: Math.max((clampedEnd - clampedStart) / span, MIN_VISIBLE_FRACTION),
+                    column,
+                    columns: cluster.length,
+                    clipped: entry.start < window.startMinute || entry.end > window.endMinute,
+                });
+            });
+        }
+    }
+    return positioned;
+}
+/**
+ * Transitive overlap grouping - see `layoutBookings`.
+ *
+ * Entries arrive sorted by start. A cluster stays open while the next entry
+ * begins before the *furthest* end seen so far, not before the previous
+ * entry's end: a long appointment that swallows several short ones has to keep
+ * the whole run together.
+ */
+function clusterOverlapping(entries) {
+    const clusters = [];
+    let current = [];
+    let clusterEnd = -Infinity;
+    for (const entry of entries) {
+        if (current.length > 0 && entry.start >= clusterEnd) {
+            clusters.push(current);
+            current = [];
+            clusterEnd = -Infinity;
+        }
+        current.push(entry);
+        clusterEnd = Math.max(clusterEnd, entry.end);
+    }
+    if (current.length > 0)
+        clusters.push(current);
+    return clusters;
+}
+/**
+ * The hour labels down the left edge, inclusive of both ends.
+ *
+ * Takes no timezone, deliberately: these label *wall-clock hours on the grid*,
+ * not instants. The grid is already drawn in the business's zone, so "10 am"
+ * means the business's ten - running the label through a zone conversion would
+ * shift it away from the row it sits on.
+ */
+function hourMarks(window) {
+    const marks = [];
+    const formatter = new Intl.DateTimeFormat("en-IN", {
+        timeZone: "UTC",
+        hour: "numeric",
+        hour12: true,
+    });
+    const firstHour = Math.ceil(window.startMinute / 60);
+    const lastHour = Math.floor(window.endMinute / 60);
+    for (let hour = firstHour; hour <= lastHour; hour += 1) {
+        marks.push({
+            minute: hour * 60,
+            // A synthetic UTC instant formatted in UTC - the round trip exists only
+            // to borrow `Intl`'s "10 am" / "12 pm" spelling, not to convert anything.
+            label: formatter.format(new Date(Date.UTC(2000, 0, 1, hour % 24))),
+        });
+    }
+    return marks;
+}