react-native-agenda-kit 0.1.0

package/src/expandable/WeekStrip.tsx

@@ -0,0 +1,439 @@
+/**
+ * The closed calendar: a vertical TAPE of weeks seen through a one-row window.
+ *
+ * Every week is a row stacked in one `Animated.View`; the window clips it and
+ * `weekPos` translates it, so crossing into the next week slides the tape up and
+ * crossing back slides it down — the owner's Teams reference (2026-09-11). A move
+ * of more than a week jumps: the agenda jumps too, and a slide through months
+ * would read as a blur.
+ *
+ * Selection is TWO pills riding the tape: the new day's fades in while the old
+ * day's fades out, on the UI thread, with no React commit. Each pill shows its
+ * day through one non-editable TextInput (`text` is an animated prop —
+ * Reanimated's own `PerformanceMonitor` idiom) and one dot for a marked day.
+ *
+ * Alternate months sit on a canvas band and a 1st carries its month's short name,
+ * so a month edge shows inside a week. A horizontal swipe moves one week.
+ */
+
+import { useKitStyles, type KitStyleArgs } from '../theme';
+import { ANIMATION, FONT_SIZE, RADIUS } from '../theme/tokens';
+import { memo, useCallback, useEffect, useMemo, useState, type ReactElement } from 'react';
+import { Pressable, StyleSheet, TextInput, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedProps,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withTiming,
+  type AnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated';
+import { runOnJS } from 'react-native-worklets';
+import { useCalendarContext } from '../core/CalendarContext';
+import { clampIndex, dayIndexOf, ymdAt } from '../core/dateKey';
+import { KitText } from '../core/KitText';
+import { KIT_EASING, kitDuration } from '../core/motion';
+import { cellLeft, columnAt, columnEdge } from './calendarCells';
+import {
+  DAY_CELL,
+  DAY_LINE_HEIGHT,
+  DAY_TEXT_MARGIN_TOP,
+  DOT_MARGIN_TOP,
+  DOT_SIZE,
+  FIRST_OF_MONTH_TEXT_TOP,
+  MONTH_LABEL_LINE_HEIGHT,
+  MONTH_LABEL_TOP,
+  PAN_THRESHOLD,
+  SNAP_VELOCITY,
+  WEEK_ROW_HEIGHT,
+  WEEK_ROW_V_MARGIN,
+} from './geometry';
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+const DOT_INSET = (DAY_CELL - DOT_SIZE) / 2;
+/** Where DayCell's flow puts the dot, from the cell top: text margin, the declared line box, the dot's own margin. */
+const DOT_TOP = DAY_TEXT_MARGIN_TOP + DAY_LINE_HEIGHT + DOT_MARGIN_TOP;
+/** How far a 1st's number and dot sit below every other day's. */
+const FIRST_SHIFT = FIRST_OF_MONTH_TEXT_TOP - DAY_TEXT_MARGIN_TOP;
+
+type RowProps = {
+  week: number;
+  width: number;
+  lefts: number[];
+  labels: string[];
+  ordinals: number[];
+  monthShortLabels?: readonly string[];
+  dots: (string | null)[];
+  todayIndex: number;
+  minIndex: number;
+  maxIndex: number;
+  onDayPress: (dayIndex: number) => void;
+};
+
+const WeekRow = memo(
+  ({ week, width, lefts, labels, ordinals, monthShortLabels, dots, todayIndex, minIndex, maxIndex, onDayPress }: RowProps) => {
+    const styles = useKitStyles(makeStyles);
+    const start = week * 7;
+    const cells: ReactElement[] = [];
+
+    // Months with an even ordinal (Jan, Mar … Nov) take the band. A week holds at
+    // most two months, so its banded days are one run.
+    let bandFrom = -1;
+    let bandTo = -1;
+    for (let col = 0; col < 7 && start + col < labels.length; col += 1) {
+      if ((ordinals[start + col] & 1) === 0) {
+        if (bandFrom < 0) bandFrom = col;
+        bandTo = col;
+      }
+    }
+    if (bandFrom >= 0) {
+      const left = bandFrom === 0 ? 0 : columnEdge(width, bandFrom);
+      const right = bandTo === 6 ? width : columnEdge(width, bandTo + 1);
+      cells.push(<View key="band" style={[styles.band, { left, width: right - left }]} />);
+    }
+
+    for (let col = 0; col < 7; col += 1) {
+      const i = start + col;
+      if (i >= labels.length) break;
+      const left = lefts[col];
+      const first = monthShortLabels !== undefined && labels[i] === '1';
+      const tone = i < minIndex || i > maxIndex ? styles.labelDisabled : i === todayIndex ? styles.labelToday : null;
+      if (first) {
+        cells.push(
+          <KitText key={`m${i}`} style={[styles.monthLabel, { left }]}>
+            {monthShortLabels?.[ordinals[i] % 12]}
+          </KitText>,
+        );
+      }
+      cells.push(
+        <KitText key={`t${i}`} style={[first ? styles.labelFirst : styles.label, { left }, tone]}>
+          {labels[i]}
+        </KitText>,
+      );
+      const dot = dots[i];
+      if (dot !== null) {
+        cells.push(
+          <View
+            key={`d${i}`}
+            style={[
+              first ? styles.dotFirst : styles.dot,
+              { left: left + DOT_INSET },
+              dot ? { backgroundColor: dot } : styles.dotDefault,
+            ]}
+          />,
+        );
+      }
+    }
+
+    // One Pressable per row; the column comes from the touch's x. `locationX` is
+    // relative to the view the finger lands on, so labels must not be hit-testable
+    // (they were, and every tap resolved to column 0).
+    return (
+      <Pressable
+        style={[styles.row, { top: week * WEEK_ROW_HEIGHT, width }]}
+        onPress={(e) => onDayPress(start + columnAt(width, e.nativeEvent.locationX))}
+      >
+        <View pointerEvents="none" style={StyleSheet.absoluteFill}>
+          {cells}
+        </View>
+      </Pressable>
+    );
+  },
+);
+WeekRow.displayName = 'WeekRow';
+
+type PillProps = {
+  index: SharedValue<number>;
+  fade: SharedValue<number>;
+  /** The leaving pill's starting opacity; `null` for the arriving pill. */
+  leavingFrom: SharedValue<number> | null;
+  widthSV: SharedValue<number>;
+  labels: string[];
+  hasDot: boolean[];
+  firstOfMonth: boolean[];
+};
+
+const SelectionPill = memo(({ index, fade, leavingFrom, widthSV, labels, hasDot, firstOfMonth }: PillProps) => {
+  const styles = useKitStyles(makeStyles);
+  const frame = useAnimatedStyle(() => {
+    const i = index.value;
+    return {
+      opacity: leavingFrom === null ? fade.value : leavingFrom.value * (1 - fade.value),
+      transform: [{ translateX: cellLeft(widthSV.value, i % 7) }, { translateY: Math.floor(i / 7) * WEEK_ROW_HEIGHT }],
+    };
+  });
+  const content = useAnimatedStyle(() => ({
+    transform: [{ translateY: firstOfMonth[index.value] ? FIRST_SHIFT : 0 }],
+  }));
+  const labelProps = useAnimatedProps(() => {
+    const text = labels[index.value] ?? '';
+    return { text, defaultValue: text };
+  });
+  const dotStyle = useAnimatedStyle(() => ({ opacity: hasDot[index.value] ? 1 : 0 }));
+
+  return (
+    <Animated.View pointerEvents="none" style={[styles.pill, frame]}>
+      <Animated.View style={[styles.pillContent, content]}>
+        <AnimatedTextInput
+          animatedProps={labelProps}
+          editable={false}
+          pointerEvents="none"
+          caretHidden
+          contextMenuHidden
+          allowFontScaling={false}
+          maxFontSizeMultiplier={1}
+          underlineColorAndroid="transparent"
+          accessible={false}
+          importantForAccessibility="no"
+          style={styles.pillLabel}
+        />
+        <Animated.View style={[styles.pillDot, dotStyle]} />
+      </Animated.View>
+    </Animated.View>
+  );
+});
+SelectionPill.displayName = 'SelectionPill';
+
+type Props = {
+  width: number;
+  /** `cellLefts(width)`: one array per width, shared by every row. */
+  lefts: number[];
+  labels: string[];
+  ordinals: number[];
+  monthShortLabels?: readonly string[];
+  dots: (string | null)[];
+  onDayPress: (dayIndex: number) => void;
+  animatedStyle: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  interactive: boolean;
+};
+
+const WeekStripInner = ({
+  width,
+  lefts,
+  labels,
+  ordinals,
+  monthShortLabels,
+  dots,
+  onDayPress,
+  animatedStyle,
+  interactive,
+}: Props) => {
+  const styles = useKitStyles(makeStyles);
+  const { range, store, dateRef, setDate, reduceMotion } = useCalendarContext();
+  const { dayIndex } = store;
+  const weekCount = range.days / 7;
+
+  const [initialIndex] = useState(() => clampIndex(range, dayIndexOf(range, dateRef.current)));
+  const weekPos = useSharedValue(Math.floor(initialIndex / 7));
+  /** The week the tape is headed to: a day crossing inside it must not restart the slide. */
+  const weekTarget = useSharedValue(Math.floor(initialIndex / 7));
+  const current = useSharedValue(initialIndex);
+  const previous = useSharedValue(initialIndex);
+  const fade = useSharedValue(1);
+  /** The leaving pill's opacity when it began to leave, so a change mid-fade does not pop it to full. */
+  const leavingFrom = useSharedValue(0);
+  const widthSV = useSharedValue(width);
+  useEffect(() => {
+    widthSV.value = width;
+  }, [width, widthSV]);
+
+  const slide = kitDuration(ANIMATION.slow, reduceMotion);
+  const crossfade = kitDuration(ANIMATION.base, reduceMotion);
+
+  useAnimatedReaction(
+    () => dayIndex.value,
+    (idx, last) => {
+      if (idx === last) return;
+      const week = Math.floor(idx / 7);
+      if (last === null) {
+        weekPos.value = week;
+        weekTarget.value = week;
+        current.value = idx;
+        previous.value = idx;
+        return;
+      }
+      if (week !== weekTarget.value) {
+        const far = Math.abs(week - weekPos.value) > 1.5;
+        weekTarget.value = week;
+        weekPos.value = far || slide === 0 ? week : withTiming(week, { duration: slide, easing: KIT_EASING });
+      }
+      leavingFrom.value = fade.value;
+      previous.value = current.value;
+      current.value = idx;
+      fade.value =
+        crossfade === 0
+          ? 1
+          : withSequence(withTiming(0, { duration: 0 }), withTiming(1, { duration: crossfade, easing: KIT_EASING }));
+    },
+    [crossfade, slide],
+  );
+
+  /** A swipe asked for `week`: select its first selectable day, unless the range ends before it. */
+  const onSwipe = useCallback(
+    (week: number) => {
+      const target = clampIndex(range, week * 7);
+      if (Math.floor(target / 7) !== week) return;
+      setDate(ymdAt(range, target), 'weekScroll', 'week');
+    },
+    [range, setDate],
+  );
+
+  // `failOffsetY` hands a vertical drag to the calendar's expand pan, whose own
+  // `failOffsetX(±12)` hands a horizontal one to this.
+  const swipe = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(interactive)
+        .activeOffsetX([-16, 16])
+        .failOffsetY([-10, 10])
+        .onEnd((e) => {
+          'worklet';
+          const dx =
+            Math.abs(e.translationX) >= PAN_THRESHOLD
+              ? e.translationX
+              : Math.abs(e.velocityX) >= SNAP_VELOCITY
+                ? e.velocityX
+                : 0;
+          if (dx === 0) return;
+          runOnJS(onSwipe)(Math.floor(dayIndex.value / 7) + (dx < 0 ? 1 : -1));
+        }),
+    [dayIndex, interactive, onSwipe],
+  );
+
+  // Plain arrays captured by the worklets: one table read per day crossing.
+  const hasDot = useMemo(() => dots.map((d) => d !== null), [dots]);
+  const firstOfMonth = useMemo(
+    () => labels.map((label) => monthShortLabels !== undefined && label === '1'),
+    [labels, monthShortLabels],
+  );
+
+  const rows = useMemo(() => {
+    const out: ReactElement[] = [];
+    for (let w = 0; w < weekCount; w += 1) {
+      out.push(
+        <WeekRow
+          key={w}
+          week={w}
+          width={width}
+          lefts={lefts}
+          labels={labels}
+          ordinals={ordinals}
+          monthShortLabels={monthShortLabels}
+          dots={dots}
+          todayIndex={range.todayIndex}
+          minIndex={range.minIndex}
+          maxIndex={range.maxIndex}
+          onDayPress={onDayPress}
+        />,
+      );
+    }
+    return out;
+  }, [dots, labels, lefts, monthShortLabels, onDayPress, ordinals, range, weekCount, width]);
+
+  const tapeStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: -weekPos.value * WEEK_ROW_HEIGHT }],
+  }));
+
+  return (
+    <GestureDetector gesture={swipe}>
+      <Animated.View
+        pointerEvents={interactive ? 'auto' : 'none'}
+        style={[styles.root, { width }, animatedStyle]}
+      >
+        <Animated.View style={[styles.tape, { width, height: weekCount * WEEK_ROW_HEIGHT }, tapeStyle]}>
+          {rows}
+          <SelectionPill
+            index={previous}
+            fade={fade}
+            leavingFrom={leavingFrom}
+            widthSV={widthSV}
+            labels={labels}
+            hasDot={hasDot}
+            firstOfMonth={firstOfMonth}
+          />
+          <SelectionPill
+            index={current}
+            fade={fade}
+            leavingFrom={null}
+            widthSV={widthSV}
+            labels={labels}
+            hasDot={hasDot}
+            firstOfMonth={firstOfMonth}
+          />
+        </Animated.View>
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+export const WeekStrip = memo(WeekStripInner);
+WeekStrip.displayName = 'WeekStrip';
+
+const makeStyles = ({ colors, fonts }: KitStyleArgs) => {
+  const text = {
+    position: 'absolute',
+    width: DAY_CELL,
+    textAlign: 'center',
+    fontFamily: fonts.regular,
+    fontSize: FONT_SIZE.sm,
+    lineHeight: DAY_LINE_HEIGHT,
+  } as const;
+  const dot = { position: 'absolute', width: DOT_SIZE, height: DOT_SIZE, borderRadius: RADIUS.full } as const;
+  return StyleSheet.create({
+    root: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      height: WEEK_ROW_HEIGHT,
+      overflow: 'hidden',
+      backgroundColor: colors.surface,
+    },
+    tape: { position: 'absolute', top: 0, left: 0 },
+    row: { position: 'absolute', left: 0, height: WEEK_ROW_HEIGHT },
+    // A month's ground, alternating with the strip's own: it carries the month edge: it carries the month edge.
+    band: { position: 'absolute', top: 0, height: WEEK_ROW_HEIGHT, backgroundColor: colors.canvas },
+    label: { ...text, top: WEEK_ROW_V_MARGIN + DAY_TEXT_MARGIN_TOP, color: colors.text },
+    labelFirst: { ...text, top: WEEK_ROW_V_MARGIN + FIRST_OF_MONTH_TEXT_TOP, color: colors.text },
+    labelToday: { color: colors.accent },
+    labelDisabled: { color: colors.textMuted },
+    // Metadata: the muted tier, at the 11 px legibility floor.
+    monthLabel: {
+      position: 'absolute',
+      width: DAY_CELL,
+      textAlign: 'center',
+      top: WEEK_ROW_V_MARGIN + MONTH_LABEL_TOP,
+      fontFamily: fonts.regular,
+      fontSize: FONT_SIZE.xxs,
+      lineHeight: MONTH_LABEL_LINE_HEIGHT,
+      color: colors.textMuted,
+    },
+    dot: { ...dot, top: WEEK_ROW_V_MARGIN + DOT_TOP },
+    dotFirst: { ...dot, top: WEEK_ROW_V_MARGIN + DOT_TOP + FIRST_SHIFT },
+    dotDefault: { backgroundColor: colors.accent },
+    pill: {
+      position: 'absolute',
+      top: WEEK_ROW_V_MARGIN,
+      left: 0,
+      width: DAY_CELL,
+      height: DAY_CELL,
+      borderRadius: RADIUS.full,
+      // Active selection — the calendar's one accent fill: one accent, nowhere else.
+      backgroundColor: colors.accentFill,
+    },
+    pillContent: { ...StyleSheet.absoluteFillObject },
+    // A TextInput sits where a Text does only with Android's padding and font padding zeroed.
+    pillLabel: {
+      ...text,
+      top: DAY_TEXT_MARGIN_TOP,
+      left: 0,
+      height: DAY_LINE_HEIGHT,
+      padding: 0,
+      includeFontPadding: false,
+      color: colors.onAccentFill,
+    },
+    pillDot: { ...dot, top: DOT_TOP, left: DOT_INSET, backgroundColor: colors.onAccentFill },
+  });
+};

