@botiverse/raft-ui 0.83.0 → 0.84.0

package/dist/components/preview-card/preview-card.d.mts

@@ -28,7 +28,11 @@ export declare function PreviewCardDescription({ className, ...props }: PreviewC
 export type PreviewCardArrowProps = StyledProps<PreviewCard.Arrow.Props>;
 export declare function PreviewCardArrow({ className, ...props }: PreviewCardArrowProps): import("react").JSX.Element;
 export type PreviewCardBodyProps = ComponentPropsWithRef<"div">;
-/** The item card's block: the id line, the title and the details row, in that order. */
+/**
+ * The item card's block: the id line, the title and the details row, in that
+ * order. Its parts are a card's in a message (AppLinkCard), so the two read
+ * the same.
+ */
 export declare function PreviewCardBody({ className, ...props }: PreviewCardBodyProps): import("react").JSX.Element;
 export type PreviewCardEyebrowProps = ComponentPropsWithRef<"p">;
 /** The muted line above the title that identifies the item, such as its id. One line, truncated. */

package/dist/components/preview-card/preview-card.mjs

@@ -2,6 +2,8 @@ import { tv } from "../../lib/tv.mjs";
 import { useTheme } from "../../lib/theme/use-theme.mjs";
 import { resolveThemeScopeProps, useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
 import { usePopupCollision } from "../../lib/frame-insets.mjs";
+import { messageCard } from "../message-embed/message-embed.recipe.mjs";
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/preview-card/preview-card.tsx
@@ -24,24 +26,11 @@ const previewCard = tv({
 		separator: ["border-t", "border-line-hairline"],
 		title: ["m-0 truncate", "font-sans text-headline font-bold text-foreground"],
 		description: ["m-0 truncate", "px-4 py-3 last:pb-4 font-sans text-callout text-foreground-muted"],
-		arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"],
-		body: [
-			"flex min-w-0 flex-col gap-1.5",
-			"px-4 pt-4 pb-3 last:pb-4",
-			"*:data-[slot=preview-card-title]:line-clamp-2 *:data-[slot=preview-card-title]:whitespace-normal"
-		],
-		eyebrow: ["m-0 truncate", "font-mono text-mono-meta text-foreground-muted"],
-		meta: ["flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", "m-0 font-sans text-callout text-foreground-muted"],
-		actions: ["flex flex-wrap items-center justify-end gap-2", "px-4 pb-3 last:pb-4"],
-		footer: [
-			"m-0 truncate",
-			"border-t border-line-hairline px-4 py-2",
-			"font-sans text-caption text-foreground-muted"
-		]
+		arrow: ["size-2 rotate-45", "border-l border-t border-line-seam bg-layer-popover"]
 	},
 	variants: { size: {
 		profile: { popup: "w-[300px]" },
-		item: { popup: "w-[400px]" }
+		item: { popup: messageCard().popover() }
 	} },
 	defaultVariants: { size: "profile" }
 });
@@ -132,8 +121,9 @@ function PreviewCardSeparator({ className, ...props }) {
 		...props
 	});
 }
+const InItemBody = createContext(false);
 function PreviewCardTitle({ className, ...props }) {
-	const { title } = previewCard();
+	const title = useContext(InItemBody) ? messageCard().title : previewCard().title;
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "preview-card-title",
 		className: title({ className }),
@@ -156,18 +146,25 @@ function PreviewCardArrow({ className, ...props }) {
 		...props
 	});
 }
