@unityevolv/ofiskit-ui-map 0.1.0

package/dist/Overflow.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover } from '@unityevolv/unitykit';
+import { PersonAvatar } from './PersonAvatar.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 const OVERFLOW_COLUMNS = 3;
+export const OVERFLOW_ROWS = 3;
+/** Each avatar in the grid, in pixels. Fixed, because the room's cells can be tiny. */
+const CELL = 60;
+/**
+ * One row: the face, the name under it, and room above it for a raised hand, which
+ * sits outside the circle on purpose and would otherwise be clipped by the row
+ * above.
+ */
+const ROW = 72;
+const GAP = 4;
+/**
+ * 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 const OVERFLOW_MAX_HEIGHT = `min(${OVERFLOW_ROWS * ROW + (OVERFLOW_ROWS - 1) * GAP}px, calc(var(--radix-popover-content-available-height, 100vh) - 3.5rem))`;
+/**
+ * Give the popover's dialog the list's name.
+ *
+ * The kit's Popover renders Radix's content as `role="dialog"` and has no prop to
+ * name it, so without this every screen reader announces an unnamed dialog before
+ * it reaches the list. Set from inside, once the list is mounted, because the
+ * dialog is the list's own ancestor and nothing outside the popover can reach it.
+ * Worth moving into the kit, where every popover would get it.
+ */
+const nameTheDialog = (name) => (node) => {
+    node?.closest('[role="dialog"]')?.setAttribute('aria-label', name);
+};
+export function OverflowAvatar({ roomName, tokens, size, reducedMotion = false, reactions, }) {
+    const count = tokens.length;
+    // The same proportions as a person's avatar, so the counter lines up with the
+    // row it is in rather than looking like something laid on top of it.
+    const face = Math.round(size * 0.62);
+    const label = `+${count}`;
+    return (_jsx(Popover, { width: "auto", trigger: _jsxs("button", { type: "button", "aria-label": `${count} more in ${roomName}. Activate to see them.`, "data-testid": "overflow-avatar", className: "flex cursor-pointer select-none flex-col items-center gap-1 rounded-lg focus-visible:outline-2 focus-visible:outline-primary", style: { width: size }, children: [_jsx("span", { "aria-hidden": "true", className: "grid place-items-center rounded-full bg-neutral font-semibold text-neutral-content ring-1 ring-base-300", 
+                    // Three characters from +10 upwards, so the digits shrink rather than
+                    // spill out of the circle.
+                    style: {
+                        width: face,
+                        height: face,
+                        fontSize: Math.max(10, face * (label.length > 2 ? 0.32 : 0.38)),
+                    }, children: label }), _jsx("span", { "aria-hidden": "true", className: "max-w-full truncate rounded bg-base-100/85 px-1 text-center leading-tight text-base-content backdrop-blur-[2px]", style: { fontSize: Math.max(9, size * 0.17) }, children: "more" })] }), children: _jsx("ul", { "aria-label": `${count} more in ${roomName}`, "data-testid": "overflow-grid", 
+            /*
+              Focusable, so the keyboard can scroll it.
+    
+              Nothing inside is focusable — an avatar here is a picture of a person, not
+              a control — so without this the people after the ninth could be seen with
+              a mouse wheel and reached by nobody else. Being the first thing that takes
+              focus also means the popover opens onto a named list rather than onto its
+              own frame.
+            */
+            tabIndex: 0, ref: nameTheDialog(`${count} more in ${roomName}`), className: "grid overflow-y-auto overscroll-contain rounded focus-visible:outline-2 focus-visible:outline-primary", style: {
+                gridTemplateColumns: `repeat(${OVERFLOW_COLUMNS}, ${CELL}px)`,
+                gridAutoRows: `${ROW}px`,
+                gap: GAP,
+                maxHeight: OVERFLOW_MAX_HEIGHT,
+            }, children: tokens.map((token) => (_jsx("li", { className: "flex justify-center pt-2.5", children: _jsx(PersonAvatar, { person: token.person, size: CELL, ...(token.deviceId ? { deviceId: token.deviceId } : {}), linked: token.linked, reducedMotion: reducedMotion, reactions: reactions?.get(token.person.userId) ?? [] }) }, token.key))) }) }));
+}
+//# sourceMappingURL=Overflow.js.map

package/dist/Overflow.js.map

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

package/dist/PersonAvatar.d.ts

