@sincpro/web-ui 0.1.0 → 1.0.0

package/dist/components/timeline/RecordTimeline.js

@@ -0,0 +1,214 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { hoursMinutes, lanesOf, rangeOf, shiftDate, snap, snapOf, TIMELINE_SCALES, unitSpan, } from "./time.js";
+import { TimelineToolbar } from "./TimelineToolbar.js";
+import { fillCopy, useUiCopy } from "../../foundations/copy.js";
+import { Avatar } from "../../primitives/value/Person.js";
+import { useEffect, useRef, useState, } from "react";
+const FILL = {
+    neutral: "bg-muted text-surface",
+    info: "bg-info text-surface",
+    good: "bg-good text-surface",
+    warn: "bg-warn text-surface",
+    bad: "bg-bad text-surface",
+    accent: "bg-primary text-surface",
+};
+/* Pixels a column asks for at the middle zoom; the zoom multiplies them. Past the screen's width
+   the track scrolls sideways — the names column stays. */
+const BASE = { day: 44, week: 150, month: 44, year: 96 };
+const ZOOM = [0.5, 0.75, 1, 1.5, 2.25];
+const BAR = 26;
+const GAP = 4;
+/**
+ * Records on a timeline, grouped in rows — Odoo's Gantt view: attendances by employee, shifts,
+ * room bookings, work orders by machine.
+ *
+ * Context: a project Gantt (`RecordGantt`) is one task per row with dependencies; THIS is the
+ * other one people mean by «Gantt» in an ERP — a grouping with N records per row, read across
+ * time. The scale says the period (a day by hours, a week, a month by days, a year by months);
+ * the toolbar moves it (‹ › date · today), zooms, switches scale and takes the whole screen.
+ *
+ * Controlled: a drag shows a draft and reports `onMove` on release; the bar stays where
+ * `items` says. Everything the pointer does has a key: Alt + ← / → moves by the snap, with
+ * Shift it stretches, Alt + ↑ / ↓ changes the row; every move is announced.
+ */
+export function RecordTimeline({ items, keyOf, rowOf, rows: givenRows, startOf, endOf, titleOf, labelOf, toneOf, rowHeader, scale: outerScale, defaultScale = "week", onScaleChange, scales = TIMELINE_SCALES, date: outerDate, defaultDate, onDateChange, onMove, onCreate, onOpen, }) {
+    const copy = useUiCopy();
+    const words = copy.timeline;
+    const [ownScale, setOwnScale] = useState(defaultScale);
+    const [ownDate, setOwnDate] = useState(() => defaultDate ?? new Date());
+    const scale = outerScale ?? ownScale;
+    const date = outerDate ?? ownDate;
+    const setScale = (next) => {
+        if (outerScale === undefined)
+            setOwnScale(next);
+        onScaleChange?.(next);
+    };
+    const setDate = (next) => {
+        if (outerDate === undefined)
+            setOwnDate(next);
+        onDateChange?.(next);
+    };
+    const [zoom, setZoom] = useState(3);
+    const [draft, setDraft] = useState(null);
+    const draftRef = useRef(null);
+    const justDragged = useRef(false);
+    const [said, setSaid] = useState("");
+    const root = useRef(null);
+    const [fullscreen, setFullscreen] = useState(false);
+    useEffect(() => {
+        const follow = () => setFullscreen(document.fullscreenElement === root.current);
+        document.addEventListener("fullscreenchange", follow);
+        return () => document.removeEventListener("fullscreenchange", follow);
+    }, []);
+    const range = rangeOf(scale, date, copy.locale);
+    const from = +range.start;
+    const span = +range.end - from;
+    const step = snapOf(scale);
+    const cell = BASE[scale] * (ZOOM[zoom - 1] ?? 1);
+    const time = new Intl.DateTimeFormat(copy.locale, {
+        hour: "2-digit",
+        minute: "2-digit",
+        /* 09:12–13:13 and not «09:12 a. m.–01:13 p. m.»: a bar has room for the hours. */
+        hourCycle: "h23",
+    });
+    const day = new Intl.DateTimeFormat(copy.locale, { day: "numeric", month: "short" });
+    const rows = givenRows ?? [...new Set(items.map(rowOf))].map((id) => ({ id, label: id }));
+    const shown = items.filter((item) => +endOf(item) > from && +startOf(item) < from + span);
+    /* Where each record is drawn: its own dates, or the draft while it is being dragged. */
+    const placed = (item) => {
+        const id = keyOf(item);
+        if (draft !== null && draft.id === id) {
+            return { start: new Date(draft.start), end: new Date(draft.end), row: draft.row };
+        }
+        return { start: startOf(item), end: endOf(item), row: rowOf(item) };
+    };
+    const describe = (start, end) => scale === "day" || scale === "week"
+        ? `${hoursMinutes(+end - +start)} (${time.format(start)}–${time.format(end)})`
+        : `${day.format(start)} – ${day.format(end)}`;
+    const report = (item, start, end, row) => {
+        onMove?.(item, start, end, row);
+        setSaid(fillCopy(words.moved, {
+            name: titleOf?.(item) ?? keyOf(item),
+            range: describe(start, end),
+        }));
+    };
+    const drag = (event, item, mode) => {
+        if (onMove === undefined || event.button !== 0)
+            return;
+        event.stopPropagation();
+        const track = event.currentTarget.closest("[data-track]");
+        if (track === null)
+            return;
+        const perPx = span / track.getBoundingClientRect().width;
+        const x0 = event.clientX;
+        const start0 = +startOf(item);
+        const end0 = +endOf(item);
+        const id = keyOf(item);
+        const row0 = rowOf(item);
+        const move = (next) => {
+            const delta = snap((next.clientX - x0) * perPx, step);
+            const under = document
+                .elementFromPoint(next.clientX, next.clientY)
+                ?.closest("[data-row]")?.dataset["row"];
+            const draftNow = mode === "move"
+                ? { id, start: start0 + delta, end: end0 + delta, row: under ?? row0 }
+                : { id, start: start0, end: Math.max(start0 + step, end0 + delta), row: row0 };
+            draftRef.current = draftNow;
+            setDraft(draftNow);
+        };
+        const stop = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", stop);
+            const done = draftRef.current;
+            draftRef.current = null;
+            setDraft(null);
+            if (done === null)
+                return;
+            const changed = done.start !== start0 || done.end !== end0 || done.row !== row0;
+            if (!changed)
+                return;
+            justDragged.current = true;
+            report(item, new Date(done.start), new Date(done.end), done.row);
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", stop);
+    };
+    const byKeyboard = (event, item) => {
+        if (onMove === undefined || !event.altKey)
+            return;
+        const start = +startOf(item);
+        const end = +endOf(item);
+        const row = rowOf(item);
+        const at = rows.findIndex((one) => one.id === row);
+        const dir = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
+        if (dir !== 0) {
+            event.preventDefault();
+            if (event.shiftKey) {
+                report(item, new Date(start), new Date(Math.max(start + step, end + dir * step)), row);
+            }
+            else {
+                report(item, new Date(start + dir * step), new Date(end + dir * step), row);
+            }
+            return;
+        }
+        const vertical = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+        const target = rows[at + vertical];
+        if (vertical !== 0 && target !== undefined) {
+            event.preventDefault();
+            report(item, new Date(start), new Date(end), target.id);
+        }
+    };
+    const create = (event, row) => {
+        if (onCreate === undefined)
+            return;
+        const rect = event.currentTarget.getBoundingClientRect();
+        const at = new Date(from + ((event.clientX - rect.left) / rect.width) * span);
+        const { start, end } = unitSpan(scale, at);
+        onCreate(row.id, start, end);
+    };
+    const now = Date.now();
+    const nowAt = now > from && now < from + span ? ((now - from) / span) * 100 : null;
+    const percent = (time) => ((Math.min(Math.max(time, from), from + span) - from) / span) * 100;
+    return (_jsxs("div", { ref: root, className: "flex min-w-0 flex-col overflow-hidden rounded-box border border-line bg-surface", children: [_jsx(TimelineToolbar, { title: range.title, date: date, onDateChange: setDate, onStep: (steps) => setDate(shiftDate(scale, date, steps)), scale: scale, onScaleChange: setScale, scales: scales, zoom: zoom, onZoomChange: setZoom, fullscreen: fullscreen, onFullscreenChange: (next) => {
+                    if (next)
+                        void root.current?.requestFullscreen?.();
+                    else if (document.fullscreenElement !== null)
+                        void document.exitFullscreen();
+                } }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: _jsxs("div", { style: {
+                        minWidth: `calc(var(--container-timeline-label) + ${range.units.length * cell}px)`,
+                    }, children: [_jsxs("div", { className: "sticky top-0 z-20 flex border-b border-line-strong bg-surface", children: [_jsx("div", { className: "sticky left-0 z-10 flex w-(--container-timeline-label) shrink-0 items-end border-r border-line bg-surface px-3 py-2 text-meta font-semibold text-ink", children: rowHeader }), _jsx("div", { className: "flex min-w-0 flex-1", children: range.units.map((unit) => (_jsx("div", { className: `flex min-w-0 flex-1 items-center justify-center border-l border-line py-2 text-micro font-semibold whitespace-nowrap text-ink tabular-nums first:border-l-0 ${unit.weekend ? "bg-ink/4" : ""}`, children: unit.label }, +unit.start))) })] }), rows.map((row) => {
+                            const inRow = shown.filter((item) => placed(item).row === row.id);
+                            const { lane, count } = lanesOf(inRow, (item) => placed(item).start, (item) => placed(item).end);
+                            const height = count * (BAR + GAP) + GAP * 2;
+                            return (_jsxs("div", { "data-row": row.id, className: "flex border-b border-line", children: [_jsxs("div", { className: "sticky left-0 z-10 flex w-(--container-timeline-label) shrink-0 items-center gap-2 border-r border-line bg-surface px-3", children: [row.avatar === undefined || row.avatar === false ? null : (_jsx(Avatar, { name: row.label, size: "sm", ...(typeof row.avatar === "string" ? { src: row.avatar } : {}) })), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate text-meta text-ink", children: row.label }), row.detail === undefined ? null : (_jsx("p", { className: "truncate text-micro text-muted", children: row.detail }))] })] }), _jsxs("div", { "data-track": "", onClick: (event) => create(event, row), className: `relative flex min-w-0 flex-1 ${onCreate === undefined ? "" : "cursor-cell"}`, style: { height }, children: [range.units.map((unit) => (_jsx("div", { "aria-hidden": true, className: `min-w-0 flex-1 border-l border-line first:border-l-0 ${unit.weekend ? "bg-ink/4" : ""}` }, +unit.start))), nowAt === null ? null : (_jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-y-0 w-0.5 bg-bad", style: { left: `${nowAt}%` } })), inRow.map((item) => {
+                                                const { start, end } = placed(item);
+                                                const left = percent(+start);
+                                                const width = Math.max(percent(+end) - left, 0.6);
+                                                const tone = toneOf?.(item) ?? "neutral";
+                                                const title = titleOf?.(item);
+                                                const text = labelOf?.(item) ??
+                                                    [title, describe(start, end)]
+                                                        .filter((part) => part !== undefined)
+                                                        .join(" · ");
+                                                const dragging = draft !== null && draft.id === keyOf(item);
+                                                return (_jsxs("button", { type: "button", title: onMove === undefined ? undefined : words.moveHint, "aria-label": typeof text === "string" ? text : title, ...(onMove === undefined
+                                                        ? {}
+                                                        : {
+                                                            "aria-keyshortcuts": "Alt+ArrowLeft Alt+ArrowRight Alt+ArrowUp Alt+ArrowDown",
+                                                        }), onPointerDown: (event) => drag(event, item, "move"), onKeyDown: (event) => byKeyboard(event, item), onClick: (event) => {
+                                                        event.stopPropagation();
+                                                        if (justDragged.current) {
+                                                            justDragged.current = false;
+                                                            return;
+                                                        }
+                                                        onOpen?.(item);
+                                                    }, className: `absolute z-1 flex items-center overflow-hidden rounded-control px-2 text-left text-micro font-medium whitespace-nowrap shadow-raised focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary ${FILL[tone]} ${onMove === undefined ? "" : "cursor-grab active:cursor-grabbing"} ${dragging ? "opacity-80 ring-2 ring-primary" : ""}`, style: {
+                                                        left: `${left}%`,
+                                                        width: `${width}%`,
+                                                        top: GAP + (lane.get(item) ?? 0) * (BAR + GAP),
+                                                        height: BAR,
+                                                    }, children: [_jsx("span", { className: "min-w-0 truncate", children: text }), onMove === undefined ? null : (_jsx("span", { "aria-hidden": true, onPointerDown: (event) => drag(event, item, "resize"), className: "absolute inset-y-0 right-0 w-2 cursor-ew-resize" }))] }, keyOf(item)));
+                                            })] })] }, row.id));
+                        })] }) }), _jsx("span", { role: "status", className: "sr-only", children: said })] }));
+}

