@growgroup/visual-editor 0.3.0 → 0.4.0

package/src/editor/hooks/useElementActions.ts

@@ -30,6 +30,7 @@ import {
 } from '../utils/viewport-utils';
 import type { SerializedElement, BoundingBox, StyleClipboard, ClipboardData } from '../types';
 import type { globalLastUsedStylesRef } from '../contexts/EditorRefsContext';
+import { debugLog } from '../utils/debug';
 
 /**
  * 要素の種類を判定（shape / text / line）
@@ -202,7 +203,7 @@ function captureLastUsedStyles(
   lastUsedStylesRef: typeof globalLastUsedStylesRef
 ) {
   const category = getElementCategory(el);
-  console.log('[captureLastUsedStyles] Category:', category, 'Styles:', styles);
+  debugLog('[captureLastUsedStyles] Category:', category, 'Styles:', styles);
 
   if (category === 'shape') {
     const shapeStyles: Partial<typeof lastUsedStylesRef.current.shape> = {};
@@ -214,7 +215,7 @@ function captureLastUsedStyles(
     if (styles.opacity) shapeStyles.opacity = styles.opacity;
     if (Object.keys(shapeStyles).length > 0) {
       lastUsedStylesRef.updateShape(shapeStyles);
-      console.log('[captureLastUsedStyles] Updated shape styles:', shapeStyles);
+      debugLog('[captureLastUsedStyles] Updated shape styles:', shapeStyles);
     }
   } else if (category === 'text') {
     const textStyles: Partial<typeof lastUsedStylesRef.current.text> = {};
@@ -227,7 +228,7 @@ function captureLastUsedStyles(
     if (styles.textAlign) textStyles.textAlign = styles.textAlign;
     if (Object.keys(textStyles).length > 0) {
       lastUsedStylesRef.updateText(textStyles);
-      console.log('[captureLastUsedStyles] Updated text styles:', textStyles);
+      debugLog('[captureLastUsedStyles] Updated text styles:', textStyles);
     }
   } else if (category === 'line') {
     const lineStyles: Partial<typeof lastUsedStylesRef.current.line> = {};
@@ -235,7 +236,7 @@ function captureLastUsedStyles(
     if (styles.strokeWidth) lineStyles.strokeWidth = styles.strokeWidth;
     if (Object.keys(lineStyles).length > 0) {
       lastUsedStylesRef.updateLine(lineStyles);
-      console.log('[captureLastUsedStyles] Updated line styles:', lineStyles);
+      debugLog('[captureLastUsedStyles] Updated line styles:', lineStyles);
     }
   }
 }
@@ -533,11 +534,11 @@ export function useElementActions() {
 
     // 複数選択されている場合は全て更新
     if (selectedElementIds.length > 0) {
-      console.log('[DEBUG useElementActions] Applying styles to', selectedElementIds.length, 'elements');
+      debugLog('[DEBUG useElementActions] Applying styles to', selectedElementIds.length, 'elements');
       selectedElementIds.forEach(id => {
         const el = getIframeElement(iframeDoc, id);
         if (el) {
-          console.log('[DEBUG useElementActions] Applying to element:', id);
+          debugLog('[DEBUG useElementActions] Applying to element:', id);
           applyStylesWithViewportHandling(el, styles);
         }
       });
@@ -699,7 +700,7 @@ export function useElementActions() {
             if (newInstance) {
               // 新しいインスタンスIDで属性を更新
               clone.setAttribute('data-component-instance', newInstance.id);
-              console.log('[duplicateElement] Created new component instance:', newInstance.id, 'from:', instanceId);
+              debugLog('[duplicateElement] Created new component instance:', newInstance.id, 'from:', instanceId);
             }
           } catch (error) {
             // インスタンス作成に失敗した場合、コンポーネント属性を削除（通常要素として複製）
@@ -1159,7 +1160,7 @@ export function useElementActions() {
     const convertChildrenToAbsolute = async () => {
       // オートレイアウトモードの場合は変換をスキップ
       if (layoutMode === 'auto') {
-        console.log('[groupElements] Auto layout mode - skipping absolute positioning conversion');
+        debugLog('[groupElements] Auto layout mode - skipping absolute positioning conversion');
         return;
       }
 
@@ -1175,7 +1176,7 @@ export function useElementActions() {
           convertSingleElementToAbsolute(iframeDoc, el);
         });
 
-        console.log('[groupElements] Converted', elements.length, 'child elements to absolute positioning');
+        debugLog('[groupElements] Converted', elements.length, 'child elements to absolute positioning');
         notifyIframeChange();
       } catch (err) {
         console.error('[groupElements] Error converting children:', err);
@@ -1206,7 +1207,7 @@ export function useElementActions() {
 
     // グループ解除可能かどうかを判定（詳細な条件をチェック）
     if (!canUngroup(parent)) {
-      console.log('[ungroupElements] Element cannot be ungrouped:', parent.tagName);
+      debugLog('[ungroupElements] Element cannot be ungrouped:', parent.tagName);
       return;
     }
 
@@ -1226,7 +1227,7 @@ export function useElementActions() {
     });
 
     if (children.length === 0) {
-      console.log('[ungroupElements] No editable children to ungroup');
+      debugLog('[ungroupElements] No editable children to ungroup');
       return;
     }
 
@@ -1307,7 +1308,7 @@ export function useElementActions() {
     const finalizePositioning = async () => {
       // オートレイアウトモードの場合は変換をスキップ
       if (layoutMode === 'auto') {
-        console.log('[ungroupElements] Auto layout mode - skipping absolute positioning conversion');
+        debugLog('[ungroupElements] Auto layout mode - skipping absolute positioning conversion');
         return;
       }
 
@@ -1322,7 +1323,7 @@ export function useElementActions() {
           convertSingleElementToAbsolute(iframeDoc, el);
         });
 
-        console.log('[ungroupElements] Converted', childElements.length, 'elements to absolute positioning');
+        debugLog('[ungroupElements] Converted', childElements.length, 'elements to absolute positioning');
         notifyIframeChange();
       } catch (err) {
         console.error('[ungroupElements] Error finalizing positions:', err);
@@ -1335,7 +1336,7 @@ export function useElementActions() {
     setSelectedElement(null);
     notifyIframeChange();
 
-    console.log('[ungroupElements] Ungrouped', childIds.length, 'elements from', selectedElement.id);
+    debugLog('[ungroupElements] Ungrouped', childIds.length, 'elements from', selectedElement.id);
   }, [selectedElement, getIframeDoc, setSelectedElementIds, setSelectedElement, notifyIframeChange]);
 
   /**
@@ -1525,10 +1526,10 @@ export function useElementActions() {
    * Ctrl/Cmd + Alt + C
    */
   const copyStyle = useCallback(() => {
-    console.log('[copyStyle] Called, selectedElement:', selectedElement?.id);
+    debugLog('[copyStyle] Called, selectedElement:', selectedElement?.id);
     const iframeDoc = getIframeDoc();
     if (!iframeDoc || !selectedElement) {
-      console.log('[copyStyle] No element selected or no iframeDoc');
+      debugLog('[copyStyle] No element selected or no iframeDoc');
       return false;
     }
 
@@ -1600,8 +1601,8 @@ export function useElementActions() {
     ) as StyleClipboard;
 
     styleClipboardRef.current = cleanedStyle;
-    console.log('[copyStyle] Style copied:', cleanedStyle);
-    console.log('[copyStyle] Clipboard after setting:', styleClipboardRef.current);
+    debugLog('[copyStyle] Style copied:', cleanedStyle);
+    debugLog('[copyStyle] Clipboard after setting:', styleClipboardRef.current);
     return true;
   }, [selectedElement, getIframeDoc, styleClipboardRef]);
 
