@leviosa-ai/detail-page-editor 0.10.0 → 0.11.1

package/components/detail-page/detail-page-host-context.tsx

@@ -105,8 +105,14 @@ export interface DetailPageHostApi {
     },
     signal?: AbortSignal,
   ) => Promise<DetailPagePromptEditResult>;
+  /**
+   * 고른 그림 한 장을 프롬프트 방향으로 다시 만든다.
+   *
+   * 문서 id 는 선택이다 — 이 일은 문서를 읽지도 고치지도 않고, 그림과 지시가 전부
+   * 인자로 간다. 캐러셀처럼 가리킬 문서가 없는 편집기도 같은 길을 쓴다.
+   */
   promptEditDetailPageImage: (
-    generatedId: string,
+    generatedId: string | null,
     payload: {
       slot_role?: string;
       current_image_url?: string;
@@ -298,20 +304,6 @@ export interface BrandAsset {
   deleted_at: string | null;
 }
 
-/**
- * 무드보드와 브랜드킷은 **편집기가 안을 안 본다**. 불러서 킷으로 바꾸고 브랜드킷
- * 슬롯(호스트가 꽂는 노드)에 그대로 넘길 뿐이다.
- *
- * 그래서 모양을 선언하지 않는다. 선언하면 오히려 깨진다 — `deriveBrandKit` 의 인자는
- * 반변이라, 우리가 `unknown` 으로 적으면 앱이 자기 `Moodboard` 를 받는 함수를 못 꽂고,
- * 좁게 적으면 이번엔 우리 호출부가 못 넘긴다. 나르기만 하는 값에 양방향으로 열린 타입을
- * 주는 것이 정직하다.
- */
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export type BrandMoodboard = any;
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-export type BrandKit = any;
-
 export interface DetailPageHostBrand {
   listBrandAssets: (
     brandId: string,
@@ -348,12 +340,6 @@ export interface DetailPageHostBrand {
   /** 훅을 못 쓰는 자리(모듈 함수)에서 활성 브랜드를 알아낼 때. */
   getStoredActiveBrandId: () => string | null;
 
-  loadBrandMoodboard: (
-    brand: BrandWorkspaceBrand,
-    assets: BrandAsset[],
-    signal?: AbortSignal,
-  ) => Promise<BrandMoodboard>;
-  deriveBrandKit: (moodboard: BrandMoodboard) => BrandKit;
   useBrandPrimaryColor: () => string;
 }
 
@@ -409,7 +395,6 @@ export interface DetailPageHostQueryKeys {
       brandId: string | null,
       media?: BrandAssetMedia,
     ) => readonly unknown[];
-    brandMoodboard: (brandId: string | null) => readonly unknown[];
     detailPageShapeLibrary: () => readonly unknown[];
     detailPageStockPhotos: (query: string) => readonly unknown[];
     detailPageIcons: (
@@ -436,11 +421,6 @@ export interface DetailPageHostSlots {
     open: boolean;
     onOpenChange: (open: boolean) => void;
   }>;
-  BrandKitPanel?: ComponentType<{
-    kit: BrandKit;
-    store: never;
-    className?: string;
-  }>;
   /**
    * '내 이미지' 서랍의 두 번째 탭 — 저작이 구운 사진.
    *

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

@@ -3,81 +3,23 @@
 import { useSyncExternalStore } from "react";
 import { observer } from "./canvas-observer";
 import { useTranslation } from "react-i18next";
-import {
-  Sparkles,
-  ChevronUp,
-  ChevronDown,
-  Copy,
-  Plus,
-  Trash2,
-  Wand2,
-} from "lucide-react";
+import { Wand2 } from "lucide-react";
 
 import {
   isSectionReauthorWired,
   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.
+ * 활성 화면 옆에 뜨는 동그란 버튼 하나 — «이 화면 다시 만들기».
  *
- * Renders a vertical pill next to the active page with: AI, move up, move down,
- * duplicate, add, delete. The actions mirror the stock editor's stock ``<PageControls>``
- * (`page.setZIndex` / `page.clone` / `store.addPage` / `store.deletePages`) so
- * behaviour matches the SDK exactly — we just restyle it as a vertical rail and
- * disable the stock controls in the workspace.
+ * 예전에는 세로 띠에 AI·위·아래·복제·추가·삭제가 줄줄이 붙어 있었다. 화면을 가리는
+ * 데 비해 쓰는 것은 하나뿐이었고, 나머지 넷은 페이지를 다루는 일이라 페이지 목록과
+ * 오른쪽 페이지 패널로 옮겼다.
  */
 
-type PageLike = {
-  id: string;
-  bleed?: number;
-  width?: number | string;
-  height?: number | string;
-  setZIndex: (index: number) => void;
-  clone: () => void;
-};
-type StoreLike = {
-  pages: PageLike[];
-  activePage?: { id: string; bleed?: number; width?: number | string; height?: number | string };
-  addPage: (props: Record<string, unknown>) => PageLike;
-  deletePages: (ids: string[]) => void;
-  openSidePanel?: (name: string) => void;
-};
-
-function IconButton({
-  label,
-  onClick,
-  disabled,
-  children,
-}: {
-  label: string;
-  onClick: () => void;
-  disabled?: boolean;
-  children: React.ReactNode;
-}) {
-  return (
-    <button
-      type="button"
-      title={label}
-      aria-label={label}
-      disabled={disabled}
-      onClick={(e) => {
-        e.stopPropagation();
-        onClick();
-      }}
-      className={[
-        "flex h-8 w-8 items-center justify-center rounded-dpe-lg transition-colors",
-        disabled
-          ? "cursor-not-allowed text-dpe-ink-300"
-          : "text-dpe-ink-500 hover:bg-dpe-ink-100 hover:text-dpe-ink-900",
-      ].join(" ")}
-    >
-      {children}
-    </button>
-  );
-}
+type PageLike = { id: string };
 
 export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
   store,
@@ -93,96 +35,29 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
     isSectionReauthorWired,
     () => false,
   );
-  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:
-        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);
-  };
+  // 다시 만들기를 못 꽂은 화면에서는 띠 자체가 없다 — 버튼이 하나뿐이라 그것이
+  // 빠지면 빈 껍데기만 남는다.
+  if (!reauthorWired) return null;
 
   return (
-    <div className="flex flex-col items-center gap-0.5 rounded-2xl border border-dpe-ink-200 bg-dpe-surface/95 px-1 py-1.5 shadow-md backdrop-blur-sm">
-      <button
-        type="button"
-        title={t("detailPage.pageToolbar.aiGenerate")}
-        aria-label={t("detailPage.pageToolbar.aiGenerate")}
-        onClick={(e) => {
-          e.stopPropagation();
-          s.openSidePanel?.("ai-generate");
-        }}
-        className="flex h-8 w-8 items-center justify-center rounded-dpe-lg transition-colors hover:bg-dpe-ink-100"
-      >
-        <Sparkles size={17} className="text-dpe-ai" />
-      </button>
-
-      {/* 이 화면만 마크업째 다시 만든다 — 슬롯 카피 편집과 달리 칸 수·표 같은 구조가
-          바뀔 수 있다. 요청만 띄우고 실제 일(모달·API·페이지 교체)은 편집기가 한다. */}
-      {reauthorWired ? (
-        <button
-          type="button"
-          title={t("detailPage.pageToolbar.reauthor", {
-            defaultValue: "이 화면 다시 만들기",
-          })}
-          aria-label={t("detailPage.pageToolbar.reauthor", {
-            defaultValue: "이 화면 다시 만들기",
-          })}
-          onClick={(e) => {
-            e.stopPropagation();
-            requestSectionReauthor(p.id);
-          }}
-          className="flex h-8 w-8 items-center justify-center rounded-dpe-lg transition-colors hover:bg-dpe-ink-100"
-        >
-          <Wand2 size={16} className="text-dpe-ai-alt" />
-        </button>
-      ) : null}
-
-      <hr className="my-0.5 w-5 border-dpe-ink-200" />
-
-      <IconButton label={t("detailPage.pageToolbar.moveUp")} onClick={() => p.setZIndex(index - 1)} disabled={isFirst}>
-        <ChevronUp size={17} />
-      </IconButton>
-      <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()}
-        disabled={!canAdd}
-      >
-        <Copy size={16} />
-      </IconButton>
-      <IconButton
-        label={t("detailPage.pageToolbar.addBelow")}
-        onClick={addAfter}
-        disabled={!canAdd}
-      >
-        <Plus size={17} />
-      </IconButton>
-
-      <hr className="my-0.5 w-5 border-dpe-ink-200" />
-
-      <IconButton label={t("detailPage.pageToolbar.delete")} onClick={() => s.deletePages([p.id])} disabled={!canDelete}>
-        <Trash2 size={16} />
-      </IconButton>
-    </div>
+    <button
+      type="button"
+      title={t("detailPage.pageToolbar.reauthor", {
+        defaultValue: "이 화면 다시 만들기",
+      })}
+      aria-label={t("detailPage.pageToolbar.reauthor", {
+        defaultValue: "이 화면 다시 만들기",
+      })}
+      onClick={(e) => {
+        e.stopPropagation();
+        requestSectionReauthor(p.id);
+      }}
+      className="flex h-10 w-10 items-center justify-center rounded-full border border-dpe-ink-200 bg-dpe-surface/95 shadow-md backdrop-blur-sm transition-colors hover:bg-dpe-ink-100"
+    >
+      <Wand2 size={17} className="text-dpe-ai-alt" />
+    </button>
   );
 });
 DetailPagePageToolbar.displayName = "DetailPagePageToolbar";

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

