gamekit777 0.1.0

package/sdk/sample.ts

@@ -0,0 +1,68 @@
+/* 加权抽样的取数原语。规范见 gklt/v1。
+ *
+ * 为什么不扩展 rng.ts 的 below()：
+ *   - 它写死了 0x100000000，上限只到 2^32
+ *   - below(1) 短路直接返回 0，不消耗随机数。跨语言复算时这是个分叉陷阱
+ *   - 它被 shuffle 和两个游戏用着，已有卡方测试覆盖，不该动
+ *
+ * 为什么固定取 3 个字而不按 T 的位宽自适应：
+ *   自适应时 T ≈ 2^63 会落在 floor(2^64/T) = 1 的最坏点上，拒绝概率高达 50%。
+ *   固定 96 位则对任意 T < 2^64 拒绝概率统一 < 2^-32，期望抽取 3.0000000007 个字。
+ *   而且规范里少一个分支就少一处跨语言实现分歧。 */
+import type { Rng } from './rng.ts';
+
+export const SAMPLE_WORDS = 3;
+export const SAMPLE_RANGE = 1n << 96n;
+
+export interface SampleDraw {
+  /** r ∈ [0, total) */
+  value: bigint;
+  /** 抽到的每个 u32，big-endian hex，**含被拒绝丢弃的** */
+  words: string[];
+  /** 发生了几轮拒绝 */
+  rejections: number;
+}
+
+/**
+ * 从 rng 取 [0, total) 上的无偏整数。
+ *
+ * 契约（改任何一条都会让已有的公平证验不过）：
+ *   - 固定抽 SAMPLE_WORDS 个 u32，**先抽到的在高位**
+ *   - 比较是 `x < lim` 严格小于
+ *   - 拒绝时整组作废重抽，被丢弃的字仍计入 rng.draws
+ *   - total === 1n 时也要走完整流程抽满字，不得短路
+ */
+export function sampleBelow(rng: Rng, total: bigint): SampleDraw {
+  if (total <= 0n) throw new RangeError(`sampleBelow(${total})：总权重必须为正`);
+  if (total >= 1n << 64n) throw new RangeError('总权重必须小于 2^64');
+
+  const lim = (SAMPLE_RANGE / total) * total;
+  const words: string[] = [];
+  let rejections = 0;
+
+  for (;;) {
+    let x = 0n;
+    for (let i = 0; i < SAMPLE_WORDS; i++) {
+      const w = rng.u32() >>> 0;
+      words.push(w.toString(16).padStart(8, '0'));
+      x = (x << 32n) | BigInt(w);
+    }
+    if (x < lim) return { value: x % total, words, rejections };
+    rejections++;
+  }
+}
+
+/**
+ * 规范的定位算法：按文件顺序累加，取第一个使 `r < 累积和` 的行。
+ *
+ * 服务端实际走的是 SQL 索引（`cum_weight > r ORDER BY cum_weight LIMIT 1`），
+ * 这份线性扫描是它的参照实现——两者必须逐位等价，有测试对拍。
+ */
+export function locateRow(weights: ArrayLike<number> | ArrayLike<bigint>, r: bigint): number {
+  let acc = 0n;
+  for (let i = 0; i < weights.length; i++) {
+    acc += BigInt(weights[i] as number);
+    if (r < acc) return i;
+  }
+  return -1;
+}

package/sdk/schema.ts

