@leviosa-ai/detail-page-editor 0.1.0

package/lib/detail-page-canvas/font-catalog.ts

@@ -0,0 +1,177 @@
+import catalogJson from "../../config/detail-page-fonts.json";
+
+import type { FontTag } from "./font-tags";
+
+export type DetailPageFontStyle = {
+  weight: number;
+  style: "normal" | "italic";
+  format: "woff" | "woff2";
+  url: string;
+};
+
+export type DetailPageFont = {
+  id: string;
+  family: string;
+  label: string;
+  labelEn: string;
+  /** 피커 칩이 거르는 분류. 한 폰트가 여러 개를 가진다. */
+  tags: FontTag[];
+  /** 한글 글리프가 없는 라틴 전용 폰트 — 한글에 쓰면 시스템 폰트로 폴백한다. */
+  latinOnly?: boolean;
+  previewText: string;
+  previewWeight: number;
+  licenseName: string;
+  licenseUrl: string;
+  licenseNoteKey?: string;
+  styles: DetailPageFontStyle[];
+};
+
+type CanvasFontStyle = {
+  src: string;
+  fontStyle?: string;
+  fontWeight?: string;
+};
+
+export type FontCatalogStore = {
+  fonts?: Array<{
+    fontFamily: string;
+    styles?: unknown;
+  }>;
+  addFont?: (font: {
+    fontFamily: string;
+    styles: CanvasFontStyle[];
+  }) => void;
+};
+
+export const DETAIL_PAGE_FONTS = catalogJson as DetailPageFont[];
+
+const byFamily = new Map(
+  DETAIL_PAGE_FONTS.map((font) => [font.family, font] as const),
+);
+const loadPromises = new Map<string, Promise<DetailPageFontStyle>>();
+
+export function getDetailPageFont(family: string): DetailPageFont | undefined {
+  return byFamily.get(family);
+}
+
+export function normalizeFontWeight(weight: unknown): number {
+  if (weight === "bold") return 700;
+  if (weight === "normal" || weight == null) return 400;
+  const parsed = Number(weight);
+  return Number.isFinite(parsed) ? parsed : 400;
+}
+
+export function getDetailPageFontWeights(font: DetailPageFont): number[] {
+  return [...new Set(font.styles.map((style) => style.weight))].sort(
+    (a, b) => a - b,
+  );
+}
+
+export function closestDetailPageFontWeight(
+  font: DetailPageFont,
+  requested: unknown,
+): number {
+  const target = normalizeFontWeight(requested);
+  return getDetailPageFontWeights(font).reduce((best, weight) =>
+    Math.abs(weight - target) < Math.abs(best - target) ? weight : best,
+  );
+}
+
+export function resolveDetailPageFontStyle(
+  font: DetailPageFont,
+  weight: unknown,
+  style: string,
+): DetailPageFontStyle {
+  const requestedWeight = normalizeFontWeight(weight);
+  const sameStyle = font.styles.filter((candidate) => candidate.style === style);
+  const candidates = sameStyle.length ? sameStyle : font.styles;
+  return candidates.reduce((best, candidate) =>
+    Math.abs(candidate.weight - requestedWeight) <
+    Math.abs(best.weight - requestedWeight)
+      ? candidate
+      : best,
+  );
+}
+
+function asCanvasStyle(style: DetailPageFontStyle): CanvasFontStyle {
+  return {
+    src: `url("${style.url}") format("${style.format}")`,
+    fontStyle: style.style,
+    fontWeight: String(style.weight),
+  };
+}
+
+function registerStoreFont(
+  store: FontCatalogStore | undefined,
+  font: DetailPageFont,
+  loadedStyle: DetailPageFontStyle,
+) {
+  if (!store?.addFont) return;
+  const existing = store.fonts?.find(
+    (candidate) => candidate.fontFamily === font.family,
+  );
+  const previous = Array.isArray(existing?.styles)
+    ? (existing.styles as CanvasFontStyle[])
+    : [];
+  const next = asCanvasStyle(loadedStyle);
+  const styles = previous.filter(
+    (style) =>
+      !(
+        style.fontStyle === next.fontStyle &&
+        String(style.fontWeight) === next.fontWeight
+      ),
+  );
+  styles.push(next);
+  store.addFont({ fontFamily: font.family, styles });
+}
+
+/**
+ * Loads only the selected family/style/weight. The picker itself uses static
+ * WebP assets, so opening or searching the list never downloads font bytes.
+ */
+export async function loadDetailPageFont({
+  family,
+  weight,
+  style = "normal",
+  sample = "",
+  store,
+}: {
+  family: string;
+  weight: unknown;
+  style?: string;
+  sample?: string;
+  store?: FontCatalogStore;
+}): Promise<DetailPageFontStyle | null> {
+  const font = getDetailPageFont(family);
+  if (!font || typeof document === "undefined" || typeof FontFace === "undefined") {
+    return null;
+  }
+  const source = resolveDetailPageFontStyle(font, weight, style);
+  const key = `${font.family}\n${source.style}\n${source.weight}`;
+  let promise = loadPromises.get(key);
+  if (!promise) {
+    promise = new FontFace(
+      font.family,
+      `url("${source.url}") format("${source.format}")`,
+      {
+        style: source.style,
+        weight: String(source.weight),
+        display: "swap",
+      },
+    )
+      .load()
+      .then(async (face) => {
+        document.fonts.add(face);
+        await document.fonts.load(
+          `${source.style} ${source.weight} 24px "${font.family}"`,
+          sample || font.previewText,
+        );
+        return source;
+      });
+    loadPromises.set(key, promise);
+    promise.catch(() => loadPromises.delete(key));
+  }
+  const loaded = await promise;
+  registerStoreFont(store, font, loaded);
+  return loaded;
+}

