kasaframe 0.0.0-stage → 0.1.3

package/packages/patterns/src/end/slam.ts

@@ -0,0 +1,91 @@
+import { applyStyle, clamp, combine, spring } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { area, beatStops, cameraOk, fitOnce, glider, moving, node, sceneDrop, slam, slotsOf } from "../kit.ts";
+import type { EndContent } from "./lockup.ts";
+import type { Pattern } from "../types.ts";
+
+/**
+ * 끝 카드를 쾅 — 이름이 외곽선으로 먼저 자리를 잡고, 드롭(없으면 첫 박)에 꽉 찬 이름이 내려앉으며 테마 드롭이 터진다.
+ * 주소 칩이 톡 붙고, 반전 칸이 이름을 짚어 마지막 프레임에 끝난다. 끝이 가장 센 순간인 영상(홍보·공개)용.
+ */
+const pattern: Pattern<EndContent> = {
+  id: "end.slam",
+  type: "end",
+  does: "외곽선 이름이 먼저 서고 드롭에 꽉 찬 이름이 쾅 내려앉는다, 주소 칩이 붙고 반전 칸이 이름을 짚는다",
+  energy: ["high"],
+  family: "slam",
+  camera: ["impact"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 1.6, max: 5 },
+  purposes: { prefer: ["promo", "launch", "ad"], avoid: ["explainer"] },
+  fits(c) {
+    if (typeof c?.title !== "string" || !c.title.trim() || [...c.title].length > 16) return "title 이 비었거나 16자를 넘는다";
+    if (c.url && [...c.url].length > 32) return "url 이 32자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const titlePx = fitSize(c.title, w * 0.94, h * (vertical ? 0.2 : 0.4), { hShare: 1, max: Math.round(380 * u), min: Math.round(80 * u) });
+    // 세로 화면은 이름 한 줄이 가는 띠라 한 줄·주소를 키우고 사이를 띄워 화면을 세로로도 쓴다
+    const urlPx = Math.round(Math.max(40 * u, titlePx * (vertical ? 0.28 : 0.2)));
+    const weight = ctx.style.type?.weightDisplay ?? 800;
+    const font = `font-family:var(--kf-font-display);font-size:inherit;font-weight:${weight};line-height:1;letter-spacing:-0.03em;white-space:pre`;
+
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    // 세로 화면은 이름·한 줄·주소를 위아래로 쌓아 높이 ⅔ 로 벌린다 — 가로로 붙이면 위쪽 가는 띠 하나가 되어 아래가 빈다
+    const spread = vertical && !!(c.line || c.url);
+    const col = node(host, `position:relative;display:flex;flex-direction:column;align-items:center;${spread ? `height:${Math.round(h * 0.66)}px;justify-content:space-between` : `gap:${Math.round(titlePx * (vertical ? 0.6 : 0.22))}px`}`);
+    const stage = node(col, `position:relative;font-size:${titlePx}px`);
+    // 폭 86% — 쾅의 출렁임(±8%)까지 안전 영역 가장자리 띠에 안 닿게
+    const fit = fitOnce(stage, w * 0.86, h * (vertical ? 0.24 : 0.42));
+    // 쾅 전 자리표 — 옅게 채운 이름(외곽선만으로는 밝은 바탕에서 드러남이 화면 변화로 안 읽힌다)
+    const ghost = node(stage, `${font};color:var(--kf-ink);opacity:.16`, c.title);
+    const name = node(stage, `position:absolute;left:0;top:0;${font};color:var(--kf-ink);transform-origin:50% 60%`, c.title);
+    kit.stage?.hero(stage);
+    const line = c.line || c.url ? node(col, spread ? `display:flex;flex-direction:column;gap:${Math.round(h * 0.06)}px;align-items:center;line-height:1.3` : `display:flex;gap:0.6em;align-items:center;font-size:${urlPx}px;line-height:1.3;height:1.4em`) : null;
+    // 세로면 한 줄·주소를 폭을 넉넉히 쓰는 크기로 따로 — 이름보다는 작게
+    const sizeOf = (text: string, share: number, cap: number) => `font-size:${Math.round(Math.max(52 * u, Math.min(titlePx * cap, (w * share) / textEm(text))))}px;`;
+    const lineEl = c.line ? node(line!, `${spread ? sizeOf(c.line, 0.86, 0.6) : ""}font-family:var(--kf-font-sans);font-weight:600;color:var(--kf-ink-soft, var(--kf-ink));white-space:nowrap`) : null;
+    const urlEl = c.url ? node(line!, `${spread ? sizeOf(c.url, 0.7, 0.42) : ""}font-family:var(--kf-font-mono);font-weight:700;color:var(--kf-on-accent);background:var(--kf-accent);padding:0.05em 0.45em;white-space:nowrap`) : null;
+    // 드롭 터짐은 화면 전체 층에 — 카메라 층(안전 영역)에 깔면 터짐이 네모 판으로 보인다
+    const burst = node(kit.stage?.box ?? root, "position:absolute;inset:0;pointer-events:none;z-index:50");
+
+    // 드롭이 장면 앞쪽(1.6초 안)일 때만 그 드롭에 쾅 — 늦은 드롭까지 이름을 비워 두면 그 사이가 멈춘 화면이다
+    const found = sceneDrop(ctx);
+    const di = found !== null && ctx.beats.drop(found) <= 1.6 ? found : null;
+    const hits = kit.hits.length ? kit.hits : [0];
+    // 드롭이 없으면 곧바로 쾅 — 기다릴 이유가 없다
+    const at = di !== null ? ctx.beats.drop(di) : (hits.find((b) => b >= 0.1) ?? 0.12);
+    const dropPaint = di !== null && slots.drop ? slots.drop(burst, { ctx, drop: di }) : null;
+    if (di === null && kit.stage && cameraOk(ctx)) kit.stage.camera.impact(at, { amount: 0.04 });
+    const lineAt = at + 0.2;
+    const urlAt = lineAt + (c.line ? 0.35 : 0);
+    const writeLine = lineEl ? slots.write(lineEl, { ctx, text: c.line!, at: lineAt, dur: 0.35, seed: `${kit.seed}:line` }) : null;
+    const writeUrl = urlEl ? slots.write(urlEl, { ctx, text: c.url!, at: urlAt, dur: 0.3, seed: `${kit.seed}:url` }) : null;
+    const landed = slots.land(name, { ctx, at, seed: `${kit.seed}:land` });
+    // 앉은 뒤엔 짚개가 이름 ↔ 한 줄·주소를 박마다 번갈아 짚는다
+    const point = glider(host, [stage, ...(lineEl ? [lineEl] : []), ...(urlEl ? [urlEl] : [])], { hub: true });
+    const stops = beatStops(kit.hits, at + 0.2, ctx.dur);
+
+    return (t: number) => {
+      moving("end.slam", ctx);
+      fit();
+      const s = dropPaint?.(t);
+      applyStyle(name, combine(slam(t, at), landed(t), s?.punch));
+      name.style.visibility = t >= at - 0.16 ? "visible" : "hidden";
+      // 쾅 전엔 외곽선 이름을 왼쪽부터 짚어 자리를 알린다 — 앉은 뒤엔 꽉 찬 이름을 마지막 프레임까지 짚는다
+      ghost.style.opacity = t < at ? "0.16" : "0";
+      ghost.style.clipPath = t < at ? `inset(0 ${((1 - clamp(t / Math.max(0.1, at - 0.16))) * 100).toFixed(2)}% 0 0)` : "";
+      point(t, stops);
+      if (line) line.style.visibility = t >= lineAt ? "visible" : "hidden";
+      writeLine?.(t);
+      writeUrl?.(t);
+      if (urlEl) applyStyle(urlEl, t >= urlAt ? { scale: spring(t - urlAt, { from: 0.5, to: 1, stiffness: 320, damping: 14 }) } : { opacity: 0 });
+      if (s) applyStyle(host, s.shake);
+    };
+  },
+};
+
+export default pattern;

