react-embed-docs 0.1.0

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

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import type { DocumentSummary } from '../../shared/types.js';
+import { Params } from '../lib/path.js';
+/**
+ * Theme type for the document provider
+ */
+export type DocumentTheme = 'light' | 'dark';
+/**
+ * Document context value interface
+ */
+export interface DocumentContextValue {
+    /** Current theme */
+    theme: DocumentTheme;
+    path: string;
+    locale: string;
+    params: Params;
+    onCreate: () => void;
+    onOpen: (path: string) => void;
+    onEdit: (slug: string) => void;
+    onDelete: (doc: DocumentSummary) => void;
+}
+/**
+ * Props for DocumentProvider component
+ */
+export interface DocumentProviderProps {
+    children: ReactNode;
+    theme?: DocumentTheme;
+    params: Params;
+    path: string;
+    onNavigate?: (path: string) => void;
+    locale?: 'ru' | 'en';
+}
+/**
+ * Provider component for document context
+ */
+export declare function DocumentProvider({ children, params, theme, path, onNavigate, locale, }: DocumentProviderProps): JSX.Element;
+/**
+ * Hook to access document context
+ * @throws Error if used outside of DocumentProvider
+ */
+export declare function useDocument(): DocumentContextValue;
+//# sourceMappingURL=DocumentProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocumentProvider.d.ts","sourceRoot":"","sources":["../../../src/client/components/DocumentProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,SAAS,EAA2B,MAAM,OAAO,CAAA;AACzE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAE5C;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,oBAAoB;IACpB,KAAK,EAAE,aAAa,CAAA;IACpB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,QAAQ,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAA;CACzC;AAOD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CACrB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,KAAe,EACf,IAAI,EACJ,UAAU,EACV,MAAa,GACd,EAAE,qBAAqB,GAAG,GAAG,CAAC,OAAO,CAyCrC;AAED;;;GAGG;AACH,wBAAgB,WAAW,IAAI,oBAAoB,CAQlD"}

package/dist/client/components/DocumentProvider.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext } from 'react';
+/**
+ * Document context
+ */
+const DocumentContext = createContext(null);
+/**
+ * Provider component for document context
+ */
+export function DocumentProvider({ children, params, theme = 'light', path, onNavigate, locale = 'en', }) {
+    console.log('params', params);
+    const onOpen = useCallback((path) => {
+        onNavigate?.(path);
+    }, [onNavigate]);
+    const onEdit = useCallback((slug) => {
+        onNavigate?.(`${slug}/edit`);
+    }, [onNavigate]);
+    const onCreate = useCallback(() => {
+        onNavigate?.(`${path}/new`);
+    }, [onNavigate]);
+    const onDelete = useCallback((doc) => {
+        // alert
+    }, []);
+    const value = {
+        theme,
+        path,
+        locale,
+        params,
+        onCreate,
+        onEdit,
+        onOpen,
+        onDelete,
+    };
+    return (_jsx(DocumentContext.Provider, { value: value, children: children }));
+}
+/**
+ * Hook to access document context
+ * @throws Error if used outside of DocumentProvider
+ */
+export function useDocument() {
+    const context = useContext(DocumentContext);
+    if (context === null) {
+        throw new Error('useDocument must be used within a DocumentProvider');
+    }
+    return context;
+}

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

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

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

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

