@growgroup/visual-editor 0.4.0 → 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

@@ -38,8 +38,7 @@ import {
   useCanvasActivePageId,
   RULER_SIZE,
   FRAME_GAP,
-  PREVIEW_IMAGE_ZOOM,
-  PREVIEW_IMAGE_ZOOM_OUT,
+  PREVIEW_IMAGE_ZOOM_HYSTERESIS,
   type PageFrameLayout,
 } from '../../contexts/MultiPageCanvasContext';
 import { useEditorContext } from '../../EditorContext';
@@ -53,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;
@@ -169,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 && (
@@ -218,6 +220,8 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
     rulersVisible,
     isInteracting,
     initialViewRestored,
+    getPreviewImageZoomCap,
+    previewImageCapVersion,
   } = canvas;
   // 倍率・位置は購読しない(ホイール 1 段ごとにキャンバス全体が React を通ってしまう)。
   // 描画に要る「粗い倍率」だけを下の useLayoutEffect が間引いて渡す
@@ -280,7 +284,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
       // (CSS が拾う。属性 1 つの書き換えで 26 枚がいっぺんに切り替わり、React は通らない)。
       // iframe を外してメモリを返すのは操作が止まってから(下の imageMode)。
       // 外す向き(画像 → iframe)もここではやらない ── 止まってから 0.5 以上で判定する
-      if (el && z < PREVIEW_IMAGE_ZOOM_OUT && el.getAttribute('data-canvas-preview-image') !== '1') {
+      if (el && z < getPreviewImageZoomCap() * PREVIEW_IMAGE_ZOOM_HYSTERESIS && el.getAttribute('data-canvas-preview-image') !== '1') {
         el.setAttribute('data-canvas-preview-image', '1');
       }
       // 粗い倍率: 150ms に 1 回まで。末尾のタイマーで操作の終わりに必ず追いつく
@@ -295,7 +299,7 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
       unsubscribe();
       if (coarseTimer) clearTimeout(coarseTimer);
     };
-  }, [viewStore]);
+  }, [viewStore, getPreviewImageZoomCap]);
 
   // エディタの内側の倍率は 100% 固定(倍率は外側の transform が持つ)
   useEffect(() => {
@@ -366,21 +370,26 @@ export const MultiPageCanvasView = memo(function MultiPageCanvasView() {
   // ---- 紙面を画像に落とすか(大きく縮小している間だけ)
   // 判定は操作が止まってからしか動かさない。縮小の途中で 26 枚の iframe を差し替えると、
   // 軽くするための切替そのものが重いフレームを作る
-  const [imageMode, setImageMode] = useState(() => viewStore.get().canvasZoom < PREVIEW_IMAGE_ZOOM_OUT);
+  const [imageMode, setImageMode] = useState(
+    () => viewStore.get().canvasZoom < getPreviewImageZoomCap() * PREVIEW_IMAGE_ZOOM_HYSTERESIS,
+  );
   const imageModeRef = useRef(imageMode);
   imageModeRef.current = imageMode;
+  // previewImageCapVersion は「画像の解像度が分かって上限が動いた」きっかけ。
+  // 止まったまま画像が読み終わった場合でも、ここで判定をやり直す
   useEffect(() => {
     if (isInteracting) return;
     const timer = setTimeout(() => {
       const z = viewStore.get().canvasZoom;
-      // ヒステリシス: 画像 → iframe は 0.5 以上、iframe → 画像は 0.4 未満(境目で行き来しない)
-      const next = imageModeRef.current ? z < PREVIEW_IMAGE_ZOOM : z < PREVIEW_IMAGE_ZOOM_OUT;
+      const cap = getPreviewImageZoomCap();
+      // ヒステリシス: 画像 → iframe は上限以上、iframe → 画像は上限 × 0.8 未満(境目で行き来しない)
+      const next = imageModeRef.current ? z < cap : z < cap * PREVIEW_IMAGE_ZOOM_HYSTERESIS;
       if (next !== imageModeRef.current) setImageMode(next);
       // iframe に戻す向きに決まったら、縮小の途中で立てた掛け金も外す(iframe がまた見える)
       if (!next) containerRef.current?.removeAttribute('data-canvas-preview-image');
     }, PREVIEW_MODE_SETTLE_MS);
     return () => clearTimeout(timer);
-  }, [isInteracting, coarseZoom, viewStore]);
+  }, [isInteracting, coarseZoom, viewStore, getPreviewImageZoomCap, previewImageCapVersion]);
   // 画像を裏で先に読んでおくか(粗い倍率なので、段ごとには変わらない真偽値)
   const preloadImage = coarseZoom < PREVIEW_IMAGE_PRELOAD_ZOOM;
 

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

@@ -52,7 +52,7 @@ interface PageFramePreviewProps {
 }
 
 export const PageFramePreview = memo(function PageFramePreview({ page, rootRef, imageMode = false, preloadImage = false }: PageFramePreviewProps) {
-  const { editorMode, ensurePageHtml, setPageHeight, previewStyles, requestPreviewSlot, releasePreviewSlot, documentAttributes } = useMultiPageCanvas();
+  const { editorMode, ensurePageHtml, setPageHeight, previewStyles, requestPreviewSlot, releasePreviewSlot, documentAttributes, reportThumbnailWidth } = useMultiPageCanvas();
   const documentAttributesRef = useRef(documentAttributes);
   documentAttributesRef.current = documentAttributes;
   const hostRef = useRef<HTMLDivElement>(null);
@@ -228,6 +228,8 @@ export const PageFramePreview = memo(function PageFramePreview({ page, rootRef,
             const img = e.currentTarget;
             if (!img.naturalWidth || !img.naturalHeight) return;
             setPageHeight(page.id, (page.size.width * img.naturalHeight) / img.naturalWidth, 'preview');
+            // 画像を出してよい倍率の上限は、いちばん粗い画像に合わせて決まる(にじませないため)
+            reportThumbnailWidth(page.id, img.naturalWidth);
           }}
           onError={() => setImageFailed(true)}
         />

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(',');
 
 /**