@tangle-network/ui 11.14.0 → 11.15.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @tangle-network/ui
 
+## 11.15.1
+
+### Patch Changes
+
+- 34c2d3c: Retain non-empty synthetic text as labelled, plain-text Application notes in both transcript presentations. Preserve note ordering and synthetic-only messages without merging notes into user speech, parsing them as OpenUI, or counting them as agent responses. Existing public component props and callbacks are unchanged.
+
+## 11.15.0
+
+### Minor Changes
+
+- 1327903: Use scoped recessed field fills, readable link-action ink and time-valued control motion. Add opt-in compact/touch control sizing and three-to-six-column MetricStrip presets that own their separators. Preserve existing sizes, imports and interaction contracts; wrap metric content and retain numeric-zero qualifiers as descriptions.
+
+### Patch Changes
+
+- cb72f8d: Give the shared Select its designed states by default: accent border and surface while open, a rotating chevron, the dropdown shadow on the menu, and accent focus and checked rows with an accent checkmark. Consumers no longer need per-app overrides to avoid a flat menu.
+
 ## 11.14.0
 
 ### Minor Changes

package/dist/chat/chat-container.js

@@ -5,6 +5,7 @@ import { useRunGroups } from "../hooks/use-run-groups.js";
 import { useRunCollapseState } from "../hooks/use-run-collapse-state.js";
 import { useAutoScroll } from "../hooks/use-auto-scroll.js";
 import { InlineThinkingItem } from "../run/inline-thinking-item.js";
+import { SyntheticText, userTextSegments } from "./synthetic-text.js";
 import { OpenUIArtifactRenderer } from "../openui/openui-artifact-renderer.js";
 import { MessageList } from "./message-list.js";
 import { AgentTimeline } from "./agent-timeline.js";
@@ -115,15 +116,25 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
 	for (const message of messages) {
 		const parts = partMap[message.id] ?? [];
 		if (message.role === "user") {
-			const content = parts.filter((part) => part.type === "text").map((part) => part.text).join("\n").trim();
-			if (!content) continue;
-			items.push({
-				id: message.id,
-				kind: "message",
-				role: "user",
-				content,
-				timestamp: createdAtFromMessage(message)
-			});
+			const segments = userTextSegments(parts);
+			for (const segment of segments) {
+				const id = segments.length === 1 ? message.id : `${message.id}-user-${segment.index}`;
+				if (segment.synthetic) items.push({
+					id,
+					kind: "custom",
+					content: /* @__PURE__ */ jsx("div", {
+						className: "mx-3",
+						children: /* @__PURE__ */ jsx(SyntheticText, { text: segment.text })
+					})
+				});
+				else items.push({
+					id,
+					kind: "message",
+					role: "user",
+					content: segment.text.trim(),
+					timestamp: createdAtFromMessage(message)
+				});
+			}
 			continue;
 		}
 		const toolBuffer = [];
@@ -167,6 +178,17 @@ function buildTimelineItems(messages, partMap, isStreaming, onOpenUIAction, enab
 				return;
 			}
 			flushToolBuffer(index);
+			if (part.type === "text" && part.synthetic) {
+				if (part.text.trim()) items.push({
+					id: itemId,
+					kind: "custom",
+					content: /* @__PURE__ */ jsx("div", {
+						className: "mx-3",
+						children: /* @__PURE__ */ jsx(SyntheticText, { text: part.text })
+					})
+				});
+				return;
+			}
 			if (part.type === "text" && !part.synthetic && part.text.trim()) {
 				if (enableOpenUI) {
 					const jsonMatch = part.text.match(/```(?:json)?\s*\n([\s\S]*?)\n```/);

package/dist/chat/synthetic-text.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/chat/synthetic-text.tsx
+/** Internal transcript chrome, never attributed to a user or model. */
+function SyntheticText({ text }) {
+	if (!text.trim()) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "note",
+		"aria-label": "Application note",
+		"data-synthetic-text": "",
+		className: "min-w-0 rounded-md border border-dashed border-border bg-muted/30 px-3 py-2 text-sm text-muted-foreground",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "mb-1 font-medium",
+			children: "Application note"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "break-words whitespace-pre-wrap",
+			children: text
+		})]
+	});
+}
+/** Keep the existing joined user bubble, splitting only at application notes. */
+function userTextSegments(parts) {
+	const segments = [];
+	let pending = [];
+	let start = 0;
+	const flush = () => {
+		const text = pending.join("\n");
+		if (text.trim()) segments.push({
+			index: start,
+			synthetic: false,
+			text
+		});
+		pending = [];
+	};
+	parts.forEach((part, index) => {
+		if (part.type !== "text") return;
+		if (part.synthetic) {
+			flush();
+			if (part.text.trim()) segments.push({
+				index,
+				synthetic: true,
+				text: part.text
+			});
+		} else {
+			if (pending.length === 0) start = index;
+			pending.push(part.text);
+		}
+	});
+	flush();
+	return segments;
+}
+//#endregion
+export { SyntheticText, userTextSegments };