package/dist/components/timeline/TimelineToolbar.d.ts

@@ -0,0 +1,30 @@
+import { type TimelineScale } from "./time.js";
+import type { ReactNode } from "react";
+export type TimelineToolbarProps = {
+    /** The period being looked at, and what it says: «29 de octubre de 2026». */
+    title?: ReactNode;
+    /** Where it stands. Without `onDateChange` there is no date navigation (a project Gantt shows
+     *  its whole span). */
+    date?: Date;
+    onDateChange?: (next: Date) => void;
+    /** The arrows: one period back or forward. */
+    onStep?: (steps: -1 | 1) => void;
+    scale?: TimelineScale;
+    onScaleChange?: (next: TimelineScale) => void;
+    /** The scales offered, in order. All four by default. */
+    scales?: readonly TimelineScale[];
+    /** 1 (widest view) to 5 (closest). */
+    zoom?: number;
+    onZoomChange?: (next: number) => void;
+    fullscreen?: boolean;
+    onFullscreenChange?: (next: boolean) => void;
+};
+/**
+ * The bar over a timeline — a Gantt, a planning, a schedule: where am I (‹ › a date · today),
+ * how close (zoom), at what scale (day · week · month · year) and the whole screen.
+ *
+ * Context: Odoo's Gantt toolbar, as one piece shared by `RecordTimeline` and `RecordGantt`, so
+ * the two read the same. Every part is optional: what has no handler is not drawn — a
+ * control that does nothing is a dead end.
+ */
+export declare function TimelineToolbar({ title, date, onDateChange, onStep, scale, onScaleChange, scales, zoom, onZoomChange, fullscreen, onFullscreenChange, }: TimelineToolbarProps): import("react").JSX.Element;

