@noodleseed/assistant 1.21.0 → 1.23.0

package/README.md

@@ -2,8 +2,9 @@
 
 Customer-branded embedded assistant surfaces for Noodle Seed deployments.
 
-The package exports the canonical `<noodle-assistant>` Web Component, a managed React wrapper and secure
-`NoodleAppView` MCP App renderer from `@noodleseed/assistant/react`, a renderer-free React hook from
+The package exports the canonical `<noodle-assistant>` managed Web Component, the framework-neutral
+`<noodle-app-view>` MCP App host from `@noodleseed/assistant/app-view`, a managed React wrapper and
+`NoodleAppView` adapter from `@noodleseed/assistant/react`, a renderer-free React hook from
 `@noodleseed/assistant/react/client`, a DOM-free client from `@noodleseed/assistant/client`, and the
 backend-only `createAssistantSession` helper from `@noodleseed/assistant/server`. Light, dark, and automatic
 themes work without configuration; the component inherits the deployed MCP server's brand kit while slots,
@@ -222,7 +223,10 @@ instead of `sessionEndpoint` — the two are mutually exclusive, and a public em
 ```
 
 A public embed opens its session on **first open**, never on mount — every mount would otherwise spend
-one of the surface's daily admission budget. Add `signIn: true` to the surface and it becomes **mixed**:
+one of the surface's daily admission budget. While that first session is resolving, the launcher remains as
+a loading affordance and the panel stays hidden. The panel's first visible frame therefore already carries
+the deployment's compiled name, labels, presentation, and light/dark brand tokens instead of flashing the
+built-in defaults. Add `signIn: true` to the surface and it becomes **mixed**:
 anonymous visitors start immediately, and identity-dependent capabilities raise the sign-in flow below.
 Before shipping, preflight the host with `noodle assistant embed --check --surface public` (or `mixed`) —
 it verifies `script-src` too, the one CSP directive whose failure runs no widget code at all.
@@ -373,20 +377,54 @@ if (part.type === "data-view") {
 }
 ```
 
-`NoodleAppView` owns the double iframe and AppBridge. Its lifecycle identity is the supplied client plus
+`<noodle-app-view>` owns the double iframe and AppBridge; `NoodleAppView` delegates to it. Its lifecycle identity is the supplied client plus
 `view.id` plus `view.resourceUri`: ordinary parent rerenders and fresh view/callback objects retain the
 iframe, while a semantic view replacement or unmount requests standard App teardown and closes the bridge.
 Do not also key an ancestor by the whole view object or a callback. Pass the embedding application's
 resolved `"light"` or `"dark"` theme; later changes are published through MCP Apps host context without
 replacing the iframe.
 
+App views stay inline by default. The host advertises only inline presentation and rejects an untrusted
+App's fullscreen request, so stale or third-party widget code cannot take over the embedding application's
+viewport. If fullscreen is an intentional part of the customer-owned experience, opt in explicitly with
+`allowFullscreen` on `NoodleAppView` or `allow-fullscreen` on `<noodle-app-view>`; do not enable it merely
+because a widget requests it. After an accepted fullscreen request, the host displays an accessible exit
+control in the top-right corner. It returns the same mounted App to inline mode without resetting its state.
+
+Vue, Angular, and plain DOM renderers use the same host without installing React. Import its dedicated entry
+once, then assign the complex values as element properties. In Vue, the explicit `.prop` modifier makes that
+boundary unambiguous:
+
+```vue
+<script setup lang="ts">
+import "@noodleseed/assistant/app-view";
+</script>
+
+<template>
+  <noodle-app-view
+    :client.prop="assistant"
+    :view.prop="part.data"
+    :theme="resolvedTheme"
+    @assistant-error="reportAssistantError"
+  />
+</template>
+```
+
+Configure Vue's `isCustomElement` for `noodle-app-view`. Angular uses the same element with `[client]`,
+`[view]`, and `[theme]` property bindings. Do not serialize `client` or `view` into attributes.
+
+`<noodle-app-view>` is the canonical host; `NoodleAppView` delegates to it. Both use the
+service-advertised sandbox URL, route App calls through the supplied client, publish theme changes without
+replacing the iframe, and request standard teardown on semantic replacement, disconnect, or an App teardown
+request.
+
 The App document owns its action intent: it calls standard `tools/call` after connecting and never relies on
 native form navigation. If that call needs input or confirmation, the same `client` publishes the normal
 pending interaction part for either managed or customer-owned rendering. The original App call stays pending
 and receives its MCP result after `client.respond(...)`; applications must not retry or translate the click.
 
-Outside React, subscribe to the DOM-free AI SDK `UIMessage` state without registering a custom element or
-touching browser storage:
+Outside React, subscribe to the DOM-free AI SDK `UIMessage` state without touching browser storage. The
+client itself registers no element; import `/app-view` only when the transcript renders linked MCP Apps:
 
 ```ts
 import { createAssistantClient } from "@noodleseed/assistant/client";
@@ -488,8 +526,8 @@ flow collects all elicited input before its first connector operation.
 
 A completed widget-linked tool emits typed `view_available` data with its call/interaction id, tool,
 `ui://` resource identity, optional title, bounded/redacted public result, and—on current services—the
