@coventia/softphone 0.2.1 → 0.3.0

package/dist/ui/index.js

@@ -1,7 +1,7 @@
 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 { 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 +89,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 +211,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 +343,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" }],
@@ -567,6 +595,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 +690,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 +851,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 +864,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 {
       }
     }
@@ -2164,6 +2377,110 @@ function HistoryTab({ source }) {
     selected ? /* @__PURE__ */ jsx(HistoryDetail, { entry: selected, onBack: () => setSelected(null) }) : null
   ] });
 }
+
+// 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
@@ -2173,11 +2490,527 @@ 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
+}) {
+  const name = useId();
+  const pointer = useRef(false);
+  return /* @__PURE__ */ jsx("div", { className: "cv-choices", role: "radiogroup", "aria-label": label, children: choices.map((c) => {
+    const checked = c.value === value;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "cv-choice",
+        "data-checked": checked || 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;
+                onSelect(c.value, via);
+              },
+              onClick: () => {
+                if (c.value === value) {
+                  pointer.current = false;
+                  onReselect?.(c.value);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "cv-choice-text", children: [
+            /* @__PURE__ */ jsx("span", { className: "cv-choice-label", children: c.label }),
+            c.sub ? /* @__PURE__ */ jsx("span", { className: "cv-choice-sub", children: c.sub }) : 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 noSubscribe = () => () => {
+};
+var noSettings = () => null;
+function useRingtoneSettings(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 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;
+}
 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 [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,
+      /* @__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 !== null && page !== "tone" ? /* @__PURE__ */ jsx(DevicePage, { kind: page, onBack: back }) : null
+  ] });
 }
 function useMicPermission() {
   const [state, setState] = useState("checking");
@@ -2406,14 +3239,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 +3292,7 @@ function useCallAudio(enabled) {
           stopTone();
           remote.current?.detach();
           if (wasConnected && (reason === "local" || reason === "remote")) playCallEndedTone();
+          refreshRingtone();
         })
       );
     };
@@ -2461,6 +3310,8 @@ function useCallAudio(enabled) {
       offIncoming();
       offActive();
       offDeviceChange();
+      offLeader();
+      ringtones?.wantAudio(false);
       for (const off of perCall) off();
       stopTone();
       remote.current?.destroy();
@@ -2635,6 +3486,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 +3502,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 +3516,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 +3527,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