@ifc-lite/viewer 1.18.0 → 1.19.1

package/src/components/mcp/playground-files.ts

@@ -0,0 +1,107 @@
+/* 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/. */
+
+/**
+ * playground-files.ts — virtual file store for the playground.
+ *
+ * Tools that "write a file" (bcf_export, model_save, export_ifc / csv /
+ * json) DON'T trigger a browser download — that would be a surprising
+ * privacy issue and against the user's explicit "never auto-download"
+ * rule. Instead they push the artifact into this store, which a
+ * Downloads panel in the playground sidebar lists with a per-row
+ * "Download" button. The actual `Blob` → `<a download>` click only
+ * happens when the user presses that button.
+ */
+import { useEffect, useState } from 'react';
+
+export interface PlaygroundFile {
+  /** Stable id used by tools to refer back to a written artifact. */
+  id: string;
+  /** Suggested filename used when the user clicks Download. */
+  filename: string;
+  /** MIME type for the download Blob. */
+  mimeType: string;
+  /** Bytes — read once, cheap. */
+  size: number;
+  /** The data. */
+  blob: Blob;
+  /** ms since epoch. */
+  createdAt: number;
+  /** Tool that produced it (`bcf_export`, `model_save`, …). */
+  source: string;
+  /** Free-form line shown under the filename in the UI. */
+  description?: string;
+}
+
+class FileStore {
+  private files: PlaygroundFile[] = [];
+  private listeners = new Set<() => void>();
+  private nextId = 1;
+
+  add(input: Omit<PlaygroundFile, 'id' | 'createdAt'>): PlaygroundFile {
+    const file: PlaygroundFile = {
+      ...input,
+      id: `pg-file-${this.nextId++}`,
+      createdAt: Date.now(),
+    };
+    this.files = [file, ...this.files];
+    this.notify();
+    return file;
+  }
+
+  list(): PlaygroundFile[] {
+    return this.files;
+  }
+
+  remove(id: string): void {
+    this.files = this.files.filter((f) => f.id !== id);
+    this.notify();
+  }
+
+  clear(): void {
+    this.files = [];
+    this.notify();
+  }
+
+  /** User-triggered. Synthesises an <a download> click — never called by
+   *  tool code, only by the explicit Download button. */
+  download(id: string): void {
+    const file = this.files.find((f) => f.id === id);
+    if (!file) return;
+    const url = URL.createObjectURL(file.blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = file.filename;
+    a.style.display = 'none';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // Revoke after a tick so the browser actually fetched the blob.
+    setTimeout(() => URL.revokeObjectURL(url), 1000);
+  }
+
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private notify(): void {
+    for (const l of this.listeners) l();
+  }
+}
+
+export const playgroundFiles = new FileStore();
+
+/** React hook for components that want to render the file list reactively. */
+export function usePlaygroundFiles(): PlaygroundFile[] {
+  const [files, setFiles] = useState<PlaygroundFile[]>(() => playgroundFiles.list());
+  useEffect(() => playgroundFiles.subscribe(() => setFiles(playgroundFiles.list())), []);
+  return files;
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  if (bytes >= 1024) return (bytes / 1024).toFixed(0) + ' KB';
+  return bytes + ' B';
+}

package/src/components/mcp/playground-uploads.ts

@@ -0,0 +1,122 @@
+/* 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/. */
+
+/**
+ * playground-uploads.ts — virtual file system for INPUTS the user attaches
+ * to a chat turn (IDS specs, side IFC files for diff, BCF imports later).
+ *
+ * Mirrors the playground-files.ts shape but for the other direction: the
+ * user drops a `.ids` (or any text file) onto the chat textarea, we cache
+ * it here, and tools that take a `*_path` argument (ids_validate,
+ * ids_explain) resolve the path through this store BEFORE asking the agent
+ * to inline the XML. That lifts the "the playground can't read disk" wart
+ * and makes the chat experience continuous.
+ */
+
+import { useEffect, useState } from 'react';
+
+export interface UploadedFile {
+  /** The original filename, used as the lookup key (paths are normalised
+   *  to the basename so the agent can pass `./foo.ids` or just `foo.ids`). */
+  name: string;
+  /** MIME type as the browser saw it. May be empty for `.ids`. */
+  mimeType: string;
+  /** Bytes — for sizing the chip and bounding what we accept. */
+  size: number;
+  /** Text content if the file is text/* — this is the path we use for
+   *  ids_validate. Binaries store an empty string here and put bytes in
+   *  `bytes` (future use; v1 only handles text). */
+  text: string;
+  /** Wall-clock when the user attached it. */
+  uploadedAt: number;
+}
+
+class UploadStore {
+  private uploads: UploadedFile[] = [];
+  private listeners = new Set<() => void>();
+
+  /** Read the file as text and stash it. Returns the entry.
+   *
+   *  We only decode known-text formats — `.bcfzip` and other binaries
+   *  are zip archives whose .text() decode would chew through tens of
+   *  megabytes on the main thread for no user benefit (the playground
+   *  has no read path for binary attachments yet). */
+  async add(file: File): Promise<UploadedFile> {
+    const name = file.name.split(/[\\/]/).pop() ?? file.name;
+    const mimeType = file.type || guessMimeType(name);
+    const text = isTextLike(name, mimeType) ? await file.text() : '';
+    const entry: UploadedFile = {
+      name,
+      mimeType,
+      size: file.size,
+      text,
+      uploadedAt: Date.now(),
+    };
+    // De-dup by basename — re-attaching with the same name overwrites.
+    this.uploads = [entry, ...this.uploads.filter((u) => u.name !== name)];
+    this.notify();
+    return entry;
+  }
+
+  /** Resolve a path-ish string to an upload. Tolerates absolute paths,
+   *  ./relative, and bare filenames. */
+  resolve(pathOrName: string): UploadedFile | null {
+    if (!pathOrName) return null;
+    const base = pathOrName.split(/[\\/]/).pop() ?? pathOrName;
+    return this.uploads.find((u) => u.name === base) ?? null;
+  }
+
+  list(): UploadedFile[] {
+    return this.uploads;
+  }
+
+  remove(name: string): void {
+    this.uploads = this.uploads.filter((u) => u.name !== name);
+    this.notify();
+  }
+
+  clear(): void {
+    this.uploads = [];
+    this.notify();
+  }
+
+  subscribe(listener: () => void): () => void {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  }
+
+  private notify(): void {
+    for (const l of this.listeners) l();
+  }
+}
+
+export const playgroundUploads = new UploadStore();
+
+export function usePlaygroundUploads(): UploadedFile[] {
+  const [uploads, setUploads] = useState<UploadedFile[]>(() => playgroundUploads.list());
+  useEffect(() => playgroundUploads.subscribe(() => setUploads(playgroundUploads.list())), []);
+  return uploads;
+}
+
+/** Whether we should decode this attachment as text. STEP files (.ifc) and
+ *  IDS specs are text under the hood; .bcfzip / arbitrary octet-stream
+ *  attachments are zip archives we only ever surface as references. */
+function isTextLike(name: string, mimeType: string): boolean {
+  if (mimeType.startsWith('text/')) return true;
+  if (mimeType === 'application/json' || mimeType === 'application/xml' || mimeType === 'application/xhtml+xml') return true;
+  const ext = name.toLowerCase().split('.').pop();
+  return ext === 'ifc' || ext === 'ids' || ext === 'csv' || ext === 'tsv' || ext === 'xml' || ext === 'json' || ext === 'txt' || ext === 'md';
+}
+
+function guessMimeType(name: string): string {
+  const ext = name.toLowerCase().split('.').pop() ?? '';
+  switch (ext) {
+    case 'ids': return 'application/xml';
+    case 'xml': return 'application/xml';
+    case 'json': return 'application/json';
+    case 'csv': return 'text/csv';
+    case 'txt': return 'text/plain';
+    default: return 'application/octet-stream';
+  }
+}

package/src/components/mcp/types.ts

@@ -0,0 +1,65 @@
+/* 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/. */
+
+/**
+ * Shared types for the /mcp landing page variants.
+ *
+ * The catalog shape mirrors what `node packages/mcp/dist/cli.js --dump-tools`
+ * is expected to emit. Until that script lands, the landing pages can fall
+ * back to `MOCK_CATALOG` from ./data.ts so we can iterate on visuals.
+ */
+
+export type ToolScope = 'read' | 'mutate' | 'export';
+
+export type ToolCategory =
+  | 'Discovery'
+  | 'Query'
+  | 'Geometry'
+  | 'Validation'
+  | 'Mutation'
+  | 'BCF'
+  | 'bSDD'
+  | 'Diff'
+  | 'Export'
+  | 'Viewer';
+
+export interface CatalogTool {
+  name: string;
+  description: string;
+  scope: ToolScope;
+  category: ToolCategory;
+  inputSchema: unknown;
+}
+
+export interface McpCatalog {
+  generatedAt?: string;
+  version?: string;
+  tools: CatalogTool[];
+}
+
+export type McpClientId = 'claude-desktop' | 'cursor' | 'windsurf' | 'vscode' | 'goose';
+
+export interface McpClient {
+  id: McpClientId;
+  name: string;
+  /** Short blurb shown under the button title. */
+  blurb: string;
+  /** Path to a logo image inside /public, or null if we render a glyph. */
+  logo?: string;
+  /** Optional deep-link URL scheme prefix (cursor://, windsurf://, vscode:). */
+  deepLinkPrefix?: string;
+  /** Where the user pastes the JSON snippet. */
+  configHint: string;
+}
+
+export interface McpRecipe {
+  id: string;
+  title: string;
+  /** The actual prompt the user copies. */
+  prompt: string;
+  /** Comma-separated tool names this recipe likely fans out to. */
+  uses: string[];
+  /** Visual category for grouping/coloring. */
+  family: 'audit' | 'visualize' | 'validate' | 'author' | 'compare' | 'discover';
+}

package/src/components/mcp/use-mcp-page.ts

@@ -0,0 +1,109 @@
+/* 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/. */
+
+/**
+ * Tiny utilities shared by every landing-page variant:
+ *
+ *   • useFonts(href)   — injects a Google Fonts <link> only while a /mcp page
+ *                        is mounted, so the global app stays unbothered.
+ *   • useCopyToClipboard() — returns [copy, isJustCopied] for the install
+ *                        snippets and recipe cards.
+ *   • useDocumentMeta(title, themeColor)
+ *                      — keeps <title> / theme-color in sync per variant.
+ *
+ * None of these touch React Suspense / global state — they’re plain
+ * useEffect plumbing so the variants can be lifted out of the chooser
+ * without surprises.
+ */
+
+import { useEffect, useState } from 'react';
+
+/** Inject a stylesheet <link> while this hook is mounted. Idempotent. */
+export function useFonts(...hrefs: string[]): void {
+  useEffect(() => {
+    const tags: HTMLLinkElement[] = [];
+    for (const href of hrefs) {
+      const existing = document.head.querySelector(`link[data-mcp-font="${href}"]`);
+      if (existing) {
+        // Already injected by another variant — refcount via a data attribute.
+        const refs = Number(existing.getAttribute('data-refs') ?? '1') + 1;
+        existing.setAttribute('data-refs', String(refs));
+        tags.push(existing as HTMLLinkElement);
+        continue;
+      }
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+      link.setAttribute('data-mcp-font', href);
+      link.setAttribute('data-refs', '1');
+      document.head.appendChild(link);
+      tags.push(link);
+    }
+    return () => {
+      for (const tag of tags) {
+        const refs = Number(tag.getAttribute('data-refs') ?? '1') - 1;
+        if (refs <= 0) tag.parentNode?.removeChild(tag);
+        else tag.setAttribute('data-refs', String(refs));
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hrefs.join('|')]);
+}
+
+/** Browser-safe clipboard with a 1.4s "just copied" indicator. */
+export function useCopyToClipboard(): {
+  copy: (text: string, key?: string) => Promise<void>;
+  copiedKey: string | null;
+} {
+  const [copiedKey, setCopiedKey] = useState<string | null>(null);
+  return {
+    copiedKey,
+    copy: async (text: string, key?: string) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopiedKey(key ?? text);
+        setTimeout(() => setCopiedKey((curr) => (curr === (key ?? text) ? null : curr)), 1400);
+      } catch {
+        // Older browsers — fall through silently. The install dialogs always
+        // show the snippet anyway so the user can manually select+copy.
+      }
+    },
+  };
+}
+
+/** Set <title> + theme-color while mounted; restore on unmount. */
+export function useDocumentMeta(title: string, themeColor?: string): void {
+  useEffect(() => {
+    const prevTitle = document.title;
+    document.title = title;
+    let prevTheme: string | null = null;
+    let prevThemeExisted = false;
+    let themeMeta: HTMLMetaElement | null = null;
+    if (themeColor) {
+      themeMeta = document.querySelector('meta[name="theme-color"]');
+      if (themeMeta) {
+        // Track existence separately so a meta tag without `content`
+        // doesn't permanently keep our temporary color after unmount.
+        prevThemeExisted = themeMeta.hasAttribute('content');
+        prevTheme = themeMeta.getAttribute('content');
+        themeMeta.setAttribute('content', themeColor);
+      }
+    }
+    return () => {
+      document.title = prevTitle;
+      if (themeMeta) {
+        if (prevThemeExisted && prevTheme !== null) themeMeta.setAttribute('content', prevTheme);
+        else themeMeta.removeAttribute('content');
+      }
+    };
+  }, [title, themeColor]);
+}
+
+/** Smooth-scroll to an in-page anchor; updates the URL hash. */
+export function scrollToAnchor(id: string): void {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  history.replaceState(null, '', `#${id}`);
+}

package/src/components/viewer/MainToolbar.tsx

@@ -24,6 +24,7 @@ import {
   ArrowRight,
   Box,
   HelpCircle,
+  Sparkles,
   Loader2,
   Camera,
   Info,
@@ -425,6 +426,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')
     );
 
     if (supportedFiles.length === 0) return;
@@ -465,6 +467,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')
     );
 
     if (supportedFiles.length === 0) return;
