@flood-md/react 0.2.11 → 0.2.12

package/README.md

@@ -6,11 +6,22 @@ HTML semantics and refs, no third-party component library or Tailwind dependency
 Named imports support tree shaking in optimizing ES-module bundlers. Import the
 shared stylesheet explicitly; styles are not split by component.
 
+Sheet is a bottom-aligned Drawer for short tasks, navigation and touch-friendly
+choices. It fits short content, caps long content to the viewport, and keeps
+Drawer dismissal, focus restoration, body scrolling and the optional footer.
+
 SegmentedControl options can display a `count` alongside the label, for example
 `{value: "pending", label: "Pending", count: 2}`. Use this for a small, mutually
 exclusive choice that updates one collection. The count is read with the visible
 label and does not change the submitted value.
 
+Version 0.2.12 adds opt-in DataTable column visibility. Set
+`showColumnVisibility` for the Columns menu, and supply `hiddenColumnIds` and
+`onHiddenColumnIdsChange` when the host saves preferences. The active sort and
+record-opening columns stay visible. See [DataTable](../../docs/components/data-table.md).
+Pass the Columns control from `toolbar={({ columns }) => …}` into
+`CollectionToolbar.actions` to keep it alongside search and filters.
+
 The 0.2.11 candidate adds optional DataTable row `primaryAction` for opening an
 in-place detail panel, plus `toolbar` and `inset="roomy"` for a shared table edge.
 The title is a native button and the rest of the row also responds to pointer
@@ -46,7 +57,7 @@ the interactive size. It defaults to size; shrinking a supporting glyph must
 not shrink its target or bypass IconSlot with a custom SVG width. Existing glyph
 roles at a 16px root are 2xs=14px, xs/sm=16px and md/lg=20px.
 
-This package documents the **0.2.11** source API. Keep Flood package versions aligned and follow the guide matching
+This package documents the **0.2.12** source API. Keep Flood package versions aligned and follow the guide matching
 your installed declarations; source changes do not modify an existing npm release.
 
 NavigationItem (0.2.11 candidate) is the shared small row for destinations,
@@ -431,6 +442,10 @@ edge-to-edge content when the host already provides safe padding. The default
 padding can wrap text and change content height. Native
 fallback scrollbars retain their platform behavior.
 
