@growgroup/visual-editor 0.4.1 → 0.7.0

package/src/editor/FrontendVisualEditor.tsx

@@ -72,6 +72,20 @@ import { EditorToolbar } from './EditorToolbar';
 import { MultiPageCanvasView } from './components/multi-page';
 import { useMultiPageCanvasOptional } from './contexts/MultiPageCanvasContext';
 import { convertToAbsolutePositioning, buildDomTree, getArtboardContent, canUngroup, updateSelectionBox } from './utils/dom-utils';
+import {
+  enableFreeLayout,
+  disableFreeLayout,
+  enablePageFreeLayout,
+  disablePageFreeLayout,
+  isFreeLayoutContainer,
+  hasFreeLayout,
+  disableFreeLayoutTree,
+  FREELAYOUT_CLASS,
+  FREELAYOUT_HOLD_CLASS,
+  FREELAYOUT_ITEM_CLASS,
+} from './utils/free-layout';
+import { enableFreeLayoutTree, canEnableFreeLayoutTree, waitForFreeLayoutTreeReady } from './utils/free-layout-tree';
+import { ConfirmDialog } from './components/shell/ConfirmDialog';
 import { extractElementInfo } from './utils/style-utils';
 import { findTableCell, insertRow, insertColumn, deleteRow, deleteColumn } from './utils/table-edit';
 import { Loader2 } from 'lucide-react';
@@ -95,6 +109,9 @@ import { Button } from '../components/ui/button';
 import { cn } from '../lib/utils';
 import { clearPartDropIndicator } from './utils/drop-target';
 import { debugLog } from './utils/debug';
+import { readStorage, writeStorage } from './utils/storage';
+import { useCollab } from './collab/useCollab';
+import { readCollabSharedHtml, selectCollabPageActive, selectCollabUndo, selectCollabUnsynced, useCollabSelector } from './collab/store';
 
 /**
  * 自動保存のデバウンス(ms)。
@@ -322,6 +339,29 @@ function FrontendVisualEditorInner({
   const { getIdToken } = useAuth();
   const hasComponents = masterComponents.size > 0;
 
+  // リアルタイム共同編集(io.collab があるときだけ動く。無ければ何もしない)
+  const collab = useCollab({
+    contentId: currentContentId ?? contentId ?? null,
+    selectedIds: selectedElementIds.length > 0 ? selectedElementIds : selectedElement?.id ? [selectedElement.id] : [],
+  });
+  const collabRef = useRef(collab);
+  collabRef.current = collab;
+  // ページの部屋に入っている間: onSave の自動保存を呼ばず、取り消しは Y.UndoManager に切り替える
+  const collabPageActive = useCollabSelector(selectCollabPageActive);
+  const collabPageActiveRef = useRef(collabPageActive);
+  collabPageActiveRef.current = collabPageActive;
+  const collabUndoState = useCollabSelector(selectCollabUndo);
+  const effectiveUndo = useCallback(() => {
+    if (collabPageActiveRef.current) collabRef.current?.undo();
+    else undo();
+  }, [undo]);
+  const effectiveRedo = useCallback(() => {
+    if (collabPageActiveRef.current) collabRef.current?.redo();
+    else redo();
+  }, [redo]);
+  const effectiveCanUndo = collabPageActive ? collabUndoState.canUndo : canUndo;
+  const effectiveCanRedo = collabPageActive ? collabUndoState.canRedo : canRedo;
+
   // ドラッグ&ドロップ状態
   const [isDraggingOver, setIsDraggingOver] = useState(false);
   const dragCounterRef = useRef(0); // ドラッグイベントのカウンター（子要素の出入りを追跡）
@@ -354,14 +394,14 @@ function FrontendVisualEditorInner({
   const [isImportDialogOpen, setIsImportDialogOpen] = useState(false);
   // PowerPoint風UIとFigma風UIの切り替え(殻だけ。エンジンは共通)
   const [uiMode, setUiMode] = useState<'figma' | 'ppt'>(
-    () => (typeof localStorage !== 'undefined' && localStorage.getItem('gg-editor:ui-mode') === 'ppt' ? 'ppt' : 'figma'),
+    () => (readStorage('gg-editor:ui-mode') === 'ppt' ? 'ppt' : 'figma'),
   );
   const switchUi = (mode: 'figma' | 'ppt') => {
     // 殻を差し替えるだけで編集内容は残るが、どちらのUIから見ても同じ状態で始まるよう
     // 未保存があればここで保存しておく(切替の見た目は待たせない)
     void saveIfDirtyRef.current();
     setUiMode(mode);
-    try { localStorage.setItem('gg-editor:ui-mode', mode); } catch { /* 記憶できなくても動作は継続 */ }
+    writeStorage('gg-editor:ui-mode', mode);
   };
   // PowerPoint風UIのテーマ(OS設定に追従・切替は記憶)とサムネイル検索
   const { theme: pptTheme, toggleTheme: togglePptTheme } = useEditorTheme();