@@ -779,7 +782,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         id="file-input-open"
         ref={fileInputRef}
         type="file"
-        accept=".ifc,.ifcx,.glb"
+        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57"
         multiple
         onChange={handleFileSelect}
         className="hidden"
@@ -787,7 +790,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       <input
         ref={addModelInputRef}
         type="file"
-        accept=".ifc,.ifcx,.glb"
+        accept=".ifc,.ifcx,.glb,.las,.laz,.ply,.pcd,.e57"
         multiple
         onChange={handleAddModelSelect}
         className="hidden"
@@ -1331,6 +1334,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/PointCloudPanel.tsx

@@ -0,0 +1,174 @@
+/* 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/. */
+
+/**
+ * Compact panel that exposes point cloud rendering controls (color mode,
+ * size mode, point size, EDL). Renders only when point cloud assets are
+ * loaded — sits over the canvas without affecting layout for IFC-only
+ * models.
+ */
+
+import { useViewerStore } from '@/store';
+import type { PointColorModeUi, PointSizeModeUi } from '@/store/slices/pointCloudSlice';
+import { cn } from '@/lib/utils';
+
+const COLOR_MODES: Array<{ value: PointColorModeUi; label: string; hint: string }> = [
+  { value: 'rgb',            label: 'RGB',            hint: 'Per-point colour from the source' },
+  { value: 'classification', label: 'Classification', hint: 'ASPRS class palette (ground, vegetation, building...)' },
+  { 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' },
+];
+
+const SIZE_MODES: Array<{ value: PointSizeModeUi; label: string; hint: string }> = [
+  { value: 'fixed-px',       label: 'Fixed',    hint: 'Always render at the slider value (in pixels)' },
+  { value: 'attenuated',     label: 'Auto',     hint: 'Adaptive (closer = bigger), clamped to the slider as max' },
+  { value: 'adaptive-world', label: 'World',    hint: 'Pure world-space radius — splat covers N mm in source space' },
+];
+
+export interface PointCloudPanelProps {
+  /** Number of currently-loaded point cloud assets — panel hides when 0. */
+  assetCount: number;
+}
+
+export function PointCloudPanel({ assetCount }: PointCloudPanelProps) {
+  const colorMode = useViewerStore((s) => s.pointCloudColorMode);
+  const setColorMode = useViewerStore((s) => s.setPointCloudColorMode);
+  const sizeMode = useViewerStore((s) => s.pointCloudSizeMode);
+  const setSizeMode = useViewerStore((s) => s.setPointCloudSizeMode);
+  const pointSize = useViewerStore((s) => s.pointCloudPointSize);
+  const setPointSize = useViewerStore((s) => s.setPointCloudPointSize);
+  const worldRadius = useViewerStore((s) => s.pointCloudWorldRadius);
+  const setWorldRadius = useViewerStore((s) => s.setPointCloudWorldRadius);
+  const edlEnabled = useViewerStore((s) => s.pointCloudEdlEnabled);
+  const setEdlEnabled = useViewerStore((s) => s.setPointCloudEdlEnabled);
+  const edlStrength = useViewerStore((s) => s.pointCloudEdlStrength);
+  const setEdlStrength = useViewerStore((s) => s.setPointCloudEdlStrength);
+
+  if (assetCount <= 0) return null;
+
+  return (
+    <div className="absolute bottom-4 left-4 z-10 pointer-events-auto bg-background/90 backdrop-blur-sm rounded-lg border shadow-lg p-2 flex flex-col gap-2 min-w-[200px]">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          Point Cloud
+        </span>
+        <span className="text-[10px] text-muted-foreground">
+          {assetCount} asset{assetCount === 1 ? '' : 's'}
+        </span>
+      </div>
+
+      {/* Color mode */}
+      <div className="flex flex-col gap-0.5">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Colour</span>
+        {COLOR_MODES.map((mode) => {
+          const active = colorMode === mode.value;
+          return (
+            <button
+              key={mode.value}
+              aria-pressed={active}
+              onClick={() => setColorMode(mode.value)}
+              title={mode.hint}
+              className={cn(
+                'flex items-center gap-2 px-2 py-1 rounded text-xs transition-colors text-left',
+                active
+                  ? 'bg-teal-600 text-white'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+              )}
+            >
+              {mode.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Size mode */}
+      <div className="flex flex-col gap-0.5">
+        <span className="text-[9px] uppercase text-muted-foreground tracking-wider">Size</span>
+        <div className="grid grid-cols-3 gap-0.5">
+          {SIZE_MODES.map((mode) => {
+            const active = sizeMode === mode.value;
+            return (
+              <button
+                key={mode.value}
+                aria-pressed={active}
+                onClick={() => setSizeMode(mode.value)}
+                title={mode.hint}
+                className={cn(
+                  'px-1.5 py-1 rounded text-[11px] transition-colors',
+                  active
+                    ? 'bg-teal-600 text-white'
+                    : 'text-muted-foreground hover:bg-muted hover:text-foreground',
+                )}
+              >
+                {mode.label}
+              </button>
+            );
+          })}
+        </div>
+        <label className="flex items-center gap-2 mt-1">
+          <span className="text-[10px] text-muted-foreground w-8 shrink-0">{pointSize.toFixed(0)}px</span>
+          <input
+            type="range"
+            min={1}
+            max={20}
+            step={1}
+            value={pointSize}
+            onChange={(e) => setPointSize(Number(e.target.value))}
+            className="flex-1 h-1 accent-teal-600 cursor-pointer"
+            title="Splat size in pixels (or upper cap in Auto mode)"
+          />
+        </label>
+        {sizeMode !== 'fixed-px' && (
+          <label className="flex items-center gap-2">
+            <span className="text-[10px] text-muted-foreground w-8 shrink-0">
+              {(worldRadius * 1000).toFixed(0)}mm
+            </span>
+            <input
+              type="range"
+              min={1}
+              max={100}
+              step={1}
+              value={Math.round(worldRadius * 1000)}
+              onChange={(e) => setWorldRadius(Number(e.target.value) / 1000)}
+              className="flex-1 h-1 accent-teal-600 cursor-pointer"
+              title="World-space splat radius in millimetres"
+            />
+          </label>
+        )}
+      </div>
+
+      {/* EDL */}
+      <div className="flex flex-col gap-0.5">
+        <label className="flex items-center justify-between gap-2 cursor-pointer">
+          <span className="text-[9px] uppercase text-muted-foreground tracking-wider">EDL</span>
+          <input
+            type="checkbox"
+            checked={edlEnabled}
+            onChange={(e) => setEdlEnabled(e.target.checked)}
+            className="accent-teal-600"
+            title="Eye-Dome Lighting — adds depth perception via screen-space depth gradient"
+          />
+        </label>
+        {edlEnabled && (
+          <label className="flex items-center gap-2">
+            <span className="text-[10px] text-muted-foreground w-8 shrink-0">
+              {edlStrength.toFixed(1)}
+            </span>
+            <input
+              type="range"
+              min={0}
+              max={3}
+              step={0.1}
+              value={edlStrength}
+              onChange={(e) => setEdlStrength(Number(e.target.value))}
+              className="flex-1 h-1 accent-teal-600 cursor-pointer"
+              title="EDL strength multiplier"
+            />
+          </label>
+        )}
+      </div>
+    </div>
+  );
+}