kasaframe 0.0.0-stage → 0.1.3

package/themes/debug-hud/sample/lib/hudkit.ts

@@ -0,0 +1,49 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { hudFrame } from "../../effects.ts";
+
+export const barsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.bars.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+export const beatsFrom0 = (ctx: SceneCtx): number[] => ctx.beats.beats.filter((b) => b >= -1e-6 && b < ctx.dur - 1e-6);
+
+export function layer(parent: HTMLElement): HTMLElement {
+  const el = document.createElement("div");
+  el.style.cssText = "position:absolute;inset:0;";
+  parent.append(el);
+  return el;
+}
+
+/** from 부터 to 까지만 보이는 컷 — 숨은 컷은 그리지 않는다 */
+export function cut(parent: HTMLElement, from: number, to: number) {
+  const el = layer(parent);
+  return {
+    el,
+    on(t: number): boolean {
+      const v = t >= from && t < to;
+      // visibility 로 숨기면 안쪽 요소가 visible 을 주는 순간 부모를 뚫고 보인다 — display 로 통째로 뺀다
+      el.style.display = v ? "" : "none";
+      return v;
+    },
+  };
+}
+
+/** 모노 글 한 덩어리. at 전엔 숨는다 — 계기판 글은 잰 순간에 뜬다 */
+export function mono(parent: HTMLElement, ctx: SceneCtx, o: { x: number; y: number; size: number; text?: string; color?: string; weight?: number; align?: "left" | "center" | "right"; w?: number }) {
+  const el = document.createElement("div");
+  const align = o.align ?? "left";
+  const box = align === "left" ? `left:${o.x}px;` : `left:${o.x}px;width:${o.w ?? 0}px;text-align:${align};`;
+  el.style.cssText = `position:absolute;${box}top:${o.y}px;font:${o.weight ?? 600} ${o.size}px ${ctx.style.fonts.mono};line-height:1;white-space:pre;color:${ctx.style.colors[o.color ?? "ink"] ?? o.color};`;
+  el.textContent = o.text ?? "";
+  parent.append(el);
+  return el;
+}
+
+/** 이 견본은 곡 4.0초부터 — 마디는 그 앞에 셋이 있었다 */
+export const frameOf = (root: HTMLElement, ctx: SceneCtx) => hudFrame(layer(root), { ctx, title: "OpenGateway · apis.opengateway.ai/v1", songFrom: 4.0, barFrom: 3, grid: {} });
+
+/** OG 로고(currentColor SVG) — 계기판 잉크로 */
+export function logo(parent: HTMLElement, svg: string, x: number, y: number, w: number, color: string) {
+  const el = document.createElement("div");
+  el.style.cssText = `position:absolute;left:${x}px;top:${y}px;width:${w}px;color:${color};`;
+  el.innerHTML = svg.replace(/ width="\d+" height="\d+"/, ' width="100%" style="display:block"');
+  parent.append(el);
+  return el;
+}

package/themes/debug-hud/sample/lib/og.ts

@@ -0,0 +1,29 @@
+// OpenGateway 사실 — docs/briefs/og-intro-15s.md 에 적힌 것만. 숫자를 여기서 새로 만들지 않는다
+export const OG = {
+  url: "https://apis.opengateway.ai/v1",
+  host: "apis.opengateway.ai/v1",
+  site: "opengateway.ai",
+  models: 102,
+  endpoints: ["/chat/completions", "/responses", "/messages", "/images/generations"],
+  providers: [
+    ["OpenAI", 41],
+    ["Anthropic", 15],
+    ["Google", 15],
+    ["Z.ai", 7],
+    ["xAI", 6],
+    ["Qwen", 5],
+    ["Moonshot", 4],
+    ["DeepSeek", 4],
+    ["MiniMax", 3],
+  ] as [string, number][],
+  ids: ["openai/gpt-6.1-sol", "anthropic/claude-opus-5-5", "google/gemini-3.5-flash-lite", "deepseek/deepseek-v4.1-flash-ultrafast", "z-ai/glm-5.3-flash-ultrafast"],
+  night: { from: 0, to: 10, tz: "KST" },
+  deepseek: { id: "deepseek-v4.1-flash-ultrafast", input: ["$0.30", "$0.03"], output: ["$1.20", "$0.12"], off: "-90%" },
+  glm: { id: "glm-5.3-flash-ultrafast", off: "-70%" },
+  ttft: [
+    ["gpt-5.4-nano", "612.5ms", 612.5],
+    ["gemini-3.5-flash-lite", "693.0ms", 693.0],
+    ["claude-haiku-5-5", "760.5ms", 760.5],
+  ] as [string, string, number][],
+  calls: "18번 합 $0.0004",
+};

