@growgroup/visual-editor 0.3.0 → 0.4.0

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -34,7 +34,7 @@ import React, {
   useState,
   useSyncExternalStore,
 } from 'react';
-import { useEditorArtboard } from './EditorArtboardContext';
+import { useEditorArtboard, computeContentDepths, type DocumentAttributes } from './EditorArtboardContext';
 import { useEditorTool } from './EditorToolContext';
 import { useEditorView } from './EditorViewContext';
 import { SLIDE_HEIGHT, SLIDE_WIDTH, WEBPAGE_WIDTH } from '../constants';
@@ -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 }> = {
@@ -82,7 +91,7 @@ const WRAP_AT: Record<EditorMode, (count: number) => number> = {
 export interface PageFrame {
   id: string;
   title: string;
-  /** 本文。null = まだ読んでいない */
+  /** 本文。null = まだ読んでいない(または読み直す) */
   html: string | null;
   /** 本文を読んでいる途中 */
   loading: boolean;
@@ -93,6 +102,21 @@ export interface PageFrame {
   measured: boolean;
   /** 未保存の変更がある(生きているページだけ立つ) */
   isDirty: boolean;
+  /** 親ページ(contentList[].parentId。一覧に無い親は null 扱い) */
+  parentId: string | null;
+  /** 階層の深さ(ルート = 0) */
+  depth: number;
+  /** 編集しない表示の URL(contentList[].href) */
+  href?: string;
+  /** ページ全体を写した画像の URL(contentList[].thumbnail)。大きく縮小した間だけ紙面の代わりに出す */
+  thumbnail?: string;
+  /** 利用側が進める本文の版(contentList[].revision)。変わったら読み直す */
+  revision: number;
+  /**
+   * 本文が古い(部品の反映などで外から変わった)。読み直すときは contentList[].thumbnailHtml
+   * ではなく io.loadContent から取る(thumbnailHtml は利用側が最初に渡した姿のままなので)
+   */
+  stale: boolean;
 }
 
 /** レイアウト済み(位置付き)のフレーム */
@@ -101,6 +125,9 @@ export interface PageFrameLayout extends PageFrame {
   index: number;
 }
 
+/** フレームの並べ方。tree = 階層(parentId)のツリー、grid = 行で折り返す */
+export type CanvasLayoutKind = 'grid' | 'tree';
+
 export interface CanvasViewState {
   canvasOffset: { x: number; y: number };
   canvasZoom: number;
@@ -129,13 +156,19 @@ export interface MultiPageCanvasContextValue {
   // ---- ページフレーム
   pages: PageFrameLayout[];
   bounds: CanvasBounds;
+  /** 並べ方(contentList に階層があれば tree) */
+  layout: CanvasLayoutKind;
   getPage: (id: string) => PageFrameLayout | undefined;
-  updatePageFrame: (
-    id: string,
-    updates: Partial<Pick<PageFrame, 'title' | 'html' | 'size' | 'isDirty' | 'measured' | 'loading' | 'error'>>,
-  ) => void;
+  updatePageFrame: (id: string, updates: Partial<Omit<PageFrame, 'id'>>) => void;
   /** 本文を差し替える(保存後・読み込み後) */
   setPageHtml: (id: string, html: string) => void;
+  /**
+   * 見るだけの紙面の本文を捨てて読み直させる(部品の定義を更新して他ページが変わったとき等)。
+   * except のページ(編集中のページ)は触らない。読み直す手段(io.loadContent)が無ければ何もしない
+   */
+  invalidatePages: (options?: { except?: readonly (string | null | undefined)[] }) => void;
+  /** 文書(`<html>`)に付ける属性(利用側の documentAttributes)。紙面にも読み直さずに反映する */
+  documentAttributes: DocumentAttributes;
   /**
    * 高さの実測を反映する。source が 'preview' のときは、生きているページには効かない
    * (エディタの実測が正。見るだけの紙面はフォントや画像の読み込み前に測ることがある)
@@ -222,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,
@@ -241,16 +285,19 @@ export function useCanvasViewStateOptional(): CanvasViewState | null {
 // レイアウト
 // ============================================================
 
-/**
- * 寸法から位置を決める。行ごとに折り返し、行の高さはその行で一番高いフレームに合わせる。
- * 位置を状態に持たないので、高さが実測で変わっても流れ直すだけで済む
- */
-export function layoutFrames(
-  frames: PageFrame[],
-  editorMode: EditorMode,
-): { pages: PageFrameLayout[]; bounds: CanvasBounds } {
-  const gap = GAP[editorMode];
-  const perRow = WRAP_AT[editorMode](frames.length);
+function boundsOf(pages: PageFrameLayout[]): CanvasBounds {
+  return pages.length
+    ? {
+        minX: Math.min(...pages.map((p) => p.position.x)),
+        minY: Math.min(...pages.map((p) => p.position.y)),
+        maxX: Math.max(...pages.map((p) => p.position.x + p.size.width)),
+        maxY: Math.max(...pages.map((p) => p.position.y + p.size.height)),
+      }
+    : { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+}
+
+/** 行で折り返す並べ方(階層が無いとき)。行の高さはその行で一番高いフレームに合わせる */
+function layoutGrid(frames: PageFrame[], gap: { x: number; y: number }, perRow: number): PageFrameLayout[] {
   const pages: PageFrameLayout[] = [];
   let x = 0;
   let y = 0;
@@ -265,15 +312,101 @@ export function layoutFrames(
     x += frame.size.width + gap.x;
     rowHeight = Math.max(rowHeight, frame.size.height);
   });
-  const bounds: CanvasBounds = pages.length
-    ? {
-        minX: Math.min(...pages.map((p) => p.position.x)),
-        minY: Math.min(...pages.map((p) => p.position.y)),
-        maxX: Math.max(...pages.map((p) => p.position.x + p.size.width)),
-        maxY: Math.max(...pages.map((p) => p.position.y + p.size.height)),
-      }
-    : { minX: 0, minY: 0, maxX: 0, maxY: 0 };
-  return { pages, bounds };
+  return pages;
+}
+
+/**
+ * 階層(parentId)のツリーで並べる(サイトマップの図と同じ姿)。
+ * - 深さごとに行を作り、行の高さはその深さで一番高いフレームに合わせる
+ * - 親は子の並び(部分木)の中央の上に置く。部分木の幅 = max(自分の幅, 子の部分木の幅の和 + 間隔)
+ * - 親が一覧に無い・循環しているものはルートとして左から順に置く
+ * 一覧の順(index)は変えない(フレーム名の番号・読み込みの順番待ちに使う)
+ */
+function layoutTree(frames: PageFrame[], gap: { x: number; y: number }): PageFrameLayout[] {
+  const byId = new Map(frames.map((f) => [f.id, f] as const));
+  const children = new Map<string, PageFrame[]>();
+  const roots: PageFrame[] = [];
+  // 循環の検出: 親をたどってルートに着くか(着かないものはルート扱い)
+  const reachesRoot = (f: PageFrame): boolean => {
+    const seen = new Set<string>([f.id]);
+    let cur: PageFrame | undefined = f;
+    while (cur?.parentId && byId.has(cur.parentId)) {
+      if (seen.has(cur.parentId)) return false;
+      seen.add(cur.parentId);
+      cur = byId.get(cur.parentId);
+    }
+    return true;
+  };
+  frames.forEach((f) => {
+    const parent = f.parentId && f.parentId !== f.id && byId.has(f.parentId) && reachesRoot(f) ? f.parentId : null;
+    if (parent) {
+      const list = children.get(parent) ?? [];
+      list.push(f);
+      children.set(parent, list);
+    } else {
+      roots.push(f);
+    }
+  });
+  const subtreeWidth = new Map<string, number>();
+  const widthOf = (f: PageFrame): number => {
+    const cached = subtreeWidth.get(f.id);
+    if (cached != null) return cached;
+    const kids = children.get(f.id) ?? [];
+    const kidsWidth = kids.reduce((sum, k, i) => sum + widthOf(k) + (i > 0 ? gap.x : 0), 0);
+    const w = Math.max(f.size.width, kidsWidth);
+    subtreeWidth.set(f.id, w);
+    return w;
+  };
+  // 深さと行の高さ
+  const depthOf = new Map<string, number>();
+  const rowHeight: number[] = [];
+  const walk = (f: PageFrame, d: number) => {
+    depthOf.set(f.id, d);
+    rowHeight[d] = Math.max(rowHeight[d] ?? 0, f.size.height);
+    (children.get(f.id) ?? []).forEach((k) => walk(k, d + 1));
+  };
+  roots.forEach((r) => walk(r, 0));
+  const rowY: number[] = [];
+  rowHeight.forEach((h, d) => {
+    rowY[d] = d === 0 ? 0 : rowY[d - 1] + rowHeight[d - 1] + gap.y;
+  });
+  const position = new Map<string, { x: number; y: number }>();
+  const place = (f: PageFrame, x0: number) => {
+    const d = depthOf.get(f.id) ?? 0;
+    const w = widthOf(f);
+    position.set(f.id, { x: x0 + (w - f.size.width) / 2, y: rowY[d] ?? 0 });
+    const kids = children.get(f.id) ?? [];
+    const kidsWidth = kids.reduce((sum, k, i) => sum + widthOf(k) + (i > 0 ? gap.x : 0), 0);
+    let cx = x0 + (w - kidsWidth) / 2;
+    kids.forEach((k) => {
+      place(k, cx);
+      cx += widthOf(k) + gap.x;
+    });
+  };
+  let x = 0;
+  roots.forEach((r) => {
+    place(r, x);
+    x += widthOf(r) + gap.x;
+  });
+  return frames.map((f, index) => {
+    const p = position.get(f.id) ?? { x: 0, y: 0 };
+    return { ...f, index, depth: depthOf.get(f.id) ?? 0, position: { x: Math.round(p.x), y: Math.round(p.y) } };
+  });
+}
+
+/**
+ * 寸法から位置を決める。contentList に階層(parentId)があればツリー、無ければ行で折り返す。
+ * 位置を状態に持たないので、高さが実測で変わっても流れ直すだけで済む
+ */
+export function layoutFrames(
+  frames: PageFrame[],
+  editorMode: EditorMode,
+): { pages: PageFrameLayout[]; bounds: CanvasBounds; layout: CanvasLayoutKind } {
+  const gap = GAP[editorMode];
+  const ids = new Set(frames.map((f) => f.id));
+  const hasHierarchy = frames.some((f) => f.parentId && f.parentId !== f.id && ids.has(f.parentId));
+  const pages = hasHierarchy ? layoutTree(frames, gap) : layoutGrid(frames, gap, WRAP_AT[editorMode](frames.length));
+  return { pages, bounds: boundsOf(pages), layout: hasHierarchy ? 'tree' : 'grid' };
 }
 
 function fitView(
@@ -361,19 +494,37 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
   framesMapRef.current = framesMap;
 
   // contentList からフレームを同期(既存の実測・本文は保つ)
+  const currentContentIdRef = useRef(artboard.currentContentId);
+  currentContentIdRef.current = artboard.currentContentId;
   useEffect(() => {
     if (!enabled) return;
+    const ids = new Set(artboard.contentList.map((c) => c.id));
+    const depths = computeContentDepths(artboard.contentList);
     setFramesMap((prev) => {
       const next = new Map<string, PageFrame>();
       let changed = prev.size !== artboard.contentList.length;
       artboard.contentList.forEach((content) => {
         const existing = prev.get(content.id);
+        const parentId = content.parentId && ids.has(content.parentId) && content.parentId !== content.id ? content.parentId : null;
+        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 html = existing.html ?? content.thumbnailHtml ?? null;
           const width = frameWidth;
-          if (title !== existing.title || html !== existing.html || width !== existing.size.width) changed = true;
-          next.set(content.id, { ...existing, title, html, size: { width, height: existing.size.height } });
+          // 利用側が版を進めた = 本文が外から変わった。編集中のページは触らず(編集中の本文が正)、
+          // 他のページは本文を捨てて読み直させる(紙面は次の本文が来るまで前の姿のまま)
+          const bumped = revision !== existing.revision;
+          const isLive = content.id === currentContentIdRef.current;
+          const html = bumped && !isLive ? null : existing.html ?? content.thumbnailHtml ?? null;
+          const stale = bumped && !isLive ? true : existing.stale;
+          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 || thumbnail !== existing.thumbnail
+          ) changed = true;
+          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, {
@@ -385,6 +536,12 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
             size: { width: frameWidth, height: defaultHeight },
             measured: editorMode === 'slide',
             isDirty: false,
+            parentId,
+            depth,
+            href,
+            thumbnail,
+            revision,
+            stale: false,
           });
         }
       });
@@ -392,7 +549,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     });
   }, [enabled, artboard.contentList, frameWidth, defaultHeight, editorMode]);
 
-  const { pages, bounds } = useMemo(() => {
+  const { pages, bounds, layout } = useMemo(() => {
     const order = artboard.contentList.map((c) => c.id);
     const frames = order.map((id) => framesMap.get(id)).filter((f): f is PageFrame => !!f);
     return layoutFrames(frames, editorMode);
@@ -428,10 +585,26 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
   }, []);
 
   const setPageHtml = useCallback(
-    (id: string, html: string) => updatePageFrame(id, { html, loading: false, error: null }),
+    (id: string, html: string) => updatePageFrame(id, { html, loading: false, error: null, stale: false }),
     [updatePageFrame],
   );
 
+  // 見るだけの紙面の本文を捨てて読み直させる(部品の反映など、外からファイルが変わったとき)
+  const invalidatePages = useCallback<MultiPageCanvasContextValue['invalidatePages']>((options) => {
+    if (!io().loadContent) return; // 読み直す手段が無い(thumbnailHtml は最初の姿のままなので読み直しにならない)
+    const except = new Set((options?.except ?? []).filter((id): id is string => !!id));
+    setFramesMap((prev) => {
+      let changed = false;
+      const next = new Map(prev);
+      prev.forEach((frame, id) => {
+        if (except.has(id) || frame.html == null) return;
+        next.set(id, { ...frame, html: null, loading: false, error: null, stale: true });
+        changed = true;
+      });
+      return changed ? next : prev;
+    });
+  }, []);
+
   // ---- ビュー状態(外部ストア。ズーム・パンで Context の値は変えない)
   const persisted = useMemo(() => readPersistedView(storageKey), [storageKey]);
   const [viewStore] = useState<CanvasViewStore>(() =>
@@ -669,12 +842,13 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     async (id) => {
       const frame = framesMapRef.current.get(id);
       if (!frame || frame.html != null || loadingRef.current.has(id)) return;
+      const loader = io().loadContent;
+      // 最初は利用側が渡した本文(thumbnailHtml)で足りる。外から変わった(stale)あとは loadContent で読み直す
       const fromList = artboard.contentList.find((c) => c.id === id)?.thumbnailHtml;
-      if (fromList != null) {
+      if (fromList != null && !(frame.stale && loader)) {
         setPageHtml(id, fromList);
         return;
       }
-      const loader = io().loadContent;
       if (!loader) return;
       loadingRef.current.add(id);
       updatePageFrame(id, { loading: true, error: null });
@@ -786,9 +960,12 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       editorMode,
       pages,
       bounds,
+      layout,
       getPage,
       updatePageFrame,
       setPageHtml,
+      invalidatePages,
+      documentAttributes: artboard.documentAttributes,
       setPageHeight,
       ensurePageHtml,
       previewStyles,
@@ -817,8 +994,8 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       releasePreviewSlot,
     }),
     [
-      enabled, editorMode, pages, bounds, getPage, updatePageFrame, setPageHtml, setPageHeight, ensurePageHtml,
-      previewStyles, viewStore, setCanvasOffset, setCanvasZoom, setView, zoomAt, zoomTo, zoomIn, zoomOut, zoomToFit, zoomToPage,
+      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,
     ],

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