@susilkumar006/widgets-test 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1925 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+function createCorrelationId() {
+  if (typeof globalThis.crypto?.randomUUID === "function") return globalThis.crypto.randomUUID();
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
+}
+const SDK_VERSION = "1.0.0";
+function isJsonValue(value) {
+  if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+  if (typeof value === "number") return Number.isFinite(value);
+  if (Array.isArray(value)) return value.every(isJsonValue);
+  if (typeof value === "object") return Object.values(value).every(isJsonValue);
+  return false;
+}
+function isJsonObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+const CORRELATION_HEADER = "X-Request-Id";
+const SDK_VERSION_HEADER = "X-FacePe-SDK-Version";
+const TOKEN_AUDIENCE = "app-b";
+const DEFAULT_TIMEOUT_MS = 15e3;
+const asJson = (data) => ({ success: true, data });
+function fail(code, message2, info, status2) {
+  return {
+    success: false,
+    error: {
+      code,
+      message: message2,
+      details: {
+        method: info.method,
+        path: info.path,
+        correlationId: info.correlationId,
+        ...status2 === void 0 ? {} : { status: status2 }
+      }
+    }
+  };
+}
+function buildUrl(baseUrl, path, query) {
+  if (/^[a-z][a-z\d+.-]*:/i.test(path) || path.startsWith("//")) return null;
+  try {
+    const base = new URL(baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`, globalThis.location?.href);
+    const url = new URL(path.replace(/^\/+/, ""), base);
+    for (const [key, value] of Object.entries(query ?? {})) {
+      if (value !== null && value !== void 0) url.searchParams.set(key, String(value));
+    }
+    return url.href;
+  } catch {
+    return null;
+  }
+}
+class FacePeApiClient {
+  constructor(options2) {
+    this.options = options2;
+    this.lastToken = null;
+  }
+  /**
+   * A full address for an asset the API returned as a path (e.g. an avatar's
+   * picture, "/avatars/aria.jpg"): resolved against the API's address, not
+   * the host page's. Absolute URLs are returned unchanged.
+   */
+  assetUrl(url) {
+    if (!url) return null;
+    if (/^(https?:|data:|blob:)/i.test(url) || url.startsWith("//")) return url;
+    const base = this.options.settings().baseUrl;
+    if (!base) return url;
+    try {
+      return new URL(url, new URL(base.endsWith("/") ? base : `${base}/`, globalThis.location?.href)).href;
+    } catch {
+      return url;
+    }
+  }
+  get(path, options2) {
+    return options2?.decode ? this.send("GET", path, void 0, options2.decode, options2) : this.send("GET", path, void 0, asJson, options2);
+  }
+  post(path, body2, options2) {
+    return options2?.decode ? this.send("POST", path, body2, options2.decode, options2) : this.send("POST", path, body2, asJson, options2);
+  }
+  put(path, body2, options2) {
+    return options2?.decode ? this.send("PUT", path, body2, options2.decode, options2) : this.send("PUT", path, body2, asJson, options2);
+  }
+  patch(path, body2, options2) {
+    return options2?.decode ? this.send("PATCH", path, body2, options2.decode, options2) : this.send("PATCH", path, body2, asJson, options2);
+  }
+  delete(path, options2) {
+    return options2?.decode ? this.send("DELETE", path, void 0, options2.decode, options2) : this.send("DELETE", path, void 0, asJson, options2);
+  }
+  async send(method, path, body2, decode, options2) {
+    const info = { method, path, correlationId: createCorrelationId() };
+    const started = Date.now();
+    const result = await this.perform(body2, decode, options2, info);
+    this.options.onTelemetry?.({
+      name: "api.request",
+      source: "FacePeApiClient",
+      correlationId: info.correlationId,
+      timestamp: new Date(started).toISOString(),
+      sdkVersion: SDK_VERSION,
+      attributes: {
+        method,
+        path,
+        outcome: result.success ? "success" : result.error.code,
+        durationMs: Date.now() - started,
+        ...info.status === void 0 ? {} : { status: info.status }
+      }
+    });
+    return result;
+  }
+  async perform(body2, decode, options2, info) {
+    const { method, path } = info;
+    const settings = this.options.settings();
+    if (!settings.baseUrl) return fail("API_NOT_CONFIGURED", "No apiBaseUrl was given to FacePeProvider.", info);
+    const url = buildUrl(settings.baseUrl, path, options2?.query);
+    if (url === null) return fail("INVALID_URL", "The request URL could not be built.", info);
+    const timeoutMs = options2?.timeoutMs ?? settings.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+    const token = options2?.keepalive && this.lastToken !== null ? { success: true, data: this.lastToken } : await this.token(settings.getToken, false, info);
+    if (!token.success) return token;
+    let attempt = await this.attempt(url, body2, token.data, timeoutMs, options2?.signal, info, options2?.keepalive);
+    if (attempt.kind === "failure") return attempt.failure;
+    if (attempt.status === 401) {
+      if (!settings.getToken) return fail("UNAUTHORIZED", "The request was not authorised.", info, 401);
+      const fresh = await this.token(settings.getToken, true, info);
+      if (!fresh.success) return fresh;
+      attempt = await this.attempt(url, body2, fresh.data, timeoutMs, options2?.signal, info, options2?.keepalive);
+      if (attempt.kind === "failure") return attempt.failure;
+      if (attempt.status === 401) {
+        this.options.onSessionExpired?.({ method, path });
+        return fail("SESSION_EXPIRED", "The session has expired. Sign in again.", info, 401);
+      }
+    }
+    return this.read(attempt.status, attempt.ok, attempt.text, decode, info);
+  }
+  /** The token to send, or `null` when the provider has no token provider. */
+  async token(getToken, forceRefresh, info) {
+    if (!getToken) return { success: true, data: null };
+    try {
+      const token = await getToken({ audience: TOKEN_AUDIENCE, forceRefresh });
+      if (typeof token === "string" && token !== "") {
+        this.lastToken = token;
+        return { success: true, data: token };
+      }
+    } catch {
+    }
+    return fail("TOKEN_UNAVAILABLE", "getToken did not return a token.", info);
+  }
+  /** One HTTP attempt, response body included, under one timeout. */
+  async attempt(url, body2, token, timeoutMs, signal, info, keepalive = false) {
+    if (typeof globalThis.fetch !== "function") {
+      return { kind: "failure", failure: fail("NETWORK_ERROR", "fetch is not available in this environment.", info) };
+    }
+    if (signal?.aborted) return { kind: "failure", failure: fail("ABORTED", "The request was cancelled.", info) };
+    const controller = new AbortController();
+    let timedOut = false;
+    const timer = setTimeout(() => {
+      timedOut = true;
+      controller.abort();
+    }, timeoutMs);
+    const onCallerAbort = () => controller.abort();
+    signal?.addEventListener("abort", onCallerAbort, { once: true });
+    const headers = {
+      Accept: "application/json",
+      [CORRELATION_HEADER]: info.correlationId,
+      [SDK_VERSION_HEADER]: SDK_VERSION
+    };
+    if (token !== null) headers.Authorization = `Bearer ${token}`;
+    if (body2 !== void 0) headers["Content-Type"] = "application/json";
+    try {
+      const response = await globalThis.fetch(url, {
+        method: info.method,
+        headers,
+        body: body2 === void 0 ? void 0 : JSON.stringify(body2),
+        signal: controller.signal,
+        ...keepalive ? { keepalive: true } : {}
+      });
+      const text2 = await response.text();
+      info.status = response.status;
+      return { kind: "response", status: response.status, ok: response.ok, text: text2 };
+    } catch {
+      if (timedOut) return { kind: "failure", failure: fail("TIMEOUT", `No response within ${timeoutMs} ms.`, info) };
+      if (signal?.aborted) return { kind: "failure", failure: fail("ABORTED", "The request was cancelled.", info) };
+      return { kind: "failure", failure: fail("NETWORK_ERROR", "The API could not be reached.", info) };
+    } finally {
+      clearTimeout(timer);
+      signal?.removeEventListener("abort", onCallerAbort);
+    }
+  }
+  /**
+   * Parses the body. The FacePe backend answers `{ success: true, data }` or
+   * `{ success: false, error: { code, message } }`; the envelope is unwrapped
+   * and its error code kept. Any other JSON body is taken as the data itself.
+   */
+  read(status2, ok, text2, decode, info) {
+    let parsed;
+    if (text2.trim() !== "") {
+      try {
+        const raw = JSON.parse(text2);
+        parsed = isJsonValue(raw) ? raw : void 0;
+      } catch {
+        parsed = void 0;
+      }
+      if (parsed === void 0 && ok) return fail("INVALID_RESPONSE", "The API returned a response that is not JSON.", info, status2);
+    }
+    if (!ok) {
+      const error2 = isJsonObject(parsed) ? parsed.error : void 0;
+      if (isJsonObject(error2) && typeof error2.code === "string" && typeof error2.message === "string") {
+        return fail(error2.code, error2.message, info, status2);
+      }
+      return fail("HTTP_ERROR", `The API answered with status ${status2}.`, info, status2);
+    }
+    const data = isJsonObject(parsed) && parsed.success === true && "data" in parsed ? parsed.data : parsed;
+    return decode(data ?? null);
+  }
+}
+const FacePeApiContext = react.createContext(null);
+FacePeApiContext.displayName = "FacePeApiContext";
+function useFacePeApi() {
+  const client = react.useContext(FacePeApiContext);
+  if (client === null) throw new Error("useFacePeApi must be used within a FacePeProvider");
+  return client;
+}
+const STATUSES = ["completed", "current", "pending", "error"];
+const invalid$1 = (what) => ({
+  success: false,
+  error: { code: "INVALID_PAYLOAD", message: `The gateway returned an invalid ${what}.` }
+});
+const str = (o, key) => typeof o[key] === "string" ? o[key] : void 0;
+function listIn(data, key) {
+  if (!isJsonObject(data)) return void 0;
+  const list2 = data[key];
+  return Array.isArray(list2) ? list2 : void 0;
+}
+function timelineItem(value) {
+  if (!isJsonObject(value)) return void 0;
+  const id = str(value, "id");
+  const title2 = str(value, "title");
+  const timestamp = str(value, "timestamp");
+  const status2 = str(value, "status");
+  if (id === void 0 || title2 === void 0 || timestamp === void 0) return void 0;
+  if (status2 === void 0 || !STATUSES.includes(status2)) return void 0;
+  const description2 = str(value, "description");
+  return { id, title: title2, timestamp, status: status2, ...description2 === void 0 ? {} : { description: description2 } };
+}
+const decodeTimeline = (data) => {
+  const list2 = listIn(data, "items");
+  if (list2 === void 0) return invalid$1("timeline");
+  const items = list2.map(timelineItem);
+  if (items.some((item2) => item2 === void 0)) return invalid$1("timeline item");
+  return { success: true, data: items };
+};
+function pickerOption(value) {
+  if (!isJsonObject(value)) return void 0;
+  const optionValue = str(value, "value");
+  const label2 = str(value, "label");
+  if (optionValue === void 0 || label2 === void 0) return void 0;
+  const description2 = str(value, "description");
+  return {
+    value: optionValue,
+    label: label2,
+    ...description2 === void 0 ? {} : { description: description2 },
+    ...value.disabled === true ? { disabled: true } : {}
+  };
+}
+const decodePickerOptions = (data) => {
+  const list2 = listIn(data, "options");
+  if (list2 === void 0) return invalid$1("option list");
+  const options2 = list2.map(pickerOption);
+  if (options2.some((option2) => option2 === void 0)) return invalid$1("option");
+  return { success: true, data: options2 };
+};
+const decodeFormValues = (data) => {
+  if (!isJsonObject(data)) return invalid$1("customer");
+  const name = str(data, "name");
+  const email = str(data, "email");
+  const notes = str(data, "notes");
+  if (name === void 0 || email === void 0 || notes === void 0) return invalid$1("customer");
+  return { success: true, data: { name, email, notes } };
+};
+function avatarInfo(value) {
+  if (value === void 0 || !isJsonObject(value)) return void 0;
+  const id = str(value, "id");
+  const name = str(value, "name");
+  if (id === void 0 || name === void 0) return void 0;
+  const languages = Array.isArray(value.languages) ? value.languages.filter((l) => typeof l === "string") : [];
+  return {
+    id,
+    name,
+    gender: str(value, "gender") ?? "",
+    previewUrl: str(value, "previewUrl") ?? null,
+    description: str(value, "description") ?? null,
+    languages
+  };
+}
+const decodeAvatar = (data) => {
+  const avatar2 = isJsonObject(data) ? avatarInfo(data.avatar) : void 0;
+  return avatar2 ? { success: true, data: avatar2 } : invalid$1("avatar");
+};
+const decodeAvatarList = (data) => {
+  if (!isJsonObject(data) || !Array.isArray(data.avatars)) return invalid$1("avatars");
+  return { success: true, data: data.avatars.map(avatarInfo).filter((a) => a !== void 0) };
+};
+const decodeAvatarConnection = (data) => {
+  if (!isJsonObject(data)) return invalid$1("avatar session");
+  const avatar2 = avatarInfo(data.avatar);
+  const usageId = typeof data.usageId === "string" ? data.usageId : null;
+  const c = data.connection;
+  if (!avatar2 || !isJsonObject(c) || typeof c.token !== "string" || c.token === "") return invalid$1("avatar session");
+  if (c.type === "stream") {
+    const greeting = typeof c.greeting === "string" ? c.greeting : null;
+    return { success: true, data: { type: "stream", usageId, avatar: avatar2, token: c.token, greeting } };
+  }
+  if (c.type === "room" && typeof c.url === "string" && c.url !== "") {
+    return { success: true, data: { type: "room", usageId, avatar: avatar2, url: c.url, token: c.token } };
+  }
+  return invalid$1("avatar session");
+};
+const gatewayPath = {
+  avatars: "/avatars",
+  avatar: (avatarId) => `/avatars/${encodeURIComponent(avatarId)}`,
+  avatarSessions: (avatarId) => `/avatars/${encodeURIComponent(avatarId)}/sessions`,
+  endAvatarSession: (usageId) => `/avatar-sessions/${encodeURIComponent(usageId)}/end`,
+  timeline: (orderId) => `/orders/${encodeURIComponent(orderId)}/timeline`,
+  pickerOptions: (locationId) => `/locations/${encodeURIComponent(locationId)}/categories`,
+  customer: (orderId) => `/orders/${encodeURIComponent(orderId)}/customer`
+};
+const IDLE = { status: "idle" };
+function useFacePeResource(path, decode) {
+  const api = useFacePeApi();
+  const [state, setState] = react.useState({
+    path: null,
+    resource: IDLE
+  });
+  react.useEffect(() => {
+    if (path === null) return;
+    const controller = new AbortController();
+    setState({ path, resource: { status: "loading" } });
+    void api.get(path, { decode, signal: controller.signal }).then((result) => {
+      if (controller.signal.aborted) return;
+      setState({
+        path,
+        resource: result.success ? { status: "ready", data: result.data } : { status: "failed", error: result.error }
+      });
+    });
+    return () => controller.abort();
+  }, [api, path]);
+  if (path === null) return IDLE;
+  return state.path === path ? state.resource : { status: "loading" };
+}
+const noop = () => void 0;
+const FacePeTelemetryContext = react.createContext(noop);
+FacePeTelemetryContext.displayName = "FacePeTelemetryContext";
+function useFacePeTelemetryReporter() {
+  return react.useContext(FacePeTelemetryContext);
+}
+function telemetryOf(event) {
+  const { meta: meta2 } = event;
+  const payload = event.payload;
+  const code = event.type === "error" && typeof payload?.code === "string" ? payload.code : void 0;
+  return {
+    name: event.type,
+    source: meta2.source,
+    correlationId: meta2.correlationId,
+    timestamp: meta2.timestamp,
+    sdkVersion: meta2.sdkVersion,
+    ...meta2.entityId === void 0 ? {} : { entityId: meta2.entityId },
+    ...code === void 0 ? {} : { attributes: { code } }
+  };
+}
+function reportListenerError(error2, source, type) {
+  if (typeof globalThis.reportError === "function") {
+    globalThis.reportError(error2);
+    return;
+  }
+  console.error(`[FacePe] A "${type}" listener of ${source} threw:`, error2);
+}
+class FacePeEventEmitter {
+  /**
+   * @param source - the emitting component's name, stamped on every event's meta.
+   * @param context - read on every emit, e.g. the component's current `entityId`.
+   * @param report - receives the telemetry record of every emitted event.
+   */
+  constructor(source, context = () => ({}), report = () => void 0) {
+    this.source = source;
+    this.context = context;
+    this.report = report;
+    this.listeners = {};
+  }
+  /**
+   * Subscribes a listener to one event type. The same function subscribed
+   * twice is held once. Returns the matching unsubscribe function.
+   */
+  on(type, listener) {
+    const set = this.listeners[type] ?? /* @__PURE__ */ new Set();
+    set.add(listener);
+    this.listeners[type] = set;
+    return () => this.off(type, listener);
+  }
+  /** Unsubscribes one listener; others on the same event are untouched. */
+  off(type, listener) {
+    const set = this.listeners[type];
+    if (set === void 0) return;
+    set.delete(listener);
+    if (set.size === 0) delete this.listeners[type];
+  }
+  /** How many listeners an event type has (for cleanup checks). */
+  listenerCount(type) {
+    return this.listeners[type]?.size ?? 0;
+  }
+  /** Removes every listener. */
+  clear() {
+    this.listeners = {};
+  }
+  /**
+   * Wraps `payload` in the standard envelope and delivers it to every
+   * listener of `type`, in subscription order. A listener that throws is
+   * reported and skipped; the rest still run. The event is also reported to
+   * telemetry (without its payload). Returns the event delivered.
+   *
+   * @param correlationId - pass one to tie several events to one action
+   *   (e.g. a submit attempt's `submit` or `error`); a new one otherwise.
+   */
+  emit(type, payload, correlationId = createCorrelationId()) {
+    const { entityId } = this.context();
+    const event = {
+      type,
+      payload,
+      meta: {
+        schemaVersion: 1,
+        correlationId,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        sdkVersion: SDK_VERSION,
+        source: this.source,
+        ...entityId === void 0 ? {} : { entityId }
+      }
+    };
+    this.dispatch(event);
+    this.report(telemetryOf(event));
+    return event;
+  }
+  /**
+   * Delivers an event that already has its envelope — e.g. a component's
+   * `navigate` relayed to the provider, so both receive the very same event.
+   * Same isolation as `emit`. Not reported to telemetry: `emit` already did.
+   */
+  dispatch(event) {
+    const set = this.listeners[event.type];
+    if (set === void 0) return;
+    for (const listener of [...set]) {
+      try {
+        listener(event);
+      } catch (error2) {
+        reportListenerError(error2, this.source, event.type);
+      }
+    }
+  }
+}
+function useFacePeEmitter(source, context, report) {
+  const fromProvider = useFacePeTelemetryReporter();
+  const [emitter] = react.useState(() => new FacePeEventEmitter(source, context, report ?? fromProvider));
+  return emitter;
+}
+const FacePeAvatarIdContext = react.createContext(void 0);
+FacePeAvatarIdContext.displayName = "FacePeAvatarIdContext";
+function useFacePeAvatarId() {
+  return react.useContext(FacePeAvatarIdContext);
+}
+const FacePeNavigationContext = react.createContext(() => void 0);
+FacePeNavigationContext.displayName = "FacePeNavigationContext";
+function useFacePeNavigationRelay() {
+  return react.useContext(FacePeNavigationContext);
+}
+const NO_CONFIG = Object.freeze({});
+function themeStyle(theme, colorScheme) {
+  const style = { display: "contents" };
+  if (colorScheme !== void 0) style.colorScheme = colorScheme;
+  const tokens2 = [
+    [theme.colorSurface, "--fp-color-surface"],
+    [theme.colorSurfaceMuted, "--fp-color-surface-muted"],
+    [theme.colorText, "--fp-color-text"],
+    [theme.colorMuted, "--fp-color-muted"],
+    [theme.colorBorder, "--fp-color-border"],
+    [theme.colorAccent, "--fp-color-accent"],
+    [theme.colorOnAccent, "--fp-color-on-accent"],
+    [theme.colorDanger, "--fp-color-danger"],
+    [theme.colorSuccess, "--fp-color-success"],
+    [theme.fontFamily, "--fp-font-family"],
+    [theme.fontSize, "--fp-font-size"],
+    [theme.spacing, "--fp-spacing"],
+    [theme.radius, "--fp-radius"],
+    [theme.shadow, "--fp-shadow"]
+  ];
+  for (const [value, variable] of tokens2) {
+    if (value !== void 0) style[variable] = value;
+  }
+  return style;
+}
+const FacePeContext = react.createContext(null);
+FacePeContext.displayName = "FacePeContext";
+function FacePeProvider({ config, children, ...settings }) {
+  const value = react.useMemo(() => ({ config: config ?? NO_CONFIG }), [config]);
+  const settingsRef = react.useRef(settings);
+  settingsRef.current = settings;
+  const reportTelemetry = react.useCallback((record) => {
+    const sink = settingsRef.current.telemetry;
+    if (sink === void 0) return;
+    try {
+      sink.track(record);
+    } catch (error2) {
+      if (typeof globalThis.reportError === "function") globalThis.reportError(error2);
+      else console.error("[FacePe] The telemetry sink threw:", error2);
+    }
+  }, []);
+  const events = useFacePeEmitter("FacePeProvider", void 0, reportTelemetry);
+  react.useEffect(() => {
+    const unsubscribe = [
+      events.on("sessionExpired", (e) => settingsRef.current.onSessionExpired?.(e)),
+      events.on("navigate", (e) => settingsRef.current.onNavigate?.(e))
+    ];
+    return () => unsubscribe.forEach((off) => off());
+  }, [events]);
+  const relayNavigation = react.useCallback((event) => events.dispatch(event), [events]);
+  const [api] = react.useState(
+    () => new FacePeApiClient({
+      settings: () => ({
+        baseUrl: settingsRef.current.apiBaseUrl,
+        getToken: settingsRef.current.getToken,
+        timeoutMs: settingsRef.current.requestTimeoutMs
+      }),
+      onSessionExpired: (payload) => {
+        events.emit("sessionExpired", payload);
+      },
+      onTelemetry: reportTelemetry
+    })
+  );
+  const { theme, darkTheme, colorScheme } = settings;
+  const style = react.useMemo(() => {
+    if (theme === void 0 && darkTheme === void 0 && colorScheme === void 0) return void 0;
+    const active = colorScheme === "dark" ? { ...theme, ...darkTheme } : { ...theme };
+    return themeStyle(active, colorScheme);
+  }, [theme, darkTheme, colorScheme]);
+  return /* @__PURE__ */ jsxRuntime.jsx(FacePeContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(FacePeApiContext.Provider, { value: api, children: /* @__PURE__ */ jsxRuntime.jsx(FacePeTelemetryContext.Provider, { value: reportTelemetry, children: /* @__PURE__ */ jsxRuntime.jsx(FacePeNavigationContext.Provider, { value: relayNavigation, children: /* @__PURE__ */ jsxRuntime.jsx(FacePeAvatarIdContext.Provider, { value: settings.avatarId, children: style === void 0 ? children : /* @__PURE__ */ jsxRuntime.jsx("div", { style, children }) }) }) }) }) });
+}
+function useFacePe() {
+  const value = react.useContext(FacePeContext);
+  if (value === null) {
+    throw new Error("useFacePe must be used within a FacePeProvider");
+  }
+  return value;
+}
+const root = "_root_ho4ob_11";
+const subtle = "_subtle_ho4ob_41";
+const framed = "_framed_ho4ob_45";
+const elevated = "_elevated_ho4ob_46";
+const small = "_small_ho4ob_61";
+const medium = "_medium_ho4ob_65";
+const large = "_large_ho4ob_69";
+const tokens = {
+  root,
+  subtle,
+  framed,
+  elevated,
+  small,
+  medium,
+  large
+};
+const EMPHASIS = {
+  subtle: tokens.subtle,
+  default: tokens.framed,
+  strong: tokens.elevated
+};
+const SIZE = {
+  small: tokens.small,
+  medium: tokens.medium,
+  large: tokens.large
+};
+function surfaceClass(emphasis = "default", size = "medium") {
+  return `${tokens.root} ${EMPHASIS[emphasis]} ${SIZE[size]}`;
+}
+const fallback = "_fallback_1rdem_3";
+const styles$5 = {
+  fallback
+};
+const RENDER_FAILED = { code: "RENDER_FAILED", message: "The component failed to render." };
+class FacePeErrorBoundary extends react.Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+    this.events = new FacePeEventEmitter(this.props.source, () => ({
+      entityId: this.props.entityId
+    }));
+    this.events.on("error", (event) => this.props.onError?.(event));
+  }
+  static getDerivedStateFromError() {
+    return { error: RENDER_FAILED };
+  }
+  componentDidCatch() {
+    this.events.emit("error", RENDER_FAILED);
+  }
+  render() {
+    const { error: error2 } = this.state;
+    if (error2 === null) return this.props.children;
+    const { fallback: fallback2 } = this.props;
+    if (fallback2 !== void 0) return typeof fallback2 === "function" ? fallback2({ error: error2 }) : fallback2;
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", className: `${surfaceClass()} ${styles$5.fallback}`, children: "This content could not be displayed." });
+  }
+}
+const form = "_form_1clyx_5";
+const comfortable$3 = "_comfortable_1clyx_12";
+const compact$3 = "_compact_1clyx_18";
+const field = "_field_1clyx_24";
+const stacked = "_stacked_1clyx_32";
+const inline = "_inline_1clyx_38";
+const half = "_half_1clyx_48";
+const label$1 = "_label_1clyx_53";
+const control = "_control_1clyx_58";
+const invalid = "_invalid_1clyx_99";
+const error$1 = "_error_1clyx_105";
+const formError = "_formError_1clyx_111";
+const actions = "_actions_1clyx_120";
+const primary$1 = "_primary_1clyx_128";
+const secondary$1 = "_secondary_1clyx_129";
+const styles$4 = {
+  form,
+  comfortable: comfortable$3,
+  compact: compact$3,
+  field,
+  stacked,
+  inline,
+  half,
+  label: label$1,
+  control,
+  invalid,
+  error: error$1,
+  formError,
+  actions,
+  primary: primary$1,
+  secondary: secondary$1
+};
+const SOURCE$3 = "FacePeForm";
+const FIELDS = ["name", "email", "notes"];
+const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function initialValuesOf(initial) {
+  return { name: initial?.name ?? "", email: initial?.email ?? "", notes: initial?.notes ?? "" };
+}
+function trimmed(values) {
+  return { name: values.name.trim(), email: values.email.trim(), notes: values.notes.trim() };
+}
+function validateValues(values) {
+  const errors = {};
+  if (!values.name) errors.name = "Name is required.";
+  if (!values.email) errors.email = "Email is required.";
+  else if (!EMAIL.test(values.email)) errors.email = "Enter a valid email address.";
+  return errors;
+}
+function failure$3(code, message2, details) {
+  return { success: false, error: details === void 0 ? { code, message: message2 } : { code, message: message2, details } };
+}
+const FacePeForm = react.forwardRef(function FacePeForm2(props, ref) {
+  const { config } = useFacePe();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FacePeErrorBoundary,
+    {
+      source: SOURCE$3,
+      entityId: props.entityId ?? config.entityId,
+      onError: props.onError,
+      fallback: props.slots?.fallback,
+      children: /* @__PURE__ */ jsxRuntime.jsx(FacePeFormContent, { ...props, ref })
+    }
+  );
+});
+FacePeForm.displayName = "FacePeForm";
+const FacePeFormContent = react.forwardRef(function FacePeFormContent2(props, ref) {
+  const { config } = useFacePe();
+  const mode = props.mode ?? config.mode ?? "view";
+  const entityId = props.entityId ?? config.entityId;
+  const density = props.density ?? config.density ?? "comfortable";
+  const locale = props.locale ?? config.locale;
+  const readOnly = mode === "view";
+  const byReference = props.initialValues === void 0 && entityId !== void 0;
+  const resource = useFacePeResource(byReference ? gatewayPath.customer(entityId) : null, decodeFormValues);
+  const loading = resource.status === "loading";
+  const loaded = resource.status === "ready" ? resource.data : null;
+  const loadError = resource.status === "failed" ? resource.error : null;
+  const api = useFacePeApi();
+  const [values, setValues] = react.useState(() => initialValuesOf(props.initialValues));
+  const [errors, setErrors] = react.useState({});
+  const [submitting, setSubmitting] = react.useState(false);
+  const [formError2, setFormError] = react.useState(null);
+  const propsRef = react.useRef(props);
+  propsRef.current = props;
+  const entityRef = react.useRef(entityId);
+  entityRef.current = entityId;
+  const valuesRef = react.useRef(values);
+  valuesRef.current = values;
+  const submittingRef = react.useRef(false);
+  const baselineRef = react.useRef(null);
+  const byReferenceRef = react.useRef(byReference);
+  byReferenceRef.current = byReference;
+  const readyRef = react.useRef(false);
+  const fieldRefs = react.useRef({});
+  const id = react.useId();
+  const fieldId = (field2) => `${id}-${field2}`;
+  const errorId = (field2) => `${id}-${field2}-error`;
+  const events = useFacePeEmitter(SOURCE$3, () => ({ entityId: entityRef.current }));
+  react.useEffect(() => {
+    const unsubscribe = [
+      events.on("ready", (e) => propsRef.current.onReady?.(e)),
+      events.on("submit", (e) => propsRef.current.onSubmit?.(e)),
+      events.on("cancel", (e) => propsRef.current.onCancel?.(e)),
+      events.on("error", (e) => propsRef.current.onError?.(e))
+    ];
+    return () => unsubscribe.forEach((off) => off());
+  }, [events]);
+  react.useEffect(() => {
+    if (readyRef.current) return;
+    readyRef.current = true;
+    events.emit("ready", null);
+  }, [events]);
+  react.useEffect(() => {
+    if (loaded === null) return;
+    baselineRef.current = loaded;
+    setValues(loaded);
+    setErrors({});
+  }, [loaded]);
+  react.useEffect(() => {
+    if (loadError !== null) events.emit("error", loadError);
+  }, [loadError, events]);
+  const check = react.useCallback(() => {
+    const clean = trimmed(valuesRef.current);
+    const found = validateValues(clean);
+    setErrors(found);
+    const firstInvalid = FIELDS.find((field2) => found[field2] !== void 0);
+    if (firstInvalid === void 0) return { success: true, data: clean };
+    fieldRefs.current[firstInvalid]?.focus();
+    const fields = {};
+    for (const field2 of FIELDS) {
+      const message2 = found[field2];
+      if (message2 !== void 0) fields[field2] = message2;
+    }
+    return failure$3("VALIDATION_FAILED", "One or more fields are invalid.", { fields });
+  }, []);
+  const submit = react.useCallback(async () => {
+    if (readOnly) return failure$3("READ_ONLY", "The form is in view mode.");
+    if (submittingRef.current) return failure$3("SUBMIT_IN_PROGRESS", "A submission is already in progress.");
+    const checked = check();
+    if (!checked.success) return checked;
+    const correlationId = createCorrelationId();
+    submittingRef.current = true;
+    setSubmitting(true);
+    setFormError(null);
+    try {
+      const action = propsRef.current.submitAction;
+      let outcome = { success: true, data: void 0 };
+      let submitted = checked.data;
+      if (action) {
+        try {
+          outcome = await action(checked.data);
+        } catch (err) {
+          outcome = failure$3("SUBMIT_FAILED", err instanceof Error ? err.message : "Submission failed.");
+        }
+      } else if (byReferenceRef.current && entityRef.current !== void 0) {
+        const { name, email, notes } = checked.data;
+        const saved = await api.put(gatewayPath.customer(entityRef.current), { name, email, notes }, { decode: decodeFormValues });
+        if (saved.success) {
+          submitted = saved.data;
+          baselineRef.current = saved.data;
+        } else {
+          outcome = saved;
+        }
+      }
+      if (!outcome.success) {
+        setFormError("Submission failed. Please try again.");
+        events.emit("error", outcome.error, correlationId);
+        return outcome;
+      }
+      events.emit("submit", submitted, correlationId);
+      return { success: true, data: submitted };
+    } finally {
+      submittingRef.current = false;
+      setSubmitting(false);
+    }
+  }, [check, readOnly, events, api]);
+  const validate = react.useCallback(async () => check(), [check]);
+  const reset = react.useCallback(async () => {
+    setValues(baselineRef.current ?? initialValuesOf(propsRef.current.initialValues));
+    setErrors({});
+    setFormError(null);
+    return { success: true, data: void 0 };
+  }, []);
+  const focus = react.useCallback(async () => {
+    const first = fieldRefs.current[FIELDS[0]];
+    if (!first) return failure$3("NOTHING_TO_FOCUS", "The form has no field to focus.");
+    first.focus();
+    return { success: true, data: void 0 };
+  }, []);
+  react.useImperativeHandle(ref, () => ({ validate, reset, focus }), [validate, reset, focus]);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    void submit();
+  };
+  const handleCancel = () => {
+    events.emit("cancel", null);
+  };
+  const handleChange = (field2) => (event) => {
+    const value = event.target.value;
+    setValues((prev) => ({ ...prev, [field2]: value }));
+    if (errors[field2] !== void 0) setErrors((prev) => ({ ...prev, [field2]: void 0 }));
+  };
+  const fieldProps = (field2) => {
+    const hasError = errors[field2] !== void 0;
+    return {
+      id: fieldId(field2),
+      name: field2,
+      value: values[field2],
+      onChange: handleChange(field2),
+      readOnly,
+      disabled: submitting || loading,
+      "aria-invalid": hasError,
+      "aria-describedby": hasError ? errorId(field2) : void 0,
+      className: hasError ? `${styles$4.control} ${styles$4.invalid}` : styles$4.control,
+      ref: (element) => {
+        fieldRefs.current[field2] = element;
+      }
+    };
+  };
+  const fieldError = (field2) => errors[field2] === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId(field2), className: styles$4.error, children: errors[field2] });
+  const actionsSlot = props.slots?.actions;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      className: [
+        surfaceClass(props.emphasis, props.size),
+        styles$4.form,
+        density === "compact" ? styles$4.compact : styles$4.comfortable,
+        props.variant === "inline" ? styles$4.inline : styles$4.stacked
+      ].join(" "),
+      lang: locale,
+      noValidate: true,
+      "aria-busy": submitting || loading,
+      onSubmit: handleSubmit,
+      children: [
+        props.slots?.header,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles$4.field} ${styles$4.half}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId("name"), className: styles$4.label, children: [
+            "Name ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", autoComplete: "name", required: true, ...fieldProps("name") }),
+          fieldError("name")
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles$4.field} ${styles$4.half}`, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId("email"), className: styles$4.label, children: [
+            "Email ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "email", autoComplete: "email", inputMode: "email", required: true, ...fieldProps("email") }),
+          fieldError("email")
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$4.field, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: fieldId("notes"), className: styles$4.label, children: "Notes" }),
+          /* @__PURE__ */ jsxRuntime.jsx("textarea", { rows: 3, ...fieldProps("notes") })
+        ] }),
+        loadError !== null && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: styles$4.formError, children: "The details could not be loaded." }),
+        formError2 !== null && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: styles$4.formError, children: formError2 }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$4.actions, children: actionsSlot !== void 0 ? typeof actionsSlot === "function" ? actionsSlot({ submit: () => void submit(), cancel: handleCancel, submitting, readOnly }) : actionsSlot : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: styles$4.secondary, onClick: handleCancel, disabled: submitting, children: "Cancel" }),
+          !readOnly && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: styles$4.primary, disabled: submitting || loading, children: submitting ? "Submitting…" : "Submit" })
+        ] }) }),
+        props.slots?.footer
+      ]
+    }
+  );
+});
+FacePeFormContent.displayName = "FacePeFormContent";
+const picker = "_picker_2easv_11";
+const legend = "_legend_2easv_27";
+const comfortable$2 = "_comfortable_2easv_51";
+const option = "_option_2easv_69";
+const compact$2 = "_compact_2easv_77";
+const options = "_options_2easv_103";
+const list$1 = "_list_2easv_117";
+const grid = "_grid_2easv_131";
+const selected$1 = "_selected_2easv_169";
+const disabled = "_disabled_2easv_181";
+const input = "_input_2easv_199";
+const text = "_text_2easv_227";
+const label = "_label_2easv_241";
+const description$1 = "_description_2easv_259";
+const empty = "_empty_2easv_271";
+const styles$3 = {
+  picker,
+  legend,
+  comfortable: comfortable$2,
+  option,
+  compact: compact$2,
+  options,
+  list: list$1,
+  grid,
+  selected: selected$1,
+  disabled,
+  input,
+  text,
+  label,
+  description: description$1,
+  empty
+};
+const SOURCE$2 = "FacePePicker";
+const DESCRIPTIONS_FLAG = "picker.descriptions";
+const NO_OPTIONS = [];
+function failure$2(code, message2) {
+  return { success: false, error: { code, message: message2 } };
+}
+function resolveDefault(defaultValue, options2) {
+  if (defaultValue === void 0) return { value: null, error: null };
+  const option2 = options2.find((o) => o.value === defaultValue);
+  if (option2 === void 0) {
+    return { value: null, error: { code: "INVALID_DEFAULT_VALUE", message: `No option has the value "${defaultValue}".` } };
+  }
+  if (option2.disabled === true) {
+    return { value: null, error: { code: "INVALID_DEFAULT_VALUE", message: `Option "${defaultValue}" is disabled.` } };
+  }
+  return { value: option2.value, error: null };
+}
+const FacePePicker = react.forwardRef(function FacePePicker2(props, ref) {
+  const { config } = useFacePe();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FacePeErrorBoundary,
+    {
+      source: SOURCE$2,
+      entityId: props.entityId ?? config.entityId,
+      onError: props.onError,
+      fallback: props.slots?.fallback,
+      children: /* @__PURE__ */ jsxRuntime.jsx(FacePePickerContent, { ...props, ref })
+    }
+  );
+});
+FacePePicker.displayName = "FacePePicker";
+const FacePePickerContent = react.forwardRef(function FacePePickerContent2(props, ref) {
+  const { config } = useFacePe();
+  const mode = props.mode ?? config.mode ?? "view";
+  const entityId = props.entityId ?? config.entityId;
+  const density = props.density ?? config.density ?? "comfortable";
+  const locale = props.locale ?? config.locale;
+  const showDescriptions = props.featureFlags?.[DESCRIPTIONS_FLAG] ?? config.featureFlags?.[DESCRIPTIONS_FLAG] ?? false;
+  const readOnly = mode === "view";
+  const resource = useFacePeResource(
+    props.options === void 0 && entityId !== void 0 ? gatewayPath.pickerOptions(entityId) : null,
+    decodePickerOptions
+  );
+  const options2 = props.options ?? (resource.status === "ready" ? resource.data : NO_OPTIONS);
+  const loading = resource.status === "loading";
+  const loadError = resource.status === "failed" ? resource.error : null;
+  const [initial, setInitial] = react.useState(
+    () => loading ? null : resolveDefault(props.defaultValue, options2)
+  );
+  const [selectedValue, setSelectedValue] = react.useState(initial?.value ?? null);
+  const optionsByValue = react.useMemo(() => new Map(options2.map((o) => [o.value, o])), [options2]);
+  const selected2 = selectedValue === null ? void 0 : optionsByValue.get(selectedValue);
+  const propsRef = react.useRef(props);
+  propsRef.current = props;
+  const entityRef = react.useRef(entityId);
+  entityRef.current = entityId;
+  const selectedRef = react.useRef(selected2?.value ?? null);
+  selectedRef.current = selected2?.value ?? null;
+  const readyRef = react.useRef(false);
+  const groupRef = react.useRef(null);
+  const id = react.useId();
+  const legendId = `${id}-legend`;
+  const events = useFacePeEmitter(SOURCE$2, () => ({ entityId: entityRef.current }));
+  react.useEffect(() => {
+    const unsubscribe = [
+      events.on("ready", (e) => propsRef.current.onReady?.(e)),
+      events.on("select", (e) => propsRef.current.onSelect?.(e)),
+      events.on("error", (e) => propsRef.current.onError?.(e))
+    ];
+    return () => unsubscribe.forEach((off) => off());
+  }, [events]);
+  react.useEffect(() => {
+    if (readyRef.current) return;
+    readyRef.current = true;
+    events.emit("ready", null);
+  }, [events]);
+  react.useEffect(() => {
+    if (initial !== null || loading) return;
+    const resolved = loadError === null ? resolveDefault(propsRef.current.defaultValue, options2) : { value: null, error: null };
+    selectedRef.current = resolved.value;
+    setSelectedValue(resolved.value);
+    setInitial(resolved);
+  }, [initial, loading, loadError, options2]);
+  const reportedRef = react.useRef(null);
+  react.useEffect(() => {
+    if (initial === null || initial.error === null || reportedRef.current === initial) return;
+    reportedRef.current = initial;
+    events.emit("error", initial.error);
+  }, [initial, events]);
+  react.useEffect(() => {
+    if (loadError !== null) events.emit("error", loadError);
+  }, [loadError, events]);
+  const selectValue = react.useCallback(
+    async (value) => {
+      if (readOnly) return failure$2("READ_ONLY", "The picker is in view mode.");
+      const option2 = optionsByValue.get(value);
+      if (option2 === void 0) return failure$2("OPTION_NOT_FOUND", `No option has the value "${value}".`);
+      if (option2.disabled === true) return failure$2("OPTION_DISABLED", `Option "${value}" is disabled.`);
+      const selection = {
+        value: option2.value,
+        label: option2.label,
+        previousValue: selectedRef.current
+      };
+      if (selectedRef.current === option2.value) return { success: true, data: selection };
+      selectedRef.current = option2.value;
+      setSelectedValue(option2.value);
+      events.emit("select", selection);
+      return { success: true, data: selection };
+    },
+    [optionsByValue, readOnly, events]
+  );
+  const focus = react.useCallback(async () => {
+    const target = groupRef.current?.querySelector("input:checked") ?? groupRef.current?.querySelector("input:not(:disabled)");
+    if (target == null) return failure$2("NOTHING_TO_FOCUS", "The picker has no selectable option.");
+    target.focus();
+    return { success: true, data: void 0 };
+  }, []);
+  const reset = react.useCallback(async () => {
+    if (readOnly) return failure$2("READ_ONLY", "The picker is in view mode.");
+    const value = initial?.value ?? null;
+    selectedRef.current = value;
+    setSelectedValue(value);
+    return { success: true, data: void 0 };
+  }, [readOnly, initial]);
+  react.useImperativeHandle(ref, () => ({ focus, reset }), [focus, reset]);
+  const handleChange = react.useCallback(
+    (event) => {
+      void selectValue(event.target.value);
+    },
+    [selectValue]
+  );
+  const optionSlot = props.slots?.option;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "fieldset",
+    {
+      className: [
+        surfaceClass(props.emphasis, props.size),
+        styles$3.picker,
+        density === "compact" ? styles$3.compact : styles$3.comfortable,
+        props.variant === "grid" ? styles$3.grid : styles$3.list
+      ].join(" "),
+      lang: locale,
+      "aria-busy": loading,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("legend", { id: legendId, className: styles$3.legend, children: props.label ?? "Choose an option" }),
+        props.slots?.header,
+        loading ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: styles$3.empty, children: "Loading options…" }) : loadError !== null ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: styles$3.empty, children: "The options could not be loaded." }) : options2.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$3.empty, children: props.slots?.emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No options available." }) }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: groupRef,
+            role: "radiogroup",
+            "aria-labelledby": legendId,
+            "aria-readonly": readOnly,
+            className: styles$3.options,
+            children: options2.map((option2) => {
+              const isSelected = option2.value === selected2?.value;
+              const isDisabled = option2.disabled === true;
+              const inputId = `${id}-${option2.value}`;
+              const descriptionId = `${inputId}-description`;
+              const hasDescription = optionSlot === void 0 && showDescriptions && option2.description !== void 0;
+              const className = [styles$3.option, isSelected ? styles$3.selected : "", isDisabled ? styles$3.disabled : ""].filter(Boolean).join(" ");
+              return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    id: inputId,
+                    name: `${id}-choice`,
+                    value: option2.value,
+                    checked: isSelected,
+                    disabled: isDisabled,
+                    onChange: handleChange,
+                    "aria-describedby": hasDescription ? descriptionId : void 0,
+                    className: styles$3.input
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$3.text, children: optionSlot !== void 0 ? typeof optionSlot === "function" ? optionSlot({ option: option2, selected: isSelected, disabled: isDisabled }) : optionSlot : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$3.label, children: option2.label }),
+                  hasDescription && /* @__PURE__ */ jsxRuntime.jsx("span", { id: descriptionId, className: styles$3.description, children: option2.description })
+                ] }) })
+              ] }, option2.value);
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+FacePePickerContent.displayName = "FacePePickerContent";
+const timeline = "_timeline_plcgb_13";
+const heading = "_heading_plcgb_25";
+const message = "_message_plcgb_39";
+const list = "_list_plcgb_51";
+const item = "_item_plcgb_63";
+const marker = "_marker_plcgb_95";
+const completed = "_completed_plcgb_129";
+const status = "_status_plcgb_141";
+const current = "_current_plcgb_149";
+const pending = "_pending_plcgb_171";
+const error = "_error_plcgb_179";
+const body = "_body_plcgb_199";
+const title = "_title_plcgb_215";
+const link = "_link_plcgb_265";
+const selected = "_selected_plcgb_317";
+const meta = "_meta_plcgb_339";
+const description = "_description_plcgb_359";
+const metadata = "_metadata_plcgb_369";
+const metadataEntry = "_metadataEntry_plcgb_387";
+const comfortable$1 = "_comfortable_plcgb_423";
+const compact$1 = "_compact_plcgb_449";
+const styles$2 = {
+  timeline,
+  heading,
+  message,
+  list,
+  item,
+  marker,
+  completed,
+  status,
+  current,
+  pending,
+  error,
+  body,
+  title,
+  link,
+  selected,
+  meta,
+  description,
+  metadata,
+  metadataEntry,
+  comfortable: comfortable$1,
+  compact: compact$1
+};
+const SOURCE$1 = "FacePeTimeline";
+const NO_ITEMS = [];
+const RELATIVE_TIME_FLAG = "timeline.relativeTime";
+const STATUS = {
+  completed: { marker: "✓", text: "Completed", className: styles$2.completed },
+  current: { marker: "●", text: "In progress", className: styles$2.current },
+  pending: { marker: "○", text: "Pending", className: styles$2.pending },
+  error: { marker: "!", text: "Failed", className: styles$2.error }
+};
+const RELATIVE_UNITS = [
+  ["year", 365 * 24 * 3600],
+  ["month", 30 * 24 * 3600],
+  ["week", 7 * 24 * 3600],
+  ["day", 24 * 3600],
+  ["hour", 3600],
+  ["minute", 60],
+  ["second", 1]
+];
+function failure$1(code, message2) {
+  return { success: false, error: { code, message: message2 } };
+}
+function formattersFor(locale) {
+  const make = (tag) => ({
+    absolute: new Intl.DateTimeFormat(tag, { dateStyle: "medium", timeStyle: "short" }),
+    relative: new Intl.RelativeTimeFormat(tag, { numeric: "auto" })
+  });
+  try {
+    return make(locale);
+  } catch {
+    return make(void 0);
+  }
+}
+function relativeTime(format, time, now) {
+  const seconds = Math.round((time - now) / 1e3);
+  for (const [unit, size] of RELATIVE_UNITS) {
+    if (Math.abs(seconds) >= size || unit === "second") return format.format(Math.round(seconds / size), unit);
+  }
+  return format.format(0, "second");
+}
+function ordered(items, sort) {
+  if (sort === "none") return items;
+  const direction = sort === "ascending" ? 1 : -1;
+  return items.map((item2, index) => ({ item: item2, index, time: Date.parse(item2.timestamp) })).sort((a, b) => {
+    const aValid = !Number.isNaN(a.time);
+    const bValid = !Number.isNaN(b.time);
+    if (aValid !== bValid) return aValid ? -1 : 1;
+    if (aValid && a.time !== b.time) return (a.time - b.time) * direction;
+    return a.index - b.index;
+  }).map((entry) => entry.item);
+}
+function problemsIn(items) {
+  const problems = [];
+  const invalid2 = items.filter((item2) => Number.isNaN(Date.parse(item2.timestamp))).map((item2) => item2.id);
+  if (invalid2.length > 0) {
+    problems.push({ code: "INVALID_TIMESTAMP", message: "Some items have an unparseable timestamp.", details: { ids: invalid2 } });
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const duplicates = /* @__PURE__ */ new Set();
+  for (const item2 of items) {
+    if (seen.has(item2.id)) duplicates.add(item2.id);
+    seen.add(item2.id);
+  }
+  if (duplicates.size > 0) {
+    problems.push({ code: "DUPLICATE_ITEM_ID", message: "Item ids must be unique.", details: { ids: [...duplicates] } });
+  }
+  return problems;
+}
+const FacePeTimeline = react.forwardRef(function FacePeTimeline2(props, ref) {
+  const { config } = useFacePe();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FacePeErrorBoundary,
+    {
+      source: SOURCE$1,
+      entityId: props.entityId ?? config.entityId,
+      onError: props.onError,
+      fallback: props.slots?.fallback,
+      children: /* @__PURE__ */ jsxRuntime.jsx(FacePeTimelineContent, { ...props, ref })
+    }
+  );
+});
+FacePeTimeline.displayName = "FacePeTimeline";
+const FacePeTimelineContent = react.forwardRef(function FacePeTimelineContent2(props, ref) {
+  const { config } = useFacePe();
+  const entityId = props.entityId ?? config.entityId;
+  const density = props.density ?? config.density ?? "comfortable";
+  const locale = props.locale ?? config.locale;
+  const showRelative = props.featureFlags?.[RELATIVE_TIME_FLAG] ?? config.featureFlags?.[RELATIVE_TIME_FLAG] ?? false;
+  const interactive = props.onSelect !== void 0;
+  const sort = props.sort ?? "none";
+  const resource = useFacePeResource(
+    props.items === void 0 && entityId !== void 0 ? gatewayPath.timeline(entityId) : null,
+    decodeTimeline
+  );
+  const items = props.items ?? (resource.status === "ready" ? resource.data : NO_ITEMS);
+  const loading = props.loading === true || resource.status === "loading";
+  const loadError = resource.status === "failed" ? resource.error : null;
+  const visibleItems = react.useMemo(() => ordered(items, sort), [items, sort]);
+  const itemsById = react.useMemo(() => new Map(items.map((item2) => [item2.id, item2])), [items]);
+  const formatters = react.useMemo(() => formattersFor(locale), [locale]);
+  const [selectedId, setSelectedId] = react.useState(null);
+  const currentSelectedId = selectedId !== null && itemsById.has(selectedId) ? selectedId : null;
+  const propsRef = react.useRef(props);
+  propsRef.current = props;
+  const entityRef = react.useRef(entityId);
+  entityRef.current = entityId;
+  const selectedRef = react.useRef(currentSelectedId);
+  selectedRef.current = currentSelectedId;
+  const readyRef = react.useRef(false);
+  const reportedRef = react.useRef("");
+  const itemRefs = react.useRef(/* @__PURE__ */ new Map());
+  const listRef = react.useRef(null);
+  const id = react.useId();
+  const labelId = `${id}-label`;
+  const events = useFacePeEmitter(SOURCE$1, () => ({ entityId: entityRef.current }));
+  react.useEffect(() => {
+    const unsubscribe = [
+      events.on("ready", (e) => propsRef.current.onReady?.(e)),
+      events.on("select", (e) => propsRef.current.onSelect?.(e)),
+      events.on("navigate", (e) => propsRef.current.onNavigate?.(e)),
+      events.on("error", (e) => propsRef.current.onError?.(e))
+    ];
+    return () => unsubscribe.forEach((off) => off());
+  }, [events]);
+  const relayNavigation = useFacePeNavigationRelay();
+  const navigate = react.useCallback(
+    (request) => {
+      relayNavigation(events.emit("navigate", request));
+    },
+    [events, relayNavigation]
+  );
+  react.useEffect(() => {
+    if (readyRef.current) return;
+    readyRef.current = true;
+    events.emit("ready", null);
+  }, [events]);
+  react.useEffect(() => {
+    if (loadError !== null) events.emit("error", loadError);
+  }, [loadError, events]);
+  react.useEffect(() => {
+    const problems = problemsIn(items);
+    const signature = JSON.stringify(problems);
+    if (signature === reportedRef.current) return;
+    reportedRef.current = signature;
+    for (const problem2 of problems) events.emit("error", problem2);
+  }, [items, events]);
+  const selectItem = react.useCallback(
+    async (itemId) => {
+      const item2 = itemsById.get(itemId);
+      if (item2 === void 0) return failure$1("ITEM_NOT_FOUND", `No item has the id "${itemId}".`);
+      const selection = {
+        id: item2.id,
+        title: item2.title,
+        status: item2.status,
+        previousId: selectedRef.current
+      };
+      if (selectedRef.current === item2.id) return { success: true, data: selection };
+      selectedRef.current = item2.id;
+      setSelectedId(item2.id);
+      events.emit("select", selection);
+      return { success: true, data: selection };
+    },
+    [itemsById, events]
+  );
+  const reset = react.useCallback(async () => {
+    selectedRef.current = null;
+    setSelectedId(null);
+    return { success: true, data: void 0 };
+  }, []);
+  const scrollToSection = react.useCallback(
+    async (itemId) => {
+      const element = itemRefs.current.get(itemId);
+      if (element === void 0) return failure$1("ITEM_NOT_FOUND", `No item has the id "${itemId}".`);
+      if (typeof element.scrollIntoView === "function") element.scrollIntoView({ block: "nearest" });
+      element.querySelector("button")?.focus();
+      return { success: true, data: void 0 };
+    },
+    []
+  );
+  const focus = react.useCallback(async () => {
+    const selected2 = selectedRef.current === null ? void 0 : itemRefs.current.get(selectedRef.current);
+    const target = selected2?.querySelector("button") ?? listRef.current?.querySelector("button");
+    if (target == null) return failure$1("NOTHING_TO_FOCUS", "The timeline has no interactive item to focus.");
+    target.focus();
+    return { success: true, data: void 0 };
+  }, []);
+  react.useImperativeHandle(ref, () => ({ focus, reset, scrollToSection }), [focus, reset, scrollToSection]);
+  const rootClass = `${surfaceClass(props.emphasis, props.size)} ${styles$2.timeline} ${density === "compact" ? styles$2.compact : styles$2.comfortable}`;
+  const heading2 = /* @__PURE__ */ jsxRuntime.jsx("p", { id: labelId, className: styles$2.heading, children: props.label ?? "Timeline" });
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: rootClass, lang: locale, "aria-labelledby": labelId, "aria-busy": "true", children: [
+      heading2,
+      /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: styles$2.message, children: "Loading…" })
+    ] });
+  }
+  const now = Date.now();
+  const itemSlot = props.slots?.item;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: rootClass, lang: locale, "aria-labelledby": labelId, children: [
+    heading2,
+    loadError !== null ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: styles$2.message, children: "The timeline could not be loaded." }) : visibleItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", className: styles$2.message, children: props.slots?.emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No events yet." }) }) : /* @__PURE__ */ jsxRuntime.jsx("ol", { ref: listRef, className: styles$2.list, "aria-labelledby": labelId, children: visibleItems.map((item2, index) => {
+      const status2 = STATUS[item2.status];
+      const time = Date.parse(item2.timestamp);
+      const valid = !Number.isNaN(time);
+      const formattedTimestamp = valid ? formatters.absolute.format(time) : item2.timestamp;
+      const isSelected = item2.id === currentSelectedId;
+      const key = `${item2.id}\0${index}`;
+      const statusId = `${id}-${index}-status`;
+      const timeId = `${id}-${index}-time`;
+      const titleId = `${id}-${index}-title`;
+      const { link: link2 } = item2;
+      const metadata2 = item2.metadata === void 0 ? [] : Object.entries(item2.metadata);
+      const itemClass = [styles$2.item, status2.className, isSelected ? styles$2.selected : ""].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "li",
+        {
+          className: itemClass,
+          "aria-current": item2.status === "current" ? "step" : void 0,
+          ref: (element) => {
+            if (element === null) itemRefs.current.delete(item2.id);
+            else if (!itemRefs.current.has(item2.id)) itemRefs.current.set(item2.id, element);
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$2.marker, "aria-hidden": "true", children: status2.marker }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2.body, children: [
+              interactive ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  id: titleId,
+                  className: styles$2.title,
+                  "aria-pressed": isSelected,
+                  "aria-describedby": `${statusId} ${timeId}`,
+                  onClick: () => {
+                    void selectItem(item2.id);
+                  },
+                  children: item2.title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("p", { id: titleId, className: styles$2.title, children: item2.title }),
+              /* @__PURE__ */ jsxRuntime.jsxs("p", { className: styles$2.meta, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { id: statusId, className: styles$2.status, children: status2.text }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " · " }),
+                valid ? /* @__PURE__ */ jsxRuntime.jsxs("time", { id: timeId, dateTime: item2.timestamp, className: styles$2.time, children: [
+                  formattedTimestamp,
+                  showRelative && ` (${relativeTime(formatters.relative, time, now)})`
+                ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { id: timeId, className: styles$2.time, children: formattedTimestamp })
+              ] }),
+              itemSlot !== void 0 ? typeof itemSlot === "function" ? itemSlot({ item: item2, selected: isSelected, formattedTimestamp }) : itemSlot : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                item2.description !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$2.description, children: item2.description }),
+                metadata2.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("dl", { className: styles$2.metadata, children: metadata2.map(([name, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$2.metadataEntry, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("dt", { children: name }),
+                  /* @__PURE__ */ jsxRuntime.jsx("dd", { children: String(value) })
+                ] }, name)) })
+              ] }),
+              link2 !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles$2.link,
+                  "aria-describedby": titleId,
+                  onClick: () => navigate(link2),
+                  children: "View details"
+                }
+              )
+            ] })
+          ]
+        },
+        key
+      );
+    }) })
+  ] });
+});
+FacePeTimelineContent.displayName = "FacePeTimelineContent";
+let anamModule = null;
+let livekitModule = null;
+const loadAnam = () => anamModule ??= import("@anam-ai/js-sdk");
+const loadLiveKit = () => livekitModule ??= import("livekit-client");
+function preloadEngines() {
+  loadLiveKit().catch(() => {
+    livekitModule = null;
+  });
+  loadAnam().catch(() => {
+    anamModule = null;
+  });
+}
+const roleOf = (role) => String(role).toLowerCase().includes("user") ? "user" : "assistant";
+async function connectAnam(video2, conn, on) {
+  const { createClient, AnamEvent } = await loadAnam();
+  const client = createClient(conn.token);
+  let ended = false;
+  const seen = /* @__PURE__ */ new Map();
+  client.addListener(AnamEvent.VIDEO_PLAY_STARTED, () => {
+    on.onLive();
+    try {
+      client.unmuteInputAudio();
+    } catch {
+    }
+    if (conn.greeting) void client.talk(conn.greeting).catch(() => void 0);
+  });
+  client.addListener(AnamEvent.CONNECTION_CLOSED, () => {
+    if (!ended) on.onDisconnected();
+  });
+  client.addListener(AnamEvent.MESSAGE_HISTORY_UPDATED, (messages) => {
+    for (const m of messages) {
+      const text2 = (m.content || "").trim();
+      if (!text2 || seen.get(m.id) === text2) continue;
+      seen.set(m.id, text2);
+      on.onTranscript({ role: roleOf(m.role), text: text2, id: m.id });
+    }
+  });
+  if (!video2.id) video2.id = `facepe-avatar-${Math.random().toString(36).slice(2, 10)}`;
+  await client.streamToVideoElement(video2.id);
+  return {
+    async end() {
+      ended = true;
+      await client.stopStreaming().catch(() => void 0);
+    },
+    async setMuted(muted) {
+      if (muted) client.muteInputAudio();
+      else client.unmuteInputAudio();
+    }
+  };
+}
+async function connectLiveKit(video2, conn, on) {
+  const { Room, RoomEvent, Track, createLocalAudioTrack } = await loadLiveKit();
+  const room = new Room({ adaptiveStream: false, dynacast: false });
+  let ended = false;
+  let audio = null;
+  const dropAudio = () => {
+    if (!audio) return;
+    try {
+      audio.pause();
+    } catch {
+    }
+    audio.remove();
+    audio = null;
+  };
+  room.on(RoomEvent.TrackSubscribed, (track) => {
+    if (track.kind === Track.Kind.Video) {
+      track.attach(video2);
+      void video2.play().catch(() => void 0);
+      on.onLive();
+    } else if (track.kind === Track.Kind.Audio) {
+      dropAudio();
+      const el = track.attach();
+      el.style.display = "none";
+      document.body.appendChild(el);
+      audio = el;
+    }
+  });
+  room.on(RoomEvent.DataReceived, (payload) => {
+    let msg;
+    try {
+      msg = JSON.parse(new TextDecoder().decode(payload));
+    } catch {
+      return;
+    }
+    const type = String(msg.type ?? msg.event_type ?? "");
+    const text2 = String(msg.text ?? msg.transcript ?? msg.content ?? "").trim();
+    if (type === "avatar.transcription" && text2) on.onTranscript({ role: "assistant", text: text2 });
+    else if (type === "user.transcription" && text2) on.onTranscript({ role: "user", text: text2 });
+    else if (type === "order.update" && Array.isArray(msg.items)) {
+      on.onOrder(msg.items.map((i) => ({ name: String(i.name ?? ""), qty: Number(i.qty) || 0 })).filter((i) => i.name && i.qty > 0));
+    }
+  });
+  room.on(RoomEvent.Disconnected, () => {
+    dropAudio();
+    if (!ended) on.onDisconnected();
+  });
+  await room.connect(conn.url, conn.token, { autoSubscribe: true });
+  await room.startAudio().catch(() => void 0);
+  const mic = await createLocalAudioTrack({ echoCancellation: true, noiseSuppression: true, autoGainControl: true });
+  await room.localParticipant.publishTrack(mic);
+  const sessionUpdate = new TextEncoder().encode(JSON.stringify({
+    type: "session.update",
+    session: { input_audio_transcription: { model: "whisper-1" }, turn_detection: { type: "server_vad" } }
+  }));
+  const send = () => {
+    if (!ended) void room.localParticipant.publishData(sessionUpdate, { reliable: true }).catch(() => void 0);
+  };
+  send();
+  [600, 1500, 3500].forEach((ms) => setTimeout(send, ms));
+  return {
+    async end() {
+      ended = true;
+      mic.stop();
+      dropAudio();
+      await room.disconnect().catch(() => void 0);
+    },
+    async setMuted(muted) {
+      if (muted) await mic.mute();
+      else await mic.unmute();
+    }
+  };
+}
+function connectEngine(video2, conn, on) {
+  return conn.type === "stream" ? connectAnam(video2, conn, on) : connectLiveKit(video2, conn, on);
+}
+const avatar = "_avatar_1ugh0_9";
+const comfortable = "_comfortable_1ugh0_25";
+const compact = "_compact_1ugh0_35";
+const stage = "_stage_1ugh0_47";
+const video = "_video_1ugh0_79";
+const portrait = "_portrait_1ugh0_95";
+const initials = "_initials_1ugh0_111";
+const overlay$1 = "_overlay_1ugh0_131";
+const problem = "_problem_1ugh0_153";
+const captions = "_captions_1ugh0_165";
+const speaker = "_speaker_1ugh0_187";
+const user = "_user_1ugh0_195";
+const assistant = "_assistant_1ugh0_203";
+const controls = "_controls_1ugh0_211";
+const primary = "_primary_1ugh0_225";
+const secondary = "_secondary_1ugh0_227";
+const danger = "_danger_1ugh0_229";
+const choices = "_choices_1ugh0_313";
+const choice = "_choice_1ugh0_313";
+const thumb = "_thumb_1ugh0_387";
+const styles$1 = {
+  avatar,
+  comfortable,
+  compact,
+  stage,
+  video,
+  portrait,
+  initials,
+  overlay: overlay$1,
+  problem,
+  captions,
+  speaker,
+  user,
+  assistant,
+  controls,
+  primary,
+  secondary,
+  danger,
+  choices,
+  choice,
+  thumb
+};
+const SOURCE = "FacePeAvatar";
+const CAPTION_LINES = 2;
+const NO_AVATARS = { code: "NO_AVATAR", message: "No avatars are assigned to this user." };
+function failure(code, message2) {
+  return { success: false, error: { code, message: message2 } };
+}
+const FacePeAvatar = react.forwardRef(function FacePeAvatar2(props, ref) {
+  const { config } = useFacePe();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FacePeErrorBoundary,
+    {
+      source: SOURCE,
+      entityId: props.entityId ?? config.entityId,
+      onError: props.onError,
+      fallback: props.slots?.fallback,
+      children: /* @__PURE__ */ jsxRuntime.jsx(FacePeAvatarContent, { ...props, ref })
+    }
+  );
+});
+FacePeAvatar.displayName = "FacePeAvatar";
+const FacePeAvatarContent = react.forwardRef(function FacePeAvatarContent2(props, ref) {
+  const { config } = useFacePe();
+  const providerAvatarId = useFacePeAvatarId();
+  const fixedId = props.avatarId ?? providerAvatarId;
+  const entityId = props.entityId ?? config.entityId;
+  const locale = props.locale ?? config.locale;
+  const density = props.density ?? config.density ?? "comfortable";
+  const api = useFacePeApi();
+  const [status2, setStatus] = react.useState("idle");
+  const [muted, setMutedState] = react.useState(false);
+  const [lines, setLines] = react.useState([]);
+  const [problem2, setProblem] = react.useState(null);
+  const propsRef = react.useRef(props);
+  propsRef.current = props;
+  const entityRef = react.useRef(entityId);
+  entityRef.current = entityId;
+  const videoRef = react.useRef(null);
+  const mainButtonRef = react.useRef(null);
+  const engineRef = react.useRef(null);
+  const connRef = react.useRef(null);
+  const statusRef = react.useRef(status2);
+  statusRef.current = status2;
+  const runRef = react.useRef(0);
+  const readyRef = react.useRef(false);
+  const list2 = useFacePeResource(fixedId === void 0 ? gatewayPath.avatars : null, decodeAvatarList);
+  const choices2 = list2.status === "ready" ? list2.data : [];
+  const [chosenId, setChosenId] = react.useState(null);
+  const chosen = choices2.find((a) => a.id === chosenId) ?? choices2[0];
+  const avatarId = fixedId ?? chosen?.id;
+  const info = useFacePeResource(fixedId === void 0 ? null : gatewayPath.avatar(fixedId), decodeAvatar);
+  const avatar2 = fixedId === void 0 ? chosen ?? null : info.status === "ready" ? info.data : null;
+  const portrait2 = api.assetUrl(avatar2?.previewUrl);
+  const known = avatar2 !== null;
+  react.useEffect(() => {
+    if (known) preloadEngines();
+  }, [known]);
+  const [portraitFailed, setPortraitFailed] = react.useState(null);
+  const events = useFacePeEmitter(SOURCE, () => ({ entityId: entityRef.current }));
+  react.useEffect(() => {
+    const unsubscribe = [
+      events.on("ready", (e) => propsRef.current.onReady?.(e)),
+      events.on("sessionStart", (e) => propsRef.current.onSessionStart?.(e)),
+      events.on("sessionEnd", (e) => propsRef.current.onSessionEnd?.(e)),
+      events.on("transcript", (e) => propsRef.current.onTranscript?.(e)),
+      events.on("orderUpdate", (e) => propsRef.current.onOrderUpdate?.(e)),
+      events.on("error", (e) => propsRef.current.onError?.(e))
+    ];
+    return () => unsubscribe.forEach((off) => off());
+  }, [events]);
+  react.useEffect(() => {
+    if (readyRef.current) return;
+    readyRef.current = true;
+    events.emit("ready", null);
+  }, [events]);
+  const noAvatars = list2.status === "ready" && list2.data.length === 0;
+  const loadError = info.status === "failed" ? info.error : list2.status === "failed" ? list2.error : null;
+  const infoError = loadError ?? (noAvatars ? NO_AVATARS : null);
+  react.useEffect(() => {
+    if (infoError === null) return;
+    setProblem(
+      infoError.code === "FORBIDDEN" ? "This avatar is not available to this account." : infoError.code === "NO_AVATAR" ? "No avatars are assigned to this account yet." : "The avatar could not be loaded."
+    );
+    events.emit("error", infoError);
+  }, [infoError, events]);
+  const choose = (id) => {
+    if (statusRef.current === "connecting" || statusRef.current === "live" || id === avatarId) return;
+    setChosenId(id);
+    setStatus("idle");
+    setProblem(null);
+    setLines([]);
+  };
+  const report = react.useCallback(
+    (error2, shown) => {
+      setProblem(shown);
+      setStatus("error");
+      events.emit("error", error2);
+    },
+    [events]
+  );
+  const finish = react.useCallback(
+    async (reason) => {
+      runRef.current += 1;
+      const engine = engineRef.current;
+      const conn = connRef.current;
+      engineRef.current = null;
+      connRef.current = null;
+      if (conn?.usageId) {
+        void api.post(gatewayPath.endAvatarSession(conn.usageId), void 0, { keepalive: true });
+      }
+      if (engine) await engine.end().catch(() => void 0);
+      if (conn) events.emit("sessionEnd", { avatarId: conn.avatar.id, usageId: conn.usageId, reason });
+    },
+    [api, events]
+  );
+  const start = react.useCallback(async () => {
+    if (statusRef.current === "connecting" || statusRef.current === "live") return { success: true, data: void 0 };
+    if (avatarId === void 0) {
+      const result = failure("NO_AVATAR", "No avatar is available: none was given, and none is assigned to this user.");
+      report(result.error, "No avatar is available.");
+      return result;
+    }
+    const run = ++runRef.current;
+    setProblem(null);
+    setLines([]);
+    setMutedState(false);
+    setStatus("connecting");
+    const language = propsRef.current.language;
+    const session = await api.post(
+      gatewayPath.avatarSessions(avatarId),
+      language ? { language } : {},
+      { decode: decodeAvatarConnection }
+    );
+    if (run !== runRef.current) return failure("CANCELLED", "The conversation was ended before it started.");
+    if (!session.success) {
+      report(session.error, session.error.code === "FORBIDDEN" ? "This avatar is not available to this account." : "The conversation could not be started.");
+      return session;
+    }
+    connRef.current = session.data;
+    events.emit("sessionStart", { avatarId: session.data.avatar.id, usageId: session.data.usageId });
+    const video2 = videoRef.current;
+    if (video2 === null) return failure("NOT_MOUNTED", "The avatar is not on the page.");
+    try {
+      const engine = await connectEngine(video2, session.data, {
+        onLive: () => {
+          if (run === runRef.current) setStatus("live");
+        },
+        onTranscript: (line) => {
+          if (run !== runRef.current) return;
+          setLines((prev) => [...prev, line].slice(-CAPTION_LINES));
+          events.emit("transcript", line);
+        },
+        onOrder: (items) => {
+          if (run === runRef.current) events.emit("orderUpdate", { items });
+        },
+        onDisconnected: () => {
+          if (run !== runRef.current) return;
+          setStatus("ended");
+          void finish("disconnected");
+        }
+      });
+      if (run !== runRef.current) {
+        await engine.end().catch(() => void 0);
+        return failure("CANCELLED", "The conversation was ended before it started.");
+      }
+      engineRef.current = engine;
+      return { success: true, data: void 0 };
+    } catch (err) {
+      const error2 = { code: "AVATAR_CONNECT_FAILED", message: err instanceof Error ? err.message : "Could not connect to the avatar." };
+      await finish("disconnected");
+      report(error2, "Could not connect to the avatar. Check the microphone permission and try again.");
+      return { success: false, error: error2 };
+    }
+  }, [api, avatarId, events, finish, report]);
+  const end = react.useCallback(async () => {
+    if (statusRef.current !== "connecting" && statusRef.current !== "live") return { success: true, data: void 0 };
+    setStatus("ended");
+    await finish("ended");
+    return { success: true, data: void 0 };
+  }, [finish]);
+  const setMuted = react.useCallback(async (next) => {
+    const engine = engineRef.current;
+    if (engine === null) return failure("NOT_LIVE", "There is no conversation to mute.");
+    try {
+      await engine.setMuted(next);
+      setMutedState(next);
+      return { success: true, data: void 0 };
+    } catch {
+      return failure("MUTE_FAILED", "The microphone could not be changed.");
+    }
+  }, []);
+  const focus = react.useCallback(async () => {
+    if (!mainButtonRef.current) return failure("NOTHING_TO_FOCUS", "The avatar has no control to focus.");
+    mainButtonRef.current.focus();
+    return { success: true, data: void 0 };
+  }, []);
+  react.useImperativeHandle(ref, () => ({ focus, start, end, setMuted }), [focus, start, end, setMuted]);
+  const autoStarted = react.useRef(false);
+  react.useEffect(() => {
+    if (!props.autoStart || autoStarted.current || avatarId === void 0) return;
+    autoStarted.current = true;
+    void start();
+  }, [props.autoStart, avatarId, start]);
+  react.useEffect(() => {
+    const onPageHide = () => void finish("unmounted");
+    window.addEventListener("pagehide", onPageHide);
+    return () => {
+      window.removeEventListener("pagehide", onPageHide);
+      void finish("unmounted");
+    };
+  }, [finish]);
+  const live = status2 === "live";
+  const busy = status2 === "connecting";
+  const name = avatar2?.name ?? "FacePe avatar";
+  const controls2 = {
+    status: status2,
+    muted,
+    start: () => void start(),
+    end: () => void end(),
+    setMuted: (next) => void setMuted(next)
+  };
+  const controlsSlot = props.slots?.controls;
+  const statusText = status2 === "connecting" ? `Connecting to ${name}…` : status2 === "ended" ? "Conversation ended." : status2 === "idle" ? `Talk to ${name}` : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: [surfaceClass(props.emphasis, props.size), styles$1.avatar, density === "compact" ? styles$1.compact : styles$1.comfortable].join(" "),
+      lang: locale,
+      "aria-label": name,
+      "aria-busy": busy,
+      children: [
+        props.slots?.header,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$1.stage, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("video", { ref: videoRef, className: styles$1.video, autoPlay: true, playsInline: true, "aria-label": `${name}, video` }),
+          !live && (portrait2 && portraitFailed !== portrait2 ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles$1.portrait, src: portrait2, alt: name, onError: () => setPortraitFailed(portrait2) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$1.initials, "aria-hidden": "true", children: name.split(/\s+/).map((w) => w[0]).join("").slice(0, 2).toUpperCase() })),
+          !live && statusText !== null && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: styles$1.overlay, children: statusText })
+        ] }),
+        choices2.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.choices, role: "radiogroup", "aria-label": "Choose an avatar", children: choices2.map((a) => {
+          const thumb2 = api.assetUrl(a.previewUrl);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": a.id === avatarId,
+              className: styles$1.choice,
+              disabled: live || busy,
+              onClick: () => choose(a.id),
+              children: [
+                thumb2 ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: styles$1.thumb, src: thumb2, alt: "" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$1.thumb, "aria-hidden": "true", children: a.name.slice(0, 1).toUpperCase() }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: a.name })
+              ]
+            },
+            a.id
+          );
+        }) }),
+        problem2 !== null && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: styles$1.problem, children: problem2 }),
+        props.captions !== false && lines.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.captions, "aria-live": "polite", children: lines.map((line, i) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: line.role === "user" ? styles$1.user : styles$1.assistant, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$1.speaker, children: [
+            line.role === "user" ? "You" : name,
+            ": "
+          ] }),
+          line.text
+        ] }, line.id ?? `${i}-${line.text}`)) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$1.controls, children: controlsSlot !== void 0 ? typeof controlsSlot === "function" ? controlsSlot(controls2) : controlsSlot : live || busy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: styles$1.secondary, disabled: !live, "aria-pressed": muted, onClick: () => void setMuted(!muted), children: muted ? "Unmute" : "Mute" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { ref: mainButtonRef, type: "button", className: styles$1.danger, onClick: () => void end(), children: "End" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            ref: mainButtonRef,
+            type: "button",
+            className: styles$1.primary,
+            disabled: avatarId === void 0 || infoError !== null,
+            onClick: () => void start(),
+            children: status2 === "ended" || status2 === "error" ? "Start again" : "Start conversation"
+          }
+        ) })
+      ]
+    }
+  );
+});
+FacePeAvatarContent.displayName = "FacePeAvatarContent";
+const page = "_page_1q0su_11";
+const overlay = "_overlay_1q0su_31";
+const modal = "_modal_1q0su_75";
+const drawer = "_drawer_1q0su_87";
+const styles = {
+  page,
+  overlay,
+  modal,
+  drawer
+};
+function FacePePage({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.page, children });
+}
+function FacePeOverlay({ open, label: label2, variant = "modal", onClose, children }) {
+  const dialogRef = react.useRef(null);
+  const onCloseRef = react.useRef(onClose);
+  onCloseRef.current = onClose;
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog === null) return;
+    const shown = dialog.hasAttribute("open");
+    if (open && !shown) {
+      if (typeof dialog.showModal === "function") dialog.showModal();
+      else dialog.setAttribute("open", "");
+    } else if (!open && shown) {
+      if (typeof dialog.close === "function") dialog.close();
+      else dialog.removeAttribute("open");
+    }
+  }, [open]);
+  const handleCancel = (event) => {
+    event.preventDefault();
+    onCloseRef.current?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("dialog", { ref: dialogRef, "aria-label": label2, className: `${styles.overlay} ${variant === "drawer" ? styles.drawer : styles.modal}`, onCancel: handleCancel, children });
+}
+exports.FacePeAvatar = FacePeAvatar;
+exports.FacePeForm = FacePeForm;
+exports.FacePeOverlay = FacePeOverlay;
+exports.FacePePage = FacePePage;
+exports.FacePePicker = FacePePicker;
+exports.FacePeProvider = FacePeProvider;
+exports.FacePeTimeline = FacePeTimeline;
+exports.SDK_VERSION = SDK_VERSION;
+exports.useFacePe = useFacePe;
+//# sourceMappingURL=index.cjs.map