@leviosa-ai/detail-page-editor 0.7.4 → 0.9.0

package/components/detail-page/detail-page-download-dialog.tsx

@@ -20,6 +20,10 @@ import {
 import type { ExportDocument } from "../../lib/detail-page-canvas/export/document-model";
 import { detectGifPages } from "../../lib/detail-page-canvas/export/gif-plan";
 import { isMp4EncodeSupported } from "../../lib/detail-page-canvas/export/mp4-support";
+import {
+  detailPageEditorProfile,
+  type DetailPageEditorFormat,
+} from "../../lib/detail-page/editor-profile";
 
 /**
  * hookable-style 다운로드 팝오버 — 다운로드 버튼 바로 아래에 떠서 파일 형식 / 등록
@@ -62,7 +66,7 @@ const PLATFORMS = [
   { value: "general", label: "일반(범용)" },
 ] as const;
 
-type Format = "png" | "jpeg" | "psd" | "svg" | "ai";
+type Format = DetailPageEditorFormat;
 type Scope = "all" | "current";
 type AnimationFormat = "webp" | "gif" | "mp4";
 
@@ -134,8 +138,9 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
   const { t } = useTranslation("branding");
   const host = useDetailPageHost();
   const s = store as ExportStoreLike;
+  const profile = detailPageEditorProfile();
   const [open, setOpen] = useState(false);
-  const [format, setFormat] = useState<Format>("png");
+  const [format, setFormat] = useState<Format>(profile.exports[0]);
   const [platform, setPlatform] = useState<string>("naver");
   const [scope, setScope] = useState<Scope>("all");
   const [single, setSingle] = useState(true);
@@ -366,11 +371,15 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
                   </span>
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="png">PNG</SelectItem>
-                  <SelectItem value="jpeg">JPG</SelectItem>
-                  <SelectItem value="psd">{t("editor.formatPsd")}</SelectItem>
-                  <SelectItem value="ai">{t("editor.formatAi")}</SelectItem>
-                  <SelectItem value="svg">{t("editor.formatSvg")}</SelectItem>
+                  {profile.exports.map((value) => (
+                    <SelectItem key={value} value={value}>
+                      {value === "png"
+                        ? "PNG"
+                        : value === "jpeg"
+                          ? "JPG"
+                          : t(`editor.format${value[0].toUpperCase()}${value.slice(1)}`)}
+                    </SelectItem>
+                  ))}
                 </SelectContent>
               </Select>
             </div>

package/components/detail-page/detail-page-editor.tsx

@@ -30,6 +30,7 @@ import { collectFontRequests } from "@leviosa-ai/canvas/render/use-document-font
 import { ensureCanvasKey } from "../../lib/detail-page-canvas/canvas-key";
 import { loadEditorFont } from "../../lib/detail-page-canvas/editor-fonts";
 import { normalizeDocumentAssetSrcs } from "../../lib/detail-page/asset-bytes-url";
+import { selectDetailPageEditorProfile } from "../../lib/detail-page/editor-profile";
 import type { DocumentJson } from "@leviosa-ai/canvas/types";
 import { buildDetailPageSections } from "./detail-page-sidebar-sections";
 import { DetailPageProperties } from "./detail-page-properties-panel";
@@ -250,6 +251,7 @@ function buildQaSnapshot(
   document: LeviosaCanvasDocument,
   json: CanvasJson,
 ): TemplateQaSnapshot {
+  const slotBindings = document.slot_bindings ?? {};
   const cleanJson = stripQaOverlayElements(json);
   const pages = asArray(cleanJson.pages) as Array<Record<string, unknown>>;
   const elementById = new Map<string, { element: CanvasJsonElement; pageId?: string }>();
@@ -267,14 +269,14 @@ function buildQaSnapshot(
     }
   });
 
-  for (const [slot, binding] of Object.entries(document.slot_bindings)) {
+  for (const [slot, binding] of Object.entries(slotBindings)) {
     const list = slotByElementId.get(binding.element_id) ?? [];
     list.push(slot);
     slotByElementId.set(binding.element_id, list);
   }
 
   const lint: TemplateLintIssue[] = [];
-  const slots = Object.entries(document.slot_bindings)
+  const slots = Object.entries(slotBindings)
     .sort(([a], [b]) => a.localeCompare(b))
     .map(([slot, binding]) => {
       const target = elementById.get(binding.element_id);
@@ -365,7 +367,7 @@ function buildQaSnapshot(
   }
 
   for (const [slot, target] of slotsFromElements) {
-    if (!document.slot_bindings[slot]) {
+    if (!slotBindings[slot]) {
       lint.push({
         level: "info",
         title: "Unregistered slot marker",
@@ -450,6 +452,7 @@ export function DetailPageEditor({
   onBack,
   headerActions,
 }: DetailPageEditorProps) {
+  selectDetailPageEditorProfile(initialDocument);
   const { t } = useTranslation("branding");
   // 요금제 모달은 호스트가 꽂는다 — 편집기가 열지만 무엇을 얼마에 파는지는 앱이 안다.
   const { slots } = useDetailPageHost();

package/components/detail-page/detail-page-font-picker.tsx

@@ -25,10 +25,12 @@ import { FONT_TAGS, type FontTag } from "../../lib/detail-page-canvas/font-tags"
 
 export function DetailPageFontPicker({
   value,
+  text,
   documentFamilies,
   onSelect,
 }: {
   value: string;
+  text: string;
   documentFamilies: string[];
   onSelect: (family: string) => Promise<void>;
 }) {
@@ -37,6 +39,7 @@ export function DetailPageFontPicker({
   const [loading, setLoading] = useState<string | null>(null);
   const [error, setError] = useState(false);
   const [tags, setTags] = useState<FontTag[]>([]);
+  const hasHangul = /\p{Script=Hangul}/u.test(text);
   /** 404 로 떨어진 미리보기. 한 번 떨어지면 다시 안 부른다. */
   const [previewsMissing, setPreviewsMissing] = useState<ReadonlySet<string>>(
     () => new Set(),
@@ -85,7 +88,7 @@ export function DetailPageFontPicker({
       key={`${font.source}:${font.id}`}
       value={`${font.label} ${font.labelEn} ${font.family}`}
       onSelect={() => void select(font.family)}
-      disabled={loading !== null}
+      disabled={loading !== null || (hasHangul && font.latinOnly)}
       className="group min-h-[56px] gap-2 px-2 py-1"
     >
       <span className="flex h-11 min-w-0 flex-1 items-center overflow-hidden">
@@ -225,6 +228,11 @@ export function DetailPageFontPicker({
               ) : null}
             </CommandList>
           </Command>
+          {hasHangul ? (
+            <p className="border-t border-dpe-ink-100 px-3 py-2 text-xs text-dpe-ink-500">
+              {t("detailPage.properties.fontLatinOnlyUnavailable")}
+            </p>
+          ) : null}
           {error ? (
             <p role="alert" className="border-t border-dpe-danger-100 bg-dpe-danger-50 px-3 py-2 text-xs text-dpe-danger-600">
               {t("detailPage.properties.fontLoadFailed")}

package/components/detail-page/detail-page-page-toolbar.tsx

@@ -18,6 +18,7 @@ import {
   requestSectionReauthor,
   subscribeSectionReauthorAvailability,
 } from "../../lib/detail-page/section-reauthor-bus";
+import { detailPageEditorProfile } from "../../lib/detail-page/editor-profile";
 
 /**
  * hookable-style per-section (per-page) floating quick toolbar.
@@ -94,17 +95,25 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
   );
   const s = store as StoreLike;
   const p = page as PageLike;
+  const profile = detailPageEditorProfile();
   const index = s.pages.findIndex((pg) => pg.id === p.id);
   const isFirst = index <= 0;
   const isLast = index === s.pages.length - 1;
   const canDelete = s.pages.length > 1;
+  const canAdd = s.pages.length < profile.maxPages;
 
   const addAfter = () => {
+    if (!canAdd) return;
     const ref = s.activePage ?? s.pages[index];
     const next = s.addPage({
       bleed: ref?.bleed ?? 0,
-      width: ref?.width ?? "auto",
-      height: ref?.height ?? "auto",
+      width:
+        profile.page.width === "document"
+          ? ref?.width ?? "auto"
+          : profile.page.width,
+      height: profile.page.fixed
+        ? profile.page.height
+        : ref?.height ?? profile.page.height,
     });
     next.setZIndex(index + 1);
   };
@@ -153,10 +162,18 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
       <IconButton label={t("detailPage.pageToolbar.moveDown")} onClick={() => p.setZIndex(index + 1)} disabled={isLast}>
         <ChevronDown size={17} />
       </IconButton>
-      <IconButton label={t("detailPage.pageToolbar.duplicate")} onClick={() => p.clone()}>
+      <IconButton
+        label={t("detailPage.pageToolbar.duplicate")}
+        onClick={() => p.clone()}
+        disabled={!canAdd}
+      >
         <Copy size={16} />
       </IconButton>
-      <IconButton label={t("detailPage.pageToolbar.addBelow")} onClick={addAfter}>
+      <IconButton
+        label={t("detailPage.pageToolbar.addBelow")}
+        onClick={addAfter}
+        disabled={!canAdd}
+      >
         <Plus size={17} />
       </IconButton>
 

package/components/detail-page/detail-page-pages-panel.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { detailPageEditorProfile } from "../../lib/detail-page/editor-profile";
+
 import { useCallback, useState, useSyncExternalStore } from "react";
 import { observer } from "./canvas-observer";
 import { useTranslation } from "react-i18next";
@@ -252,10 +254,18 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
     [s],
   );
 
-  const totalHeight = Math.round(
-    s.pages.reduce((acc, p) => acc + p.computedHeight, 0),
-  );
+  // 판이 고정 크기면(캐러셀) 높이를 «더하지 않는다». 상세페이지는 세로로 이어진 한 장이라
+  // 합계가 곧 문서 높이지만, 캐러셀은 판이 따로따로라 합계가 아무 뜻이 없다 —
+  // 8판짜리가 1080×10800 으로 보였다.
+  const profile = detailPageEditorProfile();
   const width = Math.round(s.pages[0]?.computedWidth ?? 0);
+  const shownHeight = profile.page.fixed
+    ? Math.round(
+        typeof profile.page.height === "number"
+          ? profile.page.height
+          : s.pages[0]?.computedHeight ?? 0,
+      )
+    : Math.round(s.pages.reduce((acc, p) => acc + p.computedHeight, 0));
 
   return (
     <div className="flex h-full flex-col">
@@ -264,7 +274,7 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
           {t("detailPage.pages.totalPages", { count: s.pages.length })}
         </p>
         <p className="text-xs text-dpe-ink-400">
-          {width} × {totalHeight} px
+          {width} × {shownHeight} px
         </p>
       </div>
 

package/components/detail-page/detail-page-properties-panel.tsx

@@ -94,6 +94,7 @@ import {
 } from "./ai-generate-panel";
 import { toHexColor } from "../../lib/detail-page/css-color";
 import { editorAssetBase } from "../../lib/detail-page/runtime-config";
+import { detailPageEditorProfile } from "../../lib/detail-page/editor-profile";
 import { setZ as setElementZ, zOrderOf } from "../../lib/detail-page/z-order";
 import {
   canDistribute,
@@ -789,6 +790,7 @@ const TextInspector = observer(function TextInspector({
         <div className="grid grid-cols-[1fr_84px] gap-2">
           <DetailPageFontPicker
             value={fontFamily}
+            text={str(ref.text)}
             documentFamilies={fonts}
             onSelect={applyFontFamily}
           />
@@ -2173,6 +2175,7 @@ const PageHeightSection = observer(function PageHeightSection({
   page?: PageLike;
 }) {
   const { t } = useTranslation("branding");
+  const profile = detailPageEditorProfile();
   if (!page) return null;
   const height = Math.round(num(page.computedHeight, MIN_SECTION_HEIGHT));
   const contentBottom = sectionContentBottom(page);
@@ -2180,7 +2183,13 @@ const PageHeightSection = observer(function PageHeightSection({
   // "사라진" 것처럼 보인다 — 지운 게 아니라 화면 밖으로 나간 것이다.
   const overflow = contentBottom > height;
   return (
-    <Section title={t("detailPage.properties.pageHeight")}>
+    <Section
+      title={t(
+        profile.wording === "section"
+          ? "detailPage.properties.pageHeight"
+          : "detailPage.properties.plateHeight",
+      )}
+    >
       <div className="flex items-center gap-1.5">
         <div className="min-w-0 flex-1">
           <NumberField
@@ -2222,11 +2231,12 @@ const PageInspector = observer(function PageInspector({
   dataGifCreditCost?: number;
 }) {
   const { t } = useTranslation("branding");
+  const profile = detailPageEditorProfile();
   const page = store.activePage ?? store.pages[0];
   const bg = str(page?.background, "#ffffff");
   return (
     <>
-      <PageHeightSection page={page} />
+      {profile.page.fixed ? null : <PageHeightSection page={page} />}
       <Section title={t("detailPage.properties.pageBackground")}>
         <FillControl value={bg} onChange={(c) => page?.set?.({ background: c })} />
         <p className="mt-2 text-xs text-dpe-ink-400">

package/config/detail-page-bundle-font-tags.json

@@ -35,5 +35,13 @@
   "samlip-hopang-outline": ["heading", "outline", "rounded"],
   "paperlogy": ["heading", "body", "gothic", "angular"],
   "freesentation": ["body", "gothic"],
-  "diphylleia": ["heading", "myeongjo"]
+  "diphylleia": ["heading", "myeongjo"],
+  "jost": ["heading", "gothic", "rounded"],
+  "bebas-neue": ["heading", "angular"],
+  "anton": ["heading", "angular"],
+  "archivo-black": ["heading", "gothic"],
+  "oswald": ["heading", "gothic", "angular"],
+  "playfair-display": ["heading", "myeongjo", "angular"],
+  "eb-garamond": ["body", "myeongjo"],
+  "parisienne": ["handwriting", "rounded"]
 }

package/i18n/en.json

@@ -112,6 +112,7 @@
         "saveToMyShapes": "Save to brand shapes",
         "aiShapeEdit": "AI shape editing",
         "pageHeight": "Section height",
+        "plateHeight": "Plate height",
         "pageHeightFit": "Fit to content",
         "pageHeightOverflow": "Content reaches {{px}}px and overflows the bottom of this section.",
         "pageHeightHint": "You can also drag the handle below the canvas.",
@@ -123,6 +124,7 @@
         "typeShape": "Shape",
         "selectionCount": "{{count}} selected",
         "fontLatinOnly": "Latin only",
+        "fontLatinOnlyUnavailable": "Latin-only fonts cannot be used for text containing Korean.",
         "fontLoading": "Loading font",
         "chooseFont": "Choose font",
         "fontTagFilter": "Font style",

package/i18n/ko.json

@@ -112,6 +112,7 @@
         "saveToMyShapes": "브랜드 도형에 저장",
         "aiShapeEdit": "AI 도형 편집",
         "pageHeight": "섹션 높이",
+        "plateHeight": "판 높이",
         "pageHeightFit": "내용에 맞추기",
         "pageHeightOverflow": "내용이 {{px}}px까지 내려가 화면 아래로 넘칩니다.",
         "pageHeightHint": "캔버스 아래 손잡이를 끌어서도 바꿀 수 있어요.",
@@ -123,6 +124,7 @@
         "typeShape": "도형",
         "selectionCount": "{{count}}개 선택",
         "fontLatinOnly": "영문 전용",
+        "fontLatinOnlyUnavailable": "한글이 포함된 글자에는 영문 전용 글꼴을 쓸 수 없어요.",
         "fontLoading": "글꼴 불러오는 중",
         "chooseFont": "글꼴 선택",
         "fontTagFilter": "글꼴 종류",

package/lib/cardnews/font-loader.ts

@@ -8,12 +8,12 @@
 
 import {
   FONT_CATALOG,
-  LEVIOSA_KONVA_VERSION,
+  LEVIOSA_CANVAS_FONTS_VERSION,
   catalogFont,
   fontLoadSampleForText,
   resolveFontFamily,
   type CatalogFont,
-} from "@leviosa-ai/konva";
+} from "@leviosa-ai/canvas/fonts";
 
 import { editorAssetBase } from "../detail-page/runtime-config";
 
@@ -54,6 +54,7 @@ export function getClosestSupportedFontWeight(
 
 const loadedFontFaces = new Set<string>();
 const loadedFamilyWeights = new Set<string>();
+const warnedFallbackFaces = new Set<string>();
 const stylesheetPromises = new Map<string, Promise<void>>();
 const FONT_LOAD_SAMPLE = "가나다라마바사아자차카타파하 ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789";
 /**
@@ -84,7 +85,7 @@ const COMMON_HANGUL_SAMPLE =
  * `/render-fonts` 라, 아무것도 안 부른 소비자에게는 주소가 그대로다.
  */
 function bundleUrl(path: string): string {
-  return `${editorAssetBase("fontBundle")}${path}?v=${LEVIOSA_KONVA_VERSION}`;
+  return `${editorAssetBase("fontBundle")}${path}?v=${LEVIOSA_CANVAS_FONTS_VERSION}`;
 }
 
 const localFontCssUrl = () => bundleUrl("/font-css.css");
@@ -220,7 +221,12 @@ function loadFontFacesOnce(requests: FontFaceRequest[]): Promise<void> {
         const descriptor = `${request.weight} ${request.size}px "${request.family}"`;
         const faces = await document.fonts.load(descriptor, request.sample);
         if (faces.length === 0) {
-          throw new FontLoadError(`No bundled font face matched: ${descriptor}`);
+          if (!warnedFallbackFaces.has(descriptor)) {
+            warnedFallbackFaces.add(descriptor);
+            // eslint-disable-next-line no-console
+            console.warn(`[leviosa-canvas] ${descriptor}: bundled font did not match; using browser fallback`);
+          }
+          return;
         }
         const unloadedFace = faces.find((face) => face.status !== "loaded");
         if (unloadedFace) {

package/lib/detail-page/editor-profile.ts

@@ -0,0 +1,43 @@
+import type { LeviosaCanvasDocument } from "../../types/detail-page-canvas";
+
+export type DetailPageEditorFormat = "png" | "jpeg" | "psd" | "svg" | "ai";
+
+export type DetailPageEditorProfile = {
+  page: {
+    width: "document" | number;
+    height: "auto" | number;
+    fixed: boolean;
+  };
+  maxPages: number;
+  exports: readonly DetailPageEditorFormat[];
+  wording: "section" | "plate";
+};
+
+const DETAIL_PAGE_PROFILE: DetailPageEditorProfile = {
+  page: { width: "document", height: "auto", fixed: false },
+  maxPages: Number.POSITIVE_INFINITY,
+  exports: ["png", "jpeg", "psd", "ai", "svg"],
+  wording: "section",
+};
+
+const CAROUSEL_PROFILE: DetailPageEditorProfile = {
+  page: { width: 1080, height: 1350, fixed: true },
+  maxPages: 10,
+  exports: ["jpeg"],
+  wording: "plate",
+};
+
+let current = DETAIL_PAGE_PROFILE;
+
+/** 문서 종류를 읽는 유일한 자리. 종류가 없으면 기존 상세페이지 설정을 쓴다. */
+export function selectDetailPageEditorProfile(
+  document: Pick<LeviosaCanvasDocument, "kind">,
+): DetailPageEditorProfile {
+  current = document.kind === "carousel" ? CAROUSEL_PROFILE : DETAIL_PAGE_PROFILE;
+  return current;
+}
+
+/** 편집기 입구에서 고른 설정표. 안쪽 코드는 문서 종류 대신 이 값만 읽는다. */
+export function detailPageEditorProfile(): DetailPageEditorProfile {
+  return current;
+}

package/lib/detail-page/runtime-config.ts

@@ -41,7 +41,7 @@ export type DetailPageEditorEndpoints = {
 
 export type DetailPageEditorAssets = {
   /**
-   * `@leviosa-ai/konva` 의 `leviosa-konva-fonts` 가 구워 두는 폰트 번들의 뿌리.
+   * `@leviosa-ai/canvas` 의 `leviosa-konva-fonts` 가 구워 두는 폰트 번들의 뿌리.
    * 기본 `${basePath}/render-fonts`.
    */
   fontBundle?: string;

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

@@ -65,7 +65,6 @@ function fromCatalog(font: (typeof DETAIL_PAGE_FONTS)[number]): EditorFont {
     previewSrc: `${editorAssetBase("detailFontPreviews")}/${font.id}.webp`,
     tags: toFontTags(font.tags),
     weights: getDetailPageFontWeights(font),
-    latinOnly: font.latinOnly,
     licenseName: font.licenseName,
     licenseUrl: font.licenseUrl,
     licenseNoteKey: font.licenseNoteKey,
@@ -82,6 +81,7 @@ function fromBundle(font: (typeof ALL_FONT_OPTIONS)[number]): EditorFont {
     previewSrc: `${editorAssetBase("cardnewsFontPreviews")}/${font.id}.webp`,
     tags: bundleFontTags(font.id),
     weights: [...font.weights].sort((a, b) => a - b),
+    latinOnly: (font as { latinOnly?: boolean }).latinOnly,
     licenseName: font.license.name,
     licenseUrl: font.license.url,
   };

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

@@ -13,7 +13,7 @@
  * 그냥 비워 보낸다 — 그 경우 서버의 폴백 폰트로 그려진다.
  */
 
-import { LEVIOSA_KONVA_VERSION } from "@leviosa-ai/konva";
+import { LEVIOSA_CANVAS_FONTS_VERSION } from "@leviosa-ai/canvas/fonts";
 
 import {
   closestDetailPageFontWeight,
@@ -78,7 +78,7 @@ export function resolveGifWebFonts(
     const weight = closestEditorFontWeight(editorFont, face.weight);
     const url = fontBundleAbsoluteUrl(
       origin,
-      `/family-css/${slug}-${weight}.css?v=${LEVIOSA_KONVA_VERSION}`,
+      `/family-css/${slug}-${weight}.css?v=${LEVIOSA_CANVAS_FONTS_VERSION}`,
     );
     // 번들이 상대 경로로 설정돼 있고 오리진도 http 면 서버가 못 받아간다 — 건너뛴다.
     if (!url) continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.7.4",
+  "version": "0.9.0",
   "description": "Leviosa detail-page editor shell. Source-only: consumers compile it through Next transpilePackages. Every app coupling (sourcing server, brand store, cache keys, toast) arrives through the DetailPageHost interface, and every URL it fetches comes from configureDetailPageEditor.",
   "type": "module",
   "license": "UNLICENSED",
@@ -66,8 +66,7 @@
     "woff2-encoder": "2.0.0"
   },
   "peerDependencies": {
-    "@leviosa-ai/canvas": "^0.1.4",
-    "@leviosa-ai/konva": "^0.8.0",
+    "@leviosa-ai/canvas": "0.4.0",
     "@tanstack/react-query": "^5.100.3",
     "konva": "^10.0.0",
     "lucide-react": "^0.563.0 || ^1.0.0",

package/types/detail-page-canvas.ts

@@ -7,13 +7,14 @@ export type CanvasSlotBinding = {
 export type LeviosaCanvasDocument = {
   schema_version: "leviosa-canvas-detail-page-v1";
   renderer: "leviosa_canvas_detail_page";
+  kind?: "detail-page" | "carousel";
   template_id?: string | null;
   template_version?: number | null;
   canvas: {
     width: number;
     background: string;
   };
-  slot_bindings: Record<string, CanvasSlotBinding>;
+  slot_bindings?: Record<string, CanvasSlotBinding>;
   canvas_json: Record<string, unknown>;
   fonts: Array<Record<string, unknown>>;
   source: "leviosa_canvas_editor";