@santi020k/lumen-react 3.0.1 → 4.0.0

package/dist/date-range-calendar.js

@@ -0,0 +1,69 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { isLumenDateRangeValid as isCalendarRangeValid, parseLumenDate as parseCalendarDate } from '@santi020k/lumen-core';
+import { Button, Icon } from './components.js';
+import { useCalendar } from './hooks.js';
+const RangeMonth = ({ part, value, onValueChange, locale, min, max, label, labels, disabled, readOnly, formatDate }) => {
+    const { rootRef, ...calendar } = useCalendar({
+        value: value[part],
+        locale,
+        min,
+        max,
+        labels,
+        disabled,
+        readOnly,
+        onValueChange: next => {
+            const range = part === 'start' ?
+                { start: next, end: next > value.end ? next : value.end } :
+                { start: next < value.start ? next : value.start, end: next };
+            onValueChange(isCalendarRangeValid(range, min, max) ? range : { start: next, end: next });
+        }
+    });
+    const selectedRef = useRef(value[part]);
+    const focusedDate = calendar.weeks.flat().find(day => day.tabIndex === 0)?.date;
+    useEffect(() => {
+        if (selectedRef.current !== value[part]) {
+            selectedRef.current = value[part];
+            calendar.focusDate(value[part]);
+        }
+    });
+    useEffect(() => {
+        const root = rootRef.current;
+        const activeElement = root?.ownerDocument.activeElement;
+        if (root?.contains(activeElement ?? null) && activeElement?.getAttribute('role') === 'gridcell') {
+            root.querySelector('[role="gridcell"][tabindex="0"]')?.focus();
+        }
+    }, [focusedDate, rootRef]);
+    return (_jsxs("section", { className: "ui-range-calendar__month", "aria-label": label, children: [_jsxs("div", { className: "ui-range-calendar__endpoint", children: [_jsx("span", { children: label }), _jsx("strong", { children: parseCalendarDate(value[part]) ? formatDate(value[part]) : value[part] })] }), _jsxs("div", { ...calendar.rootProps, children: [_jsxs("div", { className: "ui-calendar__header", children: [_jsx("button", { ...calendar.previousProps, type: "button", children: _jsx(Icon, { name: "chevron-left", size: "sm" }) }), _jsx("strong", { ...calendar.labelProps, children: calendar.label }), _jsx("button", { ...calendar.nextProps, type: "button", children: _jsx(Icon, { name: "chevron-right", size: "sm" }) })] }), _jsxs("table", { ...calendar.gridProps, "aria-multiselectable": "true", children: [_jsx("thead", { children: _jsx("tr", { role: "row", children: calendar.weekdays.map(day => _jsx("th", { role: "columnheader", scope: "col", children: day }, day)) }) }), _jsx("tbody", { children: calendar.weeks.map(week => (_jsx("tr", { role: "row", children: week.map(day => {
+                                        const inRange = isCalendarRangeValid(value, min, max) &&
+                                            day.date >= value.start && day.date <= value.end;
+                                        const endpoint = inRange && (day.date === value.start || day.date === value.end);
+                                        return (_jsx("td", { ...calendar.getDayProps(day), "aria-selected": inRange, "data-selected": endpoint || undefined, "data-in-range": inRange || undefined, children: day.day }, day.date));
+                                    }) }, week[0]?.date))) })] })] })] }));
+};
+const emptyPresets = [];
+const isPresetRecord = (value) => (typeof value === 'object' && value !== null && !Array.isArray(value));
+const isPreset = (value) => (isPresetRecord(value) && typeof value.label === 'string' && isPresetRecord(value.value) &&
+    typeof value.value.start === 'string' && typeof value.value.end === 'string');
+const validPresets = (value) => {
+    if (!Array.isArray(value))
+        return emptyPresets;
+    const presets = Array.from(value);
+    return presets.every(isPreset) ? presets : emptyPresets;
+};
+const isoDate = (value) => value;
+/** Inline range editor. Consumers own draft state and Apply/Cancel actions. */
+export const DateRangeCalendar = ({ value, onValueChange, locale, min, max, labels, presets: rawPresets = emptyPresets, disabled = false, readOnly = false, formatDate = isoDate, className, ...props }) => {
+    const presets = validPresets(rawPresets);
+    const [selectedPreset, setSelectedPreset] = useState();
+    const matchesRange = (preset) => (preset.value.start === value.start && preset.value.end === value.end);
+    const activePreset = presets.find(preset => preset.label === selectedPreset && matchesRange(preset)) ??
+        presets.find(matchesRange);
+    return (_jsxs("div", { ...props, "aria-disabled": disabled || undefined, className: ['ui-range-calendar', className].filter(Boolean).join(' '), children: [presets.length > 0 && (_jsx("nav", { className: "ui-range-calendar__presets", "aria-label": labels.presets, children: presets.map(preset => (_jsx(Button, { type: "button", variant: "ghost", disabled: disabled || readOnly || !isCalendarRangeValid(preset.value, min, max), "aria-pressed": preset === activePreset, onClick: () => {
+                        if (disabled || readOnly || !isCalendarRangeValid(preset.value, min, max))
+                            return;
+                        setSelectedPreset(preset.label);
+                        onValueChange({ ...preset.value });
+                    }, children: preset.label }, preset.label))) })), _jsx("div", { className: "ui-range-calendar__months", children: ['start', 'end'].map(part => (_jsx(RangeMonth, { part: part, value: value, onValueChange: onValueChange, locale: locale, min: min, max: max, label: labels[part], labels: labels, disabled: disabled, readOnly: readOnly, formatDate: formatDate }, part))) })] }));
+};

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+import type { CalendarRange, DateRangeCalendarProps } from './date-range-calendar.js';
+export interface DateRangeInputProps extends Pick<DateRangeCalendarProps, 'value' | 'onValueChange' | 'locale' | 'min' | 'max' | 'presets' | 'formatDate' | 'disabled' | 'readOnly'> {
+    /** Accessible trigger and non-modal dialog name. */
+    label: string;
+    labels: DateRangeCalendarProps['labels'] & {
+        apply: string;
+        cancel: string;
+        invalidRange?: string;
+    };
+    className?: string;
+    form?: string;
+    /** Optional native form entries containing the applied ISO endpoints. */
+    name?: {
+        start: string;
+        end: string;
+    };
+    /** Return a localized message to prevent applying an invalid draft. */
+    validate?: (value: CalendarRange) => string | undefined;
+    /** Optional localized summary below the calendars. */
+    renderSummary?: (value: CalendarRange) => ReactNode;
+}
+/** Input-attached range editor. Only Apply publishes the draft to onValueChange. */
+export declare const DateRangeInput: ({ value, onValueChange, label, labels, disabled, readOnly, className, name, form, validate, renderSummary, formatDate, ...calendarProps }: DateRangeInputProps) => import("react").JSX.Element;
+//# sourceMappingURL=date-range-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"date-range-input.d.ts","sourceRoot":"","sources":["../src/date-range-input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAqMrF,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,UAAU,CAAC;IAClL,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,sBAAsB,CAAC,QAAQ,CAAC,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACnG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACrC,uEAAuE;IACvE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,MAAM,GAAG,SAAS,CAAA;IACvD,sDAAsD;IACtD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAA;CACpD;AA6CD,oFAAoF;AACpF,eAAO,MAAM,cAAc,GAAI,2IAG5B,mBAAmB,gCAyGrB,CAAA"}

