@flood-md/react 0.2.11 → 0.2.13

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

@@ -18,7 +18,7 @@ export declare function placeOverlay(anchor: Rect, size: {
     top: number;
     width: number;
     height: number;
-}, side: Side, align: Align, gap: number, rtl?: boolean): {
+}, side: Side, align: Align, gap: number, rtl?: boolean, overlap?: boolean): {
     left: number;
     top: number;
     side: Side;
@@ -29,13 +29,14 @@ type Layer = {
     anchor: () => HTMLElement | null;
     close: () => void;
     outside?: () => void;
+    closeOnFocusOutside?: boolean;
     modal?: boolean;
     tooltip?: boolean;
 };
 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): void;
-export declare function returnFocus(panel: HTMLElement, anchor: HTMLElement | null): 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, 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): boolean;
+export declare function useLayerExitContent(panel: RefObject<HTMLElement | null>, open: boolean, enabled?: boolean, transitionProperty?: string): boolean;
 export {};

package/dist/overlay-runtime.js

@@ -1,16 +1,18 @@
 import { useEffect, useLayoutEffect, useState } from "react";
 /** Pure collision handling in layout-viewport coordinates. */
-export function placeOverlay(anchor, size, viewport, side, align, gap, rtl = false) {
+export function placeOverlay(anchor, size, viewport, side, align, gap, rtl = false, overlap = false) {
     const edge = { left: viewport.left + gap, right: viewport.left + viewport.width - gap, top: viewport.top + gap, bottom: viewport.top + viewport.height - gap };
     const space = { top: anchor.top - edge.top, bottom: edge.bottom - anchor.bottom, left: anchor.left - edge.left, right: edge.right - anchor.right };
     const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
     const needed = (side === "top" || side === "bottom" ? size.height : size.width) + gap;
-    if (space[side] < needed && space[opposite[side]] > space[side])
+    if (!overlap && space[side] < needed && space[opposite[side]] > space[side])
         side = opposite[side];
     const horizontal = side === "top" || side === "bottom";
     const resolved = horizontal && rtl ? (align === "start" ? "end" : align === "end" ? "start" : align) : align;
     let left = horizontal ? (resolved === "start" ? anchor.left : resolved === "end" ? anchor.right - size.width : anchor.left + (anchor.width - size.width) / 2) : side === "left" ? anchor.left - size.width - gap : anchor.right + gap;
     let top = horizontal ? (side === "top" ? anchor.top - size.height - gap : anchor.bottom + gap) : (resolved === "start" ? anchor.top : resolved === "end" ? anchor.bottom - size.height : anchor.top + (anchor.height - size.height) / 2);
+    if (overlap)
+        top = anchor.top;
     left = Math.max(edge.left, Math.min(left, edge.right - size.width));
     top = Math.max(edge.top, Math.min(top, edge.bottom - size.height));
     return { left, top, side };
@@ -58,7 +60,7 @@ export function registerLayer(document, layer) {
         (layer.outside ?? layer.close)();
     };
     const focus = (event) => {
-        if (top() !== layer || layer.modal)
+        if (top() !== layer || layer.modal || layer.closeOnFocusOutside === false)
             return;
         const target = event.target;
         if (!layer.panel.contains(target) && !layer.anchor()?.contains(target))
@@ -109,7 +111,7 @@ export function lockScroll(document) {
         locks.delete(document);
     };
 }
-export function positionLayer(anchor, panel, side, align) {
+export function positionLayer(anchor, panel, side, align, overlap = false) {
     const view = panel.ownerDocument.defaultView;
     const visual = view.visualViewport;
     const viewport = { left: visual?.offsetLeft ?? 0, top: visual?.offsetTop ?? 0, width: visual?.width ?? view.innerWidth, height: visual?.height ?? view.innerHeight };
@@ -121,7 +123,7 @@ export function positionLayer(anchor, panel, side, align) {
         panel.style.setProperty("--flood-overlay-anchor-width", anchorWidth);
     if (panel.style.getPropertyValue("--flood-overlay-anchor-height") !== anchorHeight)
         panel.style.setProperty("--flood-overlay-anchor-height", anchorHeight);
-    const position = placeOverlay(bounds, panel.getBoundingClientRect(), viewport, side, align, gap, getComputedStyle(anchor).direction === "rtl");
+    const position = placeOverlay(bounds, panel.getBoundingClientRect(), viewport, side, align, gap, getComputedStyle(anchor).direction === "rtl", overlap);
     const left = `${position.left}px`, top = `${position.top}px`;
     if (panel.style.left !== left)
         panel.style.left = left;
@@ -130,13 +132,34 @@ export function positionLayer(anchor, panel, side, align) {
     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) {
+export function useLayerExitContent(panel, open, enabled = true, transitionProperty = "opacity") {
     const [retained, setRetained] = useState(false);
     useLayerLayoutEffect(() => {
         const node = panel.current;
@@ -149,7 +172,7 @@ export function useLayerExitContent(panel, open, enabled = true) {
             return;
         }
         node.inert = true;
-        const transitions = node.getAnimations().filter(animation => "transitionProperty" in animation && animation.transitionProperty === "opacity");
+        const transitions = node.getAnimations().filter(animation => "transitionProperty" in animation && animation.transitionProperty === transitionProperty);
         let active = true;
         if (!transitions.length)
             setRetained(false);
@@ -159,7 +182,7 @@ export function useLayerExitContent(panel, open, enabled = true) {
                     setRetained(false);
             });
         return () => { active = false; node.inert = false; };
-    }, [panel, open, enabled]);
+    }, [panel, open, enabled, transitionProperty]);
     return open || enabled && retained;
 }
 const useLayerLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

package/dist/overlays.d.ts

@@ -7,6 +7,7 @@ interface ModalOverlayProps extends DialogProps {
     showCloseButton?: boolean;
     role?: "dialog" | "alertdialog";
     scrollBody?: boolean;
+    bodyContentInset?: "none" | "scrollbar";
     footer?: import("react").ReactNode;
 }
 export declare const ModalOverlay: import("react").ForwardRefExoticComponent<ModalOverlayProps & import("react").RefAttributes<HTMLDialogElement>>;

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, 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(); };
@@ -194,5 +196,5 @@ export const ModalOverlay = /* @__PURE__ */ forwardRef(function ModalOverlay({ s
                         event.preventDefault();
                         first.focus();
                     }
-                }, children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: title }), showCloseButton && _jsx(OverlayClose, { label: closeLabel, onClick: () => request(false) })] }), description && _jsx("p", { id: `${id}-description`, className: "flood-overlay-description", children: description }), open && (scrollBody ? _jsx("div", { className: "flood-drawer__body", children: _jsx(ScrollArea, { className: "flood-overlay-body", style: { height: "100%" }, children: children }) }) : _jsx("div", { className: "flood-overlay-body", children: children })), open && footer && _jsx("div", { className: "flood-drawer__footer", children: footer })] })] });
+                }, children: [_jsxs("div", { className: "flood-overlay-header", children: [_jsx("h2", { id: `${id}-title`, className: "flood-overlay-title", children: title }), showCloseButton && _jsx(OverlayClose, { label: closeLabel, onClick: () => request(false) })] }), description && _jsx("p", { id: `${id}-description`, className: "flood-overlay-description", children: description }), open && (scrollBody ? _jsx("div", { className: "flood-drawer__body", children: _jsx(ScrollArea, { className: "flood-overlay-body", contentInset: bodyContentInset, style: { height: "100%" }, children: children }) }) : _jsx("div", { className: "flood-overlay-body", children: children })), open && footer && _jsx("div", { className: "flood-drawer__footer", children: footer })] })] });
 });

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>>;

