@growgroup/visual-editor 0.2.2 → 0.3.0

package/src/editor/components/multi-page/MultiPageCanvasView.tsx

@@ -3,1402 +3,352 @@
 /**
  * MultiPageCanvasView
  *
- * 全ページ同時編集可能な無限キャンバス
- * - 全ページのiframeに親側から編集ハンドラをアタッチ
- * - updateSelectionBox / extractElementInfo を直接使用
- * - キーボードショートカット、リサイズハンドル、ドラッグ完備
+ * Figma 風のマルチフレームキャンバス。全ページをフレームとして並べ、
+ * 1 つのフレームだけが生きているエディタ(EditorCanvas)、残りは見るだけの紙面。
+ *
+ * 層の構成(下から):
+ *   1. 転写層(translate + scale)… フレームの白地 + 見るだけの紙面(PageFramePreview)
+ *   2. 転写層の中、編集中のフレームの位置に EditorCanvas(1 つだけ。ページを移っても作り直さない)
+ *   3. 画面座標のオーバーレイ … フレーム名・選択リング(倍率に関係なく同じ太さ・同じ文字サイズ)
+ *   4. 定規
+ *
+ * EditorCanvas を pages.map の中に置くとページを移るたびに React が作り直して
+ * iframe が読み直される。map の外に 1 つだけ置き、位置だけ動かす
+ *
+ * [パン・ズームの軽さ]
+ * パンは 2 つの層の transform 文字列を変えるだけにする。フレーム 1 枚ずつの要素
+ * (FrameShell / FrameChrome)は memo で、位置は倍率だけに依存させる(画面上の位置 =
+ * 層の translate + 紙面の位置 × 倍率)。150 枚あってもパンで描き直る要素は 2 つ。
+ * ズームは倍率に依存する要素が描き直る(それでも小さな要素が 300 個ほど)
  */
 
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useMultiPageCanvas } from '../../contexts/MultiPageCanvasContext';
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  useMultiPageCanvas,
+  useCanvasViewState,
+  RULER_SIZE,
+  FRAME_GAP,
+  type PageFrameLayout,
+} from '../../contexts/MultiPageCanvasContext';
 import { useEditorContext } from '../../EditorContext';
-import { useEditorRefs } from '../../contexts/EditorRefsContext';
 import { useInfiniteCanvas } from '../../hooks/useInfiniteCanvas';
-import { extractElementInfo } from '../../utils/style-utils';
-import {
-  buildDomTree,
-  updateSelectionBox,
-  removeSelectionBox,
-} from '../../utils/dom-utils';
-import { EDITOR_IFRAME_STYLES } from '../../constants';
-import {
-  startAutoLayoutDrag,
-  updateDragPosition,
-  endAutoLayoutDrag,
-  cancelAutoLayoutDrag,
-  findDropTarget,
-  showDropIndicator,
-  hideFlexDropIndicator,
-  type AutoLayoutDragState,
-  type DropTargetInfo,
-} from '../../utils/flex-utils';
-import { PageLivePreview } from './PageLivePreview';
-import { PageLabel } from './PageLabel';
-import { CanvasZoomControls } from './CanvasZoomControls';
+import { useCanvasMarquee } from '../../hooks/useCanvasMarquee';
+import { editorZoomApiRef } from '../../hooks/useCanvasControls';
+import { EditorAppearanceContext } from '../../contexts/EditorAppearanceContext';
+import { EditorCanvas } from '../EditorCanvas';
+import { PageFramePreview } from './PageFramePreview';
+import { CanvasRulers } from './CanvasRulers';
+import { cn } from '../../../lib/utils';
+
+/** フレーム名の高さ(px、画面上)。フレームの上端との間隔 */
+const LABEL_HEIGHT = 20;
+
+// ------------------------------------------------------------
+// フレームの白地 + 見るだけの紙面(転写層の中。紙面の座標)
+// ------------------------------------------------------------
+
+interface FrameShellProps {
+  page: PageFrameLayout;
+  zoom: number;
+  isActive: boolean;
+  passThrough: boolean;
+  rootRef: React.RefObject<HTMLDivElement | null>;
+  onMouseDown: (e: React.MouseEvent, id: string) => void;
+  onHover: (id: string | null) => void;
+}
+
+const FrameShell = memo(function FrameShell({ page, zoom, isActive, passThrough, rootRef, onMouseDown, onHover }: FrameShellProps) {
+  return (
+    <div
+      data-page-frame={page.id}
+      data-page-active={isActive ? 'true' : undefined}
+      className="absolute"
+      style={{
+        left: page.position.x,
+        top: page.position.y,
+        width: page.size.width,
+        height: page.size.height,
+        background: '#fff',
+        boxShadow: `0 0 0 ${1 / zoom}px var(--ed-frame-edge, rgba(0,0,0,0.08))`,
+        cursor: isActive || passThrough ? undefined : 'pointer',
+      }}
+      onMouseDown={(e) => onMouseDown(e, page.id)}
+      onMouseEnter={() => onHover(page.id)}
+      onMouseLeave={() => onHover(null)}
+    >
+      <PageFramePreview page={page} rootRef={rootRef} />
+    </div>
+  );
+});
+
+// ------------------------------------------------------------
+// フレーム名・リング(オーバーレイの中。画面の座標 = 紙面の位置 × 倍率)
+// ------------------------------------------------------------
+
+interface FrameChromeProps {
+  page: PageFrameLayout;
+  zoom: number;
+  /** 名前を出せる倍率か(行の隙間に名前が収まる)。全フレーム共通なので親で判定する */
+  labelsVisible: boolean;
+  /** リングと名前の強調(切替中はクリックしたページへ先に移る) */
+  isSelected: boolean;
+  isHover: boolean;
+  /** 本文を読んでいる・エディタを組み直している */
+  isBusy: boolean;
+  onActivate: (id: string) => void;
+  onZoomTo: (id: string) => void;
+}
+
+const FrameChrome = memo(function FrameChrome({ page, zoom, labelsVisible, isSelected, isHover, isBusy, onActivate, onZoomTo }: FrameChromeProps) {
+  const sx = page.position.x * zoom;
+  const sy = page.position.y * zoom;
+  const sw = page.size.width * zoom;
+  const sh = page.size.height * zoom;
+  // 縮小してフレームが細くなったら名前は幅に収める(重ならない)。極端に小さければ出さない
+  const showLabel = labelsVisible && sw >= 28;
+  return (
+    <div className="absolute left-0 top-0" data-frame-chrome={page.id} style={{ transform: `translate(${sx}px, ${sy}px)` }}>
+      {/* フレーム名(Figma: フレームの左上、倍率に関係なく同じ大きさ) */}
+      {showLabel && (
+        <button
+          type="button"
+          data-frame-label={page.id}
+          className={cn('ed-frame-label', isSelected && 'ed-frame-label-active')}
+          style={{ top: -LABEL_HEIGHT, maxWidth: Math.max(28, sw) }}
+          title={`${page.index + 1}. ${page.title || page.id}${isSelected ? '(編集中)' : ''}。ダブルクリックでこのページを画面に合わせる`}
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={() => (isSelected ? onZoomTo(page.id) : onActivate(page.id))}
+          onDoubleClick={() => onZoomTo(page.id)}
+        >
+          <span className="ed-frame-label-index">{page.index + 1}</span>
+          <span className="ed-frame-label-title">{page.title || page.id}</span>
+          {page.isDirty && <span className="ed-frame-label-dirty" aria-label="未保存の変更" />}
+          {isBusy && <span className="ed-frame-label-loading" aria-label="読み込み中" />}
+        </button>
+      )}
+      {/* リング(選択中 = 実線、ホバー = 淡い実線) */}
+      {(isSelected || isHover) && (
+        <div
+          className={cn('ed-frame-ring', isSelected ? 'ed-frame-ring-active' : 'ed-frame-ring-hover')}
+          style={{ width: sw, height: sh }}
+        />
+      )}
+    </div>
+  );
+});
 
-/** キャンバスモード用の追加CSS（data-element-idベース） */
-const CANVAS_EDITING_STYLES = `
-  /* トップレベル要素のホバー */
-  #artboard > [data-element-id]:hover:not(.selected):not(.editing) {
-    outline: 2px solid rgba(13, 153, 255, 0.3);
-    outline-offset: -1px;
-  }
-  /* 全要素のホバー（Ctrl/Cmd押下で子要素選択可） */
-  [data-element-id]:hover:not(.selected):not(.editing) {
-    outline: 1px solid rgba(13, 153, 255, 0.15);
-    outline-offset: -1px;
-  }
-  [data-element-id].selected {
-    outline: none !important;
-    cursor: move;
-  }
-  [data-element-id].dragging {
-    opacity: 0.7;
-    cursor: grabbing !important;
-  }
-  [data-element-id].editing {
-    outline: 2px solid #0d99ff !important;
-    outline-offset: 2px;
-    cursor: text !important;
-    min-height: 1em;
-  }
-  .marquee-hover {
-    outline: 2px solid rgba(13, 153, 255, 0.6) !important;
-    outline-offset: 1px;
-  }
-  /* 描画ツール: 既存要素のpointer-events無効化 */
-  body.draw-mode [data-element-id] {
-    pointer-events: none;
-  }
-  body.text-mode [data-element-id] {
-    pointer-events: none;
-  }
-`;
+// ------------------------------------------------------------
+// キャンバス
+// ------------------------------------------------------------
 
 export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
