react-embed-docs 0.1.0

package/dist/client/components/Sidebar.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { Plus } from 'lucide-react';
+import { useCallback, useMemo, useState } from 'react';
+import { useReorderDocumentMutation } from '../hooks/useDocsQuery';
+import { useDocument } from './DocumentProvider';
+import { DragOverlayItem } from './DragOverlayItem';
+import { SortableTreeItem } from './SortableTreeItem';
+export function Sidebar({ isOpen, onToggle, documents, currentDocId }) {
+    const { onCreate, onOpen } = useDocument();
+    const [expandedFolders, setExpandedFolders] = useState(new Set());
+    const [activeId, setActiveId] = useState(null);
+    const [dropIndicator, setDropIndicator] = useState(null);
+    const reorderMutation = useReorderDocumentMutation();
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 8,
+        },
+    }), useSensor(KeyboardSensor));
+    const toggleFolder = useCallback((folderId) => {
+        setExpandedFolders((prev) => {
+            const newExpanded = new Set(prev);
+            if (newExpanded.has(folderId)) {
+                newExpanded.delete(folderId);
+            }
+            else {
+                newExpanded.add(folderId);
+            }
+            return newExpanded;
+        });
+    }, []);
+    // Resolve currentDocId (which might be a slug) to actual document ID
+    const resolvedCurrentDocId = useMemo(() => {
+        if (!currentDocId || documents.length === 0)
+            return null;
+        const byId = documents.find((d) => d.id === currentDocId);
+        if (byId)
+            return byId.id;
+        const bySlug = documents.find((d) => d.slug === currentDocId);
+        if (bySlug)
+            return bySlug.id;
+        return null;
+    }, [currentDocId, documents]);
+    // Build flattened tree for sortable context
+    const flattenedTree = useMemo(() => {
+        const items = [];
+        const processed = new Set();
+        const processDoc = (doc, depth, slug) => {
+            if (processed.has(doc.id))
+                return;
+            processed.add(doc.id);
+            const children = documents.filter((d) => d.parentId === doc.id);
+            const hasChildren = children.length > 0;
+            const treeSlug = `${slug}/${doc.slug}`;
+            items.push({ ...doc, depth, hasChildren, slug: treeSlug });
+            if (hasChildren && expandedFolders.has(doc.id)) {
+                children
+                    .sort((a, b) => a.order - b.order)
+                    .forEach((child) => processDoc(child, depth + 1, treeSlug));
+            }
+        };
+        documents
+            .filter((d) => !d.parentId)
+            .sort((a, b) => a.order - b.order)
+            .forEach((doc) => processDoc(doc, 0, ''));
+        return items;
+    }, [documents, expandedFolders]);
+    const dropAnimation = null;
+    const handleDragStart = useCallback((event) => {
+        setActiveId(event.active.id);
+    }, []);
+    const getChildren = useCallback((parentId) => documents.filter((d) => d.parentId === parentId), [documents]);
+    const activeDoc = useMemo(() => {
+        if (!activeId)
+            return null;
+        const doc = documents.find((d) => d.id === activeId);
+        if (!doc)
+            return null;
+        const children = getChildren(doc.id);
+        return { ...doc, depth: 0, hasChildren: children.length > 0 };
+    }, [activeId, documents, getChildren]);
+    const handleDragOver = useCallback((event) => {
+        const { over, active } = event;
+        if (!over || active.id === over.id) {
+            setDropIndicator(null);
+            return;
+        }
+        const activeIndex = flattenedTree.findIndex((item) => item.id === active.id);
+        const overIndex = flattenedTree.findIndex((item) => item.id === over.id);
+        if (activeIndex === -1 || overIndex === -1) {
+            setDropIndicator(null);
+            return;
+        }
+        const position = activeIndex < overIndex ? 'after' : 'before';
+        setDropIndicator({ id: over.id, position });
+    }, [flattenedTree]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        setActiveId(null);
+        setDropIndicator(null);
+        if (!over)
+            return;
+        const draggedId = active.id;
+        const overId = over.id;
+        if (draggedId === overId)
+            return;
+        const activeDoc = documents.find((d) => d.id === draggedId);
+        const overDoc = documents.find((d) => d.id === overId);
+        if (!activeDoc || !overDoc)
+            return;
+        let newParentId = null;
+        let newOrder = 0;
+        const activeIndex = flattenedTree.findIndex((item) => item.id === draggedId);
+        const overIndex = flattenedTree.findIndex((item) => item.id === overId);
+        if (activeIndex === -1 || overIndex === -1)
+            return;
+        const overSiblings = documents
+            .filter((d) => d.parentId === overDoc.parentId && d.id !== draggedId)
+            .sort((a, b) => a.order - b.order);
+        const overPosition = overSiblings.findIndex((s) => s.id === overId);
+        if (activeIndex < overIndex) {
+            newParentId = overDoc.parentId || null;
+            const nextSibling = overSiblings[overPosition + 1];
+            if (nextSibling) {
+                newOrder = (overDoc.order + nextSibling.order) / 2;
+            }
+            else {
+                newOrder = overDoc.order + 10;
+            }
+        }
+        else {
+            newParentId = overDoc.parentId || null;
+            const prevSibling = overSiblings[overPosition - 1];
+            if (prevSibling) {
+                newOrder = (prevSibling.order + overDoc.order) / 2;
+            }
+            else {
+                newOrder = overDoc.order - 10;
+            }
+        }
+        const overHasChildren = getChildren(overId).length > 0;
+        if (overHasChildren &&
+            activeIndex > overIndex &&
+            overDoc.parentId !== activeDoc.parentId) {
+            newParentId = overId;
+            newOrder = 0;
+        }
+        const isChildOfActive = (docId) => {
+            const doc = documents.find((d) => d.id === docId);
+            if (!doc)
+                return false;
+            if (doc.parentId === draggedId)
+                return true;
+            if (doc.parentId)
+                return isChildOfActive(doc.parentId);
+            return false;
+        };
+        if (isChildOfActive(overId))
+            return;
+        reorderMutation.mutate({
+            id: draggedId,
+            parentId: newParentId,
+            order: newOrder,
+        });
+    }, [documents, flattenedTree, getChildren, reorderMutation]);
+    const handleDragCancel = useCallback(() => {
+        setActiveId(null);
+        setDropIndicator(null);
+    }, []);
+    return (_jsxs("aside", { className: [
+            'border-r border-border flex flex-col transition-all duration-200 ease-in-out overflow-hidden',
+            isOpen ? 'w-64 opacity-100' : 'w-0 opacity-0',
+        ].join(' '), children: [_jsx("div", { className: "p-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "font-semibold text-sm text-muted-foreground", children: "Documents" }), _jsx("button", { className: "p-2 hover:bg-primary rounded-md transition-colors cursor-pointer", onClick: onCreate, children: _jsx(Plus, { className: "h-4 w-4" }) })] }) }), _jsxs("div", { className: "flex-1 overflow-y-auto p-2 space-y-1 relative", children: [_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: [flattenedTree
+                                // .filter((doc) => doc.id !== activeId)
+                                .map((doc) => (_jsx(SortableTreeItem, { id: doc.id, doc: doc, isExpanded: expandedFolders.has(doc.id), isCurrent: doc.id === resolvedCurrentDocId, dropIndicator: dropIndicator?.id === doc.id ? dropIndicator.position : null, onToggle: toggleFolder, onOpen: onOpen }, doc.id))), _jsx(DragOverlay, { dropAnimation: dropAnimation, children: activeDoc ? _jsx(DragOverlayItem, { doc: activeDoc }) : null })] }), documents.length === 0 && (_jsx("div", { className: "text-sm text-gray-500 text-center py-4", children: "No documents yet" }))] })] }));
+}

