@stll/ui 0.65.1 → 0.67.0

package/dist/components/kbd.d.ts

@@ -0,0 +1,58 @@
+import * as React$1 from "react";
+/**
+ * A key or a key combination, drawn as key caps.
+ *
+ * Give it `keys` and it spells modifiers the way the reader's platform does:
+ * `["mod", "K"]` reads `⌘K` on Apple devices and `Ctrl+K` elsewhere. The
+ * server and the first client render use the non-Apple spelling, and the
+ * label switches once mounted, so hydration never disagrees. Children are
+ * shown as written, for a key that needs no translation.
+ *
+ * `MenuShortcut` and `TooltipPopup`'s `shortcut` render through it, so a
+ * shortcut reads the same in a menu, a tooltip and a hint.
+ */
+declare const Kbd: ({ className, children, keys, variant, ...props }: KbdProps) => React$1.JSX.Element;
+/** A modifier or named key `Kbd` spells per platform; anything else as is. */
+type KbdNamedKey = "mod" | "ctrl" | "alt" | "shift" | "enter" | "escape" | "backspace" | "delete" | "tab" | "up" | "down" | "left" | "right";
+/**
+ * A named key (see `KbdNamedKey`) or any other key (a letter, a digit, a
+ * symbol), which is shown as written.
+ */
+type KbdKey = string;
+/**
+ * A combination: at least one key, so a shortcut can never draw an empty
+ * key cap.
+ */
+type KbdKeys = readonly [KbdKey, ...KbdKey[]];
+type KbdPlatform = "apple" | "other";
+/**
+ * - `cap` (default): a boxed key cap, for a shortcut that stands on its own
+ *   (a hint, a tooltip).
+ * - `plain`: the keys as quiet text with no box, for the end of a row of
+ *   labels (a menu item), where caps would crowd it.
+ */
+type KbdVariant = "cap" | "plain";
+type KbdProps = React$1.ComponentProps<"kbd"> & {
+  keys?: KbdKeys | undefined;
+  variant?: KbdVariant | undefined;
+};
+/**
+ * The combination as the platform writes it: Apple glyphs run together
+ * (`⌘⇧K`), other platforms join words with `+` (`Ctrl+Shift+K`).
+ */
+declare function formatKeys(keys: readonly KbdKey[], platform: KbdPlatform): string;
+/** What platform detection reads; `userAgentData` is not in every browser. */
+type KbdNavigator = Pick<Navigator, "platform"> & {
+  userAgentData?: {
+    platform?: string | undefined;
+  } | undefined;
+};
+/**
+ * The platform a navigator reports. A browser that has `userAgentData` may
+ * leave its `platform` empty, so an empty name falls back to
+ * `navigator.platform` as a missing one does.
+ */
+declare function kbdPlatformOf(nav: KbdNavigator): KbdPlatform;
+/** The reader's platform once mounted; `other` on the server and in hydration. */
+declare function useKbdPlatform(): KbdPlatform;
+export { Kbd, type KbdKey, type KbdKeys, type KbdNamedKey, type KbdNavigator, type KbdPlatform, type KbdProps, type KbdVariant, formatKeys, kbdPlatformOf, useKbdPlatform };

package/dist/components/kbd.js

@@ -0,0 +1,90 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+// src/components/kbd.tsx
+/**
+* A key or a key combination, drawn as key caps.
+*
+* Give it `keys` and it spells modifiers the way the reader's platform does:
+* `["mod", "K"]` reads `⌘K` on Apple devices and `Ctrl+K` elsewhere. The
+* server and the first client render use the non-Apple spelling, and the
+* label switches once mounted, so hydration never disagrees. Children are
+* shown as written, for a key that needs no translation.
+*
+* `MenuShortcut` and `TooltipPopup`'s `shortcut` render through it, so a
+* shortcut reads the same in a menu, a tooltip and a hint.
+*/
+const Kbd = ({ className, children, keys, variant = "cap", ...props }) => {
+	const platform = useKbdPlatform();
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("inline-flex shrink-0 items-center justify-center gap-0.5 font-sans leading-none font-medium tabular-nums", KBD_VARIANT_CLASS_NAME[variant], className),
+		"data-slot": "kbd",
+		"data-variant": variant,
+		...props,
+		children: keys === void 0 ? children : formatKeys(keys, platform)
+	});
+};
+const KBD_VARIANT_CLASS_NAME = {
+	cap: "border-border bg-muted text-muted-foreground text-2xs h-5 min-w-5 rounded-sm border px-1",
+	plain: "text-foreground-label text-xs tracking-widest"
+};
+const KEY_LABELS = {
+	apple: {
+		alt: "⌥",
+		backspace: "⌫",
+		ctrl: "⌃",
+		delete: "⌦",
+		down: "↓",
+		enter: "↩",
+		escape: "Esc",
+		left: "←",
+		mod: "⌘",
+		right: "→",
+		shift: "⇧",
+		tab: "⇥",
+		up: "↑"
+	},
+	other: {
+		alt: "Alt",
+		backspace: "Backspace",
+		ctrl: "Ctrl",
+		delete: "Del",
+		down: "↓",
+		enter: "Enter",
+		escape: "Esc",
+		left: "←",
+		mod: "Ctrl",
+		right: "→",
+		shift: "Shift",
+		tab: "Tab",
+		up: "↑"
+	}
+};
+function isNamedKey(key) {
+	return Object.hasOwn(KEY_LABELS.other, key);
+}
+/**
+* The combination as the platform writes it: Apple glyphs run together
+* (`⌘⇧K`), other platforms join words with `+` (`Ctrl+Shift+K`).
+*/
+function formatKeys(keys, platform) {
+	return keys.map((key) => isNamedKey(key) ? KEY_LABELS[platform][key] : key).join(platform === "apple" ? "" : "+");
+}
+const APPLE_PLATFORM_PATTERN = /mac|iphone|ipad|ipod/iu;
+/**
+* The platform a navigator reports. A browser that has `userAgentData` may
+* leave its `platform` empty, so an empty name falls back to
+* `navigator.platform` as a missing one does.
+*/
+function kbdPlatformOf(nav) {
+	const name = nav.userAgentData?.platform || nav.platform;
+	return APPLE_PLATFORM_PATTERN.test(name) ? "apple" : "other";
+}
+const detectKbdPlatform = () => kbdPlatformOf(navigator);
+const subscribeToNothing = () => () => void 0;
+/** The reader's platform once mounted; `other` on the server and in hydration. */
+function useKbdPlatform() {
+	return useSyncExternalStore(subscribeToNothing, detectKbdPlatform, () => "other");
+}
+export { Kbd, formatKeys, kbdPlatformOf, useKbdPlatform };

