@flood-md/react 0.2.12 → 0.2.13

package/dist/histogram.d.ts

@@ -0,0 +1,2 @@
+import { type HistogramProps } from "./index.js";
+export declare const HistogramPlot: import("react").ForwardRefExoticComponent<HistogramProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/histogram.js

@@ -0,0 +1,78 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Inline, Surface, Text, VisuallyHidden } from "./index.js";
+const defaultBoundary = new Intl.NumberFormat("en", { maximumSignificantDigits: 12 });
+const defaultCount = new Intl.NumberFormat("en", { maximumFractionDigits: 0 });
+export const HistogramPlot = /* @__PURE__ */ forwardRef(function HistogramPlot({ label, xLabel, showXAxisLabel = true, start, binWidth, counts, maxCount, countLabel = "Count", formatBoundary = defaultBoundary.format, formatCount = defaultCount.format, emptyLabel = "No observations", navigationLabel = "Use arrow keys to explore intervals, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const [cursor, setCursor] = useState(0);
+    const [hovered, setHovered] = useState();
+    const [tapped, setTapped] = useState();
+    const [focused, setFocused] = useState(false);
+    if (!Number.isFinite(start) || !Number.isFinite(binWidth) || binWidth <= 0) {
+        throw new RangeError("Flood Histogram requires a finite start and positive finite bin width");
+    }
+    let largest = 0;
+    let previous = start;
+    const bins = counts.map((count, i) => {
+        const end = start + (i + 1) * binWidth;
+        if (!Number.isSafeInteger(count) || count < 0 || !Number.isFinite(end) || end <= previous) {
+            throw new RangeError("Flood Histogram requires nonnegative integer counts and increasing finite boundaries");
+        }
+        const bin = { start: previous, end, count };
+        previous = end;
+        largest = Math.max(largest, count);
+        return bin;
+    });
+    const limit = maxCount ?? (largest || 1);
+    if (!Number.isFinite(limit) || limit <= 0 || limit < largest) {
+        throw new RangeError("Flood Histogram maxCount must be finite, positive and at least the largest count");
+    }
+    const last = bins.length - 1;
+    const active = Math.min(last, hovered ?? tapped ?? cursor);
+    const selected = bins[active];
+    const inspecting = hovered !== undefined || tapped !== undefined || focused;
+    const interval = selected && `${formatBoundary(selected.start)}–${formatBoundary(selected.end)}`;
+    const value = selected && formatCount(selected.count);
+    const valueText = selected && `${xLabel}: ${interval}, ${countLabel}: ${value}`;
+    const middle = bins[Math.floor(bins.length / 2)];
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = active - 1;
+                break;
+            case "ArrowRight":
+            case "ArrowUp":
+                next = active + 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            case "Escape":
+                if (inspecting)
+                    event.preventDefault();
+                setHovered(undefined);
+                setTapped(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHovered(undefined);
+        setTapped(undefined);
+        setFocused(true);
+        setCursor(Math.max(0, Math.min(last, next)));
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-histogram", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: selected ? _jsxs(_Fragment, { children: [last > 0 && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsxs("div", { className: "flood-histogram__plot", dir: "ltr", role: last > 0 ? "slider" : "img", tabIndex: last > 0 ? 0 : undefined, "aria-label": last > 0 ? label : valueText, "aria-describedby": last > 0 ? instructions : undefined, "aria-valuemin": last > 0 ? 1 : undefined, "aria-valuemax": last > 0 ? bins.length : undefined, "aria-valuenow": last > 0 ? active + 1 : undefined, "aria-valuetext": last > 0 ? valueText : undefined, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onKeyDown: navigate, onPointerLeave: () => setHovered(undefined), children: [_jsx("div", { className: "flood-histogram__columns", "aria-hidden": "true", children: bins.map((bin, i) => _jsx("div", { className: "flood-histogram__bin", "data-active": inspecting && i === active || undefined, onPointerEnter: event => { if (event.pointerType !== "touch")
+                                    setHovered(i); }, onPointerUp: event => { if (event.pointerType === "touch")
+                                    setTapped(current => current === i ? undefined : i); }, children: _jsx("span", { className: "flood-histogram__bar", "data-zero": bin.count === 0 || undefined, style: { "--flood-histogram-bin-height": `${bin.count / limit * 100}%` } }) }, i)) }), inspecting && _jsxs(Surface, { className: "flood-chart__tooltip flood-histogram__tooltip", padding: "2", elevation: "raised", "aria-hidden": "true", style: {
+                                "--flood-histogram-active": `${(active + .5) / bins.length * 100}%`,
+                                "--flood-histogram-half-bin": `${50 / bins.length}%`,
+                                "--flood-histogram-tip-side": active >= bins.length / 2 ? -1 : 0,
+                            }, children: [_jsx(Text, { size: "helper", children: interval }), _jsxs(Inline, { gap: "2", align: "baseline", className: "flood-histogram__tooltip-count", children: [_jsx(Text, { size: "helper", tone: "subtle", children: countLabel }), _jsx(Text, { size: "helper", children: value })] })] })] }), _jsxs("div", { className: "flood-histogram__axis", dir: "ltr", "aria-hidden": "true", children: [_jsx(Text, { size: "helper", tone: "subtle", children: formatBoundary(start) }), last > 0 && _jsx(Text, { className: "flood-histogram__mid-label", size: "helper", tone: "subtle", style: { left: `${Math.floor(bins.length / 2) / bins.length * 100}%` }, children: formatBoundary(middle.start) }), _jsx(Text, { size: "helper", tone: "subtle", children: formatBoundary(previous) })] }), showXAxisLabel && _jsx(Text, { className: "flood-histogram__axis-label", size: "helper", tone: "subtle", dir: "auto", "aria-hidden": "true", children: xLabel })] }) : _jsx(Text, { className: "flood-histogram__empty", size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/dist/index.d.ts

@@ -80,6 +80,8 @@ export interface CollectionToolbarProps extends Omit<FieldsetProps, "children" |
     onRemoveFilter?: (id: string) => void;
     appliedFiltersLabel?: string;
     summaryPrefix?: ReactNode;
+    /** Align search and filters as a group to the end of a shared control row. */
+    align?: "stretch" | "end";
     /** At most two task-important quick filters; move additional properties into filterContent. */
     quickFilters?: ReactNode;
     /** Additional commands beside Filters in the same tool row. */
@@ -409,6 +411,253 @@ export interface SparklineProps extends Omit<HTMLAttributes<HTMLDivElement>, "ch
 }
 /** @since 0.2.11 */
 export declare const Sparkline: import("react").ForwardRefExoticComponent<SparklineProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface LineChartSeries {
+    id: string;
+    label: string;
+    /** One observation per category. Missing and nonfinite values break the line. */
+    values: readonly (number | null)[];
+}
+export type ChartSeries = LineChartSeries;
+export interface LineChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    /** Equally spaced categories in the order supplied. */
+    categories: readonly string[];
+    /** One to four comparable series sharing a scale. An empty array is also supported. */
+    series: readonly LineChartSeries[];
+    /** Shared finite bounds containing every observation. */
+    domain?: readonly [number, number];
+    variant?: "line" | "area";
+    /** Shape-preserving interpolation between observations. */
+    curve?: "linear" | "smooth";
+    /** Show the numeric scale and horizontal reference lines. */
+    showYAxis?: boolean;
+    /** Show the series key below the plot. Defaults to false. */
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    emptyLabel?: string;
+    missingLabel?: string;
+    navigationLabel?: string;
+}
+export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BarChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    categories: readonly string[];
+    /** Compare series side by side, by cumulative magnitude, or by share of each total. Defaults to grouped. */
+    layout?: "grouped" | "stacked" | "percent";
+    /** One to four grouped series. Use null for a missing value. */
+    series: readonly ChartSeries[];
+    /** Finite bounds containing zero and each observation or signed stack extent. Percent uses a fixed scale. */
+    domain?: readonly [number, number];
+    /** Show the series key below the plot. Defaults to false. */
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    /** Format a fraction from 0 to 1 in percent layout. */
+    formatShare?: (share: number) => string;
+    emptyLabel?: string;
+    missingLabel?: string;
+    navigationLabel?: string;
+}
+export declare const BarChart: import("react").ForwardRefExoticComponent<BarChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DonutChartItem {
+    id: string;
+    label: string;
+    /** A finite nonnegative part of the whole. */
+    value: number;
+}
+export interface DonutChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    /** Up to six categories in display order. */
+    items: readonly DonutChartItem[];
+    totalLabel?: string;
+    emptyLabel?: string;
+    navigationLabel?: string;
+    showLegend?: boolean;
+    formatValue?: (value: number) => string;
+    /** Receives the share as a fraction from 0 to 1. */
+    formatShare?: (share: number) => string;
+}
+export declare const DonutChart: import("react").ForwardRefExoticComponent<DonutChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface HeatmapProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    label: string;
+    columns: readonly string[];
+    rows: readonly {
+        id: string;
+        label: string;
+        values: readonly (number | null)[];
+    }[];
+    /** Shared zero-based scale. Defaults to the largest observed value. */
+    max?: number;
+    formatValue?: (value: number) => string;
+    missingLabel?: string;
+    emptyLabel?: string;
+}
+export declare const Heatmap: import("react").ForwardRefExoticComponent<HeatmapProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface ScatterChartPoint {
+    id: string;
+    label?: string;
+    x: number;
+    y: number;
+}
+export interface ScatterChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    xLabel: string;
+    yLabel: string;
+    /** Observations in keyboard navigation order, with stable, unique IDs. */
+    points: readonly ScatterChartPoint[];
+    /** Finite, increasing bounds that contain all x observations. */
+    xDomain?: readonly [number, number];
+    /** Finite, increasing bounds that contain all y observations. */
+    yDomain?: readonly [number, number];
+    formatX?: (value: number) => string;
+    formatY?: (value: number) => string;
+    emptyLabel?: string;
+    navigationLabel?: string;
+}
+export declare const ScatterChart: import("react").ForwardRefExoticComponent<ScatterChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface RangeChartItem {
+    id: string;
+    label: string;
+    /** A missing bound leaves an empty category. */
+    low: number | null;
+    high: number | null;
+    /** Optional observed value within the interval, such as a median. */
+    midpoint?: number;
+}
+export interface RangeChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly RangeChartItem[];
+    /** Finite increasing bounds containing all complete intervals. */
+    domain?: readonly [number, number];
+    formatValue?: (value: number) => string;
+    lowLabel?: string;
+    highLabel?: string;
+    midpointLabel?: string;
+    emptyLabel?: string;
+    missingLabel?: string;
+    navigationLabel?: string;
+}
+export declare const RangeChart: import("react").ForwardRefExoticComponent<RangeChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DumbbellChartItem {
+    id: string;
+    label: string;
+    before: number | null;
+    after: number | null;
+}
+export interface DumbbellChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly DumbbellChartItem[];
+    /** Finite, increasing bounds containing all observed endpoints. */
+    domain?: readonly [number, number];
+    beforeLabel?: string;
+    afterLabel?: string;
+    missingLabel?: string;
+    emptyLabel?: string;
+    formatValue?: (value: number) => string;
+    navigationLabel?: string;
+}
+export declare const DumbbellChart: import("react").ForwardRefExoticComponent<DumbbellChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BoxPlotSummary {
+    low: number;
+    q1: number;
+    median: number;
+    q3: number;
+    high: number;
+}
+export interface BoxPlotItem {
+    id: string;
+    label: string;
+    /** Ordered whiskers, quartiles and median. Null preserves an empty row. */
+    summary: BoxPlotSummary | null;
+    /** Optional observations beyond the supplied whiskers. */
+    outliers?: readonly number[];
+}
+export interface BoxPlotProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly BoxPlotItem[];
+    /** Finite increasing bounds containing every observation. */
+    domain?: readonly [number, number];
+    formatValue?: (value: number) => string;
+    /** Format axis ticks independently of exact values. Defaults to formatValue. */
+    formatAxisValue?: (value: number) => string;
+    emptyLabel?: string;
+    missingLabel?: string;
+    navigationLabel?: string;
+    statisticLabels?: Partial<Record<keyof BoxPlotSummary | "outliers" | "whiskers", string>>;
+}
+export declare const BoxPlot: import("react").ForwardRefExoticComponent<BoxPlotProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BulletChartItem {
+    id: string;
+    label: string;
+    value: number;
+    target: number;
+}
+export interface BulletChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    items: readonly BulletChartItem[];
+    /** Shared scale maximum. Defaults to the largest actual or target. */
+    max?: number;
+    formatValue?: (value: number) => string;
+    valueLabel?: string;
+    targetLabel?: string;
+    emptyLabel?: string;
+}
+export declare const BulletChart: import("react").ForwardRefExoticComponent<BulletChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface WaterfallChartStep {
+    id: string;
+    label: string;
+    value: number;
+    /** A change adjusts the running total. A total is an absolute checkpoint. */
+    kind?: "change" | "total";
+}
+export interface WaterfallChartProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    steps: readonly WaterfallChartStep[];
+    /** Finite increasing bounds containing zero and every running total. */
+    domain?: readonly [number, number];
+    formatValue?: (value: number) => string;
+    changeLabel?: string;
+    totalLabel?: string;
+    emptyLabel?: string;
+    navigationLabel?: string;
+}
+export declare const WaterfallChart: import("react").ForwardRefExoticComponent<WaterfallChartProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface HistogramProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    /** Name and unit for the numeric axis. */
+    xLabel: string;
+    /** Show the axis title below the numeric ticks. Defaults to true. */
+    showXAxisLabel?: boolean;
+    /** Inclusive lower boundary of the first bin. */
+    start: number;
+    /** Positive width shared by all bins. */
+    binWidth: number;
+    /** Counts in ascending bin order. Zero is a measured empty bin. */
+    counts: readonly number[];
+    /** Common count scale for comparing histograms. Defaults to the largest count or one. */
+    maxCount?: number;
+    countLabel?: string;
+    formatBoundary?: (value: number) => string;
+    formatCount?: (count: number) => string;
+    emptyLabel?: string;
+    navigationLabel?: string;
+}
+export declare const Histogram: import("react").ForwardRefExoticComponent<HistogramProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface BarListItem {
+    id: string;
+    label: string;
+    value: number;
+    valueText?: string;
+}
+export interface BarListProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "role" | "aria-label"> {
+    label: string;
+    /** Nonnegative values in display order. */
+    items: readonly BarListItem[];
+    /** Shared positive upper bound. Defaults to the largest value, or 1 when all are zero. */
+    max?: number;
+    tone?: SemanticTone;
+    emptyLabel?: string;
+}
+export declare const BarList: import("react").ForwardRefExoticComponent<BarListProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface DataListProps extends Omit<HTMLAttributes<HTMLUListElement>, "role"> {
     density?: "compact" | "comfortable";
     dividers?: boolean;
@@ -1197,6 +1446,8 @@ export interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, "childre
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** Resolve a fallback after close if the opener can no longer receive focus. */
+    getFallbackFocus?: () => HTMLElement | null;
     disabled?: boolean;
     side?: "top" | "bottom" | "left" | "right";
     align?: "start" | "center" | "end";
@@ -1246,6 +1497,8 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDialogElement>, "ch
     closeLabel?: string;
     closeOnOutsideClick?: boolean;
     initialFocusRef?: RefObject<HTMLElement | null>;
+    /** Resolve a fallback after close if the opener can no longer receive focus. */
+    getFallbackFocus?: () => HTMLElement | null;
 }
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDialogElement>>;
 export interface CommandPaletteProps extends Omit<DialogProps, "children" | "description" | "initialFocusRef"> {
@@ -1663,6 +1916,8 @@ export declare const Divider: import("react").ForwardRefExoticComponent<HTMLAttr
 export interface CodeSnippetProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     code: string;
     codeDirection?: "ltr" | "rtl" | "auto";
+    /** A decorative prompt placed beside the code, outside the selectable text. @since 0.2.13 */
+    prompt?: string;
     action?: ReactNode;
 }
 /** Selectable code with an optional host-owned action; no clipboard side effects. */
