@growgroup/visual-editor 0.3.0 → 0.3.1

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -34,7 +34,7 @@ import React, {
   useState,
   useSyncExternalStore,
 } from 'react';
-import { useEditorArtboard } from './EditorArtboardContext';
+import { useEditorArtboard, computeContentDepths, type DocumentAttributes } from './EditorArtboardContext';
 import { useEditorTool } from './EditorToolContext';
 import { useEditorView } from './EditorViewContext';
 import { SLIDE_HEIGHT, SLIDE_WIDTH, WEBPAGE_WIDTH } from '../constants';
@@ -82,7 +82,7 @@ const WRAP_AT: Record<EditorMode, (count: number) => number> = {
 export interface PageFrame {
   id: string;
   title: string;
-  /** 本文。null = まだ読んでいない */
+  /** 本文。null = まだ読んでいない(または読み直す) */
   html: string | null;
   /** 本文を読んでいる途中 */
   loading: boolean;
@@ -93,6 +93,19 @@ export interface PageFrame {
   measured: boolean;
   /** 未保存の変更がある(生きているページだけ立つ) */
   isDirty: boolean;
+  /** 親ページ(contentList[].parentId。一覧に無い親は null 扱い) */
+  parentId: string | null;
+  /** 階層の深さ(ルート = 0) */
+  depth: number;
+  /** 編集しない表示の URL(contentList[].href) */
+  href?: string;
+  /** 利用側が進める本文の版(contentList[].revision)。変わったら読み直す */
+  revision: number;
+  /**
+   * 本文が古い(部品の反映などで外から変わった)。読み直すときは contentList[].thumbnailHtml
+   * ではなく io.loadContent から取る(thumbnailHtml は利用側が最初に渡した姿のままなので)
+   */
+  stale: boolean;
 }
 
 /** レイアウト済み(位置付き)のフレーム */
@@ -101,6 +114,9 @@ export interface PageFrameLayout extends PageFrame {
   index: number;
 }
 
+/** フレームの並べ方。tree = 階層(parentId)のツリー、grid = 行で折り返す */
+export type CanvasLayoutKind = 'grid' | 'tree';
+
 export interface CanvasViewState {
   canvasOffset: { x: number; y: number };
   canvasZoom: number;
@@ -129,13 +145,19 @@ export interface MultiPageCanvasContextValue {
   // ---- ページフレーム
   pages: PageFrameLayout[];
   bounds: CanvasBounds;
+  /** 並べ方(contentList に階層があれば tree) */
+  layout: CanvasLayoutKind;
   getPage: (id: string) => PageFrameLayout | undefined;
-  updatePageFrame: (
-    id: string,
-    updates: Partial<Pick<PageFrame, 'title' | 'html' | 'size' | 'isDirty' | 'measured' | 'loading' | 'error'>>,
-  ) => void;
+  updatePageFrame: (id: string, updates: Partial<Omit<PageFrame, 'id'>>) => void;
   /** 本文を差し替える(保存後・読み込み後) */
   setPageHtml: (id: string, html: string) => void;
+  /**
+   * 見るだけの紙面の本文を捨てて読み直させる(部品の定義を更新して他ページが変わったとき等)。
+   * except のページ(編集中のページ)は触らない。読み直す手段(io.loadContent)が無ければ何もしない
+   */
+  invalidatePages: (options?: { except?: readonly (string | null | undefined)[] }) => void;
+  /** 文書(`<html>`)に付ける属性(利用側の documentAttributes)。紙面にも読み直さずに反映する */
+  documentAttributes: DocumentAttributes;
   /**
    * 高さの実測を反映する。source が 'preview' のときは、生きているページには効かない
    * (エディタの実測が正。見るだけの紙面はフォントや画像の読み込み前に測ることがある)
@@ -241,16 +263,19 @@ export function useCanvasViewStateOptional(): CanvasViewState | null {
 // レイアウト
 // ============================================================
 
-/**
- * 寸法から位置を決める。行ごとに折り返し、行の高さはその行で一番高いフレームに合わせる。
- * 位置を状態に持たないので、高さが実測で変わっても流れ直すだけで済む
- */
-export function layoutFrames(
-  frames: PageFrame[],
-  editorMode: EditorMode,
-): { pages: PageFrameLayout[]; bounds: CanvasBounds } {
-  const gap = GAP[editorMode];
-  const perRow = WRAP_AT[editorMode](frames.length);
+function boundsOf(pages: PageFrameLayout[]): CanvasBounds {
+  return pages.length
+    ? {
+        minX: Math.min(...pages.map((p) => p.position.x)),
+        minY: Math.min(...pages.map((p) => p.position.y)),
+        maxX: Math.max(...pages.map((p) => p.position.x + p.size.width)),
+        maxY: Math.max(...pages.map((p) => p.position.y + p.size.height)),
+      }
+    : { minX: 0, minY: 0, maxX: 0, maxY: 0 };
+}
+
+/** 行で折り返す並べ方(階層が無いとき)。行の高さはその行で一番高いフレームに合わせる */
+function layoutGrid(frames: PageFrame[], gap: { x: number; y: number }, perRow: number): PageFrameLayout[] {
   const pages: PageFrameLayout[] = [];
   let x = 0;
   let y = 0;
@@ -265,15 +290,101 @@ export function layoutFrames(
     x += frame.size.width + gap.x;
     rowHeight = Math.max(rowHeight, frame.size.height);
   });
-  const bounds: CanvasBounds = pages.length
-    ? {
-        minX: Math.min(...pages.map((p) => p.position.x)),
-        minY: Math.min(...pages.map((p) => p.position.y)),
-        maxX: Math.max(...pages.map((p) => p.position.x + p.size.width)),
-        maxY: Math.max(...pages.map((p) => p.position.y + p.size.height)),
-      }
-    : { minX: 0, minY: 0, maxX: 0, maxY: 0 };
-  return { pages, bounds };
+  return pages;
+}
+
+/**
+ * 階層(parentId)のツリーで並べる(サイトマップの図と同じ姿)。
+ * - 深さごとに行を作り、行の高さはその深さで一番高いフレームに合わせる
+ * - 親は子の並び(部分木)の中央の上に置く。部分木の幅 = max(自分の幅, 子の部分木の幅の和 + 間隔)
+ * - 親が一覧に無い・循環しているものはルートとして左から順に置く
+ * 一覧の順(index)は変えない(フレーム名の番号・読み込みの順番待ちに使う)
+ */
+function layoutTree(frames: PageFrame[], gap: { x: number; y: number }): PageFrameLayout[] {
+  const byId = new Map(frames.map((f) => [f.id, f] as const));
+  const children = new Map<string, PageFrame[]>();
+  const roots: PageFrame[] = [];
+  // 循環の検出: 親をたどってルートに着くか(着かないものはルート扱い)
+  const reachesRoot = (f: PageFrame): boolean => {
+    const seen = new Set<string>([f.id]);
+    let cur: PageFrame | undefined = f;
+    while (cur?.parentId && byId.has(cur.parentId)) {
+      if (seen.has(cur.parentId)) return false;
+      seen.add(cur.parentId);
+      cur = byId.get(cur.parentId);
+    }
+    return true;
+  };
+  frames.forEach((f) => {
+    const parent = f.parentId && f.parentId !== f.id && byId.has(f.parentId) && reachesRoot(f) ? f.parentId : null;
+    if (parent) {
+      const list = children.get(parent) ?? [];
+      list.push(f);
+      children.set(parent, list);
+    } else {
+      roots.push(f);
+    }
+  });
+  const subtreeWidth = new Map<string, number>();
+  const widthOf = (f: PageFrame): number => {
+    const cached = subtreeWidth.get(f.id);
+    if (cached != null) return cached;
+    const kids = children.get(f.id) ?? [];
+    const kidsWidth = kids.reduce((sum, k, i) => sum + widthOf(k) + (i > 0 ? gap.x : 0), 0);
+    const w = Math.max(f.size.width, kidsWidth);
+    subtreeWidth.set(f.id, w);
+    return w;
+  };
+  // 深さと行の高さ
+  const depthOf = new Map<string, number>();
+  const rowHeight: number[] = [];
+  const walk = (f: PageFrame, d: number) => {
+    depthOf.set(f.id, d);
+    rowHeight[d] = Math.max(rowHeight[d] ?? 0, f.size.height);
+    (children.get(f.id) ?? []).forEach((k) => walk(k, d + 1));
+  };
+  roots.forEach((r) => walk(r, 0));
+  const rowY: number[] = [];
+  rowHeight.forEach((h, d) => {
+    rowY[d] = d === 0 ? 0 : rowY[d - 1] + rowHeight[d - 1] + gap.y;
+  });
+  const position = new Map<string, { x: number; y: number }>();
+  const place = (f: PageFrame, x0: number) => {
+    const d = depthOf.get(f.id) ?? 0;
+    const w = widthOf(f);
+    position.set(f.id, { x: x0 + (w - f.size.width) / 2, y: rowY[d] ?? 0 });
+    const kids = children.get(f.id) ?? [];
+    const kidsWidth = kids.reduce((sum, k, i) => sum + widthOf(k) + (i > 0 ? gap.x : 0), 0);
+    let cx = x0 + (w - kidsWidth) / 2;
+    kids.forEach((k) => {
+      place(k, cx);
+      cx += widthOf(k) + gap.x;
+    });
+  };
+  let x = 0;
+  roots.forEach((r) => {
+    place(r, x);
+    x += widthOf(r) + gap.x;
+  });
+  return frames.map((f, index) => {
+    const p = position.get(f.id) ?? { x: 0, y: 0 };
+    return { ...f, index, depth: depthOf.get(f.id) ?? 0, position: { x: Math.round(p.x), y: Math.round(p.y) } };
+  });
+}
+
+/**
+ * 寸法から位置を決める。contentList に階層(parentId)があればツリー、無ければ行で折り返す。
+ * 位置を状態に持たないので、高さが実測で変わっても流れ直すだけで済む
+ */
+export function layoutFrames(
+  frames: PageFrame[],
+  editorMode: EditorMode,
+): { pages: PageFrameLayout[]; bounds: CanvasBounds; layout: CanvasLayoutKind } {
+  const gap = GAP[editorMode];
+  const ids = new Set(frames.map((f) => f.id));
+  const hasHierarchy = frames.some((f) => f.parentId && f.parentId !== f.id && ids.has(f.parentId));
+  const pages = hasHierarchy ? layoutTree(frames, gap) : layoutGrid(frames, gap, WRAP_AT[editorMode](frames.length));
+  return { pages, bounds: boundsOf(pages), layout: hasHierarchy ? 'tree' : 'grid' };
 }
 
 function fitView(
@@ -361,19 +472,36 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
   framesMapRef.current = framesMap;
 
   // contentList からフレームを同期(既存の実測・本文は保つ)
+  const currentContentIdRef = useRef(artboard.currentContentId);
+  currentContentIdRef.current = artboard.currentContentId;
   useEffect(() => {
     if (!enabled) return;
+    const ids = new Set(artboard.contentList.map((c) => c.id));
+    const depths = computeContentDepths(artboard.contentList);
     setFramesMap((prev) => {
       const next = new Map<string, PageFrame>();
       let changed = prev.size !== artboard.contentList.length;
       artboard.contentList.forEach((content) => {
         const existing = prev.get(content.id);
+        const parentId = content.parentId && ids.has(content.parentId) && content.parentId !== content.id ? content.parentId : null;
+        const depth = depths.get(content.id) ?? 0;
+        const revision = content.revision ?? 0;
+        const href = content.href;
         if (existing) {
           const title = content.title || existing.title;
-          const html = existing.html ?? content.thumbnailHtml ?? null;
           const width = frameWidth;
-          if (title !== existing.title || html !== existing.html || width !== existing.size.width) changed = true;
-          next.set(content.id, { ...existing, title, html, size: { width, height: existing.size.height } });
+          // 利用側が版を進めた = 本文が外から変わった。編集中のページは触らず(編集中の本文が正)、
+          // 他のページは本文を捨てて読み直させる(紙面は次の本文が来るまで前の姿のまま)
+          const bumped = revision !== existing.revision;
+          const isLive = content.id === currentContentIdRef.current;
+          const html = bumped && !isLive ? null : existing.html ?? content.thumbnailHtml ?? null;
+          const stale = bumped && !isLive ? true : existing.stale;
+          if (
+            title !== existing.title || html !== existing.html || width !== existing.size.width ||
+            parentId !== existing.parentId || depth !== existing.depth || href !== existing.href ||
+            revision !== existing.revision || stale !== existing.stale
+          ) changed = true;
+          next.set(content.id, { ...existing, title, html, stale, parentId, depth, href, revision, size: { width, height: existing.size.height } });
         } else {
           changed = true;
           next.set(content.id, {
@@ -385,6 +513,11 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
             size: { width: frameWidth, height: defaultHeight },
             measured: editorMode === 'slide',
             isDirty: false,
+            parentId,
+            depth,
+            href,
+            revision,
+            stale: false,
           });
         }
       });
@@ -392,7 +525,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     });
   }, [enabled, artboard.contentList, frameWidth, defaultHeight, editorMode]);
 
-  const { pages, bounds } = useMemo(() => {
+  const { pages, bounds, layout } = useMemo(() => {
     const order = artboard.contentList.map((c) => c.id);
     const frames = order.map((id) => framesMap.get(id)).filter((f): f is PageFrame => !!f);
     return layoutFrames(frames, editorMode);
@@ -428,10 +561,26 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
   }, []);
 
   const setPageHtml = useCallback(
-    (id: string, html: string) => updatePageFrame(id, { html, loading: false, error: null }),
+    (id: string, html: string) => updatePageFrame(id, { html, loading: false, error: null, stale: false }),
     [updatePageFrame],
   );
 
+  // 見るだけの紙面の本文を捨てて読み直させる(部品の反映など、外からファイルが変わったとき)
+  const invalidatePages = useCallback<MultiPageCanvasContextValue['invalidatePages']>((options) => {
+    if (!io().loadContent) return; // 読み直す手段が無い(thumbnailHtml は最初の姿のままなので読み直しにならない)
+    const except = new Set((options?.except ?? []).filter((id): id is string => !!id));
+    setFramesMap((prev) => {
+      let changed = false;
+      const next = new Map(prev);
+      prev.forEach((frame, id) => {
+        if (except.has(id) || frame.html == null) return;
+        next.set(id, { ...frame, html: null, loading: false, error: null, stale: true });
+        changed = true;
+      });
+      return changed ? next : prev;
+    });
+  }, []);
+
   // ---- ビュー状態(外部ストア。ズーム・パンで Context の値は変えない)
   const persisted = useMemo(() => readPersistedView(storageKey), [storageKey]);
   const [viewStore] = useState<CanvasViewStore>(() =>
@@ -669,12 +818,13 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     async (id) => {
       const frame = framesMapRef.current.get(id);
       if (!frame || frame.html != null || loadingRef.current.has(id)) return;
+      const loader = io().loadContent;
+      // 最初は利用側が渡した本文(thumbnailHtml)で足りる。外から変わった(stale)あとは loadContent で読み直す
       const fromList = artboard.contentList.find((c) => c.id === id)?.thumbnailHtml;
-      if (fromList != null) {
+      if (fromList != null && !(frame.stale && loader)) {
         setPageHtml(id, fromList);
         return;
       }
-      const loader = io().loadContent;
       if (!loader) return;
       loadingRef.current.add(id);
       updatePageFrame(id, { loading: true, error: null });
@@ -786,9 +936,12 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       editorMode,
       pages,
       bounds,
+      layout,
       getPage,
       updatePageFrame,
       setPageHtml,
+      invalidatePages,
+      documentAttributes: artboard.documentAttributes,
       setPageHeight,
       ensurePageHtml,
       previewStyles,
@@ -817,8 +970,8 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       releasePreviewSlot,
     }),
     [
-      enabled, editorMode, pages, bounds, getPage, updatePageFrame, setPageHtml, setPageHeight, ensurePageHtml,
-      previewStyles, viewStore, setCanvasOffset, setCanvasZoom, setView, zoomAt, zoomTo, zoomIn, zoomOut, zoomToFit, zoomToPage,
+      enabled, editorMode, pages, bounds, layout, getPage, updatePageFrame, setPageHtml, invalidatePages, artboard.documentAttributes,
+      setPageHeight, ensurePageHtml, previewStyles, viewStore, setCanvasOffset, setCanvasZoom, setView, zoomAt, zoomTo, zoomIn, zoomOut, zoomToFit, zoomToPage,
       zoomToActual, revealPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
       persisted, rulersVisible, toggleRulers, requestPreviewSlot, releasePreviewSlot,
     ],

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

@@ -1301,6 +1301,22 @@ function drawSelectionBox(
   selectionBox.className =
     mode === 'member' ? 'selection-box selection-member' : 'selection-box';
   selectionBox.setAttribute('data-for-element', elementId);
+  // 部品(data-part)のインスタンスは枠を紫にして、名前と版を枠の上に出す(部品だと一目で分かる)。
+  // 部品の中のスロットを選んでいるときも、どの部品の中かを出す
+  const partRoot = element.hasAttribute('data-part') ? element : (element.parentElement?.closest('[data-part]') as HTMLElement | null) ?? null;
+  if (partRoot) {
+    const isRoot = partRoot === element;
+    selectionBox.classList.add(isRoot ? 'selection-part' : 'selection-in-part');
+    if (mode !== 'member') {
+      const badge = iframeDoc.createElement('div');
+      badge.className = 'part-badge';
+      const slot = isRoot ? null : (element.closest('[data-slot]') as HTMLElement | null);
+      const slotName = slot && partRoot.contains(slot) && slot !== partRoot ? slot.getAttribute('data-slot') : null;
+      const version = partRoot.getAttribute('data-part-v');
+      badge.textContent = `${isRoot ? '部品' : '部品の中'} ${partRoot.getAttribute('data-part') ?? ''}${version ? ` v${version}` : ''}${slotName ? ` › ${slotName}` : ''}`;
+      selectionBox.appendChild(badge);
+    }
+  }
   selectionBox.style.cssText = `
     left: ${relativeLeft}px;
     top: ${relativeTop}px;

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

@@ -185,9 +185,14 @@ export function generatePreviewHtml(
     .join('\n  ');
   const width = editorMode === 'webpage' ? (artboardWidth ?? WEBPAGE_WIDTH) : SLIDE_WIDTH;
   const heightRule = editorMode === 'webpage' ? '' : `height: ${SLIDE_HEIGHT}px; overflow: hidden;`;
-  // sandbox(allow-same-origin のみ)では script が動かない。残すと 1 枚ごとに
-  // 「Blocked script execution」がコンソールへ出るだけなので、本文からも head からも外す
-  const stripScripts = (html: string) => html.replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '');
+  // 見るだけの紙面では script を動かさない(ブラウザ版 Tailwind の JIT やページの script は要らない)。
+  // <script> と、勝手に発火しうるインラインハンドラ(onload / onerror 等)を本文からも head からも外す。
+  // iframe に sandbox は付けない: sandbox で script を禁じると、ページへ script を差し込む
+  // ブラウザ拡張(React DevTools 等)が 1 枚ごとに「Blocked script execution」をコンソールへ出す(実測 26 枚 = 26 件)
+  const stripScripts = (html: string) =>
+    html
+      .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, '')
+      .replace(/\son(?:load|error|abort|click|dblclick|mouse\w*|pointer\w*|touch\w*|key\w*|focus\w*|blur|change|input|submit|reset|scroll|wheel|animation\w*|transition\w*|toggle|play\w*|pause|ended|canplay\w*|loaded\w*)\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, '');
   return `<!DOCTYPE html>
 <html lang="ja">
 <head>${stripScripts(buildCommonHead(content))}
@@ -234,6 +239,17 @@ export function generateEditableHtml(
 <head>${buildCommonHead(content)}
   <style>
     * { box-sizing: border-box; }
+    /* 既定の書体はカスケードレイヤーに入れて置く(レイヤーに入れた宣言は、レイヤー外の宣言と、
+       後から宣言されたレイヤーの両方に負ける)。ページ側の CSS が html { font-family } を
+       素で書いていても、Tailwind v4 のように @layer base に書いていても、そちらが勝つ。
+       以前は html, body に直接書いていたため、構成ラフの @layer base の html { font-family: "Noto Sans JP" } が
+       負けて、エディタだけシステム書体で表示されていた(実測。:where() でも @layer には勝ってしまう)。
+       スライド本体は #artboard 内のルートが font-sans を持つのでどちらでも影響しない */
+    @layer gg-editor-defaults {
+      html {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif;
+      }
+    }
     html, body {
       margin: 0;
       padding: 0;
@@ -241,9 +257,6 @@ export function generateEditableHtml(
       height: 100%;
       overflow: hidden;
       background-color: ${CANVAS_BG_COLOR};
-      /* iframe内のエディタUI(パンくず・ラベル等)用。
-         スライド本体は #artboard 内のルートが font-sans(游ゴシック)を持つので影響しない */
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif;
     }
 
     /* スクロール可能なキャンバスコンテナ */

package/src/index.ts

@@ -22,11 +22,16 @@ export type { FrontendVisualEditorProps } from "./editor/FrontendVisualEditor";
 
 export { EditorProvider, useEditorContext } from "./editor/EditorContext";
 export type { ContentListItem, EditorMode } from "./editor/EditorContext";
+export type { DocumentAttributes } from "./editor/contexts/EditorArtboardContext";
+export { computeContentDepths } from "./editor/contexts/EditorArtboardContext";
 
 export { WEBPAGE_WIDTH, WEBPAGE_MIN_HEIGHT, SLIDE_WIDTH, SLIDE_HEIGHT, BREAKPOINT_PRESETS } from "./editor/constants";
 
 export { registerAutoSaveFlush, flushAutoSave } from "./editor/autosave";
 
+/** パッケージの版。利用側が dev サーバーの束ねたコードと node_modules の食い違い(再起動漏れ)を検出するのに使う */
+export { EDITOR_VERSION } from "./version";
+
 /**
  * コメントの一覧(カンバン)。エディタとは別の画面に単独で置ける。
  *

package/src/styles/skin.css

@@ -258,9 +258,46 @@
 .gg-editor-ui .ed-resize-handle:hover, .gg-editor-ui .ed-resize-handle:focus-visible { background-color: var(--ed-accent); }
 .gg-editor-ui .ed-layer-selected { box-shadow: inset 3px 0 var(--ed-accent); }
 .gg-editor-ui .ed-layer-selected :is(.text-white, .text-blue-100, .text-blue-200) { color: var(--ed-accent); }
-.gg-editor-ui [data-property-panel] input:not([type="color"]), .gg-editor-ui [data-property-panel] select { min-height: 28px; }
-.gg-editor-ui [data-property-panel] button[data-state] { min-height: 32px; }
+/* ── 右のプロパティパネル(Figma UI3 の寸法に寄せる) ──────────────
+   節は 1px の罫線で区切り、見出しは 13px/600・高さ 40px、中身は左右 16px。
+   入力は高さ 32px・角丸 6px・面の色(枠線は無し。ホバーで枠、フォーカスでアクセント)。
+   ラベルは 11px の補助色。数値の小さな入力(十字のパディング等)は 28px */
 .gg-editor-ui [data-property-panel] .ed-panel-heading { position: sticky; top: 0; z-index: 1; }
+.gg-editor-ui [data-property-panel] .p-3 { padding: 0; }
+.gg-editor-ui [data-property-panel] .p-3 > * { padding-left: 16px; padding-right: 16px; }
+.gg-editor-ui [data-property-panel] .p-3 > .mb-3 { min-height: 44px; margin-bottom: 0; }
+.gg-editor-ui [data-property-panel] .p-3 > [data-state] { border-top: 1px solid var(--ed-line); }
+.gg-editor-ui [data-property-panel] .p-3 > .ed-part-card { margin: 0 16px 12px; padding: 10px 12px; }
+.gg-editor-ui [data-property-panel] [data-state] > button[data-state] {
+  min-height: 40px; padding: 0; border-top: 0; font-size: 13px; font-weight: 600; color: var(--ed-text); border-radius: 0;
+}
+.gg-editor-ui [data-property-panel] [data-state] > button[data-state]:hover { background: transparent; color: var(--ed-text); }
+.gg-editor-ui [data-property-panel] [data-state] > button[data-state] > span:first-child > svg { width: 14px; height: 14px; color: var(--ed-muted); }
+.gg-editor-ui [data-property-panel] [data-state] > button[data-state] > svg:last-child { width: 14px; height: 14px; color: var(--ed-muted); }
+.gg-editor-ui [data-property-panel] [data-state] > div[data-state="open"] { padding-bottom: 16px; }
+.gg-editor-ui [data-property-panel] label, .gg-editor-ui [data-property-panel] .ed-prop-label { font-size: 11px; line-height: 1.4; color: var(--ed-muted); font-weight: 500; }
+.gg-editor-ui [data-property-panel] :is(input:not([type="color"]):not([type="checkbox"]):not([type="range"]), select, [role="combobox"]):not(.group *) {
+  min-height: 32px; height: 32px; border-radius: 6px; background: var(--ed-surface); border: 1px solid transparent !important;
+  color: var(--ed-text); font-size: 12px; padding-left: 8px; padding-right: 8px; box-shadow: none;
+}
+.gg-editor-ui [data-property-panel] :is(input:not([type="color"]):not([type="checkbox"]):not([type="range"]), select, [role="combobox"]):not(.group *):hover { border-color: var(--ed-line-strong) !important; }
+.gg-editor-ui [data-property-panel] :is(input:not([type="color"]):not([type="checkbox"]):not([type="range"]), select, [role="combobox"]):not(.group *):focus-visible,
+.gg-editor-ui [data-property-panel] :is(input:not([type="color"]):not([type="checkbox"]):not([type="range"]), select, [role="combobox"]):not(.group *):focus-within { border-color: var(--ed-accent) !important; outline: none; box-shadow: none; }
+/* 数値のスクラブ入力(CompactNumberInput。器 .group が枠) */
+.gg-editor-ui [data-property-panel] .group.h-5 { height: 28px; min-width: 40px; border-radius: 6px; background: var(--ed-surface); border-color: transparent; }
+.gg-editor-ui [data-property-panel] .group.h-5:hover { border-color: var(--ed-line-strong); }
+.gg-editor-ui [data-property-panel] .group.h-5:focus-within { border-color: var(--ed-accent); }
+.gg-editor-ui [data-property-panel] .group.h-5 input { font-size: 12px; color: var(--ed-text); }
+.gg-editor-ui [data-property-panel] .group.h-5 input:focus { box-shadow: none; }
+/* 配置・書式のトグル(h-7 w-7)は 32px の角丸 6px。押下は面の色で示す */
+.gg-editor-ui [data-property-panel] button.h-7.w-7, .gg-editor-ui [data-property-panel] button.h-7 { height: 32px; min-width: 32px; border-radius: 6px; }
+.gg-editor-ui [data-property-panel] button.h-7.w-7 svg { width: 14px; height: 14px; }
+.gg-editor-ui [data-property-panel] button[data-state]:not([role="checkbox"]):not([role="switch"]) { min-height: 32px; }
+.gg-editor-ui [data-property-panel] button[role="checkbox"] { width: 16px; height: 16px; min-height: 16px; border-radius: 4px; border: 1px solid var(--ed-line-strong); background: var(--ed-surface); }
+.gg-editor-ui [data-property-panel] button[role="checkbox"][data-state="checked"] { background: var(--ed-accent-strong); border-color: var(--ed-accent-strong); color: #fff; }
+.gg-editor-ui [data-property-panel] input[type="color"] { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--ed-line-strong); padding: 0; }
+.gg-editor-ui [data-property-panel] .grid.grid-cols-2 { gap: 8px; }
+.gg-editor-ui [data-property-panel] .space-y-2 > * + *, .gg-editor-ui [data-property-panel] .space-y-3 > * + * { margin-top: 10px; }
 /* ポータル自身も配色スコープ。利用側にToasterがある場合もその設定を奪わない。 */
 .gg-editor-ui[data-editor-surface="popup"], .gg-editor-ui[data-editor-surface="dialog"], .gg-editor-ui[data-editor-surface="tooltip"] {
   color: var(--ed-text); background-color: var(--ed-panel-raised); border-color: var(--ed-line); border-radius: 12px; box-shadow: var(--ed-shadow); z-index: 10000;
@@ -290,11 +327,28 @@
 /* ── マルチフレームのキャンバス(Figma 風) ──────────────
    フレーム名とリングは画面座標に置く(倍率に関係なく同じ太さ・同じ文字サイズ)。
    見るだけの紙面の骨組み(スケルトン)だけは転写層の中にあるので、フレームの寸法に対する % で描く */
+.gg-editor-ui .ed-frame-label-row { position: absolute; left: 0; height: 20px; display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
 .gg-editor-ui .ed-frame-label {
-  position: absolute; left: 0; height: 20px; display: inline-flex; align-items: center; gap: 6px;
+  height: 20px; min-width: 0; display: inline-flex; align-items: center; gap: 6px;
   padding: 0 6px 0 4px; border-radius: 4px; font-size: 11px; line-height: 1; white-space: nowrap;
   color: var(--ed-muted); pointer-events: auto; cursor: pointer; overflow: hidden; text-overflow: ellipsis;
 }
+/* 別タブで開く(編集しない表示)。名前の右。ホバー・編集中のときだけ見せる */
+.gg-editor-ui .ed-frame-label-link {
+  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 18px; height: 18px;
+  border-radius: 4px; color: var(--ed-muted); pointer-events: auto; opacity: 0; transition: opacity .12s;
+}
+.gg-editor-ui .ed-frame-label-link svg { width: 12px; height: 12px; }
+.gg-editor-ui .ed-frame-label-row:hover .ed-frame-label-link, .gg-editor-ui .ed-frame-label-active + .ed-frame-label-link, .gg-editor-ui .ed-frame-label-link:focus-visible { opacity: 1; }
+.gg-editor-ui .ed-frame-label-link:hover { color: var(--ed-text); background: var(--ed-panel); box-shadow: 0 0 0 1px var(--ed-line); }
+/* 階層の線(ツリー配置)。転写層の中にあるが、線の太さは non-scaling-stroke で画面上 1.5px */
+.gg-editor-ui .ed-frame-connectors { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
+.gg-editor-ui .ed-frame-connectors path { stroke: var(--ed-line-strong); stroke-width: 1.5px; stroke-linejoin: round; }
+/* 部品(data-part)のカード。紙面の紫の選択枠と同じ色 */
+.gg-editor-ui .ed-part-card { border: 1px solid color-mix(in srgb, #7b61ff 45%, var(--ed-line)); background: color-mix(in srgb, #7b61ff 8%, var(--ed-panel)); color: var(--ed-text); }
+.gg-editor-ui .ed-part-accent { color: #7b61ff; }
+.gg-editor-ui[data-editor-theme="dark"] .ed-part-accent { color: #a99cff; }
+.gg-editor-ui .ed-part-note { color: var(--ed-muted); }
 .gg-editor-ui .ed-frame-label:hover { color: var(--ed-text); background: var(--ed-panel); box-shadow: 0 0 0 1px var(--ed-line); }
 .gg-editor-ui .ed-frame-label-active, .gg-editor-ui .ed-frame-label-active:hover { color: var(--ed-accent); font-weight: 600; }
 .gg-editor-ui .ed-frame-label-index { font-variant-numeric: tabular-nums; opacity: 0.7; }

package/src/version.ts

@@ -0,0 +1,9 @@
+/**
+ * パッケージの版(package.json の version と同じ値。scripts/check-version.mjs が一致を検査する)。
+ *
+ * 利用側が「いま動いているエディタの版」を知るために使う。dev サーバー(Vite)は起動時に
+ * node_modules を束ねるので、パッケージを更新しても再起動するまで古いコードが動く。
+ * 利用側はこの値と node_modules の package.json を見比べて、食い違っていれば
+ * 「再起動してください」と出せる(構成ラフのテンプレートが行っている)
+ */
+export const EDITOR_VERSION = '0.3.1';