package/packages/patterns/src/flow/graph.ts

@@ -0,0 +1,250 @@
+import { applyStyle, clamp, combine, spring } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { partial } from "@kasaframe/themes/slotkit";
+import { area, node, slotsOf, spaced, moving } from "../kit.ts";
+import { cssColor, objectCss, objectFor, objectById } from "../objects.ts";
+import type { Pattern } from "../types.ts";
+
+export interface FlowContent {
+  nodes: { id: string; label: string; group?: string }[];
+  edges?: { from: string; to: string; label?: string }[];
+}
+
+type Pt = [number, number];
+
+// 깊이(가장 긴 들어오는 길) 차례로 칸을 나눈다 — 거꾸로 가는 연결은 깊이를 정하는 데 안 쓴다
+function layers(c: FlowContent): Map<string, number> {
+  const edges = c.edges?.length ? c.edges : c.nodes.slice(1).map((n, i) => ({ from: c.nodes[i].id, to: n.id }));
+  const depth = new Map(c.nodes.map((n) => [n.id, 0]));
+  for (let k = 0; k < c.nodes.length; k++) {
+    for (const e of edges) {
+      const a = depth.get(e.from);
+      const b = depth.get(e.to);
+      if (a === undefined || b === undefined) continue;
+      const order = c.nodes.findIndex((n) => n.id === e.to) > c.nodes.findIndex((n) => n.id === e.from);
+      if (order && b < a + 1) depth.set(e.to, a + 1);
+    }
+  }
+  return depth;
+}
+
+/**
+ * 구조 — 상자가 깊이 차례로 서고 연결선이 그어진 뒤, 요청 하나(객체 사전 request)가 연결을 따라 끝 상자까지 가고 응답(response)이
+ * 같은 길로 돌아온다(장면이 남으면 되풀이). 지나간 길은 강조색으로 남고 닿은 상자가 켜지며 닿을 때마다 툭 — 움직이는 것은 「무엇이 어디로 흐르나」 하나뿐.
+ */
+const pattern: Pattern<FlowContent> = {
+  id: "flow.graph",
+  type: "flow",
+  does: "상자가 깊이 차례로 서고 연결이 그어진 뒤, 요청 하나가 연결을 따라 끝까지 간다",
+  energy: ["mid"],
+  family: "draw",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 3, max: 9 },
+  themes: { "debug-hud": 0.4, "kasaterm-cells": 0.4 },
+  fits(c) {
+    const nodes = c?.nodes;
+    if (!Array.isArray(nodes) || nodes.length < 2) return "nodes 가 둘보다 적다";
+    if (nodes.length > 8) return "nodes 가 여덟을 넘는다";
+    const ids = new Set(nodes.map((n) => n.id));
+    if (ids.size !== nodes.length) return "node id 가 겹친다";
+    for (const [i, n] of nodes.entries()) if (typeof n?.label !== "string" || !n.label.trim() || [...n.label].length > 14) return `nodes[${i}].label 이 비었거나 14자를 넘는다`;
+    for (const e of c.edges ?? []) if (!ids.has(e.from) || !ids.has(e.to)) return `연결 ${e.from}→${e.to} 의 상자가 없다`;
+    const depth = layers(c);
+    const perCol = new Map<number, number>();
+    for (const d of depth.values()) perCol.set(d, (perCol.get(d) ?? 0) + 1);
+    if (Math.max(...perCol.values()) > 4) return "한 깊이에 상자가 넷을 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const edges = c.edges?.length ? c.edges : c.nodes.slice(1).map((n, i) => ({ from: c.nodes[i].id, to: n.id, label: undefined as string | undefined }));
+    const depth = layers(c);
+    const cols = Math.max(...depth.values()) + 1;
+    const colOf = (d: number) => c.nodes.filter((n) => depth.get(n.id) === d);
+    const maxPer = Math.max(...Array.from({ length: cols }, (_, d) => colOf(d).length));
+
+    // 칸 — 흐름 방향(가로면 가로)으로 깊이, 그 직각으로 같은 깊이의 상자
+    const along = vertical ? h : w;
+    const across = vertical ? w : h;
+    const cell = (along * 0.92) / cols;
+    // 상자는 칸을 넉넉히 — 이름은 띄어쓰기에서 두 줄까지, 사전 물체는 이름 위에
+    const boxL = Math.min(cell * 0.74, along * 0.3);
+    const boxA = Math.min((across * 0.86) / maxPer - 40 * u, boxL * (vertical ? 0.5 : 0.95));
+    // 세로 화면은 흐름이 위아래 — 상자는 폭을 넉넉히(같은 깊이 상자끼리 나눠), 높이는 칸의 60%
+    const bw = vertical ? Math.min(w * 0.78, (w * 0.88) / maxPer - 30 * u) : boxL;
+    const bh = vertical ? cell * 0.6 : boxA;
+    const pieces = c.nodes.flatMap((n) => n.label.split(/\s+/));
+    const longest = pieces.reduce((a, p) => (textEm(p) > textEm(a) ? p : a), "");
+    const labelPx = fitSize(longest, bw * (vertical ? 0.6 : 0.8), bh, { hShare: vertical ? 0.4 : 0.26, max: Math.round(80 * u), min: Math.round(28 * u) });
+    const glyphPx = Math.round(Math.min(bh * 0.36, labelPx * 1.7));
+
+    const pos = new Map<string, { x: number; y: number }>();
+    for (let d = 0; d < cols; d++) {
+      const list = colOf(d);
+      list.forEach((n, i) => {
+        const a = (along - cell * cols) / 2 + cell * (d + 0.5);
+        const b = (across / (list.length + 1)) * (i + 1);
+        pos.set(n.id, vertical ? { x: b, y: a } : { x: a, y: b });
+      });
+    }
+
+    const host = node(root, "position:absolute;inset:0");
+    const wires = node(host, "position:absolute;inset:0");
+    const trailLayer = node(host, "position:absolute;inset:0");
+    const hits = spaced(kit.hits.length ? kit.hits : [0], 0.3);
+
+    // 상자는 깊이 차례로 — 같은 깊이는 같은 박. 선은 뒤 상자가 서기 직전에 그어진다
+    const order = [...c.nodes].sort((a, b) => depth.get(a.id)! - depth.get(b.id)!);
+    // 요청이 길을 열며 간다 — 첫 상자가 서고 곧 요청이 떠나, 다음 깊이 상자는 요청이 그쪽으로 출발할 때 서고 닿을 때 차오른다.
+    // 상자를 먼저 다 세워 두고 기다리면 밝은 바탕에서 흰 카드가 서는 것만으로는 화면이 바뀐 것으로 안 읽힌다
+    const goFrom = 0.25;
+    const leg = 0.45;
+    const colAt = Array.from({ length: cols }, (_, d) => (d === 0 ? 0 : goFrom + (d - 1) * leg));
+    const at = (id: string) => colAt[depth.get(id)!];
+
+    const boxes = new Map(
+      order.map((n, i) => {
+        const p = pos.get(n.id)!;
+        const box = node(host, `position:absolute;left:${p.x - bw / 2}px;top:${p.y - bh / 2}px;width:${bw}px;height:${bh}px;transform-origin:50% 50%`);
+        const paintPanel = slots.panel(box, { ctx, at: at(n.id), seed: `${kit.seed}:n${i}` });
+        const lit = node(box, "position:absolute;inset:0;border-radius:var(--kf-radius-md);visibility:hidden");
+        // 지금 지나가는 것(요청·응답)이 닿는 동안 그 색으로 상자가 차오르는 겹
+        const sweep = node(box, "position:absolute;inset:0;border-radius:var(--kf-radius-md);visibility:hidden");
+        const face = node(box, `position:absolute;inset:0;display:flex;flex-direction:${vertical ? "row" : "column"};align-items:center;justify-content:center;gap:${Math.round(labelPx * 0.35)}px;color:var(--kf-ink)`);
+        const obj = objectFor(n.label);
+        const glyph = obj ? node(face, objectCss(obj, glyphPx)) : null;
+        const label = node(face, `font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:700;line-height:1.1;text-align:center;word-break:keep-all;max-width:${Math.round(bw * 0.86)}px`);
+        const write = slots.write(label, { ctx, text: n.label, at: at(n.id) + 0.05, dur: 0.25, seed: `${kit.seed}:t${i}` });
+        const landed = slots.land(box, { ctx, at: at(n.id), seed: `${kit.seed}:land${i}` });
+        return [n.id, { box, paintPanel, lit, sweep, face, glyph, write, landed, outline: !!obj?.shape2d.outline, color: obj ? cssColor(obj.color) : "" }] as const;
+      }),
+    );
+
+    const route = (a: string, b: string): Pt[] => {
+      const p = pos.get(a)!;
+      const q = pos.get(b)!;
+      if (vertical) {
+        const sy = p.y + bh / 2;
+        const ty = q.y - bh / 2;
+        const my = (sy + ty) / 2;
+        return [[p.x, sy], [p.x, my], [q.x, my], [q.x, ty]];
+      }
+      const sx = p.x + bw / 2;
+      const tx = q.x - bw / 2;
+      const mx = (sx + tx) / 2;
+      return [[sx, p.y], [mx, p.y], [mx, q.y], [tx, q.y]];
+    };
+    const wired = edges.map((e, i) => {
+      const pts = route(e.from, e.to);
+      const drawAt = at(e.to);
+      return { e, pts, paint: slots.trace(wires, { ctx, points: pts, at: drawAt, dur: leg, seed: `${kit.seed}:e${i}` }), drawAt, i };
+    });
+
+    // 요청의 길 — 첫 상자에서 연결을 따라 끝 상자까지(갈림이면 먼저 적힌 쪽)
+    const path: typeof wired = [];
+    let cur = order[0].id;
+    for (let k = 0; k < edges.length; k++) {
+      const next = wired.find((x) => x.e.from === cur && !path.includes(x));
+      if (!next) break;
+      path.push(next);
+      cur = next.e.to;
+    }
+    // 요청은 한 연결에 0.45초 — 끝에 닿으면 응답(사전 response)이 같은 길을 거꾸로 돌아오고, 장면이 남으면 다시 요청이 간다
+    const L = Math.max(1, path.length);
+    const trip = L * leg;
+    const res = objectById("response")!;
+    const req = objectById("request")!;
+    const dotPx = Math.round(Math.min(bh * 0.5, 0.075 * Math.min(w, h)));
+    const dot = node(host, `position:absolute;left:0;top:0;margin:-${dotPx / 2}px 0 0 -${dotPx / 2}px;${objectCss(req, dotPx)};box-shadow:0 0 0 ${Math.round(dotPx * 0.18)}px color-mix(in srgb, var(--kf-accent) 30%, transparent)`);
+    const trails = path.map(() => {
+      const svg = host.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttribute("style", "position:absolute;inset:0;width:100%;height:100%;overflow:visible");
+      const line = host.ownerDocument.createElementNS("http://www.w3.org/2000/svg", "polyline");
+      line.setAttribute("fill", "none");
+      line.setAttribute("stroke", "var(--kf-accent)");
+      line.setAttribute("stroke-width", String(Math.round(10 * u)));
+      line.setAttribute("stroke-linejoin", "round");
+      line.setAttribute("stroke-linecap", "round");
+      svg.append(line);
+      trailLayer.append(svg);
+      return line;
+    });
+    const tripColor = (k: number) => cssColor(k % 2 === 1 ? res.color : req.color);
+    // 지금 길 — 몇 번째 왕복(k)·몇 번째 연결(i)·연결 안 진행(q). 출발 전이면 null
+    const where = (t: number) => {
+      if (!path.length || t < goFrom) return null;
+      const k = Math.floor((t - goFrom) / trip);
+      const local = t - goFrom - k * trip;
+      const i = Math.min(L - 1, Math.floor(local / leg));
+      return { k, i, q: clamp((local - i * leg) / leg), back: k % 2 === 1 };
+    };
+    const destOf = (k: number, i: number) => (k % 2 === 1 ? path[L - 1 - i].e.from : path[i].e.to);
+    // 그 상자에 요청·응답이 마지막으로 닿은 시각 — 닿을 때마다 상자가 한 번 툭
+    const lastArrival = (id: string, t: number): { when: number; k: number } | null => {
+      if (!path.length || t < goFrom) return null;
+      // 출발 상자는 첫 요청이 떠나는 순간 켜진다
+      let best: { when: number; k: number } | null = id === order[0].id ? { when: goFrom, k: 0 } : null;
+      for (let k = 0; goFrom + k * trip <= t; k++) {
+        for (let i = 0; i < L; i++) {
+          const when = goFrom + k * trip + (i + 1) * leg;
+          if (when > t) break;
+          if (destOf(k, i) === id) best = { when, k };
+        }
+      }
+      return best;
+    };
+
+    return (t: number) => {
+      moving("flow.graph", ctx);
+      for (const [id, b] of boxes) {
+        const on = t >= at(id);
+        b.box.style.visibility = on ? "visible" : "hidden";
+        if (!on) continue;
+        b.paintPanel(t);
+        b.write(t);
+        const pop = spring(t - at(id), { from: 0.7, to: 1, stiffness: 320, damping: 17 });
+        // 상자는 지나가는 것이 닿은 뒤 한 연결 동안만 켜져 있다 — 「지금 처리 중인 마디」. 계속 켜 두면 다음 왕복부터 화면이 안 바뀐다
+        const arrived = lastArrival(id, t);
+        const last = arrived && t - arrived.when < leg ? arrived : null;
+        const now = where(t);
+        const coming = now && destOf(now.k, now.i) === id ? now : null;
+        b.lit.style.visibility = last ? "visible" : "hidden";
+        if (last) b.lit.style.background = tripColor(last.k);
+        b.sweep.style.visibility = coming ? "visible" : "hidden";
+        if (coming) {
+          b.sweep.style.background = tripColor(coming.k);
+          // 오는 쪽에서 차오른다 — 요청은 위(왼쪽)에서, 응답은 아래(오른쪽)에서
+          const r = ((1 - coming.q) * 100).toFixed(2);
+          b.sweep.style.clipPath = vertical ? (coming.back ? `inset(${r}% 0 0 0)` : `inset(0 0 ${r}% 0)`) : coming.back ? `inset(0 0 0 ${r}%)` : `inset(0 ${r}% 0 0)`;
+        }
+        const litNow = !!last || (coming !== null && coming.q > 0.5);
+        b.face.style.color = litNow ? "var(--kf-on-accent)" : "var(--kf-ink)";
+        if (b.glyph) b.glyph.style.setProperty(b.outline ? "border-color" : "background", litNow ? "var(--kf-on-accent)" : b.color);
+        const bump = arrived ? spring(t - arrived.when, { from: 1.06, to: 1, stiffness: 300, damping: 16 }) : 1;
+        applyStyle(b.box, combine({ scale: pop * bump }, b.landed(t)));
+      }
+      for (const wv of wired) wv.paint(t);
+      let shown = false;
+      // 첫 길(요청)은 지나간 자리에 강조색 자국을 남긴다
+      path.forEach((p, k) => {
+        const q = clamp((t - (goFrom + k * leg)) / leg);
+        const drawn = partial(p.pts, q);
+        trails[k].setAttribute("points", q > 0 ? drawn.map((v) => `${v[0].toFixed(1)},${v[1].toFixed(1)}`).join(" ") : "");
+      });
+      const now = where(t);
+      if (now) {
+        const p = path[now.back ? L - 1 - now.i : now.i];
+        const [x, y] = partial(p.pts, now.back ? 1 - now.q : now.q).at(-1)!;
+        dot.style.transform = `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px)`;
+        dot.style.background = tripColor(now.k);
+        shown = true;
+      }
+      dot.style.visibility = shown ? "visible" : "hidden";
+    };
+  },
+};
+
+export default pattern;

