@botiverse/raft-ui 0.51.0 → 0.52.1

package/dist/components/mobile-nav/mobile-nav-server.d.mts

@@ -0,0 +1,71 @@
+import { MobileNavItemProps } from "./mobile-nav.mjs";
+import { PopoverContentProps, PopoverProps } from "../popover/popover.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/mobile-nav/mobile-nav-server.d.ts
+export type MobileNavServerPopoverProps = Omit<PopoverProps, "handle">;
+/** The root: owns the popover's open state, like `Popover` (`open`, `onOpenChange`). */
+export declare function MobileNavServerPopover(props: MobileNavServerPopoverProps): import("react").JSX.Element;
+export type MobileNavServerItemProps = Omit<MobileNavItemProps, "selected" | "render" | "nativeButton">;
+/**
+ * The tab: the server's avatar and its name in `MobileNavLabel`, as children.
+ * A press opens the popover, and so does holding it for 500ms (the long press
+ * of raft-ui's menus). Lifting the finger after a hold never closes it: the
+ * click that ends the hold is not a press, whether the hold opened the
+ * popover or found it open.
+ * It is never `selected`: it holds no page.
+ */
+export declare function MobileNavServerItem({ className, id, ref, onClick, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onPointerLeave, ...props }: MobileNavServerItemProps): import("react").JSX.Element;
+export type MobileNavServerPopoverContentProps = PopoverContentProps;
+/**
+ * The popover above the tab bar, 8px from each side of it and 8px above it,
+ * as tall as its content and at most 60% of the screen. It stops below the
+ * top safe area (a notch in a standalone web app): Base UI's collision padding
+ * takes only pixels, so the height cap subtracts `env(safe-area-inset-top)`.
+ * The bottom needs none: the tab bar under the popover already pads the
+ * bottom safe area. A column:
+ * `MobileNavServerPopoverList` takes the room left and scrolls, and the
+ * destinations and the footer after it stay in view.
+ */
+export declare function MobileNavServerPopoverContent({ anchor, side, align, sideOffset, collisionPadding, className, ...props }: MobileNavServerPopoverContentProps): import("react").JSX.Element;
+export type MobileNavServerPopoverListProps = ComponentPropsWithRef<"div">;
+/** The server list: takes the room left in the popover and scrolls inside it. */
+export declare function MobileNavServerPopoverList({ className, ...props }: MobileNavServerPopoverListProps): import("react").JSX.Element;
+export type MobileNavServerPopoverGroupProps = ComponentPropsWithRef<"div">;
+/** Rows that always stay in view, such as the footer actions. */
+export declare function MobileNavServerPopoverGroup({ className, ...props }: MobileNavServerPopoverGroupProps): import("react").JSX.Element;
+export type MobileNavServerPopoverRowProps = ComponentPropsWithRef<"button">;
+/**
+ * One row at the option height of every popup list (`py-option-inset`, 36px
+ * for one line; a second line adds its own height and nothing else): a 20px
+ * avatar or a 16px icon, `MobileNavServerPopoverRowLabel` (or a
+ * `MobileNavServerPopoverRowBody` with a description under the label), then
+ * anything trailing (a check, a count), centered on the row.
+ * `aria-current="true"` marks the current server in bold.
+ */
+export declare function MobileNavServerPopoverRow({ className, type, ...props }: MobileNavServerPopoverRowProps): import("react").JSX.Element;
+export type MobileNavServerPopoverRowLabelProps = ComponentPropsWithRef<"span">;
+/** A row's label: takes the room and truncates. */
+export declare function MobileNavServerPopoverRowLabel({ className, ...props }: MobileNavServerPopoverRowLabelProps): import("react").JSX.Element;
+export type MobileNavServerPopoverDestinationsProps = ComponentPropsWithRef<"div">;
+/** The server's own pages, side by side in equal cells; a `group`, named with `aria-label`. */
+export declare function MobileNavServerPopoverDestinations({ className, ...props }: MobileNavServerPopoverDestinationsProps): import("react").JSX.Element;
+export type MobileNavServerPopoverDestinationProps = ComponentPropsWithRef<"button">;
+/**
+ * One of the server's pages: a 20px icon over a short label in a `span`, which
+ * truncates. Something new on that page (a feedback reply, a computer that
+ * needs attention) is an `accent` `Status` child, the attention dot at the
+ * icon's top-right corner: the server tab's avatar never carries it.
+ */
+export declare function MobileNavServerPopoverDestination({ className, type, ...props }: MobileNavServerPopoverDestinationProps): import("react").JSX.Element;
+export type MobileNavServerPopoverRowBodyProps = ComponentPropsWithRef<"span">;
+/**
+ * The text of a two-line row: `MobileNavServerPopoverRowLabel`, then
+ * `MobileNavServerPopoverRowDescription` under it. The second line adds its
+ * own height and nothing else; the avatar and the trailing check or count
+ * center on both lines.
+ */
+export declare function MobileNavServerPopoverRowBody({ className, ...props }: MobileNavServerPopoverRowBodyProps): import("react").JSX.Element;
+export type MobileNavServerPopoverRowDescriptionProps = ComponentPropsWithRef<"span">;
+/** A row's second line, such as a server's address: muted Space Mono; truncates. */
+export declare function MobileNavServerPopoverRowDescription({ className, ...props }: MobileNavServerPopoverRowDescriptionProps): import("react").JSX.Element;
+//#endregion

