@khorsheed/dsh-game 0.0.0-stage → 0.1.0

package/lib/types/agent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The `./agent` composition entry: the game mode's tools, their guidance
+ * section and the `gamedev` / `game-design` skills. The package's
+ * `cordis.patch.yml` inserts this row DISABLED at the profile root; the game
+ * preset (`preset-dsh-gamedev`) names it in its own composition, so the tools
+ * exist for that preset's sessions only. Never both live at once — the tools
+ * would register twice (the canvas `./agent` pattern).
+ * @module @khorsheed/dsh-game/agent
+ */
+import type { Context } from '@deepseek-ai/cordis';
+/** Cordis plugin name used by loader diagnostics. */
+export declare const name = "game-agent";
+/** No hard injects: the core service is probed, the registries join through deferred injection. */
+export declare const inject: never[];
+/**
+ * Register the tools, the guidance and the skills, or nothing when the core is absent.
+ * @param ctx - the mounting scope (a preset's plane, normally).
+ */
+export declare function apply(ctx: Context): void;
+//# sourceMappingURL=agent.d.ts.map

package/lib/types/agent.js

@@ -0,0 +1,42 @@
+import { GAME_SKILLS } from "./skills.js";
+import { gameToolDefinitions } from "./tools.js";
+/** Cordis plugin name used by loader diagnostics. */
+export const name = 'game-agent';
+/** No hard injects: the core service is probed, the registries join through deferred injection. */
+export const inject = [];
+/** One pointer paragraph; the rules live in the skills. */
+const GUIDANCE = 'This session is the game-development mode. The user designs and plays a small web game (2D or 3D) with you: '
+    + 'the conversation decides what the game is, the right-sidebar game tab shows the design doc and plays the latest '
+    + 'version that passed the checks. Use game_open / game_read for the project; write its files with the '
+    + 'ordinary file tools. Whenever you changed something playable, call game_publish before you report or ask anything, '
+    + 'without waiting to be asked — a question does not end the turn, so the play area would still show the old version. '
+    + 'When a CLI member reports its changes, publish them for it (members have no publish tool). Load the game-design skill when shaping the game with the user, and the gamedev skill before '
+    + 'writing game code. Answer in the user\'s language.';
+/**
+ * Register the tools, the guidance and the skills, or nothing when the core is absent.
+ * @param ctx - the mounting scope (a preset's plane, normally).
+ */
+export function apply(ctx) {
+    const store = ctx.get('gameStore');
+    if (store === undefined) {
+        ctx.logger.warn('game-agent: the gameStore service is absent — the game tools are not registered');
+        return;
+    }
+    ctx.inject(['tools'], (toolsCtx) => {
+        for (const definition of gameToolDefinitions(store)) {
+            toolsCtx.effect(() => toolsCtx.tools.register(definition), `game-agent: ${definition.name} tool`);
+        }
+    });
+    ctx.inject(['systemPrompt'], (promptCtx) => {
+        const sections = promptCtx.get('systemPrompt');
+        sections?.section({ name: 'game:mode', order: 152, text: GUIDANCE });
+    });
+    ctx.inject(['skills'], (skillCtx) => {
+        const skills = skillCtx.get('skills');
+        if (skills === undefined)
+            return;
+        for (const skill of GAME_SKILLS) {
+            skillCtx.effect(() => skills.register({ ...skill, source: 'runtime', provider: '@khorsheed/dsh-game' }), `game-agent: ${skill.name} skill`);
+        }
+    });
+}

package/lib/types/checks.d.ts

