@growgroup/visual-editor 0.3.0 → 0.4.0

package/src/editor/components/comments/CommentBoard.tsx

@@ -21,10 +21,10 @@
  */
 
 import { useState } from 'react';
-import { Check, CornerUpLeft, ExternalLink, MapPin, MessageSquare, RotateCcw, Send, Trash2 } from 'lucide-react';
+import { Check, CornerUpLeft, Crosshair, ExternalLink, MapPin, MessageSquare, RotateCcw, Send, Trash2 } from 'lucide-react';
 import type { Deck, SlideComment } from '../../../lib/deck';
 import { PPT_PALETTES, type PptTheme } from '../ppt/PptChrome';
-import { fmtTime, unresolvedCount } from '../ppt/PptComments';
+import { describeRect, fmtTime, unresolvedCount } from '../ppt/PptComments';
 
 /**
  * アンカー・返信のリンク色。
@@ -368,15 +368,18 @@ function BoardCard({
         </span>
       </div>
 
-      {/* 何に対する指摘か。要素に紐づいていなければページ全体 */}
+      {/* 何に対する指摘か。範囲 > 要素 > ページ全体 */}
       <div
         className="mt-1.5 flex items-center gap-1 text-[10px]"
-        style={{ color: comment.anchorSrc ? accent : pal.sub }}
+        style={{ color: comment.anchorRect || comment.anchorSrc ? accent : pal.sub }}
         title={comment.anchorSrc}
       >
-        <MapPin className="h-3 w-3 shrink-0" />
+        {comment.anchorRect ? <Crosshair className="h-3 w-3 shrink-0" /> : <MapPin className="h-3 w-3 shrink-0" />}
         <span className="truncate">
