@unofficialbox/box-open-elements 0.19.0 → 0.21.0

package/dist/patterns/call-console/call-console.js

@@ -0,0 +1,201 @@
+import { BaseElement } from "../../core/element.js";
+import { SplitView } from "../../components/layout/split-view.js";
+import { Button } from "../../components/actions/button.js";
+import { CodeBlock } from "../../components/output/code-block.js";
+import { boeControl, boeRadius } from "../../foundations/geometry/index.js";
+import { boeStatusGlyph, boeStatusStyles } from "../../foundations/status/index.js";
+import { boeEntrance, boeEntranceKeyframes, boeReducedMotionPolicy } from "../../foundations/motion/index.js";
+import { callFailed, callStatus, formatCallHttp } from "./types.js";
+const DEFAULT_TAG_NAME = "box-call-console";
+export async function copyCallText(text, doc = document) {
+    try {
+        await doc.defaultView?.navigator.clipboard.writeText(text);
+        if (doc.defaultView?.navigator.clipboard)
+            return true;
+    }
+    catch { }
+    const active = doc.activeElement;
+    const textarea = doc.createElement("textarea");
+    textarea.value = text;
+    textarea.style.cssText = "position:fixed;opacity:0";
+    doc.body.append(textarea);
+    textarea.select();
+    try {
+        return doc.execCommand?.("copy") ?? false;
+    }
+    finally {
+        textarea.remove();
+        active?.focus({ preventScroll: true });
+    }
+}
+export class CallConsole extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    model = null;
+    unsubscribe;
+    selected = "";
+    clearing = false;
+    rowSignatures = new WeakMap();
+    get callController() { return this.model; }
+    set callController(value) { this.unsubscribe?.(); this.model = value; if (this.isConnected)
+        this.listen(); if (this.isRendered)
+        this.update(); }
+    listen() { this.unsubscribe?.(); this.unsubscribe = this.model?.subscribe(() => this.update()); }
+    connectedCallback() { super.connectedCallback(); this.listen(); }
+    disconnectedCallback() { this.unsubscribe?.(); }
+    renderTemplate() {
+        SplitView.register();
+        Button.register();
+        CodeBlock.register();
+        this.shadowRoot.innerHTML = `<style>:host{display:block;min-width:0;color:var(--boe-token-text-text,#222);font:inherit}:host([hidden]){display:none !important}
+    :host{container-type:inline-size;font-size:14px;line-height:1.5}
+    *{box-sizing:border-box} [hidden]{display:none!important}
+    [part="console"]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:${boeRadius.large};background:var(--boe-token-surface-surface,#fff);overflow:hidden}
+    header,.filters,.pane-heading{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;padding:1rem}
+    header{justify-content:space-between} h2,h3,p{margin:0} h2{font-size:16px} h3{font-size:14px} small,.muted{color:var(--boe-token-text-text-secondary,#666);font-size:12px}
+    #connection{display:inline-flex;align-items:center;gap:.4rem;font-size:12px}
+    .filters{border-block:1px solid var(--boe-token-stroke-stroke,#ddd);background:var(--boe-token-surface-surface-secondary,#f7f7f7);padding:.75rem 1rem}
+    label{display:flex;align-items:center;gap:.5rem;font-size:13px} .search{flex:1;min-width:10rem} .search input{width:100%}
+    input[type="search"],select{min-height:${boeControl.height};border:1px solid var(--boe-token-stroke-stroke,#ccc);border-radius:${boeRadius.control};background:var(--boe-token-surface-surface,#fff);color:inherit;font:inherit;padding:.35rem .65rem;min-width:0}
+    input[type="checkbox"]{accent-color:var(--boe-token-surface-surface-brand,#0061d5)}
+    button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--boe-token-surface-surface-brand,#0061d5);outline-offset:-2px}
+    .pane-heading{justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--boe-token-stroke-stroke,#ddd)}
+    #list{overflow:auto;max-height:34rem;min-height:20rem;padding:.35rem}
+    [part="call"]{font:inherit;color:inherit;border:1px solid transparent;background:transparent;border-radius:${boeRadius.med};width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;text-align:left;gap:.3rem .75rem;padding:.75rem;cursor:pointer;${boeEntrance()}}
+    [part="call"]:hover{background:var(--boe-token-surface-surface-secondary,#f5f5f5)}
+    [part="call"][aria-current="true"]{background:var(--boe-token-surface-item-surface-selected,#eaf3ff);border-color:var(--boe-token-surface-surface-brand,#0061d5)}
+    [part="call"] span{min-width:0;overflow-wrap:anywhere} [part="call"] .state{display:flex;gap:.4rem;align-items:center;font-size:12px} [part="call"] .summary{font-weight:600} [part="call"] .duration{text-align:right;font-variant-numeric:tabular-nums;font-size:12px}
+    #inspector{padding:1rem;min-width:0;max-height:38rem;overflow:auto} #summary{font-size:15px;overflow-wrap:anywhere} #metadata{margin:.25rem 0 1rem;overflow-wrap:anywhere} .code-heading{margin:1rem 0 .5rem}
+    #outcome{padding:.6rem .75rem;margin:.75rem 0;border-radius:${boeRadius.med};background:var(--boe-token-surface-surface-secondary,#f5f5f5);overflow-wrap:anywhere}
+    #copy-status{font-size:12px;color:var(--boe-token-text-text-secondary,#666)}
+    #list-empty,#detail-empty{padding:2.5rem 1rem;text-align:center;color:var(--boe-token-text-text-secondary,#666)}
+    [part="skeleton"]{height:3rem;margin:.5rem;background:var(--boe-token-surface-surface-secondary,#eee);border-radius:${boeRadius.med}}
+    box-code-block::part(pre){max-height:18rem;overflow:auto}
+    @container(max-width:640px){box-split-view::part(split-view){grid-template-columns:minmax(0,1fr)!important}box-split-view::part(separator){display:none}#list{min-height:0;max-height:17rem}#inspector{border-top:1px solid var(--boe-token-stroke-stroke,#ddd)}.search{flex-basis:100%}}
+    ${boeEntranceKeyframes}${boeStatusStyles}${boeReducedMotionPolicy}</style>
+    <section part="console" aria-label="API call console">
+    <header><div><h2>API calls</h2><small>Inspect requests, responses, and tool outcomes</small></div><span id="connection" role="status"></span><box-button id="retry" label="Reconnect" tone="neutral" hidden></box-button></header>
+    <div class="filters"><label class="search">Search <input id="search" type="search" placeholder="Method, URL, or summary"></label><label>Service <select id="service" aria-label="Service"><option value="">All services</option></select></label><label><input type="checkbox" id="errors"> Errors only</label><box-button id="clear" label="Clear calls" tone="neutral"></box-button></div>
+    <box-split-view resizable ratio="0.42" label="Calls and request inspector"><section slot="primary" aria-label="Calls"><div class="pane-heading"><h3>Requests</h3><span id="count" class="muted" role="status"></span></div><div id="list"></div><p id="list-empty" role="status" hidden></p></section><section aria-label="Request inspector"><div class="pane-heading"><h3>Inspector</h3><box-button data-copy="both" label="Copy both" tone="neutral"></box-button><span id="copy-status" role="status"></span></div><p id="detail-empty">Select a request to inspect its details.</p><div id="inspector" hidden><h3 id="summary"></h3><p id="metadata" class="muted"></p><p id="outcome" role="status" hidden></p><h3 class="code-heading">Request</h3><box-code-block id="request" copy-label="Copy request" wrap></box-code-block><h3 class="code-heading">Response</h3><box-code-block id="response" copy-label="Copy response" wrap></box-code-block></div></section></box-split-view></section>`;
+    }
+    setupListeners() {
+        this.shadowRoot.querySelector("#list").addEventListener("keydown", event => {
+            const e = event;
+            const rows = Array.from(this.shadowRoot.querySelectorAll('[part="call"]'));
+            const current = rows.indexOf(e.target);
+            if (current < 0 || !["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key))
+                return;
+            e.preventDefault();
+            const next = e.key === "Home" ? 0 : e.key === "End" ? rows.length - 1 : (current + (e.key === "ArrowDown" ? 1 : -1) + rows.length) % rows.length;
+            rows[next].focus();
+            rows[next].click();
+        });
+        const filter = () => { this.update(); this.dispatchEvent(new CustomEvent("filters-changed", { bubbles: true, composed: true, detail: this.filters })); };
+        this.shadowRoot.querySelector("#service").addEventListener("change", filter);
+        this.shadowRoot.querySelector("#errors").addEventListener("change", filter);
+        this.shadowRoot.querySelector("#search").addEventListener("input", filter);
+        this.shadowRoot.querySelector("#retry").addEventListener("click", () => { void this.model?.connect(); });
+        this.shadowRoot.querySelector("#clear").addEventListener("click", async () => {
+            if (!this.model || this.clearing)
+                return;
+            this.clearing = true;
+            this.update();
+            try {
+                await this.model.clear();
+                this.dispatchEvent(new CustomEvent("calls-cleared", { bubbles: true, composed: true }));
+            }
+            catch {
+                this.shadowRoot.querySelector("#copy-status").textContent = "Unable to clear calls. Try again.";
+            }
+            finally {
+                this.clearing = false;
+                this.update();
+            }
+        });
+        this.shadowRoot.querySelectorAll("[data-copy]").forEach(b => b.addEventListener("click", async () => {
+            const entry = this.model?.entries.find(e => e.id === this.selected);
+            if (!entry)
+                return;
+            const ok = await copyCallText(formatCallHttp(entry, b.dataset.copy));
+            this.shadowRoot.querySelector("#copy-status").textContent = ok ? "Copied" : "Copy unavailable; select the text to copy";
+        }));
+    }
+    get filters() {
+        return { service: this.shadowRoot.querySelector("#service").value, errorsOnly: this.shadowRoot.querySelector("#errors").checked, query: this.shadowRoot.querySelector("#search").value };
+    }
+    update() {
+        if (!this.isRendered)
+            return;
+        const state = this.model?.connection ?? "connecting";
+        const connection = this.shadowRoot.querySelector("#connection");
+        connection.textContent = this.model ? ({ live: "Live", connecting: "Connecting…", reconnecting: "Reconnecting…", unavailable: "Endpoint unavailable" }[state]) : "Not connected";
+        this.shadowRoot.querySelector("#retry").hidden = !this.model || state === "live" || state === "connecting";
+        const clear = this.shadowRoot.querySelector("#clear");
+        clear.disabled = this.clearing || !this.model?.entries.length;
+        clear.label = this.clearing ? "Clearing…" : "Clear calls";
+        const service = this.shadowRoot.querySelector("#service");
+        const services = [...new Set(this.model?.entries.map(e => e.service) ?? [])];
+        for (const name of services)
+            if (!Array.from(service.options).some(o => o.value === name)) {
+                const option = document.createElement("option");
+                option.value = name;
+                option.textContent = name;
+                service.append(option);
+            }
+        const errors = this.shadowRoot.querySelector("#errors").checked;
+        const entries = this.model?.entries.filter(e => (!service.value || e.service === service.value) && (!errors || callFailed(e))) ?? [];
+        const query = this.filters.query.trim().toLowerCase();
+        const filtered = entries.filter(e => `${e.method} ${e.url} ${e.summary} ${e.service}`.toLowerCase().includes(query));
+        entries.splice(0, entries.length, ...filtered);
+        if (!entries.some(e => e.id === this.selected))
+            this.selected = entries[0]?.id ?? "";
+        const list = this.shadowRoot.querySelector("#list");
+        const focused = this.shadowRoot.activeElement?.getAttribute("data-call-id");
+        list.querySelectorAll('[part="skeleton"]').forEach(el => el.remove());
+        const existing = new Map(Array.from(list.children).map(el => [el.getAttribute("data-call-id"), el]));
+        for (const [index, entry] of entries.entries()) {
+            let button = existing.get(entry.id);
+            existing.delete(entry.id);
+            if (!button) {
+                button = document.createElement("button");
+                button.type = "button";
+                button.setAttribute("part", "call");
+                button.dataset.callId = entry.id;
+                button.addEventListener("click", () => { this.selected = entry.id; this.update(); this.dispatchEvent(new CustomEvent("call-selected", { bubbles: true, composed: true, detail: { id: entry.id } })); });
+            }
+            button.setAttribute("aria-current", String(entry.id === this.selected));
+            const labels = [callStatus(entry), entry.service, entry.summary, entry.pending ? "In progress" : `${Math.round(entry.durationMs)} ms`];
+            const signature = JSON.stringify(labels);
+            if (this.rowSignatures.get(button) !== signature) {
+                button.replaceChildren(...labels.map((text, index) => { const span = document.createElement("span"); span.textContent = text; span.className = ["state", "muted", "summary", "duration"][index]; if (index === 0) {
+                    const icon = document.createElement("span");
+                    icon.innerHTML = boeStatusGlyph(entry.pending ? "active" : callFailed(entry) ? "failed" : entry.expected ? "skipped" : "done");
+                    span.prepend(icon);
+                } return span; }));
+                this.rowSignatures.set(button, signature);
+            }
+            if (list.children[index] !== button)
+                list.insertBefore(button, list.children[index] ?? null);
+            if (entry.id === focused)
+                button.focus({ preventScroll: true });
+        }
+        existing.forEach(el => el.remove());
+        if (!entries.length && state === "connecting" && this.model)
+            list.innerHTML = '<div part="skeleton"></div><div part="skeleton"></div><div part="skeleton"></div>';
+        this.shadowRoot.querySelector("#count").textContent = `${entries.length} of ${this.model?.entries.length ?? 0}`;
+        const empty = this.shadowRoot.querySelector("#list-empty");
+        empty.hidden = entries.length > 0 || !!this.model && state === "connecting";
+        empty.textContent = !this.model ? "Connect a call controller to inspect requests." : state === "unavailable" ? "The /calls endpoint is unavailable. Start the agent, then reconnect." : state === "reconnecting" ? "Connection interrupted. Reconnect to load calls." : this.model.entries.length ? "No requests match these filters." : "No calls yet. New requests will appear here.";
+        const entry = entries.find(e => e.id === this.selected);
+        this.shadowRoot.querySelector('[data-copy="both"]').disabled = !entry;
+        this.shadowRoot.querySelector("#inspector").hidden = !entry;
+        this.shadowRoot.querySelector("#detail-empty").hidden = !!entry;
+        this.shadowRoot.querySelector("#summary").textContent = entry?.summary ?? "";
+        this.shadowRoot.querySelector("#metadata").textContent = entry ? `${entry.service} · ${entry.method} · ${entry.pending ? "In progress" : `${entry.durationMs} ms`} · ${new Date(entry.startedAt).toLocaleTimeString()}` : "";
+        const outcome = this.shadowRoot.querySelector("#outcome");
+        outcome.hidden = !entry || !(entry.error || entry.rpcError || entry.expected || entry.pending);
+        outcome.textContent = entry?.rpcError ? `Tool failed despite HTTP ${entry.status}: ${entry.rpcError}` : entry?.error ?? entry?.expected ?? (entry?.pending ? "Waiting for the response…" : "");
+        this.shadowRoot.querySelector("#request").code = entry ? formatCallHttp(entry, "request") : "";
+        this.shadowRoot.querySelector("#response").code = entry ? entry.pending ? "Response pending" : formatCallHttp(entry, "response") : "";
+    }
+}
+CallConsole.register();

package/dist/patterns/call-console/controller.d.ts

@@ -0,0 +1,23 @@
+import type { CallConnection, CallEntry, CallEvent } from "./types.js";
+export interface CallConsoleTransport {
+    snapshot(signal: AbortSignal): Promise<CallEntry[]>;
+    subscribe(onEvent: (event: CallEvent) => void, onConnection: (state: CallConnection) => void): () => void;
+    clear(): Promise<void>;
+}
+/** Transport injection keeps networking out of the component. */
+export declare class CallConsoleController {
+    readonly transport: CallConsoleTransport;
+    entries: CallEntry[];
+    connection: CallConnection;
+    private listeners;
+    private abort?;
+    private close?;
+    constructor(transport: CallConsoleTransport);
+    subscribe(fn: () => void): () => void;
+    private emit;
+    apply(event: CallEvent): void;
+    connect(): Promise<void>;
+    clear(): Promise<void>;
+    disconnect(): void;
+    destroy(): void;
+}

package/dist/patterns/call-console/controller.js

@@ -0,0 +1,50 @@
+/** Transport injection keeps networking out of the component. */
+export class CallConsoleController {
+    transport;
+    entries = [];
+    connection = "connecting";
+    listeners = new Set();
+    abort;
+    close;
+    constructor(transport) {
+        this.transport = transport;
+    }
+    subscribe(fn) { this.listeners.add(fn); return () => this.listeners.delete(fn); }
+    emit() { this.listeners.forEach(fn => fn()); }
+    apply(event) {
+        if (event.type === "snapshot")
+            this.entries = event.entries;
+        else if (event.type === "clear")
+            this.entries = [];
+        else
+            this.entries = this.entries.some(e => e.id === event.entry.id) ? this.entries.map(e => e.id === event.entry.id ? event.entry : e) : [event.entry, ...this.entries];
+        this.emit();
+    }
+    async connect() {
+        this.disconnect();
+        const abort = new AbortController();
+        this.abort = abort;
+        this.connection = "connecting";
+        this.emit();
+        try {
+            const entries = await this.transport.snapshot(abort.signal);
+            if (abort.signal.aborted)
+                return;
+            this.apply({ type: "snapshot", entries });
+            this.close = this.transport.subscribe(event => { if (!abort.signal.aborted)
+                this.apply(event); }, state => { if (!abort.signal.aborted) {
+                this.connection = state;
+                this.emit();
+            } });
+        }
+        catch (error) {
+            if (!abort.signal.aborted) {
+                this.connection = error instanceof Error && error.message === "404" ? "unavailable" : "reconnecting";
+                this.emit();
+            }
+        }
+    }
+    async clear() { await this.transport.clear(); this.apply({ type: "clear" }); }
+    disconnect() { this.abort?.abort(); this.close?.(); this.close = undefined; }
+    destroy() { this.disconnect(); this.listeners.clear(); }
+}

package/dist/patterns/call-console/http-transport.d.ts

@@ -0,0 +1,3 @@
+import type { CallConsoleTransport } from "./controller.js";
+/** Optional browser adapter for the documented snapshot/SSE/DELETE contract. */
+export declare function createCallConsoleTransport(base?: string): CallConsoleTransport;

package/dist/patterns/call-console/http-transport.js

@@ -0,0 +1,26 @@
+/** Optional browser adapter for the documented snapshot/SSE/DELETE contract. */
+export function createCallConsoleTransport(base = "/calls") {
+    return {
+        async snapshot(signal) { const response = await fetch(base, { signal }); if (!response.ok)
+            throw new Error(String(response.status)); return await response.json(); },
+        subscribe(onEvent, onConnection) {
+            const events = new EventSource(`${base}/stream`);
+            events.onopen = () => onConnection("live");
+            events.onerror = () => onConnection("reconnecting");
+            for (const type of ["snapshot", "call", "clear"])
+                events.addEventListener(type, event => {
+                    try {
+                        const data = JSON.parse(event.data);
+                        if (data.type === type)
+                            onEvent(data);
+                    }
+                    catch {
+                        onConnection("reconnecting");
+                    }
+                });
+            return () => events.close();
+        },
+        async clear() { const response = await fetch(base, { method: "DELETE" }); if (!response.ok)
+            throw new Error(String(response.status)); },
+    };
+}

package/dist/patterns/call-console/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export * from "./controller.js";
+export * from "./http-transport.js";
+export * from "./call-console.js";

package/dist/patterns/call-console/index.js

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export * from "./controller.js";
+export * from "./http-transport.js";
+export * from "./call-console.js";

package/dist/patterns/call-console/types.d.ts

@@ -0,0 +1,32 @@
+export interface CallEntry {
+    id: string;
+    startedAt: number;
+    durationMs: number;
+    pending: boolean;
+    service: string;
+    summary: string;
+    method: string;
+    url: string;
+    requestHeaders: Record<string, string>;
+    requestBody?: string;
+    status: number;
+    statusText: string;
+    responseHeaders: Record<string, string>;
+    responseBody?: string;
+    error?: string;
+    expected?: string;
+    rpcError?: string;
+}
+export type CallEvent = {
+    type: "snapshot";
+    entries: CallEntry[];
+} | {
+    type: "call";
+    entry: CallEntry;
+} | {
+    type: "clear";
+};
+export type CallConnection = "connecting" | "live" | "reconnecting" | "unavailable";
+export declare const callFailed: (entry: CallEntry) => boolean;
+export declare const callStatus: (entry: CallEntry) => string;
+export declare const formatCallHttp: (entry: CallEntry, side?: "request" | "response" | "both") => string;

package/dist/patterns/call-console/types.js

@@ -0,0 +1,8 @@
+export const callFailed = (entry) => !entry.pending && Boolean(entry.error || entry.rpcError || (!entry.expected && (entry.status < 200 || entry.status >= 300)));
+export const callStatus = (entry) => entry.pending ? "Pending" : entry.rpcError ? "Tool error" : entry.error ? "Failed" : entry.expected ? "Expected" : callFailed(entry) ? "Failed" : "Done";
+export const formatCallHttp = (entry, side = "both") => {
+    const headers = (h) => Object.entries(h).map(([k, v]) => `${k}: ${v}`).join("\n");
+    const request = `${entry.method} ${entry.url}\n${headers(entry.requestHeaders)}\n\n${entry.requestBody ?? ""}`;
+    const response = `HTTP ${entry.status} ${entry.statusText}\n${headers(entry.responseHeaders)}\n\n${entry.responseBody ?? ""}${entry.rpcError || entry.error ? `\n${entry.rpcError ?? entry.error}` : ""}`;
+    return side === "request" ? request : side === "response" ? response : `${request}\n\n${response}`;
+};

package/dist/patterns/content-explorer/adapters/action-menu.js

@@ -206,6 +206,8 @@ export class ExplorerActionMenu extends BaseElement {
                 if (this.itemIdValue && actionId) {
                     const item = this.controllerValue?.getState().items.find(entry => entry.id === this.itemIdValue) ?? null;
                     const action = this.controllerValue?.getItemActions(this.itemIdValue).find(entry => entry.id === actionId) ?? null;
+                    if (!action || action.disabled)
+                        return;
                     this.controllerValue?.invokeItemAction(this.itemIdValue, actionId);
                     if (item && action) {
                         this.dispatchEvent(new CustomEvent(toKebabCase("itemActionInvoked"), {
@@ -249,7 +251,7 @@ export class ExplorerActionMenu extends BaseElement {
                 });
                 return;
             }
-            const menuItems = Array.from(this.shadowRoot.querySelectorAll('[part="menu-item"]'));
+            const menuItems = Array.from(this.shadowRoot.querySelectorAll('[part="menu-item"]:not(:disabled)'));
             handleRovingKeydown(keyboardEvent, menuItems, { orientation: "vertical" });
         });
     }
@@ -269,7 +271,7 @@ export class ExplorerActionMenu extends BaseElement {
         }
         const menuMarkup = this.open
             ? `<div id="${this.menuId}" part="menu" role="menu">${actions
-                .map(action => `<button type="button" part="menu-item" role="menuitem" data-action-id="${escapeHtml(action.id)}">${escapeHtml(action.label)}</button>`)
+                .map(action => `<button type="button" part="menu-item" role="menuitem" data-action-id="${escapeHtml(action.id)}" ${action.disabled ? 'disabled aria-disabled="true" tabindex="-1"' : ''}>${escapeHtml(action.label)}</button>`)
                 .join("")}</div>`
             : "";
         this.hostEl.innerHTML = `
@@ -286,12 +288,12 @@ export class ExplorerActionMenu extends BaseElement {
       </div>
     `;
         if (this.open) {
-            const menuItems = Array.from(this.shadowRoot?.querySelectorAll('[part="menu-item"]') ?? []);
+            const menuItems = Array.from(this.shadowRoot?.querySelectorAll('[part="menu-item"]:not(:disabled)') ?? []);
             applyRovingTabindex(menuItems, 0);
         }
         if (justOpened) {
             queueMicrotask(() => {
-                this.shadowRoot?.querySelector('[part="menu-item"]')?.focus();
+                this.shadowRoot?.querySelector('[part="menu-item"]:not(:disabled)')?.focus();
             });
             return;
         }
@@ -302,7 +304,7 @@ export class ExplorerActionMenu extends BaseElement {
             });
             return;
         }
