@hanzo/rooms 0.1.99 → 0.1.101

package/dist/App.js

@@ -62,7 +62,7 @@ import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } fro
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import { AiProvider } from '@hanzo/ai/react';
 import { XStack, YStack } from '@hanzo/gui';
-import { Builder, HostProvider, PrefsProvider, path as written, route } from '@hanzo/build';
+import { Builder, HostProvider, PrefsProvider, route } from '@hanzo/build';
 import { nav as places } from '@hanzo/studio';
 import { useAi } from './lib/ai.js';
 import { Chat } from './Chat.js';
@@ -71,15 +71,15 @@ import { isPlans, leave, useDevHost } from './dev.js';
 import { Orgs } from './Orgs.js';
 import { useRooms } from './host.js';
 import { useKept } from './kept.js';
-import { Mark, Rail, spot, Toggle } from './Rail.js';
+import { Mark, raised, Rail, Toggle } from './Rail.js';
 import { Foot, Layer, Lift, RAISED, useDrawer } from './Drawer.js';
-import { empty, openThread, useOpen } from './open.js';
+import { empty, openThread, showSettings, useOpen } from './open.js';
 import { Paned } from './Shell.js';
 import { Palette } from './Palette.js';
 import { summons } from './seek.js';
 import { floor, pane } from './ground.js';
 import { pick } from './lib/session.js';
-import { app, go, place, studio, talk, TERMINALS } from './lib/host.js';
+import { app, go, place, settings, studio, talk, TERMINALS, visit } from './lib/host.js';
 import { Top } from './Top.js';
 import { FOOT, HEIGHT, TOP, useView } from './view.js';
 /** Studio, fetched the first time the reader stands in it. */
@@ -97,15 +97,13 @@ const typing = (e) => {
     const el = e.target;
     return !!el && (el.isContentEditable || el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT');
 };
-/** The builder's Settings, general section. */
-const SETTINGS = written({ kind: 'settings', section: 'general' });
 export function App({ bar } = {}) {
     return (_jsx(Orgs, { children: _jsx(Window, { bar: bar }) }));
 }
 /** The window itself, drawn once the organization is settled. */
 function Window({ bar }) {
     const drawer = useDrawer();
-    const { close: shut, depart } = drawer;
+    const { close: shut, depart, exit } = drawer;
     // On a phone the window stands in the visual viewport, so the keyboard never covers the composer (view.ts).
     const view = useView();
     const hold = drawer.window;
@@ -119,11 +117,12 @@ function Window({ bar }) {
     const [finding, setFinding] = useState(false);
     const found = useCallback(() => setFinding(false), []);
     const dev = useDevHost();
-    // The builder's moves put the drawer away, in its place in the history.
+    // The builder's moves put the drawer away, in its place in the history; one to
+    // a page outside the app (Settings) leaves it through the router.
     const host = useMemo(() => ({
         ...dev,
-        go: (to, how) => depart((replace) => dev.go(to, replace ? { ...how, replace } : how)),
-    }), [dev, depart]);
+        go: (to, how) => (place(app(to)) ? depart : exit)((replace) => dev.go(to, replace ? { ...how, replace } : how)),
+    }), [dev, depart, exit]);
     const { client } = useAi();
     const { router, path } = useRooms();
     const here = path ?? '/';