package/dist/client/components/DocumentView.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BlockNoteView } from '@blocknote/mantine';
+import '@blocknote/mantine/style.css';
+import { useCreateBlockNote } from '@blocknote/react';
+import { Clock, Edit, Loader2, User } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useDocumentQuery } from '../hooks/useDocsQuery.js';
+import { blockNoteTheme } from '../lib/blocknoteTheme.js';
+import { useDocument } from './DocumentProvider.js';
+import { ExportButton } from './ExportButton.js';
+// Default content when document has no content
+const getDefaultContent = () => [
+    {
+        type: 'paragraph',
+        content: '',
+    },
+];
+export function DocumentView({}) {
+    const { params, onCreate, onEdit, theme } = useDocument();
+    const { data: doc, isLoading, error } = useDocumentQuery(params.documentSlug);
+    const [hasLoaded, setHasLoaded] = useState(false);
+    // Creates a new editor instance in read-only mode
+    const editor = useCreateBlockNote({
+        initialContent: getDefaultContent(),
+    });
+    const handleEdit = useCallback(() => {
+        if (!doc)
+            return;
+        onEdit(params.slugs.join('/') + '/' + doc.slug);
+    }, [doc, onEdit]);
+    // Load document content when available
+    useEffect(() => {
+        if (doc?.content && editor && !hasLoaded) {
+            try {
+                const content = typeof doc.content === 'string'
+                    ? JSON.parse(doc.content)
+                    : doc.content;
+                if (Array.isArray(content) && content.length > 0) {
+                    editor.replaceBlocks(editor.document, content);
+                }
+            }
+            catch (e) {
+                console.error('Failed to parse document content:', e);
+            }
+            setHasLoaded(true);
+        }
+    }, [doc, editor, hasLoaded]);
+    if (isLoading) {
+        return (_jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-gray-400" }) }));
+    }
+    if (error || !doc) {
+        return (_jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: _jsx("p", { className: "text-red-500", children: "Failed to load document. Please try again." }) }));
+    }
+    return (_jsxs("div", { className: "max-w-[80%] mx-auto", children: [_jsxs("div", { className: "mb-8", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 mb-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [doc.emoji && (_jsx("span", { className: "text-5xl leading-none", role: "img", "aria-label": "document emoji", children: doc.emoji })), _jsx("h1", { className: "text-3xl font-bold", children: doc.title })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [doc && (_jsx(ExportButton, { documentId: doc.id, documentTitle: doc.title })), _jsxs("button", { onClick: handleEdit, className: "px-3 py-1.5 text-sm bg-secondary text-white rounded-md hover:bg-primary flex items-center gap-2 transition-colors", children: [_jsx(Edit, { className: "h-4 w-4" }), "Edit"] })] })] }), _jsxs("div", { className: "flex items-center gap-6 text-sm text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(User, { className: "h-4 w-4" }), _jsxs("span", { children: ["Author ID: ", doc.authorId] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "h-4 w-4" }), _jsxs("span", { children: ["Updated", ' ', doc.updatedAt
+                                                ? new Date(doc.updatedAt).toLocaleDateString()
+                                                : 'N/A'] })] })] })] }), doc.cover && (_jsx("div", { className: "mb-8 -mx-4 sm:-mx-8 lg:-mx-12", children: _jsx("div", { className: "relative w-full max-h-80 overflow-hidden", children: _jsx("img", { src: doc.cover, alt: doc.title, className: "w-full h-full object-cover" }) }) })), _jsx("div", { children: _jsx(BlockNoteView, { editor: editor, editable: false, theme: blockNoteTheme[theme], className: "[&_.bn-editor]:p-0 [&_.bn-editor]:px-0 [&_.bn-container]:max-w-none [&_.bn-editor]:!px-0" }) })] }));
+}

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

