chore: kanban template

design/scratchpads/status-display.tsx

@@ -0,0 +1,95 @@
+// A scratchpad: several real, themed ways to show one thing — here, a deploy's
+// status. Each option is built from @mantine/core, so it carries your theme. The
+// design agent writes files like this; open the Design tab → Scratchpad to compare
+// them on the canvas and pick the one you like.
+import {
+  Alert,
+  Badge,
+  Group,
+  Indicator,
+  Paper,
+  Progress,
+  RingProgress,
+  Stack,
+  Text,
+} from '@mantine/core'
+
+export const title = 'Status display'
+
+export const objects = [
+  {
+    name: 'Status pill',
+    mantine: ['Badge'],
+    render: () => (
+      <Badge color="green" variant="light" size="lg" radius="sm">
+        Live
+      </Badge>
+    ),
+  },
+  {
+    name: 'Progress card',
+    mantine: ['Paper', 'Progress'],
+    render: () => (
+      <Paper withBorder p="md" radius="md" maw={220}>
+        <Stack gap={8}>
+          <Group justify="space-between">
+            <Text size="sm" fw={600}>
+              Deploying
+            </Text>
+            <Text size="xs" c="dimmed">
+              72%
+            </Text>
+          </Group>
+          <Progress value={72} color="blue" radius="xl" />
+        </Stack>
+      </Paper>
+    ),
+  },
+  {
+    name: 'Solid badge',
+    mantine: ['Badge'],
+    render: () => (
+      <Badge color="green" variant="filled" size="lg" radius="sm">
+        Deployed
+      </Badge>
+    ),
+  },
+  {
+    name: 'Progress ring',
+    mantine: ['RingProgress'],
+    render: () => (
+      <RingProgress
+        size={92}
+        thickness={9}
+        roundCaps
+        sections={[{ value: 72, color: 'blue' }]}
+        label={
+          <Text ta="center" size="sm" fw={700}>
+            72%
+          </Text>
+        }
+      />
+    ),
+  },
+  {
+    name: 'Inline dot',
+    mantine: ['Indicator'],
+    render: () => (
+      <Group gap={10}>
+        <Indicator color="green" size={9} processing />
+        <Text size="sm" fw={500}>
+          Running
+        </Text>
+      </Group>
+    ),
+  },
+  {
+    name: 'Tinted banner',
+    mantine: ['Alert'],
+    render: () => (
+      <Alert color="green" radius="md" title="Deployment succeeded" maw={240}>
+        Your changes are live in production.
+      </Alert>
+    ),
+  },
+]