@growgroup/visual-editor 0.3.1 → 0.4.0

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

@@ -62,6 +62,15 @@ export const RULER_SIZE = 20;
 const VIEW_ANIMATION_MS = 240;
 /** 見るだけの紙面を同時に読む枚数 */
 const PREVIEW_PARALLEL = 4;
+/**
+ * 見るだけの紙面を画像で描く倍率のしきい値。これ未満に縮小されている間は
+ * srcdoc の iframe ではなく contentList[].thumbnail の画像を出す。
+ * 判定は操作が終わってからしか動かさない(縮小の途中で 26 枚を差し替えない)。
+ * 行き来でちらつかないように戻りは別のしきい値にする(ヒステリシス)
+ */
+export const PREVIEW_IMAGE_ZOOM = 0.5;
+/** 画像 → iframe に戻す倍率(PREVIEW_IMAGE_ZOOM 以上)。iframe → 画像は PREVIEW_IMAGE_ZOOM_OUT 未満 */
+export const PREVIEW_IMAGE_ZOOM_OUT = 0.4;
 
 /** フレームどうしの間隔(紙面の座標系、等倍のとき)。フレーム名を出すかの判定にも使う */
 export const FRAME_GAP: Record<EditorMode, { x: number; y: number }> = {
@@ -99,6 +108,8 @@ export interface PageFrame {
   depth: number;
   /** 編集しない表示の URL(contentList[].href) */
   href?: string;
+  /** ページ全体を写した画像の URL(contentList[].thumbnail)。大きく縮小した間だけ紙面の代わりに出す */
+  thumbnail?: string;
   /** 利用側が進める本文の版(contentList[].revision)。変わったら読み直す */
   revision: number;
   /**
@@ -244,6 +255,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 +509,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 +522,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 +539,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
             parentId,
             depth,
             href,
+            thumbnail,
             revision,
             stale: false,
           });

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,
         });

package/src/editor/hooks/useComponentEditMode.ts

@@ -7,6 +7,7 @@ import { buildDomTree } from '../utils/dom-utils';
 import { applyLockInside, detachPart, partInfoOf, unlockPartDescendants } from '../parts';
 import { toast } from 'sonner';
 import type { MasterComponent, ComponentInstance } from '../../types/editor-components';
+import { debugLog } from '../utils/debug';
 
 interface UseComponentEditModeProps {
   contentId?: string;
@@ -201,7 +202,7 @@ export function useComponentEditMode({
 
     try {
       // Debug: Log the original element
-      console.log('[handleConfirmCreateComponent] Original element:', {
+      debugLog('[handleConfirmCreateComponent] Original element:', {
         tagName: element.tagName,
         className: element.className,
         innerHTML: element.innerHTML.substring(0, 200),
@@ -212,7 +213,7 @@ export function useComponentEditMode({
 
       // Create the master component
       const component = createMasterComponent(element, newComponentName.trim(), newComponentCategory || 'content');
-      console.log('[handleConfirmCreateComponent] Created component:', {
+      debugLog('[handleConfirmCreateComponent] Created component:', {
         id: component.id,
         name: component.name,
         variantsCount: component.variants.length,
@@ -248,7 +249,7 @@ export function useComponentEditMode({
         { x: positionX, y: positionY }  // initialPosition
       );
       if (instance) {
-        console.log('[handleConfirmCreateComponent] Created instance:', {
+        debugLog('[handleConfirmCreateComponent] Created instance:', {
           id: instance.id,
           domElementId: instance.domElementId,
           variantId: instance.variantId,
@@ -259,7 +260,7 @@ export function useComponentEditMode({
         const { renderInstance } = await import('../utils/component-renderer');
         const instanceElement = renderInstance(component, instance, iframeDoc);
 
-        console.log('[handleConfirmCreateComponent] Rendered instance element:', {
+        debugLog('[handleConfirmCreateComponent] Rendered instance element:', {
           tagName: instanceElement.tagName,
           className: instanceElement.className,
           innerHTML: instanceElement.innerHTML.substring(0, 200),
@@ -281,7 +282,7 @@ export function useComponentEditMode({
         // Update history
         notifyIframeChange(true);
 
-        console.log('[handleConfirmCreateComponent] Replaced element with instance:', instance.id);
+        debugLog('[handleConfirmCreateComponent] Replaced element with instance:', instance.id);
       }
 
       setCreateComponentDialogOpen(false);
@@ -349,11 +350,11 @@ export function useComponentEditMode({
       originalPageHtmlRef.current = artboard.innerHTML;
 
       // DEBUG: Log what instances are being saved
-      console.log('[enterComponentEditMode] ========== SAVING PAGE HTML ==========');
+      debugLog('[enterComponentEditMode] ========== SAVING PAGE HTML ==========');
       const instancesToSave = artboard.querySelectorAll('[data-component-instance]');
-      console.log('[enterComponentEditMode] Saving', instancesToSave.length, 'instances');
+      debugLog('[enterComponentEditMode] Saving', instancesToSave.length, 'instances');
       instancesToSave.forEach((inst, idx) => {
-        console.log(`[enterComponentEditMode] Instance ${idx} text being saved:`, inst.textContent?.substring(0, 100));
+        debugLog(`[enterComponentEditMode] Instance ${idx} text being saved:`, inst.textContent?.substring(0, 100));
       });
     }
 
@@ -458,16 +459,16 @@ export function useComponentEditMode({
     const artboard = iframeDoc.getElementById('artboard');
 
     // DEBUG: Log what we're about to restore
-    console.log('[exitComponentEditMode] ========== HTML RESTORE DEBUG ==========');
-    console.log('[exitComponentEditMode] originalPageHtmlRef exists:', originalPageHtmlRef.current !== null);
+    debugLog('[exitComponentEditMode] ========== HTML RESTORE DEBUG ==========');
+    debugLog('[exitComponentEditMode] originalPageHtmlRef exists:', originalPageHtmlRef.current !== null);
     if (originalPageHtmlRef.current) {
       // Extract instance text from saved HTML for debugging
       const tempDiv = document.createElement('div');
       tempDiv.innerHTML = originalPageHtmlRef.current;
       const savedInstances = tempDiv.querySelectorAll('[data-component-instance]');
-      console.log('[exitComponentEditMode] Saved HTML has', savedInstances.length, 'instances');
+      debugLog('[exitComponentEditMode] Saved HTML has', savedInstances.length, 'instances');
       savedInstances.forEach((inst, idx) => {
-        console.log(`[exitComponentEditMode] Saved instance ${idx} text:`, inst.textContent?.substring(0, 100));
+        debugLog(`[exitComponentEditMode] Saved instance ${idx} text:`, inst.textContent?.substring(0, 100));
       });
     }
 
@@ -477,9 +478,9 @@ export function useComponentEditMode({
 
       // DEBUG: Log what's in the DOM after restore
       const restoredInstances = artboard.querySelectorAll('[data-component-instance]');
-      console.log('[exitComponentEditMode] After restore, DOM has', restoredInstances.length, 'instances');
+      debugLog('[exitComponentEditMode] After restore, DOM has', restoredInstances.length, 'instances');
       restoredInstances.forEach((inst, idx) => {
-        console.log(`[exitComponentEditMode] Restored instance ${idx} text:`, inst.textContent?.substring(0, 100));
+        debugLog(`[exitComponentEditMode] Restored instance ${idx} text:`, inst.textContent?.substring(0, 100));
       });
     }
 
@@ -489,8 +490,8 @@ export function useComponentEditMode({
       const instancesArray = Array.from(componentInstances.values());
 
       // Debug: Log the updated master and instances
-      console.log('[exitComponentEditMode] ========== SYNC DEBUG ==========');
-      console.log('[exitComponentEditMode] Updated master:', {
+      debugLog('[exitComponentEditMode] ========== SYNC DEBUG ==========');
+      debugLog('[exitComponentEditMode] Updated master:', {
         id: updatedMaster.id,
         name: updatedMaster.name,
         variantsCount: updatedMaster.variants.length,
@@ -499,7 +500,7 @@ export function useComponentEditMode({
       // Log master's text content
       const defaultVariant = updatedMaster.variants.find(v => v.id === updatedMaster.defaultVariantId);
       if (defaultVariant) {
-        console.log('[exitComponentEditMode] Master rootElement:', {
+        debugLog('[exitComponentEditMode] Master rootElement:', {
           tagName: defaultVariant.rootElement.tagName,
           textContent: defaultVariant.rootElement.textContent?.substring(0, 100),
           innerHTML: defaultVariant.rootElement.innerHTML?.substring(0, 100),
@@ -507,7 +508,7 @@ export function useComponentEditMode({
         });
       }
 
-      console.log('[exitComponentEditMode] Instances to sync:', instancesArray.map(i => ({
+      debugLog('[exitComponentEditMode] Instances to sync:', instancesArray.map(i => ({
         id: i.id,
         masterComponentId: i.masterComponentId,
         domElementId: i.domElementId,
@@ -519,9 +520,9 @@ export function useComponentEditMode({
       const artboardForSync = iframeDoc.getElementById('artboard');
       if (artboardForSync) {
         const instanceElements = artboardForSync.querySelectorAll(`[data-component-master="${updatedMaster.id}"]`);
-        console.log('[exitComponentEditMode] Instance elements in DOM:', instanceElements.length);
+        debugLog('[exitComponentEditMode] Instance elements in DOM:', instanceElements.length);
         instanceElements.forEach((el, i) => {
-          console.log(`[exitComponentEditMode] DOM instance ${i}:`, {
+          debugLog(`[exitComponentEditMode] DOM instance ${i}:`, {
             instanceId: el.getAttribute('data-component-instance'),
             masterId: el.getAttribute('data-component-master'),
             elementId: el.getAttribute('data-element-id'),
@@ -532,11 +533,11 @@ export function useComponentEditMode({
 
       // Propagate master changes to all instances in the DOM
       const syncResult = propagateMasterChanges(updatedMaster, instancesArray, iframeDoc);
-      console.log('[exitComponentEditMode] Synced instances:', syncResult);
+      debugLog('[exitComponentEditMode] Synced instances:', syncResult);
 
       // Persist updated instances with their newly detected overrides
       if (syncResult.updatedInstances.length > 0) {
-        console.log('[exitComponentEditMode] Persisting updated instances with overrides:',
+        debugLog('[exitComponentEditMode] Persisting updated instances with overrides:',
           syncResult.updatedInstances.map(i => ({
             id: i.id,
             overridesCount: i.overrides.length,
@@ -576,7 +577,7 @@ export function useComponentEditMode({
   // Go to main component - enters component edit mode to directly edit the master in canvas
   const handleGoToMainComponent = useCallback(() => {
     if (!selectedElementInstance) return;
-    console.log('Go to main component:', selectedElementInstance.masterComponentId);
+    debugLog('Go to main component:', selectedElementInstance.masterComponentId);
     enterComponentEditMode(selectedElementInstance.masterComponentId);
   }, [selectedElementInstance, enterComponentEditMode]);
 
@@ -610,7 +611,7 @@ export function useComponentEditMode({
         }
       }
 
-      console.log('Detached instance:', selectedElementInstance.id);
+      debugLog('Detached instance:', selectedElementInstance.id);
       closeContextMenu();
       toast.success('インスタンスを解除しました');
     } catch (error) {
@@ -650,7 +651,7 @@ export function useComponentEditMode({
         }
       }
 
-      console.log('Reset overrides for instance:', selectedElementInstance.id);
+      debugLog('Reset overrides for instance:', selectedElementInstance.id);
       closeContextMenu();
       toast.success('オーバーライドをリセットしました');
     } catch (error) {
@@ -662,7 +663,7 @@ export function useComponentEditMode({
   // Push overrides to main (placeholder - requires more complex implementation)
   const handlePushOverridesToMain = useCallback(() => {
     if (!selectedElementInstance) return;
-    console.log('Push overrides to main - not yet implemented');
+    debugLog('Push overrides to main - not yet implemented');
     closeContextMenu();
     toast.info('この機能は現在開発中です');
   }, [selectedElementInstance, closeContextMenu]);

package/src/editor/hooks/useEditorMessages.ts

@@ -9,6 +9,7 @@ import { useEditorContext } from '../EditorContext';
 import { buildDomTree, updateSelectionBox } from '../utils/dom-utils';
 import { extractElementInfo } from '../utils/style-utils';
 import type { DOMTreeNode } from '../types';
+import { debugLog } from '../utils/debug';
 
 /**
  * postMessageの受信と処理を行うHook
@@ -55,7 +56,7 @@ export function useEditorMessages() {
 
       // DOMツリー更新
       if (event.data?.type === 'DOM_TREE_UPDATED') {
-        console.log('[EditorMessages] DOM_TREE_UPDATED received:', event.data.tree?.length, 'nodes');
+        debugLog('[EditorMessages] DOM_TREE_UPDATED received:', event.data.tree?.length, 'nodes');
         if (event.data.tree && Array.isArray(event.data.tree)) {
           setDomTree(event.data.tree);
           // 初期状態で最初のレベルを展開
@@ -71,7 +72,7 @@ export function useEditorMessages() {
         const iframeDoc = getIframeDoc();
         if (iframeDoc) {
           const tree = buildDomTree(iframeDoc);
-          console.log('[EditorMessages] Rebuilt DOM tree:', tree.length, 'nodes');
+          debugLog('[EditorMessages] Rebuilt DOM tree:', tree.length, 'nodes');
           setDomTree(tree);
         }
       }