@hanzo/build 0.2.54 → 0.2.55

package/lib/desk.js

@@ -67,7 +67,9 @@ export function Desk({ id, repo, branch, base, environment, mode, pr, title, pro
             render: () => (_jsxs(YStack, { gap: "$2", children: [_jsx(Environment, { repo: name, busy: live && mode === 'setup' }), _jsx(SizableText, { size: "$2", color: "$ink", pt: "$4", children: "This run" }), _jsx(Fact, { label: "Run", value: id }), _jsx(Fact, { label: "Repository", value: name || '—' }), _jsx(Fact, { label: "Branch", value: branch || '—' }), _jsx(Fact, { label: "Base", value: base || '—' }), _jsx(Fact, { label: "Runs on", value: environment || 'sandbox' }), _jsx(Fact, { label: "Sandbox", value: sandbox || '—' }), _jsx(Fact, { label: "Mode", value: mode || 'build' })] })),
         },
     ];
-    return (_jsx(Panel, { side: side, kinds: kinds, sheet: sheet, onHide: onHide, label: "Run details", bar: sandbox ? _jsx(Held, { box: box, live: live }) : null, menu: _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Run actions", p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: 'Details', icon: _jsx(Info, { size: 16 }), onSelect: environ }] }) }));
+    return (_jsx(Panel, { side: side, kinds: kinds, sheet: sheet, onHide: onHide, label: "Run details", 
+        // An empty tab offers what this run made: its site and its pull request.
+        suggested: [...(site ? [{ title: name || site, url: site }] : []), ...(pr.href ? [{ title: `Pull request ${pr.label}`, url: pr.href }] : [])], bar: sandbox ? _jsx(Held, { box: box, live: live }) : null, menu: _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", "aria-label": "Run actions", p: "$1.5", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(MoreHorizontal, { size: 16 }) }), items: [...menu, { key: 'details', label: 'Details', icon: _jsx(Info, { size: 16 }), onSelect: environ }] }) }));
 }
 /**
  * The run's sandbox as it stands, and what moves it. It is read while the pane is

package/lib/host.d.ts

@@ -7,7 +7,7 @@
  * session, a router and a rail). Everything that differs between them is here,
  * as values, so no host forks the builder and the builder imports no host.
  */
-import { type ReactNode } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 import type { Target } from './api/call.ts';
 import type { Theme } from './api/pref.ts';
 export interface Person {
@@ -16,6 +16,46 @@ export interface Person {
     /** An https image, or '' for the initial. */
     avatar: string;
 }
+/**
+ * A page tab's address, drawn by the host rather than in a frame: what the
+ * window can show of any site, where a browser page can frame only the sites
+ * that allow it. `onGo` is a move the page made itself (a link followed), and
+ * `onTitle` the title it gave itself.
+ */
+export type Browse = ComponentType<{
+    url: string;
+    title: string;
+    onGo: (url: string) => void;
+    onTitle?: (title: string) => void;
+}>;
+/** A page as the host's browser is asked about it: the tab, and what it shows. */
+export interface Shown {
+    id: string;
+    url: string;
+    title: string;
+}
+/**
+ * What the host's browser can do to the page a tab shows, each the row of the
+ * same name in the tab's menu. A host draws only the rows it supplies, so the
+ * menu offers nothing the window cannot do; a browser page supplies none and
+ * draws what a page itself can (panel.tsx).
+ */
+export interface Browser {
+    find?: (page: Shown) => void;
+    print?: (page: Shown) => void;
+    /** Zoom the page to `percent` (100 is its own size). */
+    zoom?: (page: Shown, percent: number) => void;
+    devices?: (page: Shown) => void;
+    /** The page's pixels, as an image. */
+    capture?: (page: Shown) => Promise<Blob>;
+    /** What the reader has selected in the page. */
+    selection?: (page: Shown) => Promise<string>;
+    passwords?: () => void;
+    downloads?: () => void;
+    history?: () => void;
+    clear?: () => void;
+    settings?: () => void;
+}
 export interface Host {
     /** The product's name, drawn at the top left: `Hanzo Build` on hanzo.build, `Hanzo` on hanzo.ai. */
     name: string;
@@ -60,11 +100,19 @@ export interface Host {
     open: (href: string) => void;
     signIn?: () => void;
     signOut?: () => void;
+    /** A page tab's remote address, shown by the host (Hanzo Desktop: a native webview). Absent, a browser frames what it may. */
+    browse?: Browse;
+    /** What the host's browser does to a page, row by row in the tab's menu. */
+    browser?: Browser;
 }
 export declare function HostProvider({ host, children }: {
     host: Host;
     children: ReactNode;
 }): import("react").JSX.Element;
 export declare function useHost(): Host;
+/** The host's way of showing a page, where one is mounted and has one. The side panel is drawn without a host too (hanzo.team's rooms). */
+export declare function useBrowse(): Browse | null;
+/** The host's browser, where one is mounted and has one. */
+export declare function useBrowser(): Browser | null;
 /** The call target for this host — stable while the host's api, token reader and org are. */
 export declare function useTarget(): Target;

package/lib/host.js

@@ -19,6 +19,14 @@ export function useHost() {
         throw new Error('The builder was rendered without a host');
     return h;
 }
+/** The host's way of showing a page, where one is mounted and has one. The side panel is drawn without a host too (hanzo.team's rooms). */
+export function useBrowse() {
+    return useContext(Context)?.browse ?? null;
+}
+/** The host's browser, where one is mounted and has one. */
+export function useBrowser() {
+    return useContext(Context)?.browser ?? null;
+}
 /** The call target for this host — stable while the host's api, token reader and org are. */
 export function useTarget() {
     const { api, token, org } = useHost();

package/lib/index.d.ts

@@ -31,7 +31,7 @@ export { useStanding, rows, left, type Standing, type Row } from './standing.ts'
 export { kind, label, said, share, spent, ways, when, type Label, type Share, type State } from './plan.ts';
 export type { Limits } from './api/limits.ts';
 export type { Target } from './api/call.ts';
-export type { Host, Person } from './host.tsx';
+export type { Browse, Browser, Host, Person, Shown } from './host.tsx';
 export type { Session, Status } from './api/sessions.ts';
 export type { Read } from './data.ts';
 export { href, parse, path, PLACES, route, SESSION, SLUG, type Route, type Screen } from './route.ts';
@@ -44,5 +44,5 @@ export { href, parse, path, PLACES, route, SESSION, SLUG, type Route, type Scree
 export { catalog, EFFORTS, FIRST, keep, kept, nameOf, reasons, useCatalog, useChoice, useMind, type Choice, type Effort, type Mind } from './mind.ts';
 export { cut, GAP, MEASURE, measure, Prompt, prompt, ROUND, Tune, useEar, type PromptOptions } from './prompt.tsx';
 export { artifacts, blob, lead, renders, Reply, Served, speakable, speaker, type Artifact, type Listen } from './reply.tsx';
-export { Page, Panel, PanelToggle, type Kind, type PanelProps } from './panel.tsx';
-export { address, name, PAGE, useDeck, useKey, usePanel, useShown, type Deck, type Tab, type Tabs } from './tabs.ts';
+export { frames, Page, Panel, PanelToggle, type Kind, type PageProps, type PanelProps, type Suggestion } from './panel.tsx';
+export { address, destination, located, name, PAGE, SEARCH, useDeck, useKey, usePanel, useShown, type Deck, type Tab, type Tabs } from './tabs.ts';

package/lib/index.js

@@ -39,5 +39,5 @@ export { href, parse, path, PLACES, route, SESSION, SLUG } from './route.js';
 export { catalog, EFFORTS, FIRST, keep, kept, nameOf, reasons, useCatalog, useChoice, useMind } from './mind.js';
 export { cut, GAP, MEASURE, measure, Prompt, prompt, ROUND, Tune, useEar } from './prompt.js';
 export { artifacts, blob, lead, renders, Reply, Served, speakable, speaker } from './reply.js';
-export { Page, Panel, PanelToggle } from './panel.js';
-export { address, name, PAGE, useDeck, useKey, usePanel, useShown } from './tabs.js';
+export { frames, Page, Panel, PanelToggle } from './panel.js';
+export { address, destination, located, name, PAGE, SEARCH, useDeck, useKey, usePanel, useShown } from './tabs.js';

package/lib/panel.d.ts

@@ -7,40 +7,86 @@ export interface Kind {
     render: () => ReactNode;
     /** Drawn edge to edge, scrolling itself: a terminal, a frame. */
     bleed?: boolean;
+    /** Its mark in the strip. */
+    icon?: ReactNode;
+}
+/** A place an empty tab offers. */
+export interface Suggestion {
+    title: string;
+    url: string;
+    /** An image of the place's own mark; its initial without one. */
+    icon?: string;
 }
 /**
- * The header's Panel button: an icon among the header's icons, the summary's
- * mark rather than a sidebar's, because the window's own sidebar toggle is the
- * one at its top-left and two of that glyph read as one control drawn twice.
- * Its name and its keys say what it does; lit while the panel is open. Below
- * `lg`, open, it steps aside: the panel and its own close are in view.
+ * The header's control for the tabs, while they are hidden: an icon among the
+ * header's icons. Open, the strip's own toggle stands at the panel's end and
+ * this one is not drawn, so the page carries one toggle at a time.
  */
 export declare function PanelToggle({ open, onToggle }: {
     open: boolean;
     onToggle: () => void;
-}): import("react").JSX.Element;
+}): import("react").JSX.Element | null;
+/** Whether a browser page may frame an address: this page's bytes, this origin, and our own hosts. */
+export declare function frames(url: string): boolean;
+/** A site or a preview we host: a page under one of our hosts, not this page's own origin or our apexes. */
+export declare function hosted(url: string): boolean;
+/** A page the menu acts on. */
+export interface Here {
+    url: string;
+    title: string;
+}
+/** A page asked about, with what the reader had selected in it where a page can read that. */
+export interface Asked extends Here {
+    selection?: string;
+}
+/** Something the surface can do with a page: a row of the menu's Skills. */
+export interface Skill {
+    id: string;
+    name: string;
+    run: (page: Here) => void;
+}
+/** What the surface does with a page from its menu: each one draws its row. */
+export interface Acts {
+    /** Ask about this page: the conversation takes it, with what was selected. */
+    onAsk?: (page: Asked) => void;
+    /** Open in Dev: a preview or a site we host (`hosted`), opened where it is built. */
+    onDev?: (page: Here) => void;
+    /** Take a screenshot: the picture, handed to the surface (Chat attaches it). */
+    onCapture?: (file: File, page: Here) => void;
+    skills?: readonly Skill[];
+}
+export interface PageProps extends Acts {
+    tab: Tab;
+    /** Point the page at an address. */
+    onGo: (url: string) => void;
+    onBack?: () => void;
+    onForward?: () => void;
+    /** The title the page gave itself. */
+    onTitle?: (title: string) => void;
+    suggested?: readonly Suggestion[];
+}
 /**
- * A page tab: an address with its bar, or bytes rendered as their type.
+ * A page tab: its bar, then an address, bytes rendered as their type, or the
+ * suggestions of an empty tab.
  *
  * Two sandboxes. Bytes and an object URL take THIS page's origin, so a script
  * an answer wrote runs without `allow-same-origin`, never with our storage. A
  * remote page takes its own origin, and withholding same-origin breaks it.
  */
-export declare function Page({ tab, onGo }: {
-    tab: Tab;
-    onGo: (url: string) => void;
-}): import("react").JSX.Element;
-export interface PanelProps {
+export declare function Page({ tab, onGo, onBack, onForward, onTitle, suggested, ...acts }: PageProps): import("react").JSX.Element;
+export interface PanelProps extends Acts {
     side: Deck;
     kinds: readonly Kind[];
     onHide: () => void;
     /** A sheet over the page (a phone) rather than the host's column. */
     sheet?: boolean;
-    /** Under the tabs, over every tab: a line about what they all read (Dev's sandbox). */
+    /** Under the strip, over every tab: a line about what they all read (Dev's sandbox). */
     bar?: ReactNode;
-    /** At the strip's end, before hide: the surface's own menu. */
+    /** At the strip's end, before pop-out and hide: the surface's own menu. */
     menu?: ReactNode;
     label?: string;
+    /** What an empty tab offers. */
+    suggested?: readonly Suggestion[];
 }
 /** The panel: the strip, and the chosen tab. */
-export declare function Panel({ side, kinds, onHide, sheet, bar, menu, label }: PanelProps): import("react").JSX.Element;
+export declare function Panel({ side, kinds, onHide, sheet, bar, menu, label, suggested, ...acts }: PanelProps): import("react").JSX.Element;

package/lib/panel.js

@@ -1,29 +1,97 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * The side panel, once, for Chat and Dev: tabs over what a conversation or a
- * run made, read and served (tabs.ts), opened and shut in one press — the
- * header's Panel button (`PanelToggle`), or ⌘. / Ctrl+. (`useKey`).
+ * run made, read and served (tabs.ts) — a browser's tabs beside the
+ * conversation. The header shows them (`PanelToggle`, while they are hidden),
+ * the strip's own toggle hides them, and Ctrl+Shift+B (⌘⇧B) or ⌘. / Ctrl+.
+ * does either from anywhere but a field (`useKey`).
+ *
+ * The strip: the tabs, `+`, and at its end the surface's menu, pop-out and the
+ * hide toggle. A page tab has a browser's bar — Back and Forward through the
+ * addresses it went through, reload, the address, and its menu — and an empty
+ * one offers the surface's suggestions.
+ *
+ * WHAT A PAGE CAN SHOW IS SAID, NOT FAKED. A host that draws pages itself
+ * (`Host.browse`: Hanzo Desktop's native webviews) shows any address. A browser
+ * page frames only what may be framed — this page's bytes and our own hosts
+ * (`frames`) — and offers any other address in a new window instead of a frame
+ * the site would refuse.
  *
  * The column the panel stands in is the host's: its width and edge. On a phone
  * the panel is a sheet over the page instead (`sheet`).
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ExternalLink, PanelRightClose, Plus, RotateCw, TableOfContents, X } from '@hanzogui/lucide-icons-2';
-import { DropdownMenu } from '@hanzo/ui';
-import { useEffect, useMemo, useState } from 'react';
+import { ArrowLeft, ArrowRight, ChevronRight, Columns2, ExternalLink, Globe, Maximize2, Minus, MoreHorizontal, Plus, RotateCcw, RotateCw, SquarePlus, X } from '@hanzogui/lucide-icons-2';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@hanzo/ui';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { address, PAGE } from './tabs.js';
-/** The shortcut, as this platform writes it. */
-const KEY = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent) ? '⌘.' : 'Ctrl+.';
+import { useBrowse, useBrowser } from './host.js';
+import { destination, PAGE } from './tabs.js';
+const MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+/** The tabs' shortcut, as this platform writes it. */
+const KEYS = MAC ? '⌘⇧B' : 'Ctrl+Shift+B';
+/** Every key that shows and hides the tabs (tabs.ts `useKey`). */
+const SHORTCUTS = 'Control+Shift+B Meta+Shift+B Control+Period Meta+Period';
+/** A tab's title where it has none of its own. */
+const BLANK = 'New tab';
+/** The row heights, px: the strip (the conversation header's row), and a page's bar. */
+const STRIP = 56;
+const BAR = 48;
+/** A round control in a page's bar, px. */
+const PILL = 34;
+/** A press on an icon control of the panel's: quiet until pointed at, lit while its thing is open. */
+const quiet = (on = false, disabled = false) => ({
+    items: 'center',
+    justify: 'center',
+    shrink: 0,
+    rounded: 8,
+    cursor: disabled ? 'default' : 'pointer',
+    opacity: disabled ? 0.35 : 1,
+    bg: on ? '$hover' : 'transparent',
+    hoverStyle: disabled ? undefined : { bg: '$hover' },
+    focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' },
+});
 /**
- * The header's Panel button: an icon among the header's icons, the summary's
- * mark rather than a sidebar's, because the window's own sidebar toggle is the
- * one at its top-left and two of that glyph read as one control drawn twice.
- * Its name and its keys say what it does; lit while the panel is open. Below
- * `lg`, open, it steps aside: the panel and its own close are in view.
+ * The header's control for the tabs, while they are hidden: an icon among the
+ * header's icons. Open, the strip's own toggle stands at the panel's end and
+ * this one is not drawn, so the page carries one toggle at a time.
  */
 export function PanelToggle({ open, onToggle }) {
-    return (_jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": open ? 'Close the side panel' : 'Open the side panel', "aria-pressed": open, "aria-keyshortcuts": "Meta+Period Control+Period", ...{ title: `${open ? 'Close' : 'Open'} the side panel (${KEY})` }, onPress: onToggle, items: "center", justify: "center", width: 32, height: 32, "$max-lg": open ? { display: 'none' } : undefined, rounded: "$3", bg: open ? '$hover' : 'transparent', cursor: "pointer", shrink: 0, hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(TableOfContents, { size: 16 }) }));
+    if (open)
+        return null;
+    return (_jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": "Show tabs", "aria-expanded": false, "aria-keyshortcuts": SHORTCUTS, ...{ title: `Show tabs (${KEYS})` }, onPress: onToggle, width: 32, height: 32, ...quiet(), children: _jsx(SquarePlus, { size: 16 }) }));
+}
+/** Our own hosts: a page of theirs answers a frame on any of our pages. */
+const OURS = ['hanzo.ai', 'hanzo.app', 'hanzo.bot'];
+/** Whether a browser page may frame an address: this page's bytes, this origin, and our own hosts. */
+export function frames(url) {
+    let u;
+    try {
+        u = new URL(url, typeof window === 'undefined' ? 'https://hanzo.ai' : window.location.href);
+    }
+    catch {
+        return false;
+    }
+    if (u.protocol === 'blob:' || u.protocol === 'data:')
+        return true;
+    if (typeof window !== 'undefined' && u.origin === window.location.origin)
+        return true;
+    if (u.protocol !== 'https:')
+        return false;
+    return OURS.some((h) => u.hostname === h || u.hostname.endsWith(`.${h}`));
+}
+/** A site or a preview we host: a page under one of our hosts, not this page's own origin or our apexes. */
+export function hosted(url) {
+    let u;
+    try {
+        u = new URL(url);
+    }
+    catch {
+        return false;
+    }
+    if (u.protocol !== 'https:' || (typeof window !== 'undefined' && u.origin === window.location.origin))
+        return false;
+    return OURS.some((h) => u.hostname.endsWith(`.${h}`) && u.hostname !== `www.${h}`);
 }
 const suffix = (s) => {
     const dot = s.lastIndexOf('.');
@@ -31,33 +99,212 @@ const suffix = (s) => {
 };
 const PICTURES = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'svg'];
 const FRAMED = ['html', 'htm', 'txt', 'md', 'json', 'csv', 'pdf', 'css', 'js', 'ts'];
+/** The address a tab can be opened at in a window of its own: its own, or its bytes. Null for a kind or a blank page. */
+function outward(tab) {
+    if (!tab || tab.kind !== PAGE)
+        return null;
+    if (tab.body !== undefined)
+        return URL.createObjectURL(new Blob([tab.body], { type: tab.type || 'text/plain' }));
+    return tab.url || null;
+}
+/** Opens a tab's address or bytes in a new window. */
+function popOut(tab) {
+    const href = outward(tab);
+    if (href)
+        window.open(href, '_blank', 'noopener,noreferrer');
+}
+/** A place's mark: its image, else its initial on a quiet tile. */
+function Mark({ icon, title }) {
+    const [broken, setBroken] = useState(false);
+    return (_jsx(XStack, { width: 40, height: 40, rounded: 10, items: "center", justify: "center", bg: "$edge", overflow: "hidden", shrink: 0, children: icon && !broken ? (_jsx("img", { src: icon, alt: "", width: 28, height: 28, style: { objectFit: 'contain' }, onError: () => setBroken(true) })) : (_jsx(SizableText, { size: "$4", fontWeight: "600", color: "$ink", "aria-hidden": true, children: (title.trim()[0] ?? '·').toUpperCase() })) }));
+}
+/** An empty page: the places the surface suggests, as cards in a row that scrolls sideways. */
+function Suggested({ suggested, onGo }) {
+    return (_jsxs(YStack, { "data-slot": "side-suggested", px: "$4", pt: "$4", gap: "$3", children: [_jsx(SizableText, { fontSize: 13, color: "$soft", children: "Suggested" }), suggested.length ? (_jsx(XStack, { role: "list", "aria-label": "Suggested", gap: "$2", overflowX: "auto", overflowY: "hidden", pb: "$2", children: suggested.map((s) => (_jsxs(YStack, { role: "listitem", render: "button", "aria-label": s.title, onPress: () => onGo(s.url), width: 120, shrink: 0, items: "center", gap: "$2", py: "$2.5", px: "$1.5", rounded: 12, cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(Mark, { icon: s.icon, title: s.title }), _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, maxW: "100%", children: s.title })] }, s.url))) })) : (_jsx(SizableText, { fontSize: 13, color: "$soft", children: "No suggestions." }))] }));
+}
+/** A remote address a browser page may not frame: what it is, and the one way to open it. */
+function Elsewhere({ tab }) {
+    return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$3", p: "$5", "data-slot": "side-elsewhere", children: [_jsx(Globe, { size: 20, opacity: 0.6 }), _jsx(SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, maxW: "100%", children: tab.title || tab.url }), _jsxs(XStack, { render: "button", role: "button", onPress: () => popOut(tab), items: "center", gap: "$1.5", px: "$3", height: 32, rounded: 999, borderWidth: 1, borderColor: "$borderColor", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: [_jsx(ExternalLink, { size: 13 }), _jsx(SizableText, { fontSize: 13, color: "$ink", children: "Open in a new window" })] })] }));
+}
+/** A row of the page's menu, px: a browser's menu is denser than a form's. */
+const ROW = 29;
+/** A browser's zoom steps, percent. */
+const ZOOMS = [25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300];
+/** The next zoom step past `now`, one way. */
+const zoomed = (now, way) => {
+    const at = ZOOMS.findIndex((z) => z >= now);
+    const i = at < 0 ? ZOOMS.length - 1 : ZOOMS[at] === now ? at + way : way > 0 ? at : at - 1;
+    return ZOOMS[Math.max(0, Math.min(ZOOMS.length - 1, i))];
+};
+/** A row of the menu: its words, and what stands at its end. */
+function Row({ label, onSelect, disabled, end }) {
+    return (_jsxs(DropdownMenuItem, { disabled: disabled, onSelect: onSelect, minH: ROW, py: 0, children: [_jsx(SizableText, { fontSize: 13, color: "$ink", flex: 1, numberOfLines: 1, children: label }), end] }));
+}
+/** The zoom row: the level between − and +, and the way back to 100. Plain buttons, so a press keeps the menu open. */
+function Zoom({ level, onLevel, disabled }) {
+    const step = (way) => () => onLevel(zoomed(level, way));
+    const box = (label, onPress, child) => (_jsx(XStack, { render: "button", role: "button", "aria-label": label, "aria-disabled": disabled || undefined, onPress: disabled ? undefined : onPress, width: 24, height: 24, ...quiet(false, disabled), rounded: 6, children: child }));
+    return (_jsxs(XStack, { "data-slot": "page-zoom", role: "group", "aria-label": "Zoom", items: "center", gap: "$2", px: 8, height: 38, opacity: disabled ? 0.5 : 1, children: [_jsx(SizableText, { fontSize: 13, color: "$ink", flex: 1, children: "Zoom" }), _jsxs(XStack, { items: "center", gap: 2, borderWidth: 1, borderColor: "$borderColor", rounded: 8, px: 2, height: 28, children: [box('Zoom out', step(-1), _jsx(Minus, { size: 12 })), _jsx(SizableText, { fontSize: 12, color: "$ink", width: 40, text: "center", "aria-live": "polite", children: `${level}%` }), box('Zoom in', step(1), _jsx(Plus, { size: 12 }))] }), box('Reset zoom', () => onLevel(100), _jsx(RotateCcw, { size: 13 }))] }));
+}
+/**
+ * Skills, a submenu. Its panel is mounted only while open: a closed one stays
+ * laid out over the menu and takes its presses.
+ */
+function Skills({ skills, here }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(DropdownMenuSub, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuSubTrigger, { disabled: !here, minH: ROW, py: 0, children: _jsx(SizableText, { fontSize: 13, color: "$ink", flex: 1, children: "Skills" }) }), open ? (_jsx(DropdownMenuSubContent, { minW: 200, children: skills.map((k) => (_jsx(Row, { label: k.name, onSelect: () => here && k.run(here) }, k.id))) })) : null] }));
+}
+/**
+ * The page's menu, in a browser's order: what we add first (ask about it, open
+ * it in Dev, a skill, a new window, its link), then what is done to the page
+ * (find, print, zoom, device toolbar, a screenshot), then the browser's own
+ * (passwords, downloads, history, clearing) and its settings. A row is drawn
+ * only where it can be done — by the host's browser (`Host.browser`), or by a
+ * page itself for a frame it may reach — and one that needs a page is dim on
+ * an empty tab.
+ */
+function Actions({ tab, here, frame, framed, same, level, onLevel, acts, browser, }) {
+    const shown = here ? { id: tab.id, ...here } : null;
+    const none = !shown;
+    const pick = () => {
+        if (!same)
+            return undefined;
+        try {
+            return frame.current?.contentWindow?.getSelection()?.toString() || undefined;
+        }
+        catch {
+            return undefined;
+        }
+    };
+    const ask = async () => {
+        if (!shown || !acts.onAsk)
+            return;
+        const selection = browser?.selection ? await browser.selection(shown).catch(() => '') : pick();
+        acts.onAsk({ url: shown.url, title: shown.title, ...(selection ? { selection } : {}) });
+    };
+    const capture = async () => {
+        if (!shown || !browser?.capture || !acts.onCapture)
+            return;
+        const blob = await browser.capture(shown);
+        const name = `Screenshot ${new Date().toISOString().replace(/[:T]/g, '-').slice(0, 19)}.png`;
+        acts.onCapture(new File([blob], name, { type: blob.type || 'image/png' }), { url: shown.url, title: shown.title });
+    };
+    const print = browser?.print ?? (same ? () => frame.current?.contentWindow?.print() : undefined);
+    const zoom = Boolean(browser?.zoom) || framed;
+    const ours = [
+        acts.onAsk ? _jsx(Row, { label: "Ask about this page", disabled: none, onSelect: () => void ask() }, "ask") : null,
+        acts.onDev && shown && hosted(shown.url) ? _jsx(Row, { label: "Open in Dev", onSelect: () => acts.onDev?.({ url: shown.url, title: shown.title }) }, "dev") : null,
+        acts.skills?.length ? _jsx(Skills, { skills: acts.skills, here: here }, "skills") : null,
+        _jsx(Row, { label: "Open in a new window", disabled: none, onSelect: () => popOut(tab) }, "out"),
+        _jsx(Row, { label: "Copy link", disabled: none || !tab.url, onSelect: () => tab.url && void navigator.clipboard?.writeText(tab.url) }, "copy"),
+    ].filter(Boolean);
+    const page = [
+        browser?.find ? _jsx(Row, { label: "Find in page", disabled: none, onSelect: () => shown && browser.find?.(shown) }, "find") : null,
+        print ? _jsx(Row, { label: "Print", disabled: none, onSelect: () => shown && print(shown) }, "print") : null,
+        zoom ? _jsx(Zoom, { level: level, onLevel: onLevel, disabled: none }, "zoom") : null,
+        browser?.devices ? _jsx(Row, { label: "Show device toolbar", disabled: none, onSelect: () => shown && browser.devices?.(shown) }, "devices") : null,
+        browser?.capture && acts.onCapture ? _jsx(Row, { label: "Take a screenshot", disabled: none, onSelect: () => void capture() }, "capture") : null,
+    ].filter(Boolean);
+    const own = [
+        browser?.passwords ? _jsx(Row, { label: "Passwords and autofill", onSelect: browser.passwords, end: _jsx(ChevronRight, { size: 14, opacity: 0.6 }) }, "passwords") : null,
+        browser?.downloads ? _jsx(Row, { label: "Downloads", onSelect: browser.downloads }, "downloads") : null,
+        browser?.history ? _jsx(Row, { label: "History", onSelect: browser.history }, "history") : null,
+        browser?.clear ? _jsx(Row, { label: "Clear browsing data", onSelect: browser.clear }, "clear") : null,
+    ].filter(Boolean);
+    const settings = browser?.settings ? [_jsx(Row, { label: "Browser settings", onSelect: browser.settings }, "settings")] : [];
+    const groups = [ours, page, own, settings].filter((g) => g.length);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", role: "button", "aria-label": "Page actions", width: PILL, height: PILL, ...quiet(), rounded: 999, bg: "$edge", children: _jsx(MoreHorizontal, { size: 16 }) }) }), _jsx(DropdownMenuContent, { align: "end", minW: 240, "data-slot": "page-menu", children: groups.flatMap((g, i) => (i ? [_jsx(DropdownMenuSeparator, {}, `line-${i}`), ...g] : g)) })] }));
+}
 /**
- * A page tab: an address with its bar, or bytes rendered as their type.
+ * A page tab: its bar, then an address, bytes rendered as their type, or the
+ * suggestions of an empty tab.
  *
  * Two sandboxes. Bytes and an object URL take THIS page's origin, so a script
  * an answer wrote runs without `allow-same-origin`, never with our storage. A
  * remote page takes its own origin, and withholding same-origin breaks it.
  */
-export function Page({ tab, onGo }) {
+export function Page({ tab, onGo, onBack, onForward, onTitle, suggested = [], ...acts }) {
+    const Browse = useBrowse();
+    const browser = useBrowser();
+    const frame = useRef(null);
+    // The page's zoom: the host's browser zooms its own; a frame here is scaled.
+    const [level, setLevel] = useState(100);
     const own = tab.body !== undefined;
     const src = useMemo(() => (own ? URL.createObjectURL(new Blob([tab.body], { type: tab.type || 'text/plain' })) : (tab.url ?? '')), [own, tab.body, tab.type, tab.url]);
     useEffect(() => () => (own ? URL.revokeObjectURL(src) : undefined), [own, src]);
     const [round, again] = useState(0);
     const [typed, setTyped] = useState(tab.url ?? '');
+    const [typing, setTyping] = useState(false);
+    // A move the page made, Back or a suggestion is the bar's new address.
+    useEffect(() => setTyped(tab.url ?? ''), [tab.url]);
     const local = own || src.startsWith('blob:');
     const type = tab.type ?? '';
     const ext = suffix(tab.title);
     const picture = type.startsWith('image/') || PICTURES.includes(ext);
     const shows = !local || own || !type || type.startsWith('text/') || type === 'application/pdf' || type === 'application/json' || FRAMED.includes(ext);
-    return (_jsxs(YStack, { flex: 1, minH: 0, "data-slot": "side-page", children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(XStack, { render: "button", role: "button", "aria-label": "Reload this tab", onPress: () => again((n) => n + 1), p: "$1.5", rounded: "$2", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: _jsx(RotateCw, { size: 14 }) }), local ? (_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$soft", numberOfLines: 1, children: tab.title })) : (_jsx(XStack, { flex: 1, minW: 0, items: "center", px: "$2", height: 28, rounded: "$2", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: _jsx("input", { defaultValue: tab.url ?? '', placeholder: "Type an address", "aria-label": "Address", spellCheck: false, autoFocus: !tab.url, onChange: (e) => setTyped(e.target.value), onKeyDown: (e) => {
-                                if (e.key === 'Enter' && address(typed))
-                                    onGo(address(typed));
-                            }, style: { width: '100%', border: 0, outline: 'none', background: 'transparent', color: 'var(--foreground)', font: 'inherit', fontSize: 13 } }, tab.id) })), src ? (_jsx(XStack, { render: "button", role: "button", "aria-label": "Open this tab in a new window", onPress: () => window.open(src, '_blank', 'noopener,noreferrer'), p: "$1.5", rounded: "$2", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: _jsx(ExternalLink, { size: 14 }) })) : null] }), !src ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$5", children: _jsx(SizableText, { size: "$2", color: "$soft", children: "Type an address to open a page here." }) })) : picture && !own ? (_jsx(YStack, { flex: 1, minH: 0, items: "center", justify: "center", p: "$3", overflowY: "auto", overflowX: "hidden", children: _jsx("img", { src: src, alt: tab.title, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' } }, round) })) : shows ? (_jsx("iframe", { src: src, title: tab.title, sandbox: local ? 'allow-scripts allow-popups allow-forms' : 'allow-same-origin allow-scripts allow-popups allow-forms', style: { border: 0, width: '100%', height: '100%', display: 'block', background: 'var(--background)' } }, round)) : (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$5", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${(ext || type || 'This').toUpperCase()} previews aren’t supported yet.` }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Open it in a new window to view it." })] }))] }));
+    const back = Boolean(tab.back?.length && onBack);
+    const ahead = Boolean(tab.ahead?.length && onForward);
+    const go = () => {
+        const to = destination(typed);
+        if (to)
+            onGo(to);
+    };
+    const native = !local && Boolean(Browse);
+    const elsewhere = !local && !native && Boolean(src) && !frames(src);
+    const framed = Boolean(src) && !native && !elsewhere;
+    const same = framed && !local && (() => {
+        try {
+            return new URL(src, window.location.href).origin === window.location.origin;
+        }
+        catch {
+            return false;
+        }
+    })();
+    const here = src ? { url: tab.url || src, title: tab.title } : null;
+    const zoomTo = (percent) => {
+        setLevel(percent);
+        if (browser?.zoom && native && here)
+            browser.zoom({ id: tab.id, ...here }, percent);
+    };
+    // A frame scaled from its corner, its box grown to fill the panel at the scale.
+    const scale = native || level === 100 ? null : { width: `${10000 / level}%`, height: `${10000 / level}%`, transform: `scale(${level / 100})`, transformOrigin: '0 0' };
+    return (_jsxs(YStack, { flex: 1, minH: 0, "data-slot": "side-page", children: [_jsxs(XStack, { "data-slot": "side-bar", height: BAR, px: "$2", gap: "$2", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsxs(XStack, { items: "center", height: PILL, px: 4, gap: 2, rounded: 999, bg: "$edge", shrink: 0, children: [_jsx(XStack, { render: "button", role: "button", "aria-label": "Back", "aria-disabled": !back || undefined, onPress: back ? onBack : undefined, width: 28, height: 28, ...quiet(false, !back), rounded: 999, children: _jsx(ArrowLeft, { size: 15 }) }), _jsx(XStack, { render: "button", role: "button", "aria-label": "Forward", "aria-disabled": !ahead || undefined, onPress: ahead ? onForward : undefined, width: 28, height: 28, ...quiet(false, !ahead), rounded: 999, children: _jsx(ArrowRight, { size: 15 }) }), _jsx(XStack, { render: "button", role: "button", "aria-label": "Reload this tab", onPress: () => again((n) => n + 1), width: 28, height: 28, ...quiet(), rounded: 999, children: _jsx(RotateCw, { size: 14 }) })] }), _jsx(XStack, { flex: 1, minW: 0, items: "center", height: PILL, px: "$3.5", rounded: 999, bg: "$edge", borderWidth: 1, 
+                        // Focused, the address is the bar's one ringed thing, as a browser's is.
+                        borderColor: typing ? '$outlineColor' : 'transparent', "data-slot": "side-address", children: _jsx("input", { value: own ? tab.title : typed, readOnly: own, placeholder: "Search or enter a URL", "aria-label": "Address", spellCheck: false, autoFocus: !own && !tab.url, onFocus: (e) => {
+                                setTyping(true);
+                                e.currentTarget.select();
+                            }, onBlur: () => setTyping(false), onChange: (e) => setTyped(e.target.value), onKeyDown: (e) => {
+                                if (e.key === 'Enter')
+                                    go();
+                                if (e.key === 'Escape')
+                                    setTyped(tab.url ?? '');
+                            }, style: {
+                                width: '100%',
+                                border: 0,
+                                outline: 'none',
+                                background: 'transparent',
+                                color: 'var(--foreground)',
+                                font: 'inherit',
+                                fontSize: 14,
+                                // The resting bar reads centred, as a browser's new tab does; typed in, it reads from the left.
+                                textAlign: typing || typed ? 'left' : 'center',
+                            } }, tab.id) }), _jsx(Actions, { tab: tab, here: here, frame: frame, framed: framed, same: same, level: level, onLevel: zoomTo, acts: acts, browser: browser })] }), !src ? (_jsx(Suggested, { suggested: suggested, onGo: onGo })) : native && Browse ? (_jsx(YStack, { flex: 1, minH: 0, children: _jsx(Browse, { url: src, title: tab.title, onGo: onGo, onTitle: onTitle }) }, round)) : elsewhere ? (_jsx(Elsewhere, { tab: tab })) : picture && !own ? (_jsx(YStack, { flex: 1, minH: 0, items: "center", justify: "center", p: "$3", overflowY: "auto", overflowX: "hidden", children: _jsx("img", { src: src, alt: tab.title, style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', ...(scale ? { transform: scale.transform } : null) } }, round) })) : shows ? (_jsx(YStack, { flex: 1, minH: 0, overflow: "hidden", position: "relative", children: _jsx("iframe", { ref: frame, src: src, title: tab.title, sandbox: local ? 'allow-scripts allow-popups allow-forms' : 'allow-same-origin allow-scripts allow-popups allow-forms allow-modals', style: { position: 'absolute', top: 0, left: 0, border: 0, width: '100%', height: '100%', display: 'block', background: 'var(--background)', ...scale } }, round) })) : (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$5", gap: "$2", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${(ext || type || 'This').toUpperCase()} previews aren’t supported yet.` }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Open it in a new window to view it." })] }))] }));
 }
 const DRAG = 'text/x-hanzo-tab';
