react-native-roster 0.0.1 → 0.2.0

package/README.md

@@ -34,7 +34,7 @@ hundred people without lying about time zones, this is the one.
   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.** Every visual region is an optional render function, and
+- **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.
@@ -130,7 +130,7 @@ export function RecurringExample() {
 
 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 zone filler; content-keyed caches reuse unchanged occurrences. The
+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,
@@ -167,12 +167,13 @@ and "Availability may be incomplete"; both are localizable props.
 
 | Import | Shipped surface |
 | --- | --- |
-| `react-native-roster` | `Roster`, `Schedule`, `useRoster`, `useSchedule`, zone fillers, and all core exports. |
+| `react-native-roster` | `Roster`, `Schedule`, hooks, slot components, `RosterSelectionPopover`, `PortalHost`, `Portal`, and all core exports. |
 | `react-native-roster/core` | Types, `layoutLane`, `coverageFor`, `flagFor`, axis helpers, comparators, and counters. Standard JavaScript and `Intl` only. |
 | `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. Metro selects TypeScript
+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
@@ -203,23 +204,44 @@ to `byLabel`; `byCoverage({ measure })` sorts by coverage descending.
 
 ## Roster zones
 
-Every zone is an optional render function. Compose the exported default filler
-inside a replacement to retain scrolling, geometry, or press behavior.
+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.
 
-| Zone | Receives | Default filler and behavior |
+| Slot | Component inputs or node | Default and behavior |
 | --- | --- | --- |
-| `emptyZone` | Nothing | `RosterEmpty`: No lanes. |
-| `cornerZone` | Nothing | `RosterCorner`: nothing; the cell above the labels, `laneLabelWidth` wide. |
-| `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. |
-| `headerZone` | `ticks`, `projection`, `scroll`, `contentWidth`, `headerCellZone` | `RosterHeader`: frozen header following horizontal offset. |
-| `laneLabelColumnZone` | `labels`, `projection`, `scroll`, `laneLabelZone` | `RosterLaneLabelColumn`: frozen labels following vertical offset. |
-| `bodyZone` | Ordered `lanes`, `window`, `geometryFor`, `projection`, `scroll`, `press`, `ticks`, `viewport`, `contentWidth`, highlight and hover, incomplete label, and rect zones | `RosterBody`: virtualized lanes. |
-
-A custom interval filler positions at `rect.x/y`, uses `rect.width/height/z`,
+| `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. |
+| `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`, highlight and hover, incomplete label, and rect components | `RosterBody`: virtualized lanes. |
+
+`RosterBody` composes `RosterBodyLayout`, which arranges `gridZone` and `listZone`
+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`,
@@ -230,6 +252,160 @@ 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).
 
+### 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.
+
+### 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.
+
 ## Schedule and its zones
 
 ```tsx
@@ -249,17 +425,17 @@ 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.
 
-| 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 and 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 above the grid when the lane is 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 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. |
 
 ## NativeWind
 
@@ -297,8 +473,8 @@ import { Roster } from 'react-native-roster';
 />
 ```
 
-Zone fillers are ordinary React Native views, so a custom `laneLabelZone` or
-`intervalZone` uses `className` on `View` and `Text` directly. Without the
+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
@@ -321,7 +497,7 @@ network). The home page lists every fixture route:
 - 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 zone fillers, with a sun and moon theme toggle.
+  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.
 
@@ -362,6 +538,7 @@ bun run check
 the library build, the static web export, tests with coverage, knip, strict
 publint, size-limit, and Playwright.
 
