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

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useSyncExternalStore } from "react";
+import { useRef, useState, useSyncExternalStore } from "react";
 import { observer } from "./canvas-observer";
 import { useTranslation } from "react-i18next";
 import { Wand2 } from "lucide-react";
@@ -17,9 +17,19 @@ import {
  * 예전에는 세로 띠에 AI·위·아래·복제·추가·삭제가 줄줄이 붙어 있었다. 화면을 가리는
  * 데 비해 쓰는 것은 하나뿐이었고, 나머지 넷은 페이지를 다루는 일이라 페이지 목록과
  * 오른쪽 페이지 패널로 옮겼다.
+ *
+ * 붙박이가 아니라 끌어서 옮길 수 있다. 옮긴 자리는 편집기가 열려 있는 동안 유지된다
+ * (화면을 바꿀 때마다 다시 붙는 위치로 튀면 옮긴 의미가 없다).
  */
 
 type PageLike = { id: string };
+type Offset = { x: number; y: number };
+
+/** 이 편집기 세션 동안 기억한다 — 화면을 바꿔도 버튼이 제자리에 있게. */
+let keptOffset: Offset = { x: 0, y: 0 };
+
+/** 이만큼도 못 움직였으면 끈 것이 아니라 누른 것이다. */
+const DRAG_SLOP = 4;
 
 export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
   store,
@@ -36,6 +46,30 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
     () => false,
   );
   const p = page as PageLike;
+  const [offset, setOffset] = useState<Offset>(keptOffset);
+  const drag = useRef<{ x: number; y: number; from: Offset } | null>(null);
+  const dragged = useRef(false);
+
+  const move = (event: React.PointerEvent<HTMLButtonElement>) => {
+    const start = drag.current;
+    if (!start) return;
+    const dx = event.clientX - start.x;
+    const dy = event.clientY - start.y;
+    if (Math.abs(dx) > DRAG_SLOP || Math.abs(dy) > DRAG_SLOP)
+      dragged.current = true;
+    if (!dragged.current) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    // 화면 밖으로 던져 놓으면 다시 잡을 수가 없다 — 창 안으로 묶는다.
+    const next = { x: start.from.x + dx, y: start.from.y + dy };
+    const left = rect.left - offset.x + next.x;
+    const top = rect.top - offset.y + next.y;
+    const maxX = window.innerWidth - rect.width - 8;
+    const maxY = window.innerHeight - rect.height - 8;
+    next.x += Math.min(0, maxX - left) + Math.max(0, 8 - left);
+    next.y += Math.min(0, maxY - top) + Math.max(0, 8 - top);
+    keptOffset = next;
+    setOffset(next);
+  };
 
   // 다시 만들기를 못 꽂은 화면에서는 띠 자체가 없다 — 버튼이 하나뿐이라 그것이
   // 빠지면 빈 껍데기만 남는다.
@@ -50,11 +84,25 @@ export const DetailPagePageToolbar = observer(function DetailPagePageToolbar({
       aria-label={t("detailPage.pageToolbar.reauthor", {
         defaultValue: "이 화면 다시 만들기",
       })}
+      onPointerDown={(e) => {
+        if (e.button !== 0) return;
+        dragged.current = false;
+        drag.current = { x: e.clientX, y: e.clientY, from: offset };
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+      }}
+      onPointerMove={move}
+      onPointerUp={(e) => {
+        drag.current = null;
+        e.currentTarget.releasePointerCapture?.(e.pointerId);
+      }}
       onClick={(e) => {
         e.stopPropagation();
+        // 끌어다 놓은 것이 다시 만들기로 이어지면 크레딧이 그냥 나간다.
+        if (dragged.current) return;
         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"
+      style={{ transform: `translate(${offset.x}px, ${offset.y}px)` }}
+      className="flex h-10 w-10 cursor-grab touch-none 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 active:cursor-grabbing"
     >
       <Wand2 size={17} className="text-dpe-ai-alt" />
     </button>

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

@@ -2,10 +2,10 @@
 
 import { detailPageEditorProfile } from "../../lib/detail-page/editor-profile";
 
-import { Fragment, useCallback, useState, useSyncExternalStore } from "react";
+import { Fragment, useCallback, useSyncExternalStore } from "react";
 import { observer } from "./canvas-observer";
 import { useTranslation } from "react-i18next";
-import { GripVertical, Plus } 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,6 +52,7 @@ type PageLike = {
   /** 단색 hex 또는 `linear-gradient(...)` 문자열. `FillControl`이 둘 다 만든다. */
   background?: string;
   set?: (props: Record<string, unknown>) => void;
+  clone?: () => void;
   /** 문서 안 몇 번째인가를 바꾼다. 페이지 자신이 가진 함수다 — 스토어에는 없다. */
   setZIndex?: (index: number) => void;
 };
@@ -61,6 +61,7 @@ type StoreLike = {
   activePage?: PageLike;
   selectPage: (id: string) => void;
   addPage: (props: Record<string, unknown>) => PageLike;
+  deletePages?: (ids: string[]) => void;
 };
 
 type TFn = (key: string, opts?: Record<string, unknown>) => string;
@@ -115,11 +116,11 @@ function InsertHere({
     const next = store.addPage({
       width:
         profile.page.width === "document"
-          ? ref?.computedWidth ?? "auto"
+          ? (ref?.computedWidth ?? "auto")
           : profile.page.width,
       height: profile.page.fixed
         ? profile.page.height
-        : ref?.computedHeight ?? profile.page.height,
+        : (ref?.computedHeight ?? profile.page.height),
     });
     next.setZIndex?.(after + 1);
     store.selectPage(next.id);
@@ -170,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),
@@ -199,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>
-      ) : null}
+        {/* 복제 / 삭제. 판을 고르지 않아도 목록에서 바로 되게 둔다. */}
+        <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>
+      </div>
     </div>
   );
 });
@@ -315,7 +316,7 @@ 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));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "Leviosa detail-page editor shell. Source-only: consumers compile it through Next transpilePackages. Every app coupling (sourcing server, brand store, cache keys, toast) arrives through the DetailPageHost interface, and every URL it fetches comes from configureDetailPageEditor.",
   "type": "module",
   "license": "UNLICENSED",