@botiverse/raft-ui 0.82.0 → 0.84.0

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

@@ -2,8 +2,10 @@ import { tv } from "../../lib/tv.mjs";
 import { useMergedRef } from "../../lib/use-merged-ref.mjs";
 import { useTapActivation } from "../../lib/tap-activation.mjs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
-import { createContext, use, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useInFitToolbar } from "../fit-toolbar/fit-toolbar.mjs";
+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
@@ -51,6 +53,11 @@ const segmentedControl = tv({
 			xl: { root: ["@max-xl:**:data-[slot=segmented-control-item]:relative @max-xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-xl:**:data-[slot=segmented-control-item]:px-0", "@max-xl:**:data-[slot=segmented-control-label]:sr-only @max-xl:**:data-[slot=segmented-control-count]:sr-only"] },
 			"2xl": { root: ["@max-2xl:**:data-[slot=segmented-control-item]:relative @max-2xl:**:data-[slot=segmented-control-item]:w-(--segment-size) @max-2xl:**:data-[slot=segmented-control-item]:px-0", "@max-2xl:**:data-[slot=segmented-control-label]:sr-only @max-2xl:**:data-[slot=segmented-control-count]:sr-only"] }
 		},
+		inFitToolbar: { true: { root: [
+			"shrink-0",
+			"data-fit-label:**:data-[slot=segmented-control-item]:relative data-fit-label:**:data-[slot=segmented-control-item]:w-(--segment-size) data-fit-label:**:data-[slot=segmented-control-item]:px-0",
+			"data-fit-label:**:data-[slot=segmented-control-label]:sr-only data-fit-label:**:data-[slot=segmented-control-count]:sr-only"
+		] } },
 		iconsOnlyMeasured: { true: { root: ["data-icons-only:**:data-[slot=segmented-control-item]:relative data-icons-only:**:data-[slot=segmented-control-item]:w-(--segment-size) data-icons-only:**:data-[slot=segmented-control-item]:px-0", "data-icons-only:**:data-[slot=segmented-control-label]:sr-only data-icons-only:**:data-[slot=segmented-control-count]:sr-only"] } }
 	}
 });
@@ -67,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.
@@ -216,11 +228,14 @@ function useIconsOnlyWarning(ref, iconsOnlyBelow) {
 		}
 	}, [ref, iconsOnlyBelow]);
 }
