@intentface/ui 0.0.0-stage → 0.7.0

package/dist/tabs/store.d.ts

@@ -0,0 +1,131 @@
+import type { RefObject } from "react";
+import { type ChangeEventDetails } from "../internal/change-event-details.js";
+import { type TabsHover } from "./hover.js";
+/**
+ * Tabs store — an open-ended, closable collection with at most one tab open.
+ *
+ * Two things follow from that sentence and shape everything else:
+ *
+ * **Open-ness is the selection.** There is no separate `open` flag; `value` is
+ * either a tab id or `null`, and `null` means nothing is showing. A strip of
+ * page tabs simply never reaches `null`; a dock of chat tabs does, every time
+ * you close the last one.
+ *
+ * **Order is data.** `items` is an ordered array on the store, not something
+ * derived from the DOM. That is why reordering needs no support here beyond
+ * `move` — drag it with whatever library you like through the `render` prop,
+ * and the result is a state change like any other.
+ *
+ * The instance model matches the shell's: `useTabs` resolves the nearest
+ * `Tabs.Root` through context, `useTabsStore(handle, selector)` takes an
+ * explicit handle for anywhere else, and there is no global fallback.
+ */
+/**
+ * Where the selection lands when the open tab is closed.
+ *
+ * Unset means nowhere: closing what was open shows nothing. Handing over is a
+ * behaviour, and a primitive should not invent one you did not ask for — you
+ * would have no reason to suspect it was configurable.
+ */
+export type TabsSelectOnClose = 
+/** Whatever slides into the vacated slot — an editor's behaviour. */
+"adjacent"
+/** The tab you were in before this one, falling back to adjacent. */
+ | "recent";
+/** Why the selection or the collection changed. */
+export type TabsRootChangeEventReason = 
+/** A click, Enter or Space on a tab. */
+"trigger-press"
+/** The pointer resting on, or leaving, an `openOnHover` tab. */
+ | "trigger-hover"
+/** Arrowing onto a tab with `activateOnFocus`. */
+ | "list-navigation"
+/** A press on `Tabs.Close`. */
+ | "close-press"
+/** Delete or Backspace on a focused tab. */
+ | "keyboard" | "escape-key"
+/** A store action called from your own code. */
+ | "imperative-action";
+export type TabsRootChangeEventDetails = ChangeEventDetails<TabsRootChangeEventReason>;
+/** Which way the selection just moved, for panels that slide rather than fade. */
+export type TabsDirection = "left" | "right" | "up" | "down" | "none";
+export type TabsState = {
+    value: string | null;
+    /** Set on every selection change and left alone until the next one. */
+    direction: TabsDirection;
+    items: string[];
+    /** Most recently opened first, and what the `recent` close policy reads. */
+    recent: string[];
+    /** Whether a viewport is rendered, so a trigger only claims one that exists. */
+    hasViewport: boolean;
+    /** Ids that cannot be selected. They stay in the arrow-key ring regardless. */
+    disabled: ReadonlySet<string>;
+    /** Add a tab (or move it, if already open) and select it. */
+    open: (value: string, options?: {
+        at?: number;
+    }) => void;
+    close: (value: string) => void;
+    select: (value: string | null) => void;
+    /** Step the selection — what the arrow keys drive. */
+    selectRelative: (direction: 1 | -1, options?: {
+        loop?: boolean;
+    }) => void;
+    move: (value: string, toIndex: number) => void;
+    setItems: (items: string[]) => void;
+};
+export type TabsStore = {
+    subscribe: (listener: () => void) => () => void;
+    getSnapshot: () => TabsState;
+    /** Seed state before the first render commits: no notify, no write-back. */
+    hydrate: (state: {
+        items?: string[];
+        value?: string | null;
+    }) => void;
+    selectOnCloseRef: RefObject<TabsSelectOnClose | undefined>;
+    orientationRef: RefObject<"horizontal" | "vertical">;
+    valueControlledRef: RefObject<boolean>;
+    itemsControlledRef: RefObject<boolean>;
+    onValueChangeRef: RefObject<((value: string | null, eventDetails: TabsRootChangeEventDetails) => void) | null>;
+    onItemsChangeRef: RefObject<((items: string[], eventDetails: TabsRootChangeEventDetails) => void) | null>;
+    /** Commit past the controlled guard — how the owner pushes its decision in. */
+    commitValue: (value: string | null) => void;
+    commitItems: (items: string[]) => void;
+    /** `select` and `close` as the parts call them, with the reason behind the change. */
+    selectWithDetails: (value: string | null, eventDetails: TabsRootChangeEventDetails) => void;
+    closeWithDetails: (value: string, eventDetails: TabsRootChangeEventDetails) => void;
+    /** Hover for every `openOnHover` tab and the popup, decided in one place. */
+    hover: TabsHover;
+    registerViewport: (present: boolean) => void;
+    registerDisabled: (value: string, disabled: boolean) => void;
+    /**
+     * Tab elements by id. Imperative, not reactive: it exists so focus can be
+     * moved somewhere sensible *before* a closing tab unmounts, which is the one
+     * moment a reactive lookup would already be too late.
+     */
+    elements: Map<string, HTMLElement>;
+    registerElement: (value: string, element: HTMLElement | null) => void;
+    /**
+     * What a floating surface anchors to, which is not the same element focus
+     * goes to. Focus belongs on the tab's button; the popup should line up with
+     * the whole visual item, close button included — otherwise it sits short by
+     * exactly the width of the ×.
+     */
+    anchors: Map<string, HTMLElement>;
+    registerAnchor: (value: string, element: HTMLElement | null) => void;
+    /** The floating surface while it is mounted: where the hover cone aims, and what Escape returns focus from. */
+    popupRef: RefObject<HTMLElement | null>;
+    /** Stable per-instance id, assigned by the mounting Tabs.Root from useId. */
+    baseId: string;
+};
+export declare const createTabsStore: () => TabsStore;
+export declare const TabsStoreContext: import("react").Context<TabsStore | null>;
+/** Internal: parts resolve the store their Tabs.Root provided. */
+export declare const useTabsContextStore: () => TabsStore;
+/** Subscribe to an explicit `Tabs.createStore()` handle, from outside the tree. */
+export declare const useTabsStore: <Selected = TabsState>(store: TabsStore, selector?: (tabs: TabsState) => Selected) => Selected;
+/**
+ * Subscribe from inside the tree. Select a primitive — a boolean, an id — so
+ * the subscription can settle; a selector building a fresh array or object on
+ * every call never will.
+ */
+export declare const useTabs: <Selected = TabsState>(selector?: (tabs: TabsState) => Selected) => Selected;

