@ifc-lite/viewer 1.19.1 → 1.21.0

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>
+  );
+}

package/src/components/viewer/PointCloudClasses.tsx

@@ -0,0 +1,111 @@
+/* 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/. */
+
+/**
+ * Per-ASPRS-class visibility toggles. Renders an inline list of every
+ * known LAS 1.4 standard class with a checkbox bound to the
+ * `pointCloudClassMask` bitmask. Hidden classes are pushed behind the
+ * near plane in the splat shader (`flags.w` cull).
+ *
+ * The colour swatches mirror `point-shader.wgsl.ts` so the UI stays
+ * in sync with what the user actually sees on screen.
+ */
+
+import { useViewerStore } from '@/store';
+
+interface ClassEntry {
+  id: number;
+  label: string;
+  rgb: [number, number, number];
+}
+
+const CLASSES: ClassEntry[] = [
+  { id: 0,  label: 'Never classified',   rgb: [0.65, 0.65, 0.65] },
+  { id: 1,  label: 'Unclassified',       rgb: [0.65, 0.65, 0.65] },
+  { id: 2,  label: 'Ground',             rgb: [0.55, 0.40, 0.25] },
+  { id: 3,  label: 'Low vegetation',     rgb: [0.55, 0.85, 0.45] },
+  { id: 4,  label: 'Medium vegetation',  rgb: [0.30, 0.75, 0.30] },
+  { id: 5,  label: 'High vegetation',    rgb: [0.10, 0.45, 0.15] },
+  { id: 6,  label: 'Building',           rgb: [0.95, 0.55, 0.20] },
+  { id: 7,  label: 'Low point (noise)',  rgb: [0.95, 0.20, 0.20] },
+  { id: 9,  label: 'Water',              rgb: [0.20, 0.40, 0.95] },
+  { id: 10, label: 'Rail',               rgb: [0.55, 0.20, 0.85] },
+  { id: 11, label: 'Road surface',       rgb: [0.30, 0.30, 0.30] },
+  { id: 13, label: 'Wire — guard',       rgb: [0.95, 0.85, 0.20] },
+  { id: 14, label: 'Wire — conductor',   rgb: [0.95, 0.95, 0.50] },
+  { id: 15, label: 'Transmission tower', rgb: [0.20, 0.20, 0.55] },
+  { id: 16, label: 'Wire-structure',     rgb: [0.30, 0.65, 0.65] },
+  { id: 17, label: 'Bridge deck',        rgb: [0.85, 0.70, 0.50] },
+  { id: 18, label: 'High noise',         rgb: [0.95, 0.20, 0.20] },
+];
+
+const ALL_VISIBLE = 0xFFFFFFFF;
+
+export function PointCloudClasses() {
+  const mask = useViewerStore((s) => s.pointCloudClassMask);
+  const toggle = useViewerStore((s) => s.togglePointCloudClass);
+  const setMask = useViewerStore((s) => s.setPointCloudClassMask);
+  const allOn = (mask >>> 0) === ALL_VISIBLE;
+  return (
+    <details className="flex flex-col gap-0.5">
+      <summary className="text-[9px] uppercase text-muted-foreground tracking-wider cursor-pointer select-none">
+        Classes {!allOn && (
+          <span className="text-[9px] normal-case text-amber-500"> · {countSet(mask)} of 32 visible</span>
+        )}
+      </summary>
+      <div className="flex flex-col gap-0.5 mt-1 max-h-40 overflow-y-auto pr-1">
+        <button
+          type="button"
+          onClick={() => setMask(ALL_VISIBLE)}
+          className="text-[10px] text-muted-foreground hover:text-foreground hover:bg-muted px-1 py-0.5 rounded text-left"
+        >
+          Show all
+        </button>
+        {CLASSES.map((c) => {
+          const visible = ((mask >>> c.id) & 1) !== 0;
+          return (
+            <label
+              key={c.id}
+              className="flex items-center gap-1.5 text-[10px] cursor-pointer hover:bg-muted/40 rounded px-1 py-0.5"
+            >
+              <input
+                type="checkbox"
+                checked={visible}
+                onChange={() => toggle(c.id)}
+                className="accent-teal-600"
+                aria-label={`Toggle ${c.label}`}
+              />
+              <span
+                className="inline-block h-3 w-3 rounded-sm shrink-0 border border-foreground/10"
+                style={{ backgroundColor: rgbCss(c.rgb) }}
+                aria-hidden="true"
+              />
+              <span className="text-muted-foreground tabular-nums w-4 shrink-0">{c.id}</span>
+              <span className={visible ? 'text-foreground truncate' : 'text-muted-foreground line-through truncate'}>
+                {c.label}
+              </span>
+            </label>
+          );
+        })}
+      </div>
+    </details>
+  );
+}
+
+function countSet(mask: number): number {
+  // Hamming weight via Brian Kernighan's algorithm. JS bitwise ops
+  // are 32-bit so we naturally cover the full ASPRS range.
+  let n = mask >>> 0;
+  let count = 0;
+  while (n !== 0) {
+    n &= n - 1;
+    count++;
+  }
+  return count;
+}
+
+function rgbCss([r, g, b]: [number, number, number]): string {
+  const c = (v: number) => Math.max(0, Math.min(255, Math.round(v * 255)));
+  return `rgb(${c(r)},${c(g)},${c(b)})`;
+}

