@stll/ui 0.68.0 → 0.69.0

package/dist/calendar/day-calendar.d.ts

@@ -1,9 +1,10 @@
 import { DayCalendarGranularity, DayCalendarRange } from "./day-calendar.logic.js";
 import { ReactElement, ReactNode } from "react";
 /**
- * A block paints in its matter's colour; in a topic's colour, a lighter tint
- * from the same palette keyed by a stable topic key and without the matter's
- * edge; or in the neutral surface tone.
+ * A block paints in its matter's colour, with the matter's edge; in a topic's
+ * colour, from the separate low-chroma topic set keyed by a stable topic key
+ * and without an edge, so it never reads as a matter; or in the neutral
+ * surface tone.
  */
 export type DayCalendarTone = {
   color: string | null;
@@ -21,22 +22,37 @@ export type DayCalendarTone = {
  * button the caller acts on.
  */
 export type DayCalendarEntryState = "draft" | "final" | "suggestion";
+/**
+ * What a block shows on hover, for example the apps a `mixed` block merged.
+ * `actions` holds controls: it is a popover that also opens on focus or
+ * press and stays open while the pointer is on it, so its block is a button.
+ */
+export type DayCalendarBlockTooltip = {
+  content: ReactNode;
+  type: "actions";
+} | {
+  content: ReactNode;
+  type: "text";
+};
 type DayCalendarBlockFields = DayCalendarRange & {
   accessibleLabel: string;
   caption?: ReactNode;
   id: string;
   title: ReactNode;
   tone: DayCalendarTone;
-  /** Shown on hover, for example the apps a `mixed` block merged. */
-  tooltip?: ReactNode;
+  tooltip?: DayCalendarBlockTooltip;
 };
 export type DayCalendarBlock = (DayCalendarBlockFields & {
   kind: "entry";
   state: Exclude<DayCalendarEntryState, "suggestion">;
-}) | (DayCalendarBlockFields & {
+}) | (Omit<DayCalendarBlockFields, "tooltip"> & {
   kind: "entry";
   onActivate: () => void;
   state: "suggestion";
+  /** A suggestion is already a button; its hover only describes it. */
+  tooltip?: Extract<DayCalendarBlockTooltip, {
+    type: "text";
+  }>;
 }) | (DayCalendarBlockFields & {
   kind: "mixed";
 }) | (DayCalendarBlockFields & {

package/dist/calendar/day-calendar.js

@@ -1,7 +1,10 @@
+import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "../components/popover.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "../components/tooltip.js";
-import { getMatterColor, resolveMatterColor } from "../lib/matter-colors.js";
+import { TruncatedText } from "../components/truncated-text.js";
+import { resolveMatterColor } from "../lib/matter-colors.js";
 import { cn } from "../lib/utils.js";
 import { DAY_CALENDAR_SLOT_HEIGHT_PX, boundsHeight, extendRange, getDayBounds, getHourTicks, isRepeatedWallTime, layoutOverlaps, moveRange, offsetToTime, rangeFromDrag, slotAt, timeToOffset } from "./day-calendar.logic.js";
+import { getTopicColor } from "./topic-colors.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { panic } from "better-result";
@@ -81,7 +84,7 @@ const DayCalendar = ({ ariaLabel, columns, date, granularity, hours, locale, now
 	const nowVisible = nowMs >= bounds.startMs && nowMs < bounds.endMs;
 	const timeAt = (event) => offsetToTime(event.clientY - event.currentTarget.getBoundingClientRect().top, grid);
 	const handlePointerDown = (columnId, event) => {
-		if (event.button !== 0) return;
+		if (event.button !== 0 || !isWithinColumn(event)) return;
 		event.currentTarget.setPointerCapture(event.pointerId);
 		const anchorMs = timeAt(event);
 		setDraft({
@@ -127,6 +130,7 @@ const DayCalendar = ({ ariaLabel, columns, date, granularity, hours, locale, now
 		return slotAt(nowVisible ? nowMs : bounds.startMs, grid);
 	};
 	const handleKeyDown = (columnId, event) => {
+		if (event.target !== event.currentTarget) return;
 		const current = draft?.columnId === columnId ? draft : null;
 		switch (event.key) {
 			case "ArrowDown":
@@ -186,11 +190,11 @@ const DayCalendar = ({ ariaLabel, columns, date, granularity, hours, locale, now
 			columns.map((column, index) => /* @__PURE__ */ jsxs("header", {
 				className: cn("bg-card border-border text-muted-foreground sticky top-0 z-30 flex min-w-0 items-center gap-2 border-s border-b px-3 py-2.5 text-xs font-medium", index === columns.length - 1 && "rounded-se-xl"),
 				"data-slot": "day-calendar-column-header",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 shrink-0 truncate",
+				children: [/* @__PURE__ */ jsx(TruncatedText, {
+					className: "shrink-0",
 					children: column.label
-				}), column.badge === void 0 ? null : /* @__PURE__ */ jsx("span", {
-					className: "bg-muted text-muted-foreground text-2xs min-w-0 truncate rounded-full px-2 py-0.5",
+				}), column.badge === void 0 ? null : /* @__PURE__ */ jsx(TruncatedText, {
+					className: "bg-muted text-muted-foreground text-2xs rounded-full px-2 py-0.5",
 					children: column.badge
 				})]
 			}, column.id)),
@@ -306,6 +310,11 @@ const ColumnBlocks = ({ blocks, grid }) => {
 		}, block.id);
 	});
 };
+/** A block's popover is portalled out of the column, yet its events still
+* bubble to the column through React. */
+function isWithinColumn({ currentTarget, target }) {
+	return target instanceof Node && currentTarget.contains(target);
+}
 /** Below this height a block puts its title and caption on one line. */
 const TWO_LINE_BLOCK_MIN_PX = 40;
 /** A brief block paints at least this tall, unless the grid ends sooner. */
@@ -329,12 +338,15 @@ const DayCalendarBlockView = ({ block, grid, lane, range }) => {
 		insetBlockStart: top,
 		insetInlineStart: `${String(lane.lane * 100 / lane.laneCount)}%`
 	};
-	const className = cn("text-foreground flex h-full w-full min-w-0 overflow-hidden rounded-md px-2.5 text-start text-xs", blockSize < TWO_LINE_BLOCK_MIN_PX ? "flex-row items-center gap-2" : "flex-col gap-0.5 py-1", BLOCK_KIND_CLASSES[block.kind], block.kind === "entry" && ENTRY_STATE_CLASSES[block.state], block.tone.type === "matter" && "border-s-[3px]", block.tone.type === "neutral" && "bg-muted");
-	const content = blockSize < 16 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		className: "min-w-0 shrink-0 truncate font-medium",
+	const oneLine = blockSize < TWO_LINE_BLOCK_MIN_PX;
+	const className = cn("text-foreground @container flex h-full w-full min-w-0 overflow-hidden rounded-md px-2.5 text-start text-xs", oneLine ? "flex-row items-center gap-2" : "flex-col gap-0.5 py-1", BLOCK_KIND_CLASSES[block.kind], block.kind === "entry" && ENTRY_STATE_CLASSES[block.state], block.tone.type === "matter" && "border-s-[3px]", block.tone.type === "neutral" && "bg-muted");
+	const content = blockSize < 16 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TruncatedText, {
+		className: cn("font-medium", oneLine ? "shrink" : "shrink-0"),
+		hint: false,
 		children: block.title
-	}), block.caption === void 0 ? null : /* @__PURE__ */ jsx("span", {
-		className: "text-muted-foreground min-w-0 truncate tabular-nums",
+	}), block.caption === void 0 ? null : /* @__PURE__ */ jsx(TruncatedText, {
+		className: cn("text-muted-foreground tabular-nums", oneLine && "shrink-[999]"),
+		hint: false,
 		children: block.caption
 	})] });
 	const shared = {
@@ -345,9 +357,68 @@ const DayCalendarBlockView = ({ block, grid, lane, range }) => {
 		"data-slot": "day-calendar-block",
 		style: blockSurfaceStyle(block)
 	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("absolute px-1.5 py-px", block.tooltip === void 0 && !(block.kind === "entry" && block.state === "suggestion") && "pointer-events-none"),
+		style: placement,
+		children: /* @__PURE__ */ jsx(BlockSurface, {
+			block,
+			content,
+			shared
+		})
+	});
+};
+/** A block whose hover holds actions answers hover, focus and an open
+* popover like a suggestion does. */
+const ACTIONS_BLOCK_CLASSES = "focus-visible:ring-ring data-popup-open:ring-ring/50 hover:ring-ring/50 outline-none hover:ring-1 focus-visible:ring-2 data-popup-open:ring-1";
+/** A block's actions, opened by hover, focus or press. Once something in
+* them is pressed they stay open until dismissed: a press can move the
+* layout under a pointer that never moved (a notice above the calendar
+* goes away), and a hover popover would close as if the pointer had left,
+* taking the action's confirmation with it. */
+const ActionsPopover = ({ children, trigger }) => {
+	const [open, setOpen] = useState(false);
+	const [held, setHeld] = useState(false);
+	return /* @__PURE__ */ jsxs(Popover, {
+		onOpenChange: (next, { reason }) => {
+			if (!next && held && reason === "trigger-hover") return;
+			setOpen(next);
+			if (!next) setHeld(false);
+		},
+		open,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			delay: 300,
+			openOnHover: true,
+			render: trigger
+		}), /* @__PURE__ */ jsx(PopoverPopup, {
+			className: "max-w-72",
+			onPointerDown: () => setHeld(true),
+			side: "top",
+			tooltipStyle: true,
+			children
+		})]
+	});
+};
+/** A block whose hover holds actions is a button that opens them; a
+* suggestion is a button the caller acts on; any other block is read. */
+const BlockSurface = ({ block, content, shared }) => {
+	const state = block.kind === "entry" ? block.state : void 0;
+	if (block.tooltip?.type === "actions") {
+		const trigger = /* @__PURE__ */ jsx("button", {
+			...shared,
+			className: cn(shared.className, ACTIONS_BLOCK_CLASSES),
+			"data-state": state,
+			onPointerDown: (event) => event.stopPropagation(),
+			type: "button",
+			children: content
+		});
+		return /* @__PURE__ */ jsx(ActionsPopover, {
+			trigger,
+			children: block.tooltip.content
+		});
+	}
 	const surface = block.kind === "entry" && block.state === "suggestion" ? /* @__PURE__ */ jsx("button", {
 		...shared,
-		"data-state": block.state,
+		"data-state": state,
 		onClick: block.onActivate,
 		onKeyDown: (event) => event.stopPropagation(),
 		onPointerDown: (event) => event.stopPropagation(),
@@ -355,37 +426,37 @@ const DayCalendarBlockView = ({ block, grid, lane, range }) => {
 		children: content
 	}) : /* @__PURE__ */ jsx("article", {
 		...shared,
-		"data-state": block.kind === "entry" ? block.state : void 0,
+		"data-state": state,
 		children: content
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("absolute px-1.5 py-px", block.tooltip === void 0 && !(block.kind === "entry" && block.state === "suggestion") && "pointer-events-none"),
-		style: placement,
-		children: block.tooltip === void 0 ? surface : /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: surface }), /* @__PURE__ */ jsx(TooltipPopup, {
-			className: "max-w-72",
-			children: block.tooltip
-		})] })
-	});
+	return block.tooltip === void 0 ? surface : /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: surface }), /* @__PURE__ */ jsx(TooltipPopup, {
+		className: "max-w-72",
+		children: block.tooltip.content
+	})] });
 };
 /** A suggestion's tint is half an entry's, so proposed time reads lighter. */
 const TONE_TINT_PERCENT = {
 	entry: 16,
 	suggestion: 8
 };
