@growgroup/visual-editor 0.2.2 → 0.3.1

package/src/editor/utils/embedded-canvas-bridge.ts

@@ -0,0 +1,155 @@
+/**
+ * 埋め込み(マルチフレームのキャンバス)のとき、生きているエディタの iframe で起きた
+ * 「キャンバス全体に向けた操作」を親へ転送する。
+ *
+ * iframe の中で起きたホイール・キー・中ボタンは親には届かない。等倍の単独表示では
+ * iframe 自身が #canvas-container をスクロールして受けていたが、埋め込みでは
+ * 倍率も位置も外側(useInfiniteCanvas)が持つので、そのまま外へ流す。
+ * 座標は iframe の座標のまま送る(受け手が送り元 iframe の実測矩形で親の座標へ直す)
+ */
+
+const ZOOM_KEYS = new Set(['=', '+', '-', '_', ';']);
+
+function isTypingTarget(target: EventTarget | null): boolean {
+  const el = target as HTMLElement | null;
+  if (!el || typeof el.closest !== 'function') return false;
+  return !!el.closest('input, textarea, select, [contenteditable="true"], [role="textbox"]');
+}
+
+export function setupEmbeddedCanvasBridge(iframeDoc: Document, iframe: HTMLIFrameElement): () => void {
+  const parent = iframeDoc.defaultView?.parent;
+  if (!parent) return () => undefined;
+
+  /**
+   * iframe の座標 → 親の client 座標。
+   * このリスナーは親の realm で作られた関数なので postMessage の e.source は親自身になり、
+   * 受け手が送り元の iframe を特定できない。送る前にここで親の座標へ直す(coords: 'parent')
+   */
+  const toParent = (x: number, y: number) => {
+    const rect = iframe.getBoundingClientRect();
+    const scale = rect.width / (iframe.clientWidth || rect.width) || 1;
+    return { clientX: rect.left + x * scale, clientY: rect.top + y * scale };
+  };
+
+  // ---- ホイール(すべて外へ。iframe の中にはスクロールする物が無い)
+  const handleWheel = (e: WheelEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    parent.postMessage(
+      {
+        type: 'EMBEDDED_WHEEL',
+        coords: 'parent',
+        deltaX: e.deltaMode === 1 ? e.deltaX * 16 : e.deltaMode === 2 ? e.deltaX * 100 : e.deltaX,
+        deltaY: e.deltaMode === 1 ? e.deltaY * 16 : e.deltaMode === 2 ? e.deltaY * 100 : e.deltaY,
+        ...toParent(e.clientX, e.clientY),
+        ctrlKey: e.ctrlKey,
+        metaKey: e.metaKey,
+        shiftKey: e.shiftKey,
+      },
+      '*',
+    );
+  };
+
+  // ---- Safari の gesture(ピンチ)はブラウザ拡大を止めるだけ
+  const handleGesture = (e: Event) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  // ---- 2 本指タッチ = ピンチ
+  let lastDistance: number | null = null;
+  const distance = (t: TouchList) => (t.length < 2 ? 0 : Math.hypot(t[1].clientX - t[0].clientX, t[1].clientY - t[0].clientY));
+  const handleTouchStart = (e: TouchEvent) => {
+    if (e.touches.length >= 2) {
+      e.preventDefault();
+      lastDistance = distance(e.touches);
+    }
+  };
+  const handleTouchMove = (e: TouchEvent) => {
+    if (e.touches.length < 2) return;
+    e.preventDefault();
+    if (lastDistance == null) return;
+    const current = distance(e.touches);
+    const center = toParent((e.touches[0].clientX + e.touches[1].clientX) / 2, (e.touches[0].clientY + e.touches[1].clientY) / 2);
+    parent.postMessage(
+      {
+        type: 'EMBEDDED_PINCH',
+        coords: 'parent',
+        previousDistance: lastDistance,
+        currentDistance: current,
+        centerX: center.clientX,
+        centerY: center.clientY,
+      },
+      '*',
+    );
+    lastDistance = current;
+  };
+  const handleTouchEnd = (e: TouchEvent) => {
+    if (e.touches.length < 2) lastDistance = null;
+  };
+
+  // ---- キー: Space(パン)、Cmd+/- (ズーム)、Shift+0/1/2(100%・全体・このページ)、Shift+R(定規)
+  const forwardKey = (kind: 'down' | 'up') => (e: KeyboardEvent) => {
+    const cmd = e.metaKey || e.ctrlKey;
+    const typing = isTypingTarget(e.target);
+    const isSpace = e.code === 'Space';
+    const isZoomKey = cmd && ZOOM_KEYS.has(e.key);
+    const isShiftView = !cmd && e.shiftKey && !e.altKey && (['0', '1', '2'].includes(e.key) || ['Digit0', 'Digit1', 'Digit2', 'KeyR'].includes(e.code) || e.key.toLowerCase() === 'r');
+    if (!isSpace && !isZoomKey && !isShiftView) return;
+    if (typing) return;
+    if (isSpace && e.repeat) {
+      e.preventDefault();
+      return;
+    }
+    if (kind === 'down') e.preventDefault();
+    parent.postMessage(
+      {
+        type: 'EMBEDDED_KEY',
+        kind,
+        key: e.key,
+        code: e.code,
+        metaKey: e.metaKey,
+        ctrlKey: e.ctrlKey,
+        shiftKey: e.shiftKey,
+        altKey: e.altKey,
+      },
+      '*',
+    );
+  };
+  const handleKeyDown = forwardKey('down');
+  const handleKeyUp = forwardKey('up');
+
+  // ---- 中ボタン = パンの開始(以降のマウス移動は親が受ける: 親が iframe の pointer-events を切る)
+  const handleMouseDown = (e: MouseEvent) => {
+    if (e.button !== 1) return;
+    e.preventDefault();
+    parent.postMessage({ type: 'EMBEDDED_PAN_START', coords: 'parent', ...toParent(e.clientX, e.clientY) }, '*');
+  };
+
+  const options: AddEventListenerOptions = { passive: false, capture: true };
+  iframeDoc.addEventListener('wheel', handleWheel, options);
+  iframeDoc.addEventListener('gesturestart', handleGesture, options);
+  iframeDoc.addEventListener('gesturechange', handleGesture, options);
+  iframeDoc.addEventListener('gestureend', handleGesture, options);
+  iframeDoc.addEventListener('touchstart', handleTouchStart, options);
+  iframeDoc.addEventListener('touchmove', handleTouchMove, options);
+  iframeDoc.addEventListener('touchend', handleTouchEnd, options);
+  iframeDoc.addEventListener('touchcancel', handleTouchEnd, options);
+  iframeDoc.addEventListener('keydown', handleKeyDown, options);
+  iframeDoc.addEventListener('keyup', handleKeyUp, options);
+  iframeDoc.addEventListener('mousedown', handleMouseDown, options);
+
+  return () => {
+    iframeDoc.removeEventListener('wheel', handleWheel, options);
+    iframeDoc.removeEventListener('gesturestart', handleGesture, options);
+    iframeDoc.removeEventListener('gesturechange', handleGesture, options);
+    iframeDoc.removeEventListener('gestureend', handleGesture, options);
+    iframeDoc.removeEventListener('touchstart', handleTouchStart, options);
+    iframeDoc.removeEventListener('touchmove', handleTouchMove, options);
+    iframeDoc.removeEventListener('touchend', handleTouchEnd, options);
+    iframeDoc.removeEventListener('touchcancel', handleTouchEnd, options);
+    iframeDoc.removeEventListener('keydown', handleKeyDown, options);
+    iframeDoc.removeEventListener('keyup', handleKeyUp, options);
+    iframeDoc.removeEventListener('mousedown', handleMouseDown, options);
+  };
+}

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