-function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default", className, ref, ...props }) {
+function SegmentedControl({ disabled = false, iconsOnlyBelow: iconsOnlyBelowProp, variant = "default", className, ref, ...props }) {
+	const inFitToolbar = useInFitToolbar();
+	const iconsOnlyBelow = inFitToolbar ? void 0 : iconsOnlyBelowProp;
 	const preset = isIconsOnlyPreset(iconsOnlyBelow);
 	const { root } = segmentedControl({
 		iconsOnlyBelow: preset ? iconsOnlyBelow : void 0,
 		iconsOnlyMeasured: iconsOnlyBelow !== void 0 && !preset ? true : void 0,
+		inFitToolbar: inFitToolbar || void 0,
 		variant
 	});
 	const rootRef = useRef(null);
@@ -241,21 +256,51 @@ function SegmentedControl({ disabled = false, iconsOnlyBelow, variant = "default
 		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: iconsOnlyBelow !== void 0,
-		children: /* @__PURE__ */ jsx(RadioGroup, {
-			ref: setRef,
-			disabled,
-			"data-slot": "segmented-control",
-			"data-overflowing": overflowing ? "" : void 0,
-			className: root({ className }),
-			...props
+		value: inFitToolbar || iconsOnlyBelow !== void 0,
+		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, {
@@ -264,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/selection-toolbar/index.d.mts

@@ -0,0 +1,2 @@
+import { SelectionToolbar, SelectionToolbarAction, SelectionToolbarActionProps, SelectionToolbarActions, SelectionToolbarActionsProps, SelectionToolbarClose, SelectionToolbarCloseProps, SelectionToolbarCount, SelectionToolbarCountProps, SelectionToolbarCountValue, SelectionToolbarCountValueProps, SelectionToolbarDock, SelectionToolbarDockProps, SelectionToolbarHint, SelectionToolbarHintProps, SelectionToolbarItem, SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, SelectionToolbarMoreProps, SelectionToolbarProps } from "./selection-toolbar.mjs";
+export { SelectionToolbar, SelectionToolbarAction, type SelectionToolbarActionProps, SelectionToolbarActions, type SelectionToolbarActionsProps, SelectionToolbarClose, type SelectionToolbarCloseProps, SelectionToolbarCount, type SelectionToolbarCountProps, SelectionToolbarCountValue, type SelectionToolbarCountValueProps, SelectionToolbarDock, type SelectionToolbarDockProps, SelectionToolbarHint, type SelectionToolbarHintProps, SelectionToolbarItem, type SelectionToolbarItemProps, SelectionToolbarMore, SelectionToolbarMoreItems, type SelectionToolbarMoreProps, type SelectionToolbarProps };

package/dist/components/selection-toolbar/selection-toolbar.d.mts

@@ -0,0 +1,100 @@
+import { ButtonProps } from "../button/button.mjs";
+import "../button/index.mjs";
+import { FitToolbarGroupProps, FitToolbarMoreItems, FitToolbarProps } from "../fit-toolbar/fit-toolbar.mjs";
+import "../fit-toolbar/index.mjs";
+import { ReactElement, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/selection-toolbar/selection-toolbar.d.ts
+export type SelectionToolbarDockProps = useRender.ComponentProps<"div">;
+/**
+ * Where the toolbar floats: centered, 12px above the bottom of the list or
+ * conversation it sits in (plus the safe area), 20px from its sides. Its
+ * parent must be positioned.
+ */
+export declare function SelectionToolbarDock({ className, render, ...props }: SelectionToolbarDockProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarProps = Omit<FitToolbarProps, "wrap" | "orientation">;
+/**
+ * The floating toolbar for selected items (messages, tasks): the count, an
+ * optional hint, the actions on the selection, More while some are out of
+ * the row, then ×. One row at any width: what doesn't fit gives way, measured
+ * in the width it floats in, and never wraps. A `role="toolbar"`, one Tab
+ * stop with the arrow keys inside: give it an `aria-label`.
+ */
+export declare function SelectionToolbar({ className, ...props }: SelectionToolbarProps): import("react").JSX.Element;
+export type SelectionToolbarCountProps = useRender.ComponentProps<"span">;
+/**
+ * What the actions act on ("3 selected"), first. Announced when it changes.
+ * Put the number in `SelectionToolbarCountValue`.
+ */
+export declare function SelectionToolbarCount({ className, render, ...props }: SelectionToolbarCountProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarCountValueProps = useRender.ComponentProps<"span">;
+/** The number in the count, in Space Mono. */
+export declare function SelectionToolbarCountValue({ className, render, ...props }: SelectionToolbarCountValueProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarHintProps = useRender.ComponentProps<"span">;
+/**
+ * A short line after the count, such as "1 will be skipped". The first to
+ * give way: it is then read by screen readers only.
+ */
+export declare function SelectionToolbarHint({ className, render, ...props }: SelectionToolbarHintProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type SelectionToolbarItemProps = {
+  /** The control, such as `<Checkbox />`. It keeps its own role and keys. */
+  children: ReactElement<Record<string, unknown>>;
+};
+/**
+ * Any other control of the toolbar, such as a thread's select-all checkbox
+ * before the count, so the arrow keys reach it. It takes the toolbar's focus
+ * handling only: the control keeps its role and its own keys.
+ */
+export declare function SelectionToolbarItem({ children }: SelectionToolbarItemProps): import("react").JSX.Element;
+export type SelectionToolbarActionsProps = Omit<FitToolbarGroupProps, "wrapOrder" | "firstLine" | "collapseOrder" | "collapsed">;
+/** The actions on the selection, in one row. */
+export declare function SelectionToolbarActions({ className, ...props }: SelectionToolbarActionsProps): import("react").JSX.Element;
+export type SelectionToolbarActionProps = Omit<ButtonProps, "variant" | "size" | "children"> & {
+  /** The action's 14px icon. */
+  icon: ReactNode;
+  /** The label. While only the icon shows, the label is its accessible name and its tooltip. */
+  children: ReactNode;
+  /** Moves into More before the labels give way, the last first. */
+  secondary?: boolean;
+} & ({
+  menu?: false;
+  /**
+   * What the action is in More's menu while it is there. By default a
+   * `DropdownMenuItem` with its icon and label that calls its `onClick`.
+   */
+  moreItem?: ReactNode;
+} | {
+  /** The action opens a menu: a 12px chevron follows the label. Open the menu upward. */
+  menu: true;
+  /**
+   * Required: its menu in More's (a `DropdownMenuSubmenu` with the same
+   * choices). Its `onClick` only opens its own menu, so it has no
+   * default, and without one it would vanish into More.
+   */
+  moreItem: ReactNode;
+});
+/**
+ * One action on the selection: a 14px icon and a label, an `md` ghost button
+ * with a mouse on a desktop, a 44px bar button showing its icon alone on a
+ * phone and a touch screen.
+ */
+export declare function SelectionToolbarAction({ icon, children, secondary, menu, moreItem, className, onClick, disabled, ...props }: SelectionToolbarActionProps): import("react").JSX.Element;
+export type SelectionToolbarMoreProps = Omit<ButtonProps, "variant" | "size" | "aria-label"> & {
+  /** Its accessible name, such as "More actions". */
+  "aria-label": string;
+};
+/**
+ * More, after the actions, shown only while some are in it. Render it as a
+ * `DropdownMenuTrigger` whose menu opens upward (`side="top"`), with
+ * `SelectionToolbarMoreItems` in the menu.
+ */
+export declare function SelectionToolbarMore({ className, children, ...props }: SelectionToolbarMoreProps): import("react").JSX.Element;
+/** The actions in More, in their order, each as its `moreItem`: put it in More's menu. */
+export declare const SelectionToolbarMoreItems: typeof FitToolbarMoreItems;
+export type SelectionToolbarCloseProps = Omit<ButtonProps, "variant" | "size" | "aria-label"> & {
+  /** Its accessible name, such as "Cancel". */
+  "aria-label": string;
+};
+/** ×, last: ends the selection, as Escape does. */
+export declare function SelectionToolbarClose({ className, children, ...props }: SelectionToolbarCloseProps): import("react").JSX.Element;
+//#endregion

package/dist/components/selection-toolbar/selection-toolbar.mjs

@@ -0,0 +1,217 @@
+import { Button } from "../button/button.mjs";
+import { DropdownMenuItem } from "../dropdown-menu/dropdown-menu.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { FitToolbar, FitToolbarGroup, FitToolbarMoreItems, useFitItem, useFitMore } from "../fit-toolbar/fit-toolbar.mjs";
+import { selectionToolbar } from "./selection-toolbar.recipe.mjs";
+import { ChevronDown, MoreHorizontal, X } from "lucide-react";
+import { cloneElement, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/selection-toolbar/selection-toolbar.tsx
+/**
+* The order things give way in as the toolbar runs out of room: the hint,
+* then the secondary actions into More (the last first), then the labels (the
+* last first, so the first action's goes last), then the other actions into
+* More, the last first. The count and × never do.
+*/
+const HINT_STEP = 10;
+const SECONDARY_STEP = 20;
+const LABEL_STEP = 30;
+const MORE_STEP = 40;
+/**
+* Where the toolbar floats: centered, 12px above the bottom of the list or
+* conversation it sits in (plus the safe area), 20px from its sides. Its
+* parent must be positioned.
+*/
+function SelectionToolbarDock({ className, render, ...props }) {
+	const { dock } = selectionToolbar();
+	const defaultProps = { className: dock({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-dock" }
+	});
+}
+/**
+* The floating toolbar for selected items (messages, tasks): the count, an
+* optional hint, the actions on the selection, More while some are out of
+* the row, then ×. One row at any width: what doesn't fit gives way, measured
+* in the width it floats in, and never wraps. A `role="toolbar"`, one Tab
+* stop with the arrow keys inside: give it an `aria-label`.
+*/
+function SelectionToolbar({ className, ...props }) {
+	const { root } = selectionToolbar();
+	return /* @__PURE__ */ jsx(FitToolbar, {
+		"data-slot": "selection-toolbar",
+		className: root({ className }),
+		...props
+	});
+}
+/**
+* What the actions act on ("3 selected"), first. Announced when it changes.
+* Put the number in `SelectionToolbarCountValue`.
+*/
+function SelectionToolbarCount({ className, render, ...props }) {
+	const { count } = selectionToolbar();
+	const defaultProps = {
+		"aria-live": "polite",
+		"aria-atomic": true,
+		className: count({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-count" }
+	});
+}
+/** The number in the count, in Space Mono. */
+function SelectionToolbarCountValue({ className, render, ...props }) {
+	const { countValue } = selectionToolbar();
+	const defaultProps = { className: countValue({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-count-value" }
+	});
+}
+/**
+* A short line after the count, such as "1 will be skipped". The first to
+* give way: it is then read by screen readers only.
+*/
+function SelectionToolbarHint({ className, render, ...props }) {
+	const { hint } = selectionToolbar();
+	const item = useFitItem({ label: HINT_STEP });
+	const defaultProps = {
+		className: hint({ className }),
+		...item.props
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "selection-toolbar-hint" }
+	});
+}
+/**
+* Any other control of the toolbar, such as a thread's select-all checkbox
+* before the count, so the arrow keys reach it. It takes the toolbar's focus
+* handling only: the control keeps its role and its own keys.
+*/
+function SelectionToolbarItem({ children }) {
+	const renderItem = useCallback((itemProps) => {
+		const { role: _role, type: _type, onClick: _onClick, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp, onMouseDown: _onMouseDown, onPointerDown: _onPointerDown, "aria-disabled": _ariaDisabled, ...composite } = itemProps;
+		return cloneElement(children, mergeProps(children.props, {
+			...composite,
+			"data-selection-toolbar-item": ""
+		}));
+	}, [children]);
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		nativeButton: false,
+		render: renderItem
+	});
+}
+/** The actions on the selection, in one row. */
+function SelectionToolbarActions({ className, ...props }) {
+	const { actions } = selectionToolbar();
+	return /* @__PURE__ */ jsx(FitToolbarGroup, {
+		"data-slot": "selection-toolbar-actions",
+		className: actions({ className }),
+		...props
+	});
+}
+let warnedMenuWithoutMoreItem = false;
+function warnMenuWithoutMoreItem() {
+	if (warnedMenuWithoutMoreItem) return;
+	warnedMenuWithoutMoreItem = true;
+	console.warn("raft-ui: a SelectionToolbarAction with `menu` has no `moreItem`; it would vanish when it moves into More. Give it its menu as a DropdownMenuSubmenu.");
+}
+/**
+* One action on the selection: a 14px icon and a label, an `md` ghost button
+* with a mouse on a desktop, a 44px bar button showing its icon alone on a
+* phone and a touch screen.
+*/
+function SelectionToolbarAction({ icon, children, secondary = false, menu = false, moreItem, className, onClick, disabled, ...props }) {
+	const { action, actionLabel, actionChevron } = selectionToolbar({ menu });
+	if (process.env.NODE_ENV !== "production" && menu && moreItem === void 0) warnMenuWithoutMoreItem();
+	const item = useFitItem({
+		label: LABEL_STEP,
+		more: secondary ? SECONDARY_STEP : MORE_STEP,
+		moreItem: moreItem !== void 0 ? moreItem : menu ? null : /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			disabled,
+			onClick,
+			children: [icon, children]
+		})
+	});
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !item.taken("label"),
+		children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+			"data-slot": "button",
+			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: /* @__PURE__ */ jsx(Button, {
+				"data-selection-toolbar-action": "",
+				"data-secondary": secondary ? "" : void 0,
+				variant: "ghost",
+				size: "md",
+				className: action({ className }),
+				onClick,
+				disabled,
+				...item.props,
+				...props
+			}) }),
+			children: [
+				icon,
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "selection-toolbar-action-label",
+					className: actionLabel(),
+					children
+				}),
+				menu ? /* @__PURE__ */ jsx(ChevronDown, {
+					"aria-hidden": true,
+					className: actionChevron()
+				}) : null
+			]
+		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
+	});
+}
+/**
+* More, after the actions, shown only while some are in it. Render it as a
+* `DropdownMenuTrigger` whose menu opens upward (`side="top"`), with
+* `SelectionToolbarMoreItems` in the menu.
+*/
+function SelectionToolbarMore({ className, children, ...props }) {
+	const { more } = selectionToolbar();
+	const fit = useFitMore();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		render: /* @__PURE__ */ jsx(Button, {
+			"data-selection-toolbar-more": "",
+			variant: "ghost",
+			size: "md",
+			className: more({ className }),
+			...fit.props,
+			...props
+		}),
+		children: children ?? /* @__PURE__ */ jsx(MoreHorizontal, {})
+	});
+}
+/** The actions in More, in their order, each as its `moreItem`: put it in More's menu. */
+const SelectionToolbarMoreItems = FitToolbarMoreItems;
+/** ×, last: ends the selection, as Escape does. */
+function SelectionToolbarClose({ className, children, ...props }) {
+	const { close } = selectionToolbar();
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		render: /* @__PURE__ */ jsx(Button, {
+			"data-selection-toolbar-close": "",
+			variant: "ghost",
+			size: "icon-md",
+			className: close({ className }),
+			...props
+		}),
+		children: children ?? /* @__PURE__ */ jsx(X, {})
+	});
+}
+//#endregion
+export { SelectionToolbar, SelectionToolbarAction, SelectionToolbarActions, SelectionToolbarClose, SelectionToolbarCount, SelectionToolbarCountValue, SelectionToolbarDock, SelectionToolbarHint, SelectionToolbarItem, SelectionToolbarMore, SelectionToolbarMoreItems };

