@leviosa-ai/detail-page-editor 0.1.0

package/components/detail-page/spec-prompt-edit-panel.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+// "프롬프트로 편집" — 선택한 차트·표를 자연어 요청으로 고친다("행 하나 더 넣고 단위를
+// %로"). 소싱 서버의 그룹 편집 엔드포인트(/{generatedId}/group/prompt-edit)에
+// ``kind: "data"`` 항목 하나로 보내고, 돌아온 **스펙**을 그대로 적용한다.
+//
+// ⚠️ 자식 글자를 고쳐 받지 않는다. 차트·표의 자식(막대·칸 글자)은 스펙에서 매번 다시
+// 그려지므로, 글자만 고쳐 두면 사용자가 다음에 행 하나 늘리는 순간 조용히 덮인다.
+// 그래서 서버도 프론트도 스펙만 주고받고, 적용은 sync 경로(그리는 곳 하나)를 탄다.
+
+import { useCallback, useState } from "react";
+import { ArrowUp, Loader2, Sparkles } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { useDetailPageHost } from "./detail-page-host-context";
+import { EditQuotaBlock, EditUsageBadge } from "./edit-quota-ui";
+import { GenerationProgressLine } from "./generation-progress-fill";
+import {
+  useFakeProgress,
+  GENERATION_ESTIMATE_MS,
+} from "../../lib/detail-page/use-fake-progress";
+
+interface SpecPromptEditPanelProps {
+  /** 생성 인스턴스 ID. 없으면(픽스처 모드) 이 패널은 렌더되지 않는다. */
+  generatedId: string;
+  /** 차트인지 표인지. 서버가 검증 규칙을 이걸로 가른다. */
+  specKind: "chart" | "table";
+  /** 편집기 요소 id(응답 매핑용). */
+  elementId: string;
+  /** 지금 요소에 얹혀 있는 스펙. */
+  currentSpec: unknown;
+  /** 수정된 스펙을 적용하는 콜백(sync 경로를 태운다). */
+  onApplied: (spec: unknown) => void;
+  /** 이 인스턴스의 텍스트 편집 사용 횟수/한도(부모가 관리). */
+  editsUsed?: number;
+  editLimit?: number;
+  /** scratch 등 한도 면제면 카운터/차단을 숨긴다. */
+  unlimited?: boolean;
+  /** 편집 성공/차단 후 사용량 갱신을 부모에 알린다. */
+  onUsage?: (used: number, limit: number) => void;
+  /** 한도 소진 시 "편집 크레딧 추가하기" 목적지. */
+  onBuyMore?: () => void;
+}
+
+export function SpecPromptEditPanel({
+  generatedId,
+  specKind,
+  elementId,
+  currentSpec,
+  onApplied,
+  editsUsed = 0,
+  editLimit = 0,
+  unlimited = false,
+  onUsage,
+  onBuyMore,
+}: SpecPromptEditPanelProps) {
+  const { t } = useTranslation("branding");
+  const { api, toast } = useDetailPageHost();
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+  const progress = useFakeProgress(busy, GENERATION_ESTIMATE_MS.text);
+
+  const blocked = !unlimited && editLimit > 0 && editsUsed >= editLimit;
+
+  const send = useCallback(async () => {
+    const instruction = input.trim();
+    if (!instruction || busy || blocked) return;
+    setBusy(true);
+    try {
+      const result = await api.groupPromptEditDetailPage(generatedId, {
+        instruction,
+        items: [
+          {
+            id: elementId,
+            kind: "data",
+            spec_kind: specKind,
+            current_spec: currentSpec,
+          },
+        ],
+      });
+      if (
+        typeof result.text_used === "number" &&
+        typeof result.text_limit === "number"
+      ) {
+        onUsage?.(result.text_used, result.text_limit);
+      }
+      // 서버는 변경이 없으면 spec을 아예 안 싣는다(원본 유지 = 무과금).
+      const spec = result.results?.find((item) => item.id === elementId)?.spec;
+      if (!spec) {
+        toast.info(t("detailPage.promptEdit.noChange"));
+      } else {
+        onApplied(spec);
+        toast.success(t("detailPage.specPromptEdit.success"));
+        setInput("");
+      }
+    } catch (err) {
+      const quota = api.asEditQuotaError(err);
+      if (quota) {
+        onUsage?.(quota.limit, quota.limit);
+        toast.error(t("detailPage.promptEdit.quotaExhausted"));
+      } else {
+        toast.error(
+          err instanceof Error ? err.message : t("detailPage.promptEdit.requestFailed"),
+        );
+      }
+    } finally {
+      setBusy(false);
+    }
+  }, [
+    api,
+    toast,
+    input,
+    busy,
+    blocked,
+    generatedId,
+    specKind,
+    elementId,
+    currentSpec,
+    onApplied,
+    onUsage,
+    t,
+  ]);
+
+  return (
+    <div className="relative flex flex-col overflow-hidden rounded-xl border border-border bg-card">
+      <div className="flex items-center gap-1.5 border-b border-border px-3 py-2">
+        <Sparkles size={13} className="text-primary" />
+        <span className="text-xs font-medium text-foreground">
+          {t("detailPage.promptEdit.header")}
+        </span>
+        {unlimited || editLimit > 0 ? (
+          <EditUsageBadge used={editsUsed} limit={editLimit} unlimited={unlimited} />
+        ) : null}
+      </div>
+      {blocked ? (
+        <EditQuotaBlock kind="text" onBuyMore={onBuyMore} />
+      ) : (
+        <div className="flex items-end gap-1.5 px-2 py-2">
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                e.preventDefault();
+                send();
+              }
+            }}
+            rows={2}
+            placeholder={
+              busy
+                ? t("detailPage.promptEdit.editing")
+                : t(`detailPage.specPromptEdit.placeholder.${specKind}`)
+            }
+            disabled={busy}
+            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-foreground outline-none placeholder:text-muted-foreground/70 disabled:opacity-60"
+          />
+          <button
+            type="button"
+            onClick={send}
+            disabled={busy || !input.trim()}
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground disabled:opacity-40"
+            aria-label={t("detailPage.promptEdit.send")}
+          >
+            {busy ? (
+              <Loader2 size={15} className="animate-spin" />
+            ) : (
+              <ArrowUp size={15} />
+            )}
+          </button>
+        </div>
+      )}
+      {busy ? <GenerationProgressLine progress={progress} /> : null}
+      <p className="px-3 pb-2 text-[11px] leading-relaxed text-muted-foreground">
+        {t("detailPage.specPromptEdit.hint")}
+      </p>
+    </div>
+  );
+}

