@noodleseed/assistant 1.0.0 → 1.1.0

package/dist/chunk-OXFV6KZ2.js

@@ -0,0 +1,698 @@
+// src/appearance.ts
+var common = {
+  fontFamily: "inherit",
+  monoFontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+  baseFontSize: 15,
+  messageFontSize: 15,
+  lineHeight: 1.5,
+  panelRadius: 20,
+  cardRadius: 14,
+  inputRadius: 14,
+  buttonRadius: 12,
+  launcherRadius: 999,
+  spacing: 12,
+  backdropBlur: 18,
+  motionScale: 1
+};
+var DEFAULT_APPEARANCE = {
+  brand: { name: "Assistant", logo: {}, avatar: {}, mark: {} },
+  theme: {
+    defaultMode: "auto",
+    light: {
+      ...common,
+      page: "#F7F7F8",
+      panel: "#FFFFFF",
+      elevated: "#FFFFFF",
+      input: "#F1F1F3",
+      hover: "#ECECEF",
+      selected: "#E4E2FF",
+      text: "#18181B",
+      mutedText: "#71717A",
+      accent: "#5B4CF0",
+      accentText: "#FFFFFF",
+      link: "#4A3BD5",
+      divider: "#E4E4E7",
+      focus: "#5B4CF0",
+      success: "#16835D",
+      warning: "#A45B00",
+      danger: "#C92A45",
+      overlay: "#18181B66",
+      code: "#F1F1F3",
+      widgetFrame: "#E4E4E7",
+      shadow: "0 24px 80px rgba(24, 24, 27, 0.18)"
+    },
+    dark: {
+      ...common,
+      page: "#111113",
+      panel: "#19191D",
+      elevated: "#222228",
+      input: "#26262C",
+      hover: "#303038",
+      selected: "#37315F",
+      text: "#FAFAFA",
+      mutedText: "#A1A1AA",
+      accent: "#A99FFF",
+      accentText: "#17131F",
+      link: "#B9B1FF",
+      divider: "#34343B",
+      focus: "#B9B1FF",
+      success: "#58C69A",
+      warning: "#F2B45F",
+      danger: "#FF8094",
+      overlay: "#00000099",
+      code: "#26262C",
+      widgetFrame: "#34343B",
+      shadow: "0 24px 90px rgba(0, 0, 0, 0.55)"
+    }
+  },
+  layout: {
+    mode: "floating",
+    position: "bottom-right",
+    panelWidth: 400,
+    panelMinHeight: 420,
+    panelMaxHeight: 720,
+    zIndex: 2147483e3,
+    density: "comfortable",
+    mobileFullscreen: true
+  },
+  behavior: {
+    startOpen: false,
+    closeOnEscape: true,
+    closeOnOutsideClick: false,
+    showLauncher: true,
+    showHeader: true,
+    showAvatars: true,
+    showTimestamps: false
+  },
+  labels: {
+    welcomeHeading: "How can I help?",
+    welcomeMessage: "",
+    composerPlaceholder: "Ask a question\u2026",
+    send: "Send",
+    stop: "Stop",
+    close: "Close assistant",
+    open: "Open assistant",
+    confirm: "Confirm",
+    cancel: "Cancel",
+    retry: "Try again",
+    unavailable: "The assistant is temporarily unavailable.",
+    sessionExpired: "Your assistant session expired. Reopen it to continue."
+  },
+  suggestedPrompts: [],
+  locale: "en",
+  direction: "auto"
+};
+function resolveAppearance(input = {}) {
+  const branding = input.branding;
+  const assistant = input.assistant;
+  return {
+    brand: {
+      ...DEFAULT_APPEARANCE.brand,
+      ...branding?.name ? { name: branding.name } : {},
+      logo: themedAsset(branding?.logo),
+      avatar: themedAsset(branding?.avatar),
+      mark: themedAsset(branding?.mark)
+    },
+    theme: {
+      defaultMode: branding?.colorScheme ?? DEFAULT_APPEARANCE.theme.defaultMode,
+      light: resolveTheme("light", branding),
+      dark: resolveTheme("dark", branding)
+    },
+    layout: {
+      ...DEFAULT_APPEARANCE.layout,
+      ...branding?.density ? { density: branding.density } : {},
+      ...assistant?.layout
+    },
+    behavior: { ...DEFAULT_APPEARANCE.behavior, ...assistant?.behavior },
+    labels: { ...DEFAULT_APPEARANCE.labels, ...assistant?.labels },
+    suggestedPrompts: assistant?.suggestedPrompts ?? DEFAULT_APPEARANCE.suggestedPrompts,
+    ...assistant?.privacyUrl ? { privacyUrl: assistant.privacyUrl } : {},
+    ...assistant?.termsUrl ? { termsUrl: assistant.termsUrl } : {},
+    locale: assistant?.locale ?? DEFAULT_APPEARANCE.locale,
+    direction: assistant?.direction ?? DEFAULT_APPEARANCE.direction
+  };
+}
+function themedAsset(asset) {
+  return asset ? { light: asset.uri, dark: asset.darkUri ?? asset.uri } : {};
+}
+function resolveTheme(mode, branding) {
+  const defaults = DEFAULT_APPEARANCE.theme[mode];
+  const surface = mode === "light" ? branding?.surface : branding?.surfaceDark;
+  const portable = branding?.theme?.[mode];
+  const radius = branding?.radius ? radiusValue(branding.radius) : void 0;
+  return {
+    ...defaults,
+    ...branding?.accent ? { accent: branding.accent } : {},
+    ...surface ? { page: surface, panel: surface } : {},
+    ...mapPortableTheme(portable),
+    ...radius === void 0 ? {} : {
+      panelRadius: radius,
+      cardRadius: radius,
+      inputRadius: Math.max(0, radius - 2),
+      buttonRadius: Math.max(0, radius - 2)
+    },
+    ...branding?.typography === "serif" ? { fontFamily: "ui-serif, Georgia, serif" } : branding?.typography === "mono" ? { fontFamily: defaults.monoFontFamily } : {}
+  };
+}
+function mapPortableTheme(input) {
+  if (!input) return {};
+  return {
+    ...input.surface ? { page: input.surface, panel: input.surface } : {},
+    ...input.surfaceRaised ? { elevated: input.surfaceRaised } : {},
+    ...input.surfaceMuted ? { input: input.surfaceMuted, hover: input.surfaceMuted, selected: input.surfaceMuted } : {},
+    ...input.text ? { text: input.text } : {},
+    ...input.textMuted ? { mutedText: input.textMuted } : {},
+    ...input.accent ? { accent: input.accent } : {},
+    ...input.accentText ? { accentText: input.accentText } : {},
+    ...input.link ? { link: input.link } : {},
+    ...input.border ? { divider: input.border, widgetFrame: input.border } : {},
+    ...input.focus ? { focus: input.focus } : {},
+    ...input.success ? { success: input.success } : {},
+    ...input.warning ? { warning: input.warning } : {},
+    ...input.danger ? { danger: input.danger } : {},
+    ...input.code ? { code: input.code } : {}
+  };
+}
+function radiusValue(radius) {
+  if (radius === "none") return 0;
+  if (radius === "sm") return 8;
+  if (radius === "lg") return 18;
+  return 14;
+}
+
+// src/transport.ts
+var AssistantTransportError = class extends Error {
+  code = "invalid_response";
+  constructor(contentType) {
+    super(`assistant response was not an event stream (content-type: ${contentType || "unknown"})`);
+    this.name = "AssistantTransportError";
+  }
+};
+async function consumeAssistantEvents(response, onEvent) {
+  let delivered = 0;
+  let sawText = false;
+  const deliver = (event) => {
+    delivered += 1;
+    onEvent(event);
+  };
+  if (!response.body) {
+    const text = await response.text();
+    sawText = text.trim().length > 0;
+    emitFrames(text, deliver, true);
+  } else {
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    let pending = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      const chunk = decoder.decode(value, { stream: !done });
+      if (!sawText && chunk.trim().length > 0) sawText = true;
+      pending += chunk;
+      pending = emitFrames(pending, deliver, done);
+      if (done) break;
+    }
+  }
+  if (delivered === 0 && sawText) {
+    throw new AssistantTransportError(response.headers.get("content-type") ?? "");
+  }
+}
+function emitFrames(input, onEvent, flush) {
+  const normalized = input.replaceAll("\r\n", "\n").replaceAll("\r", "\n");
+  const frames = normalized.split("\n\n");
+  const pending = flush ? "" : frames.pop() ?? "";
+  for (const frame of frames) {
+    const event = parseFrame(frame);
+    if (event) onEvent(event);
+  }
+  if (flush && frames.length === 0 && normalized.trim()) {
+    const event = parseFrame(normalized);
+    if (event) onEvent(event);
+  }
+  return pending;
+}
+function parseFrame(frame) {
+  let event = "message";
+  const data = [];
+  for (const line of frame.split("\n")) {
+    if (line.startsWith(":")) continue;
+    const separator = line.indexOf(":");
+    const field = separator < 0 ? line : line.slice(0, separator);
+    const value = separator < 0 ? "" : line.slice(separator + 1).replace(/^ /, "");
+    if (field === "event") event = value;
+    if (field === "data") data.push(value);
+  }
+  if (data.length === 0) return void 0;
+  try {
+    return { event, data: JSON.parse(data.join("\n")) };
+  } catch {
+    return void 0;
+  }
+}
+
+// src/element.ts
+var ASSISTANT_TAG_NAME = "noodle-assistant";
+var HTMLElementBase = globalThis.HTMLElement ?? class {
+};
+var NoodleAssistantElement = class extends HTMLElementBase {
+  static observedAttributes = ["open", "theme"];
+  #appearance = resolveAppearance();
+  #session;
+  #messages;
+  #media;
+  #context;
+  sessionEndpoint = "";
+  connectedCallback() {
+    if (!this.shadowRoot) this.attachShadow({ mode: "open" });
+    if (!this.sessionEndpoint) this.sessionEndpoint = this.getAttribute("session-endpoint") ?? "";
+    this.#media = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+    this.#media?.addEventListener("change", this.#handleSystemTheme);
+    document.addEventListener("keydown", this.#handleDocumentKeydown);
+    document.addEventListener("pointerdown", this.#handleDocumentPointerDown);
+    if (this.#appearance.behavior.startOpen) this.setAttribute("open", "");
+    this.#render();
+    this.dispatchEvent(new CustomEvent("assistant-ready"));
+  }
+  disconnectedCallback() {
+    this.#media?.removeEventListener("change", this.#handleSystemTheme);
+    document.removeEventListener("keydown", this.#handleDocumentKeydown);
+    document.removeEventListener("pointerdown", this.#handleDocumentPointerDown);
+  }
+  attributeChangedCallback(name) {
+    if (name === "theme") this.#applyTheme();
+  }
+  open() {
+    this.setAttribute("open", "");
+    this.dispatchEvent(new CustomEvent("assistant-open"));
+  }
+  close() {
+    this.removeAttribute("open");
+    this.dispatchEvent(new CustomEvent("assistant-close"));
+  }
+  toggle() {
+    this.hasAttribute("open") ? this.close() : this.open();
+  }
+  focusComposer() {
+    this.shadowRoot?.querySelector("textarea")?.focus();
+  }
+  resetSession() {
+    this.#session = void 0;
+    this.#messages?.replaceChildren();
+    this.dispatchEvent(new CustomEvent("assistant-session-reset"));
+  }
+  updateContext(context) {
+    this.#context = { ...context };
+    this.dispatchEvent(new CustomEvent("assistant-context-changed", { detail: { context } }));
+  }
+  async sendMessage(text) {
+    const message = text.trim();
+    if (!message) return;
+    if (!this.#session) this.#session = await this.#createSession();
+    this.#appendMessage("user", message);
+    this.dispatchEvent(new CustomEvent("assistant-message-started"));
+    await this.#sendTurn(message, true);
+  }
+  async #sendTurn(message, mayRetry) {
+    if (!this.#session) this.#session = await this.#createSession();
+    const response = await fetch(this.#session.endpoints.turns, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${this.#session.token}`,
+        "Content-Type": "application/json",
+        Accept: "text/event-stream"
+      },
+      body: JSON.stringify({ message })
+    });
+    if (response.status === 401 && mayRetry) {
+      this.#session = void 0;
+      this.dispatchEvent(new CustomEvent("assistant-session-expired"));
+      await this.#sendTurn(message, false);
+      return;
+    }
+    if (!response.ok) {
+      this.#dispatchError({ code: "turn_failed", status: response.status, retryable: false });
+      throw new Error(`Assistant turn failed (${response.status})`);
+    }
+    let assistantBody;
+    try {
+      await consumeAssistantEvents(response, (event) => {
+        if (event.event === "content") {
+          const body = assistantBody ?? this.#appendMessage("assistant", "");
+          assistantBody = body;
+          if (body) body.textContent += String(event.data.delta ?? "");
+        }
+        if (event.event === "tool_proposed") {
+          this.#appendToolProposal(
+            String(event.data.id ?? ""),
+            String(event.data.tool ?? "Action")
+          );
+        }
+        if (event.event === "error") {
+          this.#dispatchError({
+            code: String(event.data.code ?? "stream_failed"),
+            retryable: event.data.retryable === true
+          });
+        }
+      });
+    } catch (error) {
+      if (error instanceof AssistantTransportError) {
+        this.#dispatchError({ code: error.code, retryable: false });
+      }
+      throw error;
+    }
+    this.dispatchEvent(new CustomEvent("assistant-message-completed"));
+  }
+  /**
+   * Every listener the element attaches to its own DOM must go through this guard: internal UI
+   * failures surface as `assistant-error` events (already dispatched by the failing path) and must
+   * never escape as unhandled rejections into the embedding page. Programmatic callers use
+   * `sendMessage`/`confirmTool` directly and keep the rejection.
+   */
+  #sendGuarded(text) {
+    void this.sendMessage(text).catch(() => {
+    });
+  }
+  async confirmTool(id) {
+    if (!this.#session) {
+      this.#dispatchError({ code: "confirmation_expired", retryable: false });
+      throw new Error("assistant session is not active");
+    }
+    const response = await fetch(this.#session.endpoints.toolConfirmations, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${this.#session.token}`,
+        "Content-Type": "application/json",
+        Accept: "text/event-stream"
+      },
+      body: JSON.stringify({ id })
+    });
+    if (!response.ok) {
+      const expired = response.status === 401 || response.status === 409;
+      if (response.status === 401) {
+        this.#session = void 0;
+        this.dispatchEvent(new CustomEvent("assistant-session-expired"));
+      }
+      this.#dispatchError({
+        code: expired ? "confirmation_expired" : "confirmation_failed",
+        status: response.status,
+        retryable: false
+      });
+      throw new Error(`Assistant confirmation failed (${response.status})`);
+    }
+    let completed;
+    await consumeAssistantEvents(response, (event) => {
+      if (event.event === "tool_completed") completed = event.data;
+    });
+    if (completed) this.#appendMessage("assistant", JSON.stringify(completed.result ?? {}));
+    this.dispatchEvent(new CustomEvent("assistant-tool-completed", { detail: { id } }));
+  }
+  #handleSystemTheme = () => this.#applyTheme();
+  #handleDocumentKeydown = (event) => {
+    if (event.key === "Escape" && this.hasAttribute("open") && this.#appearance.behavior.closeOnEscape) {
+      this.close();
+    }
+  };
+  #handleDocumentPointerDown = (event) => {
+    if (this.hasAttribute("open") && this.#appearance.behavior.closeOnOutsideClick && !event.composedPath().includes(this)) {
+      this.close();
+    }
+  };
+  async #createSession() {
+    if (!this.sessionEndpoint) throw new Error("sessionEndpoint is required");
+    let response;
+    try {
+      response = await fetch(this.sessionEndpoint, {
+        method: "POST",
+        headers: { Accept: "application/json", "Content-Type": "application/json" },
+        body: JSON.stringify(this.#context ? { context: this.#context } : {}),
+        credentials: "same-origin"
+      });
+    } catch (error) {
+      this.#dispatchError({ code: "session_failed", retryable: true });
+      throw error;
+    }
+    if (!response.ok) {
+      this.#dispatchError({ code: "session_failed", status: response.status, retryable: true });
+      throw new Error(`Assistant session failed (${response.status})`);
+    }
+    let session;
+    try {
+      session = await response.json();
+    } catch (error) {
+      this.#dispatchError({ code: "session_failed", retryable: true });
+      throw error;
+    }
+    if (session.configuration) {
+      this.#appearance = resolveAppearance(session.configuration);
+      this.#render();
+    }
+    this.dispatchEvent(
+      new CustomEvent("assistant-session-started", { detail: { expiresAt: session.expiresAt } })
+    );
+    return session;
+  }
+  #appendMessage(role, text) {
+    if (!this.#messages) return void 0;
+    const message = document.createElement("div");
+    message.className = `message ${role}`;
+    if (role === "assistant" && this.#appearance.behavior.showAvatars && this.#appearance.brand.avatar[this.#resolvedMode()]) {
+      const avatar = document.createElement("img");
+      avatar.className = "avatar";
+      avatar.src = this.#appearance.brand.avatar[this.#resolvedMode()] ?? "";
+      avatar.alt = "";
+      message.append(avatar);
+    }
+    const body = document.createElement("span");
+    body.textContent = text;
+    message.append(body);
+    if (this.#appearance.behavior.showTimestamps) {
+      const timestamp = document.createElement("time");
+      timestamp.dateTime = (/* @__PURE__ */ new Date()).toISOString();
+      timestamp.textContent = new Intl.DateTimeFormat(this.#appearance.locale, {
+        hour: "numeric",
+        minute: "2-digit"
+      }).format(/* @__PURE__ */ new Date());
+      message.append(timestamp);
+    }
+    this.#messages.append(message);
+    return body;
+  }
+  #dispatchError(detail) {
+    this.dispatchEvent(new CustomEvent("assistant-error", { detail }));
+  }
+  #appendToolProposal(id, tool) {
+    if (!this.#messages || !id) return;
+    const card = document.createElement("section");
+    card.className = "tool-proposal";
+    const label = document.createElement("strong");
+    label.textContent = tool;
+    const confirm = document.createElement("button");
+    confirm.type = "button";
+    confirm.textContent = this.#appearance.labels.confirm;
+    confirm.addEventListener("click", () => {
+      confirm.disabled = true;
+      void this.confirmTool(id).catch(() => {
+        confirm.disabled = false;
+        this.dispatchEvent(
+          new CustomEvent("assistant-error", { detail: { code: "confirmation_failed" } })
+        );
+      });
+    });
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.textContent = this.#appearance.labels.cancel;
+    cancel.addEventListener("click", () => card.remove());
+    card.append(label, confirm, cancel);
+    this.#messages.append(card);
+    this.dispatchEvent(new CustomEvent("assistant-tool-proposed", { detail: { id, tool } }));
+  }
+  #resolvedMode() {
+    const configured = this.getAttribute("theme") ?? this.#appearance.theme.defaultMode;
+    return configured === "auto" ? this.#media?.matches ? "dark" : "light" : configured;
+  }
+  #applyTheme() {
+    const mode = this.#resolvedMode();
+    this.setAttribute("data-theme", mode);
+    const tokens = this.#appearance.theme[mode];
+    for (const [name, value] of Object.entries(tokens)) {
+      this.style.setProperty(
+        `--ns-assistant-default-${camelToKebab(name)}`,
+        tokenValue(name, value)
+      );
+    }
+    this.style.setProperty(
+      "--ns-assistant-default-panel-width",
+      `${this.#appearance.layout.panelWidth}px`
+    );
+    this.style.setProperty(
+      "--ns-assistant-default-min-height",
+      `${this.#appearance.layout.panelMinHeight}px`
+    );
+    this.style.setProperty(
+      "--ns-assistant-default-max-height",
+      `${this.#appearance.layout.panelMaxHeight}px`
+    );
+    this.style.setProperty(
+      "--ns-assistant-default-z-index",
+      String(this.#appearance.layout.zIndex)
+    );
+    const logo = this.shadowRoot?.querySelector(".brand-logo");
+    const logoUrl = this.#appearance.brand.logo[mode];
+    if (logo) {
+      logo.hidden = !logoUrl;
+      if (logoUrl) logo.src = logoUrl;
+    }
+  }
+  #render() {
+    if (!this.shadowRoot) return;
+    const appearance = this.#appearance;
+    this.setAttribute("role", "complementary");
+    this.setAttribute("aria-label", appearance.brand.name);
+    this.setAttribute("lang", appearance.locale);
+    this.setAttribute("dir", appearance.direction);
+    this.dataset.mode = appearance.layout.mode;
+    this.dataset.position = appearance.layout.position;
+    this.dataset.density = appearance.layout.density;
+    this.toggleAttribute("mobile-fullscreen", appearance.layout.mobileFullscreen);
+    this.shadowRoot.innerHTML = `${styles}
+      <button class="launcher" type="button" aria-label="${escapeAttribute(appearance.labels.open)}"><slot name="launcher-icon">\u2726</slot></button>
+      <section class="panel" aria-label="${escapeAttribute(appearance.brand.name)}">
+        <header><slot name="header-leading"></slot><img class="brand-logo" alt=""><strong></strong><slot name="header-actions"></slot><button class="close" type="button" aria-label="${escapeAttribute(appearance.labels.close)}">\xD7</button></header>
+        <div class="welcome"><slot name="empty-state"><h2></h2><p></p></slot></div>
+        <div class="suggested-prompts"></div>
+        <div class="messages" aria-live="polite"></div>
+        <form><slot name="composer-leading"></slot><textarea rows="1"></textarea><button class="send" type="submit"></button><slot name="composer-trailing"></slot></form>
+        <nav class="legal" aria-label="Legal"></nav>
+        <slot name="conversation-footer"></slot>
+      </section>`;
+    queryRequired(this.shadowRoot, "strong").textContent = appearance.brand.name;
+    const launcherIcon = appearance.brand.mark[this.#resolvedMode()];
+    if (launcherIcon) {
+      const launcherSlot = queryRequired(
+        this.shadowRoot,
+        'slot[name="launcher-icon"]'
+      );
+      const icon = document.createElement("img");
+      icon.src = launcherIcon;
+      icon.alt = "";
+      launcherSlot.replaceChildren(icon);
+    }
+    const logo = queryRequired(this.shadowRoot, ".brand-logo");
+    const logoUrl = appearance.brand.logo[this.#resolvedMode()];
+    if (logoUrl) {
+      logo.src = logoUrl;
+      logo.alt = appearance.brand.name;
+    } else {
+      logo.hidden = true;
+    }
+    queryRequired(this.shadowRoot, "h2").textContent = appearance.labels.welcomeHeading;
+    queryRequired(this.shadowRoot, "p").textContent = appearance.labels.welcomeMessage;
+    const textarea = queryRequired(this.shadowRoot, "textarea");
+    textarea.placeholder = appearance.labels.composerPlaceholder;
+    textarea.setAttribute("aria-label", appearance.labels.composerPlaceholder);
+    queryRequired(this.shadowRoot, ".send").textContent = appearance.labels.send;
+    const prompts = queryRequired(this.shadowRoot, ".suggested-prompts");
+    for (const prompt of appearance.suggestedPrompts) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = prompt;
+      button.addEventListener("click", () => this.#sendGuarded(prompt));
+      prompts.append(button);
+    }
+    if (!appearance.behavior.showLauncher)
+      queryRequired(this.shadowRoot, ".launcher").hidden = true;
+    if (!appearance.behavior.showHeader)
+      queryRequired(this.shadowRoot, "header").hidden = true;
+    const legal = queryRequired(this.shadowRoot, ".legal");
+    for (const [label, href] of [
+      ["Privacy", appearance.privacyUrl],
+      ["Terms", appearance.termsUrl]
+    ]) {
+      if (!href) continue;
+      const link = document.createElement("a");
+      link.href = href;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      link.textContent = label;
+      legal.append(link);
+    }
+    this.#messages = this.shadowRoot.querySelector(".messages") ?? void 0;
+    this.shadowRoot.querySelector(".launcher")?.addEventListener("click", () => this.open());
+    this.shadowRoot.querySelector(".close")?.addEventListener("click", () => this.close());
+    this.shadowRoot.querySelector("form")?.addEventListener("submit", (event) => {
+      event.preventDefault();
+      const value = textarea.value;
+      textarea.value = "";
+      this.#sendGuarded(value);
+    });
+    this.#applyTheme();
+  }
+};
+function registerNoodleAssistant() {
+  if (globalThis.customElements && !customElements.get(ASSISTANT_TAG_NAME)) {
+    customElements.define(ASSISTANT_TAG_NAME, NoodleAssistantElement);
+  }
+}
+function camelToKebab(value) {
+  return value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function tokenValue(name, value) {
+  if (typeof value !== "number") return value;
+  if (name === "lineHeight" || name === "motionScale") return String(value);
+  return `${value}px`;
+}
+function escapeAttribute(value) {
+  return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;");
+}
+function queryRequired(root, selector) {
+  const element = root.querySelector(selector);
+  if (!element) throw new Error(`assistant renderer is missing ${selector}`);
+  return element;
+}
+var styles = `<style>
+  :host { color-scheme: light dark; font-family: var(--ns-assistant-font-family, var(--ns-assistant-default-font-family)); font-size: var(--ns-assistant-base-font-size, var(--ns-assistant-default-base-font-size)); line-height: var(--ns-assistant-line-height, var(--ns-assistant-default-line-height)); z-index: var(--ns-assistant-z-index, var(--ns-assistant-default-z-index)); }
+  :host([data-mode="floating"]) { position: fixed; bottom: 24px; right: 24px; }
+  :host([data-mode="floating"][data-position="bottom-left"]) { right: auto; left: 24px; }
+  .launcher { width: 54px; height: 54px; border: 0; border-radius: var(--ns-assistant-launcher-radius, var(--ns-assistant-default-launcher-radius)); color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); cursor: pointer; }
+  .launcher img { width: 24px; height: 24px; object-fit: contain; }
+  .panel { display: none; width: min(var(--ns-assistant-panel-width, var(--ns-assistant-default-panel-width)), calc(100vw - 32px)); 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 - 32px)); overflow: hidden; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-panel, var(--ns-assistant-default-panel)); border-radius: var(--ns-assistant-panel-radius, var(--ns-assistant-default-panel-radius)); box-shadow: var(--ns-assistant-shadow, var(--ns-assistant-default-shadow)); }
+  :host([open]) .panel { display: grid; grid-template-rows: auto auto 1fr auto; }
+  :host([open]) .launcher { display: none; }
+  header { display: flex; gap: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); align-items: center; padding: calc(var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)) * 1.2); border-bottom: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); }
+  header strong { flex: 1; }
+  .brand-logo { display: block; max-width: 120px; max-height: 28px; object-fit: contain; }
+  button { font: inherit; }
+  .close, .send { border: 0; border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); cursor: pointer; }
+  .close { color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); background: transparent; font-size: 24px; }
+  .welcome { padding: calc(var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)) * 1.5); }
+  .welcome h2 { margin: 0; font-size: 1.25em; }
+  .welcome p { margin: 6px 0 0; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); }
+  .suggested-prompts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); }
+  .suggested-prompts:empty { display: none; }
+  .suggested-prompts button { padding: 7px 10px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: transparent; border: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); border-radius: 999px; cursor: pointer; }
+  .messages { min-height: 120px; padding: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); overflow: auto; }
+  .message { width: fit-content; max-width: 84%; margin: 8px 0; padding: 10px 12px; border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); white-space: pre-wrap; }
+  .message .avatar { float: left; width: 24px; height: 24px; margin-right: 8px; border-radius: 50%; object-fit: cover; }
+  .message time { display: block; margin-top: 4px; color: var(--ns-assistant-muted-text, var(--ns-assistant-default-muted-text)); font-size: .75em; }
+  .message.user { margin-left: auto; color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
+  .tool-proposal { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin: 10px 0; padding: 12px; border-radius: var(--ns-assistant-card-radius, var(--ns-assistant-default-card-radius)); background: var(--ns-assistant-elevated, var(--ns-assistant-default-elevated)); }
+  .tool-proposal button { padding: 8px 10px; border: 0; border-radius: var(--ns-assistant-button-radius, var(--ns-assistant-default-button-radius)); color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-input, var(--ns-assistant-default-input)); cursor: pointer; }
+  .tool-proposal button:first-of-type { color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
+  form { display: flex; gap: 8px; align-items: end; padding: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); border-top: 1px solid var(--ns-assistant-divider, var(--ns-assistant-default-divider)); }
+  textarea { flex: 1; resize: none; padding: 10px 12px; color: var(--ns-assistant-text, var(--ns-assistant-default-text)); background: var(--ns-assistant-input, var(--ns-assistant-default-input)); border: 0; border-radius: var(--ns-assistant-input-radius, var(--ns-assistant-default-input-radius)); font: inherit; }
+  textarea:focus-visible, button:focus-visible { outline: 3px solid var(--ns-assistant-focus, var(--ns-assistant-default-focus)); outline-offset: 2px; }
+  .send { padding: 10px 14px; color: var(--ns-assistant-accent-text, var(--ns-assistant-default-accent-text)); background: var(--ns-assistant-accent, var(--ns-assistant-default-accent)); }
+  .legal { display: flex; gap: 12px; justify-content: center; padding: 0 12px 10px; font-size: .8em; }
+  .legal:empty { display: none; }
+  .legal a { color: var(--ns-assistant-link, var(--ns-assistant-default-link)); }
+  :host([data-density="compact"]) .welcome { padding: var(--ns-assistant-spacing, var(--ns-assistant-default-spacing)); }
+  @media (max-width: 640px) { :host([mobile-fullscreen][open]) { inset: 0; } :host([mobile-fullscreen][open]) .panel { width: 100vw; min-height: 100vh; max-height: 100vh; border-radius: 0; } }
+  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
+  @media (max-width: 560px) { :host([data-mode="floating"]) { inset: auto 12px 12px; } :host([open]) .panel { width: calc(100vw - 24px); max-height: calc(100vh - 24px); } }
+</style>`;
+
+export {
+  ASSISTANT_TAG_NAME,
+  NoodleAssistantElement,
+  registerNoodleAssistant
+};
+//# sourceMappingURL=chunk-OXFV6KZ2.js.map