feature: sk-react-toolkit holds the server helpers, web components and Vite font plugin shared by manage-ui and sql-query-webui.

web/Card.tsx

@@ -0,0 +1,17 @@
+import { Box, Paper, Typography } from '@mui/material'
+
+/** A centered panel with a title and a message, for states before the application can render. */
+export default function Card(props: { title: string; message: string }) {
+  return (
+    <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', justifyContent: 'center', p: 3 }}>
+      <Paper sx={{ maxWidth: 480, p: 3 }}>
+        <Typography variant="h6" sx={{ mb: 1 }}>
+          {props.title}
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ whiteSpace: 'pre-line' }}>
+          {props.message}
+        </Typography>
+      </Paper>
+    </Box>
+  )
+}