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

package/components/detail-page/canvas-context-menu.tsx

@@ -10,7 +10,9 @@ import {
   ChevronUp,
   ChevronsDown,
   ChevronsUp,
+  ClipboardPaste,
   Copy,
+  CopyPlus,
   Group,
   Lock,
   Paintbrush,
@@ -52,7 +54,9 @@ type MenuStore = CanvasMenuStore & {
 
 /** 항목 → 아이콘. 우클릭 메뉴와 캔버스 위 띠의 "더보기"가 같은 그림을 쓴다. */
 export const CANVAS_MENU_ICONS: Record<CanvasMenuAction, LucideIcon> = {
-  duplicate: Copy,
+  copy: Copy,
+  paste: ClipboardPaste,
+  duplicate: CopyPlus,
   lock: Lock,
   unlock: Unlock,
   delete: Trash2,

package/components/detail-page/detail-page-history-buttons.tsx

@@ -3,7 +3,10 @@
 
 import { observer } from "./canvas-observer";
 import { useTranslation } from "react-i18next";
-import { Redo2, Undo2 } from "lucide-react";
+import { Redo2, Search, Undo2 } from "lucide-react";
+
+import { openFindReplace } from "./find-replace-panel";
+import { useIsMobile } from "./mobile-editor-bars";
 
 import {
   safeRedo,
@@ -66,8 +69,19 @@ export const DetailPageHistoryButtons = observer(function DetailPageHistoryButto
   const { t } = useTranslation("branding");
   const { history } = store as HistoryStoreLike;
   const s = store as HistoryStore;
+  // 폰에는 ⌘F 가 없다. 헤더는 셸마다 따로 짜도 이 부품은 다 쓰니 여기 단다.
+  const mobile = useIsMobile();
   return (
     <div className="flex items-center">
+      {mobile ? (
+        <HistoryButton
+          label={t("detailPage.mobile.find")}
+          onClick={openFindReplace}
+          disabled={false}
+        >
+          <Search size={17} />
+        </HistoryButton>
+      ) : null}
       <HistoryButton
         label={t("editor.undo")}
         onClick={() => safeUndo(s)}

package/components/detail-page/find-replace-panel.tsx

@@ -46,6 +46,12 @@ export function revealMatch(store: PanelStore, match: TextMatch): void {
   store.selectElements?.([match.elementId]);
 }
 
+/** 버튼으로 찾기·바꾸기를 연다 — 폰에는 ⌘F 가 없다. */
+const OPEN_EVENT = "le-find-replace-open";
+export function openFindReplace(): void {
+  document.dispatchEvent(new Event(OPEN_EVENT));
+}
+
 export const FindReplacePanel = observer(function FindReplacePanel({
   store,
 }: {
@@ -79,8 +85,13 @@ export const FindReplacePanel = observer(function FindReplacePanel({
       e.stopPropagation();
       setOpen(true);
     };
+    const onOpen = () => setOpen(true);
     document.addEventListener("keydown", onKey, { capture: true });
-    return () => document.removeEventListener("keydown", onKey, { capture: true });
+    document.addEventListener(OPEN_EVENT, onOpen);
+    return () => {
+      document.removeEventListener("keydown", onKey, { capture: true });
+      document.removeEventListener(OPEN_EVENT, onOpen);
+    };
   }, []);
 
   const step = useCallback(

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

@@ -704,13 +704,14 @@ export function LeviosaCanvasWorkspace({
         onPointerDown={(event) => {
           // 페이지 바깥의 빈 자리를 누르면 선택 해제. 페이지 안은 캔버스가 처리한다.
           const target = event.target as HTMLElement;
-          // 손가락으로 판 위 빈 곳(또는 잠긴 배경)을 누르면 화면을 옮긴다. 캔버스가 먼저
-          // 받아서 요소를 짚었으면 골랐고, 빈 곳이면 선택을 비웠다 — 그걸 보고 가른다.
-          // 판 위의 터치는 브라우저 스크롤을 꺼 뒀다(touch-action) — 요소 끌기와 겹친다.
+          // 손가락으로 판 위를 끌면 화면을 옮긴다 — 캔버스가 먼저 받아서 고른 요소나 손잡이를
+          // 잡았으면 preventDefault 로 표시해 둔다(그때만 요소가 끌린다). 고르기는 캔버스가
+          // 손을 뗄 때 한다. 판 위의 터치는 브라우저 스크롤을 꺼 뒀다(touch-action).
           if (
             event.pointerType === "touch" &&
             target.closest("[data-lc-page]") &&
-            store.selectedElementsIds.length === 0
+            !target.closest("button, a, input, textarea, select, [contenteditable='true']") &&
+            !event.nativeEvent.defaultPrevented
           ) {
             startPan(event);
             return;

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

@@ -26,7 +26,7 @@ import {
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from "react";
-import { Check, Settings2 } from "lucide-react";
+import { Check, ListChecks, Settings2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { SectionTab } from "@leviosa-ai/canvas";
 
@@ -94,6 +94,8 @@ type StoreLike = {
   openedSidePanel: string;
   openSidePanel: (name: string) => void;
   selectElements: (ids: string[]) => void;
+  multiSelect?: boolean;
+  setMultiSelect?: (on: boolean) => void;
 };
 
 const BAR_CLASS =
@@ -247,7 +249,14 @@ const SectionBar = observer(function SectionBar({
 });
 
 /** 뭔가 골랐을 때 — 인스펙터 섹션 탭 띠 + 띠 바로 위에 뜨는 섹션 하나. */
-function InspectorBar({ store, inspector }: { store: unknown; inspector: ReactNode }) {
+const InspectorBar = observer(function InspectorBar({
+  store,
+  inspector,
+}: {
+  store: unknown;
+  inspector: ReactNode;
+}) {
+  const { t } = useTranslation("branding");
   const s = store as StoreLike;
   const hostRef = useRef<HTMLDivElement>(null);
   const [titles, setTitles] = useState<string[]>([]);
@@ -313,6 +322,20 @@ function InspectorBar({ store, inspector }: { store: unknown; inspector: ReactNo
             </button>
           ))}
         </div>
+        {/* 폰에는 시프트가 없다 — 켜 두면 탭할 때마다 선택에 더하거나 뺀다. */}
+        <button
+          type="button"
+          aria-label={t("detailPage.mobile.multiSelect")}
+          title={t("detailPage.mobile.multiSelect")}
+          aria-pressed={!!s.multiSelect}
+          data-le-mobile-multi=""
+          onClick={() => s.setMultiSelect?.(!s.multiSelect)}
+          className={`my-1.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-full ${
+            s.multiSelect ? "bg-le-ink-900 text-le-surface" : "text-le-ink-600"
+          }`}
+        >
+          <ListChecks aria-hidden="true" size={18} />
+        </button>
         <button
           type="button"
           aria-label="done"
@@ -324,7 +347,7 @@ function InspectorBar({ store, inspector }: { store: unknown; inspector: ReactNo
       </div>
     </div>
   );
-}
+});
 
 export const MobileBottomBar = observer(function MobileBottomBar({
   store,
@@ -342,6 +365,8 @@ export const MobileBottomBar = observer(function MobileBottomBar({
   // 숨었다가, ✓ 로 선택을 풀 때 다시 튀어나온다.
   useEffect(() => {
     if (selected && s.openedSidePanel) s.openSidePanel("");
+    // 다 풀었으면 여러 개 고르기도 끝난다 — 다음 탭은 다시 하나만 고른다.
+    if (!selected && s.multiSelect) s.setMultiSelect?.(false);
   }, [selected, s]);
 
   // 아무것도 안 골랐을 때의 인스펙터(화면 배경·높이·복제/삭제)는 데스크톱에서는 늘

package/i18n/en.json

@@ -865,7 +865,13 @@
       "bubbleTail": {
         "handle": "Drag the tail tip to move it (drag inside the body to remove the tail)"
       },
+      "mobile": {
+        "multiSelect": "Select multiple",
+        "find": "Find and replace"
+      },
       "canvasMenu": {
+        "copy": "Copy",
+        "paste": "Paste",
         "duplicate": "Duplicate",
         "lock": "Lock",
         "unlock": "Unlock",

package/i18n/ko.json

@@ -865,7 +865,13 @@
       "bubbleTail": {
         "handle": "꼬리 끝을 끌어 위치를 바꿉니다 (몸통 안으로 끌면 꼬리가 사라집니다)"
       },
+      "mobile": {
+        "multiSelect": "여러 개 선택",
+        "find": "찾기·바꾸기"
+      },
       "canvasMenu": {
+        "copy": "복사",
+        "paste": "붙여넣기",
         "duplicate": "복제",
         "lock": "잠그기",
         "unlock": "잠금 해제",

package/lib/detail-page/canvas-menu.ts

@@ -11,6 +11,10 @@
  *    쓰지 않는다(죽은 코드). 우리 문서는 대부분이 그룹이라 그룹 해제가 꼭 필요하다.
  */
 
+import { copyElements, hasClip, pasteElements } from "@leviosa-ai/canvas/edit/commands";
+import type { CanvasStore } from "@leviosa-ai/canvas/store";
+
+import { markCanvasCopy } from "./canvas-paste";
 import { groupAction } from "./group-action";
 import {
   applyFormat,
@@ -23,6 +27,8 @@ import {
 import { canMoveZ, moveZ, zOrderOf, type ZOrderElement } from "./z-order";
 
 export type CanvasMenuAction =
+  | "copy"
+  | "paste"
   | "duplicate"
   | "delete"
   | "lock"
@@ -83,8 +89,11 @@ export function canvasMenuItems(store: CanvasMenuStore): CanvasMenuItem[] {
   const ungroup = groupAction(store, true);
 
   const items: CanvasMenuItem[] = [
+    // 폰에는 ⌘C·⌘V 가 없다 — 다른 화면으로 옮겨 붙이려면 메뉴에 있어야 한다.
+    { action: "copy", disabled: false },
+    { action: "paste", disabled: !hasClip() },
     // 잠긴 요소를 복제하면 잠긴 사본이 생겨 만질 수도 지울 수도 없다.
-    { action: "duplicate", disabled: anyLocked },
+    { action: "duplicate", disabled: anyLocked, separated: true },
     { action: locked ? "unlock" : "lock", disabled: false },
     { action: "delete", disabled: anyLocked },
     // 서식은 하나에서 떠서 여럿에 먹인다 — 복사는 단일 선택일 때만.
@@ -137,6 +146,14 @@ export function runCanvasMenuAction(
   };
 
   switch (action) {
+    case "copy":
+      copyElements(store as unknown as CanvasStore);
+      // OS 클립보드에도 표식을 남긴다 — 안 남기면 ⌘V 가 옛 OS 내용을 붙인다.
+      markCanvasCopy();
+      return;
+    case "paste":
+      pasteElements(store as unknown as CanvasStore);
+      return;
     case "duplicate":
       // clone()은 항상 요소의 **페이지**에 추가한다(node-model: e.page.addElement).
       // 그룹 자식의 x/y도 페이지 좌표라, 그룹 안 도형을 복제하면 제자리에 사본이

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leviosa-ai/detail-page-editor",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "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.11.0",
+    "@leviosa-ai/canvas": "0.11.1",
     "@tanstack/react-query": "^5.100.3",
     "konva": "^10.0.0",
     "lucide-react": "^0.563.0 || ^1.0.0",