@signalwire/web-components 4.0.0-beta.11 → 4.0.0-beta.12

package/dist/utils/transcriptToMarkdown.js

@@ -0,0 +1,59 @@
+function r(t) {
+  const n = ["# Transcript", "", `*Generated: ${(/* @__PURE__ */ new Date()).toLocaleString(void 0, {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  })}*`, ""], a = t.filter((s) => s.state === "complete");
+  for (const s of a)
+    n.push("---", ""), n.push(...u(s), "");
+  return a.length > 0 && n.push("---", ""), n.join(`
+`);
+}
+function u(t) {
+  var n, a, s, i;
+  const e = [];
+  switch (t.type) {
+    case "user":
+      e.push(`**You:** ${t.text}`);
+      break;
+    case "agent":
+      e.push(`**Agent:** ${t.text}`);
+      break;
+    case "system":
+      e.push(`*${t.text}*`);
+      break;
+  }
+  if ((n = t.meta) != null && n.code) {
+    const { language: o = "", content: c } = t.meta.code;
+    e.push("", `\`\`\`${o}`, c, "```");
+  }
+  if ((s = (a = t.meta) == null ? void 0 : a.links) != null && s.length) {
+    e.push("");
+    for (const o of t.meta.links)
+      e.push(`- [${o.label}](${o.url})`);
+  }
+  return (i = t.meta) != null && i.displayContent && e.push(...l(t.meta.displayContent)), e;
+}
+function l(t) {
+  const e = [""];
+  switch (t.format) {
+    case "code":
+      e.push(`\`\`\`${t.language ?? ""}`, t.content, "```");
+      break;
+    case "markdown":
+      e.push(t.content);
+      break;
+    case "html":
+      e.push("<!-- html content -->", t.content, "<!-- /html content -->");
+      break;
+    default:
+      e.push(t.content);
+  }
+  return e;
+}
+export {
+  r as transcriptToMarkdown
+};
+//# sourceMappingURL=transcriptToMarkdown.js.map

