@growgroup/visual-editor 0.3.1 → 0.4.0

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

package/src/editor/utils/debug.ts

@@ -0,0 +1,52 @@
+/**
+ * 開発時だけ出すログ。
+ *
+ * 【なぜ必要か】
+ * 構成ラフ 26 ページをキャンバス表示で開くと、部品 89 個の読み込みだけで
+ * console.log が 1,000 件以上出ていた(実測 2,327 件)。console.log は
+ * 引数のオブジェクトを DevTools が握り続けるため GC されず、DevTools を
+ * 開いていると読み込みが目に見えて遅くなる。利用者に意味のない内部ログは
+ * 既定で黙らせ、調べたいときだけ出す。
+ *
+ * 【出し方】
+ *   localStorage.setItem('gg-editor:debug', '1')   // 出る
+ *   localStorage.removeItem('gg-editor:debug')     // 止まる
+ * 値は毎回読む。DevTools でフラグを立てた直後から効かせるため
+ * (キャッシュすると読み込み直後の 1 回しか反映されない)。
+ */
+
+const DEBUG_KEY = 'gg-editor:debug';
+
+/**
+ * デバッグログを出す設定か。
+ * localStorage は srcdoc / sandbox の文脈や「サイトデータをブロック」設定で
+ * 参照そのものが例外を投げるので、必ず握りつぶして false に倒す。
+ */
+export function isDebugEnabled(): boolean {
+  try {
+    return typeof localStorage !== 'undefined' && localStorage.getItem(DEBUG_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+/** 内部の様子を見るためのログ。既定では出ない */
+export function debugLog(...args: unknown[]): void {
+  if (isDebugEnabled()) console.log(...args);
+}
+
+/**
+ * 開発者向けの警告。既定では出ない。
+ * 利用者が対処できる警告(保存に失敗した等)は console.warn のまま残すこと。
+ */
+export function debugWarn(...args: unknown[]): void {
+  if (isDebugEnabled()) console.warn(...args);
+}
+
+/**
+ * 開発時だけ握りつぶしたい失敗の記録。既定では出ない。
+ * 利用者に伝える必要のある失敗は console.error のまま残すこと。
+ */
+export function debugError(...args: unknown[]): void {
+  if (isDebugEnabled()) console.error(...args);
+}

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

@@ -7,6 +7,7 @@
 
 import type { ElementCapture, DOMTreeNode, MarqueeState } from '../types';
 import { removeConflictingClasses } from './tailwind-utils';
+import { debugLog } from './debug';
 
 // ========================================
 // buildDomTree キャッシュ（Phase 2 最適化）
@@ -481,7 +482,7 @@ export function convertSingleElementToAbsolute(iframeDoc: Document, element: HTM
 
   // インライン要素はスキップ
   if (isInlineElement(element, computedStyle)) {
-    console.log('[convertSingleElementToAbsolute] Skipping inline element:', element.tagName);
+    debugLog('[convertSingleElementToAbsolute] Skipping inline element:', element.tagName);
     return false;
   }
 
@@ -566,7 +567,7 @@ export function convertSingleElementToAbsolute(iframeDoc: Document, element: HTM
     element.style.transform = preservedTransform;
   }
 
-  console.log('[convertSingleElementToAbsolute] Converted:', {
+  debugLog('[convertSingleElementToAbsolute] Converted:', {
     tagName: element.tagName,
     left: Math.round(left * 100) / 100,
     top: Math.round(top * 100) / 100,
@@ -601,7 +602,7 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
 
   // ズームスケールを取得
   const scale = getArtboardScale(iframeDoc);
-  console.log('[convertToAbsolutePositioning] Scale:', scale);
+  debugLog('[convertToAbsolutePositioning] Scale:', scale);
 
   // artboardの現在の高さをキャプチャして固定（絶対配置後も高さを維持するため）
   const artboard = iframeDoc.getElementById('artboard');
@@ -613,7 +614,7 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
       artboard.setAttribute('data-original-height', artboard.style.height || 'auto');
     }
     artboard.style.height = `${Math.round(artboardHeight)}px`;
-    console.log('[convertToAbsolutePositioning] Set artboard height:', artboardHeight);
+    debugLog('[convertToAbsolutePositioning] Set artboard height:', artboardHeight);
   }
 
   // 1. まず全要素の現在の位置・サイズをキャプチャ（インライン要素は除外）
@@ -864,7 +865,7 @@ export function convertToAbsolutePositioning(iframeDoc: Document): number {
   }
 
   captures.forEach(({ element }) => element.removeAttribute('data-gg-pre-overflow'));
-  console.log('[convertToAbsolutePositioning] Converted', captures.length, 'elements');
+  debugLog('[convertToAbsolutePositioning] Converted', captures.length, 'elements');
   return captures.length;
 }
 
@@ -885,11 +886,11 @@ export function restoreArtboardAutoHeight(iframeDoc: Document): void {
       artboard.style.height = originalHeight;
     }
     artboard.removeAttribute('data-original-height');
-    console.log('[restoreArtboardAutoHeight] Restored artboard height to:', originalHeight);
+    debugLog('[restoreArtboardAutoHeight] Restored artboard height to:', originalHeight);
   } else {
     // data-original-heightがない場合は単純に高さを削除
     artboard.style.removeProperty('height');
-    console.log('[restoreArtboardAutoHeight] Removed artboard height style');
+    debugLog('[restoreArtboardAutoHeight] Removed artboard height style');
   }
 }
 
@@ -980,20 +981,20 @@ export function buildDomTree(
 
     // HTMLが変わっていなければキャッシュを返す
     if (cached && cached.html === currentHtml) {
-      console.log('[buildDomTree] Cache hit, returning cached tree with', cached.tree.length, 'root nodes');
+      debugLog('[buildDomTree] Cache hit, returning cached tree with', cached.tree.length, 'root nodes');
       return cached.tree;
     }
 
     // 新規計算
     const tree = buildDomTreeInternal(iframeDoc, root);
     domTreeCache.set(iframeDoc, { html: currentHtml, tree });
-    console.log('[buildDomTree] Cache miss, built tree with', tree.length, 'root nodes from', root.id || root.tagName);
+    debugLog('[buildDomTree] Cache miss, built tree with', tree.length, 'root nodes from', root.id || root.tagName);
     return tree;
   }
 
   // キャッシュを使用しない場合
   const nodes = buildDomTreeInternal(iframeDoc, root);
-  console.log('[buildDomTree] Built tree (no cache) with', nodes.length, 'root nodes from', root.id || root.tagName);
+  debugLog('[buildDomTree] Built tree (no cache) with', nodes.length, 'root nodes from', root.id || root.tagName);
   return nodes;
 }