:root {
  --sign-window-w: 320px;
  --sign-window-h: 240px;
  --safe-top: env(safe-area-inset-top, 0);
  --safe-right: env(safe-area-inset-right, 0);
}

.sign-language-window {
  position: fixed;
  top: var(--safe-top);
  right: var(--safe-right);
  width: var(--sign-window-w);
  height: var(--sign-window-h);
  max-width: min(100vw - 2rem, var(--sign-window-w));
  max-height: min(100vh - var(--safe-top) - 2rem, var(--sign-window-h));
  /* 关键：防止 200% 缩放时溢出 */
  container-type: inline-size;
}

<aside class="sign-language-window" 
       role="region" 
       aria-label="手语翻译窗口" 
       aria-live="polite"
       tabindex="0">
  <video aria-hidden="true" playsinline muted autoplay src="…"></video>
  <div class="controls" role="toolbar" aria-label="窗口控制">
    <button aria-label="关闭手语窗口">…</button>
    <button aria-label="拖拽移动位置">…</button>
  </div>
</aside>

stateDiagram-v2
    [*] --> 初始聚焦窗口容器
    初始聚焦窗口容器 --> Tab进入控制栏: Tab
    控制栏 --> 关闭按钮: →
    控制栏 --> 拖拽手柄: ←
    关闭按钮 --> 焦点返回触发器: Enter/Space
    拖拽手柄 --> 方向键移动: ArrowKeys
    方向键移动 --> 确认位置: Enter
    确认位置 --> 焦点留在手柄: *

// 统一指针事件模型
const pointerDown = (e: PointerEvent) => {
  if (e.target !== dragHandle) return;
  e.preventDefault(); // 禁止文本选中
  const start = { x: e.clientX, y: e.clientY };
  const rect = windowEl.getBoundingClientRect();
  
  const move = (e: PointerEvent) => {
    const dx = e.clientX - start.x;
    const dy = e.clientY - start.y;
    const nx = Math.max(0, Math.min(rect.x + dx, viewportW - rect.width));
    const ny = Math.max(safeTop, Math.min(rect.y + dy, viewportH - rect.height));
    windowEl.style.transform = `translate(${nx}px, ${ny}px)`;
  };
  
  const up = () => {
    document.removeEventListener('pointermove', move);
    document.removeEventListener('pointerup', up);
    persistPosition(nx, ny); // 写入 localStorage
  };
  
  document.addEventListener('pointermove', move, { passive: false });
  document.addEventListener('pointerup', up);
};

// 仅 1.2KB gzip，无依赖，替代重型 hls.js/shaka-player
class SignABR {
  private levels: Level[] = []; // {bitrate, width, height, url}
  private current = 0;
  private bwEstimator = new BandwidthEstimator({ windowSec: 8 });

  attach(video: HTMLVideoElement) {
    video.addEventListener('waiting', this.onStall.bind(this));
    video.addEventListener('canplay', this.onCanPlay.bind(this));
    this.bwEstimator.start(video);
  }

  private onCanPlay() {
    const ideal = this.levels.findLast(l => l.bitrate < this.bwEstimator.mbps * 0.85 * 1e6);
    if (ideal && ideal !== this.levels[this.current]) this.switchLevel(ideal);
  }

  private onStall() {
    const lower = this.levels[this.current - 1];
    if (lower) this.switchLevel(lower); // 熔断降级
  }
}

stateDiagram-v2
    [*] --> 初始化: 用户语言偏好/地理位置/URL参数
    初始化 --> 加载清单: fetch /manifest/{lang}.json
    加载清单 --> 预连接CDN: 并行 preconnect
    预连接CDN --> 预加载首段: 300kbps 切片
    预加载首段 --> 就绪态: video.canplay
    就绪态 --> 播放中: 用户交互/自动播放策略
    播放中 --> 切换中: 用户切换语言/检测到偏好变更
    切换中 --> 保留进度: 记录 currentTime, playbackRate
    保留进度 --> 销毁旧源: video.src=''; video.load()
    销毁旧源 --> 加载新清单: 复用初始化流程
    加载新清单 --> 无缝衔接: video.currentTime = savedTime; video.play()

