Add editor preview mode for in-place viewer experience

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>

apps/editor/app/viewer/[id]/viewer-overlay.tsx

@@ -68,6 +68,8 @@ interface ViewerOverlayProps {
   owner?: ProjectOwner | null
   canShowScans?: boolean
   canShowGuides?: boolean
+  onBack?: () => void
+  hideCollections?: boolean
 }
 
 export const ViewerOverlay = ({
@@ -75,6 +77,8 @@ export const ViewerOverlay = ({
   owner,
   canShowScans = true,
   canShowGuides = true,
+  onBack,
+  hideCollections,
 }: ViewerOverlayProps) => {
   const selection = useViewer((s) => s.selection)
   const nodes = useScene((s) => s.nodes)
@@ -130,12 +134,21 @@ export const ViewerOverlay = ({
         <div className="pointer-events-auto flex flex-col rounded-2xl border border-border/40 bg-background/95 shadow-lg backdrop-blur-xl transition-colors duration-200 ease-out overflow-hidden min-w-[200px]">
           {/* Project info + back */}
           <div className="flex items-center gap-3 px-3 py-2.5">
-            <Link
-              href="/"
-              className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md hover:bg-white/10 transition-colors"
-            >
-              <ArrowLeft className="h-4 w-4 text-muted-foreground" />
-            </Link>
+            {onBack ? (
+              <button
+                onClick={onBack}
+                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md hover:bg-white/10 transition-colors"
+              >
+                <ArrowLeft className="h-4 w-4 text-muted-foreground" />
+              </button>
+            ) : (
+              <Link
+                href="/"
+                className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md hover:bg-white/10 transition-colors"
+              >
+                <ArrowLeft className="h-4 w-4 text-muted-foreground" />
+              </Link>
+            )}
             <div className="min-w-0">
               <div className="text-sm font-medium text-foreground truncate">
                 {projectName || 'Untitled'}
@@ -248,9 +261,11 @@ export const ViewerOverlay = ({
       </div>
 
       {/* Collections Panel - Top Right */}
-      <div className="absolute top-4 right-4 z-20 flex flex-col gap-3 dark text-foreground">
-        <CollectionsPanel />
-      </div>
+      {!hideCollections && (
+        <div className="absolute top-4 right-4 z-20 flex flex-col gap-3 dark text-foreground">
+          <CollectionsPanel />
+        </div>
+      )}
 
       {/* Controls Panel - Bottom Center */}
       <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 dark text-foreground">