@mcp-b/char 0.0.5 → 0.1.0

package/dist/shell-component.js

@@ -0,0 +1,2504 @@
+/*! @mcp-b/char | Copyright (c) 2025 Kukumis Inc. All rights reserved. | UNLICENSED */
+//#region src/display-mode-policy.ts
+/**
+* Default display modes advertised by Char hosts.
+*
+* Order matters for fallback behavior. When a preferred mode is unavailable,
+* the first available mode is selected.
+*
+* @public
+*/
+const DEFAULT_AVAILABLE_DISPLAY_MODES = [
+	"inline",
+	"fullscreen",
+	"pip"
+];
+/**
+* Runtime guard for Char display mode values.
+*
+* @param value - Raw value from host attributes, events, or external input.
+* @returns `true` when the value is one of `inline`, `fullscreen`, or `pip`.
+*
+* @public
+*/
+function isDisplayMode(value) {
+	return value === "inline" || value === "fullscreen" || value === "pip";
+}
+/**
+* Resolves a preferred display mode against host-supported modes.
+*
+* An empty `availableModes` array means "no constraint" — the preferred mode
+* is returned unconditionally. This is intentional: it allows callers to opt
+* out of mode filtering without a separate code path.
+*
+* @param preferred - Preferred mode requested by host policy.
+* @param availableModes - Supported modes advertised by the host.
+* @returns Preferred mode when supported, otherwise the first available mode.
+*
+* @public
+*/
+function resolveSupportedDisplayMode(preferred, availableModes = DEFAULT_AVAILABLE_DISPLAY_MODES) {
+	if (availableModes.length === 0) return preferred;
+	if (availableModes.includes(preferred)) return preferred;
+	console.debug(`[Char] Display mode "${preferred}" not in available modes [${availableModes.join(", ")}], using "${availableModes[0]}"`);
+	return availableModes[0];
+}
+/**
+* Resolves Char's standard host display-mode policy.
+*
+* Policy:
+* - Closed state to `pip`
+* - Open on desktop to `inline`
+* - Open on narrow viewport to `fullscreen`
+*
+* The resolved mode is then constrained to `availableModes`.
+*
+* @param options - Host orchestration inputs: `open`, `isNarrowViewport`,
+* and optional `availableModes`.
+* @returns Final mode that satisfies policy and availability constraints.
+*
+* @public
+*/
+function resolvePolicyDisplayMode(options) {
+	const availableModes = options.availableModes ?? DEFAULT_AVAILABLE_DISPLAY_MODES;
+	return resolveSupportedDisplayMode(options.open ? options.isNarrowViewport ? "fullscreen" : "inline" : "pip", availableModes);
+}
+
+//#endregion
+//#region src/utils/host-context-merge.ts
+function mergeStyles(current, patch) {
+	if (!patch) return current;
+	return {
+		...current,
+		...patch,
+		variables: patch.variables ?? current?.variables,
+		fonts: patch.fonts ?? current?.fonts
+	};
+}
+function shallowMerge(current, patch) {
+	if (!patch) return current;
+	return {
+		...current,
+		...patch
+	};
+}
+function mergeHostContext(current, patch) {
+	const previous = current ?? {};
+	return {
+		...previous,
+		...patch,
+		styles: mergeStyles(previous.styles, patch.styles),
+		containerDimensions: shallowMerge(previous.containerDimensions, patch.containerDimensions),
+		deviceCapabilities: shallowMerge(previous.deviceCapabilities, patch.deviceCapabilities),
+		safeAreaInsets: shallowMerge(previous.safeAreaInsets, patch.safeAreaInsets),
+		hostCapabilities: shallowMerge(previous.hostCapabilities, patch.hostCapabilities)
+	};
+}
+
+//#endregion
+//#region src/utils/parse-boolean-attribute.ts
+/**
+* Attribute helper treating any value except `null` and `'false'` as enabled.
+*/
+function parseBooleanAttribute(value) {
+	return value !== null && value !== "false";
+}
+
+//#endregion
+//#region src/host/char-iframe-proxy.ts
+/**
+* CharIframeProxy
+*
+* Host-side relay that bridges MCP server-to-client responses from the page's
+* TabServerTransport back to the iframe (embedded agent).
+*
+* Client-to-server messages (iframe → host) are handled directly by
+* TabServerTransport via allowedOrigins, so no relay is needed in that
+* direction.
+*
+* Zero runtime dependencies — uses only browser postMessage APIs.
+*/
+var CharIframeProxy = class {
+	_cleanup = [];
+	constructor(_iframe, _iframeOrigin, _channelId = "mcp-default") {
+		this._iframe = _iframe;
+		this._iframeOrigin = _iframeOrigin;
+		this._channelId = _channelId;
+	}
+	start() {
+		const fromTab = (event) => {
+			if (event.source !== window) return;
+			const d = event.data;
+			if (!d || d.channel !== this._channelId || d.type !== "mcp" || d.direction !== "server-to-client") return;
+			if (d._proxied) return;
+			if (!this._iframe.contentWindow) {
+				console.error("[CharIframeProxy] Cannot relay to iframe: contentWindow is null");
+				return;
+			}
+			this._iframe.contentWindow.postMessage(d, this._iframeOrigin);
+		};
+		window.addEventListener("message", fromTab);
+		this._cleanup = [() => window.removeEventListener("message", fromTab)];
+	}
+	destroy() {
+		for (const fn of this._cleanup) fn();
+		this._cleanup.length = 0;
+	}
+};
+
+//#endregion
+//#region src/utils/constants.ts
+const WEBMCP_PRODUCTION_API_BASE = "https://app.usechar.ai";
+
+//#endregion
+//#region src/utils/css-sanitizer.ts
+/**
+* Maximum allowed length for CSS custom property values transported to iframe.
+*
+* NOTE: This value and the blocked-token policy intentionally mirror
+* `packages/shared-types/src/schemas/embed-bridge.ts` so validation happens
+* both before transport (host) and at contract parse-time (iframe).
+*
+* CONTROL_CHAR_PATTERN here is intentionally more permissive than
+* embed-bridge.ts: it allows tabs/newlines/CR/FF because
+* normalizeCssFormattingWhitespace converts them to spaces before the
+* control-char check. The iframe-side schema (embed-bridge.ts) uses
+* the stricter pattern as defense-in-depth for values that bypass
+* host-side sanitization.
+*/
+const MAX_CSS_VARIABLE_VALUE_LENGTH = 1024;
+const CONTROL_CHAR_PATTERN = /[\u0000-\u0008\u000b\u000e-\u001f\u007f]/u;
+const CSS_COMMENT_PATTERN = /\/\*[\s\S]*?\*\//g;
+const CSS_FORMATTING_WHITESPACE_PATTERN = /[\t\n\r\f]+/gu;
+/**
+* Normalizes CSS values for dangerous-token scanning.
+* Lowercases and removes CSS comments/whitespace/control chars to catch obfuscation.
+*/
+function normalizeForSecurityScan(value) {
+	return value.replace(CSS_COMMENT_PATTERN, "").toLowerCase().replace(/[\s\u0000-\u001f\u007f]+/gu, "");
+}
+/**
+* Collapses CSS formatting whitespace (tabs, newlines, carriage returns, form feeds)
+* into single spaces. Applied to the output value before trimming, so multiline
+* host-provided values (e.g., font stacks) become single-line without losing
+* meaningful token boundaries. This also ensures split-token obfuscation
+* (e.g., "java\nscript:") is collapsed before the security scan.
+*/
+function normalizeCssFormattingWhitespace(value) {
+	return value.replace(CSS_FORMATTING_WHITESPACE_PATTERN, " ");
+}
+/**
+* Sanitizes host-provided CSS variable values before iframe transport.
+* Returns `undefined` for unsafe or invalid values.
+*
+* @param value - The raw CSS property value.
+* @param variableName - Optional variable name for diagnostic logging.
+*/
+function sanitizeCssVariableValue(value, variableName) {
+	const trimmed = normalizeCssFormattingWhitespace(value).trim();
+	if (!trimmed) return void 0;
+	if (trimmed.length > MAX_CSS_VARIABLE_VALUE_LENGTH) {
+		console.warn(`[Char] CSS variable ${variableName ?? "(unknown)"} rejected: value exceeds max length (${trimmed.length} > ${MAX_CSS_VARIABLE_VALUE_LENGTH})`);
+		return;
+	}
+	if (CONTROL_CHAR_PATTERN.test(trimmed)) {
+		console.warn(`[Char] CSS variable ${variableName ?? "(unknown)"} rejected: contains control characters`);
+		return;
+	}
+	const blockedToken = getBlockedCssVariableToken(normalizeForSecurityScan(trimmed));
+	if (blockedToken) return warnAndReject(variableName, blockedToken);
+	return trimmed;
+}
+function getBlockedCssVariableToken(normalizedValue) {
+	if (normalizedValue.includes("javascript:")) return "javascript:";
+	if (normalizedValue.includes("vbscript:")) return "vbscript:";
+	if (normalizedValue.includes("expression(")) return "expression(";
+	if (normalizedValue.includes("@import")) return "@import";
+	if (normalizedValue.includes("-moz-binding")) return "-moz-binding";
+	if (normalizedValue.includes("url(")) return "url(";
+}
+function warnAndReject(variableName, blockedToken) {
+	console.warn(`[Char] CSS variable ${variableName ?? "(unknown)"} rejected: contains blocked token "${blockedToken}"`);
+}
+
+//#endregion
+//#region src/utils/css-resolver.ts
+/**
+* CSS var() Resolver
+*
+* Recursively resolves CSS custom property references (`var(--x, fallback)`)
+* to concrete values using getComputedStyle(). Necessary because `var()`
+* references are not valid across iframe boundaries.
+*
+* Handles nested var() references, fallbacks, and cycle detection.
+*/
+const MAX_CSS_VAR_RESOLVE_DEPTH = 12;
+function findMatchingParen(value, openParenIndex) {
+	let depth = 1;
+	for (let i = openParenIndex + 1; i < value.length; i++) {
+		const char = value[i];
+		if (char === "(") depth += 1;
+		else if (char === ")") depth -= 1;
+		if (depth === 0) return i;
+	}
+	return -1;
+}
+function splitTopLevelComma(value) {
+	let depth = 0;
+	for (let i = 0; i < value.length; i++) {
+		const char = value[i];
+		if (char === "(") depth += 1;
+		else if (char === ")") depth = Math.max(0, depth - 1);
+		else if (char === "," && depth === 0) return [value.slice(0, i), value.slice(i + 1)];
+	}
+	return [value, void 0];
+}
+function resolveFallback(fallback, computed, seen, depth) {
+	if (!fallback) return void 0;
+	return resolveCssValue(fallback, computed, seen, depth + 1) || void 0;
+}
+function resolveCssVariable(variableName, fallback, computed, seen, depth) {
+	if (depth > MAX_CSS_VAR_RESOLVE_DEPTH) {
+		console.warn(`[Char] CSS variable resolution depth exceeded for "${variableName}". Possible circular reference.`);
+		return fallback?.trim();
+	}
+	if (!variableName.startsWith("--") || seen.has(variableName)) return resolveFallback(fallback, computed, seen, depth);
+	const nextSeen = new Set(seen);
+	nextSeen.add(variableName);
+	const rawValue = computed.getPropertyValue(variableName).trim();
+	if (rawValue) {
+		const resolvedRaw = resolveCssValue(rawValue, computed, nextSeen, depth + 1);
+		if (resolvedRaw) return resolvedRaw;
+	}
+	return resolveFallback(fallback, computed, seen, depth);
+}
+function resolveCssValue(value, computed, seen, depth = 0) {
+	const trimmed = value.trim();
+	if (!trimmed || !trimmed.includes("var(") || depth > MAX_CSS_VAR_RESOLVE_DEPTH) return trimmed;
+	let cursor = 0;
+	let resolved = "";
+	let replacedAny = false;
+	while (cursor < trimmed.length) {
+		const varStart = trimmed.indexOf("var(", cursor);
+		if (varStart === -1) {
+			resolved += trimmed.slice(cursor);
+			break;
+		}
+		resolved += trimmed.slice(cursor, varStart);
+		const openParenIndex = varStart + 3;
+		const closeParenIndex = findMatchingParen(trimmed, openParenIndex);
+		if (closeParenIndex === -1) {
+			resolved += trimmed.slice(varStart);
+			break;
+		}
+		const [rawVariableName, rawFallback] = splitTopLevelComma(trimmed.slice(openParenIndex + 1, closeParenIndex));
+		const variableName = rawVariableName.trim();
+		const fallback = rawFallback?.trim();
+		const replacement = variableName ? resolveCssVariable(variableName, fallback, computed, seen, depth + 1) : void 0;
+		if (replacement !== void 0) {
+			resolved += replacement;
+			replacedAny = true;
+		} else resolved += trimmed.slice(varStart, closeParenIndex + 1);
+		cursor = closeParenIndex + 1;
+	}
+	const normalized = resolved.trim();
+	if (!replacedAny || !normalized.includes("var(")) return normalized;
+	return resolveCssValue(normalized, computed, seen, depth + 1);
+}
+
+//#endregion
+//#region src/utils/css-variables.ts
+/**
+* Public CSS variable names for the Char widget.
+*
+* These are the external API — host pages set these to customise the widget.
+* We maintain static lists because `getComputedStyle()` cannot enumerate
+* custom properties.
+*
+* Source of truth:
+* - `src/styles/globals.css` (`--char-*`)
+* - WebMCP ext-apps UI spec (`--color-*`, `--font-*`, etc.)
+*/
+const CHAR_PUBLIC_VARIABLE_NAMES = [
+	"--char-color-background",
+	"--char-color-foreground",
+	"--char-color-card",
+	"--char-color-card-foreground",
+	"--char-color-popover",
+	"--char-color-popover-foreground",
+	"--char-color-primary",
+	"--char-color-primary-foreground",
+	"--char-color-secondary",
+	"--char-color-secondary-foreground",
+	"--char-color-muted",
+	"--char-color-muted-foreground",
+	"--char-color-accent",
+	"--char-color-accent-foreground",
+	"--char-color-destructive",
+	"--char-color-destructive-foreground",
+	"--char-color-border",
+	"--char-color-success",
+	"--char-color-warning",
+	"--char-color-error",
+	"--char-color-input",
+	"--char-color-ring",
+	"--char-user-bubble-bg",
+	"--char-user-bubble-text",
+	"--char-assistant-bubble-bg",
+	"--char-assistant-bubble-text",
+	"--char-composer-bg",
+	"--char-composer-border",
+	"--char-composer-text",
+	"--char-composer-placeholder",
+	"--char-composer-button-bg",
+	"--char-composer-button-text",
+	"--char-tool-bg",
+	"--char-tool-border",
+	"--char-tool-text",
+	"--char-tool-header-bg",
+	"--char-tool-approve-bg",
+	"--char-tool-approve-text",
+	"--char-tool-deny-bg",
+	"--char-tool-deny-text",
+	"--char-code-bg",
+	"--char-code-text",
+	"--char-code-header-bg",
+	"--char-radius",
+	"--char-radius-sm",
+	"--char-radius-md",
+	"--char-radius-lg",
+	"--char-radius-xl",
+	"--char-radius-2xl",
+	"--char-radius-3xl",
+	"--char-radius-full",
+	"--char-spacing-unit",
+	"--char-font-sans",
+	"--char-font-mono",
+	"--char-font-size-xs",
+	"--char-font-size-sm",
+	"--char-font-size-base",
+	"--char-font-size-lg",
+	"--char-duration-fast",
+	"--char-duration-normal",
+	"--char-duration-slow",
+	"--char-easing-default",
+	"--char-easing-spring",
+	"--char-z-base",
+	"--char-z-content",
+	"--char-z-overlay",
+	"--char-z-max",
+	"--char-shadow-sm",
+	"--char-shadow-md",
+	"--char-shadow-lg",
+	"--char-blur-sm",
+	"--char-blur-md",
+	"--char-blur-lg"
+];
+const MCP_UI_STYLE_VARIABLE_NAMES = [
+	"--color-background-primary",
+	"--color-background-secondary",
+	"--color-background-tertiary",
+	"--color-background-inverse",
+	"--color-background-ghost",
+	"--color-background-info",
+	"--color-background-danger",
+	"--color-background-success",
+	"--color-background-warning",
+	"--color-background-disabled",
+	"--color-text-primary",
+	"--color-text-secondary",
+	"--color-text-tertiary",
+	"--color-text-inverse",
+	"--color-text-ghost",
+	"--color-text-info",
+	"--color-text-danger",
+	"--color-text-success",
+	"--color-text-warning",
+	"--color-text-disabled",
+	"--color-border-primary",
+	"--color-border-secondary",
+	"--color-border-tertiary",
+	"--color-border-inverse",
+	"--color-border-ghost",
+	"--color-border-info",
+	"--color-border-danger",
+	"--color-border-success",
+	"--color-border-warning",
+	"--color-border-disabled",
+	"--color-ring-primary",
+	"--color-ring-secondary",
+	"--color-ring-inverse",
+	"--color-ring-info",
+	"--color-ring-danger",
+	"--color-ring-success",
+	"--color-ring-warning",
+	"--font-sans",
+	"--font-mono",
+	"--font-weight-normal",
+	"--font-weight-medium",
+	"--font-weight-semibold",
+	"--font-weight-bold",
+	"--font-text-xs-size",
+	"--font-text-sm-size",
+	"--font-text-md-size",
+	"--font-text-lg-size",
+	"--font-heading-xs-size",
+	"--font-heading-sm-size",
+	"--font-heading-md-size",
+	"--font-heading-lg-size",
+	"--font-heading-xl-size",
+	"--font-heading-2xl-size",
+	"--font-heading-3xl-size",
+	"--font-text-xs-line-height",
+	"--font-text-sm-line-height",
+	"--font-text-md-line-height",
+	"--font-text-lg-line-height",
+	"--font-heading-xs-line-height",
+	"--font-heading-sm-line-height",
+	"--font-heading-md-line-height",
+	"--font-heading-lg-line-height",
+	"--font-heading-xl-line-height",
+	"--font-heading-2xl-line-height",
+	"--font-heading-3xl-line-height",
+	"--border-radius-xs",
+	"--border-radius-sm",
+	"--border-radius-md",
+	"--border-radius-lg",
+	"--border-radius-xl",
+	"--border-radius-full",
+	"--border-width-regular",
+	"--shadow-hairline",
+	"--shadow-sm",
+	"--shadow-md",
+	"--shadow-lg"
+];
+const CHAR_CSS_VARIABLE_NAMES = [...CHAR_PUBLIC_VARIABLE_NAMES, ...MCP_UI_STYLE_VARIABLE_NAMES];
+
+//#endregion
+//#region src/utils/display-mode.ts
+function resolveDisplayModeFromAttribute(displayModeAttr) {
+	if (!isDisplayMode(displayModeAttr)) return;
+	return displayModeAttr;
+}
+
+//#endregion
+//#region src/web-component.tsx
+/**
+* Shared options used by custom events emitted from the host element.
+*/
+const CHAR_CUSTOM_EVENT_OPTIONS = {
+	bubbles: true,
+	composed: true
+};
+/**
+* Inline iframe styles used to make the host element a transparent container.
+*/
+const IFRAME_STYLE = "width:100%;height:100%;border:none;display:block;";
+/**
+* Display mode values advertised to the embedded runtime.
+*/
+const DISPLAY_MODES = [
+	"inline",
+	"fullscreen",
+	"pip"
+];
+/**
+* Normalizes an API key by trimming whitespace and collapsing empty strings.
+*/
+function normalizeApiKey(value) {
+	const trimmed = value?.trim();
+	return trimmed ? trimmed : void 0;
+}
+/**
+* Produces a sanitized dev-mode configuration and drops empty payloads.
+*/
+function resolveDevMode(devMode) {
+	if (!devMode) return void 0;
+	const normalized = {
+		anthropicApiKey: normalizeApiKey(devMode.anthropicApiKey),
+		openaiApiKey: normalizeApiKey(devMode.openaiApiKey),
+		useLocalApi: devMode.useLocalApi === true ? true : void 0
+	};
+	return !!normalized.anthropicApiKey || !!normalized.openaiApiKey || !!normalized.useLocalApi ? normalized : void 0;
+}
+/**
+* Runtime guard for the message envelope emitted by the iframe.
+*/
+function isCharIframeMessageData(value) {
+	if (!value || typeof value !== "object") return false;
+	const maybeType = value.type;
+	return typeof maybeType === "string" && maybeType.startsWith("char-");
+}
+function getStringOrUndefined(value) {
+	return typeof value === "string" ? value : void 0;
+}
+function getNumberOrUndefined(value) {
+	return typeof value === "number" ? value : void 0;
+}
+/**
+* Get the iframe src URL.
+* Points to the SaaS app's static /embed/ entrypoint with the parent origin as a query parameter.
+*
+* @param apiBase - Public base URL for the Char SaaS application.
+* @param parentOrigin - Origin of the host page embedding the widget.
+* @returns Fully qualified iframe URL targeting the embed entrypoint.
+*/
+function getIframeSrc(apiBase, parentOrigin) {
+	return `${apiBase}/embed/?parentOrigin=${encodeURIComponent(parentOrigin)}`;
+}
+/**
+* Extract host CSS variable values from a host element.
+* Includes both `--char-*` and MCP UI style `--color-*`/`--font-*` tokens.
+* Uses a static list since getComputedStyle() cannot enumerate custom properties.
+* Values containing `var()` are resolved to concrete values before transport
+* so the iframe can safely apply them in its own CSS scope.
+*
+* @param el - Host `<char-agent>` element.
+* @returns A snapshot of resolved CSS custom properties for the iframe.
+*/
+function extractCharVariables(el) {
+	const computed = getComputedStyle(el);
+	const vars = {};
+	for (const name of CHAR_CSS_VARIABLE_NAMES) {
+		const rawValue = computed.getPropertyValue(name).trim();
+		if (rawValue) {
+			const sanitizedValue = sanitizeCssVariableValue(resolveCssValue(rawValue, computed, new Set([name])) || rawValue, name);
+			if (sanitizedValue !== void 0) vars[name] = sanitizedValue;
+		}
+	}
+	return vars;
+}
+/**
+* Detect whether the host page is in dark mode.
+* Checks the data-theme attribute, the `dark` class on <html>, and the prefers-color-scheme media query.
+*
+* @returns `true` when the host page should be treated as dark mode.
+*/
+function isDarkMode() {
+	if (typeof document === "undefined") return false;
+	const themeAttr = document.documentElement.getAttribute("data-theme");
+	if (themeAttr === "dark") return true;
+	if (themeAttr === "light") return false;
+	return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+/**
+* Deep equality check using JSON.stringify. Sufficient for the flat/nested
+* structures in CharHostContext (no circular refs, no functions).
+*
+* @param a - First value.
+* @param b - Second value.
+* @returns `true` when both values serialize identically.
+*/
+function deepEqual(a, b) {
+	return JSON.stringify(a) === JSON.stringify(b);
+}
+/**
+* Parses a CSS pixel value into a finite number.
+*/
+function parsePxToNumber(value) {
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+/**
+* Reads safe-area inset values using `env(safe-area-inset-*)`.
+*/
+function getSafeAreaInsets() {
+	if (typeof document === "undefined") return void 0;
+	const probe = document.createElement("div");
+	probe.style.cssText = [
+		"position:fixed",
+		"visibility:hidden",
+		"pointer-events:none",
+		"inset:0 auto auto 0",
+		"padding-top:env(safe-area-inset-top)",
+		"padding-right:env(safe-area-inset-right)",
+		"padding-bottom:env(safe-area-inset-bottom)",
+		"padding-left:env(safe-area-inset-left)"
+	].join(";");
+	document.documentElement.appendChild(probe);
+	const computed = getComputedStyle(probe);
+	const insets = {
+		top: parsePxToNumber(computed.paddingTop),
+		right: parsePxToNumber(computed.paddingRight),
+		bottom: parsePxToNumber(computed.paddingBottom),
+		left: parsePxToNumber(computed.paddingLeft)
+	};
+	probe.remove();
+	return insets;
+}
+/**
+* Identifies the host platform category from the user agent.
+* Note: 'desktop' detection not yet implemented; non-mobile UAs resolve to 'web'.
+*/
+function detectPlatform() {
+	if (typeof navigator === "undefined") return "web";
+	const ua = navigator.userAgent.toLowerCase();
+	if (/(iphone|ipad|ipod|android|mobile)/.test(ua)) return "mobile";
+	return "web";
+}
+/**
+* Captures lightweight host device capability hints.
+*/
+function getDeviceCapabilities() {
+	if (typeof window === "undefined" || typeof navigator === "undefined") return {};
+	return {
+		touch: "ontouchstart" in window || navigator.maxTouchPoints > 0,
+		hover: window.matchMedia("(hover: hover)").matches,
+		pointerFine: window.matchMedia("(pointer: fine)").matches
+	};
+}
+/**
+* `<char-agent>` custom element.
+*
+* Creates an iframe pointing to the SaaS app's /embed/ entrypoint and relays
+* auth, styles, dark mode, display mode, and MCP messages via postMessage.
+*
+* Uses a unified `char-context` message with diffing (only changed fields
+* are sent) instead of separate messages per concern.
+*
+* @public
+*/
+var CharAgentElement = class extends HTMLElement {
+	static observedAttributes = [
+		"dev-mode",
+		"enable-debug-tools",
+		"display-mode",
+		"api-base"
+	];
+	/** Active iframe element owned by this custom element instance. */
+	_iframe = null;
+	/** MCP relay between host window and embed iframe. */
+	_proxy = null;
+	/** Indicates whether the iframe has emitted `char-ready`. */
+	_iframeReady = false;
+	/** Bound window message handler for iframe-originated events. */
+	_messageListener = null;
+	/** Observer that tracks host theme mutations. */
+	_darkModeObserver = null;
+	/** Media query object for `prefers-color-scheme`. */
+	_darkModeMediaQuery = null;
+	/** Registered media query callback. */
+	_darkModeMediaHandler = null;
+	/** Observer that tracks host style/class mutations. */
+	_styleObserver = null;
+	/** Observer that tracks container size changes. */
+	_containerResizeObserver = null;
+	/** In-flight teardown request waiting for iframe acknowledgement. */
+	_teardownPending = null;
+	/** Monotonic sequence used to construct teardown request IDs. */
+	_teardownSequence = 0;
+	/** Re-entrancy guard used during disconnect lifecycle. */
+	_isDisconnecting = false;
+	/** Last host context snapshot used for delta emission. */
+	_hostContext = {};
+	/** Pending credentials that are flushed when the iframe is ready. */
+	_pendingAuth = null;
+	/**
+	* Mount lifecycle: builds iframe runtime, starts proxying, and starts host observers.
+	* The existing runtime is reused when reconnecting during fast detach/reattach cycles.
+	*/
+	connectedCallback() {
+		if (this._hasActiveRuntime()) {
+			this._isDisconnecting = false;
+			this._teardownSequence = 0;
+			if (this._teardownPending) {
+				window.clearTimeout(this._teardownPending.timeoutId);
+				this._teardownPending.resolve();
+				this._teardownPending = null;
+			}
+			if (this._iframe && !this.contains(this._iframe)) this.appendChild(this._iframe);
+			return;
+		}
+		if (!this.style.display) this.style.display = "block";
+		const resolvedDevMode = resolveDevMode(this._resolveDevMode());
+		const apiBase = this._resolveApiBaseOverride() ?? (resolvedDevMode?.useLocalApi ? window.location.origin : WEBMCP_PRODUCTION_API_BASE);
+		const iframeOrigin = this._resolveIframeOrigin(apiBase);
+		const iframe = this._createIframe(apiBase);
+		this._iframe = iframe;
+		this._proxy = new CharIframeProxy(iframe, iframeOrigin);
+		this._proxy.start();
+		this._messageListener = this._createMessageListener(iframe, iframeOrigin);
+		window.addEventListener("message", this._messageListener);
+		this._observeDarkMode();
+		this._observeStyleChanges();
+		this._observeContainerDimensions();
+		this.appendChild(iframe);
+	}
+	/**
+	* Determines whether this instance already has an initialized runtime.
+	*/
+	_hasActiveRuntime() {
+		return !!(this._iframe || this._proxy || this._messageListener);
+	}
+	/**
+	* Parses and validates the iframe origin from the configured API base URL.
+	*
+	* @throws Error When `apiBase` is not a valid URL.
+	*/
+	_resolveIframeOrigin(apiBase) {
+		try {
+			return new URL(apiBase).origin;
+		} catch {
+			throw new Error(`[Char] Invalid api-base: "${apiBase}". Must be a valid URL.`);
+		}
+	}
+	/**
+	* Creates a fully configured iframe element for the embed runtime.
+	*/
+	_createIframe(apiBase) {
+		const iframe = document.createElement("iframe");
+		iframe.src = getIframeSrc(apiBase, window.location.origin);
+		iframe.style.cssText = IFRAME_STYLE;
+		iframe.title = "Char AI Assistant";
+		iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
+		iframe.setAttribute("allow", "microphone");
+		return iframe;
+	}
+	/**
+	* Creates the message listener that filters by source/origin and dispatches typed events.
+	*/
+	_createMessageListener(iframe, iframeOrigin) {
+		return (event) => {
+			if (event.source !== iframe.contentWindow) return;
+			if (event.origin !== iframeOrigin) return;
+			if (!isCharIframeMessageData(event.data)) return;
+			this._handleIframeMessage(event.data, iframeOrigin);
+		};
+	}
+	/**
+	* Routes validated iframe messages to local handlers and host DOM events.
+	*/
+	_handleIframeMessage(data, iframeOrigin) {
+		switch (data.type) {
+			case "char-ready":
+				this._iframeReady = true;
+				this._sendInitialContext(iframeOrigin);
+				return;
+			case "char-initialized":
+				this._emitCharEvent("char-initialized");
+				return;
+			case "char-size-changed": {
+				const width = getNumberOrUndefined(data.width);
+				const height = getNumberOrUndefined(data.height);
+				const rawSizeMode = getStringOrUndefined(data.displayMode);
+				const sizeDisplayMode = rawSizeMode && DISPLAY_MODES.includes(rawSizeMode) ? rawSizeMode : void 0;
+				if (width !== void 0 || height !== void 0) {
+					const detail = {
+						width,
+						height,
+						displayMode: sizeDisplayMode
+					};
+					this._emitCharEventWithDetail("char-size-changed", detail);
+				}
+				return;
+			}
+			case "char-request-display-mode": {
+				const rawMode = getStringOrUndefined(data.mode);
+				const detail = { mode: rawMode && DISPLAY_MODES.includes(rawMode) ? rawMode : void 0 };
+				this._emitCharEventWithDetail("char-request-display-mode", detail);
+				return;
+			}
+			case "char-close":
+				this._emitCharEvent("char-close");
+				return;
+			case "char-error":
+				this._emitCharEventWithDetail("char-error", {
+					code: getStringOrUndefined(data.code) ?? "UNKNOWN",
+					message: getStringOrUndefined(data.message)
+				});
+				return;
+			case "char-open-link": {
+				const requestId = getStringOrUndefined(data.requestId);
+				const url = getStringOrUndefined(data.url);
+				if (requestId && url) this._handleOpenLinkRequest(requestId, url, iframeOrigin);
+				else if (requestId) this._iframe?.contentWindow?.postMessage({
+					type: "char-open-link-result",
+					requestId,
+					ok: false,
+					error: "Missing url in char-open-link message"
+				}, iframeOrigin);
+				else console.error("[Char] Received char-open-link without requestId");
+				return;
+			}
+			case "char-teardown-complete":
+				this._resolvePendingTeardown(getStringOrUndefined(data.requestId));
+				return;
+			default:
+				console.warn(`[Char] Unrecognized iframe message type: "${data.type}"`);
+				return;
+		}
+	}
+	/**
+	* Emits a host-facing custom event without detail payload.
+	*/
+	_emitCharEvent(type) {
+		this.dispatchEvent(new CustomEvent(type, CHAR_CUSTOM_EVENT_OPTIONS));
+	}
+	/**
+	* Emits a host-facing custom event with detail payload.
+	*/
+	_emitCharEventWithDetail(type, detail) {
+		this.dispatchEvent(new CustomEvent(type, {
+			...CHAR_CUSTOM_EVENT_OPTIONS,
+			detail
+		}));
+	}
+	/**
+	* Emits a standardized `char-error` event.
+	*/
+	_emitCharError(code, message) {
+		const detail = {
+			code,
+			message
+		};
+		this._emitCharEventWithDetail("char-error", detail);
+	}
+	/**
+	* Unmount lifecycle: requests iframe teardown and releases all host resources.
+	*/
+	disconnectedCallback() {
+		if (this._isDisconnecting) return;
+		this._isDisconnecting = true;
+		try {
+			const iframeOrigin = this._getIframeOrigin();
+			if (this._iframeReady && iframeOrigin) {
+				this._requestTeardown(iframeOrigin, "unmount").catch((err) => console.error("[Char] Teardown failed:", err)).finally(() => {
+					if (this.isConnected) {
+						this._isDisconnecting = false;
+						return;
+					}
+					this._finalizeDisconnect();
+				});
+				return;
+			}
+		} catch (err) {
+			console.error("[Char] Error during disconnect:", err);
+		}
+		this._finalizeDisconnect();
+	}
+	/**
+	* Releases iframe, observers, listeners, and pending teardown state.
+	*/
+	_finalizeDisconnect() {
+		if (this._proxy) {
+			this._proxy.destroy();
+			this._proxy = null;
+		}
+		if (this._messageListener) {
+			window.removeEventListener("message", this._messageListener);
+			this._messageListener = null;
+		}
+		if (this._darkModeObserver) {
+			this._darkModeObserver.disconnect();
+			this._darkModeObserver = null;
+		}
+		if (this._darkModeMediaQuery && this._darkModeMediaHandler) {
+			this._darkModeMediaQuery.removeEventListener("change", this._darkModeMediaHandler);
+			this._darkModeMediaQuery = null;
+			this._darkModeMediaHandler = null;
+		}
+		if (this._styleObserver) {
+			this._styleObserver.disconnect();
+			this._styleObserver = null;
+		}
+		if (this._containerResizeObserver) {
+			this._containerResizeObserver.disconnect();
+			this._containerResizeObserver = null;
+		}
+		if (this._iframe) {
+			this._iframe.remove();
+			this._iframe = null;
+		}
+		if (this._teardownPending) {
+			window.clearTimeout(this._teardownPending.timeoutId);
+			this._teardownPending.resolve();
+			this._teardownPending = null;
+		}
+		this._iframeReady = false;
+		this._pendingAuth = null;
+		this._hostContext = {};
+		this._teardownSequence = 0;
+		this._isDisconnecting = false;
+	}
+	/**
+	* Reacts to observed attribute updates after iframe readiness.
+	* Attributes that affect iframe boot configuration are intentionally ignored
+	* after mount (`dev-mode`, `enable-debug-tools`, `api-base`).
+	*/
+	attributeChangedCallback(name, _oldValue, newValue) {
+		if (!this._iframe || !this._iframeReady) return;
+		switch (name) {
+			case "display-mode":
+				this.setHostContext({ displayMode: resolveDisplayModeFromAttribute(newValue) });
+				break;
+			case "dev-mode":
+			case "enable-debug-tools":
+			case "api-base": break;
+		}
+	}
+	/**
+	* Connect to the Char agent with authentication.
+	*
+	* The token is stored as a JavaScript property (not as a DOM attribute),
+	* preventing exposure to DOM inspection and session replay tools.
+	*
+	* @param options - Authentication payload for either ID token or ticket auth.
+	* @returns `true` when the payload is accepted; `false` when validation fails.
+	*/
+	connect(options) {
+		if (!options?.idToken && !options?.ticketAuth) {
+			this._emitCharError("MISSING_TOKEN", "connect() requires either idToken or ticketAuth parameter");
+			return false;
+		}
+		if (options?.idToken && !options?.ticketAuth && !options?.clientId) {
+			this._emitCharError("MISSING_CLIENT_ID", "connect() requires clientId when using idToken authentication");
+			return false;
+		}
+		this._pendingAuth = {
+			idToken: options.ticketAuth ? void 0 : options.idToken,
+			clientId: options.ticketAuth ? void 0 : options.clientId,
+			organizationId: options.ticketAuth ? void 0 : options.organizationId,
+			ticketAuth: options.ticketAuth
+		};
+		const iframeOrigin = this._getIframeOrigin();
+		if (this._iframeReady && iframeOrigin) this._postAuth(iframeOrigin);
+		return true;
+	}
+	/**
+	* Convenience method for declarative wrappers.
+	* Applies auth when provided, otherwise clears auth.
+	*
+	* @param options - Auth payload to connect, or `null` to disconnect.
+	* @returns Result from `connect()` or `disconnect()`.
+	*/
+	setAuth(options) {
+		if (!options) return this.disconnect();
+		return this.connect(options);
+	}
+	/**
+	* Disconnect from the Char agent.
+	* Clears the authentication token.
+	*
+	* @returns `true` when the disconnect message was sent; `false` when the iframe was not ready.
+	*/
+	disconnect() {
+		this._pendingAuth = null;
+		const iframeOrigin = this._getIframeOrigin();
+		if (this._iframeReady && this._iframe && iframeOrigin) {
+			this._iframe.contentWindow?.postMessage({ type: "char-disconnect" }, iframeOrigin);
+			return true;
+		}
+		return false;
+	}
+	/**
+	* Resolves the current iframe origin when mounted.
+	*/
+	_getIframeOrigin() {
+		if (!this._iframe?.src) return null;
+		try {
+			return new URL(this._iframe.src).origin;
+		} catch {
+			console.error("[Char] Failed to parse iframe origin from src:", this._iframe.src);
+			return null;
+		}
+	}
+	/**
+	* Update the host context sent to the iframe.
+	* Only changed fields are transmitted (diffing pattern).
+	*
+	* @param hostContext - Partial host context patch to merge and emit.
+	*/
+	setHostContext(hostContext) {
+		const changes = {};
+		const nextContext = mergeHostContext(this._hostContext, hostContext);
+		let hasChanges = false;
+		for (const key of Object.keys(hostContext)) {
+			const oldValue = this._hostContext[key];
+			const newValue = nextContext[key];
+			if (deepEqual(oldValue, newValue)) continue;
+			changes[key] = hostContext[key];
+			hasChanges = true;
+		}
+		if (hasChanges) {
+			this._hostContext = nextContext;
+			this._sendContextDelta(changes);
+		}
+	}
+	/**
+	* Build and send the full initial context after iframe signals char-ready.
+	*
+	* @param iframeOrigin - Trusted origin used for postMessage target filtering.
+	*/
+	_sendInitialContext(iframeOrigin) {
+		const vars = extractCharVariables(this);
+		const theme = isDarkMode() ? "dark" : "light";
+		const displayModeAttr = this.getAttribute("display-mode");
+		const locale = typeof navigator !== "undefined" ? navigator.language : void 0;
+		const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+		const containerDimensions = {
+			width: this.clientWidth,
+			height: this.clientHeight
+		};
+		const safeAreaInsets = getSafeAreaInsets();
+		const displayMode = resolveDisplayModeFromAttribute(displayModeAttr);
+		const hostCapabilities = {
+			supportedDisplayModes: [...DISPLAY_MODES],
+			supportsOpenLink: true,
+			supportsTeardown: true
+		};
+		const context = {
+			theme,
+			styles: { variables: vars },
+			displayMode,
+			availableDisplayModes: [...DISPLAY_MODES],
+			containerDimensions,
+			locale,
+			timeZone,
+			platform: detectPlatform(),
+			deviceCapabilities: getDeviceCapabilities(),
+			safeAreaInsets,
+			userAgent: typeof navigator !== "undefined" ? navigator.userAgent : void 0,
+			hostCapabilities
+		};
+		this._hostContext = context;
+		if (!this._iframe?.contentWindow) {
+			console.error("[Char] iframe signaled char-ready but contentWindow is null");
+			this._iframeReady = false;
+			this._emitCharError("IFRAME_CONTENT_WINDOW_NULL", "iframe signaled char-ready but contentWindow is null");
+			return;
+		}
+		this._iframe.contentWindow.postMessage({
+			type: "char-context",
+			...context
+		}, iframeOrigin);
+		if (parseBooleanAttribute(this.getAttribute("enable-debug-tools"))) this._iframe?.contentWindow?.postMessage({
+			type: "char-debug-tools",
+			enabled: true
+		}, iframeOrigin);
+		if (this._pendingAuth) this._postAuth(iframeOrigin);
+	}
+	/**
+	* Send a context delta to the iframe.
+	*
+	* @param changes - Minimal context patch derived from diffing.
+	*/
+	_sendContextDelta(changes) {
+		if (!this._iframeReady || !this._iframe?.contentWindow) return;
+		const iframeOrigin = this._getIframeOrigin();
+		if (!iframeOrigin) {
+			console.warn("[Char] Cannot send context delta: iframe origin is null");
+			return;
+		}
+		this._iframe.contentWindow.postMessage({
+			type: "char-context",
+			...changes
+		}, iframeOrigin);
+	}
+	/**
+	* Post authentication credentials to the iframe.
+	*
+	* @param iframeOrigin - Trusted origin used for postMessage target filtering.
+	*/
+	_postAuth(iframeOrigin) {
+		if (!this._pendingAuth || !this._iframe?.contentWindow) return;
+		const message = this._pendingAuth.ticketAuth ? {
+			type: "char-auth",
+			ticketAuth: this._pendingAuth.ticketAuth
+		} : {
+			type: "char-auth",
+			idToken: this._pendingAuth.idToken,
+			clientId: this._pendingAuth.clientId,
+			organizationId: this._pendingAuth.organizationId
+		};
+		this._iframe.contentWindow.postMessage(message, iframeOrigin);
+	}
+	/**
+	* Requests graceful iframe teardown and resolves once acknowledged or timed out.
+	*
+	* @param iframeOrigin - Trusted origin used for postMessage target filtering.
+	* @param reason - Lifecycle reason for teardown.
+	* @returns Promise resolved when teardown flow completes.
+	*/
+	_requestTeardown(iframeOrigin, reason) {
+		if (!this._iframeReady || !this._iframe?.contentWindow) return Promise.resolve();
+		if (this._teardownPending) {
+			window.clearTimeout(this._teardownPending.timeoutId);
+			this._teardownPending.resolve();
+			this._teardownPending = null;
+		}
+		const requestId = `teardown-${Date.now()}-${++this._teardownSequence}`;
+		return new Promise((resolve) => {
+			const timeoutId = window.setTimeout(() => {
+				if (this._teardownPending?.requestId === requestId) {
+					console.debug("[Char] Teardown timed out after 1000ms, requestId:", requestId);
+					this._teardownPending = null;
+					resolve();
+				}
+			}, 1e3);
+			this._teardownPending = {
+				requestId,
+				timeoutId,
+				resolve: () => {
+					window.clearTimeout(timeoutId);
+					resolve();
+				}
+			};
+			this._iframe?.contentWindow?.postMessage({
+				type: "char-teardown",
+				requestId,
+				reason
+			}, iframeOrigin);
+		});
+	}
+	/**
+	* Completes an in-flight teardown promise when the iframe acknowledges it.
+	*
+	* @param requestId - Optional request identifier to match against pending teardown.
+	*/
+	_resolvePendingTeardown(requestId) {
+		const pending = this._teardownPending;
+		if (!pending) return;
+		if (requestId && requestId !== pending.requestId) return;
+		this._teardownPending = null;
+		pending.resolve();
+	}
+	/**
+	* Handles open-link requests from the iframe with protocol allowlisting.
+	* This allowlist intentionally mirrors the iframe-side pre-filter.
+	*
+	* @param requestId - Link request identifier supplied by the iframe.
+	* @param url - Requested URL string.
+	* @param iframeOrigin - Trusted origin used for postMessage target filtering.
+	*/
+	_handleOpenLinkRequest(requestId, url, iframeOrigin) {
+		let ok = false;
+		let error;
+		try {
+			const parsed = new URL(url, window.location.href);
+			const protocol = parsed.protocol.toLowerCase();
+			if (!(protocol === "http:" || protocol === "https:" || protocol === "mailto:" || protocol === "tel:")) throw new Error(`Unsupported URL protocol: ${protocol}`);
+			ok = window.open(parsed.toString(), "_blank", "noopener,noreferrer") !== null || protocol === "mailto:" || protocol === "tel:";
+			if (!ok) error = "Popup blocked by browser";
+			this.dispatchEvent(new CustomEvent("char-open-link", {
+				...CHAR_CUSTOM_EVENT_OPTIONS,
+				detail: {
+					requestId,
+					url: parsed.toString(),
+					ok
+				}
+			}));
+		} catch (err) {
+			error = err instanceof Error ? err.message : String(err);
+			console.error("[Char] open-link request failed:", err);
+		}
+		this._iframe?.contentWindow?.postMessage({
+			type: "char-open-link-result",
+			requestId,
+			ok,
+			error
+		}, iframeOrigin);
+	}
+	/**
+	* Observe dark mode changes and forward to iframe via unified context.
+	*/
+	_observeDarkMode() {
+		const syncThemeAndStyles = () => {
+			if (!this._iframeReady) return;
+			this.setHostContext({
+				theme: isDarkMode() ? "dark" : "light",
+				styles: { variables: extractCharVariables(this) }
+			});
+		};
+		this._darkModeObserver = new MutationObserver(syncThemeAndStyles);
+		this._darkModeObserver.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"class",
+				"style",
+				"data-theme"
+			]
+		});
+		this._darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+		this._darkModeMediaHandler = syncThemeAndStyles;
+		this._darkModeMediaQuery.addEventListener("change", this._darkModeMediaHandler);
+	}
+	/**
+	* Observe style attribute changes on <char-agent> to detect CSS variable updates.
+	* Re-extracts variables and sends delta via unified context.
+	*/
+	_observeStyleChanges() {
+		this._styleObserver = new MutationObserver(() => {
+			if (!this._iframeReady) return;
+			this.setHostContext({ styles: { variables: extractCharVariables(this) } });
+		});
+		this._styleObserver.observe(this, {
+			attributes: true,
+			attributeFilter: ["style", "class"]
+		});
+	}
+	/**
+	* Observe host element dimensions to provide containerDimensions context.
+	*/
+	_observeContainerDimensions() {
+		this._containerResizeObserver = new ResizeObserver((entries) => {
+			if (!this._iframeReady) return;
+			const entry = entries[0];
+			if (!entry) return;
+			this.setHostContext({
+				containerDimensions: {
+					width: Math.round(entry.contentRect.width),
+					height: Math.round(entry.contentRect.height)
+				},
+				safeAreaInsets: getSafeAreaInsets()
+			});
+		});
+		this._containerResizeObserver.observe(this);
+	}
+	/**
+	* Resolve devMode from property (React 19) or attribute.
+	*
+	* @returns Parsed dev-mode configuration when valid.
+	*/
+	_resolveDevMode() {
+		if (this.devMode && typeof this.devMode === "object") return this.devMode;
+		const devModeAttr = this.getAttribute("dev-mode");
+		if (!devModeAttr) return void 0;
+		try {
+			const parsed = JSON.parse(devModeAttr);
+			if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+				const msg = `dev-mode attribute must be a JSON object, got: ${Array.isArray(parsed) ? "array" : typeof parsed}`;
+				console.warn(`[Char] ${msg}`);
+				this._emitCharError("INVALID_DEV_MODE", msg);
+				return;
+			}
+			const obj = parsed;
+			return {
+				anthropicApiKey: typeof obj.anthropicApiKey === "string" ? obj.anthropicApiKey : void 0,
+				openaiApiKey: typeof obj.openaiApiKey === "string" ? obj.openaiApiKey : void 0,
+				useLocalApi: typeof obj.useLocalApi === "boolean" ? obj.useLocalApi : void 0
+			};
+		} catch (e) {
+			const msg = `Failed to parse dev-mode attribute as JSON: ${e instanceof Error ? e.message : String(e)}`;
+			console.warn(`[Char] ${msg}`);
+			this._emitCharError("INVALID_DEV_MODE", msg);
+			return;
+		}
+	}
+	/**
+	* Resolve apiBase override from property (React 19) or attribute.
+	*
+	* @returns Sanitized API base URL without trailing slash.
+	*/
+	_resolveApiBaseOverride() {
+		const trimmed = ((typeof this.apiBase === "string" ? this.apiBase : this.getAttribute("api-base")) ?? void 0)?.trim();
+		if (!trimmed) return void 0;
+		return trimmed.replace(/\/+$/, "");
+	}
+};
+/**
+* Register the <char-agent> custom element.
+* Called automatically when importing this module.
+*
+* @param tagName - Optional custom tag name override.
+*
+* @public
+*/
+function registerChar(tagName = "char-agent") {
+	if (typeof window === "undefined") return;
+	if (!customElements.get(tagName)) customElements.define(tagName, CharAgentElement);
+}
+registerChar();
+
+//#endregion
+//#region src/shell-component.ts
+const SHELL_OPEN_CHANGE_EVENT = "char-shell-open-change";
+const SHELL_Z_INDEX = 2147483e3;
+const DEFAULT_FULLSCREEN_BREAKPOINT = 1024;
+const DEFAULT_PANEL_WIDTH = 420;
+const DEFAULT_PIP_WIDTH = 300;
+const DEFAULT_PIP_HEIGHT = 96;
+const DEFAULT_PIP_POSITION = "bottom-center";
+const SHELL_HEALTH_TIMEOUT_MS = 1e4;
+const PANEL_BORDER = "1px solid rgba(15, 23, 42, 0.12)";
+const SAFE_BOTTOM = "calc(16px + env(safe-area-inset-bottom, 0px))";
+const SHELL_LAYOUT_TRANSITION = "opacity 280ms ease, width 220ms ease, min-width 220ms ease, flex-basis 220ms ease";
+const SHELL_REVEAL_FADE_MS = 280;
+const PIP_MIN_COLLAPSED_WIDTH = 70;
+const PIP_MIN_COLLAPSED_HEIGHT = 30;
+const PIP_MAX_MEASURED_HEIGHT = 320;
+const PIP_COLLAPSE_DELAY_MS = 400;
+const PIP_PILL_HEIGHT = 40;
+const PIP_MORPH_TRANSITION = "width 280ms ease, height 280ms ease, bottom 280ms ease, border-radius 280ms ease, opacity 200ms ease, transform 280ms ease";
+const PIP_MORPH_DURATION_MS = 280;
+const PIP_SCROLL_HIDE_OFFSET = 100;
+const PIP_COLLAPSED_WIDTH_RATIO = .75;
+const PIP_SWIPE_THRESHOLD = 50;
+const PIP_SCROLL_DIRECTION_THRESHOLD = 40;
+const WHEEL_DELTA_LINE_MULTIPLIER = 15;
+const WHEEL_DELTA_PAGE_MULTIPLIER = 300;
+function normalizePositiveInteger(value, fallback) {
+	if (!Number.isFinite(value) || value <= 0) {
+		console.warn(`[Char] Invalid value ${value}, using fallback ${fallback}`);
+		return fallback;
+	}
+	return Math.round(value);
+}
+function parsePositiveIntegerAttribute(value, fallback) {
+	if (value === null || value.trim() === "") return fallback;
+	const parsed = Number.parseInt(value, 10);
+	if (!Number.isFinite(parsed)) return fallback;
+	return normalizePositiveInteger(parsed, fallback);
+}
+function normalizePipPosition(value) {
+	if (value === "bottom-right" || value === "bottom-left") return value;
+	return DEFAULT_PIP_POSITION;
+}
+function getPipPositionStyles(position) {
+	if (position === "bottom-right") return {
+		left: "auto",
+		right: "16px",
+		transform: "none"
+	};
+	if (position === "bottom-left") return {
+		left: "16px",
+		right: "auto",
+		transform: "none"
+	};
+	return {
+		left: "50%",
+		right: "auto",
+		transform: "translateX(-50%)"
+	};
+}
+function setStyleValue(el, name, value) {
+	el.style.setProperty(name, value);
+}
+function resetStyleValue(el, name) {
+	el.style.removeProperty(name);
+}
+function applyOpenAttribute(el, open) {
+	if (open) {
+		el.setAttribute("open", "");
+		return;
+	}
+	el.removeAttribute("open");
+}
+/**
+* Strips shell-owned mode fields from host context patches.
+* `char-agent-shell` owns `displayMode` and `availableDisplayModes`.
+*/
+function sanitizeShellHostContext(hostContext) {
+	const { displayMode: _displayMode, availableDisplayModes: _availableModes, ...rest } = hostContext;
+	return rest;
+}
+/**
+* `<char-agent-shell>` custom element.
+*
+* Opinionated host shell that composes a persistent inner `<char-agent>` and
+* owns responsive mode policy plus host layout orchestration.
+* This shell does not render chat controls, prompts, or composer UI.
+* Visible assistant UI is always iframe-owned.
+*
+* Policy:
+* - closed to `pip`
+* - open desktop to `inline`
+* - open narrow viewport to `fullscreen`
+*
+* @public
+*/
+var CharAgentShellElement = class extends HTMLElement {
+	static observedAttributes = [
+		"open",
+		"fullscreen-breakpoint",
+		"panel-width",
+		"pip-position",
+		"pip-width",
+		"pip-height",
+		"dev-mode",
+		"enable-debug-tools",
+		"api-base"
+	];
+	_agent = null;
+	_open = false;
+	_fullscreenBreakpoint = DEFAULT_FULLSCREEN_BREAKPOINT;
+	_panelWidth = DEFAULT_PANEL_WIDTH;
+	_pipWidth = DEFAULT_PIP_WIDTH;
+	_pipHeight = DEFAULT_PIP_HEIGHT;
+	_pipPosition = DEFAULT_PIP_POSITION;
+	_isNarrowViewport = false;
+	_mediaQuery = null;
+	_mediaQueryHandler = null;
+	_pendingConnectOptions = null;
+	_pendingHostContext = {};
+	_isApplyingOpenAttribute = false;
+	_forwardedListenersAttached = false;
+	_healthState = "idle";
+	_healthTimeoutId = null;
+	_pipMeasuredHeight = null;
+	_revealFrameId = null;
+	_pipExpanded = false;
+	_pipPillElement = null;
+	_pipCollapseTimerId = null;
+	_hoverMediaQuery = null;
+	_pipListenersAttached = false;
+	_pipAnimating = false;
+	_pipAnimationTimeoutId = null;
+	_pendingPipMeasuredHeight = null;
+	_tapOutsideListener = null;
+	_pipHiddenByScroll = false;
+	_scrollListener = null;
+	_scrollRafId = null;
+	_lastScrollEl = null;
+	_lastScrollTop = null;
+	_scrollDelta = 0;
+	_swipeTouchStartY = null;
+	_swipeStartAtTop = false;
+	_swipeStartAtBottom = false;
+	_swipeTouchStartListener = null;
+	_swipeTouchEndListener = null;
+	_wheelListener = null;
+	_wheelDelta = 0;
+	get open() {
+		return this._open;
+	}
+	set open(value) {
+		this.setOpen(value);
+	}
+	get fullscreenBreakpoint() {
+		return this._fullscreenBreakpoint;
+	}
+	set fullscreenBreakpoint(value) {
+		const normalized = normalizePositiveInteger(value, DEFAULT_FULLSCREEN_BREAKPOINT);
+		if (normalized === this._fullscreenBreakpoint) return;
+		this._fullscreenBreakpoint = normalized;
+		this.setAttribute("fullscreen-breakpoint", String(normalized));
+		this._setupViewportObserver();
+		this._applyDisplayModeAndLayout();
+	}
+	get panelWidth() {
+		return this._panelWidth;
+	}
+	set panelWidth(value) {
+		const normalized = normalizePositiveInteger(value, DEFAULT_PANEL_WIDTH);
+		if (normalized === this._panelWidth) return;
+		this._panelWidth = normalized;
+		this.setAttribute("panel-width", String(normalized));
+		this._applyDisplayModeAndLayout();
+	}
+	get pipWidth() {
+		return this._pipWidth;
+	}
+	set pipWidth(value) {
+		const normalized = normalizePositiveInteger(value, DEFAULT_PIP_WIDTH);
+		if (normalized === this._pipWidth) return;
+		this._pipWidth = normalized;
+		this.setAttribute("pip-width", String(normalized));
+		this._applyDisplayModeAndLayout();
+	}
+	get pipHeight() {
+		return this._pipHeight;
+	}
+	set pipHeight(value) {
+		const normalized = normalizePositiveInteger(value, DEFAULT_PIP_HEIGHT);
+		if (normalized === this._pipHeight) return;
+		this._pipHeight = normalized;
+		this.setAttribute("pip-height", String(normalized));
+		this._applyDisplayModeAndLayout();
+	}
+	get pipPosition() {
+		return this._pipPosition;
+	}
+	set pipPosition(value) {
+		const normalized = normalizePipPosition(value);
+		if (normalized === this._pipPosition) return;
+		this._pipPosition = normalized;
+		this.setAttribute("pip-position", normalized);
+		this._applyDisplayModeAndLayout();
+	}
+	connectedCallback() {
+		this._upgradeProperty("open");
+		this._upgradeProperty("fullscreenBreakpoint");
+		this._upgradeProperty("panelWidth");
+		this._upgradeProperty("pipPosition");
+		this._upgradeProperty("pipWidth");
+		this._upgradeProperty("pipHeight");
+		this._upgradeProperty("devMode");
+		this._upgradeProperty("apiBase");
+		registerChar();
+		this._ensureAgent();
+		this._readConfigFromAttributes();
+		this._syncForwardedAttributes();
+		this._setupViewportObserver();
+		this._applyDisplayModeAndLayout();
+		this._flushPendingConnectAndContext();
+	}
+	disconnectedCallback() {
+		this._stopHealthWait();
+		this._cancelRevealFade();
+		this._teardownViewportObserver();
+		this._detachForwardedListeners();
+		this._detachPipInteractionListeners();
+		this._clearPipCollapseTimer();
+		if (this._pipAnimationTimeoutId !== null) {
+			window.clearTimeout(this._pipAnimationTimeoutId);
+			this._pipAnimationTimeoutId = null;
+		}
+		this._pipAnimating = false;
+		if (this._pipPillElement) {
+			this._pipPillElement.remove();
+			this._pipPillElement = null;
+		}
+		this._hoverMediaQuery = null;
+	}
+	attributeChangedCallback(name, _oldValue, newValue) {
+		switch (name) {
+			case "open": {
+				if (this._isApplyingOpenAttribute) return;
+				const nextOpen = parseBooleanAttribute(newValue);
+				this._setOpenInternal(nextOpen, {
+					emit: true,
+					reflect: false
+				});
+				return;
+			}
+			case "fullscreen-breakpoint": {
+				const next = parsePositiveIntegerAttribute(newValue, DEFAULT_FULLSCREEN_BREAKPOINT);
+				if (next !== this._fullscreenBreakpoint) {
+					this._fullscreenBreakpoint = next;
+					this._setupViewportObserver();
+					this._applyDisplayModeAndLayout();
+				}
+				return;
+			}
+			case "panel-width": {
+				const next = parsePositiveIntegerAttribute(newValue, DEFAULT_PANEL_WIDTH);
+				if (next !== this._panelWidth) {
+					this._panelWidth = next;
+					this._applyDisplayModeAndLayout();
+				}
+				return;
+			}
+			case "pip-width": {
+				const next = parsePositiveIntegerAttribute(newValue, DEFAULT_PIP_WIDTH);
+				if (next !== this._pipWidth) {
+					this._pipWidth = next;
+					this._applyDisplayModeAndLayout();
+				}
+				return;
+			}
+			case "pip-height": {
+				const next = parsePositiveIntegerAttribute(newValue, DEFAULT_PIP_HEIGHT);
+				if (next !== this._pipHeight) {
+					this._pipHeight = next;
+					this._applyDisplayModeAndLayout();
+				}
+				return;
+			}
+			case "pip-position": {
+				const next = normalizePipPosition(newValue);
+				if (next !== this._pipPosition) {
+					this._pipPosition = next;
+					this._applyDisplayModeAndLayout();
+				}
+				return;
+			}
+			case "dev-mode":
+			case "enable-debug-tools":
+			case "api-base":
+				this._syncForwardedAttributes();
+				return;
+		}
+	}
+	/**
+	* Connects shell authentication and starts availability health checks.
+	*
+	* @param options - Authentication payload for either ID token or ticket auth.
+	* @returns `true` when connect is accepted by the inner element.
+	*/
+	connect(options) {
+		if (this._healthState === "unavailable") this._recoverFromUnavailable();
+		if (!this._agent) {
+			this._pendingConnectOptions = options;
+			this._startHealthWait();
+			return true;
+		}
+		const ok = this._agent.connect(options);
+		if (ok) {
+			this._pendingConnectOptions = options;
+			this._startHealthWait();
+		}
+		return ok;
+	}
+	/**
+	* Clears authentication and disconnects the inner `<char-agent>`.
+	*
+	* @returns `true` when disconnect dispatch succeeds.
+	*/
+	disconnect() {
+		this._pendingConnectOptions = null;
+		this._stopHealthWait();
+		if (this._healthState !== "unavailable") this._healthState = "idle";
+		return this._agent ? this._agent.disconnect() : true;
+	}
+	/**
+	* Convenience method for declarative wrappers.
+	* Applies auth when provided, otherwise clears auth.
+	*
+	* @param options - Auth payload to connect, or `null` to disconnect.
+	* @returns Result from `connect()` or `disconnect()`.
+	*/
+	setAuth(options) {
+		if (!options) return this.disconnect();
+		return this.connect(options);
+	}
+	/**
+	* Merges and forwards host context to the inner `<char-agent>`.
+	* Shell-owned fields (`displayMode`, `availableDisplayModes`) are ignored.
+	*
+	* @param hostContext - Partial host context patch to forward.
+	*/
+	setHostContext(hostContext) {
+		const sanitizedContext = sanitizeShellHostContext(hostContext);
+		if (Object.keys(sanitizedContext).length === 0) return;
+		if (!this._agent) {
+			this._pendingHostContext = mergeHostContext(this._pendingHostContext, sanitizedContext);
+			return;
+		}
+		this._agent.setHostContext(sanitizedContext);
+	}
+	/**
+	* Sets shell open state.
+	*
+	* @param open - Next desired open state.
+	*/
+	setOpen(open) {
+		if (this._healthState === "unavailable" && open) {
+			this.dispatchEvent(new CustomEvent("char-error", {
+				bubbles: true,
+				composed: true,
+				detail: {
+					code: "SHELL_UNAVAILABLE",
+					message: "Cannot open shell: agent is unavailable"
+				}
+			}));
+			return;
+		}
+		this._setOpenInternal(Boolean(open), {
+			emit: true,
+			reflect: true
+		});
+	}
+	/**
+	* Toggles shell open state.
+	*/
+	toggleOpen() {
+		this._setOpenInternal(!this._open, {
+			emit: true,
+			reflect: true
+		});
+	}
+	_upgradeProperty(propertyName) {
+		if (!Object.hasOwn(this, propertyName)) return;
+		const value = this[propertyName];
+		delete this[propertyName];
+		this[propertyName] = value;
+	}
+	_ensureAgent() {
+		if (this._agent) {
+			if (!this.contains(this._agent)) this.appendChild(this._agent);
+			this._attachForwardedListeners();
+			return;
+		}
+		const agent = document.createElement("char-agent");
+		agent.style.display = "block";
+		agent.style.width = "100%";
+		agent.style.height = "100%";
+		agent.style.border = "none";
+		this._primeAgentBootConfig(agent);
+		this._agent = agent;
+		this.appendChild(agent);
+		this._attachForwardedListeners();
+	}
+	_primeAgentBootConfig(agent) {
+		for (const name of [
+			"dev-mode",
+			"enable-debug-tools",
+			"api-base"
+		]) {
+			const value = this.getAttribute(name);
+			if (value !== null) agent.setAttribute(name, value);
+		}
+		agent.devMode = this.devMode && typeof this.devMode === "object" ? this.devMode : void 0;
+		agent.apiBase = typeof this.apiBase === "string" ? this.apiBase : void 0;
+	}
+	_attachForwardedListeners() {
+		if (!this._agent || this._forwardedListenersAttached) return;
+		this._agent.addEventListener("char-request-display-mode", this._handleRequestDisplayMode);
+		this._agent.addEventListener("char-close", this._handleClose);
+		this._agent.addEventListener("char-initialized", this._handleInitialized);
+		this._agent.addEventListener("char-error", this._handleInnerError);
+		this._agent.addEventListener("char-size-changed", this._handleInnerSizeChanged);
+		this._forwardedListenersAttached = true;
+	}
+	_detachForwardedListeners() {
+		if (!this._agent || !this._forwardedListenersAttached) return;
+		this._agent.removeEventListener("char-request-display-mode", this._handleRequestDisplayMode);
+		this._agent.removeEventListener("char-close", this._handleClose);
+		this._agent.removeEventListener("char-initialized", this._handleInitialized);
+		this._agent.removeEventListener("char-error", this._handleInnerError);
+		this._agent.removeEventListener("char-size-changed", this._handleInnerSizeChanged);
+		this._forwardedListenersAttached = false;
+	}
+	_readConfigFromAttributes() {
+		this._open = parseBooleanAttribute(this.getAttribute("open"));
+		this._fullscreenBreakpoint = parsePositiveIntegerAttribute(this.getAttribute("fullscreen-breakpoint"), DEFAULT_FULLSCREEN_BREAKPOINT);
+		this._panelWidth = parsePositiveIntegerAttribute(this.getAttribute("panel-width"), DEFAULT_PANEL_WIDTH);
+		this._pipWidth = parsePositiveIntegerAttribute(this.getAttribute("pip-width"), DEFAULT_PIP_WIDTH);
+		this._pipHeight = parsePositiveIntegerAttribute(this.getAttribute("pip-height"), DEFAULT_PIP_HEIGHT);
+		this._pipPosition = normalizePipPosition(this.getAttribute("pip-position"));
+	}
+	_syncForwardedAttributes() {
+		if (!this._agent) return;
+		for (const name of [
+			"dev-mode",
+			"enable-debug-tools",
+			"api-base"
+		]) {
+			const value = this.getAttribute(name);
+			if (value === null) this._agent.removeAttribute(name);
+			else this._agent.setAttribute(name, value);
+		}
+		this._agent.devMode = this.devMode && typeof this.devMode === "object" ? this.devMode : void 0;
+		this._agent.apiBase = typeof this.apiBase === "string" ? this.apiBase : void 0;
+	}
+	_setupViewportObserver() {
+		if (typeof window === "undefined") return;
+		const query = `(max-width: ${this._fullscreenBreakpoint - 1}px)`;
+		if (this._mediaQuery?.media === query) {
+			this._isNarrowViewport = this._mediaQuery.matches;
+			return;
+		}
+		this._teardownViewportObserver();
+		this._mediaQuery = window.matchMedia(query);
+		this._isNarrowViewport = this._mediaQuery.matches;
+		this._mediaQueryHandler = (event) => {
+			this._isNarrowViewport = event.matches;
+			this._applyDisplayModeAndLayout();
+		};
+		this._mediaQuery.addEventListener("change", this._mediaQueryHandler);
+	}
+	_teardownViewportObserver() {
+		if (this._mediaQuery && this._mediaQueryHandler) this._mediaQuery.removeEventListener("change", this._mediaQueryHandler);
+		this._mediaQuery = null;
+		this._mediaQueryHandler = null;
+	}
+	_applyDisplayModeAndLayout() {
+		if (!this._agent) return;
+		if (this._healthState === "unavailable") {
+			this._applyUnavailableLayout();
+			return;
+		}
+		if (this._healthState !== "healthy") {
+			this._applyPreReadyLayout();
+			return;
+		}
+		this.hidden = false;
+		const displayMode = resolvePolicyDisplayMode({
+			open: this._open,
+			isNarrowViewport: this._isNarrowViewport,
+			availableModes: DEFAULT_AVAILABLE_DISPLAY_MODES
+		});
+		if (displayMode !== "pip") {
+			if (this._pipMeasuredHeight !== null) this._pipMeasuredHeight = null;
+		}
+		this._agent.setAttribute("display-mode", displayMode);
+		this._applyHostLayout(displayMode);
+		this._applyAgentLayout(displayMode);
+	}
+	_applyHostLayout(displayMode) {
+		if (displayMode === "inline" && !this._isNarrowViewport) {
+			setStyleValue(this, "position", "relative");
+			setStyleValue(this, "flex", `0 0 ${this._panelWidth}px`);
+			setStyleValue(this, "width", `${this._panelWidth}px`);
+			setStyleValue(this, "min-width", `${this._panelWidth}px`);
+			setStyleValue(this, "height", "100%");
+			setStyleValue(this, "z-index", String(SHELL_Z_INDEX));
+			setStyleValue(this, "border-left", PANEL_BORDER);
+			setStyleValue(this, "transition", SHELL_LAYOUT_TRANSITION);
+			return;
+		}
+		setStyleValue(this, "position", "relative");
+		setStyleValue(this, "flex", "0 0 0px");
+		setStyleValue(this, "width", "0px");
+		setStyleValue(this, "min-width", "0px");
+		setStyleValue(this, "height", "0px");
+		setStyleValue(this, "z-index", String(SHELL_Z_INDEX));
+		resetStyleValue(this, "border-left");
+		setStyleValue(this, "transition", SHELL_LAYOUT_TRANSITION);
+	}
+	_composePipTransform(opts) {
+		const parts = [];
+		if (this._pipPosition === "bottom-center") parts.push("translateX(-50%)");
+		if (opts.scrollHide) parts.push(`translateY(${PIP_SCROLL_HIDE_OFFSET}px)`);
+		return parts.length > 0 ? parts.join(" ") : "none";
+	}
+	_applyAgentLayout(displayMode) {
+		if (!this._agent) return;
+		if (displayMode === "inline" && !this._isNarrowViewport) {
+			this._detachPipInteractionListeners();
+			this._clearPipCollapseTimer();
+			this._pipExpanded = false;
+			this._pipAnimating = false;
+			this._hidePipPill();
+			setStyleValue(this._agent, "position", "relative");
+			resetStyleValue(this._agent, "top");
+			resetStyleValue(this._agent, "right");
+			resetStyleValue(this._agent, "bottom");
+			resetStyleValue(this._agent, "left");
+			resetStyleValue(this._agent, "transform");
+			resetStyleValue(this._agent, "max-width");
+			resetStyleValue(this._agent, "max-height");
+			setStyleValue(this._agent, "z-index", "auto");
+			setStyleValue(this._agent, "width", "100%");
+			setStyleValue(this._agent, "height", "100%");
+			setStyleValue(this._agent, "border-radius", "0");
+			setStyleValue(this._agent, "overflow", "hidden");
+			resetStyleValue(this._agent, "transition");
+			resetStyleValue(this._agent, "opacity");
+			resetStyleValue(this._agent, "pointer-events");
+			return;
+		}
+		if (displayMode === "fullscreen") {
+			this._detachPipInteractionListeners();
+			this._clearPipCollapseTimer();
+			this._pipExpanded = false;
+			this._pipAnimating = false;
+			this._hidePipPill();
+			setStyleValue(this._agent, "position", "fixed");
+			setStyleValue(this._agent, "top", "0");
+			setStyleValue(this._agent, "right", "0");
+			setStyleValue(this._agent, "bottom", "0");
+			setStyleValue(this._agent, "left", "0");
+			resetStyleValue(this._agent, "transform");
+			resetStyleValue(this._agent, "max-width");
+			resetStyleValue(this._agent, "max-height");
+			setStyleValue(this._agent, "z-index", String(SHELL_Z_INDEX));
+			setStyleValue(this._agent, "width", "100vw");
+			setStyleValue(this._agent, "height", "100dvh");
+			setStyleValue(this._agent, "border-radius", "0");
+			setStyleValue(this._agent, "overflow", "hidden");
+			resetStyleValue(this._agent, "transition");
+			resetStyleValue(this._agent, "opacity");
+			resetStyleValue(this._agent, "pointer-events");
+			return;
+		}
+		const pipPositionStyles = getPipPositionStyles(this._pipPosition);
+		const expandedWidth = Math.max(PIP_MIN_COLLAPSED_WIDTH, this._pipWidth);
+		const collapsedWidth = Math.max(PIP_MIN_COLLAPSED_WIDTH, Math.round(this._pipWidth * PIP_COLLAPSED_WIDTH_RATIO));
+		const targetWidth = this._pipExpanded ? expandedWidth : collapsedWidth;
+		const collapsedHeight = Math.max(PIP_MIN_COLLAPSED_HEIGHT, this._pipHeight);
+		const hasExplicitPipHeight = this.hasAttribute("pip-height");
+		const measuredHeightFloor = typeof this._pipMeasuredHeight === "number" ? this._pipMeasuredHeight : 0;
+		const expandedHeight = Math.max(collapsedHeight, measuredHeightFloor);
+		const collapsedPipHeight = hasExplicitPipHeight ? collapsedHeight : PIP_PILL_HEIGHT;
+		const heightDelta = expandedHeight - collapsedPipHeight;
+		let targetHeight;
+		let targetBottom;
+		if (this._pipExpanded) {
+			targetHeight = expandedHeight;
+			targetBottom = SAFE_BOTTOM;
+		} else {
+			targetHeight = collapsedPipHeight;
+			targetBottom = heightDelta > 0 ? `calc(${heightDelta}px + 16px + env(safe-area-inset-bottom, 0px))` : SAFE_BOTTOM;
+		}
+		const composedTransform = this._composePipTransform({ scrollHide: this._pipHiddenByScroll });
+		setStyleValue(this._agent, "position", "fixed");
+		resetStyleValue(this._agent, "top");
+		setStyleValue(this._agent, "right", pipPositionStyles.right);
+		setStyleValue(this._agent, "left", pipPositionStyles.left);
+		setStyleValue(this._agent, "bottom", targetBottom);
+		setStyleValue(this._agent, "transform", composedTransform);
+		setStyleValue(this._agent, "z-index", String(SHELL_Z_INDEX));
+		setStyleValue(this._agent, "width", `min(${targetWidth}px, calc(100vw - 24px))`);
+		setStyleValue(this._agent, "height", `${targetHeight}px`);
+		setStyleValue(this._agent, "max-height", "calc(100dvh - 24px - env(safe-area-inset-bottom, 0px))");
+		setStyleValue(this._agent, "max-width", "100vw");
+		setStyleValue(this._agent, "border-radius", "16px");
+		setStyleValue(this._agent, "overflow", "hidden");
+		setStyleValue(this._agent, "transition", this._healthState === "healthy" ? PIP_MORPH_TRANSITION : "none");
+		if (this._healthState === "healthy") {
+			const pill = this._ensurePipPill();
+			if (!pill.parentNode) this.appendChild(pill);
+			this._updatePipPillPosition(collapsedWidth, heightDelta, collapsedPipHeight);
+			this._attachPipInteractionListeners();
+			this._attachScrollHideListener();
+			this._attachSwipeGestureListeners();
+			this._attachWheelFallbackListener();
+			this._applyPipVisualState();
+		}
+	}
+	_ensurePipPill() {
+		if (this._pipPillElement) return this._pipPillElement;
+		const pill = document.createElement("div");
+		pill.setAttribute("role", "button");
+		pill.setAttribute("aria-label", "Open assistant");
+		pill.setAttribute("tabindex", "0");
+		const pipPositionStyles = getPipPositionStyles(this._pipPosition);
+		pill.style.cssText = [
+			"position:fixed",
+			`left:${pipPositionStyles.left}`,
+			`right:${pipPositionStyles.right}`,
+			`z-index:${SHELL_Z_INDEX + 1}`,
+			"background:transparent",
+			"border-radius:16px",
+			"cursor:pointer",
+			"user-select:none",
+			"-webkit-user-select:none"
+		].join(";");
+		this._pipPillElement = pill;
+		return pill;
+	}
+	_updatePipPillPosition(pipWidth, heightDelta, pillHeight) {
+		if (!this._pipPillElement) return;
+		const collapsedBottom = heightDelta > 0 ? `calc(${heightDelta}px + 16px + env(safe-area-inset-bottom, 0px))` : SAFE_BOTTOM;
+		setStyleValue(this._pipPillElement, "bottom", collapsedBottom);
+		setStyleValue(this._pipPillElement, "width", `min(${pipWidth}px, calc(100vw - 24px))`);
+		setStyleValue(this._pipPillElement, "height", `${pillHeight}px`);
+		setStyleValue(this._pipPillElement, "transform", this._composePipTransform({ scrollHide: this._pipHiddenByScroll }));
+		setStyleValue(this._pipPillElement, "transition", "transform 280ms ease, width 280ms ease, opacity 200ms ease");
+	}
+	_applyPipVisualState() {
+		if (!this._agent || !this._pipPillElement) return;
+		if (this._pipHiddenByScroll) {
+			setStyleValue(this._agent, "opacity", "0");
+			setStyleValue(this._agent, "pointer-events", "none");
+			setStyleValue(this._pipPillElement, "opacity", "0");
+			setStyleValue(this._pipPillElement, "pointer-events", "none");
+			return;
+		}
+		setStyleValue(this._agent, "opacity", "1");
+		if (this._pipExpanded) {
+			setStyleValue(this._agent, "pointer-events", "auto");
+			setStyleValue(this._pipPillElement, "pointer-events", "none");
+		} else {
+			setStyleValue(this._agent, "pointer-events", "none");
+			setStyleValue(this._pipPillElement, "pointer-events", "auto");
+		}
+	}
+	_setPipExpanded(expanded) {
+		this._pipExpanded = expanded;
+		this._clearPipCollapseTimer();
+		this._applyPipVisualState();
+		if (this._agent?.getAttribute("display-mode") === "pip") this._applyAgentLayout("pip");
+		this._pipAnimating = true;
+		this._pendingPipMeasuredHeight = null;
+		if (this._pipAnimationTimeoutId !== null) window.clearTimeout(this._pipAnimationTimeoutId);
+		this._pipAnimationTimeoutId = window.setTimeout(() => {
+			this._pipAnimating = false;
+			this._pipAnimationTimeoutId = null;
+			this._flushPendingPipMeasuredHeight();
+		}, PIP_MORPH_DURATION_MS);
+		if (expanded) this._attachTapOutsideListener();
+		else this._detachTapOutsideListener();
+	}
+	_flushPendingPipMeasuredHeight() {
+		const pending = this._pendingPipMeasuredHeight;
+		this._pendingPipMeasuredHeight = null;
+		if (pending === null || pending === this._pipMeasuredHeight) return;
+		this._pipMeasuredHeight = pending;
+		if (this._agent?.getAttribute("display-mode") === "pip") this._applyAgentLayout("pip");
+	}
+	_isHoverDevice() {
+		if (!this._hoverMediaQuery) {
+			if (typeof window === "undefined") return false;
+			this._hoverMediaQuery = window.matchMedia("(hover: hover)");
+		}
+		return this._hoverMediaQuery.matches;
+	}
+	_attachPipInteractionListeners() {
+		if (this._pipListenersAttached || !this._agent || !this._pipPillElement) return;
+		this._pipListenersAttached = true;
+		const pill = this._pipPillElement;
+		const agent = this._agent;
+		if (this._isHoverDevice()) {
+			pill.addEventListener("pointerenter", this._handlePipPointerEnter);
+			agent.addEventListener("pointerenter", this._handlePipPointerEnter);
+			pill.addEventListener("pointerleave", this._handlePipPointerLeave);
+			agent.addEventListener("pointerleave", this._handlePipPointerLeave);
+		}
+		pill.addEventListener("click", this._handlePillClick);
+		pill.addEventListener("keydown", this._handlePillKeydown);
+	}
+	_detachPipInteractionListeners() {
+		if (!this._pipListenersAttached) return;
+		this._pipListenersAttached = false;
+		const pill = this._pipPillElement;
+		const agent = this._agent;
+		if (pill) {
+			pill.removeEventListener("pointerenter", this._handlePipPointerEnter);
+			pill.removeEventListener("pointerleave", this._handlePipPointerLeave);
+			pill.removeEventListener("click", this._handlePillClick);
+			pill.removeEventListener("keydown", this._handlePillKeydown);
+		}
+		if (agent) {
+			agent.removeEventListener("pointerenter", this._handlePipPointerEnter);
+			agent.removeEventListener("pointerleave", this._handlePipPointerLeave);
+		}
+		this._detachTapOutsideListener();
+		this._detachScrollHideListener();
+		this._detachSwipeGestureListeners();
+		this._detachWheelFallbackListener();
+	}
+	_schedulePipCollapse() {
+		this._clearPipCollapseTimer();
+		this._pipCollapseTimerId = window.setTimeout(() => {
+			this._pipCollapseTimerId = null;
+			this._setPipExpanded(false);
+		}, PIP_COLLAPSE_DELAY_MS);
+	}
+	_clearPipCollapseTimer() {
+		if (this._pipCollapseTimerId !== null) {
+			window.clearTimeout(this._pipCollapseTimerId);
+			this._pipCollapseTimerId = null;
+		}
+	}
+	_attachTapOutsideListener() {
+		if (this._tapOutsideListener || this._isHoverDevice()) return;
+		this._tapOutsideListener = (e) => {
+			const target = e.target;
+			if (!target) return;
+			if (this._pipPillElement?.contains(target)) return;
+			if (this._agent?.contains(target)) return;
+			this._setPipExpanded(false);
+		};
+		document.addEventListener("click", this._tapOutsideListener, true);
+	}
+	_detachTapOutsideListener() {
+		if (this._tapOutsideListener) {
+			document.removeEventListener("click", this._tapOutsideListener, true);
+			this._tapOutsideListener = null;
+		}
+	}
+	_handlePipPointerEnter = () => {
+		this._clearPipCollapseTimer();
+		if (!this._pipExpanded) this._setPipExpanded(true);
+	};
+	_handlePipPointerLeave = () => {
+		if (this._pipExpanded) this._schedulePipCollapse();
+	};
+	_attachScrollHideListener() {
+		if (this._scrollListener || typeof window === "undefined") return;
+		this._scrollListener = (e) => {
+			const target = e.target;
+			let scrollEl = null;
+			if (target === document || target === document.documentElement) scrollEl = document.scrollingElement || document.documentElement;
+			else if (target instanceof Element) scrollEl = target;
+			if (!scrollEl) return;
+			if (scrollEl.clientHeight < window.innerHeight * .3) return;
+			if (this._scrollRafId !== null) return;
+			this._scrollRafId = requestAnimationFrame(() => {
+				this._scrollRafId = null;
+				this._evaluateScrollPosition(scrollEl);
+			});
+		};
+		document.addEventListener("scroll", this._scrollListener, {
+			capture: true,
+			passive: true
+		});
+	}
+	_evaluateScrollPosition(el) {
+		const scrollTop = el.scrollTop;
+		const maxScroll = el.scrollHeight - el.clientHeight;
+		if (el !== this._lastScrollEl) {
+			this._lastScrollEl = el;
+			this._lastScrollTop = scrollTop;
+			this._scrollDelta = 0;
+			return;
+		}
+		if (scrollTop <= 0) {
+			this._lastScrollTop = 0;
+			this._scrollDelta = 0;
+			if (this._pipHiddenByScroll) {
+				this._pipHiddenByScroll = false;
+				if (this._agent?.getAttribute("display-mode") === "pip") {
+					this._applyPipVisualState();
+					this._applyAgentLayout("pip");
+				}
+			}
+			return;
+		}
+		if (maxScroll > 0 && scrollTop >= maxScroll - 2) {
+			this._lastScrollTop = scrollTop;
+			this._scrollDelta = 0;
+			if (!this._pipHiddenByScroll) {
+				this._pipHiddenByScroll = true;
+				if (this._agent?.getAttribute("display-mode") === "pip") {
+					this._applyPipVisualState();
+					this._applyAgentLayout("pip");
+				}
+			}
+			return;
+		}
+		if (this._lastScrollTop === null) {
+			this._lastScrollTop = scrollTop;
+			return;
+		}
+		const delta = scrollTop - this._lastScrollTop;
+		this._lastScrollTop = scrollTop;
+		if (delta > 0 && this._scrollDelta < 0 || delta < 0 && this._scrollDelta > 0) this._scrollDelta = 0;
+		this._scrollDelta += delta;
+		if (this._scrollDelta > PIP_SCROLL_DIRECTION_THRESHOLD && !this._pipHiddenByScroll) {
+			this._pipHiddenByScroll = true;
+			this._scrollDelta = 0;
+			if (this._agent?.getAttribute("display-mode") === "pip") {
+				this._applyPipVisualState();
+				this._applyAgentLayout("pip");
+			}
+		} else if (this._scrollDelta < -PIP_SCROLL_DIRECTION_THRESHOLD && this._pipHiddenByScroll) {
+			this._pipHiddenByScroll = false;
+			this._scrollDelta = 0;
+			if (this._agent?.getAttribute("display-mode") === "pip") {
+				this._applyPipVisualState();
+				this._applyAgentLayout("pip");
+			}
+		}
+	}
+	_detachScrollHideListener() {
+		if (this._scrollListener) {
+			document.removeEventListener("scroll", this._scrollListener, true);
+			this._scrollListener = null;
+		}
+		if (this._scrollRafId !== null) {
+			cancelAnimationFrame(this._scrollRafId);
+			this._scrollRafId = null;
+		}
+		this._pipHiddenByScroll = false;
+		this._lastScrollEl = null;
+		this._lastScrollTop = null;
+		this._scrollDelta = 0;
+	}
+	_attachSwipeGestureListeners() {
+		if (this._swipeTouchStartListener || typeof window === "undefined") return;
+		this._swipeTouchStartListener = (e) => {
+			if (e.touches.length !== 1) return;
+			this._swipeTouchStartY = e.touches[0].clientY;
+			const scrollEl = document.scrollingElement || document.documentElement;
+			this._swipeStartAtTop = scrollEl.scrollTop <= 0;
+			this._swipeStartAtBottom = scrollEl.scrollHeight <= scrollEl.clientHeight || scrollEl.scrollTop + scrollEl.clientHeight >= scrollEl.scrollHeight - 1;
+		};
+		this._swipeTouchEndListener = (e) => {
+			if (this._swipeTouchStartY === null) return;
+			if (e.changedTouches.length === 0) return;
+			const deltaY = e.changedTouches[0].clientY - this._swipeTouchStartY;
+			this._swipeTouchStartY = null;
+			if (Math.abs(deltaY) < PIP_SWIPE_THRESHOLD) return;
+			if (deltaY < -PIP_SWIPE_THRESHOLD && this._swipeStartAtTop && this._pipHiddenByScroll) {
+				this._pipHiddenByScroll = false;
+				if (this._agent?.getAttribute("display-mode") === "pip") {
+					this._applyPipVisualState();
+					this._applyAgentLayout("pip");
+				}
+				return;
+			}
+			if (deltaY > PIP_SWIPE_THRESHOLD && this._swipeStartAtBottom && !this._pipHiddenByScroll) {
+				this._pipHiddenByScroll = true;
+				if (this._agent?.getAttribute("display-mode") === "pip") {
+					this._applyPipVisualState();
+					this._applyAgentLayout("pip");
+				}
+			}
+		};
+		document.addEventListener("touchstart", this._swipeTouchStartListener, {
+			capture: true,
+			passive: true
+		});
+		document.addEventListener("touchend", this._swipeTouchEndListener, {
+			capture: true,
+			passive: true
+		});
+	}
+	_detachSwipeGestureListeners() {
+		if (this._swipeTouchStartListener) {
+			document.removeEventListener("touchstart", this._swipeTouchStartListener, true);
+			this._swipeTouchStartListener = null;
+		}
+		if (this._swipeTouchEndListener) {
+			document.removeEventListener("touchend", this._swipeTouchEndListener, true);
+			this._swipeTouchEndListener = null;
+		}
+		this._swipeTouchStartY = null;
+	}
+	_attachWheelFallbackListener() {
+		if (this._wheelListener || typeof window === "undefined") return;
+		this._wheelListener = (e) => {
+			const scrollEl = document.scrollingElement || document.documentElement;
+			if (scrollEl.scrollHeight > scrollEl.clientHeight) return;
+			let deltaY = e.deltaY;
+			if (e.deltaMode === WheelEvent.DOM_DELTA_LINE) deltaY *= WHEEL_DELTA_LINE_MULTIPLIER;
+			else if (e.deltaMode === WheelEvent.DOM_DELTA_PAGE) deltaY *= WHEEL_DELTA_PAGE_MULTIPLIER;
+			if (deltaY > 0 && this._wheelDelta < 0 || deltaY < 0 && this._wheelDelta > 0) this._wheelDelta = 0;
+			this._wheelDelta += deltaY;
+			if (this._wheelDelta > PIP_SCROLL_DIRECTION_THRESHOLD && !this._pipHiddenByScroll) {
+				this._pipHiddenByScroll = true;
+				this._wheelDelta = 0;
+				if (this._agent?.getAttribute("display-mode") === "pip") {
+					this._applyPipVisualState();
+					this._applyAgentLayout("pip");
+				}
+			} else if (this._wheelDelta < -PIP_SCROLL_DIRECTION_THRESHOLD && this._pipHiddenByScroll) {
+				this._pipHiddenByScroll = false;
+				this._wheelDelta = 0;
+				if (this._agent?.getAttribute("display-mode") === "pip") {
+					this._applyPipVisualState();
+					this._applyAgentLayout("pip");
+				}
+			}
+		};
+		document.addEventListener("wheel", this._wheelListener, {
+			capture: true,
+			passive: true
+		});
+	}
+	_detachWheelFallbackListener() {
+		if (this._wheelListener) {
+			document.removeEventListener("wheel", this._wheelListener, true);
+			this._wheelListener = null;
+		}
+		this._wheelDelta = 0;
+	}
+	_handlePillClick = () => {
+		if (this._isHoverDevice()) this.setOpen(true);
+		else if (this._pipExpanded) this.setOpen(true);
+		else this._setPipExpanded(true);
+	};
+	_handlePillKeydown = (event) => {
+		const key = event.key;
+		if (key === "Enter" || key === " ") {
+			event.preventDefault();
+			this.setOpen(true);
+		}
+	};
+	_hidePipPill() {
+		if (this._pipPillElement) {
+			setStyleValue(this._pipPillElement, "opacity", "0");
+			setStyleValue(this._pipPillElement, "pointer-events", "none");
+		}
+	}
+	_resetHostLayoutStyles() {
+		for (const name of [
+			"position",
+			"flex",
+			"width",
+			"min-width",
+			"height",
+			"z-index",
+			"border-left",
+			"transition",
+			"opacity",
+			"will-change"
+		]) resetStyleValue(this, name);
+	}
+	_resetAgentLayoutStyles() {
+		if (!this._agent) return;
+		for (const name of [
+			"position",
+			"top",
+			"right",
+			"bottom",
+			"left",
+			"transform",
+			"z-index",
+			"width",
+			"height",
+			"max-width",
+			"max-height",
+			"border-radius",
+			"overflow",
+			"transition",
+			"opacity",
+			"pointer-events"
+		]) resetStyleValue(this._agent, name);
+	}
+	_applyUnavailableLayout() {
+		this._cancelRevealFade();
+		this._detachPipInteractionListeners();
+		this._detachScrollHideListener();
+		this._detachSwipeGestureListeners();
+		this._detachWheelFallbackListener();
+		this._clearPipCollapseTimer();
+		this._pipExpanded = false;
+		this._pipAnimating = false;
+		this._hidePipPill();
+		if (this._agent) this._agent.removeAttribute("display-mode");
+		this._resetHostLayoutStyles();
+		this._resetAgentLayoutStyles();
+		this.hidden = true;
+	}
+	_applyPreReadyLayout() {
+		this._applyUnavailableLayout();
+	}
+	_startHealthWait() {
+		if (typeof window === "undefined") return;
+		this._stopHealthWait();
+		this._applyPreReadyLayout();
+		this._healthState = "waiting";
+		this._healthTimeoutId = window.setTimeout(() => {
+			if (this._healthState !== "waiting") return;
+			this._setUnavailable("Initialization timed out before the embedded agent became ready.");
+		}, SHELL_HEALTH_TIMEOUT_MS);
+	}
+	_stopHealthWait() {
+		if (this._healthTimeoutId === null || typeof window === "undefined") return;
+		window.clearTimeout(this._healthTimeoutId);
+		this._healthTimeoutId = null;
+	}
+	_markHealthy() {
+		this._stopHealthWait();
+		this._healthState = "healthy";
+		this.hidden = false;
+		this._applyDisplayModeAndLayout();
+		this._startRevealFade();
+	}
+	_cancelRevealFade() {
+		if (this._revealFrameId !== null && typeof window !== "undefined") window.cancelAnimationFrame(this._revealFrameId);
+		this._revealFrameId = null;
+		resetStyleValue(this, "opacity");
+		resetStyleValue(this, "will-change");
+	}
+	_startRevealFade() {
+		if (typeof window === "undefined") return;
+		this._cancelRevealFade();
+		setStyleValue(this, "opacity", "0");
+		setStyleValue(this, "will-change", "opacity");
+		this._revealFrameId = window.requestAnimationFrame(() => {
+			this._revealFrameId = null;
+			setStyleValue(this, "opacity", "1");
+			window.setTimeout(() => {
+				if (this._healthState === "healthy") resetStyleValue(this, "will-change");
+			}, SHELL_REVEAL_FADE_MS);
+		});
+	}
+	_setUnavailable(message) {
+		this._stopHealthWait();
+		this._healthState = "unavailable";
+		this._pendingConnectOptions = null;
+		this._pipMeasuredHeight = null;
+		this._setOpenInternal(false, {
+			emit: true,
+			reflect: true
+		});
+		this._applyUnavailableLayout();
+		this.dispatchEvent(new CustomEvent("char-error", {
+			bubbles: true,
+			composed: true,
+			detail: {
+				code: "SHELL_UNAVAILABLE",
+				message
+			}
+		}));
+	}
+	_recoverFromUnavailable() {
+		if (this._healthState !== "unavailable") return;
+		this._healthState = "idle";
+		this._pipMeasuredHeight = null;
+		this._detachForwardedListeners();
+		if (this._agent) {
+			this._agent.remove();
+			this._agent = null;
+		}
+		this._forwardedListenersAttached = false;
+		this._ensureAgent();
+		this._syncForwardedAttributes();
+		this._applyPreReadyLayout();
+		const agent = this._agent;
+		if (Object.keys(this._pendingHostContext).length > 0) {
+			if (agent) agent.setHostContext(this._pendingHostContext);
+			this._pendingHostContext = {};
+		}
+	}
+	_setOpenInternal(nextOpen, options) {
+		if (this._healthState === "unavailable" && nextOpen) {
+			this._reflectOpenAttribute(false);
+			return;
+		}
+		if (nextOpen === this._open) {
+			if (options.reflect) this._reflectOpenAttribute(nextOpen);
+			return;
+		}
+		this._open = nextOpen;
+		if (options.reflect) this._reflectOpenAttribute(nextOpen);
+		this._applyDisplayModeAndLayout();
+		if (options.emit) this.dispatchEvent(new CustomEvent(SHELL_OPEN_CHANGE_EVENT, {
+			bubbles: true,
+			composed: true,
+			detail: { open: nextOpen }
+		}));
+	}
+	_reflectOpenAttribute(open) {
+		this._isApplyingOpenAttribute = true;
+		applyOpenAttribute(this, open);
+		this._isApplyingOpenAttribute = false;
+	}
+	_flushPendingConnectAndContext() {
+		if (!this._agent) return;
+		if (this._pendingConnectOptions) {
+			if (this._agent.connect(this._pendingConnectOptions)) this._startHealthWait();
+		}
+		if (Object.keys(this._pendingHostContext).length > 0) {
+			this._agent.setHostContext(this._pendingHostContext);
+			this._pendingHostContext = {};
+		}
+	}
+	_handleRequestDisplayMode = (event) => {
+		if (this._healthState === "unavailable") return;
+		const detail = event.detail;
+		if (!isDisplayMode(detail?.mode)) return;
+		if (detail.mode === "pip") {
+			this.setOpen(false);
+			return;
+		}
+		this.setOpen(true);
+	};
+	_handleClose = () => {
+		this.setOpen(false);
+	};
+	_handleInitialized = () => {
+		this._markHealthy();
+	};
+	_handleInnerError = (event) => {
+		if (this._healthState !== "waiting") return;
+		const detail = event.detail;
+		this._setUnavailable(detail?.message ?? "Embedded agent initialization failed before it became available.");
+	};
+	_handleInnerSizeChanged = (event) => {
+		if (!this._agent || this._agent.getAttribute("display-mode") !== "pip") return;
+		const detail = event.detail;
+		if (detail?.displayMode !== "pip") return;
+		const reportedHeight = detail?.height;
+		if (typeof reportedHeight !== "number" || !Number.isFinite(reportedHeight) || reportedHeight <= 0) return;
+		const nextMeasuredHeight = Math.max(PIP_MIN_COLLAPSED_HEIGHT, Math.min(Math.round(reportedHeight), PIP_MAX_MEASURED_HEIGHT));
+		if (this._pipAnimating) {
+			this._pendingPipMeasuredHeight = nextMeasuredHeight;
+			return;
+		}
+		if (this._pipMeasuredHeight === nextMeasuredHeight) return;
+		this._pipMeasuredHeight = nextMeasuredHeight;
+		this._applyAgentLayout("pip");
+	};
+};
+/**
+* Registers the `<char-agent-shell>` custom element.
+*
+* @param tagName - Optional custom tag name override.
+*
+* @public
+*/
+function registerCharShell(tagName = "char-agent-shell") {
+	if (typeof window === "undefined") return;
+	if (!customElements.get(tagName)) customElements.define(tagName, CharAgentShellElement);
+}
+registerCharShell();
+
+//#endregion
+export { CharAgentShellElement, registerCharShell };
+//# sourceMappingURL=shell-component.js.map