package/dist/range-chart.js

@@ -0,0 +1,97 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId, useState } from "react";
+import { Surface, Text, VisuallyHidden } from "./index.js";
+const number = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+export const RangePlot = /* @__PURE__ */ forwardRef(function RangePlot({ label, items, domain, formatValue = value => number.format(value), lowLabel = "Low", highLabel = "High", midpointLabel = "Midpoint", emptyLabel = "No observations", missingLabel = "No data", navigationLabel = "Use the arrow keys to explore categories, 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);
+    let min = Infinity;
+    let max = -Infinity;
+    const ids = new Set();
+    const intervals = items.map(item => {
+        const { id, label: name, low, high, midpoint } = item;
+        if (!id.trim() || ids.has(id) || !name.trim()) {
+            throw new Error("Flood RangeChart needs unique item IDs and nonempty labels");
+        }
+        ids.add(id);
+        if ((low !== null && !Number.isFinite(low)) || (high !== null && !Number.isFinite(high)) ||
+            (midpoint !== undefined && !Number.isFinite(midpoint))) {
+            throw new RangeError("Flood RangeChart bounds and midpoints must be finite");
+        }
+        if (low === null || high === null)
+            return undefined;
+        if (low > high || (midpoint !== undefined && (midpoint < low || midpoint > high))) {
+            throw new RangeError("Flood RangeChart midpoint must lie within its ordered bounds");
+        }
+        min = Math.min(min, low);
+        max = Math.max(max, high);
+        return { low, high, midpoint };
+    });
+    const hasData = min <= max;
+    if (domain && (!Number.isFinite(domain[0]) || !Number.isFinite(domain[1]) ||
+        domain[0] >= domain[1] || (hasData && (domain[0] > min || domain[1] < max)))) {
+        throw new RangeError("Flood RangeChart domain must contain all complete intervals and have finite increasing bounds");
+    }
+    const [floor, ceiling] = domain ?? [min, max];
+    const span = ceiling - floor;
+    const scale = (value) => span === 0 ? .5 : Number.isFinite(span)
+        ? (value - floor) / span
+        : (value / 2 - floor / 2) / (ceiling / 2 - floor / 2);
+    const last = items.length - 1;
+    const active = Math.min(hovered ?? tapped ?? cursor, last);
+    const inspecting = hovered !== undefined || tapped !== undefined || focused;
+    const current = intervals[active];
+    const readings = current ? [
+        { name: highLabel, value: formatValue(current.high) },
+        ...(current.midpoint === undefined ? [] : [{ name: midpointLabel, value: formatValue(current.midpoint) }]),
+        { name: lowLabel, value: formatValue(current.low) },
+    ] : [];
+    const accessibleValue = [items[active]?.label, ...(current
+            ? readings.map(reading => `${reading.name}: ${reading.value}`)
+            : [missingLabel])].filter(Boolean).join(", ");
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = active + 1;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = active - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = last;
+                break;
+            case "Escape":
+                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-range-chart", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: hasData ? _jsxs(_Fragment, { children: [last > 0 && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsxs("div", { className: "flood-range-chart__plot", dir: "ltr", style: { "--flood-range-columns": items.length }, role: last > 0 ? "slider" : "img", tabIndex: last > 0 ? 0 : undefined, "aria-label": last > 0 ? label : accessibleValue, "aria-describedby": last > 0 ? instructions : undefined, "aria-valuemin": last > 0 ? 1 : undefined, "aria-valuemax": last > 0 ? items.length : undefined, "aria-valuenow": last > 0 ? active + 1 : undefined, "aria-valuetext": last > 0 ? accessibleValue : undefined, onKeyDown: navigate, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onPointerLeave: () => setHovered(undefined), children: [_jsx("div", { className: "flood-range-chart__columns", "aria-hidden": "true", children: items.map((item, index) => {
+                                const interval = intervals[index];
+                                return _jsxs("div", { className: "flood-range-chart__column", "data-active": inspecting && index === active || undefined, onPointerEnter: event => { if (event.pointerType !== "touch")
+                                        setHovered(index); }, onPointerUp: event => { if (event.pointerType === "touch")
+                                        setTapped(previous => previous === index ? undefined : index); }, children: [_jsx("div", { className: "flood-range-chart__track", children: interval && _jsxs(_Fragment, { children: [_jsx("span", { className: "flood-range-chart__band", style: {
+                                                            insetBlockStart: `${(1 - scale(interval.high)) * 100}%`,
+                                                            insetBlockEnd: interval.low === interval.high ? undefined : `${scale(interval.low) * 100}%`,
+                                                        }, "data-flat": interval.low === interval.high || undefined }), interval.midpoint !== undefined && _jsx("span", { className: "flood-range-chart__midpoint", style: { insetBlockStart: `${(1 - scale(interval.midpoint)) * 100}%` } })] }) }), _jsx(Text, { className: "flood-range-chart__category", size: "helper", tone: "subtle", dir: "auto", title: item.label, children: item.label })] }, item.id);
+                            }) }), inspecting && _jsxs(Surface, { className: "flood-chart__tooltip flood-range-chart__tooltip", padding: "2", elevation: "raised", "aria-hidden": "true", style: {
+                                "--flood-range-position": `${(active + .5) / items.length * 100}%`,
+                                "--flood-range-tip-side": active >= items.length / 2 ? -1 : 0,
+                            }, children: [_jsx(Text, { size: "helper", children: items[active].label }), current ? readings.map((reading, index) => _jsxs("div", { className: "flood-range-chart__reading", children: [_jsx(Text, { size: "helper", tone: "subtle", children: reading.name }), _jsx(Text, { size: "helper", children: reading.value })] }, index)) : _jsx(Text, { size: "helper", tone: "subtle", children: missingLabel })] })] })] }) : _jsx(Text, { className: "flood-range-chart__empty", size: "compact", tone: "subtle", children: emptyLabel }) });
+});

