gamekit777 0.1.3 → 0.1.6

package/studio/app/App.svelte

@@ -14,14 +14,19 @@
   import CasePanel from './panels/CasePanel.svelte';
   import PublishPanel from './panels/PublishPanel.svelte';
   import LogPanel from './panels/LogPanel.svelte';
+  import AssetsPanel from './panels/AssetsPanel.svelte';
 
-  type Tab = 'preview' | 'tuning' | 'table' | 'cases' | 'publish' | 'log';
+  type Tab = 'preview' | 'tuning' | 'table' | 'cases' | 'assets' | '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: '日志' },
+    { id: 'cases', label: 'Case' }, { id: 'assets', label: '资源库' }, { id: 'publish', label: '发布' }, { id: 'log', label: '日志' },
   ];
-  let tab = $state<Tab>((location.hash.slice(1) as Tab) || 'preview');
-  $effect(() => { location.hash = tab; });
+  /* hash 是 `#<tab>` 或 `#<tab>:<条目>`（资源库用后半段记当前打开的那条）。
+     只在 tab 段对不上时改写，别把面板自己写的 `:<条目>` 抹掉 */
+  const TAB_IDS = new Set<string>(['preview', 'tuning', 'table', 'cases', 'assets', 'publish', 'log']);
+  const hashTab = (): Tab => { const t = location.hash.slice(1).split(':')[0] ?? ''; return (TAB_IDS.has(t) ? t : 'preview') as Tab; };
+  let tab = $state<Tab>(hashTab());
+  $effect(() => { if (hashTab() !== tab) location.hash = tab; });
 
   let info = $state<Info | null>(null);
   let err = $state<string | null>(null);
@@ -38,6 +43,20 @@
   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 });
+
+  /* 预览 iframe 的高度跟着里面的内容走，让整页自然滚动，机台下面的开发面板才露得出来。
+     同源，所以直接量 contentDocument；vite 整页刷新 iframe 时 load 会再触发一次，重新挂观察器 */
+  let ro: ResizeObserver | null = null;
+  function fitFrame(e: Event): void {
+    const f = e.currentTarget as HTMLIFrameElement;
+    const doc = f.contentDocument;
+    if (!doc) return;
+    ro?.disconnect();
+    const apply = () => { f.style.height = `${doc.documentElement.scrollHeight}px`; };
+    ro = new ResizeObserver(apply);
+    ro.observe(doc.documentElement);
+    apply();
+  }
 </script>
 
 <header>
@@ -49,13 +68,14 @@
     <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 identity.me}<span class="chip on" title={identity.me.user.id}>{identity.me.user.isAnonymous ? '游客' : identity.me.user.name ?? '玩家'} {identity.me.user.id.slice(0, 6)}…</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}
+  {#if identity.me}
+    <span class="dim small" title={identity.me.user.id}>{identity.me.user.isAnonymous ? '游客' : identity.me.user.name ?? '玩家'}</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}
@@ -65,7 +85,7 @@
 <main>
   <!-- 左：机台。和玩家站点同一台机器，宽度也照那边的 1200 内容宽 + 两侧 16 留白 -->
   <section class="machine">
-    <iframe title="游戏预览" src="/preview"></iframe>
+    <iframe title="游戏预览" src="/preview" onload={fitFrame}></iframe>
   </section>
 
   <!-- 右：编辑区，拉满剩余宽度 -->
