@stll/ui 0.65.1 → 0.66.0

package/dist/components/list.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
-//#region src/components/list.tsx
+// src/components/list.tsx
 /**
 * Grouped list: a titled section holding one surface of hairline-divided
 * rows. Use it for settings and inventories of named things (connections,
@@ -162,5 +162,4 @@ const ListItemStatus = ({ tone = "neutral", className, children, ...props }) =>
 		className: cn("size-1.5 shrink-0 rounded-full", STATUS_DOT_CLASS[tone])
 	}), children]
 });
-//#endregion
 export { List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle };

package/dist/components/loader.d.ts

@@ -1,6 +1,5 @@
 import { ComponentProps } from "react";
 import { LoaderSize } from "./loader.shared.js";
-//#region src/components/loader.d.ts
 /**
  * The indeterminate loading indicator for a control or a row: a plain
  * spinner. Inline (`sm`) next to a control that is busy, `md` in a row or a
@@ -37,5 +36,4 @@ type LoaderStateProps = {
   hint?: string | undefined;
   className?: string | undefined;
 };
-//#endregion
 export { Loader, LoaderState };

package/dist/components/loader.js

@@ -2,7 +2,7 @@ import { LoaderCircleIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { StellaMark } from "./stella-mark.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/loader.tsx
+// src/components/loader.tsx
 /**
 * The indeterminate loading indicator for a control or a row: a plain
 * spinner. Inline (`sm`) next to a control that is busy, `md` in a row or a
@@ -58,5 +58,4 @@ const LOADER_SIZE = {
 	lg: "size-8"
 };
 const LoaderMark = () => /* @__PURE__ */ jsx(StellaMark, { className: "animate-loader text-muted-foreground size-full motion-reduce:animate-none motion-reduce:opacity-70" });
-//#endregion
 export { Loader, LoaderState };

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

@@ -1,6 +1,5 @@
 import { ActivityIndicatorProps } from "react-native";
 import { LoaderContract, LoaderSize } from "./loader.shared.js";
-//#region src/components/loader.native.d.ts
 type LoaderProps = Omit<ActivityIndicatorProps, "size"> & {
   className?: string | undefined;
   /** The colour is the loader's own: the muted foreground, as on the web. */
@@ -24,5 +23,4 @@ type LoaderProps = Omit<ActivityIndicatorProps, "size"> & {
  * the platform's spinner in the muted foreground, at the web's sizes.
  */
 export declare const Loader: ({ label, size, variant, ...props }: LoaderProps) => import("react").JSX.Element;
-//#endregion
 export type { LoaderContract };

package/dist/components/loader.native.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { ActivityIndicator } from "react-native";
-//#region src/components/loader.native.tsx
+// src/components/loader.native.tsx
 /** The platform's indicator comes in two sizes; `lg` is a region's. */
 const INDICATOR_SIZE = {
 	sm: "small",
@@ -19,5 +19,4 @@ const Loader = ({ label, size = "md", variant = "status", ...props }) => /* @__P
 	importantForAccessibility: variant === "decorative" ? "no-hide-descendants" : "auto",
 	size: INDICATOR_SIZE[size]
 });
-//#endregion
 export { Loader };

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

@@ -1,4 +1,3 @@
-//#region src/components/loader.shared.d.ts
 /** Inline beside a busy control (`sm`), in a row or panel (`md`), or a region (`lg`). */
 export declare const LOADER_SIZES: readonly ["sm", "md", "lg"];
 export type LoaderSize = (typeof LOADER_SIZES)[number];
@@ -13,5 +12,4 @@ export type LoaderContract = {
   /** The surrounding control or text announces the pending state. */
   variant: "decorative";
   label?: never;
-});
-//#endregion
+});

package/dist/components/loader.shared.js