package/themes/debug-hud/sample/main.ts

@@ -0,0 +1,9 @@
+import { mountProject } from "@kasaframe/adapters";
+import kf from "./kf.json";
+import style from "./style.json";
+
+// 장면 파일을 늘리거나 빼도 이 파일은 그대로 — 시간표는 kf.json 한 곳. 글꼴·색 변수는 mountProject 가 건다
+const scenes = import.meta.glob("./scenes/*.ts", { eager: true });
+const beats = Object.values(import.meta.glob("./beats.json", { eager: true, import: "default" }))[0] ?? null;
+
+mountProject({ kf, scenes, beats, style, stage: document.getElementById("stage")! });

package/themes/debug-hud/sample/scenes/end.ts

@@ -0,0 +1,62 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { crosshair, readout, wireBox } from "../../effects.ts";
+import svg from "../assets/og/logo.svg?raw";
+import { barsFrom0, beatsFrom0, cut, frameOf, layer, logo, mono } from "../lib/hudkit.ts";
+import { OG } from "../lib/og.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const B = barsFrom0(ctx);
+    const b = beatsFrom0(ctx);
+    const frame = frameOf(root, ctx);
+    const content = layer(root);
+    const ink = ctx.style.colors.ink;
+
+    // 첫 마디 — 첫 토큰 가운데값 셋을 박마다 굴려 재고, ms 만큼 막대 상자
+    const ttft = cut(content, 0, B[1]);
+    const max = Math.max(...OG.ttft.map(([, , ms]) => ms));
+    const rows = OG.ttft.map(([id, , ms], i) => ({
+      at: b[i] ?? i * 0.35,
+      ms,
+      id: mono(ttft.el, ctx, { x: 140, y: 110 + i * 270, size: 44, text: id, color: "dim" }),
+      value: mono(ttft.el, ctx, { x: 140, y: 170 + i * 270, size: 140, weight: 800 }),
+    }));
+    const bars = wireBox(ttft.el, { ctx, boxes: rows.map((r, i) => ({ x: 900, y: 175 + i * 270, w: (900 * r.ms) / max, h: 120, at: r.at + 0.05, label: "ttft p50", dims: true })) });
+    const sum = mono(ttft.el, ctx, { x: 900, y: 930, size: 56, text: OG.calls, weight: 700 });
+
+    // 둘째 마디 — 로고를 재는 끝 카드
+    const card = cut(content, B[1], B[2]);
+    logo(card.el, svg, 600, 150, 720, ink);
+    const site = mono(card.el, ctx, { x: 160, y: 640, size: 120, text: OG.site, align: "center", w: 1600, weight: 800 });
+    const url = mono(card.el, ctx, { x: 160, y: 820, size: 44, text: OG.url, align: "center", w: 1600, color: "dim" });
+    const cardBox = wireBox(card.el, { ctx, boxes: [{ x: 580, y: 130, w: 760, h: 450, at: B[1], label: "logo.svg", dims: true }, { x: 460, y: 615, w: 1000, h: 170, at: b[5] ?? B[1] + 0.35, label: "site" }] });
+    const aim = crosshair(card.el, { ctx, keys: [5, 6, 7].map((k, i) => ({ t: b[k] ?? B[1] + (i + 1) * 0.35, x: [960, 600, 1320][i], y: [330, 140, 520][i] })), size: 40, coords: true });
+
+    // 끝 반 마디 — 로고를 왼쪽으로 당기고 주소를 더해 박마다 다시 잰다
+    const last = cut(content, B[2], ctx.dur + 1);
+    logo(last.el, svg, 140, 300, 460, ink);
+    mono(last.el, ctx, { x: 680, y: 340, size: 128, text: OG.site, weight: 800 });
+    mono(last.el, ctx, { x: 690, y: 520, size: 46, text: OG.url, color: "dim" });
+    const again = b.filter((x) => x >= B[2] - 1e-6);
+    const lastBox = wireBox(last.el, { ctx, boxes: again.map((x, i) => ({ x: i % 2 ? 660 : 120, y: i % 2 ? 300 : 280, w: i % 2 ? 1180 : 500, h: i % 2 ? 300 : 300, at: x + 0.01, label: i % 2 ? "opengateway.ai" : "logo.svg", dims: true })) });
+    return (t: number) => {
+      frame(t);
+      if (ttft.on(t)) {
+        for (const r of rows) {
+          const on = t >= r.at;
+          r.id.style.visibility = on ? "visible" : "hidden";
+          r.value.textContent = on ? readout(t, { from: 0, to: r.ms, at: r.at, dur: 0.28, width: 5, decimals: 1, unit: "ms" }) : "";
+        }
+        bars(t);
+        sum.style.visibility = t >= (b[3] ?? 1.06) ? "visible" : "hidden";
+      }
+      if (card.on(t)) {
+        cardBox(t);
+        site.style.visibility = t >= (b[5] ?? B[1] + 0.35) ? "visible" : "hidden";
+        url.style.visibility = t >= (b[7] ?? B[1] + 1.06) ? "visible" : "hidden";
+        aim(t);
+      }
+      if (last.on(t)) lastBox(t);
+    };
+  },
+};

