@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page-canvas/bubble-path.ts

@@ -0,0 +1,190 @@
+/**
+ * 말풍선 = 몸통 + 꼬리가 이어진 **하나의 닫힌 path**.
+ *
+ * 왜 하나의 path인가
+ * ------------------
+ * 꼬리를 별도 도형으로 얹고 몸통의 테두리를 fill로 "덮는" 방식은 반드시 깨진다.
+ * 라운드·스트로크·안티에일리어싱이 조금만 어긋나도 이음매가 드러난다. 몸통과 꼬리를
+ * 한 path로 뽑으면 fill/stroke가 그냥 이어지므로 덮을 테두리도 죽일 라운드도 없다.
+ *
+ * 꼬리는 각도가 아니라 **끝점(tip)** 으로 잡는다
+ * ---------------------------------------------
+ * tip을 자유 좌표로 두고, 둘레에서 tip에 가장 가까운 지점을 찾아 그 자리에 꼬리를
+ * 끼워 넣는다. tip을 360도 어디로 끌어도 꼬리는 항상 몸통에 붙어 있고, 모서리에
+ * 걸치면 두 변에 걸친 부리가 된다 — Canva/미리캔버스의 꼬리 드래그가 이 방식이다.
+ *
+ * 이 파일은 디컴포저 쪽 ``bubble_path.py``의 쌍둥이다. 두 구현이 같은 파라미터
+ * (``custom.bubble``)로 같은 path를 내야 편집기 렌더가 원본 문서와 어긋나지 않는다.
+ */
+
+export type Pt = [number, number];
+
+export type BubbleParams = {
+  /** 몸통 크기 (꼬리·스트로크 여백 pad는 제외한 순수 몸통). */
+  w: number;
+  h: number;
+  /** 몸통 모서리 라운드. */
+  r: number;
+  /** 꼬리·스트로크가 삐져나갈 여백. SVG 좌표계는 (-pad,-pad)에서 시작한다. */
+  pad: number;
+  fill: string;
+  stroke?: string | null;
+  strokeWidth?: number;
+  /** 꼬리 끝점(몸통 로컬 좌표). null이거나 몸통 안이면 꼬리 없음. */
+  tip?: Pt | null;
+  /** 꼬리 밑변의 둘레 위 길이 [선행, 후행]. 비대칭이어야 부리처럼 보인다. */
+  base?: [number, number];
+  /** 꼬리 후행 변을 몸통 쪽으로 판 깊이. 0이면 모서리를 비스듬히 깎은 모양이 된다. */
+  notch?: number;
+};
+
+const dist = (a: Pt, b: Pt) => Math.hypot(a[0] - b[0], a[1] - b[1]);
+
+/** 둥근 사각형 둘레를 촘촘한 폴리라인으로 샘플링(시계방향). */
+function perimeter(w: number, h: number, r0: number, step = 1.5): Pt[] {
+  const r = Math.max(0, Math.min(r0, w / 2, h / 2));
+  const pts: Pt[] = [];
+  const line = (a: Pt, b: Pt) => {
+    const n = Math.max(1, Math.round(dist(a, b) / step));
+    for (let i = 0; i < n; i++) {
+      const t = i / n; // 끝점은 다음 구간이 이어받는다(중복 방지)
+      pts.push([a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]);
+    }
+  };
+  const arc = (cx: number, cy: number, a0: number, a1: number) => {
+    const n = Math.max(2, Math.round((Math.abs(a1 - a0) * r) / step));
+    for (let i = 0; i < n; i++) {
+      const t = a0 + ((a1 - a0) * i) / n;
+      pts.push([cx + r * Math.cos(t), cy + r * Math.sin(t)]);
+    }
+  };
+  const P = Math.PI;
+  line([r, 0], [w - r, 0]);
+  arc(w - r, r, -P / 2, 0);
+  line([w, r], [w, h - r]);
+  arc(w - r, h - r, 0, P / 2);
+  line([w - r, h], [r, h]);
+  arc(r, h - r, P / 2, P);
+  line([0, h - r], [0, r]);
+  arc(r, r, P, (3 * P) / 2);
+  return pts;
+}
+
+/** tip이 몸통 안이면 꼬리를 그리지 않는다(끝점을 안으로 끌면 꼬리가 사라지는 UX). */
+export function insideBody(w: number, h: number, r: number, p: Pt): boolean {
+  const [x, y] = p;
+  if (x < 0 || x > w || y < 0 || y > h) return false;
+  const cornerX = x < r || x > w - r;
+  const cornerY = y < r || y > h - r;
+  if (!cornerX || !cornerY) return true;
+  const cx = x < r ? r : w - r;
+  const cy = y < r ? r : h - r;
+  return dist([x, y], [cx, cy]) <= r;
+}
+
+export function bubblePathD(p: BubbleParams): string {
+  const { w, h, r } = p;
+  const pts = perimeter(w, h, r);
+  const tip = p.tip ?? null;
+  const d = (list: Pt[]) =>
+    list
+      .map(([x, y], i) => `${i === 0 ? "M" : "L"}${x.toFixed(1)} ${y.toFixed(1)}`)
+      .join(" ") + " Z";
+
+  if (!tip || insideBody(w, h, r, tip)) return d(pts);
+
+  const n = pts.length;
+  const s: number[] = [0];
+  for (let i = 1; i < n; i++) s.push(s[i - 1] + dist(pts[i - 1], pts[i]));
+  const total = s[n - 1] + dist(pts[n - 1], pts[0]);
+
+  let anchor = 0;
+  let best = Infinity;
+  for (let i = 0; i < n; i++) {
+    const dd = dist(pts[i], tip);
+    if (dd < best) {
+      best = dd;
+      anchor = i;
+    }
+  }
+
+  /** 앵커에서 둘레를 따라 dist만큼 떨어진 점의 인덱스(래핑). s는 단조증가 → 이분탐색. */
+  const at = (delta: number): number => {
+    const target = ((((s[anchor] + delta) % total) + total) % total) as number;
+    let lo = 0;
+    let hi = n - 1;
+    while (lo < hi) {
+      const mid = (lo + hi) >> 1;
+      if (s[mid] < target) lo = mid + 1;
+      else hi = mid;
+    }
+    return lo % n;
+  };
+
+  const [before, after] = p.base ?? [34, 34];
+  const a = at(-Math.min(before, total / 4));
+  const b = at(Math.min(after, total / 4));
+
+  // b에서 시계방향으로 돌아 a까지가 몸통. a..b 구간을 꼬리가 대체한다.
+  const body: Pt[] = [];
+  for (let k = b; ; k = (k + 1) % n) {
+    body.push(pts[k]);
+    if (k === a) break;
+  }
+
+  const tail: Pt[] = [tip];
+  const notch = p.notch ?? 0;
+  if (notch > 0) {
+    // tip → b 변의 중간을 몸통 중심 쪽으로 당겨 오목하게 만든다.
+    const mx = (tip[0] + pts[b][0]) / 2;
+    const my = (tip[1] + pts[b][1]) / 2;
+    const vx = w / 2 - mx;
+    const vy = h / 2 - my;
+    const len = Math.hypot(vx, vy) || 1;
+    tail.push([mx + (vx / len) * notch, my + (vy / len) * notch]);
+  }
+  return d([...body, ...tail]);
+}
+
+export function bubbleSvgMarkup(p: BubbleParams): string {
+  const { w, h, pad } = p;
+  const st = p.stroke
+    ? ` stroke="${p.stroke}" stroke-width="${p.strokeWidth ?? 2}" stroke-linejoin="round"`
+    : "";
+  return (
+    `<svg viewBox="${-pad} ${-pad} ${w + 2 * pad} ${h + 2 * pad}" ` +
+    `width="${w + 2 * pad}" height="${h + 2 * pad}" xmlns="http://www.w3.org/2000/svg">` +
+    `<path d="${bubblePathD(p)}" fill="${p.fill}"${st}/></svg>`
+  );
+}
+
+/** 스톡 편집기의 svg 요소는 ``src``로 그린다 — 마크업을 data URL로 굽는다. */
+export function bubbleSvgDataUrl(p: BubbleParams): string {
+  return `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(bubbleSvgMarkup(p))))}`;
+}
+
+/** ``custom.bubble``을 안전하게 읽는다(형식이 어긋나면 null → 일반 svg로 취급). */
+export function readBubbleParams(custom: unknown): BubbleParams | null {
+  if (!custom || typeof custom !== "object") return null;
+  const b = (custom as Record<string, unknown>).bubble;
+  if (!b || typeof b !== "object") return null;
+  const o = b as Record<string, unknown>;
+  const num = (v: unknown) => (typeof v === "number" && Number.isFinite(v) ? v : null);
+  const w = num(o.w);
+  const h = num(o.h);
+  if (w === null || h === null || w <= 0 || h <= 0) return null;
+  const tip = Array.isArray(o.tip) && o.tip.length === 2 ? (o.tip.map(Number) as Pt) : null;
+  const base = Array.isArray(o.base) && o.base.length === 2 ? (o.base.map(Number) as [number, number]) : undefined;
+  return {
+    w,
+    h,
+    r: num(o.r) ?? 0,
+    pad: num(o.pad) ?? 0,
+    fill: typeof o.fill === "string" ? o.fill : "#fff",
+    stroke: typeof o.stroke === "string" ? o.stroke : null,
+    strokeWidth: num(o.strokeWidth) ?? 2,
+    tip: tip && tip.every(Number.isFinite) ? tip : null,
+    base,
+    notch: num(o.notch) ?? 0,
+  };
+}

