@hosty-sdk/app 0.31.0 → 0.34.1

package/dist/ui-embedded.d.ts

@@ -1,5 +1,5 @@
 import { UiCompositionModel } from "./ui-composition.js";
-import { type UiChromeOverrides, type UiActionOptions, type UiActionResult } from "./ui-types.js";
+import { type UiNavigationOptions, type UiChromeOverrides, type UiActionOptions, type UiActionResult } from "./ui-types.js";
 import { type UiClient } from "./ui.js";
 import { type PanelTarget, type PresentationOptions, type PresentationResult, type UiEnvironment, type UiEvent } from "./ui-types.js";
 /** Direct-child transport. Discovery carries no identity and never creates a fallback host. */
@@ -19,6 +19,7 @@ export declare class EmbeddedUiClient implements UiClient {
     private state;
     private active;
     private offered;
+    private mainNavigation;
     private readonly onMessage;
     private readonly onFocus;
     private readonly onKey;
@@ -51,7 +52,7 @@ export declare class EmbeddedUiClient implements UiClient {
         signal?: AbortSignal;
     }) => Promise<PresentationResult>;
     openToolPicker: (options: UiActionOptions) => Promise<UiActionResult>;
-    navigate: (entryKey: string, options: UiActionOptions) => Promise<UiActionResult>;
+    navigate: (entryKey: string, options: UiNavigationOptions) => Promise<UiActionResult>;
     private reportRoute;
     reportSurfaceState: (state: {
         route: string;

package/dist/ui-embedded.js

@@ -1,5 +1,5 @@
 import { activeNavigationKey, UiCompositionModel } from "./ui-composition.js";
-import { UI_COMPOSITION_CAPABILITY } from "./ui-types.js";
+import { UI_COMPOSITION_CAPABILITY, UI_MAIN_NAVIGATION_CAPABILITY, navigationSearch } from "./ui-types.js";
 import { createPresentationRequestId } from "./ui.js";
 import { UiError } from "./ui-types.js";
 import { canonicalSurfaceRoute, DISCOVERY_TIMEOUT, failure, readUiMessage, uiRequest, validId, validTarget, waitForPresentation } from "./ui-transport.js";
@@ -20,6 +20,7 @@ export class EmbeddedUiClient {
     state = null;
     active = true;
     offered = false;
+    mainNavigation = false;
     onMessage = (event) => { void this.receive(event); };
     onFocus = () => { void this.recheck(); };
     onKey = (event) => { if (this.active && !event.defaultPrevented && event.key === "Escape")
@@ -200,6 +201,7 @@ export class EmbeddedUiClient {
                 return;
             }
             clearTimeout(this.deadline);
+            this.mainNavigation = Array.isArray(msg.capabilities) && msg.capabilities.includes(UI_MAIN_NAVIGATION_CAPABILITY);
             this.setEnvironment("connected");
             if (Array.isArray(msg.capabilities) && msg.capabilities.includes(UI_COMPOSITION_CAPABILITY)) {
                 this.composition.setHostPolicy(channel.generation, msg.revision, msg.chrome, msg.rootDisabled === true, msg.endpoint);
@@ -234,7 +236,7 @@ export class EmbeddedUiClient {
         if (signal?.aborted)
             return { status: "uncertain", requestId, code: "presentation_unknown" };
         const target = message.target;
-        const input = message.type === "hosty:ui:status" ? null : JSON.stringify([message.type, target?.panel ?? null, target?.route ?? null, message.reuse ?? "exact", message.entryKey ?? null]);
+        const input = message.type === "hosty:ui:status" ? null : JSON.stringify([message.type, target?.panel ?? null, target?.route ?? null, message.reuse ?? "exact", message.entryKey ?? null, message.search ?? null]);
         if (this.localActions.has(requestId))
             return { status: "rejected", requestId, code: "request_conflict" };
         const existing = this.pending.get(requestId);
@@ -255,7 +257,7 @@ export class EmbeddedUiClient {
             return { status: "blocked", requestId, code: "presentation_busy" };
         let settle;
         const operation = new Promise(resolve => { settle = resolve; });
-        const entry = { kind: message.type === "hosty:ui:picker" || message.type === "hosty:ui:navigate" ? "action" : "presentation", input, operation, waiters: 0, sent: false, resolve: result => {
+        const entry = { kind: message.type === "hosty:ui:picker" || message.type === "hosty:ui:navigate" || message.type === "hosty:ui:navigate-main" ? "action" : "presentation", input, operation, waiters: 0, sent: false, resolve: result => {
                 if (this.pending.get(requestId) === entry)
                     this.pending.delete(requestId);
                 settle(result);
@@ -302,6 +304,13 @@ export class EmbeddedUiClient {
         return this.request(options.requestId, { type: "hosty:ui:picker" }, options.signal);
     };
     navigate = (entryKey, options) => {
+        if (options.placement === "main") {
+            if (!navigationSearch(options.search))
+                return Promise.resolve({ status: "rejected", requestId: options.requestId, code: "destination_invalid" });
+            if (!this.mainNavigation)
+                return Promise.resolve({ status: "unsupported", requestId: options.requestId, code: "main_navigation_unavailable" });
+            return this.request(options.requestId, { type: "hosty:ui:navigate-main", entryKey, search: options.search }, options.signal);
+        }
         const id = options.requestId, existing = this.localActions.get(id);
         if (!validId(id))
             return Promise.resolve({ status: "rejected", requestId: id, code: "invalid_presentation" });

package/dist/ui-frame-layer.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SdkChromeStyles } from "./sdk-chrome.js";
 import { createContext, useEffect, useLayoutEffect, useSyncExternalStore } from "react";
 import { HostyAppFrame } from "./ui-frame.js";
 import { createPortal } from "react-dom";
@@ -83,6 +84,6 @@ export function HostyPresentationLayer({ layer, host, active }) {
                 return createPortal(_jsxs(_Fragment, { children: [viewport?.drawer && _jsx("span", { tabIndex: 0, "aria-hidden": "true", className: "hosty-panel-focus-guard", onFocus: () => focusControls(true) }), surface ? _jsx(HostyAppFrame, { surface: { ...surface, panelId: tool.target.panel.panelId }, view: { viewId: `tool-${tool.presentationId}`, workspaceId: tool.workspaceId, presentationId: tool.presentationId, chrome: { navigation: "hide", tools: { launcher: "hide" } } }, title: state.catalog.find(p => panelKey(p.panel) === tool.key)?.label ?? "Tool", standaloneHref: tool.resolved.standaloneHref, onAskAssistant: viewport?.onAskAssistant, onAuthRequired: viewport?.onAuthRequired, onAttention: count => host.setAttention(tool.presentationId, count), outbound: viewport?.outbound && panelKey(viewport.outbound.target.panel) === tool.key
                                 && (viewport.outbound.presentationId ? viewport.outbound.presentationId === tool.presentationId
                                     : workspace?.selectedId === tool.presentationId && viewport.outbound.target.route === tool.currentRoute) ? viewport.outbound : null })
-                            : _jsxs("div", { className: "hosty-panel-notice", role: "status", children: ["This tool is unavailable (", tool.resolved.state, ")."] }), viewport?.drawer && _jsx("span", { tabIndex: 0, "aria-hidden": "true", className: "hosty-panel-focus-guard", onFocus: () => focusControls(false) })] }), container, tool.presentationId);
+                            : _jsxs("div", { "data-hosty-sdk": true, className: "hosty-panel-notice", role: "status", children: [_jsx(SdkChromeStyles, {}), "This tool is unavailable (", tool.resolved.state, ")."] }), viewport?.drawer && _jsx("span", { tabIndex: 0, "aria-hidden": "true", className: "hosty-panel-focus-guard", onFocus: () => focusControls(false) })] }), container, tool.presentationId);
             })] });
 }

package/dist/ui-frame.js

@@ -1,5 +1,6 @@
 "use client";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SdkChromeStyles } from "./sdk-chrome.js";
 import { useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { UiHostContext } from "./ui-context.js";
 import { appendThemeLaunchParams, parseActiveFrameAskAssistant, parseActiveFrameAttention, parseActiveFrameAuthRequired, parseActiveFramePermissionReview } from "./embedder.js";
@@ -135,6 +136,6 @@ export function HostyAppFrame(props) {
     }, [outboundReady, connection.generation, props.outbound?.nonce, surface.origin]);
     const insecure = typeof window !== "undefined" && window.location.protocol === "https:" && new URL(surface.origin).protocol === "http:";
     if (insecure)
-        return _jsxs("div", { role: "status", className: "hosty-panel-notice", children: [_jsxs("strong", { children: [title, " needs HTTPS to appear here"] }), _jsx("p", { children: "This app publishes an HTTP address. Configure its public HTTPS origin in Hosty." }), /^(localhost|127\.|\[::1\])/.test(new URL(surface.origin).hostname) && _jsx("p", { children: "This local address is reachable only from the Hosty computer." }), standaloneHref && _jsx("a", { href: standaloneHref, target: "_blank", rel: "noopener noreferrer", children: "Open separately" })] });
-    return _jsxs(_Fragment, { children: [review && _jsx("a", { className: "hosty-panel-review", href: review, target: "_blank", rel: "noopener noreferrer", children: "Review access in Core" }), _jsx("iframe", { ref: ref, className: className, title: title, src: launch, sandbox: frameSandbox(surface.framePolicy), allow: surface.framePolicy.microphone ? "clipboard-write; microphone 'src'" : "clipboard-write", style: { border: 0, height: "100%", width: "100%", colorScheme: resolvedTheme }, onLoad: () => setLoaded(true) })] });
+        return _jsxs("div", { "data-hosty-sdk": true, role: "status", className: "hosty-panel-notice", children: [_jsx(SdkChromeStyles, {}), _jsxs("strong", { children: [title, " needs HTTPS to appear here"] }), _jsx("p", { children: "This app publishes an HTTP address. Configure its public HTTPS origin in Hosty." }), /^(localhost|127\.|\[::1\])/.test(new URL(surface.origin).hostname) && _jsx("p", { children: "This local address is reachable only from the Hosty computer." }), standaloneHref && _jsx("a", { href: standaloneHref, target: "_blank", rel: "noopener noreferrer", children: "Open separately" })] });
+    return _jsxs(_Fragment, { children: [review && _jsxs(_Fragment, { children: [_jsx(SdkChromeStyles, {}), _jsx("a", { "data-hosty-sdk": true, className: "hosty-panel-review", href: review, target: "_blank", rel: "noopener noreferrer", children: "Review access in Core" })] }), _jsx("iframe", { ref: ref, className: className, title: title, src: launch, sandbox: frameSandbox(surface.framePolicy), allow: surface.framePolicy.microphone ? "clipboard-write; microphone 'src'" : "clipboard-write", style: { border: 0, height: "100%", width: "100%", colorScheme: resolvedTheme }, onLoad: () => setLoaded(true) })] });
 }

