@rapidmx/web-client 0.14.1 → 0.15.1

package/dist/apps/shared/components/calendar/EventShell.d.ts

@@ -0,0 +1,64 @@
+import React, { ReactNode } from "react";
+/**
+ * Where a new event's quick-create popover hangs: the rectangle (viewport coordinates) of what was clicked - a time slot, a day cell, the
+ * "New event" button. `placement` says on which side it opens: beside the rectangle (`"side"`, the default: to its right, or to its left
+ * when there is no room) or under it (`"below"`).
+ */
+export interface EventAnchor {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    placement?: "side" | "below";
+}
+/** The anchor for a clicked element (see `EventAnchor`). */
+export declare function anchorOf(element: Element, placement?: EventAnchor["placement"]): EventAnchor;
+/** How the shell is drawn: a popover next to `anchor`, a bottom sheet (a phone's quick create), or a centered card with a backdrop. */
+export type EventShellVariant = "popover" | "sheet" | "card";
+/**
+ * Where a `width` x `height` popover goes for `anchor`, kept wholly inside the viewport (its margin on every side). With no anchor - the
+ * keyboard shortcut - it is centered, near the top.
+ */
+export declare function placePopover(anchor: EventAnchor | undefined, size: {
+    width: number;
+    height: number;
+}, viewport: {
+    width: number;
+    height: number;
+}): {
+    left: number;
+    top: number;
+};
+/** What a form inside a popover uses to make its grip drag the popover. */
+export interface EventShellContextValue {
+    dragHandleProps: {
+        onPointerDown: (event: React.PointerEvent) => void;
+    } | undefined;
+}
+export declare const EventShellContext: React.Context<EventShellContextValue>;
+export interface EventShellProps {
+    variant: EventShellVariant;
+    /** The dialog's accessible name. */
+    label: string;
+    /** Escape, the backdrop (unless `onBackdropPress` says otherwise) and the close buttons' shared way out. */
+    onClose: () => void;
+    /** What a press on the backdrop does, where it must not just close: a half-typed quick event is not thrown away by a stray click. */
+    onBackdropPress?: () => void;
+    anchor?: EventAnchor;
+    /** Names the face being shown (details, quick create, full form): when it changes, focus moves to the new face's `data-autofocus` element,
+     * or to the dialog itself when it has none. */
+    focusKey: string;
+    /** The widest the popover or card gets, in px. */
+    width: number;
+    children: ReactNode;
+}
+/**
+ * The frame every face of the event dialog shares (the read-only details, the quick-create popover, the full form), so that switching from
+ * one to another keeps the focus handling and - the point of drawing them all through one element tree - keeps a form's state when the quick
+ * popover grows into the full card. The tree is deliberately the same for every variant (backdrop, dialog, children): only classes and
+ * styles change, so React never remounts what is inside.
+ *
+ * Escape and the Tab focus trap come from the shared overlay stack (`useOverlayDialog`), as for `Modal`. A popover is placed beside its
+ * anchor (`placePopover()`), re-placed when its own height changes, and can be dragged by a grip that takes `EventShellContext`'s handle.
+ */
+export default function EventShell({ variant, label, onClose, onBackdropPress, anchor, focusKey, width, children }: EventShellProps): React.ReactPortal;