package/lib/detail-page-canvas/canvas-key.ts

@@ -0,0 +1,22 @@
+/**
+ * 엔진 사용 키를 한 자리에서 넣는다.
+ *
+ * 키는 **보호 수단이 아니라 계량기**다(패키지의 `license.ts` 머리말). 우리 도메인과
+ * localhost에서는 엔진이 아예 안 묻고, 키가 없어도 편집기는 똑같이 돈다. 그래도 넣는
+ * 이유는 누가 얼마나 쓰는지 셀 자리를 지금부터 열어 두기 위해서다 — 나중에 외부에 팔
+ * 때 스위치를 새로 만들지 않아도 된다.
+ *
+ * `createCanvasStore`가 아니라 여기인 것도 그 문서의 결정이다. 스토어를 만들 때마다
+ * 키를 들고 다니면 호출부 전부가 키를 알아야 한다.
+ */
+
+import { configureCanvas } from "@leviosa-ai/canvas";
+
+let configured = false;
+
+/** 편집기를 여는 자리에서 부른다. 두 번 불러도 안전하다. */
+export function ensureCanvasKey(): void {
+  if (configured) return;
+  configured = true;
+  configureCanvas({ key: process.env.NEXT_PUBLIC_LEVIOSA_CANVAS_KEY });
+}