package/dist/date-range-input.js

@@ -0,0 +1,195 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { isLumenDateRangeValid as isCalendarRangeValid, parseLumenDate as parseCalendarDate, resolveLumenDateLabels as resolveDateControlLabels } from '@santi020k/lumen-core';
+import { Button, Icon } from './components.js';
+import { DateRangeCalendar } from './date-range-calendar.js';
+import { usePopover } from './hooks.js';
+const viewportBounds = (view) => {
+    const viewport = view.visualViewport;
+    const left = (viewport?.offsetLeft ?? 0) + 8;
+    const top = (viewport?.offsetTop ?? 0) + 8;
+    return { left,
+        top,
+        right: left + (viewport?.width ?? view.innerWidth) - 16,
+        bottom: top + (viewport?.height ?? view.innerHeight) - 16 };
+};
+const positionPanel = (panel, control, view) => {
+    const { left, top, right, bottom } = viewportBounds(view);
+    const anchor = control.getBoundingClientRect();
+    panel.style.width = `${Math.max(0, Math.min(816, right - left))}px`;
+    const body = panel.querySelector('.ui-range-input__body');
+    const footer = panel.querySelector('.ui-range-input__actions');
+    const preferredHeight = (body?.scrollHeight ?? panel.scrollHeight) + (footer?.offsetHeight ?? 0) + 2;
+    const below = Math.max(0, bottom - anchor.bottom - 8);
+    const above = Math.max(0, anchor.top - top - 8);
+    const placeBelow = below >= preferredHeight || below >= above;
+    const available = placeBelow ? below : above;
+    panel.style.maxHeight = `${Math.min(bottom - top, Math.max(120, available))}px`;
+    const bounds = panel.getBoundingClientRect();
+    const y = placeBelow ? anchor.bottom + 8 : anchor.top - bounds.height - 8;
+    panel.style.left = `${Math.max(left, Math.min(anchor.left, right - bounds.width))}px`;
+    panel.style.top = `${Math.max(top, Math.min(y, bottom - bounds.height))}px`;
+};
+const showPanel = (panel) => {
+    if (typeof panel.showPopover === 'function')
+        panel.showPopover();
+};
+const hidePanel = (panel) => {
+    if (typeof panel.hidePopover === 'function' && panel.matches(':popover-open'))
+        panel.hidePopover();
+};
+const isoDate = (date) => date;
+const resolveRangeInputForm = (root, formId) => {
+    if (!root)
+        return null;
+    if (formId !== undefined) {
+        const owner = root.ownerDocument.getElementById(formId);
+        const FormType = root.ownerDocument.defaultView?.HTMLFormElement;
+        return FormType && owner instanceof FormType ? owner : null;
+    }
+    return root.closest('form');
+};
+const observePanelPosition = (panel, control, view, position) => {
+    const owner = panel.ownerDocument;
+    const NodeType = owner.defaultView?.Node;
+    const viewport = view.visualViewport;
+    const onScroll = (event) => {
+        if (NodeType && event.target instanceof NodeType && panel.contains(event.target))
+            return;
+        position();
+    };
+    const observer = new ResizeObserver(position);
+    observer.observe(control);
+    observer.observe(panel);
+    owner.addEventListener('scroll', onScroll, true);
+    view.addEventListener('resize', position);
+    viewport?.addEventListener('resize', position);
+    viewport?.addEventListener('scroll', position);
+    return () => {
+        observer.disconnect();
+        owner.removeEventListener('scroll', onScroll, true);
+        view.removeEventListener('resize', position);
+        viewport?.removeEventListener('resize', position);
+        viewport?.removeEventListener('scroll', position);
+    };
+};
+const scrollSmallViewport = (control, view) => {
+    if ((view.visualViewport?.width ?? view.innerWidth) <= 640) {
+        control.scrollIntoView({ block: 'start', behavior: 'instant' });
+    }
+};
+const RangePopover = ({ open, onOpenChange, label, trigger, children, disabled, readOnly }) => {
+    const { panelRef, triggerRef, rootRef, rootProps, panelProps, triggerProps } = usePopover({ open, onOpenChange, positioning: 'none' });
+    useLayoutEffect(() => {
+        if (!open)
+            return;
+        const panel = panelRef.current;
+        const control = triggerRef.current;
+        const view = panel?.ownerDocument.defaultView;
+        if (!panel || !control || !view)
+            return;
+        scrollSmallViewport(control, view);
+        showPanel(panel);
+        const position = () => {
+            positionPanel(panel, control, view);
+        };
+        position();
+        const initialFocus = panel.querySelector('[role="gridcell"][tabindex="0"]') ??
+            panel.querySelector('button:not(:disabled)');
+        initialFocus?.focus({ preventScroll: true });
+        const owner = panel.ownerDocument;
+        const NodeType = owner.defaultView?.Node;
+        const closeOnFocusOutside = (event) => {
+            if (NodeType && event.target instanceof NodeType && !rootRef.current?.contains(event.target))
+                onOpenChange(false);
+        };
+        owner.addEventListener('focusin', closeOnFocusOutside);
+        const stopObserving = observePanelPosition(panel, control, view, position);
+        return () => {
+            stopObserving();
+            owner.removeEventListener('focusin', closeOnFocusOutside);
+            hidePanel(panel);
+        };
+    }, [open, onOpenChange, panelRef, rootRef, triggerRef]);
+    return (_jsxs("div", { ...rootProps, className: "ui-range-input", children: [_jsx(Button, { ...triggerProps, disabled: disabled, "aria-disabled": readOnly || undefined, variant: "outline", "aria-haspopup": "dialog", "aria-label": label, children: trigger }), _jsx("div", { ...panelProps, popover: "manual", role: "dialog", "aria-label": label, className: "ui-range-input__panel", onKeyDown: event => {
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        onOpenChange(false);
+                        triggerRef.current?.focus({ preventScroll: true });
+                    }
+                }, onClick: event => {
+                    const ElementType = event.currentTarget.ownerDocument.defaultView?.Element;
+                    if (ElementType && event.target instanceof ElementType && event.target.closest('[data-range-close]')) {
+                        triggerRef.current?.focus({ preventScroll: true });
+                    }
+                }, children: open && children })] }));
+};
+const useRangeDraft = (value, disabled, readOnly) => {
+    const { start, end } = value;
+    const revision = JSON.stringify([start, end, disabled, readOnly]);
+    const [state, setState] = useState({ revision, open: false, draft: value });
+    // External values and availability invalidate an editing session before it can commit.
+    if (state.revision !== revision) {
+        setState({ revision, open: false, draft: value });
+    }
+    const changeOpen = useCallback((next) => {
+        if (next && (disabled || readOnly))
+            return;
+        setState(current => ({ revision, open: next, draft: next ? { start, end } : current.draft }));
+    }, [disabled, readOnly, start, end, revision]);
+    const setDraft = (draft) => {
+        setState(current => ({ ...current, draft }));
+    };
+    return {
+        open: state.revision === revision && state.open && !disabled && !readOnly,
+        draft: state.draft,
+        changeOpen,
+        setDraft
+    };
+};
+const rangeError = (draft, props) => {
+    if (!isCalendarRangeValid(draft, props.min, props.max)) {
+        return props.labels.invalidRange ?? resolveDateControlLabels(props.locale || 'en').invalidRange;
+    }
+    return props.validate?.(draft);
+};
+const displayRangeDate = (date, formatDate) => (parseCalendarDate(date) ? formatDate(date) : date);
+/** Input-attached range editor. Only Apply publishes the draft to onValueChange. */
+export const DateRangeInput = ({ value, onValueChange, label, labels, disabled = false, readOnly = false, className, name, form, validate, renderSummary, formatDate = isoDate, ...calendarProps }) => {
+    const { open, draft, changeOpen, setDraft } = useRangeDraft(value, disabled, readOnly);
+    const wrapperRef = useRef(null);
+    const messageId = useId();
+    const validDraft = isCalendarRangeValid(draft, calendarProps.min, calendarProps.max);
+    const error = rangeError(draft, { ...calendarProps, labels, validate });
+    useEffect(() => {
+        const owner = wrapperRef.current?.ownerDocument;
+        let active = true;
+        let resetTimer;
+        const reset = (event) => {
+            if (event.target !== resolveRangeInputForm(wrapperRef.current, form))
+                return;
+            globalThis.clearTimeout(resetTimer);
+            resetTimer = globalThis.setTimeout(() => {
+                if (!active || event.defaultPrevented || !wrapperRef.current?.isConnected)
+                    return;
+                changeOpen(false);
+            });
+        };
+        owner?.addEventListener('reset', reset);
+        return () => {
+            active = false;
+            globalThis.clearTimeout(resetTimer);
+            owner?.removeEventListener('reset', reset);
+        };
+    }, [form, changeOpen]);
+    return (_jsxs("div", { className: className, ref: wrapperRef, children: [name && (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: name.start, form: form, value: value.start, disabled: disabled }), _jsx("input", { type: "hidden", name: name.end, form: form, value: value.end, disabled: disabled })] })), _jsxs(RangePopover, { open: open, onOpenChange: changeOpen, label: label, disabled: disabled, readOnly: readOnly, trigger: (_jsxs(_Fragment, { children: [_jsxs("span", { className: "ui-range-input__value", children: [_jsx(Icon, { name: "calendar", size: "sm" }), _jsxs("span", { children: [displayRangeDate(value.start, formatDate), ' ', "\u2013", ' ', displayRangeDate(value.end, formatDate)] })] }), _jsx(Icon, { name: "chevron-down", size: "sm" })] })), children: [_jsxs("div", { className: "ui-range-input__body", children: [_jsx(DateRangeCalendar, { ...calendarProps, value: draft, onValueChange: setDraft, labels: labels, formatDate: formatDate, disabled: disabled, readOnly: readOnly }), _jsx("div", { id: messageId, className: "ui-range-input__summary", "aria-live": "polite", "data-invalid": Boolean(error) || undefined, children: error ?? (validDraft ? renderSummary?.(draft) : undefined) })] }), _jsxs("div", { className: "ui-range-input__actions", children: [_jsx(Button, { variant: "outline", "data-range-close": true, onClick: () => {
+                                    changeOpen(false);
+                                }, children: labels.cancel }), _jsx(Button, { disabled: Boolean(error), "aria-describedby": error ? messageId : undefined, "data-range-close": true, onClick: () => {
+                                    if (disabled || readOnly || !validDraft || error)
+                                        return;
+                                    onValueChange({ ...draft });
+                                    changeOpen(false);
+                                }, children: labels.apply })] })] })] }));
+};