@@ -1610,17 +1611,17 @@ export function useElementActions() {
    * Ctrl/Cmd + Alt + V
    */
   const pasteStyle = useCallback(() => {
-    console.log('[pasteStyle] Called');
-    console.log('[pasteStyle] styleClipboardRef.current:', styleClipboardRef.current);
+    debugLog('[pasteStyle] Called');
+    debugLog('[pasteStyle] styleClipboardRef.current:', styleClipboardRef.current);
     const iframeDoc = getIframeDoc();
     if (!iframeDoc) {
-      console.log('[pasteStyle] No iframeDoc');
+      debugLog('[pasteStyle] No iframeDoc');
       return false;
     }
 
     const copiedStyle = styleClipboardRef.current;
     if (!copiedStyle || Object.keys(copiedStyle).length === 0) {
-      console.log('[pasteStyle] No style in clipboard');
+      debugLog('[pasteStyle] No style in clipboard');
       return false;
     }
 
@@ -1630,7 +1631,7 @@ export function useElementActions() {
       : selectedElement ? [selectedElement.id] : [];
 
     if (targetIds.length === 0) {
-      console.log('[pasteStyle] No element selected');
+      debugLog('[pasteStyle] No element selected');
       return false;
     }
 
@@ -1707,7 +1708,7 @@ export function useElementActions() {
       }
     }
 
-    console.log('[pasteStyle] Style pasted to', targetIds.length, 'element(s)');
+    debugLog('[pasteStyle] Style pasted to', targetIds.length, 'element(s)');
     return true;
   }, [selectedElement, selectedElementIds, getIframeDoc, styleClipboardRef, notifyIframeChange, setSelectedElement]);
 
@@ -1754,13 +1755,13 @@ export function useElementActions() {
       return { success: false, error: 'Selected elements not found in document' };
     }
 
-    console.log('[copyToFigma] Copying', elements.length, 'element(s) to Figma format');
+    debugLog('[copyToFigma] Copying', elements.length, 'element(s) to Figma format');
 
     try {
       const result = await copyElementsToFigma(elements);
 
       if (result.success) {
-        console.log('[copyToFigma] Successfully copied', result.nodeCount, 'nodes to clipboard');
+        debugLog('[copyToFigma] Successfully copied', result.nodeCount, 'nodes to clipboard');
         return { success: true, nodeCount: result.nodeCount };
       } else {
         console.error('[copyToFigma] Failed:', result.error);

package/src/editor/hooks/useElementSelection.ts

@@ -24,6 +24,7 @@ import {
 import { extractElementInfo } from "../utils/style-utils";
 import { MARQUEE_DRAG_THRESHOLD } from "../constants";
 import type { DragState, ResizeState, MarqueeState } from "../types";
+import { debugLog } from '../utils/debug';
 
 /**
  * mousedown で保留し、mouseup で意味を確定するクリック情報
@@ -453,7 +454,7 @@ export function useElementSelection(
 
       // 真のインライン要素（テキストフロー内）はドラッグしない
       if (isTrueInlineInTextFlow(element, iframeDoc)) {
-        console.log(
+        debugLog(
           "[startElementDrag] Skipping true inline element:",
           element.tagName,
           element.getAttribute("data-element-id"),
@@ -918,14 +919,15 @@ export function useElementSelection(
           if (editingElement.classList.contains("selected")) {
             updateSelectionBox(iframeDoc, editingElement);
           }
-          console.log("[Canvas] Text editing exited via click elsewhere");
+          debugLog("[Canvas] Text editing exited via click elsewhere");
         }
 
         // 描画モード・テキストモードでは選択しない
         const bodyClasses = iframeDoc.body.classList;
         if (
           bodyClasses.contains("draw-mode") ||
-          bodyClasses.contains("text-mode")
+          bodyClasses.contains("text-mode") ||
+          bodyClasses.contains("comment-mode")
         )
           return;
 
@@ -1030,7 +1032,7 @@ export function useElementSelection(
                 centerY,
               };
               iframeDoc.body.classList.add("rotating");
-              console.log("[Canvas] Rotation started:", handleType);
+              debugLog("[Canvas] Rotation started:", handleType);
             } else if (handleType === "radius") {
               // 角丸ハンドル
               const borderRadius =
@@ -1057,7 +1059,7 @@ export function useElementSelection(
                 centerX: 0,
                 centerY: 0,
               };
-              console.log("[Canvas] Border radius resize started");
+              debugLog("[Canvas] Border radius resize started");
             } else {
               // 通常のリサイズハンドル
               resizeStateRef.current = {
@@ -1082,7 +1084,7 @@ export function useElementSelection(
                 centerX: 0,
                 centerY: 0,
               };
-              console.log("[Canvas] Resize started:", handleType);
+              debugLog("[Canvas] Resize started:", handleType);
             }
           }
           return;
@@ -1129,7 +1131,7 @@ export function useElementSelection(
                     e,
                     iframeDoc,
                   );
-                  console.log(
+                  debugLog(
                     "[Canvas] Multi-element drag via selection-box:",
                     existingIds,
                     started ? "started" : "blocked",
@@ -1138,7 +1140,7 @@ export function useElementSelection(
               } else {
                 // 単一選択時：対象要素をドラッグ
                 startElementDrag(targetEl, e, iframeDoc);
-                console.log(
+                debugLog(
                   "[Canvas] Drag via selection-box for:",
                   forElementId,
                 );
@@ -1212,7 +1214,7 @@ export function useElementSelection(
           if (marqueeGeomRef) marqueeGeomRef.current = { ...geom };
           setMarqueeStateRef.current(geom);
           marqueeStartPendingRef.current = true;
-          console.log(
+          debugLog(
             "[Canvas] Marquee pending (blank) at",
             e.clientX,
             e.clientY,
@@ -1251,7 +1253,7 @@ export function useElementSelection(
         }
 
         if (target.getAttribute("contenteditable") === "true") {
-          console.log("[Canvas] Skip - contenteditable active");
+          debugLog("[Canvas] Skip - contenteditable active");
           return;
         }
 
@@ -1287,7 +1289,7 @@ export function useElementSelection(
               .filter((el) => el !== null);
             if (selectedElements.length > 0) {
               const started = startGroupDrag(selectedElements, e, iframeDoc);
-              console.log(
+              debugLog(
                 "[Canvas] Group drag:",
                 existingIds.length,
                 started ? "started" : "blocked",
@@ -1295,21 +1297,21 @@ export function useElementSelection(
             }
           } else {
             startElementDrag(target, e, iframeDoc);
-            console.log("[Canvas] Single drag start:", elementId);
+            debugLog("[Canvas] Single drag start:", elementId);
           }
           return;
         }
 
         if (e.shiftKey) {
           // 未選択 + Shift → 追加するかは mouseup で確定（ここでは動かさない）
-          console.log("[Canvas] Shift add pending:", elementId);
+          debugLog("[Canvas] Shift add pending:", elementId);
           return;
         }
 
         // 未選択 + 素クリック → その場で単独選択してドラッグ開始（モード非依存）
         selectSingle(iframeDoc, target);
         startElementDrag(target, e, iframeDoc);
-        console.log("[Canvas] Select + drag start:", elementId);
+        debugLog("[Canvas] Select + drag start:", elementId);
       };
 
       /**
@@ -1421,7 +1423,8 @@ export function useElementSelection(
         if (bodyClasses.contains("gg-cropping")) return;
         if (
           bodyClasses.contains("draw-mode") ||
-          bodyClasses.contains("text-mode")
+          bodyClasses.contains("text-mode") ||
+          bodyClasses.contains("comment-mode")
         )
           return;
 
@@ -1452,7 +1455,7 @@ export function useElementSelection(
           deepElement.classList.add("selected");
           setSelectedElementIdsRef.current([elementId]);
           enableTextEditing(deepElement);
-          console.log(
+          debugLog(
             "[Canvas] Text editing started via double-click:",
             elementId,
           );

package/src/editor/hooks/useFocusManagement.ts

@@ -7,6 +7,7 @@
 
 import { useCallback, useRef, useEffect } from 'react';
 import { useEditorContext } from '../EditorContext';
+import { debugLog } from '../utils/debug';
 
 interface UseFocusManagementReturn {
   /**
@@ -49,7 +50,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
     const iframe = iframeRef.current;
     const iframeDoc = getIframeDoc();
     if (!iframeDoc) {
-      console.log('[FocusManagement] Cannot restore focus: iframe doc not available');
+      debugLog('[FocusManagement] Cannot restore focus: iframe doc not available');
       return;
     }
 
@@ -59,7 +60,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
       // まずiframe要素自体にフォーカス（親ドキュメントの観点から）
       if (iframe) iframe.focus();
       editingElement.focus();
-      console.log('[FocusManagement] Restored focus to editing element');
+      debugLog('[FocusManagement] Restored focus to editing element');
       return;
     }
 
@@ -70,7 +71,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
     }
     if (iframeDoc.body) {
       iframeDoc.body.focus();
-      console.log('[FocusManagement] Restored focus to iframe and body');
+      debugLog('[FocusManagement] Restored focus to iframe and body');
     }
   }, [iframeRef, getIframeDoc]);
 
@@ -139,7 +140,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
           relatedTarget.closest('[data-dropdown-menu]');
 
         if (isDialogOrPopover) {
-          console.log('[FocusManagement] Focus moved to dialog/popover, allowing');
+          debugLog('[FocusManagement] Focus moved to dialog/popover, allowing');
           return;
         }
 
@@ -151,7 +152,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
           relatedTarget.getAttribute('contenteditable') === 'true';
 
         if (isInputField) {
-          console.log('[FocusManagement] Focus moved to input field, allowing');
+          debugLog('[FocusManagement] Focus moved to input field, allowing');
           return;
         }
 
@@ -170,7 +171,7 @@ export function useFocusManagement(): UseFocusManagementReturn {
       focusRecoveryTimerRef.current = setTimeout(() => {
         // まだフォーカスがエディタ外にあれば復元
         if (!isEditorFocused()) {
-          console.log('[FocusManagement] Focus lost, attempting recovery');
+          debugLog('[FocusManagement] Focus lost, attempting recovery');
           restoreFocus();
         }
       }, 30); // 30msに短縮してフォーカス復元を高速化

package/src/editor/hooks/useGoogleFonts.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
+import { debugLog } from '../utils/debug';
 
 /**
  * Google Fontの情報
@@ -183,7 +184,7 @@ export function useGoogleFonts() {
 
       // APIエラーまたは空の場合はフォールバック
       if (data.error || !data.items || data.items.length === 0) {
-        console.log('[useGoogleFonts] API returned empty, using popular fonts');
+        debugLog('[useGoogleFonts] API returned empty, using popular fonts');
         setFonts([...SYSTEM_FONTS, ...POPULAR_GOOGLE_FONTS]);
         return;
       }
@@ -254,7 +255,7 @@ export function useGoogleFonts() {
     // ロード済みセットに追加
     setLoadedFonts(prev => new Set(prev).add(fontKey));
 
-    console.log(`[useGoogleFonts] Loaded font: ${fontFamily}`);
+    debugLog(`[useGoogleFonts] Loaded font: ${fontFamily}`);
   }, [loadedFonts]);
 
   /**

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)' : '',