package/dist/chat/user-message.d.ts

@@ -12,10 +12,8 @@ export interface UserMessageProps {
   actions?: ReactNode;
 }
 /**
- * The single user message bubble uses inverse theme colors. The timestamp sits
- * beside the bubble and appears on hover, so it costs no height. Used by both
- * the run/message list (session-model `parts`) and AgentTimeline (direct
- * `content`/`timestamp`).
+ * User speech retains the inverse-theme bubble and direct-content contract.
+ * Application notes interrupt the bubble in source order, outside its attribution.
  */
 export declare const UserMessage: import("react").MemoExoticComponent<({ message: _message, parts, content, timestamp, actions }: UserMessageProps) => import("react").JSX.Element | null>;
 //#endregion

package/dist/chat/user-message.js

@@ -1,3 +1,4 @@
+import { SyntheticText, userTextSegments } from "./synthetic-text.js";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/chat/user-message.tsx
@@ -7,15 +8,13 @@ function formatTime(date) {
 		minute: "2-digit"
 	});
 }
-/**
-* The single user message bubble uses inverse theme colors. The timestamp sits
-* beside the bubble and appears on hover, so it costs no height. Used by both
-* the run/message list (session-model `parts`) and AgentTimeline (direct
-* `content`/`timestamp`).
-*/
-const UserMessage = memo(({ message: _message, parts, content, timestamp, actions }) => {
-	const text = content ?? (parts ?? []).filter((p) => p.type === "text").map((p) => p.text).join("\n");
-	if (!text.trim()) return null;
+function MessageActions({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground",
+		children
+	});
+}
+function UserBubble({ text, timestamp, actions }) {
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex justify-end",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -30,12 +29,34 @@ const UserMessage = memo(({ message: _message, parts, content, timestamp, action
 					className: "break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]",
 					children: text
 				})]
-			}), actions ? /* @__PURE__ */ jsx("div", {
-				className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground",
-				children: actions
-			}) : null]
+			}), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]
 		})
 	});
+}
+/**
+* User speech retains the inverse-theme bubble and direct-content contract.
+* Application notes interrupt the bubble in source order, outside its attribution.
+*/
+const UserMessage = memo(({ message: _message, parts, content, timestamp, actions }) => {
+	if (content != null) return content.trim() ? /* @__PURE__ */ jsx(UserBubble, {
+		text: content,
+		timestamp,
+		actions
+	}) : null;
+	const segments = userTextSegments(parts ?? []);
+	if (segments.length === 0) return null;
+	if (segments.length === 1 && !segments[0].synthetic) return /* @__PURE__ */ jsx(UserBubble, {
+		text: segments[0].text,
+		timestamp,
+		actions
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [segments.map((segment) => segment.synthetic ? /* @__PURE__ */ jsx(SyntheticText, { text: segment.text }, segment.index) : /* @__PURE__ */ jsx(UserBubble, {
+			text: segment.text,
+			timestamp
+		}, segment.index)), actions ? /* @__PURE__ */ jsx(MessageActions, { children: actions }) : null]
+	});
 });
 UserMessage.displayName = "UserMessage";
 //#endregion

package/dist/lib/control-presentation.js

@@ -0,0 +1,11 @@
+import { focusField } from "./focus.js";
+import { cn } from "./utils.js";
+//#region src/lib/control-presentation.ts
+const controlMotion = "duration-[var(--duration-fast)] ease-[var(--ease-standard)] motion-reduce:transition-none motion-reduce:duration-0";
+const controlSizes = {
+	compact: "h-[var(--control-height)] px-3 py-1 text-sm",
+	touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base"
+};
+const fieldPresentation = cn(focusField, controlMotion, "min-w-0 bg-[var(--bg-input)] text-foreground", "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]", "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]");
+//#endregion
+export { controlMotion, controlSizes, fieldPresentation };

