@coventia/softphone 0.2.0 → 0.3.0

package/dist/ui/index.cjs

@@ -13128,6 +13128,14 @@ var ArrowRight = createLucideIcon("ArrowRight", [
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/bell-ring.js
+var BellRing = createLucideIcon("BellRing", [
+  ["path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", key: "1qo2s2" }],
+  ["path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0", key: "qgo35s" }],
+  ["path", { d: "M4 2C2.8 3.7 2 5.7 2 8", key: "tap9e0" }],
+  ["path", { d: "M22 8c0-2.3-.8-4.3-2-6", key: "5bb3ad" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/calendar-clock.js
 var CalendarClock = createLucideIcon("CalendarClock", [
   ["path", { d: "M21 7.5V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3.5", key: "1osxxc" }],
@@ -13242,6 +13250,13 @@ var MonitorSmartphone = createLucideIcon("MonitorSmartphone", [
   ["rect", { width: "6", height: "10", x: "16", y: "12", rx: "2", key: "1egngj" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/music.js
+var Music = createLucideIcon("Music", [
+  ["path", { d: "M9 18V5l12-2v13", key: "1jmyc2" }],
+  ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
+  ["circle", { cx: "18", cy: "16", r: "3", key: "1hluhg" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/pause.js
 var Pause = createLucideIcon("Pause", [
   ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
@@ -13367,6 +13382,19 @@ var Users = createLucideIcon("Users", [
   ["path", { d: "M16 3.13a4 4 0 0 1 0 7.75", key: "1da9ce" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/volume-2.js
+var Volume2 = createLucideIcon("Volume2", [
+  [
+    "path",
+    {
+      d: "M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",
+      key: "uqj9uw"
+    }
+  ],
+  ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
+  ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/x.js
 var X = createLucideIcon("X", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
@@ -13493,7 +13521,9 @@ function useDevices() {
       outputs: audio.outputs,
       currentInputId: audio.currentInputId,
       currentOutputId: audio.currentOutputId,
+      currentRingtoneOutputId: audio.currentRingtoneOutputId,
       canSelectOutput: audio.canSelectOutput,
+      canSelectRingtoneOutput: audio.canSelectRingtoneOutput,
       setInput: (deviceId) => audio.setInput(deviceId),
       setOutput: (deviceId) => audio.setOutput(deviceId),
       setRingtoneOutput: (deviceId) => audio.setRingtoneOutput(deviceId),
@@ -13721,151 +13751,582 @@ function caretAfterDigits(formatted, digitsBefore) {
 function digitsBeforeCaret(text, caret) {
   return (text.slice(0, caret).match(/\d/g) ?? []).length;
 }
-var KEYS = [
-  ["1", "", true],
-  ["2", "ABC", true],
-  ["3", "DEF", true],
-  ["4", "GHI", true],
-  ["5", "JKL", true],
-  ["6", "MNO", true],
-  ["7", "PQRS", true],
-  ["8", "TUV", true],
-  ["9", "WXYZ", true],
-  ["*", "", false],
-  ["0", "+", true],
-  ["#", "", false]
+
+// src/ui/dialing/keys.ts
+var KEYPAD_KEYS = [
+  ["1", ""],
+  ["2", "ABC"],
+  ["3", "DEF"],
+  ["4", "GHI"],
+  ["5", "JKL"],
+  ["6", "MNO"],
+  ["7", "PQRS"],
+  ["8", "TUV"],
+  ["9", "WXYZ"],
+  ["*", ""],
+  ["0", "+"],
+  ["#", ""]
 ];
-function Dialpad({ outcome = null, onIntent } = {}) {
-  const softphone = useSoftphone();
-  const state = useSoftphoneState();
-  const [value, setValue] = React.useState("");
-  const [country2, setCountry] = React.useState(DEFAULT_COUNTRY);
-  const format = useNumberFormatter();
-  const inputRef = React.useRef(null);
-  const caretRef = React.useRef(null);
-  const display = format(country2, value);
-  const target = toE164(country2, value);
-  const canCall = state === "online" && target.length > 1;
-  React.useLayoutEffect(() => {
-    const caret = caretRef.current;
-    if (caret === null || !inputRef.current) return;
-    caretRef.current = null;
-    const pos = caretAfterDigits(display, caret);
-    inputRef.current.setSelectionRange(pos, pos);
-  }, [display]);
-  const append = (key) => {
-    onIntent?.();
-    setValue((v) => v + key);
-  };
-  const backspace = () => {
-    onIntent?.();
-    setValue((v) => v.slice(0, -1));
+
+// src/ui/audio/classic-ring.ts
+var C6 = 1046.5;
+var E6 = 1318.51;
+var HARMONICITY = 4;
+var INDEX = 1.8;
+var CLASSIC_CYCLE_SECONDS = 3;
+var CLASSIC_GAIN = 0.3841;
+function classicRingGraph(ctx, dest) {
+  const output = ctx.createGain();
+  output.gain.value = CLASSIC_GAIN;
+  const chain = ["highpass", "highpass", "lowpass", "lowpass"].map((type) => {
+    const f = ctx.createBiquadFilter();
+    f.type = type;
+    f.frequency.value = type === "highpass" ? 250 : 7500;
+    f.Q.value = 0.707;
+    return f;
+  });
+  for (let i = 0; i < chain.length - 1; i++) chain[i].connect(chain[i + 1]);
+  chain[chain.length - 1].connect(output);
+  output.connect(dest);
+  return { input: chain[0], output };
+}
+function strike(ctx, input, t, freq, vel, track) {
+  const carrier = ctx.createOscillator();
+  carrier.frequency.value = freq;
+  const modulator = ctx.createOscillator();
+  modulator.frequency.value = freq * HARMONICITY;
+  const depth = ctx.createGain();
+  depth.gain.setValueAtTime(0, t);
+  depth.gain.linearRampToValueAtTime(INDEX * freq, t + 4e-3);
+  depth.gain.setTargetAtTime(0, t + 4e-3, 0.02);
+  modulator.connect(depth);
+  depth.connect(carrier.frequency);
+  const amp = ctx.createGain();
+  amp.gain.setValueAtTime(0, t);
+  amp.gain.linearRampToValueAtTime(vel, t + 5e-3);
+  amp.gain.setTargetAtTime(0, t + 5e-3, 0.15);
+  amp.gain.setTargetAtTime(0, t + 0.045, 0.08);
+  carrier.connect(amp);
+  amp.connect(input);
+  for (const o of [carrier, modulator]) {
+    o.start(t);
+    o.stop(t + 0.7);
+    track(o);
+  }
+}
+function scheduleClassicCycle(ctx, input, t0, track) {
+  for (const ring of [0, 0.6]) {
+    for (let i = 0; i < 8; i++) strike(ctx, input, t0 + ring + i * 0.05, i % 2 ? E6 : C6, 0.55 + 0.1 * (i % 2), track);
+  }
+  return CLASSIC_CYCLE_SECONDS;
+}
+
+// src/ui/audio/audio.ts
+var TONE_HZ = 425;
+function createRemoteAudio() {
+  const el = document.createElement("audio");
+  el.autoplay = true;
+  el.style.display = "none";
+  document.body.appendChild(el);
+  return {
+    attach(stream) {
+      el.srcObject = stream;
+      void el.play().catch(() => {
+      });
+    },
+    detach() {
+      el.srcObject = null;
+    },
+    destroy() {
+      el.srcObject = null;
+      el.remove();
+    },
+    async setOutputDevice(deviceId) {
+      if (typeof el.setSinkId !== "function") return;
+      try {
+        await el.setSinkId(deviceId ?? "");
+      } catch {
+      }
+    }
   };
-  const call = () => {
-    if (!canCall) return;
-    onIntent?.();
-    void softphone.call(target);
+}
+var shared = null;
+function sharedContext() {
+  if (shared) return shared;
+  const Ctor = typeof AudioContext !== "undefined" ? AudioContext : globalThis.webkitAudioContext;
+  if (!Ctor) return null;
+  shared = new Ctor();
+  return shared;
+}
+function primeAudio() {
+  const ctx = sharedContext();
+  if (ctx && ctx.state === "suspended") void ctx.resume?.().catch(() => {
+  });
+}
+function playRingtone(options = {}) {
+  const ctx = sharedContext();
+  if (!ctx) return { stop() {
+  } };
+  const bus = ctx.createGain();
+  const route = routeToDevice(ctx, bus, options.sinkId ?? null);
+  const voice = options.buffer ? fileVoice(ctx, bus, options.buffer, options.loop ?? null) : synthesisedVoice(ctx, bus);
+  return {
+    stop() {
+      voice.stop();
+      route.stop();
+    }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-view", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-dial-prefix", children: /* @__PURE__ */ jsxRuntime.jsx(CountryPicker, { value: country2, onChange: setCountry }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-dial-head", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-dial-side", "aria-hidden": true }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ref: inputRef,
-          className: "cv-display",
-          value: display,
-          onChange: (e) => {
-            onIntent?.();
-            caretRef.current = digitsBeforeCaret(e.target.value, e.target.selectionStart ?? 0);
-            setValue(e.target.value.replace(/[^\d+]/g, ""));
-          },
-          onKeyDown: (e) => e.key === "Enter" && call(),
-          placeholder: "N\xFAmero",
-          "aria-label": "N\xFAmero a marcar",
-          inputMode: "tel"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "cv-dial-side",
-          "data-hidden": value.length === 0,
-          onClick: backspace,
-          "aria-label": "Borrar",
-          children: /* @__PURE__ */ jsxRuntime.jsx(Delete, { size: 19 })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cv-dial-outcome", role: "status", part: "error", "data-shown": outcome !== null, children: outcome?.text ?? "" }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-keypad", children: KEYS.map(([key, letters, dialable]) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        className: "cv-key",
-        "data-dialable": dialable,
-        onClick: () => dialable && append(key),
-        "aria-disabled": !dialable,
-        title: dialable ? void 0 : "Solo disponible durante una llamada",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("b", { children: key }),
-          letters ? /* @__PURE__ */ jsxRuntime.jsx("small", { children: letters }) : null
-        ]
-      },
-      key
-    )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-dial-foot", children: /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "cv-round cv-round--answer",
-        onClick: call,
-        disabled: !canCall,
-        "aria-label": "Llamar",
-        part: "call-button",
-        children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 26 })
+}
+function fileVoice(ctx, bus, buffer, loop) {
+  const FILE_LEVEL = 1;
+  const RAMP = 0.02;
+  const LEAD = 0.08;
+  const gain = ctx.createGain();
+  gain.gain.value = 0;
+  gain.connect(bus);
+  const src = ctx.createBufferSource();
+  src.buffer = buffer;
+  src.loop = true;
+  const points = loop && loop.start >= 0 && loop.end > loop.start && loop.end <= buffer.duration + 1e-3 ? loop : null;
+  if (points) {
+    src.loopStart = points.start;
+    src.loopEnd = points.end;
+  }
+  src.connect(gain);
+  let stopped = false;
+  void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(() => {
+    if (stopped) return;
+    const at = ctx.currentTime + LEAD;
+    gain.gain.setValueAtTime(0, at);
+    gain.gain.linearRampToValueAtTime(FILE_LEVEL, at + RAMP);
+    src.start(at, points?.start ?? 0);
+  });
+  return {
+    stop() {
+      stopped = true;
+      try {
+        src.stop();
+      } catch {
       }
-    ) })
-  ] });
+      try {
+        gain.disconnect();
+      } catch {
+      }
+    }
+  };
 }
-
-// src/ui/lib/format.ts
-function formatDuration(totalSeconds) {
-  const s = Math.max(0, Math.floor(totalSeconds));
-  const hh = Math.floor(s / 3600);
-  const mm = Math.floor(s % 3600 / 60);
-  const ss = s % 60;
-  const pad = (n) => String(n).padStart(2, "0");
-  return hh > 0 ? `${hh}:${pad(mm)}:${pad(ss)}` : `${mm}:${pad(ss)}`;
+function routeToDevice(ctx, bus, sinkId) {
+  const toDefault = () => {
+    bus.connect(ctx.destination);
+  };
+  const el = sinkId && typeof document !== "undefined" ? document.createElement("audio") : null;
+  const dest = el && typeof ctx.createMediaStreamDestination === "function" ? ctx.createMediaStreamDestination() : null;
+  const canRoute = el && dest && typeof el.setSinkId === "function";
+  if (!canRoute || !sinkId) {
+    toDefault();
+    return { stop: () => safeDisconnect(bus) };
+  }
+  let stopped = false;
+  el.style.display = "none";
+  el.srcObject = dest.stream;
+  document.body.appendChild(el);
+  bus.connect(dest);
+  void el.setSinkId(sinkId).then(() => el.play()).catch((error) => {
+    if (stopped) return;
+    console.warn("[softphone] sound could not be sent to the chosen device; using the default output", error);
+    safeDisconnect(bus);
+    teardown(el);
+    toDefault();
+  });
+  return {
+    stop() {
+      stopped = true;
+      safeDisconnect(bus);
+      teardown(el);
+    }
+  };
 }
-function initials(name) {
-  if (!name) return "#";
-  const words = name.trim().split(/\s+/).filter(Boolean);
-  if (words.length === 0 || /^\+?\d/.test(words[0])) return "#";
-  return words.slice(0, 2).map((w) => w[0].toUpperCase()).join("");
+function safeDisconnect(node) {
+  try {
+    node.disconnect();
+  } catch {
+  }
 }
-function elapsedSeconds(since, now) {
-  if (!since) return 0;
-  return Math.floor((now - since.getTime()) / 1e3);
+function teardown(el) {
+  el.pause();
+  el.srcObject = null;
+  el.remove();
 }
-function formatAge(totalSeconds) {
-  const s = Math.max(0, Math.floor(totalSeconds));
-  if (s < 60) return "justo ahora";
-  const mm = Math.floor(s / 60);
-  if (mm < 60) return `hace ${mm} min`;
-  const hh = Math.floor(mm / 60);
-  return `hace ${hh} h`;
+var TEST_TONE_MS = 900;
+function playTestTone(sinkId) {
+  const ctx = sharedContext();
+  if (!ctx) return { stop() {
+  } };
+  const bus = ctx.createGain();
+  const route = routeToDevice(ctx, bus, sinkId);
+  const LEVEL = 0.5;
+  const NOTES = [
+    { hz: 660, at: 0.05 },
+    { hz: 880, at: 0.4 }
+  ];
+  const oscs = [];
+  let stopped = false;
+  let timer = null;
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    if (timer) clearTimeout(timer);
+    for (const o of oscs) {
+      try {
+        o.stop();
+      } catch {
+      }
+    }
+    route.stop();
+  };
+  void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(() => {
+    if (stopped) return;
+    const t0 = ctx.currentTime;
+    for (const { hz, at } of NOTES) {
+      const gain = ctx.createGain();
+      gain.gain.value = 0;
+      gain.connect(bus);
+      const osc = ctx.createOscillator();
+      osc.type = "sine";
+      osc.frequency.value = hz;
+      osc.connect(gain);
+      const start = t0 + at;
+      gain.gain.setValueAtTime(0, start);
+      gain.gain.linearRampToValueAtTime(LEVEL, start + 0.015);
+      gain.gain.setValueAtTime(LEVEL, start + 0.25);
+      gain.gain.linearRampToValueAtTime(0, start + 0.32);
+      osc.start(start);
+      osc.stop(start + 0.34);
+      oscs.push(osc);
+    }
+    timer = setTimeout(stop, TEST_TONE_MS);
+  });
+  return { stop };
+}
+function synthesisedVoice(ctx, bus) {
+  const { input, output } = classicRingGraph(ctx, bus);
+  const scheduled = /* @__PURE__ */ new Set();
+  const track = (o) => {
+    scheduled.add(o);
+    o.onended = () => scheduled.delete(o);
+  };
+  const LOOKAHEAD = 0.5;
+  const TICK_MS = 150;
+  const LEAD = 0.08;
+  let stopped = false;
+  let timer = null;
+  let nextAt = 0;
+  const pump = () => {
+    while (nextAt < ctx.currentTime + LOOKAHEAD) nextAt += scheduleClassicCycle(ctx, input, nextAt, track);
+  };
+  void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(() => {
+    if (stopped) return;
+    nextAt = ctx.currentTime + LEAD;
+    pump();
+    timer = setInterval(pump, TICK_MS);
+  });
+  return {
+    stop() {
+      stopped = true;
+      if (timer) clearInterval(timer);
+      for (const o of scheduled) {
+        try {
+          o.stop();
+        } catch {
+        }
+      }
+      scheduled.clear();
+      try {
+        output.disconnect();
+      } catch {
+      }
+    }
+  };
 }
-
-// src/ui/lib/error-text.ts
-var ERROR_TEXT = {
-  // ── Engine lifecycle ────────────────────────────────────────────────────────
-  // Integrator mistakes rather than user-facing failures, but they must still read as something
-  // rather than as a blank panel if one ever reaches the UI.
-  "engine/duplicate-instance": {
-    title: "Tel\xE9fono duplicado",
+function playCallEndedTone() {
+  const ctx = sharedContext();
+  if (!ctx) return;
+  const gain = ctx.createGain();
+  gain.gain.value = 0;
+  gain.connect(ctx.destination);
+  const osc = ctx.createOscillator();
+  osc.type = "sine";
+  osc.frequency.value = TONE_HZ;
+  osc.connect(gain);
+  osc.start();
+  const LEVEL = 0.55;
+  const RAMP = 8e-3;
+  const BEEP = 0.25;
+  void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(() => {
+    const at = ctx.currentTime + 0.02;
+    gain.gain.setValueAtTime(0, at);
+    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
+    gain.gain.setValueAtTime(LEVEL, at + BEEP - RAMP);
+    gain.gain.linearRampToValueAtTime(0, at + BEEP);
+    const totalMs = (at + BEEP - ctx.currentTime) * 1e3;
+    setTimeout(() => {
+      try {
+        osc.stop();
+      } catch {
+      }
+      try {
+        gain.disconnect();
+      } catch {
+      }
+    }, totalMs);
+  });
+}
+var DTMF_ROWS_HZ = [697, 770, 852, 941];
+var DTMF_COLS_HZ = [1209, 1336, 1477];
+var DTMF_LAYOUT = ["123", "456", "789", "*0#"];
+function dtmfFrequencies(key) {
+  if (key.length !== 1) return null;
+  for (let row = 0; row < DTMF_LAYOUT.length; row++) {
+    const col = DTMF_LAYOUT[row].indexOf(key);
+    if (col !== -1) return [DTMF_ROWS_HZ[row], DTMF_COLS_HZ[col]];
+  }
+  return null;
+}
+function playKeyTone(key) {
+  const hz = dtmfFrequencies(key);
+  if (!hz) return;
+  const ctx = sharedContext();
+  if (!ctx) return;
+  const LEVEL = 0.2;
+  const RAMP = 6e-3;
+  const DURATION = 0.12;
+  const LEAD = 0.01;
+  const gain = ctx.createGain();
+  gain.gain.value = 0;
+  gain.connect(ctx.destination);
+  const oscillators = hz.map((freq) => {
+    const osc = ctx.createOscillator();
+    osc.type = "sine";
+    osc.frequency.value = freq;
+    osc.connect(gain);
+    osc.start();
+    return osc;
+  });
+  const fire = () => {
+    const at = ctx.currentTime + LEAD;
+    gain.gain.setValueAtTime(0, at);
+    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
+    gain.gain.setValueAtTime(LEVEL, at + DURATION - RAMP);
+    gain.gain.linearRampToValueAtTime(0, at + DURATION);
+    for (const osc of oscillators) osc.stop(at + DURATION);
+    oscillators[0].onended = () => gain.disconnect();
+  };
+  if (ctx.state === "running") fire();
+  else void Promise.resolve(ctx.resume?.()).catch(() => {
+  }).finally(fire);
+}
+var ringbackUrl = null;
+function ringbackSource() {
+  if (ringbackUrl) return ringbackUrl;
+  const sampleRate = 48e3;
+  const channels = 2;
+  const bytesPerSample = 2;
+  const amp = 0.5;
+  const toneSec = 1.5;
+  const silenceSec = 3;
+  const totalFrames = Math.round((toneSec + silenceSec) * sampleRate);
+  const toneFrames = Math.round(toneSec * sampleRate);
+  const ramp = Math.round(0.02 * sampleRate);
+  const blockAlign = channels * bytesPerSample;
+  const dataSize = totalFrames * blockAlign;
+  const buffer = new ArrayBuffer(44 + dataSize);
+  const view = new DataView(buffer);
+  const str = (off, s) => {
+    for (let i = 0; i < s.length; i++) view.setUint8(off + i, s.charCodeAt(i));
+  };
+  str(0, "RIFF");
+  view.setUint32(4, 36 + dataSize, true);
+  str(8, "WAVE");
+  str(12, "fmt ");
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, channels, true);
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate * blockAlign, true);
+  view.setUint16(32, blockAlign, true);
+  view.setUint16(34, bytesPerSample * 8, true);
+  str(36, "data");
+  view.setUint32(40, dataSize, true);
+  for (let i = 0; i < totalFrames; i++) {
+    let sample = 0;
+    if (i < toneFrames) {
+      let env = 1;
+      if (i < ramp) env = i / ramp;
+      else if (i > toneFrames - ramp) env = Math.max(0, (toneFrames - i) / ramp);
+      sample = Math.sin(2 * Math.PI * TONE_HZ * (i / sampleRate)) * amp * env;
+    }
+    const s16 = Math.round(sample * 32767);
+    const off = 44 + i * blockAlign;
+    for (let c = 0; c < channels; c++) view.setInt16(off + c * bytesPerSample, s16, true);
+  }
+  ringbackUrl = URL.createObjectURL(new Blob([buffer], { type: "audio/wav" }));
+  return ringbackUrl;
+}
+function playRingback() {
+  const el = document.createElement("audio");
+  el.src = ringbackSource();
+  el.loop = true;
+  el.style.display = "none";
+  document.body.appendChild(el);
+  void el.play().catch(() => {
+  });
+  return {
+    stop() {
+      el.pause();
+      el.remove();
+    }
+  };
+}
+var NOT_DIALABLE = /* @__PURE__ */ new Set(["*", "#"]);
+function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
+  const softphone = useSoftphone();
+  const state = useSoftphoneState();
+  const [value, setValue] = React.useState("");
+  const [country2, setCountry] = React.useState(DEFAULT_COUNTRY);
+  const format = useNumberFormatter();
+  const inputRef = React.useRef(null);
+  const caretRef = React.useRef(null);
+  const display = format(country2, value);
+  const target = toE164(country2, value);
+  const canCall = state === "online" && target.length > 1;
+  React.useLayoutEffect(() => {
+    const caret = caretRef.current;
+    if (caret === null || !inputRef.current) return;
+    caretRef.current = null;
+    const pos = caretAfterDigits(display, caret);
+    inputRef.current.setSelectionRange(pos, pos);
+  }, [display]);
+  const append = (key) => {
+    onIntent?.();
+    setValue((v) => v + key);
+    if (keyTones) playKeyTone(key);
+  };
+  const backspace = () => {
+    onIntent?.();
+    setValue((v) => v.slice(0, -1));
+  };
+  const call = () => {
+    if (!canCall) return;
+    onIntent?.();
+    void softphone.call(target);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-view", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-dial-prefix", children: /* @__PURE__ */ jsxRuntime.jsx(CountryPicker, { value: country2, onChange: setCountry }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-dial-head", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-dial-side", "aria-hidden": true }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          className: "cv-display",
+          value: display,
+          onChange: (e) => {
+            onIntent?.();
+            caretRef.current = digitsBeforeCaret(e.target.value, e.target.selectionStart ?? 0);
+            setValue(e.target.value.replace(/[^\d+]/g, ""));
+          },
+          onKeyDown: (e) => e.key === "Enter" && call(),
+          placeholder: "N\xFAmero",
+          "aria-label": "N\xFAmero a marcar",
+          inputMode: "tel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "cv-dial-side",
+          "data-hidden": value.length === 0,
+          onClick: backspace,
+          "aria-label": "Borrar",
+          children: /* @__PURE__ */ jsxRuntime.jsx(Delete, { size: 19 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cv-dial-outcome", role: "status", part: "error", "data-shown": outcome !== null, children: outcome?.text ?? "" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-keypad", children: KEYPAD_KEYS.map(([key, letters]) => {
+      const dialable = !NOT_DIALABLE.has(key);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "cv-key",
+          "data-dialable": dialable,
+          onClick: () => dialable && append(key),
+          "aria-disabled": !dialable,
+          title: dialable ? void 0 : "Solo disponible durante una llamada",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("b", { children: key }),
+            letters ? /* @__PURE__ */ jsxRuntime.jsx("small", { children: letters }) : null
+          ]
+        },
+        key
+      );
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-dial-foot", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "cv-round cv-round--answer",
+        onClick: call,
+        disabled: !canCall,
+        "aria-label": "Llamar",
+        part: "call-button",
+        children: /* @__PURE__ */ jsxRuntime.jsx(Phone, { size: 26 })
+      }
+    ) })
+  ] });
+}
+
+// src/ui/lib/format.ts
+function formatDuration(totalSeconds) {
+  const s = Math.max(0, Math.floor(totalSeconds));
+  const hh = Math.floor(s / 3600);
+  const mm = Math.floor(s % 3600 / 60);
+  const ss = s % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+  return hh > 0 ? `${hh}:${pad(mm)}:${pad(ss)}` : `${mm}:${pad(ss)}`;
+}
+function initials(name) {
+  if (!name) return "#";
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0 || /^\+?\d/.test(words[0])) return "#";
+  return words.slice(0, 2).map((w) => w[0].toUpperCase()).join("");
+}
+function elapsedSeconds(since, now) {
+  if (!since) return 0;
+  return Math.floor((now - since.getTime()) / 1e3);
+}
+function formatAge(totalSeconds) {
+  const s = Math.max(0, Math.floor(totalSeconds));
+  if (s < 60) return "justo ahora";
+  const mm = Math.floor(s / 60);
+  if (mm < 60) return `hace ${mm} min`;
+  const hh = Math.floor(mm / 60);
+  return `hace ${hh} h`;
+}
+
+// src/ui/lib/error-text.ts
+var ERROR_TEXT = {
+  // ── Engine lifecycle ────────────────────────────────────────────────────────
+  // Integrator mistakes rather than user-facing failures, but they must still read as something
+  // rather than as a blank panel if one ever reaches the UI.
+  "engine/duplicate-instance": {
+    title: "Tel\xE9fono duplicado",
     body: "Hay otro tel\xE9fono abierto en esta p\xE1gina. Cierra uno y vuelve a cargar."
   },
   "engine/not-started": { title: "El tel\xE9fono a\xFAn no est\xE1 listo" },
@@ -14055,7 +14516,9 @@ function Control({
   label,
   pressed = false,
   tone,
-  onClick
+  onClick,
+  disabled = false,
+  title
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-ctrl-item", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -14067,6 +14530,8 @@ function Control({
         "aria-pressed": pressed,
         "aria-label": label,
         onClick,
+        disabled,
+        title,
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon3, { size: 19 })
       }
     ),
@@ -14205,18 +14670,22 @@ function TransferPicker({
 }
 function CallScreen({
   call,
-  incomingCallAction
+  incomingCallAction,
+  keyTones = true
 }) {
   const view = useCall(call);
   const softphone = useSoftphone();
-  const [showTransfer, setShowTransfer] = React.useState(false);
+  const [panel, setPanel] = React.useState(null);
+  const showTransfer = panel === "transfer";
+  const showKeypad = panel === "keypad";
+  const showDevices = panel === "devices";
+  const togglePanel = (p) => setPanel((cur) => cur === p ? null : p);
   const [transferTo, setTransferTo] = React.useState("");
   const [consultCall, setConsultCall] = React.useState(null);
   const [consultOutcome, setConsultOutcome] = React.useState(null);
   const [myUserId, setMyUserId] = React.useState(null);
   const consultView = useCall(consultCall);
   const consultIntentRef = React.useRef(null);
-  const [showDevices, setShowDevices] = React.useState(false);
   const controlsRef = React.useRef(null);
   const now = useTicker(view?.state === "active");
   const consultNow = useTicker(consultView?.state === "active");
@@ -14273,20 +14742,31 @@ function CallScreen({
   React.useEffect(() => {
     if (!showDevices) return;
     const onKey = (e) => {
-      if (e.key === "Escape") setShowDevices(false);
+      if (e.key === "Escape") setPanel(null);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [showDevices]);
+  React.useEffect(() => {
+    if (!showKeypad) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setPanel(null);
     };
     document.addEventListener("keydown", onKey);
     if (!isConnected) return () => document.removeEventListener("keydown", onKey);
     const root = controlsRef.current?.getRootNode() ?? document;
     const onDown = (e) => {
-      if (!controlsRef.current?.contains(e.target)) setShowDevices(false);
+      if (!controlsRef.current?.contains(e.target)) setPanel(null);
     };
     root.addEventListener("pointerdown", onDown);
     return () => {
       document.removeEventListener("keydown", onKey);
       root.removeEventListener("pointerdown", onDown);
     };
-  }, [showDevices, isConnected]);
+  }, [showKeypad, isConnected]);
+  React.useEffect(() => {
+    if (view && view.state !== "active") setPanel((cur) => cur === "keypad" ? null : cur);
+  }, [view?.state]);
   if (!view || view.state === "ended") return null;
   const s = view.state;
   const isRinging = s === "ringing";
@@ -14312,9 +14792,9 @@ function CallScreen({
   const [rawM = "0", ss = "00"] = formatDuration(elapsedSeconds(view.answeredAt, now)).split(":");
   const mm = rawM.padStart(2, "0");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-view", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-call", children: !inCall && showDevices ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-call-devices-inline", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-call", children: showDevices ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-call-devices-inline", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-call-devices-header", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setShowDevices(false), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel(null), children: [
           /* @__PURE__ */ jsxRuntime.jsx(ArrowLeft, { size: 13, "aria-hidden": true }),
           "Volver"
         ] }),
@@ -14322,7 +14802,7 @@ function CallScreen({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "cv-call-devices-context", children: [
         showNumber ? `${number} \xB7 ` : "",
-        STATUS_LABEL[s] ?? ""
+        s === "active" ? `${mm}:${ss}` : STATUS_LABEL[s] ?? ""
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-settings-section-body", children: /* @__PURE__ */ jsxRuntime.jsx(DevicePickers, {}) })
     ] }) : transferPickerActive ? (
@@ -14410,7 +14890,7 @@ function CallScreen({
         /* @__PURE__ */ jsxRuntime.jsx("i", { children: ":" }),
         /* @__PURE__ */ jsxRuntime.jsx("b", { children: ss })
       ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-call-status", children: s === "held" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-badge-hold", children: STATUS_LABEL[s] }) : STATUS_LABEL[s] ?? "" }),
-      !inCall ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-call-chips", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-call-chips", children: [
         incomingAction ? /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -14423,11 +14903,11 @@ function CallScreen({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setShowDevices(true), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel("devices"), children: [
           /* @__PURE__ */ jsxRuntime.jsx(Headphones, { size: 13, "aria-hidden": true }),
           "Dispositivos"
         ] })
-      ] }) : null
+      ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-controls", ref: controlsRef, children: isRinging ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-controls-primary", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-ctrl-item", children: [
@@ -14486,17 +14966,19 @@ function CallScreen({
             label: "Transferir",
             pressed: showTransfer,
             tone: "accent",
-            onClick: () => setShowTransfer((v) => !v)
+            onClick: () => togglePanel("transfer")
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
           Control,
           {
-            icon: Headphones,
-            label: "Dispositivos",
-            pressed: showDevices,
+            icon: Grid3x3,
+            label: "Teclado",
+            pressed: showKeypad,
             tone: "accent",
-            onClick: () => setShowDevices((v) => !v)
+            disabled: s !== "active",
+            title: s === "held" ? "Reanuda la llamada para usar el teclado" : s === "reconnecting" ? "No disponible mientras se reconecta" : void 0,
+            onClick: () => togglePanel("keypad")
           }
         )
       ] }) : null,
@@ -14514,7 +14996,22 @@ function CallScreen({
         ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Colgar" })
       ] }) }),
-      inCall && showDevices ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-device-popover cv-device-popover--above", role: "dialog", "aria-label": "Dispositivos de audio", children: /* @__PURE__ */ jsxRuntime.jsx(DevicePickers, {}) }) : null
+      inCall && showKeypad ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-keypad-popover cv-keypad-popover--above", role: "dialog", "aria-label": "Teclado", children: KEYPAD_KEYS.map(([key, letters]) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          className: "cv-key",
+          onClick: () => {
+            call.sendDigits(key);
+            if (keyTones) playKeyTone(key);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("b", { children: key }),
+            letters ? /* @__PURE__ */ jsxRuntime.jsx("small", { children: letters }) : null
+          ]
+        },
+        key
+      )) }) : null
     ] }) })
   ] });
 }
