@hanzo/rooms 0.1.68 → 0.1.69

package/dist/App.js

@@ -1,7 +1,9 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The web app as the whole window, in two modes: Chat, a conversation with the
-// product's AI, and Dev, @hanzo/build's `<Builder>` without a rail of its own.
+// The web app as the whole window, in three modes: Chat, a conversation with
+// the product's AI; Dev, @hanzo/build's `<Builder>` without a rail of its own;
+// and Studio, @hanzo/studio's `<Studio>` the same way, its places (`nav`) in the
+// sidebar where Dev's stand for Dev.
 //
 //   OUTER  the rail (Rail.tsx) and the sidebar beside it (Column.tsx), on the
 //          window's floor, with the window's bar above them where the host has
@@ -14,11 +16,12 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // search, New, Dev's places and the reader's Recents. The address says the
 // mode, as a path (lib/host `talk`, `app`, `place`): `/` and `/chat` are Chat on
 // a new conversation, `/chat/<id>` one of the reader's, and a path under `/dev`
-// is Dev: `/dev/run/<id>` a run, `/dev/projects/<org>/<repo>` a project. Moving
+// is Dev: `/dev/run/<id>` a run, `/dev/projects/<org>/<repo>` a project; a path
+// under `/studio` is Studio, its own address after it (`c/<id>`, `library`). Moving
 // between the modes is a history entry (`go`), never a load, so a host serves
 // this one component for every path under each.
 //
-// Every host draws this: hanzo.ai at `/`, `/chat` and `/dev`, and the desktop
+// Every host draws this: hanzo.ai at `/`, `/chat`, `/dev` and `/studio`, and the desktop
 // app as its main window. The host mounts IamProvider and `<Rooms>` with its
 // router and the path, and draws this only for a signed-in reader; what a
 // stranger sees is the host's.
@@ -46,13 +49,19 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // EVERY MOVE PUTS THE DRAWER AWAY, the one to where the reader already is
 // included.
 //
+// STUDIO LOADS WITH ITS MODE. Its module (and three.js behind a 3D tab) is
+// fetched the first time the reader stands in Studio; its places are a few
+// lines and come with the app. Another organization opens it at its New, so
+// nothing it read under the last one stays.
+//
 // THE PLANS' OWN ADDRESS LEAVES for the pay site in its place (dev.tsx `leave`),
 // so the builder's own plans are never drawn.
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ArrowLeft, ArrowRight, Menu } from 'lucide-react';
 import { AiProvider } from '@hanzo/ai/react';
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { Builder, HostProvider, path as written, route } from '@hanzo/build';
+import { nav as places } from '@hanzo/studio';
 import { SidebarIconButton } from '@hanzo/ui/chat';
 import { useAi } from './lib/ai.js';
 import { Chat } from './Chat.js';
@@ -66,8 +75,10 @@ import { empty, openThread, useOpen } from './open.js';
 import { Paned } from './Shell.js';
 import { floor, pane } from './ground.js';
 import { pick } from './lib/session.js';
-import { app, go, place, talk } from './lib/host.js';
+import { app, go, place, studio, talk } from './lib/host.js';
 import { wordmark } from './where.js';
+/** Studio, fetched the first time the reader stands in it. */
+const Studio = lazy(() => import('@hanzo/studio').then((m) => ({ default: m.Studio })));
 /** `/` is Chat on a new conversation. */
 const HOME = { mode: 'chat', thread: null };
 /** The bar's height, px: the reference window's title bar. */
@@ -85,7 +96,7 @@ const INSET = {
     left: 'max(var(--pane-gap), var(--safe-left))',
 };
 /** Where each mode was last, so the rail goes back to it. */