package/dist/device-frame.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type LumenDeviceFrameColor, type LumenDeviceFrameDevice, type LumenDeviceFrameOrientation, type LumenDeviceFrameTone } from '@santi020k/lumen-core';
+export interface DeviceFrameProps extends ComponentPropsWithoutRef<'div'> {
+    device?: LumenDeviceFrameDevice;
+    orientation?: LumenDeviceFrameOrientation;
+    tone?: LumenDeviceFrameTone;
+    color?: LumenDeviceFrameColor;
+    screenWidth?: number;
+    screenHeight?: number;
+    scroll?: boolean;
+}
+export declare const DeviceFrame: ({ device, orientation, tone, color, screenWidth, screenHeight, scroll, className, children, style: consumerStyle, ...props }: DeviceFrameProps) => import("react").JSX.Element;
+//# sourceMappingURL=device-frame.d.ts.map

package/dist/device-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"device-frame.d.ts","sourceRoot":"","sources":["../src/device-frame.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,wBAAwB,EAAyC,MAAM,OAAO,CAAA;AAE5F,OAAO,EACa,KAAK,qBAAqB,EAAE,KAAK,sBAAsB,EAAE,KAAK,2BAA2B,EAC3G,KAAK,oBAAoB,EAC1B,MAAM,uBAAuB,CAAA;AAE9B,MAAM,WAAW,gBAAiB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACvE,MAAM,CAAC,EAAE,sBAAsB,CAAA;IAC/B,WAAW,CAAC,EAAE,2BAA2B,CAAA;IACzC,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,KAAK,CAAC,EAAE,qBAAqB,CAAA;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,WAAW,GAAI,8HAC4C,gBAAgB,gCAuCvF,CAAA"}

