@botiverse/raft-ui 0.82.0 → 0.84.0

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

@@ -0,0 +1,736 @@
+import { laidOutChildren } from "../../lib/laid-out-children.mjs";
+import { Button } from "../button/button.mjs";
+import { useMergedRef } from "../../lib/use-merged-ref.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { PickerTriggerButton } from "../picker-trigger-button/picker-trigger-button.mjs";
+import { fitToolbar } from "./fit-toolbar.recipe.mjs";
+import { ChevronDown, Plus } from "lucide-react";
+import { Fragment, cloneElement, createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Toolbar } from "@base-ui/react/toolbar";
+//#region src/components/fit-toolbar/fit-toolbar.tsx
+const NONE = {
+	items: /* @__PURE__ */ new Map(),
+	more: [],
+	wrapping: false
+};
+const STEPS = [
+	"label",
+	"more",
+	"collapse",
+	"wrap",
+	"plus"
+];
+const ID = "data-fit-id";
+const DECLARED = "data-fit-steps";
+const MORE_TRIGGER = "data-fit-more-trigger";
+const SHOWN = "data-fit-shown";
+const WRAPPING = "data-fit-wrapping";
+const ROW = "data-fit-row";
+const NO_WRAP = "data-fit-first-line";
+const WRAP_LINE = "data-fit-wrap-line";
+const BREAK = "data-fit-break";
+const NEEDS_ICON = "data-fit-needs-icon";
+const stepAttribute = (step) => `data-fit-${step}`;
+const hasIcon = (item) => item.querySelector("svg, img") !== null;
+/** The group has a `wrap` step it may take: the toolbar wraps and the page lets it. */
+function canWrap(group, allowWrap) {
+	return allowWrap && !group.hasAttribute(NO_WRAP) && / wrap:/.test(` ${group.getAttribute(DECLARED) ?? ""}`);
+}
+function declare(steps) {
+	return STEPS.filter((step) => steps[step] !== void 0).map((step) => `${step}:${steps[step]}`).join(" ");
+}
+/**
+* Nothing pokes out of the toolbar or out of any of its rows, and no line has
+* broken by itself: while groups wrap, each line (one `order`) stays one line.
+*/
+function fits(root, allowWrap) {
+	if (![root, ...root.querySelectorAll(`[${ROW}]`)].every((row) => {
+		if (row.getClientRects().length === 0) return true;
+		const style = getComputedStyle(row);
+		const end = row.getBoundingClientRect().right - parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
+		return laidOutChildren(row).every((box) => box.getBoundingClientRect().right <= end + .5);
+	})) return false;
+	for (const group of root.querySelectorAll("[data-fit-scroll]")) {
+		if (group.getClientRects().length === 0) continue;
+		const content = group.querySelector("[data-slot=scroll-area-content]") ?? group;
+		const [first] = laidOutChildren(content);
+		if (first && group.clientWidth + .5 < first.getBoundingClientRect().width) return false;
+		if (canWrap(group, allowWrap) && !group.hasAttribute(stepAttribute("wrap"))) {
+			const scroller = group.querySelector("[data-fit-scroller]") ?? group;
+			if (scroller.scrollWidth > scroller.clientWidth + .5) return false;
+		}
+	}
+	if (!root.hasAttribute(WRAPPING)) return true;
+	const lines = /* @__PURE__ */ new Map();
+	for (const child of laidOutChildren(root)) {
+		if (child.hasAttribute(BREAK)) continue;
+		const line = getComputedStyle(child).order;
+		const rect = child.getBoundingClientRect();
+		const first = lines.get(line);
+		if (first === void 0) lines.set(line, rect);
+		else if (rect.top >= first.bottom - .5 || rect.bottom <= first.top + .5) return false;
+	}
+	return true;
+}
+/**
+* Takes the steps one at a time, in their order, until the toolbar fits its
+* region; writes each on the DOM as it goes (React renders the same after)
+* and returns them. It starts from nothing taken every time, so the outcome
+* depends on the width alone.
+*/
+function measure(root, allowWrap) {
+	const elements = Array.from(root.querySelectorAll(`[${ID}]`));
+	const scrolled = Array.from(root.querySelectorAll("[data-fit-scroller]"), (scroller) => [scroller, scroller.scrollLeft]);
+	const triggers = Array.from(root.querySelectorAll(`[${MORE_TRIGGER}]`));
+	for (const element of elements) {
+		for (const step of STEPS) element.removeAttribute(stepAttribute(step));
+		element.style.removeProperty("order");
+	}
+	for (const trigger of triggers) trigger.removeAttribute(SHOWN);
+	root.removeAttribute(WRAPPING);
+	for (const line of Array.from(root.querySelectorAll(`:scope > [${BREAK}]`))) line.remove();
+	root.style.setProperty("--fit-gap", getComputedStyle(root).columnGap);
+	const queue = elements.flatMap((element, index) => (element.getAttribute(DECLARED) ?? "").split(" ").filter(Boolean).map((entry) => {
+		const [step, order] = entry.split(":");
+		return {
+			element,
+			step,
+			order: Number(order),
+			index
+		};
+	}).filter(({ step, element: item }) => {
+		if (step === "more") return triggers.length > 0;
+		if (step === "wrap") return canWrap(item, allowWrap);
+		if (step === "label") return !item.hasAttribute(NEEDS_ICON) || hasIcon(item);
+		return true;
+	}));
+	queue.sort((a, b) => a.order - b.order || b.index - a.index);
+	const batches = [];
+	const byKind = /* @__PURE__ */ new Map();
+	for (const { element, step, order } of queue) {
+		const group = step === "label" || step === "plus" ? element.parentElement?.closest("[data-slot=fit-toolbar-group]") : null;
+		const kind = group ? `${group.getAttribute(ID)}|${step}|${order}` : void 0;
+		const existing = kind === void 0 ? void 0 : byKind.get(kind);
+		if (existing) {
+			existing.members.push(element);
+			continue;
+		}
+		const batch = {
+			members: [element],
+			step
+		};
+		batches.push(batch);
+		if (kind !== void 0) byKind.set(kind, batch);
+	}
+	const taken = /* @__PURE__ */ new Map();
+	const history = [];
+	const showMore = () => {
+		const shown = Array.from(taken.values()).some((steps) => steps.has("more"));
+		for (const trigger of triggers) trigger.toggleAttribute(SHOWN, shown);
+	};
+	const take = (element, step) => {
+		const steps = taken.get(element) ?? /* @__PURE__ */ new Set();
+		steps.add(step);
+		taken.set(element, steps);
+		element.setAttribute(stepAttribute(step), "");
+		if (step === "more") showMore();
+		if (step === "wrap") layOutLines(root, elements);
+	};
+	const undo = (element, step) => {
+		taken.get(element)?.delete(step);
+		element.removeAttribute(stepAttribute(step));
+		if (step === "more") showMore();
+	};
+	for (const { members, step } of batches) {
+		if (fits(root, allowWrap)) break;
+		const giving = members.filter((element) => !taken.get(element)?.has("more"));
+		if (giving.length === 0) continue;
+		for (const element of giving) take(element, step);
+		history.push({
+			members: giving,
+			step
+		});
+	}
+	for (let index = history.length - 1; index >= 0; index -= 1) {
+		const { members, step } = history[index];
+		if (step === "wrap") continue;
+		const group = members[0].closest(`[${stepAttribute("wrap")}]`);
+		if (!group || !root.contains(group)) continue;
+		if (history.findIndex((entry) => entry.members.includes(group) && entry.step === "wrap") < index) continue;
+		for (const element of members) undo(element, step);
+		if (!fits(root, allowWrap)) for (const element of members) take(element, step);
+	}
+	const items = /* @__PURE__ */ new Map();
+	const more = [];
+	let wrapping = false;
+	for (const element of elements) {
+		const steps = taken.get(element);
+		if (!steps || steps.size === 0) continue;
+		const id = element.getAttribute(ID);
+		items.set(id, steps);
+		if (steps.has("more")) more.push(id);
+		if (steps.has("wrap")) wrapping = true;
+	}
+	for (const [scroller, left] of scrolled) scroller.scrollLeft = left;
+	return {
+		items,
+		more,
+		wrapping
+	};
+}
+/**
+* Puts the wrapped groups on the lines after the first: groups with the same
+* `wrapLine` share a line, in their order; any other takes one of its own.
+* A zero-height break before each line ends the one before it.
+*/
+function layOutLines(root, elements) {
+	root.setAttribute(WRAPPING, "");
+	for (const line of Array.from(root.querySelectorAll(`:scope > [${BREAK}]`))) line.remove();
+	const lines = [];
+	for (const group of elements) {
+		if (!group.hasAttribute(stepAttribute("wrap"))) continue;
+		const line = group.getAttribute(WRAP_LINE) ?? `#${group.getAttribute(ID)}`;
+		let number = lines.indexOf(line);
+		if (number < 0) {
+			number = lines.push(line) - 1;
+			const lineBreak = document.createElement("span");
+			lineBreak.setAttribute(BREAK, "");
+			lineBreak.setAttribute("aria-hidden", "true");
+			lineBreak.style.cssText = `flex-basis: 100%; height: 0; order: ${2 * number + 1}`;
+			root.append(lineBreak);
+		}
+		group.style.order = String(2 * number + 2);
+	}
+}
+/** What the arrow keys stop on: every control a person can reach, a segment each. */
+const STOP = [
+	"button",
+	"a[href]",
+	"input",
+	"select",
+	"textarea",
+	"[role=button]",
+	"[role=radio]",
+	"[role=checkbox]",
+	"[role=switch]",
+	"[role=combobox]"
+].join(", ");
+/** The line an element is on: the CSS `order` of the toolbar's flex item that holds it. */
+function lineOf(element, root) {
+	const chain = [];
+	for (let node = element; node && node !== root; node = node.parentElement) chain.unshift(node);
+	const item = chain.find((node) => getComputedStyle(node).display !== "contents") ?? element;
+	return Number(getComputedStyle(item).order) || 0;
+}
+/**
+* The toolbar's controls in reading order: line by line as they show, in the
+* order of the DOM on each line. Wrapped groups move with CSS `order`, which
+* neither the browser's focus order nor Base UI's list follows (WCAG 2.4.3).
+* Leaves out what isn't shown (in More, a collapsed group's items), what is
+* disabled natively, hidden from assistive technology, or a popup's focus guard.
+*/
+function readingOrder(root) {
+	const controls = Array.from(root.querySelectorAll(STOP)).filter((control) => !control.matches(":disabled") && control.closest("[aria-hidden=true]") === null && !control.hasAttribute("data-base-ui-focus-guard") && control.getClientRects().length > 0);
+	const lines = new Map(controls.map((control) => [control, lineOf(control, root)]));
+	return controls.sort((a, b) => lines.get(a) - lines.get(b));
+}
+/**
+* A text field keeps the arrow keys while its caret has somewhere to go, as
+* in Base UI's composite: only at its start or end does an arrow leave it.
+*/
+function keepsArrow(target, forward) {
+	if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return false;
+	let start;
+	try {
+		start = target.selectionStart;
+	} catch {
+		return false;
+	}
+	if (start === null) return false;
+	if (start !== target.selectionEnd) return true;
+	return forward ? start < target.value.length : start > 0;
+}
+const keyOf = (applied) => `${applied.wrapping}|${Array.from(applied.items, ([id, steps]) => `${id}:${[...steps].join(",")}`).join(";")}`;
+/**
+* What each item shows in More while it is there, outside React state: the
+* items write it on every render, and only `FitToolbarMoreItems` (in an open
+* menu) reads it.
+*/
+function createMoreItemStore() {
+	const items = /* @__PURE__ */ new Map();
+	const listeners = /* @__PURE__ */ new Set();
+	let version = 0;
+	const notify = () => {
+		version += 1;
+		for (const listener of listeners) listener();
+	};
+	return {
+		set(id, item) {
+			items.set(id, item);
+			notify();
+		},
+		delete(id) {
+			if (items.delete(id)) notify();
+		},
+		get: (id) => items.get(id),
+		subscribe: (listener) => {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		version: () => version
+	};
+}
+const FitToolbarContext = createContext(null);
+/**
+* A toolbar whose items give way, in named steps and an order the items
+* declare, as the region it sits in narrows: it measures its content in its
+* own width, never the window's. The steps are written on each item as
+* `data-fit-<step>` for its styles. A Base UI Toolbar: one Tab stop, the
+* arrow keys inside.
+*/
+function FitToolbar({ className, wrap = false, ref, ...props }) {
+	const { root } = fitToolbar();
+	const rootRef = useRef(null);
+	const [element, setElement] = useState(null);
+	const [setRef] = useMergedRef(rootRef, setElement, ref);
+	const [applied, setApplied] = useState(NONE);
+	const [store] = useState(createMoreItemStore);
+	const update = useCallback(() => {
+		const current = rootRef.current;
+		if (!current) return;
+		const next = measure(current, wrap);
+		setApplied((previous) => keyOf(previous) === keyOf(next) ? previous : next);
+	}, [wrap]);
+	useLayoutEffect(update);
+	useLayoutEffect(() => {
+		if (!element) return;
+		const region = element.parentElement;
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+		if (region) resize?.observe(region);
+		const content = typeof MutationObserver === "undefined" ? null : new MutationObserver((records) => {
+			const own = (node) => node instanceof Element && node.hasAttribute(BREAK);
+			if (records.some((record) => record.type === "characterData" || ![...record.addedNodes, ...record.removedNodes].every(own))) update();
+		});
+		content?.observe(element, {
+			childList: true,
+			subtree: true,
+			characterData: true
+		});
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		fonts?.addEventListener?.("loadingdone", update);
+		return () => {
+			resize?.disconnect();
+			content?.disconnect();
+			fonts?.removeEventListener?.("loadingdone", update);
+		};
+	}, [element, update]);
+	const tabbing = useRef(false);
+	const entered = useRef(false);
+	useLayoutEffect(() => {
+		const onKey = (event) => {
+			tabbing.current = event.key === "Tab";
+		};
+		const off = () => {
+			tabbing.current = false;
+		};
+		document.addEventListener("keydown", onKey, true);
+		document.addEventListener("keyup", off, true);
+		document.addEventListener("pointerdown", off, true);
+		return () => {
+			document.removeEventListener("keydown", onKey, true);
+			document.removeEventListener("keyup", off, true);
+			document.removeEventListener("pointerdown", off, true);
+		};
+	}, []);
+	const horizontal = (props.orientation ?? "horizontal") === "horizontal";
+	const { onKeyDownCapture, onFocus, loopFocus = true } = props;
+	const handleKeyDown = useCallback((event) => {
+		onKeyDownCapture?.(event);
+		const current = rootRef.current;
+		if (!current || !horizontal || event.defaultPrevented) return;
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		const target = event.target;
+		if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+			if (target.closest("[role=radiogroup]") && current.contains(target)) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+			return;
+		}
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+		const rtl = getComputedStyle(current).direction === "rtl";
+		const forward = event.key === "ArrowRight" !== rtl;
+		if (keepsArrow(target, forward)) return;
+		const order = readingOrder(current);
+		const index = order.findIndex((control) => control === target || control.contains(target));
+		if (index < 0) return;
+		let next = index + (forward ? 1 : -1);
+		if (next < 0 || next >= order.length) {
+			if (!loopFocus) return;
+			next = (next + order.length) % order.length;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		if (next !== index) order[next].focus();
+	}, [
+		horizontal,
+		loopFocus,
+		onKeyDownCapture
+	]);
+	const handleFocus = useCallback((event) => {
+		onFocus?.(event);
+		const current = rootRef.current;
+		if (!current) return;
+		const from = event.relatedTarget;
+		if (!(from instanceof Node && current.contains(from)) && tabbing.current && !entered.current) {
+			entered.current = true;
+			const [first] = readingOrder(current);
+			if (first && first !== event.target) {
+				first.focus();
+				return;
+			}
+		}
+		entered.current = true;
+	}, [onFocus]);
+	const lastFocused = useRef(null);
+	useLayoutEffect(() => {
+		if (!element) return;
+		const onFocusIn = (event) => {
+			lastFocused.current = event.target;
+		};
+		const onFocusOut = (event) => {
+			if (event.target.getClientRects().length > 0) lastFocused.current = null;
+		};
+		element.addEventListener("focusin", onFocusIn);
+		element.addEventListener("focusout", onFocusOut);
+		return () => {
+			element.removeEventListener("focusin", onFocusIn);
+			element.removeEventListener("focusout", onFocusOut);
+		};
+	}, [element]);
+	useLayoutEffect(() => {
+		const current = rootRef.current;
+		const last = lastFocused.current;
+		if (!current || !last || last.getClientRects().length > 0) return;
+		const active = document.activeElement;
+		if (active !== last && active !== document.body && active !== null) return;
+		const more = Array.from(current.querySelectorAll(`[${MORE_TRIGGER}]`)).find((trigger) => trigger.getClientRects().length > 0);
+		lastFocused.current = null;
+		more?.focus();
+	}, [applied]);
+	const context = useMemo(() => ({
+		applied,
+		store
+	}), [applied, store]);
+	return /* @__PURE__ */ jsx(FitToolbarContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Toolbar.Root, {
+			ref: setRef,
+			"data-slot": "fit-toolbar",
+			"data-fit-wrapping": applied.wrapping ? "" : void 0,
+			className: root({ className }),
+			...props,
+			onKeyDownCapture: handleKeyDown,
+			onFocus: handleFocus
+		})
+	});
+}
+/**
+* Inside a FitToolbar: a control that would measure its own fit (a
+* SegmentedControl's `iconsOnlyBelow`) leaves it to the toolbar's steps.
+*/
+function useInFitToolbar() {
+	return useContext(FitToolbarContext) !== null;
+}
+/**
+* Makes an element an item of the nearest FitToolbar: spread `props` on it.
+* Says which steps it has taken, for what it renders (a tooltip once its
+* label is gone, say).
+*/
+function useFitItem({ moreItem, ...steps } = {}) {
+	const id = useId();
+	const context = useContext(FitToolbarContext);
+	const taken = context?.applied.items.get(id);
+	const store = context?.store;
+	const declared = declare(steps);
+	useLayoutEffect(() => {
+		if (moreItem !== void 0) store?.set(id, moreItem);
+	});
+	useLayoutEffect(() => () => store?.delete(id), [store, id]);
+	const props = {
+		[ID]: id,
+		[DECLARED]: declared || void 0
+	};
+	for (const step of STEPS) props[stepAttribute(step)] = taken?.has(step) ? "" : void 0;
+	return {
+		id,
+		props,
+		/** Steps it has taken. */
+		taken: (step) => taken?.has(step) ?? false
+	};
+}
+/**
+* Makes an element the toolbar's More: spread `props` on it. It shows only
+* while an item is in More (`data-fit-shown`); hide it otherwise.
+*/
+function useFitMore() {
+	const shown = (useContext(FitToolbarContext)?.applied.more.length ?? 0) > 0;
+	return {
+		shown,
+		props: {
+			[MORE_TRIGGER]: "",
+			[SHOWN]: shown ? "" : void 0
+		}
+	};
+}
+/** The items in More, in their order, each as its `moreItem`: put it in More's menu. */
+function FitToolbarMoreItems() {
+	const context = useContext(FitToolbarContext);
+	const store = context?.store;
+	useSyncExternalStore(store?.subscribe ?? noSubscription, store?.version ?? noVersion, store?.version ?? noVersion);
+	if (!context) return null;
+	return context.applied.more.map((id) => /* @__PURE__ */ jsx(Fragment, { children: context.store.get(id) }, id));
+}
+const noSubscription = () => () => {};
+const noVersion = () => 0;
+/**
+* A scrolling group: which side hides more (`data-overflow`, for
+* `mask-fade-x`), a vertical wheel scrolling it, and its `data-active` items
+* and the focused one kept in view, clear of the fade, with no animation.
+* The same as slock web's FilterStrip, so the two behave alike.
+*/
+function useScrollGroup(group) {
+	useLayoutEffect(() => {
+		if (!group) return;
+		const edges = () => {
+			const max = group.scrollWidth - group.clientWidth;
+			const start = group.scrollLeft > 1;
+			const end = max > 1 && group.scrollLeft < max - 1;
+			const next = start && end ? "both" : start ? "start" : end ? "end" : null;
+			if (next) group.setAttribute("data-overflow", next);
+			else group.removeAttribute("data-overflow");
+		};
+		let placed = group.scrollLeft;
+		let scrolledByPerson = false;
+		const onScroll = () => {
+			if (Math.abs(group.scrollLeft - placed) > 1) scrolledByPerson = true;
+			edges();
+		};
+		const reveal = (item) => {
+			if (!(item instanceof HTMLElement) || !group.contains(item)) return;
+			const fade = parseFloat(getComputedStyle(group).getPropertyValue("--fade-edge")) || 24;
+			const start = item.getBoundingClientRect().left - group.getBoundingClientRect().left + group.scrollLeft;
+			const end = start + item.offsetWidth;
+			if (start - fade < group.scrollLeft) group.scrollLeft = Math.max(0, start - fade);
+			else if (end + fade > group.scrollLeft + group.clientWidth) group.scrollLeft = end + fade - group.clientWidth;
+			placed = group.scrollLeft;
+			edges();
+		};
+		let target = group.querySelector("[data-active]");
+		const revealActive = () => {
+			if (!target || !group.contains(target) || !target.hasAttribute("data-active")) target = group.querySelector("[data-active]");
+			reveal(target);
+		};
+		const onWheel = (event) => {
+			if (group.scrollWidth <= group.clientWidth) return;
+			if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return;
+			const before = group.scrollLeft;
+			group.scrollLeft += event.deltaY;
+			if (group.scrollLeft !== before) event.preventDefault();
+		};
+		const onFocus = (event) => reveal(event.target);
+		revealActive();
+		edges();
+		group.addEventListener("scroll", onScroll, { passive: true });
+		group.addEventListener("wheel", onWheel, { passive: false });
+		group.addEventListener("focusin", onFocus);
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => {
+			if (!scrolledByPerson) revealActive();
+			edges();
+		});
+		resize?.observe(group);
+		const activated = (node) => node instanceof Element ? node.hasAttribute("data-active") ? node : node.querySelector("[data-active]") : null;
+		const changes = new MutationObserver((records) => {
+			const newly = records.flatMap((record) => record.type === "attributes" ? [record.target instanceof Element && record.target.hasAttribute("data-active") ? record.target : null] : Array.from(record.addedNodes, activated)).filter((node) => node !== null).at(-1);
+			if (newly) {
+				target = newly;
+				scrolledByPerson = false;
+				revealActive();
+			}
+			edges();
+		});
+		changes.observe(group, {
+			childList: true,
+			subtree: true,
+			characterData: true,
+			attributes: true,
+			attributeFilter: ["data-active"]
+		});
+		return () => {
+			group.removeEventListener("scroll", onScroll);
+			group.removeEventListener("wheel", onWheel);
+			group.removeEventListener("focusin", onFocus);
+			resize?.disconnect();
+			changes.disconnect();
+		};
+	}, [group]);
+}
+/**
+* A group of items in one row, a fixed gap apart. A toolbar wraps only
+* between groups, the last first; groups with the same `wrapLine` share a
+* line, any other takes one of its own.
+*/
+function FitToolbarGroup({ className, wrapOrder = 0, firstLine = false, wrapLine, collapseOrder, collapsed, overflow, children, ref, ...props }) {
+	const { group, full, short, scroller, scrollContent } = fitToolbar({ scroll: overflow === "scroll" });
+	const [scrollerElement, setScroller] = useState(null);
+	useScrollGroup(overflow === "scroll" ? scrollerElement : null);
+	const item = useFitItem({
+		wrap: wrapOrder,
+		collapse: collapsed === void 0 ? void 0 : collapseOrder ?? 0
+	});
+	return /* @__PURE__ */ jsx(Toolbar.Group, {
+		ref,
+		"data-slot": "fit-toolbar-group",
+		"data-fit-row": overflow === "scroll" ? void 0 : "",
+		"data-fit-scroll": overflow === "scroll" ? "" : void 0,
+		"data-fit-first-line": firstLine ? "" : void 0,
+		"data-fit-wrap-line": wrapLine,
+		className: group({ className }),
+		...item.props,
+		...props,
+		children: overflow === "scroll" ? /* @__PURE__ */ jsx(ScrollArea, {
+			ref: setScroller,
+			orientation: "horizontal",
+			overscroll: "contain",
+			size: "small",
+			trigger: "scroll",
+			tabIndex: -1,
+			"data-fit-scroller": "",
+			className: scroller(),
+			contentClassName: scrollContent(),
+			children
+		}) : collapsed === void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "fit-toolbar-group-items",
+			className: full(),
+			children
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "fit-toolbar-group-collapsed",
+			className: short(),
+			children: collapsed
+		})] })
+	});
+}
+/**
+* A toolbar button that can give way: an `md` Button (ghost unless you say)
+* with an icon and a label, an icon square with its label as a tooltip from
+* `labelOrder` on, a + square with its label as a tooltip from `plusOrder`
+* on, and hidden from `moreOrder` on.
+*/
+function FitToolbarButton({ icon, collapsedIcon, children, labelOrder, plusOrder, moreOrder, moreItem, variant = "ghost", className, ...props }) {
+	const { button, label, icon: iconSlot, plus, fullIcon, collapsedIcon: collapsedSlot } = fitToolbar();
+	const item = useFitItem({
+		label: labelOrder,
+		more: moreOrder,
+		plus: plusOrder,
+		moreItem
+	});
+	const icons = collapsedIcon === void 0 ? icon : /* @__PURE__ */ jsxs(Fragment$1, { children: [icon === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		"data-slot": "fit-toolbar-button-full-icon",
+		className: fullIcon(),
+		children: icon
+	}), /* @__PURE__ */ jsx("span", {
+		"data-slot": "fit-toolbar-button-collapsed-icon",
+		className: collapsedSlot(),
+		children: collapsedIcon
+	})] });
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !item.taken("label") && !item.taken("plus"),
+		children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+			"data-slot": "button",
+			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: /* @__PURE__ */ jsx(Button, {
+				variant,
+				size: "md",
+				className: button({ className }),
+				"data-fit-needs-icon": "",
+				...item.props,
+				...props
+			}) }),
+			children: [plusOrder === void 0 ? icons : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "fit-toolbar-button-icon",
+				className: iconSlot(),
+				children: icons
+			}), /* @__PURE__ */ jsx(Plus, {
+				"data-slot": "fit-toolbar-button-plus",
+				"aria-hidden": true,
+				className: plus()
+			})] }), /* @__PURE__ */ jsx("span", {
+				"data-slot": "fit-toolbar-button-label",
+				className: label(),
+				children
+			})]
+		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
+	});
+}
+/** A count: a number, or a string of digits. Space Mono is for machine-written text only. */
+const isCount = (node) => typeof node === "number" || typeof node === "string" && /^\d+$/.test(node.trim());
+const text = (node) => typeof node === "string" || typeof node === "number" ? String(node) : void 0;
+/**
+* A picker's trigger as one toolbar item (a filter: Assignee, Channel): a
+* PickerTriggerButton with an icon, a label, what is chosen and a chevron,
+* filled `info-soft` once a value is chosen, as an applied filter is
+* (Select › Filters). From `labelOrder` on its label gives way, while its
+* icon, what is chosen and the chevron stay ("# ⌄", "👤 1 ⌄"); its label
+* stays its accessible name, read before the value ("Assignee 1"), and shows
+* as its tooltip.
+*/
+function FitToolbarPicker({ trigger, icon, children, value, labelOrder, moreOrder, moreItem, className, ...props }) {
+	const { picker, label, pickerValue, chevron } = fitToolbar({ count: isCount(value) });
+	const item = useFitItem({
+		label: labelOrder,
+		more: moreOrder,
+		moreItem
+	});
+	const hasValue = value !== void 0 && value !== null && value !== false && value !== "";
+	const name = text(children) !== void 0 && (!hasValue || text(value) !== void 0) ? [text(children), hasValue ? text(value) : void 0].filter(Boolean).join(" ") : void 0;
+	const ownTrigger = cloneElement(trigger, { render: /* @__PURE__ */ jsx(PickerTriggerButton, {
+		className: picker({ className }),
+		"aria-label": name,
+		"data-has-value": hasValue ? "" : void 0,
+		"data-fit-needs-icon": "",
+		...item.props,
+		...props
+	}) });
+	return /* @__PURE__ */ jsxs(Tooltip, {
+		disabled: !item.taken("label"),
+		children: [/* @__PURE__ */ jsxs(TooltipTrigger, {
+			"data-slot": "button",
+			render: /* @__PURE__ */ jsx(Toolbar.Button, { render: ownTrigger }),
+			children: [
+				icon,
+				/* @__PURE__ */ jsxs("span", {
+					"data-slot": "fit-toolbar-picker-label",
+					className: label(),
+					children: [children, hasValue && name === void 0 ? " " : null]
+				}),
+				hasValue ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "fit-toolbar-picker-value",
+					className: pickerValue(),
+					children: value
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					"data-slot": "fit-toolbar-picker-chevron",
+					"data-picker-trigger-indicator": "",
+					"aria-hidden": true,
+					className: chevron(),
+					children: /* @__PURE__ */ jsx(ChevronDown, {})
+				})
+			]
+		}), /* @__PURE__ */ jsx(TooltipContent, { children })]
+	});
+}
+//#endregion
+export { FitToolbar, FitToolbarButton, FitToolbarGroup, FitToolbarMoreItems, FitToolbarPicker, useFitItem, useFitMore, useInFitToolbar };