Adds a Preview button next to Radio Pascal that switches the editor into a viewer-like experience without leaving the page. The preview mode swaps in the viewer's selection manager (hierarchical drill-down), zone system, camera controls (left-click pan, auto-navigate), and interactive item system while hiding editor-only UI (tools, panels, sidebar, grid). Back arrow in the viewer overlay returns to the editor. Also widens the default sidebar from 288px to 432px for better project title visibility. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
17 lines
557 B
TypeScript
17 lines
557 B
TypeScript
'use client'
|
|
|
|
import { Eye } from 'lucide-react'
|
|
import useEditor from '@/store/use-editor'
|
|
|
|
export function PreviewButton() {
|
|
return (
|
|
<button
|
|
onClick={() => useEditor.getState().setPreviewMode(true)}
|
|
className="flex items-center gap-2 rounded-lg border border-border bg-background/95 shadow-lg backdrop-blur-md px-3 py-2 text-sm font-medium cursor-pointer hover:bg-accent/90 transition-colors"
|
|
>
|
|
<Eye className="h-4 w-4 shrink-0" />
|
|
<span className="hidden sm:inline whitespace-nowrap">Preview</span>
|
|
</button>
|
|
)
|
|
}
|