package/src/expandable/calendarCells.ts

@@ -0,0 +1,155 @@
+/**
+ * Per-range tables the week strip and month grid render from, built in ONE
+ * integer pass over the range (no `Date`, no string parsing) and read by index.
+ */
+
+import { civilOf, daysInMonth, epochDayOf } from '../core/civil';
+import { dayIndexOf } from '../core/dateKey';
+import type { CalendarRange, MarkedDates } from '../types';
+import { DAY_CELL, WEEK_ROW_H_PADDING } from './geometry';
+
+/** '1'…'31', so labels are shared strings rather than one allocation per day. */
+const DAY_OF_MONTH_LABEL: readonly string[] = Array.from({ length: 32 }, (_, i) => String(i));
+
+export type MonthPages = {
+  count: number;
+  /** Weeks per page (4, 5 or 6). */
+  weeksByPage: number[];
+  /** Day index of the 1st of each page's month (may be negative for page 0). */
+  monthStartByPage: number[];
+  /** First grid index (a week start) per page. */
+  gridStartByPage: number[];
+  /**
+   * Month page per day index, UNCLAMPED: −1 before the first page, `count` after
+   * the last. The grid's "is this day in this month" test needs it unclamped;
+   * paging clamps at the read site.
+   */
+  rawPageByIndex: number[];
+};
+
+export type CalendarCells = {
+  /** Day-of-month label per index. */
+  labels: string[];
+  /** y·12 + (m − 1) per index: the strip's month shading reads its parity, the month label its month. */
+  ordinalByIndex: number[];
+  pages: MonthPages;
+};
+
+/**
+ * Month pages span the SELECTABLE window only: the range is padded to whole
+ * weeks, and paging to a month with no selectable day would be a dead page.
+ */
+export const buildCalendarCells = (range: CalendarRange): CalendarCells => {
+  const { days, startEpochDay, minIndex, maxIndex } = range;
+  const labels = new Array<string>(days);
+  const ordinalByIndex = new Array<number>(days);
+
+  const c0 = civilOf(startEpochDay);
+  let y = Math.floor(c0 / 10000);
+  let m = Math.floor(c0 / 100) % 100;
+  let d = c0 % 100;
+  let dim = daysInMonth(y, m);
+  for (let i = 0; i < days; i += 1) {
+    labels[i] = DAY_OF_MONTH_LABEL[d];
+    ordinalByIndex[i] = y * 12 + m - 1;
+    if (d === dim) {
+      d = 1;
+      if (m === 12) {
+        m = 1;
+        y += 1;
+      } else {
+        m += 1;
+      }
+      dim = daysInMonth(y, m);
+    } else {
+      d += 1;
+    }
+  }
+
+  const firstOrdinal = ordinalByIndex[minIndex];
+  const count = ordinalByIndex[maxIndex] - firstOrdinal + 1;
+
+  const rawPageByIndex = new Array<number>(days);
+  for (let i = 0; i < days; i += 1) {
+    const p = ordinalByIndex[i] - firstOrdinal;
+    rawPageByIndex[i] = p < 0 ? -1 : p >= count ? count : p;
+  }
+
+  const weeksByPage = new Array<number>(count);
+  const monthStartByPage = new Array<number>(count);
+  const gridStartByPage = new Array<number>(count);
+  for (let p = 0; p < count; p += 1) {
+    const ordinal = firstOrdinal + p;
+    const py = Math.floor(ordinal / 12);
+    const pm = (ordinal % 12) + 1;
+    const start = epochDayOf(py, pm, 1) - startEpochDay;
+    // Index 0 is a `firstDay`, so the week containing any index starts at the
+    // previous multiple of 7.
+    const gridStart = start - (((start % 7) + 7) % 7);
+    monthStartByPage[p] = start;
+    gridStartByPage[p] = gridStart;
+    weeksByPage[p] = Math.ceil((start - gridStart + daysInMonth(py, pm)) / 7);
+  }
+
+  return {
+    labels,
+    ordinalByIndex,
+    pages: { count, weeksByPage, monthStartByPage, gridStartByPage, rawPageByIndex },
+  };
+};
+
+/** Page of a day index, clamped to `[0, count)` — for paging, never for the grid test. */
+export const pageOfIndex = (pages: MonthPages, idx: number): number => {
+  'worklet';
+  const p = pages.rawPageByIndex[idx];
+  if (p === undefined) return 0;
+  return p < 0 ? 0 : p >= pages.count ? pages.count - 1 : p;
+};
+
+/**
+ * Dot colour per index: `null` = no dot, `''` = marked with no colour given
+ * (render the default token), otherwise the caller's colour.
+ */
+export const buildDots = (range: CalendarRange, marked?: MarkedDates): (string | null)[] => {
+  const out = new Array<string | null>(range.days).fill(null);
+  if (!marked) return out;
+  for (const ymd in marked) {
+    const entry = marked[ymd];
+    if (!entry?.marked) continue;
+    const i = dayIndexOf(range, ymd);
+    if (i >= 0 && i < range.days) out[i] = entry.dotColor ?? '';
+  }
+  return out;
+};
+
+const columnWidth = (width: number): number => {
+  'worklet';
+  return (width - WEEK_ROW_H_PADDING * 2) / 7;
+};
+
+/** Left edge of weekday COLUMN `col` (0…7) — where the strip's month band starts and stops. */
+export const columnEdge = (width: number, col: number): number => WEEK_ROW_H_PADDING + col * columnWidth(width);
+
+/**
+ * Left edge of weekday column `col`'s CELL: seven `flex: 1` columns inside 15 px side
+ * padding, each centring a 32 px cell — the library's layout, so strip, grid and
+ * pill share one formula and cannot sit a pixel apart.
+ */
+export const cellLeft = (width: number, col: number): number => {
+  'worklet';
+  const column = columnWidth(width);
+  return WEEK_ROW_H_PADDING + col * column + (column - DAY_CELL) / 2;
+};
+
+/** The seven column lefts for one width — build once per width, not per cell. */
+export const cellLefts = (width: number): number[] => {
+  const out = new Array<number>(7);
+  for (let col = 0; col < 7; col += 1) out[col] = cellLeft(width, col);
+  return out;
+};
+
+/** Column under an x coordinate within a row — the inverse, for page-level taps. */
+export const columnAt = (width: number, x: number): number => {
+  const col = Math.floor((x - WEEK_ROW_H_PADDING) / columnWidth(width));
+  return col < 0 ? 0 : col > 6 ? 6 : col;
+};

