@firetable/project-xiaochun 0.1.15 → 0.1.16

package/dist/element.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;
@@ -31,7 +31,7 @@ var XC_PROTOCOL_VERSION = 1;
 var XC_DEFAULT_ORIGIN = "https://xiaochun.firetable.tech";
 var XC_DEFAULT_SRC = `${XC_DEFAULT_ORIGIN}/embed`;
 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) {
@@ -49,6 +49,49 @@ function normalizeXcUiOption(v) {
   if (Array.isArray(v)) return parseXcUiList(v);
   return { parts: [], unknown: [], legacy: false };
 }
+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;
+}
+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 };
+}
 var XC_ID_RE = /^[a-z][a-z0-9_]{0,63}$/;
 var isXcId = (v) => typeof v === "string" && XC_ID_RE.test(v);
 function xcMessage(type, payload, id) {
@@ -165,7 +208,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");
@@ -220,6 +276,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);
@@ -234,11 +300,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)";
@@ -273,8 +340,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;
@@ -288,6 +355,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);
   }
@@ -446,6 +514,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);
@@ -477,6 +550,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";
@@ -582,6 +656,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;
@@ -826,6 +903,7 @@ function createXiaochun(options) {
     emit(activeGesture.kind, { phase: "end", ...b });
     activeGesture = null;
     lockSelection(false);
+    saveBox();
   }
   function onGesture(kind, raw) {
     if (destroyed || !caps?.gestures) return;
@@ -854,6 +932,7 @@ function createXiaochun(options) {
     if (p.phase === "end") {
       activeGesture = null;
       lockSelection(false);
+      saveBox();
     }
   }
   function syncGestures() {
@@ -878,11 +957,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,
@@ -939,11 +1070,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();
@@ -1034,14 +1198,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();
@@ -1057,22 +1227,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 {
@@ -1127,6 +1312,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") {
@@ -1159,10 +1346,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)
       });
@@ -1176,6 +1366,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();
@@ -1215,6 +1406,9 @@ function createElementClass() {
     getScenes() {
       return this.requireClient().getScenes();
     }
+    clearPersistedBox(opts) {
+      this.client?.clearPersistedBox(opts);
+    }
     prefetch(ids) {
       return this.requireClient().prefetch(ids);
     }