@leviosa-ai/detail-page-editor 0.1.0

package/components/detail-page/edit-quota-ui.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+// 프롬프트 편집 무료 한도(SVG 15 / 텍스트 30) UI 조각. 텍스트/SVG 편집 패널이 공유한다.
+// - EditUsageBadge: "(N/M회)" 카운터. 한도 근접 시 색을 바꿔 경고.
+// - EditQuotaBlock: 한도 소진 시 입력 대신 노출되는 하드 차단 + "편집 크레딧 추가하기" CTA.
+
+import { useCallback, useEffect, useState } from "react";
+import { Sparkles } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useDetailPageHost } from "./detail-page-host-context";
+
+export interface EditUsageState {
+  svgUsed: number;
+  svgLimit: number;
+  textUsed: number;
+  textLimit: number;
+  unlimited: boolean;
+}
+
+const EMPTY_USAGE: EditUsageState = {
+  svgUsed: 0,
+  svgLimit: 0,
+  textUsed: 0,
+  textLimit: 0,
+  unlimited: false,
+};
+
+/**
+ * 편집기 로드 시 인스턴스의 프롬프트 편집 사용량/한도를 한 번 조회하고,
+ * 편집 성공/차단 시 applyUsage로 낙관적 갱신한다. generatedId가 없으면(픽스처) no-op.
+ */
+export function useDetailPageEditUsage(generatedId?: string) {
+  const { api } = useDetailPageHost();
+  const [usage, setUsage] = useState<EditUsageState>(EMPTY_USAGE);
+
+  useEffect(() => {
+    if (!generatedId) {
+      setUsage(EMPTY_USAGE);
+      return;
+    }
+    let cancelled = false;
+    const controller = new AbortController();
+    void (async () => {
+      try {
+        const u = await api.getDetailPageEditUsage(generatedId, controller.signal);
+        if (!cancelled) {
+          setUsage({
+            svgUsed: u.svg_used,
+            svgLimit: u.svg_limit,
+            textUsed: u.text_used,
+            textLimit: u.text_limit,
+            unlimited: u.unlimited,
+          });
+        }
+      } catch {
+        /* 미로그인/미배포 → 카운터 숨김(0 한도) */
+      }
+    })();
+    return () => {
+      cancelled = true;
+      controller.abort();
+    };
+  }, [api, generatedId]);
+
+  const applyUsage = useCallback(
+    (kind: "svg" | "text", used: number, limit: number) => {
+      setUsage((prev) =>
+        kind === "svg"
+          ? { ...prev, svgUsed: used, svgLimit: limit }
+          : { ...prev, textUsed: used, textLimit: limit },
+      );
+    },
+    [],
+  );
+
+  return { usage, applyUsage };
+}
+
+export function EditUsageBadge({
+  used,
+  limit,
+  unlimited = false,
+}: {
+  used: number;
+  limit: number;
+  /** 한도 면제(scratch/시연) 시 분모·경고색 없이 '{used}회'만 표시한다. */
+  unlimited?: boolean;
+}) {
+  const { t } = useTranslation("branding");
+  if (unlimited) {
+    return (
+      <span
+        className="ml-auto text-[11px] tabular-nums text-muted-foreground"
+        title={t("detailPage.editQuota.unlimitedTitle")}
+      >
+        {t("detailPage.editQuota.usedUnlimited", { used })}
+      </span>
+    );
+  }
+  const remaining = Math.max(0, limit - used);
+  const warn = remaining <= Math.max(1, Math.ceil(limit * 0.2));
+  return (
+    <span
+      className={
+        "ml-auto text-[11px] tabular-nums " +
+        (remaining === 0
+          ? "text-destructive"
+          : warn
+            ? "text-amber-500"
+            : "text-muted-foreground")
+      }
+      title={t("detailPage.editQuota.remainingTitle", { remaining })}
+    >
+      {t("detailPage.editQuota.usage", { used, limit })}
+    </span>
+  );
+}
+
+export function EditQuotaBlock({
+  kind,
+  onBuyMore,
+}: {
+  kind: "svg" | "text";
+  onBuyMore?: () => void;
+}) {
+  const { t } = useTranslation("branding");
+  const label =
+    kind === "svg"
+      ? t("detailPage.editQuota.shapeEdit")
+      : t("detailPage.editQuota.textEdit");
+  return (
+    <div className="flex flex-col items-center gap-2 px-4 py-4 text-center">
+      <p className="text-[13px] font-medium text-foreground">
+        {t("detailPage.editQuota.quotaExhausted", { label })}
+      </p>
+      <p className="text-[11px] leading-4 text-muted-foreground">
+        {t("detailPage.editQuota.quotaHint")}
+      </p>
+      <button
+        type="button"
+        onClick={onBuyMore}
+        disabled={!onBuyMore}
+        className="mt-1 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground disabled:opacity-40"
+      >
+        <Sparkles size={13} />
+        {t("detailPage.editQuota.buyCredits")}
+      </button>
+    </div>
+  );
+}

