@ifc-lite/viewer 1.10.0 → 1.11.1

package/src/components/viewer/EntityContextMenu.tsx

@@ -17,30 +17,34 @@ import {
   Copy,
   Maximize2,
   Building2,
+  Save,
 } from 'lucide-react';
 import { useViewerStore, resolveEntityRef } from '@/store';
+import { resetVisibilityForHomeFromStore } from '@/store/homeView';
+import {
+  executeBasketSet,
+  executeBasketAdd,
+  executeBasketRemove,
+  executeBasketSaveView,
+} from '@/store/basket/basketCommands';
 import { useIfc } from '@/hooks/useIfc';
 
 export function EntityContextMenu() {
   const contextMenu = useViewerStore((s) => s.contextMenu);
   const closeContextMenu = useViewerStore((s) => s.closeContextMenu);
   const hideEntity = useViewerStore((s) => s.hideEntity);
-  const showAll = useViewerStore((s) => s.showAll);
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
   const setSelectedEntityIds = useViewerStore((s) => s.setSelectedEntityIds);
   const cameraCallbacks = useViewerStore((s) => s.cameraCallbacks);
   // Basket actions
-  const setBasket = useViewerStore((s) => s.setBasket);
-  const addToBasket = useViewerStore((s) => s.addToBasket);
-  const removeFromBasket = useViewerStore((s) => s.removeFromBasket);
   const menuRef = useRef<HTMLDivElement>(null);
   const { ifcDataStore, models } = useIfc();
 
   // Resolve contextMenu.entityId (globalId) to original expressId and model
   // This is needed because IfcDataStore uses original expressIds, not globalIds
-  const { resolvedExpressId, resolvedModelId, activeDataStore } = useMemo(() => {
+  const { resolvedExpressId, activeDataStore, contextEntityRef } = useMemo(() => {
     if (!contextMenu.entityId) {
-      return { resolvedExpressId: null, resolvedModelId: null, activeDataStore: ifcDataStore };
+      return { resolvedExpressId: null, activeDataStore: ifcDataStore, contextEntityRef: null };
     }
 
     // Single source of truth for globalId → EntityRef resolution
@@ -49,12 +53,16 @@ export function EntityContextMenu() {
       const model = models.get(ref.modelId);
       return {
         resolvedExpressId: ref.expressId,
-        resolvedModelId: ref.modelId,
         activeDataStore: model?.ifcDataStore ?? ifcDataStore,
+        contextEntityRef: ref,
       };
     }
 
-    return { resolvedExpressId: contextMenu.entityId, resolvedModelId: null, activeDataStore: ifcDataStore };
+    return {
+      resolvedExpressId: contextMenu.entityId,
+      activeDataStore: ifcDataStore,
+      contextEntityRef: null,
+    };
   }, [contextMenu.entityId, models, ifcDataStore]);
 
   // Close menu when clicking outside
@@ -95,27 +103,33 @@ export function EntityContextMenu() {
 
   // Basket: = Set basket to this entity
   const handleSetBasket = useCallback(() => {
-    if (resolvedExpressId !== null && resolvedModelId !== null) {
-      setBasket([{ modelId: resolvedModelId, expressId: resolvedExpressId }]);
-    }
+    executeBasketSet(contextEntityRef);
     closeContextMenu();
-  }, [resolvedExpressId, resolvedModelId, setBasket, closeContextMenu]);
+  }, [contextEntityRef, closeContextMenu]);
 
   // Basket: + Add to basket
   const handleAddToBasket = useCallback(() => {
-    if (resolvedExpressId !== null && resolvedModelId !== null) {
-      addToBasket([{ modelId: resolvedModelId, expressId: resolvedExpressId }]);
-    }
+    executeBasketAdd(contextEntityRef);
     closeContextMenu();
-  }, [resolvedExpressId, resolvedModelId, addToBasket, closeContextMenu]);
+  }, [contextEntityRef, closeContextMenu]);
 
   // Basket: − Remove from basket
   const handleRemoveFromBasket = useCallback(() => {
-    if (resolvedExpressId !== null && resolvedModelId !== null) {
-      removeFromBasket([{ modelId: resolvedModelId, expressId: resolvedExpressId }]);
+    executeBasketRemove(contextEntityRef);
+    closeContextMenu();
+  }, [contextEntityRef, closeContextMenu]);
+
+  const handleSaveBasketView = useCallback(() => {
+    const state = useViewerStore.getState();
+    if (state.pinboardEntities.size === 0) {
+      closeContextMenu();
+      return;
     }
+    executeBasketSaveView().catch((err) => {
+      console.error('[EntityContextMenu] Failed to save basket view:', err);
+    });
     closeContextMenu();
-  }, [resolvedExpressId, resolvedModelId, removeFromBasket, closeContextMenu]);
+  }, [closeContextMenu]);
 
   const handleHide = useCallback(() => {
     if (contextMenu.entityId) {
@@ -125,9 +139,9 @@ export function EntityContextMenu() {
   }, [contextMenu.entityId, hideEntity, closeContextMenu]);
 
   const handleShowAll = useCallback(() => {
-    showAll(); // Clear hidden + isolation (basket preserved)
+    resetVisibilityForHomeFromStore();
     closeContextMenu();
-  }, [showAll, closeContextMenu]);
+  }, [closeContextMenu]);
 
   const handleSelectSimilar = useCallback(() => {
     // Use resolvedExpressId (original ID) for IfcDataStore lookups
@@ -230,9 +244,10 @@ export function EntityContextMenu() {
           <div className="h-px bg-border my-1" />
 
           {/* Basket operations */}
-          <MenuItem icon={Equal} label="Set as Basket (=)" onClick={handleSetBasket} />
+          <MenuItem icon={Equal} label="Set Basket (=)" onClick={handleSetBasket} />
           <MenuItem icon={Plus} label="Add to Basket (+)" onClick={handleAddToBasket} />
           <MenuItem icon={Minus} label="Remove from Basket (−)" onClick={handleRemoveFromBasket} />
+          <MenuItem icon={Save} label="Save Basket View (B)" onClick={handleSaveBasketView} />
 
           <div className="h-px bg-border my-1" />
 

package/src/components/viewer/HierarchyPanel.tsx

@@ -36,6 +36,7 @@ export function HierarchyPanel() {
   } = useIfc();
   const selectedEntityId = useViewerStore((s) => s.selectedEntityId);
   const setSelectedEntityId = useViewerStore((s) => s.setSelectedEntityId);
+  const setSelectedEntityIds = useViewerStore((s) => s.setSelectedEntityIds);
   const setSelectedEntity = useViewerStore((s) => s.setSelectedEntity);
   const setSelectedEntities = useViewerStore((s) => s.setSelectedEntities);
   const setSelectedModelId = useViewerStore((s) => s.setSelectedModelId);
@@ -44,6 +45,7 @@ export function HierarchyPanel() {
   const setStoreysSelection = useViewerStore((s) => s.setStoreysSelection);
   const clearStoreySelection = useViewerStore((s) => s.clearStoreySelection);
   const isolateEntities = useViewerStore((s) => s.isolateEntities);
+  const setHierarchyBasketSelection = useViewerStore((s) => s.setHierarchyBasketSelection);
 
   const hiddenEntities = useViewerStore((s) => s.hiddenEntities);
   const hideEntities = useViewerStore((s) => s.hideEntities);
@@ -180,10 +182,26 @@ export function HierarchyPanel() {
       return;
     }
 
+    const hierarchyRefs: Array<{ modelId: string; expressId: number }> = [];
+    for (const globalId of getNodeElements(node)) {
+      const ref = resolveEntityRef(globalId);
+      if (ref) hierarchyRefs.push(ref);
+    }
+    if (hierarchyRefs.length > 0) {
+      setHierarchyBasketSelection(hierarchyRefs);
+    } else if (isSpatialContainer(node.type) && node.expressIds.length > 0) {
+      setHierarchyBasketSelection([{
+        modelId: node.modelIds[0] || 'legacy',
+        expressId: node.expressIds[0],
+      }]);
+    }
+
     // Type group nodes - click to isolate entities, expand via chevron only
     if (node.type === 'type-group') {
       const elements = getNodeElements(node);
       if (elements.length > 0) {
+        setSelectedEntityIds(elements);
+        setSelectedEntity(resolveEntityRef(elements[0]));
         isolateEntities(elements);
       }
       return;
@@ -284,7 +302,7 @@ export function HierarchyPanel() {
         setSelectedEntity(resolveEntityRef(elementId));
       }
     }
-  }, [selectedStoreys, setStoreysSelection, clearStoreySelection, setSelectedEntityId, setSelectedEntity, setSelectedEntities, setActiveModel, toggleExpand, unifiedStoreys, models, isolateEntities, getNodeElements]);
+  }, [selectedStoreys, setStoreysSelection, clearStoreySelection, setSelectedEntityId, setSelectedEntityIds, setSelectedEntity, setSelectedEntities, setActiveModel, toggleExpand, unifiedStoreys, models, isolateEntities, getNodeElements, setHierarchyBasketSelection]);
 
   // Compute selection and visibility state for a node
   const computeNodeState = useCallback((node: TreeNode): { isSelected: boolean; nodeHidden: boolean; modelVisible?: boolean } => {

package/src/components/viewer/MainToolbar.tsx

@@ -24,8 +24,6 @@ import {
   ArrowLeft,
   ArrowRight,
   Box,
-  Sun,
-  Moon,
   HelpCircle,
   Loader2,
   Camera,
@@ -34,11 +32,11 @@ import {
   SquareX,
   Building2,
   Plus,
-  Minus,
   MessageSquare,
   ClipboardCheck,
   Palette,
   Orbit,
+  LayoutTemplate,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -55,8 +53,9 @@ import {
   DropdownMenuSubContent,
 } from '@/components/ui/dropdown-menu';
 import { Progress } from '@/components/ui/progress';
-import { useViewerStore, isIfcxDataStore, stringToEntityRef } from '@/store';
-import type { EntityRef } from '@/store';
+import { useViewerStore, isIfcxDataStore } 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, CSVExporter } from '@ifc-lite/export';
@@ -67,6 +66,7 @@ import { DataConnector } from './DataConnector';
 import { ExportChangesButton } from './ExportChangesButton';
 import { useFloorplanView } from '@/hooks/useFloorplanView';
 import { recordRecentFiles, cacheFileBlobs } from '@/lib/recent-files';
+import { ThemeSwitch } from './ThemeSwitch';
 
 type Tool = 'select' | 'pan' | 'orbit' | 'walk' | 'measure' | 'section';
 
@@ -165,12 +165,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const hasModelsLoaded = models.size > 0 || (geometryResult?.meshes && geometryResult.meshes.length > 0);
   const activeTool = useViewerStore((state) => state.activeTool);
   const setActiveTool = useViewerStore((state) => state.setActiveTool);
-  const theme = useViewerStore((state) => state.theme);
-  const toggleTheme = useViewerStore((state) => state.toggleTheme);
   const selectedEntityId = useViewerStore((state) => state.selectedEntityId);
   const hideEntities = useViewerStore((state) => state.hideEntities);
-  const showAll = useViewerStore((state) => state.showAll);
-  const clearStoreySelection = useViewerStore((state) => state.clearStoreySelection);
   const error = useViewerStore((state) => state.error);
   const cameraCallbacks = useViewerStore((state) => state.cameraCallbacks);
   const hoverTooltipsEnabled = useViewerStore((state) => state.hoverTooltipsEnabled);
@@ -189,14 +185,11 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   const setRightPanelCollapsed = useViewerStore((state) => state.setRightPanelCollapsed);
   const projectionMode = useViewerStore((state) => state.projectionMode);
   const toggleProjectionMode = useViewerStore((state) => state.toggleProjectionMode);
-  // Basket state (= + − isolation basket)
+  // Basket presentation state
   const pinboardEntities = useViewerStore((state) => state.pinboardEntities);
-  const setBasket = useViewerStore((state) => state.setBasket);
-  const addToBasket = useViewerStore((state) => state.addToBasket);
-  const removeFromBasket = useViewerStore((state) => state.removeFromBasket);
-  const clearBasket = useViewerStore((state) => state.clearBasket);
-  // NOTE: selectedEntity and selectedEntitiesSet accessed via getState() in callbacks
-  // to avoid re-rendering MainToolbar on every Cmd+Click selection change.
+  const basketViewCount = useViewerStore((state) => state.basketViews.length);
+  const basketPresentationVisible = useViewerStore((state) => state.basketPresentationVisible);
+  const toggleBasketPresentationVisible = useViewerStore((state) => state.toggleBasketPresentationVisible);
   // Lens state
   const lensPanelVisible = useViewerStore((state) => state.lensPanelVisible);
   const toggleLensPanel = useViewerStore((state) => state.toggleLensPanel);
@@ -306,68 +299,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     e.target.value = '';
   }, [loadFilesSequentially, addIfcxOverlays, ifcDataStore]);
 
-  /** Get current selection as EntityRef[] — uses getState() to avoid reactive subscriptions */
-  const getSelectionRefs = useCallback((): EntityRef[] => {
-    const state = useViewerStore.getState();
-    if (state.selectedEntitiesSet.size > 0) {
-      const refs: EntityRef[] = [];
-      for (const str of state.selectedEntitiesSet) {
-        refs.push(stringToEntityRef(str));
-      }
-      return refs;
-    }
-    if (state.selectedEntity) {
-      return [state.selectedEntity];
-    }
-    return [];
-  }, []);
-
   const hasSelection = selectedEntityId !== null;
 
-  // Basket state
-  const showPinboard = useViewerStore((state) => state.showPinboard);
-
-  // Clear multi-select state after basket operations so subsequent − targets a single entity
-  const clearMultiSelect = useCallback(() => {
-    const state = useViewerStore.getState();
-    if (state.selectedEntitiesSet.size > 0) {
-      useViewerStore.setState({ selectedEntitiesSet: new Set(), selectedEntityIds: new Set() });
-    }
-  }, []);
-
-  // Basket operations
-  const handleSetBasket = useCallback(() => {
-    const state = useViewerStore.getState();
-    // If basket already exists and user hasn't explicitly multi-selected,
-    // re-apply the basket instead of replacing it with a stale single selection.
-    // Only an explicit multi-selection (Ctrl+Click) should replace an existing basket.
-    if (state.pinboardEntities.size > 0 && state.selectedEntitiesSet.size === 0) {
-      showPinboard();
-      return;
-    }
-    const refs = getSelectionRefs();
-    if (refs.length > 0) {
-      setBasket(refs);
-      clearMultiSelect();
-    }
-  }, [getSelectionRefs, setBasket, showPinboard, clearMultiSelect]);
-
-  const handleAddToBasket = useCallback(() => {
-    const refs = getSelectionRefs();
-    if (refs.length > 0) {
-      addToBasket(refs);
-      clearMultiSelect();
-    }
-  }, [getSelectionRefs, addToBasket, clearMultiSelect]);
-
-  const handleRemoveFromBasket = useCallback(() => {
-    const refs = getSelectionRefs();
-    if (refs.length > 0) {
-      removeFromBasket(refs);
-      clearMultiSelect();
-    }
-  }, [getSelectionRefs, removeFromBasket, clearMultiSelect]);
-
   const clearSelection = useViewerStore((state) => state.clearSelection);
 
   const handleHide = useCallback(() => {
@@ -383,9 +316,16 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
   }, [selectedEntityId, hideEntities, clearSelection]);
 
   const handleShowAll = useCallback(() => {
-    showAll();     // Clear hiddenEntities + isolatedEntities (basket contents preserved)
-    clearStoreySelection(); // Also clear storey filtering
-  }, [showAll, clearStoreySelection]);
+    resetVisibilityForHomeFromStore();
+  }, []);
+
+  const handleIsolate = useCallback(() => {
+    executeBasketIsolate();
+  }, []);
+
+  const handleHome = useCallback(() => {
+    goHomeFromStore();
+  }, []);
 
   const handleExportGLB = useCallback(() => {
     if (!geometryResult) return;
@@ -759,36 +699,35 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
 
       <Separator orientation="vertical" className="h-6 mx-1" />
 
-      {/* ── Basket Isolation (= + −) ── */}
+      {/* ── Basket Presentation ── */}
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
-            variant={pinboardEntities.size > 0 ? 'default' : 'ghost'}
+            variant={basketPresentationVisible ? 'default' : 'ghost'}
             size="icon-sm"
             onClick={(e) => {
               (e.currentTarget as HTMLButtonElement).blur();
-              handleSetBasket();
+              toggleBasketPresentationVisible();
             }}
-            disabled={!hasSelection && pinboardEntities.size === 0}
+            disabled={models.size === 0 && !geometryResult}
             className={cn(
-              pinboardEntities.size > 0 && 'bg-primary text-primary-foreground relative',
+              (basketPresentationVisible || pinboardEntities.size > 0) && 'relative',
             )}
           >
-            <Equal className="h-4 w-4" />
-            {pinboardEntities.size > 0 && (
+            <LayoutTemplate className="h-4 w-4" />
+            {(basketViewCount > 0 || pinboardEntities.size > 0) && (
               <span className="absolute -top-1 -right-1 bg-primary text-primary-foreground text-[9px] font-bold rounded-full min-w-[14px] h-[14px] flex items-center justify-center px-0.5 border border-background">
-                {pinboardEntities.size}
+                {basketViewCount > 0 ? `${basketViewCount}/${pinboardEntities.size}` : pinboardEntities.size}
               </span>
             )}
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          Set Basket — isolate selection <span className="ml-2 text-xs opacity-60">(I)</span>
+          Basket Presentation Dock (Views: {basketViewCount}, Entities: {pinboardEntities.size})
         </TooltipContent>
       </Tooltip>
-      <ActionButton icon={Plus} label="Add to Basket" onClick={handleAddToBasket} shortcut="+" disabled={!hasSelection} />
-      <ActionButton icon={Minus} label="Remove from Basket" onClick={handleRemoveFromBasket} shortcut="−" disabled={!hasSelection} />
 
+      <ActionButton icon={Equal} label="Isolate (Set Basket)" onClick={handleIsolate} shortcut="I / =" />
       <ActionButton icon={EyeOff} label="Hide Selection" onClick={handleHide} shortcut="Del / Space" disabled={!hasSelection} />
       <ActionButton icon={Eye} label="Show All (Reset Filters)" onClick={handleShowAll} shortcut="A" />
       <ActionButton icon={Maximize2} label="Fit All" onClick={() => cameraCallbacks.fitAll?.()} shortcut="Z" />
@@ -869,7 +808,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       <Separator orientation="vertical" className="h-6 mx-1" />
 
       {/* ── Camera & View ── */}
-      <ActionButton icon={Home} label="Home (Isometric)" onClick={() => cameraCallbacks.home?.()} shortcut="H" />
+      <ActionButton icon={Home} label="Home (Isometric + Reset Visibility)" onClick={handleHome} shortcut="H" />
 
       {/* Orthographic / Perspective toggle */}
       <Tooltip>
@@ -924,8 +863,8 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
           <TooltipContent>Preset Views</TooltipContent>
         </Tooltip>
         <DropdownMenuContent>
-          <DropdownMenuItem onClick={() => cameraCallbacks.home?.()}>
-            <Box className="h-4 w-4 mr-2" /> Isometric <span className="ml-auto text-xs opacity-60">0</span>
+          <DropdownMenuItem onClick={handleHome}>
+            <Box className="h-4 w-4 mr-2" /> Isometric <span className="ml-auto text-xs opacity-60">H</span>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => cameraCallbacks.setPresetView?.('top')}>
@@ -967,27 +906,31 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       )}
 
       {/* Right Side Actions */}
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="ghost" size="icon-sm" onClick={toggleTheme}>
-            {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>Toggle Theme</TooltipContent>
-      </Tooltip>
+      <div className="flex items-center gap-2 ml-2 pl-2 border-l border-zinc-200 dark:border-zinc-700/60">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>
+              <ThemeSwitch />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>Toggle theme</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="rounded-full"
+              onClick={() => onShowShortcuts?.()}
+            >
+              <HelpCircle className="!h-[22px] !w-[22px]" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Info (?)</TooltipContent>
+        </Tooltip>
+      </div>
 
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            onClick={() => onShowShortcuts?.()}
-          >
-            <HelpCircle className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>Info (?)</TooltipContent>
-      </Tooltip>
     </div>
   );
 }

