@absolutejs/voice 0.0.22-beta.52 → 0.0.22-beta.54

package/dist/angular/index.d.ts

@@ -1,4 +1,3 @@
-export { VoiceOpsStatusComponent } from './voice-ops-status.component';
 export { VoiceAppKitStatusService } from './voice-app-kit-status.service';
 export { VoiceStreamService } from './voice-stream.service';
 export { VoiceControllerService } from './voice-controller.service';

package/dist/angular/index.js

@@ -69,8 +69,8 @@ var __decorateElement = (array, flags, name, decorators, target, extra) => {
   return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
 };
 
-// src/angular/voice-ops-status.component.ts
-import { Component, Input, signal } from "@angular/core";
+// src/angular/voice-app-kit-status.service.ts
+import { computed, Injectable, signal } from "@angular/core";
 
 // src/client/appKitStatus.ts
 var fetchVoiceAppKitStatus = async (path = "/app-kit/status", options = {}) => {
@@ -151,248 +151,7 @@ var createVoiceAppKitStatusStore = (path = "/app-kit/status", options = {}) => {
   };
 };
 
-// src/client/opsStatusWidget.ts
-var DEFAULT_TITLE = "Voice Ops Status";
-var DEFAULT_DESCRIPTION = "Certified workflow, provider, and handoff readiness from the AbsoluteJS voice app kit.";
-var SURFACE_LABELS = {
-  handoffs: "Handoffs",
-  providers: "Providers",
-  quality: "Quality",
-  sessions: "Sessions",
-  workflows: "Workflows"
-};
-var escapeHtml = (value) => value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
-var readNumber = (value, key) => value && typeof value === "object" && (key in value) ? Number(value[key] ?? 0) : 0;
-var surfaceDetail = (surface) => {
-  const total = readNumber(surface, "total");
-  const failed = readNumber(surface, "failed");
-  const degraded = readNumber(surface, "degraded");
-  const source = surface && typeof surface === "object" && "source" in surface && typeof surface.source === "string" ? ` from ${surface.source}` : "";
-  if (degraded > 0) {
-    return `${degraded} degraded of ${total}`;
-  }
-  if (failed > 0) {
-    return `${failed} failing of ${total}${source}`;
-  }
-  return total > 0 ? `${total} passing${source}` : `No failures${source}`;
-};
-var getVoiceOpsStatusLabel = (report, error) => {
-  if (error) {
-    return "Unavailable";
-  }
-  if (!report) {
-    return "Checking";
-  }
-  return report.status === "pass" ? "Passing" : "Needs attention";
-};
-var createVoiceOpsStatusViewModel = (snapshot, options = {}) => {
-  const report = snapshot.report;
-  const surfaces = Object.entries(report?.surfaces ?? {}).map(([id, surface]) => {
-    const failed = readNumber(surface, "failed") || readNumber(surface, "degraded");
-    const total = readNumber(surface, "total");
-    const status = surface && typeof surface === "object" && "status" in surface ? surface.status ?? "pass" : "pass";
-    return {
-      detail: surfaceDetail(surface),
-      failed,
-      id,
-      label: SURFACE_LABELS[id] ?? id,
-      status,
-      total
-    };
-  });
-  return {
-    description: options.description ?? DEFAULT_DESCRIPTION,
-    error: snapshot.error,
-    isLoading: snapshot.isLoading,
-    label: getVoiceOpsStatusLabel(report, snapshot.error),
-    links: options.includeLinks === false ? [] : report?.links ?? [],
-    passed: report?.passed ?? 0,
-    status: snapshot.error ? "error" : report ? report.status : snapshot.isLoading ? "loading" : "loading",
-    surfaces,
-    title: options.title ?? DEFAULT_TITLE,
-    total: report?.total ?? 0,
-    updatedAt: snapshot.updatedAt
-  };
-};
-var renderVoiceOpsStatusHTML = (snapshot, options = {}) => {
-  const model = createVoiceOpsStatusViewModel(snapshot, options);
-  const surfaces = model.surfaces.length ? model.surfaces.map((surface) => `<li class="absolute-voice-ops-status__surface absolute-voice-ops-status__surface--${escapeHtml(surface.status)}">
-  <span>${escapeHtml(surface.label)}</span>
-  <strong>${escapeHtml(surface.detail)}</strong>
-</li>`).join("") : '<li class="absolute-voice-ops-status__surface"><span>Status</span><strong>Waiting for first check</strong></li>';
-  const links = model.links.length ? `<nav class="absolute-voice-ops-status__links">${model.links.slice(0, 4).map((link) => `<a href="${escapeHtml(link.href)}">${escapeHtml(link.label)}</a>`).join("")}</nav>` : "";
-  return `<section class="absolute-voice-ops-status absolute-voice-ops-status--${escapeHtml(model.status)}">
-  <header class="absolute-voice-ops-status__header">
-    <span class="absolute-voice-ops-status__eyebrow">${escapeHtml(model.title)}</span>
-    <strong class="absolute-voice-ops-status__label">${escapeHtml(model.label)}</strong>
-  </header>
-  <p class="absolute-voice-ops-status__description">${escapeHtml(model.description)}</p>
-  <div class="absolute-voice-ops-status__summary">
-    <span>${model.passed} passing</span>
-    <span>${Math.max(model.total - model.passed, 0)} failing</span>
-    <span>${model.total} checks</span>
-  </div>
-  <ul class="absolute-voice-ops-status__surfaces">${surfaces}</ul>
-  ${model.error ? `<p class="absolute-voice-ops-status__error">${escapeHtml(model.error)}</p>` : ""}
-  ${links}
-</section>`;
-};
-var getVoiceOpsStatusCSS = () => `.absolute-voice-ops-status{border:1px solid #d8d2c4;border-radius:20px;background:#fffaf0;color:#16130d;padding:18px;box-shadow:0 18px 40px rgba(47,37,18,.12);font-family:inherit}.absolute-voice-ops-status--fail,.absolute-voice-ops-status--error{border-color:#f2a7a7;background:#fff5f3}.absolute-voice-ops-status__header{align-items:start;display:flex;gap:12px;justify-content:space-between}.absolute-voice-ops-status__eyebrow{color:#73664f;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.absolute-voice-ops-status__label{font-size:28px;line-height:1}.absolute-voice-ops-status__description{color:#514733;margin:12px 0 0}.absolute-voice-ops-status__summary,.absolute-voice-ops-status__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.absolute-voice-ops-status__summary span,.absolute-voice-ops-status__links a{border:1px solid #e6ddca;border-radius:999px;color:inherit;padding:6px 10px;text-decoration:none}.absolute-voice-ops-status__surfaces{display:grid;gap:8px;list-style:none;margin:16px 0 0;padding:0}.absolute-voice-ops-status__surface{align-items:center;background:#fff;border:1px solid #eee4d2;border-radius:14px;display:flex;gap:12px;justify-content:space-between;padding:10px 12px}.absolute-voice-ops-status__surface--fail{border-color:#f2a7a7}.absolute-voice-ops-status__surface span{color:#655944}.absolute-voice-ops-status__error{color:#9f1239;font-weight:700}`;
-var mountVoiceOpsStatus = (element, path = "/app-kit/status", options = {}) => {
-  const store = createVoiceAppKitStatusStore(path, options);
-  const render = () => {
-    element.innerHTML = renderVoiceOpsStatusHTML(store.getSnapshot(), options);
-  };
-  const unsubscribe = store.subscribe(render);
-  render();
-  store.refresh().catch(() => {});
-  return {
-    close: () => {
-      unsubscribe();
-      store.close();
-    },
-    refresh: store.refresh
-  };
-};
-
-// src/angular/voice-ops-status.component.ts
-var _dec = [
-  Component({
-    selector: "absolute-voice-ops-status",
-    standalone: true,
-    template: `
-		<section
-			class="absolute-voice-ops-status"
-			[class.absolute-voice-ops-status--pass]="model().status === 'pass'"
-			[class.absolute-voice-ops-status--fail]="model().status === 'fail'"
-			[class.absolute-voice-ops-status--loading]="model().status === 'loading'"
-			[class.absolute-voice-ops-status--error]="model().status === 'error'"
-		>
-			<header class="absolute-voice-ops-status__header">
-				<span class="absolute-voice-ops-status__eyebrow">{{
-					model().title
-				}}</span>
-				<strong class="absolute-voice-ops-status__label">{{
-					model().label
-				}}</strong>
-			</header>
-			<p class="absolute-voice-ops-status__description">
-				{{ model().description }}
-			</p>
-			<div class="absolute-voice-ops-status__summary">
-				<span>{{ model().passed }} passing</span>
-				<span>{{ model().total - model().passed }} failing</span>
-				<span>{{ model().total }} checks</span>
-			</div>
-			<ul class="absolute-voice-ops-status__surfaces">
-				@if (model().surfaces.length > 0) {
-					@for (surface of model().surfaces; track surface.id) {
-						<li
-							class="absolute-voice-ops-status__surface"
-							[class.absolute-voice-ops-status__surface--pass]="
-								surface.status === 'pass'
-							"
-							[class.absolute-voice-ops-status__surface--fail]="
-								surface.status === 'fail'
-							"
-						>
-							<span>{{ surface.label }}</span>
-							<strong>{{ surface.detail }}</strong>
-						</li>
-					}
-				} @else {
-					<li class="absolute-voice-ops-status__surface">
-						<span>Status</span>
-						<strong>Waiting for first check</strong>
-					</li>
-				}
-			</ul>
-			@if (model().error) {
-				<p class="absolute-voice-ops-status__error">{{ model().error }}</p>
-			}
-			@if (model().links.length > 0) {
-				<nav class="absolute-voice-ops-status__links">
-					@for (link of model().links.slice(0, 4); track link.href) {
-						<a [href]="link.href">{{ link.label }}</a>
-					}
-				</nav>
-			}
-		</section>
-	`
-  })
-];
-var _dec2 = [
-  Input()
-];
-var _dec3 = [
-  Input()
-];
-var _dec4 = [
-  Input()
-];
-var _dec5 = [
-  Input()
-];
-var _dec6 = [
-  Input()
-];
-var _init = __decoratorStart(undefined);
-
-class VoiceOpsStatusComponent {
-  constructor() {
-    this.description = __runInitializers(_init, 8, this);
-    __runInitializers(_init, 11, this);
-    this.includeLinks = __runInitializers(_init, 12, this, true);
-    __runInitializers(_init, 15, this);
-    this.intervalMs = __runInitializers(_init, 16, this);
-    __runInitializers(_init, 19, this);
-    this.path = __runInitializers(_init, 20, this, "/app-kit/status");
-    __runInitializers(_init, 23, this);
-    this.title = __runInitializers(_init, 24, this);
-    __runInitializers(_init, 27, this);
-  }
-  cleanup = () => {};
-  store;
-  model = signal(createVoiceOpsStatusViewModel({
-    error: null,
-    isLoading: true
-  }));
-  ngOnInit() {
-    const options = this.options();
-    this.store = createVoiceAppKitStatusStore(this.path, options);
-    const sync = () => {
-      this.model.set(createVoiceOpsStatusViewModel(this.store.getSnapshot(), options));
-    };
-    this.cleanup = this.store.subscribe(sync);
-    sync();
-    if (typeof window !== "undefined") {
-      this.store.refresh().catch(() => {});
-    }
-  }
-  ngOnDestroy() {
-    this.cleanup();
-    this.store?.close();
-  }
-  options() {
-    return {
-      description: this.description,
-      includeLinks: this.includeLinks,
-      intervalMs: this.intervalMs,
-      title: this.title
-    };
-  }
-}
-__decorateElement(_init, 5, "description", _dec2, VoiceOpsStatusComponent);
-__decorateElement(_init, 5, "includeLinks", _dec3, VoiceOpsStatusComponent);
-__decorateElement(_init, 5, "intervalMs", _dec4, VoiceOpsStatusComponent);
-__decorateElement(_init, 5, "path", _dec5, VoiceOpsStatusComponent);
-__decorateElement(_init, 5, "title", _dec6, VoiceOpsStatusComponent);
-VoiceOpsStatusComponent = __decorateElement(_init, 0, "VoiceOpsStatusComponent", _dec, VoiceOpsStatusComponent);
-__runInitializers(_init, 1, VoiceOpsStatusComponent);
-__decoratorMetadata(_init, VoiceOpsStatusComponent);
-let _VoiceOpsStatusComponent = VoiceOpsStatusComponent;
 // src/angular/voice-app-kit-status.service.ts
