website refactor

apps/website/components/dashboard/DashboardShell.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+
+interface DashboardShellProps {
+  children: React.ReactNode;
+  rail?: React.ReactNode;
+  controlBar?: React.ReactNode;
+}
+
+/**
+ * DashboardShell
+ * 
+ * The primary layout container for the Telemetry Workspace.
+ * Orchestrates the sidebar rail, top control bar, and main content area.
+ * Uses UI primitives to comply with architectural constraints.
+ */
+export function DashboardShell({ children, rail, controlBar }: DashboardShellProps) {
+  return (
+    <Box display="flex" h="screen" overflow="hidden" bg="base-black" color="white">
+      {rail && (
+        <Box as="aside" w="16" flexShrink={0} borderRight bg="surface-charcoal" borderColor="var(--color-outline)">
+          {rail}
+        </Box>
+      )}
+      <Box display="flex" flexGrow={1} flexDirection="col" overflow="hidden">
+        {controlBar && (
+          <Box as="header" h="14" borderBottom bg="surface-charcoal" borderColor="var(--color-outline)">
+            {controlBar}
+          </Box>
+        )}
+        <Box as="main" flexGrow={1} overflow="auto" p={6}>
+          <Box maxWidth="7xl" mx="auto" display="flex" flexDirection="col" gap={6}>
+            {children}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}