package/dist/components/selection-toolbar/selection-toolbar.recipe.mjs

@@ -0,0 +1,42 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/selection-toolbar/selection-toolbar.recipe.ts
+const selectionToolbar = tv({
+	slots: {
+		dock: [
+			"pointer-events-none absolute inset-x-0 bottom-0 z-10 flex justify-center",
+			"px-5 pb-[calc(--spacing(3)+env(safe-area-inset-bottom))]",
+			"*:pointer-events-auto"
+		],
+		root: [
+			"w-fit gap-0 md:pointer-fine:gap-1",
+			"h-(--header-height) px-(--header-air) py-0",
+			"rounded-container bg-layer-popover ring-1 ring-line-seam shadow-float",
+			"**:data-[slot=button]:after:inset-x-[-1.5px] md:pointer-fine:**:data-[slot=button]:after:inset-x-[-3px]",
+			"*:data-[slot=button]:first:after:-left-[(var(--header-air)+1.5px)] *:data-[slot=button]:last:after:-right-[(var(--header-air)+1.5px)]"
+		],
+		count: ["shrink-0 pr-0 pl-2 md:pointer-fine:px-2", "whitespace-nowrap text-callout font-bold text-foreground tabular-nums"],
+		countValue: ["font-mono"],
+		hint: ["shrink-0 pr-1 whitespace-nowrap text-caption text-foreground-hint", "data-fit-label:sr-only"],
+		actions: ["gap-0 md:pointer-fine:gap-1"],
+		action: [
+			"[&_svg:not([class*='size-'])]:size-3.5",
+			"size-(--bar-button-size) justify-center px-0 after:inset-y-[-1.5px]",
+			"rounded-(--bar-button-radius) md:pointer-fine:rounded-control",
+			"md:pointer-fine:w-auto md:pointer-fine:pr-3 md:pointer-fine:pl-2.5",
+			"md:pointer-fine:data-fit-label:w-(--control-height) md:pointer-fine:data-fit-label:px-0",
+			"data-fit-more:hidden"
+		],
+		actionLabel: ["sr-only md:pointer-fine:not-sr-only md:pointer-fine:in-data-fit-label:sr-only"],
+		actionChevron: ["-ml-1 hidden size-3 md:pointer-fine:block md:pointer-fine:in-data-fit-label:hidden"],
+		more: [
+			"hidden data-fit-shown:inline-flex [&_svg:not([class*='size-'])]:size-3.5",
+			"size-(--bar-button-size) px-0 after:inset-y-[-1.5px]",
+			"rounded-(--bar-button-radius) md:pointer-fine:rounded-control",
+			"md:pointer-fine:w-(--control-height)"
+		],
+		close: ["size-(--bar-button-size) after:inset-y-[-1.5px]", "rounded-(--bar-button-radius) md:pointer-fine:rounded-control"]
+	},
+	variants: { menu: { true: { action: "md:pointer-fine:pr-2.5" } } }
+});
+//#endregion
+export { selectionToolbar };

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",