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

package/selection/state.js

@@ -0,0 +1,131 @@
+// Ported from @react-stately/selection (Selection.ts, useMultipleSelectionState.ts, types.ts),
+// Apache-2.0, © Adobe.
+//
+// Rivet: the state is plain data + signals (serializable, resumable), created once in the component
+// body; the setters of react-stately's state object are free functions taking the state. The
+// anchor / current keys that react-stately keeps on its `Selection` Set subclass live in their own
+// signals (class instances do not serialize).
+import { batch, signal, untrack } from "@rivetjs/reactivity";
+/**
+ * A Set of keys that also has an anchor and current key for range selection (react-stately
+ * `Selection`). Passed to `onSelectionChange`; state signals hold plain Sets.
+ */
+export class SelectionSet extends Set {
+    anchorKey;
+    currentKey;
+    constructor(keys, anchorKey, currentKey) {
+        super(keys);
+        if (keys instanceof SelectionSet) {
+            this.anchorKey = anchorKey ?? keys.anchorKey;
+            this.currentKey = currentKey ?? keys.currentKey;
+        }
+        else {
+            this.anchorKey = anchorKey ?? null;
+            this.currentKey = currentKey ?? null;
+        }
+    }
+}
+const isSignal = (value) => typeof value === "function" && typeof value.set === "function";
+function convertSelection(selection, defaultValue) {
+    if (!selection)
+        return defaultValue;
+    return selection === "all" ? "all" : new Set(selection);
+}
+function equalSets(setA, setB) {
+    if (setA === "all" || setB === "all")
+        return setA === setB;
+    if (setA.size !== setB.size)
+        return false;
+    for (const item of setA)
+        if (!setB.has(item))
+            return false;
+    return true;
+}
+/** Manages state for multiple selection and focus in a collection (react-stately `useMultipleSelectionState`). */
+export function createMultipleSelectionState(props = {}) {
+    const { selectionMode = "none", disallowEmptySelection = false, allowDuplicateSelectionEvents = false, selectionBehavior: selectionBehaviorProp = "toggle", disabledBehavior = "all", } = props;
+    const prop = props.selectedKeys;
+    const controlled = prop != null && !isSignal(prop);
+    // An accessor (live prop, `utils/live.tsx` `liveKeys`: returns a Set or "all") is controlled: read, never written.
+    const selectedKeys = typeof prop === "function"
+        ? prop
+        : signal(convertSelection(controlled ? prop : props.defaultSelectedKeys, new Set()));
+    return {
+        selectionMode,
+        disallowEmptySelection,
+        selectionBehavior: signal(selectionBehaviorProp),
+        selectionBehaviorProp,
+        selectedKeys,
+        anchorKey: signal(null),
+        currentKey: signal(null),
+        isFocused: signal(false),
+        focusedKey: signal(props.defaultFocusedKey ?? null),
+        childFocusStrategy: signal(null),
+        disabledKeys: props.disabledKeys ? new Set(props.disabledKeys) : new Set(),
+        disabledBehavior,
+        controlled,
+        allowDuplicateSelectionEvents,
+        onSelectionChange: props.onSelectionChange,
+        selectedKey: props.selectedKey,
+        selectedKeyControlled: props.selectedKeyControlled,
+        onSelectedKeyChange: props.onSelectedKeyChange,
+    };
+}
+const EMPTY = new Set();
+/** The current selection (`"all"` or a Set). Reads the signals (tracked in bindings). */
+export function readSelection(state) {
+    if (state.selectedKey) {
+        const key = state.selectedKey();
+        return key == null ? EMPTY : new Set([key]);
+    }
+    return state.selectedKeys();
+}
+/** Sets whether the collection is focused. */
+export function setFocused(state, isFocused) {
+    state.isFocused.set(isFocused);
+}
+/** Sets the focused key, and whether the first or last child of that key should receive focus. */
+export function setFocusedKey(state, key, childFocusStrategy = "first") {
+    batch(() => {
+        state.childFocusStrategy.set(childFocusStrategy);
+        state.focusedKey.set(key);
+    });
+}
+/** Sets the selection behavior for the collection. */
+export function setSelectionBehavior(state, behavior) {
+    state.selectionBehavior.set(behavior);
+}
+/**
+ * Sets the selected keys (`"all"`, a Set, or a `SelectionSet` carrying anchor / current keys).
+ * Skips unchanged selections unless `allowDuplicateSelectionEvents`.
+ */
+export function setSelectedKeys(state, keys) {
+    batch(() => writeSelectedKeys(state, keys));
+}
+function writeSelectedKeys(state, keys) {
+    const current = untrack(() => readSelection(state));
+    if (!state.allowDuplicateSelectionEvents && equalSets(keys, current))
+        return;
+    const set = keys instanceof SelectionSet;
+    state.anchorKey.set(set ? keys.anchorKey : null);
+    state.currentKey.set(set ? keys.currentKey : null);
+    if (state.selectedKey) {
+        const key = keys === "all" ? null : (keys.values().next().value ?? null);
+        if (!state.selectedKeyControlled)
+            state.selectedKey.set(key);
+        state.onSelectedKeyChange?.(key);
+    }
+    else if (!state.controlled)
+        state.selectedKeys.set(keys === "all" ? "all" : new Set(keys));
+    state.onSelectionChange?.(keys);
+    // If the selectionBehavior prop is "replace" but the current behavior is "toggle" (e.g. after a
+    // long press entered selection mode on touch), and the selection becomes empty, reset it.
+    if (state.selectionBehaviorProp === "replace" && untrack(state.selectionBehavior) === "toggle" && keys !== "all" && keys.size === 0) {
+        state.selectionBehavior.set("replace");
+    }
+}
+/** Current selection as a `SelectionSet` with anchor / current keys (or "all"). Reads the signals. */
+export function getSelection(state) {
+    const keys = readSelection(state);
+    return keys === "all" ? "all" : new SelectionSet(keys, state.anchorKey(), state.currentKey());
+}