-          {comment.anchorSrc ? (comment.anchorLabel ? `「${comment.anchorLabel}」` : '要素に添付') : 'ページ全体'}
+          {comment.seq != null && <span className="mr-1 tabular-nums">#{comment.seq}</span>}
+          {comment.anchorRect
+            ? describeRect(comment.anchorRect)
+            : comment.anchorSrc ? (comment.anchorLabel ? `「${comment.anchorLabel}」` : '要素に添付') : 'ページ全体'}
         </span>
       </div>
 

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

@@ -0,0 +1,172 @@
+'use client';
+
+/**
+ * フレームの枠線と階層の線を <canvas> に描く(画面の座標)。
+ *
+ * [なぜ DOM ではなく canvas か]
+ * 枠線を転写層の中の要素に持たせる(box-shadow / outline / border のどれでも)と、
+ * 倍率が変わるたびに転写層まるごとが塗り直される。26 ページで 1 段あたり 10〜20ms、
+ * 30 段の縮小で主スレッドの Paint が 870ms になる(実測)。階層の線(SVG)も同じ。
+ * 逆に、転写層の中身が「白い矩形 + 合成済みの iframe」だけなら 1 段の Paint は 0.5ms 前後。
+ *
+ * 26 ページ・30 段の縮小での実測(DPR 2、CPU 4 倍遅く):
+ *   枠線 box-shadow + 線 SVG … Paint 287 回 / 1293ms、フレーム p95 42ms
+ *   枠線 outline + 線 SVG    … Paint 218 回 /  793ms、フレーム p95 42ms
+ *   どちらも消す(この実装と同じ状態) … Paint  82 回 /   64ms、フレーム p95 25ms
+ *
+ * そこで枠線と線は転写層から出し、画面の座標で 1 枚の canvas に描く。倍率・位置が
+ * 変わるたびに描き直すが、26 本の矩形と 25 本の折れ線を 1600×1000 に描くだけなので
+ * 1ms もかからない。定規(CanvasRulers)と同じ考え方
+ *
+ * [書き方の約束]
+ * - canvas の寸法(width / height / style)は載せたときと容器の大きさが変わったときだけ書く。
+ *   毎段書くと再確保が起き、パン・ズームで style が変わる要素の数も増える(検証が数えている)
+ * - 色は載せたときとテーマが変わったときだけ読む(毎回 getComputedStyle すると同期のレイアウトが走る)
+ */
+
+import { memo, useEffect, useRef } from 'react';
+import { FRAME_GAP, useMultiPageCanvas, type CanvasLayoutKind, type PageFrameLayout } from '../../contexts/MultiPageCanvasContext';
+
+/** 枠線の太さ(画面上の px)。以前の box-shadow: 0 0 0 1px と同じ見え方 */
+const EDGE_WIDTH = 1;
+/** 階層の線の太さ(画面上の px) */
+const CONNECTOR_WIDTH = 1.5;
+
+function readVar(el: HTMLElement, name: string, fallback: string): string {
+  const v = getComputedStyle(el).getPropertyValue(name).trim();
+  return v || fallback;
+}
+
+export const CanvasFrameDecor = memo(function CanvasFrameDecor({ theme }: { theme: 'light' | 'dark' }) {
+  const { pages, layout, editorMode, viewStore } = useMultiPageCanvas();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  // 描き直しの入口。倍率・位置の購読と、ページ・テーマの変化の両方から呼ぶ
+  const drawRef = useRef<() => void>(() => undefined);
+  // 購読のコールバックは載せたときの props を閉じ込めてしまうので、ref 越しに読む
+  const pagesRef = useRef<PageFrameLayout[]>(pages);
+  pagesRef.current = pages;
+  const layoutRef = useRef<CanvasLayoutKind>(layout);
+  layoutRef.current = layout;
+  const gapYRef = useRef(FRAME_GAP[editorMode].y);
+  gapYRef.current = FRAME_GAP[editorMode].y;
+  const colorsRef = useRef({ edge: 'rgba(0,0,0,0.08)', line: '#e6e6e6' });
+  const sizeRef = useRef({ width: 0, height: 0, dpr: 1 });
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    // 容器は自分の親をそのまま使う。context の containerRef は親(MultiPageCanvasView)の
+    // useEffect で入るので、子のこの useEffect が走る時点ではまだ null
+    const host = canvas.parentElement as HTMLElement | null;
+    if (!host) return;
+
+    const resize = () => {
+      const dpr = window.devicePixelRatio || 1;
+      const width = host.clientWidth;
+      const height = host.clientHeight;
+      const prev = sizeRef.current;
+      if (width === prev.width && height === prev.height && dpr === prev.dpr) return width > 0 && height > 0;
+      sizeRef.current = { width, height, dpr };
+      canvas.width = Math.round(width * dpr);
+      canvas.height = Math.round(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      return width > 0 && height > 0;
+    };
+
+    const readColors = () => {
+      colorsRef.current = {
+        edge: readVar(host, '--ed-frame-edge', theme === 'dark' ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'),
+        line: readVar(host, '--ed-line-strong', theme === 'dark' ? '#5a5a5a' : '#d0d0d0'),
+      };
+    };
+
+    const draw = () => {
+      const { width, height, dpr } = sizeRef.current;
+      if (width === 0 || height === 0) return;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+      const { canvasOffset: o, canvasZoom: z } = viewStore.get();
+      const list = pagesRef.current;
+      if (list.length === 0) return;
+      // 画面の座標へ。半 px ずらして 1px の線がぼやけないようにする
+      const rectOf = (p: PageFrameLayout) => ({
+        x: Math.round(o.x + p.position.x * z),
+        y: Math.round(o.y + p.position.y * z),
+        w: Math.round(p.size.width * z),
+        h: Math.round(p.size.height * z),
+      });
+      const visible = (r: { x: number; y: number; w: number; h: number }) =>
+        r.x + r.w >= -2 && r.x <= width + 2 && r.y + r.h >= -2 && r.y <= height + 2;
+
+      // 階層の線 → 枠線の順(線の端が枠に隠れる)
+      if (layoutRef.current === 'tree') {
+        const byId = new Map(list.map((p) => [p.id, p] as const));
+        ctx.strokeStyle = colorsRef.current.line;
+        ctx.lineWidth = CONNECTOR_WIDTH;
+        ctx.lineJoin = 'round';
+        ctx.beginPath();
+        for (const child of list) {
+          const parent = child.parentId ? byId.get(child.parentId) : undefined;
+          if (!parent) continue;
+          // 画素の境目に載せる(端数のままだと 1.5px の線が 3 画素に散ってぼやける)
+          const x1 = Math.round(o.x + (parent.position.x + parent.size.width / 2) * z);
+          const y1 = Math.round(o.y + (parent.position.y + parent.size.height) * z);
+          const x2 = Math.round(o.x + (child.position.x + child.size.width / 2) * z);
+          const y2 = Math.round(o.y + child.position.y * z);
+          // 画面から外れている組はたどらない(150 枚でも描く本数は見えている分だけ)
+          if (Math.max(x1, x2) < -2 || Math.min(x1, x2) > width + 2 || y2 < -2 || y1 > height + 2) continue;
+          // 親の下から、子の行との隙間の真ん中まで下り、横へ移って子の上へ
+          const ym = Math.round(y2 - (gapYRef.current * z) / 2);
+          ctx.moveTo(x1, y1);
+          ctx.lineTo(x1, ym);
+          ctx.lineTo(x2, ym);
+          ctx.lineTo(x2, y2);
+        }
+        ctx.stroke();
+      }
+
+      ctx.strokeStyle = colorsRef.current.edge;
+      ctx.lineWidth = EDGE_WIDTH;
+      ctx.lineJoin = 'miter';
+      ctx.beginPath();
+      for (const p of list) {
+        const r = rectOf(p);
+        if (!visible(r)) continue;
+        // 以前の box-shadow: 0 0 0 1px は枠の外側に出ていたので、境目に重ねて同じ見え方にする
+        ctx.rect(r.x - 0.5, r.y - 0.5, r.w + 1, r.h + 1);
+      }
+      ctx.stroke();
+    };
+
+    drawRef.current = draw;
+    readColors();
+    resize();
+    draw();
+    const unsubscribe = viewStore.subscribe(draw);
+    let observer: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      observer = new ResizeObserver(() => { resize(); draw(); });
+      observer.observe(host);
+    }
+    return () => {
+      unsubscribe();
+      observer?.disconnect();
+    };
+  }, [viewStore, theme]);
+
+  // ページの並び・高さが変わったら描き直す(倍率・位置は上の購読が受ける)。
+  // viewStore を空更新して呼ぶことはしない ── 他の購読者(定規・コメントのピン)まで巻き込むので
+  useEffect(() => { drawRef.current(); }, [pages, layout, editorMode]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      data-canvas-decor
+      aria-hidden="true"
+      className="pointer-events-none absolute left-0 top-0"
+    />
+  );
+});

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