package/dist/client/components/SortableTreeItem.d.ts

@@ -0,0 +1,13 @@
+import { FlattenedItem } from '../../shared/types';
+interface SortableTreeItemProps {
+    id: string;
+    doc: FlattenedItem;
+    isExpanded: boolean;
+    isCurrent: boolean;
+    dropIndicator: 'before' | 'after' | null;
+    onToggle: (id: string) => void;
+    onOpen: (path: string) => void;
+}
+export declare function SortableTreeItem({ id, doc, isExpanded, isCurrent, dropIndicator, onToggle, onOpen, }: SortableTreeItemProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SortableTreeItem.d.ts.map

package/dist/client/components/SortableTreeItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTreeItem.d.ts","sourceRoot":"","sources":["../../../src/client/components/SortableTreeItem.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAElD,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,aAAa,CAAA;IAClB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,QAAQ,GAAG,OAAO,GAAG,IAAI,CAAA;IACxC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,GAAG,EACH,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,MAAM,GACP,EAAE,qBAAqB,2CA8EvB"}

package/dist/client/components/SortableTreeItem.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+import { ChevronDownIcon, ChevronRightIcon, FileTextIcon, FolderIcon, FolderOpenIcon, } from 'lucide-react';
+import { useCallback } from 'react';
+export function SortableTreeItem({ id, doc, isExpanded, isCurrent, dropIndicator, onToggle, onOpen, }) {
+    const { attributes, listeners, setNodeRef: setDraggableRef, isDragging, } = useDraggable({ id });
+    const { setNodeRef: setDroppableRef } = useDroppable({ id });
+    const setNodeRef = useCallback((node) => {
+        setDraggableRef(node);
+        setDroppableRef(node);
+    }, [setDraggableRef, setDroppableRef]);
+    const style = {
+        opacity: isDragging ? 0.5 : 1,
+        paddingLeft: doc.depth * 12 + 8,
+        touchAction: 'none',
+    };
+    return (_jsxs("div", { className: "relative", children: [dropIndicator === 'before' && (_jsx("div", { className: "absolute top-0 left-2 right-2 h-0.5 bg-blue-500 rounded-full z-10" })), _jsxs("div", { ref: setNodeRef, style: style, ...attributes, ...listeners, onClick: () => onOpen(doc.slug), className: [
+                    'flex items-center gap-1 w-full px-2 py-1.5 text-sm rounded-md transition-colors select-none cursor-pointer',
+                    isCurrent ? 'font-bold bg-accent/50' : 'hover:bg-accent/30',
+                ].join(' '), children: [doc.hasChildren ? (_jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            onToggle(doc.id);
+                        }, className: "p-0.5 hover:bg-gray-200/50 dark:hover:bg-gray-700/50 rounded shrink-0 cursor-pointer", children: isExpanded ? (_jsx(ChevronDownIcon, { className: "h-4 w-4" })) : (_jsx(ChevronRightIcon, { className: "h-4 w-4" })) })) : (_jsx("div", { className: "w-5" })), _jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [doc.emoji ? (_jsx("span", { className: "text-base shrink-0", children: doc.emoji })) : doc.hasChildren ? (isExpanded ? (_jsx(FolderOpenIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" })) : (_jsx(FolderIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }))) : (_jsx(FileTextIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground" })), _jsx("span", { className: "truncate flex-1", children: doc.title })] })] }), dropIndicator === 'after' && (_jsx("div", { className: "absolute bottom-0 left-2 right-2 h-0.5 bg-blue-500 rounded-full z-10" }))] }));
+}