-/** The item card's block: the id line, the title and the details row, in that order. */
+/**
+* The item card's block: the id line, the title and the details row, in that
+* order. Its parts are a card's in a message (AppLinkCard), so the two read
+* the same.
+*/
 function PreviewCardBody({ className, ...props }) {
-	const { body } = previewCard();
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "preview-card-body",
-		className: body({ className }),
-		...props
+	const { body } = messageCard();
+	return /* @__PURE__ */ jsx(InItemBody.Provider, {
+		value: true,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "preview-card-body",
+			className: body({ className }),
+			...props
+		})
 	});
 }
 /** The muted line above the title that identifies the item, such as its id. One line, truncated. */
 function PreviewCardEyebrow({ className, ...props }) {
-	const { eyebrow } = previewCard();
+	const { eyebrow } = messageCard();
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "preview-card-eyebrow",
 		className: eyebrow({ className }),
@@ -176,7 +173,7 @@ function PreviewCardEyebrow({ className, ...props }) {
 }
 /** The row under the title: one state chip, then muted details. Wraps when it runs out of room. */
 function PreviewCardMeta({ className, ...props }) {
-	const { meta } = previewCard();
+	const { meta } = messageCard();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "preview-card-meta",
 		className: meta({ className }),
@@ -185,7 +182,7 @@ function PreviewCardMeta({ className, ...props }) {
 }
 /** The row of at most two buttons. */
 function PreviewCardActions({ className, ...props }) {
-	const { actions } = previewCard();
+	const { actions } = messageCard();
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "preview-card-actions",
 		className: actions({ className }),
@@ -194,10 +191,10 @@ function PreviewCardActions({ className, ...props }) {
 }
 /** The caption under a hairline at the bottom of the card: where the item comes from. */
 function PreviewCardFooter({ className, ...props }) {
-	const { footer } = previewCard();
+	const { sourceFooter } = messageCard();
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "preview-card-footer",
-		className: footer({ className }),
+		className: sourceFooter({ className }),
 		...props
 	});
 }

package/dist/components/save-status/save-status.d.mts

@@ -2,22 +2,29 @@ import { ComponentPropsWithRef } from "react";
 //#region src/components/save-status/save-status.d.ts
 export type SaveStatusProps = ComponentPropsWithRef<"span">;
 /**
- * The reserved line itself. Render it whatever the setting's state, and put
- * `SaveStatusSaved` or `SaveStatusError` inside. A `span` (shown as a block),
- * like every ListRow part, so it stays valid inside a row's body.
+ * The line under a setting that applies at once. Render it whatever the
+ * setting's state, with `SaveStatusError` inside when the change failed and
+ * nothing inside otherwise: empty, it is hidden and takes no height. A `span`
+ * (shown as a block), like every ListRow part, so it stays valid inside a
+ * row's body; give it an `id` for the control's `aria-describedby`.
  */
 export declare function SaveStatus({ className, ...props }: SaveStatusProps): import("react").JSX.Element;
 export type SaveStatusSavedProps = ComponentPropsWithRef<"span">;
 /**
- * The polite live region that says the change is stored. Keep it mounted,
- * empty, while nothing has happened, so a screen reader announces the words
- * when they arrive; the check shows only with them.
+ * @deprecated A setting that applies at once no longer says "Saved": the
+ * control showing its new value is the confirmation (Forms, settings that
+ * apply at once). Renders nothing, whatever its children, so its
+ * `SaveStatus` stays empty and takes no height. Leave it out: render
+ * `SaveStatusError` when the change failed and nothing otherwise. It drops
+ * every prop, its `id` too: point a control's `aria-describedby` at the
+ * `SaveStatus` instead.
  */
-export declare function SaveStatusSaved({ className, children, ...props }: SaveStatusSavedProps): import("react").JSX.Element;
+export declare function SaveStatusSaved(_props: SaveStatusSavedProps): null;
 export type SaveStatusErrorProps = ComponentPropsWithRef<"span">;
 /**
- * What failed, in place of `SaveStatusSaved`. It is an alert, announced when
- * it appears, and stays until the next change.
+ * What failed. It is an alert, announced when it appears, and stays until
+ * the next change. Its line appears with it, so the setting grows by one
+ * line while it shows.
  */
 export declare function SaveStatusError({ className, role, ...props }: SaveStatusErrorProps): import("react").JSX.Element;
 //#endregion

package/dist/components/save-status/save-status.mjs

@@ -1,24 +1,20 @@
 import { tv } from "../../lib/tv.mjs";
-import { CircleCheck } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/save-status/save-status.tsx
 const saveStatus = tv({ slots: {
 	root: [
-		"block min-h-lh min-w-0",
+		"block min-w-0 empty:hidden",
 		"mt-1 [[data-slot=field]>&]:-mt-0.5 [[data-slot=list-row-body]>&]:mt-0.5",
 		"text-footnote"
 	],
-	saved: [
-		"flex min-w-0 items-center gap-1",
-		"text-foreground-muted",
-		"[&>svg]:size-3 [&>svg]:shrink-0"
-	],
 	error: ["block wrap-anywhere", "text-danger-strong"]
 } });
 /**
-* The reserved line itself. Render it whatever the setting's state, and put
-* `SaveStatusSaved` or `SaveStatusError` inside. A `span` (shown as a block),
-* like every ListRow part, so it stays valid inside a row's body.
+* The line under a setting that applies at once. Render it whatever the
+* setting's state, with `SaveStatusError` inside when the change failed and
+* nothing inside otherwise: empty, it is hidden and takes no height. A `span`
+* (shown as a block), like every ListRow part, so it stays valid inside a
+* row's body; give it an `id` for the control's `aria-describedby`.
 */
 function SaveStatus({ className, ...props }) {
 	const { root } = saveStatus();
@@ -29,28 +25,21 @@ function SaveStatus({ className, ...props }) {
 	});
 }
 /**
-* The polite live region that says the change is stored. Keep it mounted,
-* empty, while nothing has happened, so a screen reader announces the words
-* when they arrive; the check shows only with them.
+* @deprecated A setting that applies at once no longer says "Saved": the
+* control showing its new value is the confirmation (Forms, settings that
+* apply at once). Renders nothing, whatever its children, so its
+* `SaveStatus` stays empty and takes no height. Leave it out: render
+* `SaveStatusError` when the change failed and nothing otherwise. It drops
+* every prop, its `id` too: point a control's `aria-describedby` at the
+* `SaveStatus` instead.
 */
