@stll/ui 0.0.1-placeholder.0 → 0.3.0

package/dist/components/menu.js

@@ -0,0 +1,152 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
+import { DirectionalIcon } from "./directional-icon.js";
+import { ChevronRightIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+//#region src/components/menu.tsx
+const MenuCreateHandle = Menu$1.createHandle;
+const Menu = Menu$1.Root;
+const MenuPortal = Menu$1.Portal;
+function MenuTrigger({ tooltip, ...props }) {
+	return renderTooltipTrigger({
+		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		trigger: /* @__PURE__ */ jsx(Menu$1.Trigger, {
+			"data-slot": "menu-trigger",
+			nativeButton: true,
+			...props
+		})
+	});
+}
+const MenuPopup = ({ children, className, sideOffset = 4, align = "center", alignOffset, side = "bottom", anchor, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+	align: anchor ? "start" : align,
+	alignOffset,
+	anchor,
+	className: OVERLAY_LAYER_CLASS_NAMES.popup,
+	"data-slot": "menu-positioner",
+	side: anchor ? "bottom" : side,
+	sideOffset,
+	children: /* @__PURE__ */ jsx(Menu$1.Popup, {
+		className: cn("bg-popover relative flex origin-(--transform-origin) rounded-lg border shadow-lg/5 outline-none not-dark:bg-clip-padding not-[class*='w-']:min-w-32 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "menu-popup",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "max-h-(--available-height) w-full overflow-y-auto p-1",
+			children
+		})
+	})
+}) });
+const MenuGroup = (props) => /* @__PURE__ */ jsx(Menu$1.Group, {
+	"data-slot": "menu-group",
+	...props
+});
+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 [&>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),
+	"data-inset": inset,
+	"data-slot": "menu-item",
+	"data-variant": variant,
+	...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 [&_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_1fr] pe-4", className),
+	"data-slot": "menu-checkbox-item",
+	...props,
+	children: variant === "switch" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		className: "col-start-1",
+		children
+	}), /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
+		className: "focus-visible:ring-ring focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px inset-shadow-[0_1px_--theme(--color-black/4%)] transition-[background-color,box-shadow] duration-200 outline-none [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]",
+		keepMounted: true,
+		children: /* @__PURE__ */ jsx("span", { className: "bg-background pointer-events-none block aspect-square h-full origin-left rounded-(--thumb-size) shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)]" })
+	})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
+		className: "col-start-1",
+		children: /* @__PURE__ */ jsxs("svg", {
+			fill: "none",
+			height: "24",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			viewBox: "0 0 24 24",
+			width: "24",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ jsx("title", { children: "Selected" }), /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })]
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		className: "col-start-2",
+		children
+	})] })
+});
+const MenuRadioGroup = (props) => /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
+	"data-slot": "menu-radio-group",
+	...props
+});
+const MenuRadioItem = ({ className, children, indicator = "check", ...props }) => /* @__PURE__ */ jsx(Menu$1.RadioItem, {
+	className: cn("text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground min-h-8 cursor-pointer items-center gap-2 rounded-sm py-1 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", indicator === "check" ? "grid grid-cols-[1rem_1fr] ps-2 pe-4" : "flex px-2", className),
+	"data-slot": "menu-radio-item",
+	...props,
+	children: indicator === "check" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, {
+		className: "col-start-1",
+		children: /* @__PURE__ */ jsxs("svg", {
+			fill: "none",
+			height: "24",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "2",
+			viewBox: "0 0 24 24",
+			width: "24",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ jsx("title", { children: "Selected" }), /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })]
+		})
+	}), /* @__PURE__ */ jsx("span", {
+		className: "col-start-2",
+		children
+	})] }) : children
+});
+const MenuGroupLabel = ({ className, inset, ...props }) => /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
+	className: cn("text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:ps-9 sm:data-inset:ps-8", className),
+	"data-inset": inset,
+	"data-slot": "menu-label",
+	...props
+});
+const MenuSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Menu$1.Separator, {
+	className: cn("bg-border mx-2 my-1 h-px", className),
+	"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),
+	"data-slot": "menu-shortcut",
+	...props
+});
+const MenuSub = (props) => /* @__PURE__ */ jsx(Menu$1.SubmenuRoot, {
+	"data-slot": "menu-sub",
+	...props
+});
+const MenuSubTrigger = ({ className, inset, children, ...props }) => /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
+	className: cn("text-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex min-h-8 cursor-pointer items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-disabled:opacity-64 data-inset:ps-8 sm:min-h-7 sm:text-sm [&_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),
+	"data-inset": inset,
+	"data-slot": "menu-sub-trigger",
+	...props,
+	children: [children, /* @__PURE__ */ jsx(DirectionalIcon, {
+		className: "ms-auto -me-0.5 opacity-80",
+		icon: ChevronRightIcon
+	})]
+});
+const MenuSubPopup = ({ className, sideOffset = 0, alignOffset, align = "start", ...props }) => {
+	return /* @__PURE__ */ jsx(MenuPopup, {
+		align,
+		alignOffset: alignOffset ?? (align !== "center" ? -5 : void 0),
+		className,
+		"data-slot": "menu-sub-content",
+		side: "inline-end",
+		sideOffset,
+		...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 };

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

@@ -0,0 +1,43 @@
+import { ReactNode, RefObject } from "react";
+//#region src/components/outline-rail.d.ts
+type OutlineItem = {
+  id: string;
+  label: string;
+  /** What the entry contains, after the label that names it. The label
+   *  stays whole; the title is what truncates when the row is narrow. */
+  title?: string;
+  /** Nesting depth among included items; drives indent + tick taper. */
+  level: number;
+  /** Optional trailing annotation in the panel (e.g. a page number or a
+   *  provision range); never truncated. */
+  meta?: string;
+  /** Optional CSS custom-property name colouring this entry's tick + chip
+   *  (e.g. "--option-blue"). Defaults to the neutral foreground. */
+  color?: string;
+};
+type OutlineRailProps = {
+  items: OutlineItem[];
+  scrollContainerRef: RefObject<HTMLElement | null>;
+  /** Vertical position (0–100) of an item's tick. Return null to drop it. */
+  resolvePct: (id: string, container: HTMLElement) => number | null;
+  /** Caller performs the scroll/navigation. */
+  onJump: (id: string, container: HTMLElement) => void;
+  /** Controlled active id; when omitted, derived from `resolvePct`. */
+  activeId?: string | null;
+  /** Pinned at the top of the panel, above the tree (e.g. a jump field).
+   *  Supplying one also keeps the panel mounted when `items` is short, so a
+   *  filter that narrows the tree to nothing cannot take its own control
+   *  away; the caller decides whether the document has an outline at all. */
+  header?: ReactNode;
+  /** Depth from which entries start collapsed. Their ancestors still open on
+   *  their own while one of their descendants is active, so a deep outline
+   *  reads as the chain down to where the reader is rather than as every
+   *  branch at once. Omitted: everything starts expanded. */
+  collapsedFromLevel?: number;
+  topOffset?: number;
+  panelWidth?: number;
+  ariaLabel?: string;
+};
+declare const OutlineRail: ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, collapsedFromLevel, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;
+//#endregion
+export { OutlineItem, OutlineRail, OutlineRailProps };

package/dist/components/outline-rail.js

@@ -0,0 +1,416 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+//#region src/components/outline-rail.tsx
+/**
+* Outline rail — the shared right-edge navigation rail.
+*
+* Always-visible thin column of ticks (width tapering by nesting level).
+* Hovering reveals a single popover panel with the outline as a collapsible
+* tree; the entry currently in view is emphasised. Click a tick or a row to
+* jump.
+*
+* Generic over the position source: callers supply `resolvePct` (vertical % for
+* a tick) and `onJump`. Active tracking is derived from `resolvePct` by default,
+* or driven externally via the controlled `activeId` prop (e.g. a virtualised
+* editor that measures rendered anchors itself).
+*/
+const RAIL_WIDTH = 20;
+const ROW_H = 29;
+const TICK_BASE_WIDTH = 6;
+const TICK_LEVEL_STEP = 2;
+const TICK_MAX_LEVEL = 5;
+const RAIL_MAX_TICKS = 40;
+/** The entry as one line of text: label, then its title when it has one. */
+const entryText = (item) => item.title === void 0 ? item.label : `${item.label} ${item.title}`;
+const tickWidth = (level) => {
+	return TICK_BASE_WIDTH + (TICK_MAX_LEVEL - Math.min(Math.max(level, 0), TICK_MAX_LEVEL)) * TICK_LEVEL_STEP;
+};
+const buildTree = (items) => {
+	const roots = [];
+	const stack = [];
+	for (const [index, item] of items.entries()) {
+		const node = {
+			item,
+			index,
+			children: []
+		};
+		let parent = stack.at(-1);
+		while (parent && parent.item.level >= item.level) {
+			stack.pop();
+			parent = stack.at(-1);
+		}
+		if (parent) parent.children.push(node);
+		else roots.push(node);
+		stack.push(node);
+	}
+	return roots;
+};
+const tickHeight = (isHovered, isActive) => {
+	if (isHovered) return 4;
+	if (isActive) return 3;
+	return 2;
+};
+const tickBackground = (color, isHovered) => {
+	if (color !== void 0) return `var(${color})`;
+	if (isHovered) return "var(--option-blue)";
+	return "var(--color-foreground)";
+};
+const rowTextClass = (isActive, hasChildren) => {
+	if (isActive) return "text-foreground font-medium";
+	if (hasChildren) return "text-foreground-muted";
+	return "text-muted-foreground";
+};
+const Chevron = ({ open }) => /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": true,
+	className: cn("size-3 shrink-0 transition-transform duration-150", open ? "rotate-90" : "rotate-0"),
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: "2",
+	viewBox: "0 0 24 24",
+	children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+});
+const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, collapsedFromLevel, topOffset = 0, panelWidth = 300, ariaLabel = "Outline" }) => {
+	const [pctById, setPctById] = useState({});
+	const [derivedActive, setDerivedActive] = useState(null);
+	const [hovered, setHovered] = useState(false);
+	const [pinned, setPinned] = useState(false);
+	const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+	const [toggled, setToggled] = useState(/* @__PURE__ */ new Set());
+	const [hoveredId, setHoveredId] = useState(null);
+	const panelId = useId();
+	const triggerId = useId();
+	const panelOpen = hovered || pinned;
+	const closeTimer = useRef(null);
+	const manualLockUntil = useRef(0);
+	const panelRef = useRef(null);
+	const resolvePctRef = useRef(resolvePct);
+	const onJumpRef = useRef(onJump);
+	const tree = useMemo(() => buildTree(items), [items]);
+	const [seededItems, setSeededItems] = useState(null);
+	if (seededItems !== items) {
+		setSeededItems(items);
+		setToggled(/* @__PURE__ */ new Set());
+		setCollapsed(collapsedFromLevel === void 0 ? /* @__PURE__ */ new Set() : new Set(items.filter((item) => item.level >= collapsedFromLevel).map((item) => item.id)));
+	}
+	const maxLevel = useMemo(() => {
+		let max = 0;
+		for (const item of items) max = Math.max(max, item.level);
+		return max;
+	}, [items]);
+	const railLevelCap = useMemo(() => {
+		const counts = [];
+		let minLevel = maxLevel;
+		for (const item of items) {
+			counts[item.level] = (counts[item.level] ?? 0) + 1;
+			if (item.level < minLevel) minLevel = item.level;
+		}
+		let cap = maxLevel;
+		let running = items.length;
+		while (cap > minLevel && running > RAIL_MAX_TICKS) {
+			running -= counts[cap] ?? 0;
+			cap -= 1;
+		}
+		return cap;
+	}, [items, maxLevel]);
+	const recalc = useCallback(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const next = {};
+		for (const item of items) {
+			const pct = resolvePct(item.id, container);
+			if (pct !== null) next[item.id] = pct;
+		}
+		setPctById(next);
+	}, [
+		items,
+		scrollContainerRef,
+		resolvePct
+	]);
+	const recalcRef = useRef(recalc);
+	useLayoutEffect(() => {
+		resolvePctRef.current = resolvePct;
+		onJumpRef.current = onJump;
+		recalcRef.current = recalc;
+	});
+	useEffect(() => {
+		recalc();
+	}, [recalc]);
+	useEffect(() => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(() => recalcRef.current());
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, [scrollContainerRef]);
+	useEffect(() => {
+		if (activeId !== void 0) return;
+		const container = scrollContainerRef.current;
+		if (!container || items.length === 0) return;
+		let raf = 0;
+		const compute = () => {
+			if (Date.now() < manualLockUntil.current || container.scrollHeight <= 0) return;
+			const centrePct = (container.scrollTop + container.clientHeight / 2) / container.scrollHeight * 100;
+			let next = null;
+			for (const item of items) {
+				const pct = resolvePctRef.current(item.id, container);
+				if (pct !== null && pct <= centrePct) next = item.id;
+			}
+			setDerivedActive(next);
+		};
+		const onScroll = () => {
+			cancelAnimationFrame(raf);
+			raf = requestAnimationFrame(compute);
+		};
+		container.addEventListener("scroll", onScroll, { passive: true });
+		raf = requestAnimationFrame(compute);
+		return () => {
+			cancelAnimationFrame(raf);
+			container.removeEventListener("scroll", onScroll);
+		};
+	}, [
+		activeId,
+		items,
+		scrollContainerRef
+	]);
+	const active = activeId === void 0 ? derivedActive : activeId;
+	const activeAncestorIds = useMemo(() => {
+		const ancestors = /* @__PURE__ */ new Set();
+		const activeIndex = items.findIndex((item) => item.id === active);
+		let level = items.at(activeIndex)?.level;
+		if (activeIndex === -1 || level === void 0) return ancestors;
+		for (let index = activeIndex - 1; index >= 0 && level > 0; index -= 1) {
+			const candidate = items[index];
+			if (candidate !== void 0 && candidate.level < level) {
+				ancestors.add(candidate.id);
+				level = candidate.level;
+			}
+		}
+		return ancestors;
+	}, [active, items]);
+	const jumpTo = useCallback((id) => {
+		const container = scrollContainerRef.current;
+		if (!container) return;
+		if (activeId === void 0) {
+			setDerivedActive(id);
+			manualLockUntil.current = Date.now() + 900;
+		}
+		onJumpRef.current(id, container);
+	}, [activeId, scrollContainerRef]);
+	const toggleCollapse = useCallback((id, rowEl) => {
+		const rowTop = rowEl?.getBoundingClientRect().top;
+		setToggled((prev) => new Set(prev).add(id));
+		setCollapsed((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+		requestAnimationFrame(() => {
+			const panel = panelRef.current;
+			if (!panel || !rowEl || rowTop === void 0) return;
+			panel.scrollTop += rowEl.getBoundingClientRect().top - rowTop;
+		});
+	}, []);
+	const openPanel = useCallback(() => {
+		if (closeTimer.current !== null) {
+			clearTimeout(closeTimer.current);
+			closeTimer.current = null;
+		}
+		setHovered(true);
+	}, []);
+	const scheduleClose = useCallback(() => {
+		if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+		closeTimer.current = setTimeout(() => setHovered(false), 120);
+	}, []);
+	useEffect(() => {
+		if (pinned) panelRef.current?.focus();
+	}, [pinned]);
+	const closePanel = useCallback(() => {
+		if (closeTimer.current !== null) {
+			clearTimeout(closeTimer.current);
+			closeTimer.current = null;
+		}
+		setHovered(false);
+		setPinned(false);
+	}, []);
+	useEffect(() => () => {
+		if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+	}, []);
+	const renderNode = (node) => {
+		const hasChildren = node.children.length > 0;
+		const isCollapsed = collapsed.has(node.item.id) && !(activeAncestorIds.has(node.item.id) && !toggled.has(node.item.id));
+		const isActive = active === node.item.id;
+		const isHovered = hoveredId === node.item.id;
+		const highlighted = isActive || isHovered;
+		const indent = 8 + Math.min(node.item.level, maxLevel) * 12;
+		return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center rounded-md pe-2.5 transition-colors", !hasChildren && highlighted && "bg-accent"),
+			onMouseEnter: () => setHoveredId(node.item.id),
+			onMouseLeave: () => setHoveredId(null),
+			style: hasChildren ? {
+				position: "sticky",
+				top: node.item.level * ROW_H,
+				zIndex: 40 - node.item.level,
+				background: highlighted ? "linear-gradient(var(--color-accent), var(--color-accent)), var(--color-popover)" : "var(--color-popover)"
+			} : void 0,
+			children: [
+				hasChildren ? /* @__PURE__ */ jsx("button", {
+					"aria-expanded": !isCollapsed,
+					"aria-label": isCollapsed ? "Expand" : "Collapse",
+					className: "text-muted-foreground hover:text-foreground flex size-5 shrink-0 items-center justify-center",
+					onClick: (event) => toggleCollapse(node.item.id, event.currentTarget.parentElement),
+					style: { marginInlineStart: indent - 4 },
+					type: "button",
+					children: /* @__PURE__ */ jsx(Chevron, { open: !isCollapsed })
+				}) : /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "shrink-0",
+					style: { width: indent + 4 }
+				}),
+				node.item.color && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "me-1.5 size-1.5 shrink-0 rounded-full",
+					style: { background: `var(${node.item.color})` }
+				}),
+				/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					render: /* @__PURE__ */ jsx("button", {
+						className: cn("flex min-w-0 flex-1 items-baseline gap-1.5 py-1.5 text-start text-[13px] leading-snug", rowTextClass(isActive, hasChildren)),
+						onClick: () => jumpTo(node.item.id),
+						type: "button"
+					}),
+					children: node.item.title === void 0 ? /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: node.item.label
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "shrink-0 font-medium",
+						children: node.item.label
+					}), /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate font-normal",
+						children: node.item.title
+					})] })
+				}), /* @__PURE__ */ jsx(TooltipPopup, { children: entryText(node.item) })] }),
+				node.item.meta !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "text-foreground-placeholder shrink-0 ps-2 text-[11px] tabular-nums",
+					children: node.item.meta
+				})
+			]
+		}), hasChildren && !isCollapsed && /* @__PURE__ */ jsx("ul", {
+			className: "m-0 list-none p-0",
+			children: node.children.map(renderNode)
+		})] }, `${node.item.id}-${node.index}`);
+	};
+	const visibleTicks = items.filter((item) => item.id in pctById && item.level <= railLevelCap);
+	if (items.length < 2 && header === void 0) return null;
+	const visibleTickIds = new Set(visibleTicks.map((item) => item.id));
+	const ghostItem = hoveredId !== null && !visibleTickIds.has(hoveredId) && hoveredId in pctById ? items.find((item) => item.id === hoveredId) ?? null : null;
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-label": ariaLabel,
+		className: "absolute end-0 z-20 max-lg:hidden",
+		role: "group",
+		style: {
+			top: topOffset,
+			bottom: 0,
+			width: RAIL_WIDTH
+		},
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				"aria-controls": panelId,
+				"aria-expanded": panelOpen,
+				className: "focus-visible:ring-ring bg-popover text-popover-foreground sr-only absolute end-0 top-2 z-30 w-max -translate-x-6 rounded-md border px-2 py-1 text-xs focus:not-sr-only focus-visible:ring-2 focus-visible:outline-none",
+				id: triggerId,
+				onClick: () => {
+					if (pinned) {
+						closePanel();
+						return;
+					}
+					setPinned(true);
+					openPanel();
+				},
+				type: "button",
+				children: ariaLabel
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative h-full",
+				onMouseEnter: openPanel,
+				onMouseLeave: scheduleClose,
+				onWheel: (event) => {
+					scrollContainerRef.current?.scrollBy(0, event.deltaY);
+				},
+				children: [visibleTicks.map((item) => {
+					const isActive = active === item.id;
+					const isHovered = hoveredId === item.id;
+					return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx("button", {
+						"aria-current": isActive ? "true" : void 0,
+						"aria-label": item.label,
+						className: cn("absolute end-0 rounded-full transition-[width,height,opacity,background-color] duration-150", isHovered || isActive ? "opacity-100" : "opacity-45 hover:opacity-90"),
+						onClick: () => jumpTo(item.id),
+						onMouseEnter: () => setHoveredId(item.id),
+						onMouseLeave: () => setHoveredId(null),
+						style: {
+							top: `${pctById[item.id]}%`,
+							transform: "translateY(-50%)",
+							width: isHovered ? tickWidth(item.level) + 8 : tickWidth(item.level),
+							height: tickHeight(isHovered, isActive),
+							background: tickBackground(item.color, isHovered)
+						},
+						type: "button"
+					}) }), /* @__PURE__ */ jsx(TooltipPopup, { children: item.label })] }, item.id);
+				}), ghostItem && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					className: "absolute end-0 rounded-full opacity-100",
+					style: {
+						top: `${pctById[ghostItem.id]}%`,
+						transform: "translateY(-50%)",
+						width: tickWidth(ghostItem.level) + 8,
+						height: 4,
+						background: ghostItem.color ? `var(${ghostItem.color})` : "var(--option-blue)"
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsxs("nav", {
+				"aria-hidden": !panelOpen,
+				id: panelId,
+				inert: panelOpen ? void 0 : true,
+				tabIndex: -1,
+				className: cn("border-border bg-popover text-popover-foreground absolute overflow-y-auto rounded-xl border pb-2 shadow-lg transition-[opacity,transform] duration-150", panelOpen ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-2 opacity-0"),
+				onBlurCapture: (event) => {
+					if (pinned && !event.currentTarget.contains(event.relatedTarget)) {
+						closePanel();
+						return;
+					}
+					scheduleClose();
+				},
+				onFocusCapture: openPanel,
+				onKeyDown: (event) => {
+					if (event.key !== "Escape") return;
+					const trigger = event.currentTarget.ownerDocument.querySelector(`#${CSS.escape(triggerId)}`);
+					if (trigger instanceof HTMLElement) trigger.focus();
+					closePanel();
+				},
+				onMouseEnter: openPanel,
+				onMouseLeave: scheduleClose,
+				ref: panelRef,
+				style: {
+					top: 0,
+					insetInlineEnd: 26,
+					width: panelWidth,
+					maxHeight: "calc(100% - 24px)"
+				},
+				children: [header !== void 0 && /* @__PURE__ */ jsx("div", {
+					className: "bg-popover sticky top-0 z-50 border-b p-2",
+					children: header
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "m-0 list-none p-0",
+					children: tree.map(renderNode)
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { OutlineRail };

package/dist/components/pagination.d.ts

@@ -0,0 +1,17 @@
+import { Button } from "./button.js";
+import { useRender } from "@base-ui/react/use-render";
+import * as React$1 from "react";
+//#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;
+type PaginationLinkProps = {
+  isActive?: boolean;
+  size?: React$1.ComponentProps<typeof Button>["size"];
+} & useRender.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, render, ...props }: PaginationLinkProps): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+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 };