@@ -146,13 +145,7 @@ function Window({ bar }) {
     // 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;
-    const { thread, settings } = useOpen();
-    // A row of the account menu asks for Settings: the drawer goes away even when
-    // the address does not move (the reader was on that page already).
-    useEffect(() => {
-        if (settings)
-            shut();
-    }, [settings, shut]);
+    const { thread, settings: wanted } = useOpen();
     const plans = where !== null && isPlans(where);
     useEffect(() => {
         if (plans)
@@ -192,15 +185,26 @@ function Window({ bar }) {
         drop();
     }, [mode, here, drop]);
     // Where the reader was before a place that takes the sidebar (Library, Scheduled
-    // tasks, Customize, Settings): its Back returns there, Chat or Dev alike.
+    // tasks, Customize): its Back returns there, Chat or Dev alike.
     const away = useRef('');
-    const inPlace = mode === 'dev' && spot(where) !== null;
+    const inPlace = mode === 'dev' && raised(where) !== null;
     useEffect(() => {
         if (!inPlace)
             away.current = `${window.location.pathname}${window.location.search}`;
     }, [inPlace, here]);
-    /** A move of the app's own: the drawer away, the address in its place. */
-    const move = useCallback((address) => depart((replace) => go(address, replace)), [depart]);
+    /**
+     * A move: the drawer away, the address in its place. One of the app's moves
+     * the app; any other page of the site (Settings) is the router's, and leaves it.
+     */
+    const move = useCallback((address) => (place(address.split(/[?#]/)[0]) ? depart : exit)((replace) => visit(router, address, replace)), [depart, exit, router]);
+    // A pane asks for Settings — the account menu's rows, Chat's See usage: its
+    // page (lib/host `settings`), through the router, the drawer away.
+    useEffect(() => {
+        if (!wanted)
+            return;
+        showSettings(null);
+        move(settings(wanted));
+    }, [wanted, move]);
     // The app's keys.
     useEffect(() => {
         const key = (e) => {
@@ -214,7 +218,7 @@ function Window({ bar }) {
             const mod = e.metaKey || e.ctrlKey;
             if (mod && !e.shiftKey && !e.altKey && e.key === ',') {
                 e.preventDefault();
-                move(app(SETTINGS));
+                move(settings());
                 return;
             }
             if (!bar)

package/dist/Column.js

@@ -10,28 +10,29 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // content beside it is the panel, inset by the gutter.
 //
 // The bell is the org's run activity (@hanzo/build `useSessions`): the runs
-// that moved last, each one press from its page, and Notifications in Settings.
+// that moved last, each one press from its page.
 // The search opens the palette (Palette.tsx; ⌘K / Ctrl+K from anywhere).
 //
 // Dev's places are @hanzo/build's `own`: New run, Projects, Issues, Templates.
-// A place the rail holds (Library, Scheduled tasks, Customize) and Settings
-// each take the sidebar instead (Rail.tsx `spot`): Back, the place's name, and
-// its own rows (Settings' sections, Customize's tabs), never Dev's beside them.
+// A place the rail holds (Library, Scheduled tasks, Customize) takes the sidebar
+// instead (Rail.tsx `raised`): Back, the place's name, and its own rows
+// (Customize's tabs, the Library's kinds), never Dev's beside them. Settings is
+// the site's pages at /settings, with a column of their own.
 //
 // Its width is the edge's in the gutter to its right: dragged, keyed or
 // double-clicked back (@hanzo/build's `Grip`), kept per browser. Pulled in past
 // its floor it shuts (`onShut`), as the sidebar's toggle shuts it.
 import { useI18n } from '@hanzo/i18n/react';
 import { Text, XStack, YStack } from '@hanzo/gui';
-import { ArrowLeft, Bell, Search, Settings2, SquarePen } from 'lucide-react';
-import { DOTS, Gutter, library, NEW, own, path as written, sections, tabs, useScheduled, useSessions } from '@hanzo/build';
+import { ArrowLeft, Bell, Search, SquarePen } from 'lucide-react';
+import { DOTS, Gutter, library, NEW, own, tabs, useScheduled, useSessions } from '@hanzo/build';
 import { tidy } from './lib/title.js';
 import { DropdownMenu } from '@hanzo/ui';
 import { Sidebar, SidebarIconButton, SidebarItem, StatusDot } from '@hanzo/ui/chat';
 import { useId } from 'react';
 import { Made } from './Me.js';
 import { Recents } from './Recents.js';
-import { spot } from './Rail.js';
+import { raised } from './Rail.js';
 import { Setup } from './Setup.js';
 import { ago } from './recent.js';
 import { empty } from './open.js';
@@ -61,7 +62,7 @@ const ROW = { rounded: '$4', minH: 31, py: 0, px: '$2', $touchable: { minH: 44 }
 /** The run activity behind the bell: the runs that moved last, newest first. */
 const RECENT = 6;
 /** What a place that takes the sidebar is called at its head. */
-const TITLE = { library: 'Library', scheduled: 'Scheduled tasks', customize: 'Customize', settings: 'Settings' };
+const TITLE = { library: 'Library', scheduled: 'Scheduled tasks', customize: 'Customize' };
 /** A header mark: a 16px glyph in a 32px target, a thumb's 44 on a touch screen. */
 const HEAD = { width: 32, height: 32, rounded: '$3', $touchable: { width: 44, height: 44 } };
 function Activity({ host }) {
@@ -79,8 +80,6 @@ function Activity({ host }) {
                 onSelect: () => host.go(s.id),
             }))
             : [{ key: 'none', label: 'Nothing new', disabled: true, onSelect: () => { } }]),
-        { type: 'separator', key: 'line' },
-        { key: 'settings', label: 'Notification settings', icon: _jsx(Settings2, { size: 16, "aria-hidden": true }), onSelect: () => host.go(written({ kind: 'settings', section: 'notifications' })) },
     ];
     return (_jsx(DropdownMenu, { minWidth: 280, trigger: _jsx(XStack, { render: "button", "aria-label": t("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 }));
 }
@@ -90,19 +89,17 @@ export function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer
     const uid = useId();
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
     const dev = (p) => host.go(p);
-    const at = mode === 'dev' ? spot(host.path) : null;
+    const at = mode === 'dev' ? raised(host.path) : null;
     // Each place the rail holds lists its own rows: Library its kinds and Upload, Scheduled tasks its tasks and New task.
     const scheduled = useScheduled(host, dev, at === 'scheduled');
     const groups = places ??
-        (at === 'settings'
-            ? sections(host, dev)
-            : at === 'customize'
-                ? tabs(host, dev)
-                : at === 'library'
-                    ? library(host, dev)
-                    : at === 'scheduled'
-                        ? scheduled
-                        : own(host, dev));
+        (at === 'customize'
+            ? tabs(host, dev)
+            : at === 'library'
+                ? library(host, dev)
+                : at === 'scheduled'
+                    ? scheduled
+                    : own(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 = () => {

package/dist/Drawer.d.ts

@@ -9,6 +9,12 @@ export interface Drawer {
     close: () => void;
     /** Moves the app from the menu: the move replaces the menu's history entry, and the menu goes. */
     depart: (move: Move) => void;
+    /**
+     * Leaves the app from the menu for a page the host's router draws: the page
+     * takes the menu's history entry, and the menu goes. Nothing is popped, for
+     * the router moves the address after this returns.
+     */
+    exit: (move: Move) => void;
     /** The address moved under the menu, by a way that was not `depart`: the menu goes, and its entry stays behind the move. */
     drop: () => void;
     /** The window: everything in it but the menu is inert while the menu is out. */

package/dist/Drawer.js

@@ -31,7 +31,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // back to what opened it as it shuts; Escape closes it, unless a menu or dialog
 // it opened holds the focus; Back closes it, because opening it pushed an entry
 // of the same address that Back pops. A move made from inside it takes that
-// entry's place (`depart`), so the history holds the move and never the menu.
+// entry's place (`depart`), so the history holds the move and never the menu;
+// so does a page the host's router draws outside the app (`exit`: Settings),
+// whose address moves only after the press returns.
 // Its list's scroll stays its own (Recents' `overscrollBehavior`), and the pane,
 // never unmounted, keeps its own.
 import { useI18n } from '@hanzo/i18n/react';
@@ -112,6 +114,12 @@ export function useDrawer() {
             window.history.back();
         home();
     }, [home]);
+    const exit = useCallback((move) => {
+        const replace = marked.current;
+        marked.current = false;
+        move(replace);
+        home();
+    }, [home]);
     const drop = useCallback(() => {
         marked.current = false;
         home();
@@ -287,6 +295,7 @@ export function useDrawer() {
         open,
         close,
         depart,
+        exit,
         drop,
         window: useCallback((node) => {
             win.current = element(node);

package/dist/Me.js

@@ -9,8 +9,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // the person's place on the beta waitlist (the site's /beta/status); then
 // Help ›, the site's own pages and the keyboard shortcuts (⌘/ / Ctrl+/ from
 // anywhere); and Log out. Every row opens a real destination: Settings'
-// sections through `showSettings` (open.ts), which the app answers with the
-// builder's Settings (dev.tsx) and the shell with its own pane; the plans on the
+// pages through `showSettings` (open.ts), which the app answers with the
+// site's Settings at /settings (App.tsx) and the shell with its own pane; the plans on the
 // pay site (`leave`); the site's pages through `site()`, so hanzo.team names
 // hanzo.ai (help.ts).
 //
@@ -39,15 +39,13 @@ import { api } from './lib/api.js';
 import { createOrg, say } from './lib/org.js';
 import { list } from './lib/list.js';
 import { choose, org as current, orgs, pick, renew, scope, superAdmin } from './lib/session.js';
-import { ENTRY } from './lib/host.js';
+import { ENTRY, settings } from './lib/host.js';
 import { leave } from './dev.js';
 import { payUrl } from './lib/pay.js';
 import { asked, KEYS, legal, out, pages } from './help.js';
 import { showSettings } from './open.js';
 import { site, where } from './where.js';
 import { BAD } from './lib/mix.js';
-/** Where an organization's own settings live: a page of the site (`site()`), not of the app. */
-const ORG_SETTINGS = '/settings/organization';
 /** An organization this tab created, until the token carries it. */
 const MADE = 'hanzo:org:made';
 /** Each Help page's icon, by its key in help.ts. */
@@ -201,7 +199,7 @@ export function Me({ host, narrow = false, above = false, onOrg, }) {
                                 row.current = el instanceof HTMLElement ? el : null;
                             }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, ...{ title: who }, width: narrow ? 36 : '100%', minH: narrow ? 36 : 48, 
                             // A thumb's 44 on a touch screen.
-                            $touchable: narrow ? { width: 44, minH: 44 } : undefined, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 26 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), working ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: working })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsxs(DropdownMenuContent, { minW: 260, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": t("Account"), onCloseAutoFocus: back, children: [_jsxs(DropdownMenuSub, { open: account, onOpenChange: setAccount, children: [_jsxs(DropdownMenuSubTrigger, { minH: 48, gap: "$2.5", children: [_jsx(Face, { host: host, size: 28 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", fontWeight: "600", color: "$ink", numberOfLines: 1, children: who }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: host.person.email || working })] })] }), account ? (_jsxs(DropdownMenuSubContent, { minW: 260, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [_jsx(Meter, { read: read, onPlans: () => leave('here'), onBilling: () => (setOpen(false), showSettings('billing')) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: t("Organizations") }), all.map((o) => (_jsx(DropdownMenuItem, { onSelect: () => o.name !== current && onOrg(o.name), children: _jsx(Line, { icon: _jsx(Mark, { org: o }), sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), trail: o.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: o.display }) }, o.name))), _jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Plus, { size: 16, "aria-hidden": true }), children: t("Create organization") }) }), _jsx(DropdownMenuItem, { onSelect: () => out(site(ORG_SETTINGS)), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), children: t("Organization settings") }) }), where().team ? null : here && !here.personal ? (_jsx(DropdownMenuItem, { onSelect: () => out(`${ENTRY}&org=${encodeURIComponent(here.name)}`), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), trail: _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }), children: t("Open in Hanzo Team") }) })) : (_jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), children: t("Create a team") }) })), superAdmin() ? (_jsx(DropdownMenuItem, { onSelect: choose, children: _jsx(Line, { icon: _jsx(Building2, { size: 16, "aria-hidden": true }), children: t("All organizations") }) })) : null] })) : null] }), team ? (_jsx(DropdownMenuItem, { "data-slot": "me-team", onSelect: () => team.name !== current && onOrg(team.name), children: _jsx(Line, { icon: _jsx(Mark, { org: team }), trail: team.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: `${team.display} · ${teamPlan || 'No plan'}` }) })) : null, personal ? (_jsx(DropdownMenuItem, { "data-slot": "me-personal", onSelect: () => personal.name !== current && onOrg(personal.name), actionsVisibility: "always", actions: ownPlan ? undefined : (_jsx(Button, { size: "xs", variant: "outline", onPress: getPro, children: t("Get Pro") })), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), trail: personal.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: `Personal · ${ownPlan || 'No plan'}` }) })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => leave('here'), children: _jsx(Line, { icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), children: upgrade(read.value?.label?.name) }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Palette, { size: 16, "aria-hidden": true }), children: t("Personalization") }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('account'), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), children: t("Profile") }) }), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+, Meta+,", onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘,' : 'Ctrl+,' }), children: t("Settings") }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site('/beta/status')), children: _jsx(Line, { icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), children: t("Beta") }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { open: help, onOpenChange: setHelp, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(LifeBuoy, { size: 16, "aria-hidden": true }), children: t("Help") }) }), help ? (_jsxs(DropdownMenuSubContent, { minW: 240, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [pages().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], trail: p.key === 'help' ? _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }) : null, children: p.label }) }, p.key))), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+/ Meta+/", onSelect: () => setKeys(true), children: _jsx(Line, { icon: _jsx(Keyboard, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘/' : 'Ctrl+/' }), children: t("Keyboard shortcuts") }) }), _jsx(DropdownMenuSeparator, {}), legal().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], children: p.label }) }, p.key)))] })) : null] }), host.signOut ? (_jsx(DropdownMenuItem, { onSelect: () => host.signOut?.(), children: _jsx(Line, { icon: _jsx(LogOut, { size: 16, "aria-hidden": true }), children: t("Log out") }) })) : null] })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), _jsx(Shortcuts, { open: keys, onOpenChange: setKeys, apple: apple })] }));
+                            $touchable: narrow ? { width: 44, minH: 44 } : undefined, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 26 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), working ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: working })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsxs(DropdownMenuContent, { minW: 260, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": t("Account"), onCloseAutoFocus: back, children: [_jsxs(DropdownMenuSub, { open: account, onOpenChange: setAccount, children: [_jsxs(DropdownMenuSubTrigger, { minH: 48, gap: "$2.5", children: [_jsx(Face, { host: host, size: 28 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", fontWeight: "600", color: "$ink", numberOfLines: 1, children: who }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: host.person.email || working })] })] }), account ? (_jsxs(DropdownMenuSubContent, { minW: 260, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [_jsx(Meter, { read: read, onPlans: () => leave('here'), onBilling: () => (setOpen(false), showSettings('billing')) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: t("Organizations") }), all.map((o) => (_jsx(DropdownMenuItem, { onSelect: () => o.name !== current && onOrg(o.name), children: _jsx(Line, { icon: _jsx(Mark, { org: o }), sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), trail: o.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: o.display }) }, o.name))), _jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Plus, { size: 16, "aria-hidden": true }), children: t("Create organization") }) }), _jsx(DropdownMenuItem, { onSelect: () => out(site(settings('organization'))), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), children: t("Organization settings") }) }), where().team ? null : here && !here.personal ? (_jsx(DropdownMenuItem, { onSelect: () => out(`${ENTRY}&org=${encodeURIComponent(here.name)}`), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), trail: _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }), children: t("Open in Hanzo Team") }) })) : (_jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), children: t("Create a team") }) })), superAdmin() ? (_jsx(DropdownMenuItem, { onSelect: choose, children: _jsx(Line, { icon: _jsx(Building2, { size: 16, "aria-hidden": true }), children: t("All organizations") }) })) : null] })) : null] }), team ? (_jsx(DropdownMenuItem, { "data-slot": "me-team", onSelect: () => team.name !== current && onOrg(team.name), children: _jsx(Line, { icon: _jsx(Mark, { org: team }), trail: team.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: `${team.display} · ${teamPlan || 'No plan'}` }) })) : null, personal ? (_jsx(DropdownMenuItem, { "data-slot": "me-personal", onSelect: () => personal.name !== current && onOrg(personal.name), actionsVisibility: "always", actions: ownPlan ? undefined : (_jsx(Button, { size: "xs", variant: "outline", onPress: getPro, children: t("Get Pro") })), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), trail: personal.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: `Personal · ${ownPlan || 'No plan'}` }) })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => leave('here'), children: _jsx(Line, { icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), children: upgrade(read.value?.label?.name) }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Palette, { size: 16, "aria-hidden": true }), children: t("Personalization") }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('account'), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), children: t("Profile") }) }), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+, Meta+,", onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘,' : 'Ctrl+,' }), children: t("Settings") }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site('/beta/status')), children: _jsx(Line, { icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), children: t("Beta") }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { open: help, onOpenChange: setHelp, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(LifeBuoy, { size: 16, "aria-hidden": true }), children: t("Help") }) }), help ? (_jsxs(DropdownMenuSubContent, { minW: 240, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [pages().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], trail: p.key === 'help' ? _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }) : null, children: p.label }) }, p.key))), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+/ Meta+/", onSelect: () => setKeys(true), children: _jsx(Line, { icon: _jsx(Keyboard, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘/' : 'Ctrl+/' }), children: t("Keyboard shortcuts") }) }), _jsx(DropdownMenuSeparator, {}), legal().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], children: p.label }) }, p.key)))] })) : null] }), host.signOut ? (_jsx(DropdownMenuItem, { onSelect: () => host.signOut?.(), children: _jsx(Line, { icon: _jsx(LogOut, { size: 16, "aria-hidden": true }), children: t("Log out") }) })) : null] })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), _jsx(Shortcuts, { open: keys, onOpenChange: setKeys, apple: apple })] }));
 }
 /** The app's keys (help.ts `KEYS`), one row each, spelled for this platform. */
 function Shortcuts({ open, onOpenChange, apple }) {

package/dist/OrgSwitcher.js

@@ -10,6 +10,7 @@ import { iam } from './lib/api.js';
 import { pick } from './lib/session.js';
 import { Text, View, XStack, YStack } from '@hanzo/gui';
 import { site } from './where.js';
+import { settings } from './lib/host.js';
 /** design's smallest rung (`--text-floor`, 10px), below gui's `$1`; gui's font size takes a rung or a number. */
 const FLOOR = 10;
 /** A row at the foot of the menu that leaves for another page: a ghost Button, label to the left. */
@@ -95,7 +96,7 @@ export function OrgSwitcherDropdown({ open, onClose, activeOrgId, onSelect, alig
                         onSelect(o.id);
                         onClose();
                     }, width: "100%", justify: "space-between", px: 10, py: 6, bg: isSelected ? '$hover' : 'transparent', children: [_jsxs(XStack, { items: "center", gap: 10, minW: 0, shrink: 1, children: [_jsx(Text, { width: 24, height: 24, rounded: 6, bg: "$raised", display: "flex", items: "center", justify: "center", fontSize: "$2", fontWeight: "700", color: "$ink", shrink: 0, overflow: "hidden", children: o.logo ? (_jsx(View, { render: _jsx("img", { src: o.logo, alt: "" }), width: "100%", height: "100%", objectFit: "cover" })) : (o.displayName.toLowerCase().includes('hanzo') || o.name.toLowerCase().includes('hanzo')) ? (_jsx(HanzoMark, { size: 14 })) : (o.name.slice(0, 3).toUpperCase()) }), _jsxs(YStack, { minW: 0, shrink: 1, items: "flex-start", children: [_jsx(Text, { fontSize: "$2", fontWeight: isSelected ? '600' : '500', color: "$ink", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: o.displayName }), o.role ? (_jsx(Text, { fontSize: FLOOR, color: "$faint", children: o.role })) : null] })] }), isSelected ? _jsx(Check, { size: 14, color: "currentColor" }) : null] }, o.id));
-            }), _jsx(View, { height: 1, bg: "$borderColor", my: 4 }), _jsx(Button, { asChild: true, ...LINK, children: _jsxs("a", { href: iam(), target: "_blank", rel: "noreferrer", children: [_jsx(Plus, { size: 14 }), "Create Organization"] }) }), _jsx(Button, { asChild: true, ...LINK, children: _jsxs("a", { href: site("/settings/organization"), children: [_jsx(Settings, { size: 14 }), "Organization settings"] }) })] }));
+            }), _jsx(View, { height: 1, bg: "$borderColor", my: 4 }), _jsx(Button, { asChild: true, ...LINK, children: _jsxs("a", { href: iam(), target: "_blank", rel: "noreferrer", children: [_jsx(Plus, { size: 14 }), "Create Organization"] }) }), _jsx(Button, { asChild: true, ...LINK, children: _jsxs("a", { href: site(settings("organization")), children: [_jsx(Settings, { size: 14 }), "Organization settings"] }) })] }));
 }
 /**
  * THE WORKSPACE YOU ARE STANDING IN, and the way to another one.

package/dist/Palette.js

@@ -5,14 +5,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 //
 // An empty field lists Recent (the reader's chats and Dev tasks, newest first,
 // each with its kind's icon), Actions, and Go to: the products, the places of
-// the app and the apps in beta the reader may open. A query searches all of it, deeper places too (Settings' sections,
+// the app and the apps in beta the reader may open. A query searches all of it, deeper places too (Settings' pages,
 // Customize's tabs, the Library's kinds, Studio's places, Help), and the
 // reader's chats, Dev tasks, projects, agents, skills and connectors by name;
 // each group keeps its best five and the group with the best answer leads
 // (seek.ts `find`). A row opens where it lives; an action runs.
 //
 // GO TO IS DERIVED, never listed here: the places are @hanzo/build's own
-// registries (`nav` for Dev's places, `sections` for Settings, `tabs` for
+// registries (`nav` for Dev's places, `sections` for Settings — the sections
+// with a page at /settings (lib/host.ts `paged`), each opened there — `tabs` for
 // Customize, `library` for the Library's kinds), @hanzo/studio's `nav`, and
 // help.ts's pages, lib/betas.ts's granted apps: the same lists the sidebars and
 // menus draw. A page added to
@@ -40,7 +41,7 @@ import { empty, openThread, withAgents } from './open.js';
 import { useThreadList } from './thread.js';
 import { useSignOut } from './lib/signout.js';
 import { choose } from './lib/session.js';
-import { app, studio, talk, TERMINALS, WORKSPACE } from './lib/host.js';
+import { app, paged, settings, studio, talk, TERMINALS, WORKSPACE } from './lib/host.js';
 import { BETAS } from './lib/betas.js';
 import { useBetas } from './Betas.js';
 import { tidy } from './lib/title.js';
@@ -48,15 +49,11 @@ import { KEYS, legal, out, pages } from './help.js';
 import { site } from './where.js';
 import { find } from './seek.js';
 const ICON = { size: 16, 'aria-hidden': true };
-/** The builder's Settings, its first section. */
-const SETTINGS = written({ kind: 'settings', section: 'general' });
 const SKILLS = written({ kind: 'customize', tab: 'skills' });
 const CONNECTORS = written({ kind: 'customize', tab: 'connectors' });
