@coventia/softphone 0.2.1 → 0.4.0

package/dist/ui/index.js

@@ -1,7 +1,8 @@
 import { isWebRtcSupported } from '../chunk-KAXEMJ7E.js';
-import { useSoftphone, useSoftphoneState, useCall, usePresence, useActiveCall, useIsLeader, useLastError, useDevices } from '../chunk-LMJXX4YM.js';
+import { useSoftphone, useSoftphoneState, useCall, usePresence, useActiveCall, useIsLeader, useLastError, useDevices } from '../chunk-UHNLEBBO.js';
 import '../chunk-7R6LOOAI.js';
-import { forwardRef, createElement, useState, useRef, useLayoutEffect, useEffect, useCallback, useMemo } from 'react';
+import { isOutboundNumberRefused } from '../chunk-5E5OEXS2.js';
+import { forwardRef, createElement, useState, useRef, useLayoutEffect, useEffect, useCallback, useMemo, useSyncExternalStore, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
@@ -89,6 +90,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" }],
@@ -203,6 +212,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" }],
@@ -328,6 +344,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" }],
@@ -339,6 +368,36 @@ var PACKED = "AC247 AD376 AE971 AF93 AG1 AI1 AL355 AM374 AO244 AR54 AS1 AT43 AU6
 var DIAL_CODES = new Map(
   PACKED.split(" ").map((token) => [token.slice(0, 2), Number(token.slice(2))])
 );
+var REGIONS_BY_CODE = (() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const [region, code] of DIAL_CODES) map.set(code, [...map.get(code) ?? [], region]);
+  return map;
+})();
+var MAIN_REGION = {
+  1: "US",
+  7: "RU",
+  39: "IT",
+  44: "GB",
+  47: "NO",
+  61: "AU",
+  212: "MA",
+  262: "RE",
+  290: "SH",
+  358: "FI",
+  590: "GP",
+  599: "CW"
+};
+function regionOfInternational(typed) {
+  const text = String(typed ?? "").trim();
+  if (!text.startsWith("+")) return null;
+  const digits = text.slice(1).replace(/\D/g, "");
+  for (let length = 1; length <= Math.min(3, digits.length); length++) {
+    const code = Number(digits.slice(0, length));
+    const regions = REGIONS_BY_CODE.get(code);
+    if (regions) return MAIN_REGION[code] ?? regions[0] ?? null;
+  }
+  return null;
+}
 var DEFAULT_COUNTRY = "ES";
 var REGION_NAMES = (() => {
   try {
@@ -390,12 +449,16 @@ function CountryMark({ code }) {
 }
 function CountryPicker({
   value,
-  onChange
+  onChange,
+  fromNumber = false
 }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const rootRef = useRef(null);
   const inputRef = useRef(null);
+  useEffect(() => {
+    if (fromNumber) setOpen(false);
+  }, [fromNumber]);
   const results = useMemo(() => {
     const q = query.trim().toLowerCase().replace(/^\+/, "");
     if (!q) return COUNTRIES;
@@ -424,6 +487,12 @@ function CountryPicker({
     else setQuery("");
   }, [open]);
   const dial = DIAL_CODES.get(value);
+  if (fromNumber) {
+    return /* @__PURE__ */ jsx("div", { className: "cv-cp", ref: rootRef, children: /* @__PURE__ */ jsxs("span", { className: "cv-cp-chip", "data-from-number": true, title: "El prefijo viene del n\xFAmero marcado", part: "country-chip", children: [
+      /* @__PURE__ */ jsx(CountryMark, { code: value || "+" }),
+      /* @__PURE__ */ jsx("span", { className: "cv-sr-only", children: dial ? `Prefijo del n\xFAmero marcado: ${countryName(value)} (+${dial})` : "Prefijo del n\xFAmero marcado" })
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs("div", { className: "cv-cp", ref: rootRef, children: [
     /* @__PURE__ */ jsxs(
       "button",
@@ -567,6 +636,59 @@ var KEYPAD_KEYS = [
   ["#", ""]
 ];
 
+// 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() {
@@ -609,30 +731,159 @@ function primeAudio() {
   if (ctx && ctx.state === "suspended") void ctx.resume?.().catch(() => {
   });
 }
-function playRingtone() {
+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();
+    }
+  };
+}
+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(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.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(LEVEL, at + RAMP);
-    gain.gain.setValueAtTime(LEVEL, at + dur - RAMP);
-    gain.gain.linearRampToValueAtTime(0, at + dur);
+    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 {
+      }
+    }
   };
-  const scheduleCycle = (at) => {
-    burst(at, 0.4);
-    burst(at + 0.6, 0.4);
-    return 3;
+}
+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 safeDisconnect(node) {
+  try {
+    node.disconnect();
+  } catch {
+  }
+}
+function teardown(el) {
+  el.pause();
+  el.srcObject = null;
+  el.remove();
+}
+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;
@@ -641,7 +892,7 @@ function playRingtone() {
   let timer = null;
   let nextAt = 0;
   const pump = () => {
-    while (nextAt < ctx.currentTime + LOOKAHEAD) nextAt += scheduleCycle(nextAt);
+    while (nextAt < ctx.currentTime + LOOKAHEAD) nextAt += scheduleClassicCycle(ctx, input, nextAt, track);
   };
   void Promise.resolve(ctx.resume?.()).catch(() => {
   }).finally(() => {
@@ -654,12 +905,15 @@ function playRingtone() {
     stop() {
       stopped = true;
       if (timer) clearInterval(timer);
-      try {
-        osc.stop();
-      } catch {
+      for (const o of scheduled) {
+        try {
+          o.stop();
+        } catch {
+        }
       }
+      scheduled.clear();
       try {
-        gain.disconnect();
+        output.disconnect();
       } catch {
       }
     }
@@ -805,18 +1059,378 @@ function playRingback() {
     }
   };
 }
+var stores = /* @__PURE__ */ new WeakMap();
+function outboundNumberStore(softphone) {
+  const source = softphone.sources?.outboundNumbers;
+  if (!source) return null;
+  let store = stores.get(softphone);
+  if (!store) {
+    store = createOutboundNumberStore(source);
+    stores.set(softphone, store);
+  }
+  return store;
+}
+function createOutboundNumberStore(source) {
+  let settings = null;
+  let inFlight = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const apply = (next) => {
+    settings = next;
+    for (const l of listeners) l();
+  };
+  return {
+    getSettings: () => settings,
+    refresh() {
+      inFlight ??= (async () => {
+        if (!settings && source.cached) {
+          const early = await source.cached().catch(() => null);
+          if (early && !settings) apply(early);
+        }
+        try {
+          apply(await source.get());
+        } catch (error) {
+          console.warn("[softphone] outbound numbers could not be loaded; keeping the previous ones", error);
+        } finally {
+          inFlight = null;
+        }
+      })();
+      return inFlight;
+    },
+    async setMine(id) {
+      apply(await source.setMine(id));
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var noSubscribe = () => () => {
+};
+var noSettings = () => null;
+function useOutboundNumbers(store) {
+  const settings = useSyncExternalStore(store?.subscribe ?? noSubscribe, store?.getSettings ?? noSettings);
+  const [failed, setFailed] = useState(false);
+  const load = useCallback(() => {
+    if (!store) return () => {
+    };
+    let live = true;
+    setFailed(false);
+    void store.refresh().then(() => {
+      if (live) setFailed(store.getSettings() === null);
+    });
+    return () => {
+      live = false;
+    };
+  }, [store]);
+  useEffect(load, [load]);
+  return { settings, failed, retry: load };
+}
+function useKnownOutboundNumbers(store) {
+  return useSyncExternalStore(store?.subscribe ?? noSubscribe, store?.getSettings ?? noSettings);
+}
+function useCountdown(until) {
+  const [, setTick] = useState(0);
+  useEffect(() => {
+    if (!until) return void 0;
+    const timer = setInterval(() => {
+      setTick((n) => n + 1);
+      if (secondsLeft(until) === 0) clearInterval(timer);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [until]);
+  return secondsLeft(until);
+}
+function secondsLeft(until) {
+  return until ? Math.max(0, Math.ceil((until - Date.now()) / 1e3)) : 0;
+}
+function numberName(n, format = formatIntl) {
+  if (!n) return "N\xFAmero de la organizaci\xF3n";
+  return n.label || format(`+${n.number}`);
+}
+function effectiveNumber(settings) {
+  return settings?.numbers.find((n) => n.id === settings.effective);
+}
+
+// src/ui/outbound/outbound-change.ts
+var KIND_TAG = {
+  mobile: { tag: "M\xF3vil", hint: "No usar para atenci\xF3n al cliente ni para llamadas comerciales no solicitadas." },
+  commercial: { tag: "Comercial (400)", hint: "Solo para llamadas comerciales. No recibe llamadas." }
+};
+function noticeText(situation, seconds, current) {
+  switch (situation) {
+    case "platform":
+      return `El cambio de n\xFAmero de salida no est\xE1 disponible temporalmente. Vuelve a intentarlo en ${seconds} s. Hasta entonces, tus llamadas seguir\xE1n saliendo desde ${current}.`;
+    case "user":
+      return `Acabas de cambiar el n\xFAmero de salida. Podr\xE1s cambiarlo de nuevo en ${seconds} s. Hasta entonces, tus llamadas saldr\xE1n desde ${current}.`;
+    case "wait":
+      return `Podr\xE1s cambiar el n\xFAmero de salida en ${seconds} s.`;
+    case "pending":
+      return seconds > 0 ? `Tu n\xFAmero de salida todav\xEDa no se ha aplicado. Podr\xE1s volver a elegirlo en ${seconds} s.` : "Tu n\xFAmero de salida todav\xEDa no se ha aplicado. Vuelve a elegirlo para aplicarlo.";
+  }
+}
+function useOutboundNumberChange(store, settings, current) {
+  const [busy, setBusy] = useState(false);
+  const [notice, setNotice] = useState(null);
+  const [waitUntil, setWaitUntil] = useState(null);
+  useEffect(() => {
+    const s = settings?.changeAvailableInSeconds ?? 0;
+    setWaitUntil(s > 0 ? Date.now() + s * 1e3 : null);
+  }, [settings]);
+  const refusedUntil = notice?.kind === "refused" ? notice.until : null;
+  const blockedFor = useCountdown(refusedUntil ?? waitUntil);
+  useEffect(() => {
+    if (notice?.kind === "refused" && blockedFor === 0) setNotice(null);
+  }, [notice, blockedFor]);
+  const locked = busy || blockedFor > 0;
+  const choose = async (id) => {
+    if (!store || !settings || locked) return false;
+    if (id === settings.mine) return true;
+    setBusy(true);
+    setNotice(null);
+    try {
+      await store.setMine(id);
+      return true;
+    } catch (error) {
+      setNotice(
+        isOutboundNumberRefused(error) ? { kind: "refused", reason: error.refusal.reason, until: Date.now() + error.refusal.retryAfterSeconds * 1e3 } : { kind: "error", text: errorText(error) }
+      );
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+  return {
+    busy,
+    locked,
+    choose,
+    /** What to say about the choice right now, if anything. */
+    message: settings ? currentMessage(notice, settings.state, blockedFor, current) : null,
+    /** The message is an error (the change failed), not information (wait, pending). */
+    isError: notice?.kind === "error"
+  };
+}
+function currentMessage(notice, state, blockedFor, current) {
+  if (notice?.kind === "refused") return blockedFor > 0 ? noticeText(notice.reason, blockedFor, current) : null;
+  if (notice?.kind === "error") return notice.text;
+  if (state === "pending" || state === "failed") return noticeText("pending", blockedFor, current);
+  return blockedFor > 0 ? noticeText("wait", blockedFor, current) : null;
+}
+function errorText(error) {
+  const message = error instanceof Error ? error.message : "";
+  return message && !/HTTP \d+/.test(message) ? message : "No se ha podido cambiar el n\xFAmero de salida. Int\xE9ntalo de nuevo.";
+}
+var CALLOUT_MS = 6e3;
+function OutboundNumberPicker({ onBusyChange }) {
+  const softphone = useSoftphone();
+  const store = outboundNumberStore(softphone);
+  const { settings } = useOutboundNumbers(store);
+  const formatIntl2 = useIntlFormatter();
+  const current = settings ? numberName(effectiveNumber(settings), formatIntl2) : "";
+  const { busy, locked, choose: apply, message, isError } = useOutboundNumberChange(store, settings, current);
+  const [open, setOpen] = useState(false);
+  const [applying, setApplying] = useState(void 0);
+  const [callout, setCallout] = useState(false);
+  const rootRef = useRef(null);
+  const chipRef = useRef(null);
+  const keys = useListKeyboard(open);
+  useEffect(() => onBusyChange?.(busy), [busy, onBusyChange]);
+  useEffect(() => {
+    if (!message) setCallout(false);
+  }, [message]);
+  useEffect(() => {
+    if (!callout) return void 0;
+    const timer = setTimeout(() => setCallout(false), CALLOUT_MS);
+    return () => clearTimeout(timer);
+  }, [callout]);
+  const floating = open || callout;
+  useEffect(() => {
+    if (!floating) return;
+    const close = () => {
+      setOpen(false);
+      setCallout(false);
+    };
+    const root = rootRef.current?.getRootNode() ?? document;
+    const onDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) close();
+    };
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (rootRef.current?.contains(e.target)) chipRef.current?.focus();
+      close();
+    };
+    root.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      root.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [floating]);
+  if (!store || !settings || settings.numbers.length < 2) return null;
+  const orgDefault = settings.numbers.find((n) => n.id === settings.orgDefault);
+  const applyingNumber = applying === null ? orgDefault : settings.numbers.find((n) => n.id === applying);
+  const shown = applying === void 0 ? current : numberName(applyingNumber, formatIntl2);
+  const choose = async (id) => {
+    if (locked) return;
+    setOpen(false);
+    chipRef.current?.focus();
+    if (id === settings.mine) return;
+    setCallout(false);
+    setApplying(id);
+    const applied = await apply(id);
+    setApplying(void 0);
+    if (!applied) setCallout(true);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "cv-on", ref: rootRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: chipRef,
+        type: "button",
+        className: "cv-on-chip",
+        onClick: () => {
+          setCallout(false);
+          setOpen((o) => !o);
+        },
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-label": `Llamar desde: ${shown}${busy ? " (aplicando)" : ""}. Cambiar n\xFAmero de salida`,
+        "aria-busy": busy,
+        part: "outbound-number-chip",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "cv-on-label", children: "Llamar desde:" }),
+          busy ? /* @__PURE__ */ jsx(LoaderCircle, { size: 13, className: "cv-on-icon cv-on-spin", "aria-hidden": true }) : null,
+          /* @__PURE__ */ jsx("span", { className: "cv-on-current", children: shown }),
+          /* @__PURE__ */ jsx(ChevronDown, { size: 13, className: "cv-cp-caret", "data-open": open, "aria-hidden": true })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "cv-cp-pop cv-on-pop",
+        role: "dialog",
+        "aria-label": "Llamar desde",
+        part: "outbound-number-list",
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setOpen(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "cv-on-title", children: "Llamar desde" }),
+          /* @__PURE__ */ jsxs("div", { className: "cv-cp-list", role: "listbox", "aria-disabled": locked, ref: keys.listRef, onKeyDown: keys.onKeyDown, children: [
+            /* @__PURE__ */ jsx(
+              OptionRow,
+              {
+                selected: settings.mine === null,
+                disabled: locked,
+                title: "Por defecto de la organizaci\xF3n",
+                sub: orgDefault ? numberName(orgDefault, formatIntl2) : "Sin n\xFAmero por defecto",
+                onSelect: () => void choose(null)
+              }
+            ),
+            settings.numbers.map((n) => /* @__PURE__ */ jsx(
+              OptionRow,
+              {
+                selected: settings.mine === n.id,
+                disabled: locked,
+                title: numberName(n, formatIntl2),
+                sub: n.label ? formatIntl2(`+${n.number}`) : null,
+                tag: KIND_TAG[n.kind],
+                onSelect: () => void choose(n.id)
+              },
+              n.id
+            ))
+          ] }),
+          message ? /* @__PURE__ */ jsx("p", { className: "cv-on-notice", role: "status", "data-kind": isError ? "error" : "info", children: message }) : null
+        ]
+      }
+    ) : null,
+    callout && !open && message ? /* @__PURE__ */ jsx("p", { className: "cv-on-callout", role: "status", "data-kind": isError ? "error" : "info", part: "outbound-number-notice", children: message }) : null
+  ] });
+}
+function OptionRow({
+  selected,
+  disabled,
+  title,
+  sub,
+  tag,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      className: "cv-cp-item cv-on-item",
+      tabIndex: -1,
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "cv-on-text", children: [
+          /* @__PURE__ */ jsxs("span", { className: "cv-on-line", children: [
+            /* @__PURE__ */ jsx("span", { className: "cv-cp-name", children: title }),
+            tag ? /* @__PURE__ */ jsx("span", { className: "cv-on-tag", children: tag.tag }) : null
+          ] }),
+          sub ? /* @__PURE__ */ jsx("span", { className: "cv-on-sub", children: sub }) : null,
+          tag ? /* @__PURE__ */ jsx("span", { className: "cv-on-hint", children: tag.hint }) : null
+        ] }),
+        /* @__PURE__ */ jsx(Check, { size: 14, className: "cv-cp-check", "data-on": selected, "aria-hidden": true })
+      ]
+    }
+  );
+}
+var optionsOf = (list) => list ? [...list.querySelectorAll('[role="option"]')] : [];
+var fold = (text) => text.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+var TYPEAHEAD_MS = 700;
+function useListKeyboard(open) {
+  const listRef = useRef(null);
+  const typed = useRef({ text: "", at: 0 });
+  useEffect(() => {
+    if (!open) return;
+    const options = optionsOf(listRef.current);
+    (options.find((o) => o.getAttribute("aria-selected") === "true") ?? options[0])?.focus();
+  }, [open]);
+  const onKeyDown = (e) => {
+    const options = optionsOf(listRef.current);
+    const at = options.indexOf(e.target);
+    const move = {
+      ArrowDown: Math.min(at + 1, options.length - 1),
+      ArrowUp: Math.max(at - 1, 0),
+      Home: 0,
+      End: options.length - 1
+    };
+    let next = move[e.key];
+    if (next === void 0 && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      const now = Date.now();
+      const text = now - typed.current.at < TYPEAHEAD_MS ? typed.current.text + e.key : e.key;
+      typed.current = { text, at: now };
+      const wanted = fold(text);
+      const match = options.findIndex((o) => fold(o.querySelector(".cv-cp-name")?.textContent ?? "").startsWith(wanted));
+      next = match >= 0 ? match : void 0;
+    }
+    if (next === void 0) return;
+    e.preventDefault();
+    options[next]?.focus();
+  };
+  return { listRef, onKeyDown };
+}
 var NOT_DIALABLE = /* @__PURE__ */ new Set(["*", "#"]);
+var DISPLAY_SIZES = ["1.375rem", "1.25rem", "1.125rem", "1rem"];
 function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
   const softphone = useSoftphone();
   const state = useSoftphoneState();
   const [value, setValue] = useState("");
   const [country, setCountry] = useState(DEFAULT_COUNTRY);
+  const [changingNumber, setChangingNumber] = useState(false);
   const format = useNumberFormatter();
   const inputRef = useRef(null);
   const caretRef = useRef(null);
   const display = format(country, value);
   const target = toE164(country, value);
-  const canCall = state === "online" && target.length > 1;
+  const canCall = state === "online" && target.length > 1 && !changingNumber;
+  const typedInternational = value.trim().startsWith("+");
+  const numberRegion = regionOfInternational(value);
   useLayoutEffect(() => {
     const caret = caretRef.current;
     if (caret === null || !inputRef.current) return;
@@ -824,6 +1438,14 @@ function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
     const pos = caretAfterDigits(display, caret);
     inputRef.current.setSelectionRange(pos, pos);
   }, [display]);
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    for (const size of DISPLAY_SIZES) {
+      input.style.fontSize = size;
+      if (input.scrollWidth <= input.clientWidth) break;
+    }
+  }, [display]);
   const append = (key) => {
     onIntent?.();
     setValue((v) => v + key);
@@ -839,9 +1461,16 @@ function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
     void softphone.call(target);
   };
   return /* @__PURE__ */ jsxs("div", { className: "cv-view", children: [
-    /* @__PURE__ */ jsx("div", { className: "cv-dial-prefix", children: /* @__PURE__ */ jsx(CountryPicker, { value: country, onChange: setCountry }) }),
+    /* @__PURE__ */ jsx(OutboundNumberPicker, { onBusyChange: setChangingNumber }),
     /* @__PURE__ */ jsxs("div", { className: "cv-dial-head", children: [
-      /* @__PURE__ */ jsx("span", { className: "cv-dial-side", "aria-hidden": true }),
+      /* @__PURE__ */ jsx(
+        CountryPicker,
+        {
+          value: numberRegion ?? country,
+          onChange: setCountry,
+          fromNumber: typedInternational
+        }
+      ),
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -865,6 +1494,8 @@ function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
           type: "button",
           className: "cv-dial-side",
           "data-hidden": value.length === 0,
+          tabIndex: value.length === 0 ? -1 : void 0,
+          "aria-hidden": value.length === 0 || void 0,
           onClick: backspace,
           "aria-label": "Borrar",
           children: /* @__PURE__ */ jsx(Delete, { size: 19 })
@@ -1289,6 +1920,9 @@ function CallScreen({
 }) {
   const view = useCall(call);
   const softphone = useSoftphone();
+  const outbound = useOutboundNumbers(call.direction === "outbound" ? outboundNumberStore(softphone) : null).settings;
+  const formatIntl2 = useIntlFormatter();
+  const fromName = outbound && outbound.numbers.length > 1 ? numberName(effectiveNumber(outbound), formatIntl2) : null;
   const [panel, setPanel] = useState(null);
   const showTransfer = panel === "transfer";
   const showKeypad = panel === "keypad";
@@ -1499,6 +2133,13 @@ function CallScreen({
       ] }),
       /* @__PURE__ */ jsx("div", { className: "cv-call-name", children: name }),
       showNumber ? /* @__PURE__ */ jsx("div", { className: "cv-call-number", children: number }) : null,
+      fromName ? /* @__PURE__ */ jsxs("div", { className: "cv-call-from", children: [
+        /* @__PURE__ */ jsx(PhoneOutgoing, { size: 11, "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Desde ",
+          fromName
+        ] })
+      ] }) : null,
       s === "active" ? /* @__PURE__ */ jsxs("div", { className: "cv-timer", "aria-label": "Duraci\xF3n de la llamada", children: [
         /* @__PURE__ */ jsx("b", { children: mm }),
         /* @__PURE__ */ jsx("i", { children: ":" }),
@@ -1914,12 +2555,23 @@ function HandlerChain({ handlers }) {
     ] }, `${h.extension}-${i}`);
   }) });
 }
+function outboundFrom(entry, known, formatIntl2) {
+  if (entry.direction !== "outbound" || !entry.from) return null;
+  const number = formatIntl2(`+${entry.from}`);
+  const label = known?.numbers.find((n) => n.number === entry.from)?.label;
+  if (!label) return number;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label,
+    /* @__PURE__ */ jsx("span", { className: "cv-detail-row-sub", children: number })
+  ] });
+}
 function HistoryDetail({
   entry,
   onBack
 }) {
   const softphone = useSoftphone();
   const formatIntl2 = useIntlFormatter();
+  const knownNumbers = useKnownOutboundNumbers(outboundNumberStore(softphone));
   const [detail, setDetail] = useState(null);
   const [loadingDetail, setLoadingDetail] = useState(false);
   useEffect(() => {
@@ -1935,6 +2587,7 @@ function HistoryDetail({
   }, [entry]);
   const formatted = formatIntl2(entry.number);
   const name = entry.name ?? formatted;
+  const from = outboundFrom(entry, knownNumbers, formatIntl2);
   const handledBy = detail?.handledBy ?? entry.handledBy;
   const recordingUrls = detail?.recordingUrls ?? [];
   const loadingRecording = entry.recorded && loadingDetail && recordingUrls.length === 0;
@@ -1971,7 +2624,8 @@ function HistoryDetail({
         entry.durationSec > 0 ? /* @__PURE__ */ jsx(DetailRow, { icon: Timer, eyebrow: "Duraci\xF3n", text: formatDuration(entry.durationSec) }) : null,
         /* @__PURE__ */ jsx(DetailRow, { icon: Phone, eyebrow: "N\xFAmero", text: formatted }),
         handledBy.length > 0 ? /* @__PURE__ */ jsx(DetailRow, { icon: User, eyebrow: handlerLabel, text: /* @__PURE__ */ jsx(HandlerChain, { handlers: handledBy }) }) : null,
-        entry.direction === "inbound" && entry.did ? /* @__PURE__ */ jsx(DetailRow, { icon: Hash, eyebrow: "N\xFAmero marcado (DID)", text: formatIntl2(entry.did) }) : null
+        entry.direction === "inbound" && entry.did ? /* @__PURE__ */ jsx(DetailRow, { icon: Hash, eyebrow: "N\xFAmero marcado (DID)", text: formatIntl2(entry.did) }) : null,
+        from ? /* @__PURE__ */ jsx(DetailRow, { icon: PhoneOutgoing, eyebrow: "Llamada desde", text: from }) : null
       ] })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "cv-detail-foot", children: /* @__PURE__ */ jsxs(
@@ -2164,6 +2818,110 @@ function HistoryTab({ source }) {
     selected ? /* @__PURE__ */ jsx(HistoryDetail, { entry: selected, onBack: () => setSelected(null) }) : null
   ] });
 }
+
+// src/ui/audio/ringtone-store.ts
+var stores2 = /* @__PURE__ */ new WeakMap();
+function ringtoneStore(softphone) {
+  const source = softphone.sources?.ringtones;
+  if (!source) return null;
+  let store = stores2.get(softphone);
+  if (!store) {
+    store = createRingtoneStore(source);
+    stores2.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
@@ -2173,11 +2931,641 @@ function SettingsSection({
     /* @__PURE__ */ jsx("div", { className: "cv-settings-section-body", children })
   ] });
 }
+function SettingsNavRow({
+  icon: Icon3,
+  title,
+  value,
+  onOpen,
+  rowRef
+}) {
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "cv-settings-row-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(Icon3, { size: 16 }) }),
+    /* @__PURE__ */ jsxs("span", { className: "cv-settings-nav-text", children: [
+      /* @__PURE__ */ jsx("span", { className: "cv-settings-nav-title", children: title }),
+      /* @__PURE__ */ jsx("span", { className: "cv-settings-nav-value", children: value })
+    ] }),
+    onOpen ? /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "cv-settings-nav-chevron", "aria-hidden": true }) : null
+  ] });
+  return onOpen ? /* @__PURE__ */ jsx("button", { type: "button", className: "cv-settings-nav", onClick: onOpen, ref: rowRef, children: inner }) : /* @__PURE__ */ jsx("div", { className: "cv-settings-nav cv-settings-nav--static", children: inner });
+}
+function ChoiceList({
+  label,
+  choices,
+  value,
+  onSelect,
+  onReselect,
+  disabled = false
+}) {
+  const name = useId();
+  const pointer = useRef(false);
+  return /* @__PURE__ */ jsx("div", { className: "cv-choices", role: "radiogroup", "aria-label": label, "aria-disabled": disabled || void 0, children: choices.map((c) => {
+    const checked = c.value === value;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "cv-choice",
+        "data-checked": checked || void 0,
+        "data-disabled": disabled || void 0,
+        onPointerDown: () => {
+          pointer.current = true;
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              className: "cv-choice-input",
+              name,
+              value: c.value,
+              checked,
+              onChange: () => {
+                const via = pointer.current ? "pointer" : "keyboard";
+                pointer.current = false;
+                if (!disabled) onSelect(c.value, via);
+              },
+              onClick: () => {
+                if (c.value === value) {
+                  pointer.current = false;
+                  if (!disabled) onReselect?.(c.value);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "cv-choice-text", children: [
+            c.tag ? /* @__PURE__ */ jsxs("span", { className: "cv-choice-line", children: [
+              /* @__PURE__ */ jsx("span", { className: "cv-choice-label", children: c.label }),
+              /* @__PURE__ */ jsx("span", { className: "cv-choice-tag", children: c.tag })
+            ] }) : /* @__PURE__ */ jsx("span", { className: "cv-choice-label", children: c.label }),
+            c.sub ? /* @__PURE__ */ jsx("span", { className: "cv-choice-sub", children: c.sub }) : null,
+            c.hint ? /* @__PURE__ */ jsx("span", { className: "cv-choice-hint", children: c.hint }) : null
+          ] }),
+          c.trailing,
+          /* @__PURE__ */ jsx(Check, { size: 16, className: "cv-choice-check", "aria-hidden": true })
+        ]
+      },
+      c.value
+    );
+  }) });
+}
+function SettingsPage({
+  title,
+  intro,
+  onBack,
+  children
+}) {
+  const titleId = useId();
+  const heading = useRef(null);
+  useEffect(() => heading.current?.focus(), []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "cv-detail cv-settings-page",
+      role: "region",
+      "aria-labelledby": titleId,
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onBack();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "cv-detail-head", children: /* @__PURE__ */ jsxs("button", { type: "button", className: "cv-detail-back", onClick: onBack, children: [
+          /* @__PURE__ */ jsx(ArrowLeft, { size: 16, "aria-hidden": true }),
+          "Ajustes"
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "cv-settings-page-body", children: [
+          /* @__PURE__ */ jsx("h2", { className: "cv-settings-page-title", id: titleId, tabIndex: -1, ref: heading, children: title }),
+          intro ? /* @__PURE__ */ 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__ */ jsxs(SettingsPage, { title: page.title, intro: page.intro, onBack, children: [
+    list.length > 0 ? /* @__PURE__ */ jsx(
+      ChoiceList,
+      {
+        label: page.title,
+        choices,
+        value: current ?? SYSTEM_DEFAULT,
+        onSelect: (v) => void apply(v === SYSTEM_DEFAULT ? null : v)
+      }
+    ) : /* @__PURE__ */ jsx("p", { className: "cv-settings-page-empty", children: page.empty }),
+    kind === "output" ? /* @__PURE__ */ jsx(SpeakerTest, { sinkId: devices.currentOutputId }) : null
+  ] });
+}
+function SpeakerTest({ sinkId }) {
+  const [testing, setTesting] = useState(false);
+  const tone = useRef(null);
+  const timer = useRef(null);
+  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__ */ jsxs("button", { type: "button", className: "cv-btn cv-settings-test", onClick: test, disabled: testing, children: [
+    /* @__PURE__ */ 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 noSubscribe2 = () => () => {
+};
+var noSettings2 = () => null;
+function useRingtoneSettings(store) {
+  const settings = useSyncExternalStore(store?.subscribe ?? noSubscribe2, store?.getSettings ?? noSettings2);
+  const [failed, setFailed] = useState(false);
+  const load = useCallback(() => {
+    if (!store) return () => {
+    };
+    let live = true;
+    setFailed(false);
+    void store.refresh().then(() => {
+      if (live) setFailed(store.getSettings() === null);
+    });
+    return () => {
+      live = false;
+    };
+  }, [store]);
+  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] = useState(null);
+  const [error, setError] = useState(null);
+  const current = useRef(null);
+  const generation = useRef(0);
+  const stop = useCallback(() => {
+    generation.current += 1;
+    const c = current.current;
+    current.current = null;
+    if (c?.timer) clearTimeout(c.timer);
+    c?.tone?.stop();
+    setPlaying(null);
+  }, []);
+  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] = useState(void 0);
+  const [error, setError] = 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 = useRef(settings);
+  latest.current = settings;
+  const settle = useRef(null);
+  const { stop: stopPreview } = preview;
+  useEffect(() => softphone.on("incomingCall" /* IncomingCall */, stopPreview), [softphone, stopPreview]);
+  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__ */ 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__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          ChoiceList,
+          {
+            label: "Tono de llamada",
+            choices: choicesFor(settings, preview.playing),
+            value: pending !== void 0 ? pending : currentValue(settings),
+            onSelect,
+            onReselect
+          }
+        ),
+        error ?? preview.error ? /* @__PURE__ */ jsx("p", { className: "cv-settings-error", role: "alert", children: error ?? preview.error }) : null
+      ] }) : failed ? /* @__PURE__ */ jsxs("div", { className: "cv-empty", children: [
+        /* @__PURE__ */ jsx("p", { className: "cv-empty-title", children: "No se pudieron cargar los tonos." }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "cv-btn cv-settings-retry", onClick: onRetry, children: "Reintentar" })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "cv-empty", role: "status", children: [
+        /* @__PURE__ */ jsx(LoaderCircle, { className: "cv-empty-spinner", size: 18, "aria-hidden": true }),
+        /* @__PURE__ */ 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__ */ jsxs("span", { className: "cv-choice-playing", children: [
+    /* @__PURE__ */ jsx(Volume2, { size: 15, "aria-hidden": true }),
+    /* @__PURE__ */ 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 = useRef(null);
+  const busy = useRef(false);
+  const on = useRef(handlers);
+  on.current = handlers;
+  const [save] = 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;
+}
+var ORG_DEFAULT2 = "";
+var KEYBOARD_SETTLE_MS2 = 800;
+function OutboundNumberPage({
+  store,
+  settings,
+  onBack
+}) {
+  const formatIntl2 = useIntlFormatter();
+  const current = numberName(effectiveNumber(settings), formatIntl2);
+  const change = useOutboundNumberChange(store, settings, current);
+  const [pending, setPending] = useState(void 0);
+  const settle = useRef(null);
+  const choose = useRef(change.choose);
+  choose.current = change.choose;
+  useEffect(
+    () => () => {
+      if (settle.current) clearTimeout(settle.current);
+    },
+    []
+  );
+  const notice = useRef(null);
+  const apply = async (value) => {
+    setPending(value);
+    const applied = await choose.current(value || null);
+    setPending(void 0);
+    if (!applied) requestAnimationFrame(() => notice.current?.scrollIntoView?.({ block: "nearest" }));
+  };
+  const onSelect = (value, via) => {
+    if (settle.current) clearTimeout(settle.current);
+    settle.current = null;
+    if (via === "pointer") {
+      void apply(value);
+      return;
+    }
+    setPending(value);
+    settle.current = setTimeout(() => {
+      settle.current = null;
+      void apply(value);
+    }, KEYBOARD_SETTLE_MS2);
+  };
+  return /* @__PURE__ */ jsxs(
+    SettingsPage,
+    {
+      title: "N\xFAmero de salida",
+      intro: "El n\xFAmero que ve la persona a la que llamas. Es el mismo en todos tus dispositivos y tambi\xE9n puedes cambiarlo desde el teclado.",
+      onBack,
+      children: [
+        change.message ? /* @__PURE__ */ jsx("p", { className: "cv-settings-notice", role: "status", "data-kind": change.isError ? "error" : "info", ref: notice, children: change.message }) : null,
+        /* @__PURE__ */ jsx(
+          ChoiceList,
+          {
+            label: "N\xFAmero de salida",
+            choices: choicesFor2(settings, formatIntl2, change.busy ? pending : void 0),
+            value: pending ?? currentValue2(settings),
+            onSelect,
+            disabled: change.locked
+          }
+        )
+      ]
+    }
+  );
+}
+function currentValue2(settings) {
+  return settings.mine && settings.numbers.some((n) => n.id === settings.mine) ? settings.mine : ORG_DEFAULT2;
+}
+function choicesFor2(settings, formatIntl2, applying) {
+  const orgDefault = settings.numbers.find((n) => n.id === settings.orgDefault);
+  const spinner = (value) => applying === value ? /* @__PURE__ */ jsxs("span", { className: "cv-choice-applying", children: [
+    /* @__PURE__ */ jsx(LoaderCircle, { size: 15, className: "cv-choice-applying-icon", "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "cv-sr-only", children: "Aplicando" })
+  ] }) : void 0;
+  return [
+    {
+      value: ORG_DEFAULT2,
+      label: "Por defecto de la organizaci\xF3n",
+      sub: orgDefault ? numberName(orgDefault, formatIntl2) : "Sin n\xFAmero por defecto",
+      trailing: spinner(ORG_DEFAULT2)
+    },
+    ...settings.numbers.map((n) => {
+      const kind = KIND_TAG[n.kind];
+      return {
+        value: n.id,
+        label: numberName(n, formatIntl2),
+        ...n.label ? { sub: formatIntl2(`+${n.number}`) } : {},
+        ...kind ? { tag: kind.tag, hint: kind.hint } : {},
+        trailing: spinner(n.id)
+      };
+    })
+  ];
+}
+function outboundSummary(settings, formatIntl2) {
+  const effective = effectiveNumber(settings);
+  const name = numberName(effective, formatIntl2);
+  return settings.mine || !effective ? name : `${name} \xB7 organizaci\xF3n`;
+}
 function SettingsTab() {
-  return /* @__PURE__ */ jsx("div", { className: "cv-view cv-settings", children: /* @__PURE__ */ jsxs("div", { className: "cv-settings-body", children: [
-    /* @__PURE__ */ jsx(SettingsSection, { title: "Dispositivos", children: /* @__PURE__ */ jsx(DevicePickers, {}) }),
-    /* @__PURE__ */ 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 outStore = outboundNumberStore(softphone);
+  const outbound = useOutboundNumbers(outStore).settings;
+  const formatIntl2 = useIntlFormatter();
+  const [page, setPage] = useState(null);
+  const list = useRef(null);
+  const rows = useRef({});
+  const returnTo = useRef(null);
+  useEffect(() => {
+    void softphone.audio.refresh();
+  }, [softphone]);
+  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__ */ jsxs("div", { className: "cv-view cv-settings", children: [
+    /* @__PURE__ */ jsxs("div", { className: "cv-settings-body", ref: list, children: [
+      store ? /* @__PURE__ */ jsx(SettingsSection, { title: "Llamadas entrantes", children: /* @__PURE__ */ jsx(
+        SettingsNavRow,
+        {
+          icon: Music,
+          title: "Tono de llamada",
+          value: ringtoneSummary(ringtone.settings, ringtone.failed),
+          onOpen: open("tone"),
+          rowRef: rowRef("tone")
+        }
+      ) }) : null,
+      outStore && outbound && outbound.numbers.length > 1 ? /* @__PURE__ */ jsx(SettingsSection, { title: "Llamadas salientes", children: /* @__PURE__ */ jsx(
+        SettingsNavRow,
+        {
+          icon: PhoneOutgoing,
+          title: "N\xFAmero de salida",
+          value: outboundSummary(outbound, formatIntl2),
+          onOpen: open("outbound"),
+          rowRef: rowRef("outbound")
+        }
+      ) }) : null,
+      /* @__PURE__ */ jsxs(SettingsSection, { title: "Dispositivos", children: [
+        /* @__PURE__ */ jsx(
+          SettingsNavRow,
+          {
+            icon: Mic,
+            title: "Micr\xF3fono",
+            value: deviceSummary("input", devices.inputs, devices.currentInputId),
+            onOpen: open("input"),
+            rowRef: rowRef("input")
+          }
+        ),
+        devices.canSelectOutput ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(
+      RingtonePage,
+      {
+        store,
+        settings: ringtone.settings,
+        failed: ringtone.failed,
+        onRetry: ringtone.retry,
+        onBack: back
+      }
+    ) : page === "outbound" && outStore && outbound ? /* @__PURE__ */ jsx(OutboundNumberPage, { store: outStore, settings: outbound, onBack: back }) : page !== null && page !== "tone" && page !== "outbound" ? /* @__PURE__ */ jsx(DevicePage, { kind: page, onBack: back }) : null
+  ] });
 }
 function useMicPermission() {
   const [state, setState] = useState("checking");
@@ -2406,14 +3794,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();
@@ -2444,6 +3847,7 @@ function useCallAudio(enabled) {
           stopTone();
           remote.current?.detach();
           if (wasConnected && (reason === "local" || reason === "remote")) playCallEndedTone();
+          refreshRingtone();
         })
       );
     };
@@ -2461,6 +3865,8 @@ function useCallAudio(enabled) {
       offIncoming();
       offActive();
       offDeviceChange();
+      offLeader();
+      ringtones?.wantAudio(false);
       for (const off of perCall) off();
       stopTone();
       remote.current?.destroy();
@@ -2635,6 +4041,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:
@@ -2650,6 +4057,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:
@@ -2663,6 +4071,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:
   (**
@@ -2673,6 +4082,6 @@ lucide-react/dist/esm/lucide-react.js:
    *)
 */
 
-export { CallScreen, ContactsTab, Dialpad, HistoryTab, MicPermissionGate, SoftphoneWidget };
+export { CallScreen, ContactsTab, Dialpad, HistoryTab, MicPermissionGate, SoftphoneWidget, previewRingtone };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map