@leviosa-ai/detail-page-editor 0.1.0

package/components/detail-page/leviosa-canvas-workspace.tsx

@@ -0,0 +1,313 @@
+"use client";
+
+/**
+ * 우리 엔진 위의 작업 영역 (G7-b).
+ *
+ * ``StackedCanvasWorkspace``가 하던 일을 그대로 한다 — 세로로 쌓기, 처음 한 번
+ * 화면에 맞추기, ⌘/ctrl+휠 확대, 스크롤에 따라 활성 화면 바꾸기, 썸네일 굽기,
+ * 그리고 캔버스 위에 얹히는 층들. 다른 점은 페이지를 **누가** 그리느냐뿐이다.
+ *
+ * 창(windowing)을 여기서 안 센다. 엔진의 ``CanvasView``가 페이지마다 화면 근처인지
+ * 스스로 보고 Stage를 만들거나 만들지 않는다 — 슬롯 높이를 미리 계산해 인덱스로
+ * 세던 예전 방식보다 정확하고, 페이지 높이가 제각각인 상세페이지에서 특히 그렇다.
+ *
+ * 썸네일도 DOM에서 캔버스를 긁지 않는다. 엔진의 ``store.toDataURL({pageId})``가
+ * 화면 밖 페이지를 잠깐 띄워 굽고 다시 놓아준다 — 예전에 이 길을 못 쓴 이유(내보내기
+ * 인스턴스가 화면의 Konva 를 못 찾는 문제)는 우리 엔진에는 없다.
+ */
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+import { BubbleTailOverlay } from "./bubble-tail-overlay";
+import { CanvasContextMenu } from "./canvas-context-menu";
+import { CanvasOverlayHost } from "./canvas-overlay-host";
+import { DetailPagePageToolbar } from "./detail-page-page-toolbar";
+import { detailPageThumbnailBus } from "./detail-page-thumbnail-bus";
+import { GifAnimator } from "./gif-animator";
+import { GroupDrillIn } from "./group-drill-in";
+import { HoverHighlightOverlay } from "./hover-highlight-overlay";
+import { CanvasSectionHeightHandle } from "./section-height-handle";
+import { loadEditorFont } from "../../lib/detail-page-canvas/editor-fonts";
+import { CanvasView } from "@leviosa-ai/canvas/render/canvas-view";
+import { useCanvasVersion } from "@leviosa-ai/canvas/use-canvas";
+import type { CanvasStore } from "@leviosa-ai/canvas/store";
+
+const MIN_SCALE = 0.05;
+const MAX_SCALE = 5;
+const clamp = (v: number, lo: number, hi: number) =>
+  Math.max(lo, Math.min(hi, v));
+
+/** 썸네일 해상도. 페이지 패널의 칸이 작아 이 정도면 충분하다. */
+const THUMB_PIXEL_RATIO = 0.12;
+
+export function LeviosaCanvasWorkspace({
+  store,
+  gap = 4,
+  paddingX = 16,
+  backgroundColor = "rgb(241, 241, 241)",
+  children,
+}: {
+  store: CanvasStore;
+  gap?: number;
+  paddingX?: number;
+  backgroundColor?: string;
+  /** 작업 영역 위에 얹을 것(찾기·바꾸기 같은 편집기 고유 층). */
+  children?: ReactNode;
+}) {
+  useCanvasVersion(store);
+  const outerRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  const [viewport, setViewport] = useState({ width: 0, height: 0 });
+  // 배율은 **스토어**에 산다. 확대 버튼도, 여기 휠도 같은 자리를 만져야 한 쪽이
+  // 다른 쪽을 되돌려 놓지 않는다.
+  const scale = store.scale;
+  const setScale = useCallback((next: number) => store.setScale(next), [store]);
+  const pageIds = store.pages.map((page) => page.id).join(",");
+
+  useEffect(() => {
+    const el = outerRef.current;
+    if (!el) return;
+    const apply = () =>
+      setViewport({ width: el.clientWidth, height: el.clientHeight });
+    apply();
+    const ro = new ResizeObserver(apply);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // 첫 화면을 통째로 화면에 넣는다. 폭만 맞추면 긴 상세페이지가 화면보다 길어진다.
+  //
+  // **한 번만 하면 안 된다.** 편집기가 처음 뜰 때는 좌우 패널이 아직 자리를 안 잡아
+  // 작업 영역이 실제보다 넓게 측정되고, 그 폭에 맞춘 배율은 패널이 들어오는 순간
+  // 너무 크다(맨 처음 붙였을 때 134%가 나왔다). 그래서 **사용자가 배율을 만지기
+  // 전까지는** 영역이 바뀔 때마다 다시 맞춘다. 손을 대는 순간 주인이 바뀐다.
+  const fittedScale = useRef<number | null>(null);
+  useEffect(() => {
+    if (!viewport.width || !viewport.height || store.pages.length === 0) return;
+    // 우리가 맞춰 놓은 값과 다르면 사용자가 만진 것이다.
+    if (fittedScale.current !== null && store.scale !== fittedScale.current) {
+      return;
+    }
+    const page = store.activePage ?? store.pages[0];
+    const usableW = Math.max(1, viewport.width - 2 * paddingX);
+    const usableH = Math.max(1, viewport.height - 2 * gap);
+    const next = clamp(
+      Math.min(usableW / page.width, usableH / page.height) * 0.94,
+      MIN_SCALE,
+      MAX_SCALE,
+    );
+    fittedScale.current = next;
+    setScale(next);
+  }, [viewport, paddingX, gap, store, setScale]);
+
+  // ⌘/ctrl+휠(맥 트랙패드 핀치가 이 모양으로 온다)로 커서 자리를 붙잡고 확대.
+  // 그냥 휠은 브라우저 스크롤 그대로 둔다.
+  useEffect(() => {
+    const inner = innerRef.current;
+    if (!inner) return;
+    const onWheel = (event: WheelEvent) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      const current = store.scale;
+      const next = clamp(
+        current * (event.deltaY < 0 ? 1.08 : 1 / 1.08),
+        MIN_SCALE,
+        MAX_SCALE,
+      );
+      if (next === current) return;
+      const rect = inner.getBoundingClientRect();
+      const anchor = event.clientY - rect.top + inner.scrollTop;
+      const ratio = next / current;
+      store.setScale(next);
+      requestAnimationFrame(() => {
+        inner.scrollTop = anchor * ratio - (event.clientY - rect.top);
+      });
+    };
+    inner.addEventListener("wheel", onWheel, { passive: false });
+    return () => inner.removeEventListener("wheel", onWheel);
+  }, [store]);
+
+  /** 스크롤 때문에 우리가 바꾼 활성 화면 — 바깥에서 바꾼 것과 구분해 되울림을 막는다. */
+  const scrollSetId = useRef<string | null>(null);
+
+  // 화면 한가운데를 지나는 페이지가 활성 화면이다. 자리는 DOM 에서 직접 읽는다 —
+  // 높이가 제각각이라 계산으로 맞추면 한 픽셀씩 어긋난다.
+  const recomputeActive = useCallback(() => {
+    const inner = innerRef.current;
+    if (!inner) return;
+    const middle = inner.getBoundingClientRect().top + inner.clientHeight / 2;
+    const nodes = Array.from(
+      inner.querySelectorAll<HTMLElement>("[data-lc-page]"),
+    );
+    const hit =
+      nodes.find((node) => {
+        const box = node.getBoundingClientRect();
+        return box.top <= middle && box.bottom >= middle;
+      }) ?? nodes[0];
+    const id = hit?.dataset.lcPage;
+    if (!id || store.activePage?.id === id) return;
+    scrollSetId.current = id;
+    store.selectPage(id);
+  }, [store]);
+
+  const scrollRaf = useRef<number | null>(null);
+  const onScroll = useCallback(() => {
+    if (scrollRaf.current != null) return;
+    scrollRaf.current = requestAnimationFrame(() => {
+      scrollRaf.current = null;
+      recomputeActive();
+    });
+  }, [recomputeActive]);
+
+  // 바깥(페이지 패널의 행 클릭)에서 활성 화면이 바뀌면 그 페이지를 위로 올린다.
+  const activeId = store.activePage?.id;
+  useEffect(() => {
+    const inner = innerRef.current;
+    if (!inner || !activeId || activeId === scrollSetId.current) return;
+    scrollSetId.current = activeId;
+    const node = inner.querySelector<HTMLElement>(
+      `[data-lc-page="${CSS.escape(activeId)}"]`,
+    );
+    if (!node) return;
+    inner.scrollTo({
+      top: inner.scrollTop + node.getBoundingClientRect().top -
+        inner.getBoundingClientRect().top - gap,
+      behavior: "smooth",
+    });
+  }, [activeId, gap]);
+
+  // 페이지 패널을 열면 아직 없는 썸네일을 한 장씩 굽는다. 한 번에 하나씩 굽는 이유는
+  // 굽는 동안 그 페이지를 화면 밖에서도 그려야 해서다 — 30장을 한꺼번에 띄우면
+  // 브라우저가 멈춘다.
+  const panelOpen = store.openedSidePanel === "pages";
+  useEffect(() => {
+    if (!panelOpen) return;
+    let cancelled = false;
+    void (async () => {
+      for (const page of store.pages) {
+        if (cancelled) return;
+        if (detailPageThumbnailBus.has(page.id)) continue;
+        try {
+          const uri = await store.toDataURL({
+            pageId: page.id,
+            pixelRatio: THUMB_PIXEL_RATIO,
+          });
+          if (cancelled) return;
+          detailPageThumbnailBus.set(page.id, uri);
+        } catch {
+          // 못 구운 페이지는 다음에 다시 시도한다(패널을 다시 열면 온다).
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [panelOpen, pageIds, store]);
+
+  const pageWidth = useMemo(
+    () => Math.max(1, ...store.pages.map((page) => page.width)),
+    // 페이지 구성이 바뀔 때만 다시 잰다.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pageIds, store],
+  );
+
+  return (
+    <div
+      ref={outerRef}
+      data-lc-workspace=""
+      style={{
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        outline: "none",
+        backgroundColor,
+        overflow: "hidden",
+      }}
+      tabIndex={0}
+    >
+      <div
+        ref={innerRef}
+        onScroll={onScroll}
+        onPointerDown={(event) => {
+          // 페이지 바깥의 빈 자리를 누르면 선택 해제. 페이지 안은 캔버스가 처리한다.
+          const target = event.target as HTMLElement;
+          if (
+            !target.closest("[data-lc-page]") &&
+            !target.closest("[data-dp-quicktoolbar]")
+          ) {
+            store.selectElements([]);
+          }
+        }}
+        style={{
+          position: "absolute",
+          inset: 0,
+          overflowX: "hidden",
+          overflowY: "auto",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          padding: `${gap}px ${paddingX}px`,
+        }}
+      >
+        <CanvasView
+          store={store}
+          scale={scale}
+          gap={gap}
+          interactive
+          loadFont={loadEditorFont}
+        />
+      </div>
+
+      {/* 표·차트 레일과 크기 되먹임. 이 둘만 스토어를 구조적 타입으로 받으므로
+          얼굴을 하나 씌워 넘긴다(canvas-store-facade에 이유를 적어 뒀다). */}
+      <CanvasOverlayHost store={store} containerRef={outerRef} />
+
+      {/* 말풍선 꼬리 핸들 · 우클릭 메뉴 · 레이어 트리 hover · 그룹 파고들기 · GIF 재생.
+          선택 상자와 크기 손잡이는 엔진이 직접 그린다(그룹 안 요소까지). */}
+      <BubbleTailOverlay store={store} containerRef={outerRef} />
+      <CanvasContextMenu store={store} containerRef={outerRef} />
+      <HoverHighlightOverlay
+        store={store}
+        containerRef={outerRef}
+        scrollRef={innerRef}
+      />
+      <GroupDrillIn store={store} containerRef={outerRef} />
+      <GifAnimator store={store} />
+      {/* 활성 화면의 아래 끝을 잡아 끌어 길이를 바꾸는 손잡이. 우측 패널의 숫자와
+          같은 함수를 거친다(`section-height.ts`) — 배경 요소까지 같이 늘리고 서버
+          굽기 상한 안에 가둔다. */}
+      <CanvasSectionHeightHandle
+        store={store}
+        containerRef={outerRef}
+        scrollRef={innerRef}
+      />
+
+      {children}
+
+      {store.activePage ? (
+        <div
+          data-dp-quicktoolbar=""
+          style={{
+            position: "absolute",
+            left: Math.min(
+              viewport.width / 2 + (pageWidth * scale) / 2 + 8,
+              viewport.width - 52,
+            ),
+            top: "50%",
+            transform: "translateY(-50%)",
+            zIndex: 30,
+          }}
+        >
+          <DetailPagePageToolbar store={store} page={store.activePage} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/components/detail-page/nested-selection-overlay.tsx

@@ -0,0 +1,364 @@
+"use client";
+
+import {
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+} from "react";
+import { observer } from "./canvas-observer";
+
+import {
+  selectedElementsDeep,
+  type SelectableElement,
+} from "./detail-page-selection";
+import {
+  elementClientRect,
+  type RectElement,
+} from "./element-rects";
+
+/**
+ * Real selection — move + resize — for a GROUP CHILD.
+ *
+ * the stock editor's selection model only ever holds TOP-LEVEL element ids: its canvas
+ * resolves any hit node to ``el.top`` (the outermost non-group ancestor) before
+ * selecting, and ``store.selectedShapes`` (what the Konva Transformer attaches
+ * to) derives from ``store.selectedElements``, a getter that only scans a page's
+ * direct children. So a group child gets no transformer, and the moment you press
+ * on it the canvas re-selects its group instead — you cannot drag it.
+ *
+ * Rather than fight that model, this overlay OWNS the interaction. It sits above
+ * the canvas in the DOM, so a pointerdown on the selected child is consumed here
+ * and never reaches Konva — the group can no longer steal the selection. Drag and
+ * corner-resize write straight to the element (``el.set``), which is exactly what
+ * the stock editor's own transformer would do, so undo/redo and re-render behave normally.
+ *
+ * Geometry comes from the Konva node itself (``getClientRect`` → absolute canvas
+ * px, zoom included) mapped through the stage's container rect, so the overlay is
+ * layout-independent: zoom, scroll, and the stacked workspace's per-page slots all
+ * work without re-deriving any of their math. Screen deltas convert to element
+ * deltas by dividing by ``store.scale``.
+ */
+
+type StoreLike = {
+  selectedElements?: SelectableElement[];
+  selectedElementsIds?: string[];
+  getElementById?: (id: string) => SelectableElement | undefined;
+  scale?: number;
+  history?: { startTransaction?: () => void; endTransaction?: () => void };
+};
+
+type Rect = { left: number; top: number; width: number; height: number };
+type Box = { id: string; rect: Rect; isGroup: boolean };
+type Corner = "nw" | "ne" | "sw" | "se";
+
+/** The selected ids Canvas itself cannot draw — i.e. the ones nested in a group. */
+export function nestedSelectedIds(store: StoreLike): string[] {
+  const deep = selectedElementsDeep(store);
+  if (!deep.length) return [];
+  // ``selectedElements`` only ever holds TOP-LEVEL elements; anything resolved
+  // deep but absent there is nested, and therefore has no Canvas transformer.
+  const topLevel = new Set((store.selectedElements ?? []).map((e) => e.id));
+  return deep.map((e) => e.id).filter((id) => !topLevel.has(id));
+}
+
+/**
+ * Measure a selected element and return its rect in `container` space.
+ *
+ * Goes through ``elementClientRect``, which measures a GROUP from its children:
+ * Canvas never stamps the element id onto the Konva.Group it renders, so a direct
+ * `#<groupId>` lookup finds nothing — a group nested inside another group would get
+ * no selection box at all.
+ */
+function measure(el: SelectableElement, container: HTMLElement): Rect | null {
+  const r = elementClientRect(el as RectElement);
+  if (!r) return null;
+  const host = container.getBoundingClientRect();
+  return {
+    left: r.left - host.left,
+    top: r.top - host.top,
+    width: r.right - r.left,
+    height: r.bottom - r.top,
+  };
+}
+
+const num = (v: unknown, fallback = 0): number =>
+  typeof v === "number" && Number.isFinite(v) ? v : fallback;
+
+const HANDLE = 8;
+const ACCENT = "rgb(0, 161, 255)";
+const MIN_SIZE = 4;
+
+const CURSOR: Record<Corner, string> = {
+  nw: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize",
+  se: "nwse-resize",
+};
+
+export type Geom = { x: number; y: number; width: number; height: number };
+
+/**
+ * Element geometry after dragging by (dx, dy) *element* px. ``corner === null``
+ * moves; a corner resizes, anchoring the opposite corner (so a west/north grab
+ * shifts x/y as the size changes). Sizes clamp so a box never inverts.
+ */
+export function applyDrag(
+  start: Geom,
+  corner: Corner | null,
+  dx: number,
+  dy: number,
+): Geom {
+  if (!corner) {
+    return { ...start, x: Math.round(start.x + dx), y: Math.round(start.y + dy) };
+  }
+  const west = corner === "nw" || corner === "sw";
+  const north = corner === "nw" || corner === "ne";
+  const width = Math.max(MIN_SIZE, west ? start.width - dx : start.width + dx);
+  const height = Math.max(MIN_SIZE, north ? start.height - dy : start.height + dy);
+  return {
+    x: Math.round(west ? start.x + (start.width - width) : start.x),
+    y: Math.round(north ? start.y + (start.height - height) : start.y),
+    width: Math.round(width),
+    height: Math.round(height),
+  };
+}
+
+/** One element the drag writes to, with the geometry it started from. */
+type DragTarget = { el: SelectableElement; start: Geom };
+
+type DragState = {
+  pointerId: number;
+  corner: Corner | null; // null = move
+  startX: number;
+  startY: number;
+  targets: DragTarget[];
+};
+
+/**
+ * The elements a drag actually has to write to.
+ *
+ * A GROUP is not a transform: the stock editor's group element carries no offset (setting
+ * its x/y moves nothing — verified on the live store), the LEAVES hold the real
+ * coordinates. So moving a group means moving every leaf under it by the delta.
+ */
+export function dragTargets(el: SelectableElement): DragTarget[] {
+  const kids = (el as { children?: SelectableElement[] }).children;
+  if (kids?.length) return kids.flatMap(dragTargets);
+  return [
+    {
+      el,
+      start: {
+        x: num(el.x),
+        y: num(el.y),
+        width: num(el.width),
+        height: num(el.height),
+      },
+    },
+  ];
+}
+
+export const NestedSelectionOverlay = observer(function NestedSelectionOverlay({
+  store,
+  containerRef,
+  scrollRef,
+}: {
+  store: unknown;
+  containerRef: RefObject<HTMLDivElement | null>;
+  scrollRef: RefObject<HTMLDivElement | null>;
+}) {
+  const s = store as StoreLike;
+  const ids = nestedSelectedIds(s);
+  const key = ids.join(",");
+  const scale = s.scale ?? 1;
+
+  // Reading each element's geometry here (mobx) re-renders the observer — and
+  // re-measures — as a drag/resize moves it. Read the LEAVES: a group's own x/y
+  // never change (they are not where its geometry lives), so watching them would
+  // leave the box frozen while the group is dragged.
+  const geomKey = ids
+    .map((id) => {
+      const el = s.getElementById?.(id);
+      if (!el) return "";
+      return dragTargets(el)
+        .map((t) => `${t.start.x},${t.start.y},${t.start.width},${t.start.height}`)
+        .join(";");
+    })
+    .join("|");
+
+  const [boxes, setBoxes] = useState<Box[]>([]);
+  const frame = useRef<number | null>(null);
+  const drag = useRef<DragState | null>(null);
+
+  const remeasure = () => {
+    const host = containerRef.current;
+    if (!host || !ids.length) {
+      setBoxes((prev) => (prev.length ? [] : prev));
+      return;
+    }
+    const next: Box[] = [];
+    for (const id of ids) {
+      const el = s.getElementById?.(id);
+      if (!el) continue;
+      const rect = measure(el, host);
+      // Each box carries its own id: a group whose children are all off-screen
+      // measures to nothing, and an index-aligned array would then hand the next
+      // box the wrong element to drag.
+      if (rect) next.push({ id, rect, isGroup: el.type === "group" });
+    }
+    setBoxes(next);
+  };
+
+  // Measure after Konva has redrawn for this selection / zoom / geometry change.
+  useLayoutEffect(() => {
+    const raf = requestAnimationFrame(() => {
+      remeasure();
+      requestAnimationFrame(remeasure);
+    });
+    return () => cancelAnimationFrame(raf);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, scale, geomKey]);
+
+  // Follow scroll / resize while a nested element stays selected.
+  useEffect(() => {
+    if (!key) return;
+    const scroller = scrollRef.current;
+    const onMove = () => {
+      if (frame.current !== null) return;
+      frame.current = requestAnimationFrame(() => {
+        frame.current = null;
+        remeasure();
+      });
+    };
+    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
+  }, [key, scrollRef]);
+
+  const begin = (
+    e: ReactPointerEvent<HTMLElement>,
+    id: string,
+    corner: Corner | null,
+  ) => {
+    const el = s.getElementById?.(id);
+    if (!el) return;
+    // A locked layer must not move — same rule the Canvas transformer follows.
+    if (el.draggable === false && !corner) return;
+    // Consume the press so Konva never sees it: that is what stops the canvas
+    // from resolving the hit to `el.top` and re-selecting the parent group.
+    e.preventDefault();
+    e.stopPropagation();
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    s.history?.startTransaction?.();
+    drag.current = {
+      pointerId: e.pointerId,
+      corner,
+      startX: e.clientX,
+      startY: e.clientY,
+      targets: dragTargets(el),
+    };
+  };
+
+  const move = (e: ReactPointerEvent<HTMLElement>) => {
+    const d = drag.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    e.preventDefault();
+    const k = scale || 1;
+    // Screen px -> element px. Element coords are in the parent's space, so a
+    // relative delta is correct whether or not the group carries an offset.
+    const dx = (e.clientX - d.startX) / k;
+    const dy = (e.clientY - d.startY) / k;
+
+    for (const t of d.targets) {
+      const next = applyDrag(t.start, d.corner, dx, dy);
+      t.el.set(d.corner ? next : { x: next.x, y: next.y });
+    }
+  };
+
+  const end = (e: ReactPointerEvent<HTMLElement>) => {
+    const d = drag.current;
+    if (!d || e.pointerId !== d.pointerId) return;
+    drag.current = null;
+    s.history?.endTransaction?.();
+  };
+
+  if (!boxes.length) return null;
+
+  return (
+    <div
+      data-dp-nested-selection=""
+      style={{
+        position: "absolute",
+        inset: 0,
+        // Only the boxes themselves take pointer events; everywhere else the
+        // canvas keeps its normal click behaviour.
+        pointerEvents: "none",
+        zIndex: 20,
+      }}
+    >
+      {boxes.map(({ id, rect: r, isGroup }) => (
+        <div
+          key={id}
+          onPointerDown={(e) => begin(e, id, null)}
+          onPointerMove={move}
+          onPointerUp={end}
+          onPointerCancel={end}
+          style={{
+            position: "absolute",
+            left: r.left,
+            top: r.top,
+            width: r.width,
+            height: r.height,
+            border: `1px solid ${ACCENT}`,
+            boxSizing: "border-box",
+            pointerEvents: "auto",
+            cursor: "move",
+            touchAction: "none",
+          }}
+        >
+          {/* A group is move-only. Its width/height are not a real box (the
+              decomposer pins the wrapper to the origin and the children hold the
+              coordinates), so a corner drag would resize nothing and mangle the
+              geometry. Drag its children to resize. */}
+          {isGroup
+            ? null
+            : (["nw", "ne", "sw", "se"] as const).map((corner) => (
+                <span
+                  key={corner}
+                  onPointerDown={(e) => begin(e, id, corner)}
+                  onPointerMove={move}
+                  onPointerUp={end}
+                  onPointerCancel={end}
+                  style={{
+                    position: "absolute",
+                    left:
+                      (corner === "ne" || corner === "se" ? r.width : 0) -
+                      HANDLE / 2,
+                    top:
+                      (corner === "sw" || corner === "se" ? r.height : 0) -
+                      HANDLE / 2,
+                    width: HANDLE,
+                    height: HANDLE,
+                    background: "#fff",
+                    border: `1px solid ${ACCENT}`,
+                    boxSizing: "border-box",
+                    pointerEvents: "auto",
+                    cursor: CURSOR[corner],
+                    touchAction: "none",
+                  }}
+                />
+              ))}
+        </div>
+      ))}
+    </div>
+  );
+});
+NestedSelectionOverlay.displayName = "NestedSelectionOverlay";