+AppShell content mode uses the same ScrollArea. For a workspace whose layout
+already provides clearance, `scrollContentInset="none"` keeps the content
+width stable when rails appear. The default protects edge-to-edge content.
+
 ```tsx
 <ScrollArea aria-label="Activity" style={{ maxHeight: "12rem" }}>
   <Stack gap="4">{/* Long activity content */}</Stack>
@@ -604,8 +619,9 @@ Available in 0.2.3. Import Flood CSS and use FloodRoot for dark foundations.
 
 Disclosure corner geometry: Accordion headers have square internal seams. Only
 the first header has upper shell corners, and only a closed last header has lower
-shell corners. An open Collapsible header has square lower corners where its
-panel begins. Hover backgrounds follow that same shape without clipping focus.
+shell corners. A standalone Collapsible has an inset, rounded trigger and a
+separate gap before the revealed content. The trigger label and panel share
+an inline edge.
 
 
 ## Tooltip, Popover and Dialog
@@ -804,7 +820,12 @@ assertive uses role=alert. Choose urgency deliberately for dynamically inserted
 content. Announcements depend on actual assistive technology; initial static
 markup is not guaranteed to be read aloud. No focus movement, auto-dismiss,
 timeout or built-in close/action button is supplied. Compose named host actions
-inside children when needed. Alert is separate from Dialog and future Toast.
+inside children when needed. A titleless Alert centers its glyph alongside a
+single Inline row. Subtle and ghost actions inherit the feedback tint on
+interactive states. Use a floating ToastRegion for brief operation results.
+ToastRegion defaults to `placement="bottom-end"`. Choose `bottom-start`,
+`top-end` or `top-start` for a different logical corner, or `inline` to
+embed it in a layout. New floating cards enter from their placement edge.
 
 See the [WAI Meter pattern](https://www.w3.org/WAI/ARIA/apg/patterns/meter/),
 [Alert pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) and
@@ -953,6 +974,9 @@ visually while retaining their full text/title. A hidden counter frees its slot.
 The host owns accepted changes, captured IDs, confirmation and focus after the
 bar disappears. Positioning is host-owned: use a stable bounded width for a
 floating rail, plus viewport safe-area spacing and measured scroll clearance.
+For table selection, place the rail at the viewport's bottom center. Set
+`showSelection={false}` on DataTable to keep its count available to assistive
+technology while BulkActionBar displays the visible count.
 
 OverflowActions also accepts leading/trailing slots and maxVisibleActions. Slot
 width is reserved before measuring commands; use action owners in those slots
@@ -963,6 +987,9 @@ under one named action panel. After hydration it uses one Tab entry, directional
 arrows, Home/End and optional looping. Disabled/hidden actions are skipped. Arrows
 move focus, not activation. Horizontal order follows writing direction. In vertical
 toolbars open Menu with Enter/Space; horizontal menus retain Up/Down opening.
+A vertical pill centers its actions on a single axis. Use same-size icon controls
+with accessible names for a compact rail. Use a rounded toolbar for a vertical
+group of labeled actions.
 Keep text inputs and independent selection widgets outside this action-only API.
 Native child handlers and refs remain attached; Toolbar owns their tabIndex while
 mounted and restores original attributes on cleanup. Without JavaScript, native
@@ -1109,6 +1136,7 @@ relative path, without reading their contents. Single mode replaces its selectio
 
 AlertDialog (0.2.5) is a concise confirmation, composed from Flood's
 native modal layer and Button. Supply title, description, trigger and onConfirm.
+Line breaks in the description separate distinct thoughts while allowing each line to wrap.
 Cancel receives initial focus; Escape cancels; outside clicks do not dismiss.
 Tab containment, background inertness, scroll lock and return focus reuse Dialog.
 Translate confirmLabel/cancelLabel. onConfirm runs before requesting close, while
@@ -1145,7 +1173,8 @@ The CSS build assembles the original component styles into the shared stylesheet
 
 
 Section headingLevel controls native h2–h6 semantics. Its independent headingSize
-uses the existing Heading roles (section/page/large/display), defaulting to section.
+uses the Heading roles (group/section/page/large/display), defaulting to section.
+Choose group for a compact section inside a Drawer or another constrained panel.
 Keep document hierarchy meaningful when changing visual emphasis.
 
 ## Editable and TagInput · 0.2.7
@@ -1192,8 +1221,11 @@ when a query changes; ready rows must match pageSize/totalRows. Selection defaul
 to the supplied page in server mode and the full collection in client mode.
 Server selectionScope="dataset" requires controlled selectedIds/onSelectionChange;
 the host validates IDs outside the page. Checkboxes only select the current page.
-This API does not fetch, cancel requests, select an entire remote query, virtualize
-or manage column visibility/resizing/pinning.
+The host owns request execution and cancellation, remote query selection and
+virtualization. DataTable supports optional column visibility, width preferences,
+logical edge pinning and expandable record details. Use Sparkline for a compact
+trend cell. See [DataTable](../../docs/components/data-table.md) and
+[Sparkline](../../docs/components/sparkline.md).
 
 DatePicker and DateRangePicker pass viewLabels to their calendars. Calendar panels
 use minimal Popover chrome, with Escape/selection/trigger dismissal; there is no

package/dist/app-shell.js

@@ -5,7 +5,7 @@ const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLa
 export const ApplicationTopBar = /* @__PURE__ */ forwardRef(function ApplicationTopBar({ start, end, bordered, className, ...props }, ref) {
     return _jsxs("header", { ...props, ref: ref, className: ["flood-app-top-bar", className].filter(Boolean).join(" "), "data-bordered": bordered || undefined, children: [start != null && _jsx(Inline, { align: "center", gap: "2", className: "flood-app-top-bar__start", children: start }), end != null && _jsx(Inline, { align: "center", gap: "2", className: "flood-app-top-bar__end", children: end })] });
 });
-export const ApplicationShell = /* @__PURE__ */ forwardRef(function ApplicationShell({ navigation, navigationSide, navigationDrawer, topBar, footer, scroll, mainId, mainAs: Main = "main", mainLabel, mainRef, scrollLabel, scrollOrientation = "both", skipLabel, children, className, ...props }, ref) {
+export const ApplicationShell = /* @__PURE__ */ forwardRef(function ApplicationShell({ navigation, navigationSide, navigationDrawer, topBar, footer, scroll, mainId, mainAs: Main = "main", mainLabel, mainRef, scrollLabel, scrollOrientation = "both", scrollContentInset = "scrollbar", skipLabel, children, className, ...props }, ref) {
     const generatedId = useId();
     const contentId = mainId ?? `flood-app-${generatedId}`;
     const root = useRef(null);
@@ -61,6 +61,6 @@ export const ApplicationShell = /* @__PURE__ */ forwardRef(function ApplicationS
         ? topBar(navigationTrigger)
         : _jsxs(_Fragment, { children: [navigationTrigger && _jsx(AppTopBar, { start: navigationTrigger }), topBar] });
     return _jsxs("div", { ...props, ref: root, className: ["flood-app-shell", className].filter(Boolean).join(" "), "data-scroll": scroll, children: [_jsx(SkipLink, { href: `#${contentId}`, children: skipLabel }), navigationSide === "start" && navigationSlot, _jsxs("div", { className: "flood-app-shell__workspace", children: [chrome, _jsx(Main, { ref: mainRef, id: contentId, "aria-label": mainLabel, tabIndex: -1, className: "flood-app-shell__main", children: scroll === "content"
