@hanzo/rooms 0.1.21 → 0.1.23

package/dist/lib/tier.js

@@ -26,7 +26,11 @@ import { api } from './api.js';
 import { bearer, org, orgs, scope } from './session.js';
 import { list } from './list.js';
 import { money } from './pay.js';
-import { date } from './limits.js';
+/** A period's end as a sentence states it — "Oct 30, 2026" — or '' for none. Periods end on UTC days. */
+function date(iso) {
+    const t = iso ? Date.parse(iso) : NaN;
+    return Number.isNaN(t) ? '' : new Date(t).toLocaleDateString('en-US', { timeZone: 'UTC', year: 'numeric', month: 'short', day: 'numeric' });
+}
 /** An error that names the status, for `say()` to turn into a sentence. */
 const refusal = (status, message) => Object.assign(new Error(message), { status });
 /** GETs `path` as whoever holds the bearer, in this browser's organization. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "The workspace rooms — Home, Chat, Inbox, Contacts, Meet, Cal, Drive, Board, Work, Bots — and the frame that holds them, once, for every Hanzo surface.",
   "type": "module",
   "main": "./dist/index.js",
@@ -56,8 +56,8 @@
     "@hanzo/iam": ">=0.21.28",
     "@hanzo/logo": ">=1.0.26",
     "@hanzo/plans": ">=1.8.9",
-    "@hanzo/ui": ">=8.27.51",
-    "@hanzo/usage": ">=0.1.17",
+    "@hanzo/ui": ">=8.27.57",
+    "@hanzo/usage": ">=0.1.18",
     "@hanzo/voice": ">=0.1.12",
     "@hanzogui/shell": "^8.3.20",
     "lucide-react": ">=1.42.0",
@@ -75,8 +75,8 @@
     "@hanzo/iam": "0.21.28",
     "@hanzo/logo": "1.0.26",
     "@hanzo/plans": "1.8.9",
-    "@hanzo/ui": "8.27.51",
-    "@hanzo/usage": "0.1.17",
+    "@hanzo/ui": "8.27.57",
+    "@hanzo/usage": "0.1.18",
     "@hanzo/voice": "0.1.12",
     "@hanzogui/config": "8.3.5",
     "@hanzogui/core": "8.3.5",

package/dist/Guide.d.ts

@@ -1,6 +0,0 @@
-import { type Tour } from './tours.js';
-export declare function Guide({ room }: {
-    room?: Tour;
-}): import("react").ReactPortal;
-/** Let a room's guide be asked for again — a menu row can call this and reload. */
-export declare function replayGuide(room?: Tour): void;

package/dist/Guide.js