package/dist/scatter-chart.d.ts

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

package/dist/scatter-chart.js

@@ -0,0 +1,170 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Surface, Text, VisuallyHidden } from "./index.js";
+import { placeOverlay } from "./overlay-runtime.js";
+const numberFormat = new Intl.NumberFormat("en", { maximumSignificantDigits: 21 });
+const formatNumber = (value) => numberFormat.format(value);
+const useChartLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function scaleFor(points, axis, domain) {
+    let low = Infinity;
+    let high = -Infinity;
+    for (const point of points) {
+        low = Math.min(low, point[axis]);
+        high = Math.max(high, point[axis]);
+    }
+    if (domain) {
+        const [min, max] = domain;
+        if (!Number.isFinite(min) || !Number.isFinite(max) || min >= max || low < min || high > max) {
+            throw new RangeError(`Flood ScatterChart ${axis} domain must have finite increasing bounds containing all observations`);
+        }
+        return domain;
+    }
+    return points.length ? [low, high] : [0, 1];
+}
+function normalize(value, [min, max]) {
+    if (min === max)
+        return .5;
+    const span = max - min;
+    return Number.isFinite(span) ? (value - min) / span : (value / 2 - min / 2) / (max / 2 - min / 2);
+}
+function ticks([min, max]) {
+    const midpoint = min / 2 + max / 2;
+    return min === max ? [min] : midpoint === min || midpoint === max ? [min, max] : [min, midpoint, max];
+}
+export const ScatterPlot = /* @__PURE__ */ forwardRef(function ScatterPlot({ label, xLabel, yLabel, points, xDomain, yDomain, formatX = formatNumber, formatY = formatNumber, emptyLabel = "No data", navigationLabel = "Use arrow keys to inspect points, or Home and End to jump.", className, ...props }, ref) {
+    const instructions = useId();
+    const plot = useRef(null);
+    const area = useRef(null);
+    const tooltip = useRef(null);
+    const [cursor, setCursor] = useState();
+    const [hover, setHover] = useState();
+    const [touch, setTouch] = useState();
+    const [focused, setFocused] = useState(false);
+    const data = useMemo(() => {
+        const ids = new Set();
+        for (const point of points) {
+            if (!point.id.trim() || ids.has(point.id) || !Number.isFinite(point.x) || !Number.isFinite(point.y)) {
+                throw new Error("Flood ScatterChart needs unique nonempty point IDs and finite coordinates");
+            }
+            ids.add(point.id);
+        }
+        const xScale = scaleFor(points, "x", xDomain);
+        const yScale = scaleFor(points, "y", yDomain);
+        return {
+            xScale,
+            yScale,
+            positions: points.map(point => ({
+                point,
+                x: normalize(point.x, xScale),
+                y: 1 - normalize(point.y, yScale),
+            })),
+        };
+    }, [points, xDomain, yDomain]);
+    const activeId = hover ?? touch ?? cursor;
+    const index = activeId === undefined ? 0 : Math.max(0, points.findIndex(point => point.id === activeId));
+    const active = data.positions[index];
+    const inspecting = Boolean(active && (hover !== undefined || touch !== undefined || focused));
+    const xText = active ? formatX(active.point.x) : "";
+    const yText = active ? formatY(active.point.y) : "";
+    const valueText = [active?.point.label, `${xLabel}: ${xText}`, `${yLabel}: ${yText}`].filter(Boolean).join(", ");
+    const canNavigate = points.length > 1;
+    useChartLayoutEffect(() => {
+        const panel = tooltip.current;
+        const frame = plot.current;
+        const content = area.current;
+        if (!panel || !frame || !content || !active || !inspecting)
+            return;
+        const position = () => {
+            const bounds = frame.getBoundingClientRect();
+            if (!bounds.width || !frame.offsetWidth)
+                return;
+            const region = content.getBoundingClientRect();
+            const scale = bounds.width / frame.offsetWidth;
+            const pointX = region.left + active.x * region.width;
+            const pointY = region.top + active.y * region.height;
+            // The panel's column gap is the anchor clearance. The inner grid owns text spacing.
+            const gap = parseFloat(getComputedStyle(panel).columnGap) * scale;
+            const anchor = { left: pointX, right: pointX, top: pointY, bottom: pointY, width: 0, height: 0 };
+            const size = panel.getBoundingClientRect();
+            const edge = gap / 4;
+            const insetAdjustment = gap - edge;
+            const placementBounds = {
+                left: bounds.left - insetAdjustment,
+                top: bounds.top - insetAdjustment,
+                width: bounds.width + 2 * insetAdjustment,
+                height: bounds.height + 2 * insetAdjustment,
+            };
+            const hasSideRoom = Math.max(pointX - bounds.left, bounds.right - pointX) >= size.width + gap + edge;
+            const side = hasSideRoom ? (active.x < .5 ? "right" : "left") : "top";
+            const { left, top } = placeOverlay(anchor, size, placementBounds, side, "center", gap);
+            panel.style.left = `${(left - bounds.left) / scale}px`;
+            panel.style.top = `${(top - bounds.top) / scale}px`;
+            panel.dataset.positioned = "";
+        };
+        position();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(position);
+        observer.observe(frame);
+        observer.observe(panel);
+        return () => observer.disconnect();
+    }, [active, inspecting, xText, yText]);
+    const nearest = (event) => {
+        const bounds = area.current?.getBoundingClientRect();
+        if (!bounds)
+            return undefined;
+        let distance = Infinity;
+        let id;
+        for (const { point, x, y } of data.positions) {
+            const next = (bounds.left + x * bounds.width - event.clientX) ** 2 + (bounds.top + y * bounds.height - event.clientY) ** 2;
+            if (next < distance) {
+                distance = next;
+                id = point.id;
+            }
+        }
+        return id;
+    };
+    const trackPointer = (event) => {
+        if (event.pointerType !== "touch")
+            setHover(nearest(event));
+    };
+    const navigate = (event) => {
+        let next;
+        switch (event.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                next = index + 1;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                next = index - 1;
+                break;
+            case "Home":
+                next = 0;
+                break;
+            case "End":
+                next = points.length - 1;
+                break;
+            case "Escape":
+                if (inspecting)
+                    event.preventDefault();
+                setHover(undefined);
+                setTouch(undefined);
+                setFocused(false);
+                return;
+            default: return;
+        }
+        event.preventDefault();
+        setHover(undefined);
+        setTouch(undefined);
+        setFocused(true);
+        setCursor(points[Math.max(0, Math.min(next, points.length - 1))].id);
+    };
+    return _jsx("div", { ...props, ref: ref, className: ["flood-scatter-chart", className].filter(Boolean).join(" "), role: "group", "aria-label": label, children: !active ? _jsx(Text, { className: "flood-scatter-chart__empty", size: "compact", tone: "subtle", children: emptyLabel }) : _jsxs(_Fragment, { children: [canNavigate && _jsx(VisuallyHidden, { id: instructions, children: navigationLabel }), _jsx(Text, { className: "flood-scatter-chart__vertical-label", size: "helper", tone: "subtle", "aria-hidden": "true", dir: "auto", children: yLabel }), _jsxs("div", { className: "flood-scatter-chart__layout", dir: "ltr", children: [_jsx("div", { className: "flood-scatter-chart__ticks flood-scatter-chart__ticks--y", "aria-hidden": "true", children: ticks(data.yScale).slice().reverse().map(tick => _jsx(Text, { size: "helper", tone: "subtle", children: formatY(tick) }, tick)) }), _jsxs("div", { ref: plot, className: "flood-scatter-chart__plot", role: canNavigate ? "slider" : "img", tabIndex: 0, "aria-label": canNavigate ? label : `${label}. ${valueText}`, "aria-describedby": canNavigate ? instructions : undefined, "aria-valuemin": canNavigate ? 1 : undefined, "aria-valuemax": canNavigate ? points.length : undefined, "aria-valuenow": canNavigate ? index + 1 : undefined, "aria-valuetext": canNavigate ? valueText : undefined, onFocus: event => setFocused(event.currentTarget.matches(":focus-visible")), onBlur: () => setFocused(false), onKeyDown: navigate, onPointerEnter: trackPointer, onPointerMove: trackPointer, onPointerLeave: () => setHover(undefined), onPointerUp: event => {
+                                if (event.pointerType !== "touch")
+                                    return;
+                                const next = nearest(event);
+                                setHover(undefined);
+                                setTouch(current => current === next ? undefined : next);
+                            }, children: [_jsxs("div", { ref: area, className: "flood-scatter-chart__area", "aria-hidden": "true", children: [inspecting && _jsx("span", { className: "flood-scatter-chart__guides", style: { "--flood-scatter-x": `${active.x * 100}%`, "--flood-scatter-y": `${active.y * 100}%` } }), data.positions.map(({ point, x, y }, i) => _jsx("span", { className: "flood-scatter-chart__point", "data-active": inspecting && i === index || undefined, style: { left: `${x * 100}%`, top: `${y * 100}%` } }, point.id))] }), inspecting && _jsx(Surface, { ref: tooltip, className: "flood-chart__tooltip flood-scatter-chart__tooltip", elevation: "raised", padding: "2", "aria-hidden": "true", children: _jsxs("div", { className: "flood-scatter-chart__tooltip-content", children: [active.point.label && _jsx(Text, { size: "helper", dir: "auto", "data-point-label": "", children: active.point.label }), _jsx(Text, { size: "helper", tone: "subtle", dir: "auto", children: xLabel }), _jsx(Text, { size: "helper", "data-coordinate": "", children: xText }), _jsx(Text, { size: "helper", tone: "subtle", dir: "auto", children: yLabel }), _jsx(Text, { size: "helper", "data-coordinate": "", children: yText })] }) })] }), _jsx("div", { className: "flood-scatter-chart__ticks flood-scatter-chart__ticks--x", "aria-hidden": "true", children: ticks(data.xScale).map(tick => _jsx(Text, { size: "helper", tone: "subtle", children: formatX(tick) }, tick)) }), _jsx(Text, { className: "flood-scatter-chart__horizontal-label", size: "helper", tone: "subtle", "aria-hidden": "true", dir: "auto", children: xLabel })] })] }) });
+});