package/dist/client/components/VersionHistory.d.ts

@@ -0,0 +1,14 @@
+export interface VersionHistoryProps {
+    documentId: string;
+    documentTitle: string;
+    baseUrl?: string;
+    onRestore?: () => void;
+    userName?: string;
+    userId?: string;
+}
+/**
+ * Component for viewing and managing document version history
+ */
+export declare function VersionHistory({ documentId, documentTitle, baseUrl, onRestore, userName, userId, }: VersionHistoryProps): import("react/jsx-runtime").JSX.Element;
+export default VersionHistory;
+//# sourceMappingURL=VersionHistory.d.ts.map

package/dist/client/components/VersionHistory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VersionHistory.d.ts","sourceRoot":"","sources":["../../../src/client/components/VersionHistory.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,aAAa,EACb,OAAgB,EAChB,SAAS,EACT,QAAsB,EACtB,MAAM,GACP,EAAE,mBAAmB,2CAsQrB;AAED,eAAe,cAAc,CAAA"}

package/dist/client/components/VersionHistory.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { History, RotateCcw, Trash2, GitCompare, Clock, User, MessageSquare, } from 'lucide-react';
+import { useDocumentVersionsQuery, useCreateVersionMutation, useRestoreVersionMutation, useDeleteVersionMutation, } from '../hooks/useVersions.js';
+/**
+ * Component for viewing and managing document version history
+ */
+export function VersionHistory({ documentId, documentTitle, baseUrl = '/api', onRestore, userName = 'Anonymous', userId, }) {
+    const { data, isLoading, error } = useDocumentVersionsQuery(documentId, baseUrl);
+    const createVersionMutation = useCreateVersionMutation(baseUrl);
+    const restoreMutation = useRestoreVersionMutation(baseUrl);
+    const deleteMutation = useDeleteVersionMutation(baseUrl);
+    const [selectedVersions, setSelectedVersions] = useState([]);
+    const [showCreateDialog, setShowCreateDialog] = useState(false);
+    const [versionDescription, setVersionDescription] = useState('');
+    const [restoringVersion, setRestoringVersion] = useState(null);
+    const versions = data?.items || [];
+    const handleCreateVersion = async () => {
+        try {
+            await createVersionMutation.mutateAsync({
+                documentId,
+                data: {
+                    description: versionDescription || `Version created by ${userName}`,
+                    createdBy: userId,
+                    createdByName: userName,
+                },
+            });
+            setShowCreateDialog(false);
+            setVersionDescription('');
+        }
+        catch (error) {
+            alert('Failed to create version');
+        }
+    };
+    const handleRestore = async (version) => {
+        if (!confirm(`Restore "${documentTitle}" to version ${version.versionNumber}?\n\nCurrent state will be saved as a backup.`)) {
+            return;
+        }
+        setRestoringVersion(version.id);
+        try {
+            await restoreMutation.mutateAsync({
+                documentId,
+                versionId: version.id,
+                data: {
+                    restoredBy: userId,
+                    restoredByName: userName,
+                },
+            });
+            onRestore?.();
+            alert(`Restored to version ${version.versionNumber}`);
+        }
+        catch (error) {
+            alert('Failed to restore version');
+        }
+        finally {
+            setRestoringVersion(null);
+        }
+    };
+    const handleDelete = async (version) => {
+        if (!confirm(`Delete version ${version.versionNumber}? This cannot be undone.`)) {
+            return;
+        }
+        try {
+            await deleteMutation.mutateAsync({ versionId: version.id, documentId });
+        }
+        catch (error) {
+            alert('Failed to delete version');
+        }
+    };
+    const toggleVersionSelection = (versionId) => {
+        setSelectedVersions((prev) => {
+            if (prev.includes(versionId)) {
+                return prev.filter((id) => id !== versionId);
+            }
+            if (prev.length >= 2) {
+                return [prev[1], versionId];
+            }
+            return [...prev, versionId];
+        });
+    };
+    const formatDate = (dateString) => {
+        const date = new Date(dateString);
+        return date.toLocaleString(undefined, {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+    if (isLoading) {
+        return (_jsxs("div", { className: "p-4 text-center text-gray-500", children: [_jsx("div", { className: "animate-spin inline-block w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full mr-2" }), "Loading versions..."] }));
+    }
+    if (error) {
+        return (_jsx("div", { className: "p-4 text-center text-red-500", children: "Failed to load version history" }));
+    }
+    return (_jsxs("div", { className: "version-history bg-white rounded-lg border border-gray-200", children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b border-gray-200", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(History, { className: "w-5 h-5 text-gray-500" }), _jsx("h3", { className: "font-semibold text-gray-900", children: "Version History" }), _jsxs("span", { className: "text-sm text-gray-500", children: ["(", versions.length, ")"] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [selectedVersions.length === 2 && (_jsxs("button", { className: "flex items-center gap-1 px-3 py-1.5 text-sm bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100", onClick: () => { }, children: [_jsx(GitCompare, { className: "w-4 h-4" }), "Compare"] })), _jsx("button", { className: "flex items-center gap-1 px-3 py-1.5 text-sm bg-gray-900 text-white rounded-md hover:bg-gray-800", onClick: () => setShowCreateDialog(true), children: "Save Version" })] })] }), showCreateDialog && (_jsx("div", { className: "p-4 bg-gray-50 border-b border-gray-200", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(MessageSquare, { className: "w-5 h-5 text-gray-400 mt-2" }), _jsxs("div", { className: "flex-1", children: [_jsx("input", { type: "text", placeholder: "Describe what's changed in this version...", className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", value: versionDescription, onChange: (e) => setVersionDescription(e.target.value), onKeyDown: (e) => e.key === 'Enter' && handleCreateVersion() }), _jsxs("div", { className: "flex items-center gap-2 mt-2", children: [_jsx("button", { className: "px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50", onClick: handleCreateVersion, disabled: createVersionMutation.isPending, children: createVersionMutation.isPending ? 'Saving...' : 'Save' }), _jsx("button", { className: "px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900", onClick: () => {
+                                                setShowCreateDialog(false);
+                                                setVersionDescription('');
+                                            }, children: "Cancel" })] })] })] }) })), _jsx("div", { className: "max-h-96 overflow-y-auto", children: versions.length === 0 ? (_jsxs("div", { className: "p-8 text-center text-gray-500", children: [_jsx(History, { className: "w-12 h-12 mx-auto mb-3 text-gray-300" }), _jsx("p", { children: "No versions yet" }), _jsx("p", { className: "text-sm mt-1", children: "Save a version to track changes" })] })) : (_jsx("div", { className: "divide-y divide-gray-100", children: versions.map((version) => (_jsx("div", { className: `p-4 hover:bg-gray-50 transition-colors ${selectedVersions.includes(version.id) ? 'bg-blue-50' : ''}`, children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("input", { type: "checkbox", checked: selectedVersions.includes(version.id), onChange: () => toggleVersionSelection(version.id), className: "mt-1 w-4 h-4 text-blue-600 rounded border-gray-300" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "font-mono text-sm font-medium text-gray-900", children: ["v", version.versionNumber] }), version.versionNumber === versions[0]?.versionNumber && (_jsx("span", { className: "px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full", children: "Latest" }))] }), version.changeDescription && (_jsx("p", { className: "text-sm text-gray-700 mt-1", children: version.changeDescription })), _jsxs("div", { className: "flex items-center gap-4 mt-2 text-xs text-gray-500", children: [_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Clock, { className: "w-3 h-3" }), formatDate(version.createdAt)] }), version.createdByName && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(User, { className: "w-3 h-3" }), version.createdByName] }))] })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { className: "p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded", onClick: () => handleRestore(version), disabled: restoringVersion === version.id, title: "Restore this version", children: restoringVersion === version.id ? (_jsx("div", { className: "w-4 h-4 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin" })) : (_jsx(RotateCcw, { className: "w-4 h-4" })) }), _jsx("button", { className: "p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded", onClick: () => handleDelete(version), disabled: deleteMutation.isPending, title: "Delete version", children: _jsx(Trash2, { className: "w-4 h-4" }) })] })] }) }, version.id))) })) })] }));
+}
+export default VersionHistory;