package/dist/primitives/button.d.ts

@@ -2,11 +2,11 @@ import * as React from "react";
 //#region src/primitives/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "sandbox" | "secondary" | null | undefined;
-  size?: "default" | "icon" | "lg" | "sm" | "xl" | null | undefined;
+  size?: "compact" | "default" | "icon" | "lg" | "sm" | "touch" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null;
-  size?: "default" | "sm" | "lg" | "xl" | "icon" | null;
+  size?: "default" | "sm" | "lg" | "xl" | "icon" | "compact" | "touch" | null;
   asChild?: boolean;
   loading?: boolean;
   children?: React.ReactNode;

package/dist/primitives/button.js

@@ -1,27 +1,29 @@
 import { focusRing } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { controlMotion, controlSizes } from "../lib/control-presentation.js";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/button.tsx
-const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-all ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
+const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium text-sm transition-[color,background-color,border-color,box-shadow,transform,scale] ${controlMotion} ${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0`, {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97] duration-[var(--transition-fast)]",
-			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97] duration-[var(--transition-fast)]",
-			outline: "border border-border bg-card hover:bg-muted active:scale-[0.97] duration-[var(--transition-fast)] text-foreground",
-			secondary: "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97] duration-[var(--transition-fast)]",
-			ghost: "hover:bg-muted hover:text-foreground duration-[var(--transition-fast)] text-muted-foreground border border-transparent",
-			link: "text-primary underline-offset-4 hover:underline",
-			sandbox: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97] duration-[var(--transition-fast)]"
+			default: "bg-primary text-primary-foreground hover:bg-primary/90 active:scale-[0.97]",
+			destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 active:scale-[0.97]",
+			outline: "border border-border bg-card hover:bg-muted active:scale-[0.97] text-foreground",
+			secondary: "bg-muted border border-border text-foreground hover:bg-muted/80 active:scale-[0.97]",
+			ghost: "hover:bg-muted hover:text-foreground text-muted-foreground border border-transparent",
+			link: "text-[var(--accent-text)] underline-offset-4 hover:underline",
+			sandbox: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border border-[var(--border-accent)] hover:bg-[var(--btn-primary-hover)] active:scale-[0.97]"
 		},
 		size: {
 			default: "h-[var(--control-height)] px-4 py-2",
 			sm: "h-8 rounded-md px-3 text-xs",
 			lg: "h-11 rounded-lg px-7 text-sm",
 			xl: "h-13 rounded-xl px-9 text-base",
-			icon: "h-[var(--control-height)] w-[var(--control-height)]"
+			icon: "h-[var(--control-height)] w-[var(--control-height)]",
+			...controlSizes
 		}
 	},
 	defaultVariants: {

package/dist/primitives/input.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 //#region src/primitives/input.d.ts
 declare const inputVariants: (props?: ({
   variant?: "default" | "error" | "sandbox" | null | undefined;
-  size?: "default" | "lg" | "sm" | null | undefined;
+  size?: "compact" | "default" | "lg" | "sm" | "touch" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
   label?: string;
@@ -14,6 +14,8 @@ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttri
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Both values render the same field. */
   variant?: "default" | "sandbox";
+  /** Opt in to density/typing presentation without changing the default 120px well. */
+  size?: "default" | "compact" | "touch";
   label?: string;
   error?: string;
   hint?: string;

package/dist/primitives/input.js

@@ -1,12 +1,13 @@
 "use client";
-import { focusField, focusFieldInvalid } from "../lib/focus.js";
+import { focusFieldInvalid } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { controlSizes, fieldPresentation } from "../lib/control-presentation.js";
 import { Label } from "./label.js";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/input.tsx
-const inputVariants = cva(cn("flex w-full rounded-lg border bg-card px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", focusField), {
+const inputVariants = cva(cn("flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", fieldPresentation), {
 	variants: {
 		variant: {
 			default: "",
@@ -16,7 +17,8 @@ const inputVariants = cva(cn("flex w-full rounded-lg border bg-card px-4 py-2 te
 		size: {
 			default: "h-11",
 			sm: "h-9 px-3",
-			lg: "h-12 px-5"
+			lg: "h-12 px-5",
+			...controlSizes
 		}
 	},
 	defaultVariants: {
@@ -69,14 +71,14 @@ const Input = React.forwardRef(({ className, type, variant, size, label, error,
 	});
 });
 Input.displayName = "Input";
-const Textarea = React.forwardRef(({ className, variant: _variant, label, error, hint, id, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) => {
+const Textarea = React.forwardRef(({ className, variant: _variant, size = "default", label, error, hint, id, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }, ref) => {
 	const generatedId = React.useId();
 	const textareaId = id ?? generatedId;
 	const hintId = hint ? `${textareaId}-hint` : void 0;
 	const errorId = error ? `${textareaId}-error` : void 0;
 	const textarea = /* @__PURE__ */ jsx("textarea", {
 		id: textareaId,
-		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border bg-card px-4 py-3 text-sm", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", focusField, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", className),
+		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", size === "compact" && "min-h-24 px-3 py-2", size === "touch" && "text-base", className),
 		ref,
 		...props,
 		"aria-describedby": descriptionIds(describedBy, hintId, errorId),

package/dist/primitives/metric-strip.d.ts

@@ -1,23 +1,12 @@
 import { StatusTone } from "./status-pill.js";
 import * as React from "react";
 //#region src/primitives/metric-strip.d.ts
-/**
- * The headline figures for a console page, as ONE statement rather than four.
- *
- * A row of separate stat cards is the default and it is usually wrong here.
- * Each card is a box that must be tall enough for its longest member, so a row
- * mixing "$248.55 / Personal wallet" against a bare "0" leaves the short ones
- * mostly empty; and four bordered boxes read as four unrelated facts when they
- * are four readings of one account. `MetricStrip` puts them on one plane
- * divided by hairlines: same information, one object, no holes.
- *
- * The divider is a border on the item rather than a `divide-*` utility on the
- * parent, because these wrap. `divide-x` draws from DOM order and leaves a
- * stray rule at the start of every wrapped line; a per-item leading border
- * suppressed at each row start does not.
- */
+/** Headline readings on one plane, with native definition-list semantics. */
 export interface MetricStripProps extends React.HTMLAttributes<HTMLDListElement> {
   children: React.ReactNode;
+  /** Desktop columns. Default retains the existing two / sm:four layout.
+   * Five and six use three columns between sm and lg. Never inferred from data. */
+  columns?: 3 | 4 | 5 | 6;
 }
 declare const MetricStrip: React.ForwardRefExoticComponent<MetricStripProps & React.RefAttributes<HTMLDListElement>>;
 export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -25,24 +14,13 @@ export interface MetricProps extends React.HTMLAttributes<HTMLDivElement> {
   value: React.ReactNode;
   /** The qualifying line: which wallet, which window, what the limit is. */
   hint?: React.ReactNode;
-  /** Raises the value's tone and shows a pill beside the label. A metric is
-   *  `attention` only when a person has to DO something — not merely when a
-   *  number is zero. */
+  /** Attention is a caller-owned action requirement, never inferred from zero. */
   attention?: {
     tone: StatusTone;
     label: string;
   };
 }
-/**
- * One reading inside a `MetricStrip`.
- *
- * `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
- * described term rather than as two loose strings — the semantic that makes a
- * figure legible without the visual grouping.
- *
- * The value is `tabular-nums`: these sit in a row and change on a timer, and
- * proportional digits make the column jitter every time a 1 becomes an 8.
- */
+/** A described term; the strip, not this item, decides where separators belong. */
 declare const Metric: React.ForwardRefExoticComponent<MetricProps & React.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Metric, MetricStrip };

