@unityevolv/ofiskit-ui-map 0.1.0

package/dist/DevicePanel.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Icon, Modal, Select } from '@unityevolv/unitykit';
+import { labelFor, listDevices, requestPermission, stillAvailable, watchDevices, } from '@unityevolv/ofiskit-realtime-client';
+import { useCallback, useEffect, useRef, useState } from 'react';
+export function DevicePanel(props) {
+    const { open, choice, onChoose } = props;
+    const [devices, setDevices] = useState({ microphones: [], cameras: [], speakers: [] });
+    const [problem, setProblem] = useState(null);
+    const [inUseElsewhere, setInUseElsewhere] = useState(false);
+    const [granted, setGranted] = useState(false);
+    const [level, setLevel] = useState(0);
+    const [notice, setNotice] = useState(null);
+    const video = useRef(null);
+    const stream = useRef(null);
+    const audio = useRef(null);
+    const stop = useCallback(() => {
+        for (const track of stream.current?.getTracks() ?? [])
+            track.stop();
+        stream.current = null;
+        if (audio.current) {
+            clearInterval(audio.current.timer);
+            void audio.current.context.close().catch(() => { });
+            audio.current = null;
+        }
+        setLevel(0);
+    }, []);
+    /**
+     * Ask for permission, then list.
+     *
+     * In that order on purpose: device labels are empty until permission has been
+     * granted once, and a picker offering "Microphone 1" and "Microphone 2" helps
+     * nobody choose their headset.
+     */
+    const start = useCallback(async () => {
+        const outcome = await requestPermission({ audio: true, video: props.preview ?? false }, choice);
+        setGranted(outcome.granted);
+        setProblem(outcome.problem ?? null);
+        setInUseElsewhere(Boolean(outcome.inUseElsewhere));
+        if (outcome.stream) {
+            stream.current = outcome.stream;
+            if (video.current)
+                video.current.srcObject = outcome.stream;
+            // A level meter, so nobody joins with a dead microphone and finds out
+            // when somebody asks why they have been silent for two minutes.
+            try {
+                const context = new AudioContext();
+                const analyser = context.createAnalyser();
+                analyser.fftSize = 256;
+                context.createMediaStreamSource(outcome.stream).connect(analyser);
+                const samples = new Uint8Array(analyser.frequencyBinCount);
+                const timer = setInterval(() => {
+                    analyser.getByteFrequencyData(samples);
+                    let total = 0;
+                    for (const sample of samples)
+                        total += sample;
+                    setLevel(Math.min(1, total / samples.length / 128));
+                }, 100);
+                audio.current = { context, timer };
+            }
+            catch {
+                // No meter is survivable; the picker still works.
+            }
+        }
+        setDevices(await listDevices());
+    }, [choice, props.preview]);
+    useEffect(() => {
+        if (!open)
+            return;
+        /*
+         * Opening the panel asks the browser for the camera and microphone.
+         *
+         * This is an effect synchronising with an external system, which is what
+         * effects are for: nothing is set until the browser answers, several
+         * awaits later. The lint rule cannot see through an async call and reads
+         * the setState calls inside `start` as synchronous ones, so it is disabled
+         * here with the reason rather than the effect being contorted to please it.
+         */
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        void start();
+        // Closing the panel runs this cleanup, which is what stops the camera and
+        // the level meter. Doing it in the body as well would be a second stop.
+        return stop;
+    }, [open, start, stop]);
+    /**
+     * Follow the operating system when something is plugged in or pulled out.
+     *
+     * With a notice, never silently: somebody who unplugs a headset mid-sentence
+     * needs to know their voice is now going through the laptop microphone, and
+     * a silent switch is how people end up talking into a dead device.
+     */
+    useEffect(() => {
+        if (!open)
+            return;
+        return watchDevices((next) => {
+            setDevices(next);
+            const surviving = stillAvailable(choice, next);
+            if (choice.audioDeviceId && !surviving.audioDeviceId) {
+                setNotice('Your microphone was unplugged. The call switched to the built-in one.');
+                onChoose(surviving);
+                props.onApply?.(surviving);
+            }
+            else if (choice.videoDeviceId && !surviving.videoDeviceId) {
+                setNotice('Your camera was unplugged.');
+                onChoose(surviving);
+                props.onApply?.(surviving);
+            }
+        });
+    }, [open, choice, onChoose, props]);
+    const update = (patch) => {
+        const next = { ...choice, ...patch };
+        onChoose(next);
+        props.onApply?.(next);
+        // Stop the current preview before opening the newly chosen device, or two
+        // cameras end up running and the meter reads the wrong microphone.
+        stop();
+        void start();
+    };
+    return (_jsx(Modal, { open: open, onOpenChange: (next) => {
+            if (!next)
+                props.onClose();
+        }, title: "Microphone, camera and speaker", children: _jsxs("div", { className: "space-y-4", children: [notice && (_jsx(Alert, { variant: "info", onDismiss: () => setNotice(null), children: notice })), problem && (_jsxs(Alert, { variant: inUseElsewhere ? 'warn' : 'danger', children: [_jsx("p", { children: problem }), _jsx(Button, { size: "sm", variant: "ghost", className: "mt-2", onClick: () => void start(), children: "Try again" })] })), props.preview && (_jsx("div", { className: "overflow-hidden rounded-lg bg-base-300", children: _jsx("video", { ref: video, autoPlay: true, playsInline: true, muted: true, "aria-label": "Camera preview", className: "aspect-video w-full scale-x-[-1] object-cover" }) })), _jsxs("div", { children: [_jsxs("p", { className: "mb-1 flex items-center gap-1 text-xs font-medium text-base-content/70", children: [_jsx(Icon, { name: "mic", size: "xs" }), "Microphone level"] }), _jsx("div", { role: "meter", "aria-label": "Microphone level", "aria-valuenow": Math.round(level * 100), "aria-valuemin": 0, "aria-valuemax": 100, className: "h-2 w-full overflow-hidden rounded-full bg-base-300", children: _jsx("div", { className: "h-full rounded-full bg-success transition-[width] duration-100", style: { width: `${Math.round(level * 100)}%` } }) }), granted && level === 0 && (_jsx("p", { className: "mt-1 text-xs text-base-content/70", children: "Say something \u2014 if this stays still, the microphone is not picking you up." }))] }), _jsxs(Select, { label: "Microphone", value: choice.audioDeviceId ?? '', onChange: (event) => update({ audioDeviceId: event.target.value || undefined }), children: [_jsx("option", { value: "", children: "System default" }), devices.microphones.map((device, index) => (_jsx("option", { value: device.deviceId, children: labelFor(device, index) }, device.deviceId)))] }), _jsxs(Select, { label: "Camera", value: choice.videoDeviceId ?? '', onChange: (event) => update({ videoDeviceId: event.target.value || undefined }), children: [_jsx("option", { value: "", children: "System default" }), devices.cameras.map((device, index) => (_jsx("option", { value: device.deviceId, children: labelFor(device, index) }, device.deviceId)))] }), devices.speakers.length > 0 && (_jsxs(Select, { label: "Speaker", value: choice.speakerDeviceId ?? '', onChange: (event) => update({ speakerDeviceId: event.target.value || undefined }), children: [_jsx("option", { value: "", children: "System default" }), devices.speakers.map((device, index) => (_jsx("option", { value: device.deviceId, children: labelFor(device, index) }, device.deviceId)))] })), _jsx("p", { className: "text-xs text-base-content/60", children: "Noise suppression and echo cancellation are on. Your choice is remembered on this device." })] }) }));
+}
+/**
+ * Said before the browser's own prompt, not after.
+ *
+ * The browser asks a blunt question with no context, and somebody who says no
+ * to it has a much harder time saying yes later. Explaining first is the
+ * difference between a prompt that gets accepted and a support ticket.
+ */
+export function PermissionPrimer({ onContinue }) {
+    return (_jsxs("div", { className: "mx-auto max-w-sm rounded-lg bg-base-100 p-4 text-center ring-1 ring-base-300", children: [_jsx(Icon, { name: "mic", size: "lg" }), _jsx("h2", { className: "mt-2 text-lg font-semibold", children: "Let your browser use the microphone" }), _jsx("p", { className: "mt-1 text-sm text-base-content/75", children: "Your browser is about to ask. Nothing is recorded, and nothing is sent anywhere until you press the microphone button in a room." }), _jsx(Button, { className: "mt-3", onClick: onContinue, children: "Continue" })] }));
+}
+//# sourceMappingURL=DevicePanel.js.map

