@growgroup/visual-editor 0.3.0 → 0.4.0

package/src/editor/components/EditorCanvas.tsx

@@ -29,8 +29,12 @@ import { generateEditableHtml } from "../utils/html-utils";
 import { setupInlineFormatToolbar } from "../utils/inline-format";
 import { recalculateViewportUnits } from "../utils/viewport-utils";
 import { useMultiPageCanvasOptional } from "../contexts/MultiPageCanvasContext";
+import { applyDocumentAttributes } from "./multi-page/PageFramePreview";
 import { setupEmbeddedCanvasBridge } from "../utils/embedded-canvas-bridge";
 import { endContentSwitch } from "../autosave";
+import { showPartDropIndicator, clearPartDropIndicator, findFlowInsertion } from "../utils/drop-target";
+import { debugLog } from '../utils/debug';
+import { useEditorComponents } from "../contexts/EditorComponentsContext";
 import type {
   DOMTreeNode,
   DragState,
@@ -124,6 +128,7 @@ export function EditorCanvas() {
     setShowLayoutHint,
     viewportWidth,
     setIframeReady,
+    documentAttributes,
     currentContentId,
   } = useEditorContext();
   // 高さの報告先は「本文が載っているページ」(利用側の currentContentId)。
@@ -133,6 +138,17 @@ export function EditorCanvas() {
 
   // マルチページモード判定
   const multiPageCanvas = useMultiPageCanvasOptional();
+  // 文書(<html>)に付ける属性(利用側の documentAttributes)。読み込み時と、変わったときに付け替える
+  const documentAttributesRef = useRef(documentAttributes);
+  documentAttributesRef.current = documentAttributes;
+  useEffect(() => {
+    try {
+      applyDocumentAttributes(iframeRef.current?.contentDocument, documentAttributes);
+    } catch {
+      /* まだ読めなければ読み込み時に付く */
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [documentAttributes]);
   const isInMultiPageMode = !!multiPageCanvas?.isEnabled;
   // ロードハンドラ(deps=[])から最新の値を読むための ref
   const multiPageCanvasRef = useRef(multiPageCanvas);
@@ -176,6 +192,9 @@ export function EditorCanvas() {
   const setHtmlRef = useRef(setHtml);
   const clearHistoryRef = useRef(clearHistory);
   const editorModeRef = useRef(editorMode);
+  // 部品モードか(io に loadParts があるか)。挿入位置の印を出してよいかの判定に使う
+  const { partsMode } = useEditorComponents();
+  const partsModeRef = useRef(partsMode);
 
   // Webページモード用のコンテンツ高さ追跡
   const [contentHeight, setContentHeight] = useState(WEBPAGE_MIN_HEIGHT);
@@ -195,6 +214,7 @@ export function EditorCanvas() {
     setHtmlRef.current = setHtml;
     clearHistoryRef.current = clearHistory;
     editorModeRef.current = editorMode;
+    partsModeRef.current = partsMode;
     contentHeightRef.current = contentHeight;
   }, [
     activeTool,
@@ -205,6 +225,7 @@ export function EditorCanvas() {
     setHtml,
     clearHistory,
     editorMode,
+    partsMode,
     contentHeight,
   ]);
 
@@ -454,12 +475,13 @@ export function EditorCanvas() {
     const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
     if (!iframeDoc) return;
 
-    console.log("[Canvas] iframe loaded, initializing...");
+    debugLog("[Canvas] iframe loaded, initializing...");
 
     // 最初のペイントより先に現在の倍率を当ててから見せる。
     // initLayout はフォント待ち等で数百msかかるため、その後に適用すると
     // 「等倍の巨大な一瞬 → 縮む」のフラッシュがノイズになる
     applyCanvasZoomDom(iframeDoc, zoomRef.current);
+    applyDocumentAttributes(iframeDoc, documentAttributesRef.current);
     const wrapperEl = iframeDoc.getElementById("artboard-wrapper");
     if (wrapperEl) wrapperEl.style.visibility = "visible";
 
@@ -467,7 +489,7 @@ export function EditorCanvas() {
     // これにより、iframeがリロードされたり状態が変わるたびに
     // 古いリスナーを削除せずに新しいリスナーが追加される問題を防ぐ
     if (cleanupFunctionsRef.current.length > 0) {
-      console.log("[Canvas] Cleaning up", cleanupFunctionsRef.current.length, "previous listeners");
+      debugLog("[Canvas] Cleaning up", cleanupFunctionsRef.current.length, "previous listeners");
       cleanupFunctionsRef.current.forEach(cleanup => {
         try {
           cleanup();
@@ -620,7 +642,7 @@ export function EditorCanvas() {
           if (iframe) iframe.focus();
           if (iframeDoc.body) {
             iframeDoc.body.focus();
-            console.log('[Canvas] Focus restored after background click');
+            debugLog('[Canvas] Focus restored after background click');
           }
         });
       }
@@ -653,10 +675,28 @@ export function EditorCanvas() {
     // 7. ドラッグ&ドロップ（画像アップロード用）
     let dragCounter = 0;
 
+    // 部品のドラッグか(ファイルのドラッグと見分ける)。
+    // dragover 中は getData が使えないので types だけで判定する
+    const isPartDrag = (e: DragEvent) =>
+      !!e.dataTransfer?.types.includes("application/x-editor-component");
+
+    // 挿入位置の横棒を出してよい場面か。
+    // FrontendVisualEditor の drop 処理が insertIntoFlow(フローに差し込む)を使うのは
+    // 「部品モード かつ Web ページモード」のときだけで、それ以外(スライド、および
+    // Firestore のコンポーネント)は落とした座標に絶対配置する。条件を揃えないと
+    // 「横棒の位置と実際に入る位置が違う」という一番たちの悪いズレ方をする
+    const canShowFlowIndicator = () =>
+      partsModeRef.current && editorModeRef.current === "webpage";
+
+    // 前回の挿入先。同じなら描き直さない(dragover は毎秒数十回来るので、
+    // 毎回 DOM を差し替えると強制レイアウトが走り、印もちらつく)
+    let lastTarget: { parent: Element; before: Element | null } | null = null;
+
     const handleDragEnter = (e: DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
       dragCounter++;
+      // 画像のオーバーレイはファイルのときだけ。部品は挿入位置の横棒で示す
       if (e.dataTransfer?.types.includes("Files")) {
         window.parent.postMessage({ type: "IFRAME_DRAG_ENTER" }, "*");
       }
@@ -667,6 +707,17 @@ export function EditorCanvas() {
       e.stopPropagation();
       if (e.dataTransfer?.types.includes("Files")) {
         e.dataTransfer.dropEffect = "copy";
+        return;
+      }
+      if (isPartDrag(e)) {
+        e.dataTransfer!.dropEffect = "copy";
+        if (!canShowFlowIndicator()) return;
+        // 落とす先を紙面の中に描く。実際の挿入と同じ関数で位置を出しているので、
+        // 印の場所とずれない(drop-target.ts)
+        const next = findFlowInsertion(iframeDoc, e.clientX, e.clientY);
+        if (lastTarget && lastTarget.parent === next.parent && lastTarget.before === next.before) return;
+        lastTarget = next;
+        showPartDropIndicator(iframeDoc, e.clientX, e.clientY);
       }
     };
 
@@ -675,19 +726,33 @@ export function EditorCanvas() {
       e.stopPropagation();
       dragCounter--;
       if (dragCounter === 0) {
+        lastTarget = null;
+        clearPartDropIndicator(iframeDoc);
         window.parent.postMessage({ type: "IFRAME_DRAG_LEAVE" }, "*");
       }
     };
 
+    // ドラッグが途中で捨てられた(Esc・パネルの上で離した)ときも印を残さない。
+    // dragend が起きるのはドラッグ「元」= 親ドキュメントのパネル項目なので、
+    // iframe ではなく親の document で受ける
+    const handleDragEnd = () => {
+      dragCounter = 0;
+      lastTarget = null;
+      clearPartDropIndicator(iframeDoc);
+    };
+
     const handleDrop = (e: DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
       dragCounter = 0;
+      lastTarget = null;
+      // 印は挿入より先に消す。残っていると履歴と保存HTMLに混ざる
+      clearPartDropIndicator(iframeDoc);
 
       // コンポーネントのドロップをチェックして親ウィンドウに転送
       const componentData = e.dataTransfer?.getData('application/x-editor-component');
       if (componentData) {
-        console.log('[EditorCanvas] Component drop detected, forwarding to parent:', componentData);
+        debugLog('[EditorCanvas] Component drop detected, forwarding to parent:', componentData);
         window.parent.postMessage(
           {
             type: "IFRAME_COMPONENT_DROP",
@@ -742,12 +807,15 @@ export function EditorCanvas() {
     iframeDoc.addEventListener("dragenter", handleDragEnter);
     iframeDoc.addEventListener("dragover", handleDragOver);
     iframeDoc.addEventListener("dragleave", handleDragLeave);
+    document.addEventListener("dragend", handleDragEnd);
     iframeDoc.addEventListener("drop", handleDrop);
     cleanupFunctions.push(() => {
       iframeDoc.removeEventListener("dragenter", handleDragEnter);
       iframeDoc.removeEventListener("dragover", handleDragOver);
       iframeDoc.removeEventListener("dragleave", handleDragLeave);
+      document.removeEventListener("dragend", handleDragEnd);
       iframeDoc.removeEventListener("drop", handleDrop);
+      clearPartDropIndicator(iframeDoc);
     });
 
     // [修正] ここにあった「iframe内のpasteを親へpostMessageして画像を挿入する」
@@ -755,7 +823,7 @@ export function EditorCanvas() {
     // 直接 paste リスナーを張っており、2系統が同時に走るため1回の貼り付けで
     // 画像が2枚入っていた。ペーストの処理は FrontendVisualEditor の1本に集約する。
 
-    console.log("[Canvas] Drag/drop handlers registered");
+    debugLog("[Canvas] Drag/drop handlers registered");
 
     // 9. レイアウトモードに応じた初期化とDOMツリー構築
     const initLayout = async () => {
@@ -804,17 +872,17 @@ export function EditorCanvas() {
           // 別の幅で崩れ、デザインツールへの取り込みで意味を失う。
         if (editorModeRef.current !== "webpage") {
           const converted = convertToAbsolutePositioning(iframeDoc);
-          console.log('[Canvas] 絶対配置へ一括変換:', converted, '要素');
+          debugLog('[Canvas] 絶対配置へ一括変換:', converted, '要素');
         }
 
         // ここまでが「開いただけ」の姿。以後の変化=ユーザーの編集、と
         // 切り分けるための指紋を全要素に刻む(保存時の変換ノイズ巻き戻しに使う)
         const stamped = stampBaselines(iframeDoc);
-        console.log('[Canvas] 書き戻し用ベースライン:', stamped, '要素');
+        debugLog('[Canvas] 書き戻し用ベースライン:', stamped, '要素');
 
         const artboardEl = iframeDoc.getElementById("artboard");
         const tree = buildDomTree(iframeDoc, artboardEl || undefined);
-        console.log("[Canvas] Built DOM tree with", tree.length, "root nodes");
+        debugLog("[Canvas] Built DOM tree with", tree.length, "root nodes");
 
         setDomTreeRef.current(tree);
         const firstLevelIds = new Set<string>(
@@ -830,7 +898,7 @@ export function EditorCanvas() {
         // 変換後の姿を「変更なし」の基準にする。これをしないと開いただけで
         // 未保存扱いになり、サムネイル移動のたびに確認ダイアログが出る
         setOriginalHtml(initializedHtml);
-        console.log(
+        debugLog(
           "[Canvas] History reset with initialized HTML from artboard"
         );
 
@@ -865,7 +933,7 @@ export function EditorCanvas() {
         resizeObserver.observe(artboardEl);
         cleanupFunctions.push(() => resizeObserver.disconnect());
 
-        console.log(
+        debugLog(
           "[Canvas] Webpage mode: content height tracking initialized on artboard"
         );
       }
@@ -874,11 +942,11 @@ export function EditorCanvas() {
     // 重要: クリーンアップ関数をrefに保存して、
     // 次のiframeロード時やアンマウント時にクリーンアップできるようにする
     cleanupFunctionsRef.current = cleanupFunctions;
-    console.log("[Canvas] Registered", cleanupFunctions.length, "cleanup functions");
+    debugLog("[Canvas] Registered", cleanupFunctions.length, "cleanup functions");
 
     // iframeの読み込み完了をマーク（CSS変数注入等のトリガー用）
     setIframeReady(true);
-    console.log("[Canvas] iframe ready, setIframeReady(true) called");
+    debugLog("[Canvas] iframe ready, setIframeReady(true) called");
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -910,7 +978,7 @@ export function EditorCanvas() {
       // 重要: アンマウント時にすべてのイベントリスナーをクリーンアップ
       // これにより、メモリリークとゴーストリスナーを防ぐ
       if (cleanupFunctionsRef.current.length > 0) {
-        console.log("[Canvas] Unmounting: cleaning up", cleanupFunctionsRef.current.length, "listeners");
+        debugLog("[Canvas] Unmounting: cleaning up", cleanupFunctionsRef.current.length, "listeners");
         cleanupFunctionsRef.current.forEach(cleanup => {
           try {
             cleanup();
@@ -932,6 +1000,7 @@ export function EditorCanvas() {
         "move-mode",
         "draw-mode",
         "text-mode",
+        "comment-mode",
         "tool-rectangle",
         "tool-ellipse",
         "tool-line",
@@ -961,6 +1030,9 @@ export function EditorCanvas() {
         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]);
@@ -987,7 +1059,7 @@ export function EditorCanvas() {
       refreshSelectionOverlay(iframeDoc);
     });
 
-    console.log(
+    debugLog(
       `[Canvas] Applied zoom: ${zoom}%, wrapper transform: scale(${currentScale})`
     );
   }, [zoom, editorMode, contentHeight, viewportWidth, getIframeDoc]);
@@ -1053,7 +1125,7 @@ export function EditorCanvas() {
       : SLIDE_HEIGHT;
     recalculateViewportUnits(iframeDoc, canvasWidth, canvasHeight);
 
-    console.log(`[Canvas] Viewport width changed to ${viewportWidth}px, recalculated viewport units with canvas dimensions: ${canvasWidth}x${canvasHeight}`);
+    debugLog(`[Canvas] Viewport width changed to ${viewportWidth}px, recalculated viewport units with canvas dimensions: ${canvasWidth}x${canvasHeight}`);
   }, [viewportWidth, editorMode, getIframeDoc, calculateFitZoom, setFitZoom]);
 
   return (

package/src/editor/components/EditorContextMenu.tsx

@@ -5,6 +5,7 @@
  * 右クリックで要素操作メニューを表示
  */
 
+import { createPortal } from 'react-dom';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../components/ui/dropdown-menu';
 import { useEditorContext } from '../EditorContext';
 import {
@@ -201,11 +202,19 @@ export function EditorContextMenu({
     }
   };
 
+  // 見えない起点(右クリックの位置)。position は画面(viewport)の座標なので、document.body に出して
+  // position: fixed の基準を viewport にする。エディタの木の中に置くと、利用側がエディタを transform の付いた
+  // 器に入れているとき(構成ラフの殻の .wf-editor-main は translateZ(0))、fixed の基準がその器になり、
+  // メニューが右クリックの位置から器の左端ぶん(左パネルの幅 248px)ずれていた(実測)
+  const anchor = (
+    <DropdownMenuTrigger asChild>
+      <button tabIndex={-1} aria-label="要素の操作" style={{ position: 'fixed', left: position.x, top: position.y, width: 1, height: 1, opacity: 0, pointerEvents: 'none' }} />
+    </DropdownMenuTrigger>
+  );
+
   return (
     <DropdownMenu open onOpenChange={(open) => { if (!open) onClose(); }}>
-      <DropdownMenuTrigger asChild>
-        <button tabIndex={-1} aria-label="要素の操作" style={{ position: 'fixed', left: position.x, top: position.y, width: 1, height: 1, opacity: 0, pointerEvents: 'none' }} />
-      </DropdownMenuTrigger>
+      {typeof document === 'undefined' ? anchor : createPortal(anchor, document.body)}
       <DropdownMenuContent align="start" sideOffset={0} collisionPadding={8} className="w-60"
         onCloseAutoFocus={(e) => { e.preventDefault(); restoreFocus(); }}>
       {/* クリップボード操作 */}

package/src/editor/components/EditorFooter.tsx

@@ -10,11 +10,13 @@ export function EditorFooter() {
   const cmd = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform) ? '⌘' : 'Ctrl+';
   const hint = activeTool === 'move' ? 'ドラッグで紙面を移動 · V で選択に戻る'
     : activeTool === 'scale' ? 'ドラッグで拡大・縮小 · V で選択に戻る'
+    : activeTool === 'comment' ? '紙面をドラッグして範囲を指定 · クリックで点 · Esc で選択に戻る'
     : activeTool !== 'select' ? 'ドラッグで追加 · Esc でキャンセル'
     : selectedElement || selectedElementIds.length ? 'ダブルクリックで文字を編集 · Esc で選択を解除'
     : 'クリックで選択 · Space＋ドラッグで紙面を移動';
   const shortcuts = [
     ['選択 / 移動 / 拡大・縮小', 'V / H / K'],
+    ['コメント(範囲を指定)', 'C'],
     ['元に戻す / やり直し', `${cmd}Z / ${cmd}⇧Z`],
     ['保存', `${cmd}S`], ['複製', `${cmd}D`],
     ['全体表示 / 100% / 選択範囲', `${cmd}0 / ${cmd}1 / ${cmd}2`],

package/src/editor/components/EditorHeader.tsx

@@ -38,6 +38,7 @@ import {
   getArtboardContent,
 } from "../utils/dom-utils";
 import { can } from "../../io";
+import { debugLog } from '../utils/debug';
 
 interface EditorHeaderProps {
   theme?: "light" | "dark";
@@ -164,7 +165,7 @@ export function EditorHeader({
 
       // 全要素を絶対配置に変換
       const count = convertToAbsolutePositioning(iframeDoc);
-      console.log(
+      debugLog(
         "[Header] Converted",
         count,
         "elements to absolute positioning",
@@ -226,7 +227,7 @@ export function EditorHeader({
         element.style.removeProperty("flex-grow");
         element.style.removeProperty("flex-shrink");
       });
-      console.log(
+      debugLog(
         "[Header] Removed absolute positioning from",
         editableElements.length,
         "elements",

package/src/editor/components/EditorLayerPanel.tsx

@@ -17,8 +17,10 @@ import {
   ChevronRight,
   ChevronDown,
   Presentation,
+  ArrowUpRight,
 } from 'lucide-react';
 import { useEditorContext, type ContentListItem } from '../EditorContext';
+import { computeContentDepths } from '../contexts/EditorArtboardContext';
 import { useElementActions } from '../hooks/useElementActions';
 import { useResizablePanel } from '../hooks/useResizablePanel';
 import { refreshSelectionOverlay, buildDomTree } from '../utils/dom-utils';
@@ -297,10 +299,13 @@ return (
 const ContentListItemComponent = memo(function ContentListItemComponent({
   slide,
   isCurrent,
+  depth = 0,
   onClick,
 }: {
   slide: ContentListItem;
   isCurrent: boolean;
+  /** 階層の深さ(parentId から)。段を付ける */
+  depth?: number;
   onClick: () => void;
 }) {
   return (
@@ -313,6 +318,8 @@ const ContentListItemComponent = memo(function ContentListItemComponent({
           : 'text-gray-400 hover:bg-[#2c2c2c] border-l-2 border-transparent'
         }
       `}
+      style={depth > 0 ? { paddingLeft: 8 + depth * 14 } : undefined}
+      data-depth={depth}
       disabled={isCurrent}
       title={slide.title || `スライド ${slide.order}`}
     >
@@ -347,12 +354,14 @@ const ContentList = memo(function ContentList({
   currentContentId: string | null;
   onContentClick: (slideId: string) => void;
 }) {
+  const depths = useMemo(() => computeContentDepths(slides), [slides]);
   return (
     <>
       {slides.map((slide) => (
         <ContentListItemComponent
           key={slide.id}
           slide={slide}
+          depth={depths.get(slide.id) ?? 0}
           isCurrent={slide.id === currentContentId}
           onClick={() => onContentClick(slide.id)}
         />
@@ -387,6 +396,8 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
   } = useEditorContext();
 
   const [contentListExpanded, setContentListExpanded] = useState(true);
+  // 階層(parentId)の深さ。一覧に段を付ける
+  const slideDepths = useMemo(() => computeContentDepths(slides), [slides]);
   // 各スライドのツリー展開状態（スライドID → 展開状態）
   const [slideTreeExpanded, setSlideTreeExpanded] = useState<Map<string, boolean>>(new Map());
 
@@ -1132,6 +1143,7 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
           {!hideSlideList && slides.length > 0 ? (
             slides.map((slide, index) => {
               const isActive = slide.id === currentContentId;
+              const depth = slideDepths.get(slide.id) ?? 0;
               const isTreeExpanded = slideTreeExpanded.get(slide.id) ?? isActive;
               const slideTree = searchQuery ?
                 // 検索時は該当スライドのフィルタ済みツリーを表示
@@ -1139,14 +1151,15 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
                 getSlideTree(slide.id);
 
               return (
-                <div key={slide.id} className="mb-1">
-                  {/* スライドヘッダー */}
+                <div key={slide.id} className="mb-1" data-depth={depth}>
+                  {/* スライドヘッダー(階層があれば深さぶん段を付ける) */}
                   <div
                     className={`flex items-center gap-1 py-1 px-1 rounded cursor-pointer text-xs transition-colors ${
                       isActive
                         ? 'bg-[#0d99ff]/20 text-[#4fb8ff] border-l-2 border-[#0d99ff]'
                         : 'text-gray-300 hover:bg-[#444444] border-l-2 border-transparent'
                     }`}
+                    style={depth > 0 ? { marginLeft: depth * 14 } : undefined}
                     onClick={() => handleContentClick(slide.id)}
                   >
                     {/* 展開/折りたたみボタン */}
@@ -1175,6 +1188,19 @@ export function EditorLayerPanel({ hideSlideList = false }: { hideSlideList?: bo
                         編集中
                       </span>
                     )}
+                    {slide.href && (
+                      <a
+                        href={slide.href}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="ed-icon-button !h-5 !w-5 flex-shrink-0 opacity-60 hover:opacity-100"
+                        title="別タブで開く(編集しない表示)"
+                        aria-label={`${slide.title || '無題'} を別タブで開く`}
+                        onClick={(e) => e.stopPropagation()}
+                      >
+                        <ArrowUpRight className="w-3 h-3" />
+                      </a>
+                    )}
                   </div>
 
                   {/* スライドのDOMツリー */}

package/src/editor/components/EditorPropertyPanel.tsx

@@ -848,38 +848,52 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
     return getInstanceByDomId(selectedElement.id);
   }, [selectedElement?.id, getInstanceByDomId]);
 
-  // 部品(data-part)のインスタンスか(DOM の属性で判定)
-  const selectedPart = useMemo(() => {
+  // 部品(data-part)のインスタンスか(DOM の属性で判定)。ルートを選んでいても、中のスロットを選んでいても
+  // 「どの部品の中か」を出す(中を編集しているときに、部品だと分からずに直してしまうのを防ぐ)
+  const selectedPartRoot = useMemo(() => {
     if (!selectedElement?.id) return null;
     const doc = getIframeDoc();
-    return partInfoOf(doc?.querySelector(`[data-element-id="${selectedElement.id}"]`));
+    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
+    if (!el) return null;
+    const root = el.hasAttribute("data-part") ? el : (el.parentElement?.closest("[data-part]") as HTMLElement | null) ?? null;
+    if (!root) return null;
+    const slot = root === el ? null : (el.closest("[data-slot]") as HTMLElement | null);
+    return { root, isRoot: root === el, slotName: slot && root.contains(slot) && slot !== root ? slot.getAttribute("data-slot") : null };
   }, [selectedElement, getIframeDoc]);
+  const selectedPart = useMemo(() => (selectedPartRoot ? partInfoOf(selectedPartRoot.root) : null), [selectedPartRoot]);
   const selectedPartLabel = useMemo(() => {
     if (!selectedPart) return "";
     const def = getPartDef(selectedPart.id);
     return `${def?.name || selectedPart.id} v${selectedPart.version}`;
   }, [selectedPart, getPartDef]);
   const handleUpdatePartFromPanel = useCallback(async () => {
-    if (!selectedElement?.id) return;
-    const doc = getIframeDoc();
-    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
-    if (!el) return;
-    const def = await updatePartFromElement(el);
+    const root = selectedPartRoot?.root;
+    if (!root) return;
+    const def = await updatePartFromElement(root);
     if (def) notifyIframeChange(true);
-  }, [selectedElement?.id, getIframeDoc, updatePartFromElement, notifyIframeChange]);
+  }, [selectedPartRoot, updatePartFromElement, notifyIframeChange]);
   const handleDetachPartFromPanel = useCallback(() => {
-    if (!selectedElement?.id) return;
     const doc = getIframeDoc();
-    const el = doc?.querySelector(`[data-element-id="${selectedElement.id}"]`) as HTMLElement | null;
-    if (!doc || !el || !partInfoOf(el)) return;
-    detachPart(el);
-    unlockPartDescendants(el);
+    const root = selectedPartRoot?.root;
+    if (!doc || !root || !partInfoOf(root)) return;
+    detachPart(root);
+    unlockPartDescendants(root);
     notifyIframeChange(true);
     void import("../utils/style-utils").then(({ extractElementInfo }) => {
-      const info = extractElementInfo(el, doc);
+      const info = extractElementInfo(root, doc);
       if (info) setSelectedElement(info);
     });
-  }, [selectedElement?.id, getIframeDoc, notifyIframeChange, setSelectedElement]);
+  }, [selectedPartRoot, getIframeDoc, notifyIframeChange, setSelectedElement]);
+  // 中のスロットを選んでいるとき: 部品のルートを選び直す(移動・削除・「この姿で更新」の対象を部品全体にする)
+  const handleSelectPartRoot = useCallback(() => {
+    const doc = getIframeDoc();
+    const root = selectedPartRoot?.root;
+    if (!doc || !root) return;
+    void import("../utils/style-utils").then(({ extractElementInfo }) => {
+      const info = extractElementInfo(root, doc);
+      if (info) setSelectedElement(info);
+    });
+  }, [selectedPartRoot, getIframeDoc, setSelectedElement]);
 
   const selectedMaster = useMemo(() => {
     if (!selectedInstance) return null;
@@ -1287,29 +1301,44 @@ export const EditorPropertyPanel = memo(function EditorPropertyPanel() {
             />
           )}
 
-          {/* 部品(data-part)のインスタンス */}
-          {selectedPart && (
-            <div className="space-y-2 rounded border border-[#444444] bg-[#2a2a2a] p-2 text-xs text-gray-300">
+          {/* 部品(data-part)のインスタンス。紙面の選択枠も紫になる(部品だと一目で分かるように) */}
+          {selectedPart && selectedPartRoot && (
+            <div className="ed-part-card space-y-2 rounded p-2 text-xs" data-part-card={selectedPart.id} data-part-inside={selectedPartRoot.isRoot ? undefined : "true"}>
               <div className="flex items-center gap-2">
-                <PartIcon className="h-3.5 w-3.5 text-purple-400" />
-                <span className="truncate font-medium">部品: {selectedPartLabel}</span>
+                <PartIcon className="h-3.5 w-3.5 ed-part-accent" />
+                <span className="truncate font-medium">部品 {selectedPartLabel}</span>
               </div>
-              <p className="text-[10px] leading-snug text-gray-500">
-                スロット(data-slot)の中だけ編集できます。「この姿で部品を更新」で定義が変わり、他ページへの反映は利用側(savePart)が行います。
+              <p className="text-[10px] leading-snug ed-part-note">
+                {selectedPartRoot.isRoot
+                  ? "スロット(点線の枠)の中だけ編集できます。外側を直したいときは切り離してください。"
+                  : `スロット「${selectedPartRoot.slotName ?? "—"}」の中を編集しています。ここの変更はこのページだけに残ります(定義には入りません)。`}
               </p>
-              <div className="flex gap-1">
+              <div className="flex flex-wrap gap-1">
+                {!selectedPartRoot.isRoot && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="h-6 px-2 text-[10px]"
+                    title="部品のルート要素を選ぶ(移動・削除・更新の対象を部品全体にする)"
+                    onClick={handleSelectPartRoot}
+                  >
+                    部品全体を選ぶ
+                  </Button>
+                )}
                 <Button
                   size="sm"
                   variant="outline"
                   className="h-6 px-2 text-[10px]"
+                  title="このインスタンスの今の姿を定義にする(版 +1)。他のページの同じ部品もその場で描き直されます"
                   onClick={() => void handleUpdatePartFromPanel()}
                 >
-                  この姿で更新
+                  この姿で更新(全ページ)
                 </Button>
                 <Button
                   size="sm"
                   variant="outline"
                   className="h-6 px-2 text-[10px]"
+                  title="部品から切り離して普通の HTML にする(以後、定義の更新が及ばない)"
                   onClick={handleDetachPartFromPanel}
                 >
                   切り離す

package/src/editor/components/FigmaColorPicker.tsx

@@ -53,6 +53,7 @@ import { useEditorVariables } from "../EditorContext";
 import { isEyeDropperSupported, pickScreenColor } from "../utils/eyedropper";
 import type { CSSVariableDefinition } from "../../types/css-variables";
 import { isVariableReference, extractVariableName, generateVarReference } from "../../types/css-variables";
+import { debugLog } from '../utils/debug';
 
 // 塗りのタイプ
 export type FillType = "solid" | "linear" | "radial" | "image" | "variable" | "none";
@@ -794,7 +795,7 @@ export function FigmaColorPicker({
   // 変数選択ハンドラ
   const handleVariableSelect = useCallback((variable: CSSVariableDefinition) => {
     const varRef = generateVarReference(variable);
-    console.log('[DEBUG FigmaColorPicker] handleVariableSelect:', {
+    debugLog('[DEBUG FigmaColorPicker] handleVariableSelect:', {
       variable: { id: variable.id, name: variable.name, cssName: variable.cssName },
       generatedVarReference: varRef,
       hasOnVariableSelect: !!onVariableSelect,

package/src/editor/components/JsEditorDialog.tsx

@@ -10,6 +10,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '
 import { Button } from '../../components/ui/button';
 import { Textarea } from '../../components/ui/textarea';
 import { Braces, Trash2, RefreshCw, AlertTriangle } from 'lucide-react';
+import { debugLog } from '../utils/debug';
 
 export interface JsEditorDialogProps {
   isOpen: boolean;

package/src/editor/components/PageSettingsDialog.tsx

@@ -14,6 +14,7 @@ import { Label } from '../../components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../components/ui/tabs';
 import { Switch } from '../../components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/ui/select';
+import { debugLog } from '../utils/debug';
 import {
   Settings,
   Search,