package/dist/components/timeline/TimelineToolbar.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TIMELINE_SCALES, } from "./time.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Button, IconButton } from "../../primitives/button/Button.js";
+import { SegmentedControl } from "../../primitives/choice/SegmentedControl.js";
+import { Slider } from "../../primitives/choice/Slider.js";
+import { DatePicker } from "../../primitives/date/DatePicker.js";
+import { ChevronLeft, ChevronRight, Maximize2, Minimize2, ZoomIn, ZoomOut, } from "lucide-react";
+/** `2026-10-29` ↔ a local Date, the way `DatePicker` speaks. */
+const isoDay = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+const fromIso = (iso) => {
+    const [y, m, d] = iso.split("-").map(Number);
+    return new Date(y ?? 1970, (m ?? 1) - 1, d ?? 1);
+};
+/**
+ * The bar over a timeline — a Gantt, a planning, a schedule: where am I (‹ › a date · today),
+ * how close (zoom), at what scale (day · week · month · year) and the whole screen.
+ *
+ * Context: Odoo's Gantt toolbar, as one piece shared by `RecordTimeline` and `RecordGantt`, so
+ * the two read the same. Every part is optional: what has no handler is not drawn — a
+ * control that does nothing is a dead end.
+ */
+export function TimelineToolbar({ title, date, onDateChange, onStep, scale, onScaleChange, scales = TIMELINE_SCALES, zoom, onZoomChange, fullscreen = false, onFullscreenChange, }) {
+    const copy = useUiCopy();
+    const words = copy.timeline;
+    return (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 border-b border-line px-3 py-2", children: [onStep === undefined && onDateChange === undefined ? null : (_jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [onStep === undefined ? null : (_jsxs(_Fragment, { children: [_jsx(IconButton, { icon: ChevronLeft, label: words.prev, onClick: () => onStep(-1) }), _jsx(IconButton, { icon: ChevronRight, label: words.next, onClick: () => onStep(1) })] })), onDateChange === undefined || date === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("div", { className: "w-40", children: _jsx(DatePicker, { "aria-label": words.goTo, value: isoDay(date), onChange: (next) => {
+                                        if (next !== null)
+                                            onDateChange(fromIso(next));
+                                    } }) }), _jsx(Button, { role: "secondary", size: "sm", onClick: () => onDateChange(new Date()), children: words.today })] }))] })), title === undefined ? null : (_jsx("p", { className: "min-w-0 flex-1 truncate text-body font-semibold text-ink first-letter:uppercase", children: title })), _jsxs("div", { className: "ml-auto flex shrink-0 flex-wrap items-center gap-3", children: [zoom === undefined || onZoomChange === undefined ? null : (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(IconButton, { icon: ZoomOut, label: words.zoomOut, disabled: zoom <= 1, onClick: () => onZoomChange(Math.max(1, zoom - 1)) }), _jsx("div", { className: "w-24", children: _jsx(Slider, { "aria-label": words.zoom, value: zoom, min: 1, max: 5, output: false, onChange: onZoomChange }) }), _jsx(IconButton, { icon: ZoomIn, label: words.zoomIn, disabled: zoom >= 5, onClick: () => onZoomChange(Math.min(5, zoom + 1)) })] })), scale === undefined || onScaleChange === undefined ? null : (_jsx(SegmentedControl, { "aria-label": words.scale, size: "sm", value: scale, onChange: (next) => onScaleChange(next), options: scales.map((one) => ({ value: one, label: words.scales[one] })) })), onFullscreenChange === undefined ? null : (_jsx(IconButton, { icon: fullscreen ? Minimize2 : Maximize2, label: fullscreen ? words.exitFullscreen : words.fullscreen, onClick: () => onFullscreenChange(!fullscreen) }))] })] }));
+}