package/components/detail-page/editor-history.ts

@@ -0,0 +1,56 @@
+/**
+ * Undo / redo that does not blow the editor up.
+ *
+ * Undoing a structural change (ungroup, group, delete) while the SELECTION still
+ * points at the elements that change crashes the stock editor outright:
+ *
+ *   [mobx-state-tree] assertion failed: the creation of the observable instance
+ *   must be done on the initializing phase
+ *   Should not already be working.            (React, right behind it)
+ *
+ * The undo re-parents / re-creates those MST nodes, and the selection-driven
+ * observers (selectedShapes → the Konva transformer) read them mid-patch, forcing
+ * a lazy MST instance to materialise inside the patch — which MST refuses. Verified
+ * against the live store on the STOCK Canvas workspace, so this is not something
+ * our overlays introduced: ungroup → undo crashes; ungroup → deselect → undo
+ * restores the group cleanly.
+ *
+ * So: drop the selection, run the history step, then re-select whatever survived.
+ */
+
+export type HistoryStore = {
+  selectedElementsIds?: string[];
+  selectElements?: (ids: string[]) => void;
+  getElementById?: (id: string) => unknown;
+  history: { undo: () => void; redo: () => void };
+};
+
+function step(store: HistoryStore, run: () => void): void {
+  const before = store.selectedElementsIds?.slice() ?? [];
+  if (!before.length) {
+    run();
+    return;
+  }
+  store.selectElements?.([]);
+  // Deselecting is not enough on its own: React has to actually re-render and let
+  // Konva detach the transformer from the old nodes. Clearing the selection and
+  // undoing in the SAME tick still crashes — the patch lands while the observers
+  // are mid-flight. A macrotask hop puts the undo after React has committed.
+  setTimeout(() => {
+    run();
+    // Re-select only what the history step left behind: an id that no longer
+    // resolves would put the selection right back into the state it just escaped.
+    const alive = store.getElementById
+      ? before.filter((id) => store.getElementById?.(id))
+      : [];
+    if (alive.length) store.selectElements?.(alive);
+  }, 0);
+}
+
+export function safeUndo(store: HistoryStore): void {
+  step(store, () => store.history.undo());
+}
+
+export function safeRedo(store: HistoryStore): void {
+  step(store, () => store.history.redo());
+}

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

