react-embed-docs 0.1.0

package/dist/client/components/DocsLayout.js

@@ -0,0 +1,387 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { closestCenter, defaultDropAnimationSideEffects, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen, GripVertical, PanelLeftCloseIcon, PanelLeftOpenIcon, Plus, Search, } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useDocumentsQuery, useReorderDocumentMutation, } from '../hooks/useDocsQuery.js';
+import { Breadcrumbs } from './Breadcrumbs.js';
+function SortableTreeItem({ doc, isExpanded, isCurrent, onToggle, onNavigate, }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({ id: doc.id });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+        paddingLeft: doc.depth * 12 + 8,
+    };
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: [
+            'flex items-center gap-1 w-full px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer',
+            isCurrent ? 'font-bold' : 'hover:opacity-80',
+            isDragging && 'opacity-50',
+        ].join(' '), children: [_jsx("div", { ...attributes, ...listeners, className: "cursor-grab active:cursor-grabbing p-0.5 rounded", onClick: (e) => e.stopPropagation(), children: _jsx(GripVertical, { className: "h-4 w-4 text-gray-400" }) }), doc.hasChildren ? (_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    onToggle(doc.id);
+                }, className: "p-0.5 hover:bg-gray-200 rounded shrink-0", children: isExpanded ? (_jsx(ChevronDown, { className: "h-4 w-4" })) : (_jsx(ChevronRight, { className: "h-4 w-4" })) })) : (_jsx("div", { className: "w-4" })), doc.emoji ? (_jsx("span", { className: "text-base shrink-0", children: doc.emoji })) : doc.hasChildren ? (isExpanded ? (_jsx(FolderOpen, { className: "h-4 w-4 shrink-0 text-muted" })) : (_jsx(Folder, { className: "h-4 w-4 shrink-0 text-muted" }))) : (_jsx(FileText, { className: "h-4 w-4 shrink-0 text-gray-400" })), _jsx("span", { className: "truncate flex-1", onClick: () => onNavigate(doc.id), children: doc.title })] }));
+}
+// Drag Overlay Item
+function DragOverlayItem({ doc }) {
+    return (_jsxs("div", { className: [
+            'flex items-center gap-1 w-full px-2 py-1.5 text-sm text-gray-500  rounded-md shadow-lg',
+            'opacity-80',
+        ].join(' '), children: [_jsx(GripVertical, { className: "h-4 w-4 text-gray-400" }), _jsx("div", { className: "w-5" }), doc.emoji ? (_jsx("span", { className: "text-base shrink-0", children: doc.emoji })) : doc.hasChildren ? (_jsx(Folder, { className: "h-4 w-4 shrink-0 text-blue-600" })) : (_jsx(FileText, { className: "h-4 w-4 shrink-0 text-gray-400" })), _jsx("span", { className: "truncate", children: doc.title })] }));
+}
+// Simple debounce hook
+function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebouncedValue(value);
+        }, delay);
+        return () => clearTimeout(timer);
+    }, [value, delay]);
+    return debouncedValue;
+}
+// Build breadcrumb path for a document
+function buildBreadcrumb(doc, allDocs) {
+    const parts = [doc.title];
+    let current = doc;
+    while (current.parentId) {
+        const parent = allDocs.find((d) => d.id === current.parentId);
+        if (!parent)
+            break;
+        parts.unshift(parent.title);
+        current = parent;
+    }
+    return parts.join(' / ');
+}
+// Build full path from root to document (for URL navigation)
+function buildDocumentPath(docId, allDocs, basePath) {
+    const pathParts = [];
+    const visited = new Set();
+    let currentId = docId;
+    while (currentId) {
+        // Prevent infinite loops from circular references
+        if (visited.has(currentId))
+            break;
+        visited.add(currentId);
+        const doc = allDocs.find((d) => d.id === currentId);
+        if (!doc)
+            break;
+        pathParts.unshift(doc.slug || doc.id);
+        currentId = doc.parentId ?? null;
+    }
+    if (pathParts.length === 0)
+        return basePath;
+    return `${basePath}/${pathParts.join('/')}`;
+}
+// Get all ancestor IDs of a document (for auto-expanding)
+function getAncestorIds(docId, allDocs) {
+    const ancestors = [];
+    const visited = new Set();
+    let currentId = docId;
+    while (currentId) {
+        if (visited.has(currentId))
+            break;
+        visited.add(currentId);
+        const doc = allDocs.find((d) => d.id === currentId);
+        if (!doc)
+            break;
+        if (doc.parentId) {
+            ancestors.push(doc.parentId);
+            currentId = doc.parentId;
+        }
+        else {
+            break;
+        }
+    }
+    return ancestors;
+}
+// Extract text snippets from BlockNote content
+function extractTextSnippets(content, query) {
+    if (!content || typeof content !== 'object')
+        return [];
+    const snippets = [];
+    const queryLower = query.toLowerCase();
+    const extractFromBlock = (block) => {
+        if (!block || typeof block !== 'object')
+            return '';
+        const b = block;
+        // Handle text content
+        if (b.content && Array.isArray(b.content)) {
+            return b.content
+                .map((c) => {
+                if (typeof c === 'string')
+                    return c;
+                if (c && typeof c === 'object') {
+                    const contentItem = c;
+                    if (contentItem.text && typeof contentItem.text === 'string') {
+                        return contentItem.text;
+                    }
+                }
+                return '';
+            })
+                .join(' ');
+        }
+        // Handle children
+        if (b.children && Array.isArray(b.children)) {
+            return b.children.map(extractFromBlock).join(' ');
+        }
+        return '';
+    };
+    const contentObj = content;
+    if (contentObj.content && Array.isArray(contentObj.content)) {
+        for (const block of contentObj.content) {
+            const text = extractFromBlock(block);
+            if (text.toLowerCase().includes(queryLower)) {
+                // Find the position of the match
+                const matchIndex = text.toLowerCase().indexOf(queryLower);
+                const start = Math.max(0, matchIndex - 20);
+                const end = Math.min(text.length, matchIndex + query.length + 60);
+                let snippet = text.slice(start, end);
+                // Add ellipsis if truncated
+                if (start > 0)
+                    snippet = '...' + snippet;
+                if (end < text.length)
+                    snippet = snippet + '...';
+                snippets.push(snippet);
+                if (snippets.length >= 2)
+                    break; // Limit to 2 snippets
+            }
+        }
+    }
+    return snippets;
+}
+export function DocsLayout({ children, currentDocId, onNavigate, basePath = '/docs', userAvatar, onSearch, }) {
+    const [expandedFolders, setExpandedFolders] = useState(new Set());
+    const [searchQuery, setSearchQuery] = useState('');
+    const [activeId, setActiveId] = useState(null);
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    // Header search state
+    const [headerSearchQuery, setHeaderSearchQuery] = useState('');
+    const [showSearchResults, setShowSearchResults] = useState(false);
+    const debouncedSearchQuery = useDebounce(headerSearchQuery, 300);
+    const searchInputRef = useRef(null);
+    const { data } = useDocumentsQuery();
+    const reorderMutation = useReorderDocumentMutation();
+    const documents = data?.documents ?? [];
+    // Search query for header search
+    const { data: searchResultsData } = useDocumentsQuery(debouncedSearchQuery.length > 0 ? { search: debouncedSearchQuery } : {});
+    const searchResults = searchResultsData?.documents ?? [];
+    // Resolve currentDocId (which might be a slug) to actual document ID
+    const resolvedCurrentDocId = useMemo(() => {
+        if (!currentDocId || documents.length === 0)
+            return null;
+        // First try to find by ID
+        const byId = documents.find((d) => d.id === currentDocId);
+        if (byId)
+            return byId.id;
+        // Then try to find by slug
+        const bySlug = documents.find((d) => d.slug === currentDocId);
+        if (bySlug)
+            return bySlug.id;
+        return null;
+    }, [currentDocId, documents]);
+    // Auto-expand tree branches when current document changes
+    useEffect(() => {
+        if (!resolvedCurrentDocId || documents.length === 0)
+            return;
+        const ancestors = getAncestorIds(resolvedCurrentDocId, documents);
+        // Expand all ancestors so the current document is visible
+        if (ancestors.length > 0) {
+            setExpandedFolders((prev) => {
+                const newExpanded = new Set(prev);
+                ancestors.forEach((id) => newExpanded.add(id));
+                return newExpanded;
+            });
+        }
+    }, [resolvedCurrentDocId, documents]);
+    // Handle click outside to close search results
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (searchInputRef.current &&
+                !searchInputRef.current.contains(event.target)) {
+                setShowSearchResults(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    // Build flattened tree for sortable context
+    const flattenedTree = useMemo(() => {
+        const items = [];
+        const processed = new Set();
+        const processDoc = (doc, depth) => {
+            if (processed.has(doc.id))
+                return;
+            processed.add(doc.id);
+            const children = documents.filter((d) => d.parentId === doc.id);
+            const hasChildren = children.length > 0;
+            items.push({ ...doc, depth, hasChildren });
+            // If expanded, process children
+            if (hasChildren && expandedFolders.has(doc.id)) {
+                children
+                    .sort((a, b) => a.order - b.order)
+                    .forEach((child) => processDoc(child, depth + 1));
+            }
+        };
+        // Process root documents
+        documents
+            .filter((d) => !d.parentId)
+            .sort((a, b) => a.order - b.order)
+            .forEach((doc) => processDoc(doc, 0));
+        return items;
+    }, [documents, expandedFolders]);
+    const getChildren = useCallback((parentId) => documents.filter((d) => d.parentId === parentId), [documents]);
+    const toggleFolder = useCallback((folderId) => {
+        setExpandedFolders((prev) => {
+            const newExpanded = new Set(prev);
+            if (newExpanded.has(folderId)) {
+                newExpanded.delete(folderId);
+            }
+            else {
+                newExpanded.add(folderId);
+            }
+            return newExpanded;
+        });
+    }, []);
+    // Navigate with full path
+    const handleNavigate = useCallback((docId) => {
+        if (!onNavigate)
+            return;
+        if (docId === 'new') {
+            onNavigate(`${basePath}/new`);
+            return;
+        }
+        const path = buildDocumentPath(docId, documents, basePath);
+        onNavigate(path);
+    }, [onNavigate, documents, basePath]);
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 5,
+        },
+    }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const handleDragStart = useCallback((event) => {
+        setActiveId(event.active.id);
+    }, []);
+    const handleDragOver = useCallback((event) => {
+        const { over } = event;
+        if (!over)
+            return;
+        const overId = over.id;
+        // Auto-expand folder when hovering over it
+        const overDoc = documents.find((d) => d.id === overId);
+        if (overDoc) {
+            const children = getChildren(overId);
+            if (children.length > 0 && !expandedFolders.has(overId)) {
+                toggleFolder(overId);
+            }
+        }
+    }, [documents, expandedFolders, getChildren, toggleFolder]);
+    const handleDragEnd = useCallback((event) => {
+        const { active, over } = event;
+        setActiveId(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;
+        // Calculate new parent and order
+        let newParentId = null;
+        let newOrder = 0;
+        // Determine if we're dropping before, after, or inside the target
+        const activeIndex = flattenedTree.findIndex((item) => item.id === draggedId);
+        const overIndex = flattenedTree.findIndex((item) => item.id === overId);
+        if (activeIndex === -1 || overIndex === -1)
+            return;
+        if (activeIndex < overIndex) {
+            // Dropping after the target
+            newParentId = overDoc.parentId || null;
+            newOrder = overDoc.order + 5;
+        }
+        else {
+            // Dropping before the target
+            newParentId = overDoc.parentId || null;
+            newOrder = overDoc.order - 5;
+        }
+        // Check if dropping on a folder (to make it a child)
+        const overHasChildren = getChildren(overId).length > 0;
+        if (overHasChildren && activeIndex > overIndex) {
+            // If dropping after a folder, make it the first child
+            newParentId = overId;
+            newOrder = 0;
+        }
+        // Prevent dropping a parent into its own child
+        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)) {
+            console.log('Cannot drop a parent into its own child');
+            return;
+        }
+        // Execute the reorder
+        reorderMutation.mutate({
+            id: draggedId,
+            parentId: newParentId,
+            order: newOrder,
+        });
+    }, [documents, flattenedTree, getChildren, reorderMutation]);
+    const dropAnimation = {
+        sideEffects: defaultDropAnimationSideEffects({
+            styles: {
+                active: {
+                    opacity: '0.5',
+                },
+            },
+        }),
+    };
+    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]);
+    return (_jsxs("div", { className: "flex h-screen w-full", children: [_jsxs("aside", { className: [
+                    'border-r border-border flex flex-col transition-all duration-200 ease-in-out overflow-hidden',
+                    isSidebarOpen ? 'w-64 opacity-100' : 'w-0 opacity-0',
+                ].join(' '), children: [_jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", 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: () => handleNavigate('new'), children: _jsx(Plus, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 text-gray-400" }), _jsx("input", { type: "text", placeholder: "Search docs...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-full pl-8 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" })] })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-2 space-y-1", children: [_jsxs(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: [_jsx(SortableContext, { items: flattenedTree.map((item) => item.id), strategy: verticalListSortingStrategy, children: flattenedTree.map((doc) => (_jsx(SortableTreeItem, { doc: doc, isExpanded: expandedFolders.has(doc.id), isCurrent: doc.id === resolvedCurrentDocId, onToggle: toggleFolder, onNavigate: handleNavigate }, 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" }))] })] }), _jsxs("main", { className: "flex-1 flex flex-col min-w-0 overflow-hidden", children: [_jsxs("header", { className: "h-16 border-b border-border flex items-center justify-between px-6 shrink-0", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { onClick: () => setIsSidebarOpen(!isSidebarOpen), className: "p-2 hover:bg-primary rounded-md transition-colors text-muted-foreground", title: isSidebarOpen ? 'Close sidebar' : 'Open sidebar', children: isSidebarOpen ? (_jsx(PanelLeftCloseIcon, { className: "h-6 w-6" })) : (_jsx(PanelLeftOpenIcon, { className: "h-6 w-6" })) }), _jsx(Breadcrumbs, { docId: resolvedCurrentDocId ?? undefined, documents: documents.map((d) => ({
+                                            id: d.id,
+                                            title: d.title,
+                                            slug: d.slug,
+                                            emoji: d.emoji ?? undefined,
+                                            parentId: d.parentId,
+                                        })), onNavigate: onNavigate, homeLabel: "Documents" })] }), _jsxs("div", { className: "flex items-center gap-4 py-2", children: [_jsxs("div", { ref: searchInputRef, className: "relative w-64", children: [_jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 z-10" }), _jsx("input", { type: "text", placeholder: "Search documentation...", className: "w-full pl-8 pr-3 py-2 text-sm border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", value: headerSearchQuery, onChange: (e) => {
+                                                    setHeaderSearchQuery(e.target.value);
+                                                    setShowSearchResults(e.target.value.length > 0);
+                                                }, onFocus: () => {
+                                                    if (headerSearchQuery.length > 0) {
+                                                        setShowSearchResults(true);
+                                                    }
+                                                } }), showSearchResults && headerSearchQuery.length > 0 && (_jsx("div", { className: "absolute top-full left-0 right-0 mt-1 border border-gray-200 rounded-md shadow-lg max-h-80 overflow-y-auto z-50", children: searchResults.length === 0 ? (_jsxs("div", { className: "px-4 py-3 text-sm text-gray-500", children: ["No results found for \"", headerSearchQuery, "\""] })) : (_jsx("div", { className: "py-1", children: searchResults.map((doc) => {
+                                                        const breadcrumb = doc.parentId
+                                                            ? buildBreadcrumb(doc, documents)
+                                                            : null;
+                                                        return (_jsx("button", { onClick: () => {
+                                                                handleNavigate(doc.id);
+                                                                setHeaderSearchQuery('');
+                                                                setShowSearchResults(false);
+                                                            }, className: "w-full px-3 py-2 text-left hover:bg-gray-100 transition-colors", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "shrink-0 mt-0.5", children: doc.emoji ? (_jsx("span", { className: "text-base", children: doc.emoji })) : (_jsx(FileText, { className: "h-4 w-4 text-gray-400" })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-sm text-gray-900 truncate", children: doc.title }), breadcrumb && (_jsx("div", { className: "text-xs text-gray-500 truncate", children: breadcrumb }))] })] }) }, doc.id));
+                                                    }) })) }))] }), _jsxs("button", { onClick: () => handleNavigate('new'), className: "px-4 py-2 bg-secondary text-white text-sm rounded-md hover:bg-gray-800 flex items-center gap-2 transition-colors", children: [_jsx(Plus, { className: "h-4 w-4" }), "Create"] }), userAvatar] })] }), _jsx("div", { className: "flex-1 overflow-auto p-6", children: children })] })] }));
+}

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