@@ -1,273 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The first-run guide: what this place can do, said once, standing next to the
-// thing that does it.
-//
-// WHY COACHMARKS AND NOT A TOUR PAGE. A page of screenshots is read somewhere
-// else and remembered nowhere; a card pinned to the actual control is read
-// while looking at it, and the next time the reader sees that control they have
-// already been introduced. So every step here RESOLVES A LIVE ELEMENT and
-// positions against its measured rectangle. Nothing is drawn at a coordinate
-// somebody typed.
-//
-// A STEP WHOSE ANCHOR IS ABSENT IS SKIPPED, not faked. Destinations come and go
-// with the org's tier and with what the reader has hidden, so the tour is a
-// list of candidates and the ones present at that moment are the tour. That is
-// also why anchors are found by what the elements ALREADY carry — their aria
-// labels, their roles, their text — rather than by `data-tour` attributes
-// sprinkled through six other components: a marker added for a tour is a marker
-// somebody deletes while tidying, and the tour breaks silently three months
-// later. An accessible name is load-bearing for other reasons and survives.
-//
-// IT RUNS ONCE, and "once" belongs to the person rather than to the browser.
-// Completion is written to the caller's own preference document (`/v1/pref`,
-// whose `prefs` is an opaque object each surface keys as it likes), so it
-// follows them to a second machine. localStorage is written FIRST and read
-// first: it settles instantly, it answers for a reader who never signs in, and
-// it keeps the guide from re-opening in the seconds a PATCH is in flight.
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { Text, View, XStack, YStack } from '@hanzo/gui';
-import { Button } from '@hanzo/ui';
-import { brand } from './where.js';
-import { useIam } from '@hanzo/iam/react';
-import { useAi } from './lib/ai.js';
-import { Next, Scene } from './Scene.js';
-import { TOURS } from './tours.js';
-/** The ring on the spot: design's focus ring and its halo, one above the dim. gui hands a `calc()` to the page
- *  unchanged; its types only name custom properties. */
-const RING = '0 0 0 1px var(--ring), 0 0 26px var(--ring-halo)';
-const ABOVE = 'calc(var(--z-overlay) + 1)';
-/** design's smallest rung (`--text-floor`, 10px), below gui's `$1`; gui's font size takes a rung or a number. */
-const FLOOR = 10;
-/** The page's own leading (design's `--leading-base`, 1.35rem), which a face's scope would otherwise replace with its
- *  20px; gui's line height takes a rung or a number. */
-const LEAD = 21.6;
-/** Where the card's pointer sits, and which two edges it draws, for each side the card can take. */
-const POINTER = {
-    bottom: { t: -6.5, l: '50%', ml: -5.5, borderLeftWidth: 1, borderTopWidth: 1 },
-    top: { b: -6.5, l: '50%', ml: -5.5, borderRightWidth: 1, borderBottomWidth: 1 },
-    right: { l: -6.5, t: '50%', mt: -5.5, borderLeftWidth: 1, borderBottomWidth: 1 },
-    left: { r: -6.5, t: '50%', mt: -5.5, borderRightWidth: 1, borderTopWidth: 1 },
-};
-/** Where a room's tour is marked seen, in this browser and in the person's preferences. */
-const keyOf = (room) => (room === 'chat' ? 'hanzo:chat:guide' : `hanzo:${room}:guide`);
-const prefOf = (room) => `${room}Guide`;
-const PAD = 8;
-const GAP = 14;
-const CARD_W = 352;
-export function Guide({ room = 'chat' }) {
-    const KEY = keyOf(room);
-    const PREF = prefOf(room);
-    const STOPS = TOURS[room];
-    const { client } = useAi();
-    // ONLY FOR SOMEONE WHO IS SIGNED IN. `useAi` hands back a client either way —
-    // the anonymous one the free composer runs on — so a client is not proof of a
-    // reader. Opening for a visitor put a dimmed backdrop over the page before
-    // they had an account, and its panels sat on top of the Sign in button: the
-    // guide blocked the one action the page was asking for. It also has nothing
-    // true to say to a stranger, since half of what it points at is theirs only
-    // once they have a workspace.
-    const { isAuthenticated, isLoading } = useIam();
-    const [live, setLive] = useState(false);
-    const [i, setI] = useState(0);
-    const [spot, setSpot] = useState(null);
-    const [side, setSide] = useState('bottom');
-    const [card, setCard] = useState(null);
-    const cardRef = useRef(null);
-    // The stops whose anchors exist right now. A destination the org does not
-    // carry has no element, so it is not a step — the tour describes THIS
-    // workspace rather than a catalogue.
-    const stops = useMemo(() => (live ? STOPS.filter((s) => s.find() !== null) : STOPS), [live, STOPS]);
-    const stop = stops[i];
-    const done = useCallback((how) => {
-        setLive(false);
-        const mark = JSON.stringify({ at: new Date().toISOString(), how });
-        try {
-            localStorage.setItem(KEY, mark);
-        }
-        catch {
-            /* a browser with storage off still gets the guide once per visit */
-        }
-        // Follows the person, not the browser. Failure is silent on purpose: the
-        // local mark already settled it, and a guide is not worth an error.
-        client?.http
-            .json({ method: 'PATCH', path: '/v1/pref', body: { prefs: { [PREF]: { at: new Date().toISOString(), how } } } })
-            .catch(() => { });
-    }, [client, KEY, PREF]);
-    // Should it open at all? Local first — it answers instantly and it answers
-    // for a reader who never signs in.
-    useEffect(() => {
-        if (isLoading || !isAuthenticated)
-            return;
-        let held = false;
-        try {
-            held = Boolean(localStorage.getItem(KEY));
-        }
-        catch {
-            /* treat unreadable storage as "not yet shown" */
-        }
-        if (held)
-            return;
-        let alive = true;
-        const open = () => {
-            if (!alive)
-                return;
-            // Wait for the room to actually render before pointing at it.
-            const t = window.setTimeout(() => alive && setLive(true), 900);
-            return () => window.clearTimeout(t);
-        };
-        if (!client)
-            return open();
-        client.http
-            .json({ path: '/v1/pref' })
-            .then((doc) => {
-            if (!alive)
-                return;
-            if (doc?.prefs && doc.prefs[PREF]) {
-                try {
-                    localStorage.setItem(KEY, JSON.stringify(doc.prefs[PREF]));
-                }
-                catch {
-                    /* nothing to do */
-                }
-                return;
-            }
-            // THE TOUR IS FOR A NEW ACCOUNT. One that has already had a conversation
-            // here is not new: it may never have met this tour, and it does not
-            // need to. It is marked as such, so the question is not asked again.
-            client.threads
-                .list()
-                .then((had) => {
-                if (!alive)
-                    return;
-                if (Array.isArray(had) && had.length > 0)
-                    done('unneeded');
-                else
-                    open();
-            })
-                .catch(() => open());
-        })
-            .catch(() => open());
-        return () => {
-            alive = false;
-        };
-    }, [client, isAuthenticated, isLoading, KEY, PREF, done]);
-    // Measure the anchor, and re-measure when the page moves under it.
-    //
-    // NOT on every frame. A rAF loop that calls setSpot each tick re-renders the
-    // card sixty times a second, which makes it a target nothing can click: the
-    // element under the pointer is replaced between the hit test and the press.
-    // Measure on the events that actually move things, and write state only when
-    // the rectangle really changed.
-    useLayoutEffect(() => {
-        if (!live || !stop)
-            return;
-        let last = '';
-        const measure = () => {
-            const el = stop.find();
-            if (!el) {
-                setSpot(null);
-                return;
-            }
-            const r = el.getBoundingClientRect();
-            const next = { top: r.top - PAD, left: r.left - PAD, width: r.width + PAD * 2, height: r.height + PAD * 2 };
-            const key = `${Math.round(next.top)}:${Math.round(next.left)}:${Math.round(next.width)}:${Math.round(next.height)}`;
-            if (key === last)
-                return;
-            last = key;
-            setSpot(next);
-        };
-        // Bring it into view once per step, then measure after the scroll settles.
-        stop.find()?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-        measure();
-        const settle = window.setTimeout(measure, 260);
-        const ro = new ResizeObserver(measure);
-        ro.observe(document.body);
-        const el = stop.find();
-        if (el)
-            ro.observe(el);
-        window.addEventListener('scroll', measure, true);
-        window.addEventListener('resize', measure);
-        return () => {
-            window.clearTimeout(settle);
-            ro.disconnect();
-            window.removeEventListener('scroll', measure, true);
-            window.removeEventListener('resize', measure);
-        };
-    }, [live, stop, i]);
-    // Place the card against the measured spot, flipping rather than overflowing.
-    useLayoutEffect(() => {
-        if (!spot) {
-            setCard(null);
-            return;
-        }
-        const h = cardRef.current?.offsetHeight ?? 168;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        let want = stop?.side ?? 'bottom';
-        if (want === 'bottom' && spot.top + spot.height + GAP + h > vh - 12)
-            want = 'top';
-        if (want === 'top' && spot.top - GAP - h < 12)
-            want = 'bottom';
-        if (want === 'right' && spot.left + spot.width + GAP + CARD_W > vw - 12)
-            want = 'left';
-        if (want === 'left' && spot.left - GAP - CARD_W < 12)
-            want = 'right';
-        let top;
-        let left;
-        if (want === 'bottom' || want === 'top') {
-            top = want === 'bottom' ? spot.top + spot.height + GAP : spot.top - GAP - h;
-            left = spot.left + spot.width / 2 - CARD_W / 2;
-        }
-        else {
-            left = want === 'right' ? spot.left + spot.width + GAP : spot.left - GAP - CARD_W;
-            top = spot.top + spot.height / 2 - h / 2;
-        }
-        setSide(want);
-        setCard({ top: Math.max(12, Math.min(top, vh - h - 12)), left: Math.max(12, Math.min(left, vw - CARD_W - 12)) });
-    }, [spot, stop]);
-    const next = useCallback(() => {
-        if (i + 1 >= stops.length)
-            done('finished');
-        else
-            setI(i + 1);
-    }, [i, stops.length, done]);
-    const back = useCallback(() => setI((n) => Math.max(0, n - 1)), []);
-    useEffect(() => {
-        if (!live)
-            return;
-        const onKey = (e) => {
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                done('skipped');
-            }
-            else if (e.key === 'ArrowRight' || e.key === 'Enter') {
-                e.preventDefault();
-                next();
-            }
-            else if (e.key === 'ArrowLeft') {
-                e.preventDefault();
-                back();
-            }
-        };
-        document.addEventListener('keydown', onKey, true);
-        return () => document.removeEventListener('keydown', onKey, true);
-    }, [live, next, back, done]);
-    if (!live || !stop || !spot || !card || typeof document === 'undefined')
-        return null;
-    const last = i + 1 >= stops.length;
-    // The dim is four panels around the spot rather than one box with a hole:
-    // a hole wants a mask, and a mask over a blurred backdrop reads as a seam.
-    const panel = { position: 'fixed', bg: 'var(--surface-scrim)', z: 'var(--z-overlay)', onClick: () => done('skipped') };
-    return createPortal(_jsxs("div", { role: "dialog", "aria-modal": "true", "aria-label": `Getting started with ${brand()}`, children: [_jsx(View, { ...panel, t: 0, l: 0, r: 0, height: Math.max(0, spot.top) }), _jsx(View, { ...panel, t: spot.top + spot.height, l: 0, r: 0, b: 0 }), _jsx(View, { ...panel, t: spot.top, l: 0, width: Math.max(0, spot.left), height: spot.height }), _jsx(View, { ...panel, t: spot.top, l: spot.left + spot.width, r: 0, height: spot.height }), _jsx(View, { position: "fixed", t: spot.top, l: spot.left, width: spot.width, height: spot.height, rounded: 10, borderWidth: 1, borderColor: "var(--ring)", boxShadow: RING, pointerEvents: "none", z: ABOVE }), stop.scene ? (_jsx(Scene, { step: `${i + 1} / ${stops.length}`, onNext: next, onSkip: () => done('skipped') })) : (_jsxs(YStack, { ref: cardRef, position: "fixed", t: card.top, l: card.left, width: CARD_W, z: "var(--z-modal)", bg: "var(--popover)", borderWidth: 1, borderColor: "var(--border-control)", rounded: 12, boxShadow: "var(--shadow-floating)", pt: 18, px: 18, pb: 15, children: [_jsx(View, { "aria-hidden": true, position: "absolute", width: 11, height: 11, bg: "var(--popover)", rotate: "45deg", borderColor: "var(--border-control)", ...POINTER[side] }), _jsxs(XStack, { items: "center", gap: 8, mb: 9, children: [_jsxs(Text, { fontFamily: "$body", lineHeight: LEAD, fontSize: FLOOR, letterSpacing: 1.1, textTransform: "uppercase", color: "$faint", fontVariant: ['tabular-nums'], children: [i + 1, " / ", stops.length] }), _jsx(View, { flex: 1, height: 1, bg: "$borderColor" }), _jsx(XStack, { gap: 3, children: stops.map((s, n) => (_jsx(View, { width: n === i ? 14 : 5, height: 5, rounded: 3, bg: n <= i ? '$ink' : '$rim', transition: "200ms" }, s.id))) })] }), _jsx(Text, { render: "h2", fontFamily: "$body", mb: 7, fontSize: "$6", fontWeight: "600", lineHeight: 22.1, letterSpacing: -0.17, color: "$ink", children: stop.title }), _jsx(Text, { render: "p", fontFamily: "$body", mb: 16, fontSize: "$3", lineHeight: 22.4, color: "$quiet", children: stop.body }), _jsxs(XStack, { items: "center", gap: 8, children: [_jsx(Button, { variant: "linkMuted", size: "sm", px: 2, onClick: () => done('skipped'), children: "Skip" }), _jsx(View, { flex: 1 }), i > 0 ? (_jsx(Button, { size: "sm", onClick: back, children: "Back" })) : null, _jsx(Next, { onPress: next, label: last ? 'Done' : 'Next' })] })] }))] }), document.body);
-}
-/** Let a room's guide be asked for again — a menu row can call this and reload. */
-export function replayGuide(room = 'chat') {
-    try {
-        localStorage.removeItem(keyOf(room));
-    }
-    catch {
-        /* nothing to clear */
-    }
-}

