react-native-roster 0.0.0 → 0.1.0

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

@@ -0,0 +1,156 @@
+import type { ComponentType, ReactNode, RefObject } from 'react';
+import type {
+  LayoutChangeEvent,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+import type {
+  Coverage,
+  Lane,
+  LaneComparator,
+  LaneFlag,
+  LaneGeometry,
+  Projection,
+  Rect,
+  Source,
+  Window,
+  WindowSpec,
+} from '../../core';
+import type { GapInput, IntervalInput } from '../layers/layers.types';
+
+export type RosterProjection = Extract<Projection, { orientation: 'horizontal' }>;
+export type RosterTick = { time: number; x: number; label: string; kind: 'day' | 'time' };
+export type RosterScroll = {
+  x: SharedValue<number>;
+  y: SharedValue<number>;
+  bodyRef: RefObject<ScrollView | null>;
+  onBodyScroll: (input: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onHeaderScroll: (input: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  onVerticalScroll: (input: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  headerStyle: StyleProp<ViewStyle>;
+  labelStyle: StyleProp<ViewStyle>;
+};
+export type RosterInput = {
+  lanes: Lane[];
+  windowSpec: WindowSpec;
+  minuteStep?: number;
+  sortLanes?: LaneComparator;
+  highlightSource?: Source;
+  onNavigate?: (next: WindowSpec) => void;
+  onIntervalPress?: (rect: Rect, lane: Lane) => void;
+  /** Reports the winning interval under a web pointer; native renders attach no hover handler. */
+  onIntervalHover?: (rect: Rect, lane: Lane) => void;
+  onGapPress?: (rect: Rect, lane: Lane) => void;
+  onCellPress?: (lane: Lane, time: number) => void;
+  /** Fixed lane height, default 48. */
+  rowHeight?: number;
+  /** Minimum elapsed-time scale, default 0.5; expands to fit wider viewports. */
+  pxPerMinute?: number;
+};
+export type RosterModel = {
+  window: Window;
+  projection: RosterProjection;
+  orderedLanes: Lane[];
+  coverage: ReadonlyMap<string, Coverage>;
+  laneState: ReadonlyMap<string, { flag: LaneFlag; complete: boolean }>;
+  geometryFor: (lane: Lane) => LaneGeometry;
+  scroll: RosterScroll;
+  press: (lane: Lane, x: number, y: number) => void;
+  status: 'empty' | 'ready';
+  ticks: RosterTick[];
+  contentWidth: number;
+  viewport: { width: number; height: number };
+  onLayout: (input: LayoutChangeEvent) => void;
+  navigate: (next: WindowSpec) => void;
+};
+export type LaneLabelInput = {
+  lane: Lane;
+  flag: LaneFlag;
+  complete: boolean;
+  viewTimezone: string;
+  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. */
+  headerCellComponent: ComponentType<HeaderCellInput>;
+};
+export type LabelColumnInput = Pick<RosterModel, 'projection' | 'scroll'> & {
+  labels: LaneLabelInput[];
+  /** Lane label filler, positioned at the fixed row height. */
+  laneLabelComponent: ComponentType<LaneLabelInput>;
+};
+export type BodyInput = Pick<
+  RosterModel,
+  | 'geometryFor'
+  | 'projection'
+  | 'scroll'
+  | 'press'
+  | 'ticks'
+  | 'contentWidth'
+  | 'viewport'
+  | 'window'
+> & {
+  lanes: Lane[];
+  highlightSource?: Source;
+  onIntervalHover?: (rect: Rect, lane: Lane) => void;
+  incompleteLabel?: string;
+  /** Covered rect view; position it using the final rect bounds, as RosterInterval does. */
+  intervalComponent: ComponentType<IntervalInput>;
+  /** Removed rect filler, placed inside a pressable by LaneRow. */
+  gapComponent: ComponentType<GapInput>;
+  /** Noninteractive tick lines behind every lane, sized to the content width. */
+  gridComponent: ComponentType<GridInput>;
+};
+/**
+ * Chrome style props and their NativeWind class twins. Class props resolve only
+ * after `react-native-roster/nativewind` registers the component; without that
+ * entry they are ignored.
+ */
+export type RosterStyleProps = {
+  /** Outer container; supply a bounded height. */
+  style?: StyleProp<ViewStyle>;
+  className?: string;
+  /** Frozen header row holding the corner and tick strip, 40 px tall by default. */
+  headerStyle?: StyleProp<ViewStyle>;
+  headerClassName?: string;
+  /** Frozen lane label column, laneLabelWidth wide. */
+  laneLabelColumnStyle?: StyleProp<ViewStyle>;
+  laneLabelColumnClassName?: string;
+  /** Measured body viewport containing the virtualized lanes. */
+  bodyStyle?: StyleProp<ViewStyle>;
+  bodyClassName?: string;
+  /** Width of the corner and lane label column, default 180. */
+  laneLabelWidth?: number;
+};
+export type RosterProps = RosterInput &
+  RosterStyleProps & {
+    incompleteLabel?: string;
+    neverSetLabel?: string;
+    /** Label, differing lane zone, effective flag, and completeness notice. */
+    laneLabelComponent?: ComponentType<LaneLabelInput>;
+    /** Time label within one positioned header tick. */
+    headerCellComponent?: ComponentType<HeaderCellInput>;
+    /** Covered rect view; use rect bounds for absolute position, rect.z for stacking, and pointerEvents="none" for row hit testing. */
+    intervalComponent?: ComponentType<IntervalInput>;
+    /** Removed rect content; LaneRow supplies the invisible pressable. */
+    gapComponent?: ComponentType<GapInput>;
+    /** Tick lines behind the lanes; RosterGrid draws one hairline per tick. */
+    gridComponent?: ComponentType<GridInput>;
+    /** Empty roster content, conventionally the text No lanes. */
+    emptyZone?: ReactNode;
+    /** Top-left cell above the lane labels; RosterCorner renders nothing. */
+    cornerZone?: ReactNode;
+    /** Frozen time header, supplied with ticks, scale, and shared scrolling. */
+    headerComponent?: ComponentType<HeaderInput>;
+    /** Frozen labels, supplied with ordered lanes and per-lane flag and completeness. */
+    laneLabelColumnComponent?: ComponentType<LabelColumnInput>;
+    /** Virtualized lane body, supplied with geometry, projection, scrolling, and press resolution. */
+    bodyComponent?: ComponentType<BodyInput>;
+  };

package/src/components/roster/use-roster.ts

@@ -0,0 +1,133 @@
+import { useRef, useState } from 'react';
+import type { ScrollView } from 'react-native';
+import { makeMutable, useAnimatedStyle } from 'react-native-reanimated';
+import type { Lane, LaneGeometry } from '../../core';
+import {
+  byLabel,
+  coverageFor,
+  flagFor,
+  layoutLane,
+  snapToStep,
+  timeAtX,
+  windowFor,
+} from '../../core';
+import { hitTest } from '../../core/hit-test';
+import type { RosterInput, RosterModel, RosterProjection } from './roster.types';
+import { ticksFor } from './utils/ticks';
+
+export function useRoster(input: RosterInput): RosterModel {
+  const {
+    lanes,
+    windowSpec,
+    minuteStep = 60,
+    sortLanes = byLabel,
+    rowHeight = 48,
+    pxPerMinute = 0.5,
+    onNavigate,
+  } = input;
+  const [viewport, setViewport] = useState({ width: 0, height: 0 });
+  // The pinned compiler lint cannot resolve useSharedValue's built-in type.
+  // These shared values only track offsets, so no animation needs cancellation.
+  const [x] = useState(() => makeMutable(0));
+  const [y] = useState(() => makeMutable(0));
+  const bodyRef = useRef<ScrollView>(null);
+  const headerStyle = useAnimatedStyle(() => ({ transform: [{ translateX: -x.get() }] }));
+  const labelStyle = useAnimatedStyle(() => ({ transform: [{ translateY: -y.get() }] }));
+  const window = windowFor(windowSpec);
+  if (
+    !(rowHeight > 0) ||
+    !Number.isFinite(rowHeight) ||
+    !(pxPerMinute > 0) ||
+    !Number.isFinite(pxPerMinute)
+  )
+    throw new RangeError('rowHeight and pxPerMinute must be positive finite numbers');
+  const duration = (window.end - window.start) / 60_000;
+  const projection: RosterProjection = {
+    orientation: 'horizontal',
+    viewTimezone: windowSpec.timezone,
+    rowHeight,
+    pxPerMinute: Math.max(pxPerMinute, duration === 0 ? 0 : viewport.width / duration),
+  };
+  const contentWidth = duration * projection.pxPerMinute;
+  const coverage = new Map(lanes.map((lane) => [lane.id, coverageFor(lane, window)]));
+  const orderedLanes = [...lanes].sort((a, b) => sortLanes(a, b, coverage));
+  const laneState = new Map(
+    lanes.map((lane) => [
+      lane.id,
+      { flag: flagFor(lane, window), complete: lane.complete ?? true },
+    ]),
+  );
+  function geometryFor(lane: Lane): LaneGeometry {
+    return layoutLane(lane, window, projection);
+  }
+  const currentPress = { input, window, projection, width: contentWidth };
+  const pressInput = useRef(currentPress);
+  pressInput.current = currentPress;
+  const [press] = useState(() => {
+    return function press(lane: Lane, pointX: number, pointY: number): void {
+      const { input, window, projection, width } = pressInput.current;
+      const { minuteStep = 60, onIntervalPress, onGapPress, onCellPress } = input;
+      const { rowHeight, viewTimezone } = projection;
+      if (
+        !Number.isFinite(pointX) ||
+        !Number.isFinite(pointY) ||
+        pointX < 0 ||
+        pointX >= width ||
+        pointY < 0 ||
+        pointY >= rowHeight
+      )
+        return;
+      const hit = hitTest(lane, layoutLane(lane, window, projection), pointX, pointY);
+      if (hit?.kind === 'interval') {
+        onIntervalPress?.(hit.rect, lane);
+        return;
+      }
+      if (hit?.kind === 'gap') {
+        onGapPress?.(hit.rect, lane);
+        return;
+      }
+      const time = Math.max(
+        window.start,
+        snapToStep(timeAtX(projection, window, pointX), minuteStep, viewTimezone),
+      );
+      if (time < window.end) onCellPress?.(lane, time);
+    };
+  });
+  return {
+    window,
+    projection,
+    orderedLanes,
+    coverage,
+    laneState,
+    geometryFor,
+    press,
+    status: lanes.length === 0 ? 'empty' : 'ready',
+    ticks: ticksFor(window, windowSpec, projection, minuteStep),
+    contentWidth,
+    viewport,
+    navigate: (next) => onNavigate?.(next),
+    onLayout: ({ nativeEvent: { layout } }) =>
+      setViewport((previous) =>
+        previous.width === layout.width && previous.height === layout.height
+          ? previous
+          : { width: layout.width, height: layout.height },
+      ),
+    scroll: {
+      x,
+      y,
+      bodyRef,
+      headerStyle,
+      labelStyle,
+      onBodyScroll: ({ nativeEvent }) => {
+        x.set(nativeEvent.contentOffset.x);
+      },
+      onHeaderScroll: ({ nativeEvent }) => {
+        x.set(nativeEvent.contentOffset.x);
+        bodyRef.current?.scrollTo({ x: nativeEvent.contentOffset.x, animated: false });
+      },
+      onVerticalScroll: ({ nativeEvent }) => {
+        y.set(nativeEvent.contentOffset.y);
+      },
+    },
+  };
+}

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

@@ -0,0 +1,46 @@
+import type { BodyInput } from '../roster.types';
+
+const identityIds = new WeakMap<object, number>();
+let nextIdentityId = 0;
+
+function identityId(identity: object): number {
+  let id = identityIds.get(identity);
+  if (id === undefined) {
+    id = nextIdentityId++;
+    identityIds.set(identity, id);
+  }
+  return id;
+}
+
+export function bodyContentKey({
+  window,
+  projection,
+  highlightSource,
+  intervalComponent,
+  gapComponent,
+  onIntervalHover,
+  incompleteLabel,
+}: Pick<
+  BodyInput,
+  | 'window'
+  | 'projection'
+  | 'highlightSource'
+  | 'intervalComponent'
+  | 'gapComponent'
+  | 'onIntervalHover'
+  | 'incompleteLabel'
+>): string {
+  return JSON.stringify([
+    window.start,
+    window.end,
+    projection.viewTimezone,
+    projection.rowHeight,
+    projection.pxPerMinute,
+    highlightSource?.kind,
+    highlightSource?.id,
+    identityId(intervalComponent),
+    identityId(gapComponent),
+    onIntervalHover && identityId(onIntervalHover),
+    incompleteLabel,
+  ]);
+}

package/src/components/roster/utils/ticks.ts

@@ -0,0 +1,62 @@
+import type { Window, WindowSpec } from '../../../core';
+import { dayColumnsFor } from '../../../core';
+import { offsetAt } from '../../../core/zone';
+import type { RosterProjection, RosterTick } from '../roster.types';
+
+// Like day columns, ticks retain visited content keys for this runtime.
+const tickCache = new Map<string, RosterTick[]>();
+
+export function ticksFor(
+  window: Window,
+  spec: WindowSpec,
+  projection: RosterProjection,
+  minuteStep: number,
+): RosterTick[] {
+  if (!Number.isInteger(minuteStep) || minuteStep <= 0 || 60 % minuteStep !== 0)
+    throw new RangeError('minuteStep must be a positive divisor of 60');
+  const key = JSON.stringify([
+    window.start,
+    window.end,
+    spec.timezone,
+    spec.span,
+    minuteStep,
+    projection.pxPerMinute,
+  ]);
+  const cached = tickCache.get(key);
+  if (cached) return cached;
+  const ticks: RosterTick[] = [];
+  const step = minuteStep * 60_000;
+  function add(time: number, label: string, kind: RosterTick['kind']) {
+    ticks.push({ time, x: ((time - window.start) / 60_000) * projection.pxPerMinute, label, kind });
+  }
+  const timeLabel = new Intl.DateTimeFormat('en-US', {
+    timeZone: spec.timezone,
+    hour: '2-digit',
+    minute: '2-digit',
+    hourCycle: 'h23',
+  });
+  for (const day of dayColumnsFor(window, spec.timezone)) {
+    const start = Math.max(day.start, window.start);
+    add(start, `${day.label} ${day.localDate}`, 'day');
+    if (spec.span === 'month' || (spec.span === 'week' && minuteStep * projection.pxPerMinute < 40))
+      continue;
+    // Each transition starts a new constant-offset segment. Positive deltas skip
+    // wall minutes; negative deltas emit both absolute occurrences of a repeat.
+    let segmentStart = day.start;
+    // UTC wall coordinates retain the actual start minute even after a midnight skip.
+    let offset = offsetAt(day.start, spec.timezone);
+    for (const boundary of [...day.transitions, { at: day.end, deltaMinutes: 0 }]) {
+      const wall = Math.max(start, segmentStart) + offset;
+      const end = Math.min(boundary.at, window.end);
+      for (let time = Math.ceil(wall / step) * step - offset; time < end; time += step) {
+        if (time === start) continue;
+        add(time, timeLabel.format(time), 'time');
+      }
+      segmentStart = boundary.at;
+      // The origin already includes the part of a boundary skip after midnight.
+      if (boundary.at > day.start) offset += boundary.deltaMinutes * 60_000;
+    }
+  }
+  tickCache.set(key, ticks);
+  return ticks;
+}

package/src/components/schedule/README.md

@@ -0,0 +1,23 @@
+# Schedule
+
+This feature is about a schedule; its children are days.
+
+- Root entry exports: `Schedule`, `useSchedule`, the `ScheduleXxx` parts, and
+  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 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 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

@@ -0,0 +1,89 @@
+import { Fragment, type ReactNode } from 'react';
+import { Pressable } from 'react-native';
+import type { DayColumn, Lane, LaneGeometry } from '../../../core';
+import { pressPoint } from '../../primitives/press-point';
+import type { ScheduleModel, ScheduleProps } from '../schedule.types';
+import { transitionBounds } from '../utils/days';
+import { ScheduleDayLayout } from './layout';
+
+type ScheduleDayZones = Required<
+  Pick<
+    ScheduleProps,
+    | 'gridComponent'
+    | 'columnComponent'
+    | 'transitionComponent'
+    | 'intervalComponent'
+    | 'gapComponent'
+  >
+>;
+
+type ScheduleDayProps = ScheduleDayZones & {
+  day: DayColumn;
+  column: number;
+  lane: Lane;
+  projection: ScheduleModel['projection'];
+  geometry: LaneGeometry;
+  highlightSource: ScheduleProps['highlightSource'];
+  hours: number[];
+  press: (x: number, y: number) => void;
+  /** The current-time line when it falls on this day; otherwise nothing. */
+  nowLineZone: ReactNode;
+};
+
+/** One day column: grid, rects, transitions, and the now line at engine bounds. */
+export function ScheduleDay({
+  day,
+  column,
+  lane,
+  projection,
+  geometry,
+  highlightSource,
+  hours,
+  press,
+  gridComponent: GridComponent,
+  columnComponent: ColumnComponent,
+  transitionComponent: TransitionComponent,
+  intervalComponent,
+  gapComponent,
+  nowLineZone,
+}: ScheduleDayProps) {
+  return (
+    <Pressable
+      testID={`schedule-day-${day.localDate}`}
+      accessibilityLabel={day.localDate}
+      onPress={(input) => {
+        const point = pressPoint(input);
+        press(point.x, point.y);
+      }}
+    >
+      <ScheduleDayLayout
+        width={projection.columnWidth}
+        height={24 * projection.pxPerHour}
+        chromeZ={Math.max(0, ...lane.layers.map((layer) => layer.z)) + 1}
+        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}>
+            <TransitionComponent
+              day={day}
+              transition={transition}
+              {...transitionBounds(day, transition, projection)}
+            />
+          </Fragment>
+        ))}
+        nowLineZone={nowLineZone}
+      />
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+
+type ScheduleDayHeaderLayoutProps = {
+  width: number;
+  /** Day heading supplied by dayHeaderComponent, aligned with its column. */
+  headerZone: ReactNode;
+};
+
+export function ScheduleDayHeaderLayout({ width, headerZone }: ScheduleDayHeaderLayoutProps) {
+  return <View style={{ width, paddingBottom: 18 }}>{headerZone}</View>;
+}

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import { View } from 'react-native';
+
+type ScheduleDayLayoutProps = {
+  width: number;
+  height: number;
+  /** Stacking level for chrome above every rect; the engine supplies it from the lane's layers. */
+  chromeZ: number;
+  /** Equal wall-clock hour bands, behind all rects. */
+  gridZone: ReactNode;
+  /** The day's rects and pressable gaps, at final engine bounds. */
+  columnZone: ReactNode;
+  /** Noninteractive skipped or repeated region chrome above rects. */
+  transitionZone: ReactNode;
+  /** Noninteractive current-time line at the projected occurrence. */
+  nowLineZone: ReactNode;
+};
+
+export function ScheduleDayLayout({
+  width,
+  height,
+  chromeZ,
+  gridZone,
+  columnZone,
+  transitionZone,
+  nowLineZone,
+}: ScheduleDayLayoutProps) {
+  return (
+    <View style={{ width, height, overflow: 'hidden' }}>
+      {gridZone}
+      {columnZone}
+      <View pointerEvents="none" style={{ position: 'absolute', width, height, zIndex: chromeZ }}>
+        {transitionZone}
+        {nowLineZone}
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,59 @@
+import { Fragment } from 'react';
+import { Pressable } from 'react-native';
+import { pressPoint } from '../../../primitives/press-point';
+import type { ScheduleColumnInput } from '../../schedule.types';
+
+export function ScheduleColumn({
+  lane,
+  rects,
+  gapRects,
+  press,
+  intervalComponent: IntervalComponent,
+  gapComponent: GapComponent,
+  highlightSource,
+}: ScheduleColumnInput) {
+  return [...lane.layers]
+    .sort((a, b) => a.z - b.z)
+    .map((layer) => (
+      <Fragment key={layer.id}>
+        {rects
+          .filter((rect) => rect.layerId === layer.id)
+          .map((rect) => (
+            <Fragment key={`interval-${rect.y}:${rect.height}`}>
+              <IntervalComponent
+                rect={rect}
+                layer={layer}
+                lane={lane}
+                highlighted={rect.sources.some(
+                  (source) =>
+                    source.kind === highlightSource?.kind && source.id === highlightSource.id,
+                )}
+              />
+            </Fragment>
+          ))}
+        {gapRects
+          .filter((rect) => rect.layerId === layer.id)
+          .map((rect) => (
+            <Pressable
+              key={`gap-${rect.y}:${rect.height}`}
+              accessibilityLabel={`${lane.label}: removed time`}
+              onPress={(input) => {
+                input.stopPropagation();
+                const point = pressPoint(input);
+                press(rect.x + point.x, rect.y + point.y);
+              }}
+              style={{
+                position: 'absolute',
+                left: rect.x,
+                top: rect.y,
+                width: rect.width,
+                height: rect.height,
+                zIndex: rect.z,
+              }}
+            >
+              <GapComponent rect={rect} layer={layer} lane={lane} />
+            </Pressable>
+          ))}
+      </Fragment>
+    ));
+}

package/src/components/schedule/days/parts/day-header.tsx

@@ -0,0 +1,18 @@
+import { Text, View } from 'react-native';
+import type { DayColumn } from '../../../../core';
+
+export function ScheduleDayHeader({ day }: { day: DayColumn }) {
+  const badge =
+    day.transitions.length > 0 ? (
+      <Text style={{ fontSize: 9, color: '#92400e' }}>Clock change</Text>
+    ) : null;
+  return (
+    <View style={{ paddingVertical: 4, alignItems: 'center', minHeight: 62 }}>
+      <Text style={{ fontSize: 12, color: '#0f172a' }}>{day.label}</Text>
+      <Text style={{ width: '100%', fontSize: 9, color: '#475569', textAlign: 'center' }}>
+        {day.localDate}
+      </Text>
+      {badge}
+    </View>
+  );
+}

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

@@ -0,0 +1,21 @@
+import { View } from 'react-native';
+import type { ScheduleHoursInput } from '../../schedule.types';
+
+export function ScheduleGrid({ hours, pxPerHour }: ScheduleHoursInput) {
+  return (
+    <View pointerEvents="none" style={{ position: 'absolute', width: '100%' }}>
+      {hours.map((hour) => (
+        <View
+          key={hour}
+          testID="schedule-hour-band"
+          style={{
+            height: pxPerHour,
+            borderTopWidth: 1,
+            borderRightWidth: 1,
+            borderColor: '#e2e8f0',
+          }}
+        />
+      ))}
+    </View>
+  );
+}

package/src/components/schedule/days/parts/now-line.tsx

@@ -0,0 +1,11 @@
+import { View } from 'react-native';
+
+export function ScheduleNowLine({ y, column }: { y: number; column: number }) {
+  return (
+    <View
+      testID={`schedule-now-${column}`}
+      pointerEvents="none"
+      style={{ position: 'absolute', top: y, width: '100%', height: 2, backgroundColor: '#dc2626' }}
+    />
+  );
+}