@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/radio-group/parts.jsx

@@ -0,0 +1,425 @@
+// Ported from react-aria-components `RadioGroup` / `Radio` / `RadioField` / `RadioButton` (packages/react-aria-components/src/RadioGroup.tsx)
+// + react-aria `useRadioGroup` / `useRadio` (packages/react-aria/src/radio/*), Apache-2.0, © Adobe.
+// The RAC compound API: `<RadioGroup><Label/><RadioField value><RadioButton>…</RadioButton><Text slot="description"/></RadioField>
+// <Text slot="description"/><FieldError/></RadioGroup>` (and the deprecated all-in-one `<Radio value>`). `RadioGroup` (index.tsx) takes this
+// path when it has no `items` (the data-driven preset).
+// Rivet:
+// - render props are accessors (`({ isSelected }) => (isSelected() ? … : …)`); `class` / `style` may be functions of them; state `data-*`
+//   attributes are bindings.
+// - Native radios sharing the group `name` keep arrow keys (wrap, skip disabled, select on arrow), the single tab stop and form submission
+//   native (zero JS, as the items preset): RA's JS roving tab index / arrow handler is not ported. Label activation is the native label
+//   click (RA: a label press handler); the press state comes from `pressProps` on the label + input (no action).
+// - the native input sits in an inline-styled visually hidden span (RA `VisuallyHidden`).
+// - RA `radioGroupData` (module WeakMap) → `state.data` (serializes with the state).
+// - Contexts are resumable (`rv-radio-group`, `rv-radio`, `rv-radio-field`, `rv-radio-group-state`, `rv-radio-internal`).
+// `render` (RAC DOMRenderProps): given, the attributes go to `render(attrs, <part>RenderProps)` instead of the default element (RadioGroup /
+// RadioField `<div>`, RadioButton / Radio `<label>` with the hidden input inside `children`). Deviations: `inputRef` is a Rivet `ref()`
+// (or callback).
+import { probeSlots, slotProbing } from "#server";
+import { createContext, untrack, useContext } from "@rivetjs/reactivity";
+import { createId } from "@rivetjs/cdk/id";
+import { displayValidation, read } from "../state/form-validation.js";
+import { createRadioGroupState, isRadioGroupDisabled, isRadioGroupReadOnly, isRadioGroupRequired, } from "../state/radio-group.js";
+import { hasLive, liveAssign, liveOmit, liveOptions } from "../utils/live.jsx";
+import { formValidationBehavior, formValidationErrors } from "../form/index.jsx";
+import { validityError } from "../form/behaviour.js";
+import { FieldErrorContext } from "../form/field-error.jsx";
+import { LabelContext } from "../label/index.jsx";
+import { fieldProps } from "../label/behaviour.js";
+import { TextContext } from "../text/index.jsx";
+import { visuallyHidden } from "../a11y/index.js";
+import { useFocusRing } from "../focus/focus-ring.jsx";
+import { hoverProps } from "../interactions/hover.jsx";
+import { pressProps } from "../interactions/press.jsx";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { mergeInputRefs } from "../checkbox/behaviour.jsx";
+import { SharedElementTransition } from "../shared-element-transition/transition.jsx";
+import { SelectionIndicatorContext } from "../selection-indicator/context.js";
+import { Provider, resumableContext, contextProps, createSlot, createSlotId, slotIdRef, renderPropsOf, } from "../slots/index.jsx";
+import { radioChange, radioFocus, radioGroupFocusOut, radioInvalid } from "./behaviour.js";
+/** RAC `RadioGroupContext`. */
+export const RadioGroupContext = resumableContext(createContext(null, { id: "rv-radio-group" }));
+/** RAC `RadioContext`. */
+export const RadioContext = resumableContext(createContext(null, { id: "rv-radio" }));
+/** RAC `RadioFieldContext`. */
+export const RadioFieldContext = resumableContext(createContext(null, { id: "rv-radio-field" }));
+/** RAC `RadioGroupStateContext`. */
+export const RadioGroupStateContext = resumableContext(createContext(null, { id: "rv-radio-group-state" }));
+const DOM_OWNED = ["style", "onClick", "render", "id"];
+/** Live by default (LIVE-SWEEP): flags, `orientation` (attributes only: arrow keys move in both axes) and the
+ *  aria-description props; read once: `id`, `name`, `form`, `aria-label` / `aria-labelledby`, `defaultValue`,
+ *  `validationBehavior`, `validate`, handlers. */
+const GROUP_LIVE = ["isDisabled", "isReadOnly", "isRequired", "isInvalid", "orientation", "aria-describedby", "aria-details", "aria-errormessage"];
+/** `true | undefined` of a live state flag (a returned arrow: resumable). */
+function liveFlag(read) {
+    return () => read() || undefined;
+}
+/** `"true" | undefined` of a live state flag (a returned arrow: resumable). */
+function liveAria(read) {
+    return () => (read() ? "true" : undefined);
+}
+/** A group flag as an attribute value: the creation value, or an accessor while the flag is live. */
+function groupDisabled(state) {
+    return state.disabled ? disabledReader(state) : state.isDisabled;
+}
+function groupReadOnly(state) {
+    return state.readOnly ? readOnlyReader(state) : state.isReadOnly;
+}
+// Returned arrows (resumable; a conditional bare arrow is not).
+function disabledReader(state) {
+    return () => isRadioGroupDisabled(state);
+}
+function readOnlyReader(state) {
+    return () => isRadioGroupReadOnly(state);
+}
+function groupRequired(state) {
+    return state.required ? requiredReader(state) : state.isRequired;
+}
+function requiredReader(state) {
+    return () => isRadioGroupRequired(state);
+}
+const flagAttr = (flag) => (typeof flag === "function" ? liveFlag(flag) : flag || undefined);
+const flagAria = (flag) => (typeof flag === "function" ? liveAria(flag) : flag ? "true" : undefined);
+/** The compound `RadioGroup` (RAC). */
+/** A live `orientation` with its default (a returned arrow: resumable). */
+function liveOrientation(orientation) {
+    return () => orientation() ?? "vertical";
+}
+export function RadioGroupParts(props) {
+    // Live props (P5): `isDisabled` / `isReadOnly` / `isInvalid` and a controlled `value` stay live (accessors into the state), class / style /
+    // children from a live view; the rest of the body is read once (untracked).
+    return untrack(() => radioGroupParts(props));
+}
+function radioGroupParts(props) {
+    // Inside another field's server slot probe (`probeSlots`): this field's subtree holds none of that field's slots.
+    if (slotProbing)
+        return null;
+    const [ctxMerged, ref] = contextProps(props, props.ref, RadioGroupContext);
+    const merged = hasLive(ctxMerged) ? liveOptions(ctxMerged, GROUP_LIVE, ["value"]) : ctxMerged;
+    const validationBehavior = formValidationBehavior(merged.validationBehavior);
+    const isRequired = (merged.isRequired ?? false);
+    const state = createRadioGroupState({
+        value: merged.value,
+        defaultValue: merged.defaultValue,
+        onChange: merged.onChange,
+        name: merged.name,
+        isDisabled: merged.isDisabled,
+        isReadOnly: merged.isReadOnly,
+        isRequired,
+        isInvalid: merged.isInvalid,
+        validate: merged.validate,
+        validationBehavior,
+        validationErrors: formValidationErrors(),
+    });
+    const isDisabled = groupDisabled(state), isReadOnly = groupReadOnly(state);
+    const initialLabel = !merged["aria-label"] && !merged["aria-labelledby"];
+    const [labelRef, hasLabel] = createSlot(initialLabel);
+    const id = merged.id ?? createId();
+    // Radio group is not an HTML input element so it shouldn't be labeled by a <label> element.
+    const ids = fieldProps({
+        id,
+        label: initialLabel,
+        labelElementType: "span",
+        "aria-label": merged["aria-label"],
+        "aria-labelledby": merged["aria-labelledby"],
+    });
+    const isInvalid = () => displayValidation(state.validation).isInvalid;
+    const descriptionId = createSlotId(id + "-description");
+    const errorMessageId = createSlotId(ids.errorMessageId, isInvalid);
+    state.data = { form: merged.form, descriptionId, errorMessageId, validationBehavior };
+    const orientationProp = merged.orientation;
+    // A live `orientation` (accessor) goes into the spread bags as a returned arrow; static: the value.
+    const orientation = typeof orientationProp === "function" ? liveOrientation(orientationProp) : (orientationProp ?? "vertical");
+    const labelledBy = ids.fieldProps["aria-labelledby"];
+    const ownLabelledBy = merged["aria-labelledby"];
+    const extraDescribedBy = merged["aria-describedby"];
+    const { onFocus, onBlur, onFocusChange } = merged;
+    const groupProps = {
+        id,
+        role: "radiogroup",
+        "aria-orientation": orientation,
+        "aria-invalid": () => (isInvalid() ? "true" : undefined),
+        "aria-errormessage": merged["aria-errormessage"],
+        "aria-disabled": flagAria(isDisabled),
+        "aria-readonly": flagAria(isReadOnly),
+        "aria-required": flagAria(groupRequired(state)),
+        "data-disabled": flagAttr(isDisabled),
+        "data-readonly": flagAttr(isReadOnly),
+        "aria-label": ids.fieldProps["aria-label"],
+        "aria-labelledby": () => (initialLabel && hasLabel() ? labelledBy : initialLabel ? ownLabelledBy : labelledBy),
+        "aria-describedby": () => [slotIdRef(descriptionId, false), slotIdRef(errorMessageId, isInvalid()), read(extraDescribedBy)].filter(Boolean).join(" ") || undefined,
+        "aria-details": merged["aria-details"],
+        onFocusIn: (event) => {
+            if (!(onFocus || onFocusChange))
+                return;
+            const group = event.currentTarget;
+            if (group.contains(event.relatedTarget))
+                return;
+            onFocus?.(event);
+            onFocusChange?.(true);
+        },
+        onFocusOut: (event) => {
+            radioGroupFocusOut(state, event);
+            if (!(onBlur || onFocusChange) || event.currentTarget.contains(event.relatedTarget))
+                return;
+            onBlur?.(event);
+            onFocusChange?.(false);
+        },
+    };
+    const groupValues = {
+        orientation: () => read(orientation),
+        isDisabled: () => isRadioGroupDisabled(state),
+        isReadOnly: () => isRadioGroupReadOnly(state),
+        isRequired: () => isRadioGroupRequired(state),
+        isInvalid,
+        state,
+    };
+    const rp = renderPropsOf(merged, { values: groupValues, defaultClassName: "rv-RadioGroup" });
+    // Object-literal function value (a resumable symbol; a provider entry holding a plain local arrow is dropped on re-creation).
+    const fieldError = {
+        validation: () => displayValidation(state.validation),
+    };
+    const dom = mergeProps(globalDOMProps(merged, ["style", "render", "id"]), groupProps);
+    const slot = merged.slot || undefined;
+    const values = [
+        [RadioGroupStateContext, state],
+        [LabelContext, { ...ids.labelProps, ref: labelRef, elementType: "span" }],
+        [TextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorMessageId } } }],
+        [FieldErrorContext, fieldError.validation],
+    ];
+    // Rivet (server): inputs render before the Description / FieldError: probe which slotted parts render (as Select).
+    if (typeof document === "undefined")
+        probeSlots(values, () => rp.children());
+    if (merged.render)
+        return merged.render({
+            ...dom,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-orientation": orientation,
+            "data-invalid": () => isInvalid() || undefined,
+            "data-required": () => isRadioGroupRequired(state) || undefined,
+            children: () => (<Provider values={values}>
+            <SharedElementTransition>{rp.children()}</SharedElementTransition>
+          </Provider>),
+        }, groupValues);
+    return (<div {...dom} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-orientation={read(orientation)} data-invalid={isInvalid() || undefined} data-required={isRadioGroupRequired(state) || undefined}>
+      <Provider values={values}>
+        <SharedElementTransition>{rp.children()}</SharedElementTransition>
+      </Provider>
+    </div>);
+}
+/** RA `useRadio`: the label / input bags of one radio of `state`. */
+export function radioProps(props, state, inputRef) {
+    const { value, onPressStart, onPressEnd, onPressChange, onPress, onPressUp } = props;
+    const isDisabledProp = props.isDisabled;
+    const isDisabled = () => !!read(isDisabledProp) || isRadioGroupDisabled(state);
+    const isSelected = () => state.selectedValue() === value;
+    const data = state.data;
+    const validationBehavior = data?.validationBehavior ?? state.validation.behavior;
+    const isInvalid = () => displayValidation(state.validation).isInvalid;
+    // Handle press state for keyboard interactions and cases where labelProps is not used.
+    const { pressProps: inputPress, isPressed: inputPressed } = pressProps({ onPressStart, onPressEnd, onPressChange, onPress, onPressUp, isDisabled });
+    // Handle press state on the label (selection itself is the native label activation).
+    const { pressProps: labelPress, isPressed: labelPressed } = pressProps({ onPressStart, onPressEnd, onPressChange, onPress, onPressUp, isDisabled });
+    const inputId = props.id;
+    const descriptionId = createSlotId(inputId ? inputId + "-description" : undefined);
+    const ownDescribedBy = props["aria-describedby"];
+    const { onFocus, onBlur, onFocusChange, onKeyDown, onKeyUp } = props;
+    const inputProps = mergeProps({
+        id: inputId,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-details": props["aria-details"],
+    }, {
+        ref: inputRef,
+        type: "radio",
+        name: state.name,
+        form: data?.form,
+        value,
+        checked: isSelected,
+        disabled: () => isDisabled() || undefined,
+        required: validationBehavior !== "native" ? undefined : state.required ? liveFlag(requiredReader(state)) : state.isRequired || undefined,
+        "aria-describedby": () => [slotIdRef(descriptionId, false), ownDescribedBy, isInvalid() ? slotIdRef(data?.errorMessageId) : null, slotIdRef(data?.descriptionId, false)]
+            .filter(Boolean)
+            .join(" ") || undefined,
+        "data-rv-error": () => validityError(state.validation),
+        onChange: (event) => radioChange(state, value, event),
+        onFocus: (event) => {
+            radioFocus(state, value, event);
+            onFocus?.(event);
+            onFocusChange?.(true);
+        },
+        onBlur: (event) => {
+            onBlur?.(event);
+            onFocusChange?.(false);
+        },
+        onKeyDown: (event) => onKeyDown?.(event),
+        onKeyUp: (event) => onKeyUp?.(event),
+        onInvalid: (event) => radioInvalid(state, event),
+    }, inputPress);
+    return {
+        // Prevent label from being focused when mouse down on it (the click still focuses the input).
+        labelProps: mergeProps(labelPress, { onMouseDown: (e) => e.preventDefault() }),
+        inputProps,
+        descriptionProps: { id: descriptionId },
+        isSelected,
+        isPressed: () => inputPressed() || labelPressed(),
+        isDisabled,
+    };
+}
+const InternalRadioContext = resumableContext(createContext(null, { id: "rv-radio-internal" }));
+/**
+ * A RadioField represents an individual option within a radio group, containing a RadioButton and optional description.
+ */
+export function RadioField(props) {
+    // Live props (P5): `isDisabled` stays live, class / style / children from a live view; the rest is read once.
+    return untrack(() => radioField(props));
+}
+/** A radio's own props for `radioProps`: a live `isDisabled` becomes an accessor; `children` only says whether there is a label. */
+function ownRadioProps(merged) {
+    if (!hasLive(merged))
+        return { ...merged, children: typeof merged.children === "function" ? true : merged.children };
+    const own = liveOptions(merged, ["isDisabled"]);
+    return liveAssign(own, { children: typeof merged.children === "function" ? true : merged.children === undefined ? undefined : true });
+}
+function radioField(props) {
+    // Inside another field's server slot probe (`probeSlots`): this field's subtree holds none of that field's slots.
+    if (slotProbing)
+        return null;
+    const userInputRef = props.inputRef;
+    const otherProps = hasLive(props) ? liveOmit(props, ["inputRef"]) : (({ inputRef: _, ...rest }) => rest)(props);
+    const [merged, ref] = contextProps(otherProps, props.ref, RadioFieldContext);
+    const state = useContext(RadioGroupStateContext);
+    const inputRef = mergeInputRefs(userInputRef, merged.inputRef);
+    const aria = radioProps(ownRadioProps(merged), state, inputRef);
+    const { descriptionProps, isSelected, isDisabled } = aria;
+    const isInvalid = () => displayValidation(state.validation).isInvalid;
+    const fieldValues = {
+        isSelected,
+        isDisabled,
+        isReadOnly: () => isRadioGroupReadOnly(state),
+        isInvalid,
+        isRequired: () => isRadioGroupRequired(state),
+    };
+    const rp = renderPropsOf(merged, { defaultClassName: "rv-RadioField", values: fieldValues });
+    // `data-readonly` through the spread: an accessor while the group's `isReadOnly` is live.
+    const dom = liveAssign(globalDOMProps(merged, DOM_OWNED), { "data-readonly": flagAttr(groupReadOnly(state)) });
+    const slot = merged.slot || undefined;
+    const selection = { isSelected };
+    const values = [
+        [SelectionIndicatorContext, selection],
+        [InternalRadioContext, { ...aria, inputRef, defaultClassName: "rv-RadioButton" }],
+        [TextContext, { slots: { description: descriptionProps } }],
+    ];
+    // Rivet (server): inputs render before the Description / FieldError: probe which slotted parts render (as Select).
+    if (typeof document === "undefined")
+        probeSlots(values, () => rp.children());
+    if (merged.render)
+        return merged.render({
+            ...dom,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-selected": () => isSelected() || undefined,
+            "data-disabled": () => isDisabled() || undefined,
+            "data-invalid": () => isInvalid() || undefined,
+            "data-required": () => isRadioGroupRequired(state) || undefined,
+            children: () => <Provider values={values}>{rp.children()}</Provider>,
+        }, fieldValues);
+    return (<div {...dom} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-selected={isSelected() || undefined} data-disabled={isDisabled() || undefined} data-invalid={isInvalid() || undefined} data-required={isRadioGroupRequired(state) || undefined}>
+      <Provider values={values}>{rp.children()}</Provider>
+    </div>);
+}
+/**
+ * A radio represents an individual option within a radio group.
+ *
+ * @deprecated Use RadioField + RadioButton instead.
+ */
+export function Radio(props) {
+    // Live props (P5): as RadioField; the button renders by a direct call (a component spread of a live props object
+    // re-created the region on a resumed page: see checkbox/CLAUDE.md).
+    return untrack(() => radio(props));
+}
+function radio(props) {
+    const userInputRef = props.inputRef;
+    const otherProps = hasLive(props) ? liveOmit(props, ["inputRef"]) : (({ inputRef: _, ...rest }) => rest)(props);
+    const [merged, ref] = contextProps(otherProps, props.ref, RadioContext);
+    const state = useContext(RadioGroupStateContext);
+    const inputRef = mergeInputRefs(userInputRef, merged.inputRef);
+    const aria = radioProps(ownRadioProps(merged), state, inputRef);
+    const value = { ...aria, inputRef, defaultClassName: "rv-Radio" };
+    const button = liveAssign(merged, { ref });
+    const selection = { isSelected: aria.isSelected };
+    return (<Provider values={[
+            [InternalRadioContext, value],
+            [SelectionIndicatorContext, selection],
+        ]}>
+      {untrack(() => RadioButton(button))}
+    </Provider>);
+}
+/**
+ * A RadioButton is the clickable area of a radio, including the indicator and label.
+ */
+export function RadioButton(props) {
+    // Live props (P5): class / style / children from a live view; the rest is read once (untracked).
+    return untrack(() => radioButton(props));
+}
+function radioButton(props) {
+    const { labelProps, inputProps, isSelected, isDisabled, isPressed, defaultClassName, inputRef } = useContext(InternalRadioContext);
+    const state = useContext(RadioGroupStateContext);
+    const buttonRef = props.ref;
+    const { isFocused, isFocusVisible, focusProps } = useFocusRing();
+    const interactionDisabled = () => isDisabled() || isRadioGroupReadOnly(state);
+    const { onHoverStart, onHoverEnd, onHoverChange } = props;
+    const { hoverProps: hover, isHovered } = hoverProps({ onHoverStart, onHoverEnd, onHoverChange, isDisabled: interactionDisabled }, props);
+    const isInvalid = () => displayValidation(state.validation).isInvalid;
+    const buttonValues = {
+        isSelected,
+        isPressed,
+        isHovered,
+        isFocused,
+        isFocusVisible,
+        isDisabled,
+        isReadOnly: () => isRadioGroupReadOnly(state),
+        isInvalid,
+        isRequired: () => isRadioGroupRequired(state),
+    };
+    const rp = renderPropsOf(props, { defaultClassName, values: buttonValues });
+    // `data-readonly` through the spread: an accessor while the group's `isReadOnly` is live.
+    const dom = mergeProps(globalDOMProps(props, DOM_OWNED), labelProps, hover, { "data-readonly": flagAttr(groupReadOnly(state)) });
+    const input = mergeProps(inputProps, focusProps);
+    const slot = props.slot || undefined;
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: buttonRef,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-selected": () => isSelected() || undefined,
+            "data-pressed": () => isPressed() || undefined,
+            "data-hovered": () => isHovered() || undefined,
+            "data-focused": () => isFocused() || undefined,
+            "data-focus-visible": () => isFocusVisible() || undefined,
+            "data-disabled": () => isDisabled() || undefined,
+            "data-invalid": () => isInvalid() || undefined,
+            "data-required": () => isRadioGroupRequired(state) || undefined,
+            children: () => (<>
+            <span style={visuallyHidden}>
+              <input {...input} ref={inputRef}/>
+            </span>
+            {rp.children()}
+          </>),
+        }, buttonValues);
+    return (<label {...dom} ref={buttonRef} class={rp.class()} style={rp.style()} slot={slot} data-selected={isSelected() || undefined} data-pressed={isPressed() || undefined} data-hovered={isHovered() || undefined} data-focused={isFocused() || undefined} data-focus-visible={isFocusVisible() || undefined} data-disabled={isDisabled() || undefined} data-invalid={isInvalid() || undefined} data-required={isRadioGroupRequired(state) || undefined}>
+      <span style={visuallyHidden}>
+        <input {...input} ref={inputRef}/>
+      </span>
+      {rp.children()}
+    </label>);
+}

