@bysages/react 0.1.1 → 0.2.1

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { Accordion as Accordion$1 } from "@ark-ui/react/accordion";
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, HTMLAttributes, InputHTMLAttributes, ReactNode, Ref, TextareaHTMLAttributes } from "react";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, ComponentProps, HTMLAttributes, InputHTMLAttributes, ReactNode, Ref, TextareaHTMLAttributes } from "react";
 import { Field as Field$1 } from "@ark-ui/react/field";
 import { Popover as Popover$1 } from "@ark-ui/react/popover";
 import { Collapsible as Collapsible$1 } from "@ark-ui/react/collapsible";
@@ -278,8 +278,12 @@ export interface ResponseProps extends HTMLAttributes<HTMLDivElement> {
   /** Optional code-highlighting function re-inking fenced blocks; the
    * component stays agnostic about which engine provides it. */
   highlighter?: (code: string, lang?: string) => string;
+  /** The copy stamp's accessible name before the copy lands. */
+  copyLabel?: string;
+  /** The copy stamp's accessible name once the text has landed. */
+  copiedLabel?: string;
 }
-declare function Response$1({ content, highlighter, ...rest }: ResponseProps): import("react").JSX.Element;
+declare function Response$1({ content, highlighter, copyLabel, copiedLabel, ...rest }: ResponseProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/ai-source/index.d.ts
 /** One place the ink came from; href and the rest ride the anchor. */
@@ -326,7 +330,7 @@ export interface ToolProps extends HTMLAttributes<HTMLDivElement> {
 }
 export declare function Tool({ name, label, status, input, output, ...rest }: ToolProps): import("react").JSX.Element;
 //#endregion
-//#region ../../node_modules/.pnpm/@ai-sdk+provider@4.0.14/node_modules/@ai-sdk/provider/dist/index.d.ts
+//#region ../../node_modules/.pnpm/@ai-sdk+provider@4.0.17/node_modules/@ai-sdk/provider/dist/index.d.ts
 /**
  * Audio format configuration shared by provider V4 model specifications.
  */
@@ -406,7 +410,7 @@ type SharedV4Headers = Record<string, string>;
  * A JSON value can be a string, number, boolean, object, array, or null.
  * JSON values can be serialized and deserialized by the JSON.stringify and JSON.parse methods.
  */
-type JSONValue = null | string | number | boolean | JSONObject | JSONArray;
+type JSONValue = null | string | number | boolean | Readonly<JSONObject> | readonly JSONValue[];
 type JSONObject = {
   [key: string]: JSONValue | undefined;
 };
@@ -9853,7 +9857,7 @@ interface $ZodConfig {
 declare const globalConfig: $ZodConfig;
 declare function config(newConfig?: Partial<$ZodConfig>): $ZodConfig;
 //#endregion
-//#region ../../node_modules/.pnpm/@ai-sdk+provider-utils@5.0.40_zod@4.6.5/node_modules/@ai-sdk/provider-utils/dist/index.d.ts
+//#region ../../node_modules/.pnpm/@ai-sdk+provider-utils@5.0.45_zod@4.6.5/node_modules/@ai-sdk/provider-utils/dist/index.d.ts
 /**
  * A value that can be provided either as a single item, an array of items,
  * or be left undefined.
@@ -10814,6 +10818,13 @@ type ToolOutputProperties<INPUT, OUTPUT, CONTEXT extends Context | unknown | nev
  * Common properties shared by all tool kinds.
  */
 type BaseTool<INPUT extends JSONValue | unknown | never = any, OUTPUT extends JSONValue | unknown | never = any, CONTEXT extends Context | unknown | never = any> = {
+  /**
+   * Defer exposing this tool until it is discovered by `toolSearch`.
+   * Supports direct calls and local callers that announce tools in conversation
+   * messages (code mode with `toolDiscovery: 'conversation'`). Discovered tools
+   * become available on the next model step.
+   */
+  deferLoading?: boolean;
   /**
    * An optional title of the tool.
    *
@@ -11070,7 +11081,7 @@ type Normalize<OBJECT> = { [KEY in keyof OBJECT]: OBJECT[KEY]; };
  */
 type InferToolSetContext<TOOLS extends ToolSet> = Normalize<RequiredToolSetContext<TOOLS> & OptionalToolSetContext<TOOLS>>;
 //#endregion
-//#region ../../node_modules/.pnpm/ai@7.0.99_zod@4.6.5/node_modules/ai/dist/index.d.ts
+//#region ../../node_modules/.pnpm/ai@7.0.107_zod@4.6.5/node_modules/ai/dist/index.d.ts
 /**
  * Embedding.
  */
@@ -12559,6 +12570,10 @@ type UIToolInvocation<TOOL extends UITool | Tool$1> = {
 } | {
   state: 'output-error';
   input: asUITool<TOOL>['input'] | undefined;
+  /**
+   * @deprecated Use `input` instead. This field will be removed in the next
+   * major version.
+   */
   rawInput?: unknown;
   output?: never;
   errorText: string;
@@ -13430,6 +13445,7 @@ declare global {
    * String model ids are resolved to the default provider and model id.
    *
    * If not set, the default provider is the Vercel AI gateway provider.
+   * Experimental evaluation requires an explicitly configured evaluation-capable provider.
    *
    * @see https://ai-sdk.dev/docs/ai-sdk-core/provider-management#global-provider-configuration
    */
@@ -13562,10 +13578,22 @@ export interface AutoCompleteProps extends Omit<HTMLAttributes<HTMLDivElement>,
 export declare function AutoComplete({ value, items, placeholder, filter, onValueChange, ...rest }: AutoCompleteProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/avatar/index.d.ts
-/** Ark's Avatar, dressed in the paper-and-ink system: a circular seal on
- * inset paper that holds initials until the image loads over them. The
- * API is Ark's own — Root, Image, Fallback. */
-export declare const Avatar: typeof Avatar$1;
+/** Avatar, dressed in the paper-and-ink system: a circular seal on
+ * inset paper that holds initials until the image loads over them.
+ * `size` picks a control-height rung for the seal — the core styles
+ * re-point `--bs-avatar-size` per rung, and scenes can still retune the
+ * variable directly. */
+export type AvatarSize = "sm" | "md" | "lg";
+export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
+  /** Seal diameter: the small, medium, or large control rung. The
+   * default (large) stands as tall as the biggest control so an avatar
+   * rides a row without stretching it. */
+  size?: AvatarSize;
+}
+declare function AvatarRoot({ size, ...rest }: AvatarProps): import("react").JSX.Element;
+export declare const Avatar: typeof Avatar$1 & {
+  Root: typeof AvatarRoot;
+};
 //#endregion
 //#region src/components/avatar-group/index.d.ts
 /** Avatars overlapping one row, each rimmed in the ground so the pile
@@ -13580,20 +13608,26 @@ export interface BackTopProps extends HTMLAttributes<HTMLButtonElement> {
   threshold?: number;
   /** The accessible name; the control is icon-only by default. */
   label?: string;
+  /** Ride a scrolling element of your own instead of the page: the
+   * control moors inside that element's corner and watches its
+   * scrollTop. The host supplies the positioning context. */
+  scrollEl?: () => HTMLElement | null;
 }
 /**
  * A way home: after the page has scrolled past `threshold`, a small
  * floating control rises at the page's corner and returns the reader to
  * the top. The scroll itself stays native — `window.scrollTo` defers to
  * the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
- * back into an instant jump. The button stays mounted either way so the
- * entrance is a transition, never a pop.
+ * back into an instant jump (a moored control asks the media query
+ * directly, since a scroller of its own has no stylesheet to defer to).
+ * The button stays mounted either way so the entrance is a transition,
+ * never a pop.
  *
  * The control itself is the shared `Button` (outline, square) — the
  * paper, hairline and halo are its; this family owns only the floating
  * and the entrance.
  */
-export declare function BackTop({ threshold, label, ...rest }: BackTopProps): import("react").JSX.Element;
+export declare function BackTop({ threshold, label, scrollEl, ...rest }: BackTopProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/badge/index.d.ts
 /** A small seal of state. Ink is the neutral tone; the four semantic
@@ -13778,18 +13812,21 @@ export interface CascadeSelectNode {
  * dissolves open beside it, until a leaf click settles the whole path.
  * `value` is the selected path (or paths, when `multiple`) — the joined
  * labels ride the trigger. `highlightTrigger: "hover"` turns the
- * classic cascading menu: pointing is enough to unfold.
+ * classic cascading menu: pointing is enough to unfold. `filterable`
+ * swaps the corridor for a flat list of matching paths while a query
+ * runs — each hit still reads as its full route.
  */
 export interface CascadeSelectProps extends HTMLAttributes<HTMLDivElement> {
   value?: string[][];
   data: CascadeSelectNode[];
   placeholder?: string;
   highlightTrigger?: "click" | "hover";
+  filterable?: boolean;
   multiple?: boolean;
   disabled?: boolean;
   onValueChange?: (value: string[][]) => void;
 }
-export declare function CascadeSelect({ value, data, placeholder, highlightTrigger, multiple, disabled, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
+export declare function CascadeSelect({ value, data, placeholder, highlightTrigger, filterable, multiple, disabled, onValueChange, ...rest }: CascadeSelectProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/carousel/index.d.ts
 /** Ark's Carousel, dressed in the paper-and-ink system: slides ride in one
@@ -13816,6 +13853,7 @@ export interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
   value?: string[];
   options: CheckboxOption[];
   layout?: "vertical" | "horizontal";
+  invalid?: boolean;
   disabled?: boolean;
   onValueChange?: (value: string[]) => void;
 }
@@ -13823,9 +13861,11 @@ export interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement> {
  * One question, many answers: a labelled stack (or row) of the seal-cut
  * checkboxes bound to a single array. Toggling a box adds or removes its
  * value; the group itself is semantics (`role="group"`), the boxes stay
- * the machine-driven originals.
+ * the machine-driven originals. Inside a `Field.Root` the group picks up
+ * the field context, so the invalid and disabled states a Form routes to
+ * its name dress every box at once.
  */
-export declare function CheckboxGroup({ value, options, layout, disabled, onValueChange, ...rest }: CheckboxGroupProps): import("react").JSX.Element;
+export declare function CheckboxGroup({ value, options, layout, invalid, disabled, onValueChange, ...rest }: CheckboxGroupProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/chip/index.d.ts
 /** A counting coin: the numeric value, capped at `max` with an ellipsis
@@ -14411,10 +14451,9 @@ export interface LayoutContextValue {
 }
 /**
  * The application skeleton: Root, Header, Sider, Content, Footer —
- * the admin arrangement (Element Plus / AntD keep the same anatomy)
- * dressed in the paper-and-ink surfaces. The root is a full-height
- * grid; a declared `sider` turns the columns around to meet whichever
- * edge the rail stands on.
+ * the admin arrangement dressed in the paper-and-ink surfaces. The
+ * root is a full-height grid; a declared `sider` turns the columns
+ * around to meet whichever edge the rail stands on.
  */
 declare function Root$1({ sider, children, ...rest }: LayoutRootProps): import("react").JSX.Element;
 export interface LayoutSiderProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
@@ -14946,6 +14985,11 @@ export interface DataTableProps {
   sortable?: boolean;
   /** Render a global-filter toolbar and per-column filter inputs. */
   filterable?: boolean;
+  /** Keep the built-in toolbar row above the table (default true when
+   * `filterable`). Turn it off to host the global filter in your own
+   * toolbar — the feature stays registered and the instance methods
+   * keep working. */
+  showToolbar?: boolean;
   /** Enable tree expansion over `subRows`; the first column hosts the
    * expander and depth indent. */
   tree?: boolean;
@@ -15134,16 +15178,18 @@ export interface TreeSelectNode {
  * A tree behind a field: the control reads like an input, the vessel
  * below walks the hierarchy, and one leaf click closes the deal. Single
  * selection — the chosen label rides on the control, its value rides in
- * `value`.
+ * `value`. `filterable` puts a filter line at the top of the vessel;
+ * matches keep their ancestors and the branches fan open.
  */
 export interface TreeSelectProps extends HTMLAttributes<HTMLDivElement> {
   value?: string;
   data: TreeSelectNode[];
   placeholder?: string;
+  filterable?: boolean;
   disabled?: boolean;
   onValueChange?: (value: string) => void;
 }
-export declare function TreeSelect({ value, data, placeholder, disabled, onValueChange, ...rest }: TreeSelectProps): import("react").JSX.Element;
+export declare function TreeSelect({ value, data, placeholder, filterable, disabled, onValueChange, ...rest }: TreeSelectProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/tree-view/index.d.ts
 /** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where

package/dist/index.mjs

@@ -13,7 +13,7 @@ import { Combobox as Combobox$1 } from "@ark-ui/react/combobox";
 import { Avatar as Avatar$1 } from "@ark-ui/react/avatar";
 import { DatePicker as DatePicker$1 } from "@ark-ui/react/date-picker";
 import { useEnvironmentContext } from "@ark-ui/react/environment";
-import { useLocaleContext } from "@ark-ui/react/locale";
+import { useFilter, useLocaleContext } from "@ark-ui/react/locale";
 import * as cascade from "@zag-js/cascade-select";
 import { normalizeProps, useMachine } from "@zag-js/react";
 import { Carousel as Carousel$1 } from "@ark-ui/react/carousel";
@@ -51,7 +51,7 @@ import { RadioGroup as RadioGroup$1 } from "@ark-ui/react/radio-group";
 import { RatingGroup as RatingGroup$1 } from "@ark-ui/react/rating-group";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/react/scroll-area";
 import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/react/segment-group";
-import { Select as Select$1 } from "@ark-ui/react/select";
+import { Select as Select$1, createListCollection } from "@ark-ui/react/select";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/react/signature-pad";
 import { Slider as Slider$1 } from "@ark-ui/react/slider";
 import { Splitter as Splitter$1 } from "@ark-ui/react/splitter";
@@ -487,12 +487,83 @@ function Reasoning({ label = "Thinking", children, ...rest }) {
 }
 injectComponentStyle("ai");
 //#endregion
+//#region src/components/ai-response/code-copy.ts
+/** The two glyphs a copy affordance needs: the stamp and its
+* confirmation. Inline SVG keeps the enhancement framework-agnostic —
+* it lives beside the renderer's generated code HTML. */
+const COPY_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;
+const COPIED_CODE_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+/** How long the confirmation stays before the stamp returns. */
+const REVERT_MS = 1500;
+/** Make sure every fenced block under `host` carries its copy stamp.
+* The stamp anchors to a wrapper outside the scrolling `pre` — inside,
+* it would fix to the overflow area and travel out of view with the
+* code. The renderer rebuilds the markdown as one HTML string on every
+* stream tick, so this stays idempotent and cheap enough to re-run
+* after each patch. */
+function decorateCodeCopy(host, copyLabel) {
+	for (const pre of host.querySelectorAll("pre")) {
+		let body = pre.parentElement;
+		if (!body || body.getAttribute("data-part") !== "code-body") {
+			body = document.createElement("div");
+			body.setAttribute("data-scope", "ai");
+			body.setAttribute("data-part", "code-body");
+			pre.replaceWith(body);
+			body.appendChild(pre);
+		}
+		let button = body.querySelector("[data-part=\"code-copy\"]");
+		if (!button) {
+			button = document.createElement("button");
+			button.type = "button";
+			button.setAttribute("data-scope", "ai");
+			button.setAttribute("data-part", "code-copy");
+			button.innerHTML = COPY_CODE_ICON;
+			body.appendChild(button);
+		}
+		button.title = copyLabel;
+		button.setAttribute("aria-label", copyLabel);
+	}
+}
+/** The one delegated click for the whole response: copy the block's
+* text and confirm in place, then return the stamp after a beat. */
+async function clickCodeCopy(event, copyLabel, copiedLabel) {
+	const button = event.target?.closest("[data-part=\"code-copy\"]");
+	const pre = button?.closest("[data-part=\"code-body\"]")?.querySelector("pre");
+	if (!button || !pre) return;
+	await navigator.clipboard.writeText(pre.textContent ?? "");
+	button.innerHTML = COPIED_CODE_ICON;
+	button.setAttribute("data-state", "copied");
+	button.title = copiedLabel;
+	button.setAttribute("aria-label", copiedLabel);
+	setTimeout(() => {
+		if (!button.isConnected) return;
+		button.innerHTML = COPY_CODE_ICON;
+		button.removeAttribute("data-state");
+		button.title = copyLabel;
+		button.setAttribute("aria-label", copyLabel);
+	}, REVERT_MS);
+}
+//#endregion
 //#region src/components/ai-response/index.tsx
-function Response({ content, highlighter, ...rest }) {
+function Response({ content, highlighter, copyLabel = "Copy code", copiedLabel = "Copied", ...rest }) {
+	const root = useRef(null);
+	useEffect(() => {
+		const host = root.current;
+		if (host) decorateCodeCopy(host, copyLabel);
+	}, [
+		content,
+		highlighter,
+		copyLabel
+	]);
+	const onClick = (event) => {
+		clickCodeCopy(event.nativeEvent, copyLabel, copiedLabel);
+	};
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
+		ref: root,
 		"data-scope": "ai",
 		"data-part": "response",
+		onClick,
 		dangerouslySetInnerHTML: { __html: renderHtml(content, highlighter ? { highlighter } : void 0) }
 	});
 }
@@ -849,10 +920,13 @@ function AutoComplete({ value = "", items = [], placeholder, filter, onValueChan
 injectComponentStyle("combobox");
 //#endregion
 //#region src/components/avatar/index.tsx
-/** Ark's Avatar, dressed in the paper-and-ink system: a circular seal on
-* inset paper that holds initials until the image loads over them. The
-* API is Ark's own — Root, Image, Fallback. */
-const Avatar = Avatar$1;
+function AvatarRoot({ size, ...rest }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		...rest,
+		"data-size": size
+	});
+}
+const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
 injectComponentStyle("avatar");
 //#endregion
 //#region src/components/avatar-group/index.tsx
@@ -887,26 +961,46 @@ function chevronUp() {
 * floating control rises at the page's corner and returns the reader to
 * the top. The scroll itself stays native — `window.scrollTo` defers to
 * the stylesheet's `scroll-behavior: smooth`, which reduced motion turns
-* back into an instant jump. The button stays mounted either way so the
-* entrance is a transition, never a pop.
+* back into an instant jump (a moored control asks the media query
+* directly, since a scroller of its own has no stylesheet to defer to).
+* The button stays mounted either way so the entrance is a transition,
+* never a pop.
 *
 * The control itself is the shared `Button` (outline, square) — the
 * paper, hairline and halo are its; this family owns only the floating
 * and the entrance.
 */
-function BackTop({ threshold = 400, label = "Back to top", ...rest }) {
+function BackTop({ threshold = 400, label = "Back to top", scrollEl, ...rest }) {
 	const [visible, setVisible] = useState(false);
 	useEffect(() => {
 		if (typeof window === "undefined") return;
-		const onScroll = () => setVisible(window.scrollY > threshold);
+		const el = scrollEl?.() ?? null;
+		const onScroll = () => setVisible((el ? el.scrollTop : window.scrollY) > threshold);
 		onScroll();
-		window.addEventListener("scroll", onScroll, { passive: true });
-		return () => window.removeEventListener("scroll", onScroll);
-	}, [threshold]);
+		if (el) el.addEventListener("scroll", onScroll, { passive: true });
+		else window.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			if (el) el.removeEventListener("scroll", onScroll);
+			else window.removeEventListener("scroll", onScroll);
+		};
+	}, [threshold, scrollEl]);
+	const toTop = () => {
+		const el = scrollEl?.();
+		if (!el) {
+			window.scrollTo({ top: 0 });
+			return;
+		}
+		const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+		el.scrollTo({
+			top: 0,
+			behavior: reduce ? "auto" : "smooth"
+		});
+	};
 	return /* @__PURE__ */ jsx("div", {
 		"data-scope": "back-top",
 		"data-part": "root",
 		"data-state": visible ? "shown" : "hidden",
+		...scrollEl ? { "data-container": "" } : {},
 		children: /* @__PURE__ */ jsx(Button, {
 			...rest,
 			variant: "outline",
@@ -916,7 +1010,7 @@ function BackTop({ threshold = 400, label = "Back to top", ...rest }) {
 			"aria-label": label,
 			"aria-hidden": visible ? void 0 : "true",
 			tabIndex: visible ? 0 : -1,
-			onClick: () => window.scrollTo({ top: 0 }),
+			onClick: toTop,
 			children: rest.children ?? chevronUp()
 		})
 	});
@@ -1181,6 +1275,23 @@ const Card = Object.assign(Root$9, {
 });
 injectComponentStyle("card");
 //#endregion
+//#region src/components/input/index.tsx
+function Input({ value, size = "md", invalid = false, onValueChange, ...rest }) {
+	const field = useFieldContext();
+	const fieldProps = field?.getInputProps() ?? {};
+	return /* @__PURE__ */ jsx("input", {
+		...fieldProps,
+		...rest,
+		...value !== void 0 ? { value } : {},
+		"data-scope": "input",
+		"data-part": "root",
+		"data-size": size,
+		"data-invalid": invalid || field?.invalid ? "" : void 0,
+		onChange: (event) => onValueChange?.(event.target.value)
+	});
+}
+injectComponentStyle("input");
+//#endregion
 //#region src/components/cascade-select/index.tsx
 const chevronDown$2 = /* @__PURE__ */ jsx("svg", {
 	viewBox: "0 0 24 24",
@@ -1212,7 +1323,7 @@ const checkGlyph$2 = /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": "true",
 	children: /* @__PURE__ */ jsx("path", { d: "m5 12.5 5 5L19 7" })
 });
-function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, multiple = false, disabled = false, onValueChange, ...rest }) {
+function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigger, filterable = false, multiple = false, disabled = false, onValueChange, ...rest }) {
 	const id = useId();
 	const locale = useLocaleContext();
 	const env = useEnvironmentContext();
@@ -1240,6 +1351,47 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 		}
 	});
 	const api = cascade.connect(service, normalizeProps);
+	const [query, setQuery] = useState("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const filtering = filterable && query.trim().length > 0;
+	/** The corridor's answer to a query: every leaf whose route matches —
+	* the query may land on any hop, and the whole route still shows. */
+	const matchPaths = useMemo(() => {
+		if (!filtering) return [];
+		const q = query.trim();
+		const hits = [];
+		const walk = (nodes, path, labels, matched) => {
+			for (const node of nodes ?? []) {
+				const hit = matched || filterFns.contains(node.label, q);
+				const nextPath = [...path, node.value];
+				const nextLabels = [...labels, node.label];
+				if (node.children?.length) walk(node.children, nextPath, nextLabels, hit);
+				else if (hit) hits.push({
+					path: nextPath,
+					labels: nextLabels
+				});
+			}
+		};
+		walk(data, [], [], false);
+		return hits;
+	}, [
+		filtering,
+		query,
+		filterFns,
+		data
+	]);
+	const isSelected = (path) => (value ?? []).some((p) => p.join("/") === path.join("/"));
+	function pickMatch(path) {
+		if (multiple) {
+			const current = value ?? [];
+			const key = path.join("/");
+			const next = current.some((p) => p.join("/") === key) ? current.filter((p) => p.join("/") !== key) : [...current, path];
+			api.setValue(next);
+		} else {
+			api.selectValue(path);
+			api.setOpen(false);
+		}
+	}
 	/** The machine's `valueAsString` only updates through its select
 	* event, so an externally-set `value` would render the placeholder
 	* forever — resolve the labels from the data instead. */
@@ -1305,6 +1457,10 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 			...api.getControlProps(),
 			children: /* @__PURE__ */ jsxs("button", {
 				...api.getTriggerProps(),
+				onClick: (event) => {
+					api.getTriggerProps().onClick?.(event);
+					setQuery("");
+				},
 				disabled: disabled || void 0,
 				children: [/* @__PURE__ */ jsx("span", {
 					...api.getValueTextProps(),
@@ -1316,9 +1472,27 @@ function CascadeSelect({ value, data, placeholder = "Select…", highlightTrigge
 			})
 		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", {
 			...api.getPositionerProps(),
-			children: /* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsxs("div", {
 				...api.getContentProps(),
-				children: renderColumn(collection.rootNode, [], [])
+				children: [filterable ? /* @__PURE__ */ jsx("div", {
+					"data-part": "search",
+					children: /* @__PURE__ */ jsx(Input, {
+						size: "sm",
+						value: query,
+						onValueChange: setQuery,
+						placeholder: "Filter…",
+						"aria-label": "Filter options"
+					})
+				}) : null, filtering ? matchPaths.length === 0 ? /* @__PURE__ */ jsx("p", {
+					"data-part": "empty",
+					children: "Nothing matches"
+				}) : matchPaths.map((hit) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"data-part": "match",
+					"data-selected": isSelected(hit.path) || void 0,
+					onClick: () => pickMatch(hit.path),
+					children: hit.labels.join(" / ")
+				}, hit.path.join("/"))) : renderColumn(collection.rootNode, [], [])]
 			})
 		}) })]
 	});
@@ -1357,10 +1531,15 @@ const checkGlyph$1 = /* @__PURE__ */ jsx("svg", {
 * One question, many answers: a labelled stack (or row) of the seal-cut
 * checkboxes bound to a single array. Toggling a box adds or removes its
 * value; the group itself is semantics (`role="group"`), the boxes stay
-* the machine-driven originals.
+* the machine-driven originals. Inside a `Field.Root` the group picks up
+* the field context, so the invalid and disabled states a Form routes to
+* its name dress every box at once.
 */
-function CheckboxGroup({ value = [], options, layout = "vertical", disabled = false, onValueChange, ...rest }) {
+function CheckboxGroup({ value = [], options, layout = "vertical", invalid = false, disabled = false, onValueChange, ...rest }) {
+	const field = useFieldContext();
 	const selected = new Set(value);
+	const isInvalid = invalid || field?.invalid === true;
+	const isDisabled = disabled || field?.disabled === true;
 	function toggle(option) {
 		const next = new Set(selected);
 		if (next.has(option)) next.delete(option);
@@ -1373,9 +1552,11 @@ function CheckboxGroup({ value = [], options, layout = "vertical", disabled = fa
 		"data-scope": "checkbox-group",
 		"data-part": "root",
 		"data-layout": layout,
+		"data-invalid": isInvalid ? "" : void 0,
 		children: options.map((option) => /* @__PURE__ */ jsxs(Checkbox$1.Root, {
 			checked: selected.has(option.value),
-			disabled: disabled || option.disabled === true,
+			invalid: isInvalid,
+			disabled: isDisabled || option.disabled === true,
 			onCheckedChange: () => toggle(option.value),
 			children: [
 				/* @__PURE__ */ jsx(Checkbox$1.Control, { children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { children: checkGlyph$1 }) }),
@@ -1716,23 +1897,6 @@ injectComponentStyle("dialog");
 const Drawer = Drawer$1;
 injectComponentStyle("drawer");
 //#endregion
-//#region src/components/input/index.tsx
-function Input({ value, size = "md", invalid = false, onValueChange, ...rest }) {
-	const field = useFieldContext();
-	const fieldProps = field?.getInputProps() ?? {};
-	return /* @__PURE__ */ jsx("input", {
-		...fieldProps,
-		...rest,
-		...value !== void 0 ? { value } : {},
-		"data-scope": "input",
-		"data-part": "root",
-		"data-size": size,
-		"data-invalid": invalid || field?.invalid ? "" : void 0,
-		onChange: (event) => onValueChange?.(event.target.value)
-	});
-}
-injectComponentStyle("input");
-//#endregion
 //#region src/components/dynamic-input/index.tsx
 /**
 * A column of entry rows: one Input per line, each with a quiet remove
@@ -2383,10 +2547,9 @@ injectComponentStyle("kbd");
 const LAYOUT_CONTEXT = createContext(null);
 /**
 * The application skeleton: Root, Header, Sider, Content, Footer —
-* the admin arrangement (Element Plus / AntD keep the same anatomy)
-* dressed in the paper-and-ink surfaces. The root is a full-height
-* grid; a declared `sider` turns the columns around to meet whichever
-* edge the rail stands on.
+* the admin arrangement dressed in the paper-and-ink surfaces. The
+* root is a full-height grid; a declared `sider` turns the columns
+* around to meet whichever edge the rail stands on.
 */
 function Root$5({ sider, children, ...rest }) {
 	return /* @__PURE__ */ jsx(LAYOUT_CONTEXT.Provider, {
@@ -3203,6 +3366,36 @@ const TagsInput = TagsInput$1;
 injectComponentStyle("tags-input");
 //#endregion
 //#region src/components/table/index.tsx
+/** The pagination bar's arrows — thin chevrons for the row of seals. */
+function pageGlyph(direction) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: 14,
+		height: 14,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+	});
+}
+/** The page-size select's pointing chevron. */
+function chevronDownGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		width: 14,
+		height: 14,
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+	});
+}
 const SELECT_COL_ID = "__select";
 const SELECT_COL_WIDTH = 48;
 /** The list holding `id` and the index inside it, or null when absent. */
@@ -3282,7 +3475,7 @@ function SelectBox(props) {
 }
 function DataTable(rawProps) {
 	const props = rawProps;
-	const { selectable = false, sortable = true, filterable = false, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
+	const { selectable = false, sortable = true, filterable = false, showToolbar = true, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
 		10,
 		20,
 		50
@@ -3377,21 +3570,24 @@ function DataTable(rawProps) {
 	const rows = table.getRowModel().rows;
 	/** The declared row height is the density-scale baseline; the live
 	* scale comes off the document so the virtual window matches what CSS
-	* actually renders. */
-	const densityScale = () => {
+	* actually renders. It is read once and re-read only when the density
+	* or scene attribute moves — estimateSize runs on every scroll frame. */
+	let densityScale = 1;
+	const readDensityScale = () => {
 		const value = Number(getComputedStyle(document.documentElement).getPropertyValue("--bs-density-scale"));
-		return Number.isFinite(value) && value > 0 ? value : 1;
+		densityScale = Number.isFinite(value) && value > 0 ? value : 1;
 	};
 	const virtualizer = useVirtualizer({
 		count: rows.length,
 		getScrollElement: () => viewport.current,
-		estimateSize: () => rowHeight * densityScale(),
+		estimateSize: () => rowHeight * densityScale,
 		getItemKey: (index) => rows[index]?.id ?? index,
 		overscan: 8
 	});
 	const [, rerender] = useReducer((count) => count + 1, 0);
 	useEffect(() => {
 		if (!virtual) return;
+		readDensityScale();
 		const observer = new MutationObserver(rerender);
 		observer.observe(document.documentElement, {
 			attributes: true,
@@ -3650,7 +3846,7 @@ function DataTable(rawProps) {
 			onDragLeave: canDrag ? onColDragLeave : void 0,
 			onDrop: canDrag ? (e) => onColDrop(column, e) : void 0,
 			onDragEnd: canDrag ? onColDragEnd : void 0,
-			children: [header.isPlaceholder ? null : /* @__PURE__ */ jsx(FlexRender, { header }), canFilter ? /* @__PURE__ */ jsx("input", {
+			children: [header.isPlaceholder || header.column.columnDef.header === "" ? null : /* @__PURE__ */ jsx(FlexRender, { header }), canFilter ? /* @__PURE__ */ jsx("input", {
 				type: "text",
 				"data-scope": "table",
 				"data-part": "header-filter",
@@ -3757,55 +3953,53 @@ function DataTable(rawProps) {
 	const paginationBar = paginated ? (() => {
 		const pagination = table.atoms.pagination.get();
 		const rowCount = table.getRowCount();
-		const pageCount = table.getPageCount();
+		const sizeItems = createListCollection({ items: pageSizeOptions.map((size) => ({
+			label: `${size} / page`,
+			value: String(size)
+		})) });
+		const pageSize = /* @__PURE__ */ jsxs(Select.Root, {
+			collection: sizeItems,
+			value: [String(pagination.pageSize)],
+			onValueChange: (details) => table.setPageSize(Number(details.value[0])),
+			positioning: { placement: "top-start" },
+			children: [/* @__PURE__ */ jsx(Select.Control, { children: /* @__PURE__ */ jsxs(Select.Trigger, {
+				"aria-label": "Rows per page",
+				children: [/* @__PURE__ */ jsx(Select.ValueText, {}), /* @__PURE__ */ jsx(Select.Indicator, { children: chevronDownGlyph() })]
+			}) }), /* @__PURE__ */ jsx(Select.Positioner, { children: /* @__PURE__ */ jsx(Select.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, {
+				item,
+				children: [/* @__PURE__ */ jsx(Select.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select.ItemIndicator, { children: "✓" })]
+			}, item.value)) }) })]
+		});
+		const pager = /* @__PURE__ */ jsxs(Pagination.Root, {
+			count: rowCount,
+			pageSize: pagination.pageSize,
+			page: pagination.pageIndex + 1,
+			onPageChange: (details) => table.setPageIndex(details.page - 1),
+			children: [
+				/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageGlyph("start") }),
+				/* @__PURE__ */ jsx(Pagination.Context, { children: (scope) => scope.pages.map((page, index) => page.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, { index }, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
+					type: "page",
+					value: page.value,
+					children: String(page.value)
+				}, page.value)) }),
+				/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageGlyph("end") })
+			]
+		});
 		return /* @__PURE__ */ jsxs("div", {
 			"data-scope": "table",
 			"data-part": "pagination",
-			children: [
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					"data-scope": "table",
-					"data-part": "page-button",
-					disabled: !table.getCanPreviousPage(),
-					onClick: () => table.previousPage(),
-					children: "Prev"
-				}),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					"data-scope": "table",
-					"data-part": "page-button",
-					disabled: !table.getCanNextPage(),
-					onClick: () => table.nextPage(),
-					children: "Next"
-				}),
-				/* @__PURE__ */ jsx("select", {
-					"data-scope": "table",
-					"data-part": "page-size",
-					"aria-label": "Rows per page",
-					value: pagination.pageSize,
-					onChange: (e) => table.setPageSize(Number(e.target.value)),
-					children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs("option", {
-						value: size,
-						children: [size, " / page"]
-					}, size))
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					"data-scope": "table",
-					"data-part": "page-status",
-					children: [
-						"Page ",
-						pagination.pageIndex + 1,
-						" of ",
-						pageCount,
-						" · ",
-						rowCount,
-						" rows"
-					]
-				})
-			]
+			children: [/* @__PURE__ */ jsxs("span", {
+				"data-scope": "table",
+				"data-part": "page-status",
+				children: [rowCount, " rows"]
+			}), /* @__PURE__ */ jsxs("div", {
+				"data-scope": "table",
+				"data-part": "page-nav",
+				children: [pageSize, pager]
+			})]
 		});
 	})() : null;
-	const toolbar = filterable ? /* @__PURE__ */ jsx("div", {
+	const toolbar = filterable && showToolbar ? /* @__PURE__ */ jsx("div", {
 		"data-scope": "table",
 		"data-part": "toolbar",
 		children: /* @__PURE__ */ jsx("input", {
@@ -4162,9 +4356,11 @@ function TreeSelectRow({ node, indexPath }) {
 		})
 	});
 }
-function TreeSelect({ value, data, placeholder = "Select…", disabled = false, onValueChange, ...rest }) {
+function TreeSelect({ value, data, placeholder = "Select…", filterable = false, disabled = false, onValueChange, ...rest }) {
 	const [open, setOpen] = useState(false);
-	const collection = createTreeCollection$1({
+	const [query, setQuery] = useState("");
+	const filterFns = useFilter({ sensitivity: "base" });
+	const collection = useMemo(() => createTreeCollection$1({
 		nodeToValue: (node) => node.value,
 		nodeToString: (node) => node.label,
 		rootNode: {
@@ -4172,8 +4368,29 @@ function TreeSelect({ value, data, placeholder = "Select…", disabled = false,
 			label: "",
 			children: data
 		}
-	});
+	}), [data]);
+	const filtering = filterable && query.trim().length > 0;
+	/** The collection pruned to the matches — each hit keeping its
+	* ancestors, so a deep match still reads inside its hierarchy. */
+	const visibleCollection = useMemo(() => filtering ? collection.filter((node) => filterFns.contains(node.label, query.trim())) : collection, [
+		filtering,
+		collection,
+		filterFns,
+		query
+	]);
 	const firstLevel = data.map((node) => node.value);
+	const expandedWhileFiltering = useMemo(() => {
+		if (!filtering) return void 0;
+		const values = [];
+		const walk = (nodes) => {
+			for (const node of nodes) if (node.children?.length) {
+				values.push(node.value);
+				walk(node.children);
+			}
+		};
+		walk(visibleCollection.rootNode.children ?? []);
+		return values;
+	}, [filtering, visibleCollection]);
 	let found;
 	const walk = (nodes) => {
 		for (const node of nodes ?? []) {
@@ -4192,7 +4409,10 @@ function TreeSelect({ value, data, placeholder = "Select…", disabled = false,
 	return /* @__PURE__ */ jsxs(Popover$1.Root, {
 		...rest,
 		open,
-		onOpenChange: (details) => setOpen(details.open),
+		onOpenChange: (details) => {
+			setOpen(details.open);
+			if (!details.open) setQuery("");
+		},
 		positioning: {
 			sameWidth: true,
 			placement: "bottom-start"
@@ -4209,20 +4429,38 @@ function TreeSelect({ value, data, placeholder = "Select…", disabled = false,
 				disabled,
 				children: [label ?? placeholder, chevronDown]
 			})
-		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, {
+		}), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsxs(Popover$1.Content, {
 			"data-scope": "tree-select",
 			"data-part": "content",
-			children: /* @__PURE__ */ jsx(TreeView$1.Root, {
-				collection,
-				selectionMode: "single",
-				selectedValue: value ? [value] : [],
-				defaultExpandedValue: firstLevel,
-				onSelectionChange: pick,
-				children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: collection.rootNode.children?.map((node, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
-					node,
-					indexPath: [index]
-				}, node.value)) })
-			})
+			children: [filterable ? /* @__PURE__ */ jsx("div", {
+				"data-scope": "tree-select",
+				"data-part": "search",
+				children: /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					value: query,
+					onValueChange: setQuery,
+					placeholder: "Filter…",
+					"aria-label": "Filter options"
+				})
+			}) : null, /* @__PURE__ */ jsx("div", {
+				"data-scope": "tree-select",
+				"data-part": "body",
+				children: (visibleCollection.rootNode.children ?? []).length === 0 ? /* @__PURE__ */ jsx("p", {
+					"data-scope": "tree-select",
+					"data-part": "empty",
+					children: "Nothing matches"
+				}) : /* @__PURE__ */ jsx(TreeView$1.Root, {
+					collection: visibleCollection,
+					selectionMode: "single",
+					selectedValue: value ? [value] : [],
+					...filtering ? { expandedValue: expandedWhileFiltering } : { defaultExpandedValue: firstLevel },
+					onSelectionChange: pick,
+					children: /* @__PURE__ */ jsx(TreeView$1.Tree, { children: visibleCollection.rootNode.children?.map((node, index) => /* @__PURE__ */ jsx(TreeSelectRow, {
+						node,
+						indexPath: [index]
+					}, node.value)) })
+				})
+			})]
 		}) }) })]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/react",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "By Sages Elements components for React — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -41,23 +41,24 @@
     }
   },
   "dependencies": {
-    "@ark-ui/react": "5.39.1",
+    "@ark-ui/react": "5.39.2",
     "@tanstack/markdown": "0.0.15",
     "@tanstack/react-table": "9.2.4",
-    "@tanstack/react-virtual": "3.14.12",
-    "@zag-js/cascade-select": "1.43.3",
-    "@zag-js/react": "1.43.3",
-    "@bysages/core": "0.1.1"
+    "@tanstack/react-virtual": "3.14.13",
+    "@zag-js/cascade-select": "1.44.0",
+    "@zag-js/react": "1.44.0",
+    "@bysages/core": "0.2.1"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/react-vite": "10.6.0",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
-    "ai": "7.0.99",
+    "ai": "7.0.107",
     "react": "19.3.0",
     "react-dom": "19.3.0",
-    "storybook": "10.6.0"
+    "storybook": "10.6.0",
+    "zod": "4.6.5"
   },
   "peerDependencies": {
     "react": ">=18",