/* 1. 利用 CSS 环境变量规避刘海/底部指示条 */
.sign-language-wrapper {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  right: max(1rem, env(safe-area-inset-right));
  z-index: 2147483640; /* 仅次于系统级提示 */
  contain: layout paint; /* 限制重绘范围 */
}

/* 2. 通过 Shadow DOM 隔离样式污染 */
class SignLanguageWindow extends HTMLElement {
  constructor() {
    super().attachShadow({ mode: 'closed' });
  }
}

.sign-language-video {
  width: clamp(240px, 20vw, 480px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.intersectionRatio < 0.95) {
      // 被遮挡 > 5% 时触发位移动画
      window.dispatchEvent(new CustomEvent('slw:reposition'));
    }
  });
}, { threshold: [0.95, 1] });

observer.observe(document.querySelector('.sign-language-wrapper'));

// 焦点陷阱仅在展开态生效
function trapFocus(node: HTMLElement) {
  const focusable = node.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0] as HTMLElement;
  const last = focusable[focusable.length - 1] as HTMLElement;

  node.addEventListener('keydown', (e) => {
    if (e.key !== 'Tab') return;
    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
    if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
  });
}

interface SyncPoint { time: number; signGloss: string; text: string; }

function syncCaptions(video: HTMLVideoElement, cues: SyncPoint[]) {
  video.addEventListener('timeupdate', () => {
    const current = cues.find(c => c.time <= video.currentTime && c.time + 2 > video.currentTime);
    if (current) {
      captionBox.textContent = current.text;
      signAvatar.dataset.gloss = current.signGloss; // 驱动 3D 虚拟人
    }
  });
}

# .github/workflows/a11y.yml
jobs:
  a11y-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Run Pa11y CI
        uses: pa11y/pa11y-ci-action@v2
        with:
          config: .pa11yci.json
      - name: Visual Regression (Chromatic)
        uses: chromaui/action@v1
      - name: Keyboard Navigation Test
        run: npx playwright test a11y/keyboard.spec.ts

graph LR
    A[文本/NLU意图] --> B[语言学分析器<br/>分词/词性/依存/语用]
    B --> C[手语词汇表映射<br/>CSL/ASL/TSL 方言包]
    C --> D[语法重排引擎<br/>Topic-Comment/时序/空间语法]
    D --> E[Prosody 预测器<br/>停顿/重音/面部非手动标记]
    E --> F[动作平滑融合器<br/>Lerp/Slerp + 物理二次修正]
    F --> G[WebGPU 顶点着色器<br/>GPU Skinning + BlendShape]

interface LayoutRect { x: number; y: number; w: number; h: number; priority: number; }
interface Constraint {
  type: 'avoid-overlap' | 'keep-margin' | 'anchor-edge' | 'z-order';
  target: string[]; // 窗口 ID 列表
  weight: number;   // 软约束权重
}

class LayoutScheduler {
  private rects = new Map<string, LayoutRect>();
  private constraints: Constraint[] = [
    { type: 'avoid-overlap', target: ['*'], weight: 100 },
    { type: 'anchor-edge', target: ['sign-lang'], weight: 80, params: { edge: 'bottom-right' } },
    { type: 'keep-margin', target: ['sign-lang', 'caption-bar'], weight: 60, params: { gap: 12 } },
    { type: 'z-order', target: ['sign-lang', 'ai-assistant', 'cookie'], weight: 90, params: { order: ['sign-lang','ai-assistant','cookie'] } }
  ];

  compute(viewport: DOMRect): Map<string, LayoutRect> {
    // 采用 Cassowary 约束求解器 或 自研模拟退火算法
    // 返回各窗口最优几何位置
  }
}

// packages/ura/src/runtime.ts
export interface IRenderer {
  init(canvas: OffscreenCanvas | HTMLCanvasElement): Promise<void>;
  renderFrame(skeleton: Float32Array, blendShapes: Float32Array): void;
  resize(w: number, h: number): void;
  destroy(): void;
}

// 适配器模式注入
const adapters = {
  h5: () => import('./webgpu-renderer').then(m => new m.WebGPURenderer()),
  weapp: () => import('./webgl-renderer').then(m => new m.WebGLRenderer()), // 微信小程序同层渲染
  rn: () => import('./skia-renderer').then(m => new m.SkiaRenderer()),      // React Native / HarmonyOS
  electron: () => import('./native-renderer').then(m => new m.NativeRenderer()) // 调用本地 Vulkan/Metal
};

graph TD
    A[启动探测] --> B{WebGPU 支持?}
    B -- 是 --> C{WebCodecs 支持?}
    B -- 否 --> D{WebGL2 + EXT_color_buffer_float?}
    C -- 是 --> E[标准级渲染器]
    C -- 否 --> F[轻量级渲染器 WASM 回退]
    D -- 是 --> F
    D -- 否 --> G[仅播放预渲染 MP4 兜底]
    E --> H[下发 glTF + 动作流]
    F --> H
    G --> I[下发 HLS/MP4 视频流]

graph LR
    subgraph 生产侧
    A[源文本库<br/>CMS/知识库] --> B[自动分句/标注工具<br/>ProseMirror + 自定义 Schema]
    B --> C[手语翻译专家工作台<br/>视频/动捕/关键帧标注]
    C --> D[动作数据清洗<br/>关节平滑/穿模修正/语法校验]
    D --> E[标准化资产包<br/>glTF + .slanim + 元数据 JSON]
    end

    subgraph 质检侧
    E --> F[自动化回归测试<br/>关键帧对比/语法规则引擎]
    F --> G[专家抽检/众测评分]
    G --> H[发布审批流<br/>GitOps + 语义化版本]
    end

    subgraph 运营侧
    H --> I[CDN 分发]
    I --> J[客户端埋点回收<br/>播放完成率/卡顿/用户切换]
    J --> K[难点词汇/低分片段挖掘]
    K --> A
    end

class AdaptiveStreamController {
  private currentMode: 'live' | 'hls' | 'offline' = 'live';
  private qoeMonitor = new QoEMonitor({ interval: 5000 });

  constructor(private videoEl: HTMLVideoElement, private avatar: AvatarRenderer) {
    this.qoeMonitor.on('degrade', (level) => this.switchMode(level));
    this.qoeMonitor.on('recover', () => this.tryUpgrade());
  }

  private async switchMode(level: 1 | 2 | 3) {
    const target = level === 1 ? 'hls' : level === 2 ? 'hls' : 'offline';
    if (target === this.currentMode) return;

    // 无缝切换：保持当前播放时间
    const currentTime = this.videoEl.currentTime;
    this.avatar.pause(); // 停止 GPU 渲染释放资源

    if (target === 'hls') {
      await this.loadHLSFallback(currentTime);
    } else {
      await this.loadOfflineKeyframes(currentTime);
    }
    this.currentMode = target;
    this.announceToSR(`当前切换至${target === 'offline' ? '离线简易模式' : '视频流模式'}`);
  }
}

// 事件示例：手语窗口交互
{
  "event": "sl_window_interaction",
  "timestamp": 1715000000123,
  "user_id_hash": "sha256(salt+openid)", // 去标识化
  "session_id": "uuid-v4",
  "props": {
    "action": "drag_end", // open/close/drag_end/resize/quality_switch
    "duration_ms": 3420,
    "viewport": { "w": 390, "h": 780, "dpr": 3 },
    "network": { "rtt": 45, "downlink": 12.4, "effective_type": "4g" },
    "render_mode": "webgpu_live",
    "avatar_version": "v2.3.1-abc123",
    "accessibility": { "screen_reader": true, "high_contrast": false, "reduce_motion": true }
  }
}