@cosmoops/connect-sdk 0.17.0 → 0.18.0

package/dist/cjs/client/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.normalizePath = exports.flattenNav = exports.normalizeNav = exports.useActivePath = exports.ConnectSideNav = exports.ConnectSidebarNav = exports.RAIL_EXPANDED = exports.RAIL_COLLAPSED = exports.sidebarRowClass = exports.useConnectShell = exports.ConnectShellProvider = exports.ConnectSidebarRow = exports.ConnectSidebarFooter = exports.ConnectSidebarBody = exports.ConnectSidebarHeader = exports.ConnectSidebar = exports.AppShell = exports.ConnectAccountSessions = exports.ConnectSignOutButton = exports.ConnectHomeButton = exports.ConnectProfileButton = exports.ConnectInvoicesButton = exports.ConnectManageSubscriptionButton = exports.ConnectUserMenu = exports.ConnectProfileModal = exports.ConnectUserButton = exports.ConnectRegisterButton = exports.ConnectLoginButton = exports.ConnectLogo = exports.ConnectMark = exports.ConnectGrievanceNotice = exports.isConnectError = exports.ConnectError = exports.normalizePlanFeatures = exports.blockingBlockers = exports.CONNECT_APP_URL = exports.useConnectResource = exports.useConnectIntegrations = exports.useConnectSessions = exports.useConnectAddonUsage = exports.useConnectCompanyProfile = exports.useConnectApps = exports.useConnectPlans = exports.useConnectEntitlements = exports.useConnectPlatformAccess = exports.useConnectAudience = exports.useConnectWorkspaceType = exports.useConnectUser = exports.useConnect = exports.ConnectProvider = void 0;
 exports.annualSaving = exports.resolveAction = exports.monthlyOf = exports.formatPrice = exports.buildCheckoutUrl = exports.useConnectCheckout = exports.ConnectFilterTabs = exports.ConnectCursorPagination = exports.ConnectConfirmDialog = exports.ConnectLinkButton = exports.ConnectPlansPage = exports.ConnectUsageMeter = exports.ConnectPlatformGate = exports.ConnectWorkspaceTypeGate = exports.useConnectFeature = exports.ConnectFeatureGate = exports.useConnectAccessGate = exports.ConnectAccessGate = exports.ConnectReadinessGate = exports.ConnectReadinessBanner = exports.resolveSubscriptionState = exports.ConnectSeatUsage = exports.ConnectTrialBanner = exports.ConnectSubscriptionCard = exports.ConnectNoSubscriptionCard = exports.ConnectSubscriptionGate = exports.ConnectSubscribeDialog = exports.ConnectPlans = exports.ConnectIntegrationsModal = exports.AI_TONE_DOT = exports.AI_TONE_CHIP = exports.AI_EMPTY_VALUE = exports.aiStatusTone = exports.isNumericAiFormat = exports.formatAiValue = exports.AiSources = exports.AiSteps = exports.AiDetails = exports.AiTimeline = exports.AiMetrics = exports.AiChart = exports.AiTable = exports.ConnectAskAi = exports.ConnectAppsGrid = exports.isLinkableConnectScreen = exports.matchConnectScreen = exports.filterNavForAudience = exports.gateExemptPaths = exports.isNavItemActive = exports.resolveActivePath = void 0;