package/range-calendar/behaviour.d.ts

@@ -0,0 +1,2 @@
+export { rangeCalendarProps, rangeCalendarFocusOut, calendarGridProps, calendarCellProps, calendarHeadingProps, calendarMonthPickerProps, calendarYearPickerProps, calendarPreviousPress, calendarNextPress, calendarGridKeyDown, calendarGridFocusIn, calendarGridFocusOut, calendarGridMouseDown, calendarGridPointerDown, calendarGridPointerUp, calendarGridPointerOver, calendarGridPointerOut, calendarGridClick, calendarGridContextMenu, selectedDateDescription, visibleRangeDescription, } from "../calendar/behaviour.jsx";
+export type { AriaCalendarLabelProps, CalendarAria, AriaCalendarCellProps, CalendarCellAria, AriaCalendarGridProps, CalendarGridAria, } from "../calendar/behaviour.jsx";

package/range-calendar/behaviour.jsx

@@ -0,0 +1,5 @@
+// Ported from react-aria (react-spectrum) src/calendar/useRangeCalendar.ts, Apache-2.0, © Adobe.
+// Rivet: useRangeCalendar shares useCalendarBase with useCalendar (`../calendar/behaviour.tsx`):
+// `rangeCalendarProps(props, state)` + `rangeCalendarFocusOut` (commit on blur) and the grid's range
+// press / drag handlers live there; this entry re-exports them.
+export { rangeCalendarProps, rangeCalendarFocusOut, calendarGridProps, calendarCellProps, calendarHeadingProps, calendarMonthPickerProps, calendarYearPickerProps, calendarPreviousPress, calendarNextPress, calendarGridKeyDown, calendarGridFocusIn, calendarGridFocusOut, calendarGridMouseDown, calendarGridPointerDown, calendarGridPointerUp, calendarGridPointerOver, calendarGridPointerOut, calendarGridClick, calendarGridContextMenu, selectedDateDescription, visibleRangeDescription, } from "../calendar/behaviour.jsx";

