@noodleseed/assistant 1.22.0 → 1.23.0

package/dist/index.cjs

@@ -22112,11 +22112,11 @@ function isAllowedAppLink(value, allowedDomains, baseUrl) {
     return void 0;
   }
 }
-function createAssistantAppHostContext(theme) {
+function createAssistantAppHostContext(theme, allowFullscreen = false, displayMode = "inline") {
   return {
     theme,
-    displayMode: "inline",
-    availableDisplayModes: ["inline", "fullscreen"],
+    displayMode: allowFullscreen && displayMode === "fullscreen" ? "fullscreen" : "inline",
+    availableDisplayModes: allowFullscreen ? ["inline", "fullscreen"] : ["inline"],
     platform: "web"
   };
 }
@@ -22142,6 +22142,13 @@ function mountAssistantApp(detail, actions, options = {}) {
     title.textContent = detail.title;
     card.append(title);
   }
+  const exitFullscreen = document.createElement("button");
+  exitFullscreen.className = "noodle-app-fullscreen-exit";
+  exitFullscreen.type = "button";
+  exitFullscreen.setAttribute("aria-label", "Exit fullscreen");
+  exitFullscreen.title = "Exit fullscreen";
+  exitFullscreen.hidden = true;
+  card.append(exitFullscreen);
   const frame = document.createElement("iframe");
   frame.className = "noodle-app-frame";
   frame.title = detail.title ?? detail.tool;
@@ -22155,8 +22162,31 @@ function mountAssistantApp(detail, actions, options = {}) {
   let mountedTransport;
   let destroyed = false;
   let initialized = false;
-  let hostContext = createAssistantAppHostContext(actions.theme);
+  let currentTheme = actions.theme;
+  let displayMode = "inline";
+  let hostContext = createAssistantAppHostContext(
+    currentTheme,
+    options.allowFullscreen === true,
+    displayMode
+  );
   let destroyPromise;
+  const applyDisplayMode = (requestedMode) => {
+    displayMode = requestedMode === "fullscreen" && options.allowFullscreen === true ? "fullscreen" : "inline";
+    card.toggleAttribute("data-fullscreen", displayMode === "fullscreen");
+    exitFullscreen.hidden = displayMode !== "fullscreen";
+    hostContext = createAssistantAppHostContext(
+      currentTheme,
+      options.allowFullscreen === true,
+      displayMode
+    );
+    if (initialized) mountedBridge?.setHostContext(hostContext);
+    return displayMode;
+  };
+  exitFullscreen.addEventListener("click", () => {
+    if (destroyed) return;
+    applyDisplayMode("inline");
+    frame.focus();
+  });
   const renderTimer = setTimeout(() => {
     if (initialized || !frame.isConnected) return;
     const note = document.createElement("div");
@@ -22214,6 +22244,11 @@ function mountAssistantApp(detail, actions, options = {}) {
         actions.updateModelContext(update);
         return {};
       };
+      bridge.onrequestteardown = () => {
+        if (destroyed) return;
+        options.onTeardownRequest?.();
+        void destroy();
+      };
       bridge.onopenlink = async ({ url: url2 }) => {
         if (destroyed) return { isError: true };
         const current = options.getDetail?.() ?? detail;
@@ -22227,10 +22262,8 @@ function mountAssistantApp(detail, actions, options = {}) {
         return {};
       };
       bridge.onrequestdisplaymode = async ({ mode }) => {
-        const accepted = mode === "fullscreen" ? "fullscreen" : "inline";
-        if (destroyed) return { mode: accepted };
-        card.toggleAttribute("data-fullscreen", accepted === "fullscreen");
-        return { mode: accepted };
+        if (destroyed) return { mode: displayMode };
+        return { mode: applyDisplayMode(mode) };
       };
       bridge.oncalltool = async (params) => {
         if (destroyed) {
@@ -22275,7 +22308,12 @@ function mountAssistantApp(detail, actions, options = {}) {
   );
   const updateTheme = (theme) => {
     if (destroyed) return;
-    hostContext = createAssistantAppHostContext(theme);
+    currentTheme = theme;
+    hostContext = createAssistantAppHostContext(
+      currentTheme,
+      options.allowFullscreen === true,
+      displayMode
+    );
     if (initialized) mountedBridge?.setHostContext(hostContext);
   };
   const destroy = () => {
@@ -31724,6 +31762,29 @@ var AssistantElementScrollController = class {
   }
 };
 
+// src/app-view-styles.ts
+var ASSISTANT_APP_VIEW_CSS = `
+  .noodle-app-card { position: relative; display: grid; gap: 8px; width: 100%; margin: 4px 0 16px; overflow: hidden; color: var(--ns-assistant-app-text, inherit); border: 1px solid var(--ns-assistant-app-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider, var(--ns-app-view-border, #d1d5db)))); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius, 12px)); background: var(--ns-assistant-app, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); }
+  .noodle-app-title { padding: 10px 12px 0; font-size: .86em; font-weight: 650; }
+  .noodle-app-fullscreen-exit { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text, var(--ns-app-view-muted, #6b7280))); border: 1px solid var(--ns-assistant-secondary-button-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider, var(--ns-app-view-border, #d1d5db)))); border-radius: 999px; background: var(--ns-assistant-secondary-button, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); box-shadow: 0 6px 20px rgba(0,0,0,.14); cursor: pointer; font: inherit; transition: color .15s ease, background .15s ease, transform .15s ease; }
+  .noodle-app-fullscreen-exit[hidden] { display: none; }
+  .noodle-app-fullscreen-exit::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
+  .noodle-app-fullscreen-exit:hover { color: var(--ns-assistant-text, var(--ns-assistant-default-text, inherit)); background: var(--ns-assistant-hover, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated, var(--ns-app-view-surface, #fff)))); }
+  .noodle-app-fullscreen-exit:focus-visible { outline: 3px solid var(--ns-assistant-focus, var(--ns-assistant-default-focus, #2563eb)); outline-offset: 2px; }
+  .noodle-app-fullscreen-exit:active { transform: scale(.96); }
+  .noodle-app-frame { display: block; width: 100%; min-height: 120px; border: 0; background: transparent; }
+  .noodle-app-fallback { padding: 14px 16px; font-size: 13px; color: var(--ns-assistant-muted, var(--ns-assistant-default-muted, var(--ns-app-view-muted, #6b7280))); }
+  .noodle-app-card[data-fullscreen] { position: fixed; inset: 0; z-index: 2; margin: 0; border-radius: 0; background: var(--ns-assistant-panel, var(--ns-assistant-default-panel, var(--ns-app-view-surface, #fff))); }
+  .noodle-app-card[data-fullscreen] .noodle-app-frame { height: 100% !important; }
+`;
+var ASSISTANT_APP_VIEW_STYLES = `<style>
+  *, *::before, *::after { box-sizing: border-box; }
+  :host { --ns-app-view-surface: #fff; --ns-app-view-border: #d1d5db; --ns-app-view-muted: #6b7280; display: block; min-width: 0; color: #111827; color-scheme: light; font: inherit; }
+  :host([data-theme="dark"]) { --ns-app-view-surface: #17191f; --ns-app-view-border: #343741; --ns-app-view-muted: #a7adb8; color: #f3f4f6; color-scheme: dark; }
+  :host([hidden]) { display: none; }
+  ${ASSISTANT_APP_VIEW_CSS}
+</style>`;
+
 // src/element-styles.ts
 var ASSISTANT_ELEMENT_STYLES = `<style>
   *, *::before, *::after { box-sizing: border-box; }
@@ -31826,12 +31887,7 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .input-request input[type="checkbox"] { width: auto; min-height: auto; justify-self: start; accent-color: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
   .input-request input:focus-visible, .input-request select:focus-visible { border-color: var(--ns-assistant-focus, var(--ns-assistant-default-focus)); box-shadow: 0 0 0 2px var(--ns-assistant-focus, var(--ns-assistant-default-focus)); }
   .input-request .proposal-actions { margin-top: 2px; }
-  .noodle-app-card { position: relative; display: grid; gap: 8px; width: 100%; margin: 4px 0 16px; overflow: hidden; color: var(--ns-assistant-app-text, inherit); border: 1px solid var(--ns-assistant-app-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-app, var(--ns-assistant-elevated, var(--ns-assistant-default-elevated))); }
-  .noodle-app-title { padding: 10px 12px 0; font-size: .86em; font-weight: 650; }
-  .noodle-app-frame { display: block; width: 100%; min-height: 120px; border: 0; background: transparent; }
-  .noodle-app-fallback { padding: 14px 16px; font-size: 13px; color: var(--ns-assistant-muted, var(--ns-assistant-default-muted, #6b7280)); }
-  .noodle-app-card[data-fullscreen] { position: fixed; inset: 0; z-index: 2; margin: 0; border-radius: 0; background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); }
-  .noodle-app-card[data-fullscreen] .noodle-app-frame { height: 100% !important; }
+  ${ASSISTANT_APP_VIEW_CSS}
   form { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; min-height: 56px; margin: 8px 16px 16px; padding: 6px 6px 6px 16px; color: var(--ns-assistant-composer-text, inherit); border: 1px solid var(--ns-assistant-composer-border, color-mix(in srgb, var(--ns-assistant-divider, var(--ns-assistant-default-divider)) 86%, transparent)); border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); background: var(--ns-assistant-composer, color-mix(in srgb, var(--ns-assistant-input, var(--ns-assistant-default-input)) 92%, transparent)); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.035); transition: border-color .15s ease, box-shadow .15s ease; }
   form:focus-within { box-shadow: inset 0 0 0 1px var(--ns-assistant-focus, var(--ns-assistant-default-focus)), 0 0 0 2px var(--ns-assistant-focus, var(--ns-assistant-default-focus)); }
   textarea { flex: 1; min-height: 24px; max-height: 120px; resize: none; padding: 0; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; line-height: 24px; }