package/src/components/viewer/Section2DPanel.tsx

@@ -52,6 +52,8 @@ export function Section2DPanel({
   // ═══════════════════════════════════════════════════════════════════════════
   const panelVisible = useViewerStore((s) => s.drawing2DPanelVisible);
   const setDrawingPanelVisible = useViewerStore((s) => s.setDrawing2DPanelVisible);
+  const suppressNextSection2DPanelAutoOpen = useViewerStore((s) => s.suppressNextSection2DPanelAutoOpen);
+  const setSuppressNextSection2DPanelAutoOpen = useViewerStore((s) => s.setSuppressNextSection2DPanelAutoOpen);
   const drawing = useViewerStore((s) => s.drawing2D);
   const setDrawing = useViewerStore((s) => s.setDrawing2D);
   const status = useViewerStore((s) => s.drawing2DStatus);
@@ -148,10 +150,15 @@ export function Section2DPanel({
   useEffect(() => {
     // Section tool was just activated
     if (activeTool === 'section' && prevActiveToolRef.current !== 'section' && geometryResult?.meshes) {
+      if (suppressNextSection2DPanelAutoOpen) {
+        setSuppressNextSection2DPanelAutoOpen(false);
+        prevActiveToolRef.current = activeTool;
+        return;
+      }
       setDrawingPanelVisible(true);
     }
     prevActiveToolRef.current = activeTool;
-  }, [activeTool, geometryResult, setDrawingPanelVisible]);
+  }, [activeTool, geometryResult, setDrawingPanelVisible, suppressNextSection2DPanelAutoOpen, setSuppressNextSection2DPanelAutoOpen]);
 
   // ═══════════════════════════════════════════════════════════════════════════
   // LOCAL STATE

package/src/components/viewer/ThemeSwitch.tsx

@@ -0,0 +1,55 @@
+/* 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/. */
+
+import { useEffect, useRef } from 'react';
+import { ThemeToggle } from 'beautiful-theme-toggle';
+import { useViewerStore } from '@/store';
+
+/**
+ * Animated SVG theme toggle (sun/moon) powered by beautiful-theme-toggle.
+ *
+ * Bidirectional sync:
+ *  - User clicks the widget  → onChange → store.setTheme
+ *  - External change (keyboard shortcut / command palette) → store updates → widget.setTheme
+ */
+export function ThemeSwitch() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<ThemeToggle | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const currentTheme = useViewerStore.getState().theme;
+
+    const toggle = new ThemeToggle({
+      element: containerRef.current,
+      size: 80,
+      initialState: currentTheme,
+      onChange: (state) => {
+        useViewerStore.getState().setTheme(state);
+      },
+    });
+
+    toggleRef.current = toggle;
+
+    // Subscribe to external theme changes so the widget stays in sync
+    let prevTheme = currentTheme;
+    const unsub = useViewerStore.subscribe((state) => {
+      if (state.theme !== prevTheme) {
+        prevTheme = state.theme;
+        if (toggleRef.current && toggleRef.current.getTheme() !== state.theme) {
+          toggleRef.current.setTheme(state.theme, false);
+        }
+      }
+    });
+
+    return () => {
+      unsub();
+      toggle.destroy();
+      toggleRef.current = null;
+    };
+  }, []);
+
+  return <div ref={containerRef} className="flex items-center cursor-pointer opacity-80 hover:opacity-100 transition-opacity" />;
+}