package/dist/components/label.d.ts

@@ -1,5 +1,4 @@
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/label.d.ts
 /**
  * - `default`: the caption above or beside a control.
  * - `choice`: one row of a list of choices, wrapping its radio or checkbox so
@@ -23,5 +22,4 @@ type LabelVariant = keyof typeof LABEL_VARIANT_CLASS_NAME;
 declare function Label({ className, render, variant, ...props }: useRender.ComponentProps<"label"> & {
   variant?: LabelVariant;
 }): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-//#endregion
 export { Label, type LabelVariant };

package/dist/components/label.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/label.tsx
+// src/components/label.tsx
 /**
 * - `default`: the caption above or beside a control.
 * - `choice`: one row of a list of choices, wrapping its radio or checkbox so
@@ -33,5 +33,4 @@ function Label({ className, render, variant = "default", ...props }) {
 		render
 	});
 }
-//#endregion
 export { Label };

package/dist/components/landing.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement, ReactNode } from "react";
-//#region src/components/landing.d.ts
 /**
  * A home screen's one shape: a greeting and a box in the upper fold, three
  * columns of what the reader reaches from it below. The chat home and the
@@ -61,5 +60,4 @@ type LandingEmptyProps = {
   children: ReactNode;
 };
 export declare const LandingEmpty: ({ children }: LandingEmptyProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/landing.js

@@ -3,7 +3,7 @@ import { cn } from "../lib/utils.js";
 import { BidiText } from "./bidi-text.js";
 import { ScrollArea } from "./scroll-area.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/landing.tsx
+// src/components/landing.tsx
 const LandingLayout = ({ actions, hero, children, footer }) => /* @__PURE__ */ jsxs("div", {
 	className: "mx-auto flex h-full w-full max-w-5xl flex-1 flex-col overflow-hidden",
 	children: [actions, /* @__PURE__ */ jsx("div", {
@@ -106,5 +106,4 @@ const LandingEmpty = ({ children }) => /* @__PURE__ */ jsx("div", {
 	className: "border-border text-muted-foreground rounded-md border border-dashed px-3 py-3 text-sm",
 	children
 });
-//#endregion
 export { LANDING_ROW_CLASS, LANDING_SECTION_HEADING_CLASS, LandingButton, LandingEmpty, LandingGreeting, LandingItemText, LandingLayout, LandingRowIcon, LandingSection };

package/dist/components/list.d.ts

@@ -1,7 +1,6 @@
 import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
-//#region src/components/list.d.ts
 /**
  * Grouped list: a titled section holding one surface of hairline-divided
  * rows. Use it for settings and inventories of named things (connections,
@@ -60,5 +59,4 @@ type StatusTone = "neutral" | "success" | "warning" | "destructive";
 declare const ListItemStatus: ({ tone, className, children, ...props }: React$1.ComponentProps<"span"> & {
   tone?: StatusTone;
 }) => React$1.JSX.Element;
-//#endregion
 export { List, ListEmpty, ListGroup, ListGroupAction, ListGroupCount, ListGroupDescription, ListGroupHeader, ListGroupHeading, ListGroupTitle, ListItem, ListItemActions, ListItemContent, ListItemDescription, ListItemMedia, ListItemStatus, ListItemTitle, type StatusTone };

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

@@ -1,9 +1,9 @@
 import { LayersIcon } from "../icons.js";
-import { cn } from "../lib/utils.js";
 import { resolveMatterColor } from "../lib/matter-colors.js";
+import { cn } from "../lib/utils.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

@@ -1,12 +1,13 @@
 "use client";
 import { ChevronRightIcon } from "../icons.js";
-import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
-import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
+import { cn } from "../lib/utils.js";
 import { DirectionalIcon } from "./directional-icon.js";
+import { Kbd } from "./kbd.js";
+import { renderTooltipTrigger } from "./tooltip-trigger-helper.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

@@ -1,10 +1,10 @@
 "use client";
-import { cn } from "../lib/utils.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
+import { cn } from "../lib/utils.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 };