@leviosa-ai/detail-page-editor 0.17.2 → 0.19.0

package/components/detail-page/canvas-selection-tools.tsx

@@ -18,6 +18,7 @@ import { CANVAS_MENU_ICONS } from "./canvas-context-menu";
 import { ImageCropOverlay, type CropElement } from "./image-crop-overlay";
 import {
   SelectionQuickToolbar,
+  popoverHorizontal,
   useQuickPopoverPlacement,
   type QuickToolbarItem,
 } from "./selection-quick-toolbar";
@@ -58,12 +59,17 @@ function Popover({
   children: React.ReactNode;
   width?: number;
 }) {
-  const { side, maxHeight } = useQuickPopoverPlacement();
+  const { side, maxHeight, left, hostWidth } = useQuickPopoverPlacement();
+  const fit = popoverHorizontal(width, left, hostWidth);
   return (
     <div
       data-dp-quick-popover=""
       data-dp-quick-popover-side={side}
-      style={{ width, maxHeight: `min(60vh, 520px, ${maxHeight}px)` }}
+      style={{
+        width: fit.width,
+        maxHeight: `min(60vh, 520px, ${maxHeight}px)`,
+        transform: fit.shift ? `translateX(${fit.shift}px)` : undefined,
+      }}
       className={[
         "overflow-y-auto rounded-le-xl border border-le-ink-200 bg-le-surface shadow-lg",
         side === "above" ? "absolute bottom-full left-0 mb-1.5" : "mt-1.5",

package/components/detail-page/detail-page-download-dialog.tsx

@@ -529,10 +529,12 @@ export const DetailPageDownloadDialog = observer(function DetailPageDownloadDial
         onClick={() => setOpen((v) => !v)}
         aria-haspopup="dialog"
         aria-expanded={open}
-        className="inline-flex h-9 items-center gap-2 rounded-le-md bg-le-ink-900 px-3 text-sm font-le-semibold text-le-on-accent transition-colors hover:bg-le-ink-800"
+        aria-label={t("editor.download")}
+        className="inline-flex h-9 shrink-0 items-center gap-2 rounded-le-md bg-le-ink-900 px-3 text-sm font-le-semibold text-le-on-accent transition-colors hover:bg-le-ink-800"
       >
         <Download aria-hidden="true" size={16} />
-        {t("editor.download")}
+        {/* 폰에서는 아이콘만 — 글자까지 넣으면 헤더가 넘쳐 한 글자씩 꺾인다. */}
+        <span className="hidden sm:inline">{t("editor.download")}</span>
       </button>
 
       {open ? (

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

@@ -37,6 +37,7 @@ import {
   useDetailPageHost,
 } from "./detail-page-host-context";
 import { SectionReauthorController } from "./section-reauthor-controller";
+import { MobileBottomBar, useIsMobile, useKeyboardViewport } from "./mobile-editor-bars";
 import type {
   GenerateGifFn,
   GenerateImageFn,
@@ -190,6 +191,9 @@ export function DetailPageEditor({
   // 프롬프트 편집 사용량은 여기서 한 번만 조회한다 — 캔버스 위 띠와 우측 패널(표·차트)이
   // 같은 숫자를 봐야 "몇 번 남았는가"가 갈라지지 않는다.
   const { usage, applyUsage } = useDetailPageEditUsage(generatedId);
+  // 폰에서는 좌측 레일·우측 인스펙터를 하단 띠 하나로 접는다(mobile-editor-bars).
+  const mobile = useIsMobile();
+  const keyboard = useKeyboardViewport();
   const [saveError, setSaveError] = useState<string | null>(null);
   const [saveOk, setSaveOk] = useState(false);
   // 편집 한도 소진 시 "편집 크레딧 추가하기" → pricing 모달을 인플레이스로 연다.
@@ -330,7 +334,7 @@ export function DetailPageEditor({
     return (
       <div className="absolute inset-0 flex">
         {hotkeys}
-        {SidebarSlot ? (
+        {mobile ? null : SidebarSlot ? (
           <SidebarSlot
             store={store}
             sections={sidebarSections as never}
@@ -357,7 +361,7 @@ export function DetailPageEditor({
         </div>
       </div>
     );
-  }, [store, sidebarSections, SidebarSlot, chosenFrame, onChooseFrame, handleSave, uploadFile]);
+  }, [store, sidebarSections, SidebarSlot, mobile, chosenFrame, onChooseFrame, handleSave, uploadFile]);
 
   const aiValue = useMemo(
     () => ({
@@ -413,7 +417,7 @@ export function DetailPageEditor({
             <ChevronLeft aria-hidden="true" size={20} />
           </button>
         ) : null}
-        <p className="ml-1 max-w-[280px] truncate text-sm font-le-semibold text-le-ink-900">
+        <p className="ml-1 min-w-0 max-w-[280px] truncate text-sm font-le-semibold text-le-ink-900">
           {productName?.trim() || t("editor.untitled")}
         </p>
 
@@ -443,10 +447,13 @@ export function DetailPageEditor({
           type="button"
           onClick={handleSave}
           disabled={saving}
-          className="inline-flex h-9 items-center gap-2 rounded-le-md border border-le-ink-200 bg-le-surface px-3 text-sm font-le-semibold text-le-ink-900 hover:bg-le-ink-50 disabled:cursor-not-allowed disabled:opacity-50"
+          aria-label={saving ? t("editor.saving") : t("editor.save")}
+          className="inline-flex h-9 shrink-0 items-center gap-2 rounded-le-md border border-le-ink-200 bg-le-surface px-3 text-sm font-le-semibold text-le-ink-900 hover:bg-le-ink-50 disabled:cursor-not-allowed disabled:opacity-50"
         >
           <Save aria-hidden="true" size={16} />
-          {saving ? t("editor.saving") : t("editor.save")}
+          <span className="hidden sm:inline">
+            {saving ? t("editor.saving") : t("editor.save")}
+          </span>
         </button>
         {downloadPart}
 
@@ -516,22 +523,43 @@ export function DetailPageEditor({
     <TooltipProvider>
     <div
       data-le-root=""
-      className="flex h-screen min-h-[640px] flex-col bg-le-ink-100"
+      className="flex h-dvh min-h-[480px] flex-col md:h-screen md:min-h-[640px] bg-le-ink-100"
+      // 폰에서 키보드가 뜨면 보이는 자리만큼으로 줄여 띠·입력창을 키보드 위에 둔다.
+      style={
+        mobile && keyboard
+          ? {
+              height: keyboard.height,
+              minHeight: 0,
+              position: "fixed",
+              insetInline: 0,
+              top: keyboard.top,
+            }
+          : undefined
+      }
     >
       {/* hookable식 상단 헤더: 뒤로가기 · 상품명 · (되돌리기/다시실행) · 저장 ·
           다운로드 · 앱 공용 크롬(크레딧/알림/언어, 호스트 주입). 높이를 고정하고
           본문은 flex-1 min-h-0으로 두어, 헤더 높이가 바뀌어도 캔버스가 남는 높이를
           정확히 채워 페이지 하단이 잘리지 않는다. */}
       {header}
-      <div className="grid min-h-0 flex-1 grid-cols-[1fr_360px]">
+      <div
+        className={`grid min-h-0 flex-1 ${mobile ? "grid-cols-1" : "grid-cols-[1fr_360px]"}`}
+      >
         {/* 캔버스 칸의 높이를 못 박는다. 안 그러면 그리드 행이 내용만큼 늘어나(높이
             100%가 auto로 풀린다) 작업 영역이 화면 아래로 자라고, 아래 붙는 배율·화면
             띠가 화면 밖으로 밀린다. */}
         <div data-le-part="workspace" className="relative min-w-0 overflow-hidden">
           {canvas}
         </div>
-        {inspector}
+        {mobile ? null : inspector}
       </div>
+      {mobile ? (
+        <MobileBottomBar
+          store={store}
+          sections={sidebarSections}
+          inspector={defaultInspector}
+        />
+      ) : null}
       {/* 화면 하나만 마크업째 다시 저작 — 요청은 캔버스 옆 페이지 툴바에서 온다. */}
       <SectionReauthorController
         store={store}

package/components/detail-page/detail-page-layers-panel.tsx

@@ -191,7 +191,8 @@ function IconButton({
         onClick();
       }}
       className={[
-        "flex h-6 w-6 items-center justify-center rounded transition-colors",
+        // 터치 화면(pointer: coarse)에서는 손가락 폭만큼 키운다.
+        "flex h-6 w-6 items-center justify-center rounded transition-colors pointer-coarse:h-9 pointer-coarse:w-9",
         active ? "text-le-ink-800" : "text-le-ink-400",
         disabled
           ? "cursor-not-allowed opacity-30"
@@ -342,6 +343,18 @@ export function matchLayers<
   );
 }
 
+/**
+ * ⇧클릭의 기준점 — 기억해 둔 줄이 아직 선택에 있으면(또는 아무것도 안 골랐으면) 그것,
+ * 아니면 지금 선택의 마지막 것.
+ */
+export function shiftAnchor(
+  anchorId: string | null,
+  selected: readonly string[],
+): string | null {
+  if (anchorId && (!selected.length || selected.includes(anchorId))) return anchorId;
+  return selected[selected.length - 1] ?? null;
+}
+
 /** 누른 줄 하나를 선택에서 넣거나 뺀다(⌘/Ctrl 클릭). */
 export function toggleId(selected: readonly string[], id: string): string[] {
   return selected.includes(id)
@@ -636,8 +649,13 @@ export const DetailPageLayersPanel = observer(function DetailPageLayersPanel({
    */
   const onSelect = (id: string, mods: { shift: boolean; meta: boolean }) => {
     if (mods.shift) {
-      s.selectElements(rangeIds(rows, anchorId, id));
-      // 기준점은 그대로 둔다 — 범위를 잡았다 놨다 하며 늘릴 수 있어야 한다.
+      // 기준점은 목록에서 마지막으로 누른 줄인데, 그사이 캔버스에서 다른 걸 골랐으면
+      // 낡은 값이다(없거나 선택 밖). 그때 그대로 쓰면 누른 줄 하나만 잡혀 ⇧클릭이
+      // «가끔 안 되는» 것처럼 보인다 — 지금 선택의 마지막 것을 기준점으로 삼는다.
+      const anchor = shiftAnchor(anchorId, selectedIds) ?? id;
+      s.selectElements(rangeIds(rows, anchor, id));
+      // 기준점은 옮기지 않는다 — 범위를 잡았다 놨다 하며 늘릴 수 있어야 한다.
+      setAnchorId(anchor);
       return;
     }
     if (mods.meta) {

package/components/detail-page/detail-page-properties-panel.tsx

@@ -72,6 +72,9 @@ import {
   extractSvgColors,
 } from "../../lib/detail-page/svg-colors";
 import { readColorReplace } from "@leviosa-ai/canvas/render/svg-source";
+import { elementRect, type Rect, type RectSource } from "@leviosa-ai/canvas/edit/rect";
+import { groupResizePatches } from "@leviosa-ai/canvas/render/interaction";
+import type { CanvasElement } from "@leviosa-ai/canvas/store";
 import { selectedElementsDeep } from "./detail-page-selection";
 import { useEditorAi } from "./editor-ai-context";
 import { parseAuthoringImageSrc } from "../../lib/detail-page/authoring-image-src";
@@ -97,8 +100,6 @@ import { setZ as setElementZ, zOrderOf } from "../../lib/detail-page/z-order";
 import {
   canDistribute,
   distributeCoords,
-  toItems,
-  type DistributeElement,
 } from "../../lib/detail-page/distribute";
 import { useDetailPageHost } from "./detail-page-host-context";
 import type {
@@ -236,8 +237,9 @@ export function groupFrame(
   let lo = Infinity;
   let hi = -Infinity;
   for (const sib of siblings) {
-    const start = num(axis === "x" ? sib.x : sib.y);
-    const size = num(axis === "x" ? sib.width : sib.height);
+    const rect = rectOf(sib);
+    const start = axis === "x" ? rect.x : rect.y;
+    const size = axis === "x" ? rect.width : rect.height;
     lo = Math.min(lo, start);
     hi = Math.max(hi, start + size);
   }
@@ -245,6 +247,20 @@ export function groupFrame(
   return { start: lo, size: hi - lo };
 }
 
+/**
+ * 요소가 **보이는** 네모(부모 좌표). 그룹은 자기 x/y·폭·높이를 안 믿으므로(자식이 좌표를
+ * 들고, 그룹 폭·높이는 0일 수 있다) x/width를 그대로 읽으면 정렬이 그룹을 날려 보낸다.
+ * 캔버스가 정렬·스냅에 쓰는 `elementRect`로 잰다.
+ */
+function rectOf(el: unknown): Rect {
+  return elementRect(el as RectSource);
+}
+
+/** 보이는 네모의 축 시작이 `coord`에 오게 하는 x(또는 y) 값. */
+function placeAt(el: ElementLike, axis: AlignAxis, coord: number): number {
+  return num(el[axis]) + coord - rectOf(el)[axis];
+}
+
 /** Where a box of `size` lands when aligned inside `frame`. */
 export function alignedCoord(
   frame: AlignFrame,
@@ -287,8 +303,9 @@ function alignInFrame(
     for (const el of els) {
       const frame = frameOf(store, el, axis);
       if (!frame) continue;
-      const size = num(axis === "x" ? el.width : el.height);
-      const coord = Math.round(alignedCoord(frame, size, where));
+      const rect = rectOf(el);
+      const size = axis === "x" ? rect.width : rect.height;
+      const coord = Math.round(placeAt(el, axis, alignedCoord(frame, size, where)));
       el.set(axis === "x" ? { x: coord } : { y: coord });
     }
   });
@@ -307,9 +324,10 @@ function currentAlign(
   for (const el of els) {
     const frame = frameOf(store, el, axis);
     if (!frame) return null;
-    const size = num(axis === "x" ? el.width : el.height);
+    const rect = rectOf(el);
+    const size = axis === "x" ? rect.width : rect.height;
     if (frame.size - size < 1) return null; // 상자를 꽉 채움: 정렬 구분 무의미
-    const coord = num(axis === "x" ? el.x : el.y);
+    const coord = rect[axis];
     let where: AlignWhere | null = null;
     for (const w of ["start", "center", "end"] as const) {
       if (Math.abs(alignedCoord(frame, size, w) - coord) <= 1) {
@@ -326,14 +344,19 @@ function currentAlign(
 
 // 선택 요소끼리 간격을 고르게. 양 끝은 그대로 두고 사이 여백만 나눈다(distribute.ts).
 function spreadEvenly(els: ElementLike[], axis: "x" | "y") {
-  const items = toItems(els as DistributeElement[], axis);
-  const coords = items && distributeCoords(items);
+  // 보이는 네모로 잰다 — 그룹이 섞여 있어도 같은 자로 벌린다.
+  const items = els.map((el) => {
+    const rect = rectOf(el);
+    return { id: el.id, start: rect[axis], size: axis === "x" ? rect.width : rect.height };
+  });
+  const coords = distributeCoords(items);
   if (!coords) return;
   transact(historyOf(els[0]), () => {
     for (const el of els) {
       const coord = coords.get(el.id);
       if (coord == null) continue;
-      el.set(axis === "x" ? { x: coord } : { y: coord });
+      const next = Math.round(placeAt(el, axis, coord));
+      el.set(axis === "x" ? { x: next } : { y: next });
     }
   });
 }
@@ -741,13 +764,21 @@ const SizeSection = observer(function SizeSection({ els }: { els: ElementLike[]
   const { t } = useTranslation("branding");
   const el = els[0];
   if (!el) return null;
+  // 그룹은 자기 x/y·폭·높이를 안 믿는다 — 보이는 네모를 보여 주고, 고치면 그 네모가
+  // 움직이거나 커지게 한다(자손까지 같이). 잎은 제 값 그대로.
+  const group = el.type === "group" && Array.isArray(el.children);
+  const rect = group ? rectOf(el) : null;
   const field = (label: string, key: "width" | "height" | "x" | "y") => (
     <NumberField
       label={label}
-      value={num(el[key])}
+      value={rect ? Math.round(rect[key] * 100) / 100 : num(el[key])}
       min={key === "width" || key === "height" ? 1 : undefined}
       history={historyOf(el)}
-      onChange={(v) => el.set({ [key]: Math.round(v) })}
+      onChange={(v) => {
+        if (!rect) el.set({ [key]: Math.round(v) });
+        else if (key === "x" || key === "y") el.set({ [key]: Math.round(placeAt(el, key, v)) });
+        else resizeGroup(el, key, v);
+      }}
     />
   );
   return (
@@ -763,6 +794,29 @@ const SizeSection = observer(function SizeSection({ els }: { els: ElementLike[]
 });
 SizeSection.displayName = "SizeSection";
 
+/** 그룹의 보이는 폭(또는 높이)을 `size`로 — 자손을 같이 늘리고 왼쪽 위는 제자리에 둔다. */
+function resizeGroup(el: ElementLike, key: "width" | "height", size: number) {
+  const before = rectOf(el);
+  const scale = size / (key === "width" ? before.width : before.height);
+  if (!Number.isFinite(scale) || scale <= 0) return;
+  const group = el as unknown as CanvasElement;
+  transact(historyOf(el), () => {
+    const patches = groupResizePatches(group, {
+      x: num(el.x),
+      y: num(el.y),
+      width: num(el.width),
+      height: num(el.height),
+      rotation: num(el.rotation),
+      scaleX: key === "width" ? scale : 1,
+      scaleY: key === "height" ? scale : 1,
+    });
+    for (const { id, patch } of patches) group.store.getElementById(id)?.set(patch);
+    // 자손 좌표는 그룹 원점 기준으로 곱해지므로 보이는 왼쪽 위가 밀린다 — 되돌린다.
+    const after = rectOf(el);
+    el.set({ x: num(el.x) + before.x - after.x, y: num(el.y) + before.y - after.y });
+  });
+}
+
 function DeleteRow({ store, els }: { store: StoreLike; els: ElementLike[] }) {
   const { t } = useTranslation("branding");
   // A single selected group can be split back into its elements. Mirrors the
@@ -1858,7 +1912,10 @@ function InspectorHeader({ els }: { els: ElementLike[] }) {
     label = t("detailPage.properties.selectionCount", { count: els.length });
   }
   return (
-    <div className="flex items-center gap-2 border-b border-le-ink-200 px-4 py-3 text-sm font-le-semibold text-le-ink-950">
+    <div
+      data-le-inspector-header=""
+      className="flex items-center gap-2 border-b border-le-ink-200 px-4 py-3 text-sm font-le-semibold text-le-ink-950"
+    >
       {icon}
       {label}
     </div>
@@ -1929,7 +1986,7 @@ export const DetailPageProperties = observer(function DetailPageProperties({
   return (
     <div className="flex h-full min-h-0 flex-col">
       <InspectorHeader els={els} />
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div data-le-inspector-body="" className="min-h-0 flex-1 overflow-y-auto">
         {els.length === 0 ? (
           <PageInspector
             store={s}

package/components/detail-page/image-crop-overlay.tsx

@@ -57,6 +57,8 @@ export type CropElement = {
   width?: unknown;
   height?: unknown;
   rotation?: unknown;
+  flipX?: unknown;
+  flipY?: unknown;
   set: (patch: Record<string, unknown>) => void;
 };
 
@@ -64,8 +66,8 @@ const ACCENT = "rgb(0, 161, 255)";
 const HANDLE = 10;
 /** 자르기 밖을 덮는 그림자의 짙기. 잘려 나가는 부분이 보이되 상자 안이 또렷해야 한다. */
 const OUTSIDE_OPACITY = 0.5;
-/** 조작 줄을 작업 영역 안에 남기는 여백/높이. */
-const BAR_MARGIN = 180;
+/** 조작 줄을 작업 영역 안에 남기는 여백/높이. 여백은 줄 너비의 반에 이만큼을 더한다. */
+const BAR_MARGIN = 8;
 const BAR_HEIGHT = 56;
 
 const CORNERS: CropHandle[] = ["nw", "ne", "sw", "se"];
@@ -123,6 +125,8 @@ export function ImageCropOverlay({
   const [presetId, setPresetId] = useState<CropPresetId>("custom");
   const [menuOpen, setMenuOpen] = useState(false);
   const drag = useRef<DragState | null>(null);
+  // 조작 줄의 실제 너비 — 언어에 따라 달라서 재야 가장자리에서 안 잘린다.
+  const barRef = useRef<HTMLDivElement | null>(null);
 
   // 그림은 캔버스가 이미 받아 둔 것을 그대로 꺼내 쓴다 — 다시 받으면 같은 그림이 두 벌
   // 디코드되고, 교차 출처 설정이 달라 알파 판정이 어긋날 수 있다.
@@ -236,6 +240,20 @@ export function ImageCropOverlay({
     setRect(applyAspect(rect, start.image, resolveAspect(next, natural)));
   };
 
+  const [barWidth, setBarWidth] = useState(0);
+  const barShown = Boolean(start && rect && box);
+  useLayoutEffect(() => {
+    const node = barRef.current;
+    if (!node) return;
+    const measure = () => setBarWidth(node.offsetWidth);
+    measure();
+    // 글꼴·스타일이 늦게 붙으면 너비가 바뀐다.
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [barShown]);
+
   if (!start || !rect || !box) return null;
 
   const scale = box.scale || 1;
@@ -243,6 +261,10 @@ export function ImageCropOverlay({
   const cos = Math.cos(radians);
   const sin = Math.sin(radians);
   const zoom = rectZoom(rect, start.image, aspect);
+  // 뒤집힌 사진은 화면에서도 뒤집혀 있다 — 오버레이도 상자 가운데를 축으로 같이 뒤집어야
+  // 보이는 자리와 자르는 자리가 맞는다. 끈 양도 그 축으로 되돌린다.
+  const flipX = el.flipX === true;
+  const flipY = el.flipY === true;
 
   const begin = (event: ReactPointerEvent<HTMLElement>, handle: CropHandle) => {
     event.preventDefault();
@@ -264,8 +286,8 @@ export function ImageCropOverlay({
     const screenX = event.clientX - state.startX;
     const screenY = event.clientY - state.startY;
     // 화면에서 끈 양을 요소 좌표로 되돌린다(배율을 나누고 회전을 되감는다).
-    const dx = (screenX * cos + screenY * sin) / scale;
-    const dy = (-screenX * sin + screenY * cos) / scale;
+    const dx = ((screenX * cos + screenY * sin) / scale) * (flipX ? -1 : 1);
+    const dy = ((-screenX * sin + screenY * cos) / scale) * (flipY ? -1 : 1);
     setRect(dragCrop(state.rect, state.handle, dx, dy, start.image, { aspect }));
   };
 
@@ -294,10 +316,12 @@ export function ImageCropOverlay({
   const host = containerRef.current;
   const hostWidth = host?.clientWidth ?? 0;
   const hostHeight = host?.clientHeight ?? 0;
-  const barCenter = box.left + view.left + view.width / 2;
+  const barCenter =
+    box.left + (flipX ? box.width - view.left - view.width : view.left) + view.width / 2;
+  const barEdge = barWidth / 2 + BAR_MARGIN;
   const barPosition = {
     left: hostWidth
-      ? Math.max(BAR_MARGIN, Math.min(barCenter, hostWidth - BAR_MARGIN))
+      ? Math.max(barEdge, Math.min(barCenter, hostWidth - barEdge))
       : barCenter,
     top: hostHeight
       ? Math.min(box.top + view.top + view.height + 12, hostHeight - BAR_HEIGHT)
@@ -327,7 +351,11 @@ export function ImageCropOverlay({
           top: box.top,
           width: box.width,
           height: box.height,
-          transform: `rotate(${box.rotation}deg)`,
+          transform: [
+            `rotate(${box.rotation}deg)`,
+            flipX ? `translateX(${box.width}px) scaleX(-1)` : "",
+            flipY ? `translateY(${box.height}px) scaleY(-1)` : "",
+          ].join(" "),
           transformOrigin: "0 0",
         }}
       >
@@ -416,7 +444,13 @@ export function ImageCropOverlay({
                 background: "#fff",
                 border: `1px solid ${ACCENT}`,
                 boxSizing: "border-box",
-                cursor: CURSOR[handle],
+                // 한 번 뒤집힌 상자에서는 대각선 손잡이가 반대 대각선에 놓인다.
+                cursor:
+                  flipX !== flipY && (handle === "nw" || handle === "se")
+                    ? "nesw-resize"
+                    : flipX !== flipY && (handle === "ne" || handle === "sw")
+                      ? "nwse-resize"
+                      : CURSOR[handle],
                 touchAction: "none",
               }}
             />
@@ -426,6 +460,7 @@ export function ImageCropOverlay({
 
       {/* 조작 줄은 회전과 무관하게 세워 둔다 — 기울어진 버튼은 누르기 어렵다. */}
       <div
+        ref={barRef}
         data-dp-crop-bar=""
         onPointerDown={(event) => event.stopPropagation()}
         style={{ position: "absolute", ...barPosition, transform: "translateX(-50%)" }}

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

@@ -104,7 +104,11 @@ export function Section({
   children: React.ReactNode;
 }) {
   return (
-    <section className="border-t border-le-ink-200 px-4 py-3 first:border-t-0">
+    // `data-le-section` 은 모바일 하단 띠가 섹션을 탭으로 세우는 손잡이다(mobile-editor-bars).
+    <section
+      data-le-section={title}
+      className="border-t border-le-ink-200 px-4 py-3 first:border-t-0"
+    >
       <h4 className="mb-2 text-[11px] font-le-semibold uppercase tracking-[0.06em] text-le-ink-400">
         {title}
       </h4>