@growgroup/visual-editor 0.3.1 → 0.4.1

package/src/editor/contexts/EditorArtboardContext.tsx

@@ -38,6 +38,14 @@ export interface ContentListItem {
   parentId?: string | null;
   /** 編集しない表示(ページそのもの・ビューア)の URL。渡すとフレーム名と一覧に「別タブで開く」が付く */
   href?: string;
+  /**
+   * ページ全体を写した画像(PNG / JPEG)の URL。幅は 480px 以上、縦横比はページと同じ。
+   * マルチフレームのキャンバスが大きく縮小されている間(倍率 0.5 未満)は、見るだけの紙面を
+   * srcdoc の iframe ではなくこの画像で描く(26 枚の iframe をラスタライズし直さずに済む)。
+   * 内容が変わったら URL も変える(`&v=…`)。変わると紙面が読み直す。
+   * 渡さないページ・画像が読めなかったページは、今までどおり iframe で描く
+   */
+  thumbnail?: string;
   /**
    * 本文の版。利用側でファイルが外から変わったとき(部品の一括反映・CLI・他の人の編集)に
    * 数を進めると、キャンバスの見るだけの紙面がそのページを読み直す。編集中のページには効かない

package/src/editor/contexts/EditorComponentsContext.tsx

@@ -46,6 +46,7 @@ import {
 import { io } from '../../io';
 import type { EditorPartDef, EditorPartsLibrary } from '../../io';
 import { useMultiPageCanvasOptional } from './MultiPageCanvasContext';
+import { debugLog, isDebugEnabled } from '../utils/debug';
 import {
   materializePart,
   partDefFromElement,
@@ -211,7 +212,7 @@ export function htmlElementToComponentElement(element: HTMLElement, isRoot: bool
       if (key && value) {
         // Skip position-related styles for root element
         if (isRoot && POSITION_STYLES.has(key)) {
-          console.log(`[htmlElementToComponentElement] Skipping position style for root: ${key}`);
+          debugLog(`[htmlElementToComponentElement] Skipping position style for root: ${key}`);
           continue;
         }
         // Convert kebab-case to camelCase
@@ -238,7 +239,7 @@ export function htmlElementToComponentElement(element: HTMLElement, isRoot: bool
   if (hasMixedContent) {
     // Mixed content: use innerHTML to preserve all content
     innerHTML = element.innerHTML;
-    console.log('[htmlElementToComponentElement] Mixed content detected, using innerHTML');
+    debugLog('[htmlElementToComponentElement] Mixed content detected, using innerHTML');
   } else if (hasElementChildren) {
     // Only element children: recursively process (not root)
     for (const child of Array.from(element.children)) {
@@ -261,17 +262,20 @@ export function htmlElementToComponentElement(element: HTMLElement, isRoot: bool
     overridable: { ...defaultOverridable },
   };
 
-  // Debug logging
-  console.log('[htmlElementToComponentElement] Converted:', {
-    tagName: result.tagName,
-    className: result.className,
-    hasTextContent: !!result.textContent,
-    hasInnerHTML: !!result.innerHTML,
-    textContentPreview: result.textContent?.substring(0, 50),
-    innerHTMLPreview: result.innerHTML?.substring(0, 50),
-    childrenCount: result.children.length,
-    stylesCount: Object.keys(result.styles).length,
-  });
+  // 要素 1 つにつき 1 行出る。部品 89 個 + 26 ページで 2,000 件を超えるので、
+  // 出さないときは引数のオブジェクトを組み立てること自体をやめる
+  if (isDebugEnabled()) {
+    debugLog('[htmlElementToComponentElement] Converted:', {
+      tagName: result.tagName,
+      className: result.className,
+      hasTextContent: !!result.textContent,
+      hasInnerHTML: !!result.innerHTML,
+      textContentPreview: result.textContent?.substring(0, 50),
+      innerHTMLPreview: result.innerHTML?.substring(0, 50),
+      childrenCount: result.children.length,
+      stylesCount: Object.keys(result.styles).length,
+    });
+  }
 
   return result;
 }
@@ -586,7 +590,7 @@ export function EditorComponentsProvider({
     setIsLoadingComponents(true);
     setError(null);
     try {
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Loading components for website: ${targetWebsiteId}`
       );
 
@@ -610,13 +614,13 @@ export function EditorComponentsProvider({
         setMasterComponents(componentsMap);
         setComponentLibrary(categoriesFromParts(lib, componentsMap));
         setComponentInstances(new Map());
-        console.log(`[EditorComponentsContext] Loaded ${defs.size} parts`);
+        debugLog(`[EditorComponentsContext] Loaded ${defs.size} parts`);
         return;
       }
 
       // Load master components from Firestore
       const components = await getAllMasterComponents(targetWebsiteId);
-      console.log(`[EditorComponentsContext] Loaded ${components.length} components`);
+      debugLog(`[EditorComponentsContext] Loaded ${components.length} components`);
 
       // Create Map from components
       const componentsMap = new Map<string, MasterComponent>();
@@ -689,9 +693,9 @@ export function EditorComponentsProvider({
 
     const loadInstances = async () => {
       try {
-        console.log(`[EditorComponentsContext] Loading instances for page: ${pageId}`);
+        debugLog(`[EditorComponentsContext] Loading instances for page: ${pageId}`);
         const instances = await getPageComponentInstances(websiteId, pageId);
-        console.log(`[EditorComponentsContext] Loaded ${instances.length} instances`);
+        debugLog(`[EditorComponentsContext] Loaded ${instances.length} instances`);
 
         // Create Map from instances (keyed by domElementId)
         const instancesMap = new Map<string, ComponentInstance>();
@@ -766,7 +770,7 @@ export function EditorComponentsProvider({
         });
       }
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Created master component: ${name} (${id})`
       );
       return masterComponent;
@@ -996,7 +1000,7 @@ export function EditorComponentsProvider({
       });
     }
 
-    console.log(`[EditorComponentsContext] Deleted master component: ${id}`);
+    debugLog(`[EditorComponentsContext] Deleted master component: ${id}`);
   }, [websiteId, partsMode]);
 
   const getMasterComponent = useCallback(
@@ -1069,7 +1073,7 @@ export function EditorComponentsProvider({
         });
       }
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Created instance: ${id} of master ${masterComponentId}`
       );
       return instance;
@@ -1157,7 +1161,7 @@ export function EditorComponentsProvider({
       return next;
     });
 
-    console.log(`[EditorComponentsContext] Deleted instance: ${instanceId}`);
+    debugLog(`[EditorComponentsContext] Deleted instance: ${instanceId}`);
   }, [websiteId, pageId]);
 
   const getInstanceByDomId = useCallback(
@@ -1219,7 +1223,7 @@ export function EditorComponentsProvider({
         return next;
       });
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Added override to instance: ${instanceId}`
       );
     },
@@ -1269,7 +1273,7 @@ export function EditorComponentsProvider({
         return next;
       });
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Removed override ${overrideId} from instance: ${instanceId}`
       );
     },
@@ -1321,7 +1325,7 @@ export function EditorComponentsProvider({
       return next;
     });
 
-    console.log(
+    debugLog(
       `[EditorComponentsContext] Reset all overrides for instance: ${instanceId}`
     );
   }, [websiteId, pageId]);
@@ -1394,7 +1398,7 @@ export function EditorComponentsProvider({
         return next;
       });
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Changed variant for instance ${instanceId} to ${variantId}`
       );
     },
@@ -1458,7 +1462,7 @@ export function EditorComponentsProvider({
         });
       }
 
-      console.log(
+      debugLog(
         `[EditorComponentsContext] Detached instance: ${instanceId}`
       );
       return htmlElement;

package/src/editor/contexts/EditorUIStateContext.tsx

@@ -18,6 +18,7 @@
 import React, { createContext, useContext, useState, useCallback } from 'react';
 import type { DOMTreeNode, PanelSections, MarqueeState } from '../types';
 import { DEFAULT_PANEL_SECTIONS } from '../constants';
+import { debugLog } from '../utils/debug';
 
 export interface EditorUIStateContextValue {
   // DOMツリー
@@ -81,7 +82,7 @@ export function EditorUIStateProvider({
   const restoreFocus = useCallback(() => {
     const iframeDoc = getIframeDoc();
     if (!iframeDoc) {
-      console.log('[EditorUIStateContext] restoreFocus: iframe doc not available');
+      debugLog('[EditorUIStateContext] restoreFocus: iframe doc not available');
       return;
     }
 
@@ -89,14 +90,14 @@ export function EditorUIStateProvider({
     const editingElement = iframeDoc.querySelector('[contenteditable="true"]') as HTMLElement;
     if (editingElement) {
       editingElement.focus();
-      console.log('[EditorUIStateContext] restoreFocus: focused editing element');
+      debugLog('[EditorUIStateContext] restoreFocus: focused editing element');
       return;
     }
 
     // iframeのbodyにフォーカスを設定
     if (iframeDoc.body) {
       iframeDoc.body.focus();
-      console.log('[EditorUIStateContext] restoreFocus: focused iframe body');
+      debugLog('[EditorUIStateContext] restoreFocus: focused iframe body');
     }
   }, [getIframeDoc]);
 

package/src/editor/contexts/EditorVariablesContext.tsx

@@ -22,6 +22,7 @@
  */
 
 import React, { createContext, useContext, useState, useCallback, useMemo, useRef } from 'react';
+import { debugLog } from '../utils/debug';
 import type {
   CSSVariableDefinition,
   CSSVariableCategory,
@@ -264,7 +265,7 @@ export function EditorVariablesProvider({
       await onSave(variables);
       savedVariablesRef.current = [...variables];
       setHasChanges(false);
-      console.log('[EditorVariablesContext] Variables saved successfully');
+      debugLog('[EditorVariablesContext] Variables saved successfully');
     } catch (error) {
       console.error('[EditorVariablesContext] Failed to save variables:', error);
       throw error;
@@ -286,7 +287,7 @@ export function EditorVariablesProvider({
       setVariablesState(loaded);
       savedVariablesRef.current = [...loaded];
       setHasChanges(false);
-      console.log('[EditorVariablesContext] Variables loaded:', loaded.length);
+      debugLog('[EditorVariablesContext] Variables loaded:', loaded.length);
     } catch (error) {
       console.error('[EditorVariablesContext] Failed to load variables:', error);
       throw error;
@@ -299,7 +300,7 @@ export function EditorVariablesProvider({
   const syncFromTheme = useCallback((themeVariables: CSSVariableDefinition[]) => {
     setVariablesState(themeVariables);
     markAsChanged();
-    console.log('[EditorVariablesContext] Synced from theme:', themeVariables.length, 'variables');
+    debugLog('[EditorVariablesContext] Synced from theme:', themeVariables.length, 'variables');
   }, [markAsChanged]);
 
   // バルク設定
@@ -327,7 +328,7 @@ export function EditorVariablesProvider({
     }
 
     styleEl.textContent = cssString;
-    console.log('[EditorVariablesContext] Injected CSS variables to iframe');
+    debugLog('[EditorVariablesContext] Injected CSS variables to iframe');
   }, [cssString]);
 
   // Context値

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -56,12 +56,44 @@ 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) */
 const VIEW_ANIMATION_MS = 240;
 /** 見るだけの紙面を同時に読む枚数 */
 const PREVIEW_PARALLEL = 4;
+/**
+ * 見るだけの紙面を画像で描く倍率の **上限の最大値**。これ以上に拡大されていれば、
+ * どんなに解像度の高い画像でも iframe で描く(画像は文字を選べない・検索できないため)。
+ * 実際の上限はこれより小さくなることがある ── getPreviewImageZoomCap() を見ること
+ */
+export const PREVIEW_IMAGE_ZOOM = 0.5;
+/** 画像 → 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 }> = {
@@ -99,6 +131,8 @@ export interface PageFrame {
   depth: number;
   /** 編集しない表示の URL(contentList[].href) */
   href?: string;
+  /** ページ全体を写した画像の URL(contentList[].thumbnail)。大きく縮小した間だけ紙面の代わりに出す */
+  thumbnail?: string;
   /** 利用側が進める本文の版(contentList[].revision)。変わったら読み直す */
   revision: number;
   /**
@@ -217,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;
 }
 
 // ============================================================
@@ -244,6 +291,17 @@ export function useCanvasViewState(): CanvasViewState {
   return useSyncExternalStore(viewStore.subscribe, viewStore.get, viewStore.get);
 }
 
+/**
+ * 編集中のページだけを購読する。
+ * useCanvasViewState() だと倍率・位置が変わるたびに描き直る(ホイール 1 段ごとに
+ * キャンバス全体が React を通る)。編集中のページしか要らない側はこちらを使う
+ */
+export function useCanvasActivePageId(): string | null {
+  const { viewStore } = useMultiPageCanvas();
+  const getSnapshot = useCallback(() => viewStore.get().activePageId, [viewStore]);
+  return useSyncExternalStore(viewStore.subscribe, getSnapshot, getSnapshot);
+}
+
 const NULL_VIEW_STORE: CanvasViewStore = {
   get: () => NULL_VIEW,
   set: () => undefined,
@@ -487,6 +545,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
         const depth = depths.get(content.id) ?? 0;
         const revision = content.revision ?? 0;
         const href = content.href;
+        const thumbnail = content.thumbnail;
         if (existing) {
           const title = content.title || existing.title;
           const width = frameWidth;
@@ -499,9 +558,9 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
           if (
             title !== existing.title || html !== existing.html || width !== existing.size.width ||
             parentId !== existing.parentId || depth !== existing.depth || href !== existing.href ||
-            revision !== existing.revision || stale !== existing.stale
+            revision !== existing.revision || stale !== existing.stale || thumbnail !== existing.thumbnail
           ) changed = true;
-          next.set(content.id, { ...existing, title, html, stale, parentId, depth, href, revision, size: { width, height: existing.size.height } });
+          next.set(content.id, { ...existing, title, html, stale, parentId, depth, href, thumbnail, revision, size: { width, height: existing.size.height } });
         } else {
           changed = true;
           next.set(content.id, {
@@ -516,6 +575,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
             parentId,
             depth,
             href,
+            thumbnail,
             revision,
             stale: false,
           });
@@ -611,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;
@@ -786,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']>(
@@ -869,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],
@@ -930,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,
@@ -968,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/hooks/useAiReplace.ts

@@ -13,6 +13,7 @@ import { createAuthApi } from '../../lib/api/auth-fetch';
 import { convertSingleElementToAbsolute, generateElementId } from '../utils/dom-utils';
 import type { SlideAgentRequest, SlideAgentResponse, AttachedFile as SlideAttachedFile } from '../../lib/agent/slide-agent/types';
 import type { WebsiteAgentRequest, WebsiteAgentResponse, AttachedFile as WebsiteAttachedFile } from '../../lib/agent/website-agent/types';
+import { debugLog } from '../utils/debug';
 
 // AttachedFile型を共通化（両方同じ構造）
 export type AttachedFile = SlideAttachedFile;
@@ -176,7 +177,7 @@ export function useAiReplace({ presentationId, websiteId }: UseAiReplaceProps =
       const convertChildrenToAbsolute = async () => {
         // オートレイアウトモードの場合は変換をスキップ
         if (layoutMode === 'auto') {
-          console.log('[useAiReplace] Auto layout mode - skipping absolute positioning conversion for children');
+          debugLog('[useAiReplace] Auto layout mode - skipping absolute positioning conversion for children');
           return;
         }
 
@@ -196,7 +197,7 @@ export function useAiReplace({ presentationId, websiteId }: UseAiReplaceProps =
             convertSingleElementToAbsolute(iframeDoc, htmlChild);
           });
 
-          console.log('[useAiReplace] Converted', editableChildren.length, 'child elements to absolute positioning');
+          debugLog('[useAiReplace] Converted', editableChildren.length, 'child elements to absolute positioning');
           
           // 変更を再度通知
           notifyIframeChange();
@@ -263,7 +264,7 @@ export function useAiReplace({ presentationId, websiteId }: UseAiReplaceProps =
       // editorModeに基づいてAPI呼び出しを分岐
       const isWebpageMode = editorMode === 'webpage';
 
-      console.log('[useAiReplace] API呼び出し:', {
+      debugLog('[useAiReplace] API呼び出し:', {
         editorMode,
         apiEndpoint: isWebpageMode ? '/api/website-agent' : '/api/slide-agent',
         promptLength: prompt.length,

package/src/editor/hooks/useBrowserZoomPrevention.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { debugLog } from '../utils/debug';
 
 /**
  * ブラウザのネイティブズーム（ピンチ、Ctrl+ホイール、キーボードショートカット等）を防止するフック
@@ -67,7 +68,7 @@ export function useBrowserZoomPrevention(): void {
       // e.key ではなく e.code を使用して物理キーを判定する
       // preventDefault のみでブラウザのデフォルト動作を止め、自前のハンドラーは動くようにする
       if (isCmdOrCtrl && e.altKey && (e.code === 'KeyC' || e.code === 'KeyV')) {
-        console.log('[preventBrowserShortcuts] Preventing browser default for Cmd/Ctrl+Alt+C/V', {
+        debugLog('[preventBrowserShortcuts] Preventing browser default for Cmd/Ctrl+Alt+C/V', {
           key: e.key,
           code: e.code,
         });