package/themes/debug-hud/sample/scenes/gather.ts

@@ -0,0 +1,67 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { crosshair, scanLine, wireBox, type Box } from "../../effects.ts";
+import { barsFrom0, beatsFrom0, cut, frameOf, layer, mono } from "../lib/hudkit.ts";
+import { OG } from "../lib/og.ts";
+
+// 회사 아홉이 흩어진 자리 — 상자 [x, y]
+const SPOT: [number, number][] = [
+  [140, 150], [760, 120], [1380, 190],
+  [260, 450], [880, 420], [1440, 500],
+  [120, 760], [700, 740], [1300, 800],
+];
+const WAVE = [0, 1, 2, 0, 1, 2, 0, 1, 2];
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const B = barsFrom0(ctx);
+    const b = beatsFrom0(ctx);
+    const frame = frameOf(root, ctx);
+    const content = layer(root);
+    const scan = scanLine(root, { ctx, at: 0, dur: 0.3 });
+
+    // 첫 마디 — 흩어진 회사 아홉을 박마다 셋씩 잰다
+    const spread = cut(content, 0, B[1]);
+    const at = (i: number) => b[WAVE[i]] ?? WAVE[i] * 0.35;
+    const boxes: Box[] = OG.providers.map(([name], i) => ({ x: SPOT[i][0], y: SPOT[i][1], w: 400, h: 150, at: at(i), label: name.toLowerCase(), dims: true }));
+    const measure = wireBox(spread.el, { ctx, boxes });
+    const names = OG.providers.map(([name, n], i) => [
+      mono(spread.el, ctx, { x: SPOT[i][0] + 24, y: SPOT[i][1] + 30, size: 64, text: name, weight: 800 }),
+      mono(spread.el, ctx, { x: SPOT[i][0] + 24, y: SPOT[i][1] + 104, size: 28, text: `${n} models`, color: "dim" }),
+    ]);
+    const aim = crosshair(spread.el, { ctx, keys: [0, 1, 2, 3].map((k) => ({ t: b[k] ?? k * 0.35, x: SPOT[k * 2][0] + 200, y: SPOT[k * 2][1] + 75 })), size: 34 });
+
+    // 둘째 마디 — 회사별 모델 수를 막대 상자로 잰다(박마다 셋)
+    const chart = cut(content, B[1], ctx.dur + 1);
+    const base = 900;
+    const colW = 168;
+    const bars: Box[] = OG.providers.map(([, n], i) => ({ x: 130 + i * 186, y: base - (620 * n) / 41, w: colW, h: (620 * n) / 41, at: b[4 + Math.floor(i / 3)] ?? B[1] + Math.floor(i / 3) * 0.35, dims: false }));
+    const measureBars = wireBox(chart.el, { ctx, boxes: bars });
+    const labels = OG.providers.map(([name, n], i) => [
+      mono(chart.el, ctx, { x: bars[i].x, y: base + 16, size: 26, text: name, align: "center", w: colW, color: "dim" }),
+      mono(chart.el, ctx, { x: bars[i].x, y: bars[i].y - 70, size: 56, text: String(n), align: "center", w: colW, weight: 800 }),
+    ]);
+    const aim2 = crosshair(chart.el, { ctx, keys: [0, 1, 2, 3].map((k) => ({ t: b[4 + k] ?? B[1] + k * 0.35, x: bars[[0, 3, 6, 0][k]].x + colW / 2, y: bars[[0, 3, 6, 0][k]].y })), size: 30 });
+    return (t: number) => {
+      frame(t);
+      applyStyle(content, scan(t));
+      if (spread.on(t)) {
+        measure(t);
+        names.forEach(([a, c], i) => {
+          const v = t >= at(i) + 0.12 ? "visible" : "hidden";
+          a.style.visibility = v;
+          c.style.visibility = v;
+        });
+        aim(t);
+      }
+      if (chart.on(t)) {
+        measureBars(t);
+        labels.forEach(([a, c], i) => {
+          const v = t >= bars[i].at + 0.15 ? "visible" : "hidden";
+          a.style.visibility = v;
+          c.style.visibility = v;
+        });
+        aim2(t);
+      }
+    };
+  },
+};

