react-native-roster 0.0.1 → 0.1.0

package/src/components/roster/parts/body.tsx

@@ -1,91 +1,24 @@
-import { LegendList } from '@legendapp/list';
-import { Profiler, type ProfilerOnRenderCallback } from 'react';
-import { ScrollView, View } from 'react-native';
-import { LaneRow } from '../lanes/lane';
+import type { ProfilerOnRenderCallback } from 'react';
+import { RosterBodyLayout } from '../body-layout';
 import type { BodyInput } from '../roster.types';
-import { bodyContentKey } from '../utils/body-content-key';
+import { RosterLaneList } from './lane-list';
 
-export function RosterBody({
-  lanes,
-  geometryFor,
-  projection,
-  scroll,
-  press,
-  ticks,
-  contentWidth,
-  viewport,
-  window,
-  intervalZone,
-  gapZone,
-  gridZone,
-  highlightSource,
-  onIntervalHover,
-  incompleteLabel,
-  onRowRender,
-}: BodyInput & {
-  /** Optional per-lane commit observer; used by the development gallery's Profiler gate. */
-  onRowRender?: ProfilerOnRenderCallback;
-}) {
+export function RosterBody(
+  props: BodyInput & {
+    /** Development-only Profiler hook used by the gallery; not a supported customization point. */
+    onRowRender?: ProfilerOnRenderCallback;
+  },
+) {
+  const { viewport, scroll, contentWidth, ticks, gridComponent: GridComponent } = props;
   // LegendList requires a measured viewport and does not support static rendering.
   if (viewport.width <= 0 || viewport.height <= 0) return null;
   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({ ticks, contentWidth })}
-        <LegendList
-          testID="roster-vertical-scroll"
-          data={lanes}
-          extraData={bodyContentKey({
-            window,
-            projection,
-            highlightSource,
-            intervalZone,
-            gapZone,
-            onIntervalHover,
-            incompleteLabel,
-          })}
-          keyExtractor={(lane) => lane.id}
-          estimatedListSize={{ width: contentWidth, height: viewport.height }}
-          estimatedItemSize={projection.rowHeight}
-          getFixedItemSize={() => projection.rowHeight}
-          drawDistance={0}
-          recycleItems={false}
-          maintainVisibleContentPosition={false}
-          onScroll={scroll.onVerticalScroll}
-          scrollEventThrottle={16}
-          style={{ flex: 1 }}
-          renderItem={({ item }) => {
-            const row = (
-              <LaneRow
-                lane={item}
-                geometry={geometryFor(item)}
-                width={contentWidth}
-                rowHeight={projection.rowHeight}
-                press={press}
-                intervalZone={intervalZone}
-                gapZone={gapZone}
-                highlightSource={highlightSource}
-                onIntervalHover={onIntervalHover}
-                incompleteLabel={incompleteLabel}
-              />
-            );
-            if (onRowRender)
-              return (
-                <Profiler id={item.id} onRender={onRowRender}>
-                  {row}
-                </Profiler>
-              );
-            return row;
-          }}
-        />
-      </View>
-    </ScrollView>
+    <RosterBodyLayout
+      scroll={scroll}
+      contentWidth={contentWidth}
+      viewport={viewport}
+      gridZone={<GridComponent ticks={ticks} contentWidth={contentWidth} />}
+      listZone={<RosterLaneList {...props} />}
+    />
   );
 }

package/src/components/roster/parts/header-cell.tsx

@@ -1,7 +1,7 @@
 import { Text } from 'react-native';
-import type { RosterTick } from '../roster.types';
+import type { HeaderCellInput } from '../roster.types';
 
