kasaframe 0.1.1 → 0.1.4

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;

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

@@ -0,0 +1,91 @@
+import { applyStyle, clamp, combine } from "@kasaframe/core";
+import { textEm } from "@kasaframe/motion/moves";
+import { area, beatStops, cameraOk, decimalsOf, factRoll, fitOnce, glider, moving, node, sceneDrop, slam, slotsOf } from "../kit.ts";
+import type { HookNumber } from "./roll.ts";
+import type { Pattern } from "../types.ts";
+
+/**
+ * 결과가 서는 순간 — 숫자가 화면을 꽉 채우며 드롭(없으면 첫 박)에 쾅 내려앉고, 그 박에 테마 드롭이 터진다.
+ * 앉기 전엔 라벨이 먼저 찍혀 무엇의 숫자인지 알리고, 앉은 뒤엔 반전 칸이 숫자를 장면 끝까지 짚는다. 굴리지 않는다 — 결과 그 자체.
+ */
+const pattern: Pattern<HookNumber> = {
+  id: "hook-number.slam",
+  type: "hook-number",
+  does: "숫자가 화면을 꽉 채우며 드롭에 쾅 내려앉고, 라벨이 먼저 서고 반전 칸이 숫자를 짚는다",
+  energy: ["high"],
+  family: "slam",
+  camera: ["impact"],
+  bg: "stage",
+  aspects: ["16:9", "9:16", "1:1"],
+  dur: { min: 1.6, max: 5 },
+  fits(c) {
+    if (!Number.isFinite(c?.value)) return "value 가 수가 아니다";
+    if (typeof c.label !== "string" || !c.label.trim() || [...c.label].length > 24) return "label 이 비었거나 24자를 넘는다";
+    if (c.unit && [...c.unit].length > 6) return "unit 이 6자를 넘는다";
+    return true;
+  },
+  build(root, ctx, c, kit) {
+    const slots = slotsOf(kit);
+    const { w, h, vertical, u } = area(ctx, kit);
+    const dec = c.decimals ?? decimalsOf(c.value);
+    const text = `${c.prefix ?? ""}${factRoll(Infinity, { from: 0, to: c.value, at: 0, dur: 1, decimals: dec }).text}`;
+    const unit = c.unit ?? "";
+    const rowEm = textEm(text) + (unit ? 0.1 + 0.42 * textEm(unit) : 0);
+    // 화면을 꽉 — 폭 90%, 세로 화면은 높이 42% 까지
+    const numPx = Math.round(Math.min((w * 0.9) / rowEm, h * (vertical ? 0.42 : 0.62)));
+    const labelPx = Math.round(Math.max(52 * u, numPx * 0.13));
+    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;display:flex;flex-direction:column;align-items:center;gap:${Math.round(numPx * 0.06)}px`);
+    const labelBox = node(col, `position:relative;font-family:var(--kf-font-sans);font-size:${labelPx}px;font-weight:700;white-space:nowrap;line-height:1.2;height:1.2em`);
+    const label = node(labelBox, "color:var(--kf-ink)");
+    const row = node(col, `display:flex;align-items:baseline;gap:${Math.round(numPx * 0.06)}px;transform-origin:50% 60%`);
+    // 쾅 전엔 같은 숫자가 외곽선으로 제자리에 먼저 서 있다 — 무엇이 올지 보이고, 앉으면 꽉 찬 숫자가 그 위를 덮는다
+    const ghostRow = node(col, `position:absolute;display:flex;align-items:baseline;gap:${Math.round(numPx * 0.06)}px;visibility:hidden`);
+    node(ghostRow, `font-family:var(--kf-font-display);font-size:${numPx}px;font-weight:${weight};line-height:.95;letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:${Math.max(2, Math.round(numPx * 0.008))}px var(--kf-ink);white-space:pre;opacity:.5`, text);
+    if (unit) node(ghostRow, `font-family:var(--kf-font-display);font-size:${Math.round(numPx * 0.42)}px;font-weight:${weight};color:transparent;white-space:nowrap`, unit);
+    const numBox = node(row, "position:relative;color:var(--kf-ink)");
+    node(numBox, `font-family:var(--kf-font-display);font-size:${numPx}px;font-weight:${weight};line-height:.95;letter-spacing:-0.04em;white-space:pre`, text);
+    if (unit) node(row, `font-family:var(--kf-font-display);font-size:${Math.round(numPx * 0.42)}px;font-weight:${weight};color:var(--kf-accent-text, var(--kf-accent));white-space:nowrap`, unit);
+    kit.stage?.hero(row);
+    // 드롭 터짐은 화면 전체 층에 — 카메라 층(안전 영역)에 깔면 터짐이 네모 판으로 보인다
+    const burst = node(kit.stage?.box ?? root, "position:absolute;inset:0;pointer-events:none;z-index:50");
+
+    // 앉는 박 — 이 장면에 드롭이 있으면 그 드롭, 없으면 라벨이 다 찍힌 뒤 첫 박
+    const di = sceneDrop(ctx);
+    const labelDur = clamp([...c.label].length * 0.03, 0.25, 0.5);
+    const hits = kit.hits.length ? kit.hits : [0];
+    const at = di !== null ? ctx.beats.drop(di) : (hits.find((b) => b >= labelDur + 0.1) ?? labelDur + 0.15);
+    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 writeLabel = slots.write(label, { ctx, text: c.label, at: 0, dur: labelDur, seed: `${kit.seed}:l` });
+    const landed = slots.land(row, { ctx, at, seed: `${kit.seed}:land` });
+    // 짚개 — 쾅 전엔 라벨 ↔ 외곽선 자리(무엇의 숫자가 어디 오나), 쾅 뒤엔 숫자 ↔ 라벨을 박마다 번갈아 짚는다
+    const before = glider(host, [labelBox, ghostRow], { hub: true });
+    const after = glider(host, [numBox, labelBox], { hub: true });
+    const preStops = beatStops(kit.hits, labelDur, at - 0.2);
+    // 라벨은 그 글꼴로 재서 안전 영역 폭 92% 안에
+    const fitLabel = fitOnce(labelBox, w * 0.92, labelPx, c.label);
+    const postStops = beatStops(kit.hits, at + 0.25, ctx.dur);
+
+    return (t: number) => {
+      moving("hook-number.slam", ctx);
+      fitLabel();
+      writeLabel(t);
+      const s = dropPaint?.(t);
+      applyStyle(row, combine(slam(t, at), landed(t), s?.punch));
+      // 외곽선은 숫자 줄과 같은 자리에 — 처음 보일 때 숫자 줄 자리를 잰다(장면이 보인 뒤라 잴 수 있다)
+      ghostRow.style.visibility = t < at ? "visible" : "hidden";
+      if (t < at) {
+        ghostRow.style.left = `${row.offsetLeft}px`;
+        ghostRow.style.top = `${row.offsetTop}px`;
+      }
+      before(t, preStops, at - 0.16);
+      after(t, postStops);
+      if (s) applyStyle(host, s.shake);
+    };
+  },
+};
+
+export default pattern;

package/packages/patterns/src/index.ts

@@ -0,0 +1,38 @@
+import codeTerminal from "./code/terminal.ts";
+import compareBars from "./compare/bars.ts";
+import compareDuel from "./compare/duel.ts";
+import beforeAfterShrink from "./before-after/shrink.ts";
+import beforeAfterStrike from "./before-after/strike.ts";
+import barsRank from "./bars/rank.ts";
+import endLockup from "./end/lockup.ts";
+import endSlam from "./end/slam.ts";
+import flowGraph from "./flow/graph.ts";
+import hookNumberCounter from "./hook-number/counter.ts";
+import hookNumberRoll from "./hook-number/roll.ts";
+import hookNumberSlam from "./hook-number/slam.ts";
+import limitGauge from "./limit/gauge.ts";
+import listCards from "./list/cards.ts";
+import listCycle from "./list/cycle.ts";
+import mediaPanels from "./media/panels.ts";
+import quoteKaraoke from "./quote/karaoke.ts";
+import quoteSlam from "./quote/slam.ts";
+import screenFocus from "./screen/focus.ts";
+import stepsPath from "./steps/path.ts";
+import stepsStack from "./steps/stack.ts";
+import termRevealChips from "./term-reveal/chips.ts";
+import termRevealExpand from "./term-reveal/expand.ts";
+import timelineAxis from "./timeline/axis.ts";
+import toggleSimSwitch from "./toggle-sim/switch.ts";
+import trendColumns from "./trend/columns.ts";
+import trendDraw from "./trend/draw.ts";
+import wordsSlam from "./words/slam.ts";
+import titleMask from "./title/mask.ts";
+import titleSlam from "./title/slam.ts";
+import type { Pattern } from "./types.ts";
+
+// 감독이 Node 에서 meta·fits 로 고른다 — 여기 모인 패턴만 후보다. 장면 파일은 @kasaframe/patterns/<type>/<이름> 으로 하나씩 가져간다
+export const PATTERNS: readonly Pattern[] = [hookNumberRoll, hookNumberSlam, listCards, titleMask, barsRank, beforeAfterStrike, flowGraph, endLockup, endSlam, termRevealExpand, termRevealChips, compareBars, compareDuel, stepsPath, stepsStack, limitGauge, timelineAxis, quoteKaraoke, trendDraw, codeTerminal, wordsSlam, toggleSimSwitch, mediaPanels, screenFocus, titleSlam, listCycle, beforeAfterShrink, hookNumberCounter, quoteSlam, trendColumns];
+
+export { OBJECTS, objectFor, objectById, objectCss, objectsJson, cssColor, styleColor } from "./objects.ts";
+export type { VisualObject, ColorToken, Shape2d, Shape3d } from "./objects.ts";
+export type * from "./types.ts";