package/themes/debug-hud/sample/scenes/models.ts

@@ -0,0 +1,70 @@
+import { clamp, type SceneCtx } from "@kasaframe/core";
+import { crosshair, logTail, readout, scanLine, wireBox } from "../../effects.ts";
+import { barsFrom0, beatsFrom0, cut, frameOf, layer, mono } from "../lib/hudkit.ts";
+import { OG } from "../lib/og.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const B = barsFrom0(ctx);
+    const b = beatsFrom0(ctx);
+    const drop = ctx.beats.drop(0);
+    const frame = frameOf(root, ctx);
+    const content = layer(root);
+
+    // 첫 마디 — 한 주소를 재고, 엔드포인트가 박마다 로그로
+    const addr = cut(content, 0, B[1]);
+    const urlBox = wireBox(addr.el, { ctx, boxes: [{ x: 160, y: 220, w: 1600, h: 200, at: 0.02, label: "endpoint", dims: true }, { x: 160, y: 520, w: 1600, h: 380, at: b[1] ?? 0.35, label: "routes" }] });
+    const url = mono(addr.el, ctx, { x: 160, y: 280, size: 84, text: OG.url, align: "center", w: 1600, weight: 700 });
+    const eps = logTail(addr.el, { ctx, x: 220, y: 560, w: 1500, h: 320, size: 52, lines: OG.endpoints.map((e, i) => ({ t: (b[Math.min(3, i + 1)] ?? 0.35 * (i + 1)) + (i === 3 ? 0.17 : 0), text: `POST /v1${e}` })) });
+    const reveal = scanLine(addr.el, { ctx, at: 0, dur: 0.25 });
+
+    // 둘째 마디 — 같은 주소, 모델 ID 만 박마다 바뀐다. 위엔 지금 회사, 아래엔 요청 로그
+    const call = cut(content, B[1], B[2]);
+    const who = mono(call.el, ctx, { x: 120, y: 170, size: 200, weight: 800 });
+    const whoBox = wireBox(call.el, { ctx, boxes: [0, 1, 2, 3].map((k) => ({ x: 100, y: 140, w: 1720, h: 260, at: (b[4 + k] ?? B[1] + k * 0.35) + 0.01, label: "model", dims: k === 3 })) });
+    const reqs = logTail(call.el, {
+      ctx,
+      x: 140,
+      y: 470,
+      w: 1660,
+      h: 480,
+      size: 34,
+      lines: OG.ids.slice(0, 4).flatMap((id, k) => {
+        const at = b[4 + k] ?? B[1] + k * 0.35;
+        return [
+          { t: at, text: `POST /v1/chat/completions  model=${id}` },
+          { t: at + 0.12, text: "  200 OK", dim: true },
+        ];
+      }),
+      cps: 400,
+    });
+
+    // 셋째 마디 — 모델 수가 102 로 굴러 오르고, 박마다 상자를 다시 잰다
+    const many = cut(content, B[2], ctx.dur + 1);
+    const cnt = mono(many.el, ctx, { x: 160, y: 250, size: 420, align: "center", w: 1600, weight: 800 });
+    const cntBox = wireBox(many.el, { ctx, boxes: [0, 1, 2, 3].map((k) => ({ x: 560 - k * 30, y: 220 - k * 10, w: 800 + k * 60, h: 460 + k * 20, at: (b[8 + k] ?? B[2] + k * 0.35) + 0.01, label: "models", dims: true })) });
+    const ids = logTail(many.el, { ctx, x: 160, y: 760, w: 1600, h: 200, size: 32, lines: OG.ids.map((id, k) => ({ t: (b[8] ?? B[2]) + k * 0.25, text: `${id}  200` })), cps: 500 });
+    const aim = crosshair(many.el, { ctx, keys: [0, 1, 2, 3].map((k) => ({ t: b[8 + k] ?? B[2] + k * 0.35, x: [560, 1360, 960, 960][k], y: [220, 680, 450, 450][k] })), size: 30, coords: true });
+    return (t: number) => {
+      frame(t);
+      if (addr.on(t)) {
+        urlBox(t);
+        url.style.visibility = t >= 0.05 ? "visible" : "hidden";
+        eps(t);
+        reveal(t);
+      }
+      if (call.on(t)) {
+        const k = Math.max(0, b.slice(4, 8).filter((x) => x <= t).length - 1);
+        who.textContent = OG.ids[k].split("/")[0];
+        whoBox(t);
+        reqs(t);
+      }
+      if (many.on(t)) {
+        cnt.textContent = readout(t, { from: 0, to: OG.models, at: B[2], dur: clamp(drop - B[2] - 0.06, 0.1, 9), width: 3 });
+        cntBox(t);
+        ids(t);
+        aim(t);
+      }
+    };
+  },
+};

