kasaframe 0.0.0-stage → 0.1.3

package/packages/studio/src/ui/main.ts

@@ -0,0 +1,503 @@
+import type { StudioConfig } from "../plugin.ts";
+import { Timeline, type TimelineData } from "./timeline.ts";
+
+// SPEC 1번 페이지 계약. 미리보기는 프로젝트와 이것으로만 말한다.
+interface KfMarker {
+  t: number;
+  label: string;
+  kind: "scene" | "beat" | "drop" | "section";
+}
+interface KfPage {
+  meta: { fps: number; width: number; height: number; duration: number; music?: string };
+  mode: "seek" | "step";
+  ready(): Promise<void>;
+  seek(t: number): Promise<void>;
+  markers?: KfMarker[];
+}
+type KfWindow = Window & { __kf?: Partial<KfPage> };
+
+const ICON = {
+  first: "M5 5h2.5v14H5zM19 5v14L8.5 12z",
+  prev: "M15.5 5v14L5 12zM16.5 5H19v14h-2.5z",
+  play: "M7 4.5v15L19.5 12z",
+  pause: "M6.5 5h4v14h-4zM13.5 5h4v14h-4z",
+  next: "M5 5h2.5v14H5zM8.5 5v14L19 12z",
+  last: "M5 5v14l10.5-7zM16.5 5H19v14h-2.5z",
+  loop: "M7 7h10v3l4-4-4-4v3H5v6h2zM17 17H7v-3l-4 4 4 4v-3h12v-6h-2z",
+  captions: "M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 2v10h16V7zm2 5h5v2H6zm7 0h5v2h-5zm-7-3h12v2H6z",
+};
+const svg = (d: string) => `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="${d}"/></svg>`;
+
+const app = document.getElementById("app")!;
+app.innerHTML = `
+  <header class="top">
+    <span class="name"></span>
+    <span class="meta"></span>
+    <span class="grow"></span>
+    <span class="keys">Space 재생 · ←→ 프레임 · Shift 1초 · Alt 박 · ↑↓ 경계 · Shift 끌기 = 붙이기</span>
+    <span class="status" data-state="wait">불러오는 중</span>
+  </header>
+  <main class="stage"><div class="error"></div><div class="frame"><iframe src="/index.html" tabindex="-1" title="project"></iframe></div></main>
+  <nav class="bar">
+    <button data-act="first" title="처음 (Home)">${svg(ICON.first)}</button>
+    <button data-act="prev" title="한 프레임 뒤 (←)">${svg(ICON.prev)}</button>
+    <button data-act="play" class="play" title="재생 (Space)">${svg(ICON.play)}</button>
+    <button data-act="next" title="한 프레임 앞 (→)">${svg(ICON.next)}</button>
+    <button data-act="last" title="끝 (End)">${svg(ICON.last)}</button>
+    <button data-act="loop" title="반복 (L)" aria-pressed="false">${svg(ICON.loop)}</button>
+    <button data-act="captions" title="화면 자막 (C)" aria-pressed="false" hidden>${svg(ICON.captions)}</button>
+    <span class="time">0:00.000</span>
+    <span class="frameno"></span>
+    <span class="info"></span>
+  </nav>
+  <section class="timeline"></section>
+`;
+const $ = <T extends Element>(s: string) => app.querySelector(s) as T;
+const iframe = $<HTMLIFrameElement>("iframe");
+const frameBox = $<HTMLDivElement>(".frame");
+const stageBox = $<HTMLElement>(".stage");
+const errorBox = $<HTMLDivElement>(".error");
+errorBox.addEventListener("click", (e) => e.stopPropagation());
+const statusEl = $<HTMLSpanElement>(".status");
+const timeEl = $<HTMLSpanElement>(".time");
+const frameEl = $<HTMLSpanElement>(".frameno");
+const infoEl = $<HTMLSpanElement>(".info");
+const playBtn = $<HTMLButtonElement>('[data-act="play"]');
+const loopBtn = $<HTMLButtonElement>('[data-act="loop"]');
+const capBtn = $<HTMLButtonElement>('[data-act="captions"]');
+// 화면 자막은 프로젝트 페이지 주소의 ?captions=on|off 로 켜고 끈다 — kf.json 은 그대로(kf render --captions 와 같은 길)
+let captions = new URLSearchParams(location.search).get("captions");
+if (captions === "on" || captions === "off") iframe.src = `/index.html?captions=${captions}`;
+
+const S = {
+  kf: null as KfPage | null,
+  meta: { fps: 60, width: 1920, height: 1080, duration: 60 },
+  cfg: null as StudioConfig | null,
+  data: null as TimelineData | null,
+  t: Math.max(0, Number(new URLSearchParams(location.search).get("t")) || 0),
+  playing: false,
+  resumeAfterScrub: false,
+  loop: false,
+  wanted: null as number | null,
+  busy: false,
+  seekMs: 0,
+  generation: 0,
+};
+
+const audio = new Audio();
+audio.preload = "auto";
+let audioUrl: string | null = null;
+let hasAudio = false;
+let wallStart = 0;
+
+const fps = () => S.meta.fps;
+const dur = () => S.meta.duration;
+const toFrame = (t: number) => Math.round(t * fps());
+const frameTime = (t: number) => Math.min(dur(), Math.max(0, toFrame(t) / fps()));
+
+function fmt(t: number) {
+  const m = Math.floor(t / 60);
+  const s = t - m * 60;
+  return `${m}:${s.toFixed(3).padStart(6, "0")}`;
+}
+
+function setStatus(state: "ok" | "wait" | "err", text: string) {
+  statusEl.dataset.state = state;
+  statusEl.textContent = text;
+}
+
+function showError(msg: string) {
+  errorBox.textContent = msg;
+  errorBox.classList.add("on");
+  setStatus("err", "오류");
+}
+
+function clearError() {
+  errorBox.textContent = "";
+  errorBox.classList.remove("on");
+}
+
+// ---- 시계: 곡이 있으면 곡이 기준, 없으면 벽시계 ----
+
+function clockNow(): number {
+  if (!S.playing) return S.t;
+  if (hasAudio) return audio.currentTime - (S.cfg?.from ?? 0);
+  return (performance.now() - wallStart) / 1000;
+}
+
+function startClock() {
+  if (hasAudio) {
+    audio.currentTime = (S.cfg?.from ?? 0) + S.t;
+    audio.play().catch((e: unknown) => {
+      hasAudio = false;
+      wallStart = performance.now() - S.t * 1000;
+      showError(`곡을 재생하지 못했다 — 소리 없이 돈다 (${String(e)})`);
+    });
+  } else wallStart = performance.now() - S.t * 1000;
+}
+
+function play() {
+  if (S.playing) return;
+  if (S.t >= dur() - 1 / fps()) S.t = 0;
+  S.playing = true;
+  startClock();
+  playBtn.innerHTML = svg(ICON.pause);
+}
+
+function pause() {
+  if (!S.playing) return;
+  S.t = frameTime(clockNow());
+  S.playing = false;
+  audio.pause();
+  playBtn.innerHTML = svg(ICON.play);
+  requestSeek(S.t);
+  syncUrl();
+}
+
+function setTime(t: number, exact = false) {
+  S.t = exact ? Math.min(dur(), Math.max(0, t)) : frameTime(t);
+  if (S.playing) startClock();
+  requestSeek(S.t);
+  syncUrl();
+  paint();
+}
+
+let urlTimer = 0;
+function syncUrl() {
+  clearTimeout(urlTimer);
+  urlTimer = window.setTimeout(() => {
+    const q = new URLSearchParams(location.search);
+    q.set("t", S.t.toFixed(3));
+    history.replaceState(null, "", `?${q}`);
+  }, 120);
+}
+
+// ---- 페이지에 seek: 하나만 돌리고, 밀린 요청은 마지막 것만 ----
+
+function requestSeek(t: number) {
+  S.wanted = t;
+  void pump();
+}
+
+async function pump() {
+  if (S.busy || S.wanted === null || !S.kf) return;
+  const t = S.wanted;
+  const gen = S.generation;
+  S.wanted = null;
+  S.busy = true;
+  const t0 = performance.now();
+  try {
+    await S.kf.seek(t);
+  } catch (e) {
+    if (gen === S.generation) showError(`seek(${t.toFixed(3)}) 실패: ${e instanceof Error ? e.message : String(e)}`);
+  }
+  S.busy = false;
+  if (gen !== S.generation) return;
+  S.seekMs = performance.now() - t0;
+  setStatus("ok", `연결됨 · seek ${S.seekMs.toFixed(0)}ms`);
+  if (S.wanted !== null) void pump();
+}
+
+function tick() {
+  if (S.playing) {
+    let t = clockNow();
+    if (t >= dur()) {
+      if (S.loop) {
+        S.t = 0;
+        startClock();
+        t = 0;
+      } else {
+        S.t = dur();
+        pause();
+        t = dur();
+      }
+    }
+    S.t = Math.max(0, t);
+    // 렌더와 같은 그림을 보이려고 프레임 경계로 내려서 찍는다
+    requestSeek(Math.floor(S.t * fps() + 1e-6) / fps());
+  }
+  paint();
+  requestAnimationFrame(tick);
+}
+
+// ---- 화면 ----
+
+const timeline = new Timeline($<HTMLElement>(".timeline"), {
+  seek: (t, snapped) => setTime(t, snapped),
+  scrubStart() {
+    S.resumeAfterScrub = S.playing;
+    pause();
+  },
+  scrubEnd() {
+    if (S.resumeAfterScrub) play();
+  },
+});
+
+function lastAtOrBefore(ts: number[], t: number): number {
+  let i = -1;
+  for (let k = 0; k < ts.length && ts[k] <= t + 1e-6; k++) i = k;
+  return i;
+}
+
+function paint() {
+  const t = S.t;
+  timeEl.textContent = fmt(t);
+  frameEl.textContent = `f ${toFrame(t)} / ${toFrame(dur())}`;
+  timeline.setTime(t, S.playing);
+  const d = S.data;
+  if (!d) return;
+  const parts: string[] = [];
+  const scene = d.scenes.find((s) => t >= s.from && t < s.end) ?? (t >= dur() ? d.scenes[d.scenes.length - 1] : undefined);
+  if (scene) parts.push(`장면 <b>${esc(scene.id)}</b> +${(t - scene.from).toFixed(2)}`);
+  const si = lastAtOrBefore(d.sections.map((s) => s.t), t);
+  if (si >= 0) parts.push(`구간 <b>${esc(d.sections[si].kind)}</b>`);
+  const bi = lastAtOrBefore(d.downbeats, t);
+  if (bi >= 0) {
+    const inBar = lastAtOrBefore(d.beats, t) - lastAtOrBefore(d.beats, d.downbeats[bi]);
+    parts.push(`마디 <b>${bi + 1}.${inBar + 1}</b>`);
+  }
+  const pi = lastAtOrBefore(d.phrases, t);
+  if (pi >= 0) parts.push(`프레이즈 ${pi + 1}`);
+  const next = d.drops.find((m) => m.t > t + 1e-6);
+  const last = [...d.drops].reverse().find((m) => m.t <= t + 1e-6);
+  if (last && t - last.t < 1) parts.push(`<span class="drop">드롭 +${(t - last.t).toFixed(2)}</span>`);
+  else if (next) parts.push(`드롭까지 ${(next.t - t).toFixed(2)}`);
+  infoEl.innerHTML = parts.join(" · ");
+}
+
+function esc(s: string) {
+  return s.replace(/[&<>"]/g, (c) => `&#${c.charCodeAt(0)};`);
+}
+
+function fit() {
+  const pad = 20;
+  const w = stageBox.clientWidth - pad * 2;
+  const h = stageBox.clientHeight - pad * 2;
+  const { width, height } = S.meta;
+  const k = Math.max(0.02, Math.min(w / width, h / height));
+  frameBox.style.width = `${Math.floor(width * k)}px`;
+  frameBox.style.height = `${Math.floor(height * k)}px`;
+  iframe.style.width = `${width}px`;
+  iframe.style.height = `${height}px`;
+  iframe.style.transform = `scale(${k})`;
+  const metaEl = $<HTMLSpanElement>(".meta");
+  const ratio = aspect(width, height);
+  metaEl.textContent = `${width}×${height} · ${ratio} · ${S.meta.fps}fps · ${+S.meta.duration.toFixed(3)}초 · ${Math.round(k * 100)}%${S.cfg?.beats?.bpm ? ` · ${S.cfg.beats.bpm} BPM` : ""}${hasAudio ? "" : " · 소리 없음"}`;
+}
+
+function aspect(w: number, h: number) {
+  const g = (a: number, b: number): number => (b ? g(b, a % b) : a);
+  const d = g(w, h);
+  return `${w / d}:${h / d}`;
+}
+
+new ResizeObserver(fit).observe(stageBox);
+
+function buildData(kf: KfPage, cfg: StudioConfig | null): TimelineData {
+  const D = kf.meta.duration;
+  const markers = (kf.markers ?? []).slice().sort((a, b) => a.t - b.t);
+  const of = (kind: KfMarker["kind"]) => markers.filter((m) => m.kind === kind);
+  let scenes = of("scene").map((m, i, all) => ({ id: m.label, from: m.t, end: i + 1 < all.length ? all[i + 1].t : D }));
+  if (!scenes.length && cfg?.kf?.scenes) scenes = cfg.kf.scenes.map((s) => ({ id: s.id, from: s.from, end: s.from + s.dur }));
+  const within = (t: number) => t >= -1e-6 && t <= D + 1e-6;
+  const sections = (cfg?.beats?.sections ?? of("section").map((m) => ({ t: m.t, kind: m.label }))).filter((s) => within(s.t));
+  return {
+    duration: D,
+    fps: kf.meta.fps,
+    scenes,
+    sections,
+    beats: of("beat").map((m) => m.t),
+    downbeats: (cfg?.beats?.downbeats ?? []).filter(within),
+    phrases: (cfg?.beats?.phrases ?? []).filter(within),
+    drops: of("drop").map((m) => ({ t: m.t, label: m.label })),
+    energy: cfg?.beats?.energy,
+  };
+}
+
+function setupAudio(cfg: StudioConfig | null, kf: KfPage) {
+  // 서버가 kf.json 기준으로 푼 주소가 먼저 — 프로젝트 밖 곡도 /@fs 로 열린다
+  let url = cfg?.music ?? null;
+  if (!url && kf.meta.music) url = new URL(kf.meta.music, iframe.contentWindow!.location.href).pathname;
+  if (url === audioUrl) return;
+  audioUrl = url;
+  hasAudio = !!url;
+  if (url) {
+    audio.src = url;
+    audio.onerror = () => {
+      hasAudio = false;
+      showError(`곡을 못 읽었다: ${decodeURI(url!)} — 소리 없이 돈다`);
+      fit();
+    };
+  } else audio.removeAttribute("src");
+  if (S.playing) startClock();
+}
+
+function syncCaptions(cfg: StudioConfig | null) {
+  const c = cfg?.captions;
+  capBtn.hidden = !c?.lines;
+  if (!c) return;
+  const on = (captions ?? (c.mode === "on" || c.mode === "fit" || c.mode === "burned" ? "on" : "off")) === "on";
+  capBtn.setAttribute("aria-pressed", String(on));
+  capBtn.title = `화면 자막 ${on ? "끄기" : "켜기"} (C) — kf.json 은 ${c.mode}`;
+}
+
+// 장면 파일이 깨지면 main.ts 가 못 떠서 __kf 가 영영 안 생긴다 — Vite 가 iframe 에 띄운 오류를 바로 옮겨 온다
+function viteError(win: Window): string | null {
+  const el = win.document.querySelector("vite-error-overlay");
+  const root = el?.shadowRoot;
+  if (!root) return null;
+  const text = (sel: string) => root.querySelector(sel)?.textContent?.trim() ?? "";
+  return [text(".message"), text(".file")].filter(Boolean).join("\n") || "Vite 오류";
+}
+
+function waitFor<T>(get: () => T | null, ms: number): Promise<T | null> {
+  const end = performance.now() + ms;
+  return new Promise((resolve) => {
+    const poll = () => {
+      const v = get();
+      if (v) return resolve(v);
+      if (performance.now() > end) return resolve(null);
+      setTimeout(poll, 30);
+    };
+    poll();
+  });
+}
+
+// 장면을 저장하면 Vite 가 iframe 만 새로 고친다. 그때마다 다시 붙고 보던 시각으로 돌아간다.
+async function attach() {
+  const gen = ++S.generation;
+  S.kf = null;
+  S.busy = false;
+  setStatus("wait", "불러오는 중");
+  const win = iframe.contentWindow as KfWindow | null;
+  if (!win) return;
+  win.addEventListener("pagehide", () => (lastUnload = performance.now()));
+  win.addEventListener("error", (e) => showError(`페이지 오류: ${e.message}\n${e.filename}:${e.lineno}`));
+  win.addEventListener("unhandledrejection", (e) => showError(`페이지 오류: ${e.reason instanceof Error ? (e.reason.stack ?? e.reason.message) : String(e.reason)}`));
+  const found = await waitFor<KfPage | { overlay: string }>(() => {
+    if (win.__kf?.seek && win.__kf.meta) return win.__kf as KfPage;
+    const msg = viteError(win);
+    return msg ? { overlay: msg } : null;
+  }, 15000);
+  if (gen !== S.generation) return;
+  if (found && "overlay" in found) {
+    showError(`프로젝트 페이지 오류(저장하면 다시 붙는다)\n${found.overlay}`);
+    return;
+  }
+  const kf = found;
+  if (!kf && errorBox.classList.contains("on")) return;
+  if (!kf) {
+    showError("window.__kf 가 없다 — main.ts 가 mountProject(...) 를 부르는지, 장면 파일에 오류가 없는지 보라(프로젝트 화면에 Vite 오류가 떠 있을 수 있다)");
+    return;
+  }
+  try {
+    await kf.ready();
+  } catch (e) {
+    if (gen === S.generation) showError(`ready() 실패: ${e instanceof Error ? (e.stack ?? e.message) : String(e)}`);
+    return;
+  }
+  if (gen !== S.generation) return;
+  const cfg = await fetch("/__kf/studio.json", { cache: "no-store" })
+    .then((r) => (r.ok ? (r.json() as Promise<StudioConfig>) : null))
+    .catch(() => null);
+  if (gen !== S.generation) return;
+  S.kf = kf;
+  S.cfg = cfg;
+  S.meta = { fps: kf.meta.fps, width: kf.meta.width, height: kf.meta.height, duration: kf.meta.duration };
+  S.t = Math.min(S.t, dur());
+  S.data = buildData(kf, cfg);
+  document.title = `${cfg?.name ?? "kf"} · kf preview`;
+  $<HTMLSpanElement>(".name").textContent = cfg?.name ?? "";
+  setupAudio(cfg, kf);
+  syncCaptions(cfg);
+  fit();
+  timeline.setData(S.data);
+  clearError();
+  setStatus("ok", "연결됨");
+  requestSeek(S.playing ? clockNow() : S.t);
+  paint();
+}
+
+iframe.addEventListener("load", () => void attach());
+
+// 페이지가 떠나기 시작한 시각 — Vite 가 이미 새로 고치는 중이면 다시 고치지 않는다
+let lastUnload = 0;
+let changedAt: number | null = null;
+let fallback = 0;
+new EventSource("/__kf/events").onmessage = (e) => {
+  const m = JSON.parse(e.data) as { ev: string; message?: string; where?: string; frame?: string };
+  if (m.ev === "error") {
+    showError(`프로젝트 코드 오류(고쳐 저장하면 다시 붙는다)\n${m.message}\n${m.where}\n${m.frame}`.trim());
+    return;
+  }
+  changedAt ??= performance.now();
+  clearTimeout(fallback);
+  fallback = window.setTimeout(() => {
+    // SSE 가 Vite 의 새로 고침보다 조금 늦게 닿기도 해서 바로 앞의 새로 고침도 이번 변경을 반영한 것으로 본다
+    if (changedAt !== null && lastUnload < changedAt - 400) iframe.contentWindow?.location.reload();
+    changedAt = null;
+  }, 700);
+};
+
+// ---- 조작 ----
+
+function boundaries(): number[] {
+  const d = S.data;
+  if (!d) return [0, dur()];
+  return [0, dur(), ...d.scenes.map((s) => s.from), ...d.sections.map((s) => s.t), ...d.drops.map((m) => m.t)].sort((a, b) => a - b);
+}
+
+function jump(list: number[], dir: 1 | -1) {
+  const t = S.t;
+  const eps = 0.5 / fps();
+  const target = dir > 0 ? list.find((x) => x > t + eps) : [...list].reverse().find((x) => x < t - eps);
+  if (target !== undefined) setTime(target, true);
+}
+
+function act(name: string) {
+  const f = 1 / fps();
+  if (name === "play") S.playing ? pause() : play();
+  else if (name === "first") setTime(0);
+  else if (name === "last") setTime(dur());
+  else if (name === "prev") {
+    pause();
+    setTime(S.t - f);
+  } else if (name === "next") {
+    pause();
+    setTime(S.t + f);
+  } else if (name === "captions") {
+    // iframe 만 다시 연다 — attach 가 보던 시각으로 돌아간다
+    captions = capBtn.getAttribute("aria-pressed") === "true" ? "off" : "on";
+    const u = new URL(location.href);
+    u.searchParams.set("captions", captions);
+    history.replaceState(null, "", u);
+    iframe.src = `/index.html?captions=${captions}`;
+  } else if (name === "loop") {
+    S.loop = !S.loop;
+    loopBtn.setAttribute("aria-pressed", String(S.loop));
+  }
+}
+
+app.querySelectorAll<HTMLButtonElement>("[data-act]").forEach((b) => b.addEventListener("click", () => act(b.dataset.act!)));
+stageBox.addEventListener("click", () => act("play"));
+
+window.addEventListener("keydown", (e) => {
+  if (e.metaKey || e.ctrlKey) return;
+  const f = 1 / fps();
+  const k = e.key;
+  if (k === " ") act("play");
+  else if (k === "ArrowLeft" || k === "ArrowRight") {
+    const dir = k === "ArrowRight" ? 1 : -1;
+    pause();
+    if (e.altKey) jump(S.data?.beats ?? [], dir);
+    else setTime(S.t + dir * (e.shiftKey ? 1 : f));
+  } else if (k === "ArrowUp" || k === "ArrowDown") jump(boundaries(), k === "ArrowDown" ? 1 : -1);
+  else if (k === "Home") setTime(0);
+  else if (k === "End") setTime(dur());
+  else if (k === "l" || k === "L") act("loop");
+  else if ((k === "c" || k === "C") && !capBtn.hidden) act("captions");
+  else return;
+  e.preventDefault();
+});
+
+requestAnimationFrame(tick);

package/packages/studio/src/ui/studio.css

@@ -0,0 +1,165 @@
+:root {
+  --bg: #0c0d10;
+  --panel: #14161b;
+  --raised: #1b1e25;
+  --line: #262a33;
+  --ink: #e9ebf0;
+  --dim: #8b91a0;
+  --faint: #5a606d;
+  --accent: #ff6b9a;
+  --sky: #7cc4ff;
+  --danger: #ff6b6b;
+  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, "Apple SD Gothic Neo", monospace;
+  --sans: "Pretendard", "Apple SD Gothic Neo", system-ui, sans-serif;
+  color-scheme: dark;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  height: 100%;
+  background: var(--bg);
+  color: var(--ink);
+  font: 13px/1.4 var(--sans);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+}
+
+#app {
+  display: grid;
+  grid-template-rows: auto 1fr auto auto;
+  height: 100%;
+}
+
+.top {
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.top .name { font-weight: 600; letter-spacing: -0.01em; }
+.top .meta { color: var(--dim); font-family: var(--mono); font-size: 12px; }
+.top .grow { flex: 1; }
+.top .keys { color: var(--faint); font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.top .status { font-family: var(--mono); font-size: 12px; color: var(--dim); }
+.top .status[data-state="ok"]::before,
+.top .status[data-state="wait"]::before,
+.top .status[data-state="err"]::before {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  margin-right: 7px;
+  border-radius: 50%;
+  vertical-align: 1px;
+  background: var(--sky);
+}
+.top .status[data-state="wait"]::before { background: var(--faint); }
+.top .status[data-state="err"]::before { background: var(--danger); }
+
+.error {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: none;
+  padding: 8px 16px;
+  background: rgba(42, 20, 24, 0.94);
+  color: #ffc9cf;
+  border-bottom: 1px solid #4a1f27;
+  font-family: var(--mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  max-height: 40%;
+  overflow: auto;
+}
+.error.on { display: block; }
+
+.stage {
+  position: relative;
+  min-height: 0;
+  display: grid;
+  place-items: center;
+  background:
+    linear-gradient(45deg, #101216 25%, transparent 25%, transparent 75%, #101216 75%) 0 0 / 24px 24px,
+    linear-gradient(45deg, #101216 25%, transparent 25%, transparent 75%, #101216 75%) 12px 12px / 24px 24px,
+    var(--bg);
+  overflow: hidden;
+}
+.frame {
+  position: relative;
+  overflow: hidden;
+  background: #000;
+  box-shadow: 0 0 0 1px var(--line);
+}
+.frame iframe {
+  position: absolute;
+  left: 0;
+  top: 0;
+  border: 0;
+  transform-origin: 0 0;
+  background: #000;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+  border-top: 1px solid var(--line);
+  background: var(--panel);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.bar button {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--ink);
+  cursor: pointer;
+}
+.bar button:hover { background: var(--raised); }
+.bar button.play { width: 38px; background: var(--raised); }
+.bar button[aria-pressed="true"] { color: var(--sky); }
+.bar button svg { width: 16px; height: 16px; fill: currentColor; }
+.bar .time {
+  margin-left: 10px;
+  font-family: var(--mono);
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+.bar .frameno, .bar .info {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--dim);
+  font-variant-numeric: tabular-nums;
+}
+.bar .frameno { margin-left: 8px; }
+.bar .info { margin-left: 16px; overflow: hidden; text-overflow: ellipsis; }
+.bar .info b { color: var(--ink); font-weight: 500; }
+.bar .info .drop { color: var(--accent); }
+
+.timeline {
+  position: relative;
+  height: 156px;
+  border-top: 1px solid var(--line);
+  background: var(--panel);
+  cursor: crosshair;
+  touch-action: none;
+}
+.timeline canvas { display: block; width: 100%; height: 100%; }
+
+@media (max-width: 1100px) {
+  .top .keys { display: none; }
+}