@chaterafrikang/call-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1743 @@
+// src/CallUI.jsx
+import { useEffect as useEffect5 } from "react";
+
+// src/callStyles.js
+var CALL_STYLE_ID = "cafcall-styles";
+var callStyles = `
+.cafcall{
+  --caf-primary:#2563EB; --caf-primary-d:#1D4ED8;
+  --caf-danger:#EF4444; --caf-ok:#16A34A; --caf-warn:#F59E0B;
+  --caf-ink:#0B2545; --caf-muted:#6B7280; --caf-line:#E5E7EB;
+  --caf-bg:#F4F6FB; --caf-card:#FFFFFF; --caf-stage:#0B1220;
+  --caf-radius:16px;
+  position:fixed; inset:0; z-index:2147483000;
+  display:flex; flex-direction:column;
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+  color:var(--caf-ink); background:var(--caf-bg);
+}
+.cafcall *{ box-sizing:border-box; }
+/* Icons have a viewBox but no intrinsic size \u2014 constrain them everywhere or they fill their box. */
+.cafcall svg{ width:18px; height:18px; flex:0 0 auto; display:inline-block; vertical-align:middle; }
+.cafcall-pill svg{ width:14px; height:14px; }
+.cafcall-btn svg{ width:18px; height:18px; }
+.cafcall-meter svg{ width:16px; height:16px; color:var(--caf-muted); }
+.cafcall-seg .cafcall-btn svg{ width:20px; height:20px; }
+.cafcall-icon-lg svg{ width:40px; height:40px; }
+.cafcall-peerchip svg{ width:14px; height:14px; }
+.cafcall-embed{ position:relative; inset:auto; height:100%; width:100%; border-radius:var(--caf-radius); overflow:hidden; }
+
+/* Header */
+.cafcall-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
+  padding:12px 16px; background:var(--caf-card); border-bottom:1px solid var(--caf-line); flex:0 0 auto; }
+.cafcall-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
+.cafcall-logo{ width:34px; height:34px; border-radius:9px; background:var(--caf-primary); color:#fff;
+  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; flex:0 0 auto; }
+.cafcall-title{ font-weight:700; font-size:14px; line-height:1.2; }
+.cafcall-sub{ font-size:12px; color:var(--caf-muted); }
+.cafcall-head-right{ display:flex; align-items:center; gap:8px; }
+
+/* Pills / badges */
+.cafcall-pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
+  font-size:12px; font-weight:600; background:#EEF2F7; color:var(--caf-muted); border:1px solid transparent; }
+.cafcall-pill.ok{ background:#DCFCE7; color:#166534; }
+.cafcall-pill.warn{ background:#FEF3C7; color:#92400E; }
+.cafcall-pill.enc{ background:#F1F5F9; color:#475569; }
+.cafcall-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }
+
+/* Body layout: stage + optional side panel */
+.cafcall-body{ flex:1 1 auto; display:flex; min-height:0; }
+.cafcall-main{ flex:1 1 auto; position:relative; min-width:0; display:flex; flex-direction:column; }
+.cafcall-side{ width:360px; flex:0 0 360px; background:var(--caf-bg); border-left:1px solid var(--caf-line);
+  padding:20px; overflow-y:auto; }
+/* Mobile: stack the side panel BELOW the main content (don't hide it \u2014 it holds Join / settings). */
+@media(max-width:820px){
+  .cafcall-body{ flex-direction:column; overflow-y:auto; }
+  .cafcall-main{ flex:0 0 auto; }
+  .cafcall-main.cafcall-center{ padding:20px 16px; }
+  .cafcall-side{ width:100%; flex:0 0 auto; border-left:0; border-top:1px solid var(--caf-line); }
+}
+
+/* Stage (active video) */
+.cafcall-stage{ flex:1 1 auto; position:relative; background:var(--caf-stage); overflow:hidden; }
+.cafcall-stage video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#0B1220; }
+.cafcall-selftile{ position:absolute; right:16px; bottom:16px; width:210px; max-width:34vw; aspect-ratio:16/10;
+  border-radius:12px; overflow:hidden; background:#111827; box-shadow:0 8px 24px rgba(0,0,0,.35);
+  border:2px solid rgba(255,255,255,.12); }
+.cafcall-selftile video{ transform:scaleX(-1); }
+.cafcall-selftile .cafcall-name{ position:absolute; left:8px; bottom:6px; color:#fff; font-size:12px;
+  text-shadow:0 1px 2px rgba(0,0,0,.6); display:inline-flex; align-items:center; gap:5px; }
+.cafcall-selftile .cafcall-name svg{ width:13px; height:13px; }
+.cafcall-stage-top{ position:absolute; top:14px; left:14px; right:14px; display:grid;
+  grid-template-columns:1fr auto 1fr; align-items:start; gap:10px; pointer-events:none; }
+.cafcall-stage-top .cafcall-pill,.cafcall-stage-top .cafcall-iconbtn{ pointer-events:auto; }
+.cafcall-stack{ display:flex; flex-direction:column; gap:10px; justify-self:start; }
+.cafcall-titlechip{ display:inline-flex; align-items:center; gap:10px; color:#fff; }
+.cafcall-titlechip .cafcall-logo{ width:36px; height:36px; }
+.cafcall-titlechip b{ font-size:14px; line-height:1.2; display:block; }
+.cafcall-titlechip small{ font-size:12px; opacity:.85; }
+.cafcall-topmid{ justify-self:center; }
+.cafcall-topright{ justify-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
+.cafcall-topright .row{ display:flex; align-items:center; gap:8px; }
+.cafcall-iconbtn{ width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; color:#fff;
+  background:rgba(17,24,39,.55); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
+.cafcall-iconbtn:hover{ background:rgba(17,24,39,.8); }
+.cafcall-peerchip{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
+  background:rgba(17,24,39,.6); color:#fff; font-size:12px; backdrop-filter:blur(6px); width:fit-content; }
+.cafcall-peerchip img{ width:22px; height:22px; border-radius:50%; object-fit:cover; }
+@media(max-width:640px){ .cafcall-stage-top{ grid-template-columns:1fr auto; } .cafcall-topmid{ display:none; } .cafcall-titlechip small{ display:none; } }
+
+/* Voice stage */
+.cafcall-voice{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
+  gap:26px; padding:24px; text-align:center; }
+.cafcall-voice-row{ display:flex; align-items:center; justify-content:center; gap:64px; flex-wrap:wrap; }
+.cafcall-part{ display:flex; flex-direction:column; align-items:center; gap:10px; }
+.cafcall-avatar{ border-radius:50%; object-fit:cover; background:#DCE8FF; color:var(--caf-primary);
+  display:flex; align-items:center; justify-content:center; font-weight:700; }
+.cafcall-ring{ padding:5px; border-radius:50%; border:2px solid transparent; }
+.cafcall-ring.speaking{ border-color:var(--caf-primary); box-shadow:0 0 0 6px rgba(37,99,235,.12); }
+.cafcall-pname{ font-weight:700; font-size:16px; }
+.cafcall-prole{ font-size:13px; color:var(--caf-muted); }
+.cafcall-wave{ display:flex; align-items:flex-end; gap:3px; height:22px; }
+.cafcall-wave i{ width:3px; background:var(--caf-primary); border-radius:2px; animation:cafwave 1s infinite ease-in-out; }
+@keyframes cafwave{ 0%,100%{ height:5px } 50%{ height:20px } }
+
+/* Pulse (calling / incoming) */
+.cafcall-pulse{ position:relative; display:flex; align-items:center; justify-content:center; }
+.cafcall-pulse::before,.cafcall-pulse::after{ content:""; position:absolute; border-radius:50%;
+  border:2px solid var(--caf-primary); opacity:0; animation:cafpulse 2.4s infinite ease-out; }
+.cafcall-pulse::after{ animation-delay:1.2s; }
+@keyframes cafpulse{ 0%{ width:100%; height:100%; opacity:.5 } 100%{ width:180%; height:180%; opacity:0 } }
+.cafcall-center{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
+  gap:18px; padding:24px; text-align:center; }
+.cafcall-h{ font-size:24px; font-weight:800; }
+.cafcall-p{ color:var(--caf-muted); max-width:420px; }
+.cafcall-dots{ display:inline-flex; gap:6px; }
+.cafcall-dots i{ width:7px; height:7px; border-radius:50%; background:var(--caf-primary); opacity:.35;
+  animation:cafdot 1.4s infinite; }
+.cafcall-dots i:nth-child(2){ animation-delay:.2s } .cafcall-dots i:nth-child(3){ animation-delay:.4s }
+@keyframes cafdot{ 0%,100%{ opacity:.25; transform:translateY(0) } 50%{ opacity:1; transform:translateY(-3px) } }
+
+/* Control bar \u2014 three zones (left \xB7 center \xB7 right) so the main controls stay centred */
+.cafcall-controls{ flex:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
+  gap:14px; padding:16px 22px; background:var(--caf-card); border-top:1px solid var(--caf-line); }
+.cafcall-controls-l{ justify-self:start; display:flex; gap:14px; }
+.cafcall-controls-c{ justify-self:center; display:flex; gap:14px; }
+.cafcall-controls-r{ justify-self:end; display:flex; gap:14px; }
+/* Dark variant for the video stage */
+.cafcall-controls.dark{ background:#111418; border-top-color:rgba(255,255,255,.08); }
+.cafcall-controls.dark .cafcall-ctl{ color:#9aa4b2; }
+.cafcall-controls.dark .cafcall-ctl .ic{ background:#252A31; border-color:transparent; color:#E5E7EB; }
+.cafcall-controls.dark .cafcall-ctl:hover .ic{ background:#323842; }
+.cafcall-controls.dark .cafcall-ctl.danger .ic{ background:var(--caf-danger); color:#fff; }
+.cafcall-controls.dark .cafcall-ctl.on .ic{ background:var(--caf-danger); color:#fff; }
+.cafcall-controls.dark .cafcall-ctl.active .ic{ background:#323842; color:#fff; }
+/* Mobile: match the Figma \u2014 ONE light row: Mute \xB7 Camera \xB7 End(red,centre) \xB7 Speaker \xB7 More.
+   People/Chat/Share/Settings fold into the More bottom-sheet. */
+@media(max-width:640px){
+  .cafcall-controls{ display:flex; flex-wrap:nowrap; justify-content:space-around; align-items:flex-start; gap:2px; padding:14px 6px 22px; }
+  .cafcall-controls.dark{ background:var(--caf-bg); border-top:0; }
+  .cafcall-controls.dark .cafcall-ctl{ color:var(--caf-muted); }
+  .cafcall-controls.dark .cafcall-ctl .ic{ background:#E7EBF2; color:var(--caf-ink); border:0; }
+  .cafcall-controls.dark .cafcall-ctl-end .ic{ background:var(--caf-danger); color:#fff; }
+  .cafcall-controls-l,.cafcall-controls-c,.cafcall-controls-r{ display:contents; }
+  .cafcall-ctl-people,.cafcall-ctl-chat,.cafcall-ctl-share,.cafcall-ctl-settings{ display:none; }
+  .cafcall-ctl .ic{ width:54px; height:54px; }
+  .cafcall-ctl-mute{ order:1 } .cafcall-ctl-camera{ order:2 } .cafcall-ctl-end{ order:3 } .cafcall-ctl-speaker{ order:4 } .cafcall-ctl-more{ order:5 }
+}
+
+/* Mobile refinements for the calmer screens */
+@media(max-width:640px){
+  .cafcall-voice-row{ gap:30px; }
+  .cafcall-voice .cafcall-ring .cafcall-avatar{ width:96px!important; height:96px!important; }
+  .cafcall-stats{ grid-template-columns:repeat(2,1fr)!important; }
+  .cafcall-h{ font-size:21px; }
+  .cafcall-pulse .cafcall-avatar{ width:104px!important; height:104px!important; }
+  .cafcall-infostrip{ gap:14px; padding:12px 14px; flex-wrap:wrap; justify-content:center; }
+}
+
+/* Floating quick-controls over the video stage (mobile only, per Figma) */
+.cafcall-floatctl{ display:none; }
+@media(max-width:640px){
+  .cafcall-floatctl{ display:flex; position:absolute; left:0; right:0; bottom:14px; z-index:4;
+    align-items:center; justify-content:center; gap:20px; pointer-events:none; }
+  .cafcall-floatctl > *{ pointer-events:auto; }
+}
+.cafcall-floatbtn{ width:50px; height:50px; border-radius:50%; border:0; cursor:pointer; color:#fff;
+  background:rgba(17,24,39,.55); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; }
+.cafcall-floatbtn svg{ width:22px; height:22px; }
+.cafcall-floatbtn.end{ background:var(--caf-danger); width:58px; height:58px; }
+.cafcall-selftile{ z-index:5; }
+
+/* Mobile "More" bottom sheet */
+.cafcall-sheet-scrim{ position:fixed; inset:0; z-index:2147483001; background:rgba(0,0,0,.35); display:flex; align-items:flex-end; }
+.cafcall-sheet{ width:100%; background:var(--caf-card); border-radius:18px 18px 0 0; padding:8px 16px 26px;
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
+.cafcall-sheet-grab{ width:40px; height:4px; border-radius:2px; background:#D1D5DB; margin:8px auto 16px; }
+.cafcall-sheet-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
+.cafcall-sheet-item{ display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:0;
+  cursor:pointer; font:inherit; font-size:12px; color:var(--caf-ink); }
+.cafcall-sheet-item .ic{ width:58px; height:58px; border-radius:16px; background:#F1F3F7; display:flex;
+  align-items:center; justify-content:center; color:var(--caf-ink); }
+.cafcall-sheet-item .ic.on{ background:#DCE8FF; color:var(--caf-primary); }
+.cafcall-sheet-item svg{ width:22px; height:22px; }
+.cafcall-ctl{ display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:0;
+  cursor:pointer; color:var(--caf-muted); font-size:11px; font-family:inherit; }
+.cafcall-ctl .ic{ width:52px; height:52px; border-radius:50%; background:#F1F3F7; border:1px solid var(--caf-line);
+  display:flex; align-items:center; justify-content:center; color:var(--caf-ink); transition:.15s; }
+.cafcall-ctl:hover .ic{ background:#E7EBF2; }
+.cafcall-ctl.active .ic{ background:#DCE8FF; color:var(--caf-primary); border-color:transparent; }
+.cafcall-ctl.danger .ic{ background:var(--caf-danger); color:#fff; border-color:transparent; }
+.cafcall-ctl.on .ic{ background:#FEE2E2; color:var(--caf-danger); border-color:transparent; }
+.cafcall-ctl:disabled{ opacity:.45; cursor:not-allowed; }
+.cafcall-ctl svg{ width:22px; height:22px; }
+
+/* Cards / side panel */
+.cafcall-card{ background:var(--caf-card); border:1px solid var(--caf-line); border-radius:14px; padding:14px; }
+.cafcall-card + .cafcall-card{ margin-top:12px; }
+.cafcall-note{ border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.45; }
+.cafcall-note.info{ background:#EFF6FF; color:#1E40AF; } .cafcall-note.ok{ background:#DCFCE7; color:#166534; }
+.cafcall-note.warn{ background:#FEF3C7; color:#92400E; } .cafcall-note.err{ background:#FEF2F2; color:#B91C1C; }
+.cafcall-label{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--caf-muted); margin:14px 0 8px; }
+.cafcall-person{ display:flex; align-items:center; gap:10px; }
+.cafcall-person .cafcall-avatar{ width:40px; height:40px; font-size:14px; }
+.cafcall-person .nm{ font-weight:600; font-size:14px; } .cafcall-person .rl{ font-size:12px; color:var(--caf-muted); }
+
+/* Buttons */
+.cafcall-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
+  padding:12px 16px; border-radius:12px; font-weight:600; font-size:14px; cursor:pointer; border:1px solid transparent;
+  font-family:inherit; }
+.cafcall-btn.pri{ background:var(--caf-primary); color:#fff; } .cafcall-btn.pri:hover{ background:var(--caf-primary-d); }
+.cafcall-btn.ghost{ background:var(--caf-card); color:var(--caf-ink); border-color:var(--caf-line); }
+.cafcall-btn.dng{ background:var(--caf-danger); color:#fff; }
+.cafcall-btn.dngghost{ background:#FEF2F2; color:#B91C1C; border-color:#FECACA; }
+.cafcall-btn + .cafcall-btn{ margin-top:10px; }
+.cafcall-seg{ display:flex; gap:8px; }
+.cafcall-seg .cafcall-btn{ margin:0; }
+.cafcall-seg .cafcall-btn.sel{ background:#DCE8FF; color:var(--caf-primary); border-color:transparent; }
+
+/* Preview (lobby) */
+.cafcall-preview{ width:min(560px,100%); }
+.cafcall-preview .frame{ position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:#111827; }
+.cafcall-preview video{ width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
+.cafcall-meter{ margin-top:10px; display:flex; align-items:center; gap:10px; background:var(--caf-card);
+  border:1px solid var(--caf-line); border-radius:10px; padding:10px 12px; font-size:13px; }
+.cafcall-meter .bar{ flex:1; height:6px; border-radius:3px; background:#E5E7EB; overflow:hidden; }
+.cafcall-meter .bar>i{ display:block; height:100%; background:var(--caf-primary); width:0; transition:width .1s; }
+
+/* Device pickers */
+.cafcall-picker{ display:flex; align-items:center; gap:10px; background:var(--caf-card); border:1px solid var(--caf-line);
+  border-radius:10px; padding:8px 10px; margin-bottom:8px; }
+.cafcall-picker .ic{ color:var(--caf-muted); display:flex; }
+.cafcall-picker select{ flex:1; border:0; background:none; font:inherit; font-size:13px; color:var(--caf-ink); outline:none; cursor:pointer; }
+
+/* Toggle switch */
+.cafcall-toggle{ width:40px; height:24px; border-radius:999px; border:0; background:#CBD5E1; cursor:pointer; padding:0; position:relative; flex:0 0 auto; transition:.15s; }
+.cafcall-toggle.on{ background:var(--caf-primary); }
+.cafcall-toggle i{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.15s; }
+.cafcall-toggle.on i{ left:19px; }
+
+/* Preference / answer rows */
+.cafcall-prefrow{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--caf-line); }
+.cafcall-prefrow:last-of-type{ border-bottom:0; }
+.cafcall-prefrow .t{ font-size:13px; font-weight:600; } .cafcall-prefrow .s{ font-size:12px; color:var(--caf-muted); }
+.cafcall-answerrow{ display:flex; align-items:center; gap:10px; background:var(--caf-card); border:1px solid var(--caf-line);
+  border-radius:12px; padding:10px 12px; margin-bottom:8px; width:100%; }
+.cafcall-answerrow .ic{ width:34px; height:34px; border-radius:9px; background:#EFF3FC; color:var(--caf-primary);
+  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
+.cafcall-answerrow .t{ font-size:13px; font-weight:600; } .cafcall-answerrow .s{ font-size:12px; color:var(--caf-muted); }
+.cafcall-answerrow.as-btn{ cursor:pointer; font-family:inherit; text-align:left; }
+.cafcall-answerrow.as-btn:hover{ background:#F9FAFB; }
+
+/* Incoming call info strip */
+.cafcall-infostrip{ display:flex; gap:22px; background:var(--caf-card); border:1px solid var(--caf-line);
+  border-radius:12px; padding:12px 20px; }
+.cafcall-infostrip .k{ font-size:11px; color:var(--caf-muted); text-transform:uppercase; letter-spacing:.03em; }
+.cafcall-infostrip .v{ font-weight:700; font-size:14px; margin-top:2px; }
+
+/* Ended stats */
+.cafcall-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px; }
+.cafcall-stat{ background:var(--caf-card); border:1px solid var(--caf-line); border-radius:12px; padding:12px; text-align:center; }
+.cafcall-stat .v{ font-weight:800; font-size:18px; } .cafcall-stat .k{ font-size:12px; color:var(--caf-muted); }
+.cafcall-stars{ display:flex; gap:6px; }
+.cafcall-star{ background:none; border:0; cursor:pointer; font-size:26px; line-height:1; color:#D1D5DB; }
+.cafcall-star.on{ color:#F59E0B; }
+
+.cafcall-icon-lg{ width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
+.cafcall-spin{ animation:cafspin 1s linear infinite; } @keyframes cafspin{ to{ transform:rotate(360deg) } }
+.cafcall-hide-sm{ } @media(max-width:820px){ .cafcall-hide-sm{ display:none!important; } }
+
+/* In-call side drawer (People / Chat) */
+.cafcall-drawer{ position:absolute; top:0; right:0; bottom:0; width:340px; max-width:86%; z-index:6;
+  background:var(--caf-card); border-left:1px solid var(--caf-line); display:flex; flex-direction:column;
+  box-shadow:-8px 0 24px rgba(0,0,0,.12); }
+.cafcall-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
+  border-bottom:1px solid var(--caf-line); font-size:15px; }
+.cafcall-drawer-head .cafcall-iconbtn{ width:30px; height:30px; font-size:14px; }
+.cafcall-drawer-body{ flex:1 1 auto; overflow-y:auto; padding:10px 16px; }
+.cafcall-chat{ display:flex; flex-direction:column; gap:8px; }
+.cafcall-msg{ align-self:flex-start; max-width:82%; padding:8px 11px; border-radius:12px; font-size:13px;
+  background:#F1F3F7; color:var(--caf-ink); border-bottom-left-radius:4px; }
+.cafcall-msg.mine{ align-self:flex-end; background:var(--caf-primary); color:#fff; border-bottom-left-radius:12px; border-bottom-right-radius:4px; }
+.cafcall-chat-compose{ display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--caf-line); }
+.cafcall-chat-compose input{ flex:1; border:1px solid var(--caf-line); border-radius:10px; padding:9px 11px; font:inherit; font-size:13px; outline:none; }
+.cafcall-chat-compose input:focus{ border-color:var(--caf-primary); }
+
+/* Settings panel (wider drawer with tabs + footer) */
+.cafcall-settings{ width:400px; max-width:92%; }
+.cafcall-set-badge{ width:34px; height:34px; border-radius:9px; background:#EFF3FC; color:var(--caf-primary);
+  display:flex; align-items:center; justify-content:center; }
+.cafcall-tabs{ display:flex; gap:6px; padding:0 12px; border-bottom:1px solid var(--caf-line); overflow-x:auto; }
+.cafcall-tab{ flex:0 0 auto; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
+  padding:11px 8px; font:inherit; font-size:13px; font-weight:600; color:var(--caf-muted); }
+.cafcall-tab.on{ color:var(--caf-primary); border-bottom-color:var(--caf-primary); }
+.cafcall-sliderrow{ display:flex; align-items:center; gap:10px; background:var(--caf-card); border:1px solid var(--caf-line);
+  border-radius:10px; padding:10px 12px; margin-bottom:8px; font-size:13px; }
+.cafcall-sliderrow svg{ width:18px; height:18px; color:var(--caf-muted); flex:0 0 auto; }
+.cafcall-sliderrow span{ flex:0 0 auto; }
+.cafcall-sliderrow input[type=range]{ flex:1; accent-color:var(--caf-primary); }
+.cafcall-settings-foot{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--caf-line); }
+.cafcall-settings-foot .cafcall-pill{ margin-right:auto; }
+
+/* Screen-share banner */
+.cafcall-sharebar{ position:absolute; top:64px; left:50%; transform:translateX(-50%); z-index:3;
+  display:inline-flex; align-items:center; gap:8px; background:rgba(37,99,235,.92); color:#fff;
+  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.3); }
+.cafcall-sharebar svg{ width:16px; height:16px; }
+
+/* Minimized floating bar */
+.cafcall-mini{ position:fixed; right:20px; bottom:20px; z-index:2147483000; display:flex; align-items:center; gap:12px;
+  background:#111418; color:#fff; border-radius:14px; padding:10px 14px; box-shadow:0 12px 32px rgba(0,0,0,.35);
+  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
+.cafcall-mini *{ box-sizing:border-box; }
+.cafcall-mini svg{ width:18px; height:18px; }
+.cafcall-mini-expand{ width:34px; height:34px; border-radius:9px; border:0; background:#252A31; color:#fff; cursor:pointer;
+  display:flex; align-items:center; justify-content:center; }
+.cafcall-mini-info .t{ font-size:13px; font-weight:600; }
+.cafcall-mini-info .s{ font-size:12px; color:#9aa4b2; display:flex; align-items:center; gap:5px; }
+.cafcall-mini-ctls{ display:flex; gap:8px; }
+.cafcall-mini-ctls .cafcall-ctl .ic{ width:38px; height:38px; background:#252A31; color:#E5E7EB; border:0; }
+.cafcall-mini-ctls .cafcall-ctl.danger .ic{ background:var(--caf-danger); color:#fff; }
+.cafcall-mini-ctls .cafcall-ctl.on .ic{ background:var(--caf-danger); color:#fff; }
+.cafcall-mini-ctls .cafcall-ctl span:last-child{ display:none; }
+`;
+function injectCallStyles(doc = document) {
+  let el = doc.getElementById(CALL_STYLE_ID);
+  if (!el) {
+    el = doc.createElement("style");
+    el.id = CALL_STYLE_ID;
+    doc.head.appendChild(el);
+  }
+  if (el.textContent !== callStyles) el.textContent = callStyles;
+}
+
+// src/useCall.js
+import { useEffect, useRef, useState, useCallback } from "react";
+function useCall(convo, { startInLobby = false } = {}) {
+  const [phase, setPhase] = useState("idle");
+  const [callType, setCallType] = useState("video");
+  const [peerId, setPeerId] = useState(null);
+  const [muted, setMuted] = useState(false);
+  const [cameraOn, setCameraOn] = useState(true);
+  const [peerMuted, setPeerMuted] = useState(false);
+  const [peerCameraOff, setPeerCameraOff] = useState(false);
+  const [error, setError] = useState("");
+  const [endedInfo, setEndedInfo] = useState(null);
+  const [elapsed, setElapsed] = useState(0);
+  const [minimized, setMinimized] = useState(false);
+  const [sharing, setSharing] = useState(false);
+  const [panel, setPanel] = useState(null);
+  const [moreOpen, setMoreOpen] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [speakerId, setSpeakerId] = useState("");
+  const [mirror, setMirror] = useState(true);
+  const [volume, setVolume] = useState(1);
+  const localStream = useRef(null);
+  const remoteStream = useRef(null);
+  const startedAt = useRef(null);
+  const reconnectTimer = useRef(null);
+  const phaseRef = useRef(phase);
+  phaseRef.current = phase;
+  useEffect(() => {
+    if (phase !== "active" && phase !== "reconnecting") return;
+    if (startedAt.current == null) startedAt.current = Date.now();
+    const id = setInterval(() => setElapsed(Math.floor((Date.now() - startedAt.current) / 1e3)), 1e3);
+    return () => clearInterval(id);
+  }, [phase]);
+  const grabStreams = useCallback((payload) => {
+    localStream.current = payload?.localStream ?? convo?.getLocalStream?.() ?? localStream.current;
+    let rs = payload?.remoteStream;
+    if (!rs && convo?.getRemoteStream && payload?.remoteUserId) {
+      rs = convo.getRemoteStream(payload.remoteUserId) ?? convo.getRemoteStream(String(payload.remoteUserId));
+    }
+    if (!rs && convo?.getAllRemoteStreams) {
+      const m = convo.getAllRemoteStreams();
+      rs = m && (m.values ? [...m.values()][0] : Object.values(m)[0]);
+    }
+    remoteStream.current = rs ?? remoteStream.current;
+  }, [convo]);
+  useEffect(() => {
+    if (!convo) return;
+    const offs = [];
+    const on = (ev, fn) => {
+      convo.on(ev, fn);
+      offs.push(() => convo.off?.(ev, fn));
+    };
+    on("call_invite", (e) => {
+      setCallType(e?.callType || "video");
+      setPeerId(e?.callerId ?? null);
+      setError("");
+      setPhase("incoming");
+    });
+    on("call_connected", (e) => {
+      grabStreams(e);
+      if (e?.remoteUserId) setPeerId(e.remoteUserId);
+      if (reconnectTimer.current) {
+        clearTimeout(reconnectTimer.current);
+        reconnectTimer.current = null;
+      }
+      setPhase("active");
+    });
+    on("call_hangup", () => finish("remote_hangup"));
+    on("call_timeout", () => finish("no_answer"));
+    on("call_reject", () => finish("declined"));
+    on("call_error", (err) => {
+      const reason = err?.reason || "";
+      if (reason === "permission_denied") {
+        setError(err?.message || "Camera / microphone blocked");
+        setPhase("permission_denied");
+        return;
+      }
+      if (reason === "ice_failed") {
+        if (phaseRef.current === "active") {
+          setPhase("reconnecting");
+          reconnectTimer.current = setTimeout(() => {
+            if (phaseRef.current === "reconnecting") finish("connection_lost");
+          }, 2e4);
+        }
+        return;
+      }
+      setError(err?.message || "Call error");
+    });
+    on("local_mute_changed", ({ muted: muted2 }) => setMuted(!!muted2));
+    on("local_video_changed", ({ enabled }) => setCameraOn(!!enabled));
+    on("peer_mute", () => setPeerMuted(true));
+    on("peer_unmute", () => setPeerMuted(false));
+    on("peer_video_off", () => setPeerCameraOff(true));
+    on("peer_video_on", () => setPeerCameraOff(false));
+    on("screen_share_changed", ({ active }) => setSharing(!!active));
+    on("peer_left", () => finish("remote_hangup"));
+    return () => {
+      offs.forEach((f) => {
+        try {
+          f();
+        } catch {
+        }
+      });
+    };
+  }, [convo, grabStreams]);
+  useEffect(() => {
+    if (!convo) return;
+    let stop = false;
+    const norm = (m) => ({
+      id: m.id ?? m.message_id,
+      text: m.content ?? m.text ?? "",
+      sender: String(m.sender_id ?? m.senderId ?? ""),
+      at: m.created_at ?? m.sent_at ?? Date.now()
+    });
+    const onMsg = (m) => setMessages((prev) => {
+      const n = norm(m);
+      if (!n.id || prev.some((x) => x.id === n.id)) return prev;
+      return [...prev, n];
+    });
+    convo.on("message", onMsg);
+    if (convo.fetchMessages) {
+      convo.fetchMessages({ limit: 50 }).then((r) => {
+        if (!stop) setMessages((r?.messages ?? r?.data?.messages ?? []).map(norm));
+      }).catch(() => {
+      });
+    }
+    return () => {
+      stop = true;
+      convo.off?.("message", onMsg);
+    };
+  }, [convo]);
+  const finish = useCallback((reason) => {
+    if (phaseRef.current === "ended" || phaseRef.current === "idle") return;
+    const seconds = startedAt.current ? Math.floor((Date.now() - startedAt.current) / 1e3) : 0;
+    const done = (stats) => {
+      setEndedInfo({ reason, stats: stats || null, seconds });
+      setPhase("ended");
+    };
+    if (convo?.getCallStats) convo.getCallStats().then(done).catch(() => done(null));
+    else done(null);
+  }, [convo]);
+  const actions = {
+    openLobby: (type = "video") => {
+      setCallType(type);
+      setError("");
+      setPhase("lobby");
+    },
+    start: (type) => {
+      const t = type || callType;
+      setCallType(t);
+      setError("");
+      startedAt.current = null;
+      setElapsed(0);
+      try {
+        convo.startCall(t);
+        setPhase("outgoing");
+      } catch (e) {
+        setError(e?.message || "Failed to start call");
+      }
+    },
+    accept: () => {
+      try {
+        convo.acceptCall();
+      } catch (e) {
+        setError(e?.message || "Failed to accept");
+      }
+    },
+    acceptVoice: () => {
+      setCallType("voice");
+      try {
+        convo.acceptCall();
+        convo.setVideoEnabled?.(false);
+      } catch (e) {
+        setError(e?.message);
+      }
+    },
+    decline: () => {
+      try {
+        convo.rejectCall();
+      } catch {
+      }
+      finish("declined_local");
+    },
+    hangup: () => {
+      try {
+        convo.endCall();
+      } catch {
+      }
+      finish("local_hangup");
+    },
+    // Optimistically flip local state so the button reflects it immediately, then tell the
+    // SDK. (The local_*_changed event confirms the same value; we no longer depend on it.)
+    toggleMute: () => {
+      const next = !muted;
+      setMuted(next);
+      try {
+        convo.setMuted(next);
+      } catch {
+      }
+    },
+    toggleCamera: () => {
+      const next = !cameraOn;
+      setCameraOn(next);
+      try {
+        convo.setVideoEnabled(next);
+      } catch {
+      }
+    },
+    switchToVoice: () => {
+      setCallType("voice");
+      try {
+        convo.setVideoEnabled(false);
+      } catch {
+      }
+    },
+    // Device / preference selection (lobby + incoming), forwarded to the SDK.
+    setCallOptions: (opts) => {
+      try {
+        convo?.setCallOptions?.(opts);
+      } catch {
+      }
+    },
+    listDevices: () => convo?.listDevices ? convo.listDevices() : Promise.resolve([]),
+    setSpeaker: (id) => setSpeakerId(id),
+    setMirror: (on) => setMirror(!!on),
+    setVolume: (v) => setVolume(Math.max(0, Math.min(1, v))),
+    // Live media adjustments from the Settings panel (forwarded to the SDK).
+    setVideoQuality: (w, h, fps) => {
+      try {
+        convo?.applyVideoConstraints?.({ width: { ideal: w }, height: { ideal: h }, ...fps ? { frameRate: { ideal: fps } } : {} });
+      } catch {
+      }
+    },
+    setAudioProcessing: (opts) => {
+      try {
+        convo?.applyAudioConstraints?.(opts);
+      } catch {
+      }
+    },
+    switchDevice: (kind, id) => {
+      try {
+        return convo?.switchDevice?.(kind, id);
+      } catch {
+      }
+    },
+    setLowBandwidth: (on) => {
+      try {
+        return convo?.setLowBandwidth?.(on);
+      } catch {
+      }
+    },
+    minimize: () => setMinimized(true),
+    maximize: () => setMinimized(false),
+    openPanel: (name) => {
+      setMoreOpen(false);
+      setPanel((p) => p === name ? null : name);
+    },
+    closePanel: () => setPanel(null),
+    toggleMore: () => setMoreOpen((o) => !o),
+    closeMore: () => setMoreOpen(false),
+    sendMessage: (text) => {
+      const t = (text || "").trim();
+      if (!t) return;
+      try {
+        convo.sendMessage(t);
+      } catch {
+      }
+    },
+    toggleShare: async () => {
+      try {
+        if (sharing) {
+          await convo.stopScreenShare?.();
+          setSharing(false);
+        } else {
+          const ok = await convo.startScreenShare?.();
+          setSharing(!!ok);
+        }
+      } catch {
+      }
+    },
+    reset: () => {
+      setPhase("idle");
+      setMinimized(false);
+      setEndedInfo(null);
+      setElapsed(0);
+      startedAt.current = null;
+      localStream.current = null;
+      remoteStream.current = null;
+    }
+  };
+  useEffect(() => {
+    if (startInLobby && phase === "idle") setPhase("lobby");
+  }, [startInLobby, phase]);
+  return {
+    phase,
+    callType,
+    peerId,
+    muted,
+    cameraOn,
+    peerMuted,
+    peerCameraOff,
+    error,
+    endedInfo,
+    elapsed,
+    minimized,
+    sharing,
+    panel,
+    moreOpen,
+    messages,
+    speakerId,
+    mirror,
+    volume,
+    localStream,
+    remoteStream,
+    actions
+  };
+}
+function fmtTime(s) {
+  s = Math.max(0, s | 0);
+  const m = Math.floor(s / 60), r = s % 60;
+  return `${String(m).padStart(2, "0")}:${String(r).padStart(2, "0")}`;
+}
+
+// src/screens.jsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState3 } from "react";
+
+// src/parts.jsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var I = (p) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...p
+  }
+);
+var Icon = {
+  mic: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 2a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 10a7 7 0 0 1-14 0" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 19v3" })
+  ] }),
+  micOff: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M1 1l22 22" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 9v2a3 3 0 0 0 5.1 2.1" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 9.3V5a3 3 0 0 0-5.9-.7" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 10a7 7 0 0 1-1.2 3.9M5 10a7 7 0 0 0 10 6.3" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 19v3" })
+  ] }),
+  cam: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "6", width: "14", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M22 8l-6 4 6 4V8z" })
+  ] }),
+  camOff: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M1 1l22 22" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 16H4a2 2 0 0 1-2-2V8" }),
+    /* @__PURE__ */ jsx("path", { d: "M9.5 6H14a2 2 0 0 1 2 2v4.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M22 8l-6 4" })
+  ] }),
+  end: () => /* @__PURE__ */ jsx(I, { children: /* @__PURE__ */ jsx("path", { d: "M22 16.9v2a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 3.2 2 2 0 0 1 4 1h2a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L7.1 8.6a16 16 0 0 0 6 6l1.2-1.1a2 2 0 0 1 2.1-.5c.8.3 1.7.6 2.6.7A2 2 0 0 1 22 16.9z", transform: "rotate(135 12 12)" }) }),
+  speaker: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M11 5L6 9H2v6h4l5 4V5z" }),
+    /* @__PURE__ */ jsx("path", { d: "M15.5 8.5a5 5 0 0 1 0 7M19 5a9 9 0 0 1 0 14" })
+  ] }),
+  share: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M4 16V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 20h20" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 12V7m0 0l-2 2m2-2l2 2" })
+  ] }),
+  people: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
+    /* @__PURE__ */ jsx("circle", { cx: "9", cy: "7", r: "4" }),
+    /* @__PURE__ */ jsx("path", { d: "M23 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8" })
+  ] }),
+  chat: () => /* @__PURE__ */ jsx(I, { children: /* @__PURE__ */ jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }),
+  more: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+  ] }),
+  phone: () => /* @__PURE__ */ jsx(I, { children: /* @__PURE__ */ jsx("path", { d: "M22 16.9v2a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 3.2 2 2 0 0 1 4 1h2a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.6a2 2 0 0 1-.5 2.1L7.1 8.6a16 16 0 0 0 6 6l1.2-1.1a2 2 0 0 1 2.1-.5c.8.3 1.7.6 2.6.7A2 2 0 0 1 22 16.9z" }) }),
+  lock: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+  ] }),
+  check: () => /* @__PURE__ */ jsx(I, { children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }),
+  wifi: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 20h.01" })
+  ] }),
+  shrink: () => /* @__PURE__ */ jsx(I, { children: /* @__PURE__ */ jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3" }) }),
+  info: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 16v-4M12 8h.01" })
+  ] }),
+  spinner: () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className: "cafcall-spin", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+  ] }),
+  settings: () => /* @__PURE__ */ jsxs(I, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
+  ] })
+};
+function Avatar({ name = "?", src, size = 96, className = "", style = {} }) {
+  const init = String(name).split(/\s+/).map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+  return src ? /* @__PURE__ */ jsx("img", { className: `cafcall-avatar ${className}`, src, alt: name, style: { width: size, height: size, ...style } }) : /* @__PURE__ */ jsx("span", { className: `cafcall-avatar ${className}`, style: { width: size, height: size, fontSize: size * 0.36, ...style }, children: init });
+}
+function Stream({ stream, muted, mirror, sinkId, volume, className, style }) {
+  const ref = useRef2(null);
+  const ms = stream?.current ?? stream ?? null;
+  useEffect2(() => {
+    const el = ref.current;
+    if (!el) return;
+    let cancelled = false;
+    const attach = () => {
+      if (cancelled || !el) return;
+      if (el.srcObject !== ms) el.srcObject = ms || null;
+      if (typeof volume === "number") el.volume = volume;
+      if (ms) el.play?.().catch(() => {
+      });
+      if (sinkId && typeof el.setSinkId === "function") el.setSinkId(sinkId).catch(() => {
+      });
+    };
+    attach();
+    el.onloadedmetadata = attach;
+    const onTrack = () => attach();
+    ms?.addEventListener?.("addtrack", onTrack);
+    const timers = [120, 400, 900, 1800].map((t) => setTimeout(attach, t));
+    return () => {
+      cancelled = true;
+      ms?.removeEventListener?.("addtrack", onTrack);
+      timers.forEach(clearTimeout);
+    };
+  }, [ms, sinkId, volume]);
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      ref,
+      playsInline: true,
+      autoPlay: true,
+      muted,
+      className,
+      style: { ...mirror ? { transform: "scaleX(-1)" } : {}, ...style }
+    }
+  );
+}
+function Ctl({ icon, name, label, onClick, tone = "", active, on, disabled }) {
+  const G = Icon[icon] || Icon.more;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: `cafcall-ctl ${tone} ${active ? "active" : ""} ${on ? "on" : ""} ${name ? `cafcall-ctl-${name}` : ""}`,
+      onClick,
+      disabled,
+      title: label,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ic", children: /* @__PURE__ */ jsx(G, {}) }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+function EncBadge() {
+  return /* @__PURE__ */ jsxs("span", { className: "cafcall-pill enc", children: [
+    /* @__PURE__ */ jsx(Icon.lock, {}),
+    " E2E Encrypted"
+  ] });
+}
+function Waveform({ bars = 9 }) {
+  return /* @__PURE__ */ jsx("span", { className: "cafcall-wave", children: Array.from({ length: bars }).map((_, i) => /* @__PURE__ */ jsx("i", { style: { animationDelay: `${i % 5 * 0.12}s`, height: 5 + i % 4 * 4 } }, i)) });
+}
+function qualityFromStats(stats) {
+  if (!stats) return { label: "Good", tone: "ok" };
+  const rtt = stats.rtt_ms ?? 0, loss = stats.packet_loss_pct ?? stats.packetsLostPct ?? 0;
+  if (rtt > 300 || loss > 5) return { label: "Poor", tone: "warn" };
+  if (rtt > 150 || loss > 2) return { label: "Fair", tone: "warn" };
+  return { label: "Good", tone: "ok" };
+}
+
+// src/settingsPanel.jsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var QUALITIES = [
+  { label: "1080p HD", w: 1920, h: 1080 },
+  { label: "720p HD", w: 1280, h: 720 },
+  { label: "360p", w: 640, h: 360 },
+  { label: "180p", w: 320, h: 180 }
+];
+var TABS = ["devices", "network", "accessibility", "privacy"];
+var DEFAULT_PREF = {
+  mirror: true,
+  blur: false,
+  noiseSuppression: true,
+  echoCancellation: true,
+  adaptiveBitrate: true,
+  lowBandwidth: false,
+  hardwareAccel: true
+};
+var Toggle = ({ on, onClick }) => /* @__PURE__ */ jsx2("button", { type: "button", className: `cafcall-toggle ${on ? "on" : ""}`, onClick, "aria-pressed": on, children: /* @__PURE__ */ jsx2("i", {}) });
+function SettingsPanel({ c, cfg }) {
+  const [tab, setTab] = useState2("devices");
+  const [devices, setDevices] = useState2({ cam: [], mic: [], spk: [] });
+  const [sel, setSel] = useState2({ cam: "", mic: "", spk: c.speakerId || "" });
+  const [quality, setQuality] = useState2("720p HD");
+  const [pref, setPref] = useState2({ ...DEFAULT_PREF, mirror: c.mirror });
+  const previewRef = useRef3(null);
+  useEffect3(() => {
+    c.actions.listDevices().then((list) => {
+      const by = (k) => list.filter((d) => d.kind === k).map((d) => ({ id: d.deviceId, label: d.label || k }));
+      setDevices({ cam: by("videoinput"), mic: by("audioinput"), spk: by("audiooutput") });
+    });
+  }, []);
+  useEffect3(() => {
+    const el = previewRef.current;
+    const ms = c.localStream?.current;
+    if (el && ms) {
+      el.srcObject = ms;
+      el.play?.().catch(() => {
+      });
+    }
+  });
+  if (c.panel !== "settings") return null;
+  const setQ = (label) => {
+    setQuality(label);
+    const q = QUALITIES.find((x) => x.label === label);
+    if (q) c.actions.setVideoQuality(q.w, q.h);
+  };
+  const togglePref = (k) => setPref((p) => {
+    const v = !p[k];
+    if (k === "mirror") c.actions.setMirror(v);
+    if (k === "noiseSuppression" || k === "echoCancellation") c.actions.setAudioProcessing({ [k]: v });
+    if (k === "lowBandwidth") {
+      c.actions.setLowBandwidth(v);
+      setQuality(v ? "360p" : "720p HD");
+    }
+    return { ...p, [k]: v };
+  });
+  const Picker2 = ({ icon, list, value, onChange }) => {
+    const Ico = Icon[icon] || Icon.mic;
+    return /* @__PURE__ */ jsxs2("div", { className: "cafcall-picker", children: [
+      /* @__PURE__ */ jsx2("span", { className: "ic", children: /* @__PURE__ */ jsx2(Ico, {}) }),
+      /* @__PURE__ */ jsxs2("select", { value, onChange: (e) => onChange(e.target.value), children: [
+        /* @__PURE__ */ jsx2("option", { value: "", children: list.length ? "Default" : "Grant access to list devices" }),
+        list.map((d) => /* @__PURE__ */ jsx2("option", { value: d.id, children: d.label }, d.id))
+      ] })
+    ] });
+  };
+  const PrefRow2 = ({ icon, title, sub, k }) => {
+    const Ico = Icon[icon] || Icon.info;
+    return /* @__PURE__ */ jsxs2("div", { className: "cafcall-answerrow", style: { marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsx2("span", { className: "ic", children: /* @__PURE__ */ jsx2(Ico, {}) }),
+      /* @__PURE__ */ jsxs2("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx2("div", { className: "t", children: title }),
+        /* @__PURE__ */ jsx2("div", { className: "s", children: sub })
+      ] }),
+      /* @__PURE__ */ jsx2(Toggle, { on: pref[k], onClick: () => togglePref(k) })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "cafcall-drawer cafcall-settings", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "cafcall-drawer-head", children: [
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+        /* @__PURE__ */ jsx2("span", { className: "cafcall-set-badge", children: /* @__PURE__ */ jsx2(Icon.settings, {}) }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          /* @__PURE__ */ jsx2("b", { children: "Settings" }),
+          /* @__PURE__ */ jsx2("div", { className: "cafcall-prole", children: cfg.sessionTitle })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx2("button", { className: "cafcall-iconbtn", style: { background: "#EEF2F7", color: "var(--caf-ink)" }, onClick: c.actions.closePanel, children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "cafcall-tabs", children: TABS.map((t) => /* @__PURE__ */ jsx2("button", { className: `cafcall-tab ${tab === t ? "on" : ""}`, onClick: () => setTab(t), children: t[0].toUpperCase() + t.slice(1) }, t)) }),
+    /* @__PURE__ */ jsx2("div", { className: "cafcall-drawer-body", children: tab === "devices" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2("div", { className: "cafcall-label", children: "Camera" }),
+      /* @__PURE__ */ jsx2("div", { className: "cafcall-preview", style: { width: "100%" }, children: /* @__PURE__ */ jsx2("div", { className: "frame", children: /* @__PURE__ */ jsx2("video", { ref: previewRef, playsInline: true, autoPlay: true, muted: true, style: { transform: pref.mirror ? "scaleX(-1)" : "none" } }) }) }),
+      /* @__PURE__ */ jsx2(Picker2, { icon: "cam", list: devices.cam, value: sel.cam, onChange: (id) => {
+        setSel((s) => ({ ...s, cam: id }));
+        c.actions.switchDevice("video", id);
+      } }),
+      /* @__PURE__ */ jsxs2("div", { className: "cafcall-picker", children: [
+        /* @__PURE__ */ jsx2("span", { className: "ic", children: /* @__PURE__ */ jsx2(Icon.settings, {}) }),
+        /* @__PURE__ */ jsx2("span", { style: { flex: 1, fontSize: 13, fontWeight: 600 }, children: "Video Quality" }),
+        /* @__PURE__ */ jsx2("select", { value: quality, onChange: (e) => setQ(e.target.value), children: QUALITIES.map((q) => /* @__PURE__ */ jsx2("option", { children: q.label }, q.label)) })
+      ] }),
+      /* @__PURE__ */ jsx2(PrefRow2, { icon: "cam", title: "Mirror My Video", sub: "Only affects your own preview", k: "mirror" }),
+      /* @__PURE__ */ jsx2(PrefRow2, { icon: "info", title: "Background Blur", sub: "Blur background for privacy \u2014 coming soon", k: "blur" }),
+      /* @__PURE__ */ jsx2("div", { className: "cafcall-label", children: "Microphone" }),
+      /* @__PURE__ */ jsx2(Picker2, { icon: "mic", list: devices.mic, value: sel.mic, onChange: (id) => {
+        setSel((s) => ({ ...s, mic: id }));
+        c.actions.switchDevice("audio", id);
+      } }),
+      /* @__PURE__ */ jsx2(PrefRow2, { icon: "mic", title: "Noise Suppression", sub: "Filter background noise for clearer audio", k: "noiseSuppression" }),
+      /* @__PURE__ */ jsx2(PrefRow2, { icon: "info", title: "Echo Cancellation", sub: "Reduce feedback and echo", k: "echoCancellation" }),
+      /* @__PURE__ */ jsx2("div", { className: "cafcall-label", children: "Speaker & Output" }),
+      /* @__PURE__ */ jsx2(Picker2, { icon: "speaker", list: devices.spk, value: sel.spk, onChange: (id) => {
+        setSel((s) => ({ ...s, spk: id }));
+        c.actions.setSpeaker(id);
+      } }),
+      /* @__PURE__ */ jsxs2("div", { className: "cafcall-sliderrow", children: [
+        /* @__PURE__ */ jsx2(Icon.speaker, {}),
+        /* @__PURE__ */ jsx2("span", { children: "Speaker Volume" }),
+        /* @__PURE__ */ jsx2("input", { type: "range", min: "0", max: "1", step: "0.05", value: c.volume, onChange: (e) => c.actions.setVolume(Number(e.target.value)) })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: "cafcall-label", children: "Bandwidth & Performance" }),
+      /* @__PURE__ */ jsx2(PrefRow2, { icon: "wifi", title: "Adaptive Bitrate", sub: "Auto-adjusts quality to network (automatic)", k: "adaptiveBitrate" }),
+      /* @__PURE__ */ jsx2(PrefRow2, { icon: "wifi", title: "Low Bandwidth Mode", sub: "Reduce video quality to save data", k: "lowBandwidth" }),
+      /* @__PURE__ */ jsx2(PrefRow2, { icon: "settings", title: "Hardware Acceleration", sub: "Use GPU for video \u2014 browser-managed", k: "hardwareAccel" })
+    ] }) : /* @__PURE__ */ jsxs2("p", { className: "cafcall-p", style: { fontSize: 13, padding: "18px 0" }, children: [
+      tab[0].toUpperCase() + tab.slice(1),
+      " settings \u2014 coming soon."
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "cafcall-settings-foot", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "cafcall-pill enc", children: [
+        /* @__PURE__ */ jsx2(Icon.lock, {}),
+        " E2E Encrypted"
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: "cafcall-btn ghost",
+          style: { width: "auto", margin: 0, padding: "9px 14px" },
+          onClick: () => {
+            setPref({ ...DEFAULT_PREF, mirror: c.mirror });
+          },
+          children: "Reset"
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: "cafcall-btn pri",
+          style: { width: "auto", margin: 0, padding: "9px 16px" },
+          onClick: c.actions.closePanel,
+          children: "Apply"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/screens.jsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var Header = ({ cfg, right }) => /* @__PURE__ */ jsxs3("div", { className: "cafcall-head", children: [
+  /* @__PURE__ */ jsxs3("div", { className: "cafcall-brand", children: [
+    /* @__PURE__ */ jsx3("span", { className: "cafcall-logo", children: cfg.logoText }),
+    /* @__PURE__ */ jsxs3("div", { style: { minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx3("div", { className: "cafcall-title", children: cfg.sessionTitle }),
+      /* @__PURE__ */ jsx3("div", { className: "cafcall-sub", children: cfg.sessionSubtitle })
+    ] })
+  ] }),
+  /* @__PURE__ */ jsx3("div", { className: "cafcall-head-right", children: right })
+] });
+var Toggle2 = ({ on, onClick }) => /* @__PURE__ */ jsx3("button", { type: "button", className: `cafcall-toggle ${on ? "on" : ""}`, onClick, "aria-pressed": on, children: /* @__PURE__ */ jsx3("i", {}) });
+function Picker({ icon, list, value, onChange }) {
+  const Ico = Icon[icon] || Icon.mic;
+  return /* @__PURE__ */ jsxs3("div", { className: "cafcall-picker", children: [
+    /* @__PURE__ */ jsx3("span", { className: "ic", children: /* @__PURE__ */ jsx3(Ico, {}) }),
+    /* @__PURE__ */ jsxs3("select", { value, onChange: (e) => onChange(e.target.value), children: [
+      /* @__PURE__ */ jsx3("option", { value: "", children: list.length ? "Default" : "No device / grant access" }),
+      list.map((d) => /* @__PURE__ */ jsx3("option", { value: d.id, children: d.label }, d.id))
+    ] })
+  ] });
+}
+function PrefRow({ title, sub, on, onToggle }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "cafcall-prefrow", children: [
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx3("div", { className: "t", children: title }),
+      /* @__PURE__ */ jsx3("div", { className: "s", children: sub })
+    ] }),
+    /* @__PURE__ */ jsx3(Toggle2, { on, onClick: onToggle })
+  ] });
+}
+function MicMeter({ stream, ready, muted }) {
+  const [level, setLevel] = useState3(0);
+  useEffect4(() => {
+    if (!stream) return;
+    let ac, raf, last = 0;
+    try {
+      ac = new (window.AudioContext || window.webkitAudioContext)();
+      const src = ac.createMediaStreamSource(stream);
+      const an = ac.createAnalyser();
+      an.fftSize = 256;
+      src.connect(an);
+      const buf = new Uint8Array(an.frequencyBinCount);
+      const tick = (t) => {
+        raf = requestAnimationFrame(tick);
+        if (t - last < 90) return;
+        last = t;
+        an.getByteFrequencyData(buf);
+        setLevel(Math.min(100, buf.reduce((a, b) => a + b, 0) / buf.length * 1.6));
+      };
+      raf = requestAnimationFrame(tick);
+    } catch {
+    }
+    return () => {
+      cancelAnimationFrame(raf);
+      ac?.close?.();
+    };
+  }, [stream]);
+  return /* @__PURE__ */ jsxs3("div", { className: "cafcall-meter", children: [
+    /* @__PURE__ */ jsx3(Icon.mic, {}),
+    /* @__PURE__ */ jsx3("span", { children: "Microphone level" }),
+    /* @__PURE__ */ jsx3("span", { className: "bar", children: /* @__PURE__ */ jsx3("i", { style: { width: `${muted ? 0 : level}%` } }) }),
+    /* @__PURE__ */ jsx3("span", { style: { color: ready ? "var(--caf-ok)" : "var(--caf-muted)", fontWeight: 600 }, children: ready ? "Detected" : "\u2014" })
+  ] });
+}
+function Lobby({ c, cfg }) {
+  const [type, setType] = useState3(c.callType || "video");
+  const [ready, setReady] = useState3(false);
+  const [stream, setStream] = useState3(null);
+  const previewRef = useRef4(null);
+  const mediaRef = useRef4(null);
+  const [devices, setDevices] = useState3({ cam: [], mic: [], spk: [] });
+  const [sel, setSel] = useState3({ cam: "", mic: "", spk: "" });
+  const [pref, setPref] = useState3({ startMuted: false, startVideoOff: false, noiseSuppression: true, lowBandwidth: false });
+  const togglePref = (k) => setPref((p) => ({ ...p, [k]: !p[k] }));
+  useEffect4(() => {
+    let stop = false;
+    c.actions.listDevices().then((list) => {
+      if (stop) return;
+      const by = (k) => list.filter((d) => d.kind === k).map((d) => ({ id: d.deviceId, label: d.label || k }));
+      setDevices({ cam: by("videoinput"), mic: by("audioinput"), spk: by("audiooutput") });
+    });
+    return () => {
+      stop = true;
+    };
+  }, [ready]);
+  useEffect4(() => {
+    let stopped = false;
+    (async () => {
+      try {
+        const s = await navigator.mediaDevices.getUserMedia({
+          video: type === "video" ? sel.cam ? { deviceId: { exact: sel.cam } } : true : false,
+          audio: sel.mic ? { deviceId: { exact: sel.mic } } : true
+        });
+        if (stopped) {
+          s.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        mediaRef.current = s;
+        setReady(true);
+        setStream(s);
+        if (previewRef.current) {
+          previewRef.current.srcObject = s;
+          previewRef.current.play?.().catch(() => {
+          });
+        }
+      } catch {
+        setReady(false);
+      }
+    })();
+    return () => {
+      stopped = true;
+      mediaRef.current?.getTracks().forEach((t) => t.stop());
+      setStream(null);
+    };
+  }, [type, sel.cam, sel.mic]);
+  const join = () => {
+    mediaRef.current?.getTracks().forEach((t) => t.stop());
+    c.actions.setCallOptions({
+      videoDeviceId: sel.cam || void 0,
+      audioDeviceId: sel.mic || void 0,
+      noiseSuppression: pref.noiseSuppression,
+      lowBandwidth: pref.lowBandwidth,
+      startMuted: pref.startMuted,
+      startVideoOff: pref.startVideoOff
+    });
+    if (sel.spk) c.actions.setSpeaker(sel.spk);
+    c.actions.start(type);
+  };
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Header, { cfg, right: /* @__PURE__ */ jsx3(EncBadge, {}) }),
+    /* @__PURE__ */ jsxs3("div", { className: "cafcall-body", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-main cafcall-center", children: [
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx3("div", { className: "cafcall-h", children: "Ready to join?" }),
+          /* @__PURE__ */ jsx3("div", { className: "cafcall-p", children: "Preview your camera and microphone before entering the call. Adjust settings on the right." })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-preview", children: [
+          /* @__PURE__ */ jsx3("div", { className: "frame", children: type === "video" ? /* @__PURE__ */ jsx3("video", { ref: previewRef, playsInline: true, autoPlay: true, muted: true, style: { opacity: pref.startVideoOff ? 0.25 : 1 } }) : /* @__PURE__ */ jsx3("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx3(Avatar, { name: cfg.self.name, src: cfg.self.avatar, size: 110 }) }) }),
+          /* @__PURE__ */ jsx3(MicMeter, { stream, ready, muted: pref.startMuted })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-side", children: [
+        /* @__PURE__ */ jsx3("div", { style: { fontWeight: 700, fontSize: 15 }, children: "Device Setup" }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-p", style: { fontSize: 13, margin: "4px 0 14px" }, children: "Select your camera, microphone and speaker before joining." }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-card cafcall-person", children: [
+          /* @__PURE__ */ jsx3(Avatar, { name: cfg.self.name, src: cfg.self.avatar, size: 40 }),
+          /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx3("div", { className: "nm", children: cfg.self.name }),
+            /* @__PURE__ */ jsxs3("div", { className: "rl", children: [
+              cfg.self.role,
+              " \xB7 You"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { className: "cafcall-pill ok", children: [
+            /* @__PURE__ */ jsx3("span", { className: "cafcall-dot" }),
+            " ",
+            ready ? "Ready" : "\u2026"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-label", children: "Call type" }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-seg", children: [
+          /* @__PURE__ */ jsxs3("button", { className: `cafcall-btn ${type === "video" ? "sel" : "ghost"}`, onClick: () => setType("video"), children: [
+            /* @__PURE__ */ jsx3(Icon.cam, {}),
+            " Video Call"
+          ] }),
+          /* @__PURE__ */ jsxs3("button", { className: `cafcall-btn ${type === "voice" ? "sel" : "ghost"}`, onClick: () => setType("voice"), children: [
+            /* @__PURE__ */ jsx3(Icon.mic, {}),
+            " Voice Only"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-label", children: "Devices" }),
+        type === "video" && /* @__PURE__ */ jsx3(Picker, { icon: "cam", list: devices.cam, value: sel.cam, onChange: (v) => setSel((s) => ({ ...s, cam: v })) }),
+        /* @__PURE__ */ jsx3(Picker, { icon: "mic", list: devices.mic, value: sel.mic, onChange: (v) => setSel((s) => ({ ...s, mic: v })) }),
+        /* @__PURE__ */ jsx3(Picker, { icon: "speaker", list: devices.spk, value: sel.spk, onChange: (v) => setSel((s) => ({ ...s, spk: v })) }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-label", children: "Preferences" }),
+        /* @__PURE__ */ jsx3(PrefRow, { title: "Start muted", sub: "Join with microphone off", on: pref.startMuted, onToggle: () => togglePref("startMuted") }),
+        type === "video" && /* @__PURE__ */ jsx3(PrefRow, { title: "Start with camera off", sub: "Join with video disabled", on: pref.startVideoOff, onToggle: () => togglePref("startVideoOff") }),
+        /* @__PURE__ */ jsx3(PrefRow, { title: "Noise suppression", sub: "Filter background noise for clearer audio", on: pref.noiseSuppression, onToggle: () => togglePref("noiseSuppression") }),
+        /* @__PURE__ */ jsx3(PrefRow, { title: "Low-bandwidth mode", sub: "Reduce video quality to save data", on: pref.lowBandwidth, onToggle: () => togglePref("lowBandwidth") }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-label", children: "Calling" }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-card cafcall-person", children: [
+          /* @__PURE__ */ jsx3(Avatar, { name: cfg.peer.name, src: cfg.peer.avatar, size: 40 }),
+          /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx3("div", { className: "nm", children: cfg.peer.name }),
+            /* @__PURE__ */ jsx3("div", { className: "rl", children: cfg.peer.role })
+          ] }),
+          /* @__PURE__ */ jsx3("span", { className: "cafcall-pill", children: "Waiting" })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: { marginTop: 18 }, children: [
+          /* @__PURE__ */ jsxs3("button", { className: "cafcall-btn pri", onClick: join, children: [
+            /* @__PURE__ */ jsx3(Icon.phone, {}),
+            " Join Call"
+          ] }),
+          /* @__PURE__ */ jsx3("button", { className: "cafcall-btn ghost", onClick: c.actions.reset, children: "Cancel" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Calling({ c, cfg }) {
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Header, { cfg, right: /* @__PURE__ */ jsx3(EncBadge, {}) }),
+    /* @__PURE__ */ jsx3("div", { className: "cafcall-body", children: /* @__PURE__ */ jsxs3("div", { className: "cafcall-main cafcall-center", children: [
+      /* @__PURE__ */ jsx3("div", { className: "cafcall-pulse", children: /* @__PURE__ */ jsx3(Avatar, { name: cfg.peer.name, src: cfg.peer.avatar, size: 128 }) }),
+      /* @__PURE__ */ jsxs3("div", { children: [
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-h", children: cfg.peer.name }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-p", children: cfg.peer.role })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 10, color: "var(--caf-muted)" }, children: [
+        "Calling ",
+        /* @__PURE__ */ jsxs3("span", { className: "cafcall-dots", children: [
+          /* @__PURE__ */ jsx3("i", {}),
+          /* @__PURE__ */ jsx3("i", {}),
+          /* @__PURE__ */ jsx3("i", {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3("span", { className: "cafcall-pill", children: c.callType === "video" ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(Icon.cam, {}),
+        " Video call"
+      ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx3(Icon.mic, {}),
+        " Voice call"
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsx3("div", { className: "cafcall-controls", children: /* @__PURE__ */ jsx3(Ctl, { icon: "end", label: "Cancel", tone: "danger", onClick: c.actions.hangup }) })
+  ] });
+}
+function Incoming({ c, cfg }) {
+  const video = c.callType === "video";
+  const [ans, setAns] = useState3({ cam: video, mic: true });
+  const [connecting, setConnecting] = useState3(false);
+  const accept = () => {
+    if (connecting) return;
+    setConnecting(true);
+    c.actions.setCallOptions({ startVideoOff: video && !ans.cam, startMuted: !ans.mic });
+    if (video && !ans.cam) c.actions.acceptVoice();
+    else c.actions.accept();
+  };
+  const acceptVoiceOnly = () => {
+    if (connecting) return;
+    setConnecting(true);
+    c.actions.acceptVoice();
+  };
+  useEffect4(() => {
+    if (!connecting) return;
+    const t = setTimeout(() => setConnecting(false), 2e4);
+    return () => clearTimeout(t);
+  }, [connecting]);
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Header, { cfg, right: /* @__PURE__ */ jsx3(EncBadge, {}) }),
+    /* @__PURE__ */ jsxs3("div", { className: "cafcall-body", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-main cafcall-center", children: [
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-pulse", children: /* @__PURE__ */ jsx3(Avatar, { name: cfg.peer.name, src: cfg.peer.avatar, size: 128 }) }),
+        /* @__PURE__ */ jsxs3("div", { children: [
+          /* @__PURE__ */ jsx3("div", { className: "cafcall-h", children: cfg.peer.name }),
+          /* @__PURE__ */ jsx3("div", { className: "cafcall-p", children: cfg.peer.role })
+        ] }),
+        /* @__PURE__ */ jsx3("span", { className: "cafcall-pill", children: video ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(Icon.cam, {}),
+          " Incoming Video Call"
+        ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(Icon.mic, {}),
+          " Incoming Voice Call"
+        ] }) }),
+        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 10, color: "var(--caf-muted)" }, children: [
+          "Ringing ",
+          /* @__PURE__ */ jsxs3("span", { className: "cafcall-dots", children: [
+            /* @__PURE__ */ jsx3("i", {}),
+            /* @__PURE__ */ jsx3("i", {}),
+            /* @__PURE__ */ jsx3("i", {})
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-infostrip", children: [
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("div", { className: "k", children: "Call Type" }),
+            /* @__PURE__ */ jsx3("div", { className: "v", children: video ? "Video" : "Voice" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("div", { className: "k", children: "Network" }),
+            /* @__PURE__ */ jsx3("div", { className: "v", style: { color: "var(--caf-ok)" }, children: "Good" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { children: [
+            /* @__PURE__ */ jsx3("div", { className: "k", children: "Encryption" }),
+            /* @__PURE__ */ jsx3("div", { className: "v", children: "E2E" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-side", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-note ok", children: [
+          /* @__PURE__ */ jsxs3("b", { style: { color: "var(--caf-primary)" }, children: [
+            "Incoming ",
+            c.callType,
+            " call"
+          ] }),
+          /* @__PURE__ */ jsx3("br", {}),
+          cfg.peer.name,
+          " is calling you",
+          cfg.sessionTitle ? ` for a ${cfg.sessionTitle}.` : "."
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-label", children: "Caller" }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-card cafcall-person", children: [
+          /* @__PURE__ */ jsx3(Avatar, { name: cfg.peer.name, src: cfg.peer.avatar, size: 40 }),
+          /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx3("div", { className: "nm", children: cfg.peer.name }),
+            /* @__PURE__ */ jsx3("div", { className: "rl", children: cfg.peer.role })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { className: "cafcall-pill ok", children: [
+            /* @__PURE__ */ jsx3("span", { className: "cafcall-dot" }),
+            " Calling"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-label", children: "Answer with" }),
+        video && /* @__PURE__ */ jsxs3("div", { className: "cafcall-answerrow", children: [
+          /* @__PURE__ */ jsx3("span", { className: "ic", children: /* @__PURE__ */ jsx3(Icon.cam, {}) }),
+          /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx3("div", { className: "t", children: "Camera" }),
+            /* @__PURE__ */ jsx3("div", { className: "s", children: "Join with video" })
+          ] }),
+          /* @__PURE__ */ jsx3(Toggle2, { on: ans.cam, onClick: () => setAns((a) => ({ ...a, cam: !a.cam })) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-answerrow", children: [
+          /* @__PURE__ */ jsx3("span", { className: "ic", children: /* @__PURE__ */ jsx3(Icon.mic, {}) }),
+          /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx3("div", { className: "t", children: "Microphone" }),
+            /* @__PURE__ */ jsx3("div", { className: "s", children: "Join with audio" })
+          ] }),
+          /* @__PURE__ */ jsx3(Toggle2, { on: ans.mic, onClick: () => setAns((a) => ({ ...a, mic: !a.mic })) })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-answerrow", children: [
+          /* @__PURE__ */ jsx3("span", { className: "ic", children: /* @__PURE__ */ jsx3(Icon.wifi, {}) }),
+          /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx3("div", { className: "t", children: "Network Quality" }),
+            /* @__PURE__ */ jsx3("div", { className: "s", children: "Good connection" })
+          ] }),
+          /* @__PURE__ */ jsx3("span", { className: "cafcall-pill ok", children: "Good" })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-label", children: "Can\u2019t answer?" }),
+        /* @__PURE__ */ jsxs3("button", { className: "cafcall-answerrow as-btn", onClick: c.actions.decline, children: [
+          /* @__PURE__ */ jsx3("span", { className: "ic", children: /* @__PURE__ */ jsx3(Icon.chat, {}) }),
+          /* @__PURE__ */ jsxs3("div", { style: { flex: 1, textAlign: "left" }, children: [
+            /* @__PURE__ */ jsx3("div", { className: "t", children: "Send a Message" }),
+            /* @__PURE__ */ jsxs3("div", { className: "s", children: [
+              "Let ",
+              cfg.peer.name,
+              " know you\u2019re unavailable"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: { marginTop: 18, display: "flex", gap: 10 }, children: [
+          /* @__PURE__ */ jsxs3("button", { className: "cafcall-btn dngghost", onClick: c.actions.decline, disabled: connecting, children: [
+            /* @__PURE__ */ jsx3(Icon.end, {}),
+            " Decline"
+          ] }),
+          /* @__PURE__ */ jsx3("button", { className: "cafcall-btn pri", onClick: accept, disabled: connecting, children: connecting ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsx3(Icon.spinner, {}),
+            " Connecting\u2026"
+          ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+            /* @__PURE__ */ jsx3(Icon.phone, {}),
+            " Accept Call"
+          ] }) })
+        ] }),
+        video && /* @__PURE__ */ jsx3("button", { className: "cafcall-btn ghost", style: { marginTop: 10 }, onClick: acceptVoiceOnly, disabled: connecting, children: connecting ? /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(Icon.spinner, {}),
+          " Connecting\u2026"
+        ] }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+          /* @__PURE__ */ jsx3(Icon.mic, {}),
+          " Answer as Voice Only"
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+function MoreSheet({ c, videoCall }) {
+  if (!c.moreOpen) return null;
+  const item = (icon, label, onClick, on) => /* @__PURE__ */ jsxs3("button", { className: "cafcall-sheet-item", onClick: () => {
+    onClick();
+    c.actions.closeMore();
+  }, children: [
+    /* @__PURE__ */ jsx3("span", { className: `ic ${on ? "on" : ""}`, children: (() => {
+      const G = Icon[icon] || Icon.more;
+      return /* @__PURE__ */ jsx3(G, {});
+    })() }),
+    label
+  ] });
+  return /* @__PURE__ */ jsx3("div", { className: "cafcall-sheet-scrim", onClick: c.actions.closeMore, children: /* @__PURE__ */ jsxs3("div", { className: "cafcall-sheet", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx3("div", { className: "cafcall-sheet-grab" }),
+    /* @__PURE__ */ jsxs3("div", { className: "cafcall-sheet-grid", children: [
+      item("people", "People", () => c.actions.openPanel("people")),
+      item("chat", "Chat", () => c.actions.openPanel("chat")),
+      videoCall && item("share", c.sharing ? "Stop Share" : "Share", c.actions.toggleShare, c.sharing),
+      item("settings", "Settings", () => c.actions.openPanel("settings"))
+    ] })
+  ] }) });
+}
+function SidePanel({ c, cfg }) {
+  const [draft, setDraft] = useState3("");
+  const endRef = useRef4(null);
+  useEffect4(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [c.messages, c.panel]);
+  if (!c.panel) return null;
+  const send = () => {
+    c.actions.sendMessage(draft);
+    setDraft("");
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "cafcall-drawer", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "cafcall-drawer-head", children: [
+      /* @__PURE__ */ jsx3("b", { children: c.panel === "people" ? "People" : "Chat" }),
+      /* @__PURE__ */ jsx3("button", { className: "cafcall-iconbtn", style: { background: "#EEF2F7", color: "var(--caf-ink)" }, onClick: c.actions.closePanel, children: "\u2715" })
+    ] }),
+    c.panel === "people" ? /* @__PURE__ */ jsx3("div", { className: "cafcall-drawer-body", children: [
+      { ...cfg.self, you: true, muted: c.muted, off: !c.cameraOn },
+      { ...cfg.peer, you: false, muted: c.peerMuted, off: c.peerCameraOff }
+    ].map((p, i) => /* @__PURE__ */ jsxs3("div", { className: "cafcall-person", style: { padding: "10px 4px" }, children: [
+      /* @__PURE__ */ jsx3(Avatar, { name: p.name, src: p.avatar, size: 40 }),
+      /* @__PURE__ */ jsxs3("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsxs3("div", { className: "nm", children: [
+          p.name,
+          p.you ? " (You)" : ""
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "rl", children: p.role })
+      ] }),
+      /* @__PURE__ */ jsx3("span", { className: "ic", style: { color: p.muted ? "var(--caf-danger)" : "var(--caf-muted)" }, children: p.muted ? /* @__PURE__ */ jsx3(Icon.micOff, {}) : /* @__PURE__ */ jsx3(Icon.mic, {}) }),
+      c.callType !== "voice" && /* @__PURE__ */ jsx3("span", { className: "ic", style: { color: p.off ? "var(--caf-danger)" : "var(--caf-muted)" }, children: p.off ? /* @__PURE__ */ jsx3(Icon.camOff, {}) : /* @__PURE__ */ jsx3(Icon.cam, {}) })
+    ] }, i)) }) : /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-drawer-body cafcall-chat", children: [
+        c.messages.length === 0 && /* @__PURE__ */ jsx3("div", { className: "cafcall-p", style: { fontSize: 13 }, children: "No messages yet. Say hello \u{1F44B}" }),
+        c.messages.map((m) => {
+          const mine = String(m.sender) !== String(c.peerId);
+          return /* @__PURE__ */ jsx3("div", { className: `cafcall-msg ${mine ? "mine" : ""}`, children: m.text }, m.id);
+        }),
+        /* @__PURE__ */ jsx3("div", { ref: endRef })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-chat-compose", children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            value: draft,
+            onChange: (e) => setDraft(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") send();
+            },
+            placeholder: "Type a message\u2026"
+          }
+        ),
+        /* @__PURE__ */ jsx3("button", { className: "cafcall-btn pri", style: { width: "auto", padding: "10px 14px" }, onClick: send, children: "Send" })
+      ] })
+    ] })
+  ] });
+}
+var ControlBar = ({ c, videoCall, dark }) => /* @__PURE__ */ jsxs3("div", { className: `cafcall-controls ${dark ? "dark" : ""}`, children: [
+  /* @__PURE__ */ jsxs3("div", { className: "cafcall-controls-l", children: [
+    /* @__PURE__ */ jsx3(Ctl, { icon: "people", name: "people", label: "People", active: c.panel === "people", onClick: () => c.actions.openPanel("people") }),
+    /* @__PURE__ */ jsx3(Ctl, { icon: "chat", name: "chat", label: "Chat", active: c.panel === "chat", onClick: () => c.actions.openPanel("chat") })
+  ] }),
+  /* @__PURE__ */ jsxs3("div", { className: "cafcall-controls-c", children: [
+    /* @__PURE__ */ jsx3(Ctl, { icon: c.muted ? "micOff" : "mic", name: "mute", label: c.muted ? "Unmute" : "Mute", on: c.muted, onClick: c.actions.toggleMute }),
+    videoCall && /* @__PURE__ */ jsx3(Ctl, { icon: c.cameraOn ? "cam" : "camOff", name: "camera", label: c.cameraOn ? "Camera" : "Camera Off", on: !c.cameraOn, onClick: c.actions.toggleCamera }),
+    /* @__PURE__ */ jsx3(Ctl, { icon: "end", name: "end", label: "End Call", tone: "danger", onClick: c.actions.hangup }),
+    /* @__PURE__ */ jsx3(Ctl, { icon: "speaker", name: "speaker", label: "Speaker", active: true, onClick: () => {
+    } }),
+    videoCall && /* @__PURE__ */ jsx3(Ctl, { icon: "share", name: "share", label: c.sharing ? "Stop Share" : "Share", active: c.sharing, onClick: c.actions.toggleShare })
+  ] }),
+  /* @__PURE__ */ jsxs3("div", { className: "cafcall-controls-r", children: [
+    /* @__PURE__ */ jsx3(Ctl, { icon: "more", name: "more", label: "More", active: c.moreOpen, onClick: c.actions.toggleMore }),
+    /* @__PURE__ */ jsx3(Ctl, { icon: "settings", name: "settings", label: "Settings", active: c.panel === "settings", onClick: () => c.actions.openPanel("settings") })
+  ] })
+] });
+function ActiveVideo({ c, cfg }) {
+  const q = qualityFromStats(null);
+  const speaking = !c.peerMuted;
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3("div", { className: "cafcall-body", style: { flexDirection: "column" }, children: /* @__PURE__ */ jsxs3("div", { className: "cafcall-stage", children: [
+      /* @__PURE__ */ jsx3(Stream, { stream: c.remoteStream, sinkId: c.speakerId, volume: c.volume }),
+      c.sharing && /* @__PURE__ */ jsxs3("div", { className: "cafcall-sharebar", children: [
+        /* @__PURE__ */ jsx3(Icon.share, {}),
+        " You\u2019re sharing your screen"
+      ] }),
+      c.peerCameraOff && /* @__PURE__ */ jsx3("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "#fff" }, children: /* @__PURE__ */ jsx3(Avatar, { name: cfg.peer.name, src: cfg.peer.avatar, size: 110 }) }),
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-stage-top", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-stack", children: [
+          /* @__PURE__ */ jsxs3("span", { className: "cafcall-titlechip", children: [
+            /* @__PURE__ */ jsx3("span", { className: "cafcall-logo", children: cfg.logoText }),
+            /* @__PURE__ */ jsxs3("span", { children: [
+              /* @__PURE__ */ jsx3("b", { children: cfg.sessionTitle }),
+              /* @__PURE__ */ jsx3("small", { children: cfg.sessionSubtitle })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { className: "cafcall-peerchip", children: [
+            cfg.peer.avatar && /* @__PURE__ */ jsx3("img", { src: cfg.peer.avatar, alt: "" }),
+            /* @__PURE__ */ jsx3("b", { children: cfg.peer.name }),
+            /* @__PURE__ */ jsxs3("span", { style: { opacity: 0.85 }, children: [
+              "\xB7 ",
+              cfg.peer.role,
+              c.peerMuted ? " \xB7 muted" : speaking ? " \xB7 Speaking" : ""
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-topmid", children: /* @__PURE__ */ jsxs3("span", { className: "cafcall-pill ok", children: [
+          /* @__PURE__ */ jsx3("span", { className: "cafcall-dot" }),
+          " Connected\xA0\xA0",
+          fmtTime(c.elapsed)
+        ] }) }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-topright", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "row", children: [
+            /* @__PURE__ */ jsxs3("span", { className: "cafcall-pill enc", children: [
+              /* @__PURE__ */ jsx3(Icon.lock, {}),
+              " E2E Encrypted"
+            ] }),
+            /* @__PURE__ */ jsx3("button", { className: "cafcall-iconbtn", title: "Call info", children: /* @__PURE__ */ jsx3(Icon.info, {}) }),
+            /* @__PURE__ */ jsx3("button", { className: "cafcall-iconbtn", title: "Minimize", onClick: c.actions.minimize, children: /* @__PURE__ */ jsx3(Icon.shrink, {}) })
+          ] }),
+          /* @__PURE__ */ jsxs3("span", { className: `cafcall-pill ${q.tone}`, children: [
+            /* @__PURE__ */ jsx3(Icon.wifi, {}),
+            " ",
+            q.label
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-selftile", children: [
+        c.cameraOn ? /* @__PURE__ */ jsx3(Stream, { stream: c.localStream, muted: true, mirror: c.mirror }) : /* @__PURE__ */ jsx3("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx3(Avatar, { name: cfg.self.name, src: cfg.self.avatar, size: 44 }) }),
+        /* @__PURE__ */ jsxs3("span", { className: "cafcall-name", children: [
+          cfg.self.name,
+          " (You) ",
+          c.muted ? /* @__PURE__ */ jsx3(Icon.micOff, {}) : /* @__PURE__ */ jsx3(Icon.mic, {})
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-floatctl", children: [
+        /* @__PURE__ */ jsx3("button", { className: "cafcall-floatbtn", title: "Flip camera", onClick: c.actions.toggleCamera, children: /* @__PURE__ */ jsx3(Icon.cam, {}) }),
+        /* @__PURE__ */ jsx3("button", { className: "cafcall-floatbtn end", title: "End call", onClick: c.actions.hangup, children: /* @__PURE__ */ jsx3(Icon.end, {}) }),
+        /* @__PURE__ */ jsx3("button", { className: "cafcall-floatbtn", title: c.muted ? "Unmute" : "Mute", onClick: c.actions.toggleMute, children: c.muted ? /* @__PURE__ */ jsx3(Icon.micOff, {}) : /* @__PURE__ */ jsx3(Icon.mic, {}) })
+      ] }),
+      /* @__PURE__ */ jsx3(SidePanel, { c, cfg }),
+      /* @__PURE__ */ jsx3(SettingsPanel, { c, cfg })
+    ] }) }),
+    /* @__PURE__ */ jsx3(ControlBar, { c, videoCall: true, dark: true }),
+    /* @__PURE__ */ jsx3(MoreSheet, { c, videoCall: true })
+  ] });
+}
+function ActiveVoice({ c, cfg }) {
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Header, { cfg, right: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsxs3("span", { className: "cafcall-pill ok", children: [
+        /* @__PURE__ */ jsx3("span", { className: "cafcall-dot" }),
+        " Voice Only \xB7 ",
+        fmtTime(c.elapsed)
+      ] }),
+      /* @__PURE__ */ jsx3(EncBadge, {})
+    ] }) }),
+    /* @__PURE__ */ jsx3("div", { className: "cafcall-body", children: /* @__PURE__ */ jsxs3("div", { className: "cafcall-main cafcall-voice", children: [
+      /* @__PURE__ */ jsx3(SidePanel, { c, cfg }),
+      /* @__PURE__ */ jsx3(SettingsPanel, { c, cfg }),
+      /* @__PURE__ */ jsx3("div", { className: "cafcall-note warn", children: "Video disabled \u2014 voice call active." }),
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-voice-row", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-part", children: [
+          /* @__PURE__ */ jsx3("div", { className: `cafcall-ring ${!c.peerMuted ? "speaking" : ""}`, children: /* @__PURE__ */ jsx3(Avatar, { name: cfg.peer.name, src: cfg.peer.avatar, size: 120 }) }),
+          /* @__PURE__ */ jsx3("div", { className: "cafcall-pname", children: cfg.peer.name }),
+          /* @__PURE__ */ jsx3("div", { className: "cafcall-prole", children: cfg.peer.role }),
+          !c.peerMuted ? /* @__PURE__ */ jsx3(Waveform, {}) : /* @__PURE__ */ jsxs3("span", { className: "cafcall-pill warn", children: [
+            /* @__PURE__ */ jsx3(Icon.micOff, {}),
+            " Muted"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-part", children: [
+          /* @__PURE__ */ jsx3("div", { className: `cafcall-ring ${!c.muted ? "speaking" : ""}`, children: /* @__PURE__ */ jsx3(Avatar, { name: cfg.self.name, src: cfg.self.avatar, size: 120 }) }),
+          /* @__PURE__ */ jsx3("div", { className: "cafcall-pname", children: cfg.self.name }),
+          /* @__PURE__ */ jsxs3("div", { className: "cafcall-prole", children: [
+            cfg.self.role,
+            " \xB7 You"
+          ] }),
+          c.muted ? /* @__PURE__ */ jsxs3("span", { className: "cafcall-pill warn", children: [
+            /* @__PURE__ */ jsx3(Icon.micOff, {}),
+            " Microphone Muted"
+          ] }) : /* @__PURE__ */ jsx3(Waveform, {})
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx3(ControlBar, { c, videoCall: false }),
+    /* @__PURE__ */ jsx3(MoreSheet, { c, videoCall: false })
+  ] });
+}
+function Reconnecting({ c, cfg }) {
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Header, { cfg, right: /* @__PURE__ */ jsxs3("span", { className: "cafcall-pill warn", children: [
+      /* @__PURE__ */ jsx3("span", { className: "cafcall-dot" }),
+      " Reconnecting"
+    ] }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "cafcall-body", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-main cafcall-center", style: { background: "var(--caf-stage)", color: "#fff" }, children: [
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-icon-lg cafcall-spin", style: { background: "rgba(245,158,11,.15)", color: "var(--caf-warn)" }, children: /* @__PURE__ */ jsx3(Icon.wifi, {}) }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-h", style: { color: "#fff" }, children: "Reconnecting\u2026" }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-p", style: { color: "#cbd5e1" }, children: "Your connection was interrupted. Restoring the call automatically." })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-side", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-note warn", children: [
+          /* @__PURE__ */ jsx3("b", { children: "Connection lost." }),
+          /* @__PURE__ */ jsx3("br", {}),
+          "Network instability detected \u2014 attempting to restore your call."
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: { marginTop: 18 }, children: [
+          /* @__PURE__ */ jsxs3("button", { className: "cafcall-btn ghost", onClick: c.actions.switchToVoice, children: [
+            /* @__PURE__ */ jsx3(Icon.mic, {}),
+            " Switch to Voice Only"
+          ] }),
+          /* @__PURE__ */ jsxs3("button", { className: "cafcall-btn dngghost", onClick: c.actions.hangup, children: [
+            /* @__PURE__ */ jsx3(Icon.end, {}),
+            " End Call"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function PermissionDenied({ c, cfg }) {
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Header, { cfg }),
+    /* @__PURE__ */ jsx3("div", { className: "cafcall-body", children: /* @__PURE__ */ jsxs3("div", { className: "cafcall-main cafcall-center", children: [
+      /* @__PURE__ */ jsx3("div", { className: "cafcall-icon-lg", style: { background: "#FEF2F2", color: "var(--caf-danger)" }, children: /* @__PURE__ */ jsx3(Icon.camOff, {}) }),
+      /* @__PURE__ */ jsx3("div", { className: "cafcall-h", children: "Camera & microphone blocked" }),
+      /* @__PURE__ */ jsx3("div", { className: "cafcall-p", children: c.error || "ChaterAfrika needs access to your camera and microphone to start the call. Enable them in your browser\u2019s site settings, then try again." }),
+      /* @__PURE__ */ jsxs3("div", { style: { display: "flex", gap: 10 }, children: [
+        /* @__PURE__ */ jsx3("button", { className: "cafcall-btn pri", onClick: () => c.actions.start(c.callType), style: { width: 160 }, children: "Try Again" }),
+        /* @__PURE__ */ jsx3("button", { className: "cafcall-btn ghost", onClick: c.actions.reset, style: { width: 120 }, children: "Cancel" })
+      ] })
+    ] }) })
+  ] });
+}
+var REASON = {
+  local_hangup: "You ended the call.",
+  remote_hangup: "The other participant ended the call.",
+  declined: "Call declined.",
+  declined_local: "You declined the call.",
+  no_answer: "No answer.",
+  connection_lost: "The call ended due to a lost connection."
+};
+function Ended({ c, cfg }) {
+  const [rating, setRating] = useState3(0);
+  const [sent, setSent] = useState3(false);
+  const info = c.endedInfo || {};
+  const stats = info.stats || {};
+  const rate = (n) => {
+    setRating(n);
+    setSent(true);
+    cfg.onRate?.(n);
+  };
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx3(Header, { cfg, right: /* @__PURE__ */ jsx3(EncBadge, {}) }),
+    /* @__PURE__ */ jsxs3("div", { className: "cafcall-body", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-main cafcall-center", children: [
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-icon-lg", style: { background: "#DCFCE7", color: "var(--caf-ok)" }, children: /* @__PURE__ */ jsx3(Icon.check, {}) }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-h", children: "Call Ended" }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-p", children: [
+          REASON[info.reason] || "The call has concluded.",
+          " A summary is below."
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 26 }, children: [
+          /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
+            /* @__PURE__ */ jsx3(Avatar, { name: cfg.self.name, src: cfg.self.avatar, size: 56 }),
+            /* @__PURE__ */ jsx3("div", { className: "cafcall-prole", style: { marginTop: 6 }, children: cfg.self.name })
+          ] }),
+          /* @__PURE__ */ jsx3(Icon.check, {}),
+          /* @__PURE__ */ jsxs3("div", { style: { textAlign: "center" }, children: [
+            /* @__PURE__ */ jsx3(Avatar, { name: cfg.peer.name, src: cfg.peer.avatar, size: 56 }),
+            /* @__PURE__ */ jsx3("div", { className: "cafcall-prole", style: { marginTop: 6 }, children: cfg.peer.name })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-stats", style: { width: "min(520px,100%)" }, children: [
+          /* @__PURE__ */ jsxs3("div", { className: "cafcall-stat", children: [
+            /* @__PURE__ */ jsx3("div", { className: "v", children: fmtTime(info.seconds || 0) }),
+            /* @__PURE__ */ jsx3("div", { className: "k", children: "Duration" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "cafcall-stat", children: [
+            /* @__PURE__ */ jsx3("div", { className: "v", children: c.callType === "video" ? "HD" : "Voice" }),
+            /* @__PURE__ */ jsx3("div", { className: "k", children: "Type" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "cafcall-stat", children: [
+            /* @__PURE__ */ jsx3("div", { className: "v", children: qualityFromStats(stats).label }),
+            /* @__PURE__ */ jsx3("div", { className: "k", children: "Network" })
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "cafcall-stat", children: [
+            /* @__PURE__ */ jsx3("div", { className: "v", children: stats.rtt_ms != null ? `${Math.round(stats.rtt_ms)}ms` : "\u2014" }),
+            /* @__PURE__ */ jsx3("div", { className: "k", children: "Latency" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "cafcall-side", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "cafcall-note ok", children: [
+          /* @__PURE__ */ jsx3("b", { style: { color: "var(--caf-primary)" }, children: "Call complete" }),
+          /* @__PURE__ */ jsx3("br", {}),
+          "Both participants were connected for the session."
+        ] }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-label", children: "Rate this call" }),
+        /* @__PURE__ */ jsx3("div", { className: "cafcall-stars", children: [1, 2, 3, 4, 5].map((n) => /* @__PURE__ */ jsx3("button", { className: `cafcall-star ${n <= rating ? "on" : ""}`, onClick: () => rate(n), children: "\u2605" }, n)) }),
+        sent && /* @__PURE__ */ jsx3("div", { className: "cafcall-prole", style: { marginTop: 8 }, children: "Thanks for your feedback!" }),
+        /* @__PURE__ */ jsxs3("div", { style: { marginTop: 18 }, children: [
+          /* @__PURE__ */ jsxs3("button", { className: "cafcall-btn pri", onClick: () => c.actions.openLobby(c.callType), children: [
+            /* @__PURE__ */ jsx3(Icon.phone, {}),
+            " Start New Call"
+          ] }),
+          /* @__PURE__ */ jsx3("button", { className: "cafcall-btn ghost", onClick: c.actions.reset, children: "Close" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/CallUI.jsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function MiniBar({ c, cfg }) {
+  return /* @__PURE__ */ jsxs4("div", { className: "cafcall-mini", style: { "--caf-primary": cfg.primaryColor }, children: [
+    /* @__PURE__ */ jsx4("button", { className: "cafcall-mini-expand", onClick: c.actions.maximize, title: "Expand call", children: /* @__PURE__ */ jsx4(Icon.shrink, {}) }),
+    /* @__PURE__ */ jsxs4("div", { className: "cafcall-mini-info", children: [
+      /* @__PURE__ */ jsx4("div", { className: "t", children: cfg.peer.name }),
+      /* @__PURE__ */ jsxs4("div", { className: "s", children: [
+        /* @__PURE__ */ jsx4("span", { className: "cafcall-dot", style: { color: "var(--caf-ok)" } }),
+        " ",
+        fmtTime(c.elapsed)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "cafcall-mini-ctls", children: [
+      /* @__PURE__ */ jsx4(Ctl, { icon: c.muted ? "micOff" : "mic", label: "", on: c.muted, onClick: c.actions.toggleMute }),
+      c.callType !== "voice" && /* @__PURE__ */ jsx4(Ctl, { icon: c.cameraOn ? "cam" : "camOff", label: "", on: !c.cameraOn, onClick: c.actions.toggleCamera }),
+      /* @__PURE__ */ jsx4(Ctl, { icon: "end", label: "", tone: "danger", onClick: c.actions.hangup })
+    ] })
+  ] });
+}
+function CallUI({ controller, config = {}, embed = false }) {
+  const c = controller;
+  const cfg = {
+    brandName: "ChaterAfrika",
+    logoText: "CA",
+    sessionTitle: "Call",
+    sessionSubtitle: "Secured via ChaterAfrika",
+    primaryColor: "#2563EB",
+    self: { name: "You", role: "Participant", avatar: null },
+    peer: { name: "Guest", role: "Participant", avatar: null },
+    onRate: config.onRate,
+    ...config
+  };
+  if (c) c.actions.openChat = config.onChat;
+  useEffect5(() => {
+    injectCallStyles();
+  }, []);
+  if (!c || c.phase === "idle") return null;
+  if (c.minimized && (c.phase === "active" || c.phase === "reconnecting")) {
+    return /* @__PURE__ */ jsx4(MiniBar, { c, cfg });
+  }
+  const SCREENS = {
+    lobby: Lobby,
+    outgoing: Calling,
+    incoming: Incoming,
+    active: c.callType === "voice" ? ActiveVoice : ActiveVideo,
+    reconnecting: Reconnecting,
+    permission_denied: PermissionDenied,
+    ended: Ended
+  };
+  const Screen = SCREENS[c.phase] || ActiveVideo;
+  return /* @__PURE__ */ jsx4("div", { className: `cafcall ${embed ? "cafcall-embed" : ""}`, style: { "--caf-primary": cfg.primaryColor }, children: /* @__PURE__ */ jsx4(Screen, { c, cfg }) });
+}
+export {
+  CallUI,
+  CallUI as default,
+  useCall
+};