@stll/ui 0.65.1 → 0.67.0

package/dist/components/outline-rail.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode, RefObject } from "react";
-//#region src/components/outline-rail.d.ts
 /**
  * How prominently an entry reads next to the entries around it. A caller
  * that ranks its entries (a list of search results) steps the near-misses
@@ -26,6 +25,17 @@ export type OutlineItem = {
   color?: string;
   /** How prominently the row reads. Defaults to `primary`. */
   emphasis?: OutlineEmphasis;
+  /** The people the entry is about. Its tick stays a tick and shows them on
+   *  hover or focus; an entry with people stays on the rail however dense the
+   *  outline gets. */
+  portraits?: readonly OutlinePortrait[];
+  /** Where the portraits come from, said under them in the tick's card. */
+  portraitCredit?: string;
+};
+/** A person an entry is about; `image` null draws their initials. */
+export type OutlinePortrait = {
+  image: string | null;
+  name: string;
 };
 export type OutlineRailProps = {
   items: OutlineItem[];
@@ -59,5 +69,4 @@ export type OutlineRailProps = {
 export declare const OUTLINE_CONTROL_MIN_SIZE = 32;
 /** The entry as one line of text: label, then its title when it has one. */
 export declare const outlineEntryText: (item: OutlineItem) => string;
-export declare const OutlineRail: ({ items: itemsProp, scrollContainerRef, resolvePct, onJump, activeId, header, formatMetaLabel, collapsedFromLevel, presentation, bottomInset, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;
-//#endregion
+export declare const OutlineRail: ({ items: itemsProp, scrollContainerRef, resolvePct, onJump, activeId, header, formatMetaLabel, collapsedFromLevel, presentation, bottomInset, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;

package/dist/components/outline-rail.js

@@ -1,15 +1,16 @@
 "use client";
 import { ChevronRightIcon } from "../icons.js";
+import "../lib/panel-inset.js";
 import { cn } from "../lib/utils.js";
-import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
-import { ScrollArea } from "./scroll-area.js";
+import { ReviewAuthorAvatar } from "../review/review-author-avatar.js";
 import { DirectionalIcon } from "./directional-icon.js";
-import "../lib/panel-inset.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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Temporal } from "temporal-polyfill/full";
-//#region src/components/outline-rail.tsx
+// src/components/outline-rail.tsx
 /**
 * Outline navigation: an embedded panel, a host-owned rail, or a disclosure.
 *
@@ -43,6 +44,46 @@ const HOVER_OPEN_DWELL_MS = 150;
 const ACTIVE_ROW_ATTRIBUTE = "data-outline-active";
 /** The entry as one line of text: label, then its title when it has one. */
 const outlineEntryText = (item) => item.title === void 0 ? item.label : `${item.label} ${item.title}`;
+const MAX_ROW_PORTRAITS = 3;
+const HEAD_FRAME_CLASS = "[&_img]:origin-[50%_26%] [&_img]:scale-200 [&_img]:object-top";
+/** A row's faces, decorative: the row's text carries the names. */
+const OutlineRowPortraits = ({ portraits }) => /* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	className: "me-1.5 flex shrink-0 -space-x-1.5 rtl:space-x-reverse",
+	children: portraits.slice(0, MAX_ROW_PORTRAITS).map((portrait) => /* @__PURE__ */ jsx(ReviewAuthorAvatar, {
+		className: cn("ring-background size-6 ring-2", HEAD_FRAME_CLASS),
+		fallbackClassName: "text-[10px]",
+		image: portrait.image,
+		name: portrait.name
+	}, portrait.name))
+});
+/** What a tick with people opens: each of them, face and name. The tick's
+*  accessible name already says all this, so the card adds only the faces. */
+const OutlinePeopleCard = ({ credit, portraits, title }) => /* @__PURE__ */ jsxs("span", {
+	className: "flex max-w-64 flex-col gap-2 py-1",
+	children: [
+		title !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: title
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "flex flex-col gap-2",
+			children: portraits.map((portrait) => /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-2 font-medium",
+				children: [/* @__PURE__ */ jsx(ReviewAuthorAvatar, {
+					"aria-hidden": true,
+					className: cn("size-10", HEAD_FRAME_CLASS),
+					image: portrait.image,
+					name: portrait.name
+				}), portrait.name]
+			}, portrait.name))
+		}),
+		credit !== void 0 && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-2xs",
+			children: credit
+		})
+	]
+});
 const tickWidth = (level) => {
 	return TICK_BASE_WIDTH + (TICK_MAX_LEVEL - Math.min(Math.max(level, 0), TICK_MAX_LEVEL)) * TICK_LEVEL_STEP;
 };