+  const canvas = useMultiPageCanvas();
   const {
-    viewState,
     pages,
-    updatePageFrame,
-    focusPage,
+    bounds,
+    registerContainer,
+    activatePage,
+    activatingPageId,
     zoomToFit,
-    setCanvasZoom,
-    setCanvasOffset,
-    registerUndoHandlers,
-  } = useMultiPageCanvas();
-  const {
-    setZoom,
-    setFitZoom,
-    setSelectedElement,
-    setSelectedElementIds,
-    setDomTree,
-    setExpandedNodes,
-    activeTool,
-    layoutMode,
-  } = useEditorContext();
-  const refs = useEditorRefs();
-  const { canvasOffset, canvasZoom } = viewState;
+    zoomToPage,
+    zoomToActual,
+    rulersVisible,
+    isInteracting,
+    initialViewRestored,
+  } = canvas;
+  const { canvasOffset, canvasZoom, activePageId } = useCanvasViewState();
+  const { setZoom, setFitZoom, activeTool, iframeReady } = useEditorContext();
+  const theme = useContext(EditorAppearanceContext) ?? 'light';
   const containerRef = useRef<HTMLDivElement>(null);
+  const active = useMemo(() => pages.find((p) => p.id === activePageId) ?? null, [pages, activePageId]);
+  // リング・名前の強調は「移ろうとしているページ」を優先する(押した瞬間に手応えを返す)
+  const selectedId = activatingPageId ?? activePageId;
 
-  // 各ページのiframe参照を保持
-  const iframeMapRef = useRef(new Map<string, HTMLIFrameElement>());
+  // 無限キャンバスのズーム/パン操作(容器と、iframe から転送される操作の両方)
+  const { isSpaceHeld, isPanning } = useInfiniteCanvas(containerRef);
+  // キャンバスの余白から始めるマーキー選択(選択ツールのときだけ。Space・手のひら中は動かさない)
+  const { marqueeRect, marqueeArmed, onMouseDown: onMarqueeMouseDown } = useCanvasMarquee(containerRef, {
+    enabled: activeTool === 'select' && !isSpaceHeld && !isPanning,
+  });
 
-  // 無限キャンバスのズーム/パン操作
-  useInfiniteCanvas(containerRef);
+  useEffect(() => {
+    registerContainer(containerRef.current);
+    return () => registerContainer(null);
+  }, [registerContainer]);
 
-  // エディタズームを100%に固定（キャンバスズームが全体スケーリングを担う）
+  // エディタの内側の倍率は 100% 固定(倍率は外側の transform が持つ)
   useEffect(() => {
     setZoom(100);
     setFitZoom(100);
   }, [setZoom, setFitZoom]);
 
-  const [isInteracting, setIsInteracting] = useState(false);
-  const interactingTimeoutRef = useRef<number | null>(null);
-
+  // Cmd+0 / Cmd+1 / Cmd+2 とヘッダーの「全体表示」「100%」をキャンバスに向ける
   useEffect(() => {
-    const handleInteractData = (e?: Event) => {
-      // For message events, only trigger if it's a relevant one
-      if (e && e.type === 'message') {
-        const msg = (e as MessageEvent).data;
-        if (!['PAGE_PREVIEW_WHEEL', 'IFRAME_WHEEL_EVENT', 'IFRAME_PINCH_EVENT'].includes(msg?.type)) {
-          return;
-        }
-      }
-
-      setIsInteracting(true);
-      if (interactingTimeoutRef.current) {
-        window.clearTimeout(interactingTimeoutRef.current);
-      }
-      interactingTimeoutRef.current = window.setTimeout(() => {
-        setIsInteracting(false);
-      }, 150);
+    editorZoomApiRef.current = {
+      fit: () => zoomToFit({ animate: true }),
+      actual: () => zoomToActual(),
+      selection: () => {
+        if (activePageId) zoomToPage(activePageId, { animate: true });
+        else zoomToFit({ animate: true });
+      },
     };
-
-    window.addEventListener('wheel', handleInteractData, { passive: true, capture: true });
-    window.addEventListener('touchstart', handleInteractData, { passive: true, capture: true });
-    window.addEventListener('touchmove', handleInteractData, { passive: true, capture: true });
-    window.addEventListener('message', handleInteractData);
-
     return () => {
-      window.removeEventListener('wheel', handleInteractData, { capture: true });
-      window.removeEventListener('touchstart', handleInteractData, { capture: true });
-      window.removeEventListener('touchmove', handleInteractData, { capture: true });
-      window.removeEventListener('message', handleInteractData);
-      if (interactingTimeoutRef.current) window.clearTimeout(interactingTimeoutRef.current);
+      editorZoomApiRef.current = null;
     };
-  }, []);
+  }, [zoomToFit, zoomToActual, zoomToPage, activePageId]);
 