-self-contained App document. This is an availability signal, not proof of rendering. A customer-owned React
-renderer either mounts the actual App with `NoodleAppView` or deliberately substitutes a component already
+self-contained App document. This is an availability signal, not proof of rendering. A customer-owned
+renderer either mounts the actual App with `<noodle-app-view>` (or its React `NoodleAppView` adapter) or deliberately substitutes a component already
 trusted by the application and selected by `resourceUri`/tool. The JSON `result` is data for a native
 component; serializing it is not a rendering of the linked App. Never fetch the `ui://` URI, inject
 `part.data.html`, or assign it to `srcdoc` yourself. The standard element also forwards the same detail as a
@@ -612,7 +650,7 @@ shadow-DOM selectors and classes are not public API.
 
 `theme="auto"` follows the browser's operating-system color preference. When the embedding application has
 its own theme toggle, pass its resolved `"light"` or `"dark"` value to `NoodleAssistant` and every
-`NoodleAppView`. Updates change the assistant in place and notify mounted MCP Apps through standard host
+`<noodle-app-view>`/`NoodleAppView`. Updates change the assistant in place and notify mounted MCP Apps through standard host
 context.
 
 Server branding controls customer name, themed logo/mark/avatar assets, semantic light/dark colors, density,

package/dist/app-view-element-1i_w6FDf.d.cts

@@ -0,0 +1,40 @@
+import { A as AssistantClient, a as AssistantViewAvailableDetail, e as AssistantErrorDetail } from './client-uo57Swlm.cjs';
+
+declare const APP_VIEW_TAG_NAME = "noodle-app-view";
+interface AssistantAppViewErrorDetail {
+    readonly code: 'view_render_timeout';
+    readonly retryable: false;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'noodle-app-view': NoodleAppViewElement;
+    }
+    interface HTMLElementEventMap {
+        'assistant-error': CustomEvent<AssistantErrorDetail>;
+    }
+}
+declare const HTMLElementBase: typeof HTMLElement;
+/**
+ * Framework-neutral host for one service-resolved MCP App view.
+ *
+ * `client` and `view` are object properties, not serialized attributes. Vue, Angular, and plain DOM
+ * renderers can therefore pass the same `data-view` payload without taking a React dependency.
+ */
+declare class NoodleAppViewElement extends HTMLElementBase {
+    #private;
+    static readonly observedAttributes: string[];
+    get client(): AssistantClient | undefined;
+    /** Allow the hosted App to request fullscreen. Disabled by default. */
+    get allowFullscreen(): boolean;
+    set allowFullscreen(value: boolean);
+    set client(value: AssistantClient | undefined);
+    get view(): AssistantViewAvailableDetail | undefined;
+    set view(value: AssistantViewAvailableDetail | undefined);
+    get theme(): 'light' | 'dark';
+    set theme(value: 'light' | 'dark');
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _previous: string | null, value: string | null): void;
+}
+
+export { APP_VIEW_TAG_NAME as A, NoodleAppViewElement as N, type AssistantAppViewErrorDetail as a };

package/dist/app-view-element-7ZQZLYbL.d.ts

@@ -0,0 +1,40 @@
+import { A as AssistantClient, a as AssistantViewAvailableDetail, e as AssistantErrorDetail } from './client-Bp_VKpMg.js';
+
+declare const APP_VIEW_TAG_NAME = "noodle-app-view";
+interface AssistantAppViewErrorDetail {
+    readonly code: 'view_render_timeout';
+    readonly retryable: false;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'noodle-app-view': NoodleAppViewElement;
+    }
+    interface HTMLElementEventMap {
+        'assistant-error': CustomEvent<AssistantErrorDetail>;
+    }
+}
+declare const HTMLElementBase: typeof HTMLElement;
+/**
+ * Framework-neutral host for one service-resolved MCP App view.
+ *
+ * `client` and `view` are object properties, not serialized attributes. Vue, Angular, and plain DOM
+ * renderers can therefore pass the same `data-view` payload without taking a React dependency.
+ */
+declare class NoodleAppViewElement extends HTMLElementBase {
+    #private;
+    static readonly observedAttributes: string[];
+    get client(): AssistantClient | undefined;
+    /** Allow the hosted App to request fullscreen. Disabled by default. */
+    get allowFullscreen(): boolean;
+    set allowFullscreen(value: boolean);
+    set client(value: AssistantClient | undefined);
+    get view(): AssistantViewAvailableDetail | undefined;
+    set view(value: AssistantViewAvailableDetail | undefined);
+    get theme(): 'light' | 'dark';
+    set theme(value: 'light' | 'dark');
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _previous: string | null, value: string | null): void;
+}
+
+export { APP_VIEW_TAG_NAME as A, NoodleAppViewElement as N, type AssistantAppViewErrorDetail as a };