@@ -0,0 +1,165 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { safeRedo, safeUndo, type HistoryStore } from "./editor-history";
+import {
+  runCanvasMenuAction,
+  type CanvasMenuStore,
+  type MenuElement,
+} from "../../lib/detail-page/canvas-menu";
+import { groupAction, type GroupStore } from "../../lib/detail-page/group-action";
+
+/**
+ * Takes over the Canvas hotkeys that are broken for a document made of groups,
+ * and adds the ones it never had.
+ *
+ * ⌘G / ⌘⇧G — the stock editor's own handler ungroups the FIRST selected element whenever it
+ * happens to be a group, so shift-selecting two groups never nests them. The right
+ * dispatch lives in ``lib/detail-page/group-action.ts`` (the right-click menu needs
+ * the same call); here ⌘G groups whatever is selected and ⌘⇧G ungroups.
+ *
+ * ⌘⌥C / ⌘⌥V — 서식 복사·붙이기(``format-painter.ts``).
+ *
+ * ⌘Z / ⌘⇧Z / ⌘Y — see editor-history.ts: an undo with a live selection over the
+ * elements being restored crashes MST. Route both through the safe wrappers.
+ */
+
+type HotkeyStore = HistoryStore &
+  GroupStore &
+  CanvasMenuStore & {
+    activePage?: { children?: Array<{ id: string; type?: string }> };
+    // ⌘C의 OS 클립보드 복사는 src까지 읽는다 — 메뉴가 보는 것보다 한 칸 넓다.
+    selectedElements?: Array<MenuElement & { src?: string }>;
+  };
+
+function loadCrossOriginImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    // 프리사인 S3/프록시 픽셀이 캔버스를 tainting하지 않도록 CORS 익명 요청(데이터
+    // URI는 불필요). export 경로와 같은 규약.
+    if (!src.startsWith("data:")) img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error("image decode failed"));
+    img.src = src;
+  });
+}
+
+/** 선택된 이미지/SVG 요소의 원본 픽셀을 PNG Blob으로 렌더한다(OS 클립보드용). */
+async function elementToPngBlob(src: string): Promise<Blob> {
+  const img = await loadCrossOriginImage(src);
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, img.naturalWidth);
+  canvas.height = Math.max(1, img.naturalHeight);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("2d context unavailable");
+  ctx.drawImage(img, 0, 0);
+  const blob = await new Promise<Blob | null>((resolve) =>
+    canvas.toBlob(resolve, "image/png"),
+  );
+  if (!blob) throw new Error("toBlob failed");
+  return blob;
+}
+
+/**
+ * ⌘C(macOS) / Ctrl+C(Windows·Linux): 선택된 이미지(또는 svg 도형) 하나를 OS
+ * 클립보드에 PNG Blob으로 복사해 다른 앱(슬랙/포토샵 등)에 붙여넣을 수 있게 한다.
+ * Canvas 기본 복사는 편집기 내부 복제용이라 OS 클립보드로 안 나간다 — 이미지 선택
+ * 시에만 가로채 blob으로 내보낸다. 플랫폼 판별은 호출부의 ``metaKey || ctrlKey``.
+ *
+ * async blob 생성이 사용자 제스처 창을 넘길 수 있으므로 ClipboardItem에 Blob이 아닌
+ * **Promise를 넘겨** 브라우저가 제스처를 유지한 채 기다리게 한다.
+ * 처리하면 true(→ 기본 동작 차단), 대상이 아니면 false.
+ */
+export function copySelectedImageToClipboard(store: {
+  selectedElements?: Array<{ type?: string; src?: string }>;
+}): boolean {
+  const sel = store.selectedElements ?? [];
+  if (sel.length !== 1) return false;
+  const el = sel[0];
+  const src = el?.src;
+  if (!src || (el.type !== "image" && el.type !== "svg")) return false;
+  if (typeof ClipboardItem === "undefined" || !navigator.clipboard?.write) return false;
+  navigator.clipboard
+    .write([new ClipboardItem({ "image/png": elementToPngBlob(src) })])
+    .catch((err) => {
+      // taint(CORS 미허용)나 권한 거부 시 조용히 로그만 — 크래시 방지.
+      console.warn("[detail-page] 이미지 클립보드 복사 실패:", err);
+    });
+  return true;
+}
+
+/** Typing in a field is not a canvas shortcut. Same guard the stock editor's handler uses. */
+function isTyping(): boolean {
+  const el = document.activeElement as HTMLElement | null;
+  if (!el) return false;
+  return (
+    el.tagName === "INPUT" ||
+    el.tagName === "TEXTAREA" ||
+    el.isContentEditable === true
+  );
+}
+
+export function EditorHotkeys({ store }: { store: unknown }) {
+  useEffect(() => {
+    const s = store as HotkeyStore;
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (isTyping()) return;
+      const mod = e.metaKey || e.ctrlKey;
+      if (!mod) return;
+
+      // ⌘⌥C / ⌘⌥V — 서식 복사·붙이기. Canva의 "서식 붓"인데, 다음 클릭 하나를 가로채는
+      // 모드는 안 만든다: 드릴인·드래그·다중선택과 전부 충돌하고, 두 동작으로 나누면
+      // 다중 선택에 한 번에 붙일 수 있어 오히려 빠르다.
+      if (e.altKey && (e.code === "KeyC" || e.code === "KeyV") && !e.shiftKey) {
+        e.preventDefault();
+        e.stopPropagation();
+        runCanvasMenuAction(
+          s,
+          e.code === "KeyC" ? "copyFormat" : "pasteFormat",
+        );
+        return;
+      }
+
+      if (e.code === "KeyC" && !e.shiftKey && !e.altKey) {
+        // ⌘C(Mac)·Ctrl+C(Win/Linux) 모두 여기로 온다 — 위의 mod가 metaKey||ctrlKey.
+        // 이미지/도형이 선택돼 있으면 OS 클립보드로 복사(가로챔). 그 외(텍스트 선택 등)는
+        // 기본/Canvas 동작에 맡긴다.
+        if (copySelectedImageToClipboard(s)) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        return;
+      }
+
+      if (e.code === "KeyG") {
+        const action = groupAction(s, e.shiftKey);
+        // Always swallow ⌘G — leaving it to the stock editor's handler would ungroup the
+        // first selected group even when the user asked to nest two.
+        e.preventDefault();
+        e.stopPropagation();
+        if (!action) return;
+        if (action.kind === "group") s.groupElements?.(action.ids);
+        else s.ungroupElements?.(action.ids);
+        return;
+      }
+
+      const key = e.key.toLowerCase();
+      if (key !== "z" && key !== "y") return;
+      const redo = key === "y" || e.shiftKey;
+      e.preventDefault();
+      e.stopPropagation();
+      if (redo) safeRedo(s);
+      else safeUndo(s);
+    };
+
+    // Capture on the document: the stock editor's handleHotkey listens here too, and this
+    // has to win before it reaches the workspace.
+    document.addEventListener("keydown", onKeyDown, { capture: true });
+    return () =>
+      document.removeEventListener("keydown", onKeyDown, { capture: true });
+  }, [store]);
+
+  return null;
+}