package/dist/sparkline.d.ts

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

package/dist/sparkline.js

@@ -0,0 +1,65 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { Text } from "./index.js";
+const plotWidth = 96;
+const plotHeight = 32;
+const plotInset = 3;
+function isObservation(value) {
+    return typeof value === "number" && Number.isFinite(value);
+}
+function getPlot(values, domain, area) {
+    let observedMin = Infinity;
+    let observedMax = -Infinity;
+    for (const value of values) {
+        if (isObservation(value)) {
+            observedMin = Math.min(observedMin, value);
+            observedMax = Math.max(observedMax, value);
+        }
+    }
+    if (observedMin === Infinity)
+        return null;
+    const [min, max] = domain && Number.isFinite(domain[0]) && Number.isFinite(domain[1]) && domain[0] < domain[1]
+        ? domain
+        : [observedMin, observedMax];
+    const span = max - min;
+    const commands = [];
+    const areas = [];
+    const markers = [];
+    let lastPoint;
+    let segmentStart = 0;
+    let segmentStartX = "";
+    for (const [index, value] of values.entries()) {
+        if (!isObservation(value))
+            continue;
+        const clamped = Math.min(max, Math.max(min, value));
+        // Halve the operands before subtracting if the finite bounds span more than Number.MAX_VALUE.
+        const fraction = span === 0 ? 0.5 : Number.isFinite(span)
+            ? (clamped - min) / span
+            : (clamped / 2 - min / 2) / (max / 2 - min / 2);
+        const x = values.length === 1 ? plotWidth / 2 : plotInset + index * (plotWidth - 2 * plotInset) / (values.length - 1);
+        const y = plotHeight - plotInset - fraction * (plotHeight - 2 * plotInset);
+        const continuesLine = isObservation(values[index - 1]);
+        const plotX = x.toFixed(2);
+        if (!continuesLine) {
+            segmentStart = commands.length;
+            segmentStartX = plotX;
+        }
+        commands.push(`${continuesLine ? "L" : "M"}${plotX} ${y.toFixed(2)}`);
+        lastPoint = { x, y, index };
+        if (!isObservation(values[index + 1])) {
+            if (!continuesLine)
+                markers.push(lastPoint);
+            else if (area)
+                areas.push(`${commands.slice(segmentStart).join(" ")} L${plotX} ${plotHeight} H${segmentStartX} Z`);
+        }
+    }
+    if (lastPoint && markers.at(-1) !== lastPoint)
+        markers.push(lastPoint);
+    return { path: commands.join(" "), area: areas.join(" "), markers, lastPoint };
+}
+const markerPath = ({ x, y }) => `M${x.toFixed(2)} ${y.toFixed(2)}h0`;
+export const TrendPlot = /* @__PURE__ */ forwardRef(function TrendPlot({ values, domain, label, showLabel, size, tone, variant, className, ...props }, ref) {
+    const gradientId = useId();
+    const plot = getPlot(values, domain, variant === "area");
+    return (_jsxs("div", { ...props, ref: ref, className: ["flood-sparkline", className].filter(Boolean).join(" "), "data-size": size, "data-tone": tone, role: "img", "aria-label": label, children: [plot ? (_jsxs("svg", { className: "flood-sparkline__plot", viewBox: `0 0 ${plotWidth} ${plotHeight}`, preserveAspectRatio: "none", "aria-hidden": "true", focusable: "false", children: [plot.area && _jsxs(_Fragment, { children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1", children: [_jsx("stop", { stopColor: "currentColor", stopOpacity: ".42" }), _jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0" })] }) }), _jsx("path", { className: "flood-sparkline__area", d: plot.area, fill: `url(#${gradientId})` })] }), _jsx("path", { className: "flood-sparkline__line", d: plot.path }), plot.lastPoint && _jsx("path", { className: "flood-sparkline__halo", d: markerPath(plot.lastPoint) }), plot.markers.map(point => (_jsx("path", { className: "flood-sparkline__point", d: markerPath(point), "data-latest": point === plot.lastPoint || undefined }, point.index)))] })) : (_jsx(Text, { className: "flood-sparkline__empty", size: "helper", tone: "subtle", "aria-hidden": "true", children: "\u2014" })), showLabel && _jsx(Text, { className: "flood-sparkline__label", size: "helper", tone: "subtle", "aria-hidden": "true", children: label })] }));
+});

package/dist/waterfall-chart.d.ts

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