@@ -119,6 +160,7 @@ const OutlineRowView = ({ item, hasChildren, isCollapsed, isActive, isHovered, i
 			className: "me-1.5 size-1.5 shrink-0 rounded-full",
 			style: { background: `var(${item.color})` }
 		}),
+		item.portraits !== void 0 && /* @__PURE__ */ jsx(OutlineRowPortraits, { portraits: item.portraits }),
 		/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 			render: /* @__PURE__ */ jsx("button", {
 				"aria-current": isActive ? "true" : void 0,
@@ -392,12 +434,13 @@ const OutlineRail = ({ items: itemsProp, scrollContainerRef, resolvePct, onJump,
 	}, []);
 	const visibleTicks = items.flatMap((item) => {
 		const pct = pctById.get(item.id);
-		return pct !== void 0 && item.level <= railLevelCap ? [{
+		return pct !== void 0 && (item.portraits !== void 0 || item.level <= railLevelCap) ? [{
 			item,
 			pct
 		}] : [];
 	});
-	if (items.length < 2 && header === void 0) return null;
+	const hasPanel = items.length >= 2 || header !== void 0;
+	if (!hasPanel && !items.some((item) => item.portraits !== void 0)) return null;
 	const visibleTickIds = new Set(visibleTicks.map(({ item }) => item.id));
 	const ghostPct = hoveredId !== null && !visibleTickIds.has(hoveredId) ? pctById.get(hoveredId) : void 0;
 	const ghostItem = ghostPct === void 0 ? void 0 : items.find((item) => item.id === hoveredId);
@@ -428,14 +471,16 @@ const OutlineRail = ({ items: itemsProp, scrollContainerRef, resolvePct, onJump,
 			children: [visibleTicks.map(({ item, pct }) => {
 				const isActive = active === item.id;
 				const isHovered = hoveredId === item.id;
+				const portraits = item.portraits;
+				const tickLabel = portraits === void 0 ? item.label : outlineEntryText(item);
 				return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("button", {
-					...presentation === "popover" ? {
+					...presentation === "popover" && hasPanel ? {
 						"aria-controls": panelId,
 						"aria-expanded": panelOpen
 					} : {},
 					"aria-current": isActive ? "true" : void 0,
-					"aria-label": item.label,
-					className: cn("absolute end-0 rounded-full transition-[width,height,opacity] duration-150", isHovered || isActive ? "opacity-100" : "opacity-45 hover:opacity-90"),
+					"aria-label": tickLabel,
+					className: cn("absolute end-0 rounded-full transition-[width,height,opacity] duration-150", isHovered || isActive ? "opacity-100" : "opacity-45 hover:opacity-90", portraits !== void 0 && "focus-visible:outline-ring z-10 after:absolute after:-inset-x-2 after:-inset-y-2.5 focus-visible:outline-2 focus-visible:outline-offset-2 pointer-coarse:after:-inset-x-3.5 pointer-coarse:after:-inset-y-5"),
 					onBlur: (event) => {
 						if (!railRef.current?.contains(event.relatedTarget)) closePanel();
 					},
@@ -457,7 +502,15 @@ const OutlineRail = ({ items: itemsProp, scrollContainerRef, resolvePct, onJump,
 						background: tickBackground(item.color, isHovered)
 					},
 					type: "button"
-				}) }), /* @__PURE__ */ jsx(TooltipPopup, { children: item.label })] }, item.id);
+				}) }), portraits === void 0 ? /* @__PURE__ */ jsx(TooltipPopup, { children: item.label }) : /* @__PURE__ */ jsx(TooltipPopup, {
+					side: "inline-start",
+					sideOffset: presentation === "popover" && hasPanel ? 44 + panelWidth - tickWidth(item.level) : void 0,
+					children: /* @__PURE__ */ jsx(OutlinePeopleCard, {
+						credit: item.portraitCredit,
+						portraits,
+						title: item.title
+					})
+				})] }, item.id);
 			}), ghostItem && ghostPct !== void 0 && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
 				className: "absolute end-0 rounded-full opacity-100",