@@ -15053,20 +15550,640 @@ function HistoryTab({ source }) {
     selected ? /* @__PURE__ */ jsxRuntime.jsx(HistoryDetail, { entry: selected, onBack: () => setSelected(null) }) : null
   ] });
 }
-function SettingsSection({
-  title,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "cv-settings-section", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "cv-settings-section-title", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-settings-section-body", children })
+
+// src/ui/audio/ringtone-store.ts
+var stores = /* @__PURE__ */ new WeakMap();
+function ringtoneStore(softphone) {
+  const source = softphone.sources?.ringtones;
+  if (!source) return null;
+  let store = stores.get(softphone);
+  if (!store) {
+    store = createRingtoneStore(source);
+    stores.set(softphone, store);
+  }
+  return store;
+}
+function createRingtoneStore(source, decodeImpl = decodeRingtone) {
+  let settings = null;
+  let audioWanted = false;
+  let loaded = null;
+  let loading2 = null;
+  let inFlight = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    for (const l of listeners) l();
+  };
+  const effectiveUrl = () => {
+    if (!settings) return null;
+    return settings.catalogue.find((r) => r.id === settings.effective)?.url ?? null;
+  };
+  const loadEffective = async () => {
+    const url = effectiveUrl();
+    if (!audioWanted || !url || loaded?.url === url || loading2 === url) return;
+    loading2 = url;
+    try {
+      const buffer = await decodeImpl(url);
+      if (audioWanted && effectiveUrl() === url) {
+        loaded = { url, buffer };
+        notify();
+      }
+    } catch (error) {
+      console.warn(`[softphone] ringtone could not be loaded, using the built-in tone: ${url}`, error);
+    } finally {
+      if (loading2 === url) loading2 = null;
+    }
+  };
+  const apply = (next) => {
+    settings = next;
+    if (loaded && loaded.url !== effectiveUrl()) loaded = null;
+    notify();
+  };
+  return {
+    getSettings: () => settings,
+    readyBuffer: () => loaded && loaded.url === effectiveUrl() ? loaded.buffer : null,
+    readyLoop: () => {
+      if (!loaded || loaded.url !== effectiveUrl() || !settings) return null;
+      return settings.catalogue.find((r) => r.id === settings.effective)?.loop ?? null;
+    },
+    refresh() {
+      inFlight ??= (async () => {
+        if (!settings && source.cached) {
+          const early = await source.cached().catch(() => null);
+          if (early && !settings) {
+            apply(early);
+            void loadEffective();
+          }
+        }
+        try {
+          apply(await source.get());
+        } catch (error) {
+          console.warn("[softphone] ringtone settings could not be loaded; keeping the previous ones", error);
+        } finally {
+          inFlight = null;
+        }
+        await loadEffective();
+      })();
+      return inFlight;
+    },
+    async setMine(id) {
+      apply(await source.setMine(id));
+      void loadEffective();
+    },
+    wantAudio(on) {
+      if (audioWanted === on) return;
+      audioWanted = on;
+      if (!on) {
+        loaded = null;
+        notify();
+      } else {
+        void loadEffective();
+      }
+    },
+    decode: (url) => decodeImpl(url),
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+async function decodeRingtone(url) {
+  const Offline = typeof OfflineAudioContext !== "undefined" ? OfflineAudioContext : globalThis.webkitOfflineAudioContext;
+  if (!Offline) throw new Error("this browser cannot decode audio files");
+  const res = await fetch(url, { credentials: "omit" });
+  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+  const bytes = await res.arrayBuffer();
+  return new Offline(1, 1, 48e3).decodeAudioData(bytes);
+}
+function SettingsSection({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "cv-settings-section", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "cv-settings-section-title", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-settings-section-body", children })
+  ] });
+}
+function SettingsNavRow({
+  icon: Icon3,
+  title,
+  value,
+  onOpen,
+  rowRef
+}) {
+  const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-settings-row-icon", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon3, { size: 16 }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cv-settings-nav-text", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-settings-nav-title", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-settings-nav-value", children: value })
+    ] }),
+    onOpen ? /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, { size: 16, className: "cv-settings-nav-chevron", "aria-hidden": true }) : null
+  ] });
+  return onOpen ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "cv-settings-nav", onClick: onOpen, ref: rowRef, children: inner }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-settings-nav cv-settings-nav--static", children: inner });
+}
+function ChoiceList({
+  label,
+  choices,
+  value,
+  onSelect,
+  onReselect
+}) {
+  const name = React.useId();
+  const pointer = React.useRef(false);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-choices", role: "radiogroup", "aria-label": label, children: choices.map((c) => {
+    const checked = c.value === value;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: "cv-choice",
+        "data-checked": checked || void 0,
+        onPointerDown: () => {
+          pointer.current = true;
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              className: "cv-choice-input",
+              name,
+              value: c.value,
+              checked,
+              onChange: () => {
+                const via = pointer.current ? "pointer" : "keyboard";
+                pointer.current = false;
+                onSelect(c.value, via);
+              },
+              onClick: () => {
+                if (c.value === value) {
+                  pointer.current = false;
+                  onReselect?.(c.value);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cv-choice-text", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-choice-label", children: c.label }),
+            c.sub ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-choice-sub", children: c.sub }) : null
+          ] }),
+          c.trailing,
+          /* @__PURE__ */ jsxRuntime.jsx(Check, { size: 16, className: "cv-choice-check", "aria-hidden": true })
+        ]
+      },
+      c.value
+    );
+  }) });
+}
+function SettingsPage({
+  title,
+  intro,
+  onBack,
+  children
+}) {
+  const titleId = React.useId();
+  const heading = React.useRef(null);
+  React.useEffect(() => heading.current?.focus(), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "cv-detail cv-settings-page",
+      role: "region",
+      "aria-labelledby": titleId,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onBack();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-detail-head", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "cv-detail-back", onClick: onBack, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ArrowLeft, { size: 16, "aria-hidden": true }),
+          "Ajustes"
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-settings-page-body", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "cv-settings-page-title", id: titleId, tabIndex: -1, ref: heading, children: title }),
+          intro ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cv-settings-page-intro", children: intro }) : null,
+          children
+        ] })
+      ]
+    }
+  );
+}
+var SYSTEM_DEFAULT = "";
+var PAGES = {
+  input: {
+    title: "Micr\xF3fono",
+    intro: "El micr\xF3fono que usa el tel\xE9fono en las llamadas.",
+    empty: "No se encontr\xF3 ning\xFAn micr\xF3fono."
+  },
+  output: {
+    title: "Altavoces",
+    intro: "D\xF3nde oyes a la otra persona durante una llamada.",
+    empty: "No se encontr\xF3 ning\xFAn altavoz."
+  },
+  ringtone: {
+    title: "Salida del tono",
+    intro: "D\xF3nde suena el tono cuando entra una llamada. La llamada se oye por \xABAltavoces\xBB.",
+    empty: "No se encontr\xF3 ning\xFAn altavoz."
+  }
+};
+function deviceSummary(kind, list, id) {
+  const i = id ? list.findIndex((d) => d.deviceId === id) : -1;
+  return i >= 0 ? deviceLabel(list[i], i, kind) : "Predeterminado del sistema";
+}
+function DevicePage({ kind, onBack }) {
+  const devices = useDevices();
+  const page = PAGES[kind];
+  const list = kind === "input" ? devices.inputs : devices.outputs;
+  const current = kind === "input" ? devices.currentInputId : kind === "output" ? devices.currentOutputId : devices.currentRingtoneOutputId;
+  const apply = (id) => kind === "input" ? devices.setInput(id) : kind === "output" ? devices.setOutput(id) : devices.setRingtoneOutput(id);
+  const choices = [
+    { value: SYSTEM_DEFAULT, label: "Predeterminado del sistema" },
+    ...list.map((d, i) => ({ value: d.deviceId, label: deviceLabel(d, i, kind) }))
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(SettingsPage, { title: page.title, intro: page.intro, onBack, children: [
+    list.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      ChoiceList,
+      {
+        label: page.title,
+        choices,
+        value: current ?? SYSTEM_DEFAULT,
+        onSelect: (v) => void apply(v === SYSTEM_DEFAULT ? null : v)
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cv-settings-page-empty", children: page.empty }),
+    kind === "output" ? /* @__PURE__ */ jsxRuntime.jsx(SpeakerTest, { sinkId: devices.currentOutputId }) : null
+  ] });
+}
+function SpeakerTest({ sinkId }) {
+  const [testing, setTesting] = React.useState(false);
+  const tone = React.useRef(null);
+  const timer = React.useRef(null);
+  React.useEffect(
+    () => () => {
+      tone.current?.stop();
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const test = () => {
+    primeAudio();
+    tone.current?.stop();
+    tone.current = playTestTone(sinkId);
+    setTesting(true);
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setTesting(false), TEST_TONE_MS);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "cv-btn cv-settings-test", onClick: test, disabled: testing, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Volume2, { size: 16, "aria-hidden": true }),
+    testing ? "Sonando\u2026" : "Probar altavoz"
   ] });
 }
