@growgroup/visual-editor 0.1.4 → 0.1.6

package/src/editor/hooks/useDragResize.ts

@@ -31,6 +31,8 @@ import {
 } from '../utils/geometry';
 import {
   shouldReorder,
+  planSlideReorder,
+  resolveWebpageDrag,
   startReorder,
   computeInsertIndex,
   drawInsertIndicator,
@@ -290,7 +292,7 @@ const ROTATION_SNAP_DEG = 15;
 export function useDragResize(
   options: UseDragResizeOptions
 ): UseDragResizeReturn {
-  const { setShowLayoutHint, zoom } = useEditorContext();
+  const { setShowLayoutHint, zoom, editorMode } = useEditorContext();
 
   const {
     dragStateRef,
@@ -326,11 +328,26 @@ export function useDragResize(
   const reorderRef = useRef<ReorderSession | null>(null);
   const reorderIndexRef = useRef<number>(-1);
 
+  // 「並べ替えたいが相手がいない」ドラッグ。座標も DOM も一切書かずに空振りさせる。
+  // ここを立てずに素通りさせると convertDragTargetsToAbsolute が走って版面が崩れ、
+  // さらに mouseup が「動いた」と見なして履歴を1段積んでしまう
+  const dragBlockedRef = useRef(false);
+  // 案内はセッション中1回だけ。ドラッグのたびに帯が出ると操作の邪魔になる
+  const reorderHintShownRef = useRef(false);
+
+  // editorMode も zoom と同じ理由で ref に写す。
+  // iframe に張ったリスナーのクロージャは古い値を掴んだままになるため
+  const editorModeRef = useRef(editorMode);
+
   // zoomが変更されたらrefを更新
   useEffect(() => {
     zoomRef.current = zoom;
   }, [zoom]);
 
+  useEffect(() => {
+    editorModeRef.current = editorMode;
+  }, [editorMode]);
+
   // 最新のsetShowLayoutHintをrefに同期
   useEffect(() => {
     setShowLayoutHintRef.current = setShowLayoutHint;
@@ -360,6 +377,7 @@ export function useDragResize(
     dragBaseRectRef.current = null;
     reorderRef.current = null;
     reorderIndexRef.current = -1;
+    dragBlockedRef.current = false;
   }, [dragStateRef]);
 
   /**
@@ -556,9 +574,15 @@ export function useDragResize(
 
         // 位置を書けるのは「フローから外れている要素」だけ。
         // 絶対配置モードなら従来通り static → absolute へ倒して位置を持たせる。
+        //
+        // [webpage は倒さない] webpage は流し込みを保つ約束(README)。ここで倒すと
+        // 要素が流れから抜けて後続が詰め上がり、ページ高さが変わって紙面が飛ぶ。
+        // 大きさを変えるのに position は要らないので width/height だけ書く。
         const position = win?.getComputedStyle(el).position;
         const outOfFlow = isOutOfFlowPosition(position);
-        const canWritePosition = outOfFlow || layoutModeRef.current === 'absolute';
+        const canWritePosition =
+          outOfFlow ||
+          (layoutModeRef.current === 'absolute' && editorModeRef.current !== 'webpage');
 
         if (canWritePosition) {
           // すでにフロー外なら position は触らない（fixed を absolute に落とさない）
@@ -908,24 +932,50 @@ export function useDragResize(
         const targets = getDragTargets(dragState);
         const movingElements = targets.map((t) => t.element);
         const componentEdit = iframeDoc.body.classList.contains('component-edit-mode');
+        const isWebpage = editorModeRef.current === 'webpage';
 
         // Cmd/Ctrl は「並べ替えから抜けて自由に動かす」逃げ道。
         // スナップの無効化と同じキーに揃える(押している間は座標がそのまま通る)
         const wantsFreeMove = e.metaKey || e.ctrlKey;
 
-        if (
+        if (isWebpage) {
+          // ── webpage ──
+          // フロー内の要素を絶対配置へ倒すと、カラムが流れから抜けてページ高さが
+          // 潰れ、artboard が縮んで紙面が中央寄せで飛ぶ(実測 2424→679px)。
+          // README の設計原則どおり倒さず、同一親の並べ替えだけで動かす。
+          if (!componentEdit && !wantsFreeMove) {
+            const decision = resolveWebpageDrag(movingElements, iframeDoc);
+            if (decision.kind === 'reorder') {
+              reorderRef.current = startReorder(decision.plan, iframeDoc, {
+                restoreFlow: false,
+              });
+              reorderIndexRef.current = -1;
+            } else if (decision.kind !== 'free') {
+              // 並べ替える相手がいない/群がバラバラ。倒さず、動かさず、案内だけ出す
+              dragBlockedRef.current = true;
+              if (!reorderHintShownRef.current) {
+                reorderHintShownRef.current = true;
+                setShowLayoutHintRef.current(true);
+              }
+            }
+          }
+        } else if (
           !componentEdit &&
           !wantsFreeMove &&
           dragState.element &&
           shouldReorder(dragState.element, iframeDoc, movingElements.length)
         ) {
+          // ── slide ──
           // 並べ替え: 絶対配置へ倒さない。倒した瞬間にフレックスの設定が
           // 効かなくなり、右パネルのレイアウト指定が無意味になる
-          reorderRef.current = startReorder(dragState.element, iframeDoc);
-          reorderIndexRef.current = -1;
+          const plan = planSlideReorder(dragState.element, iframeDoc);
+          if (plan) {
+            reorderRef.current = startReorder(plan, iframeDoc, { restoreFlow: true });
+            reorderIndexRef.current = -1;
+          }
         }
 
-        if (!reorderRef.current) {
+        if (!reorderRef.current && !dragBlockedRef.current) {
           // in-flow の要素はここで初めて絶対配置へ変換する。
           // mousedown 時に変換すると、選んだだけで後続の兄弟が詰め上がって版面が動く。
           // コンポーネント編集中は変換しない(部品本来の並びを保つため)
@@ -941,6 +991,14 @@ export function useDragResize(
         }
       }
 
+      // ── 空振りモード ──
+      // 「並べ替えたいが相手がいない」ドラッグ。座標も DOM も書かない。
+      // hasMoved を立てないことが肝で、立てると mouseup が Tailwind 変換と
+      // SLIDE_CONTENT_CHANGED を走らせ、何も変えていないのに履歴が1段積まれる
+      if (dragBlockedRef.current) {
+        return true;
+      }
+
       dragState.hasMoved = true;
 
       // ── 並べ替えモード ──
@@ -1051,6 +1109,16 @@ export function useDragResize(
         return true;
       }
 
+      // 空振り中の取り消し: 座標も DOM も書いていないので戻すものが無い
+      if (dragBlockedRef.current) {
+        getDragTargets(dragState).forEach(({ element }) =>
+          element.classList.remove('dragging'),
+        );
+        resetDragState();
+        refreshSelectionOverlay(doc);
+        return true;
+      }
+
       if (autoLayoutDragStateRef.current) {
         // ゴースト並べ替え中：DOMの並びは変えずにゴーストだけ畳む
         cancelAutoLayoutDrag(autoLayoutDragStateRef.current, doc);
@@ -1222,6 +1290,18 @@ export function useDragResize(
         clearSmartGuides(iframeDoc);
         setOverlayLabel(null);
 
+        // ── 空振りの後始末 ──
+        // 何も書いていないので履歴も送らない。掴んだ見た目だけ戻す
+        if (dragBlockedRef.current) {
+          getDragTargets(dragState).forEach(({ element }) =>
+            element.classList.remove('dragging'),
+          );
+          refreshSelectionOverlay(iframeDoc);
+          sendElementInfo(dragState.element, iframeDoc);
+          resetDragState();
+          return true;
+        }
+
         // ── 並べ替えの確定 ──
         // 座標(left/top)は書いていないので Tailwind への変換は通さない。
         // 変わったのは DOM の順番だけで、それは innerHTML にそのまま出る

package/src/editor/hooks/useDrawingMode.ts

@@ -6,7 +6,7 @@
 
 import { useEffect } from 'react';
 import { useEditorContext } from '../EditorContext';
-import { generateElementId } from '../utils/dom-utils';
+import { generateElementId, lockCaretScroll } from '../utils/dom-utils';
 import { inkStyle } from '../utils/ink-style';
 import { pendingShape, shapeStyles as shapeLibStyles } from '../utils/shape-library';
 
@@ -205,7 +205,9 @@ export function useDrawingMode() {
           artboard.appendChild(textEl);
         }
 
-        textEl.focus();
+        // 置いた場所は見えているので、フォーカスやキャレット追従で紙面を動かさない
+        lockCaretScroll(textEl, iframeDoc);
+        textEl.focus({ preventScroll: true });
         textEl.classList.add('selected', 'editing');
 
         const range = iframeDoc.createRange();

package/src/editor/hooks/useElementActions.ts

@@ -15,6 +15,11 @@ import {
   hasEditableChildren,
   prepareElementDragOrigin,
 } from '../utils/dom-utils';
+import {
+  resolveWebpageDrag,
+  realChildren,
+  applyReorder,
+} from '../utils/flex-reorder';
 import { extractElementInfo } from '../utils/style-utils';
 import { applyTailwindStyles, convertInlineStylesToTailwind } from '../utils/tailwind-utils';
 import { copyElementsToFigma, isFigmaExportAvailable } from '../utils/figma-export';
@@ -152,6 +157,42 @@ export interface MoveElementResult {
   blocked: null | 'no-selection' | 'flow';
 }
 
+/**
+ * webpage モードの矢印キー = 「並べ替えを1段動かす」
+ *
+ * webpage はフロー内の要素を絶対配置へ倒さない(README の設計原則)。
+ * 倒すと版面が固定pxに固まり、後続の要素が詰め上がってページ高さが変わる。
+ * そこで矢印キーは座標ではなく **並び順** を1つ動かす。
+ * ↑/← = ひとつ前へ / ↓/→ = ひとつ後ろへ(Shift 付きでも1段。並びに10段の意味は無い)。
+ *
+ * @returns null なら「並べ替えの対象ではない」= 呼び出し側の座標移動へ落とす
+ */
+function reorderSelectionByStep(
+  elements: HTMLElement[],
+  step: -1 | 1,
+  iframeDoc: Document,
+): MoveElementResult | null {
+  const decision = resolveWebpageDrag(elements, iframeDoc);
+  // すでに絶対配置(Cmd+ドラッグで自由配置にした要素など)は従来どおり座標で動かす
+  if (decision.kind === 'free') return null;
+  // 相手がいない / 群がバラバラ。ドラッグと同じ理由で何もしない
+  if (decision.kind !== 'reorder') return { moved: 0, blocked: 'flow' };
+
+  const { elements: block, parent } = decision.plan;
+  const children = realChildren(parent);
+  const moving = new Set(block);
+  const siblings = children.filter((c) => !moving.has(c));
+  const originalIndex = children.indexOf(block[0]);
+  if (originalIndex < 0) return { moved: 0, blocked: 'flow' };
+
+  const next = originalIndex + step;
+  // 端に着いている。黙って止まるのが正しい(案内は出さない)
+  if (next < 0 || next > siblings.length) return { moved: 0, blocked: null };
+
+  const changed = applyReorder(parent, block, siblings, originalIndex, next);
+  return { moved: changed ? block.length : 0, blocked: null };
+}
+
 /**
  * 最後に使用したスタイルをキャプチャ
  */
@@ -1326,6 +1367,24 @@ export function useElementActions() {
       .filter((el): el is HTMLElement => el !== null);
     if (elements.length === 0) return { moved: 0, blocked: 'no-selection' };
 
+    // webpage はフロー内の要素を倒さない。矢印キーは並べ替えを1段動かす
+    if (editorMode === 'webpage') {
+      const step: -1 | 1 = dx < 0 || dy < 0 ? -1 : 1;
+      const reordered = reorderSelectionByStep(elements, step, iframeDoc);
+      if (reordered) {
+        if (reordered.moved > 0) {
+          notifyIframeChange();
+          refreshSelectionOverlay(iframeDoc);
+          const anchor = selectedElement
+            ? getIframeElement(iframeDoc, selectedElement.id) ?? elements[0]
+            : elements[0];
+          const info = extractElementInfo(anchor, iframeDoc);
+          if (info) setSelectedElement(info);
+        }
+        return reordered;
+      }
+    }
+
     // [モード廃止] フロー内の要素は「動かせない」で終わらせず、その要素だけを
     // 絶対配置へ変換してから動かす(ドラッグと同じ遅延変換)。
     // 以前はここで弾いていたため、矢印キーが無反応になっていた。
@@ -1350,7 +1409,7 @@ export function useElementActions() {
     if (info) setSelectedElement(info);
 
     return { moved: elements.length, blocked: null };
-  }, [selectedElement, selectedElementIds, getIframeDoc, notifyIframeChange, setSelectedElement]);
+  }, [selectedElement, selectedElementIds, getIframeDoc, notifyIframeChange, setSelectedElement, editorMode]);
 
   /**
    * 選択中の全要素の寸法を変える(キーボードリサイズ用)。

package/src/editor/hooks/useElementSelection.ts

@@ -19,6 +19,7 @@ import {
   getArtboardScale,
   refreshSelectionOverlay,
   syncSelectionOverlayRects,
+  lockCaretScroll,
 } from "../utils/dom-utils";
 import { extractElementInfo } from "../utils/style-utils";
 import { MARQUEE_DRAG_THRESHOLD } from "../constants";
@@ -1093,11 +1094,14 @@ export function useElementSelection(
         const rawTarget = e.target as HTMLElement;
         const existingIds = selectedElementIdsRef.current;
 
-        // selection-boxをクリックした場合、対象要素のドラッグを開始
+        // selection-boxをクリックした場合、対象要素のドラッグを開始。
+        // Cmd/Ctrl(最下層を選ぶ)と Shift(追加/解除)は下の判別器に任せる。
+        // 以前は Cmd でもここで掴んでいたため、選択中の器の上で Cmd+クリックしても
+        // 中の要素を選べなかった(Figmaでは選べる)
         const selectionBox = rawTarget.closest(
           ".selection-box",
         ) as HTMLElement | null;
-        if (selectionBox && !e.shiftKey) {
+        if (selectionBox && !e.shiftKey && !e.metaKey && !e.ctrlKey) {
           const forElementId = selectionBox.getAttribute("data-for-element");
           if (forElementId) {
             const targetEl = iframeDoc.querySelector(
@@ -1158,15 +1162,30 @@ export function useElementSelection(
         // ============================================================
 
         // ---- ① ヒットテスト ----
-        const hit = getEditableElement(e.target, iframeDoc);
+        // 選択枠(オーバーレイ)の上で押した場合、e.target は枠なので紙面の要素が分からない。
+        // 枠の下にある要素を elementsFromPoint で拾い、それを押した点として扱う
+        // (Cmd+クリックの最下層選択、Shift+クリックの追加/解除がここを通る)
+        let hitSource: Element | null = rawTarget;
+        if (selectionBox && typeof iframeDoc.elementsFromPoint === "function") {
+          hitSource =
+            iframeDoc
+              .elementsFromPoint(e.clientX, e.clientY)
+              .find(
+                (el) =>
+                  !el.closest(
+                    ".selection-box,.marquee-selection-box,[data-editor-overlay],#gg-smart-guides,#gg-measure-layer",
+                  ),
+              ) ?? null;
+        }
+        const hit = getEditableElement(hitSource, iframeDoc);
         // 空白＝押した点の祖先に編集可能要素がまったく無い状態。
         // #artboard / 紙面と同じ大きさの器 / #artboard-wrapper / #canvas-container は
         // initializeEditableElements が意図的に data-editable を付けないので
         // ここで自然に「空白」と判定される（IDの白リストは不要）。
         const isBlank =
           !hit &&
-          !(typeof rawTarget?.closest === "function"
-            ? rawTarget.closest('[data-editable="true"]')
+          !(hitSource && typeof hitSource.closest === "function"
+            ? hitSource.closest('[data-editable="true"]')
             : null);
 
         // ---- ② 役割決定 ----
@@ -1211,7 +1230,10 @@ export function useElementSelection(
         // 押した点を含む「選択済み要素」。あればそれを掴んだものとして扱う。
         // （コンテキスト解決で祖先へ引き上げると、掴んだ要素と選択済み要素が
         //   食い違って群が壊れる）
-        const selectedHit = findSelectedHit(rawTarget, iframeDoc);
+        const selectedHit = findSelectedHit(
+          (hitSource as HTMLElement | null) ?? rawTarget,
+          iframeDoc,
+        );
 
         let target: HTMLElement;
         if (meta) {
@@ -1370,8 +1392,13 @@ export function useElementSelection(
           .querySelectorAll(".selection-box")
           .forEach((box) => box.remove());
 
-        // フォーカスを設定
-        element.focus();
+        // 紙面が飛ぶのを防ぐ(キャレット追従のスクロールを打ち消す)。
+        // 祖先のスクロール位置は focus の前に覚える必要があるので、フォーカスより先に張る
+        lockCaretScroll(element, iframeDoc);
+
+        // preventScroll: ダブルクリックした場所は既に見えているので、フォーカスでの
+        // スクロールは要らない(あると編集に入った瞬間に紙面が動く)
+        element.focus({ preventScroll: true });
 
         // テキスト全体を選択（オプション）
         const selection = iframeDoc.getSelection();

package/src/editor/hooks/useKeyboardShortcuts.ts

@@ -16,7 +16,7 @@
  */
 
 import { useCallback } from 'react';
-import { refreshSelectionOverlay } from '../utils/dom-utils';
+import { refreshSelectionOverlay, getArtboardContent } from '../utils/dom-utils';
 
 interface UseKeyboardShortcutsOptions {
   /** グループ化関数 */
@@ -186,6 +186,17 @@ export function exitTextEditingIn(iframeDoc: Document): boolean {
 
   // 選択ボックスを再表示（1要素ずつ作り直すと他の枠を巻き込んで壊すため全体を再構築）
   refreshSelectionOverlay(iframeDoc);
+
+  // [確定を履歴に積む]
+  // フォーカスが外れて確定する経路(EditorCanvas の focusout)は、contenteditable が
+  // まだ付いている要素からのイベントでだけ内容変更を通知する。ここは先に属性を
+  // 外すので focusout 経路が黙り、Escape で確定した編集が履歴にも自動保存にも
+  // 乗らなかった(Cmd+Z で戻らない・保存されないまま閉じられる)。
+  // 同じ内容なら履歴側で重複扱いになるので、変わっていなくても送ってよい
+  window.postMessage(
+    { type: 'SLIDE_CONTENT_CHANGED', html: getArtboardContent(iframeDoc) },
+    '*',
+  );
   return true;
 }
 

package/src/editor/utils/dom-utils.ts

@@ -249,9 +249,15 @@ export function applyCanvasZoomDom(iframeDoc: Document, zoomPct: number): void {
   scrollArea.style.minWidth = `${cw}px`;
   scrollArea.style.minHeight = `${ch}px`;
 
+  // webpage は上端固定(#canvas-scroll-area が flex-start、変形の基準も top)。
+  // 上の余白は中央寄せでは自然に生まれたが、上端固定では自分で確保する。
+  // 縦方向の中央寄せもしない(ページの高さが変わるたびに紙面が動く原因だった)
+  const topAnchored = iframeDoc.body.dataset.editorMode === 'webpage';
+  scrollArea.style.paddingTop = topAnchored ? `${padding}px` : '';
+
   // 紙面が容器に収まる軸はスクロールを中央へ(拡大時のパンには干渉しない)
   if (w * scale <= cw) container.scrollLeft = Math.max(0, (scrollArea.offsetWidth - cw) / 2);
-  if (h * scale <= ch) container.scrollTop = Math.max(0, (scrollArea.offsetHeight - ch) / 2);
+  if (!topAnchored && h * scale <= ch) container.scrollTop = Math.max(0, (scrollArea.offsetHeight - ch) / 2);
 }
 
 /* ============================ 原本への書き戻し支援 ============================
@@ -1784,11 +1790,12 @@ export function convertDragTargetsToAbsolute(
     .map(({ element, origin }) => {
       const cs = win.getComputedStyle(element);
       if (cs.position === 'absolute' || cs.position === 'fixed') return null;
+      const box = readOffsetBox(element, iframeDoc);
       return {
         element,
         origin,
-        width: element.offsetWidth,
-        height: element.offsetHeight,
+        width: box.width,
+        height: box.height,
         parent: element.parentElement,
       };
     })
@@ -1838,6 +1845,19 @@ export function fitElementToContent(
   const fitH = handle.includes('n') || handle.includes('s');
   if (!fitW && !fitH) return { changed: false };
 
+  // 流し込みの子(カードやリスト項目)を並べている器は対象外。
+  // 「最長行に幅を合わせる」はテキスト箱のための採寸で、器に掛けると
+  // 中の文の長さまで幅が縮み、カードが折れてページ高さまで変わる
+  // (Webページの商品一覧で、ハンドルを2回押しただけで 490→337px に潰れた)。
+  // 絶対配置の子だけを持つ器は下の childExtent で正しく扱えるので通す
+  const INLINE_TEXT_TAGS = new Set(['SPAN', 'A', 'B', 'I', 'EM', 'STRONG', 'BR', 'SMALL', 'SUP', 'SUB', 'MARK', 'CODE']);
+  const hasFlowChildren = [...element.children].some((c) => {
+    if (INLINE_TEXT_TAGS.has(c.tagName)) return false;
+    const pos = win.getComputedStyle(c).position;
+    return pos !== 'absolute' && pos !== 'fixed';
+  });
+  if (hasFlowChildren) return { changed: false };
+
   const before = { w: element.offsetWidth, h: element.offsetHeight,
                    left: element.offsetLeft, top: element.offsetTop };
 
@@ -1915,6 +1935,105 @@ export function fitElementToContent(
   return { changed: true };
 }
 
+/**
+ * テキスト編集中、ブラウザのキャレット追従で紙面が飛ぶのを防ぐ。
+ *
+ * 編集に入る・文字を打つ・End/Home でキャレットが動くたびに、ブラウザは
+ * キャレットを「見える位置」へスクロールさせる。紙面は #artboard-wrapper の
+ * transform で縮小されているため、その計算が狂い、見えているのに大きく
+ * スクロールしてしまう(実測: スライドで 53px、Webページで 1900px 飛んだ)。
+ * ダブルクリックした場所は既に見えているので、キャレット起因のスクロールは要らない。
+ *
+ * 追従は打鍵の後、次の描画更新の中で走る(rAF より後)ので、scroll イベントで
+ * 捕まえて描画される前に戻す。overflow:hidden の html/body/#artboard も
+ * プログラム的にはスクロールされ得るので、要素からルートまでの祖先を全部見る。
+ * ユーザー自身のスクロール(ホイール・パン・スクロールバー)は直前の入力で見分け、
+ * その直後の scroll は「意図した移動」として覚え直す。
+ * 編集を抜けたら(contenteditable が外れたら)自分で外れる。
+ */
+export function lockCaretScroll(element: HTMLElement, iframeDoc: Document): void {
+  const scrollers: HTMLElement[] = [];
+  for (let a = element.parentElement; a; a = a.parentElement) scrollers.push(a);
+  const remembered = scrollers.map((s) => ({ left: s.scrollLeft, top: s.scrollTop }));
+  const remember = () => {
+    scrollers.forEach((s, i) => {
+      remembered[i].left = s.scrollLeft;
+      remembered[i].top = s.scrollTop;
+    });
+  };
+  const restore = () => {
+    scrollers.forEach((s, i) => {
+      if (s.scrollLeft !== remembered[i].left) s.scrollLeft = remembered[i].left;
+      if (s.scrollTop !== remembered[i].top) s.scrollTop = remembered[i].top;
+    });
+  };
+
+  let userScrollUntil = 0;
+  const markUserScroll = () => {
+    userScrollUntil = performance.now() + 400;
+  };
+  const onScroll = () => {
+    if (element.getAttribute('contenteditable') !== 'true') return detach();
+    if (performance.now() < userScrollUntil) remember();
+    else restore();
+  };
+  const detach = () => {
+    iframeDoc.removeEventListener('wheel', markUserScroll, true);
+    iframeDoc.removeEventListener('mousedown', markUserScroll, true);
+    iframeDoc.removeEventListener('touchstart', markUserScroll, true);
+    iframeDoc.removeEventListener('scroll', onScroll, true);
+  };
+  iframeDoc.addEventListener('wheel', markUserScroll, true);
+  iframeDoc.addEventListener('mousedown', markUserScroll, true);
+  iframeDoc.addEventListener('touchstart', markUserScroll, true);
+  iframeDoc.addEventListener('scroll', onScroll, true);
+  // フォーカスや全選択で既に動いていたら、その場で戻す
+  restore();
+}
+
+/**
+ * offsetLeft/offsetTop/offsetWidth/offsetHeight 相当を、SVG でも取れる形で読む。
+ *
+ * [なぜ必要か] `<svg>` と その中身は SVGElement で、offsetLeft 等を**持たない**
+ * (undefined)。そのまま origin にすると `left: NaNpx` が書かれて無視され、
+ * 掴んでも1pxも動かない(スライドのロゴ・図形で実測)。
+ * HTMLElement は従来どおり offset 系(スケール前の CSS px、transform の影響なし)を
+ * 使い、持たない要素だけ矩形から割り戻す。基準は offsetParent と同じ
+ * 「最も近い position が static でない祖先」(無ければ body)。
+ */
+export function readOffsetBox(
+  element: HTMLElement,
+  iframeDoc: Document,
+): { left: number; top: number; width: number; height: number } {
+  if (typeof element.offsetLeft === 'number') {
+    return {
+      left: element.offsetLeft,
+      top: element.offsetTop,
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+    };
+  }
+  const win = iframeDoc.defaultView;
+  const artboard = iframeDoc.getElementById('artboard');
+  const scale = artboard ? artboard.getBoundingClientRect().width / (artboard.offsetWidth || 1) || 1 : 1;
+  let parent: HTMLElement | null = element.parentElement;
+  while (parent && parent !== iframeDoc.body && win?.getComputedStyle(parent).position === 'static') {
+    parent = parent.parentElement;
+  }
+  const base = parent ?? iframeDoc.body;
+  const baseRect = base.getBoundingClientRect();
+  const baseStyle = win?.getComputedStyle(base);
+  const borderLeft = parseFloat(baseStyle?.borderLeftWidth || '0') || 0;
+  const borderTop = parseFloat(baseStyle?.borderTopWidth || '0') || 0;
+  const rect = element.getBoundingClientRect();
+  return {
+    left: (rect.left - baseRect.left) / scale - borderLeft,
+    top: (rect.top - baseRect.top) / scale - borderTop,
+    width: rect.width / scale,
+    height: rect.height / scale,
+  };
+}
+
 export function prepareElementDragOrigin(
   element: HTMLElement,
   iframeDoc: Document,
@@ -1929,7 +2048,8 @@ export function prepareElementDragOrigin(
     if (!options.convertToAbsolute) {
       // 変換が許されていない（オートレイアウト等）。
       // 値だけ返して要素は一切触らない。
-      return { left: element.offsetLeft, top: element.offsetTop };
+      const box = readOffsetBox(element, iframeDoc);
+      return { left: box.left, top: box.top };
     }
 
     // 親を offsetParent に確定させてから採寸する。
@@ -1944,10 +2064,7 @@ export function prepareElementDragOrigin(
     }
 
     // 採寸はスタイルを書き換える前に行う（margin:0 を入れると値が変わるため）
-    const left = element.offsetLeft;
-    const top = element.offsetTop;
-    const width = element.offsetWidth;
-    const height = element.offsetHeight;
+    const { left, top, width, height } = readOffsetBox(element, iframeDoc);
 
     capturePrestyle(element);
     element.style.width = `${width}px`;
@@ -1960,8 +2077,10 @@ export function prepareElementDragOrigin(
   }
 
   // すでに絶対配置。offsetLeft/offsetTop がそのまま left/top の基準になる
-  const left = element.offsetLeft;
-  const top = element.offsetTop;
+  // (SVG は offset 系を持たないので矩形から割り戻す)
+  const box = readOffsetBox(element, iframeDoc);
+  const left = box.left;
+  const top = box.top;
 
   // right / bottom で位置決めされている要素（例: `absolute bottom-[24px] left-[96px]`）に
   // そのまま top を書くと、top と bottom が同時に効いて「移動」ではなく「伸長」になる。
@@ -1978,8 +2097,8 @@ export function prepareElementDragOrigin(
     (element.style.bottom !== '' && element.style.bottom !== 'auto') ||
     /(^|\s)-?bottom-/.test(element.className);
   if (hasRight || hasBottom) {
-    element.style.width = `${element.offsetWidth}px`;
-    element.style.height = `${element.offsetHeight}px`;
+    element.style.width = `${box.width}px`;
+    element.style.height = `${box.height}px`;
     if (hasRight) {
       element.style.right = 'auto';
       // インラインの auto だけでは `right-[24px]` クラスが保存HTMLに残り、