package/dist/apps/shared/components/calendar/EventShell.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { createContext, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { OverlayDepthContext, useOverlayDialog } from "@rapidmx/react-shared/components/overlays/overlayStack.js";
+/** The anchor for a clicked element (see `EventAnchor`). */
+export function anchorOf(element, placement = "side") {
+    const { left, top, right, bottom } = element.getBoundingClientRect();
+    return { left, top, right, bottom, placement };
+}
+const VIEWPORT_MARGIN = 8;
+const ANCHOR_GAP = 8;
+/**
+ * Where a `width` x `height` popover goes for `anchor`, kept wholly inside the viewport (its margin on every side). With no anchor - the
+ * keyboard shortcut - it is centered, near the top.
+ */
+export function placePopover(anchor, size, viewport) {
+    let left;
+    let top;
+    if (!anchor) {
+        left = (viewport.width - size.width) / 2;
+        top = viewport.height * 0.1;
+    }
+    else if (anchor.placement === "below") {
+        left = anchor.left;
+        top = anchor.bottom + ANCHOR_GAP;
+    }
+    else {
+        left = anchor.right + ANCHOR_GAP;
+        if (left + size.width > viewport.width - VIEWPORT_MARGIN) {
+            left = anchor.left - ANCHOR_GAP - size.width;
+        }
+        top = anchor.top;
+    }
+    return {
+        left: Math.max(VIEWPORT_MARGIN, Math.min(left, viewport.width - size.width - VIEWPORT_MARGIN)),
+        top: Math.max(VIEWPORT_MARGIN, Math.min(top, viewport.height - size.height - VIEWPORT_MARGIN)),
+    };
+}
+export const EventShellContext = createContext({ dragHandleProps: undefined });
+/**
+ * The frame every face of the event dialog shares (the read-only details, the quick-create popover, the full form), so that switching from
+ * one to another keeps the focus handling and - the point of drawing them all through one element tree - keeps a form's state when the quick
+ * popover grows into the full card. The tree is deliberately the same for every variant (backdrop, dialog, children): only classes and
+ * styles change, so React never remounts what is inside.
+ *
+ * Escape and the Tab focus trap come from the shared overlay stack (`useOverlayDialog`), as for `Modal`. A popover is placed beside its
+ * anchor (`placePopover()`), re-placed when its own height changes, and can be dragged by a grip that takes `EventShellContext`'s handle.
+ */
+export default function EventShell({ variant, label, onClose, onBackdropPress, anchor, focusKey, width, children }) {
+    const dialogRef = useRef(null);
+    const depth = useOverlayDialog(true, dialogRef, onClose);
+    // How far the grip has dragged the popover from where it was placed.
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const offsetRef = useRef(offset);
+    offsetRef.current = offset;
+    const dragStart = useRef(null);
+    const place = useCallback(() => {
+        const dialog = dialogRef.current;
+        // A resize reported after the dialog has gone (the popover closes as soon as its event is saved) has nothing left to place.
+        if (!dialog) {
+            return;
+        }
+        if (variant !== "popover") {
+            dialog.style.left = "";
+            dialog.style.top = "";
+            return;
+        }
+        const size = { width: dialog.offsetWidth, height: dialog.offsetHeight };
+        const viewport = { width: window.innerWidth, height: window.innerHeight };
+        const base = placePopover(anchor, size, viewport);
+        const left = Math.max(VIEWPORT_MARGIN, Math.min(base.left + offsetRef.current.x, viewport.width - size.width - VIEWPORT_MARGIN));
+        const top = Math.max(VIEWPORT_MARGIN, Math.min(base.top + offsetRef.current.y, viewport.height - size.height - VIEWPORT_MARGIN));
+        dialog.style.left = `${Math.round(left)}px`;
+        dialog.style.top = `${Math.round(top)}px`;
+    }, [anchor, variant]);
+    useLayoutEffect(() => {
+        place();
+    }, [place, offset]);
+    // Declared after `useOverlayDialog()`'s own effect, which focuses the dialog itself: the face's first field wins over that.
+    useEffect(() => {
+        (dialogRef.current.querySelector("[data-autofocus]") ?? dialogRef.current).focus();
+    }, [focusKey]);
+    // The popover grows and shrinks with its rows (the time controls expanding, a guest added): keep it inside the window.
+    useEffect(() => {
+        if (variant !== "popover" || typeof ResizeObserver === "undefined") {
+            return;
+        }
+        const observer = new ResizeObserver(() => place());
+        observer.observe(dialogRef.current);
+        return () => observer.disconnect();
+    }, [place, variant]);
+    useEffect(() => {
+        function handleMove(event) {
+            const start = dragStart.current;
+            if (start) {
+                setOffset({ x: start.from.x + event.clientX - start.x, y: start.from.y + event.clientY - start.y });
+            }
+        }
+        function handleUp() {
+            dragStart.current = null;
+        }
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleUp);
+        return () => {
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", handleUp);
+        };
+    }, []);
+    const context = {
+        dragHandleProps: variant === "popover"
+            ? {
+                onPointerDown: (event) => {
+                    dragStart.current = { x: event.clientX, y: event.clientY, from: offsetRef.current };
+                },
+            }
+            : undefined,
+    };
+    const backdropClass = variant === "card"
+        ? "fixed inset-0 bg-black/50 flex items-center justify-center p-3 md:p-5 z-[1000]"
+        : variant === "sheet"
+            ? "fixed inset-0 bg-black/50 flex items-end z-[1000]"
+            : "fixed inset-0 z-[1000]";
+    const dialogClass = variant === "card"
+        ? "w-full max-h-[calc(100vh-1.5rem)] md:max-h-[calc(100vh-2.5rem)] overflow-y-auto bg-surface border border-border rounded-xl shadow-modal focus:outline-none"
+        : variant === "sheet"
+            ? "w-full max-h-[90vh] overflow-y-auto bg-surface border-t border-border rounded-t-2xl shadow-modal focus:outline-none pb-[env(safe-area-inset-bottom)]"
+            : "fixed max-h-[calc(100vh-1rem)] overflow-y-auto bg-surface border border-border rounded-xl shadow-modal focus:outline-none";
+    const dialogStyle = variant === "popover" ? { width, maxWidth: `calc(100vw - ${VIEWPORT_MARGIN * 2}px)` } : variant === "card" ? { maxWidth: width } : {};
+    return createPortal(_jsx("div", { className: backdropClass, "data-event-shell": variant, onMouseDown: (event) => event.target === event.currentTarget && (onBackdropPress ?? onClose)(), children: _jsx("div", { ref: dialogRef, role: "dialog", "aria-modal": "true", "aria-label": label, tabIndex: -1, className: dialogClass, style: dialogStyle, children: _jsx(OverlayDepthContext.Provider, { value: depth, children: _jsx(EventShellContext.Provider, { value: context, children: children }) }) }) }), document.body);
+}

