prev-cli 0.6.0 → 0.7.1

package/dist/cli.js

@@ -121,7 +121,8 @@ function fileToRoute(file) {
 async function scanPages(rootDir) {
   const files = await fg.glob("**/*.{md,mdx}", {
     cwd: rootDir,
-    ignore: ["node_modules/**", "dist/**", ".cache/**"]
+    ignore: ["node_modules/**", "dist/**", ".cache/**"],
+    dot: true
   });
   const routeMap = new Map;
   for (const file of files) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",

package/src/theme/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Link, useLocation } from '@tanstack/react-router'
 import type { PageTree } from 'fumadocs-core/server'
 
@@ -7,6 +7,40 @@ interface LayoutProps {
   children: React.ReactNode
 }
 
+function SidebarToggle({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {
+  return (
+    <button
+      className="sidebar-toggle"
+      onClick={onToggle}
+      aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+    >
+      {collapsed ? (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M3 12h18M3 6h18M3 18h18" />
+        </svg>
+      ) : (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M11 19l-7-7 7-7M18 19l-7-7 7-7" />
+        </svg>
+      )}
+    </button>
+  )
+}
+
+function CollapsedFolderIcon({ item, onClick }: { item: PageTree.Folder; onClick: () => void }) {
+  return (
+    <button
+      className="sidebar-rail-icon"
+      onClick={onClick}
+      title={item.name}
+    >
+      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
+      </svg>
+    </button>
+  )
+}
+
 interface SidebarItemProps {
   item: PageTree.Item | PageTree.Folder
   depth?: number
@@ -88,25 +122,61 @@ function ThemeToggle() {
 }
 
 export function Layout({ tree, children }: LayoutProps) {
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('sidebar-collapsed') === 'true'
+    }
+    return false
+  })
+
   // Initialize theme from localStorage
-  React.useEffect(() => {
+  useEffect(() => {
     const saved = localStorage.getItem('theme')
     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
     const isDark = saved === 'dark' || (!saved && prefersDark)
     document.documentElement.classList.toggle('dark', isDark)
   }, [])
 
+  // Persist collapsed state
+  useEffect(() => {
+    localStorage.setItem('sidebar-collapsed', String(collapsed))
+  }, [collapsed])
+
+  const toggleCollapsed = () => setCollapsed(!collapsed)
+
+  // Get top-level folders for collapsed rail
+  const topFolders = tree.children.filter(
+    (item): item is PageTree.Folder => item.type === 'folder'
+  )
+
   return (
-    <div className="prev-layout">
+    <div className={`prev-layout ${collapsed ? 'sidebar-collapsed' : ''}`}>
       <aside className="prev-sidebar">
-        <nav className="sidebar-nav">
-          {tree.children.map((item, i) => (
-            <SidebarItem key={i} item={item} />
-          ))}
-        </nav>
-        <div className="sidebar-footer">
-          <ThemeToggle />
+        <div className="sidebar-header">
+          <SidebarToggle collapsed={collapsed} onToggle={toggleCollapsed} />
         </div>
+        {collapsed ? (
+          <div className="sidebar-rail">
+            {topFolders.map((folder, i) => (
+              <CollapsedFolderIcon
+                key={i}
+                item={folder}
+                onClick={toggleCollapsed}
+              />
+            ))}
+          </div>
+        ) : (
+          <>
+            <nav className="sidebar-nav">
+              {tree.children.map((item, i) => (
+                <SidebarItem key={i} item={item} />
+              ))}
+            </nav>
+            <div className="sidebar-footer">
+              <ThemeToggle />
+            </div>
+          </>
+        )}
       </aside>
       <main className="prev-main">
         {children}

package/src/theme/diagrams.tsx

@@ -1,6 +1,209 @@
 import { useEffect } from 'react'
 import { useLocation } from '@tanstack/react-router'
 
+// Diagram controls and fullscreen functionality
+function createDiagramControls(container: HTMLElement): void {
+  // Skip if already has controls
+  if (container.querySelector('.diagram-controls')) return
+
+  const wrapper = document.createElement('div')
+  wrapper.className = 'diagram-wrapper'
+
+  // Move container content to wrapper
+  const svg = container.querySelector('svg')
+  if (!svg) return
+
+  // Create controls
+  const controls = document.createElement('div')
+  controls.className = 'diagram-controls'
+  controls.innerHTML = `
+    <button class="diagram-btn diagram-zoom-in" title="Zoom in">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M11 8v6M8 11h6"/>
+      </svg>
+    </button>
+    <button class="diagram-btn diagram-zoom-out" title="Zoom out">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M8 11h6"/>
+      </svg>
+    </button>
+    <button class="diagram-btn diagram-fullscreen" title="Fullscreen">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3"/>
+      </svg>
+    </button>
+  `
+
+  // Track zoom level
+  let scale = 1
+  const minScale = 0.5
+  const maxScale = 3
+  const scaleStep = 0.25
+
+  const updateScale = () => {
+    svg.style.transform = `scale(${scale})`
+    svg.style.transformOrigin = 'center center'
+  }
+
+  // Zoom in
+  controls.querySelector('.diagram-zoom-in')?.addEventListener('click', (e) => {
+    e.stopPropagation()
+    if (scale < maxScale) {
+      scale += scaleStep
+      updateScale()
+    }
+  })
+
+  // Zoom out
+  controls.querySelector('.diagram-zoom-out')?.addEventListener('click', (e) => {
+    e.stopPropagation()
+    if (scale > minScale) {
+      scale -= scaleStep
+      updateScale()
+    }
+  })
+
+  // Fullscreen
+  controls.querySelector('.diagram-fullscreen')?.addEventListener('click', (e) => {
+    e.stopPropagation()
+    openFullscreenModal(svg.outerHTML)
+  })
+
+  // Scroll wheel zoom on container
+  container.addEventListener('wheel', (e) => {
+    e.preventDefault()
+    const delta = e.deltaY > 0 ? -0.1 : 0.1
+    scale = Math.min(Math.max(scale + delta, minScale), maxScale)
+    updateScale()
+  })
+
+  container.appendChild(controls)
+}
+
+function openFullscreenModal(svgHtml: string): void {
+  // Remove existing modal if any
+  document.querySelector('.diagram-modal')?.remove()
+
+  const modal = document.createElement('div')
+  modal.className = 'diagram-modal'
+
+  let scale = 1
+  let translateX = 0
+  let translateY = 0
+  let isDragging = false
+  let startX = 0
+  let startY = 0
+
+  modal.innerHTML = `
+    <div class="diagram-modal-backdrop"></div>
+    <div class="diagram-modal-content">
+      <div class="diagram-modal-controls">
+        <button class="diagram-btn modal-zoom-in" title="Zoom in">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M11 8v6M8 11h6"/>
+          </svg>
+        </button>
+        <button class="diagram-btn modal-zoom-out" title="Zoom out">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35M8 11h6"/>
+          </svg>
+        </button>
+        <button class="diagram-btn modal-reset" title="Reset view">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8"/><path d="M3 3v5h5"/>
+          </svg>
+        </button>
+        <button class="diagram-btn modal-close" title="Close">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+      <div class="diagram-modal-svg-container">
+        ${svgHtml}
+      </div>
+    </div>
+  `
+
+  const svgContainer = modal.querySelector('.diagram-modal-svg-container') as HTMLElement
+  const svg = svgContainer?.querySelector('svg') as SVGElement
+
+  const updateTransform = () => {
+    if (svg) {
+      svg.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`
+      svg.style.transformOrigin = 'center center'
+    }
+  }
+
+  // Zoom controls
+  modal.querySelector('.modal-zoom-in')?.addEventListener('click', () => {
+    scale = Math.min(scale + 0.25, 5)
+    updateTransform()
+  })
+
+  modal.querySelector('.modal-zoom-out')?.addEventListener('click', () => {
+    scale = Math.max(scale - 0.25, 0.25)
+    updateTransform()
+  })
+
+  modal.querySelector('.modal-reset')?.addEventListener('click', () => {
+    scale = 1
+    translateX = 0
+    translateY = 0
+    updateTransform()
+  })
+
+  // Close handlers
+  const closeModal = () => modal.remove()
+  modal.querySelector('.modal-close')?.addEventListener('click', closeModal)
+  modal.querySelector('.diagram-modal-backdrop')?.addEventListener('click', closeModal)
+
+  // Keyboard close
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      closeModal()
+      document.removeEventListener('keydown', handleKeydown)
+    }
+  }
+  document.addEventListener('keydown', handleKeydown)
+
+  // Pan with mouse drag
+  svgContainer?.addEventListener('mousedown', (e) => {
+    isDragging = true
+    startX = e.clientX - translateX
+    startY = e.clientY - translateY
+    svgContainer.style.cursor = 'grabbing'
+    svgContainer.style.userSelect = 'none'
+    e.preventDefault() // Prevent text selection on drag start
+  })
+
+  document.addEventListener('mousemove', (e) => {
+    if (!isDragging) return
+    e.preventDefault()
+    translateX = e.clientX - startX
+    translateY = e.clientY - startY
+    updateTransform()
+  })
+
+  document.addEventListener('mouseup', () => {
+    isDragging = false
+    if (svgContainer) {
+      svgContainer.style.cursor = 'grab'
+      svgContainer.style.userSelect = ''
+    }
+  })
+
+  // Mouse wheel zoom
+  svgContainer?.addEventListener('wheel', (e) => {
+    e.preventDefault()
+    const delta = e.deltaY > 0 ? -0.1 : 0.1
+    scale = Math.min(Math.max(scale + delta, 0.25), 5)
+    updateTransform()
+  })
+
+  document.body.appendChild(modal)
+}
+
 // Simple hash function for cache keys
 function hashCode(str: string): string {
   let hash = 0
@@ -67,6 +270,7 @@ async function renderMermaidDiagrams() {
       container.innerHTML = cached
       pre.style.display = 'none'
       pre.insertAdjacentElement('afterend', container)
+      createDiagramControls(container)
       continue
     }
 
@@ -82,6 +286,7 @@ async function renderMermaidDiagrams() {
       cacheSvg('mermaid', code, svg)
       pre.style.display = 'none'
       pre.insertAdjacentElement('afterend', container)
+      createDiagramControls(container)
     } catch (e) {
       console.error('Mermaid render error:', e)
     }
@@ -110,6 +315,7 @@ async function renderD2Diagrams() {
       container.innerHTML = cached
       pre.style.display = 'none'
       pre.insertAdjacentElement('afterend', container)
+      createDiagramControls(container)
       continue
     }
 
@@ -132,6 +338,7 @@ async function renderD2Diagrams() {
       cacheSvg('d2', code, svg)
       pre.style.display = 'none'
       pre.insertAdjacentElement('afterend', container)
+      createDiagramControls(container)
     } catch (e) {
       console.error('D2 render error:', e)
     }

package/src/theme/styles.css

@@ -16,9 +16,15 @@ body {
 
 /* Layout structure */
 .prev-layout {
+  --sidebar-width: 260px;
   display: grid;
-  grid-template-columns: 260px 1fr;
+  grid-template-columns: var(--sidebar-width) 1fr;
   min-height: 100vh;
+  transition: grid-template-columns 0.2s ease;
+}
+
+.prev-layout.sidebar-collapsed {
+  --sidebar-width: 50px;
 }
 
 /* Sidebar */
@@ -26,11 +32,74 @@ body {
   position: sticky;
   top: 0;
   height: 100vh;
+  width: var(--sidebar-width);
   background: var(--fd-background);
   border-right: 1px solid var(--fd-border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  transition: width 0.2s ease;
+}
+
+/* Sidebar header with toggle */
+.sidebar-header {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--fd-border);
+  display: flex;
+  justify-content: flex-start;
+}
+
+.sidebar-collapsed .sidebar-header {
+  justify-content: center;
+}
+
+.sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--fd-muted);
+  border: none;
+  border-radius: 0.5rem;
+  color: var(--fd-muted-foreground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.sidebar-toggle:hover {
+  background: var(--fd-accent);
+  color: var(--fd-accent-foreground);
+}
+
+/* Collapsed rail */
+.sidebar-rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+  gap: 0.5rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.sidebar-rail-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: none;
+  border-radius: 0.5rem;
+  color: var(--fd-muted-foreground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.sidebar-rail-icon:hover {
+  background: var(--fd-muted);
+  color: var(--fd-foreground);
 }
 
 .sidebar-nav {
@@ -178,12 +247,116 @@ body {
   border-radius: 0.5rem;
   display: flex;
   justify-content: center;
+  position: relative;
+  overflow: hidden;
 }
 
 .mermaid-diagram svg,
 .d2-diagram svg {
   max-width: 100%;
   height: auto;
+  transition: transform 0.2s ease;
+}
+
+/* Diagram hover controls */
+.diagram-controls {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  gap: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 10;
+}
+
+.mermaid-diagram:hover .diagram-controls,
+.d2-diagram:hover .diagram-controls {
+  opacity: 1;
+}
+
+.diagram-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--fd-background);
+  border: 1px solid var(--fd-border);
+  border-radius: 0.375rem;
+  color: var(--fd-muted-foreground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.diagram-btn:hover {
+  background: var(--fd-accent);
+  color: var(--fd-accent-foreground);
+  border-color: var(--fd-accent);
+}
+
+/* Fullscreen modal */
+.diagram-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.diagram-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(4px);
+}
+
+.diagram-modal-content {
+  position: relative;
+  width: 90vw;
+  height: 90vh;
+  background: var(--fd-background);
+  border-radius: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.diagram-modal-controls {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--fd-border);
+  background: var(--fd-muted);
+}
+
+.diagram-modal-controls .diagram-btn {
+  width: 36px;
+  height: 36px;
+}
+
+.diagram-modal-controls .modal-close {
+  margin-left: auto;
+}
+
+.diagram-modal-svg-container {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  padding: 2rem;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.diagram-modal-svg-container svg {
+  max-width: none;
+  max-height: none;
+  transition: transform 0.1s ease;
 }
 
 /* Smooth page transitions */