+- [Migrations](https://github.com/simiancraft/react-native-roster/blob/main/docs/migrations.md) lists prop renames by version with before-and-after examples.
 - [Adapter guide](./docs/adapters.md), [recurrence semantics](./docs/recurrence.md),
   [timezones](./docs/timezones.md), [caches](./docs/caches.md), and the
   [performance guide](./docs/performance.md).

package/dist/src/components/primitives/portal.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+/** Mount once at the destination for a named native portal. */
+export declare function PortalHost({ name }: {
+    name: string;
+}): import("react/jsx-runtime").JSX.Element[];
+/** Register content at a named native host; caller context does not cross the store. */
+export declare function Portal({ hostName, name, children, }: {
+    hostName: string;
+    name: string;
+    children: ReactNode;
+}): null;
+//# sourceMappingURL=portal.d.ts.map

package/dist/src/components/primitives/portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAmC,MAAM,OAAO,CAAC;AAgBlF,+DAA+D;AAC/D,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,6CAOpD;AAED,wFAAwF;AACxF,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,QAYA"}

package/dist/src/components/primitives/portal.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalHost = PortalHost;
+exports.Portal = Portal;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hosts = new Map();
+const listeners = new Set();
+const empty = new Map();
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+function publish(hostName, nodes) {
+    if (nodes.size)
+        hosts.set(hostName, nodes);
+    else
+        hosts.delete(hostName);
+    for (const listener of listeners)
+        listener();
+}
+/** Mount once at the destination for a named native portal. */
+function PortalHost({ name }) {
+    const nodes = (0, react_1.useSyncExternalStore)(subscribe, () => hosts.get(name) ?? empty, () => empty);
+    return Array.from(nodes, ([key, node]) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: node }, key));
+}
+/** Register content at a named native host; caller context does not cross the store. */
+function Portal({ hostName, name, children, }) {
+    (0, react_1.useEffect)(() => {
+        const nodes = new Map(hosts.get(hostName));
+        nodes.set(name, children);
+        publish(hostName, nodes);
+        return () => {
+            const nodes = new Map(hosts.get(hostName));
+            nodes.delete(name);
+            publish(hostName, nodes);
+        };
+    }, [hostName, name, children]);
+    return null;
+}
+//# sourceMappingURL=portal.js.map

package/dist/src/components/primitives/portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../../src/components/primitives/portal.tsx"],"names":[],"mappings":";;;;;AAAA,iCAAkF;AAElF,MAAM,KAAK,GAAG,IAAI,GAAG,EAAkC,CAAC;AACxD,MAAM,SAAS,GAAG,IAAI,GAAG,EAAc,CAAC;AACxC,MAAM,KAAK,GAAG,IAAI,GAAG,EAAqB,CAAC;AAE3C,SAAS,SAAS,CAAC,QAAoB;IACrC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACxB,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAC1C,CAAC;AACD,SAAS,OAAO,CAAC,QAAgB,EAAE,KAA6B;IAC9D,IAAI,KAAK,CAAC,IAAI;QAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;;QACtC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IAC5B,KAAK,MAAM,QAAQ,IAAI,SAAS;QAAE,QAAQ,EAAE,CAAC;AAC/C,CAAC;AAED,+DAA+D;AAC/D,oBAA2B,EAAE,IAAI,EAAoB;IACnD,MAAM,KAAK,GAAG,IAAA,4BAAoB,EAChC,SAAS,EACT,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,EAC9B,GAAG,EAAE,CAAC,KAAK,CACZ,CAAC;IACF,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,uBAAC,gBAAQ,cAAY,IAAI,IAAV,GAAG,CAAmB,CAAC,CAAC;AACnF,CAAC;AAED,wFAAwF;AACxF,gBAAuB,EACrB,QAAQ,EACR,IAAI,EACJ,QAAQ,GAKT;IACC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC3C,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;QAC1B,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACzB,OAAO,GAAG,EAAE;YACV,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC3C,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC/B,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/src/components/roster/body-layout.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { BodyInput } from './roster.types';
+export declare 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;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=body-layout.d.ts.map

package/dist/src/components/roster/body-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"body-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/roster/body-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAEhD,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,cAAc,GAAG,UAAU,CAAC,GAAG;IAC3D,gDAAgD;IAChD,QAAQ,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAsBA"}

