@growgroup/visual-editor 0.4.0 → 0.6.0

package/src/editor/contexts/MultiPageCanvasContext.tsx

@@ -40,6 +40,7 @@ import { useEditorView } from './EditorViewContext';
 import { SLIDE_HEIGHT, SLIDE_WIDTH, WEBPAGE_WIDTH } from '../constants';
 import type { EditorMode } from './EditorToolContext';
 import { io, type PreviewStyle } from '../../io';
+import { readStorage, writeStorage } from '../utils/storage';
 
 // ============================================================
 // 定数
@@ -56,6 +57,14 @@ export const MAX_ZOOM = 4;
 const ZOOM_STEP = 1.25;
 /** 全体表示・ページ表示のときの余白(px、画面上) */
 const FIT_PADDING = 72;
+/** 画面の縁からこれだけ内側にあれば「見えている」とする(px、画面上) */
+const REVEAL_MARGIN = 48;
+/**
+ * ホスト発の切替で「そのページが見えている」と認めるフレームの画面上の幅(px)。
+ * 全体表示(2%)だと 1920 の紙面が 38px の点にしかならず、画面には入っていても
+ * どこへ移ったのか分からない。これを下回るならページを画面に合わせて寄る
+ */
+const FOCUS_MIN_WIDTH = 400;
 /** 上と左の定規の太さ(px)。全体表示の余白に足す */
 export const RULER_SIZE = 20;
 /** ビューのアニメーション(ms) */
@@ -63,14 +72,29 @@ const VIEW_ANIMATION_MS = 240;
 /** 見るだけの紙面を同時に読む枚数 */
 const PREVIEW_PARALLEL = 4;
 /**
- * 見るだけの紙面を画像で描く倍率のしきい値。これ未満に縮小されている間は
- * srcdoc の iframe ではなく contentList[].thumbnail の画像を出す。
- * 判定は操作が終わってからしか動かさない(縮小の途中で 26 枚を差し替えない)。
- * 行き来でちらつかないように戻りは別のしきい値にする(ヒステリシス)
+ * 見るだけの紙面を画像で描く倍率の **上限の最大値**。これ以上に拡大されていれば、
+ * どんなに解像度の高い画像でも iframe で描く(画像は文字を選べない・検索できないため)。
+ * 実際の上限はこれより小さくなることがある ── getPreviewImageZoomCap() を見ること
  */
 export const PREVIEW_IMAGE_ZOOM = 0.5;
-/** 画像 → iframe に戻す倍率(PREVIEW_IMAGE_ZOOM 以上)。iframe → 画像は PREVIEW_IMAGE_ZOOM_OUT 未満 */
+/** 画像 → iframe に戻す倍率(上限の最大値のとき)。上限に対する比は下の HYSTERESIS */
 export const PREVIEW_IMAGE_ZOOM_OUT = 0.4;
