@growgroup/visual-editor 0.4.1 → 0.6.0

package/src/editor/collab/useCollab.ts

@@ -0,0 +1,266 @@
+'use client';
+
+/**
+ * エディタ本体(FrontendVisualEditorInner)と共同編集の実体をつなぐ。
+ *
+ * io.collab が無ければ何もしない(実体を読み込まず、リスナーも張らない)。
+ * あれば runtime.ts を動的に読み、
+ * - 編集中のページが変わったら部屋を付け替える
+ * - 初期化を終えた紙面をページの部屋の本文につなぐ(binding.ts)。履歴の present が変わるたびに送る
+ * - 選択(anchorValueOf の値)・カーソル(紙面の px)・打鍵中の要素を awareness に載せる
+ * - 他の人が送ったページの見るだけの紙面を、部屋の本文で読み直す(キャンバスのとき)
+ * - 他人の選択枠とカーソルを紙面に描く(layer.ts)
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { io, type EditorCollab } from '../../io';
+import { useEditorContext } from '../EditorContext';
+import { useMultiPageCanvasOptional } from '../contexts/MultiPageCanvasContext';
+import { anchorValueOf } from '../components/ppt/PptComments';
+import { getCleanHtml } from '../utils/html-utils';
+import type { CollabDocBinding, CollabRuntime } from './runtime';
+import { COLLAB_DOCUMENT_READY_ATTR, COLLAB_DOCUMENT_READY_EVENT, type CollabDocumentReadyDetail } from './signals';
+import { COLLAB_DISABLED, collabStore, setCollabFlusher } from './store';
+import { checkCollabRoom } from './room';
+import { colorFor } from './color';
+import { useCollabLayer } from './layer';
+
+/** 他の人の rev が続けて届いたとき、読み直しを 1 回にまとめる(ms) */
+const REV_DEBOUNCE_MS = 500;
+/** 部屋に本文が無いとき(書き戻し役の書いたファイルから読み直す)、書き戻しの 1.5 秒を待つ(ms) */
+const REV_FILE_DELAY_MS = 2000;
+/** 見るだけの紙面の本文を部屋から読む同時数 */
+const READ_PARALLEL = 2;
+
+export type CollabController = {
+  config: EditorCollab;
+  /** まだ送っていない変更を今すぐ送る */
+  flush: () => void;
+  undo: () => void;
+  redo: () => void;
+};
+
+type ReadyDocument = CollabDocumentReadyDetail & { initialShared: string };
+
+export function useCollab({ contentId, selectedIds }: { contentId: string | null; selectedIds: string[] }): CollabController | null {
+  // エディタを開いている間は io.collab を読み直さない(途中で渡し直されても部屋を作り直さない)
+  const [config] = useState<EditorCollab | null>(() => io().collab ?? null);
+  const { getIframeDoc, html, setHtml, contentList } = useEditorContext();
+  const multiPageCanvas = useMultiPageCanvasOptional();
+  const [runtime, setRuntime] = useState<CollabRuntime | null>(null);
+  const [ready, setReady] = useState<ReadyDocument | null>(null);
+  const bindingRef = useRef<CollabDocBinding | null>(null);
+  const setHtmlRef = useRef(setHtml);
+  setHtmlRef.current = setHtml;
+  const canvasRef = useRef(multiPageCanvas);
+  canvasRef.current = multiPageCanvas;
+  const contentListRef = useRef(contentList);
+  contentListRef.current = contentList;
+  const contentIdRef = useRef(contentId);
+  contentIdRef.current = contentId;
+
+  useEffect(() => {
+    if (!config) return;
+    // 中継が保存しない部屋名だと、繋がっているのに中身が消える。繋ぐ前に検査して、外れたら始めない
+    const room = checkCollabRoom(config.projectRoom);
+    if (!room.ok) {
+      console.warn(`[collab] 部屋名が中継に保存されない形なので共同編集を始めません: ${room.reason}`);
+      collabStore.set({
+        enabled: true,
+        self: { id: config.user.id, name: config.user.name || config.user.id, color: colorFor(config.user.id, config.user.color) },
+        requireBridge: !!config.requireBridge,
+        status: 'error',
+        roomError: room.reason,
+      });
+      return () => collabStore.set(COLLAB_DISABLED);
+    }
+    let alive = true;
+    let created: CollabRuntime | null = null;
+    import('./runtime').then(
+      (m) => {
+        if (!alive) return;
+        created = m.createCollabRuntime(config);
+        setRuntime(created);
+      },
+      (e) => console.warn('[collab] 共同編集を始められませんでした:', e),
+    );
+    return () => {
+      alive = false;
+      created?.destroy();
+    };
+  }, [config]);
+
+  // 初期化を終えた文書を受け取り、その時点の姿(種まきに使う)を控える。
+  // 先に済んでいた(実体の読み込みより前だった)ときは印から拾う
+  useEffect(() => {
+    if (!config) return;
+    const snapshot = (doc: Document) => {
+      try {
+        return config.encode ? config.encode(getCleanHtml(doc)) : getCleanHtml(doc);
+      } catch {
+        return '';
+      }
+    };
+    const onReady = (e: Event) => {
+      const detail = (e as CustomEvent<CollabDocumentReadyDetail>).detail;
+      if (detail?.doc) setReady({ doc: detail.doc, contentId: detail.contentId, initialShared: snapshot(detail.doc) });
+    };
+    window.addEventListener(COLLAB_DOCUMENT_READY_EVENT, onReady);
+    const doc = getIframeDoc();
+    if (doc?.documentElement?.hasAttribute(COLLAB_DOCUMENT_READY_ATTR)) {
+      const readyId = doc.documentElement.getAttribute(COLLAB_DOCUMENT_READY_ATTR) || null;
+      setReady((prev) => (prev?.doc === doc ? prev : { doc, contentId: readyId, initialShared: snapshot(doc) }));
+    }
+    return () => window.removeEventListener(COLLAB_DOCUMENT_READY_EVENT, onReady);
+  }, [config, getIframeDoc]);
+
+  useEffect(() => {
+    runtime?.setPage(contentId);
+  }, [runtime, contentId]);
+
+  // いま編集しているページの文書(ページ切替の途中は前の文書を使わない)
+  const doc = ready && ready.contentId === contentId ? ready.doc : null;
+
+  // 紙面 ⇄ ページの部屋の本文
+  useEffect(() => {
+    if (!runtime || !ready || !doc || !contentId) return;
+    const binding = runtime.bind({
+      doc,
+      contentId,
+      initialShared: ready.initialShared,
+      onApplied: (artboardHtml) => setHtmlRef.current(artboardHtml),
+    });
+    if (!binding) return;
+    bindingRef.current = binding;
+    setCollabFlusher(() => binding.flush());
+    return () => {
+      setCollabFlusher(null);
+      // 離れるページの見るだけの紙面を、部屋の本文の最新にしておく(共同編集中は保存しないので、保存後の追従が効かない)
+      const shared = binding.sharedHtml();
+      binding.destroy();
+      if (bindingRef.current === binding) bindingRef.current = null;
+      if (shared != null) canvasRef.current?.setPageHtml(contentId, shared);
+    };
+  }, [runtime, ready, doc, contentId]);
+
+  // 自分の変更: 履歴の present が変わるたび(notifyIframeChange / pushHistory / setHtml)。打鍵は binding が input で拾う
+  useEffect(() => {
+    bindingRef.current?.scheduleSend();
+  }, [html]);
+
+  // 他の人が本文を送ったページの、見るだけの紙面を読み直す(キャンバスのとき)
+  const hasCanvas = !!multiPageCanvas;
+  useEffect(() => {
+    if (!runtime || !config || !hasCanvas) return;
+    let alive = true;
+    const timers = new Map<string, ReturnType<typeof setTimeout>>();
+    const queue: string[] = [];
+    let running = 0;
+    const pump = () => {
+      while (alive && running < READ_PARALLEL && queue.length > 0) {
+        const id = queue.shift()!;
+        running += 1;
+        void runtime
+          .readShared(id)
+          .then((shared) => {
+            const canvas = canvasRef.current;
+            if (!alive || !canvas || id === contentIdRef.current) return;
+            if (shared != null) {
+              canvas.setPageHtml(id, shared);
+            } else if (io().loadContent) {
+              // 部屋に本文が無い = 書き戻し役がファイルに書いたものを読む。書き終わるのを待ってから
+              timers.set(`file:${id}`, setTimeout(() => canvasRef.current?.updatePageFrame(id, { html: null, stale: true }), REV_FILE_DELAY_MS));
+            }
+          })
+          .finally(() => {
+            running -= 1;
+            pump();
+          });
+      }
+    };
+    const off = runtime.onRemoteRev((route) => {
+      const id = contentListRef.current.find((c) => config.routeFor(c.id) === route)?.id;
+      if (!id || id === contentIdRef.current) return;
+      const prev = timers.get(id);
+      if (prev) clearTimeout(prev);
+      timers.set(
+        id,
+        setTimeout(() => {
+          timers.delete(id);
+          if (!queue.includes(id)) queue.push(id);
+          pump();
+        }, REV_DEBOUNCE_MS),
+      );
+    });
+    return () => {
+      alive = false;
+      off();
+      timers.forEach((timer) => clearTimeout(timer));
+    };
+  }, [runtime, config, hasCanvas]);
+
+  // 選択 → awareness
+  const selectionKey = selectedIds.join('\n');
+  useEffect(() => {
+    if (!runtime) return;
+    const artboard = doc?.getElementById('artboard');
+    if (!artboard) {
+      runtime.setSelection([]);
+      return;
+    }
+    const anchors: string[] = [];
+    for (const id of selectedIds) {
+      const el = artboard.querySelector<HTMLElement>(`[data-element-id="${CSS.escape(id)}"]`);
+      const anchor = el ? anchorValueOf(artboard, el) : null;
+      if (anchor && !anchors.includes(anchor)) anchors.push(anchor);
+    }
+    runtime.setSelection(anchors);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [runtime, doc, selectionKey]);
+
+  // カーソル(紙面の px)と打鍵中の要素 → awareness
+  useEffect(() => {
+    if (!runtime || !doc) return;
+    const artboard = doc.getElementById('artboard');
+    if (!artboard) return;
+    const onMove = (e: PointerEvent) => {
+      const r = artboard.getBoundingClientRect();
+      const scale = r.width / (artboard.offsetWidth || 1) || 1;
+      runtime.setCursor({ x: Math.round((e.clientX - r.left) / scale), y: Math.round((e.clientY - r.top) / scale) });
+    };
+    const onLeave = () => runtime.setCursor(null);
+    const updateEditing = () => {
+      const el = doc.querySelector<HTMLElement>('#artboard [contenteditable="true"]');
+      runtime.setEditing(el ? anchorValueOf(artboard, el) : null);
+    };
+    // focusout の時点ではまだ contenteditable が外れていないので、外れてから読む
+    const onFocusOut = () => setTimeout(updateEditing, 0);
+    doc.addEventListener('pointermove', onMove, { passive: true });
+    doc.documentElement.addEventListener('pointerleave', onLeave);
+    doc.addEventListener('focusin', updateEditing);
+    doc.addEventListener('focusout', onFocusOut);
+    return () => {
+      doc.removeEventListener('pointermove', onMove);
+      doc.documentElement.removeEventListener('pointerleave', onLeave);
+      doc.removeEventListener('focusin', updateEditing);
+      doc.removeEventListener('focusout', onFocusOut);
+      runtime.setCursor(null);
+      runtime.setEditing(null);
+    };
+  }, [runtime, doc]);
+
+  useCollabLayer(doc, !!runtime);
+
+  return useMemo<CollabController | null>(
+    () =>
+      config
+        ? {
+            config,
+            flush: () => bindingRef.current?.flush(),
+            undo: () => bindingRef.current?.undo(),
+            redo: () => bindingRef.current?.redo(),
+          }
+        : null,
+    [config],
+  );
+}

package/src/editor/components/AiPromptPopover.tsx

@@ -11,6 +11,7 @@ import { Sparkles, X, Loader2, Send, Paperclip, FileImage, FileText, Trash2 } fr
 import { Button } from '../../components/ui/button';
 import { Textarea } from '../../components/ui/textarea';
 import type { AttachedFile } from '../../lib/agent/slide-agent/types';
+import { readStorage, writeStorage } from '../utils/storage';
 
 // サポートするファイルタイプ
 const SUPPORTED_FILE_TYPES = {
@@ -44,7 +45,7 @@ export function AiPromptPopover({
   const [prompt, setPrompt] = useState('');
   // [移植時の追加] 生成に使うAIエンジン(ローカルCLI)を選択する
   const [engine, setEngine] = useState<'codex' | 'claude'>(() => {
-    const saved = typeof window !== 'undefined' ? localStorage.getItem('gg-ai-engine') : null;
+    const saved = readStorage('gg-ai-engine');
     return saved === 'claude' ? 'claude' : 'codex';
   });
   const [attachedFiles, setAttachedFiles] = useState<AttachedFile[]>([]);
@@ -333,7 +334,7 @@ export function AiPromptPopover({
                   type="button"
                   onClick={() => {
                     setEngine(e);
-                    localStorage.setItem('gg-ai-engine', e);
+                    writeStorage('gg-ai-engine', e);
                   }}
                   className={`rounded px-1.5 py-0.5 text-[10px] transition-colors ${
                     engine === e

package/src/editor/components/EditorCanvas.tsx

@@ -32,6 +32,8 @@ import { useMultiPageCanvasOptional } from "../contexts/MultiPageCanvasContext";
 import { applyDocumentAttributes } from "./multi-page/PageFramePreview";
 import { setupEmbeddedCanvasBridge } from "../utils/embedded-canvas-bridge";
 import { endContentSwitch } from "../autosave";
+import { io } from "../../io";
+import { COLLAB_DOCUMENT_READY_ATTR, COLLAB_DOCUMENT_READY_EVENT } from "../collab/signals";
 import { showPartDropIndicator, clearPartDropIndicator, findFlowInsertion } from "../utils/drop-target";
 import { debugLog } from '../utils/debug';
 import { useEditorComponents } from "../contexts/EditorComponentsContext";
@@ -937,6 +939,15 @@ export function EditorCanvas() {
           "[Canvas] Webpage mode: content height tracking initialized on artboard"
         );
       }
+      // 共同編集(io.collab)に「この文書は読み込みと初期化を終えた」と知らせる。
+      // 種まき・他人の変更の当て込みはここから(初期化の途中の姿で撒くと、人によって本文が食い違う)
+      if (io().collab) {
+        const readyContentId = currentContentIdRef.current ?? "";
+        iframeDoc.documentElement.setAttribute(COLLAB_DOCUMENT_READY_ATTR, readyContentId);
+        window.dispatchEvent(
+          new CustomEvent(COLLAB_DOCUMENT_READY_EVENT, { detail: { doc: iframeDoc, contentId: readyContentId || null } })
+        );
+      }
     });
 
     // 重要: クリーンアップ関数をrefに保存して、

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

@@ -52,6 +52,7 @@ import { CanvasRulers } from './CanvasRulers';
 import { CanvasFrameDecor } from './CanvasFrameDecor';
 import { cn } from '../../../lib/utils';
 import { ArrowUpRight } from 'lucide-react';
+import { CollabPageDots } from '../../collab/CollabPresence';
 
 /** フレーム名の高さ(px、画面上)。フレームの上端との間隔 */
 const LABEL_HEIGHT = 20;
@@ -168,6 +169,8 @@ const FrameChrome = memo(function FrameChrome({ page, showLabel, showLink, isSel
             <span className="ed-frame-label-index">{page.index + 1}</span>
             <span className="ed-frame-label-title">{page.title || page.id}</span>
             {page.isDirty && <span className="ed-frame-label-dirty" aria-label="未保存の変更" />}
+            {/* 共同編集: このページに居る参加者の色の点(io.collab が無ければ何も出ない) */}
+            <CollabPageDots contentId={page.id} />
             {isBusy && <span className="ed-frame-label-loading" aria-label="読み込み中" />}
           </button>
           {page.href && showLink && (

package/src/editor/components/ppt/PptComments.tsx

@@ -23,6 +23,7 @@ import { useDeck, applyDeck } from '../../../components/viewer/useDeck';
 import { commentAction, type SlideComment } from '../../../lib/deck';
 import { can, io, type CommentRect, type EditorDeck } from '../../../io';
 import { useResizablePanel } from '../../hooks/useResizablePanel';
+import { readStorage, writeStorage } from '../../utils/storage';
 import { ConfirmDialog } from '../shell/ConfirmDialog';
 import { PPT_PALETTES, type PptTheme } from './PptChrome';
 
@@ -155,18 +156,12 @@ export function findAnchored(root: HTMLElement, value: string, label?: string):
 }
 
 export function loadAuthor(): string {
-  try {
-    return localStorage.getItem(AUTHOR_KEY) || '';
-  } catch {
-    return '';
-  }
+  return readStorage(AUTHOR_KEY) || '';
 }
 
 /** 名前を記憶する。右パネルとコメントボードで同じ置き場を使う */
 export function storeAuthor(value: string): void {
-  try {
-    localStorage.setItem(AUTHOR_KEY, value);
-  } catch { /* 記憶できなくても続行 */ }
+  writeStorage(AUTHOR_KEY, value);
 }
 
 /** 未解決コメント数(サムネイルのバッジ用) */

package/src/editor/components/shell/EditorTopBar.tsx

@@ -27,6 +27,8 @@ import { useEditorContext } from '../../EditorContext';
 import { getCleanHtml } from '../../utils/html-utils';
 import { startExport, waitForExport, downloadExport, type ExportFormat } from '../../../lib/export';
 import { can } from '../../../io';
+import { CollabPresence, CollabStatusPill } from '../../collab/CollabPresence';
+import { useCollabSelector, selectCollabPageActive, flushCollab } from '../../collab/store';
 
 export type EditorSaveStatus = 'saved' | 'dirty' | 'saving' | 'error';
 
@@ -108,6 +110,7 @@ export function EditorTopBar({
   const pal = palette ?? FIGMA_PALETTE;
   const share = SHARE_COLOR[variant];
   const { getIframeDoc, html, saving, hasChanges } = useEditorContext();
+  const collabPageActive = useCollabSelector(selectCollabPageActive);
   const [exporting, setExporting] = useState<string | null>(null);
 
   /**
@@ -116,6 +119,13 @@ export function EditorTopBar({
    */
   const handleSave = async () => {
     try {
+      // 共同編集でそのページの部屋に入っている間は、ファイルへ書くのは書き戻し役。
+      // ここでは「まだ送っていない変更を今すぐ送る」だけにして、二重に書かせない
+      if (collabPageActive) {
+        flushCollab();
+        toast.success('同期済み', { description: '共同編集中の変更は、書き戻し役がファイルへ保存します' });
+        return;
+      }
       const doc = getIframeDoc();
       // 保存してもエディタは閉じない。保存は作業の中断ではない
       await onSave(doc ? getCleanHtml(doc) : html);
@@ -216,7 +226,9 @@ export function EditorTopBar({
       {/* 右: UI固有の操作 / 自動保存 / 保存 / プレビュー / 共有 / …/ 閉じる */}
       <div className="flex shrink-0 items-center gap-1.5">
         {rightExtra}
-        <SaveStatusPill variant={variant} status={saveStatus} pal={pal} />
+        <CollabPresence />
+        {/* 共同編集でページの部屋に入っている間は、保存の状態の代わりに接続状態を出す(ファイルに書くのは書き戻し役) */}
+        {collabPageActive ? <CollabStatusPill /> : <SaveStatusPill variant={variant} status={saveStatus} pal={pal} />}
         <button
           data-topbar="save"
           onClick={() => void handleSave()}

package/src/editor/components/shell/PagesPanel.tsx

@@ -17,6 +17,7 @@ import { useDeck } from '../../../components/viewer/useDeck';
 import { DeckSlideRender } from '../../../components/DeckSlideRender';
 import { flushAutoSave } from '../../autosave';
 import { useMultiPageCanvasOptional } from '../../contexts/MultiPageCanvasContext';
+import { CollabPageDots } from '../../collab/CollabPresence';
 
 /**
  * スライド描画はメモ化する。パネル幅の変更や他ページの選択で親が再レンダーしても、
@@ -120,6 +121,8 @@ export function PagesPanel({ page, height = '33vh' }: { page: number; height?: s
               )}
             </span>
             <span className="min-w-0 flex-1 self-center text-xs leading-relaxed">{s.title || "無題"}</span>
+            {/* 共同編集: このページに居る参加者の色の点(io.collab が無ければ何も出ない) */}
+            <span className="self-center"><CollabPageDots contentId={canvas?.pages[i]?.id ?? String(n)} /></span>
           </button>
         );
       })}

package/src/editor/contexts/EditorAppearanceContext.tsx

@@ -2,15 +2,15 @@
 
 import { createContext, useContext, useEffect, useState } from 'react';
 import type { PptTheme } from '../components/ppt/PptChrome';
+import { readStorage, writeStorage } from '../utils/storage';
 
 const THEME_KEY = 'gg-editor:ppt-theme';
 export const EditorAppearanceContext = createContext<PptTheme | undefined>(undefined);
 
 export function initialEditorTheme(): PptTheme {
-  try {
-    const saved = localStorage.getItem(THEME_KEY);
-    if (saved === 'light' || saved === 'dark') return saved;
-  } catch { /* ストレージが使えなくてもOS設定で開く */ }
+  // ストレージが使えなくても(共有ドロップの opaque origin など)OS 設定で開く
+  const saved = readStorage(THEME_KEY);
+  if (saved === 'light' || saved === 'dark') return saved;
   return typeof matchMedia !== 'undefined' && matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 
@@ -28,7 +28,7 @@ export function useEditorTheme() {
   }, []);
   const toggleTheme = () => {
     const next = theme === 'dark' ? 'light' : 'dark';
-    try { localStorage.setItem(THEME_KEY, next); } catch { /* 今回の表示には適用する */ }
+    writeStorage(THEME_KEY, next);
     setTheme(next);
   };
   return { theme, toggleTheme };

package/src/editor/contexts/EditorHistoryContext.tsx

@@ -91,6 +91,8 @@ const EDITOR_CHROME_SELECTOR = [
   '.flex-drop-indicator',
   '.nesting-drop-indicator',
   '.auto-layout-drop-indicator',
+  // 共同編集の他人の選択枠・カーソル(io.collab があるときだけ描かれる)
+  '.gg-collab-layer',
 ].join(',');
 
 /**

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';
 
 // ============================================================
 // 定数
@@ -220,6 +221,11 @@ export interface MultiPageCanvasContextValue {
   zoomToActual: () => void;
   /** 指定のフレームが画面に入っていなければ、見える位置まで寄せる(倍率は変えない) */
   revealPage: (id: string) => void;
+  /**
+   * そのページへ視点を寄せる。見えていなければ寄せ、点にしか見えない倍率ならページに合わせる
+   * (ホスト発のページ切替・共同編集のアバターのクリックで使う)
+   */
+  focusPage: (id: string) => void;
 
   // ---- ページ切替
   /**
@@ -504,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;
@@ -673,19 +679,15 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
 
   // 見えている範囲の保存(変化が止まってから)
   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);
@@ -1121,6 +1123,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
       zoomToPage,
       zoomToActual,
       revealPage,
+      focusPage,
       activatePage,
       activatingPageId,
       registerContainer,
@@ -1139,7 +1142,7 @@ export function MultiPageCanvasProvider({ children, enabled, storageKey }: Multi
     [
       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/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());
   // ドラッグ中の整列ガイド(表示専用)も保存しない