prev-cli 0.14.1 → 0.16.0

package/src/theme/TOCPanel.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import type { PageTree } from 'fumadocs-core/server'
+import { IconX, IconChevronRight, IconFile, IconFolder } from '@tabler/icons-react'
+
+interface TOCPanelProps {
+  tree: PageTree.Root
+  onClose: () => void
+}
+
+type TreeItem = PageTree.Item | PageTree.Folder
+
+function getItemId(item: TreeItem): string {
+  return item.type === 'folder' ? `folder:${item.name}` : item.url
+}
+
+export function TOCPanel({ tree, onClose }: TOCPanelProps) {
+  const location = useLocation()
+  const panelRef = useRef<HTMLDivElement>(null)
+  const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' ? window.innerWidth <= 768 : false)
+  const [orderedItems, setOrderedItems] = useState<TreeItem[]>(tree.children)
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth <= 768)
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onClose()
+      }
+    }
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+    }
+  }, [onClose])
+
+  const handleDragStart = (index: number) => {
+    setDragIndex(index)
+  }
+
+  const handleDragOver = (index: number) => {
+    if (dragIndex !== null && dragIndex !== index) {
+      setDragOverIndex(index)
+    }
+  }
+
+  const handleDragEnd = async () => {
+    if (dragIndex !== null && dragOverIndex !== null && dragIndex !== dragOverIndex) {
+      const newItems = [...orderedItems]
+      const [removed] = newItems.splice(dragIndex, 1)
+      newItems.splice(dragOverIndex, 0, removed)
+      setOrderedItems(newItems)
+
+      // Auto-save to config
+      const order = newItems.map(item =>
+        item.type === 'folder' ? `${item.name}/` : item.url.replace(/^\//, '') + '.md'
+      )
+
+      await fetch('/__prev/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: '/', order })
+      })
+    }
+    setDragIndex(null)
+    setDragOverIndex(null)
+  }
+
+  if (isMobile) {
+    return (
+      <div className="toc-overlay">
+        <div className="toc-overlay-content" ref={panelRef}>
+          <div className="toc-overlay-header">
+            <span>Navigation</span>
+            <button className="toc-close-btn" onClick={onClose}><IconX size={16} /></button>
+          </div>
+          <nav className="toc-nav">
+            {orderedItems.map((item) => (
+              <TOCItem
+                key={getItemId(item)}
+                item={item}
+                location={location}
+                onNavigate={onClose}
+              />
+            ))}
+          </nav>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="toc-dropdown" ref={panelRef}>
+      <div className="toc-dropdown-header">
+        <span>Navigation</span>
+        <button className="toc-close-btn" onClick={onClose}><IconX size={16} /></button>
+      </div>
+      <nav className="toc-nav">
+        {orderedItems.map((item, i) => (
+          <div
+            key={getItemId(item)}
+            draggable
+            onDragStart={() => handleDragStart(i)}
+            onDragOver={(e) => { e.preventDefault(); handleDragOver(i) }}
+            onDragEnd={handleDragEnd}
+            className={dragOverIndex === i ? 'drop-target' : ''}
+          >
+            <TOCItem
+              item={item}
+              location={location}
+              onNavigate={onClose}
+            />
+          </div>
+        ))}
+      </nav>
+    </div>
+  )
+}
+
+interface TOCItemProps {
+  item: TreeItem
+  location: { pathname: string }
+  onNavigate: () => void
+  depth?: number
+}
+
+function TOCItem({ item, location, onNavigate, depth = 0 }: TOCItemProps) {
+  const [isOpen, setIsOpen] = useState(true)
+
+  if (item.type === 'folder') {
+    return (
+      <div className="toc-folder">
+        <button
+          className="toc-folder-toggle"
+          onClick={() => setIsOpen(!isOpen)}
+          style={{ paddingLeft: `${depth * 12 + 8}px` }}
+        >
+          <IconChevronRight size={14} className={`folder-chevron ${isOpen ? 'open' : ''}`} />
+          <IconFolder size={14} className="toc-icon" />
+          {item.name}
+        </button>
+        {isOpen && (
+          <div className="toc-folder-children">
+            {item.children.map((child) => (
+              <TOCItem
+                key={getItemId(child)}
+                item={child}
+                location={location}
+                onNavigate={onNavigate}
+                depth={depth + 1}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  const isActive = location.pathname === item.url
+
+  return (
+    <Link
+      to={item.url}
+      className={`toc-link ${isActive ? 'active' : ''}`}
+      style={{ paddingLeft: `${depth * 12 + 12}px` }}
+      onClick={onNavigate}
+    >
+      <IconFile size={14} className="toc-icon" />
+      {item.name}
+    </Link>
+  )
+}

package/src/theme/Toolbar.css

@@ -0,0 +1,58 @@
+.prev-toolbar {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem;
+  background: var(--fd-background);
+  border: 1px solid var(--fd-border);
+  border-radius: 9999px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  cursor: grab;
+  user-select: none;
+}
+
+.prev-toolbar:active {
+  cursor: grabbing;
+}
+
+.toolbar-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  color: var(--fd-muted-foreground);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-decoration: none;
+}
+
+.toolbar-btn:hover {
+  background: var(--fd-muted);
+  color: var(--fd-foreground);
+}
+
+.toolbar-btn.active {
+  background: var(--fd-accent);
+  color: var(--fd-accent-foreground);
+}
+
+.toolbar-devtools-slot {
+  display: contents;
+}
+
+.toolbar-devtools-slot:empty {
+  display: none;
+}
+
+/* Hide width toggle on mobile */
+@media (max-width: 768px) {
+  .toolbar-btn.desktop-only {
+    display: none;
+  }
+}

package/src/theme/Toolbar.tsx

@@ -0,0 +1,91 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Link } from '@tanstack/react-router'
+import type { PageTree } from 'fumadocs-core/server'
+import { previews } from 'virtual:prev-previews'
+import { IconMenu2, IconLayoutGrid, IconSun, IconMoon, IconArrowsMaximize, IconArrowsMinimize } from '@tabler/icons-react'
+import './Toolbar.css'
+
+interface ToolbarProps {
+  tree: PageTree.Root
+  onThemeToggle: () => void
+  onWidthToggle: () => void
+  isDark: boolean
+  isFullWidth: boolean
+  onTocToggle: () => void
+  tocOpen: boolean
+}
+
+export function Toolbar({ tree, onThemeToggle, onWidthToggle, isDark, isFullWidth, onTocToggle, tocOpen }: ToolbarProps) {
+  const [position, setPosition] = useState({ x: 20, y: typeof window !== 'undefined' ? window.innerHeight - 80 : 600 })
+  const [dragging, setDragging] = useState(false)
+  const dragStart = useRef({ x: 0, y: 0 })
+  const toolbarRef = useRef<HTMLDivElement>(null)
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('button, a')) return
+    setDragging(true)
+    dragStart.current = { x: e.clientX - position.x, y: e.clientY - position.y }
+  }
+
+  useEffect(() => {
+    if (!dragging) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      setPosition({
+        x: Math.max(0, Math.min(window.innerWidth - 300, e.clientX - dragStart.current.x)),
+        y: Math.max(0, Math.min(window.innerHeight - 60, e.clientY - dragStart.current.y))
+      })
+    }
+
+    const handleMouseUp = () => setDragging(false)
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [dragging])
+
+  return (
+    <div
+      ref={toolbarRef}
+      className="prev-toolbar"
+      style={{ left: position.x, top: position.y }}
+      onMouseDown={handleMouseDown}
+    >
+      <button
+        className={`toolbar-btn ${tocOpen ? 'active' : ''}`}
+        onClick={onTocToggle}
+        title="Table of Contents"
+      >
+        <IconMenu2 size={18} />
+      </button>
+
+      {previews && previews.length > 0 && (
+        <Link to="/previews" className="toolbar-btn" title="Previews">
+          <IconLayoutGrid size={18} />
+        </Link>
+      )}
+
+      {/* Contextual devtools slot - populated by preview context */}
+      <div className="toolbar-devtools-slot" id="toolbar-devtools" />
+
+      <button
+        className="toolbar-btn desktop-only"
+        onClick={onWidthToggle}
+        title={isFullWidth ? 'Constrain width' : 'Full width'}
+      >
+        {isFullWidth ? <IconArrowsMinimize size={18} /> : <IconArrowsMaximize size={18} />}
+      </button>
+
+      <button
+        className="toolbar-btn"
+        onClick={onThemeToggle}
+        title={isDark ? 'Light mode' : 'Dark mode'}
+      >
+        {isDark ? <IconSun size={18} /> : <IconMoon size={18} />}
+      </button>
+    </div>
+  )
+}

package/src/theme/index.ts

@@ -1,2 +1,5 @@
 // Public exports for @prev/theme
+export { Layout } from './Layout'
+export { Toolbar } from './Toolbar'
+export { TOCPanel } from './TOCPanel'
 export { Preview } from './Preview'

package/src/theme/styles.css

@@ -20,186 +20,6 @@ body {
   color: var(--fd-foreground);
 }
 
-/* Layout structure */
-.prev-layout {
-  --sidebar-width: 260px;
-  display: grid;
-  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 */
-.prev-sidebar {
-  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 {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem 0.5rem;
-}
-
-.sidebar-link {
-  display: block;
-  padding: 0.5rem 1rem;
-  color: var(--fd-muted-foreground);
-  text-decoration: none;
-  font-size: 0.9rem;
-  border-radius: 0.375rem;
-  transition: all 0.15s ease;
-}
-
-.sidebar-link:hover {
-  background: var(--fd-muted);
-  color: var(--fd-foreground);
-}
-
-.sidebar-link.active {
-  background: var(--fd-accent);
-  color: var(--fd-accent-foreground);
-  font-weight: 500;
-}
-
-.sidebar-folder-toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.5rem 1rem;
-  background: none;
-  border: none;
-  color: var(--fd-foreground);
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  border-radius: 0.375rem;
-  text-align: left;
-}
-
-.sidebar-folder-toggle:hover {
-  background: var(--fd-muted);
-}
-
-.folder-icon {
-  display: flex;
-  transition: transform 0.15s ease;
-}
-
-.folder-icon.open {
-  transform: rotate(90deg);
-}
-
-.sidebar-folder-children {
-  margin-left: 0.5rem;
-}
-
-.sidebar-footer {
-  padding: 1rem;
-  border-top: 1px solid var(--fd-border);
-  display: flex;
-  gap: 0.5rem;
-}
-
-.theme-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;
-}
-
-.theme-toggle:hover {
-  background: var(--fd-accent);
-  color: var(--fd-accent-foreground);
-}
-
-/* Main content area */
-.prev-main {
-  padding: 2rem;
-  overflow-x: hidden;
-}
-
 /* Custom fonts */
 :root {
   --fd-font-sans: "DM Sans", system-ui, sans-serif;
@@ -594,12 +414,6 @@ body {
   margin-top: 0;
 }
 
-/* Sidebar active item highlight */
-[data-active="true"] {
-  background: var(--fd-accent);
-  color: var(--fd-accent-foreground);
-}
-
 /* ===========================================
    Metadata Block Styles
    =========================================== */
@@ -697,44 +511,23 @@ body {
 }
 
 /* ===========================================
-   Drag and Drop Sidebar
+   Floating Layout - New Toolbar-Based Layout
    =========================================== */
 
-.sidebar-item-wrapper {
-  position: relative;
-}
-
-.drag-handle {
-  opacity: 0;
-  cursor: grab;
-  color: var(--fd-muted-foreground);
-  font-size: 0.75rem;
-  margin-right: 0.25rem;
-  transition: opacity 0.15s ease;
-}
-
-.sidebar-folder:hover .drag-handle,
-.sidebar-item-wrapper:hover .drag-handle,
-.sidebar-link:hover .drag-handle {
-  opacity: 0.5;
-}
-
-.drag-handle:hover {
-  opacity: 1 !important;
+.prev-layout-floating {
+  min-height: 100vh;
 }
 
-.sidebar-folder.drop-target,
-.sidebar-item-wrapper.drop-target {
-  background: var(--fd-accent);
-  border-radius: 0.375rem;
+.prev-main-floating {
+  padding: 2rem;
+  max-width: 100%;
 }
 
-.sidebar-folder[draggable="true"],
-.sidebar-item-wrapper[draggable="true"] {
-  cursor: grab;
+.prev-main-floating .prev-content {
+  max-width: 72ch;
+  margin: 0 auto;
 }
 
-.sidebar-folder[draggable="true"]:active,
-.sidebar-item-wrapper[draggable="true"]:active {
-  cursor: grabbing;
+.full-width .prev-main-floating .prev-content {
+  max-width: none;
 }