@bravophone/webphone 0.1.0

package/dist/bravophone.js

@@ -0,0 +1,917 @@
+const K = 'stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"', be = `<svg viewBox="0 0 24 24" fill="none" ${K} aria-hidden="true">
+  <path class="bp-i-body" d="M15.6 12.8a11 11 0 0 1-4.4-4.4l1-1a1.6 1.6 0 0 0 .3-1.7c-.2-.7-.4-1.4-.5-2.2A1.6 1.6 0 0 0 10.4 2H7.9a1.6 1.6 0 0 0-1.6 1.8 15.8 15.8 0 0 0 2.4 6.9 15.6 15.6 0 0 0 4.8 4.8 15.8 15.8 0 0 0 6.9 2.4 1.6 1.6 0 0 0 1.7-1.6v-2.5a1.6 1.6 0 0 0-1.4-1.6c-.8-.1-1.5-.3-2.2-.5a1.6 1.6 0 0 0-1.7.4z"/>
+  <path class="bp-i-wave bp-i-wave-1" d="M14.5 6.2a4 4 0 0 1 3.3 3.3"/>
+  <path class="bp-i-wave bp-i-wave-2" d="M14.1 2.6a7.6 7.6 0 0 1 7.3 7.3"/>
+</svg>`, ue = `<svg viewBox="0 0 24 24" fill="none" ${K} aria-hidden="true">
+  <path class="bp-i-bar bp-i-bar-1" d="M4 10v4"/>
+  <path class="bp-i-bar bp-i-bar-2" d="M8.7 6.5v11"/>
+  <path class="bp-i-bar bp-i-bar-3" d="M12 3.5v17"/>
+  <path class="bp-i-bar bp-i-bar-4" d="M15.3 6.5v11"/>
+  <path class="bp-i-bar bp-i-bar-5" d="M20 10v4"/>
+</svg>`, ge = `<svg viewBox="0 0 24 24" fill="none" ${K} aria-hidden="true">
+  <path class="bp-i-body" d="M4 13v-1a8 8 0 0 1 16 0v1"/>
+  <path class="bp-i-body" d="M20 14.5v2a3.5 3.5 0 0 1-3.5 3.5H13"/>
+  <rect class="bp-i-cup" x="1.6" y="12.6" width="4.4" height="6.4" rx="1.8"/>
+  <rect class="bp-i-cup" x="18" y="12.6" width="4.4" height="6.4" rx="1.8"/>
+</svg>`, me = `<svg viewBox="0 0 24 24" fill="none" ${K} aria-hidden="true">
+  <path class="bp-i-body" d="M21 11.5a8.4 8.4 0 0 1-9 8.4 9 9 0 0 1-2.9-.5L3 21.5l1.5-4.6A8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4z"/>
+  <path class="bp-i-hand" d="M14.6 14.4a6.5 6.5 0 0 1-3.2-3.2l.7-.7a1 1 0 0 0 .2-1.1 6 6 0 0 1-.3-1.2 1 1 0 0 0-1-.8H9.6a1 1 0 0 0-1 1.1 9.6 9.6 0 0 0 4.8 7.2 1 1 0 0 0 1.4-.9v-1.2a1 1 0 0 0-.8-1z"/>
+</svg>`, fe = `<svg viewBox="0 0 10 16" width="10" height="16" fill="currentColor" aria-hidden="true">
+  <circle cx="2.6" cy="2.6" r="1.35"/><circle cx="7.4" cy="2.6" r="1.35"/>
+  <circle cx="2.6" cy="8" r="1.35"/><circle cx="7.4" cy="8" r="1.35"/>
+  <circle cx="2.6" cy="13.4" r="1.35"/><circle cx="7.4" cy="13.4" r="1.35"/>
+</svg>`, j = {
+  "phone-waves": be,
+  waveform: ue,
+  headset: ge,
+  "chat-phone": me
+}, Q = "phone-waves", xe = `
+.bp-launcher-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
+
+/* Ponto de status no canto do ícone — verde registrado, cinza sem linha. */
+.bp-launcher-icon::after {
+  content: '';
+  position: absolute;
+  right: -1px; bottom: -1px;
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: #94a3b8;
+  box-shadow: 0 0 0 2px #6c5ce7;
+  transition: background .2s ease;
+}
+.bp-launcher[data-state="ready"] .bp-launcher-icon::after   { background: #22c55e; }
+.bp-launcher[data-state="error"] .bp-launcher-icon::after   { background: #ef4444; }
+/* Tocando ou em chamada, o ponto sai: a animacao ja comunica, e ele sujaria. */
+.bp-launcher[data-state="ringing"] .bp-launcher-icon::after,
+.bp-launcher[data-state="incall"] .bp-launcher-icon::after  { display: none; }
+
+/* --- ondas do handset: crescem de dentro para fora --- */
+.bp-i-wave { opacity: .45; transform-origin: 12px 12px; }
+.bp-launcher[data-state="ready"] .bp-i-wave { opacity: .75; }
+@keyframes bp-i-emit {
+  0%   { opacity: 0; transform: scale(.6); }
+  40%  { opacity: 1; }
+  100% { opacity: 0; transform: scale(1.15); }
+}
+.bp-launcher[data-state="ringing"] .bp-i-wave,
+.bp-launcher[data-state="incall"] .bp-i-wave {
+  animation: bp-i-emit 1.4s ease-out infinite;
+}
+.bp-launcher[data-state="ringing"] .bp-i-wave-2,
+.bp-launcher[data-state="incall"] .bp-i-wave-2 { animation-delay: .35s; }
+
+/* --- handset balanca quando toca, como um telefone de verdade --- */
+@keyframes bp-i-shake {
+  0%, 100%     { transform: rotate(0deg); }
+  15%, 45%     { transform: rotate(-13deg); }
+  30%, 60%     { transform: rotate(13deg); }
+  75%          { transform: rotate(0deg); }
+}
+.bp-launcher[data-state="ringing"] .bp-i-body,
+.bp-launcher[data-state="ringing"] .bp-i-hand {
+  transform-origin: 12px 12px;
+  animation: bp-i-shake 1s ease-in-out infinite;
+}
+
+/* --- equalizador: barras dancam so em chamada --- */
+.bp-i-bar { transform-origin: center; transition: transform .25s ease; }
+.bp-launcher[data-state="incall"] .bp-i-bar {
+  animation: bp-i-dance .9s ease-in-out infinite;
+}
+@keyframes bp-i-dance {
+  0%, 100% { transform: scaleY(.45); }
+  50%      { transform: scaleY(1); }
+}
+.bp-launcher[data-state="incall"] .bp-i-bar-2 { animation-delay: .12s }
+.bp-launcher[data-state="incall"] .bp-i-bar-3 { animation-delay: .24s }
+.bp-launcher[data-state="incall"] .bp-i-bar-4 { animation-delay: .36s }
+.bp-launcher[data-state="incall"] .bp-i-bar-5 { animation-delay: .48s }
+
+/* Hover: o icone da uma leve subida, so para o botao parecer vivo. */
+.bp-launcher:hover .bp-launcher-icon { transform: translateY(-1px); }
+.bp-launcher-icon { transition: transform .16s ease; }
+
+@media (prefers-reduced-motion: reduce) {
+  .bp-i-wave, .bp-i-body, .bp-i-hand, .bp-i-bar { animation: none !important; }
+  .bp-launcher-icon { transition: none; }
+}
+`, we = `
+:host { all: initial; }
+* { box-sizing: border-box; }
+
+.bp-root {
+  position: fixed;
+  z-index: 2147483000;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  background: #1e1e2d;
+  border-radius: 12px;
+  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
+  overflow: hidden;
+  will-change: transform;
+}
+.bp-root[hidden] { display: none !important; }
+.bp-root { transition: left .16s ease, top .16s ease, width .16s ease, height .16s ease; }
+.bp-root.bp-dragging,
+.bp-root.bp-resizing { transition: none; user-select: none; }
+.bp-root.bp-minimized .bp-body,
+.bp-root.bp-minimized /* ---- modo sem moldura (frame:'none', padrao) ----
+   A UI do webphone ocupa 100% da janela. Os controles ficam sobrepostos,
+   invisiveis ate o hover, e nunca empurram nem redimensionam o conteudo. */
+.bp-root.bp-chromeless .bp-header { display: none; }
+.bp-root.bp-chromeless .bp-overlay { display: flex; }
+
+.bp-overlay {
+  position: absolute;
+  top: 6px; right: 6px;
+  display: none;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 8px;
+  background: rgba(10,10,16,.72);
+  backdrop-filter: blur(6px);
+  opacity: 0;
+  transition: opacity .14s ease;
+  z-index: 3;
+  pointer-events: none;
+}
+.bp-root.bp-chromeless:hover .bp-overlay,
+.bp-root.bp-chromeless:focus-within .bp-overlay { opacity: 1; pointer-events: auto; }
+.bp-root.bp-dragging .bp-overlay { opacity: 0; pointer-events: none; }
+.bp-overlay .bp-btn { width: 22px; height: 22px; font-size: 13px; color: #cbd5e1; }
+
+/* Sem barra de titulo o arraste vem de dentro do iframe: o cursor tambem. */
+.bp-root.bp-chromeless.bp-dragging { cursor: grabbing; }
+
+.bp-resize { display: none; }
+.bp-root.bp-minimized { height: auto !important; }
+
+.bp-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 36px;
+  padding: 0 6px 0 12px;
+  background: #15151f;
+  color: #e6e6f0;
+  cursor: grab;
+  flex: 0 0 auto;
+  touch-action: none;
+}
+.bp-header:active { cursor: grabbing; }
+.bp-title {
+  flex: 1 1 auto;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: .3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bp-status {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: #6b7280; flex: 0 0 auto;
+}
+.bp-status[data-state="ready"]    { background: #22c55e; }
+.bp-status[data-state="ringing"]  { background: #f59e0b; animation: bp-pulse 1s infinite; }
+.bp-status[data-state="incall"]   { background: #22c55e; animation: bp-pulse 2s infinite; }
+.bp-status[data-state="error"]    { background: #ef4444; }
+@keyframes bp-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
+
+.bp-btn {
+  width: 24px; height: 24px;
+  display: grid; place-items: center;
+  border: 0; border-radius: 6px;
+  background: transparent; color: #9ca3af;
+  cursor: pointer; font-size: 15px; line-height: 1;
+  flex: 0 0 auto; padding: 0;
+}
+.bp-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
+.bp-btn-close:hover { background: #dc2626; color: #fff; }
+
+.bp-body { flex: 1 1 auto; position: relative; min-height: 0; }
+.bp-frame {
+  width: 100%; height: 100%;
+  border: 0; display: block; background: #1e1e2d;
+}
+/* Durante o arraste o iframe precisa parar de capturar o ponteiro,
+   senão o mousemove é engolido pelo documento interno e o drag "trava". */
+.bp-root.bp-dragging .bp-frame,
+.bp-root.bp-resizing .bp-frame { pointer-events: none; }
+
+/* ---- alcas de redimensionamento (8 bordas/cantos) ----
+   Faixas invisiveis por fora da borda: nao cobrem a UI do webphone e ainda
+   assim dao uma area de clique confortavel. */
+.bp-h {
+  position: absolute;
+  z-index: 4;
+  touch-action: none;
+}
+.bp-h-n { top: -4px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
+.bp-h-s { bottom: -4px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
+.bp-h-w { left: -4px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
+.bp-h-e { right: -4px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
+.bp-h-nw { top: -4px; left: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
+.bp-h-ne { top: -4px; right: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
+.bp-h-sw { bottom: -4px; left: -4px; width: 14px; height: 14px; cursor: nesw-resize; }
+.bp-h-se { bottom: -4px; right: -4px; width: 14px; height: 14px; cursor: nwse-resize; }
+
+/* Marcador visivel so no canto inferior direito, como affordance. */
+.bp-h-se::after {
+  content: ''; position: absolute; right: 3px; bottom: 3px;
+  width: 9px; height: 9px;
+  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.3) 50%);
+}
+
+/* Uma janela docada nao se redimensiona pelas bordas coladas na viewport. */
+.bp-root.bp-docked { border-radius: 0; }
+
+/* ---- previa de encaixe (docking) ----
+   Fantasma que mostra onde a janela vai parar antes de soltar. */
+.bp-preview {
+  position: fixed;
+  z-index: 2147482998;
+  border-radius: 10px;
+  background: rgba(37,99,235,.18);
+  border: 2px solid rgba(96,165,250,.85);
+  box-shadow: 0 0 0 1px rgba(0,0,0,.25), inset 0 0 40px rgba(96,165,250,.15);
+  pointer-events: none;
+  transition: left .12s ease, top .12s ease, width .12s ease, height .12s ease;
+}
+.bp-preview[hidden] { display: none !important; }
+
+.bp-launcher {
+  position: fixed;
+  top: 50%;
+  z-index: 2147482999;
+  display: flex;
+  align-items: center;
+  gap: 0;
+  height: 48px;
+  padding: 0 11px;
+  background: #6c5ce7;
+  color: #fff;
+  border: 0;
+  cursor: pointer;
+  box-shadow: 0 4px 16px rgba(76,58,190,.42), 0 0 0 1px rgba(255,255,255,.08) inset;
+  transition: padding .16s ease, background .16s ease, box-shadow .16s ease;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.bp-launcher[hidden] { display: none !important; }
+
+/* Colada na borda: os cantos arredondados sao so os que ficam para dentro. */
+.bp-launcher[data-side="right"] { border-radius: 14px 0 0 14px; }
+.bp-launcher[data-side="left"]  { border-radius: 0 14px 14px 0; }
+
+.bp-launcher:hover,
+.bp-launcher:focus-visible {
+  background: #5b4bd6;
+  box-shadow: 0 6px 22px rgba(76,58,190,.55), 0 0 0 1px rgba(255,255,255,.12) inset;
+}
+.bp-launcher:focus-visible { outline: 2px solid #c7d2fe; outline-offset: 2px; }
+.bp-launcher.bp-launcher-dragging { cursor: grabbing; transition: none; }
+
+/* Alca de arraste: os pontos ficam sempre com largura fixa e somem por
+   opacidade + margem negativa. Animar a largura cortaria o SVG no meio. */
+.bp-launcher-grip {
+  width: 10px;
+  height: 16px;
+  flex: 0 0 auto;
+  opacity: 0;
+  color: rgba(255,255,255,.9);
+  cursor: grab;
+  transition: opacity .16s ease, margin .16s ease;
+}
+.bp-launcher-grip svg { display: block; }
+.bp-launcher[data-side="right"] .bp-launcher-grip { order: 0; margin-right: -10px; }
+.bp-launcher[data-side="left"] .bp-launcher-grip { order: 2; margin-left: -10px; }
+
+.bp-launcher:hover .bp-launcher-grip,
+.bp-launcher:focus-visible .bp-launcher-grip,
+.bp-launcher.bp-launcher-dragging .bp-launcher-grip { opacity: 1; }
+.bp-launcher[data-side="right"]:hover .bp-launcher-grip,
+.bp-launcher[data-side="right"]:focus-visible .bp-launcher-grip,
+.bp-launcher[data-side="right"].bp-launcher-dragging .bp-launcher-grip { margin-right: 7px; }
+.bp-launcher[data-side="left"]:hover .bp-launcher-grip,
+.bp-launcher[data-side="left"]:focus-visible .bp-launcher-grip,
+.bp-launcher[data-side="left"].bp-launcher-dragging .bp-launcher-grip { margin-left: 7px; }
+
+.bp-launcher-icon {
+  position: relative;
+  order: 1;
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+.bp-launcher-icon svg { width: 100%; height: 100%; display: block; }
+
+.bp-launcher .bp-badge {
+  position: absolute;
+  top: -5px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  background: #ef4444;
+  color: #fff;
+  font: 700 11px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  text-align: center;
+  display: none;
+  box-shadow: 0 0 0 2px #6c5ce7;
+}
+.bp-launcher[data-side="right"] .bp-badge { left: -6px; }
+.bp-launcher[data-side="left"] .bp-badge { right: -6px; }
+.bp-launcher[data-badge]:not([data-badge=""]) .bp-badge { display: block; }
+
+/* Chamada entrante: a aba pulsa para chamar atencao mesmo fechada. */
+@keyframes bp-launcher-ring {
+  0%, 100% { box-shadow: 0 4px 16px rgba(76,58,190,.42); }
+  50% { box-shadow: 0 4px 16px rgba(239,68,68,.75), 0 0 0 4px rgba(239,68,68,.25); }
+}
+.bp-launcher[data-badge]:not([data-badge=""]) { animation: bp-launcher-ring 1.1s infinite; }
+
+@media (prefers-reduced-motion: reduce) {
+  .bp-launcher, .bp-launcher-grip { transition: none; }
+  .bp-launcher[data-badge]:not([data-badge=""]) { animation: none; }
+}
+
+${xe}
+`, pe = "bravophone:widget:geometry", q = 28, J = 32;
+function ye(e) {
+  try {
+    const a = localStorage.getItem(pe);
+    if (!a) return { ...e };
+    const i = JSON.parse(a);
+    return i.dock ? { ...e, ...i, ...F(i.dock, i) } : { ...e, ...i };
+  } catch (a) {
+    return { ...e };
+  }
+}
+function X(e) {
+  try {
+    localStorage.setItem(pe, JSON.stringify(e));
+  } catch (a) {
+  }
+}
+function se(e) {
+  return {
+    minWidth: e.minWidth,
+    minHeight: e.minHeight,
+    // Teto relativo à viewport: numa tela larga o histórico de chamadas pode
+    // usar o espaço que precisa, sem um limite fixo apertando.
+    maxWidth: Math.max(e.minWidth, Math.min(e.maxWidth, window.innerWidth)),
+    maxHeight: Math.max(e.minHeight, Math.min(e.maxHeight, window.innerHeight))
+  };
+}
+function R(e) {
+  const a = Math.max(0, window.innerWidth - e.width), i = Math.max(0, window.innerHeight - 40);
+  return {
+    ...e,
+    x: Math.min(Math.max(0, e.x), a),
+    y: Math.min(Math.max(0, e.y), i)
+  };
+}
+function F(e, a) {
+  const i = window.innerWidth, r = window.innerHeight, o = Math.round(i / 2), s = Math.round(r / 2), u = Math.min(a.width, i);
+  switch (e) {
+    case "left":
+      return { x: 0, y: 0, width: u, height: r };
+    case "right":
+      return { x: i - u, y: 0, width: u, height: r };
+    case "left-half":
+      return { x: 0, y: 0, width: o, height: r };
+    case "right-half":
+      return { x: i - o, y: 0, width: o, height: r };
+    case "top":
+      return { x: a.x, y: 0, width: u, height: s };
+    case "bottom":
+      return { x: a.x, y: r - s, width: u, height: s };
+    case "top-half":
+      return { x: 0, y: 0, width: i, height: s };
+    case "bottom-half":
+      return { x: 0, y: r - s, width: i, height: s };
+    case "max":
+      return { x: 0, y: 0, width: i, height: r };
+    default:
+      return { x: a.x, y: a.y, width: a.width, height: a.height };
+  }
+}
+function ve(e, a, i) {
+  const r = window.innerWidth, o = window.innerHeight, s = e <= q, u = e >= r - q, f = a <= q, t = a >= o - q;
+  return (f || t) && s ? "left-half" : (f || t) && u ? "right-half" : f ? i || "max" : t ? "bottom-half" : s ? "left" : u ? "right" : null;
+}
+function ke({ root: e, handle: a, handles: i, preview: r, geometry: o, limits: s, topDock: u, onChange: f }) {
+  let t = { ...o }, g = null, p = "", d = null, h = null, w = null, y = null;
+  const z = () => {
+    e.style.left = `${t.x}px`, e.style.top = `${t.y}px`, e.style.width = `${t.width}px`, e.style.height = `${t.height}px`, e.classList.toggle("bp-docked", !!t.dock), f == null || f(t);
+  }, C = (n) => {
+    if (r) {
+      if (!n) {
+        r.hidden = !0;
+        return;
+      }
+      r.hidden = !1, r.style.left = `${n.x}px`, r.style.top = `${n.y}px`, r.style.width = `${n.width}px`, r.style.height = `${n.height}px`;
+    }
+  }, D = (n, b) => {
+    const l = se(s);
+    let { x: S, y: m, width: k, height: H } = d;
+    p.includes("e") && (k = d.width + n), p.includes("w") && (k = d.width - n), p.includes("s") && (H = d.height + b), p.includes("n") && (H = d.height - b), k = Math.min(l.maxWidth, Math.max(l.minWidth, k)), H = Math.min(l.maxHeight, Math.max(l.minHeight, H)), p.includes("w") && (S = d.x + (d.width - k)), p.includes("n") && (m = d.y + (d.height - H)), p.includes("e") && Math.abs(S + k - window.innerWidth) <= J && (k = window.innerWidth - S), p.includes("w") && Math.abs(S) <= J && (k += S, S = 0), p.includes("s") && Math.abs(m + H - window.innerHeight) <= J && (H = window.innerHeight - m), p.includes("n") && Math.abs(m) <= J && (H += m, m = 0), t = { ...t, x: S, y: m, width: k, height: H, dock: null }, z();
+  }, $ = (n, b, l, S) => {
+    if (t.dock) {
+      const m = y || { width: s.width, height: s.height }, k = h.x / Math.max(1, t.width);
+      t = { ...t, ...m, dock: null }, h = { x: Math.round(m.width * k), y: Math.min(h.y, 32) }, d = {
+        ...d,
+        x: l - h.x,
+        y: S - h.y,
+        px: d.px + n,
+        py: d.py + b
+      }, n = 0, b = 0;
+    }
+    t = R({ ...t, x: d.x + n, y: d.y + b }), z(), w = ve(l, S, u), C(w ? F(w, t) : null);
+  }, O = () => {
+    w && (y = y || { width: t.width, height: t.height }, t = { ...t, ...F(w, t), dock: w }, z());
+  }, P = (n, b) => (l) => {
+    l.button === 0 && (n === "drag" && l.target.closest(".bp-btn") || (g = n, p = b || "", d = { px: l.clientX, py: l.clientY, ...t }, h = { x: l.clientX - t.x, y: l.clientY - t.y }, t.dock || (y = { width: t.width, height: t.height }), e.classList.add(n === "drag" ? "bp-dragging" : "bp-resizing"), l.currentTarget.setPointerCapture(l.pointerId), l.preventDefault()));
+  }, U = (n) => {
+    if (!g || !d) return;
+    const b = n.clientX - d.px, l = n.clientY - d.py;
+    g === "drag" ? $(b, l, n.clientX, n.clientY) : D(b, l);
+  }, B = (n) => {
+    if (g) {
+      e.classList.remove("bp-dragging", "bp-resizing"), C(null), g === "drag" && O(), g = null, p = "", d = null, w = null;
+      try {
+        n.currentTarget.releasePointerCapture(n.pointerId);
+      } catch (b) {
+      }
+      X(t);
+    }
+  };
+  a.addEventListener("pointerdown", P("drag")), a.addEventListener("pointermove", U), a.addEventListener("pointerup", B), a.addEventListener("pointercancel", B), (i || []).forEach(({ el: n, dir: b }) => {
+    n.addEventListener("pointerdown", P("resize", b)), n.addEventListener("pointermove", U), n.addEventListener("pointerup", B), n.addEventListener("pointercancel", B);
+  });
+  const V = () => {
+    t = t.dock ? { ...t, ...F(t.dock, t) } : R(t), z();
+  };
+  window.addEventListener("resize", V);
+  const G = {
+    start(n) {
+      var b, l;
+      g = "drag", d = { px: n.x, py: n.y, ...t }, h = { x: (b = n.cx) != null ? b : t.width / 2, y: (l = n.cy) != null ? l : 20 }, t.dock || (y = { width: t.width, height: t.height }), e.classList.add("bp-dragging");
+    },
+    move(n) {
+      if (g !== "drag" || !d) return;
+      const b = n.x - d.px, l = n.y - d.py;
+      $(b, l, d.x + b + h.x, d.y + l + h.y);
+    },
+    end() {
+      g === "drag" && (e.classList.remove("bp-dragging"), C(null), O(), g = null, d = null, w = null, X(t));
+    }
+  };
+  return z(), {
+    external: G,
+    get geometry() {
+      return { ...t };
+    },
+    set(n) {
+      const b = se(s), l = { ...t, ...n, dock: null };
+      l.width = Math.min(b.maxWidth, Math.max(b.minWidth, l.width)), l.height = Math.min(b.maxHeight, Math.max(b.minHeight, l.height)), t = R(l), z(), X(t);
+    },
+    /** 'left' | 'right' | 'left-half' | 'right-half' | 'max' | 'float' */
+    dock(n) {
+      if (!n || n === "float") {
+        const b = y || { width: s.width, height: s.height };
+        t = R({ ...t, ...b, dock: null });
+      } else
+        t.dock || (y = { width: t.width, height: t.height }), t = { ...t, ...F(n, t), dock: n };
+      z(), X(t);
+    },
+    destroy() {
+      window.removeEventListener("resize", V);
+    }
+  };
+}
+const de = "bravophone/v1";
+function Me({ frame: e, origin: a, onEvent: i }) {
+  const r = /* @__PURE__ */ new Map();
+  let o = 0, s = !1;
+  const u = [], f = (g) => {
+    var d;
+    if (g.origin !== a || g.source !== e.contentWindow) return;
+    const p = g.data;
+    if (!(!p || p.protocol !== de)) {
+      if (p.type === "ready") {
+        for (s = !0; u.length; ) u.shift()();
+        i == null || i("ready", (d = p.payload) != null ? d : {});
+        return;
+      }
+      if (p.type === "reply") {
+        const h = r.get(p.id);
+        if (!h) return;
+        r.delete(p.id), clearTimeout(h.timer), p.error ? h.reject(new Error(p.error)) : h.resolve(p.payload);
+        return;
+      }
+      p.type === "event" && (i == null || i(p.name, p.payload));
+    }
+  };
+  window.addEventListener("message", f);
+  function t(g, p, { timeout: d = 15e3 } = {}) {
+    return new Promise((h, w) => {
+      const y = `${Date.now()}-${++o}`, z = () => {
+        var D;
+        const C = setTimeout(() => {
+          r.delete(y), w(new Error(`Bravophone: timeout no comando "${g}"`));
+        }, d);
+        r.set(y, { resolve: h, reject: w, timer: C }), (D = e.contentWindow) == null || D.postMessage(
+          { protocol: de, type: "command", id: y, command: g, payload: p },
+          a
+        );
+      };
+      s ? z() : u.push(z);
+    });
+  }
+  return {
+    call: t,
+    get ready() {
+      return s;
+    },
+    destroy() {
+      window.removeEventListener("message", f), r.forEach(({ reject: g, timer: p }) => {
+        clearTimeout(p), g(new Error("Bravophone: widget destruído"));
+      }), r.clear();
+    }
+  };
+}
+const he = "bravophone:launcher", ze = 4, ee = 8;
+function Le(e) {
+  try {
+    const a = localStorage.getItem(he);
+    return a ? { ...e, ...JSON.parse(a) } : { ...e };
+  } catch (a) {
+    return { ...e };
+  }
+}
+function te(e) {
+  try {
+    localStorage.setItem(he, JSON.stringify(e));
+  } catch (a) {
+  }
+}
+function Y(e, a) {
+  const i = Math.max(ee, window.innerHeight - a - ee);
+  return Math.min(Math.max(ee, e), i);
+}
+function Ee({ el: e, side: a, y: i, onOpen: r }) {
+  let o = { side: a, y: Y(i, e.offsetHeight || 48) }, s = null, u = !1;
+  const f = () => {
+    e.dataset.side = o.side, e.style.top = `${o.y}px`, e.style.right = o.side === "right" ? "0px" : "auto", e.style.left = o.side === "left" ? "0px" : "auto";
+  }, t = (h) => {
+    h.button === 0 && (s = { py: h.clientY, y: o.y }, u = !1, e.setPointerCapture(h.pointerId));
+  }, g = (h) => {
+    if (!s) return;
+    const w = h.clientY - s.py;
+    !u && Math.abs(w) < ze || (u || (u = !0, e.classList.add("bp-launcher-dragging")), o.y = Y(s.y + w, e.offsetHeight), f());
+  }, p = (h) => {
+    if (!s) return;
+    const w = u;
+    s = null, u = !1, e.classList.remove("bp-launcher-dragging");
+    try {
+      e.releasePointerCapture(h.pointerId);
+    } catch (y) {
+    }
+    w ? te(o) : r == null || r();
+  };
+  e.addEventListener("pointerdown", t), e.addEventListener("pointermove", g), e.addEventListener("pointerup", p), e.addEventListener("pointercancel", p), e.addEventListener("keydown", (h) => {
+    (h.key === "Enter" || h.key === " ") && (h.preventDefault(), r == null || r());
+  });
+  const d = () => {
+    o.y = Y(o.y, e.offsetHeight), f();
+  };
+  return window.addEventListener("resize", d), f(), {
+    get state() {
+      return { ...o };
+    },
+    setSide(h) {
+      o.side = h, f(), te(o);
+    },
+    moveTo(h) {
+      o.y = Y(h, e.offsetHeight), f(), te(o);
+    },
+    destroy() {
+      window.removeEventListener("resize", d);
+    }
+  };
+}
+const ce = {
+  // 380x640 é a geometria da janela nativa da extensão — o layout do
+  // webphone é calibrado para ela, então é o ponto de partida aqui também.
+  width: 380,
+  height: 640,
+  minWidth: 320,
+  minHeight: 420,
+  // Tetos generosos: o limite real é a viewport (ver limitsFor). O histórico
+  // de chamadas fica ilegível espremido em 380px, então dá para alargar muito.
+  maxWidth: 1600,
+  maxHeight: 1400,
+  margin: 24
+};
+function v(e, a = {}, i = []) {
+  const r = document.createElement(e);
+  for (const [o, s] of Object.entries(a))
+    o === "class" ? r.className = s : o === "text" ? r.textContent = s : s != null && r.setAttribute(o, s);
+  return i.forEach((o) => r.appendChild(o)), r;
+}
+function Se(e) {
+  const {
+    hostUrl: a,
+    token: i,
+    position: r = "bottom-right",
+    open: o = !1,
+    launcher: s = !0,
+    title: u = "BRAVOPHONE",
+    // 'none' preserva 100% da UI do webphone: sem barra de titulo, o arraste
+    // vem de dentro do iframe. 'bar' adiciona a barra com titulo e controles.
+    frame: f = "none",
+    // O que arrastar até a borda de cima faz. 'max' é o gesto universal;
+    // troque para 'top-half' se preferir as metades verticais no topo.
+    dockTop: t = "max",
+    // Lado da viewport em que a aba de abertura fica colada.
+    launcherSide: g = "right",
+    // Desenho da aba: 'phone-waves' | 'waveform' | 'headset' | 'chat-phone'
+    launcherIcon: p = Q,
+    emit: d
+  } = e, h = new URL(a), w = h.origin, y = v("div", { "data-bravophone": "root" });
+  y.style.cssText = "all:initial;position:static";
+  const z = y.attachShadow({ mode: "open" });
+  z.appendChild(v("style", { text: we }));
+  const C = (() => {
+    var oe;
+    const { width: c, height: E, margin: I } = ce, N = window.innerWidth - c - I, ie = window.innerHeight - E - I, re = {
+      "bottom-right": { x: N, y: ie },
+      "bottom-left": { x: I, y: ie },
+      "top-right": { x: N, y: I },
+      "top-left": { x: I, y: I }
+    };
+    return R({ ...(oe = re[r]) != null ? oe : re["bottom-right"], width: c, height: E });
+  })(), D = R(ye(C)), $ = v("span", { class: "bp-status", "data-state": "connecting" }), O = v("button", { class: "bp-btn bp-btn-min", title: "Minimizar", text: "—" }), P = v("button", { class: "bp-btn bp-btn-close", title: "Fechar", text: "×" }), U = v("div", { class: "bp-header" }, [
+    $,
+    v("span", { class: "bp-title", text: u }),
+    O,
+    P
+  ]), B = v("iframe", {
+    class: "bp-frame",
+    src: He(h, { token: i, embed: "1", parent: location.origin }),
+    allow: "microphone; autoplay; clipboard-write; speaker-selection",
+    title: "Webphone BRAVOPHONE"
+  }), G = ["n", "s", "w", "e", "nw", "ne", "sw", "se"].map((c) => ({
+    el: v("div", { class: `bp-h bp-h-${c}` }),
+    dir: c
+  })), n = v("div", { class: "bp-preview" });
+  n.hidden = !0;
+  const b = v("button", { class: "bp-btn bp-btn-close", title: "Fechar", text: "×" }), l = v("div", { class: "bp-overlay" }, [b]), S = v("div", { class: "bp-body" }, [B, l]), m = v("div", { class: "bp-root" }, [U, S, ...G.map((c) => c.el)]);
+  f !== "bar" && m.classList.add("bp-chromeless"), m.hidden = !o;
+  const k = v("span", { class: "bp-launcher-icon" });
+  k.innerHTML = j[p] || j[Q];
+  const H = v("span", { class: "bp-launcher-grip", "aria-hidden": "true" });
+  H.innerHTML = fe;
+  const L = v("div", {
+    class: "bp-launcher",
+    role: "button",
+    tabindex: "0",
+    title: "Abrir webphone",
+    "aria-label": "Abrir webphone"
+  }, [
+    H,
+    k,
+    v("span", { class: "bp-badge" })
+  ]);
+  L.dataset.state = "connecting", L.hidden = !s || o, z.append(n, m, L), document.body.appendChild(y);
+  const ae = Le({
+    side: g,
+    y: Math.round(window.innerHeight / 2 - 24)
+  }), ne = Ee({
+    el: L,
+    side: ae.side,
+    y: Y(ae.y, 48),
+    onOpen: () => T.show()
+  }), W = ke({
+    root: m,
+    handle: U,
+    handles: G,
+    preview: n,
+    geometry: D,
+    limits: ce,
+    topDock: t,
+    onChange: (c) => d("resize", { width: c.width, height: c.height, dock: c.dock || null })
+  }), Z = Me({
+    frame: B,
+    origin: w,
+    onEvent: (c, E) => {
+      var I;
+      if (c === "ready" && ($.dataset.state = "ready", L.dataset.state = "ready", i && Z.call("auth", { token: i }).catch(() => {
+      })), c === "state") {
+        const N = (I = E == null ? void 0 : E.state) != null ? I : "ready";
+        $.dataset.state = N, L.dataset.state = N;
+      }
+      if (c === "call:incoming" && (T.show(), L.dataset.badge = "1", L.dataset.state = "ringing"), c === "call:answered" && (L.dataset.state = "incall"), (c === "call:ended" || c === "call:failed") && (delete L.dataset.badge, L.dataset.state = "ready"), c === "drag:start") {
+        W.external.start(E);
+        return;
+      }
+      if (c === "drag:move") {
+        W.external.move(E);
+        return;
+      }
+      if (c === "drag:end") {
+        W.external.end();
+        return;
+      }
+      d(c, E);
+    }
+  });
+  let _ = !1;
+  const T = {
+    el: y,
+    bridge: Z,
+    show() {
+      m.hidden = !1, L.hidden = !0, d("open");
+    },
+    hide() {
+      m.hidden = !0, s && (L.hidden = !1), d("close");
+    },
+    toggle() {
+      m.hidden ? T.show() : T.hide();
+    },
+    get isOpen() {
+      return !m.hidden;
+    },
+    minimize(c) {
+      if (f !== "bar") {
+        T.hide();
+        return;
+      }
+      _ = c != null ? c : !_, m.classList.toggle("bp-minimized", _), O.textContent = _ ? "▢" : "—";
+    },
+    move(c, E) {
+      W.set({ x: c, y: E });
+    },
+    resize(c, E) {
+      W.set({ width: c, height: E });
+    },
+    dock(c) {
+      W.dock(c);
+    },
+    setLauncherSide(c) {
+      ne.setSide(c);
+    },
+    setLauncherIcon(c) {
+      k.innerHTML = j[c] || j[Q];
+    },
+    get geometry() {
+      return W.geometry;
+    },
+    destroy() {
+      Z.destroy(), W.destroy(), ne.destroy(), n.remove(), y.remove();
+    }
+  };
+  return P.addEventListener("click", () => T.hide()), O.addEventListener("click", () => T.minimize()), b.addEventListener("click", () => T.hide()), T;
+}
+function He(e, a) {
+  const i = new URL(e.href);
+  for (const [r, o] of Object.entries(a))
+    o != null && o !== "" && i.searchParams.set(r, o);
+  return a.token && (i.searchParams.delete("token"), i.hash = `token=${encodeURIComponent(a.token)}`), i.href;
+}
+const Te = "https://webphone.bravophone.com/embed/";
+let M = null;
+const A = /* @__PURE__ */ new Map();
+function Ie(e, a) {
+  var i, r;
+  (i = A.get(e)) == null || i.forEach((o) => {
+    try {
+      o(a);
+    } catch (s) {
+      console.error("[Bravophone] listener falhou:", s);
+    }
+  }), (r = A.get("*")) == null || r.forEach((o) => {
+    try {
+      o({ event: e, payload: a });
+    } catch (s) {
+      console.error("[Bravophone] listener falhou:", s);
+    }
+  });
+}
+function x() {
+  if (!M) throw new Error("Bravophone: chame Bravophone.init() antes.");
+  return M;
+}
+const le = {
+  /**
+   * Monta o webphone na página.
+   * @param {object} opts
+   * @param {string} [opts.hostUrl]  Origem do webphone hospedado.
+   * @param {string} [opts.token]    Token de sessão do usuário (SSO do integrador).
+   * @param {'bottom-right'|'bottom-left'|'top-right'|'top-left'} [opts.position]
+   * @param {boolean} [opts.open]     Abrir já visível (padrão: false, só o launcher).
+   * @param {boolean} [opts.launcher] Exibir o botão flutuante (padrão: true).
+   */
+  init(e = {}) {
+    if (M) return M;
+    if (typeof window == "undefined" || !document.body)
+      throw new Error("Bravophone: init() precisa rodar no browser, após o <body> existir.");
+    return location.protocol !== "https:" && location.hostname !== "localhost" && console.warn("[Bravophone] Contexto inseguro: o microfone exige HTTPS ou localhost."), M = Se({ hostUrl: Te, ...e, emit: Ie }), M;
+  },
+  // ---- Controle da janela ----
+  show() {
+    x().show();
+  },
+  hide() {
+    x().hide();
+  },
+  toggle() {
+    x().toggle();
+  },
+  minimize(e) {
+    x().minimize(e);
+  },
+  move(e, a) {
+    x().move(e, a);
+  },
+  resize(e, a) {
+    x().resize(e, a);
+  },
+  /** 'left' | 'right' | 'left-half' | 'right-half' | 'max' | 'float' */
+  dock(e) {
+    x().dock(e);
+  },
+  /** Move a aba de abertura para o outro lado da viewport. */
+  setLauncherSide(e) {
+    x().setLauncherSide(e);
+  },
+  /** 'phone-waves' | 'waveform' | 'headset' | 'chat-phone' */
+  setLauncherIcon(e) {
+    x().setLauncherIcon(e);
+  },
+  get isOpen() {
+    return M ? M.isOpen : !1;
+  },
+  get geometry() {
+    return M ? M.geometry : null;
+  },
+  // ---- Telefonia ----
+  /** Disca um número. Aceita formato livre; a normalização é a mesma da extensão. */
+  call(e, a) {
+    return x().bridge.call("call", { number: e, meta: a });
+  },
+  hangup() {
+    return x().bridge.call("hangup");
+  },
+  answer() {
+    return x().bridge.call("answer");
+  },
+  /** Alterna o mudo — o bundle só expõe toggle, não aceita estado alvo. */
+  mute() {
+    return x().bridge.call("mute");
+  },
+  /** Alterna a espera. Também toggle. */
+  hold() {
+    return x().bridge.call("hold");
+  },
+  sendDTMF(e) {
+    return x().bridge.call("dtmf", { tone: e });
+  },
+  transfer(e) {
+    return x().bridge.call("transfer", { to: e });
+  },
+  getStatus() {
+    return x().bridge.call("status");
+  },
+  setAuth(e) {
+    return x().bridge.call("auth", { token: e });
+  },
+  logout() {
+    return x().bridge.call("logout");
+  },
+  // ---- Eventos ----
+  /** Eventos: ready, state, call:dialing, call:incoming, call:answered,
+   *  call:ended, call:failed, resize, open, close, error. */
+  on(e, a) {
+    return A.has(e) || A.set(e, /* @__PURE__ */ new Set()), A.get(e).add(a), () => le.off(e, a);
+  },
+  off(e, a) {
+    var i;
+    (i = A.get(e)) == null || i.delete(a);
+  },
+  destroy() {
+    M == null || M.destroy(), M = null, A.clear();
+  },
+  version: "0.1.0"
+};
+typeof window != "undefined" && (window.Bravophone = le);
+export {
+  le as default
+};