package/selection/type-select.d.ts

@@ -0,0 +1,37 @@
+import type { Key, KeyboardDelegate } from "../collections/types.js";
+import type { MultipleSelectionManager } from "./manager.js";
+/** How long to wait before clearing the typeahead buffer. */
+export declare const TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000;
+export interface AriaTypeSelectOptions {
+    /** A delegate that returns collection item keys with respect to visual layout. */
+    keyboardDelegate: KeyboardDelegate;
+    /** An interface for reading and updating multiple selection state. */
+    selectionManager: Pick<MultipleSelectionManager, "focusedKey" | "setFocusedKey">;
+    /** Called when an item is focused by typing. */
+    onTypeSelect?: ((key: Key) => void) | undefined;
+}
+/** Current search string of `owner` (tests, custom handlers). */
+export declare const typeSelectSearch: (owner: object) => string;
+/** Clear the buffer of `owner`. */
+export declare function resetTypeSelect(owner: object): void;
+/**
+ * Capture-phase keydown: while a search is in progress, Space extends the search instead of
+ * selecting (and is stopped from reaching the bubble-phase handlers). Returns whether handled.
+ */
+export declare function typeSelectKeyDownCapture(owner: object, options: AriaTypeSelectOptions, e: KeyboardEvent): boolean;
+/** Bubble-phase keydown: printable characters extend the search. Returns whether handled. */
+export declare function typeSelectKeyDown(owner: object, options: AriaTypeSelectOptions, e: KeyboardEvent & {
+    currentTarget: EventTarget | null;
+}): boolean;
+/**
+ * react-aria `useTypeSelect`: the handler pair for an owner (`onKeyDownCapture` / `onKeyDown`),
+ * undefined when the delegate cannot search.
+ */
+export declare function useTypeSelect(owner: object, options: AriaTypeSelectOptions): {
+    typeSelectProps: {
+        onKeyDownCapture?: (e: KeyboardEvent) => void;
+        onKeyDown?: (e: KeyboardEvent & {
+            currentTarget: EventTarget | null;
+        }) => void;
+    };
+};

