@protobase/ui 0.23.6 → 0.23.8

package/dist/app/current-address.d.ts

@@ -1,8 +1,8 @@
-import { AppAddress, CalendarView, FilterLayout, MapView, ResourceModel, ViewModel } from "@protobase/schema";
+import { AppAddress, CalendarView, FilterLayout, MapView, ResourceModel, TimelineView, ViewModel } from "@protobase/schema";
 //#region src/app/current-address.d.ts
 /**
- * A list as the app shows it: every value there, the view's default where the address names none; `map`, `calendar`
- * and `savedSearch`, the saved search it was opened from, have none.
+ * A list as the app shows it: every value there, the view's default where the address names none; `map`, `calendar`,
+ * `timeline` and `savedSearch`, the saved search it was opened from, have none.
  */
 export type ListAddress = {
   kind: 'list';
@@ -14,6 +14,7 @@ export type ListAddress = {
   filterLayout: FilterLayout;
   map?: MapView;
   calendar?: CalendarView;
+  timeline?: TimelineView;
   savedSearch?: string;
 };
 /** The address the app shows, as logical values. A record's key is in the text form the record API takes. */

package/dist/app/current-address.js

@@ -61,6 +61,7 @@ const changedList = (read, change, defaults) => {
 		...differs("filterLayout") && { filterLayout: next.filterLayout },
 		...next.map && { map: next.map },
 		...next.calendar && { calendar: next.calendar },
+		...next.timeline && { timeline: next.timeline },
 		...next.savedSearch && { savedSearch: next.savedSearch }
 	};
 };

package/dist/app/displays/calendar-controls.js

@@ -1,11 +1,8 @@
-import { segmentedClass } from "../../primitives/segmented.js";
 import { dayIn, viewerZone } from "../../format/zone.js";
 import { formatDayRange, formatMonth } from "../../format/date.js";
-import { buttonClass } from "../../primitives/button.js";
-import { AppLink } from "../use-app-address.js";
 import { calendarView, gridDays, stepView, todayView } from "./calendar-range.js";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { PeriodControls } from "./period-controls.js";
