@hanzo/rooms 0.1.22 → 0.1.23

package/dist/Column.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The app's one column, the same in both modes: the Chat / Dev switch, a filter,
 // New, Dev's places, the Recents of the mode it is in, and at the foot the
-// Slack card and the account (components/workspace/Me.tsx).
+// account (components/workspace/Me.tsx).
 //
 // It is a pane on the frame's ground (app/_web.tsx), sized by the edge in the
 // gutter to its right: dragged, keyed or double-clicked back (@hanzo/build's
@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // choice outlives the move.
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { ChevronDown, ChevronUp, PanelLeft, Plus, Search } from 'lucide-react';
-import { Grip, nav, path, route, Slack } from '@hanzo/build';
+import { Grip, nav, route } from '@hanzo/build';
 import { Sidebar, SidebarIconButton, SidebarItem } from '@hanzo/ui/chat';
 import { HanzoMark } from '@hanzogui/shell';
 import { useState } from 'react';
@@ -54,7 +54,6 @@ const ROW = { rounded: '$4', minH: 34 };
 export function Column({ host, mode, thread, onChat, onDev, go, drawer = false, }) {
     const [kept, setCollapsed] = useKept('hanzo.build.rail', false);
     const collapsed = kept && !drawer;
-    const [slack, setSlack] = useKept('hanzo.build.slack', false);
     const [unfolded, setUnfolded] = useState(false);
     const [words, setWords] = useState('');
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
@@ -83,7 +82,7 @@ export function Column({ host, mode, thread, onChat, onDev, go, drawer = false,
                                             setWords('');
                                     }, placeholder: "Filter", "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), _jsxs(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: fresh, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: mode === 'chat' ? 'New chat' : 'New run' }) }), mode === 'dev'
                                 ? links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id)))
-                                : null, mode === 'dev' ? (_jsxs(YStack, { role: "listitem", children: [_jsx(SidebarItem, { ...ROW, "aria-expanded": unfolded, icon: unfolded ? _jsx(ChevronUp, { size: 16, "aria-hidden": true }) : _jsx(ChevronDown, { size: 16, "aria-hidden": true }), onPress: () => setUnfolded((v) => !v), ...keys(() => setUnfolded((v) => !v)), children: "More" }), unfolded ? (_jsx(YStack, { role: "list", gap: 2, children: more.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })) : null] })) : null] }), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {}), host.person && !slack ? (_jsx(YStack, { "data-slot": "app-slack", children: _jsx(Slack, { onOpen: () => dev(path({ kind: 'settings', section: 'integrations' })), onDismiss: () => setSlack(true) }) })) : null] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
+                                : null, mode === 'dev' ? (_jsxs(YStack, { role: "listitem", children: [_jsx(SidebarItem, { ...ROW, "aria-expanded": unfolded, icon: unfolded ? _jsx(ChevronUp, { size: 16, "aria-hidden": true }) : _jsx(ChevronDown, { size: 16, "aria-hidden": true }), onPress: () => setUnfolded((v) => !v), ...keys(() => setUnfolded((v) => !v)), children: "More" }), unfolded ? (_jsx(YStack, { role: "list", gap: 2, children: more.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })) : null] })) : null] }), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
                 // In the gutter between the column and the pane, not over the column's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Profile.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The reader's own profile, in the column beside the room.
 //
 // A WORKSPACE OPENS A PROFILE IN A PANEL, not a page. The page exists — it is
-// /account, and it is where the whole record is edited — but reaching it from a
+// Settings (/settings), where the whole record is edited — but reaching it from a
 // conversation costs the conversation: the room, the sidebar and the rail all
 // go, and coming back is a navigation rather than a close. Slack, Teams and
 // every app shaped like them put this in the right column for that reason, and
@@ -26,7 +26,7 @@ import { mark } from './lib/mark.js';
 import { BAD } from './lib/mix.js';
 /** Slack's is 380 and the thread panel that shares this slot is the same. */
 const WIDTH = 380;