@@ -1,9 +1,8 @@
-//#region src/components/loader.shared.ts
+// src/components/loader.shared.ts
 /** Inline beside a busy control (`sm`), in a row or panel (`md`), or a region (`lg`). */
 const LOADER_SIZES = [
 	"sm",
 	"md",
 	"lg"
 ];
-//#endregion
 export { LOADER_SIZES };

package/dist/components/matter-icon.d.ts

@@ -1,5 +1,4 @@
 import { MatterIconContract } from "./matter-icon.shared.js";
-//#region src/components/matter-icon.d.ts
 type MatterIconProps = {
   className?: string | undefined;
 } & MatterIconContract;
@@ -7,5 +6,4 @@ export declare const MatterIcon: (props: MatterIconProps) => import("react").JSX
 export declare const MattersNavIcon: ({ className }: {
   className?: string | undefined;
 }) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/matter-icon.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import { resolveMatterColor } from "../lib/matter-colors.js";
 import { ALL_MATTERS_STACK } from "./matter-icon.shared.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/matter-icon.tsx
+// src/components/matter-icon.tsx
 const MatterIcon = (props) => {
 	if ("matter" in props) return /* @__PURE__ */ jsx(LayersIcon, {
 		"aria-hidden": "true",
@@ -32,5 +32,4 @@ const MattersNavIcon = ({ className }) => /* @__PURE__ */ jsx(MatterIcon, {
 	className,
 	variant: "none"
 });
-//#endregion
 export { MatterIcon, MattersNavIcon };

package/dist/components/matter-icon.native.d.ts

@@ -1,5 +1,4 @@
 import { MatterIconContract } from "./matter-icon.shared.js";
-//#region src/components/matter-icon.native.d.ts
 /**
  * The shared contract, with a matter's colour optional: the app's matter
  * records leave it out when none is stored, which the web reads as null.
@@ -21,5 +20,4 @@ type MatterIconProps = ({
  * matter; the tri-plane stack for all of them.
  */
 export declare const MatterIcon: (props: MatterIconProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/matter-icon.native.js

@@ -1,10 +1,10 @@
 import { resolveMatterColor } from "../lib/matter-colors.js";
 import { ALL_MATTERS_STACK } from "./matter-icon.shared.js";
 import { jsx } from "react/jsx-runtime";
-import { LayersIcon } from "lucide-react-native";
 import Svg, { Path } from "react-native-svg";
+import { LayersIcon } from "lucide-react-native";
 import { useCSSVariable } from "uniwind";
-//#region src/components/matter-icon.native.tsx
+// src/components/matter-icon.native.tsx
 /**
 * Every palette option a matter can be painted in, as a class. uniwind keeps
 * only the theme variables some class uses, so naming each option here keeps
@@ -74,5 +74,4 @@ const MatterIcon = (props) => {
 		size
 	});
 };
-//#endregion
 export { MatterIcon };

package/dist/components/matter-icon.shared.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/matter-icon.shared.d.ts
 export type MatterIconContract = {
   matter: {
     id: string;
@@ -17,5 +16,4 @@ export declare const ALL_MATTERS_STACK: readonly [{
 }, {
   readonly d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17";
   readonly option: "green";
-}];
-//#endregion
+}];

package/dist/components/matter-icon.shared.js

@@ -1,4 +1,4 @@
-//#region src/components/matter-icon.shared.ts
+// src/components/matter-icon.shared.ts
 /** The three planes of the "all matters" glyph, top to bottom, in their tints. */
 const ALL_MATTERS_STACK = [
 	{
@@ -14,5 +14,4 @@ const ALL_MATTERS_STACK = [
 		option: "green"
 	}
 ];
-//#endregion
 export { ALL_MATTERS_STACK };

package/dist/components/menu-section.d.ts

@@ -1,5 +1,4 @@
 import { PropsWithChildren } from "react";
-//#region src/components/menu-section.d.ts
 /**
  * A titled group of menu rows. Owns the group's inset, its heading and the
  * stack the rows sit in, so sibling lists in one panel share a rhythm; the rows
@@ -8,5 +7,4 @@ import { PropsWithChildren } from "react";
 declare const MenuSection: ({ children, title }: PropsWithChildren<{
   title: string;
 }>) => import("react").JSX.Element;
-//#endregion
 export { MenuSection };

package/dist/components/menu-section.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/menu-section.tsx
+// src/components/menu-section.tsx
 /**
 * A titled group of menu rows. Owns the group's inset, its heading and the
 * stack the rows sit in, so sibling lists in one panel share a rhythm; the rows
@@ -16,5 +16,4 @@ const MenuSection = ({ children, title }) => /* @__PURE__ */ jsxs("section", {
 		children
 	})]
 });
-//#endregion
 export { MenuSection };

package/dist/components/menu.d.ts

@@ -1,6 +1,6 @@
 import * as React$1 from "react";
+import { Kbd } from "./kbd.js";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
-//#region src/components/menu.d.ts
 declare const MenuCreateHandle: typeof Menu$1.createHandle;
 declare const Menu: typeof Menu$1.Root;
 declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -27,6 +27,16 @@ declare const MenuItem: ({ className, inset, variant, ...props }: Menu$1.Item.Pr
   inset?: boolean;
   variant?: "default" | "destructive";
 }) => React$1.JSX.Element;
+/**
+ * A menu row that navigates: an `<a>` with the item's look, so it opens in a
+ * new tab on a modified click, shows its URL on hover and is announced as a
+ * link. Use it for "Open in new tab", "View invoice", help pages; a `MenuItem`
+ * with an `onClick` that navigates loses all of that. Pass a router link
+ * through `render` to keep client-side navigation.
+ */
+declare const MenuLinkItem: ({ className, inset, ...props }: Menu$1.LinkItem.Props & {
+  inset?: boolean;
+}) => React$1.JSX.Element;
 declare const MenuCheckboxItem: ({ className, children, checked, variant, ...props }: Menu$1.CheckboxItem.Props & {
   variant?: "default" | "switch";
 }) => React$1.JSX.Element;
@@ -38,7 +48,12 @@ declare const MenuGroupLabel: ({ className, inset, ...props }: Menu$1.GroupLabel
   inset?: boolean;
 }) => React$1.JSX.Element;
 declare const MenuSeparator: ({ className, ...props }: Menu$1.Separator.Props) => React$1.JSX.Element;