@@ -2,10 +2,10 @@
 
 import { detailPageEditorProfile } from "../../lib/detail-page/editor-profile";
 
-import { useCallback, useState, useSyncExternalStore } from "react";
+import { Fragment, useCallback, useSyncExternalStore } from "react";
 import { observer } from "./canvas-observer";
 import { useTranslation } from "react-i18next";
-import { GripVertical } from "lucide-react";
+import { Copy, GripVertical, Plus, Trash2 } from "lucide-react";
 import {
   DndContext,
   closestCenter,
@@ -23,7 +23,6 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 
 import { detailPageThumbnailBus } from "./detail-page-thumbnail-bus";
-import { FillControl } from "./fill-control";
 
 /**
  * Custom Canvas side-panel "페이지" section (hookable-style page list).
@@ -53,12 +52,16 @@ type PageLike = {
   /** 단색 hex 또는 `linear-gradient(...)` 문자열. `FillControl`이 둘 다 만든다. */
   background?: string;
   set?: (props: Record<string, unknown>) => void;
+  clone?: () => void;
+  /** 문서 안 몇 번째인가를 바꾼다. 페이지 자신이 가진 함수다 — 스토어에는 없다. */
+  setZIndex?: (index: number) => void;
 };
 type StoreLike = {
   pages: PageLike[];
   activePage?: PageLike;
   selectPage: (id: string) => void;
-  setPageZIndex: (id: string, index: number) => void;
+  addPage: (props: Record<string, unknown>) => PageLike;
+  deletePages?: (ids: string[]) => void;
 };
 
 type TFn = (key: string, opts?: Record<string, unknown>) => string;
