@stll/ui 0.67.0 → 0.69.0

package/dist/components/list.d.ts

@@ -1,4 +1,5 @@
 import * as React$1 from "react";
+import { TruncatedTextLines } from "./truncated-text.js";
 import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
 /**
@@ -39,15 +40,20 @@ declare const listItemMediaVariants: (props?: ({
 /** Fixed 32px tile for an icon, logo or initial. */
 declare const ListItemMedia: ({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof listItemMediaVariants>) => React$1.JSX.Element;
 declare const ListItemContent: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
-declare const ListItemTitle: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
+declare const listItemTitleVariants: (props?: ({
+  variant?: "name" | "statement" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const ListItemTitle: ({ className, variant, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof listItemTitleVariants>) => React$1.JSX.Element;
 declare const listItemDescriptionVariants: (props?: ({
-  variant?: "code" | "text" | null | undefined;
+  variant?: "code" | "paragraph" | "text" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
- * Secondary line. Pass `line-clamp-2` when two lines are genuinely needed;
- * never `whitespace-nowrap`.
+ * Secondary line, one line by default. Use the `paragraph` variant (two
+ * lines) or `lines` when more is genuinely needed; never `whitespace-nowrap`.
  */
-declare const ListItemDescription: ({ className, variant, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof listItemDescriptionVariants>) => React$1.JSX.Element;
+declare const ListItemDescription: ({ className, variant, lines, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof listItemDescriptionVariants> & {
+  lines?: TruncatedTextLines;
+}) => React$1.JSX.Element;
 declare const ListItemActions: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 /** Single-line empty row inside a `List`. Phrase it as the next action. */
 declare const ListEmpty: ({ className, ...props }: React$1.ComponentProps<"li">) => React$1.JSX.Element;

package/dist/components/list.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/utils.js";
 import { AnimatedCount } from "./animated-count.js";
+import { TruncatedText } from "./truncated-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -106,29 +107,47 @@ const ListItemContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div",
 	"data-slot": "list-item-content",
 	...props
 });
-const ListItemTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
-	className: cn("text-foreground truncate text-sm font-medium", className),
+const listItemTitleVariants = cva("text-foreground text-sm font-medium", {
+	defaultVariants: { variant: "name" },
+	variants: { variant: {
+		/** A name: one line, cut at the end. */
+		name: "",
+		/** A statement a reader must see whole to judge (a proposed fact): up
+		*  to two lines, then cut. */
+		statement: "text-pretty wrap-break-word"
+	} }
+});
+const LIST_ITEM_TITLE_LINES = {
+	name: 1,
+	statement: 2
+};
+const ListItemTitle = ({ className, variant, ...props }) => /* @__PURE__ */ jsx(TruncatedText, {
+	className: cn(listItemTitleVariants({ variant }), className),
 	"data-slot": "list-item-title",
 	dir: "auto",
+	lines: LIST_ITEM_TITLE_LINES[variant ?? "name"],
 	...props
 });
 const listItemDescriptionVariants = cva("text-muted-foreground text-xs", {
 	defaultVariants: { variant: "text" },
 	variants: { variant: {
-		/** Prose, clamped to one line so long provider copy cannot widen the row. */
-		text: "line-clamp-1 wrap-break-word",
-		/** A URL or command: monospace, left-to-right, truncated at the end. */
-		code: "truncate font-mono"
+		/** Prose, cut to one line so long provider copy cannot widen the row. */
+		text: "wrap-break-word",
+		/** Prose that genuinely needs a second line (a reason, an error). */
+		paragraph: "wrap-break-word",
+		/** A URL or command: monospace, left-to-right, cut at the end. */
+		code: "font-mono"
 	} }
 });
 /**
-* Secondary line. Pass `line-clamp-2` when two lines are genuinely needed;
-* never `whitespace-nowrap`.
+* Secondary line, one line by default. Use the `paragraph` variant (two
+* lines) or `lines` when more is genuinely needed; never `whitespace-nowrap`.
 */
-const ListItemDescription = ({ className, variant, ...props }) => /* @__PURE__ */ jsx("span", {
+const ListItemDescription = ({ className, variant, lines, ...props }) => /* @__PURE__ */ jsx(TruncatedText, {
 	className: cn(listItemDescriptionVariants({ variant }), className),
 	"data-slot": "list-item-description",
 	dir: variant === "code" ? "ltr" : "auto",
+	lines: lines ?? (variant === "paragraph" ? 2 : 1),
 	...props
 });
 const ListItemActions = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {

package/dist/components/loader.js

@@ -1,6 +1,7 @@
 import { LoaderCircleIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { StellaMark } from "./stella-mark.js";
+import { TruncatedText } from "./truncated-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/loader.tsx
 /**
@@ -41,8 +42,9 @@ const LoaderState = ({ label, detail, hint, className }) => /* @__PURE__ */ jsxs
 				className: "text-foreground text-sm font-medium",
 				children: label
 			}),
-			detail !== void 0 && /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground truncate text-xs tabular-nums",
+			detail !== void 0 && /* @__PURE__ */ jsx(TruncatedText, {
+				className: "text-muted-foreground text-xs tabular-nums",
+				render: /* @__PURE__ */ jsx("p", {}),
 				children: detail
 			}),
 			hint !== void 0 && /* @__PURE__ */ jsx("p", {

package/dist/components/outline-rail.js

@@ -7,6 +7,7 @@ import { DirectionalIcon } from "./directional-icon.js";
 import { reconcileOutlineItems, retainOutlineIdSet } from "./outline-rail.logic.js";
 import { ScrollArea } from "./scroll-area.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { TruncatedText } from "./truncated-text.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Temporal } from "temporal-polyfill/full";
@@ -168,14 +169,15 @@ const OutlineRowView = ({ item, hasChildren, isCollapsed, isActive, isHovered, i
 				onClick: () => onJump(item.id),
 				type: "button"
 			}),
-			children: item.title === void 0 ? /* @__PURE__ */ jsx("span", {
-				className: "min-w-0 truncate",
+			children: item.title === void 0 ? /* @__PURE__ */ jsx(TruncatedText, {
+				hint: false,
 				children: item.label
 			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 				className: "shrink-0 font-medium",
 				children: item.label
-			}), /* @__PURE__ */ jsx("span", {
-				className: "min-w-0 truncate font-normal",
+			}), /* @__PURE__ */ jsx(TruncatedText, {
+				className: "font-normal",
+				hint: false,
 				children: item.title
 			})] })
 		}), /* @__PURE__ */ jsx(TooltipPopup, { children: outlineEntryText(item) })] }),

package/dist/components/run-state-mark.d.ts

@@ -0,0 +1,8 @@
+import { RunMarkSize, RunMarkState, RunStateMarkContract } from "./run-state-mark.shared.js";
+/**
+ * Where one run of work stands, as a glyph: a bold "!" when it waits on the
+ * reader, a turning ring while it works (./run-state-mark.shared.ts). Its
+ * meaning is named by the element around it.
+ */
+export declare const RunStateMark: ({ size, state }: RunStateMarkContract) => import("react").JSX.Element;
+export type { RunMarkSize, RunMarkState };

package/dist/components/run-state-mark.js

@@ -0,0 +1,30 @@
+import { cn } from "../lib/utils.js";
+import { RUN_MARK_SIZES, RUN_MARK_TONES, RUN_STATE_MARKS } from "./run-state-mark.shared.js";
+import { StatusMark } from "./status-mark.js";
+import { jsx } from "react/jsx-runtime";
+import { panic } from "better-result";
+// src/components/run-state-mark.tsx
+/**
+* Where one run of work stands, as a glyph: a bold "!" when it waits on the
+* reader, a turning ring while it works (./run-state-mark.shared.ts). Its
+* meaning is named by the element around it.
+*/
+const RunStateMark = ({ size = "row", state }) => {
+	const { glyph, tone } = RUN_STATE_MARKS[state];
+	const { glyphClass, markClass } = RUN_MARK_SIZES[size];
+	const { textClass } = RUN_MARK_TONES[tone];
+	switch (glyph) {
+		case "attention": return /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: cn(textClass, glyphClass, "leading-none font-bold"),
+			"data-slot": "run-state-mark",
+			children: "!"
+		});
+		case "running": return /* @__PURE__ */ jsx(StatusMark, {
+			className: cn(textClass, markClass),
+			status: "running"
+		});
+		default: return panic("Unhandled run mark glyph");
+	}
+};
+export { RunStateMark };

package/dist/components/run-state-mark.native.d.ts

@@ -0,0 +1,9 @@
+import { RunMarkSize, RunMarkState, RunStateMarkContract } from "./run-state-mark.shared.js";
+/**
+ * The web's `RunStateMark` (./run-state-mark.tsx) on a phone: the bold "!"
+ * in the embedded bold face, or the web `StatusMark`'s running ring drawn
+ * with react-native-svg. Hidden from assistive technology, as on the web:
+ * the row or heading around it names the state.
+ */
+export declare const RunStateMark: ({ size, state }: RunStateMarkContract) => import("react").JSX.Element;
+export type { RunMarkSize, RunMarkState };

package/dist/components/run-state-mark.native.js

@@ -0,0 +1,98 @@
+import { RUN_MARK_SIZES, RUN_MARK_TONES, RUN_STATE_MARKS } from "./run-state-mark.shared.js";
+import { STATUS_MARK_RING_RADIUS, STATUS_MARK_RUNNING_ARC, STATUS_MARK_SPIN_MS, STATUS_MARK_STROKE_WIDTH, STATUS_MARK_TRACK_OPACITY, STATUS_MARK_VIEWBOX } from "./status-mark.shared.js";
+import { sansFontFamily } from "./text.native.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { panic } from "better-result";
+import { Animated, Easing, Text } from "react-native";
+import Svg, { Circle } from "react-native-svg";
+import { useCSSVariable } from "uniwind";
+// src/components/run-state-mark.native.tsx
+/**
+* The web's `RunStateMark` (./run-state-mark.tsx) on a phone: the bold "!"
+* in the embedded bold face, or the web `StatusMark`'s running ring drawn
+* with react-native-svg. Hidden from assistive technology, as on the web:
+* the row or heading around it names the state.
+*/
+const RunStateMark = ({ size = "row", state }) => {
+	const { glyph, tone } = RUN_STATE_MARKS[state];
+	const { glyphClass, px } = RUN_MARK_SIZES[size];
+	const { textClass, variable } = RUN_MARK_TONES[tone];
+	switch (glyph) {
+		case "attention": return /* @__PURE__ */ jsx(Text, {
+			accessibilityElementsHidden: true,
+			className: `${textClass} ${glyphClass} leading-none`,
+			importantForAccessibility: "no-hide-descendants",
+			style: { fontFamily: sansFontFamily("bold") },
+			children: "!"
+		});
+		case "running": return /* @__PURE__ */ jsx(RunningRing, {
+			colorVariable: variable,
+			px
+		});
+		default: return panic("Unhandled run mark glyph");
+	}
+};
+const CENTRE = 8;
+const CIRCUMFERENCE = 2 * Math.PI * STATUS_MARK_RING_RADIUS;
+const ARC_DASHES = [CIRCUMFERENCE * STATUS_MARK_RUNNING_ARC, CIRCUMFERENCE * (1 - STATUS_MARK_RUNNING_ARC)];
+/**
+* The arc turns on its faint track. It keeps turning under Reduce Motion, as
+* the platform's own activity indicator does; the ring is too small to move
+* anything else on screen.
+*/
+const RunningRing = ({ colorVariable, px }) => {
+	const resolved = useCSSVariable(colorVariable);
+	const color = typeof resolved === "string" ? resolved : "currentColor";
+	const [turn] = useState(() => new Animated.Value(0));
+	useEffect(() => {
+		const spin = Animated.loop(Animated.timing(turn, {
+			duration: STATUS_MARK_SPIN_MS,
+			easing: (progress) => Easing.linear(progress),
+			isInteraction: false,
+			toValue: 1,
+			useNativeDriver: true
+		}));
+		spin.start();
+		return () => {
+			spin.stop();
+		};
+	}, [turn]);
+	const rotate = turn.interpolate({
+		inputRange: [0, 1],
+		outputRange: ["0deg", "360deg"]
+	});
+	return /* @__PURE__ */ jsx(Animated.View, {
+		accessibilityElementsHidden: true,
+		importantForAccessibility: "no-hide-descendants",
+		style: {
+			height: px,
+			transform: [{ rotate }],
+			width: px
+		},
+		children: /* @__PURE__ */ jsxs(Svg, {
+			fill: "none",
+			height: px,
+			viewBox: STATUS_MARK_VIEWBOX,
+			width: px,
+			children: [/* @__PURE__ */ jsx(Circle, {
+				cx: CENTRE,
+				cy: CENTRE,
+				opacity: STATUS_MARK_TRACK_OPACITY,
+				r: STATUS_MARK_RING_RADIUS,
+				stroke: color,
+				strokeWidth: STATUS_MARK_STROKE_WIDTH
+			}), /* @__PURE__ */ jsx(Circle, {
+				cx: CENTRE,
+				cy: CENTRE,
+				r: STATUS_MARK_RING_RADIUS,
+				stroke: color,
+				strokeDasharray: ARC_DASHES,
+				strokeLinecap: "round",
+				strokeWidth: STATUS_MARK_STROKE_WIDTH,
+				transform: `rotate(-90 ${CENTRE} ${CENTRE})`
+			})]
+		})
+	});
+};
+export { RunStateMark };

package/dist/components/run-state-mark.shared.d.ts

@@ -0,0 +1,53 @@
+/** The theme colours a run mark takes, as the classes and variables naming them. */
+export declare const RUN_MARK_TONES: {
+  readonly muted: {
+    readonly textClass: "text-muted-foreground";
+    readonly variable: "--color-muted-foreground";
+  };
+  readonly warning: {
+    readonly textClass: "text-warning-foreground";
+    readonly variable: "--color-warning-foreground";
+  };
+};
+/**
+ * Each run state's glyph and tone. Its keys are the states the API reports
+ * (`CHAT_ACTIVE_RUN_STATE` in `@stll/api-contract/chat`, which this published
+ * package cannot import). A surface passes the state it read, so a state the
+ * API adds stops compiling at every surface until it has a mark here.
+ */
+export declare const RUN_STATE_MARKS: {
+  readonly "needs-you": {
+    readonly glyph: "attention";
+    readonly tone: "warning";
+  };
+  readonly working: {
+    readonly glyph: "running";
+    readonly tone: "muted";
+  };
+};
+export type RunMarkState = keyof typeof RUN_STATE_MARKS;
+/**
+ * `row` sits in a line of text, `badge` on a small icon. The pixel size is a
+ * phone's; the web sets the same size with the classes.
+ */
+export declare const RUN_MARK_SIZES: {
+  readonly row: {
+    readonly glyphClass: "text-xs";
+    readonly markClass: "size-3";
+    readonly px: 12;
+  };
+  readonly badge: {
+    readonly glyphClass: "text-3xs";
+    readonly markClass: "size-2.5";
+    readonly px: 10;
+  };
+};
+export type RunMarkSize = keyof typeof RUN_MARK_SIZES;
+/**
+ * The props every run mark renderer accepts. The mark is decorative: the
+ * element around it names the state for assistive technology.
+ */
+export type RunStateMarkContract = {
+  state: RunMarkState;
+  size?: RunMarkSize;
+};

package/dist/components/run-state-mark.shared.js

@@ -0,0 +1,45 @@
+// src/components/run-state-mark.shared.ts
+/** The theme colours a run mark takes, as the classes and variables naming them. */
+const RUN_MARK_TONES = {
+	muted: {
+		textClass: "text-muted-foreground",
+		variable: "--color-muted-foreground"
+	},
+	warning: {
+		textClass: "text-warning-foreground",
+		variable: "--color-warning-foreground"
+	}
+};
+/**
+* Each run state's glyph and tone. Its keys are the states the API reports
+* (`CHAT_ACTIVE_RUN_STATE` in `@stll/api-contract/chat`, which this published
+* package cannot import). A surface passes the state it read, so a state the
+* API adds stops compiling at every surface until it has a mark here.
+*/
+const RUN_STATE_MARKS = {
+	"needs-you": {
+		glyph: "attention",
+		tone: "warning"
+	},
+	working: {
+		glyph: "running",
+		tone: "muted"
+	}
+};
+/**
+* `row` sits in a line of text, `badge` on a small icon. The pixel size is a
+* phone's; the web sets the same size with the classes.
+*/
+const RUN_MARK_SIZES = {
+	row: {
+		glyphClass: "text-xs",
+		markClass: "size-3",
+		px: 12
+	},
+	badge: {
+		glyphClass: "text-3xs",
+		markClass: "size-2.5",
+		px: 10
+	}
+};
+export { RUN_MARK_SIZES, RUN_MARK_TONES, RUN_STATE_MARKS };

package/dist/components/status-mark.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/utils.js";
+import { STATUS_MARK_RING_RADIUS, STATUS_MARK_STROKE_WIDTH, STATUS_MARK_VIEWBOX } from "./status-mark.shared.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/status-mark.tsx
-const RING_RADIUS = 6.25;
 const CHECK_PATH = "M5.4 8.3 7.2 10.1 10.6 6.3";
 const CROSS_PATH = "M6.1 6.1 9.9 9.9M9.9 6.1 6.1 9.9";
 const on = {
@@ -26,8 +26,8 @@ const StatusMark = ({ className, label, status }) => /* @__PURE__ */ jsxs("svg",
 	stroke: "currentColor",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
-	strokeWidth: 1.5,
-	viewBox: "0 0 16 16",
+	strokeWidth: STATUS_MARK_STROKE_WIDTH,
+	viewBox: STATUS_MARK_VIEWBOX,
 	...label === void 0 ? { "aria-hidden": true } : {
 		"aria-label": label,
 		role: "img"
@@ -38,14 +38,14 @@ const StatusMark = ({ className, label, status }) => /* @__PURE__ */ jsxs("svg",
 			cx: "8",
 			cy: "8",
 			fill: "currentColor",
-			r: RING_RADIUS,
+			r: STATUS_MARK_RING_RADIUS,
 			stroke: "none"
 		}),
 		/* @__PURE__ */ jsx("circle", {
 			className: "opacity-0 transition-opacity duration-200 group-data-[status=running]/status:opacity-20",
 			cx: "8",
 			cy: "8",
-			r: RING_RADIUS
+			r: STATUS_MARK_RING_RADIUS
 		}),
 		/* @__PURE__ */ jsx("g", {
 			className: SPIN_CLASS,
@@ -54,7 +54,7 @@ const StatusMark = ({ className, label, status }) => /* @__PURE__ */ jsxs("svg",
 				cx: "8",
 				cy: "8",
 				pathLength: 100,
-				r: RING_RADIUS,
+				r: STATUS_MARK_RING_RADIUS,
 				transform: "rotate(-90 8 8)"
 			})
 		}),

package/dist/components/status-mark.shared.d.ts

@@ -0,0 +1,12 @@
+export declare const STATUS_MARK_VIEWBOX = "0 0 16 16";
+export declare const STATUS_MARK_STROKE_WIDTH = 1.5;
+export declare const STATUS_MARK_RING_RADIUS = 6.25;
+/**
+ * The running arc's share of the ring and the faint track it runs on. The
+ * web spells them as utilities (`[stroke-dasharray:30_70]`, `opacity-20`),
+ * which must stay literal for Tailwind to find them.
+ */
+export declare const STATUS_MARK_RUNNING_ARC = 0.3;
+export declare const STATUS_MARK_TRACK_OPACITY = 0.2;
+/** One turn of the running arc: `--animate-status-spin` in the theme. */
+export declare const STATUS_MARK_SPIN_MS = 1100;

package/dist/components/status-mark.shared.js

@@ -0,0 +1,14 @@
+// src/components/status-mark.shared.ts
+const STATUS_MARK_VIEWBOX = "0 0 16 16";
+const STATUS_MARK_STROKE_WIDTH = 1.5;
+const STATUS_MARK_RING_RADIUS = 6.25;
+/**
+* The running arc's share of the ring and the faint track it runs on. The
+* web spells them as utilities (`[stroke-dasharray:30_70]`, `opacity-20`),
+* which must stay literal for Tailwind to find them.
+*/
+const STATUS_MARK_RUNNING_ARC = .3;
+const STATUS_MARK_TRACK_OPACITY = .2;
+/** One turn of the running arc: `--animate-status-spin` in the theme. */
+const STATUS_MARK_SPIN_MS = 1100;
+export { STATUS_MARK_RING_RADIUS, STATUS_MARK_RUNNING_ARC, STATUS_MARK_SPIN_MS, STATUS_MARK_STROKE_WIDTH, STATUS_MARK_TRACK_OPACITY, STATUS_MARK_VIEWBOX };

package/dist/components/table.d.ts

@@ -90,7 +90,7 @@ type TableCellProps = Omit<React$1.ComponentProps<"td">, "align"> & {
    */
   flush?: boolean;
 };
-declare const TableCell: ({ className, align, tone, numeric, truncate, flush, ...props }: TableCellProps) => React$1.JSX.Element;
+declare const TableCell: ({ className, align, tone, numeric, truncate, flush, children, ...props }: TableCellProps) => React$1.JSX.Element;
 type SortDirection = "asc" | "desc" | null;
 type SortableHeadProps = Omit<TableHeadProps, "onClick"> & {
   sortDirection?: SortDirection;

package/dist/components/table.js

@@ -1,6 +1,7 @@
 import { ArrowDownIcon, ArrowUpIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
+import { TruncatedText } from "./truncated-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/table.tsx
 const Table = ({ className, density = "default", inset = "default", scroll = "self", ...props }) => {
@@ -49,12 +50,20 @@ const TableHead = ({ className, align, numeric = false, ...props }) => /* @__PUR
 	"data-slot": "table-head",
 	...props
 });
-const TableCell = ({ className, align, tone = "default", numeric = false, truncate = false, flush = false, ...props }) => {
+const TableCell = ({ className, align, tone = "default", numeric = false, truncate = false, flush = false, children, ...props }) => {
 	const resolvedAlign = resolveTableAlign(align, numeric);
+	const cellClassName = cn("align-middle leading-none whitespace-nowrap has-[[role=checkbox]]:pe-0", flush ? "p-0" : "p-2.5 in-data-[density=compact]:px-0 in-data-[density=compact]:py-1.5 in-data-[inset=card]:px-4 in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)]", "in-data-[density=compact]:leading-6 in-data-[density=compact]:whitespace-normal", resolvedAlign !== void 0 && TABLE_ALIGN_CLASS[resolvedAlign], tone === "muted" && "text-muted-foreground", numeric && "tabular-nums", className);
+	if (truncate) return /* @__PURE__ */ jsx(TruncatedText, {
+		className: cn("table-cell", cellClassName),
+		"data-slot": "table-cell",
+		render: /* @__PURE__ */ jsx("td", { ...props }),
+		children
+	});
 	return /* @__PURE__ */ jsx("td", {
-		className: cn("align-middle leading-none whitespace-nowrap has-[[role=checkbox]]:pe-0", flush ? "p-0" : "p-2.5 in-data-[density=compact]:px-0 in-data-[density=compact]:py-1.5 in-data-[inset=card]:px-4 in-data-[slot=frame]:first:p-[calc(--spacing(2.5)-1px)] in-data-[slot=frame]:last:p-[calc(--spacing(2.5)-1px)]", "in-data-[density=compact]:leading-6 in-data-[density=compact]:whitespace-normal", resolvedAlign !== void 0 && TABLE_ALIGN_CLASS[resolvedAlign], tone === "muted" && "text-muted-foreground", numeric && "tabular-nums", truncate && "truncate", className),
+		className: cellClassName,
 		"data-slot": "table-cell",
-		...props
+		...props,
+		children
 	});
 };
 /**
@@ -82,14 +91,11 @@ const SortableHead = ({ children, sortDirection = null, onSort, trailing, classN
 		children: /* @__PURE__ */ jsxs("span", {
 			className: "inline-flex items-center gap-1",
 			children: [/* @__PURE__ */ jsxs(Button, {
-				className: cn("min-w-0 gap-1", endAligned ? "-me-3 flex-row-reverse" : "-ms-3"),
+				className: cn("min-w-0 gap-1 px-2.5", endAligned ? "-me-2.5 flex-row-reverse" : "-ms-2.5"),
 				onClick: onSort,
 				type: "button",
 				variant: "muted",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "truncate",
-					children
-				}), /* @__PURE__ */ jsx("span", {
+				children: [/* @__PURE__ */ jsx(TruncatedText, { children }), /* @__PURE__ */ jsx("span", {
 					"aria-hidden": true,
 					className: "inline-flex w-3 shrink-0 justify-center",
 					children: sortIcon

package/dist/components/text.native.d.ts

@@ -1,5 +1,7 @@
-import { TextContract, TextVariant } from "./text.shared.js";
+import { TextContract, TextFace, TextVariant } from "./text.shared.js";
 import { TextProps } from "react-native";
+/** The embedded face of one weight, for a glyph set outside every role. */
+export declare const sansFontFamily: (weight: TextFace["weight"]) => string;
 /** The font a role is set in, for a native control that draws its own text. */
 export declare const textFontFamily: (variant: TextContract["variant"]) => string;
 /**

package/dist/components/text.native.js

@@ -22,8 +22,10 @@ const NOT_A_COLOUR = /^text-(?:xs|sm|base|lg|\d*xl|\[|left|center|right|justify|
 * whatever order they were written in.
 */
 const withForeground = (classes) => classes.split(/\s+/u).some((name) => name.startsWith("text-") && !NOT_A_COLOUR.test(name)) ? classes : `text-foreground ${classes}`;
+/** The embedded face of one weight, for a glyph set outside every role. */
+const sansFontFamily = (weight) => SANS_FACES[weight];
 /** The font a role is set in, for a native control that draws its own text. */
-const textFontFamily = (variant) => SANS_FACES[TEXT_VARIANT_FACES[variant ?? "body"].weight];
+const textFontFamily = (variant) => sansFontFamily(TEXT_VARIANT_FACES[variant ?? "body"].weight);
 /**
 * Text in one of the design system's roles (./text.shared.ts), as the web
 * renderer (./text.tsx) sets it: the same size and colour, in the role's
@@ -34,4 +36,4 @@ const Text = ({ className, style, variant = "body", ...props }) => /* @__PURE__
 	style: [{ fontFamily: textFontFamily(variant) }, style],
 	...props
 });
-export { Text, textFontFamily };
+export { Text, sansFontFamily, textFontFamily };

package/dist/components/truncated-text.d.ts

@@ -14,10 +14,21 @@ import { useRender } from "@base-ui/react/use-render";
  * The tap popover stays out of the way when the text sits inside a link,
  * button or other control: the tap belongs to that control.
  */
-declare const TruncatedText: ({ children, className, lines, render, side, tooltip, ...props }: TruncatedTextProps) => React$1.JSX.Element;
-/** How many lines the text may take before it is cut. */
-type TruncatedTextLines = 1 | 2 | 3;
+declare const TruncatedText: ({ children, className, hint, lines, render, side, tooltip, ...props }: TruncatedTextProps) => React$1.JSX.Element;
+/**
+ * How many lines the text may take before it is cut; `"none"` lets it take
+ * as many as it needs, for text that is cut only in some states (collapsed,
+ * compact) and shown whole in the others.
+ */
+type TruncatedTextLines = 1 | 2 | 3 | 4 | 5 | 6 | 8 | "none";
 type TruncatedTextProps = useRender.ComponentProps<"span"> & {
+  /**
+   * Whether cut text shows its whole self on hover, focus or tap. Pass false
+   * only where something around the text already shows it (a tooltip on the
+   * row, a title the text sits in); the text stays inside its container
+   * either way.
+   */
+  hint?: boolean;
   lines?: TruncatedTextLines;
   side?: React$1.ComponentProps<typeof TooltipPopup>["side"];
   /**

package/dist/components/truncated-text.js

@@ -21,7 +21,7 @@ import { useRender } from "@base-ui/react/use-render";
 * The tap popover stays out of the way when the text sits inside a link,
 * button or other control: the tap belongs to that control.
 */
-const TruncatedText = ({ children, className, lines = 1, render, side = "top", tooltip, ...props }) => {
+const TruncatedText = ({ children, className, hint = true, lines = 1, render, side = "top", tooltip, ...props }) => {
 	const ref = React$1.useRef(null);
 	const [surface, setSurface] = React$1.useState(null);
 	const content = tooltip ?? children;
@@ -31,7 +31,7 @@ const TruncatedText = ({ children, className, lines = 1, render, side = "top", t
 			return;
 		}
 		const element = ref.current;
-		if (element === null || LAST_POINTER_TYPE.get(element) === "touch") return;
+		if (element === null || LAST_POINTER_TYPE.get(element) === "touch" || isInsideTooltipTrigger(element)) return;
 		if (isTextOverflowing(element)) setSurface("tooltip");
 	};
 	const handleClick = (event) => {
@@ -49,6 +49,7 @@ const TruncatedText = ({ children, className, lines = 1, render, side = "top", t
 		ref,
 		render
 	});
+	if (!hint) return text;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Tooltip, {
 		onOpenChange: handleTooltipOpenChange,
 		open: surface === "tooltip",
@@ -92,10 +93,20 @@ function recordPointerType(event) {
 function forgetPointerType(event) {
 	LAST_POINTER_TYPE.delete(event.currentTarget);
 }
+/**
+* `max-w-full` caps the text at its container even where the container does
+* not stretch it (a flex column with `items-start`, an inline-block): without
+* it a nowrap line sizes to its whole text and runs past the container.
+*/
 const TRUNCATED_TEXT_LINES_CLASS = {
-	1: "block min-w-0 truncate",
-	2: "line-clamp-2 min-w-0 wrap-anywhere",
-	3: "line-clamp-3 min-w-0 wrap-anywhere"
+	1: "block min-w-0 max-w-full truncate",
+	2: "line-clamp-2 min-w-0 max-w-full wrap-anywhere",
+	3: "line-clamp-3 min-w-0 max-w-full wrap-anywhere",
+	4: "line-clamp-4 min-w-0 max-w-full wrap-anywhere",
+	5: "line-clamp-5 min-w-0 max-w-full wrap-anywhere",
+	6: "line-clamp-6 min-w-0 max-w-full wrap-anywhere",
+	8: "line-clamp-8 min-w-0 max-w-full wrap-anywhere",
+	none: "min-w-0 max-w-full"
 };
 /** Whether the element's text is cut by its box, in either direction. */
 function isTextOverflowing(element) {
@@ -103,6 +114,11 @@ function isTextOverflowing(element) {
 	return element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
 }
 const CONTROL_SELECTOR = "a[href], button, label, summary, [role=button], [role=link], [role=menuitem], [role=option], [role=tab]";
+/** Whether a tooltip around the element already opens on its pointer. */
+function isInsideTooltipTrigger(element) {
+	const parent = element.parentElement;
+	return parent !== null && parent.closest("[data-slot=\"tooltip-trigger\"]") !== null;
+}
 /** Whether a tap on the element already belongs to a control around it. */
 function isInsideControl(element) {
 	return element.closest(CONTROL_SELECTOR) !== null;