-        if (focusedTrigger) {
+        if (focusedTrigger || (focusedActionId && !this.open)) {
             queueMicrotask(() => {
                 this.shadowRoot?.querySelector('[part="trigger"]')?.focus();
             });

package/dist/patterns/content-explorer/adapters/toolbar.js

@@ -9,6 +9,7 @@ const toKebabCase = (value) => value.replace(/[A-Z]/g, letter => `-${letter.toLo
 const elementStyles = `
         :host {
           display: block;
+          min-inline-size: 0;
           color: inherit;
           font: inherit;
         }
@@ -33,14 +34,15 @@ const elementStyles = `
 
         [part="search"] {
           flex: 1 1 14rem;
-          min-width: 12rem;
+          min-width: 0;
+          max-width: 100%;
         }
 
         [part="status"],
         [part="selection-count"] {
           color: var(--boe-token-text-text-secondary, #6f6f6f);
           font-size: 0.85rem;
-          white-space: nowrap;
+          overflow-wrap: anywhere;
           padding-bottom: 0.45rem;
         }
 
@@ -54,6 +56,8 @@ const elementStyles = `
 
         [part="refresh"],
         [part="clear-selection"] {
+          max-inline-size: 100%;
+          overflow-wrap: anywhere;
           appearance: none;
           font: inherit;
           font-size: 0.88rem;

package/dist/patterns/content-uploader/content-uploader.js

@@ -728,7 +728,8 @@ export class ContentUploader extends BaseElement {
             </div>
             <box-progress-bar
               part="row-progress"
-              label="${escapeHtml(`${item.name} upload progress`)}"
+              hide-label
+              label="${escapeHtml(item.name)}"
               max="100"
               value="${String(Math.round(item.progress * 100))}"
             ></box-progress-bar>

package/dist/patterns/file-request/file-request-builder.js

@@ -302,6 +302,7 @@ export class FileRequestBuilder extends BaseElement {
         if (!host) {
             return;
         }
+        const focusedSetting = this.shadowRoot.activeElement?.getAttribute("data-setting-id");
         host.innerHTML = `
       <section part="builder">
         <header part="header">
@@ -318,6 +319,8 @@ export class FileRequestBuilder extends BaseElement {
       </section>
     `;
         this.shadowRoot.querySelectorAll("[data-setting-id]").forEach(input => {
+            if (focusedSetting === input.dataset.settingId)
+                input.focus({ preventScroll: true });
             input.addEventListener("change", () => {
                 const settingId = input.dataset.settingId;
                 if (!settingId) {

package/dist/patterns/flow-builder/flow-builder.d.ts

@@ -0,0 +1,48 @@
+import { BaseElement } from "../../core/index.js";
+import { type FlowKind, type FlowNode, type NodePath } from "./model.js";
+export type InspectorRenderer = (node: FlowNode, container: HTMLElement) => void | (() => void);
+/** Host-owned document editing with accessible navigation and responsive inspection. */
+export declare class FlowBuilder extends BaseElement {
+    static readonly tagName = "box-flow-builder";
+    private nodesValue;
+    private catalogValue;
+    private selectedValue;
+    private invalidValue;
+    private renderer?;
+    private cleanupInspector?;
+    private inspected;
+    private renderedRenderer?;
+    private observer?;
+    private narrow;
+    private insertion?;
+    private invoker?;
+    private spine;
+    private palette;
+    private picker;
+    private popup;
+    private aside;
+    private inspector;
+    private drawer;
+    private error;
+    get nodes(): FlowNode[];
+    set nodes(value: FlowNode[]);
+    get catalog(): readonly FlowKind[];
+    set catalog(value: readonly FlowKind[]);
+    get selected(): FlowNode | null;
+    set selected(node: FlowNode | null);
+    get renderInspector(): InspectorRenderer | undefined;
+    set renderInspector(renderer: InspectorRenderer | undefined);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private setNarrow;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private closePicker;
+    private insert;
+    select(node: FlowNode | null): void;
+    /** Mark validation without opening a sheet over the error on a narrow screen. */
+    setValidation(message: string, path?: NodePath, document?: unknown): void;
+    refresh(): void;
+    protected update(): void;
+    private updateInspector;
+}