@hosty-sdk/app 0.26.0 → 0.27.22

package/dist/ui-host.js

@@ -1,6 +1,17 @@
+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 { 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";
+function immutable(value) {
+    if (value && typeof value === "object" && !Object.isFrozen(value)) {
+        for (const child of Object.values(value))
+            immutable(child);
+        Object.freeze(value);
+    }
+    return value;
+}
 let documentHost = null;
 /** One top-level composition owner. All Core traffic goes through this app's authenticated adapter. */
 export function createUiHost(options = {}) {
@@ -8,7 +19,7 @@ export function createUiHost(options = {}) {
         throw new Error("A panel host belongs to a top-level browser document.");
     if (documentHost)
         throw new Error("A Hosty panel host already owns this document.");
-    const host = new UiHost(uiPath(options.uiPath), options.active);
+    const host = new UiHost(uiPath(options.uiPath), options.active, options.chrome);
     documentHost = host;
     return host;
 }
@@ -21,19 +32,35 @@ export class UiHost {
     listeners = new Set();
     events = new Set();
     frames = new Set();
+    viewChrome = new Map();
     ledger = new Map();
     toolQueues = new Map();
-    selectionGeneration = 0;
+    moves = new Map();
+    rendererWork = new Map();
+    composition;
+    workspaces = new Map([[DEFAULT_WORKSPACE, workspace(DEFAULT_WORKSPACE)]]);
+    placement;
+    actions = new Map();
+    focusSequence = 0;
     activityGeneration = 0;
     activityReady;
     disposed = false;
-    workspace = null;
     refreshing = null;
     onMessage = (event) => { void this.receive(event); };
     onFocus = () => { void this.refresh(); };
-    constructor(path, active = true) {
+    constructor(path, active = true, chrome = {}) {
         this.path = path;
         this.active = active;
+        this.composition = new UiCompositionModel(path, "standalone", chrome);
+        this.composition.attachRouter();
+        this.composition.subscribeChrome(() => {
+            if (!this.getChrome().tools.enabled)
+                for (const state of this.workspaces.values())
+                    this.collapseWorkspace(state.workspaceId);
+            for (const frame of this.frames)
+                if (frame.connected && frame.composition)
+                    this.publishPolicy(frame);
+        });
         this.activityReady = active;
         window.addEventListener("message", this.onMessage);
         window.addEventListener("focus", this.onFocus);
@@ -43,13 +70,30 @@ export class UiHost {
             this.setEnvironment("blocked", "activity_required");
     }
     getEnvironment = () => this.environment;
+    getChrome = () => this.composition.getChrome();
+    subscribeChrome = (listener) => this.composition.subscribeChrome(listener);
+    getNavigation = () => this.composition.getNavigation();
+    subscribeNavigation = (listener) => this.composition.subscribeNavigation(listener);
     setActive(active) {
         if (this.disposed || this.active === active)
             return;
+        for (const move of this.moves.values())
+            move.abort();
         this.active = active;
         this.activityReady = false;
         this.activityGeneration++;
-        this.selectionGeneration++;
+        for (const state of this.workspaces.values())
+            state.generation++;
+        this.invalidateRendererWork();
+        if (!active) {
+            for (const state of this.workspaces.values()) {
+                state.expanded = false;
+                state.renderer?.collapse();
+            }
+            this.publishWorkspaces();
+        }
+        this.composition.resetNavigation();
+        this.actions.clear();
         this.refreshing = null;
         this.toolQueues.clear();
         for (const [key, entry] of this.ledger)
@@ -71,11 +115,205 @@ export class UiHost {
             throw new UiError("activity_required", "Renew this app's activity before opening panels.");
     }
     claimWorkspace = (owner) => {
-        if (this.workspace && this.workspace !== owner)
-            throw new Error("Exactly one panel workspace may occupy this host.");
-        this.workspace = owner;
-        return () => { if (this.workspace === owner)
-            this.workspace = null; };
+        const state = this.workspaces.get(DEFAULT_WORKSPACE);
+        if (state.renderer || state.owner && state.owner !== owner)
+            throw new Error("Exactly one renderer may occupy a workspace.");
+        state.owner = owner;
+        return () => { if (state.owner === owner)
+            state.owner = undefined; };
+    };
+    registerWorkspace = ({ workspaceId, renderer }) => {
+        if (!workspaceId || workspaceId.length > 256)
+            throw new Error("Invalid workspace ID.");
+        const state = this.workspaces.get(workspaceId) ?? workspace(workspaceId);
+        if (state.renderer && state.renderer !== renderer)
+            throw new Error("A workspace already has a renderer.");
+        state.renderer = renderer;
+        this.workspaces.set(workspaceId, state);
+        this.publishWorkspaces();
+        return () => {
+            if (!this.disposed && this.snapshot.tools.some(t => t.workspaceId === workspaceId))
+                throw new Error("Close or move presentations before disposing their workspace.");
+            if (state.renderer === renderer) {
+                state.generation++;
+                this.invalidateRendererWork();
+                state.renderer = undefined;
+                this.publishWorkspaces();
+            }
+        };
+    };
+    publishWorkspaces() {
+        const state = this.workspaces.get(DEFAULT_WORKSPACE);
+        const selected = this.snapshot.tools.find(t => t.presentationId === state.selectedId);
+        this.update({ selected: selected?.target.panel ?? null, selectedPresentationId: state.selectedId,
+            expanded: state.expanded, width: state.width,
+            workspaces: [...this.workspaces.values()].map(({ workspaceId, selectedId, expanded, width }) => ({ workspaceId, selectedId, expanded, width })) });
+    }
+    setPlacementResolver = (resolver) => { this.placement = resolver; };
+    getViewChrome = (viewId) => {
+        const chrome = this.viewChrome.get(viewId) ?? [...this.frames].find(frame => frame.view.viewId === viewId)?.chrome;
+        return chrome ? structuredClone(chrome) : undefined;
+    };
+    setViewChrome = (viewId, overrides) => {
+        if (!validChromeOverrides(overrides))
+            throw new Error("Invalid chrome policy.");
+        if (viewId === ROOT_VIEW) {
+            this.composition.setHostPolicy("root", this.getChrome().hostRevision + 1, overrides, false);
+            return;
+        }
+        const frame = [...this.frames].find(f => f.view.viewId === viewId);
+        if (!frame)
+            throw new Error("Unknown view.");
+        frame.chrome = structuredClone(overrides);
+        this.viewChrome.set(viewId, frame.chrome);
+        this.publishPolicy(frame);
+    };
+    publishPolicy(frame) {
+        if (!frame.composition || !frame.connected)
+            return;
+        this.post(frame, { type: "hosty:ui:chrome", revision: ++frame.policyRevision, chrome: frame.chrome,
+            rootDisabled: !this.getChrome().tools.enabled, endpoint: frame.surface.endpoint });
+    }
+    requireTools(frame) {
+        if (!this.getChrome().tools.enabled || frame?.chrome.tools?.enabled === false)
+            throw new UiError("tools_disabled", "Tools are disabled in this view.");
+    }
+    focusPresentation = (id) => {
+        const tool = this.snapshot.tools.find(t => t.presentationId === id);
+        if (!tool)
+            return false;
+        this.requireTools();
+        const state = this.workspaces.get(tool.workspaceId);
+        state.generation++;
+        state.selectedId = id;
+        state.expanded = true;
+        this.update({ tools: this.snapshot.tools.map(t => t === tool ? { ...t, focusedAt: ++this.focusSequence } : t) });
+        this.publishWorkspaces();
+        state.renderer?.focus(id);
+        return true;
+    };
+    collapseWorkspace = (id) => {
+        const state = this.workspaces.get(id);
+        if (!state)
+            return;
+        state.generation++;
+        state.expanded = false;
+        state.renderer?.collapse();
+        this.publishWorkspaces();
+    };
+    closePresentation = (id) => { this.releasePresentation(id); };
+    releasePresentation(id, supersede = true) {
+        const tool = this.snapshot.tools.find(t => t.presentationId === id);
+        if (!tool)
+            return;
+        this.moves.get(id)?.abort();
+        const state = this.workspaces.get(tool.workspaceId);
+        for (const frame of this.frames)
+            if (frame.view.presentationId === id)
+                frame.cleanup();
+        if (supersede)
+            state.generation++;
+        state.renderer?.release(id);
+        this.update({ tools: this.snapshot.tools.filter(t => t !== tool) });
+        if (state.selectedId === id) {
+            state.selectedId = null;
+            state.expanded = false;
+        }
+        this.publishWorkspaces();
+    }
+    resetPresentations() {
+        for (const tool of this.snapshot.tools)
+            this.closePresentation(tool.presentationId);
+        for (const state of this.workspaces.values()) {
+            state.selectedId = null;
+            state.expanded = false;
+            state.generation++;
+            state.renderer?.collapse();
+        }
+        this.publishWorkspaces();
+    }
+    movePresentation = async (id, workspaceId) => {
+        this.requireTools();
+        const tool = this.snapshot.tools.find(t => t.presentationId === id), next = this.workspaces.get(workspaceId);
+        if (!tool || !next?.renderer || this.moves.has(id))
+            return false;
+        const previous = this.workspaces.get(tool.workspaceId);
+        if (previous === next)
+            return true;
+        if (!previous.renderer?.frameLayer || previous.renderer.frameLayer !== next.renderer.frameLayer)
+            return false;
+        const activity = this.activityGeneration, generation = ++next.generation, renderer = next.renderer;
+        this.invalidateRendererWork();
+        const moved = { ...tool, workspaceId }, controller = new AbortController();
+        const retainedSource = () => this.snapshot.tools.find(t => t.presentationId === id && t.workspaceId === tool.workspaceId && t.resolved.surface);
+        this.moves.set(id, controller);
+        this.rendererWork.set(controller, { check: () => {
+                if (!retainedSource() || generation !== next.generation || renderer !== next.renderer)
+                    throw new Error("Movement was superseded.");
+            } });
+        const stop = () => { this.rendererWork.delete(controller); };
+        try {
+            if (await renderer.present(moved, controller.signal) !== "accepted")
+                throw new Error("Movement was refused.");
+            this.checkActivity(activity);
+            this.requireTools();
+            if (controller.signal.aborted || !retainedSource() || generation !== next.generation || renderer !== next.renderer)
+                throw new Error("Movement was superseded.");
+            stop();
+            previous.generation++;
+            this.update({ tools: this.snapshot.tools.map(t => t.presentationId === id ? { ...t, workspaceId } : t) });
+            if (previous.selectedId === id) {
+                previous.selectedId = null;
+                previous.expanded = false;
+                previous.renderer?.collapse();
+            }
+            for (const frame of this.frames)
+                if (frame.view.presentationId === id)
+                    frame.view = { ...frame.view, workspaceId };
+            this.focusPresentation(id);
+            return true;
+        }
+        catch {
+            stop();
+            controller.abort();
+            const retained = this.snapshot.tools.find(t => t.presentationId === id);
+            if (!retained) {
+                renderer.release(id);
+                return false;
+            }
+            const state = this.workspaces.get(retained.workspaceId), restore = state.renderer;
+            const restorationGeneration = state.generation;
+            const rollback = new AbortController();
+            this.moves.set(id, rollback);
+            this.rendererWork.set(rollback, { check: () => {
+                    if (rollback.signal.aborted || restorationGeneration !== state.generation || restore !== state.renderer
+                        || !this.snapshot.tools.some(t => t.presentationId === id && t.workspaceId === retained.workspaceId))
+                        throw new Error("Restoration was superseded.");
+                } });
+            try {
+                if (!restore || await restore.present(retained, rollback.signal) !== "accepted")
+                    throw new Error("Restoration was refused.");
+                if (!this.snapshot.tools.some(t => t.presentationId === id)) {
+                    restore.release(id);
+                    return false;
+                }
+                if (this.active && this.getChrome().tools.enabled && state.expanded && state.selectedId)
+                    restore.focus(state.selectedId);
+                else
+                    restore.collapse();
+            }
+            catch {
+                this.releasePresentation(id, restorationGeneration === state.generation);
+            }
+            finally {
+                this.rendererWork.delete(rollback);
+            }
+            return false;
+        }
+        finally {
+            stop();
+            this.moves.delete(id);
+        }
     };
     getSnapshot = () => this.snapshot;
     subscribeSnapshot = (listener) => { this.listeners.add(listener); return () => { this.listeners.delete(listener); }; };
@@ -90,12 +328,42 @@ export class UiHost {
     update(patch) {
         if (this.disposed)
             return;
-        this.snapshot = { ...this.snapshot, ...patch };
+        this.snapshot = immutable({ ...this.snapshot, ...patch });
+        this.invalidateRendererWork();
         for (const listener of this.listeners)
             listener();
     }
+    invalidateRendererWork() {
+        for (const [controller, work] of this.rendererWork)
+            if (!controller.signal.aborted) {
+                try {
+                    work.check();
+                }
+                catch {
+                    controller.abort();
+                }
+            }
+    }
+    async runRenderer(check, perform, frame) {
+        check();
+        const controller = new AbortController();
+        this.rendererWork.set(controller, { check, frame });
+        try {
+            const result = await perform(controller.signal);
+            check();
+            return result;
+        }
+        catch (error) {
+            check();
+            throw error;
+        }
+        finally {
+            this.rendererWork.delete(controller);
+        }
+    }
     setEnvironment(connection, code) {
         this.environment = { mode: "standalone", connection, ...(code ? { code } : {}) };
+        this.composition.setEnvironment(this.environment);
         this.emit({ type: "environment", value: this.environment });
     }
     async bootstrap(generation = this.activityGeneration, renewing = false) {
@@ -107,7 +375,10 @@ export class UiHost {
         const previous = this.snapshot.bootstrap;
         if (previous && (previous.userId !== value.userId || previous.coreOrigin !== value.coreOrigin || previous.app.installationId !== value.app.installationId)) {
             this.ledger.clear();
+            this.actions.clear();
             this.toolQueues.clear();
+            this.composition.resetNavigation();
+            this.resetPresentations();
             for (const frame of this.frames) {
                 frame.connected = false;
                 frame.actor = null;
@@ -131,7 +402,10 @@ export class UiHost {
             try {
                 const own = await this.bootstrap(generation, true);
                 this.checkActivity(generation, true);
+                void this.composition.refreshNavigation();
                 if (!own.canHost) {
+                    this.resetPresentations();
+                    this.activityReady = true;
                     this.setEnvironment("unsupported", "app_permission_required");
                     this.update({ catalog: [], tools: [], selected: null, expanded: false });
                     return;
@@ -146,9 +420,9 @@ export class UiHost {
                 // Catalog disappearance/replacement is access loss, while temporary readiness loss retains drafts.
                 const allowed = new Map(catalog.panels.map(p => [panelKey(p.panel), p]));
                 this.update({ tools: this.snapshot.tools.map(tool => {
-                        const entry = allowed.get(tool.key);
+                        const entry = allowed.get(panelKey(tool.target.panel));
                         const invalid = !entry || !["running", "degraded", "unavailable", "starting", "stopping"].includes(entry.state);
-                        const surface = tool.resolved.surface;
+                        const surface = tool.resolved.surface && tool.panelSurface;
                         const changed = entry && surface && JSON.stringify(entry.framePolicy) !== JSON.stringify(surface.framePolicy);
                         const moved = entry && surface && (entry.origin !== surface.origin || entry.endpoint !== surface.endpoint
                             || !routeWithin(surface.route, entry.route));
@@ -172,51 +446,119 @@ export class UiHost {
         return operation;
     };
     openSurface = (target, options) => waitForPresentation(this.open(target, options, "local"), options.requestId, options.signal);
-    open(target, options, source, frame) {
+    open(target, options, source, frame, sourceWorkspace) {
         const id = options.requestId;
         if (!this.active || !this.activityReady || this.disposed)
             return Promise.resolve({ status: "blocked", requestId: id, code: "activity_required" });
-        const generation = this.activityGeneration;
-        if (!validId(id) || !validTarget(target) || options.placement !== "side")
+        if (!validId(id) || !validTarget(target) || options.placement !== "side" || options.reuse !== undefined && !["exact", "new"].includes(options.reuse))
             return Promise.resolve({ status: "rejected", requestId: id, code: "invalid_presentation" });
-        const key = `${source}:${id}`, input = JSON.stringify([target.panel.appId, target.panel.installationId, target.panel.panelId, target.route ?? null]);
+        target = { panel: { appId: target.panel.appId, installationId: target.panel.installationId, panelId: target.panel.panelId },
+            ...(target.route === undefined ? {} : { route: canonicalSurfaceRoute(target.route) }) };
+        const generation = this.activityGeneration, key = `${source}:${id}`;
+        const input = JSON.stringify(["open", target.panel, target.route ?? null, options.reuse ?? "exact"]);
         const existing = this.ledger.get(key);
-        if (existing && existing.input !== input)
+        if (this.actions.has(key) || existing && existing.input !== input)
             return Promise.resolve({ status: "rejected", requestId: id, code: "request_conflict" });
         if (existing?.pending)
             return existing.pending;
-        if ([...this.ledger.entries()].filter(([k, v]) => k.startsWith(source + ":") && v.pending).length >= 4)
+        if (existing?.result?.status === "opened")
+            return this.status(id, source, frame).then(result => {
+                if (result.status === "opened" && result.presentationId && this.snapshot.tools.some(t => t.presentationId === result.presentationId)) {
+                    try {
+                        this.requireTools(frame);
+                        this.focusPresentation(result.presentationId);
+                    }
+                    catch (error) {
+                        return failure(id, error);
+                    }
+                }
+                return result;
+            });
+        if (this.pendingCount(source) >= 4)
             return Promise.resolve({ status: "blocked", requestId: id, code: "presentation_busy" });
+        let destination;
+        try {
+            this.requireTools(frame);
+            destination = this.placement?.({ source: frame?.view ?? { viewId: ROOT_VIEW, workspaceId: sourceWorkspace ?? DEFAULT_WORKSPACE },
+                target: structuredClone(target), presentations: structuredClone(this.snapshot.tools) }) ?? { workspaceId: frame?.view.workspaceId ?? sourceWorkspace ?? DEFAULT_WORKSPACE };
+            if (!this.workspaces.get(destination.workspaceId)?.renderer)
+                throw new UiError("presentation_unavailable", "No renderer is available for this workspace.");
+            if (options.reuse === "new" && destination.presentationId)
+                throw new UiError("invalid_presentation", "A new presentation cannot reuse an instance.");
+        }
+        catch (error) {
+            return Promise.resolve(failure(id, error));
+        }
+        const state = this.workspaces.get(destination.workspaceId), selection = ++state.generation;
+        this.invalidateRendererWork();
         const entry = { input, frame };
-        const selectionGeneration = ++this.selectionGeneration;
-        const currentSource = () => !frame || source === `${frame.surface.appId}:${frame.generation}:${frame.nonce}`;
-        const toolKey = panelKey(target.panel), previous = this.toolQueues.get(toolKey);
+        const currentSource = () => !frame || frame.live && frame.connected && source === `${frame.surface.appId}:${frame.generation}:${frame.nonce}`;
+        const queueKey = `${destination.workspaceId}:${panelKey(target.panel)}`, previous = this.toolQueues.get(queueKey);
         const operation = (async () => {
             if (previous)
                 await previous;
             try {
                 const own = await this.bootstrap(generation);
-                this.checkActivity(generation);
-                if (!own.canHost)
-                    throw new UiError("app_permission_required", "Allow this app to host panels.");
-                if (frame && (!frame.live || !frame.connected || frame.actor !== own.userId || !currentSource()))
-                    throw new UiError("actor_mismatch", "Reconnect using the same account.");
+                const check = () => {
+                    this.checkActivity(generation);
+                    this.requireTools(frame);
+                    if (!own.canHost)
+                        throw new UiError("app_permission_required", "Allow this app to host panels.");
+                    if (!currentSource() || frame && frame.actor !== own.userId || this.snapshot.bootstrap?.userId !== own.userId
+                        || this.snapshot.bootstrap?.coreOrigin !== own.coreOrigin || this.snapshot.bootstrap?.app.installationId !== own.app.installationId)
+                        throw new UiError("actor_mismatch", "Reconnect using the same account.");
+                    if (selection !== state.generation)
+                        throw new UiError("presentation_superseded", "A newer action replaced this opening.");
+                };
+                check();
                 const resolved = await uiRequest(this.path, "panels/resolve", target);
-                this.checkActivity(generation);
-                if (this.disposed || this.snapshot.bootstrap?.userId !== own.userId || this.snapshot.bootstrap?.coreOrigin !== own.coreOrigin || this.snapshot.bootstrap?.app.installationId !== own.app.installationId
-                    || frame && (!frame.live || !frame.connected || frame.actor !== own.userId || !currentSource()))
-                    throw new UiError("actor_mismatch", "The signed-in account changed.");
+                check();
                 if (!resolved.available || !resolved.surface)
                     throw new UiError(resolved.state || "destination_unavailable", "The selected panel is unavailable.");
+                const matches = (tool) => !this.moves.has(tool.presentationId) && tool.workspaceId === state.workspaceId && panelKey(tool.target.panel) === panelKey(resolved.target.panel)
+                    && tool.resolved.surface?.origin === resolved.surface.origin && tool.resolved.surface?.endpoint === resolved.surface.endpoint
+                    && canonicalSurfaceRoute(tool.currentRoute) === canonicalSurfaceRoute(resolved.target.route)
+                    && JSON.stringify(tool.resolved.surface?.framePolicy) === JSON.stringify(resolved.surface.framePolicy);
+                const preferred = destination.presentationId ? this.snapshot.tools.find(t => t.presentationId === destination.presentationId) : undefined;
+                if (destination.presentationId && (!preferred || !matches(preferred)))
+                    throw new UiError("destination_changed", "The selected instance does not match this target.");
+                const old = options.reuse === "new" ? undefined : preferred ?? this.snapshot.tools.filter(matches).sort((a, b) => b.focusedAt - a.focusedAt)[0];
                 const insecure = window.location.protocol === "https:" && new URL(resolved.surface.origin).protocol === "http:";
-                if (selectionGeneration !== this.selectionGeneration)
-                    throw new UiError("presentation_superseded", "A newer panel action replaced this opening. Retry to open it again.");
-                const old = this.snapshot.tools.find(t => t.key === toolKey);
-                const same = old?.resolved.surface && JSON.stringify(old.resolved.surface) === JSON.stringify(resolved.surface);
-                const tool = { key: toolKey, target: resolved.target, resolved,
-                    readiness: insecure ? "unreported" : same ? old.readiness : "loading", attention: old?.attention ?? 0 };
-                this.update({ tools: old ? this.snapshot.tools.map(t => t.key === toolKey ? tool : t) : [...this.snapshot.tools, tool], selected: target.panel, expanded: true });
-                return { status: "opened", requestId: id, target: resolved.target, readiness: tool.readiness };
+                const tool = old ?? { key: panelKey(target.panel), presentationId: createPresentationRequestId(), workspaceId: state.workspaceId,
+                    target: resolved.target, panelSurface: resolved.surface, resolved, readiness: insecure ? "unreported" : "loading", attention: 0, currentRoute: resolved.target.route ?? null, focusedAt: 0 };
+                if (!old)
+                    this.update({ tools: [...this.snapshot.tools, tool] });
+                const renderer = state.renderer;
+                try {
+                    const checkRenderer = () => {
+                        check();
+                        if (state.renderer !== renderer)
+                            throw new UiError("presentation_superseded", "The workspace renderer changed.");
+                        const current = this.snapshot.tools.find(t => t.presentationId === tool.presentationId);
+                        if (!current?.resolved.surface || JSON.stringify(current.resolved.surface) !== JSON.stringify(tool.resolved.surface))
+                            throw new UiError("destination_changed", "The presentation destination changed.");
+                        if (!current.resolved.available)
+                            throw new UiError(current.resolved.state, "The presentation is unavailable.");
+                    };
+                    if (await this.runRenderer(checkRenderer, signal => renderer.present(tool, signal), frame) !== "accepted")
+                        throw new UiError("presentation_unavailable", "The workspace could not present this tool.");
+                    check();
+                }
+                catch (error) {
+                    if (!old) {
+                        renderer.release(tool.presentationId);
+                        this.update({ tools: this.snapshot.tools.filter(t => t.presentationId !== tool.presentationId) });
+                    }
+                    throw error;
+                }
+                state.selectedId = tool.presentationId;
+                state.expanded = true;
+                this.update({ tools: this.snapshot.tools.map(t => t.presentationId === tool.presentationId ? { ...t, focusedAt: ++this.focusSequence } : t) });
+                this.publishWorkspaces();
+                state.renderer?.focus(tool.presentationId);
+                entry.openingSurface = resolved.surface;
+                const readiness = this.snapshot.tools.find(t => t.presentationId === tool.presentationId)?.readiness ?? tool.readiness;
+                return { status: "opened", requestId: id, target: resolved.target, readiness, presentationId: tool.presentationId };
             }
             catch (error) {
                 return failure(id, error);
@@ -224,21 +566,138 @@ export class UiHost {
         })();
         entry.pending = operation;
         this.ledger.set(key, entry);
-        this.toolQueues.set(toolKey, operation);
+        this.toolQueues.set(queueKey, operation);
         void operation.then(result => {
             entry.pending = undefined;
             entry.result = result;
-            if (this.toolQueues.get(toolKey) === operation)
-                this.toolQueues.delete(toolKey);
+            if (this.toolQueues.get(queueKey) === operation)
+                this.toolQueues.delete(queueKey);
             if (!frame && this.active && generation === this.activityGeneration)
                 this.emit({ type: "presentation", value: result });
-            const keys = [...this.ledger.keys()].filter(k => k.startsWith(source + ":"));
-            for (const oldKey of keys.slice(0, Math.max(0, keys.length - 256)))
-                if (!this.ledger.get(oldKey)?.pending)
-                    this.ledger.delete(oldKey);
+            this.trimLedger(source);
         });
         return operation;
     }
+    pendingCount(source) {
+        return [...this.ledger, ...this.actions].filter(([key, value]) => key.startsWith(source + ":") && value.pending).length;
+    }
+    trimLedger(source) {
+        const entries = [...this.ledger, ...this.actions].filter(([key]) => key.startsWith(source + ":"));
+        for (const [key, value] of entries.slice(0, Math.max(0, entries.length - 256)))
+            if (!value.pending) {
+                this.ledger.delete(key);
+                this.actions.delete(key);
+            }
+    }
+    peerResult(frame, result) {
+        if (frame.composition || result.status !== "opened")
+            return result;
+        const { presentationId: _id, ...legacy } = result;
+        return legacy;
+    }
+    action(kind, input, options, perform, frame) {
+        const id = options.requestId, source = frame ? `${frame.surface.appId}:${frame.generation}:${frame.nonce}` : "local", key = `${source}:${id}`;
+        if (!validId(id))
+            return Promise.resolve({ status: "rejected", requestId: id, code: "invalid_presentation" });
+        const payload = JSON.stringify([kind, input]), existing = this.actions.get(key);
+        if (this.ledger.has(key) || existing && existing.input !== payload)
+            return Promise.resolve({ status: "rejected", requestId: id, code: "request_conflict" });
+        if (existing)
+            return waitForPresentation(existing.pending ?? Promise.resolve(existing.result), id, options.signal);
+        if (this.pendingCount(source) >= 4)
+            return Promise.resolve({ status: "blocked", requestId: id, code: "presentation_busy" });
+        const generation = this.activityGeneration;
+        const check = () => {
+            this.checkActivity(generation);
+            if (frame && (!frame.live || !frame.connected || frame.actor !== this.snapshot.bootstrap?.userId || source !== `${frame.surface.appId}:${frame.generation}:${frame.nonce}`))
+                throw new UiError("host_unavailable", "The originating view is no longer connected.");
+        };
+        const entry = { input: payload, frame };
+        const operation = Promise.resolve().then(async () => {
+            try {
+                check();
+                await perform(check);
+                return { status: "accepted", requestId: id };
+            }
+            catch (error) {
+                return failure(id, error);
+            }
+        });
+        entry.pending = operation;
+        this.actions.set(key, entry);
+        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) => {
+        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.");
+        if (await this.composition.navigateLocal(entry)) {
+            check();
+            return;
+        }
+        const resolved = await uiRequest(this.path, "navigation/resolve", { appId: catalog.appId, installationId: catalog.installationId, entryKey });
+        check();
+        if (!resolved.available || !resolved.surface)
+            throw new UiError(resolved.state, "This page is unavailable.");
+        window.location.assign(withChromeHints(new URL(resolved.surface.route, resolved.surface.origin).href, this.getChrome()));
+    });
+    openToolPicker = (options) => this.pickTools(options);
+    pickTools(options, frame) {
+        return this.action("picker", null, options, async (check) => {
+            this.requireTools(frame);
+            const state = this.workspaces.get(frame?.view.workspaceId ?? DEFAULT_WORKSPACE), renderer = state?.renderer;
+            if (!state || !renderer)
+                throw new UiError("presentation_unavailable", "A tool chooser is not available here.");
+            const selection = ++state.generation;
+            this.invalidateRendererWork();
+            const checkRenderer = () => {
+                check();
+                this.requireTools(frame);
+                if (selection !== state.generation || renderer !== state.renderer)
+                    throw new UiError("presentation_superseded", "A newer action replaced this chooser.");
+            };
+            const own = await this.bootstrap();
+            checkRenderer();
+            if (!own.canHost)
+                throw new UiError("app_permission_required", "Allow this app to discover tools.");
+            if (await this.runRenderer(checkRenderer, signal => renderer.showToolPicker(signal), frame) !== "accepted")
+                throw new UiError("presentation_unavailable", "A tool chooser is not available here.");
+            checkRenderer();
+        }, frame);
+    }
+    navigateFrame(entryKey, options, frame) {
+        return this.action("navigate", entryKey, options, async (check) => {
+            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.");
+            if (frame.view.navigate) {
+                const navigation = frame.view.navigate(resolved.surface);
+                if (navigation)
+                    await navigation;
+                check();
+                frame.surface = { ...resolved.surface, panelId: frame.surface.panelId };
+            }
+            else {
+                this.forgetFrameRequests(frame);
+                frame.onConnection?.(false);
+                frame.surface = { ...resolved.surface, panelId: frame.surface.panelId };
+                frame.connected = false;
+                frame.actor = null;
+                frame.nonce = null;
+                frame.generation = createPresentationRequestId();
+                frame.element.src = withChromeHints(new URL(resolved.surface.route, resolved.surface.origin).href, frame.chrome);
+            }
+            if (frame.view.presentationId)
+                this.update({ tools: this.snapshot.tools.map(tool => tool.presentationId === frame.view.presentationId
+                        ? { ...tool, resolved: { ...tool.resolved, surface: resolved.surface }, navigationRoot: resolved.surface.route,
+                            currentRoute: resolved.surface.route, readiness: "loading" } : tool) });
+        }, frame);
+    }
     getPresentation = (id, options) => waitForPresentation(this.status(id, "local"), id, options?.signal);
     async status(id, source, frame) {
         const generation = this.activityGeneration;
@@ -262,10 +721,11 @@ export class UiHost {
                 check();
                 if (!current.available)
                     return { status: "blocked", requestId: id, code: current.state };
-                const tool = this.snapshot.tools.find(t => t.key === panelKey(result.target.panel));
-                if (!tool || tool.target.route !== result.target.route || JSON.stringify(tool.resolved.surface) !== JSON.stringify(current.surface))
+                const tool = this.snapshot.tools.find(t => t.presentationId === result.presentationId);
+                // Navigation changes the live document, not the destination accepted by this request.
+                if ((tool && !tool.resolved.surface) || JSON.stringify(entry?.openingSurface) !== JSON.stringify(current.surface))
                     return { status: "blocked", requestId: id, code: "destination_changed" };
-                return { ...result, readiness: tool.readiness };
+                return { ...result, readiness: tool && tool.currentRoute === result.target.route ? tool.readiness : result.readiness };
             }
             return result ?? { status: "unknown", requestId: id, code: "presentation_unknown" };
         }
@@ -273,34 +733,95 @@ export class UiHost {
             return failure(id, error);
         }
     }
-    selectPanel = async (ref) => {
-        const opened = this.snapshot.tools.find(t => t.key === panelKey(ref));
-        return this.openSurface(opened?.resolved.surface ? opened.target : { panel: ref }, { placement: "side", requestId: createPresentationRequestId() });
+    selectPanel = async (ref, workspaceId = DEFAULT_WORKSPACE) => {
+        const opened = this.snapshot.tools.filter(t => t.workspaceId === workspaceId && t.key === panelKey(ref)).sort((a, b) => b.focusedAt - a.focusedAt)[0];
+        if (opened?.resolved.surface) {
+            const requestId = createPresentationRequestId();
+            try {
+                this.requireTools();
+                const state = this.workspaces.get(workspaceId);
+                const selection = ++state.generation;
+                this.invalidateRendererWork();
+                const generation = this.activityGeneration, own = await this.bootstrap();
+                if (!own.canHost)
+                    throw new UiError("app_permission_required", "Allow this app to host tools.");
+                const resolved = await uiRequest(this.path, "panels/resolve", opened.target);
+                this.checkActivity(generation);
+                this.requireTools();
+                if (selection !== state.generation)
+                    throw new UiError("presentation_superseded", "A newer action replaced this opening.");
+                if (!resolved.available || !resolved.surface)
+                    throw new UiError(resolved.state, "The tool is unavailable.");
+                const surface = opened.panelSurface;
+                if (surface.appId !== resolved.surface.appId || surface.installationId !== resolved.surface.installationId
+                    || surface.origin !== resolved.surface.origin || surface.endpoint !== resolved.surface.endpoint
+                    || JSON.stringify(surface.framePolicy) !== JSON.stringify(resolved.surface.framePolicy)) {
+                    this.update({ tools: this.snapshot.tools.map(t => t.presentationId === opened.presentationId
+                            ? { ...t, resolved: { ...t.resolved, available: false, surface: null, state: "destination_changed" } } : t) });
+                    throw new UiError("destination_changed", "The tool destination changed. Open its current version again.");
+                }
+                if (this.focusPresentation(opened.presentationId)) {
+                    const readiness = this.snapshot.tools.find(t => t.presentationId === opened.presentationId)?.readiness ?? opened.readiness;
+                    return { status: "opened", requestId, target: resolved.target, readiness, presentationId: opened.presentationId };
+                }
+            }
+            catch (error) {
+                return failure(requestId, error);
+            }
+        }
+        else if (opened)
+            this.closePresentation(opened.presentationId);
+        const requestId = createPresentationRequestId();
+        return waitForPresentation(this.open({ panel: ref }, { placement: "side", requestId }, "local", undefined, workspaceId), requestId);
     };
-    setExpanded = (expanded) => {
-        if (expanded && (!this.active || !this.activityReady))
-            return;
+    setExpanded = (expanded, workspaceId = DEFAULT_WORKSPACE) => {
         if (!expanded)
-            this.selectionGeneration++;
-        this.update({ expanded });
+            return this.collapseWorkspace(workspaceId);
+        if (!this.active || !this.activityReady || !this.getChrome().tools.enabled)
+            return;
+        const state = this.workspaces.get(workspaceId);
+        if (state) {
+            state.expanded = true;
+            this.publishWorkspaces();
+            if (state.expanded && state.selectedId)
+                state.renderer?.focus(state.selectedId);
+        }
+    };
+    setWidth = (width, workspaceId = DEFAULT_WORKSPACE) => {
+        const state = this.workspaces.get(workspaceId);
+        if (state && Number.isFinite(width)) {
+            state.width = Math.min(800, Math.max(280, width));
+            this.publishWorkspaces();
+        }
     };
-    setWidth = (width) => { if (Number.isFinite(width))
-        this.update({ width: Math.min(800, Math.max(280, width)) }); };
-    setAttention = (panel, attention) => this.update({ tools: this.snapshot.tools.map(t => t.key === panelKey(panel) ? { ...t, attention: Math.max(0, Math.floor(attention)) } : t) });
+    setAttention = (panel, attention) => this.update({ tools: this.snapshot.tools.map(t => (typeof panel === "string" ? t.presentationId === panel : t.key === panelKey(panel)) ? { ...t, attention: Math.max(0, Math.floor(attention)) } : t) });
     reportSurfaceState = (_state) => { };
     forgetFrameRequests(frame) {
+        frame.routeReport = undefined;
+        for (const [controller, work] of this.rendererWork)
+            if (work.frame === frame)
+                controller.abort();
         for (const [key, entry] of this.ledger)
             if (entry.frame === frame)
                 this.ledger.delete(key);
+        for (const [key, entry] of this.actions)
+            if (entry.frame === frame)
+                this.actions.delete(key);
     }
-    registerFrame = (element, surface, onConnection) => {
-        const frame = { element, surface, onConnection, generation: createPresentationRequestId(), nonce: null, connected: false, actor: null, live: true, cleanup: () => { }, waitForReadiness: () => { } };
+    registerFrame = (element, surface, onConnection, view) => {
+        const descriptor = view ?? { viewId: createPresentationRequestId(), workspaceId: DEFAULT_WORKSPACE, chrome: { navigation: "hide", tools: { launcher: "hide" } } };
+        if (descriptor.viewId === ROOT_VIEW || [...this.frames].some(f => f.view.viewId === descriptor.viewId))
+            throw new Error("A view ID must be unique.");
+        if (!this.workspaces.has(descriptor.workspaceId))
+            throw new Error("Register the workspace before its views.");
+        const frame = { element, surface, view: descriptor, chrome: structuredClone(this.viewChrome.get(descriptor.viewId) ?? descriptor.chrome ?? {}), policyRevision: 0, composition: false, onConnection, generation: createPresentationRequestId(), nonce: null, connected: false, actor: null, live: true, cleanup: () => { }, waitForReadiness: () => { } };
         let timer;
         const forget = () => this.forgetFrameRequests(frame);
         frame.waitForReadiness = () => {
             clearTimeout(timer);
             timer = setTimeout(() => {
-                const tool = this.snapshot.tools.find(t => t.target.panel.panelId === frame.surface.panelId && t.target.panel.appId === frame.surface.appId);
+                const tool = this.snapshot.tools.find(t => frame.view.presentationId ? t.presentationId === frame.view.presentationId
+                    : t.target.panel.panelId === frame.surface.panelId && t.resolved.surface?.appId === frame.surface.appId && t.target.route === frame.surface.route);
                 if (tool?.readiness === "loading")
                     this.reportFrame(frame, "unreported");
             }, DISCOVERY_TIMEOUT);
@@ -331,16 +852,16 @@ export class UiHost {
     reportFrame(frame, readiness) {
         if (!frame.surface.panelId || !this.active || !this.activityReady)
             return;
-        const tools = this.snapshot.tools.map(t => t.resolved.surface?.appId === frame.surface.appId
+        const tools = this.snapshot.tools.map(t => (frame.view.presentationId ? t.presentationId === frame.view.presentationId : t.resolved.surface?.appId === frame.surface.appId)
             && t.target.panel.panelId === frame.surface.panelId
-            && t.resolved.surface.installationId === frame.surface.installationId && t.resolved.surface.endpoint === frame.surface.endpoint
-            && t.target.route === frame.surface.route ? { ...t, readiness } : t);
+            && t.resolved.surface?.installationId === frame.surface.installationId && t.resolved.surface?.endpoint === frame.surface.endpoint
+            && (frame.view.presentationId !== undefined || t.target.route === frame.surface.route) ? { ...t, readiness } : t);
         this.update({ tools });
         for (const [key, entry] of this.ledger) {
             const result = entry.result;
             if (result?.status !== "opened")
                 continue;
-            const tool = tools.find(t => t.key === panelKey(result.target.panel) && t.target.route === result.target.route);
+            const tool = tools.find(t => t.presentationId === result.presentationId && t.currentRoute === result.target.route);
             if (!tool || tool.readiness === result.readiness)
                 continue;
             entry.result = { ...result, readiness: tool.readiness };
@@ -350,6 +871,43 @@ export class UiHost {
                 this.emit({ type: "presentation", value: entry.result });
         }
     }
+    reportRoute(frame, value, entryKey) {
+        if (!frame.view.presentationId)
+            return;
+        const route = canonicalSurfaceRoute(value);
+        if (frame.routeReport?.route === route && frame.routeReport.pending)
+            return;
+        const report = { route };
+        frame.routeReport = report;
+        const tool = this.snapshot.tools.find(t => t.presentationId === frame.view.presentationId);
+        const declared = this.snapshot.catalog.find(p => p.panel.appId === frame.surface.appId && p.panel.panelId === frame.surface.panelId);
+        const roots = [tool?.navigationRoot, declared?.origin === frame.surface.origin && declared.endpoint === frame.surface.endpoint ? declared.route : undefined];
+        const currentRoute = route && roots.some(root => root && routeWithin(route, root)) ? route : null;
+        this.update({ tools: this.snapshot.tools.map(t => t.presentationId === frame.view.presentationId && t.currentRoute !== currentRoute
+                ? { ...t, currentRoute, readiness: "unreported" } : t) });
+        if (currentRoute || !route || typeof entryKey !== "string" || !entryKey || entryKey.length > 256)
+            return;
+        const activity = this.activityGeneration, generation = frame.generation, nonce = frame.nonce, surface = frame.surface;
+        report.pending = (async () => {
+            try {
+                const resolved = await uiRequest(this.path, "navigation/resolve", {
+                    appId: surface.appId, installationId: surface.installationId, entryKey,
+                });
+                this.checkActivity(activity);
+                if (!frame.live || !frame.connected || frame.generation !== generation || frame.nonce !== nonce || frame.routeReport !== report
+                    || frame.actor !== this.snapshot.bootstrap?.userId)
+                    return;
+                const next = resolved.surface;
+                if (!resolved.available || !next || next.appId !== surface.appId || next.installationId !== surface.installationId
+                    || next.origin !== surface.origin || next.endpoint !== surface.endpoint || !routeWithin(route, next.route)
+                    || JSON.stringify(next.framePolicy) !== JSON.stringify(surface.framePolicy))
+                    return;
+                this.update({ tools: this.snapshot.tools.map(t => t.presentationId === frame.view.presentationId
+                        ? { ...t, navigationRoot: next.route, currentRoute: route, readiness: "unreported" } : t) });
+            }
+            catch { /* Local navigation remains usable when its host cannot verify new metadata. */ }
+        })().finally(() => { report.pending = undefined; });
+    }
     async receive(event) {
         if (!this.active || !this.activityReady || this.disposed)
             return;
@@ -368,7 +926,8 @@ export class UiHost {
                 frame.onConnection?.(false);
             }
             frame.nonce = msg.childNonce;
-            this.post(frame, { type: "hosty:ui:offer" });
+            frame.composition = Array.isArray(msg.capabilities) && msg.capabilities.includes(UI_COMPOSITION_CAPABILITY);
+            this.post(frame, { type: "hosty:ui:offer", capabilities: [UI_COMPOSITION_CAPABILITY] });
             return;
         }
         if (msg.hostWindowId !== this.windowId || msg.generation !== frame.generation || msg.childNonce !== frame.nonce || !frame.nonce)
@@ -391,7 +950,9 @@ export class UiHost {
                 frame.waitForReadiness();
             }
             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 });
+                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,
+                    rootDisabled: !this.getChrome().tools.enabled, endpoint: frame.surface.endpoint } : {}) });
             if (frame.connected !== wasConnected)
                 frame.onConnection?.(frame.connected);
             if (!frame.connected)
@@ -401,31 +962,59 @@ 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)) {
+            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)
+                    : { 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 });
+            return;
+        }
+        if (frame.composition && msg.type === "hosty:ui:route") {
+            this.reportRoute(frame, msg.route, msg.entryKey);
+            return;
+        }
+        if (msg.type === "hosty:ui:surface-state" && frame.routeReport?.pending) {
+            const report = frame.routeReport;
+            if (canonicalSurfaceRoute(msg.route) !== report.route)
+                return;
+            await report.pending;
+            if (!this.active || this.disposed || !frame.live || !frame.connected || frame.routeReport !== report
+                || source !== `${frame.surface.appId}:${frame.generation}:${frame.nonce}`)
+                return;
+        }
         if (msg.type === "hosty:ui:open" && validId(msg.requestId)) {
-            const result = await this.open(msg.target, { placement: msg.placement, requestId: msg.requestId }, source, frame);
+            const result = await this.open(msg.target, { placement: msg.placement, requestId: msg.requestId, reuse: frame.composition ? msg.reuse : undefined }, source, frame);
             if (source === `${frame.surface.appId}:${frame.generation}:${frame.nonce}`)
-                this.post(frame, { type: "hosty:ui:result", requestId: msg.requestId, result });
+                this.post(frame, { type: "hosty:ui:result", requestId: msg.requestId, result: this.peerResult(frame, result) });
         }
         else if (msg.type === "hosty:ui:status" && validId(msg.requestId)) {
             const result = await this.status(msg.requestId, source, frame);
             if (source === `${frame.surface.appId}:${frame.generation}:${frame.nonce}`)
-                this.post(frame, { type: "hosty:ui:result", requestId: msg.requestId, result });
+                this.post(frame, { type: "hosty:ui:result", requestId: msg.requestId, result: this.peerResult(frame, result) });
         }
         else if (msg.type === "hosty:ui:surface-state" && canonicalSurfaceRoute(msg.route) !== null
-            && canonicalSurfaceRoute(msg.route) === canonicalSurfaceRoute(frame.surface.route)) {
+            && canonicalSurfaceRoute(msg.route) === canonicalSurfaceRoute(frame.view.presentationId
+                ? this.snapshot.tools.find(t => t.presentationId === frame.view.presentationId)?.currentRoute : frame.surface.route)) {
             if (msg.state === "ready")
                 this.reportFrame(frame, "ready");
             else if (msg.state === "auth-required" || msg.state === "blocked")
                 this.reportFrame(frame, "auth-required");
         }
         else if (msg.type === "hosty:ui:dismiss") {
-            const selected = this.snapshot.tools.find(t => this.snapshot.selected && t.key === panelKey(this.snapshot.selected));
-            if (selected?.resolved.surface?.appId === frame.surface.appId && selected.target.panel.panelId === frame.surface.panelId && selected.target.route === frame.surface.route)
-                window.dispatchEvent(new CustomEvent("hosty:ui:drawer-dismiss"));
+            const selected = this.snapshot.tools.find(t => t.presentationId === this.workspaces.get(frame.view.workspaceId)?.selectedId);
+            if (selected && (frame.view.presentationId ? selected.presentationId === frame.view.presentationId
+                : selected.resolved.surface?.appId === frame.surface.appId && selected.target.panel.panelId === frame.surface.panelId && selected.target.route === frame.surface.route))
+                window.dispatchEvent(new CustomEvent("hosty:ui:drawer-dismiss", { detail: frame.view.workspaceId }));
         }
     }
     dispose = () => {
+        if (this.disposed)
+            return;
+        this.resetPresentations();
         this.disposed = true;
+        this.composition.dispose();
+        this.actions.clear();
         for (const frame of this.frames)
             frame.cleanup();
         window.removeEventListener("message", this.onMessage);
@@ -433,6 +1022,7 @@ export class UiHost {
         this.listeners.clear();
         this.events.clear();
         this.ledger.clear();
+        this.viewChrome.clear();
         if (documentHost === this)
             documentHost = null;
     };