@ifc-lite/viewer 1.19.0 → 1.21.0

package/src/components/viewer/MainToolbar.tsx

@@ -24,10 +24,12 @@ import {
   ArrowRight,
   Box,
   HelpCircle,
+  Sparkles,
   Loader2,
   Camera,
   Info,
   Layers,
+  Layers2,
   SquareX,
   Building2,
   Plus,
@@ -50,6 +52,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   DropdownMenuSub,
@@ -306,6 +309,12 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const toggleHoverTooltips = useViewerStore((state) => state.toggleHoverTooltips);
   const typeVisibility = useViewerStore((state) => state.typeVisibility);
   const toggleTypeVisibility = useViewerStore((state) => state.toggleTypeVisibility);
+  // Issue #540: load-time toggle that asks the WASM bridge to merge
+  // Revit-style multilayer walls. We surface this in the Class
+  // Visibility dropdown so users discover it next to the other
+  // "what shows in the scene" controls.
+  const mergeLayers = useViewerStore((state) => state.mergeLayers);
+  const setMergeLayers = useViewerStore((state) => state.setMergeLayers);
   const resetViewerState = useViewerStore((state) => state.resetViewerState);
   const bcfPanelVisible = useViewerStore((state) => state.bcfPanelVisible);
   const setBcfPanelVisible = useViewerStore((state) => state.setBcfPanelVisible);
@@ -425,7 +434,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     // Filter to supported files (IFC, IFCX, GLB)
     const supportedFiles = Array.from(files).filter(
       f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
-        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57')
+        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57') || f.name.toLowerCase().endsWith('.pts') || f.name.toLowerCase().endsWith('.xyz')
     );
 
     if (supportedFiles.length === 0) return;
@@ -466,7 +475,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     // Filter to supported files (IFC, IFCX, GLB)
     const supportedFiles = Array.from(files).filter(
       f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
-        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57')
+        || f.name.toLowerCase().endsWith('.las') || f.name.toLowerCase().endsWith('.laz') || f.name.toLowerCase().endsWith('.ply') || f.name.toLowerCase().endsWith('.pcd') || f.name.toLowerCase().endsWith('.e57') || f.name.toLowerCase().endsWith('.pts') || f.name.toLowerCase().endsWith('.xyz')
     );
 
     if (supportedFiles.length === 0) return;
@@ -781,7 +790,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         id="file-input-open"
         ref={fileInputRef}
         type="file"
-        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57"
+        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57,.pts,.xyz"
         multiple
         onChange={handleFileSelect}
         className="hidden"
@@ -789,7 +798,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       <input
         ref={addModelInputRef}
         type="file"
-        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57"
+        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57,.pts,.xyz"
         multiple
         onChange={handleAddModelSelect}
         className="hidden"
@@ -1156,14 +1165,35 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         <Tooltip>
           <TooltipTrigger asChild>
             <DropdownMenuTrigger asChild>
-              <Button variant="ghost" size="icon-sm" disabled={!geometryResult && models.size === 0}>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                // Stay enabled even with no model loaded — the dropdown
+                // also exposes load-time settings (Merge Multilayer
+                // Walls) that the user should be able to set BEFORE
+                // opening a file. Runtime items inside self-gate via
+                // typeGeometryExists.
+                aria-label={mergeLayers ? 'Class Visibility (Merge Multilayer Walls is on)' : 'Class Visibility'}
+                className="relative"
+              >
                 <Layers className="h-4 w-4" />
+                {mergeLayers && (
+                  // Tiny accent dot announcing that a non-default load
+                  // setting is active. Decorative — semantics live on
+                  // the button's aria-label and the tooltip.
+                  <span
+                    aria-hidden="true"
+                    className="absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-primary ring-1 ring-background"
+                  />
+                )}
               </Button>
             </DropdownMenuTrigger>
           </TooltipTrigger>
-          <TooltipContent>Class Visibility</TooltipContent>
+          <TooltipContent>
+            {mergeLayers ? 'Class Visibility · Merge Multilayer Walls is on' : 'Class Visibility'}
+          </TooltipContent>
         </Tooltip>
-        <DropdownMenuContent>
+        <DropdownMenuContent className="w-72">
           {typeGeometryExists.spaces && (
             <DropdownMenuCheckboxItem
               checked={typeVisibility.spaces}
@@ -1191,6 +1221,30 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
               Show Site
             </DropdownMenuCheckboxItem>
           )}
+
+          {/* Load-time toggles live below the runtime visibility
+              switches — they apply on next model open rather than
+              affecting the current scene. The subheader makes that
+              boundary visible at a glance. */}
+          <DropdownMenuSeparator />
+          <DropdownMenuLabel className="px-2 pt-1 pb-0.5 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+            Load Settings
+          </DropdownMenuLabel>
+          <DropdownMenuCheckboxItem
+            checked={mergeLayers}
+            onCheckedChange={(next) => setMergeLayers(next === true)}
+            // Use items-start so the checkmark and icon line up with
+            // the primary label while the description wraps below.
+            className="items-start gap-2 py-2"
+          >
+            <Layers2 className="h-4 w-4 mr-2 mt-0.5 shrink-0 text-primary" />
+            <div className="flex flex-col gap-0.5 min-w-0">
+              <span className="text-sm font-medium leading-tight">Merge Multilayer Walls</span>
+              <span className="text-[11px] leading-tight text-muted-foreground">
+                Render walls as 1 solid · Applies on reload
+              </span>
+            </div>
+          </DropdownMenuCheckboxItem>
         </DropdownMenuContent>
       </DropdownMenu>
 
@@ -1333,6 +1387,24 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
 
       {/* Right Side Actions */}
       <div className="flex items-center gap-2 ml-2 pl-2 border-l border-zinc-200 dark:border-zinc-700/60">
+        {/* /mcp cross-link — lives in the meta cluster (Settings / Theme /
+            Help) so it shares space with shell-level navigation rather
+            than competing with the modeling tools to its left. */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="rounded-full"
+              onClick={() => navigateToPath('/mcp')}
+              aria-label="Open ifc-lite MCP"
+            >
+              <Sparkles className="!h-[20px] !w-[20px]" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Drive ifc-lite from any LLM (MCP)</TooltipContent>
+        </Tooltip>
+
         {desktopShell ? (
           <Tooltip>
             <TooltipTrigger asChild>

package/src/components/viewer/MergeLayersBanner.tsx

@@ -0,0 +1,108 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Reload-to-apply banner for the "Merge Multilayer Walls" load-time
+ * toggle (issue #540). The user flips the toggle in the Class
+ * Visibility dropdown; when a model is already loaded, the UI sets
+ * `mergeLayersPendingReload` and we surface this non-modal banner
+ * above the canvas asking the user to reload.
+ *
+ * Design note: this codebase has no "reload current model" function
+ * — `useIfcLoader.loadFile` is one-shot and does not retain the
+ * source File / NativeFileHandle. The pragmatic approach here is to
+ * call `window.location.reload()` for the Reload button, which is
+ * exactly what the wording promises ("Reload model to apply") and
+ * works on both web and the Tauri shell (which keeps its window).
+ * If a true in-place reload lands later, swap the handler — the
+ * banner contract stays the same.
+ */
+import { useCallback } from 'react';
+import { Layers2, RefreshCw, X } from 'lucide-react';
+import { useViewerStore } from '@/store';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export interface MergeLayersBannerProps {
+  /**
+   * When set, this overrides the default `window.location.reload()`
+   * fallback. Once a true "reload current model in place" path lands,
+   * the caller can pass it in here without changing the banner's
+   * visual contract.
+   */
+  onReload?: () => void;
+}
+
+export function MergeLayersBanner({ onReload }: MergeLayersBannerProps) {
+  const pending = useViewerStore((s) => s.mergeLayersPendingReload);
+  const merging = useViewerStore((s) => s.mergeLayers);
+  const dismiss = useViewerStore((s) => s.clearMergeLayersPendingReload);
+
+  const handleReload = useCallback(() => {
+    if (onReload) {
+      onReload();
+      return;
+    }
+    // Full-page reload is the only path we can guarantee works: the
+    // viewer doesn't retain the source File/handle once loading
+    // completes, so we can't re-run loadFile with the original input.
+    // The toggle is already persisted in localStorage so it will pick
+    // up the new value on the next boot.
+    if (typeof window !== 'undefined') {
+      window.location.reload();
+    }
+  }, [onReload]);
+
+  if (!pending) return null;
+
+  return (
+    // Centred non-modal overlay anchored to the top of the canvas.
+    // pointer-events-none on the wrapper lets clicks pass through
+    // unless they land on the inner card, so the underlying 3D
+    // viewport stays interactive.
+    <div className="pointer-events-none absolute top-3 left-1/2 -translate-x-1/2 z-40 max-w-[min(640px,calc(100%-1.5rem))] w-fit">
+      <div
+        role="status"
+        aria-live="polite"
+        className={cn(
+          'pointer-events-auto flex items-center gap-3 border border-primary/40 bg-background/95 backdrop-blur',
+          'px-3 py-2 shadow-[0_8px_24px_-12px_rgba(0,0,0,0.45)] rounded-md',
+          'animate-in slide-in-from-top-2 fade-in-0 duration-200',
+        )}
+      >
+        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary">
+          <Layers2 className="h-4 w-4" />
+        </div>
+        <div className="flex flex-col leading-tight min-w-0">
+          <span className="text-xs font-semibold text-foreground">
+            Merge Multilayer Walls {merging ? 'enabled' : 'disabled'}
+          </span>
+          <span className="text-[11px] text-muted-foreground truncate">
+            Reload model to apply the new setting.
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5 ml-2">
+          <Button
+            size="sm"
+            variant="default"
+            className="h-7 px-2.5 gap-1.5 text-[11px] font-semibold uppercase tracking-wider"
+            onClick={handleReload}
+          >
+            <RefreshCw className="h-3.5 w-3.5" />
+            Reload
+          </Button>
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className="h-7 w-7"
+            onClick={dismiss}
+            aria-label="Dismiss reload reminder"
+          >
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/MobileToolbar.tsx

@@ -0,0 +1,326 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Mobile-optimized toolbar for the 3D viewport.
+ * Compact, touch-friendly layout with essential actions visible
+ * and secondary actions in an overflow menu.
+ */
+
+import React, { useRef, useCallback, useMemo } from 'react';
+import {
+  FolderOpen,
+  MousePointer2,
+  Ruler,
+  Scissors,
+  Eye,
+  EyeOff,
+  Home,
+  Maximize2,
+  Crosshair,
+  Loader2,
+  MoreHorizontal,
+  Plus,
+  Download,
+  Orbit,
+  Sun,
+  Moon,
+  PersonStanding,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
+} from '@/components/ui/dropdown-menu';
+import { Progress } from '@/components/ui/progress';
+import { useViewerStore } from '@/store';
+import { goHomeFromStore, resetVisibilityForHomeFromStore } from '@/store/homeView';
+import { executeBasketIsolate } from '@/store/basket/basketCommands';
+import { useIfc } from '@/hooks/useIfc';
+import { cn } from '@/lib/utils';
+import { GLTFExporter } from '@ifc-lite/export';
+import { openIfcFileDialog } from '@/services/file-dialog';
+import { logToDesktopTerminal } from '@/services/desktop-logger';
+import { recordRecentFiles, cacheFileBlobs } from '@/lib/recent-files';
+import { toast } from '@/components/ui/toast';
+
+type Tool = 'select' | 'walk' | 'measure' | 'section';
+
+export function MobileToolbar() {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const addModelInputRef = useRef<HTMLInputElement>(null);
+  const {
+    loadFile,
+    loading,
+    progress,
+    geometryProgress,
+    metadataProgress,
+    geometryResult,
+    models,
+    loadFilesSequentially,
+    addModel,
+  } = useIfc();
+
+  const hasModelsLoaded = models.size > 0 || (geometryResult?.meshes && geometryResult.meshes.length > 0);
+  const activeTool = useViewerStore((state) => state.activeTool);
+  const setActiveTool = useViewerStore((state) => state.setActiveTool);
+  const selectedEntityId = useViewerStore((state) => state.selectedEntityId);
+  const hideEntities = useViewerStore((state) => state.hideEntities);
+  const error = useViewerStore((state) => state.error);
+  const cameraCallbacks = useViewerStore((state) => state.cameraCallbacks);
+  const resetViewerState = useViewerStore((state) => state.resetViewerState);
+  const clearAllModels = useViewerStore((state) => state.clearAllModels);
+  const projectionMode = useViewerStore((state) => state.projectionMode);
+  const toggleProjectionMode = useViewerStore((state) => state.toggleProjectionMode);
+  const theme = useViewerStore((state) => state.theme);
+  const toggleTheme = useViewerStore((state) => state.toggleTheme);
+
+  const hasSelection = selectedEntityId !== null;
+
+  const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    const supportedFiles = Array.from(files).filter(
+      f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
+    );
+    if (supportedFiles.length === 0) return;
+    recordRecentFiles(supportedFiles.map((file) => ({ name: file.name, size: file.size })));
+    void cacheFileBlobs(supportedFiles);
+    if (supportedFiles.length === 1) {
+      loadFile(supportedFiles[0]);
+    } else {
+      resetViewerState();
+      clearAllModels();
+      loadFilesSequentially(supportedFiles);
+    }
+    e.target.value = '';
+  }, [loadFile, loadFilesSequentially, resetViewerState, clearAllModels]);
+
+  const handleAddModelSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
+    const supportedFiles = Array.from(files).filter(
+      f => f.name.endsWith('.ifc') || f.name.endsWith('.ifcx') || f.name.endsWith('.glb')
+    );
+    if (supportedFiles.length === 0) return;
+    recordRecentFiles(supportedFiles.map((file) => ({ name: file.name, size: file.size })));
+    void cacheFileBlobs(supportedFiles);
+    loadFilesSequentially(supportedFiles);
+    e.target.value = '';
+  }, [loadFilesSequentially]);
+
+  const handleIsolate = useCallback(() => {
+    executeBasketIsolate();
+  }, []);
+
+  const handleShowAll = useCallback(() => {
+    resetVisibilityForHomeFromStore();
+  }, []);
+
+  const handleHide = useCallback(() => {
+    if (selectedEntityId !== null) {
+      hideEntities([selectedEntityId]);
+    }
+  }, [selectedEntityId, hideEntities]);
+
+  const handleHome = useCallback(() => {
+    goHomeFromStore();
+  }, []);
+
+  const handleExportGLB = useCallback(async () => {
+    if (!geometryResult) return;
+    try {
+      const exporter = new GLTFExporter(geometryResult);
+      const glb = exporter.exportGLB({ includeMetadata: true });
+      const blob = new Blob([new Uint8Array(glb)], { type: 'model/gltf-binary' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'model.glb';
+      a.click();
+      URL.revokeObjectURL(url);
+      toast.success(`Exported GLB (${(blob.size / 1024).toFixed(0)} KB)`);
+    } catch (err) {
+      toast.error(`Export failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
+    }
+  }, [geometryResult]);
+
+  const toolButtons: { tool: Tool; icon: React.ElementType; label: string }[] = [
+    { tool: 'select', icon: MousePointer2, label: 'Select' },
+    { tool: 'measure', icon: Ruler, label: 'Measure' },
+    { tool: 'section', icon: Scissors, label: 'Section' },
+  ];
+
+  return (
+    <div className="flex items-center gap-0.5 px-1.5 h-11 border-b bg-white dark:bg-black border-zinc-200 dark:border-zinc-800 relative z-50 overflow-x-auto">
+      {/* Hidden file inputs */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept=".ifc,.ifcx,.glb"
+        multiple
+        onChange={handleFileSelect}
+        className="hidden"
+      />
+      <input
+        ref={addModelInputRef}
+        type="file"
+        accept=".ifc,.ifcx,.glb"
+        multiple
+        onChange={handleAddModelSelect}
+        className="hidden"
+      />
+
+      {/* Open File */}
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        className="h-9 w-9 flex-shrink-0"
+        onClick={async () => {
+          const file = await openIfcFileDialog();
+          if (file) {
+            recordRecentFiles([{ name: file.name, size: file.size, path: file.path, modifiedMs: file.modifiedMs ?? null }]);
+            void loadFile(file);
+            return;
+          }
+          fileInputRef.current?.click();
+        }}
+        disabled={loading}
+      >
+        {loading ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <FolderOpen className="h-4 w-4" />
+        )}
+      </Button>
+
+      {/* Add Model */}
+      {hasModelsLoaded && (
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="h-9 w-9 flex-shrink-0 text-[#9ece6a]"
+          onClick={() => addModelInputRef.current?.click()}
+          disabled={loading}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      )}
+
+      {/* Divider */}
+      <div className="w-px h-5 bg-border mx-0.5 flex-shrink-0" />
+
+      {/* Tool buttons */}
+      {toolButtons.map(({ tool, icon: Icon, label }) => (
+        <Button
+          key={tool}
+          variant={activeTool === tool ? 'default' : 'ghost'}
+          size="icon-sm"
+          className={cn('h-9 w-9 flex-shrink-0', activeTool === tool && 'bg-primary text-primary-foreground')}
+          onClick={() => setActiveTool(tool)}
+          aria-label={label}
+        >
+          <Icon className="h-4 w-4" />
+        </Button>
+      ))}
+
+      {/* Divider */}
+      <div className="w-px h-5 bg-border mx-0.5 flex-shrink-0" />
+
+      {/* Quick actions: Home, Fit, Show All */}
+      <Button variant="ghost" size="icon-sm" className="h-9 w-9 flex-shrink-0" onClick={handleHome} aria-label="Home">
+        <Home className="h-4 w-4" />
+      </Button>
+      <Button variant="ghost" size="icon-sm" className="h-9 w-9 flex-shrink-0" onClick={() => cameraCallbacks.fitAll?.()} aria-label="Fit All">
+        <Maximize2 className="h-4 w-4" />
+      </Button>
+      <Button variant="ghost" size="icon-sm" className="h-9 w-9 flex-shrink-0" onClick={handleShowAll} aria-label="Show All">
+        <Eye className="h-4 w-4" />
+      </Button>
+
+      {/* Spacer */}
+      <div className="flex-1 min-w-2" />
+
+      {/* Loading progress (compact) */}
+      {loading && (geometryProgress || metadataProgress || progress) && (
+        <div className="flex items-center gap-1.5 mr-1 flex-shrink-0">
+          <Progress value={(geometryProgress ?? metadataProgress ?? progress)?.percent ?? 0} className="w-16 h-1.5" />
+          <span className="text-[10px] text-muted-foreground tabular-nums">
+            {Math.round((geometryProgress ?? metadataProgress ?? progress)?.percent ?? 0)}%
+          </span>
+        </div>
+      )}
+
+      {/* Error */}
+      {error && (
+        <span className="text-[10px] text-destructive mr-1 truncate max-w-24 flex-shrink-0">{error}</span>
+      )}
+
+      {/* Overflow menu */}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon-sm" className="h-9 w-9 flex-shrink-0">
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-52">
+          {/* Walk Mode */}
+          <DropdownMenuCheckboxItem
+            checked={activeTool === 'walk'}
+            onCheckedChange={() => setActiveTool(activeTool === 'walk' ? 'select' : 'walk')}
+          >
+            <PersonStanding className="h-4 w-4 mr-2" />
+            Walk Mode
+          </DropdownMenuCheckboxItem>
+
+          <DropdownMenuSeparator />
+
+          {/* Visibility */}
+          <DropdownMenuItem onClick={handleIsolate}>
+            <Eye className="h-4 w-4 mr-2" />
+            Isolate Selection
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={handleHide} disabled={!hasSelection}>
+            <EyeOff className="h-4 w-4 mr-2" />
+            Hide Selection
+          </DropdownMenuItem>
+          {hasSelection && (
+            <DropdownMenuItem onClick={() => cameraCallbacks.frameSelection?.()}>
+              <Crosshair className="h-4 w-4 mr-2" />
+              Frame Selection
+            </DropdownMenuItem>
+          )}
+
+          <DropdownMenuSeparator />
+
+          {/* Camera */}
+          <DropdownMenuItem onClick={() => toggleProjectionMode()}>
+            <Orbit className="h-4 w-4 mr-2" />
+            {projectionMode === 'orthographic' ? 'Perspective' : 'Orthographic'}
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          {/* Export */}
+          {geometryResult && (
+            <DropdownMenuItem onClick={() => void handleExportGLB()}>
+              <Download className="h-4 w-4 mr-2" />
+              Export GLB
+            </DropdownMenuItem>
+          )}
+
+          {/* Theme */}
+          <DropdownMenuItem onClick={() => toggleTheme()}>
+            {theme === 'dark' ? <Sun className="h-4 w-4 mr-2" /> : <Moon className="h-4 w-4 mr-2" />}
+            {theme === 'dark' ? 'Light Mode' : 'Dark Mode'}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}