package/dist/client/hooks/useCollaboration.d.ts

@@ -0,0 +1,99 @@
+import type { BlockNoteEditor } from '@blocknote/core';
+/**
+ * User info for collaborative editing
+ */
+export interface CollaboratorInfo {
+    id: string;
+    name: string;
+    color: string;
+}
+/**
+ * Awareness state from other users
+ */
+export interface CollaboratorState {
+    user: CollaboratorInfo;
+    cursor: {
+        blockId: string;
+        index: number;
+    } | null;
+    selection: {
+        anchor: {
+            blockId: string;
+            index: number;
+        };
+        head: {
+            blockId: string;
+            index: number;
+        };
+    } | null;
+}
+/**
+ * Options for useCollaborativeEditor
+ */
+export interface UseCollaborativeEditorOptions {
+    documentId: string;
+    userId: string;
+    userName: string;
+    serverUrl?: string;
+    initialContent?: any[];
+}
+/**
+ * Return type for useCollaborativeEditor
+ */
+export interface UseCollaborativeEditorReturn {
+    editor: BlockNoteEditor | null;
+    isConnected: boolean;
+    isLoading: boolean;
+    collaborators: CollaboratorState[];
+    error: Error | null;
+}
+/**
+ * Hook for real-time collaborative editing with Yjs
+ *
+ * @example
+ * ```tsx
+ * function CollaborativeEditor({ docId }: { docId: string }) {
+ *   const { editor, isConnected, collaborators } = useCollaborativeEditor({
+ *     documentId: docId,
+ *     userId: 'user-123',
+ *     userName: 'John Doe',
+ *   })
+ *
+ *   if (!editor) return <div>Loading...</div>
+ *
+ *   return (
+ *     <div>
+ *       <div className="collaborators">
+ *         {collaborators.map(c => (
+ *           <span key={c.user.id} style={{ color: c.user.color }}>
+ *             {c.user.name}
+ *           </span>
+ *         ))}
+ *       </div>
+ *       <BlockNoteView editor={editor} />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export declare function useCollaborativeEditor(options: UseCollaborativeEditorOptions): UseCollaborativeEditorReturn;
+/**
+ * Hook for non-collaborative editing (fallback)
+ */
+export declare function useEditor(content?: any[]): {
+    editor: BlockNoteEditor | null;
+    isLoading: boolean;
+};
+/**
+ * Hook to fetch active collaborators for a document (read-only)
+ */
+export declare function useCollaborators(documentId: string, baseUrl?: string): {
+    collaborators: {
+        userId: string;
+        userName: string | null;
+        userColor: string | null;
+        lastSeenAt: Date;
+    }[];
+    isLoading: boolean;
+};
+//# sourceMappingURL=useCollaboration.d.ts.map