@@ -9,25 +9,37 @@
  * 層の構成(下から):
  *   1. 転写層(translate + scale)… フレームの白地 + 見るだけの紙面(PageFramePreview)
  *   2. 転写層の中、編集中のフレームの位置に EditorCanvas(1 つだけ。ページを移っても作り直さない)
- *   3. 画面座標のオーバーレイ … フレーム名・選択リング(倍率に関係なく同じ太さ・同じ文字サイズ)
- *   4. 定規
+ *   3. 飾りの canvas(画面の座標)… フレームの枠線・階層の線
+ *   4. オーバーレイ(転写層と同じ translate + scale)… フレーム名・選択リング。
+ *      中身は紙面の座標に置いて scale(1/倍率) で打ち消すので、画面上は倍率に関係なく同じ大きさ
+ *   5. 定規
  *
  * EditorCanvas を pages.map の中に置くとページを移るたびに React が作り直して
  * iframe が読み直される。map の外に 1 つだけ置き、位置だけ動かす
  *
  * [パン・ズームの軽さ]
- * パンは 2 つの層の transform 文字列を変えるだけにする。フレーム 1 枚ずつの要素
- * (FrameShell / FrameChrome)は memo で、位置は倍率だけに依存させる(画面上の位置 =
- * 層の translate + 紙面の位置 × 倍率)。150 枚あってもパンで描き直る要素は 2 つ。
- * ズームは倍率に依存する要素が描き直る(それでも小さな要素が 300 個ほど)
+ * ホイール 1 段の仕事を「合成だけ」にする。倍率・位置は React を通さず、viewStore を
+ * 直接購読して 2 つの層の style へ書く(転写層とオーバーレイの transform、オーバーレイの
+ * --ed-zoom / --ed-inv、容器の data-canvas-zoom の 4 つだけ)。フレーム 1 枚ずつの要素は
+ * memo で、倍率を props に持たない。
+ *
+ * 転写層の中には「白い矩形 + 合成済みの iframe」しか置かない。枠線(box-shadow / outline /
+ * border のどれでも)や階層の線(SVG)を中に置くと、倍率が変わるたびに転写層まるごとが
+ * 塗り直され、1 段 10〜20ms の Paint になる(実測)。枠線と線は画面の座標の canvas
+ * (CanvasFrameDecor)へ出した。
+ *
+ * 名前の幅と出し分けだけは DOM のままなので、段ごとではなく **粗い倍率**
+ * (coarseZoom、150ms に 1 回まで。操作の終わりに必ず追いつく)から決める
  */
 
