@hanzo/rooms 0.1.0

package/dist/rooms.js

@@ -0,0 +1,195 @@
+'use client';
+// The org's rooms: the one reader and writer for /v1/team.
+//
+// A room is not the sidebar's private business. The rail lists them, /home
+// reads one, and the composer needs the space off it to address anything — so
+// the list, the key, the transcript and the two writes live here, in one shape,
+// and no second module holds another opinion about what a room is.
+import { useCallback, useEffect, useState, useSyncExternalStore } from 'react';
+import { useIam } from '@hanzo/iam/react';
+import { useAi } from './lib/ai.js';
+import { where } from './where.js';
+/**
+ * The key the workspace selects a room by, and puts in the address:
+ * `team:<space>/<id>`. Both halves, because a room id is unique within a space
+ * and not across the org. Prefixed rather than hashed, because a key a person
+ * can read in a URL is one they can report in a bug.
+ */
+export const teamKey = (room) => `team:${room.space}/${room.id}`;
+/** The address a key names, or null for a key that is not a room's. */
+export function roomKey(key) {
+    const found = key?.match(/^team:([^/]+)\/(.+)$/);
+    return found ? { space: found[1], id: found[2] } : null;
+}
+/** The page a key opens on: Home, carrying it as the `?room=` that
+ *  `app/(app)/home/_workspace.tsx` reads on arrival. */
+export const roomHref = (key) => `${where().home}?${new URLSearchParams({ room: key })}`;
+/** The prerender's answer, and the first one. A stable reference, because
+ *  React compares snapshots by identity. */
+const UNKNOWN = { rooms: null, wrong: null };
+let held = UNKNOWN;
+/** Bumped by `reload`; a read is made once per value. */
+let epoch = 0;
+let asked = -1;
+const listeners = new Set();
+function publish(next) {
+    held = next;
+    for (const one of listeners)
+        one();
+}
+function subscribe(one) {
+    listeners.add(one);
+    return () => {
+        listeners.delete(one);
+    };
+}
+/** Asks the platform again. The list held stays on screen until it answers. */
+export function reloadRooms() {
+    epoch += 1;
+    publish({ rooms: held.rooms, wrong: null });
+}
+/**
+ * The org's real rooms, from Team, and the way to add one.
+ *
+ * `/v1/team/rooms` is the org's own list and answers only a validated
+ * principal. An archived room is not drawn: it is a room the org closed, and a
+ * sidebar that lists them makes leaving one meaningless.
+ *
+ * NULL IS UNKNOWN AND IT IS NOT EMPTY. Three states, and the caller owes a
+ * sentence for each: `null` while nothing is known, `[]` for an org that
+ * genuinely has no rooms, and `wrong` for a service that answered no. A list is
+ * never fabricated to cover any of them.
+ *
+ * `open` posts a room and HOLDS the row the platform answered with: a 201 is
+ * the stored room, so every view carries it from that moment and the reader can
+ * step into it without a second read. The caller is not added to a room by the
+ * server, so it names its own members.
+ */
+export function useTeamRooms() {
+    const { client } = useAi();
+    const { user } = useIam();
+    const now = useSyncExternalStore(subscribe, () => held, () => UNKNOWN);
+    useEffect(() => {
+        if (!client || !user || asked === epoch)
+            return;
+        asked = epoch;
+        const mine = epoch;
+        client.http
+            .json({ path: '/v1/team/rooms' })
+            .then((page) => {
+            if (mine === epoch)
+                publish({ rooms: (page.rooms ?? []).filter((r) => !r.archived), wrong: null });
+        })
+            .catch((e) => {
+            if (mine === epoch)
+                publish({ rooms: null, wrong: e });
+        });
+    }, [client, user, now]);
+    const open = useCallback(async (room) => {
+        if (!client)
+            throw Object.assign(new Error('Sign in to open a room'), { status: 401 });
+        const made = await client.http.json({
+            method: 'POST',
+            path: '/v1/team/rooms',
+            body: room,
+        });
+        publish({ rooms: [...(held.rooms ?? []), made], wrong: null });
+        return made;
+    }, [client]);
+    return { rooms: now.rooms, wrong: now.wrong, reload: reloadRooms, open };
+}
+/** The room with that id, or undefined for none open. */
+export function roomOf(rooms, id) {
+    return id && rooms ? rooms.find((r) => r.id === id) : undefined;
+}
+/**
+ * One row per id, in the platform's order — `createdOn`, then `id` — so a row
+ * held from a send and the same row read back by the next poll sit in one place.
+ */
+const order = (rows) => [...new Map(rows.map((one) => [one.id, one])).values()].sort((a, b) => a.createdOn - b.createdOn || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0));
+/** How often an open room asks what was said. */
+const PACE = 2000;
+/**
+ * A room's conversation, and the way to add to it.
+ *
+ * READ AND WRITE IN ONE HOOK, because they are one question — a pane that can
+ * show a room and not answer in it is a directory — and because the poller and
+ * the sender then cannot disagree about what the room holds.
+ *
+ * THE ROOM IS POLLED, every two seconds while it is open and the tab is
+ * showing. The team plane has no push a browser can read but its transactor
+ * socket, which is a binary protocol rather than a line; a read costs a few
+ * hundred milliseconds and nothing on the server past the space's own
+ * messages, so half a request a second per open room is the honest price of
+ * seeing an answer land. Each read carries its own AbortController, and the
+ * cleanup aborts the one in flight and stops the clock — on unmount, and when
+ * the room or its space changes.
+ *
+ * `send` posts and answers the row the platform stored: a 201 is the message,
+ * with its id and stamp, so the hook holds it at once and the next poll finds
+ * the same id and keeps one. Nothing the platform did not accept is ever held.
+ *
+ * `space` is half a room's address (two spaces of one org may each hold a room
+ * with one id), so both calls carry it and a room with neither reads empty
+ * rather than guessing.
+ */
+export function useRoomMessages(room, space) {
+    const { client } = useAi();
+    const { user } = useIam();
+    const [messages, setMessages] = useState(null);
+    const [failed, setFailed] = useState(null);
+    const [read, setRead] = useState(0);
+    const again = useCallback(() => setRead((n) => n + 1), []);
+    useEffect(() => {
+        if (!room) {
+            setMessages(null);
+            return;
+        }
+        if (!client || !user || !space)
+            return;
+        const path = `/v1/team/rooms/${encodeURIComponent(room)}/messages`;
+        let stop = null;
+        const look = () => {
+            stop?.abort();
+            stop = new AbortController();
+            const { signal } = stop;
+            client.http
+                .json({ path, query: { space }, signal })
+                .then((page) => {
+                if (signal.aborted)
+                    return;
+                setFailed(null);
+                // An empty room reads empty: `[]` is the answer, not the absence of one.
+                setMessages(order(page.messages ?? []));
+            })
+                .catch((e) => {
+                if (!signal.aborted)
+                    setFailed(e);
+            });
+        };
+        look();
+        const clock = setInterval(() => {
+            if (!document.hidden)
+                look();
+        }, PACE);
+        return () => {
+            clearInterval(clock);
+            stop?.abort();
+        };
+    }, [client, user, room, space, read]);
+    /** Says it and answers the stored row, or throws with the platform's status. */
+    const send = useCallback(async (text) => {
+        if (!client || !room || !space) {
+            throw Object.assign(new Error('This room has no address to send to'), { status: 503 });
+        }
+        const row = await client.http.json({
+            method: 'POST',
+            path: `/v1/team/rooms/${encodeURIComponent(room)}/messages`,
+            body: { space, text },
+        });
+        setMessages((held) => order([...(held ?? []), row]));
+        again();
+        return row;
+    }, [client, room, space, again]);
+    return { messages, failed, send, reload: again };
+}

