@khorsheed/dsh-game 0.0.0-stage → 0.1.1

package/lib/types/client/ElementsView.js

@@ -0,0 +1,195 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 元素: every element of the game as a card grid (look, name, key numbers),
+ * filtered by type, multi-selectable to hand to the model as references.
+ * One card opens the element: its look large (a 3D turntable, or the pixel
+ * editor), right under it a box to ask the model for a new look and the
+ * model's A/B/C proposals, its 设定 (lore), the 3D recipe's fine-tuning
+ * folded away, and its fields. Every edit lands in the working files; the
+ * tab's commit bar turns them into a version for the play area.
+ */
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ChipRow, PanelHeader } from '@khorsheed/dsh-client-ui-panel-kit/src/client/index.ts';
+import { isPixelLook, LOOK_CHARS, LORE_MAX } from "../types.js";
+import { failureOf } from "./contract.js";
+import { blankLook, ensureColor, LookCanvas, recolor, setCell } from "./looks.js";
+import { Preview3D } from "./Preview3D.js";
+import { Recipe3DEditor } from "./Recipe3DEditor.js";
+import css from './GameTab.module.css';
+/** A 3D look's main color, for its card's placeholder while the still renders (or without a live version). */
+function bodyColor(look) {
+    const recipe = look.kind === 'parts3d' ? look : look.recipe;
+    return recipe?.palette.body ?? Object.values(recipe?.palette ?? {})[0];
+}
+/** A stable per-type hue index for cards without a look. */
+function typeTone(types, type) {
+    return Math.max(0, types.indexOf(type)) % 6;
+}
+/** The elements view. */
+export function ElementsView(props) {
+    const { t, project, openId, onOpen, insertDraft, toast } = props;
+    const types = useMemo(() => [...new Set([...(project.manifest?.elementTypes ?? []), ...project.elements.map(e => e.type)])], [project]);
+    const [filter, setFilter] = useState('all');
+    const [selected, setSelected] = useState([]);
+    const open = project.elements.find(e => e.id === openId);
+    if (open !== undefined)
+        return _jsx(ElementDetail, { ...props, element: open, onBack: () => { onOpen(null); }, types: types });
+    // Newest change first (stable: elements of one file keep their order).
+    const shown = project.elements.filter(e => filter === 'all' || e.type === filter)
+        .map((e, i) => ({ e, i })).sort((a, b) => (b.e.updatedAt ?? 0) - (a.e.updatedAt ?? 0) || a.i - b.i).map(x => x.e);
+    const openProposals = new Set(project.proposals.filter(p => p.picked === undefined).map(p => p.elementId));
+    const toggle = (id) => { setSelected(s => (s.includes(id) ? s.filter(x => x !== id) : [...s, id])); };
+    return _jsxs("div", { className: css.scroll, children: [project.elementErrors.length > 0 && _jsxs("div", { className: css.notice, "data-tone": "error", children: [_jsx("strong", { children: t('elements.errors', { count: project.elementErrors.length }) }), _jsx("ul", { className: css.plainList, children: project.elementErrors.slice(0, 6).map((f, i) => _jsxs("li", { children: [_jsx("code", { children: f.where }), " ", f.message] }, i)) })] }), project.elements.length === 0
+                ? _jsxs("div", { className: css.emptyCard, children: [_jsx("div", { className: css.emptyGlyph, "aria-hidden": "true", children: "\u25C6" }), _jsx("p", { children: t('elements.empty') })] })
+                : _jsxs(_Fragment, { children: [_jsx(ChipRow, { label: t('elements.filter'), value: filter, onSelect: setFilter, chips: [{ id: 'all', label: t('elements.all'), count: project.elements.length },
+                                ...types.map(type => ({ id: type, label: type, count: project.elements.filter(e => e.type === type).length }))] }), _jsx("div", { className: css.cardGrid, children: shown.map(e => {
+                                const stats = Object.entries(e.stats).filter(([, v]) => typeof v === 'number').slice(0, 2);
+                                const isSel = selected.includes(e.id);
+                                return _jsxs("div", { className: css.elCard, "data-selected": isSel ? 'true' : 'false', children: [_jsxs("button", { type: "button", className: css.elOpen, onClick: () => { onOpen(e.id); }, "aria-label": t('elements.open', { name: e.name }), children: [_jsx("span", { className: css.elArt, "data-tone": typeTone(types, e.type), children: e.look !== null ? _jsx(LookCanvas, { look: e.look, box: 56 })
+                                                        : e.look3d !== null ? _jsx(Preview3D, { api: props.api, projectId: project.id, version: project.current?.version, look: e.look3d, mode: "still", className: css.elArt3d, emptyLabel: "", placeholder: _jsx("span", { className: css.elInitial, style: { background: bodyColor(e.look3d) }, "data-model": "3d", children: e.name.slice(0, 1) }) })
+                                                            : _jsx("span", { className: css.elInitial, children: e.name.slice(0, 1) }) }), _jsx("span", { className: css.elName, children: e.name }), _jsxs("span", { className: css.elMeta, children: [e.type, stats.length > 0 ? ` · ${stats.map(([k, v]) => `${k} ${String(v)}`).join(' · ')}` : ''] }), openProposals.has(e.id) && _jsx("span", { className: css.badge, children: t('elements.proposalsWaiting') })] }), _jsx("label", { className: css.elCheck, title: t('elements.select'), children: _jsx("input", { type: "checkbox", checked: isSel, onChange: () => { toggle(e.id); }, "aria-label": t('elements.selectOne', { name: e.name }) }) })] }, e.id);
+                            }) })] }), selected.length > 0 && _jsxs("div", { className: css.selectBar, children: [_jsx("span", { children: t('elements.selected', { count: selected.length }) }), _jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.ghost, onClick: () => { setSelected([]); }, children: t('elements.clear') }), _jsx("button", { type: "button", className: css.primary, onClick: () => {
+                            const refs = selected.map(id => project.elements.find(e => e.id === id)).filter((e) => e !== undefined);
+                            if (insertDraft(t('draft.elementsRef', { list: refs.map(e => `「${e.name}」(${e.id})`).join('、') }))) {
+                                toast(t('toast.drafted'));
+                                setSelected([]);
+                            }
+                        }, children: t('elements.toModel') })] })] });
+}
+/** One element, open. */
+function ElementDetail({ t, sessionId, api, project, element, onBack, insertDraft, toast, refresh, types }) {
+    const stylePalette = project.manifest?.palette ?? [];
+    const [look, setLook] = useState(element.look);
+    const [state, setState] = useState(Object.keys(element.look?.states ?? { idle: [] })[0] ?? 'idle');
+    const [tool, setTool] = useState('pen');
+    const [color, setColor] = useState(stylePalette[1] ?? element.look?.palette[1] ?? null);
+    const [recolorFrom, setRecolorFrom] = useState(null);
+    const [ask, setAsk] = useState('');
+    const [saving, setSaving] = useState('idle');
+    const saveTimer = useRef();
+    useEffect(() => { setLook(element.look); }, [element.id, element.look]);
+    const [look3d, setLook3d] = useState(element.look3d);
+    const [clips, setClips] = useState([]);
+    const [parts, setParts] = useState(null);
+    const [clip, setClip] = useState(null);
+    const [view, setView] = useState(null);
+    const viewN = useRef(0);
+    const turnTo = (yaw) => { viewN.current++; setView({ yaw, n: viewN.current }); };
+    useEffect(() => { setClips([]); setClip(null); setParts(null); }, [element.id]);
+    useEffect(() => { setLook3d(element.look3d); }, [element.id, element.look3d]);
+    const save = (next) => {
+        if (isPixelLook(next))
+            setLook(next);
+        else
+            setLook3d(next);
+        setSaving('saving');
+        clearTimeout(saveTimer.current);
+        saveTimer.current = setTimeout(() => {
+            void api.editElement(sessionId, project.id, element.id, { look: JSON.stringify(next) }).then(result => {
+                if (failureOf(result) !== undefined) {
+                    setSaving('failed');
+                    return;
+                }
+                setSaving('saved');
+                refresh();
+            });
+        }, 450);
+    };
+    const paint = (x, y) => {
+        if (look === null || tool !== 'pen')
+            return;
+        if (color === null) {
+            save(setCell(look, state, x, y, '.'));
+            return;
+        }
+        const ensured = ensureColor(look, color);
+        save(setCell(ensured.look, state, x, y, ensured.char));
+    };
+    const saveField = (key, raw, kind) => {
+        const value = kind === 'number' ? Number(raw) : kind === 'boolean' ? raw === 'true' : raw;
+        if (kind === 'number' && !Number.isFinite(value))
+            return;
+        if (element.stats[key] === value)
+            return;
+        void api.editElement(sessionId, project.id, element.id, { fields: JSON.stringify({ [key]: value }) }).then(refresh);
+    };
+    const proposals = project.proposals.filter(p => p.elementId === element.id);
+    const openProposal = proposals.find(p => p.picked === undefined);
+    const history = proposals.filter(p => p.picked !== undefined);
+    const states = look === null ? [] : Object.keys(look.states);
+    const fields = Object.entries(element.stats);
+    return _jsxs("div", { className: css.scroll, children: [_jsx(PanelHeader, { className: css.detailHead, title: element.name, meta: _jsx("span", { title: `${element.id} · ${element.file}`, children: element.type }), onBack: onBack, backLabel: t('elements.back'), moreLabel: t('more') }), look3d !== null ? _jsxs("section", { className: css.lookPanel, children: [_jsx(Preview3D, { api: api, projectId: project.id, version: project.current?.version, look: look3d, mode: "spin", className: css.turntable, emptyLabel: t('look.preview3dEmpty'), onClips: (names, found) => { setClips(names); setParts(found); }, onTurned: () => { setView(null); }, clip: clip, view: view }), clips.length > 0 && _jsx(ChipRow, { label: t('gltf.clips'), value: clip?.name ?? autoClip(look3d, clips), onSelect: name => { setClip(c => ({ name, n: (c?.n ?? 0) + 1 })); }, chips: clips.map(name => ({ id: name, label: name })) }), _jsxs("div", { className: `${css.toolRow} ${css.tight}`, children: [_jsx("span", { className: css.metaLine, children: t('look.drag3d') }), _jsx("span", { className: css.spacer }), _jsx("span", { role: "group", "aria-label": t('look.views'), className: css.segGroup, children: [[0, 'look.front'], [90, 'look.side'], [180, 'look.back']].map(([yaw, key]) => _jsx("button", { type: "button", className: css.seg, "aria-pressed": view?.yaw === yaw, onClick: () => { turnTo(yaw); }, children: t(key) }, yaw)) }), _jsx("span", { className: css.saveState, "data-state": saving, children: saving === 'idle' ? '' : t(`look.${saving}`) })] }), look3d.kind === 'gltf' && _jsx(GltfControls, { t: t, look: look3d, onChange: save })] }) : _jsxs("section", { className: css.lookPanel, children: [_jsxs("div", { className: css.lookMain, children: [look !== null
+                                ? _jsx(LookCanvas, { look: look, state: state, box: 208, grid: true, onPaint: paint, className: css.lookEditor })
+                                : _jsxs("div", { className: css.lookEmpty, "data-tone": typeTone(types, element.type), children: [_jsx("p", { children: t('look.none') }), _jsx("button", { type: "button", className: css.ghost, onClick: () => { save(blankLook(stylePalette.length > 0 ? stylePalette : ['#000000', '#ffffff'])); }, children: t('look.start') })] }), look !== null && _jsxs("div", { className: css.lookSide, children: [_jsx("div", { className: css.lookPreview, children: _jsx(LookCanvas, { look: look, state: state, box: 64 }) }), _jsx("span", { className: css.metaLine, children: t('look.inGame') }), _jsx("span", { className: css.saveState, "data-state": saving, children: saving === 'idle' ? '' : t(`look.${saving}`) })] })] }), states.length > 0 && _jsx(ChipRow, { label: t('look.states'), value: state, onSelect: setState, chips: states.map(s => ({ id: s, label: s })) }), look !== null && _jsxs(_Fragment, { children: [_jsxs("div", { className: `${css.toolRow} ${css.tight}`, children: [_jsxs("span", { className: css.segGroup, role: "group", "aria-label": t('look.tools'), children: [_jsx("button", { type: "button", className: css.seg, "aria-pressed": tool === 'pen', onClick: () => { setTool('pen'); setRecolorFrom(null); }, children: t('look.pen') }), _jsx("button", { type: "button", className: css.seg, "aria-pressed": tool === 'recolor', onClick: () => { setTool('recolor'); }, children: t('look.recolor') })] }), _jsx("span", { className: css.spacer }), _jsx("span", { className: css.metaLine, children: tool === 'pen' ? t('look.penHint') : recolorFrom === null ? t('look.recolorPick') : t('look.recolorTo') })] }), tool === 'recolor' && _jsx("div", { className: css.swatches, "aria-label": t('look.ownColors'), children: look.palette.map((c, i) => _jsx("button", { type: "button", className: css.swatchBtn, "aria-pressed": recolorFrom === i, style: { background: c }, title: `${LOOK_CHARS[i]} ${c}`, onClick: () => { setRecolorFrom(i); } }, i)) }), _jsxs("div", { className: css.swatches, "aria-label": t('look.styleColors'), children: [tool === 'pen' && _jsx("button", { type: "button", className: css.swatchBtn, "data-erase": "true", "aria-pressed": color === null, title: t('look.erase'), onClick: () => { setColor(null); } }), stylePalette.map(c => _jsx("button", { type: "button", className: css.swatchBtn, style: { background: c }, title: c, "aria-pressed": tool === 'pen' && color === c, onClick: () => {
+                                            if (tool === 'pen')
+                                                setColor(c);
+                                            else if (recolorFrom !== null) {
+                                                save(recolor(look, recolorFrom, c));
+                                                setRecolorFrom(null);
+                                            }
+                                        } }, c))] }), _jsx("p", { className: css.metaLine, children: t('look.paletteNote') })] })] }), _jsxs("section", { className: css.block, children: [_jsx("h4", { className: css.blockTitle, children: t('look.askTitle') }), _jsx("textarea", { className: css.textarea, rows: 2, value: ask, placeholder: t('look.askPlaceholder'), onChange: e => { setAsk(e.target.value); } }), _jsx("div", { className: css.rowEnd, children: _jsx("button", { type: "button", className: css.primary, disabled: ask.trim() === '', onClick: () => {
+                                if (insertDraft(t('draft.restyleElement', { name: element.name, id: element.id, ask: ask.trim() }))) {
+                                    toast(t('toast.drafted'));
+                                    setAsk('');
+                                }
+                            }, children: t('look.askSend') }) }), openProposal !== undefined && _jsxs("div", { className: css.proposals, children: [_jsx("p", { className: css.metaLine, children: t('look.proposalsFor', { request: openProposal.request || '—' }) }), _jsx("div", { className: css.proposalGrid, children: openProposal.variants.map((v, i) => _jsxs("div", { className: css.proposalCard, children: [_jsx("div", { className: css.proposalArt, children: isPixelLook(v.look) ? _jsx(LookCanvas, { look: v.look, box: 84 })
+                                                : _jsx(Preview3D, { api: api, projectId: project.id, version: project.current?.version, look: v.look, mode: "still", className: css.proposal3d, emptyLabel: t('look.model3d') }) }), _jsx("strong", { children: v.label }), _jsx("span", { className: css.metaLine, children: v.note }), _jsx("button", { type: "button", className: css.primary, onClick: () => {
+                                                void api.pickProposal(sessionId, project.id, element.id, openProposal.at, i).then(r => {
+                                                    if (failureOf(r) === undefined)
+                                                        toast(t('nudge.picked', { name: element.name, label: v.label }));
+                                                    refresh();
+                                                });
+                                            }, children: t('look.pickThis') })] }, i)) })] }), history.length > 0 && _jsxs("details", { className: css.history, children: [_jsx("summary", { children: t('look.history', { count: history.length }) }), history.map(p => _jsx("div", { className: css.historyRow, children: p.variants.map((v, i) => _jsxs("span", { className: css.historyItem, "data-picked": i === p.picked ? 'true' : 'false', children: [isPixelLook(v.look) ? _jsx(LookCanvas, { look: v.look, box: 32 }) : _jsx("span", { className: css.metaLine, children: t('look.model3d') }), _jsx("button", { type: "button", className: css.link, onClick: () => { save(v.look); }, children: t('look.useAgain', { label: v.label }) })] }, i)) }, p.at))] })] }), _jsx(LoreCard, { t: t, element: element, onSave: lore => {
+                    void api.editElement(sessionId, project.id, element.id, { fields: JSON.stringify({ lore: lore === '' ? null : lore }) }).then(refresh);
+                } }), look3d?.kind === 'parts3d' && _jsxs("details", { className: css.fold, children: [_jsx("summary", { children: t('look.fineTune') }), _jsx(Recipe3DEditor, { t: t, look: look3d, onChange: save })] }), look3d?.kind === 'gltf' && parts !== null && (parts.materials.length + parts.bones.length + parts.morphs.length) > 0 && _jsxs("details", { className: css.fold, children: [_jsx("summary", { children: t('look.fineTune') }), _jsx(GltfTweaks, { t: t, look: look3d, parts: parts, onChange: save })] }), _jsxs("section", { className: css.block, children: [_jsx("h4", { className: css.blockTitle, children: t('fields.title') }), fields.length === 0 && _jsx("p", { className: css.metaLine, children: t('fields.none') }), _jsx("div", { className: css.fieldGrid, children: fields.map(([key, value]) => _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldKey, children: key }), typeof value === 'boolean'
+                                    ? _jsx("input", { type: "checkbox", defaultChecked: value, onChange: e => { saveField(key, String(e.target.checked), 'boolean'); } })
+                                    : _jsx("input", { className: css.input, defaultValue: String(value), inputMode: typeof value === 'number' ? 'decimal' : 'text', onBlur: e => { saveField(key, e.target.value, typeof value === 'number' ? 'number' : 'string'); }, onKeyDown: e => { if (e.key === 'Enter')
+                                            e.target.blur(); } })] }, `${element.id}:${key}`)) }), _jsx("p", { className: css.metaLine, children: t('fields.note') })] })] });
+}
+/** 设定: who the element is — free text the agent follows for its behavior and wording. Saved on blur. */
+function LoreCard({ t, element, onSave }) {
+    const [text, setText] = useState(element.lore);
+    useEffect(() => { setText(element.lore); }, [element.id, element.lore]);
+    return _jsxs("section", { className: css.block, children: [_jsx("h4", { className: css.blockTitle, children: t('lore.title') }), _jsx("textarea", { className: css.textarea, rows: element.lore === '' ? 3 : 5, maxLength: LORE_MAX, value: text, placeholder: t('lore.placeholder'), "aria-label": t('lore.title'), onChange: e => { setText(e.target.value); }, onBlur: () => { if (text.trim() !== element.lore)
+                    onSave(text.trim()); } }), _jsx("p", { className: css.metaLine, children: t('lore.note') })] });
+}
+/** A model-file look: which file, toon or its own materials, and its size in the game. */
+function GltfControls({ t, look, onChange }) {
+    const material = look.material ?? 'toon';
+    const [scale, setScale] = useState(String(look.scale ?? 1));
+    useEffect(() => { setScale(String(look.scale ?? 1)); }, [look.scale]);
+    return _jsxs("div", { className: css.gltfRow, children: [_jsx("span", { className: css.metaLine, children: t('gltf.file', { src: look.src }) }), _jsx("span", { className: css.spacer }), _jsxs("span", { role: "group", "aria-label": t('gltf.material'), className: css.segGroup, children: [_jsx("button", { type: "button", className: css.seg, "aria-pressed": material === 'toon', onClick: () => { onChange({ ...look, material: 'toon' }); }, children: t('gltf.toon') }), _jsx("button", { type: "button", className: css.seg, "aria-pressed": material === 'original', onClick: () => { onChange({ ...look, material: 'original' }); }, children: t('gltf.original') })] }), _jsxs("label", { className: css.gltfScale, children: [_jsx("span", { className: css.metaLine, children: t('gltf.scale') }), _jsx("input", { className: css.input, inputMode: "decimal", value: scale, onChange: e => { setScale(e.target.value); }, onBlur: () => { const v = Number(scale); if (Number.isFinite(v) && v > 0 && v !== (look.scale ?? 1))
+                            onChange({ ...look, scale: v }); }, onKeyDown: e => { if (e.key === 'Enter')
+                            e.target.blur(); } })] })] });
+}
+/** Rig helpers a user never tunes (Rigify and friends): hidden from the bone list unless already tweaked. */
+const RIG_HELPER = /^(DEF|MCH|ORG|CTRL|WGT|IK|FK|VIS|MSTR)[-_.]/i;
+/**
+ * A model look tuned by the names inside it: base color per material, a size
+ * (and, folded, a rotation) per bone, a weight per shape key. Every change is
+ * a look edit (live in the turntable, saved like any other).
+ */
+function GltfTweaks({ t, look, parts, onChange }) {
+    const [query, setQuery] = useState('');
+    const tint = look.tint ?? {}, bones = look.bones ?? {}, morphs = look.morphs ?? {};
+    const set = (key, value) => { onChange({ ...look, [key]: value }); };
+    const without = (map, name) => { const next = { ...map }; delete next[name]; return next; };
+    const shown = parts.bones.filter(b => bones[b] !== undefined || (!RIG_HELPER.test(b) && (query === '' || b.toLowerCase().includes(query.toLowerCase()))));
+    const boneScale = (name) => { const s = bones[name]?.scale; return typeof s === 'number' ? s : 1; };
+    const rot = (name) => bones[name]?.rotate ?? [0, 0, 0];
+    const setBone = (name, patch) => {
+        const next = { ...bones[name], ...patch };
+        const plain = (next.scale === undefined || next.scale === 1) && (next.rotate === undefined || next.rotate.every(v => v === 0));
+        set('bones', plain ? without(bones, name) : { ...bones, [name]: next });
+    };
+    return _jsxs("div", { className: css.recipe, children: [parts.materials.length > 0 && _jsxs("div", { className: css.recipeGroup, children: [_jsx("span", { className: css.recipePartName, children: t('gltf.colors') }), _jsx("div", { className: css.recipeColors, children: parts.materials.map(m => _jsxs("label", { className: css.recipeColor, title: m.vertexColors ? t('gltf.vertexColorsHint') : undefined, children: [_jsx("input", { type: "color", value: tint[m.name] ?? m.color, onChange: e => { set('tint', { ...tint, [m.name]: e.target.value }); } }), _jsxs("span", { children: [m.name, m.vertexColors ? ` · ${t('gltf.vertexColors')}` : ''] }), tint[m.name] !== undefined && _jsx("button", { type: "button", className: css.link, onClick: () => { set('tint', without(tint, m.name)); }, children: t('gltf.reset') })] }, m.name)) })] }), parts.morphs.length > 0 && _jsxs("div", { className: css.recipeGroup, children: [_jsx("span", { className: css.recipePartName, children: t('gltf.morphs') }), parts.morphs.map(name => _jsxs("label", { className: css.param, children: [_jsx("span", { className: css.paramLabel, children: name }), _jsx("input", { type: "range", className: css.range, min: 0, max: 1, step: 0.05, value: morphs[name] ?? 0, onChange: e => { const v = Number(e.target.value); set('morphs', v === 0 ? without(morphs, name) : { ...morphs, [name]: v }); } }), _jsx("span", { className: css.paramValue, children: (morphs[name] ?? 0).toFixed(2) })] }, name))] }), parts.bones.length > 0 && _jsxs("div", { className: css.recipeGroup, children: [_jsx("span", { className: css.recipePartName, children: t('gltf.bones') }), _jsx("input", { className: css.input, value: query, placeholder: t('gltf.boneSearch'), "aria-label": t('gltf.boneSearch'), onChange: e => { setQuery(e.target.value); } }), shown.slice(0, 40).map(name => _jsxs("div", { className: css.recipePart, children: [_jsxs("label", { className: css.param, children: [_jsx("span", { className: css.paramLabel, children: name }), _jsx("input", { type: "range", className: css.range, min: 0.5, max: 2, step: 0.05, value: boneScale(name), onChange: e => { setBone(name, { scale: Number(e.target.value) }); } }), _jsxs("span", { className: css.paramValue, children: ["\u00D7", boneScale(name).toFixed(2)] })] }), _jsxs("details", { className: css.history, children: [_jsx("summary", { children: t('gltf.rotate') }), ['x', 'y', 'z'].map((axis, i) => _jsxs("label", { className: css.param, children: [_jsx("span", { className: css.paramLabel, children: axis }), _jsx("input", { type: "range", className: css.range, min: -45, max: 45, step: 1, value: rot(name)[i], onChange: e => {
+                                                    const next = [...rot(name)];
+                                                    next[i] = Number(e.target.value);
+                                                    setBone(name, { rotate: next });
+                                                } }), _jsxs("span", { className: css.paramValue, children: [rot(name)[i], "\u00B0"] })] }, axis))] })] }, name)), shown.length > 40 && _jsx("span", { className: css.metaLine, children: t('gltf.moreBones', { count: shown.length - 40 }) })] })] });
+}
+/** The clip a model plays on its own (dsh3d's rule): the look's choice, else an idle-like name, else the first. */
+function autoClip(look, clips) {
+    const chosen = look.kind === 'gltf' ? look.animation : undefined;
+    return chosen !== undefined && clips.includes(chosen) ? chosen : clips.find(c => /idle|待机|stand/i.test(c)) ?? clips[0] ?? '';
+}