+import { jsx } from "react/jsx-runtime";
 //#region src/app/displays/calendar-controls.tsx
 /** The heading of the month or week a calendar shows. */
 const periodText = (view) => {
@@ -13,57 +10,28 @@ const periodText = (view) => {
 	const ms = (day) => Date.parse(`${day}T00:00:00Z`);
 	return view.scale === "month" ? formatMonth(ms(view.day)) : formatDayRange(ms(days[0]), ms(days.at(-1)));
 };
-/**
-* The month or week a calendar shows, with the way to the one before, the one holding today, the one after, and the
-* month or the week: links when the calendar's view is in the address, so each opens in a new tab, else buttons.
-*/
+/** The month or week a calendar shows, with the way to the one before, the one holding today, the one after, and the month or the week. */
 const CalendarControls = ({ view, now, linkTo, onView }) => {
-	const control = (to, className, label, children, current) => linkTo ? /* @__PURE__ */ jsx(AppLink, {
-		to: linkTo(to),
-		className,
-		"aria-label": label,
-		"aria-current": current ? "page" : void 0,
-		children
-	}) : /* @__PURE__ */ jsx("button", {
-		type: "button",
-		className,
-		"aria-label": label,
-		"aria-pressed": current,
-		onClick: () => onView?.(to),
-		children
-	});
 	const holdsToday = view.scale === "month" && dayIn(now, viewerZone()).startsWith(view.day.slice(0, 7));
 	const scaled = (to) => to === "week" && holdsToday ? todayView("week", now) : calendarView({
 		scale: to,
 		day: view.day
 	}, now);
-	const scale = (to, label) => control(scaled(to), segmentedClass.option(view.scale === to), label, label, view.scale === to);
-	const unit = view.scale === "month" ? "month" : "week";
-	const square = buttonClass({
-		variant: "secondary",
-		size: "sm"
+	const scale = (to, label) => ({
+		view: scaled(to),
+		label,
+		current: view.scale === to
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-wrap items-center justify-between gap-2",
-		children: [/* @__PURE__ */ jsx("h2", {
-			className: "text-sm font-medium",
-			children: periodText(view)
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1",
-				children: [
-					control(stepView(view, -1), square, `Previous ${unit}`, /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })),
-					control(todayView(view.scale, now), square, "Today", "Today"),
-					control(stepView(view, 1), square, `Next ${unit}`, /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" }))
-				]
-			}), /* @__PURE__ */ jsxs("span", {
-				role: "group",
-				"aria-label": "Calendar scale",
-				className: segmentedClass.group(),
-				children: [scale("month", "Month"), scale("week", "Week")]
-			})]
-		})]
+	return /* @__PURE__ */ jsx(PeriodControls, {
+		heading: periodText(view),
+		unit: view.scale === "month" ? "month" : "week",
+		previous: stepView(view, -1),
+		today: todayView(view.scale, now),
+		next: stepView(view, 1),
+		scales: [scale("month", "Month"), scale("week", "Week")],
+		scalesLabel: "Calendar scale",
+		linkTo,
+		onView
 	});
 };
 //#endregion

package/dist/app/displays/calendar-event.js

@@ -23,7 +23,7 @@ const startTime = (model, display, row, day) => {
 	return dayIn(ms, viewerZone()) === day ? formatTime(ms) : void 0;
 };
 /** An event as a one-line link to its record, its time first for a timestamp, styled as a small record card. */
-const EventChip = ({ model, view, display, row, day }) => {
+const EventChip = ({ model, view, display, row, day, className }) => {
 	const seedRecord = useSeedRecord(model);
 	const time = startTime(model, display, row, day);
 	return /* @__PURE__ */ jsxs(AppLink, {
@@ -33,7 +33,7 @@ const EventChip = ({ model, view, display, row, day }) => {
 			key: row.key
 		},
 		onClick: () => seedRecord(row.record),
-		className: "flex min-w-0 items-baseline gap-1 rounded-md border border-border bg-background px-1.5 py-0.5 text-xs hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+		className: cn("flex min-w-0 items-baseline gap-1 rounded-md border border-border bg-background px-1.5 py-0.5 text-xs hover:border-border-strong hover:bg-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30", className),
 		children: [time && /* @__PURE__ */ jsx("span", {
 			className: "shrink-0 tabular-nums text-muted-foreground",
 			children: time

package/dist/app/displays/calendar-range.js

@@ -6,7 +6,9 @@ const dayOf = (ms) => new Date(ms).toISOString().slice(0, 10);
 const startOf = (day) => Date.parse(`${day}T00:00:00Z`);
 /** The day `count` days after `day`, or before it for a negative count. */
 const addDays = (day, count) => dayOf(startOf(day) + count * dayMs);
+/** The Monday on or before `day`. */
 const monday = (day) => addDays(day, -((new Date(startOf(day)).getUTCDay() + 6) % 7));
+/** The 1st of the month of `day`, or of the month `step` months on. */
 const monthOf = (day, step = 0) => {
 	const date = new Date(startOf(day));
 	return dayOf(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + step, 1));
@@ -85,25 +87,33 @@ const instantOf = (value) => {
 	return Number.isNaN(ms) ? void 0 : ms;
 };
 /**
-* The days of `days` a record is on: from its start's day through its end's, both included, where a timestamp `end`
-* at midnight is over before that day starts; its start day alone without an end or with one before its start.
+* The first and last day a record is on: its start's day and its end's, where a timestamp `end` at midnight is over
+* before that day starts; its start day alone without an end or with one before its start, and none without a start.
 */
-const eventDays = (record, display, model, days, zone = viewerZone()) => {
+const recordDays = (record, display, model, zone = viewerZone()) => {
 	const start = instantOf(record[display.start]);
-	if (start === void 0) return [];
+	if (start === void 0) return void 0;
 	const timestamp = isTimestamp(display, model);
 	const day = (ms) => timestamp ? dayIn(ms, zone) : dayOf(ms);
 	const first = day(start);
 	const end = display.end === void 0 ? void 0 : instantOf(record[display.end]);
 	const ending = end === void 0 ? first : day(timestamp ? end - 1 : end);
-	const last = ending < first ? first : ending;
-	return days.filter((day) => day >= first && day <= last);
+	return {
+		first,
+		last: ending < first ? first : ending
+	};
+};
+/** The days of `days` a record is on, from its first through its last (`recordDays`). */
+const eventDays = (record, display, model, days, zone = viewerZone()) => {
+	const span = recordDays(record, display, model, zone);
+	return span ? days.filter((day) => day >= span.first && day <= span.last) : [];
 };
+/** The rows in the order they start, those without a start first. */
+const inStartOrder = (rows, display) => rows.toSorted((a, b) => (instantOf(a.record[display.start]) ?? 0) - (instantOf(b.record[display.start]) ?? 0));
 /** The rows on each day of `days`, each day's in start order. */
 const byDay = (rows, display, model, days, zone = viewerZone()) => {
 	const placed = new Map(days.map((day) => [day, []]));
-	const ordered = rows.toSorted((a, b) => (instantOf(a.record[display.start]) ?? 0) - (instantOf(b.record[display.start]) ?? 0));
-	for (const row of ordered) for (const day of eventDays(row.record, display, model, days, zone)) placed.get(day).push(row);
+	for (const row of inStartOrder(rows, display)) for (const day of eventDays(row.record, display, model, days, zone)) placed.get(day).push(row);
 	return placed;
 };
 /**
@@ -126,4 +136,4 @@ const movedPatch = (record, display, model, from, to, zone = viewerZone()) => {
 	};
 };
 //#endregion
-export { addDays, byDay, calendarView, eventDays, gridDays, movedPatch, rangeFilter, rangeOf, stepView, todayView, withRange };
+export { addDays, byDay, calendarView, eventDays, gridDays, inStartOrder, monday, monthOf, movedPatch, rangeFilter, rangeOf, recordDays, stepView, todayView, withRange };

package/dist/app/displays/display-controls.js

@@ -4,7 +4,7 @@ import { humanize } from "../../live/naming.js";
 import { displayChoices, sortFields } from "./list-displays.js";
 import { parseSort } from "../list-order.js";
 import { MenuSelect } from "../../primitives/menu-select.js";
-import { Calendar, Columns3, LayoutGrid, List, Map, SquareKanban, Table2 } from "lucide-react";
+import { Calendar, ChartGantt, Columns3, LayoutGrid, List, Map, SquareKanban, Table2 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/app/displays/display-controls.tsx
 /** The icons a display's `icon` may name; another name shows the label alone. */
@@ -15,6 +15,7 @@ const icons = {
 	board: Columns3,
 	list: List,
 	calendar: Calendar,
+	timeline: ChartGantt,
 	map: Map
 };
 /**

package/dist/app/displays/list-displays.js

@@ -63,7 +63,8 @@ const defaultIcons = {
 	cards: "cards",
 	map: "map",
 	board: "kanban",
-	calendar: "calendar"
+	calendar: "calendar",
+	timeline: "timeline"
 };
 const displayChoices = (view) => [{
 	name: tableDisplay,
@@ -138,6 +139,12 @@ const shownFields = (model, view, display) => {
 		display.end,
 		display.title ?? recordTitleField(model, view)
 	].filter((name) => name !== void 0);
+	if (display.kind === "timeline") return [
+		display.start,
+		display.end,
+		display.group,
+		display.title ?? recordTitleField(model, view)
+	].filter((name) => name !== void 0);
 	const { image, title, subtitle, amount, badge, meta, footer, flags } = cardFields(model, view, display);
 	return [
 		image,

package/dist/app/displays/period-controls.js

@@ -0,0 +1,55 @@
+import { segmentedClass } from "../../primitives/segmented.js";
+import { buttonClass } from "../../primitives/button.js";
+import { AppLink } from "../use-app-address.js";
+import { Fragment } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/app/displays/period-controls.tsx
+/**
+* The period a calendar or a timeline shows, with the way to the one before, the one holding today, the one after, and
+* its scales: links when the period is in the address, so each opens in a new tab, else buttons.
+*/
+const PeriodControls = ({ heading, unit, previous, today, next, scales, scalesLabel, linkTo, onView }) => {
+	const control = (to, className, label, children, current) => linkTo ? /* @__PURE__ */ jsx(AppLink, {
+		to: linkTo(to),
+		className,
+		"aria-label": label,
+		"aria-current": current ? "page" : void 0,
+		children
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className,
+		"aria-label": label,
+		"aria-pressed": current,
+		onClick: () => onView?.(to),
+		children
+	});
+	const square = buttonClass({
+		variant: "secondary",
+		size: "sm"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center justify-between gap-2",
+		children: [/* @__PURE__ */ jsx("h2", {
+			className: "text-sm font-medium",
+			children: heading
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					control(previous, square, `Previous ${unit}`, /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })),
+					control(today, square, "Today", "Today"),
+					control(next, square, `Next ${unit}`, /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" }))
+				]
+			}), /* @__PURE__ */ jsx("span", {
+				role: "group",
+				"aria-label": scalesLabel,
+				className: segmentedClass.group(),
+				children: scales.map((scale) => /* @__PURE__ */ jsx(Fragment, { children: control(scale.view, segmentedClass.option(scale.current), scale.label, scale.label, scale.current) }, scale.label))
+			})]
+		})]
+	});
+};
+//#endregion
+export { PeriodControls };

package/dist/app/displays/timeline-display.js

@@ -0,0 +1,225 @@
+import { Skeleton } from "../../primitives/skeleton.js";
+import { dayIn, viewerZone } from "../../format/zone.js";
+import { formatDate } from "../../format/date.js";
+import { humanize } from "../../live/naming.js";
+import { usePermissions } from "../meta-gate.js";
+import { ErrorBanner } from "../error-banner.js";
+import { can, rowAllows } from "../permissions.js";
+import { addDays, inStartOrder, recordDays } from "./calendar-range.js";
+import { PeriodControls } from "./period-controls.js";
+import { EventChip, eventTitle } from "./calendar-event.js";
+import { useCalendarRows } from "./use-calendar-rows.js";
+import { movedRows, useCalendarMove } from "./use-calendar-move.js";
+import { scaledTimeline, stepTimeline, timelineDays, timelineHeading, timelineLanes, timelineRange, timelineTicks, timelineView } from "./timeline-range.js";
+import { TimelineLines, TimelineScale } from "./timeline-scale.js";
+import { TimelineRow } from "./timeline-row.js";
+import { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors } from "@dnd-kit/core";
+//#region src/app/displays/timeline-display.tsx
+const scales = [
+	{
+		scale: "week",
+		label: "Week"
+	},
+	{
+		scale: "month",
+		label: "Month"
+	},
+	{
+		scale: "quarter",
+		label: "Quarter"
+	}
+];
+/**
+* The list's records as bars over the days of a week, a month or a quarter, in lanes by the display's `group`, loaded
+* for those days alone through the list API as a calendar's are; a bar dragged along its row, or moved with the
+* keyboard, saves the record with its dates moved by the same days.
+*/
+const TimelineDisplay = ({ model, view, display, fields, filter, at, linkTo, now = Date.now() }) => {
+	const [local, setLocal] = useState();
+	const shown = timelineView(linkTo ? at : local, now);
+	const days = timelineDays(shown);
+	const ticks = timelineTicks(shown);
+	const list = useCalendarRows({
+		model,
+		display,
+		range: timelineRange(shown),
+		fields,
+		filter
+	});
+	const { moves, move } = useCalendarMove(model, display);
+	const lanes = timelineLanes(inStartOrder(movedRows(list.rows, moves), display), model, view, display);
+	const permissions = usePermissions(model.name);
+	const movable = can(permissions, "update") && [display.start, display.end].every((name) => name === void 0 || !model.fields[name]?.readOnly);
+	const [active, setActive] = useState();
+	const dragged = useRef(false);
+	const shift = useRef(0);
+	const track = useRef(null);
+	const dayWidth = () => (track.current?.getBoundingClientRect().width ?? 0) / days.length;
+	const daysAcross = (x) => {
+		const width = dayWidth();
+		return width > 0 ? Math.round(x / width) : 0;
+	};
+	const snap = ({ transform }) => ({
+		...transform,
+		x: daysAcross(transform.x) * dayWidth(),
+		y: 0
+	});
+	const dayKeys = (event, { currentCoordinates }) => {
+		const step = event.code === "ArrowLeft" ? -1 : event.code === "ArrowRight" ? 1 : 0;
+		if (step === 0) return void 0;
+		event.preventDefault();
+		return {
+			x: currentCoordinates.x + step * dayWidth(),
+			y: currentCoordinates.y
+		};
+	};
+	const sensors = useSensors(useSensor(MouseSensor, { activationConstraint: { distance: 4 } }), useSensor(TouchSensor, { activationConstraint: {
+		delay: 250,
+		tolerance: 5
+	} }), useSensor(KeyboardSensor, {
+		keyboardCodes: {
+			start: ["Space"],
+			cancel: ["Escape"],
+			end: ["Space", "Enter"]
+		},
+		coordinateGetter: dayKeys
+	}));
+	const today = dayIn(now, viewerZone());
+	const title = (picked) => eventTitle(model, view, display, picked.row);
+	const startText = (picked) => formatDate(Date.parse(`${addDays(picked.day, shift.current)}T00:00:00Z`));
+	const announcements = {
+		onDragStart: ({ active: picked }) => `Picked up ${title(picked.data.current)}.`,
+		onDragMove: ({ active: picked }) => `${title(picked.data.current)} starts on ${startText(picked.data.current)}.`,
+		onDragOver: () => void 0,
+		onDragEnd: ({ active: picked }) => shift.current === 0 ? `${title(picked.data.current)} was put back.` : `${title(picked.data.current)} was moved to ${startText(picked.data.current)}.`,
+		onDragCancel: ({ active: picked }) => `Moving ${title(picked.data.current)} was cancelled.`
+	};
+	const release = () => {
+		setActive(void 0);
+		setTimeout(() => dragged.current = false);
+	};
+	const start = ({ active: picked }) => {
+		dragged.current = true;
+		shift.current = 0;
+		setActive(picked.data.current);
+	};
+	const moving = ({ delta }) => shift.current = daysAcross(delta.x);
+	const end = ({ active: picked, delta }) => {
+		release();
+		shift.current = daysAcross(delta.x);
+		const { row } = picked.data.current;
+		const span = recordDays(row.record, display, model);
+		if (span && shift.current !== 0) move(row, span.first, addDays(span.first, shift.current));
+	};
+	const groupLabel = display.group === void 0 ? view?.names?.plural ?? humanize(model.name) : view?.fields[display.group]?.label ?? humanize(display.group);
+	const empty = !list.loading && !list.error && list.rows.length === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col gap-3",
+		children: [
+			/* @__PURE__ */ jsx(PeriodControls, {
+				heading: timelineHeading(shown),
+				unit: shown.scale,
+				previous: stepTimeline(shown, -1),
+				today: timelineView({
+					scale: shown.scale,
+					day: today
+				}, now),
+				next: stepTimeline(shown, 1),
+				scales: scales.map(({ scale, label }) => ({
+					view: scaledTimeline(shown, scale, now),
+					label,
+					current: shown.scale === scale
+				})),
+				scalesLabel: "Timeline scale",
+				linkTo,
+				onView: setLocal
+			}),
+			list.error && /* @__PURE__ */ jsx(ErrorBanner, {
+				title: "Could not load rows",
+				error: list.error
+			}),
+			list.capped && /* @__PURE__ */ jsxs("p", {
+				className: "text-xs text-muted-foreground",
+				children: [
+					"Showing the first ",
+					500,
+					" records of this ",
+					shown.scale,
+					". Narrow the filter to see the rest."
+				]
+			}),
+			/* @__PURE__ */ jsxs(DndContext, {
+				sensors,
+				modifiers: [snap],
+				onDragStart: start,
+				onDragMove: moving,
+				onDragEnd: end,
+				onDragCancel: release,
+				accessibility: {
+					announcements,
+					screenReaderInstructions: { draggable: "To move a bar to other days, press Space, move it a day with the left and right arrow keys, and press Space again to drop it there. Escape puts it back." }
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "overflow-hidden rounded-lg border border-border",
+					children: [/* @__PURE__ */ jsx(TimelineScale, {
+						ticks,
+						days,
+						today,
+						label: groupLabel,
+						trackRef: track
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "relative",
+						children: [
+							/* @__PURE__ */ jsx(TimelineLines, {
+								ticks,
+								days,
+								today
+							}),
+							list.loading && /* @__PURE__ */ jsxs("div", {
+								className: "relative flex flex-col gap-2 p-2",
+								children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4" })]
+							}),
+							empty && /* @__PURE__ */ jsxs("p", {
+								className: "relative px-2 py-3 text-xs text-muted-foreground",
+								children: [
+									"Nothing in this ",
+									shown.scale,
+									"."
+								]
+							}),
+							!list.loading && lanes.map((lane) => /* @__PURE__ */ jsxs("section", {
+								"aria-label": lane.label,
+								className: "relative border-b border-border last:border-b-0",
+								children: [lane.label !== void 0 && /* @__PURE__ */ jsxs("h3", {
+									className: "flex items-center gap-1.5 border-b border-border bg-surface px-2 py-1 text-xs font-medium",
+									children: [lane.label, /* @__PURE__ */ jsx("span", {
+										className: "tabular-nums text-muted-foreground",
+										children: lane.rows.length
+									})]
+								}), lane.rows.map((row) => /* @__PURE__ */ jsx(TimelineRow, {
+									model,
+									view,
+									display,
+									row,
+									days,
+									movable: movable && rowAllows(row.record, "update"),
+									dragged: () => dragged.current
+								}, row.key))]
+							}, lane.key))
+						]
+					})]
+				}), /* @__PURE__ */ jsx(DragOverlay, { children: active && /* @__PURE__ */ jsx(EventChip, {
+					model,
+					view,
+					display,
+					row: active.row,
+					day: active.day
+				}) })]
+			})
+		]
+	});
+};
+//#endregion
+export { TimelineDisplay };

