@scalewing/react 1.38.0 → 1.40.0

package/dist/date-range-input.d.ts

@@ -0,0 +1,26 @@
+import { type DateOnlyRange } from './date-only.js';
+/** A named range a person can choose in one press, such as "Last 7 days". */
+export type DateRangePreset = {
+    /** Unique among the presets; never shown. */
+    id: string;
+    label: string;
+    range: DateOnlyRange;
+};
+export type DateRangeInput = {
+    label: string;
+    value: DateOnlyRange;
+    presets: readonly DateRangePreset[];
+    min?: string;
+    max?: string;
+    maxDays?: number;
+    today?: string;
+    weekStartsOn: number;
+};
+/**
+ * Fails closed on DateRangeButton props it cannot draw: empty words, a
+ * malformed or reversed value, bounds or today, a `maxDays` that is not a
+ * whole number from 1, and presets that repeat an id or that a press could
+ * not pick (outside the bounds or longer than `maxDays`). A value outside
+ * the bounds stays the value, as on CalendarButton.
+ */
+export declare function assertDateRangeInput(input: DateRangeInput): void;

package/dist/date-range-input.js

@@ -0,0 +1,58 @@
+import { assertWeekStart } from './calendar-month.js';
+import { rangeDayCount } from './date-range-draft.js';
+import { assertDateOnly, assertDateRange, isOutsideDateRange, } from './date-only.js';
+function isBlank(text) {
+    return typeof text !== 'string' || text.trim() === '';
+}
+function assertValue(value) {
+    if (typeof value !== 'object' || value === null)
+        throw new RangeError('value must be a { start, end } range');
+    assertDateOnly('value.start', value.start);
+    assertDateOnly('value.end', value.end);
+    if (value.start > value.end)
+        throw new RangeError('value.start must not be after value.end');
+}
+function assertBounds(min, max) {
+    if (min !== undefined)
+        assertDateOnly('min', min);
+    if (max !== undefined)
+        assertDateOnly('max', max);
+    if (min !== undefined && max !== undefined && min > max)
+        throw new RangeError('min must not be after max');
+}
+function assertPreset(preset, { min, max, maxDays }) {
+    if (isBlank(preset.id) || isBlank(preset.label))
+        throw new RangeError('presets must have non-empty ids and labels');
+    assertDateRange(preset.range);
+    const { start, end } = preset.range;
+    if (isOutsideDateRange(start, min, max) || isOutsideDateRange(end, min, max))
+        throw new RangeError(`preset ${preset.id} must lie inside min and max`);
+    if (maxDays !== undefined && rangeDayCount(preset.range) > maxDays)
+        throw new RangeError(`preset ${preset.id} must not exceed maxDays`);
+}
+/**
+ * Fails closed on DateRangeButton props it cannot draw: empty words, a
+ * malformed or reversed value, bounds or today, a `maxDays` that is not a
+ * whole number from 1, and presets that repeat an id or that a press could
+ * not pick (outside the bounds or longer than `maxDays`). A value outside
+ * the bounds stays the value, as on CalendarButton.
+ */
+export function assertDateRangeInput(input) {
+    if (isBlank(input.label))
+        throw new RangeError('label must be non-empty text');
+    assertValue(input.value);
+    assertBounds(input.min, input.max);
+    if (input.today !== undefined)
+        assertDateOnly('today', input.today);
+    assertWeekStart(input.weekStartsOn);
+    const { maxDays } = input;
+    if (maxDays !== undefined && (!Number.isInteger(maxDays) || maxDays < 1))
+        throw new RangeError('maxDays must be a whole number from 1');
+    const ids = new Set();
+    for (const preset of input.presets) {
+        assertPreset(preset, input);
+        if (ids.has(preset.id))
+            throw new RangeError(`presets must have unique ids: ${preset.id}`);
+        ids.add(preset.id);
+    }
+}

package/dist/date-range-labels.d.ts

