@growgroup/visual-editor 0.4.0 → 0.6.0

package/src/editor/FrontendVisualEditor.tsx

@@ -95,6 +95,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 +325,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 +380,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();
@@ -374,6 +400,15 @@ function FrontendVisualEditorInner({
   useEffect(() => { if (pptCommentsOpen) setCommentsMounted(true); }, [pptCommentsOpen]);
   // PowerPoint風UIの右ペイン「図の書式設定」(影・反射・光彩・ぼかし)
   const [pptFormatPaneOpen, setPptFormatPaneOpen] = useState(false);
+  // コメントツール(C)にした時点で右のコメントパネルも開く。範囲を描き終えるまで開かないと、
+  // 書き込む先が見えないまま範囲を引くことになる。入口(ツールバー・校閲タブ・
+  // パネルの「範囲を指定」・キー C)はどれも activeTool を変えるだけなので、ここ 1 か所で拾う。
+  // ツールを抜けても閉じない(閉じるのは利用者の操作)。開いているときは state が同じ値で止まる
+  useEffect(() => {
+    if (activeTool !== 'comment' || !can('commentAction')) return;
+    setPptFormatPaneOpen(false);
+    setPptCommentsOpen(true);
+  }, [activeTool]);
   const [pptCommentFocus, setPptCommentFocus] = useState(0);
   const [pptActiveThread, setPptActiveThread] = useState<string | null>(null);
   // コメントツール(C)で指定した範囲の下書き。投稿・解除・Esc・ページ切替で消える
@@ -805,6 +840,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;
@@ -875,7 +916,8 @@ function FrontendVisualEditorInner({
   }, [contentId]);
 
   // マルチフレームのキャンバス: フレーム名の「未保存」印と、見るだけの紙面の本文を同期する
-  const isDirtyForCanvas = hasChanges && canUndo;
+  // 共同編集中は保存の概念が書き戻し役へ移り、印が立ちっぱなしになるので出さない(代わりに接続状態を出す)
+  const isDirtyForCanvas = !collabPageActive && hasChanges && canUndo;
   useEffect(() => {
     if (!multiPageCanvas || !contentId) return;
     multiPageCanvas.updatePageFrame(contentId, { isDirty: isDirtyForCanvas });
@@ -886,16 +928,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(() => {
@@ -1919,11 +1978,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,
@@ -2011,10 +2070,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,
@@ -2209,10 +2268,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}
@@ -2853,7 +2912,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>
+  );
+}

package/src/editor/collab/binding.ts

@@ -0,0 +1,269 @@
+/**
+ * ページの部屋の本文(Y.Text "html")と、編集中の紙面をつなぐ(取り決め §4)。
+ *
+ * - 種まき: 部屋と同期して本文が空なら、読み込み直後の姿を FNV-1a の clientID で 1 回だけ入れる
+ *   (同じ本文なら何人が同時に撒いても構造体の ID が同じになり、Yjs が重複を捨てる)
+ * - 自分の変更: 履歴の present が変わる・打鍵する(input)たびに 120ms 間引いて、
+ *   紙面(getCleanHtml → encode)と shadow の差分を 1 つの transaction で送る。同じなら送らない
+ * - 他人の変更: idiomorph で紙面に当て、履歴は段を作らずに追従させる。
+ *   打鍵中の要素に掛かる分は blur まで保留する。ドラッグ中は離すまで待つ
+ * - 取り消し: Y.UndoManager(自分の origin だけを追う)。結果は他人の変更と同じ経路で紙面に当てる
+ *
+ * shadow と差分の合わせ方は merge.ts を参照
+ */
+
+import * as Y from 'yjs';
+import { getCleanHtml } from '../utils/html-utils';
+import { refreshSelectionOverlay } from '../utils/dom-utils';
+import { fnv1a32 } from './color';
+import { morphArtboard } from './morph';
+import { replacementsOf, transformReplacements } from './merge';
+import type { Room } from './connection';
+
+/** 自分の変更を送る間隔(ms)。打鍵中も相手に 1 秒以内に見えるように */
+const SEND_THROTTLE_MS = 120;
+/** 他人の変更を当てるまでの待ち(ms)。続けて届いた更新を 1 回にまとめる */
+const APPLY_DELAY_MS = 16;
+/** 取り消しの 1 段にまとめる時間(ms) */
+const CAPTURE_TIMEOUT_MS = 500;
+/** ポインタを押している間は当てない。離した合図を取りこぼしてもこれ以上は待たない(ms) */
+const POINTER_HOLD_MAX_MS = 15000;
+
+export type BindingState = { pending: boolean; canUndo: boolean; canRedo: boolean; localPending: boolean };
+
+export type PageBindingOptions = {
+  room: Room;
+  doc: Document;
+  /** 読み込み直後の紙面の姿(encode 済み)。種まきに使う */
+  initialShared: string;
+  encode: (cleanHtml: string) => string;
+  decode: (shared: string) => string;
+  /** 他人の変更を当てた直後の #artboard.innerHTML(履歴の present を段を作らずに追従させる) */
+  onApplied: (artboardHtml: string) => void;
+  /** 自分の変更を送った(案件の部屋の pages の rev を進める) */
+  onLocalSent: () => void;
+  onState: (state: BindingState) => void;
+};
+
+export class PageBinding {
+  private readonly opts: PageBindingOptions;
+  private readonly origin = { collab: 'local' };
+  private readonly text: Y.Text;
+  private readonly undoManager: Y.UndoManager;
+  /** 最後に Y.Text と揃えたときの紙面の姿(encode 済み) */
+  private shadow: string;
+  /** 部屋と一度でも同期した(それまでは送らない・当てない) */
+  private synced = false;
+  private destroyed = false;
+  private sendTimer: ReturnType<typeof setTimeout> | null = null;
+  private applyTimer: ReturnType<typeof setTimeout> | null = null;
+  private pointerDownAt: number | null = null;
+  private applyAfterPointer = false;
+  private state: BindingState = { pending: false, canUndo: false, canRedo: false, localPending: false };
+  private readonly cleanups: (() => void)[] = [];
+
+  constructor(opts: PageBindingOptions) {
+    this.opts = opts;
+    this.text = opts.room.doc.getText('html');
+    this.shadow = opts.initialShared;
+    this.undoManager = new Y.UndoManager(this.text, {
+      trackedOrigins: new Set([this.origin]),
+      captureTimeout: CAPTURE_TIMEOUT_MS,
+    });
+    const onStack = () =>
+      this.setState({ canUndo: this.undoManager.undoStack.length > 0, canRedo: this.undoManager.redoStack.length > 0 });
+    this.undoManager.on('stack-item-added', onStack);
+    this.undoManager.on('stack-item-popped', onStack);
+    this.undoManager.on('stack-cleared', onStack);
+
+    this.text.observe(this.onTextChange);
+
+    const provider = opts.room.provider;
+    const onSynced = () => this.onSynced();
+    provider.on('synced', onSynced);
+    this.cleanups.push(() => provider.off('synced', onSynced));
+
+    const doc = opts.doc;
+    const onInput = () => this.scheduleSend();
+    // blur: 打鍵の分を送り、保留していた他人の変更を当てる(contenteditable が外れてから)
+    const onFocusOut = () => {
+      this.scheduleSend();
+      setTimeout(() => this.scheduleApply(), 30);
+    };
+    const onPointerDown = () => {
+      this.pointerDownAt = Date.now();
+    };
+    const onPointerUp = () => {
+      this.pointerDownAt = null;
+      if (this.applyAfterPointer) {
+        this.applyAfterPointer = false;
+        this.scheduleApply();
+      }
+    };
+    doc.addEventListener('input', onInput, true);
+    doc.addEventListener('focusout', onFocusOut, true);
+    doc.addEventListener('pointerdown', onPointerDown, true);
+    doc.addEventListener('pointerup', onPointerUp, true);
+    window.addEventListener('pointerup', onPointerUp, true);
+    this.cleanups.push(() => {
+      doc.removeEventListener('input', onInput, true);
+      doc.removeEventListener('focusout', onFocusOut, true);
+      doc.removeEventListener('pointerdown', onPointerDown, true);
+      doc.removeEventListener('pointerup', onPointerUp, true);
+      window.removeEventListener('pointerup', onPointerUp, true);
+    });
+
+    if (provider.synced) this.onSynced();
+  }
+
+  /** 自分の変更があったかもしれない(履歴の present が変わった・打鍵した)。間引いて送る */
+  scheduleSend(): void {
+    if (this.destroyed) return;
+    this.setState({ localPending: true });
+    if (this.sendTimer) return;
+    this.sendTimer = setTimeout(() => {
+      this.sendTimer = null;
+      this.flushLocal();
+    }, SEND_THROTTLE_MS);
+  }
+
+  /** まだ送っていない変更を今すぐ送る(ページ切替・保存ボタン・離脱の前) */
+  flush(): void {
+    if (this.sendTimer) {
+      clearTimeout(this.sendTimer);
+      this.sendTimer = null;
+    }
+    this.flushLocal();
+  }
+
+  undo(): void {
+    if (this.destroyed) return;
+    this.flush();
+    this.undoManager.undo();
+  }
+
+  redo(): void {
+    if (this.destroyed) return;
+    this.flush();
+    this.undoManager.redo();
+  }
+
+  /** 部屋の本文(decode 済み)。空なら null */
+  sharedHtml(): string | null {
+    const text = this.text.toString();
+    return text ? this.opts.decode(text) : null;
+  }
+
+  destroy(): void {
+    if (this.destroyed) return;
+    this.flush();
+    this.destroyed = true;
+    if (this.sendTimer) clearTimeout(this.sendTimer);
+    if (this.applyTimer) clearTimeout(this.applyTimer);
+    this.text.unobserve(this.onTextChange);
+    this.undoManager.destroy();
+    this.cleanups.forEach((fn) => fn());
+  }
+
+  // ------------------------------------------------------------
+
+  private readonly onTextChange = (_event: Y.YTextEvent, tx: Y.Transaction) => {
+    // 自分が送った変更は紙面に既にある。それ以外(他人・種まき・取り消し)は紙面へ当てる
+    if (tx.origin === this.origin) return;
+    this.scheduleApply();
+  };
+
+  private onSynced(): void {
+    if (this.destroyed || !this.opts.room.provider.synced) return;
+    if (!this.synced && this.text.length === 0 && this.opts.initialShared) this.seed(this.opts.initialShared);
+    this.synced = true;
+    this.flushLocal();
+    this.applyRemote();
+  }
+
+  /** 空の部屋に最初の本文を入れる(取り決め §4 の手順どおり) */
+  private seed(text: string): void {
+    const tmp = new Y.Doc();
+    tmp.clientID = fnv1a32(text) || 1;
+    tmp.getText('html').insert(0, text);
+    Y.applyUpdate(this.opts.room.doc, Y.encodeStateAsUpdate(tmp), 'seed');
+    tmp.destroy();
+  }
+
+  private flushLocal(): void {
+    if (this.destroyed) return;
+    // 部屋と揃う前は送らない(同期したときに、ここまでの変更をまとめて送る)
+    if (!this.synced) return;
+    const doc = this.opts.doc;
+    if (!doc.defaultView || !doc.getElementById('artboard')) {
+      this.setState({ localPending: false });
+      return;
+    }
+    const next = this.opts.encode(getCleanHtml(doc));
+    this.setState({ localPending: false });
+    if (next === this.shadow) return;
+    const current = this.text.toString();
+    const ops = transformReplacements(
+      replacementsOf(this.shadow, next),
+      current === this.shadow ? [] : replacementsOf(this.shadow, current),
+    );
+    this.shadow = next;
+    if (ops.length === 0) return;
+    this.opts.room.doc.transact(() => {
+      for (const op of ops) {
+        if (op.deleteCount > 0) this.text.delete(op.at, op.deleteCount);
+        if (op.insert) this.text.insert(op.at, op.insert);
+      }
+    }, this.origin);
+    this.opts.onLocalSent();
+  }
+
+  private scheduleApply(): void {
+    if (this.destroyed || this.applyTimer) return;
+    this.applyTimer = setTimeout(() => {
+      this.applyTimer = null;
+      this.applyRemote();
+    }, APPLY_DELAY_MS);
+  }
+
+  private applyRemote(): void {
+    if (this.destroyed || !this.synced) return;
+    // 掴んで動かしている最中に書き換えると、掴んでいる要素が入れ替わる。離してから当てる
+    if (this.pointerDownAt != null && Date.now() - this.pointerDownAt < POINTER_HOLD_MAX_MS) {
+      this.applyAfterPointer = true;
+      return;
+    }
+    const doc = this.opts.doc;
+    const artboard = doc.getElementById('artboard');
+    if (!doc.defaultView || !artboard) return;
+    // 自分のまだ送っていない変更を先に送る(当て込みで紙面から消さないため)
+    this.flush();
+    const shared = this.text.toString();
+    if (shared === this.shadow) {
+      this.setState({ pending: false });
+      return;
+    }
+    const hold = artboard.querySelector<HTMLElement>('[contenteditable="true"]');
+    const { heldChanged } = morphArtboard(artboard, this.opts.decode(shared), hold);
+    this.shadow = this.opts.encode(getCleanHtml(doc));
+    try {
+      refreshSelectionOverlay(doc);
+    } catch {
+      /* 選択枠が無い */
+    }
+    this.opts.onApplied(artboard.innerHTML);
+    this.setState({ pending: !!hold && heldChanged });
+  }
+
+  private setState(patch: Partial<BindingState>): void {
+    const next = { ...this.state, ...patch };
+    if (
+      next.pending === this.state.pending &&
+      next.canUndo === this.state.canUndo &&
+      next.canRedo === this.state.canRedo &&
+      next.localPending === this.state.localPending
+    ) return;
+    this.state = next;
+    this.opts.onState(next);
+  }
+}

package/src/editor/collab/color.ts

@@ -0,0 +1,28 @@
+/**
+ * 共同編集の小道具(依存なし)。種まきの clientID と参加者の色。
+ */
+
+/** FNV-1a 32bit。UTF-8 のバイト列に掛ける(取り決め §4 の種まきと同じ式) */
+export function fnv1a32(str: string): number {
+  const bytes = new TextEncoder().encode(str);
+  let h = 0x811c9dc5;
+  for (const b of bytes) {
+    h ^= b;
+    h = Math.imul(h, 0x01000193);
+  }
+  return h >>> 0;
+}
+
+/** 参加者の色。白い文字を載せても読める濃さの 8 色 */
+export const COLLAB_COLORS = ['#E5484D', '#E0661B', '#A77B00', '#2F9E5B', '#0E8F8A', '#1F7AE0', '#8B5CF6', '#D6409F'] as const;
+
+/** 本人が color を渡していなければ id の hash で決める(同じ人はどの画面でも同じ色) */
+export function colorFor(id: string, preferred?: string): string {
+  if (preferred) return preferred;
+  return COLLAB_COLORS[fnv1a32(id) % COLLAB_COLORS.length];
+}
+
+/** アバターの文字(名前の頭 1 文字) */
+export function initialOf(name: string): string {
+  return (name.trim() || '?').slice(0, 1).toUpperCase();
+}