package/range-calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { RangeCalendar, RangeCalendarContext, RangeCalendarStateContext, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, CalendarHeading, CalendarMonthPicker, CalendarYearPicker, type RangeCalendarProps, type RangeCalendarRenderProps, type CalendarCellProps, type CalendarCellRenderProps, type CalendarGridProps, type CalendarGridHeaderProps, type CalendarHeaderCellProps, type CalendarGridBodyProps, type CalendarHeadingProps, } from "../calendar/index.jsx";
+export type { DateInput, DateValueString, RangeValue } from "../state/calendar.js";

package/range-calendar/index.jsx

@@ -0,0 +1,4 @@
+// Ported from react-aria-components (react-spectrum) src/Calendar.tsx (RangeCalendar), Apache-2.0, © Adobe.
+// Rivet: RangeCalendar shares its root and parts with Calendar (`../calendar/index.tsx`); this entry
+// re-exports them. Deviation: none beyond Calendar's (see its header).
+export { RangeCalendar, RangeCalendarContext, RangeCalendarStateContext, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, CalendarHeading, CalendarMonthPicker, CalendarYearPicker, } from "../calendar/index.jsx";

package/resizable/engine/components/group/auto-save/getStorageKey.d.ts

@@ -0,0 +1 @@
+export declare function getStorageKey(id: string, panelIds: string[]): string;