@@ -0,0 +1,22 @@
+import { type CalendarButtonLabels } from './calendar-button-labels.js';
+/**
+ * DateRangeButton's own words. Products pass their translations; month and
+ * weekday names, and the dates themselves, come from `Intl` instead.
+ */
+export type DateRangeButtonLabels = Pick<CalendarButtonLabels, 'previousMonth' | 'nextMonth' | 'nameSeparator'> & {
+    /** Names the list of presets, such as "Quick ranges". */
+    presets: string;
+    /** Applies the chosen range and closes the calendar, such as "Apply". */
+    apply: string;
+    /** Closes the calendar and keeps the range it opened with. */
+    cancel: string;
+    /** The bottom sheet's close button. */
+    close: string;
+    /** How to pick, shown under the calendar, such as "Choose a first and a last day." */
+    hint: string;
+    /** The length of the chosen range, such as "7 days". */
+    dayCount: (days: number) => string;
+};
+export declare const defaultDateRangeButtonLabels: DateRangeButtonLabels;
+/** Consumer words over the English defaults; empty words fail closed. */
+export declare function resolveDateRangeButtonLabels(labels?: Partial<DateRangeButtonLabels>): DateRangeButtonLabels;

package/dist/date-range-labels.js

@@ -0,0 +1,26 @@
+import { defaultNameSeparator, } from './calendar-button-labels.js';
+export const defaultDateRangeButtonLabels = {
+    previousMonth: 'Previous month',
+    nextMonth: 'Next month',
+    nameSeparator: defaultNameSeparator,
+    presets: 'Presets',
+    apply: 'Apply',
+    cancel: 'Cancel',
+    close: 'Close',
+    hint: 'Choose a first and a last day.',
+    dayCount: (days) => (days === 1 ? '1 day' : `${days} days`),
+};
+/** Consumer words over the English defaults; empty words fail closed. */
+export function resolveDateRangeButtonLabels(labels = {}) {
+    const resolved = { ...defaultDateRangeButtonLabels, ...labels };
+    const { dayCount, nameSeparator, ...words } = resolved;
+    for (const [key, text] of Object.entries(words))
+        if (typeof text !== 'string' || text.trim() === '')
+            throw new RangeError(`labels.${key} must be non-empty text`);
+    // Only an empty string is refused: a lone space is a valid separator.
+    if (typeof nameSeparator !== 'string' || nameSeparator === '')
+        throw new RangeError('labels.nameSeparator must be non-empty text');
+    if (typeof dayCount !== 'function')
+        throw new RangeError('labels.dayCount must be a function');
+    return resolved;
+}

package/dist/date-range-view.d.ts

@@ -0,0 +1,12 @@
+import { type CalendarMonth } from './calendar-month.js';
+/** How many months a range calendar shows: two side by side, or one. */
+export type RangeMonthCount = 1 | 2;
+/**
+ * The first month a range calendar shows so that `focusDate` is in view.
+ * A view that already holds it stays; a focus date before it becomes the
+ * first month, and one after it the last. With no view yet, the focus
+ * date's month is the last one shown, but never a month before `min`'s.
+ */
+export declare function firstShownMonth(focusDate: string, count: RangeMonthCount, shown: CalendarMonth | undefined, min: string | undefined): CalendarMonth;
+/** The months shown from `first`, in order. */
+export declare function shownMonths(first: CalendarMonth, count: RangeMonthCount): CalendarMonth[];

package/dist/date-range-view.js

@@ -0,0 +1,29 @@
+import { monthOf, monthsBetween, shiftMonth, } from './calendar-month.js';
+/**
+ * The first month a range calendar shows so that `focusDate` is in view.
+ * A view that already holds it stays; a focus date before it becomes the
+ * first month, and one after it the last. With no view yet, the focus
+ * date's month is the last one shown, but never a month before `min`'s.
+ */
+export function firstShownMonth(focusDate, count, shown, min) {
+    const focus = monthOf(focusDate);
+    if (shown !== undefined) {
+        const offset = monthsBetween(shown, focus);
+        if (offset >= 0 && offset < count)
+            return shown;
+        if (offset < 0)
+            return focus;
+        return shiftMonth(focus, 1 - count);
+    }
+    const first = shiftMonth(focus, 1 - count);
+    // No month before 0001 exists: the first year's January leads.
+    if (first.year < 1)
+        return focus;
+    if (min !== undefined && monthsBetween(first, monthOf(min)) > 0)
+        return monthOf(min);
+    return first;
+}
+/** The months shown from `first`, in order. */
+export function shownMonths(first, count) {
+    return Array.from({ length: count }, (_, index) => shiftMonth(first, index));
+}