@@ -0,0 +1,5 @@
+interface IProps {
+}
+export declare function DocumentContent({}: IProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DocumentContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentContent.d.ts","sourceRoot":"","sources":["../../../src/client/components/DocumentContent.tsx"],"names":[],"mappings":"AAKA,UAAU,MAAM;CAAG;AAEnB,wBAAgB,eAAe,CAAC,EAAE,EAAE,MAAM,2CASzC"}

package/dist/client/components/DocumentContent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DocumentEdit } from './DocumentEdit';
+import { DocumentList } from './DocumentList';
+import { useDocument } from './DocumentProvider';
+import { DocumentView } from './DocumentView';
+export function DocumentContent({}) {
+    const { params } = useDocument();
+    if (params.mode === 'create' || params.mode === 'edit') {
+        return _jsx(DocumentEdit, {});
+    }
+    if (params.documentSlug) {
+        return _jsx(DocumentView, {});
+    }
+    return _jsx(DocumentList, {});
+}

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

@@ -0,0 +1,6 @@
+import '@blocknote/mantine/style.css';
+interface DocumentEditProps {
+}
+export declare function DocumentEdit({}: DocumentEditProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DocumentEdit.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentEdit.d.ts","sourceRoot":"","sources":["../../../src/client/components/DocumentEdit.tsx"],"names":[],"mappings":"AAIA,OAAO,8BAA8B,CAAA;AAerC,UAAU,iBAAiB;CAAG;AAqB9B,wBAAgB,YAAY,CAAC,EAAE,EAAE,iBAAiB,2CA6PjD"}

package/dist/client/components/DocumentEdit.js

@@ -0,0 +1,153 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BlockNoteView } from '@blocknote/mantine';
+import '@blocknote/mantine/style.css';
+import { useCreateBlockNote } from '@blocknote/react';
+import { Eye, ImageIcon, Loader2, Save, X } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useCreateDocumentMutation, useDocumentQuery, useUpdateDocumentMutation, } from '../hooks/useDocsQuery.js';
+import { useFileUpload } from '../hooks/useFileUpload.js';
+import { blockNoteTheme } from '../lib/blocknoteTheme.js';
+import { useDocument } from './DocumentProvider.js';
+import { EmojiPicker } from './EmojiPicker.js';
+// Default initial content for new documents
+const getDefaultContent = () => [
+    {
+        type: 'paragraph',
+        content: '',
+    },
+];
+// Generate slug from title
+const generateSlug = (title) => {
+    return (title
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .substring(0, 255) || 'untitled');
+};
+export function DocumentEdit({}) {
+    const { onOpen, onEdit, theme, params } = useDocument();
+    const isNewDocument = params.documentSlug === undefined;
+    // Fetch existing document data if editing
+    const { data: existingDoc, isLoading: isLoadingDoc } = useDocumentQuery(params.documentSlug);
+    // Mutations
+    const createMutation = useCreateDocumentMutation();
+    const updateMutation = useUpdateDocumentMutation();
+    // Local state
+    const [title, setTitle] = useState('');
+    const [emoji, setEmoji] = useState(undefined);
+    const [cover, setCover] = useState(null);
+    const [isSaving, setIsSaving] = useState(false);
+    const [hasLoaded, setHasLoaded] = useState(false);
+    // File upload hook
+    const { isUploading: isUploadingCover, uploadFile: uploadCover } = useFileUpload({
+        maxSize: 5 * 1024 * 1024, // 5MB
+        acceptedTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
+    });
+    // Initialize editor
+    const editor = useCreateBlockNote({
+        initialContent: getDefaultContent(),
+    });
+    // Load existing document data when available
+    useEffect(() => {
+        if (existingDoc && !hasLoaded) {
+            setTitle(existingDoc.title);
+            if (existingDoc.emoji)
+                setEmoji(existingDoc.emoji);
+            if (existingDoc.cover)
+                setCover(existingDoc.cover);
+            if (editor && existingDoc.content) {
+                try {
+                    const content = typeof existingDoc.content === 'string'
+                        ? JSON.parse(existingDoc.content)
+                        : existingDoc.content;
+                    editor.replaceBlocks(editor.document, content);
+                }
+                catch (e) {
+                    console.error('Failed to parse document content:', e);
+                }
+            }
+            setHasLoaded(true);
+        }
+    }, [existingDoc, editor, hasLoaded]);
+    const handleView = async () => {
+        if (!existingDoc)
+            return;
+        await handleSave();
+        onOpen(params.slugs.join('/') + '/' + existingDoc.slug);
+    };
+    const handleSave = async () => {
+        if (!title.trim()) {
+            alert('Please enter a document title');
+            return;
+        }
+        setIsSaving(true);
+        try {
+            const content = editor.document;
+            const slug = generateSlug(title);
+            if (!existingDoc) {
+                // Create new document (with parentId if it's a child document)
+                const newDoc = await createMutation.mutateAsync({
+                    title,
+                    slug,
+                    content,
+                    isPublished: true,
+                    parentSlugs: params.slugs,
+                    emoji,
+                    cover,
+                });
+                onEdit(params.slugs.join('/') + '/' + newDoc.slug);
+            }
+            else {
+                // Update existing document
+                const updated = await updateMutation.mutateAsync({
+                    id: existingDoc.id,
+                    data: {
+                        title,
+                        slug,
+                        content,
+                        emoji,
+                        cover,
+                    },
+                });
+            }
+        }
+        catch (error) {
+            console.error('Failed to save document:', error);
+            alert('Failed to save document. Please try again.');
+        }
+        finally {
+            setIsSaving(false);
+        }
+    };
+    // Cover upload handlers
+    const handleDrop = async (e) => {
+        e.preventDefault();
+        const file = e.dataTransfer.files[0];
+        if (file) {
+            const result = await uploadCover(file);
+            if (result) {
+                setCover(result.url);
+            }
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
+    const handleFileInput = async (e) => {
+        const file = e.target.files?.[0];
+        if (file) {
+            const result = await uploadCover(file);
+            if (result) {
+                setCover(result.url);
+            }
+        }
+    };
+    // Show loading state when fetching existing document
+    if (!isNewDocument && isLoadingDoc) {
+        return (_jsx("div", { className: "flex items-center justify-center min-h-100", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-gray-400" }) }));
+    }
+    return (_jsxs("div", { className: "mx-auto h-full flex flex-col", children: [_jsxs("div", { className: "mb-6 shrink-0", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx(EmojiPicker, { value: emoji, onChange: setEmoji }), _jsx("input", { type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Document title", className: "text-2xl font-bold bg-transparent border-none outline-none px-0 flex-1 placeholder:text-gray-400" })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [!isNewDocument && existingDoc && (_jsxs("button", { onClick: handleView, className: "px-3 py-1.5 text-sm border border-border rounded-md hover:bg-gray-50 flex items-center gap-2 transition-colors", children: [_jsx(Eye, { className: "h-4 w-4" }), "View"] })), _jsx("button", { onClick: handleSave, disabled: isSaving || createMutation.isPending || updateMutation.isPending, className: "px-3 py-1.5 text-sm bg-primary text-white rounded-md hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors", children: isSaving ||
+                                            createMutation.isPending ||
+                                            updateMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), "Saving..."] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "h-4 w-4" }), isNewDocument ? 'Create' : 'Save'] })) })] })] }), _jsxs("div", { className: "text-sm text-gray-500 mt-1", children: ["Slug: ", generateSlug(title)] })] }), _jsx("div", { className: "mb-6 shrink-0", children: cover ? (_jsxs("div", { className: "relative w-full h-80 rounded-lg overflow-hidden bg-gray-100", children: [_jsx("img", { src: cover, alt: "Cover", className: "w-full h-full object-cover" }), _jsx("button", { onClick: () => setCover(null), className: "absolute top-2 right-2 p-1.5 bg-secondary hover:bg-white rounded-md shadow-sm transition-colors", title: "Remove cover", children: _jsx(X, { className: "h-4 w-4" }) })] })) : (_jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, className: "relative w-full h-32 border-2 border-dashed border-border rounded-lg bg-secondary hover:bg-gray-100 transition-colors cursor-pointer", children: [_jsx("input", { type: "file", accept: "image/jpeg,image/png,image/gif,image/webp", onChange: handleFileInput, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer" }), _jsx("div", { className: "flex flex-col items-center justify-center h-full gap-2 text-gray-400", children: isUploadingCover ? (_jsx(Loader2, { className: "h-6 w-6 animate-spin" })) : (_jsxs(_Fragment, { children: [_jsx(ImageIcon, { className: "h-6 w-6" }), _jsx("span", { className: "text-sm", children: "Drag & drop cover image here or click to upload" }), _jsx("span", { className: "text-xs text-gray-400", children: "JPEG, PNG, GIF, WebP up to 5MB" })] })) })] })) }), _jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsx("div", { className: "h-full", children: _jsx(BlockNoteView, { editor: editor, theme: blockNoteTheme[theme], className: "h-full" }) }) })] }));
+}

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

@@ -0,0 +1,5 @@
+interface DocumentListProps {
+}
+export declare function DocumentList({}: DocumentListProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DocumentList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentList.d.ts","sourceRoot":"","sources":["../../../src/client/components/DocumentList.tsx"],"names":[],"mappings":"AAiBA,UAAU,iBAAiB;CAAG;AAuB9B,wBAAgB,YAAY,CAAC,EAAE,EAAE,iBAAiB,2CAiIjD"}

package/dist/client/components/DocumentList.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, Folder, Plus } from 'lucide-react';
+import { useDocumentsQuery } from '../hooks/useDocsQuery.js';
+import { useDocument } from './DocumentProvider.js';
+function formatDistanceToNow(date) {
+    const now = new Date();
+    const diffMs = now.getTime() - new Date(date).getTime();
+    const diffSec = Math.round(diffMs / 1000);
+    const diffMin = Math.round(diffSec / 60);
+    const diffHour = Math.round(diffMin / 60);
+    const diffDay = Math.round(diffHour / 24);
+    if (diffSec < 60) {
+        return 'just now';
+    }
+    else if (diffMin < 60) {
+        return `${diffMin} minute${diffMin === 1 ? '' : 's'} ago`;
+    }
+    else if (diffHour < 24) {
+        return `${diffHour} hour${diffHour === 1 ? '' : 's'} ago`;
+    }
+    else if (diffDay < 7) {
+        return `${diffDay} day${diffDay === 1 ? '' : 's'} ago`;
+    }
+    else {
+        return date.toLocaleDateString();
+    }
+}
+export function DocumentList({}) {
+    const { onOpen, onCreate } = useDocument();
+    const { data, isLoading, error } = useDocumentsQuery();
+    const documents = data?.documents ?? [];
+    // Separate documents into folders (documents with children) and regular documents
+    const folders = documents.filter((doc) => documents.some((d) => d.parentId === doc.id));
+    const regularDocuments = documents.filter((doc) => !doc.parentId && !folders.some((f) => f.id === doc.id));
+    return (_jsxs("div", { className: "space-y-6 max-w-5xl mx-auto", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h2", { className: "text-2xl font-bold", children: "Welcome to Documentation" }), _jsx("p", { className: "text-gray-500", children: "Browse and manage your documentation. Create new documents or organize them into folders." })] }), folders.length > 0 && (_jsxs("section", { children: [_jsx("h3", { className: "text-lg font-semibold mb-4", children: "Folders" }), _jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: [folders.map((folder) => (_jsxs("div", { onClick: () => onOpen?.(folder.slug), className: "border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors cursor-pointer", children: [_jsxs("div", { className: "flex items-start justify-between mb-2", children: [folder.emoji ? (_jsx("span", { className: "text-2xl", children: folder.emoji })) : (_jsx(Folder, { className: "h-8 w-8 text-blue-600" })), _jsxs("span", { className: "text-xs text-gray-500", children: [documents.filter((d) => d.parentId === folder.id).length, ' ', "docs"] })] }), _jsx("h4", { className: "text-base font-medium", children: folder.title })] }, folder.id))), _jsxs("div", { onClick: onCreate, className: "border border-dashed border-gray-300 rounded-lg p-4 hover:bg-gray-50 transition-colors cursor-pointer", children: [_jsx("div", { className: "flex items-center justify-center h-8 mb-2", children: _jsx(Plus, { className: "h-6 w-6 text-gray-400" }) }), _jsx("h4", { className: "text-base font-medium text-center text-gray-500", children: "New Folder" })] })] })] })), _jsxs("section", { children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("h3", { className: "text-lg font-semibold", children: folders.length > 0 ? 'Documents' : 'Recent Documents' }), _jsxs("button", { onClick: onCreate, className: "px-3 py-1.5 text-sm bg-gray-900 text-white rounded-md hover:bg-gray-800 flex items-center gap-2 transition-colors", children: [_jsx(Plus, { className: "h-4 w-4" }), "New Document"] })] }), regularDocuments.length === 0 ? (_jsx("div", { className: "border border-dashed border-gray-300 rounded-lg p-8", children: _jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [_jsx(FileText, { className: "h-12 w-12 text-gray-400 mb-4" }), _jsx("h4", { className: "text-lg font-medium mb-2", children: "No documents yet" }), _jsx("p", { className: "text-sm text-gray-500 mb-4", children: "Get started by creating your first document" }), _jsxs("button", { onClick: onCreate, className: "px-4 py-2 bg-gray-900 text-white rounded-md hover:bg-gray-800 flex items-center gap-2 transition-colors", children: [_jsx(Plus, { className: "h-4 w-4" }), "Create Document"] })] }) })) : (_jsx("div", { className: "space-y-2", children: regularDocuments.map((doc) => (_jsxs("div", { onClick: () => onOpen?.(doc.slug), className: "flex items-center justify-between p-4 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 transition-colors group cursor-pointer", children: [_jsxs("div", { className: "flex items-center gap-3", children: [doc.emoji ? (_jsx("span", { className: "text-xl", children: doc.emoji })) : (_jsx(FileText, { className: "h-5 w-5 text-gray-400 group-hover:text-gray-600 transition-colors" })), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900", children: doc.title }), _jsxs("p", { className: "text-sm text-gray-500", children: ["Updated", ' ', doc.updatedAt
+                                                            ? formatDistanceToNow(new Date(doc.updatedAt))
+                                                            : 'N/A'] })] })] }), _jsx("button", { className: "px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded-md transition-colors", children: "Open" })] }, doc.id))) }))] })] }));
+}