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

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

@@ -1,20 +1,12 @@
 "use client";
 
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { EditorHotkeys } from "./editor-hotkeys";
+import { useAutoSave, type SaveReason } from "./use-auto-save";
 import { FindReplacePanel } from "./find-replace-panel";
 
-import {
-  ChevronLeft,
-  Copy,
-  Download,
-  Eye,
-  EyeOff,
-  ListChecks,
-  RefreshCw,
-  Save,
-} from "lucide-react";
+import { ChevronLeft, Save } from "lucide-react";
 
 import {
   applyTextLineFit,
@@ -49,16 +41,28 @@ import type {
   GenerateDataGifFn,
   RemoveBackgroundFn,
 } from "./ai-generate-panel";
-import type {
-  LeviosaCanvasDocument,
-  CanvasSlotBinding,
-} from "../../types/detail-page-canvas";
+import type { LeviosaCanvasDocument } from "../../types/detail-page-canvas";
 
 export type DetailPageEditorProps = {
   initialDocument: LeviosaCanvasDocument;
   saving?: boolean;
   uploadFile?: (file: File) => Promise<string>;
-  onSave: (document: LeviosaCanvasDocument) => Promise<void>;
+  /**
+   * 문서를 저장한다. `reason` 은 왜 지금 저장하는가다 — 앱이 이걸 보고 무거운 뒷일
+   * (상세페이지의 HTML 굽기 같은)을 할지 말지 고른다. 자동저장은 `auto`, 저장 버튼은
+   * `manual`, 탭을 닫거나 편집기를 떠날 때는 `leave` 로 온다.
+   */
+  onSave: (
+    document: LeviosaCanvasDocument,
+    meta: { reason: SaveReason },
+  ) => Promise<void>;
+  /**
+   * 자동저장 간격(ms). 없으면 자동저장을 안 한다.
+   *
+   * 저장이 무거운 화면은 길게 잡는다 — 상세페이지 저장은 서버가 HTML 을 새로 만들어
+   * S3 에 올리고, 캐러셀 저장은 문서 JSON 만 넣는다.
+   */
+  autoSaveDelayMs?: number;
   /** AI 생성 탭의 프롬프트 → 이미지 URL 콜백. 없으면 패널은 안내만 표시. */
   onGenerateImage?: GenerateImageFn;
   /** AI 생성 탭의 프롬프트 → 애니메이션 GIF URL 콜백. 없으면 GIF 모드는 안내만 표시. */
@@ -124,313 +128,12 @@ export type DetailPageEditorProps = {
 
 type CanvasJson = Record<string, unknown>;
 
-type CanvasJsonElement = Record<string, unknown> & {
-  id?: string;
-  type?: string;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-  text?: string;
-  src?: string;
-  custom?: Record<string, unknown>;
-  children?: CanvasJsonElement[];
-};
-
-type SlotInspection = {
-  slot: string;
-  binding?: CanvasSlotBinding;
-  element?: CanvasJsonElement;
-  pageId?: string;
-  state: "ok" | "warning" | "error";
-  message: string;
-};
-
-type TemplateLintIssue = {
-  level: "error" | "warning" | "info";
-  title: string;
-  detail: string;
-  slot?: string;
-  elementId?: string;
-};
-
-type TemplateQaSnapshot = {
-  json: CanvasJson;
-  slots: SlotInspection[];
-  lint: TemplateLintIssue[];
-  summary: string;
-  counts: {
-    pages: number;
-    elements: number;
-    slots: number;
-    errors: number;
-    warnings: number;
-  };
-};
-
-const QA_OVERLAY_CUSTOM_KEY = "leviosaQaOverlay";
-const QA_OVERLAY_PREFIX = "leviosa-qa-overlay";
-
-function asRecord(value: unknown): Record<string, unknown> {
-  return value && typeof value === "object" && !Array.isArray(value)
-    ? (value as Record<string, unknown>)
-    : {};
-}
-
-function asArray(value: unknown): unknown[] {
-  return Array.isArray(value) ? value : [];
-}
-
-function finiteNumber(value: unknown): number | null {
-  return typeof value === "number" && Number.isFinite(value) ? value : null;
-}
-
-function isQaOverlayElement(element: CanvasJsonElement): boolean {
-  return element.id?.startsWith(`${QA_OVERLAY_PREFIX}-`) === true ||
-    element.custom?.[QA_OVERLAY_CUSTOM_KEY] === true;
-}
-
-function walkElements(
-  json: CanvasJson,
-  visitor: (element: CanvasJsonElement, page: Record<string, unknown>) => void,
-) {
-  for (const page of asArray(json.pages) as Array<Record<string, unknown>>) {
-    const visit = (element: CanvasJsonElement) => {
-      visitor(element, page);
-      for (const child of asArray(element.children) as CanvasJsonElement[]) {
-        visit(child);
-      }
-    };
-    for (const element of asArray(page.children) as CanvasJsonElement[]) {
-      visit(element);
-    }
-  }
-}
-
-function stripQaOverlayElements(json: CanvasJson): CanvasJson {
-  const clone = JSON.parse(JSON.stringify(json)) as CanvasJson;
-  const strip = (elements: CanvasJsonElement[]): CanvasJsonElement[] =>
-    elements
-      .filter((element) => !isQaOverlayElement(element))
-      .map((element) => ({
-        ...element,
-        children: Array.isArray(element.children)
-          ? strip(element.children)
-          : element.children,
-      }));
-
-  clone.pages = (asArray(clone.pages) as Array<Record<string, unknown>>).map((page) => ({
-    ...page,
-    children: strip(asArray(page.children) as CanvasJsonElement[]),
-  }));
-  return clone;
-}
-
-function getSlotFromElement(element: CanvasJsonElement): string {
-  const custom = asRecord(element.custom);
-  return typeof custom.leviosaSlot === "string" ? custom.leviosaSlot : "";
-}
-
-function getElementKind(element?: CanvasJsonElement): CanvasSlotBinding["kind"] | null {
-  if (!element) return null;
-  if (element.type === "image") return "image";
-  if (element.type === "text") return "text";
-  return null;
-}
-
-function formatRect(element?: CanvasJsonElement): string {
-  if (!element) return "-";
-  const x = finiteNumber(element.x) ?? 0;
-  const y = finiteNumber(element.y) ?? 0;
-  const width = finiteNumber(element.width) ?? 0;
-  const height = finiteNumber(element.height) ?? 0;
-  return `${Math.round(x)}, ${Math.round(y)} / ${Math.round(width)} x ${Math.round(height)}`;
-}
-
-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 }>();
-  const slotByElementId = new Map<string, string[]>();
-  const slotsFromElements = new Map<string, { element: CanvasJsonElement; pageId?: string }>();
-  let elementCount = 0;
-
-  walkElements(cleanJson, (element, page) => {
-    elementCount += 1;
-    if (element.id) {
-      const pageId = typeof page.id === "string" ? page.id : undefined;
-      elementById.set(element.id, { element, pageId });
-      const slot = getSlotFromElement(element);
-      if (slot) slotsFromElements.set(slot, { element, pageId });
-    }
-  });
-
-  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(slotBindings)
-    .sort(([a], [b]) => a.localeCompare(b))
-    .map(([slot, binding]) => {
-      const target = elementById.get(binding.element_id);
-      const element = target?.element;
-      const inferredKind = getElementKind(element);
-      let state: SlotInspection["state"] = "ok";
-      let message = "연결됨";
-
-      if (!element) {
-        state = "error";
-        message = "바인딩 대상 요소가 없습니다";
-        lint.push({
-          level: "error",
-          title: "Missing binding target",
-          detail: `${binding.element_id} 요소를 찾을 수 없습니다.`,
-          slot,
-          elementId: binding.element_id,
-        });
-      } else if (inferredKind && inferredKind !== binding.kind) {
-        state = "warning";
-        message = `${binding.kind} 슬롯이 ${element.type} 요소에 연결됨`;
-        lint.push({
-          level: "warning",
-          title: "Slot kind mismatch",
-          detail: `${binding.kind} 슬롯이 ${element.type} 요소에 연결되어 있습니다.`,
-          slot,
-          elementId: binding.element_id,
-        });
-      }
-
-      if (element?.type === "text" && !String(element.text ?? "").trim()) {
-        state = state === "error" ? state : "warning";
-        message = "텍스트가 비어 있습니다";
-        lint.push({
-          level: "warning",
-          title: "Empty text slot",
-          detail: "텍스트 요소에 표시할 문구가 없습니다.",
-          slot,
-          elementId: binding.element_id,
-        });
-      }
-
-      if (element?.type === "image" && !String(element.src ?? "").trim()) {
-        state = state === "error" ? state : "warning";
-        message = "이미지 URL이 비어 있습니다";
-        lint.push({
-          level: "warning",
-          title: "Empty image slot",
-          detail: "이미지 요소에 src가 없습니다.",
-          slot,
-          elementId: binding.element_id,
-        });
-      }
-
-      const width = finiteNumber(element?.width);
-      const height = finiteNumber(element?.height);
-      if (element && (width === null || height === null || width <= 0 || height <= 0)) {
-        state = state === "error" ? state : "warning";
-        message = "요소 크기를 확인하세요";
-        lint.push({
-          level: "warning",
-          title: "Invalid element bounds",
-          detail: "요소의 width 또는 height가 0 이하입니다.",
-          slot,
-          elementId: binding.element_id,
-        });
-      }
-
-      return {
-        slot,
-        binding,
-        element,
-        pageId: target?.pageId,
-        state,
-        message,
-      };
-    });
-
-  for (const [elementId, slotNames] of slotByElementId) {
-    if (slotNames.length > 1) {
-      lint.push({
-        level: "warning",
-        title: "Duplicate element binding",
-        detail: `${slotNames.join(", ")} 슬롯이 같은 요소를 공유합니다.`,
-        elementId,
-      });
-    }
-  }
-
-  for (const [slot, target] of slotsFromElements) {
-    if (!slotBindings[slot]) {
-      lint.push({
-        level: "info",
-        title: "Unregistered slot marker",
-        detail: "요소 custom.leviosaSlot은 있지만 slot_bindings에는 없습니다.",
-        slot,
-        elementId: target.element.id,
-      });
-    }
-  }
-
-  const canvasWidth = finiteNumber(document.canvas.width);
-  const jsonWidth = finiteNumber(cleanJson.width);
-  if (canvasWidth && jsonWidth && canvasWidth !== jsonWidth) {
-    lint.push({
-      level: "warning",
-      title: "Canvas width drift",
-      detail: `문서 canvas.width ${canvasWidth}와 문서 JSON width ${jsonWidth}가 다릅니다.`,
-    });
-  }
-
-  const errors = lint.filter((issue) => issue.level === "error").length;
-  const warnings = lint.filter((issue) => issue.level === "warning").length;
-  const summary = [
-    `Template: ${document.template_id ?? "unspecified"} v${document.template_version ?? "-"}`,
-    `Canvas: ${cleanJson.width ?? document.canvas.width} x ${cleanJson.height ?? "-"}`,
-    `Pages: ${pages.length}, Elements: ${elementCount}, Slots: ${slots.length}`,
-    `Lint: ${errors} errors, ${warnings} warnings`,
-    "",
-    "Slots",
-    ...slots.map(
-      (slot) =>
-        `- ${slot.slot}: ${slot.state.toUpperCase()} | ${slot.binding?.kind ?? "-"} | ${slot.binding?.element_id ?? "-"} | ${formatRect(slot.element)} | ${slot.message}`,
-    ),
-    "",
-    "Lint",
-    ...(lint.length
-      ? lint.map(
-          (issue) =>
-            `- ${issue.level.toUpperCase()}: ${issue.title}${issue.slot ? ` (${issue.slot})` : ""} - ${issue.detail}`,
-        )
-      : ["- PASS: template lint found no blocking issues"]),
-  ].join("\n");
-
-  return {
-    json: cleanJson,
-    slots,
-    lint,
-    summary,
-    counts: {
-      pages: pages.length,
-      elements: elementCount,
-      slots: slots.length,
-      errors,
-      warnings,
-    },
-  };
-}
-
 export function DetailPageEditor({
   initialDocument,
   saving = false,
   uploadFile,
   onSave,
+  autoSaveDelayMs,
   onGenerateImage,
   onGenerateGif,
   onGenerateTextGif,
@@ -467,25 +170,23 @@ export function DetailPageEditor({
   const [saveOk, setSaveOk] = useState(false);
   // 편집 한도 소진 시 "편집 크레딧 추가하기" → pricing 모달을 인플레이스로 연다.
   const [pricingOpen, setPricingOpen] = useState(false);
-  const [qaJson, setQaJson] = useState<CanvasJson>(initialDocument.canvas_json);
-  const [overlayEnabled, setOverlayEnabled] = useState(false);
-  const [summaryCopied, setSummaryCopied] = useState(false);
   // 어댑터를 안 거친다. `adaptLeviosaCustomProps`는 SDK가 **못 읽는** 장식을 읽을 수
   // 있는 모양으로 낮춰 주던 일이었고(그림자·그라데이션 → 대표 단색), 우리 렌더러는
   // 그 필드들을 원본 그대로 읽는다. 낮춘 것을 넣으면 오히려 원본보다 못한 그림이 된다.
   // 브랜드 자산 주소는 바이트 경로로 옮겨서 연다 — 302 를 따라가면 CORS 가 깨져서
   // 캔버스가 그림을 못 읽는다(asset-bytes-url 에 실측 표를 적어 뒀다).
-  const store = useMemo(() => {
+  // 문서는 편집기가 열릴 때 **한 번만** 읽는다. 저장이 끝나고 앱이 서버가 돌려준
+  // 문서를 도로 넣어도 캔버스를 다시 만들지 않는다 — 다시 만들면 되돌리기 100단과
+  // 선택이 통째로 날아간다. 저장 버튼 한 번에 ⌘Z 가 죽던 것이 그 증상이었고,
+  // 자동저장이 붙으면 몇 초마다 그렇게 된다.
+  //
+  // 정말로 다른 문서를 여는 것은 부르는 쪽이 `key` 로 다시 마운트한다.
+  const [store] = useState(() => {
     ensureCanvasKey();
     return createCanvasStore(
       normalizeDocumentAssetSrcs(initialDocument.canvas_json) as DocumentJson,
     );
-  }, [initialDocument.canvas_json]);
-
-  const qaSnapshot = useMemo(
-    () => buildQaSnapshot(initialDocument, qaJson),
-    [initialDocument, qaJson],
-  );
+  });
 
   // 글꼴 준비. 문서가 쓰는 얼굴을 전부 받아 놓고, 다 온 뒤에 줄바꿈 손질
   // (`applyTextLineFit`)을 한 번 돌린다 — 폴백 서체로 재면 과대측정해서 손질이
@@ -506,159 +207,30 @@ export function DetailPageEditor({
     };
   }, [store]);
 
-  useEffect(() => {
-    // Initial sync is immediate so the QA panel is populated on mount.
-    setQaJson(stripQaOverlayElements(store.toJSON() as CanvasJson));
-
-    // 스토어는 요소를 끄는 내내 "change"를 계속 쏜다 — 끌기·크기조절·타이핑 모두.
-    // or typed into. Recomputing the QA snapshot on every event deep-clones and
-    // walks the whole document many times per second, which freezes the canvas
-    // layer on large detail-page documents. The QA panel does not need live
-    // updates mid-gesture, so coalesce changes with a trailing debounce: the
-    // snapshot refreshes ~300ms after the user stops interacting.
-    let timer: ReturnType<typeof setTimeout> | null = null;
-    // 바뀐 문서를 이벤트에 실어 받지 않고 **잠잠해진 뒤에** 한 번 읽는다. 글자 한 자마다
-    // 문서 전체를 직렬화해 넘기면 그 비용이 타이핑 지연으로 그대로 보인다.
-    const flush = () => {
-      timer = null;
-      setQaJson(stripQaOverlayElements(store.toJSON() as CanvasJson));
-    };
-    const off = store.on("change", () => {
-      if (timer) clearTimeout(timer);
-      timer = setTimeout(flush, 300);
-    });
-    return () => {
-      if (timer) clearTimeout(timer);
-      off();
-    };
-  }, [store]);
-
-  useEffect(() => {
-    setSummaryCopied(false);
-  }, [qaSnapshot.summary]);
-
-  const removeOverlayElements = () => {
-    const ids: string[] = [];
-    walkElements(store.toJSON() as CanvasJson, (element) => {
-      if (element.id && isQaOverlayElement(element)) ids.push(element.id);
-    });
-    if (ids.length) store.deleteElements(ids);
-  };
-
-  const addOverlayElements = () => {
-    removeOverlayElements();
-    const cleanJson = qaSnapshot.json;
-    const pages = asArray(cleanJson.pages) as Array<Record<string, unknown>>;
-    for (const slot of qaSnapshot.slots) {
-      if (!slot.element || !slot.element.id || !slot.pageId) continue;
-      const pageIndex = pages.findIndex((page) => page.id === slot.pageId);
-      const page = store.pages[pageIndex >= 0 ? pageIndex : 0];
-      if (!page) continue;
-      const x = finiteNumber(slot.element.x) ?? 0;
-      const y = finiteNumber(slot.element.y) ?? 0;
-      const width = Math.max(finiteNumber(slot.element.width) ?? 1, 1);
-      const height = Math.max(finiteNumber(slot.element.height) ?? 1, 1);
-      const color = slot.state === "error" ? "#dc2626" : slot.state === "warning" ? "#d97706" : "#059669";
-      page.addElement(
-        {
-          id: `${QA_OVERLAY_PREFIX}-box-${slot.element.id}`,
-          type: "figure",
-          subType: "rect",
-          x,
-          y,
-          width,
-          height,
-          fill: "rgba(255,255,255,0)",
-          stroke: color,
-          strokeWidth: 3,
-          dash: [10, 6] as never,
-          selectable: false,
-          removable: false,
-          alwaysOnTop: true,
-          showInExport: false,
-          custom: { [QA_OVERLAY_CUSTOM_KEY]: true, slot: slot.slot },
-        },
-        { skipSelect: true },
-      );
-      page.addElement(
-        {
-          id: `${QA_OVERLAY_PREFIX}-label-${slot.element.id}`,
-          type: "text",
-          x,
-          y: Math.max(0, y - 30),
-          width: Math.max(120, Math.min(width, 320)),
-          height: 24,
-          text: slot.slot,
-          fontSize: 14,
-          fontWeight: "700",
-          fill: "#ffffff",
-          backgroundEnabled: true,
-          backgroundColor: color,
-          backgroundOpacity: 0.92,
-          backgroundCornerRadius: 4,
-          backgroundPadding: 6,
-          selectable: false,
-          removable: false,
-          alwaysOnTop: true,
-          showInExport: false,
-          custom: { [QA_OVERLAY_CUSTOM_KEY]: true, slot: slot.slot },
-        },
-        { skipSelect: true },
-      );
-    }
-  };
-
-  useEffect(() => {
-    if (overlayEnabled) addOverlayElements();
-    else removeOverlayElements();
-    return removeOverlayElements;
-    // The overlay is intentionally regenerated from the latest QA snapshot.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [overlayEnabled, qaSnapshot.summary, store]);
-
-  const handleSave = async () => {
-    setSaveError(null);
-    setSaveOk(false);
-    try {
-      // Drop QA overlays and revert gray image placeholders to empty src so the
-      // persisted document never carries the editor-only placeholder.
-      const cleanJson = clearPlaceholderImageSrc(
-        stripQaOverlayElements(store.toJSON() as CanvasJson),
-      );
-      await onSave({
-        ...initialDocument,
-        canvas_json: cleanJson,
-      });
-      setSaveOk(true);
-    } catch (error) {
-      setSaveError(error instanceof Error ? error.message : t("editor.saveError"));
-    }
-  };
-
-  const handleRefreshQa = () => {
-    setQaJson(stripQaOverlayElements(store.toJSON() as CanvasJson));
-  };
-
-  const handleSelectSlot = (slot: SlotInspection) => {
-    if (slot.binding?.element_id) {
-      store.selectElements([slot.binding.element_id]);
-    }
-  };
+  const documentRef = useRef(initialDocument);
+  documentRef.current = initialDocument;
+
+  const runSave = useCallback(
+    async (reason: SaveReason) => {
+      setSaveError(null);
+      setSaveOk(false);
+      try {
+        // 회색 자리표시 이미지는 빈 src 로 되돌려 저장한다 — 편집기에서만 쓰는 그림이다.
+        const cleanJson = clearPlaceholderImageSrc(store.toJSON() as CanvasJson);
+        await onSave({ ...documentRef.current, canvas_json: cleanJson }, { reason });
+        setSaveOk(true);
+      } catch (error) {
+        setSaveError(error instanceof Error ? error.message : t("editor.saveError"));
+        // 자동저장은 조용히 넘어가지만 실패는 알려 줘야 다음에 다시 보낸다.
+        if (reason !== "manual") throw error;
+      }
+    },
+    [onSave, store, t],
+  );
 
-  const handleCopySummary = async () => {
-    await navigator.clipboard.writeText(qaSnapshot.summary);
-    setSummaryCopied(true);
-  };
+  const handleSave = useCallback(() => void runSave("manual"), [runSave]);
 
-  const handleDownloadSummary = () => {
-    const blob = new Blob([qaSnapshot.summary], { type: "text/plain;charset=utf-8" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${initialDocument.template_id ?? "canvas-template"}-qa-summary.txt`;
-    link.click();
-    URL.revokeObjectURL(url);
-  };
+  const unsaved = useAutoSave({ store, delayMs: autoSaveDelayMs, save: runSave });
 
   // The canvas subtree only depends on the stable store and sidebar
   // contract. Memoize it so QA/save/overlay updates never recreate the heavy
@@ -837,174 +409,6 @@ export function DetailPageEditor({
               dataGifCreditCost={dataGifCreditCost}
             />
           </div>
-
-          {/* Template QA / slot inspector / lint — authoring tools, not seller-facing. */}
-          <details className="border-t border-dpe-ink-200">
-            <summary className="cursor-pointer p-4 text-xs font-dpe-semibold uppercase tracking-[0.06em] text-dpe-ink-400 hover:text-dpe-ink-600">
-              개발자 도구 · 템플릿 QA
-            </summary>
-            <div className="flex max-h-[55vh] min-h-0 flex-col overflow-y-auto">
-          <div className="border-b border-dpe-ink-200 p-4">
-            <div className="flex items-center justify-between gap-3">
-              <div>
-                <h2 className="flex items-center gap-2 text-sm font-dpe-semibold text-dpe-ink-950">
-                  <ListChecks aria-hidden="true" size={16} />
-                  {t("editor.qaTitle")}
-                </h2>
-                <p className="mt-1 text-xs text-dpe-ink-500">
-                  {qaSnapshot.counts.pages} pages / {qaSnapshot.counts.elements} elements /{" "}
-                  {qaSnapshot.counts.slots} slots
-                </p>
-              </div>
-              <button
-                type="button"
-                onClick={handleRefreshQa}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-dpe-md border border-dpe-ink-200 text-dpe-ink-600 hover:bg-dpe-ink-50"
-                title={t("editor.refreshQa")}
-              >
-                <RefreshCw aria-hidden="true" size={15} />
-              </button>
-            </div>
-            <div className="mt-4 grid grid-cols-3 gap-2 text-center text-xs">
-              <div className="rounded-dpe-md border border-dpe-ink-200 p-2">
-                <div className="text-base font-dpe-semibold text-dpe-ink-950">{qaSnapshot.counts.slots}</div>
-                <div className="text-dpe-ink-500">slots</div>
-              </div>
-              <div className="rounded-dpe-md border border-dpe-danger-100 bg-dpe-danger-50 p-2">
-                <div className="text-base font-dpe-semibold text-dpe-danger-700">{qaSnapshot.counts.errors}</div>
-                <div className="text-dpe-danger-600">errors</div>
-              </div>
-              <div className="rounded-dpe-md border border-dpe-warn-100 bg-dpe-warn-50 p-2">
-                <div className="text-base font-dpe-semibold text-dpe-warn-700">{qaSnapshot.counts.warnings}</div>
-                <div className="text-dpe-warn-600">warnings</div>
-              </div>
-            </div>
-            <div className="mt-4 flex gap-2">
-              <button
-                type="button"
-                onClick={() => setOverlayEnabled((value) => !value)}
-                className="inline-flex h-9 flex-1 items-center justify-center gap-2 rounded-dpe-md border border-dpe-ink-200 text-xs font-dpe-semibold text-dpe-ink-700 hover:bg-dpe-ink-50"
-              >
-                {overlayEnabled ? <EyeOff aria-hidden="true" size={15} /> : <Eye aria-hidden="true" size={15} />}
-                {overlayEnabled ? t("editor.overlayOff") : t("editor.overlayOn")}
-              </button>
-              <button
-                type="button"
-                onClick={handleCopySummary}
-                className="inline-flex h-9 w-9 items-center justify-center rounded-dpe-md border border-dpe-ink-200 text-dpe-ink-700 hover:bg-dpe-ink-50"
-                title={t("editor.copySummary")}
-              >
-                <Copy aria-hidden="true" size={15} />
-              </button>
-              <button
-                type="button"
-                onClick={handleDownloadSummary}
-                className="inline-flex h-9 w-9 items-center justify-center rounded-dpe-md border border-dpe-ink-200 text-dpe-ink-700 hover:bg-dpe-ink-50"
-                title={t("editor.downloadSummary")}
-              >
-                <Download aria-hidden="true" size={15} />
-              </button>
-            </div>
-            {summaryCopied ? (
-              <p className="mt-2 text-xs font-dpe-medium text-dpe-ok-600">{t("editor.summaryCopied")}</p>
-            ) : null}
-          </div>
-
-          <div className="min-h-0 flex-1 overflow-y-auto p-4">
-            <section>
-              <h3 className="text-xs font-dpe-semibold uppercase tracking-[0.08em] text-dpe-ink-500">
-                {t("editor.slotInspector")}
-              </h3>
-              <div className="mt-3 space-y-2">
-                {qaSnapshot.slots.length ? (
-                  qaSnapshot.slots.map((slot) => (
-                    <button
-                      key={slot.slot}
-                      type="button"
-                      onClick={() => handleSelectSlot(slot)}
-                      className="w-full rounded-dpe-md border border-dpe-ink-200 p-3 text-left hover:border-dpe-ink-300 hover:bg-dpe-ink-50"
-                    >
-                      <div className="flex items-center justify-between gap-2">
-                        <span className="truncate text-sm font-dpe-semibold text-dpe-ink-950">{slot.slot}</span>
-                        <span
-                          className={
-                            slot.state === "error"
-                              ? "text-xs font-dpe-semibold text-dpe-danger-600"
-                              : slot.state === "warning"
-                                ? "text-xs font-dpe-semibold text-dpe-warn-600"
-                                : "text-xs font-dpe-semibold text-dpe-ok-600"
-                          }
-                        >
-                          {slot.state}
-                        </span>
-                      </div>
-                      <p className="mt-1 truncate text-xs text-dpe-ink-500">
-                        {slot.binding?.kind ?? "-"} / {slot.binding?.element_id ?? "-"}
-                      </p>
-                      <p className="mt-1 text-xs text-dpe-ink-600">{formatRect(slot.element)}</p>
-                      <p className="mt-2 text-xs text-dpe-ink-500">{slot.message}</p>
-                    </button>
-                  ))
-                ) : (
-                  <p className="rounded-dpe-md border border-dpe-ink-200 p-3 text-sm text-dpe-ink-500">
-                    {t("editor.noSlots")}
-                  </p>
-                )}
-              </div>
-            </section>
-
-            <section className="mt-6">
-              <h3 className="text-xs font-dpe-semibold uppercase tracking-[0.08em] text-dpe-ink-500">
-                {t("editor.templateLint")}
-              </h3>
-              <div className="mt-3 space-y-2">
-                {qaSnapshot.lint.length ? (
-                  qaSnapshot.lint.map((issue, index) => (
-                    <div
-                      key={`${issue.title}-${issue.slot ?? issue.elementId ?? index}`}
-                      className="rounded-dpe-md border border-dpe-ink-200 p-3"
-                    >
-                      <div className="flex items-center justify-between gap-2">
-                        <p className="text-sm font-dpe-semibold text-dpe-ink-950">{issue.title}</p>
-                        <span
-                          className={
-                            issue.level === "error"
-                              ? "text-xs font-dpe-semibold text-dpe-danger-600"
-                              : issue.level === "warning"
-                                ? "text-xs font-dpe-semibold text-dpe-warn-600"
-                                : "text-xs font-dpe-semibold text-dpe-active-600"
-                          }
-                        >
-                          {issue.level}
-                        </span>
-                      </div>
-                      <p className="mt-1 text-xs leading-5 text-dpe-ink-600">{issue.detail}</p>
-                      {issue.slot || issue.elementId ? (
-                        <p className="mt-2 truncate text-xs text-dpe-ink-400">
-                          {[issue.slot, issue.elementId].filter(Boolean).join(" / ")}
-                        </p>
-                      ) : null}
-                    </div>
-                  ))
-                ) : (
-                  <div className="rounded-dpe-md border border-dpe-ok-100 bg-dpe-ok-50 p-3 text-sm font-dpe-medium text-dpe-ok-700">
-                    {t("editor.lintPassed")}
-                  </div>
-                )}
-              </div>
-            </section>
-
-            <section className="mt-6">
-              <h3 className="text-xs font-dpe-semibold uppercase tracking-[0.08em] text-dpe-ink-500">
-                {t("editor.designerSummary")}
-              </h3>
-              <pre className="mt-3 max-h-72 overflow-auto rounded-dpe-md border border-dpe-ink-200 bg-dpe-ink-50 p-3 text-xs leading-5 text-dpe-ink-700">
-                {qaSnapshot.summary}
-              </pre>
-            </section>
-          </div>
-            </div>
-          </details>
         </aside>
   );
   // 인스펙터는 감싸 쓰는 경우가 더 많다 — 자기 크롬만 두르고 속은 그대로 둔다.
@@ -1018,7 +422,7 @@ export function DetailPageEditor({
     <HeaderSlot
       productName={productName?.trim() || t("editor.untitled")}
       onBack={onBack}
-      save={{ run: handleSave, saving, ok: saveOk, error: saveError }}
+      save={{ run: handleSave, saving, ok: saveOk, error: saveError, unsaved }}
       parts={{
         history: historyPart,
         download: downloadPart,