package/dist/device-frame.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { composeClassName, observeLumenDeviceFrame, resolveLumenDeviceFrame, resolveLumenDeviceFrameColor } from '@santi020k/lumen-core';
+export const DeviceFrame = ({ device = 'laptop', orientation, tone = 'dark', color, screenWidth, screenHeight, scroll = true, className, children, style: consumerStyle, ...props }) => {
+    const screenRef = useRef(null);
+    const size = resolveLumenDeviceFrame(device, orientation, screenWidth, screenHeight);
+    const resolvedColor = resolveLumenDeviceFrameColor(color);
+    const frameStyle = {
+        ...consumerStyle,
+        ...(resolvedColor ? { '--ui-device-color': resolvedColor } : {})
+    };
+    useEffect(() => {
+        if (screenRef.current)
+            return observeLumenDeviceFrame(screenRef.current, size.width);
+    }, [size.width]);
+    const style = {
+        '--ui-device-frame-height': `${size.height}px`,
+        '--ui-device-frame-width': `${size.width}px`,
+        aspectRatio: `${size.width} / ${size.height}`
+    };
+    return (_jsxs("div", { className: composeClassName('ui-device-frame', className), "data-device": device, "data-tone": tone, "data-orientation": orientation, style: frameStyle, ...props, children: [_jsxs("div", { className: "ui-device-frame__shell", children: [_jsxs("span", { className: "ui-device-frame__hardware", "aria-hidden": "true", children: [_jsx("span", { className: "ui-device-frame__action" }), _jsx("span", { className: "ui-device-frame__volume-up" }), _jsx("span", { className: "ui-device-frame__volume-down" }), _jsx("span", { className: "ui-device-frame__power" }), _jsx("span", { className: "ui-device-frame__rail-left" }), _jsx("span", { className: "ui-device-frame__rail-right" })] }), _jsxs("div", { className: "ui-device-frame__glass", children: [_jsx("span", { "aria-hidden": "true", className: "ui-device-frame__camera" }), _jsx("div", { className: "ui-device-frame__screen", "data-scroll": String(scroll), ref: screenRef, style: style, children: children })] })] }), _jsx("span", { "aria-hidden": "true", className: "ui-device-frame__base" })] }));
+};

package/dist/dialog-lifecycle.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+export declare const useDialogLifecycle: (open: boolean, dialogRef: RefObject<HTMLDialogElement | null>, triggerRef: RefObject<HTMLElement | null>) => () => boolean;
+//# sourceMappingURL=dialog-lifecycle.d.ts.map

package/dist/dialog-lifecycle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-lifecycle.d.ts","sourceRoot":"","sources":["../src/dialog-lifecycle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAiCtC,eAAO,MAAM,kBAAkB,GAC7B,MAAM,OAAO,EACb,WAAW,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EAC9C,YAAY,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,kBA4D1C,CAAA"}

package/dist/dialog-lifecycle.js

@@ -0,0 +1,70 @@
+import { useEffect, useRef } from 'react';
+const openDialogs = [];
+const removeDialog = (dialog) => {
+    const index = openDialogs.lastIndexOf(dialog);
+    if (index !== -1)
+        openDialogs.splice(index, 1);
+};
+const getActiveElement = (dialog) => {
+    const { activeElement, defaultView } = dialog.ownerDocument;
+    return defaultView && activeElement instanceof defaultView.HTMLElement ? activeElement : null;
+};
+const restoreDialogFocus = (dialog, target) => {
+    if (!target?.isConnected)
+        return;
+    const topDialog = [...openDialogs].reverse().find(candidate => (candidate.ownerDocument === dialog.ownerDocument && candidate.isConnected && candidate.open));
+    if (topDialog && !topDialog.contains(target))
+        return;
+    const active = getActiveElement(dialog);
+    if (active && active !== dialog.ownerDocument.body && active !== target && !dialog.contains(active))
+        return;
+    target.focus({ preventScroll: true });
+};
+export const useDialogLifecycle = (open, dialogRef, triggerRef) => {
+    const returnFocusRef = useRef(null);
+    const generationRef = useRef(0);
+    const programmaticClosesRef = useRef(0);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!open || !dialog?.isConnected)
+            return;
+        generationRef.current += 1;
+        returnFocusRef.current ??= triggerRef.current ?? getActiveElement(dialog);
+        removeDialog(dialog);
+        openDialogs.push(dialog);
+        if (!dialog.open) {
+            if (typeof dialog.showModal === 'function') {
+                dialog.showModal();
+            }
+            else {
+                dialog.setAttribute('open', '');
+            }
+        }
+        return () => {
+            const generation = ++generationRef.current;
+            const target = returnFocusRef.current;
+            removeDialog(dialog);
+            if (dialog.open) {
+                if (typeof dialog.close === 'function') {
+                    programmaticClosesRef.current += 1;
+                    dialog.close();
+                }
+                else {
+                    dialog.removeAttribute('open');
+                }
+            }
+            queueMicrotask(() => {
+                if (generationRef.current !== generation)
+                    return;
+                returnFocusRef.current = null;
+                restoreDialogFocus(dialog, target);
+            });
+        };
+    }, [dialogRef, open, triggerRef]);
+    return () => {
+        if (programmaticClosesRef.current === 0)
+            return false;
+        programmaticClosesRef.current -= 1;
+        return true;
+    };
+};

