@ifc-lite/viewer 1.8.0 → 1.10.0

package/src/components/viewer/MainToolbar.tsx

@@ -2,7 +2,7 @@
  * 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/. */
 
-import React, { useRef, useCallback, useMemo } from 'react';
+import React, { useRef, useCallback, useEffect, useMemo } from 'react';
 import {
   FolderOpen,
   Download,
@@ -66,6 +66,7 @@ import { BulkPropertyEditor } from './BulkPropertyEditor';
 import { DataConnector } from './DataConnector';
 import { ExportChangesButton } from './ExportChangesButton';
 import { useFloorplanView } from '@/hooks/useFloorplanView';
+import { recordRecentFiles, cacheFileBlobs } from '@/lib/recent-files';
 
 type Tool = 'select' | 'pan' | 'orbit' | 'walk' | 'measure' | 'section';
 
@@ -147,6 +148,16 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const addModelInputRef = useRef<HTMLInputElement>(null);
   const { loadFile, loading, progress, geometryResult, ifcDataStore, models, clearAllModels, loadFilesSequentially, loadFederatedIfcx, addIfcxOverlays, addModel } = useIfc();
 
+  // Listen for programmatic file-load requests (from command palette recent files)
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const file = (e as CustomEvent<File>).detail;
+      if (file) loadFile(file);
+    };
+    window.addEventListener('ifc-lite:load-file', handler);
+    return () => window.removeEventListener('ifc-lite:load-file', handler);
+  }, [loadFile]);
+
   // Floorplan view
   const { availableStoreys, activateFloorplan } = useFloorplanView();
 
@@ -169,8 +180,10 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const resetViewerState = useViewerStore((state) => state.resetViewerState);
   const bcfPanelVisible = useViewerStore((state) => state.bcfPanelVisible);
   const toggleBcfPanel = useViewerStore((state) => state.toggleBcfPanel);
+  const setBcfPanelVisible = useViewerStore((state) => state.setBcfPanelVisible);
   const idsPanelVisible = useViewerStore((state) => state.idsPanelVisible);
   const toggleIdsPanel = useViewerStore((state) => state.toggleIdsPanel);
+  const setIdsPanelVisible = useViewerStore((state) => state.setIdsPanelVisible);
   const listPanelVisible = useViewerStore((state) => state.listPanelVisible);
   const toggleListPanel = useViewerStore((state) => state.toggleListPanel);
   const setRightPanelCollapsed = useViewerStore((state) => state.setRightPanelCollapsed);
@@ -187,6 +200,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   // Lens state
   const lensPanelVisible = useViewerStore((state) => state.lensPanelVisible);
   const toggleLensPanel = useViewerStore((state) => state.toggleLensPanel);