package/dist/Scene.d.ts

@@ -1,12 +0,0 @@
-export declare function Scene({ step, onNext, onSkip }: {
-    step: string;
-    onNext: () => void;
-    onSkip: () => void;
-}): import("react").JSX.Element;
-/** A stop's one primary control, the scene's and the card's. It takes focus when the stop opens, which is what
- *  `autoFocus` did on the element it replaced; a stop that only relabels it (Next to Done) keeps the focus it has.
- */
-export declare function Next({ onPress, label }: {
-    onPress: () => void;
-    label?: string;
-}): import("react").JSX.Element;

package/dist/Scene.js

@@ -1,105 +0,0 @@
-'use client';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The scene: one chat, the team brought in, and the call it turns into — played
-// rather than read. It is drawn on a stage of its own, so nothing typed here
-// reaches the composer, and nothing said here is sent or saved.
-import { useEffect, useRef, useState } from 'react';
-import { Text, View, XStack, YStack } from '@hanzo/gui';
-import { Button } from '@hanzo/ui';
-import { CAST as CREW } from './cast.js';
-const CAST = {
-    you: { name: 'You', part: 'Owner', initial: 'Y', ground: 'var(--neutral-700)' },
-    des: { name: 'Des', part: 'Designer', face: '/agents/des.png', initial: 'D', ground: CREW.des.ground },
-    vi: { name: 'Vi', part: 'Visionary', face: '/agents/vi.png', initial: 'V', ground: CREW.vi.ground },
-    alex: { name: 'Alex', part: 'Teammate', initial: 'A', ground: 'var(--neutral-600)' },
-};
-/** The tour's own prompt: typed for show, never sent. */
-const SAMPLE = 'Help me plan the next version of our app';
-const ADDED = ['des', 'vi', 'alex'];
-const CHAT = [
-    { who: 'you', text: 'We need to create a more immersive experience.' },
-    { who: 'vi', text: 'Should we create UI for wearable glasses?' },
-    { who: 'des', text: 'I love this idea. We could explore the best settings in Roblox and other top games and create some of the best ideas!' },
-    { who: 'alex', text: "What a great idea, let's jump on a call now so we can plan and create deliverables and due dates." },
-];
-const CALL = [
-    { who: 'alex', text: "Let's plan it. Vi, you own the concept. Des, the first mockups. I'll set the deliverables and due dates." },
-    { who: 'vi', text: 'First deliverable: a glasses-ready layout, due Friday.' },
-    { who: 'des', text: "I'll pull references from the top Roblox worlds and draft three directions, due Wednesday." },
-    { who: 'you', text: 'Perfect. Save the transcript and put the deliverables on the Board.' },
-];
-// The beats, in order: the prompt, three people added, four lines of chat, the
-// move to a call, four lines said on it, and the record of it.
-const PROMPT = 0;
-const ADD = 1; // .. 3
-const TALK = 4; // .. 7
-const RING = 8;
-const SAY = 9; // .. 12
-const SAVED = 13;
-const MS = 26;
-/** Text revealed a character at a time; says when it is all there. */
-function Typed({ text, go, onDone }) {
-    const [n, setN] = useState(go ? 0 : text.length);
-    useEffect(() => {
-        if (!go)
-            return;
-        if (n >= text.length) {
-            const t = window.setTimeout(onDone, 520);
-            return () => window.clearTimeout(t);
-        }
-        const t = window.setTimeout(() => setN((k) => k + 1), MS);
-        return () => window.clearTimeout(t);
-    }, [go, n, text, onDone]);
-    return _jsx(_Fragment, { children: text.slice(0, n) });
-}
-function Face({ who, size = 28 }) {
-    const c = CAST[who];
-    return (_jsx(View, { render: "span", "aria-hidden": true, width: size, height: size, rounded: 9999, bg: c.ground, display: "inline-flex", items: "center", justify: "center", overflow: "hidden", shrink: 0, children: c.face ? (_jsx("img", { src: c.face, alt: "", width: size, height: size })) : (_jsx(Text, { fontFamily: "$body", fontSize: size * 0.42, fontWeight: "600", color: "var(--pure-white)", children: c.initial })) }));
-}
-const ink = '$ink';
-const dim = '$soft';
-const line = '$borderColor';
-// The stage is portalled to <body> by the Guide, outside every font scope gui
-// writes, so a `$N` size or leading resolves only on a Text that names `$body`
-// itself — which is why every Text below does.
-/** A line of the scene's own type: the base rung on its own leading. */
-const SAID = { fontSize: '$3', lineHeight: '$3' };
-export function Scene({ step, onNext, onSkip }) {
-    const [beat, setBeat] = useState(PROMPT);
-    const [typed, setTyped] = useState(0);
-    const advance = () => setBeat((b) => Math.min(b + 1, SAVED));
-    const settle = () => setTyped((k) => k + 1);
-    // Beats that type advance themselves when the typing is done; the ones that
-    // only appear advance on a short pause.
-    useEffect(() => {
-        const typing = beat === PROMPT || (beat >= TALK && beat < RING) || (beat >= SAY && beat < SAVED);
-        if (typing)
-            return;
-        if (beat === SAVED)
-            return;
-        const t = window.setTimeout(advance, beat === RING ? 1400 : 900);
-        return () => window.clearTimeout(t);
-    }, [beat]);
-    useEffect(() => {
-        if (typed === 0)
-            return;
-        advance();
-    }, [typed]);
-    const added = ADDED.slice(0, Math.max(0, Math.min(ADDED.length, beat - ADD + 1)));
-    const said = CHAT.slice(0, Math.max(0, Math.min(CHAT.length, beat - TALK + 1)));
-    const onCall = beat >= RING;
-    const spoken = CALL.slice(0, Math.max(0, Math.min(CALL.length, beat - SAY + 1)));
-    const speaker = onCall && beat >= SAY && beat < SAVED ? CALL[beat - SAY].who : null;
-    return (_jsxs(YStack, { role: "group", "aria-label": "A chat that becomes a call", position: "fixed", l: "50%", t: "50%", x: "-50%", y: "-50%", width: "min(720px, calc(100vw - 32px))", maxH: "calc(100vh - 32px)", overflowY: "auto", z: "var(--z-modal)", bg: "var(--popover)", borderWidth: 1, borderColor: "var(--border-control)", rounded: 14, boxShadow: "var(--shadow-floating)", p: 18, children: [_jsxs(XStack, { items: "center", gap: 10, mb: 12, children: [_jsx(Text, { fontFamily: "$body", fontSize: 10, letterSpacing: 1.1, textTransform: "uppercase", color: "$faint", children: step }), _jsx(View, { flex: 1, height: 1, bg: line }), _jsx(Text, { fontFamily: "$body", fontSize: "$2", color: dim, children: onCall ? 'On a call' : 'In chat' })] }), _jsx(Text, { fontFamily: "$body", render: "h2", mb: 4, fontSize: "$6", fontWeight: "600", lineHeight: "$4", color: ink, children: "More than chat" }), _jsx(Text, { fontFamily: "$body", render: "p", mb: 14, ...SAID, color: "$quiet", children: "Start with a bot, bring in the team, and take it to a call. Nothing here is sent or saved." }), !onCall ? (_jsxs(YStack, { borderWidth: 1, borderColor: line, rounded: 12, overflow: "hidden", children: [_jsxs(XStack, { items: "center", gap: 10, px: 12, py: 10, borderBottomWidth: 1, borderColor: line, children: [_jsx(Face, { who: "des" }), _jsxs(YStack, { children: [_jsx(Text, { fontFamily: "$body", fontSize: "$3", fontWeight: "600", lineHeight: "$1", color: ink, children: "des" }), _jsx(Text, { fontFamily: "$body", fontSize: "$2", lineHeight: "$1", color: dim, children: "Designer \u00B7 bot" })] }), _jsx(View, { flex: 1 }), _jsxs(XStack, { gap: 6, flexWrap: "wrap", justify: "flex-end", children: [added.map((w) => (_jsxs(XStack, { items: "center", gap: 6, pl: 4, pr: 8, py: 3, rounded: 999, borderWidth: 1, borderColor: line, children: [_jsx(Face, { who: w, size: 18 }), _jsx(Text, { fontFamily: "$body", fontSize: "$2", color: ink, children: CAST[w].name }), _jsxs(Text, { fontFamily: "$body", fontSize: "$2", color: dim, children: ["\u00B7 ", CAST[w].part] })] }, w))), beat >= ADD && beat < TALK ? (_jsx(Text, { fontFamily: "$body", px: 8, py: 3, rounded: 999, borderWidth: 1, borderStyle: "dashed", borderColor: line, fontSize: "$2", color: dim, children: "+ Add to chat" })) : null] })] }), _jsxs(View, { display: "grid", p: 12, gap: 10, minH: 168, children: [said.map((m, k) => (_jsxs(XStack, { gap: 10, items: "flex-start", flexDirection: m.who === 'you' ? 'row-reverse' : 'row', children: [_jsx(Face, { who: m.who }), _jsxs(YStack, { maxW: "78%", px: 12, py: 8, rounded: 12, bg: m.who === 'you' ? 'var(--foreground)' : '$hover', children: [m.who !== 'you' ? (_jsx(Text, { fontFamily: "$body", fontSize: "$1", color: dim, mb: 2, children: CAST[m.who].name })) : null, _jsx(Text, { fontFamily: "$body", ...SAID, color: m.who === 'you' ? 'var(--background)' : ink, children: _jsx(Typed, { text: m.text, go: k === said.length - 1 && beat < RING, onDone: settle }) })] })] }, k))), said.length === 0 ? (_jsx(Text, { fontFamily: "$body", fontSize: "$2", color: dim, text: "center", pt: 48, children: beat < ADD ? 'A chat with des, your designer bot.' : 'Bringing the team in…' })) : null] }), _jsxs(Text, { fontFamily: "$body", m: 12, px: 12, py: 10, rounded: 10, borderWidth: 1, borderColor: line, ...SAID, color: beat === PROMPT ? ink : dim, minH: 40, children: [beat === PROMPT ? _jsx(Typed, { text: SAMPLE, go: true, onDone: settle }) : beat < TALK ? SAMPLE : 'Ask anything', _jsx(View, { render: "span", "aria-hidden": true, display: beat === PROMPT ? 'inline-flex' : 'none', width: 1, height: 14, bg: ink, ml: 1, y: 2 })] })] })) : (_jsxs(YStack, { borderWidth: 1, borderColor: line, rounded: 12, overflow: "hidden", children: [_jsx(View, { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, p: 12, borderBottomWidth: 1, borderColor: line, children: ['you', 'des', 'vi', 'alex'].map((w) => (_jsxs(YStack, { items: "center", gap: 6, px: 6, py: 12, rounded: 10, bg: "$hover", outlineWidth: 2, outlineStyle: "solid", outlineColor: speaker === w ? ink : 'transparent', transition: "200ms", children: [_jsx(Face, { who: w, size: 40 }), _jsx(Text, { fontFamily: "$body", fontSize: "$2", color: ink, children: CAST[w].name })] }, w))) }), _jsxs(YStack, { p: 12, minH: 168, children: [_jsx(Text, { fontFamily: "$body", fontSize: "$1", letterSpacing: 1.1, textTransform: "uppercase", color: dim, mb: 8, children: beat === RING ? 'Calling…' : 'Live transcript' }), _jsx(View, { display: "grid", gap: 8, children: spoken.map((m, k) => (_jsxs(XStack, { gap: 8, children: [_jsx(Text, { fontFamily: "$body", ...SAID, color: dim, shrink: 0, width: 44, children: CAST[m.who].name }), _jsx(Text, { fontFamily: "$body", ...SAID, color: ink, children: _jsx(Typed, { text: m.text, go: k === spoken.length - 1 && beat < SAVED, onDone: settle }) })] }, k))) }), beat === SAVED ? (_jsx(Text, { fontFamily: "$body", mt: 14, px: 10, py: 8, rounded: 8, borderWidth: 1, borderColor: line, fontSize: "$2", color: ink, children: "\u2713 Transcript saved \u00B7 Deliverables and due dates on the Board" })) : null] })] })), _jsxs(XStack, { items: "center", gap: 8, mt: 14, children: [_jsx(Button, { variant: "linkMuted", size: "sm", px: 2, onClick: onSkip, children: "Skip" }), _jsx(View, { flex: 1 }), beat === SAVED ? (_jsx(Button, { size: "sm", onClick: () => {
-                            setTyped(0);
-                            setBeat(PROMPT);
-                        }, children: "Replay" })) : null, _jsx(Next, { onPress: onNext })] })] }));
-}
-/** A stop's one primary control, the scene's and the card's. It takes focus when the stop opens, which is what
- *  `autoFocus` did on the element it replaced; a stop that only relabels it (Next to Done) keeps the focus it has.
- */
-export function Next({ onPress, label = 'Next' }) {
-    const ref = useRef(null);
-    useEffect(() => ref.current?.focus(), []);
-    return (_jsx(Button, { ref: ref, variant: "primary", size: "sm", onClick: onPress, children: label }));
-}