@@ -94,6 +97,54 @@ const restrictToVerticalAxis: Modifier = ({ transform }) => ({
   x: 0,
 });
 
+/** 두 화면 사이에 새 화면을 끼우는 자리. 평소엔 선 한 줄, 올리면 «+» 가 뜬다. */
+function InsertHere({
+  store,
+  after,
+  disabled,
+}: {
+  store: StoreLike;
+  after: number;
+  disabled?: boolean;
+}) {
+  const { t } = useTranslation("branding");
+  if (disabled) return null;
+
+  const insert = () => {
+    const ref = store.pages[after];
+    const profile = detailPageEditorProfile();
+    const next = store.addPage({
+      width:
+        profile.page.width === "document"
+          ? (ref?.computedWidth ?? "auto")
+          : profile.page.width,
+      height: profile.page.fixed
+        ? profile.page.height
+        : (ref?.computedHeight ?? profile.page.height),
+    });
+    next.setZIndex?.(after + 1);
+    store.selectPage(next.id);
+  };
+
+  return (
+    <div className="group/insert relative h-3">
+      <button
+        type="button"
+        aria-label={t("detailPage.pageToolbar.addBelow")}
+        title={t("detailPage.pageToolbar.addBelow")}
+        onClick={insert}
+        className="absolute inset-x-0 top-0 flex h-3 items-center justify-center"
+      >
+        <span className="h-px flex-1 bg-dpe-ink-200 opacity-0 transition-opacity group-hover/insert:opacity-100" />
+        <span className="mx-1 flex h-4 w-4 items-center justify-center rounded-full border border-dpe-ink-200 bg-dpe-surface text-dpe-ink-500 opacity-0 transition-opacity group-hover/insert:opacity-100">
+          <Plus aria-hidden="true" size={11} />
+        </span>
+        <span className="h-px flex-1 bg-dpe-ink-200 opacity-0 transition-opacity group-hover/insert:opacity-100" />
+      </button>
+    </div>
+  );
+}
+
 // ── Sortable row ────────────────────────────────────────────────────────────────
 
 const PageRow = observer(function PageRow({
@@ -120,8 +171,7 @@ const PageRow = observer(function PageRow({
   const active = store.activePage?.id === page.id;
   const ratio = page.computedHeight / Math.max(1, page.computedWidth);
   const { role, title } = pageLabel(page, index, t);
-  const [editingBackground, setEditingBackground] = useState(false);
-  const background = page.background || "#ffffff";
+  const maxPages = detailPageEditorProfile().maxPages;
 
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -149,70 +199,71 @@ const PageRow = observer(function PageRow({
       ].join(" ")}
     >
       <div className="flex items-center gap-2">
-      <span
-        {...listeners}
-        aria-label={t("detailPage.pages.reorderHandle")}
-        className={[
-          "shrink-0 touch-none rounded text-dpe-ink-300 hover:text-dpe-ink-500",
-          isDragging ? "cursor-grabbing" : "cursor-grab",
-        ].join(" ")}
-      >
-        <GripVertical aria-hidden="true" size={16} />
-      </span>
-      <div
-        className="relative shrink-0 overflow-hidden rounded-dpe-md border border-dpe-ink-100 bg-dpe-ink-50"
-        style={{ width: 64, height: Math.min(80, Math.max(40, 64 * ratio)) }}
-      >
-        {thumb ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={thumb}
-            alt={title || t("detailPage.pages.pageN", { number: index + 1 })}
-            draggable={false}
-            className="h-full w-full object-cover object-top"
-          />
-        ) : null}
-      </div>
-      <div className="min-w-0 flex-1">
-        <p className="truncate text-sm">
-          <span className="text-dpe-ink-400">{role}</span>
-          {title ? (
-            <>
-              <span className="mx-1 text-dpe-ink-300">|</span>
-              <span className="font-dpe-bold text-dpe-ink-900">{title}</span>
-            </>
-          ) : null}
-        </p>
-      </div>
-      {/*
-        페이지 배경. 우측 인스펙터에도 같은 컨트롤이 있지만 **아무것도 선택 안 됐을 때만**
-        뜬다 — 20섹션짜리 문서를 만지는 동안 선택이 비는 순간이 거의 없어서 사실상 안 보였다.
-        쓰기는 우측과 똑같이 `page.set({background})`이라 상태가 갈라지지 않는다.
-      */}
-      <button
-        type="button"
-        onClick={(event) => {
-          event.stopPropagation();
-          setEditingBackground((open) => !open);
-        }}
-        aria-label={t("detailPage.pages.background")}
-        aria-expanded={editingBackground}
-        title={t("detailPage.pages.background")}
-        className="h-6 w-6 shrink-0 rounded-dpe-md border border-dpe-ink-200 hover:border-dpe-ink-400"
-        style={{ background }}
-      />
-      </div>
-      {editingBackground ? (
+        <span
+          {...listeners}
+          aria-label={t("detailPage.pages.reorderHandle")}
+          className={[
+            "shrink-0 touch-none rounded text-dpe-ink-300 hover:text-dpe-ink-500",
+            isDragging ? "cursor-grabbing" : "cursor-grab",
+          ].join(" ")}
+        >
+          <GripVertical aria-hidden="true" size={16} />
+        </span>
         <div
-          className="mt-2 border-t border-dpe-ink-100 pt-2"
-          onClick={(event) => event.stopPropagation()}
+          className="relative shrink-0 overflow-hidden rounded-dpe-md border border-dpe-ink-100 bg-dpe-ink-50"
+          style={{ width: 64, height: Math.min(80, Math.max(40, 64 * ratio)) }}
         >
-          <FillControl
-            value={background}
-            onChange={(next) => page.set?.({ background: next })}
-          />
+          {thumb ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={thumb}
+              alt={title || t("detailPage.pages.pageN", { number: index + 1 })}
+              draggable={false}
+              className="h-full w-full object-cover object-top"
+            />
+          ) : null}
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm">
+            <span className="text-dpe-ink-400">{role}</span>
+            {title ? (
+              <>
+                <span className="mx-1 text-dpe-ink-300">|</span>
+                <span className="font-dpe-bold text-dpe-ink-900">{title}</span>
+              </>
+            ) : null}
+          </p>
+        </div>
+        {/* 복제 / 삭제. 판을 고르지 않아도 목록에서 바로 되게 둔다. */}
+        <div className="flex shrink-0 flex-col gap-1">
+          <button
+            type="button"
+            disabled={store.pages.length >= maxPages}
+            onClick={(event) => {
+              event.stopPropagation();
+              page.clone?.();
+            }}
+            aria-label={t("detailPage.pageToolbar.duplicate")}
+            title={t("detailPage.pageToolbar.duplicate")}
+            className="flex h-6 w-6 items-center justify-center rounded-dpe-md border border-dpe-ink-200 text-dpe-ink-500 hover:border-dpe-ink-400 hover:text-dpe-ink-800 disabled:cursor-not-allowed disabled:text-dpe-ink-200 disabled:hover:border-dpe-ink-200"
+          >
+            <Copy aria-hidden="true" size={13} />
+          </button>
+          <button
+            type="button"
+            disabled={store.pages.length <= 1}
+            onClick={(event) => {
+              event.stopPropagation();
+              store.deletePages?.([page.id]);
+            }}
+            aria-label={t("detailPage.pageToolbar.delete")}
+            title={t("detailPage.pageToolbar.delete")}
+            className="flex h-6 w-6 items-center justify-center rounded-dpe-md border border-dpe-ink-200 text-dpe-ink-500 hover:border-dpe-ink-400 hover:text-dpe-danger-600 disabled:cursor-not-allowed disabled:text-dpe-ink-200 disabled:hover:border-dpe-ink-200"
+          >
+            <Trash2 aria-hidden="true" size={13} />
+          </button>
         </div>
-      ) : null}
+      </div>
     </div>
   );
 });
@@ -249,7 +300,9 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
       if (!over || active.id === over.id) return;
       const toIndex = s.pages.findIndex((p) => p.id === over.id);
       if (toIndex === -1) return;
-      s.setPageZIndex(active.id as string, toIndex);
+      // 순서를 바꾸는 것은 페이지 자신이다. 스토어에 `setPageZIndex` 는 없어서
+      // 끌어다 놓을 때마다 «is not a function» 으로 죽었다.
+      s.pages.find((p) => p.id === active.id)?.setZIndex?.(toIndex);
     },
     [s],
   );