package/themes/debug-hud/sample/scenes/price.ts

@@ -0,0 +1,79 @@
+import { applyStyle, type SceneCtx } from "@kasaframe/core";
+import { crosshair, dropTrigger, plotTrace, readout, wireBox } from "../../effects.ts";
+import { barsFrom0, beatsFrom0, cut, frameOf, layer, mono } from "../lib/hudkit.ts";
+import { OG } from "../lib/og.ts";
+
+export default {
+  build(root: HTMLElement, ctx: SceneCtx) {
+    const B = barsFrom0(ctx);
+    const b = beatsFrom0(ctx);
+    const frame = frameOf(root, ctx);
+    const content = layer(root);
+
+    // 드롭 마디 — 102 를 잰다
+    const hit = cut(content, 0, B[1]);
+    const big = mono(hit.el, ctx, { x: 160, y: 170, size: 480, text: String(OG.models), align: "center", w: 1600, weight: 800 });
+    const bigBox = wireBox(hit.el, { ctx, boxes: [{ x: 620, y: 150, w: 680, h: 440, at: b[1] ?? 0.35, label: "models", dims: true }, { x: 360, y: 700, w: 1200, h: 130, at: b[2] ?? 0.7, label: "endpoint" }] });
+    const host = mono(hit.el, ctx, { x: 360, y: 730, size: 72, text: OG.host, align: "center", w: 1200, weight: 700 });
+    const aim = crosshair(hit.el, { ctx, keys: [1, 2, 3].map((k) => ({ t: b[k] ?? k * 0.35, x: [960, 960, 1310][k - 1], y: [335, 765, 120][k - 1] })), size: 36 });
+
+    // 둘째 마디 — 하루가 한 마디에 흐르는 가격선. 00–10시 창에서 값이 -90% 로 떨어진다
+    const day = cut(content, B[1], B[2]);
+    const span = (B[2] ?? ctx.dur) - B[1];
+    const hourAt = (t: number) => ((((t - B[1]) / span) * 24) % 24 + 24) % 24;
+    const night = (h: number) => h >= OG.night.from && h < OG.night.to;
+    const price = plotTrace(day.el, { ctx, x: 120, y: 170, w: 1480, h: 420, at: B[1], since: B[1], window: span / 2, series: [{ label: "PRICE", value: (t) => (night(hourAt(t)) ? 0.08 : 0.8) }] });
+    const strip = wireBox(day.el, { ctx, boxes: [{ x: 120, y: 690, w: (1680 * 10) / 24, h: 90, at: b[5] ?? B[1] + 0.35, label: `00:00-10:00 ${OG.night.tz}`, dims: true }, { x: 120 + (1680 * 10) / 24 + 8, y: 690, w: (1680 * 14) / 24 - 8, h: 90, at: b[5] ?? B[1] + 0.35, label: "10:00-24:00" }] });
+    const clock = mono(day.el, ctx, { x: 160, y: 712, size: 48, color: "dim" });
+    const off = mono(day.el, ctx, { x: 1000, y: 820, size: 180, text: OG.deepseek.off, weight: 800, align: "right", w: 820 });
+
+    // 셋째 마디 — deepseek 정가에서 밤값으로 숫자가 굴러 내려간다
+    const table = cut(content, B[2], ctx.dur + 1);
+    const ds = OG.deepseek;
+    const idLine = mono(table.el, ctx, { x: 140, y: 100, size: 60, text: ds.id, weight: 700 });
+    const rows = [ds.input, ds.output].map(([from, to], i) => {
+      const at = b[9 + i] ?? B[2] + (i + 1) * 0.35;
+      return {
+        at,
+        from: Number(from.slice(1)),
+        to: Number(to.slice(1)),
+        label: mono(table.el, ctx, { x: 140, y: 290 + i * 260, size: 64, text: i ? "출력" : "입력", color: "dim" }),
+        value: mono(table.el, ctx, { x: 400, y: 250 + i * 260, size: 170, weight: 800 }),
+        was: mono(table.el, ctx, { x: 1060, y: 300 + i * 260, size: 56, text: `정가 ${from}`, color: "dim" }),
+      };
+    });
+    const rowBox = wireBox(table.el, { ctx, boxes: rows.map((r, i) => ({ x: 380, y: 230 + i * 260, w: 640, h: 210, at: r.at, label: i ? "output /M" : "input /M", dims: true })) });
+    const pct = mono(table.el, ctx, { x: 1060, y: 460, size: 150, text: ds.off, weight: 800 });
+    const glm = mono(table.el, ctx, { x: 140, y: 920, size: 48, text: `${OG.glm.id}  ${OG.glm.off}`, color: "ink" });
+    const trig = dropTrigger(root, { ctx, drop: 0, label: String(OG.models) });
+    return (t: number) => {
+      frame(t);
+      if (hit.on(t)) {
+        big.style.visibility = t >= 0.03 ? "visible" : "hidden";
+        bigBox(t);
+        host.style.visibility = t >= (b[2] ?? 0.7) + 0.1 ? "visible" : "hidden";
+        aim(t);
+      }
+      if (day.on(t)) {
+        price(t);
+        strip(t);
+        const h = Math.floor(hourAt(t));
+        clock.textContent = t >= (b[5] ?? B[1]) ? `${String(h).padStart(2, "0")}:00 ${night(h) ? ds.input[1] : ds.input[0]}` : "";
+        clock.style.left = `${Math.min(1480, 120 + (1680 * h) / 24 + 16)}px`;
+        off.style.visibility = t >= (b[7] ?? B[1] + 1.06) ? "visible" : "hidden";
+      }
+      if (table.on(t)) {
+        idLine.style.visibility = "visible";
+        for (const r of rows) {
+          const on = t >= r.at;
+          r.label.style.visibility = r.was.style.visibility = on ? "visible" : "hidden";
+          r.value.textContent = on ? `$${readout(t, { from: r.from, to: r.to, at: r.at + 0.05, dur: 0.3, width: 4, decimals: 2 })}` : "";
+        }
+        rowBox(t);
+        pct.style.visibility = glm.style.visibility = t >= (b[11] ?? B[2] + 1.06) ? "visible" : "hidden";
+      }
+      const s = trig(t);
+      applyStyle(content, s.shake);
+    };
+  },
+};