@@ -0,0 +1,32 @@
+import type { PublicPresence } from '@unityevolv/ofiskit-realtime-client';
+import type { LiveReaction } from './useCall.js';
+/**
+ * One person, standing in a room.
+ *
+ * Drawn as a kit surface rather than straight onto the background image: the
+ * image is whatever an author generated, and nothing legible can be guaranteed on
+ * top of it. Everything here has its own background and its own contrast in both
+ * themes.
+ */
+export interface PersonAvatarProps {
+    person: PublicPresence;
+    /** The avatar cell's width in pixels, from the template's avatar size. */
+    size: number;
+    /**
+     * Which of this person's devices this avatar is for.
+     *
+     * Somebody here on two devices is drawn twice, one avatar per device, because
+     * each is a real screen with its own camera and microphone. Both are the same
+     * person, and the pair says so.
+     */
+    deviceId?: string;
+    /** Linked to another avatar for the same person, so the pair reads as one. */
+    linked?: boolean;
+    /** Drops the pulse on the speaking ring. The ring itself stays. */
+    reducedMotion?: boolean;
+    /** What is in the air over this person right now. From `useReactions`. */
+    reactions?: readonly LiveReaction[];
+    onClick?(): void;
+}
+export declare function PersonAvatar({ person, size, deviceId, linked, reducedMotion, reactions, onClick, }: PersonAvatarProps): import("react").JSX.Element;
+//# sourceMappingURL=PersonAvatar.d.ts.map

package/dist/PersonAvatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonAvatar.d.ts","sourceRoot":"","sources":["../src/PersonAvatar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AAKzE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD;;;;;;;GAOG;AAEH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,cAAc,CAAA;IACtB,0EAA0E;IAC1E,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,mEAAmE;IACnE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,SAAS,YAAY,EAAE,CAAA;IACnC,OAAO,CAAC,IAAI,IAAI,CAAA;CACjB;AAmCD,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,MAAc,EACd,aAAqB,EACrB,SAAS,EACT,OAAO,GACR,EAAE,iBAAiB,+BAoMnB"}