-const last = { chat: '', dev: '' };
+const last = { chat: '', dev: '', studio: '' };
 /** Whether a key press is the reader typing, where the app's keys are the field's. */
 const typing = (e) => {
     const el = e.target;
@@ -119,6 +130,22 @@ function Window({ bar }) {
     const at = place(here) ?? HOME;
     const mode = at.mode;
     const where = at.mode === 'dev' ? at.at : null;
+    // Studio's host: Dev's, at Studio's address, its moves under /studio, and
+    // another organization opening Studio's New in it.
+    const made = at.mode === 'studio' ? at.at : '';
+    const maker = useMemo(() => ({
+        ...host,
+        name: 'Hanzo Studio',
+        path: made,
+        go: (to, how) => {
+            shut();
+            go(studio(to), how?.replace);
+        },
+        chooseOrg: (next) => {
+            pick(next);
+            window.location.assign(studio(''));
+        },
+    }), [host, made, shut]);
     // A run floats two panes of its own, so the pane it stands in is not cut.
     const run = where !== null && route(where).kind === 'run';
     const asked = at.mode === 'chat' ? at.thread : null;
@@ -202,11 +229,13 @@ function Window({ bar }) {
     }, [bar, router, move]);
     const toChat = () => move(last.chat || talk());
     const toDev = () => move(last.dev || app(''));
+    const toStudio = () => move(last.studio || studio(''));
     // Another organization: picked, and the app opened in it at the mode's New.
     const org = (o) => {
         pick(o);
-        window.location.assign(mode === 'dev' ? app('') : talk());
+        window.location.assign(mode === 'dev' ? app('') : mode === 'studio' ? studio('') : talk());
     };
+    const sidebar = mode === 'studio' ? places(maker, (p) => maker.go(p)) : undefined;
     const flip = () => setClosed(!closed);
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(YStack, { "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, go: move, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), seek: seek }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0 }, children: [bar ? null : (_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] })), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, seek: seek, drawer: true, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, go: move, onOrg: org }) }) })] })) : null] }) }) }));
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsxs(YStack, { "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }), closed ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), seek: seek, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0 }, children: [bar ? null : (_jsxs(XStack, { "data-slot": "app-bar", height: 44, px: "$1", gap: "$1", items: "center", shrink: 0, $md: { display: 'none' }, children: [_jsx(SidebarIconButton, { label: "Open sidebar", onPress: () => setDrawer(true), width: 44, height: 44, rounded: 999, children: _jsx(Menu, { size: 18 }) }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) })] })), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, seek: seek, drawer: true, places: sidebar, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, go: move, onOrg: org }) }) })] })) : null] }) }) }));
 }

package/dist/Column.d.ts

@@ -1,9 +1,10 @@
 import { type Host } from '@hanzo/build';
+import { type RailLink } from '@hanzo/ui/chat';
 import { type ReactNode } from 'react';
-import { type Mode } from './recent.js';
-export declare function Column({ host, mode, thread, go, onShut, seek, drawer, foot, }: {
+import { type Place } from './lib/host.js';
+export declare function Column({ host, mode, thread, go, onShut, seek, drawer, foot, places, }: {
     host: Host;
-    mode: Mode;
+    mode: Place['mode'];
     /** The Chat conversation the pane holds, or null. */
     thread: string | null;
     /** Moves the app to an address of this page. */
@@ -16,4 +17,10 @@ export declare function Column({ host, mode, thread, go, onShut, seek, drawer, f
     drawer?: boolean;
     /** What stands at its foot: the drawer's rail, laid flat. */
     foot?: ReactNode;
+    /** The mode's places, where they are not Dev's (Studio's `nav`). */
+    places?: {
+        id: string;
+        label: string;
+        links: RailLink[];
+    }[];
 }): import("react").JSX.Element;

package/dist/Column.js

@@ -89,7 +89,7 @@ function Activity({ host }) {
     ];
     return (_jsx(DropdownMenu, { minWidth: 280, trigger: _jsx(XStack, { render: "button", "aria-label": "Activity", ...{ title: 'Activity' }, ...HEAD, items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { bg: '$hover', opacity: 1 }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(Bell, { size: 16, "aria-hidden": true }) }), items: items }));
 }
-export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = false, foot, }) {
+export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = false, foot, places, }) {
     const [words, setWords] = useState('');
     // The search field shows once asked for, and while it holds words.
     const [seeking, setSeeking] = useState(false);
@@ -98,7 +98,7 @@ export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = fals
     const uid = useId();
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
     const dev = (p) => host.go(p);
-    const groups = nav(host, dev);
+    const groups = places ?? nav(host, dev);
     const open = (row) => (row.kind === 'chat' ? go(talk(row.id)) : dev(row.id));
     // Chat's New; Dev's is the first of its places.
     const create = () => {
@@ -119,13 +119,13 @@ export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = fals
     }, [seek]);
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), _jsx(SidebarIconButton, { label: mode === 'chat' ? 'Search chats' : 'Search runs', onPress: seeking ? done : ask, "aria-expanded": seeking || !!words, ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] }), seeking || words ? (_jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", pl: "$3", pr: "$1", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, mb: "$1.5", children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { ref: field, value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
+        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), mode === 'studio' ? null : (_jsx(SidebarIconButton, { label: mode === 'chat' ? 'Search chats' : 'Search runs', onPress: seeking ? done : ask, "aria-expanded": seeking || !!words, ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) }))] }), seeking || words ? (_jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", pl: "$3", pr: "$1", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, mb: "$1.5", children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { ref: field, value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Escape')
                                             done();
                                     }, onBlur: () => {
                                         if (!words)
                                             setSeeking(false);
-                                    }, placeholder: mode === 'chat' ? 'Search chats' : 'Search runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$3" }), words ? (_jsx(SidebarIconButton, { label: "Clear search", onPress: done, width: 28, height: 28, rounded: 999, children: _jsx(X, { size: 14, "aria-hidden": true }) })) : null] })) : null, mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
+                                    }, placeholder: mode === 'chat' ? 'Search chats' : 'Search runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$3" }), words ? (_jsx(SidebarIconButton, { label: "Clear search", onPress: done, width: 28, height: 28, rounded: 999, children: _jsx(X, { size: 14, "aria-hidden": true }) })) : null] })) : null, mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "New chat" }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), mode === 'studio' ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
                 // In the gutter between the sidebar and the panel, not over the sidebar's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Rail.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { type Host } from '@hanzo/build';