-exports.useConnectWorkspaceMembers = exports.useConnectWorkspaces = exports.ConnectWorkspaceSwitcher = exports.resolvePlanGroup = exports.groupPlansByTier = exports.ACTION_LABEL = exports.discountLabel = void 0;
+exports.zonedInstant = exports.dayColumns = exports.layoutBookings = exports.useBookingActions = exports.useBookings = exports.useAvailableSlots = exports.useBookableEventTypes = exports.ConnectBookingDetail = exports.ConnectBookingDialog = exports.ConnectBookingCalendar = exports.useConnectWorkspaceMembers = exports.useConnectWorkspaces = exports.ConnectWorkspaceSwitcher = exports.resolvePlanGroup = exports.groupPlansByTier = exports.ACTION_LABEL = exports.discountLabel = void 0;
 /**
  * Browser half of `@cosmoops/connect-sdk` - React components and hooks.
  *
@@ -223,3 +223,17 @@ Object.defineProperty(exports, "ConnectWorkspaceSwitcher", { enumerable: true, g
 var provider_js_2 = require("./provider.js");
 Object.defineProperty(exports, "useConnectWorkspaces", { enumerable: true, get: function () { return provider_js_2.useConnectWorkspaces; } });
 Object.defineProperty(exports, "useConnectWorkspaceMembers", { enumerable: true, get: function () { return provider_js_2.useConnectWorkspaceMembers; } });
+var booking_calendar_js_1 = require("./components/booking-calendar.js");
+Object.defineProperty(exports, "ConnectBookingCalendar", { enumerable: true, get: function () { return booking_calendar_js_1.ConnectBookingCalendar; } });
+var booking_dialogs_js_1 = require("./components/booking-dialogs.js");
+Object.defineProperty(exports, "ConnectBookingDialog", { enumerable: true, get: function () { return booking_dialogs_js_1.ConnectBookingDialog; } });
+Object.defineProperty(exports, "ConnectBookingDetail", { enumerable: true, get: function () { return booking_dialogs_js_1.ConnectBookingDetail; } });
+var use_scheduling_js_1 = require("./use-scheduling.js");
+Object.defineProperty(exports, "useBookableEventTypes", { enumerable: true, get: function () { return use_scheduling_js_1.useBookableEventTypes; } });
+Object.defineProperty(exports, "useAvailableSlots", { enumerable: true, get: function () { return use_scheduling_js_1.useAvailableSlots; } });
+Object.defineProperty(exports, "useBookings", { enumerable: true, get: function () { return use_scheduling_js_1.useBookings; } });
+Object.defineProperty(exports, "useBookingActions", { enumerable: true, get: function () { return use_scheduling_js_1.useBookingActions; } });
+var booking_grid_js_1 = require("./components/booking-grid.js");
+Object.defineProperty(exports, "layoutBookings", { enumerable: true, get: function () { return booking_grid_js_1.layoutBookings; } });
+Object.defineProperty(exports, "dayColumns", { enumerable: true, get: function () { return booking_grid_js_1.dayColumns; } });
+Object.defineProperty(exports, "zonedInstant", { enumerable: true, get: function () { return booking_grid_js_1.zonedInstant; } });

package/dist/cjs/client/use-scheduling.js

@@ -0,0 +1,113 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBookableEventTypes = useBookableEventTypes;
+exports.useAvailableSlots = useAvailableSlots;
+exports.useBookings = useBookings;
+exports.useBookingActions = useBookingActions;
+const react_1 = require("react");
+const provider_js_1 = require("./provider.js");
+/**
+ * The bridge's scheduling surface, as hooks.
+ *
+ * Every path here is one of the six the bridge exposes, and every one of them
+ * is resolved *for the signed-in member* - Connect takes the workspace from
+ * their session and checks their own `calendar:read` / `calendar:manage`.
+ * Nothing in this file names a workspace, and nothing should: a browser that
+ * can name a tenant is a browser that can read someone else's diary.
+ */
+/** What this workspace offers as bookable. Active types only. */
+function useBookableEventTypes() {
+    const { data, isLoading, error } = (0, provider_js_1.useConnectResource)("/scheduling/event-types");
+    return { eventTypes: data?.eventTypes ?? [], isLoading, error };
+}
+/**
+ * Free times for one appointment type.
+ *
+ * **Deliberately re-read rather than cached across a session.** A slot list is
+ * a snapshot of contention: anyone else on that calendar - a colleague, a
+ * voice agent mid-call, someone on the public booking link - can take one
+ * between the read and the click. Showing a stale one is how two people are
+ * offered the same minute. The booking call re-checks inside a transaction
+ * anyway, so a stale list costs a refusal rather than a double booking; this
+ * just means the refusal is rare.
+ */
+function useAvailableSlots(query) {
+    const path = query
+        ? `/scheduling/slots?${new URLSearchParams({
+            eventTypeId: query.eventTypeId,
+            from: query.from.toISOString(),
+            to: query.to.toISOString(),
+            ...(query.excludeBookingId ? { excludeBookingId: query.excludeBookingId } : {}),
+        }).toString()}`
+        : null;
+    // `useConnectResource` needs a path; an empty one never resolves, so the
+    // hook is called unconditionally (rules of hooks) and simply idles.
+    const { data, isLoading, error, refetch } = (0, provider_js_1.useConnectResource)(path ?? "");
+    return {
+        slots: path ? (data?.slots ?? []) : [],
+        timezone: data?.timezone ?? null,
+        durationMinutes: data?.durationMinutes ?? null,
+        isLoading: path ? isLoading : false,
+        error: path ? error : null,
+        refetch,
+    };
+}
+/** One page of the diary, ascending - a forward view, not a history. */
+function useBookings(query) {
+    const path = (0, react_1.useMemo)(() => `/scheduling/bookings?${new URLSearchParams({
+        from: query.from.toISOString(),
+        to: query.to.toISOString(),
+        order: "asc",
+        status: "confirmed",
+        limit: String(query.limit ?? 100),
+        ...(query.hostMemberId ? { hostMemberId: query.hostMemberId } : {}),
+    }).toString()}`, [query.from, query.to, query.hostMemberId, query.limit]);
+    const { data, isLoading, error, refetch } = (0, provider_js_1.useConnectResource)(path);
+    return {
+        bookings: data?.bookings ?? [],
+        hasMore: data?.hasMore ?? false,
+        isLoading,
+        error,
+        path,
+        refetch,
+    };
+}
+/**
+ * Book, move and cancel.
+ *
+ * **None of these is optimistic**, and that is not an oversight. Whether a
+ * slot is still free is a question only the server can answer, inside the
+ * transaction that decides it - two people can be holding the same minute
+ * right now. Painting a booking as made and withdrawing it is exactly the lie
+ * the two-phase hold exists to prevent.
+ */
+function useBookingActions() {
+    const { mutateResource } = (0, provider_js_1.useConnect)();
+    const [isPending, setPending] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const run = (0, react_1.useCallback)(async (path, body) => {
+        setPending(true);
+        setError(null);
+        try {
+            return await mutateResource(path, body);
+        }
+        catch (cause) {
+            // The server writes these as sentences - "that time was just taken" -
+            // precisely so they can be shown rather than mapped to a code.
+            setError(cause instanceof Error ? cause.message : "Something went wrong.");
+            return null;
+        }
+        finally {
+            setPending(false);
+        }
+    }, [mutateResource]);
+    return {
+        isPending,
+        error,
+        clearError: () => setError(null),
+        createBooking: (input) => run("/scheduling/bookings", input),
+        rescheduleBooking: (input) => run("/scheduling/bookings/reschedule", input).then((result) => result?.booking ?? null),
+        cancelBooking: (input) => run("/scheduling/bookings/cancel", input),
+    };
+}