-import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
   useMultiPageCanvas,
-  useCanvasViewState,
+  useCanvasActivePageId,
   RULER_SIZE,
   FRAME_GAP,
+  PREVIEW_IMAGE_ZOOM,
+  PREVIEW_IMAGE_ZOOM_OUT,
   type PageFrameLayout,
 } from '../../contexts/MultiPageCanvasContext';
 import { useEditorContext } from '../../EditorContext';
@@ -38,10 +50,25 @@ import { EditorAppearanceContext } from '../../contexts/EditorAppearanceContext'
 import { EditorCanvas } from '../EditorCanvas';
 import { PageFramePreview } from './PageFramePreview';
 import { CanvasRulers } from './CanvasRulers';
+import { CanvasFrameDecor } from './CanvasFrameDecor';
 import { cn } from '../../../lib/utils';
+import { ArrowUpRight } from 'lucide-react';
 
 /** フレーム名の高さ(px、画面上)。フレームの上端との間隔 */
 const LABEL_HEIGHT = 20;
+/**
+ * 粗い倍率を更新する間隔(ms)。これを短くすると縮小中の塗り直しが増える。
+ * 操作の終わりには必ず本当の倍率に追いつく(末尾で 1 回)
+ */
+const COARSE_ZOOM_MS = 150;
+/** 紙面を画像に落とすかの判定を、操作が止まってから何 ms 後に見るか(全体表示の 240ms の動きを跨がない) */
+const PREVIEW_MODE_SETTLE_MS = 300;
+/**
+ * この倍率より小さいところにいる間は、紙面の画像(thumbnail)を裏で先に読んでおく。
+ * 読めていない画像は縮小の途中で使えない(空白のフレームになるので iframe を見せ続ける)。
+ * 1 ページを大きく開いて編集しているときは読まない(利用側に 26 枚の画像を作らせない)
+ */
+const PREVIEW_IMAGE_PRELOAD_ZOOM = 1.2;
 
 // ------------------------------------------------------------
 // フレームの白地 + 見るだけの紙面(転写層の中。紙面の座標)