-declare const MenuShortcut: ({ className, ...props }: React$1.ComponentProps<"kbd">) => React$1.JSX.Element;
+/**
+ * The shortcut at the end of a menu row. Pass `keys` (`["mod", "K"]`) to have
+ * it spelled for the reader's platform; see `Kbd`. It is the `plain` `Kbd`,
+ * with no key-cap box, which would crowd a row of labels.
+ */
+declare const MenuShortcut: ({ className, ...props }: Omit<React$1.ComponentProps<typeof Kbd>, "variant">) => React$1.JSX.Element;
 declare const MenuSub: (props: Menu$1.SubmenuRoot.Props) => React$1.JSX.Element;
 declare const MenuSubTrigger: ({ className, inset, children, ...props }: Menu$1.SubmenuTrigger.Props & {
   inset?: boolean;
@@ -50,5 +65,4 @@ declare const MenuSubPopup: ({ className, sideOffset, alignOffset, align, ...pro
   sideOffset?: Menu$1.Positioner.Props["sideOffset"];
   alignOffset?: Menu$1.Positioner.Props["alignOffset"];
 }) => React$1.JSX.Element;
-//#endregion
-export { Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, MenuAnchor };
+export { Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuLinkItem as DropdownMenuLinkItem, MenuLinkItem, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, MenuAnchor };

package/dist/components/menu.js

@@ -2,11 +2,12 @@
 import { ChevronRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { Kbd } from "./kbd.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { DirectionalIcon } from "./directional-icon.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
-//#region src/components/menu.tsx
+// src/components/menu.tsx
 const MenuCreateHandle = Menu$1.createHandle;
 const Menu = Menu$1.Root;
 const MenuPortal = Menu$1.Portal;
@@ -50,13 +51,27 @@ const MenuGroup = (props) => /* @__PURE__ */ jsx(Menu$1.Group, {
 	"data-slot": "menu-group",
 	...props
 });
+const MENU_ITEM_CLASS_NAME = "text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive-foreground flex min-h-8 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-base outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-64 data-inset:ps-8 sm:min-h-7 sm:text-sm pointer-coarse:min-h-11 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0 [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4";
 const MenuItem = ({ className, inset, variant = "default", ...props }) => /* @__PURE__ */ jsx(Menu$1.Item, {
-	className: cn("text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[variant=destructive]:text-destructive-foreground flex min-h-8 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-base outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-64 data-inset:ps-8 sm:min-h-7 sm:text-sm pointer-coarse:min-h-11 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0 [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4", className),
+	className: cn(MENU_ITEM_CLASS_NAME, className),
 	"data-inset": inset,
 	"data-slot": "menu-item",
 	"data-variant": variant,
 	...props
 });
+/**
+* A menu row that navigates: an `<a>` with the item's look, so it opens in a
+* new tab on a modified click, shows its URL on hover and is announced as a
+* link. Use it for "Open in new tab", "View invoice", help pages; a `MenuItem`
+* with an `onClick` that navigates loses all of that. Pass a router link
+* through `render` to keep client-side navigation.
+*/
+const MenuLinkItem = ({ className, inset, ...props }) => /* @__PURE__ */ jsx(Menu$1.LinkItem, {
+	className: cn(MENU_ITEM_CLASS_NAME, className),
+	"data-inset": inset,
+	"data-slot": "menu-link-item",
+	...props
+});
 const MenuCheckboxItem = ({ className, children, checked, variant = "default", ...props }) => /* @__PURE__ */ jsx(Menu$1.CheckboxItem, {
 	checked,
 	className: cn("text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground grid min-h-8 cursor-pointer items-center gap-2 rounded-sm py-1 ps-2 text-base outline-none in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-7 sm:text-sm pointer-coarse:min-h-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", variant === "switch" ? "grid-cols-[1fr_auto] gap-4 pe-1.5" : "grid-cols-[1rem_minmax(0,1fr)] pe-4", className),
@@ -126,10 +141,16 @@ const MenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Menu$1.Se
 	"data-slot": "menu-separator",
 	...props
 });
-const MenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx("kbd", {
-	className: cn("text-foreground-label ms-auto font-sans text-xs font-medium tracking-widest", className),
+/**
+* The shortcut at the end of a menu row. Pass `keys` (`["mod", "K"]`) to have
+* it spelled for the reader's platform; see `Kbd`. It is the `plain` `Kbd`,
+* with no key-cap box, which would crowd a row of labels.
+*/
+const MenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(Kbd, {
+	className: cn("ms-auto", className),
 	"data-slot": "menu-shortcut",
-	...props
+	...props,
+	variant: "plain"
 });
 const MenuSub = (props) => /* @__PURE__ */ jsx(Menu$1.SubmenuRoot, {
 	"data-slot": "menu-sub",
@@ -156,5 +177,4 @@ const MenuSubPopup = ({ className, sideOffset = 0, alignOffset, align = "start",
 		...props
 	});
 };
-//#endregion
-export { Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, MenuAnchor };
+export { Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuLinkItem as DropdownMenuLinkItem, MenuLinkItem, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, MenuAnchor };

package/dist/components/middle-truncate.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/middle-truncate.d.ts
 type MiddleTruncateProps = {
   value: string;
   className?: string;
@@ -15,5 +14,4 @@ type MiddleTruncateProps = {
  * text: the element's text and accessible name stay the full value.
  */
 export declare const MiddleTruncate: ({ value, className }: MiddleTruncateProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/middle-truncate.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { graphemesOf, splitForMiddleTruncate } from "./middle-truncate.logic.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/middle-truncate.tsx
+// src/components/middle-truncate.tsx
 /**
 * One line of text that, when it does not fit, gives up its middle and keeps
 * its end: `Smlouva o dílo – revize…klienta.docx`. For names whose end tells
@@ -108,5 +108,4 @@ function fitHead(head) {
 	head.style.clipPath = rtl ? `inset(-0.25em 0 -0.25em ${String(slack)}px)` : `inset(-0.25em ${String(slack)}px -0.25em 0)`;
 	tail.style.translate = `${String(rtl ? slack : -slack)}px 0`;
 }
-//#endregion
 export { MiddleTruncate };

package/dist/components/middle-truncate.logic.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/middle-truncate.logic.d.ts
 /** The value's user-perceived characters, so a cut never splits one. */
 export declare const graphemesOf: (value: string) => string[];
 type MiddleTruncateSplit = {
@@ -7,5 +6,4 @@ type MiddleTruncateSplit = {
 };
 /** The head and tail of `value`, or null when it should stay in one piece. */
 export declare const splitForMiddleTruncate: (value: string) => MiddleTruncateSplit | null;
-//#endregion
 export {};

package/dist/components/middle-truncate.logic.js

@@ -1,4 +1,4 @@
-//#region src/components/middle-truncate.logic.ts
+// src/components/middle-truncate.logic.ts
 /** The tail aimed for, in graphemes; a word start nearby moves it. */
 const TAIL = 10;
 /** The shortest tail a word start may shrink it to. */
@@ -59,5 +59,4 @@ function tailStart(characters) {
 	for (let index = aimed - 1; index >= longest; index--) if (startsWord(index)) return index;
 	return aimed;
 }
-//#endregion
 export { graphemesOf, splitForMiddleTruncate };

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

@@ -1,7 +1,6 @@
 import { ControlSize } from "../lib/control-size.js";
 import { NumberField } from "@base-ui/react/number-field";
 import { ReactNode } from "react";
-//#region src/components/number-input.d.ts
 type NumberInputProps = Omit<NumberField.Root.Props, "children" | "className" | "render"> & {
   className?: string;
   inputClassName?: string;
@@ -20,5 +19,4 @@ type NumberInputProps = Omit<NumberField.Root.Props, "children" | "className" |
  * formatting and clamping happen only at Base UI's commit boundaries.
  */
 declare const NumberInput: ({ className, inputClassName, inputProps, dir, size, suffix, ...props }: NumberInputProps) => import("react").JSX.Element;
-//#endregion
 export { NumberInput, type NumberInputProps };

package/dist/components/number-input.js

@@ -4,7 +4,7 @@ import { CONTROL_SIZE } from "../lib/control-size.js";
 import { INPUT_CONTROL_CLASS_NAME, INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES } from "./input-control.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { NumberField } from "@base-ui/react/number-field";
-//#region src/components/number-input.tsx
+// src/components/number-input.tsx
 /**
 * A numeric control that keeps the user's editable text separate from its
 * canonical numeric value. Parsed changes are reported through `onValueChange`;
@@ -35,5 +35,4 @@ const NumberInput = ({ className, inputClassName, inputProps, dir = "ltr", size
 		children: suffix
 	})]
 });
-//#endregion
 export { NumberInput };

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

@@ -5,11 +5,12 @@ import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./toolt
 import { ScrollArea } from "./scroll-area.js";
 import { DirectionalIcon } from "./directional-icon.js";
 import "../lib/panel-inset.js";
+import { ReviewAuthorAvatar } from "../review/review-author-avatar.js";
 import { reconcileOutlineItems, retainOutlineIdSet } from "./outline-rail.logic.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 };