@leviosa-ai/detail-page-editor 0.17.0 → 0.17.2

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

@@ -39,7 +39,7 @@ import {
   detailPageEditorProfile,
   type DetailPageEditorFormat,
 } from "../../lib/detail-page/editor-profile";
-import { MAX_CANVAS_PIXELS } from "../../lib/detail-page/reference-image";
+import { exceededCanvasLimit } from "../../lib/detail-page/canvas-limits";
 
 /**
  * hookable-style 다운로드 팝오버 — 다운로드 버튼 바로 아래에 떠서 **등록 플랫폼을
@@ -332,12 +332,13 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
   const maxBytes = chosen?.maxBytes ?? null;
   // 상세페이지는 세로로 길어서, 병합하면 아트보드 한계를 넘길 수 있다.
   const aiOverflow = isPdfFormat(format) && single && totalHeight > AI_MAX_ARTBOARD;
-  // 병합 PNG/JPG 는 한 캔버스에 쌓는다. 넓이가 브라우저 한계를 넘으면 Safari 는 **빈 그림**을
-  // 내놓으므로 병합을 끄고 페이지별 ZIP 으로 내린다.
-  const mergeTooLarge =
-    isRasterFormat(format) &&
-    selectedPages.length > 1 &&
-    outWidth * outHeight > MAX_CANVAS_PIXELS;
+  // 병합 PNG/JPG 는 한 캔버스에 쌓는다. 이 브라우저의 캔버스 한계를 넘으면 **빈 그림**이
+  // 나오므로 병합을 끄고 페이지별 ZIP 으로 내린다.
+  const mergeLimit =
+    isRasterFormat(format) && selectedPages.length > 1
+      ? exceededCanvasLimit(outWidth, outHeight)
+      : null;
+  const mergeTooLarge = mergeLimit !== null;
   const merge = single && !mergeTooLarge;
 
   // 내려받기가 끝난 뒤. 말할 것이 없으면 창을 닫고, 있으면 열어 둔 채 알린다 —
@@ -638,7 +639,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
                 {mergeTooLarge ? (
                   <p className="text-[10px] leading-relaxed text-le-warn-700">
                     {t("editor.mergeTooLargeHint", {
-                      limit: MAX_CANVAS_PIXELS.toLocaleString(),
+                      limit: mergeLimit?.toLocaleString(),
                     })}
                   </p>
                 ) : null}

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

@@ -0,0 +1,43 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
+/**
+ * 지금 브라우저가 한 캔버스에 그릴 수 있는 크기. 넘기면 예외 없이 **빈 그림**이 나온다.
+ *
+ * 병합 PNG/JPG 는 모든 페이지를 한 캔버스에 쌓으므로 이 한계를 넘으면 페이지별로
+ * 내려야 한다. 한계는 브라우저마다 크게 다르다 — iOS 기준(1,670만 px)을 데스크톱에
+ * 걸면 860×19,000 남짓한 상세페이지부터 전부 쪼개진다.
+ *
+ * - iOS·iPadOS(모든 브라우저가 WebKit): 넓이 16,777,216
+ * - Firefox: 한 변 32,767, 넓이 268,435,456
+ * - 그 외(Chrome·Edge·데스크톱 Safari): 한 변 65,535, 넓이 268,435,456
+ *
+ * 수치는 jhildenbiddle/canvas-size 의 실측표를 따른다.
+ */
+export interface CanvasLimits {
+  /** 한 변의 최대 픽셀. */
+  side: number;
+  /** 넓이(가로×세로)의 최대 픽셀. */
+  area: number;
+}
+
+export function canvasLimits(
+  userAgent = typeof navigator === "undefined" ? "" : navigator.userAgent,
+  maxTouchPoints = typeof navigator === "undefined" ? 0 : navigator.maxTouchPoints,
+): CanvasLimits {
+  // iPadOS 는 데스크톱 Safari 로 자신을 소개한다 — 터치 지점으로 가린다.
+  const ios =
+    /iPad|iPhone|iPod/.test(userAgent) || (/Macintosh/.test(userAgent) && maxTouchPoints > 1);
+  if (ios) return { side: 16_777_216, area: 16_777_216 };
+  if (/Firefox\//.test(userAgent)) return { side: 32_767, area: 268_435_456 };
+  return { side: 65_535, area: 268_435_456 };
+}
+
+/** 이 크기의 캔버스를 그릴 수 없으면 넘긴 한계(px)를, 그릴 수 있으면 null 을 준다. */
+export function exceededCanvasLimit(
+  width: number,
+  height: number,
+  limits: CanvasLimits = canvasLimits(),
+): number | null {
+  if (Math.max(width, height) > limits.side) return limits.side;
+  if (width * height > limits.area) return limits.area;
+  return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.17.0",
+  "version": "0.17.2",
   "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": "SEE LICENSE IN LICENSE",
@@ -68,7 +68,7 @@
     "woff2-encoder": "2.0.0"
   },
   "peerDependencies": {
-    "@leviosa-ai/canvas": "0.9.0",
+    "@leviosa-ai/canvas": "0.9.1",
     "@tanstack/react-query": "^5.100.3",
     "konva": "^10.0.0",
     "lucide-react": "^0.563.0 || ^1.0.0",