@leviosa-ai/detail-page-editor 0.1.0

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

@@ -0,0 +1,154 @@
+"use client";
+
+// "그룹 편집" — 그룹으로 묶인 여러 요소(텍스트·SVG 도형)를 자연어 요청 한 번으로 함께
+// 수정한다. 소싱 서버의 그룹 편집 엔드포인트(/{generatedId}/group/prompt-edit)에 그룹
+// 안 모든 텍스트/도형 + 지시를 한 번 POST 하고, id로 돌아온 결과를 각 요소에 적용한다.
+// 텍스트는 서로 어울리게 한 번에 다시 쓰이고, 도형은 같은 지시로 각자 다시 그려진다.
+// 슬롯 단건용 PromptEditPanel / SvgPromptEditPanel의 그룹 통합판(프롬프트 박스 1개).
+
+import { useCallback, useState } from "react";
+import { ArrowUp, Loader2, Sparkles } from "lucide-react";
+import { useDetailPageHost } from "./detail-page-host-context";
+import type {
+  DetailPageGroupEditItem,
+  DetailPageGroupEditResultItem,
+} from "./detail-page-host-context";
+import { EditQuotaBlock, EditUsageBadge } from "./edit-quota-ui";
+
+interface GroupPromptEditPanelProps {
+  /** 생성 인스턴스 ID. 없으면(픽스처 모드) 이 패널은 렌더되지 않는다. */
+  generatedId: string;
+  /** 편집할 그룹 내 요소들(텍스트·도형)의 현재 상태. */
+  items: DetailPageGroupEditItem[];
+  /** 요소별 결과를 각 Canvas 요소에 반영하는 콜백(id로 매핑). */
+  onApplied: (results: DetailPageGroupEditResultItem[]) => void;
+  /** 텍스트 편집 사용 횟수/한도(부모가 관리). */
+  textUsed?: number;
+  textLimit?: number;
+  /** SVG 편집 사용 횟수/한도(부모가 관리). */
+  svgUsed?: number;
+  svgLimit?: number;
+  /** scratch 등 한도 면제면 카운터/차단을 숨긴다. */
+  unlimited?: boolean;
+  /** 편집 성공/차단 후 종류별 사용량 갱신을 부모에 알린다. */
+  onUsage?: (kind: "svg" | "text", used: number, limit: number) => void;
+  /** 한도 소진 시 "편집 크레딧 추가하기" 목적지(레비오사 결제면). */
+  onBuyMore?: () => void;
+}
+
+export function GroupPromptEditPanel({
+  generatedId,
+  items,
+  onApplied,
+  textUsed = 0,
+  textLimit = 0,
+  svgUsed = 0,
+  svgLimit = 0,
+  unlimited = false,
+  onUsage,
+  onBuyMore,
+}: GroupPromptEditPanelProps) {
+  const { api, toast } = useDetailPageHost();
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const hasText = items.some((i) => i.kind === "text");
+  const hasSvg = items.some((i) => i.kind === "svg");
+  // 그룹에 포함된 종류 중 하나라도 한도를 소진하면 편집을 막는다(백엔드도 종류별로 막음).
+  const textBlocked = hasText && !unlimited && textLimit > 0 && textUsed >= textLimit;
+  const svgBlocked = hasSvg && !unlimited && svgLimit > 0 && svgUsed >= svgLimit;
+  const blocked = textBlocked || svgBlocked;
+  const blockedKind: "text" | "svg" = textBlocked ? "text" : "svg";
+
+  const send = useCallback(async () => {
+    const instruction = input.trim();
+    if (!instruction || busy || blocked || items.length === 0) return;
+    setBusy(true);
+    try {
+      const result = await api.groupPromptEditDetailPage(generatedId, {
+        instruction,
+        items,
+      });
+      if (typeof result.text_used === "number" && typeof result.text_limit === "number") {
+        onUsage?.("text", result.text_used, result.text_limit);
+      }
+      if (typeof result.svg_used === "number" && typeof result.svg_limit === "number") {
+        onUsage?.("svg", result.svg_used, result.svg_limit);
+      }
+      const changed = result.results.filter((r) => {
+        const src = items.find((i) => i.id === r.id);
+        if (!src) return false;
+        if (r.kind === "text") return (r.text ?? "").trim() !== (src.current_text ?? "").trim();
+        return (r.svg ?? "").trim() !== (src.current_svg ?? "").trim();
+      });
+      if (changed.length === 0) {
+        toast.info("바뀐 내용이 없어요. 다르게 요청해 보세요.");
+      } else {
+        onApplied(changed);
+        toast.success("그룹을 수정했어요.");
+        setInput("");
+      }
+    } catch (err) {
+      const quota = api.asEditQuotaError(err);
+      if (quota) {
+        onUsage?.(quota.kind, quota.limit, quota.limit);
+        toast.error("편집 한도를 모두 사용했어요.");
+      } else {
+        toast.error(err instanceof Error ? err.message : "수정 요청이 실패했어요.");
+      }
+    } finally {
+      setBusy(false);
+    }
+  }, [api, toast, input, busy, blocked, items, generatedId, onApplied, onUsage]);
+
+  // 배지는 그룹에 텍스트가 있으면 텍스트, 아니면 SVG 사용량을 대표로 보여준다.
+  const badgeUsed = hasText ? textUsed : svgUsed;
+  const badgeLimit = hasText ? textLimit : svgLimit;
+
+  return (
+    <div className="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">프롬프트로 편집</span>
+        {unlimited || badgeLimit > 0 ? (
+          <EditUsageBadge used={badgeUsed} limit={badgeLimit} unlimited={unlimited} />
+        ) : null}
+      </div>
+      {blocked ? (
+        <EditQuotaBlock kind={blockedKind} 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 ? "수정 중…" : '어떻게 바꿀까요? (예: "더 힘있게", "톤을 통일해서")'
+            }
+            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="프롬프트로 수정"
+          >
+            {busy ? (
+              <Loader2 size={15} className="animate-spin" />
+            ) : (
+              <ArrowUp size={15} />
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/detail-page/hover-highlight-overlay.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useLayoutEffect, useRef, useState, type RefObject } from "react";
+import { observer } from "./canvas-observer";
+
+import {
+  elementClientRect,
+  type RectElement,
+} from "./element-rects";
+import { useHoveredLayerId } from "./hovered-layer";
+
+/**
+ * Green outline on the canvas for the layer the pointer is over in the layers tree.
+ *
+ * The decomposed chart is a stack of a dozen rows all reading "도형" — the only way
+ * to tell which is which is to see it light up. Deliberately GREEN and fill-tinted,
+ * so it never reads as "selected" (blue box + handles); it is a preview, not a
+ * state, and it takes no pointer events.
+ */
+
+const ACCENT = "rgb(16, 185, 129)";
+
+type Store = { getElementById?: (id: string) => RectElement | undefined };
+
+type Box = { left: number; top: number; width: number; height: number };
+
+export const HoverHighlightOverlay = observer(function HoverHighlightOverlay({
+  store,
+  containerRef,
+  scrollRef,
+}: {
+  store: unknown;
+  containerRef: RefObject<HTMLDivElement | null>;
+  scrollRef: RefObject<HTMLDivElement | null>;
+}) {
+  const s = store as Store;
+  const hoveredId = useHoveredLayerId();
+  const [box, setBox] = useState<Box | null>(null);
+  const frame = useRef<number | null>(null);
+
+  const measure = () => {
+    const host = containerRef.current;
+    const el = hoveredId ? s.getElementById?.(hoveredId) : undefined;
+    if (!host || !el) {
+      setBox((prev) => (prev ? null : prev));
+      return;
+    }
+    const r = elementClientRect(el);
+    if (!r) {
+      setBox(null);
+      return;
+    }
+    const h = host.getBoundingClientRect();
+    setBox({
+      left: r.left - h.left,
+      top: r.top - h.top,
+      width: r.right - r.left,
+      height: r.bottom - r.top,
+    });
+  };
+
+  useLayoutEffect(() => {
+    const raf = requestAnimationFrame(measure);
+    return () => cancelAnimationFrame(raf);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hoveredId]);
+
+  // Keep it pinned while the user scrolls the stack with the tree still hovered.
+  useEffect(() => {
+    if (!hoveredId) return;
+    const scroller = scrollRef.current;
+    const onMove = () => {
+      if (frame.current !== null) return;
+      frame.current = requestAnimationFrame(() => {
+        frame.current = null;
+        measure();
+      });
+    };
+    scroller?.addEventListener("scroll", onMove, { passive: true });
+    window.addEventListener("resize", onMove);
+    return () => {
+      scroller?.removeEventListener("scroll", onMove);
+      window.removeEventListener("resize", onMove);
+      if (frame.current !== null) cancelAnimationFrame(frame.current);
+      frame.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hoveredId, scrollRef]);
+
+  if (!box) return null;
+
+  return (
+    <div
+      data-dp-hover-highlight=""
+      style={{
+        position: "absolute",
+        left: box.left,
+        top: box.top,
+        width: box.width,
+        height: box.height,
+        border: `2px solid ${ACCENT}`,
+        background: "rgba(16, 185, 129, 0.12)",
+        boxSizing: "border-box",
+        borderRadius: 2,
+        pointerEvents: "none",
+        zIndex: 19, // under the selection overlay (20), over the canvas
+      }}
+    />
+  );
+});
+HoverHighlightOverlay.displayName = "HoverHighlightOverlay";

package/components/detail-page/hovered-layer.ts

@@ -0,0 +1,34 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * Which layer the pointer is over in the layers tree.
+ *
+ * The tree and the canvas live in different React subtrees (sidebar panel vs
+ * workspace) with no common provider between them, and this is transient pointer
+ * state that must never enter the Canvas document or its undo history — so it
+ * lives in a tiny external store instead of the element model.
+ */
+
+let hovered: string | null = null;
+const listeners = new Set<() => void>();
+
+export function setHoveredLayerId(id: string | null): void {
+  if (id === hovered) return;
+  hovered = id;
+  for (const l of listeners) l();
+}
+
+export function getHoveredLayerId(): string | null {
+  return hovered;
+}
+
+function subscribe(l: () => void): () => void {
+  listeners.add(l);
+  return () => {
+    listeners.delete(l);
+  };
+}
+
+export function useHoveredLayerId(): string | null {
+  return useSyncExternalStore(subscribe, getHoveredLayerId, () => null);
+}

package/components/detail-page/inspector-controls.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * 우측 인스펙터가 공유하는 작은 컨트롤들.
+ *
+ * ``detail-page-properties-panel``에 있던 것을 그대로 옮겼다. 차트 인스펙터가 같은 것을
+ * 써야 하는데, 패널이 차트 인스펙터를 import하고 차트 인스펙터가 다시 패널을 import하면
+ * 순환이 된다.
+ */
+
+export function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="border-t border-neutral-200 px-4 py-3 first:border-t-0">
+      <h4 className="mb-2 text-[11px] font-semibold uppercase tracking-[0.06em] text-neutral-400">
+        {title}
+      </h4>
+      {children}
+    </section>
+  );
+}
+
+/** Numeric field: no native spinners, commits on blur/Enter, arrow-key stepping. */
+export function NumberField({
+  value,
+  onChange,
+  step = 1,
+  min,
+  max,
+  suffix,
+  label,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  step?: number;
+  min?: number;
+  max?: number;
+  suffix?: string;
+  // 지정하면 이 라벨이 피그마식 드래그 스크럽 핸들이 된다(좌우 드래그로 값 증감).
+  label?: string;
+}) {
+  const [local, setLocal] = useState(String(value));
+  useEffect(() => {
+    setLocal(String(Math.round(value * 100) / 100));
+  }, [value]);
+
+  const clamp = (n: number) =>
+    Math.max(min ?? -Infinity, Math.min(max ?? Infinity, n));
+  const precision = String(step).split(".")[1]?.length ?? 0;
+  const round = (n: number) => Number(clamp(n).toFixed(precision));
+  const commit = () => {
+    const n = Number(local);
+    if (local !== "" && !Number.isNaN(n)) onChange(clamp(n));
+    else setLocal(String(value));
+  };
+  const stepBy = (dir: number) => {
+    const base = Number(local);
+    const rounded = round((Number.isNaN(base) ? value : base) + dir * step);
+    setLocal(String(rounded));
+    onChange(rounded);
+  };
+
+  // 드래그 스크럽: 라벨을 누른 채 좌우로 끌면 1px당 step, Shift는 ×10.
+  const drag = useRef<{ x: number; base: number; moved: boolean } | null>(null);
+  const onScrubDown = (e: React.PointerEvent) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const base = Number(local);
+    drag.current = {
+      x: e.clientX,
+      base: Number.isNaN(base) ? value : base,
+      moved: false,
+    };
+    try {
+      (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+    } catch {
+      /* 캡처 미지원 환경 */
+    }
+  };
+  const onScrubMove = (e: React.PointerEvent) => {
+    const d = drag.current;
+    if (!d) return;
+    const dx = e.clientX - d.x;
+    if (!d.moved && Math.abs(dx) < 2) return;
+    d.moved = true;
+    const next = round(d.base + dx * step * (e.shiftKey ? 10 : 1));
+    setLocal(String(next));
+    onChange(next);
+  };
+  const onScrubUp = (e: React.PointerEvent) => {
+    if (!drag.current) return;
+    drag.current = null;
+    try {
+      (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+    } catch {
+      /* capture 이미 해제됨 */
+    }
+  };
+
+  return (
+    <div className="flex items-center rounded-md border border-neutral-200 bg-white pr-2 focus-within:border-neutral-400">
+      {label ? (
+        <span
+          aria-hidden="true"
+          onPointerDown={onScrubDown}
+          onPointerMove={onScrubMove}
+          onPointerUp={onScrubUp}
+          onPointerCancel={onScrubUp}
+          className="cursor-ew-resize select-none touch-none py-1.5 pl-2 pr-1.5 text-xs font-medium text-neutral-400 hover:text-neutral-600"
+          title={`${label} — 좌우로 드래그해 값 조절 (Shift ×10)`}
+        >
+          {label}
+        </span>
+      ) : (
+        <span className="pl-2" />
+      )}
+      <input
+        type="text"
+        inputMode="decimal"
+        value={local}
+        onChange={(e) => setLocal(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            commit();
+            (e.target as HTMLInputElement).blur();
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            stepBy(1);
+          } else if (e.key === "ArrowDown") {
+            e.preventDefault();
+            stepBy(-1);
+          }
+        }}
+        className="w-full min-w-0 bg-transparent py-1.5 text-sm tabular-nums text-neutral-900 outline-none"
+      />
+      {suffix ? <span className="ml-1 text-xs text-neutral-400">{suffix}</span> : null}
+    </div>
+  );
+}
+
+export function ToggleButton({
+  active,
+  onClick,
+  title,
+  children,
+}: {
+  active: boolean;
+  onClick: () => void;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      title={title}
+      onClick={onClick}
+      className={[
+        "flex h-8 flex-1 items-center justify-center rounded-md border transition-colors",
+        active
+          ? "border-neutral-800 bg-neutral-900 text-white"
+          : "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50",
+      ].join(" ")}
+    >
+      {children}
+    </button>
+  );
+}