package/dist/PersonAvatar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, Tooltip } from '@unityevolv/unitykit';
+import { handRaised, isMuted, isPhoneOnly, isSharing, isSpeaking } from '@unityevolv/ofiskit-realtime-client';
+import { ReactionFloat } from './Reactions.js';
+import { StatusDot, describeStatus } from './status.js';
+/**
+ * A phone, drawn here rather than imported.
+ *
+ * The kit's icon set has no phone in it, and `ofiskit/no-lucide-direct` exists to
+ * stop anybody reaching around the kit for one — an icon from outside is a
+ * different weight from every other icon in the product. Drawn inline instead, in
+ * `currentColor`, which is the same thing `status.tsx` does for the status shapes
+ * and for the same reason. It is decoration: the avatar's label already says "on a
+ * phone".
+ */
+function PhoneGlyph({ size }) {
+    return (_jsxs("svg", { viewBox: "0 0 12 12", width: size, height: size, "aria-hidden": "true", focusable: "false", children: [_jsx("rect", { x: "3.25", y: "1", width: "5.5", height: "10", rx: "1.25", fill: "none", stroke: "currentColor", strokeWidth: "1.25" }), _jsx("rect", { x: "5", y: "9", width: "2", height: "0.9", rx: "0.45", fill: "currentColor" })] }));
+}
+function initials(name) {
+    const parts = name.trim().split(/\s+/).slice(0, 2);
+    return parts.map((part) => part[0]?.toUpperCase() ?? '').join('') || '?';
+}
+export function PersonAvatar({ person, size, deviceId, linked = false, reducedMotion = false, reactions, onClick, }) {
+    const device = deviceId ? person.devices.find((one) => one.deviceId === deviceId) : undefined;
+    const reconnecting = person.status === 'reconnecting';
+    /*
+     * What the call looks like from the map.
+     *
+     * Per device where this avatar *is* a device, and across the person otherwise —
+     * somebody drawn once while in the call from a laptop and a phone is speaking if
+     * either of them is, and muted only if both are.
+     */
+    const speaking = device ? device.inCall && device.speaking : isSpeaking(person);
+    const microphoneOff = device ? device.inCall && device.muted : isMuted(person);
+    const sharing = device ? device.sharing : isSharing(person);
+    const hand = device ? device.inCall && device.handRaisedAt !== null : handRaised(person);
+    const face = Math.round(size * 0.62);
+    const description = describeStatus(person.status, person.custom);
+    /**
+     * One label carrying everything the picture says.
+     *
+     * Drawing is not telling: a badge in the corner of an avatar is invisible to a
+     * screen reader unless it is in here, and status is the whole reason somebody
+     * decides whether to walk into a room.
+     */
+    const label = [
+        person.displayName,
+        description,
+        linked ? `also here on another device${device ? ` (this one is ${device.kind})` : ''}` : '',
+        isPhoneOnly(person) ? 'on a phone' : '',
+        // Every badge drawn in a corner of this avatar, said. A ring on a picture is
+        // invisible to a screen reader, and "who is talking" is most of what somebody
+        // wants from a room they cannot see.
+        hand ? 'hand raised' : '',
+        sharing ? 'sharing their screen' : '',
+        microphoneOff ? 'microphone off' : '',
+        speaking ? 'speaking' : '',
+    ]
+        .filter(Boolean)
+        .join(', ');
+    const body = (_jsxs("span", { className: "flex select-none flex-col items-center gap-1", style: { width: size }, "data-testid": "person-avatar", children: [_jsxs("span", { className: "relative inline-flex", style: { width: face, height: face }, children: [_jsx(ReactionFloat, { reactions: reactions ?? [], size: Math.max(16, Math.round(face * 0.5)) }), linked && (_jsx("span", { "aria-hidden": "true", className: "absolute -inset-1 rounded-full ring-2 ring-primary/50" })), speaking && (_jsx("span", { "aria-hidden": "true", className: [
+                            'absolute -inset-1 rounded-full ring-2 ring-primary',
+                            reducedMotion ? '' : 'animate-pulse',
+                        ].join(' ') })), person.photoUrl ? (_jsx("img", { src: person.photoUrl, alt: "", className: [
+                            'rounded-full bg-base-200 object-cover ring-1 ring-base-300',
+                            reconnecting ? 'opacity-50' : '',
+                        ].join(' '), style: { width: face, height: face } })) : (_jsx("span", { "aria-hidden": "true", className: [
+                            'grid place-items-center rounded-full bg-base-300 font-semibold text-base-content ring-1 ring-base-300',
+                            reconnecting ? 'opacity-50' : '',
+                        ].join(' '), style: { width: face, height: face, fontSize: Math.max(10, face * 0.38) }, children: initials(person.displayName) })), hand && (_jsx("span", { "aria-hidden": "true", className: "absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full bg-base-100 px-0.5 leading-none text-primary", children: _jsx(Icon, { name: "raise-hand", size: "xs" }) })), sharing && (_jsx("span", { "aria-hidden": "true", className: "absolute -right-1 -top-1 rounded-full bg-base-100 p-0.5 leading-none text-primary", children: _jsx(Icon, { name: "share", size: "xs" }) })), microphoneOff && (_jsx("span", { "aria-hidden": "true", className: "absolute -left-1 -top-1 rounded-full bg-base-100 p-0.5 leading-none text-base-content/70", children: _jsx(Icon, { name: "mic-off", size: "xs" }) })), _jsx("span", { className: "absolute -bottom-0.5 -right-0.5 rounded-full bg-base-100 p-px leading-none", children: _jsx(StatusDot, { status: person.status, size: Math.max(9, face * 0.3), labelled: false }) }), isPhoneOnly(person) && (_jsx("span", { className: "absolute -bottom-1 -left-1 rounded-full bg-base-100 p-0.5 leading-none text-base-content/70", children: _jsx(PhoneGlyph, { size: Math.max(8, face * 0.26) }) }))] }), _jsx("span", { className: [
+                    'max-w-full truncate rounded px-1 text-center leading-tight',
+                    'bg-base-100/85 text-base-content backdrop-blur-[2px]',
+                    linked ? 'ring-1 ring-primary/60' : '',
+                ].join(' '), style: { fontSize: Math.max(9, size * 0.17) }, children: person.displayName })] }));
+    const content = onClick ? (_jsx("button", { type: "button", onClick: onClick, className: "cursor-pointer", "aria-label": label, children: body })) : (_jsx("span", { role: "img", "aria-label": label, children: body }));
+    // The custom status is shown on hover on the web, so the map is not covered in
+    // text while still carrying it for anybody who wants it.
+    return person.custom?.text ? _jsx(Tooltip, { content: description, children: content }) : content;
+}
+//# sourceMappingURL=PersonAvatar.js.map

package/dist/PersonAvatar.js.map

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

package/dist/Reactions.d.ts