package/resizable/engine/components/group/auto-save/getStorageKey.js

@@ -0,0 +1,5 @@
+// Ported from react-resizable-panels (lib/components/group/auto-save/getStorageKey.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function getStorageKey(id, panelIds) {
+    return `react-resizable-panels:${[id, ...panelIds].join(":")}`;
+}

package/resizable/engine/components/group/compareDocumentPosition.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Compares two elements by their position in the DOM, for use with Array.prototype.sort.
+ * Disconnected elements are treated as equal.
+ */
+export declare function compareDocumentPosition(a: Node, b: Node): number;

package/resizable/engine/components/group/compareDocumentPosition.js

@@ -0,0 +1,19 @@
+// Ported from react-resizable-panels (lib/components/group/compareDocumentPosition.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+/**
+ * Compares two elements by their position in the DOM, for use with Array.prototype.sort.
+ * Disconnected elements are treated as equal.
+ */
+export function compareDocumentPosition(a, b) {
+    const position = a.compareDocumentPosition(b);
+    if (position & Node.DOCUMENT_POSITION_DISCONNECTED) {
+        return 0;
+    }
+    else if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+    }
+    else if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+    }
+    return 0;
+}

package/resizable/engine/components/group/readLegacyLayout.d.ts

@@ -0,0 +1,16 @@
+import type { Layout, LayoutStorage } from "./types.js";
+export type LegacyLayout = {
+    [key: string]: {
+        expandToSizes: unknown;
+        layout: number[];
+    };
+};
+/**
+ * Reads a legacy layout object from `localStorage`  and converts it to a modern `Layout` object.
+ * For more information see github.com/bvaughn/react-resizable-panels/issues/605
+ */
+export declare function readLegacyLayout({ id, panelIds, storage }: {
+    id: string;
+    panelIds?: string[] | undefined;
+    storage: LayoutStorage;
+}): Layout | undefined;

