@growgroup/visual-editor 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growgroup/visual-editor",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "HTMLをブラウザ上で直接編集するビジュアルエディタ。スライド(固定サイズ)とWebページ(可変高さ)の両方に使え、保存先はアダプタで差し替えられます。",
   "keywords": [
     "visual-editor",

package/src/editor/FrontendVisualEditor.tsx

@@ -11,7 +11,7 @@
  * 汎用的なHTML編集エディタとして、スライド、ページ、コンポーネント等で利用可能
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useEditorShortcuts } from '../hooks/useEditorShortcuts';
 import {
   editorCancelDragRef,
@@ -817,6 +817,17 @@ function FrontendVisualEditorInner({
   /** ページ切替(サムネイル・新しいスライド)の直前に、殻から保存を呼べるようにする */
   useEffect(() => registerAutoSaveFlush(() => saveIfDirtyRef.current()), []);
 
+  /**
+   * この編集画面が消えるとき(ページ切替で key が変わる・閉じる)、保存待ちの変更を捨てない。
+   *
+   * 自動保存は2秒のデバウンス。編集して2秒以内にページを切り替えると、タイマーごと
+   * 捨てられて編集が消えていた(構成ラフで実測: 見出しを直して隣のページへ移ると失われる)。
+   * useLayoutEffect の後始末は iframe がまだ DOM にある間に走るので、ここで
+   * 本文を読み取って保存を始める。onSave はこの画面のもの(古い閉包)なので、
+   * 切替先ではなく編集していたページへ正しく保存される。
+   */
+  useLayoutEffect(() => () => { void saveIfDirtyRef.current(); }, []);
+
   /** ページが変わったら「保存済みの本文」の記憶も切り替える */
   useEffect(() => {
     savedPayloadRef.current = null;
@@ -2384,6 +2395,27 @@ function FrontendVisualEditorInner({
           </div>
         </div>
       )}
+
+      {/* Webページ用の案内。
+          Webページでは「絶対配置モードに切り替える」を勧めない(版面が固定pxに固まる)ので、
+          代わりに逃げ道だけを伝える。sonner の Toaster はアプリ側に無く toast() が
+          表示されないため、既存のこの帯を流用している */}
+      {showLayoutHint && editorMode === 'webpage' && (
+        <div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] animate-in fade-in slide-in-from-bottom-2 duration-300">
+          <div className="bg-black/90 text-white px-4 py-3 rounded-lg shadow-xl flex items-center gap-4">
+            <span className="text-sm">
+              並べ替える相手がありません。Cmd/Ctrl+ドラッグで自由配置、ダブルクリックで中に入れます
+            </span>
+            <button
+              onClick={() => setShowLayoutHint(false)}
+              className="text-gray-400 hover:text-white text-lg leading-none ml-1"
+              aria-label="閉じる"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

package/src/editor/components/EditorCanvas.tsx

@@ -318,14 +318,19 @@ export function EditorCanvas() {
     if (!container) return;
 
     const scrollLeft = (container.scrollWidth - container.clientWidth) / 2;
-    const scrollTop = (container.scrollHeight - container.clientHeight) / 2;
+    // webpage は上端固定(紙面は #canvas-scroll-area で flex-start)。
+    // 初期表示もページの先頭から見えるべきで、縦の中央へ飛ばさない
+    const scrollTop =
+      editorMode === "webpage"
+        ? 0
+        : (container.scrollHeight - container.clientHeight) / 2;
 
     container.scrollTo({
       left: scrollLeft,
       top: scrollTop,
       behavior: "instant",
     });
-  }, [containerRef]);
+  }, [containerRef, editorMode]);
 
   useEffect(() => {
     if (isInMultiPageMode) return; // マルチページモードではキャンバスがスクロールを管理

package/src/editor/hooks/useCanvasControls.ts

@@ -527,10 +527,11 @@ export function useCanvasControls() {
     if (!container) return;
     container.scrollTo({
       left: (container.scrollWidth - container.clientWidth) / 2,
-      top: (container.scrollHeight - container.clientHeight) / 2,
+      // webpage は上端固定(#canvas-scroll-area が flex-start)。先頭から見せる
+      top: editorMode === 'webpage' ? 0 : (container.scrollHeight - container.clientHeight) / 2,
       behavior: 'instant',
     });
-  }, [containerRef]);
+  }, [containerRef, editorMode]);
 
   // ズームフィット計算
   const calculateFitZoom = useCallback(() => {

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に残り、

package/src/editor/utils/flex-reorder.ts

@@ -1,5 +1,5 @@
 /**
- * フレックス内ドラッグ = 同一親の中での並べ替え。
+ * フロー内ドラッグ = 同一親の中での並べ替え。
  *
  * オートレイアウト(display:flex)の子を掴んだとき、従来は問答無用で絶対配置へ
  * 倒していたため、フレックスの設定が触った瞬間に無意味になっていた。
@@ -7,6 +7,14 @@
  * 以前あった「ゴースト並べ替え」は任意の親へ再挿入できたため、離した場所に
  * よっては要素が画面の外へ消えた。同一親に限ることでその事故を構造的に防ぐ。
  *
+ * 【slide と webpage で入口が違う】
+ * - slide  : `shouldReorder` = 明示的にオートレイアウトONにした flex の器だけ。
+ *            テンプレート由来の flex が山ほどあり、全部を器にすると既定の
+ *            ドラッグ(絶対配置化して自由移動)が勝手に変わってしまうため。
+ * - webpage: `resolveWebpageDrag` = フロー内の要素は**常に**並べ替え。
+ *            webpage は版面を流し込みのまま保つ約束なので、絶対配置へ倒すと
+ *            ページ高さが潰れて紙面が飛ぶ(これが「動かすと版面が崩れる」の正体)。
+ *
  * 座標はクライアント座標(getBoundingClientRect)のまま扱う。ここで必要なのは
  * 「カーソルが兄弟の前半か後半か」だけで、アートボード座標へ割り戻す必要がない。
  */
@@ -22,22 +30,69 @@ const OVERLAY_SELECTOR =
   '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-crop-ui,' +
   '.flex-drop-indicator,#gg-measure-layer,#gg-smart-guides,#' + INDICATOR_ID;
 
+/**
+ * 並びの性格。挿入位置の決め方と、青い線の引き方がこれで変わる。
+ * - block : 縦一列の流し込み。前後は y の中点で決まる
+ * - flex  : 主軸が1本(row/column)。前後は主軸の中点で決まる
+ * - grid2d: grid と flex-wrap。1本の軸では決まらないので、
+ *           「カーソルに一番近い兄弟」を選んでから、ずれの大きい軸で前後を決める
+ */
+export type ReorderLayout = 'block' | 'flex' | 'grid2d';
+
+/** 親が並べ替えの器になり得る display か。webpage の入口で使う */
+function classifyDisplay(display: string): ReorderLayout | null {
+  if (display === 'flex' || display === 'inline-flex') return 'flex';
+  if (display === 'grid' || display === 'inline-grid') return 'grid2d';
+  if (display === 'block' || display === 'flow-root' || display === 'list-item') return 'block';
+  // inline / table 系 / contents などは並びの前後が素直に決まらないので触らない
+  return null;
+}
+
+/** ドラッグを並べ替えとして扱うための材料。これが作れたら並べ替えできる */
+export interface ReorderPlan {
+  /** 動かす要素(DOM順の連続した塊)。単一選択なら1個 */
+  elements: HTMLElement[];
+  parent: HTMLElement;
+  layout: ReorderLayout;
+}
+
+/** webpage モードでドラッグをどう扱うかの判定結果 */
+export type WebpageDragPlan =
+  /** 同一親の中で並べ替える */
+  | { kind: 'reorder'; plan: ReorderPlan }
+  /** 兄弟がいない(ひとりっ子)。動かす先がないので何もしない */
+  | { kind: 'no-siblings' }
+  /** 複数選択がバラバラ(親が違う/連続していない/フロー内と絶対配置の混在) */
+  | { kind: 'not-contiguous' }
+  /** 従来どおり座標で自由に動かす(すでに絶対配置の要素など) */
+  | { kind: 'free' };
+
 /** 並べ替え中の状態。ドラッグ開始時に1回だけ作る */
 export interface ReorderSession {
-  element: HTMLElement;
+  /** 動かしている要素(DOM順の連続した塊) */
+  elements: HTMLElement[];
   parent: HTMLElement;
   /** 動かしている要素を除いた兄弟(DOM順) */
   siblings: HTMLElement[];
-  /** 主軸が縦か */
+  layout: ReorderLayout;
+  /** 主軸が縦か(grid2d では使わない) */
   isColumn: boolean;
-  /** 開始時の位置(取り消し・変化判定用) */
+  /** flex-direction が *-reverse か(画面上の並びとDOM順が逆になる) */
+  isReverse: boolean;
+  /** 開始時の挿入位置。ここと同じなら「順番は変わっていない」 */
   originalIndex: number;
   /** 直前に描いた挿入位置。同じなら描き直さない */
   lastIndex: number;
+  /** grid2d で直近に使った軸。青い線をこの軸で引く */
+  lastAxis: 'x' | 'y';
+  /** grid2d で線を引く相手(カーソルに一番近い兄弟) */
+  lastNeighbor: HTMLElement | null;
+  /** lastNeighbor の手前に入れるのか(false なら後ろ) */
+  lastBefore: boolean;
 }
 
 /** 並べ替えの相手になる子だけを取り出す */
-function realChildren(parent: HTMLElement): HTMLElement[] {
+export function realChildren(parent: HTMLElement): HTMLElement[] {
   const out: HTMLElement[] = [];
   for (const node of Array.from(parent.children)) {
     // [注意] `node instanceof HTMLElement` は使えない。この関数は親ウィンドウで
@@ -51,8 +106,14 @@ function realChildren(parent: HTMLElement): HTMLElement[] {
   return out;
 }
 
+/** フロー(static/relative)の中にいるか */
+function isInFlow(element: HTMLElement, win: Window): boolean {
+  const position = win.getComputedStyle(element).position;
+  return position !== 'absolute' && position !== 'fixed';
+}
+
 /**
- * この要素を「同一親の並べ替え」で動かすべきか判定する。
+ * この要素を「同一親の並べ替え」で動かすべきか判定する。【slide 専用・変更禁止】
  *
  * 【既定は現状維持】computed が flex というだけでは並べ替えにしない。
  * テンプレート由来の flex はスライド中に山ほどあり、それを全部器として扱うと
@@ -88,35 +149,132 @@ export function shouldReorder(
   return realChildren(parent).length >= 2;
 }
 
-/** 並べ替えの下ごしらえ(ドラッグが動き出した最初の1回だけ呼ぶ) */
-export function startReorder(element: HTMLElement, doc: Document): ReorderSession | null {
-  const win = doc.defaultView;
+/** slide の並べ替え(shouldReorder が true のとき)の材料を作る */
+export function planSlideReorder(
+  element: HTMLElement,
+  doc: Document,
+): ReorderPlan | null {
   const parent = element.parentElement;
-  if (!win || !parent) return null;
+  if (!parent) return null;
+  // shouldReorder が display:flex/inline-flex を保証しているので layout は 'flex' 固定。
+  // ここで flex-wrap を見て grid2d へ振ると slide の既存挙動が変わるので、あえて見ない
+  return { elements: [element], parent, layout: 'flex' };
+}
+
+/**
+ * webpage モードでこのドラッグをどう扱うか決める。
+ *
+ * webpage は「絶対配置へ倒さない」が設計原則(README)。倒すと版面が固定pxに固まり、
+ * さらにカラムが流れから抜けてページ高さが潰れ、紙面が中央寄せで飛ぶ。
+ * そこでフロー内の要素は必ず並べ替えに回し、倒すのは Cmd/Ctrl の逃げ道だけにする。
+ *
+ * 判定の順番:
+ *   1. すでに絶対配置(全部) → free。倒す必要がないので従来どおり座標移動
+ *   2. フロー内と絶対配置の混ざった複数選択 → not-contiguous(何もしない)。
+ *      片方を倒すと版面が崩れ、倒さないと群がバラけるため、どちらも選ばない
+ *   3. 親が並べ替えの器になり得ない display → free
+ *   4. 複数選択が別の親 / 連続していない → not-contiguous
+ *   5. 兄弟がいない → no-siblings
+ *   6. それ以外 → reorder
+ */
+export function resolveWebpageDrag(
+  elements: HTMLElement[],
+  doc: Document,
+): WebpageDragPlan {
+  const win = doc.defaultView;
+  if (!win || elements.length === 0) return { kind: 'free' };
+
+  const inFlow = elements.filter((el) => isInFlow(el, win));
+  // 1. 全部フロー外 → 触っても版面は動かない。従来どおりの自由移動
+  if (inFlow.length === 0) return { kind: 'free' };
+  // 2. 混在 → 群としてまとまった扱いができない
+  if (inFlow.length !== elements.length) return { kind: 'not-contiguous' };
+
+  const parent = elements[0].parentElement;
+  if (!parent) return { kind: 'free' };
+  if (elements.some((el) => el.parentElement !== parent)) {
+    return { kind: 'not-contiguous' };
+  }
+
+  // 3. 器になり得る display か
+  const layout = classifyDisplay(win.getComputedStyle(parent).display);
+  if (!layout) return { kind: 'free' };
+
+  const children = realChildren(parent);
+  const indices = elements
+    .map((el) => children.indexOf(el))
+    .filter((i) => i >= 0)
+    .sort((a, b) => a - b);
+  if (indices.length !== elements.length) return { kind: 'free' };
+
+  // 4. 連続した塊か(飛び飛びの選択を1か所へ寄せると、選んでいない要素の順番まで変わる)
+  const contiguous = indices.every((v, i) => i === 0 || v === indices[i - 1] + 1);
+  if (!contiguous) return { kind: 'not-contiguous' };
+
+  // 5. 並べ替える相手がいない
+  if (children.length - elements.length < 1) return { kind: 'no-siblings' };
+
+  // DOM順に揃えてから渡す(選択の順番ではなく並びの順番で動かす)
+  const ordered = indices.map((i) => children[i]);
+  return { kind: 'reorder', plan: { elements: ordered, parent, layout } };
+}
+
+/**
+ * 並べ替えの下ごしらえ(ドラッグが動き出した最初の1回だけ呼ぶ)
+ *
+ * @param options.restoreFlow
+ *   子の絶対配置を解いてフローへ戻すか。
+ *   slide の明示ONの器では true(ONにした後に別経路で絶対配置が焼き込まれた子を直す)。
+ *   **webpage では必ず false**。webpage の普通の親には「Cmd+ドラッグで自由配置にした子」が
+ *   混ざり得て、隣の要素を普通にドラッグしただけでそれが勝手にフローへ戻ってしまうため。
+ */
+export function startReorder(
+  plan: ReorderPlan,
+  doc: Document,
+  options: { restoreFlow: boolean },
+): ReorderSession | null {
+  const win = doc.defaultView;
+  const { parent, elements, layout } = plan;
+  if (!win || elements.length === 0) return null;
 
-  // 子はONにした時点でフロー化済み。ただし後から追加された子や、
-  // 別経路で絶対配置が焼き込まれた子が混じると並びが崩れるので保険で通す
-  restoreChildrenToFlow(parent);
+  if (options.restoreFlow) {
+    // 子はONにした時点でフロー化済み。ただし後から追加された子や、
+    // 別経路で絶対配置が焼き込まれた子が混じると並びが崩れるので保険で通す
+    restoreChildrenToFlow(parent);
+  }
 
   const children = realChildren(parent);
-  const originalIndex = children.indexOf(element);
-  if (originalIndex < 0) return null;
+  const moving = new Set(elements);
+  const siblings = children.filter((c) => !moving.has(c));
+  const firstIndex = children.indexOf(elements[0]);
+  if (firstIndex < 0) return null;
+
+  // 連続した塊が children の firstIndex から始まるなら、
+  // 塊を抜いた siblings の中では firstIndex 番目の手前が「元の位置」になる
+  const originalIndex = firstIndex;
 
-  const dir = win.getComputedStyle(parent).flexDirection || 'row';
+  const parentStyle = win.getComputedStyle(parent);
+  const dir = parentStyle.flexDirection || 'row';
 
   // 掴んでいる要素は「持ち上がっている」ことを見せる。
   // 既存の .dragging(opacity .7 + grabbing)をそのまま使う。インラインstyleで
   // 当てると保存HTMLに漏れうるが、このクラスは getCleanHtml が必ず剥がす
-
-  element.classList.add('dragging');
+  for (const el of elements) el.classList.add('dragging');
 
   return {
-    element,
+    elements,
     parent,
-    siblings: children.filter((c) => c !== element),
-    isColumn: dir.startsWith('column'),
+    siblings,
+    layout,
+    // block は縦一列。flex の computed は block でも 'row' を返すので、
+    // flexDirection をそのまま信じると横軸で判定してしまう
+    isColumn: layout === 'block' ? true : dir.startsWith('column'),
+    isReverse: layout === 'flex' && dir.endsWith('-reverse'),
     originalIndex,
     lastIndex: -1,
+    lastAxis: 'y',
+    lastNeighbor: null,
+    lastBefore: true,
   };
 }
 
@@ -124,8 +282,14 @@ export function startReorder(element: HTMLElement, doc: Document): ReorderSessio
  * カーソル位置から「兄弟の何番目の前に入るか」を決める
  *
  * 返すのは siblings(動かしている要素を除いた配列)に対する挿入位置。
- * 各兄弟の中点と比べるだけなので、要素が可変幅でも破綻しない。
- * flex-direction:*-reverse は画面上の並びとDOM順が逆なので、最後に反転する。
+ *
+ * block / flex は1本の軸しかないので、各兄弟の中点と比べるだけでよい。
+ * 要素が可変幅でも破綻しない。flex-direction:*-reverse は画面上の並びと
+ * DOM順が逆なので、最後に反転する。
+ *
+ * grid / flex-wrap は1本の軸では決まらない(右隣も下隣もいる)。
+ * カーソルに一番近い兄弟を選び、その中心からのずれを要素の幅・高さで正規化して、
+ * **ずれが支配的なほうの軸**で前後を決める。これ以上凝らない。
  */
 export function computeInsertIndex(
   session: ReorderSession,
@@ -133,9 +297,40 @@ export function computeInsertIndex(
   clientY: number,
   doc: Document,
 ): number {
-  const { siblings, isColumn } = session;
-  const dir = doc.defaultView?.getComputedStyle(session.parent).flexDirection || 'row';
-  const isReverse = dir.endsWith('-reverse');
+  const { siblings, isColumn, isReverse, layout } = session;
+  if (siblings.length === 0) return 0;
+
+  if (layout === 'grid2d') {
+    let nearest = 0;
+    let best = Infinity;
+    let bestRect: DOMRect | null = null;
+    for (let i = 0; i < siblings.length; i++) {
+      const r = siblings[i].getBoundingClientRect();
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height / 2;
+      const d = (clientX - cx) ** 2 + (clientY - cy) ** 2;
+      if (d < best) {
+        best = d;
+        nearest = i;
+        bestRect = r;
+      }
+    }
+    if (!bestRect) return siblings.length;
+
+    const cx = bestRect.left + bestRect.width / 2;
+    const cy = bestRect.top + bestRect.height / 2;
+    // 幅・高さで割ってから比べる。割らないと、横長のカードで
+    // 少し上下にずれただけで「縦の入れ替え」に化ける
+    const nx = bestRect.width > 0 ? (clientX - cx) / bestRect.width : 0;
+    const ny = bestRect.height > 0 ? (clientY - cy) / bestRect.height : 0;
+    const useY = Math.abs(ny) > Math.abs(nx);
+    const before = useY ? clientY < cy : clientX < cx;
+
+    session.lastAxis = useY ? 'y' : 'x';
+    session.lastNeighbor = siblings[nearest];
+    session.lastBefore = before;
+    return before ? nearest : nearest + 1;
+  }
 
   let index = siblings.length;
   for (let i = 0; i < siblings.length; i++) {
@@ -148,6 +343,8 @@ export function computeInsertIndex(
       break;
     }
   }
+  session.lastAxis = isColumn ? 'y' : 'x';
+  session.lastNeighbor = null;
   return index;
 }
 
@@ -158,6 +355,9 @@ export function computeInsertIndex(
  * position が無いと座標の基準にできない。親の style を書き換えると版面が動くので、
  * body直下に fixed で置く(画面座標そのまま)。ドラッグ中しか出ないので
  * スクロール追従は不要。
+ *
+ * grid2d だけは親いっぱいに引くと意味が伝わらない(どの行に入るか分からない)ので、
+ * 「入る先の隣人」の辺に、その隣人の幅・高さで引く。
  */
 export function drawInsertIndicator(
   session: ReorderSession,
@@ -166,10 +366,26 @@ export function drawInsertIndicator(
 ): void {
   clearInsertIndicator(doc);
 
-  const { siblings, isColumn, parent } = session;
+  const { siblings, isColumn, isReverse, parent, layout } = session;
+  const base = 'position:fixed;z-index:10001;pointer-events:none;' +
+    `background:${BLUE};border-radius:1.5px;box-shadow:0 0 6px rgba(13,153,255,0.5);`;
+  const line = doc.createElement('div');
+  line.id = INDICATOR_ID;
+
+  if (layout === 'grid2d' && session.lastNeighbor) {
+    const r = session.lastNeighbor.getBoundingClientRect();
+    if (session.lastAxis === 'y') {
+      const y = session.lastBefore ? r.top : r.bottom;
+      line.style.cssText = base + `left:${r.left}px;width:${r.width}px;top:${y - 1.5}px;height:3px;`;
+    } else {
+      const x = session.lastBefore ? r.left : r.right;
+      line.style.cssText = base + `top:${r.top}px;height:${r.height}px;left:${x - 1.5}px;width:3px;`;
+    }
+    doc.body.appendChild(line);
+    return;
+  }
+
   const parentRect = parent.getBoundingClientRect();
-  const dir = doc.defaultView?.getComputedStyle(parent).flexDirection || 'row';
-  const isReverse = dir.endsWith('-reverse');
 
   // 挿入位置の座標。末尾なら最後の兄弟の後ろ、それ以外は index 番目の手前
   let pos: number;
@@ -183,10 +399,6 @@ export function drawInsertIndicator(
     pos = isColumn ? (isReverse ? r.bottom : r.top) : isReverse ? r.right : r.left;
   }
 
-  const line = doc.createElement('div');
-  line.id = INDICATOR_ID;
-  const base = 'position:fixed;z-index:10001;pointer-events:none;' +
-    `background:${BLUE};border-radius:1.5px;box-shadow:0 0 6px rgba(13,153,255,0.5);`;
   line.style.cssText = isColumn
     ? base + `left:${parentRect.left}px;width:${parentRect.width}px;top:${pos - 1.5}px;height:3px;`
     : base + `top:${parentRect.top}px;height:${parentRect.height}px;left:${pos - 1.5}px;width:3px;`;
@@ -200,32 +412,45 @@ export function clearInsertIndicator(doc: Document): void {
 }
 
 /**
- * 並べ替えを確定する。順番が変わったら true
+ * 塊を siblings の index 番目の手前へ入れる。順番が変わったら true
  *
  * insertBefore しか使わないので、要素は必ず同じ親の中に留まる。
  */
+export function applyReorder(
+  parent: HTMLElement,
+  elements: HTMLElement[],
+  siblings: HTMLElement[],
+  originalIndex: number,
+  index: number,
+): boolean {
+  // すでにその位置にいるなら DOM を触らない(履歴を無駄に汚さない)
+  if (index === originalIndex) return false;
+
+  const target = index >= siblings.length ? null : siblings[index];
+  // 塊はDOM順のまま順に差し込む。同じ参照点の前に入れれば元の順番が保たれる
+  for (const el of elements) parent.insertBefore(el, target);
+  return true;
+}
+
+/**
+ * 並べ替えを確定する。順番が変わったら true
+ */
 export function commitReorder(
   session: ReorderSession,
   index: number,
   doc: Document,
 ): boolean {
-  const { element, parent, siblings } = session;
+  const { elements, parent, siblings, originalIndex } = session;
 
   // 見た目の持ち上げを戻してから並べ替える(保存HTMLに opacity を残さない)
   endReorder(session, doc);
 
-  const target = index >= siblings.length ? null : siblings[index];
-  // すでにその位置にいるなら DOM を触らない(履歴を無駄に汚さない)
-  if (target === element.nextElementSibling) return false;
-  if (target === null && element === parent.lastElementChild) return false;
-
-  parent.insertBefore(element, target);
-  return true;
+  return applyReorder(parent, elements, siblings, originalIndex, index);
 }
 
 /** 見た目の持ち上げと線を片付ける(取り消し・中断からも呼ぶ) */
 export function endReorder(session: ReorderSession | null, doc: Document): void {
   clearInsertIndicator(doc);
   if (!session) return;
-  session.element.classList.remove('dragging');
+  for (const el of session.elements) el.classList.remove('dragging');
 }

package/src/editor/utils/geometry.ts

@@ -191,10 +191,11 @@ export function measureStyleSize(
   doc: Document
 ): { width: number; height: number } {
   const cs = doc.defaultView?.getComputedStyle(element);
-  let width = element.offsetWidth;
-  let height = element.offsetHeight;
+  // SVG は offsetWidth を持たない(undefined)。0 扱いにして下の矩形フォールバックへ流す
+  let width = typeof element.offsetWidth === 'number' ? element.offsetWidth : 0;
+  let height = typeof element.offsetHeight === 'number' ? element.offsetHeight : 0;
 
-  // インライン要素などで offsetWidth が 0 のときは矩形から拾う（保険）
+  // インライン要素や SVG で offsetWidth が取れないときは矩形から拾う（保険）
   if (width === 0 && height === 0) {
     const rect = element.getBoundingClientRect();
     const scale = getArtboardRenderScale(doc);

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

@@ -179,18 +179,23 @@ export function generateEditableHtml(content: string, editorMode: EditorMode = '
       background-color: ${CANVAS_BG_COLOR};
     }
 
-    /* パディング用ラッパー（スクロール領域確保） */
+    /* パディング用ラッパー（スクロール領域確保）
+       webpage は上端固定にする。中央寄せだと、テキスト入力や並べ替えでページの
+       高さが変わるたびに紙面が上下へ動き、見ていた場所が飛ぶ(実測 84〜729px)。
+       ブラウザのページと同じで、高さが変わっても上端は動かないのが正しい */
     #canvas-scroll-area {
       display: flex;
-      align-items: center;
+      align-items: ${editorMode === 'webpage' ? 'flex-start' : 'center'};
       justify-content: center;
       /* サイズはJSで動的に設定 */
     }
 
-    /* ズーム/パン適用対象 */
+    /* ズーム/パン適用対象。
+       webpage は上端固定なので、縮小も上端を基準にする(center だと縮んだ分だけ
+       紙面が下へずれ、上端固定の意味が無くなる) */
     #artboard-wrapper {
       flex-shrink: 0;
-      transform-origin: center center;
+      transform-origin: ${editorMode === 'webpage' ? 'top center' : 'center center'};
       /* transform は JS で設定 */
       /* 読み込み直後は非表示。倍率適用前の等倍(巨大)な一瞬を見せない。
          EditorCanvas がロード時に倍率を当ててから可視化する */
@@ -230,7 +235,7 @@ export function generateEditableHtml(content: string, editorMode: EditorMode = '
     }
   </style>
 </head>
-<body tabindex="-1">
+<body tabindex="-1" data-editor-mode="${editorMode}">
   <div id="canvas-container">
     <div id="canvas-scroll-area">
       <div id="artboard-wrapper">

package/src/hooks/useEditorShortcuts.ts

@@ -99,14 +99,46 @@ function isEditableTarget(target: EventTarget | null): boolean {
  *
  * [移植時の修正] 以前は copy / cut / paste / selectAll もここに入っていたため、
  * テキスト編集中の Cmd+C が「要素のコピー」に化け、Cmd+A が兄弟要素の全選択になっていた。
- * 編集中は Undo/Redo と Escape（編集終了）以外はブラウザ既定に通す。
+ *
+ * [修正] Undo/Redo もここから外した。
+ * 編集中の Cmd+Z を横取りすると、ブラウザ既定の「文字入力の取り消し」が止まる一方で、
+ * エディタの履歴には打鍵ごとの段が無い（テキスト編集は確定時に1件積まれる）ため、
+ * **押しても何も起きない**状態だった（実測: 文字を打ってCmd+Z→入力は戻らない）。
+ * 選択したテキストを打ち間違えて上書きすると、確定するまで取り戻せなかった。
+ * 編集中の取り消しは文字単位＝ブラウザ既定に任せ、
+ * 要素単位の取り消し（エディタの履歴）は編集を抜けてから効かせる。
+ * PowerPoint / Figma も編集中の Cmd+Z は文字単位で動く。
  */
-const ALLOWED_IN_EDITABLE: ShortcutAction[] = ['undo', 'redo', 'deselect'];
+const ALLOWED_IN_EDITABLE: ShortcutAction[] = ['deselect'];
 
 function isAllowedInEditableContext(action: ShortcutAction | undefined): boolean {
   return action ? ALLOWED_IN_EDITABLE.includes(action) : false;
 }
 
+/**
+ * キャンバスにフォーカスがあるときだけ横取りするアクション。
+ *
+ * Tab はブラウザ既定の「次のUIへフォーカス移動」でもある。無条件に奪うと
+ * ヘッダーやパネルのボタンをキーボードだけで辿れなくなるため、
+ * 紙面を触っている間だけ「兄弟要素の巡回」に使う。
+ */
+const CANVAS_ONLY: ShortcutAction[] = ['selectNextSibling', 'selectPrevSibling'];
+
+/**
+ * このイベントがキャンバス(iframe)側の操作か。
+ * - iframe の document から来たイベント → キャンバス
+ * - 親側から来た場合は、body か iframe 自身にフォーカスがあるときだけキャンバス扱い
+ *   （ボタンや入力にフォーカスがあるなら、それはUIの操作中）
+ */
+function isCanvasEvent(event: KeyboardEvent): boolean {
+  const doc = (event.target as HTMLElement | null)?.ownerDocument ?? null;
+  if (doc && typeof document !== 'undefined' && doc !== document) return true;
+  const active = typeof document !== 'undefined' ? document.activeElement : null;
+  if (!active) return true;
+  const tag = active.tagName?.toUpperCase();
+  return tag === 'BODY' || tag === 'IFRAME';
+}
+
 /**
  * エディタのキーボードショートカット・ディスパッチャ（唯一の経路）
  *
@@ -153,6 +185,11 @@ export function useEditorShortcuts(
         return;
       }
 
+      // キャンバス限定のキー(Tab)は、UI側にフォーカスがあるときは既定動作に通す
+      if (CANVAS_ONLY.includes(action) && !isCanvasEvent(keyboardEvent)) {
+        return;
+      }
+
       const callback = callbacksRef.current[action];
       if (!callback) return;