@@ -0,0 +1,47 @@
+import type { Reaction } from '@unityevolv/ofiskit-realtime-client';
+import type { LiveReaction } from './useCall.js';
+/**
+ * Reacting without interrupting, and seeing that somebody did.
+ *
+ * Two pieces that belong together: the picker somebody sends from, and the float
+ * that appears over whoever sent it. Both are here so the set of reactions is read
+ * from one place and drawn the same way over a tile and over an avatar.
+ *
+ * **Nothing is stored.** A reaction floats for a few seconds and then it has
+ * stopped existing — not archived, not in the office state, not on the server.
+ * Somebody who was not looking missed it, which is what happens with a nod.
+ */
+export interface ReactionFloatProps {
+    /** What is in the air over this person right now. Empty draws nothing at all. */
+    reactions: readonly LiveReaction[];
+    /** Roughly how big to draw them, in pixels. A tile wants more than an avatar. */
+    size?: number;
+}
+/**
+ * The reactions in the air over one person.
+ *
+ * Absolutely positioned and `pointer-events-none`, so it can never take a click
+ * meant for the tile or the avatar underneath it — a reaction that swallows the
+ * mute button is worse than no reaction.
+ *
+ * Announced politely rather than drawn only. It is deliberately **not** assertive:
+ * applause must not interrupt a screen reader mid-sentence, which is the whole
+ * point of reacting this way rather than saying something.
+ */
+export declare function ReactionFloat({ reactions, size }: ReactionFloatProps): import("react").JSX.Element | null;
+export interface ReactionPickerProps {
+    onReact(reaction: Reaction): void;
+    disabled?: boolean;
+}
+/**
+ * The six, in a row.
+ *
+ * A row rather than a menu behind a menu: this is pressed in the middle of
+ * somebody else's sentence, and anything that takes two decisions will not be
+ * used. Every one is a real button with a real name, because an emoji on its own
+ * is not a label — "thumbs up" is.
+ */
+export declare function ReactionPicker({ onReact, disabled }: ReactionPickerProps): import("react").JSX.Element;
+/** The words a live region says when somebody reacts. Used by the host's announcer. */
+export declare function describeReaction(displayName: string, reaction: string): string;
+//# sourceMappingURL=Reactions.d.ts.map

package/dist/Reactions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reactions.d.ts","sourceRoot":"","sources":["../src/Reactions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAA;AAInE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAEhD;;;;;;;;;;GAUG;AAEH,MAAM,WAAW,kBAAkB;IACjC,iFAAiF;IACjF,SAAS,EAAE,SAAS,YAAY,EAAE,CAAA;IAClC,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,IAAS,EAAE,EAAE,kBAAkB,sCA4BzE;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAA;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,QAAgB,EAAE,EAAE,mBAAmB,+BA0BhF;AAmBD,uFAAuF;AACvF,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAG9E"}

