@growgroup/visual-editor 0.3.0 → 0.3.1

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/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/multi-page/MultiPageCanvasView.tsx

@@ -39,6 +39,7 @@ import { EditorCanvas } from '../EditorCanvas';
 import { PageFramePreview } from './PageFramePreview';
 import { CanvasRulers } from './CanvasRulers';
 import { cn } from '../../../lib/utils';
+import { ArrowUpRight } from 'lucide-react';
 
 /** フレーム名の高さ(px、画面上)。フレームの上端との間隔 */
 const LABEL_HEIGHT = 20;
@@ -108,23 +109,39 @@ const FrameChrome = memo(function FrameChrome({ page, zoom, labelsVisible, isSel
   const showLabel = labelsVisible && sw >= 28;
   return (
     <div className="absolute left-0 top-0" data-frame-chrome={page.id} style={{ transform: `translate(${sx}px, ${sy}px)` }}>
-      {/* フレーム名(Figma: フレームの左上、倍率に関係なく同じ大きさ) */}
+      {/* フレーム名(Figma: フレームの左上、倍率に関係なく同じ大きさ)+ 別タブで開く(href があるとき) */}
       {showLabel && (
-        <button
-          type="button"
-          data-frame-label={page.id}
-          className={cn('ed-frame-label', isSelected && 'ed-frame-label-active')}
-          style={{ top: -LABEL_HEIGHT, maxWidth: Math.max(28, sw) }}
-          title={`${page.index + 1}. ${page.title || page.id}${isSelected ? '(編集中)' : ''}。ダブルクリックでこのページを画面に合わせる`}
-          onMouseDown={(e) => e.stopPropagation()}
-          onClick={() => (isSelected ? onZoomTo(page.id) : onActivate(page.id))}
-          onDoubleClick={() => onZoomTo(page.id)}
-        >
-          <span className="ed-frame-label-index">{page.index + 1}</span>
-          <span className="ed-frame-label-title">{page.title || page.id}</span>
-          {page.isDirty && <span className="ed-frame-label-dirty" aria-label="未保存の変更" />}
-          {isBusy && <span className="ed-frame-label-loading" aria-label="読み込み中" />}
-        </button>
+        <div className="ed-frame-label-row" style={{ top: -LABEL_HEIGHT, maxWidth: Math.max(28, sw) }}>
+          <button
+            type="button"
+            data-frame-label={page.id}
+            className={cn('ed-frame-label', isSelected && 'ed-frame-label-active')}
+            title={`${page.index + 1}. ${page.title || page.id}${isSelected ? '(編集中)' : ''}。ダブルクリックでこのページを画面に合わせる`}
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={() => (isSelected ? onZoomTo(page.id) : onActivate(page.id))}
+            onDoubleClick={() => onZoomTo(page.id)}
+          >
+            <span className="ed-frame-label-index">{page.index + 1}</span>
+            <span className="ed-frame-label-title">{page.title || page.id}</span>
+            {page.isDirty && <span className="ed-frame-label-dirty" aria-label="未保存の変更" />}
+            {isBusy && <span className="ed-frame-label-loading" aria-label="読み込み中" />}
+          </button>
+          {page.href && sw >= 96 && (
+            <a
+              className="ed-frame-label-link"
+              data-frame-link={page.id}
+              href={page.href}
+              target="_blank"
+              rel="noreferrer"
+              title="別タブで開く(編集しない表示)"
+              aria-label={`${page.title || page.id} を別タブで開く`}
+              onMouseDown={(e) => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <ArrowUpRight aria-hidden="true" />
+            </a>
+          )}
+        </div>
       )}
       {/* リング(選択中 = 実線、ホバー = 淡い実線) */}
       {(isSelected || isHover) && (
@@ -137,6 +154,35 @@ const FrameChrome = memo(function FrameChrome({ page, zoom, labelsVisible, isSel
   );
 });
 
+// ------------------------------------------------------------
+// 階層の線(親の下端の中央 → 子の上端の中央。転写層の中、紙面の座標)
+// ------------------------------------------------------------
+
+const TreeConnectors = memo(function TreeConnectors({ pages, gapY }: { pages: PageFrameLayout[]; gapY: number }) {
+  const byId = useMemo(() => new Map(pages.map((p) => [p.id, p] as const)), [pages]);
+  const d = useMemo(() => {
+    const parts: string[] = [];
+    pages.forEach((child) => {
+      const parent = child.parentId ? byId.get(child.parentId) : undefined;
+      if (!parent) return;
+      const x1 = parent.position.x + parent.size.width / 2;
+      const y1 = parent.position.y + parent.size.height;
+      const x2 = child.position.x + child.size.width / 2;
+      const y2 = child.position.y;
+      // 親の下から、子の行との隙間の真ん中まで下り、横へ移って子の上へ
+      const ym = y2 - gapY / 2;
+      parts.push(`M${x1} ${y1} V${ym} H${x2} V${y2}`);
+    });
+    return parts.join(' ');
+  }, [pages, byId, gapY]);
+  if (!d) return null;
+  return (
+    <svg className="ed-frame-connectors" data-canvas-connectors aria-hidden="true" width={1} height={1} style={{ overflow: 'visible' }}>
+      <path d={d} fill="none" vectorEffect="non-scaling-stroke" />
+    </svg>
+  );
+});
+
 // ------------------------------------------------------------
 // キャンバス
 // ------------------------------------------------------------
@@ -146,6 +192,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   const {
     pages,
     bounds,
+    layout,
     registerContainer,
     activatePage,
     activatingPageId,
@@ -270,6 +317,9 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
           willChange: isInteracting ? 'transform' : undefined,
         }}
       >
+        {/* 階層の線(フレームの下に描く。線の太さは倍率に関係なく一定 = non-scaling-stroke) */}
+        {layout === 'tree' && <TreeConnectors pages={pages} gapY={FRAME_GAP[canvas.editorMode].y} />}
+
         {pages.map((page) => (
           <FrameShell
             key={page.id}

package/src/editor/components/multi-page/PageFramePreview.tsx

@@ -9,12 +9,29 @@
  *   フォントや画像の読み込みで高さが変わっても追従する
  * - 画面から遠いものは描かない(IntersectionObserver)。webpage は高さの実測が
  *   レイアウトに要るので、順番に少しずつ先読みする(eagerMountCount)
+ * - iframe に sandbox は付けない。script は本文から外してある(generatePreviewHtml)。
+ *   sandbox で script を禁じると、ページへ script を差し込むブラウザ拡張(React DevTools 等)が
+ *   1 枚ごとに「Blocked script execution in 'about:srcdoc'」をコンソールへ出す(実測 26 枚 = 26 件)
+ * - 本文が外から変わった(revision / invalidatePages)ときは、次の本文が来るまで前の姿を出したまま読み直す
+ * - 文書の属性(documentAttributes)は読み直さずに <html> へ付け替える
  */
 
 import { memo, useEffect, useRef, useState } from 'react';
 import { useMultiPageCanvas, type PageFrameLayout } from '../../contexts/MultiPageCanvasContext';
+import type { DocumentAttributes } from '../../contexts/EditorArtboardContext';
 import { generatePreviewHtml } from '../../utils/html-utils';
 
+/** 文書の <html> に属性を付ける(null / undefined は外す)。エディタ本体(EditorCanvas)も同じ関数を使う */
+export function applyDocumentAttributes(doc: Document | null | undefined, attrs: DocumentAttributes): void {
+  const root = doc?.documentElement;
+  if (!root) return;
+  for (const [name, value] of Object.entries(attrs)) {
+    if (!/^[A-Za-z_:][\w:.-]*$/.test(name)) continue;
+    if (value == null) root.removeAttribute(name);
+    else if (root.getAttribute(name) !== value) root.setAttribute(name, value);
+  }
+}
+
 interface PageFramePreviewProps {
   page: PageFrameLayout;
   /** 画面上の判定に使う容器(IntersectionObserver の root) */
@@ -22,7 +39,9 @@ interface PageFramePreviewProps {
 }
 
 export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }: PageFramePreviewProps) {
-  const { editorMode, ensurePageHtml, setPageHeight, previewStyles, requestPreviewSlot, releasePreviewSlot } = useMultiPageCanvas();
+  const { editorMode, ensurePageHtml, setPageHeight, previewStyles, requestPreviewSlot, releasePreviewSlot, documentAttributes } = useMultiPageCanvas();
+  const documentAttributesRef = useRef(documentAttributes);
+  documentAttributesRef.current = documentAttributes;
   const hostRef = useRef<HTMLDivElement>(null);
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [nearViewport, setNearViewport] = useState(false);
@@ -92,6 +111,7 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
     const onLoad = () => {
       if (disposed) return;
       setLoaded(true);
+      applyDocumentAttributes(iframe.contentDocument, documentAttributesRef.current);
       measure();
       try {
         const artboard = iframe.contentDocument?.getElementById('artboard');
@@ -113,6 +133,16 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
     };
   }, [doc, page.id, setPageHeight]);
 
+  // 文書の属性が変わったら、読み直さずに <html> へ付け替える(読み込み前なら onLoad が付ける)
+  useEffect(() => {
+    if (!loaded) return;
+    try {
+      applyDocumentAttributes(iframeRef.current?.contentDocument, documentAttributes);
+    } catch {
+      /* 読めなければ次の読み込みで付く */
+    }
+  }, [documentAttributes, loaded]);
+
   // 読み終わった(または読めない)ら枠を返して次へ。本文が来ない場合の安全弁つき
   useEffect(() => {
     if (!granted) return;
@@ -136,7 +166,6 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
           ref={iframeRef}
           title={page.title || page.id}
           srcDoc={doc}
-          sandbox="allow-same-origin"
           tabIndex={-1}
           aria-hidden="true"
           className="block border-0"
@@ -144,6 +173,10 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef }
             width: page.size.width,
             height: page.size.height,
             pointerEvents: 'none',
+            // ズームで重くならないように。iframe の中身は外側の transform で拡大縮小されるが、
+            // will-change が無いと倍率が変わるたびに 26 枚の紙面がラスタライズし直され、
+            // 縮小中に 100〜340ms のフレームが混じる(実測)。付けるとラスタが保たれ p95 117ms → 24ms
+            willChange: 'transform',
           }}
         />
       ) : (

package/src/editor/constants.ts

@@ -375,6 +375,34 @@ export const EDITOR_IFRAME_STYLES = `
   .selection-box.selection-member .selection-outline {
     box-shadow: 0 0 0 calc(1px * var(--ov)) rgba(13, 153, 255, 0.75);
   }
+  /*
+   * 部品(data-part)のインスタンスは紫(Figma のコンポーネントと同じ色)。
+   * ルートを選んだら枠・ハンドル・サイズラベルが紫、中のスロットを選んだら枠は青のまま
+   * 「部品の中」の札だけ出す。札はパンくず(上 -22px)の左上に重ならないよう、その上に置く
+   */
+  .selection-box.selection-part .selection-outline { box-shadow: 0 0 0 var(--outline-w) #7b61ff; }
+  .selection-box.selection-part .resize-handle::after { border-color: #7b61ff; }
+  .selection-box.selection-part .size-label { background: #7b61ff; }
+  .selection-box.selection-member.selection-part .selection-outline { box-shadow: 0 0 0 calc(1px * var(--ov)) rgba(123, 97, 255, 0.8); }
+  .selection-box .part-badge {
+    position: absolute;
+    top: calc(-44px * var(--ov));
+    left: 0;
+    padding: calc(2px * var(--ov)) calc(6px * var(--ov));
+    border-radius: calc(3px * var(--ov));
+    background: #7b61ff;
+    color: #fff;
+    font-size: calc(10px * var(--ov));
+    line-height: 1.4;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 40;
+  }
+  .selection-box.selection-in-part .part-badge { background: rgba(123, 97, 255, 0.85); }
+  /* 選んでいる部品のスロット(編集できる範囲)は点線。中を選んでいるときは部品の外周を薄い点線で示す */
+  [data-part].selected [data-slot] { outline: calc(1px * var(--overlay-scale, 1)) dashed rgba(123, 97, 255, 0.75); outline-offset: calc(-1px * var(--overlay-scale, 1)); }
+  [data-part]:not(.selected):has(.selected) { outline: calc(1px * var(--overlay-scale, 1)) dashed rgba(123, 97, 255, 0.55); outline-offset: calc(2px * var(--overlay-scale, 1)); }
   .size-label {
     position: absolute;
     bottom: calc(-22px * var(--ov));

package/src/editor/contexts/EditorArtboardContext.tsx

@@ -14,7 +14,7 @@
  * - contentList: コンテンツリスト（スライド、ページ等）
  */
 
-import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import React, { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
 import type { DOMTreeNode } from '../types';
 
 /**
@@ -30,6 +30,48 @@ export interface ContentListItem {
   /** 表示順序（スライド番号、ページ番号等） */
   order: number;
   thumbnailHtml?: string;
+  /**
+   * 親ページの id(サイトマップの階層)。渡すと、マルチフレームのキャンバスが
+   * フレームを階層のツリー(親の下に子を並べる)で配置し、左パネルの一覧も段を付ける。
+   * 無ければ(全ページ null / undefined)従来どおり行で折り返す
+   */
+  parentId?: string | null;
+  /** 編集しない表示(ページそのもの・ビューア)の URL。渡すとフレーム名と一覧に「別タブで開く」が付く */
+  href?: string;
+  /**
+   * 本文の版。利用側でファイルが外から変わったとき(部品の一括反映・CLI・他の人の編集)に
+   * 数を進めると、キャンバスの見るだけの紙面がそのページを読み直す。編集中のページには効かない
+   * (編集中の本文は上書きしない)
+   */
+  revision?: number;
+}
+
+/**
+ * 文書に付ける属性(`<html>` の属性)。生きているエディタと見るだけの紙面の両方の文書に、
+ * 読み直さずに反映する。利用側の CSS が `html[data-…]` で切り替える表示(構成ラフの
+ * 注釈カラムの表示・非表示など)に使う。値が null / undefined の属性は外す
+ */
+export type DocumentAttributes = Record<string, string | null | undefined>;
+
+/** contentList の parentId から各ページの深さ(ルート = 0)を求める。親が一覧に無い・循環しているものはルート扱い */
+export function computeContentDepths(list: readonly ContentListItem[]): Map<string, number> {
+  const byId = new Map(list.map((c) => [c.id, c] as const));
+  const depths = new Map<string, number>();
+  const depthOf = (id: string, seen: Set<string>): number => {
+    const cached = depths.get(id);
+    if (cached != null) return cached;
+    const item = byId.get(id);
+    const parent = item?.parentId;
+    let d = 0;
+    if (parent && parent !== id && byId.has(parent) && !seen.has(parent)) {
+      seen.add(id);
+      d = depthOf(parent, seen) + 1;
+    }
+    depths.set(id, d);
+    return d;
+  };
+  list.forEach((c) => depthOf(c.id, new Set()));
+  return depths;
 }
 
 // アートボード（スライド/ページ）ごとの状態
@@ -55,6 +97,8 @@ export interface EditorArtboardContextValue {
   contentList: ContentListItem[];
   currentContentId: string | null;
   onContentChange: ContentChangeHandler | null;
+  /** 文書(`<html>`)に付ける属性。エディタと見るだけの紙面の両方に、読み直さずに反映する */
+  documentAttributes: DocumentAttributes;
 
   // Deprecated aliases
   /** @deprecated Use contentList instead */
@@ -79,6 +123,7 @@ interface EditorArtboardProviderProps {
   contentList?: ContentListItem[];
   currentContentId?: string;
   onContentChange?: ContentChangeHandler;
+  documentAttributes?: DocumentAttributes;
   // 状態同期用のコールバック（ファサードで設定）
   onArtboardSwitch?: (
     newId: string,
@@ -110,6 +155,7 @@ export function EditorArtboardProvider({
   contentList: contentListProp,
   currentContentId: currentContentIdProp,
   onContentChange: onContentChangeProp,
+  documentAttributes: documentAttributesProp,
   slides: slidesProp,
   currentSlideId: currentSlideIdProp,
   onSlideChange: onSlideChangeProp,
@@ -119,6 +165,10 @@ export function EditorArtboardProvider({
   const contentList = contentListProp ?? slidesProp ?? [];
   const currentContentId = currentContentIdProp ?? currentSlideIdProp ?? null;
   const onContentChange = onContentChangeProp ?? onSlideChangeProp ?? null;
+  // 属性は中身で比べる(利用側が毎描画で新しいオブジェクトを渡しても、購読側を描き直さない)
+  const documentAttributesKey = JSON.stringify(documentAttributesProp ?? {});
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const documentAttributes = useMemo<DocumentAttributes>(() => ({ ...(documentAttributesProp ?? {}) }), [documentAttributesKey]);
 
   // Deprecated aliases
   const slides = contentList;
@@ -221,6 +271,7 @@ export function EditorArtboardProvider({
     contentList,
     currentContentId,
     onContentChange,
+    documentAttributes,
     // Deprecated
     slides,
     currentSlideId,

package/src/editor/contexts/EditorComponentsContext.tsx

@@ -45,6 +45,7 @@ import {
 } from '../../lib/firebase/editor-components';
 import { io } from '../../io';
 import type { EditorPartDef, EditorPartsLibrary } from '../../io';
+import { useMultiPageCanvasOptional } from './MultiPageCanvasContext';
 import {
   materializePart,
   partDefFromElement,
@@ -474,6 +475,13 @@ export function EditorComponentsProvider({
   websiteId,
   pageId,
 }: EditorComponentsProviderProps) {
+  // マルチフレームのキャンバス(あれば)。部品の定義を更新したあと、他ページの紙面を読み直させる。
+  // ref で持つ: キャンバスの値は高さの実測のたびに変わるので、コールバックの依存に入れない
+  const canvas = useMultiPageCanvasOptional();
+  const canvasRef = useRef(canvas);
+  canvasRef.current = canvas;
+  const pageIdRef = useRef(pageId);
+  pageIdRef.current = pageId;
   // State
   const [masterComponents, setMasterComponents] = useState<
     Map<string, MasterComponent>
@@ -870,6 +878,9 @@ export function EditorComponentsProvider({
       const saved = (save ? await save(next) : undefined) ?? next;
       upsertPartDef(saved);
       el.setAttribute('data-part-v', String(saved.version));
+      // 他ページのインスタンスは利用側(savePart)が書き換えている。キャンバスの見るだけの紙面にもその場で反映する
+      // (以前は読み直すまで前の姿のままだった)。編集中のページは今の DOM が正なので触らない
+      canvasRef.current?.invalidatePages({ except: [pageIdRef.current] });
       return saved;
     },
     [partDefs, upsertPartDef]
@@ -930,10 +941,12 @@ export function EditorComponentsProvider({
             m.set(id, next);
             return m;
           });
-          io().savePart?.(next).catch((err) => {
-            console.error('[EditorComponentsContext] 部品の保存に失敗:', err);
-            setError('部品の保存に失敗しました');
-          });
+          io().savePart?.(next)
+            .then(() => canvasRef.current?.invalidatePages({ except: [pageIdRef.current] }))
+            .catch((err) => {
+              console.error('[EditorComponentsContext] 部品の保存に失敗:', err);
+              setError('部品の保存に失敗しました');
+            });
         }
       }
     },