---

## Planner
Date-indexed planning board — a week, month or custom-range grid
whose cells hold YOUR domain content (meals, shifts, bookings, content slots)
via a generic `cell` snippet. Buckets `items` by calendar day, then handles
navigation, ISO week numbers, keyboard a11y and a responsive column→stack
layout. For timed appointments, multi-day spans or recurrence use `Calendar`
instead.

**Import:** `import { Planner } from '@urbicon-ui/blocks';`

### Examples
```svelte
<Planner view="week" items={entries} getDate={(e) => e.date}
sort={(a, b) => MEAL_ORDER[a.mealType] - MEAL_ORDER[b.mealType]}
bind:value={referenceDate} onNavigate={(_, range) => loadWeek(range.start)}>
{#snippet cell({ items, isoDate })}
{#each items as entry (entry.id)}
<MealCard {entry} />
{/each}
<Button variant="ghost" size="sm" onclick={() => openAdd(isoDate)}>Add meal</Button>
{/snippet}
</Planner>
```

### Variants
- variant: bordered, default, ghost (default: default)
- size: lg, md, sm (default: md)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| getDate | `(item: T) => Date | string` | yes |  | Map an item to its calendar day. Return a `Date`, or a local date string (`'2026-06-16'`) taken verbatim — never UTC-parsed, so a plain date never shifts across timezones. A date-*time* string is bucketed by its written date part too; if your value is a UTC instant whose local day matters (`'…T23:00:00Z'`), return `new Date(value)` so the local timezone applies. Required. |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| ...PlannerVariants | `VariantProps` | no |  | Styling variants from PlannerVariants |
| animated | `boolean` | no | true | Slide-transition the grid on navigate (respects reduced-motion). |
| cell | `Snippet<[PlannerCellContext<T>]>` | no |  | Render a day's content — the core of the API. Receives bucketed `items: T[]`. Called for **every** day, including empty ones (`items: []`) — unless an `empty` snippet is given, which then handles empty days instead. Put an "add" affordance here to keep it available on empty days. |
| class | `string` | no |  | Extra classes merged onto the root element. |
| dayHeader | `Snippet<[PlannerDayContext]>` | no |  | Customise each weekday/column header. |
| disabled | `boolean` | no | false | Disable navigation and selection. |
| empty | `Snippet<[PlannerCellContext<T>]>` | no |  | Placeholder rendered **instead of** `cell` for days with no items. Omit it to let `cell` render empty days too. |
| header | `Snippet<[PlannerHeaderContext]>` | no |  | Replace the default toolbar (prev/next/today/title/week). |
| highlightToday | `boolean` | no | true | Visually mark today's cell. |
| highlightWeekend | `boolean` | no | false | Tint Saturday/Sunday cells. |
| items | `T[]` | no |  | The items to lay out. Each is bucketed onto a day via . |
| locale | `string` | no | 'de-DE' | BCP 47 locale for the title and weekday names. |
| onDateSelect | `(date: Date) => void` | no |  | Fires when a day cell is activated (click / Enter / Space). |
| onNavigate | `(date: Date, range: PlannerRange) => void` | no |  | Fires after navigation. Receives the new reference date and visible range — load data here. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Planner: {...} }}>`. |
| rangeEnd | `Date` | no |  | End of the window for `view="range"`. |
| rangeStart | `Date` | no |  | Start of the window for `view="range"`. |
| selectedDate | `Date` | no |  | The active highlighted day. Supports `bind:selectedDate`. |
| showWeekNumber | `boolean` | no | false | Show the ISO week-number column on the left. |
| size | `'sm' | 'md' | 'lg'` | no | 'md' | Density of the grid and header. |
| slotClasses | `Partial<Record<PlannerSlots, string>>` | no |  | Per-slot class overrides merged with tv() styles. Slots: base | header | headerTitle | nav | navButton | grid | weekdayHeader | weekday | weekNumber | week | cell | cellHeader | cellWeekday | cellDate | cellItems | empty |
| sort | `(a: T, b: T) => number` | no |  | Comparator for items within a day cell (e.g. by meal type or start label). |
| swipeable | `boolean` | no | true | Enable horizontal swipe-to-navigate on touch. |
| unstyled | `boolean` | no | false | Remove all default tv() classes — only user-provided classes apply. |
| value | `Date` | no | today | Reference date the view is anchored on. Supports `bind:value`. |
| variant | `'default' | 'bordered' | 'ghost'` | no | 'default' | Visual style variant for the Planner component |
| view | `PlannerView` | no | 'week' | View property for the Planner component |
| weekStartsOn | `0 | 1 | 2 | 3 | 4 | 5 | 6` | no | 1 | First day of the week (0=Sun … 6=Sat). |

Inherited from:
- Omit<PlannerVariants, 'view'> (omit-pattern)
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)