package/dist/apps/shared/components/calendar/FindATime.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { EventFormController } from "./eventForm.js";
+/** How long the grid waits after the last change of day or guests before asking the server, so typing a list of guests is one look-up. */
+export declare const FIND_TIME_DEBOUNCE_MS = 300;
+/**
+ * The event dialog's "Find a time" tab: a day of the guests' calendars side by side, as Google Calendar draws it. A row for you and one for each guest,
+ * the hours of the day across (working hours in view first), each person's busy time as a block (a tentative one hatched) and the event's proposed time as a
+ * highlight across every row; pressing an hour, or a place in a row, moves the event's start there (its length is kept). Under the grid: whether the proposed
+ * time suits everyone, and up to five suggested times - the next slots of the event's length, 8:00am to 6:00pm, when everyone who can be checked is free.
+ *
+ * Who can be checked: `POST /calendar-events/free-busy` tells a guest's busy time only for a mailbox on this server whose owner shares it with you. A guest it
+ * cannot see - an external address, or somebody who hides their calendar - is shown as such, in the grid and in the summary, and is never counted as free;
+ * suggestions ignore them (and say so). The look-up is made after a short pause (`FIND_TIME_DEBOUNCE_MS`) whenever the day or the guests change, one answer at
+ * a time (an answer for a look-up that has since been replaced is dropped), and a failure - too many look-ups, or no connection - says so with a retry.
+ */
+export default function FindATime({ c }: {
+    c: EventFormController;
+}): React.JSX.Element;

