@brainfish-ai/devdoc 0.1.48 → 0.1.49

package/renderer/components/docs-viewer/playground/graphql-playground.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { cn } from '@/lib/utils';
-import { Play, ArrowClockwise, Copy, Check, Spinner, X, FileText, BracketsCurly, Key, CaretRight, CaretDown, MagnifyingGlass, Lightning, ArrowsClockwise } from '@phosphor-icons/react';
+import { Play, ArrowClockwise, Copy, Check, Spinner, X, FileText, BracketsCurly, Key, CaretRight, CaretDown, MagnifyingGlass, Lightning, ArrowsClockwise, Bug, Lightbulb } from '@phosphor-icons/react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import Editor, { loader } from '@monaco-editor/react';
@@ -354,7 +354,7 @@ export function GraphQLPlayground({ endpoint, defaultQuery = `# Welcome to the G
 query {
   __typename
 }
-`, headers: defaultHeaders = {}, operations = [], selectedOperationId: externalSelectedId, hideExplorer = false, className, theme = 'dark', schemaSDL }) {
+`, headers: defaultHeaders = {}, operations = [], selectedOperationId: externalSelectedId, externalVariables, onStateChange, onDebugRequest, onExplainRequest, hideExplorer = false, className, theme = 'dark', schemaSDL }) {
     const [query, setQuery] = useState(defaultQuery);
     const [variables, setVariables] = useState('{}');
     const [customHeaders, setCustomHeaders] = useState(Object.keys(defaultHeaders).length > 0 ? JSON.stringify(defaultHeaders, null, 2) : '{}');
@@ -459,6 +459,35 @@ query {
         externalSelectedId,
         operations
     ]);
+    // Sync with external variables (from AI agent prefill)
+    useEffect(()=>{
+        if (externalVariables && Object.keys(externalVariables).length > 0) {
+            setVariables(JSON.stringify(externalVariables, null, 2));
+        }
+    }, [
+        externalVariables
+    ]);
+    // Report state changes to parent (for AI context)
+    useEffect(()=>{
+        if (onStateChange) {
+            onStateChange({
+                query,
+                variables,
+                response,
+                responseTime,
+                error,
+                isLoading
+            });
+        }
+    }, [
+        query,
+        variables,
+        response,
+        responseTime,
+        error,
+        isLoading,
+        onStateChange
+    ]);
     // Execute GraphQL query
     const executeQuery = useCallback(async ()=>{
         setIsLoading(true);
@@ -813,40 +842,109 @@ query {
                                                         })
                                                     ]
                                                 }),
-                                                response && /*#__PURE__*/ _jsxs(Tooltip, {
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex items-center gap-1",
                                                     children: [
-                                                        /*#__PURE__*/ _jsx(TooltipTrigger, {
-                                                            asChild: true,
-                                                            children: /*#__PURE__*/ _jsx(Button, {
-                                                                variant: "ghost",
-                                                                size: "sm",
-                                                                onClick: copyResponse,
-                                                                className: "h-7 px-2",
-                                                                children: copied ? /*#__PURE__*/ _jsxs(_Fragment, {
-                                                                    children: [
-                                                                        /*#__PURE__*/ _jsx(Check, {
-                                                                            className: "h-3.5 w-3.5 mr-1 text-emerald-500"
-                                                                        }),
-                                                                        /*#__PURE__*/ _jsx("span", {
-                                                                            className: "text-xs",
-                                                                            children: "Copied"
-                                                                        })
-                                                                    ]
-                                                                }) : /*#__PURE__*/ _jsxs(_Fragment, {
-                                                                    children: [
-                                                                        /*#__PURE__*/ _jsx(Copy, {
-                                                                            className: "h-3.5 w-3.5 mr-1"
-                                                                        }),
-                                                                        /*#__PURE__*/ _jsx("span", {
-                                                                            className: "text-xs",
-                                                                            children: "Copy"
-                                                                        })
-                                                                    ]
+                                                        response && hasErrors && onDebugRequest && /*#__PURE__*/ _jsxs(Tooltip, {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                                    asChild: true,
+                                                                    children: /*#__PURE__*/ _jsxs(Button, {
+                                                                        variant: "ghost",
+                                                                        size: "sm",
+                                                                        onClick: ()=>onDebugRequest({
+                                                                                query,
+                                                                                variables,
+                                                                                response,
+                                                                                responseTime,
+                                                                                error,
+                                                                                operationName: operations.find((op)=>op.id === selectedOperationId)?.name
+                                                                            }),
+                                                                        className: "h-7 px-2",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsx(Bug, {
+                                                                                className: "h-3.5 w-3.5 mr-1 text-red-500"
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "Debug"
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                                    children: "Ask AI to help debug this error"
+                                                                })
+                                                            ]
+                                                        }),
+                                                        response && !hasErrors && onExplainRequest && /*#__PURE__*/ _jsxs(Tooltip, {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                                    asChild: true,
+                                                                    children: /*#__PURE__*/ _jsxs(Button, {
+                                                                        variant: "ghost",
+                                                                        size: "sm",
+                                                                        onClick: ()=>onExplainRequest({
+                                                                                query,
+                                                                                variables,
+                                                                                response,
+                                                                                responseTime,
+                                                                                error,
+                                                                                operationName: operations.find((op)=>op.id === selectedOperationId)?.name
+                                                                            }),
+                                                                        className: "h-7 px-2",
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsx(Lightbulb, {
+                                                                                className: "h-3.5 w-3.5 mr-1 text-yellow-500"
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx("span", {
+                                                                                className: "text-xs",
+                                                                                children: "Explain"
+                                                                            })
+                                                                        ]
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                                    children: "Ask AI to explain this response"
                                                                 })
-                                                            })
+                                                            ]
                                                         }),
-                                                        /*#__PURE__*/ _jsx(TooltipContent, {
-                                                            children: "Copy response"
+                                                        response && /*#__PURE__*/ _jsxs(Tooltip, {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(TooltipTrigger, {
+                                                                    asChild: true,
+                                                                    children: /*#__PURE__*/ _jsx(Button, {
+                                                                        variant: "ghost",
+                                                                        size: "sm",
+                                                                        onClick: copyResponse,
+                                                                        className: "h-7 px-2",
+                                                                        children: copied ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                                                            children: [
+                                                                                /*#__PURE__*/ _jsx(Check, {
+                                                                                    className: "h-3.5 w-3.5 mr-1 text-emerald-500"
+                                                                                }),
+                                                                                /*#__PURE__*/ _jsx("span", {
+                                                                                    className: "text-xs",
+                                                                                    children: "Copied"
+                                                                                })
+                                                                            ]
+                                                                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                                                            children: [
+                                                                                /*#__PURE__*/ _jsx(Copy, {
+                                                                                    className: "h-3.5 w-3.5 mr-1"
+                                                                                }),
+                                                                                /*#__PURE__*/ _jsx("span", {
+                                                                                    className: "text-xs",
+                                                                                    children: "Copy"
+                                                                                })
+                                                                            ]
+                                                                        })
+                                                                    })
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(TooltipContent, {
+                                                                    children: "Copy response"
+                                                                })
+                                                            ]
                                                         })
                                                     ]
                                                 })

package/renderer/components/docs-viewer/shared/method-badge.js

@@ -2,13 +2,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from '@/lib/utils';
 const methodColors = {
+    // HTTP methods
     GET: 'bg-emerald-500/90 text-white',
     POST: 'bg-blue-500/90 text-white',
     PUT: 'bg-amber-500/90 text-white',
     DELETE: 'bg-red-500/90 text-white',
     PATCH: 'bg-violet-500/90 text-white',
     HEAD: 'bg-slate-500/90 text-white',
-    OPTIONS: 'bg-slate-500/90 text-white'
+    OPTIONS: 'bg-slate-500/90 text-white',
+    // GraphQL operations
+    QUERY: 'bg-pink-500/90 text-white',
+    MUTATION: 'bg-orange-500/90 text-white',
+    SUBSCRIPTION: 'bg-cyan-500/90 text-white',
+    GRAPHQL: 'bg-pink-500/90 text-white'
 };
 const sizeClasses = {
     sm: 'px-1.5 py-0.5 text-[10px]',
@@ -16,8 +22,11 @@ const sizeClasses = {
     lg: 'px-2.5 py-1 text-sm'
 };
 export function MethodBadge({ method, size = 'md', className = '' }) {
+    // Normalize method to uppercase and get color (fallback for unknown methods)
+    const normalizedMethod = method?.toUpperCase();
+    const colorClass = methodColors[normalizedMethod] || 'bg-slate-500/90 text-white';
     return /*#__PURE__*/ _jsx("span", {
-        className: cn('font-semibold rounded uppercase tracking-wide', methodColors[method], sizeClasses[size], className),
+        className: cn('font-semibold rounded uppercase tracking-wide', colorClass, sizeClasses[size], className),
         children: method
     });
 }

package/renderer/components/docs-viewer/sidebar/collection-tree.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo, useEffect, useRef } from 'react';
 import { Folder, FolderOpen } from '@phosphor-icons/react';
 import { MethodBadge } from '../shared/method-badge';
 import { SidebarItem } from './sidebar-item';
 import { SidebarGroup } from './sidebar-group';
+import { cn } from '@/lib/utils';
 /**
  * Find the folder ID that contains a request (recursive)
  */ function _findFolderContainingRequest(collection, requestId) {
@@ -45,7 +46,30 @@ import { SidebarGroup } from './sidebar-group';
     }
     return path;
 }
-export function CollectionTree({ collection, selectedRequest, onSelectRequest, searchQuery = '', level = 0 }) {
+export function CollectionTree({ collection, selectedRequest, onSelectRequest, searchQuery = '', level = 0, animate = false }) {
+    const contentRef = useRef(null);
+    const [isExpanded, setIsExpanded] = useState(!animate);
+    const [contentHeight, setContentHeight] = useState(animate ? 0 : 'auto');
+    // Tree expand animation on mount (only at root level)
+    useEffect(()=>{
+        if (animate && level === 0 && !isExpanded) {
+            // Small delay to let content render, then measure and animate
+            const timer = setTimeout(()=>{
+                if (contentRef.current) {
+                    const height = contentRef.current.scrollHeight;
+                    setContentHeight(height);
+                    setIsExpanded(true);
+                    // After animation completes, set to auto for dynamic content
+                    setTimeout(()=>setContentHeight('auto'), 600);
+                }
+            }, 100);
+            return ()=>clearTimeout(timer);
+        }
+    }, [
+        animate,
+        level,
+        isExpanded
+    ]);
     // Track which folders are expanded
     const [expandedFolders, setExpandedFolders] = useState(()=>{
         const expanded = new Set();
@@ -149,10 +173,10 @@ export function CollectionTree({ collection, selectedRequest, onSelectRequest, s
         }
         return null;
     }
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    const treeContent = /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             filteredData.folders.map((folder)=>{
-                const isExpanded = expandedFolders.has(folder.id);
+                const isFolderExpanded = expandedFolders.has(folder.id);
                 const hasContent = folder.requests.length > 0 || folder.folders.length > 0;
                 if (!hasContent) {
                     // Empty folder - render as disabled item
@@ -170,7 +194,7 @@ export function CollectionTree({ collection, selectedRequest, onSelectRequest, s
                     title: /*#__PURE__*/ _jsxs("span", {
                         className: "flex items-center gap-2",
                         children: [
-                            isExpanded ? /*#__PURE__*/ _jsx(FolderOpen, {
+                            isFolderExpanded ? /*#__PURE__*/ _jsx(FolderOpen, {
                                 className: "h-4 w-4 text-sidebar-foreground/60 shrink-0",
                                 weight: "fill"
                             }) : /*#__PURE__*/ _jsx(Folder, {
@@ -183,7 +207,7 @@ export function CollectionTree({ collection, selectedRequest, onSelectRequest, s
                             })
                         ]
                     }),
-                    defaultOpen: isExpanded,
+                    defaultOpen: isFolderExpanded,
                     indent: level,
                     onClick: ()=>toggleFolder(folder.id),
                     children: [
@@ -195,6 +219,7 @@ export function CollectionTree({ collection, selectedRequest, onSelectRequest, s
                             level: level + 1
                         }),
                         folder.requests.map((request)=>/*#__PURE__*/ _jsx(SidebarItem, {
+                                itemId: request.id,
                                 selected: selectedRequest?.id === request.id,
                                 indent: level + 1,
                                 onClick: ()=>onSelectRequest(request),
@@ -208,6 +233,7 @@ export function CollectionTree({ collection, selectedRequest, onSelectRequest, s
                 }, folder.id);
             }),
             filteredData.requests.map((request)=>/*#__PURE__*/ _jsx(SidebarItem, {
+                    itemId: request.id,
                     selected: selectedRequest?.id === request.id,
                     indent: level,
                     onClick: ()=>onSelectRequest(request),
@@ -219,4 +245,16 @@ export function CollectionTree({ collection, selectedRequest, onSelectRequest, s
                 }, request.id))
         ]
     });
+    // At root level with animation enabled, wrap in animated container
+    if (level === 0 && animate) {
+        return /*#__PURE__*/ _jsx("div", {
+            ref: contentRef,
+            className: cn("overflow-hidden transition-all duration-500 ease-out", !isExpanded && "opacity-0", isExpanded && "opacity-100"),
+            style: {
+                height: contentHeight === 'auto' ? 'auto' : `${contentHeight}px`
+            },
+            children: treeContent
+        });
+    }
+    return treeContent;
 }

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

@@ -162,7 +162,8 @@ export function DocsSidebar({ collection, selectedRequest, selectedDocSection, s
                         children: /*#__PURE__*/ _jsx(CollectionTree, {
                             collection: collection,
                             selectedRequest: selectedRequest,
-                            onSelectRequest: handleSelectRequest
+                            onSelectRequest: handleSelectRequest,
+                            animate: true
                         })
                     })
                 ]

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

@@ -8,7 +8,7 @@ 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 }) {
+export function RightSidebar({ request, collection, apiSummary, onNavigateToEndpoint, onPrefillParameters, onPrefillGraphQLVariables, graphqlPlaygroundState, 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);
@@ -124,6 +124,8 @@ export function RightSidebar({ request, collection, apiSummary, onNavigateToEndp
                     apiSummary: apiSummary,
                     onNavigate: onNavigateToEndpoint,
                     onPrefill: onPrefillParameters,
+                    onPrefillGraphQLVariables: onPrefillGraphQLVariables,
+                    graphqlPlaygroundState: graphqlPlaygroundState,
                     debugContext: pendingDebugContext,
                     onDebugContextConsumed: handleDebugContextConsumed,
                     explainContext: explainContext,

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

@@ -82,7 +82,7 @@ export function SlidingIndicatorProvider({ children, className }) {
             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",
+                    className: "docs-sidebar-indicator absolute rounded-lg bg-primary/10 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'
@@ -95,7 +95,8 @@ export function SlidingIndicatorProvider({ children, className }) {
 }
 /**
  * Sidebar Item component - individual clickable item in the sidebar
- * Uses subtle sage/mint style when selected with smooth sliding animation
+ * Selection is indicated by the sliding indicator background (from provider)
+ * and a subtle text emphasis on the selected item
  */ 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);
@@ -135,8 +136,6 @@ export function SlidingIndicatorProvider({ children, className }) {
     }, [
         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", {
@@ -147,9 +146,8 @@ export function SlidingIndicatorProvider({ children, className }) {
             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),
+            indent > 0 && `ml-${indent * 3}`, // State variants - selected items only get text emphasis, indicator handles background
+            selected ? 'docs-sidebar-item-active text-sidebar-foreground font-medium' : 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
             },

package/renderer/hooks/use-route-state.js

@@ -1,31 +1,33 @@
 'use client';
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
+import { usePathname } from 'next/navigation';
 /**
- * Parse URL hash into route state
+ * Parse URL pathname into route state
  * 
  * URL Schema:
- * - #tab                              → Tab only, show default content (docs view)
- * - #tab/page/{slug}                  → Doc page (docs view)
- * - #tab/endpoint/{id}                → API endpoint (docs view)
- * - #tab/endpoint/{id}/playground     → API endpoint (playground view)
- * - #tab/endpoint/{id}/notes          → API endpoint (notes view)
- * - #tab/page/{slug}/notes            → Doc page (notes view)
- */ function parseHash(hash) {
-    // Remove leading # if present
-    const cleanHash = hash.startsWith('#') ? hash.slice(1) : hash;
+ * - /                                 → Home, show default content
+ * - /[tab]                            → Tab only, show default content (docs view)
+ * - /[tab]/page/[slug]                → Doc page (docs view)
+ * - /[tab]/endpoint/[id]              → API endpoint (docs view)
+ * - /[tab]/endpoint/[id]/playground   → API endpoint (playground view)
+ * - /[tab]/endpoint/[id]/notes        → API endpoint (notes view)
+ * - /[tab]/page/[slug]/notes          → Doc page (notes view)
+ */ function parsePath(pathname) {
+    // Remove leading slash
+    const cleanPath = pathname.startsWith('/') ? pathname.slice(1) : pathname;
     // Default state
     const defaultState = {
         tab: null,
         contentType: null,
         contentId: null,
         view: 'docs',
-        hash: cleanHash
+        path: cleanPath
     };
-    if (!cleanHash) {
+    if (!cleanPath) {
         return defaultState;
     }
-    // Split hash into parts: tab/type/id[/view]
-    const parts = cleanHash.split('/');
+    // Split path into parts: tab/type/id[/view]
+    const parts = cleanPath.split('/');
     const tab = parts[0] || null;
     const type = parts[1] || null;
     // Check if last part is a view mode
@@ -49,20 +51,14 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
         contentType,
         contentId: id,
         view,
-        hash: cleanHash
+        path: cleanPath
     };
 }
-/**
- * Get the current hash from window.location
- */ function getCurrentHash() {
-    if (typeof window === 'undefined') return '';
-    return window.location.hash;
-}
 /**
  * Hook that provides URL-based route state
  * 
  * This hook is the single source of truth for page/content selection.
- * It automatically updates when the URL hash changes (via navigation or browser back/forward).
+ * It uses Next.js pathname for routing (SEO-friendly URLs).
  * 
  * @example
  * const { tab, contentType, contentId } = useRouteState()
@@ -72,26 +68,11 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
  *   return <DocPage slug={contentId} />
  * }
  */ export function useRouteState() {
-    const [hash, setHash] = useState(()=>getCurrentHash());
-    // Parse hash into route state
-    const state = useMemo(()=>parseHash(hash), [
-        hash
+    const pathname = usePathname();
+    // Parse pathname into route state
+    const state = useMemo(()=>parsePath(pathname), [
+        pathname
     ]);
-    // Listen for hash changes
-    useEffect(()=>{
-        const handleHashChange = ()=>{
-            setHash(getCurrentHash());
-        };
-        // Listen for both hashchange and popstate (browser back/forward)
-        window.addEventListener('hashchange', handleHashChange);
-        window.addEventListener('popstate', handleHashChange);
-        // Set initial hash (in case it was set before this effect ran)
-        handleHashChange();
-        return ()=>{
-            window.removeEventListener('hashchange', handleHashChange);
-            window.removeEventListener('popstate', handleHashChange);
-        };
-    }, []);
     return state;
 }
 /**
@@ -103,34 +84,41 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
     const navigateToPage = useCallback((slug, tab, view)=>{
         const targetTab = tab || defaultTab || '';
         const viewSuffix = view && view !== 'docs' ? `/${view}` : '';
-        window.location.hash = targetTab ? `${targetTab}/page/${slug}${viewSuffix}` : `page/${slug}${viewSuffix}`;
+        const path = targetTab ? `/${targetTab}/page/${slug}${viewSuffix}` : `/page/${slug}${viewSuffix}`;
+        window.history.pushState(null, '', path);
+        window.dispatchEvent(new PopStateEvent('popstate'));
     }, [
         defaultTab
     ]);
     const navigateToEndpoint = useCallback((id, tab, view)=>{
         const targetTab = tab || defaultTab || '';
         const viewSuffix = view && view !== 'docs' ? `/${view}` : '';
-        window.location.hash = targetTab ? `${targetTab}/endpoint/${id}${viewSuffix}` : `endpoint/${id}${viewSuffix}`;
+        const path = targetTab ? `/${targetTab}/endpoint/${id}${viewSuffix}` : `/endpoint/${id}${viewSuffix}`;
+        window.history.pushState(null, '', path);
+        window.dispatchEvent(new PopStateEvent('popstate'));
     }, [
         defaultTab
     ]);
     const navigateToSection = useCallback((sectionId, tab)=>{
         const targetTab = tab || defaultTab || '';
-        window.location.hash = targetTab ? `${targetTab}/section/${sectionId}` : `section/${sectionId}`;
+        const path = targetTab ? `/${targetTab}/section/${sectionId}` : `/section/${sectionId}`;
+        window.history.pushState(null, '', path);
+        window.dispatchEvent(new PopStateEvent('popstate'));
     }, [
         defaultTab
     ]);
     const navigateToTab = useCallback((tab)=>{
-        window.location.hash = tab;
+        window.history.pushState(null, '', `/${tab}`);
+        window.dispatchEvent(new PopStateEvent('popstate'));
     }, []);
     const clearSelection = useCallback((tab)=>{
         const targetTab = tab || defaultTab;
         if (targetTab) {
-            window.location.hash = targetTab;
+            window.history.pushState(null, '', `/${targetTab}`);
         } else {
-            // Remove hash entirely
-            window.history.pushState(null, '', window.location.pathname + window.location.search);
+            window.history.pushState(null, '', '/');
         }
+        window.dispatchEvent(new PopStateEvent('popstate'));
     }, [
         defaultTab
     ]);
@@ -143,17 +131,17 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
     };
 }
 /**
- * Utility to build hash URLs (for href attributes)
- */ export const buildHashUrl = {
+ * Utility to build URLs (for href attributes)
+ */ export const buildUrl = {
     page: (tab, slug, view)=>{
         const viewSuffix = view && view !== 'docs' ? `/${view}` : '';
-        return `#${tab}/page/${slug}${viewSuffix}`;
+        return `/${tab}/page/${slug}${viewSuffix}`;
     },
     endpoint: (tab, id, view)=>{
         const viewSuffix = view && view !== 'docs' ? `/${view}` : '';
-        return `#${tab}/endpoint/${id}${viewSuffix}`;
+        return `/${tab}/endpoint/${id}${viewSuffix}`;
     },
-    section: (tab, sectionId)=>`#${tab}/section/${sectionId}`,
-    tab: (tab)=>`#${tab}`
+    section: (tab, sectionId)=>`/${tab}/section/${sectionId}`,
+    tab: (tab)=>`/${tab}`
 };
-export { parseHash };
+export { parsePath };