@ifc-lite/viewer 1.0.0

package/src/components/viewer/ToolOverlays.tsx

@@ -0,0 +1,311 @@
+/* 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/. */
+
+/**
+ * Tool-specific overlays for measure and section tools
+ */
+
+import { useCallback } from 'react';
+import { X, Trash2, Ruler, Slice } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useViewerStore, type Measurement } from '@/store';
+
+export function ToolOverlays() {
+  const activeTool = useViewerStore((s) => s.activeTool);
+
+  if (activeTool === 'measure') {
+    return <MeasureOverlay />;
+  }
+
+  if (activeTool === 'section') {
+    return <SectionOverlay />;
+  }
+
+  return null;
+}
+
+function MeasureOverlay() {
+  const measurements = useViewerStore((s) => s.measurements);
+  const pendingMeasurePoint = useViewerStore((s) => s.pendingMeasurePoint);
+  const deleteMeasurement = useViewerStore((s) => s.deleteMeasurement);
+  const clearMeasurements = useViewerStore((s) => s.clearMeasurements);
+  const setActiveTool = useViewerStore((s) => s.setActiveTool);
+
+  const handleClear = useCallback(() => {
+    clearMeasurements();
+  }, [clearMeasurements]);
+
+  const handleClose = useCallback(() => {
+    setActiveTool('select');
+  }, [setActiveTool]);
+
+  const handleDeleteMeasurement = useCallback((id: string) => {
+    deleteMeasurement(id);
+  }, [deleteMeasurement]);
+
+  // Calculate total distance
+  const totalDistance = measurements.reduce((sum, m) => sum + m.distance, 0);
+
+  return (
+    <>
+      {/* Measure Tool Panel */}
+      <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-background/95 backdrop-blur-sm rounded-lg border shadow-lg p-3 min-w-64 z-30">
+        <div className="flex items-center justify-between gap-4 mb-3">
+          <div className="flex items-center gap-2">
+            <Ruler className="h-4 w-4 text-primary" />
+            <span className="font-medium text-sm">Measure Tool</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="icon-sm" onClick={handleClear} title="Clear all">
+              <Trash2 className="h-4 w-4" />
+            </Button>
+            <Button variant="ghost" size="icon-sm" onClick={handleClose} title="Close">
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="text-xs text-muted-foreground mb-3">
+          Click on the model to place measurement points
+        </div>
+
+        {measurements.length > 0 ? (
+          <div className="space-y-2">
+            {measurements.map((m, i) => (
+              <MeasurementItem
+                key={m.id}
+                measurement={m}
+                index={i}
+                onDelete={handleDeleteMeasurement}
+              />
+            ))}
+            {measurements.length > 1 && (
+              <div className="flex items-center justify-between border-t pt-2 mt-2 text-sm font-medium">
+                <span>Total</span>
+                <span className="font-mono">{formatDistance(totalDistance)}</span>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-center py-4 text-muted-foreground text-sm">
+            No measurements yet
+          </div>
+        )}
+      </div>
+
+      {/* Instruction hint */}
+      <div className="absolute bottom-20 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-2 rounded-full text-sm shadow-lg z-30">
+        {pendingMeasurePoint
+          ? 'Click to set end point'
+          : 'Click on model to set start point'}
+      </div>
+
+      {/* Render measurement lines and labels */}
+      <MeasurementOverlays measurements={measurements} pending={pendingMeasurePoint} />
+    </>
+  );
+}
+
+interface MeasurementItemProps {
+  measurement: Measurement;
+  index: number;
+  onDelete: (id: string) => void;
+}
+
+function MeasurementItem({ measurement, index, onDelete }: MeasurementItemProps) {
+  return (
+    <div className="flex items-center justify-between bg-muted/50 rounded px-2 py-1 text-sm">
+      <span className="text-muted-foreground">#{index + 1}</span>
+      <span className="font-mono">{formatDistance(measurement.distance)}</span>
+      <Button
+        variant="ghost"
+        size="icon-sm"
+        className="h-5 w-5"
+        onClick={() => onDelete(measurement.id)}
+      >
+        <X className="h-3 w-3" />
+      </Button>
+    </div>
+  );
+}
+
+interface MeasurementOverlaysProps {
+  measurements: Measurement[];
+  pending: { screenX: number; screenY: number } | null;
+}
+
+function MeasurementOverlays({ measurements, pending }: MeasurementOverlaysProps) {
+  return (
+    <>
+      {/* Completed measurements */}
+      {measurements.map((m) => (
+        <div key={m.id}>
+          {/* Line connecting start and end */}
+          <svg
+            className="absolute inset-0 pointer-events-none z-20"
+            style={{ overflow: 'visible' }}
+          >
+            <line
+              x1={m.start.screenX}
+              y1={m.start.screenY}
+              x2={m.end.screenX}
+              y2={m.end.screenY}
+              stroke="hsl(var(--primary))"
+              strokeWidth="2"
+              strokeDasharray="5,5"
+            />
+            <circle
+              cx={m.start.screenX}
+              cy={m.start.screenY}
+              r="4"
+              fill="hsl(var(--primary))"
+            />
+            <circle
+              cx={m.end.screenX}
+              cy={m.end.screenY}
+              r="4"
+              fill="hsl(var(--primary))"
+            />
+          </svg>
+
+          {/* Distance label at midpoint */}
+          <div
+            className="absolute pointer-events-none z-20 bg-primary text-primary-foreground px-2 py-0.5 rounded text-xs font-mono -translate-x-1/2 -translate-y-1/2"
+            style={{
+              left: (m.start.screenX + m.end.screenX) / 2,
+              top: (m.start.screenY + m.end.screenY) / 2,
+            }}
+          >
+            {formatDistance(m.distance)}
+          </div>
+        </div>
+      ))}
+
+      {/* Pending point */}
+      {pending && (
+        <svg
+          className="absolute inset-0 pointer-events-none z-20"
+          style={{ overflow: 'visible' }}
+        >
+          <circle
+            cx={pending.screenX}
+            cy={pending.screenY}
+            r="6"
+            fill="none"
+            stroke="hsl(var(--primary))"
+            strokeWidth="2"
+          />
+          <circle
+            cx={pending.screenX}
+            cy={pending.screenY}
+            r="3"
+            fill="hsl(var(--primary))"
+          />
+        </svg>
+      )}
+    </>
+  );
+}
+
+function SectionOverlay() {
+  const sectionPlane = useViewerStore((s) => s.sectionPlane);
+  const setSectionPlaneAxis = useViewerStore((s) => s.setSectionPlaneAxis);
+  const setSectionPlanePosition = useViewerStore((s) => s.setSectionPlanePosition);
+  const toggleSectionPlane = useViewerStore((s) => s.toggleSectionPlane);
+  const flipSectionPlane = useViewerStore((s) => s.flipSectionPlane);
+  const setActiveTool = useViewerStore((s) => s.setActiveTool);
+
+  const handleClose = useCallback(() => {
+    setActiveTool('select');
+  }, [setActiveTool]);
+
+  const handleAxisChange = useCallback((axis: 'x' | 'y' | 'z') => {
+    setSectionPlaneAxis(axis);
+  }, [setSectionPlaneAxis]);
+
+  const handlePositionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSectionPlanePosition(Number(e.target.value));
+  }, [setSectionPlanePosition]);
+
+  return (
+    <div className="absolute top-4 left-1/2 -translate-x-1/2 bg-background/95 backdrop-blur-sm rounded-lg border shadow-lg p-3 min-w-72 z-30">
+      <div className="flex items-center justify-between gap-4 mb-3">
+        <div className="flex items-center gap-2">
+          <Slice className="h-4 w-4 text-primary" />
+          <span className="font-medium text-sm">Section Plane</span>
+        </div>
+        <Button variant="ghost" size="icon-sm" onClick={handleClose} title="Close">
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <div className="space-y-4">
+        {/* Axis Selection */}
+        <div>
+          <label className="text-xs text-muted-foreground mb-2 block">Axis</label>
+          <div className="flex gap-1">
+            {(['x', 'y', 'z'] as const).map((axis) => (
+              <Button
+                key={axis}
+                variant={sectionPlane.axis === axis ? 'default' : 'outline'}
+                size="sm"
+                className="flex-1"
+                onClick={() => handleAxisChange(axis)}
+              >
+                {axis.toUpperCase()}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        {/* Position Slider */}
+        <div>
+          <div className="flex items-center justify-between mb-2">
+            <label className="text-xs text-muted-foreground">Position</label>
+            <span className="text-xs font-mono">{sectionPlane.position}%</span>
+          </div>
+          <input
+            type="range"
+            min="0"
+            max="100"
+            value={sectionPlane.position}
+            onChange={handlePositionChange}
+            className="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer accent-primary"
+          />
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2">
+          <Button
+            variant={sectionPlane.enabled ? 'default' : 'outline'}
+            size="sm"
+            className="flex-1"
+            onClick={toggleSectionPlane}
+          >
+            {sectionPlane.enabled ? 'Disable' : 'Enable'}
+          </Button>
+          <Button variant="outline" size="sm" className="flex-1" onClick={flipSectionPlane}>
+            Flip
+          </Button>
+        </div>
+
+        <div className="text-xs text-muted-foreground text-center">
+          Section plane cuts the model along the selected axis
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatDistance(meters: number): string {
+  if (meters < 0.01) {
+    return `${(meters * 1000).toFixed(1)} mm`;
+  } else if (meters < 1) {
+    return `${(meters * 100).toFixed(1)} cm`;
+  } else if (meters < 1000) {
+    return `${meters.toFixed(2)} m`;
+  } else {
+    return `${(meters / 1000).toFixed(2)} km`;
+  }
+}

package/src/components/viewer/ViewCube.tsx

@@ -0,0 +1,195 @@
+/* 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 { useState, useRef, useCallback, useEffect, useImperativeHandle, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface ViewCubeProps {
+  onViewChange?: (view: string) => void;
+  onDrag?: (deltaX: number, deltaY: number) => void;
+  rotationX?: number;
+  rotationY?: number;
+}
+
+export interface ViewCubeRef {
+  updateRotation: (x: number, y: number) => void;
+}
+
+const FACE_VIEWS: Record<string, { rx: number; ry: number }> = {
+  front: { rx: 0, ry: 0 },
+  back: { rx: 0, ry: 180 },
+  top: { rx: -90, ry: 0 },
+  bottom: { rx: 90, ry: 0 },
+  right: { rx: 0, ry: -90 },
+  left: { rx: 0, ry: 90 },
+};
+
+const FACES = [
+  { id: 'front', label: 'FRONT', transform: (h: number) => `translateZ(${h}px)` },
+  { id: 'back', label: 'BACK', transform: (h: number) => `translateZ(${-h}px) rotateY(180deg)` },
+  { id: 'top', label: 'TOP', transform: (h: number) => `translateY(${-h}px) rotateX(90deg)` },
+  { id: 'bottom', label: 'BTM', transform: (h: number) => `translateY(${h}px) rotateX(-90deg)` },
+  { id: 'right', label: 'RIGHT', transform: (h: number) => `translateX(${h}px) rotateY(90deg)` },
+  { id: 'left', label: 'LEFT', transform: (h: number) => `translateX(${-h}px) rotateY(-90deg)` },
+];
+
+export const ViewCube = forwardRef<ViewCubeRef, ViewCubeProps>(
+  ({ onViewChange, onDrag, rotationX = -25, rotationY = 45 }, ref) => {
+    const [hovered, setHovered] = useState<string | null>(null);
+    const [isMouseDown, setIsMouseDown] = useState(false);
+    const dragStartRef = useRef<{ x: number; y: number } | null>(null);
+    const didDragRef = useRef(false);
+    const isDraggingRef = useRef(false);
+    const onDragRef = useRef(onDrag);
+    const rotationContainerRef = useRef<HTMLDivElement>(null);
+    const rafRef = useRef<number | null>(null);
+    const pendingRotationRef = useRef<{ x: number; y: number } | null>(null);
+
+    // Keep onDrag ref up to date
+    useEffect(() => {
+      onDragRef.current = onDrag;
+    }, [onDrag]);
+
+    // Expose updateRotation method via ref for direct updates (no React re-renders)
+    useImperativeHandle(ref, () => ({
+      updateRotation: (x: number, y: number) => {
+        if (!rotationContainerRef.current) return;
+
+        // Store pending rotation
+        pendingRotationRef.current = { x, y };
+
+        // Cancel any pending animation frame
+        if (rafRef.current !== null) {
+          cancelAnimationFrame(rafRef.current);
+        }
+
+        // Batch updates via requestAnimationFrame for smooth 60fps
+        rafRef.current = requestAnimationFrame(() => {
+          if (rotationContainerRef.current && pendingRotationRef.current) {
+            rotationContainerRef.current.style.transform = `rotateX(${pendingRotationRef.current.x}deg) rotateY(${pendingRotationRef.current.y}deg)`;
+            pendingRotationRef.current = null;
+          }
+          rafRef.current = null;
+        });
+      },
+    }), []);
+
+    // Initial rotation from props (only on mount)
+    useEffect(() => {
+      if (rotationContainerRef.current) {
+        rotationContainerRef.current.style.transform = `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;
+      }
+    }, []); // Empty deps - only set initial rotation
+
+    const size = 60;
+    const half = size / 2;
+
+    const handleMouseDown = useCallback((e: React.MouseEvent) => {
+      // Track mouse position for potential drag
+      dragStartRef.current = { x: e.clientX, y: e.clientY };
+      didDragRef.current = false;
+      isDraggingRef.current = false;
+      setIsMouseDown(true);
+    }, []);
+
+    // Document-level mouse handlers
+    useEffect(() => {
+      if (!isMouseDown) {
+        document.body.style.cursor = '';
+        return;
+      }
+
+      const handleDocumentMouseMove = (e: MouseEvent) => {
+        if (!dragStartRef.current) return;
+
+        const deltaX = e.clientX - dragStartRef.current.x;
+        const deltaY = e.clientY - dragStartRef.current.y;
+
+        // Start dragging after threshold (distinguishes from clicks)
+        if (!isDraggingRef.current && (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5)) {
+          isDraggingRef.current = true;
+          didDragRef.current = true;
+          document.body.style.cursor = 'grabbing';
+        }
+
+        if (isDraggingRef.current) {
+          onDragRef.current?.(deltaX * 2, deltaY * 2);
+          dragStartRef.current = { x: e.clientX, y: e.clientY };
+        }
+      };
+
+      const handleDocumentMouseUp = () => {
+        setIsMouseDown(false);
+        isDraggingRef.current = false;
+        dragStartRef.current = null;
+        document.body.style.cursor = '';
+        // Reset didDragRef after a brief delay to allow click to check it
+        setTimeout(() => {
+          didDragRef.current = false;
+        }, 50);
+      };
+
+      document.addEventListener('mousemove', handleDocumentMouseMove);
+      document.addEventListener('mouseup', handleDocumentMouseUp);
+
+      return () => {
+        document.removeEventListener('mousemove', handleDocumentMouseMove);
+        document.removeEventListener('mouseup', handleDocumentMouseUp);
+        document.body.style.cursor = '';
+      };
+    }, [isMouseDown]);
+
+    const handleFaceClick = useCallback((face: string) => {
+      // Only trigger click if we didn't drag
+      if (!didDragRef.current) {
+        onViewChange?.(face);
+      }
+    }, [onViewChange]);
+
+    return (
+      <div
+        className="relative select-none"
+        style={{
+          width: size,
+          height: size,
+          perspective: 200,
+        }}
+        onMouseDown={handleMouseDown}
+      >
+        <div
+          ref={rotationContainerRef}
+          className="relative w-full h-full"
+          style={{
+            transformStyle: 'preserve-3d',
+            transform: `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`,
+          }}
+        >
+          {FACES.map(({ id, label, transform }) => (
+            <button
+              key={id}
+              type="button"
+              className={cn(
+                'absolute w-full h-full flex items-center justify-center text-[10px] font-bold transition-colors cursor-pointer',
+                'bg-card/95 border border-border/50',
+                hovered === id ? 'bg-primary/30 border-primary text-primary' : 'hover:bg-muted'
+              )}
+              style={{
+                transform: transform(half),
+                backfaceVisibility: 'hidden',
+              }}
+              onMouseEnter={() => setHovered(id)}
+              onMouseLeave={() => setHovered(null)}
+              onClick={() => handleFaceClick(id)}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+    );
+  });
+
+ViewCube.displayName = 'ViewCube';
+
+export { FACE_VIEWS };

package/src/components/viewer/ViewerLayout.tsx

@@ -0,0 +1,190 @@
+/* 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 } from 'react';
+import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { MainToolbar } from './MainToolbar';
+import { HierarchyPanel } from './HierarchyPanel';
+import { PropertiesPanel } from './PropertiesPanel';
+import { StatusBar } from './StatusBar';
+import { ViewportContainer } from './ViewportContainer';
+import { KeyboardShortcutsDialog, useKeyboardShortcutsDialog } from './KeyboardShortcutsDialog';
+import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
+import { useViewerStore } from '@/store';
+import { EntityContextMenu } from './EntityContextMenu';
+import { HoverTooltip } from './HoverTooltip';
+import { BoxSelectionOverlay } from './BoxSelectionOverlay';
+
+export function ViewerLayout() {
+  // Initialize keyboard shortcuts
+  useKeyboardShortcuts();
+  const shortcutsDialog = useKeyboardShortcutsDialog();
+
+  // Initialize theme on mount
+  const theme = useViewerStore((s) => s.theme);
+  const isMobile = useViewerStore((s) => s.isMobile);
+  const setIsMobile = useViewerStore((s) => s.setIsMobile);
+  const leftPanelCollapsed = useViewerStore((s) => s.leftPanelCollapsed);
+  const rightPanelCollapsed = useViewerStore((s) => s.rightPanelCollapsed);
+  const setLeftPanelCollapsed = useViewerStore((s) => s.setLeftPanelCollapsed);
+  const setRightPanelCollapsed = useViewerStore((s) => s.setRightPanelCollapsed);
+
+  // Detect mobile viewport
+  useEffect(() => {
+    const checkMobile = () => {
+      const mobile = window.innerWidth < 768;
+      setIsMobile(mobile);
+      // Auto-collapse panels on mobile
+      if (mobile) {
+        setLeftPanelCollapsed(true);
+        setRightPanelCollapsed(true);
+      }
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, [setIsMobile, setLeftPanelCollapsed, setRightPanelCollapsed]);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+  }, [theme]);
+
+  return (
+    <TooltipProvider delayDuration={300}>
+      <div className="flex flex-col h-screen w-screen overflow-hidden bg-background text-foreground">
+        {/* Keyboard Shortcuts Dialog */}
+        <KeyboardShortcutsDialog open={shortcutsDialog.open} onClose={shortcutsDialog.close} />
+
+        {/* Global Overlays */}
+        <EntityContextMenu />
+        <HoverTooltip />
+        <BoxSelectionOverlay />
+
+        {/* Main Toolbar */}
+        <MainToolbar onShowShortcuts={shortcutsDialog.toggle} />
+
+        {/* Main Content Area - Desktop Layout */}
+        {!isMobile && (
+          <PanelGroup orientation="horizontal" className="flex-1 min-h-0">
+            {/* Left Panel - Hierarchy */}
+            <Panel
+              id="left-panel"
+              defaultSize={20}
+              minSize={10}
+              collapsible
+              collapsedSize={0}
+            >
+              <div className="h-full w-full overflow-hidden">
+                <HierarchyPanel />
+              </div>
+            </Panel>
+
+            <PanelResizeHandle className="w-1.5 bg-border hover:bg-primary/50 active:bg-primary/70 transition-colors cursor-col-resize" />
+
+            {/* Center - Viewport */}
+            <Panel id="viewport-panel" defaultSize={60} minSize={30}>
+              <div className="h-full w-full overflow-hidden">
+                <ViewportContainer />
+              </div>
+            </Panel>
+
+            <PanelResizeHandle className="w-1.5 bg-border hover:bg-primary/50 active:bg-primary/70 transition-colors cursor-col-resize" />
+
+            {/* Right Panel - Properties */}
+            <Panel
+              id="right-panel"
+              defaultSize={20}
+              minSize={10}
+              collapsible
+              collapsedSize={0}
+            >
+              <div className="h-full w-full overflow-hidden">
+                <PropertiesPanel />
+              </div>
+            </Panel>
+          </PanelGroup>
+        )}
+
+        {/* Main Content Area - Mobile Layout */}
+        {isMobile && (
+          <div className="flex-1 min-h-0 relative">
+            {/* Full-screen Viewport */}
+            <div className="h-full w-full">
+              <ViewportContainer />
+            </div>
+
+            {/* 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>
+            )}
+
+            {/* Mobile Bottom Sheet - Properties */}
+            {!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">Properties</span>
+                  <button
+                    className="p-1 hover:bg-muted rounded"
+                    onClick={() => setRightPanelCollapsed(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">
+                  <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={() => {
+                  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);
+                }}
+              >
+                Properties
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Status Bar */}
+        <StatusBar />
+      </div>
+    </TooltipProvider>
+  );
+}