package/dist/apps/shared/components/calendar/FindATime.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { format } from "date-fns";
+import { FREE_BUSY_MAX_ADDRESSES, availabilityDuring, availabilityOf, getFreeBusy, suggestTimes, summarizeAvailability, withoutOwnBlock, } from "@rapidmx/react-shared/calendar/freeBusyApi.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { addDaysToKey } from "./allDay.js";
+import { formatFormWhen, localDateFromKey, msToWallString, wallStringToMs } from "./eventFormat.js";
+import { SEARCH_DAYS, WORK_END_HOUR, WORK_START_HOUR, clockLabel, dayStartMs, freeBusyErrorMessage, isDayKey, minuteOfDay, summaryLine, workingWindows, } from "./findTimeGrid.js";
+/** How long the grid waits after the last change of day or guests before asking the server, so typing a list of guests is one look-up. */
+export const FIND_TIME_DEBOUNCE_MS = 300;
+const HOUR_WIDTH = 52;
+const NAME_WIDTH = 136;
+const HEADER_HEIGHT = 28;
+const ROW_HEIGHT = 44;
+const TIMELINE_WIDTH = HOUR_WIDTH * 24;
+const HOURS = Array.from({ length: 24 }, (_, hour) => hour);
+const GRID_LINES = `repeating-linear-gradient(to right, transparent 0, transparent ${HOUR_WIDTH - 1}px, var(--color-border) ${HOUR_WIDTH - 1}px, var(--color-border) ${HOUR_WIDTH}px)`;
+const HATCH = "repeating-linear-gradient(45deg, transparent 0, transparent 4px, var(--color-text-muted) 4px, var(--color-text-muted) 5px)";
+const TENTATIVE_HATCH = "repeating-linear-gradient(45deg, var(--color-danger-bg) 0, var(--color-danger-bg) 4px, var(--color-danger) 4px, var(--color-danger) 6px)";
+/** "12am", "9am", "12pm" for the header cells and their labels. */
+function hourLabel(hour) {
+    return format(new Date(2000, 0, 1, hour), "haaa");
+}
+/** What a row says about the proposed time, under the person's name. */
+function stateText(state, status) {
+    if (status === "restricted") {
+        return "Hides their calendar";
+    }
+    if (status === "unknown") {
+        return "Availability unknown";
+    }
+    if (status === undefined) {
+        return "Checking…";
+    }
+    // Their calendar was read, but the proposed time is not on the days it covers.
+    if (state === undefined) {
+        return "";
+    }
+    return state === "free" ? "Free" : state === "busy" ? "Busy at this time" : "Maybe busy at this time";
+}
+/**
+ * The event dialog's "Find a time" tab: a day of the guests' calendars side by side, as Google Calendar draws it. A row for you and one for each guest,
+ * the hours of the day across (working hours in view first), each person's busy time as a block (a tentative one hatched) and the event's proposed time as a
+ * highlight across every row; pressing an hour, or a place in a row, moves the event's start there (its length is kept). Under the grid: whether the proposed
+ * time suits everyone, and up to five suggested times - the next slots of the event's length, 8:00am to 6:00pm, when everyone who can be checked is free.
+ *
+ * Who can be checked: `POST /calendar-events/free-busy` tells a guest's busy time only for a mailbox on this server whose owner shares it with you. A guest it
+ * cannot see - an external address, or somebody who hides their calendar - is shown as such, in the grid and in the summary, and is never counted as free;
+ * suggestions ignore them (and say so). The look-up is made after a short pause (`FIND_TIME_DEBOUNCE_MS`) whenever the day or the guests change, one answer at
+ * a time (an answer for a look-up that has since been replaced is dropped), and a failure - too many look-ups, or no connection - says so with a retry.
+ */
+export default function FindATime({ c }) {
+    const { values, deviceZone, organizerAddress, occurrence } = c;
+    const { start, end, allDay, formZone } = values;
+    const startDay = start.slice(0, 10);
+    const [dayKey, setDayKey] = useState(() => (isDayKey(startDay) ? startDay : format(new Date(), "yyyy-MM-dd")));
+    const [retry, setRetry] = useState(0);
+    // Picking another date in the form moves the grid to it.
+    useEffect(() => {
+        if (isDayKey(startDay)) {
+            setDayKey(startDay);
+        }
+    }, [startDay]);
+    // You, then each guest once (case-insensitively), at most as many as one look-up may ask about.
+    const rows = useMemo(() => {
+        const seen = new Set([organizerAddress.toLowerCase()]);
+        const guests = [];
+        for (const attendee of values.attendees) {
+            const key = attendee.address.toLowerCase();
+            if (!seen.has(key)) {
+                seen.add(key);
+                guests.push({ address: attendee.address, name: attendee.displayName || attendee.address, you: false });
+            }
+        }
+        return [{ address: organizerAddress, name: "You", you: true }, ...guests].slice(0, FREE_BUSY_MAX_ADDRESSES);
+    }, [values.attendees, organizerAddress]);
+    const guestCount = rows.length - 1;
+    const addresses = rows.map((row) => row.address);
+    const addressesKey = addresses.map((address) => address.toLowerCase()).join(",");
+    const rangeStart = dayStartMs(dayKey, formZone, deviceZone);
+    const rangeEnd = dayStartMs(addDaysToKey(dayKey, SEARCH_DAYS), formZone, deviceZone);
+    const eventStart = allDay ? Number.NaN : wallStringToMs(start, formZone, deviceZone);
+    const eventEnd = allDay ? Number.NaN : wallStringToMs(end, formZone, deviceZone);
+    const timeIsValid = eventEnd > eventStart;
+    const [lookUp, setLookUp] = useState({ status: "loading", people: [] });
+    useEffect(() => {
+        if (allDay || guestCount === 0 || Number.isNaN(rangeStart) || Number.isNaN(rangeEnd)) {
+            return;
+        }
+        // Each run of this effect owns its answer: once the day or the guests change (or this unmounts) a slower earlier look-up is ignored.
+        let current = true;
+        setLookUp((previous) => ({ status: "loading", people: previous.people }));
+        const timer = setTimeout(() => {
+            getFreeBusy(addresses, new Date(rangeStart), new Date(rangeEnd)).then((response) => current && setLookUp({ status: "ready", people: availabilityOf(response) }), (err) => current && setLookUp({ status: "error", people: [], message: freeBusyErrorMessage(err) }));
+        }, FIND_TIME_DEBOUNCE_MS);
+        return () => {
+            current = false;
+            clearTimeout(timer);
+        };
+        // `addresses` is what `addressesKey` says.
+    }, [addressesKey, rangeStart, rangeEnd, allDay, retry]);
+    // The event's own time, when it is being rescheduled, is on the calendars of the people already invited: not their conflict with themselves.
+    const people = useMemo(() => {
+        if (!occurrence || occurrence.allDay) {
+            return lookUp.people;
+        }
+        const invited = new Set([occurrence.organizer.address, ...occurrence.attendees.map((attendee) => attendee.address), organizerAddress].map((a) => a.toLowerCase()));
+        return withoutOwnBlock(lookUp.people, invited, Date.parse(occurrence.startDate), Date.parse(occurrence.endDate));
+    }, [lookUp.people, occurrence, organizerAddress]);
+    // Working hours scrolled into view, or the event's own start when that lies outside them.
+    const scroller = useRef(null);
+    useLayoutEffect(() => {
+        if (!scroller.current) {
+            return;
+        }
+        const startHour = timeIsValid && msToWallString(eventStart, formZone, deviceZone).slice(0, 10) === dayKey ? Number(msToWallString(eventStart, formZone, deviceZone).slice(11, 13)) : undefined;
+        const firstHour = startHour !== undefined && (startHour < WORK_START_HOUR || startHour >= WORK_END_HOUR - 3) ? Math.max(0, startHour - 1) : WORK_START_HOUR;
+        scroller.current.scrollLeft = firstHour * HOUR_WIDTH;
+        // Only a change of day moves the view: moving the event within it must not.
+    }, [dayKey, guestCount > 0 && !allDay]);
+    function startAt(minutes) {
+        c.setStart(`${dayKey}T${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`);
+    }
+    function handleTimelineClick(event) {
+        const box = event.currentTarget.getBoundingClientRect();
+        if (box.width > 0) {
+            // Half hours: the smallest step of the form's own time inputs is a minute, but a row is only 52px an hour wide.
+            startAt(Math.min(47, Math.max(0, Math.floor(((event.clientX - box.left) / box.width) * 48))) * 30);
+        }
+    }
+    if (allDay) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "Finding a time works for an event with a start and end time. Uncheck All day to see when your guests are free." });
+    }
+    if (guestCount === 0) {
+        return _jsx("p", { className: "text-sm text-text-muted", children: "Add guests to see when they are free." });
+    }
+    const dayLabel = format(localDateFromKey(dayKey), "EEEE, MMMM d");
+    const proposedFrom = timeIsValid ? minuteOfDay(eventStart, dayKey, formZone, deviceZone) : 0;
+    const proposedTo = timeIsValid ? minuteOfDay(eventEnd, dayKey, formZone, deviceZone) : 0;
+    const showProposed = timeIsValid && proposedTo > proposedFrom;
+    const covered = timeIsValid && eventStart >= rangeStart && eventEnd <= rangeEnd;
+    const answered = lookUp.status === "ready";
+    const byAddress = new Map(people.map((person) => [person.address.toLowerCase(), person]));
+    const summary = answered && covered ? summarizeAvailability(people, eventStart, eventEnd) : undefined;
+    const suggestions = answered && timeIsValid
+        ? suggestTimes(people, {
+            windows: workingWindows(dayKey, formZone, deviceZone),
+            durationMs: eventEnd - eventStart,
+            notBeforeMs: Date.now(),
+        })
+        : [];
+    const seen = people.filter((person) => person.status === "available").length;
+    const unseen = people.length - seen;
+    /** What a screen reader hears of a person whose calendar was read: their busy times on the day shown. */
+    function busyDescription(person) {
+        const dayEnd = dayStartMs(addDaysToKey(dayKey, 1), formZone, deviceZone);
+        const blocks = person.busy.filter((block) => block.startMs < dayEnd && block.endMs > rangeStart);
+        return blocks.length === 0
+            ? "Free all day."
+            : blocks
+                .map((block) => `${block.tentative ? "Tentatively busy" : "Busy"} ${clockLabel(block.startMs, formZone, deviceZone)} to ${clockLabel(block.endMs, formZone, deviceZone)}`)
+                .join(", ");
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-3 min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": "Previous day", onClick: () => setDayKey((key) => addDaysToKey(key, -1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u2039" }), _jsx("span", { className: "text-sm font-medium min-w-[9rem] text-center", children: dayLabel }), _jsx("button", { type: "button", "aria-label": "Next day", onClick: () => setDayKey((key) => addDaysToKey(key, 1)), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: "\u203A" }), _jsx("span", { className: "text-xs text-text-muted", children: formZone.replace(/_/g, " ") })] }), lookUp.status === "error" && (_jsxs("div", { role: "alert", className: "flex flex-wrap items-center gap-3 text-sm text-danger", children: [_jsx("span", { children: lookUp.message }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setRetry((count) => count + 1), children: "Try again" })] })), _jsx("div", { ref: scroller, role: "group", "aria-label": "Guests' availability", "aria-busy": lookUp.status === "loading", className: "overflow-x-auto border border-border rounded-md", children: _jsxs("div", { className: "relative", style: { width: NAME_WIDTH + TIMELINE_WIDTH }, children: [_jsxs("div", { className: "flex bg-surface border-b border-border", style: { height: HEADER_HEIGHT }, children: [_jsx("div", { className: "sticky left-0 z-20 shrink-0 bg-surface border-r border-border", style: { width: NAME_WIDTH } }), HOURS.map((hour) => (_jsx("button", { type: "button", "aria-label": `Start at ${hourLabel(hour)}`, title: `Start at ${hourLabel(hour)}`, onClick: () => startAt(hour * 60), className: "shrink-0 text-[10px] text-text-muted hover:bg-surface-alt hover:text-text text-left pl-1", style: { width: HOUR_WIDTH }, children: hourLabel(hour) }, hour)))] }), rows.map((row) => {
+                            const person = byAddress.get(row.address.toLowerCase());
+                            const state = person && timeIsValid && covered ? availabilityDuring(person, eventStart, eventEnd) : undefined;
+                            const hidden = person && person.status !== "available" ? person : undefined;
+                            return (_jsxs("div", { className: "flex border-b border-border last:border-b-0", style: { height: ROW_HEIGHT }, children: [_jsxs("div", { className: "sticky left-0 z-10 shrink-0 flex items-center gap-2 px-2 bg-surface border-r border-border", style: { width: NAME_WIDTH }, children: [_jsx("span", { "aria-hidden": "true", className: "w-6 h-6 shrink-0 rounded-full bg-primary/15 text-primary-dark text-[11px] font-semibold flex items-center justify-center uppercase", children: row.name.charAt(0) }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-xs font-medium truncate", children: row.name }), _jsx("div", { className: "text-[10px] text-text-muted truncate", children: stateText(state, person?.status) })] })] }), _jsxs("div", { role: "img", "aria-label": `${row.name}: ${hidden ? stateText(undefined, hidden.status) : person ? busyDescription(person) : "Checking availability"}`, onClick: handleTimelineClick, className: ["relative shrink-0 cursor-pointer", !person && lookUp.status === "loading" ? "animate-pulse bg-surface-alt" : ""].join(" "), style: { width: TIMELINE_WIDTH, backgroundImage: GRID_LINES }, children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-y-0 left-0 bg-surface-alt/70", style: { width: WORK_START_HOUR * HOUR_WIDTH } }), _jsx("div", { "aria-hidden": "true", className: "absolute inset-y-0 right-0 bg-surface-alt/70", style: { width: (24 - WORK_END_HOUR) * HOUR_WIDTH } }), hidden && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": "true", className: "absolute inset-0 opacity-30", style: { backgroundImage: HATCH } }), _jsx("span", { "aria-hidden": "true", className: "sticky left-2 inline-block px-2 mt-3 text-[11px] text-text bg-surface rounded-sm", children: stateText(undefined, hidden.status) })] })), person?.status === "available" &&
+                                                person.busy.map((block, index) => {
+                                                    const from = minuteOfDay(block.startMs, dayKey, formZone, deviceZone);
+                                                    const to = minuteOfDay(block.endMs, dayKey, formZone, deviceZone);
+                                                    return to > from ? (_jsx("div", { "aria-hidden": "true", "data-busy": block.tentative ? "tentative" : "busy", className: ["absolute top-2 bottom-2 rounded-sm border border-danger", block.tentative ? "" : "bg-danger/60"].join(" "), style: { left: (from / 60) * HOUR_WIDTH, width: ((to - from) / 60) * HOUR_WIDTH, backgroundImage: block.tentative ? TENTATIVE_HATCH : undefined } }, index)) : null;
+                                                })] })] }, row.address.toLowerCase()));
+                        }), showProposed && (_jsx("div", { "aria-hidden": "true", "data-proposed-time": "", className: "absolute border-x-2 border-primary bg-primary/10 pointer-events-none z-[5]", style: {
+                                top: HEADER_HEIGHT,
+                                bottom: 0,
+                                left: NAME_WIDTH + (proposedFrom / 60) * HOUR_WIDTH,
+                                width: ((proposedTo - proposedFrom) / 60) * HOUR_WIDTH,
+                            } }))] }) }), _jsxs("div", { role: "status", "aria-live": "polite", className: "text-sm", children: [lookUp.status === "loading" && "Checking availability…", lookUp.status === "ready" && !timeIsValid && "Set a start and an end time to see who is free.", lookUp.status === "ready" && timeIsValid && !covered && "Pick a time within this week to see who is free.", summary && _jsx("span", { className: summary.conflicts > 0 ? "font-medium text-danger" : "font-medium", children: summaryLine(summary) })] }), answered && timeIsValid && (_jsxs("section", { "aria-labelledby": "find-time-suggestions", className: "flex flex-col gap-1.5", children: [_jsx("h4", { id: "find-time-suggestions", className: "text-xs font-bold uppercase tracking-wide text-text-muted", children: "Suggested times" }), suggestions.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-1", children: suggestions.map((ms) => {
+                            const startWall = msToWallString(ms, formZone, deviceZone);
+                            const endWall = msToWallString(ms + (eventEnd - eventStart), formZone, deviceZone);
+                            return (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => c.setStart(startWall), className: "text-sm text-primary-dark hover:underline text-left", children: formatFormWhen(startWall, endWall, false) }) }, ms));
+                        }) })) : (_jsx("p", { className: "text-sm text-text-muted", children: seen === 0
+                            ? "There is no calendar to check, so no time can be suggested."
+                            : `No time this week has everyone free between ${hourLabel(WORK_START_HOUR)} and ${hourLabel(WORK_END_HOUR)}.` })), unseen > 0 && (_jsxs("p", { className: "text-xs text-text-muted", children: ["Suggestions leave out ", unseen, " ", unseen === 1 ? "person whose calendar" : "people whose calendars", " can\u2019t be seen."] }))] }))] }));
+}