-  // 初回フィットズーム
-  const hasInitialFitRef = useRef(false);
+  // 初回の表示: 前回の場所が保存されていて内容と重なるならそこへ。無ければ編集中のページを大きく
+  const initialViewDoneRef = useRef(false);
   useEffect(() => {
-    if (hasInitialFitRef.current || pages.length === 0) return;
-    const container = containerRef.current;
-    if (!container) return;
-
-    const timer = setTimeout(() => {
-      const rect = container.getBoundingClientRect();
-      if (rect.width > 0 && rect.height > 0) {
-        zoomToFit(rect.width, rect.height);
-        hasInitialFitRef.current = true;
-      }
-    }, 100);
-    return () => clearTimeout(timer);
-  }, [pages.length, zoomToFit]);
-
-  // Stale closure回避用ref
-  const viewStateRef = useRef(viewState);
-  viewStateRef.current = viewState;
-  const pagesRef = useRef(pages);
-  pagesRef.current = pages;
-  const setSelectedElementRef = useRef(setSelectedElement);
-  setSelectedElementRef.current = setSelectedElement;
-  const setSelectedElementIdsRef = useRef(setSelectedElementIds);
-  setSelectedElementIdsRef.current = setSelectedElementIds;
-  const setDomTreeRef = useRef(setDomTree);
-  setDomTreeRef.current = setDomTree;
-  const setExpandedNodesRef = useRef(setExpandedNodes);
-  setExpandedNodesRef.current = setExpandedNodes;
-  const updatePageFrameRef = useRef(updatePageFrame);
-  updatePageFrameRef.current = updatePageFrame;
-  const activeToolRef = useRef(activeTool);
-  activeToolRef.current = activeTool;
-  const focusPageRef = useRef(focusPage);
-  focusPageRef.current = focusPage;
-  const layoutModeRef = useRef(layoutMode);
-  layoutModeRef.current = layoutMode;
-
-  // --- Global Undo/Redo Stack for Multi-Page ---
-  // A single sequential timeline across all iframes
-  const globalUndoStackRef = useRef<{ pageId: string; html: string }[]>([]);
-  const globalRedoStackRef = useRef<{ pageId: string; html: string }[]>([]);
-
-  const canUndo = useCallback(() => globalUndoStackRef.current.length > 0, []);
-  const canRedo = useCallback(() => globalRedoStackRef.current.length > 0, []);
-
-  const performGlobalUndo = useCallback(() => {
-    const stack = globalUndoStackRef.current;
-    if (stack.length === 0) return;
-
-    const lastAction = stack.pop()!;
-    const targetIframe = containerRef.current?.querySelector(`iframe[data-page-id="${lastAction.pageId}"]`) as HTMLIFrameElement;
-    const targetDoc = targetIframe?.contentDocument || targetIframe?.contentWindow?.document;
-    const targetArtboard = targetDoc?.getElementById('artboard');
-    
-    if (!targetArtboard || !targetDoc) {
-      stack.push(lastAction);
-      return;
+    if (initialViewDoneRef.current || pages.length === 0) return;
+    const el = containerRef.current;
+    if (!el || el.clientWidth === 0) return;
+    initialViewDoneRef.current = true;
+    if (initialViewRestored) {
+      const { canvasOffset: o, canvasZoom: z } = canvas.viewStore.get();
+      const left = o.x + bounds.minX * z;
+      const top = o.y + bounds.minY * z;
+      const right = o.x + bounds.maxX * z;
+      const bottom = o.y + bounds.maxY * z;
+      const intersects = right > 0 && left < el.clientWidth && bottom > 0 && top < el.clientHeight;
+      if (intersects) return;
     }
-
-    globalRedoStackRef.current.push({
-      pageId: lastAction.pageId,
-      html: targetArtboard.innerHTML
-    });
-
-    targetArtboard.innerHTML = lastAction.html;
-    
-    // Clear selections explicitly at context level
-    setSelectedElementRef.current(null);
-    setSelectedElementIdsRef.current([]);
-
-    // Trigger update
-    updatePageFrameRef.current(lastAction.pageId, {
-      thumbnailHtml: lastAction.html,
-      isDirty: true,
-    });
-
-    // Fix Tree
-    const tree = buildDomTree(targetDoc);
-    setDomTreeRef.current(tree);
+    if (activePageId) zoomToPage(activePageId);
+    else zoomToFit();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pages.length, activePageId]);
+
+  const [hoverId, setHoverId] = useState<string | null>(null);
+  const handleHover = useCallback((id: string | null) => {
+    setHoverId((prev) => (id === null ? null : id === prev ? prev : id));
   }, []);
 
-  const performGlobalRedo = useCallback(() => {
-    const redoStack = globalRedoStackRef.current;
-    if (redoStack.length === 0) return;
-
-    const nextAction = redoStack.pop()!;
-    const targetIframe = containerRef.current?.querySelector(`iframe[data-page-id="${nextAction.pageId}"]`) as HTMLIFrameElement;
-    const targetDoc = targetIframe?.contentDocument || targetIframe?.contentWindow?.document;
-    const targetArtboard = targetDoc?.getElementById('artboard');
-    
-    if (!targetArtboard || !targetDoc) {
-      redoStack.push(nextAction);
-      return;
-    }
-
-    globalUndoStackRef.current.push({
-      pageId: nextAction.pageId,
-      html: targetArtboard.innerHTML
-    });
-
-    targetArtboard.innerHTML = nextAction.html;
-    
-    setSelectedElementRef.current(null);
-    setSelectedElementIdsRef.current([]);
-
-    updatePageFrameRef.current(nextAction.pageId, {
-      thumbnailHtml: nextAction.html,
-      isDirty: true,
-    });
-
-    const tree = buildDomTree(targetDoc);
-    setDomTreeRef.current(tree);
-  }, []);
-
-  // Register these globally to the Toolbar Context
-  useEffect(() => {
-    if (registerUndoHandlers) {
-      registerUndoHandlers({
-        undo: performGlobalUndo,
-        redo: performGlobalRedo,
-        canUndo,
-        canRedo,
-      });
-    }
-  }, [performGlobalUndo, performGlobalRedo, canUndo, canRedo, registerUndoHandlers]);
-
-  /**
-   * 各ページのiframeに完全な編集機能を初期化
-   * 親コンテキストから直接 updateSelectionBox / extractElementInfo を使用
-   */
-  const handlePageIframeLoad = useCallback((pageId: string, iframe: HTMLIFrameElement) => {
-    iframeMapRef.current.set(pageId, iframe);
-
-    const iframeDoc = iframe.contentDocument;
-    if (!iframeDoc) return;
-
-    // 既に初期化済みなら何もしない
-    if (iframeDoc.querySelector('[data-canvas-editor-css]')) return;
-
-    // ===== 1. CSS注入 =====
-    const style = iframeDoc.createElement('style');
-    style.setAttribute('data-canvas-editor-css', 'true');
-    style.textContent = EDITOR_IFRAME_STYLES + CANVAS_EDITING_STYLES;
-    iframeDoc.head.appendChild(style);
-
-    // ===== 1.1 data-editable属性の補完 =====
-    // レイアウトモード変換で必要な data-editable="true" を #artboard 直下の子要素に付与
-    const artboard = iframeDoc.getElementById('artboard');
-    if (artboard) {
-      Array.from(artboard.children).forEach(child => {
-        if (child.nodeType !== 1) return;
-        if (child.tagName === 'SCRIPT' || child.tagName === 'STYLE') return;
-        if (!child.hasAttribute('data-editable')) {
-          child.setAttribute('data-editable', 'true');
-        }
-      });
-    }
-
-    // ===== 1.5 iframe内ブラウザズーム防止 =====
-    let meta = iframeDoc.querySelector('meta[name="viewport"]');
-    if (!meta) {
-      meta = iframeDoc.createElement('meta');
-      meta.setAttribute('name', 'viewport');
-      iframeDoc.head.appendChild(meta);
-    }
-    meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0');
-
-    iframeDoc.body.style.touchAction = 'none';
-    iframeDoc.documentElement.style.touchAction = 'none';
-
-    // === ブラウザネイティブズーム防止徹底 ===
-    const preventZoom = (e: WheelEvent) => {
-      if (e.ctrlKey || e.metaKey) {
-        e.preventDefault();
-      }
-    };
-    iframeDoc.addEventListener('wheel', preventZoom, { passive: false, capture: true });
-    iframe.contentWindow?.addEventListener('wheel', preventZoom, { passive: false, capture: true });
-
-    const preventGesture = (e: Event) => { e.preventDefault(); e.stopPropagation(); };
-    iframeDoc.addEventListener('gesturestart', preventGesture, { passive: false, capture: true } as EventListenerOptions);
-    iframeDoc.addEventListener('gesturechange', preventGesture, { passive: false, capture: true } as EventListenerOptions);
-    iframeDoc.addEventListener('gestureend', preventGesture, { passive: false, capture: true } as EventListenerOptions);
-    iframe.contentWindow?.addEventListener('gesturestart', preventGesture, { passive: false, capture: true } as EventListenerOptions);
-    iframe.contentWindow?.addEventListener('gesturechange', preventGesture, { passive: false, capture: true } as EventListenerOptions);
-    iframe.contentWindow?.addEventListener('gestureend', preventGesture, { passive: false, capture: true } as EventListenerOptions);
-
-    const preventTouch = (e: TouchEvent) => {
-      if (e.touches.length > 1) { e.preventDefault(); e.stopPropagation(); }
-    };
-    iframeDoc.addEventListener('touchstart', preventTouch, { passive: false, capture: true });
-    iframeDoc.addEventListener('touchmove', preventTouch, { passive: false, capture: true });
-    iframe.contentWindow?.addEventListener('touchstart', preventTouch, { passive: false, capture: true });
-    iframe.contentWindow?.addEventListener('touchmove', preventTouch, { passive: false, capture: true });
-
-    const preventShortcuts = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && (e.key === '+' || e.key === '=' || e.key === '-' || e.key === '0')) {
-        e.preventDefault();
-      }
-    };
-    iframeDoc.addEventListener('keydown', preventShortcuts, { passive: false, capture: true });
-    iframe.contentWindow?.addEventListener('keydown', preventShortcuts, { passive: false, capture: true });
-
-    // ===== 2. 編集状態 =====
-    let selectedEl: HTMLElement | null = null;
-
-    let dragState = {
-      element: null as HTMLElement | null,
-      startX: 0,
-      startY: 0,
-      origLeft: 0,
-      origTop: 0,
-      isDragging: false,
-      hasMoved: false,
-      // Auto-layout drag fields
-      autoLayoutDragMode: false,
-      autoLayoutState: null as AutoLayoutDragState | null,
-      originalParent: null as HTMLElement | null,
-      currentDropTarget: null as HTMLElement | null,
-      dropPosition: null as string | null,
-      dropIndex: -1,
-    };
-
-    let resizeState = {
-      isResizing: false,
-      isRotating: false,
-      element: null as HTMLElement | null,
-      handle: '',
-      startX: 0,
-      startY: 0,
-      origLeft: 0,
-      origTop: 0,
-      origWidth: 0,
-      origHeight: 0,
-      origRadius: 0,
-      rotation: 0,
-      rotationStartAngle: 0,
-      centerX: 0,
-      centerY: 0,
-    };
-
-    // ===== 3. ヘルパー関数 =====
-    const wireIframeToRefs = () => {
-      const prevIframe = (refs.iframeRef as React.MutableRefObject<HTMLIFrameElement | null>).current;
-      (refs.iframeRef as React.MutableRefObject<HTMLIFrameElement | null>).current = iframe;
-      if (prevIframe !== iframe) {
-        // iframe切替: useDrawingMode等のiframe依存hookを再アタッチさせる
-        refs.setIframeReady(false);
-        setTimeout(() => refs.setIframeReady(true), 0);
-      } else {
-        refs.setIframeReady(true);
-      }
-    };
-
-    const selectElement = (el: HTMLElement | null) => {
-      // 前の選択を解除
-      if (selectedEl) {
-        selectedEl.classList.remove('selected');
-      }
-      removeSelectionBox(iframeDoc);
-
-      selectedEl = el;
-
-      if (el) {
-        el.classList.add('selected');
-        updateSelectionBox(iframeDoc, el);
-        wireIframeToRefs();
-
-        // プロパティパネル更新
-        const info = extractElementInfo(el, iframeDoc);
-        if (info) {
-          setSelectedElementRef.current(info);
-          setSelectedElementIdsRef.current([info.id]);
-        }
-      } else {
-        setSelectedElementRef.current(null);
-        setSelectedElementIdsRef.current([]);
-      }
-    };
-
-    // iframe単位の `saveSnapshot` 関数内でグローバルスタックに積ませる
-
-    // React更新デバウンス用
-    let notifyTimer: ReturnType<typeof setTimeout> | null = null;
-    const notifyContentChanged = () => {
-      if (notifyTimer) clearTimeout(notifyTimer);
-      notifyTimer = setTimeout(() => {
-        const artboard = iframeDoc.getElementById('artboard');
-        if (artboard) {
-          updatePageFrameRef.current(pageId, {
-            thumbnailHtml: artboard.innerHTML,
-            isDirty: true,
-          });
-        }
-      }, 300);
-    };
-
-    // --- Undo/Redo (Global DOM スナップショット) ---
-    const saveSnapshot = () => {
-      const artboard = iframeDoc.getElementById('artboard');
-      if (!artboard) return;
-
-      const stack = globalUndoStackRef.current;
-      stack.push({ pageId, html: artboard.innerHTML });
-      
-      // Limit global history depth to 100
-      if (stack.length > 100) stack.shift();
-      
-      // 操作が行われたらRedoスタックは破棄
-      globalRedoStackRef.current = [];
-    };
-
-    const performUndo = () => {
-      const stack = globalUndoStackRef.current;
-      if (stack.length === 0) return;
-
-      // Pop the most recent action across ALL pages
-      const lastAction = stack.pop()!;
-      
-      // Find the specific iframe that this action belongs to
-      const targetIframe = containerRef.current?.querySelector(`iframe[data-page-id="${lastAction.pageId}"]`) as HTMLIFrameElement;
-      const targetDoc = targetIframe?.contentDocument || targetIframe?.contentWindow?.document;
-      const targetArtboard = targetDoc?.getElementById('artboard');
-      
-      if (!targetArtboard || !targetDoc) {
-        // Fallback: IF frame not found, push back and abort
-        stack.push(lastAction);
-        return;
-      }
-
-      // Save current state to Redo stack before applying Undo
-      globalRedoStackRef.current.push({
-        pageId: lastAction.pageId,
-        html: targetArtboard.innerHTML
-      });
-
-      // Apply the historical HTML
-      targetArtboard.innerHTML = lastAction.html;
-      
-      // Clear selection gracefully
-      selectElement(null);
-      // Trigger update
-      if (lastAction.pageId === pageId) {
-        notifyContentChanged();
-      } else {
-        // Directly call the update on the target page if different
-        updatePageFrameRef.current(lastAction.pageId, {
-          thumbnailHtml: lastAction.html,
-          isDirty: true,
-        });
-      }
-
-      // Fix Tree
-      const tree = buildDomTree(targetDoc);
-      setDomTreeRef.current(tree);
-    };
-
-    const performRedo = () => {
-      const redoStack = globalRedoStackRef.current;
-      if (redoStack.length === 0) return;
-
-      const nextAction = redoStack.pop()!;
-      
-      // Find the specific iframe
-      const targetIframe = containerRef.current?.querySelector(`iframe[data-page-id="${nextAction.pageId}"]`) as HTMLIFrameElement;
-      const targetDoc = targetIframe?.contentDocument || targetIframe?.contentWindow?.document;
-      const targetArtboard = targetDoc?.getElementById('artboard');
-      
-      if (!targetArtboard || !targetDoc) {
-        redoStack.push(nextAction);
-        return;
-      }
-
-      // Save current state to Undo stack before applying Redo
-      globalUndoStackRef.current.push({
-        pageId: nextAction.pageId,
-        html: targetArtboard.innerHTML
-      });
-
-      // Apply the redo HTML
-      targetArtboard.innerHTML = nextAction.html;
-      
-      selectElement(null);
-      if (nextAction.pageId === pageId) {
-        notifyContentChanged();
-      } else {
-        updatePageFrameRef.current(nextAction.pageId, {
-          thumbnailHtml: nextAction.html,
-          isDirty: true,
-        });
-      }
-
-      const tree = buildDomTree(targetDoc);
-      setDomTreeRef.current(tree);
-    };
-
-    // --- テキスト編集状態 ---
-    let isEditing = false;
-
-    // ===== 4. マウスダウン（選択 + ドラッグ開始 + リサイズハンドル） =====
-    iframeDoc.addEventListener('mousedown', (e) => {
-      const target = e.target as HTMLElement;
-
-      // --- テキスト編集中は通常のマウスイベントを許可 ---
-      if (isEditing) {
-        // 編集中要素の外側クリックで編集終了
-        if (selectedEl && !selectedEl.contains(target)) {
-          selectedEl.contentEditable = 'false';
-          selectedEl.classList.remove('editing');
-          isEditing = false;
-          saveSnapshot();
-          notifyContentChanged();
-          const info = extractElementInfo(selectedEl, iframeDoc);
-          if (info) setSelectedElementRef.current(info);
-        }
-        return;
-      }
-
-      // --- selection-box内（breadcrumb等）のクリックはスキップ ---
-      if (target.closest('.selection-box') && !target.getAttribute('data-handle')) {
-        return;
-      }
-
-      // --- 描画ツールが有効な場合はselection/dragをスキップ ---
-      const drawingTools = ['rectangle', 'ellipse', 'line', 'arrow', 'pen', 'pencil', 'frame', 'text'];
-      if (drawingTools.includes(activeToolRef.current)) {
-        wireIframeToRefs();
-        // useDrawingModeにイベント処理を委譲（preventDefault/stopPropagationしない）
-        return;
-      }
-
-      // --- リサイズ/回転ハンドル ---
-      const handle = target.getAttribute('data-handle');
-      if (handle && selectedEl) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        const rect = selectedEl.getBoundingClientRect();
-        const computedLeft = parseFloat(selectedEl.style.left) || 0;
-        const computedTop = parseFloat(selectedEl.style.top) || 0;
-        const computedStyle = iframeDoc.defaultView?.getComputedStyle(selectedEl);
-
-        if (handle.startsWith('rotate-')) {
-          const transform = selectedEl.style.transform || '';
-          const rotateMatch = transform.match(/rotate\(([^)]+)deg\)/);
-          const currentRotation = rotateMatch ? parseFloat(rotateMatch[1]) : 0;
-          const centerX = rect.left + rect.width / 2;
-          const centerY = rect.top + rect.height / 2;
-          const startAngle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * (180 / Math.PI);
-
-          resizeState = {
-            isResizing: false, isRotating: true, element: selectedEl, handle,
-            startX: e.clientX, startY: e.clientY,
-            origLeft: computedLeft, origTop: computedTop,
-            origWidth: rect.width, origHeight: rect.height,
-            origRadius: 0, rotation: currentRotation, rotationStartAngle: startAngle,
-            centerX, centerY,
-          };
-          iframeDoc.body.classList.add('rotating');
-        } else {
-          resizeState = {
-            isResizing: true, isRotating: false, element: selectedEl, handle,
-            startX: e.clientX, startY: e.clientY,
-            origLeft: computedLeft, origTop: computedTop,
-            origWidth: rect.width, origHeight: rect.height,
-            origRadius: parseInt(computedStyle?.borderRadius || '0') || 0,
-            rotation: 0, rotationStartAngle: 0, centerX: 0, centerY: 0,
-          };
-        }
-        return;
-      }
-
-      // --- 要素選択 + ドラッグ開始 ---
-      // ページフォーカス切替（レイヤーパネル・CSS/JS・設定を正しいページに同期）
-      if (viewStateRef.current.activePageId !== pageId) {
-        focusPageRef.current(pageId);
-      }
-      // PAGE_FOCUSED: レイヤーパネル用DOMツリー構築
-      wireIframeToRefs();
-      const tree = buildDomTree(iframeDoc);
-      setDomTreeRef.current(tree);
-      const firstLevelIds = new Set<string>(tree.map(n => n.id));
-      setExpandedNodesRef.current(firstLevelIds);
-
-      const isMeta = e.ctrlKey || e.metaKey;
-
-      // 既に選択済みの要素内をクリック（Ctrl/Cmd未押下時）→ 再選択せずドラッグ開始
-      // Ctrl/Cmd押下時は子要素選択を優先
-      let dragTarget: HTMLElement;
-      if (!isMeta && selectedEl && (selectedEl === target || selectedEl.contains(target))) {
-        e.preventDefault();
-        e.stopPropagation();
-        dragTarget = selectedEl;
-      } else {
-        // Ctrl/Cmd+クリック: 子要素を直接選択
-        // 通常クリック: トップレベル要素（#artboard直下）を選択
-        let selectable: HTMLElement | null;
-        if (isMeta) {
-          selectable = target.closest('[data-element-id]') as HTMLElement | null;
-          if (selectable && selectable.id === 'artboard') selectable = null;
-        } else {
-          selectable = target.closest('#artboard > [data-element-id]') as HTMLElement | null;
-        }
-        if (!selectable) {
-          selectElement(null);
-          return;
-        }
-
-        e.preventDefault();
-        e.stopPropagation();
-        selectElement(selectable);
-        dragTarget = selectable;
-      }
-
-      // DOM変更前のスナップショット保存（undo用）
-      saveSnapshot();
-
-      if (layoutModeRef.current === 'auto') {
-        // Auto-layout: ドラッグ状態のみ設定（ghost は mousemove で作成）
-        dragState = {
-          element: dragTarget,
-          startX: e.clientX,
-          startY: e.clientY,
-          origLeft: 0,
-          origTop: 0,
-          isDragging: true,
-          hasMoved: false,
-          autoLayoutDragMode: true,
-          autoLayoutState: null,
-          originalParent: dragTarget.parentElement,
-          currentDropTarget: null,
-          dropPosition: null,
-          dropIndex: -1,
-        };
-      } else {
-        // Absolute: ドラッグ準備（絶対配置モード時）
-        const cs = iframeDoc.defaultView?.getComputedStyle(dragTarget);
-        let computedLeft = parseFloat(dragTarget.style.left) || 0;
-        let computedTop = parseFloat(dragTarget.style.top) || 0;
-        if (cs?.position === 'static') {
-          dragTarget.style.position = 'relative';
-          computedLeft = 0;
-          computedTop = 0;
-        }
-
-        dragState = {
-          element: dragTarget,
-          startX: e.clientX,
-          startY: e.clientY,
-          origLeft: computedLeft,
-          origTop: computedTop,
-          isDragging: true,
-          hasMoved: false,
-          autoLayoutDragMode: false,
-          autoLayoutState: null,
-          originalParent: null,
-          currentDropTarget: null,
-          dropPosition: null,
-          dropIndex: -1,
-        };
-      }
-    });
-
-    // ===== 5. マウスムーブ（ドラッグ移動 + リサイズ + 回転） =====
-    iframeDoc.addEventListener('mousemove', (e) => {
-      // --- 回転 ---
-      if (resizeState.isRotating && resizeState.element) {
-        const currentAngle = Math.atan2(
-          e.clientY - resizeState.centerY,
-          e.clientX - resizeState.centerX
-        ) * (180 / Math.PI);
-        const angleDelta = currentAngle - resizeState.rotationStartAngle;
-        const newRotation = resizeState.rotation + angleDelta;
-        const existingTransform = resizeState.element.style.transform || '';
-        const scaleMatch = existingTransform.match(/scale\(([^)]+)\)/);
-        const scaleValue = scaleMatch ? scaleMatch[0] : '';
-        resizeState.element.style.transform = `rotate(${newRotation}deg) ${scaleValue}`.trim();
-        updateSelectionBox(iframeDoc, resizeState.element);
-        return;
-      }
-
-      // --- リサイズ ---
-      if (resizeState.isResizing && resizeState.element) {
-        const deltaX = e.clientX - resizeState.startX;
-        const deltaY = e.clientY - resizeState.startY;
-        const el = resizeState.element;
-        const h = resizeState.handle;
-        let newLeft = resizeState.origLeft;
-        let newTop = resizeState.origTop;
-        let newWidth = resizeState.origWidth;
-        let newHeight = resizeState.origHeight;
-        const minSize = 10;
-
-        if (h === 'radius') {
-          const maxRadius = Math.min(resizeState.origWidth, resizeState.origHeight) / 2;
-          const newRadius = Math.max(0, Math.min(maxRadius, resizeState.origRadius - deltaX - deltaY));
-          el.style.borderRadius = `${newRadius}px`;
-          updateSelectionBox(iframeDoc, el);
-          return;
-        }
-
-        switch (h) {
-          case 'nw': newWidth = Math.max(minSize, resizeState.origWidth - deltaX); newHeight = Math.max(minSize, resizeState.origHeight - deltaY); newLeft = resizeState.origLeft + (resizeState.origWidth - newWidth); newTop = resizeState.origTop + (resizeState.origHeight - newHeight); break;
-          case 'n': newHeight = Math.max(minSize, resizeState.origHeight - deltaY); newTop = resizeState.origTop + (resizeState.origHeight - newHeight); break;
-          case 'ne': newWidth = Math.max(minSize, resizeState.origWidth + deltaX); newHeight = Math.max(minSize, resizeState.origHeight - deltaY); newTop = resizeState.origTop + (resizeState.origHeight - newHeight); break;
-          case 'e': newWidth = Math.max(minSize, resizeState.origWidth + deltaX); break;
-          case 'se': newWidth = Math.max(minSize, resizeState.origWidth + deltaX); newHeight = Math.max(minSize, resizeState.origHeight + deltaY); break;
-          case 's': newHeight = Math.max(minSize, resizeState.origHeight + deltaY); break;
-          case 'sw': newWidth = Math.max(minSize, resizeState.origWidth - deltaX); newHeight = Math.max(minSize, resizeState.origHeight + deltaY); newLeft = resizeState.origLeft + (resizeState.origWidth - newWidth); break;
-          case 'w': newWidth = Math.max(minSize, resizeState.origWidth - deltaX); newLeft = resizeState.origLeft + (resizeState.origWidth - newWidth); break;
-        }
-
-        const cs = iframeDoc.defaultView?.getComputedStyle(el);
-        if (cs?.position !== 'absolute' && cs?.position !== 'fixed') {
-          el.style.position = 'absolute';
-        }
-        el.style.left = `${newLeft}px`;
-        el.style.top = `${newTop}px`;
-        el.style.width = `${newWidth}px`;
-        el.style.height = `${newHeight}px`;
-        updateSelectionBox(iframeDoc, el);
-        return;
-      }
-
-      // --- ドラッグ移動 ---
-      if (dragState.isDragging && dragState.element) {
-        const dx = e.clientX - dragState.startX;
-        const dy = e.clientY - dragState.startY;
-        if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
-          if (dragState.autoLayoutDragMode) {
-            // Auto-layout: Ghost clone ドラッグ
-            if (!dragState.hasMoved) {
-              dragState.hasMoved = true;
-              // scale=1: iframe内は1:1、外側CSSトランスフォームがズーム担当
-              dragState.autoLayoutState = startAutoLayoutDrag(dragState.element, iframeDoc, 1);
-              removeSelectionBox(iframeDoc);
-            }
-            if (dragState.autoLayoutState) {
-              updateDragPosition(dragState.autoLayoutState, e.clientX, e.clientY);
-              const dropInfo = findDropTarget(iframeDoc, e.clientX, e.clientY, dragState.element);
-              if (dropInfo) {
-                showDropIndicator(iframeDoc, dropInfo, dragState.element);
-                dragState.currentDropTarget = dropInfo.container;
-                dragState.dropPosition = dropInfo.position;
-                dragState.dropIndex = dropInfo.index;
-              } else {
-                hideFlexDropIndicator(iframeDoc);
-                dragState.currentDropTarget = null;
-                dragState.dropPosition = null;
-                dragState.dropIndex = -1;
-              }
-            }
-          } else {
-            // Absolute: 既存の left/top ドラッグ
-            dragState.hasMoved = true;
-            dragState.element.classList.add('dragging');
-            dragState.element.style.left = `${dragState.origLeft + dx}px`;
-            dragState.element.style.top = `${dragState.origTop + dy}px`;
-            updateSelectionBox(iframeDoc, dragState.element);
-          }
-        }
-      }
-    });
-
-    // ===== 6. マウスアップ =====
-    iframeDoc.addEventListener('mouseup', () => {
-      // 回転終了
-      if (resizeState.isRotating && resizeState.element) {
-        iframeDoc.body.classList.remove('rotating');
-        notifyContentChanged();
-        const info = extractElementInfo(resizeState.element, iframeDoc);
-        if (info) setSelectedElementRef.current(info);
-      }
-      // リサイズ終了
-      else if (resizeState.isResizing && resizeState.element) {
-        notifyContentChanged();
-        const info = extractElementInfo(resizeState.element, iframeDoc);
-        if (info) setSelectedElementRef.current(info);
-      }
-
-      resizeState = {
-        isResizing: false, isRotating: false, element: null, handle: '',
-        startX: 0, startY: 0, origLeft: 0, origTop: 0,
-        origWidth: 0, origHeight: 0, origRadius: 0,
-        rotation: 0, rotationStartAngle: 0, centerX: 0, centerY: 0,
-      };
-
-      // ドラッグ終了
-      if (dragState.isDragging && dragState.element) {
-        if (dragState.autoLayoutDragMode && dragState.autoLayoutState) {
-          // Auto-layout ドラッグ終了
-          const autoState = dragState.autoLayoutState;
-
-          // ドロップ先を構築（artboard内のみ許可）
-          let dropInfo: DropTargetInfo | null = null;
-          if (dragState.currentDropTarget && dragState.dropPosition !== null) {
-            const artboard = iframeDoc.getElementById('artboard');
-            const isValidDrop = dragState.currentDropTarget === artboard ||
-              (artboard && artboard.contains(dragState.currentDropTarget));
-            if (isValidDrop) {
-              dropInfo = {
-                container: dragState.currentDropTarget,
-                position: dragState.dropPosition as 'before' | 'after' | 'inside',
-                index: dragState.dropIndex,
-                referenceElement: null,
-              };
-            }
-          }
-
-          const domChanged = endAutoLayoutDrag(autoState, dropInfo, iframeDoc);
-          if (domChanged) {
-            notifyContentChanged();
-            const tree = buildDomTree(iframeDoc);
-            setDomTreeRef.current(tree);
-          }
-
-          // 選択ボックス更新（DOM安定後）
-          const droppedElement = dragState.element;
-          setTimeout(() => {
-            if (droppedElement) {
-              updateSelectionBox(iframeDoc, droppedElement);
-              const info = extractElementInfo(droppedElement, iframeDoc);
-              if (info) setSelectedElementRef.current(info);
-            }
-          }, 0);
-        } else {
-          // Absolute: 既存のドラッグ終了
-          dragState.element.classList.remove('dragging');
-          if (dragState.hasMoved) {
-            notifyContentChanged();
-            // プロパティパネル更新
-            const info = extractElementInfo(dragState.element, iframeDoc);
-            if (info) setSelectedElementRef.current(info);
-          }
-        }
-      }
-      dragState = {
-        element: null, startX: 0, startY: 0,
-        origLeft: 0, origTop: 0, isDragging: false, hasMoved: false,
-        autoLayoutDragMode: false, autoLayoutState: null,
-        originalParent: null, currentDropTarget: null,
-        dropPosition: null, dropIndex: -1,
-      };
-    });
-
-    // ===== 7. キーボードショートカット =====
-    iframeDoc.addEventListener('keydown', (e) => {
-      // テキスト編集中はEscape以外のショートカットを無効化
-      if (isEditing) {
-        if (e.key === 'Escape') {
-          e.preventDefault();
-          if (selectedEl) {
-            selectedEl.contentEditable = 'false';
-            selectedEl.classList.remove('editing');
-            isEditing = false;
-            saveSnapshot();
-            notifyContentChanged();
-            updateSelectionBox(iframeDoc, selectedEl);
-            const info = extractElementInfo(selectedEl, iframeDoc);
-            if (info) setSelectedElementRef.current(info);
-          }
-        }
-        return;
-      }
-
-      const isMeta = e.ctrlKey || e.metaKey;
-
-      // Undo (per-iframe DOM snapshot)
-      if (isMeta && e.key === 'z' && !e.shiftKey) {
-        e.preventDefault();
-        performUndo();
-        return;
-      }
-      // Redo (per-iframe DOM snapshot)
-      if (isMeta && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
-        e.preventDefault();
-        performRedo();
-        return;
-      }
-
-      if (!selectedEl) return;
-
-      // Delete / Backspace
-      if (e.key === 'Delete' || e.key === 'Backspace') {
-        e.preventDefault();
-        saveSnapshot();
-        const el = selectedEl;
-        selectElement(null);
-        el.remove();
-        notifyContentChanged();
-        // DOMツリー再構築
-        const tree = buildDomTree(iframeDoc);
-        setDomTreeRef.current(tree);
-        return;
-      }
-
-      // Arrow keys (nudge)
-      if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
-        e.preventDefault();
-        const n = e.shiftKey ? 10 : 1;
-        const cs = iframeDoc.defaultView?.getComputedStyle(selectedEl);
-        if (cs?.position === 'static') selectedEl.style.position = 'relative';
-        const cl = parseFloat(selectedEl.style.left) || 0;
-        const ct = parseFloat(selectedEl.style.top) || 0;
-        if (e.key === 'ArrowLeft') selectedEl.style.left = `${cl - n}px`;
-        if (e.key === 'ArrowRight') selectedEl.style.left = `${cl + n}px`;
-        if (e.key === 'ArrowUp') selectedEl.style.top = `${ct - n}px`;
-        if (e.key === 'ArrowDown') selectedEl.style.top = `${ct + n}px`;
-        updateSelectionBox(iframeDoc, selectedEl);
-        notifyContentChanged();
-        return;
-      }
-
-      // Escape
-      if (e.key === 'Escape') {
-        // 進行中のオートレイアウトドラッグをキャンセル
-        if (dragState.autoLayoutDragMode && dragState.autoLayoutState) {
-          cancelAutoLayoutDrag(dragState.autoLayoutState, iframeDoc);
-          dragState = {
-            element: null, startX: 0, startY: 0,
-            origLeft: 0, origTop: 0, isDragging: false, hasMoved: false,
-            autoLayoutDragMode: false, autoLayoutState: null,
-            originalParent: null, currentDropTarget: null,
-            dropPosition: null, dropIndex: -1,
-          };
-        }
-        selectElement(null);
-        return;
-      }
-
-      // Duplicate (Ctrl+D)
-      if (isMeta && e.key === 'd') {
-        e.preventDefault();
-        saveSnapshot();
-        const clone = selectedEl.cloneNode(true) as HTMLElement;
-        // 新しいIDを付与
-        let idCounter = iframeDoc.querySelectorAll('[data-element-id]').length;
-        clone.setAttribute('data-element-id', 'el-' + (idCounter++));
-        const assignNewIds = (parent: Element) => {
-          Array.from(parent.children).forEach(child => {
-            if (child.nodeType === 1 && child.tagName !== 'SCRIPT' && child.tagName !== 'STYLE') {
-              (child as HTMLElement).setAttribute('data-element-id', 'el-' + (idCounter++));
-              assignNewIds(child);
-            }
-          });
-        };
-        assignNewIds(clone);
-        // オフセット配置
-        const left = parseFloat(clone.style.left) || 0;
-        const top = parseFloat(clone.style.top) || 0;
-        clone.style.left = `${left + 20}px`;
-        clone.style.top = `${top + 20}px`;
-        clone.classList.remove('selected');
-        selectedEl.parentElement?.appendChild(clone);
-        selectElement(clone);
-        notifyContentChanged();
-        const tree = buildDomTree(iframeDoc);
-        setDomTreeRef.current(tree);
-        return;
-      }
-    });
-
-    // ===== 8. リンクナビゲーション防止 =====
-    iframeDoc.addEventListener('click', (e) => {
-      const anchor = (e.target as HTMLElement).closest('a');
-      if (anchor) e.preventDefault();
-    }, true);
-
-    // ===== 8.5 コンテキストメニュー（右クリック） =====
-    iframeDoc.addEventListener('contextmenu', (e) => {
+  // Space・中ボタン・手のひらツールの間は、iframe に触らせず容器がパンを受ける
+  const passThrough = isSpaceHeld || isPanning || activeTool === 'move';
+  const passThroughRef = useRef(passThrough);
+  passThroughRef.current = passThrough;
+  const activePageIdRef = useRef(activePageId);
+  activePageIdRef.current = activePageId;
+
+  const handleFrameMouseDown = useCallback(
+    (e: React.MouseEvent, id: string) => {
+      if (e.button !== 0 || passThroughRef.current) return;
+      if (id === activePageIdRef.current) return;
       e.preventDefault();
-      e.stopPropagation();
-
-      // テキスト編集中はスキップ
-      if (isEditing) return;
-
-      // ページフォーカス切替
-      if (viewStateRef.current.activePageId !== pageId) {
-        focusPageRef.current(pageId);
-        wireIframeToRefs();
-      }
-
-      const target = e.target as HTMLElement;
-
-      // 右クリックされた要素を選択（選択済み要素の内部なら維持）
-      if (!target.closest('.selection-box')) {
-        const isInsideSelected = selectedEl && (selectedEl === target || selectedEl.contains(target) || target.contains(selectedEl));
-        if (!isInsideSelected) {
-          const selectable = target.closest('#artboard > [data-element-id]') as HTMLElement | null;
-          if (selectable) {
-            wireIframeToRefs();
-            selectElement(selectable);
-          }
-        }
-      }
-
-      // スクリーン座標を計算（iframe内座標 → 親ウィンドウ座標）
-      const iframeRect = iframe.getBoundingClientRect();
-      const scaleX = iframeRect.width / (iframe.clientWidth || 1);
-      const scaleY = iframeRect.height / (iframe.clientHeight || 1);
-
-      window.parent.postMessage({
-        type: 'IFRAME_CONTEXT_MENU',
-        clientX: iframeRect.left + e.clientX * scaleX,
-        clientY: iframeRect.top + e.clientY * scaleY,
-      }, '*');
-    });
-
-    // ===== 9. ダブルクリックでテキスト編集（選択済み要素のみ） =====
-    iframeDoc.addEventListener('dblclick', (e) => {
-      const target = e.target as HTMLElement;
-      if (target.closest('.selection-box')) return;
-
-      // ページフォーカス切替
-      if (viewStateRef.current.activePageId !== pageId) {
-        focusPageRef.current(pageId);
-        wireIframeToRefs();
-      }
-
-      // data-element-idを持つ最も近い要素を検索
-      const editable = target.closest('[data-element-id]') as HTMLElement | null;
-      if (!editable || editable.id === 'artboard') return;
-
-      // 選択済み要素、またはその親要素が選択済みの場合のみ編集モードに入る
-      if (!selectedEl || (editable !== selectedEl && !selectedEl.contains(editable) && !editable.contains(selectedEl))) {
-        return;
-      }
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      // スナップショット保存（編集前状態）
-      saveSnapshot();
-
-      // 編集対象を決定（selectedElの子孫をダブルクリックした場合はその要素を編集）
-      const editTarget = editable.contains(selectedEl) ? selectedEl : editable;
-      selectElement(editTarget);
-      selectedEl = editTarget;
-
-      // contentEditable有効化
-      editTarget.contentEditable = 'true';
-      editTarget.classList.add('editing');
-      editTarget.classList.remove('selected');
-      isEditing = true;
-
-      // selection boxを非表示（テキスト選択と干渉するため）
-      removeSelectionBox(iframeDoc);
-
-      // フォーカスしてカーソル配置
-      editTarget.focus();
-
-      // ダブルクリック位置にカーソルを配置
-      const selection = iframeDoc.defaultView?.getSelection();
-      if (selection) {
-        const range = iframeDoc.caretRangeFromPoint?.(e.clientX, e.clientY);
-        if (range) {
-          selection.removeAllRanges();
-          selection.addRange(range);
-        }
-      }
-    });
-
-    // ===== 10. 描画ツール用: マウスが入った時にiframeを事前ワイヤリング =====
-    iframeDoc.addEventListener('pointerenter', () => {
-      const dTools = ['rectangle', 'ellipse', 'line', 'arrow', 'pen', 'pencil', 'frame', 'text'];
-      if (dTools.includes(activeToolRef.current)) {
-        if (viewStateRef.current.activePageId !== pageId) {
-          focusPageRef.current(pageId);
-        }
-        wireIframeToRefs();
-      }
-    });
-
-    // ===== 11. 初期DOMツリー構築 =====
-    setTimeout(() => {
-      wireIframeToRefs();
-      const tree = buildDomTree(iframeDoc);
-      setDomTreeRef.current(tree);
-      const firstLevelIds = new Set<string>(tree.map(n => n.id));
-      setExpandedNodesRef.current(firstLevelIds);
-    }, 600);
-  }, [refs]);
-
-  // ===== 描画ツール: 全iframeのbody classを同期 =====
-  useEffect(() => {
-    const drawingTools = ['rectangle', 'ellipse', 'line', 'arrow', 'pen', 'pencil', 'frame'];
-    const isDrawing = drawingTools.includes(activeTool);
-    const isText = activeTool === 'text';
-
-    for (const [, iframe] of iframeMapRef.current) {
-      const doc = iframe.contentDocument;
-      if (!doc?.body) continue;
-
-      doc.body.classList.remove(
-        'draw-mode', 'text-mode', 'move-mode',
-        'tool-rectangle', 'tool-ellipse', 'tool-line', 'tool-arrow',
-        'tool-pen', 'tool-pencil', 'tool-text', 'tool-frame'
-      );
-
-      if (isDrawing) {
-        doc.body.classList.add('draw-mode', `tool-${activeTool}`);
-      } else if (isText) {
-        doc.body.classList.add('text-mode', 'tool-text');
-      }
-    }
-  }, [activeTool]);
-
-  // ===== ホイール転送メッセージ処理 =====
-  useEffect(() => {
-    const handleMessage = (e: MessageEvent) => {
-      // ホイール転送 → キャンバスズーム/パン
-      if (e.data?.type === 'PAGE_PREVIEW_WHEEL') {
-        const container = containerRef.current;
-        if (!container) return;
-
-        const vs = viewStateRef.current;
-        const co = vs.canvasOffset;
-        const cz = vs.canvasZoom;
-
-        if (e.data.ctrlKey || e.data.metaKey) {
-          const rect = container.getBoundingClientRect();
-          const mouseX = rect.width / 2;
-          const mouseY = rect.height / 2;
-
-          const delta = -(e.data.deltaY || 0);
-          const factor = delta > 0 ? 1.05 : 0.95;
-          const newZoom = Math.max(0.02, Math.min(2.0, cz * factor));
-
-          setCanvasZoom(newZoom);
-          setCanvasOffset({
-            x: mouseX - (mouseX - co.x) * (newZoom / cz),
-            y: mouseY - (mouseY - co.y) * (newZoom / cz),
-          });
-        } else {
-          setCanvasOffset({
-            x: co.x - (e.data.deltaX || 0),
-            y: co.y - (e.data.deltaY || 0),
-          });
-        }
-      }
-
-      // タッチ転送 → ピンチズーム
-      if (e.data?.type === 'PAGE_PREVIEW_TOUCH' && e.data.touchType === 'move') {
-        const container = containerRef.current;
-        if (!container) return;
-        const touches = e.data.touches;
-        const prevTouches = e.data.prevTouches;
-        if (!touches || touches.length < 2 || !prevTouches || prevTouches.length < 2) return;
-
-        const vs = viewStateRef.current;
-        const co = vs.canvasOffset;
-        const cz = vs.canvasZoom;
-
-        // ピンチ距離計算
-        const prevDist = Math.hypot(
-          prevTouches[0].clientX - prevTouches[1].clientX,
-          prevTouches[0].clientY - prevTouches[1].clientY
-        );
-        const currDist = Math.hypot(
-          touches[0].clientX - touches[1].clientX,
-          touches[0].clientY - touches[1].clientY
-        );
-        if (prevDist === 0) return;
-
-        const scale = currDist / prevDist;
-        const newZoom = Math.max(0.02, Math.min(2.0, cz * scale));
-
-        const rect = container.getBoundingClientRect();
-        const centerX = (touches[0].clientX + touches[1].clientX) / 2 - rect.left;
-        const centerY = (touches[0].clientY + touches[1].clientY) / 2 - rect.top;
-
-        setCanvasZoom(newZoom);
-        setCanvasOffset({
-          x: centerX - (centerX - co.x) * (newZoom / cz),
-          y: centerY - (centerY - co.y) * (newZoom / cz),
-        });
-      }
-
-      // breadcrumb-select: パンくずクリックで要素選択
-      if (e.data?.type === 'breadcrumb-select' && e.data.elementId) {
-        for (const [, iframe] of iframeMapRef.current) {
-          if (e.source === iframe.contentWindow) {
-            const iframeDoc = iframe.contentDocument;
-            if (!iframeDoc) break;
-            const targetEl = iframeDoc.querySelector(`[data-element-id="${e.data.elementId}"]`) as HTMLElement;
-            if (targetEl) {
-              // 既存の選択を解除
-              const existingSelected = iframeDoc.querySelector('.selected');
-              if (existingSelected) existingSelected.classList.remove('selected');
-              removeSelectionBox(iframeDoc);
-              // 新しい要素を選択
-              targetEl.classList.add('selected');
-              updateSelectionBox(iframeDoc, targetEl);
-              // refs更新 + パネル更新
-              (refs.iframeRef as React.MutableRefObject<HTMLIFrameElement | null>).current = iframe;
-              refs.setIframeReady(true);
-              const info = extractElementInfo(targetEl, iframeDoc);
-              if (info) {
-                setSelectedElementRef.current(info);
-                setSelectedElementIdsRef.current([info.id]);
-              }
-            }
-            break;
-          }
-        }
-      }
-
-      // 描画ツール/画像アップロード後のページフレーム同期
-      if (e.data?.type === 'DOM_TREE_UPDATED') {
-        const currentIframe = (refs.iframeRef as React.MutableRefObject<HTMLIFrameElement | null>).current;
-        if (currentIframe) {
-          for (const [pid, ifr] of iframeMapRef.current) {
-            if (ifr === currentIframe) {
-              const doc = ifr.contentDocument;
-              if (doc) {
-                const artboard = doc.getElementById('artboard');
-                if (artboard) {
-                  updatePageFrameRef.current(pid, {
-                    thumbnailHtml: artboard.innerHTML,
-                    isDirty: true,
-                  });
-                }
-              }
-              break;
-            }
-          }
-        }
-      }
-
-      // コンテンツ高さ通知
-      if (e.data?.type === 'PAGE_CONTENT_HEIGHT') {
-        const { pageId, height } = e.data;
-        if (pageId && typeof height === 'number' && height > 0) {
-          const existingPage = pagesRef.current.find(p => p.id === pageId);
-          if (existingPage && Math.abs(existingPage.size.height - height) > 10) {
-            updatePageFrame(pageId, { size: { width: existingPage.size.width, height } });
-          }
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-    return () => window.removeEventListener('message', handleMessage);
-  }, [setCanvasZoom, setCanvasOffset, updatePageFrame, refs]);
-
-  // スペースキーでiframeのpointer-eventsを一時無効化（パンモード）
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.code === 'Space' && !e.repeat) {
-        const container = containerRef.current;
-        if (!container) return;
-        container.querySelectorAll('iframe').forEach(iframe => {
-          (iframe as HTMLElement).style.pointerEvents = 'none';
-        });
-      }
-    };
+      void activatePage(id);
+    },
+    [activatePage],
+  );
+  const handleActivate = useCallback((id: string) => { void activatePage(id, { reveal: true }); }, [activatePage]);
+  const handleZoomTo = useCallback((id: string) => zoomToPage(id, { animate: true }), [zoomToPage]);
 