@@ -469,7 +522,7 @@ const OutlineRail = ({ items: itemsProp, scrollContainerRef, resolvePct, onJump,
 					background: ghostItem.color ? `var(${ghostItem.color})` : "var(--option-blue)"
 				}
 			})]
-		}), presentation !== "rail" && /* @__PURE__ */ jsxs("nav", {
+		}), presentation !== "rail" && hasPanel && /* @__PURE__ */ jsxs("nav", {
 			"aria-label": ariaLabel,
 			"aria-hidden": !panelOpen,
 			id: panelId,
@@ -541,5 +594,4 @@ function outlinePanelVisibilityClass(presentation, open) {
 	if (presentation === "panel") return "flex-1";
 	return open ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-2 opacity-0";
 }
-//#endregion
 export { OUTLINE_CONTROL_MIN_SIZE, OUTLINE_EMPHASIS, OutlineRail, outlineEntryText };

package/dist/components/outline-rail.logic.d.ts

@@ -1,5 +1,4 @@
 import { OutlineItem } from "./outline-rail.js";
-//#region src/components/outline-rail.logic.d.ts
 /**
  * `next` with every entry whose content `previous` already holds under the
  * same id replaced by that earlier object, and `previous` itself when nothing
@@ -22,5 +21,4 @@ type RetainKnownIdsOptions = {
  * seen for the first time gets `seed`, and a removed entry drops out.
  */
 export declare const retainOutlineIdSet: ({ ids, knownIds, seed, items }: RetainKnownIdsOptions) => ReadonlySet<string>;
-//#endregion
 export {};

package/dist/components/outline-rail.logic.js

@@ -1,4 +1,4 @@
-//#region src/components/outline-rail.logic.ts
+// src/components/outline-rail.logic.ts
 const OUTLINE_ITEM_EQUALS = Object.values({
 	id: (a, b) => a.id === b.id,
 	label: (a, b) => a.label === b.label,
@@ -6,7 +6,12 @@ const OUTLINE_ITEM_EQUALS = Object.values({
 	level: (a, b) => a.level === b.level,
 	meta: (a, b) => a.meta === b.meta,
 	color: (a, b) => a.color === b.color,
-	emphasis: (a, b) => a.emphasis === b.emphasis
+	emphasis: (a, b) => a.emphasis === b.emphasis,
+	portraits: (a, b) => a.portraits?.length === b.portraits?.length && (a.portraits ?? []).every((portrait, index) => {
+		const other = b.portraits?.[index];
+		return other !== void 0 && other.image === portrait.image && other.name === portrait.name;
+	}),
+	portraitCredit: (a, b) => a.portraitCredit === b.portraitCredit
 });
 const sameOutlineItem = (a, b) => OUTLINE_ITEM_EQUALS.every((equals) => equals(a, b));
 /**
@@ -36,5 +41,4 @@ const retainOutlineIdSet = ({ ids, knownIds, seed, items }) => {
 	for (const item of items) if (knownIds.has(item.id) ? ids.has(item.id) : seed(item)) next.add(item.id);
 	return next.size === ids.size && [...next].every((id) => ids.has(id)) ? ids : next;
 };
-//#endregion
 export { reconcileOutlineItems, retainOutlineIdSet };

package/dist/components/pagination.d.ts

@@ -1,7 +1,6 @@
 import * as React$1 from "react";
 import { Button } from "./button.js";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/pagination.d.ts
 declare const Pagination: ({ className, ...props }: React$1.ComponentProps<"nav">) => React$1.JSX.Element;
 declare const PaginationContent: ({ className, ...props }: React$1.ComponentProps<"ul">) => React$1.JSX.Element;
 declare const PaginationItem: ({ ...props }: React$1.ComponentProps<"li">) => React$1.JSX.Element;
@@ -13,5 +12,4 @@ declare function PaginationLink({ className, isActive, size, render, ...props }:
 declare const PaginationPrevious: ({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>) => React$1.JSX.Element;
 declare const PaginationNext: ({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>) => React$1.JSX.Element;
 declare const PaginationEllipsis: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
-//#endregion
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/pagination.js

@@ -6,7 +6,7 @@ import { DirectionalIcon } from "./directional-icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/pagination.tsx
+// src/components/pagination.tsx
 const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx("nav", {
 	"aria-label": "Pagination",
 	className: cn("mx-auto flex w-full justify-center", className),
@@ -74,5 +74,4 @@ const PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsxs("sp
 		children: "More pages"
 	})]
 });
-//#endregion
 export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/popover.d.ts

@@ -2,7 +2,6 @@ import * as React$1 from "react";
 import { ComponentProps } from "react";
 import { OverlayLayer } from "../lib/overlay-layer.js";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
-//#region src/components/popover.d.ts
 declare const PopoverCreateHandle: typeof Popover$1.createHandle;
 declare const Popover: typeof Popover$1.Root;
 declare function PopoverTrigger({ tooltip, ...props }: Popover$1.Trigger.Props & {
@@ -43,5 +42,4 @@ declare const PopoverPanel: ({ children, contentClassName, ...props }: Component
 declare const PopoverClose: ({ ...props }: Popover$1.Close.Props) => React$1.JSX.Element;
 declare const PopoverTitle: ({ className, ...props }: Popover$1.Title.Props) => React$1.JSX.Element;
 declare const PopoverDescription: ({ className, ...props }: Popover$1.Description.Props) => React$1.JSX.Element;
-//#endregion
 export { Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger };

package/dist/components/popover.js

@@ -1,11 +1,11 @@
 "use client";
-import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { CONTENT_SIZED_POSITIONER_CLASS_NAME, IN_FLOW_POPUP_CLASS_NAME } from "../lib/positioner-sizing.js";
+import { cn } from "../lib/utils.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
-//#region src/components/popover.tsx
+// src/components/popover.tsx
 const PopoverCreateHandle = Popover$1.createHandle;
 const Popover = Popover$1.Root;
 function PopoverTrigger({ tooltip, ...props }) {
@@ -76,5 +76,4 @@ const PopoverDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(Popo
 	"data-slot": "popover-description",
 	...props
 });
-//#endregion
 export { Popover, PopoverClose, PopoverPopup as PopoverContent, PopoverPopup, PopoverCreateHandle, PopoverDescription, PopoverPanel, PopoverTitle, PopoverTrigger };

package/dist/components/preview-card.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
-//#region src/components/preview-card.d.ts
 export declare const PreviewCard: typeof PreviewCardPrimitive.Root;
 export declare const PreviewCardTrigger: ({ ...props }: PreviewCardPrimitive.Trigger.Props) => React.ReactElement;
 export declare const PreviewCardPopup: ({ className, children, align, sideOffset, anchor, ...props }: PreviewCardPrimitive.Popup.Props & {
@@ -8,5 +7,4 @@ export declare const PreviewCardPopup: ({ className, children, align, sideOffset
   sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"];
   anchor?: PreviewCardPrimitive.Positioner.Props["anchor"];
 }) => React.ReactElement;
-//#endregion
 export { PreviewCard as HoverCard, PreviewCardPopup as HoverCardContent, PreviewCardTrigger as HoverCardTrigger, PreviewCardPrimitive };

package/dist/components/preview-card.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
-//#region src/components/preview-card.tsx
+// src/components/preview-card.tsx
 const PreviewCard = PreviewCardPrimitive.Root;
 const PreviewCardTrigger = ({ ...props }) => /* @__PURE__ */ jsx(PreviewCardPrimitive.Trigger, {
 	"data-slot": "preview-card-trigger",
@@ -21,5 +21,4 @@ const PreviewCardPopup = ({ className, children, align = "center", sideOffset =
 		children
 	})
 }) });
-//#endregion
 export { PreviewCard as HoverCard, PreviewCard, PreviewCardPopup as HoverCardContent, PreviewCardPopup, PreviewCardTrigger as HoverCardTrigger, PreviewCardTrigger, PreviewCardPrimitive };

package/dist/components/preview-pane.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/preview-pane.d.ts
 /**
  * Side-pane preview pattern: a list of options (menu items, rows) with a
  * fixed-width pane beside it that previews the highlighted option. The pane
@@ -39,5 +38,4 @@ type PreviewPaneProps = React$1.ComponentProps<"div"> & {
   size?: "default" | "thumbnail";
 };
 declare const PreviewPane: ({ children, className, overflow, size, ...props }: PreviewPaneProps) => React$1.JSX.Element;
-//#endregion
 export { MenuPreviewLayout, PreviewPane };

package/dist/components/preview-pane.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { ScrollArea } from "./scroll-area.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/preview-pane.tsx
+// src/components/preview-pane.tsx
 const MenuPreviewLayout = ({ children, preview, className, previewWidth = "fixed" }) => /* @__PURE__ */ jsxs("div", {
 	className: cn("flex items-stretch", className),
 	"data-slot": "menu-preview-layout",
@@ -40,5 +40,4 @@ const PreviewPane = ({ children, className, overflow = "clip", size = "default",
 		children
 	})
 });
-//#endregion
 export { MenuPreviewLayout, PreviewPane };

package/dist/components/prose.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/prose.d.ts
 /** Preserve source word breaks while allowing oversized tokens to fit narrow panes. */
 export declare const LEGAL_TEXT_CLASS_NAME = "hyphens-manual wrap-anywhere";
 declare const proseVariants: (props?: ({
@@ -9,5 +8,4 @@ declare const proseVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** A readable measure for narrative copy; task-shaped text should not use it. */
 export declare const Prose: ({ className, size, tone, ...props }: React$1.ComponentProps<"p"> & VariantProps<typeof proseVariants>) => React$1.JSX.Element;
-//#endregion
 export {};

package/dist/components/prose.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/prose.tsx
+// src/components/prose.tsx
 /** Preserve source word breaks while allowing oversized tokens to fit narrow panes. */
 const LEGAL_TEXT_CLASS_NAME = "hyphens-manual wrap-anywhere";
 const proseVariants = cva("max-w-[80ch] leading-relaxed", {
@@ -32,5 +32,4 @@ const Prose = ({ className, size, tone, ...props }) => /* @__PURE__ */ jsx("p",
 	}), className),
 	...props
 });
-//#endregion
 export { LEGAL_TEXT_CLASS_NAME, Prose };

package/dist/components/scroll-area.d.ts

@@ -1,6 +1,5 @@
 import { Ref } from "react";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
-//#region src/components/scroll-area.d.ts
 /**
  * Which way the area may scroll. `both` is the primitive's own behaviour: a
  * viewport that scrolls whichever axis its content overflows. `vertical` is
@@ -27,5 +26,4 @@ declare const ScrollArea: ({ axis, className, children, scrollFade, scrollbarCla
   viewportRef?: Ref<HTMLDivElement>;
 }) => import("react").JSX.Element;
 declare const ScrollBar: ({ className, orientation, ...props }: ScrollArea$1.Scrollbar.Props) => import("react").JSX.Element;
-//#endregion
 export { ScrollArea, ScrollBar };

package/dist/components/scroll-area.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
-//#region src/components/scroll-area.tsx
+// src/components/scroll-area.tsx
 const AXIS_VIEWPORT_CLASS = {
 	both: "",
 	vertical: "overflow-x-hidden"
@@ -38,5 +38,4 @@ const ScrollBar = ({ className, orientation = "vertical", ...props }) => /* @__P
 		"data-slot": "scroll-area-thumb"
 	})
 });
-//#endregion
 export { ScrollArea, ScrollBar };

package/dist/components/scroll-to-top.d.ts

@@ -1,5 +1,4 @@
 import { RefObject } from "react";
-//#region src/components/scroll-to-top.d.ts
 export type ScrollToTopProps = {
   scrollContainerRef: RefObject<HTMLElement | null>;
   /** Show once scrollTop exceeds this many px. */
@@ -7,5 +6,4 @@ export type ScrollToTopProps = {
   label?: string;
   className?: string;
 };
-export declare const ScrollToTop: ({ scrollContainerRef, threshold, label, className }: ScrollToTopProps) => import("react").JSX.Element;
-//#endregion
+export declare const ScrollToTop: ({ scrollContainerRef, threshold, label, className }: ScrollToTopProps) => import("react").JSX.Element;

package/dist/components/scroll-to-top.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
-//#region src/components/scroll-to-top.tsx
+// src/components/scroll-to-top.tsx
 /**
 * Scroll-to-top affordance — a subtle floating button that fades in once a
 * scroll container is scrolled past a threshold and jumps back to the top
@@ -39,5 +39,4 @@ const ScrollToTop = ({ scrollContainerRef, threshold = 600, label = "Scroll to t
 		})
 	});
 };
-//#endregion
 export { ScrollToTop };

package/dist/components/search-field.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { InputGroupInput } from "./input-group.js";
-//#region src/components/search-field.d.ts
 type SearchFieldProps = Omit<React$1.ComponentProps<typeof InputGroupInput>, "onChange" | "type" | "value"> & {
   value: string;
   onValueChange: (value: string) => void;
@@ -16,5 +15,4 @@ type SearchFieldProps = Omit<React$1.ComponentProps<typeof InputGroupInput>, "on
  * hundred rows.
  */
 declare const SearchField: ({ value, onValueChange, clearLabel, groupClassName, className, onKeyDown, ...props }: SearchFieldProps) => React$1.JSX.Element;
-//#endregion
 export { SearchField, type SearchFieldProps };

package/dist/components/search-field.js

@@ -4,7 +4,7 @@ import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/search-field.tsx
+// src/components/search-field.tsx
 /**
 * Filter-as-you-type search box: leading magnifier, clear button once there is
 * a query, and Escape clears before it blurs. The caller owns the query state
@@ -46,5 +46,4 @@ const SearchField = ({ value, onValueChange, clearLabel, groupClassName, classNa
 		})
 	})]
 });
-//#endregion
 export { SearchField };

package/dist/components/secret-input.d.ts

@@ -1,9 +1,7 @@
 import { InputProps } from "./input.js";
-//#region src/components/secret-input.d.ts
 type SecretInputProps = Omit<InputProps, "type"> & {
   hideValueLabel: string;
   showValueLabel: string;
 };
 declare const SecretInput: ({ className, dir, disabled, hideValueLabel, showValueLabel, ...props }: SecretInputProps) => import("react").JSX.Element;
-//#endregion
 export { SecretInput, type SecretInputProps };

package/dist/components/secret-input.js

@@ -5,7 +5,7 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-//#region src/components/secret-input.tsx
+// src/components/secret-input.tsx
 const SecretInput = ({ className, dir, disabled, hideValueLabel, showValueLabel, ...props }) => {
 	const [visibility, setVisibility] = useState("concealed");
 	const isRevealed = visibility === "revealed";
@@ -34,5 +34,4 @@ const SecretInput = ({ className, dir, disabled, hideValueLabel, showValueLabel,
 		})]
 	});
 };
-//#endregion
 export { SecretInput };

package/dist/components/segmented-icon-toggle.d.ts

@@ -1,5 +1,4 @@
 import { ComponentType } from "react";
-//#region src/components/segmented-icon-toggle.d.ts
 type SegmentedIconToggleOption<T extends string> = {
   value: T;
   icon: ComponentType<{
@@ -19,5 +18,4 @@ type SegmentedIconToggleProps<T extends string> = {
  * the same across the app. A `ToggleGroup` of icon items that always holds
  * one value: clicking the chosen option keeps it. */
 export declare const SegmentedIconToggle: <T extends string>({ value, options, onChange, size }: SegmentedIconToggleProps<T>) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/segmented-icon-toggle.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/segmented-icon-toggle.tsx
+// src/components/segmented-icon-toggle.tsx
 /** Compact segmented control of icon buttons (e.g. table row wrap, list
 * density). One shared shell so every density/mode switch looks and behaves
 * the same across the app. A `ToggleGroup` of icon items that always holds
@@ -19,7 +19,7 @@ const SegmentedIconToggle = ({ value, options, onChange, size = "compact" }) =>
 		const Icon = option.icon;
 		return /* @__PURE__ */ jsx(ToggleGroupItem, {
 			"aria-label": option.label,
-			className: cn("h-6 w-7 rounded-[4px] sm:h-6", size === "touch" && "[@media(any-pointer:coarse)]:h-11 [@media(any-pointer:coarse)]:w-11"),
+			className: cn("h-6 w-7 rounded-sm sm:h-6", size === "touch" && "[@media(any-pointer:coarse)]:h-11 [@media(any-pointer:coarse)]:w-11"),
 			"data-control-value": option.value,
 			size: "icon-xs",
 			value: option.value,
@@ -27,5 +27,4 @@ const SegmentedIconToggle = ({ value, options, onChange, size = "compact" }) =>
 		}, option.value);
 	})
 });
