@brainfish-ai/devdoc 0.1.42 → 0.1.44

package/renderer/components/docs-viewer/sidebar/index.js

@@ -0,0 +1,196 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X, Spinner } from '@phosphor-icons/react';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { CollectionTree } from './collection-tree';
+import { SidebarSection } from './sidebar-section';
+import { SidebarItem, SlidingIndicatorProvider } from './sidebar-item';
+import { SidebarGroup } from './sidebar-group';
+import { useMobile } from '@/lib/api-docs/mobile-context';
+import { cn } from '@/lib/utils';
+export function DocsSidebar({ collection, selectedRequest, selectedDocSection, selectedDocPage, activeTab, onSelectRequest, onSelectDocumentation, onSelectDocPage, apiVersions, selectedApiVersion, onApiVersionChange, isVersionLoading }) {
+    const { isMobile, isLeftSidebarOpen, closeLeftSidebar } = useMobile();
+    const [mounted, setMounted] = useState(false);
+    // Ensure we're mounted before using portal (for SSR)
+    useEffect(()=>{
+        setMounted(true);
+    }, []);
+    // Handle request selection with mobile close
+    const handleSelectRequest = (request)=>{
+        onSelectRequest(request);
+        if (isMobile) {
+            closeLeftSidebar();
+        }
+    };
+    // Handle doc click with mobile close
+    const handleDocClickWithClose = (headingId)=>{
+        if (onSelectDocumentation) {
+            onSelectDocumentation(headingId);
+        }
+        if (isMobile) {
+            closeLeftSidebar();
+        }
+    };
+    // Handle doc page click with mobile close
+    const handleDocPageClick = (slug)=>{
+        if (onSelectDocPage) {
+            onSelectDocPage(slug);
+        }
+        if (isMobile) {
+            closeLeftSidebar();
+        }
+    };
+    // Get doc groups from collection
+    const docGroups = collection.docGroups || [];
+    // Check if any child in a group is selected
+    const isChildSelected = (page)=>{
+        if (!page.children) return false;
+        return page.children.some((child)=>selectedDocPage === child.slug);
+    };
+    // Get the selected child slug for a group (for triggering auto-expand)
+    const getSelectedChildSlug = (page)=>{
+        if (!page.children) return null;
+        const selected = page.children.find((child)=>selectedDocPage === child.slug);
+        return selected?.slug || null;
+    };
+    // Render a doc page item (may be a collapsible group with children)
+    const renderDocPage = (page)=>{
+        // Handle collapsible group with children
+        if (page.isGroup && page.children && page.children.length > 0) {
+            return /*#__PURE__*/ _jsx(SidebarGroup, {
+                title: page.title,
+                defaultOpen: isChildSelected(page),
+                selectedChildSlug: getSelectedChildSlug(page),
+                children: page.children.map((child)=>{
+                    const isSelected = selectedDocPage === child.slug;
+                    return /*#__PURE__*/ _jsx(SidebarItem, {
+                        itemId: `doc-${child.slug}`,
+                        selected: isSelected,
+                        indent: 1,
+                        icon: child.icon,
+                        onClick: ()=>handleDocPageClick(child.slug),
+                        children: child.title
+                    }, child.id);
+                })
+            }, page.id);
+        }
+        // Regular page item
+        const isSelected = selectedDocPage === page.slug;
+        return /*#__PURE__*/ _jsx(SidebarItem, {
+            itemId: `doc-${page.slug}`,
+            selected: isSelected,
+            icon: page.icon,
+            onClick: ()=>handleDocPageClick(page.slug),
+            children: page.title
+        }, page.id);
+    };
+    // Sidebar content component (shared between mobile and desktop)
+    const sidebarContent = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            isMobile && /*#__PURE__*/ _jsx("div", {
+                className: "px-4 h-[41px] flex items-center justify-end border-b border-sidebar-border shrink-0",
+                children: /*#__PURE__*/ _jsx(Button, {
+                    variant: "ghost",
+                    size: "icon",
+                    onClick: closeLeftSidebar,
+                    className: "h-7 w-7 lg:hidden",
+                    children: /*#__PURE__*/ _jsx(X, {
+                        className: "h-4 w-4",
+                        weight: "bold"
+                    })
+                })
+            }),
+            activeTab === 'api-reference' && apiVersions && apiVersions.length > 1 && /*#__PURE__*/ _jsxs("div", {
+                className: "docs-sidebar-version-selector px-4 py-3 border-b border-sidebar-border shrink-0",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between mb-1.5",
+                        children: [
+                            /*#__PURE__*/ _jsx("label", {
+                                className: "docs-sidebar-version-label text-xs font-medium text-muted-foreground",
+                                children: "API Version"
+                            }),
+                            isVersionLoading && /*#__PURE__*/ _jsx(Spinner, {
+                                className: "h-3 w-3 animate-spin text-muted-foreground"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Select, {
+                        value: selectedApiVersion || apiVersions.find((v)=>v.default)?.version || apiVersions[0]?.version,
+                        onValueChange: (value)=>onApiVersionChange?.(value),
+                        disabled: isVersionLoading,
+                        children: [
+                            /*#__PURE__*/ _jsx(SelectTrigger, {
+                                className: cn("docs-sidebar-version-trigger w-full h-9 text-sm", isVersionLoading && "opacity-50"),
+                                children: /*#__PURE__*/ _jsx(SelectValue, {
+                                    placeholder: "Select version"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(SelectContent, {
+                                children: apiVersions.map((v)=>/*#__PURE__*/ _jsxs(SelectItem, {
+                                        value: v.version,
+                                        children: [
+                                            v.version,
+                                            v.default && /*#__PURE__*/ _jsx("span", {
+                                                className: "ml-2 text-xs text-muted-foreground",
+                                                children: "(latest)"
+                                            })
+                                        ]
+                                    }, v.version))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(SlidingIndicatorProvider, {
+                className: "docs-sidebar-content flex-1 overflow-y-auto overflow-x-hidden custom-scroll",
+                children: [
+                    docGroups.length > 0 && /*#__PURE__*/ _jsx(_Fragment, {
+                        children: docGroups.map((group, index)=>/*#__PURE__*/ _jsx(SidebarSection, {
+                                title: group.title,
+                                icon: group.icon,
+                                className: index > 0 ? '' : '',
+                                children: group.pages.map(renderDocPage)
+                            }, group.id))
+                    }),
+                    (collection.folders.length > 0 || collection.requests.length > 0) && /*#__PURE__*/ _jsx(SidebarSection, {
+                        title: "Endpoints",
+                        className: docGroups.length > 0 ? 'border-t border-sidebar-border' : '',
+                        children: /*#__PURE__*/ _jsx(CollectionTree, {
+                            collection: collection,
+                            selectedRequest: selectedRequest,
+                            onSelectRequest: handleSelectRequest
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+    // Mobile sidebar rendered via portal to escape stacking context
+    const mobileSidebar = mounted && isMobile ? /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            isLeftSidebarOpen && /*#__PURE__*/ _jsx("div", {
+                className: "docs-sidebar-overlay fixed inset-0 bg-black/50 z-[55] lg:hidden",
+                onClick: closeLeftSidebar
+            }),
+            /*#__PURE__*/ _jsx("aside", {
+                className: cn("docs-sidebar flex flex-col border-r border-sidebar-border overflow-hidden bg-muted dark:bg-background", "fixed inset-y-0 left-0 z-[60] w-[280px] h-full", "transform transition-transform duration-300 ease-in-out", !isLeftSidebarOpen && "-translate-x-full", isLeftSidebarOpen && "translate-x-0"),
+                children: sidebarContent
+            })
+        ]
+    }), document.body) : null;
+    // Desktop sidebar rendered in place
+    const desktopSidebar = !isMobile ? /*#__PURE__*/ _jsx("aside", {
+        className: cn("docs-sidebar flex flex-col border-r border-sidebar-border overflow-hidden bg-muted dark:bg-background", "relative w-72 h-full"),
+        children: sidebarContent
+    }) : null;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            mobileSidebar,
+            desktopSidebar
+        ]
+    });
+}

package/renderer/components/docs-viewer/sidebar/right-sidebar.js

@@ -0,0 +1,159 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { X, ArrowClockwise, Sparkle } from '@phosphor-icons/react';
+import { AgentChat } from '../agent';
+import { Button } from '@/components/ui/button';
+import { useMobile } from '@/lib/api-docs/mobile-context';
+import { cn } from '@/lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+export function RightSidebar({ request, collection, apiSummary, onNavigateToEndpoint, onPrefillParameters, debugContext, onClearDebugContext, explainContext, onClearExplainContext, onOpenGlobalAuth, onNavigateToAuthTab, onNavigateToParamsTab, onNavigateToBodyTab, onNavigateToHeadersTab, onNavigateToDocSection, onNavigateToDocPage }) {
+    // Mobile context - now used for both mobile and desktop
+    const { isMobile, isRightSidebarOpen, closeRightSidebar } = useMobile();
+    const [mounted, setMounted] = useState(false);
+    // Ensure we're mounted before using portal (for SSR)
+    useEffect(()=>{
+        setMounted(true);
+    }, []);
+    // Debug context to send to agent (full context for card display)
+    const [pendingDebugContext, setPendingDebugContext] = useState(null);
+    // Handle debug context
+    useEffect(()=>{
+        if (debugContext) {
+            // Pass full context to agent
+            setPendingDebugContext(debugContext);
+            // Clear the debug context from parent
+            onClearDebugContext?.();
+        }
+    }, [
+        debugContext,
+        onClearDebugContext
+    ]);
+    // Clear debug context after it's been used
+    const handleDebugContextConsumed = ()=>{
+        setPendingDebugContext(null);
+    };
+    // Key for resetting chat
+    const [chatKey, setChatKey] = useState(0);
+    // Track if there are messages
+    const [hasMessages, setHasMessages] = useState(false);
+    // Handle reset conversation
+    const handleResetConversation = useCallback(()=>{
+        // Clear chat storage before remounting
+        localStorage.removeItem('brainfish-agent-chat');
+        setChatKey((prev)=>prev + 1);
+        setHasMessages(false);
+    }, []);
+    // Sidebar content component
+    const sidebarContent = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "docs-agent-header shrink-0 px-3 sm:px-4 h-[41px] flex items-center border-b border-border bg-muted/30",
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center justify-between gap-2 w-full",
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "docs-agent-title flex items-center gap-2.5",
+                            children: [
+                                /*#__PURE__*/ _jsx(Sparkle, {
+                                    className: "size-5 text-primary",
+                                    weight: "fill"
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "text-sm font-medium",
+                                    children: "Assistant"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-1 shrink-0",
+                            children: [
+                                hasMessages && /*#__PURE__*/ _jsxs(Tooltip, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx(Button, {
+                                                variant: "ghost",
+                                                size: "icon",
+                                                onClick: handleResetConversation,
+                                                className: "h-7 w-7 text-muted-foreground hover:text-foreground",
+                                                children: /*#__PURE__*/ _jsx(ArrowClockwise, {
+                                                    className: "h-4 w-4",
+                                                    weight: "bold"
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TooltipContent, {
+                                            side: "bottom",
+                                            children: "New conversation"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs(Tooltip, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx(Button, {
+                                                variant: "ghost",
+                                                size: "icon",
+                                                onClick: closeRightSidebar,
+                                                className: "h-7 w-7 text-muted-foreground hover:text-foreground",
+                                                children: /*#__PURE__*/ _jsx(X, {
+                                                    className: "h-4 w-4",
+                                                    weight: "bold"
+                                                })
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx(TooltipContent, {
+                                            side: "bottom",
+                                            children: "Close"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "docs-agent-content flex-1 overflow-hidden",
+                children: /*#__PURE__*/ _jsx(AgentChat, {
+                    collection: collection,
+                    currentEndpoint: request,
+                    apiSummary: apiSummary,
+                    onNavigate: onNavigateToEndpoint,
+                    onPrefill: onPrefillParameters,
+                    debugContext: pendingDebugContext,
+                    onDebugContextConsumed: handleDebugContextConsumed,
+                    explainContext: explainContext,
+                    onExplainContextConsumed: onClearExplainContext,
+                    onOpenGlobalAuth: onOpenGlobalAuth,
+                    onNavigateToAuthTab: onNavigateToAuthTab,
+                    onNavigateToParamsTab: onNavigateToParamsTab,
+                    onNavigateToBodyTab: onNavigateToBodyTab,
+                    onNavigateToHeadersTab: onNavigateToHeadersTab,
+                    onNavigateToDocSection: onNavigateToDocSection,
+                    onNavigateToDocPage: onNavigateToDocPage,
+                    onHasMessagesChange: setHasMessages
+                }, chatKey)
+            })
+        ]
+    });
+    // Render via portal for proper z-index stacking (both mobile and desktop)
+    if (!mounted) return null;
+    return /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            isMobile && isRightSidebarOpen && /*#__PURE__*/ _jsx("div", {
+                className: "docs-agent-overlay fixed inset-0 bg-black/50 z-[55]",
+                onClick: closeRightSidebar
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: cn("docs-agent-panel border-l border-border bg-background flex flex-col overflow-hidden", "fixed inset-y-0 right-0 z-[60]", // Width: smaller on mobile, full 384px on desktop
+                "w-[320px] sm:w-[360px] lg:w-96", // Slide animation
+                "transform transition-transform duration-300 ease-in-out", isRightSidebarOpen ? "translate-x-0" : "translate-x-full"),
+                children: sidebarContent
+            })
+        ]
+    }), document.body);
+}

package/renderer/components/docs-viewer/sidebar/sidebar-group.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { CaretRight } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+/**
+ * Sidebar Group component - collapsible group with toggle
+ * Arrow on right side with smooth rotation and expand animations
+ */ export function SidebarGroup({ title, children, defaultOpen = false, selected = false, indent = 0, onClick, asideContent, selectedChildSlug }) {
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+    const contentRef = useRef(null);
+    const [contentHeight, setContentHeight] = useState(defaultOpen ? undefined : 0);
+    // Auto-expand when a child is selected (e.g., via agent navigation)
+    // Triggers on defaultOpen change OR when selectedChildSlug changes (even if defaultOpen stays true)
+    useEffect(()=>{
+        if (defaultOpen) {
+            setIsOpen(true);
+        }
+    }, [
+        defaultOpen,
+        selectedChildSlug
+    ]);
+    // Update height when open state changes
+    useEffect(()=>{
+        if (isOpen) {
+            const height = contentRef.current?.scrollHeight;
+            setContentHeight(height);
+            // After animation, set to auto for dynamic content
+            const timer = setTimeout(()=>setContentHeight(undefined), 200);
+            return ()=>clearTimeout(timer);
+        } else {
+            // First set the current height, then animate to 0
+            const height = contentRef.current?.scrollHeight;
+            setContentHeight(height);
+            requestAnimationFrame(()=>{
+                setContentHeight(0);
+            });
+        }
+    }, [
+        isOpen
+    ]);
+    const handleToggle = ()=>{
+        setIsOpen(!isOpen);
+        onClick?.();
+    };
+    return /*#__PURE__*/ _jsxs("li", {
+        className: "docs-sidebar-group flex flex-col",
+        children: [
+            /*#__PURE__*/ _jsxs("button", {
+                type: "button",
+                "aria-expanded": isOpen,
+                onClick: handleToggle,
+                className: cn(// Base styles
+                'docs-sidebar-group-toggle group/button flex items-center rounded-lg px-3 py-2 w-full text-left', 'text-sm leading-5 transition-colors duration-150', // State variants
+                selected ? 'docs-sidebar-group-active bg-sidebar-primary text-sidebar-primary-foreground font-medium' : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-foreground'),
+                style: {
+                    paddingLeft: indent > 0 ? `${indent * 12 + 12}px` : undefined
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "flex-1 truncate font-medium",
+                        children: title
+                    }),
+                    asideContent && /*#__PURE__*/ _jsx("span", {
+                        className: "ml-2 shrink-0",
+                        children: asideContent
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "docs-sidebar-group-icon ml-2 text-sidebar-foreground/50 group-hover/button:text-sidebar-foreground/70",
+                        children: /*#__PURE__*/ _jsx(CaretRight, {
+                            weight: "bold",
+                            className: cn("h-3.5 w-3.5 transition-transform duration-200 ease-out", isOpen && "rotate-90")
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                ref: contentRef,
+                className: cn("docs-sidebar-group-items flex flex-col overflow-hidden transition-all duration-200 ease-out", !isOpen && "opacity-0", isOpen && "opacity-100"),
+                style: {
+                    height: contentHeight !== undefined ? `${contentHeight}px` : 'auto'
+                },
+                children: children
+            })
+        ]
+    });
+}

package/renderer/components/docs-viewer/sidebar/sidebar-item.js

@@ -0,0 +1,172 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useLayoutEffect, useState, createContext, useContext } from 'react';
+import { cn } from '@/lib/utils';
+import { getPhosphorIcon } from '@/lib/utils/icons';
+const SlidingIndicatorContext = /*#__PURE__*/ createContext(null);
+export function SlidingIndicatorProvider({ children, className }) {
+    const containerRef = useRef(null);
+    const itemsRef = useRef(new Map());
+    const [selectedId, setSelectedId] = useState(null);
+    const [indicatorStyle, setIndicatorStyle] = useState({
+        opacity: 0,
+        top: 0,
+        height: 0
+    });
+    const registerItem = (id, element)=>{
+        if (element) {
+            itemsRef.current.set(id, element);
+        } else {
+            itemsRef.current.delete(id);
+        }
+    };
+    // Update indicator position when selection changes
+    useLayoutEffect(()=>{
+        if (!selectedId || !containerRef.current) {
+            setIndicatorStyle((prev)=>({
+                    ...prev,
+                    opacity: 0
+                }));
+            return;
+        }
+        const selectedElement = itemsRef.current.get(selectedId);
+        if (!selectedElement) {
+            setIndicatorStyle((prev)=>({
+                    ...prev,
+                    opacity: 0
+                }));
+            return;
+        }
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const itemRect = selectedElement.getBoundingClientRect();
+        setIndicatorStyle({
+            opacity: 1,
+            top: itemRect.top - containerRect.top + containerRef.current.scrollTop,
+            height: itemRect.height,
+            left: 8,
+            right: 8
+        });
+    }, [
+        selectedId
+    ]);
+    // Also update on scroll to keep indicator in sync
+    useEffect(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        const handleScroll = ()=>{
+            if (!selectedId) return;
+            const selectedElement = itemsRef.current.get(selectedId);
+            if (!selectedElement) return;
+            const containerRect = container.getBoundingClientRect();
+            const itemRect = selectedElement.getBoundingClientRect();
+            setIndicatorStyle((prev)=>({
+                    ...prev,
+                    top: itemRect.top - containerRect.top + container.scrollTop
+                }));
+        };
+        container.addEventListener('scroll', handleScroll, {
+            passive: true
+        });
+        return ()=>container.removeEventListener('scroll', handleScroll);
+    }, [
+        selectedId
+    ]);
+    return /*#__PURE__*/ _jsx(SlidingIndicatorContext.Provider, {
+        value: {
+            registerItem,
+            selectedId,
+            setSelectedId
+        },
+        children: /*#__PURE__*/ _jsxs("div", {
+            ref: containerRef,
+            className: cn('relative', className),
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "docs-sidebar-indicator absolute rounded-lg bg-background dark:bg-stone-800/50 pointer-events-none z-0",
+                    style: {
+                        ...indicatorStyle,
+                        transition: 'top 350ms cubic-bezier(0.4, 0, 0.2, 1), height 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-out'
+                    }
+                }),
+                children
+            ]
+        })
+    });
+}
+/**
+ * Sidebar Item component - individual clickable item in the sidebar
+ * Uses subtle sage/mint style when selected with smooth sliding animation
+ */ export function SidebarItem({ children, selected = false, active = false, disabled = false, indent = 0, onClick, className, asideContent, itemId, icon }) {
+    const buttonRef = useRef(null);
+    const context = useContext(SlidingIndicatorContext);
+    const id = itemId || String(children);
+    const IconComponent = getPhosphorIcon(icon);
+    // Register this item with the sliding indicator provider
+    useEffect(()=>{
+        if (context && buttonRef.current) {
+            context.registerItem(id, buttonRef.current);
+            return ()=>context.registerItem(id, null);
+        }
+    }, [
+        context,
+        id
+    ]);
+    // Update selected state in context
+    useEffect(()=>{
+        if (context && selected) {
+            context.setSelectedId(id);
+        }
+    }, [
+        context,
+        selected,
+        id
+    ]);
+    // Auto-scroll into view when selected (e.g., via agent navigation)
+    useEffect(()=>{
+        if (selected && buttonRef.current) {
+            // Small delay to allow folder expansion animation to complete
+            setTimeout(()=>{
+                buttonRef.current?.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'center'
+                });
+            }, 100);
+        }
+    }, [
+        selected
+    ]);
+    // Check if we're inside a sliding indicator provider
+    const hasSliding = context !== null;
+    return /*#__PURE__*/ _jsx("li", {
+        className: "docs-sidebar-item-wrapper flex flex-col",
+        children: /*#__PURE__*/ _jsxs("button", {
+            ref: buttonRef,
+            type: "button",
+            disabled: disabled,
+            "aria-selected": selected,
+            onClick: onClick,
+            className: cn(// Base styles
+            'docs-sidebar-item group/button flex items-center rounded-lg px-3 py-2 w-full text-left relative z-10', 'text-sm leading-5 transition-colors duration-150', // Indentation
+            indent > 0 && `ml-${indent * 3}`, // State variants
+            selected ? hasSliding ? 'docs-sidebar-item-active text-green-700 font-semibold dark:text-green-400' // No bg when sliding
+             : 'docs-sidebar-item-active bg-background text-green-700 font-semibold dark:bg-stone-800/50 dark:text-green-400' : active ? 'text-sidebar-foreground font-medium hover:bg-sidebar-accent/50' : disabled ? 'text-sidebar-foreground/50 cursor-default' : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-foreground', className),
+            style: {
+                paddingLeft: indent > 0 ? `${indent * 12 + 12}px` : undefined
+            },
+            children: [
+                IconComponent && /*#__PURE__*/ _jsx(IconComponent, {
+                    className: "h-4 w-4 mr-2 shrink-0 opacity-60",
+                    weight: "regular"
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    className: "flex-1 truncate",
+                    children: children
+                }),
+                asideContent && /*#__PURE__*/ _jsx("span", {
+                    className: "ml-2 shrink-0",
+                    children: asideContent
+                })
+            ]
+        })
+    });
+}

package/renderer/components/docs-viewer/sidebar/sidebar-section.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '@/lib/utils';
+import { getPhosphorIcon } from '@/lib/utils/icons';
+/**
+ * Sidebar Section component - groups items under a title with optional icon
+ */ export function SidebarSection({ title, children, className = '', icon }) {
+    const IconComponent = getPhosphorIcon(icon);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('docs-sidebar-section flex flex-col', className),
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "docs-sidebar-section-header flex items-center gap-2 px-4 py-3",
+                children: [
+                    IconComponent && /*#__PURE__*/ _jsx(IconComponent, {
+                        className: "docs-sidebar-section-icon h-4 w-4 text-sidebar-foreground/70",
+                        weight: "regular"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "docs-sidebar-section-title text-sm font-semibold text-sidebar-foreground",
+                        children: title
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                className: "docs-sidebar-section-items flex flex-col gap-0.5 px-2 pb-4",
+                children: children
+            })
+        ]
+    });
+}

package/renderer/components/theme-provider.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+export function ThemeProvider({ children, ...props }) {
+    return /*#__PURE__*/ _jsx(NextThemesProvider, {
+        ...props,
+        children: children
+    });
+}