package/dist/tabs/store.js

@@ -0,0 +1,248 @@
+"use client";
+import { createContext, use, useSyncExternalStore } from "react";
+import { createChangeEventDetails, } from "../internal/change-event-details.js";
+import { adjacentTo, insertAt, moveTo, step } from "../internal/collection.js";
+import { createTabsHover } from "./hover.js";
+/** Enough history to be useful, bounded so a long session cannot grow it forever. */
+const RECENT_LIMIT = 50;
+const sameOrder = (a, b) => a.length === b.length && a.every((item, index) => item === b[index]);
+export const createTabsStore = () => {
+    const listeners = new Set();
+    const notify = () => {
+        for (const listener of listeners)
+            listener();
+    };
+    const selectOnCloseRef = { current: undefined };
+    const orientationRef = { current: "horizontal" };
+    const valueControlledRef = { current: false };
+    const itemsControlledRef = { current: false };
+    const onValueChangeRef = { current: null };
+    const onItemsChangeRef = { current: null };
+    const popupRef = { current: null };
+    const elements = new Map();
+    const anchors = new Map();
+    let snapshot;
+    const anchorFor = (value) => anchors.get(value) ?? elements.get(value) ?? null;
+    /**
+     * Which way the selection moved, measured off the two tabs' own rectangles
+     * so a reordered strip still reports the truth.
+     *
+     * When either element is missing — a tab opened and selected in the same
+     * commit has not rendered yet — fall back to list order. Comparing the
+     * *values* would only work when they happen to sort meaningfully; we own the
+     * ordered array, so we can just look.
+     */
+    const directionBetween = (from, to) => {
+        if (from === null || to === null || from === to)
+            return "none";
+        const horizontal = orientationRef.current === "horizontal";
+        const fromElement = anchorFor(from);
+        const toElement = anchorFor(to);
+        if (!fromElement || !toElement) {
+            const fromIndex = snapshot.items.indexOf(from);
+            const toIndex = snapshot.items.indexOf(to);
+            if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex)
+                return "none";
+            const forward = toIndex > fromIndex;
+            return horizontal ? (forward ? "right" : "left") : forward ? "down" : "up";
+        }
+        const fromRect = fromElement.getBoundingClientRect();
+        const toRect = toElement.getBoundingClientRect();
+        if (horizontal) {
+            if (toRect.left === fromRect.left)
+                return "none";
+            return toRect.left > fromRect.left ? "right" : "left";
+        }
+        if (toRect.top === fromRect.top)
+            return "none";
+        return toRect.top > fromRect.top ? "down" : "up";
+    };
+    const commitValue = (value) => {
+        if (snapshot.value === value)
+            return;
+        const direction = directionBetween(snapshot.value, value);
+        const recent = value === null
+            ? snapshot.recent
+            : [value, ...snapshot.recent.filter((id) => id !== value)].slice(0, RECENT_LIMIT);
+        snapshot = { ...snapshot, value, direction, recent };
+        notify();
+    };
+    const commitItems = (items) => {
+        if (sameOrder(snapshot.items, items))
+            return;
+        snapshot = { ...snapshot, items };
+        notify();
+    };
+    const imperative = () => createChangeEventDetails("imperative-action");
+    /** The selection after it has been asked about: hover hears of it, then it commits. */
+    const landValue = (value, eventDetails) => {
+        hover.changed(value, eventDetails.reason);
+        if (!valueControlledRef.current)
+            commitValue(value);
+    };
+    const select = (value, eventDetails) => {
+        // A disabled tab is still reachable by keyboard — that is the point — but
+        // arrowing onto one must not open it.
+        if (value !== null && snapshot.disabled.has(value))
+            return;
+        onValueChangeRef.current?.(value, eventDetails);
+        if (eventDetails.isCanceled)
+            return;
+        landValue(value, eventDetails);
+    };
+    const setItems = (items, eventDetails) => {
+        onItemsChangeRef.current?.(items, eventDetails);
+        if (eventDetails.isCanceled)
+            return;
+        if (!itemsControlledRef.current)
+            commitItems(items);
+    };
+    /** Read against the collection as it stands *before* the close lands. */
+    const successorTo = (closed) => {
+        const policy = selectOnCloseRef.current;
+        if (!policy)
+            return null;
+        // Handing over to a tab that cannot be opened would leave nothing showing.
+        const eligible = (id) => !snapshot.disabled.has(id);
+        if (policy === "recent") {
+            const candidate = snapshot.recent.find((id) => id !== closed && snapshot.items.includes(id) && eligible(id));
+            // No history yet — a fresh session, or everything since has been closed.
+            if (candidate)
+                return candidate;
+        }
+        return adjacentTo(snapshot.items, closed, eligible);
+    };
+    const open = (value, options) => {
+        const eventDetails = imperative();
+        setItems(insertAt(snapshot.items, value, options?.at), eventDetails);
+        if (eventDetails.isCanceled)
+            return;
+        select(value, imperative());
+    };
+    const close = (value, eventDetails) => {
+        const wasOpen = snapshot.value === value;
+        // Computed first: once the item is gone there is no neighbour to find.
+        const successor = wasOpen ? successorTo(value) : snapshot.value;
+        // Cancelling the items change keeps the tab, and the selection with it.
+        setItems(snapshot.items.filter((item) => item !== value), eventDetails);
+        if (eventDetails.isCanceled || !wasOpen)
+            return;
+        // The tab is gone, so the selection must follow it: reported, but not cancellable.
+        const followUp = createChangeEventDetails(eventDetails.reason, eventDetails.event, eventDetails.trigger);
+        onValueChangeRef.current?.(successor, followUp);
+        landValue(successor, followUp);
+    };
+    const selectRelative = (direction, options) => select(step(snapshot.items, snapshot.value, direction, options), imperative());
+    const move = (value, toIndex) => setItems(moveTo(snapshot.items, value, toIndex), imperative());
+    const registerDisabled = (value, disabled) => {
+        if (snapshot.disabled.has(value) === disabled)
+            return;
+        const next = new Set(snapshot.disabled);
+        if (disabled)
+            next.add(value);
+        else
+            next.delete(value);
+        snapshot = { ...snapshot, disabled: next };
+        notify();
+    };
+    const registerViewport = (present) => {
+        if (snapshot.hasViewport === present)
+            return;
+        snapshot = { ...snapshot, hasViewport: present };
+        notify();
+    };
+    const hover = createTabsHover({
+        getSnapshot: () => snapshot,
+        selectWithDetails: select,
+        popupRef,
+    });
+    snapshot = {
+        value: null,
+        direction: "none",
+        items: [],
+        recent: [],
+        hasViewport: false,
+        disabled: new Set(),
+        open,
+        close: (value) => close(value, imperative()),
+        select: (value) => select(value, imperative()),
+        selectRelative,
+        move,
+        setItems: (items) => setItems(items, imperative()),
+    };
+    return {
+        subscribe: (listener) => {
+            listeners.add(listener);
+            return () => {
+                listeners.delete(listener);
+            };
+        },
+        getSnapshot: () => snapshot,
+        hydrate: ({ items, value }) => {
+            const nextItems = items ?? snapshot.items;
+            const nextValue = value === undefined ? snapshot.value : value;
+            snapshot = {
+                ...snapshot,
+                items: nextItems,
+                // A restored selection whose tab is gone is not a selection.
+                value: nextValue !== null && nextItems.includes(nextValue) ? nextValue : null,
+                recent: nextValue !== null && nextItems.includes(nextValue) ? [nextValue] : snapshot.recent,
+            };
+        },
+        selectOnCloseRef,
+        orientationRef,
+        valueControlledRef,
+        itemsControlledRef,
+        onValueChangeRef,
+        onItemsChangeRef,
+        commitValue,
+        commitItems,
+        selectWithDetails: select,
+        closeWithDetails: close,
+        hover,
+        registerViewport,
+        registerDisabled,
+        elements,
+        registerElement: (value, element) => {
+            if (element)
+                elements.set(value, element);
+            else
+                elements.delete(value);
+        },
+        anchors,
+        registerAnchor: (value, element) => {
+            if (element)
+                anchors.set(value, element);
+            else
+                anchors.delete(value);
+        },
+        popupRef,
+        baseId: "",
+    };
+};
+// ---------------------------------------------------------------------------
+// Instance resolution — the nearest Tabs.Root, explicitly.
+// ---------------------------------------------------------------------------
+export const TabsStoreContext = createContext(null);
+/** Internal: parts resolve the store their Tabs.Root provided. */
+export const useTabsContextStore = () => {
+    const store = use(TabsStoreContext);
+    if (!store)
+        throw new Error("Tabs parts must be used within <Tabs.Root>");
+    return store;
+};
+/** Subscribe to an explicit `Tabs.createStore()` handle, from outside the tree. */
+export const useTabsStore = (store, selector) => {
+    const getValue = () => {
+        const state = store.getSnapshot();
+        // Safe: without a selector, Selected defaults to TabsState.
+        return selector ? selector(state) : state;
+    };
+    return useSyncExternalStore(store.subscribe, getValue, getValue);
+};
+/**
+ * Subscribe from inside the tree. Select a primitive — a boolean, an id — so
+ * the subscription can settle; a selector building a fresh array or object on
+ * every call never will.
+ */
+export const useTabs = (selector) => useTabsStore(useTabsContextStore(), selector);