package/lib/types/client/GameTab.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The game tab body — the game-design workbench beside the conversation.
+ * With a project bound: a header (title, style, live version, the
+ * auto-confirm switch), the commit bar while panel edits wait to become a
+ * version, and four views — 试玩 (stage + parameter drawer),
+ * 元素 (cards, look editor, proposals), 策划 (one-pager, pillars, chapters)
+ * and 版本 (checks, timeline, log, export). Without one: how to start, the
+ * style gallery, and the existing projects.
+ */
+import { type ReactNode } from 'react';
+import { type GameTabProps } from './contract.ts';
+/** The game tab body. */
+export declare function GameTab(props: GameTabProps): ReactNode;
+//# sourceMappingURL=GameTab.d.ts.map

package/lib/types/client/GameTab.js

@@ -0,0 +1,261 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The game tab body — the game-design workbench beside the conversation.
+ * With a project bound: a header (title, style, live version, the
+ * auto-confirm switch), the commit bar while panel edits wait to become a
+ * version, and four views — 试玩 (stage + parameter drawer),
+ * 元素 (cards, look editor, proposals), 策划 (one-pager, pillars, chapters)
+ * and 版本 (checks, timeline, log, export). Without one: how to start, the
+ * style gallery, and the existing projects.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PanelHeader, PanelRoot, UnderlineTabs, } from '@khorsheed/dsh-client-ui-panel-kit/src/client/index.ts';
+import { Switch, Tag } from '@deepseek-ai/dsh-client-ui-primitives';
+import { artStyleLabel, artStyleName } from "../project.js";
+import { exportHtml } from "../vfs.js";
+import { failureOf } from "./contract.js";
+import { DesignView } from "./DesignView.js";
+import { ElementsView } from "./ElementsView.js";
+import { PlayView } from "./PlayView.js";
+import { ProjectSwitcher } from "./ProjectSwitcher.js";
+import { StyleGallery } from "./StyleGallery.js";
+import { VersionsView } from "./VersionsView.js";
+import css from './GameTab.module.css';
+const RefreshIcon = _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M13 8a5 5 0 1 1-1.6-3.7M13 3v2.6h-2.6", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) });
+const SwitchIcon = _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3 5h9l-2-2M13 11H4l2 2", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) });
+const PaletteIcon = _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("path", { d: "M8 2.5a5.5 5.5 0 1 0 0 11c.8 0 1.2-.6 1-1.3-.3-.8.2-1.7 1.1-1.7h1.2a2.2 2.2 0 0 0 2.2-2.2C13.5 5 11 2.5 8 2.5Z", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("circle", { cx: "5.5", cy: "7", r: ".9", fill: "currentColor" }), _jsx("circle", { cx: "8", cy: "5", r: ".9", fill: "currentColor" }), _jsx("circle", { cx: "10.6", cy: "6.3", r: ".9", fill: "currentColor" })] });
+const PlusIcon = _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M8 3v10M3 8h10", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" }) });
+const ExportIcon = _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M8 2.5v7M5 6.5l3 3 3-3M3 11v2.5h10V11", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) });
+/** The game tab body. */
+export function GameTab(props) {
+    const { sessionId, t, api, insertDraft, subscribeSessionEvents, touch, subscribeNav, takeNav, reveal } = props;
+    const [state, setState] = useState(null);
+    const [error, setError] = useState(null);
+    const [rev, setRev] = useState(0);
+    const [view, setView] = useState('play');
+    const [picking, setPicking] = useState(false);
+    const [styling, setStyling] = useState(false);
+    const [openElement, setOpenElement] = useState(null);
+    const [toastText, setToastText] = useState(null);
+    const [openChapter, setOpenChapter] = useState(null);
+    useEffect(() => reveal.mount(), [reveal]);
+    const toastTimer = useRef();
+    const refresh = useCallback(() => { touch(sessionId); }, [touch, sessionId]);
+    const toast = useCallback((text) => {
+        setToastText(text);
+        clearTimeout(toastTimer.current);
+        toastTimer.current = setTimeout(() => { setToastText(null); }, 2600);
+    }, []);
+    useEffect(() => subscribeSessionEvents(id => { if (id === sessionId)
+        setRev(n => n + 1); }), [subscribeSessionEvents, sessionId]);
+    // Jumps from the turn card: follow them, including one made before this tab mounted.
+    useEffect(() => {
+        const go = (target) => {
+            setPicking(false);
+            setStyling(false);
+            setView(target.view);
+            setOpenElement(target.elementId ?? null);
+            setOpenChapter(target.chapterId ?? null);
+            setRev(n => n + 1);
+        };
+        const parked = takeNav();
+        if (parked !== null)
+            go(parked);
+        return subscribeNav(go);
+    }, [subscribeNav, takeNav]);
+    useEffect(() => {
+        let live = true;
+        void api.state(sessionId).then(result => {
+            if (!live)
+                return;
+            if (result.ok) {
+                setState(result.value);
+                setError(null);
+            }
+            else
+                setError(result.error.message);
+        }).catch((e) => { if (live)
+            setError(String(e)); });
+        return () => { live = false; };
+    }, [api, sessionId, rev]);
+    const viewProps = {
+        t, sessionId, api, refresh, toast, insertDraft: text => insertDraft(sessionId, text), insertRef: ref => props.insertRef(sessionId, ref), reveal,
+    };
+    const project = state?.bound ?? null;
+    const choose = (projectId) => {
+        if (projectId !== null && projectId === project?.id) {
+            setPicking(false);
+            return;
+        }
+        void api.bind(sessionId, projectId).then(() => {
+            setPicking(false);
+            setView('play');
+            setOpenElement(null);
+            if (projectId !== null)
+                toast(t('toast.switched'));
+            refresh();
+        });
+    };
+    const startNew = () => {
+        if (insertDraft(sessionId, project === null ? t('draft.start') : t('draft.newProject')))
+            toast(t('toast.newDrafted'));
+    };
+    const foot = toastText !== null && _jsx("div", { className: css.toast, role: "status", children: toastText });
+    if (state === null) {
+        return _jsx(PanelRoot, { className: css.root, children: _jsx("div", { className: css.emptyCard, children: error === null ? t('loading') : t('error', { error }) }) });
+    }
+    // A project's own state left over from before a switch is not this project's.
+    if (project === null || picking) {
+        return _jsxs(PanelRoot, { className: css.root, children: [_jsx(PanelHeader, { title: project === null ? t('home.title') : t('pick.title'), moreLabel: t('more'), meta: project !== null ? t('pick.current', { title: project.title }) : undefined, ...(picking ? { onBack: () => { setPicking(false); }, backLabel: t('common.back') } : {}), actions: [{ id: 'refresh', label: t('refresh'), icon: RefreshIcon, onSelect: refresh }] }), _jsxs("div", { className: css.scroll, children: [project === null && _jsxs("section", { className: css.hero, children: [_jsx("span", { className: css.eyebrow, children: t('home.eyebrow') }), _jsx("h3", { className: css.heroTitle, children: t('home.headline') }), _jsxs("ol", { className: css.steps, children: [_jsxs("li", { children: [_jsx("strong", { children: t('home.step1') }), _jsx("span", { children: t('home.step1d') })] }), _jsxs("li", { children: [_jsx("strong", { children: t('home.step2') }), _jsx("span", { children: t('home.step2d') })] }), _jsxs("li", { children: [_jsx("strong", { children: t('home.step3') }), _jsx("span", { children: t('home.step3d') })] })] }), _jsx("button", { type: "button", className: css.primary, onClick: startNew, children: t('home.start') })] }), project === null && _jsxs("section", { className: css.block, children: [_jsx("h4", { className: css.blockTitle, children: t('style.galleryTitle') }), _jsx("p", { className: css.metaLine, children: t('style.galleryHint') }), _jsx(StyleGallery, { t: t, onPick: (_id, label) => { if (insertDraft(sessionId, t('draft.pickStyle', { label })))
+                                        toast(t('toast.drafted')); } })] }), (picking || state.projects.length > 0) && _jsxs("section", { className: css.block, children: [_jsx("h4", { className: css.blockTitle, children: picking ? t('pick.all', { count: state.projects.length }) : t('pick.existing') }), _jsx(ProjectSwitcher, { ...viewProps, currentId: project?.id ?? null, rev: rev, onChoose: choose, onNew: startNew }), project !== null && _jsx("button", { type: "button", className: css.link, onClick: () => { choose(null); }, children: t('pick.unbind') })] })] }), foot] });
+    }
+    return _jsx(ProjectWorkbench, { ...viewProps, project: project, view: view, setView: v => { setView(v); if (v !== 'elements')
+            setOpenElement(null); if (v !== 'design')
+            setOpenChapter(null); }, openChapter: openChapter, setOpenChapter: setOpenChapter, styling: styling, setStyling: setStyling, openElement: openElement, setOpenElement: setOpenElement, onPickProject: () => { setPicking(true); }, foot: foot });
+}
+/** The bound-project workbench. */
+function ProjectWorkbench(p) {
+    const { t, sessionId, api, project, view, setView, styling, setStyling, refresh, toast, insertDraft, reveal } = p;
+    const [, rerender] = useState(0);
+    useEffect(() => reveal.subscribe(() => { rerender(n => n + 1); }), [reveal]);
+    const notice = reveal.notice;
+    const autoConfirm = project.manifest?.autoConfirm ?? true;
+    const style = project.manifest?.artStyle;
+    const exportCurrent = () => {
+        if (project.current === null) {
+            toast(t('versions.exportNone'));
+            return;
+        }
+        const version = project.current.version;
+        void api.versionBundle(project.id, version).then(r => {
+            if (!(r.ok && r.value.ok))
+                return;
+            const url = URL.createObjectURL(new Blob([exportHtml(project.title, r.value.bundle.files)], { type: 'text/html' }));
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${project.title}-v${version}.html`;
+            a.click();
+            setTimeout(() => { URL.revokeObjectURL(url); }, 2000);
+            toast(t('toast.exported', { version }));
+        });
+    };
+    const actions = [
+        { id: 'refresh', label: t('refresh'), icon: RefreshIcon, onSelect: refresh },
+        { id: 'style', label: t('style.change'), icon: PaletteIcon, onSelect: () => { setStyling(!styling); }, pressed: styling },
+        { id: 'export', label: t('versions.exportCurrent'), icon: ExportIcon, onSelect: exportCurrent, menuOnly: true },
+        { id: 'switch', label: t('switch'), icon: SwitchIcon, onSelect: p.onPickProject, menuOnly: true },
+        { id: 'new', label: t('switcher.new'), icon: PlusIcon, onSelect: () => { if (insertDraft(t('draft.newProject')))
+                toast(t('toast.newDrafted')); }, menuOnly: true },
+    ];
+    const failing = project.lastCheck !== null && !project.lastCheck.ok;
+    const openProposals = project.proposals.filter(x => x.picked === undefined).length;
+    // Any touch in the panel means the user is busy here: the agent's request waits as a notice.
+    return _jsxs(PanelRoot, { className: css.root, onPointerDownCapture: () => { reveal.touched(); }, onKeyDownCapture: () => { reveal.touched(); }, children: [_jsx(PanelHeader, { title: _jsxs("button", { type: "button", className: css.titleSwitch, onClick: p.onPickProject, title: t('switch'), "aria-haspopup": "dialog", children: [_jsx("span", { children: project.title }), _jsx("span", { className: css.titleCaret, "aria-hidden": "true", children: "\u25BE" })] }), meta: _jsxs("span", { className: css.headMeta, children: [style !== undefined && _jsx("span", { title: artStyleLabel(style), children: _jsx(Tag, { tone: "quiet", children: artStyleName(style) }) }), _jsx(Tag, { tone: "quiet", children: project.current === null ? t('meta.noVersion') : t('meta.version', { version: project.current.version }) })] }), extra: _jsx("span", { className: css.switches, children: _jsxs("span", { className: css.switch, title: autoConfirm ? t('autoConfirm.onHint') : t('autoConfirm.offHint'), children: [_jsx(Switch, { checked: autoConfirm, label: t('autoConfirm.label'), onChange: next => { void api.setAutoConfirm(sessionId, project.id, next).then(() => { toast(next ? t('toast.autoOn') : t('toast.autoOff')); refresh(); }); } }), _jsx("span", { className: css.switchLabel, children: t('autoConfirm.label') })] }) }), actions: actions, moreLabel: t('more') }), _jsx(UnderlineTabs, { label: t('tabs.label'), value: view, onChange: setView, tabs: [
+                    { id: 'play', label: t('tabs.play'), badge: project.candidate !== null ? '●' : undefined },
+                    { id: 'elements', label: t('tabs.elements'), badge: project.elementErrors.length > 0 ? '!' : openProposals > 0 ? '●' : project.elements.length || undefined },
+                    { id: 'design', label: t('tabs.design') },
+                    { id: 'versions', label: t('tabs.versions'), badge: failing ? '!' : undefined },
+                ] }), styling && _jsxs("div", { className: css.overlay, children: [_jsxs("div", { className: css.overlayHead, children: [_jsx("strong", { children: t('style.restyleTitle') }), _jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.ghost, onClick: () => { setStyling(false); }, children: t('common.close') })] }), _jsx("p", { className: css.metaLine, children: t('style.restyleHint') }), _jsx(StyleGallery, { t: t, current: style, onPick: (id, label) => {
+                            if (id === style)
+                                return;
+                            void api.requestRestyle(sessionId, project.id, id).then(() => {
+                                if (insertDraft(t('draft.restyle', { label })))
+                                    toast(t('toast.restyleDrafted'));
+                                setStyling(false);
+                                refresh();
+                            });
+                        } })] }), _jsx(CommitBar, { ...p, project: project, onOpenVersions: () => { setView('versions'); } }), notice !== null && _jsxs("div", { className: css.navNotice, role: "status", children: [_jsx("span", { className: css.navNoticeText, children: notice.text }), _jsx("button", { type: "button", className: css.primary, onClick: () => { reveal.follow(); }, children: t('nav.go') }), _jsx("button", { type: "button", className: css.link, onClick: () => { reveal.dismiss(); }, children: t('nav.dismiss') })] }), view === 'play' && _jsx(PlayView, { ...p, onOpenElement: id => { p.setOpenElement(id); setView('elements'); }, onOpenVersions: () => { setView('versions'); } }), view === 'elements' && _jsx(ElementsView, { ...p, openId: p.openElement, onOpen: p.setOpenElement }), view === 'design' && _jsx(DesignView, { ...p, openChapter: p.openChapter, onOpenChapter: p.setOpenChapter, onStyle: () => { setStyling(true); } }), view === 'versions' && _jsx(VersionsView, { ...p }), p.foot] });
+}
+/**
+ * 有新改动还没进游戏: whatever the working files hold that the play area
+ * does not — panel edits, the agent's or a CLI member's writes, the user's
+ * own editor — with 检查并发版 to cut a version through the same checks
+ * (published by the user). It polls while the page is visible, which is how
+ * a member's writes show up without a turn. While someone is still writing
+ * (a turn runs, or a file changed in the last 20 s) the button is disabled.
+ */
+function CommitBar({ t, sessionId, api, project, refresh, toast, insertDraft, onOpenVersions }) {
+    const [changes, setChanges] = useState(null);
+    const [checking, setChecking] = useState(false);
+    const [showFiles, setShowFiles] = useState(false);
+    const [tick, setTick] = useState(0);
+    useEffect(() => {
+        let live = true;
+        void api.changes(project.id).then(r => { if (live && r.ok && r.value.ok)
+            setChanges(r.value); });
+        return () => { live = false; };
+    }, [api, project, tick]);
+    useEffect(() => {
+        const id = setInterval(() => { if (document.visibilityState === 'visible')
+            setTick(n => n + 1); }, POLL_MS);
+        return () => { clearInterval(id); };
+    }, []);
+    // A 'recent' writer goes quiet on its own: look again right after.
+    const lastAt = changes?.lastAt ?? null;
+    useEffect(() => {
+        if (changes?.busy !== 'recent' || lastAt === null)
+            return;
+        const timer = setTimeout(() => { setTick(n => n + 1); }, Math.max(500, Date.parse(lastAt) + QUIET_MS + 500 - Date.now()));
+        return () => { clearTimeout(timer); };
+    }, [changes?.busy, lastAt]);
+    useEffect(() => { setShowFiles(false); }, [project.id]);
+    if (changes === null || !changes.hasEntry || (changes.count === 0 && changes.edits.length === 0))
+        return null;
+    const commit = () => {
+        setChecking(true);
+        void api.commit(sessionId, project.id).then(r => {
+            setChecking(false);
+            const code = failureOf(r);
+            if (code !== undefined || !r.ok || !r.value.ok) {
+                toast(t('commit.error', { error: code ?? 'io' }));
+                return;
+            }
+            const result = r.value;
+            if (result.kind === 'deployed')
+                toast(t('commit.deployed', { version: result.version }));
+            else if (result.kind === 'candidate')
+                toast(t('commit.candidate', { version: result.version }));
+            else if (result.kind === 'unchanged')
+                toast(t('commit.unchanged'));
+            else if (result.kind === 'no-entry')
+                toast(t('commit.noEntry'));
+            setTick(n => n + 1);
+            refresh();
+        });
+    };
+    const live = changes.against;
+    const editList = changes.edits.slice(0, 3).map(e => e.text).join('、') + (changes.edits.length > 3 ? t('commit.more', { count: changes.edits.length - 3 }) : '');
+    const summary = [
+        changes.count > 0 ? (live === null ? t('commit.firstSummary', { count: changes.count }) : t('commit.summary', { count: changes.count, ago: agoText(t, changes.lastAt) })) : '',
+        changes.edits.length > 0 ? t('commit.edits', { list: editList }) : '',
+    ].filter(Boolean).join(' · ');
+    const state = checking ? 'checking' : changes.busy !== null ? 'busy' : changes.failed !== null ? 'failed' : 'ready';
+    const newest = changes.files.find(f => f.kind !== 'removed')?.path ?? changes.files[0]?.path ?? '';
+    return _jsxs(_Fragment, { children: [_jsxs("div", { className: css.commitBar, "data-state": state, role: "status", children: [_jsxs("span", { className: css.commitText, children: [_jsx("strong", { children: state === 'checking' ? t('commit.checking')
+                                    : state === 'busy' ? t('commit.busyTitle')
+                                        : state === 'failed' ? (live === null ? t('commit.failedFirst') : t('commit.failed', { version: live }))
+                                            : live === null ? t('commit.titleFirst') : t('commit.title') }), _jsx("span", { className: css.commitList, children: state === 'checking' ? t('commit.checkingSteps')
+                                    : state === 'busy' ? (changes.busy === 'turn' ? t('commit.busyTurn') : t('commit.busyRecent', { ago: agoText(t, changes.lastAt), file: newest }))
+                                        : state === 'failed' ? (changes.failed ?? []).slice(0, 2).map(f => `${f.where}：${f.message}`).join('；')
+                                            : summary })] }), _jsxs("span", { className: css.commitActions, children: [state === 'failed' && _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: css.link, onClick: onOpenVersions, children: t('commit.details') }), _jsx("button", { type: "button", className: css.ghost, onClick: () => {
+                                            if (insertDraft(t('draft.commitFailed', { list: (changes.failed ?? []).map(f => `- ${f.where}：${f.message}`).join('\n') })))
+                                                toast(t('toast.drafted'));
+                                        }, children: t('commit.toAgent') })] }), state !== 'checking' && changes.count > 0 && _jsx("button", { type: "button", className: css.link, "aria-expanded": showFiles, onClick: () => { setShowFiles(!showFiles); }, children: showFiles ? t('commit.hideFiles') : t('commit.showFiles') }), _jsx("button", { type: "button", className: css.primary, disabled: state === 'checking' || state === 'busy', onClick: commit, children: state === 'failed' ? t('commit.retry') : t('commit.go') })] })] }), showFiles && state !== 'checking' && _jsxs("div", { className: css.commitFiles, children: [changes.files.map(f => _jsxs("div", { children: [_jsx("span", { className: css.commitKind, children: f.kind === 'added' ? 'A' : f.kind === 'removed' ? 'D' : 'M' }), f.path] }, f.path)), changes.count > changes.files.length && _jsx("div", { children: t('commit.moreFiles', { count: changes.count - changes.files.length }) })] })] });
+}
+/** How often the bar looks at the working files while the page is visible. */
+const POLL_MS = 8_000;
+/** Matches the host's quiet window for a 'recent' writer (store BUSY_QUIET_MS). */
+const QUIET_MS = 20_000;
+/** 「12 秒前」-style age of an ISO time. */
+function agoText(t, at) {
+    if (at === null)
+        return '';
+    const s = Math.max(0, Math.round((Date.now() - Date.parse(at)) / 1000));
+    if (s < 5)
+        return t('ago.now');
+    if (s < 60)
+        return t('ago.s', { n: s });
+    if (s < 3600)
+        return t('ago.m', { n: Math.round(s / 60) });
+    return t('ago.h', { n: Math.round(s / 3600) });
+}

package/lib/types/client/PlayFrame.d.ts

@@ -0,0 +1,54 @@
+/**
+ * The play frame: one version in a `sandbox="allow-scripts"` iframe (an
+ * opaque origin — no cookies, no host storage, no network by the frame's own
+ * CSP), fed by postMessage through the shared loader. Saves live in this
+ * browser's localStorage per project; slider values are pushed in live
+ * (element edits wait for a committed version); the pick overlay asks the game what is under a click.
+ * When a play session ends (version change, restart, unmount) its length and
+ * errors go to the playtest log.
+ */
+import { type ReactNode } from 'react';
+import type { BundleFile } from '../types.ts';
+import { type PickRef } from '../vfs.ts';
+/** Forget a project's saves (重开存档). */
+export declare function clearSaves(projectId: string): void;
+/** Play-session report handed to the playtest log. */
+export interface PlayReport {
+    readonly version: number;
+    readonly seconds: number;
+    readonly errors: string[];
+}
+/** One answered pick: the game's reference (a bare id becomes `{ id }`), and how the click was made. */
+export interface PickAnswer {
+    readonly ref: PickRef | null;
+    readonly supported: boolean;
+    /** Shift held: keep picking (several references in one message). */
+    readonly shift: boolean;
+}
+/** Rings for the candidate's changes, as the game's `highlight` takes them. */
+export type HighlightList = readonly {
+    readonly id: string;
+    readonly tone: 'changed' | 'added';
+}[];
+/** Props of the play frame. */
+export interface PlayFrameProps {
+    readonly projectId: string;
+    readonly version: number;
+    readonly files: Readonly<Record<string, BundleFile>>;
+    /** Restart counter: bump to reload the frame. */
+    readonly run: number;
+    /** Live slider values (key → value), pushed on every change. */
+    readonly params: Readonly<Record<string, number>>;
+    readonly picking: boolean;
+    readonly onPicked: (answer: PickAnswer) => void;
+    /** The hover hint's text for what is under the pointer while picking. */
+    readonly hoverLabel: (ref: PickRef) => string;
+    /** Candidate diff rings; null clears them. */
+    readonly highlight: HighlightList | null;
+    readonly onErrors: (errors: readonly string[]) => void;
+    readonly onReport: (report: PlayReport) => void;
+    readonly label: string;
+}
+/** The sandboxed frame with a pick overlay. */
+export declare function PlayFrame({ projectId, version, files, run, params, picking, onPicked, hoverLabel, highlight, onErrors, onReport, label }: PlayFrameProps): ReactNode;
+//# sourceMappingURL=PlayFrame.d.ts.map