package/dist/DevicePanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DevicePanel.js","sourceRoot":"","sources":["../src/DevicePanel.tsx"],"names":[],"mappings":"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"}

package/dist/Knocks.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Somebody is at the door, and what happens next.
+ *
+ * Two sides of the same moment. Inside the room, a knock with a name and two
+ * buttons. Outside, feedback that the knock was sent and then a clear outcome —
+ * because the worst version of this feature is knocking into silence and never
+ * learning whether anybody saw it.
+ *
+ * Admitting lets that one person in without unlocking the room for anybody else,
+ * and the card says so, because "let them in" reads like "open the door".
+ */
+export interface IncomingKnock {
+    knockId: string;
+    roomId: string;
+    userId: string;
+    displayName: string;
+    photoUrl?: string;
+    /** True when everybody inside is on do not disturb: it arrived without a sound. */
+    silent: boolean;
+}
+export interface KnockDockProps {
+    knocks: IncomingKnock[];
+    onAdmit(knockId: string): void;
+    onDecline(knockId: string): void;
+}
+export declare function KnockDock({ knocks, onAdmit, onDecline }: KnockDockProps): import("react").JSX.Element | null;
+export type KnockOutcome = 'waiting' | 'admitted' | 'declined' | 'expired' | 'refused';
+export interface OutgoingKnockProps {
+    roomName: string;
+    outcome: KnockOutcome;
+    /** The reason, when the knock was refused outright — rate limited, say. */
+    message?: string | null;
+    /** True when it arrived silently, so the knocker knows why it may go unanswered. */
+    silent?: boolean;
+    onDismiss(): void;
+}
+/**
+ * What the person who knocked sees.
+ *
+ * Every outcome is said plainly, **including the one where nobody answered**,
+ * because an unanswered knock is otherwise indistinguishable from a broken one.
+ * A refusal says why: repeated knocking is rate limited, and a button that
+ * appears to do nothing is worse than a button that says no.
+ */
+export declare function OutgoingKnock({ roomName, outcome, message, silent, onDismiss, }: OutgoingKnockProps): import("react").JSX.Element;
+//# sourceMappingURL=Knocks.d.ts.map

