fauna-api 0.0.0-stage → 1.0.679

package/dist/src/ui/roster.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { gsap } from "gsap";
+import { colorFromSeed } from "./cursor.js";
+const AGENT_KEY = "agent";
+function prefersReducedMotion() {
+    try {
+        return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    }
+    catch {
+        return false;
+    }
+}
+function nameOf(profile) {
+    return profile?.displayName || profile?.email?.split("@")[0] || "Guest";
+}
+function avatarUrl(profile) {
+    if (profile?.icon)
+        return profile.icon;
+    return `https://ui-avatars.com/api/?name=${encodeURIComponent(nameOf(profile))}&background=161617&color=E8E2DC&size=64`;
+}
+/** Asks before stopping an agent: taking control (`control`) or shutting down (`power`). */
+export function AgentConfirm({ kind, onConfirm, onCancel }) {
+    const veilRef = useRef(null);
+    const panelRef = useRef(null);
+    useLayoutEffect(() => {
+        if (prefersReducedMotion())
+            return;
+        gsap.fromTo(veilRef.current, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.2, ease: "power2.out" });
+        gsap.fromTo(panelRef.current, { y: 14, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.34, ease: "power3.out" });
+    }, []);
+    useEffect(() => {
+        const onKey = (event) => { if (event.key === "Escape")
+            onCancel(); };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [onCancel]);
+    return (_jsx("div", { ref: veilRef, className: "fauna-confirm-veil", onPointerDown: (event) => { if (event.target === event.currentTarget)
+            onCancel(); }, children: _jsxs("div", { ref: panelRef, className: "fauna-confirm", role: "alertdialog", "aria-labelledby": "fauna-confirm-title", children: [_jsx("h2", { id: "fauna-confirm-title", className: "fauna-confirm-title", children: "An agent is using this" }), _jsx("p", { className: "fauna-confirm-body", children: kind === "power" ? "Shutting down stops the agent." : "Taking control stops the agent, and whatever started it may not finish." }), _jsxs("div", { className: "fauna-confirm-actions", children: [_jsx("button", { type: "button", className: "fauna-confirm-cancel", onClick: onCancel, children: "Cancel" }), _jsx("button", { type: "button", className: "fauna-confirm-go", autoFocus: true, onClick: onConfirm, children: kind === "power" ? "Shut down" : "Take control" })] })] }) }));
+}
+/**
+ * Who's in the room, who's in control, and a click to hand control to anyone.
+ * While an agent holds the room it comes first with the ring, everyone watches,
+ * and clicking a person asks before stopping the agent.
+ */
+export function Roster({ self, peers, controller, agent, onHand, nudge = 0 }) {
+    // Id only: the same person twice is two seats, and both stay listed.
+    const seats = self ? [self, ...peers.filter((p) => p.id !== self.id)] : peers;
+    const pillRef = useRef(null);
+    const ringRef = useRef(null);
+    const seatRefs = useRef(new Map());
+    const seen = useRef(new Set());
+    const width = useRef(0);
+    const placed = useRef(false);
+    const [tip, setTip] = useState(null);
+    const [confirming, setConfirming] = useState(null);
+    const key = `${agent ? `${AGENT_KEY}:${agent.id}|` : ""}${seats.map((s) => s.id).join("|")}`;
+    const shown = seats.length > 1 || Boolean(agent);
+    const holder = agent ? AGENT_KEY : controller;
+    // New seats pop in, and the pill eases to its new width.
+    useLayoutEffect(() => {
+        const pill = pillRef.current;
+        if (!pill)
+            return;
+        const reduced = prefersReducedMotion();
+        for (const [id, el] of seatRefs.current) {
+            const seenId = id === AGENT_KEY && agent ? `${AGENT_KEY}:${agent.id}` : id;
+            if (seen.current.has(seenId))
+                continue;
+            seen.current.add(seenId);
+            if (!reduced)
+                gsap.fromTo(el, { scale: 0.7, autoAlpha: 0 }, { scale: 1, autoAlpha: 1, duration: 0.36, ease: "back.out(1.7)" });
+        }
+        const next = pill.offsetWidth;
+        if (width.current && width.current !== next && !reduced) {
+            gsap.fromTo(pill, { width: width.current }, { width: next, duration: 0.3, ease: "power2.out", clearProps: "width" });
+        }
+        width.current = next;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, shown]);
+    // The ring follows whoever holds the room: the agent, or the controller.
+    useLayoutEffect(() => {
+        const ring = ringRef.current;
+        if (!ring)
+            return;
+        const target = holder ? seatRefs.current.get(holder) : undefined;
+        if (!target) {
+            gsap.to(ring, { autoAlpha: 0, duration: 0.2 });
+            placed.current = false;
+            return;
+        }
+        const to = { x: target.offsetLeft, y: target.offsetTop, width: target.offsetWidth, height: target.offsetHeight };
+        if (!placed.current || prefersReducedMotion()) {
+            gsap.set(ring, { ...to, autoAlpha: 1 });
+            placed.current = true;
+            return;
+        }
+        gsap.to(ring, { ...to, autoAlpha: 1, duration: 0.5, ease: "power3.out" });
+        gsap.fromTo(ring, { boxShadow: "0 0 0 4px rgba(163, 27, 40, 0.35), 0 0 26px rgba(163, 27, 40, 0.75)" }, { boxShadow: "0 0 0 2px rgba(163, 27, 40, 0.18), 0 0 12px rgba(163, 27, 40, 0.4)", duration: 0.7, ease: "power2.out" });
+    }, [holder, key, shown]);
+    // A pulse when someone without control reaches for the room.
+    useEffect(() => {
+        const ring = ringRef.current;
+        if (!nudge || !ring || prefersReducedMotion())
+            return;
+        gsap.fromTo(ring, { scale: 1 }, { scale: 1.22, duration: 0.14, ease: "power2.out", yoyo: true, repeat: 3, transformOrigin: "50% 50%" });
+    }, [nudge]);
+    if (!shown)
+        return null;
+    const tipFor = (seat) => {
+        const mine = seat.id === self?.id;
+        if (agent)
+            return mine ? "You're watching" : `${nameOf(seat.profile)} is watching`;
+        if (seat.id === controller)
+            return mine ? "You're in control" : `${nameOf(seat.profile)} is in control`;
+        return mine ? "Take control" : `Give control to ${nameOf(seat.profile)}`;
+    };
+    const lift = (el, up) => {
+        if (!prefersReducedMotion())
+            gsap.to(el, { y: up ? -2 : 0, duration: 0.2, ease: "power2.out" });
+    };
+    const showTip = (el, text) => {
+        lift(el, true);
+        setTip({ text, x: el.offsetLeft + el.offsetWidth / 2 });
+    };
+    const hideTip = (el) => {
+        lift(el, false);
+        setTip(null);
+    };
+    const register = (id) => (el) => {
+        if (el)
+            seatRefs.current.set(id, el);
+        else
+            seatRefs.current.delete(id);
+    };
+    const hand = (seat) => {
+        const target = seat.id === self?.id ? undefined : seat.id;
+        if (agent)
+            setConfirming({ seat: target });
+        else if (seat.id !== controller)
+            onHand(target);
+    };
+    return (_jsxs("div", { className: "fauna-roster", children: [_jsxs("div", { ref: pillRef, className: "fauna-roster-pill", "aria-label": "People in this room", children: [_jsx("span", { ref: ringRef, className: "fauna-roster-ring", "aria-hidden": "true" }), agent && (_jsx("span", { ref: register(AGENT_KEY), className: "fauna-roster-seat fauna-roster-agent in-control", "aria-label": `${agent.name} is using this`, onMouseEnter: (event) => showTip(event.currentTarget, `${agent.name} is using this`), onMouseLeave: (event) => hideTip(event.currentTarget), children: agent.icon
+                            ? _jsx("img", { src: agent.icon, alt: "" })
+                            : _jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "smart_toy" }) })), seats.map((seat) => {
+                        const inControl = !agent && seat.id === controller;
+                        return (_jsxs("button", { ref: register(seat.id), type: "button", className: `fauna-roster-seat${inControl ? " in-control" : ""}`, style: { borderColor: colorFromSeed(seat.id) }, "aria-label": tipFor(seat), onClick: () => hand(seat), onMouseEnter: (event) => showTip(event.currentTarget, tipFor(seat)), onMouseLeave: (event) => hideTip(event.currentTarget), children: [_jsx("img", { src: avatarUrl(seat.profile), alt: "" }), inControl && (_jsx("span", { className: "fauna-roster-badge", "aria-hidden": "true", children: _jsx("span", { className: "material-symbols-outlined", children: "power_settings_new" }) }))] }, seat.id));
+                    })] }), tip && _jsx("span", { className: "fauna-roster-tip", style: { left: tip.x }, children: tip.text }), confirming && (_jsx(AgentConfirm, { kind: "control", onCancel: () => setConfirming(null), onConfirm: () => {
+                    const { seat } = confirming;
+                    setConfirming(null);
+                    onHand(seat);
+                } }))] }));
+}
+/** The roster for apps without React. Call `update` with new props as the room changes. */
+export function mountRoster(el, props) {
+    const root = createRoot(el);
+    root.render(_jsx(Roster, { ...props }));
+    return {
+        update(next) { root.render(_jsx(Roster, { ...next })); },
+        destroy() { root.unmount(); },
+    };
+}

package/dist/src/ui/talk.d.ts

@@ -0,0 +1,12 @@
+import { Fauna } from 'fauna-api';
+export type TalkHandle = {
+    start: () => Promise<void>;
+    hangUp: () => void;
+    destroy: () => void;
+};
+export type TalkOptions = {
+    credentials: Fauna.Authentification.Credentials | Fauna.Authentification.ApiKey;
+    assistantLabel?: string;
+    onHangUp?: () => void;
+};
+export declare function createTalk(container: HTMLElement, options: TalkOptions): TalkHandle;