@botiverse/raft-ui 0.89.0 → 0.91.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [0.91.0](https://github.com/botiverse/raft-design/compare/v0.90.0...v0.91.0) (2026-11-10)
+
+### Fixed
+
+- **`FitToolbarSearch` cuts a placeholder that doesn't fit at a word: "Search…", not "Search …"** ([FitToolbar › Behavior](https://raft-design.botiverse.build/components/fit-toolbar/#behavior)). It measures the placeholder in the input's own font against the field's room, again when the field changes size, a font arrives or the placeholder changes, and shows the longest prefix that ends at a word (between any two characters in Chinese or Japanese) and fits with "…" after it, trailing spaces trimmed. A placeholder that fits is shown whole. `placeholder:text-ellipsis` is gone from the input; typed text still ends in an ellipsis.
+  - Why: CSS `text-overflow: ellipsis` cuts after the space and showed "Search …", which reads as a typo (Jasper, 2026-11-10, #proj-raft-ui:f9756e85).
+  - Affects: a FitToolbarSearch whose placeholder is cut; its input's `placeholder` attribute is now the cut text. The accessible name is still the whole `aria-label`. Pages pass the whole placeholder as before.
+  - Docs: https://raft-design.botiverse.build/components/fit-toolbar/
+
+## [0.90.0](https://github.com/botiverse/raft-design/compare/v0.89.0...v0.90.0) (2026-11-10)
+
+### Changed
+
+- **`FitToolbarSearch`'s least width is capped at 120px** ([FitToolbar › Behavior](https://raft-design.botiverse.build/components/fit-toolbar/#behavior)). `FIT_SEARCH_MAX_LEAST` is now 120 (was 160): the search icon, the field's side padding and "Search…", the same cap at every width. The measured least width is still the icon and the whole placeholder when that is smaller; a longer placeholder ends in an ellipsis.
+  - Why: slock's Members › Agents at 375px left "Agents ▾" under 160px and the search collapsed to its icon (Jasper, 2026-11-10, #proj-raft-ui:f9756e85).
+  - Affects: a search whose placeholder takes more than 120px ("Search tasks" takes about 140px) now keeps its field down to 120px with the placeholder cut, and the toolbar's earlier steps stop sooner. An explicit `minWidth` is unchanged and not capped.
+  - Docs: https://raft-design.botiverse.build/components/fit-toolbar/
+
 ## [0.89.0](https://github.com/botiverse/raft-design/compare/v0.88.0...v0.89.0) (2026-11-10)
 
 ### Changed

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

@@ -244,9 +244,13 @@ export declare function FitToolbarPicker({ trigger, icon, children, value, label
  * and its whole placeholder, or this, whichever is smaller. A longer
  * placeholder is cut with an ellipsis instead of collapsing the field to its
  * button, since it is only a hint and goes once the person types (Jasper,
- * 2026-11-10, #proj-raft-ui:f9756e85). An explicit `minWidth` isn't capped.
+ * 2026-11-10, #proj-raft-ui:f9756e85). 120px is the icon, the side padding
+ * and "Search…", the same at every width: at 160px, slock's Members › Agents
+ * at 375px left "Agents ▾" under 160px and the search collapsed (Jasper,
+ * 2026-11-10). A smaller measured width still wins; an explicit `minWidth`
+ * isn't capped.
  */
-export declare const FIT_SEARCH_MAX_LEAST = 160;
+export declare const FIT_SEARCH_MAX_LEAST = 120;
 export type FitToolbarSearchProps = Omit<InputGroupInputProps, "className" | "value" | "defaultValue" | "onValueChange" | "aria-label" | "render"> & {
   /** Its accessible name ("Search tasks"): the field's and, once it is an icon, the button's, and the button's tooltip. */
   "aria-label": string;
@@ -260,7 +264,7 @@ export type FitToolbarSearchProps = Omit<InputGroupInputProps, "className" | "va
    * The least it may be, in px, before the toolbar gives way. By default it
    * is measured: what its search icon and its whole placeholder (or, with
    * none, its `aria-label`) take, in the field's own font, so the empty field
-   * shows what it is for, up to `FIT_SEARCH_MAX_LEAST` (160px): a longer
+   * shows what it is for, up to `FIT_SEARCH_MAX_LEAST` (120px): a longer
    * placeholder ends in an ellipsis. A number given here isn't capped.
    */
   minWidth?: number;
@@ -281,12 +285,12 @@ export type FitToolbarSearchProps = Omit<InputGroupInputProps, "className" | "va
 /**
  * The search field of a list's toolbar: it fills the rest of its line and
  * keeps at least the room its icon and its whole placeholder take, up to
- * 160px (measured, or `minWidth`), so the toolbar's other steps come before
+ * 120px (measured, or `minWidth`), so the toolbar's other steps come before
  * it is squeezed. From `collapseOrder` on it is a search icon button at the
  * start of the line, which opens the field in the scope's place, More and the
  * primary action kept at the line's end; the
  * field closes once it is empty and loses focus, or on Esc. A search with
  * text stays open. Put it straight in the FitToolbar, between its groups.
  */
-export declare function FitToolbarSearch({ "aria-label": label, value, defaultValue, onValueChange, minWidth, collapseOrder, icon, clearLabel, className, style, onKeyDown, disabled, ref, ...props }: FitToolbarSearchProps): import("react").JSX.Element;
+export declare function FitToolbarSearch({ "aria-label": label, value, defaultValue, onValueChange, minWidth, collapseOrder, icon, clearLabel, className, style, onKeyDown, disabled, placeholder: hint, ref, ...props }: FitToolbarSearchProps): import("react").JSX.Element;
 //#endregion

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

@@ -878,20 +878,92 @@ function coverScope(root, search) {
 * and its whole placeholder, or this, whichever is smaller. A longer
 * placeholder is cut with an ellipsis instead of collapsing the field to its
 * button, since it is only a hint and goes once the person types (Jasper,
-* 2026-11-10, #proj-raft-ui:f9756e85). An explicit `minWidth` isn't capped.
+* 2026-11-10, #proj-raft-ui:f9756e85). 120px is the icon, the side padding
+* and "Search…", the same at every width: at 160px, slock's Members › Agents
+* at 375px left "Agents ▾" under 160px and the search collapsed (Jasper,
+* 2026-11-10). A smaller measured width still wins; an explicit `minWidth`
+* isn't capped.
 */
-const FIT_SEARCH_MAX_LEAST = 160;
+const FIT_SEARCH_MAX_LEAST = 120;
+const ELLIPSIS = "…";
+/** Scripts written without spaces between words, which may be cut between any two characters. */
+const NO_SPACES = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}]/u;
+/**
+* Where a placeholder may be cut, as indices into it, shortest first: after
+* a word followed by a space or punctuation (Intl.Segmenter's words, or the
+* spaces without it), and between any two characters of a script written
+* without spaces (Chinese, Japanese).
+*/
+function placeholderCuts(text) {
+	const words = /* @__PURE__ */ new Set();
+	const chars = [];
+	const Segmenter = typeof Intl === "undefined" ? void 0 : Intl.Segmenter;
+	if (Segmenter) {
+		const parts = Array.from(new Segmenter(void 0, { granularity: "word" }).segment(text));
+		parts.forEach((part, i) => {
+			const next = parts[i + 1];
+			if (part.isWordLike && next && !next.isWordLike) words.add(next.index);
+		});
+	} else for (const space of text.matchAll(/\S\s/g)) words.add(space.index + 1);
+	const graphemes = Segmenter ? Array.from(new Segmenter(void 0, { granularity: "grapheme" }).segment(text), (g) => ({
+		index: g.index,
+		text: g.segment
+	})) : Array.from(text).reduce((all, ch) => {
+		const last = all.at(-1);
+		all.push({
+			index: last ? last.index + last.text.length : 0,
+			text: ch
+		});
+		return all;
+	}, []);
+	graphemes.forEach((g, i) => {
+		if (i === 0) return;
+		const before = graphemes[i - 1].text;
+		if (NO_SPACES.test(before) && NO_SPACES.test(g.text)) words.add(g.index);
+		chars.push(g.index);
+	});
+	return {
+		words: [...words].sort((a, b) => a - b),
+		chars
+	};
+}
+/**
+* The placeholder the field shows in `room` px: the whole one when it fits,
+* else its longest prefix that ends at a cut and, trailing spaces trimmed,
+* fits with "…" after it ("Search…", never "Search …"). A cut between
+* characters is only for a first word too long for the room. `width` reads a
+* text's width in the field's font.
+*/
+function fitPlaceholder(text, room, width) {
+	if (width(text) <= room) return text;
+	const { words, chars } = placeholderCuts(text);
+	const longest = (cuts) => {
+		let found = null;
+		let low = 0;
+		let high = cuts.length - 1;
+		while (low <= high) {
+			const mid = low + high >> 1;
+			const shown = text.slice(0, cuts[mid]).trimEnd();
+			if (shown !== "" && width(shown + ELLIPSIS) <= room) {
+				found = shown + ELLIPSIS;
+				low = mid + 1;
+			} else high = mid - 1;
+		}
+		return found;
+	};
+	return longest(words) ?? longest(chars) ?? (width(ELLIPSIS) <= room ? ELLIPSIS : "");
+}
 /**
 * The search field of a list's toolbar: it fills the rest of its line and
 * keeps at least the room its icon and its whole placeholder take, up to
-* 160px (measured, or `minWidth`), so the toolbar's other steps come before
+* 120px (measured, or `minWidth`), so the toolbar's other steps come before
 * it is squeezed. From `collapseOrder` on it is a search icon button at the
 * start of the line, which opens the field in the scope's place, More and the
 * primary action kept at the line's end; the
 * field closes once it is empty and loses focus, or on Esc. A search with
 * text stays open. Put it straight in the FitToolbar, between its groups.
 */
-function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onValueChange, minWidth, collapseOrder, icon = /* @__PURE__ */ jsx(Search, {}), clearLabel, className, style, onKeyDown, disabled, ref, ...props }) {
+function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onValueChange, minWidth, collapseOrder, icon = /* @__PURE__ */ jsx(Search, {}), clearLabel, className, style, onKeyDown, disabled, placeholder: hint, ref, ...props }) {
 	const { search, searchButton, searchSpacer, searchField, searchInput, searchSizer } = fitToolbar();
 	const item = useFitItem({ collapse: collapseOrder });
 	const collapsed = item.taken("collapse");
@@ -907,6 +979,7 @@ function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onVal
 	const [setInput] = useMergedRef(input, ref);
 	const sizer = useRef(null);
 	const sizerText = useRef(null);
+	const probe = useRef(null);
 	const focusOnOpen = useRef(false);
 	const focusButtonOnClose = useRef(false);
 	useLayoutEffect(() => {
@@ -925,7 +998,7 @@ function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onVal
 		};
 	}, []);
 	const [measured, setMeasured] = useState(null);
-	const placeholder = typeof props.placeholder === "string" ? props.placeholder : label;
+	const placeholder = typeof hint === "string" ? hint : label;
 	useLayoutEffect(() => {
 		const copy = sizer.current;
 		const words = sizerText.current;
@@ -938,7 +1011,7 @@ function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onVal
 			words.style.paddingInlineEnd = style.paddingInlineEnd;
 			const whole = Math.ceil(copy.getBoundingClientRect().width);
 			if (whole <= 0) return;
-			const width = Math.min(whole, 160);
+			const width = Math.min(whole, 120);
 			wrapper.current?.style.setProperty("--fit-search-min", `${width}px`);
 			setMeasured(width);
 		};
@@ -957,6 +1030,54 @@ function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onVal
 		icon
 	]);
 	const least = minWidth ?? measured;
+	const [shownHint, setShownHint] = useState(void 0);
+	useLayoutEffect(() => {
+		const real = input.current;
+		const ruler = probe.current;
+		if (typeof hint !== "string" || !real || !ruler) {
+			setShownHint(void 0);
+			return;
+		}
+		const widths = /* @__PURE__ */ new Map();
+		let frame = 0;
+		const fit = () => {
+			frame = 0;
+			const style = getComputedStyle(real);
+			const room = real.getBoundingClientRect().width - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
+			if (room <= 0) return;
+			const font = `${style.font}|${style.letterSpacing}`;
+			ruler.style.font = style.font;
+			ruler.style.letterSpacing = style.letterSpacing;
+			const width = (text) => {
+				const key = `${font}\n${text}`;
+				let w = widths.get(key);
+				if (w === void 0) {
+					ruler.textContent = text;
+					w = ruler.getBoundingClientRect().width;
+					widths.set(key, w);
+				}
+				return w;
+			};
+			setShownHint(fitPlaceholder(hint, room, width));
+		};
+		const later = () => {
+			if (frame === 0) frame = requestAnimationFrame(fit);
+		};
+		const refit = () => {
+			widths.clear();
+			later();
+		};
+		fit();
+		const resize = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(later);
+		resize?.observe(real);
+		const fonts = typeof document === "undefined" ? void 0 : document.fonts;
+		fonts?.addEventListener?.("loadingdone", refit);
+		return () => {
+			if (frame !== 0) cancelAnimationFrame(frame);
+			resize?.disconnect();
+			fonts?.removeEventListener?.("loadingdone", refit);
+		};
+	}, [hint]);
 	const change = useCallback((next) => {
 		setOwn(next);
 		onValueChange?.(next);
@@ -1044,12 +1165,12 @@ function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onVal
 		style: least === null ? void 0 : { "--fit-search-min": `${least}px` },
 		...item.props,
 		children: [
-			/* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsxs("div", {
 				"aria-hidden": true,
 				inert: true,
 				"data-slot": "fit-toolbar-search-sizer",
 				className: searchSizer(),
-				children: /* @__PURE__ */ jsxs(InputGroup, {
+				children: [/* @__PURE__ */ jsxs(InputGroup, {
 					ref: sizer,
 					size: "md",
 					className: "w-max",
@@ -1058,7 +1179,10 @@ function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onVal
 						className: "whitespace-pre",
 						children: placeholder
 					})]
-				})
+				}), /* @__PURE__ */ jsx("span", {
+					ref: probe,
+					className: "absolute whitespace-pre"
+				})]
 			}),
 			/* @__PURE__ */ jsxs(Tooltip, {
 				disabled: !collapsed || open,
@@ -1104,6 +1228,7 @@ function FitToolbarSearch({ "aria-label": label, value, defaultValue = "", onVal
 						className: searchInput(),
 						disabled,
 						...props,
+						placeholder: shownHint ?? hint,
 						value: text,
 						onValueChange: change,
 						onKeyDown: handleKeyDown

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

@@ -44,7 +44,7 @@ const fitToolbar = tv({
 			"in-data-fit-collapse:data-open:absolute in-data-fit-collapse:data-open:min-w-0",
 			"in-data-fit-collapse:focus-within:absolute in-data-fit-collapse:focus-within:min-w-0"
 		],
-		searchInput: ["[&::-webkit-search-cancel-button]:appearance-none", "text-ellipsis placeholder:text-ellipsis"]
+		searchInput: ["[&::-webkit-search-cancel-button]:appearance-none", "text-ellipsis"]
 	},
 	variants: {
 		count: { true: { pickerValue: ["font-mono text-mono-meta"] } },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.89.0",
+  "version": "0.91.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",