package/dist/Reactions.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { REACTIONS } from '@unityevolv/ofiskit-realtime-client';
+import { useReducedMotion } from './hooks.js';
+/**
+ * The reactions in the air over one person.
+ *
+ * Absolutely positioned and `pointer-events-none`, so it can never take a click
+ * meant for the tile or the avatar underneath it — a reaction that swallows the
+ * mute button is worse than no reaction.
+ *
+ * Announced politely rather than drawn only. It is deliberately **not** assertive:
+ * applause must not interrupt a screen reader mid-sentence, which is the whole
+ * point of reacting this way rather than saying something.
+ */
+export function ReactionFloat({ reactions, size = 22 }) {
+    const reducedMotion = useReducedMotion();
+    if (reactions.length === 0)
+        return null;
+    return (_jsx("span", { className: "pointer-events-none absolute inset-x-0 bottom-1/3 z-20 flex items-end justify-center gap-0.5", "data-testid": "reaction-float", children: reactions.map((one) => (_jsx("span", { 
+            // A bob rather than a static badge, because a reaction that appears with
+            // no movement reads as a badge somebody earned rather than as a thing
+            // that just happened. Still, and still visible, under reduced motion.
+            className: ['leading-none drop-shadow', reducedMotion ? '' : 'animate-bounce'].join(' '), style: { fontSize: size }, children: _jsx("span", { "aria-hidden": "true", children: one.reaction }) }, one.id))) }));
+}
+/**
+ * The six, in a row.
+ *
+ * A row rather than a menu behind a menu: this is pressed in the middle of
+ * somebody else's sentence, and anything that takes two decisions will not be
+ * used. Every one is a real button with a real name, because an emoji on its own
+ * is not a label — "thumbs up" is.
+ */
+export function ReactionPicker({ onReact, disabled = false }) {
+    return (_jsx("div", { role: "group", "aria-label": "React", "data-testid": "reaction-picker", className: "flex items-center gap-0.5", children: REACTIONS.map((reaction) => (_jsx("button", { type: "button", disabled: disabled, onClick: () => onReact(reaction), "aria-label": `React with ${NAMES[reaction]}`, className: [
+                'inline-flex h-8 w-8 items-center justify-center rounded-lg text-lg leading-none',
+                'focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary',
+                disabled ? 'cursor-not-allowed opacity-40' : 'hover:bg-base-200',
+            ].join(' '), children: _jsx("span", { "aria-hidden": "true", children: reaction }) }, reaction))) }));
+}
+/**
+ * What each one is called.
+ *
+ * Here rather than in the protocol, because a name is for a person to read and the
+ * protocol carries what both sides must agree on. The keys are exhaustive against
+ * the set, so adding a reaction without naming it is a compile error rather than a
+ * button announced as "react with".
+ */
+const NAMES = {
+    '👍': 'thumbs up',
+    '👏': 'applause',
+    '🎉': 'celebration',
+    '😂': 'laughing',
+    '❤️': 'love',
+    '😮': 'surprise',
+};
+/** The words a live region says when somebody reacts. Used by the host's announcer. */
+export function describeReaction(displayName, reaction) {
+    const name = NAMES[reaction];
+    return name ? `${displayName} reacted: ${name}.` : `${displayName} reacted.`;
+}
+//# sourceMappingURL=Reactions.js.map

package/dist/Reactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reactions.js","sourceRoot":"","sources":["../src/Reactions.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAA;AAE/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAsB7C;;;;;;;;;;GAUG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,EAAE,EAAsB;IACxE,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAA;IACxC,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEvC,OAAO,CACL,eACE,SAAS,EAAC,8FAA8F,iBAC5F,gBAAgB,YAE3B,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACtB;YAEE,yEAAyE;YACzE,sEAAsE;YACtE,sEAAsE;YACtE,SAAS,EAAE,CAAC,0BAA0B,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACxF,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,YAOzB,8BAAkB,MAAM,YAAE,GAAG,CAAC,QAAQ,GAAQ,IAZzC,GAAG,CAAC,EAAE,CAaN,CACR,CAAC,GACG,CACR,CAAA;AACH,CAAC;AAOD;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAuB;IAC/E,OAAO,CACL,cACE,IAAI,EAAC,OAAO,gBACD,OAAO,iBACN,iBAAiB,EAC7B,SAAS,EAAC,2BAA2B,YAEpC,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3B,iBAEE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,gBACpB,cAAc,KAAK,CAAC,QAAQ,CAAC,EAAE,EAC3C,SAAS,EAAE;gBACT,iFAAiF;gBACjF,sFAAsF;gBACtF,QAAQ,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,mBAAmB;aACjE,CAAC,IAAI,CAAC,GAAG,CAAC,YAEX,8BAAkB,MAAM,YAAE,QAAQ,GAAQ,IAXrC,QAAQ,CAYN,CACV,CAAC,GACE,CACP,CAAA;AACH,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,KAAK,GAA6B;IACtC,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,UAAU;IAChB,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,UAAU;CACjB,CAAA;AAED,uFAAuF;AACvF,MAAM,UAAU,gBAAgB,CAAC,WAAmB,EAAE,QAAgB;IACpE,MAAM,IAAI,GAAG,KAAK,CAAC,QAAoB,CAAC,CAAA;IACxC,OAAO,IAAI,CAAC,CAAC,CAAC,GAAG,WAAW,aAAa,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,WAAW,WAAW,CAAA;AAC9E,CAAC"}

package/dist/RoomBar.d.ts

