kasaframe 0.1.3 → 0.1.5

package/themes/og-measure/effects.ts

@@ -1,20 +1,29 @@
-import { applyStyle, clamp, emit, ease, progress, safeTime, type Style } from "@kasaframe/core";
+import { applyStyle, bezier, clamp, emit, ease, progress, safeTime, 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): Style {
+  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 +31,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 +67,40 @@ 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 && 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 +125,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 +144,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 +154,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 +169,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 +198,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 +214,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) : { 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 +243,130 @@ export function rawLog(
   };
 }
 
-/** 뽑힌 숫자 — 로그 줄의 숫자가 그 자리에서 떠올라 호를 그리며 점 그림 자리로 날아가 꽂힌다(박마다 큰 움직임) */
+type Pt = { x: number; y: number };
+/** 읽는 칸이 닿을 자리 — 무대 좌표 가운데(x·y)와 크기, 아니면 target 요소(효과가 돌려준 .el)를 그 자리에서 잰다 */
+export interface ReadStop {
+  at: number;
+  x?: number;
+  y?: number;
+  w?: number;
+  h?: number;
+  target?: HTMLElement | null;
+  pad?: number;
+}
+type Box = Pt & { w: number; h: number };
+
+// SlidingPillNav 처럼 offsetTop·offsetLeft 를 무대까지 더해 잰다 — 나타남의 6px 올라옴(transform)은 자리에 넣지 않는다
+function measure(target: HTMLElement, stage: HTMLElement, pad: number): Box | 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 { x: x + target.offsetWidth / 2, y: y + target.offsetHeight / 2, w: target.offsetWidth + pad * 2, h: target.offsetHeight + pad * 2 };
+}
+
+/**
+ * 뽑힌 숫자·읽는 칸 — 고름 칠(파랑 /20, 정본의 bg-primary/20) 알약에 스타일가이드의 미끄러지는 알약 테두리(SlidingPillNav, 화면 글 크기에 맞춰 파랑 /55)를 두른 한 장.
+ * from·to 를 주면 로그 줄의 숫자가 알약째 떠올라 호를 그리며 점 그림 자리로 300ms 감속으로 날아가 꽂힌다(박마다 큰 움직임).
+ * stops 를 주면 지금 재는 값 위로 옮겨 다니며 짚는다 — 메뉴의 알약처럼 값이 나타나 선 뒤(lag, 기본 220ms)에 그 값에 닿고, 그 사이엔 서지 않으며(가까우면 옆으로 휘어 길을 늘린다),
+ * 크기는 짚는 값에 맞춰 바뀐다. hold 면 마지막 값 뒤에도 서지 않고 처음 값부터 화면을 다시 짚어 훑는다(holdEvery 초마다 하나)
+ */
 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[]; hold?: boolean; holdEvery?: number; lag?: number })[];
