@growgroup/visual-editor 0.4.0 → 0.4.1

package/README.md

@@ -108,7 +108,7 @@ setEditorIO({
 - 複数選択はキャンバスの余白からドラッグ(マーキー)。ページの中に空白が無くても、余白から引けば帯がまたいだ要素が選ばれる
 - `contentList[].parentId` を渡すと、フレームがサイトマップの階層(親の下に子)のツリーで並び、親子が線でつながる(0.3.1)
 - `contentList[].href` を渡すと、フレーム名と一覧に「別タブで開く」が付く。`contentList[].revision` を進めると、そのページの紙面が読み直される(外からファイルが変わったとき)
-- `contentList[].thumbnail` にページ全体を写した画像(PNG / JPEG、幅 480px 以上、縦横比はページと同じ)の URL を渡すと、大きく縮めた表示(倍率 0.5 未満)で紙面が iframe ではなくその画像になり、縮小が軽くなる。縮小している最中も、0.4 を割った時点で(画像が読めていれば)切り替わる。実測で縮小の p95 が 26.5ms → 18.4ms、50ms を超えるフレームが 0 回。内容が変わったら URL も変える(`&v=…`)。渡さないページ・画像が読めなかったページは今までどおり iframe(0.4.0)
+- `contentList[].thumbnail` にページ全体を写した画像(PNG / JPEG、幅 480px 以上、縦横比はページと同じ)の URL を渡すと、大きく縮めた表示で紙面が iframe ではなくその画像になり、縮小が軽くなる。実測で縮小の p95 が 26.5ms → 18.4ms、50ms を超えるフレームが 0 回。画像を出す倍率の上限は画像の解像度と `devicePixelRatio` から決まり(`min(0.5, 画像の幅 × 1.25 ÷ (紙面の幅 × DPR))`)、**Retina では 960px の画像だと 31% まで**。にじんで見えないように、それより拡大すると iframe に戻る。解像度の高い画像を渡せば上限は 0.5 まで上がる。縮小している最中も、上限 × 0.8 を割った時点で(画像が読めていれば)切り替わる。内容が変わったら URL も変える(`&v=…`)。渡さないページ・画像が読めなかったページは今までどおり iframe(0.4.0)
 - `documentAttributes={{ "data-notes": "0" }}` のように渡すと、編集中の文書と紙面の `<html>` に読み直さずに属性が付く(利用側の CSS で表示を切り替える)
 - 部品(`data-part`)を選ぶと枠が紫になり、名前と版の札が出る。「この姿で更新」で他ページの紙面もその場で描き直される
 - 仕組みと確認したことは `docs/multi-frame-canvas-2026-09.md`

package/package.json

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

package/src/editor/FrontendVisualEditor.tsx

@@ -374,6 +374,15 @@ function FrontendVisualEditorInner({
   useEffect(() => { if (pptCommentsOpen) setCommentsMounted(true); }, [pptCommentsOpen]);
   // PowerPoint風UIの右ペイン「図の書式設定」(影・反射・光彩・ぼかし)
   const [pptFormatPaneOpen, setPptFormatPaneOpen] = useState(false);
+  // コメントツール(C)にした時点で右のコメントパネルも開く。範囲を描き終えるまで開かないと、
+  // 書き込む先が見えないまま範囲を引くことになる。入口(ツールバー・校閲タブ・
+  // パネルの「範囲を指定」・キー C)はどれも activeTool を変えるだけなので、ここ 1 か所で拾う。
+  // ツールを抜けても閉じない(閉じるのは利用者の操作)。開いているときは state が同じ値で止まる
+  useEffect(() => {
+    if (activeTool !== 'comment' || !can('commentAction')) return;
+    setPptFormatPaneOpen(false);
+    setPptCommentsOpen(true);
+  }, [activeTool]);
   const [pptCommentFocus, setPptCommentFocus] = useState(0);
   const [pptActiveThread, setPptActiveThread] = useState<string | null>(null);
   // コメントツール(C)で指定した範囲の下書き。投稿・解除・Esc・ページ切替で消える

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

@@ -38,8 +38,7 @@ import {
   useCanvasActivePageId,
   RULER_SIZE,
   FRAME_GAP,
-  PREVIEW_IMAGE_ZOOM,
-  PREVIEW_IMAGE_ZOOM_OUT,
+  PREVIEW_IMAGE_ZOOM_HYSTERESIS,
   type PageFrameLayout,
 } from '../../contexts/MultiPageCanvasContext';
 import { useEditorContext } from '../../EditorContext';
@@ -218,6 +217,8 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     rulersVisible,
     isInteracting,
     initialViewRestored,
+    getPreviewImageZoomCap,
+    previewImageCapVersion,
   } = canvas;
   // 倍率・位置は購読しない(ホイール 1 段ごとにキャンバス全体が React を通ってしまう)。
   // 描画に要る「粗い倍率」だけを下の useLayoutEffect が間引いて渡す
@@ -280,7 +281,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
       // (CSS が拾う。属性 1 つの書き換えで 26 枚がいっぺんに切り替わり、React は通らない)。
       // iframe を外してメモリを返すのは操作が止まってから(下の imageMode)。
       // 外す向き(画像 → iframe)もここではやらない ── 止まってから 0.5 以上で判定する
-      if (el && z < PREVIEW_IMAGE_ZOOM_OUT && el.getAttribute('data-canvas-preview-image') !== '1') {
+      if (el && z < getPreviewImageZoomCap() * PREVIEW_IMAGE_ZOOM_HYSTERESIS && el.getAttribute('data-canvas-preview-image') !== '1') {
         el.setAttribute('data-canvas-preview-image', '1');
       }
       // 粗い倍率: 150ms に 1 回まで。末尾のタイマーで操作の終わりに必ず追いつく
@@ -295,7 +296,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
       unsubscribe();
       if (coarseTimer) clearTimeout(coarseTimer);
     };
-  }, [viewStore]);
+  }, [viewStore, getPreviewImageZoomCap]);
 
   // エディタの内側の倍率は 100% 固定(倍率は外側の transform が持つ)
   useEffect(() => {
@@ -366,21 +367,26 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   // ---- 紙面を画像に落とすか(大きく縮小している間だけ)
   // 判定は操作が止まってからしか動かさない。縮小の途中で 26 枚の iframe を差し替えると、
   // 軽くするための切替そのものが重いフレームを作る
-  const [imageMode, setImageMode] = useState(() => viewStore.get().canvasZoom < PREVIEW_IMAGE_ZOOM_OUT);
+  const [imageMode, setImageMode] = useState(
+    () => viewStore.get().canvasZoom < getPreviewImageZoomCap() * PREVIEW_IMAGE_ZOOM_HYSTERESIS,
+  );
   const imageModeRef = useRef(imageMode);
   imageModeRef.current = imageMode;
+  // previewImageCapVersion は「画像の解像度が分かって上限が動いた」きっかけ。
+  // 止まったまま画像が読み終わった場合でも、ここで判定をやり直す
   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;
+      const cap = getPreviewImageZoomCap();
+      // ヒステリシス: 画像 → iframe は上限以上、iframe → 画像は上限 × 0.8 未満(境目で行き来しない)
+      const next = imageModeRef.current ? z < cap : z < cap * PREVIEW_IMAGE_ZOOM_HYSTERESIS;
       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]);