package/dist/src/components/roster/body-layout.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RosterBodyLayout = RosterBodyLayout;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+function RosterBodyLayout({ scroll, contentWidth, viewport, gridZone, listZone, }) {
+    const [contentOffset] = (0, react_1.useState)(() => ({ x: scroll.x.get(), y: 0 }));
+    const bodyRef = scroll.bodyRef;
+    (0, react_1.useEffect)(() => {
+        bodyRef.current?.scrollTo({ x: contentOffset.x, animated: false });
+    }, [bodyRef, contentOffset]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { testID: "roster-horizontal-scroll", ref: scroll.bodyRef, contentOffset: contentOffset, horizontal: true, onScroll: scroll.onBodyScroll, scrollEventThrottle: 16, style: { flex: 1 }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { width: contentWidth, height: viewport.height }, children: [gridZone, listZone] }) }));
+}
+//# sourceMappingURL=body-layout.js.map

package/dist/src/components/roster/body-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"body-layout.js","sourceRoot":"","sources":["../../../../src/components/roster/body-layout.tsx"],"names":[],"mappings":";;;;AAAA,iCAA4D;AAC5D,+CAAgD;AAGhD,0BAAiC,EAC/B,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,GAMT;IACC,MAAM,CAAC,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IACtE,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;IAC/B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,CAAC,EAAE,aAAa,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAC7B,OAAO,CACL,uBAAC,yBAAU,IACT,MAAM,EAAC,0BAA0B,EACjC,GAAG,EAAE,MAAM,CAAC,OAAO,EACnB,aAAa,EAAE,aAAa,EAC5B,UAAU,QACV,QAAQ,EAAE,MAAM,CAAC,YAAY,EAC7B,mBAAmB,EAAE,EAAE,EACvB,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAElB,wBAAC,mBAAI,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,EAAE,aAC1D,QAAQ,EACR,QAAQ,IACJ,GACI,CACd,CAAC;AACJ,CAAC"}

