@growgroup/visual-editor 0.9.1 → 0.11.0

package/src/editor/hooks/useDragResize.ts

@@ -18,7 +18,9 @@ import {
   syncSelectionOverlayRects,
   getOverlayRect,
   setOverlayLabel,
+  generateElementId,
 } from '../utils/dom-utils';
+import { rememberDuplicate, forgetDuplicate } from '../utils/smart-duplicate';
 import {
   DRAG_START_THRESHOLD,
   MIN_ELEMENT_SIZE,
@@ -45,6 +47,7 @@ import {
 import {
   collectGuideCandidates,
   snapToGuides,
+  snapResizeEdges,
   drawSmartGuides,
   clearSmartGuides,
   SNAP_THRESHOLD_SCREEN_PX,
@@ -55,6 +58,7 @@ import { computeFreeBounds, keepsInlineGeometry } from '../utils/free-layout';
 import { extractElementInfo } from '../utils/style-utils';
 import { convertInlineStylesToTailwind } from '../utils/tailwind-utils';
 import { isAspectRatioLocked } from '../utils/aspect-lock';
+import { isLockedEl } from '../utils/lock';
 import {
   getFlexContainerInfo,
   calculateDropIndex,
@@ -224,6 +228,13 @@ interface ResizeSnapshot {
   wroteHeight: boolean;
   /** 要素の min / max-width・height。ハンドルでもここで止める(開始時に読む) */
   limits: SizeLimits;
+  /**
+   * リサイズの吸着に使う。style の left/top/width/height(=snapshot の値)と
+   * アートボード座標の枠との差。回転・拡大縮小された要素は枠と style が対応しないので null(吸着しない)
+   */
+  snapFrame: { dx: number; dy: number; dw: number; dh: number } | null;
+  /** 吸着の相手(兄弟の端・中央、紙面の端・中央、定規のガイド)。リサイズ開始時に 1 回だけ集める */
+  snapCandidates: GuideCandidates | null;
 }
 
 /**
@@ -237,6 +248,17 @@ interface ResizeSnapshot {
 const RESIZE_INERT_CLASS = 'resize-inert';
 const RESIZE_INERT_ATTR = 'data-resize-inert';
 
+/**
+ * iframe が外側(キャンバス表示の拡縮)で何倍に表示されているか。1 枚表示では 1。
+ * 中のアートボードの倍率(getDragScale)とは別で、画面の px に直すには両方を掛ける
+ */
+function iframeOuterScale(iframeDoc: Document): number {
+  const frame = iframeDoc.defaultView?.frameElement as HTMLElement | null | undefined;
+  if (!frame || !frame.offsetWidth) return 1;
+  const shown = frame.getBoundingClientRect().width / frame.offsetWidth;
+  return shown > 0 && Number.isFinite(shown) ? shown : 1;
+}
+
 /**
  * transform の中の指定した関数だけを差し替える(他の関数は順序を保って残す)
  *
@@ -291,6 +313,39 @@ function normalizeAngle(deg: number): number {
 /** 回転のスナップ角(Shift 押下中) */
 const ROTATION_SNAP_DEG = 15;
 
+/**
+ * Alt(⌥)ドラッグの複製(Figma と同じ)。
+ *
+ * 掴んでいる要素はそのまま動かし続け、**元の位置に複製を置いていく**。
+ * Figma は「複製が動いて元が残る」が、見た目と結果(元の位置と新しい位置に1つずつ)は同じで、
+ * こちらのほうが選択・ドラッグの状態(掴んでいる要素・選択枠・スナップの基準)を一切
+ * 差し替えずに済む。複製は掴んでいる要素の直前(1つ背面)に入れるので、動いている側が手前に見える。
+ *
+ * 部品のインスタンス(data-component-instance)を含む要素は複製しない。
+ * インスタンスの登録を伴う複製は ⌘D(duplicateElement)の経路にしか無く、
+ * DOM だけ写すと同じインスタンスIDを持つ要素が2つできてしまうため。
+ */
+function createAltDuplicates(
+  targets: { element: HTMLElement; origin: { left: number; top: number } }[],
+): HTMLElement[] {
+  const clones: HTMLElement[] = [];
+  for (const { element, origin } of targets) {
+    if (!element.parentElement) continue;
+    if (element.matches('[data-component-instance]') || element.querySelector('[data-component-instance]')) continue;
+    const clone = element.cloneNode(true) as HTMLElement;
+    clone.querySelectorAll('.selection-box').forEach((box) => box.remove());
+    [clone, ...Array.from(clone.querySelectorAll<HTMLElement>('[data-element-id]'))].forEach((node) => {
+      if (node.hasAttribute('data-element-id')) node.setAttribute('data-element-id', generateElementId('dup'));
+    });
+    clone.classList.remove('selected', 'dragging', 'hover-preview', 'text-editable-hover', 'marquee-hover');
+    clone.style.left = `${roundPx(origin.left)}px`;
+    clone.style.top = `${roundPx(origin.top)}px`;
+    element.parentElement.insertBefore(clone, element);
+    clones.push(clone);
+  }
+  return clones;
+}
+
 /**
  * ドラッグ・リサイズ処理フック
  */
@@ -337,6 +392,8 @@ export function useDragResize(
   // ここを立てずに素通りさせると convertDragTargetsToAbsolute が走って版面が崩れ、
   // さらに mouseup が「動いた」と見なして履歴を1段積んでしまう
   const dragBlockedRef = useRef(false);
+  // Alt(⌥)ドラッグで元の位置に置いた複製。Alt を離すと消し、Esc の取り消しでも消す
+  const altClonesRef = useRef<HTMLElement[] | null>(null);
   // 案内はセッション中1回だけ。ドラッグのたびに帯が出ると操作の邪魔になる
   const reorderHintShownRef = useRef(false);
 
@@ -391,6 +448,8 @@ export function useDragResize(
     reorderIndexRef.current = -1;
     dragBlockedRef.current = false;
     freeBoundsRef.current = null;
+    // 複製は確定済み(DOM に残す)。参照だけ手放す
+    altClonesRef.current = null;
   }, [dragStateRef]);
 
   /**
@@ -575,6 +634,8 @@ export function useDragResize(
       resizeState.elements.forEach((el, index) => {
         const orig = resizeState.origElementStates[index];
         if (!orig) return;
+        // ロック中(本人か祖先)は一緒に選ばれていても大きさを変えない
+        if (isLockedEl(el)) return;
 
         // 相対位置を維持して座標変換
         const relativeLeft = orig.left - bounds.left;
@@ -639,8 +700,31 @@ export function useDragResize(
 
       const size = measureStyleSize(element, iframeDoc);
 
+      // 吸着用: style の値とアートボード上の枠の差(padding・border の分と、親の位置)。
+      // 反転(scaleX(-1))は枠が変わらないので許し、回転・拡大縮小は対応が崩れるので吸着しない
+      let snapFrame: ResizeSnapshot['snapFrame'] = null;
+      const transform = win?.getComputedStyle(element).transform || 'none';
+      const m = transform.match(/^matrix\(([^)]+)\)$/);
+      const parts = m ? m[1].split(',').map(Number) : null;
+      const plainTransform =
+        transform === 'none' ||
+        (!!parts &&
+          Math.abs(Math.abs(parts[0]) - 1) < 1e-3 && Math.abs(parts[1]) < 1e-3 &&
+          Math.abs(parts[2]) < 1e-3 && Math.abs(Math.abs(parts[3]) - 1) < 1e-3);
+      if (plainTransform) {
+        const frame = getOverlayRect(iframeDoc, element);
+        snapFrame = {
+          dx: frame.left - origin.left,
+          dy: frame.top - origin.top,
+          dw: frame.width - size.width,
+          dh: frame.height - size.height,
+        };
+      }
+
       return {
         element,
+        snapFrame,
+        snapCandidates: collectGuideCandidates(iframeDoc, [element]),
         left: origin.left,
         top: origin.top,
         width: size.width,
@@ -756,6 +840,64 @@ export function useDragResize(
     [markResizeInert]
   );
 
+  /**
+   * リサイズの吸着。補正した移動量と、揃った線を返す(吸着しないときは null)
+   *
+   * Shift(縦横比固定)では主に動いている軸だけを吸着させ、もう片方は比から出す。
+   * 角のハンドルでは、従う軸の移動量を 0 にして computeResizeGeometry に渡し直すことで、
+   * 補正のあとも同じ軸が主になるようにする(補正で主の軸が入れ替わると線から外れるため)。
+   */
+  const snapResize = useCallback(
+    (
+      iframeDoc: Document,
+      snapshot: ResizeSnapshot,
+      handle: string,
+      deltaX: number,
+      deltaY: number,
+      next: { left: number; top: number; width: number; height: number },
+      mods: { shiftKey: boolean; altKey: boolean; ctrlKey?: boolean; metaKey?: boolean }
+    ): { deltaX: number; deltaY: number; guideX: number | null; guideY: number | null } | null => {
+      if (mods.ctrlKey || mods.metaKey) return null;
+      const frame = snapshot.snapFrame;
+      const candidates = snapshot.snapCandidates;
+      if (!frame || !candidates) return null;
+      const dir = handleDirection(handle);
+      if (dir.x === 0 && dir.y === 0) return null;
+      // 流れの中にいる要素は left/top を書けない。左・上の辺と中心からの拡大は動かないので吸着しない
+      const canMove = snapshot.canWritePosition;
+      let axes = {
+        x: dir.x !== 0 && (canMove || (dir.x > 0 && !mods.altKey)),
+        y: dir.y !== 0 && (canMove || (dir.y > 0 && !mods.altKey)),
+      };
+      let dX = deltaX;
+      let dY = deltaY;
+      if (mods.shiftKey && snapshot.width > 0 && snapshot.height > 0) {
+        if (dir.x !== 0 && dir.y !== 0) {
+          // computeResizeGeometry と同じ規則で主の軸を決める
+          const xMain = Math.abs(dir.x * deltaX) * snapshot.height >= Math.abs(dir.y * deltaY) * snapshot.width;
+          axes = { x: xMain && axes.x, y: !xMain && axes.y };
+          if (xMain) dY = 0;
+          else dX = 0;
+        } else {
+          axes = { x: dir.x !== 0 && axes.x, y: dir.y !== 0 && axes.y };
+        }
+      }
+      if (!axes.x && !axes.y) return null;
+      const scale = getDragScale(iframeDoc);
+      const threshold = SNAP_THRESHOLD_SCREEN_PX / ((scale || 1) * iframeOuterScale(iframeDoc));
+      const rect = {
+        left: next.left + frame.dx,
+        top: next.top + frame.dy,
+        width: next.width + frame.dw,
+        height: next.height + frame.dh,
+      };
+      const s = snapResizeEdges(candidates, rect, dir, { alt: mods.altKey, axes }, threshold);
+      if (s.guideX === null && s.guideY === null) return null;
+      return { deltaX: dX + s.dx, deltaY: dY + s.dy, guideX: s.guideX, guideY: s.guideY };
+    },
+    [getDragScale]
+  );
+
   /**
    * 単一要素のリサイズ処理
    *
@@ -770,7 +912,7 @@ export function useDragResize(
       iframeDoc: Document,
       deltaX: number,
       deltaY: number,
-      mods: { shiftKey: boolean; altKey: boolean }
+      mods: { shiftKey: boolean; altKey: boolean; ctrlKey?: boolean; metaKey?: boolean }
     ): boolean => {
       const resizeState = resizeStateRef.current;
       if (!resizeState.element) return false;
@@ -798,18 +940,32 @@ export function useDragResize(
         resizeSnapshotRef.current = snapshot;
       }
 
-      const next = computeResizeGeometry(
-        {
-          left: snapshot.left,
-          top: snapshot.top,
-          width: snapshot.width,
-          height: snapshot.height,
-        },
-        handle,
-        deltaX,
-        deltaY,
-        { shiftKey: mods.shiftKey, altKey: mods.altKey, limits: snapshot.limits }
-      );
+      const origRect = {
+        left: snapshot.left,
+        top: snapshot.top,
+        width: snapshot.width,
+        height: snapshot.height,
+      };
+      const geometryMods = { shiftKey: mods.shiftKey, altKey: mods.altKey, limits: snapshot.limits };
+      let next = computeResizeGeometry(origRect, handle, deltaX, deltaY, geometryMods);
+
+      // ── 吸着(移動と同じく画面上 4px。⌘/Ctrl を押している間は吸着しない) ──
+      const snapped = snapResize(iframeDoc, snapshot, handle, deltaX, deltaY, next, mods);
+      if (snapped) {
+        next = computeResizeGeometry(origRect, handle, snapped.deltaX, snapped.deltaY, geometryMods);
+        // 最小・最大サイズで止まったなどで辺が線に届かなかったら、線は出さない
+        const f = snapshot.snapFrame!;
+        const xs = [next.left + f.dx, next.left + f.dx + next.width + f.dw];
+        const ys = [next.top + f.dy, next.top + f.dy + next.height + f.dh];
+        const on = (list: number[], g: number | null) =>
+          g !== null && list.some((v) => Math.abs(v - g) <= 0.5) ? g : null;
+        const gx = on(xs, snapped.guideX);
+        const gy = on(ys, snapped.guideY);
+        if (gx !== null || gy !== null) drawSmartGuides(iframeDoc, gx, gy);
+        else clearSmartGuides(iframeDoc);
+      } else {
+        clearSmartGuides(iframeDoc);
+      }
 
       // 掴んだハンドルが実際に動かす軸だけを書く。
       // （例: e ハンドルで height まで書くと、触っていない高さが inline → Tailwind クラスへ
@@ -847,7 +1003,7 @@ export function useDragResize(
 
       return true;
     },
-    [resizeStateRef, createResizeSnapshot, verifyResizeEffect]
+    [resizeStateRef, createResizeSnapshot, verifyResizeEffect, snapResize]
   );
 
   /**
@@ -876,7 +1032,8 @@ export function useDragResize(
         })
         .filter(
           (v): v is { element: HTMLElement; origin: { left: number; top: number } } =>
-            v !== null
+            // ロック中(本人か祖先)は一緒に選ばれていても動かさない
+            v !== null && !isLockedEl(v.element)
         );
     },
     []
@@ -1032,6 +1189,23 @@ export function useDragResize(
         return true;
       }
 
+      // Alt(⌥)を押している間だけ、元の位置に複製を置く(Figma と同じく途中で押しても離してもよい)。
+      // コンポーネント編集中は部品の構造を変えないので複製しない
+      const wantsCopy = e.altKey && !iframeDoc.body.classList.contains('component-edit-mode');
+      if (wantsCopy && !altClonesRef.current) {
+        const targets = getDragTargets(dragState);
+        altClonesRef.current = createAltDuplicates(targets);
+        // このあとの ⌘D は「元の位置 → 離した位置」のずれで複製を続ける(Figma と同じ)
+        rememberDuplicate(
+          targets.map((t) => t.element.getAttribute('data-element-id') ?? '').filter(Boolean),
+          targets[0]?.origin ?? null,
+        );
+      } else if (!wantsCopy && altClonesRef.current) {
+        altClonesRef.current.forEach((clone) => clone.remove());
+        altClonesRef.current = null;
+        forgetDuplicate();
+      }
+
       // スナップ補正。Cmd/Ctrl を押している間は吸着しない(Figmaと同じ逃げ道)
       let snappedDx = dx;
       let snappedDy = dy;
@@ -1039,7 +1213,8 @@ export function useDragResize(
       const baseRect = dragBaseRectRef.current;
       if (!e.metaKey && !e.ctrlKey && candidates && baseRect) {
         // 吸着距離は「画面上で4px」。ズームで見た目の効きが変わらないよう割り戻す
-        const threshold = SNAP_THRESHOLD_SCREEN_PX / (scale || 1);
+        // キャンバス表示では iframe ごと外から拡縮されるので、その倍率も掛けて「画面の 4px」にする
+        const threshold = SNAP_THRESHOLD_SCREEN_PX / ((scale || 1) * iframeOuterScale(iframeDoc));
         const snap = snapToGuides(
           candidates,
           {
@@ -1060,17 +1235,20 @@ export function useDragResize(
         // 斜めへずれる(拘束が破れる)
         let guideX = snap.guideX;
         let guideY = snap.guideY;
+        let spacing = snap.spacing ?? [];
         if (e.shiftKey) {
           if (dx === 0) {
             snappedDx = 0;
             guideX = null;
+            spacing = spacing.filter((m) => m.axis !== 'x');
           }
           if (dy === 0) {
             snappedDy = 0;
             guideY = null;
+            spacing = spacing.filter((m) => m.axis !== 'y');
           }
         }
-        drawSmartGuides(iframeDoc, guideX, guideY);
+        drawSmartGuides(iframeDoc, guideX, guideY, spacing);
       } else {
         clearSmartGuides(iframeDoc);
       }
@@ -1124,6 +1302,11 @@ export function useDragResize(
       const doc = iframeDoc ?? dragState.element.ownerDocument;
       if (!doc) return false;
 
+      // Alt ドラッグの複製は取り消しでは残さない
+      if (altClonesRef.current) forgetDuplicate();
+      altClonesRef.current?.forEach((clone) => clone.remove());
+      altClonesRef.current = null;
+
       // 並べ替え中の取り消し: DOMの順番はまだ変えていないので、
       // 持ち上げの見た目と線を戻すだけで元の状態に戻る
       if (reorderRef.current) {
@@ -1194,6 +1377,9 @@ export function useDragResize(
         const mods = {
           shiftKey: e.shiftKey || isAspectRatioLocked(),
           altKey: e.altKey,
+          // 押している間は吸着しない(移動と同じ)
+          ctrlKey: e.ctrlKey,
+          metaKey: e.metaKey,
         };
 
         // Scale Toolによるリサイズ
@@ -1260,6 +1446,8 @@ export function useDragResize(
 
       // リサイズ終了
       if (resizeState.isResizing && resizeState.element) {
+        // 吸着の赤い線は #artboard の中にある。保存する HTML に入れないよう先に消す
+        clearSmartGuides(iframeDoc);
         // インラインスタイルをTailwindクラスに変換
         // リサイズ中はパフォーマンスのためインラインスタイルを使用し、
         // 終了時にTailwindクラスに変換する

package/src/editor/hooks/useElementActions.ts

@@ -34,6 +34,8 @@ import {
 import type { SerializedElement, BoundingBox, StyleClipboard, ClipboardData } from '../types';
 import type { globalLastUsedStylesRef } from '../contexts/EditorRefsContext';
 import { debugLog } from '../utils/debug';
+import { readPosition, rememberDuplicate, repeatOffsetFor } from '../utils/smart-duplicate';
+import { withoutLocked } from '../utils/lock';
 
 /**
  * 要素の種類を判定（shape / text / line）
@@ -111,8 +113,6 @@ function translateOutOfFlowElement(view: Window, el: HTMLElement, dx: number, dy
   return true;
 }
 
-/** 複製時にずらす量(px) */
-const DUPLICATE_OFFSET = 20;
 
 /**
  * 複製した要素を「元要素の見た目の位置 + offset」に置く。
@@ -153,12 +153,32 @@ function offsetDuplicate(
   }
 }
 
+/** 器として扱わない要素(文字・画像・図形など、子を持たせても意味をなさない) */
+const NON_CONTAINER_TAGS = new Set([
+  'P', 'SPAN', 'A', 'BUTTON', 'IMG', 'SVG', 'VIDEO', 'CANVAS', 'IFRAME', 'INPUT', 'TEXTAREA', 'SELECT',
+  'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'LABEL', 'STRONG', 'EM', 'B', 'I', 'U', 'BR', 'HR', 'TABLE', 'TR', 'TD', 'TH',
+  'UL', 'OL', 'LI',
+]);
+
+/**
+ * 貼り付けの器になれるか(Figma のフレーム / グループにあたるか)。
+ * 位置指定のある箱で、文字を直に持たない要素。position:static の箱に絶対配置の子を入れると、
+ * 子の座標が別の祖先基準になって飛ぶので器にしない
+ */
+function isPasteContainer(el: HTMLElement): boolean {
+  if (NON_CONTAINER_TAGS.has(el.tagName.toUpperCase())) return false;
+  if (el.hasAttribute('data-component-instance')) return false;
+  const view = el.ownerDocument.defaultView;
+  if (!view || view.getComputedStyle(el).position === 'static') return false;
+  return !Array.from(el.childNodes).some((n) => n.nodeType === 3 && (n.textContent ?? '').trim());
+}
+
 /** 矢印キー移動の結果。呼び出し側が「なぜ動かないか」を提示できるようにする */
 export interface MoveElementResult {
   /** 実際に動かした要素数 */
   moved: number;
   /** 動かせなかった理由。null なら成功 */
-  blocked: null | 'no-selection' | 'flow';
+  blocked: null | 'no-selection' | 'flow' | 'locked';
 }
 
 /**
@@ -754,17 +774,22 @@ export function useElementActions() {
     if (selectedElementIds.length > 0) {
       const newIds: string[] = [];
       const newElements: HTMLElement[] = [];
+      // Figma と同じく真上に複製。直前の複製を動かしてから押したときは同じずれを繰り返す
+      const firstSource = getIframeElement(iframeDoc, selectedElementIds[0]);
+      const { dx, dy } = repeatOffsetFor(selectedElementIds, firstSource);
+      const firstFrom = firstSource ? readPosition(firstSource) : null;
       selectedElementIds.forEach(id => {
         const el = getIframeElement(iframeDoc, id);
         if (el) {
           const { clone, newId } = cloneElementWithInstance(el);
           // 位置指定は「DOMに入れてから」元要素の実測位置を基準に行う（後述の理由）
           el.parentNode?.insertBefore(clone, el.nextSibling);
-          offsetDuplicate(iframeDoc, el, clone, DUPLICATE_OFFSET, DUPLICATE_OFFSET);
+          offsetDuplicate(iframeDoc, el, clone, dx, dy);
           newIds.push(newId);
           newElements.push(clone);
         }
       });
+      rememberDuplicate(newIds, firstFrom);
 
       // 新しい要素を選択
       setSelectedElementIds(newIds);
@@ -785,9 +810,12 @@ export function useElementActions() {
     if (!selectedElement) return;
     const el = getIframeElement(iframeDoc, selectedElement.id);
     if (el) {
+      const { dx, dy } = repeatOffsetFor([selectedElement.id], el);
+      const from = readPosition(el);
       const { clone, newId } = cloneElementWithInstance(el);
       el.parentNode?.insertBefore(clone, el.nextSibling);
-      offsetDuplicate(iframeDoc, el, clone, DUPLICATE_OFFSET, DUPLICATE_OFFSET);
+      offsetDuplicate(iframeDoc, el, clone, dx, dy);
+      rememberDuplicate([newId], from);
 
       // 新しい要素を選択
       clone.classList.add('selected');
@@ -808,6 +836,7 @@ export function useElementActions() {
         attributes[attr.name] = attr.value;
       }
     }
+    const pos = readPosition(el);
     return {
       tagName: el.tagName.toLowerCase(),
       id: el.getAttribute('data-element-id') || '',
@@ -815,6 +844,7 @@ export function useElementActions() {
       style: el.getAttribute('style') || '',
       innerHTML: el.innerHTML,
       attributes,
+      ...(pos ? { box: { ...pos, width: el.offsetWidth, height: el.offsetHeight } } : {}),
     };
   }, []);
 
@@ -890,7 +920,7 @@ export function useElementActions() {
       if (serialized.length > 0) {
         clipboardRef.current = {
           elements: serialized,
-          offset: { x: 10, y: 10 },
+          offset: { x: 0, y: 0 },
         };
         writeToOsClipboard(clipboardRef.current);
       }
@@ -904,7 +934,7 @@ export function useElementActions() {
 
     clipboardRef.current = {
       elements: [serializeElement(el)],
-      offset: { x: 10, y: 10 },
+      offset: { x: 0, y: 0 },
     };
     writeToOsClipboard(clipboardRef.current);
   }, [selectedElement, selectedElementIds, getIframeDoc, serializeElement, clipboardRef, writeToOsClipboard]);
@@ -920,38 +950,58 @@ export function useElementActions() {
    * 内部クリップボード(同一エディタ内)と、OSクリップボード経由
    * (スライド跨ぎ。pasteイベントがペイロードを取り出して渡す)の両方から使う。
    */
-  const pasteSerializedElements = useCallback((list: SerializedElement[], offset?: { x: number; y: number }) => {
+  const pasteSerializedElements = useCallback((list: SerializedElement[]) => {
     const iframeDoc = getIframeDoc();
     if (!iframeDoc || list.length === 0) return;
-    const off = offset ?? { x: 10, y: 10 };
+
+    // 貼り付け先(Figma「Copy and paste objects」の Paste placement と同じ考え方):
+    // - 器(子を持てる要素)を選んでいれば、その中へ。元の器の中と同じ x / y に置き、入りきらない軸は中央
+    // - 器でない要素を選んでいれば、その要素の親へ(その要素のすぐ手前=1つ前面)
+    // - 何も選んでいなければスライドのルートへ
+    // どの場合も「ずらさない」。同じスライドで元が見えていても、元の真上に重なる(Figma と同じ)
+    const selected = selectedElement ? getIframeElement(iframeDoc, selectedElement.id) : null;
+    const sourceIds = new Set(list.map((item) => item.id));
+    const isSelfPaste = !!selected && sourceIds.has(selected.getAttribute('data-element-id') || '');
+    // 選んだ器の中へ入れるのは、スライド(絶対配置)で、貼る要素がすべて位置(box)を持つときだけ。
+    // webpage は流し込みを保つ約束なので従来どおり選択の直後に入れる。box の無いフローの要素も同じ
+    const canNest = editorMode !== 'webpage' && list.every((item) => !!item.box);
+    const container = canNest && selected && !isSelfPaste && isPasteContainer(selected) ? selected : null;
+    let insertAfterElement: HTMLElement | null = container ? null : selected;
 
     // 既存の選択ボックスをクリア
     iframeDoc.querySelectorAll('.selection-box').forEach(box => box.remove());
     iframeDoc.querySelectorAll('.selected').forEach(el => el.classList.remove('selected'));
 
-    // 挿入先を決定: 選択要素がある場合はその直後、なければbodyの末尾
-    let insertAfterElement: HTMLElement | null = null;
-    if (selectedElement) {
-      insertAfterElement = getIframeElement(iframeDoc, selectedElement.id);
-    }
-
     const pastedIds: string[] = [];
     const pastedElements: HTMLElement[] = [];
 
     list.forEach(serialized => {
       const el = deserializeElement(serialized);
       if (!el) return;
-      
+
+      // ルートだけでなく中の要素の ID も作り直す(元と同じ ID が2つできると選択・履歴が混線する)
       const newId = generateElementId('paste');
       el.setAttribute('data-element-id', newId);
-      const left = parseInt(el.style.left || '0') || 0;
-      const top = parseInt(el.style.top || '0') || 0;
-      el.style.left = `${left + off.x}px`;
-      el.style.top = `${top + off.y}px`;
-      
-      // 挿入先に応じて挿入
-      if (insertAfterElement && insertAfterElement.parentNode) {
-        // 選択要素の直後に挿入
+      el.querySelectorAll('[data-element-id]').forEach((child) => {
+        child.setAttribute('data-element-id', generateElementId('paste'));
+      });
+      el.classList.remove('selected', 'hover-preview', 'text-editable-hover', 'marquee-hover', 'dragging');
+      el.removeAttribute('data-layer-hover');
+
+      if (container) {
+        container.appendChild(el);
+        // 元の器の中と同じ x / y。入りきらない軸は器の中央(Figma と同じ)
+        const box = serialized.box;
+        if (box) {
+          const cw = container.clientWidth;
+          const ch = container.clientHeight;
+          const fitsX = box.left >= 0 && box.left + box.width <= cw;
+          const fitsY = box.top >= 0 && box.top + box.height <= ch;
+          el.style.left = `${Math.round(fitsX ? box.left : (cw - box.width) / 2)}px`;
+          el.style.top = `${Math.round(fitsY ? box.top : (ch - box.height) / 2)}px`;
+        }
+      } else if (insertAfterElement && insertAfterElement.parentNode) {
+        // 選択要素の直後(1つ前面)に。位置はコピーしたときのまま
         insertAfterElement.parentNode.insertBefore(el, insertAfterElement.nextSibling);
         // 次のペースト要素のために更新
         insertAfterElement = el;
@@ -963,13 +1013,13 @@ export function useElementActions() {
           iframeDoc.body;
         root.appendChild(el);
       }
-      
+
       pastedIds.push(newId);
       pastedElements.push(el);
     });
 
     notifyIframeChange();
-    
+
     // ペーストした要素を選択し、選択ボックスを更新
     if (pastedIds.length > 0) {
       setSelectedElementIds(pastedIds);
@@ -983,15 +1033,43 @@ export function useElementActions() {
         if (info) setSelectedElement(info);
       }
     }
-  }, [getIframeDoc, deserializeElement, notifyIframeChange, selectedElement, setSelectedElementIds, setSelectedElement]);
+  }, [getIframeDoc, deserializeElement, notifyIframeChange, selectedElement, setSelectedElementIds, setSelectedElement, editorMode]);
 
   // 内部クリップボードからのペースト(pasteイベント側のフォールバック用)
   const pasteElements = useCallback(() => {
     const clip = clipboardRef.current;
     if (!clip) return;
-    pasteSerializedElements(clip.elements, clip.offset);
-    clip.offset.x += 10;
-    clip.offset.y += 10;
+    // Figma と同じく何度貼ってもずらさない
+    pasteSerializedElements(clip.elements);
+  }, [clipboardRef, pasteSerializedElements]);
+
+  /**
+   * ⌘⇧V(Figma の Paste over selection / その場に貼る)。
+   * ⌘V も同じ位置に貼るので動きは同じ。⌘⇧V はブラウザが paste イベントを出さないことがあるため、
+   * OS のクリップボードを直接読み、読めなければ(権限が無い等)このエディタの内部クリップボードを使う
+   */
+  const pasteInPlace = useCallback(async () => {
+    try {
+      const items = await navigator.clipboard.read();
+      for (const item of items) {
+        if (!item.types.includes('text/html')) continue;
+        const html = await (await item.getType('text/html')).text();
+        const payload = html.match(/data-gg-payload="([^"]+)"/);
+        if (payload) {
+          pasteSerializedElements(JSON.parse(decodeURIComponent(escape(atob(payload[1])))));
+          return;
+        }
+      }
+      // 読めたのに要素の印が無い = 後から別のもの(文字・画像など)をコピーした。
+      // 内部に残っている古い要素は貼らない(何もしない)
+      return;
+    } catch {
+      // 権限が無い・未対応のブラウザ。下で内部クリップボードを見る
+    }
+    // 読めなかったときだけ内部クリップボードへ。それも通常の ⌘V(pasteFromInternalIfFresh)と同じく、
+    // OS への書き込みが成功していた(= OS 側に新しいものがあるかもしれない)なら貼らない
+    const clip = clipboardRef.current;
+    if (clip && !clip.osWritten) pasteSerializedElements(clip.elements);
   }, [clipboardRef, pasteSerializedElements]);
 
   /**
@@ -1394,10 +1472,13 @@ export function useElementActions() {
         : [];
     if (ids.length === 0) return { moved: 0, blocked: 'no-selection' };
 
-    const elements = ids
+    const found = ids
       .map(id => getIframeElement(iframeDoc, id))
       .filter((el): el is HTMLElement => el !== null);
-    if (elements.length === 0) return { moved: 0, blocked: 'no-selection' };
+    if (found.length === 0) return { moved: 0, blocked: 'no-selection' };
+    // ロック中(本人か祖先)は矢印キーでも動かさない・大きさも変えない(Figma と同じ。記憶)
+    const elements = withoutLocked(found);
+    if (elements.length === 0) return { moved: 0, blocked: 'locked' };
 
     // webpage はフロー内の要素を倒さない。矢印キーは並べ替えを1段動かす
     if (editorMode === 'webpage') {
@@ -1458,10 +1539,13 @@ export function useElementActions() {
       : selectedElement
         ? [selectedElement.id]
         : [];
-    const elements = ids
+    const found = ids
       .map(id => getIframeElement(iframeDoc, id))
       .filter((el): el is HTMLElement => el !== null);
-    if (elements.length === 0) return { moved: 0, blocked: 'no-selection' };
+    if (found.length === 0) return { moved: 0, blocked: 'no-selection' };
+    // ロック中(本人か祖先)は矢印キーでも動かさない・大きさも変えない(Figma と同じ。記憶)
+    const elements = withoutLocked(found);
+    if (elements.length === 0) return { moved: 0, blocked: 'locked' };
 
     // フロー内の要素は移動と同じ遅延変換で絶対配置へ倒してから触る
     elements.forEach(el => {
@@ -1824,6 +1908,7 @@ export function useElementActions() {
     pasteElements,
     pasteSerializedElements,
     pasteFromInternalIfFresh,
+    pasteInPlace,
     copyStyle,
     pasteStyle,
     hasStyleInClipboard,