-                            ? _jsx(ScrollArea, { orientation: scrollOrientation, "aria-label": scrollLabel, className: "flood-app-shell__scroll", children: children })
+                            ? _jsx(ScrollArea, { orientation: scrollOrientation, contentInset: scrollContentInset, "aria-label": scrollLabel, className: "flood-app-shell__scroll", children: children })
                             : children }), footer] }), navigationSide === "end" && navigationSlot] });
 });

package/dist/collection-toolbar.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useImperativeHandle, useRef } from 'react';
 import { Button, Field, Fieldset, IconSlot, Inline, Popover, SearchInput, Tag, Text } from './index.js';
 /** Query chrome only: the host supplies filter drafts, accepted query and saved views. */
-export const CollectionQueryBar = /* @__PURE__ */ forwardRef(function CollectionQueryBar({ label, searchValue, onSearchValueChange, searchLabel = 'Search', searchPlaceholder = 'Search…', clearSearchLabel = 'Clear search', appliedFilters = [], onRemoveFilter, appliedFiltersLabel = 'Applied filters', summaryPrefix, quickFilters, filterContent, filtersLabel = 'Filters', filterTitle = filtersLabel, filtersOpen, onFiltersOpenChange, filterPanelRef, filterPanelClassName, onClear, canClear = Boolean(searchValue || appliedFilters.length), clearLabel = 'Clear filters', controlSize = 'sm', disabled = false, hideLabel = true, className, ...props }, forwardedRef) {
+export const CollectionQueryBar = /* @__PURE__ */ forwardRef(function CollectionQueryBar({ label, searchValue, onSearchValueChange, searchLabel = 'Search', searchPlaceholder = 'Search…', clearSearchLabel = 'Clear search', appliedFilters = [], onRemoveFilter, appliedFiltersLabel = 'Applied filters', summaryPrefix, quickFilters, actions, filterContent, filtersLabel = 'Filters', filterTitle = filtersLabel, filtersOpen, onFiltersOpenChange, filterPanelRef, filterPanelClassName, onClear, canClear = Boolean(searchValue || appliedFilters.length), clearLabel = 'Clear filters', controlSize = 'sm', disabled = false, hideLabel = true, className, ...props }, forwardedRef) {
     const root = useRef(null);
     useImperativeHandle(forwardedRef, () => root.current, []);
     const generated = useId(), triggerId = `flood-collection-filters-${generated}`, searchId = `flood-collection-search-${generated}`;
@@ -21,6 +21,6 @@ export const CollectionQueryBar = /* @__PURE__ */ forwardRef(function Collection
                                     return;
                                 focusPersistent();
                                 onRemoveFilter(filter.id);
-                            } : undefined, children: filter.label }, filter.id))] }), (onClear || hasPanel) && _jsxs(Inline, { gap: "2", align: "center", className: "flood-collection-toolbar__commands", children: [onClear && _jsx(Button, { size: controlSize, variant: "outline", className: "flood-collection-toolbar__clear", "data-visible": canClear, disabled: disabled || !canClear, "aria-hidden": !canClear || undefined, onClick: () => { if (disabled || !canClear)
-                                return; focusPersistent(); onClear(); }, children: clearLabel }), hasPanel && _jsx(Popover, { title: filterTitle, ref: filterPanelRef, className: filterPanelClassName, open: filtersOpen, onOpenChange: onFiltersOpenChange, disabled: disabled, align: "end", trigger: trigger => _jsxs(Button, { ...trigger, id: triggerId, variant: "outline", size: controlSize, children: [_jsx(IconSlot, { size: controlSize, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 6h16M7 12h10m-7 6h4" }) }) }), filtersLabel] }), children: filterContent })] })] }) });
+                            } : undefined, children: filter.label }, filter.id))] }), (onClear || hasPanel || actions) && _jsxs(Inline, { gap: "2", align: "center", className: "flood-collection-toolbar__commands", children: [onClear && _jsx(Button, { size: controlSize, variant: "outline", className: "flood-collection-toolbar__clear", "data-visible": canClear, disabled: disabled || !canClear, "aria-hidden": !canClear || undefined, onClick: () => { if (disabled || !canClear)
+                                return; focusPersistent(); onClear(); }, children: clearLabel }), hasPanel && _jsx(Popover, { title: filterTitle, ref: filterPanelRef, className: filterPanelClassName, open: filtersOpen, onOpenChange: onFiltersOpenChange, disabled: disabled, align: "end", trigger: trigger => _jsxs(Button, { ...trigger, id: triggerId, variant: "outline", size: controlSize, children: [_jsx(IconSlot, { size: controlSize, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 6h16M7 12h10m-7 6h4" }) }) }), filtersLabel] }), children: filterContent }), actions] })] }) });
 });

package/dist/data-display.js

@@ -1,11 +1,35 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useEffect, useRef } from "react";
 import { ScrollArea } from "./index.js";
 export const DescribedData = /* @__PURE__ */ forwardRef(function DescribedData({ items, layout, density, dividers, className, ...props }, ref) {
     if (items.some(item => typeof item.id !== "string" || !item.id.trim()) || new Set(items.map(item => item.id)).size !== items.length)
         throw new Error("Flood description items require unique nonempty IDs");
     return _jsx("dl", { ...props, ref: ref, className: ["flood-description-list", className].filter(Boolean).join(" "), "data-layout": layout, "data-density": density, "data-dividers": dividers, children: items.map(item => _jsxs("div", { className: "flood-description-list__item", children: [_jsx("dt", { children: item.term }), _jsx("dd", { children: item.description })] }, item.id)) });
 });
-export const TabularData = /* @__PURE__ */ forwardRef(function TabularData({ caption, children, hideCaption, density, striped, scrollLabel, cellVerticalAlign, className, hidden, dir, lang, ...props }, ref) {
-    return _jsx("div", { className: "flood-table-container", hidden: hidden, dir: dir, lang: lang, children: _jsx(ScrollArea, { orientation: "horizontal", "aria-label": scrollLabel ?? caption, children: _jsxs("table", { ...props, ref: ref, hidden: hidden, dir: dir, lang: lang, className: ["flood-table", className].filter(Boolean).join(" "), "data-density": density, "data-striped": striped, "data-cell-vertical-align": cellVerticalAlign, children: [_jsx("caption", { className: hideCaption ? "flood-visually-hidden" : undefined, children: caption }), children] }) }) });
+export const TabularData = /* @__PURE__ */ forwardRef(function TabularData({ caption, children, hideCaption, density, striped, scrollLabel, cellVerticalAlign, maxViewportHeight, stickyHeader, className, hidden, dir, lang, ...props }, ref) {
+    const viewport = useRef(null);
+    const scrollVertically = maxViewportHeight !== undefined;
+    const pinHeader = scrollVertically && stickyHeader;
+    useEffect(() => {
+        const node = viewport.current;
+        const header = node?.querySelector("table")?.tHead;
+        if (!pinHeader || !node || !header)
+            return;
+        const update = () => { node.style.scrollPaddingBlockStart = `${header.offsetHeight}px`; };
+        update();
+        const observer = new ResizeObserver(update);
+        observer.observe(header);
+        return () => {
+            observer.disconnect();
+            node.style.removeProperty("scroll-padding-block-start");
+        };
+    }, [pinHeader, children]);
+    return _jsx("div", { className: "flood-table-container", hidden: hidden, dir: dir, lang: lang, children: _jsx(ScrollArea, { ref: viewport, orientation: scrollVertically ? "both" : "horizontal", contentInset: scrollVertically ? "scrollbar" : undefined, tabIndex: scrollVertically ? 0 : undefined, style: scrollVertically ? { maxBlockSize: maxViewportHeight } : undefined, "aria-label": scrollLabel ?? caption, onFocus: pinHeader ? event => {
+                const target = event.target;
+                const header = event.currentTarget.querySelector("table")?.tHead;
+                if (header && target !== event.currentTarget && !header.contains(target) &&
+                    !target.closest("[popover], dialog[open]") && target.getBoundingClientRect().top < header.getBoundingClientRect().bottom) {
+                    target.scrollIntoView({ block: "nearest", inline: "nearest" });
+                }
+            } : undefined, children: _jsxs("table", { ...props, ref: ref, hidden: hidden, dir: dir, lang: lang, className: ["flood-table", className].filter(Boolean).join(" "), "data-density": density, "data-striped": striped, "data-cell-vertical-align": cellVerticalAlign, "data-sticky-header": pinHeader || undefined, children: [_jsx("caption", { className: hideCaption ? "flood-visually-hidden" : undefined, children: caption }), children] }) }) });
 });

package/dist/data-table-columns.d.ts

@@ -0,0 +1,25 @@
+import { type CSSProperties } from "react";
+import { type DataTableColumn, type DataTableProps } from "./index.js";
+export declare function useDataTableColumnLayout(columns: readonly DataTableColumn[], visibleColumns: readonly DataTableColumn[], { columnWidths, defaultColumnWidths, onColumnWidthsChange, measureViewport, }: Pick<DataTableProps, "columnWidths" | "defaultColumnWidths" | "onColumnWidthsChange"> & {
+    measureViewport?: boolean;
+}): {
+    table: import("react").RefObject<HTMLTableElement | null>;
+    fixedWidth: number | undefined;
+    viewportWidth: number | undefined;
+    disclosureWidth: number | undefined;
+    atDefaults: boolean;
+    reset: () => void;
+    utilityCell: (id: string, header?: boolean) => {
+        "data-pin-edge": "end" | "start" | undefined;
+        "data-pin-boundary": true | undefined;
+        style: CSSProperties | undefined;
+        "data-data-table-utility": string;
+    };
+    columnCell: (column: DataTableColumn, header?: boolean) => {
+        "data-pin-edge": "end" | "start" | undefined;
+        "data-pin-boundary": true | undefined;
+        style: CSSProperties | undefined;
+        "data-data-table-column": string;
+    };
+    renderHandle: (column: DataTableColumn, label: string, disabled: boolean) => false | import("react").JSX.Element | undefined;
+};

package/dist/data-table-columns.js

@@ -0,0 +1,271 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { IconSlot } from "./index.js";
+const defaultMinWidth = 64;
+const defaultMaxWidth = 960;
+const columnKey = (id) => `column:${id}`;
+const utilityKey = (id) => `utility:${id}`;
+const validWidth = (value) => typeof value === "number" && Number.isFinite(value) && value > 0;
+function bounds(column) {
+    const min = validWidth(column.minWidth) ? Math.ceil(column.minWidth) : defaultMinWidth;
+    const max = validWidth(column.maxWidth) ? Math.floor(column.maxWidth) : defaultMaxWidth;
+    return { min, max: Math.max(min, max) };
+}
+function clampWidth(value, { min, max }) {
+    return Math.max(min, Math.min(max, Math.round(value)));
+}
+function normalizeWidths(columns, widths) {
+    return new Map(columns.flatMap(column => {
+        const value = widths && Object.prototype.hasOwnProperty.call(widths, column.id) ? widths[column.id] : undefined;
+        return column.resizable && validWidth(value) ? [[column.id, clampWidth(value, bounds(column))]] : [];
+    }));
+}
+function equalWidths(a, b) {
+    return a.size === b.size && [...a].every(([key, width]) => b.get(key) === width);
+}
+function measuredColumnWidth(header) {
+    const style = header.ownerDocument.defaultView?.getComputedStyle(header);
+    if (!style)
+        return header.offsetWidth;
+    const inlineSize = Number.parseFloat(style.inlineSize);
+    if (!Number.isFinite(inlineSize))
+        return header.offsetWidth;
+    const borderBox = style.boxSizing === "border-box" ? inlineSize : inlineSize +
+        Number.parseFloat(style.paddingInlineStart) + Number.parseFloat(style.paddingInlineEnd) +
+        Number.parseFloat(style.borderInlineStartWidth) + Number.parseFloat(style.borderInlineEndWidth);
+    // Avoid shaving a fraction of a pixel from untouched labels when switching to fixed tracks.
+    return Math.ceil(borderBox * 100) / 100;
+}
+function ColumnResizeHandle({ column, label, width, disabled, onPreview, onResize }) {
+    const gesture = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const limits = bounds(column);
+    const direction = (node) => {
+        const rtl = node.ownerDocument.defaultView?.getComputedStyle(node).direction === "rtl";
+        return (rtl ? -1 : 1) * (column.pinned === "end" ? -1 : 1);
+    };
+    const cancel = () => {
+        const active = gesture.current;
+        if (!active)
+            return;
+        gesture.current = null;
+        if (active.handle.hasPointerCapture(active.id))
+            active.handle.releasePointerCapture(active.id);
+        setDragging(false);
+        onPreview(undefined);
+    };
+    useEffect(() => {
+        if (disabled)
+            cancel();
+    }, [disabled]);
+    useEffect(() => () => {
+        if (gesture.current)
+            onPreview(undefined);
+    }, []);
+    useEffect(() => {
+        if (!dragging)
+            return;
+        const document = gesture.current?.handle.ownerDocument;
+        const view = document?.defaultView;
+        const hide = () => { if (document?.hidden)
+            cancel(); };
+        view?.addEventListener("blur", cancel);
+        document?.addEventListener("visibilitychange", hide);
+        return () => {
+            view?.removeEventListener("blur", cancel);
+            document?.removeEventListener("visibilitychange", hide);
+        };
+    }, [dragging]);
+    const requestedWidth = (event) => {
+        const active = gesture.current;
+        if (active?.id !== event.pointerId)
+            return undefined;
+        return clampWidth(active.width + (event.clientX - active.origin) * active.direction / active.scale, limits);
+    };
+    const value = width === undefined ? limits.min : clampWidth(width, limits);
+    return _jsx("div", { role: "separator", "aria-label": label, title: label, "aria-orientation": "vertical", "aria-valuemin": limits.min, "aria-valuemax": limits.max, "aria-valuenow": value, "aria-valuetext": `${value} px`, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, className: "flood-data-table__resize", "data-dragging": dragging || undefined, onKeyDown: event => {
+            if (event.defaultPrevented || disabled || event.altKey || event.ctrlKey || event.metaKey || event.nativeEvent.isComposing)
+                return;
+            if (event.key === "Escape" && gesture.current) {
+                event.preventDefault();
+                cancel();
+                return;
+            }
+            if (gesture.current)
+                return;
+            let next;
+            if (event.key === "Home")
+                next = limits.min;
+            else if (event.key === "End")
+                next = limits.max;
+            else if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                const step = event.shiftKey ? 24 : 8;
+                next = clampWidth((width ?? value) + (event.key === "ArrowRight" ? step : -step) * direction(event.currentTarget), limits);
+            }
+            else
+                return;
+            event.preventDefault();
+            if (next !== width)
+                onResize(next);
+        }, onPointerDown: event => {
+            const handle = event.currentTarget;
+            const header = handle.closest("th");
+            if (event.defaultPrevented || disabled || gesture.current || event.button !== 0 || !event.isPrimary || !header?.offsetWidth)
+                return;
+            try {
+                handle.setPointerCapture(event.pointerId);
+            }
+            catch {
+                return;
+            }
+            event.preventDefault();
+            handle.focus({ preventScroll: true });
+            gesture.current = {
+                handle, id: event.pointerId, origin: event.clientX, width: header.offsetWidth,
+                direction: direction(handle), scale: header.getBoundingClientRect().width / header.offsetWidth || 1,
+            };
+            setDragging(true);
+        }, onPointerMove: event => {
+            const next = requestedWidth(event);
+            if (next !== undefined && !disabled)
+                onPreview(event.clientX === gesture.current?.origin ? undefined : next);
+        }, onPointerUp: event => {
+            const next = requestedWidth(event);
+            if (next === undefined)
+                return;
+            const moved = event.clientX !== gesture.current?.origin && next !== gesture.current?.width;
+            cancel();
+            if (!disabled && moved)
+                onResize(next);
+        }, onPointerCancel: event => { if (gesture.current?.id === event.pointerId)
+            cancel(); }, onLostPointerCapture: event => { if (gesture.current?.id === event.pointerId)
+            cancel(); }, children: _jsx("span", { className: "flood-data-table__resize-icon", children: _jsx(IconSlot, { size: "sm", children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M3 12h18m-14-4-4 4 4 4m10-8 4 4-4 4" }) }) }) }) });
+}
+export function useDataTableColumnLayout(columns, visibleColumns, { columnWidths, defaultColumnWidths, onColumnWidthsChange, measureViewport = false, }) {
+    const [local, setLocal] = useState(defaultColumnWidths);
+    const [draft, setDraft] = useState();
+    const [metrics, setMetrics] = useState({ widths: new Map(), utilityKeys: [], viewport: 0 });
+    const table = useRef(null);
+    const baseline = useRef(new Map());
+    const accepted = normalizeWidths(columns, columnWidths ?? local);
+    const defaults = normalizeWidths(columns, defaultColumnWidths);
+    const activeDraft = draft && visibleColumns.some(column => column.resizable && column.id === draft.id) ? draft : undefined;
+    const visibleSizes = new Map(visibleColumns.flatMap(column => {
+        const width = activeDraft?.id === column.id ? activeDraft.width : accepted.get(column.id);
+        return width === undefined ? [] : [[columnKey(column.id), width]];
+    }));
+    const active = measureViewport || columns.some(column => column.resizable || column.pinned);
+    const hasSizes = visibleSizes.size > 0;
+    const columnOrder = JSON.stringify(visibleColumns.map(column => column.id));
+    useLayoutEffect(() => {
+        const node = table.current;
+        const viewport = node?.closest(".flood-scroll-area__viewport");
+        const headerRow = node?.tHead?.rows[0];
+        if (!active || !node || !viewport || !headerRow)
+            return;
+        let headers = Array.from(headerRow.cells);
+        const measure = () => {
+            const widths = new Map();
+            const utilityKeys = [];
+            for (const header of headers) {
+                const id = header.dataset.dataTableColumn;
+                const utility = header.dataset.dataTableUtility;
+                const key = id !== undefined ? columnKey(id) : utilityKey(utility ?? `unknown-${header.cellIndex}`);
+                if (id === undefined)
+                    utilityKeys.push(key);
+                if (header.offsetWidth === 0)
+                    continue;
+                widths.set(key, header.offsetWidth);
+                if (!hasSizes || !baseline.current.has(key))
+                    baseline.current.set(key, measuredColumnWidth(header));
+            }
+            setMetrics(previous => previous.viewport === viewport.clientWidth && equalWidths(previous.widths, widths) &&
+                previous.utilityKeys.join("|") === utilityKeys.join("|")
+                ? previous : { widths, utilityKeys, viewport: viewport.clientWidth });
+        };
+        measure();
+        const Observer = node.ownerDocument.defaultView?.ResizeObserver;
+        if (!Observer)
+            return;
+        const observer = new Observer(measure);
+        const observeHeaders = () => {
+            observer.disconnect();
+            headers = Array.from(headerRow.cells);
+            observer.observe(viewport);
+            for (const header of headers)
+                observer.observe(header, { box: "border-box" });
+            measure();
+        };
+        observeHeaders();
+        const HeaderObserver = node.ownerDocument.defaultView?.MutationObserver;
+        const headerObserver = HeaderObserver && new HeaderObserver(observeHeaders);
+        headerObserver?.observe(headerRow, { childList: true });
+        return () => {
+            observer.disconnect();
+            headerObserver?.disconnect();
+        };
+    }, [active, hasSizes, columnOrder]);
+    const sizes = hasSizes ? new Map([...baseline.current, ...visibleSizes]) : metrics.widths;
+    const keys = [...metrics.utilityKeys, ...visibleColumns.map(column => columnKey(column.id))];
+    const fixedWidth = hasSizes && keys.every(key => sizes.has(key))
+        ? keys.reduce((total, key) => total + sizes.get(key), 0)
+        : undefined;
+    const start = visibleColumns.filter(column => column.pinned === "start").map(column => columnKey(column.id));
+    const end = visibleColumns.filter(column => column.pinned === "end").map(column => columnKey(column.id)).reverse();
+    if (start.length)
+        start.unshift(...metrics.utilityKeys);
+    const pinned = new Map();
+    const pinnedKeys = [...start, ...end];
+    const pinnedWidth = pinnedKeys.reduce((total, key) => total + (metrics.widths.get(key) ?? 0), 0);
+    if (pinnedKeys.every(key => metrics.widths.has(key)) && pinnedWidth + defaultMinWidth <= metrics.viewport) {
+        for (const [edge, group] of [["start", start], ["end", end]]) {
+            let offset = 0;
+            group.forEach((key, index) => {
+                pinned.set(key, { edge, offset, boundary: index === group.length - 1 });
+                offset += metrics.widths.get(key);
+            });
+        }
+    }
+    function cell(key, header, width) {
+        const pin = pinned.get(key);
+        const inlineSize = header ? (fixedWidth === undefined ? width : sizes.get(key)) : undefined;
+        return {
+            "data-pin-edge": pin?.edge,
+            "data-pin-boundary": pin?.boundary || undefined,
+            style: inlineSize !== undefined || pin
+                ? { inlineSize, "--flood-data-table-pin-offset": pin ? `${pin.offset}px` : undefined }
+                : undefined,
+        };
+    }
+    function publish(next) {
+        if (equalWidths(accepted, next))
+            return;
+        const widths = Object.fromEntries(next);
+        if (columnWidths === undefined)
+            setLocal(widths);
+        onColumnWidthsChange?.(widths);
+    }
+    return {
+        table, fixedWidth,
+        viewportWidth: metrics.viewport || undefined,
+        disclosureWidth: metrics.widths.get(utilityKey("expansion")),
+        atDefaults: equalWidths(accepted, defaults),
+        reset: () => { setDraft(undefined); publish(defaults); },
+        utilityCell: (id, header = false) => ({
+            ...cell(utilityKey(id), header),
+            "data-data-table-utility": id,
+        }),
+        columnCell: (column, header = false) => ({
+            ...cell(columnKey(column.id), header, header ? (accepted.get(column.id) ?? column.width) : undefined),
+            "data-data-table-column": column.id,
+        }),
+        renderHandle: (column, label, disabled) => column.resizable &&
+            _jsx(ColumnResizeHandle, { column: column, label: label, disabled: disabled, width: visibleSizes.get(columnKey(column.id)) ?? metrics.widths.get(columnKey(column.id)), onPreview: width => setDraft(previous => {
+                    if (width === undefined)
+                        return previous?.id === column.id ? undefined : previous;
+                    if (previous?.id === column.id && previous.width === width)
+                        return previous;
+                    return { id: column.id, width };
+                }), onResize: width => publish(new Map(accepted).set(column.id, width)) }),
+    };
+}

package/dist/data-table-expansion.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode, type TdHTMLAttributes } from "react";
+import { type DataTableLabels, type DataTableRow } from "./index.js";
+export declare function useDataTableExpansion(rows: readonly DataTableRow[], expandedIds: readonly string[] | undefined, defaultExpandedIds: readonly string[] | undefined, onExpandedChange: ((ids: string[]) => void) | undefined): {
+    enabled: boolean;
+    expanded: Set<string>;
+    toggle: (id: string) => void;
+};
+interface DataTableExpandableRowProps {
+    row: DataTableRow;
+    showDisclosure: boolean;
+    expanded: boolean;
+    colSpan: number;
+    labels: DataTableLabels;
+    onToggle: () => void;
+    disclosureCellProps?: TdHTMLAttributes<HTMLTableCellElement>;
+    viewportWidth?: number;
+    disclosureWidth?: number;
+    children: (disclosureCell: ReactNode) => ReactNode;
+}
+export declare function DataTableExpandableRow({ row, showDisclosure, expanded, colSpan, labels, onToggle, disclosureCellProps, viewportWidth, disclosureWidth, children }: DataTableExpandableRowProps): import("react").JSX.Element;
+export {};

package/dist/data-table-expansion.js

@@ -0,0 +1,79 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { IconButton } from "./index.js";
+import { useLayerExitContent } from "./overlay-runtime.js";
+function hasExpandedContent(row) {
+    return row.expandedContent != null && typeof row.expandedContent !== "boolean";
+}
+export function useDataTableExpansion(rows, expandedIds, defaultExpandedIds, onExpandedChange) {
+    const [localExpandedIds, setLocalExpandedIds] = useState(defaultExpandedIds ?? []);
+    const expanded = new Set(expandedIds ?? localExpandedIds);
+    const enabled = expandedIds !== undefined || defaultExpandedIds !== undefined || rows.some(hasExpandedContent);
+    function toggle(id) {
+        const next = new Set(expanded);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        const ids = [...next];
+        if (expandedIds === undefined)
+            setLocalExpandedIds(ids);
+        onExpandedChange?.(ids);
+    }
+    return { enabled, expanded, toggle };
+}
+export function DataTableExpandableRow({ row, showDisclosure, expanded, colSpan, labels, onToggle, disclosureCellProps, viewportWidth, disclosureWidth, children }) {
+    const detailId = useId();
+    const toggle = useRef(null);
+    const reveal = useRef(null);
+    const detail = useRef(null);
+    const lastFocusedDetail = useRef(null);
+    const expandable = showDisclosure && hasExpandedContent(row);
+    const open = expandable && expanded;
+    const showDetail = useLayerExitContent(reveal, open, expandable, "grid-template-rows");
+    useEffect(() => {
+        const content = detail.current;
+        const header = content?.querySelector("table")?.tHead?.rows[0];
+        if (!content || !header)
+            return;
+        const alignBranch = () => {
+            const bounds = content.getBoundingClientRect();
+            if (!bounds.height)
+                return;
+            const heading = header.getBoundingClientRect();
+            const center = (heading.top + heading.height / 2 - bounds.top) * content.offsetHeight / bounds.height;
+            const value = `${center}px`;
+            if (content.style.getPropertyValue("--flood-data-table-branch-target") !== value) {
+                content.style.setProperty("--flood-data-table-branch-target", value);
+            }
+        };
+        alignBranch();
+        const observer = new ResizeObserver(alignBranch);
+        observer.observe(content);
+        observer.observe(header);
+        return () => {
+            observer.disconnect();
+            content.style.removeProperty("--flood-data-table-branch-target");
+        };
+    }, [showDetail, row.expandedContent]);
+    useEffect(() => {
+        if (open)
+            return;
+        const previousFocus = lastFocusedDetail.current;
+        lastFocusedDetail.current = null;
+        const button = toggle.current;
+        const active = button?.ownerDocument.activeElement;
+        if (button && previousFocus && (active === button.ownerDocument.body || reveal.current?.contains(active ?? null))) {
+            button.focus({ preventScroll: true });
+        }
+    }, [open]);
+    const label = row.label ?? row.primaryAction?.title ?? row.id;
+    const actionLabel = open ? labels.collapseRow ?? (name => `Collapse ${name}`) : labels.expandRow ?? (name => `Expand ${name}`);
+    return _jsxs(_Fragment, { children: [children(showDisclosure ? _jsx("td", { ...disclosureCellProps, "data-data-table-utility": "expansion", "data-detail-visible": showDetail || undefined, className: "flood-data-table__expand", children: expandable && _jsx(IconButton, { ref: toggle, label: actionLabel(label), size: "sm", iconSize: "xs", variant: "ghost", className: "flood-data-table__disclosure", type: "button", "aria-expanded": open, "aria-controls": open ? detailId : undefined, onClick: onToggle, children: _jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }) }) }) : null), showDetail && _jsx("tr", { id: detailId, className: "flood-data-table__expanded-row", "aria-hidden": open ? undefined : true, onFocusCapture: event => {
+                    if (event.currentTarget.contains(event.target))
+                        lastFocusedDetail.current = event.target;
+                }, children: _jsx("td", { colSpan: colSpan, children: _jsx("div", { ref: reveal, className: "flood-data-table__detail-reveal", "data-open": open || undefined, children: _jsx("div", { className: "flood-data-table__detail-clip", children: _jsx("div", { ref: detail, className: "flood-data-table__expanded-content", style: {
+                                    maxInlineSize: viewportWidth ? `max(0px, calc(${viewportWidth}px - 2 * var(--flood-data-table-edge) - var(--flood-scroll-content-inline, 0px)))` : undefined,
+                                    "--flood-data-table-disclosure-center": disclosureWidth === undefined ? undefined : `${disclosureWidth / 2}px`,
+                                }, children: row.expandedContent }) }) }) }) })] });
+}