@leviosa-ai/detail-page-editor 0.4.0 → 0.6.0

package/components/detail-page/canvas-context-menu.tsx

@@ -49,7 +49,8 @@ type MenuStore = CanvasMenuStore & {
   selectElements?: (ids: string[]) => void;
 };
 
-const ICONS: Record<CanvasMenuAction, LucideIcon> = {
+/** 항목 → 아이콘. 우클릭 메뉴와 캔버스 위 띠의 "더보기"가 같은 그림을 쓴다. */
+export const CANVAS_MENU_ICONS: Record<CanvasMenuAction, LucideIcon> = {
   duplicate: Copy,
   lock: Lock,
   unlock: Unlock,
@@ -203,7 +204,7 @@ export const CanvasContextMenu = observer(function CanvasContextMenu({
         className="fixed z-[71] rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface py-1 shadow-lg"
       >
         {items.map((item) => {
-          const Icon = ICONS[item.action];
+          const Icon = CANVAS_MENU_ICONS[item.action];
           const label = t(`detailPage.canvasMenu.${item.action}`);
           return (
             <div key={item.action}>

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

@@ -0,0 +1,264 @@
+"use client";
+
+/**
+ * 캔버스 아래 삽입 띠.
+ *
+ * 글상자 하나, 네모 하나를 넣으려고 좌측 패널을 열고 → 갈래를 찾고 → 격자에서 고르는
+ * 왕복이 매번 붙었다. 가장 자주 넣는 것 둘(텍스트·기본 도형)만 손이 있는 자리로 내린다.
+ * **좌측 패널을 대신하지 않는다** — 카탈로그 전체는 여전히 거기 있고, 여기 드롭다운
+ * 마지막 줄이 그 자리로 데려간다.
+ *
+ * 넣는 셈은 좌측 패널과 **같은 함수**를 부른다(`insertText`·`insertFigure`·`insertShape`).
+ * 두 벌로 적으면 크기·자리 규칙이 갈라지고, 그건 눈으로는 한참 뒤에야 보인다.
+ */
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { ChevronDown, Shapes, Type as TypeIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { FIGURE_PATCH, insertFigure } from "./detail-page-basic-shapes";
+import { TEXT_SIZE_PRESETS, insertText } from "./detail-page-text-panel";
+import { insertShape } from "../../lib/detail-page/insert-shape";
+import {
+  BASIC_SHAPES,
+  NATIVE_SHAPE_IDS,
+  shapeMarkup,
+} from "../../lib/detail-page/basic-shapes";
+
+type StoreLike = {
+  selectElements?: (ids: string[]) => void;
+  openSidePanel?: (name: string) => void;
+};
+
+/** 띠에 내리는 도형. 카탈로그 70개 중 손이 제일 자주 가는 것만 고른다. */
+const QUICK_SHAPE_IDS = ["triangle", "diamond", "pentagon", "hexagon", "ring", "pill"];
+
+function selectInserted(store: unknown, created: unknown) {
+  const id = (created as { id?: string } | null)?.id;
+  if (id) (store as StoreLike).selectElements?.([id]);
+}
+
+function Menu({
+  open,
+  children,
+}: {
+  open: boolean;
+  children: ReactNode;
+}) {
+  if (!open) return null;
+  return (
+    <div
+      role="menu"
+      className="absolute bottom-11 left-1/2 z-10 w-44 -translate-x-1/2 rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface py-1 shadow-lg"
+    >
+      {children}
+    </div>
+  );
+}
+
+function MenuItem({
+  label,
+  onClick,
+  children,
+  testId,
+}: {
+  label: string;
+  onClick: () => void;
+  children?: ReactNode;
+  testId?: string;
+}) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      data-dp-insert-item={testId}
+      onClick={onClick}
+      className="flex h-[30px] w-full items-center gap-2 px-3 text-left text-[13px] text-dpe-ink-700 transition-colors hover:bg-dpe-ink-100"
+    >
+      {children}
+      {label}
+    </button>
+  );
+}
+
+/**
+ * 갈래 하나. 본체를 누르면 기본값이 바로 들어가고, 화살표를 누르면 목록이 열린다 —
+ * 두 손짓을 한 버튼에 겹치면 "누르면 무엇이 나오는지"를 매번 확인하게 된다.
+ */
+function InsertGroup({
+  label,
+  icon,
+  onPrimary,
+  open,
+  onToggle,
+  children,
+}: {
+  label: string;
+  icon: ReactNode;
+  onPrimary: () => void;
+  open: boolean;
+  onToggle: () => void;
+  children: ReactNode;
+}) {
+  return (
+    <div className="relative flex items-center">
+      <button
+        type="button"
+        data-dp-insert-primary={label}
+        onClick={onPrimary}
+        className="flex h-9 items-center gap-1.5 rounded-l-dpe-lg px-2.5 text-[13px] font-dpe-medium text-dpe-ink-700 transition-colors hover:bg-dpe-ink-100 hover:text-dpe-ink-900"
+      >
+        {icon}
+        {label}
+      </button>
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={`${label} …`}
+        onClick={onToggle}
+        className={[
+          "flex h-9 w-6 items-center justify-center rounded-r-dpe-lg text-dpe-ink-500 transition-colors hover:bg-dpe-ink-100 hover:text-dpe-ink-900",
+          open ? "bg-dpe-ink-100 text-dpe-ink-900" : "",
+        ].join(" ")}
+      >
+        <ChevronDown aria-hidden="true" size={13} />
+      </button>
+      <Menu open={open}>{children}</Menu>
+    </div>
+  );
+}
+
+export function CanvasInsertToolbar({ store }: { store: unknown }) {
+  const { t } = useTranslation("branding");
+  const [open, setOpen] = useState<"text" | "shape" | null>(null);
+  const root = useRef<HTMLDivElement>(null);
+
+  // 바깥을 누르면 닫는다. 캔버스에서 요소를 고르는 손짓과 겹치면 안 되므로 캡처가 아니라
+  // 보통 단계에서 듣는다.
+  useEffect(() => {
+    if (!open) return;
+    const close = (event: PointerEvent) => {
+      if (!root.current?.contains(event.target as Node)) setOpen(null);
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(null);
+    };
+    window.addEventListener("pointerdown", close);
+    window.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("pointerdown", close);
+      window.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const addText = (preset: (typeof TEXT_SIZE_PRESETS)[number]) => {
+    selectInserted(
+      store,
+      insertText(store, t(`detailPage.text.${preset.key}`), {
+        fontSize: preset.fontSize,
+        fontWeight: preset.fontWeight,
+      }),
+    );
+    setOpen(null);
+  };
+
+  const addFigure = (id: string) => {
+    selectInserted(store, insertFigure(store, FIGURE_PATCH[id] ?? {}));
+    setOpen(null);
+  };
+
+  const addShape = (id: string) => {
+    const shape = BASIC_SHAPES.find((item) => item.id === id);
+    if (!shape) return;
+    selectInserted(store, insertShape(store, shapeMarkup(shape), shape.viewBox));
+    setOpen(null);
+  };
+
+  const openPanel = (name: string) => {
+    (store as StoreLike).openSidePanel?.(name);
+    setOpen(null);
+  };
+
+  return (
+    <div
+      ref={root}
+      data-dp-insert-toolbar=""
+      className="flex items-center gap-0.5 rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface/95 px-1 py-1 shadow-md backdrop-blur-sm"
+    >
+      <InsertGroup
+        label={t("detailPage.insert.text")}
+        icon={<TypeIcon aria-hidden="true" size={15} />}
+        // 기본값은 본문이다 — 가장 자주 쓰고, 크기는 넣은 뒤 우측에서 바로 고칠 수 있다.
+        onPrimary={() => addText(TEXT_SIZE_PRESETS[2] ?? TEXT_SIZE_PRESETS[0])}
+        open={open === "text"}
+        onToggle={() => setOpen((prev) => (prev === "text" ? null : "text"))}
+      >
+        {TEXT_SIZE_PRESETS.map((preset) => (
+          <MenuItem
+            key={preset.key}
+            testId={`text-${preset.key}`}
+            label={t(`detailPage.text.${preset.key}`)}
+            onClick={() => addText(preset)}
+          />
+        ))}
+        <div className="my-1 border-t border-dpe-ink-100" />
+        <MenuItem
+          testId="text-panel"
+          label={t("detailPage.insert.moreText")}
+          onClick={() => openPanel("text")}
+        />
+      </InsertGroup>
+
+      <InsertGroup
+        label={t("detailPage.insert.shape")}
+        icon={<Shapes aria-hidden="true" size={15} />}
+        onPrimary={() => addFigure("rect")}
+        open={open === "shape"}
+        onToggle={() => setOpen((prev) => (prev === "shape" ? null : "shape"))}
+      >
+        {NATIVE_SHAPE_IDS.map((id) => (
+          <MenuItem
+            key={id}
+            testId={`figure-${id}`}
+            label={t(`detailPage.shapes.basic.${id}`)}
+            onClick={() => addFigure(id)}
+          >
+            <span
+              aria-hidden="true"
+              className="block h-3.5 w-3.5 shrink-0 bg-dpe-ink-300"
+              style={{
+                borderRadius: id === "circle" ? "9999px" : id === "rounded" ? 4 : 0,
+              }}
+            />
+          </MenuItem>
+        ))}
+        <div className="my-1 border-t border-dpe-ink-100" />
+        {QUICK_SHAPE_IDS.map((id) => {
+          const shape = BASIC_SHAPES.find((item) => item.id === id);
+          if (!shape) return null;
+          return (
+            <MenuItem
+              key={id}
+              testId={`shape-${id}`}
+              label={t(`detailPage.shapes.basic.${id}`)}
+              onClick={() => addShape(id)}
+            >
+              <span
+                aria-hidden="true"
+                className="block h-3.5 w-3.5 shrink-0 [&>svg]:h-full [&>svg]:w-full"
+                dangerouslySetInnerHTML={{ __html: shapeMarkup(shape) }}
+              />
+            </MenuItem>
+          );
+        })}
+        <div className="my-1 border-t border-dpe-ink-100" />
+        <MenuItem
+          testId="shape-panel"
+          label={t("detailPage.insert.moreShapes")}
+          onClick={() => openPanel("elements")}
+        />
+      </InsertGroup>
+    </div>
+  );
+}

package/components/detail-page/canvas-selection-tools.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+/**
+ * 고른 것에 딸린 도구들을 한 자리에 모은다 — 띠, 그 아래 열리는 창, 그리고 자르기.
+ *
+ * 무엇을 띄울지는 `lib/detail-page/selection-actions.ts`가 정하고(그려 보지 않고 잴 수
+ * 있게), 자리 잡기는 `selection-quick-toolbar.tsx`가, 실제 편집 부품은 우측 패널이
+ * 쓰던 것을 그대로 부른다. 여기서는 **잇기만** 한다.
+ */
+
+import { useCallback, useEffect, useState, type RefObject } from "react";
+import { Crop, Eraser, MoreHorizontal, Sparkles } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { observer } from "./canvas-observer";
+import { CANVAS_MENU_ICONS } from "./canvas-context-menu";
+import { ImageCropOverlay, type CropElement } from "./image-crop-overlay";
+import { SelectionQuickToolbar, type QuickToolbarItem } from "./selection-quick-toolbar";
+import { selectedElementsDeep, type SelectableElement } from "./detail-page-selection";
+import { useEditorAi } from "./editor-ai-context";
+import {
+  BgRemoveSection,
+  ElementAiEditPanel,
+} from "./detail-page-properties-panel";
+import {
+  quickActions,
+  type ActionElement,
+  type QuickActionId,
+} from "../../lib/detail-page/selection-actions";
+import {
+  canvasMenuItems,
+  runCanvasMenuAction,
+  type CanvasMenuStore,
+} from "../../lib/detail-page/canvas-menu";
+
+type ToolStore = CanvasMenuStore & {
+  selectedElements?: SelectableElement[];
+  selectedElementsIds?: string[];
+  getElementById?: (id: string) => SelectableElement | undefined;
+};
+
+/** 창 하나. 띠 바로 아래에 붙고, 안에 들어가는 것은 우측 패널이 쓰던 부품 그대로다. */
+function Popover({
+  children,
+  width = 360,
+}: {
+  children: React.ReactNode;
+  width?: number;
+}) {
+  return (
+    <div
+      data-dp-quick-popover=""
+      style={{ width, maxHeight: "min(60vh, 520px)" }}
+      className="mt-1.5 overflow-y-auto rounded-dpe-xl border border-dpe-ink-200 bg-dpe-surface shadow-lg"
+    >
+      {children}
+    </div>
+  );
+}
+
+export const CanvasSelectionTools = observer(function CanvasSelectionTools({
+  store,
+  containerRef,
+  scrollRef,
+}: {
+  store: unknown;
+  containerRef: RefObject<HTMLDivElement | null>;
+  scrollRef: RefObject<HTMLDivElement | null>;
+}) {
+  const { t } = useTranslation("branding");
+  const s = store as ToolStore;
+  const ai = useEditorAi();
+  const els = selectedElementsDeep(s);
+  const key = els.map((el) => el.id).join(",");
+  const [open, setOpen] = useState<QuickActionId | null>(null);
+  const [cropId, setCropId] = useState<string | null>(null);
+
+  // 고른 것이 바뀌면 열려 있던 창은 남의 요소를 만지게 된다 — 닫는다.
+  useEffect(() => {
+    setOpen(null);
+    setCropId(null);
+  }, [key]);
+
+  const closeCrop = useCallback(() => setCropId(null), []);
+
+  const actions = quickActions(els as unknown as ActionElement[], {
+    hasGeneration: Boolean(ai.generatedId),
+    canRemoveBackground: Boolean(ai.onRemoveBackground),
+  });
+
+  const single = els.length === 1 ? els[0] : null;
+  const cropTarget = cropId
+    ? ((s.getElementById?.(cropId) ?? null) as CropElement | null)
+    : null;
+
+  const toggle = (id: QuickActionId) => setOpen((prev) => (prev === id ? null : id));
+
+  const label: Record<QuickActionId, string> = {
+    crop: t("detailPage.quickToolbar.crop"),
+    bgRemove: t("detailPage.quickToolbar.bgRemove"),
+    promptEdit: t("detailPage.quickToolbar.promptEdit"),
+    more: t("detailPage.quickToolbar.more"),
+  };
+
+  const items: QuickToolbarItem[] = actions.map((id) => {
+    if (id === "crop") {
+      return {
+        key: id,
+        label: label[id],
+        icon: <Crop aria-hidden="true" size={15} />,
+        onClick: () => {
+          setOpen(null);
+          if (single) setCropId(single.id);
+        },
+      };
+    }
+    if (id === "bgRemove") {
+      return {
+        key: id,
+        label: label[id],
+        icon: <Eraser aria-hidden="true" size={15} />,
+        active: open === id,
+        onClick: () => toggle(id),
+      };
+    }
+    if (id === "promptEdit") {
+      return {
+        key: id,
+        label: label[id],
+        icon: <Sparkles aria-hidden="true" size={15} className="text-dpe-ai" />,
+        active: open === id,
+        onClick: () => toggle(id),
+      };
+    }
+    return {
+      key: id,
+      label: label[id],
+      icon: <MoreHorizontal aria-hidden="true" size={16} />,
+      active: open === id,
+      separated: actions.length > 1,
+      onClick: () => toggle(id),
+    };
+  });
+
+  // 자르는 동안에는 띠를 숨긴다 — 자르기 줄이 그 자리에 뜬다.
+  if (cropTarget) {
+    return (
+      <ImageCropOverlay
+        el={cropTarget}
+        containerRef={containerRef}
+        scrollRef={scrollRef}
+        onClose={closeCrop}
+      />
+    );
+  }
+
+  return (
+    <SelectionQuickToolbar
+      els={els}
+      items={items}
+      containerRef={containerRef}
+      scrollRef={scrollRef}
+    >
+      {open === "promptEdit" ? (
+        <Popover>
+          <ElementAiEditPanel
+            store={s as never}
+            els={els as never}
+          />
+        </Popover>
+      ) : null}
+
+      {open === "bgRemove" && single && ai.onRemoveBackground ? (
+        <Popover width={300}>
+          <BgRemoveSection
+            el={single as never}
+            onRemove={ai.onRemoveBackground}
+            creditCost={ai.bgRemoveCreditCost}
+          />
+        </Popover>
+      ) : null}
+
+      {open === "more" ? (
+        <Popover width={200}>
+          <div role="menu" className="py-1">
+            {canvasMenuItems(s).map((item) => {
+              const Icon = CANVAS_MENU_ICONS[item.action];
+              return (
+                <div key={item.action}>
+                  {item.separated ? (
+                    <div className="my-1 border-t border-dpe-ink-100" />
+                  ) : null}
+                  <button
+                    type="button"
+                    role="menuitem"
+                    data-dp-quick-menu-action={item.action}
+                    disabled={item.disabled}
+                    onClick={() => {
+                      runCanvasMenuAction(s, item.action);
+                      setOpen(null);
+                    }}
+                    className="flex h-[30px] w-full items-center gap-2.5 px-3 text-left text-[13px] text-dpe-ink-700 transition-colors hover:bg-dpe-ink-100 disabled:cursor-not-allowed disabled:opacity-30 disabled:hover:bg-transparent"
+                  >
+                    <Icon size={14} className="shrink-0 text-dpe-ink-500" />
+                    {t(`detailPage.canvasMenu.${item.action}`)}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </Popover>
+      ) : null}
+    </SelectionQuickToolbar>
+  );
+});
+CanvasSelectionTools.displayName = "CanvasSelectionTools";

package/components/detail-page/detail-page-basic-shapes.tsx

@@ -41,12 +41,12 @@ type StoreLike = { activePage?: PageLike; pages: PageLike[] };
 export function insertFigure(
   store: unknown,
   patch: Record<string, unknown>,
-): void {
+): unknown {
   const s = store as StoreLike;
   const page = s.activePage ?? s.pages[0];
-  if (!page) return;
+  if (!page) return null;
   const size = Math.round(Math.min(page.computedWidth * 0.28, 260));
-  page.addElement({
+  return page.addElement({
     type: "figure",
     subType: "rect",
     fill: SHAPE_FILL,
@@ -58,7 +58,8 @@ export function insertFigure(
   });
 }
 
-const FIGURE_PATCH: Record<string, Record<string, unknown>> = {
+/** 네이티브 도형 id → 삽입 속성. 좌측 패널과 캔버스 아래 삽입 띠가 같이 쓴다. */
+export const FIGURE_PATCH: Record<string, Record<string, unknown>> = {
   rect: {},
   rounded: { cornerRadius: 24 },
   circle: { subType: "circle" },

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

@@ -35,6 +35,8 @@ import { normalizeDocumentAssetSrcs } from "../../lib/detail-page/asset-bytes-ur
 import type { DocumentJson } from "@leviosa-ai/canvas/types";
 import { buildDetailPageSections } from "./detail-page-sidebar-sections";
 import { DetailPageProperties } from "./detail-page-properties-panel";
+import { EditorAiProvider } from "./editor-ai-context";
+import { useDetailPageEditUsage } from "./edit-quota-ui";
 import type { ImageTier } from "../../lib/detail-page/image-credit";
 import { DetailPageHistoryButtons } from "./detail-page-history-buttons";
 import { DetailPageDownloadDialog } from "./detail-page-download-dialog";
@@ -448,6 +450,9 @@ export function DetailPageEditor({
   const SidebarSlot = slots?.EditorSidebar;
   const HeaderSlot = slots?.EditorHeader;
   const InspectorSlot = slots?.EditorInspector;
+  // 프롬프트 편집 사용량은 여기서 한 번만 조회한다 — 캔버스 위 띠와 우측 패널(표·차트)이
+  // 같은 숫자를 봐야 "몇 번 남았는가"가 갈라지지 않는다.
+  const { usage, applyUsage } = useDetailPageEditUsage(generatedId);
   const [saveError, setSaveError] = useState<string | null>(null);
   const [saveOk, setSaveOk] = useState(false);
   // 편집 한도 소진 시 "편집 크레딧 추가하기" → pricing 모달을 인플레이스로 연다.
@@ -704,7 +709,8 @@ export function DetailPageEditor({
             {findReplace}
             <DetailPagePagesTimeline store={store} />
           </LeviosaCanvasWorkspace>
-          <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">
+          {/* 배율은 오른쪽 아래로 — 가운데 아래는 삽입 띠 자리다(작업 영역이 그린다). */}
+          <div className="absolute bottom-4 right-4 z-20 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>
@@ -712,6 +718,34 @@ export function DetailPageEditor({
     );
   }, [store, sidebarSections, SidebarSlot]);
 
+  const aiValue = useMemo(
+    () => ({
+      generatedId,
+      usage,
+      applyUsage,
+      onBuyCredits: () => setPricingOpen(true),
+      imageCreditCost,
+      imageCreditBalance,
+      imageCostByTier,
+      onGenerateGif,
+      gifCreditCost,
+      onRemoveBackground,
+      bgRemoveCreditCost,
+    }),
+    [
+      generatedId,
+      usage,
+      applyUsage,
+      imageCreditCost,
+      imageCreditBalance,
+      imageCostByTier,
+      onGenerateGif,
+      gifCreditCost,
+      onRemoveBackground,
+      bgRemoveCreditCost,
+    ],
+  );
+
   const historyPart = <DetailPageHistoryButtons store={store} />;
   const downloadPart = (
     <DetailPageDownloadDialog
@@ -785,19 +819,12 @@ export function DetailPageEditor({
               store={store}
               generatedId={generatedId}
               onBuyEditCredits={() => setPricingOpen(true)}
-              imageCreditCost={imageCreditCost}
-              imageCreditBalance={imageCreditBalance}
-              imageCostByTier={imageCostByTier}
-              onGenerateGif={onGenerateGif}
-              gifCreditCost={gifCreditCost}
               onGenerateTextGif={onGenerateTextGif}
               textGifCreditCost={textGifCreditCost}
               onGenerateImageGif={onGenerateImageGif}
               imageGifCreditCost={imageGifCreditCost}
               onGenerateDataGif={onGenerateDataGif}
               dataGifCreditCost={dataGifCreditCost}
-              onRemoveBackground={onRemoveBackground}
-              bgRemoveCreditCost={bgRemoveCreditCost}
             />
           </div>
 
@@ -996,6 +1023,8 @@ export function DetailPageEditor({
     // 꽂혀 있으면 `observer`로 싼 패널·오버레이가 이 스토어의 변경 신호를 받는다
     // (canvas-observer.tsx).
     <CanvasStoreContext.Provider value={store}>
+    {/* 캔버스 위 띠가 쓰는 값들. props로 내리면 작업 영역이 통째로 다시 만들어진다. */}
+    <EditorAiProvider value={aiValue}>
     <div
       data-dpe-root=""
       className="flex h-screen min-h-[640px] flex-col bg-dpe-ink-100"
@@ -1024,6 +1053,7 @@ export function DetailPageEditor({
         <slots.PricingModal open={pricingOpen} onOpenChange={setPricingOpen} />
       ) : null}
     </div>
+    </EditorAiProvider>
     </CanvasStoreContext.Provider>
   );
 }