package/dist/utils/transcriptToMarkdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transcriptToMarkdown.js","sources":["../../src/utils/transcriptToMarkdown.ts"],"sourcesContent":["import type { TranscriptEntry, TranscriptEntryMeta } from '../components/UI/sw-ui-transcript-view.js';\n\n/**\n * Serializes a transcript entry list to a Markdown string.\n *\n * Format per entry type:\n *   user   → **You:** text\n *   agent  → **Agent:** text\n *   system → *text*\n *\n * meta.code  → fenced code block (with language tag when present)\n * meta.links → markdown link list appended after the message text\n */\nexport function transcriptToMarkdown(entries: TranscriptEntry[]): string {\n  const timestamp = new Date().toLocaleString(undefined, {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n    hour: '2-digit',\n    minute: '2-digit',\n  });\n\n  const lines: string[] = [`# Transcript`, ``, `*Generated: ${timestamp}*`, ``];\n\n  const completed = entries.filter((e) => e.state === 'complete');\n\n  for (const entry of completed) {\n    lines.push('---', '');\n    lines.push(...serializeEntry(entry), '');\n  }\n\n  if (completed.length > 0) {\n    lines.push('---', '');\n  }\n\n  return lines.join('\\n');\n}\n\nfunction serializeEntry(entry: TranscriptEntry): string[] {\n  const lines: string[] = [];\n\n  switch (entry.type) {\n    case 'user':\n      lines.push(`**You:** ${entry.text}`);\n      break;\n    case 'agent':\n      lines.push(`**Agent:** ${entry.text}`);\n      break;\n    case 'system':\n      lines.push(`*${entry.text}*`);\n      break;\n  }\n\n  if (entry.meta?.code) {\n    const { language = '', content } = entry.meta.code;\n    lines.push('', `\\`\\`\\`${language}`, content, '```');\n  }\n\n  if (entry.meta?.links?.length) {\n    lines.push('');\n    for (const link of entry.meta.links) {\n      lines.push(`- [${link.label}](${link.url})`);\n    }\n  }\n\n  if (entry.meta?.displayContent) {\n    lines.push(...serializeDisplayContent(entry.meta.displayContent));\n  }\n\n  return lines;\n}\n\nfunction serializeDisplayContent(\n  dc: NonNullable<TranscriptEntryMeta['displayContent']>\n): string[] {\n  const lines: string[] = [''];\n\n  switch (dc.format) {\n    case 'code':\n      lines.push(`\\`\\`\\`${dc.language ?? ''}`, dc.content, '```');\n      break;\n    case 'markdown':\n      lines.push(dc.content);\n      break;\n    case 'html':\n      // Wrap in an HTML comment so the file stays valid markdown while\n      // preserving the raw payload for anyone who needs it.\n      lines.push('<!-- html content -->', dc.content, '<!-- /html content -->');\n      break;\n    default:\n      lines.push(dc.content);\n  }\n\n  return lines;\n}\n"],"names":["transcriptToMarkdown","entries","lines","completed","e","entry","serializeEntry","_a","_b","_c","_d","language","content","link","serializeDisplayContent","dc"],"mappings":"AAaO,SAASA,EAAqBC,GAAoC;AASvE,QAAMC,IAAkB,CAAC,gBAAgB,IAAI,gBAR3B,oBAAI,KAAA,GAAO,eAAe,QAAW;AAAA,IACrD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,EAAA,CACT,CAEoE,KAAK,EAAE,GAEtEC,IAAYF,EAAQ,OAAO,CAACG,MAAMA,EAAE,UAAU,UAAU;AAE9D,aAAWC,KAASF;AAClB,IAAAD,EAAM,KAAK,OAAO,EAAE,GACpBA,EAAM,KAAK,GAAGI,EAAeD,CAAK,GAAG,EAAE;AAGzC,SAAIF,EAAU,SAAS,KACrBD,EAAM,KAAK,OAAO,EAAE,GAGfA,EAAM,KAAK;AAAA,CAAI;AACxB;AAEA,SAASI,EAAeD,GAAkC;AAzBnD,MAAAE,GAAAC,GAAAC,GAAAC;AA0BL,QAAMR,IAAkB,CAAA;AAExB,UAAQG,EAAM,MAAA;AAAA,IACZ,KAAK;AACH,MAAAH,EAAM,KAAK,YAAYG,EAAM,IAAI,EAAE;AACnC;AAAA,IACF,KAAK;AACH,MAAAH,EAAM,KAAK,cAAcG,EAAM,IAAI,EAAE;AACrC;AAAA,IACF,KAAK;AACH,MAAAH,EAAM,KAAK,IAAIG,EAAM,IAAI,GAAG;AAC5B;AAAA,EAAA;AAGJ,OAAIE,IAAAF,EAAM,SAAN,QAAAE,EAAY,MAAM;AACpB,UAAM,EAAE,UAAAI,IAAW,IAAI,SAAAC,EAAA,IAAYP,EAAM,KAAK;AAC9C,IAAAH,EAAM,KAAK,IAAI,SAASS,CAAQ,IAAIC,GAAS,KAAK;AAAA,EACpD;AAEA,OAAIH,KAAAD,IAAAH,EAAM,SAAN,gBAAAG,EAAY,UAAZ,QAAAC,EAAmB,QAAQ;AAC7B,IAAAP,EAAM,KAAK,EAAE;AACb,eAAWW,KAAQR,EAAM,KAAK;AAC5B,MAAAH,EAAM,KAAK,MAAMW,EAAK,KAAK,KAAKA,EAAK,GAAG,GAAG;AAAA,EAE/C;AAEA,UAAIH,IAAAL,EAAM,SAAN,QAAAK,EAAY,kBACdR,EAAM,KAAK,GAAGY,EAAwBT,EAAM,KAAK,cAAc,CAAC,GAG3DH;AACT;AAEA,SAASY,EACPC,GACU;AACV,QAAMb,IAAkB,CAAC,EAAE;AAE3B,UAAQa,EAAG,QAAA;AAAA,IACT,KAAK;AACH,MAAAb,EAAM,KAAK,SAASa,EAAG,YAAY,EAAE,IAAIA,EAAG,SAAS,KAAK;AAC1D;AAAA,IACF,KAAK;AACH,MAAAb,EAAM,KAAKa,EAAG,OAAO;AACrB;AAAA,IACF,KAAK;AAGH,MAAAb,EAAM,KAAK,yBAAyBa,EAAG,SAAS,wBAAwB;AACxE;AAAA,IACF;AACE,MAAAb,EAAM,KAAKa,EAAG,OAAO;AAAA,EAAA;AAGzB,SAAOb;AACT;"}

package/dist/utils/use-google-font.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Load a Google Font into the document. Idempotent — calling twice with the
+ * same arguments injects only one `<link>`.
+ *
+ * @example
+ * useGoogleFont('Lexend', { weights: [400, 500, 700] });
+ * useGoogleFont('JetBrains Mono');
+ */
+export interface UseGoogleFontOptions {
+    /** Font weights to load. Defaults to `[400]`. */
+    weights?: number[];
+    /** `font-display` strategy. Defaults to `'swap'`. */
+    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    /** Whether to load italic variants alongside the upright weights. */
+    italic?: boolean;
+}
+export declare function useGoogleFont(name: string, options?: UseGoogleFontOptions): void;
+//# sourceMappingURL=use-google-font.d.ts.map

package/dist/utils/use-google-font.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-google-font.d.ts","sourceRoot":"","sources":["../../src/utils/use-google-font.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAoB;IACnC,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAAC;IAC9D,qEAAqE;IACrE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAID,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,GAAE,oBAAyB,GAAG,IAAI,CAmBpF"}

package/dist/utils/use-google-font.js

@@ -0,0 +1,12 @@
+const r = "https://fonts.googleapis.com/css2";
+function d(o, e = {}) {
+  if (typeof document > "u") return;
+  const n = e.weights ?? [400], l = e.display ?? "swap", c = o.replace(/\s+/g, "+"), a = e.italic ? `ital,wght@${n.flatMap((i) => [`0,${i}`, `1,${i}`]).join(";")}` : `wght@${n.join(";")}`, s = `${r}?family=${c}:${a}&display=${l}`;
+  if (document.querySelector(`link[href="${s}"]`)) return;
+  const t = document.createElement("link");
+  t.rel = "stylesheet", t.href = s, document.head.appendChild(t);
+}
+export {
+  d as useGoogleFont
+};
+//# sourceMappingURL=use-google-font.js.map

package/dist/utils/use-google-font.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-google-font.js","sources":["../../src/utils/use-google-font.ts"],"sourcesContent":["/**\n * Load a Google Font into the document. Idempotent — calling twice with the\n * same arguments injects only one `<link>`.\n *\n * @example\n * useGoogleFont('Lexend', { weights: [400, 500, 700] });\n * useGoogleFont('JetBrains Mono');\n */\nexport interface UseGoogleFontOptions {\n  /** Font weights to load. Defaults to `[400]`. */\n  weights?: number[];\n  /** `font-display` strategy. Defaults to `'swap'`. */\n  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';\n  /** Whether to load italic variants alongside the upright weights. */\n  italic?: boolean;\n}\n\nconst GOOGLE_FONTS_BASE = 'https://fonts.googleapis.com/css2';\n\nexport function useGoogleFont(name: string, options: UseGoogleFontOptions = {}): void {\n  if (typeof document === 'undefined') return;\n\n  const weights = options.weights ?? [400];\n  const display = options.display ?? 'swap';\n  const family = name.replace(/\\s+/g, '+');\n\n  const axis = options.italic\n    ? `ital,wght@${weights.flatMap((w) => [`0,${w}`, `1,${w}`]).join(';')}`\n    : `wght@${weights.join(';')}`;\n\n  const href = `${GOOGLE_FONTS_BASE}?family=${family}:${axis}&display=${display}`;\n\n  if (document.querySelector(`link[href=\"${href}\"]`)) return;\n\n  const link = document.createElement('link');\n  link.rel = 'stylesheet';\n  link.href = href;\n  document.head.appendChild(link);\n}\n"],"names":["GOOGLE_FONTS_BASE","useGoogleFont","name","options","weights","display","family","axis","w","href","link"],"mappings":"AAiBA,MAAMA,IAAoB;AAEnB,SAASC,EAAcC,GAAcC,IAAgC,IAAU;AACpF,MAAI,OAAO,WAAa,IAAa;AAErC,QAAMC,IAAUD,EAAQ,WAAW,CAAC,GAAG,GACjCE,IAAUF,EAAQ,WAAW,QAC7BG,IAASJ,EAAK,QAAQ,QAAQ,GAAG,GAEjCK,IAAOJ,EAAQ,SACjB,aAAaC,EAAQ,QAAQ,CAACI,MAAM,CAAC,KAAKA,CAAC,IAAI,KAAKA,CAAC,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,KACnE,QAAQJ,EAAQ,KAAK,GAAG,CAAC,IAEvBK,IAAO,GAAGT,CAAiB,WAAWM,CAAM,IAAIC,CAAI,YAAYF,CAAO;AAE7E,MAAI,SAAS,cAAc,cAAcI,CAAI,IAAI,EAAG;AAEpD,QAAMC,IAAO,SAAS,cAAc,MAAM;AAC1C,EAAAA,EAAK,MAAM,cACXA,EAAK,OAAOD,GACZ,SAAS,KAAK,YAAYC,CAAI;AAChC;"}

package/dist/utils/user-variables.d.ts

@@ -0,0 +1,20 @@
+/** Formats the widget's content drawer can render. */
+export declare const WIDGET_DISPLAY_FORMATS: readonly ["text", "markdown", "code", "html"];
+/**
+ * Parse a user-supplied JSON string into a userVariables object. Returns an
+ * empty object on null/undefined/empty input, and on parse failure logs a
+ * warning and returns an empty object — never throws.
+ */
+export declare function parseUserVariablesAttribute(raw: string | null | undefined): Record<string, unknown>;
+/**
+ * Merge widget self-advertisement (display_content capability + opened_at
+ * timestamp) into a userVariables object. User-supplied keys win on shallow
+ * conflict; capability and metadata sub-objects are deep-merged one level so
+ * callers can add their own keys without losing the widget's signal.
+ *
+ * The shape matches what `Sigmond2Agent._caller_has_display` looks for:
+ *   - `capabilities.display_content` (signal #1)
+ *   - `metadata.widget.opened_at`    (signal #2)
+ */
+export declare function withWidgetCapabilities(base: Record<string, unknown>, now?: () => string): Record<string, unknown>;
+//# sourceMappingURL=user-variables.d.ts.map

package/dist/utils/user-variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-variables.d.ts","sourceRoot":"","sources":["../../src/utils/user-variables.ts"],"names":[],"mappings":"AAIA,sDAAsD;AACtD,eAAO,MAAM,sBAAsB,+CAAgD,CAAC;AAMpF;;;;GAIG;AACH,wBAAgB,2BAA2B,CACzC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAC7B,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAazB;AAED;;;;;;;;;GASG;AACH,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC7B,GAAG,GAAE,MAAM,MAAuC,GACjD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAmBzB"}

package/dist/utils/user-variables.js

@@ -0,0 +1,37 @@
+import { getLogger as s } from "@signalwire/js";
+const i = s(), c = ["text", "markdown", "code", "html"];
+function a(t) {
+  return typeof t == "object" && t !== null && !Array.isArray(t);
+}
+function g(t) {
+  if (!t) return {};
+  try {
+    const e = JSON.parse(t);
+    return a(e) ? e : (i.warn("[CallWidget] user-variables must be a JSON object; ignoring"), {});
+  } catch (e) {
+    return i.warn("[CallWidget] Failed to parse user-variables JSON; ignoring", e), {};
+  }
+}
+function d(t, e = () => (/* @__PURE__ */ new Date()).toISOString()) {
+  const n = a(t.capabilities) ? t.capabilities : {}, r = a(t.metadata) ? t.metadata : {}, o = a(r.widget) ? r.widget : {};
+  return {
+    ...t,
+    capabilities: {
+      display_content: { formats: [...c] },
+      ...n
+    },
+    metadata: {
+      ...r,
+      widget: {
+        opened_at: e(),
+        ...o
+      }
+    }
+  };
+}
+export {
+  c as WIDGET_DISPLAY_FORMATS,
+  g as parseUserVariablesAttribute,
+  d as withWidgetCapabilities
+};
+//# sourceMappingURL=user-variables.js.map

package/dist/utils/user-variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"user-variables.js","sources":["../../src/utils/user-variables.ts"],"sourcesContent":["import { getLogger } from '@signalwire/js';\n\nconst logger = getLogger();\n\n/** Formats the widget's content drawer can render. */\nexport const WIDGET_DISPLAY_FORMATS = ['text', 'markdown', 'code', 'html'] as const;\n\nfunction isPlainObject(v: unknown): v is Record<string, unknown> {\n  return typeof v === 'object' && v !== null && !Array.isArray(v);\n}\n\n/**\n * Parse a user-supplied JSON string into a userVariables object. Returns an\n * empty object on null/undefined/empty input, and on parse failure logs a\n * warning and returns an empty object — never throws.\n */\nexport function parseUserVariablesAttribute(\n  raw: string | null | undefined\n): Record<string, unknown> {\n  if (!raw) return {};\n  try {\n    const parsed = JSON.parse(raw);\n    if (!isPlainObject(parsed)) {\n      logger.warn('[CallWidget] user-variables must be a JSON object; ignoring');\n      return {};\n    }\n    return parsed;\n  } catch (err) {\n    logger.warn('[CallWidget] Failed to parse user-variables JSON; ignoring', err);\n    return {};\n  }\n}\n\n/**\n * Merge widget self-advertisement (display_content capability + opened_at\n * timestamp) into a userVariables object. User-supplied keys win on shallow\n * conflict; capability and metadata sub-objects are deep-merged one level so\n * callers can add their own keys without losing the widget's signal.\n *\n * The shape matches what `Sigmond2Agent._caller_has_display` looks for:\n *   - `capabilities.display_content` (signal #1)\n *   - `metadata.widget.opened_at`    (signal #2)\n */\nexport function withWidgetCapabilities(\n  base: Record<string, unknown>,\n  now: () => string = () => new Date().toISOString()\n): Record<string, unknown> {\n  const baseCaps = isPlainObject(base['capabilities']) ? base['capabilities'] : {};\n  const baseMeta = isPlainObject(base['metadata']) ? base['metadata'] : {};\n  const baseWidget = isPlainObject(baseMeta['widget']) ? baseMeta['widget'] : {};\n\n  return {\n    ...base,\n    capabilities: {\n      display_content: { formats: [...WIDGET_DISPLAY_FORMATS] },\n      ...baseCaps,\n    },\n    metadata: {\n      ...baseMeta,\n      widget: {\n        opened_at: now(),\n        ...baseWidget,\n      },\n    },\n  };\n}\n"],"names":["logger","getLogger","WIDGET_DISPLAY_FORMATS","isPlainObject","v","parseUserVariablesAttribute","raw","parsed","err","withWidgetCapabilities","base","now","baseCaps","baseMeta","baseWidget"],"mappings":";AAEA,MAAMA,IAASC,EAAA,GAGFC,IAAyB,CAAC,QAAQ,YAAY,QAAQ,MAAM;AAEzE,SAASC,EAAcC,GAA0C;AAC/D,SAAO,OAAOA,KAAM,YAAYA,MAAM,QAAQ,CAAC,MAAM,QAAQA,CAAC;AAChE;AAOO,SAASC,EACdC,GACyB;AACzB,MAAI,CAACA,EAAK,QAAO,CAAA;AACjB,MAAI;AACF,UAAMC,IAAS,KAAK,MAAMD,CAAG;AAC7B,WAAKH,EAAcI,CAAM,IAIlBA,KAHLP,EAAO,KAAK,6DAA6D,GAClE,CAAA;AAAA,EAGX,SAASQ,GAAK;AACZ,WAAAR,EAAO,KAAK,8DAA8DQ,CAAG,GACtE,CAAA;AAAA,EACT;AACF;AAYO,SAASC,EACdC,GACAC,IAAoB,2BAAU,KAAA,GAAO,eACZ;AACzB,QAAMC,IAAWT,EAAcO,EAAK,YAAe,IAAIA,EAAK,eAAkB,CAAA,GACxEG,IAAWV,EAAcO,EAAK,QAAW,IAAIA,EAAK,WAAc,CAAA,GAChEI,IAAaX,EAAcU,EAAS,MAAS,IAAIA,EAAS,SAAY,CAAA;AAE5E,SAAO;AAAA,IACL,GAAGH;AAAA,IACH,cAAc;AAAA,MACZ,iBAAiB,EAAE,SAAS,CAAC,GAAGR,CAAsB,EAAA;AAAA,MACtD,GAAGU;AAAA,IAAA;AAAA,IAEL,UAAU;AAAA,MACR,GAAGC;AAAA,MACH,QAAQ;AAAA,QACN,WAAWF,EAAA;AAAA,QACX,GAAGG;AAAA,MAAA;AAAA,IACL;AAAA,EACF;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalwire/web-components",
-  "version": "4.0.0-beta.11",
+  "version": "4.0.0-beta.12",
   "description": "UI components library built with Lit",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,7 +8,7 @@
   "types": "./dist/index.d.ts",
   "sideEffects": [
     "./dist/index.js",
-    "./dist/components/*.js"
+    "./dist/components/**/*.js"
   ],
   "exports": {
     ".": {
@@ -16,53 +16,109 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./call-media": {
-      "types": "./dist/components/call-media.d.ts",
-      "import": "./dist/components/call-media.js"
+    "./sw-call-media": {
+      "types": "./dist/components/sw-call-media.d.ts",
+      "import": "./dist/components/sw-call-media.js"
     },
-    "./self-media": {
-      "types": "./dist/components/self-media.d.ts",
-      "import": "./dist/components/self-media.js"
+    "./sw-self-media": {
+      "types": "./dist/components/sw-self-media.d.ts",
+      "import": "./dist/components/sw-self-media.js"
     },
-    "./participants": {
-      "types": "./dist/components/participants.d.ts",
-      "import": "./dist/components/participants.js"
+    "./sw-local-camera": {
+      "types": "./dist/components/sw-local-camera.d.ts",
+      "import": "./dist/components/sw-local-camera.js"
     },
-    "./call-controls": {
-      "types": "./dist/components/call-controls.d.ts",
-      "import": "./dist/components/call-controls.js"
+    "./sw-participants": {
+      "types": "./dist/components/sw-participants.d.ts",
+      "import": "./dist/components/sw-participants.js"
     },
-    "./call-status": {
-      "types": "./dist/components/call-status.d.ts",
-      "import": "./dist/components/call-status.js"
+    "./sw-participant-controls": {
+      "types": "./dist/components/sw-participant-controls.d.ts",
+      "import": "./dist/components/sw-participant-controls.js"
     },
-    "./audio-level": {
-      "types": "./dist/components/audio-level.d.ts",
-      "import": "./dist/components/audio-level.js"
+    "./sw-call-controls": {
+      "types": "./dist/components/sw-call-controls.d.ts",
+      "import": "./dist/components/sw-call-controls.js"
     },
-    "./device-selector": {
-      "types": "./dist/components/device-selector.d.ts",
-      "import": "./dist/components/device-selector.js"
+    "./sw-call-status": {
+      "types": "./dist/components/sw-call-status.d.ts",
+      "import": "./dist/components/sw-call-status.js"
     },
-    "./dialpad": {
-      "types": "./dist/components/dialpad.d.ts",
-      "import": "./dist/components/dialpad.js"
+    "./sw-call-provider": {
+      "types": "./dist/components/sw-call-provider.d.ts",
+      "import": "./dist/components/sw-call-provider.js"
     },
-    "./click-to-call": {
-      "types": "./dist/components/click-to-call.d.ts",
-      "import": "./dist/components/click-to-call.js"
+    "./sw-call-dialpad": {
+      "types": "./dist/components/sw-call-dialpad.d.ts",
+      "import": "./dist/components/sw-call-dialpad.js"
     },
-    "./directory": {
-      "types": "./dist/components/directory.d.ts",
-      "import": "./dist/components/directory.js"
+    "./sw-call-widget": {
+      "types": "./dist/components/sw-call-widget/sw-call-widget.d.ts",
+      "import": "./dist/components/sw-call-widget/sw-call-widget.js"
     },
-    "./participant-controls": {
-      "types": "./dist/components/participant-controls.d.ts",
-      "import": "./dist/components/participant-controls.js"
+    "./sw-audio-level": {
+      "types": "./dist/components/sw-audio-level.d.ts",
+      "import": "./dist/components/sw-audio-level.js"
     },
-    "./example-button": {
-      "types": "./dist/components/example-button.d.ts",
-      "import": "./dist/components/example-button.js"
+    "./sw-device-selector": {
+      "types": "./dist/components/sw-device-selector/index.d.ts",
+      "import": "./dist/components/sw-device-selector/index.js"
+    },
+    "./sw-click-to-call": {
+      "types": "./dist/components/sw-click-to-call.d.ts",
+      "import": "./dist/components/sw-click-to-call.js"
+    },
+    "./sw-directory": {
+      "types": "./dist/components/sw-directory.d.ts",
+      "import": "./dist/components/sw-directory.js"
+    },
+    "./sw-ui-icon": {
+      "types": "./dist/components/UI/icons/sw-ui-icon.d.ts",
+      "import": "./dist/components/UI/icons/sw-ui-icon.js"
+    },
+    "./sw-ui-dropup": {
+      "types": "./dist/components/UI/controls/sw-ui-dropup.d.ts",
+      "import": "./dist/components/UI/controls/sw-ui-dropup.js"
+    },
+    "./sw-ui-split-button": {
+      "types": "./dist/components/UI/controls/sw-ui-split-button.d.ts",
+      "import": "./dist/components/UI/controls/sw-ui-split-button.js"
+    },
+    "./sw-ui-control-bar": {
+      "types": "./dist/components/UI/controls/sw-ui-control-bar.d.ts",
+      "import": "./dist/components/UI/controls/sw-ui-control-bar.js"
+    },
+    "./sw-ui-dialpad": {
+      "types": "./dist/components/UI/controls/sw-ui-dialpad.d.ts",
+      "import": "./dist/components/UI/controls/sw-ui-dialpad.js"
+    },
+    "./sw-ui-call-layout": {
+      "types": "./dist/components/UI/layout/sw-ui-call-layout.d.ts",
+      "import": "./dist/components/UI/layout/sw-ui-call-layout.js"
+    },
+    "./sw-ui-background": {
+      "types": "./dist/components/UI/layout/sw-ui-background.d.ts",
+      "import": "./dist/components/UI/layout/sw-ui-background.js"
+    },
+    "./sw-ui-modal": {
+      "types": "./dist/components/UI/layout/sw-ui-modal.d.ts",
+      "import": "./dist/components/UI/layout/sw-ui-modal.js"
+    },
+    "./sw-ui-content-drawer": {
+      "types": "./dist/components/UI/layout/sw-ui-content-drawer.d.ts",
+      "import": "./dist/components/UI/layout/sw-ui-content-drawer.js"
+    },
+    "./sw-ui-responsive-container": {
+      "types": "./dist/components/UI/layout/sw-ui-responsive-container.d.ts",
+      "import": "./dist/components/UI/layout/sw-ui-responsive-container.js"
+    },
+    "./sw-ui-alert": {
+      "types": "./dist/components/UI/sw-ui-alert.d.ts",
+      "import": "./dist/components/UI/sw-ui-alert.js"
+    },
+    "./sw-ui-transcript-view": {
+      "types": "./dist/components/UI/sw-ui-transcript-view.d.ts",
+      "import": "./dist/components/UI/sw-ui-transcript-view.js"
     },
     "./context": {
       "types": "./dist/context/index.d.ts",
@@ -78,7 +134,8 @@
     },
     "./react": {
       "types": "./dist/react.d.ts"
-    }
+    },
+    "./theme.css": "./dist/theme.css"
   },
   "files": [
     "dist"
@@ -86,7 +143,8 @@
   "scripts": {
     "dev": "vite",
     "dev:test": "vite --port 3000",
-    "build": "vite build && tsc --project tsconfig.build.json && cp src/react.d.ts dist/",
+    "build": "vite build && vite build --config vite.embed.config.ts && tsc --project tsconfig.build.json && cp src/react.d.ts dist/ && cp src/theme.css dist/theme.css && vite build --config vite.stories.config.ts",
+    "build:stories": "vite build --config vite.stories.config.ts",
     "preview": "vite preview",
     "type-check": "tsc --noEmit",
     "lint": "eslint src --ext .ts",
@@ -111,16 +169,21 @@
   "license": "MIT",
   "dependencies": {
     "@lit/context": "^1.1.0",
+    "dompurify": "^3.4.0",
     "lit": "^3.2.1",
+    "marked": "^9.1.6",
+    "prismjs": "^1.30.0",
     "rxjs": "^7.8.2"
   },
   "peerDependencies": {
-    "@signalwire/js": "4.0.0-beta.11"
+    "@signalwire/js": "4.0.0-beta.12"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
     "@types/node": "^20.19.24",
+    "@types/prismjs": "^1.26.6",
     "@typescript-eslint/eslint-plugin": "^8.46.3",
+    "@vaadin/router": "^2.0.1",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.39.1",
     "happy-dom": "^20.4.0",

package/dist/components/audio-level.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"audio-level.d.ts","sourceRoot":"","sources":["../../src/components/audio-level.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,MAAM,0BAiEX;IAEF;;OAEG;IACyB,MAAM,CAAC,EAAE,WAAW,CAAC;IAEjD;;OAEG;IACyB,IAAI,SAAK;IAErC;;OAEG;IACwC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAc;IAE/F;;OAEG;IACyB,OAAO,SAAM;IAEzC;;OAEG;IACM,OAAO,CAAC,OAAO,CAAgB;IAExC;;OAEG;IACH,OAAO,CAAC,aAAa,CAAC,CAAe;IAErC;;OAEG;IACH,OAAO,CAAC,SAAS,CAAC,CAAe;IAEjC;;OAEG;IACH,OAAO,CAAC,OAAO,CAAC,CAA6B;IAE7C;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAAC,CAAS;IAEnC;;OAEG;IACH,OAAO,CAAC,UAAU,CAAC,CAA0B;IAE7C;;OAEG;IACH,iBAAiB;IAQjB;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAehE;;OAEG;IACH,oBAAoB;IAKpB;;;OAGG;IACI,gBAAgB,IAAI,IAAI;IAK/B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkC1B;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAgC5B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAyC1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAOrB;;OAEG;IACH,OAAO,CAAC,QAAQ;IAIhB;;OAEG;IACH,MAAM;CA0BP;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,UAAU,CAAC;KAC9B;CACF"}

package/dist/components/audio-level.js

@@ -1,203 +0,0 @@
-import { LitElement as b, html as p, css as y } from "lit";
-import { property as c, state as f, customElement as _ } from "lit/decorators.js";
-var w = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (t, e, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? g(e, s) : e, r = t.length - 1, o; r >= 0; r--)
-    (o = t[r]) && (i = (a ? o(e, s, i) : o(i)) || i);
-  return a && i && w(e, s, i), i;
-};
-let n = class extends b {
-  constructor() {
-    super(...arguments), this.bars = 5, this.orientation = "vertical", this.maxSize = 32, this._levels = [];
-  }
-  /**
-   * Lifecycle: Component connected to DOM
-   */
-  connectedCallback() {
-    super.connectedCallback(), this._levels = new Array(this.bars).fill(0), this.stream && this.setupAudioAnalysis();
-  }
-  /**
-   * Lifecycle: React to property changes
-   */
-  updated(t) {
-    super.updated(t), t.has("stream") && (this.cleanupAudioAnalysis(), this.stream && this.setupAudioAnalysis()), t.has("bars") && (this._levels = new Array(this.bars).fill(0));
-  }
-  /**
-   * Lifecycle: Component disconnected from DOM
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.cleanupAudioAnalysis();
-  }
-  /**
-   * Public method to release all audio resources immediately
-   * Call this before stopping the MediaStream tracks to ensure proper cleanup
-   */
-  releaseResources() {
-    this.cleanupAudioAnalysis(), this.stream = void 0;
-  }
-  /**
-   * Setup Web Audio API for audio level analysis
-   */
-  setupAudioAnalysis() {
-    if (!this.stream) return;
-    if (this.stream.getAudioTracks().length === 0) {
-      console.warn("sw-audio-level: MediaStream has no audio tracks");
-      return;
-    }
-    try {
-      this._audioContext = new AudioContext(), this._analyser = this._audioContext.createAnalyser(), this._analyser.fftSize = 256, this._analyser.smoothingTimeConstant = 0.8, this._source = this._audioContext.createMediaStreamSource(this.stream), this._source.connect(this._analyser);
-      const e = this._analyser.frequencyBinCount;
-      this._dataArray = new Uint8Array(e), this.startAnimationLoop();
-    } catch (e) {
-      console.error("sw-audio-level: Failed to setup audio analysis:", e);
-    }
-  }
-  /**
-   * Cleanup Web Audio API resources
-   */
-  cleanupAudioAnalysis() {
-    this._animationFrameId !== void 0 && (cancelAnimationFrame(this._animationFrameId), this._animationFrameId = void 0), this._source && (this._source.disconnect(), this._source = void 0), this._analyser && (this._analyser.disconnect(), this._analyser = void 0), this._audioContext && this._audioContext.state !== "closed" && (this._audioContext.close().catch(console.error), this._audioContext = void 0), this._dataArray = void 0, this._levels = new Array(this.bars).fill(0);
-  }
-  /**
-   * Start the animation loop for updating levels
-   */
-  startAnimationLoop() {
-    const t = () => {
-      const e = this._analyser, s = this._dataArray;
-      if (!e || !s)
-        return;
-      e.getByteFrequencyData(s);
-      const a = [], i = s.length, r = Math.floor(i / this.bars);
-      for (let o = 0; o < this.bars; o++) {
-        const h = o * r, u = Math.min(h + r, i);
-        let m = 0;
-        for (let d = h; d < u; d++)
-          m += s[d] ?? 0;
-        const v = m / (u - h);
-        a.push(v / 255);
-      }
-      this._levels = a, this.requestUpdate(), this._animationFrameId = requestAnimationFrame(t);
-    };
-    this._animationFrameId = requestAnimationFrame(t);
-  }
-  /**
-   * Get the color class based on level
-   */
-  getLevelClass(t) {
-    return t > 0.7 ? "level-high" : t > 0.4 ? "level-medium" : t > 0.05 ? "level-low" : "";
-  }
-  /**
-   * Get the active class if level is above threshold
-   */
-  isActive(t) {
-    return t > 0.05;
-  }
-  /**
-   * Render the component
-   */
-  render() {
-    const t = this._levels.length === this.bars ? this._levels : new Array(this.bars).fill(0);
-    return p`
-      <div class="container" part="container">
-        ${t.map((e, s) => {
-      const a = this.isActive(e), i = this.getLevelClass(e), r = Math.max(4, e * this.maxSize), o = this.orientation === "horizontal" ? `width: ${r}px;` : `height: ${r}px;`;
-      return p`
-            <div
-              class="bar ${a ? "active" : ""} ${i}"
-              part="bar ${a ? "bar-active" : ""}"
-              style="${o}"
-              data-bar-index="${s}"
-            ></div>
-          `;
-    })}
-      </div>
-    `;
-  }
-};
-n.styles = y`
-    :host {
-      /* CSS Custom Properties for theming */
-      --sw-color-success: #10b981;
-      --sw-color-warning: #f59e0b;
-      --sw-color-danger: #ef4444;
-      --sw-audio-bar-width: 4px;
-      --sw-audio-bar-gap: 2px;
-      --sw-audio-bar-radius: 2px;
-      --sw-audio-bar-background: rgba(255, 255, 255, 0.2);
-
-      display: inline-flex;
-    }
-
-    .container {
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-      gap: var(--sw-audio-bar-gap);
-    }
-
-    :host([orientation='horizontal']) .container {
-      flex-direction: row;
-      align-items: center;
-    }
-
-    :host([orientation='vertical']) .container,
-    .container {
-      flex-direction: row;
-      align-items: flex-end;
-    }
-
-    .bar {
-      width: var(--sw-audio-bar-width);
-      background: var(--sw-audio-bar-background);
-      border-radius: var(--sw-audio-bar-radius);
-      transition:
-        height 0.05s ease-out,
-        width 0.05s ease-out,
-        background-color 0.1s ease;
-      min-height: 4px;
-    }
-
-    :host([orientation='horizontal']) .bar {
-      height: var(--sw-audio-bar-width);
-      width: 4px;
-      min-width: 4px;
-      min-height: auto;
-    }
-
-    .bar.active {
-      /* Color is set dynamically via inline style */
-    }
-
-    .bar.level-low {
-      background-color: var(--sw-color-success);
-    }
-
-    .bar.level-medium {
-      background-color: var(--sw-color-warning);
-    }
-
-    .bar.level-high {
-      background-color: var(--sw-color-danger);
-    }
-  `;
-l([
-  c({ type: Object })
-], n.prototype, "stream", 2);
-l([
-  c({ type: Number })
-], n.prototype, "bars", 2);
-l([
-  c({ type: String, reflect: !0 })
-], n.prototype, "orientation", 2);
-l([
-  c({ type: Number })
-], n.prototype, "maxSize", 2);
-l([
-  f()
-], n.prototype, "_levels", 2);
-n = l([
-  _("sw-audio-level")
-], n);
-export {
-  n as AudioLevel
-};
-//# sourceMappingURL=audio-level.js.map

package/dist/components/audio-level.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"audio-level.js","sources":["../../src/components/audio-level.ts"],"sourcesContent":["/**\n * Audio Level Component\n *\n * Visual audio level indicator that renders real-time audio levels from a MediaStream\n * via Web Audio API. Displays configurable number of bars with color transitions\n * based on audio intensity.\n *\n * @example\n * ```html\n * <sw-audio-level .stream=${mediaStream} bars=\"5\" orientation=\"vertical\"></sw-audio-level>\n * ```\n *\n * @cssprop [--sw-color-success=#10b981] - Color for low audio levels.\n * @cssprop [--sw-color-warning=#f59e0b] - Color for medium audio levels.\n * @cssprop [--sw-color-danger=#ef4444] - Color for high audio levels.\n * @cssprop [--sw-audio-bar-width=4px] - Width of each audio level bar.\n * @cssprop [--sw-audio-bar-gap=2px] - Gap between audio level bars.\n * @cssprop [--sw-audio-bar-radius=2px] - Border radius of each bar.\n * @cssprop [--sw-audio-bar-background=#404040] - Background color of inactive bars.\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n@customElement('sw-audio-level')\nexport class AudioLevel extends LitElement {\n  static styles = css`\n    :host {\n      /* CSS Custom Properties for theming */\n      --sw-color-success: #10b981;\n      --sw-color-warning: #f59e0b;\n      --sw-color-danger: #ef4444;\n      --sw-audio-bar-width: 4px;\n      --sw-audio-bar-gap: 2px;\n      --sw-audio-bar-radius: 2px;\n      --sw-audio-bar-background: rgba(255, 255, 255, 0.2);\n\n      display: inline-flex;\n    }\n\n    .container {\n      display: flex;\n      align-items: flex-end;\n      justify-content: center;\n      gap: var(--sw-audio-bar-gap);\n    }\n\n    :host([orientation='horizontal']) .container {\n      flex-direction: row;\n      align-items: center;\n    }\n\n    :host([orientation='vertical']) .container,\n    .container {\n      flex-direction: row;\n      align-items: flex-end;\n    }\n\n    .bar {\n      width: var(--sw-audio-bar-width);\n      background: var(--sw-audio-bar-background);\n      border-radius: var(--sw-audio-bar-radius);\n      transition:\n        height 0.05s ease-out,\n        width 0.05s ease-out,\n        background-color 0.1s ease;\n      min-height: 4px;\n    }\n\n    :host([orientation='horizontal']) .bar {\n      height: var(--sw-audio-bar-width);\n      width: 4px;\n      min-width: 4px;\n      min-height: auto;\n    }\n\n    .bar.active {\n      /* Color is set dynamically via inline style */\n    }\n\n    .bar.level-low {\n      background-color: var(--sw-color-success);\n    }\n\n    .bar.level-medium {\n      background-color: var(--sw-color-warning);\n    }\n\n    .bar.level-high {\n      background-color: var(--sw-color-danger);\n    }\n  `;\n\n  /**\n   * MediaStream to analyze for audio levels\n   */\n  @property({ type: Object }) stream?: MediaStream;\n\n  /**\n   * Number of bars to display (default: 5)\n   */\n  @property({ type: Number }) bars = 5;\n\n  /**\n   * Orientation of the bars: 'vertical' or 'horizontal'\n   */\n  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'vertical';\n\n  /**\n   * Maximum height/width of bars in pixels\n   */\n  @property({ type: Number }) maxSize = 32;\n\n  /**\n   * Current audio levels for each bar (0-1)\n   */\n  @state() private _levels: number[] = [];\n\n  /**\n   * Web Audio API context\n   */\n  private _audioContext?: AudioContext;\n\n  /**\n   * Analyser node for frequency data\n   */\n  private _analyser?: AnalyserNode;\n\n  /**\n   * Source node connected to the MediaStream\n   */\n  private _source?: MediaStreamAudioSourceNode;\n\n  /**\n   * Animation frame ID for cleanup\n   */\n  private _animationFrameId?: number;\n\n  /**\n   * Frequency data buffer\n   */\n  private _dataArray?: Uint8Array<ArrayBuffer>;\n\n  /**\n   * Lifecycle: Component connected to DOM\n   */\n  connectedCallback() {\n    super.connectedCallback();\n    this._levels = new Array(this.bars).fill(0);\n    if (this.stream) {\n      this.setupAudioAnalysis();\n    }\n  }\n\n  /**\n   * Lifecycle: React to property changes\n   */\n  protected updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('stream')) {\n      this.cleanupAudioAnalysis();\n      if (this.stream) {\n        this.setupAudioAnalysis();\n      }\n    }\n\n    if (changedProperties.has('bars')) {\n      this._levels = new Array(this.bars).fill(0);\n    }\n  }\n\n  /**\n   * Lifecycle: Component disconnected from DOM\n   */\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.cleanupAudioAnalysis();\n  }\n\n  /**\n   * Public method to release all audio resources immediately\n   * Call this before stopping the MediaStream tracks to ensure proper cleanup\n   */\n  public releaseResources(): void {\n    this.cleanupAudioAnalysis();\n    this.stream = undefined;\n  }\n\n  /**\n   * Setup Web Audio API for audio level analysis\n   */\n  private setupAudioAnalysis(): void {\n    if (!this.stream) return;\n\n    // Check if stream has audio tracks\n    const audioTracks = this.stream.getAudioTracks();\n    if (audioTracks.length === 0) {\n      console.warn('sw-audio-level: MediaStream has no audio tracks');\n      return;\n    }\n\n    try {\n      // Create AudioContext\n      this._audioContext = new AudioContext();\n\n      // Create analyser node\n      this._analyser = this._audioContext.createAnalyser();\n      this._analyser.fftSize = 256;\n      this._analyser.smoothingTimeConstant = 0.8;\n\n      // Create source from MediaStream\n      this._source = this._audioContext.createMediaStreamSource(this.stream);\n      this._source.connect(this._analyser);\n\n      // Create data array for frequency data\n      const bufferLength = this._analyser.frequencyBinCount;\n      this._dataArray = new Uint8Array(bufferLength);\n\n      // Start animation loop\n      this.startAnimationLoop();\n    } catch (error) {\n      console.error('sw-audio-level: Failed to setup audio analysis:', error);\n    }\n  }\n\n  /**\n   * Cleanup Web Audio API resources\n   */\n  private cleanupAudioAnalysis(): void {\n    // Cancel animation frame\n    if (this._animationFrameId !== undefined) {\n      cancelAnimationFrame(this._animationFrameId);\n      this._animationFrameId = undefined;\n    }\n\n    // Disconnect source\n    if (this._source) {\n      this._source.disconnect();\n      this._source = undefined;\n    }\n\n    // Disconnect analyser (not strictly necessary but good practice)\n    if (this._analyser) {\n      this._analyser.disconnect();\n      this._analyser = undefined;\n    }\n\n    // Close AudioContext\n    if (this._audioContext && this._audioContext.state !== 'closed') {\n      this._audioContext.close().catch(console.error);\n      this._audioContext = undefined;\n    }\n\n    // Clear data array\n    this._dataArray = undefined;\n\n    // Reset levels\n    this._levels = new Array(this.bars).fill(0);\n  }\n\n  /**\n   * Start the animation loop for updating levels\n   */\n  private startAnimationLoop(): void {\n    const updateLevels = () => {\n      const analyser = this._analyser;\n      const dataArray = this._dataArray;\n      if (!analyser || !dataArray) {\n        return;\n      }\n\n      // Get frequency data\n      analyser.getByteFrequencyData(dataArray);\n\n      // Calculate levels for each bar by sampling frequency ranges\n      const levels: number[] = [];\n      const binCount = dataArray.length;\n      const binsPerBar = Math.floor(binCount / this.bars);\n\n      for (let i = 0; i < this.bars; i++) {\n        const startBin = i * binsPerBar;\n        const endBin = Math.min(startBin + binsPerBar, binCount);\n\n        // Average the frequency values for this bar's range\n        let sum = 0;\n        for (let j = startBin; j < endBin; j++) {\n          sum += dataArray[j] ?? 0;\n        }\n        const average = sum / (endBin - startBin);\n\n        // Normalize to 0-1 range\n        levels.push(average / 255);\n      }\n\n      this._levels = levels;\n      this.requestUpdate();\n\n      // Schedule next frame\n      this._animationFrameId = requestAnimationFrame(updateLevels);\n    };\n\n    this._animationFrameId = requestAnimationFrame(updateLevels);\n  }\n\n  /**\n   * Get the color class based on level\n   */\n  private getLevelClass(level: number): string {\n    if (level > 0.7) return 'level-high';\n    if (level > 0.4) return 'level-medium';\n    if (level > 0.05) return 'level-low';\n    return '';\n  }\n\n  /**\n   * Get the active class if level is above threshold\n   */\n  private isActive(level: number): boolean {\n    return level > 0.05;\n  }\n\n  /**\n   * Render the component\n   */\n  render() {\n    // Ensure we have the right number of levels\n    const levels = this._levels.length === this.bars ? this._levels : new Array(this.bars).fill(0);\n\n    return html`\n      <div class=\"container\" part=\"container\">\n        ${levels.map((level, index) => {\n          const isActive = this.isActive(level);\n          const levelClass = this.getLevelClass(level);\n          const size = Math.max(4, level * this.maxSize);\n\n          const style =\n            this.orientation === 'horizontal' ? `width: ${size}px;` : `height: ${size}px;`;\n\n          return html`\n            <div\n              class=\"bar ${isActive ? 'active' : ''} ${levelClass}\"\n              part=\"bar ${isActive ? 'bar-active' : ''}\"\n              style=\"${style}\"\n              data-bar-index=\"${index}\"\n            ></div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\n/**\n * Declare global type for TypeScript\n */\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-audio-level': AudioLevel;\n  }\n}\n"],"names":["AudioLevel","LitElement","changedProperties","bufferLength","error","updateLevels","analyser","dataArray","levels","binCount","binsPerBar","i","startBin","endBin","sum","j","average","level","html","index","isActive","levelClass","size","style","css","__decorateClass","property","state","customElement"],"mappings":"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"}