@coventia/softphone 0.2.0 → 0.2.1

package/dist/ui/index.js

@@ -550,21 +550,263 @@ 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 } = {}) {
+
+// 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 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] = useState("");
@@ -585,6 +827,7 @@ function Dialpad({ outcome = null, onIntent } = {}) {
   const append = (key) => {
     onIntent?.();
     setValue((v) => v + key);
+    if (keyTones) playKeyTone(key);
   };
   const backspace = () => {
     onIntent?.();
@@ -629,22 +872,25 @@ function Dialpad({ outcome = null, onIntent } = {}) {
       )
     ] }),
     /* @__PURE__ */ jsx("p", { className: "cv-dial-outcome", role: "status", part: "error", "data-shown": outcome !== null, children: outcome?.text ?? "" }),
-    /* @__PURE__ */ jsx("div", { className: "cv-keypad", children: KEYS.map(([key, letters, dialable]) => /* @__PURE__ */ 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__ */ jsx("b", { children: key }),
-          letters ? /* @__PURE__ */ jsx("small", { children: letters }) : null
-        ]
-      },
-      key
-    )) }),
+    /* @__PURE__ */ jsx("div", { className: "cv-keypad", children: KEYPAD_KEYS.map(([key, letters]) => {
+      const dialable = !NOT_DIALABLE.has(key);
+      return /* @__PURE__ */ 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__ */ jsx("b", { children: key }),
+            letters ? /* @__PURE__ */ jsx("small", { children: letters }) : null
+          ]
+        },
+        key
+      );
+    }) }),
     /* @__PURE__ */ jsx("div", { className: "cv-dial-foot", children: /* @__PURE__ */ jsx(
       "button",
       {
@@ -884,7 +1130,9 @@ function Control({
   label,
   pressed = false,
   tone,
-  onClick
+  onClick,
+  disabled = false,
+  title
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "cv-ctrl-item", children: [
     /* @__PURE__ */ jsx(
@@ -896,6 +1144,8 @@ function Control({
         "aria-pressed": pressed,
         "aria-label": label,
         onClick,
+        disabled,
+        title,
         children: /* @__PURE__ */ jsx(Icon3, { size: 19 })
       }
     ),
@@ -1034,18 +1284,22 @@ function TransferPicker({
 }
 function CallScreen({
   call,
-  incomingCallAction
+  incomingCallAction,
+  keyTones = true
 }) {
   const view = useCall(call);
   const softphone = useSoftphone();
-  const [showTransfer, setShowTransfer] = useState(false);
+  const [panel, setPanel] = 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] = useState("");
   const [consultCall, setConsultCall] = useState(null);
   const [consultOutcome, setConsultOutcome] = useState(null);
   const [myUserId, setMyUserId] = useState(null);
   const consultView = useCall(consultCall);
   const consultIntentRef = useRef(null);
-  const [showDevices, setShowDevices] = useState(false);
   const controlsRef = useRef(null);
   const now = useTicker(view?.state === "active");
   const consultNow = useTicker(consultView?.state === "active");
@@ -1102,20 +1356,31 @@ function CallScreen({
   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]);
+  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]);
+  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";
@@ -1141,9 +1406,9 @@ function CallScreen({
   const [rawM = "0", ss = "00"] = formatDuration(elapsedSeconds(view.answeredAt, now)).split(":");
   const mm = rawM.padStart(2, "0");
   return /* @__PURE__ */ jsxs("div", { className: "cv-view", children: [
-    /* @__PURE__ */ jsx("div", { className: "cv-call", children: !inCall && showDevices ? /* @__PURE__ */ jsxs("div", { className: "cv-call-devices-inline", children: [
+    /* @__PURE__ */ jsx("div", { className: "cv-call", children: showDevices ? /* @__PURE__ */ jsxs("div", { className: "cv-call-devices-inline", children: [
       /* @__PURE__ */ jsxs("div", { className: "cv-call-devices-header", children: [
-        /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setShowDevices(false), children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel(null), children: [
           /* @__PURE__ */ jsx(ArrowLeft, { size: 13, "aria-hidden": true }),
           "Volver"
         ] }),
@@ -1151,7 +1416,7 @@ function CallScreen({
       ] }),
       /* @__PURE__ */ jsxs("p", { className: "cv-call-devices-context", children: [
         showNumber ? `${number} \xB7 ` : "",
-        STATUS_LABEL[s] ?? ""
+        s === "active" ? `${mm}:${ss}` : STATUS_LABEL[s] ?? ""
       ] }),
       /* @__PURE__ */ jsx("div", { className: "cv-settings-section-body", children: /* @__PURE__ */ jsx(DevicePickers, {}) })
     ] }) : transferPickerActive ? (
@@ -1239,7 +1504,7 @@ function CallScreen({
         /* @__PURE__ */ jsx("i", { children: ":" }),
         /* @__PURE__ */ jsx("b", { children: ss })
       ] }) : /* @__PURE__ */ jsx("div", { className: "cv-call-status", children: s === "held" ? /* @__PURE__ */ jsx("span", { className: "cv-badge-hold", children: STATUS_LABEL[s] }) : STATUS_LABEL[s] ?? "" }),
-      !inCall ? /* @__PURE__ */ jsxs("div", { className: "cv-call-chips", children: [
+      /* @__PURE__ */ jsxs("div", { className: "cv-call-chips", children: [
         incomingAction ? /* @__PURE__ */ jsxs(
           "button",
           {
@@ -1252,11 +1517,11 @@ function CallScreen({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setShowDevices(true), children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel("devices"), children: [
           /* @__PURE__ */ jsx(Headphones, { size: 13, "aria-hidden": true }),
           "Dispositivos"
         ] })
-      ] }) : null
+      ] })
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "cv-controls", ref: controlsRef, children: isRinging ? /* @__PURE__ */ jsxs("div", { className: "cv-controls-primary", children: [
       /* @__PURE__ */ jsxs("div", { className: "cv-ctrl-item", children: [
@@ -1315,17 +1580,19 @@ function CallScreen({
             label: "Transferir",
             pressed: showTransfer,
             tone: "accent",
-            onClick: () => setShowTransfer((v) => !v)
+            onClick: () => togglePanel("transfer")
           }
         ),
         /* @__PURE__ */ 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,
@@ -1343,7 +1610,22 @@ function CallScreen({
         ),
         /* @__PURE__ */ jsx("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Colgar" })
       ] }) }),
-      inCall && showDevices ? /* @__PURE__ */ jsx("div", { className: "cv-device-popover cv-device-popover--above", role: "dialog", "aria-label": "Dispositivos de audio", children: /* @__PURE__ */ jsx(DevicePickers, {}) }) : null
+      inCall && showKeypad ? /* @__PURE__ */ jsx("div", { className: "cv-keypad-popover cv-keypad-popover--above", role: "dialog", "aria-label": "Teclado", children: KEYPAD_KEYS.map(([key, letters]) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: "cv-key",
+          onClick: () => {
+            call.sendDigits(key);
+            if (keyTones) playKeyTone(key);
+          },
+          children: [
+            /* @__PURE__ */ jsx("b", { children: key }),
+            letters ? /* @__PURE__ */ jsx("small", { children: letters }) : null
+          ]
+        },
+        key
+      )) }) : null
     ] }) })
   ] });
 }
@@ -2108,203 +2390,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 = useRef(null);
@@ -2522,7 +2607,7 @@ function SoftphoneWidget(props) {
       ...theme === "system" ? {} : { "data-cv-theme": theme },
       children: [
         screenIsFree ? /* @__PURE__ */ jsx(TransferNotices, { notices: transferNotices, dismiss: dismissTransferNotice }) : null,
-        /* @__PURE__ */ jsx("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ jsx(LeaderGate, {}) : blocked ? /* @__PURE__ */ jsx(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ jsx(CallScreen, { call, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ jsx(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ jsx(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ jsx(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ jsx(SettingsTab, {}) : /* @__PURE__ */ jsx(Dialpad, { outcome, onIntent: clearOutcome }) }),
+        /* @__PURE__ */ jsx("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ jsx(LeaderGate, {}) : blocked ? /* @__PURE__ */ jsx(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ jsx(CallScreen, { call, keyTones: sounds, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ jsx(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ jsx(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ jsx(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ jsx(SettingsTab, {}) : /* @__PURE__ */ jsx(Dialpad, { outcome, onIntent: clearOutcome, keyTones: sounds }) }),
         screenIsFree ? /* @__PURE__ */ jsx("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ jsxs(
           "button",
           {