prev-cli 0.7.1 → 0.8.0

package/dist/cli.js

@@ -2,6 +2,7 @@
 
 // src/cli.ts
 import { parseArgs } from "util";
+import path5 from "path";
 
 // src/vite/start.ts
 import { createServer as createServer2, build, preview } from "vite";
@@ -71,6 +72,32 @@ async function ensureCacheDir(rootDir) {
 import fg from "fast-glob";
 import { readFile } from "fs/promises";
 import path2 from "path";
+function parseValue(value) {
+  const trimmed = value.trim();
+  if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+    const inner = trimmed.slice(1, -1);
+    if (inner.trim() === "")
+      return [];
+    return inner.split(",").map((item) => {
+      let v2 = item.trim();
+      if (v2.startsWith('"') && v2.endsWith('"') || v2.startsWith("'") && v2.endsWith("'")) {
+        v2 = v2.slice(1, -1);
+      }
+      return v2;
+    });
+  }
+  let v = trimmed;
+  if (v.startsWith('"') && v.endsWith('"') || v.startsWith("'") && v.endsWith("'")) {
+    v = v.slice(1, -1);
+  }
+  if (v === "true")
+    return true;
+  if (v === "false")
+    return false;
+  if (!isNaN(Number(v)) && v !== "")
+    return Number(v);
+  return v;
+}
 function parseFrontmatter(content) {
   const frontmatterRegex = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/;
   const match = content.match(frontmatterRegex);
@@ -86,18 +113,9 @@ function parseFrontmatter(content) {
     if (colonIndex === -1)
       continue;
     const key = line.slice(0, colonIndex).trim();
-    let value = line.slice(colonIndex + 1).trim();
-    if (value.startsWith('"') && value.endsWith('"') || value.startsWith("'") && value.endsWith("'")) {
-      value = value.slice(1, -1);
-    }
-    if (value === "true")
-      value = true;
-    else if (value === "false")
-      value = false;
-    else if (!isNaN(Number(value)) && value !== "")
-      value = Number(value);
+    const rawValue = line.slice(colonIndex + 1);
     if (key) {
-      frontmatter[key] = value;
+      frontmatter[key] = parseValue(rawValue);
     }
   }
   return { frontmatter, content: restContent };
@@ -121,8 +139,8 @@ function fileToRoute(file) {
 async function scanPages(rootDir) {
   const files = await fg.glob("**/*.{md,mdx}", {
     cwd: rootDir,
-    ignore: ["node_modules/**", "dist/**", ".cache/**"],
-    dot: true
+    ignore: ["node_modules/**", "dist/**", ".cache/**", ".*/**"],
+    dot: false
   });
   const routeMap = new Map;
   for (const file of files) {
@@ -602,7 +620,7 @@ var { values, positionals } = parseArgs({
   allowPositionals: true
 });
 var command = positionals[0] || "dev";
-var rootDir = values.cwd || positionals[1] || process.cwd();
+var rootDir = path5.resolve(values.cwd || positionals[1] || ".");
 function printHelp() {
   console.log(`
 prev - Zero-config documentation site generator

package/package.json

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

package/src/theme/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, createContext, useContext } from 'react'
 import { Link, useLocation } from '@tanstack/react-router'
 import type { PageTree } from 'fumadocs-core/server'
 
@@ -7,6 +7,77 @@ interface LayoutProps {
   children: React.ReactNode
 }
 
+type TreeItem = PageTree.Item | PageTree.Folder
+
+// Get unique ID for a tree item
+function getItemId(item: TreeItem): string {
+  return item.type === 'folder' ? `folder:${item.name}` : item.url
+}
+
+// Storage key for a specific path (root or folder)
+function getStorageKey(path: string): string {
+  return `sidebar-order:${path}`
+}
+
+// Apply saved order to items for a specific path
+// Handles: new items (appended), removed items (skipped), stale storage (cleaned)
+function applyOrder(items: TreeItem[], path: string): TreeItem[] {
+  if (typeof window === 'undefined') return items
+
+  const saved = localStorage.getItem(getStorageKey(path))
+  if (!saved) return items
+
+  const order: string[] = JSON.parse(saved)
+  if (order.length === 0) return items
+
+  const itemMap = new Map(items.map(item => [getItemId(item), item]))
+  const ordered: TreeItem[] = []
+
+  // Add items in saved order (skip removed ones)
+  for (const id of order) {
+    const item = itemMap.get(id)
+    if (item) {
+      ordered.push(item)
+      itemMap.delete(id)
+    }
+  }
+
+  // Add remaining items (new ones not in saved order)
+  for (const item of itemMap.values()) {
+    ordered.push(item)
+  }
+
+  // Clean up stale entries: if order changed, update storage
+  const currentIds = ordered.map(getItemId)
+  const hasChanges = order.length !== currentIds.length ||
+    order.some((id, i) => currentIds[i] !== id)
+
+  if (hasChanges) {
+    localStorage.setItem(getStorageKey(path), JSON.stringify(currentIds))
+  }
+
+  return ordered
+}
+
+// Save order for a specific path
+function saveOrder(items: TreeItem[], path: string): void {
+  const order = items.map(getItemId)
+  localStorage.setItem(getStorageKey(path), JSON.stringify(order))
+}
+
+// Drag context for nested components
+interface DragContextType {
+  dragPath: string | null
+  dragIndex: number | null
+  dragOverPath: string | null
+  dragOverIndex: number | null
+  onDragStart: (path: string, index: number) => void
+  onDragOver: (path: string, index: number) => void
+  onDragEnd: () => void
+}
+
+const DragContext = createContext<DragContextType | null>(null)
+
 function SidebarToggle({ collapsed, onToggle }: { collapsed: boolean; onToggle: () => void }) {
   return (
     <button
@@ -41,23 +112,55 @@ function CollapsedFolderIcon({ item, onClick }: { item: PageTree.Folder; onClick
   )
 }
 
-interface SidebarItemProps {
-  item: PageTree.Item | PageTree.Folder
+interface DraggableSidebarItemProps {
+  item: TreeItem
+  index: number
+  path: string
   depth?: number
 }
 
-function SidebarItem({ item, depth = 0 }: SidebarItemProps) {
+function DraggableSidebarItem({ item, index, path, depth = 0 }: DraggableSidebarItemProps) {
   const location = useLocation()
   const [isOpen, setIsOpen] = useState(true)
+  const dragCtx = useContext(DragContext)
+
+  const handleDragStart = (e: React.DragEvent) => {
+    e.stopPropagation()
+    e.dataTransfer.effectAllowed = 'move'
+    dragCtx?.onDragStart(path, index)
+  }
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    e.dataTransfer.dropEffect = 'move'
+    dragCtx?.onDragOver(path, index)
+  }
+
+  const handleDragEnd = (e: React.DragEvent) => {
+    e.stopPropagation()
+    dragCtx?.onDragEnd()
+  }
+
+  const isDropTarget = dragCtx?.dragOverPath === path && dragCtx?.dragOverIndex === index
 
   if (item.type === 'folder') {
+    const folderPath = `${path}/${item.name}`
+
     return (
-      <div className="sidebar-folder">
+      <div
+        className={`sidebar-folder ${isDropTarget ? 'drop-target' : ''}`}
+        draggable
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+      >
         <button
           className="sidebar-folder-toggle"
           onClick={() => setIsOpen(!isOpen)}
           style={{ paddingLeft: `${depth * 12 + 8}px` }}
         >
+          <span className="drag-handle">⠿</span>
           <span className={`folder-icon ${isOpen ? 'open' : ''}`}>
             <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
               <path d="M4.5 2L8.5 6L4.5 10" stroke="currentColor" strokeWidth="1.5" fill="none"/>
@@ -66,11 +169,11 @@ function SidebarItem({ item, depth = 0 }: SidebarItemProps) {
           {item.name}
         </button>
         {isOpen && (
-          <div className="sidebar-folder-children">
-            {item.children.map((child, i) => (
-              <SidebarItem key={i} item={child} depth={depth + 1} />
-            ))}
-          </div>
+          <DraggableFolderChildren
+            items={item.children}
+            path={folderPath}
+            depth={depth + 1}
+          />
         )}
       </div>
     )
@@ -80,13 +183,81 @@ function SidebarItem({ item, depth = 0 }: SidebarItemProps) {
     (item.url === '/' && location.pathname === '/')
 
   return (
-    <Link
-      to={item.url}
-      className={`sidebar-link ${isActive ? 'active' : ''}`}
-      style={{ paddingLeft: `${depth * 12 + 16}px` }}
+    <div
+      className={`sidebar-item-wrapper ${isDropTarget ? 'drop-target' : ''}`}
+      draggable
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragEnd={handleDragEnd}
     >
-      {item.name}
-    </Link>
+      <Link
+        to={item.url}
+        className={`sidebar-link ${isActive ? 'active' : ''}`}
+        style={{ paddingLeft: `${depth * 12 + 16}px` }}
+      >
+        <span className="drag-handle">⠿</span>
+        {item.name}
+      </Link>
+    </div>
+  )
+}
+
+// Draggable folder children with their own order state
+function DraggableFolderChildren({ items, path, depth }: { items: TreeItem[]; path: string; depth: number }) {
+  const [orderedItems, setOrderedItems] = useState<TreeItem[]>(() => applyOrder(items, path))
+  const dragCtx = useContext(DragContext)
+
+  // Update when items change
+  useEffect(() => {
+    setOrderedItems(applyOrder(items, path))
+  }, [items, path])
+
+  // Handle reorder when drag ends in this folder
+  useEffect(() => {
+    if (
+      dragCtx?.dragPath === path &&
+      dragCtx?.dragOverPath === path &&
+      dragCtx?.dragIndex !== null &&
+      dragCtx?.dragOverIndex !== null &&
+      dragCtx?.dragIndex !== dragCtx?.dragOverIndex
+    ) {
+      // Will be handled by parent's onDragEnd
+    }
+  }, [dragCtx, path])
+
+  // Listen for successful drops in this path
+  const prevDragCtx = useRef(dragCtx)
+  useEffect(() => {
+    const prev = prevDragCtx.current
+    if (
+      prev?.dragPath === path &&
+      prev?.dragOverPath === path &&
+      prev?.dragIndex !== null &&
+      prev?.dragOverIndex !== null &&
+      prev?.dragIndex !== prev?.dragOverIndex &&
+      dragCtx?.dragPath === null // drag ended
+    ) {
+      const newItems = [...orderedItems]
+      const [removed] = newItems.splice(prev.dragIndex, 1)
+      newItems.splice(prev.dragOverIndex, 0, removed)
+      setOrderedItems(newItems)
+      saveOrder(newItems, path)
+    }
+    prevDragCtx.current = dragCtx
+  }, [dragCtx, path, orderedItems])
+
+  return (
+    <div className="sidebar-folder-children">
+      {orderedItems.map((child, i) => (
+        <DraggableSidebarItem
+          key={getItemId(child)}
+          item={child}
+          index={i}
+          path={path}
+          depth={depth}
+        />
+      ))}
+    </div>
   )
 }
 
@@ -121,6 +292,41 @@ function ThemeToggle() {
   )
 }
 
+function WidthToggle() {
+  const [isFullWidth, setIsFullWidth] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('content-full-width') === 'true'
+    }
+    return false
+  })
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('full-width', isFullWidth)
+  }, [isFullWidth])
+
+  const toggle = () => {
+    const newFullWidth = !isFullWidth
+    setIsFullWidth(newFullWidth)
+    localStorage.setItem('content-full-width', String(newFullWidth))
+  }
+
+  return (
+    <button className="theme-toggle" onClick={toggle} aria-label="Toggle content width">
+      {isFullWidth ? (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="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>
+      ) : (
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
+        </svg>
+      )}
+    </button>
+  )
+}
+
+const ROOT_PATH = 'root'
+
 export function Layout({ tree, children }: LayoutProps) {
   const [collapsed, setCollapsed] = useState(() => {
     if (typeof window !== 'undefined') {
@@ -129,6 +335,13 @@ export function Layout({ tree, children }: LayoutProps) {
     return false
   })
 
+  const [orderedItems, setOrderedItems] = useState<TreeItem[]>(() => applyOrder(tree.children, ROOT_PATH))
+
+  const [dragPath, setDragPath] = useState<string | null>(null)
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [dragOverPath, setDragOverPath] = useState<string | null>(null)
+  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
+
   // Initialize theme from localStorage
   useEffect(() => {
     const saved = localStorage.getItem('theme')
@@ -137,6 +350,11 @@ export function Layout({ tree, children }: LayoutProps) {
     document.documentElement.classList.toggle('dark', isDark)
   }, [])
 
+  // Update ordered items when tree changes
+  useEffect(() => {
+    setOrderedItems(applyOrder(tree.children, ROOT_PATH))
+  }, [tree.children])
+
   // Persist collapsed state
   useEffect(() => {
     localStorage.setItem('sidebar-collapsed', String(collapsed))
@@ -144,43 +362,96 @@ export function Layout({ tree, children }: LayoutProps) {
 
   const toggleCollapsed = () => setCollapsed(!collapsed)
 
+  const handleDragStart = (path: string, index: number) => {
+    setDragPath(path)
+    setDragIndex(index)
+  }
+
+  const handleDragOver = (path: string, index: number) => {
+    // Only allow dropping in the same path (no cross-folder drops)
+    if (dragPath === path && dragIndex !== index) {
+      setDragOverPath(path)
+      setDragOverIndex(index)
+    }
+  }
+
+  const handleDragEnd = () => {
+    // Handle root-level reordering
+    if (
+      dragPath === ROOT_PATH &&
+      dragOverPath === ROOT_PATH &&
+      dragIndex !== null &&
+      dragOverIndex !== null &&
+      dragIndex !== dragOverIndex
+    ) {
+      const newItems = [...orderedItems]
+      const [removed] = newItems.splice(dragIndex, 1)
+      newItems.splice(dragOverIndex, 0, removed)
+      setOrderedItems(newItems)
+      saveOrder(newItems, ROOT_PATH)
+    }
+
+    setDragPath(null)
+    setDragIndex(null)
+    setDragOverPath(null)
+    setDragOverIndex(null)
+  }
+
   // Get top-level folders for collapsed rail
-  const topFolders = tree.children.filter(
+  const topFolders = orderedItems.filter(
     (item): item is PageTree.Folder => item.type === 'folder'
   )
 
+  const dragContextValue: DragContextType = {
+    dragPath,
+    dragIndex,
+    dragOverPath,
+    dragOverIndex,
+    onDragStart: handleDragStart,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+  }
+
   return (
-    <div className={`prev-layout ${collapsed ? 'sidebar-collapsed' : ''}`}>
-      <aside className="prev-sidebar">
-        <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}
-              />
-            ))}
+    <DragContext.Provider value={dragContextValue}>
+      <div className={`prev-layout ${collapsed ? 'sidebar-collapsed' : ''}`}>
+        <aside className="prev-sidebar">
+          <div className="sidebar-header">
+            <SidebarToggle collapsed={collapsed} onToggle={toggleCollapsed} />
           </div>
-        ) : (
-          <>
-            <nav className="sidebar-nav">
-              {tree.children.map((item, i) => (
-                <SidebarItem key={i} item={item} />
+          {collapsed ? (
+            <div className="sidebar-rail">
+              {topFolders.map((folder, i) => (
+                <CollapsedFolderIcon
+                  key={i}
+                  item={folder}
+                  onClick={toggleCollapsed}
+                />
               ))}
-            </nav>
-            <div className="sidebar-footer">
-              <ThemeToggle />
             </div>
-          </>
-        )}
-      </aside>
-      <main className="prev-main">
-        {children}
-      </main>
-    </div>
+          ) : (
+            <>
+              <nav className="sidebar-nav">
+                {orderedItems.map((item, i) => (
+                  <DraggableSidebarItem
+                    key={getItemId(item)}
+                    item={item}
+                    index={i}
+                    path={ROOT_PATH}
+                  />
+                ))}
+              </nav>
+              <div className="sidebar-footer">
+                <WidthToggle />
+                <ThemeToggle />
+              </div>
+            </>
+          )}
+        </aside>
+        <main className="prev-main">
+          {children}
+        </main>
+      </div>
+    </DragContext.Provider>
   )
 }

package/src/theme/MetadataBlock.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+
+type FrontmatterValue = string | number | boolean | string[] | unknown
+
+interface MetadataBlockProps {
+  frontmatter: Record<string, FrontmatterValue>
+}
+
+// Fields to skip (shown elsewhere or internal)
+const SKIP_FIELDS = new Set(['title', 'description'])
+
+// Fields with special icons
+const FIELD_ICONS: Record<string, string> = {
+  date: '📅',
+  author: '👤',
+  tags: '🏷️',
+  status: '📌',
+  version: '📦',
+  repo: '🔗',
+  url: '🔗',
+  link: '🔗',
+}
+
+/**
+ * Detect the display type of a value
+ */
+function detectType(key: string, value: FrontmatterValue): 'date' | 'url' | 'boolean' | 'array' | 'number' | 'string' {
+  if (Array.isArray(value)) return 'array'
+  if (typeof value === 'boolean') return 'boolean'
+  if (typeof value === 'number') return 'number'
+  if (typeof value !== 'string') return 'string'
+
+  // Check for URL
+  if (value.startsWith('http://') || value.startsWith('https://')) return 'url'
+
+  // Check for date patterns
+  if (key === 'date' || key.includes('date') || key.includes('Date')) {
+    // ISO date or YYYY-MM-DD
+    if (/^\d{4}-\d{2}-\d{2}/.test(value)) return 'date'
+  }
+
+  return 'string'
+}
+
+/**
+ * Format a date string nicely
+ */
+function formatDate(value: string): string {
+  try {
+    const date = new Date(value)
+    if (isNaN(date.getTime())) return value
+    return date.toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    })
+  } catch {
+    return value
+  }
+}
+
+/**
+ * Render a single metadata value based on its type
+ */
+function renderValue(key: string, value: FrontmatterValue): React.ReactNode {
+  const type = detectType(key, value)
+
+  switch (type) {
+    case 'array':
+      return (
+        <span className="metadata-array">
+          {(value as string[]).map((item, i) => (
+            <span key={i} className="metadata-chip">{item}</span>
+          ))}
+        </span>
+      )
+
+    case 'boolean':
+      return (
+        <span className={`metadata-boolean ${value ? 'is-true' : 'is-false'}`}>
+          {value ? '✓' : '✗'}
+        </span>
+      )
+
+    case 'url':
+      return (
+        <a href={value as string} className="metadata-link" target="_blank" rel="noopener noreferrer">
+          {(value as string).replace(/^https?:\/\//, '').split('/')[0]}
+        </a>
+      )
+
+    case 'date':
+      return <span className="metadata-date">{formatDate(value as string)}</span>
+
+    case 'number':
+      return <span className="metadata-number">{(value as number).toLocaleString()}</span>
+
+    default:
+      return <span className="metadata-string">{String(value)}</span>
+  }
+}
+
+export function MetadataBlock({ frontmatter }: MetadataBlockProps) {
+  // Filter out skipped fields and empty values
+  const fields = Object.entries(frontmatter).filter(
+    ([key, value]) => !SKIP_FIELDS.has(key) && value !== undefined && value !== null && value !== ''
+  )
+
+  // Check for draft status
+  const isDraft = frontmatter.draft === true
+
+  // If no fields to show, don't render
+  if (fields.length === 0 && !isDraft) {
+    return null
+  }
+
+  return (
+    <div className="metadata-block">
+      <div className="metadata-fields">
+        {isDraft && (
+          <span className="metadata-field metadata-draft">
+            <span className="metadata-chip is-draft">Draft</span>
+          </span>
+        )}
+        {fields.filter(([key]) => key !== 'draft').map(([key, value]) => (
+          <span key={key} className="metadata-field">
+            {FIELD_ICONS[key] && <span className="metadata-icon">{FIELD_ICONS[key]}</span>}
+            <span className="metadata-key">{key}:</span>
+            {renderValue(key, value)}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/theme/entry.tsx

@@ -10,6 +10,7 @@ import {
 import { pages, sidebar } from 'virtual:prev-pages'
 import { useDiagrams } from './diagrams'
 import { Layout } from './Layout'
+import { MetadataBlock } from './MetadataBlock'
 import './styles.css'
 
 // PageTree types (simplified from fumadocs-core)
@@ -61,10 +62,23 @@ function getPageComponent(file: string): React.ComponentType | null {
   return mod?.default || null
 }
 
+interface PageMeta {
+  title?: string
+  description?: string
+  frontmatter?: Record<string, unknown>
+}
+
 // Page wrapper that renders diagrams after content loads
-function PageWrapper({ Component }: { Component: React.ComponentType }) {
+function PageWrapper({ Component, meta }: { Component: React.ComponentType; meta: PageMeta }) {
   useDiagrams()
-  return <Component />
+  return (
+    <>
+      {meta.frontmatter && Object.keys(meta.frontmatter).length > 0 && (
+        <MetadataBlock frontmatter={meta.frontmatter} />
+      )}
+      <Component />
+    </>
+  )
 }
 
 // Root layout with custom lightweight Layout
@@ -86,12 +100,17 @@ const rootRoute = createRootRoute({
 })
 
 // Create routes from pages
-const pageRoutes = pages.map((page: { route: string; file: string }) => {
+const pageRoutes = pages.map((page: { route: string; file: string; title?: string; description?: string; frontmatter?: Record<string, unknown> }) => {
   const Component = getPageComponent(page.file)
+  const meta: PageMeta = {
+    title: page.title,
+    description: page.description,
+    frontmatter: page.frontmatter,
+  }
   return createRoute({
     getParentRoute: () => rootRoute,
     path: page.route === '/' ? '/' : page.route,
-    component: Component ? () => <PageWrapper Component={Component} /> : () => null,
+    component: Component ? () => <PageWrapper Component={Component} meta={meta} /> : () => null,
   })
 })
 

package/src/theme/styles.css

@@ -165,6 +165,8 @@ body {
 .sidebar-footer {
   padding: 1rem;
   border-top: 1px solid var(--fd-border);
+  display: flex;
+  gap: 0.5rem;
 }
 
 .theme-toggle {
@@ -591,3 +593,142 @@ body {
   background: var(--fd-accent);
   color: var(--fd-accent-foreground);
 }
+
+/* ===========================================
+   Metadata Block Styles
+   =========================================== */
+
+.metadata-block {
+  margin-bottom: 1.5rem;
+}
+
+.metadata-fields {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.metadata-field {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.875rem;
+  color: var(--fd-muted-foreground);
+}
+
+.metadata-icon {
+  font-size: 0.875rem;
+}
+
+.metadata-key {
+  font-weight: 500;
+  color: var(--fd-foreground);
+}
+
+.metadata-chip {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  background: var(--fd-muted);
+  border-radius: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--fd-foreground);
+}
+
+.metadata-chip.is-draft {
+  background: oklch(0.75 0.15 50);
+  color: oklch(0.25 0.05 50);
+}
+
+.dark .metadata-chip.is-draft {
+  background: oklch(0.45 0.12 50);
+  color: oklch(0.95 0.02 50);
+}
+
+.metadata-array {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.metadata-boolean {
+  font-weight: 600;
+}
+
+.metadata-boolean.is-true {
+  color: oklch(0.55 0.15 145);
+}
+
+.metadata-boolean.is-false {
+  color: oklch(0.55 0.15 25);
+}
+
+.metadata-link {
+  color: var(--fd-primary);
+  text-decoration: underline;
+  text-decoration-color: var(--fd-border);
+  text-underline-offset: 2px;
+}
+
+.metadata-link:hover {
+  text-decoration-color: var(--fd-primary);
+}
+
+.metadata-date {
+  font-variant-numeric: tabular-nums;
+}
+
+.metadata-number {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ===========================================
+   Full Width Mode
+   =========================================== */
+
+.full-width .prev-content {
+  max-width: none;
+}
+
+/* ===========================================
+   Drag and Drop Sidebar
+   =========================================== */
+
+.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;
+}
+
+.sidebar-folder.drop-target,
+.sidebar-item-wrapper.drop-target {
+  background: var(--fd-accent);
+  border-radius: 0.375rem;
+}
+
+.sidebar-folder[draggable="true"],
+.sidebar-item-wrapper[draggable="true"] {
+  cursor: grab;
+}
+
+.sidebar-folder[draggable="true"]:active,
+.sidebar-item-wrapper[draggable="true"]:active {
+  cursor: grabbing;
+}