package/dist/roster.d.ts

@@ -0,0 +1,28 @@
+/** One member of the org: a person, or an agent standing in the rooms. */
+export interface Member {
+    /** The account a message names as its author. */
+    id: string;
+    name: string;
+    /** A saved picture, as a data URI. People only; an agent wears initials. */
+    avatar?: string;
+    agent: boolean;
+}
+/**
+ * The org's members, or null while unknown.
+ *
+ * Needs a session and an org: both reads are org-scoped and answer 403 without
+ * one. A service account carries no id and can author nothing, so it is not a
+ * member here.
+ */
+export declare function useRoster(): {
+    members: Member[] | null;
+    wrong: unknown;
+};
+/** The member an author id names, or undefined for one the roster lacks. */
+export declare const memberOf: (members: Member[] | null, id: string) => Member | undefined;
+/**
+ * The reader's own account, from the userinfo the session holds. OIDC names it
+ * `sub`, and team's account id is that same uuid — so it is the id a room's
+ * members list and a message's author carry for this reader.
+ */
+export declare function useMe(): string | null;

package/dist/roster.js

@@ -0,0 +1,70 @@
+'use client';
+// Who is in the org, by account — the ONE place an author becomes a name.
+//
+// A message carries the team account that wrote it and nothing else: for a
+// person that is their IAM user id (the OIDC `sub`, which team's account id
+// equals), for an agent the user id the platform minted for it and publishes on
+// `/v1/team/bots`. Two reads, one list, so the transcript, the roster column and
+// the mention chips cannot disagree about what to call anybody.
+import { useEffect, useState } from 'react';
+import { useIam, useOrganizations } from '@hanzo/iam/react';
+import { useAi } from './lib/ai.js';
+/**
+ * The org's members, or null while unknown.
+ *
+ * Needs a session and an org: both reads are org-scoped and answer 403 without
+ * one. A service account carries no id and can author nothing, so it is not a
+ * member here.
+ */
+export function useRoster() {
+    const { client } = useAi();
+    const { isAuthenticated } = useIam();
+    const { currentOrgId } = useOrganizations();
+    const [members, setMembers] = useState(null);
+    const [wrong, setWrong] = useState(null);
+    useEffect(() => {
+        if (!client || !isAuthenticated || !currentOrgId)
+            return;
+        let live = true;
+        const stop = new AbortController();
+        const { signal } = stop;
+        Promise.all([
+            client.http.json({ path: '/v1/iam/users', query: { owner: currentOrgId }, signal }),
+            client.http.json({
+                path: '/v1/team/bots',
+                signal,
+            }),
+        ])
+            .then(([people, bots]) => {
+            if (!live)
+                return;
+            setMembers([
+                ...(people.users ?? []).flatMap((one) => one.id
+                    ? [{ id: one.id, name: one.displayName || one.name, avatar: one.avatar || undefined, agent: false }]
+                    : []),
+                ...(bots.bots ?? []).map((one) => ({ id: one.userId, name: one.name, agent: true })),
+            ]);
+        })
+            .catch((e) => {
+            if (live)
+                setWrong(e);
+        });
+        return () => {
+            live = false;
+            stop.abort();
+        };
+    }, [client, isAuthenticated, currentOrgId]);
+    return { members, wrong };
+}
+/** The member an author id names, or undefined for one the roster lacks. */
+export const memberOf = (members, id) => members?.find((one) => one.id === id);
+/**
+ * The reader's own account, from the userinfo the session holds. OIDC names it
+ * `sub`, and team's account id is that same uuid — so it is the id a room's
+ * members list and a message's author carry for this reader.
+ */
+export function useMe() {
+    const { user } = useIam();
+    const sub = user?.sub;
+    return typeof sub === 'string' && sub ? sub : null;
+}