package/dist/Knocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Knocks.d.ts","sourceRoot":"","sources":["../src/Knocks.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mFAAmF;IACnF,MAAM,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,SAAS,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;CACjC;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,cAAc,sCA4CvE;AAED,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,CAAA;AAEtF,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,YAAY,CAAA;IACrB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,oFAAoF;IACpF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,IAAI,IAAI,CAAA;CAClB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAc,EACd,SAAS,GACV,EAAE,kBAAkB,+BAgDpB"}

package/dist/Knocks.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Icon } from '@unityevolv/unitykit';
+import { useEffect } from 'react';
+export function KnockDock({ knocks, onAdmit, onDecline }) {
+    if (knocks.length === 0)
+        return null;
+    return (
+    // A section rather than a div: an aria-label on a plain div is exposed to
+    // nothing, so the label would have been decoration. As a landmark it is
+    // something somebody can jump to while a colleague waits outside.
+    _jsx("section", { className: "pointer-events-auto absolute bottom-4 right-4 z-30 flex w-72 flex-col gap-2", "aria-label": "People knocking", children: knocks.map((knock) => (_jsxs("div", { className: "rounded-lg bg-base-100 p-3 shadow-lg ring-1 ring-base-300", "data-testid": `knock-${knock.knockId}`, children: [_jsxs("p", { className: "flex items-center gap-2 text-sm", children: [_jsx(Icon, { name: "knock", size: "sm" }), _jsxs("span", { children: [_jsx("strong", { children: knock.displayName }), " would like to come in."] })] }), _jsxs("div", { className: "mt-2 flex gap-2", children: [_jsx(Button, { size: "sm", onClick: () => onAdmit(knock.knockId), children: "Let them in" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => onDecline(knock.knockId), children: "Not now" })] }), _jsx("p", { className: "mt-1.5 text-xs text-base-content/60", children: "Letting them in does not unlock the room for anyone else." })] }, knock.knockId))) }));
+}
+/**
+ * What the person who knocked sees.
+ *
+ * Every outcome is said plainly, **including the one where nobody answered**,
+ * because an unanswered knock is otherwise indistinguishable from a broken one.
+ * A refusal says why: repeated knocking is rate limited, and a button that
+ * appears to do nothing is worse than a button that says no.
+ */
+export function OutgoingKnock({ roomName, outcome, message, silent = false, onDismiss, }) {
+    // Anything final clears itself after a few seconds. Only "waiting" stays, for
+    // as long as the waiting does.
+    useEffect(() => {
+        if (outcome === 'waiting')
+            return;
+        const timer = setTimeout(onDismiss, 6000);
+        return () => clearTimeout(timer);
+    }, [outcome, onDismiss]);
+    const text = {
+        waiting: silent
+            ? `Knocked on ${roomName}. Everybody inside is on do not disturb, so it arrived silently.`
+            : `Knocked on ${roomName}. Waiting for an answer…`,
+        admitted: `You were let into ${roomName}.`,
+        declined: `Not right now — try ${roomName} again in a bit.`,
+        expired: `Nobody answered in ${roomName}.`,
+        refused: message ?? 'That knock could not be sent.',
+    };
+    const tone = outcome === 'admitted'
+        ? 'bg-success text-success-content'
+        : outcome === 'waiting'
+            ? 'bg-base-100 text-base-content ring-1 ring-base-300'
+            : 'bg-base-300 text-base-content';
+    return (_jsx("div", { role: "status", "data-testid": "outgoing-knock", className: ['pointer-events-auto rounded-lg px-3 py-2 text-sm shadow-lg', tone].join(' '), children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Icon, { name: outcome === 'admitted' ? 'check' : 'knock', size: "sm" }), _jsx("span", { children: text[outcome] }), _jsx("button", { type: "button", onClick: onDismiss, "aria-label": "Dismiss", className: "ml-auto rounded p-0.5 hover:bg-base-200/50 focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(Icon, { name: "close", size: "xs" }) })] }) }));
+}
+//# sourceMappingURL=Knocks.js.map

package/dist/Knocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Knocks.js","sourceRoot":"","sources":["../src/Knocks.tsx"],"names":[],"mappings":"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"}

package/dist/OfficeMap.d.ts

@@ -0,0 +1,69 @@
+import type { OfficeState } from '@unityevolv/ofiskit-realtime-client';
+import { type Room, type Template } from '@unityevolv/ofiskit-template';
+import type { LiveReaction } from './useCall.js';
+/**
+ * The office: the background image with rooms drawn over it, and people in them.
+ *
+ * The picture is the point of the product, and it is also the hardest thing here
+ * to use without sight or a mouse. So the map is a landmark region, every room is
+ * a labelled group in reading order, arrow keys move between rooms, Enter joins or
+ * knocks, and there is a list view carrying exactly the same state and the same
+ * actions for anybody who would rather not have a picture at all.
+ *
+ * Nothing is drawn directly onto the image. Every bar, avatar and dot is a kit
+ * surface with its own contrast, because the image is whatever an author
+ * generated and nothing legible can be guaranteed on top of it.
+ */
+export interface OfficeMapProps {
+    template: Template;
+    state: OfficeState;
+    /** Turns a template's image name into something the browser can fetch. */
+    imageUrl(name: string): string;
+    /** Capacity is an office setting; the free office has none. */
+    capacityOf?(room: Room): number | null;
+    /**
+     * Reactions in the air, by person. From `useReactions`.
+     *
+     * By person rather than by device here, because an avatar is a person — the same
+     * reaction is keyed by device for the tiles, which are screens.
+     */
+    reactions?: ReadonlyMap<string, LiveReaction[]>;
+    onJoin(roomId: string): void;
+    onKnock(roomId: string): void;
+    onLock(roomId: string): void;
+    onUnlock(roomId: string): void;
+}
+export declare function OfficeMap(props: OfficeMapProps): import("react").JSX.Element;
+/**
+ * The same office as a list.
+ *
+ * The accessible alternative to the map, and genuinely useful on a small laptop
+ * where the picture is too small to click. It shows the same state, offers the
+ * same actions and updates from the same realtime state, so the two can never
+ * disagree — which is the only reason it is safe to offer at all.
+ */
+export declare function RoomListView(props: OfficeMapProps): import("react").JSX.Element;
+/** Which of the two views somebody is looking at. Remembered, because it is a preference. */
+export type OfficeView = 'map' | 'list';
+export declare function ViewToggle({ view, onChange, }: {
+    view: OfficeView;
+    onChange(view: OfficeView): void;
+}): import("react").JSX.Element;
+/**
+ * Hide everything but the office.
+ *
+ * Exported from here although this app has no chrome to hide: the control belongs
+ * to the shared package because the wrapper's app shell is what it hides, and a
+ * second copy of it there would be a second set of behaviour to keep right.
+ *
+ * Somebody who works maximised should not have to set it every session, so the
+ * choice is remembered. Escape gets out, because a mode with no visible way back
+ * is a trap.
+ */
+export declare function useMaximised(): [boolean, (next: boolean) => void];
+/** The control that toggles it, so the label and the icon stay in one place. */
+export declare function MaximiseButton({ maximised, onToggle, }: {
+    maximised: boolean;
+    onToggle(): void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=OfficeMap.d.ts.map

package/dist/OfficeMap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OfficeMap.d.ts","sourceRoot":"","sources":["../src/OfficeMap.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAA4B,MAAM,qCAAqC,CAAA;AAEhG,OAAO,EAAW,KAAK,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,8BAA8B,CAAA;AAShF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAGhD;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,QAAQ,CAAA;IAClB,KAAK,EAAE,WAAW,CAAA;IAClB,0EAA0E;IAC1E,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,+DAA+D;IAC/D,UAAU,CAAC,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAA;IACtC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;IAC/C,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,OAAO,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAuP9C;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,+BA4DjD;AAuED,6FAA6F;AAC7F,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,MAAM,CAAA;AAEvC,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,UAAU,CAAA;IAChB,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAA;CACjC,+BAuBA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,CAajE;AAED,gFAAgF;AAChF,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,QAAQ,GACT,EAAE;IACD,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,IAAI,IAAI,CAAA;CACjB,+BAYA"}

package/dist/OfficeMap.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon } from '@unityevolv/unitykit';
+import { callIn, isLocked, occupancy, peopleIn, yourRoom } from '@unityevolv/ofiskit-realtime-client';
+import { barRect } from '@unityevolv/ofiskit-template';
+import { useCallback, useEffect, useState } from 'react';
+import { OverflowAvatar } from './Overflow.js';
+import { PersonAvatar } from './PersonAvatar.js';
+import { RoomBar } from './RoomBar.js';
+import { fitCanvas, readingOrder, roomInDirection, toPixels } from './layout.js';
+import { placeInRoom } from './placement.js';
+import { useMeasured, usePersisted, useReducedMotion } from './hooks.js';
+import { useTheme } from './theme.js';
+export function OfficeMap(props) {
+    const { template, state, imageUrl, capacityOf, reactions } = props;
+    const { theme } = useTheme();
+    const reducedMotion = useReducedMotion();
+    // Measured rather than guessed: the map shares its space with the tile strip,
+    // which appears and disappears as calls start and end.
+    const [container, box] = useMeasured();
+    const [focused, setFocused] = useState(null);
+    const canvas = fitCanvas(template.canvas, box);
+    const ordered = readingOrder(template.rooms);
+    const yourRoomId = yourRoom(state);
+    /**
+     * The template's dark image in dark mode, the light one otherwise.
+     *
+     * Swapped in place without reloading the office, so changing theme mid-call is a
+     * repaint rather than an interruption. Theme is per person, so two people in the
+     * same room may be looking at different pictures over identical geometry.
+     */
+    const background = theme === 'dark' && template.images.dark ? template.images.dark : template.images.light;
+    const onKeyDown = useCallback((event, room) => {
+        /*
+         * Only keys pressed on the room itself.
+         *
+         * The room is a focusable group with controls inside it — Join, Lock, Knock,
+         * the overflow counter — and a key pressed on any of them bubbles up to here.
+         * Handling it here as well turned Enter on Lock into nothing, Enter on the
+         * counter into walking into the room, and the arrow keys inside the counter's
+         * list into jumping to the next room. React carries events up through
+         * portals too, so the counter's popover is inside this group as far as this
+         * handler is concerned, even though it is drawn somewhere else in the page.
+         */
+        if (event.target !== event.currentTarget)
+            return;
+        const directions = {
+            ArrowLeft: 'left',
+            ArrowRight: 'right',
+            ArrowUp: 'up',
+            ArrowDown: 'down',
+        };
+        const direction = directions[event.key];
+        if (direction) {
+            const next = roomInDirection(ordered, room, direction);
+            if (next) {
+                event.preventDefault();
+                setFocused(next.id);
+                container.current?.querySelector(`[data-room="${next.id}"]`)?.focus();
+            }
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (room.id === yourRoomId)
+                return;
+            if (isLocked(state, room.id))
+                props.onKnock(room.id);
+            else
+                props.onJoin(room.id);
+        }
+    }, [container, ordered, state, yourRoomId, props]);
+    return (_jsxs("section", { ref: container, "aria-label": `${template.name} office map`, className: "relative h-full w-full overflow-hidden bg-base-200", children: [!state.ready && (_jsx("p", { className: "absolute inset-x-0 top-1/2 text-center text-sm text-base-content/60", role: "status", children: "Looking around the office\u2026" })), canvas.width > 0 && state.ready && (_jsxs(_Fragment, { children: [_jsx("img", { src: imageUrl(background), alt: "", "aria-hidden": "true", draggable: false, className: "absolute select-none", style: {
+                            left: canvas.left,
+                            top: canvas.top,
+                            width: canvas.width,
+                            height: canvas.height,
+                        } }), ordered.map((room) => {
+                        const pixels = toPixels(room.rect, canvas);
+                        const people = peopleIn(state, room.id);
+                        const locked = isLocked(state, room.id);
+                        const capacity = capacityOf?.(room) ?? null;
+                        const inside = room.id === yourRoomId;
+                        const count = occupancy(state, room.id);
+                        const call = callIn(state, room.id);
+                        const placement = placeInRoom(room, people, template.canvas, template.avatarSize);
+                        const bar = toPixels(barRect(room.rect, room.bar, template.canvas), canvas);
+                        return (_jsxs("div", { "data-room": room.id, role: "group", tabIndex: 0, "aria-label": [
+                                room.name,
+                                room.type === 'break' ? 'break room' : room.type,
+                                `${count} ${count === 1 ? 'person' : 'people'}`,
+                                capacity === null ? '' : `of ${capacity}`,
+                                // Announced while arrowing between rooms, which is how somebody
+                                // who cannot see the map decides where to go. Without it the call
+                                // is drawn on the bar and said nowhere.
+                                call
+                                    ? `call with ${call.participants.length} ${call.participants.length === 1 ? 'person' : 'people'}${call.participants.length >= call.limit ? ', full' : ''}`
+                                    : '',
+                                locked ? 'locked' : 'open',
+                                inside ? 'you are here' : locked ? 'press Enter to knock' : 'press Enter to join',
+                            ]
+                                .filter(Boolean)
+                                .join(', '), onKeyDown: (event) => onKeyDown(event, room), onFocus: () => setFocused(room.id), className: [
+                                'absolute rounded-md outline-offset-2',
+                                'focus-visible:outline-2 focus-visible:outline-primary',
+                                inside ? 'ring-2 ring-primary' : 'ring-1 ring-base-content/10',
+                                focused === room.id ? 'z-20' : 'z-10',
+                            ].join(' '), style: {
+                                left: pixels.left,
+                                top: pixels.top,
+                                width: pixels.width,
+                                height: pixels.height,
+                            }, children: [_jsx("div", { className: "pointer-events-none absolute z-10", style: { left: 0, top: bar.top - pixels.top, width: pixels.width }, children: _jsx(RoomBar, { room: room, occupancy: count, capacity: capacity, locked: locked, inside: inside, call: call, width: pixels.width, onJoin: () => props.onJoin(room.id), onKnock: () => props.onKnock(room.id), onLock: () => props.onLock(room.id), onUnlock: () => props.onUnlock(room.id) }) }), _jsxs("ul", { className: "contents", "aria-label": `People in ${room.name}`, children: [placement.placed.map(({ token, rect }) => {
+                                            const cell = toPixels(rect, canvas);
+                                            return (_jsx("li", { className: "absolute flex items-start justify-center", style: {
+                                                    left: cell.left - pixels.left,
+                                                    top: cell.top - pixels.top,
+                                                    width: cell.width,
+                                                    height: cell.height,
+                                                    // A move is a position change, so the browser animates
+                                                    // it and the eye can follow who went where. Reduced
+                                                    // motion means they simply appear in the new room.
+                                                    transition: reducedMotion ? undefined : 'left 220ms ease, top 220ms ease',
+                                                }, children: _jsx(PersonAvatar, { person: token.person, size: cell.width, ...(token.deviceId ? { deviceId: token.deviceId } : {}), linked: token.linked, reducedMotion: reducedMotion, reactions: reactions?.get(token.person.userId) ?? [] }) }, token.key));
+                                        }), placement.overflowAt &&
+                                            (() => {
+                                                const cell = toPixels(placement.overflowAt, canvas);
+                                                return (_jsx("li", { className: "absolute flex items-start justify-center", style: {
+                                                        left: cell.left - pixels.left,
+                                                        top: cell.top - pixels.top,
+                                                        width: cell.width,
+                                                        height: cell.height,
+                                                    }, children: _jsx(OverflowAvatar, { roomName: room.name, tokens: placement.overflow, size: cell.width, reducedMotion: reducedMotion, ...(reactions ? { reactions } : {}) }) }));
+                                            })()] })] }, room.id));
+                    })] }))] }));
+}
+/**
+ * The same office as a list.
+ *
+ * The accessible alternative to the map, and genuinely useful on a small laptop
+ * where the picture is too small to click. It shows the same state, offers the
+ * same actions and updates from the same realtime state, so the two can never
+ * disagree — which is the only reason it is safe to offer at all.
+ */
+export function RoomListView(props) {
+    const { template, state, capacityOf, reactions } = props;
+    const yourRoomId = yourRoom(state);
+    const reducedMotion = useReducedMotion();
+    if (!state.ready) {
+        return (_jsx("nav", { "aria-label": `${template.name} rooms`, className: "h-full overflow-auto p-2", children: _jsx("p", { className: "p-2 text-sm text-base-content/60", role: "status", children: "Looking around the office\u2026" }) }));
+    }
+    /*
+     * The two rooms every office has come first, side by side, and then everything
+     * else in the order the map reads.
+     *
+     * Reception is where everybody arrives and the break room is where they go to
+     * step away, so they are the two rooms somebody looks for without knowing the
+     * office — and they are the same two in every office, which makes the top of the
+     * list the one part of it that never moves. Placed first rather than wherever the
+     * author drew them, so a phone shows them without scrolling.
+     */
+    const ordered = readingOrder(template.rooms);
+    const shared = ['reception', 'break'].flatMap((type) => ordered.filter((room) => room.type === type));
+    const rest = ordered.filter((room) => room.type !== 'reception' && room.type !== 'break');
+    const card = (room, half) => (_jsx(RoomCard, { room: room, half: half, people: peopleIn(state, room.id), locked: isLocked(state, room.id), inside: room.id === yourRoomId, call: callIn(state, room.id), capacity: capacityOf?.(room) ?? null, reducedMotion: reducedMotion, ...(reactions ? { reactions } : {}), onJoin: () => props.onJoin(room.id), onKnock: () => props.onKnock(room.id), onLock: () => props.onLock(room.id), onUnlock: () => props.onUnlock(room.id) }, room.id));
+    return (_jsx("nav", { "aria-label": `${template.name} rooms`, className: "h-full overflow-auto p-2", children: _jsxs("ul", { className: "grid grid-cols-2 gap-2", children: [shared.map((room) => card(room, true)), rest.map((room) => card(room, false))] }) }));
+}
+/**
+ * One room in the list: its bar, and the people in it.
+ *
+ * A half-width card measures itself, because on a narrow phone half the screen is
+ * too little for a room bar's full form: without the compact one, the name is what
+ * gets crushed. A full-width card never needs to — it is the width somebody chose
+ * this view for, and there is no room rectangle constraining it.
+ */
+function RoomCard(props) {
+    const { room, half, people } = props;
+    const [measured, size] = useMeasured();
+    // Until the first measurement arrives, assume there is room: a bar that starts in
+    // its full form and tightens is better than one that starts cramped.
+    const width = half && size.width > 0 ? size.width : Number.MAX_SAFE_INTEGER;
+    return (_jsxs("li", { ref: measured, className: [
+            'min-w-0 rounded-lg bg-base-100 p-2 ring-1 ring-base-300',
+            half ? '' : 'col-span-2',
+        ].join(' '), children: [_jsx(RoomBar, { room: room, occupancy: people.length, capacity: props.capacity, locked: props.locked, inside: props.inside, call: props.call, width: width, onJoin: props.onJoin, onKnock: props.onKnock, onLock: props.onLock, onUnlock: props.onUnlock }), people.length > 0 && (_jsx("ul", { className: "mt-2 flex flex-wrap gap-3 px-1", "aria-label": `People in ${room.name}`, children: people.map((person) => (_jsx("li", { children: _jsx(PersonAvatar, { person: person, size: 56, reducedMotion: props.reducedMotion, reactions: props.reactions?.get(person.userId) ?? [] }) }, person.userId))) }))] }));
+}
+export function ViewToggle({ view, onChange, }) {
+    return (_jsx("div", { className: "inline-flex rounded-md ring-1 ring-base-300", role: "group", "aria-label": "Office view", children: ['map', 'list'].map((candidate) => (_jsxs("button", { type: "button", onClick: () => onChange(candidate), "aria-pressed": view === candidate, className: [
+                'inline-flex min-h-8 items-center gap-1 px-2 py-1 text-xs first:rounded-l-md last:rounded-r-md',
+                'focus-visible:outline-2 focus-visible:outline-primary',
+                view === candidate ? 'bg-primary text-primary-content' : 'hover:bg-base-200',
+            ].join(' '), children: [_jsx(Icon, { name: candidate === 'map' ? 'office' : 'menu', size: "xs" }), _jsx("span", { className: "max-sm:sr-only", children: candidate === 'map' ? 'Map' : 'List' })] }, candidate))) }));
+}
+/**
+ * Hide everything but the office.
+ *
+ * Exported from here although this app has no chrome to hide: the control belongs
+ * to the shared package because the wrapper's app shell is what it hides, and a
+ * second copy of it there would be a second set of behaviour to keep right.
+ *
+ * Somebody who works maximised should not have to set it every session, so the
+ * choice is remembered. Escape gets out, because a mode with no visible way back
+ * is a trap.
+ */
+export function useMaximised() {
+    const [maximised, setMaximised] = usePersisted('ofiskit:maximised', false);
+    useEffect(() => {
+        if (!maximised)
+            return;
+        const onKey = (event) => {
+            if (event.key === 'Escape')
+                setMaximised(false);
+        };
+        globalThis.addEventListener('keydown', onKey);
+        return () => globalThis.removeEventListener('keydown', onKey);
+    }, [maximised, setMaximised]);
+    return [maximised, setMaximised];
+}
+/** The control that toggles it, so the label and the icon stay in one place. */
+export function MaximiseButton({ maximised, onToggle, }) {
+    return (_jsxs("button", { type: "button", onClick: onToggle, className: "inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm hover:bg-base-200 focus-visible:outline-2 focus-visible:outline-primary", "aria-pressed": maximised, children: [_jsx(Icon, { name: maximised ? 'minimize' : 'maximize', size: "sm" }), maximised ? 'Restore' : 'Maximise'] }));
+}
+//# sourceMappingURL=OfficeMap.js.map

package/dist/OfficeMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OfficeMap.js","sourceRoot":"","sources":["../src/OfficeMap.tsx"],"names":[],"mappings":"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"}

package/dist/Overflow.d.ts

@@ -0,0 +1,41 @@
+import type { Token } from './placement.js';
+import type { LiveReaction } from './useCall.js';
+/**
+ * The people a room has no cell for.
+ *
+ * User areas are display slots, not seats, so a room can hold more people than it
+ * has cells — and when it does, the last cell counts the rest. The counter is drawn
+ * **as an avatar** rather than as a badge: it takes a person's place in the room,
+ * it sits in a person's cell, and the thing it stands for is people. A small pill
+ * in a row of faces reads as a notification rather than as four more colleagues.
+ *
+ * Opening it shows those people the same way the room shows everybody else: as
+ * avatars, with their status and whatever they are doing in the call, three
+ * across and three down, scrolling for the rest. A list of names would be the one
+ * place in the office where people stopped looking like people.
+ */
+/** Three across and three down, then it scrolls. */
+export declare const OVERFLOW_COLUMNS = 3;
+export declare const OVERFLOW_ROWS = 3;
+/**
+ * How tall the list may be.
+ *
+ * Three rows, and the rest scroll: a room of forty people is a panel of nine faces
+ * and a scrollbar, not a panel taller than the map. Fewer when the screen has less
+ * room than that on either side of the counter — Radix measures what is available,
+ * and a short phone may have less than three rows' worth above or below. The
+ * subtraction is the panel's own padding.
+ */
+export declare const OVERFLOW_MAX_HEIGHT = "min(224px, calc(var(--radix-popover-content-available-height, 100vh) - 3.5rem))";
+export interface OverflowAvatarProps {
+    roomName: string;
+    /** Everyone the counter stands for, in arrival order. */
+    tokens: readonly Token[];
+    /** The room's cell width, so the counter is the size of the faces beside it. */
+    size: number;
+    reducedMotion?: boolean;
+    /** Reactions by person. The same map the room's avatars read. */
+    reactions?: ReadonlyMap<string, LiveReaction[]>;
+}
+export declare function OverflowAvatar({ roomName, tokens, size, reducedMotion, reactions, }: OverflowAvatarProps): import("react").JSX.Element;
+//# sourceMappingURL=Overflow.d.ts.map

package/dist/Overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overflow.d.ts","sourceRoot":"","sources":["../src/Overflow.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD;;;;;;;;;;;;;GAaG;AAEH,oDAAoD;AACpD,eAAO,MAAM,gBAAgB,IAAI,CAAA;AACjC,eAAO,MAAM,aAAa,IAAI,CAAA;AAY9B;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,oFAAmI,CAAA;AAenK,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAA;IAChB,yDAAyD;IACzD,MAAM,EAAE,SAAS,KAAK,EAAE,CAAA;IACxB,gFAAgF;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,iEAAiE;IACjE,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,EAAE,YAAY,EAAE,CAAC,CAAA;CAChD;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,aAAqB,EACrB,SAAS,GACV,EAAE,mBAAmB,+BA8ErB"}