-/** A topic is not a matter yet: its tint sits between a suggestion's and an
-* entry's. */
-const TOPIC_TINT_PERCENT = 12;
+/** A topic swatch is already muted, so it mixes in stronger than a matter's
+* to stay visible; the result is still far less saturated. */
+const TOPIC_TINT_PERCENT = 30;
 function blockSurfaceStyle(block) {
 	const tone = block.tone;
 	const suggestion = block.kind === "entry" && block.state === "suggestion";
 	switch (tone.type) {
 		case "neutral": return { backgroundColor: suggestion ? "transparent" : void 0 };
-		case "topic": return { backgroundColor: `color-mix(in srgb, ${getMatterColor(tone.key)} ${String(TOPIC_TINT_PERCENT)}%, var(--card))` };
+		case "topic": return {
+			"--day-calendar-tone": getTopicColor(tone.key),
+			backgroundColor: `color-mix(in srgb, var(--day-calendar-tone) ${String(TOPIC_TINT_PERCENT)}%, var(--card))`
+		};
 		case "matter": {
 			const color = resolveMatterColor(tone.matterId, tone.color);
 			const tint = suggestion ? TONE_TINT_PERCENT.suggestion : TONE_TINT_PERCENT.entry;
 			return {
-				backgroundColor: `color-mix(in srgb, ${color} ${String(tint)}%, var(--card))`,
+				"--day-calendar-tone": color,
+				backgroundColor: `color-mix(in srgb, var(--day-calendar-tone) ${String(tint)}%, var(--card))`,
 				borderColor: suggestion ? color : void 0,
 				borderInlineStartColor: color
 			};

package/dist/calendar/resource-calendar.js

@@ -1,3 +1,4 @@
+import { TruncatedText } from "../components/truncated-text.js";
 import { cn } from "../lib/utils.js";
 import { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarHeaderCell, CalendarHeaderRow } from "./primitives.js";
 import { assertConsecutiveCalendarDates, layoutResourceCalendarEntries, nextCalendarDate } from "./resource-calendar.logic.js";
@@ -99,11 +100,11 @@ const ResourceCalendar = ({ ariaLabel, columns, empty, entries, onSelectEntry, r
 						className: "bg-card sticky start-0 z-20 border-b-0 px-4 py-3",
 						id: resourceHeaderId,
 						role: "rowheader",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "block truncate text-sm font-semibold",
+						children: [/* @__PURE__ */ jsx(TruncatedText, {
+							className: "text-sm font-semibold",
 							children: resource.label
-						}), resource.meta === void 0 ? null : /* @__PURE__ */ jsx("span", {
-							className: "text-muted-foreground mt-1 block truncate text-xs",
+						}), resource.meta === void 0 ? null : /* @__PURE__ */ jsx(TruncatedText, {
+							className: "text-muted-foreground mt-1 text-xs",
 							children: resource.meta
 						})]
 					}), columns.map((column, columnIndex) => {
@@ -146,11 +147,8 @@ const ResourceCalendarEntryView = ({ entry, labelledBy, onSelectEntry, placement
 		insetInlineStart: 0,
 		inlineSize: `calc(${String(placement.span)} * 100%)`
 	};
-	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-		className: "block truncate",
-		children: entry.label
-	}), entry.meta === void 0 ? null : /* @__PURE__ */ jsx("span", {
-		className: "block truncate opacity-75",
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TruncatedText, { children: entry.label }), entry.meta === void 0 ? null : /* @__PURE__ */ jsx(TruncatedText, {
+		className: "opacity-75",
 		children: entry.meta
 	})] });
 	return /* @__PURE__ */ jsx("div", {

package/dist/calendar/topic-colors.d.ts

@@ -0,0 +1,3 @@
+export declare const TOPIC_SWATCHES: readonly ["--topic-sand", "--topic-sage", "--topic-mist", "--topic-heather", "--topic-clay", "--topic-slate"];
+export declare const getTopicSwatch: (key: string) => "--topic-clay" | "--topic-heather" | "--topic-mist" | "--topic-sage" | "--topic-sand" | "--topic-slate";
+export declare const getTopicColor: (key: string) => string;

package/dist/calendar/topic-colors.js

@@ -0,0 +1,19 @@
+import { stableHash } from "../lib/stable-hash.js";
+// src/calendar/topic-colors.ts
+/**
+* Swatches for time no matter claimed yet, such as one document's or window's
+* stretch of a day. A separate low-chroma set (`--topic-*` in theme.css), so
+* a topic is never painted in a colour a matter can have.
+*/
+const DEFAULT_TOPIC_SWATCH = "--topic-sand";
+const TOPIC_SWATCHES = [
+	DEFAULT_TOPIC_SWATCH,
+	"--topic-sage",
+	"--topic-mist",
+	"--topic-heather",
+	"--topic-clay",
+	"--topic-slate"
+];
+const getTopicSwatch = (key) => TOPIC_SWATCHES[stableHash(key) % TOPIC_SWATCHES.length] ?? DEFAULT_TOPIC_SWATCH;
+const getTopicColor = (key) => `var(${getTopicSwatch(key)})`;
+export { TOPIC_SWATCHES, getTopicColor, getTopicSwatch };

package/dist/components/button.js

@@ -6,6 +6,7 @@ import { cn } from "../lib/utils.js";
 import { BUTTON_PLAIN_VARIANT, BUTTON_VARIANT_TOKENS } from "./button.shared.js";
 import { Loader } from "./loader.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
+import { TruncatedText } from "./truncated-text.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, isValidElement } from "react";
 import { mergeProps } from "@base-ui/react/merge-props";
@@ -156,13 +157,12 @@ const BUTTON_SIZE_CONTENT = {
 * A button never grows past its container (`max-w-full` on every variant).
 * A one-line text label is cut to fit with an ellipsis; the button's
 * accessible name keeps the whole text, and `tooltip` can show it. The label
-* is a plain span, not a `TruncatedText`: a tooltip root in every button's
+* is a `TruncatedText` without its own hint: a tooltip root in every button's
 * label would cost every screen with many buttons. `layout="wrap"` lets a
 * label take several lines instead. An inline button is a word in a sentence
 * and a plain button lays out its own content, so neither has a one-line
 * label to cut.
 */
-const BUTTON_LABEL_CLASS = "block min-w-0 truncate";
 const cutsLabel = ({ layout, size, variant }) => layout === void 0 && variant !== "plain" && variant !== "link" && size !== "inline" && BUTTON_SIZE_CONTENT[size ?? BUTTON_DEFAULT_SIZE] === BUTTON_CONTENT.text;
 /**
 * Each run of adjacent text among the children, cut to the button's width.
@@ -178,9 +178,9 @@ const containedLabel = (children) => {
 	let run = [];
 	const closeRun = () => {
 		if (run.length > 0) {
-			parts.push(/* @__PURE__ */ jsx("span", {
-				className: BUTTON_LABEL_CLASS,
+			parts.push(/* @__PURE__ */ jsx(TruncatedText, {
 				"data-slot": "button-label",
+				hint: false,
 				children: run
 			}, `label:${String(parts.length)}`));
 			run = [];

package/dist/components/composer-tokens.d.ts

@@ -49,8 +49,12 @@ export declare const COMPOSER_TEXT_CLASS = "text-sm leading-5";
 export declare const COMPOSER_LARGE_TEXT_WELL_CLASS = "ps-3 pe-3 pt-2 pb-1";
 /** The `large` editable element's stature: three lines before it grows. */
 export declare const COMPOSER_LARGE_EDITOR_CLASS = "min-h-15";
-/** The placeholder painted over an empty editor, in either stature. */
-export declare const COMPOSER_PLACEHOLDER_CLASS = "text-foreground-placeholder pointer-events-none absolute truncate text-sm";
+/**
+ * The placeholder painted over an empty editor, in either stature.
+ * `ComposerPlaceholder` cuts its text through TruncatedText; a row that wears
+ * this class around other content cuts its own text the same way.
+ */
+export declare const COMPOSER_PLACEHOLDER_CLASS = "text-foreground-placeholder pointer-events-none absolute text-sm";
 /** The `large` action row under the text well: leading controls, trailing send. */
 export declare const COMPOSER_LARGE_ACTION_ROW_CLASS = "flex items-center justify-end gap-0.5 px-1.5 pb-1.5";
 /** The leading group of the action row (the (+) menu, or a scope control). */

package/dist/components/composer-tokens.js

@@ -50,8 +50,12 @@ const COMPOSER_TEXT_CLASS = "text-sm leading-5";
 const COMPOSER_LARGE_TEXT_WELL_CLASS = "ps-3 pe-3 pt-2 pb-1";
 /** The `large` editable element's stature: three lines before it grows. */
 const COMPOSER_LARGE_EDITOR_CLASS = "min-h-15";
-/** The placeholder painted over an empty editor, in either stature. */
-const COMPOSER_PLACEHOLDER_CLASS = "text-foreground-placeholder pointer-events-none absolute truncate text-sm";
+/**
+* The placeholder painted over an empty editor, in either stature.
+* `ComposerPlaceholder` cuts its text through TruncatedText; a row that wears
+* this class around other content cuts its own text the same way.
+*/
+const COMPOSER_PLACEHOLDER_CLASS = "text-foreground-placeholder pointer-events-none absolute text-sm";
 /** The `large` action row under the text well: leading controls, trailing send. */
 const COMPOSER_LARGE_ACTION_ROW_CLASS = "flex items-center justify-end gap-0.5 px-1.5 pb-1.5";
 /** The leading group of the action row (the (+) menu, or a scope control). */

package/dist/components/composer.d.ts

@@ -1,5 +1,18 @@
 import { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS } from "./composer-tokens.js";
 import { ReactNode } from "react";
+/** Where the placeholder sits over the editor, in each stature. */
+declare const COMPOSER_PLACEHOLDER_POSITION_CLASS: {
+  readonly compact: "start-0 end-0 top-1/2 -translate-y-1/2";
+  readonly large: "start-3 end-3 top-2";
+};
+/**
+ * The placeholder painted over an empty editor, cut to one line. It takes no
+ * pointer and is hidden from assistive tech, so it shows no hint.
+ */
+export declare const ComposerPlaceholder: ({ children, stature }: {
+  children: ReactNode;
+  stature: keyof typeof COMPOSER_PLACEHOLDER_POSITION_CLASS;
+}) => import("react").JSX.Element;
 type ComposerStatusRowProps = {
   /** Left cluster: matter picker, web-search / anonymize toggles, ... */
   start?: ReactNode | undefined;

package/dist/components/composer.js

@@ -3,8 +3,24 @@ import { ChevronDownIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS } from "./composer-tokens.js";
 import { DropdownMenu as Menu, DropdownMenuContent as MenuPopup, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuTrigger as MenuTrigger } from "./menu.js";
+import { TruncatedText } from "./truncated-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/composer.tsx
+/** Where the placeholder sits over the editor, in each stature. */
+const COMPOSER_PLACEHOLDER_POSITION_CLASS = {
+	compact: "start-0 end-0 top-1/2 -translate-y-1/2",
+	large: "start-3 end-3 top-2"
+};
+/**
+* The placeholder painted over an empty editor, cut to one line. It takes no
+* pointer and is hidden from assistive tech, so it shows no hint.
+*/
+const ComposerPlaceholder = ({ children, stature }) => /* @__PURE__ */ jsx(TruncatedText, {
+	"aria-hidden": "true",
+	className: cn(COMPOSER_PLACEHOLDER_CLASS, COMPOSER_PLACEHOLDER_POSITION_CLASS[stature]),
+	hint: false,
+	children
+});
 /**
 * The slim status row rendered beneath a composer box: a `text-xs` row with
 * a start cluster and an end slot pinned to the far edge. Shared by every
@@ -54,8 +70,8 @@ const ComposerPicker = ({ ariaLabel, icon, onChange, options, value }) => {
 				className: "flex size-3 shrink-0 items-center justify-center [&>svg]:size-3",
 				children: icon
 			}),
-			/* @__PURE__ */ jsx("span", {
-				className: "truncate",
+			/* @__PURE__ */ jsx(TruncatedText, {
+				hint: false,
 				children: current?.label ?? value
 			}),
 			/* @__PURE__ */ jsx(ChevronDownIcon, {
@@ -76,4 +92,4 @@ const ComposerPicker = ({ ariaLabel, icon, onChange, options, value }) => {
 		})
 	})] });
 };
-export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS, ComposerPicker, ComposerStatusRow };
+export { COMPOSER_BOX_ANONYMIZED_CLASS, COMPOSER_BOX_CLASS, COMPOSER_BOX_FOCUS_CLASS, COMPOSER_COMPACT_ROW_CLASS, COMPOSER_COMPACT_TEXT_CELL_CLASS, COMPOSER_CONTROL_BUTTON_SIZE, COMPOSER_LARGE_ACTION_ROW_CLASS, COMPOSER_LARGE_EDITOR_CLASS, COMPOSER_LARGE_TEXT_WELL_CLASS, COMPOSER_LEADING_GROUP_CLASS, COMPOSER_PICKER_TRIGGER_CLASS, COMPOSER_PLACEHOLDER_CLASS, COMPOSER_SEND_BUTTON_CLASS, COMPOSER_TEXT_CLASS, ComposerPicker, ComposerPlaceholder, ComposerStatusRow };

package/dist/components/court-filter.js

@@ -7,6 +7,7 @@ import { DirectionalIcon } from "./directional-icon.js";
 import { Field, FieldLabel } from "./field.js";
 import { ScrollArea } from "./scroll-area.js";
 import { SearchField } from "./search-field.js";
+import { TruncatedText } from "./truncated-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
 // src/components/court-filter.tsx
@@ -56,10 +57,9 @@ const SingleCourtGroup = ({ group, options }) => {
 								if (checked) options.onChange(void 0);
 							}
 						}),
-						/* @__PURE__ */ jsx(BidiText, {
-							as: "span",
-							className: cn("text-foreground min-w-0 flex-1 truncate", checked && "font-medium"),
-							title: label ?? value,
+						/* @__PURE__ */ jsx(TruncatedText, {
+							className: cn("text-foreground flex-1", checked && "font-medium"),
+							render: /* @__PURE__ */ jsx(BidiText, { as: "span" }),
 							children: label ?? value
 						}),
 						badgeText !== void 0 && /* @__PURE__ */ jsx("bdi", {

package/dist/components/date-picker-popover.js

@@ -9,6 +9,7 @@ import { DirectionalIcon } from "./directional-icon.js";
 import { Input } from "./input.js";
 import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
 import { TimeField } from "./time-field.js";
+import { TruncatedText } from "./truncated-text.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Result, panic } from "better-result";
@@ -465,8 +466,8 @@ const DatePickerPopoverContent = (props) => {
 			}),
 			children: [
 				showIcon && /* @__PURE__ */ jsx(CalendarIcon, { className: "size-3.5 shrink-0" }),
-				/* @__PURE__ */ jsx("span", {
-					className: "min-w-0 flex-1 truncate text-start",
+				/* @__PURE__ */ jsx(TruncatedText, {
+					className: "flex-1 text-start",
 					id: labelledBy ? displayValueId : void 0,
 					children: displayLabel
 				}),

package/dist/components/document-identity-badge.js

@@ -3,6 +3,7 @@ import { cn } from "../lib/utils.js";
 import { CourtBadge } from "./court-badge.js";
 import { COURT_TIER_WEIGHT, caseNumberIdentityLabels, statuteIdentityLabels } from "./document-identity-badge.logic.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { TruncatedText } from "./truncated-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { panic } from "better-result";
 // src/components/document-identity-badge.tsx
@@ -58,11 +59,15 @@ function referenceLabelMark(labels, kind) {
 		"data-slot": "document-identity-badge",
 		"data-kind": kind,
 		dir: "ltr",
-		children: [/* @__PURE__ */ jsx("bdi", {
-			className: cn("min-w-0 truncate", classes.short),
+		children: [/* @__PURE__ */ jsx(TruncatedText, {
+			className: classes.short,
+			hint: false,
+			render: /* @__PURE__ */ jsx("bdi", {}),
 			children: labels.short
-		}), /* @__PURE__ */ jsx("bdi", {
-			className: cn("min-w-0 truncate", classes.long),
+		}), /* @__PURE__ */ jsx(TruncatedText, {
+			className: classes.long,
+			hint: false,
+			render: /* @__PURE__ */ jsx("bdi", {}),
 			children: labels.long
 		})]
 	});

package/dist/components/file-input.js

@@ -3,6 +3,7 @@ import { UploadIcon } from "../icons.js";
 import { openFilePicker } from "../lib/file-picker.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";
 import { useId } from "react";
 // src/components/file-input.tsx
@@ -23,8 +24,8 @@ const FileInput = ({ accept, "aria-labelledby": labelledBy, className, disabled,
 			type: "button",
 			variant: "outline",
 			children: [/* @__PURE__ */ jsx(UploadIcon, { "aria-hidden": "true" }), chooseLabel]
-		}), /* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground min-w-0 truncate text-sm",
+		}), /* @__PURE__ */ jsx(TruncatedText, {
+			className: "text-muted-foreground text-sm",
 			"data-slot": "file-input-name",
 			children: file ? /* @__PURE__ */ jsx("bdi", { children: file.name }) : emptyLabel
 		})]

package/dist/components/identity-text.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { withoutDirectionalControls } from "./bidi-text.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { TruncatedText } from "./truncated-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useState } from "react";
 // src/components/identity-text.tsx
@@ -51,9 +52,10 @@ const IdentityText = ({ children, className }) => {
 					setOpen(true);
 				}
 			},
-			render: /* @__PURE__ */ jsx("span", {
-				className: cn("focus-visible:ring-ring block min-w-0 truncate outline-none [unicode-bidi:isolate] focus-visible:ring-2", className),
+			render: /* @__PURE__ */ jsx(TruncatedText, {
+				className: cn("focus-visible:ring-ring outline-none [unicode-bidi:isolate] focus-visible:ring-2", className),
 				dir: "auto",
+				hint: false,
 				ref: textRef,
 				role: overflow && !hasFocusOwner ? "button" : void 0,
 				tabIndex: overflow && !hasFocusOwner ? 0 : void 0

package/dist/components/input-group.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
+import { TruncatedText } from "./truncated-text.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 // src/components/input-group.tsx
@@ -35,8 +36,8 @@ const InputGroupAddon = ({ className, align = "inline-start", ...props }) => /*
 	},
 	...props
 });
-const InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
-	className: cn("text-muted-foreground flex items-center gap-2 truncate leading-none [&_svg]:pointer-events-none [&_svg]:-mx-0.5 in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4", className),
+const InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsx(TruncatedText, {
+	className: cn("text-muted-foreground flex items-center gap-2 leading-none [&_svg]:pointer-events-none [&_svg]:-mx-0.5 in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4", className),
 	...props
 });
 const InputGroupInput = ({ className, ...props }) => /* @__PURE__ */ jsx(Input, {

package/dist/components/landing.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { BidiText } from "./bidi-text.js";
 import { ScrollArea } from "./scroll-area.js";
+import { TruncatedText } from "./truncated-text.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/landing.tsx
 const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ jsxs("div", {
@@ -88,12 +89,12 @@ const LandingItemText = ({ icon, iconTone = "muted", meta, title }) => /* @__PUR
 		children: icon
 	}), /* @__PURE__ */ jsxs("span", {
 		className: "min-w-0 flex-1",
-		children: [/* @__PURE__ */ jsx(BidiText, {
-			as: "span",
-			className: "text-foreground block truncate text-sm font-medium",
+		children: [/* @__PURE__ */ jsx(TruncatedText, {
+			className: "text-foreground text-sm font-medium",
+			render: /* @__PURE__ */ jsx(BidiText, { as: "span" }),
 			children: title
-		}), meta !== void 0 && meta !== null ? /* @__PURE__ */ jsx("span", {
-			className: "text-muted-foreground block truncate text-xs",
+		}), meta !== void 0 && meta !== null ? /* @__PURE__ */ jsx(TruncatedText, {
+			className: "text-muted-foreground text-xs",
 			children: meta
 		}) : null]
 	})]