@ifc-lite/viewer 1.22.0 → 1.23.0

package/src/components/viewer/MainToolbar.tsx

@@ -33,6 +33,7 @@ import {
   SquareX,
   Building2,
   Plus,
+  PackagePlus,
   MessageSquare,
   ClipboardCheck,
   Palette,
@@ -44,6 +45,12 @@ import {
   Globe2,
   Move,
   Settings,
+  PenLine,
+  Layers3,
+  SquareStack,
+  ChevronsUpDown,
+  Undo2,
+  Redo2,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
@@ -66,9 +73,10 @@ import { goHomeFromStore, resetVisibilityForHomeFromStore } from '@/store/homeVi
 import { executeBasketIsolate } from '@/store/basket/basketCommands';
 import { useIfc } from '@/hooks/useIfc';
 import { cn } from '@/lib/utils';
-import { GLTFExporter, CSVExporter } from '@ifc-lite/export';
+import { CSVExporter } from '@ifc-lite/export';
 import { FileSpreadsheet, FileJson, FileText, Filter, Upload, Pencil } from 'lucide-react';
 import { ExportDialog } from './ExportDialog';
+import { GLBExportDialog } from './GLBExportDialog';
 import { BulkPropertyEditor } from './BulkPropertyEditor';
 import { DataConnector } from './DataConnector';
 import { ExportChangesButton } from './ExportChangesButton';
@@ -90,8 +98,8 @@ import {
   subscribeAnalysisExtensions,
 } from '@/services/analysis-extensions';
 
-type Tool = 'select' | 'walk' | 'measure' | 'section' | 'annotate';
-type WorkspacePanel = 'script' | 'list' | 'bcf' | 'ids' | 'lens' | string;
+type Tool = 'select' | 'walk' | 'measure' | 'section' | 'annotate' | 'addElement' | 'split';
+type WorkspacePanel = 'script' | 'list' | 'bcf' | 'ids' | 'lens' | 'addElement' | string;
 
 function isNativeFileHandle(file: File | NativeFileHandle): file is NativeFileHandle {
   return typeof (file as NativeFileHandle).path === 'string';
@@ -150,6 +158,191 @@ function ToolButton({
   );
 }
 
+/**
+ * Stacked / Exploded / Solo level display dropdown. Pinned next
+ * to the Quick Floorplan dropdown so storey-related controls
+ * cluster visually. Shows a small purple dot on the trigger when
+ * mode is not Stacked, so the user can tell at a glance that an
+ * Exploded / Solo view is active.
+ *
+ * Gating: parent renders this only when there are ≥ 2 storeys
+ * — single-storey models have no use for level display modes.
+ */
+interface LevelDisplayDropdownProps {
+  availableStoreys: Array<{ modelId: string; expressId: number; name: string; elevation: number }>;
+}
+
+function LevelDisplayDropdown({ availableStoreys }: LevelDisplayDropdownProps) {
+  const levelDisplayMode = useViewerStore((s) => s.levelDisplayMode);
+  const setLevelDisplayMode = useViewerStore((s) => s.setLevelDisplayMode);
+  const explodedGap = useViewerStore((s) => s.explodedGap);
+  const setExplodedGap = useViewerStore((s) => s.setExplodedGap);
+  const soloStorey = useViewerStore((s) => s.soloStorey);
+  const setSoloStorey = useViewerStore((s) => s.setSoloStorey);
+
+  const dirty = levelDisplayMode !== 'stacked';
+  return (
+    <DropdownMenu>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Level display mode"
+              className="relative"
+            >
+              {levelDisplayMode === 'exploded' ? (
+                <ChevronsUpDown className="h-4 w-4" />
+              ) : levelDisplayMode === 'solo' ? (
+                <SquareStack className="h-4 w-4" />
+              ) : (
+                <Layers3 className="h-4 w-4" />
+              )}
+              {dirty && (
+                <span
+                  aria-hidden="true"
+                  className="absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-purple-500 ring-1 ring-background"
+                />
+              )}
+            </Button>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent>Level display ({levelDisplayMode})</TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent className="w-72">
+        <DropdownMenuLabel>Level display</DropdownMenuLabel>
+        <DropdownMenuCheckboxItem
+          checked={levelDisplayMode === 'stacked'}
+          onCheckedChange={() => setLevelDisplayMode('stacked')}
+        >
+          <Layers3 className="h-4 w-4 mr-2" /> Stacked
+          <span className="ml-auto text-[10px] opacity-50">default</span>
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={levelDisplayMode === 'exploded'}
+          onCheckedChange={() => setLevelDisplayMode('exploded')}
+        >
+          <ChevronsUpDown className="h-4 w-4 mr-2" /> Exploded
+        </DropdownMenuCheckboxItem>
+        {levelDisplayMode === 'exploded' && (
+          <div className="px-2 pb-1.5 pt-1 flex items-center gap-2 text-xs">
+            <span className="text-zinc-500">Gap (m)</span>
+            <input
+              type="number"
+              min={0}
+              max={100}
+              step={0.5}
+              value={explodedGap}
+              onChange={(e) => {
+                // Guard non-finite — clearing the field or typing
+                // a stray "e" would yield NaN, which the offset
+                // math would silently propagate. The slice setter
+                // also clamps to [0, 100] for the range guard.
+                const next = e.currentTarget.valueAsNumber;
+                if (Number.isFinite(next)) setExplodedGap(next);
+              }}
+              className="w-16 px-1.5 py-0.5 border border-zinc-300 dark:border-zinc-700
+                bg-white dark:bg-zinc-950 text-xs font-mono rounded
+                focus:outline-none focus:ring-1 focus:ring-purple-500"
+            />
+          </div>
+        )}
+        <DropdownMenuCheckboxItem
+          checked={levelDisplayMode === 'solo'}
+          onCheckedChange={() => setLevelDisplayMode('solo')}
+        >
+          <SquareStack className="h-4 w-4 mr-2" /> Solo
+        </DropdownMenuCheckboxItem>
+        {levelDisplayMode === 'solo' && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel className="text-[10px] uppercase tracking-wide">Storey</DropdownMenuLabel>
+            {availableStoreys.map((storey) => (
+              <DropdownMenuItem
+                key={`${storey.modelId}-${storey.expressId}`}
+                onClick={() => setSoloStorey({ modelId: storey.modelId, expressId: storey.expressId })}
+                className={cn(
+                  soloStorey?.modelId === storey.modelId &&
+                    soloStorey?.expressId === storey.expressId &&
+                    'bg-purple-100 dark:bg-purple-950/40',
+                )}
+              >
+                <Building2 className="h-4 w-4 mr-2" />
+                {storey.name}
+                <span className="ml-auto text-[10px] opacity-60">{storey.elevation.toFixed(1)}m</span>
+              </DropdownMenuItem>
+            ))}
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * Toolbar pair for Undo / Redo. Drives `MutationSlice.undo` /
+ * `redo` for the active model (the active model is the only one
+ * the user is actively editing; multi-model undo would need a
+ * separate UX). Disabled when the active model's stack is empty.
+ *
+ * Keyboard shortcuts (Ctrl/Cmd+Z and Ctrl/Cmd+Shift+Z) are wired
+ * in `useKeyboardShortcuts`.
+ */
+function UndoRedoButtons() {
+  const activeModelId = useViewerStore((s) => s.activeModelId);
+  const undoStacks = useViewerStore((s) => s.undoStacks);
+  const redoStacks = useViewerStore((s) => s.redoStacks);
+  const undo = useViewerStore((s) => s.undo);
+  const redo = useViewerStore((s) => s.redo);
+
+  const canUndo = activeModelId !== null && (undoStacks.get(activeModelId)?.length ?? 0) > 0;
+  const canRedo = activeModelId !== null && (redoStacks.get(activeModelId)?.length ?? 0) > 0;
+
+  return (
+    <>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            disabled={!canUndo}
+            onClick={(e) => {
+              (e.currentTarget as HTMLButtonElement).blur();
+              if (activeModelId) undo(activeModelId);
+            }}
+            aria-label="Undo"
+          >
+            <Undo2 className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          Undo <span className="ml-2 text-xs opacity-60">⌘Z</span>
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            disabled={!canRedo}
+            onClick={(e) => {
+              (e.currentTarget as HTMLButtonElement).blur();
+              if (activeModelId) redo(activeModelId);
+            }}
+            aria-label="Redo"
+          >
+            <Redo2 className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          Redo <span className="ml-2 text-xs opacity-60">⌘⇧Z</span>
+        </TooltipContent>
+      </Tooltip>
+    </>
+  );
+}
+
 // #region FIX: Move ActionButton OUTSIDE MainToolbar to prevent recreation on every render
 interface ActionButtonProps {
   icon: React.ElementType;
@@ -301,6 +494,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 editEnabled = useViewerStore((state) => state.editEnabled);
+  const toggleEditEnabled = useViewerStore((state) => state.toggleEditEnabled);
   const selectedEntityId = useViewerStore((state) => state.selectedEntityId);
   const hideEntities = useViewerStore((state) => state.hideEntities);
   const error = useViewerStore((state) => state.error);
@@ -570,7 +765,7 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     setScriptPanelVisible,
   ]);
 
-  const handleToggleRightPanel = useCallback((panel: 'bcf' | 'ids' | 'lens') => {
+  const handleToggleRightPanel = useCallback((panel: 'bcf' | 'ids' | 'lens' | 'addElement') => {
     if (activeAnalysisExtension?.placement !== 'bottom') {
       closeActiveAnalysisExtension();
     }
@@ -584,20 +779,30 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     const nextBcfVisible = panel === 'bcf' ? !bcfPanelVisible : false;
     const nextIdsVisible = panel === 'ids' ? !idsPanelVisible : false;
     const nextLensVisible = panel === 'lens' ? !lensPanelVisible : false;
+    const isAddElementActive = activeTool === 'addElement';
+    const nextAddElementActive = panel === 'addElement' ? !isAddElementActive : false;
 
     setBcfPanelVisible(nextBcfVisible);
     setIdsPanelVisible(nextIdsVisible);
     setLensPanelVisible(nextLensVisible);
 
-    if (nextBcfVisible || nextIdsVisible || nextLensVisible) {
+    if (panel === 'addElement') {
+      setActiveTool(nextAddElementActive ? 'addElement' : 'select');
+    } else if (isAddElementActive) {
+      setActiveTool('select');
+    }
+
+    if (nextBcfVisible || nextIdsVisible || nextLensVisible || nextAddElementActive) {
       setRightPanelCollapsed(false);
     }
   }, [
     activeAnalysisExtension?.placement,
+    activeTool,
     bcfPanelVisible,
     idsPanelVisible,
     lensPanelVisible,
     requireDesktopFeature,
+    setActiveTool,
     setBcfPanelVisible,
     setIdsPanelVisible,
     setLensPanelVisible,
@@ -631,10 +836,18 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     setBcfPanelVisible(false);
     setIdsPanelVisible(false);
     setLensPanelVisible(false);
+    // The right slot is single-tenant: when an analysis extension takes
+    // it over, the AddElement tool must release it too, otherwise its 3D
+    // click handler keeps placing elements behind the extension panel.
+    if (activeTool === 'addElement') {
+      setActiveTool('select');
+    }
     setRightPanelCollapsed(false);
   }, [
+    activeTool,
     analysisExtensionState.activeId,
     analysisExtensionState.extensions,
+    setActiveTool,
     setBcfPanelVisible,
     setGanttPanelVisible,
     setIdsPanelVisible,
@@ -652,9 +865,11 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     if (bcfPanelVisible) panels.add('bcf');
     if (idsPanelVisible) panels.add('ids');
     if (lensPanelVisible) panels.add('lens');
+    if (activeTool === 'addElement') panels.add('addElement');
     if (analysisExtensionState.activeId) panels.add(analysisExtensionState.activeId);
     return panels;
   }, [
+    activeTool,
     analysisExtensionState.activeId,
     bcfPanelVisible,
     ganttPanelVisible,
@@ -673,29 +888,10 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
     if (activeWorkspacePanels.has('bcf')) return 'BCF Issues';
     if (activeWorkspacePanels.has('ids')) return 'IDS Validation';
     if (activeWorkspacePanels.has('lens')) return 'Lens Rules';
+    if (activeWorkspacePanels.has('addElement')) return 'Add Element';
     return activeAnalysisExtension?.label ?? 'Analysis';
   }, [activeAnalysisExtension?.label, activeWorkspacePanels]);
 
-  const handleExportGLB = useCallback(() => {
-    if (!requireDesktopFeature('exports', 'Exports')) return;
-    if (!geometryResult) return;
-    try {
-      const exporter = new GLTFExporter(geometryResult);
-      const glb = exporter.exportGLB({ includeMetadata: true });
-      const blob = new Blob([new Uint8Array(glb)], { type: 'model/gltf-binary' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = 'model.glb';
-      a.click();
-      URL.revokeObjectURL(url);
-      toast.success(`Exported GLB (${(blob.size / 1024).toFixed(0)} KB)`);
-    } catch (err) {
-      console.error('Export failed:', err);
-      toast.error(`GLB export failed: ${err instanceof Error ? err.message : 'Unknown error'}`);
-    }
-  }, [geometryResult, requireDesktopFeature]);
-
   const handleScreenshot = useCallback(() => {
     if (!requireDesktopFeature('exports', 'Exports')) return;
     const canvas = document.querySelector('canvas');
@@ -888,10 +1084,21 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             </DropdownMenuItem>
           )}
           <DropdownMenuSeparator />
-          <DropdownMenuItem onClick={handleExportGLB}>
-            <Download className="h-4 w-4 mr-2" />
-            Export GLB (3D Model)
-          </DropdownMenuItem>
+          {hasDesktopFeatureAccess(desktopEntitlement, 'exports') ? (
+            <GLBExportDialog
+              trigger={
+                <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
+                  <Download className="h-4 w-4 mr-2" />
+                  Export GLB (3D Model)
+                </DropdownMenuItem>
+              }
+            />
+          ) : (
+            <DropdownMenuItem onClick={() => promptDesktopUpgrade('Exports')}>
+              <Download className="h-4 w-4 mr-2" />
+              Export GLB (3D Model)
+            </DropdownMenuItem>
+          )}
           <DropdownMenuSeparator />
           <DropdownMenuSub>
             <DropdownMenuSubTrigger disabled={!ifcDataStore}>
@@ -1028,6 +1235,13 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
             <Palette className="h-4 w-4 mr-2" />
             Lens Rules
           </DropdownMenuCheckboxItem>
+          <DropdownMenuCheckboxItem
+            checked={activeWorkspacePanels.has('addElement')}
+            onCheckedChange={() => handleToggleRightPanel('addElement')}
+          >
+            <PackagePlus className="h-4 w-4 mr-2" />
+            Add Element
+          </DropdownMenuCheckboxItem>
           {rightAnalysisExtensions.length > 0 && (
             <>
               <DropdownMenuSeparator />
@@ -1078,6 +1292,50 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
       <ToolButton tool="select" icon={MousePointer2} label="Select" shortcut="V" activeTool={activeTool} onToolChange={setActiveTool} />
       <ToolButton tool="walk" icon={PersonStanding} label="Walk Mode" shortcut="C" activeTool={activeTool} onToolChange={setActiveTool} />
 
+      {/* ── Edit Mode pill ──
+          Single global switch that unlocks every authoring affordance
+          (inline property/attribute editors in the Properties panel,
+          the add-element draw tools, georeference placement, and
+          future geometry manipulators). Off by default — viewer-only
+          users never see edit chrome. Press E to toggle.
+          See `uiSlice.editEnabled`. */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant={editEnabled ? 'default' : 'ghost'}
+            size="icon-sm"
+            aria-label={editEnabled ? 'Exit edit mode' : 'Enter edit mode'}
+            aria-pressed={editEnabled}
+            onClick={(e) => {
+              (e.currentTarget as HTMLButtonElement).blur();
+              toggleEditEnabled();
+            }}
+            className={cn(editEnabled && 'bg-purple-600 text-white hover:bg-purple-700')}
+          >
+            <PenLine className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {editEnabled ? 'Exit Edit Mode' : 'Edit Mode'} <span className="opacity-50">E</span>
+        </TooltipContent>
+      </Tooltip>
+
+      {/* Undo / Redo — always visible (any authoring op pushes a
+          mutation; the buttons read disabled when the active
+          model's undo stack is empty). Pinned next to Edit so the
+          user has a one-click recovery for any change. */}
+      <UndoRedoButtons />
+
+      {/* Draw / modify gestures live in the existing Add Element
+          panel (right-side `AddElementPanel`, opened via the Add
+          Element button) and in the contextual Geometry edit card
+          inside the Properties panel — splitting a selected wall,
+          duplicating, rotating, etc. all happen there. Keeping the
+          toolbar minimal: just the Edit mode switch + the
+          navigation tools. Per-element-type draw pills duplicated
+          the AddElement panel and added clutter. */}
+      {/* (no draw pills here — by design) */}
+
       <Separator orientation="vertical" className="h-6 mx-1" />
 
       {/* ── Measurement & Section ── */}
@@ -1121,6 +1379,11 @@ export function MainToolbar({ onShowShortcuts }: MainToolbarProps = {} as MainTo
         </DropdownMenu>
       )}
 
+      {/* Level display mode (Stacked / Exploded / Solo). Only
+          surfaces when the active model has at least 2 storeys —
+          single-storey models have nothing useful to show. */}
+      {availableStoreys.length >= 2 && <LevelDisplayDropdown availableStoreys={availableStoreys} />}
+
       <Separator orientation="vertical" className="h-6 mx-1" />
 
       {/* ── Basket Presentation ── */}

package/src/components/viewer/PropertiesPanel.tsx

@@ -23,6 +23,7 @@ import {
 } from 'lucide-react';
 import { Badge } from '@/components/ui/badge';
 import { EditToolbar } from './PropertyEditor';
+import { GeometryEditCard } from './GeometryEditCard';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -191,8 +192,12 @@ export function PropertiesPanel() {
   const [nativeDetails, setNativeDetails] = useState<import('@/store/types').NativeMetadataEntityDetails | null>(null);
   const [nativeDetailsState, setNativeDetailsState] = useState<'idle' | 'loading' | 'error'>('idle');
 
-  // Edit mode toggle - allows inline property editing
-  const [editMode, setEditMode] = useState(false);
+  // Inline property editing is gated by the global edit-mode pill in
+  // the main toolbar (see `uiSlice.editEnabled`). Reading it from the
+  // store keeps every edit affordance — properties, attributes,
+  // geometry manipulators, georeference placement, add-element draw
+  // tools — behind a single switch.
+  const editMode = useViewerStore((s) => s.editEnabled);
 
   useEffect(() => {
     if (!selectedEntity || !model?.nativeMetadata) {
@@ -922,11 +927,12 @@ export function PropertiesPanel() {
 
   const isNativeLazySelection = Boolean(selectedEntity && model?.nativeMetadata);
 
-  useEffect(() => {
-    if (isNativeLazySelection && editMode) {
-      setEditMode(false);
-    }
-  }, [isNativeLazySelection, editMode]);
+  // Native-lazy entities (server-streamed without full STEP data) can
+  // never be edited; the per-row editors below self-guard via
+  // `enableEditing={editMode && !isNativeLazySelection}`. The old
+  // panel-local `editMode` would flip itself off when a native-lazy
+  // entity was selected; now that the flag is global it stays on, and
+  // the field-level guards do the work.
 
   const nativeSpatialInfo = useMemo(() => {
     if (!nativeDetails?.spatial?.storeyName) return null;
@@ -1191,22 +1197,6 @@ export function PropertiesPanel() {
                 {selectedEntityId && isEntityVisible(selectedEntityId) ? 'Hide' : 'Show'}
               </TooltipContent>
             </Tooltip>
-            {/* Edit mode toggle */}
-            {!isNativeLazySelection && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant={editMode ? 'default' : 'ghost'}
-                    size="icon-xs"
-                    className={`rounded-none ${editMode ? 'bg-purple-600 hover:bg-purple-700 text-white' : 'hover:bg-zinc-200 dark:hover:bg-zinc-700'}`}
-                    onClick={() => setEditMode(!editMode)}
-                  >
-                    <PenLine className="h-3.5 w-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>{editMode ? 'Exit Edit Mode' : 'Edit Properties'}</TooltipContent>
-              </Tooltip>
-            )}
           </div>
         </div>
 
@@ -1465,14 +1455,21 @@ export function PropertiesPanel() {
             )}
             {/* Edit toolbar - only shown when edit mode is active */}
             {editMode && selectedEntity && !isNativeLazySelection && (
-              <EditToolbar
-                modelId={selectedEntity.modelId}
-                entityId={selectedEntity.expressId}
-                entityType={entityType}
-                existingPsets={renderedMergedProperties.map(p => p.name)}
-                existingQtos={renderedQuantities.map(q => q.name)}
-                schemaVersion={activeDataStore?.schemaVersion}
-              />
+              <>
+                <GeometryEditCard
+                  modelId={selectedEntity.modelId}
+                  entityId={selectedEntity.expressId}
+                  entityLabel={entityType ? `${entityType} #${selectedEntity.expressId}` : `#${selectedEntity.expressId}`}
+                />
+                <EditToolbar
+                  modelId={selectedEntity.modelId}
+                  entityId={selectedEntity.expressId}
+                  entityType={entityType}
+                  existingPsets={renderedMergedProperties.map(p => p.name)}
+                  existingQtos={renderedQuantities.map(q => q.name)}
+                  schemaVersion={activeDataStore?.schemaVersion}
+                />
+              </>
             )}
             {renderedMergedProperties.length === 0
               && renderedClassifications.length === 0

package/src/components/viewer/StatusBar.tsx

@@ -176,6 +176,18 @@ export function StatusBar() {
         <Separator orientation="vertical" className="h-3.5" />
 
         <span className="opacity-60">v{__APP_VERSION__}</span>
+
+        <Separator orientation="vertical" className="h-3.5" />
+
+        <a
+          href="https://ifclite.dev"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="opacity-60 hover:opacity-100 hover:text-primary transition-opacity"
+          aria-label="Visit ifclite.dev — about, docs, and packages"
+        >
+          ifclite.dev →
+        </a>
       </div>
     </div>
   );

package/src/components/viewer/ToolOverlays.tsx

@@ -10,6 +10,10 @@ import { useViewerStore } from '@/store';
 import { MeasureOverlay } from './tools/MeasurePanel';
 import { SectionOverlay } from './tools/SectionPanel';
 import { AddElementOverlay } from './tools/AddElementOverlay';
+import { GizmoOverlay } from './tools/GizmoOverlay';
+import { WallEndpointOverlay } from './tools/WallEndpointOverlay';
+import { SplitOverlay } from './tools/SplitOverlay';
+import { SplitNumericInput } from './tools/SplitNumericInput';
 
 export function ToolOverlays() {
   const activeTool = useViewerStore((s) => s.activeTool);
@@ -26,5 +30,37 @@ export function ToolOverlays() {
     return <AddElementOverlay />;
   }
 
+  if (activeTool === 'split') {
+    // SplitOverlay renders the SVG preview (perpendicular guide /
+    // slab outline / ghost cut line). SplitNumericInput renders
+    // the floating numeric panel next to the cursor for precise
+    // single-click element splits (wall / beam / column / member).
+    // The two are siblings rather than nested so the SVG layer
+    // stays pointer-events-none while the numeric input is
+    // interactive.
+    return (
+      <>
+        <SplitOverlay />
+        <SplitNumericInput />
+      </>
+    );
+  }
+
+  // Select tool: surface the move gizmo + wall-endpoint handles when
+  // edit mode is on. Both overlays self-gate (return null when their
+  // conditions aren't met) so always-rendering them here is safe.
+  // Wall handles render on top of the gizmo so a wall selection
+  // gets both axis arrows for translate AND endpoint drag handles
+  // for resize — they don't overlap visually (gizmo at bbox center,
+  // handles at start/end).
+  if (activeTool === 'select') {
+    return (
+      <>
+        <GizmoOverlay />
+        <WallEndpointOverlay />
+      </>
+    );
+  }
+
   return null;
 }

package/src/components/viewer/ViewerLayout.tsx

@@ -47,6 +47,33 @@ export function ViewerLayout() {
   useDuplicateShortcut();
   const shortcutsDialog = useKeyboardShortcutsDialog();
 
+  // Auto-load a model from ?model=<URL>. Used by the landing-page iframe to drop a
+  // sample IFC into the viewer on first mount. Same-origin or CORS-friendly URLs only.
+  const { addModel: autoloadAddModel } = useIfc();
+  const autoloadDoneRef = useRef(false);
+  useEffect(() => {
+    if (autoloadDoneRef.current) return;
+    const params = new URLSearchParams(window.location.search);
+    const modelUrl = params.get('model');
+    if (!modelUrl) return;
+    autoloadDoneRef.current = true;
+    (async () => {
+      try {
+        const res = await fetch(modelUrl);
+        if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+        const blob = await res.blob();
+        const filename = (() => {
+          try { return new URL(modelUrl, window.location.href).pathname.split('/').pop() || 'model.ifc'; }
+          catch { return 'model.ifc'; }
+        })();
+        const file = new File([blob], filename, { type: blob.type || 'application/x-step' });
+        await autoloadAddModel(file);
+      } catch (err) {
+        console.error('[viewer] autoload from ?model=… failed:', err);
+      }
+    })();
+  }, [autoloadAddModel]);
+
   // Command palette state
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false);