package/lib/detail-page-canvas/clip-rect.ts

@@ -0,0 +1,65 @@
+/**
+ * Pure helpers for clipping HTML-decomposed decoration to its owning card
+ * rectangle. Kept free of React/Canvas/Konva imports so both the native Konva
+ * preview and the Canvas SDK clip-aware shape component can reuse them, and so
+ * they stay trivially unit-testable.
+ */
+
+export type ClipRectShape = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  radius?: number;
+};
+
+/** A minimal Konva.Context — only the path ops the clip needs. */
+export type ClipContext = {
+  beginPath(): void;
+  moveTo(x: number, y: number): void;
+  arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void;
+  closePath(): void;
+};
+
+/** Trace a rounded rectangle path used as the Konva clip region. */
+export function roundedRectPath(
+  ctx: ClipContext,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number,
+): void {
+  const r = Math.max(0, Math.min(radius, width / 2, height / 2));
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.arcTo(x + width, y, x + width, y + height, r);
+  ctx.arcTo(x + width, y + height, x, y + height, r);
+  ctx.arcTo(x, y + height, x, y, r);
+  ctx.arcTo(x, y, x + width, y, r);
+  ctx.closePath();
+}
+
+/** Read a usable ``clipToRect`` off a Canvas element's ``custom`` payload. */
+export function readClipRect(element: unknown): ClipRectShape | null {
+  const custom =
+    element && typeof element === "object"
+      ? (element as { custom?: unknown }).custom
+      : null;
+  const clip =
+    custom && typeof custom === "object"
+      ? (custom as { clipToRect?: unknown }).clipToRect
+      : null;
+  if (!clip || typeof clip !== "object") return null;
+  const rect = clip as Record<string, unknown>;
+  const width = typeof rect.width === "number" ? rect.width : 0;
+  const height = typeof rect.height === "number" ? rect.height : 0;
+  if (!(width > 0) || !(height > 0)) return null;
+  return {
+    x: typeof rect.x === "number" ? rect.x : 0,
+    y: typeof rect.y === "number" ? rect.y : 0,
+    width,
+    height,
+    radius: typeof rect.radius === "number" ? rect.radius : 0,
+  };
+}