@@ -0,0 +1,44 @@
+import type { BundleFile, CheckFailure } from './types.ts';
+/** What the browser part reports. */
+export interface BrowserCheckResult {
+    readonly failures: readonly CheckFailure[];
+    readonly passed: number;
+    /** Set when the browser part did not run at all. */
+    readonly skipped?: string;
+    /** A webp screenshot of the first frames, base64, when the smoke run got that far. */
+    readonly screenshot?: string;
+}
+/** Per-run inputs that come from the project's runtime kit. */
+export interface BrowserCheckOptions {
+    /** The kit's blank-screen expression (see `RuntimeKit.blankProbe`). */
+    readonly blankProbe: string;
+}
+/** The browser-check seam (specs stand in a fake). */
+export interface BrowserChecker {
+    run(files: Readonly<Record<string, BundleFile>>, tests: Readonly<Record<string, string>>, options: BrowserCheckOptions): Promise<BrowserCheckResult>;
+    dispose(): Promise<void>;
+}
+/**
+ * The Chrome executable to drive: the configured path, `CHROME_PATH`, or the
+ * first common install location that exists.
+ * @param configured - the plugin config's `chromePath`.
+ * @returns the path, or undefined when none is found.
+ */
+export declare function findChrome(configured?: string): string | undefined;
+/** The headless-Chrome checker. */
+export declare class ChromeChecker implements BrowserChecker {
+    private readonly chromePath?;
+    private browser;
+    private idle;
+    private profile;
+    /** @param chromePath - configured executable (optional). */
+    constructor(chromePath?: string | undefined);
+    private launch;
+    private page;
+    private armIdle;
+    /** Load the build into a fresh page with CSP bypassed and wait for ready. */
+    private load;
+    run(files: Readonly<Record<string, BundleFile>>, tests: Readonly<Record<string, string>>, options: BrowserCheckOptions): Promise<BrowserCheckResult>;
+    dispose(): Promise<void>;
+}
+//# sourceMappingURL=checks.d.ts.map

package/lib/types/checks.js