@@ -83,6 +103,7 @@
       {#if tab === 'tuning'}<TuningPanel {info} />{/if}
       {#if tab === 'table'}<TablePanel {info} />{/if}
       {#if tab === 'cases'}<CasePanel {info} />{/if}
+      {#if tab === 'assets'}<AssetsPanel {info} />{/if}
       {#if tab === 'publish'}<PublishPanel {info} />{/if}
       {#if tab === 'log'}<LogPanel />{/if}
     {:else if !err}
@@ -103,14 +124,22 @@
   .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}
+  /* 左边机台、右边编辑区。机台最宽照玩家站点的 1200 内容宽 + 两侧 16 留白，屏幕不够就先缩它
+     （舞台按比例跟着缩，画面不变形），缩到 880 以下再把编辑区推到下面。
+     iframe 的高度由 fitFrame 跟着内容走，整页滚动；编辑区粘在顶上，自己滚 */
+  /* 不能靠 flex-wrap 自动换行：换行看的是 flex-basis 之和，不看 min-width，1440 宽下会先把编辑区挤下去而不是缩机台 */
+  main{display:flex;gap:16px;align-items:flex-start;padding:14px 16px 32px}
+  .machine{flex:0 1 1232px;min-width:880px;max-width:100%}
+  .machine iframe{display:block;width:100%;min-height:640px;border:0;background:transparent}
+  .editor{flex:1 1 420px;min-width:420px;position:sticky;top:72px;max-height:calc(100vh - 88px);overflow-y:auto;
+    scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding-bottom:12px}
+  @media (max-width:1347px){
+    main{flex-wrap:wrap}
+    .machine{flex-basis:100%;min-width:0}
+    .editor{position:static;max-height:none;overflow:visible}
+  }
 
-  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(.card){background:var(--cab);border-radius:22px;box-shadow:var(--cab-shadow);padding:18px;display:flex;flex-direction:column;gap:10px;margin:0 2px 20px}
   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)}

package/studio/app/lib/api.ts

@@ -1,7 +1,9 @@
 /* /studio/api 的类型化封装。页面和 node 侧同源，直接 fetch */
 import type { Artifact, GroupsSummary } from '../../src/build.ts';
 import type { CaseRecord, CaseResult } from '../../src/cases.ts';
-import type { Engine, PublishRequest } from '../../src/engine.ts';
+import type { AssetShown, AssetSyncResult, UseResult } from '../../src/assets.ts';
+import type { AssetIndexEntry } from 'gamekit777/protocol';
+import type { Engine, PublishPreflight, PublishRequest, PublishResult } from '../../src/engine.ts';
 import type { Job } from '../../src/jobs.ts';
 import type { ProbeResult } from '../../src/probe.ts';
 import type { SolveReport, Targets } from '../../src/solver.ts';
@@ -32,6 +34,8 @@ export const api = {
   artifacts: () => call<Artifact[]>('GET', '/artifacts'),
   artifactTable: async (mode: string) => new Uint8Array(await (await fetch(`${BASE}/artifacts/${encodeURIComponent(mode)}/table`)).arrayBuffer()),
   artifactBooks: (mode: string) => call<{ simId: number; frames: string }[]>('GET', `/artifacts/${encodeURIComponent(mode)}/books`),
+  bundle: () => call<{ path: string; bytes: number; sha256: string }[]>('GET', '/bundle'),
+  bundleFile: async (path: string) => new Uint8Array(await (await fetch(`${BASE}/bundle/file?path=${encodeURIComponent(path)}`)).arrayBuffer()),
   jobs: () => call<Job[]>('GET', '/jobs'),
   job: <T>(id: string) => call<Job<T>>('GET', `/jobs/${id}`),
   task: (task: TaskName) => call<Job<TaskResult>>('POST', '/task', { task }),
@@ -40,9 +44,13 @@ export const api = {
     call<{ total: number; pass: number; fail: number; skipped: number; error: number; results: CaseResult[] }>('POST', '/cases/run', o),
   caseBless: (updates: { id: string; expect: CaseRecord['expect'] }[]) => call<{ blessed: number }>('POST', '/cases/bless', { updates }),
   caseRemove: (id: string) => call<{ removed: boolean }>('DELETE', `/cases/${id}`),
+  assetList: () => call<{ entries: AssetIndexEntry[]; syncedAt: number }>('GET', '/assets'),
+  assetShow: (name: string) => call<AssetShown>('GET', `/assets/${encodeURIComponent(name)}`),
+  assetUse: (name: string, force = false) => call<UseResult>('POST', `/assets/${encodeURIComponent(name)}/use`, { force }),
+  assetSync: () => call<{ result: AssetSyncResult | null; entries: AssetIndexEntry[] }>('POST', '/assets/sync'),
   publishList: () => call<PublishRequest[]>('GET', '/publish'),
-  publishRequest: (modes: string[] | null, note: string | null) => call<PublishRequest>('POST', '/publish/request', { modes, note }),
-  publishUpdate: (id: string, patch: Partial<PublishRequest>) => call<PublishRequest>('POST', `/publish/${id}`, patch),
+  publishPreflight: () => call<PublishPreflight>('GET', '/publish/preflight'),
+  publishRequest: (modes: string[] | null, note: string | null) => call<Job<PublishResult>>('POST', '/publish/request', { modes, note }),
   previewCommand: <T>(cmd: unknown) => call<T>('POST', '/preview/command', cmd),
   log: (msg: string, level: 'info' | 'warn' | 'error' = 'info') => call<unknown>('POST', '/log', { msg, level }),
 

package/studio/app/lib/bus.svelte.ts

@@ -14,6 +14,7 @@ class Bus {
   publish = $state<Record<string, PublishRequest>>({});
   casesVersion = $state(0);
   buildVersion = $state(0);
+  assetsVersion = $state(0);
 
   #es: EventSource | null = null;
 
@@ -35,6 +36,7 @@ class Bus {
         case 'cases': this.casesVersion++; break;
         case 'build': this.buildVersion++; break;
         case 'publish': { const r = m.request as PublishRequest; this.publish = { ...this.publish, [r.id]: r }; break; }
+        case 'assets': this.assetsVersion++; break;
         default: break;
       }
     };

package/studio/app/lib/identity.svelte.ts

@@ -3,8 +3,11 @@
  * 页面对 /v1 的请求同源，cookie 落在 127.0.0.1 下；第一次没有 cookie 时把整个窗口
  * 跳到站点的 #/connect 借身份，站点签一个一次性 code 带回 /connect，这里拿 code
  * 经反代换一个同一用户的新会话。之后发布、下注都用这份 cookie。 */
+import { createClient, type GameKitClient } from 'gamekit777/client';
 import type { SessionView } from 'gamekit777/protocol';
-import { client } from './upload.ts';
+
+/** 同源，cookie 由浏览器带。/v1 反代到平台后端；反代在 /v1/me 成功时把这份 cookie 抄给 node 侧，MCP 发布用 */
+export const client: GameKitClient = createClient({ baseUrl: '' });
 
 export type IdentityPhase = 'checking' | 'ok' | 'redirecting' | 'claiming' | 'error';
 

package/studio/app/panels/AssetsPanel.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+  /* 资源库：上面选条目，下面舞台 + 旋钮 + NOTES + 源码。
+     组件从 ~/.gamekit/assets/<hash>/ 经 vite 的 /@fs 现场编译——后台同步写进新文件，vite 自然认，
+     这里只要在总线的 assets 事件上刷一次列表。动画挂组件本身（契约「挂载即播放」，重播 = {#key} 重挂）；
+     套路挂它的 Demo（一个可点的场景）。
+
+     舞台按条目声明的逻辑尺寸画，再整体 scale 到面板能给的宽度——编辑区只有四五百像素宽，
+     固定 450×385 会被裁掉一截，整体缩放画面不变形；想看原大就「放大」，开一个占满窗口的 dialog。 */
+  import type { Component } from 'svelte';
+  import type { AssetIndexEntry, AssetKind, AssetProp } from 'gamekit777/protocol';
+  import type { AssetShown } from '../../src/assets.ts';
+  import { api, type Info } from '../lib/api.ts';
+  import { bus } from '../lib/bus.svelte.ts';
+
+  let { info }: { info: Info } = $props();
+  let entries = $state<AssetIndexEntry[]>([]);
+  let syncedAt = $state(0);
+  let current = $state<string | null>(location.hash.split(':')[1] ?? null);
+  let shown = $state<AssetShown | null>(null);
+  let Comp = $state<Component<Record<string, unknown>> | null>(null);
+  let knobs = $state<Record<string, unknown>>({});
+  let token = $state(0);
+  let err = $state<string | null>(null);
+  let busy = $state(false);
+  let kind = $state<AssetKind | null>(null);
+  let tag = $state<string | null>(null);
+  let big = $state(false);
+  let dlg = $state<HTMLDialogElement | null>(null);
+  let slotW = $state(0);
+  let winW = $state(0);
+  let winH = $state(0);
+
+  const KIND_LABEL: Record<AssetKind, string> = { animation: '动画', pattern: '套路' };
+  const tags = $derived([...new Set(entries.filter((e) => !kind || e.kind === kind).flatMap((e) => e.tags))].sort());
+  const visible = $derived(entries.filter((e) => (!kind || e.kind === kind) && (!tag || e.tags.includes(tag))));
+  const stage = $derived({ w: shown?.entry.stage?.width ?? 520, h: shown?.entry.stage?.height ?? 420, bg: shown?.entry.stage?.background ?? '#1A0B11' });
+  /* 组件挂在留了边距的内框里：position:absolute;inset:0 的组件（奖牌、飘字）也就不会贴着舞台边 */
+  const PAD = 24;
+  /* 面板里按宽度缩；放大时按窗口的宽和高一起缩，留出对话框的边和标题条 */
+  const scale = $derived(big
+    ? Math.min(1, Math.max(0.2, (winW - 64) / stage.w), Math.max(0.2, (winH - 140) / stage.h))
+    : Math.min(1, slotW > 0 ? slotW / stage.w : 1));
+
+  async function refresh() {
+    try { const r = await api.assetList(); entries = r.entries; syncedAt = r.syncedAt; err = null; }
+    catch (e) { err = e instanceof Error ? e.message : String(e); }
+  }
+  $effect(() => { void bus.assetsVersion; void refresh(); });
+
+  const defaults = (p: Record<string, AssetProp>): Record<string, unknown> => Object.fromEntries(Object.entries(p).map(([k, v]) => [k, v.default]));
+
+  async function open(name: string) {
+    current = name; err = null; Comp = null;
+    location.hash = `assets:${name}`;
+    try {
+      const s = await api.assetShow(name);
+      shown = s;
+      knobs = defaults(s.entry.props);
+      /* /@fs/<绝对路径>：vite 编译 .svelte，和游戏、预览壳共用同一个 svelte 实例（dedupe） */
+      const mod = await import(/* @vite-ignore */ `/@fs${s.previewPath}`) as { default: Component<Record<string, unknown>> };
+      Comp = mod.default;
+      token++;
+    } catch (e) { err = e instanceof Error ? e.message : String(e); }
+  }
+
+  async function sync() {
+    busy = true;
+    try { const r = await api.assetSync(); entries = r.entries; if (!r.result) err = `平台拉不到资源库（${info.urls.backend}/a/index.json）`; }
+    catch (e) { err = e instanceof Error ? e.message : String(e); }
+    finally { busy = false; }
+  }
+
+  function enlarge() { big = true; winW = innerWidth; winH = innerHeight; dlg?.showModal(); token++; }
+  function shrink() { big = false; dlg?.close(); token++; }
+
+  const set = (k: string, v: unknown) => { knobs = { ...knobs, [k]: v }; token++; };
+  const num = (e: Event) => Number((e.currentTarget as HTMLInputElement).value);
+  const str = (e: Event) => (e.currentTarget as HTMLInputElement | HTMLSelectElement).value;
+  const chk = (e: Event) => (e.currentTarget as HTMLInputElement).checked;
+
+  $effect(() => { if (current && !shown && entries.some((e) => e.name === current)) void open(current); });
+</script>
+
+<svelte:window onresize={() => { winW = innerWidth; winH = innerHeight; }} />
+
+{#snippet stageView()}
+  <!-- 外框占缩放后的尺寸，里面那层按逻辑尺寸画再 scale：组件里的 px 和它在游戏里一样 -->
+  <div class="asset-slot" style:width="{Math.round(stage.w * scale)}px" style:height="{Math.round(stage.h * scale)}px">
+    <div class="asset-stage" style:width="{stage.w}px" style:height="{stage.h}px" style:background={stage.bg} style:transform="scale({scale})" style:padding="{PAD}px">
+      <!-- gameframe 是 dev-host theme.css 里 @scope 的边界：平台的 .stage / .coin / .row 这些类名规则到这里止步，
+           组件里同名的 class 才不会被机台样式污染（.stage 的 grid-area 曾把 dealer-talk 的网格挤歪） -->
+      <div class="area gameframe">
+        {#if Comp}
+          {#key token}<Comp {...knobs} />{/key}
+        {:else}<p class="hint">编译中…</p>{/if}
+      </div>
+    </div>
+  </div>
+{/snippet}
+
+{#snippet knobsView()}
+  <div class="knobs">
+    {#each Object.entries(shown?.entry.props ?? {}) as [k, p] (k)}
+      <label class="knob">
+        <span class="k">{p.label ?? k}{#if p.kind === 'number'}<b class="mono">{knobs[k]}</b>{/if}</span>
+        {#if p.kind === 'boolean'}
+          <span class="ctl"><input type="checkbox" checked={!!knobs[k]} onchange={(e) => set(k, chk(e))} /></span>
+        {:else if p.kind === 'number'}
+          <span class="ctl">
+            <input type="range" min={p.min ?? 0} max={p.max ?? 100} step={p.step ?? 1} value={Number(knobs[k])} oninput={(e) => set(k, num(e))} />
+            <input type="number" min={p.min} max={p.max} step={p.step ?? 1} value={Number(knobs[k])} onchange={(e) => set(k, num(e))} />
+          </span>
+        {:else if p.kind === 'enum'}
+          <span class="ctl"><select value={String(knobs[k])} onchange={(e) => set(k, str(e))}>{#each p.options ?? [] as o (o)}<option value={o}>{o}</option>{/each}</select></span>
+        {:else}
+          <span class="ctl"><input type="text" value={String(knobs[k])} onchange={(e) => set(k, str(e))} /></span>
+        {/if}
+      </label>
+    {/each}
+  </div>
+{/snippet}
+
+<div class="wrap">
+  <section class="card pick">
+    <div class="row">
+      <h2 class="grow">资源库 <span class="hint">{entries.length} 条</span></h2>
+      <button class="sec" onclick={sync} disabled={busy}>{busy ? '同步中…' : '同步'}</button>
+    </div>
+    <p class="hint">历史演出经验的归档，来自平台，启动后后台同步{syncedAt ? `（${new Date(syncedAt).toLocaleTimeString()}）` : ''}。动画是拿来即用的小组件；套路是一套机制加接线清单，复制进去还要照 NOTES 穿进时间轴，主要给 AI 用。</p>
+    <div class="filters">
+      <div class="nav" role="tablist">
+        <button role="tab" aria-selected={kind === null} onclick={() => { kind = null; tag = null; }}>全部 {entries.length}</button>
+        {#each ['animation', 'pattern'] as const as k (k)}
+          <button role="tab" aria-selected={kind === k} onclick={() => { kind = k; tag = null; }}>{KIND_LABEL[k]} {entries.filter((e) => e.kind === k).length}</button>
+        {/each}
+      </div>
+      {#if tags.length}
+        <div class="nav tags" role="tablist">
+          <button role="tab" aria-selected={tag === null} onclick={() => (tag = null)}>所有 tag</button>
+          {#each tags as t (t)}<button role="tab" aria-selected={tag === t} onclick={() => (tag = tag === t ? null : t)}>{t}</button>{/each}
+        </div>
+      {/if}
+    </div>
+    {#if !entries.length}<p class="hint">空。平台还没发过库（bun run assets:push），或者拉不到 {info.urls.backend}。</p>{/if}
+    <div class="items">
+      {#each visible as e (e.name)}
+        <button class="item" class:on={e.name === current} onclick={() => open(e.name)}>
+          <b>{e.kind === 'pattern' ? '⚙' : '✦'} {e.title}</b><span class="mono hint">{e.name}</span>
+          <small>{e.summary}</small>
+        </button>
+      {/each}
+    </div>
+  </section>
+
+  <section class="card main">
+    {#if err}<p class="bad">{err}</p>{/if}
+    {#if shown}
+      <div class="row">
+        <h2 class="grow">{shown.entry.title} <span class="mono hint">{shown.entry.name}@{shown.entry.hash.slice(0, 8)}</span> <span class="chip">{KIND_LABEL[shown.entry.kind]}</span></h2>
+        <button class="sec" onclick={() => token++}>重播</button>
+        <button class="sec" onclick={enlarge} title="占满窗口看原大">放大</button>
+      </div>
+      <p class="hint small">这里只看效果、找感觉。用进游戏交给 AI：<code class="mono">asset_show {shown.entry.name}</code> 读 NOTES，<code class="mono">asset_use {shown.entry.name}</code> 复制到 <span class="mono">{shown.target}</span>{shown.entry.kind === 'pattern' ? '，再按接线清单穿进时间轴' : ''}。</p>
+      <div class="slotwrap" bind:clientWidth={slotW}>
+        {#if !big}{@render stageView()}{/if}
+        {#if scale < 1 && !big}<p class="hint small">按 {Math.round(scale * 100)}% 显示（逻辑尺寸 {stage.w}×{stage.h}），「放大」看原大</p>{/if}
+      </div>
+      {#if !big}{@render knobsView()}{/if}
+      <details open>
+        <summary>NOTES — 为什么这么做{shown.entry.kind === 'pattern' ? '、怎么接线' : ''}</summary>
+        <pre class="notes">{shown.notes}</pre>
+      </details>
+      {#each shown.files as f (f.path)}
+        <details>
+          <summary>{f.path} <span class="hint">{f.copied ? '会复制进游戏' : f.path === (shown.entry.kind === 'pattern' ? shown.entry.demo : '') ? 'Demo，只在这里跑' : '范例，不复制'}</span></summary>
+          <pre class="code">{f.text}</pre>
+        </details>
+      {/each}
+    {:else}
+      <p class="hint">上面选一条。</p>
+    {/if}
+  </section>
+</div>
+
+<dialog bind:this={dlg} class="big" onclose={() => { if (big) shrink(); }}>
+  {#if big && shown}
+    <div class="row">
+      <h2 class="grow">{shown.entry.title}</h2>
+      <span class="hint">{Math.round(scale * 100)}% · {stage.w}×{stage.h}</span>
+      <button class="sec" onclick={() => token++}>重播</button>
+      <button class="sec" onclick={shrink}>关闭</button>
+    </div>
+    <div class="center">{@render stageView()}</div>
+    {@render knobsView()}
+  {/if}
+</dialog>
+
+<style>
+  .wrap{display:flex;flex-direction:column;gap:14px}
+  .pick{display:flex;flex-direction:column;gap:10px}
+  .filters{display:flex;flex-direction:column;gap:6px}
+  /* 和页眉的 tab 一副样子 */
+  .nav{display:flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--field);border:1px solid var(--line);border-radius:12px;align-self:flex-start;max-width:100%}
+  .nav button{border:0;background:none;border-radius:9px;padding:5px 12px;font-weight:700;color:var(--dim);font-size:13px;cursor:pointer}
+  .nav.tags button{font-weight:600;font-size:12px;padding:4px 10px}
+  .nav button[aria-selected="true"]{background:var(--ink);color:var(--cab)}
+  .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;max-height:260px;overflow:auto;padding-right:2px}
+  .item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;cursor:pointer}
+  .item.on{border-color:var(--accent-ink)}
+  .item small{color:var(--dim);font-size:12px}
+  .main{display:flex;flex-direction:column;gap:12px}
+  .slotwrap{width:100%}
+  .asset-slot{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--line);max-width:100%}
+  /* 舞台是游戏那一侧的深色画面，但它嵌在浅色主题的 studio 页面里：组件写的 var(--ink) 会取到页面的深色墨水，
+     画在深色底上就没了。所以在这里把游戏侧的调色板整套定义一遍，和 dev-host theme.css 里机台内的取值一致 */
+  .asset-stage{position:absolute;left:0;top:0;transform-origin:0 0;box-sizing:border-box;overflow:hidden;color:var(--ink);
+    --ink:#FFF1DC;--dim:#B4959A;--s-ink:#FFF1DC;--s-dim:#A3858C;--cream:#FFF6EA;--txt-ink:#FFF1DC;
+    --gold:#FFD21F;--gold-d:#8A6A10;--banana:#FFD21F;--banana-d:#B98F00;--accent:#FF7A1A;--coco:#F0402E;--coco-d:#A8231A;
+    --tile:#3B1F2A;--stage:#1A0B11;--panel:rgba(26,11,17,.97);--win:#7CE0A0;--mark:#F2C94C;--skin-ring:#FFF1DC}
+  .area{position:relative;width:100%;height:100%;display:grid;place-items:center}
+  .small{font-size:12px;margin:6px 0 0}
+  /* 每个旋钮上下两行：标签一行、控件一行。同一行排的话面板一窄标签和数字就挤在一起 */
+  .knobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px}
+  .knob{display:flex;flex-direction:column;gap:4px;min-width:0}
+  .knob .k{display:flex;justify-content:space-between;gap:8px;color:var(--dim);font-size:12px}
+  .knob .k b{font-weight:400;color:var(--ink)}
+  .knob .ctl{display:flex;align-items:center;gap:8px;min-width:0}
+  .knob .ctl input[type=range]{flex:1;min-width:0}
+  .knob .ctl input[type=number]{width:5.5em;flex:none}
+  .knob .ctl select,.knob .ctl input[type=text]{flex:1;min-width:0}
+  .notes{white-space:pre-wrap;font-family:inherit;font-size:13px;line-height:1.55;margin:0}
+  .code{font-size:12px;max-height:420px;overflow:auto;margin:0}
+  .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
+  dialog.big{width:calc(100vw - 32px);height:calc(100vh - 32px);max-width:none;max-height:none;margin:16px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;
+    background:var(--cab);color:var(--ink);display:none;flex-direction:column;gap:12px}
+  dialog.big[open]{display:flex}
+  dialog.big::backdrop{background:rgba(0,0,0,.55)}
+  .center{flex:1;display:grid;place-items:center;min-height:0}
+</style>

package/studio/app/panels/PublishPanel.svelte

@@ -1,58 +1,43 @@
 <script lang="ts">
-  /* 发布：身份是从站点借来的那个人（见 lib/identity.svelte.ts；/v1 同源反代，cookie 由浏览器带）。
-     node 侧只排队和记录；MCP 发起的请求也落在这里，作者点确认才真传。发布不可逆。 */
+  /* 发布：node 侧一键跑完（vite build → 传包 → 传表 → 发布），页面只发起、看进度、看历史。
+     身份是从站点借来的那个人（lib/identity.svelte.ts）；页面一连上，反代就把 cookie 抄给了 node，
+     所以 MCP 的 publish 和这里的按钮走的是同一条路、同一个身份。发布不可逆。 */
   import { onMount } from 'svelte';
-  import type { GameModule } from 'gamekit777/sdk';
-  import game from 'virtual:studio/game';
+  import type { PublishPreflight, PublishRequest } from '../../src/engine.ts';
   import { api, type Info } from '../lib/api.ts';
   import { bus } from '../lib/bus.svelte.ts';
   import { identity } from '../lib/identity.svelte.ts';
-  import { planFromArtifacts, runUpload } from '../lib/upload.ts';
 
   let { info }: { info: Info } = $props();
-  const spec = $derived(info.snapshot.spec);
   const me = $derived(identity.me);
   let note = $state('');
-  let running = $state<string | null>(null);
-  let log = $state<string[]>([]);
+  let running = $state(false);
+  let pre = $state<PublishPreflight | null>(null);
+  let checking = $state(false);
 
   const reqs = $derived(Object.values(bus.publish).sort((a, b) => b.createdAt - a.createdAt));
-  const pct = (ppm: number) => `${(ppm / 1e4).toFixed(4)}%`;
 
-  onMount(() => { void identity.refresh(); void api.publishList().then((l) => { for (const r of l) bus.publish = { ...bus.publish, [r.id]: r }; }); });
+  async function check() {
+    checking = true;
+    try { pre = await api.publishPreflight(); } catch (e) { pre = { ok: false, issues: [e instanceof Error ? e.message : String(e)], warnings: [], artifacts: [], session: false, remote: null }; }
+    finally { checking = false; }
+  }
 
-  const lowest = $derived(info.artifacts.reduce<number | null>((m, a) => (m === null || a.computedRtpPpm < m ? a.computedRtpPpm : m), null));
-  const localIssues = $derived.by(() => {
-    const out: string[] = [];
-    const declared = Math.round(spec.rtp * 1e6);
-    if (!info.artifacts.length) out.push('当前指纹下没有已建的表');
-    if (lowest !== null && lowest + 100 < declared) out.push(`最低实算 RTP ${pct(lowest)} 低于游戏声明 ${pct(declared)}，平台会拒`);
-    const miss = spec.modes.filter((m) => !info.artifacts.some((a) => a.mode === m.name));
-    if (miss.length) out.push(`未建：${miss.map((m) => m.name).join('、')}`);
-    return out;
+  onMount(() => {
+    void identity.refresh().then(check);
+    void api.publishList().then((l) => { for (const r of l) bus.publish = { ...bus.publish, [r.id]: r }; });
   });
 
-  async function approve(id: string) {
-    const req = bus.publish[id]; if (!req) return;
-    running = id; log = [];
-    const say = (m: string) => { log = [...log, m]; void api.publishUpdate(id, { progress: [...(bus.publish[id]?.progress ?? []), m] }); };
-    await api.publishUpdate(id, { status: 'running' });
+  async function publish() {
+    running = true;
     try {
-      const arts = req.modes ? info.artifacts.filter((a) => req.modes!.includes(a.mode)) : info.artifacts;
-      if (!arts.length) throw new Error('没有可发布的表');
-      say(`拼装 ${arts.length} 张表…`);
-      const plan = await planFromArtifacts(game as GameModule<object, unknown>, arts);
-      const r = await runUpload(plan, { publishModes: req.modes ?? undefined, onProgress: say });
-      await api.publishUpdate(id, { status: 'published', result: { gameId: r.game.id, slug: r.game.slug, verifiedRtpPpm: r.game.verifiedRtpPpm, modes: r.tables.map((t) => t.mode) } });
-      say(`✅ 已发布 ${r.game.slug}（${r.game.id}）`);
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      await api.publishUpdate(id, { status: 'failed', error: msg });
-      say(`✗ ${msg}`);
-    } finally { running = null; }
+      const job = await api.publishRequest(null, note || null);
+      note = '';
+      await api.waitJob(job.id);
+      await check();
+    } finally { running = false; }
   }
-  const reject = (id: string) => api.publishUpdate(id, { status: 'rejected' });
-  const request = () => api.publishRequest(null, note || null).then(() => { note = ''; });
+  const label = (r: PublishRequest) => r.status === 'running' ? '进行中' : r.status === 'published' ? '已发布' : '失败';
 </script>
 
 <div class="grid">
@@ -60,7 +45,7 @@
     <h2>身份</h2>
     {#if me}
       <p>{me.user.isAnonymous ? '游客' : me.user.name ?? '玩家'} <span class="mono hint">{me.user.id.slice(0, 8)}…</span> · 余额 {me.wallet.balanceCents}</p>
-      <p class="hint">这就是你在 {info.urls.site} 上的身份，发布出来的游戏归它。{#if me.user.isAnonymous}匿名身份换浏览器就丢了——要长期用，先在站点上登录，再回来重新连接。{/if}</p>
+      <p class="hint">这就是你在 {info.urls.site} 上的身份，发布出来的游戏归它。页面连上后 node 侧也记住了它，AI 用 publish 工具时不用再来点确认。{#if me.user.isAnonymous}匿名身份换浏览器就丢了——要长期用，先在站点上登录，再回来重新连接。{/if}</p>
       <button class="sec" onclick={() => identity.redirect(info.urls.site)}>换个身份 / 重新连接</button>
     {:else}
       <p class="hint">{identity.error ?? '没有身份'}</p>
@@ -69,28 +54,36 @@
   </div>
 
   <div class="card">
-    <h2>本地体检</h2>
-    {#if localIssues.length}{#each localIssues as i (i)}<p class="bad">✗ {i}</p>{/each}{:else}<p class="ok">✓ {info.artifacts.length} 张表就绪，最低实算 RTP {lowest !== null ? pct(lowest) : '-'}</p>{/if}
-    <div class="row"><input placeholder="说明（可空）" bind:value={note} style="flex:1" /><button class="pri" onclick={request} disabled={!!localIssues.length}>发起发布请求</button></div>
+    <h2>体检</h2>
+    <p class="hint">游戏在平台上按 <span class="mono">game.meta.json</span> 的 gameId 绑定：{info.gameId ? `${info.gameId}` : '还没有，第一次发布会新建并写回'}。改名只改 id / title。</p>
+    {#if checking}<p class="hint">检查中…</p>
+    {:else if pre}
+      {#each pre.issues as i (i)}<p class="bad">✗ {i}</p>{/each}
+      {#each pre.warnings as w (w)}<p class="warn">⚠ {w}</p>{/each}
+      {#if pre.ok}<p class="ok">✓ {pre.artifacts.length} 张表就绪{#if pre.remote}，这次会发布：{pre.remote.willPublish.join('、') || '（无新表，只换包）'}{/if}</p>{/if}
+      {#if pre.remote?.game}<p class="hint">平台上的游戏：{pre.remote.game.slug}（{pre.remote.game.status}），已生效 mode：{pre.remote.game.liveModes.join('、') || '无'}</p>{/if}
+    {/if}
+    <div class="row">
+      <input placeholder="说明（可空，记进发布记录）" bind:value={note} style="flex:1" />
+      <button class="sec" onclick={check} disabled={checking || running}>重新体检</button>
+      <button class="pri" onclick={publish} disabled={running || !pre?.ok} title="不可逆：已生效的 mode 不能再换表">{running ? '发布中…' : '发布'}</button>
+    </div>
   </div>
 
   <div class="card">
-    <h2>发布请求</h2>
-    {#if !reqs.length}<p class="hint">没有待处理的请求。AI 用 publish 工具发起的请求会出现在这里。</p>{/if}
+    <h2>发布记录</h2>
+    {#if !reqs.length}<p class="hint">还没有发布过。AI 用 publish 工具发的也会出现在这里。</p>{/if}
     {#each reqs as r (r.id)}
-      <div class="req" class:active={r.status === 'awaiting-approval'}>
+      <div class="req" class:active={r.status === 'running'}>
         <div class="row">
           <b class="mono">{r.id}</b><span class="hint">来自 {r.from} · {new Date(r.createdAt).toLocaleTimeString()}</span>
-          <span class:ok={r.status === 'published'} class:bad={r.status === 'failed' || r.status === 'rejected'} class:warn={r.status === 'awaiting-approval'}>{r.status}</span>
+          <span class:ok={r.status === 'published'} class:bad={r.status === 'failed'} class:warn={r.status === 'running'}>{label(r)}</span>
           <span style="flex:1"></span>
-          {#if r.status === 'awaiting-approval'}
-            <button class="pri" onclick={() => approve(r.id)} disabled={!!running || !me || !!localIssues.length} title="不可逆：已生效的 mode 不能再换表">确认发布{r.modes ? `（${r.modes.join('、')}）` : '（全部）'}</button>
-            <button class="sec" onclick={() => reject(r.id)}>拒绝</button>
-          {/if}
+          {#if r.result}<a href={r.result.playUrl} target="_blank" rel="noreferrer">试玩</a>{/if}
         </div>
         {#if r.note}<p class="hint">{r.note}</p>{/if}
         {#if r.error}<p class="bad">{r.error}</p>{/if}
-        {#if running === r.id && log.length}<pre>{log.join('\n')}</pre>{:else if r.progress.length}<pre>{r.progress.join('\n')}</pre>{/if}
+        {#if r.progress.length}<pre>{r.progress.join('\n')}</pre>{/if}
       </div>
     {/each}
   </div>

package/studio/bin.ts

@@ -37,11 +37,13 @@ const placeholder = { studio: '', preview: '', backend: cfg.backendUrl, site: cf
 const engine = new Engine(cfg.gameDir, placeholder);
 
 const server = await startGameServer({
+  onSession: (c) => engine.rememberSession(c),
   gameDir: cfg.gameDir, studioRoot: cfg.studioRoot, port: cfg.gamePort, backendUrl, engine, quiet: mcpMode,
 });
 const base = (server.resolvedUrls?.local[0] ?? `http://127.0.0.1:${cfg.gamePort}/`).replace(/\/$/, '');
 placeholder.studio = `${base}${PAGE_PATH}`;
 placeholder.preview = `${base}${PREVIEW_PATH}`;
+engine.syncAssetsInBackground();
 
 let mcp: Awaited<ReturnType<typeof serveStdio>> | null = null;
 if (mcpMode) mcp = await serveStdio(engine);

package/studio/cli.ts

@@ -2,7 +2,7 @@
 /* `gamekit777` 这个命令的入口：按子命令分派。
  *
  *   gamekit777 studio [dir] [--mcp|--no-mcp] [--game-port N] [--backend URL]   起工作台（MCP 走 stdio）
- *   gamekit777 new                                             在当前目录脚手架一个新游戏（my-game）并装依赖；改名改 game.meta.json
+ *   gamekit777 new [名字]                                      新建游戏并装依赖：给名字 → 子目录 ./名字；不给 → 就地用当前（空）目录
  *
  * 只是薄薄一层分派，逻辑各在 bin.ts 和 src/scaffold.ts。 */
 const [sub, ...rest] = process.argv.slice(2);
@@ -10,7 +10,7 @@ const [sub, ...rest] = process.argv.slice(2);
 const usage = (): never => {
   process.stderr.write(`用法：
   gamekit777 studio [dir] [--mcp|--no-mcp] [--game-port N] [--backend URL]
-  gamekit777 new                               在当前目录生成 my-game（占了加序号）并装依赖；名字之后改 game.meta.json
+  gamekit777 new [名字]                        新建游戏并装依赖：给名字 → 生成 ./名字；不给 → 就地用当前目录（必须是空目录，id 取目录名）
 
 接 Claude Code：在游戏目录里
   claude mcp add gamekit -- bunx gamekit777 studio
@@ -25,12 +25,13 @@ switch (sub) {
     break;
   }
   case 'new': {
-    // 刻意不收参数：名字、标题都在生成后的 game.meta.json 里改，少一层「命令行参数 vs 配置文件」的分叉
-    if (rest.length > 0) usage();
+    /* 只收一个可选的名字。不给就用当前目录：AI 多半已经站在要建的目录里，再套一层 my-game 只会让它 cd 错地方。
+       标题之类都在生成后的 game.meta.json 里改，少一层「命令行参数 vs 配置文件」的分叉 */
+    if (rest.length > 1 || rest[0]?.startsWith('-')) usage();
     const { scaffold } = await import('./src/scaffold.ts');
     try {
-      const r = await scaffold({}, process.cwd());
-      process.stdout.write(`✓ ${r.dest}\n\n${r.next.map((n) => `  ${n}`).join('\n')}\n\n  cd ${r.dest} && bunx gamekit777 studio\n`);
+      const r = await scaffold({ name: rest[0] }, process.cwd());
+      process.stdout.write(`✓ ${r.inPlace ? `就地生成在 ${r.dest}` : r.dest}\n\n${r.next.map((n) => `  ${n}`).join('\n')}\n\n  ${r.inPlace ? '' : `cd ${r.dest} && `}bunx gamekit777 studio\n`);
     } catch (e) {
       process.stderr.write(`✗ ${e instanceof Error ? e.message : String(e)}\n`);
       process.exit(1);