package/dist/components/timeline/index.d.ts

@@ -0,0 +1,3 @@
+export { RecordTimeline, type RecordTimelineProps, type TimelineRow, } from "./RecordTimeline.js";
+export { TIMELINE_SCALES, type TimelineScale, } from "./time.js";
+export { TimelineToolbar, type TimelineToolbarProps, } from "./TimelineToolbar.js";

package/dist/components/timeline/index.js

@@ -0,0 +1,3 @@
+export { RecordTimeline, } from "./RecordTimeline.js";
+export { TIMELINE_SCALES, } from "./time.js";
+export { TimelineToolbar, } from "./TimelineToolbar.js";

package/dist/components/timeline/time.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Context: the arithmetic of a timeline, apart from any screen — what period a scale shows
+ * around a date, its columns, how far a drag snaps, and how bars that overlap in one row are
+ * stacked. Pure, so it is tested without a browser (`tests/timeline.test.ts`).
+ */
+export type TimelineScale = "day" | "week" | "month" | "year";
+export declare const TIMELINE_SCALES: readonly TimelineScale[];
+/** One column of the scale: where it starts and what it says. */
+export type TimeUnit = {
+    start: Date;
+    label: string;
+    weekend: boolean;
+};
+export type TimeRange = {
+    start: Date;
+    end: Date;
+    title: string;
+    units: TimeUnit[];
+};
+/** The period a scale shows around `date`, with its columns, written in `locale`. */
+export declare function rangeOf(scale: TimelineScale, date: Date, locale: string): TimeRange;
+/** The date one period before or after: the toolbar's arrows. */
+export declare function shiftDate(scale: TimelineScale, date: Date, steps: number): Date;
+/** How far a drag or an arrow key moves a bar: a quarter of an hour on a day, an hour on a
+ *  week, a day on a month or a year. */
+export declare function snapOf(scale: TimelineScale): number;
+/** What a click on an empty column creates: that column. */
+export declare function unitSpan(scale: TimelineScale, at: Date): {
+    start: Date;
+    end: Date;
+};
+export declare function snap(time: number, step: number): number;
+/**
+ * The lane of each bar in a row: bars that overlap go one under the other, the way Odoo stacks
+ * two attendances of one morning. Greedy, in start order: a bar takes the first lane free when
+ * it starts.
+ */
+export declare function lanesOf<T>(items: readonly T[], startOf: (item: T) => Date, endOf: (item: T) => Date): {
+    lane: Map<T, number>;
+    count: number;
+};
+/** «03:48»: a duration as hours and minutes. */
+export declare function hoursMinutes(ms: number): string;

