kasaframe 0.1.1 → 0.1.4

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

@@ -0,0 +1,85 @@
+import { applyStyle, clamp, combine, spring } from "@kasaframe/core";
+import { fitSize, textEm } from "@kasaframe/motion/moves";
+import { area, beatStops, fitOnce, glider, moving, node, riseName, slotsOf } from "../kit.ts";
+import type { Pattern } from "../types.ts";
+
+export interface EndContent {
+  title: string;
+  line?: string;
+  url?: string;
+  /** assets 기준 그림 */
+  logo?: string;
+}
+
+/**
+ * 끝 카드 — 로고가 앉고 이름이 글자마다 서고, 한 줄·주소가 찍히는 동안 짚개가 이름 → 한 줄 → 주소를 박마다 옮겨 다닌다.
+ */
+const pattern: Pattern<EndContent> = {
+  id: "end.lockup",
+  type: "end",
+  does: "로고가 앉고 이름이 서고 한 줄·주소가 찍히는 동안, 짚개가 이름·한 줄·주소를 박마다 옮겨 다닌다",
+  energy: ["low", "mid"],
+  family: "mask",
+  camera: ["none"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 1.6, max: 6 },
+  fits(c) {
+    if (typeof c?.title !== "string" || !c.title.trim()) return "title 이 비었다";
+    if ([...c.title].length > 20) return "title 이 20자를 넘는다";
+    if (c.line && [...c.line].length > 40) return "line 이 40자를 넘는다";
+    if (c.url && [...c.url].length > 40) return "url 이 40자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    // 어림 크기는 첫 프레임 폭 맞춤(fitOnce — 폭 86%·높이 18%/30%)보다 넉넉히 작게 — 맞춤이 실제로 줄이면 첫 프레임이 언제냐에 따라 크기가 갈린다
+    const titlePx = fitSize(c.title, w * (vertical ? 0.8 : 0.84), h * (vertical ? 0.17 : 0.26), { hShare: 1, max: Math.round((vertical ? 320 : 300) * u), min: Math.round(72 * u) });
+    // 작은 글도 틀 최소 글 크기(쇼츠 48px)를 넘게. 세로 화면은 한 줄·주소도 폭을 넉넉히 쓴다
+    const linePx = vertical && c.line ? Math.round(Math.max(52 * u, Math.min(titlePx * 0.7, (w * 0.86) / textEm(c.line)))) : Math.round(Math.max(52 * u, titlePx * 0.22));
+    const urlPx = vertical && c.url ? Math.round(Math.max(52 * u, Math.min(titlePx * 0.5, (w * 0.8) / textEm(c.url)))) : Math.round(Math.max(52 * u, titlePx * 0.18));
+    const logoPx = Math.round(titlePx * 1.1);
+
+    const host = node(root, "position:absolute;inset:0;display:flex;align-items:center;justify-content:center");
+    // 세로 화면은 이름·한 줄·주소를 위아래로 벌려 세운다(높이의 ⅗) — 가운데 한 덩이로 모으면 위쪽 ⅕ 에만 몰려 아래가 빈다
+    const spread = vertical && (c.line || c.url || c.logo);
+    const col = node(host, `display:flex;flex-direction:column;align-items:center;${spread ? `height:${Math.round(h * 0.7)}px;justify-content:space-between` : `gap:${Math.round(titlePx * (vertical ? 0.5 : 0.16))}px`}`);
+    const logo = c.logo ? node(col, `width:${logoPx}px;height:${logoPx}px;background:center/contain no-repeat url("${ctx.asset(c.logo)}")`) : null;
+    const name = node(col, `position:relative;display:flex;font-family:var(--kf-font-display);font-size:${titlePx}px;font-weight:${ctx.style.type?.weightDisplay ?? 800};line-height:1;letter-spacing:-0.02em;color:var(--kf-ink)`);
+    kit.stage?.hero(name);
+    const paintName = riseName(name, c.title, ctx);
+    const line = c.line ? node(col, `font-family:var(--kf-font-sans);font-size:${linePx}px;font-weight:600;color:var(--kf-ink-soft, var(--kf-ink));text-align:center;line-height:1.3;height:1.3em;white-space:nowrap`) : null;
+    const url = c.url ? node(col, `font-family:var(--kf-font-mono);font-size:${urlPx}px;color:var(--kf-dim, var(--kf-ink));line-height:1.3;height:1.3em;white-space:nowrap`) : null;
+
+    const count = Array.from(c.title).length;
+    const each = clamp(0.4 / count, 0.025, 0.07);
+    const logoAt = 0;
+    const nameAt = logo ? 0.15 : kit.first ? -0.2 : 0;
+    const nameEnd = nameAt + each * (count - 1) + 0.3;
+    const lineAt = nameEnd;
+    const lineDur = line ? clamp([...c.line!].length * 0.03, 0.25, 0.6) : 0;
+    const urlAt = lineAt + lineDur;
+    const urlDur = url ? clamp([...c.url!].length * 0.03, 0.25, 0.6) : 0;
+    // 짚개는 이름이 서자마자 이름 → 한 줄 → 주소를 박마다 옮겨 다닌다 — 장면이 길어도 빠르기는 박이 정해 화면이 서지 않는다
+    const point = glider(host, [name, line, url].filter((e): e is HTMLDivElement => !!e), { hub: true });
+    const fit = fitOnce(name, w * 0.86, h * (vertical ? 0.18 : 0.3), c.title);
+    const stops = beatStops(kit.hits, nameEnd - 0.15, ctx.dur);
+
+    const writeLine = line ? slots.write(line, { ctx, text: c.line!, at: lineAt, dur: lineDur, seed: `${kit.seed}:line` }) : null;
+    const writeUrl = url ? slots.write(url, { ctx, text: c.url!, at: urlAt, dur: urlDur, seed: `${kit.seed}:url` }) : null;
+    const logoLand = logo ? slots.land(logo, { ctx, at: logoAt + 0.2, seed: `${kit.seed}:logo` }) : null;
+
+    return (t: number) => {
+      moving("end.lockup", ctx);
+      if (logo && logoLand) applyStyle(logo, combine({ scale: spring(t - logoAt, { from: 0.6, to: 1, stiffness: 280, damping: 16 }) }, logoLand(t)));
+      fit();
+      paintName(t, { riseAt: nameAt, each, fill: 0 });
+      point(t, stops);
+      writeLine?.(t);
+      writeUrl?.(t);
+    };
+  },
+};
+
+export default pattern;

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;