@@ -263,10 +316,12 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
     ? Math.round(
         typeof profile.page.height === "number"
           ? profile.page.height
-          : s.pages[0]?.computedHeight ?? 0,
+          : (s.pages[0]?.computedHeight ?? 0),
       )
     : Math.round(s.pages.reduce((acc, p) => acc + p.computedHeight, 0));
 
+  const canAdd = s.pages.length < profile.maxPages;
+
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-baseline justify-between px-4 py-3">
@@ -291,13 +346,17 @@ export const DetailPagePagesPanel = observer(function DetailPagePagesPanel({
           >
             <div className="space-y-2">
               {s.pages.map((page, index) => (
-                <PageRow
-                  key={page.id}
-                  store={s}
-                  page={page}
-                  index={index}
-                  thumb={detailPageThumbnailBus.get(page.id)}
-                />
+                <Fragment key={page.id}>
+                  <PageRow
+                    store={s}
+                    page={page}
+                    index={index}
+                    thumb={detailPageThumbnailBus.get(page.id)}
+                  />
+                  {/* 새 화면은 «어디에» 가 먼저다. 목록 끝에 버튼 하나를 두면 넣고 나서
+                      다시 끌어 옮기게 되므로, 넣을 자리마다 하나씩 둔다. */}
+                  <InsertHere store={s} after={index} disabled={!canAdd} />
+                </Fragment>
               ))}
             </div>
           </SortableContext>

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

@@ -22,6 +22,7 @@ import {
   Strikethrough,
   Highlighter,
   Sparkles,
+  Copy,
   Trash2,
   Ungroup,
   Type as TypeIcon,
@@ -179,6 +180,7 @@ type ElementLike = {
 type PageLike = {
   id: string;
   background?: string;
+  clone?: () => void;
   width?: number;
   height?: number;
   computedWidth?: number;
@@ -195,6 +197,7 @@ type StoreLike = {
   fonts?: FontCatalogStore["fonts"];
   addFont?: FontCatalogStore["addFont"];
   deleteElements?: (ids: string[]) => void;
+  deletePages?: (ids: string[]) => void;
   ungroupElements?: (ids: string[]) => void;
 };
 
@@ -2233,15 +2236,32 @@ const PageInspector = observer(function PageInspector({
   const { t } = useTranslation("branding");
   const profile = detailPageEditorProfile();
   const page = store.activePage ?? store.pages[0];
-  const bg = str(page?.background, "#ffffff");
   return (
     <>
       {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">
-          {t("detailPage.properties.pageBackgroundHint")}
-        </p>
+      {/* 화면을 통째로 다루는 두 가지. 예전에는 캔버스 옆 세로 띠에 있었는데, 판을
+          가리는 데 비해 여기가 이미 «이 화면» 을 다루는 자리다. */}
+      <Section title={t("detailPage.properties.pageActions")}>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            disabled={!page?.clone || store.pages.length >= profile.maxPages}
+            onClick={() => page?.clone?.()}
+            className="inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface text-xs font-dpe-semibold text-dpe-ink-700 hover:bg-dpe-ink-50 disabled:cursor-not-allowed disabled:text-dpe-ink-300"
+          >
+            <Copy aria-hidden="true" size={15} />
+            {t("detailPage.pageToolbar.duplicate")}
+          </button>
+          <button
+            type="button"
+            disabled={store.pages.length <= 1}
+            onClick={() => page && store.deletePages?.([page.id])}
+            className="inline-flex h-9 flex-1 items-center justify-center gap-1.5 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface text-xs font-dpe-semibold text-dpe-ink-700 hover:bg-dpe-danger-50 hover:text-dpe-danger-700 disabled:cursor-not-allowed disabled:text-dpe-ink-300"
+          >
+            <Trash2 aria-hidden="true" size={15} />
+            {t("detailPage.pageToolbar.delete")}
+          </button>
+        </div>
       </Section>
       {onGenerateDataGif ? (
         <CellGridGifSection
@@ -2288,11 +2308,12 @@ export const ElementAiEditPanel = observer(function ElementAiEditPanel({
   // http(s) URL이면 그대로 넘긴다. 402는 크레딧 부족 마커로 승격.
   const editImage = useCallback<GenerateImageFn>(
     async ({ prompt, tier, brandId, annotatedImage }) => {
-      if (!single || !generatedId) return [];
+      // 문서 id 는 없어도 된다 — 그림과 지시만으로 도는 일이다(캐러셀이 그렇다).
+      if (!single) return [];
       const src = str(single.src);
       const isData = src.startsWith("data:");
       try {
-        const res = await api.promptEditDetailPageImage(generatedId, {
+        const res = await api.promptEditDetailPageImage(generatedId ?? null, {
           slot_role: slotRole,
           current_image_url: isData ? undefined : src,
           current_image_base64: isData ? src.split(",")[1] : undefined,

package/components/detail-page/detail-page-sidebar-sections.tsx

@@ -11,7 +11,6 @@ import {
   Images,
   Layers,
   LayoutTemplate,
-  Palette,
   Shapes,
   Sparkles,
   Type,
@@ -31,7 +30,6 @@ import { DetailPageElementsPanel } from "./detail-page-elements-panel";
 import { DetailPageMyShapesPanel } from "./detail-page-my-shapes-panel";
 import { DetailPageBrandGifsPanel } from "./detail-page-brand-gifs-panel";
 import { DetailPageReferencesPanel } from "./detail-page-references-panel";
-import { DetailPageBrandKitPanel } from "./detail-page-brand-kit-panel";
 import { DetailPageTextPanel } from "./detail-page-text-panel";
 import { DetailPagePhotosPanel } from "./detail-page-photos-panel";
 
@@ -72,7 +70,6 @@ const FALLBACK_LABELS: Record<string, string> = {
   "detailPage.sidebar.charts": "차트",
   "detailPage.sidebar.tables": "표",
   "detailPage.sidebar.ai": "AI 생성",
-  "detailPage.sidebar.brandKit": "브랜드 킷",
   "detailPage.sidebar.brandImages": "브랜드 이미지",
   "detailPage.sidebar.brandGifs": "브랜드 GIF",
   "detailPage.sidebar.brandShapes": "브랜드 도형",
@@ -182,10 +179,9 @@ export function buildDetailPageSections({
   const PhotosTab = makeIconTab(t("detailPage.sidebar.photos"), Image);
   const AiTab = makeIconTab(t("detailPage.sidebar.ai"), Sparkles);
   // 브랜드 자산 구역의 첫 탭 — 여기서부터 "내가 가진 것"이라 위에 선을 하나 긋는다.
-  const BrandKitTab = makeIconTab(t("detailPage.sidebar.brandKit"), Palette, {
+  const MyImagesTab = makeIconTab(t("detailPage.sidebar.brandImages"), Images, {
     dividerBefore: true,
   });
-  const MyImagesTab = makeIconTab(t("detailPage.sidebar.brandImages"), Images);
   const BrandGifsTab = makeIconTab(t("detailPage.sidebar.brandGifs"), Film);
   // 도형·차트·표를 품는 한 탭. 아이콘은 "내 도형"(Shapes)과 겹치지 않게 갈랐다.
   const ElementsTab = makeIconTab(t("detailPage.sidebar.elements"), Component);
@@ -259,12 +255,6 @@ export function buildDetailPageSections({
     Panel: () => <DetailPageReferencesPanel generatedId={generatedId} />,
   };
 
-  const brandKitSection: CanvasSection = {
-    name: "brand-kit",
-    Tab: BrandKitTab,
-    Panel: ({ store }) => <DetailPageBrandKitPanel store={store} />,
-  };
-
   // 요소: 클릭 한 번으로 캔버스에 놓이는 것들을 한 서랍에 모은다.
   //  - 도형: 공용 라이브러리(우리 템플릿에서 추린 범용 SVG) + 스톡 기본 도형/라인.
   //  - 차트: 데이터가 붙은 프리셋. 놓으면 그룹 하나로 들어가고 값·종류는 우측에서.
@@ -312,16 +302,17 @@ export function buildDetailPageSections({
   return [
     ...(structureSection ? [structureSection] : []),
     pagesSection,
+    // 레이어는 페이지 바로 밑이다 — 둘 다 "이 문서가 무엇으로 되어 있나"를 보는 자리라
+    // 붙어 있어야 오간다. 아래쪽은 넣을 것을 고르는 서랍들이다.
+    layersSection,
     textSection,
     photosSection,
     elementsSection,
     aiSection,
-    // ↓ 여기부터 브랜드 자산(브랜드 킷 탭이 위에 구분선을 그린다).
-    brandKitSection,
+    // ↓ 여기부터 브랜드 자산('내 이미지' 탭이 위에 구분선을 그린다).
     myImagesSection,
     brandGifsSection,
     referencesSection,
     myShapesSection,
-    layersSection,
   ];
 }

package/i18n/en.json

@@ -104,8 +104,7 @@
         "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.",
-        "pageBackground": "Page background",
-        "pageBackgroundHint": "Select an element to edit its font, color, and alignment here.",
+        "pageActions": "This page",
         "selectionNone": "No selection",
         "typeText": "Text",
         "typeImage": "Image",
@@ -414,7 +413,6 @@
         "uploadImage": "Upload brand image",
         "imagesEmpty": "No images saved for this brand.",
         "openMoodboard": "Open moodboard",
-        "kitEmpty": "No brand moodboard is available.",
         "activeBrand": "Active brand",
         "shapeUploaded": "Brand shape uploaded.",
         "shapeLoadFailed": "Could not load the source shape.",
@@ -835,7 +833,6 @@
         "text": "Text",
         "photos": "Photos",
         "ai": "AI",
-        "brandKit": "Brand kit",
         "brandImages": "Brand images",
         "brandGifs": "Brand GIFs",
         "brandShapes": "Brand shapes",

package/i18n/ko.json

@@ -104,8 +104,7 @@
         "pageHeightFit": "내용에 맞추기",
         "pageHeightOverflow": "내용이 {{px}}px까지 내려가 화면 아래로 넘칩니다.",
         "pageHeightHint": "캔버스 아래 손잡이를 끌어서도 바꿀 수 있어요.",
-        "pageBackground": "페이지 배경",
-        "pageBackgroundHint": "요소를 선택하면 글꼴·색상·정렬을 여기서 편집할 수 있어요.",
+        "pageActions": "이 화면",
         "selectionNone": "선택 없음",
         "typeText": "텍스트",
         "typeImage": "이미지",
@@ -414,7 +413,6 @@
         "uploadImage": "브랜드 이미지 업로드",
         "imagesEmpty": "이 브랜드에 저장된 이미지가 없어요.",
         "openMoodboard": "무드보드 열기",
-        "kitEmpty": "사용 가능한 브랜드 무드보드가 없어요.",
         "activeBrand": "현재 브랜드",
         "shapeUploaded": "브랜드 도형을 업로드했어요.",
         "shapeLoadFailed": "도형 원본을 불러오지 못했어요.",
@@ -835,7 +833,6 @@
         "text": "텍스트",
         "photos": "사진",
         "ai": "AI 생성",
-        "brandKit": "브랜드 킷",
         "brandImages": "브랜드 이미지",
         "brandGifs": "브랜드 GIF",
         "brandShapes": "브랜드 도형",

package/lib/detail-page/selection-actions.ts

@@ -22,7 +22,13 @@ export type ActionElement = {
 };
 
 export type ActionContext = {
-  /** 생성 인스턴스가 있는가. 없으면 프롬프트 편집을 서버가 못 받는다(픽스처). */
+  /**
+   * 서버가 아는 문서가 있는가.
+   *
+   * 글·도형·그룹을 프롬프트로 고치는 일은 서버가 문서를 읽고 고쳐서 돌려주므로 이것이
+   * 필요하다. **그림 편집은 아니다** — 그림과 지시가 요청에 다 실려 가고 결과는 브랜드
+   * 자산으로 돌아온다. 그래서 문서가 없는 편집기(캐러셀)에서도 그림만은 고칠 수 있다.
+   */
   hasGeneration?: boolean;
   /** 배경 지우기가 배선돼 있는가. */
   canRemoveBackground?: boolean;
@@ -62,13 +68,14 @@ export function quickActions(
     if (canRemoveBackground) actions.push("bgRemove");
   }
 
-  if (hasGeneration) {
-    const editable =
-      el.type === "text" ||
-      el.type === "svg" ||
-      el.type === "image" ||
-      (el.type === "group" && hasEditableDescendant(el));
-    if (editable) actions.push("promptEdit");
+  // 그림은 그 자체가 요청에 실려 가므로 문서가 필요 없다. 대신 실을 그림이 있어야 한다.
+  const editableImage = el.type === "image" && Boolean(str(el.src));
+  const needsDocument =
+    el.type === "text" ||
+    el.type === "svg" ||
+    (el.type === "group" && hasEditableDescendant(el));
+  if (editableImage || (needsDocument && hasGeneration)) {
+    actions.push("promptEdit");
   }
 
   actions.push("more");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "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",

package/components/detail-page/detail-page-brand-kit-panel.tsx

@@ -1,77 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { Loader2, Palette } from "lucide-react";
-import { useTranslation } from "react-i18next";
-
-import { useDetailPageHost } from "./detail-page-host-context";
-
-export function DetailPageBrandKitPanel({ store }: { store: unknown }) {
-  // 킷을 그리는 화면은 브랜드 도메인이라 호스트가 꽂는다. 편집기는 활성 브랜드의
-  // 무드보드를 불러 킷으로 바꾼 뒤 그 자리에 넘길 뿐이다.
-  const { brand, queryKeys, slots } = useDetailPageHost();
-  const { t } = useTranslation("branding");
-  const {
-    brands,
-    activeBrand,
-    activeBrandId,
-    setActiveBrandId,
-    isLoading: brandsLoading,
-  } = brand.useBrandWorkspace();
-  const assetsQuery = useQuery({
-    queryKey: queryKeys.branding.brandAssets(activeBrandId),
-    queryFn: ({ signal }) => brand.listBrandAssets(activeBrandId!, signal),
-    enabled: Boolean(activeBrandId),
-    staleTime: 4 * 60_000,
-  });
-  const moodboardQuery = useQuery({
-    queryKey: queryKeys.branding.brandMoodboard(activeBrandId),
-    queryFn: ({ signal }) =>
-      brand.loadBrandMoodboard(activeBrand!, assetsQuery.data ?? [], signal),
-    enabled: Boolean(activeBrand && assetsQuery.data),
-  });
-
-  if (brandsLoading || assetsQuery.isLoading || moodboardQuery.isLoading) {
-    return (
-      <div className="flex h-full items-center justify-center text-dpe-ink-400">
-        <Loader2 className="animate-spin" size={20} />
-      </div>
-    );
-  }
-
-  const KitPanel = slots?.BrandKitPanel;
-  if (!activeBrand || !moodboardQuery.data || !KitPanel) {
-    return (
-      <div className="flex h-full flex-col items-center justify-center gap-2 p-5 text-center text-dpe-ink-400">
-        <Palette size={22} />
-        <p className="text-xs">{t("detailPage.brandAssets.kitEmpty")}</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-full flex-col overflow-y-auto">
-      <div className="border-b border-dpe-ink-200 p-3">
-        <label className="grid gap-1 text-[11px] font-dpe-medium text-dpe-ink-500">
-          {t("detailPage.brandAssets.activeBrand")}
-          <select
-            value={activeBrand.id}
-            onChange={(event) => setActiveBrandId(event.target.value)}
-            className="h-8 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-2 text-xs text-dpe-ink-800"
-          >
-            {brands.map((brand) => (
-              <option key={brand.id} value={brand.id}>
-                {brand.name}
-              </option>
-            ))}
-          </select>
-        </label>
-      </div>
-      <KitPanel
-        kit={brand.deriveBrandKit(moodboardQuery.data)}
-        store={store as never}
-        className="flex-1"
-      />
-    </div>
-  );
-}