@lotics/ui 46.14.1 → 47.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "46.14.1",
+  "version": "47.1.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",

package/src/accordion.tsx

@@ -175,9 +175,14 @@ export interface AccordionContentProps {
 }
 
 /** The collapsible body, revealed in place under the header. Plain by
- * design — flush with the header's left edge (aligns with the title), no
- * tinted well; the chevron + position already say "inside". Compose
- * rows/dividers/actions directly. */
+ * design — flush with the header BOX's left edge, no tinted well; the chevron
+ * + position already say "inside". Compose rows/dividers/actions directly.
+ *
+ * It does NOT align with the title text: `AccordionTitle` always reserves a
+ * 16px icon slot plus a 12px gap, so the title starts 28px in while the content
+ * starts at 0. That is deliberate — the body belongs to the section, not to the
+ * heading — but it means a header with no icon shows the offset with nothing
+ * explaining it, so pass an icon when the gap reads as a mistake. */
 export function AccordionContent(props: AccordionContentProps) {
   const { expanded } = useAccordionContext();
   if (!expanded) return null;
@@ -210,8 +215,9 @@ const styles = StyleSheet.create({
   meta: {
     flexShrink: 1,
   },
-  // Flush with the header's left edge — aligns with the title, like a Section
-  // body. The chevron + position already say "inside"; no indent needed.
+  // Flush with the header BOX's left edge, like a Section body — NOT with the
+  // title text, which the icon slot pushes 28px in. The chevron + position
+  // already say "inside"; no indent needed.
   content: {
     paddingBottom: 10,
   },

package/src/bar_chart.tsx

@@ -300,7 +300,9 @@ export function BarChart(props: BarChartProps) {
                   <Text numberOfLines={1} weight="medium">
                     {item.label}
                   </Text>
-                  <Text color="muted">{formatNumber(item.value)}</Text>
+                  <Text numberOfLines={1} color="muted">
+                    {formatNumber(item.value)}
+                  </Text>
                 </View>
               ) : null}
             </View>

package/src/board.tsx

@@ -10,7 +10,7 @@ import {
 } from "react";
 import { Platform, ScrollView, StyleSheet, View } from "react-native";
 import { colors, tint } from "./colors";
-import { CONTROL_RADIUS, MIN_CONTROL_WIDTH } from "./control_surface";
+import { CONTROL_RADIUS, MIN_CONTROL_WIDTH, CARD_RADIUS } from "./control_surface";
 import { EmptyState } from "./empty_state";
 import { Icon } from "./icon";
 import { IconButton } from "./icon_button";
@@ -40,7 +40,6 @@ import { usePointerDrag } from "./use_pointer_drag";
 /** A card is a container, so it sits on the container rung of the radius ladder
  *  — the same 16 a `Card` takes. Kept here rather than imported so the two
  *  cannot drift apart silently; if the ladder moves, both move. */
-const CARD_RADIUS = 16;
 
 /** Half the difference between an `sm` IconButton's box (24) and its glyph (14).
  *  It exists so a control cluster can be pulled out by exactly the amount that

package/src/breakdown.tsx

@@ -85,7 +85,9 @@ export function Breakdown(props: BreakdownProps) {
               <Text size="sm" color={dimmed ? "muted" : "default"} numberOfLines={1} style={styles.label}>
                 {item.label}
               </Text>
-              <Text size="sm" weight={selected ? "semibold" : "regular"} color={dimmed ? "muted" : "default"} tabular>
+              {/* medium, matching `StackedBarChart`'s figure — the value is what the
+                  row is read for. `semibold` stays reserved for selection. */}
+              <Text size="sm" weight={selected ? "semibold" : "medium"} color={dimmed ? "muted" : "default"} tabular>
                 {formatValue(item.value)}
               </Text>
               <Text size="xs" color="muted" tabular align="right" style={styles.share}>

package/src/calendar/agenda_view.tsx

@@ -0,0 +1,136 @@
+import { useMemo } from "react";
+import { ScrollView, View, StyleSheet } from "react-native";
+import { Text } from "../text";
+import { colors, solid } from "../colors";
+import { CARD_RADIUS } from "../control_surface";
+import { ListItem } from "../list_item";
+import { useCalendar } from "./context";
+import { compareEvents, isBanner } from "./layout";
+import { dayDiff, dayHeading, daysInView, formatTime, isToday, startOfDay } from "./dates";
+import type { CalendarEvent } from "./types";
+
+/**
+ * The agenda: days as headings, their events as rows.
+ *
+ * **This is the narrow-screen answer, and it is a different SHAPE rather than a
+ * smaller month grid.** Seven equal columns on a 375px screen leave 53px per
+ * day for titles that need 160 — every event reads "Cont…" and the calendar can
+ * only tell you WHICH days have something, never what. Below `compactBelow` the
+ * root mounts this instead, and the one app that hit this had already reached
+ * the same conclusion by hand, wrapping the grid in a horizontal scroller with
+ * a 760px floor.
+ *
+ * Empty days are omitted. A month is mostly empty days, and printing thirty
+ * "nothing scheduled" rows to find four with content is not a list, it is a
+ * haystack.
+ */
+export function CalendarAgenda() {
+  const { events, date, weekStartsOn, locale, labels, now, onEventPress } = useCalendar();
+  const days = useMemo(() => daysInView("agenda", date, weekStartsOn), [date, weekStartsOn]);
+
+  const grouped = useMemo(() => {
+    const first = days[0];
+    const byDay = days.map((day) => ({
+      day,
+      items: events
+        .filter((e) => {
+          const from = dayDiff(startOfDay(e.start), day);
+          const to = dayDiff(day, startOfDay(e.end ?? e.start));
+          if (from < 0 || to < 0) return false;
+          // A multi-day banner is listed ONCE, on the day it starts — or on the
+          // first day of the range when it started before it, so something
+          // already running is still visible. Repeating it per day put a
+          // 28-day campaign on twenty-eight rows and buried everything that
+          // only happens once.
+          if (!isBanner(e)) return true;
+          const startsHere = startOfDay(e.start).getTime() === day.getTime();
+          const ongoingAtOpen =
+            day.getTime() === first.getTime() && startOfDay(e.start).getTime() < first.getTime();
+          return startsHere || ongoingAtOpen;
+        })
+        .sort(compareEvents),
+    }));
+    return byDay.filter((g) => g.items.length > 0);
+  }, [events, days]);
+
+
+  if (grouped.length === 0) {
+    return (
+      <View style={styles.empty}>
+        <Text size="sm" color="muted">{labels.noEvents}</Text>
+      </View>
+    );
+  }
+
+  return (
+    <ScrollView style={styles.root} contentContainerStyle={styles.content}>
+      {grouped.map(({ day, items }) => {
+        const today = isToday(day, now);
+        return (
+          <View key={day.toISOString()} style={styles.group}>
+            <View style={styles.heading}>
+              <Text size="sm" weight={today ? "semibold" : "medium"} style={today ? styles.todayInk : undefined}>
+                {dayHeading(day, locale)}
+              </Text>
+              {today ? <View style={styles.todayDot} /> : null}
+            </View>
+            <View style={styles.card}>
+            {items.map((e) => (
+              <ListItem
+                key={e.id}
+                left={<View style={[styles.dot, { backgroundColor: solid(e.color ?? "teal") }]} />}
+                title={e.title}
+                description={describe(e, labels.allDay, locale)}
+                onPress={onEventPress ? () => onEventPress(e.id) : undefined}
+              />
+            ))}
+            </View>
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+/** The row's second line: when it is, then whatever the event carries. Never
+ *  the title again — the row above it already said that. */
+function describe(event: CalendarEvent<unknown>, allDayLabel: string, locale?: string): string {
+  const when = isBanner(event)
+    ? bannerSpan(event, allDayLabel, locale)
+    : event.end
+      ? `${formatTime(event.start, locale)} – ${formatTime(event.end, locale)}`
+      : formatTime(event.start, locale);
+  return event.meta ? `${when} · ${event.meta}` : when;
+}
+
+/** A banner listed once has to say how far it runs, or the row claims the whole
+ *  thing happens on the day it is filed under. */
+function bannerSpan(event: CalendarEvent<unknown>, allDayLabel: string, locale?: string): string {
+  const end = event.end ? startOfDay(event.end) : null;
+  if (!end || dayDiff(event.start, end) <= 0) return allDayLabel;
+  const md = (d: Date) => new Intl.DateTimeFormat(locale, { day: "numeric", month: "short" }).format(d);
+  return `${md(event.start)} – ${md(end)}`;
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.white },
+  content: { paddingBottom: 16 },
+  group: { paddingTop: 0, paddingHorizontal: 8 },
+  card: { borderRadius: CARD_RADIUS, overflow: "hidden", backgroundColor: colors.zinc[50] },
+  // A day heading is separated by SPACE and weight, not a rule — the rule was
+  // a second statement of a boundary the gap already makes.
+  heading: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 14,
+    paddingTop: 16,
+    paddingBottom: 6,
+  },
+  todayInk: { color: colors.teal[700] },
+  todayDot: { width: 6, height: 6, borderRadius: 3, backgroundColor: colors.teal[600] },
+  // A dot, not a bar down the row's left edge: an edge is a border, and the
+  // row's own wash already states where it begins.
+  dot: { width: 8, height: 8, borderRadius: 4 },
+  empty: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24, backgroundColor: colors.white },
+});

package/src/calendar/calendar_toolbar.tsx

@@ -0,0 +1,84 @@
+import type { ReactNode } from "react";
+import { View, StyleSheet } from "react-native";
+import { Text } from "../text";
+import { Button } from "../button";
+import { IconButton } from "../icon_button";
+import { SegmentedControl, type SegmentOption } from "../segmented_control";
+import { useCalendar } from "./context";
+import { addDays, addMonths, startOfDay, viewTitle } from "./dates";
+import type { CalendarViewMode } from "./types";
+
+/**
+ * The toolbar's height when it does not wrap — what the root has to subtract
+ * before asking whether the GRID still fits. It wraps only at widths that are
+ * already compact, where the answer is the agenda either way.
+ */
+export const CALENDAR_TOOLBAR_HEIGHT = 57;
+
+export interface CalendarToolbarProps {
+  /** Extra controls, rendered after the view switch — filters, an add action. */
+  children?: ReactNode;
+}
+
+/**
+ * Prev / today / next, the range title, and the view switch.
+ *
+ * **Optional on purpose.** Mounting `CalendarView` with children means the app
+ * supplies its own chrome, because a Lotics screen already has a header band and
+ * a calendar that welds one on produces two stacked bands. The switch is the
+ * kit's `SegmentedControl` rather than three hand-rolled pills — a mutually
+ * exclusive choice among a few peers is exactly what that control is.
+ */
+export function CalendarToolbar(props: CalendarToolbarProps) {
+  const { date, setDate, view, setView, views, weekStartsOn, locale, labels } = useCalendar();
+
+  const step = (dir: number) => {
+    if (view === "month" || view === "agenda") setDate(addMonths(date, dir));
+    else setDate(addDays(date, dir * (view === "week" ? 7 : 1)));
+  };
+
+  const options: SegmentOption<CalendarViewMode>[] = views.map((v) => ({ label: labels[v], value: v }));
+
+  return (
+    <View style={styles.toolbar}>
+      <View style={styles.navGroup}>
+        <IconButton icon="chevron-left" size="md" accessibilityLabel={labels.previous} onPress={() => step(-1)} />
+        <Button color="secondary" title={labels.today} onPress={() => setDate(startOfDay(new Date()))} />
+        <IconButton icon="chevron-right" size="md" accessibilityLabel={labels.next} onPress={() => step(1)} />
+      </View>
+
+      <Text size="lg" weight="semibold" numberOfLines={1} style={styles.title}>
+        {viewTitle(view, date, weekStartsOn, locale)}
+      </Text>
+
+      <View style={styles.trailing}>
+        {props.children}
+        {options.length > 1 ? (
+          <SegmentedControl<CalendarViewMode>
+            accessibilityLabel={labels.month}
+            options={options}
+            value={view}
+            onValueChange={setView}
+          />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  toolbar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    gap: 12,
+    flexWrap: "wrap",
+  },
+  navGroup: { flexDirection: "row", alignItems: "center", gap: 6 },
+  // The title takes the slack and ellipses; the two control groups hold their
+  // size, so a long month name never squeezes the buttons out of the band.
+  title: { flexGrow: 1, flexShrink: 1, minWidth: 0, textAlign: "center" },
+  trailing: { flexDirection: "row", alignItems: "center", gap: 8, flexShrink: 0 },
+});

package/src/calendar/calendar_view.tsx

@@ -1,131 +1,224 @@
-import { useState } from "react";
-import { View, StyleSheet } from "react-native";
-import { Text } from "../text";
+import { useMemo, useState, type ReactNode } from "react";
+import { View, StyleSheet, type LayoutChangeEvent } from "react-native";
 import { colors } from "../colors";
-import { FocusRingPressable } from "../focus_ring_pressable";
-import { MonthView } from "./month_view";
-import { TimeGridView } from "./time_grid_view";
-import { addDays, addMonths, viewTitle } from "./dates";
-import { DEFAULT_CALENDAR_LABELS } from "./types";
-import type { CalendarEvent, CalendarLabels, CalendarViewMode, Weekday } from "./types";
+import { useLoticsLocale } from "../locale";
+import { CalendarProvider, useCalendar, type CalendarContextValue } from "./context";
+import { CalendarToolbar, CALENDAR_TOOLBAR_HEIGHT } from "./calendar_toolbar";
+import { CalendarMonth, MIN_MONTH_HEIGHT } from "./month_view";
+import { CalendarWeek, CalendarDay } from "./time_grid_view";
+import { CalendarAgenda } from "./agenda_view";
+import { daysInView, startOfDay } from "./dates";
+import { expandRepeats, sourceEventId } from "./repeat";
+import type { CalendarEvent, CalendarViewLabels, CalendarViewMode, Weekday } from "./types";
 
-const VIEW_ORDER: CalendarViewMode[] = ["month", "week", "day"];
+/** Below this width the month/week grids stop being readable and the agenda
+ *  takes over. Seven columns need ~110px each to hold a real title; under that
+ *  the grid can only say WHICH days have something. */
+const DEFAULT_COMPACT_BELOW = 720;
+
+const ALL_VIEWS: CalendarViewMode[] = ["month", "week", "day", "agenda"];
+/** What the switcher offers once the surface is too narrow for a grid. */
+const COMPACT_VIEWS: CalendarViewMode[] = ["agenda", "day"];
 
 export interface CalendarViewProps<T = unknown> {
   events: CalendarEvent<T>[];
-  defaultView?: CalendarViewMode;
+  /** Controlled anchor date. Omit and pass `defaultDate` for the drop-in form. */
+  date?: Date;
   defaultDate?: Date;
+  onDateChange?: (date: Date) => void;
+  /** Controlled view. Omit and pass `defaultView` for the drop-in form. */
+  view?: CalendarViewMode;
+  defaultView?: CalendarViewMode;
+  onViewChange?: (view: CalendarViewMode) => void;
+  /** Which modes the built-in toolbar offers. Default: all four. */
+  views?: CalendarViewMode[];
   weekStartsOn?: Weekday;
   locale?: string;
-  /** User-facing chrome strings; defaults to English. */
-  labels?: Partial<CalendarLabels>;
+  /** Per-instance overrides; the rest resolve from `LoticsLocale.calendarView`. */
+  labels?: Partial<CalendarViewLabels>;
+  /** Default visible hours of a day in the time grid. A viewport, not a filter —
+   *  an event outside it still widens the grid rather than disappearing. */
+  dayStartHour?: number;
+  dayEndHour?: number;
+  /** Width below which month/week fall back to the agenda. */
+  compactBelow?: number;
+  /**
+   * What counts as "now" — the today badge, the now line, the hour a time grid
+   * opens at. Defaults to the browser's clock.
+   *
+   * **This is not a timezone conversion, and the calendar deliberately has no
+   * `timeZone` prop.** Lotics stores a datetime as a naive WALL CLOCK, so
+   * "14:30" means 14:30 to the business and there is nothing to convert; a
+   * calendar that re-projected it into the viewer's zone would move every
+   * event. What genuinely does depend on where the reader is sitting is the
+   * answer to "what day is it", so that is the only thing taken as a prop.
+   */
+  now?: Date;
   onEventPress?: (event: CalendarEvent<T>) => void;
-  onDayPress?: (day: Date) => void;
-  /** When set, month-view event chips become draggable; dropping on another day
-   *  reschedules the event (duration preserved). Receives event + new start/end. */
-  onEventDrop?: (event: CalendarEvent<T>, newStart: Date, newEnd: Date | null) => void;
+  /** An empty day cell or hour slot was pressed. The calendar never writes —
+   *  this hands you a range so your own form or drawer can. */
+  onSlotPress?: (start: Date, end: Date) => void;
+  /** Replace the contents of an event chip; the press target, the lane and the
+   *  geometry stay the calendar's. One slot rather than a prop per decoration.
+   *  It is called for banners and timed chips alike — branch on the exported
+   *  `isBanner(event)` when a multi-day bar should render differently. */
+  renderEvent?: (event: CalendarEvent<T>) => ReactNode;
+  /** Compose the parts yourself — `CalendarToolbar`, `CalendarMonth`,
+   *  `CalendarWeek`, `CalendarDay`, `CalendarAgenda`. Omit for toolbar + view. */
+  children?: ReactNode;
 }
 
 /**
- * Full calendar: a toolbar (prev / today / next + month/week/day switch) over
- * the month grid or the week/day time grid. Date + view are owned here so the
- * primitive is drop-in; the consumer only supplies events + callbacks.
+ * A calendar of events — month grid, week/day time grid, or agenda.
+ *
+ * **Drop-in or composed.** `<CalendarView events={…} />` renders the toolbar and
+ * the current view. Passing children replaces that with whatever you mount,
+ * against the same state: an app screen already has a header band, and a
+ * calendar that welds its own on stacks two.
+ *
+ * **Controlled or not.** `date`/`view` with their `on*Change` callbacks let the
+ * surrounding screen drive — a filter chip, a route, a "jump to today" that
+ * lives in the app's own header. Omit them and the calendar owns its state.
+ *
+ * **It never writes.** Press an event or an empty slot and you get a callback;
+ * every mutation is the app's, through whatever form or workflow it uses.
+ *
+ * For rows that are RESOURCES rather than days — a channel, an owner, a vehicle
+ * — reach for `GanttView` instead. Both pack bars with the same layout core.
  */
 export function CalendarView<T = unknown>(props: CalendarViewProps<T>) {
-  const { events, defaultView = "month", defaultDate, weekStartsOn = 1, locale, onEventPress, onDayPress, onEventDrop } = props;
-  const L = { ...DEFAULT_CALENDAR_LABELS, ...props.labels };
-  const [view, setView] = useState<CalendarViewMode>(defaultView);
-  const [date, setDate] = useState<Date>(defaultDate ?? new Date());
+  const {
+    events, weekStartsOn = 1, locale, views = ALL_VIEWS,
+    dayStartHour = 0, dayEndHour = 24, compactBelow = DEFAULT_COMPACT_BELOW, now,
+    onEventPress, onSlotPress, renderEvent, children,
+  } = props;
 
-  const step = (dir: number) =>
-    setDate((d) => (view === "month" ? addMonths(d, dir) : addDays(d, dir * (view === "week" ? 7 : 1))));
+  const pack = useLoticsLocale();
+  const labels: CalendarViewLabels = { ...pack.calendarView, ...props.labels };
 
-  // Drilling into a day (month "+N more" or a day cell) opens the day grid.
-  const drillToDay = (day: Date) => {
-    setDate(day);
-    setView("day");
-    onDayPress?.(day);
+  // One reading of the clock for the whole tree, so the badge, the now line and
+  // the scroll target cannot disagree across a midnight boundary mid-render.
+  const referenceNow = now ?? new Date();
+  const [ownDate, setOwnDate] = useState<Date>(() => startOfDay(props.defaultDate ?? now ?? new Date()));
+  const [ownView, setOwnView] = useState<CalendarViewMode>(props.defaultView ?? "month");
+  const date = props.date ?? ownDate;
+  const view = props.view ?? ownView;
+
+  const setDate = (next: Date) => {
+    if (props.date === undefined) setOwnDate(next);
+    props.onDateChange?.(next);
+  };
+  const setView = (next: CalendarViewMode) => {
+    if (props.view === undefined) setOwnView(next);
+    props.onViewChange?.(next);
   };
 
-  return (
-    <View style={styles.root}>
-      <View style={styles.toolbar}>
-        <View style={styles.navGroup}>
-          <FocusRingPressable accessibilityRole="button" onPress={() => step(-1)} accessibilityLabel={L.previous} style={styles.iconBtn}>
-            <Text size="lg" color="muted">‹</Text>
-          </FocusRingPressable>
-          <FocusRingPressable accessibilityRole="button" onPress={() => setDate(new Date())} style={styles.todayBtn}>
-            <Text size="sm" weight="medium">{L.today}</Text>
-          </FocusRingPressable>
-          <FocusRingPressable accessibilityRole="button" onPress={() => step(1)} accessibilityLabel={L.next} style={styles.iconBtn}>
-            <Text size="lg" color="muted">›</Text>
-          </FocusRingPressable>
-        </View>
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width: w, height: h } = e.nativeEvent.layout;
+    const next = { width: Math.round(w), height: Math.round(h) };
+    setSize((prev) =>
+      Math.abs(prev.width - next.width) > 1 || Math.abs(prev.height - next.height) > 1 ? next : prev,
+    );
+  };
+  // 0 means "not measured yet" — assume roomy, so the first paint of a normal
+  // desktop calendar is not an agenda that flips to a grid a frame later.
+  const tooNarrow = size.width > 0 && size.width < compactBelow;
+  // A grid is unreadable in TWO directions, and only width was ever checked. A
+  // 900px-wide, 360px-tall month gave every row 20px of lane area and rendered
+  // nothing but "+N more" on all thirty-one days.
+  //
+  // The measurement is of the WHOLE calendar, so the chrome comes off before
+  // the grid is asked whether it fits — comparing the total against a grid-only
+  // floor let a 420px calendar through and it rendered exactly the wall of
+  // "+N more" this check exists to prevent.
+  const chromeHeight = children ? 0 : CALENDAR_TOOLBAR_HEIGHT;
+  const tooShort = size.height > 0 && size.height - chromeHeight < MIN_MONTH_HEIGHT;
+  const compact = tooNarrow || tooShort;
+  const effectiveView: CalendarViewMode =
+    compact && (view === "month" || view === "week") ? "agenda" : view;
 
-        <Text size="lg" weight="semibold" style={styles.title} numberOfLines={1}>
-          {viewTitle(view, date, weekStartsOn, locale)}
-        </Text>
+  // Repeating events are expanded to the VIEW's own range, so a daily timetable
+  // costs one event rather than a year of them, and navigating a month back
+  // does not have to have been materialised in advance.
+  const days = useMemo(
+    () => daysInView(effectiveView, date, weekStartsOn),
+    [effectiveView, date, weekStartsOn],
+  );
+  const shown = useMemo(
+    () => expandRepeats(events, days[0], days[days.length - 1]),
+    [events, days],
+  );
 
-        <View style={styles.viewSwitch}>
-          {VIEW_ORDER.map((v) => (
-            <FocusRingPressable accessibilityRole="button"
-              key={v}
-              onPress={() => setView(v)}
-              style={[styles.viewBtn, view === v && styles.viewBtnActive]}
-            >
-              <Text size="sm" weight={view === v ? "medium" : "regular"} color={view === v ? "default" : "muted"}>
-                {L[v]}
-              </Text>
-            </FocusRingPressable>
-          ))}
-        </View>
-      </View>
+  // Resolved against the typed array, so no part ever handles a type it doesn't
+  // know and nothing has to be cast back on the way out. An occurrence resolves
+  // through its source id, so pressing the third Tuesday of a series still
+  // hands the caller the row the series came from.
+  const byId = useMemo(() => new Map(events.map((e) => [e.id, e])), [events]);
+  const resolve = (id: string) => byId.get(id) ?? byId.get(sourceEventId(id));
 
-      <View style={{ flex: 1 }}>
-        {view === "month" ? (
-          <MonthView
-            date={date}
-            events={events}
-            weekStartsOn={weekStartsOn}
-            locale={locale}
-            moreLabel={L.more}
-            onEventPress={onEventPress}
-            onDayPress={drillToDay}
-            onEventDrop={onEventDrop}
-          />
-        ) : (
-          <TimeGridView
-            mode={view}
-            date={date}
-            events={events}
-            weekStartsOn={weekStartsOn}
-            locale={locale}
-            allDayLabel={L.allDay}
-            onEventPress={onEventPress}
-          />
+  const value: CalendarContextValue = {
+    events: shown,
+    date,
+    setDate,
+    view: effectiveView,
+    setView,
+    views: compact ? COMPACT_VIEWS.filter((v) => views.includes(v)) : views,
+    weekStartsOn,
+    locale,
+    labels,
+    now: referenceNow,
+    dayStartMinutes: Math.max(0, Math.min(23, dayStartHour)) * 60,
+    dayEndMinutes: Math.max(1, Math.min(24, dayEndHour)) * 60,
+    onEventPress: onEventPress
+      ? (id) => {
+          const event = resolve(id);
+          if (event) onEventPress(event);
+        }
+      : undefined,
+    onSlotPress,
+    renderEvent: renderEvent
+      ? (event) => {
+          const typed = resolve(event.id);
+          return typed ? renderEvent(typed) : null;
+        }
+      : undefined,
+  };
+
+  return (
+    <View style={styles.root} onLayout={onLayout}>
+      <CalendarProvider value={value}>
+        {children ?? (
+          <>
+            <CalendarToolbar />
+            <CalendarBody />
+          </>
         )}
-      </View>
+      </CalendarProvider>
+    </View>
+  );
+}
+
+/** The current view's grid, without the toolbar — for composing your own chrome
+ *  over the calendar's own view state. */
+export function CalendarBody() {
+  const { view } = useCalendar();
+  return (
+    <View style={styles.body}>
+      {view === "month" ? (
+        <CalendarMonth />
+      ) : view === "week" ? (
+        <CalendarWeek />
+      ) : view === "day" ? (
+        <CalendarDay />
+      ) : (
+        <CalendarAgenda />
+      )}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  root: { flex: 1, backgroundColor: colors.white },
-  toolbar: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    gap: 12,
-    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
-  },
-  navGroup: { flexDirection: "row", alignItems: "center", gap: 4 },
-  iconBtn: { width: 30, height: 30, borderRadius: 6, alignItems: "center", justifyContent: "center" },
-  todayBtn: { paddingHorizontal: 12, height: 30, borderRadius: 6, borderWidth: 1, borderColor: colors.border, alignItems: "center", justifyContent: "center" },
-  title: { flex: 1, textAlign: "center" },
-  viewSwitch: { flexDirection: "row", backgroundColor: colors.zinc[100], borderRadius: 10, padding: 2 },
-  viewBtn: { paddingHorizontal: 12, paddingVertical: 5, borderRadius: 8 },
-  viewBtnActive: { backgroundColor: colors.white },
+  root: { flex: 1, backgroundColor: colors.white, minWidth: 0 },
+  body: { flex: 1, minWidth: 0 },
 });