package/packages/patterns/src/hook-number/counter.ts

@@ -0,0 +1,101 @@
+import { applyStyle, clamp } from "@kasaframe/core";
+import { textEm } from "@kasaframe/motion/moves";
+import { area, beatStops, decimalsOf, fitOnce, glider, moving, node, odometer, slotsOf, timesSign } from "../kit.ts";
+import type { HookNumber } from "./roll.ts";
+import type { Pattern } from "../types.ts";
+
+/**
+ * 계수기 — 숫자 자리마다 판이 서고 주행계 띠가 굴러 값에 앉는다(끝자리 띠가 연속으로 구르고 윗자리는 올림 때만). 굴림 2.2초로 박아 둔다.
+ * 앉은 뒤엔 짚개가 숫자와 라벨을 박마다 번갈아 짚는다. 롤(roll)이 「값이 바뀐다」라면 이쪽은 「센다」.
+ */
+const pattern: Pattern<HookNumber> = {
+  id: "hook-number.counter",
+  type: "hook-number",
+  does: "숫자 자리마다 판이 서고 주행계 띠가 굴러 값에 앉은 뒤, 짚개가 숫자와 라벨을 번갈아 짚는다",
+  energy: ["low", "mid"],
+  family: "flap",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.6, max: 9 },
+  themes: { "debug-hud": 0.5, "kasaterm-cells": 0.5 },
+  fits(c) {
+    if (!Number.isFinite(c?.value) || c.value < 0) return "value 가 0 이상 수가 아니다";
+    if (c.from !== undefined && (!Number.isFinite(c.from) || c.from < 0)) return "from 이 0 이상 수가 아니다";
+    if (typeof c.label !== "string" || !c.label.trim() || [...c.label].length > 24) return "label 이 비었거나 24자를 넘는다";
+    const dec = c.decimals ?? decimalsOf(c.value);
+    const text = c.value.toFixed(dec);
+    if (text.replace(".", "").length > 7) return "자리가 일곱을 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const from = c.from ?? 0;
+    const dec = c.decimals ?? Math.max(decimalsOf(c.value), decimalsOf(from));
+    // 쉼표 없이 자리를 세운다(주행계 띠는 숫자 칸만) — 자리 수는 큰 쪽 기준
+    const template = Math.max(c.value, from).toFixed(dec);
+    const unit = c.unit ?? "";
+    const digits = template.replace(".", "").length;
+    // 주행계 띠 한 칸 0.62em(고정폭 글꼴 0.6em + 틈) — 앉은 뒤 글도 같은 칸 폭으로
+    const cellEm = 0.62;
+    // 세로 화면은 단위를 숫자 아래로 내려 위아래로 쓴다 — 숫자는 폭을 다 쓰고 높이도 ⅓ 넘게. 배수 기호(×)만은 늘 옆에 붙인다
+    // 세로 높이 상한 — 라벨 줄(0.24)·틈(0.18)·숫자판(1.1 + 위아래 여백 0.16)·틈(0.06)·단위(0.5)를 다 쌓아 안전 영역 86% 안에 들게
+    // (넘치면 라벨이 플랫폼 UI 자리로 올라간다)
+    const times = timesSign(unit);
+    const beside = !!unit && (!vertical || times);
+    const gapEm = times ? 0.06 : 0.2;
+    // 세로 화면은 숫자판 아래에 출처(두 줄까지)를 세운다 — 숫자 장면은 출처가 화면에 서야 하고, 단위가 옆에 붙으면 아래가 비어 세로 채움에 못 미친다
+    const srcText = vertical && c.source ? `출처 · ${c.source}` : "";
+    const srcPx = srcText ? Math.round(Math.max(28 * u, Math.min(40 * u, (w * 0.92 * 2 * 0.95) / (textEm(srcText) * 1.05)))) : 0;
+    // 폭의 0.3 은 단위 앞 틈과 숫자판 좌우 여백 — 빼고 재면 단위를 옆에 둔 줄이 안전 영역 가장자리에 붙는다
+    const numPx = Math.round(Math.min((w * 0.86) / (digits * cellEm + (beside ? 0.5 * textEm(unit) + 0.3 : 0)), vertical ? (h * 0.86 - srcPx * 2.6) / (0.24 + 0.18 + 1.26 + (unit && !beside ? 0.56 : 0) + (srcText ? 0.18 : 0)) : h * 0.42));
+    const lineH = Math.round(numPx * 1.1);
+    const labelPx = Math.round(Math.max(52 * u, numPx * (vertical ? 0.2 : 0.18)));
+
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    const col = node(host, `display:flex;flex-direction:column;align-items:center;gap:${Math.round(numPx * 0.18)}px`);
+    const label = node(col, `font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:700;color:var(--kf-ink);white-space:nowrap;line-height:1.2;height:1.2em`);
+    const row = node(col, `display:flex;flex-direction:${beside || !unit ? "row" : "column"};align-items:center;gap:${Math.round(numPx * (beside ? gapEm : 0.06))}px`);
+    const board = node(row, `position:relative;padding:${Math.round(numPx * 0.08)}px ${Math.round(numPx * 0.12)}px`);
+    const panel = slots.panel(board, { ctx, at: 0, seed: `${kit.seed}:board` });
+    const num = node(board, `position:relative;font-family:var(--kf-font-mono);font-size:${numPx}px;font-weight:800;color:var(--kf-ink);line-height:${lineH}px;height:${lineH}px`);
+    const odo = odometer(num, { template, decimals: dec, linePx: lineH });
+    const plain = node(board, `position:absolute;left:${Math.round(numPx * 0.12)}px;top:${Math.round(numPx * 0.08)}px;font-family:var(--kf-font-mono);font-size:${numPx}px;font-weight:800;color:var(--kf-ink);letter-spacing:0.02em;line-height:${lineH}px;white-space:pre;visibility:hidden`, c.value.toFixed(dec).padStart(template.length, " "));
+    const unitEl = unit ? node(row, `font-family:var(--kf-font-display);font-size:${Math.round(numPx * 0.5)}px;line-height:1;font-weight:800;color:var(--kf-accent-text, var(--kf-accent));white-space:nowrap`, unit) : null;
+    const source = srcText ? node(col, `max-width:${Math.round(w * 0.92)}px;font-family:var(--kf-font-mono);font-size:${srcPx}px;line-height:1.3;min-height:1.3em;color:var(--kf-dim, var(--kf-ink));word-break:keep-all;overflow-wrap:anywhere;text-align:center`) : null;
+    kit.stage?.hero(board);
+
+    // 라벨 폭은 글꼴마다 다르다(고정폭 테마는 빈칸까지 한 칸) — 글자 수 어림 대신 그 글꼴로 재서 안전 영역 폭 92% 안에
+    const fitLabel = fitOnce(label, w * 0.92, labelPx, c.label);
+
+    const land = Math.min(2.4, ctx.dur - 0.6);
+    // 배수 기호 하나를 칸으로 짚으면 색 네모 안 × — 닫기 단추로 읽힌다
+    const point = glider(host, [board, label, ...(unitEl && !times ? [unitEl] : [])], { hub: true });
+    const stops = beatStops(kit.hits, land + 0.15, ctx.dur);
+    const writeLabel = slots.write(label, { ctx, text: c.label, at: 0, dur: 0.35, seed: `${kit.seed}:l` });
+    const landed = slots.land(board, { ctx, at: land, seed: `${kit.seed}:land` });
+    // 출처는 앉은 뒤에 찍고 장면 끝 0.35초 전에 다 찍는다 — 테마 글 찍기가 마지막 글자를 앉힐 틈(끝 프레임에 덜 찍힌 글자가 안 남게)
+    const srcDur = clamp([...srcText].length * 0.035, 0.3, 0.9);
+    const writeSource = source ? slots.write(source, { ctx, text: srcText, at: Math.max(0.4, Math.min(land + 0.15, ctx.dur - srcDur - 0.35)), dur: srcDur, seed: `${kit.seed}:src` }) : null;
+
+    return (t: number) => {
+      moving("hook-number.counter", ctx);
+      fitLabel();
+      panel(t);
+      writeLabel(t);
+      writeSource?.(t);
+      // 고른 빠르기로 센다 — 감속하면 끝자리 띠가 서서 그 사이가 멈춘 화면이 된다
+      const p = clamp((t - 0.1) / (land - 0.1));
+      const v = from + (c.value - from) * p;
+      if (odo) odo(p >= 1 ? c.value : v);
+      num.style.visibility = odo && t < land ? "visible" : "hidden";
+      plain.style.visibility = !odo || t >= land ? "visible" : "hidden";
+      if (!odo) plain.textContent = (p >= 1 ? c.value : v).toFixed(dec).padStart(template.length, " ");
+      applyStyle(board, landed(t));
+      point(t, stops);
+    };
+  },
+};
+
+export default pattern;