-/** One tab in the strip: what you press, and its cross. */
-function Leaf({ tab, on, side, index, label }) {
-    return (_jsxs(XStack, { "data-slot": "side-tab", "data-tab": tab.id, items: "center", gap: "$0.5", pl: "$2.5", pr: "$1", height: 30, maxW: 160, shrink: 0, rounded: "$3", bg: on ? '$edge' : 'transparent', hoverStyle: { bg: on ? '$edge' : '$hover' }, ...{
+/** One tab in the strip: its mark, its title, and its cross. */
+function Leaf({ tab, on, side, index, label, icon }) {
+    return (_jsxs(XStack, { "data-slot": "side-tab", "data-tab": tab.id, items: "center", gap: "$1", pl: "$2.5", pr: "$1", height: 30, 
+        // As wide as a title wants up to a browser tab's width, sharing the strip
+        // as a browser's tabs do when there are many.
+        flexBasis: 236, shrink: 1, minW: 56, maxW: 236, rounded: 8, borderWidth: 1, borderColor: on ? '$borderColor' : 'transparent', bg: on ? '$edge' : 'transparent', hoverStyle: { bg: on ? '$edge' : '$hover' }, ...{
+            // A middle press shuts any tab, as a browser's does; the chosen one also has its cross.
+            onAuxClick: (e) => {
+                if (e.button !== 1)
+                    return;
+                e.preventDefault();
+                side.shut(tab.id);
+            },
+            title: label,
             draggable: true,
             onDragStart: (e) => {
                 e.dataTransfer.setData(DRAG, tab.id);
@@ -74,7 +321,7 @@ function Leaf({ tab, on, side, index, label }) {
                 e.preventDefault();
                 side.move(id, index);
             },
-        }, children: [_jsx(XStack, { render: "button", role: "tab", id: `side-tab-${tab.id}`, "aria-selected": on, "aria-controls": "side-body", tabIndex: on ? 0 : -1, onPress: () => side.pick(tab.id), onKeyDown: (e) => {
+        }, children: [_jsxs(XStack, { render: "button", role: "tab", id: `side-tab-${tab.id}`, "aria-selected": on, "aria-controls": "side-body", tabIndex: on ? 0 : -1, onPress: () => side.pick(tab.id), onKeyDown: (e) => {
                     const step = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
                     if (step && e.shiftKey && (e.metaKey || e.ctrlKey)) {
                         e.preventDefault?.();
@@ -94,23 +341,34 @@ function Leaf({ tab, on, side, index, label }) {
                         e.preventDefault?.();
                         side.shut(tab.id);
                     }
-                }, flex: 1, minW: 0, cursor: "pointer", children: _jsx(SizableText, { size: "$2", color: on ? '$ink' : '$soft', numberOfLines: 1, children: label }) }), _jsx(XStack, { render: "button", role: "button", "aria-label": `Close ${label}`, tabIndex: -1, onPress: () => side.shut(tab.id), p: "$1", rounded: "$2", cursor: "pointer", opacity: on ? 0.8 : 0.45, hoverStyle: { bg: '$hover', opacity: 1 }, children: _jsx(X, { size: 12 }) })] }));
+                }, flex: 1, minW: 0, items: "center", gap: "$2", cursor: "pointer", children: [icon ? (_jsx(XStack, { "aria-hidden": true, shrink: 0, opacity: on ? 1 : 0.7, children: icon })) : null, _jsx(SizableText, { fontSize: 13, color: on ? '$ink' : '$soft', numberOfLines: 1, children: label })] }), _jsx(XStack, { render: "button", role: "button", "aria-label": `Close ${label}`, tabIndex: -1, onPress: () => side.shut(tab.id), width: 22, height: 22, items: "center", justify: "center", rounded: 6, cursor: "pointer", opacity: on ? 0.8 : 0.45, hoverStyle: { bg: '$hover', opacity: 1 }, 
+                // The chosen tab's cross: the others keep their room for their titles when the strip is shared.
+                display: on ? 'flex' : 'none', children: _jsx(X, { size: 12 }) })] }));
 }
 /** The panel: the strip, and the chosen tab. */
-export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label = 'Side panel' }) {
+export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label = 'Side panel', suggested, ...acts }) {
     const tab = side.tabs.find((t) => t.id === side.at) ?? null;
+    // The chosen tab is in view in a strip that scrolls: a tab just opened stands at its end.
+    useEffect(() => {
+        if (side.at)
+            document.getElementById(`side-tab-${side.at}`)?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }, [side.at, side.tabs.length]);
     const kind = tab && tab.kind !== PAGE ? kinds.find((k) => k.id === tab.kind) : undefined;
     const bleed = !tab || tab.kind === PAGE || Boolean(kind?.bleed);
     const closed = kinds.filter((k) => !side.tabs.some((t) => t.kind === k.id));
-    const title = (t) => (t.kind === PAGE ? t.title || 'New page' : (kinds.find((k) => k.id === t.kind)?.label ?? t.title));
-    const body = (_jsxs(YStack, { role: "complementary", "aria-label": label, "data-slot": "side", flex: 1, minW: 0, minH: 0, overflow: "hidden", style: { borderRadius: 'inherit' }, children: [_jsxs(XStack, { px: "$2", py: "$1.5", gap: "$1", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(XStack, { role: "tablist", "aria-label": "Tabs", flex: 1, minW: 0, gap: "$1", items: "center", overflowX: "auto", overflowY: "hidden", "$platform-web": { scrollbarWidth: 'none' }, children: side.tabs.map((t, i) => (_jsx(Leaf, { tab: t, on: t.id === side.at, side: side, index: i, label: title(t) }, t.id))) }), _jsx(DropdownMenu, { trigger: _jsx(XStack, { render: "button", role: "button", "aria-label": "Open a tab", p: "$1.5", rounded: "$2", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: _jsx(Plus, { size: 16 }) }), items: [
+    const title = (t) => (t.kind === PAGE ? t.title || BLANK : (kinds.find((k) => k.id === t.kind)?.label ?? t.title));
+    const mark = (t) => (t.kind === PAGE ? _jsx(Globe, { size: 14 }) : (kinds.find((k) => k.id === t.kind)?.icon ?? null));
+    const blank = () => side.open({ kind: PAGE, title: BLANK, url: '' });
+    const poppable = tab?.kind === PAGE && (tab.body !== undefined || Boolean(tab.url));
+    const plus = (_jsx(XStack, { render: "button", role: "button", "aria-label": "Open a tab", width: 28, height: 28, ...quiet(), onPress: closed.length ? undefined : blank, children: _jsx(Plus, { size: 16 }) }));
+    const body = (_jsxs(YStack, { role: "complementary", "aria-label": label, "data-slot": "side", flex: 1, minW: 0, minH: 0, overflow: "hidden", style: { borderRadius: 'inherit' }, children: [_jsxs(XStack, { "data-slot": "side-strip", height: STRIP, px: "$2", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(XStack, { role: "tablist", "aria-label": "Tabs", shrink: 1, minW: 0, gap: "$1", items: "center", overflowX: "auto", overflowY: "hidden", "$platform-web": { scrollbarWidth: 'none' }, children: side.tabs.map((t, i) => (_jsx(Leaf, { tab: t, on: t.id === side.at, side: side, index: i, label: title(t), icon: mark(t) }, t.id))) }), closed.length ? (_jsx(DropdownMenu, { trigger: plus, items: [
                             ...closed.map((k) => ({ key: k.id, label: k.label, onSelect: () => side.open({ kind: k.id, title: k.label }) })),
-                            { key: PAGE, label: 'Page', description: 'An address, framed here', onSelect: () => side.open({ kind: PAGE, title: 'New page', url: '' }) },
-                        ] }), menu, _jsx(XStack, { render: "button", role: "button", "aria-label": "Close the side panel", onPress: onHide, p: "$1.5", rounded: "$2", cursor: "pointer", hoverStyle: { bg: '$hover' }, children: _jsx(PanelRightClose, { size: 16 }) })] }), bar, _jsx(YStack, { id: "side-body", role: "tabpanel", "aria-labelledby": tab ? `side-tab-${tab.id}` : undefined, 
+                            { key: PAGE, label: 'Page', description: 'An address, framed here', onSelect: blank },
+                        ] })) : (plus), _jsx(XStack, { flex: 1 }), menu, _jsx(XStack, { render: "button", role: "button", "aria-label": "Open this tab in a new window", "aria-disabled": !poppable || undefined, onPress: poppable ? () => popOut(tab) : undefined, width: 28, height: 28, ...quiet(false, !poppable), children: _jsx(Maximize2, { size: 14 }) }), _jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": "Hide tabs", "aria-expanded": true, "aria-keyshortcuts": SHORTCUTS, ...{ title: `Hide tabs (${KEYS})` }, onPress: onHide, width: 32, height: 32, ...quiet(true), children: _jsx(Columns2, { size: 16 }) })] }), bar, _jsx(YStack, { id: "side-body", role: "tabpanel", "aria-labelledby": tab ? `side-tab-${tab.id}` : undefined, 
                 // What a tab lays over itself (a door's "Connecting…") stays inside it, under the strip.
-                position: "relative", flex: 1, minH: 0, overflowY: bleed ? 'hidden' : 'auto', overflowX: "hidden", px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: !tab ? (_jsxs(YStack, { flex: 1, items: "center", justify: "center", gap: "$2", p: "$5", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: "Nothing open here." }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Press + to open a tab." })] })) : tab.kind === PAGE ? (_jsx(Page, { tab: tab, onGo: (url) => side.go(tab.id, url) }, tab.id)) : kind ? (kind.render()) : (_jsx(SizableText, { size: "$2", color: "$soft", children: "This tab is not offered here." })) })] }));
+                position: "relative", flex: 1, minH: 0, overflowY: bleed ? 'hidden' : 'auto', overflowX: "hidden", px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: !tab ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$5", children: _jsx(SizableText, { fontSize: 13, color: "$soft", children: "No tabs open." }) })) : tab.kind === PAGE ? (_jsx(Page, { tab: tab, onGo: (url) => side.go(tab.id, url), onBack: () => side.back(tab.id), onForward: () => side.forward(tab.id), onTitle: (t) => side.rename(tab.id, t), suggested: suggested, ...acts }, tab.id)) : kind ? (kind.render()) : (_jsx(SizableText, { size: "$2", color: "$soft", children: "This tab is not offered here." })) })] }));
     if (!sheet || typeof document === 'undefined')
         return body;
     // A phone: a sheet from the foot of the window over a dim, the same panel in it.
-    return createPortal(_jsxs(YStack, { "data-slot": "side-sheet", position: "fixed", t: 0, r: 0, b: 0, l: 0, z: 60, children: [_jsx(YStack, { render: "button", "aria-label": "Close the side panel", onPress: onHide, position: "absolute", t: 0, r: 0, l: 0, height: "12dvh", bg: "var(--surface-scrim)" }), _jsx(YStack, { position: "absolute", l: 0, r: 0, b: 0, height: "88dvh", bg: "$background", borderTopWidth: 1, borderColor: "$borderColor", style: { borderTopLeftRadius: 16, borderTopRightRadius: 16 }, overflow: "hidden", children: body })] }), document.body);
+    return createPortal(_jsxs(YStack, { "data-slot": "side-sheet", position: "fixed", t: 0, r: 0, b: 0, l: 0, z: 60, children: [_jsx(YStack, { "aria-hidden": true, onPress: onHide, position: "absolute", t: 0, r: 0, l: 0, height: "12dvh", bg: "var(--surface-scrim)" }), _jsx(YStack, { position: "absolute", l: 0, r: 0, b: 0, height: "88dvh", bg: "$background", borderTopWidth: 1, borderColor: "$borderColor", style: { borderTopLeftRadius: 16, borderTopRightRadius: 16 }, overflow: "hidden", children: body })] }), document.body);
 }

package/lib/prompt.d.ts

@@ -14,8 +14,8 @@ export declare const measure: {
     readonly maxW: "calc(var(--container-prose, 48rem) - 1.5rem)";
     readonly mx: 'auto';
 };
-/** The round controls' box, px: a line of the footer row. */
-export declare const ROUND = 30;
+/** The round controls' box, px: the pill's row less its padding. */
+export declare const ROUND = 32;
 /**
  * The frame as a pane of its own, floating on the pane it is drawn in: the
  * `--pane-*` cut on design's first paper rung (a second rung's drop reads as a
@@ -59,6 +59,8 @@ export interface PromptOptions {
     talk?: Machine;
     /** Drawn on a pane: the frame is cut as a pane of its own (`cut`). */
     framed?: boolean;
+    /** Centred just above the pill: what every message is sent under. */
+    note?: ReactNode;
 }
 /**
  * The chip beside send, and the panel it opens: the effort, a sentence saying

package/lib/prompt.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * The composer, once, for Chat and Dev: the field, and under it in the frame
- * the attach button and the surface's own tools at the start, then the model
- * and effort (`Tune`), dictation, talk and send at the end.
+ * The composer, once, for Chat and Dev: one pill. While the draft is a line,
+ * the pill is one row — attach (`+`) and the surface's own tools at the start,
+ * the field, then the model and effort (`Tune`), dictation, talk and send. A
+ * draft longer than a line takes the pill's whole width above, and the
+ * controls keep the bottom row. A note the surface owes every message (the
+ * "can make mistakes" line) stands centred just above the pill.
  *
  * `prompt` builds @hanzo/ui's `Composer` props, so a surface that draws the
  * composer through `Chat` (its `composer` prop) and one that draws it directly
@@ -14,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * `MEASURE` and this lines up with its words.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ArrowUp, AudioLines, Check, ChevronDown, Mic, Paperclip, Square } from '@hanzogui/lucide-icons-2';
+import { ArrowUp, AudioLines, Check, ChevronDown, Mic, Plus, Square } from '@hanzogui/lucide-icons-2';
 import { Control } from '@hanzo/composer';
 import { Popover, PopoverContent, PopoverTrigger, Separator, Tooltip, TooltipContent, TooltipTrigger } from '@hanzo/ui';
 import { Composer } from '@hanzo/ui/chat';
@@ -29,8 +32,13 @@ export const MEASURE = 'var(--container-prose, 48rem)';
 export const GAP = 20;
 /** The composer's width: the measure less the thread column's 0.75rem gutters, centred, so its edges are the text's. */
 export const measure = { width: 'calc(100% - 1.5rem)', maxW: `calc(${MEASURE} - 1.5rem)`, mx: 'auto' };
-/** The round controls' box, px: a line of the footer row. */
-export const ROUND = 30;
+/** The round controls' box, px: the pill's row less its padding. */
+export const ROUND = 32;
+/** The pill's height on one line, px, and the corner a taller draft keeps. */
+const PILL = 44;
+const CORNER = 22;
+/** About a line of draft at the measure: past it, or past a newline, the field takes the pill's width. */
+const LINE = 72;
 /**
  * The frame as a pane of its own, floating on the pane it is drawn in: the
  * `--pane-*` cut on design's first paper rung (a second rung's drop reads as a
@@ -62,7 +70,7 @@ export function Tune({ mind, limits, disabled = false }) {
     const thinks = reasons(mind.model, mind.models);
     const pace = EFFORTS.find((e) => e.id === mind.effort);
     const routed = mind.model === ENSO;
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { disabled: disabled, children: _jsxs(XStack, { "data-slot": "mind", role: "button", tabIndex: disabled ? -1 : 0, "aria-label": thinks ? `Model and effort: ${name}, ${pace.label}` : `Model: ${name}`, "aria-haspopup": "dialog", "aria-expanded": open, items: "center", gap: "$1.5", px: "$2.5", height: 30, maxW: 220, rounded: "$10", borderWidth: 1, borderColor: "$borderColor", cursor: disabled ? 'default' : 'pointer', hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, opacity: disabled ? 0.4 : 1, onKeyDown: (e) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, children: [_jsx(PopoverTrigger, { disabled: disabled, children: _jsxs(XStack, { "data-slot": "mind", role: "button", tabIndex: disabled ? -1 : 0, "aria-label": thinks ? `Model and effort: ${name}, ${pace.label}` : `Model: ${name}`, "aria-haspopup": "dialog", "aria-expanded": open, items: "center", gap: "$1.5", px: "$2.5", height: ROUND, maxW: 220, rounded: 999, cursor: disabled ? 'default' : 'pointer', hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, opacity: disabled ? 0.4 : 1, onKeyDown: (e) => {
                         if (disabled || (e.key !== 'Enter' && e.key !== ' ' && e.key !== 'ArrowUp' && e.key !== 'ArrowDown'))
                             return;
                         e.preventDefault?.();
@@ -84,9 +92,9 @@ export function Tune({ mind, limits, disabled = false }) {
                                         setOpen(false);
                                     }, loading: mind.loading, error: mind.error })] })] }) })] }));
 }
-/** The paperclip, with its name on hover. */
+/** The pill's `+`: files go with the message. Its name on hover. */
 function Attach({ onAttach, disabled }) {
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Control, { type: "button", size: ROUND, "aria-label": "Attach files", "aria-disabled": disabled || undefined, onClick: disabled ? undefined : onAttach, children: _jsx(Paperclip, { size: 15 }) }) }), _jsx(TooltipContent, { children: _jsx(SizableText, { size: "$2", children: "Attach files" }) })] }));
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(Control, { type: "button", size: ROUND, "aria-label": "Attach files", "aria-disabled": disabled || undefined, onClick: disabled ? undefined : onAttach, children: _jsx(Plus, { size: 18 }) }) }), _jsx(TooltipContent, { children: _jsx(SizableText, { size: "$2", children: "Attach files" }) })] }));
 }
 /** @hanzo/ui `Composer` props for the one composer. */
 export function prompt(o) {
@@ -94,6 +102,11 @@ export function prompt(o) {
     const busy = Boolean(o.busy);
     const disabled = Boolean(o.disabled);
     const live = busy ? Boolean(o.onStop) : lit && !disabled;
+    // A draft past a line takes the pill's width above the controls. The same
+    // field either way, moved by flex order alone: a different tree would remount
+    // it and drop the caret mid-word.
+    const tall = o.value.includes('\n') || o.value.length > LINE;
+    const head = o.head || o.note ? (_jsxs(YStack, { ...measure, gap: "$1.5", "data-slot": "prompt-head", children: [o.head, o.note ? (_jsx(SizableText, { "data-slot": "prompt-note", fontSize: 12, color: "$soft", text: "center", self: "center", children: o.note })) : null] })) : undefined;
     return {
         value: o.value,
         onChange: o.onChange,
@@ -103,13 +116,33 @@ export function prompt(o) {
         disabled,
         ...(o.placeholder ? { placeholder: o.placeholder } : {}),
         ...(o.label ? { label: o.label } : {}),
-        ...(o.field ? { field: o.field } : {}),
-        // Above the frame and at its width, so a chip lines up with the field's edge.
-        head: o.head ? (_jsx(YStack, { ...measure, gap: "$1.5", "data-slot": "prompt-head", children: o.head })) : undefined,
+        // The field: first and the pill's width on a tall draft, after `+` on a line.
+        // inline-style: flex `order`, which no gui prop carries; the field keeps its node either way.
+        // An empty field keeps its placeholder to the line, cut short rather than wrapped inside the pill.
+        field: {
+            ...o.field,
+            style: { ...(o.field?.style ?? {}), order: tall ? 0 : 1, ...(o.value ? null : { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }) },
+            ...(tall ? { width: '100%', flexBasis: '100%', px: '$2' } : null),
+            // A phone keeps the field a readable width: what does not fit beside it goes to a second row.
+            '$max-sm': { minW: 140 },
+        },
+        // Above the pill and at its width, so a chip lines up with the field's edge.
+        head,
+        inline: true,
         ...measure,
-        ...(o.framed ? cut : null),
-        children: (_jsxs(XStack, { items: "center", gap: "$2", "data-slot": "prompt-start", children: [o.onAttach ? _jsx(Attach, { onAttach: o.onAttach, disabled: disabled }) : null, o.tools] })),
-        send: (_jsxs(XStack, { items: "center", gap: "$2", "data-slot": "prompt-end", children: [o.mind ? _jsx(Tune, { mind: o.mind, limits: o.limits, disabled: disabled && !busy }) : null, o.voice ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.voice, disabled: disabled, says: { idle: 'Dictate', listening: 'Dictating — click to stop' }, children: (state) => _jsx(Mic, { size: 15, fill: state === 'idle' ? 'none' : 'currentColor' }) }) })) : null, o.talk ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: 'Talk with Hanzo', listening: 'In conversation — click to hang up', speaking: 'Hanzo is speaking — talk to interrupt' }, children: () => _jsx(AudioLines, { size: 15 }) }) })) : null, _jsx(Control, { type: "button", size: ROUND, fill: true, "data-slot": "composer-send", "aria-label": busy ? 'Stop' : 'Send', "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
+        minH: PILL,
+        rounded: tall ? CORNER : 999,
+        pl: 6,
+        pr: 6,
+        gap: 4,
+        items: tall ? 'flex-end' : 'center',
+        flexWrap: tall ? 'wrap' : 'nowrap',
+        '$max-sm': { flexWrap: 'wrap', rounded: CORNER },
+        borderColor: '$borderColor',
+        bg: '$edge',
+        ...(o.framed ? { boxShadow: 'var(--shadow-sheet-1)' } : null),
+        children: (_jsxs(XStack, { items: "center", gap: 2, "data-slot": "prompt-start", style: { order: tall ? 1 : 0 }, shrink: 0, children: [o.onAttach ? _jsx(Attach, { onAttach: o.onAttach, disabled: disabled }) : null, o.tools] })),
+        send: (_jsxs(XStack, { items: "center", gap: 2, "data-slot": "prompt-end", style: { order: 2 }, ml: tall ? 'auto' : 0, "$max-sm": { ml: 'auto' }, shrink: 0, children: [o.mind ? _jsx(Tune, { mind: o.mind, limits: o.limits, disabled: disabled && !busy }) : null, o.voice ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.voice, disabled: disabled, says: { idle: 'Dictate', listening: 'Dictating — click to stop' }, children: (state) => _jsx(Mic, { size: 15, fill: state === 'idle' ? 'none' : 'currentColor' }) }) })) : null, o.talk ? (_jsx(Control, { asChild: true, size: ROUND, children: _jsx(Voice, { voice: o.talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: 'Talk with Hanzo', listening: 'In conversation — click to hang up', speaking: 'Hanzo is speaking — talk to interrupt' }, children: () => _jsx(AudioLines, { size: 15 }) }) })) : null, _jsx(Control, { type: "button", size: ROUND, fill: true, rounded: 999, "data-slot": "composer-send", "aria-label": busy ? 'Stop' : 'Send', "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, onClick: () => {
                         if (!live)
                             return;
                         if (busy)

package/lib/run.js

@@ -388,7 +388,7 @@ export function Run({ id }) {
                                                     ...(busy || waiting ? ['pause', 'resume', 'stop'] : []),
                                                 ] }), _jsx(Button, { size: "sm", disabled: notify, onPress: () => void ask(), children: notify ? 'You will be notified' : 'Notify me' })] })) : null] }), _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: send, ready: Boolean(draft.trim()), disabled: !signed || busy || waiting || !(running || finished), placeholder: placeholder, label: steering ? 'Steer this run' : 'Follow up on this run', head: files.length ? _jsx(XStack, { gap: "$1.5", flexWrap: "wrap", children: _jsx(Files, { files: files, onFiles: setFiles }) }) : undefined, onAttach: () => pick(files, setFiles, setNote), 
                                 // What a new run from here is made with; words that steer this run use neither.