package/dist/apps/shared/components/calendar/LazyDescriptionEditor.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { DescriptionEditorProps } from "./DescriptionEditor.js";
+/**
+ * `DescriptionEditor`, loaded when it is first drawn. The editor is TipTap and ProseMirror - a good deal of code that the calendar, and the reading pane's
+ * invitation card, only need once somebody opens a description - so it is fetched then rather than with the page. Not `React.lazy()`: a chunk that fails to
+ * download (offline, or a deploy that replaced it) is said so here with a retry, instead of throwing through the tree above.
+ */
+export default function LazyDescriptionEditor(props: DescriptionEditorProps): React.JSX.Element;

package/dist/apps/shared/components/calendar/LazyDescriptionEditor.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+let loading;
+/** The editor once its chunk has arrived, so an editor drawn again (the quick popover growing into the card) starts as the editor, not as the placeholder. */
+let loaded;
+/** Fetches the editor's chunk once. A failed download is forgotten, so asking again tries again. */
+function loadDescriptionEditor() {
+    loading ?? (loading = import("./DescriptionEditor.js").then((module) => (loaded = module.default), (err) => {
+        loading = undefined;
+        throw err;
+    }));
+    return loading;
+}
+/**
+ * `DescriptionEditor`, loaded when it is first drawn. The editor is TipTap and ProseMirror - a good deal of code that the calendar, and the reading pane's
+ * invitation card, only need once somebody opens a description - so it is fetched then rather than with the page. Not `React.lazy()`: a chunk that fails to
+ * download (offline, or a deploy that replaced it) is said so here with a retry, instead of throwing through the tree above.
+ */
+export default function LazyDescriptionEditor(props) {
+    const [Editor, setEditor] = useState(() => loaded ?? null);
+    const [failed, setFailed] = useState(false);
+    const [attempt, setAttempt] = useState(0);
+    useEffect(() => {
+        let current = true;
+        loadDescriptionEditor().then((component) => current && setEditor(() => component), () => current && setFailed(true));
+        return () => {
+            current = false;
+        };
+    }, [attempt]);
+    if (Editor) {
+        return _jsx(Editor, { ...props });
+    }
+    if (failed) {
+        return (_jsxs("p", { role: "alert", className: "text-sm text-danger", children: ["The description editor couldn\u2019t be loaded.", " ", _jsx("button", { type: "button", className: "underline", onClick: () => {
+                        setFailed(false);
+                        setAttempt((count) => count + 1);
+                    }, children: "Try again" })] }));
+    }
+    return (_jsx("div", { "aria-busy": "true", className: "min-h-[7rem] rounded-md border border-border bg-surface-alt text-sm text-text-muted px-3 py-2", children: "Loading the editor\u2026" }));
+}