-const ACCOUNT = '/account';
+const ACCOUNT = '/settings';
 export function Profile({ open, onClose }) {
     const { Link } = useRooms();
     const { user, updateUserProfile } = useAccount();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.22",
+  "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",

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/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[]>;

package/dist/tours.js

@@ -1,319 +0,0 @@
-'use client';
-// The tours, one per room, and the finders they point with.
-//
-// A stop RESOLVES A LIVE ELEMENT by what it already carries — its label, its
-// role, its text — never a marker sprinkled for the tour. A stop whose anchor is
-// absent is skipped, so each tour describes the room as it is that day.
-import { brand } from './where.js';
-export const seen = (el) => {
-    if (!el)
-        return null;
-    const r = el.getBoundingClientRect();
-    if (r.width < 6 || r.height < 6)
-        return null;
-    const s = getComputedStyle(el);
-    if (s.visibility === 'hidden' || s.display === 'none' || Number(s.opacity) === 0)
-        return null;
-    return el;
-};
-export const byLabel = (...labels) => {
-    for (const l of labels) {
-        const el = seen(document.querySelector(`[aria-label="${l}"]`));
-        if (el)
-            return el;
-    }
-    return null;
-};
-const byAttr = (attr, ...values) => {
-    for (const v of values) {
-        const el = seen(document.querySelector(`[${attr}="${v}"]`));
-        if (el)
-            return el;
-    }
-    return null;
-};
-export const byPlaceholder = (...values) => byAttr('placeholder', ...values);
-export const byTitle = (...values) => byAttr('title', ...values);
-/** The smallest element whose own text is exactly this word. */
-export const byText = (text, within) => {
-    const root = within ?? document.body;
-    let best = null;
-    for (const el of root.querySelectorAll('button,a,[role="button"]')) {
-        if ((el.textContent || '').trim() !== text)
-            continue;
-        const ok = seen(el);
-        if (!ok)
-            continue;
-        if (!best || el.getBoundingClientRect().width < best.getBoundingClientRect().width)
-            best = el;
-    }
-    return best;
-};
-/** A field whose placeholder starts with these words. */
-const byPlaceholderStart = (start) => {
-    for (const el of document.querySelectorAll('input,textarea')) {
-        if ((el.getAttribute('placeholder') || '').startsWith(start) && seen(el))
-            return el;
-    }
-    return null;
-};
-/** The composer is the one visible textarea in the room. */
-export const composer = () => {
-    const all = [...document.querySelectorAll('textarea')].map(seen).filter(Boolean);
-    return all.sort((a, b) => b.getBoundingClientRect().width - a.getBoundingClientRect().width)[0] ?? null;
-};
-/** The Enso control on the composer: effort, and the model override inside it. */
-export const modelChip = () => seen(document.querySelector('[aria-label^="Enso"]'));
-/** A place on the rail, by the word under its icon. */
-const rail = (label) => {
-    const b = byText(label);
-    return b?.parentElement ?? b;
-};
-const CHAT = [
-    {
-        id: 'composer',
-        get title() {
-            return `What are you interested in? How can ${brand()} help you?`;
-        },
-        body: 'Type what you want in plain words. Paste an error, describe a feature, or drop in a file.',
-        side: 'top',
-        find: composer,
-    },
-    {
-        id: 'model',
-        title: 'Perfectly tuned with 500+ of the leading models',
-        body: 'Enso reads your question and picks the best model for it. Tap here to choose one yourself.',
-        side: 'top',
-        find: modelChip,
-    },
-    {
-        id: 'work',
-        title: 'Audit the work-flow',
-        body: "Show work opens the AI's steps and the tools it used. Turn it on when an answer surprises you.",
-        side: 'top',
-        find: () => byText('Show work') || byText('Hide work'),
-    },
-    {
-        id: 'scene',
-        title: 'More than chat',
-        body: 'Chat with a bot, bring in the team, and take it to a call. Watch one happen.',
-        side: 'right',
-        scene: true,
-        find: () => rail('Chat'),
-    },
-    {
-        id: 'roster',
-        title: 'People and agents, one list',
-        body: 'Your team and your AI agents sit together. Click any of them to start talking. An agent answers like a person.',
-        side: 'right',
-        find: () => {
-            const az = byLabel('A-Z', 'Sort A-Z');
-            if (az?.parentElement)
-                return az.parentElement;
-            const dir = byText('Directory');
-            return dir?.parentElement ?? dir;
-        },
-    },
-    {
-        id: 'find',
-        title: 'Find anything',
-        body: 'Press ⌘K to search chats, people, agents and every section at once.',
-        side: 'bottom',
-        find: () => {
-            for (const b of document.querySelectorAll('button,[role="button"]')) {
-                if (/^Search\b/.test((b.textContent || '').trim()) && seen(b))
-                    return b;
-            }
-            return null;
-        },
-    },
-    {
-        id: 'aside',
-        title: 'Results stay beside you',
-        body: 'Files, sources and previews collect in the side panel, so the chat stays easy to read.',
-        side: 'bottom',
-        find: () => byLabel('Open side panel', 'Close side panel'),
-    },
-    {
-        id: 'orgs',
-        title: 'Switch workspaces',
-        body: 'Each icon on the far left is a workspace, with its own chats, agents, files and billing.',
-        side: 'right',
-        find: () => {
-            // The rail is a column of small square marks pinned to the far edge —
-            // that shape is what identifies it, not a label, because each mark is
-            // labelled with its own workspace ("LUX", "ZOO", an initial) and none of
-            // them names the rail. Take their common parent.
-            const marks = [...document.querySelectorAll('button,[role="button"]')].filter((el) => {
-                const r = el.getBoundingClientRect();
-                return r.left < 64 && r.width >= 26 && r.width <= 60 && Math.abs(r.width - r.height) < 10 && seen(el);
-            });
-            if (marks.length < 2)
-                return byLabel('Switch organization');
-            let node = marks[0].parentElement;
-            while (node && !marks.every((m) => node.contains(m)))
-                node = node.parentElement;
-            return seen(node) ?? marks[0];
-        },
-    },
-    {
-        id: 'account',
-        title: 'Your plan',
-        body: 'See your credit, manage payment and change settings. Free uses the open models. Paid unlocks the rest.',
-        side: 'top',
-        find: () => byLabel('Account, plan and workspace'),
-    },
-];
-const MEET = [
-    {
-        id: 'start',
-        title: 'Start a meeting',
-        body: 'One click opens a room. Share the link and anyone can join from a browser.',
-        side: 'bottom',
-        find: () => byText('Start Instant Meeting'),
-    },
-    {
-        id: 'join',
-        title: 'Join with a code',
-        body: 'Paste a meeting code or link here to join a call someone else started.',
-        side: 'bottom',
-        find: () => byPlaceholder('Enter meeting code or link'),
-    },
-    {
-        id: 'transcript',
-        title: 'Every call is written down',
-        body: 'A Hanzo bot sits in and transcribes. What everyone said is saved with the meeting.',
-        side: 'left',
-        find: () => {
-            for (const el of document.querySelectorAll('div,p,section')) {
-                if (el.childElementCount === 0 && /transcription/i.test(el.textContent || '') && seen(el))
-                    return el.parentElement ?? el;
-            }
-            return null;
-        },
-    },
-];
-const CALENDAR = [
-    {
-        id: 'schedule',
-        title: 'Add an event or a routine',
-        body: 'A meeting, a reminder, or a job an agent runs on a schedule. Name it and pick the time.',
-        side: 'bottom',
-        find: () => byText('Schedule Event / Routine'),
-    },
-    {
-        id: 'crons',
-        title: 'Bots on a timer',
-        body: 'Bot Crons lists what your bots run and when. Change a time here and the bot follows it.',
-        side: 'bottom',
-        find: () => byText('Bot Crons'),
-    },
-    {
-        id: 'booker',
-        title: 'Let people book you',
-        body: 'A public page where anyone can pick a free time on your calendar.',
-        side: 'bottom',
-        find: () => byText('Public Booker'),
-    },
-];
-const CONTACTS = [
-    {
-        id: 'search',
-        title: 'Everyone in one place',
-        body: 'People and agents, side by side. Search by name to find anyone fast.',
-        side: 'bottom',
-        find: () => byLabel('Search contacts') || byPlaceholder('Search'),
-    },
-    {
-        id: 'invite',
-        title: 'Invite your team',
-        body: 'Send an invite by email, or share a link anyone can use to join your organization.',
-        side: 'bottom',
-        find: () => byLabel('Invite') || byText('Invite'),
-    },
-    {
-        id: 'agent',
-        title: 'Make an agent',
-        body: 'Give it a name and a job. It joins the roster next to your people and answers like one.',
-        side: 'bottom',
-        find: () => byText('New agent'),
-    },
-];
-const INBOX = [
-    {
-        id: 'connect',
-        title: 'Every channel, one inbox',
-        body: 'Connect Slack, email, Discord and the rest. Their messages land here together.',
-        side: 'bottom',
-        find: () => byText('Connect an app'),
-    },
-    {
-        id: 'channels',
-        title: 'Your channels',
-        body: 'Each connected app is a channel on the left. Nothing gets lost between them.',
-        side: 'right',
-        find: () => byLabel('Resize inbox channel list')?.parentElement ?? null,
-    },
-    {
-        id: 'reply',
-        title: 'Reply where it came from',
-        body: 'Answer here and it goes back on the same channel the message arrived on.',
-        side: 'top',
-        find: () => byPlaceholderStart('Reply on'),
-    },
-];
-const DRIVE = [
-    {
-        id: 'search',
-        title: 'Search everything',
-        body: 'Every file your team and your agents made, found by name or by what is inside it.',
-        side: 'bottom',
-        find: () => byLabel('Search Drive'),
-    },
-    {
-        id: 'upload',
-        title: 'Bring files in',
-        body: 'Upload anything. Agents can read it, and it shows up in chat when you ask.',
-        side: 'bottom',
-        find: () => byTitle('Upload'),
-    },
-    {
-        id: 'folder',
-        title: 'Keep it tidy',
-        body: 'Make folders for projects, clients or agents. Drag files between them.',
-        side: 'bottom',
-        find: () => byTitle('Add Folder'),
-    },
-];
-const BOARD = [
-    {
-        id: 'add',
-        title: 'Add a card',
-        body: 'One card per task. Give it a date, a priority, and a person or an agent to do it.',
-        side: 'bottom',
-        find: () => byText('Add a card') || byPlaceholder('Add an item'),
-    },
-    {
-        id: 'planner',
-        title: 'Plan by day',
-        body: 'Planner lays the cards out by date, so today is one column and next week is a glance away.',
-        side: 'bottom',
-        find: () => byText('Planner'),
-    },
-    {
-        id: 'filter',
-        title: 'See only what matters now',
-        body: 'Filter by who, by when, or by what is finished.',
-        side: 'bottom',
-        find: () => byText('Filter'),
-    },
-];
-export const TOURS = {
-    chat: CHAT,
-    meet: MEET,
-    calendar: CALENDAR,
-    contacts: CONTACTS,
-    inbox: INBOX,
-    drive: DRIVE,
-    board: BOARD,
-};