package/dist/ui-host.d.ts

@@ -1,7 +1,7 @@
 import { UiCompositionModel } from "./ui-composition.js";
 import { type UiPresentation, type UiWorkspaceSnapshot, type UiWorkspaceRenderer, type UiViewDescriptor, type UiPlacementResolver } from "./ui-workspaces.js";
 export type { UiWorkspaceRenderer, UiViewDescriptor, UiPlacementResolver, UiPresentation } from "./ui-workspaces.js";
-import { type UiChromeOverrides, type UiActionOptions, type UiActionResult } from "./ui-types.js";
+import { type UiNavigationOptions, type UiChromeOverrides, type UiActionOptions, type UiActionResult } from "./ui-types.js";
 import { type UiClient } from "./ui.js";
 import { type PanelRef, type PanelTarget, type PresentationOptions, type PresentationResult, type UiBootstrap, type UiEnvironment, type UiEvent, type UiFrameSurface, type UiPanel } from "./ui-types.js";
 export type UiTool = UiPresentation & {
@@ -45,6 +45,9 @@ export declare class UiHost implements UiClient {
     readonly composition: UiCompositionModel;
     private readonly workspaces;
     private placement?;
+    private mainNavigator?;
+    /** The host chooses where its primary application area lives. */
+    setMainNavigator(navigate?: (surface: UiFrameSurface) => Promise<boolean>): void;
     private readonly actions;
     private focusSequence;
     private activityGeneration;
@@ -100,9 +103,10 @@ export declare class UiHost implements UiClient {
     private trimLedger;
     private peerResult;
     private action;
-    navigate: (entryKey: string, options: UiActionOptions) => Promise<UiActionResult>;
+    navigate: (entryKey: string, options: UiNavigationOptions) => Promise<UiActionResult>;
     openToolPicker: (options: UiActionOptions) => Promise<UiActionResult>;
     private pickTools;
+    private navigateMain;
     private navigateFrame;
     getPresentation: (id: string, options?: {
         signal?: AbortSignal;

package/dist/ui-host.js

@@ -1,6 +1,6 @@
 import { UiCompositionModel, validChromeOverrides, withChromeHints } from "./ui-composition.js";
 import { DEFAULT_WORKSPACE, ROOT_VIEW, workspace } from "./ui-workspaces.js";
-import { UI_COMPOSITION_CAPABILITY } from "./ui-types.js";
+import { UI_COMPOSITION_CAPABILITY, UI_MAIN_NAVIGATION_CAPABILITY, navigationSearch } from "./ui-types.js";
 import { createPresentationRequestId } from "./ui.js";
 import { UiError, panelKey, routeWithin } from "./ui-types.js";
 import { canonicalSurfaceRoute, DISCOVERY_TIMEOUT, failure, readUiMessage, uiPath, uiRequest, validId, validTarget, waitForPresentation } from "./ui-transport.js";
@@ -40,6 +40,9 @@ export class UiHost {
     composition;
     workspaces = new Map([[DEFAULT_WORKSPACE, workspace(DEFAULT_WORKSPACE)]]);
     placement;
+    mainNavigator;
+    /** The host chooses where its primary application area lives. */
+    setMainNavigator(navigate) { this.mainNavigator = navigate; }
     actions = new Map();
     focusSequence = 0;
     activityGeneration = 0;
@@ -628,7 +631,9 @@ export class UiHost {
         void operation.then(result => { entry.pending = undefined; entry.result = result; this.trimLedger(source); });
         return waitForPresentation(operation, id, options.signal);
     }
-    navigate = (entryKey, options) => this.action("navigate", entryKey, options, async (check) => {
+    navigate = (entryKey, options) => this.action("navigate", [entryKey, options.placement, options.search], options, async (check) => {
+        if (options.placement === "main")
+            throw new UiError("main_navigation_unavailable", "This document has no parent main surface.");
         const catalog = this.getNavigation().catalog, entry = catalog?.entries.find(e => e.key === entryKey);
         if (!entry || !entry.route)
             throw new UiError("destination_changed", "Refresh this app's navigation.");
@@ -666,6 +671,31 @@ export class UiHost {
             checkRenderer();
         }, frame);
     }
+    navigateMain(entryKey, search, options, frame) {
+        return this.action("navigate-main", [entryKey, search], options, async (check) => {
+            if (!navigationSearch(search))
+                throw new UiError("destination_invalid", "Invalid navigation query.");
+            const navigate = this.mainNavigator;
+            if (!navigate)
+                throw new UiError("main_navigation_unavailable", "This host has no main application surface.");
+            await this.bootstrap();
+            check();
+            const target = { appId: frame.surface.appId, installationId: frame.surface.installationId, entryKey };
+            const resolved = await uiRequest(this.path, "navigation/resolve", target);
+            check();
+            if (!resolved.available || !resolved.surface)
+                throw new UiError(resolved.state, "This page is unavailable.");
+            const destination = { ...resolved.surface };
+            if (search !== undefined) {
+                const url = new URL(destination.route, destination.origin);
+                url.search = search;
+                destination.route = url.pathname + url.search + url.hash;
+            }
+            if (!await this.mainNavigator?.(destination))
+                throw new UiError("destination_changed", "Refresh this app's navigation.");
+            check();
+        }, frame);
+    }
     navigateFrame(entryKey, options, frame) {
         return this.action("navigate", entryKey, options, async (check) => {
             await this.bootstrap();
@@ -951,7 +981,7 @@ export class UiHost {
             }
             this.post(frame, { type: "hosty:ui:connected", coreOrigin: own.coreOrigin, userId: own.userId,
                 appId: own.app.appId, installationId: own.app.installationId, code: frame.connected ? null : "actor_mismatch", route: frame.surface.route,
-                ...(frame.composition ? { capabilities: [UI_COMPOSITION_CAPABILITY], chrome: frame.chrome, revision: ++frame.policyRevision,
+                ...(frame.composition ? { capabilities: [UI_COMPOSITION_CAPABILITY, UI_MAIN_NAVIGATION_CAPABILITY], chrome: frame.chrome, revision: ++frame.policyRevision,
                     rootDisabled: !this.getChrome().tools.enabled, endpoint: frame.surface.endpoint } : {}) });
             if (frame.connected !== wasConnected)
                 frame.onConnection?.(frame.connected);
@@ -962,9 +992,11 @@ export class UiHost {
         if (!frame.connected)
             return;
         const source = `${frame.surface.appId}:${frame.generation}:${frame.nonce}`;
-        if (frame.composition && (msg.type === "hosty:ui:picker" || msg.type === "hosty:ui:navigate") && validId(msg.requestId)) {
+        if (frame.composition && (msg.type === "hosty:ui:picker" || msg.type === "hosty:ui:navigate" || msg.type === "hosty:ui:navigate-main") && validId(msg.requestId)) {
             const result = msg.type === "hosty:ui:picker" ? await this.pickTools({ requestId: msg.requestId }, frame)
-                : typeof msg.entryKey === "string" ? await this.navigateFrame(msg.entryKey, { requestId: msg.requestId }, frame)
+                : typeof msg.entryKey === "string" ? msg.type === "hosty:ui:navigate-main"
+                    ? await this.navigateMain(msg.entryKey, msg.search, { requestId: msg.requestId }, frame)
+                    : await this.navigateFrame(msg.entryKey, { requestId: msg.requestId }, frame)
                     : { status: "rejected", requestId: msg.requestId, code: "destination_invalid" };
             if (source === `${frame.surface.appId}:${frame.generation}:${frame.nonce}`)
                 this.post(frame, { type: "hosty:ui:action-result", requestId: msg.requestId, result });

package/dist/ui-navigation-react.js

@@ -1,6 +1,7 @@
 "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 { SdkChromeStyles, SdkIcon } from "./sdk-chrome.js";
 import { ui, createPresentationRequestId } from "./ui.js";
 import { INITIAL_CHROME, INITIAL_NAVIGATION } from "./ui-composition.js";
 import { UiCompositionContext } from "./ui-context.js";
@@ -22,7 +23,7 @@ export function HostyToolLauncher() {
     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 () => {
+    return _jsxs("div", { "data-hosty-sdk": true, className: "hosty-child-tools", children: [_jsx(SdkChromeStyles, {}), _jsx("style", { children: navigationStyles }), _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 })] });
@@ -71,19 +72,18 @@ export function HostyNavigation({ className = "" }) {
                 }, 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 }) })] });
+    return _jsxs(HostyNavigationBoundary, { children: [_jsx(SdkChromeStyles, {}), _jsx("style", { children: navigationStyles }), _jsx("div", { "data-hosty-sdk": true, 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: _jsx(SdkIcon, { name: "menu" }) }), _jsxs("dialog", { "data-hosty-sdk": true, 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-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 var(--hs-border);background:var(--hs-bg)}
 .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}
+.hosty-navigation a,.hosty-navigation-dialog a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;text-decoration:none;color:inherit;font:500 14px/20px var(--hs-font);min-width:0;transition:background-color 120ms ease-out}.hosty-navigation a>span,.hosty-navigation-dialog a>span{min-width:0;overflow-wrap:anywhere}.hosty-navigation a>img,.hosty-navigation-dialog a>img{flex:none}
+.hosty-navigation a:hover,.hosty-navigation-dialog a:hover{background:var(--hs-brand-soft)}.hosty-navigation a[aria-current=page],.hosty-navigation-dialog a[aria-current=page]{background:var(--hs-brand-soft);font-weight:500}
+.hosty-navigation a[aria-disabled=true],.hosty-navigation-dialog a[aria-disabled=true]{opacity:.5;cursor:not-allowed}
+.hosty-navigation button,.hosty-child-tools button,.hosty-navigation-dialog button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 14px/20px var(--hs-font);color:inherit;background:var(--hs-card);border:1px solid var(--hs-input);border-radius:8px;padding:7px 10px;cursor:pointer}.hosty-navigation button:hover,.hosty-child-tools button:hover,.hosty-navigation-dialog button:hover{background:var(--hs-brand-soft)}.hosty-child-tools button:disabled{opacity:.5;cursor:not-allowed}
+.hosty-navigation-dialog{position:fixed;inset:0 auto 0 0;margin:0;height:100dvh;max-height:none;width:min(300px,85vw);box-sizing:border-box;border:0;border-right:1px solid var(--hs-border);padding:16px;background:var(--hs-card);color:var(--hs-fg)}.hosty-navigation-dialog>button{margin-bottom:16px}
+.hosty-navigation-dialog::backdrop{background:#0F1B2D57}.hosty-child-tools{padding:6px 10px}.hosty-child-tools>[role=status]{display:inline-block;margin:0 8px;color:var(--hs-muted);font-size:13px}
 @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.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SdkChromeStyles, SdkIcon } from "./sdk-chrome.js";
 import { useContext, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import { bindUiClient, ui } from "./ui.js";
 import { createUiHost } from "./ui-host.js";
@@ -52,7 +53,7 @@ export function HostyUiRoot({ children, uiPath, panelLayout = "auto", active = t
     if (allowed)
         mounted.current = true;
     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 })] }) }) });
+    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 && _jsxs("div", { "data-hosty-sdk": true, role: "status", className: "hosty-panel-notice", children: [_jsx(SdkChromeStyles, {}), 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 = () => () => { };
@@ -243,14 +244,14 @@ export function HostyPanelWorkspace({ children, workspaceId = DEFAULT_WORKSPACE,
         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 || !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 => {
+    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(SdkChromeStyles, {}), _jsx("style", { children: styles }), _jsx("div", { ref: content, className: "hosty-panel-document", style: unsupported ? { display: "contents" } : undefined, inert: expanded && drawer, children: children }), _jsxs("nav", { "data-hosty-sdk": true, 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), 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 => {
+                        }, 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: _jsx(SdkIcon, { name: "warning" }) }) : null] }, panelKey(panel.panel))), _jsx("button", { type: "button", "aria-label": "Add tool", title: "Add tool", onClick: () => { setError(null); setChooser(true); void host?.refresh(); }, children: _jsx(SdkIcon, { name: "plus" }) })] }), expanded && drawer && _jsx("button", { type: "button", className: "hosty-panel-backdrop", "aria-label": "Return to document", onClick: () => host?.setExpanded(false, workspaceId) }), _jsxs("aside", { "data-hosty-sdk": true, 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") {
@@ -279,24 +280,27 @@ export function HostyPanelWorkspace({ children, workspaceId = DEFAULT_WORKSPACE,
                                 event.preventDefault();
                                 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" }), (drawer || minimizeControl === "always") && _jsx("button", { ref: minimize, type: "button", onClick: () => host?.setExpanded(false, workspaceId), "aria-label": "Minimize panel", title: "Minimize panel (keep tool open)", children: _jsx("span", { "aria-hidden": "true", children: "\u2212" }) })] }), 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)) })] }), _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: () => minimize.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" })] })] });