+  const setLensPanelVisible = useViewerStore((state) => state.setLensPanelVisible);
 
   // Check which type geometries exist across ALL loaded models (federation-aware)
   const typeGeometryExists = useMemo(() => {
@@ -231,6 +245,10 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
 
     if (supportedFiles.length === 0) return;
 
+    // Track recently opened files (metadata + blob cache for instant reload)
+    recordRecentFiles(supportedFiles.map(f => ({ name: f.name, size: f.size })));
+    cacheFileBlobs(supportedFiles);
+
     if (supportedFiles.length === 1) {
       // Single file - use loadFile (simpler single-model path)
       loadFile(supportedFiles[0]);
@@ -472,6 +490,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     <div className="flex items-center gap-1 px-2 h-12 border-b bg-white dark:bg-black border-zinc-200 dark:border-zinc-800 relative z-50">
       {/* ── File Operations ── */}
       <input
+        id="file-input-open"
         ref={fileInputRef}
         type="file"
         accept=".ifc,.ifcx,.glb"
@@ -633,8 +652,10 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             size="icon-sm"
             onClick={(e) => {
               (e.currentTarget as HTMLButtonElement).blur();
-              // If BCF is being shown, also expand the right panel
               if (!bcfPanelVisible) {
+                // Close other right-panel content first, then expand
+                setIdsPanelVisible(false);
+                setLensPanelVisible(false);
                 setRightPanelCollapsed(false);
               }
               toggleBcfPanel();
@@ -655,8 +676,10 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             size="icon-sm"
             onClick={(e) => {
               (e.currentTarget as HTMLButtonElement).blur();
-              // If IDS is being shown, also expand the right panel
               if (!idsPanelVisible) {
+                // Close other right-panel content first, then expand
+                setBcfPanelVisible(false);
+                setLensPanelVisible(false);
                 setRightPanelCollapsed(false);
               }
               toggleIdsPanel();
@@ -677,6 +700,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             size="icon-sm"
             onClick={(e) => {
               (e.currentTarget as HTMLButtonElement).blur();
+              // Close script panel (bottom-panel exclusivity)
+              useViewerStore.getState().setScriptPanelVisible(false);
               if (!listPanelVisible) {
                 setRightPanelCollapsed(false);
               }
@@ -826,6 +851,9 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             onClick={(e) => {
               (e.currentTarget as HTMLButtonElement).blur();
               if (!lensPanelVisible) {
+                // Close other right-panel content first, then expand
+                setBcfPanelVisible(false);
+                setIdsPanelVisible(false);
                 setRightPanelCollapsed(false);
               }
               toggleLensPanel();

package/src/components/viewer/ScriptPanel.tsx

@@ -0,0 +1,416 @@
+/* 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/. */
+
+/**
+ * ScriptPanel — Code editor + output console for BIM scripting.
+ *
+ * Uses CodeMirror 6 for the code editor with bim.* autocomplete.
+ * Connects to the QuickJS sandbox via useSandbox() and displays results
+ * in a log console.
+ */
+
+import { useCallback, useMemo, useState, memo } from 'react';
+import {
+  Play,
+  Save,
+  Plus,
+  Trash2,
+  X,
+  ChevronDown,
+  FileCode2,
+  RotateCcw,
+  AlertCircle,
+  CheckCircle2,
+  Info,
+  AlertTriangle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from '@/components/ui/dialog';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn, formatDuration } from '@/lib/utils';
+import { useViewerStore } from '@/store';
+import { useSandbox } from '@/hooks/useSandbox';
+import { SCRIPT_TEMPLATES } from '@/lib/scripts/templates';
+import { CodeEditor } from './CodeEditor';
+import type { LogEntry } from '@/store/slices/scriptSlice';
+
+interface ScriptPanelProps {
+  onClose?: () => void;
+}
+
+/** Consolidated script state selector — single subscription instead of 14 */
+function useScriptState() {
+  const editorContent = useViewerStore((s) => s.scriptEditorContent);
+  const setEditorContent = useViewerStore((s) => s.setScriptEditorContent);
+  const executionState = useViewerStore((s) => s.scriptExecutionState);
+  const lastResult = useViewerStore((s) => s.scriptLastResult);
+  const lastError = useViewerStore((s) => s.scriptLastError);
+  const savedScripts = useViewerStore((s) => s.savedScripts);
+  const activeScriptId = useViewerStore((s) => s.activeScriptId);
+  const editorDirty = useViewerStore((s) => s.scriptEditorDirty);
+  const createScript = useViewerStore((s) => s.createScript);
+  const saveActiveScript = useViewerStore((s) => s.saveActiveScript);
+  const deleteScript = useViewerStore((s) => s.deleteScript);
+  const setActiveScriptId = useViewerStore((s) => s.setActiveScriptId);
+  const deleteConfirmId = useViewerStore((s) => s.scriptDeleteConfirmId);
+  const setDeleteConfirmId = useViewerStore((s) => s.setScriptDeleteConfirmId);
+
+  return {
+    editorContent,
+    setEditorContent,
+    executionState,
+    lastResult,
+    lastError,
+    savedScripts,
+    activeScriptId,
+    editorDirty,
+    createScript,
+    saveActiveScript,
+    deleteScript,
+    setActiveScriptId,
+    deleteConfirmId,
+    setDeleteConfirmId,
+  };
+}
+
+export function ScriptPanel({ onClose }: ScriptPanelProps) {
+  const {
+    editorContent,
+    setEditorContent,
+    executionState,
+    lastResult,
+    lastError,
+    savedScripts,
+    activeScriptId,
+    editorDirty,
+    createScript,
+    saveActiveScript,
+    deleteScript,
+    setActiveScriptId,
+    deleteConfirmId,
+    setDeleteConfirmId,
+  } = useScriptState();
+
+  const { execute, reset } = useSandbox();
+  const [outputCollapsed, setOutputCollapsed] = useState(false);
+
+  const activeScript = useMemo(
+    () => savedScripts.find((s) => s.id === activeScriptId),
+    [savedScripts, activeScriptId],
+  );
+
+  const deleteConfirmScript = useMemo(
+    () => (deleteConfirmId ? savedScripts.find((s) => s.id === deleteConfirmId) : null),
+    [savedScripts, deleteConfirmId],
+  );
+
+  const handleRun = useCallback(async () => {
+    if (executionState === 'running') return;
+    await execute(editorContent);
+  }, [execute, editorContent, executionState]);
+
+  const handleSave = useCallback(() => {
+    if (activeScriptId) {
+      saveActiveScript();
+    } else {
+      createScript('Untitled Script');
+    }
+  }, [activeScriptId, saveActiveScript, createScript]);
+
+  const handleNew = useCallback((name: string, code?: string) => {
+    createScript(name, code);
+  }, [createScript]);
+
+  const handleDeleteConfirm = useCallback(() => {
+    if (deleteConfirmId) {
+      deleteScript(deleteConfirmId);
+    }
+  }, [deleteConfirmId, deleteScript]);
+
+  return (
+    <div className="h-full flex flex-col bg-background">
+      {/* Header */}
+      <div className="flex items-center gap-1 px-2 py-1.5 border-b shrink-0">
+        <FileCode2 className="h-4 w-4 text-muted-foreground shrink-0" />
+        <span className="text-sm font-medium truncate">
+          {activeScript ? activeScript.name : 'Script Editor'}
+          {editorDirty && <span className="text-muted-foreground ml-1">*</span>}
+        </span>
+        <div className="flex-1" />
+
+        {/* Script selector dropdown */}
+        {savedScripts.length > 0 && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon-xs">
+                <ChevronDown className="h-3.5 w-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {savedScripts.map((s) => (
+                <DropdownMenuItem
+                  key={s.id}
+                  onClick={() => setActiveScriptId(s.id)}
+                  className={cn(s.id === activeScriptId && 'bg-accent')}
+                >
+                  <FileCode2 className="h-3.5 w-3.5 mr-2" />
+                  {s.name}
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              {activeScriptId && (
+                <DropdownMenuItem
+                  onClick={() => setDeleteConfirmId(activeScriptId)}
+                  className="text-destructive"
+                >
+                  <Trash2 className="h-3.5 w-3.5 mr-2" />
+                  Delete
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+
+        {onClose && (
+          <Button variant="ghost" size="icon-xs" onClick={onClose}>
+            <X className="h-3.5 w-3.5" />
+          </Button>
+        )}
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-1 px-2 py-1 border-b shrink-0">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handleRun}
+              disabled={executionState === 'running'}
+              className="gap-1"
+            >
+              <Play className="h-3.5 w-3.5" />
+              Run
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Run script (Ctrl+Enter)</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon-xs" onClick={handleSave}>
+              <Save className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Save (Ctrl+S)</TooltipContent>
+        </Tooltip>
+
+        {/* New script dropdown with templates */}
+        <DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon-xs">
+                  <Plus className="h-3.5 w-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+            </TooltipTrigger>
+            <TooltipContent>New script</TooltipContent>
+          </Tooltip>
+          <DropdownMenuContent align="start">
+            <DropdownMenuItem onClick={() => handleNew('Untitled Script')}>
+              <FileCode2 className="h-3.5 w-3.5 mr-2" />
+              Blank Script
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            {SCRIPT_TEMPLATES.map((t) => (
+              <DropdownMenuItem key={t.name} onClick={() => handleNew(t.name, t.code)}>
+                <FileCode2 className="h-3.5 w-3.5 mr-2" />
+                {t.name}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="ghost" size="icon-xs" onClick={reset}>
+              <RotateCcw className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Reset sandbox</TooltipContent>
+        </Tooltip>
+
+        {/* Status indicator */}
+        <div className="flex-1" />
+        {executionState === 'running' && (
+          <span className="text-xs text-muted-foreground animate-pulse">Running...</span>
+        )}
+        {executionState === 'success' && lastResult && (
+          <span className="text-xs text-green-600 dark:text-green-400 flex items-center gap-1">
+            <CheckCircle2 className="h-3 w-3" />
+            {formatDuration(lastResult.durationMs)}
+          </span>
+        )}
+        {executionState === 'error' && (
+          <span className="text-xs text-destructive flex items-center gap-1">
+            <AlertCircle className="h-3 w-3" />
+            Error
+          </span>
+        )}
+      </div>
+
+      {/* Code Editor */}
+      <div className="flex-1 min-h-0 overflow-hidden">
+        <CodeEditor
+          value={editorContent}
+          onChange={setEditorContent}
+          onRun={handleRun}
+          onSave={handleSave}
+          className="h-full"
+        />
+      </div>
+
+      {/* Output Console */}
+      <div className="shrink-0 border-t">
+        {/* Output header */}
+        <button
+          className="flex items-center gap-1.5 px-2 py-1 w-full hover:bg-muted/50 transition-colors text-left"
+          onClick={() => setOutputCollapsed(!outputCollapsed)}
+        >
+          <ChevronDown
+            className={cn('h-3 w-3 transition-transform', outputCollapsed && '-rotate-90')}
+          />
+          <span className="text-xs font-medium text-muted-foreground">Output</span>
+          {lastResult && lastResult.logs.length > 0 && (
+            <span className="text-xs text-muted-foreground">({lastResult.logs.length})</span>
+          )}
+        </button>
+
+        {!outputCollapsed && (
+          <ScrollArea className="h-[140px]">
+            <div className="px-2 pb-2 font-mono text-xs space-y-0.5">
+              {/* Error message */}
+              {lastError && (
+                <div className="flex items-start gap-1.5 text-destructive">
+                  <AlertCircle className="h-3 w-3 mt-0.5 shrink-0" />
+                  <span className="whitespace-pre-wrap break-all">{lastError}</span>
+                </div>
+              )}
+
+              {/* Log entries */}
+              {lastResult?.logs.map((log, i) => (
+                <MemoizedLogLine key={i} log={log} />
+              ))}
+
+              {/* Return value */}
+              {lastResult && lastResult.value !== undefined && lastResult.value !== null && (
+                <div className="text-muted-foreground mt-1 pt-1 border-t border-border/50">
+                  <span className="opacity-60">Return: </span>
+                  <span className="text-foreground">
+                    {typeof lastResult.value === 'object'
+                      ? JSON.stringify(lastResult.value, null, 2)
+                      : String(lastResult.value)}
+                  </span>
+                </div>
+              )}
+
+              {/* Empty state */}
+              {!lastError && !lastResult && (
+                <div className="text-muted-foreground py-2 text-center">
+                  Press Run or Ctrl+Enter to execute
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        )}
+      </div>
+
+      {/* Delete confirmation dialog */}
+      <Dialog open={deleteConfirmId !== null} onOpenChange={(open) => { if (!open) setDeleteConfirmId(null); }}>
+        <DialogContent className="sm:max-w-[400px]">
+          <DialogHeader>
+            <DialogTitle>Delete Script</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete &ldquo;{deleteConfirmScript?.name ?? 'this script'}&rdquo;?
+              This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="ghost" onClick={() => setDeleteConfirmId(null)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleDeleteConfirm}>
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
+
+/** Format a log entry's args into a display string */
+function formatLogArgs(args: unknown[]): string {
+  return args.map((a) => {
+    if (typeof a === 'object' && a !== null) {
+      try {
+        return JSON.stringify(a, null, 2);
+      } catch {
+        return String(a);
+      }
+    }
+    return String(a);
+  }).join(' ');
+}
+
+/** Render a single log entry with appropriate icon and color — memoized */
+const MemoizedLogLine = memo(function LogLine({ log }: { log: LogEntry }) {
+  const formatted = useMemo(() => formatLogArgs(log.args), [log.args]);
+
+  switch (log.level) {
+    case 'error':
+      return (
+        <div className="flex items-start gap-1.5 text-destructive">
+          <AlertCircle className="h-3 w-3 mt-0.5 shrink-0" />
+          <span className="whitespace-pre-wrap break-all">{formatted}</span>
+        </div>
+      );
+    case 'warn':
+      return (
+        <div className="flex items-start gap-1.5 text-yellow-600 dark:text-yellow-400">
+          <AlertTriangle className="h-3 w-3 mt-0.5 shrink-0" />
+          <span className="whitespace-pre-wrap break-all">{formatted}</span>
+        </div>
+      );
+    case 'info':
+      return (
+        <div className="flex items-start gap-1.5 text-blue-600 dark:text-blue-400">
+          <Info className="h-3 w-3 mt-0.5 shrink-0" />
+          <span className="whitespace-pre-wrap break-all">{formatted}</span>
+        </div>
+      );
+    default:
+      return (
+        <div className="flex items-start gap-1.5">
+          <span className="whitespace-pre-wrap break-all">{formatted}</span>
+        </div>
+      );
+  }
+});

package/src/components/viewer/ViewerLayout.tsx

@@ -4,6 +4,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
+import type { PanelImperativeHandle } from 'react-resizable-panels';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { MainToolbar } from './MainToolbar';
 import { HierarchyPanel } from './HierarchyPanel';
@@ -19,6 +20,8 @@ import { BCFPanel } from './BCFPanel';
 import { IDSPanel } from './IDSPanel';
 import { LensPanel } from './LensPanel';
 import { ListPanel } from './lists/ListPanel';
+import { ScriptPanel } from './ScriptPanel';
+import { CommandPalette } from './CommandPalette';
 
 const BOTTOM_PANEL_MIN_HEIGHT = 120;
 const BOTTOM_PANEL_DEFAULT_HEIGHT = 300;
@@ -29,6 +32,21 @@ export function ViewerLayout() {
   useKeyboardShortcuts();
   const shortcutsDialog = useKeyboardShortcutsDialog();
 
+  // Command palette state
+  const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);
+
+  // Ctrl+K / Cmd+K to open command palette
+  useEffect(() => {
+    const handler = (e: globalThis.KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+        e.preventDefault();
+        setCommandPaletteOpen((prev) => !prev);
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, []);
+
   // Initialize theme on mount
   const theme = useViewerStore((s) => s.theme);
   const isMobile = useViewerStore((s) => s.isMobile);
@@ -45,6 +63,27 @@ export function ViewerLayout() {
   const setListPanelVisible = useViewerStore((s) => s.setListPanelVisible);
   const lensPanelVisible = useViewerStore((s) => s.lensPanelVisible);
   const setLensPanelVisible = useViewerStore((s) => s.setLensPanelVisible);
+  const scriptPanelVisible = useViewerStore((s) => s.scriptPanelVisible);
+  const setScriptPanelVisible = useViewerStore((s) => s.setScriptPanelVisible);
+
+  // Panel refs for programmatic collapse/expand (command palette, keyboard shortcuts)
+  const leftPanelRef = useRef<PanelImperativeHandle>(null);
+  const rightPanelRef = useRef<PanelImperativeHandle>(null);
+
+  // Sync store state → Panel collapse/expand on desktop
+  useEffect(() => {
+    const panel = leftPanelRef.current;
+    if (!panel) return;
+    if (leftPanelCollapsed && !panel.isCollapsed()) panel.collapse();
+    else if (!leftPanelCollapsed && panel.isCollapsed()) panel.expand();
+  }, [leftPanelCollapsed]);
+
+  useEffect(() => {
+    const panel = rightPanelRef.current;
+    if (!panel) return;
+    if (rightPanelCollapsed && !panel.isCollapsed()) panel.collapse();
+    else if (!rightPanelCollapsed && panel.isCollapsed()) panel.expand();
+  }, [rightPanelCollapsed]);
 
   // Bottom panel resize state (pixel height, persisted in ref to avoid re-renders during drag)
   const [bottomHeight, setBottomHeight] = useState(BOTTOM_PANEL_DEFAULT_HEIGHT);
@@ -113,12 +152,7 @@ export function ViewerLayout() {
     return () => window.removeEventListener('resize', checkMobile);
   }, [setIsMobile, setLeftPanelCollapsed, setRightPanelCollapsed]);
 
-  // Initialize theme on mount and sync with store
-  useEffect(() => {
-    const currentTheme = useViewerStore.getState().theme;
-    document.documentElement.classList.toggle('dark', currentTheme === 'dark');
-  }, []);
-
+  // Keep DOM class in sync when theme changes (initial class is set by inline script in index.html)
   useEffect(() => {
     document.documentElement.classList.toggle('dark', theme === 'dark');
   }, [theme]);
@@ -133,6 +167,7 @@ export function ViewerLayout() {
         {/* Global Overlays */}
         <EntityContextMenu />
         <HoverTooltip />
+        <CommandPalette open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen} />
 
         {/* Main Toolbar */}
         <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />
@@ -150,6 +185,11 @@ export function ViewerLayout() {
                   minSize={10}
                   collapsible
                   collapsedSize={0}
+                  panelRef={leftPanelRef}
+                  onResize={() => {
+                    const collapsed = leftPanelRef.current?.isCollapsed() ?? false;
+                    if (collapsed !== leftPanelCollapsed) setLeftPanelCollapsed(collapsed);
+                  }}
                 >
                   <div className="h-full w-full overflow-hidden">
                     <HierarchyPanel />
@@ -174,6 +214,11 @@ export function ViewerLayout() {
                   minSize={15}
                   collapsible
                   collapsedSize={0}
+                  panelRef={rightPanelRef}
+                  onResize={() => {
+                    const collapsed = rightPanelRef.current?.isCollapsed() ?? false;
+                    if (collapsed !== rightPanelCollapsed) setRightPanelCollapsed(collapsed);
+                  }}
                 >
                   <div className="h-full w-full overflow-hidden">
                     {lensPanelVisible ? (
@@ -190,8 +235,8 @@ export function ViewerLayout() {
               </PanelGroup>
             </div>
 
-            {/* Bottom Panel - Lists (custom resizable, outside PanelGroup) */}
-            {listPanelVisible && (
+            {/* Bottom Panel - Lists or Script (custom resizable, outside PanelGroup) */}
+            {(listPanelVisible || scriptPanelVisible) && (
               <div style={{ height: bottomHeight, flexShrink: 0 }} className="relative">
                 {/* Drag handle */}
                 <div
@@ -199,7 +244,11 @@ export function ViewerLayout() {
                   onMouseDown={handleResizeStart}
                 />
                 <div className="h-full w-full overflow-hidden border-t pt-1.5">
-                  <ListPanel onClose={() => setListPanelVisible(false)} />
+                  {scriptPanelVisible ? (
+                    <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
+                  ) : (
+                    <ListPanel onClose={() => setListPanelVisible(false)} />
+                  )}
                 </div>
               </div>
             )}
@@ -240,12 +289,13 @@ export function ViewerLayout() {
               <div className="absolute inset-x-0 bottom-0 h-[50vh] bg-background border-t rounded-t-xl shadow-xl z-40 animate-in slide-in-from-bottom">
                 <div className="flex items-center justify-between p-2 border-b">
                   <span className="font-medium text-sm">
-                    {listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
+                    {scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
                   </span>
                   <button
                     className="p-1 hover:bg-muted rounded"
                     onClick={() => {
                       setRightPanelCollapsed(true);
+                      if (scriptPanelVisible) setScriptPanelVisible(false);
                       if (listPanelVisible) setListPanelVisible(false);
                       if (bcfPanelVisible) setBcfPanelVisible(false);
                       if (lensPanelVisible) setLensPanelVisible(false);
@@ -259,7 +309,9 @@ export function ViewerLayout() {
                   </button>
                 </div>
                 <div className="h-[calc(50vh-48px)] overflow-auto">
-                  {listPanelVisible ? (
+                  {scriptPanelVisible ? (
+                    <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
+                  ) : listPanelVisible ? (
                     <ListPanel onClose={() => setListPanelVisible(false)} />
                   ) : lensPanelVisible ? (
                     <LensPanel onClose={() => setLensPanelVisible(false)} />