package/lib/detail-page-canvas/font-tags.ts

@@ -0,0 +1,47 @@
+/**
+ * The vocabulary the font picker filters by — 눈누의 태그 방식을 우리 어휘로 추린 것.
+ *
+ * Two sources, two homes. Catalog fonts carry their tags inline in
+ * `src/config/detail-page-fonts.json` (we own that file, so the tags sit next to
+ * the label and the license they describe). Bundle fonts come from the konva
+ * package, which we cannot edit, so their tags live in a sidecar keyed by font id.
+ * A test asserts both sides are complete, so a package bump that adds a font fails
+ * loudly instead of quietly shipping an untagged one.
+ *
+ * Order matters: the picker renders chips in this order.
+ */
+
+import bundleTagsJson from "../../config/detail-page-bundle-font-tags.json";
+
+export const FONT_TAGS = [
+  "heading",
+  "body",
+  "gothic",
+  "myeongjo",
+  "batang",
+  "handwriting",
+  "pixel",
+  "rounded",
+  "angular",
+  "outline",
+  "italic",
+] as const;
+
+export type FontTag = (typeof FONT_TAGS)[number];
+
+const KNOWN = new Set<string>(FONT_TAGS);
+
+export function isFontTag(value: unknown): value is FontTag {
+  return typeof value === "string" && KNOWN.has(value);
+}
+
+/** Drops anything the vocabulary does not know — a stale tag must not crash a list. */
+export function toFontTags(value: unknown): FontTag[] {
+  return Array.isArray(value) ? value.filter(isFontTag) : [];
+}
+
+const bundleTags = bundleTagsJson as Record<string, string[]>;
+
+export function bundleFontTags(id: string): FontTag[] {
+  return toFontTags(bundleTags[id]);
+}

package/lib/detail-page-canvas/gif-web-fonts.ts

@@ -0,0 +1,90 @@
+/**
+ * 텍스트 GIF 요청에 실어 보낼 **웹폰트 URL**을 편집기 폰트 카탈로그에서 뽑는다.
+ *
+ * 서버는 헤드리스 Chromium으로 GIF를 굽는데, 그 컨테이너엔 우리 폰트가 하나도 없다.
+ * family 이름만 보내면 시스템 폴백(비트맵 픽셀 폰트)으로 그려져서 "폰트가 유지되지
+ * 않는다"는 증상이 난다. 그래서 실제 폰트 파일 주소를 함께 보낸다.
+ *
+ * 소스가 둘이라 주소 모양도 둘이다(서버는 확장자로 구분한다):
+ *   catalog — jsdelivr 의 woff2 한 개(굵기별 파일)
+ *   bundle  — 우리 오리진의 스타일시트 한 개(한글 unicode-range 조각 ~90개를 묶은 것)
+ *
+ * 서버가 호스트 허용 목록으로 한 번 더 거르므로, 여기서 못 만들거나 로컬 오리진이면
+ * 그냥 비워 보낸다 — 그 경우 서버의 폴백 폰트로 그려진다.
+ */
+
+import { LEVIOSA_KONVA_VERSION } from "@leviosa-ai/konva";
+
+import {
+  closestDetailPageFontWeight,
+  getDetailPageFont,
+  resolveDetailPageFontStyle,
+} from "./font-catalog";
+import { closestEditorFontWeight, getEditorFont } from "./editor-fonts";
+
+export type GifWebFont = {
+  family: string;
+  url: string;
+  weight: number;
+};
+
+/** 번들 폰트 스타일시트 경로가 쓰는 슬러그(font-loader와 같은 규칙). */
+function slugifyFamily(family: string): string {
+  return family
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+function currentOrigin(): string {
+  if (typeof window === "undefined") return "";
+  return window.location.origin;
+}
+
+/**
+ * (family, weight) 쌍들 → 서버에 보낼 폰트 목록. 같은 조합은 한 번만 담고, 카탈로그에
+ * 없는 family(문서에만 있는 레거시 이름)는 건너뛴다.
+ */
+export function resolveGifWebFonts(
+  faces: Array<{ family: string; weight?: unknown }>,
+  origin: string = currentOrigin(),
+): GifWebFont[] {
+  const out: GifWebFont[] = [];
+  const seen = new Set<string>();
+
+  for (const face of faces) {
+    const family = (face.family ?? "").trim();
+    if (!family) continue;
+    const editorFont = getEditorFont(family);
+    if (!editorFont) continue;
+
+    if (editorFont.source === "catalog") {
+      const catalogFont = getDetailPageFont(family);
+      if (!catalogFont) continue;
+      const weight = closestDetailPageFontWeight(catalogFont, face.weight);
+      const key = `${family}\n${weight}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      const style = resolveDetailPageFontStyle(catalogFont, weight, "normal");
+      if (style?.url) out.push({ family, url: style.url, weight });
+      continue;
+    }
+
+    // 번들 폰트는 우리 오리진에서 서빙된다 — 서버가 받아갈 수 있는 절대 주소로만 보낸다.
+    if (!/^https:\/\//i.test(origin)) continue;
+    const slug = slugifyFamily(family);
+    if (!slug) continue;
+    const weight = closestEditorFontWeight(editorFont, face.weight);
+    const key = `${family}\n${weight}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push({
+      family,
+      weight,
+      url: `${origin}/render-fonts/family-css/${slug}-${weight}.css?v=${LEVIOSA_KONVA_VERSION}`,
+    });
+  }
+
+  return out.slice(0, 8);
+}