-import type { Mode } from './recent.js';
+import { type Place } from './lib/host.js';
 /** The rail's width, px. */
 export declare const RAIL = 48;
 /** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
@@ -18,9 +18,9 @@ export declare function Toggle({ open, onPress, label }: {
     onPress: () => void;
     label?: string;
 }): import("react").JSX.Element;
-export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, go, onOrg, }: {
+export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, onStudio, go, onOrg, }: {
     host: Host;
-    mode: Mode;
+    mode: Place['mode'];
     /** Dev's builder address, or null in Chat. */
     at: string | null;
     /** The sidebar beside the rail is open. */
@@ -29,9 +29,10 @@ export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev
     toggle?: () => void;
     /** Laid along the foot of the phone's drawer rather than down the window's edge. */
     flat?: boolean;
-    /** To Chat and to Dev, each where the reader left it. */
+    /** To Chat, Dev and Studio, each where the reader left it. */
     onChat: () => void;
     onDev: () => void;
+    onStudio: () => void;
     /** Moves the app to an address of this page. */
     go: (address: string) => void;
     /** Work in another organization. */

package/dist/Rail.js

@@ -5,8 +5,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // menu of the rest, and the account at the foot. It is how the app moves
 // between its products; there is no switch anywhere else.
 //
-// Studio is its own page, hanzo.ai/studio, opened in this tab: the app draws it
-// there for a signed-in reader.
+// Studio is the app's third mode (@hanzo/studio at /studio), each of the three
+// opened where the reader left it.
 //
 // Library, Scheduled tasks and Customize are Dev's own places (@hanzo/build's
 // Artifacts, Automations and Customize), raised to the rail; each is lit while
@@ -27,8 +27,7 @@ import { XStack, YStack } from '@hanzo/gui';
 import { route } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
 import { Me } from './Me.js';
-import { app, STUDIO, TABS, WORKSPACE } from './lib/host.js';
-import { site } from './where.js';
+import { app, TABS, WORKSPACE } from './lib/host.js';
 /** The rail's width, px. */
 export const RAIL = 48;
 /** A mark, px: a 36px square on a 44px pitch. */
@@ -72,7 +71,7 @@ export function Mark({ label, on = false, onPress, children, ...rest }) {
 export function Toggle({ open, onPress, label }) {
     return (_jsx(Mark, { label: label ?? (open ? 'Close sidebar' : 'Open sidebar'), "data-slot": "sidebar-toggle", "aria-expanded": open, onPress: onPress, children: _jsx(PanelLeft, { size: 18, "aria-hidden": true }) }));
 }
-export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, go, onOrg, }) {
+export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, onStudio, go, onOrg, }) {
     const here = mode === 'dev' ? raised(at) : null;
     const to = (p) => () => go(app(p));
     // Everything else the app reaches, behind More: on a phone the raised places first, then Dev's other places, then the products on hosts of their own.
@@ -95,5 +94,5 @@ export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev
         { key: 'team', label: 'Team', icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) },
     ];
     const Stack = flat ? XStack : YStack;
-    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", onPress: () => window.location.assign(site(STUDIO)), "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), flat ? null : (_jsxs(_Fragment, { children: [_jsx(Mark, { label: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Customize", on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) })] })), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
+    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": "Products", ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), flat ? null : (_jsxs(_Fragment, { children: [_jsx(Mark, { label: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Customize", on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) })] })), _jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": "More", ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
 }