+
+// src/ui/audio/preview.ts
+var PREVIEW_MAX_MS = 1e4;
+var BUILT_IN_PREVIEW_MS = 6e3;
+function previewDurationMs(buffer, loop) {
+  if (!buffer) return BUILT_IN_PREVIEW_MS;
+  const seconds = loop ? loop.end - loop.start : buffer.duration;
+  return Math.min(seconds * 1e3, PREVIEW_MAX_MS);
+}
+function previewRingtone(ringtone, options = {}) {
+  primeAudio();
+  let tone = null;
+  let timer = null;
+  let over = false;
+  let settle;
+  let fail;
+  const done = new Promise((resolve, reject) => {
+    settle = resolve;
+    fail = reject;
+  });
+  done.catch(() => {
+  });
+  const stop = () => {
+    if (over) return;
+    over = true;
+    if (timer) clearTimeout(timer);
+    tone?.stop();
+    settle();
+  };
+  const play = (buffer) => {
+    if (over) return;
+    const loop = buffer ? ringtone.loop ?? null : null;
+    tone = playRingtone({ buffer, loop, sinkId: options.sinkId ?? null });
+    timer = setTimeout(stop, previewDurationMs(buffer, loop));
+  };
+  if (!ringtone.url) {
+    play(null);
+  } else {
+    decodeRingtone(ringtone.url).then(play, (error) => {
+      if (over) return;
+      over = true;
+      fail(error);
+    });
+  }
+  return { stop, done };
+}
+
+// src/ui/views/settings/ringtone-state.ts
+var noSubscribe = () => () => {
+};
+var noSettings = () => null;
+function useRingtoneSettings(store) {
+  const settings = React.useSyncExternalStore(store?.subscribe ?? noSubscribe, store?.getSettings ?? noSettings);
+  const [failed, setFailed] = React.useState(false);
+  const load = React.useCallback(() => {
+    if (!store) return () => {
+    };
+    let live = true;
+    setFailed(false);
+    void store.refresh().then(() => {
+      if (live) setFailed(store.getSettings() === null);
+    });
+    return () => {
+      live = false;
+    };
+  }, [store]);
+  React.useEffect(load, [load]);
+  return { settings, failed, retry: load };
+}
+function ringtoneSummary(settings, failed) {
+  if (!settings) return failed ? "No disponible" : "Cargando\u2026";
+  const byId = (id) => id ? settings.catalogue.find((r) => r.id === id) : void 0;
+  const mine = byId(settings.mine);
+  if (mine) return mine.name;
+  const org = byId(settings.orgDefault);
+  if (org) return `${org.name} \xB7 organizaci\xF3n`;
+  return settings.catalogue.find((r) => r.url === null)?.name ?? "Predeterminado";
+}
+function useRingtonePreview(store, sinkId) {
+  const [playing, setPlaying] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const current = React.useRef(null);
+  const generation = React.useRef(0);
+  const stop = React.useCallback(() => {
+    generation.current += 1;
+    const c = current.current;
+    current.current = null;
+    if (c?.timer) clearTimeout(c.timer);
+    c?.tone?.stop();
+    setPlaying(null);
+  }, []);
+  React.useEffect(() => stop, [stop]);
+  const start = (settings, choice) => {
+    stop();
+    primeAudio();
+    setError(null);
+    const gen = generation.current;
+    const orgDefault = settings.catalogue.some((r) => r.id === settings.orgDefault) ? settings.orgDefault : null;
+    const id = choice || orgDefault;
+    const option = settings.catalogue.find((r) => r.id === id) ?? settings.catalogue.find((r) => r.url === null);
+    setPlaying(choice);
+    current.current = { tone: null, timer: null };
+    const play = (buffer) => {
+      if (gen !== generation.current) return;
+      const loop = buffer ? option?.loop ?? null : null;
+      const tone = playRingtone({ buffer, loop, sinkId });
+      current.current = { tone, timer: setTimeout(stop, previewDurationMs(buffer, loop)) };
+    };
+    if (!option?.url) {
+      play(null);
+      return;
+    }
+    store.decode(option.url).then(play, () => {
+      if (gen !== generation.current) return;
+      stop();
+      setError("No se pudo reproducir el tono.");
+    });
+  };
+  return { playing, error, start, stop };
+}
+var ORG_DEFAULT = "";
+var KEYBOARD_SETTLE_MS = 300;
+function RingtonePage({
+  store,
+  settings,
+  failed,
+  onRetry,
+  onBack
+}) {
+  const softphone = useSoftphone();
+  const devices = useDevices();
+  const preview = useRingtonePreview(store, devices.canSelectRingtoneOutput ? devices.currentRingtoneOutputId : null);
+  const [pending, setPending] = React.useState(void 0);
+  const [error, setError] = React.useState(null);
+  const save = useSerialSave(store, {
+    onSettled: () => setPending(void 0),
+    onFailed: () => {
+      setPending(void 0);
+      setError("No se pudo guardar el tono. Int\xE9ntalo de nuevo.");
+    }
+  });
+  const latest = React.useRef(settings);
+  latest.current = settings;
+  const settle = React.useRef(null);
+  const { stop: stopPreview } = preview;
+  React.useEffect(() => softphone.on("incomingCall" /* IncomingCall */, stopPreview), [softphone, stopPreview]);
+  React.useEffect(
+    () => () => {
+      if (settle.current) {
+        clearTimeout(settle.current.timer);
+        save(settle.current.value || null);
+      }
+    },
+    [save]
+  );
+  const commit = (value) => {
+    save(value || null);
+    if (latest.current) preview.start(latest.current, value);
+  };
+  const onSelect = (value, via) => {
+    setError(null);
+    setPending(value);
+    if (settle.current) clearTimeout(settle.current.timer);
+    settle.current = null;
+    if (via === "pointer") {
+      commit(value);
+      return;
+    }
+    preview.stop();
+    settle.current = {
+      value,
+      timer: setTimeout(() => {
+        settle.current = null;
+        commit(value);
+      }, KEYBOARD_SETTLE_MS)
+    };
+  };
+  const onReselect = (value) => {
+    if (!settings) return;
+    if (preview.playing === value) preview.stop();
+    else preview.start(settings, value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SettingsPage,
+    {
+      title: "Tono de llamada",
+      intro: "Lo que suena cuando entra una llamada. Se guarda en tu cuenta, as\xED que es el mismo en todos tus dispositivos.",
+      onBack,
+      children: settings ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ChoiceList,
+          {
+            label: "Tono de llamada",
+            choices: choicesFor(settings, preview.playing),
+            value: pending !== void 0 ? pending : currentValue(settings),
+            onSelect,
+            onReselect
+          }
+        ),
+        error ?? preview.error ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cv-settings-error", role: "alert", children: error ?? preview.error }) : null
+      ] }) : failed ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-empty", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cv-empty-title", children: "No se pudieron cargar los tonos." }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "cv-btn cv-settings-retry", onClick: onRetry, children: "Reintentar" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-empty", role: "status", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "cv-empty-spinner", size: 18, "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-empty-title", children: "Cargando\u2026" })
+      ] })
+    }
+  );
+}
+function currentValue(settings) {
+  return settings.mine && settings.catalogue.some((r) => r.id === settings.mine) ? settings.mine : ORG_DEFAULT;
+}
+function choicesFor(settings, playing) {
+  const org = settings.orgDefault ? settings.catalogue.find((r) => r.id === settings.orgDefault) : void 0;
+  const builtIn = settings.catalogue.find((r) => r.url === null);
+  const mark = (value) => playing === value ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cv-choice-playing", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Volume2, { size: 15, "aria-hidden": true }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cv-sr-only", children: "Sonando" })
+  ] }) : void 0;
+  const orgChoice = {
+    value: ORG_DEFAULT,
+    label: org ? "Predeterminado de la organizaci\xF3n" : "Predeterminado",
+    sub: (org ?? builtIn)?.name ?? "",
+    trailing: mark(ORG_DEFAULT)
+  };
+  return [orgChoice, ...settings.catalogue.map((r) => ({ value: r.id, label: r.name, trailing: mark(r.id) }))];
+}
+function useSerialSave(store, handlers) {
+  const wanted = React.useRef(null);
+  const busy = React.useRef(false);
+  const on = React.useRef(handlers);
+  on.current = handlers;
+  const [save] = React.useState(() => (id) => {
+    wanted.current = { id };
+    if (busy.current) return;
+    busy.current = true;
+    void (async () => {
+      while (wanted.current) {
+        const { id: next } = wanted.current;
+        wanted.current = null;
+        try {
+          await store.setMine(next);
+          if (!wanted.current) on.current.onSettled();
+        } catch {
+          if (!wanted.current) on.current.onFailed();
+        }
+      }
+      busy.current = false;
+    })();
+  });
+  return save;
+}
 function SettingsTab() {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-view cv-settings", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-settings-body", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(SettingsSection, { title: "Dispositivos", children: /* @__PURE__ */ jsxRuntime.jsx(DevicePickers, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "cv-settings-more", children: "M\xE1s ajustes se ir\xE1n a\xF1adiendo pr\xF3ximamente." })
-  ] }) });
+  const softphone = useSoftphone();
+  const devices = useDevices();
+  const store = ringtoneStore(softphone);
+  const ringtone = useRingtoneSettings(store);
+  const [page, setPage] = React.useState(null);
+  const list = React.useRef(null);
+  const rows = React.useRef({});
+  const returnTo = React.useRef(null);
+  React.useEffect(() => {
+    void softphone.audio.refresh();
+  }, [softphone]);
+  React.useEffect(() => {
+    list.current?.toggleAttribute("inert", page !== null);
+    if (page === null && returnTo.current) {
+      rows.current[returnTo.current]?.focus();
+      returnTo.current = null;
+    }
+  }, [page]);
+  const open = (p) => () => {
+    returnTo.current = p;
+    setPage(p);
+  };
+  const back = () => setPage(null);
+  const rowRef = (p) => (el) => {
+    rows.current[p] = el;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-view cv-settings", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cv-settings-body", ref: list, children: [
+      store ? /* @__PURE__ */ jsxRuntime.jsx(SettingsSection, { title: "Llamadas entrantes", children: /* @__PURE__ */ jsxRuntime.jsx(
+        SettingsNavRow,
+        {
+          icon: Music,
+          title: "Tono de llamada",
+          value: ringtoneSummary(ringtone.settings, ringtone.failed),
+          onOpen: open("tone"),
+          rowRef: rowRef("tone")
+        }
+      ) }) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs(SettingsSection, { title: "Dispositivos", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SettingsNavRow,
+          {
+            icon: Mic,
+            title: "Micr\xF3fono",
+            value: deviceSummary("input", devices.inputs, devices.currentInputId),
+            onOpen: open("input"),
+            rowRef: rowRef("input")
+          }
+        ),
+        devices.canSelectOutput ? /* @__PURE__ */ jsxRuntime.jsx(
+          SettingsNavRow,
+          {
+            icon: Headphones,
+            title: "Altavoces",
+            value: deviceSummary("output", devices.outputs, devices.currentOutputId),
+            onOpen: open("output"),
+            rowRef: rowRef("output")
+          }
+        ) : (
+          // Safari and most of Firefox have no `setSinkId`: offering a page whose choice silently does
+          // nothing is worse than saying where the choice really lives.
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SettingsNavRow,
+            {
+              icon: Headphones,
+              title: "Altavoces",
+              value: "Tu navegador no permite elegirlos desde aqu\xED \u2014 c\xE1mbialos en los ajustes del sistema."
+            }
+          )
+        ),
+        devices.canSelectRingtoneOutput ? /* @__PURE__ */ jsxRuntime.jsx(
+          SettingsNavRow,
+          {
+            icon: BellRing,
+            title: "Salida del tono",
+            value: deviceSummary("ringtone", devices.outputs, devices.currentRingtoneOutputId),
+            onOpen: open("ringtone"),
+            rowRef: rowRef("ringtone")
+          }
+        ) : null
+      ] })
+    ] }),
+    page === "tone" && store ? /* @__PURE__ */ jsxRuntime.jsx(
+      RingtonePage,
+      {
+        store,
+        settings: ringtone.settings,
+        failed: ringtone.failed,
+        onRetry: ringtone.retry,
+        onBack: back
+      }
+    ) : page !== null && page !== "tone" ? /* @__PURE__ */ jsxRuntime.jsx(DevicePage, { kind: page, onBack: back }) : null
+  ] });
 }
 
 // src/core/env.ts