@@ -0,0 +1,267 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+/**
+ * The end-of-turn checks (proposal §6): data validation in plain node, then
+ * a smoke run and the project's own test scripts in headless Chrome, all on
+ * the same sandbox loader the panel uses.
+ *
+ * The browser is the machine's installed Chrome (or `chromePath`), driven by
+ * `puppeteer-core` loaded on first use — a host without Chrome still runs
+ * the data checks and reports the browser part as skipped instead of
+ * failing. One browser stays up between turns and shuts down after a minute
+ * idle.
+ *
+ * Test scripts are `tests/*.test.js` the agent writes beside the code. Each
+ * file runs on a fresh load of the build, as the body of an async function
+ * receiving `test`, `assert`, `game` (= `window.dshGame`), `step`, `press`
+ * and `drag` (calls the game's optional `look(dx, dy)`); `test(name, fn)`
+ * registers a case and every case runs in order.
+ * @module @khorsheed/dsh-game
+ */
+import { existsSync } from 'node:fs';
+import { mkdtemp, rm } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { shellHtml } from "./vfs.js";
+/** Common Chrome install locations, tried when no path is configured. */
+const CHROME_CANDIDATES = [
+    '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
+    '/Applications/Chromium.app/Contents/MacOS/Chromium',
+    '/usr/bin/google-chrome',
+    '/usr/bin/google-chrome-stable',
+    '/usr/bin/chromium',
+    '/usr/bin/chromium-browser',
+    'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+];
+/**
+ * The Chrome executable to drive: the configured path, `CHROME_PATH`, or the
+ * first common install location that exists.
+ * @param configured - the plugin config's `chromePath`.
+ * @returns the path, or undefined when none is found.
+ */
+export function findChrome(configured) {
+    for (const candidate of [configured, process.env.CHROME_PATH, ...CHROME_CANDIDATES]) {
+        if (candidate !== undefined && candidate !== '' && existsSync(candidate))
+            return candidate;
+    }
+    return undefined;
+}
+/** How long the game gets to set `dshGame.ready`. */
+const READY_TIMEOUT_MS = 4000;
+/** …and how long while it says it is still loading assets (`dshGame.loading`). */
+const LOADING_TIMEOUT_MS = 20_000;
+/** How long one test file may run. */
+const TEST_TIMEOUT_MS = 8000;
+/** The viewport checks render at. */
+const VIEWPORT = { width: 640, height: 400 };
+/** The in-page wait for `window.dshGame.ready`; resolves true/false. */
+const WAIT_READY = `(async () => {
+  const start = Date.now();
+  for (;;) {
+    const g = window.dshGame;
+    if (g && g.ready) {
+      // Models still loading (dsh3d's glTF looks): smoke, tests and the screenshot wait for them.
+      if (window.__dshPending) await Promise.race([window.__dshPending(), new Promise(r => setTimeout(r, ${LOADING_TIMEOUT_MS}))]);
+      return true;
+    }
+    const limit = g && g.loading ? ${LOADING_TIMEOUT_MS} : ${READY_TIMEOUT_MS};
+    if (Date.now() - start >= limit) return false;
+    await new Promise(r => setTimeout(r, 40));
+  }
+})()`;
+/**
+ * The in-page smoke run: 2 s of game time, then the kit's blank-screen probe.
+ * @param blankProbe - the kit's expression (true blank, false drawn, null no canvas).
+ */
+function smokeExpression(blankProbe) {
+    return `(async () => {
+  const g = window.dshGame;
+  const out = { stepped: false, blank: null };
+  if (g && typeof g.step === 'function') { for (let i = 0; i < 120; i++) g.step(1 / 60); out.stepped = true; }
+  await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+  out.blank = ${blankProbe};
+  return out;
+})()`;
+}
+/**
+ * The in-page test harness for one file. The body is spliced in as the
+ * function body — CSP is bypassed for the check page, never for the panel.
+ * @param body - the test file's text.
+ * @returns the expression to evaluate.
+ */
+function testExpression(body) {
+    return `(async () => {
+  const cases = [];
+  const test = (name, fn) => { cases.push({ name: String(name), fn }); };
+  const fail = (msg) => { throw new Error(msg); };
+  const assert = (cond, msg) => { if (!cond) fail(msg || 'assert 失败'); };
+  assert.equal = (a, b, msg) => { if (a !== b) fail((msg ? msg + '：' : '') + '期望 ' + JSON.stringify(b) + '，实际 ' + JSON.stringify(a)); };
+  assert.near = (a, b, eps, msg) => { if (!(Math.abs(a - b) <= (eps ?? 1e-6))) fail((msg ? msg + '：' : '') + '期望约 ' + b + '，实际 ' + a); };
+  const game = window.dshGame;
+  const step = (n = 1, dt = 1 / 60) => { for (let i = 0; i < n; i++) game.step(dt); };
+  const press = (key, frames = 1) => { game.input(key, true); step(frames); game.input(key, false); };
+  const drag = (dx, dy, frames = 1) => { if (typeof game.look !== 'function') fail('window.dshGame.look 不是函数，没法模拟鼠标拖动'); game.look(dx, dy); step(frames); };
+  try {
+    await (async (test, assert, game, step, press, drag) => {\n${body}\n})(test, assert, game, step, press, drag);
+  } catch (e) { return { load: String(e && e.message || e), results: [] }; }
+  const results = [];
+  for (const c of cases) {
+    try { await c.fn(); results.push({ name: c.name, ok: true }); }
+    catch (e) { results.push({ name: c.name, ok: false, msg: String(e && e.message || e).slice(0, 300) }); }
+  }
+  return { results };
+})()`;
+}
+/** The errors the bridge collected, worded for the model. */
+const READ_ERRORS = '(window.__gamedevErrors || []).slice(0, 5)';
+/** Race a promise against a timeout. */
+async function within(ms, work, what) {
+    let timer;
+    try {
+        return await Promise.race([
+            work,
+            new Promise((_, reject) => { timer = setTimeout(() => reject(new Error(`${what}超时（${ms / 1000} 秒）`)), ms); }),
+        ]);
+    }
+    finally {
+        if (timer !== undefined)
+            clearTimeout(timer);
+    }
+}
+/** The headless-Chrome checker. */
+export class ChromeChecker {
+    chromePath;
+    browser;
+    idle;
+    profile;
+    /** @param chromePath - configured executable (optional). */
+    constructor(chromePath) {
+        this.chromePath = chromePath;
+    }
+    async launch(executablePath) {
+        // A variable specifier keeps the typert overlay (a harness clone without
+        // puppeteer) from resolving it, and the driver loads on first use only.
+        const specifier = 'puppeteer-core';
+        const { launch } = (await import(__rewriteRelativeImportExtension(specifier)));
+        this.profile = await mkdtemp(join(tmpdir(), 'dsh-game-chrome-'));
+        const browser = await launch({
+            executablePath,
+            headless: true,
+            pipe: true,
+            userDataDir: this.profile,
+            args: ['--no-first-run', '--no-default-browser-check', '--disable-background-networking', '--mute-audio'],
+            timeout: 30_000,
+        });
+        browser.on('disconnected', () => { this.browser = undefined; });
+        return browser;
+    }
+    async page(executablePath) {
+        if (this.idle !== undefined)
+            clearTimeout(this.idle);
+        this.browser ??= this.launch(executablePath).catch((error) => {
+            this.browser = undefined;
+            throw error;
+        });
+        return (await this.browser).newPage();
+    }
+    armIdle() {
+        if (this.idle !== undefined)
+            clearTimeout(this.idle);
+        this.idle = setTimeout(() => { void this.dispose(); }, 60_000);
+        this.idle.unref?.();
+    }
+    /** Load the build into a fresh page with CSP bypassed and wait for ready. */
+    async load(executablePath, files) {
+        const page = await this.page(executablePath);
+        await page.setBypassCSP(true);
+        await page.setViewport(VIEWPORT);
+        await page.evaluateOnNewDocument(`window.__VFS_FILES__ = ${JSON.stringify(files)};`);
+        const shell = shellHtml('<script>window.__GAMEDEV_TEST__=true</script>');
+        await page.goto(`data:text/html;base64,${Buffer.from(shell).toString('base64')}`, { waitUntil: 'load', timeout: 10_000 });
+        const ready = await page.evaluate(WAIT_READY);
+        return { page, ready };
+    }
+    async run(files, tests, options) {
+        const executablePath = findChrome(this.chromePath);
+        if (executablePath === undefined)
+            return { failures: [], passed: 0, skipped: '没找到 Chrome，只跑了数据校验' };
+        const failures = [];
+        let passed = 0;
+        let screenshot;
+        try {
+            const { page, ready } = await this.load(executablePath, files);
+            try {
+                if (!ready) {
+                    failures.push({ where: 'smoke', message: `游戏没在 ${READY_TIMEOUT_MS / 1000} 秒内就绪（加载资源时设 dshGame.loading = true 可放宽到 ${LOADING_TIMEOUT_MS / 1000} 秒）：window.dshGame.ready 一直不是 true` });
+                }
+                else {
+                    const smoke = await within(5000, page.evaluate(smokeExpression(options.blankProbe)), '冒烟运行');
+                    if (!smoke.stepped)
+                        failures.push({ where: 'smoke', message: 'window.dshGame.step 不是函数，测试没法推进游戏时间' });
+                    if (smoke.blank === true)
+                        failures.push({ where: 'smoke', message: '跑了 2 秒后画布仍是同一种颜色（什么都没画出来）' });
+                }
+                const errors = await page.evaluate(READ_ERRORS);
+                for (const e of errors)
+                    failures.push({ where: 'smoke', message: `运行报错（${e.kind}）：${e.msg.slice(0, 300)}` });
+                screenshot = await page.screenshot({ type: 'webp', quality: 70, encoding: 'base64', captureBeyondViewport: false });
+            }
+            finally {
+                await page.close().catch(() => { });
+            }
+            // Tests only make sense on a build that loads.
+            if (failures.length === 0) {
+                for (const [file, body] of Object.entries(tests).sort(([a], [b]) => a.localeCompare(b))) {
+                    const { page, ready } = await this.load(executablePath, files);
+                    try {
+                        if (!ready) {
+                            failures.push({ where: file, message: '这次加载游戏没有就绪，测试没跑' });
+                            continue;
+                        }
+                        const outcome = await within(TEST_TIMEOUT_MS, page.evaluate(testExpression(body)), '测试');
+                        if (outcome.load !== undefined)
+                            failures.push({ where: file, message: `测试文件本身出错：${outcome.load}` });
+                        if (outcome.load === undefined && outcome.results.length === 0)
+                            failures.push({ where: file, message: '没有用 test(名称, 函数) 登记任何用例' });
+                        for (const r of outcome.results) {
+                            if (r.ok)
+                                passed++;
+                            else
+                                failures.push({ where: `${file} › ${r.name}`, message: r.msg ?? '失败' });
+                        }
+                    }
+                    catch (error) {
+                        failures.push({ where: file, message: error.message.split('\n')[0] ?? '出错' });
+                    }
+                    finally {
+                        await page.close().catch(() => { });
+                    }
+                }
+            }
+        }
+        catch (error) {
+            return { failures, passed, skipped: `浏览器检查没跑起来：${error.message.split('\n')[0]?.slice(0, 200)}` };
+        }
+        finally {
+            this.armIdle();
+        }
+        return { failures, passed, ...(screenshot === undefined ? {} : { screenshot }) };
+    }
+    async dispose() {
+        if (this.idle !== undefined)
+            clearTimeout(this.idle);
+        const pending = this.browser;
+        this.browser = undefined;
+        if (pending !== undefined)
+            await pending.then(b => b.close()).catch(() => { });
+        if (this.profile !== undefined)
+            await rm(this.profile, { recursive: true, force: true }).catch(() => { });
+        this.profile = undefined;
+    }
+}

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

@@ -0,0 +1,22 @@
+/**
+ * 策划: the living design doc. The one-pager and the pillars sit pinned on
+ * top (every later idea is weighed against them); the chapters fold below,
+ * each with its status, a 刚更新 mark when it changed since the user last
+ * opened it, and in-place editing (the user's words win — the agent reads
+ * the file). 元素与数值 is drawn from the element files with a bar chart per
+ * number; 试玩记录 is the log the plugin keeps.
+ */
+import { type ReactNode } from 'react';
+import type { ProjectView } from '../types.ts';
+import { type ViewProps } from './contract.ts';
+/** Props of the design view. */
+export interface DesignViewProps extends ViewProps {
+    readonly project: ProjectView;
+    readonly onStyle: () => void;
+    /** The chapter a jump asked to open. */
+    readonly openChapter?: string | null;
+    readonly onOpenChapter?: (id: string | null) => void;
+}
+/** The design view. */
+export declare function DesignView(props: DesignViewProps): ReactNode;
+//# sourceMappingURL=DesignView.d.ts.map

package/lib/types/client/DesignView.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * 策划: the living design doc. The one-pager and the pillars sit pinned on
+ * top (every later idea is weighed against them); the chapters fold below,
+ * each with its status, a 刚更新 mark when it changed since the user last
+ * opened it, and in-place editing (the user's words win — the agent reads
+ * the file). 元素与数值 is drawn from the element files with a bar chart per
+ * number; 试玩记录 is the log the plugin keeps.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { artStyleLabel } from "../project.js";
+import { failureOf } from "./contract.js";
+import { Markdown } from "./markdown.js";
+import css from './GameTab.module.css';
+const STATUS_KEY = { todo: 'design.todo', draft: 'design.draft', done: 'design.done' };
+/** Per-project "last seen" times of chapters (localStorage, per viewer). */
+function seenKey(projectId) {
+    return `dsh-game:seen:${projectId}`;
+}
+function readSeen(projectId) {
+    try {
+        return JSON.parse(localStorage.getItem(seenKey(projectId)) ?? '{}');
+    }
+    catch {
+        return {};
+    }
+}
+function writeSeen(projectId, seen) {
+    try {
+        localStorage.setItem(seenKey(projectId), JSON.stringify(seen));
+    }
+    catch {
+        // Per-viewer convenience only.
+    }
+}
+/** The design view. */
+export function DesignView(props) {
+    const { t, project } = props;
+    const manifest = project.manifest;
+    const [open, setOpen] = useState(props.openChapter ?? null);
+    useEffect(() => { if (props.openChapter != null)
+        setOpen(props.openChapter); }, [props.openChapter]);
+    const [seen, setSeen] = useState(() => readSeen(project.id));
+    useEffect(() => { setSeen(readSeen(project.id)); }, [project.id]);
+    const toggle = (chapter) => {
+        setOpen(o => (o === chapter.id ? null : chapter.id));
+        const next = { ...seen, [chapter.id]: Date.now() };
+        setSeen(next);
+        writeSeen(project.id, next);
+    };
+    const chapters = project.chapters.filter(c => c.id !== 'pillars');
+    const pillarsChapter = project.chapters.find(c => c.id === 'pillars');
+    const done = project.chapters.filter(c => !c.generated && c.status === 'done').length;
+    const authored = project.chapters.filter(c => !c.generated).length;
+    return _jsxs("div", { className: css.scroll, children: [_jsx(OnePager, { ...props }), pillarsChapter !== undefined && _jsxs("section", { className: `${css.chapter} ${css.notesChapter}`, "data-open": open === 'pillars' ? 'true' : 'false', children: [_jsxs("button", { type: "button", className: css.chapterHead, "aria-expanded": open === 'pillars', onClick: () => { toggle(pillarsChapter); }, children: [_jsx("span", { className: css.chevron, "aria-hidden": "true", children: open === 'pillars' ? '▾' : '▸' }), _jsx("span", { className: css.chapterTitle, children: pillarsChapter.title }), _jsx("span", { className: css.metaLine, children: t('design.pillarNotesHint') }), _jsx("span", { className: css.spacer }), _jsx("span", { className: css.status, "data-status": pillarsChapter.status, children: t(STATUS_KEY[pillarsChapter.status]) })] }), open === 'pillars' && _jsx(ChapterBody, { ...props, chapter: pillarsChapter })] }), _jsxs("div", { className: css.progressRow, children: [_jsx("span", { className: css.metaLine, children: t('design.progress', { done, total: authored }) }), _jsx("span", { className: css.progressBar, children: _jsx("span", { style: { width: `${authored === 0 ? 0 : done / authored * 100}%` } }) })] }), _jsx("div", { className: css.chapters, children: chapters.map(c => {
+                    const fresh = c.mtime > 0 && c.text !== '' && c.mtime > (seen[c.id] ?? 0) && Date.now() - c.mtime < 1000 * 60 * 60 * 24 * 7;
+                    const isOpen = open === c.id;
+                    return _jsxs("section", { className: css.chapter, "data-open": isOpen ? 'true' : 'false', children: [_jsxs("button", { type: "button", className: css.chapterHead, "aria-expanded": isOpen, onClick: () => { toggle(c); }, children: [_jsx("span", { className: css.chevron, "aria-hidden": "true", children: isOpen ? '▾' : '▸' }), _jsx("span", { className: css.chapterTitle, children: c.title }), fresh && _jsx("span", { className: css.freshTag, children: t('design.fresh') }), _jsx("span", { className: css.spacer }), _jsx("span", { className: css.status, "data-status": c.generated ? 'generated' : c.status, children: c.generated ? t('design.generated') : t(STATUS_KEY[c.status]) })] }), isOpen && (c.id === 'elements'
+                                ? _jsx(NumbersChapter, { t: t, elements: project.elements, types: manifest?.elementTypes ?? [] })
+                                : _jsx(ChapterBody, { ...props, chapter: c }))] }, c.id);
+                }) })] });
+}
+/** The one-pager (game.json): pitch, element types, style, pillars — read, or edited in place. */
+function OnePager(props) {
+    const { t, sessionId, api, project, onStyle, refresh } = props;
+    const manifest = project.manifest;
+    const [editing, setEditing] = useState(false);
+    const [pitch, setPitch] = useState('');
+    const [types, setTypes] = useState('');
+    const [pillars, setPillars] = useState('');
+    const [error, setError] = useState(null);
+    const begin = () => {
+        setPitch(manifest?.pitch ?? '');
+        setTypes((manifest?.elementTypes ?? []).join('、'));
+        setPillars((manifest?.pillars ?? []).join('\n'));
+        setError(null);
+        setEditing(true);
+    };
+    return _jsxs("section", { className: css.onePager, children: [_jsxs("div", { className: css.onePagerHead, children: [_jsx("span", { className: css.eyebrow, children: t('design.onePager') }), _jsx("span", { className: css.metaLine, children: "game.json" }), _jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.styleChip, onClick: onStyle, title: t('style.change'), children: t('design.style', { style: manifest === null ? '—' : artStyleLabel(manifest.artStyle) }) }), !editing && manifest !== null && _jsx("button", { type: "button", className: css.ghost, onClick: begin, children: t('design.editOnePager') })] }), editing
+                ? _jsxs("div", { className: css.onePagerForm, children: [_jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldKey, children: t('design.pitchLabel') }), _jsx("textarea", { className: css.textarea, rows: 2, value: pitch, onChange: e => { setPitch(e.target.value); } })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldKey, children: t('design.typesLabel') }), _jsx("input", { className: css.input, value: types, onChange: e => { setTypes(e.target.value); } })] }), _jsxs("label", { className: css.field, children: [_jsx("span", { className: css.fieldKey, children: t('design.pillarsLabel') }), _jsx("textarea", { className: css.textarea, rows: 4, value: pillars, onChange: e => { setPillars(e.target.value); } })] }), error !== null && _jsx("p", { className: css.warnText, children: error }), _jsxs("div", { className: css.rowEnd, children: [_jsx("button", { type: "button", className: css.ghost, onClick: () => { setEditing(false); }, children: t('common.cancel') }), _jsx("button", { type: "button", className: css.primary, onClick: () => {
+                                        void api.setOnePager(sessionId, project.id, { pitch, elementTypes: types, pillars }).then(r => {
+                                            if (failureOf(r) !== undefined) {
+                                                setError(t('design.onePagerInvalid'));
+                                                return;
+                                            }
+                                            setEditing(false);
+                                            refresh();
+                                        });
+                                    }, children: t('common.save') })] })] })
+                : _jsxs(_Fragment, { children: [_jsx("p", { className: css.pitch, children: manifest?.pitch || t('design.noPitch') }), _jsx("div", { className: css.typeRow, children: (manifest?.elementTypes ?? []).map(type => _jsx("span", { className: css.typeTag, children: type }, type)) }), _jsxs("div", { className: css.pillars, children: [_jsx("span", { className: css.eyebrow, children: t('design.pillars') }), (manifest?.pillars.length ?? 0) > 0
+                                    ? _jsx("ol", { className: css.pillarList, children: manifest.pillars.map((p, i) => _jsx("li", { children: p }, i)) })
+                                    : _jsx("p", { className: css.metaLine, children: t('design.noPillars') })] })] })] });
+}
+/** One chapter's body: read, or edit in place. */
+function ChapterBody(props) {
+    const { t, sessionId, api, project, chapter, refresh } = props;
+    const [editing, setEditing] = useState(false);
+    const [text, setText] = useState(chapter.text);
+    useEffect(() => { if (!editing)
+        setText(chapter.text); }, [chapter.text, editing]);
+    if (editing) {
+        return _jsxs("div", { className: css.chapterBody, children: [_jsx("textarea", { className: css.textarea, rows: Math.min(18, Math.max(6, text.split('\n').length + 1)), value: text, onChange: e => { setText(e.target.value); } }), _jsxs("div", { className: css.rowEnd, children: [_jsx("span", { className: css.metaLine, children: t('design.editNote') }), _jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.ghost, onClick: () => { setEditing(false); setText(chapter.text); }, children: t('common.cancel') }), _jsx("button", { type: "button", className: css.primary, onClick: () => {
+                                void api.writeChapter(sessionId, project.id, chapter.id, text).then(r => {
+                                    if (failureOf(r) === undefined) {
+                                        setEditing(false);
+                                        refresh();
+                                    }
+                                });
+                            }, children: t('common.save') })] })] });
+    }
+    return _jsxs("div", { className: css.chapterBody, children: [chapter.text === ''
+                ? _jsx("p", { className: css.lead, children: chapter.generated ? t('design.emptyGenerated') : chapter.id === 'pillars' ? t('design.pillarNotesEmpty') : t('design.empty', { file: chapter.file }) })
+                : _jsx(Markdown, { text: chapter.text }), !chapter.generated && _jsxs("div", { className: css.rowEnd, children: [_jsx("span", { className: css.metaLine, children: chapter.file }), _jsx("span", { className: css.spacer }), _jsx("button", { type: "button", className: css.ghost, onClick: () => { setEditing(true); }, children: t('design.edit') })] })] });
+}
+/** 元素与数值: one table per type plus a bar chart per numeric column. */
+function NumbersChapter({ t, elements, types }) {
+    const groups = useMemo(() => {
+        const all = [...types, ...elements.map(e => e.type).filter(type => !types.includes(type))];
+        return [...new Set(all)].map(type => ({ type, rows: elements.filter(e => e.type === type) })).filter(g => g.rows.length > 0);
+    }, [elements, types]);
+    if (groups.length === 0)
+        return _jsx("div", { className: css.chapterBody, children: _jsx("p", { className: css.lead, children: t('design.emptyGenerated') }) });
+    return _jsxs("div", { className: css.chapterBody, children: [_jsx("p", { className: css.metaLine, children: t('design.numbersNote') }), groups.map(({ type, rows }) => {
+                const keys = [...new Set(rows.flatMap(e => Object.keys(e.stats)))].slice(0, 6);
+                const numeric = keys.filter(k => rows.filter(e => typeof e.stats[k] === 'number').length >= 2);
+                return _jsxs("div", { className: css.numbers, children: [_jsxs("h5", { className: css.numbersTitle, children: [type, _jsx("span", { className: css.count, children: rows.length })] }), _jsx("div", { className: css.tableWrap, children: _jsxs("table", { className: css.table, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: t('elements.name') }), keys.map(k => _jsx("th", { children: k }, k))] }) }), _jsx("tbody", { children: rows.map(e => _jsxs("tr", { children: [_jsx("td", { children: e.name }), keys.map(k => _jsx("td", { children: String(e.stats[k] ?? '') }, k))] }, e.id)) })] }) }), numeric.slice(0, 2).map(k => {
+                            const max = Math.max(...rows.map(e => (typeof e.stats[k] === 'number' ? Math.abs(e.stats[k]) : 0)), 1e-9);
+                            return _jsxs("div", { className: css.bars, "aria-label": t('design.chart', { key: k }), children: [_jsx("span", { className: css.barsKey, children: k }), rows.map(e => {
+                                        const v = typeof e.stats[k] === 'number' ? e.stats[k] : 0;
+                                        return _jsxs("div", { className: css.barRow, children: [_jsx("span", { className: css.barName, children: e.name }), _jsx("span", { className: css.barTrack, children: _jsx("span", { className: css.barFill, style: { width: `${Math.abs(v) / max * 100}%` } }) }), _jsx("span", { className: css.barValue, children: v })] }, e.id);
+                                    })] }, k);
+                        })] }, type);
+            })] });
+}

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

@@ -0,0 +1,21 @@
+/**
+ * 元素: 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 { type ReactNode } from 'react';
+import { type ProjectView } from '../types.ts';
+import { type ViewProps } from './contract.ts';
+/** Props of the elements view. */
+export interface ElementsViewProps extends ViewProps {
+    readonly project: ProjectView;
+    readonly openId: string | null;
+    readonly onOpen: (id: string | null) => void;
+}
+/** The elements view. */
+export declare function ElementsView(props: ElementsViewProps): ReactNode;
+//# sourceMappingURL=ElementsView.d.ts.map