@@ -0,0 +1,90 @@
+/* 游戏向平台声明自己的参数，平台据此自动渲染设置 UI。
+   平台不认识任何一个具体游戏——它只认识这里的 kind。 */
+
+export type I18n = Record<string, string>;
+
+export interface Option {
+  value: string | number;
+  label: I18n;
+  /** 指向 manifest 里的资源 key，比如造型的缩略图 */
+  asset?: string;
+  disabled?: boolean;
+}
+
+export type FieldKind =
+  | { kind: 'int'; min: number; max: number; step?: number }
+  | { kind: 'number'; min: number; max: number; step?: number }
+  | { kind: 'bool' }
+  | { kind: 'enum'; options: Option[] }
+  /** 从 of 里挑 count 个。coco 的「选 4 个点数」就是这个 */
+  | { kind: 'pick'; of: Option[]; count: number; exact?: boolean; ordered?: boolean; randomizable?: boolean };
+
+export interface FieldMeta {
+  label: I18n;
+  hint?: I18n;
+  /**
+   * true = 影响结果。下注时必须冻结、随 RoundInput 上送、进 proof.configHash。
+   * false 的字段不该出现在这里，应该放进 ViewSettings。
+   */
+  affectsOutcome: boolean;
+  /** 什么时候不许改 */
+  lock: 'never' | 'inRound' | 'inRoundOrAuto';
+  /**
+   * 谁渲染这个控件。真值始终在平台，这里只决定渲染位置：
+   *   host  —— 平台的设置面板（和下注额、自动局数放一起）
+   *   stage —— 游戏画布内自己画（和画面连体的那种，比如 coco 的图纸点数）
+   * 两种都是受控组件：stage 侧渲染的也是平台的值，改动走 Host.requestConfig。
+   */
+  ui: 'host' | 'stage';
+  /** 只在开发/演示环境允许开启。服务端在生产环境必须拒绝带这种字段的请求 */
+  devOnly?: boolean;
+  /** 建议控件，平台可以无视 */
+  control?: 'stepper' | 'switch' | 'slider' | 'chips' | 'grid' | 'select';
+  group?: string;
+  order?: number;
+}
+
+export type ConfigSchema<C> = { [K in keyof C]-?: FieldKind & FieldMeta & { default: C[K] } };
+
+export interface ConfigIssue {
+  field: string;
+  code: string;
+  message: I18n;
+}
+
+export interface BetLimits {
+  min: number;
+  max: number;
+  step: number;
+  presets?: number[];
+}
+
+/** describe() 的产物：平台不用懂游戏就能渲染赔率说明 */
+export interface GameInfo {
+  paytable: { title: I18n; rows: { label: I18n; mult: number; chance?: number }[] };
+  stats: { hitChance: number; rtp: number; maxMultiplier: number; volatility?: 'low' | 'mid' | 'high' };
+  notes?: I18n[];
+}
+
+/** schema 的默认值。平台初始化配置时用 */
+export function defaultsOf<C>(schema: ConfigSchema<C>): C {
+  const out = {} as C;
+  for (const k of Object.keys(schema) as (keyof C)[]) out[k] = schema[k].default;
+  return out;
+}
+
+/** 平台渲染面板时用：只要这个位置该渲染的字段，按 order 排好 */
+export function fieldsFor<C>(schema: ConfigSchema<C>, where: 'host' | 'stage'): (keyof C)[] {
+  return (Object.keys(schema) as (keyof C)[])
+    .filter(k => schema[k].ui === where)
+    .sort((a, b) => (schema[a].order ?? 0) - (schema[b].order ?? 0));
+}
+
+/** 当前是否允许改这个字段。平台和游戏共用这一处判断，两边不会打架 */
+export function editable<C>(schema: ConfigSchema<C>, key: keyof C, s: { inRound: boolean; inAuto: boolean }): boolean {
+  switch (schema[key].lock) {
+    case 'never': return true;
+    case 'inRound': return !s.inRound;
+    case 'inRoundOrAuto': return !s.inRound && !s.inAuto;
+  }
+}

package/sdk/spec.ts

