@growgroup/visual-editor 0.2.1 → 0.3.0

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,7 +165,73 @@ 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;`;
+  // sandbox(allow-same-origin のみ)では script が動かない。残すと 1 枚ごとに
+  // 「Blocked script execution」がコンソールへ出るだけなので、本文からも head からも外す
+  const stripScripts = (html: string) => html.replace(/<script\b[^>]*>[\s\S]*?<\/script>/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; }
     html, body {
@@ -232,10 +307,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/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); }
@@ -279,3 +286,28 @@
 
 /* 入力の識別に必要な境界は、レイアウトの薄い区切り線とは分ける。 */
 .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 {
+  position: absolute; left: 0; height: 20px; 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: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/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>
-  );
-});

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

@@ -1,95 +0,0 @@
-'use client';
-
-import { memo, useRef, useEffect, useCallback } from 'react';
-import { useMultiPageCanvas } from '../../contexts/MultiPageCanvasContext';
-import { useInfiniteCanvas } from '../../hooks/useInfiniteCanvas';
-import { PageFrameOverlay } from './PageFrameOverlay';
-import { CanvasZoomControls } from './CanvasZoomControls';
-
-/**
- * InfiniteCanvas: 無限キャンバスコンテナ（レガシー）
- *
- * 全ページをフレームとして表示し、CSS transformでズーム/パンを実現。
- * Note: マルチページ統合ビューはMultiPageCanvasViewを使用。
- * このコンポーネントはサムネイル表示のみ（編集iframe含まず）。
- */
-export const InfiniteCanvas = memo(function InfiniteCanvas() {
-  const {
-    viewState,
-    pages,
-    switchPage,
-    zoomToFit,
-  } = useMultiPageCanvas();
-  const { canvasOffset, canvasZoom, activePageId } = viewState;
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // 無限キャンバスのズーム/パン操作
-  useInfiniteCanvas(containerRef);
-
-  // 初回表示時にフィットズーム
-  const hasInitialFitRef = useRef(false);
-  useEffect(() => {
-    if (hasInitialFitRef.current || pages.length === 0) return;
-    const container = containerRef.current;
-    if (!container) return;
-
-    const timer = setTimeout(() => {
-      const rect = container.getBoundingClientRect();
-      if (rect.width > 0 && rect.height > 0) {
-        zoomToFit(rect.width, rect.height);
-        hasInitialFitRef.current = true;
-      }
-    }, 100);
-    return () => clearTimeout(timer);
-  }, [pages.length, zoomToFit]);
-
-  const handlePageClick = useCallback((pageId: string) => {
-    switchPage(pageId);
-  }, [switchPage]);
-
-  return (
-    <div
-      ref={containerRef}
-      data-infinite-canvas="true"
-      className="absolute inset-0 overflow-hidden select-none"
-      style={{ backgroundColor: '#1a1a1a' }}
-    >
-      {/* ドットグリッド背景 */}
-      <div
-        className="absolute inset-0 pointer-events-none"
-        style={{
-          backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px)`,
-          backgroundSize: `${24 * canvasZoom}px ${24 * canvasZoom}px`,
-          backgroundPosition: `${canvasOffset.x % (24 * canvasZoom)}px ${canvasOffset.y % (24 * canvasZoom)}px`,
-        }}
-      />
-
-      {/* CSS transform による無限キャンバス */}
-      <div
-        className="canvas-transform-layer"
-        style={{
-          transform: `translate(${canvasOffset.x}px, ${canvasOffset.y}px) scale(${canvasZoom})`,
-          transformOrigin: '0 0',
-          willChange: 'transform',
-        }}
-      >
-        {pages.map(page => (
-          <PageFrameOverlay
-            key={page.id}
-            page={page}
-            isActive={page.id === activePageId}
-            onClick={handlePageClick}
-          />
-        ))}
-      </div>
-
-      {/* ズームコントロール */}
-      <CanvasZoomControls />
-
-      {/* ページ数表示 */}
-      <div className="absolute top-4 left-4 z-10 text-xs text-gray-500 select-none">
-        {pages.length} pages
-      </div>
-    </div>
-  );
-});