package/dist/expanded-charts.d.ts

@@ -0,0 +1,26 @@
+import { type LumenBoxPlotDatum, type LumenBoxPlotOptions, type LumenBoxPlotStatisticLabels, type LumenCalendarHeatmapDatum, type LumenCalendarHeatmapOptions, type LumenChartLabels, type LumenFunnelDatum } from '@santi020k/lumen-core';
+import { type ChartProps } from './components.js';
+interface DataChartProps extends Omit<ChartProps, 'children'> {
+    formatValue?: (value: number) => string;
+    labels?: Partial<LumenChartLabels>;
+    showTable?: boolean;
+}
+export interface CalendarHeatmapProps extends DataChartProps, LumenCalendarHeatmapOptions {
+    data?: readonly LumenCalendarHeatmapDatum[];
+    formatDate?: (date: string) => string;
+    /** Seven labels indexed Sunday (0) through Saturday (6). */
+    weekdayLabels?: readonly string[];
+}
+export interface FunnelChartProps extends DataChartProps {
+    data?: readonly LumenFunnelDatum[];
+}
+export type BoxPlotStatisticLabels = LumenBoxPlotStatisticLabels;
+export interface BoxPlotProps extends DataChartProps, LumenBoxPlotOptions {
+    data?: readonly LumenBoxPlotDatum[];
+    statisticLabels?: Partial<BoxPlotStatisticLabels>;
+}
+export declare const CalendarHeatmap: ({ data, startDate, endDate, weekStartsOn, domain, formatValue, formatDate, weekdayLabels, labels, showTable, summary, className, ...props }: CalendarHeatmapProps) => import("react").JSX.Element;
+export declare const FunnelChart: ({ data, formatValue, labels, showTable, summary, className, ...props }: FunnelChartProps) => import("react").JSX.Element;
+export declare const BoxPlot: ({ data, domain, statisticLabels, formatValue: suppliedFormatValue, labels, showTable, summary, className, ...props }: BoxPlotProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=expanded-charts.d.ts.map

package/dist/expanded-charts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanded-charts.d.ts","sourceRoot":"","sources":["../src/expanded-charts.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA2I,KAAK,iBAAiB,EAAE,KAAK,mBAAmB,EAAE,KAAK,2BAA2B,EAAE,KAAK,yBAAyB,EAAE,KAAK,2BAA2B,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAA2B,MAAM,uBAAuB,CAAA;AAE5Y,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAExD,UAAU,cAAe,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAC3D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,cAAc,EAAE,2BAA2B;IACvF,IAAI,CAAC,EAAE,SAAS,yBAAyB,EAAE,CAAA;IAC3C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC,4DAA4D;IAC5D,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAClC;AACD,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IAAG,IAAI,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAA;CAAE;AAC/F,MAAM,MAAM,sBAAsB,GAAG,2BAA2B,CAAA;AAChE,MAAM,WAAW,YAAa,SAAQ,cAAc,EAAE,mBAAmB;IACvE,IAAI,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACnC,eAAe,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;CAClD;AA+BD,eAAO,MAAM,eAAe,GAAI,6IAc7B,oBAAoB,gCAsHtB,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,wEAQzB,gBAAgB,gCA8ClB,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,sHAUrB,YAAY,gCAwFd,CAAA"}

package/dist/expanded-charts.js

@@ -0,0 +1,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { composeClassName, createLumenBoxPlotGeometry, createLumenCalendarHeatmapGeometry, createLumenFunnelGeometry, getLumenChartToneClassName, resolveLumenChartLabels } from '@santi020k/lumen-core';
+import { Chart } from './components.js';
+const defaultStatistics = { min: 'Lower whisker', q1: 'First quartile', median: 'Median', q3: 'Third quartile', max: 'Upper whisker', outliers: 'Outliers' };
+const defaultWeekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const weekdayLabel = (labels, day, weekStartsOn = 0) => (labels ?? defaultWeekdays)[(day + weekStartsOn) % 7] ?? defaultWeekdays[(day + weekStartsOn) % 7];
+const chartNumberFormatter = (formatter) => formatter ?? String;
+const calendarDateFormatter = (formatter) => formatter ?? String;
+const emptyCalendarData = [];
+const emptyFunnelData = [];
+const emptyBoxData = [];
+const DataTable = ({ text, headings, children }) => (_jsxs("details", { className: "ui-chart__data", children: [_jsx("summary", { children: text.viewData }), _jsx("div", { role: "group", tabIndex: 0, "aria-label": text.chartData, children: _jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: headings.map(heading => _jsx("th", { scope: "col", children: heading.label }, heading.id)) }) }), _jsx("tbody", { children: children })] }) })] }));
+export const CalendarHeatmap = ({ data = emptyCalendarData, startDate, endDate, weekStartsOn, domain, formatValue = String, formatDate, weekdayLabels, labels, showTable = true, summary, className, ...props }) => {
+    const dateFormatter = calendarDateFormatter(formatDate);
+    const text = resolveLumenChartLabels(labels);
+    const model = createLumenCalendarHeatmapGeometry(data, { startDate, endDate, weekStartsOn, domain });
+    const format = (value) => value === null ? text.notAvailable : formatValue(value);
+    const available = model.cells.filter(cell => cell.value !== null).length;
+    return (_jsx(Chart, { ...props, className: composeClassName('ui-calendar-heatmap', className), summary: summary ?? (model.valid ? text.formatHeatmapSummary(available) : text.invalidData), children: !model.valid ?
+            _jsx("p", { className: "ui-chart__empty", role: "status", children: text.invalidData }) :
+            (_jsxs(_Fragment, { children: [available === 0 && _jsx("p", { className: "ui-chart__empty", role: "status", children: text.empty }), _jsxs("p", { className: "ui-calendar-heatmap__range", children: [dateFormatter(startDate), ' ', "\u2013", ' ', dateFormatter(endDate)] }), _jsx("div", { className: "ui-calendar-heatmap__plot", role: "group", tabIndex: 0, "aria-label": text.chartData, children: _jsxs("svg", { "aria-hidden": "true", width: model.weekCount * 18 + 36, height: "146", viewBox: `0 0 ${model.weekCount * 18 + 36} 146`, children: [Array.from({ length: 7 }, (_, day) => (_jsx("text", { x: "0", y: day * 18 + 16, className: "ui-calendar-heatmap__weekday", children: weekdayLabel(weekdayLabels, day, weekStartsOn) }, day))), model.cells.map(cell => (_jsxs("g", { children: [_jsx("rect", { className: "\n                        ui-calendar-heatmap__cell ui-chart-tone--series-1\n                      ", "data-missing": cell.value === null ? 'true' : undefined, x: cell.week * 18 + 36, y: cell.day * 18 + 4, width: "14", height: "14", rx: "3", style: { fillOpacity: cell.ratio === null ? 1 : 0.15 + cell.ratio * 0.85 }, children: _jsx("title", { children: `${dateFormatter(cell.date)}: ${format(cell.value)}` }) }), cell.value === null && (_jsx("text", { className: "ui-calendar-heatmap__missing", x: cell.week * 18 + 43, y: cell.day * 18 + 15, textAnchor: "middle", children: "\u00D7" }))] }, cell.date))), model.cells.filter(cell => cell.day === 0 && cell.week % 4 === 0).map(cell => (_jsx("text", { className: "ui-calendar-heatmap__weekday", x: cell.week * 18 + 36, y: "142", children: cell.date.slice(5) }, cell.date)))] }) }), _jsxs("div", { className: "ui-calendar-heatmap__legend", children: [_jsxs("span", { children: [text.low, ":", ' ', formatValue(model.domain.min)] }), _jsxs("span", { children: [text.high, ":", ' ', formatValue(model.domain.max)] }), _jsx("span", { className: "ui-calendar-heatmap__scale", "aria-hidden": "true" }), _jsxs("span", { children: ["\u00D7", text.notAvailable] })] }), !showTable && (_jsx("ul", { className: "ui-sr-only", children: model.cells.map(cell => (_jsxs("li", { children: [dateFormatter(cell.date), ":", ' ', format(cell.value)] }, cell.date))) })), showTable && (_jsx(DataTable, { text: text, headings: [{ id: 'category', label: text.category }, { id: 'value', label: text.value }], children: model.cells.map(cell => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: dateFormatter(cell.date) }), _jsx("td", { children: format(cell.value) })] }, cell.date))) }))] })) }));
+};
+export const FunnelChart = ({ data = emptyFunnelData, formatValue = String, labels, showTable = true, summary, className, ...props }) => {
+    const text = resolveLumenChartLabels(labels);
+    const model = createLumenFunnelGeometry(data);
+    const format = (value) => value === null ? text.notAvailable : formatValue(value);
+    return (_jsx(Chart, { ...props, className: composeClassName('ui-funnel-chart', className), summary: summary ?? (model.valid ? model.rows.map(row => `${row.label}: ${format(row.value)}`).join('. ') : text.invalidData), children: !model.valid || model.rows.length === 0 ?
+            _jsx("p", { className: "ui-chart__empty", role: "status", children: model.valid ? text.empty : text.invalidData }) :
+            (_jsxs(_Fragment, { children: [_jsx("ol", { className: "ui-funnel-chart__rows", children: model.rows.map((row, index) => (_jsxs("li", { className: getLumenChartToneClassName(row.tone, index), children: [_jsxs("div", { className: "ui-funnel-chart__label", children: [_jsx("span", { children: row.label }), _jsx("strong", { children: format(row.value) })] }), _jsx("div", { className: "ui-funnel-chart__track", "aria-hidden": "true", children: row.ratio !== null && (_jsx("span", { className: "ui-funnel-chart__bar", style: { width: `${row.ratio * 100}%` } })) })] }, row.id))) }), showTable && (_jsx(DataTable, { text: text, headings: [{ id: 'category', label: text.category }, { id: 'value', label: text.value }], children: model.rows.map(row => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.label }), _jsx("td", { children: format(row.value) })] }, row.id))) }))] })) }));
+};
+export const BoxPlot = ({ data = emptyBoxData, domain, statisticLabels, formatValue: suppliedFormatValue, labels, showTable = true, summary, className, ...props }) => {
+    const formatValue = chartNumberFormatter(suppliedFormatValue);
+    const text = resolveLumenChartLabels(labels);
+    const stats = { ...defaultStatistics, ...statisticLabels };
+    const model = createLumenBoxPlotGeometry(data, { domain });
+    const format = (value) => value === null ? text.notAvailable : formatValue(value);
+    const statistics = ['min', 'q1', 'median', 'q3', 'max'];
+    const exactRows = model.rows.map(row => ({
+        id: row.id,
+        label: `${row.label}: ${statistics.map(key => `${stats[key]}: ${format(row[key])}`).join(', ')}. ${stats.outliers}: ${(row.outliers ?? []).map(formatValue).join(', ') || '—'}`
+    }));
+    return (_jsx(Chart, { ...props, className: composeClassName('ui-box-plot', className), summary: summary ?? (model.valid ? exactRows.map(row => row.label).join('. ') : text.invalidData), children: !model.valid || model.rows.length === 0 ?
+            _jsx("p", { className: "ui-chart__empty", role: "status", children: model.valid ? text.empty : text.invalidData }) :
+            (_jsxs(_Fragment, { children: [_jsx("ul", { className: "ui-box-plot__rows", children: model.rows.map((row, index) => (_jsxs("li", { className: getLumenChartToneClassName(row.tone, index), children: [_jsxs("div", { className: "ui-box-plot__label", children: [_jsx("span", { children: row.label }), _jsxs("strong", { children: [stats.median, ":", ' ', format(row.median)] })] }), _jsxs("div", { className: "ui-box-plot__track", "aria-hidden": "true", children: [row.minPosition !== null && row.maxPosition !== null && (_jsx("span", { className: "ui-box-plot__whisker", style: { left: `${row.minPosition * 100}%`, width: `${(row.maxPosition - row.minPosition) * 100}%` } })), row.q1Position !== null && row.q3Position !== null && (_jsx("span", { className: "ui-box-plot__box", style: { left: `${row.q1Position * 100}%`, width: `${(row.q3Position - row.q1Position) * 100}%` } })), row.medianPosition !== null && (_jsx("span", { className: "ui-box-plot__median", style: { left: `${row.medianPosition * 100}%` } })), [{ id: 'min', position: row.minPosition }, { id: 'max', position: row.maxPosition }].map(({ position, id }) => position !== null && (_jsx("span", { className: "ui-box-plot__cap", style: { left: `${position * 100}%` } }, id))), Array.from(new Set(row.outlierPositions)).map(position => (_jsx("span", { className: "ui-box-plot__outlier", style: { left: `${position * 100}%` } }, position)))] })] }, row.id))) }), _jsx("div", { className: "ui-bullet-chart__ticks", "aria-hidden": "true", children: model.ticks.map(tick => _jsx("span", { children: formatValue(tick) }, tick)) }), !showTable && _jsx("ul", { className: "ui-sr-only", children: exactRows.map(row => _jsx("li", { children: row.label }, row.id)) }), showTable && (_jsx(DataTable, { text: text, headings: [{ id: 'category', label: text.category }, ...statistics.map(key => ({ id: key, label: stats[key] })), { id: 'outliers', label: stats.outliers }], children: model.rows.map(row => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.label }), statistics.map(key => _jsx("td", { children: format(row[key]) }, key)), _jsx("td", { children: (row.outliers ?? []).map(formatValue).join(', ') || '—' })] }, row.id))) }))] })) }));
+};