package/resizable/engine/components/group/readLegacyLayout.js

@@ -0,0 +1,48 @@
+import { getStorageKey } from "./auto-save/getStorageKey.js";
+/**
+ * Reads a legacy layout object from `localStorage`  and converts it to a modern `Layout` object.
+ * For more information see github.com/bvaughn/react-resizable-panels/issues/605
+ */
+export function readLegacyLayout({ id, panelIds, storage }) {
+    const readStorageKey = getStorageKey(id, []);
+    const maybeLegacyString = storage.getItem(readStorageKey);
+    if (!maybeLegacyString) {
+        return;
+    }
+    try {
+        // Legacy format stored multiple layouts in a single storage record, each keyed by panel ids
+        const maybeLegacyLayout = JSON.parse(maybeLegacyString);
+        if (panelIds) {
+            // If panel ids were explicitly provided, search for a matching layout
+            const key = panelIds.join(",");
+            const entry = maybeLegacyLayout[key];
+            if (entry && Array.isArray(entry.layout) && panelIds.length === entry.layout.length) {
+                const layout = {};
+                for (let index = 0; index < panelIds.length; index++) {
+                    layout[panelIds[index]] = entry.layout[index];
+                }
+                return layout;
+            }
+        }
+        else {
+            // If no panel ids were provided, bailout unless the legacy object only contained a single layout
+            const keys = Object.keys(maybeLegacyLayout);
+            if (keys.length === 1) {
+                const entry = maybeLegacyLayout[keys[0]];
+                if (entry && Array.isArray(entry.layout)) {
+                    const ids = keys[0].split(",");
+                    if (ids.length === entry.layout.length) {
+                        const layout = {};
+                        for (let index = 0; index < ids.length; index++) {
+                            layout[ids[index]] = entry.layout[index];
+                        }
+                        return layout;
+                    }
+                }
+            }
+        }
+    }
+    catch {
+        // No-op
+    }
+}

