@leviosa-ai/detail-page-editor 0.18.0 → 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"

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

@@ -1912,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>
@@ -1983,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/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>

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

@@ -20,10 +20,12 @@
 import {
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
   useSyncExternalStore,
+  type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from "react";
 
@@ -46,6 +48,7 @@ import {
 import { FrameDragLayer } from "./frame-drag-layer";
 import { GifAnimator } from "./gif-animator";
 import { GroupDrillIn } from "./group-drill-in";
+import { useIsMobile } from "./mobile-editor-bars";
 import { HoverHighlightOverlay } from "./hover-highlight-overlay";
 import { CanvasSectionHeightHandle } from "./section-height-handle";
 import { loadEditorFont } from "../../lib/detail-page-canvas/editor-fonts";
@@ -102,6 +105,26 @@ const THUMB_PIXEL_RATIO = 0.12;
 /** 아래 띠가 가장자리·화면 목록에서 떨어지는 거리. */
 const DOCK_GAP = 16;
 
+/**
+ * 핀치를 붙잡은 자리 — 손가락 가운데 아래 있던 판과, 그 판 안의 문서 좌표.
+ *
+ * 스크롤 양으로 셈하지 않고 판의 실제 자리(DOM)로 맞춘다. 판 둘레 여백과 가운데 정렬은
+ * 배율 따라 안 늘어나서, 스크롤로 비례 계산하면 수십 px 씩 밀린다.
+ */
+type PinchAnchor = {
+  page: HTMLElement;
+  docX: number;
+  docY: number;
+  clientX: number;
+  clientY: number;
+};
+
+/** 관성 스크롤 한 걸음: 속도(px/ms)를 dt(ms)만큼 마찰로 줄인다. 충분히 느려지면 0. */
+export function flingStep(velocity: number, dt: number): number {
+  const next = velocity * Math.pow(0.997, dt);
+  return Math.abs(next) < 0.02 ? 0 : next;
+}
+
 export function LeviosaCanvasWorkspace({
   store,
   gap = 4,
@@ -205,7 +228,35 @@ export function LeviosaCanvasWorkspace({
     y: number;
     left: number;
     top: number;
+    /** 손을 뗄 때 관성으로 넘길 속도(px/ms) — 최근 움직임에 가중을 둔다. */
+    vx: number;
+    vy: number;
+    lastX: number;
+    lastY: number;
+    at: number;
   } | null>(null);
+  const fling = useRef(0);
+  const stopFling = useCallback(() => {
+    cancelAnimationFrame(fling.current);
+    fling.current = 0;
+  }, []);
+  useEffect(() => stopFling, [stopFling]);
+  const startFling = (el: HTMLElement, vx: number, vy: number) => {
+    // rAF 시각은 프레임 시작 시각이라 performance.now() 보다 이를 수 있다 — 첫 프레임을
+    // 기준으로 잡고, 탭이 멈췄다 깨어난 긴 간격은 한 프레임 남짓으로 자른다.
+    let last: number | null = null;
+    const step = (now: number) => {
+      const dt = last === null ? 16 : Math.min(64, Math.max(0, now - last));
+      last = now;
+      vx = flingStep(vx, dt);
+      vy = flingStep(vy, dt);
+      if (!vx && !vy) return void (fling.current = 0);
+      el.scrollLeft += vx * dt;
+      el.scrollTop += vy * dt;
+      fling.current = requestAnimationFrame(step);
+    };
+    fling.current = requestAnimationFrame(step);
+  };
   // 배율은 **스토어**에 산다. 확대 버튼도, 여기 휠도 같은 자리를 만져야 한 쪽이
   // 다른 쪽을 되돌려 놓지 않는다.
   const scale = store.scale;
@@ -230,6 +281,7 @@ export function LeviosaCanvasWorkspace({
   // 너무 크다(맨 처음 붙였을 때 134%가 나왔다). 그래서 **사용자가 배율을 만지기
   // 전까지는** 영역이 바뀔 때마다 다시 맞춘다. 손을 대는 순간 주인이 바뀐다.
   const fittedScale = useRef<number | null>(null);
+  const mobile = useIsMobile();
   useEffect(() => {
     if (!viewport.width || !viewport.height || store.pages.length === 0) return;
     // 우리가 맞춰 놓은 값과 다르면 사용자가 만진 것이다.
@@ -252,14 +304,19 @@ export function LeviosaCanvasWorkspace({
           ) +
           (frames.length - 1) * FRAME_GAP_DOC
         : page.width;
+    // 폰에서는 지금 보는 판 하나의 **폭**에 맞춘다. 높이까지 넣으면 긴 상세페이지가
+    // 10%대로 쪼그라들어 글자를 못 읽는다 — 아래는 손가락으로 내려 보면 된다.
     const next = clamp(
-      Math.min(usableW / spread, usableH / page.height) * 0.94,
+      mobile
+        ? // 벌이 여럿이면 판이 흰 바탕(안쪽 여백 8 + 테두리 1)에 싸여 있다.
+          (usableW - (frames.length > 1 ? 18 : 0)) / page.width
+        : Math.min(usableW / spread, usableH / page.height) * 0.94,
       MIN_SCALE,
       MAX_SCALE,
     );
     fittedScale.current = next;
     setScale(next);
-  }, [viewport, paddingX, gap, store, setScale]);
+  }, [viewport, paddingX, gap, store, setScale, mobile]);
 
   // ⌘/ctrl+휠(맥 트랙패드 핀치가 이 모양으로 온다)로 커서 자리를 붙잡고 확대.
   // 그냥 휠은 브라우저 스크롤 그대로 둔다.
@@ -267,6 +324,7 @@ export function LeviosaCanvasWorkspace({
     const inner = innerRef.current;
     if (!inner) return;
     const onWheel = (event: WheelEvent) => {
+      stopFling();
       if (!event.ctrlKey && !event.metaKey) return;
       event.preventDefault();
       const current = store.scale;
@@ -286,7 +344,136 @@ export function LeviosaCanvasWorkspace({
     };
     inner.addEventListener("wheel", onWheel, { passive: false });
     return () => inner.removeEventListener("wheel", onWheel);
+  }, [store, stopFling]);
+
+  const startPan = (event: ReactPointerEvent<HTMLDivElement>) => {
+    pan.current = {
+      pointerId: event.pointerId,
+      x: event.clientX,
+      y: event.clientY,
+      left: event.currentTarget.scrollLeft,
+      top: event.currentTarget.scrollTop,
+      vx: 0,
+      vy: 0,
+      lastX: event.clientX,
+      lastY: event.clientY,
+      at: event.timeStamp,
+    };
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    setPanning(true);
+    event.preventDefault();
+  };
+
+  // 두 손가락: 벌린 만큼 확대하고, 두 손가락 가운데를 따라 화면을 옮긴다. 두 번째
+  // 손가락이 닿는 순간부터 캔버스(요소 끌기·Konva)에는 아무것도 안 보낸다 — 첫 손가락이
+  // 요소를 집고 있었으면 그 자리에서 멈춘다.
+  const pinching = useRef<{ distance: number; scale: number } | null>(null);
+  const anchor = useRef<PinchAnchor | null>(null);
+  // 붙잡은 문서 좌표가 손가락 가운데 아래 오도록 스크롤을 옮긴다. 배율이 바뀌었으면
+  // 새 크기가 그려진 직후(레이아웃 효과)에 한다 — 먼저 하면 옛 크기에 잘린다.
+  const settleAnchor = useCallback(() => {
+    const inner = innerRef.current;
+    const at = anchor.current;
+    if (!inner || !at) return;
+    const rect = at.page.getBoundingClientRect();
+    inner.scrollLeft += rect.left + at.docX * store.scale - at.clientX;
+    inner.scrollTop += rect.top + at.docY * store.scale - at.clientY;
   }, [store]);
+  useLayoutEffect(() => {
+    if (pinching.current) settleAnchor();
+  }, [scale, settleAnchor]);
+  useEffect(() => {
+    const inner = innerRef.current;
+    if (!inner) return;
+    const points = (event: TouchEvent) => {
+      const [a, b] = [event.touches[0], event.touches[1]];
+      return {
+        x: (a.clientX + b.clientX) / 2,
+        y: (a.clientY + b.clientY) / 2,
+        distance: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY),
+      };
+    };
+    const onStart = (event: TouchEvent) => {
+      if (event.touches.length !== 2) return;
+      event.stopPropagation();
+      const at = points(event);
+      const page =
+        document.elementFromPoint(at.x, at.y)?.closest<HTMLElement>("[data-lc-page]") ??
+        inner.querySelector<HTMLElement>("[data-lc-page]");
+      pan.current = null;
+      setPanning(false);
+      pinching.current = { distance: at.distance, scale: store.scale };
+      if (!page) return;
+      const rect = page.getBoundingClientRect();
+      anchor.current = {
+        page,
+        docX: (at.x - rect.left) / store.scale,
+        docY: (at.y - rect.top) / store.scale,
+        clientX: at.x,
+        clientY: at.y,
+      };
+    };
+    const onMove = (event: TouchEvent) => {
+      const start = pinching.current;
+      if (!start) return;
+      event.stopPropagation();
+      event.preventDefault();
+      if (event.touches.length < 2) return;
+      const at = points(event);
+      if (anchor.current) {
+        anchor.current.clientX = at.x;
+        anchor.current.clientY = at.y;
+      }
+      const next = clamp(
+        start.scale * (at.distance / Math.max(1, start.distance)),
+        MIN_SCALE,
+        MAX_SCALE,
+      );
+      if (next !== store.scale) store.setScale(next);
+      else settleAnchor();
+    };
+    const onEnd = (event: TouchEvent) => {
+      // 끝 이벤트는 흘려보낸다 — Konva 가 window 에서 받아 진행 중이던 드래그를 닫는다.
+      if (!pinching.current) return;
+      if (event.touches.length === 0) {
+        pinching.current = null;
+        anchor.current = null;
+      }
+    };
+    // 캡처로 건다 — 캔버스(안쪽)보다 먼저 받아야 끊을 수 있다.
+    const opts = { capture: true, passive: false } as const;
+    inner.addEventListener("touchstart", onStart, opts);
+    inner.addEventListener("touchmove", onMove, opts);
+    inner.addEventListener("touchend", onEnd, opts);
+    inner.addEventListener("touchcancel", onEnd, opts);
+    // Konva 는 포인터 이벤트도 듣는다. 포인터 이벤트는 touchstart 보다 먼저 오므로
+    // 두 번째 손가락은 여기서 따로 센다 — 안 그러면 그 손가락이 다른 요소를 골라 버린다.
+    const down = new Set<number>();
+    const blockPointer = (event: PointerEvent) => {
+      if (event.type === "pointerdown") stopFling();
+      if (event.pointerType !== "touch") return;
+      if (event.type === "pointerdown") {
+        const second = down.size > 0;
+        down.add(event.pointerId);
+        if (second) event.stopPropagation();
+      } else if (event.type === "pointermove") {
+        if (pinching.current || down.size > 1) event.stopPropagation();
+      } else {
+        down.delete(event.pointerId);
+      }
+    };
+    const pointerTypes = ["pointerdown", "pointermove", "pointerup", "pointercancel"];
+    for (const type of pointerTypes) inner.addEventListener(type, blockPointer as EventListener, true);
+    return () => {
+      inner.removeEventListener("touchstart", onStart, opts);
+      inner.removeEventListener("touchmove", onMove, opts);
+      inner.removeEventListener("touchend", onEnd, opts);
+      inner.removeEventListener("touchcancel", onEnd, opts);
+      for (const type of pointerTypes) {
+        inner.removeEventListener(type, blockPointer as EventListener, true);
+      }
+    };
+  }, [store, settleAnchor, stopFling]);
 
   /** 스크롤 때문에 우리가 바꾼 활성 화면 — 바깥에서 바꾼 것과 구분해 되울림을 막는다. */
   const scrollSetId = useRef<string | null>(null);
@@ -517,6 +704,17 @@ export function LeviosaCanvasWorkspace({
         onPointerDown={(event) => {
           // 페이지 바깥의 빈 자리를 누르면 선택 해제. 페이지 안은 캔버스가 처리한다.
           const target = event.target as HTMLElement;
+          // 손가락으로 판 위 빈 곳(또는 잠긴 배경)을 누르면 화면을 옮긴다. 캔버스가 먼저
+          // 받아서 요소를 짚었으면 골랐고, 빈 곳이면 선택을 비웠다 — 그걸 보고 가른다.
+          // 판 위의 터치는 브라우저 스크롤을 꺼 뒀다(touch-action) — 요소 끌기와 겹친다.
+          if (
+            event.pointerType === "touch" &&
+            target.closest("[data-lc-page]") &&
+            store.selectedElementsIds.length === 0
+          ) {
+            startPan(event);
+            return;
+          }
           if (
             target.closest("[data-lc-page]") ||
             target.closest("[data-dp-quicktoolbar]") ||
@@ -536,28 +734,32 @@ export function LeviosaCanvasWorkspace({
             if (first) store.selectPage(first.id);
           }
           if (event.button !== 0) return;
-          pan.current = {
-            pointerId: event.pointerId,
-            x: event.clientX,
-            y: event.clientY,
-            left: event.currentTarget.scrollLeft,
-            top: event.currentTarget.scrollTop,
-          };
-          event.currentTarget.setPointerCapture?.(event.pointerId);
-          setPanning(true);
-          event.preventDefault();
+          startPan(event);
         }}
         onPointerMove={(event) => {
           const start = pan.current;
-          if (!start || start.pointerId !== event.pointerId) return;
+          if (!start || start.pointerId !== event.pointerId || pinching.current) return;
           event.currentTarget.scrollLeft = start.left + start.x - event.clientX;
           event.currentTarget.scrollTop = start.top + start.y - event.clientY;
+          const dt = event.timeStamp - start.at;
+          if (dt > 0) {
+            start.vx = 0.8 * ((start.lastX - event.clientX) / dt) + 0.2 * start.vx;
+            start.vy = 0.8 * ((start.lastY - event.clientY) / dt) + 0.2 * start.vy;
+          }
+          start.lastX = event.clientX;
+          start.lastY = event.clientY;
+          start.at = event.timeStamp;
         }}
         onPointerUp={(event) => {
-          if (pan.current?.pointerId !== event.pointerId) return;
+          const start = pan.current;
+          if (start?.pointerId !== event.pointerId) return;
           pan.current = null;
           event.currentTarget.releasePointerCapture?.(event.pointerId);
           setPanning(false);
+          // 손가락만 관성으로 미끄러진다. 멈췄다 뗐으면(80ms 넘게 안 움직임) 그대로 선다.
+          if (event.pointerType === "touch" && event.timeStamp - start.at < 80) {
+            startFling(event.currentTarget, start.vx, start.vy);
+          }
         }}
         onPointerCancel={(event) => {
           if (pan.current?.pointerId !== event.pointerId) return;
@@ -574,6 +776,9 @@ export function LeviosaCanvasWorkspace({
           flexDirection: "column",
           alignItems: "flex-start",
           cursor: panning ? "grabbing" : "default",
+          // 손가락 제스처(옮기기·핀치)는 아래에서 직접 받는다. 브라우저에 맡기면 요소
+          // 끌기와 화면 스크롤이 한 손가락을 두고 다툰다.
+          touchAction: "none",
           padding: `${frameCount > 1 ? gap + FRAME_HEAD : gap}px ${paddingX}px ${gap}px`,
         }}
       >

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

@@ -0,0 +1,382 @@
+// Copyright © 2026 주식회사레비오사에이아이. All rights reserved. See LICENSE.
+"use client";
+
+/**
+ * 좁은 화면(폰)의 하단 띠 — 좌측 레일과 우측 인스펙터가 들어갈 자리가 없어서 둘 다
+ * 화면 아래 한 줄로 내린다(Canva 모바일과 같은 모양).
+ *
+ * - 아무것도 안 골랐으면 좌측 레일의 탭을 가로로 흘린다. 누르면 패널이 아래에서
+ *   올라오는 시트로 열린다.
+ * - 뭔가 골랐으면 인스펙터의 섹션(`Section` 제목)을 탭으로 세운다. 누르면 그 섹션
+ *   하나만 띠 바로 위에 뜬다.
+ *
+ * 인스펙터를 섹션별로 다시 짜지 않는다. 인스펙터를 통째로 그려 두고, `Section` 이 다는
+ * `data-le-section` 을 읽어 탭을 세우고 고른 것 하나만 CSS 로 보인다 — 인스펙터가 늘어도
+ * 여기는 안 고친다.
+ */
+
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ReactElement,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+} from "react";
+import { Check, Settings2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { SectionTab } from "@leviosa-ai/canvas";
+
+import { observer } from "./canvas-observer";
+import { selectedElementsDeep } from "./detail-page-selection";
+
+const MOBILE_QUERY = "(max-width: 767px)";
+
+function subscribeMobile(onChange: () => void) {
+  const mq = window.matchMedia(MOBILE_QUERY);
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
+
+export function useIsMobile(): boolean {
+  return useSyncExternalStore(
+    subscribeMobile,
+    () => window.matchMedia(MOBILE_QUERY).matches,
+    () => false,
+  );
+}
+
+/**
+ * 키보드가 올라와 눈에 보이는 높이가 줄었으면 그 높이(px), 아니면 null.
+ *
+ * iOS 는 키보드가 떠도 레이아웃 높이(`100dvh`)를 안 줄이고 그 위를 덮는다 — 그러면
+ * 하단 띠와 고치는 글자가 키보드 밑에 깔린다. 편집기를 보이는 높이로 줄여 띠를 키보드
+ * 바로 위로 올린다.
+ */
+function subscribeViewport(onChange: () => void) {
+  const vv = window.visualViewport;
+  vv?.addEventListener("resize", onChange);
+  vv?.addEventListener("scroll", onChange);
+  return () => {
+    vv?.removeEventListener("resize", onChange);
+    vv?.removeEventListener("scroll", onChange);
+  };
+}
+// ponytail: 120px 넘게 줄면 키보드로 본다 — 주소창이 접히고 펴지는 정도는 안 넘는다.
+const KEYBOARD_PX = 120;
+export function useKeyboardViewport(): { height: number; top: number } | null {
+  const key = useSyncExternalStore(
+    subscribeViewport,
+    () => {
+      const vv = window.visualViewport;
+      if (!vv || window.innerHeight - vv.height < KEYBOARD_PX) return "";
+      return `${Math.round(vv.height)}:${Math.round(vv.offsetTop)}`;
+    },
+    () => "",
+  );
+  if (!key) return null;
+  const [height, top] = key.split(":").map(Number);
+  return { height, top };
+}
+
+type MobileSection = {
+  name: string;
+  Tab: (props: Record<string, unknown>) => ReactElement | null;
+  Panel: (props: { store: unknown }) => ReactElement | null;
+  visibleInList?: boolean;
+};
+
+type StoreLike = {
+  pages: { children: { id: string }[] }[];
+  openedSidePanel: string;
+  openSidePanel: (name: string) => void;
+  selectElements: (ids: string[]) => void;
+};
+
+const BAR_CLASS =
+  "flex shrink-0 items-stretch [scrollbar-width:none] border-t border-le-ink-200 bg-le-surface pb-[env(safe-area-inset-bottom)]";
+
+// 레일 탭은 세로 레일 폭을 채우게 짜여 있다 — 가로로 흘릴 때는 칸 폭을 못 박고,
+// 브랜드 구역 앞에 긋는 가로 구분선은 숨긴다.
+const SHEET_CSS = `
+[data-le-mobile-tabs] > div > span[aria-hidden="true"] { display: none; }
+[data-le-mobile-tabs] > div > button { padding: 10px 4px !important; font-size: 11px !important; }
+@keyframes le-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
+@keyframes le-fade-in { from { opacity: 0; } to { opacity: 1; } }
+`;
+
+/** 아무것도 안 골랐을 때 — 좌측 레일 탭 띠 + 아래서 올라오는 시트. */
+const SectionBar = observer(function SectionBar({
+  store,
+  sections,
+}: {
+  store: unknown;
+  sections: ReadonlyArray<MobileSection>;
+}) {
+  const s = store as StoreLike;
+  const opened = s.openedSidePanel;
+  const Panel = sections.find((section) => section.name === opened)?.Panel;
+  const close = () => s.openSidePanel("");
+  // 시트에서 뭔가 넣으면 시트를 닫고 넣은 것을 고른다 — 폰에서는 시트가 캔버스를 가리고
+  // 있어서, 안 그러면 뭐가 들어갔는지 안 보인다. 하단 띠도 그걸로 인스펙터로 넘어간다.
+  // (편집기의 `addElement` 는 선택을 안 옮긴다 — store.ts.)
+  const ids = s.pages.flatMap((page) => page.children.map((el) => el.id));
+  // 화면을 넣거나 복제한 것(페이지 패널)은 요소를 넣은 것이 아니다 — 화면 수가 바뀌면
+  // 기준만 새로 잡는다.
+  const pageCount = s.pages.length;
+  const seen = useRef<{ ids: Set<string>; pages: number } | null>(null);
+  useEffect(() => {
+    if (!Panel) {
+      seen.current = null;
+      return;
+    }
+    if (!seen.current || seen.current.pages !== pageCount) {
+      seen.current = { ids: new Set(ids), pages: pageCount };
+      return;
+    }
+    const known = seen.current.ids;
+    const added = ids.filter((id) => !known.has(id));
+    if (added.length) {
+      s.openSidePanel("");
+      s.selectElements(added);
+    }
+  });
+
+  // 끌어내리기. 시트 높이의 1/4 을 넘기거나 빠르게 튕기면 닫고, 아니면 제자리로.
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const [dragY, setDragY] = useState<number | null>(null);
+  // 한 번 끌었으면 놓을 때 여는 애니메이션을 다시 틀지 않고 제자리로 미끄러진다.
+  const [dragged, setDragged] = useState(false);
+  const startDrag = (down: ReactPointerEvent<HTMLDivElement>) => {
+    const handle = down.currentTarget as HTMLDivElement;
+    handle.setPointerCapture(down.pointerId);
+    const y0 = down.clientY;
+    const t0 = down.timeStamp;
+    setDragged(true);
+    const move = (e: PointerEvent) => setDragY(Math.max(0, e.clientY - y0));
+    const up = (e: PointerEvent) => {
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", up);
+      handle.removeEventListener("pointercancel", up);
+      const dy = Math.max(0, e.clientY - y0);
+      const height = sheetRef.current?.offsetHeight ?? 1;
+      const flick = dy / Math.max(1, e.timeStamp - t0) > 0.5;
+      setDragY(null);
+      if (e.type === "pointerup" && (dy < 4 || dy > height / 4 || flick)) close();
+    };
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", up);
+    handle.addEventListener("pointercancel", up);
+  };
+
+  // 시트는 띠 위에서 멈춘다 — 띠가 보여야 다른 탭으로 바로 옮겨 간다(Canva 와 같다).
+  const navRef = useRef<HTMLElement>(null);
+  const [barHeight, setBarHeight] = useState(0);
+  useLayoutEffect(() => {
+    if (Panel) setBarHeight(navRef.current?.offsetHeight ?? 0);
+    else setDragged(false);
+  }, [Panel]);
+
+  return (
+    <>
+      <style>{SHEET_CSS}</style>
+      <nav
+        ref={navRef}
+        data-le-part="mobile-section-bar"
+        data-le-mobile-tabs=""
+        className={`${BAR_CLASS} overflow-x-auto`}
+      >
+        {sections
+          .filter((section) => section.visibleInList !== false)
+          .map(({ name, Tab }) => (
+            <div key={name} className="w-[72px] shrink-0">
+              <Tab
+                active={name === opened}
+                onClick={() => s.openSidePanel(name === opened ? "" : name)}
+              />
+            </div>
+          ))}
+      </nav>
+      {Panel ? (
+        <div
+          className="fixed inset-x-0 top-0 z-40"
+          style={{ bottom: barHeight }}
+          data-le-part="mobile-sheet"
+        >
+          <div
+            className="absolute inset-0 bg-le-scrim/60"
+            style={{ animation: "le-fade-in 160ms ease-out" }}
+            onClick={close}
+            aria-hidden="true"
+          />
+          <div
+            ref={sheetRef}
+            role="dialog"
+            aria-modal="true"
+            className="absolute inset-x-0 bottom-0 flex h-[75%] flex-col overflow-hidden rounded-t-le-xl bg-le-surface shadow-2xl"
+            style={
+              dragY !== null
+                ? { transform: `translateY(${dragY}px)` }
+                : dragged
+                  ? { transition: "transform 200ms ease-out" }
+                  : { animation: "le-sheet-up 220ms cubic-bezier(0.2, 0.8, 0.2, 1)" }
+            }
+          >
+            {/* 손잡이를 끌어내리면 닫힌다. 그냥 누르기만 해도 닫힌다. */}
+            <div
+              role="button"
+              aria-label="close"
+              tabIndex={0}
+              onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && close()}
+              onPointerDown={startDrag}
+              className="flex h-7 shrink-0 cursor-grab touch-none items-center justify-center"
+            >
+              <span className="h-1 w-10 rounded-full bg-le-ink-300" />
+            </div>
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+              <Panel store={store} />
+            </div>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+});
+
+/** 뭔가 골랐을 때 — 인스펙터 섹션 탭 띠 + 띠 바로 위에 뜨는 섹션 하나. */
+function InspectorBar({ store, inspector }: { store: unknown; inspector: ReactNode }) {
+  const s = store as StoreLike;
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [titles, setTitles] = useState<string[]>([]);
+  const [active, setActive] = useState<string | null>(null);
+
+  // 인스펙터가 지금 그린 섹션 제목을 읽는다. 선택이 바뀌면 섹션도 바뀐다.
+  useEffect(() => {
+    const host = hostRef.current;
+    if (!host) return;
+    const read = () => {
+      const next = [
+        ...new Set(
+          Array.from(host.querySelectorAll<HTMLElement>("[data-le-section]"), (el) =>
+            el.getAttribute("data-le-section") ?? "",
+          ),
+        ),
+      ];
+      setTitles((prev) => (prev.join("\n") === next.join("\n") ? prev : next));
+    };
+    read();
+    const mo = new MutationObserver(read);
+    // 제목만 바뀌는 경우(언어 전환)도 있다 — 속성도 본다.
+    mo.observe(host, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-le-section"],
+    });
+    return () => mo.disconnect();
+  }, []);
+
+  const shown = active !== null && titles.includes(active) ? active : null;
+
+  return (
+    <div className="relative shrink-0" data-le-part="mobile-inspector-bar">
+      <style>{`
+[data-le-mobile-inspector] [data-le-inspector-header] { display: none; }
+[data-le-mobile-inspector] [data-le-inspector-body] > :not([data-le-section]):not(:has([data-le-section])) { display: none; }
+[data-le-mobile-inspector] [data-le-section]:not([data-le-section="${shown ? CSS.escape(shown) : ""}"]) { display: none; }
+[data-le-mobile-inspector] [data-le-section] { border-top: 0; }
+`}</style>
+      <div
+        ref={hostRef}
+        data-le-mobile-inspector=""
+        className="absolute inset-x-2 bottom-full z-50 mb-2 max-h-[45dvh] overflow-y-auto rounded-le-xl border border-le-ink-200 bg-le-surface shadow-lg"
+        style={{ display: shown ? undefined : "none" }}
+      >
+        {inspector}
+      </div>
+      <div className={BAR_CLASS}>
+        <div className="flex min-w-0 flex-1 overflow-x-auto [scrollbar-width:none]">
+          {titles.map((title) => (
+            <button
+              key={title}
+              type="button"
+              aria-pressed={title === shown}
+              onClick={() => setActive(title === shown ? null : title)}
+              className={`shrink-0 whitespace-nowrap px-3.5 py-3.5 text-xs font-le-medium ${
+                title === shown ? "bg-le-ink-100 text-le-ink-950" : "text-le-ink-600"
+              }`}
+            >
+              {title}
+            </button>
+          ))}
+        </div>
+        <button
+          type="button"
+          aria-label="done"
+          onClick={() => s.selectElements([])}
+          className="m-1.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-le-ink-200 text-le-ink-900 shadow-sm"
+        >
+          <Check aria-hidden="true" size={18} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export const MobileBottomBar = observer(function MobileBottomBar({
+  store,
+  sections,
+  inspector,
+}: {
+  store: unknown;
+  sections: ReadonlyArray<MobileSection>;
+  inspector: ReactNode;
+}) {
+  const { t } = useTranslation("branding");
+  const s = store as StoreLike;
+  const selected = selectedElementsDeep(store as never).length > 0;
+  // 시트(레이어 등)에서 골랐으면 시트는 닫는다. 안 닫으면 띠가 인스펙터로 바뀌어 시트가
+  // 숨었다가, ✓ 로 선택을 풀 때 다시 튀어나온다.
+  useEffect(() => {
+    if (selected && s.openedSidePanel) s.openSidePanel("");
+  }, [selected, s]);
+
+  // 아무것도 안 골랐을 때의 인스펙터(화면 배경·높이·복제/삭제)는 데스크톱에서는 늘
+  // 보이는 우측 패널이다. 폰에서는 띠 끝에 탭 하나로 둔다.
+  const withPage = useMemo<MobileSection[]>(() => {
+    const label = t("detailPage.properties.pageActions");
+    return [
+      ...sections,
+      {
+        name: "mobile-page-settings",
+        Tab: (props) => (
+          <SectionTab name={label} {...props}>
+            <Settings2 size={18} />
+          </SectionTab>
+        ),
+        Panel: () => (
+          <div data-le-mobile-page="" className="min-h-0 flex-1 overflow-y-auto">
+            {inspector}
+          </div>
+        ),
+      },
+    ];
+  }, [sections, inspector, t]);
+
+  return (
+    <>
+      {/* 캔버스 아래 삽입 띠(글상자·도형)는 하단 띠의 텍스트·요소 탭과 겹친다. */}
+      <style>
+        {"[data-dp-insert-dock], [data-le-mobile-page] [data-le-inspector-header] { display: none; }"}
+      </style>
+      {selected ? (
+        <InspectorBar store={store} inspector={inspector} />
+      ) : (
+        <SectionBar store={store} sections={withPage} />
+      )}
+    </>
+  );
+});

package/components/detail-page/selection-quick-toolbar.tsx

@@ -92,13 +92,33 @@ export function popoverPlacement(
   };
 }
 
-export type QuickPopoverPlacement = ReturnType<typeof popoverPlacement>;
+export type QuickPopoverPlacement = ReturnType<typeof popoverPlacement> & {
+  /** 띠 왼쪽 끝이 작업 영역 안에서 놓인 자리와 작업 영역 폭 — 창이 옆으로 넘치지 않게. */
+  left: number;
+  hostWidth: number;
+};
 
 const QuickPopoverContext = createContext<QuickPopoverPlacement>({
   side: "below",
   maxHeight: 520,
+  left: 0,
+  hostWidth: Infinity,
 });
 
+/**
+ * 창의 폭과 띠 기준 가로 밀기. 폰처럼 좁으면 폭을 줄이고, 오른쪽 끝 요소에서 열어도
+ * 작업 영역 안에 들어오게 왼쪽으로 민다(작업 영역이 넘침을 잘라 낸다).
+ */
+export function popoverHorizontal(
+  width: number,
+  left: number,
+  hostWidth: number,
+): { width: number; shift: number } {
+  const fit = Math.min(width, Math.max(0, hostWidth - 2 * EDGE));
+  const shift = Math.max(EDGE - left, Math.min(0, hostWidth - EDGE - fit - left));
+  return { width: fit, shift };
+}
+
 /** 창을 그리는 쪽이 자기 자리를 집는 곳. 띠 밖에서 부르면 기본값(아래)이다. */
 export function useQuickPopoverPlacement(): QuickPopoverPlacement {
   return useContext(QuickPopoverContext);
@@ -259,7 +279,9 @@ export function SelectionQuickToolbar({
           </div>
         ))}
       </div>
-      <QuickPopoverContext.Provider value={placement}>
+      <QuickPopoverContext.Provider
+        value={{ ...placement, left, hostWidth: host.clientWidth }}
+      >
         {children}
       </QuickPopoverContext.Provider>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Leviosa detail-page editor shell. Source-only: consumers compile it through Next transpilePackages. Every app coupling (sourcing server, brand store, cache keys, toast) arrives through the DetailPageHost interface, and every URL it fetches comes from configureDetailPageEditor.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -68,7 +68,7 @@
     "woff2-encoder": "2.0.0"
   },
   "peerDependencies": {
-    "@leviosa-ai/canvas": "0.10.0",
+    "@leviosa-ai/canvas": "0.11.0",
     "@tanstack/react-query": "^5.100.3",
     "konva": "^10.0.0",
     "lucide-react": "^0.563.0 || ^1.0.0",