@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/panel/panel-header.d.mts

@@ -0,0 +1,34 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/panel/panel-header.d.ts
+export type PanelHeaderProps = useRender.ComponentProps<"div">;
+export declare function PanelHeader({ children, className, render, ...props }: PanelHeaderProps): import("react").JSX.Element;
+export type PanelSectionHeaderProps = useRender.ComponentProps<"div">;
+export declare function PanelSectionHeader({ children, className, render, ...props }: PanelSectionHeaderProps): import("react").JSX.Element;
+export type PanelHeaderIconProps = useRender.ComponentProps<"div">;
+export declare function PanelHeaderIcon({ className, render, ...props }: PanelHeaderIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelHeaderContentProps = useRender.ComponentProps<"div">;
+export declare function PanelHeaderContent({ className, render, ...props }: PanelHeaderContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelHeadingProps = useRender.ComponentProps<"div">;
+export declare function PanelHeading({ className, render, ...props }: PanelHeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelTitleProps = useRender.ComponentProps<"div">;
+export declare function PanelTitle({ className, render, ...props }: PanelTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelMetaProps = useRender.ComponentProps<"div"> & {
+  size?: "sm" | "md";
+};
+export declare function PanelMeta({ className, render, size, ...props }: PanelMetaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelStatusProps = useRender.ComponentProps<"span">;
+/**
+ * Attribute badge in a panel header, such as a muted or archived marker.
+ * Use `PanelActivity` for a live status readout wrapping a `Status`.
+ */
+export declare function PanelStatus({ className, render, ...props }: PanelStatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelActivityProps = useRender.ComponentProps<"span">;
+/**
+ * Live status readout in a panel header, such as agent activity or presence.
+ * Wraps a `Status` and supplies header-appropriate spacing and typography;
+ * use `PanelStatus` for a standalone attribute badge.
+ */
+export declare function PanelActivity({ className, render, ...props }: PanelActivityProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelActionsProps = useRender.ComponentProps<"div">;
+export declare function PanelActions({ className, render, ...props }: PanelActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/panel/panel-header.mjs

@@ -0,0 +1,135 @@
+import { panelHeader } from "./panel-header.recipe.mjs";
+import { PanelHeaderRoot } from "./panel.mjs";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/panel/panel-header.tsx
+function PanelHeader({ children, className, render, ...props }) {
+	const { header } = panelHeader();
+	return /* @__PURE__ */ jsx(PanelHeaderRoot, {
+		...props,
+		render,
+		"data-panel-frame-header": "",
+		"data-slot": "panel-header",
+		className: header({ className }),
+		children
+	});
+}
+function PanelSectionHeader({ children, className, render, ...props }) {
+	const { sectionHeader } = panelHeader();
+	return /* @__PURE__ */ jsx(PanelHeaderRoot, {
+		...props,
+		render,
+		"data-slot": "panel-section-header",
+		className: sectionHeader({ className }),
+		children
+	});
+}
+function PanelHeaderIcon({ className, render, ...props }) {
+	const { headerIcon } = panelHeader();
+	const defaultProps = {
+		"data-slot": "panel-header-icon",
+		className: headerIcon({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelHeaderContent({ className, render, ...props }) {
+	const { headerContent } = panelHeader();
+	const defaultProps = {
+		"data-slot": "panel-header-content",
+		className: headerContent({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelHeading({ className, render, ...props }) {
+	const { heading } = panelHeader();
+	const defaultProps = {
+		"data-slot": "panel-heading",
+		className: heading({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelTitle({ className, render, ...props }) {
+	const { title } = panelHeader();
+	const defaultProps = {
+		"data-slot": "panel-title",
+		className: title({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelMeta({ className, render, size = "sm", ...props }) {
+	const { meta } = panelHeader({ size });
+	const defaultProps = {
+		"data-slot": "panel-meta",
+		className: meta({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* Attribute badge in a panel header, such as a muted or archived marker.
+* Use `PanelActivity` for a live status readout wrapping a `Status`.
+*/
+function PanelStatus({ className, render, ...props }) {
+	const { status } = panelHeader();
+	const defaultProps = {
+		"data-slot": "panel-status",
+		className: status({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* Live status readout in a panel header, such as agent activity or presence.
+* Wraps a `Status` and supplies header-appropriate spacing and typography;
+* use `PanelStatus` for a standalone attribute badge.
+*/
+function PanelActivity({ className, render, ...props }) {
+	const { activity } = panelHeader();
+	const defaultProps = {
+		"data-slot": "panel-activity",
+		className: activity({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelActions({ className, render, ...props }) {
+	const { actions } = panelHeader();
+	const defaultProps = {
+		"data-slot": "panel-actions",
+		"data-icon-inset": "",
+		className: actions({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { PanelActions, PanelActivity, PanelHeader, PanelHeaderContent, PanelHeaderIcon, PanelHeading, PanelMeta, PanelSectionHeader, PanelStatus, PanelTitle };

package/dist/components/panel/panel-header.recipe.mjs

@@ -0,0 +1,78 @@
+import { controlIconInset, headEdges } from "../../lib/head-edges.mjs";
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/panel/panel-header.recipe.ts
+/**
+* Where a head's edge controls sit, shared by every head (panel, section,
+* drawer, thread): see lib/head-edges.ts. Both sides pad by the content
+* margin, 20px on a desktop and 16px on a phone, so a filled thing (a sticker,
+* a pill, a filled Button) puts its shape on it, and the first and last
+* frameless icon button are pulled out by their icon inset so their icon box
+* lands on it: 20px on a desktop and on a touch screen with the desktop
+* layout, 16px on a phone, mirrored at the two ends.
+*/
+const panelHeadEdges = headEdges;
+/**
+* A head's trailing actions, 2px apart (4px on a desktop). The group declares
+* its PanelActions' icon inset, so the head pulls the group, not its last
+* button: an action hidden at some width (a thread's Close below 1024px) then
+* leaves the next one on the edge.
+*/
+const panelHeadActions = ["flex shrink-0 items-center gap-0.5 md:pointer-fine:gap-1", controlIconInset];
+/**
+* `header` and `sectionHeader` share one bar, expressed through
+* `compoundSlots`: a 56px row (the shell header height) with a seam under it.
+* On a phone the section head sits on the frame.
+*/
+const panelHeader = tv({
+	slots: {
+		header: [],
+		sectionHeader: [],
+		headerIcon: [
+			"flex size-[27px] shrink-0 items-center justify-center",
+			"rounded-sticker border-[1.5px] border-sticker-ink bg-brand text-sticker-ink ring-[1.5px] ring-sticker-edge",
+			"not-data-[icon-kind=avatar]:[&_svg]:size-3.5 not-data-[icon-kind=avatar]:[&_svg]:stroke-2",
+			"data-[icon-kind=avatar]:size-auto data-[icon-kind=avatar]:border-transparent data-[icon-kind=avatar]:bg-transparent"
+		],
+		headerContent: "flex min-w-0 flex-1 flex-col justify-center",
+		heading: "flex min-w-0 items-center gap-2",
+		title: "truncate font-sans text-headline font-bold text-foreground",
+		meta: "min-w-0 truncate font-sans text-caption text-foreground-hint",
+		status: [
+			"inline-flex shrink-0 items-center gap-1 border-0 bg-transparent p-0",
+			"font-sans text-caption font-medium normal-case text-foreground-hint",
+			"[&_svg]:size-3.5 [&_svg]:shrink-0"
+		],
+		activity: [
+			"inline-flex shrink-0 items-center gap-1.5",
+			"font-sans text-caption text-foreground-hint",
+			"[&_svg]:size-3.5 [&_svg]:shrink-0",
+			"*:data-[slot=status]:lead-dot"
+		],
+		actions: panelHeadActions
+	},
+	variants: { size: {
+		sm: {},
+		md: { meta: ["text-footnote"] }
+	} },
+	compoundSlots: [{
+		slots: ["header", "sectionHeader"],
+		class: [
+			"flex h-(--shell-header-height,56px) shrink-0 items-center gap-3 max-md:gap-2",
+			panelHeadEdges,
+			"border-b border-line-seam bg-layer-canvas text-foreground",
+			"max-md:sticky max-md:top-0 max-md:z-30"
+		]
+	}, {
+		slots: ["sectionHeader"],
+		class: [
+			"max-md:bg-layer-frame max-md:text-foreground-on-frame",
+			"max-md:[&>[data-slot=panel-header-icon]]:hidden",
+			"max-md:**:data-[slot=panel-title]:text-foreground-on-frame",
+			"max-md:**:data-[slot=panel-meta]:text-foreground-on-frame-muted",
+			"max-md:**:data-[slot=panel-action]:text-foreground-on-frame",
+			"max-md:**:data-[slot=panel-action]:hover:bg-fill-frame-medium max-md:**:data-[slot=panel-action]:active:bg-fill-frame-medium"
+		]
+	}]
+});
+//#endregion
+export { panelHeadActions, panelHeadEdges, panelHeader };

package/dist/components/panel/panel-notice.d.mts

@@ -0,0 +1,16 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/panel/panel-notice.d.ts
+export type PanelNoticeStatus = "default" | "warning" | "destructive" | "info" | "success";
+export type PanelNoticeProps = useRender.ComponentProps<"div"> & {
+  /** The tint: warning for something to fix (the default), destructive only
+   *  for what cannot be undone. */
+  status?: PanelNoticeStatus;
+};
+export declare function PanelNotice({ className, render, status, ...props }: PanelNoticeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelNoticeContentProps = useRender.ComponentProps<"div">;
+/** The message: takes the width left and wraps or clamps as the caller says. */
+export declare function PanelNoticeContent({ className, render, ...props }: PanelNoticeContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelNoticeActionsProps = useRender.ComponentProps<"div">;
+/** Trailing controls (copy, a link, ×), centred on the first text line. */
+export declare function PanelNoticeActions({ className, render, ...props }: PanelNoticeActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/panel/panel-notice.mjs

@@ -0,0 +1,77 @@
+import { tv } from "../../lib/tv.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/panel/panel-notice.tsx
+/**
+* A notice strip that runs the full width of a panel, under its head (a
+* runtime error, a setting that failed to save). It is a region of its own,
+* so it is closed by the region seam, the same line the head draws above it
+* — never the lighter in-region divider. Its edges are the panel's (`--column-margin`:
+* 20 / 16 on a phone, 20 in a column of list cells), and its trailing actions overhang the padding so a 32px
+* button sits on the first text line instead of making the strip taller.
+*
+* Inside a card or a dialog, where a notice is part of the content, use
+* Banner instead.
+*/
+const panelNotice = tv({
+	slots: {
+		root: [
+			"flex shrink-0 items-start",
+			"min-h-10 gap-2.5 border-b border-line-seam px-(--column-margin) py-2.5",
+			"font-sans text-callout font-semibold text-foreground",
+			"[&>svg]:lead-icon",
+			"*:data-[slot=spinner]:lead-icon *:data-[slot=spinner]:w-4 *:data-[slot=spinner]:leading-[inherit]"
+		],
+		content: ["min-w-0 flex-1"],
+		actions: ["flex shrink-0 items-center", "-my-1.5 gap-3"]
+	},
+	variants: { status: {
+		default: { root: ["bg-fill-muted"] },
+		warning: { root: ["bg-warning-soft"] },
+		destructive: { root: ["bg-danger-soft"] },
+		info: { root: ["bg-info-soft"] },
+		success: { root: ["bg-success-soft"] }
+	} },
+	defaultVariants: { status: "warning" }
+});
+function PanelNotice({ className, render, status = "warning", ...props }) {
+	const { root } = panelNotice({ status });
+	const defaultProps = {
+		"data-slot": "panel-notice",
+		"data-status": status,
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** The message: takes the width left and wraps or clamps as the caller says. */
+function PanelNoticeContent({ className, render, ...props }) {
+	const { content } = panelNotice();
+	const defaultProps = {
+		"data-slot": "panel-notice-content",
+		className: content({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** Trailing controls (copy, a link, ×), centred on the first text line. */
+function PanelNoticeActions({ className, render, ...props }) {
+	const { actions } = panelNotice();
+	const defaultProps = {
+		"data-slot": "panel-notice-actions",
+		className: actions({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { PanelNotice, PanelNoticeActions, PanelNoticeContent };

package/dist/components/panel/panel-split-action.d.mts

@@ -0,0 +1,34 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { ComponentProps } from "react";
+import { Button } from "@base-ui/react/button";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/panel/panel-split-action.d.ts
+export type PanelSplitActionProps = ComponentProps<"div"> & DataAttributes;
+/**
+ * One header action with a menu beside it, such as Comment and its ▾: a
+ * `PanelSplitActionMain` (or `PanelSplitActionToggle`), then a `PanelSplitActionMenu` as the trigger of a
+ * DropdownMenu or a Popover. The two parts read as one control.
+ */
+export declare function PanelSplitAction({ className, ...props }: PanelSplitActionProps): import("react").JSX.Element;
+export type PanelSplitActionMainProps = Omit<StyledProps<Button.Props>, "type"> & DataAttributes;
+/**
+ * The primary action of a split action, a panel action's square: a Base UI
+ * Button. For an action that stays on, use `PanelSplitActionToggle`.
+ */
+export declare function PanelSplitActionMain({ className, render, nativeButton, ...props }: PanelSplitActionMainProps): import("react").JSX.Element;
+export type PanelSplitActionToggleProps = Omit<StyledProps<Toggle.Props>, "type"> & DataAttributes;
+/**
+ * The primary action of a split action when it turns something on, such as
+ * commenting: a Base UI Toggle (`aria-pressed`), the yellow sticker while
+ * pressed, like PanelToggleAction.
+ */
+export declare function PanelSplitActionToggle({ className, render, nativeButton, ...props }: PanelSplitActionToggleProps): import("react").JSX.Element;
+export type PanelSplitActionMenuProps = Omit<StyledProps<Button.Props>, "type"> & DataAttributes;
+/**
+ * The narrow part of a split action that opens its menu, with a chevron by
+ * default. Render it as the trigger of a DropdownMenu or a Popover:
+ * `<DropdownMenuTrigger render={<PanelSplitActionMenu aria-label="Comments" />} />`.
+ */
+export declare function PanelSplitActionMenu({ className, render, nativeButton, children, ...props }: PanelSplitActionMenuProps): import("react").JSX.Element;
+//#endregion

package/dist/components/panel/panel-split-action.mjs

@@ -0,0 +1,69 @@
+import { defaultNativeButton } from "../../lib/default-native-button.mjs";
+import { panelSplitAction, panelSplitActionMain, panelSplitActionMenu, panelSplitActionToggle } from "./panel-split-action.recipe.mjs";
+import { ChevronDown } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/panel/panel-split-action.tsx
+/**
+* One header action with a menu beside it, such as Comment and its ▾: a
+* `PanelSplitActionMain` (or `PanelSplitActionToggle`), then a `PanelSplitActionMenu` as the trigger of a
+* DropdownMenu or a Popover. The two parts read as one control.
+*/
+function PanelSplitAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		...props,
+		"data-slot": "panel-split-action",
+		className: panelSplitAction({ className })
+	});
+}
+/**
+* The primary action of a split action, a panel action's square: a Base UI
+* Button. For an action that stays on, use `PanelSplitActionToggle`.
+*/
+function PanelSplitActionMain({ className, render, nativeButton, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		type: "button",
+		"data-slot": "panel-split-action-main",
+		"data-split-action-main": "",
+		className: panelSplitActionMain({ className })
+	});
+}
+/**
+* The primary action of a split action when it turns something on, such as
+* commenting: a Base UI Toggle (`aria-pressed`), the yellow sticker while
+* pressed, like PanelToggleAction.
+*/
+function PanelSplitActionToggle({ className, render, nativeButton, ...props }) {
+	return /* @__PURE__ */ jsx(Toggle, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		type: "button",
+		"data-slot": "panel-split-action-toggle",
+		"data-split-action-main": "",
+		className: panelSplitActionToggle({ className })
+	});
+}
+/**
+* The narrow part of a split action that opens its menu, with a chevron by
+* default. Render it as the trigger of a DropdownMenu or a Popover:
+* `<DropdownMenuTrigger render={<PanelSplitActionMenu aria-label="Comments" />} />`.
+*/
+function PanelSplitActionMenu({ className, render, nativeButton, children, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		type: "button",
+		"data-slot": "panel-split-action-menu",
+		className: panelSplitActionMenu({ className }),
+		children: children ?? /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true })
+	});
+}
+//#endregion
+export { PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle };

package/dist/components/panel/panel-split-action.recipe.mjs

@@ -0,0 +1,53 @@
+import { tv } from "../../lib/tv.mjs";
+import { panelAction, panelToggleAction } from "./panel-action.recipe.mjs";
+//#region src/components/panel/panel-split-action.recipe.ts
+/**
+* A split action reads as one control: the group is one rounded shape, and
+* whichever part is under the pointer takes the medium tier (`fill-medium`)
+* while the other part takes the subtle tier (`fill-subtle`). The coupling is
+* `group-hover` on the root, which only hovers through a part (the root lets
+* the pointer through, so a disabled part, which takes no pointer, hovers
+* nothing). A part's resting fill is a custom property: the menu reads the
+* main part's (or the toggle's) pressed state through a sibling selector, the main part reads
+* the open menu through a has-selector on the root itself (packages/ui/CLAUDE.md,
+* Selector Cost), so a hover, a press, a selection or a disabled state on the
+* part itself always wins over the tint.
+*/
+const panelSplitAction = tv({ base: [
+	"group/split-action relative inline-flex shrink-0 items-center",
+	"rounded-control pointer-events-none",
+	"has-[>[data-popup-open]]:[--split-action-main-tint:var(--fill-subtle)]"
+] });
+const splitActionMainParts = [
+	"pointer-events-auto rounded-e-none",
+	"after:end-0",
+	"focus-visible:z-1 aria-pressed:z-1 data-pressed:z-1",
+	"bg-(--split-action-main-tint,transparent)",
+	"group-hover/split-action:bg-fill-subtle",
+	"hover:bg-fill-medium active:bg-fill-medium"
+];
+const panelSplitActionMain = tv({
+	extend: panelAction,
+	base: splitActionMainParts
+});
+const panelSplitActionToggle = tv({
+	extend: panelToggleAction,
+	base: splitActionMainParts
+});
+const panelSplitActionMenu = tv({
+	extend: panelAction,
+	base: [
+		"pointer-events-auto min-w-0 rounded-s-none px-0",
+		"w-6 me-5 md:pointer-fine:w-5 md:pointer-fine:me-0",
+		"after:start-0 after:inset-e-[-21.5px] md:pointer-fine:after:-end-control-hit",
+		"focus-visible:z-1",
+		"[[data-split-action-main][data-pressed]~&]:[--split-action-menu-tint:var(--fill-subtle)]",
+		"[[data-split-action-main][aria-pressed=true]~&]:[--split-action-menu-tint:var(--fill-subtle)]",
+		"bg-(--split-action-menu-tint,transparent)",
+		"group-hover/split-action:bg-fill-subtle",
+		"hover:bg-fill-medium active:bg-fill-medium data-popup-open:bg-fill-medium",
+		"[&>svg]:size-4"
+	]
+});
+//#endregion
+export { panelSplitAction, panelSplitActionMain, panelSplitActionMenu, panelSplitActionToggle };

package/dist/components/panel/panel-toggle-action.d.mts

@@ -0,0 +1,6 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/panel/panel-toggle-action.d.ts
+export type PanelToggleActionProps = Omit<StyledProps<Toggle.Props>, "type">;
+export declare function PanelToggleAction({ className, ...props }: PanelToggleActionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/panel/panel-toggle-action.mjs

@@ -0,0 +1,15 @@
+import { panelToggleAction } from "./panel-action.recipe.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Toggle } from "@base-ui/react/toggle";
+//#region src/components/panel/panel-toggle-action.tsx
+function PanelToggleAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Toggle, {
+		...props,
+		type: "button",
+		"data-slot": "panel-toggle-action",
+		"data-icon-inset": "",
+		className: panelToggleAction({ className })
+	});
+}
+//#endregion
+export { PanelToggleAction };

package/dist/components/panel/panel.d.mts

@@ -0,0 +1,25 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/panel/panel.d.ts
+export type PanelEdge = "attached" | "inset";
+export type PanelProps = useRender.ComponentProps<"section"> & {
+  edge?: PanelEdge;
+};
+export declare function Panel({ className, edge, render, ...props }: PanelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelHeaderRootProps = useRender.ComponentProps<"div">;
+/**
+ * Bare header bar: fixed height and centered flex row, no border, fill, or padding.
+ * Shared base for `PanelHeader`, `PanelSectionHeader`, and panel-specific headers
+ * such as `ThreadPanelHeader` — it is not exclusive to `PanelHeader`.
+ */
+export declare function PanelHeaderRoot({ className, render, ...props }: PanelHeaderRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelBodyProps = useRender.ComponentProps<"div">;
+export declare function PanelBody({ className, render, ...props }: PanelBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelScrollViewportProps = useRender.ComponentProps<"div">;
+export declare function PanelScrollViewport({ className, render, ...props }: PanelScrollViewportProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelScrollContentProps = useRender.ComponentProps<"div">;
+export declare function PanelScrollContent({ className, render, ...props }: PanelScrollContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelSectionProps = useRender.ComponentProps<"section">;
+export declare function PanelSection({ className, render, ...props }: PanelSectionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type PanelFooterProps = useRender.ComponentProps<"div">;
+export declare function PanelFooter({ className, render, ...props }: PanelFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/panel/panel.mjs

@@ -0,0 +1,96 @@
+import { panel } from "./panel.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/panel/panel.tsx
+function Panel({ className, edge, render, ...props }) {
+	const { root } = panel({ edge });
+	const defaultProps = {
+		"data-edge": edge,
+		"data-slot": "panel",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* Bare header bar: fixed height and centered flex row, no border, fill, or padding.
+* Shared base for `PanelHeader`, `PanelSectionHeader`, and panel-specific headers
+* such as `ThreadPanelHeader` — it is not exclusive to `PanelHeader`.
+*/
+function PanelHeaderRoot({ className, render, ...props }) {
+	const { header } = panel();
+	const defaultProps = {
+		"data-slot": "panel-header-root",
+		className: header({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelBody({ className, render, ...props }) {
+	const { body } = panel();
+	const defaultProps = {
+		"data-slot": "panel-body",
+		className: body({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelScrollViewport({ className, render, ...props }) {
+	const { scrollViewport } = panel();
+	const defaultProps = {
+		"data-slot": "panel-scroll-viewport",
+		className: scrollViewport({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelScrollContent({ className, render, ...props }) {
+	const { scrollContent } = panel();
+	const defaultProps = {
+		"data-slot": "panel-scroll-content",
+		className: scrollContent({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelSection({ className, render, ...props }) {
+	const { section } = panel();
+	const defaultProps = {
+		"data-slot": "panel-section",
+		className: section({ className })
+	};
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function PanelFooter({ className, render, ...props }) {
+	const { footer } = panel();
+	const defaultProps = {
+		"data-slot": "panel-footer",
+		className: footer({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { Panel, PanelBody, PanelFooter, PanelHeaderRoot, PanelScrollContent, PanelScrollViewport, PanelSection };