+    dur?: number;
+    size?: number;
+    /** 읽는 칸의 최소 빠르기(px/초) */
+    minSpeed?: 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 vmin = o.minSpeed ?? 320;
+  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:${Math.max(3, Math.round(size * 0.08))}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 glide = (a: Box, b: Box, u: number, gap: number): Box => {
+    const d = Math.hypot(b.x - a.x, b.y - a.y);
+    // 넓은 알약(줄 하나를 짚는 칸)은 옆으로 휘면 긴 위아래 테두리가 제자리라 곧게 가고, 같은 칸을 다시 짚을 때만 화면 가운데 쪽으로 넘었다 돌아온다.
+    // 작은 알약은 곧게 옆으로만 가면 위아래 테두리가 제자리라 늘 조금은 휜다
+    const wide = a.w + b.w > 1.5 * (a.h + b.h);
+    const want = wide ? (d < 20 ? vmin * gap : d) : Math.max(d * 1.05, vmin * gap);
+    const h = Math.sqrt(Math.max(0, want * want - d * d) * (3 / 16));
+    const toCenter = (el.offsetHeight || 1080) / 2 < (a.y + b.y) / 2 ? -1 : 1;
+    const [nx, ny] = d > 1 && !wide ? [-(b.y - a.y) / d, (b.x - a.x) / d] : [0, toCenter];
+    const c = { x: (a.x + b.x) / 2 + nx * h * 2, y: (a.y + b.y) / 2 + ny * h * 2 };
+    // 감속 곡선에 곧은 몫을 섞어 닿기 직전에도 빠르기가 0 이 되지 않게 — 감속 곡선은 앞에 몰려 있어 곧은 몫을 더 크게
+    const e = out(u) * 0.4 + u * 0.6;
+    const v = 1 - e;
+    return { x: v * v * a.x + 2 * v * e * c.x + e * e * b.x, y: v * v * a.y + 2 * v * e * c.y + e * e * b.y, w: a.w + (b.w - a.w) * e, h: a.h + (b.h - a.h) * e };
+  };
+  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;
+        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;
+      }
+      const lag = it.lag ?? BASE;
+      // 첫 값과는 함께 나타나고, 그다음부터 값이 선 뒤에 따라간다
+      const stops = [...it.stops].sort((a, b) => a.at - b.at).map((st, i) => ({ ...st, at: i ? st.at + lag : st.at }));
+      if (it.hold && stops.length > 1) {
+        // 다시 훑기 — 처음 값으로 돌아가 차례대로. 작은 칸끼리 옆으로만 오가면 화면이 거의 안 바뀌어 큰 칸(첫 값)으로 크게 돌아간다. 같은 t 면 같은 차례
+        const every = it.holdEvery ?? clamp(stops[stops.length - 1].at - stops[stops.length - 2].at, 0.3, 0.6);
+        const n = stops.length;
+        const end = stops[n - 1].at;
+        for (let j = 1; end + j * every <= t + every; j++) {
+          stops.push({ ...stops[(j - 1) % n], at: end + j * every });
+        }
+      }
+      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 && measure(st.target, el, st.pad ?? size * 0.25)) || { x: st.x ?? 0, y: st.y ?? 0, w: st.w ?? size * 3, h: st.h ?? size * 1.6 };
+      const k = stops.findIndex((st) => st.at > t);
+      const shown = out(progress(t, stops[0].at, BASE));
+      if (k > 0) {
+        const [a, b] = [stops[k - 1], stops[k]];
+        place(s, glide(boxOf(a), boxOf(b), clamp((t - a.at) / (b.at - a.at)), b.at - a.at), shown);
+        return;
+      }
+      const last = boxOf(stops[stops.length - 1]);
+      const since = t - stops[stops.length - 1].at;
+      if (!it.hold) {
+        place(s, last, shown * (1 - out(progress(t, stops[stops.length - 1].at + BASE, FAST))));
+        return;
+      }
+      const r = 36 * clamp(since / 0.2);
+      place(s, { ...last, x: last.x + r * Math.sin(since * 5.5), y: last.y - r * (1 - Math.cos(since * 5.5)) * 0.5 }, shown);
     });
   };
 }
 
-/** 샘플 점 그림 — 모델마다 재 온 값이 들어온 시각에 점으로 꽂히고, 지금까지의 가운데값 눈금·숫자가 따라 미끄러진다 */
+/** 샘플 점 그림 — 모델마다 재 온 값이 들어온 시각에 점으로 꽂히고, 지금까지의 가운데값 눈금·숫자가 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 +386,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 +399,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), 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 +434,24 @@ 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);
+    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 +464,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 +483,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));
+    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 });
 }

package/themes/og-measure/sample/assets/brand/og-logo.svg

@@ -1,12 +1,12 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg id="_레이어_1" data-name="레이어_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1140 650">
-  <!-- Generator: Adobe Illustrator 30.6.0, SVG Export Plug-In . SVG Version: 2.1.4 Build 109)  -->
-  <g id="node-in">
-    <path d="M367,650H125c-68.9,0-125-56.1-125-125V125C0,56.1,56.1,0,125,0h242c68.9,0,125,56.1,125,125v400c0,68.9-56.1,125-125,125ZM125,72c-29.2,0-53,23.8-53,53v400c0,29.2,23.8,53,53,53h242c29.2,0,53-23.8,53-53V125c0-29.2-23.8-53-53-53H125Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
   </g>
-  <rect id="bar-in" x="72" y="272" width="277" height="106"/>
-  <g id="node-out">
-    <path d="M1015,650h-242c-68.9,0-125-56.1-125-125v-89h72v89c0,29.2,23.8,53,53,53h242c29.2,0,53-23.8,53-53V125c0-29.2-23.8-53-53-53h-242c-29.2,0-53,23.8-53,53v88h-72v-88c0-68.9,56.1-125,125-125h242c68.9,0,125,56.1,125,125v400c0,68.9-56.1,125-125,125Z"/>
-  </g>
-  <path d="M981.6,309.9l-137-105c-5.7-4.4-13.5-5.2-20-2-6.5,3.2-10.6,9.8-10.6,17v52h-394v106h394v52c0,7.2,4.1,13.8,10.6,17,2.7,1.3,5.5,2,8.4,2,4.1,0,8.2-1.3,11.6-3.9l137-105c4.7-3.6,7.4-9.2,7.4-15.1s-2.8-11.5-7.4-15.1Z"/>
-</svg>
+</svg>