@coventia/softphone 0.3.0 → 0.4.0

package/dist/ui/index.js

@@ -1,6 +1,7 @@
 import { isWebRtcSupported } from '../chunk-KAXEMJ7E.js';
 import { useSoftphone, useSoftphoneState, useCall, usePresence, useActiveCall, useIsLeader, useLastError, useDevices } from '../chunk-UHNLEBBO.js';
 import '../chunk-7R6LOOAI.js';
+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';
 
@@ -367,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 {
@@ -418,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;
@@ -452,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",
@@ -1018,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;
@@ -1037,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);
@@ -1052,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",
         {
@@ -1078,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 })
@@ -1502,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";
@@ -1712,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: ":" }),
@@ -2127,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(() => {
@@ -2148,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;
@@ -2184,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(
@@ -2379,14 +2820,14 @@ function HistoryTab({ source }) {
 }
 
 // src/ui/audio/ringtone-store.ts
-var stores = /* @__PURE__ */ new WeakMap();
+var stores2 = /* @__PURE__ */ new WeakMap();
 function ringtoneStore(softphone) {
   const source = softphone.sources?.ringtones;
   if (!source) return null;
-  let store = stores.get(softphone);
+  let store = stores2.get(softphone);
   if (!store) {
     store = createRingtoneStore(source);
-    stores.set(softphone, store);
+    stores2.set(softphone, store);
   }
   return store;
 }
@@ -2512,17 +2953,19 @@ function ChoiceList({
   choices,
   value,
   onSelect,
-  onReselect
+  onReselect,
+  disabled = false
 }) {
   const name = useId();
   const pointer = useRef(false);
-  return /* @__PURE__ */ jsx("div", { className: "cv-choices", role: "radiogroup", "aria-label": label, children: choices.map((c) => {
+  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;
         },
@@ -2538,19 +2981,23 @@ function ChoiceList({
               onChange: () => {
                 const via = pointer.current ? "pointer" : "keyboard";
                 pointer.current = false;
-                onSelect(c.value, via);
+                if (!disabled) onSelect(c.value, via);
               },
               onClick: () => {
                 if (c.value === value) {
                   pointer.current = false;
-                  onReselect?.(c.value);
+                  if (!disabled) 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.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 })
@@ -2712,11 +3159,11 @@ function previewRingtone(ringtone, options = {}) {
 }
 
 // src/ui/views/settings/ringtone-state.ts
-var noSubscribe = () => () => {
+var noSubscribe2 = () => () => {
 };
-var noSettings = () => null;
+var noSettings2 = () => null;
 function useRingtoneSettings(store) {
-  const settings = useSyncExternalStore(store?.subscribe ?? noSubscribe, store?.getSettings ?? noSettings);
+  const settings = useSyncExternalStore(store?.subscribe ?? noSubscribe2, store?.getSettings ?? noSettings2);
   const [failed, setFailed] = useState(false);
   const load = useCallback(() => {
     if (!store) return () => {
@@ -2917,11 +3364,109 @@ function useSerialSave(store, handlers) {
   });
   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() {
   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({});
@@ -2956,6 +3501,16 @@ function SettingsTab() {
           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,
@@ -3009,7 +3564,7 @@ function SettingsTab() {
         onRetry: ringtone.retry,
         onBack: back
       }
-    ) : page !== null && page !== "tone" ? /* @__PURE__ */ jsx(DevicePage, { kind: page, onBack: back }) : null
+    ) : 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() {