package/components/detail-page/spec-resize-absorber.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import { useEffect, useRef, type RefObject } from "react";
+import { observer } from "./canvas-observer";
+
+import {
+  selectedElementsDeep,
+  type SelectableElement,
+} from "./detail-page-selection";
+import { chartBox, readChartSpec, syncChartGroup } from "../../lib/detail-page/chart/sync";
+import { readTableSpec, syncTableGroup, tableBox } from "../../lib/detail-page/table/sync";
+import type { ElementLike, StoreLike } from "../../lib/detail-page/spec-group/sync";
+
+/**
+ * 차트·표를 트랜스포머로 끈 결과를 **끌기가 멈추자마자** 스펙에 되먹인다.
+ *
+ * 되먹임 자체는 ``absorbResize``가 재생성 안에서 하지만(``spec-group/sync``), 재생성은
+ * 사용자가 값을 고칠 때만 돈다. 그래서 이게 없으면 이런 일이 벌어진다: 세로로 끌면
+ * Konva가 자식을 통째로 스케일해 글자까지 커진 모습이 보이고 → 한참 뒤 칸 하나를 고치면
+ * 그제야 "글자는 원래 크기, 여백만 늘어난" 진짜 모습으로 다시 그려진다. 사용자에겐
+ * 아무 관계 없는 편집이 표를 튀게 만든 걸로 보인다.
+ *
+ * 끌고 있는 동안 매번 다시 그리면 캔버스가 덜덜 떨기 때문에, 상자가 잠잠해질 때까지
+ * 기다렸다 한 번만 돈다.
+ */
+
+/** 끌기가 멈춘 걸로 보는 시간. */
+const SETTLE_MS = 180;
+
+type AbsorbStore = StoreLike & {
+  selectedElementsIds?: string[];
+  selectedElements?: SelectableElement[];
+  getElementById?: (id: string) => SelectableElement | undefined;
+  pages?: Array<{ children?: unknown }>;
+};
+
+type Kind = {
+  box: (group: ElementLike) => { width: number; height: number } | null;
+  sync: (store: StoreLike, group: ElementLike, spec: never) => unknown;
+  read: (el: ElementLike) => unknown;
+};
+
+const KINDS: Kind[] = [
+  {
+    read: (el) => readTableSpec(el),
+    box: tableBox,
+    sync: (store, group, spec) => syncTableGroup(store, group, spec),
+  },
+  {
+    read: (el) => readChartSpec(el),
+    box: chartBox,
+    sync: (store, group, spec) => syncChartGroup(store, group, spec),
+  },
+];
+
+function childrenOf(node: { children?: unknown }): ElementLike[] {
+  return Array.isArray(node.children) ? (node.children as ElementLike[]) : [];
+}
+
+function idsUnder(el: ElementLike, into: Set<string>): Set<string> {
+  if (typeof el.id === "string") into.add(el.id);
+  for (const kid of childrenOf(el)) idsUnder(kid, into);
+  return into;
+}
+
+/** 선택이 들어 있는 스펙 그룹(차트든 표든)과 그 종류. */
+export function findSpecGroup(
+  store: { pages?: Array<{ children?: unknown }> },
+  selectedIds: ReadonlyArray<string>,
+): { group: ElementLike; kind: Kind } | null {
+  if (selectedIds.length === 0) return null;
+  for (const page of store.pages ?? []) {
+    for (const el of childrenOf(page)) {
+      if (el.type !== "group") continue;
+      const kind = KINDS.find((candidate) => candidate.read(el));
+      if (!kind) continue;
+      const inside = idsUnder(el, new Set<string>());
+      if (selectedIds.some((id) => inside.has(id))) return { group: el, kind };
+    }
+  }
+  return null;
+}
+
+/** 상자가 의미 있게 달라졌는가. 소수점 흔들림으로 재생성이 도는 걸 막는다. */
+export function boxChanged(
+  a: { width: number; height: number } | null,
+  b: { width: number; height: number } | null,
+): boolean {
+  if (!a || !b) return false;
+  return Math.abs(a.width - b.width) > 1 || Math.abs(a.height - b.height) > 1;
+}
+
+export const SpecResizeAbsorber = observer(function SpecResizeAbsorber({
+  store,
+}: {
+  store: unknown;
+  /** 다른 오버레이와 자리를 맞추기 위해 받지만 쓰지 않는다(그리는 게 없다). */
+  containerRef?: RefObject<HTMLElement | null>;
+}) {
+  const s = store as AbsorbStore;
+  const selected = selectedElementsDeep(s);
+  const found = findSpecGroup(s, selected.map((e) => String(e.id)));
+
+  // mobx가 자식의 이동·크기 변화를 감지하도록 렌더 중에 읽는다.
+  const stamp = found
+    ? childrenOf(found.group)
+        .map((k) => `${k.id}:${k.x},${k.y},${k.width},${k.height}`)
+        .join("|")
+    : "";
+  const groupId = found ? String(found.group.id) : null;
+
+  const foundRef = useRef(found);
+  foundRef.current = found;
+
+  // "저장된 frame과 다른가"가 아니라 "직전에 본 상자와 달라졌는가"로 판정한다. 바탕도
+  // 테두리도 없는 표는 자식 합집합이 프레임보다 좁아서, 전자로 걸면 영영 같아지지 않고
+  // 재생성이 무한히 돈다.
+  const lastBox = useRef<{ width: number; height: number } | null>(null);
+  useEffect(() => {
+    const current = foundRef.current;
+    if (!current) {
+      lastBox.current = null;
+      return;
+    }
+    const box = current.kind.box(current.group);
+    if (!box) return;
+    const previous = lastBox.current;
+    if (!previous) {
+      lastBox.current = { width: box.width, height: box.height };
+      return;
+    }
+    if (!boxChanged(previous, box)) return;
+    const timer = setTimeout(() => {
+      const target = foundRef.current;
+      if (!target) return;
+      const spec = target.kind.read(target.group);
+      if (!spec) return;
+      target.kind.sync(s, target.group, spec as never);
+      const settled = target.kind.box(target.group);
+      lastBox.current = settled
+        ? { width: settled.width, height: settled.height }
+        : null;
+    }, SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [stamp, groupId, s]);
+
+  return null;
+});
+SpecResizeAbsorber.displayName = "SpecResizeAbsorber";

package/components/detail-page/svg-prompt-edit-panel.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+// "프롬프트로 편집" — 선택한 SVG 도형(벡터 장식)을 자연어 요청으로 다시 그린다. 소싱
+// 서버의 svg 편집 엔드포인트(/{generatedId}/svg/prompt-edit)에 현재 마크업 + 지시를 한
+// 번 POST 하고, 돌아온 <svg> 마크업을 data URI로 인코딩해 해당 Canvas 요소의 src에
+// 적용한다(viewBox/치수 유지, 순수 벡터). 카피용 PromptEditPanel의 SVG 판.
+
+import { useCallback, useState } from "react";
+import { ArrowUp, Loader2, Sparkles } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useDetailPageHost } from "./detail-page-host-context";
+import { EditQuotaBlock, EditUsageBadge } from "./edit-quota-ui";
+import { GenerationProgressLine } from "./generation-progress-fill";
+import {
+  useFakeProgress,
+  GENERATION_ESTIMATE_MS,
+} from "../../lib/detail-page/use-fake-progress";
+
+interface SvgPromptEditPanelProps {
+  /** 생성 인스턴스 ID. 없으면(픽스처 모드) 이 패널은 렌더되지 않는다. */
+  generatedId: string;
+  /** 요소의 custom.leviosaSlot(있으면 문맥용, 없으면 빈 문자열). */
+  slotRole?: string;
+  /** 편집기에 지금 표시된 SVG 마크업(el.src를 디코딩한 값). */
+  currentSvg: string;
+  /** 수정된 SVG 마크업을 요소에 반영하는 콜백 (el.set({ src: dataUri })). */
+  onApplied: (svg: string) => void;
+  /** 이 인스턴스의 SVG 편집 사용 횟수/한도(부모가 관리). */
+  editsUsed?: number;
+  editLimit?: number;
+  /** scratch 등 한도 면제면 카운터/차단을 숨긴다. */
+  unlimited?: boolean;
+  /** 편집 성공/차단 후 사용량 갱신을 부모에 알린다. */
+  onUsage?: (used: number, limit: number) => void;
+  /** 한도 소진 시 "편집 크레딧 추가하기" 목적지(레비오사 결제면). */
+  onBuyMore?: () => void;
+}
+
+export function SvgPromptEditPanel({
+  generatedId,
+  slotRole,
+  currentSvg,
+  onApplied,
+  editsUsed = 0,
+  editLimit = 0,
+  unlimited = false,
+  onUsage,
+  onBuyMore,
+}: SvgPromptEditPanelProps) {
+  const { t } = useTranslation("branding");
+  const { api, toast } = useDetailPageHost();
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+  const progress = useFakeProgress(busy, GENERATION_ESTIMATE_MS.text);
+
+  const blocked = !unlimited && editLimit > 0 && editsUsed >= editLimit;
+
+  const send = useCallback(async () => {
+    const instruction = input.trim();
+    if (!instruction || busy || blocked) return;
+    setBusy(true);
+    try {
+      const result = await api.svgPromptEditDetailPage(generatedId, {
+        slot_role: slotRole,
+        current_svg: currentSvg,
+        instruction,
+      });
+      if (typeof result.edits_used === "number" && typeof result.edit_limit === "number") {
+        onUsage?.(result.edits_used, result.edit_limit);
+      }
+      const svg = (result.svg ?? "").trim();
+      if (!svg || svg === currentSvg.trim()) {
+        toast.info(t("detailPage.promptEdit.noChange"));
+      } else {
+        onApplied(svg);
+        toast.success(t("detailPage.svgPromptEdit.success"));
+        setInput("");
+      }
+    } catch (err) {
+      const quota = api.asEditQuotaError(err);
+      if (quota) {
+        onUsage?.(quota.limit, quota.limit);
+        toast.error(t("detailPage.promptEdit.quotaExhausted"));
+      } else {
+        toast.error(err instanceof Error ? err.message : t("detailPage.promptEdit.requestFailed"));
+      }
+    } finally {
+      setBusy(false);
+    }
+  }, [api, toast, input, busy, blocked, generatedId, slotRole, currentSvg, onApplied, onUsage, t]);
+
+  return (
+    <div className="relative flex flex-col overflow-hidden rounded-xl border border-border bg-card">
+      <div className="flex items-center gap-1.5 border-b border-border px-3 py-2">
+        <Sparkles size={13} className="text-primary" />
+        <span className="text-xs font-medium text-foreground">{t("detailPage.promptEdit.header")}</span>
+        {unlimited || editLimit > 0 ? (
+          <EditUsageBadge used={editsUsed} limit={editLimit} unlimited={unlimited} />
+        ) : null}
+      </div>
+      {blocked ? (
+        <EditQuotaBlock kind="svg" onBuyMore={onBuyMore} />
+      ) : (
+        <div className="flex items-end gap-1.5 px-2 py-2">
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                e.preventDefault();
+                send();
+              }
+            }}
+            rows={2}
+            placeholder={
+              busy ? t("detailPage.promptEdit.editing") : t("detailPage.svgPromptEdit.placeholder")
+            }
+            disabled={busy}
+            className="max-h-32 flex-1 resize-none bg-transparent px-2 py-1.5 text-[13px] leading-5 text-foreground outline-none placeholder:text-muted-foreground/70 disabled:opacity-60"
+          />
+          <button
+            type="button"
+            onClick={send}
+            disabled={busy || !input.trim()}
+            className="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-primary text-primary-foreground disabled:opacity-40"
+            aria-label={t("detailPage.promptEdit.send")}
+          >
+            {busy ? (
+              <Loader2 size={15} className="animate-spin" />
+            ) : (
+              <ArrowUp size={15} />
+            )}
+          </button>
+        </div>
+      )}
+      {busy ? <GenerationProgressLine progress={progress} /> : null}
+    </div>
+  );
+}