prev-cli 0.13.1 → 0.14.0

package/dist/cli.js

@@ -1021,6 +1021,8 @@ Previews:
   Previews are bundled via esbuild-wasm in dev, and pre-compiled
   to standalone HTML files in production builds.
 
+  Browse all previews at /previews (Storybook-like catalog).
+
 Examples:
   prev                       Start dev server on random port
   prev -p 3000               Start dev server on port 3000

package/package.json

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

package/src/theme/entry.tsx

@@ -9,6 +9,8 @@ import {
 } from '@tanstack/react-router'
 import { MDXProvider } from '@mdx-js/react'
 import { pages, sidebar } from 'virtual:prev-pages'
+import { previews } from 'virtual:prev-previews'
+import { Preview } from './Preview'
 import { useDiagrams } from './diagrams'
 import { Layout } from './Layout'
 import { MetadataBlock } from './MetadataBlock'
@@ -83,6 +85,92 @@ function PageWrapper({ Component, meta }: { Component: React.ComponentType; meta
   )
 }
 
+// Previews catalog - Storybook-like gallery
+function PreviewsCatalog() {
+  if (!previews || previews.length === 0) {
+    return (
+      <div style={{ padding: '40px 20px', textAlign: 'center' }}>
+        <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
+          No Previews Found
+        </h1>
+        <p style={{ color: '#666', marginBottom: '24px' }}>
+          Create your first preview with:
+        </p>
+        <code style={{
+          display: 'inline-block',
+          padding: '12px 20px',
+          backgroundColor: '#f4f4f5',
+          borderRadius: '8px',
+          fontFamily: 'monospace',
+        }}>
+          prev create my-demo
+        </code>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ marginBottom: '32px' }}>
+        <h1 style={{ fontSize: '28px', fontWeight: 'bold', marginBottom: '8px' }}>
+          Previews
+        </h1>
+        <p style={{ color: '#666' }}>
+          {previews.length} component preview{previews.length !== 1 ? 's' : ''} available
+        </p>
+      </div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(400px, 1fr))',
+        gap: '24px',
+      }}>
+        {previews.map((preview: { name: string; route: string }) => (
+          <div key={preview.name} style={{
+            border: '1px solid #e4e4e7',
+            borderRadius: '12px',
+            overflow: 'hidden',
+            backgroundColor: '#fff',
+          }}>
+            <div style={{
+              padding: '12px 16px',
+              borderBottom: '1px solid #e4e4e7',
+              backgroundColor: '#fafafa',
+            }}>
+              <h2 style={{ fontSize: '16px', fontWeight: 600, margin: 0 }}>
+                {preview.name}
+              </h2>
+              <code style={{
+                fontSize: '12px',
+                color: '#666',
+                fontFamily: 'monospace',
+              }}>
+                previews/{preview.name}/
+              </code>
+            </div>
+            <Preview src={preview.name} height={300} />
+          </div>
+        ))}
+      </div>
+
+      <div style={{
+        marginTop: '40px',
+        padding: '16px',
+        backgroundColor: '#f0f9ff',
+        border: '1px solid #bae6fd',
+        borderRadius: '8px',
+      }}>
+        <p style={{ margin: 0, fontSize: '14px', color: '#0369a1' }}>
+          <strong>Tip:</strong> Embed any preview in your MDX docs with{' '}
+          <code style={{ backgroundColor: '#e0f2fe', padding: '2px 6px', borderRadius: '4px' }}>
+            {'<Preview src="name" />'}
+          </code>
+        </p>
+      </div>
+    </div>
+  )
+}
+
 // Root layout with custom lightweight Layout
 function RootLayout() {
   const pageTree = convertToPageTree(sidebar)
@@ -101,6 +189,13 @@ const rootRoute = createRootRoute({
   component: RootLayout,
 })
 
+// Previews catalog route
+const previewsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/previews',
+  component: PreviewsCatalog,
+})
+
 // Create routes from pages
 const pageRoutes = pages.map((page: { route: string; file: string; title?: string; description?: string; frontmatter?: Record<string, unknown> }) => {
   const Component = getPageComponent(page.file)
@@ -117,7 +212,7 @@ const pageRoutes = pages.map((page: { route: string; file: string; title?: strin
 })
 
 // Create router
-const routeTree = rootRoute.addChildren(pageRoutes)
+const routeTree = rootRoute.addChildren([previewsRoute, ...pageRoutes])
 const router = createRouter({ routeTree })
 
 // Mount app - RouterProvider must be outermost so TanStack Router context is available