@leviosa-ai/detail-page-editor 0.1.0

package/components/detail-page/gif-animator.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { observer } from "./canvas-observer";
+import Konva from "konva";
+
+import { isGifSrc } from "../../lib/detail-page-canvas/export/gif-plan";
+import {
+  decodeAnimation,
+  frameAtTime,
+  type DecodedAnimation,
+} from "../../lib/detail-page/gif-frames";
+
+/**
+ * 움직이는 이미지(GIF·WebP)를 캔버스에서 재생시키는 컨트롤러(오버레이 없음).
+ *
+ * 핵심 사실 하나에서 출발한다. **`drawImage(움직이는 이미지)` 는 언제나 첫 프레임을
+ * 준다.** 이미지가 문서에 붙어 있든 아니든, GIF 든 WebP 든 마찬가지다(실측: 헤드리스·
+ * 헤드풀 Chrome 양쪽에서 3프레임 애니메이션을 1.5초 동안 12번 찍어도 색이 하나였다).
+ * 브라우저는 화면에 그려지는 `<img>` 만 프레임을 넘기고, 캔버스로 퍼 갈 때는 넘겨주지
+ * 않는다. 그래서 "레이어를 계속 다시 그리면 브라우저가 넘긴 프레임이 찍힌다"는 접근은
+ * 성립하지 않는다 — 첫 프레임을 15fps 로 다시 그릴 뿐이다.
+ *
+ * 그러므로 프레임은 우리가 직접 넘긴다. 소스를 한 번 디코딩해 두고(gif-frames), 매 틱
+ * Konva.Image 의 `image` 를 그 시각의 프레임 캔버스로 갈아 끼운 뒤 레이어를 다시 그린다.
+ * 프레임 캔버스는 원본과 같은 크기라서 엔진이 계산해 둔 `crop`·`cornerRadius`·배치가
+ * 그대로 맞는다 — 잘라내기 수식을 여기서 다시 구현하지 않아도 된다(예전에는 편집기의
+ * 오프스크린 스냅샷을 흉내 내느라 복제했고, 엔진이 바뀔 때마다 어긋났다).
+ *
+ * GIF는 진짜 Konva 노드이므로 z-order·그 위 텍스트·불투명도·드래그가 모두 네이티브로
+ * 맞다. 실제 export 는 별도로 프레임을 합성하므로 이 프리뷰 경로와 무관하다.
+ *
+ * 성능: 움직이는 요소가 있고 탭이 보일 때만 돈다. 스택 워크스페이스는 활성 인덱스 주변
+ * 몇 페이지만 마운트하므로 다시 그리는 레이어는 보통 1~2개다. 각 src는 한 번만 디코드.
+ */
+
+type ElementLike = {
+  id: string;
+  type?: string;
+  src?: string;
+  visible?: boolean;
+  custom?: Record<string, unknown> | null;
+  children?: ElementLike[];
+};
+type StoreLike = { pages?: Array<{ children?: ElementLike[] }> };
+
+const FPS = 15;
+const FRAME_MS = 1000 / FPS;
+
+function isGifElement(el: ElementLike): boolean {
+  if (el.custom && (el.custom as { detailPageGif?: unknown }).detailPageGif) return true;
+  return (el.type === "image" || el.type === "svg") && isGifSrc(el.src);
+}
+
+function collectGifElements(children: ElementLike[] | undefined, out: ElementLike[]): void {
+  for (const el of children ?? []) {
+    if (isGifElement(el) && el.src && el.visible !== false) out.push(el);
+    if (el.children) collectGifElements(el.children, out);
+  }
+}
+
+/**
+ * 재생 대상 요소 id(모든 페이지, 그룹 재귀). 숨김(visible:false)·src 없음은 제외.
+ * 애니메이션 루프가 다시 그릴 노드를 이 id들로 찾는다.
+ */
+export function gifElementIds(pages: Array<{ children?: ElementLike[] }> | undefined): string[] {
+  const els: ElementLike[] = [];
+  for (const page of pages ?? []) collectGifElements(page.children, els);
+  return els.map((el) => el.id);
+}
+
+/** `image()` 를 가진 노드 — 이미지 노드 자신이거나, 요소 그룹 안의 이미지 자식. */
+type ImageNode = Konva.Node & { image: (value?: CanvasImageSource) => unknown };
+
+function hasImageAccessor(node: Konva.Node | null): node is ImageNode {
+  return typeof (node as { image?: unknown } | null)?.image === "function";
+}
+
+/**
+ * 요소 id로 그릴 이미지 노드를 찾는다.
+ *
+ * 엔진이 요소 하나를 `id` 를 단 Group 으로 감싸고 그 안에 이미지 노드를 두므로, id 로
+ * 찾은 노드가 곧 이미지 노드는 아니다. 한 겹 더 내려가야 한다.
+ */
+export function findImageNode(id: string, stages: Konva.Stage[]): ImageNode | null {
+  for (const stage of stages) {
+    const found = stage.findOne(`#${id}`);
+    if (!found) continue;
+    if (hasImageAccessor(found)) return found;
+    const inner = (found as Konva.Container).findOne?.("Image");
+    return hasImageAccessor(inner ?? null) ? (inner as ImageNode) : null;
+  }
+  return null;
+}
+
+export const GifAnimator = observer(function GifAnimator({ store }: { store: unknown }) {
+  const s = store as StoreLike;
+  // render 중에 읽어(mobx) GIF가 생기거나 숨겨지면 루프가 재구성되게 한다.
+  const els: ElementLike[] = [];
+  for (const page of s.pages ?? []) collectGifElements(page.children, els);
+  const key = els.map((el) => `${el.id}:${el.src ?? ""}`).join(",");
+
+  // 요소 참조/디코드 캐시(effect 밖 stable ref). 루프는 매 틱 최신 요소 속성을 읽는다.
+  const elMapRef = useRef<Map<string, ElementLike>>(new Map());
+  const decodedRef = useRef<Map<string, DecodedAnimation>>(new Map()); // src → 디코드 프레임
+  const failedRef = useRef<Set<string>>(new Set()); // 디코드 실패한 src(재시도·재로그 억제)
+  const staticRef = useRef<Set<string>>(new Set()); // 한 장으로 디코드된 src(재로그 억제)
+  elMapRef.current = new Map(els.map((el) => [el.id, el]));
+
+  useEffect(() => {
+    if (!els.length) return;
+    let raf = 0;
+    let last = 0;
+    let stopped = false;
+    const startedAt = typeof performance !== "undefined" ? performance.now() : 0;
+
+    // 새 src만 디코드(멱등). 실패하면 그 GIF는 정적으로 남는데, 예전엔 그걸 조용히
+    // 삼켜서 "캔버스에서만 재생이 안 되는" 증상만 남았다(원인은 CSP connect-src 차단).
+    // 같은 src로는 재시도하지 않고, 대신 이유를 한 번 남긴다.
+    for (const el of els) {
+      const src = el.src;
+      if (src && !decodedRef.current.has(src) && !failedRef.current.has(src)) {
+        decodeAnimation(src)
+          .then((g) => {
+            if (!stopped) decodedRef.current.set(src, g);
+          })
+          .catch((err) => {
+            failedRef.current.add(src);
+            console.warn("[GifAnimator] 디코드 실패 — 정적으로 표시됩니다.", src, err);
+          });
+      }
+    }
+
+    const tick = (t: number) => {
+      if (stopped) return;
+      raf = requestAnimationFrame(tick);
+      if (t - last < FRAME_MS) return; // ~15fps로 스로틀.
+      last = t;
+      if (typeof document !== "undefined" && document.hidden) return;
+
+      const layers = new Set<Konva.Layer>();
+      for (const [id, el] of elMapRef.current) {
+        const src = el.src;
+        const gif = src ? decodedRef.current.get(src) : undefined;
+        if (!gif) continue;
+        // 한 장짜리(정지 이미지·디코드 폴백)는 갈아 끼울 것이 없다. 다만 **움직이는
+        // 자산으로 꽂힌 요소가** 한 장으로 나오면 그건 사고다 — 디코더가 프레임 수를
+        // 잘못 준 적이 있고(ImageDecoder tracks.ready 누락), 실패가 아니라서 콘솔에
+        // 아무 흔적도 남지 않아 "그냥 안 움직인다"로만 보였다. 한 번은 남긴다.
+        if (gif.frames.length <= 1) {
+          if (src && !staticRef.current.has(src)) {
+            staticRef.current.add(src);
+            console.warn("[GifAnimator] 프레임이 한 장이라 정지 상태로 둡니다.", src);
+          }
+          continue;
+        }
+
+        const node = findImageNode(id, Konva.stages);
+        const layer = node?.getLayer();
+        if (!node || !layer) continue;
+
+        const frame = frameAtTime(gif, t - startedAt);
+        if (node.image() === frame.canvas) continue; // 같은 프레임이면 건드리지 않는다.
+        node.image(frame.canvas);
+        // 필터로 노드가 캐시돼 있으면 캐시를 비워야 갱신이 보인다(필터효과는 재생 중 생략).
+        const cached = node as unknown as { isCached?: () => boolean; clearCache?: () => void };
+        if (cached.isCached?.()) cached.clearCache?.();
+        layers.add(layer);
+      }
+      for (const layer of layers) layer.batchDraw();
+    };
+
+    raf = requestAnimationFrame(tick);
+    return () => {
+      stopped = true;
+      cancelAnimationFrame(raf);
+    };
+    // ids/속성은 key(문자열)로 대표. Konva.stages·요소는 라이브로 읽으므로 dep 불필요.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
+  return null;
+});
+GifAnimator.displayName = "GifAnimator";

package/components/detail-page/gif-effect-picker.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+// GIF 이펙트 픽커 — 폰트 픽커와 같은 방식(팝오버 + 실물 미리보기)으로 고른다.
+//
+// 원래는 <select> 였는데, "물결"·"흔들림"·"홀로그램 포일 (실버)" 같은 이름만 봐서는
+// 뭐가 어떻게 움직이는지 알 수 없어 매번 크레딧을 써서 만들어 봐야 했다. 폰트 픽커가
+// 글자 미리보기 WebP를 보여주듯, 여기서는 그 이펙트로 실제로 구운 GIF를 보여준다.
+// 미리보기는 정적 자산이다(`public/gif-effect-previews/`, 소싱 저장소의
+// `scripts/detail_page_gif_effect_previews.py` 로 굽는다) — 고르는 데 서버 호출이 없다.
+
+import { useState } from "react";
+import Image from "next/image";
+import { Check, ChevronDown } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import { useTranslation } from "react-i18next";
+
+export type GifEffectOption = {
+  id: string;
+  label: string;
+  /** 목록 아래에 띄울 한 줄 설명. */
+  hint?: string;
+  /** 있으면 이 라벨로 묶어서 보여준다(이미지 이펙트의 통짜/물체 구분). */
+  group?: string;
+  /** 미리보기 GIF 경로(`/gif-effect-previews/...`). */
+  previewSrc: string;
+};
+
+export function GifEffectPicker({
+  value,
+  options,
+  onChange,
+  disabled = false,
+  ariaLabel,
+}: {
+  value: string;
+  options: GifEffectOption[];
+  onChange: (id: string) => void;
+  disabled?: boolean;
+  ariaLabel?: string;
+}) {
+  const { t } = useTranslation("branding");
+  const [open, setOpen] = useState(false);
+  const selected = options.find((option) => option.id === value);
+  const label =
+    ariaLabel ??
+    t("detailPage.properties.gifEffectChoose", { defaultValue: "이펙트 고르기" });
+
+  // 그룹 순서는 options 등장 순서를 따른다(카탈로그 순서 = 픽커 순서).
+  const groups: Array<{ name: string; items: GifEffectOption[] }> = [];
+  for (const option of options) {
+    const name = option.group ?? "";
+    const bucket = groups.find((entry) => entry.name === name);
+    if (bucket) bucket.items.push(option);
+    else groups.push({ name, items: [option] });
+  }
+
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Trigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={label}
+          aria-expanded={open}
+          className="flex min-w-0 items-center justify-between gap-2 rounded-md border border-neutral-200 bg-white px-2 py-1.5 text-left text-sm text-neutral-900 outline-none hover:bg-neutral-50 focus:border-neutral-400 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <span className="min-w-0 truncate">{selected?.label ?? value}</span>
+          <ChevronDown
+            aria-hidden="true"
+            className="shrink-0 text-neutral-400"
+            size={14}
+          />
+        </button>
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          side="left"
+          align="start"
+          sideOffset={8}
+          collisionPadding={12}
+          className="z-[120] w-[300px] overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-[0_10px_32px_rgba(0,0,0,0.14)]"
+        >
+          <div className="max-h-[420px] overflow-y-auto p-1">
+            {groups.map((group) => (
+              <div key={group.name || "default"}>
+                {group.name ? (
+                  <p className="px-2 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.06em] text-neutral-400">
+                    {group.name}
+                  </p>
+                ) : null}
+                {group.items.map((option) => (
+                  <button
+                    key={option.id}
+                    type="button"
+                    aria-pressed={option.id === value}
+                    onClick={() => {
+                      onChange(option.id);
+                      setOpen(false);
+                    }}
+                    className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-neutral-50"
+                  >
+                    <span className="flex h-12 w-[92px] shrink-0 items-center justify-center overflow-hidden rounded border border-neutral-100 bg-neutral-50">
+                      {/* 미리보기는 움직여야 의미가 있다 — 최적화(정지 프레임 변환)를 끈다. */}
+                      <Image
+                        src={option.previewSrc}
+                        alt={option.label}
+                        width={184}
+                        height={96}
+                        className="h-full w-auto object-contain"
+                        unoptimized
+                      />
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <span className="block truncate text-sm text-neutral-900">
+                        {option.label}
+                      </span>
+                      {option.hint ? (
+                        <span className="mt-0.5 block text-[11px] leading-4 text-neutral-400">
+                          {option.hint}
+                        </span>
+                      ) : null}
+                    </span>
+                    {option.id === value ? (
+                      <Check aria-hidden="true" className="shrink-0" size={15} />
+                    ) : null}
+                  </button>
+                ))}
+              </div>
+            ))}
+          </div>
+          <PopoverPrimitive.Arrow className="fill-white" />
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}

package/components/detail-page/group-drill-in.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useEffect, useRef, type RefObject } from "react";
+
+import {
+  konvaClientRect,
+  pointInRect,
+  type ClientRect,
+} from "./element-rects";
+
+/**
+ * Figma-style drill-in: click a group once to select the group, click again on a
+ * shape inside it to select that shape.
+ *
+ * Canvas cannot do this on its own — its canvas resolves every hit node to
+ * ``el.top`` (the outermost non-group ancestor), so a press inside a group always
+ * re-selects the group and a group child is unreachable from the canvas. This
+ * listener watches the gesture on the workspace container without ever blocking it:
+ * when the group under the pointer already holds the selection, a click (press and
+ * release in place) selects the shape under the cursor. A press that turns into a
+ * DRAG is left alone — that is the user moving the whole group.
+ *
+ * Double-click falls out of the same rule for free — the first press selects the
+ * group, and by the time the second press is captured the group IS selected, so it
+ * drills in. No separate dblclick path, no timing heuristic.
+ *
+ * The hit test walks LEAVES, never a group's own box: the stock editor does not stamp the
+ * element id onto the Konva.Group it renders, so asking for the group's rect gets
+ * nothing and every drill silently no-ops. We find the front-most leaf under the
+ * cursor and then look at what it belongs to.
+ *
+ * Once a child is selected, ``NestedSelectionOverlay`` draws its box and owns the
+ * drag, so the shape genuinely moves and resizes.
+ */
+
+export type DrillElement = {
+  id: string;
+  type?: string;
+  visible?: boolean;
+  selectable?: boolean;
+  locked?: boolean;
+  children?: DrillElement[];
+};
+
+export type DrillPoint = { x: number; y: number };
+
+type DrillStore = {
+  pages?: Array<{ id: string; children?: DrillElement[] }>;
+  selectedElementsIds?: string[];
+  selectElements?: (ids: string[]) => void;
+};
+
+/** A hidden or locked layer is not a click target — the user put it out of reach. */
+function isHittable(el: DrillElement): boolean {
+  return el.visible !== false && el.selectable !== false && !el.locked;
+}
+
+/**
+ * The path (top-level element → … → leaf) to the front-most leaf at `p`, searching
+ * back to front because later children paint on top. Null when nothing is hit.
+ */
+export function frontmostPath(
+  els: ReadonlyArray<DrillElement>,
+  rectOf: (id: string) => ClientRect | null,
+  p: DrillPoint,
+): DrillElement[] | null {
+  for (let i = els.length - 1; i >= 0; i--) {
+    const el = els[i];
+    if (!isHittable(el)) continue;
+    if (el.children?.length) {
+      const inner = frontmostPath(el.children, rectOf, p);
+      if (inner) return [el, ...inner];
+      continue;
+    }
+    if (pointInRect(rectOf(el.id), p)) return [el];
+  }
+  return null;
+}
+
+/** Every id under `el`, itself included — used to ask "is the selection in here?". */
+export function descendantIds(el: DrillElement, into = new Set<string>()): Set<string> {
+  into.add(el.id);
+  for (const c of el.children ?? []) descendantIds(c, into);
+  return into;
+}
+
+/**
+ * The id to select for a press at `p`, or null to let Canvas handle the press
+ * normally (nothing to drill into, or this is the FIRST click on the group).
+ */
+export function drillTarget(
+  children: ReadonlyArray<DrillElement>,
+  rectOf: (id: string) => ClientRect | null,
+  p: DrillPoint,
+  selectedIds: ReadonlyArray<string>,
+): string | null {
+  const path = frontmostPath(children, rectOf, p);
+  if (!path || path.length < 2) return null; // nothing hit, or not inside a group
+  const top = path[0];
+  const leaf = path[path.length - 1];
+  // First click on an unselected group: Canvas selects the group, as it should.
+  // Only once the selection is already inside this group do we drill deeper.
+  const inside = descendantIds(top);
+  if (!selectedIds.some((id) => inside.has(id))) return null;
+  if (selectedIds.includes(leaf.id)) return null; // already there: let it drag
+  return leaf.id;
+}
+
+/**
+ * A press inside an already-selected group is ambiguous until the pointer comes back
+ * up: released in place it is a CLICK (drill into the shape under the cursor);
+ * dragged away it is a MOVE of the whole group, which is the stock editor's own transformer's
+ * job. Acting at pointerdown broke the drag outright — the press never reached Konva,
+ * so the group could not be dragged at all. So the press goes through untouched, and
+ * the decision is taken at pointerup, once the intent is actually known.
+ */
+const DRAG_SLOP = 4; // px of travel before a press stops being a click
+
+/** Has the pointer travelled far enough that this is a drag, not a click? */
+export function exceedsDragSlop(from: DrillPoint, to: DrillPoint): boolean {
+  return Math.hypot(to.x - from.x, to.y - from.y) > DRAG_SLOP;
+}
+
+/**
+ * Canvas commits the selection on the mouseUP, not on the press (verified against
+ * the live store: after pointerdown+mousedown alone `selectedElementsIds` is still
+ * empty; it fills on mouseup). So a drill would be overwritten by the tail of its own
+ * gesture — the mouseup resolves the hit to el.top and snaps the selection back to
+ * the group.
+ *
+ * The obvious answer — swallow the tail — is WRONG, and it left the editor holding
+ * the element after the user let go: Konva ends its drag on that same pointerup /
+ * mouseup, so eating them strands it mid-drag (a ghost element following the cursor,
+ * a marquee that never closes).
+ *
+ * So we never block anything. Konva and Canvas run the gesture end to end exactly as
+ * they normally would, and the drill lands one macrotask later, overwriting the
+ * selection Canvas just made. The cost is that the group is briefly selected before
+ * the child is; the benefit is that no event Konva depends on ever goes missing.
+ */
+type Pending = { id: string; pointerId: number; x: number; y: number };
+
+export function GroupDrillIn({
+  store,
+  containerRef,
+}: {
+  store: unknown;
+  containerRef: RefObject<HTMLDivElement | null>;
+}) {
+  const pending = useRef<Pending | null>(null);
+
+  useEffect(() => {
+    const host = containerRef.current;
+    if (!host) return;
+    const s = store as DrillStore;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    const onPointerDown = (e: PointerEvent) => {
+      pending.current = null; // a new gesture: never carry a stale candidate
+      if (e.button !== 0) return;
+      // A modified click is the stock editor's multi-select (shift) — drilling would replace
+      // the multi-selection with one child and break ⌘G on two groups.
+      if (e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return;
+      // A press on OUR selection box belongs to the nested-selection overlay, which
+      // owns that drag. (The shapes under a selected nested group are not themselves
+      // selected, so the rule below would otherwise drill straight past it.)
+      const target = e.target as Element | null;
+      if (target?.closest?.("[data-dp-nested-selection]")) return;
+
+      const p = { x: e.clientX, y: e.clientY };
+      const selected = s.selectedElementsIds ?? [];
+      for (const page of s.pages ?? []) {
+        const id = drillTarget(page.children ?? [], konvaClientRect, p, selected);
+        if (!id) continue;
+        pending.current = { id, pointerId: e.pointerId, x: p.x, y: p.y };
+        return;
+      }
+    };
+
+    const onPointerMove = (e: PointerEvent) => {
+      const p = pending.current;
+      if (!p || e.pointerId !== p.pointerId) return;
+      if (exceedsDragSlop(p, { x: e.clientX, y: e.clientY })) {
+        pending.current = null; // the user is dragging the group, not picking a child
+      }
+    };
+
+    const onPointerUp = (e: PointerEvent) => {
+      const p = pending.current;
+      pending.current = null;
+      if (!p || e.pointerId !== p.pointerId) return;
+      // Released in place: a click. Let the gesture finish — Konva needs it — and
+      // take the selection right after Canvas has made its own.
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        timer = null;
+        s.selectElements?.([p.id]);
+      }, 0);
+    };
+
+    const onCancel = () => {
+      pending.current = null;
+    };
+
+    host.addEventListener("pointerdown", onPointerDown, { capture: true });
+    host.addEventListener("pointermove", onPointerMove, { capture: true });
+    host.addEventListener("pointerup", onPointerUp, { capture: true });
+    host.addEventListener("pointercancel", onCancel, { capture: true });
+    return () => {
+      if (timer) clearTimeout(timer);
+      host.removeEventListener("pointerdown", onPointerDown, { capture: true });
+      host.removeEventListener("pointermove", onPointerMove, { capture: true });
+      host.removeEventListener("pointerup", onPointerUp, { capture: true });
+      host.removeEventListener("pointercancel", onCancel, { capture: true });
+    };
+  }, [store, containerRef]);
+
+  return null;
+}