@uzuhq/code-cli 0.5.7 → 0.5.9

package/dist/harness/mount.js

@@ -1,790 +0,0 @@
-/**
- * Dev harness の iframe grid を parent frame に描画する。
- *
- * 子 iframe URL には `?server=ws://localhost:<port>&roomId=<key>&seatId=dev_N&
- * players=<json>&revisionId=dev` を付ける。 SDK は既存 online mode で dev-server に
- * 接続する (本番 Cloudflare Worker と同じ shape)。
- */
-import qrcode from 'qrcode-generator';
-import { attachUzuMenu } from './dev-button.js';
-// ── 本番アプリ (Flutter uzu_code 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>`;
-// 擬似ノッチ表示トグル。 createNotchDecor が実際に描く装飾 (横向き端末・左の
-// Dynamic Island・下中央のホームインジケータ) をそのまま象る。 隣の PHONE_SVG
-// (縦向き) とは向きで見分ける。
-const NOTCH_SVG = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="2" y="4.5" width="20" height="15" rx="3.5" stroke="white" stroke-width="1.8"/>
-<rect x="4.8" y="8.5" width="2.2" height="7" rx="1.1" fill="white"/>
-<line x1="11" y1="17" x2="17" y2="17" stroke="white" stroke-width="1.6" 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 を出す (ハリボテ)。 GM 席は端末を
-    // 模す必要が無いので載せない。 UZU ボタンだけは「他プレイヤー画面へ切替」に配線する。
-    if (paneAt(opts, playerIndex).seatKind !== '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);
-    }
-    // native title の tooltip は的が小さく遅延も長いので、クリックで開くパネル (render 側で
-    // frameWrap に置く) を主にする。title は補助。
-    const predictionWarn = document.createElement('span');
-    predictionWarn.style.cssText = [
-        'display:none;align-items:center;gap:3px',
-        'color:#1a1a2e;background:#ffb86c;border-radius:6px',
-        'padding:0 5px;cursor:pointer;user-select:none;font-weight:bold',
-    ].join(';');
-    row.appendChild(predictionWarn);
-    return { el: row, dots, predictionWarn };
-}
-/**
- * roster に載らない観測席の pane。 席の中身は固定なので manifest の宣言から起こす。
- * grid の中だけの存在で、 GameRoom にも iframe の `?players=` にも渡らない。
- */
-function observerPanes(opts) {
-    const pane = (id, nickname, seatKind) => ({
-        id,
-        nickname,
-        seatKind,
-        playerNo: null,
-    });
-    return [
-        ...(opts.spectator ? [pane('spec_0', '観戦', 'spectator')] : []),
-        ...(opts.admin ? [pane('admin_0', 'Admin', 'admin')] : []),
-    ];
-}
-export function paneCount(opts) {
-    return opts.players.length + observerPanes(opts).length;
-}
-function paneAt(opts, index) {
-    const player = opts.players[index];
-    if (player) {
-        return {
-            id: player.id,
-            nickname: player.nickname,
-            seatKind: 'player',
-            playerNo: index + 1,
-        };
-    }
-    const observer = observerPanes(opts)[index - opts.players.length];
-    if (!observer)
-        throw new Error(`pane index out of range: ${index}`);
-    return observer;
-}
-/**
- * SDK が読む wire 形式 (nickname → name)。
- *
- * `kind` は移行期の互換措置。 旧 SDK (0.7.3 等) は `kind` の無い席を受け取ると
- * throw する。 roster は player だけになったので値は常に 'player'。
- */
-function toWireSeat(seat) {
-    return {
-        id: seat.id,
-        name: seat.nickname,
-        iconUrl: seat.iconUrl,
-        characterId: seat.characterId,
-        kind: 'player',
-    };
-}
-function buildIframeUrl(opts, playerIndex) {
-    const url = new URL(opts.scenarioUrl);
-    const pane = paneAt(opts, playerIndex);
-    url.searchParams.set('server', opts.serverBaseUrl);
-    url.searchParams.set('roomId', opts.roomKey);
-    url.searchParams.set('seatId', pane.id);
-    // roster は player 席だけ。 観測席の iframe も同じ roster を送る (自分は載らない)。
-    // 移行期: 手元の scenario が同梱する SDK が旧版 (0.7.3 等) だと `?seats=` が無いだけで
-    // run() の入口が throw する。 旧名も併せて載せる。
-    const roster = JSON.stringify(opts.players.map(toWireSeat));
-    url.searchParams.set('players', roster);
-    url.searchParams.set('seats', roster);
-    // 自分の席種別。 観測席で GM ビューと観戦ビューを出し分けるのに要る (state からは
-    // 導けない)。 iframe URL 限定で WebSocket には出さない。
-    url.searchParams.set('seatKind', pane.seatKind);
-    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 (pane.seatKind === 'admin') {
-        // GM 席は本番 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}`;
-}
-/**
- * その player の単体表示 (`?player=N`) URL。 実機リンクと違い LAN host には
- * 読み替えず、 いま harness を見ている origin をそのまま使う。
- */
-function singleViewUrl(playerIndex) {
-    const url = new URL(location.href);
-    url.searchParams.set('player', String(playerIndex));
-    return url.toString();
-}
-/** 携帯リンクの 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 < paneCount(opts); i++) {
-        const pane = paneAt(opts, i);
-        const isCurrent = i === currentIndex;
-        const row = document.createElement('button');
-        row.textContent = `${isCurrent ? '● ' : ''}${pane.nickname} (${pane.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);
-}
-function createCellChrome(opts, playerIndex, 
-// facade=true (実機の単体表示) では見た目だけ揃える。 admin channel が無いので
-// UZU メニュー / 実機 QR は配線せず、 アイコンはタップ無効 (ハリボテ)。
-facade = false, 
-// grid では no-op のマイク枠を擬似ノッチ表示トグルに転用する。
-notchToggle, 
-// 単体表示 (実機) では 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 = paneAt(opts, playerIndex).nickname;
-    if (onUzuClick) {
-        uzu.onclick = onUzuClick;
-    }
-    else if (!facade) {
-        attachUzuMenu(uzu, {
-            stateGetter: opts.stateGetter,
-            resetGame: opts.resetGame,
-            playerCount: opts.playerCount,
-            adminEnabled: opts.admin,
-            onOpenSingleView: () => {
-                window.open(singleViewUrl(playerIndex), '_blank', 'noopener');
-            },
-        });
-    }
-    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 には音声が無い。 grid ではこの枠を擬似ノッチ
-    // 表示のトグルに転用し、 アイコンも端末フレームへ差し替える (facade は本番の見た目)。
-    const micSlot = document.createElement(notchToggle ? 'button' : 'div');
-    micSlot.innerHTML = notchToggle ? NOTCH_SVG : MIC_SVG;
-    micSlot.style.cssText = notchToggle
-        ? '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 (notchToggle) {
-        micSlot.onclick = notchToggle.toggle;
-        notchToggle.register((on) => {
-            micSlot.style.opacity = on ? '1' : '0.4';
-            micSlot.title = `擬似ノッチ表示: ${on ? 'ON' : 'OFF'}`;
-        });
-    }
-    else {
-        micSlot.title = 'マイク (dev 表示のみ)';
-    }
-    bar.appendChild(micSlot);
-    // 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();
-    const iframePredictionWarns = new Map();
-    // 擬似ノッチ (各 cell 共通トグル)。 iframe を再生成せず inset だけ切り替える。
-    // 既定は OFF: ノッチ帯のぶん画面が縮むので、 SafeArea を確認したいときだけ出す。
-    let notchSimOn = false;
-    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();
-        iframePredictionWarns.clear();
-        notchAppliers.length = 0;
-        for (let i = 0; i < paneCount(opts); i++) {
-            const pane = paneAt(opts, i);
-            const cell = document.createElement('div');
-            const label = document.createElement('div');
-            // GM 席は本番に存在しない dev 専用席なので、 player 席と見分く別配色にする。
-            const labelColor = pane.seatKind === '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 =
-                pane.seatKind === 'player'
-                    ? `Player ${pane.playerNo} (${pane.id})`
-                    : `${pane.seatKind === 'admin' ? '⚙' : '👁'} ${pane.nickname} (${pane.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);
-            // GM 席は端末を模す必要が無いので overlay chrome / 擬似ノッチを載せず素の画面にする。
-            if (pane.seatKind !== 'admin') {
-                screen.appendChild(createCellChrome(opts, i, false, {
-                    toggle: toggleNotchSim,
-                    register: (apply) => {
-                        apply(notchSimOn);
-                        notchAppliers.push(apply);
-                    },
-                }));
-            }
-            // 先読み警告の内訳パネル。 バッジクリックで開閉する。 画面の上に重ねるので
-            // ゲームの見た目は普段どおりのまま、 必要なときだけ前に出る。
-            const predictionPanel = document.createElement('div');
-            predictionPanel.style.cssText = [
-                'display:none;position:absolute;z-index:20;left:6px;right:6px;top:6px',
-                'background:#16213e;border:1px solid #ffb86c;border-radius:6px',
-                'padding:8px 10px;font-family:monospace;font-size:10px;line-height:1.6',
-                'color:#ffb86c;text-align:left;white-space:pre-wrap;cursor:pointer',
-            ].join(';');
-            predictionPanel.addEventListener('click', () => {
-                predictionPanel.style.display = 'none';
-            });
-            const notchDecor = createNotchDecor();
-            frameWrap.appendChild(screen);
-            frameWrap.appendChild(notchDecor);
-            frameWrap.appendChild(predictionPanel);
-            statusRow.predictionWarn.addEventListener('click', () => {
-                predictionPanel.style.display = predictionPanel.style.display === 'none' ? 'block' : 'none';
-            });
-            // 擬似ノッチ ON/OFF を screen の inset だけで切り替える (iframe は再生成しない)。
-            const applyNotch = (on) => {
-                if (pane.seatKind === '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);
-                iframePredictionWarns.set(iframe.contentWindow, {
-                    badge: statusRow.predictionWarn,
-                    panel: predictionPanel,
-                    entries: [],
-                });
-            }
-        }
-        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);
-            }
-        }
-        if (type === 'predictionWarning') {
-            const slot = iframePredictionWarns.get(event.source);
-            const payload = data.payload;
-            if (!slot || typeof payload !== 'object' || payload === null)
-                return;
-            if (!('action' in payload) || !('api' in payload))
-                return;
-            const { action, api } = payload;
-            if (typeof action !== 'string' || typeof api !== 'string')
-                return;
-            slot.entries.push(`${action} → ${api}`);
-            const body = [
-                '⚠ 先読み中に、サーバーと結果が一致しない API が呼ばれました',
-                '',
-                ...slot.entries.map((e) => `  ${e}`),
-                '',
-                'この action を serverOnly() で wrap するか、値を state に書かないでください。',
-                '直し方の詳細は console を参照。',
-                '',
-                '(クリックで閉じる)',
-            ].join('\n');
-            slot.badge.textContent = `⚠ ${slot.entries.length}`;
-            slot.badge.title = body;
-            slot.badge.style.display = 'inline-flex';
-            slot.panel.textContent = body;
-        }
-    };
-    window.addEventListener('message', onParentMessage);
-    window.addEventListener('resize', layout);
-    render();
-}