package/dist/primitives/metric-strip.js

@@ -3,32 +3,29 @@ import { StatusPill } from "./status-pill.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/metric-strip.tsx
-const MetricStrip = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("dl", {
+const layouts = {
+	3: "grid-cols-2 sm:grid-cols-3 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(3n+1))]:border-l",
+	4: "grid-cols-2 sm:grid-cols-4 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:[&>div:not(:nth-child(4n+1))]:border-l",
+	5: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(5n+1))]:border-l",
+	6: "grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 max-sm:[&>div:not(:nth-child(2n+1))]:border-l sm:max-lg:[&>div:not(:nth-child(3n+1))]:border-l lg:[&>div:not(:nth-child(6n+1))]:border-l"
+};
+const MetricStrip = React.forwardRef(({ className, children, columns = 4, ...props }, ref) => /* @__PURE__ */ jsx("dl", {
 	ref,
-	className: cn("grid grid-cols-2 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)] sm:grid-cols-4", className),
+	className: cn("grid min-w-0 rounded-[var(--radius-lg)] border border-border bg-card shadow-[var(--shadow-card)]", layouts[columns], className),
 	...props,
 	children
 }));
 MetricStrip.displayName = "MetricStrip";
-/**
-* One reading inside a `MetricStrip`.
-*
-* `<dt>` carries the label and `<dd>` the value, so the pair is announced as a
-* described term rather than as two loose strings — the semantic that makes a
-* figure legible without the visual grouping.
-*
-* The value is `tabular-nums`: these sit in a row and change on a timer, and
-* proportional digits make the column jitter every time a 1 becomes an 8.
-*/
+/** A described term; the strip, not this item, decides where separators belong. */
 const Metric = React.forwardRef(({ className, label, value, hint, attention, ...props }, ref) => /* @__PURE__ */ jsxs("div", {
 	ref,
-	className: cn("border-border p-4 sm:p-5", "max-sm:[&:not(:nth-child(2n+1))]:border-l", "sm:[&:not(:nth-child(4n+1))]:border-l", className),
+	className: cn("min-w-0 border-border p-4 sm:p-5", className),
 	...props,
 	children: [
 		/* @__PURE__ */ jsxs("dt", {
-			className: "flex items-center gap-2 text-muted-foreground text-sm",
+			className: "flex min-w-0 flex-wrap items-center gap-2 text-muted-foreground text-sm",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate",
+				className: "min-w-0 whitespace-normal [overflow-wrap:anywhere]",
 				children: label
 			}), attention && /* @__PURE__ */ jsx(StatusPill, {
 				tone: attention.tone,
@@ -36,12 +33,12 @@ const Metric = React.forwardRef(({ className, label, value, hint, attention, ...
 			})]
 		}),
 		/* @__PURE__ */ jsx("dd", {
-			className: cn("mt-1 truncate font-semibold text-xl tabular-nums tracking-tight lg:text-2xl", attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),
+			className: cn("mt-1 whitespace-normal [overflow-wrap:anywhere] font-semibold text-xl tabular-nums tracking-tight lg:text-2xl", attention?.tone === "danger" && "text-[var(--surface-danger-text)]"),
 			title: typeof value === "string" ? value : void 0,
 			children: value
 		}),
-		hint && /* @__PURE__ */ jsx("dd", {
-			className: "mt-0.5 truncate text-[var(--text-dim)] text-xs",
+		hint !== void 0 && hint !== null && hint !== false && hint !== "" && /* @__PURE__ */ jsx("dd", {
+			className: "mt-0.5 whitespace-normal [overflow-wrap:anywhere] text-[var(--text-dim)] text-xs",
 			title: typeof hint === "string" ? hint : void 0,
 			children: hint
 		})

package/dist/primitives/select.d.ts

@@ -4,7 +4,10 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+  /** Default remains 36px; compact follows density, touch is at least 44px. */
+  size?: "default" | "compact" | "touch";
+} & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/primitives/select.js

@@ -1,6 +1,6 @@
 "use client";
-import { focusField } from "../lib/focus.js";
 import { cn } from "../lib/utils.js";
+import { controlSizes, fieldPresentation } from "../lib/control-presentation.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
@@ -9,13 +9,13 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
+const SelectTrigger = React.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	ref,
-	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", focusField, className),
+	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", fieldPresentation, "data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:text-left", "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform", size !== "default" && controlSizes[size], className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,
-		children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" })
+		children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
 	})]
 }));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
@@ -35,7 +35,7 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(SelectPrimitive.Content, {
 	ref,
-	className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-foreground shadow-[var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className),
+	className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-card text-foreground shadow-[var(--shadow-dropdown)] data-[state=closed]:animate-out data-[state=open]:animate-in", position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1", className),
 	position,
 	...props,
 	children: [
@@ -56,11 +56,11 @@ const SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
 	ref,
-	className: cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	className: cn("relative flex w-full cursor-default select-none items-center rounded-md py-1.5 pr-8 pl-2 text-sm outline-none transition-colors focus:bg-[var(--accent-surface-strong)] focus:text-foreground data-[state=checked]:bg-[var(--accent-surface-strong)] data-[state=checked]:font-medium data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center",
-		children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
+		children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 text-[var(--accent-text)]" }) })
 	}), /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })]
 }));
 SelectItem.displayName = SelectPrimitive.Item.displayName;