chore: starter template

packages/components/src/PageHeader.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Box, Group, Stack, Text, Title } from '@mantine/core'
+
+export interface PageHeaderProps {
+  /** Page title. Pass an i18n string from the app (m.foo()). */
+  title: React.ReactNode
+  /** Optional one-line description under the title. */
+  description?: React.ReactNode
+  /** Right-aligned actions (buttons, menus). */
+  actions?: React.ReactNode
+}
+
+// The single shared page header every screen uses: a title, optional
+// description, and a right-aligned action slot. Keeps headers consistent across
+// pages — compose it, don't hand-roll a per-page header.
+export function PageHeader({ title, description, actions }: PageHeaderProps) {
+  return (
+    <Group justify="space-between" align="flex-end" wrap="nowrap" mb="xl">
+      <Stack gap={4} style={{ minWidth: 0 }}>
+        <Title order={1} fz={26} fw={680} style={{ letterSpacing: '-0.03em', lineHeight: 1.1 }}>
+          {title}
+        </Title>
+        {description ? (
+          <Text c="dimmed" size="sm" style={{ lineHeight: 1.5 }}>
+            {description}
+          </Text>
+        ) : null}
+      </Stack>
+      {actions ? <Box style={{ flexShrink: 0 }}>{actions}</Box> : null}
+    </Group>
+  )
+}