kasaframe 0.1.3 → 0.1.5

package/packages/themes/src/slots.ts

@@ -3,6 +3,7 @@
 // effects.ts 와 따로 두는 까닭: effects.ts 내보내기는 theme.json 효과 목록과 같아야 한다(테마 시험).
 import type { SceneCtx, Style } from "@kasaframe/core";
 import type { DropBurstState } from "@kasaframe/motion";
+import { worldOf } from "./name.ts";
 
 export type Paint = (t: number) => void;
 
@@ -40,7 +41,21 @@ const mods = import.meta.glob("../../../themes/*/slots.ts", { eager: true }) as
 
 const byId = new Map(Object.entries(mods).map(([path, mod]) => [path.split("/").at(-2)!, mod.slots ?? {}]));
 
-/** 테마 슬롯 — 없는 테마(npm 묶음에 안 든 테마 포함)나 슬롯을 안 채운 테마는 빈 객체 */
-export const themeSlots = (id: string | undefined | null): ThemeSlots => (id ? byId.get(id) ?? {} : {});
+// 변주의 움직임 빠르기(style.look.tempo) — 세계 코드는 그대로 두고 글 찍기·선 긋기에 주는 길이만 줄이고 늘린다. 너무 짧으면 글이 한 번에 찍혀 보여 하한을 둔다
+const paced = <O extends { ctx: SceneCtx; dur: number }>(o: O): O => {
+  const k = o.ctx.style?.look?.tempo ?? 1;
+  return k === 1 ? o : { ...o, dur: Math.max(0.12, o.dur / k) };
+};
+
+function withLook(s: ThemeSlots): ThemeSlots {
+  return {
+    ...s,
+    ...(s.write ? { write: (el, o) => s.write!(el, paced(o)) } : {}),
+    ...(s.trace ? { trace: (el, o) => s.trace!(el, paced(o)) } : {}),
+  };
+}
+
+/** 테마 슬롯 — 변주 이름이면 그 세계 슬롯. 없는 테마(npm 묶음에 안 든 테마 포함)나 슬롯을 안 채운 테마는 빈 객체 */
+export const themeSlots = (id: string | undefined | null): ThemeSlots => (id ? withLook(byId.get(worldOf(id)) ?? {}) : {});
 
 export const slotThemeIds = (): string[] => [...byId.keys()].sort();

package/packages/themes/src/types.ts

