react-native-roster 0.4.1 → 0.4.2

package/README.md

@@ -1,9 +1,8 @@
 # react-native-roster
 
-**Lanes, layers, and sources on one time axis.**
-
-[![Gallery](https://img.shields.io/badge/▶%20Gallery-lanes%2C%20layers%2C%20and%20sources-4f46e5?style=for-the-badge)](https://simiancraft.github.io/react-native-roster/)
+**Resource timeline and schedule components for React Native and web, with layered intervals, coverage, provenance, and explicit daylight-saving handling.**
 
+[![npm version](https://img.shields.io/npm/v/react-native-roster?color=cb3837&logo=npm)](https://www.npmjs.com/package/react-native-roster)
 [![CI](https://github.com/simiancraft/react-native-roster/actions/workflows/ci.yml/badge.svg)](https://github.com/simiancraft/react-native-roster/actions/workflows/ci.yml)
 [![Coverage](https://img.shields.io/codecov/c/github/simiancraft/react-native-roster?logo=codecov)](https://codecov.io/github/simiancraft/react-native-roster)
 [![Types: included](https://img.shields.io/badge/types-included-3178c6?logo=typescript)](#contract)
@@ -12,32 +11,25 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE)
 [![OpenSSF Scorecard](https://api.securityscorecards.dev/projects/github.com/simiancraft/react-native-roster/badge)](https://securityscorecards.dev/viewer/?uri=github.com/simiancraft/react-native-roster)
 
-A read surface for React Native and web that renders who is on, when, and why.
-Feed it absolute intervals with provenance; press any filled or removed span and
-get back the exact rules, rows, or exclusions that produced it. Daylight-saving
-transitions are drawn honestly: skipped hours are hatched, repeated hours appear
-twice. `Roster` stacks many lanes horizontally; `Schedule` opens one lane as a
-week of wall-clock columns. The core is standard JavaScript plus `Intl`, under
-15 kB, and recurrence expansion is an optional subpath.
-
-It is not a calendar, a booking system, or a drag-to-create editor; you own
-mutations and persistence. If you want an event grid with gestures, an event
-calendar library is the better fit. If you need to explain coverage across two
-hundred people without lying about time zones, this is the one.
-
-- **Provenance on every span.** Intervals and gaps carry `sources`; presses
-  return the winning span's `(kind, id)` list, including the exclusion that
-  removed time.
-- **Honest time.** Elapsed-time roster weeks are 167 or 169 hours wide across a
-  transition; schedule columns hatch skipped hours and draw repeated hours twice.
-- **Layers with roles.** `availability`, `booking`, and `custom` layers stack by
-  z-order; coverage math unions availability, subtracts bookings, and sorts.
-- **Recurrence adapter.** Weekly, daily, and monthly rules with exclusions,
-  caps, and content-keyed caches, kept out of the core.
-- **Zones everywhere.** Input-bearing regions accept component types, singletons accept nodes, and
-  every chrome region takes `style` plus a NativeWind `className` twin.
-- **Virtualized and measured.** Geometry runs only for mounted lanes; CI gates
-  layout, coverage, bundle size, and browser action budgets.
+**Live demo: [explore the gallery](https://simiancraft.github.io/react-native-roster/)
+or [try the showcase](https://simiancraft.github.io/react-native-roster/showcase).**
+
+<!-- HERO GIF PLACEHOLDER: insert a recorded gallery or showcase tour here when available. -->
+
+Give it lanes of absolute intervals and their sources. Get a resource timeline
+across many lanes, or a day-column schedule for one lane, with coverage totals
+and press callbacks that explain exactly which sources produced each span.
+
+**It renders who is on, when, and why.** Press any covered or removed span and
+get back the rules, rows, or exclusions behind it; removed time keeps its
+exclusion sources. Daylight-saving transitions are drawn honestly: skipped hours
+are hatched, repeated hours have separate geometry, and a week containing a
+transition is 167 or 169 hours wide. `Roster` and `Schedule` project the same
+lane data; `useRoster` and `useSchedule` expose their models for custom layouts.
+
+Consumers own creation, dragging, resizing, and persistence. It ships
+virtualized roster lanes, replaceable components, NativeWind chrome, and a small
+standard JavaScript and `Intl` core with a [15 kB size gate](./.size-limit.json).
 
 ## Install
 
@@ -46,19 +38,29 @@ bun add react-native-roster @legendapp/list
 bunx expo install react-native-reanimated --bun
 ```
 
-To try an unreleased checkout instead, pack it with `bun pm pack --destination
-.cache` and `bun add` the printed tarball path. Keep React, React Native, and
-Expo aligned with your SDK; the
-tested demo uses Expo SDK 54, React 19.1, React Native 0.81.5, LegendList
-2.0.19, and Reanimated 3.19.5. Web also needs React DOM and React Native Web.
-Peer ranges are React 18.2+, React Native 0.74+, and LegendList 2+; Reanimated
-is optional for core-only use and required by `Roster`. On Metro before React
-Native 0.79, enable `resolver.unstable_enablePackageExports` so the `/core`,
-`/rrule`, and `/nativewind` subpaths resolve.
+For web, also install React DOM and React Native Web versions compatible with
+your React/Expo setup, plus `bun add @radix-ui/react-popover@^1.1.23`.
+**Radix is required whenever a web bundler resolves the root entry or
+`/nativewind` to the web selection layout, even with selection disabled or only
+`Schedule` imported.** That layout imports Radix unconditionally; the published
+browser remap and Metro's web source resolution both reach it. Native and
+`/core`-only or `/rrule`-only imports do not require Radix.
+
+Peer ranges: React >=18.2, React Native >=0.74, LegendList >=2, Reanimated >=3.19,
+Expo >=51 (optional), NativeWind >=4.1 (optional), and Radix ^1.1.23 (web).
+Reanimated is required by `Roster` and optional for core-only use. Keep React,
+React Native, and Expo aligned with your SDK. The demo uses Expo SDK 54,
+React 19.1, React Native 0.81.5, LegendList 2.0.19, and Reanimated 3.19.5;
+these versions do not establish support for every peer-range combination.
+
+On Metro before React Native 0.79, enable `resolver.unstable_enablePackageExports`
+so the subpaths resolve. Keep one React copy in workspaces.
+`rrule-temporal` and `@js-temporal/polyfill` install as ordinary dependencies;
+only `/rrule` imports them. Import isolation does not reduce installation size.
 
 ## Quick start: static intervals
 
-Twenty lines, no adapter. Give the component a bounded height.
+Give the component a bounded height. No adapter is needed for absolute intervals.
 
 ```tsx
 import { Roster } from 'react-native-roster';
@@ -86,55 +88,17 @@ export function Example() {
 Press the interval to receive its `table / row-one` source. `minuteStep`
 defaults to 60 and accepts any positive divisor of 60; it changes ticks and
 empty-space snapping, never interval boundaries. `rowHeight` defaults to 48 and
-`pxPerMinute` to a minimum of 0.5, growing to fit wider viewports.
+`pxPerMinute` to 0.5, growing to fit wider viewports. Both scale and row height
+must be positive and finite.
 
 ## Quick start: recurring local hours
 
-```tsx
-import { Roster } from 'react-native-roster';
-import type { Lane, WindowSpec } from 'react-native-roster/core';
-import { windowFor } from 'react-native-roster/core';
-import { expandRuleSet } from 'react-native-roster/rrule';
-import type { RuleSet } from 'react-native-roster/rrule';
-
-const spec: WindowSpec = {
-  span: 'week', anchorDate: '2024-01-01', timezone: 'America/Chicago',
-};
-const set: RuleSet = {
-  rules: [{
-    id: 'weekday-hours', kind: 'include', frequency: 'WEEKLY',
-    dtstart: '2024-01-01', byweekday: [0, 1, 2, 3, 4],
-    hourstart: 9, hourend: 17, timezone: 'America/Chicago',
-  }],
-  dates: [{
-    id: 'closed', kind: 'exclude', date: '2024-01-02',
-    timezone: 'America/Chicago', note: 'Closed all day',
-  }],
-};
-const result = expandRuleSet(set, windowFor(spec));
-const lane: Lane = {
-  id: 'one', label: 'Lane one', timezone: 'America/Chicago',
-  complete: result.complete,
-  layers: [{
-    id: 'open', role: 'availability', z: 0, style: { color: '#4f9478' },
-    intervals: result.intervals, gaps: result.gaps,
-  }],
-};
-
-export function RecurringExample() {
-  return <Roster lanes={[lane]} windowSpec={spec}
-    style={{ height: 480, flex: undefined }}
-    onGapPress={(rect) => console.log(rect.sources)} />;
-}
-```
-
-Tuesday is a gap carrying the dated exclusion; the other weekdays carry the
-include rule. Expand once per `windowFor(spec)` in your screen's hook, never
-inside a slot component; content-keyed caches reuse unchanged occurrences. The
-[adapter guide](./docs/adapters.md) covers validation, caps, cache lifetime,
-and mapping tables or feeds without a recurrence dependency;
-[recurrence semantics](./docs/recurrence.md) records the exact anchor, UNTIL,
-COUNT, and BYSETPOS rules.
+Import `expandRuleSet` from `/rrule` to turn daily, weekly, or monthly local
+hours and dated exclusions into intervals and gaps. Expand for `windowFor(spec)`
+in your screen's hook, and carry `result.complete` into `Lane.complete`.
+The [runnable recurring example](./docs/adapters.md#quick-start-recurring-local-hours)
+shows the complete mapping; [recurrence semantics](./docs/recurrence.md) covers
+validation, COUNT, UNTIL, and BYSETPOS. Never expand inside a slot component.
 
 ## Contract
 
@@ -172,58 +136,26 @@ and "Availability may be incomplete"; both are localizable props.
 | `react-native-roster/rrule` | `expandRuleSet`, `envelopeFor`, types, and expansion counters and caches. Uses pinned `rrule-temporal` and `@js-temporal/polyfill`. |
 | `react-native-roster/nativewind` | Registers `Roster` and `Schedule` with NativeWind so their `className` props resolve; re-exports the registered components. |
 
-Root and core never import recurrence dependencies. Public entry aliases retain the
-implementation function identities while keeping CommonJS export overhead within the size gates. Metro selects TypeScript
-source through the `react-native` export condition; other bundlers select
-emitted CommonJS with declarations in `dist/src`. The emit is CommonJS, so
-importing one function from the root costs the whole root bundle; import from
-`/core` for a core-only bundle. Cache keys, counters, and clearing are in
-[caches](./docs/caches.md).
+Root and core never import recurrence dependencies. Metro selects TypeScript
+source; the default condition selects CommonJS, and `types` selects declarations
+in `dist/src`.
+The CommonJS root pulls in the root bundle; use `/core` for core-only consumers.
+
+## Caches
+
+Bump a supplied `lane.version` whenever layers change; otherwise structural layer
+content supplies the key. Treat returned references as read-only. Consumers own
+cache lifetime: clear layout, coverage, and expansion caches when discarding old
+windows. Coverage runs for all lanes; geometry runs for mounted lanes.
+[Cache keys, counters, and clearing](./docs/caches.md) explain target-warm reuse.
 
 ## Core
 
 ### Interval helpers
 
-`unionOf(spans: readonly Window[]): Window[]` merges overlapping or touching
-windows and returns them sorted by start, keeping disjoint windows separate.
-Empty input returns `[]`. Every returned window is a new object; the input array
-and its windows remain untouched. Like `extentOf` and `intersectionOf`, it uses
-end-exclusive epoch milliseconds and throws `RangeError` for non-finite bounds
-or `end <= start`.
-
-Collapse each person's segments with `extentOf`, then use `intersectionOf` to
-find the shared time across those windows. Each extent bridges gaps between
-segments, so the result describes the collapsed windows.
-
-```ts
-import type { Window } from 'react-native-roster/core';
-import { extentOf, intersectionOf } from 'react-native-roster/core';
-
-const people: { name: string; segments: Window[] }[] = [
-  {
-    name: 'Alex',
-    segments: [
-      { start: 1_000, end: 3_000 },
-      { start: 4_000, end: 8_000 },
-    ],
-  },
-  {
-    name: 'Sam',
-    segments: [
-      { start: 2_000, end: 5_000 },
-      { start: 6_000, end: 9_000 },
-    ],
-  },
-];
-
-const windows = people.map((person): Window => {
-  const extent = extentOf(person.segments);
-  if (extent === null) throw new Error(`${person.name} has no segments`);
-  return extent;
-});
-const sharedTime = intersectionOf(windows); // { start: 2_000, end: 8_000 }
-// A null result from intersectionOf means there is no shared time.
-```
+`extentOf`, `intersectionOf`, and `unionOf` operate on end-exclusive absolute
+windows. Extents bridge gaps; unions preserve disjoint spans. See the
+[helper walkthrough](./src/core/README.md#interval-helper-walkthrough).
 
 ## Navigation and interaction
 
@@ -249,327 +181,54 @@ to `byLabel`; `byCoverage({ measure })` sorts by coverage descending.
 
 ## Now line
 
-The optional `now` prop accepts epoch milliseconds or `null` (the default, which
-draws nothing). Pass `now={timestamp}` to draw a vertical 2 px red line across the
-body at the projected instant. Only `window.start <= now < window.end` is visible.
-The caller owns clock updates; Roster starts no timer. `useRoster` exposes `now` and `nowLine`.
-`now` retains the raw instant. `nowLine` (`{ x, now }`) uses the fitted
-`pxPerMinute` scale and is null when `now` is null or outside the window.
-Replace `nowLineComponent` to customize the line using `RosterNowLineInput`
-(`{ x, now }`). The line follows horizontal scrolling; changing `now` does not
-invalidate mounted lanes. The every-zone gallery fixture can toggle a fixed
-instant at the window midpoint.
+Pass controlled `now={timestamp}` to Roster; `null` (the default) draws nothing.
+The caller owns clock updates. Only instants inside the end-exclusive window are visible. Replace `nowLineComponent` to style it; the
+[Roster reference](./src/components/roster/README.md) covers hook and scroll behavior.
 
 ## Roster zones
 
-Props ending in `Component` accept `ComponentType<Input>` and are mounted by React.
-Props ending in `Zone` accept `ReactNode`. Define components at module scope so
-state survives rerenders; hooks and class components are supported. Compose the
-exported default components inside replacements to retain scrolling, geometry,
-or press behavior. Pass `null` to a node slot to suppress its default.
-
-| Slot | Component inputs or node | Default and behavior |
-| --- | --- | --- |
-| `emptyZone` | `ReactNode` | `RosterEmpty`: No lanes. |
-| `cornerZone` | `ReactNode` | `RosterCorner`: nothing; the cell above the labels, `laneLabelWidth` wide. |
-| `laneLabelComponent` | `lane`, `flag`, `complete`, `viewTimezone`, localized labels | `RosterLaneLabel`: label, differing IANA zone badge, and notices. |
-| `headerCellComponent` | `HeaderCellInput` (`tick`) | `RosterHeaderCell`: tick label. |
-| `intervalComponent` | `rect`, `layer`, `lane`, `highlighted` | `RosterInterval`: positioned colored rect, with final inset bounds. |
-| `intervalDetailComponent` | `rect`, `layer`, `lane`, `highlighted`, absolute `start` and `end`, `viewTimezone` | Absent by default; enables selection and fills its details. |
-| `selectionLayout` | `SelectionLayoutProps`: nodes, targetBounds, open, dismissal, host, and shared scroll | `RosterSelectionPopover`: native portal or Radix web popover; replace at runtime. |
-| `gapComponent` | `rect`, `layer`, `lane` | `RosterGap`: no visible content; the row supplies pressable bounds. |
-| `nowLineComponent` | `RosterNowLineInput` (`x`, `now`) | `RosterNowLine`: noninteractive vertical red line across the body. |
-| `gridComponent` | `ticks`, `contentWidth` | `RosterGrid`: one hairline per tick behind every lane. |
-| `headerComponent` | `ticks`, `projection`, `scroll`, `contentWidth`, `headerCellComponent` | `RosterHeader`: frozen header following horizontal offset. |
-| `laneLabelColumnComponent` | `labels`, `projection`, `scroll`, `laneLabelComponent` | `RosterLaneLabelColumn`: frozen labels following vertical offset. |
-| `bodyComponent` | Ordered `lanes`, `window`, `geometryFor`, `projection`, `scroll`, `press`, `ticks`, `viewport`, `contentWidth`, `nowLine`, `nowLineComponent`, highlight and hover, incomplete label, and rect components | `RosterBody`: virtualized lanes. |
-
-`RosterBody` composes `RosterBodyLayout`, which arranges `gridZone`, `listZone`, and optional `overlayZone`
-nodes with scroll wiring, and `RosterLaneList`, which owns LegendList and its
-per-lane callback. The body waits for viewport measurement before mounting the list.
-
-```tsx
-import type { LaneLabelInput } from 'react-native-roster';
-import { Text } from 'react-native';
-
-function LaneLabel({ lane }: LaneLabelInput) {
-  return <Text>{lane.label}</Text>;
-}
-
-<Roster lanes={lanes} windowSpec={windowSpec}
-  laneLabelComponent={LaneLabel} cornerZone={<Text>People</Text>} />
-```
-
-A custom interval component positions at `rect.x/y`, uses `rect.width/height/z`,
-and sets `pointerEvents="none"` so the parent hit-test walk owns presses. Gap
-fillers are already inside positioned pressables. `useRoster` exposes ordered
-lanes, coverage, lane state, ticks, `geometryFor`, shared scrolling, `press`,
-viewport measurement, navigation, and status for fully custom layouts.
-
-Chrome regions take style props: `style`, `headerStyle` (the 40 px header row
-holding the corner and ticks), `laneLabelColumnStyle`, and `bodyStyle`.
-`laneLabelWidth` sizes the corner and label column, default 180. Each style
-prop has a `className` twin; see [NativeWind](#nativewind).
+Props ending in `Component` accept component types; props ending in `Zone`
+accept React nodes. Define slot components at module scope to preserve state.
+Use exported defaults inside replacements to retain geometry and interaction.
+The [slot tables and examples](./docs/customization.md#roster-zones) cover every region.
 
 ### Selection
 
-Add `intervalDetailComponent` to enable pressed-interval details. The press still
-fires `onIntervalPress`; without the component, presses retain no selection.
-`useRoster` owns `selection` and `dismissSelection`.
-Pressing the selected interval again dismisses it; pressing another interval
-switches selection. Cell and gap presses dismiss selection while still firing
-`onCellPress` and `onGapPress`. These rules live in the hook and apply on native
-and web; web outside press and Escape still dismiss.
-Removing the selected lane, layer, or interval bounds clears selection. The private
-reconcileSelection helper matches source identity sets and chooses nearest bounds with
-a total difference of at most 1 ms for projection roundoff.
-
-Native has no intercepting dismissal overlay; body presses reach the hook, and the detail
-card captures its own presses. Web excludes the body wrapper from Radix outside
-dismissal, leaving body presses to the hook while preserving true outside presses and Escape.
-The hook toggles the selected interval closed, switches to another interval, and dismisses
-on cell or gap presses while preserving their callbacks. The body restores horizontal
-and vertical offsets from shared values on remount when selectionLayout changes.
-A mount effect calls the horizontal ScrollView ref's scrollTo without animation;
-native also retains contentOffset. LegendList restores initialScrollOffset through
-its own web mount effect and native initial offset.
-
-Current data and geometry replace old references, including after resizing or sorting. Reconciliation matches the layer id and
-order-insensitive source identities, then chooses the nearest absolute bounds. The sum
-of bound differences must be at most 1 ms. Stored bounds remain the display values.
-
-`selectable?: boolean` belongs only to the hook input, `RosterInput`, and defaults to false.
-It is excluded from `RosterProps`. Hook consumers
-pass `selectable: true` to `useRoster` to retain selection. `intervalDetailComponent`,
-`selectionLayout`, and `portalHost` live on `RosterProps` because the chassis mounts
-the content and layout. The chassis enables selection with
-`selectable: Boolean(intervalDetailComponent)`. Custom chassis mount their layout
-with the returned selection, dismissal, and scroll inputs.
-
-```tsx
-import { Text, View } from 'react-native';
-import { Roster } from 'react-native-roster';
-import type { IntervalDetailInput, Lane } from 'react-native-roster';
-
-function IntervalDetails({ lane, layer, rect, start, end, viewTimezone }: IntervalDetailInput) {
-  const format = new Intl.DateTimeFormat('en-US', { timeZone: viewTimezone, timeStyle: 'short' });
-  return <View style={{ padding: 16, backgroundColor: 'white' }}>
-    <Text>{lane.label}: {layer.label ?? layer.id}</Text>
-    <Text>{format.format(start)} to {format.format(end)}</Text>
-    {rect.sources.map((source) =>
-      <Text key={JSON.stringify([source.kind, source.id])}>
-        {source.label ?? source.id}
-      </Text>)}
-  </View>;
-}
-
-export function SelectionExample({ lanes }: { lanes: Lane[] }) {
-  return <Roster lanes={lanes}
-    windowSpec={{ span: 'day', anchorDate: '2024-01-01', timezone: 'UTC' }}
-    style={{ height: 480, flex: undefined }}
-    intervalDetailComponent={IntervalDetails} />;
-}
-```
-
-Web consumers install `bun add @radix-ui/react-popover`. It is an optional peer
-for native and core-only consumers, and required by the web root entry. Consumers
-resolving the library from source with a web bundler (Vite, Storybook, or Metro web)
-must install it even without enabling selection because `selection-layout.web.tsx`
-is in the module graph. Native and core-only consumers do not need it.
-`RosterSelectionPopover` selects native or web through platform resolution.
-Native mounts a local `PortalHost` and registers `Portal` content; web uses Radix
-for portal placement, outside press, Escape, and collisions. The layout returns focus
-to the previously focused element only after Escape.
-The overlay tracks both scroll offsets with Reanimated shared values, without
-React scroll state. Native clamps details horizontally to the measured viewport,
-flips above when that fits, and uses the top edge when neither vertical placement
-fits. The default native popover waits for viewport measurement and scrolls oversized
-content on both axes within a maximum size of the viewport minus 8 px on each axis.
-Consumers wanting a different presentation supply `selectionLayout`.
-Native also dismisses on hardware back.
-
-`selectionLayout?: ComponentType<SelectionLayoutProps>` is the layout strategy
-naming exception to the `Component` suffix. The chassis mounts it with `anchorZone`
-(the body), `contentZone` (details or null), `targetBounds` (body-content bounds), `open`,
-`onDismiss`, `portalHost`, and `scroll`. The target bounds include the lane offset and
-interval inset. Layout scroll inputs are limited to `x`, `y`, `headerStyle`, and
-`labelStyle`. Render each node once. A consumer inspector
-can arrange the nodes in columns and call `onDismiss` from its close button.
-The [interval-detail gallery route](./demo/app/gallery/interval-detail.tsx)
-switches presentations at runtime.
-
-`portalHost` overrides the native destination name, whose default uses a unique
-per-roster `useId`. Give separate rosters separate override names. The default
-layout owns its host; do not also mount that name at an ancestor. Custom layouts
-can instead target their own ancestor host, using the exported `PortalHost` and
-`Portal`. A store-based portal does not preserve context from the registration
-site; place required providers above the host or re-provide them in the content.
-Selection never enters the lane list's body content key.
-
-Schedule does not yet support selection; it is a later change.
+Add `intervalDetailComponent` for pressed-interval details. Pressing the same
+interval dismisses it; pressing another switches selection. Cell and gap presses
+also dismiss, preserving their callbacks. Web outside press and Escape dismiss.
+Schedule does not support selection. Custom `selectionLayout` implementations
+must follow the [layout and portal contract](./docs/customization.md#selection),
+including unique native host names and provider placement above the host.
 
 ### Consumer data in slot components
 
-For consumer data beyond a slot's Input, mount a React context provider above
-`Roster` and read it with `useContext` in a module-scope slot component. This
-example supplies density and locale while keeping the header cell type stable:
-
-```tsx
-import { createContext, useContext } from 'react';
-import { Text } from 'react-native';
-import type { HeaderCellInput, RosterProps } from 'react-native-roster';
-import { Roster } from 'react-native-roster';
-
-type SlotPreferences = {
-  density: 'compact' | 'comfortable';
-  locale: string;
-};
-
-const SlotPreferencesContext = createContext<SlotPreferences>({
-  density: 'comfortable',
-  locale: 'en-US',
-});
-
-function LocalizedHeaderCell({ tick }: HeaderCellInput) {
-  const { density, locale } = useContext(SlotPreferencesContext);
-  const label = new Intl.DateTimeFormat(locale, {
-    timeZone: 'UTC',
-    ...(tick.kind === 'day'
-      ? { month: 'short', day: 'numeric' }
-      : { hour: 'numeric', minute: '2-digit' }),
-  }).format(tick.time);
-
-  return (
-    <Text numberOfLines={1} style={{ padding: density === 'compact' ? 2 : 6 }}>
-      {label}
-    </Text>
-  );
-}
-
-export function ConsumerRoster({ lanes }: Pick<RosterProps, 'lanes'>) {
-  return (
-    <SlotPreferencesContext.Provider value={{ density: 'compact', locale: 'en-GB' }}>
-      <Roster
-        lanes={lanes}
-        windowSpec={{ span: 'week', anchorDate: '2024-01-01', timezone: 'UTC' }}
-        style={{ height: 480, flex: undefined }}
-        headerCellComponent={LocalizedHeaderCell}
-      />
-    </SlotPreferencesContext.Provider>
-  );
-}
-```
-
-An inline closure or a memoized factory that returns a new component per render
-is not the recommended path. A new interval component type remounts every interval
-and defeats the body's content key. Context supplies changing consumer data while
-preserving the module-scope component type.
+Use context with stable slot types; see the [complete recipe](./docs/customization.md#consumer-data-in-slot-components).
 
 ## Schedule and its zones
 
-```tsx
-import { Schedule } from 'react-native-roster';
-import type { Lane } from 'react-native-roster/core';
-
-export function Week({ lane }: { lane: Lane }) {
-  return <Schedule lane={lane} minuteStep={60}
-    style={{ height: 600, flex: undefined }}
-    windowSpec={{ span: 'week', anchorDate: '2024-01-01', timezone: 'UTC' }}
-    onIntervalPress={(rect) => console.log(rect.sources)} />;
-}
-```
-
-Only day and week specs are accepted. The component measures its width,
-reserves a 48 px gutter, and fits the day columns without horizontal scrolling.
-`pxPerHour` defaults to 48. Chrome takes `style`, `headerStyle`, `gutterStyle`,
-and `daysStyle`, each with a `className` twin.
-
-| Slot | Component inputs or node | Default and behavior |
-| --- | --- | --- |
-| `gutterComponent` | `hours`, `pxPerHour` | `ScheduleGutter`: 24 frozen hour labels. |
-| `gridComponent` | `hours`, `pxPerHour` | `ScheduleGrid`: 24 bordered hour bands behind each day's rects. |
-| `dayHeaderComponent` | `day` | `ScheduleDayHeader`: weekday, localDate, and transition badge. |
-| `skippedDateComponent` | `localDate` | `ScheduleSkippedDate`: zero-width header marker for a wholly skipped date. |
-| `columnComponent` | `day`, `rects`, `gapRects`, `lane`, `highlightSource`, `press`, interval and gap components | `ScheduleColumn`: final rect bounds in layer order. |
-| `transitionComponent` | `day`, `transition`, `y`, `dividerY`, `height`, `width` | `ScheduleTransition`: skipped-time hatch, or repeat divider and again label. |
-| `nowLineComponent` | `y`, `column` | `ScheduleNowLine`: line in the current day's column, updated each minute. |
-| `intervalComponent`, `gapComponent` | Same inputs as Roster | Shared `RosterInterval` and `RosterGap`. |
-| `incompleteComponent` | `lane`, `label` | `ScheduleIncomplete`: notice above the grid when the lane is incomplete. |
+Pass the same lane to `<Schedule lane={lane} windowSpec={spec} />` with a bounded
+height. Schedule accepts day and week specs, fits columns to measured width,
+and reserves a 48 px gutter. `pxPerHour` defaults to 48 and must be positive and
+finite. Its automatic now line updates each minute. See the
+[example and slot table](./docs/customization.md#schedule-zones).
 
 ## NativeWind
 
-`className` is a first-class prop on `Roster` and `Schedule`, alongside `style`.
-Every chrome style prop has a class twin: `className`, `headerClassName`,
-`laneLabelColumnClassName`, and `bodyClassName` on Roster; `className`,
-`headerClassName`, `gutterClassName`, and `daysClassName` on Schedule. A class
-on a region replaces that region's default paint (background and border colors)
-while its structure (size, flex, overflow) stays. This is deliberate: React
-Native Web renders object styles inline, and inline paint would otherwise beat
-any class.
-
-Set up NativeWind 4 as usual (the demo's [babel.config.js](./demo/babel.config.js),
-[metro.config.js](./demo/metro.config.js), [tailwind.config.js](./demo/tailwind.config.js),
-and [global.css](./demo/global.css) are a working reference), add the optional
-peer with `bun add nativewind`, and register the components once at your app
-root:
-
-```tsx
-// app/_layout.tsx
-import '../global.css';
-import 'react-native-roster/nativewind';
-```
-
-```tsx
-import { Roster } from 'react-native-roster';
-
-<Roster
-  lanes={lanes}
-  windowSpec={windowSpec}
-  className="flex-1 rounded-xl bg-background"
-  headerClassName="border-b border-border bg-card"
-  laneLabelColumnClassName="border-r border-border bg-card"
-  laneLabelWidth={220}
-/>
-```
-
-Slot components are ordinary React Native views, so a custom `laneLabelComponent` or
-`intervalComponent` uses `className` on `View` and `Text` directly. Without the
-entry point, class props are ignored and style props still work. The entry
-point is the package's only module with side effects and is listed in
-`sideEffects`. The [showcase route](./demo/app/showcase.tsx) styles every region
-and zone this way in light and dark palettes.
+Install NativeWind >=4.1 and configure it for your app, then import
+`react-native-roster/nativewind` once at the root. Every chrome style prop has a
+`className` twin; classes replace default paint while preserving structure.
+Slot components use `className` on ordinary views. Without registration, class
+props are ignored. [Setup, examples, and demo configuration](./src/nativewind/README.md#setup-and-styling)
+show all regions, including the [showcase route](./demo/app/showcase.tsx).
 
 ## Gallery and platform support
 
-The [Expo gallery](https://simiancraft.github.io/react-native-roster/) is the
-demo; there is no Storybook. Run it locally with `bun install --frozen-lockfile`,
-`bun run build`, and `bun run demo:web` (add `EXPO_OFFLINE=1` in a restricted
-network). The home page lists every fixture route:
-
-- Empty, one, 20, and 200 lanes; inset layers; default and replaced zones.
-- Day, week, and month routes at 15, 30, and 60-minute steps.
-- Full-day gaps, lane flags, equal-z precedence, highlight, coverage sorting,
-  and incomplete expansion.
-- Chicago DST weeks, mixed rule, lane, and view zones, and editable adapter routes.
-- Schedule empty, layered, excluded, spring, fall, Lord Howe, Apia, incomplete,
-  midnight, side-by-side projections, and every zone.
-- The showcase at `/showcase`: twelve generated people across seven zones,
-  weekly hours and exclusions from the recurrence adapter, booked events, day
-  and week spans, sorting, filtering, and a per-person Schedule, styled with
-  NativeWind class props and slot components, with a sun and moon theme toggle.
-  Names, titles, and the organization come from `@faker-js/faker` with a fixed
-  seed; any resemblance to real people is coincidental.
-  Each event compares scheduled time with seeded attendee arrivals and departures.
-  A fixed seeded now separates past, live, and future events; attendees are expected,
-  pending, present, attended, or absent. Present spans extend through now without
-  exposing future departures, including after scheduled end until actual departure.
-  A bottom strip draws the union of attendances over the lighter scheduled block,
-  preserving gaps and overhang. The event detail popover shares a shaded scheduled
-  band across attendance rows. Its footer status line defaults to the attendance
-  legend and scheduled-band explanation; web hover or visible keyboard focus shows
-  row detail, and native taps toggle detail or switch rows. The inspector retains
-  member selection. This feature lives in
-  [demo/components/team-roster](./demo/components/team-roster/README.md).
+The gallery covers lane counts, layer precedence, coverage sorting, provenance,
+DST transitions, editable recurrence, and replaceable components. The showcase
+combines filtering, per-lane schedules, and attendance details. See the
+[fixture catalog and local setup](./demo/components/gallery/README.md#run-the-gallery-and-explore-fixtures)
+and [showcase tour](./demo/components/team-roster/README.md#showcase-tour).
 
 | Platform | Support and evidence |
 | --- | --- |
@@ -585,11 +244,25 @@ Workload W is 200 lanes, one week, two layers, a 24-lane viewport, and
 [committed CI baseline](./test/performance/baseline.json) on GitHub Actions
 ubuntu-latest records target-cold layout of 24 lanes at 2.070 ms and coverage of
 all 200 lanes at 1.063 ms, gated below 16 ms everywhere and within 1.5 times the
-baseline in CI. Size gates hold core under 15 kB and root under 44 kB. Device
+baseline in CI. Minified, uncompressed size gates with peers external hold core under 15 kB and root under 52 kB. Device
 captures and the paired comparison against other libraries are described, not
 yet recorded, in the [performance guide](./docs/performance.md); CI timings are
 not phone frame rates.
 
+## Compared to
+
+| Alternative | Choose it for | What react-native-roster adds to that model |
+| --- | --- | --- |
+| [react-native-calendar-kit](https://howljs.github.io/react-native-calendar-kit/) | Creation/editing gestures and pinch-to-zoom in a React Native calendar. | Layer-role coverage math and exact source sets on covered and removed spans. |
+| [react-native-big-calendar](https://github.com/acro5piano/react-native-big-calendar) | Day, week, and month views of events. | A many-resource timeline and a single-lane schedule over the same layered interval contract. |
+| [FullCalendar's resource timeline](https://fullcalendar.io/docs/timeline-view) | A web resource timeline with [dragging and resizing](https://fullcalendar.io/docs/event-dragging-resizing). | React Native components plus a renderer-free coverage/provenance core and explicit skipped/repeated wall-time geometry. |
+
+These are differences in the supplied models, not claims that an alternative
+cannot be extended. Their linked documentation describes their features; this
+package's [contract](./src/core/types.ts), [coverage](./src/core/coverage.ts), and
+[geometry](./docs/timezones.md) document its side. No relative performance
+comparison has been recorded; see [performance evidence](./docs/performance.md).
+
 ## What this isn't
 
 This is a read surface. Consumers own creation, dragging, resizing,
@@ -616,7 +289,7 @@ publint, size-limit, and Playwright.
 - Area landing pages: [core](./src/core/README.md), [Roster](./src/components/roster/README.md),
   [Schedule](./src/components/schedule/README.md), [layers](./src/components/layers/README.md),
   [primitives](./src/components/primitives/README.md), [rrule adapter](./src/adapters/rrule/README.md),
-  [nativewind](./src/nativewind/README.md), the [gallery](./demo/components/gallery/README.md), and the
+  [nativewind](./src/nativewind/README.md), the [gallery](./demo/components/gallery/README.md), the
   [showcase](./demo/components/team-roster/README.md), and the [theme](./demo/components/theme/README.md);
   [adding an adapter](./docs/adding-an-adapter.md)
   is the contributor recipe.

package/llms.txt

@@ -1,10 +1,9 @@
 # react-native-roster
 
-> React Native read surfaces over layered absolute intervals with provenance.
+> Resource timeline and schedule components for React Native and web, with layered intervals, coverage, provenance, and explicit daylight-saving handling.
 > Roster projects many lanes horizontally; Schedule projects one lane into day
 > columns. The core owns geometry, coverage, axis math, and caches. Adapters own
-> upstream conversion and recurrence. The gallery and integration guides describe
-> the implemented surface; package distribution status is in README.md.
+> upstream conversion and recurrence.
 
 This file is for an agent integrating the package into a consumer app. Follow the
 setup, contract, and cache rules below. You do not need the repository's issues
@@ -13,32 +12,32 @@ this repository. The demo is the working integration example, not a dependency.
 
 ## Setup and first render
 
-Use Bun 1.4.2 and Node 22 for this checkout. Run at repository root:
-
 ```sh
-bun install --ignore-scripts --frozen-lockfile
-bun run build
-bun run demo:web
+bun add react-native-roster @legendapp/list
+bunx expo install react-native-reanimated --bun
 ```
 
-The root install also installs demo dependencies. Use `EXPO_OFFLINE=1 bun run
-demo:web` if Expo cannot write its online dependency-validation cache. To consume from another app,
-`bun add react-native-roster`; for an unreleased checkout, run
-`bun pm pack --destination .cache` here, then `bun add` the actual absolute
-tarball path in your app. Add `@legendapp/list` and install the SDK's
-compatible Reanimated with `bunx expo install react-native-reanimated --bun`.
-Keep React, React Native, and Expo aligned with the app's SDK. The demo uses Expo
-54, React 19.1, RN 0.81.5, LegendList 2.0.19, and Reanimated 3.19.5. NativeWind is
-an optional peer (>=4.1); import react-native-roster/nativewind once at the app
-root to enable className props on Roster and Schedule. Web needs compatible
-React DOM and React Native Web. See demo/babel.config.js for workspace presets.
-
-Peer ranges: React >=18.2, React Native >=0.74, Expo >=51, LegendList >=2.
-Reanimated >=3.19 is optional for core-only installs and required for Roster.
-Tested dependency versions are not proof of every combination in those ranges.
-
-Save this as a screen component, or as demo/app/gallery/readme-example.tsx with
-`export default function Example` for Expo Router, and visit /gallery/readme-example:
+For web, also install React DOM and React Native Web versions compatible with
+your React/Expo setup, plus `bun add @radix-ui/react-popover@^1.1.23`.
+Radix is required whenever a web bundler resolves the root entry or
+`/nativewind` to the web selection layout, even with selection disabled or only
+`Schedule` imported. That layout imports Radix unconditionally; the published
+browser remap and Metro's web source resolution both reach it. Native and
+`/core`-only or `/rrule`-only imports do not require Radix.
+
+Peer ranges: React >=18.2, React Native >=0.74, LegendList >=2, Reanimated >=3.19,
+Expo >=51 (optional), NativeWind >=4.1 (optional), and Radix ^1.1.23 (web).
+Reanimated is required by `Roster` and optional for core-only use. Keep React,
+React Native, and Expo aligned with your SDK. The demo uses Expo SDK 54,
+React 19.1, React Native 0.81.5, LegendList 2.0.19, and Reanimated 3.19.5;
+these versions do not establish support for every peer-range combination.
+
+On Metro before React Native 0.79, enable `resolver.unstable_enablePackageExports`
+so the subpaths resolve. Keep one React copy in workspaces.
+`rrule-temporal` and `@js-temporal/polyfill` install as ordinary dependencies;
+only `/rrule` imports them. Import isolation does not reduce installation size.
+
+Save this as a screen component in your app:
 
 ```tsx
 import { Roster } from 'react-native-roster';
@@ -61,8 +60,8 @@ export function Example() {
 ```
 
 Expect a green 09:00 to 17:00 interval on January 1, 2024. Scroll horizontally to
-see the time range. A bounded viewport is required. Remove the scratch route
-when finished. In a controlled app, own WindowSpec in your screen's hook; update
+see the time range. A bounded viewport is required. In a controlled app, own
+WindowSpec in your screen's hook; update
 it in navigation handlers, and prepare adapter output for windowFor(spec).
 
 ## Vocabulary
@@ -189,7 +188,7 @@ Component props are ComponentType<Input>.
 
 Roster required props: lanes: Lane[], windowSpec: WindowSpec.
 Optional: now (epoch ms or null, default null), minuteStep (60), rowHeight (48),
-pxPerMinute (minimum 0.5, fits viewport),
+pxPerMinute (default 0.5, positive finite, grows to fit viewport),
 sortLanes (byLabel), highlightSource, onNavigate, onIntervalPress, onGapPress,
 onCellPress, onIntervalHover (web only), style, headerStyle, laneLabelColumnStyle,
 bodyStyle, laneLabelWidth (180), neverSetLabel, incompleteLabel, and zones below.
@@ -583,7 +582,7 @@ W: seed 1318, 200 lanes, week, two layers, 24-lane layout batch, 15-minute ticks
 Bun 1.4.0, 2026-09-08T05:18:00Z, commit
 1c4ac0e8580b1d46c043f946aa7ebc1ee316d0fa. Median of 11 target-cold samples after
 five runtime warmups. Each timing must stay below 16 ms; CI also enforces <=1.5x
-its baseline. Size gates: core <15 kB, root <44 kB minified/uncompressed, peers
+its baseline. Size gates: core <15 kB, root <52 kB minified/uncompressed, peers
 external. Phone fps and cold-layout numbers are not yet captured; the paired
 react-big-scheduler comparison is not yet measured. Do not claim relative speed.
 
@@ -591,9 +590,25 @@ The package does not create, drag, resize, persist, or authorize intervals; it
 is not a general calendar. Consumers implement their own interactions. A rule
 editor in the gallery is an integration example, not a rule-authoring product.
 
+## Working from a checkout
+
+Use Bun 1.4.2 and Node 22 for repository development. At the repository root:
+
+```sh
+bun install --ignore-scripts --frozen-lockfile
+bun run build
+bun run demo:web
+```
+
+The workspace install includes demo dependencies. Use `EXPO_OFFLINE=1 bun run
+demo:web` if Expo cannot write its online dependency-validation cache. To consume
+an unreleased checkout, run `bun pm pack --destination .cache`, then `bun add`
+the printed absolute tarball path in your app.
+
 ## Reference
 
-- [README](./README.md): runnable quick starts, setup, zones, and measured evidence.
+- [README](./README.md): published-package setup, quick start, positioning, and evidence.
+- [Customization](./docs/customization.md): slot tables, selection layouts, and context recipe.
 - [Adapter guide](./docs/adapters.md): table/feed conversion and memoization contract.
 - Area landing pages: [core](./src/core/README.md), [Roster](./src/components/roster/README.md),
   [Schedule](./src/components/schedule/README.md), [layers](./src/components/layers/README.md),

package/package.json

@@ -1,14 +1,24 @@
 {
   "name": "react-native-roster",
-  "version": "0.4.1",
-  "description": "Layered intervals with provenance across lanes and a shared time axis for React Native.",
+  "version": "0.4.2",
+  "description": "Resource timeline and schedule components for React Native and web, with layered intervals, coverage, provenance, and explicit daylight-saving handling.",
   "keywords": [
     "react-native",
+    "react-native-web",
     "expo",
     "roster",
-    "lanes",
+    "timeline",
+    "resource-timeline",
+    "schedule",
+    "resource-scheduling",
+    "coverage",
     "intervals",
+    "timezone",
+    "dst",
+    "recurrence",
+    "rrule",
     "provenance",
+    "typescript",
     "nativewind"
   ],
   "author": "Jesse Harlin (the-simian) <info@simiancraft.com>",

package/src/adapters/rrule/README.md

@@ -8,8 +8,9 @@ provenance per span.
 - Exports: `expandRuleSet`, `envelopeFor`, `clearExpandCache`, `expandStats`,
   `resetExpandStats`, and the `RosterRule`, `RosterDate`, `RuleSet`,
   `ExpandOptions`, `ExpandResult`, and `ExpandStats` types
-- Imports: `../../core` only; never components or another adapter
-- Owns: `rrule-temporal` and the Temporal polyfill; root and core never load them
+- Internal imports: `../../core` only; never components or another adapter
+- Owns: `rrule-temporal` and the Temporal polyfill; ordinary installed dependencies
+  imported only by this subpath, never by root or core
 
 ## Supported input
 
@@ -26,7 +27,7 @@ unbounded strings are rejected by validation.
 | `index.ts` | the entry point; the only barrel |
 | `types.ts` | input and result types |
 | `validate.ts` | input rejection before any engine work |
-| `envelope.ts` | widens a window to whole local days per rule zone |
+| `envelope.ts` | pads both absolute window bounds by 48 hours, shared across rule zones |
 | `occurrences.ts` | drives the engine and applies every calendar correction |
 | `net.ts` | nets includes against excludes into intervals and gaps |
 | `cache.ts`, `hash.ts` | retained occurrences and envelopes keyed by content |

package/src/components/layers/README.md

@@ -8,7 +8,7 @@ projections draw the same components, so they live above Roster and Schedule.
 - `parts/interval.tsx`, `parts/gap.tsx`: the default components
 - `utils/styles.ts`: content-keyed style objects per layer
 
-Imports core only. Tests: `test/components/layers`.
+Internal imports stay within layers and core; the components also import React Native. Tests: `test/components/layers`.
 
 Both projections accept intervalComponent and gapComponent as ComponentType inputs.
 Their data-owning lane or column mounts the component with the final rect, layer,

package/src/components/roster/README.md

@@ -17,8 +17,8 @@ This feature is about a roster; its children are lanes.
 - `utils/`: ticks and the body content key
 
 Interval and gap components live in `../layers`; press geometry and `regionStyle`
-in `../primitives`. Zone contracts are documented in the README's Roster zones
-section and in `llms.txt`. Tests: `test/components/roster`.
+in `../primitives`. See the [slot tables, selection contract, and context recipe](../../../docs/customization.md#roster-zones)
+and `llms.txt` for integration details. Tests: `test/components/roster`.
 
 This feature is about a roster body; its children are lanes. `RosterBody` gates
 measurement and composes the body layout and lane list. `BodyInput` extends the

package/src/components/schedule/README.md

@@ -14,8 +14,8 @@ This feature is about a schedule; its children are days.
 - `utils/days.ts`: header dates, now position, and transition bounds
 
 Interval and gap components live in `../layers`; press geometry and `regionStyle`
-in `../primitives`. Zone contracts are documented in the README's Schedule
-section and in `llms.txt`. Tests: `test/components/schedule`.
+in `../primitives`. Zone contracts and a complete example live in the
+[customization guide](../../../docs/customization.md#schedule-zones) and `llms.txt`. Tests: `test/components/schedule`.
 
 The chassis binds default component types once; ScheduleDay mounts components
 with day data and passes nodes into ScheduleDayLayout. There is no black-box day

package/src/core/README.md

@@ -40,3 +40,46 @@ Reference: [design](../../docs/design.md), [timezones](../../docs/timezones.md),
 
 The public entry binds immutable function aliases directly to preserve implementation
 identity while avoiding repeated CommonJS getter wrappers in consumer bundles.
+
+## Interval helper walkthrough
+
+`unionOf(spans: readonly Window[]): Window[]` merges overlapping or touching
+windows and returns them sorted by start, keeping disjoint windows separate.
+Empty input returns `[]`. Every returned window is a new object; the input array
+and its windows remain untouched. Like `extentOf` and `intersectionOf`, it uses
+end-exclusive epoch milliseconds and throws `RangeError` for non-finite bounds
+or `end <= start`.
+
+Collapse each person's segments with `extentOf`, then use `intersectionOf` to
+find the shared time across those windows. Each extent bridges gaps between
+segments, so the result describes the collapsed windows.
+
+```ts
+import type { Window } from 'react-native-roster/core';
+import { extentOf, intersectionOf } from 'react-native-roster/core';
+
+const people: { name: string; segments: Window[] }[] = [
+  {
+    name: 'Alex',
+    segments: [
+      { start: 1_000, end: 3_000 },
+      { start: 4_000, end: 8_000 },
+    ],
+  },
+  {
+    name: 'Sam',
+    segments: [
+      { start: 2_000, end: 5_000 },
+      { start: 6_000, end: 9_000 },
+    ],
+  },
+];
+
+const windows = people.map((person): Window => {
+  const extent = extentOf(person.segments);
+  if (extent === null) throw new Error(`${person.name} has no segments`);
+  return extent;
+});
+const sharedTime = intersectionOf(windows); // { start: 2_000, end: 8_000 }
+// A null result from intersectionOf means there is no shared time.
+```

package/src/nativewind/README.md

@@ -10,5 +10,49 @@ Registers `Roster` and `Schedule` with NativeWind's `cssInterop` so each
 
 Class props win over default paint because layouts compose regions with
 `regionStyle`, which drops the default when the override carries a class entry.
-Fine detail is styled through zones. See the README's NativeWind section.
+Fine detail is styled through zones. See [setup and styling](#setup-and-styling).
+Web imports also require Radix through Roster; see [Install](../../README.md#install).
 Tests: `test/package/nativewind-entry.test.ts`.
+
+## Setup and styling
+
+`className` is a first-class prop on `Roster` and `Schedule`, alongside `style`.
+Every chrome style prop has a class twin: `className`, `headerClassName`,
+`laneLabelColumnClassName`, and `bodyClassName` on Roster; `className`,
+`headerClassName`, `gutterClassName`, and `daysClassName` on Schedule. A class
+on a region replaces that region's default paint (background and border colors)
+while its structure (size, flex, overflow) stays. This is deliberate: React
+Native Web renders object styles inline, and inline paint would otherwise beat
+any class.
+
+Set up NativeWind 4 as usual (the demo's [babel.config.js](../../demo/babel.config.js),
+[metro.config.js](../../demo/metro.config.js), [tailwind.config.js](../../demo/tailwind.config.js),
+and [global.css](../../demo/global.css) are a working reference), add the optional
+peer with `bun add nativewind`, and register the components once at your app
+root:
+
+```tsx
+// app/_layout.tsx
+import '../global.css';
+import 'react-native-roster/nativewind';
+```
+
+```tsx
+import { Roster } from 'react-native-roster';
+
+<Roster
+  lanes={lanes}
+  windowSpec={windowSpec}
+  className="flex-1 rounded-xl bg-background"
+  headerClassName="border-b border-border bg-card"
+  laneLabelColumnClassName="border-r border-border bg-card"
+  laneLabelWidth={220}
+/>
+```
+
+Slot components are ordinary React Native views, so a custom `laneLabelComponent` or
+`intervalComponent` uses `className` on `View` and `Text` directly. Without the
+entry point, class props are ignored and style props still work. The entry
+point is the package's only module with side effects and is listed in
+`sideEffects`. The [showcase route](../../demo/app/showcase.tsx) styles every region
+and zone this way in light and dark palettes.