panelui-web 0.10.1 → 0.11.0

package/dist/components/not-found/index.d.ts

@@ -45,6 +45,12 @@
  * time it draws, so a change of theme needs nothing from the page.
  */
 import { type ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 /** How the digit near the pointer reacts. */
 export type NotFoundEffect = 'scatter' | 'dissolve' | 'scramble';
 /** Which of the theme's roles the highlighted digit is drawn in. */
@@ -54,7 +60,7 @@ export interface NotFoundProps extends ComponentProps<'div'> {
     backdrop?: boolean;
 }
 /** The column the code, the title, the description and the actions stand in, centred. */
-declare function NotFoundRoot({ backdrop, className, children, ...props }: NotFoundProps): import("react").JSX.Element;
+declare function NotFoundRoot({ backdrop, className, children, render, ...props }: NotFoundProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace NotFoundRoot {
     var displayName: string;
 }
@@ -82,7 +88,7 @@ export interface NotFoundCodeProps extends Omit<ComponentProps<'div'>, 'children
     label?: string;
 }
 /** The code, drawn in cells on a canvas. Its box keeps the code's shape before anything is drawn. */
-declare function NotFoundCode({ code, effect, fill, color, ambient, highlight, label, className, style, ...props }: NotFoundCodeProps): import("react").JSX.Element;
+declare function NotFoundCode({ code, effect, fill, color, ambient, highlight, label, className, style, render, ...props }: NotFoundCodeProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace NotFoundCode {
     var displayName: string;
 }
@@ -98,14 +104,14 @@ declare namespace NotFoundTitle {
 export interface NotFoundDescriptionProps extends ComponentProps<'p'> {
 }
 /** A line on what to do next. */
-declare function NotFoundDescription({ className, ...props }: NotFoundDescriptionProps): import("react").JSX.Element;
+declare function NotFoundDescription({ className, render, ...props }: NotFoundDescriptionProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace NotFoundDescription {
     var displayName: string;
 }
 export interface NotFoundActionsProps extends ComponentProps<'div'> {
 }
 /** The ways out: links or buttons in a row that wraps on a narrow screen. */
-declare function NotFoundActions({ className, ...props }: NotFoundActionsProps): import("react").JSX.Element;
+declare function NotFoundActions({ className, render, ...props }: NotFoundActionsProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace NotFoundActions {
     var displayName: string;
 }

package/dist/components/not-found/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * NotFound — an error code drawn in pixels that come apart when the pointer
  * reaches them, with a title, a line of help and a way out underneath.
@@ -46,9 +46,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * while something is moving. The canvas reads its colours from the theme each
  * time it draws, so a change of theme needs nothing from the page.
  */
-import { useEffect, useRef, } from 'react';
+import { useEffect, useRef } from 'react';
 import { tv } from 'tailwind-variants';
 import { GLYPH_COLUMNS, GLYPH_ROWS, ICONS, digitGlyph } from './glyphs.js';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const notFoundVariants = tv({
     slots: {
         // `overflow-x-clip` keeps flying cells from widening the page on a phone.
@@ -352,7 +354,10 @@ function createEngine({ canvas, code, fill, highlight, effect: initialEffect, am
                         cell.x += cell.vx * h;
                         cell.y += cell.vy * h;
                     }
-                    if (!digit.active && Math.abs(cell.x - tx) < 0.004 && Math.abs(cell.y - ty) < 0.004 && Math.abs(cell.vx) + Math.abs(cell.vy) < 0.02) {
+                    if (!digit.active &&
+                        Math.abs(cell.x - tx) < 0.004 &&
+                        Math.abs(cell.y - ty) < 0.004 &&
+                        Math.abs(cell.vx) + Math.abs(cell.vy) < 0.02) {
                         cell.x = tx;
                         cell.y = ty;
                         cell.vx = 0;
@@ -587,7 +592,11 @@ function createEngine({ canvas, code, fill, highlight, effect: initialEffect, am
         track(event);
         // Anywhere over the canvas the pointer lights cells, so a frame is wanted
         // even when no digit is close enough to react.
-        if (pointer && pointer.x > -HEAT_RADIUS && pointer.x < columns + HEAT_RADIUS && pointer.y > -HEAT_RADIUS && pointer.y < GLYPH_ROWS + PAD_Y * 2 + HEAT_RADIUS)
+        if (pointer &&
+            pointer.x > -HEAT_RADIUS &&
+            pointer.x < columns + HEAT_RADIUS &&
+            pointer.y > -HEAT_RADIUS &&
+            pointer.y < GLYPH_ROWS + PAD_Y * 2 + HEAT_RADIUS)
             invalidate();
         const { index, distance } = nearest();
         const current = digits.findIndex((digit) => digit.active);
@@ -722,13 +731,21 @@ const backdropStyle = {
     WebkitMaskComposite: 'source-in',
 };
 /** The column the code, the title, the description and the actions stand in, centred. */
-function NotFoundRoot({ backdrop = true, className, children, ...props }) {
+function NotFoundRoot({ backdrop = true, className, children, render, ...props }) {
     const slots = notFoundVariants({ backdrop });
-    return (_jsxs("div", { "data-slot": "not-found", className: slots.root({ className }), ...props, children: [backdrop ? _jsx("span", { "aria-hidden": "true", "data-slot": "not-found-backdrop", className: slots.backdrop(), style: backdropStyle }) : null, children] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'not-found',
+            className: slots.root({ className }),
+            children: (_jsxs(_Fragment, { children: [backdrop ? (_jsx("span", { "aria-hidden": "true", "data-slot": "not-found-backdrop", className: slots.backdrop(), style: backdropStyle })) : null, children] })),
+        }, props),
+    });
 }
 NotFoundRoot.displayName = 'NotFound';
 /** The code, drawn in cells on a canvas. Its box keeps the code's shape before anything is drawn. */
-function NotFoundCode({ code = '404', effect = 'scatter', fill = 'solid', color = 'info', ambient = true, highlight, label, className, style, ...props }) {
+function NotFoundCode({ code = '404', effect = 'scatter', fill = 'solid', color = 'info', ambient = true, highlight, label, className, style, render, ...props }) {
     const canvasRef = useRef(null);
     const engineRef = useRef(null);
     const effectRef = useRef(effect);
@@ -760,7 +777,18 @@ function NotFoundCode({ code = '404', effect = 'scatter', fill = 'solid', color
         width: `${(1 + (2 * PAD_X) / columns) * 100}%`,
         height: `${(1 + (2 * PAD_Y) / GLYPH_ROWS) * 100}%`,
     };
-    return (_jsx("div", { "data-slot": "not-found-code", role: "img", "aria-label": label ?? `Error ${code}`, className: slots.code({ className }), style: { aspectRatio: `${columns} / ${GLYPH_ROWS}`, ...style }, ...props, children: _jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className: slots.canvas(), style: canvasStyle }) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'not-found-code',
+            role: 'img',
+            'aria-label': label ?? `Error ${code}`,
+            className: slots.code({ className }),
+            style: { aspectRatio: `${columns} / ${GLYPH_ROWS}`, ...style },
+            children: (_jsx(_Fragment, { children: _jsx("canvas", { ref: canvasRef, "aria-hidden": "true", className: slots.canvas(), style: canvasStyle }) })),
+        }, props),
+    });
 }
 NotFoundCode.displayName = 'NotFound.Code';
 /** What happened, in a few words. */
@@ -769,13 +797,21 @@ function NotFoundTitle({ as: Tag = 'h1', className, ...props }) {
 }
 NotFoundTitle.displayName = 'NotFound.Title';
 /** A line on what to do next. */
-function NotFoundDescription({ className, ...props }) {
-    return _jsx("p", { "data-slot": "not-found-description", className: notFoundVariants().description({ className }), ...props });
+function NotFoundDescription({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'not-found-description', className: notFoundVariants().description({ className }) }, props),
+    });
 }
 NotFoundDescription.displayName = 'NotFound.Description';
 /** The ways out: links or buttons in a row that wraps on a narrow screen. */
-function NotFoundActions({ className, ...props }) {
-    return _jsx("div", { "data-slot": "not-found-actions", className: notFoundVariants().actions({ className }), ...props });
+function NotFoundActions({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'not-found-actions', className: notFoundVariants().actions({ className }) }, props),
+    });
 }
 NotFoundActions.displayName = 'NotFound.Actions';
 export const NotFound = Object.assign(NotFoundRoot, {

package/dist/components/planet/index.d.ts

@@ -41,6 +41,12 @@
  * dark, with no colour passed in and nothing to keep in step with the theme.
  */
 import { type ComponentProps, type MouseEvent, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 /** `[longitude, latitude]` of the point facing the viewer, in degrees. */
 export type PlanetRotation = [longitude: number, latitude: number];
 export interface PlanetHandle {
@@ -77,7 +83,7 @@ export interface PlanetGlobeProps extends Omit<ComponentProps<'div'>, 'children'
     /** What a screen reader calls the globe. */
     label?: string;
 }
-declare function PlanetGlobe({ children, className, color, label, ...props }: PlanetGlobeProps): import("react").JSX.Element;
+declare function PlanetGlobe({ children, className, color, label, render, ...props }: PlanetGlobeProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace PlanetGlobe {
     var displayName: string;
 }
@@ -110,7 +116,7 @@ export interface PlanetMarkerProps extends Omit<ComponentProps<'div'>, 'children
     /** What is drawn at the coordinate: an avatar, an icon. A dot when left out. */
     children?: ReactNode;
 }
-declare function PlanetMarker({ lat, lng, label, count, color, pulse, onClick, selected, name, className, labelClassName, children, ...props }: PlanetMarkerProps): import("react").JSX.Element;
+declare function PlanetMarker({ lat, lng, label, count, color, pulse, onClick, selected, name, className, labelClassName, children, render, ...props }: PlanetMarkerProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace PlanetMarker {
     var displayName: string;
 }
@@ -120,7 +126,7 @@ export interface PlanetControlsProps extends Omit<ComponentProps<'div'>, 'childr
     /** Words to show between the two arrows. Without them it is the arrows alone. */
     children?: ReactNode;
 }
-declare function PlanetControls({ step, className, children, ...props }: PlanetControlsProps): import("react").JSX.Element;
+declare function PlanetControls({ step, className, children, render, ...props }: PlanetControlsProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace PlanetControls {
     var displayName: string;
 }
@@ -130,7 +136,7 @@ export interface PlanetListProps extends ComponentProps<'ul'> {
  * The places on the globe as a list, in two columns, for picking one by name.
  * Put it beside or under the globe and turn the globe to whatever is picked.
  */
-declare function PlanetList({ className, ...props }: PlanetListProps): import("react").JSX.Element;
+declare function PlanetList({ className, render, ...props }: PlanetListProps & RenderProp<'ul'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace PlanetList {
     var displayName: string;
 }
@@ -141,7 +147,7 @@ export interface PlanetListItemProps extends Omit<ComponentProps<'button'>, 'col
     selected?: boolean;
 }
 /** One place in `Planet.List`: a dot in its marker's colour, and its name. A button. */
-declare function PlanetListItem({ color, selected, className, children, ...props }: PlanetListItemProps): import("react").JSX.Element;
+declare function PlanetListItem({ color, selected, className, children, render, ...props }: PlanetListItemProps & RenderProp<'button'>): import("react").JSX.Element;
 declare namespace PlanetListItem {
     var displayName: string;
 }

package/dist/components/planet/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Planet — the world as dots on a globe you can turn, with things pinned to it.
  *
@@ -45,6 +45,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 import { LAND, LAND_COLUMNS, LAND_ROWS } from './land.js';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const planetVariants = tv({
     slots: {
         // `isolate` keeps the markers' depth ordering inside the planet. Each marker
@@ -509,7 +511,7 @@ const PlanetRoot = forwardRef(function PlanetRoot({ children, className, default
 PlanetRoot.displayName = 'Planet';
 /** Degrees one press of an arrow key turns the globe. */
 const KEY_STEP = 15;
-function PlanetGlobe({ children, className, color = 'primary', label = 'Globe', ...props }) {
+function PlanetGlobe({ children, className, color = 'primary', label = 'Globe', render, ...props }) {
     const slots = planetVariants({ glow: color });
     const planet = usePlanetContext('Planet.Globe');
     const canvas = useRef(null);
@@ -536,8 +538,7 @@ function PlanetGlobe({ children, className, color = 'primary', label = 'Globe',
             autoRotate: 0,
             listeners,
             onSettle: (rotation) => {
-                setSettled((current) => Math.round(current[0]) === Math.round(rotation[0]) &&
-                    Math.round(current[1]) === Math.round(rotation[1])
+                setSettled((current) => Math.round(current[0]) === Math.round(rotation[0]) && Math.round(current[1]) === Math.round(rotation[1])
                     ? current
                     : rotation);
                 onRotationChange.current?.(rotation);
@@ -602,16 +603,35 @@ function PlanetGlobe({ children, className, color = 'primary', label = 'Globe',
     };
     const longitude = Math.round(settled[0]);
     const side = longitude === 0 ? '' : longitude > 0 ? ' east' : ' west';
-    return (_jsxs("div", { 
-        // A slider, because that is what it is to a keyboard: one value, the
-        // longitude facing you, moved with the arrow keys.
-        role: planet.interactive ? 'slider' : 'img', "aria-label": label, "aria-orientation": planet.interactive ? 'horizontal' : undefined, "aria-valuemin": planet.interactive ? -180 : undefined, "aria-valuemax": planet.interactive ? 180 : undefined, "aria-valuenow": planet.interactive ? longitude : undefined, "aria-valuetext": planet.interactive ? `Centred on ${Math.abs(longitude)} degrees${side}` : undefined, tabIndex: planet.interactive ? 0 : undefined, className: slots.globe({ className }), onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onPointerEnter: () => engine.current?.setHover(true), onPointerLeave: () => engine.current?.setHover(false), onKeyDown: onKeyDown, ...props, children: [_jsx("canvas", { ref: canvas, "aria-hidden": "true", className: slots.canvas() }), _jsx("div", { className: slots.markers(), children: children })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: planet.interactive ? 'slider' : 'img',
+            'aria-label': label,
+            'aria-orientation': planet.interactive ? 'horizontal' : undefined,
+            'aria-valuemin': planet.interactive ? -180 : undefined,
+            'aria-valuemax': planet.interactive ? 180 : undefined,
+            'aria-valuenow': planet.interactive ? longitude : undefined,
+            'aria-valuetext': planet.interactive ? `Centred on ${Math.abs(longitude)} degrees${side}` : undefined,
+            tabIndex: planet.interactive ? 0 : undefined,
+            className: slots.globe({ className }),
+            onPointerDown: onPointerDown,
+            onPointerMove: onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            onPointerEnter: () => engine.current?.setHover(true),
+            onPointerLeave: () => engine.current?.setHover(false),
+            onKeyDown: onKeyDown,
+            children: (_jsxs(_Fragment, { children: [_jsx("canvas", { ref: canvas, "aria-hidden": "true", className: slots.canvas() }), _jsx("div", { className: slots.markers(), children: children })] })),
+        }, props),
+    });
 }
 PlanetGlobe.displayName = 'Planet.Globe';
 /** How near the edge a marker starts to fade, as depth. */
 const FADE_FROM = 0.28;
 const FADE_TO = 0.06;
-function PlanetMarker({ lat, lng, label, count, color = 'primary', pulse = false, onClick, selected = false, name, className, labelClassName, children, ...props }) {
+function PlanetMarker({ lat, lng, label, count, color = 'primary', pulse = false, onClick, selected = false, name, className, labelClassName, children, render, ...props }) {
     const slots = planetVariants({ color, selected });
     const planet = usePlanetContext('Planet.Marker');
     const element = useRef(null);
@@ -632,32 +652,65 @@ function PlanetMarker({ lat, lng, label, count, color = 'primary', pulse = false
         // Nearer the viewer is on top, as it would be on a real globe.
         node.style.zIndex = String(Math.round(depth * 100));
     }), [subscribe, lat, lng]);
-    const body = (_jsxs(_Fragment, { children: [label !== undefined && label !== null ? (_jsxs("span", { className: slots.label({ className: labelClassName }), children: [label, count !== undefined && count !== null ? (_jsx("span", { className: slots.count(), children: count })) : null] })) : null, pulse ? _jsx("span", { "aria-hidden": "true", className: slots.pulse() }) : null, children !== undefined && children !== null ? (_jsx("span", { "data-pin": "", className: slots.pin(), children: children })) : (_jsx("span", { "data-pin": "", className: slots.dot() }))] }));
-    return (_jsx("div", { ref: element, "data-planet-marker": "", className: slots.marker({ className }), ...props, children: onClick ? (_jsx("button", { type: "button", "aria-label": name ?? (typeof label === 'string' ? label : undefined), "aria-pressed": selected, className: slots.press(), onClick: onClick, 
-            // Kept from the globe, which would otherwise take the press as the
-            // start of a drag and the click would never arrive.
-            onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: body })) : (body) }));
+    const body = (_jsxs(_Fragment, { children: [label !== undefined && label !== null ? (_jsxs("span", { className: slots.label({ className: labelClassName }), children: [label, count !== undefined && count !== null ? _jsx("span", { className: slots.count(), children: count }) : null] })) : null, pulse ? _jsx("span", { "aria-hidden": "true", className: slots.pulse() }) : null, children !== undefined && children !== null ? (_jsx("span", { "data-pin": "", className: slots.pin(), children: children })) : (_jsx("span", { "data-pin": "", className: slots.dot() }))] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            ref: element,
+            'data-planet-marker': '',
+            className: slots.marker({ className }),
+            children: (_jsx(_Fragment, { children: onClick ? (_jsx("button", { type: "button", "aria-label": name ?? (typeof label === 'string' ? label : undefined), "aria-pressed": selected, className: slots.press(), onClick: onClick, 
+                    // Kept from the globe, which would otherwise take the press as the
+                    // start of a drag and the click would never arrive.
+                    onPointerDown: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: body })) : (body) })),
+        }, props),
+    });
 }
 PlanetMarker.displayName = 'Planet.Marker';
 const Arrow = ({ flipped }) => (_jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", className: flipped ? 'size-4 -scale-x-100' : 'size-4', fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M3 8h10M9 4l4 4-4 4" }) }));
-function PlanetControls({ step = 60, className, children, ...props }) {
+function PlanetControls({ step = 60, className, children, render, ...props }) {
     const slots = planetVariants();
     const planet = usePlanetContext('Planet.Controls');
-    return (_jsxs("div", { role: "group", "aria-label": "Turn the globe", className: slots.controls({ className }), ...props, children: [_jsx("button", { type: "button", "aria-label": "Turn west", className: slots.control(), onClick: () => planet.rotateBy(-step), children: _jsx(Arrow, { flipped: true }) }), children !== undefined && children !== null ? (_jsx("span", { className: slots.caption(), children: children })) : null, _jsx("button", { type: "button", "aria-label": "Turn east", className: slots.control(), onClick: () => planet.rotateBy(step), children: _jsx(Arrow, {}) })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'group',
+            'aria-label': 'Turn the globe',
+            className: slots.controls({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Turn west", className: slots.control(), onClick: () => planet.rotateBy(-step), children: _jsx(Arrow, { flipped: true }) }), children !== undefined && children !== null ? _jsx("span", { className: slots.caption(), children: children }) : null, _jsx("button", { type: "button", "aria-label": "Turn east", className: slots.control(), onClick: () => planet.rotateBy(step), children: _jsx(Arrow, {}) })] })),
+        }, props),
+    });
 }
 PlanetControls.displayName = 'Planet.Controls';
 /**
  * The places on the globe as a list, in two columns, for picking one by name.
  * Put it beside or under the globe and turn the globe to whatever is picked.
  */
-function PlanetList({ className, ...props }) {
-    return _jsx("ul", { "data-slot": "planet-list", className: planetVariants().list({ className }), ...props });
+function PlanetList({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'ul',
+        render,
+        props: mergeProps({ 'data-slot': 'planet-list', className: planetVariants().list({ className }) }, props),
+    });
 }
 PlanetList.displayName = 'Planet.List';
 /** One place in `Planet.List`: a dot in its marker's colour, and its name. A button. */
-function PlanetListItem({ color = 'primary', selected = false, className, children, ...props }) {
+function PlanetListItem({ color = 'primary', selected = false, className, children, render, ...props }) {
     const slots = planetVariants({ color });
-    return (_jsx("li", { "data-slot": "planet-list-item", children: _jsxs("button", { type: "button", "aria-pressed": selected, className: slots.listItem({ className }), ...props, children: [_jsx("span", { "aria-hidden": "true", className: slots.listDot() }), _jsx("span", { className: slots.listName(), children: children })] }) }));
+    // `render` draws the row's button as something else, such as a link to the place.
+    const button = useRender({
+        defaultTagName: 'button',
+        render,
+        props: mergeProps({
+            type: render ? undefined : 'button',
+            'aria-pressed': selected,
+            className: slots.listItem({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: slots.listDot() }), _jsx("span", { className: slots.listName(), children: children })] })),
+        }, props),
+    });
+    return _jsx("li", { "data-slot": "planet-list-item", children: button });
 }
 PlanetListItem.displayName = 'Planet.ListItem';
 export const Planet = Object.assign(PlanetRoot, {

package/dist/components/prompt/index.d.ts

@@ -60,10 +60,17 @@
  * the rest. Images are shown as thumbnails, anything else as a chip with its
  * name and size.
  */
-import { type ComponentProps, type ReactNode } from 'react';
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
 import { type ButtonProps } from '../button/index.js';
 import { type MenuContentProps, type MenuItemProps } from '../menu/index.js';
 import { type TextareaProps } from '../textarea/index.js';
+import { useRender } from '@base-ui/react/use-render';
+import type * as ReactTypes from 'react';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export type PromptState = 'idle' | 'submitted' | 'streaming' | 'error';
 export interface PromptMessage {
     /** What was written, trimmed. */
@@ -112,7 +119,7 @@ export interface PromptProps extends Omit<ComponentProps<'form'>, 'onSubmit' | '
      */
     mode?: string;
 }
-declare function PromptRoot({ value: controlledValue, defaultValue, onValueChange, onSubmit, status, onStop, disabled, defaultFiles, accept, maxFiles, onReject, mode, className, children, ...props }: PromptProps): import("react").JSX.Element;
+declare function PromptRoot({ value: controlledValue, defaultValue, onValueChange, onSubmit, status, onStop, disabled, defaultFiles, accept, maxFiles, onReject, mode, className, children, ...props }: PromptProps): ReactTypes.JSX.Element;
 declare namespace PromptRoot {
     var displayName: string;
 }
@@ -125,14 +132,14 @@ export interface PromptBannerProps extends ComponentProps<'div'> {
     mode?: PromptBandMode;
 }
 /** A band above the field, for something to do before or while writing: connect an account, pick a project. */
-declare function PromptBanner({ open, mode, ...props }: PromptBannerProps): import("react").JSX.Element;
+declare function PromptBanner({ open, mode, ...props }: PromptBannerProps): ReactTypes.JSX.Element;
 declare namespace PromptBanner {
     var displayName: string;
 }
 export interface PromptBannerActionProps extends ButtonProps {
 }
 /** The banner's button, at its end. */
-declare function PromptBannerAction({ className, size, shape, ...props }: PromptBannerActionProps): import("react").JSX.Element;
+declare function PromptBannerAction({ className, size, shape, ...props }: PromptBannerActionProps): ReactTypes.JSX.Element;
 declare namespace PromptBannerAction {
     var displayName: string;
 }
@@ -147,7 +154,7 @@ export interface PromptStatusProps extends ComponentProps<'div'> {
     spinner?: boolean;
 }
 /** A band under the field saying what the answer is doing, with the words lit by a moving sweep. */
-declare function PromptStatus({ open, mode, icon, spinner, children, ...props }: PromptStatusProps): import("react").JSX.Element;
+declare function PromptStatus({ open, mode, icon, spinner, children, ...props }: PromptStatusProps): ReactTypes.JSX.Element;
 declare namespace PromptStatus {
     var displayName: string;
 }
@@ -158,7 +165,7 @@ export interface PromptContextProps extends ComponentProps<'div'> {
     mode?: PromptBandMode;
 }
 /** A strip under the field, inset from its edges, for where the message is going: a branch, a folder, a ticket. */
-declare function PromptContext({ open, mode, className, ...props }: PromptContextProps): import("react").JSX.Element;
+declare function PromptContext({ open, mode, className, render, ...props }: PromptContextProps & RenderProp<'div'>): ReactTypes.JSX.Element;
 declare namespace PromptContext {
     var displayName: string;
 }
@@ -167,14 +174,14 @@ export interface PromptContextItemProps extends ComponentProps<'span'> {
     onSelect?: () => void;
 }
 /** One fact in the context strip, with an icon before it. */
-declare function PromptContextItem({ onSelect, className, children, ...props }: PromptContextItemProps): import("react").JSX.Element;
+declare function PromptContextItem({ onSelect, className, children, render, ...props }: PromptContextItemProps & RenderProp<'span'>): ReactTypes.JSX.Element;
 declare namespace PromptContextItem {
     var displayName: string;
 }
 export interface PromptHintProps extends ComponentProps<'p'> {
 }
 /** A quiet line under the prompt. Keys written in `<kbd>` are drawn as keys. */
-declare function PromptHint({ className, children, ...props }: PromptHintProps): import("react").JSX.Element;
+declare function PromptHint({ className, children, render, ...props }: PromptHintProps & RenderProp<'p'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace PromptHint {
     var displayName: string;
 }
@@ -187,35 +194,35 @@ export interface PromptFieldProps extends ComponentProps<'div'> {
     layout?: 'stacked' | 'inline';
 }
 /** The card that holds the text, the files and the footer. Files can be dropped on it. */
-declare function PromptField({ layout, className, onDragOver, onDragLeave, onDrop, ...props }: PromptFieldProps): import("react").JSX.Element;
+declare function PromptField({ layout, className, onDragOver, onDragLeave, onDrop, render, ...props }: PromptFieldProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace PromptField {
     var displayName: string;
 }
 export interface PromptTextareaProps extends Omit<TextareaProps, 'value' | 'defaultValue' | 'onChange' | 'variant'> {
 }
 /** Where the message is written. Enter sends, Shift+Enter starts a new line, and pasted files are attached. */
-declare function PromptTextarea({ className, minRows, maxRows, onKeyDown, onPaste, 'aria-label': ariaLabel, ...props }: PromptTextareaProps): import("react").JSX.Element;
+declare function PromptTextarea({ className, minRows, maxRows, onKeyDown, onPaste, 'aria-label': ariaLabel, ...props }: PromptTextareaProps): ReactTypes.JSX.Element;
 declare namespace PromptTextarea {
     var displayName: string;
 }
 export interface PromptAttachmentsProps extends ComponentProps<'ul'> {
 }
 /** The files attached so far: images as thumbnails, anything else as a chip. Takes no room while there are none. */
-declare function PromptAttachments({ className, 'aria-label': ariaLabel, ...props }: PromptAttachmentsProps): import("react").JSX.Element | null;
+declare function PromptAttachments({ className, 'aria-label': ariaLabel, render, ...props }: PromptAttachmentsProps & RenderProp<'ul'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>> | null;
 declare namespace PromptAttachments {
     var displayName: string;
 }
 export interface PromptFooterProps extends ComponentProps<'div'> {
 }
 /** The row under the text: tools at the start, the submit button at the end. */
-declare function PromptFooter({ className, ...props }: PromptFooterProps): import("react").JSX.Element;
+declare function PromptFooter({ className, render, ...props }: PromptFooterProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace PromptFooter {
     var displayName: string;
 }
 export interface PromptToolsProps extends ComponentProps<'div'> {
 }
 /** The tools at the start of the footer. Wraps onto a second line where it has to. */
-declare function PromptTools({ className, ...props }: PromptToolsProps): import("react").JSX.Element;
+declare function PromptTools({ className, render, ...props }: PromptToolsProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace PromptTools {
     var displayName: string;
 }
@@ -230,7 +237,7 @@ export interface PromptToolProps extends Omit<ButtonProps, 'aria-pressed'> {
     showLabel?: boolean;
 }
 /** A round button in the footer, holding an icon. With `pressed`, it switches on and off. */
-declare function PromptTool({ label, pressed, onPressedChange, showLabel, onClick, className, children, variant, ...props }: PromptToolProps): import("react").JSX.Element;
+declare function PromptTool({ label, pressed, onPressedChange, showLabel, onClick, className, children, variant, ...props }: PromptToolProps): ReactTypes.JSX.Element;
 declare namespace PromptTool {
     var displayName: string;
 }
@@ -239,7 +246,7 @@ export interface PromptAttachProps extends Omit<PromptToolProps, 'label' | 'pres
     label?: string;
 }
 /** A tool that opens the file picker. Files can also be pasted, or dropped on the field. */
-declare function PromptAttach({ label, onClick, children, ...props }: PromptAttachProps): import("react").JSX.Element;
+declare function PromptAttach({ label, onClick, children, ...props }: PromptAttachProps): ReactTypes.JSX.Element;
 declare namespace PromptAttach {
     var displayName: string;
 }
@@ -267,7 +274,7 @@ export interface PromptModelProps {
     className?: string;
 }
 /** Chooses the model the message goes to. The button shows the chosen one's icon and name. */
-declare function PromptModel({ items, value, defaultValue, onValueChange, variant, label, className, }: PromptModelProps): import("react").JSX.Element;
+declare function PromptModel({ items, value, defaultValue, onValueChange, variant, label, className, }: PromptModelProps): ReactTypes.JSX.Element;
 declare namespace PromptModel {
     var displayName: string;
 }
@@ -286,7 +293,7 @@ export interface PromptMenuProps extends Omit<MenuContentProps, 'children'> {
  * message: files, tools, modes. It keeps the footer to one button however
  * many there are.
  */
-declare function PromptMenu({ label, icon, children, side, align, width, className, ...props }: PromptMenuProps): import("react").JSX.Element;
+declare function PromptMenu({ label, icon, children, side, align, width, className, ...props }: PromptMenuProps): ReactTypes.JSX.Element;
 declare namespace PromptMenu {
     var displayName: string;
 }
@@ -297,7 +304,7 @@ export interface PromptAttachItemProps extends Omit<MenuItemProps, 'children'> {
     shortcut?: ReactNode;
 }
 /** The menu item that opens the file picker. */
-declare function PromptAttachItem({ children, shortcut, onClick, ...props }: PromptAttachItemProps): import("react").JSX.Element;
+declare function PromptAttachItem({ children, shortcut, onClick, ...props }: PromptAttachItemProps): ReactTypes.JSX.Element;
 declare namespace PromptAttachItem {
     var displayName: string;
 }
@@ -314,7 +321,7 @@ export interface PromptSubmitProps extends Omit<ButtonProps, 'type' | 'children'
     voiceLabel?: string;
 }
 /** Sends the message. While busy it stops the answer, and with `onVoice` it starts voice while the field is empty. */
-declare function PromptSubmit({ onVoice, listening, sendLabel, stopLabel, voiceLabel, onClick, className, disabled, ...props }: PromptSubmitProps): import("react").JSX.Element;
+declare function PromptSubmit({ onVoice, listening, sendLabel, stopLabel, voiceLabel, onClick, className, disabled, ...props }: PromptSubmitProps): ReactTypes.JSX.Element;
 declare namespace PromptSubmit {
     var displayName: string;
 }
@@ -340,7 +347,7 @@ export interface PromptTasksProps extends Omit<ComponentProps<'div'>, 'title'> {
  * fills as they are done, opening into the list. The list scrolls past
  * `maxHeight`, and keeps the task in progress in view.
  */
-declare function PromptTasks({ open, mode, title, expanded, defaultExpanded, onExpandedChange, maxHeight, className, children, ...props }: PromptTasksProps): import("react").JSX.Element;
+declare function PromptTasks({ open, mode, title, expanded, defaultExpanded, onExpandedChange, maxHeight, className, children, ...props }: PromptTasksProps): ReactTypes.JSX.Element;
 declare namespace PromptTasks {
     var displayName: string;
 }
@@ -349,7 +356,7 @@ export interface PromptTaskProps extends ComponentProps<'li'> {
     status?: PromptTaskStatus;
 }
 /** One task in `Prompt.Tasks`. */
-declare function PromptTask({ status, className, children, ...props }: PromptTaskProps): import("react").JSX.Element;
+declare function PromptTask({ status, className, children, render, ...props }: PromptTaskProps & RenderProp<'li'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace PromptTask {
     var displayName: string;
 }
@@ -382,7 +389,7 @@ export interface PromptCommandsProps {
  * word, `/sum`. The arrow keys move through it, Enter or Tab chooses, Escape
  * puts it away.
  */
-declare function PromptCommands({ items, trigger, onSelect, label, maxHeight }: PromptCommandsProps): import("react").JSX.Element;
+declare function PromptCommands({ items, trigger, onSelect, label, maxHeight, }: PromptCommandsProps): ReactTypes.JSX.Element;
 declare namespace PromptCommands {
     var displayName: string;
 }
@@ -410,7 +417,7 @@ export interface PromptRecorderProps extends ComponentProps<'div'> {
  * has been heard so far, the sound as a wave scrolling to the left, how long
  * it has been, and buttons to throw it away or keep it.
  */
-declare function PromptRecorder({ transcript, placeholder, onCancel, onDone, level, cancelLabel, doneLabel, className, ...props }: PromptRecorderProps): import("react").JSX.Element;
+declare function PromptRecorder({ transcript, placeholder, onCancel, onDone, level, cancelLabel, doneLabel, className, render, ...props }: PromptRecorderProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace PromptRecorder {
     var displayName: string;
 }