package/dist/floating-panel.d.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from 'react';
+export interface FloatingPanelOptions {
+    /** Logical alignment follows the trigger's inherited text direction. */
+    placement?: 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start' | undefined;
+    offset?: number | undefined;
+    collisionPadding?: number | undefined;
+    /** Disable placement when an application owns a specialized panel layout. */
+    positioning?: 'anchored' | 'none' | undefined;
+}
+export declare const useFloatingPanel: (open: boolean, triggerRef: RefObject<HTMLElement | null>, panelRef: RefObject<HTMLElement | null>, close: () => void, { placement, offset, collisionPadding, positioning }: FloatingPanelOptions) => void;
+//# sourceMappingURL=floating-panel.d.ts.map

package/dist/floating-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-panel.d.ts","sourceRoot":"","sources":["../src/floating-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,WAAW,oBAAoB;IACnC,wEAAwE;IACxE,SAAS,CAAC,EAAE,YAAY,GAAG,cAAc,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAA;IAC/E,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,gBAAgB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,6EAA6E;IAC7E,WAAW,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAAA;CAC9C;AAgND,eAAO,MAAM,gBAAgB,GAC3B,MAAM,OAAO,EACb,YAAY,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACzC,UAAU,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACvC,OAAO,MAAM,IAAI,EACjB,sDAAoF,oBAAoB,KACvG,IA4BF,CAAA"}

