@signalwire/web-components 4.0.0-beta.8 → 4.0.0-dev-20260515133934

package/dist/utils/theme-loader.js

@@ -0,0 +1,17 @@
+import o from "../theme.css.js";
+import { useGoogleFont as e } from "./use-google-font.js";
+let n = !1;
+function i() {
+  if (typeof document > "u" || n) return;
+  n = !0;
+  const t = new CSSStyleSheet();
+  t.replaceSync(o), document.adoptedStyleSheets = [...document.adoptedStyleSheets, t];
+}
+function d() {
+  e("Lexend", { weights: [300, 400, 500, 600, 700] }), e("Instrument Sans", { weights: [400, 500, 600, 700] }), e("JetBrains Mono", { weights: [400, 500] });
+}
+export {
+  d as ensureSignalWireFonts,
+  i as ensureSignalWireTheme
+};
+//# sourceMappingURL=theme-loader.js.map

package/dist/utils/theme-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-loader.js","sources":["../../src/utils/theme-loader.ts"],"sourcesContent":["import themeCss from '../theme.css?inline';\nimport { useGoogleFont } from './use-google-font.js';\n\nlet themeAdopted = false;\n\n/**\n * Inject the SignalWire design-token stylesheet into the document so all\n * components — including those in shadow roots — can resolve `--bg-page`,\n * `--fg-default`, `--interactive-button-primary-bg`, etc.\n *\n * Idempotent. Calling twice is a no-op.\n */\nexport function ensureSignalWireTheme(): void {\n  if (typeof document === 'undefined' || themeAdopted) return;\n  themeAdopted = true;\n\n  const sheet = new CSSStyleSheet();\n  sheet.replaceSync(themeCss);\n  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];\n}\n\n/** Load the three SignalWire brand font families via Google Fonts. */\nexport function ensureSignalWireFonts(): void {\n  useGoogleFont('Lexend', { weights: [300, 400, 500, 600, 700] });\n  useGoogleFont('Instrument Sans', { weights: [400, 500, 600, 700] });\n  useGoogleFont('JetBrains Mono', { weights: [400, 500] });\n}\n"],"names":["themeAdopted","ensureSignalWireTheme","sheet","themeCss","ensureSignalWireFonts","useGoogleFont"],"mappings":";;AAGA,IAAIA,IAAe;AASZ,SAASC,IAA8B;AAC5C,MAAI,OAAO,WAAa,OAAeD,EAAc;AACrD,EAAAA,IAAe;AAEf,QAAME,IAAQ,IAAI,cAAA;AAClB,EAAAA,EAAM,YAAYC,CAAQ,GAC1B,SAAS,qBAAqB,CAAC,GAAG,SAAS,oBAAoBD,CAAK;AACtE;AAGO,SAASE,IAA8B;AAC5C,EAAAC,EAAc,UAAU,EAAE,SAAS,CAAC,KAAK,KAAK,KAAK,KAAK,GAAG,GAAG,GAC9DA,EAAc,mBAAmB,EAAE,SAAS,CAAC,KAAK,KAAK,KAAK,GAAG,GAAG,GAClEA,EAAc,kBAAkB,EAAE,SAAS,CAAC,KAAK,GAAG,GAAG;AACzD;"}

package/dist/utils/transcriptToMarkdown.d.ts

@@ -0,0 +1,14 @@
+import type { TranscriptEntry } from '../components/UI/sw-ui-transcript-view.js';
+/**
+ * Serializes a transcript entry list to a Markdown string.
+ *
+ * Format per entry type:
+ *   user   → **You:** text
+ *   agent  → **Agent:** text
+ *   system → *text*
+ *
+ * meta.code  → fenced code block (with language tag when present)
+ * meta.links → markdown link list appended after the message text
+ */
+export declare function transcriptToMarkdown(entries: TranscriptEntry[]): string;
+//# sourceMappingURL=transcriptToMarkdown.d.ts.map

package/dist/utils/transcriptToMarkdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transcriptToMarkdown.d.ts","sourceRoot":"","sources":["../../src/utils/transcriptToMarkdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAuB,MAAM,2CAA2C,CAAC;AAEtG;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,eAAe,EAAE,GAAG,MAAM,CAuBvE"}

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/dist/utils/video.js

