@ifc-lite/viewer 1.9.0 → 1.11.0

package/src/components/viewer/BasketPresentationDock.tsx

@@ -0,0 +1,422 @@
+/* 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 { useCallback, useMemo, useRef, useState } from 'react';
+import {
+  ChevronLeft,
+  ChevronRight,
+  Equal,
+  Eye,
+  EyeOff,
+  Minus,
+  Pencil,
+  Play,
+  Plus,
+  RotateCcw,
+  Save,
+  Square,
+  Timer,
+  Trash2,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { cn } from '@/lib/utils';
+import { useViewerStore } from '@/store';
+import {
+  executeBasketSet,
+  executeBasketAdd,
+  executeBasketRemove,
+  executeBasketSaveView,
+  executeBasketClear,
+} from '@/store/basket/basketCommands';
+import { activateBasketViewFromStore } from '@/store/basket/basketViewActivator';
+import { getSmartBasketInputFromStore, isBasketIsolationActiveFromStore } from '@/store/basketVisibleSet';
+
+export function BasketPresentationDock() {
+  const [savingThumbnail, setSavingThumbnail] = useState(false);
+  const [editingViewId, setEditingViewId] = useState<string | null>(null);
+  const [editingName, setEditingName] = useState('');
+  const [playingAll, setPlayingAll] = useState(false);
+  const stripRef = useRef<HTMLDivElement>(null);
+  const stopPlayRef = useRef(false);
+  const loopPlayRef = useRef(false);
+
+  const pinboardEntities = useViewerStore((s) => s.pinboardEntities);
+  const isolatedEntities = useViewerStore((s) => s.isolatedEntities);
+  const basketViews = useViewerStore((s) => s.basketViews);
+  const activeBasketViewId = useViewerStore((s) => s.activeBasketViewId);
+  const basketPresentationVisible = useViewerStore((s) => s.basketPresentationVisible);
+
+  const showPinboard = useViewerStore((s) => s.showPinboard);
+  const clearIsolation = useViewerStore((s) => s.clearIsolation);
+  const setBasketPresentationVisible = useViewerStore((s) => s.setBasketPresentationVisible);
+
+  const removeBasketView = useViewerStore((s) => s.removeBasketView);
+  const renameBasketView = useViewerStore((s) => s.renameBasketView);
+  const setBasketViewTransitionMs = useViewerStore((s) => s.setBasketViewTransitionMs);
+
+  const basketIsVisible = useMemo(
+    () => pinboardEntities.size > 0 && isolatedEntities !== null && isBasketIsolationActiveFromStore(),
+    [pinboardEntities, isolatedEntities],
+  );
+
+  const applySource = useCallback((mode: 'set' | 'add' | 'remove') => {
+    if (mode === 'set') executeBasketSet();
+    else if (mode === 'add') executeBasketAdd();
+    else executeBasketRemove();
+  }, []);
+
+  const handleSaveCurrent = useCallback(async () => {
+    if (pinboardEntities.size === 0 || savingThumbnail) return;
+
+    setSavingThumbnail(true);
+    try {
+      const { source } = getSmartBasketInputFromStore();
+      await executeBasketSaveView(source === 'empty' ? 'manual' : source);
+    } finally {
+      setSavingThumbnail(false);
+    }
+  }, [pinboardEntities, savingThumbnail]);
+
+  const startRename = useCallback((viewId: string, name: string) => {
+    setEditingViewId(viewId);
+    setEditingName(name);
+  }, []);
+
+  const cancelRename = useCallback(() => {
+    setEditingViewId(null);
+    setEditingName('');
+  }, []);
+
+  const commitRename = useCallback(() => {
+    if (!editingViewId) return;
+    const nextName = editingName.trim();
+    if (nextName.length > 0) {
+      renameBasketView(editingViewId, nextName);
+    }
+    setEditingViewId(null);
+    setEditingName('');
+  }, [editingViewId, editingName, renameBasketView]);
+
+  const scrollStrip = useCallback((delta: number) => {
+    stripRef.current?.scrollBy({ left: delta, behavior: 'smooth' });
+  }, []);
+
+  const toTransitionMs = useCallback((value: number | null | undefined) => {
+    if (!value || !Number.isFinite(value) || value <= 0) return 700;
+    return Math.max(150, Math.min(15000, Math.round(value)));
+  }, []);
+
+  const wait = useCallback((ms: number) => new Promise<void>((resolve) => {
+    window.setTimeout(resolve, ms);
+  }), []);
+
+  const stopPlayAll = useCallback(() => {
+    stopPlayRef.current = true;
+    loopPlayRef.current = false;
+    setPlayingAll(false);
+  }, []);
+
+  const startPlayAll = useCallback(async (loop = false) => {
+    if (playingAll || basketViews.length === 0) return;
+    stopPlayRef.current = false;
+    loopPlayRef.current = loop;
+    setPlayingAll(true);
+
+    try {
+      const orderedViews = [...basketViews];
+      do {
+        for (const view of orderedViews) {
+          if (stopPlayRef.current) break;
+          activateBasketViewFromStore(view.id);
+          const transitionMs = toTransitionMs(view.transitionMs);
+          await wait(transitionMs + 180);
+        }
+      } while (loopPlayRef.current && !stopPlayRef.current && orderedViews.length > 0);
+    } finally {
+      loopPlayRef.current = false;
+      setPlayingAll(false);
+    }
+  }, [basketViews, playingAll, toTransitionMs, wait]);
+
+  const setViewTransitionDuration = useCallback((viewId: string, currentTransitionMs: number | null) => {
+    const defaultSeconds = currentTransitionMs && currentTransitionMs > 0
+      ? (currentTransitionMs / 1000).toFixed(1)
+      : '';
+    const input = window.prompt(
+      'Transition duration in seconds (optional). Leave empty for default smooth transition.',
+      defaultSeconds,
+    );
+    if (input === null) return;
+
+    const trimmed = input.trim();
+    if (!trimmed) {
+      setBasketViewTransitionMs(viewId, null);
+      return;
+    }
+
+    const seconds = Number(trimmed);
+    if (!Number.isFinite(seconds) || seconds <= 0) return;
+    setBasketViewTransitionMs(viewId, Math.round(seconds * 1000));
+  }, [setBasketViewTransitionMs]);
+
+  if (!basketPresentationVisible) {
+    return (
+      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-30 pointer-events-none">
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          className="pointer-events-auto shadow-lg gap-2"
+          onClick={() => setBasketPresentationVisible(true)}
+        >
+          Presentation
+          <span className="rounded-full bg-primary/15 px-1.5 py-0.5 text-[10px] font-semibold text-primary">
+            {basketViews.length}
+          </span>
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-30 w-[min(980px,calc(100%-2rem))] pointer-events-none">
+      <div className="pointer-events-auto rounded-xl border bg-background/90 backdrop-blur-sm shadow-lg p-3 space-y-3">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <div className="text-sm font-semibold">Presentation</div>
+            <span className="rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground">
+              {pinboardEntities.size} in basket
+            </span>
+            <span className="rounded-full border px-2 py-0.5 text-[11px] text-muted-foreground">
+              {basketViews.length} views
+            </span>
+          </div>
+
+          <div className="flex items-center gap-1.5">
+            <div className="flex items-center gap-1 rounded-md border bg-background/70 p-1">
+              <Button type="button" variant="outline" size="icon-sm" onClick={() => applySource('set')} title="Set basket from current context">
+                <Equal className="h-4 w-4" />
+              </Button>
+              <Button type="button" variant="outline" size="icon-sm" onClick={() => applySource('add')} title="Add current context to basket">
+                <Plus className="h-4 w-4" />
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                onClick={() => applySource('remove')}
+                disabled={pinboardEntities.size === 0}
+                title="Remove current context from basket"
+              >
+                <Minus className="h-4 w-4" />
+              </Button>
+            </div>
+            <div className="flex items-center gap-1 rounded-md border bg-background/70 p-1">
+              <Button
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                onClick={() => {
+                  if (basketIsVisible) clearIsolation();
+                  else showPinboard();
+                }}
+                disabled={pinboardEntities.size === 0}
+                title={basketIsVisible ? 'Hide active basket' : 'Show active basket'}
+              >
+                {basketIsVisible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </Button>
+              <Button
+                type="button"
+                variant="outline"
+                size="icon-sm"
+                onClick={executeBasketClear}
+                disabled={pinboardEntities.size === 0}
+                title="Clear active basket"
+              >
+                <RotateCcw className="h-4 w-4" />
+              </Button>
+            </div>
+            <Button
+              type="button"
+              variant="default"
+              size="icon-sm"
+              onClick={handleSaveCurrent}
+              disabled={pinboardEntities.size === 0 || savingThumbnail}
+              title="Save current basket as presentation view"
+            >
+              <Save className="h-4 w-4" />
+            </Button>
+            <Button
+              type="button"
+              variant={playingAll ? 'secondary' : 'outline'}
+              size="icon-sm"
+              onClick={playingAll ? stopPlayAll : (e) => { void startPlayAll(e.shiftKey); }}
+              disabled={basketViews.length === 0}
+              title={playingAll ? 'Stop playback' : 'Play all saved views (Shift+Click to loop)'}
+            >
+              {playingAll ? <Square className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+            </Button>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="ml-1 text-xs"
+              onClick={() => setBasketPresentationVisible(false)}
+            >
+              Hide
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            onClick={() => scrollStrip(-280)}
+            disabled={basketViews.length <= 1}
+            title="Scroll left"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+
+          <div
+            ref={stripRef}
+            className="flex-1 min-w-0 overflow-x-auto scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent snap-x snap-mandatory"
+          >
+            <div className="flex items-stretch gap-2 pr-1">
+              {basketViews.length === 0 && (
+                <div className="h-[102px] min-w-[340px] rounded-md border border-dashed text-xs text-muted-foreground px-3 py-2 flex items-center">
+                  Save basket views here. Click any card to restore both visibility and viewpoint.
+                </div>
+              )}
+
+              {basketViews.map((view) => (
+                <div key={view.id} className="relative w-[186px] h-[102px] shrink-0 snap-start">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (editingViewId) return;
+                      activateBasketViewFromStore(view.id);
+                    }}
+                    className={cn(
+                      'h-full w-full rounded-md border bg-card text-left overflow-hidden transition-colors',
+                      activeBasketViewId === view.id && 'ring-2 ring-primary border-primary',
+                    )}
+                  >
+                    {view.thumbnailDataUrl ? (
+                      <img
+                        src={view.thumbnailDataUrl}
+                        alt={view.name}
+                        className="absolute inset-0 h-full w-full object-cover"
+                      />
+                    ) : (
+                      <div className="absolute inset-0 bg-muted" />
+                    )}
+
+                    {activeBasketViewId === view.id && (
+                      <div className="absolute left-1 top-1 rounded bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground">
+                        Active
+                      </div>
+                    )}
+
+                  </button>
+
+                  <div
+                    className={cn(
+                      'absolute inset-x-0 bottom-0 bg-black/60 text-white px-2 py-1',
+                      editingViewId !== view.id && 'pointer-events-none',
+                    )}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {editingViewId === view.id ? (
+                      <Input
+                        autoFocus
+                        value={editingName}
+                        onChange={(e) => setEditingName(e.target.value)}
+                        onBlur={commitRename}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') {
+                            e.preventDefault();
+                            commitRename();
+                          } else if (e.key === 'Escape') {
+                            e.preventDefault();
+                            cancelRename();
+                          }
+                        }}
+                        className="h-6 bg-black/40 text-xs border-white/30 text-white placeholder:text-white/60"
+                      />
+                    ) : (
+                      <>
+                        <div className="text-[12px] font-medium truncate">{view.name}</div>
+                        <div className="text-[10px] opacity-80">
+                          {view.entityRefs.length} objects
+                          {view.transitionMs ? ` · ${(view.transitionMs / 1000).toFixed(1)}s` : ''}
+                        </div>
+                      </>
+                    )}
+                  </div>
+
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="icon-xs"
+                    className="absolute top-1 right-7"
+                    title="Rename view"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      startRename(view.id, view.name);
+                    }}
+                  >
+                    <Pencil className="h-3 w-3" />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="icon-xs"
+                    className="absolute top-1 right-[3.25rem]"
+                    title="Set transition duration"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setViewTransitionDuration(view.id, view.transitionMs);
+                    }}
+                  >
+                    <Timer className="h-3 w-3" />
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="secondary"
+                    size="icon-xs"
+                    className="absolute top-1 right-1"
+                    title="Delete view"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (playingAll) stopPlayAll();
+                      if (editingViewId === view.id) cancelRename();
+                      removeBasketView(view.id);
+                    }}
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </Button>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Button
+            type="button"
+            variant="outline"
+            size="icon-sm"
+            onClick={() => scrollStrip(280)}
+            disabled={basketViews.length <= 1}
+            title="Scroll right"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/viewer/CommandPalette.tsx

@@ -54,10 +54,19 @@ import {
   Orbit,
   FolderOpen,
   Clock,
+  Save,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useViewerStore, stringToEntityRef } from '@/store';
-import type { EntityRef } from '@/store';
+import { useViewerStore } from '@/store';
+import { goHomeFromStore, resetVisibilityForHomeFromStore } from '@/store/homeView';
+import {
+  executeBasketSet,
+  executeBasketAdd,
+  executeBasketRemove,
+  executeBasketToggleVisibility,
+  executeBasketSaveView,
+  executeBasketClear,
+} from '@/store/basket/basketCommands';
 import { useSandbox } from '@/hooks/useSandbox';
 import { SCRIPT_TEMPLATES } from '@/lib/scripts/templates';
 import { GLTFExporter, CSVExporter } from '@ifc-lite/export';
@@ -172,22 +181,6 @@ function downloadBlob(data: BlobPart, name: string, mime: string) {
   URL.revokeObjectURL(url);
 }
 
-function getSelectionRefs(): EntityRef[] {
-  const s = useViewerStore.getState();
-  if (s.selectedEntitiesSet.size > 0) {
-    const refs: EntityRef[] = [];
-    for (const str of s.selectedEntitiesSet) refs.push(stringToEntityRef(str));
-    return refs;
-  }
-  return s.selectedEntity ? [s.selectedEntity] : [];
-}
-
-function clearMultiSelect() {
-  const s = useViewerStore.getState();
-  if (s.selectedEntitiesSet.size > 0)
-    useViewerStore.setState({ selectedEntitiesSet: new Set(), selectedEntityIds: new Set() });
-}
-
 /** Exclusively activate a right-panel content panel (BCF / IDS / Lens).
  *  Closes all others first so the if-else chain in ViewerLayout renders it.
  *  If the target is already active, closes it (back to Properties). */