package/dist/lib/host.d.ts

@@ -51,6 +51,8 @@ export declare const DEV = "/dev";
  * hanzo.ai/studio, whose page draws the app for a signed-in reader.
  */
 export declare const STUDIO = "/studio";
+/** Studio at an address of its own (@hanzo/studio `route`): '' is New, /studio. */
+export declare const studio: (at: string) => string;
 /** Chat on a conversation, or /chat itself for a new one. */
 export declare const talk: (id?: string | null) => string;
 /** Dev at a builder address (`route` in @hanzo/build); '' is New, /dev. What is not an address is New. */
@@ -62,6 +64,9 @@ export type Place = {
 } | {
     mode: 'dev';
     at: string;
+} | {
+    mode: 'studio';
+    at: string;
 };
 /** The place a path names, or null when it names none of the app's. */
 export declare function place(pathname: string): Place | null;

package/dist/lib/host.js

@@ -54,6 +54,8 @@ export const DEV = '/dev';
  * hanzo.ai/studio, whose page draws the app for a signed-in reader.
  */
 export const STUDIO = '/studio';
+/** Studio at an address of its own (@hanzo/studio `route`): '' is New, /studio. */
+export const studio = (at) => (at ? `${STUDIO}/${at.replace(/^\/+/, '')}` : STUDIO);
 /** Chat on a conversation, or /chat itself for a new one. */
 export const talk = (id) => (id ? `${CHAT}/${encodeURIComponent(id)}` : CHAT);
 /** Dev at a builder address (`route` in @hanzo/build); '' is New, /dev. What is not an address is New. */
@@ -67,6 +69,8 @@ export function place(pathname) {
         return { mode: 'chat', thread: null };
     if (p === DEV || p.startsWith(`${DEV}/`))
         return { mode: 'dev', at: path(parse(p.slice(DEV.length))) };
+    if (p === STUDIO || p.startsWith(`${STUDIO}/`))
+        return { mode: 'studio', at: p.slice(STUDIO.length + 1) };
     if (!p.startsWith(`${CHAT}/`))
         return null;
     const id = p.slice(CHAT.length + 1);
@@ -136,7 +140,8 @@ export function remember(mode) {
 /** Where `/` takes a member: the mode they were last in, Chat when none is kept. */
 export function resume() {
     try {
-        return window.localStorage.getItem(MODE) === 'dev' ? DEV : CHAT;
+        const kept = window.localStorage.getItem(MODE);
+        return kept === 'dev' ? DEV : kept === 'studio' ? STUDIO : CHAT;
     }
     catch {
         return CHAT;

package/dist/where.d.ts

@@ -68,6 +68,6 @@ export declare const where: () => Addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export declare const brand: () => string;
 /** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export declare const wordmark: (mode: 'chat' | 'dev') => string;
+export declare const wordmark: (mode: 'chat' | 'dev' | 'studio') => string;
 /** A page of the app's own, from wherever the rooms are mounted. */
 export declare const site: (path: string) => string;

package/dist/where.js

@@ -12,6 +12,6 @@ export const where = () => addresses;
 /** The product's name, as the host states it. Read at call time, like every address. */
 export const brand = () => addresses.brand ?? 'Hanzo AI';
 /** The product's name in each mode of the app: the host's brand in Chat (Hanzo AI, Hanzo Team), Hanzo Dev in Dev. */
-export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : brand());
+export const wordmark = (mode) => (mode === 'dev' ? 'Hanzo Dev' : mode === 'studio' ? 'Hanzo Studio' : brand());
 /** A page of the app's own, from wherever the rooms are mounted. */
 export const site = (path) => `${addresses.site}${path}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.68",
+  "version": "0.1.69",
   "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",
@@ -55,6 +55,7 @@
     "@hanzo/gui": "^8.3.5",
     "@hanzo/iam": ">=0.21.28",
     "@hanzo/logo": ">=1.0.26",
+    "@hanzo/studio": ">=0.1.0",
     "@hanzo/ui": ">=8.27.67",
     "@hanzo/usage": ">=0.1.18",
     "@hanzo/voice": ">=0.1.16",
@@ -73,6 +74,7 @@
     "@hanzo/gui": "8.3.5",
     "@hanzo/iam": "0.21.28",
     "@hanzo/logo": "1.0.26",
+    "@hanzo/studio": "0.1.0",
     "@hanzo/ui": "8.27.67",
     "@hanzo/usage": "0.1.18",
     "@hanzo/voice": "0.1.16",