+  }, [isInteracting, coarseZoom, viewStore, getPreviewImageZoomCap, previewImageCapVersion]);
   // 画像を裏で先に読んでおくか(粗い倍率なので、段ごとには変わらない真偽値)
   const preloadImage = coarseZoom < PREVIEW_IMAGE_PRELOAD_ZOOM;
 

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

@@ -52,7 +52,7 @@ interface PageFramePreviewProps {
 }
 
 export const PageFramePreview = memo(function PageFramePreview({ page, rootRef, imageMode = false, preloadImage = false }: PageFramePreviewProps) {
-  const { editorMode, ensurePageHtml, setPageHeight, previewStyles, requestPreviewSlot, releasePreviewSlot, documentAttributes } = useMultiPageCanvas();
+  const { editorMode, ensurePageHtml, setPageHeight, previewStyles, requestPreviewSlot, releasePreviewSlot, documentAttributes, reportThumbnailWidth } = useMultiPageCanvas();
   const documentAttributesRef = useRef(documentAttributes);
   documentAttributesRef.current = documentAttributes;
   const hostRef = useRef<HTMLDivElement>(null);
@@ -228,6 +228,8 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef,
             const img = e.currentTarget;
             if (!img.naturalWidth || !img.naturalHeight) return;
             setPageHeight(page.id, (page.size.width * img.naturalHeight) / img.naturalWidth, 'preview');
+            // 画像を出してよい倍率の上限は、いちばん粗い画像に合わせて決まる(にじませないため)
+            reportThumbnailWidth(page.id, img.naturalWidth);
           }}
           onError={() => setImageFailed(true)}
         />

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -56,6 +56,14 @@ export const MAX_ZOOM = 4;
 const ZOOM_STEP = 1.25;
 /** 全体表示・ページ表示のときの余白(px、画面上) */
 const FIT_PADDING = 72;