@@ -3,6 +3,7 @@
  */
 
 import { SLIDE_WIDTH, SLIDE_HEIGHT, WEBPAGE_WIDTH, WEBPAGE_MIN_HEIGHT } from '../constants';
+import type { PreviewStyle } from '../../io';
 import type { EditorMode } from '../EditorContext';
 import { prepareHtmlForSave } from './viewport-utils';
 import { classifySaveAndRevert } from './dom-utils';
@@ -133,21 +134,29 @@ ${collectHostThemeTokens()}
  * - #artboard-wrapper: transform適用対象（ズーム/パン）
  * - #artboard: 白背景、コンテンツ配置エリア
  */
-export function generateEditableHtml(content: string, editorMode: EditorMode = 'slide'): string {
-  const artboardWidth = editorMode === 'webpage' ? WEBPAGE_WIDTH : SLIDE_WIDTH;
-  const artboardHeight = editorMode === 'webpage' ? WEBPAGE_MIN_HEIGHT : SLIDE_HEIGHT;
-  const artboardHeightStyle = editorMode === 'webpage' ? 'min-height' : 'height';
+export interface EditableHtmlOptions {
+  /**
+   * マルチフレームのキャンバスに埋め込む姿。
+   * 倍率は外側(親)の CSS transform が持つので、iframe の中は等倍・スクロール無しにする。
+   * #canvas-container 等の id は残す(数十か所の getElementById を壊さないため)
+   */
+  embedded?: boolean;
+  /** webpage の版面の幅。省略時は WEBPAGE_WIDTH(EditorCanvas が後から viewportWidth で上書きする) */
+  artboardWidth?: number;
+}
 
+/**
+ * 紙面の外側で共通に読む <head> の中身(Tailwind の注入判定・フォント)。
+ * 編集用(generateEditableHtml)と見るだけ(generatePreviewHtml)で同じ判定を使う。
+ * 別々に持つと、片方だけ Tailwind を二重注入して見え方が食い違う
+ */
+function buildCommonHead(content: string): string {
   // コンテンツにTailwind CSSが含まれていない場合は注入
   // 外部スタイルがある場合はセーフモードを使用（既存スタイルを保護）
   const needsTailwind = !hasTailwindCss(content);
   const useSafeMode = needsTailwind && hasExternalStyles(content);
   const tailwindScript = needsTailwind ? getTailwindScriptHtml(useSafeMode) : '';
-
   return `
-<!DOCTYPE html>
-<html lang="ja">
-<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ${tailwindScript}
@@ -156,9 +165,91 @@ export function generateEditableHtml(content: string, editorMode: EditorMode = '
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
   <!-- スライドの欧文(font-en)。読み込まないと游ゴシックで代替され、
        数字・フッターの幅がビューアと10px以上ずれる(検証で実測) -->
-  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">`;
+}
+
+/**
+ * 見るだけの紙面(マルチフレームのキャンバスで、編集していないページの姿)。
+ * 編集用と同じ head を使い、body は等倍・白地・スクロール無し。
+ * 編集用の属性は付けない(選択も編集も、このページを開いてから)
+ */
+export function generatePreviewHtml(
+  content: string,
+  editorMode: EditorMode = 'slide',
+  artboardWidth?: number,
+  styles: PreviewStyle[] = [],
+): string {
+  // 利用側が渡したスタイル(コンパイル済み Tailwind など)。head の共通部分の後、紙面の基本 CSS の前
+  const extraStyles = styles
+    .map((s) => ('href' in s ? `<link rel="stylesheet" href="${s.href.replace(/"/g, '&quot;')}">` : `<style data-preview-style>${s.css.replace(/<\/style/gi, '<\\/style')}</style>`))
+    .join('\n  ');
+  const width = editorMode === 'webpage' ? (artboardWidth ?? WEBPAGE_WIDTH) : SLIDE_WIDTH;
+  const heightRule = editorMode === 'webpage' ? '' : `height: ${SLIDE_HEIGHT}px; overflow: hidden;`;
+  // 見るだけの紙面では 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))}
+  ${extraStyles}
+  <style>
+    * { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; }
+    body { width: ${width}px; }
+    #artboard { position: relative; width: ${width}px; ${heightRule} background: white; }
+    /* 見るだけなので、リンク・入力を触れなくする */
+    #artboard a, #artboard button, #artboard input, #artboard textarea, #artboard select { pointer-events: none; }
+  </style>
+</head>
+<body data-editor-mode="${editorMode}" data-preview="1">
+  <div id="artboard">${stripScripts(content)}</div>
+</body>
+</html>`;
+}
+
+export function generateEditableHtml(
+  content: string,
+  editorMode: EditorMode = 'slide',
+  options: EditableHtmlOptions = {},
+): string {
+  const embedded = !!options.embedded;
+  const artboardWidth = editorMode === 'webpage' ? (options.artboardWidth ?? WEBPAGE_WIDTH) : SLIDE_WIDTH;
+  const artboardHeight = editorMode === 'webpage' ? WEBPAGE_MIN_HEIGHT : SLIDE_HEIGHT;
+  const artboardHeightStyle = editorMode === 'webpage' ? 'min-height' : 'height';
+
+  // 埋め込み: 倍率もスクロールも外側が持つ。中は「紙面がそのまま置いてある」だけの姿にする。
+  // id は残し(getElementById の呼び出しを壊さない)、役割だけ CSS で外す
+  const embeddedCss = embedded
+    ? `
+    html, body { overflow: visible; height: auto; background: transparent; }
+    #canvas-container { position: static; overflow: visible; background: transparent; }
+    #canvas-scroll-area { display: block; padding: 0 !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; }
+    #artboard-wrapper { transform: none !important; visibility: visible; }
+    #artboard { box-shadow: none; ${editorMode === 'webpage' ? 'min-height: 200px;' : ''} }`
+    : '';
+
+  return `
+<!DOCTYPE html>
+<html lang="ja">
+<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;
@@ -166,9 +257,6 @@ export function generateEditableHtml(content: string, editorMode: EditorMode = '
       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;
     }
 
     /* スクロール可能なキャンバスコンテナ */
@@ -232,10 +320,10 @@ export function generateEditableHtml(content: string, editorMode: EditorMode = '
     body.panning #artboard,
     body.panning [data-editable="true"] {
       pointer-events: none !important;
-    }
+    }${embeddedCss}
   </style>
 </head>
-<body tabindex="-1" data-editor-mode="${editorMode}">
+<body tabindex="-1" data-editor-mode="${editorMode}"${embedded ? ' data-embedded="1"' : ''}>
   <div id="canvas-container">
     <div id="canvas-scroll-area">
       <div id="artboard-wrapper">

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/io.ts

@@ -143,6 +143,23 @@ export type EditorIO = {
   /** 保存結果の通知。無ければ何もしない */
   notifySave?: (info: { page: number }) => void;
 
+  /**
+   * 1件の本文(HTML)を取る。マルチフレームのキャンバス(enableMultiPageCanvas)で、
+   * 隣のページへ移るとき・見えてきたページを描くときに呼ばれる。
+   * id は contentList の id。無ければ contentList[].thumbnailHtml を使い、
+   * それも無ければ(parentId がある利用側では)API から取る
+   */
+  loadContent?: (id: string) => Promise<string>;
+
+  /**
+   * 見るだけの紙面(マルチフレームのキャンバスで、編集していないページ)に足すスタイル。
+   * 紙面は script を動かさない(sandbox)ので、本文が Tailwind のブラウザ版 JIT に
+   * 頼っている利用側は、コンパイル済み CSS の URL か CSS 文字列をここで渡す
+   * (提案書のテンプレートは自分のページの stylesheet を渡す)。
+   * 本文に CSS が入っている利用側(構成ラフ)は不要
+   */
+  previewStyles?: () => PreviewStyle[] | Promise<PreviewStyle[]>;
+
   /**
    * 部品(HTML の template)の一覧。渡すと部品パネルはこれを使い、
    * ブラウザ内(localStorage)の JSON コンポーネントは読まない。
@@ -186,3 +203,6 @@ export function notProvided(what: string): Error {
 }
 
 export const EMPTY_DECK: EditorDeck = { version: 0, title: "", slides: [] };
+
+/** 見るだけの紙面(マルチフレームのキャンバス)に足すスタイル(URL か CSS 文字列)。io.previewStyles が返す */
+export type PreviewStyle = { href: string } | { css: string };

package/src/styles/skin.css

@@ -126,7 +126,7 @@
    `@layer base` を自分の指令と誤認して「@tailwind base が無い」とビルドを止める。
    独自名の層なら素通しされ、層なしの utilities が上書きする関係も保てる。 */
 @layer gg-editor-defaults {
-  .gg-editor-ui { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", Meiryo, sans-serif; font-size: 13px; line-height: 1.5; text-align: left; }
+  .gg-editor-ui { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", Meiryo, sans-serif; font-size: 12px; line-height: 1.5; text-align: left; }
   .gg-editor-ui, .gg-editor-ui :where(*, *::before, *::after) { box-sizing: border-box; border-width: 0; border-style: solid; }
   .gg-editor-ui :where(button, input, textarea, select) { font: inherit; color: inherit; margin: 0; }
   .gg-editor-ui :where(button) { background: transparent; cursor: pointer; }
@@ -137,25 +137,29 @@
 }
 
 .gg-editor-ui {
+  /* Figma(UI3 ライト)の実測値に寄せる:
+     カンバス #F5F5F5 / パネル #FFFFFF / 罫線 #E6E6E6 / 文字 #1E1E1E / 補助 #6B6B6B / アクセント #0D99FF */
   color-scheme: light;
-  --ed-bg: #eef1f5;
+  --ed-bg: #f5f5f5;
+  --ed-canvas: #f5f5f5;
   --ed-panel: #ffffff;
   --ed-panel-raised: #ffffff;
-  --ed-surface: #f3f5f8;
-  --ed-surface-hover: #e8edf4;
-  --ed-text: #202938;
-  --ed-muted: #566477;
-  --ed-line: #dce2ea;
-  --ed-line-strong: #7b889a;
-  --ed-accent: #2459c4;
-  --ed-accent-strong: #2459c4;
-  --ed-accent-hover: #1c48a2;
-  --ed-accent-soft: #eaf0ff;
-  --ed-success: #216346;
-  --ed-warning: #885500;
-  --ed-danger: #b42332;
-  --ed-shadow: 0 8px 32px #20293814, 0 2px 8px #2029380a;
-  --ed-radius: 8px;
+  --ed-surface: #f5f5f5;
+  --ed-surface-hover: #e6e6e6;
+  --ed-text: #1e1e1e;
+  --ed-muted: #6b6b6b;
+  --ed-line: #e6e6e6;
+  --ed-line-strong: #b3b3b3;
+  --ed-accent: #0d99ff;
+  --ed-accent-strong: #0d99ff;
+  --ed-accent-hover: #0c8ce9;
+  --ed-accent-soft: #e5f4ff;
+  --ed-success: #14ae5c;
+  --ed-warning: #8f5a00;
+  --ed-danger: #dc3412;
+  --ed-frame-edge: rgba(0, 0, 0, 0.08);
+  --ed-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15);
+  --ed-radius: 6px;
   --ed-focus: 0 0 0 2px var(--ed-panel), 0 0 0 4px var(--ed-accent);
   --color-background: var(--ed-panel);
   --color-foreground: var(--ed-text);
@@ -180,24 +184,27 @@
   scrollbar-color: var(--ed-line-strong) transparent;
 }
 .gg-editor-ui[data-editor-theme="dark"] {
+  /* Figma(UI3 ダーク): カンバス #1E1E1E / パネル #2C2C2C / 入力 #383838 / 罫線 white 10% / アクセント #0D99FF */
   color-scheme: dark;
-  --ed-bg: #191d24;
-  --ed-panel: #242932;
-  --ed-panel-raised: #2b313c;
-  --ed-surface: #303744;
-  --ed-surface-hover: #3c4554;
-  --ed-text: #f0f3f8;
-  --ed-muted: #b4bfce;
-  --ed-line: #3b4554;
-  --ed-line-strong: #7e8ca0;
-  --ed-accent: #9bbcff;
-  --ed-accent-strong: #3168d5;
-  --ed-accent-hover: #2859bc;
-  --ed-accent-soft: #303e59;
-  --ed-success: #8bddb0;
-  --ed-warning: #f3cc80;
-  --ed-danger: #ffa6ad;
-  --ed-shadow: 0 8px 32px #00000040, 0 2px 8px #00000026;
+  --ed-bg: #1e1e1e;
+  --ed-canvas: #1e1e1e;
+  --ed-panel: #2c2c2c;
+  --ed-panel-raised: #333333;
+  --ed-surface: #383838;
+  --ed-surface-hover: #444444;
+  --ed-text: #ffffff;
+  --ed-muted: #b3b3b3;
+  --ed-line: #444444;
+  --ed-line-strong: #5c5c5c;
+  --ed-accent: #4fb8ff;
+  --ed-accent-strong: #0d99ff;
+  --ed-accent-hover: #0c8ce9;
+  --ed-accent-soft: #244761;
+  --ed-success: #85e0a3;
+  --ed-warning: #ffcd29;
+  --ed-danger: #fca397;
+  --ed-frame-edge: rgba(255, 255, 255, 0.12);
+  --ed-shadow: 0 5px 17px rgba(0, 0, 0, 0.45), 0 2px 7px rgba(0, 0, 0, 0.3);
 }
 /* 古い固定色の部品も同じトークンへ移行。塗り見本・紙面のコンテンツは対象外。 */
 .gg-editor-ui :is(.text-white, .text-gray-100, .text-gray-200, .text-gray-300):not([data-editor-preview] *) { color: var(--ed-text); }
@@ -251,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;
@@ -279,3 +323,45 @@
 
 /* 入力の識別に必要な境界は、レイアウトの薄い区切り線とは分ける。 */
 .gg-editor-ui :is(input:not([type="color"]), textarea, select):not([data-editor-preview] *) { border-color: var(--ed-line-strong) !important; }
+
+/* ── マルチフレームのキャンバス(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 {
+  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; }
+.gg-editor-ui .ed-frame-label-title { overflow: hidden; text-overflow: ellipsis; }
+.gg-editor-ui .ed-frame-label-dirty { width: 6px; height: 6px; border-radius: 50%; background: var(--ed-warning); flex-shrink: 0; }
+.gg-editor-ui .ed-frame-label-loading { width: 9px; height: 9px; border: 1.5px solid var(--ed-line-strong); border-top-color: var(--ed-accent); border-radius: 50%; animation: ed-spin 0.8s linear infinite; flex-shrink: 0; }
+@keyframes ed-spin { to { transform: rotate(360deg); } }
+.gg-editor-ui .ed-frame-ring { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: 1px; }
+.gg-editor-ui .ed-canvas-marquee { position: absolute; z-index: 20; pointer-events: none; border: 1px solid var(--ed-accent); background: color-mix(in srgb, var(--ed-accent) 12%, transparent); }
+.gg-editor-ui .ed-frame-ring-active { box-shadow: 0 0 0 1.5px var(--ed-accent-strong); }
+.gg-editor-ui .ed-frame-ring-hover { box-shadow: 0 0 0 1px var(--ed-accent-strong); opacity: 0.55; }
+.gg-editor-ui .ed-frame-skeleton { position: absolute; inset: 0; padding: 6% 8%; display: flex; flex-direction: column; gap: 3%; background: #fff; }
+.gg-editor-ui .ed-frame-skeleton-bar { display: block; height: 2.5%; min-height: 8px; border-radius: 999px; background: #eceff3; }
+.gg-editor-ui .ed-frame-skeleton-note { font-size: 40px; color: #9aa3b2; }
+/* 定規の下に来る部分は透けないように */
+.gg-editor-ui [data-canvas-rulers] canvas { display: block; }

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';

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

@@ -1,71 +0,0 @@
-'use client';
-
-import { memo, useCallback, useRef } from 'react';
-import { Minus, Plus, Maximize } from 'lucide-react';
-import { Button } from '../../../components/ui/button';
-import { useMultiPageCanvas } from '../../contexts/MultiPageCanvasContext';
-
-/**
- * ズームコントロール（右下固定）
- * - ズームイン/アウトボタン
- * - ズーム値表示
- * - フィットボタン (全ページを表示)
- */
-export const CanvasZoomControls = memo(function CanvasZoomControls() {
-  const { viewState, zoomIn, zoomOut, zoomToFit } = useMultiPageCanvas();
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  const handleFitToView = useCallback(() => {
-    // 親のInfiniteCanvasコンテナサイズを取得
-    const canvas = containerRef.current?.closest('[data-infinite-canvas]');
-    if (canvas) {
-      const rect = canvas.getBoundingClientRect();
-      zoomToFit(rect.width, rect.height);
-    }
-  }, [zoomToFit]);
-
-  const zoomPercent = Math.round(viewState.canvasZoom * 100);
-
-  return (
-    <div
-      ref={containerRef}
-      className="absolute bottom-4 right-4 z-10 flex items-center gap-1 bg-[#2a2a2a] border border-[#404040] rounded-lg px-1 py-1 shadow-lg"
-    >
-      <Button
-        variant="ghost"
-        size="sm"
-        className="h-7 w-7 p-0 text-gray-400 hover:text-white hover:bg-[#404040]"
-        onClick={zoomOut}
-        title="ズームアウト"
-      >
-        <Minus className="w-3.5 h-3.5" />
-      </Button>
-
-      <span className="text-xs text-gray-300 min-w-[40px] text-center tabular-nums select-none">
-        {zoomPercent}%
-      </span>
-
-      <Button
-        variant="ghost"
-        size="sm"
-        className="h-7 w-7 p-0 text-gray-400 hover:text-white hover:bg-[#404040]"
-        onClick={zoomIn}
-        title="ズームイン"
-      >
-        <Plus className="w-3.5 h-3.5" />
-      </Button>
-
-      <div className="w-px h-4 bg-[#404040] mx-0.5" />
-
-      <Button
-        variant="ghost"
-        size="sm"
-        className="h-7 w-7 p-0 text-gray-400 hover:text-white hover:bg-[#404040]"
-        onClick={handleFitToView}
-        title="全体にフィット (Ctrl+0)"
-      >
-        <Maximize className="w-3.5 h-3.5" />
-      </Button>
-    </div>
-  );
-});