dsh-xrxs-lingting 0.4.0-dev.49 → 0.4.0-dev.51

package/README.md

@@ -98,7 +98,7 @@ LINGTING_XIN_PROBE=1 nohup "/path/to/DSH Desktop Dev.app/Contents/MacOS/DSH Desk
 
 ## 客户端兼容性验证
 
-`0.4.0-dev.48` 起不再要求宿主提供旧版补丁的 `layout.business`。标准薪灵客户端通过公开的 `shell.overlay` 插槽显示灵听页面，页面中的「返回聊天」关闭页面；提供业务页扩展的旧宿主仍沿用原入口。
+`0.4.0-dev.48` 起不再要求宿主提供旧版补丁的 `layout.business`。`0.4.0-dev.50` 起，标准薪灵客户端通过渲染器公开的 `[data-slot="conversation"]` 标记，将原有灵听页面挂载到主内容区：保留侧栏，暂时隐藏而不卸载聊天，返回时恢复原聊天和草稿。弹窗、列表、实时转写仍复用原组件；转写面板继续使用 `shell.overlay`。提供业务页扩展的旧宿主仍沿用原入口。
 
 发布前除单元测试外，应在构建后对目标薪灵源码运行客户端产物冒烟，验证真实布局对象、公开插槽、页面打开及返回聊天：
 