package/src/components/viewer/PointCloudLegend.tsx

@@ -0,0 +1,119 @@
+/* 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/. */
+
+/**
+ * Per-mode legend for the point-cloud panel.
+ *
+ * Renders only when the active colour mode benefits from a legend
+ * (classification / intensity / height); RGB and Solid don't need one.
+ * The palettes here MUST stay in sync with `point-shader.wgsl.ts` —
+ * any colour change in the shader has to come back to this file.
+ */
+
+import type { PointColorModeUi } from '@/store/slices/pointCloudSlice';
+
+interface ClassificationEntry {
+  id: number;
+  label: string;
+  rgb: [number, number, number];
+}
+
+// ASPRS LAS 1.4 standard classes — ids that don't appear here all
+// fall back to the shader's "default" entry (0.65 grey) and are
+// shown collectively at the bottom of the legend.
+const CLASSIFICATION: ClassificationEntry[] = [
+  { id: 0,  label: 'Never classified',  rgb: [0.65, 0.65, 0.65] },
+  { id: 1,  label: 'Unclassified',      rgb: [0.65, 0.65, 0.65] },
+  { id: 2,  label: 'Ground',            rgb: [0.55, 0.40, 0.25] },
+  { id: 3,  label: 'Low vegetation',    rgb: [0.55, 0.85, 0.45] },
+  { id: 4,  label: 'Medium vegetation', rgb: [0.30, 0.75, 0.30] },
+  { id: 5,  label: 'High vegetation',   rgb: [0.10, 0.45, 0.15] },
+  { id: 6,  label: 'Building',          rgb: [0.95, 0.55, 0.20] },
+  { id: 7,  label: 'Low point (noise)', rgb: [0.95, 0.20, 0.20] },
+  { id: 9,  label: 'Water',             rgb: [0.20, 0.40, 0.95] },
+  { id: 10, label: 'Rail',              rgb: [0.55, 0.20, 0.85] },
+  { id: 11, label: 'Road surface',      rgb: [0.30, 0.30, 0.30] },
+  { id: 13, label: 'Wire — guard',      rgb: [0.95, 0.85, 0.20] },
+  { id: 14, label: 'Wire — conductor',  rgb: [0.95, 0.95, 0.50] },
+  { id: 15, label: 'Transmission tower', rgb: [0.20, 0.20, 0.55] },
+  { id: 16, label: 'Wire-structure',    rgb: [0.30, 0.65, 0.65] },
+  { id: 17, label: 'Bridge deck',       rgb: [0.85, 0.70, 0.50] },
+  { id: 18, label: 'High noise',        rgb: [0.95, 0.20, 0.20] },
+];
+
+const HEIGHT_GRADIENT =
+  'linear-gradient(to right, '
+  + 'rgb(26,51,217), '   // 0.10, 0.20, 0.85
+  + 'rgb(26,217,217), '  // 0.10, 0.85, 0.85
+  + 'rgb(51,217,51), '   // 0.20, 0.85, 0.20
+  + 'rgb(242,242,51), '  // 0.95, 0.95, 0.20
+  + 'rgb(242,51,26))';   // 0.95, 0.20, 0.10
+
+export interface PointCloudLegendProps {
+  colorMode: PointColorModeUi;
+}
+
+export function PointCloudLegend({ colorMode }: PointCloudLegendProps) {
+  if (colorMode === 'classification') {
+    return (
+      <div className="flex flex-col gap-0.5 mt-1 max-h-40 overflow-y-auto">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider sticky top-0 bg-background/95 py-0.5">
+          Classes (ASPRS LAS 1.4)
+        </span>
+        {CLASSIFICATION.map((c) => (
+          <div key={c.id} className="flex items-center gap-1.5 text-[10px]">
+            <span
+              className="inline-block h-3 w-3 rounded-sm shrink-0 border border-foreground/10"
+              style={{ backgroundColor: rgbCss(c.rgb) }}
+              aria-hidden="true"
+            />
+            <span className="text-muted-foreground tabular-nums w-4 shrink-0">{c.id}</span>
+            <span className="text-foreground truncate">{c.label}</span>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (colorMode === 'intensity') {
+    return (
+      <div className="flex flex-col gap-0.5 mt-1">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Intensity</span>
+        <div
+          className="h-2 rounded-sm border border-foreground/10"
+          style={{ background: 'linear-gradient(to right, rgb(0,0,0), rgb(255,255,255))' }}
+          aria-label="Intensity ramp from low (black) to high (white)"
+        />
+        <div className="flex justify-between text-[9px] text-muted-foreground">
+          <span>low</span>
+          <span>high</span>
+        </div>
+      </div>
+    );
+  }
+
+  if (colorMode === 'height') {
+    return (
+      <div className="flex flex-col gap-0.5 mt-1">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Height (Y-up)</span>
+        <div
+          className="h-2 rounded-sm border border-foreground/10"
+          style={{ background: HEIGHT_GRADIENT }}
+          aria-label="Height ramp from low (blue) to high (red)"
+        />
+        <div className="flex justify-between text-[9px] text-muted-foreground">
+          <span>low</span>
+          <span>high</span>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+function rgbCss([r, g, b]: [number, number, number]): string {
+  const c = (v: number) => Math.max(0, Math.min(255, Math.round(v * 255)));
+  return `rgb(${c(r)},${c(g)},${c(b)})`;
+}

package/src/components/viewer/PointCloudPanel.tsx

@@ -12,6 +12,9 @@
 import { useViewerStore } from '@/store';
 import type { PointColorModeUi, PointSizeModeUi } from '@/store/slices/pointCloudSlice';
 import { cn } from '@/lib/utils';
+import { PointCloudLegend } from './PointCloudLegend';
+import { PointCloudClasses } from './PointCloudClasses';
+import { DeviationPanel } from './DeviationPanel';
 
 const COLOR_MODES: Array<{ value: PointColorModeUi; label: string; hint: string }> = [
   { value: 'rgb',            label: 'RGB',            hint: 'Per-point colour from the source' },
@@ -19,6 +22,7 @@ const COLOR_MODES: Array<{ value: PointColorModeUi; label: string; hint: string
   { value: 'intensity',      label: 'Intensity',      hint: 'Greyscale ramp from per-point intensity' },
   { value: 'height',         label: 'Height',         hint: 'Cool-warm ramp by Y-up world height' },
   { value: 'fixed',          label: 'Solid',          hint: 'Single colour override' },
+  { value: 'deviation',      label: 'Deviation',      hint: 'Signed distance to nearest BIM surface (compute below)' },
 ];
 
 const SIZE_MODES: Array<{ value: PointSizeModeUi; label: string; hint: string }> = [
@@ -30,9 +34,12 @@ const SIZE_MODES: Array<{ value: PointSizeModeUi; label: string; hint: string }>
 export interface PointCloudPanelProps {
   /** Number of currently-loaded point cloud assets — panel hides when 0. */
   assetCount: number;
+  /** Total triangle count across the scene (gates the BIM↔scan deviation
+   *  compute button — useless without a BIM model loaded). */
+  triangleCount: number;
 }
 
-export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
+export function PointCloudPanel({ assetCount, triangleCount }: PointCloudPanelProps) {
   const colorMode = useViewerStore((s) => s.pointCloudColorMode);
   const setColorMode = useViewerStore((s) => s.setPointCloudColorMode);
   const sizeMode = useViewerStore((s) => s.pointCloudSizeMode);
@@ -45,6 +52,8 @@ export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
   const setEdlEnabled = useViewerStore((s) => s.setPointCloudEdlEnabled);
   const edlStrength = useViewerStore((s) => s.pointCloudEdlStrength);
   const setEdlStrength = useViewerStore((s) => s.setPointCloudEdlStrength);
+  const fixedColor = useViewerStore((s) => s.pointCloudFixedColor);
+  const setFixedColor = useViewerStore((s) => s.setPointCloudFixedColor);
 
   if (assetCount <= 0) return null;
 
@@ -81,8 +90,31 @@ export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
             </button>
           );
         })}
+        <PointCloudLegend colorMode={colorMode} />
+        {colorMode === 'fixed' && (
+          // Native colour input — keeps the panel dependency-free.
+          // Hex round-trips through float[0..1]: parse `#rrggbb` to a
+          // [r,g,b,1] tuple on input, format the active rgb back to hex
+          // on display. Alpha stays 1 since fixed-mode opacity is
+          // controlled by the splat shape, not the colour swatch.
+          <label className="flex items-center justify-between gap-2 mt-1 px-2 py-1 rounded bg-muted/40">
+            <span className="text-[10px] text-muted-foreground">Solid colour</span>
+            <input
+              type="color"
+              value={rgbToHex(fixedColor)}
+              onChange={(e) => setFixedColor(hexToRgba(e.target.value, fixedColor[3]))}
+              aria-label="Pick the solid colour applied in fixed mode"
+              className="h-6 w-10 rounded border-0 cursor-pointer bg-transparent"
+            />
+          </label>
+        )}
       </div>
 
+      {/* Per-ASPRS-class visibility — toggles the splat shader's
+          class-mask uniform; works in any colour mode but most
+          discoverable when colorMode === 'classification'. */}
+      <PointCloudClasses />
+
       {/* Size mode */}
       <div className="flex flex-col gap-0.5">
         <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Size</span>
@@ -169,6 +201,25 @@ export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
           </label>
         )}
       </div>
+
+      {/* BIM↔scan deviation heatmap — only useful when both meshes
+          and points are loaded. The panel renders nothing when there
+          are no triangles in the scene. */}
+      <DeviationPanel triangleCount={triangleCount} />
     </div>
   );
 }
+
+function rgbToHex([r, g, b]: [number, number, number, number]): string {
+  const c = (v: number) => Math.max(0, Math.min(255, Math.round(v * 255))).toString(16).padStart(2, '0');
+  return `#${c(r)}${c(g)}${c(b)}`;
+}
+
+function hexToRgba(hex: string, alpha: number): [number, number, number, number] {
+  // Browsers always emit "#rrggbb" from <input type="color">, so we
+  // can skip the 3-char shorthand path. Parse byte-by-byte and divide.
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  return [r, g, b, alpha];
+}