@@ -33,9 +33,97 @@ export interface ThemeManifest {
   /** 테마 폴더 기준 파일 이름. 기본 still.png · sample.mp4 */
   still?: string;
   sample?: string;
+  /** 변주가 바꿔도 되는 축과 범위 — 없으면 변주를 안 받는다(SPEC 9 변주) */
+  vary?: ThemeVary;
+  /** 고르기 태그 — 분위기·밝기·용도·2D/3D */
+  tags?: ThemeTags;
+}
+
+export type TextureKind = "none" | "grain" | "paper" | "noise" | "scan" | "halftone";
+
+/** theme.json vary — 세계가 허락한 축만 돈다. 안 적은 축은 세계 값 그대로 */
+export interface ThemeVary {
+  /** 받는 밝기. 안 주면 세계 scheme 하나 */
+  scheme?: ("light" | "dark")[];
+  /** 강조 색상 범위들(OKLCH 도, [시작, 끝] — 끝이 작으면 360 을 넘어 돈다). 안 주면 세계 색상 그대로 */
+  hue?: [number, number][];
+  /** 색 있는 잉크 채도 배수 */
+  chroma?: [number, number];
+  /** 무채색에 얹는 빛깔 채도(OKLCH C) */
+  tint?: [number, number];
+  /** 바탕 명도(OKLCH L) — 밝음·어두움마다 */
+  bg?: { light?: [number, number]; dark?: [number, number] };
+  /** 늘 그대로 두는 색 열쇠 */
+  keep?: string[];
+  /** 색상은 두고 명도·채도만 따라가는 색 열쇠(풀·물 같은 재료 색) */
+  fixedHue?: string[];
+  /**
+   * 밝기마다 세계가 정해 둔 색 한 벌 — 브랜드가 라이트·다크를 따로 정한 세계(두 벌이 서로 거울상이 아니라 뒤집어 옮기면 정본 값이 안 나온다).
+   * 그 밝기 판은 이 벌을 원점으로 삼고, 안 적은 축(바탕 빛깔·글 명도·강조 색상)은 그 벌 값 그대로. 열쇠는 style.json colors 와 같다
+   */
+  palettes?: Partial<Record<"light" | "dark", Record<string, string>>>;
+  /** 글꼴 짝 id(packages/themes/kit/fonts.json)·`tag:<태그>`·`base`(세계 글꼴) */
+  fonts?: string[];
+  /** 세 글꼴 스택을 짝의 고정폭 하나로(한 글꼴 HUD) — 그러면 monoAll 짝만 받는다 */
+  monoAll?: boolean;
+  /** 받는 질감 */
+  texture?: TextureKind[];
+  /** 선 굵기 배수 범위 */
+  stroke?: [number, number];
+  /** 판 모서리(radius.md px) 범위 — sm·lg 는 세계 비율로 따라간다 */
+  radius?: [number, number];
+  /** 움직임 빠르기 배수 범위(1 보다 크면 빠르다) */
+  tempo?: [number, number];
+  /** 장식·입자 밀도 배수 범위 — 세계 코드가 look.density·--kf-density 를 읽을 때만 적는다 */
+  density?: [number, number];
+}
+
+export interface ThemeTags {
+  /** 분위기 낱말(한국어) */
+  mood: string[];
+  light: "light" | "dark";
+  /** 맞는 내용·용도 낱말 */
+  use: string[];
+  dims: "2D" | "3D";
+}
+
+/** 변주를 지은 손잡이 값 — 다시 지을 때·서로 다름을 잴 때 */
+export interface VariantParams {
+  scheme: "light" | "dark";
+  bgL: number;
+  tint: { h: number; c: number };
+  inkL: number;
+  hue: number;
+  chroma: number;
+  fonts: string;
+  texture: { kind: TextureKind; amount: number };
+  stroke: number;
+  /** radius.md px, 세계가 안 받으면 null */
+  radius: number | null;
+  tempo: number;
+  density: number;
+}
+
+/** themes/<세계>/variants/<id>.json — 데이터만. 코드는 세계 것 */
+export interface VariantManifest {
+  id: string;
+  world: string;
+  /** 생김새가 떠오르는 영어 이름 */
+  name: string;
+  /** 한 줄 한국어 설명 */
+  desc: string;
+  params: VariantParams;
+  /** 세계 style.json 위에 덮는 판 — colors 는 통째, 나머지는 칸마다 */
+  style: Partial<Pick<KfStyle, "scheme" | "colors" | "fonts" | "radius" | "look">> & { type?: Partial<KfStyle["type"]> };
+  tags: ThemeTags;
+  check: { ok: boolean; at: string; colors: Record<string, number>; frame: string; pattern?: string };
 }
 
 export interface Theme extends ThemeManifest {
+  /** 세계 id — 변주가 아니면 id 와 같다 */
+  world: string;
+  /** 변주면 그 매니페스트, 세계 자신이면 null */
+  variant: VariantManifest | null;
   dir: string;
   style: KfStyle;
   /** THEME.md 원문 — 비유·맞는 내용·금지 */
@@ -47,6 +135,7 @@ export interface Theme extends ThemeManifest {
 /** 작업실·plan 이 목록에 쓰는 꼴. still·sample 은 절대 경로(없으면 null) */
 export interface ThemeCard {
   id: string;
+  world: string;
   name: string;
   metaphor: string;
   status: ThemeStatus;

package/packages/themes/src/vary.ts

@@ -0,0 +1,291 @@
+// 변주 — 세계 하나에서 겉모습만 바꾼 판을 데이터로 뽑는다(SPEC 9 변주). 코드는 세계 것을 그대로 쓰고, 여기서는 style 위에 덮을 판만 짓는다.
+import { rand, randRange, type KfStyle } from "@kasaframe/core";
+import { hueDist, labOf, parseColor } from "./color.ts";
+import { type FontPair, fontPairs, titleWeight } from "./fonts.ts";
+import { lchOf, NEUTRAL_C, transformPalette } from "./palette.ts";
+import type { TextureKind, ThemeManifest, ThemeTags, ThemeVary, VariantManifest, VariantParams } from "./types.ts";
+
+/** 세계가 허락한 글꼴 짝 — 「base」는 세계 글꼴 그대로 */
+export function allowedFonts(vary: ThemeVary): string[] {
+  const all = fontPairs().filter((p) => !vary.monoAll || p.monoAll);
+  const want = vary.fonts ?? ["base"];
+  // tag:sans+geometric 은 두 태그를 다 가진 짝 — 짝이 수백이라 태그 하나로는 결이 다른 무리까지 딸려 온다
+  const ids = want.flatMap((w) => (w === "base" ? ["base"] : w.startsWith("tag:") ? all.filter((p) => w.slice(4).split("+").every((t) => p.tags.includes(t))).map((p) => p.id) : all.some((p) => p.id === w) ? [w] : []));
+  return [...new Set(ids)];
+}
+
+// 질감마다 기본 세기 — 엔진이 깐 층의 불투명도
+const TEXTURE_AMOUNT: Record<TextureKind, number> = { none: 0, grain: 0.55, paper: 0.8, noise: 0.35, scan: 0.22, halftone: 0.16 };
+
+const BG_L = { light: [0.93, 0.99], dark: [0.12, 0.22] } as const;
+// 어두운 바탕은 같은 채도라도 빛깔이 덜 보인다 — 거기서는 무채색 빛깔을 더 얹는다
+const DARK_TINT = 1.7;
+const INK_L = { light: [0.14, 0.26], dark: [0.91, 0.97] } as const;
+
+/** 세계 자신 — 변주를 잴 때의 원점 */
+export function baseParams(style: KfStyle): VariantParams {
+  const bg = lchOf(style.colors.bg);
+  return {
+    scheme: style.scheme,
+    bgL: bg.l,
+    tint: { h: bg.h, c: bg.c },
+    inkL: lchOf(style.colors.ink).l,
+    hue: lchOf(style.colors.accent).h,
+    chroma: 1,
+    fonts: "base",
+    texture: style.look?.texture ?? { kind: "none", amount: 0 },
+    stroke: style.look?.stroke ?? 1,
+    radius: null,
+    tempo: style.look?.tempo ?? 1,
+    density: style.look?.density ?? 1,
+  };
+}
+
+const inRanges = (h: number, ranges: [number, number][]) => ranges.some(([a, b]) => (a <= b ? h >= a && h <= b : h >= a || h <= b));
+
+function sampleHue(seed: string, i: number, ranges: [number, number][]): number {
+  const span = ranges.map(([a, b]) => (a <= b ? b - a : 360 - a + b));
+  let x = rand(seed, i) * span.reduce((s, v) => s + v, 0);
+  for (const [k, [a]] of ranges.entries()) {
+    if (x <= span[k]) return (a + x) % 360;
+    x -= span[k];
+  }
+  return ranges[0][0];
+}
+
+/** 그 밝기의 원점 색 — 세계가 밝기마다 한 벌을 정해 뒀으면(vary.palettes) 그 벌, 세계 자신의 밝기면 세계 색. 안 정한 세계는 null(세계 색을 옮긴다) */
+export function paletteOf(style: KfStyle, vary: ThemeVary, scheme: "light" | "dark"): KfStyle["colors"] | null {
+  if (!vary.palettes) return null;
+  if (scheme === style.scheme) return style.colors;
+  return (vary.palettes[scheme] as KfStyle["colors"] | undefined) ?? null;
+}
+
+/** 손잡이 값 하나 — 세계가 안 받는 축은 세계 값 */
+export function sampleParams(style: KfStyle, vary: ThemeVary, seed: string, n: number): VariantParams {
+  const base = baseParams(style);
+  const r = (k: number, lo: number, hi: number) => randRange(seed, n * 32 + k, lo, hi);
+  const pickOf = <T>(k: number, items: readonly T[]): T => items[Math.min(items.length - 1, Math.floor(rand(seed, n * 32 + k) * items.length))];
+  const scheme = pickOf(0, vary.scheme ?? [style.scheme]);
+  const own = paletteOf(style, vary, scheme);
+  const origin = own ? baseParams({ ...style, scheme, colors: own }) : null;
+  const bgR = vary.bg?.[scheme] ?? (origin ? [origin.bgL, origin.bgL] : BG_L[scheme]);
+  const hue = vary.hue ? sampleHue(seed, n * 32 + 1, vary.hue) : (origin ?? base).hue;
+  // 무채색 빛깔은 반쯤은 강조색 쪽(한 집안), 반쯤은 아무 쪽
+  const tintH = rand(seed, n * 32 + 2) < 0.5 ? (hue + r(3, -30, 30) + 360) % 360 : r(4, 0, 360);
+  const tex = pickOf(5, vary.texture ?? [base.texture.kind]);
+  const chroma = vary.chroma ? r(10, vary.chroma[0], vary.chroma[1]) : 1;
+  // 바탕이 색 잉크인 세계는 바탕이 강조색과 같은 각도로 돌아야 모눈·선과 한 벌로 남는다 — tint 축은 무채색 바탕 세계 것
+  // 정해 둔 벌이 있으면 바탕 빛깔·글 명도는 그 벌의 것 — 브랜드 무채색(푸른 회색)에 아무 빛깔이나 얹지 않는다
+  const tint = origin && !vary.tint
+    ? origin.tint
+    : base.tint.c >= NEUTRAL_C
+      ? { h: (base.tint.h + hue - base.hue + 360) % 360, c: base.tint.c * chroma }
+      : { h: tintH, c: vary.tint ? r(7, vary.tint[0], vary.tint[1]) * (scheme === "dark" ? DARK_TINT : 1) : base.tint.c };
+  const q = (v: number) => +v.toFixed(4);
+  return {
+    scheme,
+    bgL: q(r(6, bgR[0], bgR[1])),
+    tint: { h: q(tint.h), c: q(tint.c) },
+    inkL: q(origin ? origin.inkL : scheme === style.scheme && rand(seed, n * 32 + 8) < 0.5 ? base.inkL : r(9, INK_L[scheme][0], INK_L[scheme][1])),
+    hue: q(hue),
+    chroma: q(chroma),
+    fonts: pickOf(11, allowedFonts(vary)),
+    texture: { kind: tex, amount: tex === base.texture.kind ? base.texture.amount || TEXTURE_AMOUNT[tex] : TEXTURE_AMOUNT[tex] },
+    stroke: vary.stroke ? +r(12, vary.stroke[0], vary.stroke[1]).toFixed(2) : base.stroke,
+    radius: vary.radius ? Math.round(r(13, vary.radius[0], vary.radius[1])) : null,
+    tempo: vary.tempo ? +r(14, vary.tempo[0], vary.tempo[1]).toFixed(2) : base.tempo,
+    density: vary.density ? +r(15, vary.density[0], vary.density[1]).toFixed(2) : base.density,
+  };
+}
+
+/** 손잡이 값 → 세계 style 위에 덮을 판. 색이 검사를 못 넘으면 bad 에 까닭 */
+export function overlayOf(style: KfStyle, manifest: Pick<ThemeManifest, "vary">, p: VariantParams): { style: VariantManifest["style"]; bad: string[]; measured: Record<string, number> } {
+  const vary = manifest.vary ?? {};
+  const pal = transformPalette(paletteOf(style, vary, p.scheme) ?? style.colors, p, { keep: vary.keep, fixedHue: vary.fixedHue });
+  const out: VariantManifest["style"] = { scheme: p.scheme, colors: pal.colors as KfStyle["colors"] };
+  if (p.fonts !== "base") {
+    const f = fontPairs().find((x) => x.id === p.fonts);
+    if (!f) return { style: out, bad: [`글꼴 짝 ${p.fonts} 이 없다`], measured: pal.measured };
+    // 라이선스·출처는 짝 목록의 것 — style.json 의 face 는 core 계약(family·src·weight) 그대로
+    const faces = f.faces.map(({ license: _l, source: _s, ...face }) => face);
+    out.fonts = vary.monoAll ? { sans: f.mono, display: f.mono, mono: f.mono, faces } : { sans: f.sans, display: f.display, mono: f.mono, faces };
+    out.type = { weightDisplay: titleWeight(f, vary.monoAll), weightBody: f.weightBody, tracking: f.tracking };
+  }
+  if (p.radius !== null) {
+    const md0 = style.radius.md || 12;
+    const k = p.radius / md0;
+    out.radius = { sm: Math.round((style.radius.sm || md0 * 0.6) * k), md: p.radius, lg: Math.round((style.radius.lg || md0 * 1.6) * k), pill: style.radius.pill };
+  }
+  out.look = {
+    ...(p.texture.kind !== "none" ? { texture: p.texture } : {}),
+    ...(p.stroke !== 1 ? { stroke: p.stroke } : {}),
+    ...(p.tempo !== 1 ? { tempo: p.tempo } : {}),
+    ...(p.density !== 1 ? { density: p.density } : {}),
+  };
+  return { style: out, bad: pal.bad, measured: pal.measured };
+}
+
+/** 세계 style + 변주 판 → 프로젝트 style.json 으로 쓸 통째 */
+export function mergeVariant(style: KfStyle, v: Pick<VariantManifest, "id" | "world" | "name" | "style" | "params">): KfStyle {
+  const o = v.style;
+  const k = v.params.tempo || 1;
+  const durations = style.motion.durations && k !== 1 ? Object.fromEntries(Object.entries(style.motion.durations).map(([n, d]) => [n, +(d / k).toFixed(3)])) : style.motion.durations;
+  return {
+    ...structuredClone(style),
+    name: `${v.world}/${v.id}`,
+    label: `${style.label} · ${v.name}`,
+    ...(o.scheme ? { scheme: o.scheme } : {}),
+    ...(o.colors ? { colors: { ...o.colors } } : {}),
+    ...(o.fonts ? { fonts: structuredClone(o.fonts) } : {}),
+    type: { ...style.type, ...o.type },
+    ...(o.radius ? { radius: { ...o.radius } } : {}),
+    motion: { ...style.motion, ...(durations ? { durations: durations as KfStyle["motion"]["durations"] } : {}) },
+    look: { ...style.look, ...o.look },
+  };
+}
+
+// --- 서로 다름: 색이 먼저(바탕·강조), 글꼴·질감이 그다음, 선·모서리는 덤
+
+export interface Candidate {
+  params: VariantParams;
+  overlay: VariantManifest["style"];
+  measured: Record<string, number>;
+  /** 바탕·강조·잉크 OKLab — 거리 잴 때마다 다시 풀지 않게 */
+  lab: Record<"bg" | "accent" | "ink", [number, number, number]>;
+}
+
+const candidate = (params: VariantParams, overlay: VariantManifest["style"], measured: Record<string, number>): Candidate => {
+  const c = overlay.colors!;
+  return { params, overlay, measured, lab: { bg: labOf(parseColor(c.bg)), accent: labOf(parseColor(c.accent)), ink: labOf(parseColor(c.ink)) } };
+};
+
+export function distance(a: Candidate, b: Candidate): number {
+  const d = (k: "bg" | "accent" | "ink") => Math.hypot(a.lab[k][0] - b.lab[k][0], a.lab[k][1] - b.lab[k][1], a.lab[k][2] - b.lab[k][2]);
+  return (
+    1.6 * d("bg") +
+    1.4 * d("accent") +
+    0.5 * d("ink") +
+    (a.params.fonts !== b.params.fonts ? 0.12 : 0) +
+    (a.params.texture.kind !== b.params.texture.kind ? 0.08 : 0) +
+    0.06 * Math.abs(a.params.stroke - b.params.stroke) +
+    (a.params.radius !== null && b.params.radius !== null ? 0.004 * Math.abs(a.params.radius - b.params.radius) : 0)
+  );
+}
+
+/**
+ * 후보를 많이 굴려 색 검사를 넘은 것만 두고, 이미 고른 것들과 가장 먼 것부터 차례로 늘어놓는다(먼 점 고르기).
+ * 앞의 n 개가 뽑을 판이고 뒤는 굽기 검사에서 떨어진 판의 자리를 메울 예비다
+ */
+export function rankCandidates(style: KfStyle, manifest: Pick<ThemeManifest, "vary">, o: { seed: string; pool?: number; taken?: Candidate[] }): Candidate[] {
+  const vary = manifest.vary ?? {};
+  const base = baseParams(style);
+  const ok: Candidate[] = [];
+  for (let i = 0; i < (o.pool ?? 400); i++) {
+    const params = sampleParams(style, vary, o.seed, i);
+    const r = overlayOf(style, manifest, params);
+    if (!r.bad.length) ok.push(candidate(params, r.style, r.measured));
+  }
+  const near = ok.map((c) => Math.min(...[candidate(base, { colors: style.colors }, {}), ...(o.taken ?? [])].map((x) => distance(c, x))));
+  const out: Candidate[] = [];
+  const left = new Set(ok.keys());
+  while (left.size) {
+    let best = -1;
+    for (const i of left) if (best < 0 || near[i] > near[best]) best = i;
+    left.delete(best);
+    out.push(ok[best]);
+    for (const i of left) near[i] = Math.min(near[i], distance(ok[i], ok[best]));
+  }
+  return out;
+}
+
+// --- 이름: 바탕 낱말 + 강조 낱말(겹치면 글꼴·질감 낱말)
+
+const ACCENT_WORDS: [number, string, string][] = [
+  [15, "rose", "장밋빛"], [35, "coral", "산호색"], [55, "orange", "주황"], [78, "amber", "호박색"], [100, "gold", "금빛"],
+  [125, "lime", "라임색"], [150, "green", "초록"], [178, "jade", "옥색"], [200, "teal", "청록"], [222, "cyan", "하늘빛 청록"],
+  [242, "sky", "하늘색"], [262, "blue", "파랑"], [282, "indigo", "남색"], [305, "violet", "보라"], [330, "plum", "자두색"], [350, "magenta", "자홍"], [361, "pink", "분홍"],
+];
+
+function accentWord(h: number): [string, string] {
+  const w = ACCENT_WORDS.find(([max]) => h < max) ?? ACCENT_WORDS[0];
+  return [w[1], w[2]];
+}
+
+function bgWord(p: VariantParams): [string, string] {
+  const tinted = p.tint.c >= (p.scheme === "dark" ? 0.02 : 0.012);
+  const h = p.tint.h;
+  const fam = !tinted ? "neutral" : h < 40 || h >= 340 ? "pink" : h < 100 ? "warm" : h < 170 ? "green" : h < 280 ? "cool" : "violet";
+  const light: Record<string, [string, string]> = {
+    neutral: p.bgL > 0.975 ? ["snow", "새하얀"] : ["chalk", "분필빛"],
+    pink: ["blush", "연분홍"],
+    warm: p.bgL > 0.96 ? ["cream", "크림색"] : ["sand", "모래빛"],
+    green: ["sage", "세이지"],
+    cool: ["frost", "서리빛"],
+    violet: ["lilac", "연보라"],
+  };
+  const dark: Record<string, [string, string]> = {
+    neutral: p.bgL < 0.14 ? ["night", "검은"] : ["slate", "짙은 회색"],
+    pink: ["wine", "포도주빛"],
+    warm: ["cocoa", "코코아빛"],
+    green: ["forest", "짙은 숲빛"],
+    cool: p.tint.h < 230 ? ["deep", "깊은 청록"] : ["navy", "짙은 남색"],
+    violet: ["dusk", "해 질 녘 보랏빛"],
+  };
+  return (p.scheme === "dark" ? dark : light)[fam];
+}
+
+const TEXTURE_KO: Record<TextureKind, [string, string]> = {
+  none: ["", ""], grain: ["grain", "고운 필름 입자"], paper: ["paper", "종이 결"], noise: ["noise", "거친 잡음"], scan: ["scan", "주사선"], halftone: ["dots", "망점"],
+};
+
+const FONT_WORD = (p: FontPair | undefined): string => (!p ? "" : p.tags.includes("serif") ? "serif" : p.tags.includes("pixel") ? "pixel" : p.tags.includes("rounded") ? "round" : p.tags.includes("mono") ? "mono" : p.tags.includes("bold") ? "bold" : p.id.split("-")[0]);
+
+// 이름·태그는 손잡이가 아니라 화면에 실린 색으로 — 세계가 강조·바탕을 묶어 둔 판(회로 기판의 금 강조)은 hue 를 굴려도 그 색이 안 돈다
+function seen(p: VariantParams, colors?: Record<string, string>): VariantParams {
+  if (!colors?.bg || !colors.accent) return p;
+  const bg = lchOf(colors.bg);
+  return { ...p, bgL: bg.l, tint: { h: bg.h, c: bg.c }, hue: lchOf(colors.accent).h };
+}
+
+export function nameVariant(params: VariantParams, taken: Set<string>, colors?: Record<string, string>): { id: string; name: string; desc: string } {
+  const p = seen(params, colors);
+  const [bg, bgKo] = bgWord(p);
+  const [acc, accKo] = accentWord(p.hue);
+  const pair = fontPairs().find((x) => x.id === p.fonts);
+  const [tex, texKo] = TEXTURE_KO[p.texture.kind];
+  const tries = [`${bg}-${acc}`, ...(tex ? [`${bg}-${acc}-${tex}`] : []), ...(pair ? [`${bg}-${acc}-${FONT_WORD(pair)}`] : [])];
+  let id = tries.find((t) => !taken.has(t));
+  for (let i = 2; !id; i++) if (!taken.has(`${bg}-${acc}-${i}`)) id = `${bg}-${acc}-${i}`;
+  const name = id.split("-").map((w) => w[0].toUpperCase() + w.slice(1)).join(" ");
+  const desc = [`${bgKo} 바탕에 ${accKo} 강조`, pair ? pair.ko.split(/\s*—\s*/)[0] : "", texKo].filter(Boolean).join(" · ");
+  return { id, name, desc };
+}
+
+// 글꼴 짝 태그 → 변주 분위기 낱말. kf theme suggest 가 요청 낱말을 이 낱말과도 견준다
+const FONT_MOOD: [string, string][] = [
+  ["serif", "고전적"], ["classic", "고전적"], ["elegant", "우아한"], ["traditional", "전통"], ["brush", "붓글씨"], ["newspaper", "신문"],
+  ["rounded", "귀여운"], ["playful", "발랄한"], ["comic", "만화"], ["hand", "손글씨"], ["pixel", "레트로"], ["retro", "레트로"],
+  ["mono", "기술적"], ["tech", "기술적"], ["futuristic", "미래적"], ["modern", "모던"], ["industrial", "산업"], ["signage", "안내판"],
+  ["calm", "차분한"], ["strong", "강한"], ["neon", "네온"],
+];
+
+/** 변주 태그 — 세계 태그에 색·질감·글꼴이 주는 분위기를 더한다 */
+export function variantTags(world: ThemeTags, params: VariantParams, colors?: Record<string, string>): ThemeTags {
+  const p = seen(params, colors);
+  const mood = new Set(world.mood);
+  mood.add(p.scheme === "dark" ? "어두운" : "밝은");
+  if (inRanges(p.hue, [[20, 100]])) mood.add("따뜻한");
+  if (inRanges(p.hue, [[180, 290]])) mood.add("차가운");
+  if (p.chroma >= 1.12) mood.add("선명한");
+  if (p.chroma <= 0.85) mood.add("차분한");
+  if (["paper", "grain", "halftone", "noise"].includes(p.texture.kind)) mood.add("아날로그");
+  if (p.texture.kind === "scan") mood.add("레트로");
+  const tags = fontPairs().find((x) => x.id === p.fonts)?.tags ?? [];
+  for (const [tag, word] of FONT_MOOD) if (tags.includes(tag)) mood.add(word);
+  return { ...world, mood: [...mood], light: p.scheme };
+}
+
+export const candidateOf = candidate;
+
+export const hueOf = (colors: Record<string, string>): number => lchOf(colors.accent).h;
+export { hueDist };

package/presets/kawaii-pastel.json

@@ -35,12 +35,12 @@
       },
       {
         "family": "JetBrains Mono",
-        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5/files/jetbrains-mono-latin-wght-normal.woff2",
+        "src": "https://cdn.jsdelivr.net/npm/@fontsource-variable/jetbrains-mono@5.3.0/files/jetbrains-mono-latin-wght-normal.woff2",
         "weight": "100 800"
       },
       {
         "family": "Jua",
-        "src": "https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/jua/Jua-Regular.ttf",
+        "src": "https://cdn.jsdelivr.net/gh/google/fonts@bd8f81ddb5c74d5c8897b36ad88b440266245103/ofl/jua/Jua-Regular.ttf",
         "weight": "400"
       }
     ]

package/skills/kasaframe/SKILL.md

@@ -9,6 +9,7 @@ argument-hint: "[만들 영상 한 줄]"
 # kasaframe — 말 한 줄로 영상까지
 
 명령은 `kf <명령>` — `npm i -g kasaframe` 로 깔았으면 어느 폴더에서나. `kf` 가 PATH 에 없고 이 스킬 폴더가 레포 안의 링크면(실제 경로의 두 단계 위가 레포 뿌리) 그 뿌리에서 `npx kf <명령>`. 둘 다 아니면 사람에게 `npm i -g kasaframe && kf setup` 을 알린다. 처음이면 `kf doctor` 로 ffmpeg·크롬·librosa·OG 키를 본다.
+표준 오류에 `[kasaframe] 새 판 <최신> (지금 <지금>) — kf update` 줄이 보이면 하던 일 사이에(렌더 도중이면 끝난 뒤) `kf update --yes` 로 올리고 이어 간다. 종료 코드가 0 이 아니면 찍힌 명령을 사람에게 알리고 지금 판으로 계속한다.
 규칙·장면 쓰는 법·고치는 법의 정본은 **`docs/AGENTS.md`**(이 스킬 폴더 `kf skill path` 의 두 단계 위) — 장면을 쓰기 전에 0절과 3절을 읽는다.
 
 ## 순서

package/themes/blueprint/THEME.md

@@ -0,0 +1,64 @@
+# 청사진 도면 `blueprint`
+
+**비유: 정보가 청사진 도면으로 제도된다 — 펜이 외형을 긋고, 치수선이 숫자를 재고, 절단선이 지나가며 속이 단면으로 드러난다.** 1925 미 해군 공창 시안타입 도면처럼 프러시안 블루 종이에 흰 선. 숫자는 늘 치수로 앉는다(보조선 · 화살촉 치수선 · 그 위 수). 선 종류가 곧 뜻이고, 드롭은 청사진을 찍는 노광 한 번이다.
+
+## 기술 낱말이 이 세계에서 되는 것
+
+| 기술 | 도면 | 화면에서 |
+|---|---|---|
+| 게이트웨이 한 주소 | 기준면 A — 모든 치수를 재는 한 기준 | `balloon` kind datum + 그 면에서 잰 `dimension` |
+| 공급자(회사) | 부품 — 품번 풍선이 붙은 판 | `penLine`(외형) + `balloon` |
+| 모델 | 부품의 치수 · 단면 길이 | 단면 A–A 에서 `hatch` 길이 = 모델 수, `dimension` 이 잰다 |
+| 요청 | 조립선(중심선)을 따라 들어와 붙는 부품 | `penLine` center + 부품이 그 선을 따라 옮겨 간다 |
+| 라우팅 | 같은 축에 끼우는 부품을 바꾼다 | 새 부품은 외형선, 지난 부품은 가상선 |
+| 폴백 | 가상선(이점쇄선) — 움직이는 부품의 다른 자리 | `penLine` kind phantom |
+| 캐시 | 「상세도 참조」 — 다시 그리지 않고 이미 그린 칸을 가리킨다 | `balloon` 으로 앞 칸을 짚는다 |
+| 제도하는 손 | T자 — 지금 긋는 줄로 옮겨 가는 자 | `tSquare` |
+| 지연 | 걸린 시간 = 막대 길이, 해칭이 꼭 그 시간 동안 찬다 | `hatch`(dur = 걸린 초) + `dimension` |
+| 비용 | 가격 = 길이(척도) | 정가 막대 vs 같은 자리 가상선 안 1/10 해칭 |
+| 가격 변경 | 개정 — 빨간 색연필 구름과 Δ | `revisionCloud` |
+| 시간대 | 24 시간 자(눈금) 위 잘린 구간 | `penLine` 눈금 + `hatch` + `dimension` |
+
+## 맞는 내용·용도
+
+- 구조·크기·비교가 있는 기술 내용 — 구성 요소(부품)와 그 관계, 수치 비교(길이로 잰다), 바뀐 점(개정), 내부 구성(단면).
+- 용도: 설명(explainer)·공개(launch)·홍보(promo)·시연(demo)·쇼츠(shorts). 마디마다 도면 한 장(칸), 드롭에 `exposure`.
+- 화면 글은 부품 이름·주소·모델 ID·숫자·짧은 낱말. 라틴 글은 Barlow Condensed(좁은 제도 고딕), 수·ID 는 B612 Mono, 한글은 Pretendard.
+
+## 금지
+
+- 청색 바탕·흰 선·빨간 색연필 밖의 색. 빨강은 개정 구름·Δ·바뀐 수 하나에만.
+- 그림자·그라데이션·흐림·빛 번짐·종이결·접힘·얼룩. 면은 단색, 선은 선 종류의 굵기 그대로.
+- 원근·기울어진 투상·회전하는 카메라. 정투상 평면뿐, 카메라 이동 없음(구도는 컷).
+- 치수 없이 떠 있는 큰 숫자. 숫자는 치수선 위에 앉는다(큰 숫자 하나도 긴 치수로).
+- 뜻 없는 바탕 움직임 — 흐르는 모눈·떠다니는 선. 모눈(`draftSheet`)은 서 있고, 움직이는 것은 긋는 펜 끝·자라는 치수·차오르는 해칭·옮겨 가는 부품뿐.
+- 지어낸 도면 번호·척도·서명. 표제란 칸에는 실제 값(이름·주소·날짜)만.
+- 슬로건·감성 문장.
+
+## 움직임
+
+- 쉬지 않는다: 제도하는 순서가 화면을 잇는다 — 중심선 → 외형선(펜 끝 점이 보인다) → 보조선 → 치수선이 가운데서 양쪽으로 → 수 → 해칭 → 글씨(안내선 먼저). 그리고 T자가 다음에 그을 줄로 늘 미끄러져 간다(흰 가는 선만으로는 화면 차가 작아 멈춘 화면으로 잡힌다).
+- 구도는 마디마다 바꾼다: 도면 한 장 = 칸 하나(분해도 → 단면 A–A → 기준면 판 → 축과 부품 → 조립 …). 컷은 `display:none`.
+- 박마다 큰 사건 하나: 부품 몇이 제도되거나, 치수가 뻗거나, 절단선이 지나가거나, 해칭이 차거나, 개정 구름이 둘러친다.
+- 드롭은 노광 — 흰 섬광 한 번과 램프 띠, 그 순간 긴 치수가 큰 수를 잰다.
+
+## 효과
+
+같은 레포 안에서는 `effects.ts` 를 바로, 프로젝트에서는 `fx("blueprint")`. layer 는 `build` 에서 만들고 `(t) => …` 에서 부른다. 한 장면은 보통 `draftSheet`(맨 아래) → `tSquare` → 도면 칸들 → `exposure`(드롭 장면 맨 위) 순서로 쌓는다. T자는 장면 하나에 하나, 박마다 그 박에 긋는 줄 높이를 `stops` 로 준다 — 화면이 쉬지 않는 몫을 제도하는 손이 진다. 흔들림은 도면 칸 틀에만(종이째 흔들면 가장자리에 페이지 검정이 비친다).
+
+| 효과 | 꼴 | 하는 일 |
+|---|---|---|
+| `draftSheet` | layer | 청사진 종이·제도 모눈·테두리, 서 있다 |
+| `tSquare` | layer | T자 — 지금 긋는 줄 높이로 미끄러져 가는 눈금 자(`stops` 의 [초, y]) |
+| `penLine` | layer | 제도선 — `shapes`(line·poly·rect·circle)를 차례로 긋는다, `kind` 선 종류, `kind: "cut"` + `letter` 면 절단선 A … A |
+| `dimension` | layer | 치수 — 보조선·치수선·화살촉, 그동안 수가 값까지 잰다(`text` 면 낱말) |
+| `hatch` | layer | 단면 해칭 — 45° 선이 한쪽부터 차오른다 |
+| `balloon` | layer | 품번 풍선·기준면 표(`kind: "datum"`) |
+| `revisionCloud` | layer | 빨간 색연필 개정 구름과 Δ |
+| `titleBlock` | layer | 표제란 — 칸이 그어지고 이름·값이 찍힌다 |
+| `lettering` | layer | 제도 글씨 — 안내선 먼저, 한 자씩 |
+| `exposure` | layer | 드롭 노광 — 섬광·램프 띠, 흔들림을 돌려준다 |
+
+색 칸: `grid`·`gridMajor` 는 제도 모눈(가는 칸·다섯 칸마다 굵은 칸). 변주는 바탕·선·색연필·모눈을 한 벌로 바꾼다(청사진 → 갈색 세피아 인화·흑백 디아조 같은 계열).
+
+견본: `sample/` — OpenGateway 소개 15초(docs/briefs/og-intro-15s.md), 곡 kawaii-friends.mp3 4–19초(드롭 7.34초). 부품 아홉 분해도와 품번 풍선 → 절단선 A–A → 단면 A–A(해칭 길이 = 모델 수, 치수가 잰다) → 기준면 A 판 위 주소와 끝점 구멍 넷·두 형식 치수 → 같은 축에 박마다 다른 모델 부품(지난 것은 가상선) → 분해도가 조립된다 → 드롭 노광, 긴 치수가 102 모델·한 주소를 잰다 → 24 시간 자 00–10 해칭·개정 구름 −90% → 정가 막대와 가상선 안 1/10 → 첫 토큰 셋이 그 ms 동안 해칭으로 찬다 → 표제란 끝 카드.