package/themes/debug-hud/sample/style.json

@@ -0,0 +1,91 @@
+{
+  "name": "debug-hud",
+  "label": "디버그 HUD — 검정 위 형광 한 색으로 화면을 잰다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#050605",
+    "surface": "#0B0E08",
+    "raised": "#121709",
+    "line": "#2E3A12",
+    "ink": "#C8FF2E",
+    "inkSoft": "#A9D827",
+    "dim": "#7E9E22",
+    "accent": "#C8FF2E",
+    "accentSoft": "#3F5212",
+    "accentText": "#C8FF2E",
+    "onAccent": "#050605",
+    "success": "#C8FF2E",
+    "danger": "#C8FF2E",
+    "warning": "#C8FF2E"
+  },
+  "fonts": {
+    "sans": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "display": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 180,
+    "title": 72,
+    "body": 34,
+    "caption": 26,
+    "weightDisplay": 700,
+    "weightBody": 500,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 0
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.5,
+    "enter": "fade",
+    "ease": "outExpo",
+    "durations": {
+      "fast": 0.08,
+      "base": 0.18,
+      "slow": 0.4
+    }
+  },
+  "theme": {
+    "inks": [
+      "#050605 검정",
+      "#C8FF2E 형광 라임 — 글·선·점 전부 이 한 색",
+      "#7E9E22 같은 색의 어두운 단(보조 글·눈금)"
+    ],
+    "texture": "1–2px 선만. 면 채우기는 드롭 섬광 한 번뿐. 상자는 모서리 꺾쇠부터 그려진다",
+    "movement": "재빠르게 잡고 멈춘다(outExpo 0.18초). 스캔선이 지나간 자리부터 드러나고, 숫자는 고정 폭으로 굴러간다"
+  },
+  "notes": [
+    "글은 전부 모노. 한글은 모노 뒤 Pretendard 로 선다.",
+    "형광 한 색과 그 어두운 단 말고 다른 색을 쓰지 않는다.",
+    "화면의 숫자는 지어내지 않는다 — 시각·박·마디·에너지처럼 그 순간 잰 값만."
+  ]
+}