@@ -1675,6 +1930,8 @@ export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
 export declare const ScrollArea: import("react").ForwardRefExoticComponent<ScrollAreaProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface CopyButtonProps extends Omit<ButtonProps, "children" | "value" | "type" | "onClick" | "loading"> {
     value: string;
+    /** Use a named square icon action with the same clipboard feedback. @since 0.2.13 */
+    iconOnly?: boolean;
     copyLabel?: string;
     copiedLabel?: string;
     errorLabel?: string;

package/dist/index.js

@@ -52,6 +52,14 @@ import { CivilDateTimeRangePicker } from "./date-time-range-picker.js";
 import { FileRecord, UploadRecord, ModalImagePreview, FileMetadata } from "./file-records.js";
 import { ManagedDataTable } from "./data-table.js";
 import { TrendPlot } from "./sparkline.js";
+import { SeriesPlot, GroupedBars, RankedBars, ShareRing, HeatmapGrid } from "./charts.js";
+import { ScatterPlot } from "./scatter-chart.js";
+import { RangePlot } from "./range-chart.js";
+import { DumbbellPlot } from "./dumbbell-chart.js";
+import { DistributionBoxes } from "./box-plot.js";
+import { BulletPlot } from "./bullet-chart.js";
+import { HistogramPlot } from "./histogram.js";
+import { WaterfallPlot } from "./waterfall-chart.js";
 import { CheckableCard, ExclusiveCard } from "./collection-cards.js";
 import { ColorPreview, ColorEditor } from "./color-controls.js";
 import { HoverPreview } from "./hover-card.js";
@@ -101,6 +109,42 @@ export const DataTable = /* @__PURE__ */ forwardRef(function DataTable(props, re
 export const Sparkline = /* @__PURE__ */ forwardRef(function Sparkline({ showLabel = false, size = "md", tone = "accent", variant = "area", ...props }, ref) {
     return _jsx(TrendPlot, { ...props, showLabel: showLabel, size: size, tone: tone, variant: variant, ref: ref });
 });
+export const LineChart = /* @__PURE__ */ forwardRef(function LineChart({ variant = "area", curve = "smooth", showYAxis = false, emptyLabel = "No data", missingLabel = "No value", navigationLabel = "Use the arrow keys to explore values, or Home and End to jump.", ...props }, ref) {
+    return _jsx(SeriesPlot, { ...props, variant: variant, curve: curve, showYAxis: showYAxis, emptyLabel: emptyLabel, missingLabel: missingLabel, navigationLabel: navigationLabel, ref: ref });
+});
+export const BarChart = /* @__PURE__ */ forwardRef(function BarChart({ emptyLabel = "No data", missingLabel = "No value", navigationLabel = "Use the arrow keys to explore categories, or Home and End to jump.", ...props }, ref) {
+    return _jsx(GroupedBars, { ...props, emptyLabel: emptyLabel, missingLabel: missingLabel, navigationLabel: navigationLabel, ref: ref });
+});
+export const DonutChart = /* @__PURE__ */ forwardRef(function DonutChart({ totalLabel = "Total", emptyLabel = "No data", navigationLabel = "Use the arrow keys to explore segments, or Home and End to jump.", ...props }, ref) {
+    return _jsx(ShareRing, { ...props, totalLabel: totalLabel, emptyLabel: emptyLabel, navigationLabel: navigationLabel, ref: ref });
+});
+export const Heatmap = /* @__PURE__ */ forwardRef(function Heatmap({ missingLabel = "No data", emptyLabel = "No observations", ...props }, ref) {
+    return _jsx(HeatmapGrid, { ...props, missingLabel: missingLabel, emptyLabel: emptyLabel, ref: ref });
+});
+export const ScatterChart = /* @__PURE__ */ forwardRef(function ScatterChart(props, ref) {
+    return _jsx(ScatterPlot, { ...props, ref: ref });
+});
+export const RangeChart = /* @__PURE__ */ forwardRef(function RangeChart(props, ref) {
+    return _jsx(RangePlot, { ...props, ref: ref });
+});
+export const DumbbellChart = /* @__PURE__ */ forwardRef(function DumbbellChart(props, ref) {
+    return _jsx(DumbbellPlot, { ...props, ref: ref });
+});
+export const BoxPlot = /* @__PURE__ */ forwardRef(function BoxPlot(props, ref) {
+    return _jsx(DistributionBoxes, { ...props, ref: ref });
+});
+export const BulletChart = /* @__PURE__ */ forwardRef(function BulletChart(props, ref) {
+    return _jsx(BulletPlot, { ...props, ref: ref });
+});
+export const WaterfallChart = /* @__PURE__ */ forwardRef(function WaterfallChart(props, ref) {
+    return _jsx(WaterfallPlot, { ...props, ref: ref });
+});
+export const Histogram = /* @__PURE__ */ forwardRef(function Histogram(props, ref) {
+    return _jsx(HistogramPlot, { ...props, ref: ref });
+});
+export const BarList = /* @__PURE__ */ forwardRef(function BarList({ tone = "accent", emptyLabel = "No data", ...props }, ref) {
+    return _jsx(RankedBars, { ...props, tone: tone, emptyLabel: emptyLabel, ref: ref });
+});
 /** A native list; links and actions stay independent. @since 0.2.8 */
 export const DataList = /* @__PURE__ */ forwardRef(function DataList({ density = "comfortable", dividers = true, className, ...props }, ref) {
     return _jsx("ul", { ...props, ref: ref, role: "list", "data-density": density, "data-dividers": dividers, className: classes("flood-data-list", className) });
@@ -540,8 +584,8 @@ export const Divider = /* @__PURE__ */ forwardRef(function Divider({ className,
     return _jsx("hr", { ...props, ref: ref, className: classes("flood-divider", className) });
 });
 /** Selectable code with an optional host-owned action; no clipboard side effects. */
-export const CodeSnippet = /* @__PURE__ */ forwardRef(function CodeSnippet({ code, codeDirection = "ltr", action, className, ...props }, ref) {
-    return (_jsxs("div", { ...props, ref: ref, className: classes("flood-code-snippet", className), children: [_jsx("code", { dir: codeDirection, className: "flood-code-snippet__code", children: code }), action != null && _jsx("div", { className: "flood-code-snippet__action", children: action })] }));
+export const CodeSnippet = /* @__PURE__ */ forwardRef(function CodeSnippet({ code, codeDirection = "ltr", prompt, action, className, ...props }, ref) {
+    return (_jsxs("div", { ...props, ref: ref, className: classes("flood-code-snippet", className), children: [_jsxs("div", { dir: codeDirection === "rtl" ? "rtl" : "ltr", className: "flood-code-snippet__line", children: [prompt && _jsx("span", { "aria-hidden": "true", className: "flood-code-snippet__prompt", children: prompt }), _jsx("code", { dir: codeDirection, className: "flood-code-snippet__code", children: code })] }), action != null && _jsx("div", { className: "flood-code-snippet__action", children: action })] }));
 });
 /** Native scrolling with inset overlay tracks; the ref targets the scrollable viewport. */
 export const ScrollArea = /* @__PURE__ */ forwardRef(function ScrollArea({ orientation = "vertical", contentInset = "scrollbar", ...props }, ref) {

package/dist/menu.d.ts

@@ -15,6 +15,7 @@ interface MenuLayerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"
     rootAnchor: () => HTMLElement | null;
     rootPanel?: () => HTMLDivElement | null;
     onAction?: (id: string) => void;
+    getFallbackFocus?: MenuProps["getFallbackFocus"];
     edge?: () => Edge;
     nested?: boolean;
     position?: (panel: HTMLDivElement) => void;

package/dist/menu.js

@@ -40,7 +40,7 @@ export function focusMenuEdge(panel, edge = "first") {
     ((edge === "last" ? all.at(-1) : all[0]) ?? panel)?.focus({ preventScroll: true });
 }
 /** Internal native top-layer engine shared by Menu and ContextMenu. */
-export const MenuLayer = /* @__PURE__ */ forwardRef(function MenuLayerRender({ label, items, open, requestOpen, closeTree, anchor, rootAnchor, rootPanel, onAction, edge, nested = false, position, side = "bottom", align = "start", controlSize = "sm", id: explicitId, className, onKeyDown, ...props }, forwardedRef) {
+export const MenuLayer = /* @__PURE__ */ forwardRef(function MenuLayerRender({ label, items, open, requestOpen, closeTree, anchor, rootAnchor, rootPanel, onAction, getFallbackFocus, edge, nested = false, position, side = "bottom", align = "start", controlSize = "sm", id: explicitId, className, onKeyDown, ...props }, forwardedRef) {
     const generated = useId(), id = explicitId ?? `flood-menu-${generated}`;
     const panel = useRef(null), anchors = useRef(new Map()), children = useRef(new Map());
     const anchorRefs = useRef(new Map());
@@ -50,8 +50,8 @@ export const MenuLayer = /* @__PURE__ */ forwardRef(function MenuLayerRender({ l
     const hoverIntent = useRef(undefined);
     const latestItems = useRef(new Map());
     const search = useRef({ text: "", time: 0 }), pointerTarget = useRef(null);
-    const current = useRef({ open, requestOpen, closeTree, anchor, rootAnchor, rootPanel, position, edge });
-    current.current = { open, requestOpen, closeTree, anchor, rootAnchor, rootPanel, position, edge };
+    const current = useRef({ open, requestOpen, closeTree, anchor, rootAnchor, rootPanel, position, edge, getFallbackFocus });
+    current.current = { open, requestOpen, closeTree, anchor, rootAnchor, rootPanel, position, edge, getFallbackFocus };
     useImperativeHandle(forwardedRef, () => panel.current, []);
     const clearHover = () => { clearTimeout(hover.current); hover.current = undefined; hoverIntent.current = undefined; };
     useEffect(() => () => clearHover(), []);
@@ -166,7 +166,7 @@ export const MenuLayer = /* @__PURE__ */ forwardRef(function MenuLayerRender({ l
             unregister();
             document.removeEventListener("pointerdown", trackPointer, true);
             element.removeEventListener("toggle", toggle);
-            returnFocus(element, current.current.anchor());
+            returnFocus(element, current.current.anchor(), current.current.getFallbackFocus);
             if (element.matches(":popover-open"))
                 element.hidePopover();
         };
@@ -328,7 +328,7 @@ export const MenuLayer = /* @__PURE__ */ forwardRef(function MenuLayerRender({ l
             }
         }, children: showContent && _jsx(ScrollArea, { orientation: "vertical", role: "group", tabIndex: -1, className: "flood-menu__viewport", children: rows }) });
 });
-export const ActionMenu = /* @__PURE__ */ forwardRef(function ActionMenu({ label, trigger, items, onAction, open: controlled, defaultOpen, onOpenChange, disabled, side = "bottom", align = "start", controlSize = "sm", ...props }, forwardedRef) {
+export const ActionMenu = /* @__PURE__ */ forwardRef(function ActionMenu({ label, trigger, items, onAction, open: controlled, defaultOpen, onOpenChange, disabled, getFallbackFocus, side = "bottom", align = "start", controlSize = "sm", ...props }, forwardedRef) {
     if (!label.trim())
         throw new Error("Flood Menu requires a nonempty label");
     validateMenuTree(items);
@@ -365,5 +365,5 @@ export const ActionMenu = /* @__PURE__ */ forwardRef(function ActionMenu({ label
         } };
     const generated = useId(), id = props.id ?? `flood-menu-${generated}`;
     triggerProps["aria-controls"] = id;
-    return _jsxs(_Fragment, { children: [trigger(triggerProps), _jsx(MenuLayer, { ...props, id: id, ref: panel, label: label, items: items, open: open, requestOpen: request, closeTree: () => request(false), anchor: () => anchor.current, rootAnchor: () => anchor.current, onAction: onAction, edge: () => edge.current, side: side, align: align, controlSize: controlSize })] });
+    return _jsxs(_Fragment, { children: [trigger(triggerProps), _jsx(MenuLayer, { ...props, id: id, ref: panel, label: label, items: items, open: open, requestOpen: request, closeTree: () => request(false), anchor: () => anchor.current, rootAnchor: () => anchor.current, onAction: onAction, getFallbackFocus: getFallbackFocus, edge: () => edge.current, side: side, align: align, controlSize: controlSize })] });
 });

package/dist/overlay-runtime.d.ts

@@ -36,7 +36,7 @@ type Layer = {
 export declare function registerLayer(document: Document, layer: Layer): () => void;
 export declare function lockScroll(document: Document): () => void;
 export declare function positionLayer(anchor: HTMLElement, panel: HTMLElement, side: Side, align: Align, overlap?: boolean): void;
-export declare function returnFocus(panel: HTMLElement, anchor: HTMLElement | null): void;
+export declare function returnFocus(panel: HTMLElement, anchor: HTMLElement | null, fallback?: () => HTMLElement | null): void;
 /** Retain pixels for a CSS exit after the native layer has released focus. */
 export declare function useLayerExitContent(panel: RefObject<HTMLElement | null>, open: boolean, enabled?: boolean, transitionProperty?: string): boolean;
 export {};

package/dist/overlay-runtime.js

@@ -132,10 +132,31 @@ export function positionLayer(anchor, panel, side, align, overlap = false) {
     panel.dataset.side = position.side;
     panel.style.visibility = "visible";
 }
-export function returnFocus(panel, anchor) {
-    const active = panel.ownerDocument.activeElement;
-    if (anchor?.isConnected && !anchor.matches(":disabled") && (panel.contains(active) || active === panel.ownerDocument.body))
-        anchor.focus({ preventScroll: true });
+export function returnFocus(panel, anchor, fallback) {
+    const document = panel.ownerDocument;
+    const needsFocus = () => {
+        const active = document.activeElement;
+        return !active || active === document.body || panel.contains(active);
+    };
+    const focus = (target) => {
+        if (!target?.isConnected || target.ownerDocument !== document || panel.contains(target) ||
+            target.matches(':disabled,[aria-disabled="true"]') || target.closest("[hidden],[inert]") ||
+            !target.getClientRects().length || document.defaultView?.getComputedStyle(target).visibility !== "visible")
+            return;
+        target.focus({ preventScroll: true });
+    };
+    if (needsFocus())
+        focus(anchor);
+    else if (document.activeElement !== anchor)
+        return;
+    if (!fallback)
+        return;
+    // A surviving opener can still be removed in the same React commit.
+    queueMicrotask(() => {
+        if (panel.matches("dialog[open]") || panel.matches(":popover-open") || !needsFocus())
+            return;
+        focus(fallback());
+    });
 }
 /** Retain pixels for a CSS exit after the native layer has released focus. */
 export function useLayerExitContent(panel, open, enabled = true, transitionProperty = "opacity") {

package/dist/overlays.js

@@ -126,12 +126,14 @@ export const AnchoredOverlay = /* @__PURE__ */ forwardRef(function AnchoredOverl
                     leave();
                 } }, children: kind === "tooltip" ? tip.content : _jsxs(_Fragment, { children: [pop.chrome === "minimal" ? _jsx(VisuallyHidden, { children: _jsx("h2", { id: `${id}-title`, children: pop.title }) }) : _jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: pop.title }), !titleOnly && _jsx(OverlayClose, { label: pop.closeLabel ?? "Close", onClick: close })] }), showContent && _jsx("div", { className: "flood-overlay-body", children: pop.children })] }) })] });
 });
-export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ showCloseButton = true, scrollBody = false, bodyContentInset, footer, title, description, trigger, children, open: controlled, defaultOpen = false, onOpenChange, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, initialFocusRef, id: explicitId, className, onKeyDown, "aria-describedby": describedBy, ...props }, forwardedRef) {
+export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ showCloseButton = true, scrollBody = false, bodyContentInset, footer, title, description, trigger, children, open: controlled, defaultOpen = false, onOpenChange, disabled = false, closeLabel = "Close", closeOnOutsideClick = true, initialFocusRef, getFallbackFocus, id: explicitId, className, onKeyDown, "aria-describedby": describedBy, ...props }, forwardedRef) {
     const [local, setLocal] = useState(defaultOpen), open = controlled ?? local;
     const dialog = useRef(null), anchor = useRef(null), generated = useId(), id = explicitId ?? `flood-dialog-${generated}`;
     const request = (next) => { if (controlled === undefined)
         setLocal(next); onOpenChange?.(next); };
     const current = useCurrent({ open, request, closeOnOutsideClick, initialFocusRef });
+    const fallbackFocus = useRef(getFallbackFocus);
+    fallbackFocus.current = getFallbackFocus;
     const setAnchor = useCallback((node) => { anchor.current = node; }, []);
     useImperativeHandle(forwardedRef, () => dialog.current, []);
     useBrowserLayoutEffect(() => {
@@ -168,7 +170,7 @@ export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ s
             element.addEventListener("close", closed);
             focusContent(element, current.current.initialFocusRef?.current);
             dispose = () => { unregister(); unlock(); element.removeEventListener("cancel", cancel); element.removeEventListener("close", closed); if (element.open)
-                element.close(); returnFocus(element, anchor.current ?? previous); };
+                element.close(); returnFocus(element, anchor.current ?? previous, fallbackFocus.current ? () => fallbackFocus.current?.() ?? null : undefined); };
         };
         start();
         return () => { alive = false; view.cancelAnimationFrame(frame); dispose(); };

package/dist/range-chart.d.ts

@@ -0,0 +1,2 @@
+import { type RangeChartProps } from "./index.js";
+export declare const RangePlot: import("react").ForwardRefExoticComponent<RangeChartProps & import("react").RefAttributes<HTMLDivElement>>;