prev-cli 0.24.15 → 0.24.18

package/src/theme/entry.tsx

@@ -15,8 +15,10 @@ import {
 import { MDXProvider } from '@mdx-js/react'
 import { pages, sidebar } from 'virtual:prev-pages'
 import { pageModules } from 'virtual:prev-page-modules'
-import { previews } from 'virtual:prev-previews'
+import { previews, previewUnits } from 'virtual:prev-previews'
+import type { PreviewUnit, PreviewType } from '../vite/preview-types'
 import { Preview } from './Preview'
+import { TokensPage } from './previews/TokensPage'
 import { useDiagrams } from './diagrams'
 import { Layout } from './Layout'
 import { MetadataBlock } from './MetadataBlock'
@@ -91,9 +93,119 @@ function PageWrapper({ Component, meta }: { Component: React.ComponentType; meta
   )
 }
 
-// Previews catalog - Storybook-like gallery with clickable cards
+// Category metadata for display
+const CATEGORY_META: Record<PreviewType, { label: string; icon: string; description: string }> = {
+  component: {
+    label: 'Components',
+    icon: '⬡',
+    description: 'Reusable UI building blocks',
+  },
+  screen: {
+    label: 'Screens',
+    icon: '▣',
+    description: 'Full page layouts and views',
+  },
+  flow: {
+    label: 'Flows',
+    icon: '⇢',
+    description: 'Multi-step user journeys',
+  },
+  atlas: {
+    label: 'Atlas',
+    icon: '◎',
+    description: 'Information architecture maps',
+  },
+}
+
+// Category display order
+const CATEGORY_ORDER: PreviewType[] = ['component', 'screen', 'flow', 'atlas']
+
+// Group previews by type
+function groupByType(units: PreviewUnit[]): Map<PreviewType, PreviewUnit[]> {
+  const grouped = new Map<PreviewType, PreviewUnit[]>()
+  for (const unit of units) {
+    const existing = grouped.get(unit.type) || []
+    grouped.set(unit.type, [...existing, unit])
+  }
+  return grouped
+}
+
+// Category section component
+function CategorySection({ type, units }: { type: PreviewType; units: PreviewUnit[] }) {
+  const meta = CATEGORY_META[type]
+
+  return (
+    <section style={{ marginBottom: '32px' }}>
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        marginBottom: '16px',
+        paddingBottom: '12px',
+        borderBottom: '1px solid var(--fd-border)',
+      }}>
+        <span style={{ fontSize: '20px' }}>{meta.icon}</span>
+        <div>
+          <h2 style={{
+            fontSize: '18px',
+            fontWeight: '600',
+            margin: 0,
+            color: 'var(--fd-foreground)',
+          }}>
+            {meta.label}
+            <span style={{
+              marginLeft: '8px',
+              fontSize: '14px',
+              fontWeight: '400',
+              color: 'var(--fd-muted-foreground)',
+            }}>
+              ({units.length})
+            </span>
+          </h2>
+          <p style={{
+            fontSize: '13px',
+            color: 'var(--fd-muted-foreground)',
+            margin: 0,
+          }}>
+            {meta.description}
+          </p>
+        </div>
+      </div>
+      <div className="previews-grid">
+        {units.map((unit) => {
+          // Extract full path name from route (e.g., "/_preview/components/button" -> "components/button")
+          const fullName = unit.route.replace(/^\/_preview\//, '')
+          return (
+            <PreviewCard
+              key={fullName}
+              name={fullName}
+              title={unit.config?.title}
+              status={unit.config?.status}
+            />
+          )
+        })}
+      </div>
+    </section>
+  )
+}
+
+// Previews catalog - Storybook-like gallery with categorized sections
 function PreviewsCatalog() {
-  if (!previews || previews.length === 0) {
+  // Use previewUnits for categorization, fall back to legacy previews
+  const units = previewUnits || []
+  const legacyPreviews = previews || []
+
+  // If no units but have legacy previews, convert them
+  const allUnits: PreviewUnit[] = units.length > 0 ? units : legacyPreviews.map((p: { name: string; route: string }) => ({
+    type: 'component' as PreviewType,
+    name: p.name,
+    path: '',
+    route: p.route,
+    config: null,
+    files: { index: '' },
+  }))
+
+  if (allUnits.length === 0) {
     return (
       <div style={{ padding: '40px 20px', textAlign: 'center' }}>
         <h1 style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '16px' }}>
@@ -115,24 +227,30 @@ function PreviewsCatalog() {
     )
   }
 
+  const grouped = groupByType(allUnits)
+  const totalCount = allUnits.length
+
   return (
     <div className="previews-catalog">
-      <div style={{ marginBottom: '24px' }}>
+      {/* Header */}
+      <div style={{ marginBottom: '32px' }}>
         <h1 style={{ fontSize: '28px', fontWeight: 'bold', marginBottom: '8px' }}>
           Previews
         </h1>
         <p style={{ color: 'var(--fd-muted-foreground)', margin: 0 }}>
-          {previews.length} component preview{previews.length !== 1 ? 's' : ''} available.
+          {totalCount} preview{totalCount !== 1 ? 's' : ''} across {grouped.size} categor{grouped.size !== 1 ? 'ies' : 'y'}.
           Click any preview to open it.
         </p>
       </div>
 
-      <div className="previews-grid">
-        {previews.map((preview: { name: string; route: string }) => (
-          <PreviewCard key={preview.name} name={preview.name} />
-        ))}
-      </div>
+      {/* Categorized sections */}
+      {CATEGORY_ORDER.map((type) => {
+        const units = grouped.get(type)
+        if (!units || units.length === 0) return null
+        return <CategorySection key={type} type={type} units={units} />
+      })}
 
+      {/* Tip */}
       <div style={{
         marginTop: '32px',
         padding: '14px 16px',
@@ -154,7 +272,7 @@ function PreviewsCatalog() {
 // Individual preview card - clickable thumbnail with WASM preview communication
 import type { PreviewConfig, PreviewMessage } from '../preview-runtime/types'
 
-function PreviewCard({ name }: { name: string }) {
+function PreviewCard({ name, title, status }: { name: string; title?: string; status?: 'draft' | 'stable' | 'deprecated' }) {
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
   const [isLoaded, setIsLoaded] = React.useState(false)
   const [loadError, setLoadError] = React.useState(false)
@@ -255,7 +373,22 @@ function PreviewCard({ name }: { name: string }) {
       </div>
       {/* Card footer */}
       <div className="preview-card-footer">
-        <h3 className="preview-card-title">{name}</h3>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <h3 className="preview-card-title">{title || name}</h3>
+          {status && status !== 'stable' && (
+            <span style={{
+              fontSize: '10px',
+              fontWeight: '500',
+              padding: '2px 6px',
+              borderRadius: '4px',
+              backgroundColor: status === 'draft' ? 'var(--fd-warning-background, #fef3c7)' : 'var(--fd-muted)',
+              color: status === 'draft' ? 'var(--fd-warning-foreground, #92400e)' : 'var(--fd-muted-foreground)',
+              textTransform: 'uppercase',
+            }}>
+              {status}
+            </span>
+          )}
+        </div>
         <code className="preview-card-path">previews/{name}/</code>
       </div>
     </Link>
@@ -329,6 +462,13 @@ const previewDetailRoute = createRoute({
   component: PreviewPage,
 })
 
+// Tokens showcase route (design system tokens reference)
+const tokensRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/_prev/tokens',
+  component: TokensPage,
+})
+
 // Check if we have an index page (route '/')
 const hasIndexPage = pages.some((page: { route: string }) => page.route === '/')
 const firstPage = pages[0] as { route: string; file: string; title?: string; description?: string; frontmatter?: Record<string, unknown> } | undefined
@@ -370,6 +510,7 @@ const previewsRouteWithChildren = previewsLayoutRoute.addChildren([
 
 const routeTree = rootRoute.addChildren([
   previewsRouteWithChildren,
+  tokensRoute,
   ...(indexRedirectRoute ? [indexRedirectRoute] : []),
   ...pageRoutes,
 ])

package/src/theme/previews/TokensPage.tsx

@@ -0,0 +1,328 @@
+// src/theme/previews/TokensPage.tsx
+// Visual showcase page for design tokens at /_prev/tokens
+import React, { useState } from 'react'
+import { tokens } from 'virtual:prev-tokens'
+
+interface TokenRowProps {
+  name: string
+  value: string | number
+  preview?: React.ReactNode
+  category: string
+}
+
+function TokenRow({ name, value, preview, category }: TokenRowProps) {
+  const [copied, setCopied] = useState(false)
+
+  const copyToken = () => {
+    const prompt = `Use the ${category} token "${name}" (value: ${value})`
+    navigator.clipboard.writeText(prompt)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <div
+      data-token={name}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '16px',
+        padding: '12px 16px',
+        borderBottom: '1px solid var(--fd-border)',
+      }}
+    >
+      {/* Preview swatch */}
+      <div style={{ width: '48px', height: '48px', flexShrink: 0 }}>
+        {preview}
+      </div>
+
+      {/* Token info */}
+      <div style={{ flex: 1 }}>
+        <div style={{ fontWeight: 500, color: 'var(--fd-foreground)' }}>{name}</div>
+        <div data-value style={{ fontSize: '14px', color: 'var(--fd-muted-foreground)', fontFamily: 'monospace' }}>
+          {String(value)}
+        </div>
+      </div>
+
+      {/* Copy button */}
+      <button
+        data-copy
+        onClick={copyToken}
+        style={{
+          padding: '6px 12px',
+          fontSize: '12px',
+          border: '1px solid var(--fd-border)',
+          borderRadius: '4px',
+          background: copied ? 'var(--fd-accent)' : 'var(--fd-background)',
+          color: copied ? 'var(--fd-accent-foreground)' : 'var(--fd-foreground)',
+          cursor: 'pointer',
+        }}
+      >
+        {copied ? 'Copied!' : 'Copy'}
+      </button>
+    </div>
+  )
+}
+
+function ColorSwatch({ color }: { color: string }) {
+  return (
+    <div style={{
+      width: '48px',
+      height: '48px',
+      backgroundColor: color,
+      borderRadius: '6px',
+      border: '1px solid var(--fd-border)',
+    }} />
+  )
+}
+
+function SpacingSwatch({ size }: { size: string }) {
+  return (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '48px',
+      height: '48px',
+    }}>
+      <div style={{
+        width: size,
+        height: size,
+        backgroundColor: 'var(--fd-primary)',
+        borderRadius: '2px',
+      }} />
+    </div>
+  )
+}
+
+function RadiusSwatch({ radius }: { radius: string }) {
+  return (
+    <div style={{
+      width: '48px',
+      height: '48px',
+      backgroundColor: 'var(--fd-primary)',
+      borderRadius: radius,
+    }} />
+  )
+}
+
+function ShadowSwatch({ shadow }: { shadow: string }) {
+  return (
+    <div style={{
+      width: '48px',
+      height: '48px',
+      backgroundColor: 'var(--fd-background)',
+      borderRadius: '6px',
+      boxShadow: shadow,
+      border: shadow === 'none' ? '1px solid var(--fd-border)' : 'none',
+    }} />
+  )
+}
+
+interface SectionProps {
+  title: string
+  children: React.ReactNode
+}
+
+function Section({ title, children }: SectionProps) {
+  return (
+    <section data-section={title.toLowerCase()} style={{ marginBottom: '32px' }}>
+      <h2 style={{
+        fontSize: '20px',
+        fontWeight: 600,
+        color: 'var(--fd-foreground)',
+        marginBottom: '16px',
+        paddingBottom: '8px',
+        borderBottom: '2px solid var(--fd-border)',
+      }}>
+        {title}
+      </h2>
+      <div style={{
+        border: '1px solid var(--fd-border)',
+        borderRadius: '8px',
+        overflow: 'hidden',
+      }}>
+        {children}
+      </div>
+    </section>
+  )
+}
+
+export function TokensPage() {
+  const [copyAllStatus, setCopyAllStatus] = useState<string>('Copy All as Prompt')
+
+  // Tokens are pre-resolved at build time via virtual:prev-tokens
+
+  const copyAllAsPrompt = () => {
+    const lines = [
+      '# Design Tokens',
+      '',
+      '## Colors',
+      ...Object.entries(tokens.colors).map(([name, value]) => `- ${name}: ${value}`),
+      '',
+      '## Backgrounds',
+      ...Object.entries(tokens.backgrounds).map(([name, value]) => `- ${name}: ${value}`),
+      '',
+      '## Spacing',
+      ...Object.entries(tokens.spacing).map(([name, value]) => `- ${name}: ${value}`),
+      '',
+      '## Typography Sizes',
+      ...Object.entries(tokens.typography.sizes).map(([name, value]) => `- ${name}: ${value}`),
+      '',
+      '## Typography Weights',
+      ...Object.entries(tokens.typography.weights).map(([name, value]) => `- ${name}: ${value}`),
+      '',
+      '## Border Radius',
+      ...Object.entries(tokens.radius).map(([name, value]) => `- ${name}: ${value}`),
+      '',
+      '## Shadows',
+      ...Object.entries(tokens.shadows).map(([name, value]) => `- ${name}: ${value}`),
+    ]
+
+    navigator.clipboard.writeText(lines.join('\n'))
+    setCopyAllStatus('Copied!')
+    setTimeout(() => setCopyAllStatus('Copy All as Prompt'), 2000)
+  }
+
+  return (
+    <div style={{
+      maxWidth: '800px',
+      margin: '0 auto',
+      padding: '32px 24px',
+    }}>
+      {/* Header */}
+      <div style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '32px',
+      }}>
+        <h1 style={{
+          fontSize: '28px',
+          fontWeight: 700,
+          color: 'var(--fd-foreground)',
+          margin: 0,
+        }}>
+          Design Tokens
+        </h1>
+        <button
+          data-copy-all
+          onClick={copyAllAsPrompt}
+          style={{
+            padding: '10px 20px',
+            fontSize: '14px',
+            fontWeight: 500,
+            border: '1px solid var(--fd-primary)',
+            borderRadius: '6px',
+            background: 'var(--fd-primary)',
+            color: 'var(--fd-primary-foreground)',
+            cursor: 'pointer',
+          }}
+        >
+          {copyAllStatus}
+        </button>
+      </div>
+
+      {/* Colors Section */}
+      <Section title="Colors">
+        {Object.entries(tokens.colors as Record<string, string>).map(([name, value]) => (
+          <TokenRow
+            key={name}
+            name={name}
+            value={value}
+            category="color"
+            preview={<ColorSwatch color={value} />}
+          />
+        ))}
+      </Section>
+
+      {/* Backgrounds Section */}
+      <Section title="Backgrounds">
+        {Object.entries(tokens.backgrounds as Record<string, string>).map(([name, value]) => (
+          <TokenRow
+            key={name}
+            name={name}
+            value={value}
+            category="background"
+            preview={<ColorSwatch color={value} />}
+          />
+        ))}
+      </Section>
+
+      {/* Spacing Section */}
+      <Section title="Spacing">
+        {Object.entries(tokens.spacing as Record<string, string>).map(([name, value]) => (
+          <TokenRow
+            key={name}
+            name={name}
+            value={value}
+            category="spacing"
+            preview={<SpacingSwatch size={value} />}
+          />
+        ))}
+      </Section>
+
+      {/* Typography Section */}
+      <Section title="Typography">
+        <div style={{ padding: '12px 16px', backgroundColor: 'var(--fd-muted)', fontSize: '12px', fontWeight: 500, color: 'var(--fd-muted-foreground)' }}>
+          Sizes
+        </div>
+        {Object.entries(tokens.typography.sizes as Record<string, string>).map(([name, value]) => (
+          <TokenRow
+            key={name}
+            name={name}
+            value={value}
+            category="typography size"
+            preview={
+              <div style={{ fontSize: value, lineHeight: 1, color: 'var(--fd-foreground)' }}>
+                Aa
+              </div>
+            }
+          />
+        ))}
+        <div style={{ padding: '12px 16px', backgroundColor: 'var(--fd-muted)', fontSize: '12px', fontWeight: 500, color: 'var(--fd-muted-foreground)' }}>
+          Weights
+        </div>
+        {Object.entries(tokens.typography.weights as Record<string, number>).map(([name, value]) => (
+          <TokenRow
+            key={name}
+            name={name}
+            value={value}
+            category="typography weight"
+            preview={
+              <div style={{ fontWeight: value, fontSize: '24px', color: 'var(--fd-foreground)' }}>
+                Aa
+              </div>
+            }
+          />
+        ))}
+      </Section>
+
+      {/* Radius Section */}
+      <Section title="Radius">
+        {Object.entries(tokens.radius as Record<string, string>).map(([name, value]) => (
+          <TokenRow
+            key={name}
+            name={name}
+            value={value}
+            category="radius"
+            preview={<RadiusSwatch radius={value} />}
+          />
+        ))}
+      </Section>
+
+      {/* Shadows Section */}
+      <Section title="Shadows">
+        {Object.entries(tokens.shadows as Record<string, string>).map(([name, value]) => (
+          <TokenRow
+            key={name}
+            name={name}
+            value={value}
+            category="shadow"
+            preview={<ShadowSwatch shadow={value} />}
+          />
+        ))}
+      </Section>
+    </div>
+  )
+}