package/lib/detail-page-canvas/custom-props-adapter.ts

@@ -0,0 +1,219 @@
+/**
+ * 문서를 싣고 내릴 때 앱이 하는 손질 두 가지. **렌더러의 일이 아니다.**
+ *
+ * 이 파일은 원래 Canvas 어댑터였다 — SDK가 못 읽는 `custom.*` 장식(그라데이션·그림자)을
+ * 대표 단색으로 낮춰 주고, 사진 액자를 요소 상자를 옮겨 흉내 내고, 인라인 런 간격을
+ * 마운트된 Konva 노드로 다시 재던 층. SDK가 사라지면서 그 셋(`adaptLeviosaCustomProps`
+ * `applyCoverCropToImages` `applyRunReflow`)도 같이 사라졌다. 우리 렌더러는 원본 필드를
+ * 그대로 읽고(`leviosa-canvas/render/attrs.ts`), 액자는 그리는 자리에서 잡는다
+ * (`render/image-frame.ts`).
+ *
+ * 남은 둘은 엔진과 무관하게 **앱이 해야 하는 일**이다.
+ *
+ * * `applyTextLineFit` — 디컴포저가 몇 px 좁게 잰 텍스트 상자를 실제 글꼴로 다시 재
+ *   그만큼만 넓힌다. 글꼴이 다 온 뒤에 돌아야 한다.
+ * * `clearPlaceholderImageSrc` — 저장할 때 자리표시자 src 를 `""` 로 되돌린다.
+ */
+
+type UnknownRecord = Record<string, unknown>;
+
+/**
+ * Transparent 1x1 image used for image slots that have no source yet — a
+ * transparent pixel lets the decorative background behind the slot (e.g. the
+ * hero's radial gradient) show through, matching the decomposer output. The
+ * element stays a real ``image`` so it remains selectable/transformable and an
+ * AI-generated image drops in by simply replacing ``src``.
+ * ``clearPlaceholderImageSrc`` reverts it to ``""`` on save so the placeholder
+ * is never persisted.
+ */
+export const EMPTY_IMAGE_PLACEHOLDER_SRC =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+
+function asRecord(value: unknown): UnknownRecord {
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? (value as UnknownRecord)
+    : {};
+}
+
+function asArray(value: unknown): unknown[] {
+  return Array.isArray(value) ? value : [];
+}
+
+/**
+ * Pull the URL out of a CSS ``background-image`` value like
+ * ``url("/x/y.png")``. The decomposer stores each slot's *mockup* image there
+ * (``custom.placeholderBgImage``); a plain gradient (``linear-gradient(...)``)
+ * has no URL and returns null. Quotes are optional per the CSS grammar.
+ */
+function extractCssUrl(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  const match = value.match(/url\(\s*(['"]?)([^'")]+)\1\s*\)/i);
+  return match ? match[2].trim() || null : null;
+}
+
+/**
+ * Resolve the decomposer's ``lineHeight`` — a CSS px string ("36.1px"), a
+ * unitless ratio ("1.9" / 1.9), an absolute-px number (36.1), or absent — to a
+ * unitless ratio for the given font size. Falls back to 1.2 (the canvas
+ * default) when it cannot be parsed. A value < 4 is treated as an existing
+ * ratio; anything larger is an absolute pixel height divided back to a ratio.
+ */
+function resolveLineHeightRatio(raw: unknown, fontSize: number): number {
+  const fs = fontSize > 0 ? fontSize : 1;
+  if (typeof raw === "number" && Number.isFinite(raw) && raw > 0) {
+    return raw < 4 ? raw : raw / fs;
+  }
+  if (typeof raw === "string") {
+    const s = raw.trim();
+    const value = parseFloat(s);
+    if (Number.isFinite(value) && value > 0) {
+      return s.endsWith("px") || value >= 4 ? value / fs : value;
+    }
+  }
+  return 1.2;
+}
+
+/**
+ * Widest rendered line of a text element, in pixels, for the element's font.
+ * Returns 0 when no canvas is available (SSR / jsdom) so callers leave the box
+ * untouched. Over-estimates harmlessly when the font has not loaded yet — a
+ * wider box still left-aligns the same text, it just never wraps.
+ */
+function measureTextLineWidth(element: UnknownRecord): number {
+  if (typeof document === "undefined") return 0;
+  const ctx = document.createElement("canvas").getContext("2d");
+  if (!ctx) return 0;
+  const fontSize = Number(element.fontSize) || 0;
+  if (fontSize <= 0) return 0;
+  const weight = String(element.fontWeight ?? "normal");
+  const family = String(element.fontFamily ?? "sans-serif");
+  ctx.font = `${weight} ${fontSize}px "${family}"`;
+  // 캔버스가 letterSpacing 을 EM 비율로 그리는 것에 맞춘다
+  // (letterSpacing * fontSize px). The decomposer already sized the box WITH the
+  // source 자간, so measuring WITHOUT it over-estimates and widens the box
+  // needlessly — which, for centred colour-split fragments, shoves the text into
+  // its neighbour ("만족도" over "100%"). Apply the same spacing so ``needed``
+  // matches what actually renders.
+  const letterSpacingEm = Number(element.letterSpacing) || 0;
+  const ctxWithSpacing = ctx as CanvasRenderingContext2D & {
+    letterSpacing?: string;
+  };
+  if (letterSpacingEm && "letterSpacing" in ctxWithSpacing) {
+    ctxWithSpacing.letterSpacing = `${letterSpacingEm * fontSize}px`;
+  }
+  let widest = 0;
+  for (const line of String(element.text ?? "").split("\n")) {
+    widest = Math.max(widest, ctx.measureText(line).width);
+  }
+  // A touch of slack absorbs metric drift between measurement and render.
+  return widest > 0 ? Math.ceil(widest + fontSize * 0.15) : 0;
+}
+
+/** 문서를 훑어 자리표시자 image src 를 빈 값으로 되돌린다. */
+export function clearPlaceholderImageSrc<T>(json: T): T {
+  const clone = JSON.parse(JSON.stringify(json ?? {})) as UnknownRecord;
+  const visit = (element: UnknownRecord) => {
+    if (element.type === "image") {
+      // Revert both the transparent placeholder and a promoted mockup image
+      // (older documents carry the slot's own placeholderBgImage as the preview
+      // src) so an unfilled slot never persists a src.
+      const mockup = extractCssUrl(asRecord(element.custom).placeholderBgImage);
+      if (
+        element.src === EMPTY_IMAGE_PLACEHOLDER_SRC ||
+        (mockup !== null && element.src === mockup)
+      ) {
+        element.src = "";
+      }
+    }
+    for (const child of asArray(element.children)) visit(asRecord(child));
+  };
+  for (const page of asArray(clone.pages)) {
+    for (const child of asArray(asRecord(page).children)) visit(asRecord(child));
+  }
+  return clone as unknown as T;
+}
+
+type StoreTextElement = {
+  type?: string;
+  text?: string;
+  x?: number;
+  width?: number;
+  height?: number;
+  fontSize?: number;
+  align?: string;
+  children?: unknown[];
+  set?: (props: Record<string, number>) => void;
+};
+
+/**
+ * Widen text boxes that wrap by a hair, measuring with the *loaded* webfont.
+ *
+ * The decomposer sizes each text box from getBoundingClientRect in its own
+ * headless Chromium, but the editor's self-hosted Pretendard has slightly
+ * different metrics — a line the decomposer measured at 254px renders at 256px,
+ * 2px past the box, so the canvas wraps an explicit line onto a second row (the
+ * chat bubbles pile up an extra line and spill out of the bubble). This must run
+ * against the live store *after* ``document.fonts.ready`` — measuring against the
+ * fallback face over-estimates past the drift cap and skips the fix entirely.
+ *
+ * Only a small overflow is corrected (drift, not a genuine wrap). Each
+ * decomposer text carries explicit ``\n`` at the source's own line breaks, so a
+ * widest-line overflow of a few px means the box is a touch too tight; a large
+ * overflow would mean the text is a flowing paragraph meant to wrap, which is
+ * left alone. Widening keeps the visual anchor: a centred box grows
+ * symmetrically, a right-aligned box leftward. Idempotent — a box already wide
+ * enough is untouched.
+ */
+export function applyTextLineFit(store: unknown): void {
+  const storeRecord = asRecord(store);
+  const visit = (element: StoreTextElement) => {
+    if (element.type === "text" && typeof element.set === "function") {
+      const width = Number(element.width) || 0;
+      const fontSize = Number(element.fontSize) || 0;
+      // A FLOWING paragraph — no explicit line breaks and a box taller than one
+      // line — is meant to WRAP to its width. measureTextLineWidth measures its
+      // whole text as a single line, so a SHORT paragraph that almost fits one
+      // line reports an overflow UNDER the cap below; widening it then collapses
+      // the intended two-line wrap into one line that runs off the section (the
+      // FAQ answers / warranty note overflowing). The cap alone can't tell this
+      // apart from a genuine hard-line that drifted a few px, so skip flowing
+      // paragraphs outright — only hard "\n" lines and genuinely single-line
+      // boxes get the sub-cap drift correction.
+      const text = String(element.text ?? "");
+      const height = Number(element.height) || 0;
+      const lineRatio = resolveLineHeightRatio(
+        (element as UnknownRecord).lineHeight,
+        fontSize,
+      );
+      const flowingWrap =
+        !text.includes("\n") &&
+        fontSize > 0 &&
+        height > fontSize * lineRatio * 1.6;
+      if (width > 0 && fontSize > 0 && !flowingWrap) {
+        const needed = measureTextLineWidth(element as UnknownRecord);
+        const grow = needed - width;
+        // Cap the correction so a genuine wrap-paragraph (stored as one long
+        // line) is never unwrapped into a page-overflowing single line.
+        const maxGrow = Math.max(fontSize * 1.5, width * 0.08);
+        if (grow > 0 && grow <= maxGrow) {
+          const align = String(element.align ?? "left");
+          const patch: Record<string, number> = { width: needed };
+          if (align === "center") {
+            patch.x = (Number(element.x) || 0) - grow / 2;
+          } else if (align === "right" || align === "end") {
+            patch.x = (Number(element.x) || 0) - grow;
+          }
+          element.set?.(patch);
+        }
+      }
+    }
+    for (const child of asArray(element.children)) {
+      visit(asRecord(child) as StoreTextElement);
+    }
+  };
+  for (const page of asArray(storeRecord.pages)) {
+    for (const child of asArray(asRecord(page).children)) {
+      visit(asRecord(child) as StoreTextElement);
+    }
+  }
+}

package/lib/detail-page-canvas/editor-fonts.ts

@@ -0,0 +1,161 @@
+/**
+ * One list for the detail-page font picker, over two very different sources.
+ *
+ *   catalog — src/config/detail-page-fonts.json. Whole woff2 files fetched from a
+ *             public CDN on demand, one file per (family, weight).
+ *   bundle  — the konva font catalog, frozen under /render-fonts. It contains both
+ *             Google's unicode-range slices and licensed whole files, all served
+ *             from our origin. These are the bytes the server-side renderer draws with.
+ *
+ * The editor already loaded both — the bundle families just had no way into the
+ * picker, so they were reachable only by a template naming them. This module is
+ * the join: same shape, same weight lookup, one loader.
+ *
+ * Caveat: `.ai`/PSD export embeds glyphs for catalog families only — `font-subset`
+ * needs one whole file per face, and a bundle family is ~90 unicode-range slices.
+ * A bundle family exports with Illustrator's fallback, exactly as it already did
+ * when a template named one; the picker just makes it reachable by hand too.
+ *
+ * Families are unique across the merged list. When both sources ship the same
+ * family (Paperozi, Presentation, Diphylleia), the catalog entry wins — it is the
+ * one `getDetailPageFont` already resolves first everywhere else, so preferring it
+ * keeps the picker honest about which bytes the canvas will actually draw.
+ */
+
+import { ALL_FONT_OPTIONS, loadFontFaces } from "../cardnews/font-loader";
+
+import {
+  DETAIL_PAGE_FONTS,
+  getDetailPageFontWeights,
+  loadDetailPageFont,
+  normalizeFontWeight,
+  type FontCatalogStore,
+} from "./font-catalog";
+import { bundleFontTags, toFontTags, type FontTag } from "./font-tags";
+
+export type EditorFontSource = "catalog" | "bundle";
+
+export type EditorFont = {
+  source: EditorFontSource;
+  id: string;
+  family: string;
+  label: string;
+  /** Searchable Latin name — the CDN catalog carries one, the bundle uses `family`. */
+  labelEn: string;
+  /** Static WebP rendered at build time; the picker never downloads font bytes. */
+  previewSrc: string;
+  /** 피커 칩이 거르는 분류. 카탈로그는 항목 안에, 번들은 사이드카에 적혀 있다. */
+  tags: FontTag[];
+  weights: number[];
+  /** No Hangul glyphs — applying it to Korean silently falls back to a system font. */
+  latinOnly?: boolean;
+  licenseName: string;
+  licenseUrl: string;
+  licenseNoteKey?: string;
+};
+
+function fromCatalog(font: (typeof DETAIL_PAGE_FONTS)[number]): EditorFont {
+  return {
+    source: "catalog",
+    id: font.id,
+    family: font.family,
+    label: font.label,
+    labelEn: font.labelEn,
+    previewSrc: `/detail-font-previews/${font.id}.webp`,
+    tags: toFontTags(font.tags),
+    weights: getDetailPageFontWeights(font),
+    latinOnly: font.latinOnly,
+    licenseName: font.licenseName,
+    licenseUrl: font.licenseUrl,
+    licenseNoteKey: font.licenseNoteKey,
+  };
+}
+
+function fromBundle(font: (typeof ALL_FONT_OPTIONS)[number]): EditorFont {
+  return {
+    source: "bundle",
+    id: font.id,
+    family: font.family,
+    label: font.label,
+    labelEn: font.family,
+    previewSrc: `/cardnews-font-previews/${font.id}.webp`,
+    tags: bundleFontTags(font.id),
+    weights: [...font.weights].sort((a, b) => a - b),
+    licenseName: font.license.name,
+    licenseUrl: font.license.url,
+  };
+}
+
+const catalogFonts = DETAIL_PAGE_FONTS.map(fromCatalog);
+const catalogFamilies = new Set(catalogFonts.map((font) => font.family));
+
+export const EDITOR_CATALOG_FONTS: EditorFont[] = catalogFonts;
+
+export const EDITOR_BUNDLE_FONTS: EditorFont[] = ALL_FONT_OPTIONS.filter(
+  (font) => !catalogFamilies.has(font.family),
+).map(fromBundle);
+
+export const EDITOR_FONTS: EditorFont[] = [
+  ...EDITOR_CATALOG_FONTS,
+  ...EDITOR_BUNDLE_FONTS,
+];
+
+/**
+ * AND, not OR — chips are for narrowing. "제목용" alone is still 20-odd fonts;
+ * "제목용 + 둥근" is the handful the user actually meant. An empty selection is
+ * the whole list, so the picker never has to special-case "no filter".
+ */
+export function filterFontsByTags(
+  fonts: EditorFont[],
+  tags: readonly FontTag[],
+): EditorFont[] {
+  if (!tags.length) return fonts;
+  return fonts.filter((font) => tags.every((tag) => font.tags.includes(tag)));
+}
+
+const byFamily = new Map(EDITOR_FONTS.map((font) => [font.family, font] as const));
+
+export function getEditorFont(family: string): EditorFont | undefined {
+  return byFamily.get(family);
+}
+
+export function closestEditorFontWeight(
+  font: EditorFont,
+  requested: unknown,
+): number {
+  const target = normalizeFontWeight(requested);
+  return font.weights.reduce((best, weight) =>
+    Math.abs(weight - target) < Math.abs(best - target) ? weight : best,
+  );
+}
+
+/**
+ * Registers the one face about to be drawn. Catalog fonts also get pushed into the
+ * Canvas store so the family survives a save/reload; bundle families are already
+ * declared by the frozen stylesheet, so installing the face is all they need.
+ */
+export async function loadEditorFont({
+  family,
+  weight,
+  sample,
+  store,
+}: {
+  family: string;
+  weight: unknown;
+  sample?: string;
+  store?: FontCatalogStore;
+}): Promise<void> {
+  const font = getEditorFont(family);
+  if (!font) return;
+  if (font.source === "catalog") {
+    await loadDetailPageFont({ family, weight, sample, store });
+    return;
+  }
+  await loadFontFaces([
+    {
+      family,
+      weight: String(closestEditorFontWeight(font, weight)),
+      sample: sample || undefined,
+    },
+  ]);
+}