@@ -0,0 +1,43 @@
+import type { RoomCall } from '@unityevolv/ofiskit-realtime-client';
+import type { Room } from '@unityevolv/ofiskit-template';
+/**
+ * The bar on a room: its name, what is happening in it, and what you can do.
+ *
+ * Two rows. The action row carries the name, the occupancy, the lock state and
+ * the controls. The message row underneath explains why a control is disabled,
+ * and is collapsed entirely when there is nothing to say, so an ordinary open room
+ * does not carry a blank line.
+ *
+ * Controls that cannot be used are **disabled and visible, never hidden**. A
+ * person needs to know that joining is a thing that exists and why they cannot do
+ * it right now; a control that vanishes teaches them nothing. The server refuses
+ * the same action independently, so the disabled state is a convenience and never
+ * the control.
+ */
+export interface RoomBarProps {
+    room: Room;
+    occupancy: number;
+    /** Null when the office does not cap rooms, which the free office never does. */
+    capacity: number | null;
+    locked: boolean;
+    inside: boolean;
+    /**
+     * The call happening in this room, if there is one.
+     *
+     * Null in reception and the break room always, because neither hosts a call —
+     * and null in an ordinary room where nobody has started one yet. A room with a
+     * call in it is the single most useful thing on this bar: it is the difference
+     * between walking in on a conversation and joining one.
+     */
+    call?: RoomCall | null;
+    /** The identity adapter's answer, when the host has one. Never invented here. */
+    forbiddenReason?: string | null;
+    /** How wide the room is on screen, which decides how much the bar can show. */
+    width: number;
+    onJoin(): void;
+    onKnock(): void;
+    onLock(): void;
+    onUnlock(): void;
+}
+export declare function RoomBar(props: RoomBarProps): import("react").JSX.Element;
+//# sourceMappingURL=RoomBar.d.ts.map

package/dist/RoomBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoomBar.d.ts","sourceRoot":"","sources":["../src/RoomBar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qCAAqC,CAAA;AACnE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAGxD;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,iFAAiF;IACjF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,OAAO,CAAA;IACf;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IACtB,iFAAiF;IACjF,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,IAAI,IAAI,CAAA;IACd,OAAO,IAAI,IAAI,CAAA;IACf,MAAM,IAAI,IAAI,CAAA;IACd,QAAQ,IAAI,IAAI,CAAA;CACjB;AAsCD,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,+BA8N1C"}

