kasaframe 0.1.4 → 0.1.6

package/themes/og-measure/effects.ts

@@ -1,20 +1,31 @@
-import { applyStyle, clamp, emit, ease, progress, safeTime, type Style } from "@kasaframe/core";
+import { applyStyle, bezier, clamp, cue, emit, ease, progress, safeTime, type SfxRole, type Style } from "@kasaframe/core";
 import { typeText } from "@kasaframe/motion";
 
 // 비유: 계측기 화면. 실제 호출이 한 줄 나가고, 원자료 로그가 흐르고, 거기서 숫자가 뽑혀 점·막대·큰 숫자로 쌓인다.
 // 화면의 숫자는 늘 재 온 값(measure.json 같은 원자료)에서 온다 — 효과는 숫자를 지어내지 않고, 들어온 시각에 보여 줄 뿐이다.
-// 화면은 0.1초도 쉬지 않는다 — 카메라는 늘 조금씩 다가가며 흐르고, 박마다 글자·줄·점·막대 중 하나가 크게 움직인다.
+// 겉모습은 OpenGateway 스타일가이드(design.md·globals.css)를 따른다: 상자에 가두지 않고, 칩은 속을 칠하지 않으며,
+// 모서리는 역할(알약·면 12px·각짐)이고, 움직임은 150/220/300ms 감속·스프링과 6px 나타남뿐이다(커졌다 줄기·흔들기 없음).
 
 const MONO = "var(--kf-font-mono)";
-const BAR = "rgba(100, 116, 139, 0.28)";
-const snappy = ease.snappy;
+const BAR = "var(--kf-bar)";
+// globals.css --motion-fast/base/slow·--motion-rise·--ease-out·--ease-spring
+const FAST = 0.15;
+const BASE = 0.22;
+const SLOW = 0.3;
+const RISE = 6;
+const out = ease.snappy;
+const springy = bezier(0.34, 1.3, 0.64, 1);
 