package/dist/components/timeline/time.js

@@ -0,0 +1,135 @@
+/**
+ * Context: the arithmetic of a timeline, apart from any screen — what period a scale shows
+ * around a date, its columns, how far a drag snaps, and how bars that overlap in one row are
+ * stacked. Pure, so it is tested without a browser (`tests/timeline.test.ts`).
+ */
+export const TIMELINE_SCALES = ["day", "week", "month", "year"];
+const MINUTE = 60_000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+/** Monday: the week of a workplace in Bolivia, not the US Sunday. */
+const startOfWeek = (date) => {
+    const day = startOfDay(date);
+    return new Date(day.getFullYear(), day.getMonth(), day.getDate() - ((day.getDay() + 6) % 7));
+};
+const isWeekend = (date) => date.getDay() === 0 || date.getDay() === 6;
+/** The period a scale shows around `date`, with its columns, written in `locale`. */
+export function rangeOf(scale, date, locale) {
+    const say = (options) => new Intl.DateTimeFormat(locale, options);
+    if (scale === "day") {
+        const start = startOfDay(date);
+        const units = Array.from({ length: 24 }, (_, hour) => ({
+            start: new Date(start.getFullYear(), start.getMonth(), start.getDate(), hour),
+            label: String(hour),
+            weekend: false,
+        }));
+        return {
+            start,
+            end: new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1),
+            title: say({ weekday: "long", day: "numeric", month: "long", year: "numeric" }).format(start),
+            units,
+        };
+    }
+    if (scale === "week") {
+        const start = startOfWeek(date);
+        const units = Array.from({ length: 7 }, (_, day) => {
+            const at = new Date(start.getFullYear(), start.getMonth(), start.getDate() + day);
+            return {
+                start: at,
+                label: say({ weekday: "short", day: "numeric" }).format(at),
+                weekend: isWeekend(at),
+            };
+        });
+        const end = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 7);
+        return {
+            start,
+            end,
+            title: say({ day: "numeric", month: "long", year: "numeric" }).formatRange(start, new Date(end.getTime() - DAY)),
+            units,
+        };
+    }
+    if (scale === "month") {
+        const start = new Date(date.getFullYear(), date.getMonth(), 1);
+        const end = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+        const days = Math.round((end.getTime() - start.getTime()) / DAY);
+        const units = Array.from({ length: days }, (_, day) => {
+            const at = new Date(start.getFullYear(), start.getMonth(), day + 1);
+            return { start: at, label: String(day + 1), weekend: isWeekend(at) };
+        });
+        return {
+            start,
+            end,
+            title: say({ month: "long", year: "numeric" }).format(start),
+            units,
+        };
+    }
+    const start = new Date(date.getFullYear(), 0, 1);
+    const units = Array.from({ length: 12 }, (_, month) => {
+        const at = new Date(date.getFullYear(), month, 1);
+        return { start: at, label: say({ month: "short" }).format(at), weekend: false };
+    });
+    return {
+        start,
+        end: new Date(date.getFullYear() + 1, 0, 1),
+        title: String(date.getFullYear()),
+        units,
+    };
+}
+/** The date one period before or after: the toolbar's arrows. */
+export function shiftDate(scale, date, steps) {
+    const y = date.getFullYear();
+    const m = date.getMonth();
+    const d = date.getDate();
+    if (scale === "day")
+        return new Date(y, m, d + steps);
+    if (scale === "week")
+        return new Date(y, m, d + 7 * steps);
+    if (scale === "month")
+        return new Date(y, m + steps, 1);
+    return new Date(y + steps, 0, 1);
+}
+/** How far a drag or an arrow key moves a bar: a quarter of an hour on a day, an hour on a
+ *  week, a day on a month or a year. */
+export function snapOf(scale) {
+    return { day: 15 * MINUTE, week: HOUR, month: DAY, year: DAY }[scale];
+}
+/** What a click on an empty column creates: that column. */
+export function unitSpan(scale, at) {
+    if (scale === "day") {
+        const start = new Date(at.getFullYear(), at.getMonth(), at.getDate(), at.getHours());
+        return { start, end: new Date(start.getTime() + HOUR) };
+    }
+    if (scale === "year") {
+        const start = new Date(at.getFullYear(), at.getMonth(), 1);
+        return { start, end: new Date(at.getFullYear(), at.getMonth() + 1, 1) };
+    }
+    const start = startOfDay(at);
+    return { start, end: new Date(start.getTime() + DAY) };
+}
+export function snap(time, step) {
+    return Math.round(time / step) * step;
+}
+/**
+ * The lane of each bar in a row: bars that overlap go one under the other, the way Odoo stacks
+ * two attendances of one morning. Greedy, in start order: a bar takes the first lane free when
+ * it starts.
+ */
+export function lanesOf(items, startOf, endOf) {
+    const ends = [];
+    const lane = new Map();
+    for (const item of [...items].sort((a, b) => +startOf(a) - +startOf(b))) {
+        const start = +startOf(item);
+        let at = ends.findIndex((end) => end <= start);
+        if (at === -1)
+            at = ends.length;
+        ends[at] = +endOf(item);
+        lane.set(item, at);
+    }
+    return { lane, count: Math.max(1, ends.length) };
+}
+/** «03:48»: a duration as hours and minutes. */
+export function hoursMinutes(ms) {
+    const minutes = Math.round(ms / MINUTE);
+    return `${String(Math.floor(minutes / 60)).padStart(2, "0")}:${String(minutes % 60).padStart(2, "0")}`;
+}