React context module that provides time tracker state and panel visibility controls to the component tree.
## Key Components
| Export | Type | Description |
|--------|------|-------------|
| `TimeTrackerProvider` | Component | Context provider wrapping the time tracker feature; accepts `TimeTrackerData` props plus optional `defaultOpen` |
| `useTimeTracker` | Hook | Consumes context and throws if called outside a provider |
| `useOptionalTimeTracker` | Hook | Consumes context and returns `null` if no provider is present |
| `TimeTrackerProviderProps` | Interface | Props for the provider: `TimeTrackerData` fields, `children`, and `defaultOpen` |
| `TimeTrackerContextValue` | Interface (internal) | Extends `TimeTrackerData` with `isOpen`, `open`, `close`, and `toggle` |
## Usage Example
```typescript
// Wrap your feature tree with the provider
import { TimeTrackerProvider, useTimeTracker } from './time-tracker-context'
function App() {
const data: TimeTrackerData = { /* ...tracker fields */ }
return (
)
}
// Consume in any child component
function TrackerPanel() {
const { isOpen, open, close, toggle } = useTimeTracker()
return (
{isOpen && }
)
}
// Safe consumption where the provider may be absent
function MaybeTracker() {
const tracker = useOptionalTimeTracker()
if (!tracker) return null
return {tracker.isOpen ? 'Tracking…' : 'Idle'}
}
```
## Notes
- The per-second clock tick is intentionally kept in a separate `useTrackerClock` hook rather than in context, preventing global re-renders on every tick.
- `data` spreads from the host's render, so context value identity updates only when the parent re-renders — not on timer ticks.