@drawnagency/primitives 0.1.76 → 0.1.78

package/src/components/shell/MoveToFolderDialog.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+import { Folder, LayoutGrid } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { Button } from "../shared/Button";
+import type { MediaFolder } from "../../media/types";
+import { buildFolderTree, type FolderTreeNode } from "../../lib/media-folders";
+
+export interface MoveToFolderDialogProps {
+  folders: Record<string, MediaFolder>;
+  /** Targets to disable (moving a folder: its own descendant set). */
+  disabledIds?: Set<string>;
+  /**
+   * Target that is a no-op (the items' current folder), disabled too.
+   * Omit (undefined) when there is no single no-op target — e.g. a
+   * heterogeneous selection — and nothing is disabled on that account.
+   */
+  currentTarget?: string | null;
+  onMove: (targetFolderId: string | null) => void;
+  onClose: () => void;
+}
+
+/** Sentinel for "no pick yet" — distinct from picking root (null). */
+const UNPICKED = Symbol("unpicked");
+
+export function MoveToFolderDialog({
+  folders, disabledIds, currentTarget, onMove, onClose,
+}: MoveToFolderDialogProps) {
+  const [picked, setPicked] = useState<string | null | typeof UNPICKED>(UNPICKED);
+  const tree = buildFolderTree(folders);
+
+  const row = (target: string | null, label: string, depth: number, icon: React.ReactNode) => {
+    const disabled = target === currentTarget || (target !== null && disabledIds?.has(target) === true);
+    const active = picked !== UNPICKED && picked === target;
+    return (
+      <button
+        key={target ?? "__root__"}
+        type="button"
+        disabled={disabled}
+        onClick={() => setPicked(target)}
+        className={cn(
+          "flex w-full items-center gap-1.5 rounded px-2 py-1.5 text-left text-sm",
+          disabled ? "cursor-not-allowed text-base-contrast-light/50" : "cursor-pointer hover:bg-base-accent",
+          active && "bg-primary/10 font-medium text-primary",
+        )}
+        style={{ paddingLeft: `${8 + depth * 14}px` }}
+      >
+        {icon}
+        <span className="min-w-0 flex-1 truncate">{label}</span>
+      </button>
+    );
+  };
+
+  const renderNodes = (nodes: FolderTreeNode[], depth: number): React.ReactNode[] =>
+    nodes.flatMap((node) => [
+      row(node.id, node.name, depth, <Folder size={14} className="shrink-0 text-base-contrast-light" />),
+      ...renderNodes(node.children, depth + 1),
+    ]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="max-h-64 overflow-y-auto rounded-lg border border-base-200 p-1.5">
+        {row(null, "All media", 0, <LayoutGrid size={14} className="shrink-0 text-base-contrast-light" />)}
+        {renderNodes(tree, 0)}
+      </div>
+      <div className="flex justify-end gap-2">
+        <Button variant="secondary" size="sm" onClick={onClose}>Cancel</Button>
+        <Button
+          variant="primary"
+          size="sm"
+          disabled={picked === UNPICKED}
+          onClick={() => { if (picked !== UNPICKED) { onMove(picked); onClose(); } }}
+        >
+          Move
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/hooks/useCollabSession.ts

@@ -0,0 +1,220 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type {
+  CollabBootstrap, CollabPeer, CollabProvider, CollabSession, CollabStatus,
+  IndexUpdateMessage, SavedMessage, SectionUpdateMessage, TakeoverMessage,
+} from "../collab/types";
+
+const REJOIN_DELAYS_MS = [5_000, 15_000, 30_000, 60_000];
+
+export interface UseCollabSessionArgs {
+  provider: CollabProvider | null;
+  bootstrap: CollabBootstrap | null;
+  onRemoteSectionUpdate: (msg: SectionUpdateMessage) => void;
+  onRemoteIndexUpdate: (msg: IndexUpdateMessage) => void;
+  onRemoteSaved: (msg: SavedMessage) => void;
+  onTakenOver: (msg: TakeoverMessage) => void;
+}
+
+export interface UseCollabSessionResult {
+  status: CollabStatus;
+  peers: CollabPeer[];
+  locks: Map<string, CollabPeer>;
+  heldByMe: Set<string>;
+  requestEdit(sectionId: string): Promise<boolean>;
+  takeover(sectionId: string): Promise<boolean>;
+  setFocus(sectionId: string | null): void;
+  releaseAfterSave(sectionIds: string[]): void;
+  broadcastSectionUpdate(sectionId: string, content: unknown): void;
+  broadcastIndexUpdate(index: unknown): void;
+}
+
+export function useCollabSession(args: UseCollabSessionArgs): UseCollabSessionResult {
+  const { provider, bootstrap } = args;
+  const [status, setStatus] = useState<CollabStatus>(provider && bootstrap ? "connecting" : "offline");
+  const [peers, setPeers] = useState<CollabPeer[]>([]);
+  const [heldByMe, setHeldByMe] = useState<Set<string>>(new Set());
+  const sessionRef = useRef<CollabSession | null>(null);
+  const heldRef = useRef<Set<string>>(new Set());
+  useEffect(() => { heldRef.current = heldByMe; }, [heldByMe]);
+
+  // Stale-closure-proof callback refs: the channel subscription outlives renders.
+  const cbRef = useRef(args);
+  useEffect(() => { cbRef.current = args; });
+
+  // The connect effect keys on bootstrap's scalar identity fields (see the
+  // dependency-array note below), so its closure freezes the bootstrap object
+  // captured at mount. Rejoins must read the freshest object through this ref:
+  // a provider can rotate credentials riding along on the bootstrap blob
+  // without changing the identity fields, and reconnecting with the original
+  // (expired) blob would fail forever.
+  const bootstrapRef = useRef(bootstrap);
+  useEffect(() => { bootstrapRef.current = bootstrap; });
+
+  useEffect(() => {
+    if (!provider || !bootstrap) return;
+    let cancelled = false;
+    let attempt = 0;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    let joining = false;
+
+    async function join() {
+      // `joining` guards against concurrent joins: if a rejoin timer fires
+      // while another join is still awaiting connect, doing nothing is
+      // correct — the in-flight join will either succeed or schedule its own
+      // rejoin when it settles.
+      if (cancelled || joining) return;
+      const bs = bootstrapRef.current;
+      if (!bs) return;
+      joining = true;
+      setStatus("connecting");
+      let session: CollabSession | null = null;
+      try {
+        session = await provider!.connect(bs, {
+          onPeers: (p) => { if (!cancelled) setPeers(p); },
+          onSectionUpdate: (m) => { if (!cancelled) cbRef.current.onRemoteSectionUpdate(m); },
+          onIndexUpdate: (m) => { if (!cancelled) cbRef.current.onRemoteIndexUpdate(m); },
+          onSaved: (m) => { if (!cancelled) cbRef.current.onRemoteSaved(m); },
+          onTakeover: (m) => {
+            if (cancelled) return;
+            setHeldByMe((prev) => {
+              const next = new Set(prev);
+              next.delete(m.sectionId);
+              return next;
+            });
+            cbRef.current.onTakenOver(m);
+          },
+          onStatus: (s) => {
+            if (cancelled) return;
+            setStatus(s);
+            if (s === "offline") scheduleRejoin();
+          },
+        });
+      } catch (err) {
+        console.warn("Collab connect failed:", err);
+      }
+      joining = false;
+      if (cancelled) { void session?.disconnect().catch(() => {}); return; }
+      if (!session) { scheduleRejoin(); return; }
+      // A rejoin scheduled while this join was in flight (e.g. a spurious
+      // offline event during connect) is now moot — drop it.
+      if (timer) { clearTimeout(timer); timer = null; }
+      // Clear per-session lock state before installing the new session:
+      // scheduleRejoin's disconnect() released the old session's DB rows and
+      // presence, so any heldByMe carried over is a phantom hold. Without this,
+      // requestEdit would early-return true (heldRef hit) and never re-acquire
+      // the lock on the fresh session — broadcasting for sections we no longer
+      // hold. The shell's edit-intent path re-acquires naturally on next focus.
+      // Also drop any stale in-flight acquire dedup entries bound to the dead
+      // session.
+      setHeldByMe((prev) => (prev.size === 0 ? prev : new Set()));
+      heldRef.current = new Set();
+      pendingAcquiresRef.current.clear();
+      sessionRef.current = session;
+      attempt = 0;
+      setStatus("connected");
+    }
+
+    function scheduleRejoin() {
+      if (cancelled) return;
+      // Tear down the old session before rejoining: transient provider errors
+      // (e.g. Supabase CHANNEL_ERROR / TIMED_OUT) can emit "offline" without
+      // the underlying channel actually closing. Leaving that zombie
+      // subscription live would double presence — and double locks — once the
+      // rejoin lands a second session for the same user.
+      const old = sessionRef.current;
+      sessionRef.current = null;
+      if (old) void old.disconnect().catch(() => {});
+      setStatus("offline");
+      // Repeated offline events must not stack timers: two live timers would
+      // race two concurrent joins into two sessions, and the orphaned timer
+      // would survive unmount (the cleanup only clears the tracked one).
+      if (timer) clearTimeout(timer);
+      const delay = REJOIN_DELAYS_MS[Math.min(attempt, REJOIN_DELAYS_MS.length - 1)];
+      attempt += 1;
+      timer = setTimeout(() => { timer = null; void join(); }, delay);
+    }
+
+    void join();
+    return () => {
+      cancelled = true;
+      if (timer) clearTimeout(timer);
+      void sessionRef.current?.disconnect().catch(() => {});
+      sessionRef.current = null;
+    };
+    // Depend on bootstrap's identifying scalar fields rather than the object
+    // reference: callers commonly pass a freshly-literal bootstrap object on
+    // every render (e.g. derived from props/state), which would otherwise
+    // make this effect re-run — and thus reconnect — on every render even
+    // though the connection identity hasn't changed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [provider, bootstrap?.siteId, bootstrap?.userId, bootstrap?.email]);
+
+  const selfId = bootstrap?.userId ?? null;
+  const locks = useMemo(() => {
+    const map = new Map<string, CollabPeer>();
+    for (const peer of peers) {
+      if (peer.userId === selfId) continue;
+      for (const id of peer.heldSectionIds) map.set(id, peer);
+    }
+    return map;
+  }, [peers, selfId]);
+
+  // In-flight acquireLock RPCs by sectionId — two rapid requestEdit calls for
+  // the same section share one RPC instead of firing two.
+  const pendingAcquiresRef = useRef(new Map<string, Promise<boolean>>());
+
+  const requestEdit = useCallback(async (sectionId: string): Promise<boolean> => {
+    const session = sessionRef.current;
+    if (!session) return true; // solo mode
+    if (heldRef.current.has(sectionId)) return true;
+    // `locks` can lag live presence by one emission; a stale entry only ever
+    // false-denies here (by design) — the acquireLock RPC below stays the
+    // authoritative safety net, so a stale view never falsely grants.
+    if (locks.has(sectionId)) return false;
+    const pending = pendingAcquiresRef.current.get(sectionId);
+    if (pending) return pending;
+    const attempt = (async () => {
+      try {
+        const ok = await session.acquireLock(sectionId);
+        if (ok) setHeldByMe((prev) => new Set(prev).add(sectionId));
+        return ok;
+      } finally {
+        pendingAcquiresRef.current.delete(sectionId);
+      }
+    })();
+    pendingAcquiresRef.current.set(sectionId, attempt);
+    return attempt;
+  }, [locks]);
+
+  const takeover = useCallback(async (sectionId: string): Promise<boolean> => {
+    const session = sessionRef.current;
+    if (!session) return true;
+    const ok = await session.acquireLock(sectionId, { steal: true });
+    if (ok) setHeldByMe((prev) => new Set(prev).add(sectionId));
+    return ok;
+  }, []);
+
+  const releaseAfterSave = useCallback((sectionIds: string[]) => {
+    if (sectionIds.length === 0) return;
+    setHeldByMe((prev) => {
+      const next = new Set(prev);
+      for (const id of sectionIds) next.delete(id);
+      return next;
+    });
+    void sessionRef.current?.releaseLocks(sectionIds);
+  }, []);
+
+  const setFocus = useCallback((sectionId: string | null) => {
+    sessionRef.current?.setFocus(sectionId);
+  }, []);
+
+  const broadcastSectionUpdate = useCallback((sectionId: string, content: unknown) => {
+    sessionRef.current?.broadcastSectionUpdate(sectionId, content);
+  }, []);
+
+  const broadcastIndexUpdate = useCallback((index: unknown) => {
+    sessionRef.current?.broadcastIndexUpdate(index);
+  }, []);
+
+  return { status, peers, locks, heldByMe, requestEdit, takeover, setFocus, releaseAfterSave, broadcastSectionUpdate, broadcastIndexUpdate };
+}

package/src/hooks/useEditorPersistence.ts

@@ -7,15 +7,51 @@ interface PersistenceState {
   pendingSections: Map<string, SectionContent>;
   indexDirty: boolean;
   configDirty: boolean;
+  // Durable "unsaved index structure exists" signal. Unlike indexDirty — which is
+  // flush-PENDING state and self-clears ~500ms after an edit — this mirrors the
+  // lifetime of the Dexie siteIndex row: set on every structural edit, NOT
+  // cleared by the flush, cleared only when the shell says the structure was
+  // committed or discarded. The collaboration layer reads it as "this editor has
+  // structural work a remote index must not clobber".
+  unsavedIndex: boolean;
+  // Monotonic edit-generation counter, bumped on every markSectionDirty /
+  // markIndexDirty / removeSection. A save captures the generation at save
+  // begin (its "token"); the post-save clears are token-guarded so edits made
+  // WHILE the save was in flight (generation > token — the save never carried
+  // them) survive every clear. This mirrors discardSavedChanges' updatedAt
+  // compare-and-clear semantic for the Dexie rows, but for the in-memory state.
+  generation: number;
+  // Generation of the most recent structural (index) edit.
+  indexGeneration: number;
+  // Per-section generation of the most recent content edit.
+  sectionGenerations: Map<string, number>;
 }
 
-export function useEditorPersistence(siteIndexRef: React.RefObject<SiteIndex>) {
+interface PersistenceOptions {
+  /** Broadcast piggyback: called after a successful debounced flush with exactly
+   *  what was persisted — the flushed section entries and whether the index was
+   *  part of this flush. The collaboration layer forwards held-lock section
+   *  updates + index updates to peers from here. Stored in a ref so its identity
+   *  can churn without recreating the debounce machinery. */
+  onFlush?: (entries: { sectionId: string; content: SectionContent }[], indexFlushed: boolean) => void;
+}
+
+export function useEditorPersistence(
+  siteIndexRef: React.RefObject<SiteIndex>,
+  options?: PersistenceOptions,
+) {
   const state = useRef<PersistenceState>({
     pendingSections: new Map(),
     indexDirty: false,
     configDirty: false,
+    unsavedIndex: false,
+    generation: 0,
+    indexGeneration: 0,
+    sectionGenerations: new Map(),
   });
   const flushTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const onFlushRef = useRef(options?.onFlush);
+  useEffect(() => { onFlushRef.current = options?.onFlush; });
 
   const flushToDexie = useCallback(async () => {
     const s = state.current;
@@ -36,6 +72,9 @@ export function useEditorPersistence(siteIndexRef: React.RefObject<SiteIndex>) {
         entries,
         wasIndexDirty ? siteIndexRef.current : undefined,
       );
+      // Fire only after a successful persist — broadcasting an edit that failed
+      // to persist would let peers diverge from what this editor can recover.
+      onFlushRef.current?.(entries, wasIndexDirty);
     } catch (err) {
       // Restore: merge back any entries that weren't re-dirtied during the await
       for (const { sectionId, content } of entries) {
@@ -89,6 +128,7 @@ export function useEditorPersistence(siteIndexRef: React.RefObject<SiteIndex>) {
   const markSectionDirty = useCallback(
     (sectionId: string, content: SectionContent) => {
       state.current.pendingSections.set(sectionId, content);
+      state.current.sectionGenerations.set(sectionId, ++state.current.generation);
       scheduleFlush();
     },
     [scheduleFlush],
@@ -96,6 +136,8 @@ export function useEditorPersistence(siteIndexRef: React.RefObject<SiteIndex>) {
 
   const markIndexDirty = useCallback(() => {
     state.current.indexDirty = true;
+    state.current.unsavedIndex = true;
+    state.current.indexGeneration = ++state.current.generation;
     scheduleFlush();
   }, [scheduleFlush]);
 
@@ -106,12 +148,32 @@ export function useEditorPersistence(siteIndexRef: React.RefObject<SiteIndex>) {
   const removeSection = useCallback((sectionId: string) => {
     state.current.pendingSections.delete(sectionId);
     state.current.indexDirty = true;
+    state.current.unsavedIndex = true;
+    state.current.indexGeneration = ++state.current.generation;
+    state.current.sectionGenerations.delete(sectionId);
     deleteSectionRows([sectionId]).catch((err) => {
       console.error("Failed to delete section row from Dexie:", err);
     });
     scheduleFlush();
   }, [scheduleFlush]);
 
+  // Drop a pending in-memory edit WITHOUT touching the index or the Dexie row.
+  // Used when another editor takes over a section: the victim's un-flushed
+  // keystroke must not re-persist on the next flush (removeSection is wrong for
+  // this — it also dirties the index, which would broadcast/persist a structural
+  // "change" that never happened). The caller deletes the Dexie row separately.
+  const dropPendingSection = useCallback((sectionId: string) => {
+    state.current.pendingSections.delete(sectionId);
+    // The edit is discarded entirely — its generation record goes with it.
+    state.current.sectionGenerations.delete(sectionId);
+  }, []);
+
+  // Whether a section has an un-flushed in-memory edit (pending Dexie write).
+  const hasPendingSection = useCallback(
+    (sectionId: string) => state.current.pendingSections.has(sectionId),
+    [],
+  );
+
   const persistConfig = useCallback(async (config: SiteConfig) => {
     state.current.configDirty = true;
     await persistSiteConfig(config);
@@ -126,15 +188,56 @@ export function useEditorPersistence(siteIndexRef: React.RefObject<SiteIndex>) {
 
   const isConfigDirty = useCallback(() => state.current.configDirty, []);
   const clearConfigDirty = useCallback(() => { state.current.configDirty = false; }, []);
+  // Reflects whether an index change is pending flush to Dexie. NOTE: this is
+  // flush-window state only (clears ~500ms after the edit) — collaboration
+  // guards must use hasUnsavedIndex() instead, which tracks unsaved structure
+  // durably until save/discard.
+  const isIndexDirty = useCallback(() => state.current.indexDirty, []);
+
+  // Durable unsaved-structure signal (see PersistenceState.unsavedIndex).
+  // - hasUnsavedIndex: the collab guard for both the inbound index-update apply
+  //   and the saved-event rebase's localIndexDirty input.
+  // - clearUnsavedIndex: shell calls it exactly where saved/discarded index
+  //   state is cleared (save success, discard). When a generation token is
+  //   passed (save success), the clear NO-OPS if any structural edit happened
+  //   AFTER the token — that edit was made mid-save and the save never carried
+  //   it. Tokenless (discard) clears unconditionally.
+  // - noteUnsavedIndex: shell calls it on the restore path — a Dexie siteIndex
+  //   row restored at load IS unsaved structural work, even though no
+  //   markIndexDirty ran this session.
+  const hasUnsavedIndex = useCallback(() => state.current.unsavedIndex, []);
+  const clearUnsavedIndex = useCallback((upToGeneration?: number) => {
+    if (upToGeneration !== undefined && state.current.indexGeneration > upToGeneration) return;
+    state.current.unsavedIndex = false;
+  }, []);
+  const noteUnsavedIndex = useCallback(() => { state.current.unsavedIndex = true; }, []);
+
+  // The save-begin capture point for the generation guard.
+  const currentGeneration = useCallback(() => state.current.generation, []);
+  // Whether a section was (re-)dirtied after the given token — i.e. carries an
+  // edit the save that captured the token never sent.
+  const sectionDirtiedAfter = useCallback(
+    (sectionId: string, generation: number) =>
+      (state.current.sectionGenerations.get(sectionId) ?? 0) > generation,
+    [],
+  );
 
   return {
     markSectionDirty,
     markIndexDirty,
     removeSection,
+    dropPendingSection,
+    hasPendingSection,
     persistConfig,
     flushNow: flushToDexie,
     cancelPendingFlush,
     isConfigDirty,
     clearConfigDirty,
+    isIndexDirty,
+    hasUnsavedIndex,
+    clearUnsavedIndex,
+    noteUnsavedIndex,
+    currentGeneration,
+    sectionDirtiedAfter,
   };
 }