+                        } }), _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: _jsx(SdkIcon, { name: "external" }) }), (drawer || minimizeControl === "always") && _jsx("button", { ref: minimize, type: "button", onClick: () => host?.setExpanded(false, workspaceId), "aria-label": "Minimize panel", title: "Minimize panel (keep tool open)", children: _jsx(SdkIcon, { name: "minus" }) })] }), 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)) })] }), _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: () => minimize.current?.focus() })] }), _jsxs("dialog", { "data-hosty-sdk": true, 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: _jsx(SdkIcon, { name: "close" }) })] }), _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", { "data-hosty-sdk": true, 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:var(--hosty-panel-background,#f8f9fb);--hp-fg:var(--hosty-panel-foreground,#20242c);--hp-muted:var(--hosty-panel-muted,#606875);--hp-border:var(--hosty-panel-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:var(--hosty-panel-background,#14171c);--hp-fg:var(--hosty-panel-foreground,#f0f2f5);--hp-muted:var(--hosty-panel-muted,#a2aab7);--hp-border:var(--hosty-panel-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}
-.hosty-panel-workspace button,.hosty-panel-workspace a{font:inherit}.hosty-panel-rail button,.hosty-panel-body header button,.hosty-panel-body header a,.hosty-tool-chooser header button{position:relative;display:grid;place-items:center;flex-shrink:0;border:1px solid transparent;border-radius:8px;width:32px;height:32px;padding:0;background:transparent;color:inherit;font:500 13px system-ui;cursor:pointer;text-decoration:none}
-.hosty-panel-rail button:hover,.hosty-panel-rail button[aria-expanded=true]{border-color:var(--hp-border);background:color-mix(in srgb,var(--hp-fg) 8%,transparent)}
-.hosty-panel-workspace :focus-visible{outline:2px solid #5286ee;outline-offset:2px}.hosty-panel-attention{position:absolute;top:0;right:1px;color:#e9a52b;font-size:20px}
-.hosty-panel-body{order:2;display:flex;flex:0 0 var(--hosty-panel-width);flex-direction:column;position:relative;min-width:0;min-height:0;margin-left:12px;border-left:1px solid var(--hp-border);background:var(--hp-bg)}
-.hosty-panel-body[hidden],.hosty-panel-frame[hidden]{display:none}.hosty-panel-body header,.hosty-tool-chooser header{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border-bottom:1px solid var(--hp-border);font:500 13px system-ui}.hosty-panel-body header strong,.hosty-tool-chooser header strong{flex:1}
+.hosty-panel-workspace{display:flex;position:relative;min-width:0;min-height:0;width:100%;height:100dvh;overflow:hidden}
+:is(.hosty-panel-rail,.hosty-panel-body,.hosty-tool-chooser,.hosty-panel-error){--hp-bg:var(--hosty-panel-background,var(--hs-bg));--hp-fg:var(--hosty-panel-foreground,var(--hs-fg));--hp-muted:var(--hosty-panel-muted,var(--hs-muted));--hp-border:var(--hosty-panel-border,var(--hs-border));background:var(--hp-bg);color:var(--hp-fg)}
+.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}
+.hosty-panel-rail button,.hosty-panel-body header button,.hosty-panel-body header a,.hosty-tool-chooser header button{position:relative;display:grid;place-items:center;flex-shrink:0;border:1px solid transparent;border-radius:8px;width:32px;height:32px;padding:0;background:transparent;color:inherit;font:500 13px var(--hs-font);cursor:pointer;text-decoration:none;transition:background-color 120ms ease-out,color 120ms ease-out}
+.hosty-panel-rail button:hover,.hosty-panel-body header :is(button,a):hover,.hosty-tool-chooser header button:hover{background:var(--hs-brand-soft);color:var(--hs-fg)}
+.hosty-panel-rail button[aria-expanded=true]{background:var(--hs-brand);color:var(--hs-brand-fg)}
+.hosty-panel-attention{position:absolute;top:-2px;right:-2px;display:block;background:var(--hp-bg);border-radius:50%;color:var(--hs-warning)}.hosty-panel-attention>.hosty-sdk-icon{width:12px;height:12px}
+.hosty-panel-body{order:2;display:flex;flex:0 0 var(--hosty-panel-width);flex-direction:column;position:relative;min-width:0;min-height:0;margin-left:12px;border-left:1px solid var(--hp-border)}
+.hosty-panel-body[hidden],.hosty-panel-frame[hidden]{display:none}
+.hosty-panel-body header,.hosty-tool-chooser header{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border-bottom:1px solid var(--hp-border);font:500 14px/20px var(--hs-font)}.hosty-panel-body header strong,.hosty-tool-chooser header strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .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: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}
+.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:var(--hs-brand-soft)}
+.hosty-panel-state{padding:8px 12px;font:400 13px/20px var(--hs-font);border-bottom:1px solid var(--hp-border);color:var(--hp-muted)}.hosty-panel-state a{color:var(--hs-info);text-decoration:underline;text-underline-offset:3px}.hosty-panel-state select{display:block;max-width:100%;margin-top:6px;padding:6px 10px;border:1px solid var(--hp-border);border-radius:8px;background:var(--hp-bg);color:var(--hp-fg)}
+.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 #0F1B2D29}.hosty-panel-workspace[data-hosty-panel-layout=drawer] .hosty-panel-resize{display:none}
+.hosty-panel-backdrop{position:absolute;inset:0;border:0;background:#0F1B2D57;z-index:101;cursor:pointer}.hosty-panel-backdrop:focus-visible{outline:2px solid #A3E635;outline-offset:-2px}
+.hosty-tool-chooser{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;border:1px solid var(--hp-border);border-radius:14px;padding:20px;background:var(--hp-bg);color:var(--hp-fg);overflow:auto;box-shadow:0 14px 34px -8px #0F1B2D3D}.hosty-tool-chooser::backdrop{background:#0F1B2D57}.hosty-tool-chooser header{border:0;padding:0;min-height:32px}.hosty-tool-chooser>p{margin:12px 0;color:var(--hp-muted);font-size:13px}.hosty-tool-chooser ul{list-style:none;padding:0;margin:16px 0;display:grid;gap:8px}.hosty-tool-chooser li{display:flex;gap:8px}.hosty-tool-chooser li>button,.hosty-tool-chooser>button,.hosty-panel-error>button{font:500 14px/20px var(--hs-font);border:1px solid var(--hp-border);background:var(--hs-card);color:inherit;border-radius:8px;padding:8px 12px;cursor:pointer}.hosty-tool-chooser li>button{flex:1;text-align:left;padding:12px}.hosty-tool-chooser li>button:hover,.hosty-tool-chooser>button:hover,.hosty-panel-error>button:hover{background:var(--hs-brand-soft)}.hosty-tool-chooser li span{display:block;color:var(--hp-muted);font:400 13px/20px var(--hs-font)}.hosty-panel-error{position:absolute;bottom:16px;right:60px;max-width:calc(100% - 76px);z-index:4;border:1px solid var(--hp-border);border-radius:10px;padding:12px;font:400 13px/20px var(--hs-font);box-shadow:0 4px 14px -4px #0F1B2D29}.hosty-panel-error>button{margin:8px 0 0 8px}
 `;

package/dist/ui-types.d.ts

@@ -165,10 +165,17 @@ export type UiResolvedNavigation = {
     state: string;
     standaloneHref: string | null;
 };
+export declare const UI_MAIN_NAVIGATION_CAPABILITY = "ui.main-navigation.v1";
 export type UiActionOptions = {
     requestId: string;
     signal?: AbortSignal;
 };
+/** Main placement is explicit; only the resolved navigation entry's query can be overridden. */
+export type UiNavigationOptions = UiActionOptions & {
+    placement?: "main";
+    search?: string;
+};
+export declare function navigationSearch(value: unknown): value is string | undefined;
 export type UiActionResult = {
     status: "accepted";
     requestId: string;

package/dist/ui-types.js

@@ -42,3 +42,8 @@ export function buildSurfaceOpenUrl(coreOrigin, destination) {
     return url.href;
 }
 export const UI_COMPOSITION_CAPABILITY = "ui.composition.v1";
+export const UI_MAIN_NAVIGATION_CAPABILITY = "ui.main-navigation.v1";
+export function navigationSearch(value) {
+    return value === undefined || typeof value === "string" && value.length <= 4096
+        && (value === "" || value.startsWith("?")) && !/[#\u0000-\u001f\u007f]/.test(value);
+}

package/dist/ui.d.ts

@@ -1,4 +1,4 @@
-import type { UiChromeSnapshot, UiNavigationSnapshot, UiActionOptions, UiActionResult, PanelTarget, PresentationOptions, PresentationResult, UiEnvironment, UiEvent } from "@hosty-sdk/app/ui/types";
+import type { UiChromeSnapshot, UiNavigationSnapshot, UiActionOptions, UiNavigationOptions, UiActionResult, PanelTarget, PresentationOptions, PresentationResult, UiEnvironment, UiEvent } from "@hosty-sdk/app/ui/types";
 export * from "@hosty-sdk/app/ui/types";
 export interface UiClient {
     getEnvironment(): UiEnvironment;
@@ -6,7 +6,7 @@ export interface UiClient {
     subscribeChrome(listener: () => void): () => void;
     getNavigation(): UiNavigationSnapshot;
     subscribeNavigation(listener: () => void): () => void;
-    navigate(entryKey: string, options: UiActionOptions): Promise<UiActionResult>;
+    navigate(entryKey: string, options: UiNavigationOptions): Promise<UiActionResult>;
     openToolPicker(options: UiActionOptions): Promise<UiActionResult>;
     openSurface(target: PanelTarget, options: PresentationOptions): Promise<PresentationResult>;
     getPresentation(requestId: string, options?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hosty-sdk/app",
-  "version": "0.31.0",
+  "version": "0.34.1",
   "description": "Hosty app auth: session state machine, recovery bridge, Core revalidation, and the embedder responder.",
   "license": "AGPL-3.0-only",
   "type": "module",
@@ -132,14 +132,14 @@
   },
   "scripts": {
     "test": "vitest run",
-    "build": "tsc -p tsconfig.build.json && node scripts/fix-dist-extensions.mjs"
+    "build": "tsc -p tsconfig.build.json && node scripts/fix-dist-extensions.mjs && node scripts/copy-chrome-assets.mjs"
   },
   "dependencies": {
     "@noble/hashes": "^2.4.0",
     "server-only": "^0.0.1"
   },
   "peerDependencies": {
-    "next": "^16.3.8",
+    "next": "^16.4.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },
@@ -155,14 +155,15 @@
     }
   },
   "devDependencies": {
-    "@types/node": "^24.19.1",
+    "@types/node": "^24.19.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "jsdom": "^30.1.1",
+    "jsdom": "^30.1.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "typescript": "^6",
-    "vitest": "^5.0.3"
+    "vitest": "^5.0.3",
+    "vite": "^8.3.5"
   },
   "repository": {
     "type": "git",