@growgroup/visual-editor 0.3.1 → 0.4.1

package/src/editor/hooks/useIframeInitializer.ts

@@ -17,6 +17,7 @@ import {
 } from '../utils/dom-utils';
 import { generateEditableHtml } from '../utils/html-utils';
 import { extractElementInfo } from '../utils/style-utils';
+import { debugLog } from '../utils/debug';
 
 /**
  * iframeの初期化とイベントハンドラ設定を行うHook
@@ -357,7 +358,7 @@ export function useIframeInitializer() {
 
         element.addEventListener('mousedown', (e) => {
           const bodyClasses = iframeDoc.body.classList;
-          if (bodyClasses.contains('draw-mode') || bodyClasses.contains('text-mode')) return;
+          if (bodyClasses.contains('draw-mode') || bodyClasses.contains('text-mode') || bodyClasses.contains('comment-mode')) return;
           if (element.getAttribute('contenteditable') === 'true') return;
 
           e.preventDefault();
@@ -506,7 +507,7 @@ export function useIframeInitializer() {
           // 別の幅で崩れ、デザインツールへの取り込みで意味を失う。
           if (editorMode !== 'webpage') {
             const count = convertToAbsolutePositioning(iframeDoc);
-            console.log('[Editor] 絶対配置へ変換:', count, '要素');
+            debugLog('[Editor] 絶対配置へ変換:', count, '要素');
           }
 
           // 変更を通知
@@ -567,7 +568,7 @@ export function useIframeInitializer() {
     const iframeDoc = getIframeDoc();
     if (iframeDoc?.body) {
       iframeDoc.body.classList.remove(
-        'move-mode', 'draw-mode', 'text-mode',
+        'move-mode', 'draw-mode', 'text-mode', 'comment-mode',
         'tool-rectangle', 'tool-ellipse', 'tool-line', 'tool-arrow',
         'tool-pen', 'tool-pencil', 'tool-text', 'tool-frame'
       );
@@ -578,6 +579,8 @@ export function useIframeInitializer() {
         iframeDoc.body.classList.add('draw-mode', `tool-${activeTool}`);
       } else if (activeTool === 'text') {
         iframeDoc.body.classList.add('text-mode', 'tool-text');
+      } else if (activeTool === 'comment') {
+        iframeDoc.body.classList.add('comment-mode');
       }
     }
   }, [activeTool, getIframeDoc]);

package/src/editor/hooks/useIframeSetup.ts

@@ -11,6 +11,7 @@ import { useEditorContext } from '../EditorContext';
 import { buildDomTree, isInlineElement } from '../utils/dom-utils';
 import { EDITOR_IFRAME_STYLES } from '../constants';
 import { isLockedInsidePart } from '../parts';
+import { debugLog } from '../utils/debug';
 
 interface UseIframeSetupReturn {
   /**
@@ -145,7 +146,7 @@ export function useIframeSetup(): UseIframeSetupReturn {
    */
   const initializeIframeDocument = useCallback(
     (iframeDoc: Document) => {
-      console.log('[IframeSetup] Initializing iframe document...');
+      debugLog('[IframeSetup] Initializing iframe document...');
 
       // スタイルを注入
       const style = iframeDoc.createElement('style');
@@ -158,7 +159,7 @@ export function useIframeSetup(): UseIframeSetupReturn {
 
       // 全要素にdata-editableとdata-element-idを付与
       const elementCount = initializeEditableElements(iframeDoc);
-      console.log('[IframeSetup] Initialized', elementCount, 'editable elements');
+      debugLog('[IframeSetup] Initialized', elementCount, 'editable elements');
 
       // DOMツリーを構築
       const newTree = buildDomTree(iframeDoc);
@@ -278,7 +279,7 @@ export function useIframeSetup(): UseIframeSetupReturn {
       const handleMouseMove = (e: MouseEvent) => {
         // 描画モードやテキストモードでは無効
         const bodyClasses = iframeDoc.body.classList;
-        if (bodyClasses.contains('draw-mode') || bodyClasses.contains('text-mode') || bodyClasses.contains('move-mode')) {
+        if (bodyClasses.contains('draw-mode') || bodyClasses.contains('text-mode') || bodyClasses.contains('move-mode') || bodyClasses.contains('comment-mode')) {
           if (currentHoveredTextElement) {
             currentHoveredTextElement.classList.remove('text-editable-hover');
             currentHoveredTextElement = null;

package/src/editor/hooks/useImageUpload.ts

@@ -17,6 +17,7 @@ import {
 } from '../../lib/firebase/storage';
 import { buildDomTree } from '../utils/dom-utils';
 import { findInsertionParent, findSlideRoot } from '../utils/slide-root';
+import { debugLog } from '../utils/debug';
 
 interface UploadResult {
   storageUrl: string;
@@ -177,15 +178,15 @@ export function useImageUpload(options: UseImageUploadOptions = {}) {
     clipboardData: DataTransfer,
     insertOptions?: { x?: number; y?: number }
   ): Promise<UploadResult | null> => {
-    console.log('[useImageUpload] uploadFromClipboard called');
+    debugLog('[useImageUpload] uploadFromClipboard called');
     // クリップボードから画像を探す
     const items = Array.from(clipboardData.items);
-    console.log('[useImageUpload] Clipboard items:', items.map(i => ({ type: i.type, kind: i.kind })));
+    debugLog('[useImageUpload] Clipboard items:', items.map(i => ({ type: i.type, kind: i.kind })));
 
     for (const item of items) {
       if (item.type.startsWith('image/')) {
         const file = item.getAsFile();
-        console.log('[useImageUpload] Got file from clipboard item:', file);
+        debugLog('[useImageUpload] Got file from clipboard item:', file);
         if (file) {
           return uploadFromFile(file, insertOptions);
         }

package/src/editor/hooks/useMarqueeSelection.ts

@@ -18,6 +18,7 @@ import {
 import { extractElementInfo } from '../utils/style-utils';
 import { MARQUEE_DRAG_THRESHOLD } from '../constants';
 import type { MarqueeState } from '../types';
+import { debugLog } from '../utils/debug';
 
 interface UseMarqueeSelectionOptions {
   /** マーキー選択の開始保留フラグ */
@@ -305,7 +306,7 @@ export function useMarqueeSelection(
           window.postMessage({ type: 'ELEMENT_DESELECTED' }, '*');
         }
 
-        console.log(
+        debugLog(
           '[Canvas] Marquee selected',
           selectedIds.length,
           additive ? '(additive)' : '',

package/src/editor/hooks/usePageSettingsManager.ts

@@ -6,6 +6,7 @@ import type { PageSettings, ProjectPageSettings } from '../types/page-settings';
 import type { HtmlImportResult } from '../components';
 import { buildDomTree, getArtboardContent } from '../utils/dom-utils';
 import { makeChildrenEditable } from '../utils/html-utils';
+import { debugLog } from '../utils/debug';
 
 interface UsePageSettingsManagerProps {
   parentId?: string;
@@ -116,12 +117,12 @@ export function usePageSettingsManager({
 
           // CSSがStorageにある場合
           if (pageData.settings.customCssUrl) {
-            console.log('[loadPageSettings] Fetching CSS from Storage:', pageData.settings.customCssUrl);
+            debugLog('[loadPageSettings] Fetching CSS from Storage:', pageData.settings.customCssUrl);
             try {
               const response = await fetch(pageData.settings.customCssUrl);
               if (response.ok) {
                 customCss = await response.text();
-                console.log(`[loadPageSettings] CSS fetched: ${customCss.length} chars`);
+                debugLog(`[loadPageSettings] CSS fetched: ${customCss.length} chars`);
               }
             } catch (e) {
               console.error('[loadPageSettings] Failed to fetch CSS from Storage:', e);
@@ -130,12 +131,12 @@ export function usePageSettingsManager({
 
           // JSがStorageにある場合
           if (pageData.settings.customJsUrl) {
-            console.log('[loadPageSettings] Fetching JS from Storage:', pageData.settings.customJsUrl);
+            debugLog('[loadPageSettings] Fetching JS from Storage:', pageData.settings.customJsUrl);
             try {
               const response = await fetch(pageData.settings.customJsUrl);
               if (response.ok) {
                 customJs = await response.text();
-                console.log(`[loadPageSettings] JS fetched: ${customJs.length} chars`);
+                debugLog(`[loadPageSettings] JS fetched: ${customJs.length} chars`);
               }
             } catch (e) {
               console.error('[loadPageSettings] Failed to fetch JS from Storage:', e);
@@ -177,7 +178,7 @@ export function usePageSettingsManager({
             setImportedJs(customJs);
           }
 
-          console.log('[loadPageSettings] Loaded settings:', {
+          debugLog('[loadPageSettings] Loaded settings:', {
             ...loadedSettings,
             customCss: customCss.length + ' chars',
             customJs: customJs.length + ' chars',
@@ -219,7 +220,7 @@ export function usePageSettingsManager({
         }
         if (styleElement.textContent !== importedCss) {
           styleElement.textContent = importedCss;
-          console.log('[applyStylesToIframe] Applied CSS:', importedCss.length, 'chars');
+          debugLog('[applyStylesToIframe] Applied CSS:', importedCss.length, 'chars');
         }
       }
 
@@ -231,7 +232,7 @@ export function usePageSettingsManager({
         const safeJs = `;try{${importedJs}}catch(e){console.error('[imported-scripts] Error:',e);}`;
         // 既にスクリプトが存在し、同じ内容であればスキップ
         if (existingScript?.textContent === safeJs) {
-          console.log('[applyStylesToIframe] JS already applied, skipping');
+          debugLog('[applyStylesToIframe] JS already applied, skipping');
           return;
         }
         // 既存のスクリプトを削除
@@ -243,7 +244,7 @@ export function usePageSettingsManager({
         scriptElement.id = 'imported-scripts';
         scriptElement.textContent = safeJs;
         iframeDoc.body.appendChild(scriptElement);
-        console.log('[applyStylesToIframe] Applied JS:', importedJs.length, 'chars');
+        debugLog('[applyStylesToIframe] Applied JS:', importedJs.length, 'chars');
       }
     };
 
@@ -275,11 +276,11 @@ export function usePageSettingsManager({
         iframeDoc.head.appendChild(styleElement);
       }
       styleElement.textContent = css;
-      console.log('[handleSaveCss] Updated CSS:', css.length, 'chars');
+      debugLog('[handleSaveCss] Updated CSS:', css.length, 'chars');
     } else if (styleElement) {
       // CSSが空の場合はスタイル要素を削除
       styleElement.remove();
-      console.log('[handleSaveCss] Removed empty CSS');
+      debugLog('[handleSaveCss] Removed empty CSS');
     }
 
     // 状態を更新
@@ -298,7 +299,7 @@ export function usePageSettingsManager({
       const styleElement = iframeDoc.getElementById('imported-styles');
       if (styleElement) {
         styleElement.remove();
-        console.log('[handleClearCss] Cleared imported CSS');
+        debugLog('[handleClearCss] Cleared imported CSS');
       }
     }
     setImportedCss('');
@@ -338,11 +339,11 @@ export function usePageSettingsManager({
       const safeJs = `;try{${js}}catch(e){console.error('[imported-scripts] Error:',e);}`;
       newScriptElement.textContent = safeJs;
       iframeDoc.body.appendChild(newScriptElement);
-      console.log('[handleSaveJs] Updated JS:', js.length, 'chars');
+      debugLog('[handleSaveJs] Updated JS:', js.length, 'chars');
     } else if (scriptElement) {
       // JSが空の場合はスクリプト要素を削除
       scriptElement.remove();
-      console.log('[handleSaveJs] Removed empty JS');
+      debugLog('[handleSaveJs] Removed empty JS');
     }
 
     // 状態を更新
@@ -361,7 +362,7 @@ export function usePageSettingsManager({
       const scriptElement = iframeDoc.getElementById('imported-scripts');
       if (scriptElement) {
         scriptElement.remove();
-        console.log('[handleClearJs] Cleared imported JS');
+        debugLog('[handleClearJs] Cleared imported JS');
       }
     }
     setImportedJs('');
@@ -461,13 +462,13 @@ export function usePageSettingsManager({
         if (settings.customJs) firestoreSettings.customJs = settings.customJs;
 
         await api.patch(apiPath, { settings: firestoreSettings });
-        console.log('[handleSavePageSettings] Saved settings to Firestore:', firestoreSettings);
+        debugLog('[handleSavePageSettings] Saved settings to Firestore:', firestoreSettings);
       } catch (error) {
         console.error('[handleSavePageSettings] Failed to save settings to Firestore:', error);
       }
     }
 
-    console.log('[handleSavePageSettings] Saved settings:', settings);
+    debugLog('[handleSavePageSettings] Saved settings:', settings);
   }, [getIframeDoc, notifyIframeChange, parentId, contentId, editorMode, getIdToken]);
 
   // 現在のページ設定を保存（メイン保存ボタンから呼ばれる）
@@ -492,7 +493,7 @@ export function usePageSettingsManager({
 
     // CSS/JSが空の場合は保存不要
     if (!currentCss && !currentJs && !pageSettings.title && !pageSettings.description) {
-      console.log('[handleSaveCurrentSettings] No settings to save');
+      debugLog('[handleSaveCurrentSettings] No settings to save');
       return;
     }
 
@@ -525,7 +526,7 @@ export function usePageSettingsManager({
       if (currentJs) firestoreSettings.customJs = currentJs;
 
       await api.patch(apiPath, { settings: firestoreSettings });
-      console.log('[handleSaveCurrentSettings] Saved settings to Firestore:', {
+      debugLog('[handleSaveCurrentSettings] Saved settings to Firestore:', {
         customCss: currentCss.length + ' chars',
         customJs: currentJs.length + ' chars',
       });
@@ -581,7 +582,7 @@ export function usePageSettingsManager({
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
 
-      console.log('[handleExport] Downloaded:', filename, 'format:', format);
+      debugLog('[handleExport] Downloaded:', filename, 'format:', format);
     } catch (error) {
       console.error('[handleExport] Export failed:', error);
     }
@@ -643,7 +644,7 @@ export function usePageSettingsManager({
         styleElement.id = 'imported-styles';
         styleElement.textContent = result.css;
         iframeDoc.head.appendChild(styleElement);
-        console.log('[handleHtmlImport] Injected CSS:', result.css.length, 'chars');
+        debugLog('[handleHtmlImport] Injected CSS:', result.css.length, 'chars');
 
         // CSS状態を保存（編集用）
         setImportedCss(result.css);
@@ -667,7 +668,7 @@ export function usePageSettingsManager({
         const safeJs = `;try{${result.js}}catch(e){console.error('[imported-scripts] Error:',e);}`;
         scriptElement.textContent = safeJs;
         iframeDoc.body.appendChild(scriptElement);
-        console.log('[handleHtmlImport] Injected JS:', result.js.length, 'chars');
+        debugLog('[handleHtmlImport] Injected JS:', result.js.length, 'chars');
 
         // JS状態を保存（編集用）- 元のJSを保存
         setImportedJs(result.js);
@@ -677,11 +678,11 @@ export function usePageSettingsManager({
 
       // インポートされた要素に data-editable と data-element-id を付与
       const count = makeChildrenEditable(artboard);
-      console.log('[handleHtmlImport] Made', count, 'elements editable');
+      debugLog('[handleHtmlImport] Made', count, 'elements editable');
 
       // リソース情報をログ
       if (result.resources) {
-        console.log('[handleHtmlImport] Resources:', {
+        debugLog('[handleHtmlImport] Resources:', {
           images: result.resources.images?.length || 0,
           stylesheets: result.resources.stylesheets?.length || 0,
           scripts: result.resources.scripts?.length || 0,

package/src/editor/hooks/useRichPaste.ts

@@ -18,6 +18,7 @@ import {
   PasteProcessResult,
 } from '../utils/paste-processors';
 import { fetchAndApplyFigmaImages } from '../utils/figma-paste';
+import { debugLog } from '../utils/debug';
 
 /**
  * Result of a rich paste operation
@@ -95,7 +96,7 @@ export function useRichPaste() {
 
     // Detect content type (or use forced type)
     const contentType = forceContentType || detectContentType(clipboardData);
-    console.log('[useRichPaste] Detected content type:', contentType, forceContentType ? '(forced)' : '');
+    debugLog('[useRichPaste] Detected content type:', contentType, forceContentType ? '(forced)' : '');
 
     // Skip images (handled by useImageUpload)
     if (contentType === 'image') {
@@ -176,7 +177,7 @@ export function useRichPaste() {
       }
     }
 
-    console.log('[useRichPaste] Successfully pasted', pastedIds.length, 'elements');
+    debugLog('[useRichPaste] Successfully pasted', pastedIds.length, 'elements');
 
     // For Figma content, fetch and apply images asynchronously
     let figmaImagesApplied: number | undefined;
@@ -190,7 +191,7 @@ export function useRichPaste() {
       result.figmaFileKey &&
       (hasImageHashes || hasImageNodeIds)
     ) {
-      console.log('[useRichPaste] Fetching Figma images...',
+      debugLog('[useRichPaste] Fetching Figma images...',
         hasImageHashes ? `${result.figmaImageHashes!.length} hashes` : 'no hashes',
         hasImageNodeIds ? `${result.figmaImageNodeIds!.length} nodeIds` : 'no nodeIds',
       );
@@ -211,7 +212,7 @@ export function useRichPaste() {
       if (imageResult.applied > 0) {
         // Notify change again since images were applied
         notifyIframeChange();
-        console.log(`[useRichPaste] Applied ${imageResult.applied} Figma images`);
+        debugLog(`[useRichPaste] Applied ${imageResult.applied} Figma images`);
       }
     }
 
@@ -228,21 +229,21 @@ export function useRichPaste() {
    * Debug helper: Log clipboard contents
    */
   const debugClipboard = useCallback((clipboardData: DataTransfer): void => {
-    console.log('[useRichPaste] === Clipboard Debug ===');
-    console.log('Available types:', Array.from(clipboardData.types));
+    debugLog('[useRichPaste] === Clipboard Debug ===');
+    debugLog('Available types:', Array.from(clipboardData.types));
 
     clipboardData.types.forEach((type) => {
       const data = clipboardData.getData(type);
-      console.log(`[${type}]:`, data.substring(0, 500) + (data.length > 500 ? '...' : ''));
+      debugLog(`[${type}]:`, data.substring(0, 500) + (data.length > 500 ? '...' : ''));
     });
 
-    console.log('Items:', Array.from(clipboardData.items).map(item => ({
+    debugLog('Items:', Array.from(clipboardData.items).map(item => ({
       kind: item.kind,
       type: item.type,
     })));
 
-    console.log('Detected type:', detectContentType(clipboardData));
-    console.log('[useRichPaste] === End Debug ===');
+    debugLog('Detected type:', detectContentType(clipboardData));
+    debugLog('[useRichPaste] === End Debug ===');
   }, []);
 
   return {

package/src/editor/parts.ts

@@ -15,6 +15,7 @@
  * (移動・削除・並び替え)。スロットの外を直したいときは「部品から切り離す」。
  */
 import type { EditorPartDef } from '../io';
+import { findFlowInsertion } from './utils/drop-target';
 
 export const PART_ATTR = 'data-part';
 export const PART_VERSION_ATTR = 'data-part-v';
@@ -281,34 +282,15 @@ export function detachPart(el: HTMLElement): void {
 
 /**
  * フロー(流し込み)への挿入位置を決める。
- * ドロップ位置の要素から、「セクションの器」の直下にある祖先まで上がり、その後ろに入れる。
+ * ドロップ位置の要素から、「セクションの器」の直下にある祖先まで上がり、その前後に入れる。
  * 器 = `[data-wf-body]` / `main` / `#artboard` / body。何も当たらなければ器の末尾。
+ *
+ * 位置の計算そのものは drop-target.ts に置いてある。ドラッグ中に出す印
+ * (どこに入るかの横棒)と同じ関数を使わないと、印と実際の挿入位置がずれるため。
  */
 export function insertIntoFlow(doc: Document, el: HTMLElement, x: number, y: number): void {
-  const isContainer = (node: Element | null): boolean =>
-    !!node &&
-    (node === doc.body ||
-      node.id === 'artboard' ||
-      node.hasAttribute('data-wf-body') ||
-      node.tagName === 'MAIN');
-  const fallback = (): Element =>
-    doc.querySelector('[data-wf-body]') ?? doc.querySelector('main') ?? doc.getElementById('artboard') ?? doc.body;
-
-  let hit: Element | null = doc.elementFromPoint(x, y);
-  if (!hit || hit === doc.body || hit.id === 'artboard' || hit.closest('.selection-box')) {
-    fallback().appendChild(el);
-    return;
-  }
-  // 器の直下にあたる祖先まで上がる
-  let anchor: Element = hit;
-  while (anchor.parentElement && !isContainer(anchor.parentElement)) {
-    anchor = anchor.parentElement;
-  }
-  if (!anchor.parentElement) {
-    fallback().appendChild(el);
-    return;
-  }
-  anchor.after(el);
+  const { parent, before } = findFlowInsertion(doc, x, y);
+  parent.insertBefore(el, before);
 }
 
 /**

package/src/editor/utils/component-renderer.ts

@@ -14,6 +14,7 @@ import type {
   OverrideImageValue,
 } from '../../types/editor-components';
 import { generateElementId } from './dom-utils';
+import { debugLog } from './debug';
 
 // ============================================================
 // Constants
@@ -56,7 +57,7 @@ export function createDOMElement(
   doc: Document = document
 ): HTMLElement {
   // Debug logging
-  console.log('[createDOMElement] Creating:', {
+  debugLog('[createDOMElement] Creating:', {
     tagName: element.tagName,
     className: element.className,
     hasTextContent: !!element.textContent,
@@ -110,13 +111,13 @@ export function createDOMElement(
     if (element.innerHTML !== undefined) {
       // Use innerHTML for mixed content (text + elements)
       el.innerHTML = element.innerHTML;
-      console.log('[createDOMElement] Using innerHTML for mixed content');
+      debugLog('[createDOMElement] Using innerHTML for mixed content');
     } else if (element.textContent !== undefined) {
       // textContent is explicitly set (possibly via override) - use it
       // This takes precedence over children, which is important for text overrides
       el.textContent = element.textContent;
       if (element.children.length > 0) {
-        console.log('[createDOMElement] textContent override replacing children structure');
+        debugLog('[createDOMElement] textContent override replacing children structure');
       }
     } else {
       // Recursively create and append children
@@ -155,7 +156,7 @@ export function createDOMElement(
     }
   }
 
-  console.log('[createDOMElement] Created element:', el.tagName, 'with innerHTML length:', el.innerHTML.length);
+  debugLog('[createDOMElement] Created element:', el.tagName, 'with innerHTML length:', el.innerHTML.length);
 
   return el;
 }
@@ -417,7 +418,7 @@ export function renderInstance(
   instance: ComponentInstance,
   doc: Document = document
 ): HTMLElement {
-  console.log('[renderInstance] Starting render:', {
+  debugLog('[renderInstance] Starting render:', {
     masterId: master.id,
     masterName: master.name,
     instanceId: instance.id,
@@ -428,7 +429,7 @@ export function renderInstance(
   // Log the master component's root element structure
   const defaultVariant = master.variants.find(v => v.id === instance.variantId);
   if (defaultVariant) {
-    console.log('[renderInstance] Variant rootElement:', {
+    debugLog('[renderInstance] Variant rootElement:', {
       tagName: defaultVariant.rootElement.tagName,
       className: defaultVariant.rootElement.className,
       hasTextContent: !!defaultVariant.rootElement.textContent,
@@ -440,7 +441,7 @@ export function renderInstance(
 
   // Resolve the instance to a ComponentElement
   const resolved = resolveInstance(master, instance);
-  console.log('[renderInstance] Resolved element:', {
+  debugLog('[renderInstance] Resolved element:', {
     tagName: resolved.tagName,
     className: resolved.className,
     hasTextContent: !!resolved.textContent,

package/src/editor/utils/component-sync.ts

@@ -19,6 +19,7 @@ import {
   resolveInstance,
 } from './component-renderer';
 import { detectOverrides } from './override-detection';
+import { debugLog } from './debug';
 
 // ============================================================
 // Types
@@ -360,7 +361,7 @@ export function propagateMasterChanges(
   // Find all DOM elements for this master
   const domElements = findInstancesByMaster(iframeDoc, master.id);
 
-  console.log('[propagateMasterChanges] Found DOM elements for master:', {
+  debugLog('[propagateMasterChanges] Found DOM elements for master:', {
     masterId: master.id,
     domElementsCount: domElements.length,
   });
@@ -369,13 +370,13 @@ export function propagateMasterChanges(
   const domElementMap = new Map<string, HTMLElement>();
   for (const el of domElements) {
     const instanceId = getInstanceIdFromElement(el);
-    console.log('[propagateMasterChanges] DOM element instanceId:', instanceId);
+    debugLog('[propagateMasterChanges] DOM element instanceId:', instanceId);
     if (instanceId) {
       domElementMap.set(instanceId, el);
     }
   }
 
-  console.log('[propagateMasterChanges] Processing instances:', {
+  debugLog('[propagateMasterChanges] Processing instances:', {
     totalInstances: instances.length,
     instanceIds: instances.map(i => i.id),
     domMapKeys: Array.from(domElementMap.keys()),
@@ -385,13 +386,13 @@ export function propagateMasterChanges(
   for (const instance of instances) {
     // Skip detached instances
     if (instance.isDetached) {
-      console.log('[propagateMasterChanges] Skipping detached instance:', instance.id);
+      debugLog('[propagateMasterChanges] Skipping detached instance:', instance.id);
       continue;
     }
 
     // Skip instances for other masters
     if (instance.masterComponentId !== master.id) {
-      console.log('[propagateMasterChanges] Skipping instance for other master:', instance.id);
+      debugLog('[propagateMasterChanges] Skipping instance for other master:', instance.id);
       continue;
     }
 
@@ -400,11 +401,11 @@ export function propagateMasterChanges(
       const domEl = domElementMap.get(instance.id);
       if (!domEl) {
         // Instance not in DOM, skip
-        console.log('[propagateMasterChanges] DOM element not found for instance:', instance.id);
+        debugLog('[propagateMasterChanges] DOM element not found for instance:', instance.id);
         continue;
       }
 
-      console.log('[propagateMasterChanges] Found DOM element for instance:', instance.id);
+      debugLog('[propagateMasterChanges] Found DOM element for instance:', instance.id);
 
       // Validate variant still exists
       let variantId = instance.variantId;
@@ -423,15 +424,15 @@ export function propagateMasterChanges(
       let detectedOverrides: ComponentOverride[] = [];
       if (effectiveVariant) {
         // Debug: Log what we're comparing
-        console.log('[propagateMasterChanges] === Override Detection Debug ===');
-        console.log('[propagateMasterChanges] DOM element:', {
+        debugLog('[propagateMasterChanges] === Override Detection Debug ===');
+        debugLog('[propagateMasterChanges] DOM element:', {
           tagName: domEl.tagName,
           elementId: domEl.getAttribute('data-element-id'),
           textContent: domEl.textContent?.substring(0, 100),
           innerHTML: domEl.innerHTML?.substring(0, 200),
           childrenCount: domEl.children.length,
         });
-        console.log('[propagateMasterChanges] Master rootElement:', {
+        debugLog('[propagateMasterChanges] Master rootElement:', {
           tagName: effectiveVariant.rootElement.tagName,
           id: effectiveVariant.rootElement.id,
           textContent: effectiveVariant.rootElement.textContent?.substring(0, 100),
@@ -442,7 +443,7 @@ export function propagateMasterChanges(
 
         try {
           detectedOverrides = detectOverrides(domEl, effectiveVariant.rootElement);
-          console.log('[propagateMasterChanges] Detected DOM overrides:', {
+          debugLog('[propagateMasterChanges] Detected DOM overrides:', {
             instanceId: instance.id,
             count: detectedOverrides.length,
             overrides: detectedOverrides.map(o => ({
@@ -477,7 +478,7 @@ export function propagateMasterChanges(
       }
       const mergedOverrides = Array.from(overrideMap.values());
 
-      console.log('[propagateMasterChanges] Merged overrides:', {
+      debugLog('[propagateMasterChanges] Merged overrides:', {
         instanceId: instance.id,
         existing: existingOverrides.length,
         detected: detectedOverrides.length,
@@ -536,7 +537,7 @@ export function propagateMasterChanges(
           });
         };
         applyIdMappings(newEl);
-        console.log('[propagateMasterChanges] Applied ID mappings for duplicated instance:', {
+        debugLog('[propagateMasterChanges] Applied ID mappings for duplicated instance:', {
           instanceId: instance.id,
           mappingsCount: idMappings.size,
         });
@@ -563,7 +564,7 @@ export function propagateMasterChanges(
           newEl.style.setProperty(prop, value);
         }
 
-        console.log('[propagateMasterChanges] Preserved position styles:', {
+        debugLog('[propagateMasterChanges] Preserved position styles:', {
           instanceId: instance.id,
           preservedStyles: styleObj,
         });
@@ -585,7 +586,7 @@ export function propagateMasterChanges(
     }
   }
 
-  console.log(
+  debugLog(
     `[propagateMasterChanges] Updated ${result.updatedCount} instances, failed ${result.failedCount}`
   );