package/dist/apps/shared/components/calendar/MonthView.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+import { EventAnchor } from "./EventShell.js";
 export interface MonthViewProps {
     /** Any date within the month to display. */
     viewDate: Date;
@@ -9,7 +10,10 @@ export interface MonthViewProps {
     folderColors: Record<string, string>;
     onSelectDay: (date: Date) => void;
     onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** Click on the empty part of a day: the day (from midnight to the next midnight) and the cell, for a new all-day event's quick-create
+     * popover to open beside. */
+    onSelectSlot?: (start: Date, end: Date, anchor: EventAnchor) => void;
 }
 /** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day and all-day
  * events are shown on every day they cover (see `allDay.ts`'s `occursOnDay`). */
-export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent }: MonthViewProps): React.JSX.Element;
+export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }: MonthViewProps): React.JSX.Element;

package/dist/apps/shared/components/calendar/MonthView.js

@@ -1,22 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDraggable, useDroppable } from "@dnd-kit/core";
-import { eachDayOfInterval, endOfMonth, endOfWeek, format, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
+import { addDays, eachDayOfInterval, endOfMonth, endOfWeek, format, isSameMonth, isToday, startOfMonth, startOfWeek } from "date-fns";
 import { dayDropId, eventDragId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
 import { occursOnDay, startsOnDay } from "./allDay.js";
+import { anchorOf } from "./EventShell.js";
 const MAX_CHIPS_PER_DAY = 3;
 /** A real 6-week month grid (Mon-start), matching Outlook/Gmail's month view. Multi-day and all-day
  * events are shown on every day they cover (see `allDay.ts`'s `occursOnDay`). */
-export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent }) {
+export default function MonthView({ viewDate, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }) {
     const gridStart = startOfWeek(startOfMonth(viewDate), { weekStartsOn: 1 });
     const gridEnd = endOfWeek(endOfMonth(viewDate), { weekStartsOn: 1 });
     const days = eachDayOfInterval({ start: gridStart, end: gridEnd });
-    return (_jsx("div", { className: "flex-1 grid grid-cols-7 grid-rows-6 min-h-0", role: "grid", "aria-label": "Month", children: days.map((day) => (_jsx(DayCell, { day: day, inCurrentMonth: isSameMonth(day, viewDate), occurrences: occurrences.filter((occ) => occursOnDay(occ, day)), folderColors: folderColors, onSelectDay: onSelectDay, onSelectEvent: onSelectEvent }, day.toISOString()))) }));
+    return (_jsx("div", { className: "flex-1 grid grid-cols-7 grid-rows-6 min-h-0", role: "grid", "aria-label": "Month", children: days.map((day) => (_jsx(DayCell, { day: day, inCurrentMonth: isSameMonth(day, viewDate), occurrences: occurrences.filter((occ) => occursOnDay(occ, day)), folderColors: folderColors, onSelectDay: onSelectDay, onSelectEvent: onSelectEvent, onSelectSlot: onSelectSlot }, day.toISOString()))) }));
 }
-function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay, onSelectEvent }) {
+function DayCell({ day, inCurrentMonth, occurrences, folderColors, onSelectDay, onSelectEvent, onSelectSlot }) {
     const { setNodeRef, isOver } = useDroppable({ id: dayDropId(day) });
     const visible = occurrences.slice(0, MAX_CHIPS_PER_DAY);
     const overflowCount = occurrences.length - visible.length;
-    return (_jsxs("div", { ref: setNodeRef, className: [
+    return (_jsxs("div", { ref: setNodeRef, onClick: (e) => {
+            // Only the empty part of the cell: the day number, the chips and "+N more" have their own clicks.
+            if (onSelectSlot && !e.target.closest("button")) {
+                onSelectSlot(day, addDays(day, 1), anchorOf(e.currentTarget));
+            }
+        }, className: [
             "border-b border-r border-border p-1 flex flex-col gap-0.5 min-h-0 overflow-hidden",
             isOver ? "bg-primary/5" : "",
             inCurrentMonth ? "bg-surface" : "bg-surface-alt",

package/dist/apps/shared/components/calendar/QuickCreateFaces.d.ts

@@ -0,0 +1,30 @@
+import React, { MutableRefObject } from "react";
+import { EventFormController } from "./eventForm.js";
+import { QuickTab } from "./QuickCreateTabs.js";
+/** What `EventModal` tells the editor about the tabs of a new event's popover. */
+export interface QuickCreateConfig {
+    tab: QuickTab;
+    onTabChange: (tab: QuickTab) => void;
+    /** Where the booking plugin's Settings pages are, or `undefined` when the plugin is not running (and there is no Appointment schedule tab). */
+    bookingHref?: string;
+}
+export interface QuickCreateFacesProps {
+    /** The Event tab's form, which owns the title and the mailbox and calendar the other tabs share. */
+    c: EventFormController;
+    layout: "quick" | "expanded";
+    onExpand: () => void;
+    config: QuickCreateConfig;
+    dirtyRef: MutableRefObject<boolean>;
+    /** The signed-in mailbox's address: the host's name on booking pages when its display name is not known. */
+    organizerAddress: string;
+}
+/**
+ * The faces of a new event, one for each tab: Event (the quick popover or, after More options, the full card - unchanged), Task and
+ * Appointment schedule. Stays mounted while the tab changes, so it is what keeps the other tabs' fields (the Event tab's live in
+ * `EventEditor`) when the user looks at another one and comes back. The title, the mailbox and the calendar are the Event tab's, so they
+ * are shared by all three.
+ *
+ * The tab strip is redrawn by whichever face is showing, so a tab change moves keyboard focus back to the selected tab here - what an
+ * arrow-key walk along the strip needs.
+ */
+export default function QuickCreateFaces({ c, layout, onExpand, config, dirtyRef, organizerAddress }: QuickCreateFacesProps): React.JSX.Element;

package/dist/apps/shared/components/calendar/QuickCreateFaces.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useRef, useState } from "react";
+import { deviceTimeZone } from "@rapidmx/react-shared/util/timeZone.js";
+import AppointmentQuickForm, { initialAppointmentDraft } from "./AppointmentQuickForm.js";
+import EventExpandedForm from "./EventExpandedForm.js";
+import EventQuickForm from "./EventQuickForm.js";
+import QuickCreateTabs, { quickPanelProps, quickTabId } from "./QuickCreateTabs.js";
+import TaskQuickForm, { initialTaskDraft } from "./TaskQuickForm.js";
+/**
+ * The faces of a new event, one for each tab: Event (the quick popover or, after More options, the full card - unchanged), Task and
+ * Appointment schedule. Stays mounted while the tab changes, so it is what keeps the other tabs' fields (the Event tab's live in
+ * `EventEditor`) when the user looks at another one and comes back. The title, the mailbox and the calendar are the Event tab's, so they
+ * are shared by all three.
+ *
+ * The tab strip is redrawn by whichever face is showing, so a tab change moves keyboard focus back to the selected tab here - what an
+ * arrow-key walk along the strip needs.
+ */
+export default function QuickCreateFaces({ c, layout, onExpand, config, dirtyRef, organizerAddress }) {
+    const { tab, onTabChange, bookingHref } = config;
+    const [task, setTask] = useState(() => initialTaskDraft(c.values.start, c.values.allDay));
+    const [appointment, setAppointment] = useState(initialAppointmentDraft);
+    const shownTab = useRef(tab);
+    useEffect(() => {
+        if (shownTab.current !== tab) {
+            shownTab.current = tab;
+            document.getElementById(quickTabId(tab))?.focus();
+        }
+    }, [tab]);
+    // Notes typed on the Task tab are worth a second thought before a stray click closes the popover, like a title.
+    dirtyRef.current = dirtyRef.current || task.body.trim() !== "";
+    const tabs = _jsx(QuickCreateTabs, { tab: tab, onChange: onTabChange, showAppointment: !!bookingHref });
+    if (tab === "task") {
+        return (_jsx(TaskQuickForm, { c: c, draft: task, onDraftChange: (patch) => setTask((prev) => ({ ...prev, ...patch })), tabs: tabs, expanded: layout === "expanded", onExpand: onExpand }));
+    }
+    if (tab === "appointment") {
+        const hostMailbox = c.mailboxOptions?.find((option) => option.mailbox.uid === c.values.targetMailboxUid)?.mailbox;
+        return (_jsx(AppointmentQuickForm, { c: c, draft: appointment, onDraftChange: (patch) => setAppointment((prev) => ({ ...prev, ...patch })), tabs: tabs, settingsHref: bookingHref, hostName: hostMailbox?.displayName ?? organizerAddress, timeZone: hostMailbox?.timezone ?? deviceTimeZone() }));
+    }
+    return layout === "quick" ? _jsx(EventQuickForm, { c: c, onExpand: onExpand, tabs: tabs, tabPanelProps: quickPanelProps("event") }) : _jsx(EventExpandedForm, { c: c });
+}