svelte-kit-vice/web/routes/blocks/+page.svelte

<script lang="ts">
	// Blocks gallery index — lists the planned catalog (PLAN-blocks.md F2–F4)
	// and links each block's demo as it lands. Composed from the canon only.
	import { Container } from '$uix/eidos/components/container';
	import { Section } from '$uix/eidos/components/section';
	import { Stack } from '$uix/eidos/components/stack';
	import { Group } from '$uix/eidos/components/group';
	import { Wrap } from '$uix/eidos/components/wrap';
	import { Heading } from '$uix/eidos/components/heading';
	import { Text } from '$uix/eidos/components/text';
	import { Badge } from '$uix/eidos/components/badge';
	import { Separator } from '$uix/eidos/components/separator';
	import { BLOCK_CATALOG } from './_lib/catalog';

	const groups = BLOCK_CATALOG;
</script>

<Section>
	<Container>
		<Stack gap={8}>
			<Stack gap={3}>
				<Group gap={3}>
					<Heading level={1}>Blocks</Heading>
					<Badge>under construction</Badge>
				</Group>
				<Text color="muted">
					Named compositions of canon components performing a page function. The catalog below is
					the planned inventory (see docs/process/PLAN-blocks.md); each entry becomes a live demo as
					it lands.
				</Text>
			</Stack>

			{#each groups as group (group.title)}
				<Stack gap={3}>
					<Heading level={2}>{group.title}</Heading>
					<Separator />
					<Wrap gap={2}>
						{#each group.items as item (item.slug)}
							<Badge color={item.shipped ? 'affirm' : 'neutral'}>{item.label}</Badge>
						{/each}
					</Wrap>
				</Stack>
			{/each}
		</Stack>
	</Container>
</Section>