prev-cli 0.10.0 → 0.11.1

package/dist/cli.js

@@ -348,7 +348,7 @@ function entryPlugin(rootDir) {
       const html = getHtml(entryPath, false);
       server.middlewares.use(async (req, res, next) => {
         const url = req.url || "/";
-        if (url === "/" || !url.includes(".") && !url.startsWith("/@")) {
+        if (url === "/" || !url.includes(".") && !url.startsWith("/@") && !url.startsWith("/_preview/")) {
           try {
             const transformed = await server.transformIndexHtml(url, html);
             res.setHeader("Content-Type", "text/html");
@@ -549,25 +549,42 @@ async function createViteConfig(options) {
       previewsPlugin(rootDir),
       {
         name: "prev-preview-server",
+        resolveId(id) {
+          if (id.startsWith("/_preview/")) {
+            const relativePath = id.slice("/_preview/".length);
+            const previewsDir = path6.join(rootDir, "previews");
+            const resolved = path6.resolve(previewsDir, relativePath);
+            if (resolved.startsWith(previewsDir)) {
+              return resolved;
+            }
+          }
+        },
         configureServer(server) {
           server.middlewares.use(async (req, res, next) => {
             if (req.url?.startsWith("/_preview/")) {
-              const previewName = decodeURIComponent(req.url.slice("/_preview/".length).split("?")[0]);
-              const previewsDir = path6.join(rootDir, "previews");
-              const htmlPath = path6.resolve(previewsDir, previewName, "index.html");
-              if (!htmlPath.startsWith(previewsDir)) {
-                return next();
-              }
-              if (existsSync4(htmlPath)) {
-                try {
-                  const html = await server.transformIndexHtml(req.url, readFileSync2(htmlPath, "utf-8"));
-                  res.setHeader("Content-Type", "text/html");
-                  res.end(html);
-                  return;
-                } catch (err) {
-                  console.error("Error serving preview:", err);
+              const urlPath = req.url.split("?")[0];
+              const isHtmlRequest = !path6.extname(urlPath) || urlPath.endsWith("/");
+              if (isHtmlRequest) {
+                const previewName = decodeURIComponent(urlPath.slice("/_preview/".length).replace(/\/$/, ""));
+                const previewsDir = path6.join(rootDir, "previews");
+                const htmlPath = path6.resolve(previewsDir, previewName, "index.html");
+                if (!htmlPath.startsWith(previewsDir)) {
                   return next();
                 }
+                if (existsSync4(htmlPath)) {
+                  try {
+                    let html = readFileSync2(htmlPath, "utf-8");
+                    const previewBase = `/_preview/${previewName}/`;
+                    html = html.replace(/(src|href)=["']\.\/([^"']+)["']/g, `$1="${previewBase}$2"`);
+                    const transformed = await server.transformIndexHtml(req.url, html);
+                    res.setHeader("Content-Type", "text/html");
+                    res.end(transformed);
+                    return;
+                  } catch (err) {
+                    console.error("Error serving preview:", err);
+                    return next();
+                  }
+                }
               }
             }
             next();

package/package.json

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

package/src/theme/Preview.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react'
-import { Maximize2, Minimize2, ExternalLink } from 'lucide-react'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import { Smartphone, Tablet, Monitor, SunMedium, Moon, Maximize2, Minimize2, GripVertical, SlidersHorizontal, X } from 'lucide-react'
 
 interface PreviewProps {
   src: string
@@ -7,18 +7,45 @@ interface PreviewProps {
   title?: string
 }
 
+type DeviceMode = 'mobile' | 'tablet' | 'desktop'
+
+const DEVICE_WIDTHS: Record<DeviceMode, number | '100%'> = {
+  mobile: 375,
+  tablet: 768,
+  desktop: '100%',
+}
+
+interface Position {
+  x: number
+  y: number
+}
+
 export function Preview({ src, height = 400, title }: PreviewProps) {
   const [isFullscreen, setIsFullscreen] = useState(false)
+  const [deviceMode, setDeviceMode] = useState<DeviceMode>('desktop')
+  const [customWidth, setCustomWidth] = useState<number | null>(null)
+  const [isDarkMode, setIsDarkMode] = useState(false)
+  const [showSlider, setShowSlider] = useState(false)
+  const [pillPosition, setPillPosition] = useState<Position>({ x: 0, y: 0 })
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragOffset, setDragOffset] = useState<Position>({ x: 0, y: 0 })
+
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const pillRef = useRef<HTMLDivElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
   const previewUrl = `/_preview/${src}`
   const displayTitle = title || src
 
+  // Calculate current width
+  const currentWidth = customWidth ?? (DEVICE_WIDTHS[deviceMode] === '100%' ? null : DEVICE_WIDTHS[deviceMode] as number)
+
+  // Handle escape key and body scroll lock
   useEffect(() => {
     if (!isFullscreen) return
 
-    // Lock body scroll
     document.body.style.overflow = 'hidden'
 
-    // Handle escape key
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         setIsFullscreen(false)
@@ -32,74 +59,324 @@ export function Preview({ src, height = 400, title }: PreviewProps) {
     }
   }, [isFullscreen])
 
-  if (isFullscreen) {
+  // Toggle dark mode on iframe
+  useEffect(() => {
+    const iframe = iframeRef.current
+    if (!iframe) return
+
+    const applyDarkMode = () => {
+      try {
+        const doc = iframe.contentDocument
+        if (doc?.documentElement) {
+          if (isDarkMode) {
+            doc.documentElement.classList.add('dark')
+          } else {
+            doc.documentElement.classList.remove('dark')
+          }
+        }
+      } catch {
+        // Cross-origin iframe, can't access
+      }
+    }
+
+    // Apply on load and when mode changes
+    iframe.addEventListener('load', applyDarkMode)
+    applyDarkMode()
+
+    return () => {
+      iframe.removeEventListener('load', applyDarkMode)
+    }
+  }, [isDarkMode])
+
+  // Drag handlers
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    if (!pillRef.current) return
+    e.preventDefault()
+
+    const rect = pillRef.current.getBoundingClientRect()
+    setDragOffset({
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
+    })
+    setIsDragging(true)
+  }, [])
+
+  useEffect(() => {
+    if (!isDragging) return
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const container = isFullscreen ? document.body : containerRef.current
+      if (!container) return
+
+      const containerRect = isFullscreen
+        ? { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }
+        : container.getBoundingClientRect()
+
+      const pillWidth = pillRef.current?.offsetWidth || 0
+      const pillHeight = pillRef.current?.offsetHeight || 0
+
+      // Calculate position relative to container
+      let newX = e.clientX - containerRect.left - dragOffset.x
+      let newY = e.clientY - containerRect.top - dragOffset.y
+
+      // Constrain to container bounds
+      newX = Math.max(0, Math.min(newX, containerRect.width - pillWidth))
+      newY = Math.max(0, Math.min(newY, containerRect.height - pillHeight))
+
+      setPillPosition({ x: newX, y: newY })
+    }
+
+    const handleMouseUp = () => {
+      setIsDragging(false)
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [isDragging, dragOffset, isFullscreen])
+
+  // Reset pill position when entering/exiting fullscreen
+  useEffect(() => {
+    setPillPosition({ x: 0, y: 0 })
+  }, [isFullscreen])
+
+  const handleDeviceChange = (mode: DeviceMode) => {
+    setDeviceMode(mode)
+    setCustomWidth(null)
+    setShowSlider(false)
+  }
+
+  const handleSliderChange = (value: number) => {
+    setCustomWidth(value)
+    setDeviceMode('desktop') // Clear device mode when using custom
+  }
+
+  // Icon button component
+  const IconButton = ({
+    onClick,
+    active,
+    title: btnTitle,
+    children
+  }: {
+    onClick: () => void
+    active?: boolean
+    title: string
+    children: React.ReactNode
+  }) => (
+    <button
+      onClick={onClick}
+      className={`p-1.5 rounded transition-colors ${
+        active
+          ? 'bg-blue-500 text-white'
+          : 'text-zinc-500 hover:bg-zinc-200 dark:hover:bg-zinc-700 hover:text-zinc-700 dark:hover:text-zinc-300'
+      }`}
+      title={btnTitle}
+      aria-label={btnTitle}
+    >
+      {children}
+    </button>
+  )
+
+  // Floating DevTools Pill
+  const DevToolsPill = () => {
+    const pillStyle: React.CSSProperties = pillPosition.x === 0 && pillPosition.y === 0
+      ? { bottom: 12, right: 12 }
+      : { left: pillPosition.x, top: pillPosition.y }
+
     return (
-      <div className="fixed inset-0 z-50 bg-white dark:bg-zinc-900">
-        <div className="flex items-center justify-between p-2 border-b border-zinc-200 dark:border-zinc-700">
-          <span className="text-sm font-medium">{displayTitle}</span>
-          <div className="flex gap-2">
-            <a
-              href={previewUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded"
-              title="Open in new tab"
-              aria-label="Open in new tab"
-            >
-              <ExternalLink className="w-4 h-4" />
-            </a>
-            <button
-              onClick={() => setIsFullscreen(false)}
-              className="p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded"
-              title="Exit fullscreen"
-              aria-label="Exit fullscreen"
-            >
-              <Minimize2 className="w-4 h-4" />
-            </button>
-          </div>
+      <div
+        ref={pillRef}
+        className={`absolute z-50 flex items-center gap-0.5 px-1.5 py-1 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 ${
+          isDragging ? 'cursor-grabbing' : ''
+        }`}
+        style={pillStyle}
+      >
+        {/* Drag handle */}
+        <div
+          onMouseDown={handleMouseDown}
+          className="p-1 cursor-grab text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300"
+          title="Drag to move"
+        >
+          <GripVertical className="w-3 h-3" />
         </div>
-        <iframe
-          src={previewUrl}
-          className="w-full h-[calc(100vh-49px)]"
-          title={displayTitle}
+
+        <div className="w-px h-4 bg-zinc-200 dark:bg-zinc-700 mx-0.5" />
+
+        {/* Device modes */}
+        <IconButton
+          onClick={() => handleDeviceChange('mobile')}
+          active={deviceMode === 'mobile' && customWidth === null}
+          title="Mobile (375px)"
+        >
+          <Smartphone className="w-3.5 h-3.5" />
+        </IconButton>
+
+        <IconButton
+          onClick={() => handleDeviceChange('tablet')}
+          active={deviceMode === 'tablet' && customWidth === null}
+          title="Tablet (768px)"
+        >
+          <Tablet className="w-3.5 h-3.5" />
+        </IconButton>
+
+        <IconButton
+          onClick={() => handleDeviceChange('desktop')}
+          active={deviceMode === 'desktop' && customWidth === null}
+          title="Desktop (100%)"
+        >
+          <Monitor className="w-3.5 h-3.5" />
+        </IconButton>
+
+        <div className="w-px h-4 bg-zinc-200 dark:bg-zinc-700 mx-0.5" />
+
+        {/* Width slider toggle */}
+        <div className="relative">
+          <IconButton
+            onClick={() => setShowSlider(!showSlider)}
+            active={showSlider || customWidth !== null}
+            title="Custom width"
+          >
+            <SlidersHorizontal className="w-3.5 h-3.5" />
+          </IconButton>
+
+          {/* Slider popup */}
+          {showSlider && (
+            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-3 bg-white dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-200 dark:border-zinc-700 min-w-48">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-xs text-zinc-500">Width: {customWidth ?? currentWidth ?? '100%'}px</span>
+                <button
+                  onClick={() => setShowSlider(false)}
+                  className="p-0.5 text-zinc-400 hover:text-zinc-600"
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </div>
+              <input
+                type="range"
+                min={320}
+                max={1920}
+                value={customWidth ?? (typeof currentWidth === 'number' ? currentWidth : 1920)}
+                onChange={(e) => handleSliderChange(parseInt(e.target.value))}
+                className="w-full accent-blue-500"
+              />
+              <div className="flex justify-between text-xs text-zinc-400 mt-1">
+                <span>320px</span>
+                <span>1920px</span>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="w-px h-4 bg-zinc-200 dark:bg-zinc-700 mx-0.5" />
+
+        {/* Dark mode toggle */}
+        <IconButton
+          onClick={() => setIsDarkMode(!isDarkMode)}
+          active={isDarkMode}
+          title={isDarkMode ? 'Light mode' : 'Dark mode'}
+        >
+          {isDarkMode ? <Moon className="w-3.5 h-3.5" /> : <SunMedium className="w-3.5 h-3.5" />}
+        </IconButton>
+
+        {/* Fullscreen toggle */}
+        <IconButton
+          onClick={() => setIsFullscreen(!isFullscreen)}
+          active={isFullscreen}
+          title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+        >
+          {isFullscreen ? <Minimize2 className="w-3.5 h-3.5" /> : <Maximize2 className="w-3.5 h-3.5" />}
+        </IconButton>
+      </div>
+    )
+  }
+
+  // Calculate iframe style
+  const getIframeContainerStyle = (): React.CSSProperties => {
+    if (currentWidth === null) {
+      return { width: '100%' }
+    }
+    return {
+      width: currentWidth,
+      maxWidth: '100%',
+      margin: '0 auto',
+    }
+  }
+
+  if (isFullscreen) {
+    return (
+      <div className="fixed inset-0 z-40 bg-zinc-100 dark:bg-zinc-900 flex items-start justify-center overflow-auto">
+        {/* Checkered background pattern */}
+        <div
+          className="absolute inset-0 opacity-50"
+          style={{
+            backgroundImage: 'linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(-45deg, transparent 75%, #e5e5e5 75%)',
+            backgroundSize: '20px 20px',
+            backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+          }}
         />
+
+        {/* Iframe container */}
+        <div
+          className="relative bg-white dark:bg-zinc-900 shadow-2xl transition-all duration-300 h-full"
+          style={getIframeContainerStyle()}
+        >
+          <iframe
+            ref={iframeRef}
+            src={previewUrl}
+            className="w-full h-full"
+            title={displayTitle}
+          />
+        </div>
+
+        <DevToolsPill />
       </div>
     )
   }
 
   return (
-    <div className="my-4 border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden">
+    <div
+      ref={containerRef}
+      className="my-4 border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden relative"
+    >
+      {/* Header */}
       <div className="flex items-center justify-between px-3 py-2 bg-zinc-50 dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-700">
         <span className="text-sm font-medium text-zinc-600 dark:text-zinc-400">
           {displayTitle}
         </span>
-        <div className="flex gap-1">
-          <a
-            href={previewUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="p-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded"
-            title="Open in new tab"
-            aria-label="Open in new tab"
-          >
-            <ExternalLink className="w-4 h-4 text-zinc-500" />
-          </a>
-          <button
-            onClick={() => setIsFullscreen(true)}
-            className="p-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded"
-            title="Fullscreen"
-            aria-label="Enter fullscreen"
-          >
-            <Maximize2 className="w-4 h-4 text-zinc-500" />
-          </button>
+        <span className="text-xs text-zinc-400">
+          {currentWidth ? `${currentWidth}px` : '100%'}
+        </span>
+      </div>
+
+      {/* Preview area with checkered background */}
+      <div
+        className="relative bg-zinc-100 dark:bg-zinc-900"
+        style={{
+          backgroundImage: 'linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(-45deg, transparent 75%, #e5e5e5 75%)',
+          backgroundSize: '16px 16px',
+          backgroundPosition: '0 0, 0 8px, 8px -8px, -8px 0px',
+        }}
+      >
+        {/* Iframe container */}
+        <div
+          className="bg-white dark:bg-zinc-900 transition-all duration-300"
+          style={getIframeContainerStyle()}
+        >
+          <iframe
+            ref={iframeRef}
+            src={previewUrl}
+            style={{ height: typeof height === 'number' ? `${height}px` : height }}
+            className="w-full"
+            title={displayTitle}
+          />
         </div>
+
+        <DevToolsPill />
       </div>
-      <iframe
-        src={previewUrl}
-        style={{ height: typeof height === 'number' ? `${height}px` : height }}
-        className="w-full"
-        title={displayTitle}
-      />
     </div>
   )
 }