+/** 画面の縁からこれだけ内側にあれば「見えている」とする(px、画面上) */
+const REVEAL_MARGIN = 48;
+/**
+ * ホスト発の切替で「そのページが見えている」と認めるフレームの画面上の幅(px)。
+ * 全体表示(2%)だと 1920 の紙面が 38px の点にしかならず、画面には入っていても
+ * どこへ移ったのか分からない。これを下回るならページを画面に合わせて寄る
+ */
+const FOCUS_MIN_WIDTH = 400;
 /** 上と左の定規の太さ(px)。全体表示の余白に足す */
 export const RULER_SIZE = 20;
 /** ビューのアニメーション(ms) */
@@ -63,14 +71,29 @@ const VIEW_ANIMATION_MS = 240;
 /** 見るだけの紙面を同時に読む枚数 */
 const PREVIEW_PARALLEL = 4;
 /**
- * 見るだけの紙面を画像で描く倍率のしきい値。これ未満に縮小されている間は
- * srcdoc の iframe ではなく contentList[].thumbnail の画像を出す。
- * 判定は操作が終わってからしか動かさない(縮小の途中で 26 枚を差し替えない)。
- * 行き来でちらつかないように戻りは別のしきい値にする(ヒステリシス)
+ * 見るだけの紙面を画像で描く倍率の **上限の最大値**。これ以上に拡大されていれば、
+ * どんなに解像度の高い画像でも iframe で描く(画像は文字を選べない・検索できないため)。
+ * 実際の上限はこれより小さくなることがある ── getPreviewImageZoomCap() を見ること
  */
 export const PREVIEW_IMAGE_ZOOM = 0.5;
-/** 画像 → iframe に戻す倍率(PREVIEW_IMAGE_ZOOM 以上)。iframe → 画像は PREVIEW_IMAGE_ZOOM_OUT 未満 */
+/** 画像 → iframe に戻す倍率(上限の最大値のとき)。上限に対する比は下の HYSTERESIS */
 export const PREVIEW_IMAGE_ZOOM_OUT = 0.4;
