@hosty-sdk/app 0.26.0 → 0.27.22

package/dist/ui-navigation-react.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+export declare function useHostyChrome(): import("./ui-types").UiChromeSnapshot;
+export declare function useHostyNavigation(): Readonly<{
+    status: "loading" | "ready" | "unavailable";
+    catalog: import("./ui-types").UiNavigationCatalog | null;
+    entries: readonly import("./ui-types").UiNavigationEntry[];
+    activeKey: string | null;
+    code?: string;
+}>;
+export declare function HostyNavigationBoundary({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function HostyToolLauncher(): import("react").JSX.Element | null;
+export declare function HostyNavigation({ className }: {
+    className?: string;
+}): import("react").JSX.Element | null;

package/dist/ui-navigation-react.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { ui, createPresentationRequestId } from "./ui.js";
+import { INITIAL_CHROME, INITIAL_NAVIGATION } from "./ui-composition.js";
+import { UiCompositionContext } from "./ui-context.js";
+import { UI_COMPOSITION_CAPABILITY } from "./ui-types.js";
+export function useHostyChrome() { return useSyncExternalStore(ui.subscribeChrome, ui.getChrome, () => INITIAL_CHROME); }
+export function useHostyNavigation() { return useSyncExternalStore(ui.subscribeNavigation, ui.getNavigation, () => INITIAL_NAVIGATION); }
+export function HostyNavigationBoundary({ children, className }) {
+    const chrome = useHostyChrome(), ref = useRef(null), hidden = chrome.navigation === "hide";
+    const focused = useRef(false);
+    useLayoutEffect(() => { if (hidden && focused.current) {
+        document.querySelector('[data-hosty-content][tabindex="-1"]')?.focus();
+        focused.current = false;
+    } }, [hidden]);
+    return _jsx("div", { ref: ref, onFocusCapture: () => { focused.current = true; }, onBlurCapture: event => { if (!event.currentTarget.contains(event.relatedTarget))
+            focused.current = false; }, className: className, "data-hosty-navigation-boundary": true, hidden: hidden, inert: hidden, style: hidden ? { display: "none" } : { display: "contents" }, children: children });
+}
+export function HostyToolLauncher() {
+    const chrome = useHostyChrome(), [error, setError] = useState(null);
+    if (chrome.tools.owner === "local" || !chrome.tools.enabled || chrome.tools.launcher === "hide"
+        || !chrome.capabilities.includes(UI_COMPOSITION_CAPABILITY))
+        return null;
+    return _jsxs("div", { className: "hosty-child-tools", children: [_jsx("button", { type: "button", disabled: chrome.tools.owner !== "host", onClick: async () => {
+                    const result = await ui.openToolPicker({ requestId: createPresentationRequestId() });
+                    setError(result.status === "accepted" ? null : "Tools are unavailable. Reconnect to your host or open the app separately.");
+                }, children: "Tools" }), error && _jsx("span", { role: "status", children: error })] });
+}
+export function HostyNavigation({ className = "" }) {
+    const composition = useContext(UiCompositionContext);
+    const model = useHostyNavigation(), chrome = useHostyChrome();
+    const [expanded, setExpanded] = useState(false), [error, setError] = useState(null);
+    const [narrow, setNarrow] = useState(false), dialog = useRef(null), opener = useRef(null);
+    useEffect(() => { const resize = () => setNarrow(window.innerWidth < 900); resize(); window.addEventListener("resize", resize); return () => window.removeEventListener("resize", resize); }, []);
+    useEffect(() => {
+        const modal = (event) => { if (event.detail !== "navigation")
+            setExpanded(false); };
+        window.addEventListener("hosty:ui:modal", modal);
+        return () => window.removeEventListener("hosty:ui:modal", modal);
+    }, []);
+    useEffect(() => {
+        if (expanded && narrow && chrome.navigation === "show") {
+            window.dispatchEvent(new CustomEvent("hosty:ui:modal", { detail: "navigation" }));
+            dialog.current?.showModal();
+        }
+        else {
+            if (dialog.current?.open) {
+                dialog.current.close();
+                if (chrome.navigation === "show")
+                    opener.current?.focus();
+                else
+                    document.querySelector('[data-hosty-content][tabindex="-1"]')?.focus();
+            }
+        }
+    }, [expanded, narrow, chrome.navigation]);
+    const empty = model.status === "ready" && !model.entries.length;
+    const links = _jsxs(_Fragment, { children: [model.status === "loading" && _jsx("p", { role: "status", children: "Loading navigation\u2026" }), model.status === "unavailable" && _jsxs("p", { role: "status", children: ["Navigation is unavailable. ", _jsx("button", { type: "button", onClick: () => void composition?.refreshNavigation(), children: "Retry navigation" })] }), model.entries.map(entry => _jsxs("a", { href: entry.standaloneHref ?? undefined, "aria-current": model.activeKey === entry.key ? "page" : undefined, "aria-disabled": !entry.route || !entry.available, title: !entry.available ? entry.state : undefined, onClick: async (event) => {
+                    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || event.button !== 0)
+                        return;
+                    event.preventDefault();
+                    if (!entry.route || !entry.available)
+                        return;
+                    const result = await ui.navigate(entry.key, { requestId: createPresentationRequestId() });
+                    if (result.status === "accepted") {
+                        setExpanded(false);
+                        setError(null);
+                    }
+                    else
+                        setError(`Cannot open this page (${result.code}). Try again or open it separately.`);
+                }, children: [entry.icon && _jsx("img", { src: entry.icon, alt: "", width: 18, height: 18 }), _jsx("span", { children: entry.label })] }, entry.key)), error && _jsx("p", { role: "status", children: error })] });
+    if (empty)
+        return null;
+    return _jsxs(HostyNavigationBoundary, { children: [_jsx("style", { children: navigationStyles }), _jsx("div", { className: `hosty-navigation ${className}`, children: narrow ? _jsxs(_Fragment, { children: [_jsx("button", { ref: opener, type: "button", "aria-label": "Page navigation", "aria-expanded": expanded, onClick: () => setExpanded(true), children: "\u2630" }), _jsxs("dialog", { ref: dialog, className: "hosty-navigation-dialog", "aria-label": "Page navigation", onCancel: () => setExpanded(false), children: [_jsx("button", { type: "button", onClick: () => setExpanded(false), children: "Close navigation" }), _jsx("nav", { "aria-label": "App pages", children: links })] })] }) : _jsx("nav", { "aria-label": "App pages", children: links }) })] });
+}
+const navigationStyles = `
+[data-hosty-navigation=hide] [data-hosty-navigation-boundary]{display:none!important}
+.hosty-app-layout{display:flex;width:100%;height:100%;min-height:0;min-width:0}
+.hosty-app-content{flex:1;min-width:0;min-height:0;overflow:auto;outline:none}
+.hosty-navigation{flex:0 0 190px;box-sizing:border-box;padding:12px;border-right:1px solid color-mix(in srgb,currentColor 14%,transparent);font:14px system-ui}
+.hosty-navigation nav,.hosty-navigation-dialog nav{display:flex;flex-direction:column;gap:4px}
+.hosty-navigation a,.hosty-navigation-dialog a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:6px;text-decoration:none;color:inherit}
+.hosty-navigation a[aria-current=page],.hosty-navigation-dialog a[aria-current=page]{background:color-mix(in srgb,currentColor 10%,transparent);font-weight:600}
+.hosty-navigation a[aria-disabled=true]{opacity:.55;cursor:not-allowed}
+.hosty-navigation button,.hosty-child-tools button,.hosty-navigation-dialog button{font:inherit;color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:6px;padding:7px 10px;cursor:pointer}
+.hosty-navigation-dialog{position:fixed;inset:0 auto 0 0;margin:0;height:100dvh;width:min(300px,85vw);box-sizing:border-box;border:0;padding:16px;background:Canvas;color:CanvasText}
+.hosty-navigation-dialog::backdrop{background:#0007}.hosty-child-tools{padding:6px 10px}
+@media(max-width:899px){.hosty-app-layout{flex-direction:column}.hosty-navigation{flex:0 0 auto;border-right:0;padding:6px 10px}}
+`;

package/dist/ui-react.d.ts

@@ -2,18 +2,27 @@ import { type ReactNode } from "react";
 import { type UiClient } from "./ui.js";
 import { type UiHost } from "./ui-host.js";
 import { type HostyAppFrameProps } from "./ui-frame.js";
-import { type PanelTarget, type UiPanel } from "./ui-types.js";
+import { type PanelTarget, type UiPanel, type UiChromeOverrides, type UiRouterAdapter } from "./ui-types.js";
+export { HostyNavigation, HostyNavigationBoundary, useHostyChrome, useHostyNavigation } from "./ui-navigation-react.js";
 export { HostyAppFrame, type HostyAppFrameProps } from "./ui-frame.js";
 export declare function useHostyUi(): UiClient;
 export declare function useHostyUiHost(): UiHost | null;
 /** Internal composition root, owned by HostyOverlay rather than mounted again by domain apps. */
-export declare function HostyUiRoot({ children, uiPath, panelLayout, active }: {
+export declare function HostyUiRoot({ children, uiPath, panelLayout, active, chrome, navigation }: {
+    chrome?: UiChromeOverrides;
+    navigation?: {
+        renderer: "standard" | "custom";
+        router?: UiRouterAdapter;
+    };
     children: ReactNode;
     uiPath?: string;
     panelLayout?: "auto" | "slot" | "none";
     active?: boolean;
 }): import("react").JSX.Element;
 export type HostyPanelWorkspaceProps = {
+    workspaceId?: string;
+    /** A host-owned tool window can keep dock geometry even in a narrow container. */
+    layout?: "responsive" | "dock";
     children: ReactNode;
     railMode?: "opened" | "catalog";
     className?: string;
@@ -26,10 +35,11 @@ export type HostyPanelWorkspaceProps = {
     onAuthRequired?: HostyAppFrameProps["onAuthRequired"];
     outbound?: {
         target: PanelTarget;
+        presentationId?: string;
         message: unknown;
         nonce: number;
     } | null;
     renderIcon?: (panel: UiPanel) => ReactNode;
 };
 /** A single retained frame tree for dock and drawer; only CSS placement changes at the breakpoint. */
-export declare function HostyPanelWorkspace({ children, railMode, className, initialWidth, initialExpanded, onWidthChange, onExpandedChange, onStartApp, onAskAssistant, onAuthRequired, outbound, renderIcon }: HostyPanelWorkspaceProps): import("react").JSX.Element;
+export declare function HostyPanelWorkspace({ children, workspaceId, layout, railMode, className, initialWidth, initialExpanded, onWidthChange, onExpandedChange, onStartApp, onAskAssistant, onAuthRequired, outbound, renderIcon }: HostyPanelWorkspaceProps): import("react").JSX.Element;

package/dist/ui-react.js

@@ -1,18 +1,23 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { bindUiClient, ui } from "./ui.js";
 import { createUiHost } from "./ui-host.js";
 import { EmbeddedUiClient } from "./ui-embedded.js";
-import { UiHostContext } from "./ui-context.js";
-import { HostyAppFrame } from "./ui-frame.js";
+import { UiHostContext, UiCompositionContext } from "./ui-context.js";
 import { panelKey } from "./ui-types.js";
+import { HostyNavigation, HostyToolLauncher, useHostyChrome } from "./ui-navigation-react.js";
+export { HostyNavigation, HostyNavigationBoundary, useHostyChrome, useHostyNavigation } from "./ui-navigation-react.js";
+import { captureChromeHints } from "./ui-composition.js";
+import { DEFAULT_WORKSPACE } from "./ui-workspaces.js";
+import { UiFrameLayer, UiFrameLayerContext, HostyPresentationLayer, presentationElement } from "./ui-frame-layer.js";
 import { uiPath as normalizeUiPath } from "./ui-transport.js";
 export { HostyAppFrame } from "./ui-frame.js";
 export function useHostyUi() { return ui; }
 export function useHostyUiHost() { return useContext(UiHostContext); }
 /** Internal composition root, owned by HostyOverlay rather than mounted again by domain apps. */
-export function HostyUiRoot({ children, uiPath, panelLayout = "auto", active = true }) {
+export function HostyUiRoot({ children, uiPath, panelLayout = "auto", active = true, chrome, navigation }) {
+    const [layer] = useState(() => new UiFrameLayer());
     const [host, setHost] = useState(null);
     const [environment, setEnvironment] = useState(null);
     const mounted = useRef(false);
@@ -23,9 +28,15 @@ export function HostyUiRoot({ children, uiPath, panelLayout = "auto", active = t
         clientRef.current?.setActive(active);
     }, [active]);
     useEffect(() => {
+        captureChromeHints();
+        const address = new URL(window.location.href);
+        for (const key of ["hosty_navigation", "hosty_tools", "hosty_tool_launcher"])
+            address.searchParams.delete(key);
+        window.history.replaceState(window.history.state, "", address.pathname + address.search + address.hash);
         const path = normalizeUiPath(uiPath);
-        const client = window.parent === window ? createUiHost({ uiPath: path, active: activeRef.current }) : new EmbeddedUiClient(path);
+        const client = window.parent === window ? createUiHost({ uiPath: path, active: activeRef.current, chrome }) : new EmbeddedUiClient(path, chrome);
         client.setActive(activeRef.current);
+        client.composition.attachRouter(navigation?.router);
         clientRef.current = client;
         const release = bindUiClient(client), stop = client.subscribe(event => { if (event.type === "environment")
             setEnvironment(event.value); });
@@ -35,41 +46,89 @@ export function HostyUiRoot({ children, uiPath, panelLayout = "auto", active = t
             setHost(client);
         return () => { stop(); release(); client.dispose(); clientRef.current = null; };
     }, [uiPath]);
+    useEffect(() => { clientRef.current?.composition.configure(chrome ?? {}); }, [chrome]);
+    useEffect(() => { clientRef.current?.composition.attachRouter(navigation?.router); }, [navigation?.router]);
     const allowed = environment?.mode === "standalone" || environment?.connection === "connected" || environment?.connection === "unsupported";
     if (allowed)
         mounted.current = true;
-    return _jsxs(UiHostContext.Provider, { value: host, children: [_jsx("div", { hidden: !allowed, inert: !allowed, style: { display: allowed ? "contents" : "none" }, children: mounted.current && (panelLayout === "auto" && host ? _jsx(HostyPanelWorkspace, { children: children }) : children) }), !allowed && _jsx("div", { role: "status", className: "hosty-panel-notice", style: { padding: 24, font: "14px system-ui" }, children: environment?.connection === "blocked" ? _jsxs(_Fragment, { children: [_jsx("strong", { children: environment.code === "actor_mismatch" ? "Use the same Hosty account in this app and its host" : "Cannot verify this app’s host" }), _jsx("p", { children: "Check your account and access in Hosty Core, then reconnect. Your existing discussion is unchanged." }), _jsx("button", { type: "button", onClick: () => window.location.reload(), children: "Reconnect" })] }) : "Connecting to the workspace…" })] });
+    const content = _jsxs("div", { className: "hosty-app-layout", children: [navigation?.renderer !== "custom" && _jsx(HostyNavigation, {}), _jsxs("div", { className: "hosty-app-content", "data-hosty-content": true, tabIndex: -1, children: [_jsx(HostyToolLauncher, {}), children] })] });
+    return _jsx(UiHostContext.Provider, { value: host, children: _jsx(UiCompositionContext.Provider, { value: clientRef.current?.composition ?? null, children: _jsxs(UiFrameLayerContext.Provider, { value: layer, children: [_jsx("style", { children: `.hosty-app-layout{display:flex;width:100%;height:100%;min-width:0;min-height:0}.hosty-app-content{flex:1;min-width:0;min-height:0;overflow:auto;outline:none}` }), _jsx("div", { hidden: !allowed, inert: !allowed, style: { display: allowed ? "contents" : "none" }, children: mounted.current && (panelLayout === "auto" && host ? _jsx(HostyPanelWorkspace, { children: content }) : content) }), !allowed && _jsx("div", { role: "status", className: "hosty-panel-notice", style: { padding: 24, font: "14px system-ui" }, children: environment?.connection === "blocked" ? _jsxs(_Fragment, { children: [_jsx("strong", { children: environment.code === "actor_mismatch" ? "Use the same Hosty account in this app and its host" : "Cannot verify this app’s host" }), _jsx("p", { children: "Check your account and access in Hosty Core, then reconnect. Your existing discussion is unchanged." }), _jsx("button", { type: "button", onClick: () => window.location.reload(), children: "Reconnect" })] }) : "Connecting to the workspace…" }), host && _jsx(HostyPresentationLayer, { layer: layer, host: host, active: !!allowed })] }) }) });
 }
 const empty = { bootstrap: null, catalog: [], tools: [], selected: null, expanded: false, width: 360, error: null };
 const noop = () => () => { };
 /** A single retained frame tree for dock and drawer; only CSS placement changes at the breakpoint. */
-export function HostyPanelWorkspace({ children, railMode = "opened", className = "", initialWidth, initialExpanded, onWidthChange, onExpandedChange, onStartApp, onAskAssistant, onAuthRequired, outbound, renderIcon }) {
+export function HostyPanelWorkspace({ children, workspaceId = DEFAULT_WORKSPACE, layout = "responsive", railMode = "opened", className = "", initialWidth, initialExpanded, onWidthChange, onExpandedChange, onStartApp, onAskAssistant, onAuthRequired, outbound, renderIcon }) {
     const host = useHostyUiHost();
+    const layer = useContext(UiFrameLayerContext), chrome = useHostyChrome();
+    const viewport = useRef(null);
     const state = useSyncExternalStore(host?.subscribeSnapshot ?? noop, host?.getSnapshot ?? (() => empty), () => empty);
     const unsupported = state.error?.code.startsWith("unsupported") === true;
+    const workspace = state.workspaces?.find(w => w.workspaceId === workspaceId);
+    const workspaceTools = state.tools.filter(t => t.workspaceId === workspaceId);
     const root = useRef(null), content = useRef(null), body = useRef(null), close = useRef(null);
     const opener = useRef(null), panelOpener = useRef(null);
     const [size, setSize] = useState(1200), [chooser, setChooser] = useState(false), [error, setError] = useState(null);
     const chooserRef = useRef(null);
     const bodyId = useId();
-    const workspaceOwner = useRef({});
-    useEffect(() => host?.claimWorkspace(workspaceOwner.current), [host]);
-    const drawer = size < 900, expanded = state.expanded && !!state.selected;
-    const selectedKey = state.selected ? panelKey(state.selected) : null;
-    const tabs = railMode === "catalog" ? state.catalog : state.tools.map(tool => state.catalog.find(p => panelKey(p.panel) === tool.key)).filter((p) => !!p);
+    useEffect(() => {
+        if (!host || !layer)
+            return;
+        const renderer = {
+            frameLayer: layer,
+            async present(instance) { return layer.ensure(instance.presentationId) ? "accepted" : "unavailable"; },
+            focus(id) { presentationElement(id)?.querySelector("iframe")?.focus(); },
+            collapse() { if (chooserRef.current?.open)
+                chooserRef.current.close(); setChooser(false); }, release(id) { layer.release(id); },
+            async showToolPicker(signal) {
+                const dialog = chooserRef.current;
+                if (signal.aborted || !dialog?.isConnected)
+                    return "unavailable";
+                window.dispatchEvent(new CustomEvent("hosty:ui:modal", { detail: `picker:${workspaceId}` }));
+                if (!dialog.open)
+                    dialog.showModal();
+                setChooser(true);
+                return "accepted";
+            },
+        };
+        const release = host.registerWorkspace({ workspaceId, renderer });
+        return () => {
+            for (const tool of host.getSnapshot().tools.filter(t => t.workspaceId === workspaceId))
+                host.closePresentation(tool.presentationId);
+            release();
+        };
+    }, [host, layer, workspaceId]);
+    useLayoutEffect(() => {
+        if (!layer || !viewport.current)
+            return;
+        return layer.register(workspaceId, { element: viewport.current, drawer: layout === "responsive" && size < 900, onAskAssistant, onAuthRequired, outbound });
+    }, [layer, workspaceId, size, layout, onAskAssistant, onAuthRequired, outbound]);
+    useEffect(() => {
+        const onModal = (event) => {
+            const kind = event.detail;
+            if (kind !== `picker:${workspaceId}`)
+                setChooser(false);
+            if (kind === "navigation" || layout === "responsive" && size < 900 && kind !== `tools:${workspaceId}` && kind !== `picker:${workspaceId}`)
+                host?.collapseWorkspace(workspaceId);
+        };
+        window.addEventListener("hosty:ui:modal", onModal);
+        return () => window.removeEventListener("hosty:ui:modal", onModal);
+    }, [host, workspaceId, size, layout]);
+    const drawer = layout === "responsive" && size < 900, expanded = !!workspace?.expanded && !!workspace.selectedId;
+    const tool = workspaceTools.find(t => t.presentationId === workspace?.selectedId);
+    const selectedKey = tool?.key ?? null;
+    const tabs = railMode === "catalog" ? state.catalog : [...new Set(workspaceTools.map(tool => tool.key))].map(key => state.catalog.find(p => panelKey(p.panel) === key)).filter((p) => !!p);
     const selected = state.catalog.find(p => panelKey(p.panel) === selectedKey);
-    const tool = state.tools.find(t => t.key === selectedKey);
-    const width = Math.min(state.width, Math.max(280, size - 480 - 60));
+    const width = Math.min(workspace?.width ?? 360, Math.max(280, size - 480 - 60));
     const optionsRef = useRef({ onWidthChange, onExpandedChange });
     optionsRef.current = { onWidthChange, onExpandedChange };
     useEffect(() => {
         if (!host)
             return;
         if (initialWidth !== undefined)
-            host.setWidth(initialWidth);
+            host.setWidth(initialWidth, workspaceId);
         if (initialExpanded !== undefined)
-            host.setExpanded(initialExpanded);
-    }, [host]);
+            host.setExpanded(initialExpanded, workspaceId);
+    }, [host, workspaceId]);
     useEffect(() => {
         if (!host || railMode !== "catalog")
             return;
@@ -77,18 +136,24 @@ export function HostyPanelWorkspace({ children, railMode = "opened", className =
         let attemptedCatalog = null;
         const restore = () => {
             const current = host.getSnapshot();
-            if (!current.expanded) {
+            const slot = current.workspaces?.find(w => w.workspaceId === workspaceId);
+            if (!slot?.expanded) {
+                completed = false;
                 attemptedCatalog = null;
                 return;
             }
-            if (!live || pending || completed || current.selected || current.catalog === attemptedCatalog)
+            if (completed && !slot.selectedId) {
+                completed = false;
+                attemptedCatalog = null;
+            }
+            if (!live || pending || completed || slot.selectedId || current.catalog === attemptedCatalog)
                 return;
             const first = current.catalog.find(panel => panel.available);
             if (!first)
                 return;
             pending = true;
             attemptedCatalog = current.catalog;
-            void host.selectPanel(first.panel).then(result => { completed = result.status === "opened"; })
+            void host.selectPanel(first.panel, workspaceId).then(result => { completed = result.status === "opened"; })
                 .finally(() => { pending = false; restore(); });
         };
         // A refusal consumes only this catalog generation. A refresh can retry, including one
@@ -96,17 +161,19 @@ export function HostyPanelWorkspace({ children, railMode = "opened", className =
         const stop = host.subscribeSnapshot(restore);
         restore();
         return () => { live = false; stop(); };
-    }, [host, railMode]);
+    }, [host, railMode, workspaceId]);
     const lastPrefs = useRef({ width: initialWidth ?? 360, expanded: initialExpanded ?? false });
     useEffect(() => {
         if (!host || state !== host.getSnapshot())
             return;
-        if (state.width !== lastPrefs.current.width)
-            optionsRef.current.onWidthChange?.(state.width);
-        if (state.expanded !== lastPrefs.current.expanded)
-            optionsRef.current.onExpandedChange?.(state.expanded);
-        lastPrefs.current = { width: state.width, expanded: state.expanded };
-    }, [host, state.width, state.expanded]);
+        if (!workspace)
+            return;
+        if (workspace.width !== lastPrefs.current.width)
+            optionsRef.current.onWidthChange?.(workspace.width);
+        if (workspace.expanded !== lastPrefs.current.expanded)
+            optionsRef.current.onExpandedChange?.(workspace.expanded);
+        lastPrefs.current = { width: workspace.width, expanded: workspace.expanded };
+    }, [host, state, workspace]);
     useLayoutEffect(() => {
         if (!root.current)
             return;
@@ -126,33 +193,40 @@ export function HostyPanelWorkspace({ children, railMode = "opened", className =
     useLayoutEffect(() => {
         if (!expanded || !drawer)
             return;
+        window.dispatchEvent(new CustomEvent("hosty:ui:modal", { detail: `tools:${workspaceId}` }));
         opener.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
         close.current?.focus();
-        const dismiss = () => host?.setExpanded(false);
+        const dismiss = (event) => { if (event.detail === workspaceId)
+            host?.setExpanded(false, workspaceId); };
         window.addEventListener("hosty:ui:drawer-dismiss", dismiss);
         return () => { window.removeEventListener("hosty:ui:drawer-dismiss", dismiss); if (opener.current?.isConnected)
             opener.current.focus(); };
-    }, [expanded, drawer, host]);
+    }, [expanded, drawer, host, workspaceId]);
     useEffect(() => {
         if (expanded && tool?.readiness === "ready")
-            body.current?.querySelector(".hosty-panel-frame:not([hidden]) iframe")?.focus();
-    }, [expanded, selectedKey, tool?.readiness]);
+            presentationElement(workspace?.selectedId ?? "")?.querySelector("iframe")?.focus();
+    }, [expanded, workspace?.selectedId, tool?.readiness]);
     useEffect(() => {
         const dialog = chooserRef.current;
-        if (!chooser || !dialog)
+        if (!dialog)
             return;
-        dialog.showModal();
+        if (chooser && !dialog.open) {
+            window.dispatchEvent(new CustomEvent("hosty:ui:modal", { detail: `picker:${workspaceId}` }));
+            dialog.showModal();
+        }
+        else if (!chooser && dialog.open)
+            dialog.close();
         return () => { if (dialog.open)
             dialog.close(); };
-    }, [chooser]);
+    }, [chooser, workspaceId]);
     async function select(panel) {
         if (!host)
             return;
         if (expanded && selectedKey === panelKey(panel.panel)) {
-            host.setExpanded(false);
+            host.setExpanded(false, workspaceId);
             return;
         }
-        const result = await host.selectPanel(panel.panel);
+        const result = await host.selectPanel(panel.panel, workspaceId);
         if (result.status !== "opened")
             setError(panel.available ? "Could not open this tool. Try again." : `${panel.appName} is ${panel.state}.`);
         else {
@@ -163,51 +237,54 @@ export function HostyPanelWorkspace({ children, railMode = "opened", className =
     const resize = (event) => {
         const start = event.clientX, old = width, handle = event.currentTarget;
         handle.setPointerCapture(event.pointerId);
-        const move = (next) => host?.setWidth(Math.min(size - 540, old + start - next.clientX));
+        const move = (next) => host?.setWidth(Math.min(size - 540, old + start - next.clientX), workspaceId);
         const end = () => { handle.removeEventListener("pointermove", move); handle.removeEventListener("pointerup", end); handle.removeEventListener("lostpointercapture", end); };
         handle.addEventListener("pointermove", move);
         handle.addEventListener("pointerup", end);
         handle.addEventListener("lostpointercapture", end);
     };
-    return _jsxs("div", { ref: root, className: `hosty-panel-workspace ${className}`, "data-hosty-panel-layout": drawer ? "drawer" : "dock", style: { "--hosty-panel-width": `${width}px`, ...(unsupported ? { display: "contents" } : {}) }, children: [_jsx("style", { children: styles }), _jsx("div", { ref: content, className: "hosty-panel-document", style: unsupported ? { display: "contents" } : undefined, inert: expanded && drawer, children: children }), _jsxs("nav", { className: "hosty-panel-rail", "aria-label": "Tools", style: unsupported ? { display: "none" } : undefined, inert: unsupported || expanded && drawer, children: [tabs.map((panel, index) => _jsxs("button", { type: "button", title: `${panel.appName}: ${panel.label}`, "aria-label": panel.label, "aria-controls": bodyId, "aria-expanded": expanded && selectedKey === panelKey(panel.panel), onClick: () => void select(panel), onKeyDown: event => {
+    return _jsxs("div", { ref: root, className: `hosty-panel-workspace ${className}`, "data-hosty-panel-layout": drawer ? "drawer" : "dock", style: { "--hosty-panel-width": `${width}px`, ...(unsupported ? { display: "contents" } : {}) }, children: [_jsx("style", { children: styles }), _jsx("div", { ref: content, className: "hosty-panel-document", style: unsupported ? { display: "contents" } : undefined, inert: expanded && drawer, children: children }), _jsxs("nav", { className: "hosty-panel-rail", "aria-label": "Tools", style: unsupported || !chrome.tools.enabled || chrome.tools.launcher === "hide" ? { display: "none" } : undefined, inert: unsupported || expanded && drawer, children: [tabs.map((panel, index) => _jsxs("button", { type: "button", title: `${panel.appName}: ${panel.label}`, "aria-label": panel.label, "aria-controls": bodyId, "aria-expanded": expanded && selectedKey === panelKey(panel.panel), onClick: () => void select(panel), onKeyDown: event => {
                             const delta = event.key === "ArrowDown" ? 1 : event.key === "ArrowUp" ? -1 : 0;
                             const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : delta ? (index + delta + tabs.length) % tabs.length : null;
                             if (next !== null) {
                                 event.preventDefault();
                                 event.currentTarget.parentElement?.children[next]?.focus();
                             }
-                        }, children: [renderIcon?.(panel) ?? panel.label.slice(0, 2), state.tools.find(t => t.key === panelKey(panel.panel))?.attention ? _jsx("span", { className: "hosty-panel-attention", "aria-label": "Needs attention", children: "\u2022" }) : null] }, panelKey(panel.panel))), _jsx("button", { type: "button", "aria-label": "Add tool", title: "Add tool", onClick: () => { setError(null); setChooser(true); void host?.refresh(); }, children: "+" })] }), expanded && drawer && _jsx("button", { type: "button", className: "hosty-panel-backdrop", "aria-label": "Return to document", onClick: () => host?.setExpanded(false) }), _jsxs("aside", { ref: body, id: bodyId, className: "hosty-panel-body", hidden: !expanded, inert: !expanded, role: drawer ? "dialog" : "complementary", "aria-modal": drawer && expanded ? true : undefined, "aria-label": selected?.label ?? "Tool", onKeyDown: event => {
+                        }, children: [renderIcon?.(panel) ?? panel.label.slice(0, 2), workspaceTools.some(t => t.key === panelKey(panel.panel) && t.attention > 0) ? _jsx("span", { className: "hosty-panel-attention", "aria-label": "Needs attention", children: "\u2022" }) : null] }, panelKey(panel.panel))), _jsx("button", { type: "button", "aria-label": "Add tool", title: "Add tool", onClick: () => { setError(null); setChooser(true); void host?.refresh(); }, children: "+" })] }), expanded && drawer && _jsx("button", { type: "button", className: "hosty-panel-backdrop", "aria-label": "Return to document", onClick: () => host?.setExpanded(false, workspaceId) }), _jsxs("aside", { ref: body, id: bodyId, className: "hosty-panel-body", hidden: !expanded, inert: !expanded, role: drawer ? "dialog" : "complementary", "aria-modal": drawer && expanded ? true : undefined, "aria-label": selected?.label ?? "Tool", onKeyDown: event => {
                     if (!drawer)
                         return;
                     if (event.key === "Escape") {
                         event.preventDefault();
-                        host?.setExpanded(false);
+                        host?.setExpanded(false, workspaceId);
                     }
                     if (event.key === "Tab") {
-                        const focusable = Array.from(body.current?.querySelectorAll('button,a[href],iframe,[tabindex="0"]') ?? []).filter(e => !e.closest("[hidden]") && !e.disabled);
+                        const focusable = Array.from(body.current?.querySelectorAll('button,a[href],select,[tabindex="0"]') ?? []).filter(e => !e.closest("[hidden]") && !e.classList.contains("hosty-panel-focus-guard") && !e.disabled);
                         const first = focusable[0], last = focusable.at(-1);
+                        const frame = presentationElement(workspace?.selectedId ?? "")?.querySelector("iframe");
                         if (event.shiftKey && document.activeElement === first) {
                             event.preventDefault();
-                            last?.focus();
+                            (frame ?? last)?.focus();
                         }
                         else if (!event.shiftKey && document.activeElement === last) {
                             event.preventDefault();
-                            first?.focus();
+                            (frame ?? first)?.focus();
                         }
                     }
-                }, children: [drawer && expanded && _jsx("span", { tabIndex: 0, "aria-hidden": "true", className: "hosty-panel-focus-guard", onFocus: () => body.current?.querySelector(".hosty-panel-frame:not([hidden]) iframe")?.focus() }), _jsx("div", { className: "hosty-panel-resize", role: "separator", "aria-label": "Tool panel width", "aria-orientation": "vertical", tabIndex: drawer ? -1 : 0, "aria-valuemin": 280, "aria-valuemax": Math.max(280, Math.min(800, size - 540)), "aria-valuenow": width, onPointerDown: resize, onDoubleClick: () => host?.setWidth(360), onKeyDown: event => {
+                }, children: [drawer && expanded && _jsx("span", { tabIndex: 0, "aria-hidden": "true", className: "hosty-panel-focus-guard", onFocus: () => presentationElement(workspace?.selectedId ?? "")?.querySelector("iframe")?.focus() }), _jsx("div", { className: "hosty-panel-resize", role: "separator", "aria-label": "Tool panel width", "aria-orientation": "vertical", tabIndex: drawer ? -1 : 0, "aria-valuemin": 280, "aria-valuemax": Math.max(280, Math.min(800, size - 540)), "aria-valuenow": width, onPointerDown: resize, onDoubleClick: () => host?.setWidth(360, workspaceId), onKeyDown: event => {
                             if (event.key === "Home") {
                                 event.preventDefault();
-                                host?.setWidth(360);
+                                host?.setWidth(360, workspaceId);
                             }
                             if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
                                 event.preventDefault();
-                                host?.setWidth(width + (event.key === "ArrowLeft" ? 16 : -16));
+                                host?.setWidth(width + (event.key === "ArrowLeft" ? 16 : -16), workspaceId);
                             }
-                        } }), _jsxs("header", { children: [_jsx("strong", { children: selected?.label ?? "Tool" }), tool?.resolved.standaloneHref && _jsx("a", { href: tool.resolved.standaloneHref, target: "_blank", rel: "noopener noreferrer", title: "Open separately", "aria-label": "Open separately", children: "\u2197" }), _jsx("button", { ref: close, type: "button", onClick: () => host?.setExpanded(false), "aria-label": "Return to document", title: "Return to document", children: "\u00D7" })] }), tool?.resolved.state === "degraded" && _jsx("div", { className: "hosty-panel-state", role: "status", children: "This app\u2019s health check is failing. Its page may still work." }), tool?.readiness === "unreported" && _jsxs("div", { className: "hosty-panel-state", role: "status", children: ["This tool has not confirmed that it loaded. If the page is blank or refuses to connect, use ", _jsx("a", { href: tool.resolved.standaloneHref ?? undefined, target: "_blank", rel: "noopener noreferrer", children: "Open separately" }), "."] }), tool?.readiness === "auth-required" && _jsx("div", { className: "hosty-panel-state", role: "status", children: "Check access in the tool below, then retry opening the discussion." }), state.tools.map(item => _jsx("div", { className: "hosty-panel-frame", hidden: item.key !== selectedKey, inert: item.key !== selectedKey, children: item.resolved.surface ? _jsx(HostyAppFrame, { surface: { ...item.resolved.surface, panelId: item.target.panel.panelId }, title: state.catalog.find(p => panelKey(p.panel) === item.key)?.label ?? "Tool", standaloneHref: item.resolved.standaloneHref, onAskAssistant: onAskAssistant, onAuthRequired: onAuthRequired, onAttention: count => host?.setAttention(item.target.panel, count), outbound: outbound && panelKey(outbound.target.panel) === item.key && outbound.target.route === item.target.route ? outbound : null }, JSON.stringify(item.resolved.surface))
-                            : _jsxs("div", { className: "hosty-panel-notice", children: [_jsxs("p", { children: ["This tool is unavailable (", item.resolved.state, ")."] }), _jsx("button", { type: "button", onClick: () => void host?.selectPanel(item.target.panel), children: "Retry opening" })] }) }, item.key)), drawer && expanded && _jsx("span", { tabIndex: 0, "aria-hidden": "true", className: "hosty-panel-focus-guard", onFocus: () => close.current?.focus() })] }), chooser && _jsxs("dialog", { ref: chooserRef, className: "hosty-tool-chooser", onCancel: () => setChooser(false), "aria-label": "Add tool", children: [_jsxs("header", { children: [_jsx("strong", { children: "Add tool" }), _jsx("button", { type: "button", onClick: () => setChooser(false), "aria-label": "Close tool chooser", children: "\u00D7" })] }), _jsx("p", { children: "Open a tool beside your document." }), error && _jsx("p", { role: "status", children: error }), state.error && _jsx("p", { role: "status", children: state.error.message }), !state.bootstrap?.canHost && _jsx("p", { children: "This app needs optional panel access in Hosty Core to show tools here. You can still use the app." }), state.bootstrap?.canHost && !state.catalog.length && _jsx("p", { children: "No tools are available for your account." }), _jsx("ul", { children: state.catalog.map(panel => _jsxs("li", { children: [_jsxs("button", { type: "button", onClick: () => void select(panel), children: [_jsx("strong", { children: panel.label }), _jsxs("span", { children: [panel.appName, panel.available ? "" : ` · ${panel.state}`] })] }), !panel.available && panel.canStart && onStartApp && _jsx("button", { type: "button", onClick: () => void Promise.resolve(onStartApp(panel.panel.appId)).then(() => host?.refresh()), children: "Start app" })] }, panelKey(panel.panel))) }), _jsx("button", { type: "button", onClick: () => void host?.refresh(), children: "Refresh tools" })] }), error && !chooser && _jsxs("div", { className: "hosty-panel-error", role: "status", children: [error, " ", _jsx("button", { type: "button", onClick: () => { setChooser(true); setError(null); }, children: "Choose tool" })] })] });
+                        } }), _jsxs("header", { children: [_jsx("strong", { children: selected?.label ?? "Tool" }), tool?.resolved.standaloneHref && _jsx("a", { href: tool.resolved.standaloneHref, target: "_blank", rel: "noopener noreferrer", title: "Open separately", "aria-label": "Open separately", children: "\u2197" }), _jsx("button", { ref: close, type: "button", onClick: () => host?.setExpanded(false, workspaceId), "aria-label": "Return to document", title: "Return to document", children: "\u00D7" })] }), tool?.resolved.state === "degraded" && _jsx("div", { className: "hosty-panel-state", role: "status", children: "This app\u2019s health check is failing. Its page may still work." }), tool?.readiness === "unreported" && _jsxs("div", { className: "hosty-panel-state", role: "status", children: ["This tool has not confirmed that it loaded. If the page is blank or refuses to connect, use ", _jsx("a", { href: tool.resolved.standaloneHref ?? undefined, target: "_blank", rel: "noopener noreferrer", children: "Open separately" }), "."] }), tool?.readiness === "auth-required" && _jsx("div", { className: "hosty-panel-state", role: "status", children: "Check access in the tool below, then retry opening the discussion." }), tool && workspaceTools.filter(t => t.key === tool.key).length > 1 && _jsxs("label", { className: "hosty-panel-state", children: ["Open views", _jsx("select", { "aria-label": "Tool instance", value: tool.presentationId, onChange: event => host?.focusPresentation(event.target.value), children: workspaceTools.filter(t => t.key === tool.key).map((item, index) => _jsxs("option", { value: item.presentationId, children: [selected?.label ?? "Tool", " ", index + 1] }, item.presentationId)) })] }), tool && _jsx("button", { type: "button", className: "hosty-panel-state", onClick: () => host?.closePresentation(tool.presentationId), children: "Close this tool view" }), _jsx("div", { ref: viewport, className: "hosty-panel-viewport", "aria-owns": tool ? `hosty-presentation-${tool.presentationId}` : undefined }), drawer && expanded && _jsx("span", { tabIndex: 0, "aria-hidden": "true", className: "hosty-panel-focus-guard", onFocus: () => close.current?.focus() })] }), _jsxs("dialog", { ref: chooserRef, className: "hosty-tool-chooser", onCancel: () => setChooser(false), "aria-label": "Add tool", children: [_jsxs("header", { children: [_jsx("strong", { children: "Add tool" }), _jsx("button", { type: "button", onClick: () => setChooser(false), "aria-label": "Close tool chooser", children: "\u00D7" })] }), _jsx("p", { children: "Open a tool beside your document." }), error && _jsx("p", { role: "status", children: error }), state.error && _jsx("p", { role: "status", children: state.error.message }), !state.bootstrap?.canHost && _jsx("p", { children: "This app needs optional panel access in Hosty Core to show tools here. You can still use the app." }), state.bootstrap?.canHost && !state.catalog.length && _jsx("p", { children: "No tools are available for your account." }), _jsx("ul", { children: state.catalog.map(panel => _jsxs("li", { children: [_jsxs("button", { type: "button", onClick: () => void select(panel), children: [_jsx("strong", { children: panel.label }), _jsxs("span", { children: [panel.appName, panel.available ? "" : ` · ${panel.state}`] })] }), !panel.available && panel.canStart && onStartApp && _jsx("button", { type: "button", onClick: () => void Promise.resolve(onStartApp(panel.panel.appId)).then(() => host?.refresh()), children: "Start app" })] }, panelKey(panel.panel))) }), _jsx("button", { type: "button", onClick: () => void host?.refresh(), children: "Refresh tools" })] }), error && !chooser && _jsxs("div", { className: "hosty-panel-error", role: "status", children: [error, " ", _jsx("button", { type: "button", onClick: () => { setChooser(true); setError(null); }, children: "Choose tool" })] })] });
 }
 const styles = `
+.hosty-panel-viewport{flex:1;min-height:0;min-width:0}
+.hosty-app-layout{display:flex;width:100%;height:100%;min-width:0;min-height:0}.hosty-app-content{flex:1;min-width:0;min-height:0;overflow:auto}
+
 .hosty-panel-workspace{--hp-bg:#f8f9fb;--hp-fg:#20242c;--hp-muted:#606875;--hp-border:#e0e4eb;display:flex;position:relative;min-width:0;min-height:0;width:100%;height:100dvh;overflow:hidden;background:var(--hp-bg);color:var(--hp-fg)}
 html.dark .hosty-panel-workspace,html[data-hosty-theme=dark] .hosty-panel-workspace{--hp-bg:#14171c;--hp-fg:#f0f2f5;--hp-muted:#a2aab7;--hp-border:#323843}
 .hosty-panel-document{flex:1;min-width:0;min-height:0;overflow:auto}.hosty-panel-rail{order:3;flex:0 0 48px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0;border-left:1px solid var(--hp-border);overflow:auto}
@@ -219,7 +296,7 @@ html.dark .hosty-panel-workspace,html[data-hosty-theme=dark] .hosty-panel-worksp
 .hosty-panel-focus-guard{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .hosty-panel-frame{position:relative;flex:1;min-height:0;overflow:hidden}.hosty-panel-frame iframe{display:block}.hosty-panel-resize{position:absolute;left:-12px;top:0;bottom:0;width:12px;cursor:col-resize;touch-action:none}.hosty-panel-resize:hover{background:color-mix(in srgb,var(--hp-fg) 8%,transparent)}
 .hosty-panel-state{padding:8px 12px;font:12px/1.4 system-ui;border-bottom:1px solid var(--hp-border);color:var(--hp-muted)}.hosty-panel-state a{text-decoration:underline}
-.hosty-panel-workspace[data-hosty-panel-layout=drawer] .hosty-panel-body{position:absolute;inset:0 0 0 auto;width:min(440px,100%);z-index:3;margin:0;box-shadow:-8px 0 30px #0002}.hosty-panel-workspace[data-hosty-panel-layout=drawer] .hosty-panel-resize{display:none}
-.hosty-panel-backdrop{position:absolute;inset:0;border:0;background:#0005;z-index:2;cursor:pointer}.hosty-panel-notice{padding:24px;font:14px/1.5 system-ui}.hosty-panel-review{position:absolute;top:8px;right:8px;z-index:2;padding:10px;background:var(--hp-bg);border:1px solid var(--hp-border);border-radius:8px}
+.hosty-panel-workspace[data-hosty-panel-layout=drawer] .hosty-panel-body{position:absolute;inset:0 0 0 auto;width:min(440px,100%);z-index:102;margin:0;box-shadow:-8px 0 30px #0002}.hosty-panel-workspace[data-hosty-panel-layout=drawer] .hosty-panel-resize{display:none}
+.hosty-panel-backdrop{position:absolute;inset:0;border:0;background:#0005;z-index:101;cursor:pointer}.hosty-panel-notice{padding:24px;font:14px/1.5 system-ui}.hosty-panel-review{position:absolute;top:8px;right:8px;z-index:2;padding:10px;background:var(--hp-bg);border:1px solid var(--hp-border);border-radius:8px}
 .hosty-tool-chooser{width:min(440px,calc(100vw - 32px));max-height:80dvh;border:1px solid var(--hp-border);border-radius:12px;padding:16px;background:var(--hp-bg);color:var(--hp-fg);font:14px/1.5 system-ui}.hosty-tool-chooser::backdrop{background:#0005}.hosty-tool-chooser ul{list-style:none;padding:0;display:grid;gap:8px}.hosty-tool-chooser li{display:flex;gap:8px}.hosty-tool-chooser li>button{flex:1;border:1px solid var(--hp-border);background:transparent;color:inherit;border-radius:8px;padding:12px;text-align:left;cursor:pointer}.hosty-tool-chooser li span{display:block;color:var(--hp-muted);font-size:12px}.hosty-panel-error{position:absolute;bottom:16px;right:60px;z-index:4;background:var(--hp-bg);border:1px solid var(--hp-border);border-radius:8px;padding:12px;font:13px system-ui}
 `;

package/dist/ui-server.d.ts

@@ -1,5 +1,5 @@
 import type { ProviderServerOptions } from "@hosty-sdk/app/providers/server";
-import { type PanelTarget, type UiBootstrap, type UiPanel, type UiResolvedPanel } from "@hosty-sdk/app/ui/types";
+import { type PanelTarget, type UiBootstrap, type UiPanel, type UiResolvedPanel, type UiNavigationCatalog, type UiNavigationTarget, type UiResolvedNavigation } from "@hosty-sdk/app/ui/types";
 /** Server transport for generic UI metadata. Credentials never appear in returned metadata. */
 export declare class UiServerClient {
     private readonly appId;
@@ -11,6 +11,8 @@ export declare class UiServerClient {
         parentOrigin?: string;
     }, token: string, signal?: AbortSignal): Promise<UiBootstrap>;
     listPanels(token: string, signal?: AbortSignal): Promise<UiPanel[]>;
+    navigation(token: string, signal?: AbortSignal): Promise<UiNavigationCatalog>;
+    resolveNavigation(target: UiNavigationTarget, token: string, signal?: AbortSignal): Promise<UiResolvedNavigation>;
     resolvePanel(target: PanelTarget, token: string, signal?: AbortSignal): Promise<UiResolvedPanel>;
 }
 type UiAuthenticatedContext = {

package/dist/ui-server.js

@@ -35,6 +35,12 @@ export class UiServerClient {
     async listPanels(token, signal) {
         return (await this.request("panels", token, undefined, signal)).panels;
     }
+    navigation(token, signal) {
+        return this.request("navigation", token, undefined, signal);
+    }
+    resolveNavigation(target, token, signal) {
+        return this.request("navigation/resolve", token, target, signal);
+    }
     resolvePanel(target, token, signal) {
         return this.request("panels/resolve", token, target, signal);
     }
@@ -62,11 +68,17 @@ export async function createHostyUiResponse(request, context, options = {}) {
         else if (request.method === "GET" && route === "panels") {
             result = { panels: await client.listPanels(context.token, request.signal) };
         }
-        else if (request.method === "POST" && route === "panels/resolve") {
+        else if (request.method === "GET" && route === "navigation") {
+            if (url.search)
+                throw new UiError("ui_request_invalid", "Unexpected navigation parameters.", 400);
+            result = await client.navigation(context.token, request.signal);
+        }
+        else if (request.method === "POST" && (route === "panels/resolve" || route === "navigation/resolve")) {
             if (!sameOrigin(request) || request.headers.get("content-type")?.split(";", 1)[0]?.trim() !== "application/json")
                 throw new UiError("origin_denied", "Open panels from this application page.", 403);
             const body = await boundedBody(request);
-            result = await client.resolvePanel(JSON.parse(body), context.token, request.signal);
+            result = route === "panels/resolve" ? await client.resolvePanel(JSON.parse(body), context.token, request.signal)
+                : await client.resolveNavigation(JSON.parse(body), context.token, request.signal);
         }
         else
             throw new UiError("ui_route_not_found", "Unknown panel operation.", 404);

package/dist/ui-transport.d.ts

@@ -1,4 +1,4 @@
-import { type PanelTarget, type PresentationResult } from "./ui-types.js";
+import { type PanelTarget, type PresentationResult, type UiActionResult } from "./ui-types.js";
 export declare const UI_VERSION = 1;
 export declare const DISCOVERY_TIMEOUT = 5000;
 export declare const RESPONSE_TIMEOUT = 10000;
@@ -13,4 +13,4 @@ export declare function validTarget(value: unknown): value is PanelTarget;
 export declare function uiPath(path?: string): string;
 export declare function uiRequest<T>(path: string, suffix: string, body?: unknown): Promise<T>;
 export declare function failure(requestId: string, error: unknown): PresentationResult;
-export declare function waitForPresentation(operation: Promise<PresentationResult>, requestId: string, signal?: AbortSignal): Promise<PresentationResult>;
+export declare function waitForPresentation<T extends PresentationResult | UiActionResult>(operation: Promise<T>, requestId: string, signal?: AbortSignal): Promise<T>;

package/dist/ui-transport.js

@@ -21,7 +21,7 @@ export function canonicalSurfaceRoute(value) {
     if (!isSurfaceRoute(value))
         return null;
     const route = new URL(value, "https://surface.invalid");
-    for (const key of ["hosty_launch", "hosty_theme", "hosty_theme_preference"])
+    for (const key of ["hosty_launch", "hosty_theme", "hosty_theme_preference", "hosty_navigation", "hosty_tools", "hosty_tool_launcher"])
         route.searchParams.delete(key);
     return `${route.pathname}${route.search}${route.hash}`;
 }