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

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalwire/web-components",
-  "version": "4.0.0-beta.10",
+  "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.10"
+    "@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;;;;;;;;;;;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"}

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