@@ -1,26 +1,11 @@
-import { VIDEO_READY_TIMEOUT_MS as n } from "../constants.js";
-function c(e) {
-  return new Promise((r) => {
-    if (e.readyState >= HTMLMediaElement.HAVE_METADATA) {
-      r();
-      return;
-    }
-    let i = !1;
-    const t = () => {
-      i || (i = !0, clearTimeout(a), e.removeEventListener("canplay", t), e.removeEventListener("resize", t), r());
-    }, a = setTimeout(t, n);
-    e.addEventListener("canplay", t), e.addEventListener("resize", t);
-  });
+function a(c, t) {
+  c.srcObject = t;
 }
-function d(e, r) {
-  e.srcObject = r;
-}
-function s(e) {
-  e.srcObject && (e.srcObject = null);
+function e(c) {
+  c.srcObject && (c.srcObject = null);
 }
 export {
-  d as attachMediaStream,
-  s as detachMediaStream,
-  c as waitForVideoReady
+  a as attachMediaStream,
+  e as detachMediaStream
 };
 //# sourceMappingURL=video.js.map

package/dist/utils/video.js.map

@@ -1 +1 @@
-{"version":3,"file":"video.js","sources":["../../src/utils/video.ts"],"sourcesContent":["/**\n * Video element utilities for creating and managing video elements\n * with proper configuration for WebRTC streams.\n */\n\nimport { VIDEO_READY_TIMEOUT_MS } from '../constants.js';\n\n/**\n * Creates a video element configured for WebRTC streams.\n * The video is muted, autoplays, and plays inline (mobile Safari support).\n * Prevents pause events which can occur on camera switches or PiP mode.\n *\n * @returns A configured HTMLVideoElement\n */\nexport function createVideoElement(): HTMLVideoElement {\n  const video = document.createElement('video');\n  video.muted = true;\n  video.autoplay = true;\n  video.playsInline = true;\n\n  // Prevent pause (Safari/Firefox pause on PiP, camera switch)\n  video.addEventListener('pause', () => {\n    video.play().catch((error) => {\n      console.error('Video Element Paused', error);\n    });\n  });\n\n  return video;\n}\n\n/**\n * Waits for a video element to be ready for playback.\n * Resolves when the video has metadata or when it can play.\n *\n * @param element - The video element to wait for\n * @returns A promise that resolves when the video is ready\n */\nexport function waitForVideoReady(element: HTMLVideoElement): Promise<void> {\n  return new Promise<void>((resolve) => {\n    if (element.readyState >= HTMLMediaElement.HAVE_METADATA) {\n      resolve();\n      return;\n    }\n\n    let resolved = false;\n\n    const done = () => {\n      if (resolved) return;\n      resolved = true;\n      clearTimeout(timeoutId);\n      element.removeEventListener('canplay', done);\n      element.removeEventListener('resize', done);\n      resolve();\n    };\n\n    // Timeout fallback for audio-only streams where resize/canplay may never fire\n    const timeoutId = setTimeout(done, VIDEO_READY_TIMEOUT_MS);\n    element.addEventListener('canplay', done);\n    element.addEventListener('resize', done);\n  });\n}\n\n/**\n * Attaches a MediaStream to a video element.\n *\n * @param element - The video element to attach the stream to\n * @param stream - The MediaStream to attach, or null to detach\n */\nexport function attachMediaStream(element: HTMLVideoElement, stream: MediaStream | null): void {\n  element.srcObject = stream;\n}\n\n/**\n * Detaches any MediaStream from a video element.\n *\n * @param element - The video element to detach the stream from\n */\nexport function detachMediaStream(element: HTMLVideoElement): void {\n  if (element.srcObject) {\n    element.srcObject = null;\n  }\n}\n"],"names":["waitForVideoReady","element","resolve","resolved","done","timeoutId","VIDEO_READY_TIMEOUT_MS","attachMediaStream","stream","detachMediaStream"],"mappings":";AAqCO,SAASA,EAAkBC,GAA0C;AAC1E,SAAO,IAAI,QAAc,CAACC,MAAY;AACpC,QAAID,EAAQ,cAAc,iBAAiB,eAAe;AACxD,MAAAC,EAAA;AACA;AAAA,IACF;AAEA,QAAIC,IAAW;AAEf,UAAMC,IAAO,MAAM;AACjB,MAAID,MACJA,IAAW,IACX,aAAaE,CAAS,GACtBJ,EAAQ,oBAAoB,WAAWG,CAAI,GAC3CH,EAAQ,oBAAoB,UAAUG,CAAI,GAC1CF,EAAA;AAAA,IACF,GAGMG,IAAY,WAAWD,GAAME,CAAsB;AACzD,IAAAL,EAAQ,iBAAiB,WAAWG,CAAI,GACxCH,EAAQ,iBAAiB,UAAUG,CAAI;AAAA,EACzC,CAAC;AACH;AAQO,SAASG,EAAkBN,GAA2BO,GAAkC;AAC7F,EAAAP,EAAQ,YAAYO;AACtB;AAOO,SAASC,EAAkBR,GAAiC;AACjE,EAAIA,EAAQ,cACVA,EAAQ,YAAY;AAExB;"}
+{"version":3,"file":"video.js","sources":["../../src/utils/video.ts"],"sourcesContent":["/**\n * Video element utilities for creating and managing video elements\n * with proper configuration for WebRTC streams.\n */\n\nimport { VIDEO_READY_TIMEOUT_MS } from '../constants.js';\n\n/**\n * Creates a video element configured for WebRTC streams.\n * The video is muted, autoplays, and plays inline (mobile Safari support).\n * Prevents pause events which can occur on camera switches or PiP mode.\n *\n * @returns A configured HTMLVideoElement\n */\nexport function createVideoElement(): HTMLVideoElement {\n  const video = document.createElement('video');\n  video.muted = true;\n  video.autoplay = true;\n  video.playsInline = true;\n\n  // Prevent pause (Safari/Firefox pause on PiP, camera switch)\n  video.addEventListener('pause', () => {\n    video.play().catch((error) => {\n      console.error('Video Element Paused', error);\n    });\n  });\n\n  return video;\n}\n\n/**\n * Waits for a video element to be ready for playback.\n * Resolves when the video has metadata or when it can play.\n *\n * @param element - The video element to wait for\n * @returns A promise that resolves when the video is ready\n */\nexport function waitForVideoReady(element: HTMLVideoElement): Promise<void> {\n  return new Promise<void>((resolve) => {\n    if (element.readyState >= HTMLMediaElement.HAVE_METADATA) {\n      resolve();\n      return;\n    }\n\n    let resolved = false;\n\n    const done = () => {\n      if (resolved) return;\n      resolved = true;\n      clearTimeout(timeoutId);\n      element.removeEventListener('canplay', done);\n      element.removeEventListener('resize', done);\n      resolve();\n    };\n\n    // Timeout fallback for audio-only streams where resize/canplay may never fire\n    const timeoutId = setTimeout(done, VIDEO_READY_TIMEOUT_MS);\n    element.addEventListener('canplay', done);\n    element.addEventListener('resize', done);\n  });\n}\n\n/**\n * Attaches a MediaStream to a video element.\n *\n * @param element - The video element to attach the stream to\n * @param stream - The MediaStream to attach, or null to detach\n */\nexport function attachMediaStream(element: HTMLVideoElement, stream: MediaStream | null): void {\n  element.srcObject = stream;\n}\n\n/**\n * Detaches any MediaStream from a video element.\n *\n * @param element - The video element to detach the stream from\n */\nexport function detachMediaStream(element: HTMLVideoElement): void {\n  if (element.srcObject) {\n    element.srcObject = null;\n  }\n}\n"],"names":["attachMediaStream","element","stream","detachMediaStream"],"mappings":"AAoEO,SAASA,EAAkBC,GAA2BC,GAAkC;AAC7F,EAAAD,EAAQ,YAAYC;AACtB;AAOO,SAASC,EAAkBF,GAAiC;AACjE,EAAIA,EAAQ,cACVA,EAAQ,YAAY;AAExB;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalwire/web-components",
-  "version": "4.0.0-beta.8",
+  "version": "4.0.0-dev-20260515133934",
   "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,19 +169,24 @@
   "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.8"
+    "@signalwire/js": "4.0.0-dev-20260515133934"
   },
   "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",
+    "happy-dom": "^20.9.0",
     "prettier": "^3.6.2",
     "typescript": "^5.9.3",
     "vite": "^6.0.5",

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;;;;;;;;;;;GAWG;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"}