@leviosa-ai/detail-page-editor 0.2.2 → 0.3.1

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

@@ -329,7 +329,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
         onClick={() => setOpen((v) => !v)}
         aria-haspopup="dialog"
         aria-expanded={open}
-        className="inline-flex h-9 items-center gap-2 rounded-md bg-neutral-900 px-3 text-sm font-semibold text-white transition-colors hover:bg-neutral-800"
+        className="inline-flex h-9 items-center gap-2 rounded-dpe-md bg-dpe-ink-900 px-3 text-sm font-dpe-semibold text-dpe-on-accent transition-colors hover:bg-dpe-ink-800"
       >
         <Download aria-hidden="true" size={16} />
         {t("editor.download")}
@@ -339,17 +339,17 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
         <div
           role="dialog"
           aria-label={t("editor.downloadTitle")}
-          className="absolute right-0 top-[calc(100%+8px)] z-50 w-80 rounded-xl border border-neutral-200 bg-white p-4 shadow-[0_12px_40px_rgba(0,0,0,0.16)]"
+          className="absolute right-0 top-[calc(100%+8px)] z-50 w-80 rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface p-4 shadow-[0_12px_40px_rgba(0,0,0,0.16)]"
         >
           <div className="mb-3 flex items-center justify-between">
-            <h3 className="text-base font-semibold text-neutral-950">
+            <h3 className="text-base font-dpe-semibold text-dpe-ink-950">
               {t("editor.downloadTitle")}
             </h3>
             <button
               type="button"
               onClick={() => setOpen(false)}
               aria-label={t("editor.close")}
-              className="flex h-7 w-7 items-center justify-center rounded-md text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700"
+              className="flex h-7 w-7 items-center justify-center rounded-dpe-md text-dpe-ink-400 hover:bg-dpe-ink-100 hover:text-dpe-ink-700"
             >
               <X size={16} />
             </button>
@@ -357,11 +357,11 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
 
           <div className="space-y-3">
             <div className="space-y-1.5">
-              <Label className="text-xs text-neutral-500">{t("editor.fileFormat")}</Label>
+              <Label className="text-xs text-dpe-ink-500">{t("editor.fileFormat")}</Label>
               <Select value={format} onValueChange={(v) => setFormat(v as Format)}>
                 <SelectTrigger className="w-full">
                   <span className="inline-flex items-center gap-2">
-                    <ImageIcon size={15} className="text-neutral-500" />
+                    <ImageIcon size={15} className="text-dpe-ink-500" />
                     <SelectValue />
                   </span>
                 </SelectTrigger>
@@ -376,7 +376,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
             </div>
 
             <div className="space-y-1.5">
-              <Label className="text-xs text-neutral-500">
+              <Label className="text-xs text-dpe-ink-500">
                 {t("editor.registerPlatform")}
               </Label>
               <Select value={platform} onValueChange={setPlatform}>
@@ -394,7 +394,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
             </div>
 
             <div className="space-y-1.5">
-              <Label className="text-xs text-neutral-500">{t("editor.pageScope")}</Label>
+              <Label className="text-xs text-dpe-ink-500">{t("editor.pageScope")}</Label>
               <Select value={scope} onValueChange={(v) => setScope(v as Scope)}>
                 <SelectTrigger className="w-full">
                   <SelectValue />