-export function RosterHeaderCell({ tick }: { tick: RosterTick }) {
+export function RosterHeaderCell({ tick }: HeaderCellInput) {
   return (
     <Text numberOfLines={1} style={{ color: '#475569', fontSize: 11, padding: 4 }}>
       {tick.label}

package/src/components/roster/parts/header.tsx

@@ -2,7 +2,12 @@ import { View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import type { HeaderInput } from '../roster.types';
 
-export function RosterHeader({ ticks, contentWidth, scroll, headerCellZone }: HeaderInput) {
+export function RosterHeader({
+  ticks,
+  contentWidth,
+  scroll,
+  headerCellComponent: HeaderCellComponent,
+}: HeaderInput) {
   return (
     <Animated.View
       testID="roster-header"
@@ -10,7 +15,7 @@ export function RosterHeader({ ticks, contentWidth, scroll, headerCellZone }: He
     >
       {ticks.map((tick) => (
         <View key={tick.time} style={{ position: 'absolute', left: tick.x, top: 0 }}>
-          {headerCellZone({ tick })}
+          <HeaderCellComponent tick={tick} />
         </View>
       ))}
     </Animated.View>

package/src/components/roster/parts/lane-label-column.tsx

@@ -6,7 +6,7 @@ export function RosterLaneLabelColumn({
   labels,
   projection,
   scroll,
-  laneLabelZone,
+  laneLabelComponent: LaneLabelComponent,
 }: LabelColumnInput) {
   return (
     <Animated.View
@@ -23,7 +23,7 @@ export function RosterLaneLabelColumn({
             width: '100%',
           }}
         >
-          {laneLabelZone(label)}
+          <LaneLabelComponent {...label} />
         </View>
       ))}
     </Animated.View>

package/src/components/roster/parts/lane-list.tsx

@@ -0,0 +1,74 @@
+import { LegendList } from '@legendapp/list';
+import { Profiler, type ProfilerOnRenderCallback } from 'react';
+import { LaneRow } from '../lanes/lane';
+import type { BodyInput } from '../roster.types';
+import { bodyContentKey } from '../utils/body-content-key';
+
+export function RosterLaneList({
+  lanes,
+  geometryFor,
+  projection,
+  scroll,
+  press,
+  contentWidth,
+  viewport,
+  window,
+  intervalComponent,
+  gapComponent,
+  highlightSource,
+  onIntervalHover,
+  incompleteLabel,
+  onRowRender,
+}: Omit<BodyInput, 'ticks' | 'gridComponent'> & {
+  /** Development-only Profiler hook used by the gallery; not a supported customization point. */
+  onRowRender?: ProfilerOnRenderCallback;
+}) {
+  return (
+    <LegendList
+      testID="roster-vertical-scroll"
+      data={lanes}
+      extraData={bodyContentKey({
+        window,
+        projection,
+        highlightSource,
+        intervalComponent,
+        gapComponent,
+        onIntervalHover,
+        incompleteLabel,
+      })}
+      keyExtractor={(lane) => lane.id}
+      estimatedListSize={{ width: contentWidth, height: viewport.height }}
+      estimatedItemSize={projection.rowHeight}
+      getFixedItemSize={() => projection.rowHeight}
+      drawDistance={0}
+      recycleItems={false}
+      maintainVisibleContentPosition={false}
+      onScroll={scroll.onVerticalScroll}
+      scrollEventThrottle={16}
+      style={{ flex: 1 }}
+      renderItem={({ item }) => {
+        const row = (
+          <LaneRow
+            lane={item}
+            geometry={geometryFor(item)}
+            width={contentWidth}
+            rowHeight={projection.rowHeight}
+            press={press}
+            intervalComponent={intervalComponent}
+            gapComponent={gapComponent}
+            highlightSource={highlightSource}
+            onIntervalHover={onIntervalHover}
+            incompleteLabel={incompleteLabel}
+          />
+        );
+        if (onRowRender)
+          return (
+            <Profiler id={item.id} onRender={onRowRender}>
+              {row}
+            </Profiler>
+          );
+        return row;
+      }}
+    />
+  );
+}

package/src/components/roster/roster.types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, RefObject } from 'react';
+import type { ComponentType, ReactNode, RefObject } from 'react';
 import type {
   LayoutChangeEvent,
   NativeScrollEvent,
@@ -75,15 +75,16 @@ export type LaneLabelInput = {
   incompleteLabel: string;
   neverSetLabel: string;
 };
+export type HeaderCellInput = { tick: RosterTick };
 export type GridInput = { ticks: RosterTick[]; contentWidth: number };
 export type HeaderInput = Pick<RosterModel, 'ticks' | 'projection' | 'scroll' | 'contentWidth'> & {
   /** Time label filler, positioned by the header. */
-  headerCellZone: (input: { tick: RosterTick }) => ReactNode;
+  headerCellComponent: ComponentType<HeaderCellInput>;
 };
 export type LabelColumnInput = Pick<RosterModel, 'projection' | 'scroll'> & {
   labels: LaneLabelInput[];
   /** Lane label filler, positioned at the fixed row height. */
-  laneLabelZone: (input: LaneLabelInput) => ReactNode;
+  laneLabelComponent: ComponentType<LaneLabelInput>;
 };
 export type BodyInput = Pick<
   RosterModel,
@@ -101,11 +102,11 @@ export type BodyInput = Pick<
   onIntervalHover?: (rect: Rect, lane: Lane) => void;
   incompleteLabel?: string;
   /** Covered rect view; position it using the final rect bounds, as RosterInterval does. */
-  intervalZone: (input: IntervalInput) => ReactNode;
+  intervalComponent: ComponentType<IntervalInput>;
   /** Removed rect filler, placed inside a pressable by LaneRow. */
-  gapZone: (input: GapInput) => ReactNode;
+  gapComponent: ComponentType<GapInput>;
   /** Noninteractive tick lines behind every lane, sized to the content width. */
-  gridZone: (input: GridInput) => ReactNode;
+  gridComponent: ComponentType<GridInput>;
 };
 /**
  * Chrome style props and their NativeWind class twins. Class props resolve only
@@ -133,23 +134,23 @@ export type RosterProps = RosterInput &
     incompleteLabel?: string;
     neverSetLabel?: string;
     /** Label, differing lane zone, effective flag, and completeness notice. */
-    laneLabelZone?: (input: LaneLabelInput) => ReactNode;
+    laneLabelComponent?: ComponentType<LaneLabelInput>;
     /** Time label within one positioned header tick. */
-    headerCellZone?: (input: { tick: RosterTick }) => ReactNode;
+    headerCellComponent?: ComponentType<HeaderCellInput>;
     /** Covered rect view; use rect bounds for absolute position, rect.z for stacking, and pointerEvents="none" for row hit testing. */
-    intervalZone?: (input: IntervalInput) => ReactNode;
+    intervalComponent?: ComponentType<IntervalInput>;
     /** Removed rect content; LaneRow supplies the invisible pressable. */
-    gapZone?: (input: GapInput) => ReactNode;
+    gapComponent?: ComponentType<GapInput>;
     /** Tick lines behind the lanes; RosterGrid draws one hairline per tick. */
-    gridZone?: (input: GridInput) => ReactNode;
+    gridComponent?: ComponentType<GridInput>;
     /** Empty roster content, conventionally the text No lanes. */
-    emptyZone?: () => ReactNode;
+    emptyZone?: ReactNode;
     /** Top-left cell above the lane labels; RosterCorner renders nothing. */
-    cornerZone?: () => ReactNode;
+    cornerZone?: ReactNode;
     /** Frozen time header, supplied with ticks, scale, and shared scrolling. */
-    headerZone?: (input: HeaderInput) => ReactNode;
+    headerComponent?: ComponentType<HeaderInput>;
     /** Frozen labels, supplied with ordered lanes and per-lane flag and completeness. */
-    laneLabelColumnZone?: (input: LabelColumnInput) => ReactNode;
+    laneLabelColumnComponent?: ComponentType<LabelColumnInput>;
     /** Virtualized lane body, supplied with geometry, projection, scrolling, and press resolution. */
-    bodyZone?: (input: BodyInput) => ReactNode;
+    bodyComponent?: ComponentType<BodyInput>;
   };

package/src/components/roster/utils/body-content-key.ts

@@ -1,13 +1,13 @@
 import type { BodyInput } from '../roster.types';
 
-const zoneIds = new WeakMap<object, number>();
-let nextZoneId = 0;
+const identityIds = new WeakMap<object, number>();
+let nextIdentityId = 0;
 
-function zoneId(zone: object): number {
-  let id = zoneIds.get(zone);
+function identityId(identity: object): number {
+  let id = identityIds.get(identity);
   if (id === undefined) {
-    id = nextZoneId++;
-    zoneIds.set(zone, id);
+    id = nextIdentityId++;
+    identityIds.set(identity, id);
   }
   return id;
 }
@@ -16,8 +16,8 @@ export function bodyContentKey({
   window,
   projection,
   highlightSource,
-  intervalZone,
-  gapZone,
+  intervalComponent,
+  gapComponent,
   onIntervalHover,
   incompleteLabel,
 }: Pick<
@@ -25,8 +25,8 @@ export function bodyContentKey({
   | 'window'
   | 'projection'
   | 'highlightSource'
-  | 'intervalZone'
-  | 'gapZone'
+  | 'intervalComponent'
+  | 'gapComponent'
   | 'onIntervalHover'
   | 'incompleteLabel'
 >): string {
@@ -38,9 +38,9 @@ export function bodyContentKey({
     projection.pxPerMinute,
     highlightSource?.kind,
     highlightSource?.id,
-    zoneId(intervalZone),
-    zoneId(gapZone),
-    onIntervalHover && zoneId(onIntervalHover),
+    identityId(intervalComponent),
+    identityId(gapComponent),
+    onIntervalHover && identityId(onIntervalHover),
     incompleteLabel,
   ]);
 }

package/src/components/schedule/README.md

@@ -3,16 +3,21 @@
 This feature is about a schedule; its children are days.
 
 - Root entry exports: `Schedule`, `useSchedule`, the `ScheduleXxx` parts, and
-  every `ScheduleXxxInput` zone type from `schedule.types.ts`
+  every `ScheduleXxxInput` slot input type from `schedule.types.ts`
 
 - `index.tsx`: the chassis; measures the viewport, calls `useSchedule`, composes zones
 - `use-schedule.ts`, `use-schedule-viewport.ts`: the hook and the width context
 - `layout.tsx`: arranges header, gutter, and days regions only
-- `schedule.types.ts`: props, model, and every zone input type
+- `schedule.types.ts`: props, model, and every slot input type
 - `parts/`: collection-level parts (gutter, incomplete)
 - `days/`: `ScheduleDay`, the day and day-header layouts, and day-local parts
 - `utils/days.ts`: header dates, now position, and transition bounds
 
-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 Schedule
 section and in `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
+list to split: days, transitions, and rects already map in their owning parts.
+Schedule has ten input-bearing component slots and no zero-argument singleton slots.

package/src/components/schedule/days/day.tsx

@@ -7,7 +7,14 @@ import { transitionBounds } from '../utils/days';
 import { ScheduleDayLayout } from './layout';
 
 type ScheduleDayZones = Required<
-  Pick<ScheduleProps, 'gridZone' | 'columnZone' | 'transitionZone' | 'intervalZone' | 'gapZone'>
+  Pick<
+    ScheduleProps,
+    | 'gridComponent'
+    | 'columnComponent'
+    | 'transitionComponent'
+    | 'intervalComponent'
+    | 'gapComponent'
+  >
 >;
 
 type ScheduleDayProps = ScheduleDayZones & {
@@ -33,11 +40,11 @@ export function ScheduleDay({
   highlightSource,
   hours,
   press,
-  gridZone,
-  columnZone,
-  transitionZone,
-  intervalZone,
-  gapZone,
+  gridComponent: GridComponent,
+  columnComponent: ColumnComponent,
+  transitionComponent: TransitionComponent,
+  intervalComponent,
+  gapComponent,
   nowLineZone,
 }: ScheduleDayProps) {
   return (
@@ -53,20 +60,26 @@ export function ScheduleDay({
         width={projection.columnWidth}
         height={24 * projection.pxPerHour}
         chromeZ={Math.max(0, ...lane.layers.map((layer) => layer.z)) + 1}
-        gridZone={gridZone({ hours, pxPerHour: projection.pxPerHour })}
-        columnZone={columnZone({
-          day,
-          lane,
-          rects: geometry.rects.filter((rect) => rect.column === column),
-          gapRects: geometry.gapRects.filter((rect) => rect.column === column),
-          highlightSource,
-          intervalZone,
-          gapZone,
-          press,
-        })}
+        gridZone={<GridComponent hours={hours} pxPerHour={projection.pxPerHour} />}
+        columnZone={
+          <ColumnComponent
+            day={day}
+            lane={lane}
+            rects={geometry.rects.filter((rect) => rect.column === column)}
+            gapRects={geometry.gapRects.filter((rect) => rect.column === column)}
+            highlightSource={highlightSource}
+            intervalComponent={intervalComponent}
+            gapComponent={gapComponent}
+            press={press}
+          />
+        }
         transitionZone={day.transitions.map((transition) => (
           <Fragment key={transition.at}>
-            {transitionZone({ day, transition, ...transitionBounds(day, transition, projection) })}
+            <TransitionComponent
+              day={day}
+              transition={transition}
+              {...transitionBounds(day, transition, projection)}
+            />
           </Fragment>
         ))}
         nowLineZone={nowLineZone}

package/src/components/schedule/days/header-layout.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 type ScheduleDayHeaderLayoutProps = {
   width: number;
-  /** Day heading supplied by dayHeaderZone, aligned with its column. */
+  /** Day heading supplied by dayHeaderComponent, aligned with its column. */
   headerZone: ReactNode;
 };
 

package/src/components/schedule/days/parts/column.tsx

@@ -8,8 +8,8 @@ export function ScheduleColumn({
   rects,
   gapRects,
   press,
-  intervalZone,
-  gapZone,
+  intervalComponent: IntervalComponent,
+  gapComponent: GapComponent,
   highlightSource,
 }: ScheduleColumnInput) {
   return [...lane.layers]
@@ -20,15 +20,15 @@ export function ScheduleColumn({
           .filter((rect) => rect.layerId === layer.id)
           .map((rect) => (
             <Fragment key={`interval-${rect.y}:${rect.height}`}>
-              {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>
           ))}
         {gapRects
@@ -51,7 +51,7 @@ export function ScheduleColumn({
                 zIndex: rect.z,
               }}
             >
-              {gapZone({ rect, layer, lane })}
+              <GapComponent rect={rect} layer={layer} lane={lane} />
             </Pressable>
           ))}
       </Fragment>

package/src/components/schedule/index.tsx

@@ -1,4 +1,3 @@
-import { Fragment } from 'react';
 import { View } from 'react-native';
 import { RosterGap } from '../layers/parts/gap';
 import { RosterInterval } from '../layers/parts/interval';
@@ -50,40 +49,40 @@ function ScheduleContent(props: ScheduleProps) {
     lane,
     windowSpec,
     highlightSource,
-    gutterZone = ScheduleGutter,
-    dayHeaderZone = ScheduleDayHeader,
-    skippedDateZone = ScheduleSkippedDate,
-    columnZone = ScheduleColumn,
-    gridZone = ScheduleGrid,
-    transitionZone = ScheduleTransition,
-    nowLineZone = ScheduleNowLine,
-    intervalZone = RosterInterval,
-    gapZone = RosterGap,
-    incompleteZone = ScheduleIncomplete,
+    gutterComponent: GutterComponent = ScheduleGutter,
+    dayHeaderComponent: DayHeaderComponent = ScheduleDayHeader,
+    skippedDateComponent: SkippedDateComponent = ScheduleSkippedDate,
+    columnComponent = ScheduleColumn,
+    gridComponent = ScheduleGrid,
+    transitionComponent = ScheduleTransition,
+    nowLineComponent: NowLineComponent = ScheduleNowLine,
+    intervalComponent = RosterInterval,
+    gapComponent = RosterGap,
+    incompleteComponent: IncompleteComponent = ScheduleIncomplete,
     incompleteLabel = 'Availability may be incomplete',
   } = props;
   const position = nowPosition(projection, now);
   const incomplete =
-    lane.complete === false ? incompleteZone({ lane, label: incompleteLabel }) : null;
+    lane.complete === false ? <IncompleteComponent lane={lane} label={incompleteLabel} /> : null;
   return (
     <ScheduleLayout
       headerStyle={props.headerStyle}
       gutterStyle={props.gutterStyle}
       daysStyle={props.daysStyle}
       incompleteZone={incomplete}
-      gutterZone={gutterZone({ hours, pxPerHour: projection.pxPerHour })}
+      gutterZone={<GutterComponent hours={hours} pxPerHour={projection.pxPerHour} />}
       dayHeaderZone={headerDates(windowSpec, days).map(({ localDate, day }) => {
-        if (!day) return <Fragment key={localDate}>{skippedDateZone({ localDate })}</Fragment>;
+        if (!day) return <SkippedDateComponent key={localDate} localDate={localDate} />;
         return (
           <ScheduleDayHeaderLayout
             key={localDate}
             width={projection.columnWidth}
-            headerZone={dayHeaderZone({ day })}
+            headerZone={<DayHeaderComponent day={day} />}
           />
         );
       })}
       daysZone={days.map((day, column) => {
-        const nowLine = position?.column === column ? nowLineZone(position) : null;
+        const nowLine = position?.column === column ? <NowLineComponent {...position} /> : null;
         return (
           <ScheduleDay
             key={day.localDate}
@@ -95,11 +94,11 @@ function ScheduleContent(props: ScheduleProps) {
             highlightSource={highlightSource}
             hours={hours}
             press={(x, y) => press(column, x, y)}
-            gridZone={gridZone}
-            columnZone={columnZone}
-            transitionZone={transitionZone}
-            intervalZone={intervalZone}
-            gapZone={gapZone}
+            gridComponent={gridComponent}
+            columnComponent={columnComponent}
+            transitionComponent={transitionComponent}
+            intervalComponent={intervalComponent}
+            gapComponent={gapComponent}
             nowLineZone={nowLine}
           />
         );

package/src/components/schedule/schedule.types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type {
   DayColumn,
@@ -53,9 +53,9 @@ export type ScheduleColumnInput = {
   highlightSource?: Source;
   press: (x: number, y: number) => void;
   /** Covered rect filler shared with Roster; final bounds and stacking belong to the rect. */
-  intervalZone: (input: IntervalInput) => ReactNode;
+  intervalComponent: ComponentType<IntervalInput>;
   /** Removed rect content shared with Roster; the column supplies its pressable bounds. */
-  gapZone: (input: GapInput) => ReactNode;
+  gapComponent: ComponentType<GapInput>;
 };
 export type ScheduleHoursInput = { hours: number[]; pxPerHour: number };
 /**
@@ -81,23 +81,23 @@ export type ScheduleProps = ScheduleInput &
   ScheduleStyleProps & {
     incompleteLabel?: string;
     /** Frozen left hour labels; ScheduleGutter receives hours 0 through 23 and their scale. */
-    gutterZone?: (input: ScheduleHoursInput) => ReactNode;
+    gutterComponent?: ComponentType<ScheduleHoursInput>;
     /** Hour bands behind each day's rects; ScheduleGrid draws 24 bordered bands. */
-    gridZone?: (input: ScheduleHoursInput) => ReactNode;
+    gridComponent?: ComponentType<ScheduleHoursInput>;
     /** Frozen day heading; ScheduleDayHeader shows weekday, localDate, and a transition badge. */
-    dayHeaderZone?: (input: { day: DayColumn }) => ReactNode;
+    dayHeaderComponent?: ComponentType<{ day: DayColumn }>;
     /** Wholly skipped local date marker; ScheduleSkippedDate labels its zero-width header gap. */
-    skippedDateZone?: (input: { localDate: string }) => ReactNode;
+    skippedDateComponent?: ComponentType<{ localDate: string }>;
     /** The day's covered and removed rects; ScheduleColumn draws final bounds in layer order. */
-    columnZone?: (input: ScheduleColumnInput) => ReactNode;
+    columnComponent?: ComponentType<ScheduleColumnInput>;
     /** Transition chrome only; ScheduleTransition hatches skips and divides repeats with again. */
-    transitionZone?: (input: ScheduleTransitionInput) => ReactNode;
+    transitionComponent?: ComponentType<ScheduleTransitionInput>;
     /** Current day's line at y; ScheduleNowLine spans the containing column. */
-    nowLineZone?: (input: { y: number; column: number }) => ReactNode;
+    nowLineComponent?: ComponentType<{ y: number; column: number }>;
     /** Covered rect filler shared with Roster; position using rect bounds and use pointerEvents="none". */
-    intervalZone?: (input: IntervalInput) => ReactNode;
+    intervalComponent?: ComponentType<IntervalInput>;
     /** Removed rect content shared with Roster; ScheduleColumn supplies the invisible pressable. */
-    gapZone?: (input: GapInput) => ReactNode;
+    gapComponent?: ComponentType<GapInput>;
     /** Completeness notice in reserved empty space above the day grid; receives the lane and localized label. */
-    incompleteZone?: (input: { lane: Lane; label: string }) => ReactNode;
+    incompleteComponent?: ComponentType<{ lane: Lane; label: string }>;
   };