+/**
+ * 画像を引き伸ばしてよい上限。1.25 = 画面の画素に対して 25% まで。
+ * これを超えると Retina(DPR 2)で文字がにじんで見える(実測: 960px の画像を
+ * 1766 device px の枠に出すと 1.84 倍で、同じ倍率の iframe と並べて粗さが分かる)
+ */
+export const PREVIEW_IMAGE_MAX_STRETCH = 1.25;
+/**
+ * 画像の実寸がまだ 1 枚も分からないときに仮定する「画像の幅 ÷ 紙面の幅」。
+ * 0.5 = 1920 の紙面に 960px の画像(殻の既定)
+ */
+const PREVIEW_IMAGE_PRESUMED_RATIO = 0.5;
+/**
+ * 上限に対する「画像に落とす」側の比(ヒステリシス)。
+ * 画像 → iframe は上限以上、iframe → 画像は上限 × これ未満。境目で行き来しないため
+ */
+export const PREVIEW_IMAGE_ZOOM_HYSTERESIS = PREVIEW_IMAGE_ZOOM_OUT / PREVIEW_IMAGE_ZOOM;
 
 /** フレームどうしの間隔(紙面の座標系、等倍のとき)。フレーム名を出すかの判定にも使う */
 export const FRAME_GAP: Record<EditorMode, { x: number; y: number }> = {
@@ -228,6 +251,19 @@ export interface MultiPageCanvasContextValue {
    */
   requestPreviewSlot: (id: string, grant: () => void) => void;
   releasePreviewSlot: (id: string) => void;
+
+  // ---- 紙面の画像(contentList[].thumbnail)
+  /**
+   * 紙面を画像で描いてよい倍率の上限。画像の解像度と devicePixelRatio から決める
+   * (= min(PREVIEW_IMAGE_ZOOM, 画像の幅 × 1.25 ÷ (紙面の幅 × DPR)))。
+   * 上限はキャンバス全体で 1 つで、報告された中でいちばん粗い画像に合わせる。
+   * DPR は呼ぶたびに読む(別のディスプレイへ移すと変わる)
+   */
+  getPreviewImageZoomCap: () => number;
+  /** 画像の実寸(naturalWidth)を報告する。PageFramePreview が onLoad で呼ぶ */
+  reportThumbnailWidth: (id: string, naturalWidth: number) => void;
+  /** 上限が変わった回数。React 側が判定をやり直すきっかけに使う */
+  previewImageCapVersion: number;
 }
 
 // ============================================================
@@ -635,15 +671,6 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [updatePageFrame, viewStore],
   );
 