// 统一抽象层，业务零感知切换
interface ISignRenderer {
  readonly readiness: Promise<void>;
  play(textOrSSML: string): Promise<void>;
  pause(): void;
  destroy(): void;
  on(event: 'error'|'phoneme'|'viseme', cb: Function): void;
}

// 工厂函数：按设备能力、网络、业务优先级决策
async function createSignRenderer(cfg: SignConfig): Promise<ISignRenderer> {
  const caps = await detectCapabilities(); // {webgpu, webnn, hwDec, bandwidth}
  
  if (cfg.mode === 'live' && caps.webgpu) 
    return new ThreeJSRenderer({ model: 'sign-avatar-lite-v3.glb' }); // 实时骨骼驱动
  
  if (cfg.quality === 'premium' && caps.bandwidth > 2) 
    return new DiffusionRenderer({ endpoint: '/api/avatar/svd' }); // 云端扩散模型
  
  return new VideoABRRenderer({ manifest: cfg.manifestUrl }); // 兜底录播
}

packages/
├── sign-core/              # 纯 TS 核心逻辑：状态机、ABR、埋点、配置解析
├── sign-renderer-web/      # Web 实现：Video + WebCodecs + PiP
├── sign-renderer-mp/       # 小程序实现：<live-player> + movable-view
├── sign-renderer-rn/       # RN 实现：ExoPlayer/AVPlayer 原生视图 + Reanimated 手势
├── sign-renderer-tv/       # 大屏实现：空间导航 + 遥控器焦点管理
└── sign-react/             # React 绑定：useSignWindow() Hook 统一入口

北极星指标：手语有效触达率 = (完成核心任务的听障用户数 / 访问页面的听障用户数) × 100%
    │
    ├── 一级指标（体验质量）
    │   ├── 首帧可用率 (TTI < 3s) 目标 > 95%
    │   ├── 交互成功率 (关闭/移动/切换语言无报错) 目标 > 99%
    │   ├── 视频卡顿率 (Stall > 1s / 总播放时长) 目标 < 2%
    │   └── 高对比度/缩放模式下完好率 目标 100%
    │
    ├── 二级指标（使用深度）
    │   ├── 会话内开启时长占比 (开启时长 / 总会话时长)
    │   ├── 多语言切换渗透率 (切换次数 / 开启会话数)
    │   ├── 拖拽/位置个性化使用率
    │   └── 重复使用留存 (D7/D30 开启率)
    │
    └── 三级指标（运营诊断）
        ├── 视频源 404/解码失败 Top 10
        ├── 不同机型/OS/网络分层异常率
        ├── 用户反馈工单分类 (位置遮挡/模糊/不同步/闪烁)
        └── AI 合成降级触发率 & 兜底成功率

// 统一事件模型，全端一致
{
  "event": "sign_window_interaction",
  "timestamp": 1718000000123,
  "user_id": "hashed_uid",
  "session_id": "sid_xxx",
  "attributes": {
    "sign.lang": "zh-CSL",
    "sign.renderer": "video-abr",
    "sign.trigger": "auto|user_click|shortcut",
    "sign.position": "tr|tl|br|bl|custom",
    "sign.drag": false,
    "sign.zoom_level": 1.5,
    "sign.contrast_mode": "normal|high",
    "sign.reduced_motion": true,
    "device.type": "mobile|desktop|tv",
    "network.effective_type": "4g|wifi|3g",
    "error.code": null
  },
  "metrics": {
    "tti_ms": 620,
    "first_frame_ms": 580,
    "stall_count": 0,
    "total_play_ms": 45000
  }
}

flowchart TD
    A[窗口初始化] --> B{视频源可用?}
    B -- 否 --> C[展示静态手语关键帧海报 + 文案提示]
    B -- 是 --> D{网络/设备能力达标?}
    D -- 否 --> E[加载最低码率 300kbps / 仅关键帧 GIF]
    D -- 是 --> F{用户偏好/合规模式?}
    F -- 高对比度/省流量 --> G[锁定低码率/关闭非关键动画]
    F -- 正常 --> H[全功能加载: ABR + 拖拽 + 多语言 + AI可选]
    H --> I{播放中异常?}
    I -- 连续卡顿 3次 --> J[降级一级码率 + 上报]
    I -- 解码失败 --> K[切软解/换容器/换编码]
    I -- 源 404/403 --> L[无感切换备用源/兜底字幕]