package/dist/RoomBar.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Icon } from '@unityevolv/unitykit';
+import { hostsCalls } from '@unityevolv/ofiskit-template';
+/** Below this, the bar shows icons only and the name is truncated. */
+const COMPACT_BELOW = 190;
+/**
+ * Below this there is room for the name and the action and nothing else.
+ *
+ * A room this narrow is a room on a phone's map, where a bar is about 65 to 90
+ * pixels wide. The name at its two-character minimum, the gaps and a worded Join
+ * come to about 62, so a call badge beside them — even as a bare icon — would push
+ * Join off the bar's clipped edge.
+ */
+const TINY_BELOW = 110;
+export function RoomBar(props) {
+    const { room, occupancy, capacity, locked, inside, forbiddenReason, width } = props;
+    const compact = width < COMPACT_BELOW;
+    const tiny = width < TINY_BELOW;
+    const full = capacity !== null && occupancy >= capacity;
+    const lockable = hostsCalls(room.type);
+    /*
+     * The call, and whether there is a seat left in it.
+     *
+     * Two different fullnesses live on this bar and they are not the same thing: the
+     * room can have space for ten more people while the call in it has none, because
+     * the cap on the call is the provider's and the cap on the room is the office's.
+     * Saying "full" without saying which would send somebody away from a room they
+     * could have walked into.
+     */
+    const call = hostsCalls(room.type) ? (props.call ?? null) : null;
+    const callFull = call !== null && call.participants.length >= call.limit;
+    const actions = [];
+    if (!inside) {
+        if (locked) {
+            actions.push({
+                key: 'knock',
+                label: 'Knock',
+                onClick: props.onKnock,
+                disabled: Boolean(forbiddenReason),
+                ...(forbiddenReason ? { reason: forbiddenReason } : {}),
+                variant: 'secondary',
+            });
+        }
+        else {
+            // The adapter's reason wins over the room being full: "you are a guest" is
+            // more useful than "it is full", because one of them will still be true in
+            // ten minutes.
+            const reason = forbiddenReason ?? (full ? `${room.name} is full.` : undefined);
+            actions.push({
+                key: 'join',
+                label: 'Join',
+                onClick: props.onJoin,
+                disabled: Boolean(reason),
+                ...(reason ? { reason } : {}),
+                variant: 'primary',
+            });
+        }
+    }
+    else if (lockable) {
+        actions.push(locked
+            ? {
+                key: 'unlock',
+                label: 'Unlock',
+                icon: 'unlock',
+                onClick: props.onUnlock,
+                disabled: false,
+                variant: 'secondary',
+            }
+            : {
+                key: 'lock',
+                label: 'Lock',
+                icon: 'lock',
+                onClick: props.onLock,
+                disabled: false,
+                variant: 'secondary',
+            });
+    }
+    // One message at a time. Two stacked reasons is a paragraph on a room bar, and
+    // the first one is the one stopping you. A full call comes second, because it
+    // stops you doing less: you can still go in and listen.
+    const message = actions.find((action) => action.disabled)?.reason ??
+        (callFull ? `The call in ${room.name} is full. You can still go in.` : null);
+    const typeIcon = room.type === 'reception' ? 'reception' : room.type === 'break' ? 'break-room' : 'office';
+    return (_jsxs("div", { 
+        // Translucent enough for the room's picture to show through, which is what
+        // ties the bar to the room it sits on. The blur is what keeps it readable over
+        // any picture: the surface still carries the contrast, never the image.
+        className: "pointer-events-auto flex w-full flex-col overflow-hidden rounded-md bg-base-100/50 text-base-content shadow backdrop-blur-sm", "data-testid": `room-bar-${room.id}`, children: [_jsxs("div", { className: "flex min-w-0 items-center gap-1.5 px-1.5 py-1", children: [_jsx("span", { className: ['shrink-0 text-base-content/70', compact ? 'hidden' : ''].join(' '), children: _jsx(Icon, { name: typeIcon, size: "xs", title: room.type === 'break'
+                                ? 'Break room — where you go when you are stepping away'
+                                : room.type === 'reception'
+                                    ? 'Reception — where you arrive'
+                                    : undefined }) }), _jsx("span", { className: ['flex-1 truncate text-xs font-medium', tiny ? 'min-w-0' : 'min-w-[2ch]'].join(' '), title: room.name, children: room.name }), call && !tiny && (_jsxs("span", { role: "img", "aria-label": `Call with ${call.participants.length} ${call.participants.length === 1 ? 'person' : 'people'}${callFull ? ', full' : ''}`, "data-testid": `room-call-${room.id}`, className: [
+                            'inline-flex shrink-0 items-center gap-0.5 rounded px-1 py-px text-[10px] font-medium tabular-nums',
+                            callFull ? 'bg-base-200 text-base-content/70' : 'bg-primary/15 text-primary',
+                        ].join(' '), children: [_jsx(Icon, { name: "mic", size: "xs" }), !compact && (_jsxs("span", { "aria-hidden": "true", children: [call.participants.length, "/", call.limit] }))] })), locked && !compact && (_jsx("span", { className: "shrink-0 text-base-content/70", children: _jsx(Icon, { name: "lock", size: "xs", title: `${room.name} is locked` }) })), !compact && (_jsx("span", { className: "shrink-0 text-[10px] tabular-nums text-base-content/60", children: capacity === null ? occupancy : `${occupancy}/${capacity}` })), actions.map((action) => {
+                        const shared = {
+                            size: 'xs',
+                            variant: action.variant,
+                            // Tighter on a narrow bar, where a worded button has nothing to shrink
+                            // to: the utility beats the kit's own padding, which lives in the
+                            // component layer below it.
+                            className: compact && !action.icon ? 'shrink-0 px-1' : 'shrink-0',
+                            onClick: action.onClick,
+                            disabled: action.disabled,
+                            ...(action.disabled && action.reason ? { 'aria-describedby': `${room.id}-why` } : {}),
+                        };
+                        /*
+                          Lock and Unlock are a padlock at every width, with the word as their
+                          accessible name. Join and Knock are words at every width, with less
+                          padding around them on a narrow bar. What gives way instead is
+                          everything else: the head count, the room-type icon and the lock icon on
+                          a narrow bar, the call badge's count and then the badge itself on the
+                          tiniest — and the name truncates to its first letters, or on the very
+                          tiniest to nothing, because the room's action is never the thing that
+                          goes.
+                        */
+                        return action.icon ? (_jsx(Button, { ...shared, icon: action.icon, "aria-label": action.label }, action.key)) : (_jsx(Button, { ...shared, children: action.label }, action.key));
+                    })] }), message && (_jsx("p", { id: `${room.id}-why`, className: "border-t border-base-300 bg-base-200/70 px-1.5 py-0.5 text-[10px] leading-snug text-base-content/75", children: message }))] }));
+}
+//# sourceMappingURL=RoomBar.js.map

package/dist/RoomBar.js.map

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

