prev-cli 0.17.1 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prev-cli",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "description": "Transform MDX directories into beautiful documentation websites",
   "type": "module",
   "license": "MIT",
@@ -42,7 +42,6 @@
   "dependencies": {
     "@mdx-js/react": "^3.1.1",
     "@mdx-js/rollup": "^3.0.0",
-    "@tabler/icons-react": "^3.36.1",
     "@tailwindcss/vite": "^4.0.0",
     "@tanstack/react-router": "^1.145.7",
     "@terrastruct/d2": "^0.1.33",
@@ -53,7 +52,6 @@
     "fumadocs-core": "^16.4.3",
     "fumadocs-ui": "^16.4.3",
     "js-yaml": "^4.1.1",
-    "lucide-react": "^0.460.0",
     "mermaid": "^11.0.0",
     "picomatch": "^4.0.3",
     "react": "^19.0.0",

package/src/theme/Layout.tsx

@@ -3,6 +3,7 @@ import type { PageTree } from 'fumadocs-core/server'
 import { config } from 'virtual:prev-config'
 import { Toolbar } from './Toolbar'
 import { TOCPanel } from './TOCPanel'
+import { IconSprite } from './icons'
 import './Toolbar.css'
 import './TOCPanel.css'
 
@@ -39,6 +40,7 @@ export function Layout({ tree, children }: LayoutProps) {
 
   return (
     <div className="prev-layout-floating">
+      <IconSprite />
       <Toolbar
         tree={tree}
         onThemeToggle={handleThemeToggle}

package/src/theme/Preview.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
-import { IconDeviceMobile, IconDeviceTablet, IconDeviceDesktop, IconArrowsMaximize, IconArrowsMinimize, IconAdjustmentsHorizontal, IconX, IconLoader2, IconArrowLeft } from '@tabler/icons-react'
 import { Link } from '@tanstack/react-router'
+import { Icon, IconSprite } from './icons'
 import type { PreviewConfig, PreviewMessage, BuildResult } from '../preview-runtime/types'
 
 interface PreviewProps {
@@ -193,7 +193,7 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
         active={deviceMode === 'mobile' && customWidth === null}
         title="Mobile (375px)"
       >
-        <IconDeviceMobile size={16} />
+        <Icon name="mobile" size={16} />
       </IconButton>
 
       <IconButton
@@ -201,7 +201,7 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
         active={deviceMode === 'tablet' && customWidth === null}
         title="Tablet (768px)"
       >
-        <IconDeviceTablet size={16} />
+        <Icon name="tablet" size={16} />
       </IconButton>
 
       <IconButton
@@ -209,7 +209,7 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
         active={deviceMode === 'desktop' && customWidth === null}
         title="Desktop (100%)"
       >
-        <IconDeviceDesktop size={16} />
+        <Icon name="desktop" size={16} />
       </IconButton>
 
       <div style={{ width: '1px', height: '16px', backgroundColor: 'var(--fd-border, #e4e4e7)', margin: '0 4px' }} />
@@ -221,7 +221,7 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
           active={showSlider || customWidth !== null}
           title="Custom width"
         >
-          <IconAdjustmentsHorizontal size={16} />
+          <Icon name="sliders" size={16} />
         </IconButton>
 
         {showSlider && (
@@ -246,7 +246,7 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
                 onClick={() => setShowSlider(false)}
                 style={{ padding: '2px', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--fd-muted-foreground, #a1a1aa)' }}
               >
-                <IconX size={12} />
+                <Icon name="x" size={12} />
               </button>
             </div>
             <input
@@ -270,7 +270,7 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
         active={isFullscreen}
         title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
       >
-        {isFullscreen ? <IconArrowsMinimize size={16} /> : <IconArrowsMaximize size={16} />}
+        <Icon name={isFullscreen ? 'minimize' : 'maximize'} size={16} />
       </IconButton>
     </div>
   )
@@ -371,7 +371,7 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
                 fontSize: '14px',
               }}
             >
-              <IconArrowLeft size={16} />
+              <Icon name="arrow-left" size={16} />
               Back
             </Link>
             <div style={{ width: '1px', height: '20px', backgroundColor: 'var(--fd-border, #e4e4e7)' }} />
@@ -379,7 +379,7 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
               {displayTitle}
             </span>
             {mode === 'wasm' && buildStatus === 'building' && (
-              <IconLoader2 size={16} style={{ color: 'var(--fd-primary, #3b82f6)', animation: 'spin 1s linear infinite' }} />
+              <Icon name="loader" size={16} style={{ color: 'var(--fd-primary, #3b82f6)', animation: 'spin 1s linear infinite' }} />
             )}
             {mode === 'wasm' && buildTime && (
               <span style={{ fontSize: '12px', color: 'var(--fd-muted-foreground, #a1a1aa)' }}>{buildTime}ms</span>
@@ -464,7 +464,7 @@ export function Preview({ src, height = 400, title, mode = 'wasm', showHeader =
             {displayTitle}
           </span>
           {mode === 'wasm' && buildStatus === 'building' && (
-            <IconLoader2 size={14} style={{ color: 'var(--fd-primary, #3b82f6)', animation: 'spin 1s linear infinite' }} />
+            <Icon name="loader" size={14} style={{ color: 'var(--fd-primary, #3b82f6)', animation: 'spin 1s linear infinite' }} />
           )}
           {mode === 'wasm' && buildStatus === 'error' && (
             <span style={{ fontSize: '12px', color: '#ef4444' }}>Error</span>

package/src/theme/TOCPanel.tsx

@@ -1,7 +1,7 @@
 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'
+import { Icon } from './icons'
 
 interface TOCPanelProps {
   tree: PageTree.Root
@@ -83,7 +83,7 @@ export function TOCPanel({ tree, onClose }: TOCPanelProps) {
         <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>
+            <button className="toc-close-btn" onClick={onClose}><Icon name="x" size={16} /></button>
           </div>
           <nav className="toc-nav">
             {orderedItems.map((item) => (
@@ -104,7 +104,7 @@ export function TOCPanel({ tree, onClose }: TOCPanelProps) {
     <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>
+        <button className="toc-close-btn" onClick={onClose}><Icon name="x" size={16} /></button>
       </div>
       <nav className="toc-nav">
         {orderedItems.map((item, i) => (
@@ -146,8 +146,8 @@ function TOCItem({ item, location, onNavigate, depth = 0 }: TOCItemProps) {
           onClick={() => setIsOpen(!isOpen)}
           style={{ paddingLeft: `${depth * 12 + 8}px` }}
         >
-          <IconChevronRight size={14} className={`folder-chevron ${isOpen ? 'open' : ''}`} />
-          <IconFolder size={14} className="toc-icon" />
+          <Icon name="chevron-right" size={14} className={`folder-chevron ${isOpen ? 'open' : ''}`} />
+          <Icon name="folder" size={14} className="toc-icon" />
           {item.name}
         </button>
         {isOpen && (
@@ -176,7 +176,7 @@ function TOCItem({ item, location, onNavigate, depth = 0 }: TOCItemProps) {
       style={{ paddingLeft: `${depth * 12 + 12}px` }}
       onClick={onNavigate}
     >
-      <IconFile size={14} className="toc-icon" />
+      <Icon name="file" size={14} className="toc-icon" />
       {item.name}
     </Link>
   )

package/src/theme/Toolbar.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react'
 import { Link, useLocation } 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 { Icon } from './icons'
 import './Toolbar.css'
 
 interface ToolbarProps {
@@ -61,12 +61,12 @@ export function Toolbar({ tree, onThemeToggle, onWidthToggle, isDark, isFullWidt
         onClick={onTocToggle}
         title="Table of Contents"
       >
-        <IconMenu2 size={18} />
+        <Icon name="menu" size={18} />
       </button>
 
       {previews && previews.length > 0 && (
         <Link to="/previews" className={`toolbar-btn ${isOnPreviews ? 'active' : ''}`} title="Previews">
-          <IconLayoutGrid size={18} />
+          <Icon name="grid" size={18} />
         </Link>
       )}
 
@@ -78,7 +78,7 @@ export function Toolbar({ tree, onThemeToggle, onWidthToggle, isDark, isFullWidt
         onClick={onWidthToggle}
         title={isFullWidth ? 'Constrain width' : 'Full width'}
       >
-        {isFullWidth ? <IconArrowsMinimize size={18} /> : <IconArrowsMaximize size={18} />}
+        <Icon name={isFullWidth ? 'minimize' : 'maximize'} size={18} />
       </button>
 
       <button
@@ -86,7 +86,7 @@ export function Toolbar({ tree, onThemeToggle, onWidthToggle, isDark, isFullWidt
         onClick={onThemeToggle}
         title={isDark ? 'Light mode' : 'Dark mode'}
       >
-        {isDark ? <IconSun size={18} /> : <IconMoon size={18} />}
+        <Icon name={isDark ? 'sun' : 'moon'} size={18} />
       </button>
     </div>
   )

package/src/theme/icons.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+
+// SVG Sprite containing all icons used in the theme
+// Icons sourced from Tabler Icons (MIT License)
+export function IconSprite() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" style={{ display: 'none' }}>
+      {/* Menu (hamburger) */}
+      <symbol id="icon-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 6h16M4 12h16M4 18h16" />
+      </symbol>
+
+      {/* Layout Grid */}
+      <symbol id="icon-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="3" y="3" width="7" height="7" rx="1" />
+        <rect x="14" y="3" width="7" height="7" rx="1" />
+        <rect x="3" y="14" width="7" height="7" rx="1" />
+        <rect x="14" y="14" width="7" height="7" rx="1" />
+      </symbol>
+
+      {/* Sun */}
+      <symbol id="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="4" />
+        <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+      </symbol>
+
+      {/* Moon */}
+      <symbol id="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z" />
+      </symbol>
+
+      {/* Maximize */}
+      <symbol id="icon-maximize" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3" />
+      </symbol>
+
+      {/* Minimize */}
+      <symbol id="icon-minimize" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3" />
+      </symbol>
+
+      {/* X (close) */}
+      <symbol id="icon-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M18 6L6 18M6 6l12 12" />
+      </symbol>
+
+      {/* Chevron Right */}
+      <symbol id="icon-chevron-right" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M9 18l6-6-6-6" />
+      </symbol>
+
+      {/* File */}
+      <symbol id="icon-file" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+        <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8" />
+      </symbol>
+
+      {/* Folder */}
+      <symbol id="icon-folder" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+      </symbol>
+
+      {/* Smartphone (mobile) */}
+      <symbol id="icon-mobile" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="5" y="2" width="14" height="20" rx="2" ry="2" />
+        <path d="M12 18h.01" />
+      </symbol>
+
+      {/* Tablet */}
+      <symbol id="icon-tablet" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="4" y="2" width="16" height="20" rx="2" ry="2" />
+        <path d="M12 18h.01" />
+      </symbol>
+
+      {/* Monitor (desktop) */}
+      <symbol id="icon-desktop" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+        <path d="M8 21h8M12 17v4" />
+      </symbol>
+
+      {/* Sliders (adjustments) */}
+      <symbol id="icon-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" />
+      </symbol>
+
+      {/* Loader (spinner) */}
+      <symbol id="icon-loader" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </symbol>
+
+      {/* Arrow Left */}
+      <symbol id="icon-arrow-left" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M19 12H5M12 19l-7-7 7-7" />
+      </symbol>
+    </svg>
+  )
+}
+
+// Icon component that references symbols from the sprite
+interface IconProps {
+  name: 'menu' | 'grid' | 'sun' | 'moon' | 'maximize' | 'minimize' | 'x' | 'chevron-right' | 'file' | 'folder' | 'mobile' | 'tablet' | 'desktop' | 'sliders' | 'loader' | 'arrow-left'
+  size?: number
+  className?: string
+  style?: React.CSSProperties
+}
+
+export function Icon({ name, size = 24, className, style }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      className={className}
+      style={style}
+    >
+      <use href={`#icon-${name}`} />
+    </svg>
+  )
+}