@sincpro/web-ui 0.2.0 → 1.1.0

package/README.md

@@ -143,8 +143,8 @@ theme switch, or open a story with `&globals=theme:dark`.
 ```bash
 make init        # pre-commit + yarn install
 make dev         # Storybook on :6006 — the living documentation
-make test        # node --test: behaviour, tokens, contrast, client boundaries
-make smoke       # every story opened in headless Chrome: no console errors, no blanks
+make test        # vitest: logic in Node + every story in Chrome (play, a11y), light and dark
+make smoke       # only the stories: their play, a11y and screen rules, light and dark
 make build       # dist/ (JS + .d.ts + tokens.css)
 ```
 
@@ -160,7 +160,7 @@ src/
 ├── components/    one folder per family: listing, record, search, form, activity, frame, shell
 └── views/         list (N records) · record (one record)
 stories/           Storybook, by level — and templates/: whole pages built from the public API
-tests/             node --test over the TypeScript sources
+tests/             vitest, `model` project: logic and static markup in Node
 ```
 
 `make doctor` rejects an import that climbs a level (a primitive importing a component, a

package/dist/components/activity/ActivityBadge.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+export type ActivityState = "overdue" | "today" | "planned" | "none";
+/**
+ * The record's next planned activity, on its card or its row: a clock in the tone of how late
+ * it is — overdue, today, planned — and the word with it.
+ *
+ * Context: in a pipeline the question is not «what stage» but «who is waiting on us»; Odoo
+ * answers it with this clock on every card. A tone alone says nothing to a screen reader or to
+ * whoever does not see red, so the state is the name, and `detail` («Llamar · mañana 10:00») is
+ * the title. With `onClick` it opens the activities (a popover, the record's activity panel).
+ */
+export declare function ActivityBadge({ state, detail, onClick, }: {
+    state: ActivityState;
+    detail?: ReactNode;
+    onClick?: () => void;
+}): import("react").JSX.Element;

package/dist/components/activity/ActivityBadge.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Clock } from "lucide-react";
+const TONE = {
+    overdue: "text-bad",
+    today: "text-warn",
+    planned: "text-good",
+    none: "text-muted",
+};
+/**
+ * The record's next planned activity, on its card or its row: a clock in the tone of how late
+ * it is — overdue, today, planned — and the word with it.
+ *
+ * Context: in a pipeline the question is not «what stage» but «who is waiting on us»; Odoo
+ * answers it with this clock on every card. A tone alone says nothing to a screen reader or to
+ * whoever does not see red, so the state is the name, and `detail` («Llamar · mañana 10:00») is
+ * the title. With `onClick` it opens the activities (a popover, the record's activity panel).
+ */
+export function ActivityBadge({ state, detail, onClick, }) {
+    const copy = useUiCopy();
+    const word = copy.activityState[state];
+    const title = typeof detail === "string" ? `${word} · ${detail}` : word;
+    const body = (_jsxs(_Fragment, { children: [_jsx(Clock, { "aria-hidden": true, className: `size-(--size-icon-sm) ${TONE[state]}`, strokeWidth: 2.25 }), _jsx("span", { className: "sr-only", children: word })] }));
+    if (onClick === undefined) {
+        return (_jsx("span", { title: title, className: "inline-flex items-center p-1", children: body }));
+    }
+    return (_jsx("button", { type: "button", title: title, onClick: onClick, className: "relative z-10 inline-flex items-center rounded-pill p-1 transition-colors duration-(--duration-instant) hover:bg-ink/8 focus-visible:outline-2 focus-visible:outline-primary", children: body }));
+}

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

@@ -1,3 +1,4 @@
 export { Activity, type ActivityAlert, type ActivityEvent, type ActivityLayout, type ActivityProps, useActivity, } from "./Activity.js";
+export { ActivityBadge, type ActivityState, } from "./ActivityBadge.js";
 export { type Message, MessageComposer, type MessageComposerProps, type MessageKind, writeANote, } from "./Messages.js";
 export { Timeline, type TimelineItemProps, type TimelineProps, } from "./Timeline.js";

package/dist/components/activity/index.js

@@ -1,4 +1,5 @@
 /* ACTIVITY — everything around a record: its notices, its conversation and its history. */
 export { Activity, useActivity, } from "./Activity.js";
+export { ActivityBadge, } from "./ActivityBadge.js";
 export { MessageComposer, writeANote, } from "./Messages.js";
 export { Timeline, } from "./Timeline.js";

package/dist/components/calendar/RecordCalendar.d.ts

@@ -0,0 +1,48 @@
+import type { Tone } from "../../foundations/types.js";
+import type { ReactNode } from "react";
+export type CalendarView = "month" | "week" | "day" | "agenda";
+export type RecordCalendarProps<T> = {
+    items: readonly T[];
+    keyOf: (item: T) => string;
+    titleOf: (item: T) => string;
+    startOf: (item: T) => Date;
+    /** Without it the event lasts an hour, or the day when it is all-day. */
+    endOf?: (item: T) => Date | undefined;
+    allDayOf?: (item: T) => boolean;
+    /** What the event means: an overdue call `bad`, a confirmed meeting `good`. */
+    toneOf?: (item: T) => Tone;
+    /** Who it is with or whose it is — a face on the event, the photo or the initials. */
+    avatarOf?: (item: T) => {
+        name: string;
+        src?: string;
+    } | undefined;
+    /** A second line under the title: the customer, the place. */
+    metaOf?: (item: T) => string | undefined;
+    /** The whole event drawn by the app — the calendar's equivalent of a board's `card`. Gets
+     *  the record and the time text the calendar computed («10:00 – 11:30»). */
+    renderEvent?: (item: T, time: string) => ReactNode;
+    /** The view it opens on. The calendar's own buttons switch it afterwards. */
+    view?: CalendarView;
+    /** The day it opens on. Today by default. */
+    date?: Date;
+    /** An event was dragged to another moment or stretched. The calendar does NOT keep the move:
+     *  `items` is the truth — the app saves and passes the new dates back. */
+    onMove?: (item: T, start: Date, end: Date | null) => void;
+    /** A stretch of empty time was selected: create something there. */
+    onCreate?: (start: Date, end: Date, allDay: boolean) => void;
+    /** An event was pressed. */
+    onOpen?: (item: T) => void;
+    /** A height of its own: `auto` grows with the month, a number or `40rem` scrolls inside. */
+    height?: number | string;
+};
+/**
+ * Records on a calendar — Odoo's calendar view: meetings, deliveries, due dates.
+ *
+ * Context: drawn by FullCalendar v7 (MIT standard views: month, week, day, agenda), dressed by
+ * `tokens.css` (its `forma` palette points at web-ui's tokens, so it follows the theme). It is a
+ * CONTROLLED view of the records: dragging or stretching an event reports `onMove` and the
+ * library's own change is undone at once — the app persists and passes the new `items`, so the
+ * screen never shows a date the backend refused. Resource rows (per person, per room) are
+ * FullCalendar's premium scheduler: a licence away, not built here.
+ */
+export declare function RecordCalendar<T>({ items, keyOf, titleOf, startOf, endOf, allDayOf, toneOf, avatarOf, metaOf, renderEvent, view, date, onMove, onCreate, onOpen, height, }: RecordCalendarProps<T>): import("react").JSX.Element;

package/dist/components/calendar/RecordCalendar.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/react/daygrid";
+import interactionPlugin from "@fullcalendar/react/interaction";
+import listPlugin from "@fullcalendar/react/list";
+import esLocale from "@fullcalendar/react/locales/es";
+import formaThemePlugin from "@fullcalendar/react/themes/forma";
+import timeGridPlugin from "@fullcalendar/react/timegrid";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Avatar } from "../../primitives/value/Person.js";
+const VIEW = {
+    month: "dayGridMonth",
+    week: "timeGridWeek",
+    day: "timeGridDay",
+    agenda: "listWeek",
+};
+/* An event takes the colour of what it MEANS — the five tones — and the surface colour on top,
+   which keeps ≥ 5.7:1 on every tone in both themes (see `tokens.css`). */
+const TONE_COLOR = {
+    neutral: "var(--color-muted)",
+    info: "var(--color-info)",
+    good: "var(--color-good)",
+    warn: "var(--color-warn)",
+    bad: "var(--color-bad)",
+    accent: "var(--color-primary)",
+};
+/**
+ * Records on a calendar — Odoo's calendar view: meetings, deliveries, due dates.
+ *
+ * Context: drawn by FullCalendar v7 (MIT standard views: month, week, day, agenda), dressed by
+ * `tokens.css` (its `forma` palette points at web-ui's tokens, so it follows the theme). It is a
+ * CONTROLLED view of the records: dragging or stretching an event reports `onMove` and the
+ * library's own change is undone at once — the app persists and passes the new `items`, so the
+ * screen never shows a date the backend refused. Resource rows (per person, per room) are
+ * FullCalendar's premium scheduler: a licence away, not built here.
+ */
+export function RecordCalendar({ items, keyOf, titleOf, startOf, endOf, allDayOf, toneOf, avatarOf, metaOf, renderEvent, view = "month", date, onMove, onCreate, onOpen, height = "auto", }) {
+    const copy = useUiCopy();
+    const byId = new Map(items.map((item) => [keyOf(item), item]));
+    const events = items.map((item) => {
+        const tone = toneOf?.(item);
+        const end = endOf?.(item);
+        return {
+            id: keyOf(item),
+            title: titleOf(item),
+            start: startOf(item),
+            ...(end === undefined ? {} : { end }),
+            ...(allDayOf === undefined ? {} : { allDay: allDayOf(item) }),
+            ...(tone === undefined
+                ? {}
+                : { color: TONE_COLOR[tone], textColor: "var(--color-surface)" }),
+        };
+    });
+    /* A record on the calendar, not a bare title: its face, its time, its name and a second
+       line, in that reading order. Only when the app gave something more than a title. */
+    const rich = avatarOf !== undefined || metaOf !== undefined || renderEvent !== undefined;
+    const content = (info) => {
+        const item = byId.get(info.event.id);
+        if (item === undefined)
+            return null;
+        if (renderEvent !== undefined)
+            return renderEvent(item, info.timeText);
+        const person = avatarOf?.(item);
+        const meta = metaOf?.(item);
+        return (_jsxs("span", { className: "flex min-w-0 items-start gap-1.5 px-0.5 py-px", children: [person === undefined ? null : (_jsx(Avatar, { name: person.name, size: "sm", ...(person.src === undefined ? {} : { src: person.src }) })), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsxs("span", { className: "min-w-0 truncate", children: [info.timeText === "" ? null : (_jsxs("b", { className: "font-semibold tabular-nums", children: [info.timeText, " "] })), titleOf(item)] }), meta === undefined ? null : (_jsx("span", { className: "min-w-0 truncate opacity-80", children: meta }))] })] }));
+    };
+    const moved = (info) => {
+        const item = byId.get(info.event.id);
+        /* Undone first: the move is a request, and `items` answers it. */
+        info.revert();
+        if (item === undefined || info.event.start === null)
+            return;
+        onMove?.(item, info.event.start, info.event.end);
+    };
+    return (_jsx("div", { className: "min-w-0 text-meta", children: _jsx(FullCalendar, { plugins: [
+                dayGridPlugin,
+                timeGridPlugin,
+                listPlugin,
+                interactionPlugin,
+                formaThemePlugin,
+            ], locales: [esLocale], locale: copy.locale.toLowerCase().startsWith("es") ? "es" : "en", initialView: VIEW[view], ...(date === undefined ? {} : { initialDate: date }), headerToolbar: {
+                start: "prev,next today",
+                center: "title",
+                end: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
+            }, height: height, events: events, editable: onMove !== undefined, selectable: onCreate !== undefined, nowIndicator: true, 
+            /* The week and the day open on the working day, not on midnight. */
+            scrollTime: "07:00:00", ...(rich ? { eventContent: content } : {}), ...(onMove === undefined ? {} : { eventDrop: moved, eventResize: moved }), ...(onCreate === undefined
+                ? {}
+                : {
+                    select: (info) => onCreate(info.start, info.end, info.allDay),
+                }), ...(onOpen === undefined
+                ? {}
+                : {
+                    eventClick: (info) => {
+                        const item = byId.get(info.event.id);
+                        if (item !== undefined)
+                            onOpen(item);
+                    },
+                }) }) }));
+}

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

@@ -0,0 +1 @@
+export { type CalendarView, RecordCalendar, type RecordCalendarProps, } from "./RecordCalendar.js";

package/dist/components/calendar/index.js

@@ -0,0 +1 @@
+export { RecordCalendar, } from "./RecordCalendar.js";

package/dist/components/form/Sheet.js

@@ -86,5 +86,9 @@ export function SheetGroups({ children, columns = 2, }) {
 export function SheetGroup({ title, hint, icon: Icon, children, }) {
     const d = useDensity();
     const withHeader = title !== undefined;
-    return (_jsxs("section", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: [withHeader ? (_jsxs("header", { className: "flex min-w-0 items-center gap-2", children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-sm) shrink-0 text-muted", strokeWidth: 1.75, "aria-hidden": true })), _jsx("h3", { className: "min-w-0 truncate text-meta font-medium text-ink", children: title }), hint === undefined ? null : _jsx(Hint, { children: hint })] })) : hint === undefined ? null : (_jsx(Hint, { children: hint })), _jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: children })] }));
+    return (_jsxs("section", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: [withHeader ? (
+            /* A group title is ABOVE its labels, not one of them: at the labels' size and weight
+               «Cliente» the group read like «Cliente» the field. One step up in size and weight,
+               and a hairline that says where the group starts. */
+            _jsxs("header", { className: "flex min-w-0 items-center gap-2 border-b border-line pb-1.5", children: [Icon === undefined ? null : (_jsx(Icon, { className: "size-(--size-icon-sm) shrink-0 text-muted", strokeWidth: 1.75, "aria-hidden": true })), _jsx("h3", { className: "min-w-0 truncate text-body font-semibold text-ink", children: title }), hint === undefined ? null : _jsx(Hint, { children: hint })] })) : hint === undefined ? null : (_jsx(Hint, { children: hint })), _jsx("div", { className: `flex min-w-0 flex-col ${byDensity(d, "gap-2.5", "gap-2")}`, children: children })] }));
 }

package/dist/components/gantt/RecordGantt.d.ts

@@ -0,0 +1,44 @@
+/** A dependency between two records: «B starts when A ends» (`e2s`, the usual one). */
+export type GanttLink = {
+    id: string;
+    source: string;
+    target: string;
+    type?: "e2s" | "s2s" | "e2e" | "s2e";
+};
+export type GanttZoom = "day" | "week" | "month";
+export type RecordGanttProps<T> = {
+    items: readonly T[];
+    keyOf: (item: T) => string;
+    titleOf: (item: T) => string;
+    startOf: (item: T) => Date;
+    endOf: (item: T) => Date;
+    /** 0 to 100. Without it the bar has no progress handle. */
+    progressOf?: (item: T) => number;
+    /** The record it hangs under — a task under its project. Summaries are drawn for parents. */
+    parentOf?: (item: T) => string | undefined;
+    /** A point in time rather than a span: a delivery, a sign-off. */
+    milestoneOf?: (item: T) => boolean;
+    links?: readonly GanttLink[];
+    /** The scale it opens on; the toolbar switches it. */
+    zoom?: GanttZoom;
+    /** A bar was dragged or stretched. The app persists and passes the new `items`. */
+    onMove?: (item: T, start: Date, end: Date) => void;
+    onProgress?: (item: T, progress: number) => void;
+    /** A bar was chosen. */
+    onOpen?: (item: T) => void;
+    /** The chart's height, toolbar included: it scrolls inside. */
+    height?: string;
+    /** The left grid's column title for the names. */
+    nameHeader?: string;
+};
+/**
+ * Records on a timeline — Odoo's Gantt view: projects, tasks, manufacturing orders.
+ *
+ * Context: drawn by SVAR React Gantt (MIT core: move, resize, progress, dependencies, zoom),
+ * dressed by `tokens.css` (its Willow theme's `--wx-*` variables point at web-ui's tokens).
+ * The chart keeps its own state while dragging; every finished change is reported (`onMove`,
+ * `onProgress`) and the app passes the saved `items` back, which the chart re-reads. Without
+ * `onMove` / `onProgress` it is read-only. Auto-scheduling, critical path and resource load are
+ * SVAR's PRO edition: a licence away, not built here.
+ */
+export declare function RecordGantt<T>({ items, keyOf, titleOf, startOf, endOf, progressOf, parentOf, milestoneOf, links, zoom, onMove, onProgress, onOpen, height, nameHeader, }: RecordGanttProps<T>): import("react").JSX.Element;

package/dist/components/gantt/RecordGantt.js

@@ -0,0 +1,110 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TimelineToolbar } from "../timeline/TimelineToolbar.js";
+import { useUiCopy } from "../../foundations/copy.js";
+import { Gantt, Willow } from "@svar-ui/react-gantt";
+import { useEffect, useMemo, useRef, useState } from "react";
+/* The two rows of the time scale per zoom, written with `Intl` in the system's language
+   (SVAR's own format strings would ignore it), and how wide one cell of the finer row is. */
+function scalesOf(zoom, locale) {
+    const say = (options) => (date) => new Intl.DateTimeFormat(locale, options).format(date);
+    const week = (date) => {
+        const first = new Date(date.getFullYear(), 0, 1);
+        return `S${Math.ceil(((+date - +first) / 86_400_000 + first.getDay() + 1) / 7)}`;
+    };
+    return {
+        day: {
+            cellWidth: 36,
+            scales: [
+                { unit: "month", step: 1, format: say({ month: "long", year: "numeric" }) },
+                { unit: "day", step: 1, format: say({ day: "numeric" }) },
+            ],
+        },
+        week: {
+            cellWidth: 72,
+            scales: [
+                { unit: "month", step: 1, format: say({ month: "long", year: "numeric" }) },
+                { unit: "week", step: 1, format: week },
+            ],
+        },
+        month: {
+            cellWidth: 96,
+            scales: [
+                { unit: "year", step: 1, format: say({ year: "numeric" }) },
+                { unit: "month", step: 1, format: say({ month: "short" }) },
+            ],
+        },
+    }[zoom];
+}
+/**
+ * Records on a timeline — Odoo's Gantt view: projects, tasks, manufacturing orders.
+ *
+ * Context: drawn by SVAR React Gantt (MIT core: move, resize, progress, dependencies, zoom),
+ * dressed by `tokens.css` (its Willow theme's `--wx-*` variables point at web-ui's tokens).
+ * The chart keeps its own state while dragging; every finished change is reported (`onMove`,
+ * `onProgress`) and the app passes the saved `items` back, which the chart re-reads. Without
+ * `onMove` / `onProgress` it is read-only. Auto-scheduling, critical path and resource load are
+ * SVAR's PRO edition: a licence away, not built here.
+ */
+export function RecordGantt({ items, keyOf, titleOf, startOf, endOf, progressOf, parentOf, milestoneOf, links = [], zoom = "day", onMove, onProgress, onOpen, height = "28rem", nameHeader, }) {
+    const copy = useUiCopy();
+    /* The toolbar's: the scale starts at `zoom`, the closeness in the middle. */
+    const [scale, setScale] = useState(zoom);
+    const [closeness, setCloseness] = useState(3);
+    const time = scalesOf(scale, copy.locale);
+    const cellWidth = Math.round(time.cellWidth * ([0.5, 0.75, 1, 1.5, 2.25][closeness - 1] ?? 1));
+    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 byId = useMemo(() => new Map(items.map((item) => [keyOf(item), item])), [items, keyOf]);
+    const parents = new Set(items.map((item) => parentOf?.(item)).filter(Boolean));
+    const tasks = items.map((item) => {
+        const id = keyOf(item);
+        const parent = parentOf?.(item);
+        return {
+            id,
+            text: titleOf(item),
+            start: startOf(item),
+            end: endOf(item),
+            ...(progressOf === undefined ? {} : { progress: progressOf(item) }),
+            ...(parent === undefined ? {} : { parent }),
+            type: milestoneOf?.(item) === true ? "milestone" : parents.has(id) ? "summary" : "task",
+            open: true,
+        };
+    });
+    const editable = onMove !== undefined || onProgress !== undefined;
+    /* The chart reports through its store's actions: `update-task` for a move, a stretch or the
+       progress handle — the finished one, not every pixel of the drag (`inProgress`). */
+    const init = (api) => {
+        api.on("update-task", (ev) => {
+            if (ev.inProgress === true)
+                return;
+            const item = byId.get(String(ev.id));
+            if (item === undefined)
+                return;
+            const { start, end, progress } = ev.task;
+            if (start instanceof Date && end instanceof Date)
+                onMove?.(item, start, end);
+            if (typeof progress === "number")
+                onProgress?.(item, progress);
+        });
+        api.on("select-task", (ev) => {
+            const item = byId.get(String(ev.id));
+            if (item !== undefined)
+                onOpen?.(item);
+        });
+    };
+    return (_jsxs("div", { ref: root, className: "flex min-w-0 flex-col overflow-hidden rounded-box border border-line bg-surface", style: { height }, children: [_jsx(TimelineToolbar, { scale: scale, onScaleChange: (next) => {
+                    if (next !== "year")
+                        setScale(next);
+                }, scales: ["day", "week", "month"], zoom: closeness, onZoomChange: setCloseness, 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", children: _jsx(Willow, { fonts: false, children: _jsx(Gantt, { tasks: tasks, links: links.map((link) => ({ ...link, type: link.type ?? "e2s" })), scales: time.scales, cellWidth: cellWidth, readonly: !editable, columns: [{ id: "text", header: nameHeader ?? "", width: 260 }], init: init }) }) })] }));
+}

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

@@ -0,0 +1 @@
+export { type GanttLink, type GanttZoom, RecordGantt, type RecordGanttProps, } from "./RecordGantt.js";

package/dist/components/gantt/index.js

@@ -0,0 +1 @@
+export { RecordGantt, } from "./RecordGantt.js";

package/dist/components/index.d.ts

@@ -1,10 +1,13 @@
 export * from "./activity/index.js";
 export * from "./assist/index.js";
+export * from "./calendar/index.js";
 export * from "./form/index.js";
 export * from "./frame/index.js";
+export * from "./gantt/index.js";
 export * from "./lines/index.js";
 export * from "./listing/index.js";
 export * from "./navigation/index.js";
 export * from "./record/index.js";
 export * from "./search/index.js";
 export * from "./shell/index.js";
+export * from "./timeline/index.js";

package/dist/components/index.js

@@ -1,11 +1,14 @@
 /* COMPONENTS — primitives composed to answer ONE question of the product, by family. */
 export * from "./activity/index.js";
 export * from "./assist/index.js";
+export * from "./calendar/index.js";
 export * from "./form/index.js";
 export * from "./frame/index.js";
+export * from "./gantt/index.js";
 export * from "./lines/index.js";
 export * from "./listing/index.js";
 export * from "./navigation/index.js";
 export * from "./record/index.js";
 export * from "./search/index.js";
 export * from "./shell/index.js";
+export * from "./timeline/index.js";

package/dist/components/lines/LineItems.d.ts

@@ -81,7 +81,7 @@ export type LineItemsProps<T> = {
      *  `inline` puts it in the table, open, under the others (see the file's header).
      *  By default the dialog when there is an `editor`, the table when there is not. */
     adding?: "inline" | "editor";
-    /** Open the whole line somewhere else than this block's dialog — the app's `Drill`, so
+    /** Open the whole line somewhere else than this block's dialog — a modal of the workspace, so
      *  the line opens as «S00142 › Línea 3» and can go deeper (its product, its lot) without
      *  a modal over a modal. When given, it replaces `editor` for existing lines. */
     onOpenLine?: (id: string) => void;
@@ -95,6 +95,9 @@ export type LineItemsProps<T> = {
     } | null;
     /** Sections and notes among the lines. See the file's header. */
     structure?: LineStructure<T>;
+    /** The lines' order is the document's (Odoo's `sequence`): a grip at the start of each line
+     *  drags it, Alt + ↑ / ↓ moves it. `EditableTable`'s `onReorder`, passed through. */
+    onReorder?: (id: string, before: string | null) => void;
     /** Which columns are on screen, when the owner remembers it (a preference). */
     visibleColumnIds?: readonly string[];
     onVisibleColumnIdsChange?: (ids: readonly string[]) => void;
@@ -108,4 +111,4 @@ export type LineItemsProps<T> = {
  * removing asked first, what an empty document said. One component, built on
  * `EditableTable` and `Dialog`, makes the one2many the same block everywhere.
  */
-export declare function LineItems<T>({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom, totals, layout, adding, onOpenLine, flag, structure, visibleColumnIds, onVisibleColumnIdsChange, }: LineItemsProps<T>): import("react").JSX.Element;
+export declare function LineItems<T>({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom, totals, layout, adding, onOpenLine, flag, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }: LineItemsProps<T>): import("react").JSX.Element;

package/dist/components/lines/LineItems.js

@@ -38,7 +38,7 @@ function plain(v) {
  * removing asked first, what an empty document said. One component, built on
  * `EditableTable` and `Dialog`, makes the one2many the same block everywhere.
  */
-export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom = 8, totals, layout = "auto", adding, onOpenLine, flag, structure, visibleColumnIds, onVisibleColumnIdsChange, }) {
+export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange, onAdd, newLine, onRemove, onRestore, editor, isValid, context, searchText, searchFrom = 8, totals, layout = "auto", adding, onOpenLine, flag, structure, onReorder, visibleColumnIds, onVisibleColumnIdsChange, }) {
     const copy = useUiCopy();
     const toast = useOptionalToast();
     const read = useFormMode(mode) === "read";
@@ -58,7 +58,7 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
     const canAdd = !read && onAdd !== undefined && newLine !== undefined;
     const canRemove = !read && onRemove !== undefined;
     /* The whole line opens either in this block's own dialog (`editor`) or wherever the app
-       opens records (`onOpenLine`, a `Drill` context) — never both, so a line's form never
+       opens records (`onOpenLine`, a modal of the workspace) — never both, so a line's form never
        sits on top of another modal. */
     const canEdit = (canChange && editor !== undefined) || onOpenLine !== undefined;
     const openLine = (id, line) => {
@@ -283,7 +283,7 @@ export function LineItems({ lines, columns, getLineId, lineLabel, mode, onChange
                                             invalid: false,
                                         }, children: _jsx(SearchField, { value: query, onChange: setQuery, placeholder: copy.lines.search }) })] })) : null, _jsx("span", { className: "text-meta text-muted tabular-nums", "aria-live": "polite", children: count }), columnControl.hasOptional || addButton !== null ? (_jsxs("span", { className: "ml-auto flex items-center gap-2", children: [_jsx(ColumnsMenu, { control: columnControl }), addButton] })) : null] }), _jsx(EditableTable, { rows: shown, columns: tableColumns, getRowId: getLineId, empty: lines.length === 0
                             ? copy.lines.empty
-                            : fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(inline ? { onAdd: () => addInline(), addLabel: copy.lines.add } : {}), ...(bandAdds.length === 0 ? {} : { adds: bandAdds }), ...(bands === undefined ? {} : { bands }), ...(flag === undefined ? {} : { flag }), ...(inPlace && onRemove !== undefined
+                            : fillCopy(copy.lineItems.noMatch, { query: query.trim() }), layout: layout, ...(inline ? { onAdd: () => addInline(), addLabel: copy.lines.add } : {}), ...(bandAdds.length === 0 ? {} : { adds: bandAdds }), ...(bands === undefined ? {} : { bands }), ...(flag === undefined ? {} : { flag }), ...(onReorder === undefined || read ? {} : { onReorder }), ...(inPlace && onRemove !== undefined
                             ? /* A blank row nobody wrote in is taken back without a notice: nobody
                                  removed anything, so there is nothing to undo. */
                                 { onDiscard: onRemove }

package/dist/components/listing/BoardColumns.d.ts

@@ -0,0 +1,39 @@
+import type { Tone } from "../../foundations/types.js";
+import { type ReactNode } from "react";
+/** One stage of a board: its id (what `of` returns), its name, and its tone. */
+export type BoardColumn = {
+    id: string;
+    label: string;
+    tone?: Tone;
+};
+/** How a board lays its cards in stages, and what moving one means. */
+export type BoardStages<T> = {
+    /** The column a record goes in: its stage — or ANY field it is grouped by (the salesperson,
+     *  the priority, the tag): a board is a grouping you can drag across. */
+    of: (item: T) => string;
+    /** The columns, in order. Without it they come from the records themselves, in the order
+     *  they appear, named by `labelOf`. */
+    columns?: readonly BoardColumn[];
+    labelOf?: (id: string) => string;
+    /** A card dropped in another stage. Without it the board is read-only: nothing drags. */
+    onMove?: (item: T, to: string) => void;
+    /** How a record is named when a move is announced: «S00142 pasó a pedido». */
+    nameOf?: (item: T) => string;
+    /** The figure on a column's head: the expected revenue of the opportunities in it. */
+    total?: (items: readonly T[]) => ReactNode;
+    /** The bar under a column's head: how its records stand, by tone — Odoo's activity bar
+     *  (overdue red, today amber, planned green). `undefined` for a record with nothing to say. */
+    progress?: (item: T) => Tone | undefined;
+    /** «+» on a column's head: a name typed there creates a record in that column. */
+    onQuickCreate?: (column: string, name: string) => void;
+    /** A column at the end: «Agregar etapa». */
+    onAddColumn?: (label: string) => void;
+    /** Columns that start folded into a narrow strip (the won, the lost). */
+    defaultFolded?: readonly string[];
+};
+export declare function BoardColumns<T>({ items, keyOf, stages, card, }: {
+    items: readonly T[];
+    keyOf: (item: T) => string;
+    stages: BoardStages<T>;
+    card: (item: T) => ReactNode;
+}): import("react").JSX.Element;