@commenda/pathfinder 0.1.0 → 0.2.0

package/dist/components/table/TablePagination.js

@@ -87,6 +87,7 @@ function c({ page: c, total: l, visibleCount: u, config: d, onChange: f, disable
 					}), /* @__PURE__ */ o(e, {
 						variant: t === c.page ? "secondary" : "tertiary",
 						size: "sm",
+						className: "pf:[&.pf-button]:w-[28px] pf:[&.pf-button]:min-w-[28px] pf:[&.pf-button]:px-0",
 						"aria-label": `Page ${String(t)}`,
 						"aria-current": t === c.page ? "page" : void 0,
 						disabled: p,

package/dist/components/table/TableSelectionBar.js

@@ -76,7 +76,10 @@ function f({ config: f, selection: p, anchorRef: m }) {
 				onClick: p.clear,
 				children: "Clear selection"
 			}),
-			(!!f.actions?.length || C.groups.length > 0) && /* @__PURE__ */ u(a, { orientation: "vertical" }),
+			(!!f.actions?.length || C.groups.length > 0) && /* @__PURE__ */ u(a, {
+				orientation: "vertical",
+				className: "pf:self-center!"
+			}),
 			f.actions?.slice(0, 3).map((t) => /* @__PURE__ */ u(e, {
 				size: "sm",
 				variant: "secondary",

package/dist/components/table/index.js

@@ -1,8 +1,8 @@
-import { TableNumberCell as e } from "../tabular/TableNumberCell.js";
-import { TableCell as t } from "../tabular/TableCell.js";
-import { TableEditCell as n } from "../tabular/TableEditCell.js";
-import { TableRowActions as r } from "../tabular/TableRowActions.js";
-import { Table as i } from "./Table.js";
+import { Table as e } from "./Table.js";
+import { TableNumberCell as t } from "../tabular/TableNumberCell.js";
+import { TableCell as n } from "../tabular/TableCell.js";
+import { TableEditCell as r } from "../tabular/TableEditCell.js";
+import { TableRowActions as i } from "../tabular/TableRowActions.js";
 import { TableSummary as a } from "./TableSummary.js";
 import { TablePresetFilters as o } from "./TablePresetFilters.js";
-export { i as Table, t as TableCell, n as TableEditCell, e as TableNumberCell, o as TablePresetFilters, r as TableRowActions, a as TableSummary };
+export { e as Table, n as TableCell, r as TableEditCell, t as TableNumberCell, o as TablePresetFilters, i as TableRowActions, a as TableSummary };

package/dist/components/table/table-column-style.js

@@ -5,7 +5,6 @@ function e(e, t, n = 0, r = 0) {
 	return {
 		position: "sticky",
 		zIndex: 2,
-		...e.pin === "start" && !t.slice(i + 1).some((e) => e.pin === "start") ? { borderInlineEnd: "2px solid var(--pf-color-blue-300)" } : e.pin === "end" && !t.slice(0, i).some((e) => e.pin === "end") ? { borderInlineStart: "2px solid var(--pf-color-blue-300)" } : {},
 		...e.pin === "start" ? { insetInlineStart: s } : { insetInlineEnd: s }
 	};
 }

package/dist/components/table/table-types.d.ts

@@ -105,6 +105,11 @@ export interface TableCommonProps<TRow> {
         collapsedGroups?: SelectionProps<readonly string[]>;
     };
     container?: 'card' | 'flat';
+    /** Hide record-list chrome when embedding a read-only table. Disabling pagination renders every local row. */
+    controlsConfig?: {
+        toolbar?: boolean;
+        pagination?: boolean;
+    };
     sortingConfig?: SelectionProps<TableSort | null>;
     searchConfig?: SelectionProps<string> & {
         getText?: (row: TRow) => string;

package/dist/components/table/useTableData.js

@@ -62,7 +62,7 @@ function l(l) {
 		getSortedRowModel: r(),
 		manualFiltering: l.dataMode === "remote",
 		manualSorting: l.dataMode === "remote",
-		manualPagination: l.dataMode === "remote" || _?.mode === "cursor",
+		manualPagination: l.dataMode === "remote" || _?.mode === "cursor" || l.controlsConfig?.pagination === !1,
 		autoResetPageIndex: !1,
 		state: {
 			sorting: x ? [{
@@ -80,7 +80,7 @@ function l(l) {
 			return e.matches(n, r, g[n.id], t.original);
 		}) ?? !0),
 		getColumnCanGlobalFilter: () => !0
-	}), j = l.dataMode === "remote" ? _?.mode === "cursor" ? l.rows.length : _?.totalRows ?? l.rows.length : A.getFilteredRowModel().rows.length, M = Math.max(1, Math.ceil(j / Math.max(1, C.pageSize))), N = l.dataMode === "remote" || _?.mode === "cursor" ? C.page : Math.min(Math.max(1, C.page), M), P = l.dataMode === "remote" || _?.mode === "cursor" ? A.getSortedRowModel().rows : A.getSortedRowModel().rows.slice((N - 1) * C.pageSize, N * C.pageSize);
+	}), j = l.dataMode === "remote" ? _?.mode === "cursor" ? l.rows.length : _?.totalRows ?? l.rows.length : A.getFilteredRowModel().rows.length, M = Math.max(1, Math.ceil(j / Math.max(1, C.pageSize))), N = l.dataMode === "remote" || _?.mode === "cursor" || l.controlsConfig?.pagination === !1 ? C.page : Math.min(Math.max(1, C.page), M), P = l.dataMode === "remote" || _?.mode === "cursor" || l.controlsConfig?.pagination === !1 ? A.getSortedRowModel().rows : A.getSortedRowModel().rows.slice((N - 1) * C.pageSize, N * C.pageSize);
 	return {
 		filterOperators: g,
 		changeOperator: (e, t) => {

package/dist/components/tabs/Tabs.js

@@ -4,57 +4,65 @@ import { ControlHint as t } from "../controls/ControlHint.js";
 import { MenuContent as n } from "../dropdown/MenuContent.js";
 import { useTabOverflow as r } from "./useTabOverflow.js";
 import { ChevronDownIcon as i } from "../icons/ChevronDownIcon.js";
-import { tabBaseClassNames as a, tabHorizontalClassNames as o, tabVerticalClassNames as s } from "./tab-class-names.js";
-import { TabLabel as c } from "./TabLabel.js";
-import l from "clsx";
-import { forwardRef as u, useId as d, useRef as f, useState as p } from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { Menu as g } from "@base-ui/react/menu";
-import { Tabs as _ } from "@base-ui/react/tabs";
+import { useSelectionIndicator as a } from "../controls/useSelectionIndicator.js";
+import { tabBaseClassNames as o, tabHorizontalClassNames as s, tabVerticalClassNames as c } from "./tab-class-names.js";
+import { TabLabel as l } from "./TabLabel.js";
+import u from "clsx";
+import { forwardRef as d, useId as f, useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { Menu as _ } from "@base-ui/react/menu";
+import { Tabs as v } from "@base-ui/react/tabs";
 //#region src/components/tabs/Tabs.tsx
-var v = u(function({ label: u, items: v, value: y, defaultValue: b, onValueChange: x, orientation: S = "horizontal", activationMode: C = "automatic", divider: w = !0, panelConfig: T, overflowConfig: E, className: D, ...O }, k) {
-	let [A, j] = p(b), M = y === void 0 ? A === null ? null : v.some((e) => e.value === A && !e.disableConfig?.isDisabled) ? A ?? null : v.find((e) => !e.disableConfig?.isDisabled)?.value ?? null : y, N = E?.label ?? "More", { containerRef: P, measurementRef: F, visible: I } = r(v, M, S === "horizontal", N), L = v.filter((e) => I === null || I.includes(e.value) || e.value === M), R = v.filter((e) => !L.includes(e)), z = f(null), B = d(), V = (e) => `${B}-tab-${encodeURIComponent(e)}`, H = (e) => {
-		y === void 0 && j(e), x?.(e);
+var y = d(function({ label: d, items: y, value: b, defaultValue: x, onValueChange: S, orientation: C = "horizontal", activationMode: w = "automatic", divider: T = !0, panelConfig: E, overflowConfig: D, className: O, ...k }, A) {
+	let [j, M] = m(x), N = b === void 0 ? j === null ? null : y.some((e) => e.value === j && !e.disableConfig?.isDisabled) ? j ?? null : y.find((e) => !e.disableConfig?.isDisabled)?.value ?? null : b, P = D?.label ?? "More", { containerRef: F, measurementRef: I, visible: L } = r(y, N, C === "horizontal", P), R = y.filter((e) => L === null || L.includes(e.value) || e.value === N), z = y.filter((e) => !R.includes(e)), B = p(null), V = f(), H = a("data-active", "[role=\"tab\"]"), U = (e) => `${V}-tab-${encodeURIComponent(e)}`, W = (e) => {
+		b === void 0 && M(e), S?.(e);
 	};
-	return /* @__PURE__ */ h(_.Root, {
-		...O,
-		ref: k,
-		value: M,
+	return /* @__PURE__ */ g(v.Root, {
+		...k,
+		ref: A,
+		value: N,
 		onValueChange: (e) => {
-			(typeof e == "string" || e === null) && H(e);
+			(typeof e == "string" || e === null) && W(e);
 		},
-		orientation: S,
-		className: l("pf:min-w-0 pf:max-w-full pf:w-full", S === "vertical" && "pf:flex pf:items-start pf:gap-xl", D),
-		children: [/* @__PURE__ */ h("div", {
-			ref: P,
-			className: l("pf:relative pf:min-w-0 pf:box-border", S === "horizontal" ? "pf:flex pf:items-end pf:gap-lg pf:w-full" : "pf:w-[180px] pf:max-w-[45%] pf:shrink-0", w && S === "horizontal" && "pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:border-soft-pearl-300"),
+		orientation: C,
+		className: u("pf:min-w-0 pf:max-w-full pf:w-full", C === "vertical" && "pf:flex pf:items-start pf:gap-xl", O),
+		children: [/* @__PURE__ */ g("div", {
+			ref: F,
+			className: u("pf:relative pf:min-w-0 pf:box-border", C === "horizontal" ? "pf:flex pf:items-end pf:gap-lg pf:w-full" : "pf:w-[180px] pf:max-w-[45%] pf:shrink-0", T && C === "horizontal" && "pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:border-soft-pearl-300"),
 			children: [
-				/* @__PURE__ */ h(_.List, {
-					"aria-label": u,
-					activateOnFocus: C === "automatic",
-					className: l("pf:relative pf:flex pf:min-w-0", S === "horizontal" ? "pf:gap-lg pf:overflow-x-auto pf:[scrollbar-width:none]" : "pf:flex-col pf:gap-xxs pf:w-full"),
-					children: [L.map((e) => /* @__PURE__ */ m(t, {
+				/* @__PURE__ */ g(v.List, {
+					ref: H.rootRef,
+					"aria-label": d,
+					activateOnFocus: w === "automatic",
+					className: u("pf:group/tabs pf:relative pf:flex pf:min-w-0", C === "horizontal" ? "pf:gap-lg pf:overflow-x-auto pf:[scrollbar-width:none]" : "pf:flex-col pf:gap-xxs pf:w-full"),
+					children: [R.map((e) => /* @__PURE__ */ h(t, {
 						label: e.disableConfig?.isDisabled ? e.disableConfig.reason : void 0,
-						children: /* @__PURE__ */ m(_.Tab, {
+						children: /* @__PURE__ */ h(v.Tab, {
 							"aria-label": e.count === void 0 ? e.label : `${e.label} ${String(e.count)}`,
-							id: V(e.value),
+							id: U(e.value),
 							"data-tab-value": e.value,
 							title: e.label,
 							value: e.value,
 							disabled: e.disableConfig?.isDisabled,
-							className: l(a, S === "horizontal" ? o : s),
-							children: /* @__PURE__ */ m(c, { item: e })
+							className: u(o, C === "horizontal" ? s : c),
+							children: /* @__PURE__ */ h(l, { item: e })
 						})
-					}, e.value)), S === "horizontal" && /* @__PURE__ */ m(_.Indicator, { className: "pf:absolute pf:bottom-0 pf:left-0 pf:h-[2px] pf:w-(--active-tab-width) pf:translate-x-(--active-tab-left) pf:rounded-t-[1px] pf:bg-blue-700 pf:transition-[translate,width] pf:duration-(--pf-duration-base) pf:ease-(--pf-easing-out) pf:motion-reduce:transition-none" })]
+					}, e.value)), /* @__PURE__ */ h("span", {
+						ref: H.indicatorRef,
+						hidden: !0,
+						"aria-hidden": "true",
+						className: "pf:absolute pf:top-0 pf:left-0 pf:origin-top-left pf:pointer-events-none",
+						children: /* @__PURE__ */ h("span", { className: u("pf:absolute pf:inset-x-0", C === "vertical" ? "pf:inset-y-0 pf:rounded-sm pf:bg-soft-pearl-200" : "pf:bottom-0 pf:h-[2px] pf:rounded-t-[1px] pf:bg-blue-700") })
+					})]
 				}),
-				R.length > 0 && /* @__PURE__ */ h(g.Root, { children: [/* @__PURE__ */ h(g.Trigger, {
-					className: l(a, "pf:max-w-[min(240px,100%)] pf:h-[28px] pf:px-xxs pf:py-0 pf:text-label-12", "pf:shrink-0"),
-					"aria-label": N,
-					children: [N, /* @__PURE__ */ m(i, { size: 12 })]
-				}), /* @__PURE__ */ m(n, {
+				z.length > 0 && /* @__PURE__ */ g(_.Root, { children: [/* @__PURE__ */ g(_.Trigger, {
+					className: u(o, "pf:max-w-[min(240px,100%)] pf:h-[28px] pf:px-xxs pf:py-0 pf:text-label-12", "pf:shrink-0"),
+					"aria-label": P,
+					children: [P, /* @__PURE__ */ h(i, { size: 12 })]
+				}), /* @__PURE__ */ h(n, {
 					menu: { groups: [{
 						id: "overflow",
-						items: R.map((e) => ({
+						items: z.map((e) => ({
 							id: e.value,
 							type: "action",
 							label: e.label,
@@ -62,40 +70,40 @@ var v = u(function({ label: u, items: v, value: y, defaultValue: b, onValueChang
 							disabled: e.disableConfig?.isDisabled,
 							disabledReason: e.disableConfig?.reason,
 							onClick: () => {
-								z.current = e.value, H(e.value);
+								B.current = e.value, W(e.value);
 							}
 						}))
 					}] },
 					finalFocus: () => {
-						let e = z.current;
-						return z.current = null, e ? P.current?.ownerDocument.getElementById(V(e)) ?? !0 : !0;
+						let e = B.current;
+						return B.current = null, e ? F.current?.ownerDocument.getElementById(U(e)) ?? !0 : !0;
 					}
 				})] }),
-				S === "horizontal" && /* @__PURE__ */ h("div", {
-					ref: F,
+				C === "horizontal" && /* @__PURE__ */ g("div", {
+					ref: I,
 					"aria-hidden": "true",
 					className: "pf:absolute pf:inset-x-0 pf:top-0 pf:invisible pf:pointer-events-none pf:flex pf:gap-lg pf:h-0 pf:overflow-hidden",
-					children: [v.map((e) => /* @__PURE__ */ m("span", {
+					children: [y.map((e) => /* @__PURE__ */ h("span", {
 						"data-measure-tab": !0,
-						className: l(a, "pf:max-w-[min(240px,100%)] pf:h-[28px] pf:px-xxs pf:py-0 pf:text-label-12"),
-						children: /* @__PURE__ */ m(c, { item: e })
-					}, e.value)), /* @__PURE__ */ h("span", {
+						className: u(o, "pf:max-w-[min(240px,100%)] pf:h-[28px] pf:px-xxs pf:py-0 pf:text-label-12"),
+						children: /* @__PURE__ */ h(l, { item: e })
+					}, e.value)), /* @__PURE__ */ g("span", {
 						"data-measure-more": !0,
-						className: l(a, "pf:max-w-[min(240px,100%)] pf:h-[28px] pf:px-xxs pf:py-0 pf:text-label-12"),
-						children: [N, /* @__PURE__ */ m(i, { size: 12 })]
+						className: u(o, "pf:max-w-[min(240px,100%)] pf:h-[28px] pf:px-xxs pf:py-0 pf:text-label-12"),
+						children: [P, /* @__PURE__ */ h(i, { size: 12 })]
 					})]
 				})
 			]
-		}), /* @__PURE__ */ m("div", {
-			className: l("pf:min-w-0 pf:flex-1", S === "horizontal" && "pf:pt-xl"),
-			children: v.map((t) => /* @__PURE__ */ m(_.Panel, {
+		}), /* @__PURE__ */ h("div", {
+			className: u("pf:min-w-0 pf:flex-1", C === "horizontal" && "pf:pt-xl"),
+			children: y.map((t) => /* @__PURE__ */ h(v.Panel, {
 				value: t.value,
-				keepMounted: T?.keepMounted ?? !1,
-				className: l("pf:min-w-0 pf:font-body pf:text-copy-13 pf:text-soft-pearl-1000 pf:wrap-anywhere", e, T?.className),
+				keepMounted: E?.keepMounted ?? !1,
+				className: u("pf:min-w-0 pf:font-body pf:text-copy-13 pf:text-soft-pearl-1000 pf:wrap-anywhere", e, E?.className),
 				children: t.content
 			}, t.value))
 		})]
 	});
 });
 //#endregion
-export { v as Tabs };
+export { y as Tabs };

package/dist/components/tabs/tab-class-names.d.ts

@@ -1,3 +1,3 @@
 export declare const tabBaseClassNames: string;
 export declare const tabHorizontalClassNames = "pf:max-w-[min(240px,100%)] pf:h-[28px] pf:px-xxs pf:py-0 pf:text-label-12";
-export declare const tabVerticalClassNames = "pf:w-full pf:min-h-[28px] pf:px-md pf:py-sm pf:text-label-13 pf:rounded-sm pf:gap-md pf:hover:bg-soft-pearl-100 pf:data-active:bg-soft-pearl-200";
+export declare const tabVerticalClassNames = "pf:w-full pf:justify-between pf:min-h-[28px] pf:px-md pf:py-sm pf:text-label-13 pf:rounded-sm pf:gap-md pf:hover:not-data-active:bg-soft-pearl-100 pf:group-not-data-indicator/tabs:data-active:bg-soft-pearl-200";

package/dist/components/tabs/tab-class-names.js

@@ -1,6 +1,6 @@
 import { controlFocusClassNames as e } from "../controls/control-class-names.js";
 import t from "clsx";
 //#region src/components/tabs/tab-class-names.ts
-var n = t("pf:box-border pf:flex pf:items-center pf:gap-xs pf:shrink-0 pf:font-body pf:font-medium pf:text-soft-pearl-800 pf:border-0 pf:bg-transparent pf:cursor-pointer pf:whitespace-nowrap pf:hover:text-soft-pearl-1000 pf:data-active:text-soft-pearl-1000 pf:data-disabled:text-soft-pearl-600 pf:data-disabled:cursor-not-allowed", e), r = "pf:max-w-[min(240px,100%)] pf:h-[28px] pf:px-xxs pf:py-0 pf:text-label-12", i = "pf:w-full pf:min-h-[28px] pf:px-md pf:py-sm pf:text-label-13 pf:rounded-sm pf:gap-md pf:hover:bg-soft-pearl-100 pf:data-active:bg-soft-pearl-200";
+var n = t("pf:relative pf:z-[1] pf:box-border pf:flex pf:items-center pf:gap-xs pf:shrink-0 pf:font-body pf:font-medium pf:text-soft-pearl-800 pf:border-0 pf:bg-transparent pf:cursor-pointer pf:whitespace-nowrap pf:hover:text-soft-pearl-1000 pf:data-active:text-soft-pearl-1000 pf:data-disabled:text-soft-pearl-600 pf:data-disabled:cursor-not-allowed", e), r = "pf:max-w-[min(240px,100%)] pf:h-[28px] pf:px-xxs pf:py-0 pf:text-label-12", i = "pf:w-full pf:justify-between pf:min-h-[28px] pf:px-md pf:py-sm pf:text-label-13 pf:rounded-sm pf:gap-md pf:hover:not-data-active:bg-soft-pearl-100 pf:group-not-data-indicator/tabs:data-active:bg-soft-pearl-200";
 //#endregion
 export { n as tabBaseClassNames, r as tabHorizontalClassNames, i as tabVerticalClassNames };

package/dist/components/tabular/TableEditCell.js

@@ -10,7 +10,9 @@ import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/tabular/TableEditCell.tsx
 function d(d) {
 	let f = o((e) => {
-		e?.focus();
+		e && (e.focus(), e.type === "number" && e.addEventListener("wheel", (e) => {
+			e.preventDefault();
+		}, { passive: !1 }));
 	}, []), p = c(null), m = () => {
 		requestAnimationFrame(() => {
 			let e = p.current;

package/dist/components/tabular/tabular-class-names.d.ts

@@ -2,6 +2,7 @@ export declare const tabularClassNames: {
     shell: string;
     card: string;
     scroll: string;
+    pinnedEdge: string;
     table: string;
     header: string;
     cell: string;

package/dist/components/tabular/tabular-class-names.js

@@ -3,6 +3,7 @@ var e = {
 	shell: "pf:font-body pf:text-label-13 pf:text-soft-pearl-1000 pf:min-w-0 pf:max-w-full pf:bg-background",
 	card: "pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:rounded-[12px] pf:overflow-hidden",
 	scroll: "pf:relative pf:max-w-full pf:overflow-auto pf:overscroll-contain",
+	pinnedEdge: "pf:after:pointer-events-none pf:after:absolute pf:after:inset-y-0 pf:after:-end-px pf:after:w-[2px] pf:after:bg-inherit pf:after:border-0 pf:after:border-e-[0.5px] pf:after:border-solid pf:after:border-soft-pearl-300 pf:after:content-['']",
 	table: "pf:border-separate pf:border-spacing-0 pf:w-full pf:table-fixed",
 	header: "pf:box-border pf:h-[36px] pf:px-lg pf:py-sm pf:font-medium pf:text-label-12 pf:text-soft-pearl-800 pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:border-soft-pearl-300",
 	cell: "pf:box-border pf:px-lg pf:py-[7.5px] pf:border-0 pf:border-b-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:align-middle pf:text-label-13 pf:font-normal",

package/dist/components/tabular/useCellEdit.js

@@ -52,7 +52,7 @@ function n(n, r) {
 			p.current = !0;
 		},
 		onBlurCapture: () => {
-			p.current = !1, queueMicrotask(() => {
+			p.current = !1, requestAnimationFrame(() => {
 				p.current || x();
 			});
 		}

package/dist/components/tabular/useTabularPinning.js

@@ -5,12 +5,13 @@ function r(r) {
 	return e(() => {
 		let e = i.current;
 		if (!e || typeof ResizeObserver > "u") return;
-		let t = new ResizeObserver((e) => {
-			let t = e[0];
-			o(t.contentRect.width);
-		});
-		return t.observe(e), () => {
-			t.disconnect();
+		let t = e.querySelector("table"), n = () => {
+			o(e.clientWidth), e.style.setProperty("--pf-table-height", `${String(Math.max(0, (t?.offsetHeight ?? 0) - (t?.tFoot?.offsetHeight ?? 0)))}px`);
+			let n = Math.abs(e.scrollLeft);
+			e.parentElement?.toggleAttribute("data-scroll-start", n > 1), e.parentElement?.toggleAttribute("data-scroll-end", n + e.clientWidth < e.scrollWidth - 1);
+		}, r = new ResizeObserver(n);
+		return r.observe(e), t && r.observe(t), e.addEventListener("scroll", n, { passive: !0 }), n(), () => {
+			r.disconnect(), e.removeEventListener("scroll", n);
 		};
 	}, []), {
 		ref: i,

package/dist/components/tag/Tag.js

@@ -32,7 +32,7 @@ var c = a(function({ label: a, tone: c = "neutral", leadingIcon: l, removeConfig
 				onClick: (e) => {
 					e.stopPropagation(), u.onRemove();
 				},
-				className: "pf:flex pf:shrink-0 pf:items-center pf:justify-center pf:size-[12px] pf:border-0 pf:p-0 pf:rounded-xs pf:bg-transparent pf:text-soft-pearl-700 pf:hover:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:opacity-50 pf:disabled:cursor-not-allowed",
+				className: "pf:flex pf:shrink-0 pf:items-center pf:justify-center pf:size-[12px] pf:cursor-pointer pf:border-0 pf:p-0 pf:rounded-xs pf:bg-transparent pf:text-soft-pearl-700 pf:hover:text-soft-pearl-1000 pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700 pf:disabled:opacity-50 pf:disabled:cursor-not-allowed",
 				children: /* @__PURE__ */ o(t, { size: 12 })
 			})
 		]

package/dist/components/tag-input/TagInput.js

@@ -3,81 +3,92 @@ import { XCloseIcon as e } from "../icons/XCloseIcon.js";
 import { FieldFrame as t, fieldInputClass as n, fieldShellClass as r } from "../fields/FieldFrame.js";
 import { neutralTagClass as i, tagShellClass as a } from "../tag/tag-styles.js";
 import { useTagInput as o } from "./useTagInput.js";
-import s from "clsx";
-import { forwardRef as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useDirection as d } from "@base-ui/react/direction-provider";
-import * as f from "@diceui/tags-input";
+import { useTagMotion as s } from "./useTagMotion.js";
+import c from "clsx";
+import { forwardRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useDirection as f } from "@base-ui/react/direction-provider";
+import * as p from "@diceui/tags-input";
 //#region src/components/tag-input/TagInput.tsx
-var p = c(function(c, p) {
-	let m = o(c), h = d(), g = `${m.id}-support`, _ = m.error || c.description || c.disableConfig?.isDisabled && c.disableConfig.reason, v = c.disableConfig?.isDisabled;
-	return /* @__PURE__ */ u(t, {
-		field: c,
-		id: m.id,
-		supportId: g,
-		error: m.error,
-		className: c.className,
-		children: [/* @__PURE__ */ u(f.Root, {
-			dir: h,
-			value: [...m.value],
-			onValueChange: m.change,
-			disabled: v,
-			readOnly: c.readOnly,
-			editable: c.entryConfig?.editable,
-			addOnPaste: c.entryConfig?.addOnPaste,
-			addOnTab: c.entryConfig?.addOnTab,
-			delimiter: c.entryConfig?.delimiter ?? ",",
-			max: c.entryConfig?.maxTags,
-			onValidate: (e) => !c.entryConfig?.validate?.(e),
+var m = l(function(l, m) {
+	let h = o(l), g = s(h.value), _ = f(), v = `${h.id}-support`, y = h.error || l.description || l.disableConfig?.isDisabled && l.disableConfig.reason, b = l.disableConfig?.isDisabled;
+	return /* @__PURE__ */ d(t, {
+		field: l,
+		id: h.id,
+		supportId: v,
+		error: h.error,
+		className: l.className,
+		children: [/* @__PURE__ */ d(p.Root, {
+			...g,
+			dir: _,
+			value: [...h.value],
+			onValueChange: h.change,
+			disabled: b,
+			readOnly: l.readOnly,
+			editable: l.entryConfig?.editable,
+			addOnPaste: l.entryConfig?.addOnPaste,
+			addOnTab: l.entryConfig?.addOnTab,
+			delimiter: l.entryConfig?.delimiter ?? ",",
+			max: l.entryConfig?.maxTags,
+			onValidate: (e) => !l.entryConfig?.validate?.(e),
 			onInvalid: (e) => {
-				m.input.current && !m.input.current.value && (m.input.current.value = e), m.setInvalid(m.value.includes(e) ? "This tag has already been added." : c.entryConfig?.validate?.(e) ?? "This tag could not be added. Check the tag limit.");
+				h.input.current && !h.input.current.value && (h.input.current.value = e), h.setInvalid(h.value.includes(e) ? "This tag has already been added." : l.entryConfig?.validate?.(e) ?? "This tag could not be added. Check the tag limit.");
 			},
-			"data-disabled": v || void 0,
-			"data-invalid": !!m.error || void 0,
-			className: s(r, "pf:flex-wrap pf:gap-xs pf:min-h-[32px] pf:px-md pf:py-xs"),
-			children: [m.value.map((t) => /* @__PURE__ */ u(f.Item, {
+			"data-disabled": b || void 0,
+			"data-invalid": !!h.error || void 0,
+			className: c(r, "pf:flex-wrap pf:gap-xs pf:min-h-[32px] pf:px-md pf:py-xs"),
+			children: [h.value.map((t) => /* @__PURE__ */ d(p.Item, {
 				value: t,
-				className: s(a, i, "pf:h-auto pf:min-h-[20px] pf:max-w-full pf:outline-none pf:data-highlighted:bg-blue-100 pf:data-highlighted:border-blue-700 pf:data-editing:bg-background pf:[&_input]:min-w-0 pf:[&_input]:max-w-full"),
-				children: [/* @__PURE__ */ l(f.ItemText, {
+				"data-tag-value": t,
+				className: c(a, i, "pf:h-auto pf:min-h-[20px] pf:max-w-full pf:outline-none pf:data-highlighted:bg-blue-100 pf:data-highlighted:border-blue-700 pf:data-editing:bg-background pf:[&_input]:min-w-0 pf:[&_input]:max-w-full"),
+				children: [/* @__PURE__ */ u(p.ItemText, {
 					className: "pf:min-w-0 pf:wrap-anywhere",
 					children: t
-				}), !c.readOnly && /* @__PURE__ */ l(f.ItemDelete, {
+				}), !l.readOnly && /* @__PURE__ */ u(p.ItemDelete, {
 					"aria-label": `Remove ${t}`,
 					"aria-labelledby": void 0,
-					className: "pf:flex pf:size-[16px] pf:shrink-0 pf:items-center pf:justify-center pf:border-0 pf:p-0 pf:bg-transparent pf:text-soft-pearl-800 pf:rounded-xs pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
-					children: /* @__PURE__ */ l(e, { size: 12 })
+					onClick: (e) => {
+						e.stopPropagation();
+					},
+					className: "pf:cursor-pointer pf:disabled:cursor-not-allowed pf:flex pf:size-[16px] pf:shrink-0 pf:items-center pf:justify-center pf:border-0 pf:p-0 pf:bg-transparent pf:text-soft-pearl-800 pf:rounded-xs pf:focus-visible:outline-2 pf:focus-visible:outline-blue-700",
+					children: /* @__PURE__ */ u(e, { size: 12 })
 				})]
-			}, t)), /* @__PURE__ */ l(f.Input, {
-				id: m.id,
-				form: c.form,
+			}, t)), /* @__PURE__ */ u(p.Input, {
+				id: h.id,
+				form: l.form,
 				ref: (e) => {
-					m.input.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+					h.input.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
 				},
-				"aria-label": c["aria-label"],
+				"aria-label": l["aria-label"],
 				"aria-labelledby": void 0,
-				"aria-describedby": _ ? g : void 0,
-				"aria-invalid": !!m.error || void 0,
-				"aria-required": c.required,
-				placeholder: c.placeholder ?? "Add a tag…",
-				className: s(n, "pf:flex-1 pf:basis-[100px] pf:h-[24px] pf:border-0 pf:p-0 pf:text-label-13"),
+				"aria-describedby": y ? v : void 0,
+				"aria-invalid": !!h.error || void 0,
+				"aria-required": l.required,
+				placeholder: l.placeholder ?? "Add a tag…",
+				className: c(n, "pf:flex-1 pf:basis-[100px] pf:h-[24px] pf:border-0 pf:p-0 pf:text-label-13"),
 				onKeyDown: (e) => {
-					e.nativeEvent.isComposing && e.key === "Enter" && e.preventDefault();
+					if (e.nativeEvent.isComposing && e.key === "Enter") e.preventDefault();
+					else if (e.key === "Enter" && !l.entryConfig?.editable && !l.readOnly && !b) {
+						let t = (e.currentTarget.parentElement?.querySelector("[data-highlighted]"))?.querySelector("button");
+						t && (e.preventDefault(), t.click());
+					}
 				},
 				onChange: (e) => {
-					e.nativeEvent instanceof InputEvent && e.nativeEvent.isComposing && e.preventDefault(), m.setInvalid(void 0);
+					e.nativeEvent instanceof InputEvent && e.nativeEvent.isComposing && e.preventDefault(), h.setInvalid(void 0);
 				},
 				onBlur: (e) => {
-					m.setTouched(!0), c.onBlur?.(e);
+					h.setTouched(!0), l.onBlur?.(e);
 				}
 			})]
-		}), c.name && m.value.map((e) => /* @__PURE__ */ l("input", {
+		}), l.name && h.value.map((e) => /* @__PURE__ */ u("input", {
 			type: "hidden",
-			name: c.name,
-			form: c.form,
+			name: l.name,
+			form: l.form,
 			value: e,
-			disabled: v
+			"data-tag-value": e,
+			disabled: b
 		}, e))]
 	});
 });
 //#endregion
-export { p as TagInput };
+export { m as TagInput };

package/dist/components/tag-input/useTagMotion.d.ts

@@ -0,0 +1,6 @@
+/** Pointer removals let remaining tags settle; keyboard editing stays immediate. */
+export declare const useTagMotion: (values: readonly string[]) => {
+    ref: import("react").RefObject<HTMLDivElement>;
+    onPointerDownCapture: () => void;
+    onKeyDownCapture: () => void;
+};

package/dist/components/tag-input/useTagMotion.js

@@ -0,0 +1,36 @@
+import { useLayoutEffect as e, useRef as t } from "react";
+//#region src/components/tag-input/useTagMotion.ts
+var n = (n) => {
+	let r = t(null), i = t(/* @__PURE__ */ new Map()), a = t([]), o = () => {
+		a.current.forEach((e) => {
+			e.cancel();
+		}), a.current = [], i.current.clear();
+	};
+	return e(() => {
+		r.current?.querySelectorAll("[data-tag-value]").forEach((e) => {
+			let t = i.current.get(e.dataset.tagValue ?? "");
+			if (!t || typeof e.animate != "function") return;
+			let n = e.getBoundingClientRect();
+			(t.x !== n.x || t.y !== n.y) && a.current.push(e.animate([{ transform: `translate(${String(t.x - n.x)}px, ${String(t.y - n.y)}px)` }, { transform: "none" }], {
+				duration: 160,
+				easing: "cubic-bezier(0.23, 1, 0.32, 1)"
+			}));
+		}), i.current.clear();
+	}, [n]), e(() => () => {
+		a.current.forEach((e) => {
+			e.cancel();
+		});
+	}, []), {
+		ref: r,
+		onPointerDownCapture: () => {
+			if (typeof matchMedia != "function" || matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+			let e = /* @__PURE__ */ new Map();
+			r.current?.querySelectorAll("[data-tag-value]").forEach((t) => {
+				e.set(t.dataset.tagValue ?? "", t.getBoundingClientRect());
+			}), o(), i.current = e;
+		},
+		onKeyDownCapture: o
+	};
+};
+//#endregion
+export { n as useTagMotion };

package/dist/components/text-area/TextArea.js

@@ -12,7 +12,8 @@ var u = new Intl.Segmenter(void 0, { granularity: "grapheme" }), d = o(function(
 		let e = f.controlRef.current;
 		if (!e || j !== "auto") return;
 		let t = () => {
-			e.style.height = "auto", e.style.height = `${String(Math.max(M, Math.min(e.scrollHeight + 2, N)))}px`;
+			let t = e.offsetHeight - e.clientHeight;
+			e.style.height = "0px", e.style.height = `${String(Math.max(M, Math.min(e.scrollHeight + t, N)))}px`;
 		};
 		t();
 		let n = e.getBoundingClientRect().width, r = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(() => {

package/dist/components/thread/ThreadReply.js

@@ -27,12 +27,15 @@ function u({ label: u, identity: d, value: f, onValueChange: p, onSubmit: m, kin
 				children: S
 			}),
 			/* @__PURE__ */ l("div", {
-				className: "pf:flex pf:flex-wrap pf:items-center pf:gap-md pf:ps-xl pf:pe-md pf:py-md",
+				className: "pf:flex pf:flex-wrap pf:items-start pf:gap-md pf:ps-xl pf:pe-md pf:py-md",
 				children: [
-					/* @__PURE__ */ c(r, {
-						identity: d,
-						size: 20,
-						decorative: !0
+					/* @__PURE__ */ c("span", {
+						className: "pf:pt-xs pf:shrink-0",
+						children: /* @__PURE__ */ c(r, {
+							identity: d,
+							size: 20,
+							decorative: !0
+						})
 					}),
 					/* @__PURE__ */ c(o, {
 						label: u,
@@ -40,7 +43,7 @@ function u({ label: u, identity: d, value: f, onValueChange: p, onSubmit: m, kin
 						variant: "plain",
 						resizeConfig: {
 							mode: "auto",
-							minHeight: 24,
+							minHeight: 28,
 							maxHeight: 160
 						},
 						placeholder: g,
@@ -51,7 +54,7 @@ function u({ label: u, identity: d, value: f, onValueChange: p, onSubmit: m, kin
 						onKeyDown: (e) => {
 							e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), T || m(f));
 						},
-						className: "pf:flex-1 pf:min-w-[80px]"
+						className: "pf:flex-1 pf:min-w-[80px] pf:[&_textarea]:py-xs"
 					}),
 					/* @__PURE__ */ l("div", {
 						className: "pf:flex pf:items-center pf:gap-xs",

package/dist/components/tool-call/ToolCall.js

@@ -10,10 +10,10 @@ import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/tool-call/ToolCall.tsx
 var l = ({ name: l, status: u, label: d, meta: f, description: p, error: m, input: h, output: g, disclosureConfig: _, className: v }) => {
 	let y = t(!1, _), b = d ?? i.getLabel(l, u), x = /* @__PURE__ */ c("span", {
-		className: "pf:flex pf:min-w-0 pf:items-center pf:gap-sm",
+		className: "pf:flex pf:min-w-0 pf:items-start pf:gap-sm",
 		children: [/* @__PURE__ */ s("span", {
 			"aria-hidden": "true",
-			className: "pf:shrink-0",
+			className: "pf:flex pf:h-[16px] pf:items-center pf:shrink-0",
 			children: /* @__PURE__ */ s(r, {
 				size: 12,
 				tone: "inherit"