package/dist/Usage.d.ts

@@ -1 +0,0 @@
-export declare function Usage(): import("react").JSX.Element;

package/dist/Usage.js

@@ -1,21 +0,0 @@
-'use client';
-import { jsxs as _jsxs } from "react/jsx-runtime";
-// Free's usage, said where it is spent. Free is limited, and what it spends
-// comes from one pool every free user shares, so the line says both, and what
-// is left of today's when billing states a day window for the plan (the tier's
-// `windows`, lib/hanzo/tier.ts). It renders nothing for any other plan, or
-// while the plan is unread.
-import { useIam } from '@hanzo/iam/react';
-import { Text } from '@hanzo/ui';
-import { org } from './lib/session.js';
-import { useTier } from './lib/tier.js';
-/** The free rung's name in the billing catalog. */
-const FREE = 'free';
-export function Usage() {
-    const { isAuthenticated } = useIam();
-    const { tier } = useTier(isAuthenticated, org());
-    if (tier?.tier?.name !== FREE)
-        return null;
-    const today = tier.windows?.find((w) => /day/i.test(w.span));
-    return (_jsxs(Text, { role: "status", fontSize: "$1", color: "$soft", text: "center", children: ["Free \u00B7 limited, shared pool", today ? ` · ${today.remaining} of ${today.limit} left today` : ''] }));
-}