package/resizable/engine/components/group/sortByElementOffset.d.ts

@@ -0,0 +1,4 @@
+import type { Orientation } from "./types.js";
+export declare function sortByElementOffset<Type extends {
+    element: HTMLElement;
+}, ReturnType extends Type[]>(orientation: Orientation, panelsOrSeparators: Type[]): ReturnType;

package/resizable/engine/components/group/sortByElementOffset.js

@@ -0,0 +1,28 @@
+// Ported from react-resizable-panels (lib/components/group/sortByElementOffset.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { compareDocumentPosition } from "./compareDocumentPosition.js";
+export function sortByElementOffset(orientation, panelsOrSeparators) {
+    return Array.from(panelsOrSeparators).sort((a, b) => {
+        const delta = orientation === "horizontal" ? horizontalSort(a, b) : verticalSort(a, b);
+        if (delta !== 0) {
+            return delta;
+        }
+        // JSDom and hidden elements may have identical offsets and sizes.
+        // Use DOM order so registration order does not affect panel adjacency.
+        return compareDocumentPosition(a.element, b.element);
+    });
+}
+function horizontalSort(a, b) {
+    const delta = a.element.offsetLeft - b.element.offsetLeft;
+    if (delta !== 0) {
+        return delta;
+    }
+    return a.element.offsetWidth - b.element.offsetWidth;
+}
+function verticalSort(a, b) {
+    const delta = a.element.offsetTop - b.element.offsetTop;
+    if (delta !== 0) {
+        return delta;
+    }
+    return a.element.offsetHeight - b.element.offsetHeight;
+}

