@noodleseed/assistant 1.21.0 → 1.22.0

package/README.md

@@ -222,7 +222,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.

package/dist/{chunk-LEKEIHJV.js → chunk-6TT3R555.js}

@@ -7118,6 +7118,33 @@ var AssistantElementPageContextController = class {
   }
 };
 
+// src/element-presentation-gate.ts
+var AssistantElementPresentationGate = class {
+  #host;
+  #primeSession;
+  #focusComposer;
+  constructor(host, primeSession, focusComposer) {
+    this.#host = host;
+    this.#primeSession = primeSession;
+    this.#focusComposer = focusComposer;
+  }
+  syncOpenState() {
+    const open = this.#host.hasAttribute("open");
+    const presentationReady = this.#host.hasAttribute("data-presentation-ready");
+    const launcher = this.#host.shadowRoot?.querySelector(".launcher");
+    launcher?.setAttribute("aria-expanded", String(open && presentationReady));
+    launcher?.setAttribute("aria-busy", String(open && !presentationReady));
+    if (launcher) launcher.disabled = open && !presentationReady;
+    if (open && this.#host.isConnected) this.#primeSession();
+  }
+  reveal() {
+    if (this.#host.hasAttribute("data-presentation-ready")) return;
+    this.#host.setAttribute("data-presentation-ready", "");
+    this.syncOpenState();
+    if (this.#host.hasAttribute("open")) queueMicrotask(this.#focusComposer);
+  }
+};
+
 // src/element-scroll-controller.ts
 var AssistantElementScrollController = class {
   #region;
@@ -7233,9 +7260,10 @@ var ASSISTANT_ELEMENT_STYLES = `<style>
   .launcher:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 26px rgba(0,0,0,.16); }
   .launcher img { width: 28px; height: 28px; border-radius: 50%; object-fit: contain; }
   .panel { display: none; flex-direction: column; width: min(var(--ns-assistant-panel-width, var(--ns-assistant-default-panel-width)), calc(100vw - 40px)); min-height: var(--ns-assistant-min-height, var(--ns-assistant-default-min-height)); max-height: min(var(--ns-assistant-max-height, var(--ns-assistant-default-max-height)), calc(100vh - 40px)); overflow: hidden; color: var(--ns-assistant-panel-text, var(--ns-assistant-text, var(--ns-assistant-default-text))); background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); border: 1px solid var(--ns-assistant-panel-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))); border-radius: var(--ns-assistant-panel-radius, var(--ns-assistant-default-panel-radius)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); transform-origin: bottom right; isolation: isolate; animation: halo-panel-in .28s cubic-bezier(.23,1,.32,1) both; }
-  :host([open]) .panel { display: flex; }
+  :host([open][data-presentation-ready]) .panel { display: flex; }
   .panel { position: relative; }
-  :host([open]) .launcher { display: none; }
+  :host([open][data-presentation-ready]) .launcher { display: none; }
+  :host([open]:not([data-presentation-ready])) .launcher { cursor: progress; opacity: .72; transform: none; }
   header { display: flex; flex: 0 0 auto; gap: 10px; align-items: center; min-height: 64px; padding: 12px 18px; color: var(--ns-assistant-header-text, inherit); background: var(--ns-assistant-header, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ns-assistant-header-border, var(--ns-assistant-divider, var(--ns-assistant-default-divider))) 78%, transparent); }
   header strong { flex: 1; font-size: 16px; font-weight: 600; letter-spacing: 0; }
   .brand-logo { display: block; max-width: 120px; max-height: 28px; object-fit: contain; }
@@ -7861,6 +7889,11 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   #automaticPageContext = new AssistantElementPageContextController(
     () => !this.#pageContext
   );
+  #presentationGate = new AssistantElementPresentationGate(
+    this,
+    () => this.#primeSession(),
+    () => this.focusComposer()
+  );
   #pendingUserEcho;
   #sessionState = "idle";
   #startOpenApplied = false;
@@ -7931,6 +7964,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     if (!this.sessionEndpoint) this.sessionEndpoint = this.getAttribute("session-endpoint") ?? "";
     if (!this.embedId) this.embedId = this.getAttribute("embed-id") ?? "";
     if (!this.serviceUrl) this.serviceUrl = this.getAttribute("service-url") ?? "";
+    if (!this.sessionEndpoint && !this.embedId) this.#presentationGate.reveal();
     this.#media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
     this.#media?.addEventListener("change", this.#handleSystemTheme);
     document.addEventListener("keydown", this.#handleDocumentKeydown);
@@ -7947,7 +7981,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     } else if (!this.embedId) {
       this.#primeSession();
     }
-    this.#syncOpenState();
+    this.#presentationGate.syncOpenState();
   }
   disconnectedCallback() {
     this.#conversationGeneration += 1;
@@ -7965,7 +7999,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
   }
   attributeChangedCallback(name) {
     if (name === "theme") this.#applyTheme();
-    if (name === "open") this.#syncOpenState();
+    if (name === "open") this.#presentationGate.syncOpenState();
   }
   open() {
     this.setAttribute("open", "");
@@ -8155,6 +8189,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     const bootstrap = client.connect().catch((error) => {
       if (generation !== this.#conversationGeneration || this.#client !== client) return;
       this.#dispatchClientError(error, "session_failed");
+      this.#presentationGate.reveal();
     }).finally(() => {
       if (this.#sessionBootstrap === bootstrap) this.#sessionBootstrap = void 0;
     });
@@ -8164,6 +8199,7 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.dispatchEvent(new CustomEvent("assistant-event", { detail: event }));
     this.#events.handle(event);
     if (event.event === "session_started") {
+      this.#presentationGate.reveal();
       this.#setSessionState("ready");
       this.#messages?.querySelector(".conversation-error")?.remove();
     }
@@ -8333,11 +8369,6 @@ var NoodleAssistantElement = class extends HTMLElementBase {
     this.#sessionState = state;
     syncAssistantSessionVisualState(this, this.shadowRoot, state, this.#appearance);
   }
-  #syncOpenState() {
-    const open = this.hasAttribute("open");
-    this.shadowRoot?.querySelector(".launcher")?.setAttribute("aria-expanded", String(open));
-    if (open && this.isConnected) this.#primeSession();
-  }
   #closeAndRestoreFocus() {
     this.close();
     this.shadowRoot?.querySelector(".launcher")?.focus();
@@ -8493,4 +8524,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-LEKEIHJV.js.map
+//# sourceMappingURL=chunk-6TT3R555.js.map