@@ -0,0 +1,255 @@
+/* 一个游戏 = 一份清单。
+ *
+ * 逻辑侧三个必填：schema 说有哪些参数，round 说结果怎么算，paytable 说赔多少。
+ * 表模型三个可选、互相独立：modes（要几张表）、book（演出怎么编）、restore（怎么还原）。
+ * 其余是元数据。normalize / validate / modeOf 不用游戏写——它们是 schema 的函数，
+ * 三个游戏的手写实现没有一行是 schema 表达不了的，写第二遍只会和第一遍打架。
+ *
+ * defineGame 住在这个零依赖的包里，浏览器和 Node 侧的采样 worker import 的是同一份清单。
+ * 它不是恒等函数：填默认值、挂推导出来的方法，消费方拿到的永远是填满的对象。 */
+import type { RoundInput, RoundResult, Restore, RestoreInput } from './contract.ts';
+import type { GameInstance, Host } from './host.ts';
+import type { RngSeed } from './rng.ts';
+import { defaultsOf, type ConfigIssue, type ConfigSchema, type I18n } from './schema.ts';
+
+export interface PaytableRow { label: I18n; mult: number }
+export type Paytable = PaytableRow[];
+
+/**
+ * 一张表对应的配置。只写**影响赔付分布**的字段——出现在任何 mode.config 里的键
+ * 就是分布字段，modeOf 据此推导。coco 是 { N, goldOn }，ranks 不在里面。
+ */
+export interface Mode<C> { name: string; config: Partial<C> }
+
+export interface Sample<O> {
+  /** 采样序号，同时也是表里的 simId */
+  index: number;
+  seed: RngSeed;
+  /** 相对单注的赔付 ×100 */
+  payoutCenti: number;
+  result: RoundResult<O>;
+}
+
+/**
+ * 演出数据怎么编码。
+ *   'none'   不传。演出可从 payout 推导（抛硬币：猜中了就落在你押的那面）
+ *   'seed'   存采样种子。客户端重跑 round()，渲染代码一行不用改——
+ *            前提是所有影响结果的字段都在 modes 里冻结了，否则表里写 0x、客户端算出 4.64x
+ *   自定义   还有自由字段会改变结果时用。coco 存 22 字节的 rank 无关牌序
+ */
+export type BookCodec<O> = 'none' | 'seed' | { encode(s: Sample<O>): Uint8Array };
+
+export interface Skin { value: string; label: I18n; asset?: string }
+
+export interface GameSpec<C, O> {
+  slug: string;
+  title: string;
+  description?: string;
+  /** 平台按它决定要不要显示自动按钮。默认 true */
+  autoplay?: boolean;
+  /** 求解目标，小数（0.98）。所有 mode 都解到它；CLI `--rtp` 可覆盖 */
+  rtp: number;
+  /** 每张表采样多少局 */
+  sims: number;
+
+  schema: ConfigSchema<C>;
+  /** 一局的结果。同步纯函数、零 DOM、不自取随机。**只在采样时跑** */
+  round(input: RoundInput<C>): RoundResult<O>;
+  /** 赔率表。常量，或 config 的函数（coco 的倍数随 N 变） */
+  paytable: Paytable | ((config: C) => Paytable);
+
+  /** 不给 = 单表 'base' */
+  modes?: Mode<C>[];
+  /** 不给 = 'seed' */
+  book?: BookCodec<O>;
+  /** 不给 = restoreFromSeed，只对 book 'seed' 成立 */
+  restore?: Restore<C, O>;
+  /** 采样种子前缀。换了它就是另一张表；默认 slug */
+  seedPrefix?: string;
+}
+
+/** defineGame 的产物：填满默认值、挂上推导方法 */
+export interface GameDefinition<C, O> extends GameSpec<C, O> {
+  autoplay: boolean;
+  modes: Mode<C>[];
+  book: BookCodec<O>;
+  restore: Restore<C, O>;
+  seedPrefix: string;
+  /** 出现在任何 mode.config 里的键，即影响分布的字段。单表游戏为空 */
+  modeKeys: (keyof C)[];
+  normalize(patch: Partial<C>, prev?: C): C;
+  validate(config: C): ConfigIssue[];
+  /** 当前配置该抽哪张表。没有匹配的 mode 就抛——那是 modes 声明不完整 */
+  modeOf(config: C): string;
+  /** 这张表冻结的配置：mode.config 盖在 schema 默认值上 */
+  configOf(mode: string): C;
+  paytableFor(config: C): Paytable;
+}
+
+/** 浏览器入口 = 清单 + view。mount / skins import Svelte 与图片，进不了 Node 侧的采样 worker */
+export interface GameModule<C, O> extends GameDefinition<C, O> {
+  mount(host: Host<C>, el: HTMLElement): Promise<GameInstance<O>>;
+  skins?: Skin[];
+}
+
+/* ── 采样种子 ────────────────────────────────────────────────────── */
+
+export const SAMPLE_CLIENT_SEED = 'gamekit-publish';
+
+/** 确定性派生。作者机器和审计脚本能各自独立重建同一张表；可预测不是问题，抽哪一行由 gklt/v1 决定 */
+export const sampleSeed = (prefix: string, mode: string, index: number): RngSeed => ({
+  server: `${prefix}/${mode}/${index}`,
+  client: SAMPLE_CLIENT_SEED,
+  nonce: index,
+});
+
+/* ── 按 schema 推导 normalize / validate ───────────────────────────── */
+
+const sameValue = (a: unknown, b: unknown): boolean =>
+  a === b || (typeof a === 'object' && typeof b === 'object' && JSON.stringify(a) === JSON.stringify(b));
+
+export function normalizeBySchema<C>(schema: ConfigSchema<C>, patch: Partial<C>, prev?: C): C {
+  const base = prev ?? defaultsOf(schema);
+  const merged = { ...base, ...patch } as Record<keyof C, unknown>;
+  const out = {} as C;
+
+  for (const k of Object.keys(schema) as (keyof C)[]) {
+    const f = schema[k];
+    const v = merged[k];
+    switch (f.kind) {
+      case 'int': case 'number': {
+        const n = Number(v);
+        if (!Number.isFinite(n)) { out[k] = f.default; break; }
+        const step = f.step ?? (f.kind === 'int' ? 1 : 0);
+        let x = Math.min(f.max, Math.max(f.min, n));
+        if (step > 0) x = Math.min(f.max, Math.max(f.min, f.min + Math.round((x - f.min) / step) * step));
+        if (f.kind === 'int') x = Math.round(x);
+        out[k] = x as C[keyof C];
+        break;
+      }
+      case 'bool': out[k] = !!v as C[keyof C]; break;
+      case 'enum': {
+        const ok = f.options.some((o) => !o.disabled && sameValue(o.value, v));
+        out[k] = (ok ? v : f.default) as C[keyof C];
+        break;
+      }
+      case 'pick': {
+        /* 去重、过滤到合法值、最多留 count 个。不足 count 不在这里补齐——
+           那是玩家还没选完的合法中间态，由 validate 报出来 */
+        const legal = f.of.filter((o) => !o.disabled).map((o) => o.value);
+        const numeric = legal.every((x) => typeof x === 'number');
+        const picked: unknown[] = [];
+        for (const raw of Array.isArray(v) ? v : []) {
+          const x = numeric ? Math.round(Number(raw)) : raw;
+          if (legal.some((l) => sameValue(l, x)) && !picked.some((p) => sameValue(p, x))) picked.push(x);
+        }
+        out[k] = picked.slice(0, f.count) as C[keyof C];
+        break;
+      }
+    }
+  }
+  return out;
+}
+
+export function validateBySchema<C>(schema: ConfigSchema<C>, config: C): ConfigIssue[] {
+  const out: ConfigIssue[] = [];
+  for (const k of Object.keys(schema) as (keyof C)[]) {
+    const f = schema[k];
+    if (f.kind !== 'pick') continue;
+    const n = Array.isArray(config[k]) ? (config[k] as unknown[]).length : 0;
+    if (f.exact ? n !== f.count : n > f.count) {
+      const label = Object.values(f.label)[0] ?? String(k);
+      out.push({
+        field: String(k), code: f.exact ? `need-exactly-${f.count}` : `at-most-${f.count}`,
+        message: { 'zh-CN': f.exact ? `${label}要选满 ${f.count} 个，现在选了 ${n} 个` : `${label}最多选 ${f.count} 个，现在选了 ${n} 个` },
+      });
+    }
+  }
+  return out;
+}
+
+/* ── restore 的通用实现 ─────────────────────────────────────────── */
+
+/**
+ * `'seed'` codec 的解码半边：frames 里是采样种子的 server 串（prefix/mode/index），
+ * 重跑 round() 拿回完整 outcome。nonce 从末尾解析，client 恒为 SAMPLE_CLIENT_SEED。
+ *
+ * 契约：返回的 payout 必须恰好等于 (bet / 100) × payoutCenti，对不上就抛、不演。
+ */
+export function restoreFromSeed<C, O>(spec: Pick<GameSpec<C, O>, 'round'> & { normalize(patch: Partial<C>, prev?: C): C }): Restore<C, O> {
+  return (input: RestoreInput<C>) => {
+    if (!input.frames) throw new Error('book 为 seed 的表必须带演出数据，这一行却是空的');
+    const server = new TextDecoder().decode(input.frames);
+    const at = server.lastIndexOf('/');
+    const index = Number(server.slice(at + 1));
+    if (at < 0 || !Number.isInteger(index) || index < 0) throw new Error(`采样种子格式不对：${server}`);
+
+    const result = spec.round({
+      config: spec.normalize(input.config),
+      bet: input.bet,
+      seed: { server, client: SAMPLE_CLIENT_SEED, nonce: index },
+    });
+    const want = (input.bet / 100) * input.payoutCenti;
+    if (result.payout !== want) {
+      throw new Error(`重跑 round() 赔 ${result.payout}，表里那一行是 ${want}——有影响结果的字段没冻结进 mode，book 不能用 'seed'`);
+    }
+    return result;
+  };
+}
+
+/* ── defineGame ─────────────────────────────────────────────────── */
+
+const SLUG = /^[a-z0-9][a-z0-9-]*$/;
+
+export function defineGame<C, O>(spec: GameSpec<C, O>): GameDefinition<C, O> {
+  if (!SLUG.test(spec.slug)) throw new Error(`slug "${spec.slug}" 要是小写短横线形式`);
+  if (!(spec.rtp > 0 && spec.rtp <= 1)) throw new Error(`rtp ${spec.rtp} 要是 (0, 1] 的小数，比如 0.98`);
+  if (!(Number.isInteger(spec.sims) && spec.sims > 0)) throw new Error(`sims ${spec.sims} 要是正整数`);
+
+  const modes: Mode<C>[] = spec.modes?.length ? spec.modes : [{ name: 'base', config: {} }];
+  const keySets = modes.map((m) => Object.keys(m.config).sort().join(','));
+  if (new Set(keySets).size > 1) {
+    throw new Error(`每个 mode 的 config 必须写同一组键（那组键就是影响分布的字段），现在有：${[...new Set(keySets)].join(' | ')}`);
+  }
+  const names = new Set<string>();
+  for (const m of modes) {
+    if (names.has(m.name)) throw new Error(`mode 名字重复：${m.name}`);
+    names.add(m.name);
+  }
+  const modeKeys = Object.keys(modes[0]!.config) as (keyof C)[];
+  for (const k of modeKeys) if (!(k in spec.schema)) throw new Error(`mode 里的字段 ${String(k)} 不在 schema 里`);
+
+  const normalize = (patch: Partial<C>, prev?: C): C => normalizeBySchema(spec.schema, patch, prev);
+  const validate = (config: C): ConfigIssue[] => validateBySchema(spec.schema, config);
+  const byName = new Map(modes.map((m) => [m.name, m]));
+
+  const modeOf = (config: C): string => {
+    if (modeKeys.length === 0) return modes[0]!.name;
+    const hit = modes.find((m) => modeKeys.every((k) => sameValue(normalize(m.config as Partial<C>)[k], config[k])));
+    if (!hit) {
+      throw new Error(`没有 mode 匹配 ${JSON.stringify(Object.fromEntries(modeKeys.map((k) => [k, config[k]])))}——modes 声明不完整`);
+    }
+    return hit.name;
+  };
+  const configOf = (mode: string): C => {
+    const m = byName.get(mode);
+    if (!m) throw new Error(`没有 mode "${mode}"，有的是：${modes.map((x) => x.name).join('、')}`);
+    return normalize(m.config as Partial<C>);
+  };
+  const paytableFor = (config: C): Paytable =>
+    typeof spec.paytable === 'function' ? spec.paytable(config) : spec.paytable;
+
+  const book: BookCodec<O> = spec.book ?? 'seed';
+  const def: GameDefinition<C, O> = {
+    ...spec,
+    autoplay: spec.autoplay ?? true,
+    seedPrefix: spec.seedPrefix ?? spec.slug,
+    modes, book, modeKeys,
+    normalize, validate, modeOf, configOf, paytableFor,
+    restore: spec.restore ?? restoreFromSeed({ round: spec.round, normalize }),
+  };
+  if (!spec.restore && book !== 'seed') {
+    throw new Error(`book 是 ${book === 'none' ? "'none'" : '自定义 codec'} 时必须自己写 restore——只有 'seed' 能通用还原`);
+  }
+  return def;
+}

