Home — Bento

Recreate the "Home — Bento" screen in React Native using LumioUI.

Goal: Personal home screen with your working day drawn as a half dial and a countdown to the next event. Below it, a grid of tiles in different sizes covers weather, steps, spending, focus and reading. Match the reference implementation's layout, behavior, and motion exactly — this is a production screen, not a mockup.

## Setup

Fastest path — install the screen plus its component deps:

```bash
npx @lumioui/cli add pro/core-home-bento
```

Or pull just the components: `npx @lumioui/cli add animated-number avatar avatar-group glass icon pro/meter-bar progress-ring pro/sparkline pro/streak-counter text pro/weather-card`

Native packages:
- react-native-reanimated@*
- react-native-safe-area-context@*
- react-native-svg@*

Stack assumptions: Expo SDK 54 / RN 0.81, Reanimated 4, NativeWind v4, TypeScript strict, Expo Go compatible.

## Components — how, where, when

### `animated-number` — Number that moves to each new value as a calm count-up or a roll where only the changed digits turn, set in type or in dot-matrix LEDs whose dots switch on in place. Screen readers announce just the final value, not every step.
- `<AnimatedNumber>` ×3

### `avatar` — Circular profile image with fallback initials and a presence dot. An optional mode shows presence on the photo itself, bright when online and faded when away or offline.
- `<Avatar>` ×1

### `avatar-group` — Overlapping stack of avatars with a cut-out ring around each face and a +N count for the rest. When someone joins, the others slide over to make room and the count updates in place.
- `<AvatarGroup>` ×1

### `glass` — Glass surface for cards and controls: system glass on newer iOS, real refraction on the web and a frosted look elsewhere. Light can gather under your finger, and panes merge on newer iOS and the web.
- `<Glass>` ×2

### `icon` — Icon set drawn on one consistent grid, sized and coloured from your theme. The heart, star and bookmark can fill in place inside their outline, then fade back out.
- `<Icon>` ×2

### `meter-bar` — Segmented bar for storage, budgets and allocation, with a legend. Segments fill in turn and glide to new sizes, and anything past the limit turns red.
- `<MeterBar>` ×1

### `progress-ring` — Circular progress ring with a bright bead on its leading edge. Reaching 100% brightens the ring and briefly turns any centre figure into a check; an indeterminate mode laps the track.
- `<ProgressRing>` ×1

### `sparkline` — Small trend line with an end dot that draws itself in and tints up or down. New data reshapes the line smoothly, and it can follow your finger with a cursor so your app shows the value.
- `<Sparkline>` ×1

### `streak-counter` — Streak counter with a friendly flame that grows with the streak, plus this week’s day dots. Extending the streak lights the flame up, and it rests grey until today’s goal is done.
- `<StreakFlame>` ×1

### `text` — Themed type scale from caption to display that follows light and dark mode. Includes a pull-quote style with an accent rule and a quieter dimmed tone for secondary text.
- `<Text>` ×25

### `weather-card` — Weather card with current conditions, an hourly strip and daily ranges. Pick an hour and the temperature rolls to match, and in its sky style the whole card shifts from day to night.
- `<WeatherIcon>` ×1

## Conventions (non-negotiable)

- Styling via NativeWind `className` with semantic tokens only: `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-secondary`, `bg-muted`, `text-muted-foreground`, `bg-accent`, `bg-destructive`, `border-border`. Hard-coded colors only inside media overlays (`text-white`, `bg-black/N`).
- Motion via the token presets from `@lumioui/core` (`spring.press`, `spring.surface`, `spring.glide`, `timing.fast`, `timing.slow`, …) — no bespoke spring configs or durations.
- Gate transform motion behind `useReducedMotion()`; keep opacity/color feedback, drop travel and overshoot.
- Haptics via `useHaptic()`: `light` on press, `selection` on toggle/select, `warning` on invalid input. Never import expo-haptics directly.
- Press feedback via `usePressAnimation()` (~0.97 scale), not `activeOpacity` tricks.
- a11y: `accessibilityRole` + `accessibilityLabel` on every control, touch targets ≥44pt.
- Entrance choreography: staggered `Mount` wrappers (delay 0/60/120…) so regions land in sequence instead of popping in at once.
- Wrap the screen in `SafeAreaView`; keep dark mode working via the semantic tokens.

## Deliverable

One file: `screens/core/home-bento.tsx` exporting HomeBentoScreen. Preserve the props interface — the host app wires the callbacks (navigation, submit handlers) through them.

## Reference implementation

This is a LumioUI Pro item: its source is not published in the docs. Install it with a Pro license key
(set `LUMIO_LICENSE_KEY`; keys are on lumioui.com/account) and read the installed file as the reference:

```bash
npx @lumioui/cli add pro/core-home-bento
```

The source lands at `screens/core/home-bento.tsx`.

Screen: https://lumioui.com/screens/core-home-bento