@@ -412,7 +412,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
             {format !== "psd" ? (
               <label className="flex cursor-pointer items-center gap-2.5 py-0.5">
                 <Switch checked={single} onCheckedChange={setSingle} />
-                <span className="text-sm text-neutral-700">
+                <span className="text-sm text-dpe-ink-700">
                   {format === "ai"
                     ? t("editor.mergeArtboard")
                     : format === "svg"
@@ -425,8 +425,8 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
             {isRasterFormat(format) ? (
               <div className="space-y-1.5">
                 <div className="flex items-center justify-between">
-                  <Label className="text-xs text-neutral-500">{t("editor.resolution")}</Label>
-                  <span className="text-xs font-semibold text-neutral-700">{resolution}×</span>
+                  <Label className="text-xs text-dpe-ink-500">{t("editor.resolution")}</Label>
+                  <span className="text-xs font-dpe-semibold text-dpe-ink-700">{resolution}×</span>
                 </div>
                 <Slider
                   min={1}
@@ -435,7 +435,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
                   value={[resolution]}
                   onValueChange={(v) => setResolution(v[0] ?? 1)}
                 />
-                <div className="flex justify-between text-[10px] text-neutral-400">
+                <div className="flex justify-between text-[10px] text-dpe-ink-400">
                   <span>1×</span>
                   <span>4×</span>
                 </div>
@@ -447,7 +447,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
                 선택은 픽셀 형식일 때만 의미가 있다. */}
             {hasAnimation && isRasterFormat(format) ? (
               <div className="space-y-1.5">
-                <Label className="text-xs text-neutral-500">
+                <Label className="text-xs text-dpe-ink-500">
                   {t("editor.animationFormat")}
                 </Label>
                 <Select
@@ -465,7 +465,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
                     ))}
                   </SelectContent>
                 </Select>
-                <p className="text-[10px] leading-relaxed text-neutral-400">
+                <p className="text-[10px] leading-relaxed text-dpe-ink-400">
                   {t(
                     ANIMATION_FORMATS.find((f) => f.value === animationFormat)?.hintKey ??
                       "",
@@ -474,8 +474,8 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
               </div>
             ) : null}
 
-            <div className="rounded-lg bg-neutral-50 p-3 text-xs text-neutral-600">
-              <p className="mb-1 font-semibold text-neutral-700">{t("editor.downloadInfo")}</p>
+            <div className="rounded-dpe-lg bg-dpe-ink-50 p-3 text-xs text-dpe-ink-600">
+              <p className="mb-1 font-dpe-semibold text-dpe-ink-700">{t("editor.downloadInfo")}</p>
               <ul className="space-y-0.5">
                 <li>• {t("editor.pagesCount", { count: selectedPages.length })}</li>
                 <li>
@@ -488,7 +488,7 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
                 {format === "svg" ? <li>• {t("editor.svgNote")}</li> : null}
                 {format === "ai" ? <li>• {t("editor.aiNote")}</li> : null}
                 {aiOverflow ? (
-                  <li className="text-amber-700">
+                  <li className="text-dpe-warn-700">
                     • {t("editor.aiOverflowNote", { limit: AI_MAX_ARTBOARD.toLocaleString() })}
                   </li>
                 ) : null}
@@ -496,14 +496,14 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
             </div>
 
             {error ? (
-              <p className="text-xs font-medium text-red-600">{error}</p>
+              <p className="text-xs font-dpe-medium text-dpe-danger-600">{error}</p>
             ) : null}
 
             <Button
               type="button"
               onClick={handleExport}
               disabled={exporting || selectedPages.length === 0}
-              className="h-11 w-full bg-neutral-900 text-sm font-semibold hover:bg-neutral-800"
+              className="h-11 w-full bg-dpe-ink-900 text-sm font-dpe-semibold hover:bg-dpe-ink-800"
             >
               {exporting ? (
                 <>

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

@@ -444,6 +444,10 @@ export function DetailPageEditor({
   const { t } = useTranslation("branding");
   // 요금제 모달은 호스트가 꽂는다 — 편집기가 열지만 무엇을 얼마에 파는지는 앱이 안다.
   const { slots } = useDetailPageHost();
+  // 영역 슬롯. 색·모서리는 토큰으로 바꾸지만, 무엇이 어디에 놓이는가는 앱이 정한다.
+  const SidebarSlot = slots?.EditorSidebar;
+  const HeaderSlot = slots?.EditorHeader;
+  const InspectorSlot = slots?.EditorInspector;
   const [saveError, setSaveError] = useState<string | null>(null);
   const [saveOk, setSaveOk] = useState(false);
   // 편집 한도 소진 시 "편집 크레딧 추가하기" → pricing 모달을 인플레이스로 연다.
@@ -682,61 +686,72 @@ export function DetailPageEditor({
     return (
       <div className="absolute inset-0 flex">
         {hotkeys}
-        <LeviosaSidePanel
-          store={store}
-          sections={sidebarSections as never}
-          defaultSection="pages"
-        />
+        {SidebarSlot ? (
+          <SidebarSlot
+            store={store}
+            sections={sidebarSections as never}
+            defaultSection="pages"
+          />
+        ) : (
+          <LeviosaSidePanel
+            store={store}
+            sections={sidebarSections as never}
+            defaultSection="pages"
+          />
+        )}
         <div className="relative min-w-0 flex-1">
           <LeviosaCanvasWorkspace store={store} gap={4}>
             {findReplace}
             <DetailPagePagesTimeline store={store} />
           </LeviosaCanvasWorkspace>
-          <div className="absolute bottom-16 left-1/2 z-20 -translate-x-1/2 rounded-lg border border-neutral-200 bg-white/95 px-2 py-1 shadow-sm backdrop-blur-sm">
+          <div className="absolute bottom-16 left-1/2 z-20 -translate-x-1/2 rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface/95 px-2 py-1 shadow-sm backdrop-blur-sm">
             <LeviosaZoomButtons store={store} />
           </div>
         </div>
       </div>
     );
-  }, [store, sidebarSections]);
+  }, [store, sidebarSections, SidebarSlot]);
 
-  return (
-    // 꽂혀 있으면 `observer`로 싼 패널·오버레이가 이 스토어의 변경 신호를 받는다
-    // (canvas-observer.tsx).
-    <CanvasStoreContext.Provider value={store}>
-    <div className="flex h-screen min-h-[640px] flex-col bg-neutral-100">
-      {/* hookable식 상단 헤더: 뒤로가기 · 상품명 · (되돌리기/다시실행) · 저장 ·
-          다운로드 · 앱 공용 크롬(크레딧/알림/언어, 호스트 주입). 높이를 고정하고
-          본문은 flex-1 min-h-0으로 두어, 헤더 높이가 바뀌어도 캔버스가 남는 높이를
-          정확히 채워 페이지 하단이 잘리지 않는다. */}
-      <header className="sticky top-0 z-20 flex h-14 shrink-0 items-center gap-1.5 border-b border-neutral-200 bg-white px-3">
+  const historyPart = <DetailPageHistoryButtons store={store} />;
+  const downloadPart = (
+    <DetailPageDownloadDialog
+      store={store}
+      fileName={initialDocument.template_id ?? "detail-page"}
+      slotBindings={initialDocument.slot_bindings}
+    />
+  );
+  const defaultHeader = (
+      <header
+        data-dpe-part="header"
+        className="sticky top-0 z-20 flex h-14 shrink-0 items-center gap-1.5 border-b border-dpe-ink-200 bg-dpe-surface px-3"
+      >
         {onBack ? (
           <button
             type="button"
             onClick={onBack}
             aria-label={t("editor.back")}
             title={t("editor.back")}
-            className="flex h-9 w-9 items-center justify-center rounded-md text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
+            className="flex h-9 w-9 items-center justify-center rounded-dpe-md text-dpe-ink-600 hover:bg-dpe-ink-100 hover:text-dpe-ink-900"
           >
             <ChevronLeft aria-hidden="true" size={20} />
           </button>
         ) : null}
-        <p className="ml-1 max-w-[280px] truncate text-sm font-semibold text-neutral-900">
+        <p className="ml-1 max-w-[280px] truncate text-sm font-dpe-semibold text-dpe-ink-900">
           {productName?.trim() || t("editor.untitled")}
         </p>
 
         <div className="mx-auto" />
 
-        <DetailPageHistoryButtons store={store} />
-        <span className="mx-1 h-5 w-px bg-neutral-200" aria-hidden="true" />
+        {historyPart}
+        <span className="mx-1 h-5 w-px bg-dpe-ink-200" aria-hidden="true" />
 
         {saveOk ? (
-          <span className="hidden text-xs font-medium text-emerald-600 sm:inline">
+          <span className="hidden text-xs font-dpe-medium text-dpe-ok-600 sm:inline">
             {t("editor.saved")}
           </span>
         ) : null}
         {saveError ? (
-          <span className="hidden max-w-[180px] truncate text-xs font-medium text-red-600 sm:inline">
+          <span className="hidden max-w-[180px] truncate text-xs font-dpe-medium text-dpe-danger-600 sm:inline">
             {saveError}
           </span>
         ) : null}
@@ -744,30 +759,26 @@ export function DetailPageEditor({
           type="button"
           onClick={handleSave}
           disabled={saving}
-          className="inline-flex h-9 items-center gap-2 rounded-md border border-neutral-200 bg-white px-3 text-sm font-semibold text-neutral-900 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-50"
+          className="inline-flex h-9 items-center gap-2 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-3 text-sm font-dpe-semibold text-dpe-ink-900 hover:bg-dpe-ink-50 disabled:cursor-not-allowed disabled:opacity-50"
         >
           <Save aria-hidden="true" size={16} />
           {saving ? t("editor.saving") : t("editor.save")}
         </button>
-        <DetailPageDownloadDialog
-          store={store}
-          fileName={initialDocument.template_id ?? "detail-page"}
-          slotBindings={initialDocument.slot_bindings}
-        />
+        {downloadPart}
 
         {headerActions ? (
           <>
-            <span className="mx-1 h-5 w-px bg-neutral-200" aria-hidden="true" />
+            <span className="mx-1 h-5 w-px bg-dpe-ink-200" aria-hidden="true" />
             {headerActions}
           </>
         ) : null}
       </header>
-      <div className="grid min-h-0 flex-1 grid-cols-[1fr_360px]">
-        {/* 캔버스 칸의 높이를 못 박는다. 안 그러면 그리드 행이 내용만큼 늘어나(높이
-            100%가 auto로 풀린다) 작업 영역이 화면 아래로 자라고, 아래 붙는 배율·화면
-            띠가 화면 밖으로 밀린다. */}
-        <div className="relative min-w-0 overflow-hidden">{canvas}</div>
-        <aside className="flex min-h-0 flex-col border-l border-neutral-200 bg-white">
+  );
+  const defaultInspector = (
+        <aside
+          data-dpe-part="inspector"
+          className="flex min-h-0 flex-col border-l border-dpe-ink-200 bg-dpe-surface"
+        >
           {/* Figma-style properties inspector — 상단 툴바 대신 오른쪽에 둔다. */}
           <div className="min-h-0 flex-1">
             <DetailPageProperties
@@ -791,19 +802,19 @@ export function DetailPageEditor({
           </div>
 
           {/* Template QA / slot inspector / lint — authoring tools, not seller-facing. */}
-          <details className="border-t border-neutral-200">
-            <summary className="cursor-pointer p-4 text-xs font-semibold uppercase tracking-[0.06em] text-neutral-400 hover:text-neutral-600">
+          <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-neutral-200 p-4">
+          <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-semibold text-neutral-950">
+                <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-neutral-500">
+                <p className="mt-1 text-xs text-dpe-ink-500">
                   {qaSnapshot.counts.pages} pages / {qaSnapshot.counts.elements} elements /{" "}
                   {qaSnapshot.counts.slots} slots
                 </p>
@@ -811,31 +822,31 @@ export function DetailPageEditor({
               <button
                 type="button"
                 onClick={handleRefreshQa}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-neutral-200 text-neutral-600 hover:bg-neutral-50"
+                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-md border border-neutral-200 p-2">
-                <div className="text-base font-semibold text-neutral-950">{qaSnapshot.counts.slots}</div>
-                <div className="text-neutral-500">slots</div>
+              <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-md border border-red-100 bg-red-50 p-2">
-                <div className="text-base font-semibold text-red-700">{qaSnapshot.counts.errors}</div>
-                <div className="text-red-600">errors</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-md border border-amber-100 bg-amber-50 p-2">
-                <div className="text-base font-semibold text-amber-700">{qaSnapshot.counts.warnings}</div>
-                <div className="text-amber-600">warnings</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-md border border-neutral-200 text-xs font-semibold text-neutral-700 hover:bg-neutral-50"
+                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")}
@@ -843,7 +854,7 @@ export function DetailPageEditor({
               <button
                 type="button"
                 onClick={handleCopySummary}
-                className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-neutral-200 text-neutral-700 hover:bg-neutral-50"
+                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} />
@@ -851,20 +862,20 @@ export function DetailPageEditor({
               <button
                 type="button"
                 onClick={handleDownloadSummary}
-                className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-neutral-200 text-neutral-700 hover:bg-neutral-50"
+                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-medium text-emerald-600">{t("editor.summaryCopied")}</p>
+              <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-semibold uppercase tracking-[0.08em] text-neutral-500">
+              <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">
@@ -874,31 +885,31 @@ export function DetailPageEditor({
                       key={slot.slot}
                       type="button"
                       onClick={() => handleSelectSlot(slot)}
-                      className="w-full rounded-md border border-neutral-200 p-3 text-left hover:border-neutral-300 hover:bg-neutral-50"
+                      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-semibold text-neutral-950">{slot.slot}</span>
+                        <span className="truncate text-sm font-dpe-semibold text-dpe-ink-950">{slot.slot}</span>
                         <span
                           className={
                             slot.state === "error"
-                              ? "text-xs font-semibold text-red-600"
+                              ? "text-xs font-dpe-semibold text-dpe-danger-600"
                               : slot.state === "warning"
-                                ? "text-xs font-semibold text-amber-600"
-                                : "text-xs font-semibold text-emerald-600"
+                                ? "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-neutral-500">
+                      <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-neutral-600">{formatRect(slot.element)}</p>
-                      <p className="mt-2 text-xs text-neutral-500">{slot.message}</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-md border border-neutral-200 p-3 text-sm text-neutral-500">
+                  <p className="rounded-dpe-md border border-dpe-ink-200 p-3 text-sm text-dpe-ink-500">
                     {t("editor.noSlots")}
                   </p>
                 )}
@@ -906,7 +917,7 @@ export function DetailPageEditor({
             </section>
 
             <section className="mt-6">
-              <h3 className="text-xs font-semibold uppercase tracking-[0.08em] text-neutral-500">
+              <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">
@@ -914,32 +925,32 @@ export function DetailPageEditor({
                   qaSnapshot.lint.map((issue, index) => (
                     <div
                       key={`${issue.title}-${issue.slot ?? issue.elementId ?? index}`}
-                      className="rounded-md border border-neutral-200 p-3"
+                      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-semibold text-neutral-950">{issue.title}</p>
+                        <p className="text-sm font-dpe-semibold text-dpe-ink-950">{issue.title}</p>
                         <span
                           className={
                             issue.level === "error"
-                              ? "text-xs font-semibold text-red-600"
+                              ? "text-xs font-dpe-semibold text-dpe-danger-600"
                               : issue.level === "warning"
-                                ? "text-xs font-semibold text-amber-600"
-                                : "text-xs font-semibold text-blue-600"
+                                ? "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-neutral-600">{issue.detail}</p>
+                      <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-neutral-400">
+                        <p className="mt-2 truncate text-xs text-dpe-ink-400">
                           {[issue.slot, issue.elementId].filter(Boolean).join(" / ")}
                         </p>
                       ) : null}
                     </div>
                   ))
                 ) : (
-                  <div className="rounded-md border border-emerald-100 bg-emerald-50 p-3 text-sm font-medium text-emerald-700">
+                  <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>
                 )}
@@ -947,10 +958,10 @@ export function DetailPageEditor({
             </section>
 
             <section className="mt-6">
-              <h3 className="text-xs font-semibold uppercase tracking-[0.08em] text-neutral-500">
+              <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-md border border-neutral-200 bg-neutral-50 p-3 text-xs leading-5 text-neutral-700">
+              <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>
@@ -958,6 +969,50 @@ export function DetailPageEditor({
             </div>
           </details>
         </aside>
+  );
+  // 인스펙터는 감싸 쓰는 경우가 더 많다 — 자기 크롬만 두르고 속은 그대로 둔다.
+  const inspector = InspectorSlot ? (
+    <InspectorSlot store={store} defaultInspector={defaultInspector} />
+  ) : (
+    defaultInspector
+  );
+
+  const header = HeaderSlot ? (
+    <HeaderSlot
+      productName={productName?.trim() || t("editor.untitled")}
+      onBack={onBack}
+      save={{ run: handleSave, saving, ok: saveOk, error: saveError }}
+      parts={{
+        history: historyPart,
+        download: downloadPart,
+        actions: headerActions ?? null,
+      }}
+    />
+  ) : (
+    defaultHeader
+  );
+
+  return (
+    // 꽂혀 있으면 `observer`로 싼 패널·오버레이가 이 스토어의 변경 신호를 받는다
+    // (canvas-observer.tsx).
+    <CanvasStoreContext.Provider value={store}>
+    <div
+      data-dpe-root=""
+      className="flex h-screen min-h-[640px] flex-col bg-dpe-ink-100"
+    >
+      {/* hookable식 상단 헤더: 뒤로가기 · 상품명 · (되돌리기/다시실행) · 저장 ·
+          다운로드 · 앱 공용 크롬(크레딧/알림/언어, 호스트 주입). 높이를 고정하고
+          본문은 flex-1 min-h-0으로 두어, 헤더 높이가 바뀌어도 캔버스가 남는 높이를
+          정확히 채워 페이지 하단이 잘리지 않는다. */}
+      {header}
+      <div className="grid min-h-0 flex-1 grid-cols-[1fr_360px]">
+        {/* 캔버스 칸의 높이를 못 박는다. 안 그러면 그리드 행이 내용만큼 늘어나(높이
+            100%가 auto로 풀린다) 작업 영역이 화면 아래로 자라고, 아래 붙는 배율·화면
+            띠가 화면 밖으로 밀린다. */}
+        <div data-dpe-part="workspace" className="relative min-w-0 overflow-hidden">
+          {canvas}
+        </div>
+        {inspector}
       </div>
       {/* 화면 하나만 마크업째 다시 저작 — 요청은 캔버스 옆 페이지 툴바에서 온다. */}
       <SectionReauthorController

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

@@ -80,7 +80,7 @@ export function DetailPageElementsPanel({
       <div
         role="tablist"
         aria-label={t("detailPage.sidebar.elements")}
-        className="grid shrink-0 grid-cols-3 gap-0.5 border-b border-neutral-200 p-2"
+        className="grid shrink-0 grid-cols-3 gap-0.5 border-b border-dpe-ink-200 p-2"
       >
         {GROUPS.map(({ id, labelKey, Icon }) => {
           const active = id === group;
@@ -91,10 +91,10 @@ export function DetailPageElementsPanel({
               role="tab"
               aria-selected={active}
               onClick={() => select(id)}
-              className={`flex flex-col items-center justify-center gap-0.5 rounded-md px-1 py-1.5 text-[11px] font-medium transition-colors ${
+              className={`flex flex-col items-center justify-center gap-0.5 rounded-dpe-md px-1 py-1.5 text-[11px] font-dpe-medium transition-colors ${
                 active
-                  ? "bg-blue-50 text-blue-700"
-                  : "text-neutral-500 hover:bg-neutral-100"
+                  ? "bg-dpe-active-50 text-dpe-active-700"
+                  : "text-dpe-ink-500 hover:bg-dpe-ink-100"
               }`}
             >
               <Icon aria-hidden="true" size={14} />