package/dist/date-range-words.d.ts

@@ -0,0 +1,11 @@
+import { type DateOnlyRange } from './date-only.js';
+/**
+ * A range as the button shows it, the locale sharing what both ends have,
+ * such as "Oct 6 – 12, 2026", or "Oct 6, 2026" for one day.
+ */
+export declare function formatRangeShort(range: DateOnlyRange, locale: string): string;
+/**
+ * A range with its weekdays, as the calendar states the one being picked,
+ * such as "Tue, Oct 6 – Mon, Oct 12, 2026".
+ */
+export declare function formatRangeLong(range: DateOnlyRange, locale: string): string;

package/dist/date-range-words.js

@@ -0,0 +1,40 @@
+import { dateFormatter, formatterDate } from './date-formatters.js';
+import { parseDateOnly } from './date-only.js';
+const shortRange = {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+};
+const longRange = {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+};
+function formatRange(range, locale, options) {
+    const start = parseDateOnly(range.start);
+    const end = parseDateOnly(range.end);
+    if (!start || !end)
+        return '';
+    const format = dateFormatter(locale, options);
+    // Browsers before formatRange (Safari 14.0) write both ends in full.
+    if (typeof format.formatRange !== 'function')
+        return range.start === range.end
+            ? format.format(formatterDate(start))
+            : `${format.format(formatterDate(start))} – ${format.format(formatterDate(end))}`;
+    return format.formatRange(formatterDate(start), formatterDate(end));
+}
+/**
+ * A range as the button shows it, the locale sharing what both ends have,
+ * such as "Oct 6 – 12, 2026", or "Oct 6, 2026" for one day.
+ */
+export function formatRangeShort(range, locale) {
+    return formatRange(range, locale, shortRange);
+}
+/**
+ * A range with its weekdays, as the calendar states the one being picked,
+ * such as "Tue, Oct 6 – Mon, Oct 12, 2026".
+ */
+export function formatRangeLong(range, locale) {
+    return formatRange(range, locale, longRange);
+}

package/dist/index.d.ts

@@ -5,6 +5,10 @@ export type { AccordionProps, AccordionSize } from './components/Accordion.js';
 export { Switch, type SwitchProps } from './components/Switch.js';
 export { DateField, type DateFieldLabels, type DateFieldProps, type WeekStart, } from './components/DateField.js';
 export { CalendarButton, type CalendarButtonLabels, type CalendarButtonProps, type CalendarButtonRange, } from './components/CalendarButton.js';
+export { DateRangeButton, type DateRangeButtonLabels, type DateRangeButtonProps, type DateRangeButtonValue, type DateRangePreset, } from './components/DateRangeButton.js';
+export { ListGroup, type ListGroupProps } from './components/ListGroup.js';
+export { ListRow, type ListRowProps } from './components/ListRow.js';
+export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, type ListGroupMaxHeight, type ListGroupVariant, type ListRowTitleAppearance, type ListRowTone, type ListRowValueTone, } from './list-options.js';
 export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
 export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, type GlyphTileHue, type GlyphTileProps, type GlyphTileSize, } from './components/GlyphTile.js';
@@ -16,6 +20,9 @@ export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './comp
 export { AppHeader, appHeaderAppearances, type AppHeaderAppearance, type AppHeaderProps, } from './components/AppHeader.js';
 export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, type BarChartItem, type BarChartProps, type BarChartTone, barChartTones, } from './components/BarChart.js';
