@uzuhq/code-cli 0.3.14

package/dist/harness/mount.js

@@ -0,0 +1,664 @@
+/**
+ * Dev harness の iframe grid を parent frame に描画する。
+ *
+ * 子 iframe URL には `?server=ws://localhost:<port>&roomId=<key>&seatId=dev_N&
+ * seats=<json>&revisionId=dev` を付ける。 SDK は既存 online mode で dev-server に
+ * 接続する (本番 Cloudflare Worker と同じ shape)。
+ */
+import qrcode from 'qrcode-generator';
+import { attachUzuMenu } from './dev-button.js';
+// ── 本番アプリ (Flutter play_screen_v3 GamePlayScreen) の overlay 仕様に合わせた定数 ──
+// SafeArea 内 top:8 / left:12、 UZU ボタン 44、 gap 6、 ActionBar は height:36 の
+// ピル。 アイコン size:18 / 左右 padding:10。 game 側は SDK が uzuHudInsetX/Y から
+// --uzu-hud-inset-x/y を立て、 この矩形を避ける。
+const HUD_TOP = 8;
+const HUD_LEFT = 12;
+const HUD_UZU_SIZE = 44;
+const HUD_GAP = 6;
+const HUD_ACTION_ITEM_WIDTH = 38;
+// UZU ロゴ (28×28、 白)。 本番 brand_uzu_white.svg と同じ渦巻きマーク。
+const UZU_LOGO_SVG = `<svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.58178 17.2748C4.86125 13.8314 7.60805 8.50894 11.366 7.67694C12.0626 8.32582 12.2856 10.153 12.1701 11.0726C10.7171 11.2637 7.6797 14.1578 7.97429 17.4022C8.02604 17.9595 8.70677 18.278 8.70677 18.278C7.36522 19.3807 5.91618 18.8672 5.58576 17.2748" fill="#BEBEFF"/>
+<path d="M18.6032 12.4103C15.8843 12.9557 14.28 15.6826 14.288 17.8044C14.2919 19.2096 15.7489 19.7231 16.7442 18.8832C16.143 18.927 15.9838 18.5687 15.9838 18.3259C15.9679 16.9326 17.5921 15.0615 18.8102 15.0456C19.065 14.3649 18.9098 12.9039 18.6032 12.4143" fill="#BEBEFF"/>
+<path d="M0.872407 19.5798C-0.684116 15.8935 -0.29399 9.47636 3.15345 5.77415C6.91538 1.73754 13.038 2.19534 14.686 6.56634C16.2983 10.8378 13.9894 17.0321 10.749 19.54C8.83018 21.0249 5.89627 20.376 5.57382 17.2032C5.90025 18.302 7.28162 18.6443 8.25295 17.8243C9.76568 16.5424 11.4536 13.915 11.6168 11.2757C11.9034 6.74946 7.92254 5.59501 4.87319 8.38958C0.75298 12.1674 1.75218 18.2462 1.89549 18.9827C2.0388 19.7192 2.14629 20.1332 1.76412 20.2765C1.44565 20.3999 1.11126 20.1531 0.872407 19.5838" fill="white"/>
+<path d="M22.5562 13.2024C22.5602 14.2175 22.393 15.2366 22.0467 16.196C22.0188 16.2716 21.991 16.3433 21.9631 16.4189C22.3532 17.6212 21.5929 19.0622 20.9878 19.739C20.5777 20.1968 20.9758 20.4237 21.5093 20.2087C22.2378 19.9102 23.9257 18.6084 23.9973 16.7255C24.0451 15.4675 23.4519 13.8911 22.5562 13.2024Z" fill="white"/>
+<path d="M16.2505 6.82111C16.2505 6.82111 16.2505 6.82509 16.2505 6.82907C16.2426 6.82907 16.2306 6.82907 16.2227 6.82907C16.5491 7.99944 16.6645 9.30119 16.561 10.6666C18.3126 11.2558 19.0212 13.4254 18.5355 15.3521C18.0578 17.259 16.7163 18.4891 15.8843 18.5726C14.8692 18.6762 14.284 17.876 14.3397 17.1714C14.1128 18.505 14.4552 20.2526 16.1032 20.3043C18.3843 20.376 19.9328 18.7956 21.0077 15.8298C22.3811 12.044 20.5539 7.29483 16.2465 6.82907" fill="white"/>
+</svg>`;
+// マイク (micOn 相当) と 携帯 (実機で開く用)。 ActionBar は本番同様 2 アイコン。
+const MIC_SVG = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1C10.34 1 9 2.34 9 4V12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12V4C15 2.34 13.66 1 12 1Z" fill="white"/>
+<path d="M17 12C17 14.76 14.76 17 12 17C9.24 17 7 14.76 7 12H5C5 15.53 7.61 18.43 11 18.93V22H13V18.93C16.39 18.43 19 15.53 19 12H17Z" fill="white"/>
+</svg>`;
+const PHONE_SVG = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="6.5" y="2" width="11" height="20" rx="2.5" stroke="white" stroke-width="2"/>
+<line x1="10" y1="18.5" x2="14" y2="18.5" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>`;
+/** buildIframeUrl に渡す HUD の避け領域 (Flutter HudInsets と同じ計算)。 */
+function hudInsetParams(hasMenu, actionCount) {
+    let x = HUD_LEFT;
+    if (hasMenu)
+        x += HUD_UZU_SIZE;
+    if (actionCount > 0) {
+        if (hasMenu)
+            x += HUD_GAP;
+        x += HUD_ACTION_ITEM_WIDTH * actionCount;
+    }
+    return { x, y: HUD_TOP + HUD_UZU_SIZE };
+}
+// grid セルの擬似ノッチ (iPhone Pro 横向き相当、 notch は左固定)。 iframe 内は
+// 親の env(safe-area-inset) を継承しないため、 docs の「viewport-fit 未指定」挙動
+// (= SafeArea 内へ物理縮小、 外帯は背景色) を harness 側で再現する。
+const SIM_NOTCH = { top: 0, right: 59, bottom: 21, left: 59, radius: 44 };
+/** 擬似ノッチ装飾 (Dynamic Island 風ピル + ホームインジケータ)。 pointer-events なし。 */
+function createNotchDecor() {
+    const decor = document.createElement('div');
+    decor.style.cssText = 'position:absolute;inset:0;pointer-events:none;z-index:7;';
+    // Dynamic Island 風の縦ピル (左帯の中、 縦中央)。 黒帯上でも見えるよう薄い縁取り。
+    const island = document.createElement('div');
+    island.style.cssText = [
+        'position:absolute;left:16px;top:50%;transform:translateY(-50%)',
+        'width:26px;height:88px;border-radius:13px',
+        'background:#000;border:1px solid rgba(255,255,255,0.12)',
+    ].join(';');
+    // ホームインジケータ (下帯の中央)。
+    const home = document.createElement('div');
+    home.style.cssText = [
+        'position:absolute;bottom:7px;left:50%;transform:translateX(-50%)',
+        'width:32%;max-width:180px;height:4px;border-radius:2px',
+        'background:rgba(255,255,255,0.5)',
+    ].join(';');
+    decor.append(island, home);
+    return decor;
+}
+/**
+ * `?player=N` 用: 1 プレイヤー分の iframe を全画面で mount する。
+ * スマホ実機 (同一 LAN) から 1 キャラの画面をそのまま操作する用途。
+ * grid 版と同じ query を組み立てるので、 PC 側 grid の同じ playerId と
+ * 同一 GameRoom / 同一キャラとして同期する。
+ */
+/**
+ * ⛶ 全画面ボタン。 iOS Safari 16.4+ / Android Chrome で URL バーごと消せる。
+ * standalone 起動 (ホーム画面に追加) や Fullscreen API 非対応環境では出さない。
+ */
+function mountFullscreenButton(target) {
+    const doc = document;
+    const root = document.documentElement;
+    const supported = Boolean(root.requestFullscreen || root.webkitRequestFullscreen);
+    const standalone = matchMedia('(display-mode: standalone)').matches;
+    if (!supported || standalone)
+        return;
+    const btn = document.createElement('button');
+    btn.textContent = '⛶';
+    btn.title = '全画面';
+    btn.style.cssText = [
+        'position:absolute',
+        'right:calc(10px + env(safe-area-inset-right))',
+        'top:calc(10px + env(safe-area-inset-top))',
+        'z-index:10',
+        'width:40px',
+        'height:40px',
+        'border:none',
+        'border-radius:10px',
+        'background:rgba(0,0,0,0.45)',
+        'color:#cfd8ea',
+        'font-size:20px',
+        'line-height:1',
+        'cursor:pointer',
+        'backdrop-filter:blur(4px)',
+    ].join(';');
+    const isFullscreen = () => Boolean(document.fullscreenElement ?? doc.webkitFullscreenElement);
+    const sync = () => {
+        btn.textContent = isFullscreen() ? '✕' : '⛶';
+        btn.style.opacity = isFullscreen() ? '0.35' : '1';
+    };
+    btn.onclick = () => {
+        if (isFullscreen()) {
+            (document.exitFullscreen ?? doc.webkitExitFullscreen)?.call(document);
+            return;
+        }
+        (root.requestFullscreen ?? root.webkitRequestFullscreen)?.call(root);
+    };
+    document.addEventListener('fullscreenchange', sync);
+    document.addEventListener('webkitfullscreenchange', sync);
+    target.appendChild(btn);
+}
+export function mountSinglePlayer(opts, playerIndex) {
+    document.documentElement.style.cssText =
+        'margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0b0b16;';
+    // position:relative にして iframe の width/height calc(100% - inset) の基準を target にする。
+    opts.target.style.cssText =
+        'margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0b0b16;position:relative;';
+    const iframe = document.createElement('iframe');
+    iframe.src = buildIframeUrl(opts, playerIndex);
+    // 本番 Flutter (viewport-fit=auto) の safePadding と同じく、 iframe を safe-area で
+    // 物理 inset する。 iframe 内は top-level の env を継承しない (0 になる) ため、
+    // parent (= top-level、 page.ts で viewport-fit=cover) 側の env で inset する。
+    // iframe は置換要素で top/bottom だけでは伸びないので width/height を明示する。
+    iframe.style.cssText = [
+        'border:none;display:block;position:absolute',
+        'top:env(safe-area-inset-top, 0px)',
+        'left:env(safe-area-inset-left, 0px)',
+        'width:calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))',
+        'height:calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))',
+    ].join(';');
+    iframe.allow = 'autoplay';
+    const splash = document.createElement('div');
+    splash.style.cssText = [
+        'position:absolute;inset:0;z-index:5',
+        'display:flex;align-items:center;justify-content:center',
+        'background:#0b0b16;color:#3a4a6a',
+        'font-family:monospace;font-size:12px;letter-spacing:0.08em',
+        'transition:opacity 0.3s',
+    ].join(';');
+    splash.textContent = 'waiting firstFrameReady…';
+    opts.target.appendChild(iframe);
+    opts.target.appendChild(splash);
+    // 実機でも本番アプリと同じ overlay chrome を出す (ハリボテ)。 admin 席は端末を
+    // 模す必要が無いので載せない。 UZU ボタンだけは「他プレイヤー画面へ切替」に配線する。
+    if (seatAt(opts, playerIndex).kind !== 'admin') {
+        const chrome = createCellChrome(opts, playerIndex, true, undefined, () => {
+            const uzuBtn = chrome.querySelector('button');
+            if (uzuBtn)
+                openPlayerSwitcher(opts, playerIndex, uzuBtn);
+        });
+        opts.target.appendChild(chrome);
+    }
+    mountFullscreenButton(opts.target);
+    window.addEventListener('message', (event) => {
+        if (event.source !== iframe.contentWindow)
+            return;
+        let data = null;
+        try {
+            data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+        }
+        catch {
+            return;
+        }
+        if (!data || data.channel !== 'sdk')
+            return;
+        if (data.type === 'firstFrameReady') {
+            splash.style.opacity = '0';
+            splash.style.pointerEvents = 'none';
+            setTimeout(() => splash.remove(), 350);
+        }
+    });
+}
+const CELL_ASPECT_RATIO = { portrait: 9.0 / 19.5, landscape: 19.5 / 9.0 };
+const GAP = 4;
+const optimalGrid = (areaWidth, areaHeight, count, cellAspectRatio) => {
+    let bestCols = 1;
+    let bestRows = count;
+    let bestCellArea = 0;
+    for (let cols = 1; cols <= count; cols++) {
+        const rows = Math.ceil(count / cols);
+        const slotW = (areaWidth - GAP * (cols - 1)) / cols;
+        const slotH = (areaHeight - GAP * (rows - 1)) / rows;
+        let cellW;
+        let cellH;
+        if (slotW / slotH > cellAspectRatio) {
+            cellH = slotH;
+            cellW = slotH * cellAspectRatio;
+        }
+        else {
+            cellW = slotW;
+            cellH = slotW / cellAspectRatio;
+        }
+        const area = cellW * cellH;
+        if (area > bestCellArea) {
+            bestCellArea = area;
+            bestCols = cols;
+            bestRows = rows;
+        }
+    }
+    return { cols: bestCols, rows: bestRows };
+};
+const computeGridCellSize = (areaWidth, areaHeight, count, cellAspectRatio) => {
+    const { cols, rows } = optimalGrid(areaWidth, areaHeight, count, cellAspectRatio);
+    const slotW = (areaWidth - GAP * (cols - 1)) / cols;
+    const slotH = (areaHeight - GAP * (rows - 1)) / rows;
+    let cellW;
+    let cellH;
+    if (slotW / slotH > cellAspectRatio) {
+        cellH = slotH;
+        cellW = slotH * cellAspectRatio;
+    }
+    else {
+        cellW = slotW;
+        cellH = slotW / cellAspectRatio;
+    }
+    return { cols, rows, cellW, cellH };
+};
+function createLifecycleStatusRow() {
+    const row = document.createElement('div');
+    row.style.cssText =
+        'display:flex;justify-content:center;gap:8px;font-size:9px;padding-top:1px;font-family:monospace;color:#3a4a6a;';
+    const entries = [
+        { key: 'ready', label: 'init' },
+        { key: 'firstFrameReady', label: 'firstFrame' },
+        { key: 'gameReady', label: 'game' },
+    ];
+    const dots = {
+        ready: document.createElement('span'),
+        firstFrameReady: document.createElement('span'),
+        gameReady: document.createElement('span'),
+    };
+    for (const { key, label } of entries) {
+        const item = document.createElement('span');
+        item.style.cssText = 'display:inline-flex;align-items:center;gap:2px;';
+        const dot = dots[key];
+        dot.textContent = '●';
+        dot.style.cssText = 'color:#3a4a6a;transition:color 0.15s;';
+        const text = document.createElement('span');
+        text.textContent = label;
+        item.appendChild(dot);
+        item.appendChild(text);
+        row.appendChild(item);
+    }
+    return { el: row, dots };
+}
+function seatAt(opts, index) {
+    const seat = opts.seats[index];
+    if (!seat)
+        throw new Error(`seat index out of range: ${index}`);
+    return seat;
+}
+function isPlayerSeat(seat) {
+    return seat.kind === 'player';
+}
+/** SDK が読む wire 形式 (nickname → name)。 */
+function toWireSeat(seat) {
+    return {
+        id: seat.id,
+        name: seat.nickname,
+        iconUrl: seat.iconUrl,
+        characterId: seat.characterId,
+        kind: seat.kind,
+    };
+}
+function buildIframeUrl(opts, playerIndex) {
+    const url = new URL(opts.scenarioUrl);
+    const seat = seatAt(opts, playerIndex);
+    url.searchParams.set('server', opts.serverBaseUrl);
+    url.searchParams.set('roomId', opts.roomKey);
+    url.searchParams.set('seatId', seat.id);
+    url.searchParams.set('seats', JSON.stringify(opts.seats.map(toWireSeat)));
+    url.searchParams.set('revisionId', opts.revisionId);
+    // SDK は解釈しないが、 scenario 側で「parent は harness page (audio consumer 無し) か」を
+    // 判定するマーカーとして残す (tenbo の __uzuAudio bridge スキップ判定など)。
+    url.searchParams.set('__dev_player', String(playerIndex));
+    url.searchParams.set('__dev_room', opts.roomKey);
+    if (seat.kind === 'admin') {
+        // admin 席は本番 overlay chrome を載せないため避け領域も不要。
+        url.searchParams.set('uzuHudInsetX', '0');
+        url.searchParams.set('uzuHudInsetY', '0');
+        return url.toString();
+    }
+    // 本番同様、 UZU ボタン + ActionBar(chat/mic) の避け領域を game に伝える。
+    const hud = hudInsetParams(true, 2);
+    url.searchParams.set('uzuHudInsetX', String(hud.x));
+    url.searchParams.set('uzuHudInsetY', String(hud.y));
+    return url.toString();
+}
+/**
+ * その player を実機 (同一 LAN) で開く URL。 localhost で harness を見ているときは
+ * mDNS 名 (lanHosts 先頭) を、 すでに実機で見ているときは現在の host を使う。
+ */
+function resolveMobileUrl(opts, playerIndex) {
+    const isLocal = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
+    const host = isLocal ? opts.lanHosts?.[0] : location.hostname;
+    if (!host)
+        return null;
+    const port = location.port ? `:${location.port}` : '';
+    return `http://${host}${port}/?player=${playerIndex}`;
+}
+/** 携帯リンクの QR ポップアップ (カメラで読めばそのキャラの画面がスマホで開く)。 */
+function openMobileQrPopup(url, label) {
+    const backdrop = document.createElement('div');
+    backdrop.style.cssText = [
+        'position:fixed;inset:0;z-index:100000',
+        'background:rgba(0,0,0,0.6)',
+        'display:flex;align-items:center;justify-content:center',
+    ].join(';');
+    const panel = document.createElement('div');
+    panel.style.cssText = [
+        'background:#2d3436;border-radius:12px;padding:20px',
+        'display:flex;flex-direction:column;align-items:center;gap:10px',
+        'font-family:system-ui,sans-serif;color:#fff;max-width:80vw',
+    ].join(';');
+    const heading = document.createElement('div');
+    heading.textContent = `📱 ${label}`;
+    heading.style.cssText = 'font-size:14px;font-weight:bold;';
+    const note = document.createElement('div');
+    note.textContent = 'QR をカメラで読むと、 このキャラの画面がスマホで開きます';
+    note.style.cssText = 'font-size:11px;color:#a0a8b8;';
+    const qrWrap = document.createElement('div');
+    qrWrap.style.cssText = 'background:#fff;padding:10px;border-radius:8px;line-height:0;';
+    const qr = qrcode(0, 'M');
+    qr.addData(url);
+    qr.make();
+    qrWrap.innerHTML = qr.createSvgTag({ cellSize: 4, margin: 0, scalable: true });
+    const svg = qrWrap.querySelector('svg');
+    if (svg) {
+        svg.style.width = '200px';
+        svg.style.height = '200px';
+    }
+    const urlEl = document.createElement('a');
+    urlEl.textContent = url;
+    urlEl.href = url;
+    urlEl.target = '_blank';
+    urlEl.style.cssText = 'font-size:12px;color:#8be9fd;word-break:break-all;text-align:center;';
+    panel.append(heading, note, qrWrap, urlEl);
+    backdrop.appendChild(panel);
+    backdrop.onclick = () => backdrop.remove();
+    panel.onclick = (e) => e.stopPropagation();
+    document.body.appendChild(backdrop);
+}
+/**
+ * 単体表示 (実機) の UZU ボタン用プレイヤー切替。 `?player=N` を差し替えて
+ * 同じ端末で他キャラ画面に飛ぶ (QR を読み直さず切替できる)。 anchor 直下に出す。
+ */
+function openPlayerSwitcher(opts, currentIndex, anchor) {
+    const existing = document.getElementById('__uzu_player_switcher');
+    if (existing) {
+        existing.remove();
+        return;
+    }
+    const panel = document.createElement('div');
+    panel.id = '__uzu_player_switcher';
+    panel.style.cssText = [
+        'position:fixed;z-index:100001',
+        'background:#2d3436;border-radius:10px;padding:8px',
+        'box-shadow:0 4px 16px rgba(0,0,0,0.5)',
+        'font-family:system-ui,sans-serif;color:#fff',
+        'display:flex;flex-direction:column;gap:4px;min-width:180px',
+        'max-height:70vh;overflow-y:auto',
+    ].join(';');
+    const heading = document.createElement('div');
+    heading.textContent = '画面を切り替え';
+    heading.style.cssText = 'font-size:11px;color:#a0a8b8;padding:2px 8px 6px;';
+    panel.appendChild(heading);
+    for (let i = 0; i < opts.seats.length; i++) {
+        const seat = seatAt(opts, i);
+        const isCurrent = i === currentIndex;
+        const row = document.createElement('button');
+        row.textContent = `${isCurrent ? '● ' : ''}${seat.nickname} (${seat.id})`;
+        row.style.cssText = [
+            'text-align:left;border:none;border-radius:6px',
+            'padding:10px 12px;font-size:14px;cursor:pointer',
+            `background:${isCurrent ? '#0984e3' : '#3a4553'};color:#fff`,
+        ].join(';');
+        row.onclick = (e) => {
+            e.stopPropagation();
+            if (isCurrent) {
+                panel.remove();
+                return;
+            }
+            const url = new URL(location.href);
+            url.searchParams.set('player', String(i));
+            location.href = url.toString();
+        };
+        panel.appendChild(row);
+    }
+    document.body.appendChild(panel);
+    const rect = anchor.getBoundingClientRect();
+    panel.style.top = `${Math.round(rect.bottom + 6)}px`;
+    panel.style.left = `${Math.round(rect.left)}px`;
+    const close = (e) => {
+        if (!panel.contains(e.target) && !anchor.contains(e.target)) {
+            panel.remove();
+            document.removeEventListener('click', close);
+        }
+    };
+    setTimeout(() => document.addEventListener('click', close), 0);
+}
+/**
+ * 各 iframe (= 各プレイヤー画面) の左上に載せる overlay chrome。
+ * 本番アプリ (Flutter GamePlayScreen) と同じ仕様:
+ *   SafeArea top:8 / left:12 → [UZU ボタン 44] [gap 6] [ActionBar ピル: chat, mic]。
+ * UZU ボタンは dev メニュー (State/Reset/Emulator) + その player の「スマホで開く」を開く。
+ * chat / mic は本番の見た目に合わせた dev 表示 (機能は SDK 側が担うため配線しない)。
+ */
+function createCellChrome(opts, playerIndex, 
+// facade=true (実機の単体表示) では見た目だけ揃える。 admin channel が無いので
+// UZU メニュー / 実機 QR は配線せず、 アイコンはタップ無効 (ハリボテ)。
+facade = false, 
+// grid では no-op のマイクアイコンを擬似ノッチ表示トグルに転用する。
+onMicClick, 
+// 単体表示 (実機) では UZU ボタンをプレイヤー切替に転用する。
+onUzuClick) {
+    const wrap = document.createElement('div');
+    wrap.style.cssText = [
+        'position:absolute',
+        // notch / status bar を避けるため safe-area を足す (PC harness では env=0)。
+        `top:calc(${HUD_TOP}px + env(safe-area-inset-top, 0px))`,
+        `left:calc(${HUD_LEFT}px + env(safe-area-inset-left, 0px))`,
+        'z-index:6',
+        'display:flex;align-items:center;gap:6px',
+    ].join(';');
+    const uzu = document.createElement('button');
+    const uzuInteractive = Boolean(onUzuClick) || !facade;
+    uzu.title = onUzuClick ? '画面を切り替え' : 'UZU メニュー';
+    uzu.innerHTML = UZU_LOGO_SVG;
+    uzu.style.cssText = [
+        `width:${HUD_UZU_SIZE}px;height:${HUD_UZU_SIZE}px`,
+        'border:none;border-radius:12px',
+        'background:rgba(0,0,0,0.6)',
+        `cursor:${uzuInteractive ? 'pointer' : 'default'};padding:0`,
+        'display:flex;align-items:center;justify-content:center',
+        'flex-shrink:0',
+    ].join(';');
+    const mobileUrl = resolveMobileUrl(opts, playerIndex);
+    const label = seatAt(opts, playerIndex).nickname;
+    if (onUzuClick) {
+        uzu.onclick = onUzuClick;
+    }
+    else if (!facade) {
+        attachUzuMenu(uzu, {
+            stateGetter: opts.stateGetter,
+            resetGame: opts.resetGame,
+            playerCount: opts.playerCount,
+        });
+    }
+    wrap.appendChild(uzu);
+    const bar = document.createElement('div');
+    bar.style.cssText = [
+        'height:36px',
+        'background:rgba(0,0,0,0.6)',
+        'border-radius:18px',
+        'display:flex;align-items:center',
+    ].join(';');
+    // 1つめ: マイク。 本番は音声トグルだが harness では no-op なので、 grid では
+    // 擬似ノッチ表示のトグルに転用する (単体表示 facade では装飾のみ)。
+    const mic = document.createElement(onMicClick ? 'button' : 'div');
+    mic.innerHTML = MIC_SVG;
+    mic.title = onMicClick ? '擬似ノッチ表示 ON/OFF' : 'マイク (dev 表示のみ)';
+    mic.style.cssText = onMicClick
+        ? 'padding:0 10px;height:36px;background:none;border:none;cursor:pointer;display:flex;align-items:center;'
+        : 'padding:0 10px;display:flex;align-items:center;';
+    if (onMicClick)
+        mic.onclick = onMicClick;
+    bar.appendChild(mic);
+    // 2つめ: 携帯 (その player を実機で開く QR)。 facade では装飾のみ。
+    const phone = document.createElement('button');
+    phone.innerHTML = PHONE_SVG;
+    phone.title = facade ? '' : 'スマホ実機で開く (QR)';
+    phone.style.cssText = [
+        'padding:0 10px;height:36px',
+        `background:none;border:none;cursor:${facade ? 'default' : 'pointer'}`,
+        'display:flex;align-items:center',
+    ].join(';');
+    if (!facade) {
+        phone.onclick = () => {
+            if (mobileUrl)
+                openMobileQrPopup(mobileUrl, label);
+        };
+    }
+    bar.appendChild(phone);
+    wrap.appendChild(bar);
+    return wrap;
+}
+export function mountIframeGrid(opts) {
+    const { target, playerCount, orientation, devMinIframeShortEdge } = opts;
+    document.documentElement.style.cssText =
+        'margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#1a1a2e;';
+    const cells = [];
+    const iframeStatusDots = new Map();
+    const iframeSplashes = new Map();
+    // 擬似ノッチ (各 cell 共通トグル)。 iframe を再生成せず inset だけ切り替える。
+    let notchSimOn = true;
+    const notchAppliers = [];
+    const toggleNotchSim = () => {
+        notchSimOn = !notchSimOn;
+        for (const apply of notchAppliers)
+            apply(notchSimOn);
+    };
+    const layout = () => {
+        const n = cells.length;
+        if (n === 0)
+            return;
+        const cellAR = CELL_ASPECT_RATIO[orientation];
+        const targetW = target === document.body ? window.innerWidth : target.clientWidth;
+        const targetH = target === document.body ? window.innerHeight : target.clientHeight;
+        const naive = computeGridCellSize(targetW, targetH, n, cellAR);
+        const naiveShortEdge = Math.min(naive.cellW, naive.cellH);
+        const zoom = Math.min(1, naiveShortEdge / devMinIframeShortEdge);
+        const areaW = targetW / zoom;
+        const areaH = targetH / zoom;
+        const { cols, rows, cellW, cellH } = computeGridCellSize(areaW, areaH, n, cellAR);
+        target.style.cssText = [
+            `margin:0;padding:0;width:${areaW}px;height:${areaH}px;overflow:hidden`,
+            'display:grid',
+            `grid-template-columns:repeat(${cols},${cellW}px)`,
+            `grid-template-rows:repeat(${rows},${cellH}px)`,
+            'justify-content:center',
+            'align-content:center',
+            `gap:${GAP}px`,
+            'font-family:system-ui,sans-serif',
+            'background:#1a1a2e',
+            // 縮小表示は zoom ではなく transform: scale で行う。 zoom は layout プロパティ
+            // なので WebKit では iframe 内部の percentage height / vh の解決に物理 rect
+            // (zoom 適用後) が混入し、 iframe 内 body が viewport より小さくレンダリング
+            // される (Safari で下部に白い letterbox が出る)。 transform は視覚のみで
+            // iframe 内 layout に波及しないため engine 差が出ない。
+            ...(zoom < 1 ? [`transform:scale(${zoom})`, 'transform-origin:top left'] : []),
+        ].join(';');
+        for (const cell of cells) {
+            cell.style.cssText = `width:${cellW}px;height:${cellH}px;display:flex;flex-direction:column;overflow:hidden;`;
+        }
+    };
+    const render = () => {
+        target.innerHTML = '';
+        cells.length = 0;
+        iframeStatusDots.clear();
+        iframeSplashes.clear();
+        for (let i = 0; i < opts.seats.length; i++) {
+            const seat = seatAt(opts, i);
+            const cell = document.createElement('div');
+            const label = document.createElement('div');
+            // admin は本番に存在しない dev 専用席なので、 player 席と見分く別配色にする。
+            const labelColor = seat.kind === 'admin' ? '#ffb86c' : '#8be9fd';
+            label.style.cssText = `color:${labelColor};font-size:12px;padding:2px 0;flex-shrink:0;background:#16213e;text-align:center;`;
+            const nameRow = document.createElement('div');
+            nameRow.textContent = isPlayerSeat(seat)
+                ? `Player ${i + 1} (${seat.id})`
+                : `${seat.kind === 'admin' ? '⚙' : '👁'} ${seat.nickname} (${seat.id})`;
+            label.appendChild(nameRow);
+            const statusRow = createLifecycleStatusRow();
+            label.appendChild(statusRow.el);
+            const iframe = document.createElement('iframe');
+            iframe.src = buildIframeUrl(opts, i);
+            iframe.style.cssText =
+                'border:none;display:block;position:absolute;inset:0;width:100%;height:100%;';
+            // frameWrap = 端末ベゼル (黒)、 screen = 画面 (擬似ノッチ時は SafeArea 内へ縮小)。
+            const frameWrap = document.createElement('div');
+            frameWrap.style.cssText =
+                'flex:1;position:relative;min-height:0;overflow:hidden;background:#000;';
+            const screen = document.createElement('div');
+            screen.style.cssText = 'position:absolute;overflow:hidden;background:#000;';
+            // 本番ホスト (mobile WebView / Web emulator) は firstFrameReady 受信まで
+            // splash overlay で WebView を隠す。 harness も同じ挙動にしないと、 scenario が
+            // firstFrameReady を呼び忘れても harness では動いて見えてしまい、 publish 後に
+            // 初めて「splash が外れない」事故が発覚する。
+            const splash = document.createElement('div');
+            splash.style.cssText = [
+                'position:absolute;inset:0;z-index:5',
+                'display:flex;align-items:center;justify-content:center',
+                'background:#0b0b16;color:#3a4a6a',
+                'font-family:monospace;font-size:11px;letter-spacing:0.08em',
+                'transition:opacity 0.3s',
+            ].join(';');
+            splash.textContent = 'waiting firstFrameReady…';
+            screen.appendChild(iframe);
+            screen.appendChild(splash);
+            // admin は端末を模す必要が無いので overlay chrome / 擬似ノッチを載せず素の画面にする。
+            if (seat.kind !== 'admin') {
+                screen.appendChild(createCellChrome(opts, i, false, toggleNotchSim));
+            }
+            const notchDecor = createNotchDecor();
+            frameWrap.appendChild(screen);
+            frameWrap.appendChild(notchDecor);
+            // 擬似ノッチ ON/OFF を screen の inset だけで切り替える (iframe は再生成しない)。
+            const applyNotch = (on) => {
+                if (seat.kind === 'admin')
+                    on = false;
+                if (on) {
+                    screen.style.top = `${SIM_NOTCH.top}px`;
+                    screen.style.left = `${SIM_NOTCH.left}px`;
+                    screen.style.width = `calc(100% - ${SIM_NOTCH.left + SIM_NOTCH.right}px)`;
+                    screen.style.height = `calc(100% - ${SIM_NOTCH.top + SIM_NOTCH.bottom}px)`;
+                    screen.style.borderRadius = `${SIM_NOTCH.radius}px`;
+                    notchDecor.style.display = 'block';
+                }
+                else {
+                    screen.style.top = '0';
+                    screen.style.left = '0';
+                    screen.style.width = '100%';
+                    screen.style.height = '100%';
+                    screen.style.borderRadius = '0';
+                    notchDecor.style.display = 'none';
+                }
+            };
+            applyNotch(notchSimOn);
+            notchAppliers.push(applyNotch);
+            cell.appendChild(label);
+            cell.appendChild(frameWrap);
+            cells.push(cell);
+            target.appendChild(cell);
+            if (iframe.contentWindow) {
+                iframeStatusDots.set(iframe.contentWindow, statusRow.dots);
+                iframeSplashes.set(iframe.contentWindow, splash);
+            }
+        }
+        layout();
+    };
+    const onParentMessage = (event) => {
+        const dots = iframeStatusDots.get(event.source);
+        if (!dots)
+            return;
+        let data = null;
+        try {
+            data = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+        }
+        catch {
+            return;
+        }
+        if (!data || data.channel !== 'sdk')
+            return;
+        const type = data.type;
+        if (type === 'ready' || type === 'firstFrameReady' || type === 'gameReady') {
+            dots[type].style.color = '#5cd6a0';
+        }
+        if (type === 'firstFrameReady') {
+            const splash = iframeSplashes.get(event.source);
+            if (splash) {
+                splash.style.opacity = '0';
+                splash.style.pointerEvents = 'none';
+                setTimeout(() => splash.remove(), 350);
+                iframeSplashes.delete(event.source);
+            }
+        }
+    };
+    window.addEventListener('message', onParentMessage);
+    window.addEventListener('resize', layout);
+    render();
+}