package/dist/meters.d.ts

@@ -1,8 +0,0 @@
-import { type Limits } from './lib/limits.js';
-/** What a spent month says. */
-export declare const SPENT = "Monthly included usage is used; Enso and Zen keep answering.";
-/** The plan holder's windows, or nothing where the limits name none. */
-export declare function Meters({ limits, large }: {
-    limits: Limits;
-    large?: boolean;
-}): import("react").JSX.Element;

package/dist/meters.js

@@ -1,31 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// A plan's windows as bars of what is LEFT: the five-hour session, the day and
-// the billing month, each with when it starts over. Shares only — a plan is a
-// subscription with limits, never a balance, so no count and no amount is
-// drawn. The month spent refuses nothing (Enso and Zen keep answering), which
-// is why it is a quiet line under the bars rather than a warning.
-//
-// One component for the composer's foot and for the usage page: `large` is the
-// page's size. Each bar is drawn above its words so the three bars stay on one
-// line however the words under them wrap on a phone.
-import { Progress, Text, XStack, YStack } from '@hanzo/ui';
-import { clock, day, left } from './lib/limits.js';
-/** What a spent month says. */
-export const SPENT = 'Monthly included usage is used; Enso and Zen keep answering.';
-const WINDOWS = [
-    ['session', 'Session', (s) => (s.resets_at ? `resets ${clock(s.resets_at)}` : '')],
-    ['day', 'Today', (s) => (s.resets_at ? `resets ${clock(s.resets_at)}` : '')],
-    ['month', 'This month', (s) => (s.resets_at ? `renews ${day(s.resets_at)}` : '')],
-];
-/** The plan holder's windows, or nothing where the limits name none. */
-export function Meters({ limits, large = false }) {
-    const shown = WINDOWS.flatMap(([key, name, when]) => {
-        const span = limits[key];
-        return span ? [{ name, span, when: when(span) }] : [];
-    });
-    if (!shown.length)
-        return null;
-    const size = large ? '$3' : '$1';
-    return (_jsxs(YStack, { gap: large ? '$4' : '$1.5', width: "100%", minW: 0, children: [_jsx(XStack, { gap: large ? '$6' : '$3', rowGap: "$4", width: "100%", flexWrap: large ? 'wrap' : 'nowrap', children: shown.map(({ name, span, when }) => (_jsxs(YStack, { flex: 1, minW: large ? 200 : 0, gap: large ? '$2' : '$1', children: [_jsx(Progress, { value: left(span), height: large ? 8 : 4, minW: 0, "aria-label": name }), _jsxs(XStack, { flexWrap: "wrap", columnGap: "$1.5", items: "baseline", minW: 0, children: [_jsx(Text, { fontSize: size, color: large ? '$ink' : '$soft', numberOfLines: 1, children: name }), _jsxs(XStack, { children: [_jsxs(Text, { fontSize: size, color: "$ink", fontWeight: "500", fontVariant: ['tabular-nums'], children: [left(span), "%"] }), _jsx(Text, { fontSize: size, color: "$ink", display: large ? 'flex' : 'none', $sm: { display: 'flex' }, children: "\u00A0left" })] }), when ? (_jsx(Text, { fontSize: large ? '$2' : '$1', color: "$soft", numberOfLines: 1, children: when })) : null] })] }, name))) }), limits.month && limits.month.percent >= 100 ? (_jsx(Text, { fontSize: large ? '$2' : '$1', color: "$soft", children: SPENT })) : null] }));
-}