package/dist/cjs/server/client.js

@@ -146,4 +146,4 @@ class ConnectClient {
 }
 exports.ConnectClient = ConnectClient;
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-exports.SDK_VERSION = "0.17.0";
+exports.SDK_VERSION = "0.18.0";

package/dist/cjs/server/handler.js

@@ -415,6 +415,142 @@ function createConnectHandler(options) {
             await session.write?.(request, response, result.sessionToken);
             return response;
         },
+        /*
+         * Scheduling - the workspace's own calendar, in a browser.
+         *
+         * Every one of these forwards the caller's session token, which is what
+         * makes them safe to expose: Connect derives the workspace from that token
+         * and checks the member's own `calendar:read` / `calendar:manage`. The
+         * browser names no tenant and the partner's key does not, by itself,
+         * authorize a write - without that second half, shipping a booking
+         * component would let every end user of every partner app take slots on a
+         * real business calendar.
+         *
+         * `workspaceId` is still passed because the resource requires it, and is
+         * still ignored by Connect whenever a token is present. `requireWorkspace`
+         * supplies the session's own, so the two can never disagree.
+         */
+        "GET /scheduling/event-types": async (request) => {
+            const { workspaceId } = await requireWorkspace(request);
+            const asUser = await requireToken(request);
+            return json({ eventTypes: await client.scheduling.listEventTypes(workspaceId, { asUser }) });
+        },
+        "GET /scheduling/slots": async (request) => {
+            const { workspaceId } = await requireWorkspace(request);
+            const asUser = await requireToken(request);
+            const url = new URL(request.url);
+            const eventTypeId = url.searchParams.get("eventTypeId");
+            const from = url.searchParams.get("from");
+            const to = url.searchParams.get("to");
+            if (!eventTypeId || !from || !to) {
+                throw new errors_js_1.ConnectError({
+                    status: 400,
+                    code: "validation_error",
+                    message: "eventTypeId, from and to are required",
+                    endpoint: "/scheduling/slots",
+                });
+            }
+            return json(await client.scheduling.findSlots({
+                workspaceId,
+                eventTypeId,
+                from,
+                to,
+                // Set when offering times to move an existing appointment to, or the
+                // booking blocks its own replacement and the list comes back empty.
+                excludeBookingId: url.searchParams.get("excludeBookingId") ?? undefined,
+                asUser,
+            }));
+        },
+        "GET /scheduling/bookings": async (request) => {
+            const { workspaceId } = await requireWorkspace(request);
+            const asUser = await requireToken(request);
+            const url = new URL(request.url);
+            const limit = Number(url.searchParams.get("limit") ?? 25);
+            return json(await client.scheduling.listBookings({
+                workspaceId,
+                status: url.searchParams.get("status") ?? undefined,
+                hostMemberId: url.searchParams.get("hostMemberId") ?? undefined,
+                from: url.searchParams.get("from") ?? undefined,
+                to: url.searchParams.get("to") ?? undefined,
+                order: url.searchParams.get("order") === "asc" ? "asc" : "desc",
+                cursor: url.searchParams.get("cursor") ?? undefined,
+                limit: Number.isInteger(limit) && limit >= 1 && limit <= 100 ? limit : 25,
+                asUser,
+            }));
+        },
+        "POST /scheduling/bookings": async (request) => {
+            const { workspaceId } = await requireWorkspace(request);
+            const asUser = await requireToken(request);
+            const body = (await request.json().catch(() => null));
+            if (typeof body?.eventTypeId !== "string" ||
+                typeof body.startAt !== "string" ||
+                typeof body.attendee?.name !== "string" ||
+                typeof body.attendee?.phone !== "string") {
+                throw new errors_js_1.ConnectError({
+                    status: 400,
+                    code: "validation_error",
+                    message: "eventTypeId, startAt and an attendee name and phone are required",
+                    endpoint: "/scheduling/bookings",
+                });
+            }
+            return json(await client.scheduling.createBooking({
+                workspaceId,
+                eventTypeId: body.eventTypeId,
+                startAt: body.startAt,
+                attendee: {
+                    name: body.attendee.name,
+                    phone: body.attendee.phone,
+                    email: typeof body.attendee.email === "string" ? body.attendee.email : null,
+                },
+                notes: typeof body.notes === "string" ? body.notes : null,
+                asUser,
+            }));
+        },
+        /*
+         * Reschedule and cancel take the booking id in the body rather than the
+         * path, matching `POST /sessions/revoke`. The bridge's route table is
+         * exact-match on `METHOD /path`, so a path parameter would mean a second
+         * matching strategy for two routes.
+         */
+        "POST /scheduling/bookings/reschedule": async (request) => {
+            const { workspaceId } = await requireWorkspace(request);
+            const asUser = await requireToken(request);
+            const body = (await request.json().catch(() => null));
+            if (typeof body?.bookingId !== "string" || typeof body.startAt !== "string") {
+                throw new errors_js_1.ConnectError({
+                    status: 400,
+                    code: "validation_error",
+                    message: "bookingId and startAt are required",
+                    endpoint: "/scheduling/bookings/reschedule",
+                });
+            }
+            return json(await client.scheduling.rescheduleBooking({
+                workspaceId,
+                bookingId: body.bookingId,
+                startAt: body.startAt,
+                notes: typeof body.notes === "string" ? body.notes : undefined,
+                asUser,
+            }));
+        },
+        "POST /scheduling/bookings/cancel": async (request) => {
+            const { workspaceId } = await requireWorkspace(request);
+            const asUser = await requireToken(request);
+            const body = (await request.json().catch(() => null));
+            if (typeof body?.bookingId !== "string") {
+                throw new errors_js_1.ConnectError({
+                    status: 400,
+                    code: "validation_error",
+                    message: "bookingId is required",
+                    endpoint: "/scheduling/bookings/cancel",
+                });
+            }
+            return json(await client.scheduling.cancelBooking({
+                workspaceId,
+                bookingId: body.bookingId,
+                reason: typeof body.reason === "string" ? body.reason : null,
+                asUser,
+            }));
+        },
         "GET /integrations": async (request) => {
             const { workspaceId } = await requireWorkspace(request);
             return json({ toolkits: await client.integrations.list(workspaceId) });

package/dist/cjs/server/resources/scheduling.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SchedulingResource = void 0;
 const http_js_1 = require("../http.js");
+const acting_as_js_1 = require("./acting-as.js");
 /**
  * A subscribing workspace's own calendar.
  *
@@ -21,11 +22,12 @@ class SchedulingResource {
         this.transport = transport;
     }
     /** What this workspace offers as bookable. Active appointment types only. */
-    async listEventTypes(workspaceId) {
+    async listEventTypes(workspaceId, options = {}) {
         const result = await (0, http_js_1.request)(this.transport, {
             method: "GET",
             path: "/scheduling/event-types",
             query: { workspaceId },
+            headers: (0, acting_as_js_1.actingAs)(options.asUser),
         });
         // `?? []` for the same reason `apps.list` has it - a collection every
         // caller immediately maps, and a body without the key would hand them
@@ -54,7 +56,9 @@ class SchedulingResource {
                 eventTypeId: input.eventTypeId,
                 from: toInstant(input.from),
                 to: toInstant(input.to),
+                excludeBookingId: input.excludeBookingId,
             },
+            headers: (0, acting_as_js_1.actingAs)(input.asUser),
         });
     }
     /** One page of the workspace's diary. */