@@ -108,3 +108,7 @@ npm run smoke:client -- /path/to/cinlyn-desktop
 ```
 
 该检查不代替安装后对授权、录音、转写和回放的人工验证。
+
+布局回归验证：`node scripts/smoke-layout-browser.mjs <playwright/index.mjs 路径>`，使用 Chrome 无头浏览器运行真实插件产物，验证页面边界、弹窗居中、转写面板层级、窗口缩放与卸载后聊天恢复。使用合成录音状态，不访问业务数据、不采集声音。
+
+设备切换：支持的桌面原生模块会在默认输出变化时重新连接系统采集，插件重新采样并替换默认麦克风输入，保留同一录音与转写连接。操作系统切换设备期间可能存在短暂音频缺口；持续无法恢复才报错暂停。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-xrxs-lingting",
-  "version": "0.4.0-dev.49",
+  "version": "0.4.0-dev.51",
   "type": "module",
   "scripts": {
     "dev": "vite --host 127.0.0.1",

package/plugin-dist/client.js

@@ -30,7 +30,7 @@ module.exports = __toCommonJS(client_exports);
 var define_import_meta_env_default = { VITE_XIN_PACKAGED: "1" };
 
 // src/plugin/client.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react2 = require("react");
@@ -1606,6 +1606,117 @@ function toSegment(segment) {
   return { id: segment.id, speaker: speakerLabel(segment.speakerId), text: segment.text, final: segment.final };
 }
 
+// src/audio/microphone-switch.ts
+function followDefaultMicrophone(options) {
+  let current = options.initial;
+  let stopped = false;
+  let running = false;
+  let queued = false;
+  let cancelAcquire;
+  let cancelDelay;
+  const delay = () => new Promise((resolve) => {
+    const timer = setTimeout(() => {
+      cancelDelay = void 0;
+      resolve();
+    }, 250);
+    cancelDelay = () => {
+      clearTimeout(timer);
+      cancelDelay = void 0;
+      resolve();
+    };
+  });
+  const watch = (stream) => {
+    stream.getAudioTracks().forEach((track) => {
+      track.onended = () => {
+        void reconnect();
+      };
+    });
+  };
+  const reconnect = async () => {
+    if (stopped) return;
+    if (running) {
+      queued = true;
+      return;
+    }
+    running = true;
+    const began = Date.now();
+    try {
+      do {
+        queued = false;
+        try {
+          const next = await new Promise((resolve, reject) => {
+            let settled = false;
+            const finishError = (error) => {
+              if (settled) return;
+              settled = true;
+              clearTimeout(timer);
+              cancelAcquire = void 0;
+              reject(error);
+            };
+            const timer = setTimeout(() => finishError(new Error("Microphone recovery timed out")), Math.max(0, 8e3 - (Date.now() - began)));
+            cancelAcquire = () => finishError(new Error("Recording stopped"));
+            Promise.resolve().then(options.acquire).then((stream) => {
+              if (settled || stopped) {
+                stream.getTracks().forEach((track) => track.stop());
+                return;
+              }
+              settled = true;
+              clearTimeout(timer);
+              cancelAcquire = void 0;
+              resolve(stream);
+            }, finishError);
+          });
+          if (stopped) {
+            next.getTracks().forEach((track) => track.stop());
+            return;
+          }
+          if (!next.getAudioTracks().some((track) => track.readyState === "live")) {
+            next.getTracks().forEach((track) => track.stop());
+            throw new Error("Microphone is not live");
+          }
+          const previous = current;
+          try {
+            options.replace(next, previous);
+          } catch (error) {
+            next.getTracks().forEach((track) => track.stop());
+            throw error;
+          }
+          current = next;
+          previous.getTracks().forEach((track) => {
+            track.onended = null;
+            track.stop();
+          });
+          watch(current);
+        } catch {
+          if (stopped) return;
+          if (Date.now() - began >= 8e3) {
+            if (!current.getAudioTracks().some((track) => track.readyState === "live")) options.failed();
+            return;
+          }
+          await delay();
+          queued = true;
+        }
+      } while (queued && !stopped);
+    } finally {
+      running = false;
+    }
+  };
+  const changed = () => {
+    void reconnect();
+  };
+  watch(current);
+  options.devices.addEventListener?.("devicechange", changed);
+  return () => {
+    stopped = true;
+    cancelDelay?.();
+    cancelAcquire?.();
+    options.devices.removeEventListener?.("devicechange", changed);
+    current.getTracks().forEach((track) => {
+      track.onended = null;
+    });
+  };
+}
+
 // src/audio/worklet-source.ts
 var captureWorkletSource = `
 class LingtingCaptureProcessor extends AudioWorkletProcessor {
@@ -1691,7 +1802,7 @@ class NativeSystemSource extends AudioWorkletProcessor {
   accept(data) {
       if (this.failed) return;
       if (!data || !(data.samples instanceof Float32Array) || !Number.isFinite(data.sampleRate) || data.sampleRate < 8000 || data.sampleRate > 192000) return;
-      if (this.rate && this.rate !== data.sampleRate) { this.fail('\u7CFB\u7EDF\u58F0\u97F3\u91C7\u6837\u7387\u5DF2\u53D8\u5316\uFF0C\u8BF7\u91CD\u65B0\u5F00\u59CB\u5F55\u97F3\u3002'); return; }
+      if (this.rate && this.rate !== data.sampleRate) { this.read = 0; this.write = 0; this.started = false; this.buffer.fill(0); }
       this.rate = data.sampleRate;
       // Bound latency, not just memory. After a render stall, retain the newest
       // 100 ms instead of spending minutes playing stale audio or killing capture.
@@ -1784,6 +1895,7 @@ var MeetingCapture = class {
   emitting = false;
   stopSystem = null;
   systemNode = null;
+  stopMicrophoneSwitch = null;
   async start(onChunk, onError) {
     if (this.context || this.starting) throw new Error("\u91C7\u96C6\u5DF2\u5728\u8FDB\u884C\u4E2D\u3002");
     this.starting = true;
@@ -1822,7 +1934,6 @@ var MeetingCapture = class {
       for (const stream of this.streams) {
         for (const track of stream.getAudioTracks()) {
           if (track.readyState !== "live") throw new Error("\u97F3\u9891\u8BBE\u5907\u5DF2\u65AD\u5F00\uFF0C\u8BF7\u91CD\u65B0\u5F00\u59CB\u5F55\u97F3\u3002");
-          track.onended = () => fail(stream === microphone ? "\u9EA6\u514B\u98CE\u5DF2\u65AD\u5F00\uFF0C\u5F55\u97F3\u5DF2\u6682\u505C\uFF0C\u8BF7\u68C0\u67E5\u8BBE\u5907\u540E\u7EE7\u7EED\u3002" : "\u7CFB\u7EDF\u58F0\u97F3\u91C7\u96C6\u5DF2\u505C\u6B62\uFF0C\u5F55\u97F3\u5DF2\u6682\u505C\uFF0C\u8BF7\u91CD\u65B0\u6388\u6743\u540E\u7EE7\u7EED\u3002");
         }
       }
       const context = new AudioContext();
@@ -1836,7 +1947,7 @@ var MeetingCapture = class {
           return;
         }
         stalledSince ??= Date.now();
-        if (Date.now() - stalledSince >= 5e3) {
+        if (Date.now() - stalledSince >= 8e3) {
           fail("\u97F3\u9891\u5904\u7406\u6062\u590D\u8D85\u65F6\uFF0C\u8BF7\u91CD\u65B0\u5F00\u59CB\u5F55\u97F3\u3002");
           return;
         }
@@ -1846,7 +1957,8 @@ var MeetingCapture = class {
           return;
         }
         recovering = true;
-        void context.resume().catch(() => fail("\u97F3\u9891\u5904\u7406\u65E0\u6CD5\u6062\u590D\uFF0C\u8BF7\u91CD\u65B0\u5F00\u59CB\u5F55\u97F3\u3002")).finally(() => {
+        void context.resume().catch(() => {
+        }).finally(() => {
           recovering = false;
         });
       };
@@ -1924,6 +2036,24 @@ var MeetingCapture = class {
         this.nodes.push(source, analyser, gain);
         analysers.push(analyser);
       }
+      this.stopMicrophoneSwitch = followDefaultMicrophone({
+        devices,
+        initial: microphone,
+        acquire: () => devices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true, autoGainControl: true } }),
+        replace: (next, previous) => {
+          if (generation !== this.generation) throw new Error("\u5F55\u97F3\u5DF2\u53D6\u6D88\u3002");
+          const replacement = context.createMediaStreamSource(next);
+          replacement.connect(analysers[0]);
+          const oldSource = sources[0];
+          oldSource.disconnect();
+          sources[0] = replacement;
+          this.nodes = this.nodes.filter((item) => item !== oldSource);
+          this.nodes.push(replacement);
+          this.streams = this.streams.filter((item) => item !== previous);
+          this.streams.push(next);
+        },
+        failed: () => fail("\u9EA6\u514B\u98CE\u5207\u6362\u540E\u672A\u80FD\u6062\u590D\uFF0C\u5F55\u97F3\u5DF2\u6682\u505C\uFF0C\u8BF7\u68C0\u67E5\u8BBE\u5907\u8FDE\u63A5\u3002")
+      });
       const mute = context.createGain();
       mute.gain.value = 0;
       node.connect(mute);
@@ -1970,6 +2100,8 @@ var MeetingCapture = class {
   }
   async stop() {
     ++this.generation;
+    this.stopMicrophoneSwitch?.();
+    this.stopMicrophoneSwitch = null;
     this.emitting = false;
     if (this.timer) clearInterval(this.timer);
     this.timer = null;
@@ -5419,11 +5551,72 @@ function createBusinessNavigation() {
   };
 }
 
+// src/plugin/business-surface.tsx
+var import_react22 = require("react");
+var import_react_dom = require("react-dom");
+function mountBusinessSurface(doc) {
+  const conversation = doc.querySelector('[data-slot="conversation"]');
+  const center = conversation?.parentElement;
+  if (!conversation || !center) return null;
+  const target = doc.createElement("section");
+  target.className = "lt-business-surface";
+  target.setAttribute("aria-label", "\u7075\u542C");
+  const display = conversation.style.getPropertyValue("display");
+  const displayPriority = conversation.style.getPropertyPriority("display");
+  const position = center.style.getPropertyValue("position");
+  const positionPriority = center.style.getPropertyPriority("position");
+  const inert = conversation.inert;
+  conversation.style.setProperty("display", "none", "important");
+  conversation.inert = true;
+  center.style.setProperty("position", "relative");
+  center.appendChild(target);
+  let disposed = false;
+  return { target, dispose() {
+    if (disposed) return;
+    disposed = true;
+    target.remove();
+    if (display) conversation.style.setProperty("display", display, displayPriority);
+    else conversation.style.removeProperty("display");
+    conversation.inert = inert;
+    if (position) center.style.setProperty("position", position, positionPriority);
+    else center.style.removeProperty("position");
+  } };
+}
+function BusinessSurface({ children, onClose }) {
+  const [target, setTarget] = (0, import_react22.useState)(null);
+  (0, import_react22.useLayoutEffect)(() => {
+    let mounted = null;
+    const attach = () => {
+      if (mounted?.target.isConnected) return;
+      mounted?.dispose();
+      mounted = mountBusinessSurface(document);
+      setTarget(mounted?.target ?? null);
+    };
+    attach();
+    const onSidebarClick = (event) => {
+      const element = event.target instanceof Element ? event.target : null;
+      const button = element?.closest("button");
+      if (!button?.closest('[data-slot="sidebar"]')) return;
+      const label = button.getAttribute("aria-label")?.trim();
+      if (label && /^(新会话|新建会话|New session)$/i.test(label)) onClose();
+    };
+    document.addEventListener("click", onSidebarClick, true);
+    const observer = new MutationObserver(attach);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      document.removeEventListener("click", onSidebarClick, true);
+      observer.disconnect();
+      mounted?.dispose();
+    };
+  }, []);
+  return target ? (0, import_react_dom.createPortal)(children, target) : null;
+}
+
 // src/plugin/embedded.css
 var tag3 = document.createElement("style");
 tag3.dataset.plugin = "dsh-xrxs-lingting";
 tag3.dataset.pluginCss = "dsh-xrxs-lingting/embedded.css";
-tag3.textContent = ".lingting-root { color-scheme: light; }\n/* Host \u9002\u914D\u5C42\u72B6\u6001\u63D0\u793A\uFF08\u6388\u6743/\u8EAB\u4EFD/\u76EE\u7684\u5730\u672A\u5C31\u7EEA\uFF09\uFF1A\u56FA\u5B9A\u9876\u90E8\uFF0C\u53EF\u5173\u95ED\uFF0C\u4E0D\u53C2\u4E0E\u9875\u9762\u5E03\u5C40 */\n.lt-host-notice { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: min(680px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid #e7e0fa; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgb(40 28 74 / 16%); color: #605972; font-size: 13px; line-height: 1.5; }\n.lt-host-notice-text { flex: 1; }\n.lt-host-notice-close { flex-shrink: 0; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; cursor: pointer; }\n.lt-host-notice-close:hover { background: #6650d814; }\n.lt-host-notice-close:focus-visible { outline: 2px solid #6650d8; outline-offset: 2px; }\n/* \u5D4C\u5165\u6A21\u5F0F\u4E0B\u6839\u5143\u7D20\u5373 .app\uFF08lingting-root app \u540C\u5143\u7D20\uFF09\uFF0C\u89C4\u5219\u9700\u7528\u7EC4\u5408\u9009\u62E9\u5668\uFF1B\u4FDD\u7559\u540E\u4EE3\u5F62\u5F0F\u517C\u5BB9\u53CC\u5C42\u5305\u88F9\u7ED3\u6784 */\n.lingting-root[data-embedded] { height: 100%; min-height: 0; container-type: inline-size; }\n.lingting-root[data-embedded].app, .lingting-root[data-embedded] .app { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; padding-bottom: 0; }\n.lingting-root[data-embedded].app .app-header, .lingting-root[data-embedded] .app-header { height: 66px; flex-shrink: 0; }\n.lingting-root[data-embedded].app .header-inner, .lingting-root[data-embedded] .header-inner { padding: 0 28px; max-width: none; }\n.lingting-root[data-embedded].app .brand-caption, .lingting-root[data-embedded] .brand-caption { display: none; }\n.lingting-root[data-embedded].app .main-content, .lingting-root[data-embedded] .main-content { width: 100%; max-width: none; min-height: 0; flex: 1; overflow: auto; padding: 30px 28px 0; scrollbar-width: thin; }\n\n.lingting-root[data-embedded].app .toast, .lingting-root[data-embedded] .toast { position: absolute; top: 77px; }\n.lingting-root[data-global-status] { flex-shrink: 0; border-top: 1px solid #e7e0fa; background: white; padding: 0 24px; }\n.lingting-root[data-global-status] .recording-controls.compact { min-height: 76px; padding: 12px 0; }\n.lingting-root[data-global-status] .error-notice { margin: 8px 0 0; }\n.lingting-sidebar-entry { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--dsw-alias-text-primary, #605972); padding: 10px 12px; width: 100%; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14px; }\n.lingting-sidebar-entry:hover, .lingting-sidebar-entry[data-active] { background: #6650d814; color: #6650d8; }\n.lingting-sidebar-entry:focus-visible { outline: 2px solid #6650d8; outline-offset: 2px; }\n@container (max-width: 900px) {\n  .lingting-root[data-embedded] .overview-note { display: none; }\n  .lingting-root[data-embedded] .overview { grid-template-columns: 1fr 1fr; }\n  .lingting-root[data-embedded] .list-heading { flex-wrap: wrap; }\n  .lingting-root[data-embedded] .source-label { display: none; }\n}\n\n/* Standard DSH has no layout.business extension; keep the page in its public overlay slot. */\n.lt-business-surface { position: fixed; inset: 48px 12px 12px; z-index: 40; min-width: 0; overflow: hidden; border: 1px solid #e7e0fa; border-radius: 12px; background: #fff; box-shadow: 0 8px 32px #2c245221; pointer-events: auto; -webkit-app-region: no-drag; }\n";
+tag3.textContent = ".lingting-root { color-scheme: light; }\n/* Host \u9002\u914D\u5C42\u72B6\u6001\u63D0\u793A\uFF08\u6388\u6743/\u8EAB\u4EFD/\u76EE\u7684\u5730\u672A\u5C31\u7EEA\uFF09\uFF1A\u56FA\u5B9A\u9876\u90E8\uFF0C\u53EF\u5173\u95ED\uFF0C\u4E0D\u53C2\u4E0E\u9875\u9762\u5E03\u5C40 */\n.lt-host-notice { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: min(680px, calc(100vw - 32px)); padding: 10px 14px; border: 1px solid #e7e0fa; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgb(40 28 74 / 16%); color: #605972; font-size: 13px; line-height: 1.5; }\n.lt-host-notice-text { flex: 1; }\n.lt-host-notice-close { flex-shrink: 0; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 6px; cursor: pointer; }\n.lt-host-notice-close:hover { background: #6650d814; }\n.lt-host-notice-close:focus-visible { outline: 2px solid #6650d8; outline-offset: 2px; }\n/* \u5D4C\u5165\u6A21\u5F0F\u4E0B\u6839\u5143\u7D20\u5373 .app\uFF08lingting-root app \u540C\u5143\u7D20\uFF09\uFF0C\u89C4\u5219\u9700\u7528\u7EC4\u5408\u9009\u62E9\u5668\uFF1B\u4FDD\u7559\u540E\u4EE3\u5F62\u5F0F\u517C\u5BB9\u53CC\u5C42\u5305\u88F9\u7ED3\u6784 */\n.lingting-root[data-embedded] { height: 100%; min-height: 0; container-type: inline-size; }\n.lingting-root[data-embedded].app, .lingting-root[data-embedded] .app { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; padding-bottom: 0; }\n.lingting-root[data-embedded].app .app-header, .lingting-root[data-embedded] .app-header { height: 66px; flex-shrink: 0; }\n.lingting-root[data-embedded].app .header-inner, .lingting-root[data-embedded] .header-inner { padding: 0 28px; max-width: none; }\n.lingting-root[data-embedded].app .brand-caption, .lingting-root[data-embedded] .brand-caption { display: none; }\n.lingting-root[data-embedded].app .main-content, .lingting-root[data-embedded] .main-content { width: 100%; max-width: none; min-height: 0; flex: 1; overflow: auto; padding: 30px 28px 0; scrollbar-width: thin; }\n\n.lingting-root[data-embedded].app .toast, .lingting-root[data-embedded] .toast { position: absolute; top: 77px; }\n.lingting-root[data-global-status] { flex-shrink: 0; border-top: 1px solid #e7e0fa; background: white; padding: 0 24px; }\n.lingting-root[data-global-status] .recording-controls.compact { min-height: 76px; padding: 12px 0; }\n.lingting-root[data-global-status] .error-notice { margin: 8px 0 0; }\n.lingting-sidebar-entry { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--dsw-alias-text-primary, #605972); padding: 10px 12px; width: 100%; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14px; }\n.lingting-sidebar-entry:hover, .lingting-sidebar-entry[data-active] { background: #6650d814; color: #6650d8; }\n.lingting-sidebar-entry:focus-visible { outline: 2px solid #6650d8; outline-offset: 2px; }\n@container (max-width: 900px) {\n  .lingting-root[data-embedded] .overview-note { display: none; }\n  .lingting-root[data-embedded] .overview { grid-template-columns: 1fr 1fr; }\n  .lingting-root[data-embedded] .list-heading { flex-wrap: wrap; }\n  .lingting-root[data-embedded] .source-label { display: none; }\n}\n\n/* Use the real center column, preserving the host sidebar and conversation state. */\n.lt-business-surface { position: absolute; inset: 0; z-index: 1; min-width: 0; overflow: hidden; background: #f8f9fc; pointer-events: auto; -webkit-app-region: no-drag; }\n/* Host reset styles must not remove the native dialog's centered placement. */\n.lingting-root .modal { margin: auto; background: #fff; }\n";
 document.querySelectorAll("style[data-plugin-css=" + JSON.stringify("dsh-xrxs-lingting/embedded.css") + "]").forEach((old) => old.remove());
 document.head.appendChild(tag3);
 
@@ -5431,7 +5624,7 @@ document.head.appendChild(tag3);
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var ID = "dsh-xrxs-lingting";
 var inject = ["slots", "layout"];
-var PanelBoundary = class extends import_react22.Component {
+var PanelBoundary = class extends import_react23.Component {
   state = { failed: false };
   static getDerivedStateFromError() {
     return { failed: true };
@@ -5472,8 +5665,8 @@ async function apply(ctx) {
   }));
   const unregisterPage = business.register(ID);
   function Entry({ wide }) {
-    const panel = (0, import_react22.useSyncExternalStore)(controller.subscribe, controller.getSnapshot);
-    const layout = (0, import_react22.useSyncExternalStore)(business.subscribe, business.getSnapshot);
+    const panel = (0, import_react23.useSyncExternalStore)(controller.subscribe, controller.getSnapshot);
+    const layout = (0, import_react23.useSyncExternalStore)(business.subscribe, business.getSnapshot);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("button", { type: "button", className: "lingting-sidebar-entry", "data-active": layout.activeId === ID || panel.open || void 0, title: "\u7075\u542C", "aria-label": "\u7075\u542C", onClick: () => business.open(ID), children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Headphones, { size: 19 }),
       wide && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: "\u7075\u542C" })
@@ -5483,9 +5676,9 @@ async function apply(ctx) {
     return activeId === ID ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PanelBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LingtingApp, { service, navigation, visible: true, embedded: true, hostState, onBackToHost: () => business.close(), onOpenLive: () => controller.open(), onOpenRecord: (id) => controller.openRecord(id) }) }) : null;
   }
   function Overlay() {
-    const page = (0, import_react22.useSyncExternalStore)(business.subscribe, business.getSnapshot, business.getSnapshot);
+    const page = (0, import_react23.useSyncExternalStore)(business.subscribe, business.getSnapshot, business.getSnapshot);
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      !hostBusiness && page.activeId === ID && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("section", { className: "lt-business-surface", "aria-label": "\u7075\u542C", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Page, { activeId: page.activeId }) }),
+      !hostBusiness && page.activeId === ID && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BusinessSurface, { onClose: () => business.close(), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Page, { activeId: page.activeId }) }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PanelBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(XinHostNotice, { store: hostState }) }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PanelBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LingtingSidebar, { service, controller, onOpenPage: () => business.open(ID) }) }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PanelBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MeetingPrompt, { service }) })