-// OG 움직임 결: 220ms 감속 + 진입 거리
-function rise(t: number, at: number, dur = 0.22, px = 14): Style {
-  const p = snappy(progress(t, at, dur));
+// 서는 순간 소리 하나 — 같은 시각에 함께 서는 칸들은 한 번만(자리가 같으면 한 줄). 칸마다 나는 나타남·째깍·타자는 잔소리, 끝 도장만 기본으로
+function rise(t: number, at: number, dur = BASE, px = RISE, role: SfxRole = "appear"): Style {
+  cue(role, t - at, { source: `rise:${role}@${at.toFixed(3)}`, minor: role !== "end" });
+  const p = out(progress(t, at, dur));
   return { opacity: p, y: px * (1 - p) };
 }
 
+// 마스터 로고 원문은 루트 <svg> 에 width·height(1140×650)가 박혀 있다 — 루트에서만 걷고 상자를 채우게(안쪽 rect 의 width 는 그대로)
+const fitSvg = (svg: string) => svg.replace(/<svg\b[^>]*>/, (tag) => tag.replace(/\s(width|height)="[^"]*"/g, "").replace("<svg", '<svg width="100%" height="100%"'));
+
 function box(doc: Document, css: string, text = ""): HTMLElement {
   const d = doc.createElement("div");
   d.style.cssText = css;
@@ -22,27 +33,33 @@ function box(doc: Document, css: string, text = ""): HTMLElement {
   return d;
 }
 
+// 배지 — 흐린 테두리와 글자색만(badge.tsx). 화면 글이 UI 의 서너 배라 선도 그만큼 굵게
+type Tone = "accent" | "plain" | "soft" | "success";
+const edge = (size: number) => Math.max(2, Math.round(size * 0.05));
+function badgeCss(tone: Tone, size: number): string {
+  const line = tone === "accent" ? "color-mix(in srgb, var(--kf-accent) 45%, transparent)" : tone === "success" ? "color-mix(in srgb, var(--kf-success) 45%, transparent)" : "var(--kf-line)";
+  const ink = tone === "accent" ? "var(--kf-accent-text)" : tone === "success" ? "var(--kf-success)" : tone === "soft" ? "var(--kf-dim)" : "var(--kf-ink)";
+  return `border:${edge(size)}px solid ${line};border-radius:var(--kf-radius-pill);background:transparent;color:${ink}`;
+}
+
 /**
- * 측정 바탕 — 흰 모눈이 천천히 흐르고 옅은 파란 주사선이 반 주기 간격으로 둘 지나간다. 주사선은 카드 위로도 지나간다 —
- * 카메라가 서 있는 사이 화면을 꽉 채운 카드 밑에 숨으면 박 사이가 멈춘 프레임이 된다. 구도는 안 바꾼다
+ * 측정 바탕 — 바탕색 위에 구분선 색의 옅은 모눈이 천천히 흐른다. 그라데이션·빛 번짐 없이 모눈 하나뿐이고 구도는 안 바꾼다.
+ * 박 사이를 메우는 몫은 바탕이 아니라 내용(카운터·로그·막대·읽는 칸)이 진다
  */
-export function graphPaper(el: HTMLElement, o: { cell?: number; period?: number; phase?: number } = {}): (t: number) => void {
+export function graphPaper(el: HTMLElement, o: { cell?: number; phase?: number } = {}): (t: number) => void {
   const doc = el.ownerDocument;
   const cell = o.cell ?? 56;
+  const grid = "color-mix(in srgb, var(--kf-line) 45%, transparent)";
   const bg = box(
     doc,
     `position:absolute;inset:0;background:var(--kf-bg);overflow:hidden;` +
-      `background-image:linear-gradient(rgba(203,213,225,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(203,213,225,.55) 1px,transparent 1px);` +
+      `background-image:linear-gradient(${grid} 1px,transparent 1px),linear-gradient(90deg,${grid} 1px,transparent 1px);` +
       `background-size:${cell}px ${cell}px`,
   );
-  const scans = [0, 0.5].map((k) => ({ k, el: box(doc, "position:absolute;top:0;bottom:0;width:120px;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,111,214,.07),transparent)") }));
-  for (const s of scans) bg.append(s.el);
   el.append(bg);
-  const period = o.period ?? 4;
   return (t: number) => {
     const u = safeTime(t) + (o.phase ?? 0);
     bg.style.backgroundPosition = `${(u * 18) % cell}px ${(u * 9) % cell}px`;
-    for (const s of scans) s.el.style.transform = `translateX(${((((u / period + s.k) % 1) + 1) % 1) * ((el.clientWidth || 1920) + 240) - 120}px)`;
   };
 }
 
@@ -52,47 +69,41 @@ export interface CamShot {
   x?: number;
   y?: number;
   zoom?: number;
-  /** 샷이 바뀌는 순간 배율을 이만큼 더했다 걷는다(툭) */
+  /** 샷이 서는 순간 이만큼 가까이에서 시작해 300ms 감속으로 물러나 앉는다 */
   kick?: number;
 }
 
 /**
- * 계측 카메라 — 샷이 바뀌면 220ms 감속으로 옮기며 툭(kick) 치고, 샷 사이에는 선다. 샷은 드러냄·결과처럼 이유가 있을 때만 —
- * 쉬지 않는 몫은 카운터·로그 한 줄·막대가 진다(늘 흐르는 카메라는 kf check camera.wander). drift·pan 을 주면 샷 사이에도 흐르지만 이벤트가 안 남는다.
+ * 계측 카메라 — 샷이 바뀌면 300ms(자리 옮김) 스프링으로 옮기고 샷 사이에는 선다. 스프링이 살짝 넘었다 돌아오는 것이 「툭」이다.
+ * 샷은 드러냄·결과처럼 이유가 있을 때만 — 쉬지 않는 몫은 카운터·로그 한 줄·막대가 진다(늘 흐르는 카메라는 kf check camera.wander).
  * 긴 로그 줄이 반쯤 잘리지 않게 크게 들어가지 않는다(배율 1–1.1). 무대 상자(transform-origin 0 0)에 붙인다.
  */
-export function trackCam(t: number, o: { shots: CamShot[]; drift?: number; pan?: number; w?: number; h?: number; scene?: string }): Style {
+export function trackCam(t: number, o: { shots: CamShot[]; w?: number; h?: number; scene?: string }): Style {
   t = safeTime(t);
   const W = o.w ?? 1920;
   const H = o.h ?? 1080;
-  const drift = o.drift ?? 0;
-  const pan = o.pan ?? 0;
   const shots = o.shots.length ? o.shots : [{ at: 0 }];
-  const frame = (i: number, u: number) => {
-    const s = shots[i];
-    const e = Math.max(0, u - s.at);
-    const dir = i % 2 ? -1 : 1;
-    return { x: (s.x ?? W / 2) + dir * pan * e, y: (s.y ?? H / 2) + pan * 0.4 * e, z: (s.zoom ?? 1) * (1 + drift * e) };
-  };
+  const frame = (i: number) => ({ x: shots[i].x ?? W / 2, y: shots[i].y ?? H / 2, z: shots[i].zoom ?? 1 });
   let i = 0;
   for (let k = 0; k < shots.length; k++) if (shots[k].at <= t) i = k;
-  let f = frame(i, t);
+  let f = frame(i);
   const since = t - shots[i].at;
-  if (i > 0 && since < 0.22) {
-    const p = snappy(since / 0.22);
-    const a = frame(i - 1, shots[i].at);
+  if (i > 0) cue("whoosh", since, { source: `trackCam@${shots[i].at.toFixed(3)}`, scene: o.scene });
+  if (i > 0 && since < SLOW) {
+    const p = springy(since / SLOW);
+    const a = frame(i - 1);
     f = { x: a.x + (f.x - a.x) * p, y: a.y + (f.y - a.y) * p, z: a.z + (f.z - a.z) * p };
-    emit({ kind: "camera", source: "trackCam", scene: o.scene, value: Math.round((1 - p) * 1000) });
+    emit({ kind: "camera", source: "trackCam", scene: o.scene, value: Math.round((1 - clamp(since / SLOW)) * 1000) });
   }
-  const kick = since >= 0 ? (shots[i].kick ?? 0) * Math.exp(-since / 0.12) : 0;
-  if (since >= 0.22 && kick > 0.0005) emit({ kind: "camera", source: "trackCam", scene: o.scene, value: Math.round(kick * 1000) });
+  const kick = since >= 0 && since < SLOW ? (shots[i].kick ?? 0) * (1 - out(since / SLOW)) : 0;
+  if (kick > 0.0005) emit({ kind: "camera", source: "trackCam", scene: o.scene, value: Math.round(kick * 1000) });
   const z = f.z * (1 + kick);
   return { x: W / 2 - z * f.x, y: H / 2 - z * f.y, scale: z };
 }
 
 /**
- * 실제 호출 한 줄 — 주소가 박마다 한 조각씩 붙고, 모델·보낼 글이 찍히고, sendAt 부터 경과 시간이 실제 속도로 굴러
- * 잰 값(ms)에 멈추며 상태·첫 토큰·받은 글이 붙는다. 카운터는 지어낸 값이 아니라 원자료의 ms 까지만 센다.
+ * 실제 호출 한 줄 — 응답 패널(틀이 곧 뜻인 면, 12px). 주소가 박마다 한 조각씩 붙고, 모델·보낼 글이 찍히고, sendAt 부터 경과 시간이
+ * 실제 속도로 굴러 잰 값(ms)에 멈추며 상태·첫 토큰·받은 글이 붙는다. 카운터는 지어낸 값이 아니라 원자료의 ms 까지만 센다.
  */
 export function callLine(
   el: HTMLElement,
@@ -117,13 +128,13 @@ export function callLine(
     method?: string;
     size?: number;
   },
-): (t: number) => void {
+): ((t: number) => void) & { parts: HTMLElement[]; timer: HTMLElement } {
   const doc = el.ownerDocument;
   const size = o.size ?? 56;
-  const card = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;box-sizing:border-box;padding:${size * 0.7}px ${size * 0.85}px;border-radius:12px;background:var(--kf-surface);font-family:${MONO};font-size:${size}px;line-height:1.45;color:var(--kf-ink);font-variant-numeric:tabular-nums`);
+  const card = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;box-sizing:border-box;padding:${size * 0.7}px ${size * 0.85}px;border-radius:var(--kf-radius-md);background:var(--kf-surface);font-family:${MONO};font-size:${size}px;line-height:1.45;color:var(--kf-ink);font-variant-numeric:tabular-nums`);
   const row = (css = "") => box(doc, `display:flex;align-items:center;gap:${size * 0.35}px;white-space:nowrap;${css}`);
   const r1 = row();
-  const chip = box(doc, `padding:0 ${size * 0.3}px;border-radius:999px;background:var(--kf-accent);color:var(--kf-on-accent);font-size:${size * 0.8}px;font-weight:700`, o.method ?? "POST");
+  const chip = box(doc, `padding:0 ${size * 0.3}px;font-size:${size * 0.8}px;font-weight:600;line-height:1.3;${badgeCss("accent", size * 0.8)}`, o.method ?? "POST");
   const urlBox = box(doc, "display:flex");
   const parts = o.url.map((u) => {
     const s = doc.createElement("span");
@@ -136,9 +147,9 @@ export function callLine(
   const r2 = row("color:var(--kf-dim)");
   const r3 = row("color:var(--kf-dim)");
   const r4 = row(`margin-top:${size * 0.4}px`);
-  const timer = box(doc, `font-family:var(--kf-font-display);font-weight:800;font-size:${size * 1.9}px;letter-spacing:-0.03em;line-height:1;transform-origin:0 50%`);
-  const ok = box(doc, `padding:0 ${size * 0.3}px;border-radius:999px;background:var(--kf-success);color:var(--kf-ink);font-size:${size * 0.8}px;font-weight:700`, String(o.status ?? ""));
-  const what = box(doc, "color:var(--kf-accent-text);font-weight:700", "첫 토큰");
+  const timer = box(doc, `font-family:var(--kf-font-display);font-weight:800;font-size:${size * 1.9}px;letter-spacing:-0.055em;line-height:1`);
+  const ok = box(doc, `padding:0 ${size * 0.3}px;font-size:${size * 0.8}px;font-weight:600;line-height:1.3;${badgeCss("success", size * 0.8)}`, String(o.status ?? ""));
+  const what = box(doc, "color:var(--kf-accent-text);font-weight:600", "첫 토큰");
   const ans = box(doc, "color:var(--kf-ink)");
   r4.append(timer, ok, what, ans);
   const r5 = row(`color:var(--kf-dim);font-size:${size * 0.7}px`);
@@ -146,12 +157,12 @@ export function callLine(
   el.append(card);
   const ms = o.ms ?? 0;
   const doneAt = o.sendAt === undefined ? Infinity : o.sendAt + ms / 1000;
-  return (t: number) => {
-    applyStyle(card, rise(t, o.at, 0.22, 40));
+  const paint = (t: number) => {
+    applyStyle(card, rise(t, o.at));
     parts.forEach((s, i) => {
       const at = o.urlAt[i] ?? o.at;
       s.style.visibility = t >= at ? "visible" : "hidden";
-      applyStyle(s, t >= at ? { ...rise(t, at, 0.18, 0), scale: 1 + 0.25 * (1 - snappy(progress(t, at, 0.18))) } : {});
+      applyStyle(s, t >= at ? rise(t, at) : {});
     });
     r2.textContent = o.model ? typeText(`model: ${o.model}`, t, { at: o.modelAt ?? o.at, cps: 90, jitter: 0, ime: false }).text : "";
     r2.style.display = o.model ? "" : "none";
@@ -161,21 +172,24 @@ export function callLine(
     r4.style.display = o.sendAt === undefined ? "none" : "";
     r4.style.visibility = o.sendAt !== undefined && t >= o.sendAt ? "visible" : "hidden";
     timer.textContent = o.sendAt === undefined ? "" : `${Math.min(ms, Math.max(0, Math.floor((t - o.sendAt) * 1000)))}ms`;
-    timer.style.color = done ? "var(--kf-accent-text)" : "var(--kf-ink)";
+    // 색만 150ms 로 바뀐다 — 크기는 그대로(누름·도착에 커졌다 줄기 없음)
+    const c = done ? Math.round(out(progress(t, doneAt, FAST)) * 100) : 0;
+    timer.style.color = `color-mix(in srgb, var(--kf-accent-text) ${c}%, var(--kf-ink))`;
     for (const e of [ok, what, ans]) {
       e.style.display = done ? "" : "none";
       applyStyle(e, rise(t, doneAt));
     }
-    applyStyle(timer, done ? { scale: 1 + 0.12 * Math.exp(-(t - doneAt) / 0.1) } : {});
     ans.textContent = done ? typeText(o.answer ?? "", t, { at: doneAt + 0.08, cps: 22, jitter: 0, ime: false }).text : "";
     r5.textContent = o.usage && o.usageAt !== undefined && t >= o.usageAt ? o.usage : "";
     r5.style.display = o.usage ? "" : "none";
     applyStyle(r5, o.usageAt !== undefined ? rise(t, o.usageAt) : {});
   };
+  return Object.assign(paint, { parts, timer });
 }
 
 /**
- * 원자료 로그 — 줄이 들어온 시각에 맨 아래 붙고 한 줄씩 위로 밀려 오른다. pick 정규식이 잡은 숫자는 그 시각부터 파란 칸.
+ * 원자료 로그 — 코드 블록(틀이 곧 뜻인 면, 12px). 줄이 들어온 시각에 맨 아래 붙고 한 줄씩 위로 밀려 오른다.
+ * pick 정규식이 잡은 숫자는 그 시각부터 고름 칠(파랑 /10 알약)과 파란 글자.
  * 줄 자리는 size·lineHeight·pad 로 정해지니 pickFly 출발점을 장면이 같은 값으로 셀 수 있다(새 줄 = 맨 아래 칸).
  */
 export function rawLog(
@@ -187,7 +201,7 @@ export function rawLog(
   const lh = o.lineHeight ?? Math.round(size * 1.5);
   const rows = o.rows ?? 9;
   const pad = o.pad ?? 28;
-  const panel = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;box-sizing:border-box;padding:${pad}px;border-radius:12px;background:var(--kf-surface);font-family:${MONO};font-size:${size}px;line-height:${lh}px;color:var(--kf-ink-soft);font-variant-numeric:tabular-nums`);
+  const panel = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;width:${o.w}px;box-sizing:border-box;padding:${pad}px;border-radius:var(--kf-radius-md);background:var(--kf-surface);font-family:${MONO};font-size:${size}px;line-height:${lh}px;color:var(--kf-ink-soft);font-variant-numeric:tabular-nums`);
   // 밀려 오르는 줄이 안쪽 여백에 반쯤 걸쳐 보이지 않게 줄 칸만큼만 보이는 창을 따로 둔다
   const view = box(doc, `position:relative;height:${rows * lh}px;overflow:hidden`);
   const strip = box(doc, "position:relative");
@@ -203,28 +217,28 @@ export function rawLog(
       const start = m.index + m[0].indexOf(g);
       num = doc.createElement("span");
       num.textContent = g;
-      num.style.cssText = "border-radius:6px;padding:0 4px;margin:0 -4px";
+      num.style.cssText = "border-radius:var(--kf-radius-pill);padding:0 0.3em;margin:0 -0.3em";
       row.append(doc.createTextNode(line.slice(0, start)), num, doc.createTextNode(line.slice(start + g.length)));
     } else row.textContent = line;
     strip.append(row);
     return { row, num };
   });
   return (t: number) => {
-    applyStyle(panel, rise(t, o.at ?? 0, 0.22, 40));
+    applyStyle(panel, rise(t, o.at ?? 0));
     let shown = 0;
     let slide = 1;
     o.times.forEach((at, i) => {
       if (t >= at) {
         shown = i + 1;
-        slide = snappy(progress(t, at, 0.2));
+        slide = out(progress(t, at, BASE));
       }
-      applyStyle(items[i].row, t >= at ? rise(t, at, 0.2, 0) : { opacity: 0 });
+      applyStyle(items[i].row, t >= at ? rise(t, at, BASE, 0, "type") : { opacity: 0 });
       const n = items[i].num;
       if (n) {
         const on = t >= at;
-        n.style.background = on ? "rgba(0,111,214,.16)" : "transparent";
+        n.style.background = on ? "var(--kf-tint)" : "transparent";
         n.style.color = on ? "var(--kf-accent-text)" : "";
-        n.style.fontWeight = on ? "700" : "";
+        n.style.fontWeight = on ? "600" : "";
       }
     });
     const over = Math.max(0, shown - rows);
@@ -232,37 +246,143 @@ export function rawLog(
   };
 }
 
-/** 뽑힌 숫자 — 로그 줄의 숫자가 그 자리에서 떠올라 호를 그리며 점 그림 자리로 날아가 꽂힌다(박마다 큰 움직임) */
+type Pt = { x: number; y: number };
+/**
+ * 읽는 칸이 닿을 자리 — 무대 좌표 가운데(x·y)와 크기, 아니면 target 요소(효과가 돌려준 .el)를 그 자리에서 잰다. 요소 여럿이면 그 전부를 덮는 한 칸.
+ * pad 는 글 둘레 여백(배지는 0 — 배지 테두리에 딱 맞는다)
+ */
+export interface ReadStop {
+  at: number;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+  target?: HTMLElement | null | (HTMLElement | null)[];
+  pad?: number;
+}
+type Box = Pt & { w: number; h: number };
+
+// SlidingPillNav 처럼 offsetTop·offsetLeft 를 무대까지 더해 잰다 — 나타남의 6px 올라옴(transform)은 자리에 넣지 않는다
+function measure(target: HTMLElement, stage: HTMLElement): { l: number; t: number; r: number; b: number } | null {
+  let x = 0;
+  let y = 0;
+  let n: HTMLElement | null = target;
+  for (; n && n !== stage; n = n.offsetParent as HTMLElement | null) {
+    x += n.offsetLeft;
+    y += n.offsetTop;
+  }
+  if (n !== stage || !target.offsetWidth) return null;
+  return { l: x, t: y, r: x + target.offsetWidth, b: y + target.offsetHeight };
+}
+
+function measureAll(targets: (HTMLElement | null)[], stage: HTMLElement, pad: number): Box | null {
+  const rs = targets.map((el) => el && measure(el, stage)).filter((r) => r !== null);
+  if (!rs.length) return null;
+  const l = Math.min(...rs.map((r) => r.l)) - pad;
+  const t = Math.min(...rs.map((r) => r.t)) - pad;
+  const r = Math.max(...rs.map((q) => q.r)) + pad;
+  const b = Math.max(...rs.map((q) => q.b)) + pad;
+  return { x: (l + r) / 2, y: (t + b) / 2, w: r - l, h: b - t };
+}
+
+// 짚은 값 위에 서 있는 최소 시간 — 다음 값이 박에 바로 와도 칸이 한 번은 그 값에 딱 맞게 앉는다
+const REST = 0.03;
+const smooth = (p: number) => p * p * (3 - 2 * p);
+
+// 옮겨 가는 동안의 칸 — 떠나는 값에서 아래 테두리 한 줄로 내려앉고, 그 한 줄이 다음 값 아래로 미끄러진 뒤, 그 값의 칸만큼 다시 차오른다.
+// 칸 크기 그대로 날아가면 지나는 길의 글을 통째로 덮어 고장처럼 보였다. a 가 없으면(첫 값) 그 자리에서 차오르기만.
+// 미끄러지는 몫은 거리만큼 — 600px 넘게 가면 옮김의 40%, 같은 칸을 다시 짚으면 0(한 줄로 서 있는 동안 화면이 멈춘다)
+function between(a: Box | null, b: Box, u: number, line: number): Box {
+  const from = a ?? b;
+  const sink = (1 - 0.4 * clamp(Math.hypot(b.x - from.x, b.y + b.h / 2 - from.y - from.h / 2) / 600)) / 2;
+  const go = a ? (sink < 0.5 ? smooth(clamp((u - sink) / (1 - 2 * sink))) : u < 0.5 ? 0 : 1) : 1;
+  const full = a ? (u < 0.5 ? 1 - clamp(u / sink) : clamp((u - 1 + sink) / sink)) : clamp(u);
+  const hBase = a && u < 0.5 ? a.h : b.h;
+  const h = line + (hBase - line) * full;
+  const bottom = from.y + from.h / 2 + (b.y + b.h / 2 - from.y - from.h / 2) * go;
+  return { x: from.x + (b.x - from.x) * go, y: bottom - h / 2, w: from.w + (b.w - from.w) * go, h };
+}
+
+// 바탕보다 밝은 글은 「밝게 섞기」(어두운 바탕), 어두운 글은 「어둡게 섞기」(밝은 바탕)로 그대로 남는다 — 위에 그려도 글 뒤에 깔린 것처럼 보인다.
+// 응답 패널·로그의 면 안쪽 값도 짚어야 해서 쌓는 차례로는 글 뒤에 둘 수 없다
+function underText(el: HTMLElement): string {
+  const m = /#([0-9a-f]{6})/i.exec(getComputedStyle(el).getPropertyValue("--kf-bg"));
+  const [r, g, b] = m ? [0, 2, 4].map((i) => parseInt(m[1].slice(i, i + 2), 16)) : [0, 0, 0];
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b < 128 ? "screen" : "multiply";
+}
+
+/**
+ * 뽑힌 숫자·읽는 칸 — 고름 칠(파랑 /20, 정본의 bg-primary/20) 알약에 스타일가이드의 미끄러지는 알약 테두리(SlidingPillNav, 화면 글 크기에 맞춰 파랑 /55)를 두른 한 장.
+ * from·to 를 주면 로그 줄의 숫자가 알약째 떠올라 호를 그리며 점 그림 자리로 300ms 감속으로 날아가 꽂힌다(박마다 큰 움직임).
+ * stops 를 주면 요점(주인공 값·핵심 사실·그 순간 자막이 말하는 값)이 바뀔 때만 그 값으로 옮겨 가 짚는다 — 메뉴의 알약처럼 글 뒤에 깔리고,
+ * 옮겨 가는 동안은 아래 테두리 한 줄로 얇아져 지나가며, 닿으면 그 값의 칸만큼 차올라 다음 요점까지 딱 맞게 선다(옮김 300ms 안).
+ * 나타나는 항목을 차례로 훑는 정지점은 두지 않는다 — 화면을 살려 두는 몫은 내용이 진다
+ */
 export function pickFly(
   el: HTMLElement,
-  o: { items: { at: number; text: string; from: { x: number; y: number }; to: { x: number; y: number } }[]; dur?: number; size?: number },
+  o: {
+    items: ({ at: number; text: string; from: Pt; to: Pt } | { text?: string; stops: ReadStop[] })[];
+    dur?: number;
+    size?: number;
+  },
 ): (t: number) => void {
   const doc = el.ownerDocument;
-  const dur = o.dur ?? 0.3;
+  const dur = o.dur ?? SLOW;
   const size = o.size ?? 44;
-  const spans = o.items.map((it) => {
-    const s = box(doc, `position:absolute;left:0;top:0;font-family:${MONO};font-size:${size}px;font-weight:800;color:var(--kf-accent-text);background:rgba(0,111,214,.14);border-radius:8px;padding:0 8px;white-space:nowrap;opacity:0;z-index:7;font-variant-numeric:tabular-nums`, it.text);
+  const border = Math.max(3, Math.round(size * 0.08));
+  let blend = "";
+  const pills = o.items.map((it) => {
+    const s = box(doc, `position:absolute;left:0;top:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-family:${MONO};font-size:${size}px;font-weight:600;color:var(--kf-accent-text);background:color-mix(in srgb, var(--kf-accent) 20%, transparent);border:${border}px solid color-mix(in srgb, var(--kf-accent) 55%, transparent);border-radius:var(--kf-radius-pill);padding:0 0.3em;white-space:nowrap;opacity:0;z-index:7;pointer-events:none;font-variant-numeric:tabular-nums`, it.text ?? "");
     el.append(s);
     return s;
   });
+  const place = (s: HTMLElement, p: Box, opacity: number) => {
+    s.style.opacity = String(opacity);
+    s.style.width = `${p.w.toFixed(1)}px`;
+    s.style.height = `${p.h.toFixed(1)}px`;
+    s.style.transform = `translate(${(p.x - p.w / 2).toFixed(1)}px, ${(p.y - p.h / 2).toFixed(1)}px)`;
+  };
   return (t: number) => {
     o.items.forEach((it, i) => {
-      const s = spans[i];
-      const u = (t - it.at) / dur;
-      if (u < 0 || u > 1) {
+      const s = pills[i];
+      if (!("stops" in it)) {
+        const u = (t - it.at) / dur;
+        cue("land", t - it.at - dur, { source: `pickFly@${it.at.toFixed(3)}` });
+        if (u < 0 || u > 1) {
+          s.style.opacity = "0";
+          return;
+        }
+        const p = out(u);
+        s.style.width = s.style.height = "";
+        s.style.opacity = String(1 - clamp((u - 0.85) / 0.15));
+        s.style.transform = `translate(${it.from.x + (it.to.x - it.from.x) * p}px, ${it.from.y + (it.to.y - it.from.y) * p - Math.sin(Math.PI * p) * 180}px) translate(-50%, -50%)`;
+        return;
+      }
+      blend ||= underText(el);
+      s.style.mixBlendMode = blend;
+      const stops = [...it.stops].sort((a, b) => a.at - b.at);
+      if (!stops.length || t < stops[0].at) {
         s.style.opacity = "0";
         return;
       }
-      const p = ease.inOutCubic(u);
-      const x = it.from.x + (it.to.x - it.from.x) * p;
-      const y = it.from.y + (it.to.y - it.from.y) * p - Math.sin(Math.PI * p) * 180;
-      s.style.opacity = String(1 - clamp((u - 0.85) / 0.15));
-      s.style.transform = `translate(${x}px, ${y}px) translate(-50%, -50%) scale(${1 + 0.5 * Math.sin(Math.PI * p)})`;
+      const boxOf = (st: ReadStop): Box => (st.target && measureAll([st.target].flat(), el, st.pad ?? 0)) || { x: st.x ?? 0, y: st.y ?? 0, w: st.w ?? size * 3, h: st.h ?? size * 1.6 };
+      let k = 0;
+      while (k + 1 < stops.length && stops[k + 1].at <= t) k++;
+      // 값이 나타나는 순간 떠나 300ms 안에 닿는다 — 다음 값이 가까우면 그 앞에 앉도록 더 빨리
+      const next = stops[k + 1];
+      const move = Math.max(0.1, Math.min(SLOW, (next ? next.at - stops[k].at : Infinity) - REST));
+      const u = clamp((t - stops[k].at) / move);
+      if (k > 0) cue("select", t - stops[k].at, { source: `pickFly:read@${stops[k].at.toFixed(3)}` });
+      const line = border * 2;
+      const p = between(k ? boxOf(stops[k - 1]) : null, boxOf(stops[k]), u, line);
+      // 얇을수록 진한 파랑 — 탭 아래 줄처럼 얇아도 지나가는 게 보이게. 글 한 줄 반 높이를 넘으면 옅은 칠로(큰 숫자 아래 두꺼운 파란 띠가 되지 않게)
+      s.style.background = `color-mix(in srgb, var(--kf-accent) ${Math.round(20 + 80 * clamp(1 - (p.h - line) / (size * 1.5)))}%, transparent)`;
+      place(s, p, out(progress(t, stops[0].at, BASE)));
     });
   };
 }
 
-/** 샘플 점 그림 — 모델마다 재 온 값이 들어온 시각에 점으로 꽂히고, 지금까지의 가운데값 눈금·숫자가 따라 미끄러진다 */
+/** 샘플 점 그림 — 모델마다 재 온 값이 들어온 시각에 점으로 꽂히고, 지금까지의 가운데값 눈금·숫자가 300ms 로 따라 미끄러진다. 눈금·막대는 각짐 */
 export function samplePlot(
   el: HTMLElement,
   o: { x: number; y: number; w: number; rows: { label: string; samples: { t: number; v: number }[] }[]; min: number; max: number; unit?: string; decimals?: number; rowH?: number; at?: number; ticks?: number[]; best?: number; size?: number },
@@ -282,10 +402,10 @@ export function samplePlot(
   const rows = o.rows.map((r, i) => {
     const top = i * rowH;
     const label = box(doc, `position:absolute;left:0;top:${top}px;font-size:${size}px;color:var(--kf-ink);white-space:nowrap`, r.label);
-    const track = box(doc, `position:absolute;left:0;right:0;top:${top + trackY}px;height:10px;border-radius:5px;background:${BAR}`);
+    const track = box(doc, `position:absolute;left:0;right:0;top:${top + trackY}px;height:10px;background:${BAR}`);
     const dots = r.samples.map(() => box(doc, `position:absolute;top:${top + trackY - 19}px;width:48px;height:48px;margin-left:-24px;border-radius:50%;background:var(--kf-accent);opacity:0`));
-    const mark = box(doc, `position:absolute;top:${top + trackY - 40}px;width:8px;height:90px;margin-left:-4px;border-radius:4px;background:var(--kf-ink);opacity:0`);
-    const val = box(doc, `position:absolute;top:${top + trackY + 30}px;right:0;font-size:${size * 1.35}px;font-weight:700;color:var(--kf-ink);opacity:0;transform-origin:100% 50%`);
+    const mark = box(doc, `position:absolute;top:${top + trackY - 40}px;width:8px;height:90px;margin-left:-4px;background:var(--kf-ink);opacity:0`);
+    const val = box(doc, `position:absolute;top:${top + trackY + 30}px;right:0;font-size:${size * 1.35}px;font-weight:600;color:var(--kf-ink);opacity:0`);
     wrap.append(label, track, ...dots, mark, val);
     return { r, dots, mark, val };
   });
@@ -295,32 +415,29 @@ export function samplePlot(
     return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
   };
   return (t: number) => {
-    applyStyle(wrap, rise(t, o.at ?? 0, 0.22, 40));
+    applyStyle(wrap, rise(t, o.at ?? 0));
     rows.forEach(({ r, dots, mark, val }, i) => {
       const got = r.samples.filter((s) => t >= s.t);
       r.samples.forEach((s, k) => {
-        const p = snappy(progress(t, s.t, 0.2));
         dots[k].style.left = `${X(s.v)}px`;
-        dots[k].style.opacity = String(0.6 * p);
-        dots[k].style.transform = `scale(${t >= s.t ? 1.8 - 0.8 * p : 0})`;
+        applyStyle(dots[k], t >= s.t ? { ...rise(t, s.t, BASE, RISE, "tick"), opacity: 0.6 * out(progress(t, s.t, BASE)) } : { opacity: 0 });
       });
       if (!got.length) {
         mark.style.opacity = "0";
         val.style.opacity = "0";
         return;
       }
-      // 가운데값은 새 점이 올 때마다 그 자리로 미끄러진다 — 앞 값과 새 값을 220ms 로 잇는다
+      // 가운데값은 새 점이 올 때마다 그 자리로 미끄러진다 — 앞 값과 새 값을 300ms(자리 옮김)로 잇는다
       const last = got[got.length - 1];
       const prev = got.length > 1 ? median(got.slice(0, -1).map((s) => s.v)) : last.v;
       const now = median(got.map((s) => s.v));
-      const k = snappy(progress(t, last.t, 0.22));
+      const k = out(progress(t, last.t, SLOW));
       const m = prev + (now - prev) * k;
       mark.style.left = `${X(m)}px`;
       mark.style.opacity = "1";
       mark.style.background = o.best === i ? "var(--kf-accent)" : "var(--kf-ink)";
-      val.style.opacity = "1";
+      applyStyle(val, rise(t, got[0].t));
       val.style.color = o.best === i ? "var(--kf-accent-text)" : "var(--kf-ink)";
-      val.style.transform = `scale(${1 + 0.15 * (1 - k)})`;
       val.textContent = `${m.toFixed(o.decimals ?? 1)}${o.unit ?? ""}`;
     });
   };
@@ -333,24 +450,25 @@ export function meter(t: number, o: { to: number; at: number; dur?: number; deci
   const n = target.replace(/\D/g, "").length || 1;
   const dur = o.dur ?? 0.9;
   let k = 0;
-  let out = "";
+  let s = "";
   for (const ch of target) {
     if (!/\d/.test(ch)) {
-      out += ch;
+      s += ch;
       continue;
     }
     const settle = o.at + (dur * (k + 1)) / n;
-    out += t >= settle ? ch : String(Math.floor((t * 26 + k * 3.7) % 10 + 10) % 10);
+    cue("tick", t - settle, { source: `meter@${settle.toFixed(3)}`, minor: true });
+    s += t >= settle ? ch : String(Math.floor((t * 26 + k * 3.7) % 10 + 10) % 10);
     k++;
   }
-  return `${out}${o.unit ?? ""}`;
+  return `${s}${o.unit ?? ""}`;
 }
 
-/** 막대 — 굵은 막대가 박마다 하나씩 값만큼 자란다. best 하나만 OG 파랑, 나머지는 회색. 값은 막대 끝, delta 를 주면 그 박에 차이 칩 */
+/** 막대 — 각진 막대가 박마다 하나씩 값만큼 300ms 로 자란다. best 만 브랜드 파랑(차트 칠), 나머지는 회색. 값은 막대 끝, delta 를 주면 그 박에 테두리 배지 */
 export function rankBars(
   el: HTMLElement,
   o: { x: number; y: number; w: number; items: { label: string; value: number; at: number; delta?: string; deltaAt?: number }[]; max: number; best?: number | number[]; prefix?: string; unit?: string; decimals?: number; barH?: number; gap?: number; size?: number },
-): (t: number) => void {
+): ((t: number) => void) & { vals: HTMLElement[]; deltas: (HTMLElement | null)[] } {
   const doc = el.ownerDocument;
   const barH = o.barH ?? 76;
   const size = o.size ?? 38;
@@ -363,16 +481,16 @@ export function rankBars(
     const top = i * step;
     const label = box(doc, `position:absolute;left:0;top:${top}px;font-size:${size}px;color:var(--kf-ink-soft);white-space:nowrap`, it.label);
     const bar = box(doc, `position:absolute;left:0;top:${top + size * 1.4}px;height:${barH}px;background:${bests.includes(i) ? "var(--kf-accent)" : BAR};transform-origin:0 50%`);
-    const val = box(doc, `position:absolute;top:${top + size * 1.4}px;line-height:${barH}px;font-size:${size * 1.2}px;font-weight:700;white-space:nowrap;color:${bests.includes(i) ? "var(--kf-accent-text)" : "var(--kf-ink)"}`);
+    const val = box(doc, `position:absolute;top:${top + size * 1.4}px;line-height:${barH}px;font-size:${size * 1.2}px;font-weight:600;white-space:nowrap;color:${bests.includes(i) ? "var(--kf-accent-text)" : "var(--kf-ink)"}`);
     const delta = it.delta
-      ? box(doc, `position:absolute;top:${top + size * 1.4 + barH / 2}px;padding:4px 16px;border-radius:999px;background:var(--kf-raised);color:var(--kf-ink);font-size:${size}px;font-weight:700;white-space:nowrap;transform-origin:0 50%`, it.delta)
+      ? box(doc, `position:absolute;top:${top + size * 1.4 + barH / 2}px;padding:2px 16px;font-size:${size}px;font-weight:600;white-space:nowrap;${badgeCss("plain", size)}`, it.delta)
       : null;
     wrap.append(label, bar, val, ...(delta ? [delta] : []));
     return { it, label, bar, val, delta };
   });
-  return (t: number) => {
+  const paint = (t: number) => {
     rows.forEach(({ it, label, bar, val, delta }) => {
-      const p = snappy(progress(t, it.at, 0.3));
+      const p = out(progress(t, it.at, SLOW));
       const w = (it.value / o.max) * (o.w - 440);
       applyStyle(label, rise(t, it.at));
       bar.style.width = `${w}px`;
@@ -382,51 +500,54 @@ export function rankBars(
       val.textContent = `${o.prefix ?? ""}${it.value.toFixed(o.decimals ?? 1)}${o.unit ?? ""}`;
       if (delta) {
         const at = it.deltaAt ?? it.at + 0.35;
-        const d = snappy(progress(t, at, 0.22));
         delta.style.left = `${w + 24 + size * 6}px`;
-        delta.style.opacity = String(d);
-        delta.style.transform = `translateY(-50%) scale(${t >= at ? 1.3 - 0.3 * d : 0})`;
+        applyStyle(delta, t >= at ? rise(t, at) : { opacity: 0 });
+        delta.style.translate = "0 -50%";
       }
     });
   };
+  return Object.assign(paint, { vals: rows.map((r) => r.val), deltas: rows.map((r) => r.delta) });
 }
 
-/** 끝 도장 — 「측정 날짜 · 호출 N번 · $비용 · 키 하나」 한 줄과 OG 로고가 쾅 찍힌다. 비용은 반올림해 0 으로 만들지 않고 첫 유효 자리까지 */
-export function stamp(el: HTMLElement, o: { x: number; y: number; at: number; date: string; calls: number; cost: number; logo?: string; size?: number }): (t: number) => void {
+/**
+ * 끝 도장 — 구분선 한 줄 위에 OG 로고와 「측정 날짜 · 호출 N번 · $비용 · 키 하나」가 선다(상자 없이). 비용은 반올림해 0 으로 만들지 않고 첫 유효 자리까지.
+ * logo 는 마스터 로고 SVG 원문(currentColor) — 한 색으로 칠한다. 어두운 바탕 흰색·밝은 바탕 검정(logoInk)
+ */
+export function stamp(el: HTMLElement, o: { x: number; y: number; at: number; date: string; calls: number; cost: number; logo?: string; logoInk?: string; size?: number }): (t: number) => void {
   const doc = el.ownerDocument;
   const size = o.size ?? 36;
-  const card = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;display:flex;align-items:center;gap:${size}px;padding:${size * 0.6}px ${size}px;border-radius:12px;background:var(--kf-raised);font-family:${MONO};font-size:${size}px;color:var(--kf-ink);white-space:nowrap;font-variant-numeric:tabular-nums`);
+  const row = box(doc, `position:absolute;left:${o.x}px;top:${o.y}px;display:flex;align-items:center;gap:${size}px;padding-top:${size * 0.6}px;border-top:${edge(size)}px solid var(--kf-line);font-family:${MONO};font-size:${size}px;color:var(--kf-ink);white-space:nowrap;font-variant-numeric:tabular-nums`);
   if (o.logo) {
-    const img = doc.createElement("img");
-    img.src = o.logo;
-    img.style.cssText = `height:${size * 1.25}px;width:auto;display:block`;
-    card.append(img);
+    const mark = box(doc, `height:${size * 1.25}px;width:${(size * 1.25 * 1140) / 650}px;color:${o.logoInk ?? "var(--kf-ink)"};display:flex`);
+    mark.innerHTML = fitSvg(o.logo);
+    row.append(mark);
   }
   const digits = o.cost > 0 ? Math.max(2, -Math.floor(Math.log10(o.cost))) : 2;
-  card.append(box(doc, "", `측정 ${o.date} · 호출 ${o.calls}번 · $${o.cost.toFixed(digits)} · 키 하나`));
-  el.append(card);
+  row.append(box(doc, "", `측정 ${o.date} · 호출 ${o.calls}번 · $${o.cost.toFixed(digits)} · 키 하나`));
+  el.append(row);
   return (t: number) => {
-    const p = snappy(progress(t, o.at, 0.22));
-    card.style.opacity = String(p);
-    card.style.transform = `translateX(-50%) translateY(${20 * (1 - p)}px) scale(${1.25 - 0.25 * p})`;
+    applyStyle(row, rise(t, o.at, BASE, RISE, "end"));
+    row.style.translate = "-50% 0";
   };
 }
 
-/** 칩 — 짧은 낱말·모델 ID·잰 값 하나(「실측」·「openai/ 41」). 220ms 로 크게 들어오고 until 에 오그라들며 빠진다 */
-export function flag(el: HTMLElement, o: { x: number; y: number; text: string; at: number; until?: number; tone?: "accent" | "soft" | "plain"; size?: number; mono?: boolean }): (t: number) => void {
+/**
+ * 배지 — 짧은 낱말·모델 ID·잰 값 하나(「실측」·「openai/ 41」). 속을 칠하지 않고 흐린 테두리와 글자색만(badge.tsx 의 default·outline·secondary).
+ * 6px 올라오며 220ms 로 나타나고 until 에 150ms 로 빠진다
+ */
+export function flag(el: HTMLElement, o: { x: number; y: number; text: string; at: number; until?: number; tone?: "accent" | "soft" | "plain"; size?: number; mono?: boolean }): ((t: number) => void) & { el: HTMLElement } {
   const doc = el.ownerDocument;
-  const soft = o.tone === "soft";
+  const size = o.size ?? 38;
   const chip = box(
     doc,
-    `position:absolute;left:${o.x}px;top:${o.y}px;padding:6px 20px;border-radius:999px;font-family:${o.mono ? MONO : "var(--kf-font-sans)"};font-size:${o.size ?? 38}px;font-weight:700;white-space:nowrap;transform-origin:0 50%;font-variant-numeric:tabular-nums;` +
-      (o.tone === "plain" ? "background:var(--kf-surface);color:var(--kf-ink)" : soft ? "background:var(--kf-tint);color:var(--kf-accent-text)" : "background:var(--kf-accent);color:var(--kf-on-accent)"),
+    `position:absolute;left:${o.x}px;top:${o.y}px;padding:4px 0.5em;font-family:${o.mono ? MONO : "var(--kf-font-sans)"};font-size:${size}px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums;${badgeCss(o.tone ?? "accent", size)}`,
     o.text,
   );
   el.append(chip);
-  return (t: number) => {
-    const p = snappy(progress(t, o.at, 0.22));
-    const gone = o.until === undefined ? 0 : snappy(progress(t, o.until, 0.12));
-    chip.style.opacity = String(p * (1 - gone));
-    chip.style.transform = `scale(${t >= o.at ? (1.4 - 0.4 * p) * (1 - 0.6 * gone) : 0.6})`;
+  const paint = (t: number) => {
+    const gone = o.until === undefined ? 0 : out(progress(t, o.until, FAST));
+    const s = rise(t, o.at);
+    applyStyle(chip, t >= o.at ? { ...s, opacity: (s.opacity ?? 1) * (1 - gone) } : { opacity: 0 });
   };
+  return Object.assign(paint, { el: chip });
 }