@botiverse/raft-ui 0.90.0 → 0.92.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [0.92.0](https://github.com/botiverse/raft-design/compare/v0.91.0...v0.92.0) (2026-11-11)
+
+### Fixed
+
+- **Components used only on an app's lazy pages stay out of the chunk that loads raft-ui first.** `dist/index.mjs` and `dist/wip.mjs` are now the drag Escape guard import plus `export * from "./index-exports.mjs"` / `"./wip-exports.mjs"`; the names live in those two modules, which are not listed in `sideEffects`. Exports and types are unchanged, and the guard still installs when raft-ui loads.
+  - Why: both entries are in `sideEffects` so a bundler keeps the guard import, but a module with side effects keeps every import it has, so Rolldown put every raft-ui component an app used anywhere (the task board, InboxItem, SelectionToolbar, Meter, Search…) into that first chunk. Raft Desktop's first screen grew past its size gate (Tenny, 2026-11-11, #proj-raft-ui:49dd2bf4); with this and slock's startup closure reading the barrel, it is about 10.7 KiB gzip smaller.
+  - Affects: nothing in an app's code. A bundler that follows `sideEffects` can now leave unused components out of the first chunk.
+
+## [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

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

@@ -292,5 +292,5 @@ export type FitToolbarSearchProps = Omit<InputGroupInputProps, "className" | "va
  * 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

@@ -885,6 +885,74 @@ function coverScope(root, search) {
 * isn't capped.
 */
 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
@@ -895,7 +963,7 @@ const FIT_SEARCH_MAX_LEAST = 120;
 * 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");
@@ -911,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(() => {
@@ -929,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;
@@ -961,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);
@@ -1048,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",
@@ -1062,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,
@@ -1108,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"] } },