-//#endregion
 export { SegmentedIconToggle };

package/dist/components/select.d.ts

@@ -1,7 +1,6 @@
 import * as React$1 from "react";
 import { ControlSize } from "../lib/control-size.js";
 import { Select as Select$1 } from "@base-ui/react/select";
-//#region src/components/select.d.ts
 type SelectItemProps = Select$1.Item.Props & {
   label?: string;
 };
@@ -22,5 +21,4 @@ declare const SelectItem: ({ className, children, label: _label, ...props }: Sel
 declare const SelectSeparator: ({ className, ...props }: Select$1.Separator.Props) => React$1.JSX.Element;
 declare const SelectGroup: (props: Select$1.Group.Props) => React$1.JSX.Element;
 declare const SelectGroupLabel: (props: Select$1.GroupLabel.Props) => React$1.JSX.Element;
-//#endregion
 export { Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/select.js

@@ -1,14 +1,14 @@
 "use client";
+import { useLatest } from "../hooks/use-latest.js";
 import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "../icons.js";
-import { cn } from "../lib/utils.js";
-import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
 import { FIELD_TRIGGER_CLASS_NAME } from "../lib/field-trigger.js";
-import { useLatest } from "../hooks/use-latest.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Select as Select$1 } from "@base-ui/react/select";
-//#region src/components/select.tsx
+// src/components/select.tsx
 const SelectItemDisplaysContext = React$1.createContext(/* @__PURE__ */ new Map());
 const renderSelectedDisplay = (displays, placeholder) => (value) => {
 	if (!displays.has(value)) return placeholder ?? null;
@@ -191,5 +191,4 @@ const SelectGroupLabel = (props) => /* @__PURE__ */ jsx(Select$1.GroupLabel, {
 	"data-slot": "select-group-label",
 	...props
 });
-//#endregion
 export { Select, SelectPopup as SelectContent, SelectPopup, SelectGroup, SelectGroupLabel, SelectItem, SelectSeparator, SelectTrigger, SelectValue };

package/dist/components/separator.d.ts

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from "react";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
-//#region src/components/separator.d.ts
 declare const Separator: ({ className, orientation, ...props }: Separator$1.Props) => import("react").JSX.Element;
 type TextSeparatorProps = PropsWithChildren<{
   /** Container overrides, e.g. gap or vertical padding. */
@@ -37,5 +36,4 @@ type ResizeSeparatorProps = {
  * adds no visible width of its own.
  */
 declare const ResizeSeparator: ({ className, label, value, min, max, keyboardStep, onResize }: ResizeSeparatorProps) => import("react").JSX.Element;
-//#endregion
 export { ResizeSeparator, Separator, TextSeparator };

package/dist/components/separator.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
-//#region src/components/separator.tsx
+// src/components/separator.tsx
 const Separator = ({ className, orientation = "horizontal", ...props }) => /* @__PURE__ */ jsx(Separator$1, {
 	className: cn("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch", className),
 	"data-slot": "separator",
@@ -73,5 +73,4 @@ const ResizeSeparator = ({ className, label, value, min, max, keyboardStep, onRe
 		tabIndex: 0
 	});
 };
-//#endregion
 export { ResizeSeparator, Separator, TextSeparator };

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

@@ -1,6 +1,5 @@
 import { SeparatorContract } from "./separator.shared.js";
 import { ViewProps } from "react-native";
-//#region src/components/separator.native.d.ts
 /**
  * The web's `Separator` (./separator.tsx) on a phone: a hairline in the
  * border colour, across the container or, `vertical`, down it. A list passes
@@ -10,5 +9,4 @@ export declare const Separator: ({ className, orientation, ...props }: ViewProps
   className?: string | undefined;
   /** A hairline holds nothing. */
   children?: never;
-}) => import("react").JSX.Element;
-//#endregion
+}) => import("react").JSX.Element;

package/dist/components/separator.native.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { View } from "react-native";
-//#region src/components/separator.native.tsx
+// src/components/separator.native.tsx
 /**
 * The web's `Separator` (./separator.tsx) on a phone: a hairline in the
 * border colour, across the container or, `vertical`, down it. A list passes
@@ -12,5 +12,4 @@ const Separator = ({ className, orientation = "horizontal", ...props }) => /* @_
 	className: `bg-border ${orientation === "vertical" ? "w-px self-stretch" : "h-px w-full"} ${className ?? ""}`,
 	importantForAccessibility: "no-hide-descendants"
 });
-//#endregion
 export { Separator };

package/dist/components/separator.shared.d.ts

@@ -1,6 +1,4 @@
-//#region src/components/separator.shared.d.ts
 /** The props every separator renderer accepts, with one meaning. */
 export type SeparatorContract = {
   orientation?: "horizontal" | "vertical";
-};
-//#endregion
+};