package/dist/floating-panel.js

@@ -0,0 +1 @@
+import{useEffect,useLayoutEffect,useRef}from"react";const finiteDistance=(value,fallback)=>value===void 0||!Number.isFinite(value)?fallback:Math.max(0,value),clamp=(value,minimum,maximum)=>{const upperBound=Math.max(minimum,maximum);return Math.max(minimum,Math.min(value,upperBound))},styleKeys=["box-sizing","position","inset","left","top","right","bottom","margin","max-width","max-height","overflow-y"],viewportBounds=({view,padding})=>{const viewport=view.visualViewport,left=(viewport?.offsetLeft??0)+padding,top=(viewport?.offsetTop??0)+padding,width=Math.max(0,(viewport?.width??view.innerWidth)-padding*2),height=Math.max(0,(viewport?.height??view.innerHeight)-padding*2);return{left,top,width,height,right:left+width,bottom:top+height}},shouldPlaceBelow=(placement,above,below,height)=>placement.startsWith("bottom")?below>=height||below>=above:!(above>=height||above>=below),positionPanel=context=>{const{panel,trigger,view,placement,gap}=context,viewport=viewportBounds(context),anchor=trigger.getBoundingClientRect();panel.style.boxSizing="border-box",panel.style.position="fixed",panel.style.inset="auto",panel.style.margin="0",panel.style.maxWidth=`${viewport.width}px`,panel.style.maxHeight=`${viewport.height}px`,panel.style.overflowY="auto";const below=Math.max(0,viewport.bottom-anchor.bottom-gap),above=Math.max(0,anchor.top-viewport.top-gap),placeBelow=shouldPlaceBelow(placement,above,below,panel.getBoundingClientRect().height),availableHeight=placeBelow?below:above;panel.style.maxHeight=`${Math.min(viewport.height,availableHeight||viewport.height)}px`;const bounds=panel.getBoundingClientRect(),rtl=view.getComputedStyle(trigger).direction==="rtl",x=placement.endsWith("end")!==rtl?anchor.right-bounds.width:anchor.left,y=placeBelow?anchor.bottom+gap:anchor.top-bounds.height-gap,alignment=placement.endsWith("end")?"end":"start";panel.style.left=`${clamp(x,viewport.left,viewport.right-bounds.width)}px`,panel.style.top=`${clamp(y,viewport.top,viewport.bottom-bounds.height)}px`,panel.dataset.placement=`${placeBelow?"bottom":"top"}-${alignment}`},observePosition=(context,close)=>{const{panel,trigger,view}=context,document=panel.ownerDocument,NodeType=document.defaultView?.Node,position=()=>{positionPanel(context)},focusOutside=event=>{NodeType&&event.target instanceof NodeType&&!panel.contains(event.target)&&!trigger.contains(event.target)&&close()},scroll=event=>{(!(NodeType&&event.target instanceof NodeType)||!panel.contains(event.target))&&position()},observer=typeof ResizeObserver=="function"?new ResizeObserver(position):void 0;return observer?.observe(trigger),observer?.observe(panel),document.addEventListener("focusin",focusOutside),document.addEventListener("scroll",scroll,!0),view.addEventListener("resize",position),view.visualViewport?.addEventListener("resize",position),view.visualViewport?.addEventListener("scroll",position),()=>{observer?.disconnect(),document.removeEventListener("focusin",focusOutside),document.removeEventListener("scroll",scroll,!0),view.removeEventListener("resize",position),view.visualViewport?.removeEventListener("resize",position),view.visualViewport?.removeEventListener("scroll",position)}},restoreExternalFocus=(owner,focused)=>{const ElementType=owner.defaultView?.HTMLElement;ElementType&&focused instanceof ElementType&&focused.isConnected&&owner.activeElement!==focused&&focused.focus({preventScroll:!0})},restoreFocus=(panel,trigger,topLayer)=>{const document=panel.ownerDocument,focused=document.activeElement,ownedFocus=focused!==null&&panel.contains(focused);topLayer&&panel.matches(":popover-open")&&panel.hidePopover(),ownedFocus&&trigger.isConnected&&trigger.focus({preventScroll:!0}),ownedFocus||restoreExternalFocus(document,focused)},restoreAttribute=(panel,name,value)=>{value===null?panel.removeAttribute(name):panel.setAttribute(name,value)},connectPanel=(context,close)=>{const{panel,trigger}=context,previousPopover=panel.getAttribute("popover"),previousPlacement=panel.getAttribute("data-placement"),previousStyles=styleKeys.map(key=>[key,panel.style.getPropertyValue(key),panel.style.getPropertyPriority(key)]),topLayer=typeof panel.showPopover=="function";panel.hidden=!1,topLayer&&(panel.setAttribute("popover","manual"),panel.showPopover()),positionPanel(context),panel.querySelector('[role="menuitem"]:not(:disabled):not([aria-disabled="true"])')?.focus({preventScroll:!0});const stopObserving=observePosition(context,close);return()=>{stopObserving(),restoreFocus(panel,trigger,topLayer),restoreAttribute(panel,"popover",previousPopover),restoreAttribute(panel,"data-placement",previousPlacement);for(const[key,value,priority]of previousStyles)value?panel.style.setProperty(key,value,priority):panel.style.removeProperty(key)}},useFloatingPanel=(open,triggerRef,panelRef,close,{placement="bottom-start",offset,collisionPadding,positioning="anchored"})=>{const closeRef=useRef(close);useLayoutEffect(()=>{closeRef.current=close},[close]),useEffect(()=>{const panel=panelRef.current,trigger=triggerRef.current;if(!open||positioning==="none"||!panel||!trigger)return;const view=panel.ownerDocument.defaultView;if(view)return connectPanel({panel,trigger,view,placement,gap:finiteDistance(offset,6),padding:finiteDistance(collisionPadding,8)},()=>{closeRef.current()})},[open,positioning,placement,offset,collisionPadding,triggerRef,panelRef])};export{useFloatingPanel};

