@noodleseed/assistant 1.9.0 → 1.10.0

package/README.md

@@ -259,7 +259,7 @@ if (part.type === "data-view") {
       key={`${part.data.id}:${part.data.resourceUri}`}
       client={client}
       view={part.data}
-      theme="dark"
+      theme={resolvedTheme}
       onError={(failure) => reportAssistantError(failure)}
     />
   );
@@ -269,7 +269,9 @@ if (part.type === "data-view") {
 `NoodleAppView` owns the double iframe and AppBridge. 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.
+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.
 
 Outside React, subscribe to the DOM-free AI SDK `UIMessage` state without registering a custom element or
 touching browser storage:
@@ -393,10 +395,19 @@ exact control over assistant-specific roles:
 ```tsx
 <NoodleAssistant
   sessionEndpoint="/api/assistant/session"
+  theme={resolvedTheme}
   appearance={{
     light: {
-      panel: { surface: "#FFFFFF", text: "#101828", border: "#E4E7EC" },
-      composer: { surface: "#F9FAFB", text: "#101828", border: "#D0D5DD" },
+      panel: {
+        surface: "var(--app-surface)",
+        text: "var(--app-text)",
+        border: "var(--app-border)",
+      },
+      composer: {
+        surface: "var(--app-input)",
+        text: "var(--app-text)",
+        border: "var(--app-border)",
+      },
       confirmation: { surface: "#F8FAFC", text: "#101828", border: "#CBD5E1" },
       primaryButton: { surface: "#635BFF", text: "#FFFFFF" },
     },
@@ -405,11 +416,38 @@ exact control over assistant-specific roles:
 />
 ```
 
-The same object is available as `element.appearance`. It covers canvas, panel, header, assistant/user
-messages, composer, suggestions, confirmation, primary/secondary buttons, launcher, code, and MCP App frame
-roles in light and dark modes. Exact colors are preserved; insufficient contrast emits the typed
-`assistant-appearance-warning` event. Stable public CSS variables remain available for stylesheet-based
-integration:
+The same object is available as `element.appearance`. CSS custom properties inherit through the assistant
+host into its shadow tree, so `var(--app-token)` references reuse the embedding application's existing
+tokens without copying literal colors. Exact parseable literal colors are preserved and checked;
+insufficient contrast emits the typed `assistant-appearance-warning` event. Contrast for unresolved CSS
+references remains the host application's responsibility.
+
+The complete typed appearance role map is:
+
+| Appearance role | Public CSS custom properties |
+| --- | --- |
+| `canvas` | `--ns-assistant-canvas` |
+| `text` | `--ns-assistant-text` |
+| `mutedText` | `--ns-assistant-muted-text` |
+| `link` | `--ns-assistant-link` |
+| `focus` | `--ns-assistant-focus` |
+| `success` | `--ns-assistant-success` |
+| `warning` | `--ns-assistant-warning` |
+| `danger` | `--ns-assistant-danger` |
+| `panel` | `--ns-assistant-panel`, `--ns-assistant-panel-text`, `--ns-assistant-panel-border` |
+| `header` | `--ns-assistant-header`, `--ns-assistant-header-text`, `--ns-assistant-header-border` |
+| `assistantMessage` | `--ns-assistant-assistant-message`, `--ns-assistant-assistant-message-text`, `--ns-assistant-assistant-message-border` |
+| `userMessage` | `--ns-assistant-user-message`, `--ns-assistant-user-message-text`, `--ns-assistant-user-message-border` |
+| `composer` | `--ns-assistant-composer`, `--ns-assistant-composer-text`, `--ns-assistant-composer-border` |
+| `suggestion` | `--ns-assistant-suggestion`, `--ns-assistant-suggestion-text`, `--ns-assistant-suggestion-border` |
+| `confirmation` | `--ns-assistant-confirmation`, `--ns-assistant-confirmation-text`, `--ns-assistant-confirmation-border` |
+| `primaryButton` | `--ns-assistant-primary-button`, `--ns-assistant-primary-button-text`, `--ns-assistant-primary-button-border` |
+| `secondaryButton` | `--ns-assistant-secondary-button`, `--ns-assistant-secondary-button-text`, `--ns-assistant-secondary-button-border` |
+| `launcher` | `--ns-assistant-launcher`, `--ns-assistant-launcher-text`, `--ns-assistant-launcher-border` |
+| `code` | `--ns-assistant-code`, `--ns-assistant-code-text`, `--ns-assistant-code-border` |
+| `app` | `--ns-assistant-app`, `--ns-assistant-app-text`, `--ns-assistant-app-border` |
+
+Stable public CSS variables also remain available directly for stylesheet-based integration:
 
 ```css
 noodle-assistant {
@@ -427,6 +465,11 @@ defaults. The public slots are `launcher-icon`,
 embedding-page integration API, not a way to put HTML or callbacks in deployment configuration. Internal
 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
+context.
+
 Server branding controls customer name, themed logo/mark/avatar assets, semantic light/dark colors, density,
 radius, typography, and automatic theme. `embeddedAssistant(...)` controls floating/inline/drawer layout,
 position and dimensions, mobile and launcher/header/avatar/timestamp behavior, visible labels, suggested

package/dist/{chunk-4B3XXGRP.js → chunk-RSNMY27B.js}

@@ -3106,6 +3106,7 @@ function mountAssistantApp(detail, actions, options = {}) {
   let mountedTransport;
   let destroyed = false;
   let initialized = false;
+  let hostContext = createAssistantAppHostContext(actions.theme);
   let destroyPromise;
   const renderTimer = setTimeout(() => {
     if (initialized || !frame.isConnected) return;
@@ -3132,7 +3133,7 @@ function mountAssistantApp(detail, actions, options = {}) {
           message: { text: {} }
         },
         {
-          hostContext: createAssistantAppHostContext(actions.theme)
+          hostContext
         }
       );
       mountedBridge = bridge;
@@ -3207,6 +3208,7 @@ function mountAssistantApp(detail, actions, options = {}) {
         if (destroyed) return;
         initialized = true;
         clearTimeout(renderTimer);
+        bridge.setHostContext(hostContext);
         const current = options.getDetail?.() ?? detail;
         void bridge.sendToolInput({ arguments: current.arguments ?? {} });
         void bridge.sendToolResult({
@@ -3222,6 +3224,11 @@ function mountAssistantApp(detail, actions, options = {}) {
     },
     { once: true }
   );
+  const updateTheme = (theme) => {
+    if (destroyed) return;
+    hostContext = createAssistantAppHostContext(theme);
+    if (initialized) mountedBridge?.setHostContext(hostContext);
+  };
   const destroy = () => {
     if (destroyPromise) return destroyPromise;
     destroyed = true;
@@ -3240,9 +3247,12 @@ function mountAssistantApp(detail, actions, options = {}) {
     })();
     return destroyPromise;
   };
-  mountedApps.set(card, { destroy });
+  mountedApps.set(card, { destroy, updateTheme });
   return card;
 }
+function updateAssistantAppTheme(card, theme) {
+  mountedApps.get(card)?.updateTheme(theme);
+}
 function unmountAssistantApp(card) {
   return mountedApps.get(card)?.destroy() ?? Promise.resolve();
 }
@@ -7168,7 +7178,7 @@ function contrastWarnings(theme, mode) {
   for (const [role, foreground, background] of pairs) {
     if (!foreground || !background) continue;
     const ratio = contrastRatio2(foreground, background);
-    if (ratio >= 4.5) continue;
+    if (ratio === void 0 || ratio >= 4.5) continue;
     warnings.push({
       code: "low_contrast",
       theme: mode,
@@ -7182,13 +7192,16 @@ function contrastWarnings(theme, mode) {
   return warnings;
 }
 function contrastRatio2(first, second) {
-  const lighter = Math.max(luminance(first), luminance(second));
-  const darker = Math.min(luminance(first), luminance(second));
+  const firstLuminance = luminance(first);
+  const secondLuminance = luminance(second);
+  if (firstLuminance === void 0 || secondLuminance === void 0) return void 0;
+  const lighter = Math.max(firstLuminance, secondLuminance);
+  const darker = Math.min(firstLuminance, secondLuminance);
   return (lighter + 0.05) / (darker + 0.05);
 }
 function luminance(color) {
   const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(color);
-  if (!match) return 1;
+  if (!match) return void 0;
   const values = match.slice(1).map((value) => {
     const channel = Number.parseInt(value, 16) / 255;
     return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
@@ -8021,6 +8034,9 @@ var NoodleAssistantElement = class extends HTMLElementBase {
         })
       );
     }
+    for (const app of this.shadowRoot?.querySelectorAll(".noodle-app-card") ?? []) {
+      updateAssistantAppTheme(app, mode);
+    }
   }
   #setSessionState(state) {
     this.#sessionState = state;
@@ -8196,6 +8212,7 @@ function registerNoodleAssistant() {
 
 export {
   mountAssistantApp,
+  updateAssistantAppTheme,
   unmountAssistantApp,
   ASSISTANT_TAG_NAME,
   NoodleAssistantElement,
@@ -8206,4 +8223,4 @@ export {
 dompurify/dist/purify.es.mjs:
   (*! @license DOMPurify 3.4.11 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.11/LICENSE *)
 */
-//# sourceMappingURL=chunk-4B3XXGRP.js.map
+//# sourceMappingURL=chunk-RSNMY27B.js.map