package/dist/app/displays/timeline-range.js

@@ -0,0 +1,140 @@
+import { dayIn, viewerZone } from "../../format/zone.js";
+import { formatDayRange, formatMonth, formatMonthName, formatMonthRange, formatWeekday } from "../../format/date.js";
+import { humanize } from "../../live/naming.js";
+import { displayValue } from "../../live/display-value.js";
+import { addDays, monday, monthOf, recordDays } from "./calendar-range.js";
+//#region src/app/displays/timeline-range.ts
+const dayMs = 864e5;
+const ms = (day) => Date.parse(`${day}T00:00:00Z`);
+const quarterOf = (day, step = 0) => {
+	const date = new Date(ms(day));
+	return new Date(Date.UTC(date.getUTCFullYear(), Math.floor(date.getUTCMonth() / 3) * 3 + 3 * step, 1)).toISOString().slice(0, 10);
+};
+const normalised = ({ scale, day }) => ({
+	scale,
+	day: scale === "week" ? monday(day) : scale === "month" ? monthOf(day) : quarterOf(day)
+});
+/** The period a timeline shows: the address's, from the week's Monday, the month's 1st or the quarter's, else the month of `now`. */
+const timelineView = (at, now, zone = viewerZone()) => normalised(at ?? {
+	scale: "month",
+	day: dayIn(now, zone)
+});
+/** The week before (-1) or after (1) `view`, or the month or quarter. */
+const stepTimeline = (view, step) => {
+	const { scale, day } = normalised(view);
+	return {
+		scale,
+		day: scale === "week" ? addDays(day, 7 * step) : scale === "month" ? monthOf(day, step) : quarterOf(day, step)
+	};
+};
+/** The days a timeline shows: the week's seven, the month's, or the quarter's. */
+const timelineDays = (view) => {
+	const first = normalised(view).day;
+	const count = (ms(stepTimeline(view, 1).day) - ms(first)) / dayMs;
+	return Array.from({ length: count }, (_, index) => addDays(first, index));
+};
+/** The days `view` shows, as a range from its first day to the day after its last. */
+const timelineRange = (view) => ({
+	from: normalised(view).day,
+	to: stepTimeline(view, 1).day
+});
+/**
+* The period of `scale` a timeline switches to: the one holding today when the period shown holds it, else the one
+* holding the period's first day.
+*/
+const scaledTimeline = (view, scale, now, zone = viewerZone()) => {
+	const today = dayIn(now, zone);
+	const days = timelineDays(view);
+	return normalised({
+		scale,
+		day: today >= days[0] && today <= days.at(-1) ? today : days[0]
+	});
+};
+/** The heading of the period a timeline shows: "12–18 Oct 2026", "October 2026", "October – December 2026". */
+const timelineHeading = (view) => {
+	const days = timelineDays(view);
+	if (view.scale === "week") return formatDayRange(ms(days[0]), ms(days.at(-1)));
+	return view.scale === "month" ? formatMonth(ms(days[0])) : formatMonthRange(ms(days[0]), ms(monthOf(days.at(-1))));
+};
+/** The marks of a timeline's scale: a week's days by weekday and number, a month's by number, a quarter's months by name. */
+const timelineTicks = (view) => {
+	const days = timelineDays(view);
+	if (view.scale === "week") return days.map((day, index) => ({
+		index,
+		span: 1,
+		label: `${formatWeekday(ms(day))} ${Number(day.slice(8))}`
+	}));
+	if (view.scale === "month") return days.map((day, index) => ({
+		index,
+		span: 1,
+		label: String(Number(day.slice(8))),
+		...index % 7 !== 0 && { minor: true }
+	}));
+	const firsts = days.flatMap((day, index) => day.endsWith("-01") ? [index] : []);
+	return firsts.map((index, at) => ({
+		index,
+		span: (firsts[at + 1] ?? days.length) - index,
+		label: formatMonthName(ms(days[index]))
+	}));
+};
+/**
+* Where a record's bar lies on `days`: the index of its first and last day shown, and whether it starts before them or
+* ends after them; none for a record without a start or off them.
+*/
+const barOf = (record, display, model, days, zone = viewerZone()) => {
+	const span = recordDays(record, display, model, zone);
+	const first = days[0];
+	const last = days.at(-1);
+	if (!span || first === void 0 || last === void 0 || span.last < first || span.first > last) return void 0;
+	return {
+		first: span.first < first ? 0 : days.indexOf(span.first),
+		last: span.last > last ? days.length - 1 : days.indexOf(span.last),
+		before: span.first < first,
+		after: span.last > last,
+		/** The day the record starts on, shown or not. */
+		start: span.first
+	};
+};
+const noValue = "none";
+/**
+* The lanes of a timeline: one per value of its `group` that a record has, each with its records in their order; an
+* enum's in the order the field lists its values, a relation's by the name of the record it points at, others by value,
+* and last the records without a value, headed "No <field>" as a board's column is.
+*/
+const timelineLanes = (rows, model, view, display) => {
+	const group = display.group;
+	const field = group === void 0 ? void 0 : model.fields[group];
+	if (group === void 0 || !field) return [{
+		key: "",
+		rows
+	}];
+	const hints = view?.fields[group];
+	const lanes = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		const value = row.record[group];
+		const empty = value === null || value === void 0 || value === "";
+		const key = empty ? noValue : `value:${String(value)}`;
+		const label = empty ? `No ${(hints?.label ?? humanize(group)).toLowerCase()}` : row.labels[group] ?? displayValue(field, value, hints);
+		const known = lanes.get(key) ?? {
+			value: empty ? void 0 : value,
+			lane: {
+				key,
+				label,
+				rows: []
+			}
+		};
+		known.lane.rows.push(row);
+		lanes.set(key, known);
+	}
+	const order = field.enumValues ?? [];
+	const compare = (a, b) => {
+		if (a.value === void 0 || b.value === void 0) return Number(a.value === void 0) - Number(b.value === void 0);
+		if (field.type === "enum") return order.indexOf(String(a.value)) - order.indexOf(String(b.value));
+		if (field.type === "relation") return a.lane.label.localeCompare(b.lane.label);
+		if (typeof a.value === "number" && typeof b.value === "number") return a.value - b.value;
+		return String(a.value).localeCompare(String(b.value), void 0, { numeric: true });
+	};
+	return [...lanes.values()].toSorted(compare).map(({ lane }) => lane);
+};
+//#endregion
+export { barOf, scaledTimeline, stepTimeline, timelineDays, timelineHeading, timelineLanes, timelineRange, timelineTicks, timelineView };