feat(ui): Grid columns 1-12 plus responsive object form

[ssilvius]

Summary

Brings Grid's React/Astro variants up to parity with the Web Component (which already supports cols=12) and adds a responsive columns API. Surfaced by dogfooding @rafters/mail's marketing landing in shingle#59, where the 8-cell modules grid needed 12 columns and the footer/hero needed responsive breakpoint variants.

API additions

• gridColumnClasses extended to 7-12
• gridColSpanClasses extended to 5-12
• New ResponsiveColumns type: number | 'auto' | { base?, sm?, md?, lg?, xl?, '2xl'? }
• resolveColumnsClasses(cols) helper produces the class string
• columnsResolvesToAuto(cols) keeps the existing auto-fit fallback intact
• Grid.tsx and grid.astro both accept the new ResponsiveColumns for columns
• Grid.Item (React) and grid-item.astro accept colSpan 1-12

Example

<Grid columns={{ base: 2, md: 4 }}>
  ...
</Grid>

emits grid-cols-2 md:grid-cols-4.

Tests

10 new cases in grid.classes.test.ts covering:

• Column 1-12 + auto
• Span 1-12
• Single-value resolution (numeric, 'auto')
• Base + breakpoint composition
• Auto-fallback detection

All 65 grid tests pass; full preflight clean.

Notes

gridResponsiveColumnClasses contains 5 per-breakpoint maps (60 literal class strings). Tailwind v4's JIT scanner needs literal strings — generating them via template literals would make them invisible to the toolchain.

Test plan

• pnpm --filter=@rafters/ui test grid — 65/65 pass
• pnpm preflight — clean
• In a consuming site, <Grid columns={12}> emits grid-cols-12
• In a consuming site, <Grid columns={{ base: 2, md: 4 }}> emits grid-cols-2 md:grid-cols-4
• <Grid.Item colSpan={8}> works
• Existing <Grid columns={3}> callers unchanged
• <Grid columns="auto"> still triggers sm:grid-cols-2 lg:grid-cols-3 fallback