-import { computed, Injectable, signal as signal2 } from "@angular/core";
 var _dec = [
   Injectable({ providedIn: "root" })
 ];
@@ -401,10 +160,10 @@ var _init = __decoratorStart(undefined);
 class VoiceAppKitStatusService {
   connect(path = "/app-kit/status", options = {}) {
     const store = createVoiceAppKitStatusStore(path, options);
-    const errorSignal = signal2(null);
-    const isLoadingSignal = signal2(false);
-    const reportSignal = signal2(undefined);
-    const updatedAtSignal = signal2(undefined);
+    const errorSignal = signal(null);
+    const isLoadingSignal = signal(false);
+    const reportSignal = signal(undefined);
+    const updatedAtSignal = signal(undefined);
     const sync = () => {
       const snapshot = store.getSnapshot();
       errorSignal.set(snapshot.error);
@@ -435,7 +194,7 @@ __runInitializers(_init, 1, VoiceAppKitStatusService);
 __decoratorMetadata(_init, VoiceAppKitStatusService);
 let _VoiceAppKitStatusService = VoiceAppKitStatusService;
 // src/angular/voice-stream.service.ts
-import { computed as computed2, Injectable as Injectable2, signal as signal3 } from "@angular/core";
+import { computed as computed2, Injectable as Injectable2, signal as signal2 } from "@angular/core";
 
 // src/client/actions.ts
 var normalizeErrorMessage = (value) => {
@@ -959,15 +718,15 @@ var _init = __decoratorStart(undefined);
 class VoiceStreamService {
   connect(path, options = {}) {
     const stream = createVoiceStream(path, options);
-    const assistantAudioSignal = signal3([]);
-    const assistantTextsSignal = signal3([]);
-    const callSignal = signal3(null);
-    const errorSignal = signal3(null);
-    const isConnectedSignal = signal3(false);
-    const partialSignal = signal3("");
-    const sessionIdSignal = signal3(stream.sessionId);
-    const statusSignal = signal3(stream.status);
-    const turnsSignal = signal3([]);
+    const assistantAudioSignal = signal2([]);
+    const assistantTextsSignal = signal2([]);
+    const callSignal = signal2(null);
+    const errorSignal = signal2(null);
+    const isConnectedSignal = signal2(false);
+    const partialSignal = signal2("");
+    const sessionIdSignal = signal2(stream.sessionId);
+    const statusSignal = signal2(stream.status);
+    const turnsSignal = signal2([]);
     const sync = () => {
       assistantAudioSignal.set([...stream.assistantAudio]);
       assistantTextsSignal.set([...stream.assistantTexts]);
@@ -1006,7 +765,7 @@ __runInitializers(_init, 1, VoiceStreamService);
 __decoratorMetadata(_init, VoiceStreamService);
 let _VoiceStreamService = VoiceStreamService;
 // src/angular/voice-controller.service.ts
-import { computed as computed3, Injectable as Injectable3, signal as signal4 } from "@angular/core";
+import { computed as computed3, Injectable as Injectable3, signal as signal3 } from "@angular/core";
 
 // src/client/htmx.ts
 var DEFAULT_EVENT_NAME = "voice-refresh";
@@ -1647,16 +1406,16 @@ var _init = __decoratorStart(undefined);
 class VoiceControllerService {
   connect(path, options = {}) {
     const controller = createVoiceController(path, options);
-    const assistantAudioSignal = signal4([]);
-    const assistantTextsSignal = signal4([]);
-    const errorSignal = signal4(null);
-    const isConnectedSignal = signal4(false);
-    const isRecordingSignal = signal4(false);
-    const partialSignal = signal4("");
-    const recordingErrorSignal = signal4(null);
-    const sessionIdSignal = signal4(controller.sessionId);
-    const statusSignal = signal4(controller.status);
-    const turnsSignal = signal4([]);
+    const assistantAudioSignal = signal3([]);
+    const assistantTextsSignal = signal3([]);
+    const errorSignal = signal3(null);
+    const isConnectedSignal = signal3(false);
+    const isRecordingSignal = signal3(false);
+    const partialSignal = signal3("");
+    const recordingErrorSignal = signal3(null);
+    const sessionIdSignal = signal3(controller.sessionId);
+    const statusSignal = signal3(controller.status);
+    const turnsSignal = signal3([]);
     const sync = () => {
       assistantAudioSignal.set([...controller.assistantAudio]);
       assistantTextsSignal.set([...controller.assistantTexts]);
@@ -1700,7 +1459,7 @@ __runInitializers(_init, 1, VoiceControllerService);
 __decoratorMetadata(_init, VoiceControllerService);
 let _VoiceControllerService = VoiceControllerService;
 // src/angular/voice-provider-status.service.ts
-import { computed as computed4, Injectable as Injectable4, signal as signal5 } from "@angular/core";
+import { computed as computed4, Injectable as Injectable4, signal as signal4 } from "@angular/core";
 
 // src/client/providerStatus.ts
 var fetchVoiceProviderStatus = async (path = "/api/provider-status", options = {}) => {
@@ -1791,10 +1550,10 @@ var _init = __decoratorStart(undefined);
 class VoiceProviderStatusService {
   connect(path = "/api/provider-status", options = {}) {
     const store = createVoiceProviderStatusStore(path, options);
-    const errorSignal = signal5(null);
-    const isLoadingSignal = signal5(false);
-    const providersSignal = signal5([]);
-    const updatedAtSignal = signal5(undefined);
+    const errorSignal = signal4(null);
+    const isLoadingSignal = signal4(false);
+    const providersSignal = signal4([]);
+    const updatedAtSignal = signal4(undefined);
     const sync = () => {
       const snapshot = store.getSnapshot();
       errorSignal.set(snapshot.error);
@@ -1823,7 +1582,7 @@ __runInitializers(_init, 1, VoiceProviderStatusService);
 __decoratorMetadata(_init, VoiceProviderStatusService);
 let _VoiceProviderStatusService = VoiceProviderStatusService;
 // src/angular/voice-workflow-status.service.ts
-import { computed as computed5, Injectable as Injectable5, signal as signal6 } from "@angular/core";
+import { computed as computed5, Injectable as Injectable5, signal as signal5 } from "@angular/core";
 
 // src/client/workflowStatus.ts
 var fetchVoiceWorkflowStatus = async (path = "/evals/scenarios/json", options = {}) => {
@@ -1913,10 +1672,10 @@ var _init = __decoratorStart(undefined);
 class VoiceWorkflowStatusService {
   connect(path = "/evals/scenarios/json", options = {}) {
     const store = createVoiceWorkflowStatusStore(path, options);
-    const errorSignal = signal6(null);
-    const isLoadingSignal = signal6(false);
-    const reportSignal = signal6(undefined);
-    const updatedAtSignal = signal6(undefined);
+    const errorSignal = signal5(null);
+    const isLoadingSignal = signal5(false);
+    const reportSignal = signal5(undefined);
+    const updatedAtSignal = signal5(undefined);
     const sync = () => {
       const snapshot = store.getSnapshot();
       errorSignal.set(snapshot.error);
@@ -1950,7 +1709,6 @@ export {
   VoiceWorkflowStatusService,
   VoiceStreamService,
   VoiceProviderStatusService,
-  VoiceOpsStatusComponent,
   VoiceControllerService,
   VoiceAppKitStatusService
 };

package/dist/client/index.d.ts

@@ -6,7 +6,7 @@ export { bindVoiceBargeIn, createVoiceDuplexController } from './duplex';
 export { bindVoiceHTMX } from './htmx';
 export { createMicrophoneCapture } from './microphone';
 export { createVoiceAppKitStatusStore, fetchVoiceAppKitStatus } from './appKitStatus';
-export { createVoiceOpsStatusViewModel, getVoiceOpsStatusCSS, getVoiceOpsStatusLabel, mountVoiceOpsStatus, renderVoiceOpsStatusHTML } from './opsStatusWidget';
+export { createVoiceOpsStatusViewModel, defineVoiceOpsStatusElement, getVoiceOpsStatusCSS, getVoiceOpsStatusLabel, mountVoiceOpsStatus, renderVoiceOpsStatusHTML } from './opsStatusWidget';
 export { createVoiceProviderStatusStore, fetchVoiceProviderStatus } from './providerStatus';
 export { createVoiceWorkflowStatusStore, fetchVoiceWorkflowStatus } from './workflowStatus';
 export type { VoiceAppKitStatusClientOptions, VoiceAppKitStatusSnapshot } from './appKitStatus';

package/dist/client/index.js

@@ -1804,6 +1804,27 @@ var mountVoiceOpsStatus = (element, path = "/app-kit/status", options = {}) => {
     refresh: store.refresh
   };
 };
+var defineVoiceOpsStatusElement = (tagName = "absolute-voice-ops-status") => {
+  if (typeof window === "undefined" || typeof customElements === "undefined" || customElements.get(tagName)) {
+    return;
+  }
+  customElements.define(tagName, class AbsoluteVoiceOpsStatusElement extends HTMLElement {
+    mounted;
+    connectedCallback() {
+      const intervalMs = Number(this.getAttribute("interval-ms") ?? 5000);
+      this.mounted = mountVoiceOpsStatus(this, this.getAttribute("path") ?? "/app-kit/status", {
+        description: this.getAttribute("description") ?? undefined,
+        includeLinks: this.getAttribute("include-links") !== "false",
+        intervalMs: Number.isFinite(intervalMs) ? intervalMs : 5000,
+        title: this.getAttribute("title") ?? undefined
+      });
+    }
+    disconnectedCallback() {
+      this.mounted?.close();
+      this.mounted = undefined;
+    }
+  });
+};
 // src/client/providerStatus.ts
 var fetchVoiceProviderStatus = async (path = "/api/provider-status", options = {}) => {
   const fetchImpl = options.fetch ?? globalThis.fetch;
@@ -1969,6 +1990,7 @@ export {
   fetchVoiceWorkflowStatus,
   fetchVoiceProviderStatus,
   fetchVoiceAppKitStatus,
+  defineVoiceOpsStatusElement,
   decodeVoiceAudioChunk,
   createVoiceWorkflowStatusStore,
   createVoiceStream,

package/dist/client/opsStatusWidget.d.ts

@@ -37,3 +37,4 @@ export declare const mountVoiceOpsStatus: (element: Element, path?: string, opti
     close: () => void;
     refresh: () => Promise<VoiceAppKitStatusReport | undefined>;
 };
+export declare const defineVoiceOpsStatusElement: (tagName?: string) => void;

package/dist/react/index.js

@@ -271,6 +271,27 @@ var mountVoiceOpsStatus = (element, path = "/app-kit/status", options = {}) => {
     refresh: store.refresh
   };
 };
+var defineVoiceOpsStatusElement = (tagName = "absolute-voice-ops-status") => {
+  if (typeof window === "undefined" || typeof customElements === "undefined" || customElements.get(tagName)) {
+    return;
+  }
+  customElements.define(tagName, class AbsoluteVoiceOpsStatusElement extends HTMLElement {
+    mounted;
+    connectedCallback() {
+      const intervalMs = Number(this.getAttribute("interval-ms") ?? 5000);
+      this.mounted = mountVoiceOpsStatus(this, this.getAttribute("path") ?? "/app-kit/status", {
+        description: this.getAttribute("description") ?? undefined,
+        includeLinks: this.getAttribute("include-links") !== "false",
+        intervalMs: Number.isFinite(intervalMs) ? intervalMs : 5000,
+        title: this.getAttribute("title") ?? undefined
+      });
+    }
+    disconnectedCallback() {
+      this.mounted?.close();
+      this.mounted = undefined;
+    }
+  });
+};
 
 // src/react/VoiceOpsStatus.tsx
 import { jsxDEV } from "react/jsx-dev-runtime";

package/dist/svelte/index.js

@@ -253,6 +253,27 @@ var mountVoiceOpsStatus = (element, path = "/app-kit/status", options = {}) => {
     refresh: store.refresh
   };
 };
+var defineVoiceOpsStatusElement = (tagName = "absolute-voice-ops-status") => {
+  if (typeof window === "undefined" || typeof customElements === "undefined" || customElements.get(tagName)) {
+    return;
+  }
+  customElements.define(tagName, class AbsoluteVoiceOpsStatusElement extends HTMLElement {
+    mounted;
+    connectedCallback() {
+      const intervalMs = Number(this.getAttribute("interval-ms") ?? 5000);
+      this.mounted = mountVoiceOpsStatus(this, this.getAttribute("path") ?? "/app-kit/status", {
+        description: this.getAttribute("description") ?? undefined,
+        includeLinks: this.getAttribute("include-links") !== "false",
+        intervalMs: Number.isFinite(intervalMs) ? intervalMs : 5000,
+        title: this.getAttribute("title") ?? undefined
+      });
+    }
+    disconnectedCallback() {
+      this.mounted?.close();
+      this.mounted = undefined;
+    }
+  });
+};
 
 // src/svelte/createVoiceOpsStatus.ts
 var createVoiceOpsStatus = (path = "/app-kit/status", options = {}) => {

package/dist/vue/index.js

@@ -254,6 +254,27 @@ var mountVoiceOpsStatus = (element, path = "/app-kit/status", options = {}) => {
     refresh: store.refresh
   };
 };
+var defineVoiceOpsStatusElement = (tagName = "absolute-voice-ops-status") => {
+  if (typeof window === "undefined" || typeof customElements === "undefined" || customElements.get(tagName)) {
+    return;
+  }
+  customElements.define(tagName, class AbsoluteVoiceOpsStatusElement extends HTMLElement {
+    mounted;
+    connectedCallback() {
+      const intervalMs = Number(this.getAttribute("interval-ms") ?? 5000);
+      this.mounted = mountVoiceOpsStatus(this, this.getAttribute("path") ?? "/app-kit/status", {
+        description: this.getAttribute("description") ?? undefined,
+        includeLinks: this.getAttribute("include-links") !== "false",
+        intervalMs: Number.isFinite(intervalMs) ? intervalMs : 5000,
+        title: this.getAttribute("title") ?? undefined
+      });
+    }
+    disconnectedCallback() {
+      this.mounted?.close();
+      this.mounted = undefined;
+    }
+  });
+};
 
 // src/vue/useVoiceAppKitStatus.ts
 import { onUnmounted, ref, shallowRef } from "vue";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@absolutejs/voice",
-	"version": "0.0.22-beta.52",
+	"version": "0.0.22-beta.54",
 	"description": "Voice primitives and Elysia plugin for AbsoluteJS",
 	"repository": {
 		"type": "git",