package/themes/debug-hud/slots.ts

@@ -0,0 +1,99 @@
+import { clamp, ease, type Style } from "@kasaframe/core";
+import type { ThemeSlots } from "@kasaframe/themes/slots";
+import { layer, letters, partial, shownCount, strokePath, traceCanvas } from "@kasaframe/themes/slotkit";
+import { dropTrigger } from "./effects.ts";
+
+// 장면 문법 패턴이 테마 이름 없이 부르는 자리 — 재는 순간 상자가 서고 값이 찍히는 계측 화면의 결로.
+// 움직임은 미끄러지지 않고 잡고 멈춘다(outExpo 0.18초 한 가지) — effects.ts 와 같은 손
+const SNAP = 0.18;
+const snap = (t: number, at: number, dur = SNAP): number => ease.outExpo(clamp((t - at) / dur));
+const NOISE = "0123456789ABCDEF#%";
+
+export const slots: ThemeSlots = {
+  // 서 있는 계측판 눈금 — 흐르는 눈금·지나가는 커서는 뜻이 없어 뺐다. 움직이는 것은 재는 상자·값뿐
+  surface(el) {
+    layer(
+      el,
+      "inset:0;background:var(--kf-bg);background-image:linear-gradient(var(--kf-line) 2px,transparent 2px),linear-gradient(90deg,var(--kf-line) 2px,transparent 2px);background-size:60px 60px;opacity:.7",
+    );
+    return () => {};
+  },
+
+  // 와이어 상자 — 모서리 꺾쇠가 먼저 서고 변이 가운데로 뻗는다. 크기를 재지 않게 % 로
+  panel(el, { at, tone }) {
+    const box = layer(el, `inset:0;background:${tone === "accent" ? "color-mix(in srgb, var(--kf-accent) 18%, transparent)" : "var(--kf-raised)"}`, true);
+    const corners = (["top:0;left:0;border-top", "top:0;right:0;border-top", "bottom:0;left:0;border-bottom", "bottom:0;right:0;border-bottom"] as const).map((pos, i) =>
+      layer(box, `${pos}:3px solid var(--kf-ink);border-${i % 2 ? "right" : "left"}:3px solid var(--kf-ink);width:0;height:0`),
+    );
+    const edges = layer(box, "inset:0;border:1px solid var(--kf-dim)");
+    return (t) => {
+      const p = snap(t, at, 0.3);
+      box.style.visibility = t >= at ? "visible" : "hidden";
+      box.style.opacity = String(clamp(p * 1.4));
+      corners.forEach((c) => {
+        c.style.width = `${(22 * p).toFixed(2)}%`;
+        c.style.height = `${(22 * p).toFixed(2)}%`;
+      });
+      const q = snap(t, at + 0.15, 0.3);
+      edges.style.clipPath = `inset(0 ${((1 - q) * 50).toFixed(2)}%)`;
+    };
+  },
+
+  // 잡는 순간 두 프레임 밝게 튀고 한 번에 선다 — 미끄러지는 스프링 없이
+  land(_el, { at }) {
+    return (t): Style => {
+      const local = t - at;
+      if (local < 0 || local > 0.3) return {};
+      return { brightness: local < 2 / 60 ? 1.8 : 1, scale: 1 + 0.06 * (1 - snap(t, at, 0.2)) };
+    };
+  },
+
+  // 글자 칸이 16진수로 굴다가 앞에서부터 잡힌다
+  write(el, { text, at, dur, seed }) {
+    const spans = letters(el, text);
+    const chars = Array.from(text);
+    return (t) => {
+      const fixed = shownCount(spans.length, t, at, dur);
+      const roll = Math.floor(t * 30);
+      spans.forEach((s, i) => {
+        if (i < fixed || chars[i] === " " || t >= at + dur) {
+          s.textContent = chars[i];
+          s.style.visibility = t >= at ? "visible" : "hidden";
+          return;
+        }
+        s.style.visibility = t >= at && i < fixed + 3 ? "visible" : "hidden";
+        s.textContent = /[가-힯]/.test(chars[i]) ? chars[i] : NOISE[(roll * 7 + i * 13 + seed.length) % NOISE.length];
+      });
+    };
+  },
+
+  // 계측 선 — 끝에 십자 커서가 앞서 가고, 다 그은 뒤에도 측정점 하나가 선을 따라 돈다
+  trace(el, { points, at, dur, tone }) {
+    const { g, clear } = traceCanvas(el, points);
+    const css = getComputedStyle(el);
+    const color = (tone === "accent" ? css.getPropertyValue("--kf-accent") : css.getPropertyValue("--kf-ink")).trim() || "#C8FF2E";
+    return (t) => {
+      clear();
+      const p = clamp((t - at) / Math.max(0.05, dur));
+      if (p <= 0) return;
+      g.strokeStyle = color;
+      g.lineWidth = 4;
+      g.lineJoin = "miter";
+      const drawn = partial(points, p);
+      strokePath(g, drawn);
+      const [hx, hy] = p < 1 ? drawn[drawn.length - 1] : partial(points, ((t - at - dur) * 0.4) % 1).at(-1)!;
+      g.lineWidth = 2;
+      g.strokeRect(hx - 10, hy - 10, 20, 20);
+      g.beginPath();
+      g.moveTo(hx - 22, hy);
+      g.lineTo(hx + 22, hy);
+      g.moveTo(hx, hy - 22);
+      g.lineTo(hx, hy + 22);
+      g.stroke();
+    };
+  },
+
+  drop(el, { ctx, drop }) {
+    return dropTrigger(el, { ctx, drop, label: `DROP ${drop + 1}` });
+  },
+};