package/dist/components/mobile-nav/mobile-nav-server.mjs

@@ -0,0 +1,287 @@
+import { tv } from "../../lib/tv.mjs";
+import { MobileNavItem } from "./mobile-nav.mjs";
+import "../../lib/touch-drag.mjs";
+import { PopoverContent } from "../popover/popover.mjs";
+import { createContext, use, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/mobile-nav/mobile-nav-server.tsx
+const mobileNavServer = tv({ slots: {
+	item: [
+		"select-none [-webkit-touch-callout:none]",
+		"*:data-[slot=avatar]:size-[22px]",
+		"data-popup-open:before:bg-fill-medium"
+	],
+	content: [
+		"flex flex-col",
+		"w-[calc(var(--anchor-width)-16px)] min-w-0",
+		"max-h-[min(60dvh,calc(var(--available-height)-env(safe-area-inset-top,0px)))]"
+	],
+	list: ["flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain p-1"],
+	group: ["flex shrink-0 flex-col p-1"],
+	row: [
+		"flex w-full shrink-0 cursor-default select-none items-center",
+		"text-left outline-none transition-colors",
+		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft active:bg-brand-soft focus-visible:bg-brand-soft",
+		"aria-[current=true]:font-bold",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted",
+		"*:data-[slot=avatar]:size-5 *:data-[slot=avatar]:shrink-0"
+	],
+	rowLabel: ["min-w-0 flex-1 truncate"],
+	rowBody: ["flex min-w-0 flex-1 flex-col"],
+	rowDescription: ["min-w-0 truncate", "font-mono text-mono-meta font-normal text-foreground-hint"],
+	destinations: ["grid shrink-0 grid-flow-col auto-cols-fr gap-1 p-1"],
+	destination: [
+		"relative flex min-w-0 cursor-default select-none flex-col items-center justify-center",
+		"outline-none transition-colors",
+		"gap-1 rounded-chip px-1 py-2",
+		"font-sans text-footnote font-medium text-foreground",
+		"hover:bg-brand-soft active:bg-brand-soft focus-visible:bg-brand-soft",
+		"[&_svg]:pointer-events-none [&_svg]:size-5 [&_svg]:shrink-0 [&_svg]:text-foreground-muted",
+		"[&>span]:max-w-full [&>span]:truncate",
+		"*:data-[slot=status]:absolute *:data-[slot=status]:top-1 *:data-[slot=status]:left-[calc(50%+6px)]"
+	]
+} });
+const MobileNavServerContext = createContext(null);
+function useMobileNavServerContext(part) {
+	const context = use(MobileNavServerContext);
+	if (!context) throw new Error(`${part} must be inside MobileNavServerPopover`);
+	return context;
+}
+/** The root: owns the popover's open state, like `Popover` (`open`, `onOpenChange`). */
+function MobileNavServerPopover(props) {
+	const [handle] = useState(() => Popover.createHandle());
+	const triggerRef = useRef(null);
+	const context = useMemo(() => ({
+		handle,
+		triggerRef
+	}), [handle]);
+	return /* @__PURE__ */ jsx(MobileNavServerContext, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			"data-slot": "mobile-nav-server-popover",
+			handle,
+			...props
+		})
+	});
+}
+/**
+* The tab: the server's avatar and its name in `MobileNavLabel`, as children.
+* A press opens the popover, and so does holding it for 500ms (the long press
+* of raft-ui's menus). Lifting the finger after a hold never closes it: the
+* click that ends the hold is not a press, whether the hold opened the
+* popover or found it open.
+* It is never `selected`: it holds no page.
+*/
+function MobileNavServerItem({ className, id, ref, onClick, onContextMenu, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onPointerLeave, ...props }) {
+	const { handle, triggerRef } = useMobileNavServerContext("MobileNavServerItem");
+	const { item } = mobileNavServer();
+	const generatedId = useId();
+	const triggerId = id ?? generatedId;
+	const holdTimer = useRef(void 0);
+	const holdStart = useRef(null);
+	const held = useRef(false);
+	const cancelHold = useCallback(() => {
+		clearTimeout(holdTimer.current);
+		holdTimer.current = void 0;
+		holdStart.current = null;
+	}, []);
+	useEffect(() => cancelHold, [cancelHold]);
+	const setRef = useCallback((node) => {
+		triggerRef.current = node;
+		assignRef(ref, node);
+	}, [ref, triggerRef]);
+	const handlePointerDown = useCallback((event) => {
+		onPointerDown?.(event);
+		cancelHold();
+		held.current = false;
+		if (event.button !== 0) return;
+		holdStart.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		holdTimer.current = setTimeout(() => {
+			holdTimer.current = void 0;
+			held.current = true;
+			if (!handle.isOpen) handle.open(triggerId);
+		}, 500);
+	}, [
+		cancelHold,
+		handle,
+		onPointerDown,
+		triggerId
+	]);
+	const handlePointerMove = useCallback((event) => {
+		onPointerMove?.(event);
+		const start = holdStart.current;
+		if (!start) return;
+		if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > 10) cancelHold();
+	}, [cancelHold, onPointerMove]);
+	const handlePointerUp = useCallback((event) => {
+		onPointerUp?.(event);
+		cancelHold();
+	}, [cancelHold, onPointerUp]);
+	const handlePointerCancel = useCallback((event) => {
+		onPointerCancel?.(event);
+		cancelHold();
+	}, [cancelHold, onPointerCancel]);
+	const handlePointerLeave = useCallback((event) => {
+		onPointerLeave?.(event);
+		cancelHold();
+	}, [cancelHold, onPointerLeave]);
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (!held.current) return;
+		held.current = false;
+		event.preventBaseUIHandler?.();
+	}, [onClick]);
+	const handleContextMenu = useCallback((event) => {
+		onContextMenu?.(event);
+		event.preventDefault();
+	}, [onContextMenu]);
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		handle,
+		id: triggerId,
+		ref: setRef,
+		render: /* @__PURE__ */ jsx(MobileNavItem, {}),
+		"data-slot": "mobile-nav-server-item",
+		className: item({ className }),
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		onPointerCancel: handlePointerCancel,
+		onPointerLeave: handlePointerLeave,
+		onClick: handleClick,
+		onContextMenu: handleContextMenu,
+		...props
+	});
+}
+/**
+* The popover above the tab bar, 8px from each side of it and 8px above it,
+* as tall as its content and at most 60% of the screen. It stops below the
+* top safe area (a notch in a standalone web app): Base UI's collision padding
+* takes only pixels, so the height cap subtracts `env(safe-area-inset-top)`.
+* The bottom needs none: the tab bar under the popover already pads the
+* bottom safe area. A column:
+* `MobileNavServerPopoverList` takes the room left and scrolls, and the
+* destinations and the footer after it stay in view.
+*/
+function MobileNavServerPopoverContent({ anchor, side = "top", align = "center", sideOffset = 8, collisionPadding = 8, className, ...props }) {
+	const { triggerRef } = useMobileNavServerContext("MobileNavServerPopoverContent");
+	const { content } = mobileNavServer();
+	const tabBar = useCallback(() => {
+		const trigger = triggerRef.current;
+		return trigger?.closest("[data-slot=mobile-nav-root]") ?? trigger;
+	}, [triggerRef]);
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		"data-slot": "mobile-nav-server-popover-content",
+		anchor: anchor ?? tabBar,
+		side,
+		align,
+		sideOffset,
+		collisionPadding,
+		className: content({ className }),
+		...props
+	});
+}
+/** The server list: takes the room left in the popover and scrolls inside it. */
+function MobileNavServerPopoverList({ className, ...props }) {
+	const { list } = mobileNavServer();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "mobile-nav-server-popover-list",
+		className: list({ className }),
+		...props
+	});
+}
+/** Rows that always stay in view, such as the footer actions. */
+function MobileNavServerPopoverGroup({ className, ...props }) {
+	const { group } = mobileNavServer();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "mobile-nav-server-popover-group",
+		className: group({ className }),
+		...props
+	});
+}
+/**
+* One row at the option height of every popup list (`py-option-inset`, 36px
+* for one line; a second line adds its own height and nothing else): a 20px
+* avatar or a 16px icon, `MobileNavServerPopoverRowLabel` (or a
+* `MobileNavServerPopoverRowBody` with a description under the label), then
+* anything trailing (a check, a count), centered on the row.
+* `aria-current="true"` marks the current server in bold.
+*/
+function MobileNavServerPopoverRow({ className, type = "button", ...props }) {
+	const { row } = mobileNavServer();
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "mobile-nav-server-popover-row",
+		className: row({ className }),
+		...props
+	});
+}
+/** A row's label: takes the room and truncates. */
+function MobileNavServerPopoverRowLabel({ className, ...props }) {
+	const { rowLabel } = mobileNavServer();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "mobile-nav-server-popover-row-label",
+		className: rowLabel({ className }),
+		...props
+	});
+}
+/** The server's own pages, side by side in equal cells; a `group`, named with `aria-label`. */
+function MobileNavServerPopoverDestinations({ className, ...props }) {
+	const { destinations } = mobileNavServer();
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "mobile-nav-server-popover-destinations",
+		className: destinations({ className }),
+		...props
+	});
+}
+/**
+* One of the server's pages: a 20px icon over a short label in a `span`, which
+* truncates. Something new on that page (a feedback reply, a computer that
+* needs attention) is an `accent` `Status` child, the attention dot at the
+* icon's top-right corner: the server tab's avatar never carries it.
+*/
+function MobileNavServerPopoverDestination({ className, type = "button", ...props }) {
+	const { destination } = mobileNavServer();
+	return /* @__PURE__ */ jsx("button", {
+		type,
+		"data-slot": "mobile-nav-server-popover-destination",
+		className: destination({ className }),
+		...props
+	});
+}
+/**
+* The text of a two-line row: `MobileNavServerPopoverRowLabel`, then
+* `MobileNavServerPopoverRowDescription` under it. The second line adds its
+* own height and nothing else; the avatar and the trailing check or count
+* center on both lines.
+*/
+function MobileNavServerPopoverRowBody({ className, ...props }) {
+	const { rowBody } = mobileNavServer();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "mobile-nav-server-popover-row-body",
+		className: rowBody({ className }),
+		...props
+	});
+}
+/** A row's second line, such as a server's address: muted Space Mono; truncates. */
+function MobileNavServerPopoverRowDescription({ className, ...props }) {
+	const { rowDescription } = mobileNavServer();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "mobile-nav-server-popover-row-description",
+		className: rowDescription({ className }),
+		...props
+	});
+}
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+//#endregion
+export { MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel };

package/dist/components/mobile-nav/mobile-nav.d.mts

@@ -0,0 +1,12 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/mobile-nav/mobile-nav.d.ts
+export type MobileNavRootProps = useRender.ComponentProps<"nav">;
+export declare function MobileNavRoot({ className, render, ...props }: MobileNavRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MobileNavItemProps = useRender.ComponentProps<"button"> & {
+  nativeButton?: boolean;
+  selected?: boolean;
+};
+export declare function MobileNavItem({ nativeButton, selected, className, render, ref, ...props }: MobileNavItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type MobileNavLabelProps = useRender.ComponentProps<"span">;
+export declare function MobileNavLabel({ className, render, ...props }: MobileNavLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/mobile-nav/mobile-nav.mjs

@@ -0,0 +1,73 @@
+import { tv } from "../../lib/tv.mjs";
+import { useTapActivation } from "../../lib/tap-activation.mjs";
+import { jsx } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/mobile-nav/mobile-nav.tsx
+const mobileNav = tv({ slots: {
+	root: [
+		"grid w-full flex-none grid-flow-col auto-cols-fr items-start gap-0",
+		"border-t border-line-seam bg-layer-card px-2 pt-1.5 text-foreground-hint",
+		"pb-[max(8px,min(env(safe-area-inset-bottom,0px),34px))]"
+	],
+	item: [
+		"relative inline-flex shrink-0 items-center outline-none",
+		"disabled:pointer-events-none disabled:opacity-45",
+		"[&_svg]:shrink-0",
+		"isolate min-w-0 flex-col justify-start gap-[7px] border-0 px-0 pt-1 pb-0",
+		"font-sans text-[10px]/3 font-semibold text-foreground-hint",
+		"*:relative *:z-10 [&_svg]:size-[22px] [&_svg]:stroke-2",
+		"before:pointer-events-none before:absolute before:top-0 before:left-1/2 before:z-0 before:-translate-x-1/2",
+		"before:h-[30px] before:w-14 before:rounded-control before:border-[1.5px] before:border-transparent before:content-['']",
+		"active:before:bg-fill-medium",
+		"data-[selected=true]:font-bold data-[selected=true]:text-foreground",
+		"data-[selected=true]:[&_svg]:text-sticker-ink",
+		"data-[selected=true]:before:border-sticker-ink data-[selected=true]:before:bg-selected data-[selected=true]:before:ring-[1.5px] data-[selected=true]:before:ring-sticker-edge",
+		"data-[selected=true]:active:before:overlay-sticker-medium",
+		"rounded-control focus-visible:shadow-focus"
+	],
+	itemLabel: ["min-w-0 truncate", "max-w-full"]
+} });
+function MobileNavRoot({ className, render, ...props }) {
+	const { root } = mobileNav();
+	const defaultProps = {
+		"data-slot": "mobile-nav-root",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "nav",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MobileNavItem({ nativeButton = true, selected, className, render, ref, ...props }) {
+	const { item } = mobileNav();
+	const tapRef = useTapActivation();
+	const defaultProps = {
+		type: nativeButton ? "button" : void 0,
+		"aria-pressed": nativeButton ? selected : void 0,
+		"data-slot": "mobile-nav-item",
+		"data-selected": selected ? "true" : void 0,
+		className: item({ className })
+	};
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx(Button, {}),
+		ref: ref ? [ref, tapRef] : tapRef,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function MobileNavLabel({ className, render, ...props }) {
+	const { itemLabel } = mobileNav();
+	const defaultProps = {
+		"data-slot": "mobile-nav-item-label",
+		className: itemLabel({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { MobileNavItem, MobileNavLabel, MobileNavRoot };

package/dist/components/mode-bar/index.d.mts

@@ -0,0 +1,2 @@
+import { ModeBar, ModeBarAction, ModeBarActionProps, ModeBarContent, ModeBarContentProps, ModeBarDescription, ModeBarDescriptionProps, ModeBarProps, ModeBarTitle, ModeBarTitleProps } from "./mode-bar.mjs";
+export { ModeBar, ModeBarAction, type ModeBarActionProps, ModeBarContent, type ModeBarContentProps, ModeBarDescription, type ModeBarDescriptionProps, type ModeBarProps, ModeBarTitle, type ModeBarTitleProps };

package/dist/components/mode-bar/mode-bar.d.mts

@@ -0,0 +1,33 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/mode-bar/mode-bar.d.ts
+export type ModeBarProps = useRender.ComponentProps<"div">;
+/**
+ * The strip. Put `ModeBarContent` in it, then the `ModeBarAction` that ends
+ * the mode.
+ */
+export declare function ModeBar({ className, render, ...props }: ModeBarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ModeBarContentProps = useRender.ComponentProps<"div">;
+/**
+ * The words: `ModeBarTitle`, then `ModeBarDescription`, on one line that
+ * wraps. A polite live region, so a change to the title (a draft count) is
+ * read out; the action stays outside it.
+ */
+export declare function ModeBarContent({ className, render, ...props }: ModeBarContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ModeBarTitleProps = useRender.ComponentProps<"span">;
+/** The mode and its state, bold in the HUD ink: "Commenting · 1 draft." */
+export declare function ModeBarTitle({ className, render, ...props }: ModeBarTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ModeBarDescriptionProps = useRender.ComponentProps<"span">;
+/**
+ * What to do in the mode, in the muted HUD ink, after the title on the same
+ * line. It brings the space before it, so the two read and copy as one
+ * sentence.
+ */
+export declare function ModeBarDescription({ className, render, children, ...props }: ModeBarDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type ModeBarActionProps = useRender.ComponentProps<"button">;
+/**
+ * The text action that ends the mode (Done), at the end of the first line. A
+ * real `button`; on the HUD it is a text action, like a toast's, never a
+ * Button.
+ */
+export declare function ModeBarAction({ className, render, ...props }: ModeBarActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/mode-bar/mode-bar.mjs

@@ -0,0 +1,115 @@
+import { tv } from "../../lib/tv.mjs";
+import { hudTextAction } from "../../lib/hud-text-action.mjs";
+import { Fragment, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/mode-bar/mode-bar.tsx
+/**
+* A dark strip across a panel, under its head, while the panel is in a mode
+* people entered and leave on purpose (commenting on an Artifact). It is the
+* HUD surface, not an intent tint: nothing is wrong, so it is not a notice;
+* the dark fill says "the panel works differently now" until the mode ends.
+* Its edges and height for one line are PanelNotice's, so the two strips are
+* one size under a head.
+*/
+const modeBar = tv({ slots: {
+	root: [
+		"flex shrink-0 items-start",
+		"min-h-10 gap-4 px-5 py-2.5 max-md:px-4",
+		"bg-layer-hud font-sans text-callout text-foreground-on-hud"
+	],
+	content: ["min-w-0 flex-1 wrap-break-word"],
+	title: ["font-bold"],
+	description: ["text-foreground-on-hud-muted"],
+	action: [
+		"relative inline-flex shrink-0 items-center whitespace-nowrap select-none",
+		"border-0 bg-transparent p-0",
+		...hudTextAction,
+		"disabled:pointer-events-none disabled:opacity-40"
+	]
+} });
+/**
+* The strip. Put `ModeBarContent` in it, then the `ModeBarAction` that ends
+* the mode.
+*/
+function ModeBar({ className, render, ...props }) {
+	const { root } = modeBar();
+	const defaultProps = {
+		"data-slot": "mode-bar",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* The words: `ModeBarTitle`, then `ModeBarDescription`, on one line that
+* wraps. A polite live region, so a change to the title (a draft count) is
+* read out; the action stays outside it.
+*/
+function ModeBarContent({ className, render, ...props }) {
+	const { content } = modeBar();
+	const defaultProps = {
+		"data-slot": "mode-bar-content",
+		role: "status",
+		className: content({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/** The mode and its state, bold in the HUD ink: "Commenting · 1 draft." */
+function ModeBarTitle({ className, render, ...props }) {
+	const { title } = modeBar();
+	const defaultProps = {
+		"data-slot": "mode-bar-title",
+		className: title({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* What to do in the mode, in the muted HUD ink, after the title on the same
+* line. It brings the space before it, so the two read and copy as one
+* sentence.
+*/
+function ModeBarDescription({ className, render, children, ...props }) {
+	const { description } = modeBar();
+	const defaultProps = {
+		"data-slot": "mode-bar-description",
+		className: description({ className }),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [" ", children] })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+/**
+* The text action that ends the mode (Done), at the end of the first line. A
+* real `button`; on the HUD it is a text action, like a toast's, never a
+* Button.
+*/
+function ModeBarAction({ className, render, ...props }) {
+	const { action } = modeBar();
+	const defaultProps = {
+		"data-slot": "mode-bar-action",
+		type: "button",
+		className: action({ className })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle };

package/dist/components/notification-center/index.d.mts

@@ -0,0 +1,2 @@
+import { NotificationCenter, NotificationCenterActionButton, NotificationCenterActionButtonProps, NotificationCenterCount, NotificationCenterCountProps, NotificationCenterEmptyState, NotificationCenterEmptyStateProps, NotificationCenterHeader, NotificationCenterHeaderProps, NotificationCenterItem, NotificationCenterItemActions, NotificationCenterItemActionsProps, NotificationCenterItemBody, NotificationCenterItemBodyProps, NotificationCenterItemContent, NotificationCenterItemContentProps, NotificationCenterItemIcon, NotificationCenterItemIconProps, NotificationCenterItemProps, NotificationCenterItemRow, NotificationCenterItemRowProps, NotificationCenterItemTitle, NotificationCenterItemTitleProps, NotificationCenterList, NotificationCenterListProps, NotificationCenterPopup, NotificationCenterPopupProps, NotificationCenterPortalProps, NotificationCenterProps, NotificationCenterScroller, NotificationCenterScrollerProps, NotificationCenterTitle, NotificationCenterTitleProps, NotificationCenterTrigger, NotificationCenterTriggerProps } from "./notification-center.mjs";
+export { NotificationCenter, NotificationCenterActionButton, type NotificationCenterActionButtonProps, NotificationCenterCount, type NotificationCenterCountProps, NotificationCenterEmptyState, type NotificationCenterEmptyStateProps, NotificationCenterHeader, type NotificationCenterHeaderProps, NotificationCenterItem, NotificationCenterItemActions, type NotificationCenterItemActionsProps, NotificationCenterItemBody, type NotificationCenterItemBodyProps, NotificationCenterItemContent, type NotificationCenterItemContentProps, NotificationCenterItemIcon, type NotificationCenterItemIconProps, type NotificationCenterItemProps, NotificationCenterItemRow, type NotificationCenterItemRowProps, NotificationCenterItemTitle, type NotificationCenterItemTitleProps, NotificationCenterList, type NotificationCenterListProps, NotificationCenterPopup, type NotificationCenterPopupProps, type NotificationCenterPortalProps, type NotificationCenterProps, NotificationCenterScroller, type NotificationCenterScrollerProps, NotificationCenterTitle, type NotificationCenterTitleProps, NotificationCenterTrigger, type NotificationCenterTriggerProps };