-function SaveStatusSaved({ className, children, ...props }) {
-	const { saved } = saveStatus();
-	const hasContent = children !== null && children !== void 0 && children !== false && children !== "";
-	return /* @__PURE__ */ jsxs("span", {
-		"data-slot": "save-status-saved",
-		role: "status",
-		"aria-live": "polite",
-		className: saved({ className }),
-		...props,
-		children: [hasContent ? /* @__PURE__ */ jsx(CircleCheck, {
-			"aria-hidden": "true",
-			"data-slot": "save-status-icon"
-		}) : null, children]
-	});
+function SaveStatusSaved(_props) {
+	return null;
 }
 /**
-* What failed, in place of `SaveStatusSaved`. It is an alert, announced when
-* it appears, and stays until the next change.
+* What failed. It is an alert, announced when it appears, and stays until
+* the next change. Its line appears with it, so the setting grows by one
+* line while it shows.
 */
 function SaveStatusError({ className, role = "alert", ...props }) {
 	const { error } = saveStatus();

package/dist/components/segmented-control/segmented-control.mjs

@@ -3,8 +3,9 @@ import { useMergedRef } from "../../lib/use-merged-ref.mjs";
 import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
 import { useInFitToolbar } from "../fit-toolbar/fit-toolbar.mjs";
-import { createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { cloneElement, createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
 import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";
 //#region src/components/segmented-control/segmented-control.tsx
@@ -73,6 +74,11 @@ function isIconsOnlyPreset(value) {
 }
 const SegmentedControlIconsOnlyContext = createContext(false);
 /**
+* In a FitToolbar: whether the control holds the toolbar's one tab stop
+* (`undefined` outside a toolbar, where the radio group keeps its own).
+*/
+const SegmentedControlToolbarStopContext = createContext(void 0);
+/**
 * A length threshold in CSS pixels, or `undefined` for a value that isn't a
 * `px`, `rem` or `em` length. `em` is the container's font size, as in a
 * container query.
@@ -250,21 +256,51 @@ function SegmentedControl({ disabled = false, iconsOnlyBelow: iconsOnlyBelowProp
 		if (start < track.scrollLeft) track.scrollLeft = start;
 		else if (end > track.scrollLeft + track.clientWidth) track.scrollLeft = end - track.clientWidth;
 	}, [overflowing, value]);
+	const group = /* @__PURE__ */ jsx(RadioGroup, {
+		ref: setRef,
+		disabled,
+		"data-slot": "segmented-control",
+		"data-overflowing": overflowing ? "" : void 0,
+		"data-fit-needs-icon": inFitToolbar ? "" : void 0,
+		className: root({ className }),
+		...props
+	});
 	return /* @__PURE__ */ jsx(SegmentedControlIconsOnlyContext, {
 		value: inFitToolbar || iconsOnlyBelow !== void 0,
-		children: /* @__PURE__ */ jsx(RadioGroup, {
-			ref: setRef,
-			disabled,
-			"data-slot": "segmented-control",
-			"data-overflowing": overflowing ? "" : void 0,
-			className: root({ className }),
-			...props
+		children: inFitToolbar ? /* @__PURE__ */ jsx(ToolbarItem, { group }) : group
+	});
+}
+/**
+* In a FitToolbar the control is one item of the toolbar's list (Base UI
+* Toolbar), so the toolbar keeps one tab stop: its segments are reachable by
+* Tab only while the control holds it, and the toolbar's arrow keys reach
+* them. Registered through `Toolbar.Link`'s render function, the one toolbar
+* part that adds no role or keys of its own: the radio group is the item. Its
+* own tab stop is the segments', never the group's.
+*/
+function ToolbarItem({ group }) {
+	const render = useCallback(({ ref, tabIndex, ...itemProps }) => /* @__PURE__ */ jsx(ToolbarItemGroup, {
+		group,
+		itemProps,
+		itemRef: ref,
+		stop: tabIndex === 0
+	}), [group]);
+	return /* @__PURE__ */ jsx(Toolbar.Link, { render });
+}
+function ToolbarItemGroup({ group, itemProps, itemRef, stop }) {
+	const [setRef] = useMergedRef(itemRef, group.props.ref);
+	return /* @__PURE__ */ jsx(SegmentedControlToolbarStopContext, {
+		value: stop,
+		children: cloneElement(group, {
+			...itemProps,
+			ref: setRef
 		})
 	});
 }
 function SegmentedControlItem({ className, ref, ...props }) {
 	const { item } = segmentedControl();
 	const iconsOnly = use(SegmentedControlIconsOnlyContext);
+	const toolbarStop = use(SegmentedControlToolbarStopContext);
 	const tapRef = useTapActivation();
 	const [setRef] = useMergedRef(tapRef, ref);
 	const radio = /* @__PURE__ */ jsx(Radio.Root, {
@@ -273,6 +309,7 @@ function SegmentedControlItem({ className, ref, ...props }) {
 		nativeButton: true,
 		"data-slot": "segmented-control-item",
 		className: item({ className: `group/segmented-control-item ${className ?? ""}`.trim() }),
+		...toolbarStop === false ? { tabIndex: -1 } : {},
 		...props
 	});
 	return iconsOnly ? /* @__PURE__ */ jsx(SegmentedControlItemTooltip, { children: radio }) : radio;

package/dist/components/task-board/task-board.d.mts

@@ -22,6 +22,11 @@ export declare function TaskBoardColumnBadge({ status, children, className, rend
 export type TaskBoardColumnCountProps = useRender.ComponentProps<"span">;
 export declare function TaskBoardColumnCount({ className, render, ...props }: TaskBoardColumnCountProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type TaskBoardColumnChevronProps = useRender.ComponentProps<"span">;
+/**
+ * The arrow that shows whether the column is open: right while it is collapsed, down while it is open. It draws a
+ * `ChevronDown` when given no children, so a column heading always has it: a collapsed column shows only its heading,
+ * and without the arrow "Closed 2" over an empty space reads as two tasks that failed to load.
+ */
 export declare function TaskBoardColumnChevron({ className, render, ...props }: TaskBoardColumnChevronProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type TaskBoardColumnPanelProps = Omit<ComponentProps<typeof Collapsible.Panel>, "className"> & {
   className?: string;

package/dist/components/task-board/task-board.mjs

@@ -1,6 +1,7 @@
 import { cn } from "../../cn.mjs";
 import { TaskStatusIcon } from "../tasks/task-status-icon.mjs";
 import { taskBoardColumn } from "./task-board-column.recipe.mjs";
+import { ChevronDown } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -71,11 +72,17 @@ function TaskBoardColumnCount({ className, render, ...props }) {
 		props: mergeProps(defaultProps, props)
 	});
 }
+/**
+* The arrow that shows whether the column is open: right while it is collapsed, down while it is open. It draws a
+* `ChevronDown` when given no children, so a column heading always has it: a collapsed column shows only its heading,
+* and without the arrow "Closed 2" over an empty space reads as two tasks that failed to load.
+*/
 function TaskBoardColumnChevron({ className, render, ...props }) {
 	const { chevron } = taskBoardColumn();
 	const defaultProps = {
 		"data-slot": "task-board-column-chevron",
-		className: chevron({ className })
+		className: chevron({ className }),
+		children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true })
 	};
 	return useRender({
 		defaultTagName: "span",

package/dist/components/task-dnd/task-dnd.d.mts

@@ -52,8 +52,17 @@ export type TaskDropZoneProps = useRender.ComponentProps<"div", TaskDropZoneStat
   id: UniqueIdentifier;
   disabled?: boolean;
   data?: TaskDropData;
+  /**
+   * The zone is itself the place, as a column sorted by a field is: its
+   * cards carry no `dropId` and no placeholder opens between them. While a
+   * card it allows is over it, it carries `data-drag-into` and takes
+   * `fill-subtle`; never at rest, and never while it refuses the card.
+   * Without it the zone is never filled, and only a `TaskDropPlaceholder`
+   * says where the card lands.
+   */
+  dragInto?: boolean;
 };
-export declare function TaskDropZone({ id, data, disabled, render, ...props }: TaskDropZoneProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TaskDropZone({ id, data, disabled, dragInto, render, ...props }: TaskDropZoneProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export type TaskDropPlaceholderProps = useRender.ComponentProps<"div", TaskDropZoneState> & {
   id: UniqueIdentifier;
   placement?: TaskDropPlacement;

package/dist/components/task-dnd/task-dnd.mjs

@@ -174,7 +174,7 @@ function assignRef(ref, value) {
 	if (typeof ref === "function") ref(value);
 	else if (ref) ref.current = value;
 }
-function TaskDropZone({ id, data, disabled = false, render, ...props }) {
+function TaskDropZone({ id, data, disabled = false, dragInto = false, render, ...props }) {
 	const context = use(TaskDndContext);
 	const { setNodeRef, isOver } = useDroppable({
 		id,
@@ -190,6 +190,7 @@ function TaskDropZone({ id, data, disabled = false, render, ...props }) {
 		props: {
 			"data-slot": "task-drop-zone",
 			"data-drop-state": dropState,
+			"data-drag-into": dragInto && dropState === "allowed" ? "" : void 0,
 			...props
 		}
 	});

package/dist/components/toast/toast.mjs

@@ -10,8 +10,8 @@ import { Toast } from "@base-ui/react/toast";
 //#region src/components/toast/toast.tsx
 const toastStyles = tv({
 	slots: {
-		viewport: ["pointer-events-none isolate z-70 w-[min(24rem,calc(100vw-2rem))]", "outline-none"],
-		positioner: ["isolate z-[calc(70-var(--toast-index))] outline-none"],
+		viewport: ["pointer-events-none isolate z-80 w-[min(24rem,calc(100vw-2rem))]", "outline-none"],
+		positioner: ["isolate z-[calc(80-var(--toast-index))] outline-none"],
 		root: [
 			"group/toast pointer-events-auto",
 			"select-text",