@firetable/project-xiaochun 0.1.15 → 0.1.16

package/dist/element.js

@@ -1,10 +1,10 @@
-/*! @firetable/project-xiaochun v0.1.15 | MIT | https://github.com/FireTable/project-xiaochun */
+/*! @firetable/project-xiaochun v0.1.16 | MIT | https://github.com/FireTable/project-xiaochun */
 import {
   XIAOCHUN_ELEMENT_TAG,
   defineXiaochunElement
-} from "./chunks/chunk-T6EHFEEZ.js";
-import "./chunks/chunk-KQSKHPVF.js";
-import "./chunks/chunk-KKRZ3SUD.js";
+} from "./chunks/chunk-HZ2ADKG7.js";
+import "./chunks/chunk-UWL65W7D.js";
+import "./chunks/chunk-RHQW4QZH.js";
 
 // src/element.ts
 defineXiaochunElement();

package/dist/index.cjs

@@ -1,4 +1,4 @@
-/*! @firetable/project-xiaochun v0.1.15 | MIT | https://github.com/FireTable/project-xiaochun */
+/*! @firetable/project-xiaochun v0.1.16 | MIT | https://github.com/FireTable/project-xiaochun */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,14 +21,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  XC_CAMERA_RANGES: () => XC_CAMERA_RANGES,
   XC_DEFAULT_ORIGIN: () => XC_DEFAULT_ORIGIN,
   XC_DEFAULT_SRC: () => XC_DEFAULT_SRC,
   XC_FRAME_TO_HOST: () => XC_FRAME_TO_HOST,
   XC_HOST_TO_FRAME: () => XC_HOST_TO_FRAME,
   XC_ID_RE: () => XC_ID_RE,
   XC_IMPLEMENTED_COMMANDS: () => XC_IMPLEMENTED_COMMANDS,
+  XC_LANGS: () => XC_LANGS,
   XC_PROTOCOL_MAPPING: () => XC_PROTOCOL_MAPPING,
   XC_PROTOCOL_VERSION: () => XC_PROTOCOL_VERSION,
+  XC_UI_AUTOHIDE_DEFAULT: () => XC_UI_AUTOHIDE_DEFAULT,
   XC_UI_LEGACY_PARTS: () => XC_UI_LEGACY_PARTS,
   XC_UI_PARTS: () => XC_UI_PARTS,
   XC_UNSUPPORTED_COMMANDS: () => XC_UNSUPPORTED_COMMANDS,