-    const handleKeyUp = (e: KeyboardEvent) => {
-      if (e.code === 'Space') {
-        const container = containerRef.current;
-        if (!container) return;
-        container.querySelectorAll('iframe').forEach(iframe => {
-          (iframe as HTMLElement).style.pointerEvents = '';
-        });
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    window.addEventListener('keyup', handleKeyUp);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-      window.removeEventListener('keyup', handleKeyUp);
-    };
-  }, []);
+  const cursor = isPanning ? 'grabbing' : isSpaceHeld || activeTool === 'move' ? 'grab' : undefined;
+  // 行の隙間(画面上)に名前が収まらない倍率では名前を出さない。出すと下の行の名前が
+  // 上の行のフレームに被り、フレームのクリックを奪う(150 枚の全体表示で実測)
+  const labelsVisible = FRAME_GAP[canvas.editorMode].y * canvasZoom >= LABEL_HEIGHT + 6;
+  // data-interacting はズーム・パン中の印(CSS・検証用のフック。中では willChange に使う)
+  const layerTransform = `translate(${canvasOffset.x}px, ${canvasOffset.y}px) scale(${canvasZoom})`;
+  const overlayTransform = `translate(${canvasOffset.x}px, ${canvasOffset.y}px)`;
 
   return (
     <div
       ref={containerRef}
       data-infinite-canvas="true"
-      className="absolute inset-0 overflow-hidden select-none overscroll-none"
-      style={{ backgroundColor: '#1a1a1a', touchAction: 'none', overscrollBehavior: 'none' }}
+      data-canvas-zoom={Math.round(canvasZoom * 100)}
+      data-interacting={isInteracting ? 'true' : undefined}
+      className="absolute inset-0 overflow-hidden select-none"
+      style={{ background: 'var(--ed-canvas, var(--ed-bg))', cursor, touchAction: 'none', overscrollBehavior: 'none' }}
+      onMouseDown={onMarqueeMouseDown}
     >
-      {/* ドットグリッド背景 */}
-      <div
-        className="absolute inset-0 pointer-events-none"
-        style={{
-          backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px)`,
-          backgroundSize: `${24 * canvasZoom}px ${24 * canvasZoom}px`,
-          backgroundPosition: `${canvasOffset.x % (24 * canvasZoom)}px ${canvasOffset.y % (24 * canvasZoom)}px`,
-        }}
-      />
-
-      {/* CSS transform 無限キャンバス */}
+      {/* 転写層 */}
       <div
-        className="canvas-transform-layer"
+        data-canvas-transform-layer
+        className="absolute left-0 top-0"
         style={{
-          transform: `translate(${canvasOffset.x}px, ${canvasOffset.y}px) scale(${canvasZoom})`,
+          transform: layerTransform,
           transformOrigin: '0 0',
-          willChange: 'transform',
+          willChange: isInteracting ? 'transform' : undefined,
         }}
       >
-        {/*
-          * イベントキャプチャ用オーバーレイ
-          * ズームやスクロール中にiframeをまたぐとイベントが途切れる問題を防ぐため、
-          * ホイールやタッチ操作中のみポインターイベントを横取りする
-          */}
-        <div
-          className="absolute inset-x-0 inset-y-0 z-50 transition-opacity duration-150"
-          style={{
-            pointerEvents: isInteracting ? 'auto' : 'none',
-            opacity: 0
-          }}
-        />
+        {pages.map((page) => (
+          <FrameShell
+            key={page.id}
+            page={page}
+            zoom={canvasZoom}
+            isActive={page.id === activePageId}
+            passThrough={passThrough}
+            rootRef={containerRef}
+            onMouseDown={handleFrameMouseDown}
+            onHover={handleHover}
+          />
+        ))}
 
-        {/* 全ページ: 同時編集可能 */}
-        {pages.map(page => (
+        {/* 生きているエディタ(1 つだけ)。編集中のフレームの上に重ねる。
+            新しい本文を読み込んでいる間は隠す(前のページの姿が新しい枠に見えない。
+            下の見るだけの紙面が透けて、読み込みが済んだところで差し替わる) */}
+        {active && (
           <div
-            key={page.id}
+            data-editor-frame={active.id}
+            data-editor-ready={iframeReady ? 'true' : 'false'}
             className="absolute"
             style={{
-              left: page.position.x,
-              top: page.position.y,
-              width: page.size.width,
-              height: page.size.height,
+              left: active.position.x,
+              top: active.position.y,
+              width: active.size.width,
+              height: active.size.height,
+              // 余白からのマーキー中は親が最後まで受ける(iframe に入ると mouseup が親に来ない)
+              pointerEvents: passThrough || marqueeArmed ? 'none' : 'auto',
+              visibility: iframeReady ? 'visible' : 'hidden',
             }}
           >
-            <PageLabel
-              title={page.title}
-              isDirty={page.isDirty}
-            />
-
-            <div className="w-full h-full bg-white rounded-sm shadow-lg overflow-hidden">
-              <PageLivePreview
-                html={page.thumbnailHtml}
-                pageId={page.id}
-                onIframeLoad={handlePageIframeLoad}
-              />
-            </div>
+            <EditorCanvas />
           </div>
-        ))}
+        )}
       </div>
 
-      {/* ズームコントロール */}
-      <CanvasZoomControls />
-
-      {/* ページ数表示 */}
-      <div className="absolute top-4 left-4 z-10 text-xs text-gray-500 select-none">
-        {pages.length} pages
+      {/* 画面座標のオーバーレイ: フレーム名・リング(層ごと平行移動。倍率だけ各要素に渡す) */}
+      <div
+        className="pointer-events-none absolute left-0 top-0 z-10"
+        data-canvas-overlay
+        style={{ transform: overlayTransform, willChange: isInteracting ? 'transform' : undefined }}
+      >
+        {pages.map((page) => {
+          const isSelected = page.id === selectedId;
+          return (
+            <FrameChrome
+              key={page.id}
+              page={page}
+              zoom={canvasZoom}
+              labelsVisible={labelsVisible}
+              isSelected={isSelected}
+              isHover={hoverId === page.id && !isSelected && !passThrough}
+              isBusy={page.loading || page.id === activatingPageId || (page.id === activePageId && !iframeReady)}
+              onActivate={handleActivate}
+              onZoomTo={handleZoomTo}
+            />
+          );
+        })}
       </div>
+
+      {/* 余白から引いたマーキー(画面座標) */}
+      {marqueeRect && (
+        <div
+          className="ed-canvas-marquee"
+          data-canvas-marquee
+          style={{ left: marqueeRect.left, top: marqueeRect.top, width: marqueeRect.width, height: marqueeRect.height }}
+        />
+      )}
+
+      {rulersVisible && <CanvasRulers theme={theme} />}
+
+      {pages.length === 0 && (
+        <div className="absolute inset-0 flex items-center justify-center" style={{ paddingTop: rulersVisible ? RULER_SIZE : 0 }}>
+          <div className="ed-empty">
+            <strong>ページがありません</strong>
+            <span>contentList にページを渡すと、ここに並びます。</span>
+          </div>
+        </div>
+      )}
     </div>
   );
 });