-  // 生きているページは利用側(currentContentId)と揃える。
-  // 本文が読めて currentContentId が変わったときに初めてエディタが移る
-  // (クリックの時点では移さない。移すと前のページの本文が新しい枠に見えてしまう)
-  useEffect(() => {
-    if (!enabled) return;
-    const id = artboard.currentContentId ?? artboard.contentList[0]?.id ?? null;
-    viewStore.set((prev) => (prev.activePageId === id ? prev : { ...prev, activePageId: id }));
-  }, [enabled, artboard.currentContentId, artboard.contentList, viewStore]);
-
   // 見えている範囲の保存(変化が止まってから)
   useEffect(() => {
     if (!storageKey || typeof localStorage === 'undefined') return;
@@ -810,32 +837,107 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [setView],
   );
 
-  const revealPage = useCallback<MultiPageCanvasContextValue['revealPage']>(
-    (id) => {
+  /**
+   * フレームが今どこに、どれだけの大きさで画面に出ているか(容器の座標)。
+   * 「見えているか」「寄る必要があるか」を revealPage と focusPage が同じ式で判定するため
+   */
+  const frameScreenRect = useCallback(
+    (id: string) => {
       const page = pagesRef.current.find((p) => p.id === id);
-      if (!page) return;
-      const { width, height } = containerSize();
+      if (!page) return null;
+      const container = containerSize();
       const { canvasZoom: z, canvasOffset: o } = viewStore.get();
       const inset = rulersRef.current ? RULER_SIZE : 0;
       const left = o.x + page.position.x * z;
       const top = o.y + page.position.y * z;
-      const right = left + page.size.width * z;
-      const bottom = top + page.size.height * z;
-      const margin = 48;
+      const width = page.size.width * z;
+      const height = page.size.height * z;
+      return {
+        page,
+        container,
+        inset,
+        zoom: z,
+        left,
+        top,
+        width,
+        height,
+        // 一部でも画面に入っていれば「見えている」
+        visible:
+          left + width > inset + REVEAL_MARGIN &&
+          left < container.width - REVEAL_MARGIN &&
+          top + height > inset + REVEAL_MARGIN &&
+          top < container.height - REVEAL_MARGIN,
+      };
+    },
+    [viewStore],
+  );
+
+  const revealPage = useCallback<MultiPageCanvasContextValue['revealPage']>(
+    (id) => {
+      const r = frameScreenRect(id);
       // 一部でも見えていればそのまま。見えていなければ、そのフレームの左上を画面へ寄せる
-      const visible = right > inset + margin && left < width - margin && bottom > inset + margin && top < height - margin;
-      if (visible) return;
-      const w = page.size.width * z;
-      const h = page.size.height * z;
+      if (!r || r.visible) return;
+      const { page, container, inset, zoom: z, width: w, height: h } = r;
       const offset = {
-        x: w <= width - inset ? inset + (width - inset - w) / 2 - page.position.x * z : inset + margin - page.position.x * z,
-        y: h <= height - inset ? inset + (height - inset - h) / 2 - page.position.y * z : inset + margin - page.position.y * z,
+        x: w <= container.width - inset ? inset + (container.width - inset - w) / 2 - page.position.x * z : inset + REVEAL_MARGIN - page.position.x * z,
+        y: h <= container.height - inset ? inset + (container.height - inset - h) / 2 - page.position.y * z : inset + REVEAL_MARGIN - page.position.y * z,
       };
       setView({ zoom: z, offset }, { animate: true });
     },
-    [setView, viewStore],
+    [frameScreenRect, setView],
+  );
+
+  /**
+   * ホスト発(利用側のレールなど)でページが変わったときに視点を寄せる。
+   * 倍率はできるだけ変えない ── ただし「画面に入ってはいるが点にしか見えない」ときは
+   * 寄せても何も起きていないように見えるので、そのときだけページに合わせる
+   */
+  const focusPage = useCallback(
+    (id: string) => {
+      const r = frameScreenRect(id);
+      if (!r) return;
+      if (r.width < FOCUS_MIN_WIDTH) {
+        zoomToPage(id, { animate: true });
+        return;
+      }
+      if (!r.visible) revealPage(id);
+    },
+    [frameScreenRect, revealPage, zoomToPage],
   );
 
+  /**
+   * 直前の activatePage(フレームのクリック・左パネル)の宛先。
+   * 下の同期 effect が「エディタ発かホスト発か」を見分けるのに使う。
+   * state(activatingPageId)ではなく ref で持つのは、切替が終わって state が戻るのと
+   * 同期 effect が走るのが同じ描画にまとまるため(state では読んだときに既に null)。
+   * 消すのは effect が使ったときだけ ── A → B と続けて押したときは A の後始末で消さない
+   */
+  const editorInitiatedPageIdRef = useRef<string | null>(null);
+
+  // 生きているページは利用側(currentContentId)と揃える。
+  // 本文が読めて currentContentId が変わったときに初めてエディタが移る
+  // (クリックの時点では移さない。移すと前のページの本文が新しい枠に見えてしまう)。
+  // ホスト発(利用側がレールで contentId を変えた)のときは視点も寄せる ── フレームの
+  // クリックと違って画面のどこにも手掛かりが無く、26 ページの木では移り先がほぼ画面外
+  useEffect(() => {
+    if (!enabled) return;
+    const id = artboard.currentContentId ?? artboard.contentList[0]?.id ?? null;
+    let prevId: string | null | undefined;
+    viewStore.set((prev) => {
+      if (prev.activePageId === id) return prev;
+      prevId = prev.activePageId;
+      return { ...prev, activePageId: id };
+    });
+    if (prevId === undefined || !id) return; // 変わっていない
+    if (prevId === null) return; // 最初の 1 ページが決まっただけ。初回の視点は MultiPageCanvasView が決める
+    if (editorInitiatedPageIdRef.current === id) {
+      // エディタ発(activatePage)。あちらで既に寄せてあるので二重に動かさない
+      editorInitiatedPageIdRef.current = null;
+      return;
+    }
+    focusPage(id);
+  }, [enabled, artboard.currentContentId, artboard.contentList, viewStore, focusPage]);
+
   // ---- 本文の読み込み
   const loadingRef = useRef(new Set<string>());
   const ensurePageHtml = useCallback<MultiPageCanvasContextValue['ensurePageHtml']>(
@@ -893,13 +995,21 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       }
       const notify = onContentChangeRef.current;
       if (!notify) return false;
+      // エディタ発だと印す。利用側の contentId が変わって同期 effect が走るころには
+      // この切替は終わっているので、state ではなく ref で残す
+      editorInitiatedPageIdRef.current = id;
       setActivatingPageId(id);
       if (options?.reveal) revealPage(id);
+      let moved = false;
       try {
         const result = await (notify as (contentId: string) => unknown)(id);
-        return result !== false;
+        moved = result !== false;
+        return moved;
       } finally {
         setActivatingPageId((v) => (v === id ? null : v));
+        // 移れなかったら印を消す(残すと、あとで同じページへホスト発で移るときに視点が動かない)。
+        // 別のページへ移ったあとなら消さない ── その印はそちらの切替のもの
+        if (!moved && editorInitiatedPageIdRef.current === id) editorInitiatedPageIdRef.current = null;
       }
     },
     [revealPage, viewStore],
@@ -954,6 +1064,36 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [pumpPreviewSlots],
   );
 
+  // ---- 紙面の画像の解像度(画像を出してよい倍率の上限を決める)
+  // 引き伸ばしすぎるとにじむ。上限はキャンバス全体で 1 つにし、いちばん粗い画像に合わせる
+  const thumbnailWidthsRef = useRef(new Map<string, number>());
+  const thumbnailRatioRef = useRef<number | null>(null);
+  const [previewImageCapVersion, setPreviewImageCapVersion] = useState(0);
+
+  const reportThumbnailWidth = useCallback<MultiPageCanvasContextValue['reportThumbnailWidth']>((id, naturalWidth) => {
+    if (!Number.isFinite(naturalWidth) || naturalWidth <= 0) return;
+    if (thumbnailWidthsRef.current.get(id) === naturalWidth) return;
+    thumbnailWidthsRef.current.set(id, naturalWidth);
+    let min = Infinity;
+    thumbnailWidthsRef.current.forEach((width, key) => {
+      const pageWidth = framesMapRef.current.get(key)?.size.width;
+      if (!pageWidth || pageWidth <= 0) return;
+      min = Math.min(min, width / pageWidth);
+    });
+    const ratio = Number.isFinite(min) ? min : null;
+    if (ratio === thumbnailRatioRef.current) return;
+    thumbnailRatioRef.current = ratio;
+    // 上限が動いたので、React 側(画像にするかの判定)にやり直させる
+    setPreviewImageCapVersion((v) => v + 1);
+  }, []);
+
+  const getPreviewImageZoomCap = useCallback<MultiPageCanvasContextValue['getPreviewImageZoomCap']>(() => {
+    // 別のディスプレイへ移すと変わるので、そのつど読む
+    const dpr = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
+    const ratio = thumbnailRatioRef.current ?? PREVIEW_IMAGE_PRESUMED_RATIO;
+    return Math.min(PREVIEW_IMAGE_ZOOM, (ratio * PREVIEW_IMAGE_MAX_STRETCH) / dpr);
+  }, []);
+
   const value = useMemo<MultiPageCanvasContextValue>(
     () => ({
       isEnabled: enabled,
@@ -992,12 +1132,16 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       toggleRulers,
       requestPreviewSlot,
       releasePreviewSlot,
+      getPreviewImageZoomCap,
+      reportThumbnailWidth,
+      previewImageCapVersion,
     }),
     [
       enabled, editorMode, pages, bounds, layout, getPage, updatePageFrame, setPageHtml, invalidatePages, artboard.documentAttributes,
       setPageHeight, ensurePageHtml, previewStyles, viewStore, setCanvasOffset, setCanvasZoom, setView, zoomAt, zoomTo, zoomIn, zoomOut, zoomToFit, zoomToPage,
       zoomToActual, revealPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
       persisted, rulersVisible, toggleRulers, requestPreviewSlot, releasePreviewSlot,
+      getPreviewImageZoomCap, reportThumbnailWidth, previewImageCapVersion,
     ],
   );
 

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

@@ -229,6 +229,37 @@ export function isInlineElement(element: HTMLElement, computedStyle?: CSSStyleDe
  * EditorCanvas側のエフェクト(スライダー等の状態駆動の経路)も同じ関数を使い、
  * 適用ロジックの二重実装を作らない。
  */
+/**
+ * ズームが止まってから will-change を外すまでの間(ms)。
+ * 操作が続いている間は張り直されるので、実質「最後の 1 段から 200ms」
+ */
+const ZOOM_WILL_CHANGE_RELEASE_MS = 200;
+/** wrapper ごとの後始末タイマー(iframe が差し替わったら参照ごと消える) */
+const zoomWillChangeTimers = new WeakMap<HTMLElement, number>();
+
+/**
+ * ズーム中だけ will-change: transform を付ける。
+ *
+ * 付けっぱなしにすると、Chrome は倍率が変わっても層を作り直さない。67% で描いたラスタを
+ * 384% へ引き伸ばして出すので、手を止めても文字がにじんだまま残る(DPR 2 の実機で再現)。
+ * 外した瞬間に今の倍率で描き直されてくっきりする。次のホイールでまた付くので、
+ * 操作中の滑らかさは変わらない(マルチフレームのキャンバスの転写層も同じ考え方で、
+ * あちらは isInteracting の間だけ付けている)
+ */
+function markZooming(wrapper: HTMLElement, view: (Window & typeof globalThis) | null): void {
+  wrapper.style.willChange = 'transform';
+  if (!view) return;
+  const previous = zoomWillChangeTimers.get(wrapper);
+  if (previous != null) view.clearTimeout(previous);
+  zoomWillChangeTimers.set(
+    wrapper,
+    view.setTimeout(() => {
+      zoomWillChangeTimers.delete(wrapper);
+      wrapper.style.willChange = '';
+    }, ZOOM_WILL_CHANGE_RELEASE_MS),
+  );
+}
+
 export function applyCanvasZoomDom(iframeDoc: Document, zoomPct: number): void {
   // 埋め込み(マルチフレームのキャンバス内)では倍率は外側の CSS transform が持つ。
   // iframe の中は常に等倍で、スクロール領域も作らない
@@ -240,7 +271,7 @@ export function applyCanvasZoomDom(iframeDoc: Document, zoomPct: number): void {
   if (!wrapper || !scrollArea || !container || !artboard) return;
 
   const scale = zoomPct / 100;
-  wrapper.style.willChange = 'transform';
+  markZooming(wrapper, iframeDoc.defaultView);
   wrapper.style.transform = `scale(${scale})`;
 
   const w = artboard.offsetWidth;

package/src/version.ts

@@ -6,4 +6,4 @@
  * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
  * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
  */
-export const EDITOR_VERSION = '0.4.0';
+export const EDITOR_VERSION = '0.4.1';