package/dist/form-workflow.d.ts

@@ -0,0 +1,77 @@
+import type { RefObject, SyntheticEvent } from 'react';
+export type LumenFormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export interface LumenFormIssue {
+    name: string;
+    controlId: string;
+    message: string;
+    label?: string;
+}
+export declare const isLumenFormControl: (element: EventTarget) => element is LumenFormControl;
+export interface LumenFormWorkflowOptions {
+    getControlName?: (control: LumenFormControl) => string;
+    validateControl?: (control: LumenFormControl) => string;
+    validateValues?: (form: HTMLFormElement) => readonly LumenFormIssue[];
+    /** Map a changed field name to the other field names that need validation. */
+    dependencies?: Readonly<Record<string, readonly string[]>>;
+}
+export interface LumenFormWorkflow {
+    formRef: RefObject<HTMLFormElement | null>;
+    errors: readonly LumenFormIssue[];
+    dirty: boolean;
+    attempted: boolean;
+    validate: (form?: HTMLFormElement | null, names?: readonly string[]) => boolean;
+    refresh: (form?: HTMLFormElement | null, changedName?: string) => void;
+    setErrors: (errors: readonly LumenFormIssue[]) => void;
+    markSaved: () => void;
+    formProps: {
+        ref: RefObject<HTMLFormElement | null>;
+        noValidate: true;
+        onBlur: (event: SyntheticEvent<HTMLFormElement>) => void;
+        onChange: (event: SyntheticEvent<HTMLFormElement>) => void;
+        onInput: (event: SyntheticEvent<HTMLFormElement>) => void;
+        onReset: (event: SyntheticEvent<HTMLFormElement>) => void;
+    };
+}
+/** Validation and edit state; schemas, requests, draft storage and business policy remain application-owned. */
+export declare const useLumenFormWorkflow: ({ getControlName, validateControl, validateValues, dependencies }?: LumenFormWorkflowOptions) => LumenFormWorkflow;
+export interface LumenFieldArrayItem<Value> {
+    id: string;
+    value: Value;
+}
+/** Stable row identity survives insertions, removals and reordering. */
+export declare const useLumenFieldArray: <Value>(initialValues?: readonly Value[]) => {
+    items: LumenFieldArrayItem<Value>[];
+    append: (value: Value) => string;
+    remove: (id: string) => void;
+    update: (id: string, value: Value) => void;
+    move: (id: string, offset: number) => void;
+};
+/** A failed or superseded check cannot replace the newest result. */
+export declare const useLumenAsyncCheck: <Value, Result>(check: (value: Value, signal: AbortSignal) => Promise<Result>) => {
+    state: {
+        status: "idle" | "pending";
+    } | {
+        status: "success";
+        result: Result;
+    } | {
+        status: "error";
+        error: unknown;
+    };
+    run: (value: Value) => Promise<Result | undefined>;
+    cancel: () => void;
+};
+/** Steps remain application-defined and validate before advancing. */
+export declare const useLumenFormSteps: (steps: readonly {
+    id: string;
+    fields: readonly string[];
+}[], validate: (names: readonly string[]) => boolean) => {
+    activeId: string;
+    index: number;
+    goTo: (id: string) => boolean;
+    next: () => boolean;
+    previous: () => boolean;
+};
+/** Prompt on reload/close; application routers and dialogs should use the same dirty state. */
+export declare const useLumenBeforeUnload: (dirty: boolean) => void;
+export { type LumenReviewResult, type LumenReviewStatus, type LumenReviewWorkflowOptions, useLumenReviewWorkflow } from './review-workflow.js';
+//# sourceMappingURL=form-workflow.d.ts.map