@ifc-lite/viewer 1.19.1 → 1.21.0

package/src/components/viewer/PropertiesPanel.tsx

@@ -11,6 +11,7 @@ import {
   Eye,
   Building2,
   Layers,
+  Layers2,
   FileText,
   Calculator,
   Tag,
@@ -20,6 +21,7 @@ import {
   PenLine,
   Crosshair,
 } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
 import { EditToolbar } from './PropertyEditor';
 import { Button } from '@/components/ui/button';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -134,6 +136,10 @@ export function PropertiesPanel() {
   const cameraCallbacks = useViewerStore((s) => s.cameraCallbacks);
   const toggleEntityVisibility = useViewerStore((s) => s.toggleEntityVisibility);
   const isEntityVisible = useViewerStore((s) => s.isEntityVisible);
+  // Issue #540: surface a small "Layers merged" badge on walls when
+  // the user has the merge-layers load setting active so they
+  // understand the displayed solid is the aggregated representation.
+  const mergeLayersActive = useViewerStore((s) => s.mergeLayers);
   const { query, ifcDataStore, geometryResult, models, getQueryForModel } = useIfc();
 
   // Get model-aware query based on selectedEntity
@@ -1108,9 +1114,33 @@ export function PropertiesPanel() {
             <Building2 className="h-5 w-5 text-zinc-700 dark:text-zinc-300" />
           </div>
           <div className="flex-1 min-w-0 pt-0.5">
-            <h3 className="font-bold text-sm truncate uppercase tracking-tight text-zinc-900 dark:text-zinc-100">
-              {entityName || `${entityType}`}
-            </h3>
+            <div className="flex items-start gap-2">
+              <h3 className="font-bold text-sm truncate uppercase tracking-tight text-zinc-900 dark:text-zinc-100 min-w-0">
+                {entityName || `${entityType}`}
+              </h3>
+              {/* Issue #540: indicate that the wall solid the user is
+                  looking at represents aggregated multilayer parts. We
+                  over-trigger on any IfcWall* class instead of probing
+                  the aggregation graph — the chip is cheap and
+                  informative, and walls that aren't actually layered
+                  simply confirm the user's selection is the parent. */}
+              {mergeLayersActive && entityType?.toLowerCase().startsWith('ifcwall') && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Badge
+                      variant="secondary"
+                      className="shrink-0 rounded-sm px-1.5 py-0 text-[9px] font-semibold uppercase tracking-wider gap-1 leading-none h-[18px] mt-0.5"
+                    >
+                      <Layers2 className="h-2.5 w-2.5" />
+                      Layers merged
+                    </Badge>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Multilayer wall parts have been merged into the parent solid.
+                  </TooltipContent>
+                </Tooltip>
+              )}
+            </div>
             <p className="text-xs font-mono text-zinc-500 dark:text-zinc-400">{entityType}</p>
             {/* Show associated type entity for occurrences */}
             {!renderedIsTypeEntity && renderedTypeProperties && (
@@ -1309,6 +1339,7 @@ export function PropertiesPanel() {
                 coordinateInfo={(model?.geometryResult ?? geometryResult)?.coordinateInfo}
                 geometryResult={model?.geometryResult ?? geometryResult}
                 lengthUnitScale={lengthUnitScale}
+                storeyElevations={activeDataStore?.spatialHierarchy?.storeyElevations}
               />
             </CollapsibleContent>
           </Collapsible>
@@ -1342,12 +1373,12 @@ export function PropertiesPanel() {
                       modelId={selectedEntity.modelId}
                       entityId={selectedEntity.expressId}
                       attrName={attr.name}
-                      currentValue={attr.value}
+                      currentValue={String(attr.value)}
                     />
                   ) : (
                     <div className="overflow-x-auto scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-700 min-w-0">
-                      <span className="font-medium whitespace-nowrap" title={attr.value}>
-                        {attr.value}
+                      <span className="font-medium whitespace-nowrap" title={String(attr.value)}>
+                        {String(attr.value)}
                       </span>
                     </div>
                   )}

package/src/components/viewer/RectSelectionOverlay.tsx

@@ -0,0 +1,48 @@
+/* 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/. */
+
+/**
+ * Visual overlay for the GPU rectangle-select drag (Ctrl/⌘ + LMB
+ * over the canvas in select mode). Renders an SVG outline whenever
+ * `rect` is non-null; the parent supplies / clears the prop in step
+ * with the mouse handler.
+ */
+
+export interface RectSelectionRect {
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+}
+
+export interface RectSelectionOverlayProps {
+  rect: RectSelectionRect | null;
+}
+
+export function RectSelectionOverlay({ rect }: RectSelectionOverlayProps) {
+  if (!rect) return null;
+  const left = Math.min(rect.x0, rect.x1);
+  const top = Math.min(rect.y0, rect.y1);
+  const width = Math.abs(rect.x1 - rect.x0);
+  const height = Math.abs(rect.y1 - rect.y0);
+  if (width < 1 || height < 1) return null;
+  return (
+    <svg
+      className="absolute inset-0 pointer-events-none"
+      style={{ width: '100%', height: '100%' }}
+      aria-hidden="true"
+    >
+      <rect
+        x={left}
+        y={top}
+        width={width}
+        height={height}
+        fill="rgba(20, 184, 166, 0.10)"
+        stroke="rgb(20, 184, 166)"
+        strokeWidth={1}
+        strokeDasharray="4 3"
+      />
+    </svg>
+  );
+}

package/src/components/viewer/StatusBar.tsx

@@ -15,6 +15,7 @@ export function StatusBar() {
   const progress = useViewerStore((s) => s.progress);
   const error = useViewerStore((s) => s.error);
   const selectedStoreys = useViewerStore((s) => s.selectedStoreys);
+  const activeStreamCanceller = useViewerStore((s) => s.activeStreamCanceller);
   const webgpu = useWebGPU();
 
   const [fps, setFps] = useState(60);
@@ -108,6 +109,19 @@ export function StatusBar() {
         ) : (
           <span>Ready</span>
         )}
+        {/* Cancel button — only visible while a long-running stream
+            (LAS/LAZ/PLY/PCD/E57) is in flight. The loader hooks
+            register/clear the canceller around `await ingest.done`. */}
+        {activeStreamCanceller && (
+          <button
+            type="button"
+            onClick={() => activeStreamCanceller()}
+            className="px-2 py-0.5 rounded border border-destructive/40 text-destructive text-[10px] uppercase tracking-wider hover:bg-destructive hover:text-destructive-foreground transition-colors"
+            title="Cancel the active point cloud stream"
+          >
+            Cancel
+          </button>
+        )}
       </div>
 
       {/* Center: Model Stats */}

package/src/components/viewer/ViewerLayout.tsx

@@ -2,11 +2,12 @@
  * 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, useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore, type PointerEvent as ReactPointerEvent, type ReactNode } 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 { MobileToolbar } from './MobileToolbar';
 import { HierarchyPanel } from './HierarchyPanel';
 import { PropertiesPanel } from './PropertiesPanel';
 import { AddElementPanel } from './AddElementPanel';
@@ -14,6 +15,7 @@ import { StatusBar } from './StatusBar';
 import { ViewportContainer } from './ViewportContainer';
 import { KeyboardShortcutsDialog, useKeyboardShortcutsDialog } from './KeyboardShortcutsDialog';
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
+import { useIfc } from '@/hooks/useIfc';
 import { useViewerStore } from '@/store';
 import { EntityContextMenu } from './EntityContextMenu';
 import { useDuplicateShortcut } from './useDuplicateShortcut';
@@ -176,10 +178,22 @@ export function ViewerLayout() {
     cleanupRef.current = cleanup;
   }, [bottomHeight]);
 
-  // Detect mobile viewport
+  // Track the gap between the layout viewport (innerHeight) and the visual viewport.
+  // On iOS Safari with bottom URL bar, dvh/innerHeight INCLUDES the URL bar area,
+  // so anything at `bottom: 0` lands behind it. visualViewport.height excludes
+  // the URL bar overlay, giving us the real visible bottom.
+  const bottomViewportInset = useVisualViewportBottomInset();
+
+  // Hide mobile floating buttons when the empty-state "Load IFC" card is showing.
+  const { models, geometryResult } = useIfc();
+  const hasModelsLoaded = models.size > 0 || ((geometryResult?.meshes?.length ?? 0) > 0);
+
+  // Detect mobile viewport — use both width check AND touch capability
   useEffect(() => {
     const checkMobile = () => {
-      const mobile = window.innerWidth < 768;
+      const narrowScreen = window.innerWidth < 768;
+      const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+      const mobile = narrowScreen || (hasTouchScreen && window.innerWidth < 1024);
       setIsMobile(mobile);
       // Auto-collapse panels on mobile
       if (mobile) {
@@ -202,7 +216,7 @@ export function ViewerLayout() {
 
   return (
     <TooltipProvider delayDuration={300}>
-      <div className="flex flex-col h-screen w-screen overflow-hidden bg-background text-foreground">
+      <div className="flex flex-col h-screen h-[100dvh] w-screen overflow-hidden bg-background text-foreground">
         {/* Keyboard Shortcuts Dialog */}
         <KeyboardShortcutsDialog open={shortcutsDialog.open} onClose={shortcutsDialog.close} />
 
@@ -212,9 +226,9 @@ export function ViewerLayout() {
         <CommandPalette open={commandPaletteOpen} onOpenChange={setCommandPaletteOpen} />
         <SearchModal />
 
-        {/* Main Toolbar */}
-        <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />
-        <DesktopEntitlementBanner />
+        {/* Main Toolbar — use compact MobileToolbar on mobile */}
+        {isMobile ? <MobileToolbar /> : <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />}
+        {!isMobile && <DesktopEntitlementBanner />}
 
         {/* Main Content Area - Desktop Layout */}
         {!isMobile && (
@@ -309,112 +323,291 @@ export function ViewerLayout() {
 
         {/* Main Content Area - Mobile Layout */}
         {isMobile && (
-          <div className="flex-1 min-h-0 relative">
+          <div className="flex-1 min-h-0 relative overflow-hidden">
             {/* Full-screen Viewport */}
             <div className="h-full w-full">
               <ViewportContainer />
             </div>
 
+            {/* Backdrop overlay when sheet is open */}
+            {(!leftPanelCollapsed || !rightPanelCollapsed) && (
+              <div
+                className="absolute inset-0 bg-black/40 z-30 animate-in fade-in duration-200"
+                onClick={() => {
+                  setLeftPanelCollapsed(true);
+                  setRightPanelCollapsed(true);
+                }}
+              />
+            )}
+
             {/* Mobile Bottom Sheet - Hierarchy */}
             {!leftPanelCollapsed && (
-              <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">Hierarchy</span>
-                  <button
-                    className="p-1 hover:bg-muted rounded"
-                    onClick={() => setLeftPanelCollapsed(true)}
-                  >
-                    <span className="sr-only">Close</span>
-                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                </div>
-                <div className="h-[calc(50vh-48px)] overflow-auto">
-                  <HierarchyPanel />
-                </div>
-              </div>
+              <MobileBottomSheet
+                title="Hierarchy"
+                bottomInset={bottomViewportInset}
+                onClose={() => setLeftPanelCollapsed(true)}
+              >
+                <HierarchyPanel />
+              </MobileBottomSheet>
             )}
 
             {/* Mobile Bottom Sheet - Properties, BCF, IDS, or Lists */}
             {!rightPanelCollapsed && (
-              <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">
-                    {activeAnalysisExtension ? activeAnalysisExtension.label : ganttPanelVisible ? 'Schedule' : scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Inspector'}
-                  </span>
-                  <button
-                    className="p-1 hover:bg-muted rounded"
-                    onClick={() => {
-                      setRightPanelCollapsed(true);
-                      if (scriptPanelVisible) setScriptPanelVisible(false);
-                      if (listPanelVisible) setListPanelVisible(false);
-                      if (ganttPanelVisible) setGanttPanelVisible(false);
-                      if (bcfPanelVisible) setBcfPanelVisible(false);
-                      if (lensPanelVisible) setLensPanelVisible(false);
-                      if (idsPanelVisible) setIdsPanelVisible(false);
-                      if (activeAnalysisExtension) closeActiveAnalysisExtension();
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                  </button>
-                </div>
-                <div className="h-[calc(50vh-48px)] overflow-auto">
-                  {activeBottomAnalysisExtension ? (
-                    activeBottomAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
-                  ) : activeRightAnalysisExtension ? (
-                    activeRightAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
-                  ) : ganttPanelVisible ? (
-                    <GanttPanel onClose={() => setGanttPanelVisible(false)} />
-                  ) : scriptPanelVisible ? (
-                    <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
-                  ) : listPanelVisible ? (
-                    <ListPanel onClose={() => setListPanelVisible(false)} />
-                  ) : activeTool === 'addElement' ? (
-                    <AddElementPanel onClose={() => setActiveTool('select')} />
-                  ) : lensPanelVisible ? (
-                    <LensPanel onClose={() => setLensPanelVisible(false)} />
-                  ) : idsPanelVisible ? (
-                    <IDSPanel onClose={() => setIdsPanelVisible(false)} />
-                  ) : bcfPanelVisible ? (
-                    <BCFPanel onClose={() => setBcfPanelVisible(false)} />
-                  ) : (
-                    <PropertiesPanel />
-                  )}
-                </div>
-              </div>
-            )}
-
-            {/* Mobile Action Buttons */}
-            <div className="absolute bottom-4 left-4 right-4 flex justify-center gap-2 z-30">
-              <button
-                className="px-4 py-2 bg-primary text-primary-foreground rounded-full shadow-lg text-sm font-medium"
-                onClick={() => {
+              <MobileBottomSheet
+                title={activeAnalysisExtension ? activeAnalysisExtension.label : ganttPanelVisible ? 'Schedule' : scriptPanelVisible ? 'Script' : listPanelVisible ? 'Lists' : activeTool === 'addElement' ? 'Add element' : lensPanelVisible ? 'Lens' : idsPanelVisible ? 'IDS Validation' : bcfPanelVisible ? 'BCF Issues' : 'Properties'}
+                bottomInset={bottomViewportInset}
+                onClose={() => {
                   setRightPanelCollapsed(true);
-                  setLeftPanelCollapsed(!leftPanelCollapsed);
-                }}
-              >
-                Hierarchy
-              </button>
-              <button
-                className="px-4 py-2 bg-primary text-primary-foreground rounded-full shadow-lg text-sm font-medium"
-                onClick={() => {
-                  setLeftPanelCollapsed(true);
-                  setRightPanelCollapsed(!rightPanelCollapsed);
+                  if (scriptPanelVisible) setScriptPanelVisible(false);
+                  if (listPanelVisible) setListPanelVisible(false);
+                  if (ganttPanelVisible) setGanttPanelVisible(false);
+                  if (bcfPanelVisible) setBcfPanelVisible(false);
+                  if (lensPanelVisible) setLensPanelVisible(false);
+                  if (idsPanelVisible) setIdsPanelVisible(false);
+                  if (activeAnalysisExtension) closeActiveAnalysisExtension();
+                  if (activeTool === 'addElement') setActiveTool('select');
                 }}
               >
-                Inspector
-              </button>
-            </div>
+                {activeBottomAnalysisExtension ? (
+                  activeBottomAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                ) : activeRightAnalysisExtension ? (
+                  activeRightAnalysisExtension.renderPanel({ onClose: closeActiveAnalysisExtension })
+                ) : ganttPanelVisible ? (
+                  <GanttPanel onClose={() => setGanttPanelVisible(false)} />
+                ) : scriptPanelVisible ? (
+                  <ScriptPanel onClose={() => setScriptPanelVisible(false)} />
+                ) : listPanelVisible ? (
+                  <ListPanel onClose={() => setListPanelVisible(false)} />
+                ) : activeTool === 'addElement' ? (
+                  <AddElementPanel onClose={() => setActiveTool('select')} />
+                ) : lensPanelVisible ? (
+                  <LensPanel onClose={() => setLensPanelVisible(false)} />
+                ) : idsPanelVisible ? (
+                  <IDSPanel onClose={() => setIdsPanelVisible(false)} />
+                ) : bcfPanelVisible ? (
+                  <BCFPanel onClose={() => setBcfPanelVisible(false)} />
+                ) : (
+                  <PropertiesPanel />
+                )}
+              </MobileBottomSheet>
+            )}
+
+            {/* Mobile Floating Buttons — top-left, brutalist vocabulary (tight radii, visible
+                borders, uppercase caption) matching panel headers across the app.
+                Hidden in the empty state so the "Load IFC" card stays unobstructed. */}
+            {leftPanelCollapsed && rightPanelCollapsed && hasModelsLoaded && (
+              <div className="absolute top-4 left-4 flex flex-col gap-2.5 z-20">
+                <button
+                  className="flex flex-col items-center gap-1 group touch-manipulation"
+                  onClick={() => {
+                    setRightPanelCollapsed(true);
+                    setLeftPanelCollapsed(false);
+                  }}
+                  aria-label="Open Hierarchy"
+                >
+                  <span className="grid place-items-center min-h-[44px] min-w-[44px] bg-background/90 backdrop-blur-sm border border-border rounded-md group-active:bg-foreground group-active:text-background transition-colors">
+                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h10M4 18h7" /></svg>
+                  </span>
+                  <span className="text-[9px] font-bold uppercase tracking-wider text-muted-foreground leading-none">Hierarchy</span>
+                </button>
+                <button
+                  className="flex flex-col items-center gap-1 group touch-manipulation"
+                  onClick={() => {
+                    setLeftPanelCollapsed(true);
+                    setRightPanelCollapsed(false);
+                  }}
+                  aria-label="Open Properties"
+                >
+                  <span className="grid place-items-center min-h-[44px] min-w-[44px] bg-background/90 backdrop-blur-sm border border-border rounded-md group-active:bg-foreground group-active:text-background transition-colors">
+                    <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" /></svg>
+                  </span>
+                  <span className="text-[9px] font-bold uppercase tracking-wider text-muted-foreground leading-none">Properties</span>
+                </button>
+              </div>
+            )}
           </div>
         )}
 
-        {/* Status Bar */}
-        <StatusBar />
+        {/* Status Bar — hidden on mobile to maximize viewport space */}
+        {!isMobile && <StatusBar />}
       </div>
     </TooltipProvider>
   );
 }
+
+/**
+ * Tracks the gap between the layout viewport (innerHeight) and the visual viewport.
+ * Returns the number of pixels the layout viewport extends below the visible area —
+ * i.e. how tall the iOS Safari URL bar overlay (or virtual keyboard) is.
+ */
+function useVisualViewportBottomInset(): number {
+  const [inset, setInset] = useState(0);
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const update = () => {
+      const gap = window.innerHeight - vv.height - vv.offsetTop;
+      setInset(Math.max(0, Math.round(gap)));
+    };
+    update();
+    vv.addEventListener('resize', update);
+    vv.addEventListener('scroll', update);
+    return () => {
+      vv.removeEventListener('resize', update);
+      vv.removeEventListener('scroll', update);
+    };
+  }, []);
+  return inset;
+}
+
+/**
+ * Mobile bottom sheet with three snap states (dismissed / default / expanded).
+ * Drag the handle: down to shrink/dismiss, up to enlarge. Velocity-based flicks
+ * cross thresholds instantly; otherwise the sheet snaps to the closest state.
+ *
+ * `bottomInset` lifts the sheet above the iOS Safari URL bar overlay.
+ */
+function MobileBottomSheet({
+  title,
+  onClose,
+  bottomInset,
+  children,
+}: {
+  title: ReactNode;
+  onClose: () => void;
+  bottomInset: number;
+  children: ReactNode;
+}) {
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const dragRef = useRef<{ startY: number; startT: number; startHeight: number; active: boolean }>({
+    startY: 0,
+    startT: 0,
+    startHeight: 0,
+    active: false,
+  });
+
+  const SPRING = 'height 220ms cubic-bezier(0.2, 0, 0, 1)';
+
+  const getSnapPoints = useCallback(() => {
+    const h = window.visualViewport?.height ?? window.innerHeight;
+    return {
+      collapsed: 0,
+      defaultH: Math.round(h * 0.6),
+      expanded: Math.round(h * 0.92),
+    };
+  }, []);
+
+  const onPointerDown = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
+    if (e.pointerType === 'mouse' && e.button !== 0) return;
+    const sheet = sheetRef.current;
+    if (!sheet) return;
+    dragRef.current = {
+      startY: e.clientY,
+      startT: performance.now(),
+      startHeight: sheet.getBoundingClientRect().height,
+      active: true,
+    };
+    sheet.style.transition = 'none';
+    e.currentTarget.setPointerCapture(e.pointerId);
+  }, []);
+
+  const onPointerMove = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
+    const sheet = sheetRef.current;
+    if (!dragRef.current.active || !sheet) return;
+    const dy = e.clientY - dragRef.current.startY;
+    const { expanded } = getSnapPoints();
+    const newHeight = Math.max(0, Math.min(expanded, dragRef.current.startHeight - dy));
+    sheet.style.height = `${newHeight}px`;
+  }, [getSnapPoints]);
+
+  const onPointerUp = useCallback((e: ReactPointerEvent<HTMLDivElement>) => {
+    const sheet = sheetRef.current;
+    if (!dragRef.current.active || !sheet) return;
+    dragRef.current.active = false;
+    const dy = e.clientY - dragRef.current.startY;
+    const dt = Math.max(1, performance.now() - dragRef.current.startT);
+    // Positive velocity = upward drag (intent: enlarge).
+    const upwardVelocity = -dy / dt; // px/ms
+    const { collapsed, defaultH, expanded } = getSnapPoints();
+    const currentHeight = sheet.getBoundingClientRect().height;
+
+    sheet.style.transition = SPRING;
+
+    const snapTo = (h: number) => {
+      sheet.style.height = `${h}px`;
+    };
+
+    // Velocity-driven decisions take precedence over position.
+    if (upwardVelocity > 0.5) {
+      snapTo(expanded);
+      return;
+    }
+    if (upwardVelocity < -0.5) {
+      // Downward flick: from expanded → default, from default → dismiss.
+      if (dragRef.current.startHeight >= expanded - 8) {
+        snapTo(defaultH);
+      } else {
+        snapTo(collapsed);
+        window.setTimeout(onClose, 200);
+      }
+      return;
+    }
+
+    // Position-based snap: closest of the three targets.
+    const targets: Array<{ state: 'collapsed' | 'default' | 'expanded'; h: number }> = [
+      { state: 'collapsed', h: collapsed },
+      { state: 'default', h: defaultH },
+      { state: 'expanded', h: expanded },
+    ];
+    let closest = targets[1];
+    for (const t of targets) {
+      if (Math.abs(currentHeight - t.h) < Math.abs(currentHeight - closest.h)) closest = t;
+    }
+    snapTo(closest.h);
+    if (closest.state === 'collapsed') window.setTimeout(onClose, 200);
+  }, [getSnapPoints, onClose]);
+
+  // Initial height = default snap. Recompute when viewport changes (URL bar collapses).
+  useEffect(() => {
+    const sheet = sheetRef.current;
+    if (!sheet) return;
+    const { defaultH } = getSnapPoints();
+    sheet.style.height = `${defaultH}px`;
+  }, [getSnapPoints]);
+
+  return (
+    <div
+      ref={sheetRef}
+      className="absolute inset-x-0 flex flex-col bg-background border-t rounded-t-2xl shadow-2xl z-40 animate-in slide-in-from-bottom duration-300"
+      style={{ bottom: `${bottomInset}px` }}
+    >
+      {/* Drag affordance — generously sized for touch */}
+      <div
+        className="grid place-items-center pt-3 pb-2 cursor-grab active:cursor-grabbing touch-none select-none"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onPointerCancel={onPointerUp}
+        role="button"
+        aria-label="Drag to resize or dismiss"
+      >
+        <div className="w-10 h-1.5 rounded-full bg-muted-foreground/40" />
+      </div>
+      <div className="flex items-center justify-between px-4 pb-2 shrink-0">
+        <span className="font-semibold text-sm">{title}</span>
+        <button
+          className="p-2 -mr-2 hover:bg-muted rounded-full active:bg-muted/80 touch-manipulation"
+          onClick={onClose}
+          aria-label="Close"
+        >
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+      <div className="flex-1 min-h-0 overflow-auto overscroll-contain border-t">
+        {children}
+      </div>
+    </div>
+  );
+}