package/packages/patterns/src/hook-number/roll.ts

@@ -0,0 +1,179 @@
+import { applyStyle, clamp, combine, ease, progress, spring } from "@kasaframe/core";
+import { sweep } from "@kasaframe/motion";
+import { textEm } from "@kasaframe/motion/moves";
+import { ACCENT_TEXT, area, decimalsOf, factRoll, fitOnce, node, odometer, slotsOf, moving, timesSign } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+export interface HookNumber {
+  value: number;
+  unit?: string;
+  label: string;
+  /** 굴리기 시작 값 — 사실이 있을 때만(없으면 0) */
+  from?: number;
+  decimals?: number;
+  /** 숫자 앞 글(「1/」 같은) */
+  prefix?: string;
+  source?: string;
+}
+
+const FIG = "\u2007"; // 숫자 한 칸 폭 빈칸 — 굴리는 동안 자릿수가 모자라도 단위가 제자리에 있게
+
+const TICKS = 11;
+
+/**
+ * 큰 숫자 하나가 사실 숫자 사이로만 굴러 박에 앉는다. 아래 자는 지나온 거리를 같이 짚고, 앉은 뒤엔 끝 값·밑줄·출처가 이어서 선다.
+ * 앉는 순간은 테마 land, 글은 테마 write.
+ */
+const pattern: Pattern<HookNumber> = {
+  id: "hook-number.roll",
+  type: "hook-number",
+  does: "큰 숫자가 from→value 로 굴러 박에 앉고, 자 눈금이 지나는 값을 짚는다",
+  energy: ["mid"],
+  family: "grow",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 2.4, max: 6 },
+  themes: { "og-measure": 0.6, "debug-hud": 0.5 },
+  fits(c, _info) {
+    if (!Number.isFinite(c?.value)) return "value 가 수가 아니다";
+    if (c.from !== undefined && !Number.isFinite(c.from)) return "from 이 수가 아니다";
+    if (typeof c.label !== "string" || !c.label.trim()) return "label 이 비었다";
+    if ([...c.label].length > 24) return "label 이 24자를 넘는다";
+    if (c.unit && [...c.unit].length > 6) return "unit 이 6자를 넘는다";
+    if (c.prefix && [...c.prefix].length > 4) return "prefix 가 4자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const from = c.from ?? 0;
+    const dec = c.decimals ?? Math.max(decimalsOf(c.value), decimalsOf(from));
+    const finalText = factRoll(Infinity, { from, to: c.value, at: 0, dur: 1, decimals: dec }).text;
+    // 자 양끝은 받은 사실 그대로의 자릿수로
+    const fromText = factRoll(0, { from, to: c.value, at: 1, dur: 1, decimals: decimalsOf(from) }).text;
+    // 올라가는 굴림은 모자란 자릿수를 숫자 폭 빈칸으로 채워 단위가 제자리, 내려가는 굴림은 긴 글을 같은 폭에 줄여 넣는다 — 앉는 순간 원문 그대로
+    const finalEm = textEm(finalText);
+    const unit = c.unit ?? "";
+
+    // 글 폭은 글자 수로 어림한다(build 때 장면이 숨어 있어 잴 수 없다)
+    const unitK = 0.4;
+    const prefix = c.prefix ?? "";
+    // 숫자 줄이 폭 80% 안팎. 세로 화면은 라벨·숫자·(단위)·자·출처를 쌓은 높이가 안전 영역 86% 안에 들게 — 단위를 옆에 둘 때와
+    // 숫자 아래 줄로 내릴 때 중 숫자가 더 커지는 쪽을 고른다(긴 숫자는 아래로 내려야 폭을 다 쓰고, 짧은 숫자는 옆에 둬야 넓다)
+    // 배수 기호(×)는 아래로 내리지 않고 숫자에 바짝 붙인다
+    const times = timesSign(unit);
+    const unitGap = times ? 0.04 : 0.12;
+    const prefixEm = prefix ? 0.12 + unitK * textEm(prefix) : 0;
+    const sizeFor = (below: boolean) => Math.min((w * 0.8) / (finalEm + prefixEm + (unit && !below ? unitGap + unitK * textEm(unit) : 0)), vertical ? (h * 0.86) / (2.22 + (below ? 0.55 : 0)) : h * 0.44);
+    const unitBelow = vertical && !!unit && !times && sizeFor(true) > sizeFor(false);
+    const numPx = Math.round(sizeFor(unitBelow));
+    const rowEm = finalEm + prefixEm + (unit && !unitBelow ? unitGap + unitK * textEm(unit) : 0);
+    const colW = Math.round(clamp(numPx * rowEm * 1.04, w * 0.7, w * 0.88));
+    const labelPx = Math.round(Math.max(52 * u, numPx * 0.16));
+    const weight = ctx.style.type?.weightDisplay ?? 800;
+
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    const col = node(host, `position:relative;width:${colW}px;display:flex;flex-direction:column;align-items:${vertical ? "center" : "stretch"};gap:${Math.round(numPx * 0.08)}px`);
+    const label = node(col, `font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:600;color:var(--kf-ink-soft, var(--kf-ink));line-height:1.15;white-space:nowrap;min-height:1.15em`);
+    const row = node(col, `position:relative;display:flex;align-items:baseline;gap:${Math.round(numPx * 0.12)}px;transform-origin:0 70%;isolation:isolate`);
+    if (prefix) node(row, `font-family:var(--kf-font-display);font-size:${Math.round(numPx * unitK)}px;font-weight:${weight};color:var(--kf-dim, var(--kf-ink));white-space:nowrap`, prefix);
+    const numWrap = node(row, "position:relative;display:inline-block");
+    const num = node(numWrap, `font-family:var(--kf-font-display);font-size:${numPx}px;font-weight:${weight};line-height:${Math.round(numPx * 0.92)}px;height:${Math.round(numPx * 0.92)}px;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;white-space:pre;color:var(--kf-ink)`);
+    const unitEl = unit ? node(unitBelow ? col : row, `font-family:var(--kf-font-display);font-size:${Math.round(numPx * (unitBelow ? 0.5 : unitK))}px;font-weight:${weight};color:${ACCENT_TEXT};white-space:nowrap;line-height:1${times ? `;align-self:center;margin-left:${Math.round(numPx * (unitGap - 0.12))}px` : ""}`, unit) : null;
+    const bar = node(row, `position:absolute;left:0;right:0;bottom:${-Math.round(numPx * 0.06)}px;height:${Math.round(numPx * 0.07)}px;background:var(--kf-accent);transform-origin:0 50%;z-index:-1`);
+    kit.stage?.hero(row);
+    const lineH = Math.round(numPx * 0.92);
+    // 작은 범위(걸음 400 아래)는 주행계로 — 글 굴림은 값이 몇 번밖에 안 바뀌어 그 사이가 멈춘 화면이 된다
+    const steps = Math.abs(c.value - from) * 10 ** dec;
+    const template = [...fromText].length > [...finalText].length ? factRoll(0, { from, to: c.value, at: 1, dur: 1, decimals: dec }).text : finalText;
+    const odo = steps < 400 && from >= 0 && c.value >= 0 ? odometer(num, { template, decimals: dec, linePx: lineH }) : null;
+    const plain = odo ? node(numWrap, `position:absolute;left:0;top:0;font-family:var(--kf-font-display);font-size:${numPx}px;font-weight:${weight};line-height:${lineH}px;letter-spacing:-0.03em;white-space:pre;color:var(--kf-ink);visibility:hidden`, finalText) : null;
+    // 앉은 뒤 장면 끝까지 숫자를 짚는다 — 반전 칸이 왼쪽부터 차오른다. 기울거나 굵은 숫자 글꼴은 글자가 글 폭 밖으로 삐져
+    // 나와서(7 의 윗끝) 칸을 양옆으로 넉넉히 — 안 그러면 칸 밖으로 원래 색 글자 조각이 남고 칸 끝에 글자가 잘린다
+    const hiPad = Math.round(numPx * 0.08);
+    const hiBox = node(numWrap, `position:absolute;left:${-hiPad}px;top:0;height:${lineH}px;overflow:hidden;background:var(--kf-accent);visibility:hidden`);
+    const hiText = node(hiBox, `margin-left:${hiPad}px;font-family:var(--kf-font-display);font-size:${numPx}px;font-weight:${weight};line-height:${lineH}px;letter-spacing:-0.03em;white-space:pre;color:var(--kf-on-accent)`, finalText);
+
+    // 자 — 눈금이 from 에서 value 까지, 표시가 지금 값을 짚는다
+    // 세로 화면은 자를 높게 — 눈금이 지금 값을 짚는 몫이 화면 아래쪽을 채운다
+    const rulerH = Math.round(Math.max(28 * u, numPx * (vertical ? 0.42 : 0.2)));
+    const ruler = node(col, `position:relative;align-self:stretch;height:${rulerH}px;margin-top:${Math.round(numPx * 0.1)}px;transform-origin:0 50%`);
+    node(ruler, `position:absolute;left:0;right:0;bottom:0;height:${Math.max(2, Math.round(3 * u))}px;background:var(--kf-ink);opacity:.35`);
+    const ticks = Array.from({ length: TICKS }, (_, i) =>
+      node(ruler, `position:absolute;bottom:0;left:${(i / (TICKS - 1)) * 100}%;width:${Math.max(3, Math.round(5 * u))}px;margin-left:-${Math.max(1, Math.round(2.5 * u))}px;height:${i % 5 === 0 ? 100 : 55}%;background:var(--kf-ink);transform-origin:50% 100%`),
+    );
+    const marker = node(ruler, `position:absolute;bottom:0;left:0;width:${Math.round(rulerH * 0.5)}px;height:${Math.round(rulerH * 1.35)}px;margin-left:-${Math.round(rulerH * 0.25)}px;background:var(--kf-accent)`);
+    const endPx = Math.round(Math.max(26 * u, labelPx * 0.62));
+    const ends = node(col, `position:relative;align-self:stretch;height:${Math.round(endPx * 1.3)}px;font-family:var(--kf-font-mono);font-size:${endPx}px;color:var(--kf-dim, var(--kf-ink));font-variant-numeric:tabular-nums`);
+    const endFrom = node(ends, "position:absolute;left:0;top:0;white-space:nowrap");
+    const endTo = node(ends, `position:absolute;right:0;top:0;white-space:nowrap;color:${ACCENT_TEXT}`);
+    // 출처는 숫자 줄 폭 안에서 두 줄까지 — 길면 글자를 줄인다(잘리지 않게)
+    const srcPx = c.source ? Math.round(Math.max(22 * u, Math.min(endPx, (colW * 2 * 0.95) / Math.max(1, textEm(`출처 · ${c.source}`) * 1.05)))) : 0;
+    const source = c.source ? node(col, `align-self:stretch;font-family:var(--kf-font-mono);font-size:${srcPx}px;line-height:1.3;height:2.6em;color:var(--kf-dim, var(--kf-ink));word-break:keep-all;overflow-wrap:anywhere;text-align:${vertical ? "center" : "left"};margin-top:${Math.round(numPx * 0.04)}px`) : null;
+
+    // 움직임은 모두 내용에서 — 굴림(값)·자 표시(지나온 거리)·끝 값·밑줄(강조)·출처가 끊김 없이 이어져 장면 끝까지 간다.
+    // 앉는 박은 뒤 사슬이 장면 끝에 닿게 거꾸로 잡는다
+    const hits = kit.hits.length ? kit.hits : [0];
+    const srcText = c.source ? `출처 · ${c.source}` : "";
+    const srcDur = srcText ? clamp([...srcText].length * 0.035, 0.3, 0.9) : 0;
+    // 테마 글 찍기는 마지막 글자가 나타난 뒤에도 잠깐 앉는다(찍힘·톡 튀기) — 출처가 장면 끝에 딱 맞춰 끝나면 끝 프레임(표지·견본)에
+    // 덜 찍힌 글자가 남는다. 그 사이는 반전 칸이 끝까지 차올라 쉬지 않는다
+    const settleIn = srcText ? 0.3 : 0;
+    const tail = 0.3 + 0.35 + srcDur + settleIn;
+    const want = Math.max(0.9, ctx.dur - tail - 0.02);
+    const land = [...hits].reverse().find((b) => b <= want && b >= 0.9) ?? want;
+    const toAt = land;
+    const sweepAt = toAt + 0.3;
+    const sourceAt = sweepAt + 0.35;
+    const fromAt = Math.min(0.45, land * 0.3);
+
+    const writeLabel = slots.write(label, { ctx, text: c.label, at: 0, dur: Math.min(0.4, land * 0.3), seed: `${kit.seed}:label` });
+    // 라벨은 그 글꼴로 재서 안전 영역 폭 92% 안에(글자 수 어림은 고정폭·넓은 글꼴에서 넘친다)
+    const fitLabel = fitOnce(label, w * 0.92, labelPx, c.label);
+    const landed = slots.land(row, { ctx, at: land, seed: `${kit.seed}:land` });
+    const writeSource = source ? slots.write(source, { ctx, text: srcText, at: sourceAt, dur: srcDur, seed: `${kit.seed}:src` }) : null;
+    const writeFrom = slots.write(endFrom, { ctx, text: fromText + (unit ? ` ${unit}` : ""), at: fromAt, dur: 0.3, seed: `${kit.seed}:from` });
+    const writeTo = slots.write(endTo, { ctx, text: `${finalText}${unit ? ` ${unit}` : ""}`, at: toAt, dur: 0.3, seed: `${kit.seed}:to` });
+
+    return (t: number) => {
+      moving("hook-number.roll", ctx);
+      fitLabel();
+      const r = factRoll(t, { from, to: c.value, at: 0.08, dur: land - 0.08, decimals: dec });
+      if (odo) {
+        odo(r.value);
+        num.style.visibility = t >= land ? "hidden" : "visible";
+        plain!.style.visibility = t >= land ? "visible" : "hidden";
+      } else {
+        const shown = t >= land ? finalText : r.text.padStart([...finalText].length, FIG);
+        num.textContent = shown;
+        num.style.fontSize = `${Math.round(numPx * Math.min(1, finalEm / textEm(shown.replaceAll(FIG, "0"))))}px`;
+      }
+      num.style.color = t >= land ? ACCENT_TEXT : "var(--kf-ink)";
+      const hp = clamp((t - land - 0.05) / Math.max(0.3, ctx.dur - land - 0.12));
+      hiBox.style.visibility = hp > 0 ? "visible" : "hidden";
+      // 앉은 뒤라 글 폭을 잴 수 있다(장면이 보인다)
+      hiBox.style.width = hp > 0 ? `${(hp * (((plain ?? num).offsetWidth || textEm(finalText) * numPx) + 2 * hiPad)).toFixed(1)}px` : "0px";
+      if (unitEl) unitEl.style.color = t >= land ? "var(--kf-ink)" : ACCENT_TEXT;
+      // 훅 첫 프레임부터 숫자가 서 있다 — 등장은 크게 들어와 내려앉는 것만
+      applyStyle(row, combine({ scale: spring(t, { from: 1.08, to: 1, stiffness: 260, damping: 20 }) }, landed(t)));
+      applyStyle(bar, { ...sweep(t, { at: sweepAt, dur: 0.35 }), opacity: 0.85 });
+      bar.style.display = t >= sweepAt ? "block" : "none";
+
+      applyStyle(ruler, { scaleX: ease.outCubic(progress(t, 0, 0.3)) });
+      marker.style.left = `${(r.p * 100).toFixed(3)}%`;
+      ticks.forEach((tick, i) => {
+        const passed = i / (TICKS - 1) <= r.p + 1e-6;
+        tick.style.background = passed ? "var(--kf-accent)" : "var(--kf-ink)";
+        tick.style.opacity = passed ? "1" : "0.45";
+      });
+
+      writeLabel(t);
+      writeSource?.(t);
+      writeFrom(t);
+      writeTo(t);
+    };
+  },
+};
+
+export default pattern;