package/dist/client/hooks/useCollaboration.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCollaboration.d.ts","sourceRoot":"","sources":["../../../src/client/hooks/useCollaboration.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEtD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAA;IACtB,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IACjD,SAAS,EAAE;QAAE,MAAM,EAAE;YAAE,OAAO,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,IAAI,EAAE;YAAE,OAAO,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,GAAG,IAAI,CAAA;CAC3G;AAED;;GAEG;AACH,MAAM,WAAW,6BAA6B;IAC5C,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,GAAG,EAAE,CAAA;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,eAAe,GAAG,IAAI,CAAA;IAC9B,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,6BAA6B,GACrC,4BAA4B,CAmG9B;AAED;;GAEG;AACH,wBAAgB,SAAS,CACvB,OAAO,CAAC,EAAE,GAAG,EAAE,GACd;IAAE,MAAM,EAAE,eAAe,GAAG,IAAI,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAcxD;AAyBD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,EAAE,OAAO,GAAE,MAAe;;gBAEjE,MAAM;kBACJ,MAAM,GAAG,IAAI;mBACZ,MAAM,GAAG,IAAI;oBACZ,IAAI;;;EA0BnB"}

package/dist/client/hooks/useCollaboration.js

@@ -0,0 +1,180 @@
+import { useEffect, useMemo, useState } from 'react';
+import * as Y from 'yjs';
+import { WebsocketProvider } from 'y-websocket';
+import { useCreateBlockNote } from '@blocknote/react';
+/**
+ * Hook for real-time collaborative editing with Yjs
+ *
+ * @example
+ * ```tsx
+ * function CollaborativeEditor({ docId }: { docId: string }) {
+ *   const { editor, isConnected, collaborators } = useCollaborativeEditor({
+ *     documentId: docId,
+ *     userId: 'user-123',
+ *     userName: 'John Doe',
+ *   })
+ *
+ *   if (!editor) return <div>Loading...</div>
+ *
+ *   return (
+ *     <div>
+ *       <div className="collaborators">
+ *         {collaborators.map(c => (
+ *           <span key={c.user.id} style={{ color: c.user.color }}>
+ *             {c.user.name}
+ *           </span>
+ *         ))}
+ *       </div>
+ *       <BlockNoteView editor={editor} />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+export function useCollaborativeEditor(options) {
+    const { documentId, userId, userName, serverUrl = window.location.origin, initialContent } = options;
+    const [isConnected, setIsConnected] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [collaborators, setCollaborators] = useState([]);
+    const [error, setError] = useState(null);
+    // Generate user color based on userId
+    const userColor = useMemo(() => generateColor(userId), [userId]);
+    // Create Yjs document (singleton per documentId)
+    const ydoc = useMemo(() => {
+        return new Y.Doc();
+    }, [documentId]);
+    // Create WebSocket provider
+    const provider = useMemo(() => {
+        const wsUrl = serverUrl.replace(/^http/, 'ws');
+        const provider = new WebsocketProvider(`${wsUrl}/api/collab`, documentId, ydoc);
+        return provider;
+    }, [ydoc, documentId, serverUrl]);
+    // Create BlockNote editor with collaboration
+    const editor = useCreateBlockNote({
+        collaboration: {
+            provider,
+            fragment: ydoc.getXmlFragment('document-store'),
+            user: {
+                name: userName,
+                color: userColor,
+            },
+        },
+    });
+    // Set up connection status and awareness
+    useEffect(() => {
+        setIsLoading(true);
+        setError(null);
+        // Connection status
+        provider.on('status', (event) => {
+            setIsConnected(event.status === 'connected');
+            if (event.status === 'connected') {
+                setIsLoading(false);
+            }
+        });
+        // Set user awareness
+        provider.awareness.setLocalStateField('user', {
+            id: userId,
+            name: userName,
+            color: userColor,
+        });
+        // Listen for other users
+        const handleAwarenessChange = () => {
+            const states = Array.from(provider.awareness.getStates().entries());
+            const others = states
+                .filter(([clientId]) => clientId !== provider.awareness.clientID)
+                .map(([, state]) => state)
+                .filter(Boolean);
+            setCollaborators(others);
+        };
+        provider.awareness.on('change', handleAwarenessChange);
+        handleAwarenessChange(); // Initial call
+        // Error handling
+        provider.on('connection-error', (event) => {
+            setError(new Error('Connection error'));
+            setIsLoading(false);
+        });
+        return () => {
+            provider.awareness.off('change', handleAwarenessChange);
+        };
+    }, [provider, userId, userName, userColor]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            provider.destroy();
+            ydoc.destroy();
+        };
+    }, [provider, ydoc]);
+    return {
+        editor,
+        isConnected,
+        isLoading,
+        collaborators,
+        error,
+    };
+}
+/**
+ * Hook for non-collaborative editing (fallback)
+ */
+export function useEditor(content) {
+    const [isLoading, setIsLoading] = useState(true);
+    const editor = useCreateBlockNote({
+        initialContent: content || [{ type: 'paragraph', content: '' }],
+    });
+    useEffect(() => {
+        if (editor) {
+            setIsLoading(false);
+        }
+    }, [editor]);
+    return { editor, isLoading };
+}
+/**
+ * Generate a consistent color for a user
+ */
+function generateColor(userId) {
+    const colors = [
+        '#EF4444', // red
+        '#F97316', // orange
+        '#F59E0B', // amber
+        '#84CC16', // lime
+        '#10B981', // emerald
+        '#06B6D4', // cyan
+        '#3B82F6', // blue
+        '#8B5CF6', // violet
+        '#EC4899', // pink
+        '#F43F5E', // rose
+    ];
+    let hash = 0;
+    for (let i = 0; i < userId.length; i++) {
+        hash = userId.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+}
+/**
+ * Hook to fetch active collaborators for a document (read-only)
+ */
+export function useCollaborators(documentId, baseUrl = '/api') {
+    const [collaborators, setCollaborators] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        const fetchCollaborators = async () => {
+            try {
+                const res = await fetch(`${baseUrl}/docs/${documentId}/collaborators`);
+                if (!res.ok)
+                    throw new Error('Failed to fetch collaborators');
+                const data = await res.json();
+                setCollaborators(data.items);
+            }
+            catch (error) {
+                console.error('Failed to fetch collaborators:', error);
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        fetchCollaborators();
+        // Poll every 30 seconds
+        const interval = setInterval(fetchCollaborators, 30000);
+        return () => clearInterval(interval);
+    }, [documentId, baseUrl]);
+    return { collaborators, isLoading };
+}