@cosmoops/connect-sdk 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -3,6 +3,130 @@
 `@cosmoops/connect-sdk` follows semver, with the 0.x convention that **minor
 versions may carry breaking changes** and patch versions never do.
 
+## 0.19.0
+
+### Added
+
+- **`connect.contacts`** - who a workspace already knows how to reach.
+
+  ```ts
+  const contact = await connect.contacts.lookupByPhone({ workspaceId, phone });
+  if (contact) {
+    // A caller this workspace has met before.
+  }
+  ```
+
+  `lookupByPhone` is one point read, cheap enough for a screen pop on every
+  inbound call, and resolves to `null` for a first-time caller - the ordinary
+  case, not an error. `get(contactId, { workspaceId })` reads the record behind
+  an id you already hold. Needs a key scoped to `contacts:read` and a live
+  subscription in the workspace.
+
+  **This is the telephony identity, not a CRM record.** A contact is keyed by
+  `primaryPhone` - the one fact every inbound call carries - and it is written
+  automatically: a voice agent creates one on the first call from a new number
+  and fills fields in as it learns them. `source` tells you which kind you are
+  holding (`call` means an agent guessed and nobody has confirmed), and
+  `phones[].verified` tells you the same about a single value.
+
+  **Reference it, do not copy it.** If your application keeps its own customer
+  records, store this contact's `id` on yours. Two writable copies of a
+  person's name with no single owner drift, and Connect's is the one an agent
+  keeps updating from calls. Storing the id also makes `Booking.contactId` an
+  **exact** join - so "which of my records is this appointment for" is a lookup
+  rather than a phone-number match, including for appointments a voice agent
+  booked where nobody ever chose one of your records.
+
+  Read-only, deliberately. Writing into a store with a per-field provenance
+  chain means declaring where your facts came from and how they merge with a
+  human's; nothing needs that yet.
+
+- New exported types: `ConnectContact`, `ContactChannelValue`, `ContactSource`,
+  and `ContactsResource` / `LookupContactInput` from
+  `@cosmoops/connect-sdk/server`.
+
+## 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,8 @@ try {
 | `entitlements` | `getReadiness` · `getSubscription` · `hasFeature` |
 | `billing` | `listPlans` · `getAddonUsage` · `consumeAddon` |
 | `drive` | `upload` · `getFileUrl` · `getPreviewUrl` |
-| `scheduling` | `listEventTypes` · `findSlots` · `listBookings` · `createBooking` · `cancelBooking` |
+| `contacts` | `lookupByPhone` · `get` |
+| `scheduling` | `listEventTypes` · `findSlots` · `listBookings` · `createBooking` · `rescheduleBooking` · `cancelBooking` |
 | `ai` | `chat` · `extract` |
 | `otp` | `send` · `verify` |
 | `logs` | `write` |
@@ -350,6 +351,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);
+}