@@ -0,0 +1,5 @@
+import { FlattenedItem } from '../../shared/types';
+export declare function DragOverlayItem({ doc }: {
+    doc: FlattenedItem;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DragOverlayItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragOverlayItem.d.ts","sourceRoot":"","sources":["../../../src/client/components/DragOverlayItem.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAGlD,wBAAgB,eAAe,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,aAAa,CAAA;CAAE,2CAyB9D"}

package/dist/client/components/DragOverlayItem.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileTextIcon, FolderOpenIcon } from 'lucide-react';
+// Drag Overlay Item - shown while dragging
+export function DragOverlayItem({ doc }) {
+    return (_jsxs("div", { className: [
+            'flex items-center gap-1 w-full px-2 py-1.5 text-sm rounded-md shadow-lg',
+            'bg-white dark:bg-zinc-800 border border-border opacity-90 cursor-grabbing',
+        ].join(' '), style: { paddingLeft: doc.depth * 12 + 8 }, children: [_jsx("div", { className: "w-5" }), doc.emoji ? (_jsx("span", { className: "text-base shrink-0", children: doc.emoji })) : doc.hasChildren ? (_jsx(FolderOpenIcon, { 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 font-medium", children: doc.title })] }));
+}

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

@@ -0,0 +1,8 @@
+interface EmojiPickerProps {
+    value: string | null | undefined;
+    onChange: (emoji: string) => void;
+    className?: string;
+}
+export declare function EmojiPicker({ value, onChange, className }: EmojiPickerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=EmojiPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/client/components/EmojiPicker.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAoE3E"}

package/dist/client/components/EmojiPicker.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+// Popular emojis for documents
+const POPULAR_EMOJIS = [
+    '📄', '📝', '📊', '📈', '📉', '📑', '📋', '📁', '📂', '🗂️',
+    '📦', '📮', '📯', '📰', '📱', '💻', '🖥️', '📀', '💿', '📼',
+    '🌸', '🌺', '🌻', '🌼', '🌷', '🌹', '🌵', '🌲', '🌳', '🌴',
+    '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐',
+    '⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱',
+    '🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐',
+    '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '❣️',
+    '⭐', '🌟', '✨', '💫', '⚡', '🔥', '💥', '☄️', '☀️', '🌤️',
+    '🔴', '🟠', '🟡', '🟢', '🔵', '🟣', '⚫', '⚪', '🟤', '🔘',
+    '✅', '❌', '⭕', '🚫', '💯', '💢', '♨️', '🚷', '🚯', '🚳',
+];
+export function EmojiPicker({ value, onChange, className }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const dropdownRef = useRef(null);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        }
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    return (_jsxs("div", { ref: dropdownRef, className: "relative", children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: [
+                    'h-10 w-10 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900',
+                    'hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-center text-xl transition-colors',
+                    className,
+                ].join(' '), children: value || '📄' }), isOpen && (_jsxs("div", { className: "absolute top-full left-0 mt-1 z-50 w-64 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg p-2", children: [_jsx("div", { className: "grid grid-cols-8 gap-1", children: POPULAR_EMOJIS.map((emoji) => (_jsx("button", { onClick: () => {
+                                onChange(emoji);
+                                setIsOpen(false);
+                            }, className: [
+                                'h-8 w-8 rounded hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-center text-lg transition-colors',
+                                value === emoji && 'bg-gray-100 dark:bg-gray-800',
+                            ].join(' '), children: emoji }, emoji))) }), value && (_jsx("button", { onClick: () => {
+                            onChange('');
+                            setIsOpen(false);
+                        }, className: "mt-2 w-full py-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors", children: "Remove emoji" }))] }))] }));
+}

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

@@ -0,0 +1,22 @@
+export interface ExportButtonProps {
+    documentId: string;
+    documentTitle?: string;
+    baseUrl?: string;
+    className?: string;
+    buttonClassName?: string;
+    menuClassName?: string;
+}
+/**
+ * Export button with dropdown menu for different formats
+ *
+ * @example
+ * ```tsx
+ * <ExportButton
+ *   documentId="doc-123"
+ *   documentTitle="My Document"
+ *   baseUrl="/api"
+ * />
+ * ```
+ */
+export declare function ExportButton({ documentId, documentTitle, baseUrl, className, buttonClassName, menuClassName, }: ExportButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ExportButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExportButton.d.ts","sourceRoot":"","sources":["../../../src/client/components/ExportButton.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAyCD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAC3B,UAAU,EACV,aAAa,EACb,OAAO,EACP,SAAc,EACd,eAAoB,EACpB,aAAkB,GACnB,EAAE,iBAAiB,2CAoHnB"}

package/dist/client/components/ExportButton.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { Download, FileText, FileType, FileCode, File } from 'lucide-react';
+import { useExport } from '../hooks/useExport.js';
+const EXPORT_OPTIONS = [
+    {
+        format: 'docx',
+        label: 'Microsoft Word',
+        description: 'Editable document format',
+        icon: _jsx(FileText, { className: "w-4 h-4 text-blue-600" }),
+        extension: 'docx',
+    },
+    {
+        format: 'pdf',
+        label: 'PDF Document',
+        description: 'Print-ready format',
+        icon: _jsx(FileType, { className: "w-4 h-4 text-red-600" }),
+        extension: 'pdf',
+    },
+    {
+        format: 'html',
+        label: 'HTML Page',
+        description: 'Web page format',
+        icon: _jsx(FileCode, { className: "w-4 h-4 text-orange-600" }),
+        extension: 'html',
+    },
+    {
+        format: 'markdown',
+        label: 'Markdown',
+        description: 'Plain text with formatting',
+        icon: _jsx(File, { className: "w-4 h-4 text-gray-600" }),
+        extension: 'md',
+    },
+];
+/**
+ * Export button with dropdown menu for different formats
+ *
+ * @example
+ * ```tsx
+ * <ExportButton
+ *   documentId="doc-123"
+ *   documentTitle="My Document"
+ *   baseUrl="/api"
+ * />
+ * ```
+ */
+export function ExportButton({ documentId, documentTitle, baseUrl, className = '', buttonClassName = '', menuClassName = '', }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const menuRef = useRef(null);
+    const { exportDocument, isExporting } = useExport({ baseUrl });
+    // Close menu when clicking outside
+    useEffect(() => {
+        function handleClickOutside(event) {
+            if (menuRef.current && !menuRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        }
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const handleExport = async (format) => {
+        setIsOpen(false);
+        const baseName = documentTitle
+            ? `${documentTitle.replace(/[^a-zA-Z0-9\s-]/g, '').replace(/\s+/g, '-')}`
+            : 'document';
+        const extension = format === 'markdown' ? 'md' : format;
+        const defaultFilename = `${baseName}.${extension}`;
+        try {
+            await exportDocument(documentId, format, defaultFilename);
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : 'Export failed';
+            // Show alert for now - could be replaced with a toast notification
+            if (message.includes('docx') || message.includes('puppeteer') || message.includes('playwright')) {
+                alert(`Missing dependency: ${message}\n\nInstall with:\n${format === 'docx' ? 'npm install docx' : 'npm install puppeteer'}`);
+            }
+            else {
+                alert(`Export failed: ${message}`);
+            }
+        }
+    };
+    return (_jsxs("div", { className: `relative inline-block ${className}`, ref: menuRef, children: [_jsxs("button", { onClick: () => setIsOpen(!isOpen), disabled: isExporting, className: `
+          inline-flex items-center gap-2 px-3 py-1.5
+          bg-white border border-gray-300 rounded-md
+          text-sm font-medium text-gray-700
+          hover:bg-gray-50 hover:border-gray-400
+          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1
+          disabled:opacity-50 disabled:cursor-not-allowed
+          transition-colors
+          ${buttonClassName}
+        `, children: [_jsx(Download, { className: `w-4 h-4 ${isExporting ? 'animate-bounce' : ''}` }), _jsx("span", { children: "Export" }), _jsx("svg", { className: `w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), isOpen && (_jsx("div", { className: `
+            absolute right-0 mt-2 w-64
+            bg-white border border-gray-200 rounded-lg shadow-lg
+            z-50 overflow-hidden
+            ${menuClassName}
+          `, children: _jsxs("div", { className: "py-1", children: [_jsx("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider", children: "Export as" }), EXPORT_OPTIONS.map((option) => (_jsxs("button", { onClick: () => handleExport(option.format), disabled: isExporting, className: "\n                  w-full flex items-start gap-3 px-3 py-2.5\n                  text-left hover:bg-gray-50\n                  focus:outline-none focus:bg-gray-50\n                  disabled:opacity-50 disabled:cursor-not-allowed\n                  transition-colors\n                ", children: [_jsx("div", { className: "flex-shrink-0 mt-0.5", children: option.icon }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "text-sm font-medium text-gray-900", children: option.label }), _jsx("div", { className: "text-xs text-gray-500", children: option.description })] }), _jsxs("div", { className: "flex-shrink-0 text-xs text-gray-400 uppercase", children: [".", option.extension] })] }, option.format)))] }) }))] }));
+}

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

@@ -0,0 +1,7 @@
+interface DocsLayoutProps {
+    children: React.ReactNode;
+    userAvatar?: React.ReactNode;
+}
+export declare function Layout({ children, userAvatar }: DocsLayoutProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Layout.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../src/client/components/Layout.tsx"],"names":[],"mappings":"AAgBA,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAmJD,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,eAAe,2CA8J/D"}

package/dist/client/components/Layout.js

@@ -0,0 +1,172 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileText, PanelLeftCloseIcon, PanelLeftOpenIcon, Plus, Search, } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useDocumentsQuery } from '../hooks/useDocsQuery.js';
+import { Breadcrumbs } from './Breadcrumbs.js';
+import { useDocument } from './DocumentProvider.js';
+import { Sidebar } from './Sidebar.js';
+// 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 Layout({ children, userAvatar }) {
+    const { onOpen, onCreate, params } = useDocument();
+    const [expandedFolders, setExpandedFolders] = useState(new Set());
+    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 documents = data?.documents ?? [];
+    // Search query for header search
+    const { data: searchResultsData } = useDocumentsQuery(debouncedSearchQuery.length > 0 ? { search: debouncedSearchQuery } : {});
+    const searchResults = searchResultsData?.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);
+    }, []);
+    return (_jsxs("div", { className: "flex h-screen w-full", children: [_jsx(Sidebar, { isOpen: isSidebarOpen, onToggle: setIsSidebarOpen, documents: documents }), _jsxs("main", { className: "flex-1 flex flex-col min-w-0 overflow-hidden", children: [params.mode === 'view' && (_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, { 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 bg-background border border-border rounded-md shadow-2xl 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: () => {
+                                                                onOpen(doc.id);
+                                                                setHeaderSearchQuery('');
+                                                                setShowSearchResults(false);
+                                                            }, className: "w-full px-3 py-2 text-left hover:bg-primary hover:text-primary-foreground 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-muted-foreground" })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-sm truncate", children: doc.title }), breadcrumb && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: breadcrumb }))] })] }) }, doc.id));
+                                                    }) })) }))] }), _jsxs("button", { onClick: onCreate, 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/ReactEmbedDocs.d.ts

@@ -0,0 +1,8 @@
+export interface ReactEmbedDocsProps {
+    path?: string;
+    theme?: 'light' | 'dark';
+    locale?: 'ru' | 'en';
+    onNavigate?: (path: string) => void;
+}
+export declare function ReactEmbedDocs(props: ReactEmbedDocsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReactEmbedDocs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ReactEmbedDocs.d.ts","sourceRoot":"","sources":["../../../src/client/components/ReactEmbedDocs.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CACpC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAcxD"}

package/dist/client/components/ReactEmbedDocs.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { processPath } from '../lib/path.js';
+import { DocumentContent } from './DocumentContent.js';
+import { DocumentProvider } from './DocumentProvider.js';
+import { Layout } from './Layout.js';
+export function ReactEmbedDocs(props) {
+    return (_jsx(DocumentProvider, { theme: props.theme, path: props.path ?? '', locale: props.locale, onNavigate: props.onNavigate, params: processPath(props.path), children: _jsx(Layout, { children: _jsx(DocumentContent, {}) }) }));
+}

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

@@ -0,0 +1,2 @@
+export declare function SearchInput(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/client/components/SearchInput.tsx"],"names":[],"mappings":"AAGA,wBAAgB,WAAW,4CAc1B"}

package/dist/client/components/SearchInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchIcon } from 'lucide-react';
+import { useState } from 'react';
+export function SearchInput() {
+    const [searchQuery, setSearchQuery] = useState('');
+    return (_jsxs("div", { className: "relative", children: [_jsx(SearchIcon, { 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" })] }));
+}

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

@@ -0,0 +1,10 @@
+import { DocumentSummary } from '../../shared/types';
+interface IProps {
+    isOpen: boolean;
+    currentDocId?: string | null;
+    documents: DocumentSummary[];
+    onToggle: (isOpen: boolean) => void;
+}
+export declare function Sidebar({ isOpen, onToggle, documents, currentDocId }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=Sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/client/components/Sidebar.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAiB,MAAM,oBAAoB,CAAA;AAMnE,UAAU,MAAM;IACd,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,SAAS,EAAE,eAAe,EAAE,CAAA;IAC5B,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC;AACD,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,MAAM,2CA0Q5E"}