package/dist/tours.d.ts

@@ -1,24 +0,0 @@
-/** One stop: what to point at, and what to say about it. */
-export interface Stop {
-    id: string;
-    title: string;
-    body: string;
-    /** Where the card sits relative to the anchor; it flips if it would leave the viewport. */
-    side?: 'top' | 'bottom' | 'left' | 'right';
-    /** Resolve the live element. Returning null skips the stop. */
-    find: () => Element | null;
-    /** Played rather than read: the scene, drawn on a stage instead of a card. */
-    scene?: boolean;
-}
-export type Tour = 'chat' | 'meet' | 'calendar' | 'contacts' | 'inbox' | 'drive' | 'board';
-export declare const seen: (el: Element | null) => Element | null;
-export declare const byLabel: (...labels: string[]) => Element | null;
-export declare const byPlaceholder: (...values: string[]) => Element;
-export declare const byTitle: (...values: string[]) => Element;
-/** The smallest element whose own text is exactly this word. */
-export declare const byText: (text: string, within?: Element | null) => Element | null;
-/** The composer is the one visible textarea in the room. */
-export declare const composer: () => Element | null;
-/** The Enso control on the composer: effort, and the model override inside it. */
-export declare const modelChip: () => Element | null;
-export declare const TOURS: Record<Tour, Stop[]>;