gamekit777 0.1.0

package/dev-host/DevShell.svelte

@@ -0,0 +1,348 @@
+<script lang="ts" generics="C extends object, O">
+  /* 参考平台的外壳。泛型，驱动任何符合清单的游戏。
+
+     它把游戏当黑盒：mount 拿到 GameInstance，读它的 status 控制自己的按钮，
+     调 present() 让它演。游戏那边完全不知道这个文件存在。
+     默认服务端是本地表模型：浏览器里就地建表、按权重抽行、restore 还原——
+     和真平台同一条路，restore 契约违反在这里就会被拦下。
+
+     机台的样子和玩家站点的对局页是同一份：同一套类名（.cab / .panel-col / .stage / .bar），
+     样式全部来自共享的 theme.css，舞台也是同一块 900×771 的逻辑画面整体缩放。
+     只有游戏的挂载方式不同——那边是 sandbox iframe，这边直接挂进 .gameframe 这个 div。
+     开发专用的东西（历史、校验、公平证、赔率、定点复现）放在机台下面，不挤进机台里。 */
+  import { onMount } from 'svelte';
+  import { STAGE_H, STAGE_W, type GameInstance, type GameModule } from '../sdk/index.ts';
+  import { createPlatform, type HistoryEntry, type PlatformOf } from './platform.svelte.ts';
+  import type { PlatformServer } from './platform-server.ts';
+  import type { LocalServer } from './local.ts';
+  import { setPlatform } from './context.svelte.ts';
+  import SchemaFields from './SchemaFields.svelte';
+  import Field from './Field.svelte';
+
+  let { game, title, note, embedded = false, server, onSaveCase, onPlatform }: {
+    game: GameModule<C, O>;
+    title?: string;
+    note?: string;
+    /** 嵌在 studio 的 iframe 里：不画页眉，余额由外面的 Header 显示 */
+    embedded?: boolean;
+    /** 不传就是本地表模型。传 createRemotePlatform(...) 就接到真平台上 */
+    server?: PlatformServer<C, O>;
+    /** studio 接上它就能把一局存成 case */
+    onSaveCase?: (h: HistoryEntry, title: string) => Promise<string>;
+    /** 平台实例建好了交出去。studio 的总线要拿它驱动预览（MCP 的 preview_* 工具） */
+    onPlatform?: (p: PlatformOf<C, O>) => void;
+  } = $props();
+
+  /* 只取初始值是故意的：一个平台实例对应一个游戏，换游戏应当整个重挂
+     （外面用 {#key game} 包住），而不是让平台在运行中换掉脚下的逻辑 */
+  // svelte-ignore state_referenced_locally
+  const p = createPlatform<C, O>(game, server);
+  setPlatform(p);
+  // svelte-ignore state_referenced_locally
+  onPlatform?.(p);
+
+  let stage = $state<HTMLElement>();
+  let frame = $state<HTMLElement>();
+  let inst = $state<GameInstance<O> | null>(null);
+  // svelte-ignore state_referenced_locally
+  let betText = $state((p.bet / 100).toFixed(2));
+  let tab = $state<'history' | 'fair' | 'proof' | 'pay' | 'skins' | 'replay'>('history');
+  let seedText = $state('');
+  let simIdText = $state('');
+  let caseTitle = $state('');
+  let caseMsg = $state<string | null>(null);
+
+  const money = (minor: number) =>
+    (minor / 100).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+  const signed = (minor: number) => `${minor >= 0 ? '+' : '−'}${money(Math.abs(minor))}`;
+  const t = (m: Record<string, string> | undefined) => (m ? Object.values(m)[0] : '');
+  const local = $derived(p.server as Partial<LocalServer<C, O>>);
+  const tableStats = $derived(p.tableMode ? local.table?.(p.tableMode)?.stats ?? null : null);
+
+  onMount(() => {
+    let live = true;
+    let off: (() => void) | undefined;
+    let handle: GameInstance<O> | undefined;
+
+    /* 和玩家站点的 GameFrame 同一条缩放规则：容器 CSS 尺寸恒为 STAGE_W×STAGE_H，
+       按舞台宽度算一个倍率。舞台自己是黄金比例，高度自然对得上。
+       观察的是舞台而不是窗口：机台在窄屏下会重排，同样的窗口宽度可能对应两种舞台宽度 */
+    const fit = (): void => {
+      const w = stage?.clientWidth ?? 0;
+      if (frame && w > 0) frame.style.transform = `scale(${w / STAGE_W})`;
+    };
+    const ro = new ResizeObserver(fit);
+    ro.observe(stage!);
+    fit();
+
+    void (async () => {
+      // 先和服务端握手：余额、种子承诺、注额区间都在那边
+      await p.init();
+      const i = await game.mount(p.host(), frame!);
+      if (!live) { i.destroy(); return; }
+      handle = i; inst = i;
+      off = i.status.subscribe(s => p.setGameStatus(s));
+      p.bindGame({ present: (r, rate) => i.present(r, rate ? { rate } : undefined), status: () => p.game });
+    })();
+
+    /* 键盘归平台：游戏不再往 document 上挂监听，否则同页两个游戏会一起响应 */
+    const onKey = (e: KeyboardEvent) => {
+      const tg = e.target as HTMLElement | null;
+      if (e.key !== ' ' || e.metaKey || e.ctrlKey || e.altKey) return;
+      if (tg && (tg.tagName === 'INPUT' || tg.tagName === 'TEXTAREA')) return;
+      e.preventDefault();
+      if (e.repeat) return;
+      if (p.game.busy) inst?.skip();
+      else if (p.canBet) void p.playOne();
+    };
+    document.addEventListener('keydown', onKey);
+
+    return () => {
+      live = false;
+      ro.disconnect();
+      document.removeEventListener('keydown', onKey);
+      off?.();
+      handle?.destroy();
+    };
+  });
+
+  const commitBet = () => {
+    const v = parseFloat(betText.replace(/,/g, ''));
+    p.setBet(!isFinite(v) || v < 0 ? p.limits.min : Math.round(v * 100));
+    betText = (p.bet / 100).toFixed(2);
+  };
+  const scaleBet = (f: number) => { p.setBet(p.bet * f); betText = (p.bet / 100).toFixed(2); };
+
+  const replaySeed = () => {
+    const m = /^(.+?):(.+?):(\d+)$/.exec(seedText.trim());
+    if (!m) { p.err = '种子格式：server:client:nonce'; return; }
+    void p.playOne({ seed: { server: m[1]!, client: m[2]!, nonce: Number(m[3]) } });
+  };
+  const replaySim = () => { const n = parseInt(simIdText, 10); if (Number.isInteger(n)) void p.playOne({ simId: n }); };
+  const saveCase = async (h: HistoryEntry) => {
+    if (!onSaveCase) return;
+    caseMsg = null;
+    try { caseMsg = `已存为 case ${await onSaveCase(h, caseTitle || `${h.mode} ${h.multiplier.toFixed(2)}x`)}`; caseTitle = ''; }
+    catch (e) { caseMsg = `存 case 失败：${e instanceof Error ? e.message : String(e)}`; }
+  };
+</script>
+
+<div class="shell" class:embedded>
+  {#if !embedded}
+    <header class="top">
+      <span class="brand big">GameKit</span>
+      <span class="dim small">参考平台</span>
+      <div class="grow"></div>
+      <span class="bal">{money(p.balance)}</span>
+      <span class="small" class:win={p.pnl > 0} class:bad={p.pnl < 0}>本场 {signed(p.pnl)}</span>
+    </header>
+    <div class="intro">
+      <h1>{title ?? p.spec.title}</h1>
+      <p>{note ?? '这是参考平台：设置由游戏 schema 自动渲染，下注走本地表模型——浏览器里就地建表、按权重抽行、restore 还原，和真平台同一条路。'}</p>
+    </div>
+  {/if}
+
+  <div class="cab" data-mode={p.mode}>
+    <!-- 左：下注与参数 -->
+    <section class="panel-col">
+      <div class="panel-inner">
+        <div class="tabs" role="tablist">
+          <button role="tab" aria-selected={p.mode === 'manual'} disabled={p.game.busy || p.autoActive}
+                  onclick={() => p.mode = 'manual'}>手动</button>
+          <button role="tab" aria-selected={p.mode === 'auto'} disabled={p.game.busy || p.autoActive}
+                  onclick={() => p.mode = 'auto'}>自动</button>
+        </div>
+
+        <Field hint={`区间 ${money(p.limits.min)}–${money(p.limits.max)}，步长 ${money(p.limits.step)}`}>
+          {#snippet label()}<label for="bet">注额</label>{/snippet}
+          {#snippet accent()}
+            <span>本场 <b class="acc" class:win={p.pnl > 0} class:bad={p.pnl < 0}>{signed(p.pnl)}</b></span>
+          {/snippet}
+          <span class="coin" aria-hidden="true"></span>
+          <input id="bet" inputmode="decimal" bind:value={betText} onchange={commitBet} disabled={!p.canBet} />
+          <button type="button" aria-label="减半" disabled={!p.canBet} onclick={() => scaleBet(0.5)}>½</button>
+          <button type="button" aria-label="加倍" disabled={!p.canBet} onclick={() => scaleBet(2)}>2×</button>
+        </Field>
+
+        {#if p.mode === 'auto'}
+          <Field>
+            {#snippet label()}<label for="rounds">自动局数</label>{/snippet}
+            {#snippet accent()}<span>0 = 不限</span>{/snippet}
+            <input id="rounds" type="number" min="0" max="1000" disabled={p.autoActive}
+                   value={p.autoActive ? p.autoLeft : p.autoRounds}
+                   onchange={e => { p.autoRounds = Math.max(0, parseInt(e.currentTarget.value, 10) || 0);
+                                    e.currentTarget.value = String(p.autoRounds); }} />
+          </Field>
+          <button class="cta cash" type="button" disabled={!p.ready0 || !p.spec.autoplay}
+                  onclick={() => p.autoActive ? p.stopAuto() : p.startAuto()}>
+            {#if p.autoActive}停止<span class="n">（{p.autoLeft}）</span>{:else if p.spec.autoplay}开始自动{:else}这个游戏不支持自动{/if}
+          </button>
+        {:else if p.game.busy}
+          <button class="cta" type="button" disabled={!p.game.canSkip} onclick={() => inst?.skip()}>
+            {p.game.canSkip ? '直接看结果' : '进行中'}
+          </button>
+        {:else}
+          <button class="cta" type="button" disabled={!p.canBet} onclick={() => p.playOne()}>
+            下注 <span class="n">{money(p.bet)}</span>
+          </button>
+        {/if}
+
+        {#if p.err}<p class="err small">{p.err}</p>{/if}
+
+        <hr />
+        <!-- 只有这一块滚：注额和下注按钮得一直够得着，参数再多也不该把它们顶出视野 -->
+        <div class="params">
+          <SchemaFields />
+          {#each p.issues as i (i.field)}
+            <p class="bad small">{Object.values(i.message)[0]}</p>
+          {/each}
+          {#if p.tableMode}
+            <p class="hint">表 <span class="mono">{p.tableMode}</span>{#if tableStats} · 实算 RTP {(tableStats.computedRtpPpm / 1e4).toFixed(2)}% · 命中 {(tableStats.hitRatePpm / 1e4).toFixed(2)}% · 最大 {(tableStats.maxPayoutCenti / 100).toFixed(2)}x{:else if !p.remote} · 第一注时就地建表{/if}</p>
+          {/if}
+        </div>
+      </div>
+    </section>
+
+    <!-- 右：游戏画布。容器尺寸恒为逻辑分辨率，onMount 里按舞台宽度整体缩放 -->
+    <section class="stage" style="--ratio:{STAGE_W}/{STAGE_H}" bind:this={stage}>
+      <div class="gameframe" bind:this={frame} style="width:{STAGE_W}px;height:{STAGE_H}px"></div>
+      {#if p.game.phase === 'loading'}
+        <p class="loading">加载资源… {Math.round((p.game.progress ?? 0) * 100)}%</p>
+      {/if}
+    </section>
+
+    <!-- 底：全机台的设置条 -->
+    <footer class="bar">
+      <div class="tg">
+        <button type="button" aria-pressed={p.view.turbo}
+                onclick={() => p.setView({ turbo: !p.view.turbo })}>
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2 4 14h7l-1 8 9-12h-7z" /></svg>
+          快速模式
+        </button>
+        <button type="button" aria-pressed={p.view.sound}
+                onclick={() => p.setView({ sound: !p.view.sound })}>
+          {#if p.view.sound}
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9v6h4l5 4V5L8 9zM17 8a5 5 0 0 1 0 8" /></svg>
+          {:else}
+            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9v6h4l5 4V5L8 9zM17 10l4 4M21 10l-4 4" /></svg>
+          {/if}
+          音效
+        </button>
+        <label class="seed">客户端种子
+          <input bind:value={p.clientSeed} disabled={p.autoActive} /></label>
+        {#if p.server.refill}
+          <button type="button" onclick={() => p.refill()}>重置余额</button>
+        {/if}
+      </div>
+      <span class="brand">GameKit</span>
+    </footer>
+  </div>
+
+  <!-- 机台下面：开发者要看的东西。玩家站点这里放的是最近对局和这局用哪张表 -->
+  <section class="panel dev">
+    <div class="tabs" role="tablist">
+      <button role="tab" aria-selected={tab === 'history'} onclick={() => tab = 'history'}>历史 {p.history.length}</button>
+      <button role="tab" aria-selected={tab === 'fair'} onclick={() => tab = 'fair'}>校验</button>
+      <button role="tab" aria-selected={tab === 'proof'} onclick={() => tab = 'proof'}>公平证</button>
+      <button role="tab" aria-selected={tab === 'pay'} onclick={() => tab = 'pay'}>赔率</button>
+      {#if game.skins?.length}<button role="tab" aria-selected={tab === 'skins'} onclick={() => tab = 'skins'}>造型</button>{/if}
+      {#if !p.remote}<button role="tab" aria-selected={tab === 'replay'} onclick={() => tab = 'replay'}>定点复现</button>{/if}
+    </div>
+
+    {#if tab === 'history'}
+      {#if onSaveCase && p.history.length}
+        <div class="row">
+          <div class="inp grow"><input placeholder="case 标题（可空，存的时候用）" bind:value={caseTitle} /></div>
+        </div>
+        {#if caseMsg}<p class="hint">{caseMsg}</p>{/if}
+      {/if}
+      <table>
+        <thead><tr><th>#</th><th>表</th><th class="num">倍数</th><th class="num">盈亏</th><th>校验</th>{#if onSaveCase}<th></th>{/if}</tr></thead>
+        <tbody>
+          {#each p.history as h (h.n)}
+            <tr>
+              <td class="num">{h.n}</td>
+              <td class="mono">{h.mode}</td>
+              <td class="num" class:win={h.payout > h.bet}>{h.multiplier.toFixed(2)}x</td>
+              <td class="num" class:win={h.payout > h.bet} class:lose={h.payout < h.bet}>{signed(h.payout - h.bet)}</td>
+              <td class:win={h.checks.every((c) => c.ok)} class:bad={!h.checks.every((c) => c.ok)}>{h.checks.every((c) => c.ok) ? '✓' : '✗'}</td>
+              {#if onSaveCase}<td><button type="button" class="ghostbtn tiny" onclick={() => saveCase(h)}>存为 case</button></td>{/if}
+            </tr>
+          {:else}
+            <tr><td colspan="6" class="dim">还没演过。打一注，它就会出现在这里。</td></tr>
+          {/each}
+        </tbody>
+      </table>
+    {:else if tab === 'fair'}
+      {#each p.checks as c, i (i)}
+        <div class="chk small">
+          <span class:win={c.ok} class:bad={!c.ok}>{c.ok ? '✓' : '✗'}</span>
+          <span class="grow">{c.label}</span>
+          {#if c.detail}<span class="dim mono">{c.detail}</span>{/if}
+        </div>
+      {:else}
+        <p class="dim small">还没有下过注。下一注之后这里会列出每一步的校验结论。</p>
+      {/each}
+    {:else if tab === 'proof'}
+      <pre>{p.proof ? JSON.stringify(p.proof, null, 2) : '还没演过'}</pre>
+    {:else if tab === 'pay'}
+      <table>
+        <thead><tr><th>组合</th><th class="num">倍数</th></tr></thead>
+        <tbody>
+          {#each [...p.paytable].reverse() as row, i (i)}
+            <tr><td>{t(row.label)}</td><td class="num">{row.mult.toFixed(2)}x</td></tr>
+          {/each}
+        </tbody>
+      </table>
+    {:else if tab === 'skins'}
+      <!-- 造型由模块的 skins 声明。没声明的游戏这一页整个不出现 -->
+      <div class="skins">
+        {#each game.skins ?? [] as sk (sk.value)}
+          <button type="button" aria-label={t(sk.label)}
+                  aria-pressed={p.view.skin === sk.value}
+                  onclick={() => p.setView({ skin: sk.value })}>
+            {#if sk.asset}<img alt="" src={sk.asset} />{:else}<span>{t(sk.label)}</span>{/if}
+          </button>
+        {/each}
+      </div>
+    {:else if tab === 'replay'}
+      <div class="row">
+        <div class="inp grow"><input placeholder="server:client:nonce" bind:value={seedText} /></div>
+        <button type="button" class="ghostbtn" disabled={!p.canBet} onclick={replaySeed}>按种子演</button>
+      </div>
+      <div class="row">
+        <div class="inp grow"><input placeholder="simId" inputmode="numeric" bind:value={simIdText} /></div>
+        <button type="button" class="ghostbtn" disabled={!p.canBet} onclick={replaySim}>演表里第 N 行</button>
+      </div>
+      <p class="hint">{p.spec.slug} · 目标 RTP {(p.spec.rtp * 100).toFixed(2)}%</p>
+    {/if}
+  </section>
+</div>
+
+<style>
+  /* 只写这一页自己的布局。机台、表单、按钮的样式全在共享的 theme.css 里 */
+  .shell { width: min(1200px, calc(100% - 32px)); margin: 0 auto; padding-bottom: 48px; }
+  /* 嵌在 studio 里：外面已经决定了这一栏多宽，这里顶满、不留白 */
+  .shell.embedded { width: 100%; padding-bottom: 16px; }
+  .top { display: flex; align-items: center; gap: 12px; padding: 14px 4px 0; }
+  .top .big { font-size: 22px; color: var(--ink); }
+  .intro { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 4px 14px; }
+  .intro p { margin: 0; opacity: .78; max-width: 46em; }
+  .dev { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
+  .dev .tabs { grid-auto-columns: minmax(0, 1fr); }
+  .seed { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 13px; }
+  .seed input {
+    border: 1px solid var(--line); background: var(--field); border-radius: 8px;
+    padding: 3px 8px; font-family: var(--mono); font-size: 12px; width: 11em;
+  }
+  .tiny { min-height: 28px; padding: 0 10px; font-size: 12px; }
+  .chk { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
+  .chk:last-of-type { border-bottom: 0; }
+  .chk .mono { word-break: break-all; }
+  pre { font-family: var(--mono); font-size: 11px; line-height: 1.35; max-height: 40vh; overflow: auto; background: var(--field); padding: 10px; border-radius: 12px; margin: 0; }
+  .skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
+  .skins button { border: 0; background: none; padding: 0; border-radius: 12px; overflow: hidden; line-height: 0; }
+  .skins img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; opacity: .55; transition: opacity .15s; }
+  .skins button[aria-pressed="true"] img { opacity: 1; box-shadow: 0 0 0 2px var(--accent-ink); }
+  .skins span { display: block; font-size: 12px; padding: 8px 4px; line-height: 1.2; background: var(--field); border-radius: 12px; }
+</style>

package/dev-host/Field.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  /* 面板里的一行表单。结构和类名与玩家站点的注额栏完全一致（.field / .lab / .inp / .hint），
+     样式全部来自共享的 theme.css——这里一条都不写，否则两边迟早分叉 */
+  import type { Snippet } from 'svelte';
+
+  let { label, accent, hint, children, extra }: {
+    label?: string | Snippet;
+    accent?: string | Snippet;
+    hint?: string;
+    children?: Snippet;
+    extra?: Snippet;
+  } = $props();
+</script>
+
+<div class="field">
+  {#if label || accent}
+    <div class="lab">
+      {#if typeof label === 'string'}<span>{label}</span>{:else if label}{@render label()}{:else}<span></span>{/if}
+      {#if typeof accent === 'string'}<span class="acc">{accent}</span>{:else if accent}{@render accent()}{/if}
+    </div>
+  {/if}
+  {#if children}<div class="inp">{@render children()}</div>{/if}
+  {#if hint}<p class="hint">{hint}</p>{/if}
+  {@render extra?.()}
+</div>

package/dev-host/SchemaFields.svelte

@@ -0,0 +1,14 @@
+<script lang="ts" generics="C extends object, O">
+  /* 从 context 取参考平台的状态，委托给纯受控的 SchemaFieldsPure 渲染。
+     控件的形状和类名因此与玩家站点逐个相同——那边用的就是同一个组件 */
+  import type { ConfigSchema } from '../sdk/index.ts';
+  import { getPlatform } from './context.svelte.ts';
+  import SchemaFieldsPure from './SchemaFieldsPure.svelte';
+
+  const p = getPlatform<C, O>();
+  const schema = $derived(p.spec.schema as ConfigSchema<C>);
+</script>
+
+<SchemaFieldsPure {schema} config={p.config} issues={p.issues}
+                  inRound={p.game.busy} inAuto={p.autoActive}
+                  set={(patch) => p.requestConfig(patch)} />

package/dev-host/SchemaFieldsPure.svelte

@@ -0,0 +1,98 @@
+<script lang="ts" generics="C extends object">
+  /* 按 schema 自动渲染参数控件——纯受控版：schema / config / issues 全从 props 进，不碰 context。
+     apps/web 和 studio 都用它；dev-host 自己那份 SchemaFields.svelte 是从 context 取值再委托到这里。
+
+     这段代码不认识任何具体游戏：只认识 kind（int / bool / enum / pick）和
+     lock / devOnly / ui 这些标记。schema 是游戏从 iframe 里推过来的纯数据，
+     所以「平台渲染游戏的设置面板」这件事完全不需要平台执行游戏的代码。 */
+  import { editable, fieldsFor, type ConfigIssue, type ConfigSchema } from '../sdk/index.ts';
+
+  let { schema, config, issues, inRound, inAuto, set }: {
+    schema: ConfigSchema<C>;
+    config: C;
+    issues: ConfigIssue[];
+    inRound: boolean;
+    inAuto: boolean;
+    set: (patch: Partial<C>) => void;
+  } = $props();
+
+  /* 只渲染声明为在平台侧渲染的字段。ui:'stage' 的由游戏自己在画布内画，
+     改值同样要走一趟 requestConfig */
+  const keys = $derived(fieldsFor(schema, 'host'));
+  const can = (k: keyof C): boolean => editable(schema, k, { inRound, inAuto });
+  const t = (m: Record<string, string> | undefined): string | undefined =>
+    m ? Object.values(m)[0] : undefined;
+  const issueOf = (k: string): string | undefined =>
+    t(issues.find((i) => i.field === k)?.message);
+  const put = (k: keyof C, v: unknown): void => set({ [k]: v } as Partial<C>);
+</script>
+
+{#each keys as k (k)}
+  {@const f = schema[k]}
+  <div class="field">
+    {#if f.kind === 'bool'}
+      <button class="switch" type="button" role="switch"
+              aria-checked={!!config[k]} disabled={!can(k)} onclick={() => put(k, !config[k])}>
+        <span>
+          <b>{t(f.label)}{#if f.devOnly}<em>仅开发</em>{/if}</b>
+          {#if f.hint}<small>{t(f.hint)}</small>{/if}
+        </span>
+        <i></i>
+      </button>
+
+    {:else if f.kind === 'int' || f.kind === 'number'}
+      <div class="lab">
+        <label for="f-{String(k)}">{t(f.label)}</label>
+        {#if issueOf(String(k))}<span class="acc">{issueOf(String(k))}</span>{/if}
+      </div>
+      <div class="inp">
+        <input id="f-{String(k)}" inputmode="numeric" value={config[k]}
+               min={f.min} max={f.max} disabled={!can(k)}
+               onchange={(e) => put(k, parseFloat(e.currentTarget.value))} />
+        <button type="button" aria-label="减" disabled={!can(k)}
+                onclick={() => put(k, (config[k] as number) - (f.step ?? 1))}>−</button>
+        <button type="button" aria-label="加" disabled={!can(k)}
+                onclick={() => put(k, (config[k] as number) + (f.step ?? 1))}>＋</button>
+      </div>
+      {#if f.hint}<p class="hint">{t(f.hint)}</p>{/if}
+
+    {:else if f.kind === 'enum'}
+      <div class="lab"><span>{t(f.label)}</span></div>
+      <div class="inp">
+        <select disabled={!can(k)} onchange={(e) => put(k, e.currentTarget.value)}>
+          {#each f.options as o (o.value)}
+            <option value={o.value} selected={config[k] === o.value}>{t(o.label)}</option>
+          {/each}
+        </select>
+      </div>
+      {#if f.hint}<p class="hint">{t(f.hint)}</p>{/if}
+
+    {:else if f.kind === 'pick'}
+      <div class="lab">
+        <span>{t(f.label)}（选 {f.count} 个）</span>
+        {#if issueOf(String(k))}<span class="acc">{issueOf(String(k))}</span>{/if}
+      </div>
+      <div class="chips">
+        {#each f.of as o (o.value)}
+          {@const on = (config[k] as unknown[]).includes(o.value)}
+          <button type="button" class:on disabled={!can(k)}
+                  onclick={() => {
+                    const cur = [...(config[k] as number[])];
+                    const at = cur.indexOf(o.value as number);
+                    if (at >= 0) cur.splice(at, 1);
+                    else { if (cur.length >= f.count) cur.shift(); cur.push(o.value as number); }
+                    put(k, cur);
+                  }}>{t(o.label)}</button>
+        {/each}
+      </div>
+      {#if f.hint}<p class="hint">{t(f.hint)}</p>{/if}
+    {/if}
+  </div>
+{/each}
+
+<style>
+  .switch em {
+    font-style: normal; font-size: 10px; color: #E0A800;
+    margin-left: 6px; border: 1px solid; border-radius: 4px; padding: 0 4px;
+  }
+</style>

package/dev-host/context.svelte.ts

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+import type { PlatformOf } from './platform.svelte.ts';
+
+const KEY = Symbol('gamekit-dev-platform');
+
+/* 用 context 而不是模块级单例：同一个页面可以挂两个不同的游戏，
+   各自一套平台状态。这也是游戏侧最终要走的路（阶段 9 的工厂化） */
+export const setPlatform = <C, O>(p: PlatformOf<C, O>): void => { setContext(KEY, p); };
+export const getPlatform = <C, O>(): PlatformOf<C, O> => getContext(KEY);

package/dev-host/fonts.ts

@@ -0,0 +1,16 @@
+/* 平台自己的字体（标题、数字、正文）。运行时注入而不是写进每个游戏的 index.html：
+   `bun run dev` 用的是游戏目录里的 html，studio 的两个页面从内存吐，三处都不该各抄一份链接 */
+const HREF = 'https://fonts.googleapis.com/css2?family=Lilita+One&family=Noto+Sans+SC:wght@400;500;700&family=ZCOOL+KuaiLe&display=swap';
+
+export function ensureHostFonts(): void {
+  if (typeof document === 'undefined' || document.querySelector(`link[href="${HREF}"]`)) return;
+  for (const href of ['https://fonts.googleapis.com', 'https://fonts.gstatic.com']) {
+    const l = document.createElement('link');
+    l.rel = 'preconnect'; l.href = href;
+    if (href.includes('gstatic')) l.crossOrigin = 'anonymous';
+    document.head.appendChild(l);
+  }
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = HREF;
+  document.head.appendChild(l);
+}

package/dev-host/index.ts

@@ -0,0 +1,8 @@
+export * from './platform-server.ts';
+export * from './table-server.ts';
+export * from './local.ts';
+export * from './remote.ts';
+export * from './platform.svelte.ts';
+export * from './context.svelte.ts';
+export { runDevShell, type RunOptions } from './run.ts';
+export { ensureHostFonts } from './fonts.ts';

package/dev-host/local.ts

@@ -0,0 +1,69 @@
+/* 开发期的本地服务端：浏览器里就地建表，再按权重抽行。
+ *
+ * 表模型下 round() 只在采样时跑。开发期用小样本（每 mode 一两千局，几十毫秒），
+ * 表按 mode 懒建：第一次下到哪张就建哪张。改了规则刷新页面就是新表——
+ * 没有缓存要失效，也就不会拿旧表演新逻辑。
+ *
+ * studio 想用建好的正式产物时，通过 external 把表喂进来；喂不到的 mode 照样就地建。 */
+import { buildTable } from '../publish/build.ts';
+import type { GameDefinition } from '../sdk/index.ts';
+import { DEFAULT_BALANCE, type PlatformServer, type WalletRef } from './platform-server.ts';
+import { parseTable, tableServer, type LoadedTable } from './table-server.ts';
+
+export interface LocalOptions<C, O> {
+  spec: GameDefinition<C, O>;
+  /** 就地建表时每张表采样多少局。默认 2000——开发期够看分布，几十毫秒建完 */
+  sims?: number;
+  balance?: number;
+  /** 外部喂进来的表（studio 的正式产物）。有就优先用 */
+  external?: () => Promise<ReadonlyMap<string, LoadedTable>>;
+  onBuild?: (mode: string, millis: number) => void;
+}
+
+export interface LocalServer<C, O> extends PlatformServer<C, O> {
+  /** 已经加载或建好的表，面板显示统计用 */
+  table(mode: string): LoadedTable | undefined;
+  modes(): string[];
+}
+
+export function localServer<C, O>(o: LocalOptions<C, O>): LocalServer<C, O> {
+  const spec = o.spec;
+  const sims = o.sims ?? 2_000;
+  const wallet: WalletRef = { balance: o.balance ?? DEFAULT_BALANCE };
+  const tables = new Map<string, LoadedTable>();
+  const building = new Map<string, Promise<void>>();
+
+  const build = (mode: string): Promise<void> => {
+    let p = building.get(mode);
+    if (p) return p;
+    p = (async () => {
+      const mi = spec.modes.findIndex((m) => m.name === mode);
+      if (mi < 0) throw new Error(`清单里没有 mode ${mode}`);
+      const t0 = Date.now();
+      const built = await buildTable({ ...spec, sims }, mi);
+      tables.set(mode, parseTable(mode, built.bytes, built.books));
+      o.onBuild?.(mode, Date.now() - t0);
+    })().finally(() => building.delete(mode));
+    building.set(mode, p);
+    return p;
+  };
+
+  const reload = async (): Promise<void> => {
+    tables.clear();
+    if (o.external) for (const [k, v] of await o.external()) tables.set(k, v);
+  };
+
+  const inner = tableServer<C, O>({
+    spec, wallet,
+    tables: () => tables,
+    ensure: (mode) => (tables.has(mode) ? Promise.resolve() : build(mode)),
+    reload,
+  });
+
+  return {
+    ...inner,
+    init: async () => { await reload(); return inner.init(); },
+    table: (mode) => tables.get(mode),
+    modes: () => [...tables.keys()],
+  };
+}