+/**
+ * 画像を引き伸ばしてよい上限。1.25 = 画面の画素に対して 25% まで。
+ * これを超えると Retina(DPR 2)で文字がにじんで見える(実測: 960px の画像を
+ * 1766 device px の枠に出すと 1.84 倍で、同じ倍率の iframe と並べて粗さが分かる)
+ */
+export const PREVIEW_IMAGE_MAX_STRETCH = 1.25;
+/**
+ * 画像の実寸がまだ 1 枚も分からないときに仮定する「画像の幅 ÷ 紙面の幅」。
+ * 0.5 = 1920 の紙面に 960px の画像(殻の既定)
+ */
+const PREVIEW_IMAGE_PRESUMED_RATIO = 0.5;
+/**
+ * 上限に対する「画像に落とす」側の比(ヒステリシス)。
+ * 画像 → iframe は上限以上、iframe → 画像は上限 × これ未満。境目で行き来しないため
+ */
+export const PREVIEW_IMAGE_ZOOM_HYSTERESIS = PREVIEW_IMAGE_ZOOM_OUT / PREVIEW_IMAGE_ZOOM;
 
 /** フレームどうしの間隔(紙面の座標系、等倍のとき)。フレーム名を出すかの判定にも使う */
 export const FRAME_GAP: Record<EditorMode, { x: number; y: number }> = {
@@ -197,6 +221,11 @@ export interface MultiPageCanvasContextValue {
   zoomToActual: () => void;
   /** 指定のフレームが画面に入っていなければ、見える位置まで寄せる(倍率は変えない) */
   revealPage: (id: string) => void;
+  /**
+   * そのページへ視点を寄せる。見えていなければ寄せ、点にしか見えない倍率ならページに合わせる
+   * (ホスト発のページ切替・共同編集のアバターのクリックで使う)
+   */
+  focusPage: (id: string) => void;
 
   // ---- ページ切替
   /**
@@ -228,6 +257,19 @@ export interface MultiPageCanvasContextValue {
    */
   requestPreviewSlot: (id: string, grant: () => void) => void;
   releasePreviewSlot: (id: string) => void;
+
+  // ---- 紙面の画像(contentList[].thumbnail)
+  /**
+   * 紙面を画像で描いてよい倍率の上限。画像の解像度と devicePixelRatio から決める
+   * (= min(PREVIEW_IMAGE_ZOOM, 画像の幅 × 1.25 ÷ (紙面の幅 × DPR)))。
+   * 上限はキャンバス全体で 1 つで、報告された中でいちばん粗い画像に合わせる。
+   * DPR は呼ぶたびに読む(別のディスプレイへ移すと変わる)
+   */
+  getPreviewImageZoomCap: () => number;
+  /** 画像の実寸(naturalWidth)を報告する。PageFramePreview が onLoad で呼ぶ */
+  reportThumbnailWidth: (id: string, naturalWidth: number) => void;
+  /** 上限が変わった回数。React 側が判定をやり直すきっかけに使う */
+  previewImageCapVersion: number;
 }
 
 // ============================================================
@@ -468,9 +510,9 @@ interface MultiPageCanvasProviderProps {
 type PersistedView = { zoom: number; offset: { x: number; y: number }; rulers?: boolean };
 
 function readPersistedView(key: string | null | undefined): PersistedView | null {
-  if (!key || typeof localStorage === 'undefined') return null;
+  if (!key) return null;
   try {
-    const raw = localStorage.getItem(`gg-editor:canvas-view:${key}`);
+    const raw = readStorage(`gg-editor:canvas-view:${key}`);
     if (!raw) return null;
     const v = JSON.parse(raw) as PersistedView;
     if (!Number.isFinite(v.zoom) || !v.offset || !Number.isFinite(v.offset.x) || !Number.isFinite(v.offset.y)) return null;
@@ -635,30 +677,17 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [updatePageFrame, viewStore],
   );
 
-  // 生きているページは利用側(currentContentId)と揃える。
-  // 本文が読めて currentContentId が変わったときに初めてエディタが移る
-  // (クリックの時点では移さない。移すと前のページの本文が新しい枠に見えてしまう)
-  useEffect(() => {
-    if (!enabled) return;
-    const id = artboard.currentContentId ?? artboard.contentList[0]?.id ?? null;
-    viewStore.set((prev) => (prev.activePageId === id ? prev : { ...prev, activePageId: id }));
-  }, [enabled, artboard.currentContentId, artboard.contentList, viewStore]);
-
   // 見えている範囲の保存(変化が止まってから)
   useEffect(() => {
-    if (!storageKey || typeof localStorage === 'undefined') return;
+    if (!storageKey) return;
     let timer: ReturnType<typeof setTimeout> | null = null;
     const persist = () => {
       if (timer) clearTimeout(timer);
       timer = setTimeout(() => {
         timer = null;
-        try {
-          const { canvasZoom, canvasOffset } = viewStore.get();
-          const v: PersistedView = { zoom: canvasZoom, offset: canvasOffset, rulers: rulersRef.current };
-          localStorage.setItem(`gg-editor:canvas-view:${storageKey}`, JSON.stringify(v));
-        } catch {
-          /* 保存できなくても表示には影響しない */
-        }
+        const { canvasZoom, canvasOffset } = viewStore.get();
+        const v: PersistedView = { zoom: canvasZoom, offset: canvasOffset, rulers: rulersRef.current };
+        writeStorage(`gg-editor:canvas-view:${storageKey}`, JSON.stringify(v));
       }, 250);
     };
     const unsubscribe = viewStore.subscribe(persist);
@@ -810,32 +839,107 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [setView],
   );
 
-  const revealPage = useCallback<MultiPageCanvasContextValue['revealPage']>(
-    (id) => {
+  /**
+   * フレームが今どこに、どれだけの大きさで画面に出ているか(容器の座標)。
+   * 「見えているか」「寄る必要があるか」を revealPage と focusPage が同じ式で判定するため
+   */
+  const frameScreenRect = useCallback(
+    (id: string) => {
       const page = pagesRef.current.find((p) => p.id === id);
-      if (!page) return;
-      const { width, height } = containerSize();
+      if (!page) return null;
+      const container = containerSize();
       const { canvasZoom: z, canvasOffset: o } = viewStore.get();
       const inset = rulersRef.current ? RULER_SIZE : 0;
       const left = o.x + page.position.x * z;
       const top = o.y + page.position.y * z;
-      const right = left + page.size.width * z;
-      const bottom = top + page.size.height * z;
-      const margin = 48;
+      const width = page.size.width * z;
+      const height = page.size.height * z;
+      return {
+        page,
+        container,
+        inset,
+        zoom: z,
+        left,
+        top,
+        width,
+        height,
+        // 一部でも画面に入っていれば「見えている」
+        visible:
+          left + width > inset + REVEAL_MARGIN &&
+          left < container.width - REVEAL_MARGIN &&
+          top + height > inset + REVEAL_MARGIN &&
+          top < container.height - REVEAL_MARGIN,
+      };
+    },
+    [viewStore],
+  );
+
+  const revealPage = useCallback<MultiPageCanvasContextValue['revealPage']>(
+    (id) => {
+      const r = frameScreenRect(id);
       // 一部でも見えていればそのまま。見えていなければ、そのフレームの左上を画面へ寄せる
-      const visible = right > inset + margin && left < width - margin && bottom > inset + margin && top < height - margin;
-      if (visible) return;
-      const w = page.size.width * z;
-      const h = page.size.height * z;
+      if (!r || r.visible) return;
+      const { page, container, inset, zoom: z, width: w, height: h } = r;
       const offset = {
-        x: w <= width - inset ? inset + (width - inset - w) / 2 - page.position.x * z : inset + margin - page.position.x * z,
-        y: h <= height - inset ? inset + (height - inset - h) / 2 - page.position.y * z : inset + margin - page.position.y * z,
+        x: w <= container.width - inset ? inset + (container.width - inset - w) / 2 - page.position.x * z : inset + REVEAL_MARGIN - page.position.x * z,
+        y: h <= container.height - inset ? inset + (container.height - inset - h) / 2 - page.position.y * z : inset + REVEAL_MARGIN - page.position.y * z,
       };
       setView({ zoom: z, offset }, { animate: true });
     },
-    [setView, viewStore],
+    [frameScreenRect, setView],
   );
 
+  /**
+   * ホスト発(利用側のレールなど)でページが変わったときに視点を寄せる。
+   * 倍率はできるだけ変えない ── ただし「画面に入ってはいるが点にしか見えない」ときは
+   * 寄せても何も起きていないように見えるので、そのときだけページに合わせる
+   */
+  const focusPage = useCallback(
+    (id: string) => {
+      const r = frameScreenRect(id);
+      if (!r) return;
+      if (r.width < FOCUS_MIN_WIDTH) {
+        zoomToPage(id, { animate: true });
+        return;
+      }
+      if (!r.visible) revealPage(id);
+    },
+    [frameScreenRect, revealPage, zoomToPage],
+  );
+
+  /**
+   * 直前の activatePage(フレームのクリック・左パネル)の宛先。
+   * 下の同期 effect が「エディタ発かホスト発か」を見分けるのに使う。
+   * state(activatingPageId)ではなく ref で持つのは、切替が終わって state が戻るのと
+   * 同期 effect が走るのが同じ描画にまとまるため(state では読んだときに既に null)。
+   * 消すのは effect が使ったときだけ ── A → B と続けて押したときは A の後始末で消さない
+   */
+  const editorInitiatedPageIdRef = useRef<string | null>(null);
+
+  // 生きているページは利用側(currentContentId)と揃える。
+  // 本文が読めて currentContentId が変わったときに初めてエディタが移る
+  // (クリックの時点では移さない。移すと前のページの本文が新しい枠に見えてしまう)。
+  // ホスト発(利用側がレールで contentId を変えた)のときは視点も寄せる ── フレームの
+  // クリックと違って画面のどこにも手掛かりが無く、26 ページの木では移り先がほぼ画面外
+  useEffect(() => {
+    if (!enabled) return;
+    const id = artboard.currentContentId ?? artboard.contentList[0]?.id ?? null;
+    let prevId: string | null | undefined;
+    viewStore.set((prev) => {
+      if (prev.activePageId === id) return prev;
+      prevId = prev.activePageId;
+      return { ...prev, activePageId: id };
+    });
+    if (prevId === undefined || !id) return; // 変わっていない
+    if (prevId === null) return; // 最初の 1 ページが決まっただけ。初回の視点は MultiPageCanvasView が決める
+    if (editorInitiatedPageIdRef.current === id) {
+      // エディタ発(activatePage)。あちらで既に寄せてあるので二重に動かさない
+      editorInitiatedPageIdRef.current = null;
+      return;
+    }
+    focusPage(id);
+  }, [enabled, artboard.currentContentId, artboard.contentList, viewStore, focusPage]);
+
   // ---- 本文の読み込み
   const loadingRef = useRef(new Set<string>());
   const ensurePageHtml = useCallback<MultiPageCanvasContextValue['ensurePageHtml']>(
@@ -893,13 +997,21 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       }
       const notify = onContentChangeRef.current;
       if (!notify) return false;
+      // エディタ発だと印す。利用側の contentId が変わって同期 effect が走るころには
+      // この切替は終わっているので、state ではなく ref で残す
+      editorInitiatedPageIdRef.current = id;
       setActivatingPageId(id);
       if (options?.reveal) revealPage(id);
+      let moved = false;
       try {
         const result = await (notify as (contentId: string) => unknown)(id);
-        return result !== false;
+        moved = result !== false;
+        return moved;
       } finally {
         setActivatingPageId((v) => (v === id ? null : v));
+        // 移れなかったら印を消す(残すと、あとで同じページへホスト発で移るときに視点が動かない)。
+        // 別のページへ移ったあとなら消さない ── その印はそちらの切替のもの
+        if (!moved && editorInitiatedPageIdRef.current === id) editorInitiatedPageIdRef.current = null;
       }
     },
     [revealPage, viewStore],
@@ -954,6 +1066,36 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [pumpPreviewSlots],
   );
 
+  // ---- 紙面の画像の解像度(画像を出してよい倍率の上限を決める)
+  // 引き伸ばしすぎるとにじむ。上限はキャンバス全体で 1 つにし、いちばん粗い画像に合わせる
+  const thumbnailWidthsRef = useRef(new Map<string, number>());
+  const thumbnailRatioRef = useRef<number | null>(null);
+  const [previewImageCapVersion, setPreviewImageCapVersion] = useState(0);
+
+  const reportThumbnailWidth = useCallback<MultiPageCanvasContextValue['reportThumbnailWidth']>((id, naturalWidth) => {
+    if (!Number.isFinite(naturalWidth) || naturalWidth <= 0) return;
+    if (thumbnailWidthsRef.current.get(id) === naturalWidth) return;
+    thumbnailWidthsRef.current.set(id, naturalWidth);
+    let min = Infinity;
+    thumbnailWidthsRef.current.forEach((width, key) => {
+      const pageWidth = framesMapRef.current.get(key)?.size.width;
+      if (!pageWidth || pageWidth <= 0) return;
+      min = Math.min(min, width / pageWidth);
+    });
+    const ratio = Number.isFinite(min) ? min : null;
+    if (ratio === thumbnailRatioRef.current) return;
+    thumbnailRatioRef.current = ratio;
+    // 上限が動いたので、React 側(画像にするかの判定)にやり直させる
+    setPreviewImageCapVersion((v) => v + 1);
+  }, []);
+
+  const getPreviewImageZoomCap = useCallback<MultiPageCanvasContextValue['getPreviewImageZoomCap']>(() => {
+    // 別のディスプレイへ移すと変わるので、そのつど読む
+    const dpr = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;
+    const ratio = thumbnailRatioRef.current ?? PREVIEW_IMAGE_PRESUMED_RATIO;
+    return Math.min(PREVIEW_IMAGE_ZOOM, (ratio * PREVIEW_IMAGE_MAX_STRETCH) / dpr);
+  }, []);
+
   const value = useMemo<MultiPageCanvasContextValue>(
     () => ({
       isEnabled: enabled,
@@ -981,6 +1123,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       zoomToPage,
       zoomToActual,
       revealPage,
+      focusPage,
       activatePage,
       activatingPageId,
       registerContainer,
@@ -992,12 +1135,16 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       toggleRulers,
       requestPreviewSlot,
       releasePreviewSlot,
+      getPreviewImageZoomCap,
+      reportThumbnailWidth,
+      previewImageCapVersion,
     }),
     [
       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,
+      zoomToActual, revealPage, focusPage, activatePage, activatingPageId, registerContainer, isInteracting, markInteracting,
       persisted, rulersVisible, toggleRulers, requestPreviewSlot, releasePreviewSlot,
+      getPreviewImageZoomCap, reportThumbnailWidth, previewImageCapVersion,
     ],
   );
 

package/src/editor/hooks/useGoogleFonts.ts

@@ -2,6 +2,7 @@
 
 import { useState, useEffect, useCallback, useMemo } from 'react';
 import { debugLog } from '../utils/debug';
+import { readStorage, writeStorage } from '../utils/storage';
 
 /**
  * Google Fontの情報
@@ -140,8 +141,8 @@ export function useGoogleFonts() {
   const fetchGoogleFonts = useCallback(async () => {
     // キャッシュをチェック
     try {
-      const cachedFonts = localStorage.getItem(FONTS_CACHE_KEY);
-      const cacheExpiry = localStorage.getItem(FONTS_CACHE_EXPIRY_KEY);
+      const cachedFonts = readStorage(FONTS_CACHE_KEY);
+      const cacheExpiry = readStorage(FONTS_CACHE_EXPIRY_KEY);
 
       if (cachedFonts && cacheExpiry && Date.now() < parseInt(cacheExpiry, 10)) {
         const parsed = JSON.parse(cachedFonts) as GoogleFont[];
@@ -197,12 +198,9 @@ export function useGoogleFonts() {
       }));
 
       // キャッシュに保存
-      try {
-        localStorage.setItem(FONTS_CACHE_KEY, JSON.stringify(googleFonts));
-        localStorage.setItem(FONTS_CACHE_EXPIRY_KEY, String(Date.now() + CACHE_DURATION));
-      } catch {
-        // ストレージが一杯の場合は無視
-      }
+      // ストレージが一杯・使えない場合は黙って諦める
+      writeStorage(FONTS_CACHE_KEY, JSON.stringify(googleFonts));
+      writeStorage(FONTS_CACHE_EXPIRY_KEY, String(Date.now() + CACHE_DURATION));
 
       setFonts([...SYSTEM_FONTS, ...googleFonts]);
     } catch (err) {

package/src/editor/hooks/useIframeSetup.ts

@@ -112,6 +112,8 @@ export function useIframeSetup(): UseIframeSetupReturn {
       if (element.classList.contains('rotation-handle')) return;
       // selection-boxの子孫要素をすべてスキップ（念のため）
       if (element.closest('.selection-box')) return;
+      // 共同編集の他人の選択枠・カーソル(表示専用の層)
+      if (element.closest('.gg-collab-layer')) return;
 
       // 部品のインスタンス(data-part)の中で、スロット(data-slot)の外にある要素は編集対象にしない。
       // ルート自身とスロットの中は通常どおり(src/editor/parts.ts)。

package/src/editor/hooks/useResizablePanel.ts

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useCallback, useEffect, useRef } from 'react';
+import { readStorage, writeStorage } from '../utils/storage';
 
 export interface UseResizablePanelOptions {
   /** 初期幅 */
@@ -54,7 +55,7 @@ export function useResizablePanel({
   const getInitialWidth = () => {
     if (storageKey && typeof window !== 'undefined') {
       let stored: string | null = null;
-      try { stored = localStorage.getItem(storageKey); } catch { /* 既定幅を使う */ }
+      stored = readStorage(storageKey);
       if (stored) {
         const parsed = parseInt(stored, 10);
         if (!isNaN(parsed) && parsed >= minWidth && parsed <= maxWidth) {
@@ -80,7 +81,7 @@ export function useResizablePanel({
   // ドラッグ中の同期ストレージ書込みを避け、確定時だけ幅を記憶する。
   useEffect(() => {
     if (isDragging || !storageKey) return;
-    try { localStorage.setItem(storageKey, String(width)); } catch { /* 表示は継続 */ }
+    writeStorage(storageKey, String(width));
   }, [width, isDragging, storageKey]);
 
   // マウスダウン

package/src/editor/utils/debug.ts

@@ -16,6 +16,7 @@
  */
 
 const DEBUG_KEY = 'gg-editor:debug';
+import { readStorage } from './storage';
 
 /**
  * デバッグログを出す設定か。
@@ -23,11 +24,7 @@ const DEBUG_KEY = 'gg-editor:debug';
  * 参照そのものが例外を投げるので、必ず握りつぶして false に倒す。
  */
 export function isDebugEnabled(): boolean {
-  try {
-    return typeof localStorage !== 'undefined' && localStorage.getItem(DEBUG_KEY) === '1';
-  } catch {
-    return false;
-  }
+  return readStorage(DEBUG_KEY) === '1';
 }
 
 /** 内部の様子を見るためのログ。既定では出ない */

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

@@ -229,6 +229,37 @@ export function isInlineElement(element: HTMLElement, computedStyle?: CSSStyleDe
  * EditorCanvas側のエフェクト(スライダー等の状態駆動の経路)も同じ関数を使い、
  * 適用ロジックの二重実装を作らない。
  */
+/**
+ * ズームが止まってから will-change を外すまでの間(ms)。
+ * 操作が続いている間は張り直されるので、実質「最後の 1 段から 200ms」
+ */
+const ZOOM_WILL_CHANGE_RELEASE_MS = 200;
+/** wrapper ごとの後始末タイマー(iframe が差し替わったら参照ごと消える) */
+const zoomWillChangeTimers = new WeakMap<HTMLElement, number>();
+
+/**
+ * ズーム中だけ will-change: transform を付ける。
+ *
+ * 付けっぱなしにすると、Chrome は倍率が変わっても層を作り直さない。67% で描いたラスタを
+ * 384% へ引き伸ばして出すので、手を止めても文字がにじんだまま残る(DPR 2 の実機で再現)。
+ * 外した瞬間に今の倍率で描き直されてくっきりする。次のホイールでまた付くので、
+ * 操作中の滑らかさは変わらない(マルチフレームのキャンバスの転写層も同じ考え方で、
+ * あちらは isInteracting の間だけ付けている)
+ */
+function markZooming(wrapper: HTMLElement, view: (Window & typeof globalThis) | null): void {
+  wrapper.style.willChange = 'transform';
+  if (!view) return;
+  const previous = zoomWillChangeTimers.get(wrapper);
+  if (previous != null) view.clearTimeout(previous);
+  zoomWillChangeTimers.set(
+    wrapper,
+    view.setTimeout(() => {
+      zoomWillChangeTimers.delete(wrapper);
+      wrapper.style.willChange = '';
+    }, ZOOM_WILL_CHANGE_RELEASE_MS),
+  );
+}
+
 export function applyCanvasZoomDom(iframeDoc: Document, zoomPct: number): void {
   // 埋め込み(マルチフレームのキャンバス内)では倍率は外側の CSS transform が持つ。
   // iframe の中は常に等倍で、スクロール領域も作らない
@@ -240,7 +271,7 @@ export function applyCanvasZoomDom(iframeDoc: Document, zoomPct: number): void {
   if (!wrapper || !scrollArea || !container || !artboard) return;
 
   const scale = zoomPct / 100;
-  wrapper.style.willChange = 'transform';
+  markZooming(wrapper, iframeDoc.defaultView);
   wrapper.style.transform = `scale(${scale})`;
 
   const w = artboard.offsetWidth;

package/src/editor/utils/drop-target.ts

@@ -22,7 +22,7 @@ const INDICATOR_CLASS = `selection-box ${PART_DROP_INDICATOR_CLASS}`;
 
 /** 紙面の中身ではなく、エディタが差し込んでいる表示専用のノード */
 const EDITOR_CHROME =
-  '.selection-box,.marquee-selection-box,.gg-comment-layer,.gg-crop-ui,' +
+  '.selection-box,.marquee-selection-box,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui,' +
   '#gg-measure-layer,#gg-smart-guides,.flex-drop-indicator,.nesting-drop-indicator,' +
   '.auto-layout-drop-indicator,.drag-ghost';
 

package/src/editor/utils/flex-reorder.ts

@@ -27,7 +27,7 @@ const BLUE = '#0d99ff';
 /** 並べ替えの対象にしない、エディタが描いている飾り */
 const OVERLAY_SELECTOR =
   '.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,' +
-  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-crop-ui,' +
+  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui,' +
   '.flex-drop-indicator,#gg-measure-layer,#gg-smart-guides,#' + INDICATOR_ID;
 
 /**

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

@@ -364,6 +364,8 @@ export function getCleanHtml(doc: Document): string {
 
   // コメントの吹き出しレイヤー(表示専用)を削除
   tempContainer.querySelectorAll('.gg-comment-layer').forEach(el => el.remove());
+  // 共同編集の他人の選択枠・カーソル(表示専用)も保存しない(共有する本文にも混ぜない)
+  tempContainer.querySelectorAll('.gg-collab-layer').forEach(el => el.remove());
   // Alt計測の赤い線(表示専用)も保存しない
   tempContainer.querySelectorAll('#gg-measure-layer').forEach(el => el.remove());
   // ドラッグ中の整列ガイド(表示専用)も保存しない

package/src/editor/utils/restore-flow.ts

@@ -122,7 +122,7 @@ export function relaxContainerSize(container: HTMLElement): void {
 /** 並べ替え・整列の対象にしない、エディタが描いている飾り */
 const OVERLAY_SELECTOR =
   '.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,' +
-  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-crop-ui,' +
+  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui,' +
   '#gg-measure-layer,#gg-smart-guides,#gg-reorder-indicator';
 
 /** 実体のある直接の子だけを取り出す */

package/src/editor/utils/smart-guides.ts

@@ -24,7 +24,7 @@ export const SNAP_THRESHOLD_SCREEN_PX = 4;
 /** ガイドの候補にしないオーバーレイ類(エディタが描いている飾り) */
 const OVERLAY_SELECTOR =
   '.selection-box,.marquee-selection-box,.resize-handle,.rotation-handle,' +
-  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-crop-ui,' +
+  '.size-label,.element-breadcrumb,.gg-comment-layer,.gg-collab-layer,.gg-crop-ui,' +
   '#gg-measure-layer,#gg-smart-guides,[data-drag-ghost],[data-flex-drop-indicator]';
 
 /** 整列の候補座標。x/y ともに昇順ソート済み */

package/src/editor/utils/storage.ts

@@ -0,0 +1,47 @@
+/**
+ * ブラウザの記憶(localStorage / sessionStorage)への安全な出入口。
+ *
+ * 【なぜ関数越しにするのか】
+ * 共有ドロップに置く静的なエディタは `Content-Security-Policy: sandbox`(allow-same-origin 無し)で
+ * 配られる。この文脈は **opaque origin** で、`localStorage` は読むだけで SecurityError を投げる
+ * (`typeof localStorage` でも投げる ── プロパティの getter が走るため)。
+ * 「サイトデータをブロック」設定や、srcdoc / sandbox の紙面の中でも同じことが起きる。
+ *
+ * 記憶できるかどうかで挙動を変えないこと。ここは全部「読めなければ既定値、書けなければ黙って続行」。
+ */
+
+function storage(kind: 'local' | 'session'): Storage | null {
+  try {
+    const s = kind === 'local' ? window.localStorage : window.sessionStorage;
+    return s ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** 読む。使えない・入っていなければ null */
+export function readStorage(key: string, kind: 'local' | 'session' = 'local'): string | null {
+  try {
+    return storage(kind)?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** 書く。使えない・容量が一杯なら黙って諦める(表示や編集は続ける) */
+export function writeStorage(key: string, value: string, kind: 'local' | 'session' = 'local'): void {
+  try {
+    storage(kind)?.setItem(key, value);
+  } catch {
+    /* 記憶できなくても動作は継続 */
+  }
+}
+
+/** 消す */
+export function removeStorage(key: string, kind: 'local' | 'session' = 'local'): void {
+  try {
+    storage(kind)?.removeItem(key);
+  } catch {
+    /* 消せなくても動作は継続 */
+  }
+}

package/src/index.ts

@@ -60,7 +60,22 @@ export type {
   EditorPartDef,
   EditorPartCategory,
   EditorPartsLibrary,
+  EditorCollab,
+  EditorCollabUser,
 } from "./io";
+
+/**
+ * 共同編集の居場所(io.collab を渡したときだけ中身が入る)。
+ * 利用側のページ一覧などに「誰がどのページに居るか」を出すのに使う
+ */
+export { useCollabPresence } from "./editor/collab/store";
+export type { CollabPresence, CollabPeer, CollabStatus } from "./editor/collab/store";
+/**
+ * 部屋名が中継(gg-manager の hocuspocus-server)に保存される形かの検査。
+ * 形を外れた部屋は中継はされるが保存されないので、殻・書き戻し役でも繋ぐ前にこれで確かめる
+ */
+export { checkCollabRoom } from "./editor/collab/room";
+export type { CollabRoomCheck } from "./editor/collab/room";
 export type { CSSVariableDefinition, CSSVariableCategory } from "./types/css-variables";
 
 /**

package/src/io.ts

@@ -196,6 +196,35 @@ export type EditorIO = {
   loadVariables?: () => Promise<CSSVariableDefinition[]>;
   /** CSS 変数の保存。無ければブラウザ内(localStorage)に持つ */
   saveVariables?: (variables: CSSVariableDefinition[]) => Promise<void>;
+
+  /**
+   * リアルタイム共同編集(Figma 風)。Hocuspocus の部屋に本文と居場所を載せる。
+   * 無ければ今までどおり(共同編集の UI も出さず、接続もしない)。
+   * あるページの部屋に入っている間は onSave の自動保存を呼ばない(ファイルに書くのは書き戻し役)
+   */
+  collab?: EditorCollab;
+};
+
+/** 共同編集の参加者。color が無ければ id から決める */
+export type EditorCollabUser = { id: string; name: string; color?: string };
+
+export type EditorCollab = {
+  /** Hocuspocus の URL(wss://…) */
+  url: string;
+  /** contentId → ページの部屋名。null ならそのページは共同編集しない */
+  roomFor: (contentId: string) => string | null;
+  /** 案件の部屋名(居場所・pages) */
+  projectRoom: string;
+  /** contentId → route(案件の部屋の awareness と pages のキー) */
+  routeFor: (contentId: string) => string | null;
+  user: EditorCollabUser;
+  token?: () => Promise<string | undefined>;
+  /** getCleanHtml の結果 → 共有する本文。無ければそのまま */
+  encode?: (cleanHtml: string) => string;
+  /** 共有する本文 → エディタに渡す HTML。無ければそのまま */
+  decode?: (shared: string, contentId: string) => string;
+  /** true: 書き戻し役が居ないとき「変更は保存されません」を出し続ける(静的なエディタ) */
+  requireBridge?: boolean;
 };
 
 let current: EditorIO = {};