@@ -72,6 +76,7 @@ class SchedulingResource {
                 cursor: input.cursor,
                 limit: input.limit === undefined ? undefined : String(input.limit),
             },
+            headers: (0, acting_as_js_1.actingAs)(input.asUser),
         });
     }
     /**
@@ -93,6 +98,31 @@ class SchedulingResource {
                 attendee: input.attendee,
                 notes: input.notes ?? null,
             },
+            headers: (0, acting_as_js_1.actingAs)(input.asUser),
+        });
+    }
+    /**
+     * Moves an appointment to a different time.
+     *
+     * **The original is retired, not edited.** It stays on the diary as
+     * `rescheduled` with `rescheduledToId` pointing at the replacement, and both
+     * come back here - so a booking id you cached still resolves, and still says
+     * where the appointment went.
+     *
+     * A refused move changes nothing: the new slot is claimed before the old one
+     * is released, so a `conflict` leaves the customer with the appointment they
+     * already had. Re-read the slots (with `excludeBookingId`) and offer another.
+     */
+    rescheduleBooking(input) {
+        return (0, http_js_1.request)(this.transport, {
+            method: "POST",
+            path: `/scheduling/bookings/${encodeURIComponent(input.bookingId)}/reschedule`,
+            json: {
+                workspaceId: input.workspaceId,
+                startAt: toInstant(input.startAt),
+                notes: input.notes ?? null,
+            },
+            headers: (0, acting_as_js_1.actingAs)(input.asUser),
         });
     }
     /**
@@ -107,6 +137,7 @@ class SchedulingResource {
             method: "POST",
             path: `/scheduling/bookings/${encodeURIComponent(input.bookingId)}/cancel`,
             json: { workspaceId: input.workspaceId, reason: input.reason ?? null },
+            headers: (0, acting_as_js_1.actingAs)(input.asUser),
         });
     }
 }

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

@@ -0,0 +1,167 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Card, Chip, Skeleton } from "@heroui/react";
+import { CalendarDays, ChevronLeft, ChevronRight, Phone, Video } from "lucide-react";
+import { useMemo, useState } from "react";
+import { ConnectEmptyState } from "../../ui/empty-state.js";
+import { useBookableEventTypes, useBookings, } from "../use-scheduling.js";
+import { dayColumns, dayStartInstant, hourMarks, layoutBookings, zonedInstant, } from "./booking-grid.js";
+import { ConnectBookingDetail, ConnectBookingDialog } from "./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: Phone,
+    address: CalendarDays,
+    link: 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`.
+ */
+export function ConnectBookingCalendar({ timeZone, hostMemberId, window: visibleWindow = DEFAULT_WINDOW, canBook = true, className, }) {
+    const zone = timeZone ?? hostTimeZone();
+    const [weekAnchor, setWeekAnchor] = useState(() => startOfWeek(new Date(), zone));
+    const [selected, setSelected] = useState(null);
+    const [booking, setBooking] = useState(null);
+    const now = new Date();
+    const columns = useMemo(() => 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 = useMemo(() => ({
+        from: columns[0]?.startsAt ?? weekAnchor,
+        to: new Date((columns.at(-1)?.startsAt.getTime() ?? weekAnchor.getTime()) + 24 * 60 * 60_000),
+    }), [columns, weekAnchor]);
+    const { eventTypes } = useBookableEventTypes();
+    const { bookings, isLoading, error, refetch } = useBookings({
+        from: range.from,
+        to: range.to,
+        hostMemberId,
+    });
+    const positioned = useMemo(() => layoutBookings(bookings, zone, visibleWindow), [bookings, zone, visibleWindow]);
+    const marks = useMemo(() => hourMarks(visibleWindow), [visibleWindow]);
+    const shiftWeek = (weeks) => setWeekAnchor((anchor) => new Date(anchor.getTime() + weeks * 7 * 24 * 60 * 60_000));
+    const eventTypeById = useMemo(() => new Map(eventTypes.map((eventType) => [eventType.id, eventType])), [eventTypes]);
+    return (_jsxs("div", { className: `flex flex-col gap-4 ${className ?? ""}`, children: [_jsxs("header", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Previous week", onPress: () => shiftWeek(-1), children: _jsx(ChevronLeft, { className: "size-4", "aria-hidden": true }) }), _jsx(Button, { size: "sm", variant: "secondary", onPress: () => setWeekAnchor(startOfWeek(new Date(), zone)), children: "Today" }), _jsx(Button, { isIconOnly: true, size: "sm", variant: "tertiary", "aria-label": "Next week", onPress: () => shiftWeek(1), children: _jsx(ChevronRight, { className: "size-4", "aria-hidden": true }) }), _jsx("p", { className: "ml-2 text-sm font-medium", children: weekLabel(columns, zone) })] }), canBook && eventTypes.length > 0 && (_jsx(Button, { size: "sm", variant: "primary", onPress: () => setBooking({ startAt: nextHour(now) }), children: "New appointment" }))] }), error && _jsx("p", { className: "text-sm text-danger", children: error }), isLoading ? (_jsx(Skeleton, { className: "h-96 w-full rounded-lg" })) : (_jsxs(_Fragment, { children: [_jsx(Card, { className: "hidden overflow-hidden sm:block", children: _jsx(WeekGrid, { columns: columns, marks: marks, window: visibleWindow, positioned: positioned, eventTypeById: eventTypeById, zone: zone, onSelect: setSelected, onPickEmpty: canBook ? (startAt) => setBooking({ startAt }) : undefined }) }), _jsx("div", { className: "sm:hidden", children: _jsx(AgendaView, { columns: columns, bookings: bookings, eventTypeById: eventTypeById, zone: zone, onSelect: setSelected }) })] })), booking && (_jsx(ConnectBookingDialog, { isOpen: true, onOpenChange: (open) => !open && setBooking(null), eventTypes: eventTypes, initialStartAt: booking.startAt, timeZone: zone, onBooked: () => {
+                    setBooking(null);
+                    refetch();
+                } })), selected && (_jsx(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 (_jsxs("div", { className: "grid grid-cols-[3rem_repeat(7,minmax(0,1fr))]", children: [_jsx("div", { className: "border-b border-separator" }), columns.map((column) => (_jsx("div", { className: `border-b border-l border-separator px-2 py-2 text-center ${column.isToday ? "bg-accent/5" : ""}`, children: _jsx("p", { className: `text-xs font-medium ${column.isToday ? "text-accent" : ""}`, children: column.label }) }, column.dateKey))), _jsx("div", { className: "relative", style: { height: `${(span / 60) * 3}rem` }, children: marks.map((mark) => (_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) => (_jsxs("div", { className: `relative border-l border-separator ${column.isToday ? "bg-accent/5" : ""}`, style: { height: `${(span / 60) * 3}rem` }, children: [marks.map((mark) => (_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) => (_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 (_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: [_jsx("span", { className: "block truncate text-[0.625rem] font-medium text-accent", children: timeLabel(new Date(entry.booking.startAt), zone) }), _jsx("span", { className: "block truncate text-[0.625rem]", children: entry.booking.attendee.name }), eventType && (_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 = useMemo(() => {
+        const map = new Map();
+        for (const booking of bookings) {
+            const { dateKey } = 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 (_jsx(ConnectEmptyState, { variant: "dashed", icon: _jsx(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 (_jsx("div", { className: "flex flex-col gap-4", children: populated.map((column) => (_jsxs("section", { className: "flex flex-col gap-2", children: [_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] : CalendarDays;
+                    return (_jsx("button", { type: "button", onClick: () => onSelect(booking), children: _jsx(Card, { className: "transition-colors hover:bg-surface", children: _jsxs(Card.Content, { className: "flex items-center gap-3 py-3 text-left", children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted", "aria-hidden": true }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: booking.attendee.name }), _jsxs("p", { className: "truncate text-xs text-muted", children: [timeLabel(new Date(booking.startAt), zone), eventType ? ` · ${eventType.name}` : ""] })] }), booking.source === "agent-call" && (_jsxs(Chip, { size: "sm", variant: "secondary", children: [_jsx(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 } = zonedInstant(instant, zone);
+    const midnight = 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);
+}
+export { timeLabel as connectBookingTimeLabel };