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

package/tabs/index.jsx

@@ -0,0 +1,577 @@
+// Tabs, TabList, Tab, TabPanels, TabPanel + TabsContext / TabListStateContext (react-aria-components Tabs).
+// Ported from react-spectrum (Apache-2.0, © Adobe): packages/react-aria-components/src/Tabs.tsx.
+//
+// Rivet:
+// - Live collection mode (`../collections/components.tsx`): tabs render in place inside the TabList (`data-key`);
+//   the tablist's delegated handlers (`./behaviour.ts`) read the collection back from its DOM per event, so
+//   resumed pages need no item model and run no library code until the first interaction.
+// - Default selection (useTabListState's "a tab is always selected"): when no tab is selected at creation,
+//   `Tabs` runs one build pass over its children (`buildCollectionFrom`: the Tab parts register, TabPanels /
+//   TabPanel render nothing) and selects the first enabled tab, without calling `onSelectionChange`. A given
+//   `defaultSelectedKey` / `selectedKey` is kept as is (no build pass, no check that it names a tab).
+// - Render props are accessors (`class={({ isSelected }) => (isSelected() ? "on" : "")}`); hover / focus /
+//   focus-visible states are written on the element by the handlers (`../utils/data-attrs.tsx`); pressed
+//   follows each tab's usePress (`../interactions/press.tsx`).
+// - `className` → `class` (default `rv-Tabs`, `rv-TabList`, `rv-Tab`, `rv-TabPanels`, `rv-TabPanel`).
+// - Ids derive from the Tabs `id` (else a generated one): tablist `<id>-tablist`, tab `<id>-tab-<key>`, panel
+//   `<id>-tabpanel-<key>` (RA: from the tablist's generated id).
+// - TabsContext is not re-provided inside Tabs (its value holds the JSX children: not serializable); TabList reads
+//   `orientation` / `keyboardActivation` from the state.
+// - TabPanel content of unselected tabs is created when the tab is selected: on a resumed page it must be a
+//   render-function child (`<TabPanel id="a">{() => …}</TabPanel>`), or use `shouldForceMount`.
+// - Enter / exit animations and the TabPanels size variables (`--tab-panel-width` / `--tab-panel-height`) run for
+//   parts created in the browser; panels the server rendered (resumed pages) switch without them.
+// - `items` preset: `<Tabs items={…} tab={…} panel={…} aria-label="…" />` without children renders a TabList of
+//   Tabs and (with `panel`) TabPanels of force-mounted panels (inactive ones `hidden` + `inert`: every panel is
+//   server-rendered, so find-in-page / SEO see them and switching needs no render).
+// `render` (RAC DOMRenderProps) on every part: given, the attributes object goes to `render(attrs, renderProps)`
+// instead of the default element (Tab: `<a>` with `href`, else `<div>`).
+import { createContext, provide, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { CollectionNode } from "../collections/base.js";
+import { Collection, CollectionRendererContext, DefaultCollectionRenderer, buildCollectionFrom, collectionItemId, createLeafComponent, isHidden, } from "../collections/components.jsx";
+import { createTabListState, isTabsDisabled, tabsOrientation, } from "../state/tabs.js";
+import { hasLive, liveAssign, liveAt, liveOptions, liveView } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+import { read } from "../interactions/utils.js";
+import { routerHref, useRouter } from "../link/router.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import {} from "../utils/render.js";
+import { dataBool, focusStateBlur, focusStateFocus, hoverStateEnter, hoverStateLeave, mergeFocusableContext, readAttrs, setDataAttr, } from "../utils/data-attrs.jsx";
+import { FocusableContext } from "../focus/focusable.jsx";
+import { createEnterAnimation, createExitAnimation } from "../utils/animation.jsx";
+import { focusRingBlur, focusRingFocus } from "../focus/focus-ring.jsx";
+import { pressProps } from "../interactions/press.jsx";
+import { mergeProps, mergeRefs } from "../interactions/merge-props.jsx";
+import { isFn, ringOf } from "../grid-list/row.js";
+import { SharedElementTransition } from "../shared-element-transition/transition.jsx";
+import { SelectionIndicatorContext } from "../selection-indicator/context.js";
+import { Provider, contextProps, mergeRefValues, renderProps as resolveRenderProps, renderPropsOf, resumableContext, } from "../slots/index.jsx";
+import { isTabDisabled, isTabSelected, syncPanelTabIndex, tabClick, tabId, tabListFocusIn, tabListFocusOut, tabListKeyDown, tabListPointerDown, tabPanelId, tabPress, tabPressStart, tabPressUp, tabSelected, tabsKeys, tabTabIndex, } from "./behaviour.js";
+const isBrowser = typeof document !== "undefined";
+/** RAC `TabsContext`: props for a Tabs inside a component, optionally per slot. */
+export const TabsContext = resumableContext(createContext(null, { id: "rv-tabs" }));
+/** RAC `TabListStateContext`: the state of the enclosing Tabs (null outside one, and inside its panels). */
+export const TabListStateContext = resumableContext(createContext(null, { id: "rv-tab-list-state" }));
+/** Rivet (build pass): the node class of a Tab, told apart from other parts registering in the same pass. */
+class TabItemNode extends CollectionNode {
+    static type = "item";
+}
+const TABS_OWNED = ["style", "onFocusIn", "onFocusOut"];
+/** Tabs organize content into multiple sections and allow users to navigate between them (RAC `Tabs`). */
+export function Tabs(inProps) {
+    // Live props (P5): `isDisabled` / `selectedKey` (controlled) become accessors at the boundary, class / style /
+    // children stay live (live view); the rest of the body is read once (untracked).
+    return untrack(() => tabsRoot(inProps));
+}
+/** `data-orientation` / `aria-orientation` for a render bag: the value, a returned arrow when `orientation` is live. */
+function orientationAttr(state) {
+    return state.live?.orientation ? liveOrientation(state) : state.orientation;
+}
+function liveOrientation(state) {
+    return () => tabsOrientation(state);
+}
+/** `data-rk` for a render bag (the navigation keys follow a live `orientation`). */
+function tabsKeysAttr(state) {
+    return state.live?.orientation ? liveTabsKeys(state) : tabsKeys(state);
+}
+function liveTabsKeys(state) {
+    return () => tabsKeys(state);
+}
+/** `data-disabled` of a live tablist `isDisabled` (a returned arrow: resumable). */
+function tabsDisabledAttr(state) {
+    return () => dataBool(isTabsDisabled(state));
+}
+function tabsRoot(inProps) {
+    const [ctxProps, ref] = contextProps(inProps, inProps.ref, TabsContext);
+    const live = hasLive(ctxProps);
+    // Live by default (LIVE-SWEEP): `orientation` / `keyboardActivation` / `disabledKeys` live in the state.
+    const props = live ? liveOptions(ctxProps, ["isDisabled", "orientation", "keyboardActivation", "disabledKeys"], ["selectedKey"]) : ctxProps;
+    // Not the state (created below: the tabs builder may call a children function first).
+    const orientationProp = props.orientation;
+    const values = { orientation: () => read(orientationProp) ?? "horizontal" };
+    const { items, tab, panel, selectedKey, defaultSelectedKey } = props;
+    const preset = props.children === undefined && items != null;
+    const ariaLabel = props["aria-label"], ariaLabelledby = props["aria-labelledby"];
+    // RAC: `children` may be a function of `{ orientation }`.
+    const ownChildren = props.children;
+    const initial = typeof selectedKey === "function" ? untrack(selectedKey) : selectedKey !== undefined ? selectedKey : defaultSelectedKey;
+    const needsDefault = initial == null && (typeof selectedKey?.set === "function" || selectedKey === undefined);
+    const tabs = !needsDefault
+        ? undefined
+        : preset
+            ? () => items.map((item) => ({ id: item.id, isDisabled: item.isDisabled }))
+            : () => {
+                const keys = [];
+                const content = typeof ownChildren === "function" && !isSlot(ownChildren)
+                    ? () => ownChildren({ ...values, defaultChildren: null })
+                    : ownChildren;
+                // Outside any enclosing Tabs' state: the TabList registers its tabs (RAC CollectionBuilder).
+                const built = buildCollectionFrom(() => provide(TabListStateContext, null, () => renderSlot(content)));
+                for (const node of built)
+                    if (node instanceof TabItemNode)
+                        keys.push({ id: node.key, isDisabled: !!node.props?.isDisabled });
+                return keys;
+            };
+    const state = createTabListState({
+        id: props.id,
+        selectedKey,
+        defaultSelectedKey,
+        onSelectionChange: props.onSelectionChange,
+        disabledKeys: props.disabledKeys,
+        isDisabled: props.isDisabled,
+        orientation: props.orientation,
+        keyboardActivation: props.keyboardActivation,
+        tabs,
+    });
+    // The `items` preset: TabList of Tabs + TabPanels of force-mounted panels (inline arrows: resumable renderers).
+    const presetContent = () => (<>
+      <TabList aria-label={ariaLabel} aria-labelledby={ariaLabelledby} items={items}>
+        {(item) => (<Tab id={item.id} textValue={item.textValue ?? item.label} isDisabled={item.isDisabled} aria-label={item["aria-label"]} href={item.href} hrefLang={item.hrefLang} target={item.target} rel={item.rel} download={item.download} ping={item.ping} referrerPolicy={item.referrerPolicy} routerOptions={item.routerOptions}>
+            {(tab ? tab(item) : (item.label ?? item.textValue))}
+          </Tab>)}
+      </TabList>
+      {panel ? (<TabPanels items={items}>
+          {(item) => (<TabPanel id={item.id} shouldForceMount hidden={(() => !isTabSelected(state, item.id) || undefined)}>
+              {(() => panel(item))}
+            </TabPanel>)}
+        </TabPanels>) : null}
+    </>);
+    const rp = resolveRenderProps({
+        class: props.class,
+        style: props.style,
+        children: preset ? presetContent : props.children,
+        values,
+        defaultClassName: "rv-Tabs",
+    }, live ? (preset ? [...liveRenderProps(props).slice(0, 2), { children: presetContent }] : liveRenderProps(props)) : undefined);
+    // RAC useFocusRing({ within: true }) on the root: `data-focused` / `data-focus-visible` written by the handlers.
+    const { onFocusIn, onFocusOut } = props;
+    // `data-disabled` through the spread: an accessor for a live `isDisabled`.
+    const dom = liveAssign(globalDOMProps(props, TABS_OWNED), { "data-disabled": state.disabled ? tabsDisabledAttr(state) : dataBool(state.isDisabled) });
+    const slot = props.slot || undefined;
+    const focusIn = (e) => {
+        const el = e.currentTarget;
+        setDataAttr(el, "data-focused", true);
+        focusRingFocus(ringOf(el, true, "data-focus-visible"), e);
+        onFocusIn?.(e);
+    };
+    const focusOut = (e) => {
+        const el = e.currentTarget;
+        if (!el.contains(e.relatedTarget))
+            setDataAttr(el, "data-focused", false);
+        focusRingBlur(ringOf(el, true, "data-focus-visible"), e);
+        onFocusOut?.(e);
+    };
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: ref,
+            id: props.id,
+            slot,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-orientation": orientationAttr(state),
+            onFocusIn: focusIn,
+            onFocusOut: focusOut,
+            children: () => <Provider values={[[TabListStateContext, state]]}>{rp.children()}</Provider>,
+        }, values);
+    return (<div {...dom} ref={ref} id={props.id} slot={slot} class={rp.class()} style={rp.style()} data-orientation={tabsOrientation(state)} onFocusIn={focusIn} onFocusOut={focusOut}>
+      <Provider values={[[TabListStateContext, state]]}>{rp.children()}</Provider>
+    </div>);
+}
+const LIST_OWNED = ["style", "onPointerDown"];
+/**
+ * A TabList is used within Tabs to group tabs that a user can switch between. The ids of the items within the
+ * <TabList> must match up with a corresponding item inside the <TabPanels> (RAC `TabList`).
+ */
+export function TabList(props) {
+    // Live props (P5): class / style stay live; the rest of the body is read once (untracked).
+    return untrack(() => tabList(props));
+}
+function tabList(props) {
+    const state = useContext(TabListStateContext);
+    const { items, children, idScope } = props;
+    // RAC: outside Tabs (its build pass) a TabList is a plain Collection.
+    if (!state)
+        return (<Collection items={items} idScope={idScope}>
+        {children}
+      </Collection>);
+    const router = useRouter();
+    const renderer = useContext(CollectionRendererContext);
+    // Resumable: the lazy collection slot captures `customRenderer` (undefined for the default renderer).
+    const customRenderer = renderer === DefaultCollectionRenderer ? undefined : renderer;
+    const orientation = orientationAttr(state);
+    const values = { orientation: () => tabsOrientation(state), state };
+    // Not `renderPropsOf`: the children (collection content) must stay out of the resumable `rp`.
+    const rp = resolveRenderProps({ class: props.class, style: props.style, values, defaultClassName: "rv-TabList" }, hasLive(props) ? liveRenderProps(props, ["class", "style"]) : undefined);
+    const id = state.id + "-tablist";
+    // react-aria useLabels: with both a label and labelledby, the element labels itself too.
+    const ariaLabel = props["aria-label"], ownLabelledBy = props["aria-labelledby"];
+    const labelledBy = ariaLabel && ownLabelledBy ? [...new Set([id, ...ownLabelledBy.split(/\s+/)])].join(" ") : ownLabelledBy;
+    const describedBy = props["aria-describedby"], details = props["aria-details"];
+    const userPointerDown = props.onPointerDown;
+    const dom = globalDOMProps(props, LIST_OWNED);
+    const content = () => (<Collection items={items} idScope={idScope}>
+      {children}
+    </Collection>);
+    const handlers = {
+        onKeyDown: (event) => tabListKeyDown(state, event, router),
+        onPointerDown: (event) => {
+            tabListPointerDown(event);
+            userPointerDown?.(event);
+        },
+        onFocusIn: (event) => tabListFocusIn(state, event, router),
+        onFocusOut: (event) => tabListFocusOut(state, event),
+    };
+    if (props.render)
+        return props.render({
+            ...dom,
+            ref: props.ref,
+            id,
+            role: "tablist",
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "aria-label": ariaLabel,
+            "aria-labelledby": labelledBy,
+            "aria-describedby": describedBy,
+            "aria-details": details,
+            "aria-orientation": orientation,
+            "data-orientation": orientation,
+            "data-collection": state.id,
+            "data-rk": tabsKeysAttr(state),
+            ...handlers,
+            children: () => (<SharedElementTransition>
+            {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: null, content, idScope })}
+          </SharedElementTransition>),
+        }, values);
+    return (<div {...dom} ref={props.ref} id={id} role="tablist" class={rp.class()} style={rp.style()} aria-label={ariaLabel} aria-labelledby={labelledBy} aria-describedby={describedBy} aria-details={details} aria-orientation={tabsOrientation(state)} data-orientation={tabsOrientation(state)} data-collection={state.id} data-rk={tabsKeys(state)} onKeyDown={handlers.onKeyDown} onPointerDown={handlers.onPointerDown} onFocusIn={handlers.onFocusIn} onFocusOut={handlers.onFocusOut}>
+      {/* RAC TabList: the tabs share one SharedElementTransition scope (an animated SelectionIndicator moves between them). */}
+      <SharedElementTransition>
+        {(customRenderer ?? DefaultCollectionRenderer).CollectionRoot({ collection: null, content, idScope })}
+      </SharedElementTransition>
+    </div>);
+}
+const TAB_OWNED = ["onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onDragStart", "onClick", "style"];
+/** A Tab provides a title for an individual item within a TabList (RAC `Tab`). */
+export const Tab = /*#__PURE__*/ createLeafComponent(TabItemNode, function Tab(inProps, inRef, item) {
+    // Live props (P5): `isDisabled` / class / style / children stay live; the rest of the body is read once (untracked).
+    return untrack(() => tabItem(inProps, inRef, item));
+});
+/** A live tab's disabled state (a returned arrow: resumable). */
+function tabDisabled(state, key, itemDisabled) {
+    return () => isTabDisabled(state, key, itemDisabled);
+}
+/** `aria-disabled` / `data-disabled` of a live tab (returned arrows: resumable). */
+function tabDisabledAttrs(isDisabled) {
+    return { "aria-disabled": () => (isDisabled() ? "true" : undefined), "data-disabled": () => dataBool(isDisabled()) };
+}
+function tabItem(inProps, inRef, item) {
+    const state = useContext(TabListStateContext);
+    if (!state)
+        throw new Error("Tab must be rendered inside a TabList within Tabs.");
+    const key = item.key;
+    const router = useRouter();
+    const live = hasLive(inProps);
+    const itemIsDisabled = live ? liveAt(liveView(inProps, ["isDisabled"]), "isDisabled") : !!inProps.isDisabled;
+    // RA useTab → useSelectableItem → useFocusable: FocusableContext (TooltipTrigger) props / handlers / ref reach the tab
+    // (read once: the disabled state at creation).
+    const [props, focusableRef, focusAttrs] = mergeFocusableContext(inProps, useContext(FocusableContext), isTabDisabled(state, key, itemIsDisabled));
+    const forwardedRef = mergeRefValues(inRef, focusableRef);
+    // Resumable closures read locals only (a `props.x` read captures the whole props object).
+    const { onHoverStart, onHoverEnd, onHoverChange, onFocus, onBlur, onFocusChange, onPressStart, onPressEnd, onPressChange, onPress, onPressUp, onClick } = props;
+    const href = props.href;
+    const isDisabled = typeof itemIsDisabled === "function" || state.disabled || state.live?.disabledKeys
+        ? tabDisabled(state, key, itemIsDisabled)
+        : isTabDisabled(state, key, itemIsDisabled);
+    const isSelected = () => isTabSelected(state, key);
+    const wantsStates = isFn(props.class) || isFn(props.style) || isFn(props.children);
+    const hovered = wantsStates ? signal(false) : undefined;
+    const focused = wantsStates ? signal(false) : undefined;
+    const focusVisible = wantsStates ? signal(false) : undefined;
+    // useTab → useSelectableItem's usePress (selection) + the tab's own press events.
+    const { pressProps: press, isPressed } = pressProps({
+        isDisabled,
+        onPressStart: (e) => {
+            tabPressStart(state, e, router);
+            onPressStart?.(e);
+        },
+        onPressUp: (e) => {
+            tabPressUp(state, e, router);
+            onPressUp?.(e);
+        },
+        onPress: (e) => {
+            tabPress(state, e, router);
+            onPress?.(e);
+        },
+        onPressEnd,
+        onPressChange,
+        onClick,
+    });
+    const interaction = {
+        isDisabled,
+        onHoverStart,
+        onHoverEnd,
+        onHoverChange,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onFocusChange,
+        states: wantsStates ? { isHovered: hovered, isFocused: focused, isFocusVisible: focusVisible } : undefined,
+    };
+    const { onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseDown, onDragStart, onKeyDown, onKeyUp } = props;
+    const own = mergeProps(press, {
+        onClick: (e) => tabClick(state, e, router),
+        onPointerEnter: (e) => hoverStateEnter(interaction, e),
+        onPointerLeave: (e) => hoverStateLeave(interaction, e),
+        onFocus: (e) => focusStateFocus(interaction, e),
+        onBlur: (e) => focusStateBlur(interaction, e),
+    });
+    const handlers = mergeProps(own, { onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseDown, onDragStart, onKeyDown, onKeyUp });
+    const values = {
+        isHovered: () => !!hovered?.(),
+        isPressed,
+        isSelected,
+        isFocused: () => !!focused?.(),
+        isFocusVisible: () => !!focusVisible?.(),
+        isDisabled: () => read(isDisabled),
+    };
+    const rp = resolveRenderProps({ class: props.class, style: props.style, children: props.children, values, defaultClassName: "rv-Tab" }, live ? liveRenderProps(props) : undefined);
+    const dom = globalDOMProps(props, TAB_OWNED);
+    const textValue = item.textValue || undefined;
+    const selection = { isSelected };
+    // RAC Tab: `SelectionIndicatorContext` around the tab content. A function called in the tab's children: the content's
+    // signal reads (a SelectionIndicator's) belong to that child site, so a resumed page re-creates the content only.
+    const content = () => <Provider values={[[SelectionIndicatorContext, selection]]}>{rp.children()}</Provider>;
+    const link = href != null
+        ? {
+            href: routerHref(router, href),
+            hreflang: props.hrefLang,
+            target: props.target,
+            rel: props.rel,
+            download: props.download === true ? "" : props.download || undefined,
+            ping: props.ping,
+            referrerpolicy: props.referrerPolicy,
+        }
+        : {};
+    const attrs = {
+        id: tabId(state, key),
+        role: "tab",
+        "data-collection": state.id,
+        "data-key": String(key),
+        "data-key-type": typeof key === "number" ? "number" : undefined,
+        "data-text": textValue,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": props["aria-describedby"],
+        "aria-details": props["aria-details"],
+        ...(typeof isDisabled === "function"
+            ? tabDisabledAttrs(isDisabled)
+            : { "aria-disabled": isDisabled ? "true" : undefined, "data-disabled": dataBool(isDisabled) }),
+    };
+    if (props.render)
+        return props.render({
+            ...dom,
+            ...focusAttrs,
+            ...attrs,
+            ...handlers,
+            ref: forwardedRef,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            ...link,
+            "aria-selected": () => tabSelected(state, key),
+            "aria-controls": () => (isSelected() ? tabPanelId(state, key) : undefined),
+            tabindex: () => tabTabIndex(state, key, read(isDisabled)),
+            "data-selected": () => dataBool(isSelected()),
+            "data-pressed": () => dataBool(isPressed()),
+            children: content,
+        }, values);
+    return href != null ? (<a {...dom} {...readAttrs(focusAttrs)} {...attrs} ref={forwardedRef} class={rp.class()} style={rp.style()} {...link} aria-selected={tabSelected(state, key)} aria-controls={isSelected() ? tabPanelId(state, key) : undefined} tabIndex={tabTabIndex(state, key, read(isDisabled))} data-selected={dataBool(isSelected())} data-pressed={dataBool(isPressed())} {...handlers}>
+      {content()}
+    </a>) : (<div {...dom} {...readAttrs(focusAttrs)} {...attrs} ref={forwardedRef} class={rp.class()} style={rp.style()} aria-selected={tabSelected(state, key)} aria-controls={isSelected() ? tabPanelId(state, key) : undefined} tabIndex={tabTabIndex(state, key, read(isDisabled))} data-selected={dataBool(isSelected())} data-pressed={dataBool(isPressed())} {...handlers}>
+      {content()}
+    </div>);
+}
+/** Groups multiple `<TabPanel>` elements, and provides CSS variables for animated transitions (RAC `TabPanels`). */
+export function TabPanels(props) {
+    if (isHidden())
+        return null;
+    // Live props (P5): the body is read once (untracked). The panel collection stays tracked: on the server the
+    // TabPanel `Show` reads are the enclosing site's resume dependencies (untracked → no region, the panel never switched).
+    const { items, children, idScope } = untrack(() => ({ items: props.items, children: props.children, idScope: props.idScope }));
+    const content = (<Collection items={items} idScope={idScope}>
+      {children}
+    </Collection>);
+    return untrack(() => tabPanels(props, content));
+}
+function tabPanels(props, content) {
+    const state = useContext(TabListStateContext);
+    // RAC: animate `--tab-panel-width` / `--tab-panel-height` when the element's CSS transitions its size (browser-created only).
+    let ref = props.ref;
+    if (isBrowser && state) {
+        const element = createRef();
+        ref = props.ref ? mergeRefs(props.ref, element) : element;
+        let selected = untrack(state.selectedKey);
+        let hasTransition = null;
+        let prevSize = null;
+        clientEffect(() => {
+            const key = state.selectedKey();
+            const el = element();
+            if (!el)
+                return;
+            untrack(() => {
+                hasTransition ??= /width|height|block-size|inline-size|all/.test(window.getComputedStyle(el).transition);
+                if (hasTransition && selected != null && selected !== key) {
+                    // Measure auto size.
+                    el.style.setProperty("--tab-panel-width", "auto");
+                    el.style.setProperty("--tab-panel-height", "auto");
+                    const { width, height } = el.getBoundingClientRect();
+                    if (prevSize && (prevSize.width !== width || prevSize.height !== height)) {
+                        // Revert to previous size.
+                        el.style.setProperty("--tab-panel-width", prevSize.width + "px");
+                        el.style.setProperty("--tab-panel-height", prevSize.height + "px");
+                        // Force style re-calculation to trigger animations.
+                        void window.getComputedStyle(el).height;
+                        // Animate to current pixel size.
+                        el.style.setProperty("--tab-panel-width", width + "px");
+                        el.style.setProperty("--tab-panel-height", height + "px");
+                        // When animations complete, revert back to auto size.
+                        Promise.all(el.getAnimations().map((a) => a.finished))
+                            .then(() => {
+                            el.style.setProperty("--tab-panel-width", "auto");
+                            el.style.setProperty("--tab-panel-height", "auto");
+                        })
+                            .catch(() => { });
+                    }
+                }
+                // Deviation: the previous size is the one measured after the last change (RA measures it during the render).
+                if (hasTransition)
+                    prevSize = el.getBoundingClientRect();
+                selected = key;
+            });
+        });
+    }
+    const dom = globalDOMProps(props, ["style"]);
+    const className = props.class || "rv-TabPanels";
+    const attrs = {
+        ...dom,
+        ref: ref,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": props["aria-describedby"],
+        "aria-details": props["aria-details"],
+        class: className,
+        style: props.style,
+    };
+    if (props.render)
+        return props.render({ ...attrs, children: () => content }, undefined);
+    return <div {...attrs}>{content}</div>;
+}
+/** A TabPanel provides the content for a tab (RAC `TabPanel`). */
+export function TabPanel(inProps) {
+    if (isHidden())
+        return null;
+    // Live props (P5): class / style / children stay live; the rest of the body is read once (untracked). The `Show`
+    // stays tracked: on the server its `when` read is the branch's resume dependency.
+    const shared = untrack(() => panelShared(inProps));
+    if (shared.props.shouldForceMount)
+        return <TabPanelInner shared={shared}/>;
+    return <Show when={() => shared.isSelected() || shared.isExiting()}>{() => <TabPanelInner shared={shared}/>}</Show>;
+}
+function panelShared(inProps) {
+    // RAC useCachedChildren: a TabPanel rendered for an `items` row gets the row's id.
+    const rowId = collectionItemId();
+    const props = rowId != null && inProps.id == null ? liveAssign(inProps, { id: rowId }) : inProps;
+    const state = useContext(TabListStateContext);
+    if (!state)
+        throw new Error("TabPanel must be rendered inside Tabs.");
+    const key = props.id;
+    const isSelected = () => isTabSelected(state, key);
+    const element = isBrowser ? createRef() : undefined;
+    // Object-literal arrows (resumable symbols): a conditional bare arrow captured by the panel is not serializable.
+    const idle = { isExiting: () => false };
+    const isExiting = element ? createExitAnimation(element, isSelected) : idle.isExiting;
+    return { props, key, state, isSelected, isExiting, element, initial: { selected: untrack(isSelected) } };
+}
+const PANEL_OWNED = ["style", "inert", "onFocus", "onBlur"];
+function TabPanelInner(input) {
+    return untrack(() => tabPanelInner(input));
+}
+function tabPanelInner(input) {
+    const { props, key, state, isSelected, isExiting, element, initial } = input.shared;
+    const first = initial.selected;
+    initial.selected = false;
+    const idle = { isEntering: () => false };
+    const isEntering = element && !first ? createEnterAnimation(element) : idle.isEntering;
+    const wantsStates = isFn(props.class) || isFn(props.style) || isFn(props.children);
+    const focused = wantsStates ? signal(false) : undefined;
+    const focusVisible = wantsStates ? signal(false) : undefined;
+    const ring = { states: wantsStates ? { isFocused: focused, isFocusVisible: focusVisible } : undefined };
+    const values = {
+        isFocused: () => !!focused?.(),
+        isFocusVisible: () => !!focusVisible?.(),
+        isInert: () => !isSelected(),
+        isEntering,
+        isExiting,
+        state,
+    };
+    const rp = renderPropsOf(props, { values, defaultClassName: "rv-TabPanel" });
+    const ownInert = !!props.inert;
+    const ariaLabel = props["aria-label"], ownLabelledBy = props["aria-labelledby"], describedBy = props["aria-describedby"], details = props["aria-details"];
+    const panelId = tabPanelId(state, key);
+    // react-aria useTabPanel: labelled by the selected tab (+ useLabels self-reference with an aria-label).
+    const labelledBy = () => {
+        const selected = state.selectedKey();
+        const tab = selected == null ? undefined : tabId(state, selected);
+        const ids = [ariaLabel && (ownLabelledBy || tab) ? panelId : undefined, ...(ownLabelledBy ? ownLabelledBy.split(/\s+/) : []), tab].filter(Boolean);
+        return [...new Set(ids)].join(" ") || undefined;
+    };
+    // A synchronous callback merge (mergeRefValues assigns from an effect): the user ref is set on mount, like React.
+    const ref = element ? (props.ref ? mergeRefs(props.ref, element) : element) : props.ref;
+    const dom = globalDOMProps(props, PANEL_OWNED);
+    const { onFocus, onBlur } = props;
+    // useHasTabbableChild: a panel created in the browser drops its tab stop when it holds a tabbable element.
+    if (element)
+        clientEffect(() => (isSelected() ? void untrack(() => syncPanelTabIndex(state)) : undefined));
+    const handlers = {
+        onFocus: (e) => {
+            focusStateFocus(ring, e);
+            onFocus?.(e);
+        },
+        onBlur: (e) => {
+            focusStateBlur(ring, e);
+            onBlur?.(e);
+        },
+    };
+    // A panel only carries the tabpanel role, ids and labels while its tab is selected (RAC: an inactive force-mounted
+    // or exiting panel gets the DOM / render props only).
+    const children = () => (<Provider values={[
+            [TabsContext, null],
+            [TabListStateContext, null],
+            [CollectionRendererContext, DefaultCollectionRenderer],
+        ]}>
+      {rp.children()}
+    </Provider>);
+    if (props.render)
+        return props.render({
+            ...dom,
+            ...handlers,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            id: () => (isSelected() ? panelId : undefined),
+            role: () => (isSelected() ? "tabpanel" : undefined),
+            tabindex: () => (isSelected() ? 0 : undefined),
+            "aria-label": () => (isSelected() ? ariaLabel : undefined),
+            "aria-labelledby": () => (isSelected() ? labelledBy() : undefined),
+            "aria-describedby": () => (isSelected() ? describedBy : undefined),
+            "aria-details": () => (isSelected() ? details : undefined),
+            inert: () => !isSelected() || ownInert || undefined,
+            "data-inert": () => (isSelected() ? undefined : "true"),
+            "data-entering": () => dataBool(isEntering()),
+            "data-exiting": () => dataBool(isExiting()),
+            children,
+        }, values);
+    return (<div {...dom} ref={ref} class={rp.class()} style={rp.style()} id={isSelected() ? panelId : undefined} role={isSelected() ? "tabpanel" : undefined} tabIndex={isSelected() ? 0 : undefined} aria-label={isSelected() ? ariaLabel : undefined} aria-labelledby={isSelected() ? labelledBy() : undefined} aria-describedby={isSelected() ? describedBy : undefined} aria-details={isSelected() ? details : undefined} inert={!isSelected() || ownInert || undefined} data-inert={isSelected() ? undefined : "true"} data-entering={dataBool(isEntering())} data-exiting={dataBool(isExiting())} onFocus={handlers.onFocus} onBlur={handlers.onBlur}>
+      {children()}
+    </div>);
+}