package/dist/Share.d.ts

@@ -0,0 +1,74 @@
+import type { ScreenSource } from '@unityevolv/ofiskit-realtime-client';
+/**
+ * Showing a screen to the people in the call.
+ *
+ * Four pieces, separate because they appear in different places: the share itself
+ * fills the call view, the indicator follows the sharer everywhere including back
+ * onto the map, and the two questions are asked once and then gone.
+ *
+ * Provider-independent, like the tiles: a share here is a stream and a name, and
+ * nothing in this file knows whether a mesh or somebody's SFU delivered it.
+ */
+export interface ShareStageProps {
+    /** Whose screen it is. Used in the caption and in the accessible name. */
+    sharerName: string;
+    /** True when it is your own screen, which is drawn completely differently. */
+    mine: boolean;
+    /** The share, once it arrives. Absent is a loading state and not an error. */
+    stream?: MediaStream | null;
+    /** The chosen speaker, so a shared tab's sound goes where the voices go. */
+    speakerDeviceId?: string;
+    /** Offered only on your own share, and never more than one click away. */
+    onStop?(): void;
+}
+export declare function ShareStage({ sharerName, mine, stream, speakerDeviceId, onStop }: ShareStageProps): import("react").JSX.Element;
+/**
+ * The sharer's own reminder that they are still sharing.
+ *
+ * Persistent, not dismissible, and present in every view including the map, because
+ * forgetting to stop is the commonest failure in any call product and the
+ * consequence of it is somebody's inbox on a projector. The stop control is here as
+ * well as in the bar so that it is one click from wherever the person has wandered.
+ */
+export declare function SharingBanner({ onStop }: {
+    onStop(): void;
+}): import("react").JSX.Element;
+/**
+ * Taking over somebody else's share.
+ *
+ * Asked rather than refused, because the person who wants to show something next is
+ * usually right that they do — and asked rather than done quietly, because a share
+ * that disappears mid-sentence looks like a crash to whoever was presenting.
+ */
+export declare function TakeOverDialog({ sharerName, onConfirm, onCancel, }: {
+    sharerName: string;
+    onConfirm(): void;
+    onCancel(): void;
+}): import("react").JSX.Element;
+export interface ScreenSourcePickerProps {
+    /** The host's list, exactly as it gave it. Filtered here, not by the caller. */
+    sources: readonly ScreenSource[];
+    onPick(sourceId: string): void;
+    onCancel(): void;
+}
+/**
+ * The picker for a platform whose browser has none.
+ *
+ * On the web this never appears: `getDisplayMedia` opens the browser's own picker,
+ * which people already know and which is the only one that can offer a single tab.
+ * A desktop app has no such dialog — the platform hands over a list of screens and
+ * windows and expects the app to draw it — so this is that list.
+ *
+ * Our own window is never in it. Sharing the app that is doing the sharing produces
+ * an infinite mirror, and it is dropped by `usableSources` rather than here, so the
+ * rule belongs to the list rather than to this one drawing of it.
+ */
+export declare function ScreenSourcePicker({ sources, onPick, onCancel }: ScreenSourcePickerProps): import("react").JSX.Element;
+/**
+ * What a live region says about a share.
+ *
+ * Politely, and named. A share is a change to what is on everybody's screen, and
+ * somebody who cannot see it change is precisely the person who needs telling.
+ */
+export declare function describeShare(sharerName: string, sharing: boolean): string;
+//# sourceMappingURL=Share.d.ts.map

package/dist/Share.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Share.d.ts","sourceRoot":"","sources":["../src/Share.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAIvE;;;;;;;;;GASG;AAEH,MAAM,WAAW,eAAe;IAC9B,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAA;IAClB,8EAA8E;IAC9E,IAAI,EAAE,OAAO,CAAA;IACb,8EAA8E;IAC9E,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,0EAA0E;IAC1E,MAAM,CAAC,IAAI,IAAI,CAAA;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,EAAE,EAAE,eAAe,+BA2FhG;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,IAAI,IAAI,CAAA;CAAE,+BAoB3D;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,SAAS,EACT,QAAQ,GACT,EAAE;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,IAAI,IAAI,CAAA;IACjB,QAAQ,IAAI,IAAI,CAAA;CACjB,+BA2BA;AAED,MAAM,WAAW,uBAAuB;IACtC,gFAAgF;IAChF,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,IAAI,IAAI,CAAA;CACjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,uBAAuB,+BA0DxF;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAI1E"}