initial: mirror of @fn_library from fn_registry

75 components + DESIGN_SYSTEM.md + sync script.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

components/dashboard_layout.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { SimpleGrid, Paper, Text } from '@mantine/core'
+
+interface DashboardWidget {
+  id: string
+  title?: string
+  span?: 1 | 2 | 3 | 4
+  rowSpan?: 1 | 2
+  content: React.ReactNode
+}
+
+interface DashboardLayoutProps {
+  widgets: DashboardWidget[]
+  columns?: 1 | 2 | 3 | 4
+  gap?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const gapMap = { sm: 'xs', md: 'md', lg: 'lg' } as const
+
+export function dashboardLayout({
+  widgets,
+  columns = 4,
+  gap = 'md',
+}: DashboardLayoutProps): React.ReactElement {
+  return (
+    <SimpleGrid
+      cols={{ base: 1, md: Math.min(columns, 2), lg: columns }}
+      spacing={gapMap[gap]}
+    >
+      {widgets.map((widget) => (
+        <Paper
+          key={widget.id}
+          p="md"
+          withBorder
+          shadow="xs"
+          radius="md"
+          style={{
+            gridColumn: widget.span && widget.span > 1 ? `span ${widget.span}` : undefined,
+            gridRow: widget.rowSpan === 2 ? 'span 2' : undefined,
+          }}
+        >
+          {widget.title && (
+            <Text size="sm" fw={500} c="dimmed" mb="sm">{widget.title}</Text>
+          )}
+          {widget.content}
+        </Paper>
+      ))}
+    </SimpleGrid>
+  )
+}
+
+export type { DashboardWidget, DashboardLayoutProps }