react-native-roster 0.0.1 → 0.1.0

package/dist/src/nativewind/index.d.ts

@@ -11,18 +11,16 @@ export declare const scheduleClassNames: Mapping<ScheduleStyleProps>;
 export declare const Roster: import("react").ComponentType<import("../components/roster/roster.types").RosterInput & RosterStyleProps & {
     incompleteLabel?: string;
     neverSetLabel?: string;
-    laneLabelZone?: (input: import("../components/roster/roster.types").LaneLabelInput) => import("react").ReactNode;
-    headerCellZone?: (input: {
-        tick: import("../components/roster/roster.types").RosterTick;
-    }) => import("react").ReactNode;
-    intervalZone?: (input: import("..").IntervalInput) => import("react").ReactNode;
-    gapZone?: (input: import("..").GapInput) => import("react").ReactNode;
-    gridZone?: (input: import("../components/roster/roster.types").GridInput) => import("react").ReactNode;
-    emptyZone?: () => import("react").ReactNode;
-    cornerZone?: () => import("react").ReactNode;
-    headerZone?: (input: import("../components/roster/roster.types").HeaderInput) => import("react").ReactNode;
-    laneLabelColumnZone?: (input: import("../components/roster/roster.types").LabelColumnInput) => import("react").ReactNode;
-    bodyZone?: (input: import("../components/roster/roster.types").BodyInput) => import("react").ReactNode;
+    laneLabelComponent?: import("react").ComponentType<import("../components/roster/roster.types").LaneLabelInput>;
+    headerCellComponent?: import("react").ComponentType<import("../components/roster/roster.types").HeaderCellInput>;
+    intervalComponent?: import("react").ComponentType<import("..").IntervalInput>;
+    gapComponent?: import("react").ComponentType<import("..").GapInput>;
+    gridComponent?: import("react").ComponentType<import("../components/roster/roster.types").GridInput>;
+    emptyZone?: import("react").ReactNode;
+    cornerZone?: import("react").ReactNode;
+    headerComponent?: import("react").ComponentType<import("../components/roster/roster.types").HeaderInput>;
+    laneLabelColumnComponent?: import("react").ComponentType<import("../components/roster/roster.types").LabelColumnInput>;
+    bodyComponent?: import("react").ComponentType<import("../components/roster/roster.types").BodyInput>;
 } & {
     bodyClassName?: string | undefined;
     className?: string | undefined;
@@ -31,26 +29,26 @@ export declare const Roster: import("react").ComponentType<import("../components
 }>;
 export declare const Schedule: import("react").ComponentType<import("../components/schedule/schedule.types").ScheduleInput & ScheduleStyleProps & {
     incompleteLabel?: string;
-    gutterZone?: (input: import("../components/schedule/schedule.types").ScheduleHoursInput) => import("react").ReactNode;
-    gridZone?: (input: import("../components/schedule/schedule.types").ScheduleHoursInput) => import("react").ReactNode;
-    dayHeaderZone?: (input: {
+    gutterComponent?: import("react").ComponentType<import("../components/schedule/schedule.types").ScheduleHoursInput>;
+    gridComponent?: import("react").ComponentType<import("../components/schedule/schedule.types").ScheduleHoursInput>;
+    dayHeaderComponent?: import("react").ComponentType<{
         day: import("..").DayColumn;
-    }) => import("react").ReactNode;
-    skippedDateZone?: (input: {
+    }>;
+    skippedDateComponent?: import("react").ComponentType<{
         localDate: string;
-    }) => import("react").ReactNode;
-    columnZone?: (input: import("../components/schedule/schedule.types").ScheduleColumnInput) => import("react").ReactNode;
-    transitionZone?: (input: import("../components/schedule/schedule.types").ScheduleTransitionInput) => import("react").ReactNode;
-    nowLineZone?: (input: {
+    }>;
+    columnComponent?: import("react").ComponentType<import("../components/schedule/schedule.types").ScheduleColumnInput>;
+    transitionComponent?: import("react").ComponentType<import("../components/schedule/schedule.types").ScheduleTransitionInput>;
+    nowLineComponent?: import("react").ComponentType<{
         y: number;
         column: number;
-    }) => import("react").ReactNode;
-    intervalZone?: (input: import("..").IntervalInput) => import("react").ReactNode;
-    gapZone?: (input: import("..").GapInput) => import("react").ReactNode;
-    incompleteZone?: (input: {
+    }>;
+    intervalComponent?: import("react").ComponentType<import("..").IntervalInput>;
+    gapComponent?: import("react").ComponentType<import("..").GapInput>;
+    incompleteComponent?: import("react").ComponentType<{
         lane: import("..").Lane;
         label: string;
-    }) => import("react").ReactNode;
+    }>;
 } & {
     className?: string | undefined;
     daysClassName?: string | undefined;

package/dist/src/nativewind/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nativewind/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAEhF,KAAK,aAAa,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,WAAW,GAAG,GAAG,MAAM,WAAW,CAAC,CAAC;AACtF,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,MAAM,WAAW,GACrE,GAAG,MAAM,OAAO,GAChB,OAAO,CAAC;AACZ,KAAK,OAAO,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC;CAAE,CAAC;AAEhE,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,CAKtD,CAAC;AACF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,kBAAkB,CAK1D,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;EAA2C,CAAC;AAC/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA+C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/nativewind/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAE1E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AAEhF,KAAK,aAAa,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,MAAM,WAAW,GAAG,GAAG,MAAM,WAAW,CAAC,CAAC;AACtF,KAAK,WAAW,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,MAAM,WAAW,GACrE,GAAG,MAAM,OAAO,GAChB,OAAO,CAAC;AACZ,KAAK,OAAO,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC;CAAE,CAAC;AAEhE,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,gBAAgB,CAKtD,CAAC;AACF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,kBAAkB,CAK1D,CAAC;AAIF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;EAA2C,CAAC;AAC/D,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA+C,CAAC"}

package/docs/migrations.md

@@ -0,0 +1,61 @@
+# Migrations
+
+Changes to public props that need consumer edits, by the version that ships them.
+The changelog lists every change; this page carries only the ones with a
+migration step.
+
+## 0.1.0: slot components replace render functions
+
+Every Roster and Schedule prop that used to take a render function now takes a
+component type or a node. Props ending in `Component` accept
+`ComponentType<Input>` and are mounted by React with the same input as props.
+Props ending in `Zone` accept `ReactNode`. Press callbacks (`onIntervalPress`,
+`onGapPress`, `onCellPress`, `onIntervalHover`, `onNavigate`) are unchanged.
+
+| Before (0.0.x) | After (0.1.0) | Input |
+| --- | --- | --- |
+| `emptyZone={() => <Empty />}` | `emptyZone={<Empty />}` | none |
+| `cornerZone={() => <Corner />}` | `cornerZone={<Corner />}` | none |
+| `headerZone={(input) => ...}` | `headerComponent={Header}` | `HeaderInput` |
+| `laneLabelColumnZone={(input) => ...}` | `laneLabelColumnComponent={LabelColumn}` | `LabelColumnInput` |
+| `bodyZone={(input) => ...}` | `bodyComponent={Body}` | `BodyInput` |
+| `headerCellZone={({ tick }) => ...}` | `headerCellComponent={HeaderCell}` | `HeaderCellInput` |
+| `laneLabelZone={(input) => ...}` | `laneLabelComponent={LaneLabel}` | `LaneLabelInput` |
+| `intervalZone={(input) => ...}` | `intervalComponent={Interval}` | `IntervalInput` |
+| `gapZone={(input) => ...}` | `gapComponent={Gap}` | `GapInput` |
+| `gridZone={(input) => ...}` | `gridComponent={Grid}` | `GridInput` |
+
+Schedule follows the same rule: `gutterZone`, `gridZone`, `dayHeaderZone`,
+`skippedDateZone`, `columnZone`, `transitionZone`, `nowLineZone`, `intervalZone`,
+`gapZone`, and `incompleteZone` become the matching `Component` props with the
+same inputs.
+
+Nested contracts renamed with them: `HeaderInput.headerCellZone` is now
+`headerCellComponent`, `LabelColumnInput.laneLabelZone` is now
+`laneLabelComponent`, and `BodyInput` carries `intervalComponent`,
+`gapComponent`, and `gridComponent`.
+
+Mechanical rewrite for a render function that was already a plain function of
+its input:
+
+```tsx
+// Before
+<Roster intervalZone={({ rect, layer }) => <Bar rect={rect} layer={layer} />} />
+
+// After: the same function, declared once at module scope and passed as a type
+function Interval({ rect, layer }: IntervalInput) {
+  return <Bar rect={rect} layer={layer} />;
+}
+<Roster intervalComponent={Interval} />
+```
+
+Declare slot components at module scope. An inline arrow creates a new
+component type every render, which remounts every interval and defeats the
+body's content key.
+
+The default parts are exported under their existing names (`RosterInterval`,
+`RosterGap`, `RosterLaneLabel`, `RosterHeaderCell`, `RosterGrid`, `RosterHeader`,
+`RosterLaneLabelColumn`, `RosterBody`, `RosterEmpty`, `RosterCorner`) and can be
+composed inside a replacement. `RosterBody` is now built from `RosterBodyLayout`
+(arranges `gridZone` and `listZone`) and `RosterLaneList` (owns the virtualized
+lane list); both are exported for consumers that replace the body.

package/llms.txt

@@ -144,12 +144,12 @@ show the incompleteLabel; do not describe incomplete empty time as definitive.
 
 | Import | Runtime exports and purpose |
 | --- | --- |
-| react-native-roster | Roster, Schedule, useRoster, useSchedule, default zone fillers, and core re-exports. |
+| react-native-roster | Roster, Schedule, useRoster, useSchedule, default slot components, and core re-exports. |
 | react-native-roster/core | layoutLane, coverageFor, flagFor, windowFor, prev, next, today, dayColumnsFor, timeAtX, timeAtY, snapToStep, byLabel, byCoverage, and core counters/caches. |
 | react-native-roster/rrule | expandRuleSet, envelopeFor, expandStats, resetExpandStats, clearExpandCache; RuleSet, RosterRule, RosterDate, ExpandOptions, ExpandResult, and ExpandStats types. |
 | react-native-roster/nativewind | Side-effect registration of Roster and Schedule with NativeWind's cssInterop, plus the registered Roster and Schedule and the rosterClassNames/scheduleClassNames mappings. Imports the optional nativewind peer. |
 
-No default exports. Root exports renderer inputs/models/zone types as well as
+No default exports. Root exports renderer inputs/models/slot input types as well as
 core types. Core imports standard JS and Intl only. Only /rrule imports
 rrule-temporal 1.6.0 and @js-temporal/polyfill 0.5.1. Those are installed runtime
 dependencies but cannot enter root/core bundles through library imports.
@@ -160,6 +160,14 @@ from dist/src; declarations use the types condition. Build before Node export
 tests. Root needs a native renderer or web bundler; direct Node use of root is
 not a substitute for a React Native app. Core and /rrule work in Node/Bun.
 
+## 0.1.0 slot prop rename
+
+0.1.0 renamed every input-bearing render-function Zone prop to a Component prop;
+use the current names below instead of the 0.0.x props. Singleton emptyZone and
+cornerZone keep their names and now take nodes. See [docs/migrations.md](./docs/migrations.md).
+Zone props are ReactNode.
+Component props are ComponentType<Input>.
+
 ## Renderer contracts
 
 Roster required props: lanes: Lane[], windowSpec: WindowSpec.
@@ -198,44 +206,53 @@ The chassis measures width, reserves a 48 px gutter, and fits all actual day
 columns without horizontal scrolling; the body scrolls vertically. now updates
 every minute and is null outside the selected window.
 
-Zone props are optional render functions. Use exported fillers inside replacements
-to preserve geometry, scrolling, and interaction. Types are exported from root.
+Props ending in Component accept ComponentType<Input>, mounted as React elements.
+Props ending in Zone accept ReactNode; pass null to suppress a singleton default.
+Define component types at module scope; hooks and class components work normally.
+Use exported defaults inside replacements to preserve geometry, scrolling, and
+interaction. Input types, including HeaderCellInput, are exported from root.
+Mount a React context provider above Roster for extra consumer data, and read it with useContext in a module-scope slot component.
+Avoid inline closures or memoized factories returning a new component per render; new interval types remount every interval and defeat the body's content key.
+
+RosterBody composes the exported RosterBodyLayout (gridZone/listZone nodes with
+scroll wiring) and RosterLaneList (LegendList, geometryFor, and LaneRow mounting).
+Keep its viewport gate and measured estimatedListSize in custom compositions.
 
 ## Roster zones
 
-| Zone | Receives | Default filler and behavior |
+| Slot | Component inputs or node | Default and behavior |
 | --- | --- | --- |
-| `emptyZone` | Nothing | `RosterEmpty`: No lanes. |
-| `laneLabelZone` | `lane`, `flag`, `complete`, `viewTimezone`, localized labels | `RosterLaneLabel`: label, differing IANA zone badge, and notices. |
-| `headerCellZone` | `tick` | `RosterHeaderCell`: tick label. |
-| `intervalZone` | `rect`, `layer`, `lane`, `highlighted` | `RosterInterval`: positioned colored rect, with final inset bounds. |
-| `gapZone` | `rect`, `layer`, `lane` | `RosterGap`: no visible content; the row supplies pressable bounds. |
-| `gridZone` | `ticks`, `contentWidth` | `RosterGrid`: one hairline per tick behind every lane. |
-| `cornerZone` | Nothing | `RosterCorner`: nothing; the cell above the labels, laneLabelWidth wide. |
-| `headerZone` | `ticks`, `projection`, `scroll`, `contentWidth`, `headerCellZone` | `RosterHeader`: frozen header following horizontal offset. |
-| `laneLabelColumnZone` | `labels: LaneLabelInput[]`, `projection`, `scroll`, `laneLabelZone` | `RosterLaneLabelColumn`: frozen labels following vertical offset. |
-| `bodyZone` | Ordered `lanes`, `window`, `geometryFor`, `projection`, `scroll`, `press`, `ticks`, `viewport`, `contentWidth`, highlight/hover, incomplete label, and rect zones | `RosterBody`: virtualized lanes. |
+| `emptyZone` | `ReactNode` | `RosterEmpty`: No lanes. |
+| `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. |
+| `gapComponent` | `rect`, `layer`, `lane` | `RosterGap`: no visible content; the row supplies pressable bounds. |
+| `gridComponent` | `ticks`, `contentWidth` | `RosterGrid`: one hairline per tick behind every lane. |
+| `cornerZone` | `ReactNode` | `RosterCorner`: nothing; the cell above the labels, laneLabelWidth wide. |
+| `headerComponent` | `ticks`, `projection`, `scroll`, `contentWidth`, `headerCellComponent` | `RosterHeader`: frozen header following horizontal offset. |
+| `laneLabelColumnComponent` | `labels: LaneLabelInput[]`, `projection`, `scroll`, `laneLabelComponent` | `RosterLaneLabelColumn`: frozen labels following vertical offset. |
+| `bodyComponent` | Ordered `lanes`, `window`, `geometryFor`, `projection`, `scroll`, `press`, `ticks`, `viewport`, `contentWidth`, highlight/hover, incomplete label, and rect components | `RosterBody`: virtualized lanes. |
 
 ## Schedule zones
 
-| Zone | Receives | Default filler and behavior |
+| Slot | Component inputs or node | Default and behavior |
 | --- | --- | --- |
-| `gutterZone` | `hours`, `pxPerHour` | `ScheduleGutter`: 24 frozen hour labels. |
-| `gridZone` | `hours`, `pxPerHour` | `ScheduleGrid`: 24 bordered hour bands behind each day's rects. |
-| `dayHeaderZone` | `day` | `ScheduleDayHeader`: weekday, localDate, and transition badge. |
-| `skippedDateZone` | `localDate` | `ScheduleSkippedDate`: zero-width header marker for a wholly skipped date. |
-| `columnZone` | `day`, `rects`, `gapRects`, `lane`, `highlightSource`, `press`, interval/gap zones | `ScheduleColumn`: final rect bounds in layer order. |
-| `transitionZone` | `day`, `transition`, `y`, `dividerY`, `height`, `width` | `ScheduleTransition`: skipped-time hatch, or repeat divider and again label. |
-| `nowLineZone` | `y`, `column` | `ScheduleNowLine`: line in the current day's column, updated each minute. |
-| `intervalZone`, `gapZone` | Same inputs as Roster | Shared `RosterInterval` and `RosterGap`. |
-| `incompleteZone` | `lane`, `label` | `ScheduleIncomplete`: notice in reserved space above the grid when incomplete. |
+| `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/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 in reserved space above the grid when incomplete. |
 
 Position custom interval content at rect.x/y with width/height/z and
 pointerEvents="none". Gap content already sits in a positioned pressable.
 Column x coordinates are local; select the column through rect.column.
-Zone fillers are plain React Native views; under NativeWind they take className
+Slot components are plain React Native views; under NativeWind they take className
 directly. The default RosterLaneLabel owns its row's bottom border, so a custom
-laneLabelZone draws its own separators.
+laneLabelComponent draws its own separators.
 
 ## Navigation and zones
 
@@ -255,7 +272,7 @@ Schedule always uses 24 equal wall-hour bands. Positive deltaMinutes means a
 skipped empty region; negative means two half-height repeat regions. Rects split
 at column edges, source changes, and every scale boundary. For repeat at T with
 magnitude d, boundaries are T-d, T, and T+d. A wholly skipped date produces no
-column; skippedDateZone labels the header gap (Apia 2011-12-30).
+column; skippedDateComponent labels the header gap (Apia 2011-12-30).
 Each column spans the first instant of its date to the first instant of the next.
 Skipped wall spans belong to the date they interrupt. Its transitions include a
 skip at the exclusive end when it empties that date's final wall bands (Nuuk
@@ -457,7 +474,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 <40 kB minified/uncompressed, peers
+its baseline. Size gates: core <15 kB, root <44 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.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-roster",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Layered intervals with provenance across lanes and a shared time axis for React Native.",
   "keywords": [
     "react-native",
@@ -66,7 +66,8 @@
     "README.md",
     "LICENSE",
     "NOTICE.md",
-    "llms.txt"
+    "llms.txt",
+    "docs/migrations.md"
   ],
   "scripts": {
     "clean": "rm -rf dist",

package/src/components/layers/README.md

@@ -1,11 +1,15 @@
 # layers
 
 This area is about a layer; its children are intervals and gaps. Both
-projections draw the same fillers, so they live above Roster and Schedule.
+projections draw the same components, so they live above Roster and Schedule.
 
 - Root entry exports: `RosterInterval`, `RosterGap`, `IntervalInput`, `GapInput`
-- `layers.types.ts`: the filler input contract both projections pass
-- `parts/interval.tsx`, `parts/gap.tsx`: the default fillers
+- `layers.types.ts`: the component input contract both projections pass
+- `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`.
+
+Both projections accept intervalComponent and gapComponent as ComponentType inputs.
+Their data-owning lane or column mounts the component with the final rect, layer,
+and lane; interval inputs also carry highlighted. No renderer calls a slot function.

package/src/components/roster/README.md

@@ -2,17 +2,28 @@
 
 This feature is about a roster; its children are lanes.
 
-- Root entry exports: `Roster`, `useRoster`, the `RosterXxx` parts, and every
-  `XxxInput` zone type from `roster.types.ts`
+- Root entry exports: `Roster`, `useRoster`, `RosterBodyLayout`, `RosterLaneList`, the other `RosterXxx` parts, and every
+  `XxxInput` slot input type from `roster.types.ts`
 
 - `index.tsx`: the chassis; calls `useRoster`, branches on `status`, composes zones
 - `use-roster.ts`: the hook; owns window, projection, scroll, geometry, and press
 - `layout.tsx`: arranges corner, header, label column, and body regions only
-- `roster.types.ts`: props, model, and every zone input type
+- `roster.types.ts`: props, model, and every slot input type
+- `body-layout.tsx`: arranges grid and list nodes with horizontal scroll wiring
+- `parts/lane-list.tsx`: `RosterLaneList` owns LegendList and its lane render callback
 - `parts/`: collection-level parts (body, header, header cell, grid, corner, label column, empty)
 - `lanes/`: `LaneRow`, the interval-hover platform pair, and lane-local parts
 - `utils/`: ticks and the body content key
 
-Interval and gap fillers live in `../layers`; press geometry and `regionStyle`
+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`.
+
+This feature is about a roster body; its children are lanes. `RosterBody` gates
+measurement and composes the body layout and lane list. The `onRowRender` prop on
+`RosterBody` and `RosterLaneList` is a development-only Profiler hook used by the
+gallery, not a supported customization point. Production Profiler callbacks are disabled.
+
+Input-bearing slots accept component types and mount in the data-owning parts.
+The chassis binds defaults once; emptyZone and cornerZone accept nodes. The body
+content key tracks interval and gap component identity, including class components.

package/src/components/roster/body-layout.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { ScrollView, View } from 'react-native';
+import type { BodyInput } from './roster.types';
+
+export function RosterBodyLayout({
+  scroll,
+  contentWidth,
+  viewport,
+  gridZone,
+  listZone,
+}: Pick<BodyInput, 'scroll' | 'contentWidth' | 'viewport'> & {
+  /** Noninteractive grid behind the lane list. */
+  gridZone: ReactNode;
+  /** Virtualized lane collection within the measured viewport. */
+  listZone: ReactNode;
+}) {
+  return (
+    <ScrollView
+      testID="roster-horizontal-scroll"
+      ref={scroll.bodyRef}
+      horizontal
+      onScroll={scroll.onBodyScroll}
+      scrollEventThrottle={16}
+      style={{ flex: 1 }}
+    >
+      <View style={{ width: contentWidth, height: viewport.height }}>
+        {gridZone}
+        {listZone}
+      </View>
+    </ScrollView>
+  );
+}

package/src/components/roster/index.tsx

@@ -12,6 +12,9 @@ import { RosterLaneLabelColumn } from './parts/lane-label-column';
 import type { RosterProps } from './roster.types';
 import { useRoster } from './use-roster';
 
+const defaultEmptyZone = <RosterEmpty />;
+const defaultCornerZone = <RosterCorner />;
+
 export function Roster(props: RosterProps) {
   const {
     status,
@@ -28,20 +31,20 @@ export function Roster(props: RosterProps) {
     onLayout,
   } = useRoster(props);
   const {
-    emptyZone = RosterEmpty,
-    cornerZone = RosterCorner,
-    headerZone = RosterHeader,
-    laneLabelColumnZone = RosterLaneLabelColumn,
-    bodyZone = RosterBody,
-    headerCellZone = RosterHeaderCell,
-    laneLabelZone = RosterLaneLabel,
-    intervalZone = RosterInterval,
-    gapZone = RosterGap,
-    gridZone = RosterGrid,
+    emptyZone = defaultEmptyZone,
+    cornerZone = defaultCornerZone,
+    headerComponent: HeaderComponent = RosterHeader,
+    laneLabelColumnComponent: LaneLabelColumnComponent = RosterLaneLabelColumn,
+    bodyComponent: BodyComponent = RosterBody,
+    headerCellComponent = RosterHeaderCell,
+    laneLabelComponent = RosterLaneLabel,
+    intervalComponent = RosterInterval,
+    gapComponent = RosterGap,
+    gridComponent = RosterGrid,
     incompleteLabel = 'Availability may be incomplete',
     neverSetLabel = 'No availability set',
   } = props;
-  if (status === 'empty') return emptyZone();
+  if (status === 'empty') return emptyZone;
   if (window.start === window.end) return null;
   return (
     <RosterLayout
@@ -51,40 +54,55 @@ export function Roster(props: RosterProps) {
       bodyStyle={props.bodyStyle}
       laneLabelWidth={props.laneLabelWidth}
       onLayout={onLayout}
-      cornerZone={cornerZone()}
-      headerZone={headerZone({ ticks, projection, scroll, contentWidth, headerCellZone })}
-      laneLabelColumnZone={laneLabelColumnZone({
-        labels: orderedLanes.map((lane) => {
-          const state = laneState.get(lane.id) ?? { flag: 'none', complete: true };
-          return {
-            lane,
-            ...state,
-            viewTimezone: projection.viewTimezone,
-            incompleteLabel,
-            neverSetLabel,
-          };
-        }),
-        projection,
-        scroll,
-        laneLabelZone,
-      })}
-      bodyZone={bodyZone({
-        lanes: orderedLanes,
-        window,
-        geometryFor,
-        projection,
-        scroll,
-        press,
-        ticks,
-        contentWidth,
-        viewport,
-        intervalZone,
-        gapZone,
-        gridZone,
-        highlightSource: props.highlightSource,
-        onIntervalHover: props.onIntervalHover,
-        incompleteLabel,
-      })}
+      cornerZone={cornerZone}
+      headerZone={
+        <HeaderComponent
+          ticks={ticks}
+          projection={projection}
+          scroll={scroll}
+          contentWidth={contentWidth}
+          headerCellComponent={headerCellComponent}
+        />
+      }
+      laneLabelColumnZone={
+        <LaneLabelColumnComponent
+          labels={orderedLanes.map((lane) => {
+            const state = laneState.get(lane.id) ?? {
+              flag: 'none',
+              complete: true,
+            };
+            return {
+              lane,
+              ...state,
+              viewTimezone: projection.viewTimezone,
+              incompleteLabel,
+              neverSetLabel,
+            };
+          })}
+          projection={projection}
+          scroll={scroll}
+          laneLabelComponent={laneLabelComponent}
+        />
+      }
+      bodyZone={
+        <BodyComponent
+          lanes={orderedLanes}
+          window={window}
+          geometryFor={geometryFor}
+          projection={projection}
+          scroll={scroll}
+          press={press}
+          ticks={ticks}
+          contentWidth={contentWidth}
+          viewport={viewport}
+          intervalComponent={intervalComponent}
+          gapComponent={gapComponent}
+          gridComponent={gridComponent}
+          highlightSource={props.highlightSource}
+          onIntervalHover={props.onIntervalHover}
+          incompleteLabel={incompleteLabel}
+        />
+      }
     />
   );
 }

package/src/components/roster/lanes/lane.tsx

@@ -8,7 +8,12 @@ import { RosterIncomplete } from './parts/incomplete';
 
 export type LaneRowProps = Pick<
   BodyInput,
-  'press' | 'intervalZone' | 'gapZone' | 'highlightSource' | 'onIntervalHover' | 'incompleteLabel'
+  | 'press'
+  | 'intervalComponent'
+  | 'gapComponent'
+  | 'highlightSource'
+  | 'onIntervalHover'
+  | 'incompleteLabel'
 > & {
   lane: Lane;
   geometry: LaneGeometry;
@@ -22,8 +27,8 @@ export function LaneRow({
   width,
   rowHeight,
   press,
-  intervalZone,
-  gapZone,
+  intervalComponent: IntervalComponent,
+  gapComponent: GapComponent,
   highlightSource,
   onIntervalHover,
   incompleteLabel = 'Availability may be incomplete',
@@ -47,15 +52,15 @@ export function LaneRow({
             .filter((rect) => rect.layerId === layer.id)
             .map((rect) => (
               <Fragment key={`interval-${rect.x}:${rect.width}`}>
-                {intervalZone({
-                  rect,
-                  layer,
-                  lane,
-                  highlighted: rect.sources.some(
+                <IntervalComponent
+                  rect={rect}
+                  layer={layer}
+                  lane={lane}
+                  highlighted={rect.sources.some(
                     (source) =>
                       source.kind === highlightSource?.kind && source.id === highlightSource.id,
-                  ),
-                })}
+                  )}
+                />
               </Fragment>
             ))}
           {geometry.gapRects
@@ -78,7 +83,7 @@ export function LaneRow({
                   zIndex: rect.z,
                 }}
               >
-                {gapZone({ rect, layer, lane })}
+                <GapComponent rect={rect} layer={layer} lane={lane} />
               </Pressable>
             ))}
         </Fragment>