@@ -15289,203 +16406,6 @@ function useCallOutcome() {
     clear
   };
 }
-
-// src/ui/audio/audio.ts
-var TONE_HZ = 425;
-function createRemoteAudio() {
-  const el = document.createElement("audio");
-  el.autoplay = true;
-  el.style.display = "none";
-  document.body.appendChild(el);
-  return {
-    attach(stream) {
-      el.srcObject = stream;
-      void el.play().catch(() => {
-      });
-    },
-    detach() {
-      el.srcObject = null;
-    },
-    destroy() {
-      el.srcObject = null;
-      el.remove();
-    },
-    async setOutputDevice(deviceId) {
-      if (typeof el.setSinkId !== "function") return;
-      try {
-        await el.setSinkId(deviceId ?? "");
-      } catch {
-      }
-    }
-  };
-}
-var shared = null;
-function sharedContext() {
-  if (shared) return shared;
-  const Ctor = typeof AudioContext !== "undefined" ? AudioContext : globalThis.webkitAudioContext;
-  if (!Ctor) return null;
-  shared = new Ctor();
-  return shared;
-}
-function primeAudio() {
-  const ctx = sharedContext();
-  if (ctx && ctx.state === "suspended") void ctx.resume?.().catch(() => {
-  });
-}
-function playRingtone() {
-  const ctx = sharedContext();
-  if (!ctx) return { stop() {
-  } };
-  const gain = ctx.createGain();
-  gain.gain.value = 0;
-  gain.connect(ctx.destination);
-  const osc = ctx.createOscillator();
-  osc.type = "sine";
-  osc.frequency.value = TONE_HZ;
-  osc.connect(gain);
-  osc.start();
-  const LEVEL = 0.8;
-  const RAMP = 0.02;
-  const burst = (at, dur) => {
-    gain.gain.setValueAtTime(0, at);
-    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
-    gain.gain.setValueAtTime(LEVEL, at + dur - RAMP);
-    gain.gain.linearRampToValueAtTime(0, at + dur);
-  };
-  const scheduleCycle = (at) => {
-    burst(at, 0.4);
-    burst(at + 0.6, 0.4);
-    return 3;
-  };
-  const LOOKAHEAD = 0.5;
-  const TICK_MS = 150;
-  const LEAD = 0.08;
-  let stopped = false;
-  let timer = null;
-  let nextAt = 0;
-  const pump = () => {
-    while (nextAt < ctx.currentTime + LOOKAHEAD) nextAt += scheduleCycle(nextAt);
-  };
-  void Promise.resolve(ctx.resume?.()).catch(() => {
-  }).finally(() => {
-    if (stopped) return;
-    nextAt = ctx.currentTime + LEAD;
-    pump();
-    timer = setInterval(pump, TICK_MS);
-  });
-  return {
-    stop() {
-      stopped = true;
-      if (timer) clearInterval(timer);
-      try {
-        osc.stop();
-      } catch {
-      }
-      try {
-        gain.disconnect();
-      } catch {
-      }
-    }
-  };
-}
-function playCallEndedTone() {
-  const ctx = sharedContext();
-  if (!ctx) return;
-  const gain = ctx.createGain();
-  gain.gain.value = 0;
-  gain.connect(ctx.destination);
-  const osc = ctx.createOscillator();
-  osc.type = "sine";
-  osc.frequency.value = TONE_HZ;
-  osc.connect(gain);
-  osc.start();
-  const LEVEL = 0.55;
-  const RAMP = 8e-3;
-  const BEEP = 0.25;
-  void Promise.resolve(ctx.resume?.()).catch(() => {
-  }).finally(() => {
-    const at = ctx.currentTime + 0.02;
-    gain.gain.setValueAtTime(0, at);
-    gain.gain.linearRampToValueAtTime(LEVEL, at + RAMP);
-    gain.gain.setValueAtTime(LEVEL, at + BEEP - RAMP);
-    gain.gain.linearRampToValueAtTime(0, at + BEEP);
-    const totalMs = (at + BEEP - ctx.currentTime) * 1e3;
-    setTimeout(() => {
-      try {
-        osc.stop();
-      } catch {
-      }
-      try {
-        gain.disconnect();
-      } catch {
-      }
-    }, totalMs);
-  });
-}
-var ringbackUrl = null;
-function ringbackSource() {
-  if (ringbackUrl) return ringbackUrl;
-  const sampleRate = 48e3;
-  const channels = 2;
-  const bytesPerSample = 2;
-  const amp = 0.5;
-  const toneSec = 1.5;
-  const silenceSec = 3;
-  const totalFrames = Math.round((toneSec + silenceSec) * sampleRate);
-  const toneFrames = Math.round(toneSec * sampleRate);
-  const ramp = Math.round(0.02 * sampleRate);
-  const blockAlign = channels * bytesPerSample;
-  const dataSize = totalFrames * blockAlign;
-  const buffer = new ArrayBuffer(44 + dataSize);
-  const view = new DataView(buffer);
-  const str = (off, s) => {
-    for (let i = 0; i < s.length; i++) view.setUint8(off + i, s.charCodeAt(i));
-  };
-  str(0, "RIFF");
-  view.setUint32(4, 36 + dataSize, true);
-  str(8, "WAVE");
-  str(12, "fmt ");
-  view.setUint32(16, 16, true);
-  view.setUint16(20, 1, true);
-  view.setUint16(22, channels, true);
-  view.setUint32(24, sampleRate, true);
-  view.setUint32(28, sampleRate * blockAlign, true);
-  view.setUint16(32, blockAlign, true);
-  view.setUint16(34, bytesPerSample * 8, true);
-  str(36, "data");
-  view.setUint32(40, dataSize, true);
-  for (let i = 0; i < totalFrames; i++) {
-    let sample = 0;
-    if (i < toneFrames) {
-      let env = 1;
-      if (i < ramp) env = i / ramp;
-      else if (i > toneFrames - ramp) env = Math.max(0, (toneFrames - i) / ramp);
-      sample = Math.sin(2 * Math.PI * TONE_HZ * (i / sampleRate)) * amp * env;
-    }
-    const s16 = Math.round(sample * 32767);
-    const off = 44 + i * blockAlign;
-    for (let c = 0; c < channels; c++) view.setInt16(off + c * bytesPerSample, s16, true);
-  }
-  ringbackUrl = URL.createObjectURL(new Blob([buffer], { type: "audio/wav" }));
-  return ringbackUrl;
-}
-function playRingback() {
-  const el = document.createElement("audio");
-  el.src = ringbackSource();
-  el.loop = true;
-  el.style.display = "none";
-  document.body.appendChild(el);
-  void el.play().catch(() => {
-  });
-  return {
-    stop() {
-      el.pause();
-      el.remove();
-    }
-  };
-}
-
-// src/ui/audio/useCallAudio.ts
 function useCallAudio(enabled) {
   const softphone = useSoftphone();
   const remote = React.useRef(null);
@@ -15502,14 +16422,29 @@ function useCallAudio(enabled) {
     const offDeviceChange = softphone.on("deviceChange" /* DeviceChange */, () => {
       void remote.current?.setOutputDevice(softphone.audio.currentOutputId);
     });
+    const ringtones = ringtoneStore(softphone);
+    ringtones?.wantAudio(true);
+    const refreshRingtone = () => {
+      if (softphone.isLeader) void ringtones?.refresh();
+    };
+    refreshRingtone();
+    const offLeader = softphone.on("leaderChanged" /* LeaderChanged */, ({ isLeader }) => {
+      if (isLeader) refreshRingtone();
+    });
     const stopTone = () => {
       tone.current?.stop();
       tone.current = null;
     };
     const setTone = (next) => {
       stopTone();
-      if (next === "ringtone") tone.current = playRingtone();
-      else if (next === "ringback") tone.current = playRingback();
+      if (next === "ringtone") {
+        const audio = softphone.audio;
+        tone.current = playRingtone({
+          buffer: ringtones?.readyBuffer() ?? null,
+          loop: ringtones?.readyLoop() ?? null,
+          sinkId: audio.canSelectRingtoneOutput ? audio.currentRingtoneOutputId : null
+        });
+      } else if (next === "ringback") tone.current = playRingback();
     };
     const perCall = [];
     const followedCalls = /* @__PURE__ */ new Set();
@@ -15540,6 +16475,7 @@ function useCallAudio(enabled) {
           stopTone();
           remote.current?.detach();
           if (wasConnected && (reason === "local" || reason === "remote")) playCallEndedTone();
+          refreshRingtone();
         })
       );
     };