@@ -814,6 +854,12 @@ function FrontendVisualEditorInner({
    */
   const saveIfDirty = useCallback(async (): Promise<boolean> => {
     const state = saveStateRef.current;
+    // 共同編集でそのページの部屋に入っている間は、ファイルへ書くのは書き戻し役の仕事。
+    // ここで保存すると、書き戻し役の書いた内容と二重になる(まだ送っていない変更だけ送っておく)
+    if (collabPageActiveRef.current) {
+      collabRef.current?.flush();
+      return true;
+    }
     // ページ切替の途中(履歴の本文がまだ前のページ)は保存しない。
     // ここで送ると前のページの本文を次のページへ書いてしまう
     if (isContentSwitching()) return true;
@@ -884,7 +930,8 @@ function FrontendVisualEditorInner({
   }, [contentId]);
 
   // マルチフレームのキャンバス: フレーム名の「未保存」印と、見るだけの紙面の本文を同期する
-  const isDirtyForCanvas = hasChanges && canUndo;
+  // 共同編集中は保存の概念が書き戻し役へ移り、印が立ちっぱなしになるので出さない(代わりに接続状態を出す)
+  const isDirtyForCanvas = !collabPageActive && hasChanges && canUndo;
   useEffect(() => {
     if (!multiPageCanvas || !contentId) return;
     multiPageCanvas.updatePageFrame(contentId, { isDirty: isDirtyForCanvas });
@@ -895,16 +942,33 @@ function FrontendVisualEditorInner({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sourceHtml]);
 
-  /** 保存しきれていない状態でタブを閉じられたときだけ、ブラウザ既定の離脱警告を出す */
+  /**
+   * 保存しきれていない状態でタブを閉じられたときだけ、ブラウザ既定の離脱警告を出す。
+   * 共同編集中は「保存」ではなく「中継へ送れているか」を見る(未同期があれば警告する)
+   */
+  const collabUnsynced = useCollabSelector(selectCollabUnsynced);
+  const warnOnUnload = collabPageActive ? collabUnsynced : hasChanges;
   useEffect(() => {
-    if (!hasChanges) return;
+    if (!warnOnUnload) return;
     const onBeforeUnload = (e: BeforeUnloadEvent) => {
       e.preventDefault();
       e.returnValue = '';
     };
     window.addEventListener('beforeunload', onBeforeUnload);
     return () => window.removeEventListener('beforeunload', onBeforeUnload);
-  }, [hasChanges]);
+  }, [warnOnUnload]);
+
+  /** 共同編集中の未同期は、タブが隠れる・閉じる直前にもう一度送る(打鍵の 120ms 間引きが残っていることがある) */
+  useEffect(() => {
+    if (!collabPageActive) return;
+    const flush = () => collabRef.current?.flush();
+    window.addEventListener('pagehide', flush);
+    document.addEventListener('visibilitychange', flush);
+    return () => {
+      window.removeEventListener('pagehide', flush);
+      document.removeEventListener('visibilitychange', flush);
+    };
+  }, [collabPageActive]);
 
   /** 閉じる/一覧へ戻る。未保存は黙って保存してから離れ、失敗したときだけ確認する */
   const handleClose = useCallback(() => {
@@ -1088,6 +1152,146 @@ function FrontendVisualEditorInner({
     notifyIframeChange();
   }, [getIframeDoc, selectedElement?.id, notifyIframeChange]);
 
+  // ── 自由配置(webpage 専用) ──────────────────────────────
+  // 構成ラフは流し込みのまま保つのが既定で、ここだけが例外を作る入口。
+  // 「選んだ器の中だけ」と「ページの最上位セクション全部」の2段構えにして、
+  // 全体を倒す側には必ず確認ダイアログを挟む(高さが固定され、以後は
+  // 内容を足しても下へ押し出されなくなるため、取り返しの印象が強い)。
+  const isWebpage = editorMode === 'webpage';
+  const [pageFreeLayoutConfirm, setPageFreeLayoutConfirm] = useState<'on' | 'off' | null>(null);
+
+  /** 右クリック時点の選択要素を DOM から引く */
+  const selectedDomElement = useCallback((): HTMLElement | null => {
+    const doc = getIframeDoc();
+    if (!doc || !selectedElement?.id) return null;
+    return doc.querySelector<HTMLElement>(`[data-element-id="${selectedElement.id}"]`);
+  }, [getIframeDoc, selectedElement?.id]);
+
+  /**
+   * 変換のあとの後始末。
+   * notifyIframeChange が履歴の積み増しとレイヤーツリーの作り直しをやるので、
+   * ここでは選択枠だけを新しい位置へ合わせ直す(変換で矩形が変わるため)
+   */
+  const afterFreeLayoutChange = useCallback(
+    (doc: Document) => {
+      notifyIframeChange();
+      const el = selectedDomElement();
+      if (el) requestAnimationFrame(() => updateSelectionBox(doc, el));
+    },
+    [notifyIframeChange, selectedDomElement],
+  );
+
+  const handleFreeLayoutOn = useCallback(() => {
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    if (!doc || !el) return;
+    const n = enableFreeLayout(el, doc);
+    if (n === 0) {
+      toast.error('絶対配置にできませんでした(子が無いか、変換で位置がずれました)');
+      return;
+    }
+    afterFreeLayoutChange(doc);
+    toast.success(`${n}個の子を絶対配置にしました`);
+  }, [getIframeDoc, selectedDomElement, afterFreeLayoutChange]);
+
+  const handleFreeLayoutOff = useCallback(() => {
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    if (!doc || !el) return;
+    const n = disableFreeLayout(el, doc);
+    afterFreeLayoutChange(doc);
+    toast.success(`${n}個の子を流し込みに戻しました`);
+  }, [getIframeDoc, selectedDomElement, afterFreeLayoutChange]);
+
+  const handlePageFreeLayoutOn = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const { sections, elements } = enablePageFreeLayout(doc);
+    afterFreeLayoutChange(doc);
+    if (sections === 0) toast.error('自由配置にできるセクションがありませんでした');
+    else toast.success(`${sections}セクション・${elements}要素を自由配置にしました`);
+  }, [getIframeDoc, afterFreeLayoutChange]);
+
+  const handlePageFreeLayoutOff = useCallback(() => {
+    const doc = getIframeDoc();
+    if (!doc) return;
+    const { sections, elements } = disablePageFreeLayout(doc);
+    afterFreeLayoutChange(doc);
+    toast.success(`${sections}セクション・${elements}要素を流し込みに戻しました`);
+  }, [getIframeDoc, afterFreeLayoutChange]);
+
+  // ツリーの絶対配置: 選んだ要素から下の箱を入れ子まで全部倒す(free-layout-tree.ts)。
+  // 書体と画像の読み込みを待ってから測る。待っている間に共同編集の反映などで
+  // 要素が差し替わっていたら何もしない(古い要素を測っても意味がない)
+  const handleFreeLayoutTreeOn = useCallback(async () => {
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    if (!doc || !el) return;
+    await waitForFreeLayoutTreeReady(el, doc);
+    if (!el.isConnected) return;
+    const r = enableFreeLayoutTree(el, doc);
+    if (r.error) {
+      toast.error(r.error);
+      return;
+    }
+    if (r.items === 0) {
+      toast.error('絶対配置にできる箱がありませんでした(文字の流れ・表・部品のスロットの外は対象外です)');
+      return;
+    }
+    afterFreeLayoutChange(doc);
+    toast.success(`${r.items}個の要素を絶対配置にしました`);
+  }, [getIframeDoc, selectedDomElement, afterFreeLayoutChange]);
+
+  const handleFreeLayoutTreeOff = useCallback(() => {
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    if (!doc || !el) return;
+    const n = disableFreeLayoutTree(el, doc);
+    afterFreeLayoutChange(doc);
+    toast.success(`${n}個の要素を流し込みに戻しました`);
+  }, [getIframeDoc, selectedDomElement, afterFreeLayoutChange]);
+
+  /**
+   * 右クリックのメニューの「配置」の出し分け。メニューが開いている間の DOM を見て決める
+   * (ツリーの判定は木の computed style を読むので、メニューが開いていない再描画では回さない)。
+   *
+   * - 中に入れ子の器か、器の外で倒した要素がある … 「このツリーの絶対配置を解除する」
+   * - 自身が 1 段だけの器 … 「流し込みに戻す」(見えている順に並べ直す従来の解除)
+   * - どちらでもない … 「直下の子だけ絶対配置にする」
+   * - 倒せる箱が残っていれば、どの場合も「このツリーをすべて絶対配置にする」
+   *
+   * メニューが閉じている間は何もしない。選択の反映(ELEMENT_SELECTED)はメニューを開く合図より
+   * 1 テンポ遅れて届くことがあるので、選択が変わったら開いたまま決め直す
+   */
+  const freeLayoutMenu = useMemo(() => {
+    if (!isWebpage || !contextMenuPosition) return {};
+    const doc = getIframeDoc();
+    const el = selectedDomElement();
+    const container = !!el && isFreeLayoutContainer(el);
+    const treeInside =
+      !!el &&
+      (!!el.querySelector(`.${FREELAYOUT_CLASS}`) ||
+        (!container && !!el.querySelector(`.${FREELAYOUT_ITEM_CLASS}, .${FREELAYOUT_HOLD_CLASS}`)));
+    return {
+      onFreeLayoutTreeOn: el && doc && canEnableFreeLayoutTree(el, doc) ? handleFreeLayoutTreeOn : undefined,
+      onFreeLayoutTreeOff: el && treeInside ? handleFreeLayoutTreeOff : undefined,
+      onFreeLayoutOn: el && !container && !treeInside ? handleFreeLayoutOn : undefined,
+      onFreeLayoutOff: el && container && !treeInside ? handleFreeLayoutOff : undefined,
+      onPageFreeLayoutOn: () => setPageFreeLayoutConfirm('on'),
+      onPageFreeLayoutOff: () => setPageFreeLayoutConfirm('off'),
+      pageHasFreeLayout: !!doc && hasFreeLayout(doc),
+    };
+  }, [
+    isWebpage,
+    contextMenuPosition,
+    getIframeDoc,
+    selectedDomElement,
+    handleFreeLayoutTreeOn,
+    handleFreeLayoutTreeOff,
+    handleFreeLayoutOn,
+    handleFreeLayoutOff,
+  ]);
+
   // 右クリックハンドラ
   const handleContextMenu = useCallback((e: React.MouseEvent) => {
     e.preventDefault();
@@ -1928,11 +2132,11 @@ function FrontendVisualEditorInner({
     // undo/redo は常に生やす（履歴が無いときは内部で何もしない）。
     // 条件付きで undefined にするとブラウザ既定の取り消しが走ってしまう。
     undo: () => {
-      if (canUndo) undo();
+      if (effectiveCanUndo) effectiveUndo();
       restoreFocus();
     },
     redo: () => {
-      if (canRedo) redo();
+      if (effectiveCanRedo) effectiveRedo();
       restoreFocus();
     },
     delete: hasSelection ? deleteElement : undefined,
@@ -2020,10 +2224,10 @@ function FrontendVisualEditorInner({
         <>
           {(() => {
             const pptActions = {
-              undo,
-              redo,
-              canUndo,
-              canRedo,
+              undo: effectiveUndo,
+              redo: effectiveRedo,
+              canUndo: effectiveCanUndo,
+              canRedo: effectiveCanRedo,
               deleteElement: selectedElement ? deleteElement : undefined,
               duplicateElement: selectedElement ? duplicateElement : undefined,
               bringToFront: selectedElement ? bringToFront : undefined,
@@ -2218,10 +2422,10 @@ function FrontendVisualEditorInner({
           <EditorToolbar
             activeTool={activeTool}
             onToolChange={setActiveTool}
-            onUndo={undo}
-            onRedo={redo}
-            canUndo={canUndo}
-            canRedo={canRedo}
+            onUndo={effectiveUndo}
+            onRedo={effectiveRedo}
+            canUndo={effectiveCanUndo}
+            canRedo={effectiveCanRedo}
             selectedCount={selectedElementIds.length > 0 ? selectedElementIds.length : (selectedElement ? 1 : 0)}
             onGroup={selectedElementIds.length > 1 ? groupElements : undefined}
             onUngroup={selectedElement?.id && hasUngroupableChildren(selectedElement.id) ? ungroupElements : undefined}
@@ -2378,6 +2582,25 @@ function FrontendVisualEditorInner({
         onDetachInstance={handleDetachInstance}
         onResetOverrides={handleResetOverrides}
         onPushOverridesToMain={handlePushOverridesToMain}
+        {...freeLayoutMenu}
+      />
+
+      {/* ページ一括の自由配置。版面全体の性格が変わるので必ず確認を挟む */}
+      <ConfirmDialog
+        open={pageFreeLayoutConfirm !== null}
+        onOpenChange={(open) => { if (!open) setPageFreeLayoutConfirm(null); }}
+        title={pageFreeLayoutConfirm === 'off' ? 'ページを流し込みに戻しますか？' : 'このページを自由配置にしますか？'}
+        description={
+          pageFreeLayoutConfirm === 'off'
+            ? '自由配置にしたセクションをすべて流し込みに戻します。要素は今見えている位置の順に並び直り、絶対配置の座標は失われます。'
+            : 'ページの最上位セクションをすべて自由配置にします。セクションの高さが固定され、内容を足しても下に押し出されなくなります。'
+        }
+        confirmLabel={pageFreeLayoutConfirm === 'off' ? '流し込みに戻す' : '自由配置にする'}
+        onConfirm={() => {
+          if (pageFreeLayoutConfirm === 'off') handlePageFreeLayoutOff();
+          else handlePageFreeLayoutOn();
+          setPageFreeLayoutConfirm(null);
+        }}
       />
 
       {/* AI生成ポップオーバー */}
@@ -2862,7 +3085,11 @@ export function FrontendVisualEditor({
     try {
       let newHtml = '';
       let newLayoutMode: 'absolute' | 'auto' = 'auto';
-      if (loader) {
+      // 共同編集: そのページの部屋に本文があればそれが最新(書き戻し役がファイルへ書く前でも正しい姿で開く)
+      const shared = readCollabSharedHtml(newContentId);
+      if (shared != null) {
+        newHtml = shared;
+      } else if (loader) {
         newHtml = (await loader(newContentId)) ?? '';
       } else if (!canUseApi) {
         newHtml = listItem?.thumbnailHtml ?? '';

package/src/editor/collab/CollabPresence.tsx

@@ -0,0 +1,172 @@
+'use client';
+
+/**
+ * 共同編集の表示(ヘッダーの参加者・接続状態、フレーム名とページ一覧の色の点)。
+ * store.ts を購読するだけ。io.collab が無ければ何も描かない。
+ */
+
+import { useCallback } from 'react';
+import { AlertTriangle, CheckCircle2, CloudOff, Loader2, PauseCircle } from 'lucide-react';
+import { useEditorContext } from '../EditorContext';
+import { useMultiPageCanvasOptional } from '../contexts/MultiPageCanvasContext';
+import { useCollabSelector, type CollabSnapshot } from './store';
+import { initialOf } from './color';
+
+/** ヘッダーに並べるアバターの数(超えた分は +n) */
+const MAX_AVATARS = 5;
+
+const selectHeader = (s: CollabSnapshot) => ({
+  enabled: s.enabled,
+  ready: s.ready,
+  status: s.status,
+  roomError: s.roomError,
+  self: s.self,
+  peers: s.peers,
+  bridges: s.bridges,
+  requireBridge: s.requireBridge,
+});
+
+/** 参加者のアバターと書き戻し先の数。アバターのクリックでその人のページへ移る */
+export function CollabPresence() {
+  const s = useCollabSelector(selectHeader);
+  const canvas = useMultiPageCanvasOptional();
+  const { onContentChange, currentContentId, contentList } = useEditorContext();
+
+  const goTo = useCallback(
+    (id: string | null) => {
+      if (!id) return;
+      if (canvas) {
+        // 編集をそのページへ移し、視点も寄せる(activatePage 自体は「見えていれば動かさない」)
+        void canvas.activatePage(id).then((moved) => {
+          if (moved) canvas.focusPage(id);
+        });
+        return;
+      }
+      if (id !== currentContentId) void onContentChange?.(id);
+    },
+    [canvas, currentContentId, onContentChange],
+  );
+
+  if (!s.enabled || !s.self) return null;
+  // 部屋名が中継に保存されない形のときは、参加者ではなく理由を出す(繋いでいないので参加者は居ない)
+  if (s.status === 'error') {
+    return (
+      <div data-collab-presence className="ed-collab-presence">
+        <span
+          data-collab-room-error
+          data-collab-status="error"
+          role="alert"
+          className="ed-collab-bridge ed-collab-bridge-alert"
+          title={`部屋名が中継に保存されない形なので繋いでいません(${s.roomError ?? ''})。保存は今までどおりファイルへ行われます`}
+        >
+          <AlertTriangle aria-hidden="true" className="h-3.5 w-3.5" />
+          共同編集できません(部屋名)
+        </span>
+      </div>
+    );
+  }
+  const shown = s.peers.slice(0, MAX_AVATARS);
+  const more = s.peers.length - shown.length;
+  const pageTitle = (id: string | null) => (id ? contentList.find((c) => c.id === id)?.title : undefined);
+
+  return (
+    <div data-collab-presence className="ed-collab-presence">
+      {s.ready &&
+        (s.bridges > 0 ? (
+          <span data-collab-bridge={s.bridges} className="ed-collab-bridge" title="変更をファイルへ書き戻している dev サーバーの数">
+            書き戻し先 {s.bridges}
+          </span>
+        ) : s.requireBridge ? (
+          <span data-collab-bridge="0" role="alert" className="ed-collab-bridge ed-collab-bridge-alert">
+            <AlertTriangle aria-hidden="true" className="h-3.5 w-3.5" />
+            書き戻し先がありません。変更は保存されません
+          </span>
+        ) : (
+          <span data-collab-bridge="0" className="ed-collab-bridge ed-collab-bridge-warn" title="書き戻し役(dev サーバー)が居ないので、変更はファイルに書かれていません">
+            書き戻し先 0
+          </span>
+        ))}
+      <div className="ed-collab-avatars" aria-label="共同編集の参加者">
+        {shown.map((p) => {
+          const title = pageTitle(p.contentId);
+          return (
+            <button
+              key={p.user.id}
+              type="button"
+              data-collab-avatar={p.user.id}
+              data-collab-page={p.contentId ?? ''}
+              className="ed-collab-avatar"
+              style={{ backgroundColor: p.user.color }}
+              title={title ? `${p.user.name}: ${title}(クリックでこのページへ)` : p.user.name}
+              aria-label={`${p.user.name}${title ? `(${title})` : ''}のページへ移る`}
+              onClick={() => goTo(p.contentId)}
+            >
+              {initialOf(p.user.name)}
+            </button>
+          );
+        })}
+        {more > 0 && (
+          <span className="ed-collab-avatar ed-collab-avatar-more" title={s.peers.slice(MAX_AVATARS).map((p) => p.user.name).join('、')}>
+            +{more}
+          </span>
+        )}
+        <span data-collab-self className="ed-collab-avatar ed-collab-avatar-self" style={{ backgroundColor: s.self.color }} title={`${s.self.name}(自分)`}>
+          {initialOf(s.self.name)}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+const selectStatus = (s: CollabSnapshot) => ({ status: s.status, pending: s.pending, unsynced: s.unsynced, roomError: s.roomError });
+
+/** 接続状態(ページの部屋に入っている間、保存の状態の代わりに出す) */
+export function CollabStatusPill() {
+  const { status, pending, roomError } = useCollabSelector(selectStatus);
+  const view = status === 'error'
+    ? {
+        label: '共同編集できません',
+        Icon: AlertTriangle,
+        title: `部屋名が中継に保存されない形なので繋いでいません(${roomError ?? ''})。保存は今までどおりファイルへ行われます`,
+      }
+    : pending
+      ? { label: '反映待ち', Icon: PauseCircle, title: '入力中の要素に他の人の変更があります。入力を終えると反映します' }
+      : {
+          synced: { label: '同期済み', Icon: CheckCircle2, title: '変更は共同編集の中継に届いています' },
+          syncing: { label: '同期中…', Icon: Loader2, title: '変更を中継へ送っています' },
+          offline: { label: 'オフライン', Icon: CloudOff, title: '中継に繋がっていません。繋がると変更が送られます' },
+          error: { label: '共同編集できません', Icon: AlertTriangle, title: '部屋名が中継に保存されない形です' },
+        }[status];
+  return (
+    <span
+      data-topbar="save-status"
+      data-collab-status={status}
+      data-collab-pending={pending ? '1' : undefined}
+      role={status === 'error' ? 'alert' : 'status'}
+      aria-live="polite"
+      className="ed-save-status"
+      title={view.title}
+    >
+      <view.Icon aria-hidden="true" className={`h-4 w-4 ${status === 'syncing' && !pending ? 'animate-spin' : ''}`} />
+      {view.label}
+    </span>
+  );
+}
+
+/** フレーム名・ページ一覧に出す、そのページに居る参加者の色の点 */
+export function CollabPageDots({ contentId }: { contentId: string }) {
+  const select = useCallback(
+    (s: CollabSnapshot) =>
+      s.enabled ? s.peers.filter((p) => p.contentId === contentId).map((p) => ({ id: p.user.id, name: p.user.name, color: p.user.color })) : [],
+    [contentId],
+  );
+  const users = useCollabSelector(select);
+  if (users.length === 0) return null;
+  return (
+    <span className="ed-collab-dots" data-collab-dots={contentId} aria-label={`${users.map((u) => u.name).join('、')}が編集中`}>
+      {users.map((u) => (
+        <span key={u.id} className="ed-collab-dot" data-collab-dot={u.id} style={{ backgroundColor: u.color }} title={u.name} />
+      ))}
+    </span>
+  );
+}