@@ -49,47 +76,53 @@ const LABEL_HEIGHT = 20;
 
 interface FrameShellProps {
   page: PageFrameLayout;
-  zoom: number;
   isActive: boolean;
   passThrough: boolean;
+  /** 大きく縮小している間は紙面を画像で描く(この層の zoom には依存しない真偽値) */
+  imageMode: boolean;
+  /** 画像を裏で先に読んでおく(縮小の途中で切り替えられるように) */
+  preloadImage: 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) {
+/**
+ * 倍率を props に持たない(持たせるとホイール 1 段ごとに 26 枚が React を通る)。
+ * 枠線はこの要素には無い ── 画面の座標の canvas(CanvasFrameDecor)が描く
+ */
+const FrameShell = memo(function FrameShell({ page, isActive, passThrough, imageMode, preloadImage, rootRef, onMouseDown, onHover }: FrameShellProps) {
   return (
     <div
       data-page-frame={page.id}
       data-page-active={isActive ? 'true' : undefined}
-      className="absolute"
+      className="ed-frame-shell 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} />
+      <PageFramePreview page={page} rootRef={rootRef} imageMode={imageMode} preloadImage={preloadImage} />
     </div>
   );
 });
 
 // ------------------------------------------------------------
-// フレーム名・リング(オーバーレイの中。画面の座標 = 紙面の位置 × 倍率)
+// フレーム名・リング(オーバーレイの中)
 // ------------------------------------------------------------
 
 interface FrameChromeProps {
   page: PageFrameLayout;
-  zoom: number;
-  /** 名前を出せる倍率か(行の隙間に名前が収まる)。全フレーム共通なので親で判定する */
-  labelsVisible: boolean;
+  /** 名前を出すか(粗い倍率から親が判定する。全フレーム共通の条件 + このフレームの幅) */
+  showLabel: boolean;
+  /** 「別タブで開く」を出すか(名前の右。フレームが細いときは出さない) */
+  showLink: boolean;
   /** リングと名前の強調(切替中はクリックしたページへ先に移る) */
   isSelected: boolean;
   isHover: boolean;
@@ -99,38 +132,67 @@ interface FrameChromeProps {
   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;
+/**
+ * オーバーレイは転写層と同じ transform(translate + scale)なので、ここで scale(1/倍率) を
+ * 掛けて打ち消す。こうすると中身は画面上の大きさのまま、位置は紙面の座標で書ける
+ * (段ごとに React を通さず、--ed-inv が変わるだけで動く)。
+ * リングだけは画面上の寸法が要るので --ed-zoom から CSS で出す(段ごとに変わるのは 1〜2 個)
+ */
+const FrameChrome = memo(function FrameChrome({ page, showLabel, showLink, isSelected, isHover, isBusy, onActivate, onZoomTo }: FrameChromeProps) {
+  const hasRing = isSelected || isHover;
   return (
-    <div className="absolute left-0 top-0" data-frame-chrome={page.id} style={{ transform: `translate(${sx}px, ${sy}px)` }}>
-      {/* フレーム名(Figma: フレームの左上、倍率に関係なく同じ大きさ) */}
+    <div
+      className="absolute left-0 top-0"
+      data-frame-chrome={page.id}
+      style={{
+        transform: `translate(${page.position.x}px, ${page.position.y}px) scale(var(--ed-inv, 1))`,
+        transformOrigin: '0 0',
+        // 名前だけの小さな層にしておく(倍率が変わっても塗り直さずに動く)。
+        // リングが出ているフレームはフレームと同じ大きさになるので層にしない(巨大な合成層を作らない)
+        willChange: hasRing ? undefined : 'transform',
+        ['--ed-fw' as string]: `${page.size.width}px`,
+        ['--ed-fh' as string]: `${page.size.height}px`,
+      }}
+    >
+      {/* フレーム名(Figma: フレームの左上、倍率に関係なく同じ大きさ)+ 別タブで開く(href があるとき) */}
       {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>
+        <div className="ed-frame-label-row" style={{ top: -LABEL_HEIGHT, maxWidth: 'max(28px, calc(var(--ed-fw) * var(--ed-zoom, 1)))' }}>
+          <button
+            type="button"
+            data-frame-label={page.id}
+            className={cn('ed-frame-label', isSelected && 'ed-frame-label-active')}
+            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>
+          {page.href && showLink && (
+            <a
+              className="ed-frame-label-link"
+              data-frame-link={page.id}
+              href={page.href}
+              target="_blank"
+              rel="noreferrer"
+              title="別タブで開く(編集しない表示)"
+              aria-label={`${page.title || page.id} を別タブで開く`}
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <ArrowUpRight aria-hidden="true" />
+            </a>
+          )}
+        </div>
       )}
-      {/* リング(選択中 = 実線、ホバー = 淡い実線) */}
-      {(isSelected || isHover) && (
+      {/* リング(選択中 = 実線、ホバー = 淡い実線)。画面上の寸法 = 紙面の寸法 × 倍率 */}
+      {hasRing && (
         <div
           className={cn('ed-frame-ring', isSelected ? 'ed-frame-ring-active' : 'ed-frame-ring-hover')}
-          style={{ width: sw, height: sh }}
+          style={{ width: 'calc(var(--ed-fw) * var(--ed-zoom, 1))', height: 'calc(var(--ed-fh) * var(--ed-zoom, 1))' }}
         />
       )}
     </div>
@@ -146,6 +208,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   const {
     pages,
     bounds,
+    viewStore,
     registerContainer,
     activatePage,
     activatingPageId,
@@ -156,10 +219,14 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     isInteracting,
     initialViewRestored,
   } = canvas;
-  const { canvasOffset, canvasZoom, activePageId } = useCanvasViewState();
+  // 倍率・位置は購読しない(ホイール 1 段ごとにキャンバス全体が React を通ってしまう)。
+  // 描画に要る「粗い倍率」だけを下の useLayoutEffect が間引いて渡す
+  const activePageId = useCanvasActivePageId();
   const { setZoom, setFitZoom, activeTool, iframeReady } = useEditorContext();
   const theme = useContext(EditorAppearanceContext) ?? 'light';
   const containerRef = useRef<HTMLDivElement>(null);
+  const layerRef = useRef<HTMLDivElement>(null);
+  const overlayRef = useRef<HTMLDivElement>(null);
   const active = useMemo(() => pages.find((p) => p.id === activePageId) ?? null, [pages, activePageId]);
   // リング・名前の強調は「移ろうとしているページ」を優先する(押した瞬間に手応えを返す)
   const selectedId = activatingPageId ?? activePageId;
@@ -176,6 +243,60 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     return () => registerContainer(null);
   }, [registerContainer]);
 
+  // ---- 倍率・位置の反映(React を通さない)
+  const [coarseZoom, setCoarseZoom] = useState(() => viewStore.get().canvasZoom);
+  const coarseZoomRef = useRef(coarseZoom);
+  coarseZoomRef.current = coarseZoom;
+
+  useLayoutEffect(() => {
+    let lastZoom = NaN;
+    let coarseTimer: ReturnType<typeof setTimeout> | null = null;
+    let coarseAt = 0;
+    const pushCoarse = () => {
+      coarseAt = performance.now();
+      const z = viewStore.get().canvasZoom;
+      if (coarseZoomRef.current === z) return;
+      coarseZoomRef.current = z;
+      setCoarseZoom(z);
+    };
+    const write = () => {
+      const { canvasOffset: o, canvasZoom: z } = viewStore.get();
+      const transform = `translate(${o.x}px, ${o.y}px) scale(${z})`;
+      if (layerRef.current) layerRef.current.style.transform = transform;
+      const overlay = overlayRef.current;
+      if (overlay) overlay.style.transform = transform;
+      if (z === lastZoom) return;
+      lastZoom = z;
+      if (overlay) {
+        // 中身の scale(1/倍率) とリングの寸法に使う。この 1 要素だけが段ごとに変わる
+        overlay.style.setProperty('--ed-zoom', String(z));
+        overlay.style.setProperty('--ed-inv', String(1 / z));
+      }
+      // 検証スクリプトとヘッダーの表示が読む(四捨五入した %)
+      const el = containerRef.current;
+      const pct = String(Math.round(z * 100));
+      if (el && el.getAttribute('data-canvas-zoom') !== pct) el.setAttribute('data-canvas-zoom', pct);
+      // 縮小の途中でも 0.4 を割ったら、画像が読めている紙面は iframe を止めて画像を前に出す
+      // (CSS が拾う。属性 1 つの書き換えで 26 枚がいっぺんに切り替わり、React は通らない)。
+      // iframe を外してメモリを返すのは操作が止まってから(下の imageMode)。
+      // 外す向き(画像 → iframe)もここではやらない ── 止まってから 0.5 以上で判定する
+      if (el && z < PREVIEW_IMAGE_ZOOM_OUT && el.getAttribute('data-canvas-preview-image') !== '1') {
+        el.setAttribute('data-canvas-preview-image', '1');
+      }
+      // 粗い倍率: 150ms に 1 回まで。末尾のタイマーで操作の終わりに必ず追いつく
+      if (coarseTimer) clearTimeout(coarseTimer);
+      const elapsed = performance.now() - coarseAt;
+      if (elapsed >= COARSE_ZOOM_MS) pushCoarse();
+      else coarseTimer = setTimeout(() => { coarseTimer = null; pushCoarse(); }, COARSE_ZOOM_MS - elapsed);
+    };
+    write();
+    const unsubscribe = viewStore.subscribe(write);
+    return () => {
+      unsubscribe();
+      if (coarseTimer) clearTimeout(coarseTimer);
+    };
+  }, [viewStore]);
+
   // エディタの内側の倍率は 100% 固定(倍率は外側の transform が持つ)
   useEffect(() => {
     setZoom(100);
@@ -242,30 +363,47 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   const handleActivate = useCallback((id: string) => { void activatePage(id, { reveal: true }); }, [activatePage]);
   const handleZoomTo = useCallback((id: string) => zoomToPage(id, { animate: true }), [zoomToPage]);
 
+  // ---- 紙面を画像に落とすか(大きく縮小している間だけ)
+  // 判定は操作が止まってからしか動かさない。縮小の途中で 26 枚の iframe を差し替えると、
+  // 軽くするための切替そのものが重いフレームを作る
+  const [imageMode, setImageMode] = useState(() => viewStore.get().canvasZoom < PREVIEW_IMAGE_ZOOM_OUT);
+  const imageModeRef = useRef(imageMode);
+  imageModeRef.current = imageMode;
+  useEffect(() => {
+    if (isInteracting) return;
+    const timer = setTimeout(() => {
+      const z = viewStore.get().canvasZoom;
+      // ヒステリシス: 画像 → iframe は 0.5 以上、iframe → 画像は 0.4 未満(境目で行き来しない)
+      const next = imageModeRef.current ? z < PREVIEW_IMAGE_ZOOM : z < PREVIEW_IMAGE_ZOOM_OUT;
+      if (next !== imageModeRef.current) setImageMode(next);
+      // iframe に戻す向きに決まったら、縮小の途中で立てた掛け金も外す(iframe がまた見える)
+      if (!next) containerRef.current?.removeAttribute('data-canvas-preview-image');
+    }, PREVIEW_MODE_SETTLE_MS);
+    return () => clearTimeout(timer);
+  }, [isInteracting, coarseZoom, viewStore]);
+  // 画像を裏で先に読んでおくか(粗い倍率なので、段ごとには変わらない真偽値)
+  const preloadImage = coarseZoom < PREVIEW_IMAGE_PRELOAD_ZOOM;
+
   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)`;
+  const labelsVisible = FRAME_GAP[canvas.editorMode].y * coarseZoom >= LABEL_HEIGHT + 6;
 
   return (
     <div
       ref={containerRef}
       data-infinite-canvas="true"
-      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}
     >
-      {/* 転写層 */}
+      {/* 転写層(transform は useLayoutEffect が直接書く。React の style には入れない) */}
       <div
+        ref={layerRef}
         data-canvas-transform-layer
         className="absolute left-0 top-0"
         style={{
-          transform: layerTransform,
           transformOrigin: '0 0',
           willChange: isInteracting ? 'transform' : undefined,
         }}
@@ -274,9 +412,10 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
           <FrameShell
             key={page.id}
             page={page}
-            zoom={canvasZoom}
             isActive={page.id === activePageId}
             passThrough={passThrough}
+            imageMode={imageMode}
+            preloadImage={preloadImage}
             rootRef={containerRef}
             onMouseDown={handleFrameMouseDown}
             onHover={handleHover}
@@ -306,20 +445,27 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
         )}
       </div>
 
-      {/* 画面座標のオーバーレイ: フレーム名・リング(層ごと平行移動。倍率だけ各要素に渡す) */}
+      {/* フレームの枠線と階層の線(画面の座標の canvas)。転写層の中に置くと 1 段ごとに
+          転写層まるごとが塗り直される ── 詳しくは CanvasFrameDecor の頭の注記 */}
+      <CanvasFrameDecor theme={theme} />
+
+      {/* オーバーレイ: フレーム名・リング。転写層と同じ transform を掛け、中身が scale(1/倍率) で戻す */}
       <div
+        ref={overlayRef}
         className="pointer-events-none absolute left-0 top-0 z-10"
         data-canvas-overlay
-        style={{ transform: overlayTransform, willChange: isInteracting ? 'transform' : undefined }}
+        style={{ transformOrigin: '0 0', willChange: isInteracting ? 'transform' : undefined }}
       >
         {pages.map((page) => {
           const isSelected = page.id === selectedId;
+          // 縮小してフレームが細くなったら名前は出さない(重ならない)。粗い倍率で判定する
+          const screenWidth = page.size.width * coarseZoom;
           return (
             <FrameChrome
               key={page.id}
               page={page}
-              zoom={canvasZoom}
-              labelsVisible={labelsVisible}
+              showLabel={labelsVisible && screenWidth >= 28}
+              showLink={screenWidth >= 96}
               isSelected={isSelected}
               isHover={hoverId === page.id && !isSelected && !passThrough}
               isBusy={page.loading || page.id === activatingPageId || (page.id === activePageId && !iframeReady)}