+export { ChartLegend, type ChartFillTone, type ChartLegendItem, type ChartLegendProps, type ChartLegendSwatch, type ChartStrokeTone, type ChartTone, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
+export { ColumnChart, type ColumnChartCallout, type ColumnChartLine, type ColumnChartMode, type ColumnChartProps, type ColumnChartSeries, columnChartModes, } from './components/ColumnChart.js';
+export { LineChart, type LineChartCurve, type LineChartMarker, type LineChartPeriod, type LineChartPoint, type LineChartProps, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, type DataBarProps, type DataBarTone, dataBarTones, } from './components/DataBar.js';
 export { Pagination, type PaginationLabels, type PaginationProps, } from './components/Pagination.js';
 export { Button, type ButtonDisabledAppearance, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
@@ -25,7 +32,7 @@ export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, type ButtonGroupAppearance, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
 export { Dialog, dialogAppearances, dialogSizes, type DialogAppearance, type DialogProps, type DialogRole, type DialogSize, type DialogTitleLevel, } from './components/Dialog.js';
-export { StatTile, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
+export { StatTile, type StatTileAppearance, statTileAppearances, type StatTileEmphasis, type StatTileProps, type StatTileTone, statTileTones, } from './components/StatTile.js';
 export { TabPanel, type TabItem, type TabPanelProps, Tabs, type TabsProps, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, type ToastAction, type ToastPlacement, } from './components/Toast.js';
 export type { ToastProps, ToastTone } from './components/Toast.js';
@@ -37,6 +44,7 @@ export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
 export { Nav, navAppearances, type NavAppearance, type NavProps, } from './components/Nav.js';
+export { NavCount, type NavCountProps } from './components/NavCount.js';
 export { SectionNav, sectionNavAppearances, type SectionNavAppearance, type SectionNavItem, type SectionNavProps, } from './components/SectionNav.js';
 export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, type ComboboxAction, type ComboboxBadge, type ComboboxGroup, type ComboboxOption, type ComboboxProps, type ComboboxSize, } from './components/Combobox.js';

package/dist/index.js

@@ -4,6 +4,10 @@ export { Accordion } from './components/Accordion.js';
 export { Switch } from './components/Switch.js';
 export { DateField, } from './components/DateField.js';
 export { CalendarButton, } from './components/CalendarButton.js';
+export { DateRangeButton, } from './components/DateRangeButton.js';
+export { ListGroup } from './components/ListGroup.js';
+export { ListRow } from './components/ListRow.js';
+export { listGroupVariants, listRowTitleAppearances, listRowTones, listRowValueTones, } from './list-options.js';
 export { Checkbox } from './components/Checkbox.js';
 export { Spinner, } from './components/Spinner.js';
 export { GlyphTile, glyphTileSizes, } from './components/GlyphTile.js';
@@ -15,6 +19,9 @@ export { RadioGroup, } from './components/RadioGroup.js';
 export { AppHeader, appHeaderAppearances, } from './components/AppHeader.js';
 export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, barChartTones, } from './components/BarChart.js';
+export { ChartLegend, chartFillTones, chartLegendSwatches, chartStrokeTones, } from './components/ChartLegend.js';
+export { ColumnChart, columnChartModes, } from './components/ColumnChart.js';
+export { LineChart, lineChartCurves, } from './components/LineChart.js';
 export { DataBar, dataBarTones, } from './components/DataBar.js';
 export { Pagination, } from './components/Pagination.js';
 export { Button, } from './components/Button.js';
@@ -24,7 +31,7 @@ export { boxLinkAppearances } from './css/css-box-link.js';
 export { ButtonGroup, buttonGroupAppearances, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
 export { Dialog, dialogAppearances, dialogSizes, } from './components/Dialog.js';
-export { StatTile, statTileTones, } from './components/StatTile.js';
+export { StatTile, statTileAppearances, statTileTones, } from './components/StatTile.js';
 export { TabPanel, Tabs, tabId, tabPanelId, } from './components/Tabs.js';
 export { Toast, toastPlacements, toastTones, } from './components/Toast.js';
 export { Field, fieldVariants, } from './components/Field.js';
@@ -34,6 +41,7 @@ export { Stepper, stepperLimitAppearances, } from './components/Stepper.js';
 export { Inline } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export { Nav, navAppearances, } from './components/Nav.js';
+export { NavCount } from './components/NavCount.js';
 export { SectionNav, sectionNavAppearances, } from './components/SectionNav.js';
 export { SegmentedControl, } from './components/SegmentedControl.js';
 export { Combobox, comboboxSizes, } from './components/Combobox.js';

package/dist/is-one-of.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Whether a value is one of a list of names, narrowing it to the list's
+ * type: a component's check of a prop against its allowed values.
+ */
+export declare function isOneOf<Name extends string>(names: readonly Name[], value: unknown): value is Name;

package/dist/is-one-of.js

@@ -0,0 +1,7 @@
+/**
+ * Whether a value is one of a list of names, narrowing it to the list's
+ * type: a component's check of a prop against its allowed values.
+ */
+export function isOneOf(names, value) {
+    return names.includes(value);
+}

package/dist/line-chart-input.d.ts

@@ -0,0 +1,39 @@
+import { type ChartStrokeTone } from './css/chart-tones.js';
+import { type LineChartCurve } from './line-chart-path.js';
+/** A value on a date (`YYYY-MM-DD`). */
+export type LineChartPoint = {
+    x: string;
+    y: number;
+};
+/** A downward triangle on the line at one of its points' dates, with words. */
+export type LineChartMarker = {
+    x: string;
+    label: string;
+    tone: ChartStrokeTone;
+};
+/** A period to box, from its first date to its last. */
+export type LineChartPeriod = {
+    from: string;
+    to: string;
+};
+export type LineChartInput = {
+    label: string;
+    valueLabel?: string;
+    points: readonly LineChartPoint[];
+    curve: LineChartCurve;
+    tone: ChartStrokeTone;
+    markers: readonly LineChartMarker[];
+    markersLabel?: string;
+    ticks?: readonly string[];
+    highlight?: LineChartPeriod;
+};
+/** A date's day count, or a refusal naming what it was. */
+export declare function lineChartDay(what: string, value: string): number;
+/**
+ * Refuses what a line chart cannot draw, with a `RangeError`: empty words,
+ * a date that is not `YYYY-MM-DD`, points out of date order, a value that
+ * is not finite, an unknown curve or tone, a marker off the points' dates
+ * or markers without `markersLabel`, a tick outside the points' dates, and
+ * a period that ends before it starts.
+ */
+export declare function assertLineChartInput(input: LineChartInput): void;

package/dist/line-chart-input.js

@@ -0,0 +1,70 @@
+import { dayNumber } from './chart-dates.js';
+import { chartStrokeTones } from './css/chart-tones.js';
+import { isOneOf } from './is-one-of.js';
+import { lineChartCurves } from './line-chart-path.js';
+function refuse(message) {
+    throw new RangeError(`LineChart ${message}`);
+}
+function assertWords(what, value) {
+    if (typeof value !== 'string' || value.trim() === '')
+        refuse(`${what} must not be empty`);
+}
+/** A date's day count, or a refusal naming what it was. */
+export function lineChartDay(what, value) {
+    const day = typeof value === 'string' ? dayNumber(value) : null;
+    if (day === null)
+        refuse(`${what} must be a YYYY-MM-DD date: ${String(value)}`);
+    return day;
+}
+function assertTone(what, tone) {
+    if (!isOneOf(chartStrokeTones, tone))
+        refuse(`${what} must be one of ${chartStrokeTones.join(', ')}; received ${String(tone)}`);
+}
+/**
+ * Refuses what a line chart cannot draw, with a `RangeError`: empty words,
+ * a date that is not `YYYY-MM-DD`, points out of date order, a value that
+ * is not finite, an unknown curve or tone, a marker off the points' dates
+ * or markers without `markersLabel`, a tick outside the points' dates, and
+ * a period that ends before it starts.
+ */
+export function assertLineChartInput(input) {
+    assertWords('label', input.label);
+    if (input.valueLabel !== undefined)
+        assertWords('valueLabel', input.valueLabel);
+    if (!isOneOf(lineChartCurves, input.curve))
+        refuse(`curve must be one of ${lineChartCurves.join(', ')}; received ${String(input.curve)}`);
+    assertTone('tone', input.tone);
+    let previous = -Infinity;
+    for (const point of input.points) {
+        const day = lineChartDay('point x', point.x);
+        if (day < previous)
+            refuse(`points must be in date order: ${point.x} comes after a later date`);
+        previous = day;
+        if (typeof point.y !== 'number' || !Number.isFinite(point.y))
+            refuse(`point y must be a finite number: ${String(point.y)}`);
+    }
+    const dates = new Set(input.points.map((point) => point.x));
+    if (input.markers.length > 0)
+        assertWords('markersLabel', input.markersLabel);
+    for (const marker of input.markers) {
+        if (!dates.has(marker.x))
+            refuse(`marker x must be one of the points' dates: ${String(marker.x)}`);
+        assertWords('marker label', marker.label);
+        assertTone('marker tone', marker.tone);
+    }
+    const first = input.points[0]?.x;
+    const last = input.points.at(-1)?.x;
+    for (const tick of input.ticks ?? []) {
+        const day = lineChartDay('tick', tick);
+        if (first === undefined ||
+            day < lineChartDay('point x', first) ||
+            day > lineChartDay('point x', last))
+            refuse(`tick must fall within the points' dates: ${tick}`);
+    }
+    if (input.highlight) {
+        const from = lineChartDay('highlight from', input.highlight.from);
+        const to = lineChartDay('highlight to', input.highlight.to);
+        if (to < from)
+            refuse('highlight must not end before it starts');
+    }
+}

package/dist/line-chart-layout.d.ts

@@ -0,0 +1,68 @@
+import { type ChartPlot, type ChartTick } from './chart-axis.js';
+import { type PlacedMarker } from './line-chart-markers.js';
+import { type ChartPoint, type LineChartCurve } from './line-chart-path.js';
+export type LineChartLayoutInput = {
+    width: number;
+    /** The points as day counts, in date order. */
+    points: readonly {
+        day: number;
+        y: number;
+    }[];
+    curve: LineChartCurve;
+    area: boolean;
+    /** Each marker's day (one of the points') and words. */
+    markers: readonly {
+        day: number;
+        label: string;
+    }[];
+    /** The days to label on the time axis, and their words. */
+    ticks: readonly {
+        day: number;
+        text: string;
+    }[];
+    /** The boxed period's first and last days. */
+    highlight: {
+        from: number;
+        to: number;
+    } | null;
+    /** The words at the line's last value, or none. */
+    endLabel: string | null;
+    formatTick: (value: number) => string;
+};
+export type LineChartLayout = {
+    width: number;
+    height: number;
+    compact: boolean;
+    plot: ChartPlot;
+    ticks: ChartTick[];
+    path: ChartPoint[];
+    area: ChartPoint[];
+    last: ChartPoint | null;
+    end: {
+        x: number;
+        y: number;
+        text: string;
+    } | null;
+    dateLabels: {
+        day: number;
+        x: number;
+        y: number;
+        text: string;
+    }[];
+    highlight: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    } | null;
+    markers: PlacedMarker[];
+};
+/**
+ * Lays a line chart out at a width: its value axis on the left (through
+ * zero), the line through its points by date (straight or in steps), the
+ * area under it, its last value beside the plot's end, the time axis's
+ * labels (fewer when they would meet), the boxed period, and each marker's
+ * triangle and words. A compact chart (under `chartCompactWidth`) has a
+ * shorter plot.
+ */
+export declare function lineChartLayout(input: LineChartLayoutInput): LineChartLayout;

package/dist/line-chart-layout.js

@@ -0,0 +1,99 @@
+import { endGutter, labelGutter, labelInside, periodBox, valueTicks, valueY, } from './chart-axis.js';
+import { chartCompactWidth, chartGap, chartPlotHeight, chartTextWidth, chartType, } from './chart-metrics.js';
+import { chartScale, extentThroughZero } from './chart-scale.js';
+import { placeMarkers } from './line-chart-markers.js';
+import { closingIndexes } from './line-chart-points.js';
+import { areaPath, linePath, } from './line-chart-path.js';
+/**
+ * The time axis's labels: each asked-for day at its place, kept inside the
+ * chart, and thinned from the last back so no two meet.
+ */
+function dateLabels(ticks, x, width, y) {
+    const kept = [];
+    const sorted = [...ticks].sort((a, b) => b.day - a.day);
+    for (const tick of sorted) {
+        const centre = labelInside(x(tick.day), tick.text, width);
+        const half = chartTextWidth(tick.text) / 2;
+        const next = kept[0];
+        if (next &&
+            centre + half + chartGap * 2 > next.x - chartTextWidth(next.text) / 2)
+            continue;
+        kept.unshift({ day: tick.day, x: centre, y, text: tick.text });
+    }
+    return kept;
+}
+/**
+ * Lays a line chart out at a width: its value axis on the left (through
+ * zero), the line through its points by date (straight or in steps), the
+ * area under it, its last value beside the plot's end, the time axis's
+ * labels (fewer when they would meet), the boxed period, and each marker's
+ * triangle and words. A compact chart (under `chartCompactWidth`) has a
+ * shorter plot.
+ */
+export function lineChartLayout(input) {
+    const { width, points } = input;
+    const compact = width < chartCompactWidth;
+    const scale = chartScale(extentThroughZero(points.map((p) => p.y)));
+    const left = labelGutter(scale.ticks.map(input.formatTick));
+    const right = Math.max(left + 1, width -
+        endGutter({ width, left, axisWords: [], endLabel: input.endLabel })
+            .gutter);
+    const top = chartGap + chartType.lineHeight / 2;
+    const plot = {
+        left,
+        right,
+        top,
+        bottom: top + chartPlotHeight(compact),
+    };
+    const first = points[0]?.day ?? 0;
+    const span = (points.at(-1)?.day ?? first) - first;
+    const dayWidth = span > 0 ? (right - left) / span : right - left;
+    const x = (day) => span > 0 ? left + (day - first) * dayWidth : (left + right) / 2;
+    const placed = points.map((p) => ({
+        x: x(p.day),
+        y: valueY(p.y, scale, plot),
+    }));
+    const path = linePath(placed, input.curve);
+    const last = placed.at(-1) ?? null;
+    // A marker sits on its day's last point, the day's closing value.
+    const closing = closingIndexes(points.map((p) => p.day));
+    const markerPoints = input.markers.map((marker) => ({
+        x: x(marker.day),
+        y: placed[closing.get(marker.day) ?? -1]?.y ?? plot.bottom,
+        label: marker.label,
+    }));
+    return {
+        width,
+        height: plot.bottom + chartGap + chartType.lineHeight,
+        compact,
+        plot,
+        ticks: valueTicks(scale, plot, input.formatTick),
+        path,
+        area: input.area ? areaPath(path, valueY(0, scale, plot)) : [],
+        last,
+        end: last && input.endLabel
+            ? { x: right + chartGap, y: last.y, text: input.endLabel }
+            : null,
+        dateLabels: dateLabels(input.ticks, x, width, plot.bottom + chartGap + chartType.fontSize),
+        highlight: points.length > 0
+            ? highlightBox(input.highlight, first, span, x, dayWidth, plot)
+            : null,
+        markers: placeMarkers(markerPoints, plot),
+    };
+}
+/**
+ * The boxed period: its days, half a day past each end, clipped to the
+ * plot. On a chart of one date it is the whole plot when the period holds
+ * that date and nothing otherwise.
+ */
+function highlightBox(period, first, span, x, dayWidth, plot) {
+    if (!period)
+        return null;
+    if (span === 0 && (period.from > first || period.to < first))
+        return null;
+    const from = Math.max(x(period.from) - dayWidth / 2, plot.left);
+    const to = Math.min(x(period.to) + dayWidth / 2, plot.right);
+    if (to < from)
+        return null;
+    return periodBox(from, to - from, plot, 0);
+}

package/dist/line-chart-markers.d.ts

@@ -0,0 +1,29 @@
+import { type ChartPlot } from './chart-axis.js';
+/**
+ * A marker on a line: a downward triangle at its date with its words,
+ * below the line where they fit inside the plot, above it otherwise. Its
+ * words are left out where they would meet an earlier marker's.
+ */
+export type PlacedMarker = {
+    /** Its place in the chart's `markers`. */
+    order: number;
+    x: number;
+    /** The triangle's corners, as SVG points. */
+    triangle: string;
+    /** Its words' centre, moved in so they stay over the plot. */
+    labelX: number;
+    labelY: number;
+    label: string;
+    labelShown: boolean;
+};
+/**
+ * Places each marker at the line's height on its date: the triangle a
+ * small inset under the line, its words under it (moved in to stay over
+ * the plot), or both above the line when the words would pass the plot's
+ * bottom.
+ */
+export declare function placeMarkers(markers: readonly {
+    x: number;
+    y: number;
+    label: string;
+}[], plot: ChartPlot): PlacedMarker[];