-                                mind: signed && !steering ? mind : null, limits: limits, voice: voice }), _jsx(SizableText, { size: "$1", color: "$soft", style: { textAlign: 'center' }, children: "Hanzo is AI and can make mistakes." })] })] }), desk && !wide ? desk_(true) : null, desk && wide ? (_jsxs(YStack, { "data-slot": "desk", ref: (el) => {
+                                mind: signed && !steering ? mind : null, limits: limits, voice: voice, note: "Hanzo is AI and can make mistakes." })] })] }), desk && !wide ? desk_(true) : null, desk && wide ? (_jsxs(YStack, { "data-slot": "desk", ref: (el) => {
                     deskBox.current = el instanceof HTMLElement ? el : null;
                 }, ...pane, 
                 // A pane of its own beside the run's, the gutter between them.

package/lib/tabs.d.ts

@@ -8,6 +8,9 @@ export interface Tab {
     /** A page's own bytes, rendered as `type`. */
     body?: string;
     type?: string;
+    /** The addresses a page came from, oldest first, and those Back stepped over, nearest first. */
+    back?: string[];
+    ahead?: string[];
 }
 /** The tabs in a scope, in order, and the chosen one. */
 export interface Tabs {
@@ -32,9 +35,18 @@ export interface Deck extends Tabs {
     pick: (id: string) => void;
     shut: (id: string) => void;
     move: (id: string, to: number) => void;
-    /** Point a page somewhere else. */
+    /** Point a page somewhere else: where it was goes on its Back, and Forward is forgotten. */
     go: (id: string, url: string) => void;
+    /** A page's Back and Forward. */
+    back: (id: string) => void;
+    forward: (id: string) => void;
+    /** A page's title, as what it shows calls itself. */
+    rename: (id: string, title: string) => void;
 }
+/** A page pointed at `url`, where it was on its Back. */
+export declare function went(t: Tab, url: string): Tab;
+/** A page one step back, or forward: the address it leaves goes the other way. */
+export declare function stepped(t: Tab, way: 'back' | 'forward'): Tab;
 /** A scope's tabs: as kept, else `seed`, and every change kept. */
 export declare function useDeck(scope: string, seed: Tabs): Deck;
 /** Whether the panel is open in `mode`, kept; `first` before anyone has said. */
@@ -45,9 +57,18 @@ export declare function useShown(mode: string, first: boolean): readonly [boolea
  * the conversation, never on a sheet it did not ask for.
  */
 export declare function usePanel(mode: string, first: boolean, wide: boolean): readonly [boolean, (open: boolean) => void];
-/** ⌘. on a Mac, Ctrl+. elsewhere: the panel, from anywhere on the page. */
+/**
+ * The panel's keys, from anywhere on the page but a field: Ctrl+Shift+B (⌘⇧B on
+ * a Mac), the tabs' own, and ⌘. / Ctrl+., which it had first.
+ */
 export declare function useKey(toggle: () => void): void;
 /** The host and path of an address: as much as a title can honestly be. */
 export declare function name(url: string): string;
+/** Where words typed in a page's bar are looked up. */
+export declare const SEARCH = "https://duckduckgo.com/?q=";
+/** Whether what was typed in a page's bar is an address rather than words to look up. */
+export declare function located(typed: string): boolean;
+/** What a page's bar opens for what was typed: the address, or a search for the words. */
+export declare function destination(typed: string): string;
 /** An address as typed, made one that opens: https for a host, http for this machine. */
 export declare function address(typed: string): string;

package/lib/tabs.js

@@ -12,6 +12,8 @@
  * new page; a tab is dragged to reorder (Ctrl/⌘+Shift+←/→ from the keyboard)
  * and shut with its cross (Delete). A page's own bytes are kept with it, so an
  * artifact's tab survives a reload; an object URL does not and is not kept.
+ * A page keeps the addresses it went through (`back`, `ahead`), so its bar's
+ * Back and Forward walk them as a browser's do.
  *
  */
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
@@ -102,6 +104,27 @@ export function moved(was, id, to) {
     tabs.splice(Math.max(0, Math.min(tabs.length, to)), 0, tab);
     return { ...was, tabs };
 }
+/** How many addresses a page's Back keeps. */
+const DEPTH = 50;
+/** A page pointed at `url`, where it was on its Back. */
+export function went(t, url) {
+    if (url === t.url)
+        return t;
+    const back = t.url ? [...(t.back ?? []), t.url].slice(-DEPTH) : (t.back ?? []);
+    return { ...t, url, title: name(url), body: undefined, type: undefined, back, ahead: [] };
+}
+/** A page one step back, or forward: the address it leaves goes the other way. */
+export function stepped(t, way) {
+    const from = way === 'back' ? (t.back ?? []) : (t.ahead ?? []);
+    const url = way === 'back' ? from.at(-1) : from[0];
+    if (!url)
+        return t;
+    const rest = way === 'back' ? from.slice(0, -1) : from.slice(1);
+    const here = t.url ? [t.url] : [];
+    return way === 'back'
+        ? { ...t, url, title: name(url), back: rest, ahead: [...here, ...(t.ahead ?? [])] }
+        : { ...t, url, title: name(url), ahead: rest, back: [...(t.back ?? []), ...here].slice(-DEPTH) };
+}
 /** A scope's tabs: as kept, else `seed`, and every change kept. */
 export function useDeck(scope, seed) {
     const kept = useSyncExternalStore(subscribe, () => read(scope), () => null);
@@ -113,7 +136,10 @@ export function useDeck(scope, seed) {
         pick: (id) => change((was) => ({ ...was, at: id })),
         shut: (id) => change((was) => shut(was, id)),
         move: (id, to) => change((was) => moved(was, id, to)),
-        go: (id, url) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? { ...t, url, title: name(url) } : t)) })),
+        go: (id, url) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? went(t, url) : t)) })),
+        back: (id) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? stepped(t, 'back') : t)) })),
+        forward: (id) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id ? stepped(t, 'forward') : t)) })),
+        rename: (id, title) => change((was) => ({ ...was, tabs: was.tabs.map((t) => (t.id === id && title && t.title !== title ? { ...t, title } : t)) })),
     };
 }
 const shownKey = (mode) => where(`${mode}.open`);