package/selection/type-select.js

@@ -0,0 +1,114 @@
+// Ported from @react-aria/selection (useTypeSelect.ts), Apache-2.0, © Adobe.
+//
+// Rivet: the search buffer lives per owner (the collection element, or any object) in a WeakMap,
+// not in component state, so resumed handlers share it without serializing it.
+import { nodeContains } from "./dom-utils.js";
+/** How long to wait before clearing the typeahead buffer. */
+export const TYPEAHEAD_DEBOUNCE_WAIT_MS = 1000;
+const buffers = new WeakMap();
+const bufferOf = (owner) => {
+    let b = buffers.get(owner);
+    if (!b)
+        buffers.set(owner, (b = { search: "", timeout: undefined }));
+    return b;
+};
+/** Current search string of `owner` (tests, custom handlers). */
+export const typeSelectSearch = (owner) => buffers.get(owner)?.search ?? "";
+/** Clear the buffer of `owner`. */
+export function resetTypeSelect(owner) {
+    const b = buffers.get(owner);
+    if (!b)
+        return;
+    clearTimeout(b.timeout);
+    b.search = "";
+    b.timeout = undefined;
+}
+function schedule(b) {
+    clearTimeout(b.timeout);
+    b.timeout = setTimeout(() => {
+        b.search = "";
+    }, TYPEAHEAD_DEBOUNCE_WAIT_MS);
+}
+function search(b, options) {
+    const { keyboardDelegate, selectionManager } = options;
+    if (keyboardDelegate.getKeyForSearch == null)
+        return null;
+    // Prioritize items after the currently focused item, falling back to searching the whole list.
+    let key = keyboardDelegate.getKeyForSearch(b.search, selectionManager.focusedKey);
+    if (key == null)
+        key = keyboardDelegate.getKeyForSearch(b.search);
+    return key;
+}
+/**
+ * Capture-phase keydown: while a search is in progress, Space extends the search instead of
+ * selecting (and is stopped from reaching the bubble-phase handlers). Returns whether handled.
+ */
+export function typeSelectKeyDownCapture(owner, options, e) {
+    if (!options.keyboardDelegate.getKeyForSearch)
+        return false;
+    const b = bufferOf(owner);
+    if (b.search.length > 0 && e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+        b.search += " ";
+        const key = search(b, options);
+        if (key != null) {
+            options.selectionManager.setFocusedKey(key);
+            options.onTypeSelect?.(key);
+        }
+        schedule(b);
+        return true;
+    }
+    return false;
+}
+/** Bubble-phase keydown: printable characters extend the search. Returns whether handled. */
+export function typeSelectKeyDown(owner, options, e) {
+    if (!options.keyboardDelegate.getKeyForSearch)
+        return false;
+    const b = bufferOf(owner);
+    const character = getStringForKey(e.key);
+    if (!character ||
+        e.ctrlKey ||
+        e.metaKey ||
+        e.altKey ||
+        (typeof Node !== "undefined" && e.currentTarget instanceof Node && !nodeContains(e.currentTarget, e.target)) ||
+        (b.search.length === 0 && character === " ")) {
+        return false;
+    }
+    b.search += character;
+    const key = search(b, options);
+    if (key != null) {
+        options.selectionManager.setFocusedKey(key);
+        options.onTypeSelect?.(key);
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    else {
+        // If still nothing then the type to select is done and everything is reset.
+        resetTypeSelect(owner);
+        return false;
+    }
+    schedule(b);
+    return true;
+}
+/**
+ * react-aria `useTypeSelect`: the handler pair for an owner (`onKeyDownCapture` / `onKeyDown`),
+ * undefined when the delegate cannot search.
+ */
+export function useTypeSelect(owner, options) {
+    if (!options.keyboardDelegate.getKeyForSearch)
+        return { typeSelectProps: {} };
+    return {
+        typeSelectProps: {
+            onKeyDownCapture: (e) => void typeSelectKeyDownCapture(owner, options, e),
+            onKeyDown: (e) => void typeSelectKeyDown(owner, options, e),
+        },
+    };
+}
+function getStringForKey(key) {
+    // If the key is of length 1, it is an ASCII value. Otherwise, if there are no ASCII characters in
+    // the key name, it is a Unicode character. See https://www.w3.org/TR/uievents-key/
+    if (key.length === 1 || !/^[A-Z]/i.test(key))
+        return key;
+    return "";
+}

package/selection/utils.d.ts

@@ -0,0 +1,23 @@
+import type { Collection, Key } from "../collections/types.js";
+export { getItemElement } from "../collections/dom.js";
+/** A ref (`{ current }`) or the element itself. */
+export type RefLike<E extends Element = HTMLElement> = {
+    readonly current: E | null;
+} | E | null | undefined;
+/** Element of a `RefLike`. */
+export declare function refElement<E extends Element>(ref: RefLike<E>): E | null;
+interface ModifierEvent {
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+}
+export declare function isNonContiguousSelectionModifier(e: ModifierEvent): boolean;
+/** Ctrl (Cmd on Apple) pressed. */
+export declare function isCtrlKeyPressed(e: ModifierEvent): boolean;
+/**
+ * Id of a collection (`data-collection` on the collection and its items). Rivet: pass a stable id
+ * (the component's `createId()`) so server and client agree; otherwise one is generated.
+ */
+export declare function useCollectionId(collection: Collection<any>, id?: string): string;
+export declare function getCollectionId(collection: Collection<any>): string | undefined;
+export type { Key };

package/selection/utils.js

@@ -0,0 +1,38 @@
+// Ported from @react-aria/selection (utils.ts), Apache-2.0, © Adobe.
+import { createId } from "@rivetjs/runtime/id";
+import { isMac } from "../platform/index.js";
+export { getItemElement } from "../collections/dom.js";
+/** Element of a `RefLike`. */
+export function refElement(ref) {
+    if (!ref)
+        return null;
+    return typeof ref.nodeType === "number" ? ref : ref.current;
+}
+/** Apple devices: Mac, iPhone, iPad. */
+const isAppleDevice = () => {
+    if (isMac())
+        return true;
+    return typeof navigator !== "undefined" && /^(iPhone|iPad)/i.test(navigator.platform ?? "");
+};
+export function isNonContiguousSelectionModifier(e) {
+    // Ctrl + Arrow Up/Arrow Down has a system wide meaning on macOS, so use Alt instead.
+    // On Windows and Ubuntu, Alt + Space has a system wide meaning.
+    return isAppleDevice() ? e.altKey : e.ctrlKey;
+}
+/** Ctrl (Cmd on Apple) pressed. */
+export function isCtrlKeyPressed(e) {
+    return isAppleDevice() ? e.metaKey : e.ctrlKey;
+}
+const collectionIds = new WeakMap();
+/**
+ * Id of a collection (`data-collection` on the collection and its items). Rivet: pass a stable id
+ * (the component's `createId()`) so server and client agree; otherwise one is generated.
+ */
+export function useCollectionId(collection, id) {
+    const value = id ?? collectionIds.get(collection) ?? createId();
+    collectionIds.set(collection, value);
+    return value;
+}
+export function getCollectionId(collection) {
+    return collectionIds.get(collection);
+}

package/selection-indicator/context.d.ts

@@ -0,0 +1,10 @@
+import type { SharedElementRenderProps } from "../shared-element-transition/index.jsx";
+/** What an item provides (RAC `ContextValue<SelectionIndicatorProps>`); a SelectionIndicator's own props win. */
+export interface SelectionIndicatorContextValue {
+    /** Whether the item is selected: an accessor (no item re-render) or a boolean. */
+    isSelected?: boolean | (() => boolean);
+    class?: string | ((values: SharedElementRenderProps) => string | undefined);
+    style?: Record<string, string | number | undefined> | ((values: SharedElementRenderProps) => Record<string, string | number | undefined> | undefined);
+}
+/** RAC `SelectionIndicatorContext`: items provide `{ isSelected }`. */
+export declare const SelectionIndicatorContext: import("@rivetjs/reactivity").Context<SelectionIndicatorContextValue>;

package/selection-indicator/context.js

@@ -0,0 +1,7 @@
+// Ported from react-spectrum packages/react-aria-components/src/SelectionIndicator.tsx (`SelectionIndicatorContext`), Apache-2.0, © Adobe.
+// Its own module: Tabs / RadioGroup / ToggleButton provide it on every page, so their chunks carry this
+// token only, never the SelectionIndicator / SharedElement code.
+import { createContext } from "@rivetjs/reactivity";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+/** RAC `SelectionIndicatorContext`: items provide `{ isSelected }`. */
+export const SelectionIndicatorContext = resumableContext(createContext({ isSelected: false }, { id: "rv-selection-indicator" }));

package/selection-indicator/index.d.ts

@@ -0,0 +1,20 @@
+import { type SharedElementPropsBase, type SharedElementRenderProps } from "../shared-element-transition/index.jsx";
+export type { SharedElementRenderProps } from "../shared-element-transition/index.jsx";
+export { SelectionIndicatorContext, type SelectionIndicatorContextValue } from "./context.js";
+export interface SelectionIndicatorProps extends SharedElementPropsBase {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-SelectionIndicator'
+     */
+    class?: string | ((values: SharedElementRenderProps) => string | undefined);
+    /**
+     * Whether the SelectionIndicator is visible. This is usually set automatically by the parent
+     * component (an accessor or a boolean).
+     */
+    isSelected?: boolean | (() => boolean);
+}
+/**
+ * An animated indicator of selection state within a group of items.
+ */
+export declare function SelectionIndicator(props: SelectionIndicatorProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/selection-indicator/index.jsx

@@ -0,0 +1,25 @@
+// Ported from react-spectrum packages/react-aria-components/src/SelectionIndicator.tsx, Apache-2.0, © Adobe.
+// An animated indicator of selection state within a group of items: a `SharedElement` named
+// "SelectionIndicator", visible while the enclosing item (Tab, Radio, ToggleButton) is selected.
+// Rivet: the context value's `isSelected` is an accessor (a boolean is accepted too), so the item never
+// re-renders; RAC `useContextProps` → own props win over the context's (`isSelected`, `class`, `style`).
+import { useContext } from "@rivetjs/reactivity";
+import { SelectionIndicatorContext } from "./context.js";
+import { SharedElement } from "../shared-element-transition/index.jsx";
+export { SelectionIndicatorContext } from "./context.js";
+/**
+ * An animated indicator of selection state within a group of items.
+ */
+export function SelectionIndicator(props) {
+    const context = useContext(SelectionIndicatorContext);
+    const isSelected = props.isSelected ?? context.isSelected;
+    const className = props.class ?? context.class ?? "rv-SelectionIndicator";
+    const style = props.style ?? context.style;
+    const children = props.children;
+    const rest = {};
+    for (const key in props)
+        if (key !== "isSelected" && key !== "class" && key !== "style" && key !== "children")
+            rest[key] = props[key];
+    // A plain call (not JSX): its reads belong to this component's site, and `children` reaches it as given (a render function stays one).
+    return SharedElement({ ...rest, class: className, style, children, name: "SelectionIndicator", isVisible: isSelected ?? false });
+}

package/separator/behaviour.d.ts

@@ -0,0 +1,17 @@
+import type { AriaLabelingProps, DOMProps, Orientation } from "../utils/types.js";
+export interface AriaSeparatorProps extends DOMProps, AriaLabelingProps {
+    /**
+     * The orientation of the separator.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /** The HTML element type that will be used to render the separator. */
+    elementType?: string;
+}
+export interface SeparatorAria {
+    /** Props for the separator element. */
+    separatorProps: Record<string, unknown>;
+}
+/** Accessibility attributes of a separator (RA `useSeparator`). */
+export declare function separatorProps(props: AriaSeparatorProps): SeparatorAria;

package/separator/behaviour.js

@@ -0,0 +1,17 @@
+const LABELABLE = ["id", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"];
+/** Accessibility attributes of a separator (RA `useSeparator`). */
+export function separatorProps(props) {
+    const domProps = {};
+    for (const key of LABELABLE)
+        if (props[key] !== undefined)
+            domProps[key] = props[key];
+    let ariaOrientation;
+    // If orientation is horizontal, aria-orientation default is horizontal, so we leave it undefined;
+    // if it's vertical, we need to specify it.
+    if (props.orientation === "vertical")
+        ariaOrientation = "vertical";
+    // hr elements implicitly have role = separator and a horizontal orientation.
+    if (props.elementType !== "hr")
+        return { separatorProps: { ...domProps, role: "separator", "aria-orientation": ariaOrientation } };
+    return { separatorProps: domProps };
+}

package/separator/index.d.ts

@@ -0,0 +1,23 @@
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { CollectionNode, type BaseCollection } from "../collections/base.js";
+import { type ContextValue, type RefValue, type SlotProps, type StyleObject } from "../slots/index.jsx";
+import { type AriaSeparatorProps } from "./behaviour.js";
+export { separatorProps, type AriaSeparatorProps, type SeparatorAria } from "./behaviour.js";
+export interface SeparatorProps extends AriaSeparatorProps, SlotProps, GlobalDOMAttributes<HTMLElement>, DOMRenderProps<"hr", undefined> {
+    /** @default "rv-Separator" */
+    class?: string;
+    style?: StyleObject;
+    ref?: RefValue<HTMLElement>;
+}
+export declare const SeparatorContext: import("@rivetjs/reactivity").Context<ContextValue<SeparatorProps, HTMLElement>>;
+/** Collection node of a separator (RAC `SeparatorNode`). */
+export declare class SeparatorNode extends CollectionNode<any> {
+    static readonly type = "separator";
+    filter(collection: BaseCollection<any>, newCollection: BaseCollection<any>): CollectionNode<any> | null;
+}
+/**
+ * A separator is a visual divider between two groups of content, e.g. groups of menu items or
+ * sections of a page.
+ */
+export declare const Separator: (props: SeparatorProps) => unknown;

package/separator/index.jsx

@@ -0,0 +1,64 @@
+// Ported from react-aria-components Separator (packages/react-aria-components/src/Separator.tsx), Apache-2.0, © Adobe.
+// A visual divider between two groups of content (groups of menu items, sections of a page): `<hr>`,
+// or `<div role="separator" aria-orientation="vertical">` when vertical / `elementType` given.
+// Rivet: props merged with `SeparatorContext` (`contextProps`); `separatorProps` (RA useSeparator) in
+// `behaviour.ts`; a collection leaf (`createLeafComponent(SeparatorNode, …)`, `SeparatorNode.filter` keeps
+// a separator only after a non-separator item when filtering, as RAC). `render` (RAC DOMRenderProps): given, the attributes object (`ref`, `class`, `style`) goes to `render(attrs, undefined)` instead of the default element; the default path is the compiled element.
+import { createContext } from "@rivetjs/reactivity";
+import { Dynamic } from "@rivetjs/runtime/dom";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import { CollectionNode } from "../collections/base.js";
+import { createLeafComponent } from "../collections/components.jsx";
+import { resumableContext, contextProps } from "../slots/index.jsx";
+import { separatorProps } from "./behaviour.js";
+import { isLive, liveClass } from "../utils/live.jsx";
+export { separatorProps } from "./behaviour.js";
+export const SeparatorContext = resumableContext(createContext({}, { id: "rv-separator" }));
+/** RA `filterDOMProps(props, { global: true })`: global attributes / events, `id`, `data-*`. */
+function domPropsOf(props) {
+    const out = globalDOMProps(props);
+    for (const key in props)
+        if ((key === "id" || key.startsWith("data-")) && props[key] !== undefined)
+            out[key] = props[key];
+    return out;
+}
+/** Collection node of a separator (RAC `SeparatorNode`). */
+export class SeparatorNode extends CollectionNode {
+    static type = "separator";
+    filter(collection, newCollection) {
+        const prevItem = newCollection.getItem(this.prevKey);
+        if (prevItem && prevItem.type !== "separator") {
+            const clone = this.clone();
+            newCollection.addDescendants(clone, collection);
+            return clone;
+        }
+        return null;
+    }
+}
+/**
+ * A separator is a visual divider between two groups of content, e.g. groups of menu items or
+ * sections of a page.
+ */
+export const Separator = /*#__PURE__*/ createLeafComponent(SeparatorNode, function Separator(props, forwardedRef) {
+    const [merged, ref] = contextProps(props, forwardedRef, SeparatorContext);
+    const { elementType, orientation, style, class: className, slot, render } = merged;
+    let element = elementType || "hr";
+    if (element === "hr" && orientation === "vertical")
+        element = "div";
+    const aria = separatorProps({ ...merged, elementType, orientation });
+    // Live props (P5): a live `class` goes through the spread as an accessor.
+    const cls = isLive(merged, "class") ? liveClass(merged, "rv-Separator") : (className ?? "rv-Separator");
+    // `class` may be an accessor: the spread binds it (typed as the static string).
+    const attrs = mergeProps(domPropsOf(merged), aria.separatorProps, { class: cls });
+    const s = slot || undefined;
+    const r = ref;
+    if (render)
+        return render({ ...attrs, style, class: cls, ref: r, slot: s }, undefined);
+    if (element === "hr")
+        return <hr {...attrs} style={style} ref={r} slot={s}/>;
+    if (element === "div")
+        return <div {...attrs} style={style} ref={r} slot={s}/>;
+    return <Dynamic component={element} {...attrs} style={style} ref={r} slot={s}/>;
+});

package/shared-element-transition/index.d.ts

@@ -0,0 +1,36 @@
+import type { Content, Slot } from "@rivetjs/runtime/jsx-runtime";
+import { type GlobalDOMAttributes } from "@rivetjs/cdk/dom-props";
+export { SharedElementContext, SharedElementTransition, type SharedElementScope, type SharedElementTransitionProps, type Snapshot } from "./transition.jsx";
+export interface SharedElementRenderProps {
+    /**
+     * Whether the element is currently entering.
+     *
+     * @selector [data-entering]
+     */
+    isEntering: () => boolean;
+    /**
+     * Whether the element is currently exiting.
+     *
+     * @selector [data-exiting]
+     */
+    isExiting: () => boolean;
+}
+type StyleObject = Record<string, string | number | undefined>;
+export interface SharedElementPropsBase extends GlobalDOMAttributes<HTMLDivElement> {
+    id?: string;
+    /** Class name, or a function of the render props (called inside a binding). */
+    class?: string | ((values: SharedElementRenderProps) => string | undefined);
+    /** Inline style, or a function of the render props (called inside a binding). */
+    style?: StyleObject | ((values: SharedElementRenderProps) => StyleObject | undefined);
+    /** Content; a function gets the render props. */
+    children?: Content | Slot<[SharedElementRenderProps]>;
+}
+export interface SharedElementProps extends SharedElementPropsBase {
+    name: string;
+    /** @default true — a boolean or an accessor (a signal) for a changing value. */
+    isVisible?: boolean | (() => boolean);
+}
+/**
+ * An element that animates between its old and new position when moving between parents.
+ */
+export declare function SharedElement(props: SharedElementProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;