@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/scheduler/time-tracker.js

@@ -0,0 +1,403 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Time tracker: one running timer across tabs (`TimerButton` + a `TimerAdapter`), a weekly
+ * timesheet grid with typed durations and totals (`Timesheet`), and a day-grouped entry list
+ * (`TimeEntryList`). Attendance sheets use `ResourceCalendar variant="codes"`.
+ */
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Lock, Play, Square, TriangleAlert } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useLocale } from "../lib/locale.js";
+import { useLabels } from "../lib/labels.js";
+import { SrName } from "../lib/sr-name.js";
+import { useControllableState } from "../lib/use-controllable-state.js";
+import { Badge } from "../components/badge.js";
+import { Button } from "../components/button.js";
+import { NativeSelect } from "../components/native-select.js";
+import { Input } from "../components/input.js";
+import { EmptyState } from "../components/empty-state.js";
+import { toast } from "../components/toast.js";
+import { addDays } from "../locale-data/core/date.js";
+import { localDate } from "./core/layout.js";
+import { entryMinutes, formatDuration, parseDuration, timesheetTotals } from "./core/duration.js";
+import { dayInfo, dtf, fmtDay, resolveWorkCalendar, todayIn, useAnnouncer, useNow, uses24h } from "./shared.js";
+/** Tab id written into `entry.origin` so a tab knows the timer runs elsewhere. */
+const TAB_ID = typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `tab-${Math.random().toString(36).slice(2)}`;
+const newEntryId = () => (typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `te-${Date.now().toString(36)}`);
+/** In-memory adapter (docs, tests, prototypes). `onStop` receives finished entries. */
+export function createMemoryTimerAdapter(opts = {}) {
+    let active = opts.initial ?? null;
+    const listeners = new Set();
+    const now = opts.now ?? Date.now;
+    const emit = () => listeners.forEach((l) => l(active));
+    return {
+        async getActive() {
+            return active;
+        },
+        async start(draft) {
+            active = { id: newEntryId(), ...draft, start: new Date(now()).toISOString(), end: undefined, origin: TAB_ID };
+            emit();
+            return active;
+        },
+        async stop(id) {
+            if (!active || active.id !== id)
+                throw new Error("No running timer with that id");
+            const done = { ...active, end: new Date(now()).toISOString() };
+            active = null;
+            opts.onStop?.(done);
+            emit();
+            return done;
+        },
+        subscribe(l) {
+            listeners.add(l);
+            return () => listeners.delete(l);
+        },
+    };
+}
+/**
+ * Browser adapter: `localStorage` + `BroadcastChannel`, so starting in one tab shows the timer
+ * running in all of them. Persist finished entries in `onStop` (your API).
+ */
+export function createLocalTimerAdapter(opts = {}) {
+    const key = opts.key ?? "vamos-ui:timer";
+    const read = () => {
+        try {
+            const raw = window.localStorage.getItem(key);
+            return raw ? JSON.parse(raw) : null;
+        }
+        catch {
+            return null;
+        }
+    };
+    const write = (v) => {
+        try {
+            if (v)
+                window.localStorage.setItem(key, JSON.stringify(v));
+            else
+                window.localStorage.removeItem(key);
+        }
+        catch {
+            /* private mode: in-tab only */
+        }
+        channel?.postMessage(v);
+    };
+    const channel = typeof BroadcastChannel !== "undefined" ? new BroadcastChannel(key) : null;
+    return {
+        async getActive() {
+            return read();
+        },
+        async start(draft) {
+            const entry = { id: newEntryId(), ...draft, start: new Date().toISOString(), end: undefined, origin: TAB_ID };
+            write(entry);
+            return entry;
+        },
+        async stop(id) {
+            const cur = read();
+            if (!cur || cur.id !== id)
+                throw new Error("No running timer with that id");
+            const done = { ...cur, end: new Date().toISOString() };
+            write(null);
+            await opts.onStop?.(done);
+            return done;
+        },
+        subscribe(listener) {
+            const onMsg = (e) => listener(e.data ?? null);
+            const onStorage = (e) => e.key === key && listener(read());
+            channel?.addEventListener("message", onMsg);
+            window.addEventListener("storage", onStorage);
+            return () => {
+                channel?.removeEventListener("message", onMsg);
+                window.removeEventListener("storage", onStorage);
+            };
+        },
+    };
+}
+/* ------------------------------------------------------------------ */
+/* TimerButton                                                         */
+/* ------------------------------------------------------------------ */
+export const timeTrackerLabels = {
+    start: "Start timer",
+    startFor: "Start timer for {project}",
+    stop: "Stop timer",
+    stopFor: "Stop timer for {project}",
+    started: "Timer started for {project}",
+    stopped: "Timer stopped. {duration} on {project}",
+    noProject: "No project",
+    project: "Project",
+    note: "What are you working on?",
+    notePlaceholder: "Add a note",
+    elsewhere: "Running in another tab",
+    stale: "Running for {duration}. Still on it?",
+    adjust: "Adjust end time",
+    failed: "The timer couldn't be updated. Try again.",
+    // timesheet
+    timesheet: "Timesheet",
+    row: "Project",
+    total: "Total",
+    weekTotal: "Week total",
+    rowTotal: "{label}, total {duration}",
+    dayTotal: "{day}, total {duration}",
+    underTarget: "under the {target} target",
+    invalid: "Use 1.5, 1:30, 90m or 1h 30m",
+    locked: "Approved. This week is read-only.",
+    editHint: "Type a duration, Enter saves, Escape cancels",
+    saveFailed: "Couldn't save {duration}. The cell was reset.",
+    empty: "No time tracked yet",
+    emptyHint: "Start the timer or add an entry.",
+    billable: "Billable",
+    running: "running",
+};
+const clock = (sec) => {
+    const h = Math.floor(sec / 3600);
+    const m = Math.floor((sec % 3600) / 60);
+    const s = Math.floor(sec % 60);
+    return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+};
+/**
+ * ```tsx
+ * const adapter = React.useMemo(() => createLocalTimerAdapter({ onStop: api.entries.create }), []);
+ * <TimerButton adapter={adapter} projects={projects} defaultProjectId="mobile-app" />
+ * ```
+ */
+export const TimerButton = React.forwardRef(function TimerButton({ adapter, projects = [], projectId: projectIdProp, defaultProjectId, onProjectChange, variant = "compact", staleAfterMin = 600, onStart, onStop, onAdjust, titleTicker = false, labels, className, ...props }, ref) {
+    const t = useLabels("timeTracker", timeTrackerLabels, labels);
+    const { locale } = useLocale();
+    const [projectId, setProjectId] = useControllableState({ value: projectIdProp, defaultValue: defaultProjectId ?? projects[0]?.id ?? "", onChange: onProjectChange });
+    const [active, setActive] = React.useState(null);
+    const [busy, setBusy] = React.useState(false);
+    const [note, setNote] = React.useState("");
+    const { message, announce } = useAnnouncer();
+    const now = useNow(Boolean(active), 1000);
+    React.useEffect(() => {
+        let alive = true;
+        adapter.getActive().then((a) => alive && setActive(a));
+        const off = adapter.subscribe?.((a) => setActive(a));
+        return () => {
+            alive = false;
+            off?.();
+        };
+    }, [adapter]);
+    const running = Boolean(active);
+    const elapsedSec = active ? Math.max(0, (now - Date.parse(active.start)) / 1000) : 0;
+    const project = projects.find((p) => p.id === (active?.projectId ?? projectId));
+    const projectName = active?.projectLabel ?? project?.label ?? t("noProject");
+    const stale = running && elapsedSec / 60 > staleAfterMin;
+    const elsewhere = running && active?.origin !== undefined && active.origin !== TAB_ID;
+    // Opt-in document title ticker.
+    const baseTitle = React.useRef(null);
+    React.useEffect(() => {
+        if (!titleTicker || typeof document === "undefined")
+            return;
+        if (running) {
+            baseTitle.current ??= document.title;
+            document.title = `${clock(elapsedSec).replace(/^00:/, "")} · ${baseTitle.current}`;
+        }
+        else if (baseTitle.current !== null) {
+            document.title = baseTitle.current;
+            baseTitle.current = null;
+        }
+    }, [titleTicker, running, elapsedSec]);
+    React.useEffect(() => () => {
+        if (baseTitle.current !== null)
+            document.title = baseTitle.current;
+    }, []);
+    const toggle = async () => {
+        if (busy)
+            return;
+        setBusy(true);
+        try {
+            if (active) {
+                const done = await adapter.stop(active.id);
+                setActive(null);
+                announce(t("stopped", { duration: formatDuration(entryMinutes(done), locale), project: projectName }));
+                onStop?.(done);
+            }
+            else {
+                const entry = await adapter.start({ projectId: project?.id, projectLabel: project?.label, note: note || undefined });
+                setActive(entry);
+                announce(t("started", { project: projectName }));
+                onStart?.(entry);
+            }
+        }
+        catch {
+            toast.danger(t("failed"));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const name = running ? t("stopFor", { project: projectName }) : project ? t("startFor", { project: projectName }) : t("start");
+    const button = (_jsxs("button", { type: "button", "aria-pressed": running, "aria-busy": busy || undefined, "data-slot": "timer-button", "data-running": running ? "" : undefined, disabled: busy, onClick: toggle, className: cn("ui-tt-btn focus-ring", variant === "full" && "ui-tt-btn-lg"), children: [_jsx("span", { className: "sr-only", children: name }), running ? _jsx("span", { "aria-hidden": true, className: "ui-tt-pulse" }) : _jsx(Play, { "aria-hidden": true, className: "ui-tt-ico" }), _jsx("span", { "aria-hidden": true, className: "tabular", children: clock(elapsedSec) }), variant === "compact" ? _jsx("span", { "aria-hidden": true, className: "ui-tt-proj", children: projectName }) : null, running && variant === "full" ? _jsx(Square, { "aria-hidden": true, className: "ui-tt-ico" }) : null] }));
+    return (_jsxs("div", { ref: ref, "data-slot": "timer", "data-variant": variant, className: cn(variant === "full" ? "ui-tt-full grid gap-3" : "inline-flex items-center gap-2", className), ...props, children: [variant === "full" ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [_jsxs("label", { className: "grid min-w-[12rem] flex-1 gap-1", children: [_jsx("span", { className: "text-[12px] font-medium text-fg-muted", children: t("project") }), _jsx(NativeSelect, { value: active?.projectId ?? projectId, disabled: running, onChange: (e) => setProjectId(e.target.value), items: projects.map((p) => ({ value: p.id, label: p.meta ? `${p.label} · ${p.meta}` : p.label })) })] }), _jsxs("label", { className: "grid min-w-[14rem] flex-[2] gap-1", children: [_jsx("span", { className: "text-[12px] font-medium text-fg-muted", children: t("note") }), _jsx(Input, { value: active?.note ?? note, disabled: running, onChange: (e) => setNote(e.target.value), placeholder: t("notePlaceholder") })] }), button] }), elsewhere || stale ? (_jsxs("p", { className: "flex items-center gap-2 text-[12.5px]", "data-slot": "timer-note", children: [stale ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3.5 text-warning" }) : null, _jsx("span", { className: stale ? "text-warning" : "text-fg-muted", children: stale ? t("stale", { duration: formatDuration(elapsedSec / 60, locale) }) : t("elsewhere") }), stale && onAdjust && active ? _jsx(Button, { size: "xs", variant: "ghost", onClick: () => onAdjust(active), children: t("adjust") }) : null] })) : null] })) : (_jsxs(_Fragment, { children: [button, stale ? _jsx("span", { className: "sr-only", children: t("stale", { duration: formatDuration(elapsedSec / 60, locale) }) }) : null, stale ? _jsx(TriangleAlert, { "aria-hidden": true, className: "size-3.5 text-warning" }) : null] })), _jsx("span", { className: "sr-only", "aria-live": "polite", children: message })] }));
+});
+export const timesheetVariants = cva("ui-ts relative min-w-0", {
+    variants: { framed: { true: "surface rounded-ui-lg", false: "" } },
+    defaultVariants: { framed: true },
+});
+/**
+ * ```tsx
+ * <Timesheet weekStart="2026-11-09" rows={projects} value={hours} onCellChange={save} dailyTarget={8 * 60} />
+ * ```
+ */
+export const Timesheet = React.forwardRef(function Timesheet({ weekStart, days: dayCount = 7, rows, value: valueProp, defaultValue, onCellChange, dailyTarget, locked = false, workCalendar, display = "clock", labels, className, ...props }, ref) {
+    const t = useLabels("timeTracker", timeTrackerLabels, labels);
+    const { locale, timeZone } = useLocale();
+    const cal = React.useMemo(() => resolveWorkCalendar(workCalendar, locale), [workCalendar, locale]);
+    const today = todayIn(timeZone);
+    const days = React.useMemo(() => Array.from({ length: dayCount }, (_, i) => addDays(weekStart, i)), [weekStart, dayCount]);
+    const infos = React.useMemo(() => days.map((d) => dayInfo(d, cal, today)), [days, cal, today]);
+    const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? {} });
+    const [overrides, setOverrides] = React.useState({});
+    React.useEffect(() => setOverrides({}), [valueProp]);
+    const cellValue = (rowId, day) => overrides[`${rowId}|${day}`] ?? value[rowId]?.[day] ?? 0;
+    const merged = React.useMemo(() => {
+        const out = {};
+        for (const r of rows) {
+            out[r.id] = {};
+            for (const d of days)
+                out[r.id][d] = cellValue(r.id, d);
+        }
+        return out;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rows, days, value, overrides]);
+    const totals = timesheetTotals(merged, days);
+    const fmt = (min) => (min ? formatDuration(min, locale, display) : "");
+    const fmtFull = (min) => formatDuration(min, locale);
+    const [active, setActive] = React.useState({ r: 0, c: 0 });
+    const [edit, setEdit] = React.useState(null);
+    const gridRef = React.useRef(null);
+    const focus = (r, c) => {
+        setActive({ r, c });
+        requestAnimationFrame(() => gridRef.current?.querySelector(`[data-ts-cell="${r}:${c}"]`)?.focus());
+    };
+    const editable = (r) => !locked && !rows[r]?.readOnly;
+    const commit = (r, c, text) => {
+        const minutes = parseDuration(text, locale);
+        if (minutes === null || minutes < 0 || minutes > 24 * 60) {
+            setEdit({ r, c, text, error: true });
+            return false;
+        }
+        const row = rows[r];
+        const day = days[c];
+        const prev = cellValue(row.id, day);
+        setEdit(null);
+        if (minutes === prev)
+            return true;
+        const key = `${row.id}|${day}`;
+        setOverrides((o) => ({ ...o, [key]: minutes }));
+        if (valueProp === undefined)
+            setValue((v) => ({ ...v, [row.id]: { ...v[row.id], [day]: minutes } }));
+        Promise.resolve()
+            .then(() => onCellChange?.(row.id, day, minutes))
+            .catch(() => {
+            setOverrides((o) => {
+                const n = { ...o };
+                delete n[key];
+                return n;
+            });
+            if (valueProp === undefined)
+                setValue((v) => ({ ...v, [row.id]: { ...v[row.id], [day]: prev } }));
+            toast.danger(t("saveFailed", { duration: fmtFull(minutes) }));
+        });
+        return true;
+    };
+    const onKeyDown = (k) => {
+        if (edit)
+            return;
+        const { r, c } = active;
+        const map = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1] };
+        if (k.key in map) {
+            k.preventDefault();
+            const [dr, dc] = map[k.key];
+            return focus(Math.max(0, Math.min(rows.length - 1, r + dr)), Math.max(0, Math.min(days.length - 1, c + dc)));
+        }
+        if (k.key === "Home") {
+            k.preventDefault();
+            return focus(r, 0);
+        }
+        if (k.key === "End") {
+            k.preventDefault();
+            return focus(r, days.length - 1);
+        }
+        if (!editable(r))
+            return;
+        if (k.key === "Enter" || k.key === "F2") {
+            k.preventDefault();
+            setEdit({ r, c, text: cellValue(rows[r].id, days[c]) ? formatDuration(cellValue(rows[r].id, days[c]), locale, "clock") : "" });
+        }
+        else if (k.key === "Delete" || k.key === "Backspace") {
+            k.preventDefault();
+            commit(r, c, "");
+        }
+        else if (k.key.length === 1 && !k.metaKey && !k.ctrlKey && !k.altKey && /[\d.,:]/.test(k.key)) {
+            k.preventDefault();
+            setEdit({ r, c, text: k.key });
+        }
+    };
+    const titleId = React.useId();
+    const hintId = React.useId();
+    return (_jsxs("div", { ref: ref, "data-slot": "timesheet", "data-locked": locked ? "" : undefined, className: cn(timesheetVariants(), className), ...props, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1 border-b border-line px-4 py-2.5", children: [_jsxs("h3", { id: titleId, className: "me-auto font-heading text-[14px] font-semibold text-fg", children: [t("timesheet"), " ", _jsxs("span", { className: "font-normal text-fg-muted", children: ["\u00B7 ", fmtDay(locale, days[0], { day: "numeric", month: "short" }), " \u2013 ", fmtDay(locale, days.at(-1), { day: "numeric", month: "short", year: "numeric" })] })] }), locked ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-[12px] text-fg-muted", children: [_jsx(Lock, { "aria-hidden": true, className: "size-3.5" }), t("locked")] })) : null, _jsx("span", { id: hintId, className: "sr-only", children: t("editHint") })] }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("div", { ref: gridRef, role: "grid", "aria-labelledby": titleId, "aria-describedby": hintId, "aria-readonly": locked || undefined, "aria-rowcount": rows.length + 2, className: "ui-ts-grid min-w-max", style: { gridTemplateColumns: `minmax(11rem, 1.6fr) repeat(${days.length}, minmax(4.25rem, 1fr)) minmax(5rem, 1fr)` }, onKeyDown: onKeyDown, children: [_jsxs("div", { role: "row", className: "ui-ts-row ui-ts-head", children: [_jsx("div", { role: "columnheader", className: "ui-ts-rh", children: t("row") }), days.map((d, i) => (_jsxs("div", { role: "columnheader", "aria-label": fmtDay(locale, d, { weekday: "long", day: "numeric", month: "long" }), "data-off": infos[i].working === 0 ? "" : undefined, "data-today": infos[i].today ? "" : undefined, className: "ui-ts-ch", title: infos[i].holidays[0]?.name, children: [_jsx("span", { className: "text-[10.5px] font-medium text-fg-muted", children: fmtDay(locale, d, { weekday: "short" }) }), _jsx("span", { className: "ui-ts-daynum tabular", children: fmtDay(locale, d, { day: "numeric" }) })] }, d))), _jsx("div", { role: "columnheader", className: "ui-ts-ch ui-ts-totalcol", children: t("total") })] }), rows.length === 0 ? (_jsx("div", { role: "row", className: "ui-ts-row", children: _jsx("div", { role: "gridcell", "aria-colspan": days.length + 2, className: "col-span-full p-4", children: _jsx(EmptyState, { size: "sm", title: t("empty"), description: t("emptyHint") }) }) })) : null, rows.map((row, r) => (_jsxs("div", { role: "row", className: "ui-ts-row", children: [_jsxs("div", { role: "rowheader", className: "ui-ts-rh", children: [_jsx("span", { className: "block truncate text-[13px] font-medium text-fg", children: row.label }), row.meta ? _jsx("span", { className: "block truncate text-[11.5px] text-fg-muted", children: row.meta }) : null] }), days.map((d, c) => {
+                                    const v = cellValue(row.id, d);
+                                    const isActive = active.r === r && active.c === c;
+                                    const editing = edit && edit.r === r && edit.c === c ? edit : null;
+                                    const dayName = fmtDay(locale, d, { weekday: "long", day: "numeric", month: "long" });
+                                    return (_jsxs("div", { role: "gridcell", "data-ts-cell": `${r}:${c}`, "data-off": infos[c].working === 0 ? "" : undefined, "data-pending": overrides[`${row.id}|${d}`] !== undefined ? "" : undefined, "aria-readonly": !editable(r) || undefined, tabIndex: isActive && !editing ? 0 : -1, className: "ui-ts-cell tabular", onFocus: () => !isActive && setActive({ r, c }), onDoubleClick: () => editable(r) && setEdit({ r, c, text: v ? formatDuration(v, locale, "clock") : "" }), children: [editing ? (_jsx("input", { autoFocus: true, "aria-label": `${row.label}, ${dayName}`, "aria-invalid": editing.error || undefined, "aria-describedby": editing.error ? `${hintId}-err` : undefined, inputMode: "decimal", className: "ui-ts-input tabular", value: editing.text, onFocus: (e) => e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length), onChange: (e) => setEdit({ ...editing, text: e.target.value, error: false }), onKeyDown: (e) => {
+                                                    e.stopPropagation();
+                                                    if (e.key === "Enter") {
+                                                        e.preventDefault();
+                                                        if (commit(r, c, editing.text))
+                                                            focus(Math.min(rows.length - 1, r + 1), c);
+                                                    }
+                                                    else if (e.key === "Escape") {
+                                                        e.preventDefault();
+                                                        setEdit(null);
+                                                        focus(r, c);
+                                                    }
+                                                    else if (e.key === "Tab") {
+                                                        if (commit(r, c, editing.text))
+                                                            return;
+                                                        e.preventDefault();
+                                                    }
+                                                }, onBlur: () => {
+                                                    if (edit && !edit.error)
+                                                        commit(r, c, editing.text);
+                                                } })) : (_jsx(SrName, { name: `${row.label}, ${dayName}, ${v ? fmtFull(v) : "0"}`, children: fmt(v) })), editing?.error ? (_jsx("span", { id: `${hintId}-err`, role: "alert", className: "ui-ts-error", children: t("invalid") })) : null] }, d));
+                                }), _jsx("div", { role: "gridcell", className: "ui-ts-cell ui-ts-totalcol tabular", children: _jsx(SrName, { name: t("rowTotal", { label: row.label, duration: fmtFull(totals.rows[row.id] ?? 0) }), children: fmt(totals.rows[row.id] ?? 0) || "–" }) })] }, row.id))), _jsxs("div", { role: "row", className: "ui-ts-row ui-ts-foot", children: [_jsx("div", { role: "rowheader", className: "ui-ts-rh text-[12px] font-semibold", children: t("total") }), days.map((d, c) => {
+                                    const sum = totals.days[d] ?? 0;
+                                    const under = dailyTarget !== undefined && infos[c].working > 0 && sum < dailyTarget * infos[c].working && compareDay(d, today) <= 0;
+                                    return (_jsx("div", { role: "gridcell", "data-under": under ? "" : undefined, className: "ui-ts-cell tabular", children: _jsx(SrName, { name: `${t("dayTotal", { day: fmtDay(locale, d, { weekday: "long", day: "numeric", month: "long" }), duration: fmtFull(sum) })}${under ? `, ${t("underTarget", { target: fmtFull(dailyTarget * infos[c].working) })}` : ""}`, children: fmt(sum) || "–" }) }, d));
+                                }), _jsx("div", { role: "gridcell", className: "ui-ts-cell ui-ts-totalcol ui-ts-grand tabular", children: _jsx(SrName, { name: `${t("weekTotal")}, ${fmtFull(totals.total)}`, children: fmt(totals.total) || "–" }) })] })] }) })] }));
+});
+const compareDay = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
+/** Entries grouped by day (newest first) with day totals. */
+export const TimeEntryList = React.forwardRef(function TimeEntryList({ entries, onEntryOpen, showAmounts = false, labels, className, ...props }, ref) {
+    const t = useLabels("timeTracker", timeTrackerLabels, labels);
+    const { locale, timeZone, format } = useLocale();
+    const now = useNow(entries.some((e) => !e.end && e.durationMin === undefined), 30_000);
+    const h24 = uses24h(locale);
+    const timeFmt = dtf(locale, { hour: h24 ? "2-digit" : "numeric", minute: "2-digit", hourCycle: h24 ? "h23" : "h12", timeZone });
+    const groups = React.useMemo(() => {
+        const map = new Map();
+        for (const e of [...entries].sort((a, b) => Date.parse(b.start) - Date.parse(a.start))) {
+            const d = localDate(e.start, timeZone);
+            map.set(d, [...(map.get(d) ?? []), e]);
+        }
+        return [...map];
+    }, [entries, timeZone]);
+    if (!entries.length) {
+        return (_jsx("div", { ref: ref, className: cn("p-4", className), ...props, children: _jsx(EmptyState, { size: "sm", title: t("empty"), description: t("emptyHint") }) }));
+    }
+    return (_jsx("div", { ref: ref, "data-slot": "time-entry-list", className: cn("ui-tl grid", className), ...props, children: groups.map(([day, list]) => {
+            const total = list.reduce((s, e) => s + entryMinutes(e, now), 0);
+            const headId = `tl-${day}`;
+            return (_jsxs("section", { "aria-labelledby": headId, className: "ui-tl-group", children: [_jsxs("h4", { id: headId, className: "ui-tl-head", children: [_jsx("span", { children: fmtDay(locale, day, { weekday: "long", day: "numeric", month: "long" }) }), _jsx("span", { className: "tabular text-fg-muted", children: formatDuration(total, locale) })] }), _jsx("ul", { className: "grid", children: list.map((e) => {
+                            const mins = entryMinutes(e, now);
+                            const runningNow = !e.end && e.durationMin === undefined;
+                            const amount = showAmounts && e.billable && e.rate ? format.currency(((Number(e.rate.amount) * mins) / 60).toFixed(2), e.rate.currency) : null;
+                            const body = (_jsxs(_Fragment, { children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] font-medium text-fg", children: e.projectLabel ?? e.projectId ?? t("noProject") }), e.note ? _jsx("span", { className: "block truncate text-[12px] text-fg-muted", children: e.note }) : null] }), e.billable ? _jsx(Badge, { size: "sm", tone: "accent", children: t("billable") }) : null, _jsxs("span", { className: "hidden w-40 shrink-0 whitespace-nowrap text-end text-[12px] tabular text-fg-muted sm:block", children: [timeFmt.format(Date.parse(e.start)), "\u2013", e.end ? timeFmt.format(Date.parse(e.end)) : "…"] }), _jsxs("span", { className: "w-20 shrink-0 text-end text-[13px] font-medium tabular text-fg", children: [runningNow ? _jsx("span", { role: "img", className: "ui-tt-pulse me-1.5 inline-block align-middle", "aria-label": t("running") }) : null, formatDuration(mins, locale, "clock")] }), amount ? _jsx("span", { className: "w-24 shrink-0 text-end text-[12.5px] tabular text-fg-muted", children: amount }) : null] }));
+                            return (_jsx("li", { children: onEntryOpen ? (_jsx("button", { type: "button", className: "ui-tl-row focus-ring", onClick: () => onEntryOpen(e), children: body })) : (_jsx("div", { className: "ui-tl-row", children: body })) }, e.id));
+                        }) })] }, day));
+        }) }));
+});

package/dist/sortable/core.d.ts

@@ -0,0 +1,67 @@
+/**
+ * React-free reorder math: array moves, multi-container moves, tree flattening and the
+ * drag-depth projection used by tree reordering. No drag-engine types leak from here.
+ */
+/** Returns a copy of `items` with the element at `from` moved to `to`. */
+export declare function arrayMove<T>(items: readonly T[], from: number, to: number): T[];
+export type MoveOp = "up" | "down" | "top" | "bottom";
+/** Target index for a Move-menu operation, or `null` when the item can't move that way. */
+export declare function moveTargetIndex(index: number, length: number, op: MoveOp): number | null;
+export interface ContainerState {
+    id: string;
+    items: string[];
+}
+/** Moves `id` into container `to` at `index` (clamped). Returns new container arrays. */
+export declare function moveBetweenContainers(containers: readonly ContainerState[], id: string, to: string, index: number): ContainerState[];
+/** The container holding `id`. */
+export declare function findContainer(containers: readonly ContainerState[], id: string): ContainerState | undefined;
+export interface SortableTreeNode {
+    id: string;
+    children?: SortableTreeNode[];
+    collapsed?: boolean;
+}
+export interface FlatTreeItem<N extends SortableTreeNode = SortableTreeNode> {
+    id: string;
+    parentId: string | null;
+    depth: number;
+    /** Index among siblings. */
+    index: number;
+    node: N;
+}
+/** Depth-first flattening. Children of collapsed nodes (or of `skip` ids) are left out. */
+export declare function flattenTree<N extends SortableTreeNode>(nodes: readonly N[], skip?: ReadonlySet<string>): FlatTreeItem<N>[];
+/** All descendant ids of `id`. */
+export declare function descendantIds(nodes: readonly SortableTreeNode[], id: string): Set<string>;
+export interface TreeProjection {
+    parentId: string | null;
+    depth: number;
+    /** Index among the new siblings. */
+    index: number;
+    /** Why the drop is invalid ("maxDepth"), when it is. */
+    invalid?: "maxDepth";
+}
+/**
+ * Where a dragged tree item would land: the vertical position comes from `overId`, the depth
+ * from the horizontal drag offset (`offsetX / indent`, sign flipped in RTL), clamped between
+ * the depth allowed by the item above and the item below.
+ */
+export declare function projectTreeMove(flat: readonly FlatTreeItem[], activeId: string, overId: string, offsetX: number, indent: number, opts?: {
+    maxDepth?: number;
+    dir?: "ltr" | "rtl";
+}): TreeProjection | null;
+/** Moves a node to `parentId` at `index` (immutable). */
+export declare function moveTreeNode<N extends SortableTreeNode>(nodes: readonly N[], id: string, parentId: string | null, index: number): N[];
+/**
+ * A `rangeExtractor` for `@tanstack/react-virtual` that keeps the dragged row mounted (dnd-kit
+ * needs the active node while it is scrolled out of view).
+ *
+ * ```ts
+ * useVirtualizer({ …, rangeExtractor: keepMountedRange(activeIndex) });
+ * ```
+ */
+export declare function keepMountedRange(keepIndex: number | null | undefined): (range: {
+    startIndex: number;
+    endIndex: number;
+    overscan: number;
+    count: number;
+}) => number[];

package/dist/sortable/core.js

@@ -0,0 +1,167 @@
+/**
+ * React-free reorder math: array moves, multi-container moves, tree flattening and the
+ * drag-depth projection used by tree reordering. No drag-engine types leak from here.
+ */
+/** Returns a copy of `items` with the element at `from` moved to `to`. */
+export function arrayMove(items, from, to) {
+    const out = items.slice();
+    if (from < 0 || from >= out.length)
+        return out;
+    const clamped = Math.max(0, Math.min(out.length - 1, to));
+    const [item] = out.splice(from, 1);
+    out.splice(clamped, 0, item);
+    return out;
+}
+/** Target index for a Move-menu operation, or `null` when the item can't move that way. */
+export function moveTargetIndex(index, length, op) {
+    const to = op === "up" ? index - 1 : op === "down" ? index + 1 : op === "top" ? 0 : length - 1;
+    return to < 0 || to >= length || to === index ? null : to;
+}
+/** Moves `id` into container `to` at `index` (clamped). Returns new container arrays. */
+export function moveBetweenContainers(containers, id, to, index) {
+    const without = containers.map((c) => ({ ...c, items: c.items.filter((x) => x !== id) }));
+    return without.map((c) => {
+        if (c.id !== to)
+            return c;
+        const items = c.items.slice();
+        items.splice(Math.max(0, Math.min(items.length, index)), 0, id);
+        return { ...c, items };
+    });
+}
+/** The container holding `id`. */
+export function findContainer(containers, id) {
+    return containers.find((c) => c.id === id) ?? containers.find((c) => c.items.includes(id));
+}
+/** Depth-first flattening. Children of collapsed nodes (or of `skip` ids) are left out. */
+export function flattenTree(nodes, skip) {
+    const out = [];
+    const walk = (list, parentId, depth) => {
+        list.forEach((node, index) => {
+            out.push({ id: node.id, parentId, depth, index, node });
+            if (node.children?.length && !node.collapsed && !skip?.has(node.id))
+                walk(node.children, node.id, depth + 1);
+        });
+    };
+    walk(nodes, null, 0);
+    return out;
+}
+/** All descendant ids of `id`. */
+export function descendantIds(nodes, id) {
+    const out = new Set();
+    const visit = (list, inside) => {
+        for (const n of list) {
+            if (inside)
+                out.add(n.id);
+            if (n.children)
+                visit(n.children, inside || n.id === id);
+        }
+    };
+    visit(nodes, false);
+    return out;
+}
+/**
+ * Where a dragged tree item would land: the vertical position comes from `overId`, the depth
+ * from the horizontal drag offset (`offsetX / indent`, sign flipped in RTL), clamped between
+ * the depth allowed by the item above and the item below.
+ */
+export function projectTreeMove(flat, activeId, overId, offsetX, indent, opts = {}) {
+    const activeIndex = flat.findIndex((f) => f.id === activeId);
+    const overIndex = flat.findIndex((f) => f.id === overId);
+    if (activeIndex === -1 || overIndex === -1)
+        return null;
+    const active = flat[activeIndex];
+    // Drop the active item's descendants: they move with it.
+    const hidden = new Set();
+    for (let i = activeIndex + 1; i < flat.length && flat[i].depth > active.depth; i++)
+        hidden.add(flat[i].id);
+    const visible = flat.filter((f) => !hidden.has(f.id));
+    const from = visible.findIndex((f) => f.id === activeId);
+    const to = Math.max(0, visible.findIndex((f) => f.id === overId));
+    const reordered = arrayMove(visible, from, to);
+    const at = reordered.findIndex((f) => f.id === activeId);
+    const prev = reordered[at - 1];
+    const next = reordered[at + 1];
+    const dragDepth = Math.round(((opts.dir === "rtl" ? -1 : 1) * offsetX) / Math.max(1, indent));
+    const projected = active.depth + dragDepth;
+    const maxAllowed = prev ? prev.depth + 1 : 0;
+    const minAllowed = next ? next.depth : 0;
+    let depth = Math.max(minAllowed, Math.min(maxAllowed, projected));
+    // Subtree height of the active item counts against maxDepth.
+    let subtree = 0;
+    for (let i = activeIndex + 1; i < flat.length && flat[i].depth > active.depth; i++)
+        subtree = Math.max(subtree, flat[i].depth - active.depth);
+    let invalid;
+    if (opts.maxDepth !== undefined && depth + subtree > opts.maxDepth - 1) {
+        const capped = opts.maxDepth - 1 - subtree;
+        if (capped < minAllowed)
+            invalid = "maxDepth";
+        depth = Math.max(minAllowed, Math.min(depth, capped));
+    }
+    // Parent: the nearest item above with depth − 1.
+    let parentId = null;
+    if (depth > 0) {
+        for (let i = at - 1; i >= 0; i--) {
+            if (reordered[i].depth === depth - 1) {
+                parentId = reordered[i].id;
+                break;
+            }
+        }
+    }
+    // Index among the new siblings.
+    let index = 0;
+    for (let i = 0; i < at; i++) {
+        const f = reordered[i];
+        if (f.parentId === parentId && f.depth === depth && f.id !== activeId)
+            index++;
+    }
+    return { parentId, depth, index, ...(invalid ? { invalid } : {}) };
+}
+/** Moves a node to `parentId` at `index` (immutable). */
+export function moveTreeNode(nodes, id, parentId, index) {
+    let moving;
+    const remove = (list) => list.flatMap((n) => {
+        if (n.id === id) {
+            moving = n;
+            return [];
+        }
+        return n.children ? [{ ...n, children: remove(n.children) }] : [n];
+    });
+    const without = remove(nodes);
+    if (!moving)
+        return nodes.slice();
+    const node = moving;
+    const insert = (list, pid) => {
+        if (pid === parentId) {
+            const out = list.slice();
+            out.splice(Math.max(0, Math.min(out.length, index)), 0, node);
+            return out;
+        }
+        return list.map((n) => (n.children || n.id === parentId ? { ...n, children: insert((n.children ?? []), n.id) } : n));
+    };
+    return insert(without, null);
+}
+// ---------------------------------------------------------------------------------------------
+// Virtualization helper
+// ---------------------------------------------------------------------------------------------
+/**
+ * A `rangeExtractor` for `@tanstack/react-virtual` that keeps the dragged row mounted (dnd-kit
+ * needs the active node while it is scrolled out of view).
+ *
+ * ```ts
+ * useVirtualizer({ …, rangeExtractor: keepMountedRange(activeIndex) });
+ * ```
+ */
+export function keepMountedRange(keepIndex) {
+    return (range) => {
+        const start = Math.max(range.startIndex - range.overscan, 0);
+        const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+        const out = [];
+        for (let i = start; i <= end; i++)
+            out.push(i);
+        if (keepIndex != null && keepIndex >= 0 && keepIndex < range.count && (keepIndex < start || keepIndex > end)) {
+            out.push(keepIndex);
+            out.sort((a, b) => a - b);
+        }
+        return out;
+    };
+}

package/dist/sortable/index.d.ts

@@ -0,0 +1,8 @@
+export { Sortable, SortableItem, SortableHandle, SortableOverlay, SortableMoveMenu, SortableContainer, useSortableItem, useSortableItemContext, useSortableActiveId, useSortableContainerItems, sortableLabels, type SortableProps, type SortableItemProps, type SortableHandleProps, type SortableOverlayProps, type SortableMoveMenuProps, type SortableContainerProps, type SortableContainerSpec, type SortableMoveEvent, type SortableMoveBetweenEvent, type SortableOrientation, type SortableLabels, type UseSortableItemResult, } from "./sortable.js";
+export { SortableList, SortableGrid, sortableListVariants, sortableRowVariants, type SortableListProps, type SortableGridProps, type SortableRenderState, } from "./sortable-list.js";
+export { arrayMove, moveTargetIndex, moveBetweenContainers, findContainer, flattenTree, descendantIds, projectTreeMove, moveTreeNode, keepMountedRange, type MoveOp, type ContainerState, type SortableTreeNode, type FlatTreeItem, type TreeProjection, } from "./core.js";
+export { usePointerDrag, snapToGrid, type UsePointerDragOptions, type UsePointerDragResult, type PointerDragState, type PointerDragPoint, } from "./use-pointer-drag.js";
+export { useTimeScale } from "./use-time-scale.js";
+export { SortableTree, sortableTreeLabels, type SortableTreeProps, type SortableTreeMoveEvent, type SortableTreeDropCheck, type SortableTreeRenderState, type SortableTreeLabels, } from "./sortable-tree.js";
+export { Kanban, KanbanColumnHeader, KanbanCardTitle, KanbanCardMeta, KanbanCardFooter, kanbanLabels, kanbanColumnVariants, type KanbanProps, type KanbanCardState, type KanbanLane, type KanbanColumnHeaderProps, type KanbanLabels, } from "./kanban.js";
+export { groupByStage, sumBy, weightedSum, applyKanbanMove, stageToneColor, type Stage, type StageTone, type KanbanMoveEvent, } from "./kanban-core.js";