@16x/webphone-sdk 3.0.1

package/dist/ui/index.js

@@ -0,0 +1,1044 @@
+//#region src/ui/i18n/en-US.ts
+var e = {
+	call: "Call",
+	numberLabel: "Number",
+	statusReady: "Ready",
+	statusSetup: "Not initialized",
+	statusConnecting: "Connecting",
+	statusIncoming: "Incoming call",
+	statusActive: "On a call",
+	statusHeld: "On hold",
+	statusDialing: "Dialing",
+	statusEnded: "Call ended",
+	statusFailed: "Call failed",
+	statusUnsupported: "Unsupported browser",
+	statusPermission: "Microphone unavailable",
+	statusError: "Unable to continue",
+	incoming: "Incoming call",
+	answer: "Answer",
+	reject: "Decline",
+	hangup: "Hang up",
+	mute: "Mute",
+	unmute: "Unmute",
+	hold: "Hold",
+	resume: "Resume",
+	transfer: "Transfer",
+	blindTransfer: "Blind transfer",
+	more: "More",
+	devices: "Devices",
+	enablePhone: "Enable phone",
+	retryPermission: "Check again",
+	permissionTitle: "Microphone unavailable",
+	permissionBody: "Allow microphone access in the browser settings, then check again.",
+	errorTitle: "Unable to continue",
+	errorBody: "Check the network, origin allowlist, or agent permission, then retry.",
+	currentCall: "Current call",
+	inbound: "Inbound",
+	outbound: "Outbound",
+	foregroundChecking: "Back in foreground, checking the connection",
+	foregroundFailed: "Foreground recovery failed. Retry.",
+	signIn: "Sign in",
+	signOut: "Sign out",
+	outboundCall: "Outbound",
+	internalCall: "Internal",
+	agentIdle: "Available",
+	agentBusy: "Busy",
+	agentBreak: "Break",
+	agentBusyHint: "Busy is controlled by the call or server",
+	rowSignIn: "Presence",
+	rowCall: "Call",
+	rowAgent: "Agent",
+	extensionLabel: "Extension",
+	extensionPlaceholder: "Optional, assigned by the server"
+}, t = {
+	call: "呼叫",
+	numberLabel: "号码",
+	statusReady: "可拨号",
+	statusSetup: "未初始化",
+	statusConnecting: "正在连接",
+	statusIncoming: "来电",
+	statusActive: "通话中",
+	statusHeld: "保持中",
+	statusDialing: "正在拨号",
+	statusEnded: "通话结束",
+	statusFailed: "呼叫失败",
+	statusUnsupported: "不支持的浏览器",
+	statusPermission: "无法使用麦克风",
+	statusError: "无法继续通话",
+	incoming: "来电",
+	answer: "接听",
+	reject: "拒绝",
+	hangup: "挂断",
+	mute: "静音",
+	unmute: "取消静音",
+	hold: "保持",
+	resume: "恢复",
+	transfer: "转接",
+	blindTransfer: "盲转",
+	more: "更多",
+	devices: "设备",
+	enablePhone: "启用电话",
+	retryPermission: "重新检测",
+	permissionTitle: "无法使用麦克风",
+	permissionBody: "请在浏览器设置中允许本网站访问麦克风，然后重新检测。",
+	errorTitle: "无法继续通话",
+	errorBody: "请检查网络、域名授权或坐席权限后重试。",
+	currentCall: "当前通话",
+	inbound: "呼入",
+	outbound: "呼出",
+	foregroundChecking: "已返回前台，正在检查连接",
+	foregroundFailed: "前台恢复失败，请重试",
+	signIn: "签入",
+	signOut: "退签",
+	outboundCall: "外呼",
+	internalCall: "内呼",
+	agentIdle: "空闲",
+	agentBusy: "置忙",
+	agentBreak: "休息",
+	agentBusyHint: "置忙由通话或服务端状态控制",
+	rowSignIn: "签入",
+	rowCall: "通话",
+	rowAgent: "坐席",
+	extensionLabel: "分机",
+	extensionPlaceholder: "可空，由服务端分配"
+};
+//#endregion
+//#region src/ui/i18n/index.ts
+function n(n) {
+	return n.toLowerCase().startsWith("en") ? e : t;
+}
+function r(e, t, r) {
+	return {
+		...n(e),
+		...r === void 0 ? {} : r(e),
+		...t ?? {}
+	};
+}
+//#endregion
+//#region src/ui/controllers/mobileLifecycle.ts
+async function i(e) {
+	await e.media.requestPermission(), await e.initialize(), await e.connect();
+}
+function a(e, t = {}) {
+	let n = t.document ?? (typeof document > "u" ? void 0 : document);
+	if (n === void 0) return () => void 0;
+	let r = () => {
+		if (n.visibilityState === "hidden") {
+			t.onHidden?.();
+			return;
+		}
+		t.onChecking?.(), e.recover().then(() => t.onRecovered?.()).catch((e) => t.onFailed?.(e));
+	};
+	return n.addEventListener("visibilitychange", r), () => n.removeEventListener("visibilitychange", r);
+}
+//#endregion
+//#region src/ui/controllers/phoneActions.ts
+function o(e) {
+	return e.replace(/\s+/g, "");
+}
+function s(e, t, n) {
+	return o(e).length > 0 && n === "connected" && t !== "denied";
+}
+async function c(e, t, n) {
+	let r = o(t);
+	r !== "" && await e.dial({
+		destination: r,
+		...n === void 0 ? {} : { type: n }
+	});
+}
+async function l(e, t) {
+	return t ? await e.unmute() : await e.mute(), !t;
+}
+async function u(e) {
+	e.state === "held" ? await e.resume() : await e.hold();
+}
+async function d(e, t) {
+	await e.sendDtmf(t);
+}
+async function f(e, t) {
+	let n = o(t);
+	n !== "" && await e.transfer({
+		target: n,
+		type: "blind"
+	});
+}
+//#endregion
+//#region src/ui/views/dom.ts
+function p(e, t = {}) {
+	let n = document.createElement(e);
+	return t.className !== void 0 && (n.className = t.className), t.text !== void 0 && (n.textContent = t.text), Object.entries(t.attrs ?? {}).forEach(([e, t]) => n.setAttribute(e, t)), t.children?.forEach((e) => n.append(e)), n;
+}
+function m(e) {
+	return p("div", {
+		attrs: {
+			part: "status-rail",
+			role: "status",
+			"aria-live": "polite"
+		},
+		text: e
+	});
+}
+function h(e, t, n = "destination") {
+	let r = p("input", { attrs: {
+		id: e,
+		type: "tel",
+		inputmode: "tel",
+		name: n,
+		autocomplete: "tel"
+	} });
+	return {
+		field: p("div", { children: [p("label", {
+			attrs: { for: e },
+			text: t
+		}), r] }),
+		input: r
+	};
+}
+//#endregion
+//#region src/ui/views/renderDesktop.ts
+var g = [
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"*",
+	"0",
+	"#"
+];
+function _(e) {
+	return e.mode === "compact" ? v(e) : y(e);
+}
+function v(e) {
+	let { field: t, input: n } = h("ccbar-destination", e.messages.numberLabel ?? "号码");
+	n.value = e.destination;
+	let r = e.view.kind === "ready" || e.view.kind === "setup" || e.view.kind === "ended" ? p("button", {
+		attrs: {
+			type: "button",
+			"data-action": "dial",
+			part: "call-button",
+			...e.canDial ? {} : { disabled: "" }
+		},
+		text: e.messages.call ?? "呼叫"
+	}) : p("button", {
+		attrs: {
+			type: "button",
+			"data-action": "hangup",
+			part: "hangup-button"
+		},
+		text: e.messages.hangup ?? "挂断"
+	}), i = [S(e.messages.status ?? "", e.floating), p("div", {
+		className: "ccbar-toolbar",
+		children: [
+			t,
+			e.view.kind === "active" || e.view.kind === "held" ? E(e) : p("span"),
+			r,
+			p("button", {
+				attrs: {
+					type: "button",
+					"data-action": "more"
+				},
+				text: e.messages.more ?? "更多"
+			})
+		]
+	})];
+	return e.moreOpen && i.push(p("div", {
+		className: "ccbar-more",
+		children: [D(e.view, e.messages), p("button", {
+			attrs: {
+				type: "button",
+				"data-action": "devices"
+			},
+			text: e.messages.devices ?? "设备"
+		})]
+	})), p("div", {
+		attrs: {
+			part: "panel",
+			"data-layout": "compact"
+		},
+		children: i
+	});
+}
+function y(e) {
+	let { input: t } = h("ccbar-destination", e.messages.numberLabel ?? "号码"), { field: n } = h("ccbar-transfer-target", e.messages.transfer ?? "转接号码", "transfer-target");
+	t.value = e.destination, t.placeholder = e.messages.numberLabel ?? "号码", t.setAttribute("aria-label", e.messages.numberLabel ?? "号码");
+	let r = e.view.kind === "active" || e.view.kind === "held" || e.view.kind === "dialing", i = e.view.kind === "held", a = e.view.kind === "connecting", o = [
+		S(e.messages.status ?? "", e.floating, e.extension, e.messages.extensionLabel ?? "分机"),
+		b(e.messages.rowSignIn ?? "签入", [
+			C(e),
+			x("signin", e.messages.signIn ?? "签入", {
+				variant: "primary",
+				disabled: e.connected || a
+			}),
+			x("signout", e.messages.signOut ?? "退签", { disabled: !e.connected })
+		]),
+		b(e.messages.numberLabel ?? "号码", [t], { labelFor: t.id }),
+		b(e.messages.rowCall ?? "通话", [
+			x("dial", e.messages.outboundCall ?? "外呼", {
+				variant: "primary",
+				disabled: !e.canDial
+			}),
+			x("dial-internal", e.messages.internalCall ?? "内呼", { disabled: !e.canDial }),
+			x("hangup", e.messages.hangup ?? "挂断", {
+				variant: "danger",
+				disabled: !r
+			}),
+			x("transfer", e.messages.transfer ?? "转接", { disabled: !r }),
+			x("hold", e.messages.hold ?? "保持", {
+				pressed: i,
+				disabled: !r || i
+			}),
+			x("resume", e.messages.resume ?? "恢复", { disabled: !i }),
+			E(e)
+		]),
+		...r ? [b(e.messages.transfer ?? "转接号码", [n], { labelFor: "ccbar-transfer-target" })] : [],
+		b(e.messages.rowAgent ?? "坐席", [
+			x("agent-available", e.messages.agentIdle ?? "空闲", {
+				pressed: e.agentStatus === "available",
+				disabled: !e.connected
+			}),
+			x("agent-busy", e.messages.agentBusy ?? "置忙", {
+				disabled: !0,
+				title: e.messages.agentBusyHint ?? "置忙由通话或服务端状态控制"
+			}),
+			x("agent-break", e.messages.agentBreak ?? "休息", {
+				pressed: e.agentStatus === "break",
+				disabled: !e.connected
+			})
+		]),
+		T()
+	];
+	return e.calls.length > 1 && o.push(O(e.calls, e.messages)), p("div", {
+		attrs: {
+			part: "panel",
+			"data-layout": "panel"
+		},
+		children: o
+	});
+}
+function b(e, t, n = {}) {
+	return p("div", {
+		className: "ccbar-bar-row",
+		children: [p(n.labelFor === void 0 ? "div" : "label", {
+			className: "ccbar-bar-label",
+			attrs: n.labelFor === void 0 ? {} : { for: n.labelFor },
+			text: e
+		}), p("div", {
+			className: "ccbar-bar-keys",
+			children: t
+		})]
+	});
+}
+function x(e, t, n = {}) {
+	let r = e === "dial" ? "call-button" : e === "hangup" ? "hangup-button" : void 0;
+	return p("button", {
+		attrs: {
+			type: "button",
+			"data-action": e,
+			...r === void 0 ? {} : { part: r },
+			...n.variant === void 0 ? {} : { "data-variant": n.variant },
+			...n.disabled === !0 ? { disabled: "" } : {},
+			...n.pressed === void 0 ? {} : { "aria-pressed": n.pressed ? "true" : "false" },
+			...n.title === void 0 ? {} : { title: n.title }
+		},
+		text: t
+	});
+}
+function S(e, t, n = "", r = "分机") {
+	let i = w(e);
+	return t && i.setAttribute("data-drag-handle", ""), n !== "" && i.append(p("span", {
+		className: "ccbar-ext-chip",
+		text: `${r} ${n}`
+	})), i;
+}
+function C(e) {
+	let t = p("input", { attrs: {
+		id: "ccbar-extension",
+		type: "tel",
+		inputmode: "numeric",
+		name: "extension",
+		autocomplete: "off",
+		placeholder: e.messages.extensionPlaceholder ?? "可空，由服务端分配",
+		"aria-label": e.messages.extensionLabel ?? "分机"
+	} });
+	return t.value = e.extension, e.connected && (t.readOnly = !0), t;
+}
+function w(e) {
+	return m(e);
+}
+function T() {
+	return p("div", {
+		className: "ccbar-dialpad",
+		children: g.map((e) => p("button", {
+			attrs: {
+				type: "button",
+				"data-digit": e
+			},
+			text: e
+		}))
+	});
+}
+function E(e) {
+	return p("button", {
+		attrs: {
+			type: "button",
+			"data-action": "mute",
+			"aria-pressed": e.muted ? "true" : "false"
+		},
+		text: e.muted ? e.messages.unmute ?? "取消静音" : e.messages.mute ?? "静音"
+	});
+}
+function D(e, t) {
+	let n = e.kind === "held";
+	return p("button", {
+		attrs: {
+			type: "button",
+			"data-action": "hold",
+			"aria-pressed": n ? "true" : "false"
+		},
+		text: n ? t.resume ?? "恢复" : t.hold ?? "保持"
+	});
+}
+function O(e, t) {
+	return p("ul", {
+		className: "ccbar-call-list",
+		children: e.map((e) => p("li", { children: [p("button", {
+			attrs: {
+				type: "button",
+				"data-call-id": e.id
+			},
+			children: [p("span", { text: `${e.destination} ${e.direction === "inbound" ? t.inbound ?? "呼入" : t.outbound ?? "呼出"} ${k(e.state, t)}` }), ...e.current ? [p("span", {
+				className: "ccbar-call-current",
+				text: t.currentCall ?? "当前通话"
+			})] : []]
+		})] }))
+	});
+}
+function k(e, t) {
+	return e === "held" ? t.statusHeld ?? "保持中" : e === "active" ? t.statusActive ?? "通话中" : e === "dialing" || e === "ringing" || e === "connecting" ? t.statusDialing ?? "拨号中" : e;
+}
+//#endregion
+//#region src/ui/views/renderError.ts
+function A(e) {
+	switch (e.view.kind) {
+		case "permission-error": return p("div", {
+			attrs: { part: "panel" },
+			children: [
+				m(e.messages.permissionTitle ?? "无法使用麦克风"),
+				p("h2", { text: e.messages.permissionTitle ?? "无法使用麦克风" }),
+				p("p", { text: e.messages.permissionBody ?? "请在浏览器设置中允许本网站访问麦克风，然后重新检测。" }),
+				p("button", {
+					attrs: {
+						type: "button",
+						"data-action": "retry-permission"
+					},
+					text: e.messages.retryPermission ?? "重新检测"
+				})
+			]
+		});
+		case "unrecoverable-error":
+		case "unsupported": return p("div", {
+			attrs: { part: "panel" },
+			children: [p("div", {
+				attrs: {
+					role: "alert",
+					part: "status-rail"
+				},
+				text: e.messages.errorTitle ?? "无法继续通话"
+			}), p("p", { text: e.messages.errorBody ?? "请检查网络、域名授权或坐席权限后重试。" })]
+		});
+		case "setup":
+		case "connecting":
+		case "incoming":
+		case "active":
+		case "held":
+		case "dialing":
+		case "ended":
+		case "ready": return p("div", {
+			attrs: { part: "panel" },
+			children: [m(e.messages.status ?? "")]
+		});
+		default: return e.view;
+	}
+}
+//#endregion
+//#region src/ui/views/renderIncoming.ts
+function j(e) {
+	return p("div", {
+		attrs: { part: "panel" },
+		children: [
+			m(e.messages.status ?? "来电"),
+			p("p", { text: e.view.from }),
+			p("button", {
+				attrs: {
+					type: "button",
+					"data-action": "answer"
+				},
+				text: e.messages.answer ?? "接听"
+			}),
+			p("button", {
+				attrs: {
+					type: "button",
+					"data-action": "reject"
+				},
+				text: e.messages.reject ?? "拒绝"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/ui/views/renderMobile.ts
+var M = [
+	"1",
+	"2",
+	"3",
+	"4",
+	"5",
+	"6",
+	"7",
+	"8",
+	"9",
+	"*",
+	"0",
+	"#"
+];
+function N(e) {
+	return F(p("div", {
+		attrs: {
+			part: "panel",
+			"data-layout": "mobile"
+		},
+		children: [m(e.status), p("button", {
+			attrs: {
+				type: "button",
+				"data-action": "enable-phone",
+				...e.enabling ? { disabled: "" } : {}
+			},
+			text: e.enablePhone ?? "启用电话"
+		})]
+	}));
+}
+function P(e) {
+	let t = e.view.kind === "active" || e.view.kind === "dialing", n = [m(e.messages.status ?? "")];
+	if (t) {
+		let t = e.view.kind === "active" || e.view.kind === "dialing" ? e.view.destination ?? "" : "";
+		n.push(p("p", { text: t }), I(p("button", {
+			attrs: {
+				type: "button",
+				"data-action": "mute",
+				"aria-pressed": e.muted ? "true" : "false"
+			},
+			text: e.muted ? e.messages.unmute ?? "取消静音" : e.messages.mute ?? "静音"
+		}), 44), L(), I(p("button", {
+			attrs: {
+				type: "button",
+				"data-action": "hangup",
+				part: "hangup-button"
+			},
+			text: e.messages.hangup ?? "挂断"
+		}), 52));
+	} else {
+		let { field: t, input: r } = h("ccbar-destination", e.messages.numberLabel ?? "号码");
+		r.value = e.destination, n.push(t, L(), p("button", {
+			attrs: {
+				type: "button",
+				"data-action": "dial",
+				part: "call-button",
+				...e.canDial ? {} : { disabled: "" }
+			},
+			text: e.messages.call ?? "呼叫"
+		}));
+	}
+	return e.showOutputDevice && n.push(p("button", {
+		attrs: {
+			type: "button",
+			"data-action": "devices"
+		},
+		text: e.messages.devices ?? "设备"
+	})), F(p("div", {
+		attrs: {
+			part: "panel",
+			"data-layout": "mobile"
+		},
+		children: n
+	}));
+}
+function F(e) {
+	return e.style.minHeight = "100dvh", e.style.paddingBottom = "max(16px, env(safe-area-inset-bottom))", e;
+}
+function I(e, t) {
+	return e.style.minHeight = `${t}px`, e;
+}
+function L() {
+	return p("div", {
+		className: "ccbar-dialpad",
+		children: M.map((e) => p("button", {
+			attrs: {
+				type: "button",
+				"data-digit": e
+			},
+			text: e
+		}))
+	});
+}
+//#endregion
+//#region src/ui/state/toPhoneViewModel.ts
+var R = {
+	kind: "permission-error",
+	code: "MEDIA_PERMISSION_DENIED",
+	action: "retry-permission"
+};
+function z(e) {
+	if (e.supported === !1) return { kind: "unsupported" };
+	if (e.permission === "denied" || e.error?.code === "MEDIA_PERMISSION_DENIED") return R;
+	if (e.error !== void 0 && e.error.code !== "MEDIA_PLAYBACK_BLOCKED") return {
+		kind: "unrecoverable-error",
+		code: e.error.code
+	};
+	let t = e.calls.find((e) => e.direction === "inbound" && (e.state === "ringing" || e.state === "new"));
+	if (t !== void 0) return {
+		kind: "incoming",
+		callId: t.id,
+		from: t.destination ?? ""
+	};
+	let n = e.calls.find((e) => e.state === "active");
+	if (n !== void 0) return {
+		kind: "active",
+		callId: n.id,
+		destination: n.destination
+	};
+	let r = e.calls.find((e) => e.state === "held");
+	if (r !== void 0) return {
+		kind: "held",
+		callId: r.id,
+		destination: r.destination
+	};
+	let i = e.calls.find((e) => e.state === "dialing" || e.state === "ringing" || e.state === "connecting");
+	if (i !== void 0) return {
+		kind: "dialing",
+		callId: i.id,
+		destination: i.destination
+	};
+	let a = e.calls.find((e) => e.state === "ended" || e.state === "failed");
+	return a === void 0 ? e.connectionState === "connecting" || e.connectionState === "reconnecting" ? { kind: "connecting" } : e.connectionState === "connected" ? { kind: "ready" } : { kind: "setup" } : {
+		kind: "ended",
+		callId: a.id
+	};
+}
+//#endregion
+//#region src/ui/styles/index.css?inline
+var B = ":root,:host{--ccbar-color-surface:#fff;--ccbar-color-surface-muted:#f1f5f9;--ccbar-color-border:#d8e0ea;--ccbar-color-title:#0f172a;--ccbar-color-text:#334155;--ccbar-color-muted:#475569;--ccbar-color-primary:#2563eb;--ccbar-color-primary-hover:#1d4ed8;--ccbar-color-success:#15803d;--ccbar-color-warning:#a15c00;--ccbar-color-danger:#b91c1c;--ccbar-radius-sm:6px;--ccbar-radius:8px;--ccbar-radius-lg:12px;--ccbar-control-height:40px;--ccbar-control-height-touch:44px;--ccbar-space-1:4px;--ccbar-space-2:8px;--ccbar-space-3:12px;--ccbar-space-4:16px;--ccbar-space-6:24px;--ccbar-font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;--ccbar-panel-width:560px}:host{color:var(--ccbar-color-text);font-family:var(--ccbar-font-family);display:block}:host([floating]){z-index:2147483646;right:var(--ccbar-space-6);bottom:var(--ccbar-space-6);position:fixed}[part=panel]{background:var(--ccbar-color-surface);border:1px solid var(--ccbar-color-border);border-radius:var(--ccbar-radius-lg)}[part=status-rail]{align-items:center;gap:var(--ccbar-space-2);min-height:var(--ccbar-control-height);padding:var(--ccbar-space-2) var(--ccbar-space-3);border-bottom:1px solid var(--ccbar-color-border);color:var(--ccbar-color-muted);font-variant-numeric:tabular-nums;display:flex}[part=status-rail]:before{content:\"\";background:var(--ccbar-color-muted);border-radius:50%;flex:none;width:8px;height:8px}button{min-height:var(--ccbar-control-height);border:1px solid var(--ccbar-color-border);border-radius:var(--ccbar-radius-sm);background:var(--ccbar-color-surface);color:var(--ccbar-color-title);font:inherit}button[data-action=dial],button[data-action=signin],button[data-action=answer],button[data-variant=primary]{background:var(--ccbar-color-primary);border-color:var(--ccbar-color-primary);color:#fff}button[aria-pressed=true]{border-color:var(--ccbar-color-primary);color:var(--ccbar-color-primary);background:var(--ccbar-color-surface-muted)}button[data-action=hangup],button[data-action=reject]{background:var(--ccbar-color-danger);border-color:var(--ccbar-color-danger);color:#fff;margin-top:var(--ccbar-space-4)}button:disabled{opacity:.5}button:focus-visible,input:focus-visible{outline:2px solid var(--ccbar-color-primary);outline-offset:2px}input[type=tel]{width:100%;min-height:var(--ccbar-control-height);border:1px solid var(--ccbar-color-border);border-radius:var(--ccbar-radius-sm);font-variant-numeric:tabular-nums}.ccbar-call-list{gap:var(--ccbar-space-2);margin:var(--ccbar-space-3) 0 0;padding:0;list-style:none;display:grid}.ccbar-call-list button{text-align:left;width:100%}.ccbar-call-current{color:var(--ccbar-color-title);display:block}[data-layout=compact]{min-height:80px;max-height:96px}[data-layout=compact] .ccbar-toolbar{gap:var(--ccbar-space-2);padding:var(--ccbar-space-2) var(--ccbar-space-3);grid-template-columns:minmax(0,1fr) auto auto auto;align-items:center;display:grid}[data-layout=compact] .ccbar-more{right:var(--ccbar-space-3);gap:var(--ccbar-space-2);display:grid;position:absolute}[data-layout=panel]{width:min(var(--ccbar-panel-width), 100%);min-width:420px;max-width:560px;padding:var(--ccbar-space-3)}[data-layout=panel] .ccbar-bar-row{gap:var(--ccbar-space-2) var(--ccbar-space-3);grid-template-columns:48px minmax(0,1fr);align-items:center;min-height:36px;display:grid}[data-layout=panel] .ccbar-bar-row+.ccbar-bar-row{margin-top:var(--ccbar-space-2)}[data-layout=panel] .ccbar-bar-label{color:var(--ccbar-color-muted);font-size:12px}[data-layout=panel] .ccbar-bar-keys{align-items:center;gap:var(--ccbar-space-2);flex-wrap:wrap;display:flex}[data-layout=panel] .ccbar-bar-keys button{min-width:48px;min-height:32px;padding:0 10px;font-size:13px}[data-layout=panel] .ccbar-bar-keys input[type=tel]{max-width:320px}[data-layout=panel] .ccbar-bar-keys input[name=extension]{width:148px;max-width:148px}[data-layout=panel] .ccbar-ext-chip{background:var(--ccbar-color-surface-muted);height:28px;color:var(--ccbar-color-title);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;margin-left:auto;padding:0 10px;font-size:12px;display:inline-flex}[data-layout=panel] [data-action=hangup]{margin-top:0}[data-layout=panel] .ccbar-dialpad{gap:var(--ccbar-space-2);margin:var(--ccbar-space-3) 0 0;grid-template-columns:repeat(3,1fr);display:grid}[data-layout=panel] .ccbar-safe-actions{gap:var(--ccbar-space-2);flex-wrap:wrap;display:flex}[data-layout=mobile]{min-height:100vh;padding:var(--ccbar-space-4);padding-bottom:max(16px, env(safe-area-inset-bottom))}[data-layout=mobile] button{min-width:44px;min-height:44px}[data-layout=mobile] [data-action=enable-phone],[data-layout=mobile] [data-action=dial],[data-layout=mobile] [data-action=hangup]{min-height:52px}[data-layout=mobile] .ccbar-dialpad{gap:var(--ccbar-space-2);margin:var(--ccbar-space-3) 0;grid-template-columns:repeat(3,1fr);display:grid}:host([data-theme=dark]){--ccbar-color-surface:#0f172a;--ccbar-color-surface-muted:#1e293b;--ccbar-color-border:#334155;--ccbar-color-title:#f8fafc;--ccbar-color-text:#e2e8f0;--ccbar-color-muted:#94a3b8;--ccbar-color-primary:#3b82f6;--ccbar-color-primary-hover:#2563eb;--ccbar-color-success:#22c55e;--ccbar-color-warning:#f59e0b;--ccbar-color-danger:#ef4444}@media (prefers-reduced-motion:reduce){:host *,:host :before,:host :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}", V = typeof HTMLElement == "function" ? HTMLElement : class {}, H = /* @__PURE__ */ new WeakSet(), U = [
+	"connection.stateChanged",
+	"connection.reconnecting",
+	"connection.failed",
+	"call.incoming",
+	"call.stateChanged",
+	"call.activeChanged",
+	"call.ended",
+	"call.failed",
+	"media.permissionChanged",
+	"agent.statusChanged",
+	"error"
+], W = class extends V {
+	static get observedAttributes() {
+		return [
+			"mode",
+			"floating",
+			"draggable",
+			"locale",
+			"theme"
+		];
+	}
+	#e;
+	#t = [];
+	#n = "idle";
+	#r = "unknown";
+	#i;
+	#a = /* @__PURE__ */ new Set();
+	#o = "";
+	#s = "";
+	#c = "offline";
+	#l = !1;
+	#u = !1;
+	#d = Promise.resolve();
+	#f;
+	#p = !1;
+	#m = !1;
+	#h;
+	#g;
+	#_;
+	#v;
+	#y;
+	get messageResolver() {
+		return this.#v;
+	}
+	set messageResolver(e) {
+		this.#v = e, this.shadowRoot !== null && this.render();
+	}
+	get client() {
+		return this.#e;
+	}
+	set client(e) {
+		this.#D(), this.#e = e, this.#E(), this.render();
+	}
+	connectedCallback() {
+		this.#B(), this.#z(), this.render();
+	}
+	disconnectedCallback() {
+		this.#D(), this.#W(), this.#y?.(), this.#y = void 0;
+	}
+	attributeChangedCallback(e) {
+		this.#B(), e === "theme" && this.#z(), this.shadowRoot !== null && this.render();
+	}
+	render() {
+		let e = this.#O();
+		e !== void 0 && (e.innerHTML = `<style>${B}</style>`, e.append(this.#x(this.#b())));
+	}
+	#b() {
+		let e = this.#e?.getCalls?.().map((e) => ({
+			id: e.id,
+			state: e.state,
+			destination: e.destination,
+			direction: this.#a.has(e.id) ? "inbound" : "outbound"
+		})) ?? [];
+		return z({
+			connectionState: this.#n,
+			permission: this.#r,
+			calls: e,
+			error: this.#i
+		});
+	}
+	#x(e) {
+		let t = this.#R(), n = this.#g ?? this.#h ?? K(e, t), r = {
+			...t,
+			status: n
+		}, i = this.#S(e, r, n);
+		return i.setAttribute("data-view", this.#T() && !this.#p ? "setup" : e.kind), i.hasAttribute("data-layout") || i.setAttribute("data-layout", this.#T() ? "mobile" : "panel"), i;
+	}
+	#S(e, t, n) {
+		if (this.#T() && !this.#p) return N({
+			enabling: this.#m,
+			status: n,
+			enablePhone: t.enablePhone
+		});
+		switch (e.kind) {
+			case "permission-error":
+			case "unrecoverable-error":
+			case "unsupported": return A({
+				view: e,
+				messages: t
+			});
+			case "incoming": return this.#T() ? P({
+				view: { kind: "ready" },
+				messages: t,
+				destination: this.#o,
+				muted: this.#l,
+				canDial: s(this.#o, this.#r, this.#n),
+				showOutputDevice: this.#e?.media.supportsOutputSelection() === !0
+			}) : j({
+				view: e,
+				messages: t
+			});
+			case "setup":
+			case "connecting":
+			case "ended":
+			case "ready":
+			case "active":
+			case "held":
+			case "dialing": return this.#T() ? P({
+				view: e.kind === "held" ? { kind: "ready" } : e,
+				messages: t,
+				destination: this.#o,
+				muted: this.#l,
+				canDial: s(this.#o, this.#r, this.#n),
+				showOutputDevice: this.#e?.media.supportsOutputSelection() === !0
+			}) : _({
+				mode: this.#w() === "compact" ? "compact" : "panel",
+				view: e,
+				messages: t,
+				destination: this.#o,
+				muted: this.#l,
+				canDial: s(this.#o, this.#r, this.#n),
+				moreOpen: this.#u,
+				floating: this.hasAttribute("floating"),
+				connected: this.#n === "connected",
+				agentStatus: this.#c,
+				extension: this.#s,
+				calls: this.#C()
+			});
+			default: return e;
+		}
+	}
+	#C() {
+		let e = this.#e?.getActiveCall?.()?.id;
+		return this.#e?.getCalls?.().map((t) => ({
+			id: t.id,
+			destination: t.destination,
+			state: t.state,
+			direction: this.#a.has(t.id) ? "inbound" : "outbound",
+			current: t.id === e
+		})) ?? [];
+	}
+	#w() {
+		let e = this.getAttribute("mode");
+		return e === "compact" || e === "mobile" ? e : "panel";
+	}
+	#T() {
+		return this.#w() === "mobile";
+	}
+	#E() {
+		let e = this.#e;
+		e !== void 0 && (this.#t.push(e.on("connection.stateChanged", (t) => {
+			if (this.#n = t.state, t.state !== "connected" && (this.#c = "offline"), t.state === "connected") {
+				let t = e.getAgent?.()?.extension?.trim();
+				t !== void 0 && t !== "" && (this.#s = t);
+			}
+		})), this.#t.push(e.on("agent.statusChanged", (e) => {
+			(e.status === "available" || e.status === "offline" || e.status === "break") && (this.#c = e.status);
+		})), this.#t.push(e.on("connection.failed", (e) => {
+			this.#n = "failed", this.#i = { code: e.error.code };
+		})), this.#t.push(e.on("media.permissionChanged", (e) => {
+			this.#r = e.permission;
+		})), this.#t.push(e.on("error", (e) => {
+			this.#i = { code: e.error.code };
+		})), this.#t.push(e.on("call.incoming", (e) => {
+			this.#a.add(e.callId);
+		})), this.#t.push(e.on("call.ended", (e) => {
+			this.#a.delete(e.callId), this.#l = !1;
+		})), this.#t.push(e.on("call.failed", () => {
+			this.#g = this.#R().statusFailed;
+		})), U.forEach((t) => {
+			this.#t.push(e.on(t, () => this.render()));
+		}), this.#T() && typeof e.recover == "function" && (this.#_ = a(e, {
+			onChecking: () => {
+				this.#h = this.#R().foregroundChecking, this.render();
+			},
+			onRecovered: () => {
+				this.#h = void 0, this.render();
+			},
+			onFailed: () => {
+				this.#h = this.#R().foregroundFailed, this.render();
+			}
+		})));
+	}
+	#D() {
+		let e = this.#t;
+		this.#t = [], e.forEach((e) => e()), this.#n = "idle", this.#r = "unknown", this.#c = "offline", this.#i = void 0, this.#a.clear(), this.#l = !1, this.#u = !1, this.#p = !1, this.#m = !1, this.#h = void 0, this.#_?.(), this.#_ = void 0;
+	}
+	#O() {
+		if (typeof this.attachShadow != "function") return;
+		let e = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+		return H.has(e) || (H.add(e), e.addEventListener("click", (e) => this.#k(e)), e.addEventListener("input", (e) => this.#N(e)), e.addEventListener("pointerdown", (e) => this.#V(e))), e;
+	}
+	#k(e) {
+		let t = J(e, this), n = t?.closest("[data-action=\"enable-phone\"]");
+		n instanceof HTMLButtonElement && (n.disabled = !0), this.#d = this.#d.then(() => this.#P(t)).catch((e) => {
+			this.#g = Y(e), this.render();
+		});
+	}
+	#A() {
+		let e = this.shadowRoot?.querySelector("input[name=\"destination\"]");
+		return e instanceof HTMLInputElement ? e.value : this.#o;
+	}
+	#j() {
+		let e = this.shadowRoot?.querySelector("input[name=\"extension\"]");
+		return e instanceof HTMLInputElement ? e.value.trim() : this.#s;
+	}
+	#M() {
+		let e = this.shadowRoot?.querySelector("input[name=\"transfer-target\"]");
+		return e instanceof HTMLInputElement ? e.value : "";
+	}
+	#N(e) {
+		let t = J(e, this);
+		if (t instanceof HTMLInputElement && t.name !== "transfer-target") {
+			if (t.name === "extension") {
+				this.#s = t.value.trim();
+				return;
+			}
+			this.#o = t.value, this.#I();
+		}
+	}
+	async #P(e) {
+		if (this.#g = void 0, e === void 0) return;
+		let t = e.closest("[data-call-id]");
+		if (t instanceof HTMLElement && t.dataset.callId !== void 0) {
+			await this.#e?.setActiveCall(t.dataset.callId);
+			return;
+		}
+		let n = e.closest("[data-digit]");
+		if (n instanceof HTMLElement && n.dataset.digit !== void 0) {
+			await this.#F(n.dataset.digit);
+			return;
+		}
+		let r = e.closest("[data-action]");
+		if (!(r instanceof HTMLElement) || r instanceof HTMLButtonElement && r.disabled && r.getAttribute("data-action") !== "enable-phone") return;
+		let a = this.#e?.getActiveCall?.();
+		switch (r.getAttribute("data-action")) {
+			case "signin":
+				if (this.#e === void 0) return;
+				this.#s = this.#j(), await this.#e.media?.requestPermission?.(), await this.#e.initialize(), await this.#e.connect(this.#s === "" ? void 0 : { extension: this.#s });
+				return;
+			case "signout":
+				if (this.#e === void 0) return;
+				this.#c = "offline", await this.#e.disconnect();
+				return;
+			case "dial":
+			case "dial-internal":
+				if (this.#o = this.#A(), this.#e === void 0) return;
+				this.#r !== "granted" && await this.#e.media?.requestPermission?.(), await c(this.#e, this.#o, r.getAttribute("data-action") === "dial-internal" ? "extension" : void 0);
+				return;
+			case "mute":
+				if (a === void 0) return;
+				this.#l = await l(a, this.#l), this.#L();
+				return;
+			case "hold":
+				a !== void 0 && await u(a);
+				return;
+			case "resume":
+				a !== void 0 && await a.resume();
+				return;
+			case "transfer":
+				a !== void 0 && await f(a, this.#M());
+				return;
+			case "hangup":
+				await a?.hangup();
+				return;
+			case "answer":
+				a !== void 0 && await this.#e?.answer(a.id);
+				return;
+			case "reject":
+				await a?.reject();
+				return;
+			case "enable-phone":
+				if (this.#e === void 0 || this.#p) return;
+				this.#m = !0;
+				try {
+					await i(this.#e), this.#p = !0;
+				} finally {
+					this.#m = !1, this.render();
+				}
+				return;
+			case "more":
+				this.#u = !this.#u, this.render();
+				return;
+			case "retry-permission":
+				await this.#e?.media.requestPermission();
+				return;
+			case "devices": return;
+			case "agent-available":
+				await this.#e?.setAgentStatus("available");
+				return;
+			case "agent-break":
+				await this.#e?.setAgentStatus("break");
+				return;
+			case "agent-busy": return;
+			default: return;
+		}
+	}
+	async #F(e) {
+		let t = this.#e?.getActiveCall?.();
+		if (t !== void 0 && (t.state === "active" || t.state === "held")) {
+			await d(t, e);
+			return;
+		}
+		this.#o += e;
+		let n = this.shadowRoot?.querySelector("input[name=\"destination\"]");
+		n instanceof HTMLInputElement && (n.value = this.#o), this.#I();
+	}
+	#I() {
+		let e = !s(this.#o, this.#r, this.#n);
+		for (let t of ["dial", "dial-internal"]) {
+			let n = this.shadowRoot?.querySelector(`[data-action="${t}"]`);
+			n instanceof HTMLButtonElement && (n.disabled = e);
+		}
+	}
+	#L() {
+		let e = this.shadowRoot?.querySelector("[data-action=\"mute\"]");
+		e instanceof HTMLButtonElement && (e.setAttribute("aria-pressed", this.#l ? "true" : "false"), e.textContent = this.#l ? this.#R().unmute : this.#R().mute);
+	}
+	#R() {
+		return r(this.getAttribute("locale") ?? "zh-CN", void 0, this.#v);
+	}
+	#z() {
+		this.#y?.(), this.#y = void 0;
+		let e = this.getAttribute("theme") ?? "light";
+		if (e === "dark" || e === "light") {
+			this.setAttribute("data-theme", e);
+			return;
+		}
+		if (typeof window > "u" || typeof window.matchMedia != "function") {
+			this.setAttribute("data-theme", "light");
+			return;
+		}
+		let t = window.matchMedia("(prefers-color-scheme: dark)"), n = () => {
+			this.setAttribute("data-theme", t.matches ? "dark" : "light");
+		};
+		n(), t.addEventListener("change", n), this.#y = () => t.removeEventListener("change", n);
+	}
+	#B() {
+		this.style.position = this.hasAttribute("floating") ? "fixed" : "";
+	}
+	#V(e) {
+		if (!(e instanceof PointerEvent) || !this.hasAttribute("floating") || !this.hasAttribute("draggable") || (e.target instanceof Element ? e.target.closest("[data-drag-handle]") : null) === null) return;
+		e.preventDefault();
+		let t = this.getBoundingClientRect();
+		this.#f = {
+			pointerId: e.pointerId,
+			offsetX: e.clientX - t.left,
+			offsetY: e.clientY - t.top
+		}, window.addEventListener("pointermove", this.#H), window.addEventListener("pointerup", this.#U);
+	}
+	#H = (e) => {
+		if (this.#f === void 0 || e.pointerId !== this.#f.pointerId) return;
+		let t = window.visualViewport, n = t?.width ?? window.innerWidth, r = t?.height ?? window.innerHeight, i = q(e.clientX - this.#f.offsetX, 0, Math.max(0, n - this.offsetWidth)), a = q(e.clientY - this.#f.offsetY, 0, Math.max(0, r - this.offsetHeight));
+		this.style.left = `${i}px`, this.style.top = `${a}px`, this.style.right = "auto", this.style.bottom = "auto";
+	};
+	#U = (e) => {
+		this.#f !== void 0 && e.pointerId === this.#f.pointerId && this.#W();
+	};
+	#W() {
+		this.#f = void 0, window.removeEventListener("pointermove", this.#H), window.removeEventListener("pointerup", this.#U);
+	}
+};
+function G(e = {}) {
+	if (typeof customElements > "u") return;
+	let t = e.tagName ?? "xcall-ccbar";
+	if (customElements.get(t) !== void 0) return;
+	let n = t === "xcall-ccbar" ? W : class extends W {};
+	customElements.define(t, n);
+}
+function K(e, t) {
+	switch (e.kind) {
+		case "unsupported": return t.statusUnsupported;
+		case "permission-error": return t.statusPermission;
+		case "unrecoverable-error": return t.statusError;
+		case "setup": return t.statusSetup;
+		case "connecting": return t.statusConnecting;
+		case "incoming": return t.statusIncoming;
+		case "active": return t.statusActive;
+		case "held": return t.statusHeld;
+		case "dialing": return t.statusDialing;
+		case "ended": return t.statusEnded;
+		case "ready": return t.statusReady;
+		default: return e;
+	}
+}
+function q(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function J(e, t) {
+	for (let n of e.composedPath()) if (n instanceof Element && n !== t) return n;
+	return e.target instanceof Element && e.target !== t ? e.target : void 0;
+}
+function Y(e) {
+	return typeof e == "object" && e && "code" in e && typeof e.code == "string" ? e.code : "SDK_INTERNAL_ERROR";
+}
+//#endregion
+//#region src/ui/index.ts
+var X = "0.1.0";
+//#endregion
+export { W as XCallCCBarElement, G as defineCCBarElement, e as enUS, r as resolveMessages, X as uiVersion, t as zhCN };