-/** The words a Settings section is also asked for by: the account menu's names for two of them, and the obvious ones. */
+/** The words a Settings page is also asked for by: the account menu's names for General, and the obvious ones. */
 const ALSO = {
-    general: ['personalization', 'appearance', 'theme'],
-    account: ['profile'],
-    privacy: ['security'],
+    general: ['personalization', 'appearance', 'theme', 'profile', 'account'],
     billing: ['plans', 'subscription'],
     members: ['organization', 'team'],
 };
@@ -79,7 +76,7 @@ export function places(host, go) {
         { id: 'tabs', label: 'Tabs', icon: _jsx(SquareTerminal, { ...ICON }), run: () => go(TERMINALS) },
         ...(host ? [{ id: 'team', label: 'Team', icon: _jsx(Users, { ...ICON }), keywords: ['workspace'], run: () => out(WORKSPACE) }] : []),
         ...(host ? rows(nav(host, builder).map((g) => ({ links: g.links.filter((l) => l.id !== NEW) })), '', 'dev') : []),
-        { id: 'settings', label: 'Settings', icon: _jsx(Settings, { ...ICON }), shortcut: ['Mod', ','], run: () => go('/settings') },
+        { id: 'settings', label: 'Settings', icon: _jsx(Settings, { ...ICON }), shortcut: ['Mod', ','], run: () => go(settings()) },
         // The site's own pages, outside the app: the browser loads them.
         { id: 'referral', label: 'Referral', icon: _jsx(Gift, { ...ICON }), keywords: ['invite', 'share'], run: () => window.location.assign(site('/referral')) },
         { id: 'beta', label: 'Beta status', icon: _jsx(FlaskConical, { ...ICON }), keywords: ['waitlist'], run: () => window.location.assign(site('/beta/status')) },
@@ -90,7 +87,7 @@ export function places(host, go) {
     const deep = [
         ...(host
             ? [
-                ...rows(sections(host, builder), 'Settings', 'settings'),
+                ...rows(sections(host, builder).map((g) => ({ links: g.links.filter((l) => paged(l.id)) })), 'Settings', 'settings'),
                 ...rows(tabs(host, builder), 'Customize', 'customize'),
                 ...rows(library(host, builder).slice(1), 'Library', 'library'),
                 ...rows(made(host, (p) => go(studio(p))), 'Studio', 'studio').filter((a) => a.id !== `studio-${NEW}`),
@@ -100,8 +97,7 @@ export function places(host, go) {
             .filter((p) => p.key !== 'help')
             .map((p) => ({ id: `help-${p.key}`, label: p.label, where: 'Help', keywords: ['Help'], run: () => out(p.href) })),
     ];
-    // A place two registries hold (Machines is Dev's and a Settings section) is listed once, as Dev's.
-    return { top, deep: deep.filter((a) => !top.some((t) => t.id === a.id.replace(/^settings-/, 'dev-'))) };
+    return { top, deep };
 }
 /** The composer's model menu, opened as a press would: a page without a composer opens New chat's. */
 function tune(go) {

package/dist/Rail.d.ts

@@ -10,11 +10,7 @@ export declare const RAISED: {
     readonly customize: '-/customize';
 };
 export type Raised = keyof typeof RAISED;
-/** A place that takes the sidebar: one of the rail's, or Settings (the account menu's). */
-export type Spot = Raised | 'settings';
-/** The place a builder address stands on, if it is one that takes the sidebar. */
-export declare const spot: (at: string | null) => Spot | null;
-/** Which of them a builder address stands on, if any: an agent's page is Customize's, an automation Scheduled tasks'. */
+/** Which of them a builder address stands on, if any, and so takes the sidebar: an agent's page is Customize's, an automation Scheduled tasks'. */
 export declare function raised(at: string | null): Raised | null;
 /** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
 export declare function Mark({ label, on, onPress, children, ...rest }: {

package/dist/Rail.js

@@ -15,8 +15,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // conversations, Dev its own places (@hanzo/build `own`: New run, Projects,
 // Issues, Templates) and its runs, Studio its own; Library, Scheduled tasks and
 // Customize (@hanzo/build's Artifacts, Automations and Customize) each their
-// own, and Settings its sections (Column.tsx). Nothing on the rail is listed
-// inside Dev: one level of the app a place, each lit while the reader is on it.
+// own (Column.tsx); Settings is the site's pages at /settings, beside the app
+// (lib/host.ts `settings`). Nothing on the rail is listed inside Dev: one level
+// of the app a place, each lit while the reader is on it.
 //
 // It stands on the frame's floor, never cut as a pane (ground.ts): the rail and
 // the sidebar beside it are the window, and the content is the panel inset in
@@ -47,9 +48,7 @@ export const RAIL = 48;
 const MARK = 36;
 /** The places the rail holds beside the products, by the builder address each opens. */
 export const RAISED = { library: '-/artifacts', scheduled: '-/automations', customize: '-/customize' };
-/** The place a builder address stands on, if it is one that takes the sidebar. */
-export const spot = (at) => (at !== null && route(at).kind === 'settings' ? 'settings' : raised(at));
-/** Which of them a builder address stands on, if any: an agent's page is Customize's, an automation Scheduled tasks'. */
+/** Which of them a builder address stands on, if any, and so takes the sidebar: an agent's page is Customize's, an automation Scheduled tasks'. */
 export function raised(at) {
     if (at === null)
         return null;
@@ -85,7 +84,7 @@ export function Toggle({ open, onPress, label }) {
 }
 export function Rail({ host, mode, at, open, toggle, rows = false, onChat, onDev, onStudio, onTabs, go, onOrg, }) {
     const { t } = useI18n();
-    const here = mode === 'dev' ? spot(at) : null;
+    const here = mode === 'dev' ? raised(at) : null;
     const to = (p) => () => go(app(p));
     // The products on hosts of their own, behind More; on a phone the raised places lead it.
     // Studio offers no Team, so on a laptop it draws no More.

package/dist/dev.js

@@ -9,16 +9,18 @@
 //
 // THE ADDRESS IS A PATH. Dev is /dev, and every place the builder shows is a
 // path under it in the builder's real-path grammar (lib/host.ts `app`, `place`;
-// @hanzo/build/route `href`, `parse`): a run, a screen, a Settings section, a
-// Customize tab, the plans and a project all survive a reload, and Back steps
-// through them. The host hands the rooms the path (`<Rooms path>`); a move is a
-// native history entry, which the Next router folds into `usePathname`, so
-// reading the address and moving it are one path.
+// @hanzo/build/route `href`, `parse`): a run, a screen, a Customize tab, the
+// plans and a project all survive a reload, and Back steps through them. The
+// host hands the rooms the path (`<Rooms path>`); a move is a native history
+// entry, which the Next router folds into `usePathname`, so reading the address
+// and moving it are one path.
 //
-// A PANE THAT ASKS FOR SETTINGS (`showSettings`, open.ts) is answered here: the
-// rooms' shell draws its own Settings pane, and the app has none, so Chat's
-// "See usage" opens the builder's Usage — the page the account menu's Usage
-// opens — rather than nothing.
+// SETTINGS IS THE SITE'S, never Dev's: one tree at /settings, the host's own
+// pages (lib/host.ts `settings`). A builder section the builder moves to
+// (`go`) and a link it opens (`open`) reach that page through the host's router
+// (`visit`); a pane that asks for Settings (`showSettings`, open.ts) is App's to
+// answer, where the phone's menu is. The rooms' shell draws its own Settings
+// pane; the app has none.
 //
 // THE PLANS ARE THE PAY SITE'S. Every way the app reaches the plans — the
 // account menu's View all plans and its plan's Upgrade, Billing's Adjust plan,
@@ -27,7 +29,7 @@
 // coming back once paid. A typed or reloaded plans address leaves the same way
 // (App.tsx). A page load, at once, not a move inside the app: the pay site is
 // where a plan is bought.
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useLook, useRooms } from './host.js';
 import { useIam } from '@hanzo/iam/react';
 import { useSignOut } from './lib/signout.js';
@@ -36,15 +38,14 @@ import { bearer, named, org, orgs, pick } from './lib/session.js';
 import { enter } from './lib/destination.js';
 import { api } from './lib/api.js';
 import { CAST } from './agents.js';
-import { app, go, place } from './lib/host.js';
+import { app, place, settings, visit } from './lib/host.js';
 import { link } from './lib/tags.js';
 import { payUrl } from './lib/pay.js';
-import { showSettings, useOpen } from './open.js';
 /** Where the builder links out: every one of them an address of this site. */
 const LINKS = {
     github: app('-/sync'),
     customize: app('-/customize'),
-    settings: '/settings',
+    settings: settings(),
     home: '/',
 };
 /** The builder's address for the plans. */
@@ -79,24 +80,6 @@ export function useDevHost() {
     const { router, path: pathname } = useRooms();
     const here = path(route(at(pathname)));
     const look = useLook();
-    const { settings } = useOpen();
-    // Settings is top-level /settings; organization settings are at /settings/organization.
-    useEffect(() => {
-        if (!settings)
-            return;
-        showSettings(null);
-        const s = settings.toLowerCase();
-        if (s.includes('member'))
-            router.push('/settings/organization/members');
-        else if (s.includes('billing'))
-            router.push('/settings/organization/billing');
-        else if (s.includes('usage'))
-            router.push('/settings/organization/usage');
-        else if (s.includes('org'))
-            router.push('/settings/organization');
-        else
-            router.push('/settings');
-    }, [settings, router]);
     // The token's claims change only when the token does: a sign-in, a refresh.
     const memberships = useMemo(() => orgs(), [accessToken]); // eslint-disable-line react-hooks/exhaustive-deps
     const scoped = useMemo(() => org(), [accessToken]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -124,7 +107,7 @@ export function useDevHost() {
         person: { name, email, avatar },
         admin: administers(bearer(), scoped),
         path: here,
-        go: (to, how) => (isPlans(to) ? leave('here') : go(app(to), how?.replace)),
+        go: (to, how) => (isPlans(to) ? leave('here') : visit(router, app(to), how?.replace)),
         links: LINKS,
         // The sidebar lists Settings' sections and Customize's tabs (Column.tsx), and Customize › Agents offers the cast.
         sections: true,
@@ -146,10 +129,8 @@ export function useDevHost() {
             const to = `${url.pathname}${url.search}${url.hash}`;
             if (url.origin !== window.location.origin)
                 window.location.assign(link(url.href));
-            else if (place(url.pathname))
-                go(to);
             else
-                router.push(to);
+                visit(router, to);
         },
         signIn: () => enter(),
         signOut: () => void logout(),

package/dist/lib/home.js

@@ -12,6 +12,7 @@
  * two is how a card comes to say "0 projects" about a question nobody asked.
  */
 import { site } from '../where.js';
+import { settings } from './host.js';
 /**
  * Where a teammate is invited.
  *
@@ -34,7 +35,7 @@ import { site } from '../where.js';
  * other page of this app is, and the three doors that offer it (the empty
  * room's tile, the Create menu, the sidebar's row) all read this one line.
  */
-export const invite = () => site('/settings/organization/members');
+export const invite = () => site(settings('members'));
 /** The org's projects, newest first. */
 export async function projects(client, signal) {
     const rows = await client.http.json({ path: '/v1/projects', signal });

package/dist/lib/host.d.ts

@@ -39,10 +39,12 @@ export declare const TABS = "https://tabs.hanzo.ai";
  * read by `href`/`parse` (@hanzo/build/route): /dev/run/<id>, /dev/projects,
  * /dev/projects/<org>/<repo> a repository, /dev/projects/<slug> a deployed
  * site, /dev/issues, /dev/artifacts, /dev/templates, /dev/automations[/<id>],
- * /dev/machines, /dev/environments, /dev/customize[/<tab>],
- * /dev/settings[/<section>], /dev/plans. The export holds one page per root,
- * /chat and /dev, and the edge serves it for every path under it (hanzo.ai's
- * lib/edge.ts `APP`), so every address reloads.
+ * /dev/machines, /dev/environments, /dev/customize[/<tab>], /dev/plans. The
+ * export holds one page per root, /chat and /dev, and the edge serves it for
+ * every path under it (hanzo.ai's lib/edge.ts `APP`), so every address reloads.
+ *
+ * Settings is none of them: it is the host's own pages, one tree at /settings
+ * (`settings`), and no builder section is written under /dev.
  */
 export declare const CHAT = "/chat";
 export declare const DEV = "/dev";
@@ -60,8 +62,25 @@ export declare const TERMINALS = "/tabs";
 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. */
-export declare const app: (at: string) => string;
+/**
+ * Settings, and every page under it: the person's and the organization's, the
+ * host's own pages beside the app (hanzo.ai's app/(app)/settings), served
+ * wherever the app is.
+ */
+export declare const SETTINGS = "/settings";
+/** Whether a section of Settings (a builder section, or what `showSettings` asks for) has a page of its own. */
+export declare const paged: (section: string) => boolean;
+/** The Settings page a section names; one with no page of its own opens General, /settings. */
+export declare const settings: (section?: string | null) => string;
+/**
+ * The app's address for a builder address (`route` in @hanzo/build): Dev's
+ * path, '' New at /dev, and what is not an address New too. A section of the
+ * builder's Settings is the Settings page that answers for it (`settings`),
+ * never a path under /dev. Machines and Environments, which the builder files
+ * under Settings and writes as places of their own (/machines, /environments),
+ * stay Dev's.
+ */
+export declare function app(at: string): string;
 /** A place in the app: Chat on a conversation or none, or Dev at a builder address. */
 export type Place = {
     mode: 'chat';
@@ -95,6 +114,17 @@ export declare const dev: (ref?: string | null) => string;
  * history entry into `usePathname`, so the app follows the path it reads.
  */
 export declare function go(address: string, replace?: boolean): void;
+/** The host's router, as far as moving to a page goes (`useRooms().router`). */
+interface Router {
+    push(href: string): void;
+    replace(href: string): void;
+}
+/**
+ * Move to an address of this site: one of the app's (`place`) by `go`, which
+ * the app follows; any other page — Settings — through the host's router, which
+ * draws that page. A history entry, or in place of this one.
+ */
+export declare function visit(router: Router, address: string, replace?: boolean): void;
 /** Keep the mode the reader is in, for `resume`. */
 export declare function remember(mode: Place['mode']): void;
 /** Where `/` takes a member: the mode they were last in, Chat when none is kept. */
@@ -162,3 +192,4 @@ export declare const visits: (hostname: string) => boolean;
  * cloud.yaml).
  */
 export declare const answers: (hostname: string) => boolean;
+export {};

package/dist/lib/host.js

@@ -42,10 +42,12 @@ export const TABS = 'https://tabs.hanzo.ai';
  * read by `href`/`parse` (@hanzo/build/route): /dev/run/<id>, /dev/projects,
  * /dev/projects/<org>/<repo> a repository, /dev/projects/<slug> a deployed
  * site, /dev/issues, /dev/artifacts, /dev/templates, /dev/automations[/<id>],
- * /dev/machines, /dev/environments, /dev/customize[/<tab>],
- * /dev/settings[/<section>], /dev/plans. The export holds one page per root,
- * /chat and /dev, and the edge serves it for every path under it (hanzo.ai's
- * lib/edge.ts `APP`), so every address reloads.
+ * /dev/machines, /dev/environments, /dev/customize[/<tab>], /dev/plans. The
+ * export holds one page per root, /chat and /dev, and the edge serves it for
+ * every path under it (hanzo.ai's lib/edge.ts `APP`), so every address reloads.
+ *
+ * Settings is none of them: it is the host's own pages, one tree at /settings
+ * (`settings`), and no builder section is written under /dev.
  */
 export const CHAT = '/chat';
 export const DEV = '/dev';
@@ -63,8 +65,40 @@ export const TERMINALS = '/tabs';
 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. */
-export const app = (at) => DEV + href(route(at));
+/**
+ * Settings, and every page under it: the person's and the organization's, the
+ * host's own pages beside the app (hanzo.ai's app/(app)/settings), served
+ * wherever the app is.
+ */
+export const SETTINGS = '/settings';
+/** The organization's settings. */
+const ORGANIZATION = `${SETTINGS}/organization`;
+/** Settings' pages, by the name a surface asks for each: General at /settings, the organization's under it. */
+const PAGES = {
+    general: SETTINGS,
+    organization: ORGANIZATION,
+    members: `${ORGANIZATION}/members`,
+    billing: `${ORGANIZATION}/billing`,
+    usage: `${ORGANIZATION}/usage`,
+    keys: `${ORGANIZATION}/keys`,
+};
+/** Whether a section of Settings (a builder section, or what `showSettings` asks for) has a page of its own. */
+export const paged = (section) => Object.hasOwn(PAGES, section);
+/** The Settings page a section names; one with no page of its own opens General, /settings. */
+export const settings = (section) => (section && paged(section) ? PAGES[section] : SETTINGS);
+/**
+ * The app's address for a builder address (`route` in @hanzo/build): Dev's
+ * path, '' New at /dev, and what is not an address New too. A section of the
+ * builder's Settings is the Settings page that answers for it (`settings`),
+ * never a path under /dev. Machines and Environments, which the builder files
+ * under Settings and writes as places of their own (/machines, /environments),
+ * stay Dev's.
+ */
+export function app(at) {
+    const r = route(at);
+    const to = href(r);
+    return r.kind === 'settings' && (to === SETTINGS || to.startsWith(`${SETTINGS}/`)) ? settings(r.section) : DEV + to;
+}
 /** /chat/shared is a page of its own, where a chat shared by link is read (lib/share.ts). */
 const SHARED = 'shared';
 /** The place a path names, or null when it names none of the app's. */
@@ -137,6 +171,19 @@ export function go(address, replace = false) {
     else
         window.history.pushState(null, '', address);
 }
+/**
+ * Move to an address of this site: one of the app's (`place`) by `go`, which
+ * the app follows; any other page — Settings — through the host's router, which
+ * draws that page. A history entry, or in place of this one.
+ */
+export function visit(router, address, replace = false) {
+    if (place(address.split(/[?#]/)[0]))
+        go(address, replace);
+    else if (replace)
+        router.replace(address);
+    else
+        router.push(address);
+}
 /** Where this browser keeps the mode its reader was last in. */
 const MODE = 'hanzo.app.mode';
 /** Keep the mode the reader is in, for `resume`. */
@@ -160,8 +207,6 @@ export function resume() {
 }
 /** The routes under app/(app) the apex keeps: the app — /chat, a chat shared by link, and /dev. */
 const KEPT = new Set(['/chat', '/chat/shared', '/dev']);
-/** Settings, and every page under it: the person's and the organization's, served wherever the app is. */
-const SETTINGS = '/settings';
 /**
  * The workspace's rooms: every route under app/(app) the apex does not keep.
  *

package/package.json

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