@@ -15557,6 +16493,8 @@ function useCallAudio(enabled) {
       offIncoming();
       offActive();
       offDeviceChange();
+      offLeader();
+      ringtones?.wantAudio(false);
       for (const off of perCall) off();
       stopTone();
       remote.current?.destroy();
@@ -15703,7 +16641,7 @@ function SoftphoneWidget(props) {
       ...theme === "system" ? {} : { "data-cv-theme": theme },
       children: [
         screenIsFree ? /* @__PURE__ */ jsxRuntime.jsx(TransferNotices, { notices: transferNotices, dismiss: dismissTransferNotice }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ jsxRuntime.jsx(LeaderGate, {}) : blocked ? /* @__PURE__ */ jsxRuntime.jsx(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ jsxRuntime.jsx(CallScreen, { call, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ jsxRuntime.jsx(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ jsxRuntime.jsx(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ jsxRuntime.jsx(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ jsxRuntime.jsx(SettingsTab, {}) : /* @__PURE__ */ jsxRuntime.jsx(Dialpad, { outcome, onIntent: clearOutcome }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ jsxRuntime.jsx(LeaderGate, {}) : blocked ? /* @__PURE__ */ jsxRuntime.jsx(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ jsxRuntime.jsx(CallScreen, { call, keyTones: sounds, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ jsxRuntime.jsx(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ jsxRuntime.jsx(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ jsxRuntime.jsx(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ jsxRuntime.jsx(SettingsTab, {}) : /* @__PURE__ */ jsxRuntime.jsx(Dialpad, { outcome, onIntent: clearOutcome, keyTones: sounds }) }),
         screenIsFree ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
@@ -15731,6 +16669,7 @@ lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/arrow-left-right.js:
 lucide-react/dist/esm/icons/arrow-left.js:
 lucide-react/dist/esm/icons/arrow-right.js:
+lucide-react/dist/esm/icons/bell-ring.js:
 lucide-react/dist/esm/icons/calendar-clock.js:
 lucide-react/dist/esm/icons/check.js:
 lucide-react/dist/esm/icons/chevron-down.js:
@@ -15746,6 +16685,7 @@ lucide-react/dist/esm/icons/loader-circle.js:
 lucide-react/dist/esm/icons/mic-off.js:
 lucide-react/dist/esm/icons/mic.js:
 lucide-react/dist/esm/icons/monitor-smartphone.js:
+lucide-react/dist/esm/icons/music.js:
 lucide-react/dist/esm/icons/pause.js:
 lucide-react/dist/esm/icons/phone-incoming.js:
 lucide-react/dist/esm/icons/phone-missed.js:
@@ -15759,6 +16699,7 @@ lucide-react/dist/esm/icons/timer.js:
 lucide-react/dist/esm/icons/triangle-alert.js:
 lucide-react/dist/esm/icons/user.js:
 lucide-react/dist/esm/icons/users.js:
+lucide-react/dist/esm/icons/volume-2.js:
 lucide-react/dist/esm/icons/x.js:
 lucide-react/dist/esm/lucide-react.js:
   (**
@@ -15775,5 +16716,6 @@ exports.Dialpad = Dialpad;
 exports.HistoryTab = HistoryTab;
 exports.MicPermissionGate = MicPermissionGate;
 exports.SoftphoneWidget = SoftphoneWidget;
+exports.previewRingtone = previewRingtone;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map