package/dist/tabs/tabs.d.ts

@@ -0,0 +1,217 @@
+import type { ReactNode } from "react";
+import type { PrimitiveProps } from "../internal/primitive-props.js";
+import type { TabsDirection, TabsRootChangeEventDetails, TabsSelectOnClose, TabsStore } from "./store.js";
+/**
+ * An open-ended, closable collection of tabs with at most one open.
+ *
+ * The parts are the same whether the content sits in the layout or floats
+ * above it — that difference is a matter of what you wrap the viewport in, not
+ * a prop:
+ *
+ *   List + Viewport                                in the layout
+ *   List + Portal > Positioner > Popup > Viewport  anchored to the open tab
+ *
+ * The strip and the content both take a function, so neither needs a loop, a
+ * key, or a subscription of its own:
+ *
+ *   <Tabs.Root defaultItems={["a", "b"]} defaultValue="a">
+ *     <Tabs.List>
+ *       {(id) => (
+ *         <Tabs.Trigger value={id}>
+ *           <Tabs.Icon />
+ *           {id}
+ *           <Tabs.Action>
+ *             <Tabs.Close />
+ *           </Tabs.Action>
+ *         </Tabs.Trigger>
+ *       )}
+ *     </Tabs.List>
+ *     <Tabs.Viewport>{(id) => <Document id={id} />}</Tabs.Viewport>
+ *   </Tabs.Root>
+ *
+ * The viewport is one box rather than a panel per tab, and it can sit anywhere
+ * in the tree — inside the popup for a floating surface, or in a card three
+ * components away while the strip stays in the window chrome.
+ *
+ * ## Why this is a toolbar and not a tablist
+ *
+ * ARIA's `tablist` cannot describe this widget, for two independent reasons.
+ * A tablist must own only tabs, so there is nowhere to put a close button; and
+ * it requires exactly one selected tab, so `value: null` — a dock with
+ * everything closed — is not a state it can express. Both are real, and axe
+ * fails the first one outright.
+ *
+ * So the strip is a `toolbar` of buttons, each a disclosure for its panel:
+ * `aria-expanded` says whether its panel is showing and `aria-controls` names
+ * it. Close buttons are real buttons rather than pointer-only affordances,
+ * arrow-key roving focus is exactly what a toolbar is expected to do, and
+ * nothing open is an ordinary state.
+ *
+ * Static, always-one-selected tabs are a different widget, and a `tablist` is
+ * the right role for those.
+ */
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsPartState = {
+    orientation: TabsOrientation;
+    disabled: boolean;
+    /** Nothing is open. A page-tab strip never sees this; a dock does. */
+    empty: boolean;
+    /** Which way the selection last moved, so panels can slide the right way. */
+    direction: TabsDirection;
+};
+export type TabsTriggerState = TabsPartState & {
+    selected: boolean;
+};
+export type TabsRootProps<Value extends string = string> = Omit<PrimitiveProps<"div", TabsPartState>, "defaultValue"> & {
+    defaultValue?: Value | null;
+    value?: Value | null;
+    /** Called before the selection changes. `eventDetails.cancel()` keeps it, except after a close. */
+    onValueChange?: (value: Value | null, eventDetails: TabsRootChangeEventDetails) => void;
+    defaultItems?: Value[];
+    items?: Value[];
+    /** Called before a tab is added, removed or moved. Cancelling a close keeps the tab. */
+    onItemsChange?: (items: Value[], eventDetails: TabsRootChangeEventDetails) => void;
+    /** Where the selection lands when a tab is closed. Unset means nowhere. */
+    selectOnClose?: TabsSelectOnClose;
+    /** An explicit `Tabs.createStore()` handle. Must be stable for the Root's life. */
+    store?: TabsStore;
+    orientation?: TabsOrientation;
+    /** Wrap at the ends of the collection when arrowing. */
+    loop?: boolean;
+    /** Select on arrow rather than only on Enter/Space. */
+    activateOnFocus?: boolean;
+    /** Disables every tab at once — a read-only view of the collection. */
+    disabled?: boolean;
+    /**
+     * Escape closes whatever is open. The only dismissal the primitive takes on:
+     * a non-modal surface is one you work behind, so an outside press belongs to
+     * the page, not to us.
+     */
+    dismissOnEscape?: boolean;
+    children?: ReactNode;
+};
+/**
+ * The provider and container. Owns the item order, the selection and the
+ * roving focus, so every other part reads rather than holds state.
+ * Renders a `<div>` element.
+ */
+export declare const TabsRoot: <Value extends string = string>({ defaultValue, value, onValueChange, defaultItems, items, onItemsChange, selectOnClose, store: storeProp, orientation, loop, activateOnFocus, disabled, dismissOnEscape, className, render, style, ...elementProps }: TabsRootProps<Value>) => import("react").JSX.Element;
+export type TabsListProps = Omit<PrimitiveProps<"div", TabsPartState>, "children"> & {
+    /**
+     * Plain children when you are laying the strip out yourself. A function
+     * renders one call per tab, in order, and saves you the map, the keys and a
+     * subscription of your own.
+     */
+    children?: ReactNode | ((value: string, index: number) => ReactNode);
+};
+/**
+ * The strip. A `toolbar` of disclosures rather than a `tablist`, because a
+ * tablist may hold only tabs and must always have one selected.
+ * Renders a `<div>` element.
+ */
+export declare const TabsList: ({ children, className, render, style, ...elementProps }: TabsListProps) => import("react").JSX.Element;
+export type TabsTriggerProps = PrimitiveProps<"div", TabsTriggerState> & {
+    /** Required outside a `Tabs.List`; inside one it comes from the collection. */
+    value?: string;
+    disabled?: boolean;
+    /** Open the tab when the mouse rests on it. Touch has no hover, so a tap still presses. */
+    openOnHover?: boolean;
+    /** How long the mouse rests on the tab before it opens, in ms. Needs `openOnHover`. */
+    openDelay?: number;
+    /** How long a hover-opened tab stays open after the mouse leaves, in ms. Needs `openOnHover`. */
+    closeDelay?: number;
+};
+/**
+ * A tab: the whole pill, and the thing you press.
+ *
+ * It is a `div` with `role="button"` rather than a `<button>`, so that a close
+ * button can live inside it. That nesting is what Linear does and it is what
+ * makes the entire pill a click target, but it is not free: `role="button"`
+ * has children-presentational in ARIA, so `axe` reports `nested-interactive`
+ * and the suite suppresses that one rule with a note. A real `<button>` would
+ * be worse — the HTML parser closes an outer button when it meets an inner
+ * one, so server-rendered markup would come back reshaped and hydration would
+ * mismatch.
+ *
+ * The price of not being a native button is that activation is ours to
+ * implement: Enter and Space, by hand.
+ *
+ * One part, two situations, decided by where it sits rather than by a prop:
+ *
+ * - **Inside a `Tabs.List`** it is one of the collection, joins the roving
+ *   focus, and selects. `Delete` closes it.
+ * - **Outside one** it takes an explicit value, keeps its own tab stop, and
+ *   toggles — a panel with no tab behind it, opened anchored to the button
+ *   that owns it and promoted to a real tab only when you call `open()`.
+ *
+ * With `openOnHover`, leaving closes the tab again unless the mouse heads into
+ * the popup. A press on the tab, or a press or focus inside the popup, keeps it.
+ */
+export declare const TabsTrigger: ({ value: explicitValue, disabled: ownDisabled, openOnHover, openDelay, closeDelay, className, render, style, ...elementProps }: TabsTriggerProps) => import("react").JSX.Element;
+export type TabsIconProps = PrimitiveProps<"span", TabsTriggerState> & {
+    value?: string;
+};
+/**
+ * A decorative mark inside a trigger.
+ *
+ * `aria-hidden`, deliberately: the trigger already has an accessible name, and
+ * an icon that repeats it only makes the announcement longer. It carries the
+ * part state too, so the mark can respond to its tab being open without the
+ * consumer reaching for a group selector.
+ */
+export declare const TabsIcon: ({ value: explicitValue, className, render, style, ...elementProps }: TabsIconProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TabsActionProps = PrimitiveProps<"div", TabsTriggerState> & {
+    /** Only outside a tab, where there is none to inherit from. */
+    value?: string;
+};
+/**
+ * The trailing slot inside a tab — where the close button lives.
+ *
+ * Its own part rather than a div of yours for one reason: a tab narrow enough
+ * to truncate has nowhere to put a control. Give this `position: absolute` and
+ * a background that fades to the tab's own colour, and the label runs the full
+ * width and disappears under it instead of colliding with it. A flex box with
+ * padding then centres whatever is inside.
+ *
+ * All of that is your CSS. What the part supplies is the element and the
+ * trigger's state on it — `data-selected` above all, since the fade has to end
+ * in whatever colour the tab currently is.
+ */
+export declare const TabsAction: ({ value: explicitValue, className, render, style, ...elementProps }: TabsActionProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TabsCloseProps = PrimitiveProps<"div", TabsTriggerState> & {
+    value?: string;
+    disabled?: boolean;
+};
+/**
+ * The × inside a tab.
+ *
+ * Also a `div` with `role="button"`, for the same reason its parent is. It
+ * keeps out of the roving order — arrowing along a strip should walk tabs, not
+ * alternate between each tab and its close button — so the keyboard route to
+ * closing is `Delete` on the tab itself. Every event it handles stops there:
+ * nested inside the trigger, anything that escaped would open the tab on its
+ * way out of closing it.
+ */
+export declare const TabsClose: ({ value: explicitValue, disabled: ownDisabled, className, render, style, ...elementProps }: TabsCloseProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TabsViewportState = TabsPartState & {
+    /** The open tab, or null when nothing is. */
+    value: string | null;
+};
+export type TabsViewportProps = Omit<PrimitiveProps<"div", TabsViewportState>, "children"> & {
+    /** Renders the content for whatever is open. Not called when nothing is. */
+    children?: (value: string) => ReactNode;
+};
+/**
+ * The one box that shows a tab's content.
+ *
+ * There is no per-tab element and nothing mounts or unmounts as you switch —
+ * the same box stays put and re-renders its children for whichever value is
+ * open. That is what makes a floating surface simply move rather than tear
+ * itself down, and it is why nothing here needs overlaying or a mount flag.
+ *
+ * The corollary, and it is deliberate: nothing off-screen exists. A tab you
+ * are not looking at has no component, so anything that must keep running
+ * while you are elsewhere — a reply still streaming — belongs in a store
+ * rather than in the panel's own state.
+ */
+export declare const TabsViewport: ({ children, className, render, style, ...elementProps }: TabsViewportProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;