package/src/expandable/geometry.ts

@@ -0,0 +1,51 @@
+/**
+ * The expandable calendar's geometry — numbers only, never a colour. Transcribed
+ * from `react-native-calendars`' style files (`calendar/day/basic/style.js`,
+ * `expandableCalendar/style.js`, `calendar/style.js`), then resized on
+ * 2026-09-11 toward the owner's Teams reference: a 40 px circle (was 32) with a
+ * month's short name above its 1st, in a row 2 px taller.
+ */
+
+import { FONT_SIZE } from '../theme/tokens';
+
+/** The selection circle and the tap target of a day. */
+export const DAY_CELL = 40;
+export const WEEK_ROW_V_MARGIN = 4;
+/** The cell plus its two margins — the library's `WEEK_HEIGHT` shape. */
+export const WEEK_ROW_HEIGHT = DAY_CELL + WEEK_ROW_V_MARGIN * 2;
+export const WEEK_ROW_H_PADDING = 15;
+/**
+ * Declared, never measured: the strip positions its dots absolutely and the grid
+ * flows them under the text, and an undeclared line box put them ~1.6 px apart.
+ * Inter's line box is fontSize × 1.21.
+ */
+export const DAY_LINE_HEIGHT = Math.round(FONT_SIZE.sm * 1.21);
+export const DOT_SIZE = 4;
+export const DOT_MARGIN_TOP = 1;
+/** Number and dot centred in the cell. */
+export const DAY_TEXT_MARGIN_TOP = Math.round((DAY_CELL - DAY_LINE_HEIGHT - DOT_MARGIN_TOP - DOT_SIZE) / 2);
+
+/** The strip's month name over a 1st, from the cell top; that cell's number and dot move under it. */
+export const MONTH_LABEL_TOP = 1;
+export const MONTH_LABEL_LINE_HEIGHT = Math.round(FONT_SIZE.xxs * 1.21);
+export const FIRST_OF_MONTH_TEXT_TOP = MONTH_LABEL_TOP + MONTH_LABEL_LINE_HEIGHT;
+
+export const KNOB_CONTAINER_HEIGHT = 24;
+export const KNOB_WIDTH = 40;
+export const KNOB_HEIGHT = 4;
+
+/** The month layer is laid out once at the largest month's height. */
+export const MAX_WEEKS = 6;
+
+/** px a drag must travel before release commits to the other end. */
+export const PAN_THRESHOLD = 30;
+/** px/s: a faster flick decides the direction regardless of distance. */
+export const SNAP_VELOCITY = 300;
+
+/** Closed (one week), open on a `weeks`-row month, and the distance between; knob band included. */
+export const calendarHeights = (weeks: number) => {
+  'worklet';
+  const closed = WEEK_ROW_HEIGHT + KNOB_CONTAINER_HEIGHT;
+  const travel = WEEK_ROW_HEIGHT * (weeks - 1);
+  return { closed, full: closed + travel, travel };
+};