@gojargo/jargo-elements 0.1.0

package/LICENSE

@@ -0,0 +1,24 @@
+BSD 2-Clause License
+
+Copyright (c) 2026, the jargo authors
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,80 @@
+# @gojargo/jargo-elements
+
+**Web components** for jargo — the framework-agnostic path for Angular, Svelte,
+Solid, or plain HTML. Built on [`@gojargo/jargo-ui`](../jargo-ui) (visual +
+theme) and [`@gojargo/jargo-client-js`](../jargo-client-js) (the client).
+
+- **`<jargo-orb>`** — the Orb (no client needed).
+- **`<jargo-connect-button>`**, **`<jargo-mic-button>`**, **`<jargo-status>`**,
+  **`<jargo-transcript>`** — client-driven; they read a client set via
+  `setJargoClient()`.
+
+Part of the [`jargo-web`](https://github.com/gojargo/jargo-web) monorepo.
+
+## Install
+
+```bash
+npm install @gojargo/jargo-elements
+```
+
+## Usage
+
+Register the elements, import the theme, set a client, then use them in markup:
+
+```html
+<script type="module">
+  import { setJargoClient } from "@gojargo/jargo-elements";
+  import "@gojargo/jargo-elements/define";
+  import "@gojargo/jargo-ui/theme.css";
+  import { JargoClient } from "@gojargo/jargo-client-js";
+
+  setJargoClient(new JargoClient({ baseUrl: "https://jargo.example.com" }));
+</script>
+
+<jargo-status></jargo-status>
+<jargo-orb colors="aurora"></jargo-orb>
+<jargo-transcript empty-label="Say hello to start…"></jargo-transcript>
+<jargo-connect-button></jargo-connect-button>
+<jargo-mic-button></jargo-mic-button>
+```
+
+`setJargoClient(client)` makes one client the default for every element on the
+page; an element can override it by setting its `.client` property. Register
+manually instead of `/define` with `defineJargoElements()` (or just
+`defineJargoOrb()`).
+
+The client-driven elements render in light DOM and are styled by
+`@gojargo/jargo-ui/theme.css` — theme them with the same `--jargo-*` variables.
+
+The `<jargo-orb>` also registers under a custom tag:
+
+```js
+import { defineJargoOrb } from "@gojargo/jargo-elements";
+defineJargoOrb("voice-orb"); // <voice-orb>
+```
+
+### `<jargo-orb>` attributes
+
+Size it with CSS (defaults to 220×220). Attributes mirror the Orb options in
+kebab-case: `rings`, `radius`, `inner-scale`, `line-width`, `speed`,
+`idle-amplitude`, `reactivity`, `glow`, `core`, `blend`, `background`, plus:
+
+- `colors` — a palette name (`spectrum`, `aurora`, `ember`, `mono`) or a
+  comma/space-separated list of CSS colors.
+- `level` — manual drive level, `0`..`1`.
+- `paused` — present to pause the animation.
+
+### Live audio
+
+Drive it from a stream (e.g. a jargo bot's remote audio) via the element's
+method:
+
+```js
+const orb = document.querySelector("jargo-orb");
+orb.attachStream(client.remoteStream);
+client.on("remoteTrack", (s) => orb.attachStream(s));
+```
+
+## License
+
+BSD-2-Clause. See [LICENSE](./LICENSE) and [NOTICE](./NOTICE).

package/dist/chunk-JTFSFMFL.js

@@ -0,0 +1,341 @@
+// src/index.ts
+import {
+  Orb,
+  OrbPalettes
+} from "@gojargo/jargo-ui";
+
+// src/components.ts
+import { TranscriptTracker } from "@gojargo/jargo-client-js";
+
+// src/client-registry.ts
+var current = null;
+var subscribers = /* @__PURE__ */ new Set();
+function setJargoClient(client) {
+  current = client;
+  subscribers.forEach((fn) => fn(client));
+}
+function getJargoClient() {
+  return current;
+}
+function subscribeJargoClient(fn) {
+  subscribers.add(fn);
+  return () => subscribers.delete(fn);
+}
+
+// src/JargoClientElement.ts
+var JargoClientElement = class extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    /** The bound client, available to subclasses in {@link bind}/{@link render}. */
+    this.jargo = null;
+    this.clientOverride = null;
+    this.offs = [];
+  }
+  /** Set a specific client, overriding the global {@link setJargoClient} registry. */
+  set client(client) {
+    this.clientOverride = client;
+    this.rebind();
+  }
+  get client() {
+    return this.clientOverride ?? getJargoClient();
+  }
+  connectedCallback() {
+    this.offRegistry = subscribeJargoClient(() => {
+      if (!this.clientOverride) this.rebind();
+    });
+    this.rebind();
+  }
+  disconnectedCallback() {
+    this.offRegistry?.();
+    this.teardown();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  /** Track a cleanup (e.g. an event unsubscribe) tied to the current binding. */
+  track(off) {
+    this.offs.push(off);
+  }
+  rebind() {
+    this.teardown();
+    this.jargo = this.client;
+    if (this.jargo) this.bind(this.jargo);
+    this.render();
+  }
+  teardown() {
+    this.offs.forEach((off) => off());
+    this.offs = [];
+  }
+  /** Subscribe to client events here via {@link track}; called on each (re)bind. */
+  bind(_client) {
+  }
+};
+function escapeHtml(s) {
+  return s.replace(
+    /[&<>]/g,
+    (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;" })[c]
+  );
+}
+function micIcon(muted) {
+  return `<svg class="jargo-mic-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="21"/>${muted ? '<line x1="3" y1="3" x2="21" y2="21"/>' : ""}</svg>`;
+}
+
+// src/components.ts
+var isConnected = (s) => s === "connected" || s === "ready";
+var JargoConnectButtonElement = class extends JargoClientElement {
+  constructor() {
+    super(...arguments);
+    this.state = "disconnected";
+  }
+  bind(client) {
+    this.state = client.state;
+    this.track(
+      client.on("transportStateChanged", (s) => {
+        this.state = s;
+        this.render();
+      })
+    );
+  }
+  render() {
+    const conn = isConnected(this.state);
+    const connecting = this.state === "connecting";
+    const label = conn ? this.getAttribute("label-connected") ?? "End conversation" : connecting ? this.getAttribute("label-connecting") ?? "Connecting\u2026" : this.getAttribute("label-idle") ?? "Start conversation";
+    this.innerHTML = `<button class="jargo-btn ${conn ? "jargo-btn--danger" : "jargo-btn--primary"}" ${connecting ? "disabled aria-busy='true'" : ""}>${connecting ? '<span class="jargo-spinner"></span>' : ""}${escapeHtml(label)}</button>`;
+    const btn = this.querySelector("button");
+    if (btn) {
+      btn.onclick = () => {
+        const c = this.jargo;
+        if (!c) return;
+        if (isConnected(c.state)) c.disconnect();
+        else void c.connect().catch(() => {
+        });
+      };
+    }
+  }
+};
+JargoConnectButtonElement.observedAttributes = [
+  "label-idle",
+  "label-connecting",
+  "label-connected"
+];
+var JargoMicButtonElement = class extends JargoClientElement {
+  constructor() {
+    super(...arguments);
+    this.state = "disconnected";
+    this.enabled = true;
+  }
+  bind(client) {
+    this.state = client.state;
+    this.enabled = client.micEnabled;
+    this.track(
+      client.on("transportStateChanged", (s) => {
+        this.state = s;
+        this.enabled = client.micEnabled;
+        this.render();
+      })
+    );
+  }
+  render() {
+    const conn = isConnected(this.state);
+    const label = this.enabled ? this.getAttribute("label-mute") ?? "Mute" : this.getAttribute("label-unmute") ?? "Unmute";
+    this.innerHTML = `<button class="jargo-btn jargo-btn--ghost" ${conn ? "" : "disabled"} aria-pressed="${!this.enabled}" data-muted="${!this.enabled}">${micIcon(
+      !this.enabled
+    )}${escapeHtml(label)}</button>`;
+    const btn = this.querySelector("button");
+    if (btn) {
+      btn.onclick = () => {
+        const c = this.jargo;
+        if (!c) return;
+        this.enabled = c.toggleMic();
+        this.render();
+      };
+    }
+  }
+};
+JargoMicButtonElement.observedAttributes = ["label-mute", "label-unmute"];
+var STATUS_LABELS = {
+  disconnected: "Offline",
+  connecting: "Connecting\u2026",
+  connected: "Connected",
+  ready: "Live",
+  error: "Error"
+};
+var JargoStatusElement = class extends JargoClientElement {
+  constructor() {
+    super(...arguments);
+    this.state = "disconnected";
+  }
+  bind(client) {
+    this.state = client.state;
+    this.track(
+      client.on("transportStateChanged", (s) => {
+        this.state = s;
+        this.render();
+      })
+    );
+  }
+  render() {
+    const label = this.getAttribute(`label-${this.state}`) ?? STATUS_LABELS[this.state];
+    this.innerHTML = `<span class="jargo-status jargo-status--${this.state}" role="status"><span class="jargo-status__dot"></span>${escapeHtml(
+      label
+    )}</span>`;
+  }
+};
+JargoStatusElement.observedAttributes = [
+  "label-disconnected",
+  "label-connecting",
+  "label-connected",
+  "label-ready",
+  "label-error"
+];
+var JargoTranscriptElement = class extends JargoClientElement {
+  constructor() {
+    super();
+    this.tracker = null;
+    this.messages = [];
+    this.style.display = "block";
+  }
+  bind(client) {
+    const tracker = new TranscriptTracker(client);
+    this.tracker = tracker;
+    this.messages = tracker.getMessages();
+    this.track(
+      tracker.onChange((m) => {
+        this.messages = m;
+        this.render();
+      })
+    );
+    this.track(() => {
+      tracker.destroy();
+      this.tracker = null;
+    });
+  }
+  render() {
+    const empty = this.getAttribute("empty-label") ?? "No messages yet.";
+    const body = this.messages.length ? this.messages.map(
+      (m) => `<div class="jargo-msg jargo-msg--${m.role}" data-streaming="${!m.final}"><span class="jargo-msg__role">${m.role === "user" ? "You" : "Assistant"}</span><span class="jargo-msg__text">${escapeHtml(m.text)}</span></div>`
+    ).join("") : `<p class="jargo-transcript__empty">${escapeHtml(empty)}</p>`;
+    this.innerHTML = `<div class="jargo-transcript" role="log" aria-live="polite" aria-relevant="additions text" style="height:100%">${body}</div>`;
+    const list = this.querySelector(".jargo-transcript");
+    if (list) list.scrollTop = list.scrollHeight;
+  }
+};
+JargoTranscriptElement.observedAttributes = ["empty-label"];
+
+// src/index.ts
+var JargoOrbElement = class extends HTMLElement {
+  constructor() {
+    super();
+    this.orb = null;
+    const root = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = ":host{display:block;width:220px;height:220px}canvas{display:block;width:100%;height:100%}";
+    this.canvas = document.createElement("canvas");
+    root.append(style, this.canvas);
+  }
+  connectedCallback() {
+    if (this.orb) return;
+    this.orb = new Orb(this.canvas, this.readOptions());
+    const level = this.getAttribute("level");
+    if (level !== null) this.orb.setLevel(parseFloat(level));
+    if (!this.hasAttribute("paused")) this.orb.start();
+  }
+  disconnectedCallback() {
+    this.orb?.destroy();
+    this.orb = null;
+  }
+  attributeChangedCallback(name, _old, value) {
+    const orb = this.orb;
+    if (!orb) return;
+    if (name === "level") {
+      if (value !== null) orb.setLevel(parseFloat(value));
+      return;
+    }
+    if (name === "paused") {
+      if (value !== null) orb.stop();
+      else orb.start();
+      return;
+    }
+    orb.setOptions(this.readOptions());
+  }
+  /** Drive the orb from a MediaStream (e.g. a bot's remote audio); null detaches. */
+  attachStream(stream) {
+    this.orb?.attachStream(stream);
+  }
+  /** Manually set the drive level (0..1). */
+  setLevel(level) {
+    this.orb?.setLevel(level);
+  }
+  readOptions() {
+    const o = {};
+    const num = (attr, key) => {
+      const v = this.getAttribute(attr);
+      if (v !== null && v !== "") o[key] = parseFloat(v);
+    };
+    num("rings", "rings");
+    num("radius", "radius");
+    num("inner-scale", "innerScale");
+    num("line-width", "lineWidth");
+    num("speed", "speed");
+    num("idle-amplitude", "idleAmplitude");
+    num("reactivity", "reactivity");
+    num("glow", "glow");
+    const core = this.getAttribute("core");
+    if (core !== null) o.core = core !== "false";
+    const blend = this.getAttribute("blend");
+    if (blend === "lighter" || blend === "source-over") o.blend = blend;
+    const bg = this.getAttribute("background");
+    if (bg !== null) o.background = bg;
+    const colors = this.getAttribute("colors");
+    if (colors) {
+      o.colors = OrbPalettes[colors] ?? colors.split(/[,\s]+/).filter(Boolean);
+    }
+    return o;
+  }
+};
+JargoOrbElement.observedAttributes = [
+  "rings",
+  "radius",
+  "inner-scale",
+  "line-width",
+  "speed",
+  "idle-amplitude",
+  "reactivity",
+  "glow",
+  "core",
+  "blend",
+  "background",
+  "colors",
+  "level",
+  "paused"
+];
+function define(tag, ctor) {
+  if (typeof customElements !== "undefined" && !customElements.get(tag)) {
+    customElements.define(tag, ctor);
+  }
+}
+function defineJargoOrb(tag = "jargo-orb") {
+  define(tag, JargoOrbElement);
+}
+function defineJargoElements() {
+  defineJargoOrb();
+  define("jargo-connect-button", JargoConnectButtonElement);
+  define("jargo-mic-button", JargoMicButtonElement);
+  define("jargo-status", JargoStatusElement);
+  define("jargo-transcript", JargoTranscriptElement);
+}
+
+export {
+  setJargoClient,
+  getJargoClient,
+  JargoClientElement,
+  JargoConnectButtonElement,
+  JargoMicButtonElement,
+  JargoStatusElement,
+  JargoTranscriptElement,
+  OrbPalettes,
+  JargoOrbElement,
+  defineJargoOrb,
+  defineJargoElements
+};
+//# sourceMappingURL=chunk-JTFSFMFL.js.map

package/dist/chunk-JTFSFMFL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components.ts","../src/client-registry.ts","../src/JargoClientElement.ts"],"sourcesContent":["// @gojargo/jargo-elements — native web components for jargo. The visual\n// <jargo-orb> is built on @gojargo/jargo-ui; the client-driven components\n// (<jargo-connect-button>, <jargo-mic-button>, <jargo-status>,\n// <jargo-transcript>) read a client set via setJargoClient(). Style them all\n// by importing \"@gojargo/jargo-ui/theme.css\" once.\n//\n//   import \"@gojargo/jargo-elements/define\";\n//   import \"@gojargo/jargo-ui/theme.css\";\n//   setJargoClient(new JargoClient({ baseUrl }));\n//   // <jargo-orb colors=\"aurora\"></jargo-orb>\n//   // <jargo-connect-button></jargo-connect-button>\n\nimport {\n  Orb,\n  OrbPalettes,\n  type OrbOptions,\n  type OrbPaletteName,\n} from \"@gojargo/jargo-ui\";\nimport {\n  JargoConnectButtonElement,\n  JargoMicButtonElement,\n  JargoStatusElement,\n  JargoTranscriptElement,\n} from \"./components\";\n\nexport { setJargoClient, getJargoClient } from \"./client-registry\";\nexport { JargoClientElement } from \"./JargoClientElement\";\nexport {\n  JargoConnectButtonElement,\n  JargoMicButtonElement,\n  JargoStatusElement,\n  JargoTranscriptElement,\n} from \"./components\";\n\n// OrbOptions keys that take a number, mapped from their kebab-case attributes.\ntype NumKey =\n  | \"rings\"\n  | \"radius\"\n  | \"innerScale\"\n  | \"lineWidth\"\n  | \"speed\"\n  | \"idleAmplitude\"\n  | \"reactivity\"\n  | \"glow\"\n  | \"maxDpr\";\n\n/**\n * `<jargo-orb>` — the Orb as a custom element. Size it with CSS (defaults to\n * 220×220). Attributes mirror the Orb options (kebab-case): `rings`, `radius`,\n * `inner-scale`, `line-width`, `speed`, `idle-amplitude`, `reactivity`, `glow`,\n * `core`, `blend`, `background`, plus `colors` (a palette name like `aurora`,\n * or a comma/space-separated list of CSS colors), `level` (0..1), and `paused`.\n *\n * Drive it from live audio with the {@link attachStream} method.\n */\nexport class JargoOrbElement extends HTMLElement {\n  static readonly observedAttributes = [\n    \"rings\",\n    \"radius\",\n    \"inner-scale\",\n    \"line-width\",\n    \"speed\",\n    \"idle-amplitude\",\n    \"reactivity\",\n    \"glow\",\n    \"core\",\n    \"blend\",\n    \"background\",\n    \"colors\",\n    \"level\",\n    \"paused\",\n  ];\n\n  private orb: Orb | null = null;\n  private readonly canvas: HTMLCanvasElement;\n\n  constructor() {\n    super();\n    const root = this.attachShadow({ mode: \"open\" });\n    const style = document.createElement(\"style\");\n    style.textContent =\n      \":host{display:block;width:220px;height:220px}canvas{display:block;width:100%;height:100%}\";\n    this.canvas = document.createElement(\"canvas\");\n    root.append(style, this.canvas);\n  }\n\n  connectedCallback(): void {\n    if (this.orb) return;\n    this.orb = new Orb(this.canvas, this.readOptions());\n    const level = this.getAttribute(\"level\");\n    if (level !== null) this.orb.setLevel(parseFloat(level));\n    if (!this.hasAttribute(\"paused\")) this.orb.start();\n  }\n\n  disconnectedCallback(): void {\n    this.orb?.destroy();\n    this.orb = null;\n  }\n\n  attributeChangedCallback(\n    name: string,\n    _old: string | null,\n    value: string | null,\n  ): void {\n    const orb = this.orb;\n    if (!orb) return;\n    if (name === \"level\") {\n      if (value !== null) orb.setLevel(parseFloat(value));\n      return;\n    }\n    if (name === \"paused\") {\n      if (value !== null) orb.stop();\n      else orb.start();\n      return;\n    }\n    orb.setOptions(this.readOptions());\n  }\n\n  /** Drive the orb from a MediaStream (e.g. a bot's remote audio); null detaches. */\n  attachStream(stream: MediaStream | null): void {\n    this.orb?.attachStream(stream);\n  }\n\n  /** Manually set the drive level (0..1). */\n  setLevel(level: number): void {\n    this.orb?.setLevel(level);\n  }\n\n  private readOptions(): OrbOptions {\n    const o: OrbOptions = {};\n    const num = (attr: string, key: NumKey) => {\n      const v = this.getAttribute(attr);\n      if (v !== null && v !== \"\") o[key] = parseFloat(v);\n    };\n    num(\"rings\", \"rings\");\n    num(\"radius\", \"radius\");\n    num(\"inner-scale\", \"innerScale\");\n    num(\"line-width\", \"lineWidth\");\n    num(\"speed\", \"speed\");\n    num(\"idle-amplitude\", \"idleAmplitude\");\n    num(\"reactivity\", \"reactivity\");\n    num(\"glow\", \"glow\");\n\n    const core = this.getAttribute(\"core\");\n    if (core !== null) o.core = core !== \"false\";\n    const blend = this.getAttribute(\"blend\");\n    if (blend === \"lighter\" || blend === \"source-over\") o.blend = blend;\n    const bg = this.getAttribute(\"background\");\n    if (bg !== null) o.background = bg;\n\n    const colors = this.getAttribute(\"colors\");\n    if (colors) {\n      o.colors =\n        (OrbPalettes as Record<string, string[]>)[colors] ??\n        colors.split(/[,\\s]+/).filter(Boolean);\n    }\n    return o;\n  }\n}\n\nfunction define(tag: string, ctor: CustomElementConstructor): void {\n  if (typeof customElements !== \"undefined\" && !customElements.get(tag)) {\n    customElements.define(tag, ctor);\n  }\n}\n\n/** Register {@link JargoOrbElement} as `<jargo-orb>` (or a custom tag). */\nexport function defineJargoOrb(tag = \"jargo-orb\"): void {\n  define(tag, JargoOrbElement);\n}\n\n/**\n * Register all jargo web components: `<jargo-orb>`, `<jargo-connect-button>`,\n * `<jargo-mic-button>`, `<jargo-status>`, `<jargo-transcript>`.\n */\nexport function defineJargoElements(): void {\n  defineJargoOrb();\n  define(\"jargo-connect-button\", JargoConnectButtonElement);\n  define(\"jargo-mic-button\", JargoMicButtonElement);\n  define(\"jargo-status\", JargoStatusElement);\n  define(\"jargo-transcript\", JargoTranscriptElement);\n}\n\nexport { OrbPalettes };\nexport type { OrbOptions, OrbPaletteName };\n","import type { JargoClient, TransportState } from \"@gojargo/jargo-client-js\";\nimport { TranscriptTracker, type TranscriptMessage } from \"@gojargo/jargo-client-js\";\nimport { JargoClientElement, escapeHtml, micIcon } from \"./JargoClientElement\";\n\nconst isConnected = (s: TransportState) => s === \"connected\" || s === \"ready\";\n\n/** `<jargo-connect-button>` — start/end the conversation, following the state. */\nexport class JargoConnectButtonElement extends JargoClientElement {\n  static readonly observedAttributes = [\n    \"label-idle\",\n    \"label-connecting\",\n    \"label-connected\",\n  ];\n  private state: TransportState = \"disconnected\";\n\n  protected bind(client: JargoClient): void {\n    this.state = client.state;\n    this.track(\n      client.on(\"transportStateChanged\", (s) => {\n        this.state = s;\n        this.render();\n      }),\n    );\n  }\n\n  protected render(): void {\n    const conn = isConnected(this.state);\n    const connecting = this.state === \"connecting\";\n    const label = conn\n      ? (this.getAttribute(\"label-connected\") ?? \"End conversation\")\n      : connecting\n        ? (this.getAttribute(\"label-connecting\") ?? \"Connecting…\")\n        : (this.getAttribute(\"label-idle\") ?? \"Start conversation\");\n    this.innerHTML = `<button class=\"jargo-btn ${\n      conn ? \"jargo-btn--danger\" : \"jargo-btn--primary\"\n    }\" ${connecting ? \"disabled aria-busy='true'\" : \"\"}>${\n      connecting ? '<span class=\"jargo-spinner\"></span>' : \"\"\n    }${escapeHtml(label)}</button>`;\n    const btn = this.querySelector(\"button\");\n    if (btn) {\n      btn.onclick = () => {\n        const c = this.jargo;\n        if (!c) return;\n        if (isConnected(c.state)) c.disconnect();\n        else void c.connect().catch(() => {});\n      };\n    }\n  }\n}\n\n/** `<jargo-mic-button>` — mute/unmute the microphone. */\nexport class JargoMicButtonElement extends JargoClientElement {\n  static readonly observedAttributes = [\"label-mute\", \"label-unmute\"];\n  private state: TransportState = \"disconnected\";\n  private enabled = true;\n\n  protected bind(client: JargoClient): void {\n    this.state = client.state;\n    this.enabled = client.micEnabled;\n    this.track(\n      client.on(\"transportStateChanged\", (s) => {\n        this.state = s;\n        this.enabled = client.micEnabled;\n        this.render();\n      }),\n    );\n  }\n\n  protected render(): void {\n    const conn = isConnected(this.state);\n    const label = this.enabled\n      ? (this.getAttribute(\"label-mute\") ?? \"Mute\")\n      : (this.getAttribute(\"label-unmute\") ?? \"Unmute\");\n    this.innerHTML = `<button class=\"jargo-btn jargo-btn--ghost\" ${\n      conn ? \"\" : \"disabled\"\n    } aria-pressed=\"${!this.enabled}\" data-muted=\"${!this.enabled}\">${micIcon(\n      !this.enabled,\n    )}${escapeHtml(label)}</button>`;\n    const btn = this.querySelector(\"button\");\n    if (btn) {\n      btn.onclick = () => {\n        const c = this.jargo;\n        if (!c) return;\n        this.enabled = c.toggleMic();\n        this.render();\n      };\n    }\n  }\n}\n\nconst STATUS_LABELS: Record<TransportState, string> = {\n  disconnected: \"Offline\",\n  connecting: \"Connecting…\",\n  connected: \"Connected\",\n  ready: \"Live\",\n  error: \"Error\",\n};\n\n/** `<jargo-status>` — a badge reflecting the connection state. */\nexport class JargoStatusElement extends JargoClientElement {\n  static readonly observedAttributes = [\n    \"label-disconnected\",\n    \"label-connecting\",\n    \"label-connected\",\n    \"label-ready\",\n    \"label-error\",\n  ];\n  private state: TransportState = \"disconnected\";\n\n  protected bind(client: JargoClient): void {\n    this.state = client.state;\n    this.track(\n      client.on(\"transportStateChanged\", (s) => {\n        this.state = s;\n        this.render();\n      }),\n    );\n  }\n\n  protected render(): void {\n    const label =\n      this.getAttribute(`label-${this.state}`) ?? STATUS_LABELS[this.state];\n    this.innerHTML = `<span class=\"jargo-status jargo-status--${this.state}\" role=\"status\"><span class=\"jargo-status__dot\"></span>${escapeHtml(\n      label,\n    )}</span>`;\n  }\n}\n\n/**\n * `<jargo-transcript>` — an auto-scrolling message list built from the shared\n * {@link TranscriptTracker}. Size it with CSS (defaults to `display:block`).\n */\nexport class JargoTranscriptElement extends JargoClientElement {\n  static readonly observedAttributes = [\"empty-label\"];\n  private tracker: TranscriptTracker | null = null;\n  private messages: TranscriptMessage[] = [];\n\n  constructor() {\n    super();\n    this.style.display = \"block\";\n  }\n\n  protected bind(client: JargoClient): void {\n    const tracker = new TranscriptTracker(client);\n    this.tracker = tracker;\n    this.messages = tracker.getMessages();\n    this.track(\n      tracker.onChange((m) => {\n        this.messages = m;\n        this.render();\n      }),\n    );\n    this.track(() => {\n      tracker.destroy();\n      this.tracker = null;\n    });\n  }\n\n  protected render(): void {\n    const empty = this.getAttribute(\"empty-label\") ?? \"No messages yet.\";\n    const body = this.messages.length\n      ? this.messages\n          .map(\n            (m) =>\n              `<div class=\"jargo-msg jargo-msg--${m.role}\" data-streaming=\"${!m.final}\"><span class=\"jargo-msg__role\">${\n                m.role === \"user\" ? \"You\" : \"Assistant\"\n              }</span><span class=\"jargo-msg__text\">${escapeHtml(m.text)}</span></div>`,\n          )\n          .join(\"\")\n      : `<p class=\"jargo-transcript__empty\">${escapeHtml(empty)}</p>`;\n    this.innerHTML = `<div class=\"jargo-transcript\" role=\"log\" aria-live=\"polite\" aria-relevant=\"additions text\" style=\"height:100%\">${body}</div>`;\n    const list = this.querySelector<HTMLElement>(\".jargo-transcript\");\n    if (list) list.scrollTop = list.scrollHeight;\n  }\n}\n","// A tiny registry so the client-driven web components can find a JargoClient\n// without a framework's context. Set one client for the page:\n//\n//   import { setJargoClient } from \"@gojargo/jargo-elements\";\n//   setJargoClient(new JargoClient({ baseUrl }));\n//\n// Individual elements can override it by setting their `.client` property.\n\nimport type { JargoClient } from \"@gojargo/jargo-client-js\";\n\nlet current: JargoClient | null = null;\nconst subscribers = new Set<(client: JargoClient | null) => void>();\n\n/** Set (or clear) the client the jargo web components use by default. */\nexport function setJargoClient(client: JargoClient | null): void {\n  current = client;\n  subscribers.forEach((fn) => fn(client));\n}\n\n/** The current default client, if any. */\nexport function getJargoClient(): JargoClient | null {\n  return current;\n}\n\n/** Subscribe to default-client changes. Returns an unsubscribe function. */\nexport function subscribeJargoClient(\n  fn: (client: JargoClient | null) => void,\n): () => void {\n  subscribers.add(fn);\n  return () => subscribers.delete(fn);\n}\n","import type { JargoClient } from \"@gojargo/jargo-client-js\";\nimport { getJargoClient, subscribeJargoClient } from \"./client-registry\";\n\n/**\n * Base class for client-driven jargo web components. It resolves the client\n * (an explicit `.client` property, else the {@link setJargoClient} registry),\n * re-binds when it changes, and renders in light DOM so the app's\n * `@gojargo/jargo-ui/theme.css` styles apply.\n */\nexport abstract class JargoClientElement extends HTMLElement {\n  /** The bound client, available to subclasses in {@link bind}/{@link render}. */\n  protected jargo: JargoClient | null = null;\n\n  private clientOverride: JargoClient | null = null;\n  private offRegistry?: () => void;\n  private offs: Array<() => void> = [];\n\n  /** Set a specific client, overriding the global {@link setJargoClient} registry. */\n  set client(client: JargoClient | null) {\n    this.clientOverride = client;\n    this.rebind();\n  }\n  get client(): JargoClient | null {\n    return this.clientOverride ?? getJargoClient();\n  }\n\n  connectedCallback(): void {\n    this.offRegistry = subscribeJargoClient(() => {\n      if (!this.clientOverride) this.rebind();\n    });\n    this.rebind();\n  }\n\n  disconnectedCallback(): void {\n    this.offRegistry?.();\n    this.teardown();\n  }\n\n  attributeChangedCallback(): void {\n    this.render();\n  }\n\n  /** Track a cleanup (e.g. an event unsubscribe) tied to the current binding. */\n  protected track(off: () => void): void {\n    this.offs.push(off);\n  }\n\n  private rebind(): void {\n    this.teardown();\n    this.jargo = this.client;\n    if (this.jargo) this.bind(this.jargo);\n    this.render();\n  }\n\n  private teardown(): void {\n    this.offs.forEach((off) => off());\n    this.offs = [];\n  }\n\n  /** Subscribe to client events here via {@link track}; called on each (re)bind. */\n  protected bind(_client: JargoClient): void {}\n\n  /** Render the element's light-DOM markup; called on bind and attribute changes. */\n  protected abstract render(): void;\n}\n\nexport function escapeHtml(s: string): string {\n  return s.replace(\n    /[&<>]/g,\n    (c) => ({ \"&\": \"&amp;\", \"<\": \"&lt;\", \">\": \"&gt;\" })[c] as string,\n  );\n}\n\nexport function micIcon(muted: boolean): string {\n  return `<svg class=\"jargo-mic-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"3\" width=\"6\" height=\"11\" rx=\"3\"/><path d=\"M5 11a7 7 0 0 0 14 0\"/><line x1=\"12\" y1=\"18\" x2=\"12\" y2=\"21\"/>${\n    muted ? '<line x1=\"3\" y1=\"3\" x2=\"21\" y2=\"21\"/>' : \"\"\n  }</svg>`;\n}\n"],"mappings":"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","names":[]}