gamekit777 0.1.2 → 0.1.5

package/runtime/types.ts

@@ -1,29 +1,7 @@
-/* 与 @gamekit/vite-config 的 manifest 插件产出的 manifest.json 对应。
-   两边各自声明而不是互相 import：runtime 会被打进游戏产物，
-   不该为了一个类型把构建期的包拖进运行时依赖图。 */
-export type AssetType = 'image' | 'audio' | 'font' | 'json' | 'video' | 'binary';
-
-export interface AssetEntry {
-  key: string;
-  path: string;
-  type: AssetType;
-  bytes: number;
-  priority: 'critical' | 'lazy';
-}
-
-export interface GameManifest {
-  id: string;
-  version: string;
-  generatedAt: string;
-  entry: string;
-  css: string | null;
-  totalBytes: number;
-  criticalBytes: number;
-  assets: AssetEntry[];
-}
-
+/* 资源条目和清单的形状在 @gamekit/sdk（它们是 GameModule 契约的一部分）；
+   这里只剩加载器自己的进度与结果类型 */
 export interface LoadProgress {
-  /** 已加载字节 / 总字节 */
+  /** 已加载 / 总量。构建产物里按字节，开发环境按个数 */
   ratio: number;
   loaded: number;
   total: number;

package/sdk/assets.ts

@@ -0,0 +1,24 @@
+/* 游戏包对平台声明的资源清单。纯数据，随 GameModule 一起交给平台侧的加载器。
+
+   游戏不写加载代码：@gamekit/runtime 的注册表按 src/assets/{critical,lazy} 目录生成这份清单，
+   平台（玩家站点的 iframe、dev-host、studio 预览）在 mount 之前按它预加载、把进度画在自己的机台上。
+   类型放在 sdk 而不是 runtime：GameModule 是契约，runtime 只是它的一种实现。 */
+export type AssetType = 'image' | 'audio' | 'font' | 'json' | 'video' | 'binary';
+
+export interface AssetEntry {
+  /** 源码里稳定的名字，如 'critical/coco-classic.jpg' */
+  key: string;
+  /** 运行时 URL（构建产物里带 hash，已按 import.meta.url 解析） */
+  url: string;
+  type: AssetType;
+  /** critical 开场前必须到齐；lazy 挂载后后台预取 */
+  priority: 'critical' | 'lazy';
+  /** 构建期由 manifest 插件写入；开发环境不知道，进度退化成按个数走 */
+  bytes: number | null;
+}
+
+export interface AssetBundle {
+  /** 文档级字体样式表 URL（game.meta.json 的 fonts） */
+  fonts: string[];
+  entries: AssetEntry[];
+}

package/sdk/host.ts

@@ -60,8 +60,6 @@ export interface GameStatus {
   /** 现在能不能改影响结果的参数。平台据此把设置控件变灰——
       和游戏画布内的控件用的是同一个判断，两边不会打架 */
   canEditConfig: boolean;
-  /** 资源加载进度 0..1，phase === 'loading' 时有意义 */
-  progress?: number;
   lastPayout?: number;
   /** validate() 的结果，平台显示在设置面板上 */
   issues?: import('./schema.ts').ConfigIssue[];

package/sdk/index.ts

@@ -7,3 +7,4 @@ export * from './store.ts';
 export { sha256, hmacSha256, utf8, toHex, Sha256 } from './hash.ts';
 export * from './sample.ts';
 export * from './stage.ts';
+export * from './assets.ts';

package/sdk/spec.ts

@@ -7,6 +7,7 @@
  *
  * defineGame 住在这个零依赖的包里，浏览器和 Node 侧的采样 worker import 的是同一份清单。
  * 它不是恒等函数：填默认值、挂推导出来的方法，消费方拿到的永远是填满的对象。 */
+import type { AssetBundle } from './assets.ts';
 import type { RoundInput, RoundResult, Restore, RestoreInput } from './contract.ts';
 import type { GameInstance, Host } from './host.ts';
 import type { RngSeed } from './rng.ts';
@@ -90,6 +91,8 @@ export interface GameDefinition<C, O> extends GameSpec<C, O> {
 export interface GameModule<C, O> extends GameDefinition<C, O> {
   mount(host: Host<C>, el: HTMLElement): Promise<GameInstance<O>>;
   skins?: Skin[];
+  /** 资源清单。平台在 mount 之前按它预加载并显示进度；没有就直接挂 */
+  assets?: AssetBundle;
 }
 
 /* ── 采样种子 ────────────────────────────────────────────────────── */

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>