package/dist/span.d.ts

@@ -0,0 +1,14 @@
+import { type CSSProperties } from 'react';
+export interface Span {
+    /** The width React knows, px: the kept one, or `initial`. */
+    span: number;
+    /** The element whose `--span` is the width. */
+    ref: (node: unknown) => void;
+    /** Spread on that element: it carries `--span`. */
+    style: CSSProperties;
+    /** The width while a drag moves it, px. */
+    move: (n: number) => void;
+    /** The width it settled on, px: drawn, known and kept. */
+    keep: (n: number) => void;
+}
+export declare function useSpan(store: string, initial: number, floor: number, ceil: number): Span;

package/dist/span.js

@@ -0,0 +1,50 @@
+'use client';
+// A column's width the reader chose, kept in this browser, and drawn through a
+// CSS custom property so a drag repaints one box instead of re-rendering the
+// column's contents sixty times a second.
+//
+//   const col = useSpan('hanzo.app.column', 272, 220, 420)
+//   <YStack ref={col.ref} style={col.style}>   width: var(--span)
+//   <Grip span={col.span} onSpan={col.move} onKeep={col.keep} … />   (@hanzo/build)
+//
+// `move` writes the property on the element and nothing else; `keep` is where
+// React and storage learn the width, once per drag, key or double-click.
+//
+// Storage is read in a layout effect, not during render: the rooms are
+// prerendered, and a render that reads storage draws different HTML on the
+// server and the client. A layout effect runs before the browser paints, so a
+// kept width is on screen from the first frame and the column never jumps.
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+export function useSpan(store, initial, floor, ceil) {
+    const [span, setSpan] = useState(initial);
+    const el = useRef(null);
+    useLayoutEffect(() => {
+        try {
+            const kept = Number(localStorage.getItem(store));
+            if (kept >= floor && kept <= ceil)
+                setSpan(kept);
+        }
+        catch {
+            // No store is the default width, which is a state and not a failure.
+        }
+    }, [store, floor, ceil]);
+    // Typed loosely because a gui stack hands its host element through a ref
+    // typed for native too; on the web it is the element.
+    const ref = useCallback((node) => {
+        el.current = node instanceof HTMLElement ? node : null;
+    }, []);
+    const move = useCallback((n) => {
+        el.current?.style.setProperty('--span', `${n}px`);
+    }, []);
+    const keep = useCallback((n) => {
+        el.current?.style.setProperty('--span', `${n}px`);
+        setSpan(n);
+        try {
+            localStorage.setItem(store, String(n));
+        }
+        catch {
+            // A browser that stores nothing still resizes; it just forgets.
+        }
+    }, [store]);
+    return { span, ref, style: { '--span': `${span}px` }, move, keep };
+}