@@ -40,13 +43,17 @@ __export(src_exports, {
   isXcEnvelope: () => isXcEnvelope,
   isXcId: () => isXcId,
   normalizeOrigin: () => normalizeOrigin,
+  normalizeXcCamera: () => normalizeXcCamera,
   normalizeXcUiOption: () => normalizeXcUiOption,
   parseProtocolUrl: () => parseProtocolUrl,
+  parseXcCameraParams: () => parseXcCameraParams,
+  parseXcUiAutoHide: () => parseXcUiAutoHide,
   parseXcUiList: () => parseXcUiList,
   parseXcUiParam: () => parseXcUiParam,
   toProtocolUrl: () => toProtocolUrl,
   xcHasOwn: () => xcHasOwn,
-  xcMessage: () => xcMessage
+  xcMessage: () => xcMessage,
+  xcUiAutoHideActive: () => xcUiAutoHideActive
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -80,6 +87,7 @@ var XC_FRAME_TO_HOST = [
   "xc.loaded",
   "xc.outfit-changed",
   "xc.scene-changed",
+  "xc.lang-changed",
   "xc.prefetched",
   "xc.state",
   "xc.stt",
@@ -116,7 +124,7 @@ var XC_PROTOCOL_MAPPING = [
   { xc: "xc.audio.chunk / xc.audio.end", note: "\u6D41\u5F0F PCM", action: "audio", url: null }
 ];
 var XC_WINDOW_CORNER_RADIUS = 20;
-var XC_UI_PARTS = ["chat", "bubble", "outfit", "scene"];
+var XC_UI_PARTS = ["chat", "bubble", "outfit", "scene", "lang", "github"];
 var XC_UI_PART_SET = new Set(XC_UI_PARTS);
 var XC_UI_LEGACY_PARTS = ["chat", "bubble"];
 function parseXcUiList(items) {
@@ -140,9 +148,84 @@ function normalizeXcUiOption(v) {
   if (Array.isArray(v)) return parseXcUiList(v);
   return { parts: [], unknown: [], legacy: false };
 }
+var XC_UI_AUTOHIDE_DEFAULT = "transparent";
+function parseXcUiAutoHide(raw) {
+  if (raw === true || raw === false || raw === "transparent") return raw;
+  if (typeof raw !== "string") return void 0;
+  const v = raw.trim().toLowerCase();
+  if (v === "1" || v === "true") return true;
+  if (v === "0" || v === "false") return false;
+  if (v === "transparent") return "transparent";
+  return void 0;
+}
+function xcUiAutoHideActive(mode, sceneTransparent) {
+  return mode === "transparent" ? sceneTransparent : mode;
+}
+var XC_CAMERA_RANGES = {
+  fov: [15, 60],
+  distance: [1, 15],
+  height: [-1, 1]
+};
+var XC_CAMERA_NUM_KEYS = ["fov", "distance", "height"];
+var XC_CAMERA_KEYS = ["fov", "distance", "height", "intro"];
+function normalizeXcCamera(raw) {
+  if (raw === null || typeof raw !== "object" || Array.isArray(raw)) return { ok: false, error: "camera must be an object" };
+  const src = raw;
+  for (const k of Object.keys(src)) {
+    if (!XC_CAMERA_KEYS.includes(k)) return { ok: false, error: `unknown camera key: ${k} (expected ${XC_CAMERA_KEYS.join(" | ")})` };
+  }
+  const out = {};
+  const clamped = [];
+  for (const k of XC_CAMERA_NUM_KEYS) {
+    const v = src[k];
+    if (v === void 0) continue;
+    if (v === null) {
+      out[k] = null;
+      continue;
+    }
+    if (typeof v !== "number" || !Number.isFinite(v)) return { ok: false, error: `camera.${k} must be a finite number or null` };
+    const [lo, hi] = XC_CAMERA_RANGES[k];
+    const c = Math.min(hi, Math.max(lo, v));
+    if (c !== v) clamped.push(k);
+    out[k] = c;
+  }
+  if (src.intro !== void 0) {
+    if (src.intro !== null && typeof src.intro !== "boolean") return { ok: false, error: "camera.intro must be a boolean or null" };
+    out.intro = src.intro;
+  }
+  return { ok: true, camera: out, clamped };
+}
+function parseXcCameraParams(get) {
+  const camera = {};
+  const warnings = [];
+  const names = { fov: "cameraFov", distance: "cameraDistance", height: "cameraHeight" };
+  for (const k of XC_CAMERA_NUM_KEYS) {
+    const raw = get(names[k]);
+    if (raw === null) continue;
+    const t = raw.trim();
+    const n = t === "" ? NaN : Number(t);
+    if (!Number.isFinite(n)) {
+      warnings.push(`ignoring invalid ?${names[k]}=${raw}`);
+      continue;
+    }
+    const [lo, hi] = XC_CAMERA_RANGES[k];
+    const c = Math.min(hi, Math.max(lo, n));
+    if (c !== n) warnings.push(`?${names[k]}=${raw} is out of range [${lo}, ${hi}], clamped to ${c}`);
+    camera[k] = c;
+  }
+  const intro = get("cameraIntro");
+  if (intro !== null) {
+    const v = intro.trim().toLowerCase();
+    if (v === "1" || v === "true") camera.intro = true;
+    else if (v === "0" || v === "false") camera.intro = false;
+    else warnings.push(`ignoring invalid ?cameraIntro=${intro}`);
+  }
+  return { camera, warnings };
+}
 var XC_ID_RE = /^[a-z][a-z0-9_]{0,63}$/;
 var isXcId = (v) => typeof v === "string" && XC_ID_RE.test(v);
 var xcHasOwn = (o, k) => Object.prototype.hasOwnProperty.call(o, k);
+var XC_LANGS = ["zh-CN", "en", "ja"];
 function xcMessage(type, payload, id) {
   const m = { type, v: XC_PROTOCOL_VERSION, payload };
   if (id !== void 0) m.id = id;
@@ -257,7 +340,20 @@ var GestureGate = class {
 var FALLBACK_PLACEHOLDER = "data:image/svg+xml;utf8," + encodeURIComponent(
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 180"><defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#f6b8ae"/><stop offset="1" stop-color="#ea8377"/></linearGradient></defs><ellipse cx="60" cy="170" rx="34" ry="6" fill="#000" opacity=".12"/><circle cx="60" cy="48" r="26" fill="url(#g)" opacity=".75"/><path d="M26 160c2-40 18-62 34-62s32 22 34 62z" fill="url(#g)" opacity=".6"/></svg>'
 );
+var noSelect = (st) => {
+  st.setProperty("user-select", "none");
+  st.setProperty("-webkit-user-select", "none");
+  st.setProperty("-webkit-touch-callout", "none");
+  st.setProperty("-webkit-tap-highlight-color", "transparent");
+};
 var css = (v, d) => v === void 0 ? d : typeof v === "number" ? `${v}px` : v;
+var XC_DEFAULT_WIDTH = 600;
+var XC_DEFAULT_HEIGHT = 1080;
+var defaultWidthCss = (floating = false) => floating ? `min(${XC_DEFAULT_WIDTH}px, calc(100vw - 2 * var(--xc-offset-x, 16px)))` : `min(${XC_DEFAULT_WIDTH}px, 100vw)`;
+var defaultHeightCss = (floating = false) => {
+  const unit = typeof CSS !== "undefined" && typeof CSS.supports === "function" && CSS.supports("height", "1svh") ? "svh" : "vh";
+  return floating ? `min(${XC_DEFAULT_HEIGHT}px, calc(100${unit} - 2 * var(--xc-offset-y, 16px)))` : `min(${XC_DEFAULT_HEIGHT}px, 100${unit})`;
+};
 function createXiaochun(options) {
   if (typeof window === "undefined" || typeof document === "undefined") {
     throw new Error("[project-xiaochun] createXiaochun must run in a browser");
@@ -312,6 +408,16 @@ function createXiaochun(options) {
   }
   const uiParse = normalizeXcUiOption(options.ui);
   const uiParts = uiParse.parts;
+  const uiAutoHide = parseXcUiAutoHide(options.uiAutoHide);
+  if (options.uiAutoHide !== void 0 && uiAutoHide === void 0) console.warn(`[project-xiaochun] ignoring invalid uiAutoHide: ${String(options.uiAutoHide)} (use true | false | 'transparent')`);
+  let camera = {};
+  if (options.camera !== void 0) {
+    const r = normalizeXcCamera(options.camera);
+    if (r.ok) {
+      camera = r.camera;
+      if (r.clamped.length) console.warn(`[project-xiaochun] camera.${r.clamped.join(", camera.")} out of range, clamped (fov ${XC_CAMERA_RANGES.fov.join("\u2013")}, distance ${XC_CAMERA_RANGES.distance.join("\u2013")}, height ${XC_CAMERA_RANGES.height.join("\u2013")})`);
+    } else console.warn(`[project-xiaochun] ignoring invalid camera option: ${r.error}`);
+  }
   if (uiParse.legacy) console.warn(`[project-xiaochun] option "ui: true" is deprecated, use an array of parts, e.g. ui: ['chat', 'bubble', 'outfit', 'scene'].`);
   if (uiParse.unknown.length) console.warn(`[project-xiaochun] ignoring unknown ui part(s): ${uiParse.unknown.join(", ")} (known: ${XC_UI_PARTS.join(", ")})`);
   const outfitOpt = options.outfit ?? (isXcId(options.model) ? options.model : void 0);
@@ -326,11 +432,12 @@ function createXiaochun(options) {
   wrapper.setAttribute("data-xiaochun", "");
   const ws = wrapper.style;
   ws.position = position === "inline" ? "relative" : "fixed";
-  ws.width = css(options.width, "320px");
-  ws.height = css(options.height, "480px");
+  ws.width = css(options.width, defaultWidthCss(position !== "inline"));
+  ws.height = css(options.height, defaultHeightCss(position !== "inline"));
   ws.maxWidth = "100%";
   ws.overflow = "visible";
   ws.contain = "layout style";
+  noSelect(ws);
   ws.boxShadow = "var(--xc-shadow, none)";
   const applyWrapperBg = () => {
     ws.background = transparent ? "" : "var(--xc-bg, transparent)";
@@ -365,8 +472,8 @@ function createXiaochun(options) {
       img.src = options.placeholder || FALLBACK_PLACEHOLDER;
       img.alt = "Project XiaoChun";
       img.decoding = "async";
-      img.width = 320;
-      img.height = 480;
+      img.width = XC_DEFAULT_WIDTH;
+      img.height = XC_DEFAULT_HEIGHT;
       placeholderEl = img;
     }
     const ps = placeholderEl.style;
@@ -380,6 +487,7 @@ function createXiaochun(options) {
     ps.transition = "opacity .25s ease";
     ps.pointerEvents = "auto";
     ps.cursor = lazy === false ? "default" : "pointer";
+    noSelect(ps);
     placeholderEl.addEventListener("click", () => activate());
     wrapper.appendChild(placeholderEl);
   }
@@ -538,6 +646,11 @@ function createXiaochun(options) {
     if (transparent) u.searchParams.set("transparent", "1");
     if (uiParts.length) u.searchParams.set("ui", uiParts.join(","));
     if (options.lang) u.searchParams.set("lang", options.lang);
+    if (uiAutoHide !== void 0) u.searchParams.set("uiAutoHide", String(uiAutoHide));
+    if (typeof camera.fov === "number") u.searchParams.set("cameraFov", String(camera.fov));
+    if (typeof camera.distance === "number") u.searchParams.set("cameraDistance", String(camera.distance));
+    if (typeof camera.height === "number") u.searchParams.set("cameraHeight", String(camera.height));
+    if (typeof camera.intro === "boolean") u.searchParams.set("cameraIntro", camera.intro ? "1" : "0");
     if (options.heavy) u.searchParams.set("heavy", options.heavy);
     if (options.controls === false) u.searchParams.set("controls", "0");
     if (initialScene && isXcId(initialScene)) u.searchParams.set("scene", initialScene);
@@ -569,6 +682,7 @@ function createXiaochun(options) {
     s.colorScheme = "normal";
     s.borderRadius = `var(--xc-radius, ${radiusValue()})`;
     f.setAttribute("part", "iframe");
+    noSelect(s);
     s.opacity = "0";
     s.transition = "opacity .25s ease";
     s.pointerEvents = passthrough ? "none" : "auto";
@@ -674,6 +788,9 @@ function createXiaochun(options) {
         ack(data.id);
         break;
       }
+      case "xc.lang-changed":
+        emit("lang-changed", data.payload);
+        break;
       case "xc.prefetched":
         ack(data.id, data.payload);
         break;
@@ -918,6 +1035,7 @@ function createXiaochun(options) {
     emit(activeGesture.kind, { phase: "end", ...b });
     activeGesture = null;
     lockSelection(false);
+    saveBox();
   }
   function onGesture(kind, raw) {
     if (destroyed || !caps?.gestures) return;
@@ -946,6 +1064,7 @@ function createXiaochun(options) {
     if (p.phase === "end") {
       activeGesture = null;
       lockSelection(false);
+      saveBox();
     }
   }
   function syncGestures() {
@@ -970,11 +1089,63 @@ function createXiaochun(options) {
   const onWindowResize = () => {
     if (!userMoved || activeGesture || destroyed) return;
     const cur = readBox();
-    const fit = fitBox(cur, viewport());
+    const vp = viewport();
+    const fit = position === "inline" ? { ...fitBox({ ...cur, top: 0 }, { width: vp.width, height: Number.MAX_SAFE_INTEGER }), top: Math.max(cur.top, -window.scrollY) } : fitBox(cur, vp);
     if (fit.left === cur.left && fit.top === cur.top && fit.width === cur.width && fit.height === cur.height) return;
     applyBox(fit, position === "inline" ? { left: cur.left - inlineShift.x, top: cur.top - inlineShift.y } : null, fit.width !== cur.width || fit.height !== cur.height);
   };
   window.addEventListener("resize", onWindowResize, { passive: true });
+  const boxKey = options.persistBox === true ? "xiaochun:box" : typeof options.persistBox === "string" && options.persistBox ? `xiaochun:box:${options.persistBox}` : null;
+  const saveBox = () => {
+    if (!boxKey) return;
+    try {
+      const b = readBox();
+      const at = position === "inline" ? inlineShift : { x: b.left, y: b.top };
+      window.localStorage.setItem(boxKey, JSON.stringify({ v: 1, mode: position, x: Math.round(at.x), y: Math.round(at.y), width: Math.round(b.width), height: Math.round(b.height) }));
+    } catch {
+    }
+  };
+  const loadBox = () => {
+    if (!boxKey) return null;
+    try {
+      const raw = window.localStorage.getItem(boxKey);
+      if (raw === null) return null;
+      let o = null;
+      try {
+        o = JSON.parse(raw);
+      } catch {
+      }
+      const ok = (v, lo, hi) => typeof v === "number" && Number.isFinite(v) && v >= lo && v <= hi;
+      if (o && o.v === 1 && o.mode === position && ok(o.x, -1e5, 1e5) && ok(o.y, -1e5, 1e5) && ok(o.width, 1, 1e5) && ok(o.height, 1, 1e5)) {
+        return { x: o.x, y: o.y, width: o.width, height: o.height };
+      }
+      window.localStorage.removeItem(boxKey);
+    } catch {
+    }
+    return null;
+  };
+  function restoreBox() {
+    if (!boxKey || !draggableOn && resizeLimits === null) return;
+    const st = loadBox();
+    if (!st) return;
+    const vp = viewport();
+    const lim = resizeLimits ?? DEFAULT_RESIZE_LIMITS;
+    const cur = readBox();
+    const useW = resizeLimits !== null && options.width === void 0;
+    const useH = resizeLimits !== null && options.height === void 0;
+    const clampN = (v, lo, hi) => Math.min(Math.max(v, lo), Math.max(lo, hi));
+    const width = useW ? clampN(st.width, lim.minWidth, Math.min(lim.maxWidth, vp.width)) : cur.width;
+    const height = useH ? clampN(st.height, lim.minHeight, Math.min(lim.maxHeight, vp.height)) : cur.height;
+    if (position === "inline") {
+      const base = { left: cur.left - inlineShift.x, top: cur.top - inlineShift.y };
+      const left = clampN(base.left + st.x, 0, vp.width - width);
+      const top = Math.max(base.top + st.y, -window.scrollY);
+      applyBox({ left, top, width, height }, base, useW || useH);
+    } else {
+      applyBox(fitBox({ left: st.x, top: st.y, width, height }, vp), null, useW || useH);
+    }
+  }
+  restoreBox();
   scheduleLazy();
   const api = {
     element: wrapper,
@@ -1031,11 +1202,44 @@ function createXiaochun(options) {
     setConfig: (cfg) => send("xc.setConfig", cfg),
     setSize(width, height) {
       if (destroyed) return;
-      ws.width = css(width, "320px");
-      ws.height = css(height, "480px");
+      ws.width = css(width, defaultWidthCss(position !== "inline"));
+      ws.height = css(height, defaultHeightCss(position !== "inline"));
+      if (ws.maxWidth === "none") ws.maxWidth = "100%";
       invalidateRect();
     },
     getBox: () => readBox(),
+    clearPersistedBox(opts) {
+      if (boxKey) {
+        try {
+          window.localStorage.removeItem(boxKey);
+        } catch {
+        }
+      }
+      if (destroyed || opts?.reset !== true) return;
+      endActiveGesture();
+      ws.width = css(options.width, defaultWidthCss(position !== "inline"));
+      ws.height = css(options.height, defaultHeightCss(position !== "inline"));
+      ws.maxWidth = "100%";
+      if (position === "inline") {
+        inlineShift = { x: 0, y: 0 };
+        ws.removeProperty("translate");
+      } else {
+        ws.left = "";
+        ws.top = "";
+        ws.right = "";
+        ws.bottom = "";
+        if (position === "bottom-right") {
+          ws.right = "var(--xc-offset-x, 16px)";
+          ws.bottom = "var(--xc-offset-y, 16px)";
+        }
+        if (position === "bottom-left") {
+          ws.left = "var(--xc-offset-x, 16px)";
+          ws.bottom = "var(--xc-offset-y, 16px)";
+        }
+      }
+      userMoved = false;
+      invalidateRect();
+    },
     setBorderRadius(radius) {
       radiusOpt = radius;
       applyRadius();
@@ -1126,14 +1330,20 @@ var OBSERVED = [
   "placeholder",
   "heavy",
   "ui",
+  "ui-autohide",
+  "camera-fov",
+  "camera-distance",
+  "camera-height",
+  "camera-intro",
   "controls",
   "allowed-origins",
   "cross-origin-isolated",
   "persist",
+  "persist-box",
   "allow-custom-model",
   "prefetch"
 ];
-var REBUILD = /* @__PURE__ */ new Set(["src", "position", "lazy", "placeholder", "heavy", "ui", "controls", "allowed-origins", "transparent", "cross-origin-isolated", "persist", "allow-custom-model", "prefetch"]);
+var REBUILD = /* @__PURE__ */ new Set(["src", "position", "lazy", "placeholder", "heavy", "ui", "ui-autohide", "controls", "allowed-origins", "transparent", "cross-origin-isolated", "persist", "persist-box", "allow-custom-model", "prefetch"]);
 function radiusAttr(v) {
   if (v === null || v.trim() === "") return void 0;
   const t = v.trim();
@@ -1149,22 +1359,37 @@ function prefetchAttr(v) {
   if (v === "" || v === "true") return true;
   return v.split(",").map((s) => s.trim()).filter(Boolean);
 }
+function persistBoxAttr(v) {
+  if (v === null || v === "false" || v === "0") return void 0;
+  if (v === "" || v === "true" || v === "1") return true;
+  return v;
+}
 function uiAttr(v) {
   if (v === null || v === "false" || v === "0") return void 0;
   if (v === "" || v === "true" || v === "1") return true;
   return v.split(",").map((s) => s.trim()).filter(Boolean);
 }
+function cameraAttrs(el) {
+  const num = (name) => {
+    const v = el.getAttribute(name);
+    if (v === null || v.trim() === "") return null;
+    const n = Number(v);
+    return Number.isFinite(n) ? n : null;
+  };
+  const i = el.getAttribute("camera-intro");
+  return { fov: num("camera-fov"), distance: num("camera-distance"), height: num("camera-height"), intro: i === null ? null : i !== "false" && i !== "0" };
+}
 function parsePx(v) {
   const m = v?.trim().match(/^(\d+(?:\.\d+)?)\s*x\s*(\d+(?:\.\d+)?)$/i);
   return m ? { w: Number(m[1]), h: Number(m[2]) } : void 0;
 }
 function parseSize(v) {
-  if (!v) return { width: "320px", height: "480px" };
+  if (!v) return { width: void 0, height: void 0 };
   const m = v.trim().split(/x/i);
   const px = (s) => /^\d+(\.\d+)?$/.test(s) ? `${s}px` : s;
   if (m.length >= 2) return { width: px(m[0]), height: px(m[1]) };
   const w = parseFloat(m[0]);
-  return Number.isFinite(w) && /^\d+(\.\d+)?$/.test(m[0]) ? { width: `${w}px`, height: `${Math.round(w * 1.5)}px` } : { width: m[0], height: "480px" };
+  return Number.isFinite(w) && /^\d+(\.\d+)?$/.test(m[0]) ? { width: `${w}px`, height: `${Math.round(w * 1.5)}px` } : { width: m[0], height: void 0 };
 }
 function createElementClass() {
   class XiaochunAvatarElementImpl extends HTMLElement {
@@ -1219,6 +1444,8 @@ function createElementClass() {
       } else if (name === "border-radius") c.setBorderRadius(radiusAttr(newV));
       else if (name === "draggable") c.setDraggable(boolAttr(this, "draggable", false));
       else if (name === "resizable" || name === "min-size" || name === "max-size") c.setResizable(this.resizableOption());
+      else if (name.startsWith("camera-")) void c.setConfig({ camera: cameraAttrs(this) }).catch(() => {
+      });
       else if (name === "mic") void c.mic(boolAttr(this, "mic", false)).catch(() => {
       });
       else if (name === "paused") {
@@ -1251,10 +1478,13 @@ function createElementClass() {
         outfit: this.getAttribute("outfit") ?? this.getAttribute("model") ?? void 0,
         scene: this.getAttribute("scene") ?? void 0,
         persist: this.getAttribute("persist") || void 0,
+        persistBox: persistBoxAttr(this.getAttribute("persist-box")),
         allowCustomModel: boolAttr(this, "allow-custom-model", false),
         prefetch: prefetchAttr(this.getAttribute("prefetch")),
         heavy: this.getAttribute("heavy") ?? void 0,
         ui: uiAttr(this.getAttribute("ui")),
+        uiAutoHide: parseXcUiAutoHide(this.getAttribute("ui-autohide")),
+        camera: cameraAttrs(this),
         controls: boolAttr(this, "controls", true),
         crossOriginIsolated: boolAttr(this, "cross-origin-isolated", false)
       });
@@ -1268,6 +1498,7 @@ function createElementClass() {
       fwd("error", "xc-error");
       fwd("outfit-changed", "xc-outfit-changed");
       fwd("scene-changed", "xc-scene-changed");
+      fwd("lang-changed", "xc-lang-changed");
       fwd("move", "xc-move");
       fwd("resize", "xc-resize");
       if (boolAttr(this, "paused", false)) c.pause();
@@ -1307,6 +1538,9 @@ function createElementClass() {
     getScenes() {
       return this.requireClient().getScenes();
     }
+    clearPersistedBox(opts) {
+      this.client?.clearPersistedBox(opts);
+    }
     prefetch(ids) {
       return this.requireClient().prefetch(ids);
     }