package/themes/debug-hud/style.json

@@ -0,0 +1,91 @@
+{
+  "name": "debug-hud",
+  "label": "디버그 HUD — 검정 위 형광 한 색으로 화면을 잰다",
+  "scheme": "dark",
+  "colors": {
+    "bg": "#050605",
+    "surface": "#0B0E08",
+    "raised": "#121709",
+    "line": "#2E3A12",
+    "ink": "#C8FF2E",
+    "inkSoft": "#A9D827",
+    "dim": "#7E9E22",
+    "accent": "#C8FF2E",
+    "accentSoft": "#3F5212",
+    "accentText": "#C8FF2E",
+    "onAccent": "#050605",
+    "success": "#C8FF2E",
+    "danger": "#C8FF2E",
+    "warning": "#C8FF2E"
+  },
+  "fonts": {
+    "sans": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "display": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", \"Pretendard Variable\", Pretendard, \"Noto Sans KR\", \"Apple SD Gothic Neo\", monospace",
+    "faces": [
+      {
+        "family": "JetBrains Mono",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "weight": "100 800"
+      },
+      {
+        "family": "Pretendard Variable",
+        "src": "https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2",
+        "weight": "45 920"
+      }
+    ]
+  },
+  "type": {
+    "hero": 180,
+    "title": 72,
+    "body": 34,
+    "caption": 26,
+    "weightDisplay": 700,
+    "weightBody": 500,
+    "tracking": "0em"
+  },
+  "radius": {
+    "sm": 0,
+    "md": 0,
+    "lg": 0,
+    "pill": 0
+  },
+  "shadow": {
+    "soft": "none",
+    "lift": "none"
+  },
+  "motion": {
+    "beatPulse": "drops-only",
+    "shake": {
+      "on": [
+        "drop"
+      ],
+      "maxPerPhrase": 1,
+      "maxPx": 8
+    },
+    "cameraMove": "off",
+    "repeatSameMove": false,
+    "maxFreezeSec": 0.5,
+    "enter": "fade",
+    "ease": "outExpo",
+    "durations": {
+      "fast": 0.08,
+      "base": 0.18,
+      "slow": 0.4
+    }
+  },
+  "theme": {
+    "inks": [
+      "#050605 검정",
+      "#C8FF2E 형광 라임 — 글·선·점 전부 이 한 색",
+      "#7E9E22 같은 색의 어두운 단(보조 글·눈금)"
+    ],
+    "texture": "1–2px 선만. 면 채우기는 드롭 섬광 한 번뿐. 상자는 모서리 꺾쇠부터 그려진다",
+    "movement": "재빠르게 잡고 멈춘다(outExpo 0.18초). 스캔선이 지나간 자리부터 드러나고, 숫자는 고정 폭으로 굴러간다"
+  },
+  "notes": [
+    "글은 전부 모노. 한글은 모노 뒤 Pretendard 로 선다.",
+    "형광 한 색과 그 어두운 단 말고 다른 색을 쓰지 않는다.",
+    "화면의 숫자는 지어내지 않는다 — 시각·박·마디·에너지처럼 그 순간 잰 값만."
+  ]
+}