package/dist/speech.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+/** Strips code blocks, links, headers, and markdown markup for natural audio speech. */
+export declare function cleanForSpeech(raw: string): string;
+export declare function stopAgentSpeech(): void;
+export interface SpeakOptions {
+    agent?: string;
+    onStart?: () => void;
+    onEnd?: () => void;
+    onError?: (err: unknown) => void;
+}
+/**
+ * Speak text in the assigned voice of an agent.
+ * Returns a cancel function.
+ */
+export declare function speakAgent(text: string, options?: SpeakOptions): () => void;
+/**
+ * Hook for managing agent speech playback in UI components.
+ */
+export declare function useAgentSpeech(defaultAgent?: string): {
+    speaking: boolean;
+    currentText: string;
+    speak: (text: string, agentName?: string) => void;
+    stop: () => void;
+    toggle: (text: string, agentName?: string) => void;
+};
+/** A colour the wave or the button paints with: a design token's custom property. */
+type Ink = `var(--${string})`;
+/**
+ * Animated Sound Wave visualizer shown when an agent is speaking.
+ */
+export declare function AudioWave({ active, color }: {
+    active?: boolean;
+    color?: Ink;
+}): React.JSX.Element;
+/**
+ * SpeakButton: Placed on assistant messages in Chat and Talk channels.
+ * Allows one-click audio playback in the agent's voice.
+ */
+export declare function SpeakButton({ text, agentName, compact, }: {
+    text: string;
+    agentName?: string;
+    compact?: boolean;
+}): React.JSX.Element;
+export {};

package/dist/speech.js