package/components/detail-page/element-recents-strip.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useCallback, useSyncExternalStore } from "react";
+import { Star } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { encodeSvgDataUri } from "../../lib/detail-page-canvas/export/svg";
+import { insertShape } from "../../lib/detail-page/insert-shape";
+import {
+  getElementRecents,
+  rememberElement,
+  subscribeElementRecents,
+  toggleElementPin,
+  type ElementRecent,
+} from "../../lib/detail-page/element-recents";
+
+/**
+ * 요소 서랍 맨 위의 "즐겨찾기 · 최근" 스트립.
+ *
+ * 상세페이지는 같은 배지·구분선·체크 아이콘을 20섹션 내내 반복해서 넣는다. **검색의
+ * 절반은 다시 안 찾는 것**이라 서랍 어느 그룹에 있든 이 줄이 먼저 보인다.
+ *
+ * 탭으로 만들지 않은 이유는 레일 상한(12)이다 — 지금 11탭이고 남은 한 칸은 규격 검사
+ * 몫이다. 스트립은 그룹 바 위에 한 줄로 앉아 자리를 안 먹는다.
+ */
+
+const EMPTY: ElementRecent[] = [];
+/** 스냅샷은 참조가 안정적이어야 한다 — 매번 새 객체를 주면 무한 렌더가 된다. */
+const SERVER_SNAPSHOT = { recent: EMPTY, pinned: EMPTY };
+
+function useRecents() {
+  return useSyncExternalStore(
+    subscribeElementRecents,
+    getElementRecents,
+    // 서버에서는 저장소가 없다. 빈 상태로 그리고 물 주입 뒤에 채운다.
+    () => SERVER_SNAPSHOT,
+  );
+}
+
+export function ElementRecentsStrip({ store }: { store: unknown }) {
+  const { t } = useTranslation("branding");
+  const { recent, pinned } = useRecents();
+
+  const insert = useCallback(
+    (entry: ElementRecent) => {
+      insertShape(store, entry.markup, entry.viewBox);
+      rememberElement(entry);
+    },
+    [store],
+  );
+
+  // 즐겨찾기가 먼저, 그 뒤에 최근. 이미 꽂힌 것은 최근 쪽에서 뺀다.
+  const pinnedKeys = new Set(pinned.map((entry) => entry.key));
+  const items = [
+    ...pinned.map((entry) => ({ entry, isPinned: true })),
+    ...recent
+      .filter((entry) => !pinnedKeys.has(entry.key))
+      .map((entry) => ({ entry, isPinned: false })),
+  ];
+
+  if (!items.length) return null;
+
+  return (
+    <div className="shrink-0 border-b border-neutral-200 px-2 py-2">
+      <p className="mb-1.5 px-0.5 text-[11px] font-medium text-neutral-500">
+        {t("detailPage.recents.title")}
+      </p>
+      <div className="flex gap-1.5 overflow-x-auto pb-0.5">
+        {items.map(({ entry, isPinned }) => (
+          <div key={entry.key} className="group relative shrink-0">
+            <button
+              type="button"
+              onClick={() => insert(entry)}
+              title={entry.label ?? entry.key}
+              aria-label={entry.label ?? entry.key}
+              className="flex h-11 w-11 items-center justify-center rounded-lg border border-neutral-200 bg-white p-1.5 hover:border-neutral-400"
+            >
+              {/* eslint-disable-next-line @next/next/no-img-element */}
+              <img
+                src={encodeSvgDataUri(entry.markup)}
+                alt=""
+                className="max-h-full max-w-full object-contain"
+              />
+            </button>
+            <button
+              type="button"
+              onClick={() => toggleElementPin(entry)}
+              aria-label={t(
+                isPinned ? "detailPage.recents.unpin" : "detailPage.recents.pin",
+              )}
+              aria-pressed={isPinned}
+              className={`absolute -right-1 -top-1 rounded-full border border-neutral-200 bg-white p-0.5 transition-opacity ${
+                isPinned
+                  ? "text-amber-500 opacity-100"
+                  : "text-neutral-300 opacity-0 group-hover:opacity-100"
+              }`}
+            >
+              <Star aria-hidden="true" size={10} fill={isPinned ? "currentColor" : "none"} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/detail-page/element-rects.ts

@@ -0,0 +1,82 @@
+import Konva from "konva";
+
+/**
+ * Client-space geometry for a Canvas element, read from the Konva node it
+ * actually renders as (so zoom, scroll and the stacked workspace's per-page slots
+ * are all baked in — nothing here re-derives layout math).
+ *
+ * A GROUP is measured from its children, not from a node lookup: Canvas does not
+ * reliably stamp the element id onto the Konva.Group it creates, so `#<groupId>`
+ * resolves to nothing. Unioning the leaf rects gives the same box and works either
+ * way.
+ */
+
+export type ClientRect = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+export type RectElement = {
+  id: string;
+  type?: string;
+  children?: RectElement[];
+};
+
+/** The rect of ONE element's own Konva node, in client (viewport) coordinates. */
+export function konvaClientRect(id: string): ClientRect | null {
+  for (const stage of Konva.stages) {
+    const node = stage.findOne(`#${id}`);
+    if (!node) continue;
+    const box = node.getClientRect(); // stage px, zoom included
+    if (!box.width || !box.height) return null;
+    const s = stage.container().getBoundingClientRect();
+    return {
+      left: s.left + box.x,
+      top: s.top + box.y,
+      right: s.left + box.x + box.width,
+      bottom: s.top + box.y + box.height,
+    };
+  }
+  return null;
+}
+
+export function unionRect(rects: ReadonlyArray<ClientRect | null>): ClientRect | null {
+  let out: ClientRect | null = null;
+  for (const r of rects) {
+    if (!r) continue;
+    out = out
+      ? {
+          left: Math.min(out.left, r.left),
+          top: Math.min(out.top, r.top),
+          right: Math.max(out.right, r.right),
+          bottom: Math.max(out.bottom, r.bottom),
+        }
+      : r;
+  }
+  return out;
+}
+
+/** Every leaf under `el` — the elements that really have a Konva node. */
+export function leafIds(el: RectElement): string[] {
+  const kids = el.children;
+  if (!kids?.length) return [el.id];
+  return kids.flatMap(leafIds);
+}
+
+/** The box of any element, group or not, in client coordinates. */
+export function elementClientRect(
+  el: RectElement,
+  rectOf: (id: string) => ClientRect | null = konvaClientRect,
+): ClientRect | null {
+  return unionRect(leafIds(el).map(rectOf));
+}
+
+export function pointInRect(
+  r: ClientRect | null,
+  p: { x: number; y: number },
+): boolean {
+  if (!r) return false;
+  return p.x >= r.left && p.x <= r.right && p.y >= r.top && p.y <= r.bottom;
+}