package/sdk/stage.ts

@@ -0,0 +1,20 @@
+/**
+ * 游戏的逻辑分辨率。平台的舞台形状由这一组数决定，不由任何 CSS 里的字面量决定。
+ *
+ * 游戏容器的 CSS 尺寸恒为这一组数，屏幕放不下就整体 scale——游戏里看到的宽度
+ * 永远是 900，排版不随窗口变形，缩放的是整台机器的画面。
+ * 这和「让游戏自报高度」是两条路：那条路上每个游戏的舞台高矮不一，
+ * 机台的高度会跟着游戏变；这条路上机台的尺寸是确定的，游戏去适应它。
+ *
+ * 900 不是随便取的：游戏的内部布局是按这个宽度调的，换一个宽度它们会重新分配
+ * 各区块的占比——coco 放到 1280 上试过，牌面吃掉了多出来的空间，右边的发牌区
+ * 相对就瘪了。缩放不会有这个问题，因为它整块等比放大。
+ *
+ * 7:6 是量出来的：coco 在 900 逻辑宽下内容自然高 770，这里给 771。
+ * 比这更扁会把最后一行牌切掉，而且很不显眼——换比例之前先量一遍各游戏的自然高度。
+ *
+ * 放在 sdk 里是因为它是平台↔游戏契约的一部分：玩家站点的 iframe、参考平台的
+ * 舞台、studio 的预览都按同一组数缩放，游戏只需要为这一个尺寸排版。
+ */
+export const STAGE_W = 900;
+export const STAGE_H = Math.round((STAGE_W * 6) / 7);   // 771