package/tabs/keyboard-delegate.d.ts

@@ -0,0 +1,17 @@
+import type { Collection, Direction, Key, KeyboardDelegate, Node, Orientation } from "../_adapters/collection.js";
+export declare class TabsKeyboardDelegate<T> implements KeyboardDelegate {
+    private collection;
+    private flipDirection;
+    private disabledKeys;
+    private tabDirection;
+    constructor(collection: Collection<Node<T>>, direction: Direction, orientation: Orientation, disabledKeys?: Set<Key>);
+    getKeyLeftOf(key: Key): Key | null;
+    getKeyRightOf(key: Key): Key | null;
+    private isDisabled;
+    getFirstKey(): Key | null;
+    getLastKey(): Key | null;
+    getKeyAbove(key: Key): Key | null;
+    getKeyBelow(key: Key): Key | null;
+    getNextKey(startKey: Key): Key | null;
+    getPreviousKey(startKey: Key): Key | null;
+}

package/tabs/keyboard-delegate.js

@@ -0,0 +1,64 @@
+import { hasKey } from "../_adapters/grid-selection.js";
+export class TabsKeyboardDelegate {
+    collection;
+    flipDirection;
+    disabledKeys;
+    tabDirection;
+    constructor(collection, direction, orientation, disabledKeys = new Set()) {
+        this.collection = collection;
+        // getKeyLeftOf / getKeyRightOf follow the text direction regardless of orientation, so
+        // ArrowLeft always moves to the next tab in RTL. getKeyAbove / getKeyBelow are never flipped.
+        this.flipDirection = direction === "rtl";
+        this.disabledKeys = disabledKeys;
+        this.tabDirection = orientation === "horizontal";
+    }
+    getKeyLeftOf(key) {
+        return this.flipDirection ? this.getNextKey(key) : this.getPreviousKey(key);
+    }
+    getKeyRightOf(key) {
+        return this.flipDirection ? this.getPreviousKey(key) : this.getNextKey(key);
+    }
+    isDisabled(key) {
+        return hasKey(this.disabledKeys, key) || !!this.collection.getItem(key)?.props?.isDisabled;
+    }
+    getFirstKey() {
+        let key = this.collection.getFirstKey();
+        if (key != null && this.isDisabled(key))
+            key = this.getNextKey(key);
+        return key;
+    }
+    getLastKey() {
+        let key = this.collection.getLastKey();
+        if (key != null && this.isDisabled(key))
+            key = this.getPreviousKey(key);
+        return key;
+    }
+    getKeyAbove(key) {
+        if (this.tabDirection)
+            return null;
+        return this.getPreviousKey(key);
+    }
+    getKeyBelow(key) {
+        if (this.tabDirection)
+            return null;
+        return this.getNextKey(key);
+    }
+    getNextKey(startKey) {
+        let key = startKey;
+        do {
+            key = this.collection.getKeyAfter(key);
+            if (key == null)
+                key = this.collection.getFirstKey();
+        } while (key != null && this.isDisabled(key) && key !== startKey);
+        return key;
+    }
+    getPreviousKey(startKey) {
+        let key = startKey;
+        do {
+            key = this.collection.getKeyBefore(key);
+            if (key == null)
+                key = this.collection.getLastKey();
+        } while (key != null && this.isDisabled(key) && key !== startKey);
+        return key;
+    }
+}