@@ -0,0 +1,229 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Agent Speech & Voice Synthesis
+//
+// Every agent in the Hanzo ecosystem has an assigned voice (`voiceOf(name)` from
+// `cast.tsx`). This module provides speech synthesis for agents across Chat,
+// Talk channels, and Meet video calls:
+// - Direct browser SpeechSynthesis with agent-tailored pitch, rate, and voice matching
+// - Audio wave visualization during playback
+// - Clean cancellation and state management
+// - Text normalization (strips code fences, markdown syntax so speech sounds natural)
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { Volume2, Square } from 'lucide-react';
+import { View, XStack } from '@hanzo/gui';
+import { Button } from '@hanzo/ui';
+import { GOOD } from './lib/mix.js';
+import { voiceOf, voiceProfileOf } from './cast.js';
+/** Strips code blocks, links, headers, and markdown markup for natural audio speech. */
+export function cleanForSpeech(raw) {
+    if (!raw)
+        return '';
+    return raw
+        // Replace fenced code blocks with brief spoken indicator
+        .replace(/```[\s\S]*?```/g, ' [code snippet] ')
+        // Replace inline code `code` with code
+        .replace(/`([^`]+)`/g, '$1')
+        // Replace markdown links [text](url) with text
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1')
+        // Remove markdown headers #, ##, ###
+        .replace(/^#{1,6}\s+/gm, '')
+        // Remove bold/italic markers
+        .replace(/[*_]{1,3}([^*_]+)[*_]{1,3}/g, '$1')
+        // Remove blockquotes
+        .replace(/^>\s+/gm, '')
+        // Remove horizontal rules
+        .replace(/^[-*_]{3,}\s*$/gm, '')
+        // Remove bullet points
+        .replace(/^[\s]*[-+*]\s+/gm, '')
+        // Replace multiple newlines or spaces
+        .replace(/\n+/g, '. ')
+        .replace(/\s+/g, ' ')
+        .trim();
+}
+/** Currently active speech synthesis utterance tracker. */
+let activeUtterance = null;
+const activeListeners = new Set();
+export function stopAgentSpeech() {
+    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
+        try {
+            window.speechSynthesis.cancel();
+        }
+        catch { }
+    }
+    activeUtterance = null;
+    for (const notify of activeListeners) {
+        notify();
+    }
+}
+/**
+ * Speak text in the assigned voice of an agent.
+ * Returns a cancel function.
+ */
+export function speakAgent(text, options = {}) {
+    if (typeof window === 'undefined')
+        return () => { };
+    stopAgentSpeech();
+    const clean = cleanForSpeech(text);
+    if (!clean)
+        return () => { };
+    if (!('speechSynthesis' in window)) {
+        options.onError?.(new Error('SpeechSynthesis not supported in this browser'));
+        return () => { };
+    }
+    const profile = voiceProfileOf(options.agent);
+    const utterance = new SpeechSynthesisUtterance(clean);
+    utterance.pitch = profile.pitch;
+    utterance.rate = profile.rate;
+    // Attempt to select best matching system voice based on gender / voice tone
+    try {
+        const voices = window.speechSynthesis.getVoices();
+        if (voices.length > 0) {
+            const isFemale = profile.gender === 'female';
+            const candidate = voices.find((v) => {
+                const name = v.name.toLowerCase();
+                const lang = v.lang.toLowerCase();
+                if (!lang.startsWith('en'))
+                    return false;
+                if (isFemale) {
+                    return name.includes('female') || name.includes('samantha') || name.includes('victoria') || name.includes('karen') || name.includes('zira');
+                }
+                else {
+                    return name.includes('male') || name.includes('daniel') || name.includes('alex') || name.includes('fred') || name.includes('david');
+                }
+            }) || voices.find((v) => v.lang.toLowerCase().startsWith('en')) || voices[0];
+            if (candidate) {
+                utterance.voice = candidate;
+            }
+        }
+    }
+    catch { }
+    utterance.onstart = () => {
+        activeUtterance = utterance;
+        options.onStart?.();
+    };
+    utterance.onend = () => {
+        if (activeUtterance === utterance) {
+            activeUtterance = null;
+        }
+        options.onEnd?.();
+        for (const notify of activeListeners) {
+            notify();
+        }
+    };
+    utterance.onerror = (e) => {
+        if (activeUtterance === utterance) {
+            activeUtterance = null;
+        }
+        options.onError?.(e);
+        for (const notify of activeListeners) {
+            notify();
+        }
+    };
+    try {
+        window.speechSynthesis.speak(utterance);
+    }
+    catch (err) {
+        options.onError?.(err);
+    }
+    return () => {
+        if (activeUtterance === utterance) {
+            stopAgentSpeech();
+        }
+    };
+}
+/**
+ * Hook for managing agent speech playback in UI components.
+ */
+export function useAgentSpeech(defaultAgent) {
+    const [speaking, setSpeaking] = useState(false);
+    const [currentText, setCurrentText] = useState(null);
+    const cancelRef = useRef(null);
+    useEffect(() => {
+        const listener = () => {
+            setSpeaking(false);
+            setCurrentText(null);
+        };
+        activeListeners.add(listener);
+        return () => {
+            activeListeners.delete(listener);
+            if (cancelRef.current)
+                cancelRef.current();
+        };
+    }, []);
+    const stop = useCallback(() => {
+        stopAgentSpeech();
+        setSpeaking(false);
+        setCurrentText(null);
+    }, []);
+    const speak = useCallback((text, agentName) => {
+        stop();
+        setCurrentText(text);
+        setSpeaking(true);
+        cancelRef.current = speakAgent(text, {
+            agent: agentName || defaultAgent,
+            onStart: () => setSpeaking(true),
+            onEnd: () => {
+                setSpeaking(false);
+                setCurrentText(null);
+            },
+            onError: () => {
+                setSpeaking(false);
+                setCurrentText(null);
+            },
+        });
+    }, [defaultAgent, stop]);
+    const toggle = useCallback((text, agentName) => {
+        if (speaking && currentText === text) {
+            stop();
+        }
+        else {
+            speak(text, agentName);
+        }
+    }, [speaking, currentText, speak, stop]);
+    return { speaking, currentText, speak, stop, toggle };
+}
+/** The five bars' resting heights, as a share of the 12px the wave stands in. */
+const BARS = [0.4, 0.9, 0.6, 1, 0.5];
+/**
+ * One bar of the wave. It rises and falls between 3px and 13px through the Web
+ * Animations API, the same keyframes a stylesheet would hold, so no sheet is
+ * written into the page for it; each bar starts 150ms after the one before.
+ * A reader who asked for less motion gets the bars standing still.
+ */
+function Bar({ share, i, active, color }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!active || !el?.animate || matchMedia('(prefers-reduced-motion: reduce)').matches)
+            return;
+        const run = el.animate([{ height: '3px' }, { height: '13px' }], {
+            duration: 800,
+            delay: i * 150,
+            easing: 'ease-in-out',
+            iterations: Infinity,
+            direction: 'alternate',
+        });
+        return () => run.cancel();
+    }, [active, i]);
+    return (_jsx(View, { ref: ref, render: "span", width: 2, height: active ? Math.round(share * 12) : 4, bg: color, rounded: 1 }));
+}
+/**
+ * Animated Sound Wave visualizer shown when an agent is speaking.
+ */
+export function AudioWave({ active = true, color = 'var(--state-success)' }) {
+    return (_jsx(XStack, { render: "span", "aria-hidden": true, display: "inline-flex", items: "center", gap: 2, height: 14, children: BARS.map((share, i) => (_jsx(Bar, { share: share, i: i, active: active, color: color }, i))) }));
+}
+/**
+ * SpeakButton: Placed on assistant messages in Chat and Talk channels.
+ * Allows one-click audio playback in the agent's voice.
+ */
+export function SpeakButton({ text, agentName, compact = false, }) {
+    const { speaking, toggle } = useAgentSpeech(agentName);
+    const voice = voiceOf(agentName);
+    // An @hanzo/ui Button: ghost at rest, the quiet pressed ground while it
+    // speaks. The word for speaking is the one status here, so it alone takes
+    // the success ink (GOOD holds 4.5:1 on either theme); the icons follow the
+    // label through currentColor.
+    return (_jsx(Button, { variant: speaking ? 'secondary' : 'ghost', size: compact ? 'icon-sm' : 'sm', color: speaking ? GOOD : '$soft', onClick: () => toggle(text, agentName), "aria-label": speaking ? 'Stop speaking' : `Listen to ${agentName || 'agent'} (${voice})`, "aria-pressed": speaking, title: speaking ? 'Stop speaking' : `Listen in ${agentName || 'agent'}'s voice (${voice})`, children: speaking ? (_jsxs(_Fragment, { children: [_jsx(AudioWave, { active: true, color: GOOD }), !compact && 'Speaking…', _jsx(Square, { size: 10, fill: "currentColor" })] })) : (_jsxs(_Fragment, { children: [_jsx(Volume2, { size: 13 }), !compact && 'Listen'] })) }));
+}

package/dist/stars.d.ts

@@ -0,0 +1,16 @@
+/** How a room is written wherever a person reads it — a sigil and the name.
+ *  One formula, because the header and the sidebar star the same room and a
+ *  second spelling of its title would star two different things. */
+export declare const titleOf: (name: string, direct?: boolean) => string;
+/**
+ * The starred rooms, and the toggle that sets them.
+ *
+ * Read in an effect rather than in the initialiser, because storage is a fact
+ * only the browser holds and reading it during the render that hydrates is how
+ * the server and the client disagree about a filled star.
+ *
+ * Every hook instance listens for the change, so starring in the header lights
+ * the sidebar in the same tick: two components, one set, no prop threaded
+ * between them through the four components that separate them.
+ */
+export declare function useStarred(kind?: string): [Set<string>, (id: string) => void];