package/dist/src/components/roster/index.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import type { RosterProps } from './roster.types';
-export declare function Roster(props: RosterProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+export declare function Roster(props: RosterProps): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/components/roster/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/roster/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2WA2ExC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/roster/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAa9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAQlD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,+TAmIxC"}

package/dist/src/components/roster/index.js

@@ -2,6 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Roster = Roster;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("../../core");
 const gap_1 = require("../layers/parts/gap");
 const interval_1 = require("../layers/parts/interval");
 const lane_label_1 = require("./lanes/parts/lane-label");
@@ -13,17 +15,37 @@ const grid_1 = require("./parts/grid");
 const header_1 = require("./parts/header");
 const header_cell_1 = require("./parts/header-cell");
 const lane_label_column_1 = require("./parts/lane-label-column");
+const selection_layout_1 = require("./selection/selection-layout");
 const use_roster_1 = require("./use-roster");
+const defaultEmptyZone = (0, jsx_runtime_1.jsx)(empty_1.RosterEmpty, {});
+const defaultCornerZone = (0, jsx_runtime_1.jsx)(corner_1.RosterCorner, {});
 function Roster(props) {
-    const { status, orderedLanes, laneState, window, geometryFor, projection, scroll, press, ticks, contentWidth, viewport, onLayout, } = (0, use_roster_1.useRoster)(props);
-    const { emptyZone = empty_1.RosterEmpty, cornerZone = corner_1.RosterCorner, headerZone = header_1.RosterHeader, laneLabelColumnZone = lane_label_column_1.RosterLaneLabelColumn, bodyZone = body_1.RosterBody, headerCellZone = header_cell_1.RosterHeaderCell, laneLabelZone = lane_label_1.RosterLaneLabel, intervalZone = interval_1.RosterInterval, gapZone = gap_1.RosterGap, gridZone = grid_1.RosterGrid, incompleteLabel = 'Availability may be incomplete', neverSetLabel = 'No availability set', } = props;
+    const { selection, dismissSelection, status, orderedLanes, laneState, window, geometryFor, projection, scroll, press, ticks, contentWidth, viewport, onLayout, } = (0, use_roster_1.useRoster)({ ...props, selectable: Boolean(props.intervalDetailComponent) });
+    const { intervalDetailComponent: IntervalDetailComponent, selectionLayout: SelectionLayout = selection_layout_1.RosterSelectionPopover, emptyZone = defaultEmptyZone, cornerZone = defaultCornerZone, headerComponent: HeaderComponent = header_1.RosterHeader, laneLabelColumnComponent: LaneLabelColumnComponent = lane_label_column_1.RosterLaneLabelColumn, bodyComponent: BodyComponent = body_1.RosterBody, headerCellComponent = header_cell_1.RosterHeaderCell, laneLabelComponent = lane_label_1.RosterLaneLabel, intervalComponent = interval_1.RosterInterval, gapComponent = gap_1.RosterGap, gridComponent = grid_1.RosterGrid, incompleteLabel = 'Availability may be incomplete', neverSetLabel = 'No availability set', } = props;
+    const hostId = (0, react_1.useId)();
     if (status === 'empty')
-        return emptyZone();
+        return emptyZone;
     if (window.start === window.end)
         return null;
-    return ((0, jsx_runtime_1.jsx)(layout_1.RosterLayout, { style: props.style, headerStyle: props.headerStyle, laneLabelColumnStyle: props.laneLabelColumnStyle, 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 };
+    let targetBounds = null;
+    if (selection) {
+        targetBounds = {
+            x: selection.rect.x,
+            y: orderedLanes.findIndex((lane) => lane.id === selection.lane.id) * projection.rowHeight +
+                selection.rect.y,
+            width: selection.rect.width,
+            height: selection.rect.height,
+        };
+    }
+    let contentZone = null;
+    if (selection && IntervalDetailComponent) {
+        contentZone = ((0, jsx_runtime_1.jsx)(IntervalDetailComponent, { ...selection, viewTimezone: projection.viewTimezone, highlighted: (0, core_1.hasSource)(selection.rect.sources, props.highlightSource) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(layout_1.RosterLayout, { style: props.style, headerStyle: props.headerStyle, laneLabelColumnStyle: props.laneLabelColumnStyle, bodyStyle: props.bodyStyle, laneLabelWidth: props.laneLabelWidth, onLayout: onLayout, cornerZone: cornerZone, headerZone: (0, jsx_runtime_1.jsx)(HeaderComponent, { ticks: ticks, projection: projection, scroll: scroll, contentWidth: contentWidth, headerCellComponent: headerCellComponent }), laneLabelColumnZone: (0, jsx_runtime_1.jsx)(LaneLabelColumnComponent, { labels: orderedLanes.map((lane) => {
+                const state = laneState.get(lane.id) ?? {
+                    flag: 'none',
+                    complete: true,
+                };
                 return {
                     lane,
                     ...state,
@@ -31,26 +53,11 @@ function Roster(props) {
                     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,
-        }) }));
+            }), projection: projection, scroll: scroll, laneLabelComponent: laneLabelComponent }), bodyZone: (0, jsx_runtime_1.jsx)(SelectionLayout, { portalHost: props.portalHost ?? `roster-${hostId}`, open: selection !== null, onDismiss: dismissSelection, scroll: {
+                x: scroll.x,
+                y: scroll.y,
+                headerStyle: scroll.headerStyle,
+                labelStyle: scroll.labelStyle,
+            }, targetBounds: targetBounds, contentZone: contentZone, anchorZone: (0, jsx_runtime_1.jsx)(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 }) }) }));
 }
 //# sourceMappingURL=index.js.map

package/dist/src/components/roster/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/roster/index.tsx"],"names":[],"mappings":";;;;AAAA,6CAAgD;AAChD,uDAA0D;AAC1D,yDAA2D;AAC3D,qCAAwC;AACxC,uCAA0C;AAC1C,2CAA8C;AAC9C,yCAA4C;AAC5C,uCAA0C;AAC1C,2CAA8C;AAC9C,qDAAuD;AACvD,iEAAkE;AAElE,6CAAyC;AAEzC,gBAAuB,KAAkB;IACvC,MAAM,EACJ,MAAM,EACN,YAAY,EACZ,SAAS,EACT,MAAM,EACN,WAAW,EACX,UAAU,EACV,MAAM,EACN,KAAK,EACL,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,GAAG,IAAA,sBAAS,EAAC,KAAK,CAAC,CAAC;IACrB,MAAM,EACJ,SAAS,GAAG,mBAAW,EACvB,UAAU,GAAG,qBAAY,EACzB,UAAU,GAAG,qBAAY,EACzB,mBAAmB,GAAG,yCAAqB,EAC3C,QAAQ,GAAG,iBAAU,EACrB,cAAc,GAAG,8BAAgB,EACjC,aAAa,GAAG,4BAAe,EAC/B,YAAY,GAAG,yBAAc,EAC7B,OAAO,GAAG,eAAS,EACnB,QAAQ,GAAG,iBAAU,EACrB,eAAe,GAAG,gCAAgC,EAClD,aAAa,GAAG,qBAAqB,GACtC,GAAG,KAAK,CAAC;IACV,IAAI,MAAM,KAAK,OAAO;QAAE,OAAO,SAAS,EAAE,CAAC;IAC3C,IAAI,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IAC7C,OAAO,CACL,uBAAC,qBAAY,IACX,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,EAChD,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EAAE,EACxB,UAAU,EAAE,UAAU,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC,EACnF,mBAAmB,EAAE,mBAAmB,CAAC;YACvC,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBAChC,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;gBACzE,OAAO;oBACL,IAAI;oBACJ,GAAG,KAAK;oBACR,YAAY,EAAE,UAAU,CAAC,YAAY;oBACrC,eAAe;oBACf,aAAa;iBACd,CAAC;YACJ,CAAC,CAAC;YACF,UAAU;YACV,MAAM;YACN,aAAa;SACd,CAAC,EACF,QAAQ,EAAE,QAAQ,CAAC;YACjB,KAAK,EAAE,YAAY;YACnB,MAAM;YACN,WAAW;YACX,UAAU;YACV,MAAM;YACN,KAAK;YACL,KAAK;YACL,YAAY;YACZ,QAAQ;YACR,YAAY;YACZ,OAAO;YACP,QAAQ;YACR,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,eAAe;SAChB,CAAC,GACF,CACH,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/roster/index.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/roster/lanes/lane.d.ts

@@ -1,10 +1,10 @@
 import type { Lane, LaneGeometry } from '../../../core';
 import type { BodyInput } from '../roster.types';
-export type LaneRowProps = Pick<BodyInput, 'press' | 'intervalZone' | 'gapZone' | 'highlightSource' | 'onIntervalHover' | 'incompleteLabel'> & {
+export type LaneRowProps = Pick<BodyInput, 'press' | 'intervalComponent' | 'gapComponent' | 'highlightSource' | 'onIntervalHover' | 'incompleteLabel'> & {
     lane: Lane;
     geometry: LaneGeometry;
     width: number;
     rowHeight: number;
 };
-export declare function LaneRow({ lane, geometry, width, rowHeight, press, intervalZone, gapZone, highlightSource, onIntervalHover, incompleteLabel, }: LaneRowProps): import("react/jsx-runtime").JSX.Element;
+export declare function LaneRow({ lane, geometry, width, rowHeight, press, intervalComponent: IntervalComponent, gapComponent: GapComponent, highlightSource, onIntervalHover, incompleteLabel, }: LaneRowProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=lane.d.ts.map

package/dist/src/components/roster/lanes/lane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lane.d.ts","sourceRoot":"","sources":["../../../../../src/components/roster/lanes/lane.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAIjD,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,SAAS,EACT,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,iBAAiB,GAAG,iBAAiB,GAAG,iBAAiB,CACjG,GAAG;IACF,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,KAAK,EACL,YAAY,EACZ,OAAO,EACP,eAAe,EACf,eAAe,EACf,eAAkD,GACnD,EAAE,YAAY,2CA0Dd"}
+{"version":3,"file":"lane.d.ts","sourceRoot":"","sources":["../../../../../src/components/roster/lanes/lane.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAGxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAIjD,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,SAAS,EACP,OAAO,GACP,mBAAmB,GACnB,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,iBAAiB,CACpB,GAAG;IACF,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EAAE,iBAAiB,EACpC,YAAY,EAAE,YAAY,EAC1B,eAAe,EACf,eAAe,EACf,eAAkD,GACnD,EAAE,YAAY,2CAuDd"}

package/dist/src/components/roster/lanes/lane.js

@@ -4,22 +4,18 @@ exports.LaneRow = LaneRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const core_1 = require("../../../core");
 const press_point_1 = require("../../primitives/press-point");
 const interval_hover_1 = require("./interval-hover");
 const incomplete_1 = require("./parts/incomplete");
-function LaneRow({ lane, geometry, width, rowHeight, press, intervalZone, gapZone, highlightSource, onIntervalHover, incompleteLabel = 'Availability may be incomplete', }) {
+function LaneRow({ lane, geometry, width, rowHeight, press, intervalComponent: IntervalComponent, gapComponent: GapComponent, highlightSource, onIntervalHover, incompleteLabel = 'Availability may be incomplete', }) {
     const layers = [...lane.layers].sort((a, b) => a.z - b.z);
     return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { ...(0, interval_hover_1.intervalHoverProps)({ lane, geometry, onIntervalHover }), testID: `roster-lane-${lane.id}`, accessibilityLabel: lane.label, onPress: (input) => {
             const point = (0, press_point_1.pressPoint)(input);
             press(lane, point.x, point.y);
         }, style: { width, height: rowHeight }, children: [(0, jsx_runtime_1.jsx)(incomplete_1.RosterIncomplete, { lane: lane, geometry: geometry, width: width, label: incompleteLabel }), layers.map((layer) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [geometry.rects
                         .filter((rect) => rect.layerId === layer.id)
-                        .map((rect) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: intervalZone({
-                            rect,
-                            layer,
-                            lane,
-                            highlighted: rect.sources.some((source) => source.kind === highlightSource?.kind && source.id === highlightSource.id),
-                        }) }, `interval-${rect.x}:${rect.width}`))), geometry.gapRects
+                        .map((rect) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(IntervalComponent, { rect: rect, layer: layer, lane: lane, highlighted: (0, core_1.hasSource)(rect.sources, highlightSource) }) }, `interval-${rect.x}:${rect.width}`))), geometry.gapRects
                         .filter((rect) => rect.layerId === layer.id)
                         .map((rect) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: `${lane.label}: removed time`, onPress: (input) => {
                             input.stopPropagation();
@@ -32,6 +28,6 @@ function LaneRow({ lane, geometry, width, rowHeight, press, intervalZone, gapZon
                             width: rect.width,
                             height: rect.height,
                             zIndex: rect.z,
-                        }, children: gapZone({ rect, layer, lane }) }, `gap-${rect.x}:${rect.width}`)))] }, layer.id)))] }));
+                        }, children: (0, jsx_runtime_1.jsx)(GapComponent, { rect: rect, layer: layer, lane: lane }) }, `gap-${rect.x}:${rect.width}`)))] }, layer.id)))] }));
 }
 //# sourceMappingURL=lane.js.map

package/dist/src/components/roster/lanes/lane.js.map

@@ -1 +1 @@
-{"version":3,"file":"lane.js","sourceRoot":"","sources":["../../../../../src/components/roster/lanes/lane.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"lane.js","sourceRoot":"","sources":["../../../../../src/components/roster/lanes/lane.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/roster/parts/body.d.ts

@@ -1,7 +1,7 @@
-import { type ProfilerOnRenderCallback } from 'react';
+import type { ProfilerOnRenderCallback } from 'react';
 import type { BodyInput } from '../roster.types';
-export declare 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. */
+export declare function RosterBody(props: BodyInput & {
+    /** Development-only Profiler hook used by the gallery; not a supported customization point. */
     onRowRender?: ProfilerOnRenderCallback;
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=body.d.ts.map