package/resizable/engine/components/group/types.d.ts

@@ -0,0 +1,50 @@
+import type { Layout } from "../../global/types.js";
+export type { Layout, Orientation, ResizePreviewMode, ResizeTargetMinimumSize } from "../../global/types.js";
+export type LayoutStorage = Pick<Storage, "getItem" | "setItem">;
+/**
+ * Metadata describing a completed layout change, passed as the second argument to the `onLayoutChanged` callback.
+ * See #716.
+ */
+export type LayoutChangedMeta<RequestedLayout = Layout> = {
+    /**
+     * `true` when the change was caused by the user directly manipulating a separator (keyboard or pointer)
+     * `false` for every other source (imperative API calls, constraint recompute, default-size change, initial mount),
+     * because the library cannot attribute the caller's intent there.
+     */
+    isUserInteraction: boolean;
+    /**
+     * Layout most recently requested by the user or application (e.g. pointer or keyboard input, imperative API, default layout)
+     * before constraints were applied for the current size.
+     *
+     * This will differ from the validated layout when constraints temporarily override the requested layout,
+     * e.g. a panel with a pixel-based `minSize` taking up a larger percentage of a small Group.
+     * The requested layout is restored if the Group grows back to a size where it satisfies all constraints.
+     *
+     * ℹ️ When saving layouts to storage, prefer this value to the validated layout.
+     */
+    requestedLayout?: RequestedLayout | undefined;
+};
+/**
+ * Imperative Group API.
+ *
+ * ℹ️ The `useGroupRef` and `useGroupCallbackRef` hooks are exported for convenience use in TypeScript projects.
+ */
+export interface GroupImperativeHandle {
+    /**
+     * Get the Group's current layout as a map of Panel id to percentage (0..100)
+     *
+     * @return Map of Panel id to percentages (specified as numbers ranging between 0..100)
+     */
+    getLayout: () => {
+        [panelId: string]: number;
+    };
+    /**
+     * Set a new layout for the Group
+     *
+     * @param layout Map of Panel id to percentage (a number between 0..100)
+     * @return Applied layout (after validation)
+     */
+    setLayout: (layout: {
+        [panelId: string]: number;
+    }) => Layout;
+}

package/resizable/engine/components/group/types.js

@@ -0,0 +1 @@
+export {};