package/sdk/store.ts

@@ -0,0 +1,67 @@
+/* 跨框架的最小响应式原语。
+
+   刻意采用 Svelte store 的形状（subscribe 立即同步回调一次、返回退订函数），
+   因为它是 React / Vue / Svelte / 原生里适配成本最低的公分母：
+     React   useSyncExternalStore(s.subscribe, s.get, s.get)
+     Vue     const r = shallowRef(s.get()); onScopeDispose(s.subscribe(v => r.value = v))
+     Svelte  游戏侧的 fromStore() 桥接成 runes
+   平台是真值源，所以游戏拿到的都是 Readable，改值要走 Host.requestConfig。 */
+
+export interface Readable<T> {
+  get(): T;
+  /** 立即同步调一次 run(当前值)，返回退订函数 */
+  subscribe(run: (v: T) => void): () => void;
+}
+
+export interface Writable<T> extends Readable<T> {
+  set(v: T): void;
+  patch(p: Partial<T>): void;
+}
+
+export function writable<T extends object>(init: T): Writable<T> {
+  let value = init;
+  const subs = new Set<(v: T) => void>();
+  const emit = (): void => { for (const f of [...subs]) f(value); };
+
+  return {
+    get: () => value,
+    set(v) { if (v === value) return; value = v; emit(); },
+    patch(p) {
+      /* 值没变就不通知：平台侧每帧 patch 同一份设置是常态，
+         少这道判断 React 会跟着无谓重渲染 */
+      let changed = false;
+      for (const k of Object.keys(p) as (keyof T)[]) {
+        if (!Object.is(value[k], p[k])) { changed = true; break; }
+      }
+      if (!changed) return;
+      value = { ...value, ...p };
+      emit();
+    },
+    subscribe(run) {
+      run(value);
+      subs.add(run);
+      return () => { subs.delete(run); };
+    }
+  };
+}
+
+/** 只读视图，防止游戏侧拿到 store 后直接写 */
+export const readonly = <T>(s: Readable<T>): Readable<T> =>
+  ({ get: () => s.get(), subscribe: run => s.subscribe(run) });
+
+/** 从一个 Readable 派生另一个 */
+export function derived<A, B>(src: Readable<A>, map: (a: A) => B): Readable<B> {
+  return {
+    get: () => map(src.get()),
+    subscribe(run) {
+      let last: B | typeof NONE = NONE;
+      return src.subscribe(a => {
+        const b = map(a);
+        if (Object.is(b, last)) return;
+        last = b;
+        run(b);
+      });
+    }
+  };
+}
+const NONE = Symbol('none');

