@charcuterie/ui 4.5.1 → 4.7.0

package/README.md

@@ -51,6 +51,18 @@ Moving a card takes **no drag-and-drop dependency**: one handle per card, a `Men
 other lanes as the primary path, Pointer-Event dragging at 1.4 KB gzip beside it
 ([decision](../../docs/decisions/2026-08-19-the-board-owns-the-move-and-takes-no-drag-and-drop-dependency.md)).
 
+**`LaneTimeline` is the first component that folds on a measurement of its own box.**
+One horizontal lane per group across a date axis, with anything lasting more than a day drawn
+as a **bar** — the shape a month grid cannot show, and the only one that makes load asymmetry
+visible, because overlapping items pack into stacked rows and a busy lane is literally taller.
+`end` is **inclusive**, said four times over, because an off-by-one on a date range is
+invisible in both directions. The Narrow View **abandons** the axis rather than panning or
+squeezing it. And the fold is measured rather than queried for a reason no other component
+here has: the question is not how wide the box is but how wide one *day* is, which is the
+width divided by a number that lives in the data — 30 columns in 900px is a readable month
+and 365 columns in the same 900px is a smear
+([decision](../../docs/decisions/2026-09-18-a-timeline-span-ends-on-its-last-day-and-the-axis-folds-on-measurement.md)).
+
 **`DropRail` is the move control for a page `Board`'s `Menu` cannot serve.** A menu of the
 other lanes is right at three lanes; it is wrong at thirty-four groups, where it becomes a
 scrolling list inside a popup and a drag becomes a scroll with the button held down. The

package/dist/LaneTimeline/LaneTimeline.d.ts

@@ -0,0 +1,132 @@
+import type { ReactNode } from "react";
+import type { TimelineLane } from "./LaneTimelineLane.tsx";
+import type { TimelineSpan } from "./laneTimelineGeometry.ts";
+export type LaneTimelineProps = {
+    className?: string;
+    /**
+     * Shown when there are no lanes, or when `range` is not a pair of
+     * calendar dates. Defaults to a real `EmptyState` — *"real empty
+     * states"* is a standing requirement, and an empty timeline is
+     * what a household sees on a good week.
+     */
+    emptyState?: ReactNode;
+    /**
+     * What level the lane headings are. The caller's, because only
+     * the caller knows what the timeline sits under: one directly
+     * below a page `<h1>` wants `2`. Getting it wrong is an axe
+     * `heading-order` failure and a hole in the screen-reader
+     * outline.
+     */
+    headingLevel?: 2 | 3 | 4 | 5;
+    /** The timeline's accessible name. Required — it is a landmark. */
+    label: string;
+    lanes: readonly TimelineLane[];
+    /**
+     * BCP-47, for the dates only. Omitted, `Intl` uses the runtime's
+     * own — which is right on a personal machine and wrong on a
+     * server, so a server render should pass one rather than let two
+     * environments disagree about what "6 Apr" looks like.
+     */
+    locale?: string;
+    /** How many bars one lane may stack. Default 6. */
+    maxRowCount?: number;
+    /**
+     * The narrowest a day column may get before the axis is abandoned
+     * for the Narrow View, as a multiple of the timeline's **own font
+     * size**. Default 1.75.
+     *
+     * In em rather than pixels because every length in this token set
+     * moves with the density axis: a floor pinned at 20px is generous
+     * on a desktop and clips a two-digit date on the kiosk. Same
+     * argument `Avatar` makes about a chip that stays 20px while the
+     * prose around it scales.
+     */
+    minColumnSize?: number;
+    /**
+     * The days on screen. **Both ends inclusive**, like every other
+     * span in this component — a Monday-to-Sunday week is
+     * `2026-04-06` to `2026-04-12`, which is seven columns, not eight.
+     */
+    range: TimelineSpan;
+};
+/**
+ * One horizontal lane per group, across a date axis, with anything
+ * that lasts more than a day drawn as a **bar**.
+ *
+ * ## What it is for
+ *
+ * A month grid gives every day the same box, so a thing that runs
+ * Tuesday to Friday is four separate entries and the fact that it is
+ * *one* thing is lost. Worse, every cell is the same size no matter
+ * how much is in it, so a grid cannot show that one person is
+ * carrying most of the week. A lane can: bars keep their real
+ * shape, and a lane with overlapping work stacks into rows and gets
+ * **taller**. The asymmetry then reads from across the room, before
+ * anybody counts anything.
+ *
+ * It is not a calendar. There is no event, no attendee and no
+ * recurrence in this API, because Docket wants the same shape for
+ * phases and Horizon wants it for a household — the library owns the
+ * **shape** and the app owns the **data**. What a lane holds is a
+ * `key`, a `label` and items with a `start`, an `end` and a `title`.
+ *
+ * ## `end` is INCLUSIVE, and that is the decision to know
+ *
+ * An off-by-one on a date range is invisible in both directions: a
+ * bar one day short and a bar one day long are both bars. So it is
+ * stated loudly here and again on the type — **`end` is the last day
+ * the item covers**. `2026-04-06` to `2026-04-06` is one day, and a
+ * seven-day week ends on its seventh day, not on the eighth. The
+ * alternative (a half-open interval, the way `Date` ranges and
+ * iCalendar's `DTEND` work) is the better model for *instants* and
+ * the wrong one for a human writing down when the roofers are
+ * coming: nobody says "Monday to Saturday" about a working week, so
+ * an exclusive end would make every consumer add a day on the way in
+ * and forget to on one of the paths.
+ * [Decision](../../../docs/decisions/2026-09-18-a-timeline-span-ends-on-its-last-day-and-the-axis-folds-on-measurement.md).
+ *
+ * ## The Narrow View is a LIST, not a pan surface
+ *
+ * Thirty columns have no narrow layout, and the two obvious answers
+ * are both wrong. Horizontal scrolling hides lanes behind a gesture
+ * with no affordance and fights the trackpad's own back-navigation
+ * — the same objection `Board` settled with *"no horizontal scroll,
+ * ever"*. Squeezing thirty columns into 390px gives each day 13
+ * pixels, which is not a timeline, it is a texture.
+ *
+ * So below the threshold the axis is **abandoned** rather than
+ * shrunk: each lane becomes a one-column list of its items, each one
+ * a line of text with its span written out in words. Nothing is
+ * hidden, nothing overflows, and the reading order is the one the
+ * fleet's text-heavy lists already use.
+ *
+ * ## It folds on a MEASUREMENT, not a breakpoint
+ *
+ * There is no `@media` and no `cq-` in this component, and neither
+ * could do the job: the question is not *how wide is the box* but
+ * **how wide is one day**, which is the width divided by a number
+ * that lives in the data. Thirty columns in 900px is a readable
+ * month and three hundred and sixty five columns in the same 900px
+ * is a grey smear, and no query can tell those apart. `Nav` folds
+ * its bar on a measured width for the weaker version of this
+ * reason; `useToolbarOverflow` writes the argument down.
+ *
+ * ⚠️ **It must not be sized by its own contents.** The component
+ * reads its own box to decide what to draw in it, so a shrink-
+ * wrapping parent makes the answer its own input. The root declares
+ * `container-type: inline-size` — not to query it, the same reason
+ * `Main` declares one — which forbids the element from being sized
+ * by what is inside it and makes that loop unformable. In a story
+ * this is what `align="stretch"` on the `StoryCell` is for.
+ *
+ * ## What it deliberately does not do
+ *
+ * No time of day: this is a **calendar-date** axis, so two things on
+ * one Tuesday stack rather than sit at 09:00 and 14:00. No "now"
+ * marker, no zoom, no drag to reschedule, no data. A range control
+ * belongs to the page — `DatePicker` already is one — and a bar you
+ * can drag is a write operation, which is a different component with
+ * a different decision behind it.
+ */
+export declare const LaneTimeline: ({ className, emptyState, headingLevel, label, lanes, locale, maxRowCount, minColumnSize, range, }: LaneTimelineProps) => ReactNode;
+//# sourceMappingURL=LaneTimeline.d.ts.map

package/dist/LaneTimeline/LaneTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LaneTimeline.d.ts","sourceRoot":"","sources":["../../src/LaneTimeline/LaneTimeline.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AA+C7D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC5B,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;IAC9B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,KAAK,EAAE,YAAY,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,eAAO,MAAM,YAAY,GAAI,mGAU1B,iBAAiB,KAAG,SA4LtB,CAAA"}

package/dist/LaneTimeline/LaneTimeline.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getPlainDateFromDayNumber } from "../DatePicker/plainDate.js";
+import { EmptyState } from "../EmptyState/EmptyState.js";
+import { toClassName } from "../toClassName.js";
+import { LaneTimelineLane } from "./LaneTimelineLane.js";
+import { chooseAxisTickStep, formatAxisDate, getIsAxisReadable, toTimelineAxis, } from "./laneTimelineGeometry.js";
+import { useTrackMeasurements } from "./useTrackMeasurements.js";
+/**
+ * Room one tick label needs, as a multiple of the timeline's own
+ * font size.
+ *
+ * `Mon 12 Apr` is about 4.5 of them, and the number is bigger than
+ * the label looks because the two are measured against **different**
+ * sizes: the label renders at `text-xs` while this multiplies the
+ * container's own font size, which is the one the probe can read. A
+ * constant rather than a prop, because it is a fact about the label
+ * this component prints rather than a preference anybody has.
+ */
+const TICK_LABEL_SIZE = 4.5;
+/**
+ * The narrowest a day column may get before the axis stops being
+ * worth drawing, in em.
+ *
+ * ⚠️ **The one number in here that is a taste call**, and it was
+ * moved once already. 1.25em drew a seven-day axis into a 24rem
+ * sidebar, which is 25 pixels a day: the bars were real shapes and
+ * every one of their titles was `Mi…`, so the picture was worse than
+ * the list it was chosen over. 1.75em is roughly the narrowest
+ * column that still holds a short word, which puts a month at about
+ * 1030px of component and a week in anything past a phone.
+ *
+ * The case still worth arguing about is a quarter. Ninety days wants
+ * more than 2500px and therefore falls to the Narrow View on every
+ * screen here — and 6px a day does still show a *shape*, so somebody
+ * may prefer the smear to the list. It is a prop for that reason.
+ */
+const DEFAULT_MIN_COLUMN_SIZE = 1.75;
+/**
+ * How many bars a lane may stack before the rest are counted rather
+ * than drawn. Six is roughly a screen's worth of one lane.
+ */
+const DEFAULT_MAX_ROW_COUNT = 6;
+/**
+ * One horizontal lane per group, across a date axis, with anything
+ * that lasts more than a day drawn as a **bar**.
+ *
+ * ## What it is for
+ *
+ * A month grid gives every day the same box, so a thing that runs
+ * Tuesday to Friday is four separate entries and the fact that it is
+ * *one* thing is lost. Worse, every cell is the same size no matter
+ * how much is in it, so a grid cannot show that one person is
+ * carrying most of the week. A lane can: bars keep their real
+ * shape, and a lane with overlapping work stacks into rows and gets
+ * **taller**. The asymmetry then reads from across the room, before
+ * anybody counts anything.
+ *
+ * It is not a calendar. There is no event, no attendee and no
+ * recurrence in this API, because Docket wants the same shape for
+ * phases and Horizon wants it for a household — the library owns the
+ * **shape** and the app owns the **data**. What a lane holds is a
+ * `key`, a `label` and items with a `start`, an `end` and a `title`.
+ *
+ * ## `end` is INCLUSIVE, and that is the decision to know
+ *
+ * An off-by-one on a date range is invisible in both directions: a
+ * bar one day short and a bar one day long are both bars. So it is
+ * stated loudly here and again on the type — **`end` is the last day
+ * the item covers**. `2026-04-06` to `2026-04-06` is one day, and a
+ * seven-day week ends on its seventh day, not on the eighth. The
+ * alternative (a half-open interval, the way `Date` ranges and
+ * iCalendar's `DTEND` work) is the better model for *instants* and
+ * the wrong one for a human writing down when the roofers are
+ * coming: nobody says "Monday to Saturday" about a working week, so
+ * an exclusive end would make every consumer add a day on the way in
+ * and forget to on one of the paths.
+ * [Decision](../../../docs/decisions/2026-09-18-a-timeline-span-ends-on-its-last-day-and-the-axis-folds-on-measurement.md).
+ *
+ * ## The Narrow View is a LIST, not a pan surface
+ *
+ * Thirty columns have no narrow layout, and the two obvious answers
+ * are both wrong. Horizontal scrolling hides lanes behind a gesture
+ * with no affordance and fights the trackpad's own back-navigation
+ * — the same objection `Board` settled with *"no horizontal scroll,
+ * ever"*. Squeezing thirty columns into 390px gives each day 13
+ * pixels, which is not a timeline, it is a texture.
+ *
+ * So below the threshold the axis is **abandoned** rather than
+ * shrunk: each lane becomes a one-column list of its items, each one
+ * a line of text with its span written out in words. Nothing is
+ * hidden, nothing overflows, and the reading order is the one the
+ * fleet's text-heavy lists already use.
+ *
+ * ## It folds on a MEASUREMENT, not a breakpoint
+ *
+ * There is no `@media` and no `cq-` in this component, and neither
+ * could do the job: the question is not *how wide is the box* but
+ * **how wide is one day**, which is the width divided by a number
+ * that lives in the data. Thirty columns in 900px is a readable
+ * month and three hundred and sixty five columns in the same 900px
+ * is a grey smear, and no query can tell those apart. `Nav` folds
+ * its bar on a measured width for the weaker version of this
+ * reason; `useToolbarOverflow` writes the argument down.
+ *
+ * ⚠️ **It must not be sized by its own contents.** The component
+ * reads its own box to decide what to draw in it, so a shrink-
+ * wrapping parent makes the answer its own input. The root declares
+ * `container-type: inline-size` — not to query it, the same reason
+ * `Main` declares one — which forbids the element from being sized
+ * by what is inside it and makes that loop unformable. In a story
+ * this is what `align="stretch"` on the `StoryCell` is for.
+ *
+ * ## What it deliberately does not do
+ *
+ * No time of day: this is a **calendar-date** axis, so two things on
+ * one Tuesday stack rather than sit at 09:00 and 14:00. No "now"
+ * marker, no zoom, no drag to reschedule, no data. A range control
+ * belongs to the page — `DatePicker` already is one — and a bar you
+ * can drag is a write operation, which is a different component with
+ * a different decision behind it.
+ */
+export const LaneTimeline = ({ className, emptyState, headingLevel = 3, label, lanes, locale, maxRowCount = DEFAULT_MAX_ROW_COUNT, minColumnSize = DEFAULT_MIN_COLUMN_SIZE, range, }) => {
+    const { fontSize, inlineSize, isMeasured, trackRef } = useTrackMeasurements();
+    const axis = toTimelineAxis(range);
+    const columnCount = axis?.columnCount ?? 0;
+    const isAxisReadable = getIsAxisReadable({
+        columnCount,
+        inlineSize,
+        isMeasured,
+        minColumnInlineSize: minColumnSize * fontSize,
+    });
+    const tickStep = chooseAxisTickStep({
+        columnCount,
+        inlineSize,
+        minTickInlineSize: TICK_LABEL_SIZE * fontSize,
+    });
+    /*
+     * An inline style, not a class. Tailwind scans source text for
+     * complete class strings, so a `grid-cols-[repeat(${n},…)]` is
+     * generated **never** — the grid silently falls back to one column
+     * and every bar lands on top of every other one, with nothing
+     * failing. `AdaptiveGrid` carries the same note about the same
+     * trap.
+     */
+    const columnTemplate = `repeat(${Math.max(columnCount, 1)}, minmax(0, 1fr))`;
+    const rangeCaption = axis &&
+        `${formatAxisDate({
+            date: getPlainDateFromDayNumber(axis.startDay),
+            locale,
+        })} to ${formatAxisDate({
+            date: getPlainDateFromDayNumber(axis.endDay),
+            locale,
+        })}`;
+    return (_jsxs("section", { "aria-label": label, className: toClassName("@container flex flex-col", className), children: [_jsxs("div", { "aria-hidden": "true", className: "grid grid-cols-[12rem_minmax(0,1fr)] gap-x-3 overflow-hidden", children: [_jsx("div", {}), _jsx("div", { className: "h-0", ref: trackRef })] }), axis === null ? ((emptyState ?? (_jsx(EmptyState, { description: "This timeline has no visible date range.", heading: "Nothing to show", headingLevel: headingLevel, size: "sm" })))) : lanes.length === 0 ? ((emptyState ?? (_jsx(EmptyState, { description: "Nothing has been added to this timeline yet.", heading: "No lanes yet", headingLevel: headingLevel, size: "sm" })))) : isAxisReadable ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-[12rem_minmax(0,1fr)] items-end gap-x-3 pb-1", children: [_jsx("span", { className: "min-w-0 truncate text-content-muted text-xs", title: rangeCaption ?? undefined, children: rangeCaption }), _jsx("div", { "aria-hidden": "true", className: "grid", style: {
+                                    gridTemplateColumns: columnTemplate,
+                                }, children: Array.from({ length: columnCount }, (_unused, index) => index)
+                                    .filter((index) => index % tickStep === 0)
+                                    .map((index) => (_jsx("span", { className: "min-w-0 truncate text-content-muted text-xs", style: {
+                                        gridColumn: `${index + 1} / span ${Math.min(tickStep, columnCount - index)}`,
+                                    }, children: formatAxisDate({
+                                        date: getPlainDateFromDayNumber(axis.startDay + index),
+                                        locale,
+                                    }) }, axis.startDay + index))) })] }), lanes.map((lane, position) => (_jsx(LaneTimelineLane, { axis: axis, columnTemplate: columnTemplate, headingLevel: headingLevel, lane: lane, locale: locale, maxRowCount: maxRowCount, position: position, shape: "axis", tickStep: tickStep }, lane.key)))] })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "pb-1 text-content-muted text-xs", children: rangeCaption }), lanes.map((lane, position) => (_jsx(LaneTimelineLane, { axis: axis, columnTemplate: columnTemplate, headingLevel: headingLevel, lane: lane, locale: locale, maxRowCount: maxRowCount, position: position, shape: "list", tickStep: tickStep }, lane.key)))] }))] }));
+};
+//# sourceMappingURL=LaneTimeline.js.map

package/dist/LaneTimeline/LaneTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LaneTimeline.js","sourceRoot":"","sources":["../../src/LaneTimeline/LaneTimeline.tsx"],"names":[],"mappings":"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"}

package/dist/LaneTimeline/LaneTimelineBar.d.ts

@@ -0,0 +1,97 @@
+import type { CategoricalIndex } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+import type { TimelineSpan } from "./laneTimelineGeometry.ts";
+/**
+ * Who owns the item's activation — nobody, a router, or a handler.
+ *
+ * A union rather than two loose optionals, the same call
+ * `BoardItemTitleLink` makes and for the same reason: `href` renders
+ * an `<a>` and `onSelect` renders a `<button>`, so a bar carrying
+ * both is one of them with the other silently dropped. On screen the
+ * two are identical.
+ */
+type TimelineItemAction = {
+    /**
+     * Where the bar navigates. Routed through
+     * `RouterLinkProvider` like every other `href` in this
+     * library.
+     */
+    href?: string;
+    onSelect?: never;
+} | {
+    href?: never;
+    /** For a timeline that opens a panel rather than a route. */
+    onSelect?: () => void;
+};
+export type TimelineItem = TimelineSpan & {
+    /**
+     * The bar's colour, when somebody has chosen one. Omitted, it is
+     * the **lane's**, because on this component colour means *which
+     * lane* — an item that picked its own hue out of the ten would
+     * read as belonging somewhere else. Pass this only when the item
+     * genuinely carries its own identity, and then put that identity
+     * in words too.
+     */
+    categorical?: CategoricalIndex;
+    key: string;
+    /**
+     * The words. A **string**, not a `ReactNode`, for the reason
+     * `BoardLane.label` is one: the same value goes into the bar's
+     * accessible name, the `title` a hovering reader gets, and the
+     * Narrow View's row — none of which can hold a node.
+     */
+    title: string;
+} & TimelineItemAction;
+export type LaneTimelineBarProps = {
+    className?: string;
+    item: TimelineItem;
+    /** The lane's hue, used when the item picked none. */
+    laneCategorical: CategoricalIndex;
+    /** What the bar says out loud: title, then the span in words. */
+    description: string;
+    /** Square the leading edge — the item began before this range. */
+    hasEarlierStart: boolean;
+    /** Square the trailing edge — it runs past this range. */
+    hasLaterEnd: boolean;
+    /**
+     * `bar` is the block on the axis. `row` is the Narrow View's
+     * full-width line, where the same item has room for two lines of
+     * text and no position to carry meaning.
+     */
+    shape: "bar" | "row";
+};
+/**
+ * One item, in either of the two shapes this component draws it in.
+ *
+ * ### The name is the whole of the accessibility argument
+ *
+ * A bar means something by **where it sits and how long it is**, and
+ * neither of those reaches a screen reader. Nor does the hue: ten
+ * categorical colours carry *which lane*, and colour alone failing
+ * WCAG 1.4.1 is the least of it — the lane is already a named group,
+ * so the colour is reinforcement rather than information.
+ *
+ * What is genuinely only in the geometry is the **span**, so every
+ * bar carries it as text: `description` is appended to the title in
+ * a `VisuallyHidden` and repeated in the `title` attribute. That
+ * second one is not an accessibility feature, it is for the sighted
+ * reader: a one-day bar is about twenty pixels wide and cannot show
+ * its own name at all.
+ *
+ * A native `title` rather than `Tooltip`, deliberately. A household
+ * week is two hundred bars, and two hundred floating-ui instances to
+ * describe boxes that are already described is a cost with nothing
+ * on the other side of it.
+ *
+ * ### The clipped edge is square, and it is also in words
+ *
+ * An item running out of the visible range loses the radius on that
+ * edge, which is the convention every Gantt chart uses. It is **not**
+ * the only signal:
+ * `description` already says "starts before this range", because a
+ * missing corner is not something anybody perceives without the
+ * unclipped bar beside it to compare against.
+ */
+export declare const LaneTimelineBar: ({ className, description, hasEarlierStart, hasLaterEnd, item, laneCategorical, shape, }: LaneTimelineBarProps) => ReactNode;
+export {};
+//# sourceMappingURL=LaneTimelineBar.d.ts.map

package/dist/LaneTimeline/LaneTimelineBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LaneTimelineBar.d.ts","sourceRoot":"","sources":["../../src/LaneTimeline/LaneTimelineBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAUtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAE7D;;;;;;;;GAQG;AACH,KAAK,kBAAkB,GACnB;IACE;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,GACD;IACE,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAEL,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG;IACxC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,GAAG,kBAAkB,CAAA;AAEtB,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,YAAY,CAAA;IAClB,sDAAsD;IACtD,eAAe,EAAE,gBAAgB,CAAA;IACjC,iEAAiE;IACjE,WAAW,EAAE,MAAM,CAAA;IACnB,kEAAkE;IAClE,eAAe,EAAE,OAAO,CAAA;IACxB,0DAA0D;IAC1D,WAAW,EAAE,OAAO,CAAA;IACpB;;;;OAIG;IACH,KAAK,EAAE,KAAK,GAAG,KAAK,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,eAAe,GAAI,yFAQ7B,oBAAoB,KAAG,SAuHzB,CAAA"}

package/dist/LaneTimeline/LaneTimelineBar.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CATEGORICAL_APPEARANCE_CLASS, CATEGORICAL_HOVER_CLASS, } from "../categoricalStyles.js";
+import { FOCUS_RING_CLASS } from "../intentStyles.js";
+import { UnstyledLink } from "../RouterLink/UnstyledLink.js";
+import { toClassName } from "../toClassName.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+/**
+ * One item, in either of the two shapes this component draws it in.
+ *
+ * ### The name is the whole of the accessibility argument
+ *
+ * A bar means something by **where it sits and how long it is**, and
+ * neither of those reaches a screen reader. Nor does the hue: ten
+ * categorical colours carry *which lane*, and colour alone failing
+ * WCAG 1.4.1 is the least of it — the lane is already a named group,
+ * so the colour is reinforcement rather than information.
+ *
+ * What is genuinely only in the geometry is the **span**, so every
+ * bar carries it as text: `description` is appended to the title in
+ * a `VisuallyHidden` and repeated in the `title` attribute. That
+ * second one is not an accessibility feature, it is for the sighted
+ * reader: a one-day bar is about twenty pixels wide and cannot show
+ * its own name at all.
+ *
+ * A native `title` rather than `Tooltip`, deliberately. A household
+ * week is two hundred bars, and two hundred floating-ui instances to
+ * describe boxes that are already described is a cost with nothing
+ * on the other side of it.
+ *
+ * ### The clipped edge is square, and it is also in words
+ *
+ * An item running out of the visible range loses the radius on that
+ * edge, which is the convention every Gantt chart uses. It is **not**
+ * the only signal:
+ * `description` already says "starts before this range", because a
+ * missing corner is not something anybody perceives without the
+ * unclipped bar beside it to compare against.
+ */
+export const LaneTimelineBar = ({ className, description, hasEarlierStart, hasLaterEnd, item, laneCategorical, shape, }) => {
+    const categorical = item.categorical ?? laneCategorical;
+    const isInteractive = Boolean(item.href ?? item.onSelect);
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { className: toClassName("min-w-0 flex-1", shape === "bar"
+                    ? "truncate"
+                    : "wrap-anywhere text-sm"), children: item.title }), shape === "row" ? (_jsx("span", { className: "text-content-muted text-xs", children: description })) : isInteractive ? null : (_jsx(VisuallyHidden, { children: description }))] }));
+    /**
+     * Only the bar shape gets one, and it carries the **title** as
+     * well as the span. The Narrow View prints both already, and a
+     * tooltip repeating text that is on screen is noise a pointer
+     * user cannot dismiss.
+     */
+    const sentence = `${item.title}, ${description}`;
+    const hoverText = shape === "bar" ? sentence : undefined;
+    const shellClassName = toClassName("w-full min-w-0 border px-1.5 text-xs leading-tight", shape === "bar"
+        ? "flex min-h-5 items-center rounded-sm"
+        : "flex flex-col gap-0.5 rounded-md py-1", CATEGORICAL_APPEARANCE_CLASS[categorical].soft, 
+    // A square edge where the item leaves the range. `rounded-*-none`
+    // rather than a different component, so a clipped bar and a whole
+    // one are the same box with one corner rule changed.
+    hasEarlierStart && shape === "bar" && "rounded-s-none", hasLaterEnd && shape === "bar" && "rounded-e-none", isInteractive && "cursor-pointer", isInteractive &&
+        CATEGORICAL_HOVER_CLASS[categorical].soft, isInteractive && FOCUS_RING_CLASS, className);
+    if (item.href) {
+        return (_jsx(UnstyledLink, { "aria-label": sentence, className: shellClassName, href: item.href, title: hoverText, children: content }));
+    }
+    if (item.onSelect) {
+        return (_jsx("button", { "aria-label": sentence, className: toClassName(shellClassName, "text-start"), onClick: item.onSelect, title: hoverText, type: "button", children: content }));
+    }
+    return (_jsx("span", { className: shellClassName, title: hoverText, children: content }));
+};
+//# sourceMappingURL=LaneTimelineBar.js.map

package/dist/LaneTimeline/LaneTimelineBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LaneTimelineBar.js","sourceRoot":"","sources":["../../src/LaneTimeline/LaneTimelineBar.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,4BAA4B,EAC5B,uBAAuB,GACxB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAAgC,CAAA;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAsC,CAAA;AAmErE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,IAAI,EACJ,eAAe,EACf,KAAK,GACgB,EAAa,EAAE;IACpC,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,eAAe,CAAA;IAEvD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAA;IAEzD,MAAM,OAAO,GAAG,CACd,8BASE,eACE,SAAS,EAAE,WAAW,CACpB,gBAAgB,EAChB,KAAK,KAAK,KAAK;oBACb,CAAC,CAAC,UAAU;oBACZ,CAAC,CAAC,uBAAuB,CAC5B,YAEA,IAAI,CAAC,KAAK,GACN,EAsBN,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CACjB,eAAM,SAAS,EAAC,4BAA4B,YACzC,WAAW,GACP,CACR,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,KAAC,cAAc,cAAE,WAAW,GAAkB,CAC/C,IACA,CACJ,CAAA;IAED;;;;;OAKG;IACH,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,WAAW,EAAE,CAAA;IAEhD,MAAM,SAAS,GAAG,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAA;IAExD,MAAM,cAAc,GAAG,WAAW,CAChC,oDAAoD,EACpD,KAAK,KAAK,KAAK;QACb,CAAC,CAAC,sCAAsC;QACxC,CAAC,CAAC,uCAAuC,EAC3C,4BAA4B,CAAC,WAAW,CAAC,CAAC,IAAI;IAC9C,kEAAkE;IAClE,kEAAkE;IAClE,qDAAqD;IACrD,eAAe,IAAI,KAAK,KAAK,KAAK,IAAI,gBAAgB,EACtD,WAAW,IAAI,KAAK,KAAK,KAAK,IAAI,gBAAgB,EAClD,aAAa,IAAI,gBAAgB,EACjC,aAAa;QACX,uBAAuB,CAAC,WAAW,CAAC,CAAC,IAAI,EAC3C,aAAa,IAAI,gBAAgB,EACjC,SAAS,CACV,CAAA;IAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,OAAO,CACL,KAAC,YAAY,kBACC,QAAQ,EACpB,SAAS,EAAE,cAAc,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,SAAS,YAEf,OAAO,GACK,CAChB,CAAA;IACH,CAAC;IAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,OAAO,CACL,+BACc,QAAQ,EACpB,SAAS,EAAE,WAAW,CACpB,cAAc,EACd,YAAY,CACb,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAC,QAAQ,YAEZ,OAAO,GACD,CACV,CAAA;IACH,CAAC;IAED,OAAO,CACL,eAAM,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,SAAS,YAC9C,OAAO,GACH,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/LaneTimeline/LaneTimelineLane.d.ts

@@ -0,0 +1,84 @@
+import type { CategoricalIndex } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+import type { TimelineItem } from "./LaneTimelineBar.tsx";
+import type { TimelineAxis } from "./laneTimelineGeometry.ts";
+export type TimelineLane = {
+    /**
+     * Which of the ten hues this lane wears, overriding the one its
+     * **position** would have given it.
+     *
+     * Reach for it when a lane's colour means something outside this
+     * set — a person who is the same colour on every screen of the
+     * app, a pair that must not drift apart when a third lane is
+     * inserted between them. An overridden lane keeps its hue and the
+     * rest go on walking `CATEGORICAL_SEQUENCE` from their own
+     * positions, so naming one does not force naming all of them.
+     */
+    categorical?: CategoricalIndex;
+    /**
+     * Where the lane's heading navigates — the "show me only this
+     * lane" route. A link **inside** the heading, never a heading
+     * replaced by a link, exactly as `BoardLane.href` is: the heading
+     * keeps its level, its id, and its job of naming the group.
+     */
+    href?: string;
+    items: readonly TimelineItem[];
+    key: string;
+    /**
+     * The lane's name. A **string**: it names the group, and a group
+     * with a `ReactNode` name is a group with no name.
+     */
+    label: string;
+};
+export type LaneTimelineLaneProps = {
+    axis: TimelineAxis;
+    /** The CSS track list, built once by the parent and shared. */
+    columnTemplate: string;
+    headingLevel: 2 | 3 | 4 | 5;
+    lane: TimelineLane;
+    locale?: string;
+    maxRowCount: number;
+    /** Where this lane sits in the set, for its default hue. */
+    position: number;
+    /**
+     * `axis` is the bars across the date axis. `list` is the Narrow
+     * View, where there is no axis and each item is a line of text.
+     */
+    shape: "axis" | "list";
+    /** Draw a separator every this many columns. */
+    tickStep: number;
+};
+/**
+ * One lane: its name, how much it is carrying, and either a track of
+ * bars or a list of lines.
+ *
+ * ### A lane is a `group`, not a landmark
+ *
+ * The same call `BoardLaneList` makes, and it was a real axe failure
+ * there before it changed. A named `<section>` is a `region`, so a
+ * timeline of eight lanes would put eight landmarks on a page that
+ * has one job, and two timelines on one page would put two landmarks
+ * with the same name in the document — which is `landmark-unique`.
+ * It is a `<div role="group">` rather than a `<section role="group">`
+ * because axe matches `section[aria-labelledby]` on the **element**
+ * and audits it as a landmark even after the role is overridden.
+ *
+ * ### The count is what the lane carries IN THIS RANGE
+ *
+ * Not `items.length`. A consumer hands over a month and shows a
+ * week; counting the array would print "31" beside a lane with two
+ * bars on it. `inRangeCount` includes anything the row limit hid, so
+ * a lane cannot look lighter by being more loaded.
+ *
+ * ### A lane gets TALLER when it is busy, and that is the design
+ *
+ * Overlapping items stack into rows (`toPackedLane`), so a lane
+ * carrying three things at once is three bars tall while one
+ * carrying them in sequence is one. Load asymmetry then reads as
+ * height from across the room, before anybody counts anything —
+ * which is the whole reason this component exists rather than a
+ * month grid, where every cell is the same size no matter what is
+ * in it.
+ */
+export declare const LaneTimelineLane: ({ axis, columnTemplate, headingLevel, lane, locale, maxRowCount, position, shape, tickStep, }: LaneTimelineLaneProps) => ReactNode;
+//# sourceMappingURL=LaneTimelineLane.d.ts.map

package/dist/LaneTimeline/LaneTimelineLane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LaneTimelineLane.d.ts","sourceRoot":"","sources":["../../src/LaneTimeline/LaneTimelineLane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAA;AAK3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAM7D,MAAM,MAAM,YAAY,GAAG;IACzB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAA;IAC9B;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,YAAY,EAAE,CAAA;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,YAAY,CAAA;IAClB,+DAA+D;IAC/D,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IAC3B,IAAI,EAAE,YAAY,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,4DAA4D;IAC5D,QAAQ,EAAE,MAAM,CAAA;IAChB;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,gDAAgD;IAChD,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,gBAAgB,GAAI,+FAU9B,qBAAqB,KAAG,SA6N1B,CAAA"}