@@ -294,7 +287,7 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
     // ── View ──
     c.push(
       { id: 'view:home', label: 'Home', keywords: 'isometric reset camera', category: 'View', icon: Home, shortcut: 'H',
-        action: () => { useViewerStore.getState().cameraCallbacks.home?.(); } },
+        action: () => { goHomeFromStore(); } },
       { id: 'view:fit', label: 'Fit All', keywords: 'zoom extents entire model', category: 'View', icon: Maximize2, shortcut: 'Z',
         action: () => { useViewerStore.getState().cameraCallbacks.fitAll?.(); } },
       { id: 'view:frame', label: 'Frame Selection', keywords: 'zoom focus selected', category: 'View', icon: Crosshair, shortcut: 'F',
@@ -340,19 +333,23 @@ export function CommandPalette({ open, onOpenChange }: CommandPaletteProps) {
           if (ids.length > 0) { s.hideEntities(ids); s.clearSelection(); }
         } },
       { id: 'vis:show', label: 'Show All', keywords: 'unhide reset visible', category: 'Visibility', icon: Eye, shortcut: 'A',
-        action: () => { const s = useViewerStore.getState(); s.showAll(); s.clearStoreySelection(); } },
-      { id: 'vis:isolate', label: 'Isolate Selection', keywords: 'basket set pinboard', category: 'Visibility', icon: Equal, shortcut: 'I',
-        action: () => {
-          const s = useViewerStore.getState();
-          if (s.pinboardEntities.size > 0 && s.selectedEntitiesSet.size === 0) { s.showPinboard(); }
-          else { const r = getSelectionRefs(); if (r.length > 0) { s.setBasket(r); clearMultiSelect(); } }
-        } },
-      { id: 'vis:add-iso', label: 'Add to Isolation', keywords: 'basket plus', category: 'Visibility', icon: Plus, shortcut: '+',
-        action: () => { const r = getSelectionRefs(); if (r.length > 0) { useViewerStore.getState().addToBasket(r); clearMultiSelect(); } } },
-      { id: 'vis:remove-iso', label: 'Remove from Isolation', keywords: 'basket minus', category: 'Visibility', icon: Minus, shortcut: '−',
-        action: () => { const r = getSelectionRefs(); if (r.length > 0) { useViewerStore.getState().removeFromBasket(r); clearMultiSelect(); } } },
-      { id: 'vis:clear-iso', label: 'Clear Isolation', keywords: 'basket reset', category: 'Visibility', icon: RotateCcw,
-        action: () => { useViewerStore.getState().clearBasket(); } },
+        action: () => { resetVisibilityForHomeFromStore(); } },
+      { id: 'vis:set-iso', label: 'Isolate (Set Basket)', keywords: 'basket isolate set selection hierarchy view equals', category: 'Visibility', icon: Equal, shortcut: 'I',
+        action: () => executeBasketSet() },
+      { id: 'vis:add-iso', label: 'Add to Basket', keywords: 'basket plus selection hierarchy view', category: 'Visibility', icon: Plus, shortcut: '+',
+        action: () => executeBasketAdd() },
+      { id: 'vis:remove-iso', label: 'Remove from Basket', keywords: 'basket minus selection hierarchy view', category: 'Visibility', icon: Minus, shortcut: '−',
+        action: () => executeBasketRemove() },
+      { id: 'vis:toggle-iso', label: 'Toggle Basket Visibility', keywords: 'basket show hide', category: 'Visibility', icon: Eye,
+        action: () => executeBasketToggleVisibility() },
+      { id: 'vis:save-view', label: 'Save Basket as View', keywords: 'basket presentation thumbnail', category: 'Visibility', icon: Save,
+        action: () => executeBasketSaveView().catch((err) => {
+          console.error('[CommandPalette] Failed to save basket view:', err);
+        }) },
+      { id: 'vis:toggle-presentation', label: 'Toggle Basket Presentation Dock', keywords: 'basket panel carousel thumbnails', category: 'Visibility', icon: Layout,
+        action: () => { useViewerStore.getState().toggleBasketPresentationVisible(); } },
+      { id: 'vis:clear-iso', label: 'Clear Basket', keywords: 'basket clear reset', category: 'Visibility', icon: RotateCcw,
+        action: () => executeBasketClear() },
       { id: 'vis:spaces', label: 'Spaces', keywords: 'IfcSpace rooms show hide', category: 'Visibility', icon: Box,
         action: () => { useViewerStore.getState().toggleTypeVisibility('spaces'); } },
       { id: 'vis:openings', label: 'Openings', keywords: 'IfcOpeningElement show hide', category: 'Visibility', icon: SquareX,

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" />