@@ -158,16 +184,28 @@ export function usePanel(mode, first, wide) {
     const [sheet, setSheet] = useState(false);
     return wide ? [kept, keep] : [sheet, setSheet];
 }
-/** ⌘. on a Mac, Ctrl+. elsewhere: the panel, from anywhere on the page. */
+/** Whether a key went to something the reader types in, where it is theirs. */
+const typing = (e) => {
+    const el = e.target;
+    return !!el && (el.isContentEditable || el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT');
+};
+/**
+ * The panel's keys, from anywhere on the page but a field: Ctrl+Shift+B (⌘⇧B on
+ * a Mac), the tabs' own, and ⌘. / Ctrl+., which it had first.
+ */
 export function useKey(toggle) {
     const now = useRef(toggle);
     now.current = toggle;
     useEffect(() => {
         const press = (e) => {
-            if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key === '.') {
-                e.preventDefault();
-                now.current();
-            }
+            if (!(e.metaKey || e.ctrlKey) || e.altKey || typing(e))
+                return;
+            const tabs = e.shiftKey && e.key.toLowerCase() === 'b';
+            const dot = !e.shiftKey && e.key === '.';
+            if (!tabs && !dot)
+                return;
+            e.preventDefault();
+            now.current();
         };
         window.addEventListener('keydown', press);
         return () => window.removeEventListener('keydown', press);
@@ -183,6 +221,26 @@ export function name(url) {
         return url;
     }
 }
+/** Where words typed in a page's bar are looked up. */
+export const SEARCH = 'https://duckduckgo.com/?q=';
+/** Whether what was typed in a page's bar is an address rather than words to look up. */
+export function located(typed) {
+    const t = typed.trim();
+    if (!t || /\s/.test(t))
+        return false;
+    if (/^(localhost|127\.0\.0\.1|\[::1\])(:\d+)?(\/|$)/i.test(t))
+        return true;
+    if (/^[a-z][a-z0-9+.-]*:\/\//i.test(t) || /^(about|blob|data):/i.test(t))
+        return true;
+    return /^[a-z0-9-]+(\.[a-z0-9-]+)*\.[a-z]{2,}(:\d+)?(\/.*)?$/i.test(t);
+}
+/** What a page's bar opens for what was typed: the address, or a search for the words. */
+export function destination(typed) {
+    const t = typed.trim();
+    if (!t)
+        return '';
+    return located(t) ? address(t) : SEARCH + encodeURIComponent(t);
+}
 /** An address as typed, made one that opens: https for a host, http for this machine. */
 export function address(typed) {
     const t = typed.trim();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/build",
-  "version": "0.2.54",
+  "version": "0.2.55",
   "type": "module",
   "license": "Apache-2.0 OR MIT",
   "description": "Hanzo Build — say what you want, watch it built, deployed and running. The builder as a component, mounted by the Hanzo app at hanzo.ai.",