package/studio/app/App.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  /* studio 页面：一个头 + 左边机台 + 右边编辑区。
+     机台是预览 iframe（dev-host 的 DevShell，嵌入模式），和玩家站点的对局页同一套机台、同一块舞台；
+     它靠左、宽度固定，剩下的宽度全给右边的编辑面板。余额由预览页通过总线报上来，显示在这条头上。
+     页面和游戏同源，所以发布面板能直接 import 游戏清单算描述配置。 */
+  import { onMount } from 'svelte';
+  import { ensureHostFonts } from 'gamekit777/dev-host';
+  import { api, type Info } from './lib/api.ts';
+  import { bus } from './lib/bus.svelte.ts';
+  import PreviewPanel from './panels/PreviewPanel.svelte';
+  import TuningPanel from './panels/TuningPanel.svelte';
+  import TablePanel from './panels/TablePanel.svelte';
+  import CasePanel from './panels/CasePanel.svelte';
+  import PublishPanel from './panels/PublishPanel.svelte';
+  import LogPanel from './panels/LogPanel.svelte';
+
+  type Tab = 'preview' | 'tuning' | 'table' | 'cases' | 'publish' | 'log';
+  const TABS: { id: Tab; label: string }[] = [
+    { id: 'preview', label: '状态' }, { id: 'tuning', label: '调参' }, { id: 'table', label: '建表' },
+    { id: 'cases', label: 'Case' }, { id: 'publish', label: '发布' }, { id: 'log', label: '日志' },
+  ];
+  let tab = $state<Tab>((location.hash.slice(1) as Tab) || 'preview');
+  $effect(() => { location.hash = tab; });
+
+  let info = $state<Info | null>(null);
+  let err = $state<string | null>(null);
+  const refresh = async () => { try { info = await api.info(); err = null; } catch (e) { err = e instanceof Error ? e.message : String(e); } };
+
+  onMount(() => { ensureHostFonts(); bus.connect(); void refresh(); });
+  $effect(() => { void bus.fingerprint; void bus.buildVersion; void refresh(); });
+
+  const name = $derived(info ? info.snapshot.spec.title : '…');
+  const running = $derived(Object.values(bus.jobs).filter((j) => j.status === 'running').length);
+  const money = (minor: number) =>
+    (minor / 100).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+</script>
+
+<header>
+  <span class="brand">GameKit Studio</span>
+  <span class="title">{name}</span>
+  {#if info}
+    <span class="chip mono" title={info.gameDir}>{info.snapshot.spec.slug}</span>
+    <span class="chip mono" title="规则指纹">{info.fingerprint}</span>
+    <span class="chip" class:on={bus.preview?.connected}>预览 {bus.preview?.connected ? '已连' : '未连'}</span>
+    <span class="chip" class:on={bus.connected}>总线 {bus.connected ? '已连' : '断开'}</span>
+    {#if running}<span class="chip busy">{running} 个任务运行中</span>{/if}
+  {/if}
+  {#if err}<span class="chip bad">{err}</span>{/if}
+  <div class="grow"></div>
+  {#if bus.preview?.connected && bus.preview.balance !== null}
+    <span class="bal">{money(bus.preview.balance)}</span>
+    <span class="dim small">余额</span>
+  {/if}
+  <div class="nav" role="tablist">
+    {#each TABS as t (t.id)}<button role="tab" aria-selected={tab === t.id} onclick={() => tab = t.id}>{t.label}</button>{/each}
+  </div>
+</header>
+
+<main>
+  <!-- 左：机台。和玩家站点同一台机器，宽度也照那边的 1200 内容宽 + 两侧 16 留白 -->
+  <section class="machine">
+    <iframe title="游戏预览" src="/__studio/preview.html"></iframe>
+  </section>
+
+  <!-- 右：编辑区，拉满剩余宽度 -->
+  <section class="editor">
+    {#if info}
+      {#if tab === 'preview'}<PreviewPanel {info} />{/if}
+      {#if tab === 'tuning'}<TuningPanel {info} />{/if}
+      {#if tab === 'table'}<TablePanel {info} />{/if}
+      {#if tab === 'cases'}<CasePanel {info} />{/if}
+      {#if tab === 'publish'}<PublishPanel {info} />{/if}
+      {#if tab === 'log'}<LogPanel />{/if}
+    {:else if !err}
+      <p class="dim">连接 studio…</p>
+    {/if}
+  </section>
+</main>
+
+<style>
+  /* 头和玩家站点的页眉同一副样子：奶油色、底下一条线、粘在顶上 */
+  header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 16px;
+    background:var(--cab);box-shadow:inset 0 -1px 0 var(--line);position:sticky;top:0;z-index:20}
+  .brand{font-family:var(--fun);font-size:22px;color:var(--ink)}
+  .title{font-weight:700}
+  .chip{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--field);color:var(--dim);border:1px solid var(--line)}
+  .chip.on{color:var(--ok);border-color:var(--ok)} .chip.bad{color:var(--coco-d);border-color:var(--coco-d)} .chip.busy{color:var(--accent-ink);border-color:var(--accent-ink)}
+  .nav{display:flex;gap:2px;padding:3px;background:var(--field);border:1px solid var(--line);border-radius:12px}
+  .nav button{border:0;background:none;border-radius:9px;padding:5px 12px;font-weight:700;color:var(--dim);font-size:13px}
+  .nav button[aria-selected="true"]{background:var(--ink);color:var(--cab)}
+
+  /* 左固定右拉满。机台这一栏 = 1200 内容宽 + 两侧各 16 留白，和 .wrap 的算法一致；
+     屏幕不够宽时先缩机台（舞台按比例跟着缩，画面不变形），再不够就把编辑区推到下面 */
+  main{display:flex;gap:16px;align-items:stretch;padding:14px 16px;flex-wrap:wrap}
+  .machine{flex:0 1 1232px;min-width:720px;max-width:100%}
+  .machine iframe{display:block;width:100%;height:calc(100vh - 78px);border:0;background:var(--page)}
+  .editor{flex:1 1 420px;min-width:0}
+
+  main :global(.card){background:var(--cab);border-radius:22px;box-shadow:var(--cab-shadow);padding:18px;display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
+  main :global(h2){font-size:20px;margin:0}
+  main :global(button.pri){border:0;border-radius:12px;padding:9px 14px;font-weight:700;background:var(--coco);color:#FFF6EA;box-shadow:0 4px 0 var(--coco-d)}
+  main :global(button.pri:active:not(:disabled)){transform:translateY(3px);box-shadow:0 1px 0 var(--coco-d)}
+  main :global(button.sec){border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:var(--field);font-weight:700}
+  main :global(button:disabled){opacity:.5}
+  main :global(table){width:100%;border-collapse:collapse;font-size:13px}
+  main :global(th),main :global(td){text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
+  main :global(th){color:var(--dim);font-weight:700;font-size:12px}
+  main :global(td.num),main :global(.mono){font-family:var(--mono);font-variant-numeric:tabular-nums}
+  main :global(.ok){color:var(--ok)} main :global(.bad){color:var(--coco-d)} main :global(.warn){color:var(--accent-ink)}
+  main :global(.hint){color:var(--dim);font-size:12px;margin:0}
+  main :global(input),main :global(select){border:1px solid var(--line);background:var(--field);border-radius:10px;padding:7px 9px;font-family:var(--mono)}
+  main :global(pre){font-family:var(--mono);font-size:11px;line-height:1.4;background:var(--field);padding:10px;border-radius:12px;overflow:auto;margin:0;max-height:50vh}
+</style>