@stll/ui 0.44.1 → 0.46.0

package/dist/components/outline-rail.js

@@ -1,19 +1,20 @@
 "use client";
-import { ChevronRightIcon } from "../icons.js";
+import { ChevronRightIcon, PanelLeftIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { ScrollArea } from "./scroll-area.js";
 import { DirectionalIcon } from "./directional-icon.js";
+import "../lib/panel-inset.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Temporal } from "temporal-polyfill/full";
 //#region src/components/outline-rail.tsx
 /**
-* Outline rail — the shared right-edge navigation rail.
+* Outline navigation: an embedded panel, a host-owned rail, or a disclosure.
 *
-* 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.
+* Embedded presentations fill their host track. The standalone disclosure
+* owns a toggle above a thin column of ticks; hovering or pressing it reveals
+* the collapsible tree. 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,
@@ -29,8 +30,9 @@ const OUTLINE_EMPHASIS = {
 	primary: "primary",
 	secondary: "secondary"
 };
-const RAIL_WIDTH = 20;
-const ROW_H = 29;
+const OUTLINE_CONTROL_MIN_SIZE = 32;
+const OUTLINE_CONTROL_TARGET_CLASS = "relative pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11";
+const RAIL_WIDTH = 32;
 const TICK_BASE_WIDTH = 6;
 const TICK_LEVEL_STEP = 2;
 const TICK_MAX_LEVEL = 5;
@@ -87,7 +89,7 @@ const Chevron = ({ open }) => /* @__PURE__ */ jsx(DirectionalIcon, {
 	flip: !open,
 	icon: ChevronRightIcon
 });
-const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, collapsedFromLevel, topOffset = 0, panelWidth = 300, ariaLabel = "Outline" }) => {
+const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, formatMetaLabel, collapsedFromLevel, presentation = "popover", bottomInset, topOffset = 0, panelWidth = 300, ariaLabel = "Outline" }) => {
 	const [pctById, setPctById] = useState(/* @__PURE__ */ new Map());
 	const [derivedActive, setDerivedActive] = useState(null);
 	const [hovered, setHovered] = useState(false);
@@ -97,7 +99,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 	const [hoveredId, setHoveredId] = useState(null);
 	const panelId = useId();
 	const triggerId = useId();
-	const panelOpen = hovered || pinned;
+	const panelOpen = presentation === "panel" || hovered || pinned;
 	const closeTimer = useRef(null);
 	const manualLockUntil = useRef(0);
 	const panelRef = useRef(null);
@@ -232,7 +234,13 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 	const activeIndex = items.findIndex((item) => item.id === activeId);
 	useLayoutEffect(() => {
 		if (activeIndex === -1 || !panelOpen) return;
-		panelRef.current?.querySelector(`[${ACTIVE_ROW_ATTRIBUTE}]`)?.scrollIntoView({ block: "nearest" });
+		const panel = panelRef.current;
+		const row = panel?.querySelector(`[${ACTIVE_ROW_ATTRIBUTE}]`);
+		if (!panel || !(row instanceof HTMLElement)) return;
+		const panelBox = panel.getBoundingClientRect();
+		const rowBox = row.getBoundingClientRect();
+		if (rowBox.top < panelBox.top) panel.scrollTop += rowBox.top - panelBox.top;
+		else if (rowBox.bottom > panelBox.bottom) panel.scrollTop += rowBox.bottom - panelBox.bottom;
 	}, [activeIndex, panelOpen]);
 	const openPanel = useCallback(() => {
 		if (closeTimer.current !== null) {
@@ -246,7 +254,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		closeTimer.current = setTimeout(() => setHovered(false), 120);
 	}, []);
 	useEffect(() => {
-		if (pinned) panelRef.current?.focus();
+		if (pinned) panelRef.current?.closest("nav")?.focus();
 	}, [pinned]);
 	const closePanel = useCallback(() => {
 		if (closeTimer.current !== null) {
@@ -267,23 +275,21 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		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", !hasChildren && highlighted && "bg-accent"),
+			className: cn("flex items-center rounded-md pe-2.5", highlighted && "bg-accent"),
 			...isActive ? { [ACTIVE_ROW_ATTRIBUTE]: "" } : {},
 			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",
+					className: cn("text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center", OUTLINE_CONTROL_TARGET_CLASS),
+					style: {
+						minWidth: 32,
+						minHeight: 32,
+						marginInlineStart: indent - 4
+					},
 					onClick: (event) => toggleCollapse(node.item.id, event.currentTarget.parentElement),
-					style: { marginInlineStart: indent - 4 },
 					type: "button",
 					children: /* @__PURE__ */ jsx(Chevron, { open: !isCollapsed })
 				}) : /* @__PURE__ */ jsx("span", {
@@ -314,10 +320,22 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 						children: node.item.title
 					})] })
 				}), /* @__PURE__ */ jsx(TooltipPopup, { children: outlineEntryText(node.item) })] }),
-				node.item.meta !== void 0 && /* @__PURE__ */ jsx("span", {
+				node.item.meta !== void 0 && (formatMetaLabel ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					render: /* @__PURE__ */ jsx("button", {
+						"aria-label": formatMetaLabel(node.item.meta),
+						className: cn("text-foreground-placeholder text-2xs shrink-0 tabular-nums", OUTLINE_CONTROL_TARGET_CLASS),
+						style: {
+							minWidth: 32,
+							minHeight: 32
+						},
+						onClick: () => jumpTo(node.item.id),
+						type: "button"
+					}),
+					children: node.item.meta
+				}), /* @__PURE__ */ jsx(TooltipPopup, { children: formatMetaLabel(node.item.meta) })] }) : /* @__PURE__ */ jsx("span", {
 					className: "text-foreground-placeholder text-2xs shrink-0 ps-2 tabular-nums",
 					children: node.item.meta
-				})
+				}))
 			]
 		}), hasChildren && !isCollapsed && /* @__PURE__ */ jsx("ul", {
 			className: "m-0 list-none p-0",
@@ -337,18 +355,26 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 	const ghostItem = ghostPct === void 0 ? void 0 : items.find((item) => item.id === hoveredId);
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-label": ariaLabel,
-		className: "absolute end-0 z-20 max-lg:hidden",
+		className: OUTLINE_PRESENTATION_CLASS[presentation],
 		role: "group",
 		style: {
-			top: topOffset,
-			bottom: 0,
-			width: RAIL_WIDTH
+			marginBlockEnd: bottomInset ?? "max(env(safe-area-inset-bottom, 0px), var(--document-panel-bottom-inset, 0px))",
+			...presentation === "popover" ? {
+				top: topOffset,
+				bottom: 0,
+				width: RAIL_WIDTH
+			} : {}
 		},
 		children: [
-			/* @__PURE__ */ jsx("button", {
+			presentation === "popover" && /* @__PURE__ */ jsx("button", {
 				"aria-controls": panelId,
 				"aria-expanded": panelOpen,
-				className: "focus-visible:ring-ring bg-popover text-popover-foreground sr-only end-0 top-2 z-30 -translate-x-6 text-xs focus:not-sr-only focus:absolute focus:w-max focus:rounded-md focus:border focus:px-2 focus:py-1 focus-visible:ring-2 focus-visible:outline-none",
+				className: cn("focus-visible:ring-ring bg-popover text-popover-foreground flex shrink-0 items-center justify-center self-start rounded-md focus-visible:ring-2 focus-visible:outline-none", "pointer-coarse:my-1.5", OUTLINE_CONTROL_TARGET_CLASS),
+				"aria-label": ariaLabel,
+				style: {
+					minWidth: 32,
+					minHeight: 32
+				},
 				id: triggerId,
 				onClick: () => {
 					if (pinned) {
@@ -359,10 +385,15 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 					openPanel();
 				},
 				type: "button",
-				children: ariaLabel
+				children: /* @__PURE__ */ jsx(PanelLeftIcon, {
+					"aria-hidden": true,
+					className: "size-4 rtl:-scale-x-100"
+				})
 			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "relative h-full",
+			presentation !== "panel" && /* @__PURE__ */ jsxs("div", {
+				className: "relative min-h-0 flex-1",
+				"data-outline-ticks": true,
+				style: presentation === "popover" ? { height: `calc(100% - 32px)` } : void 0,
 				onMouseEnter: openPanel,
 				onMouseLeave: scheduleClose,
 				onWheel: (event) => {
@@ -379,7 +410,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 						onMouseEnter: () => setHoveredId(item.id),
 						onMouseLeave: () => setHoveredId(null),
 						style: {
-							top: `${pct}%`,
+							top: `clamp(2px, ${pct}%, calc(100% - 2px))`,
 							transform: "translateY(-50%)",
 							width: isHovered ? tickWidth(item.level) + 8 : tickWidth(item.level),
 							height: tickHeight(isHovered, isActive),
@@ -391,7 +422,7 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 					"aria-hidden": true,
 					className: "absolute end-0 rounded-full opacity-100",
 					style: {
-						top: `${ghostPct}%`,
+						top: `clamp(2px, ${ghostPct}%, calc(100% - 2px))`,
 						transform: "translateY(-50%)",
 						width: tickWidth(ghostItem.level) + 8,
 						height: 4,
@@ -399,13 +430,15 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 					}
 				})]
 			}),
-			/* @__PURE__ */ jsxs("nav", {
+			presentation !== "rail" && /* @__PURE__ */ jsxs("nav", {
+				"aria-label": ariaLabel,
 				"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"),
+				className: cn("bg-popover text-popover-foreground flex min-h-0 flex-col", presentation === "popover" && "border-border absolute rounded-xl border shadow-lg transition-[opacity,transform] duration-150", outlinePanelVisibilityClass(presentation, panelOpen)),
 				onBlurCapture: (event) => {
+					if (event.relatedTarget instanceof HTMLElement && event.relatedTarget.id === triggerId) return;
 					if (pinned && !event.currentTarget.contains(event.relatedTarget)) {
 						closePanel();
 						return;
@@ -422,28 +455,42 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 				onMouseEnter: openPanel,
 				onMouseLeave: scheduleClose,
 				onWheel: (event) => {
-					const panel = event.currentTarget;
+					const panel = panelRef.current;
+					if (!panel) return;
 					const room = panel.scrollHeight - panel.clientHeight;
 					if (room > WHEEL_EDGE_TOLERANCE && (event.deltaY < 0 ? panel.scrollTop > WHEEL_EDGE_TOLERANCE : panel.scrollTop < room - WHEEL_EDGE_TOLERANCE)) return;
 					scrollContainerRef.current?.scrollBy(0, event.deltaY);
 				},
-				ref: panelRef,
-				style: {
+				style: presentation === "popover" ? {
 					top: 0,
-					insetInlineEnd: 26,
-					width: panelWidth,
-					maxHeight: "calc(100% - 24px)"
-				},
+					insetInlineEnd: 38,
+					width: `min(${panelWidth}px, calc(100vw - 54px))`,
+					height: "calc(100% - 24px)"
+				} : void 0,
 				children: [header !== void 0 && /* @__PURE__ */ jsx("div", {
-					className: "bg-popover sticky top-0 z-50 border-b p-2",
+					className: "bg-popover z-50 shrink-0 border-b p-2",
 					children: header
-				}), /* @__PURE__ */ jsx("ul", {
-					className: "m-0 list-none p-0",
-					children: tree.map(renderNode)
+				}), /* @__PURE__ */ jsx(ScrollArea, {
+					axis: "vertical",
+					className: "min-h-0 flex-1",
+					viewportRef: panelRef,
+					children: /* @__PURE__ */ jsx("ul", {
+						className: "m-0 list-none p-0 pb-2",
+						children: tree.map(renderNode)
+					})
 				})]
 			})
 		]
 	});
 };
+const OUTLINE_PRESENTATION_CLASS = {
+	popover: "absolute end-0 z-20 flex flex-col pointer-coarse:min-w-11",
+	panel: "relative flex min-h-0 w-full flex-1 flex-col",
+	rail: "relative flex min-h-0 w-full flex-1 flex-col"
+};
+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_EMPHASIS, OutlineRail, outlineEntryText };
+export { OUTLINE_CONTROL_MIN_SIZE, OUTLINE_EMPHASIS, OutlineRail, outlineEntryText };

package/dist/components/popover.js

@@ -42,7 +42,7 @@ const PopoverPopup = ({ children, className, side = "bottom", align = "center",
 		"data-slot": "popover-popup",
 		...props,
 		children: /* @__PURE__ */ jsx(Popover$1.Viewport, {
-			className: cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) outline-none **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0", tooltipStyle ? "py-1 [--viewport-inline-padding:--spacing(2)]" : [POPOVER_PADDING[padding], "not-data-transitioning:overflow-y-auto"]),
+			className: cn("relative size-full max-h-(--available-height) overflow-clip px-(--viewport-inline-padding) outline-none **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0", tooltipStyle ? "py-1 [--viewport-inline-padding:--spacing(2)]" : [POPOVER_PADDING[padding], "overscroll-contain not-data-transitioning:overflow-y-auto"]),
 			"data-slot": "popover-viewport",
 			children
 		})

package/dist/components/search-field.js

@@ -1,5 +1,5 @@
 "use client";
-import { SearchIcon, XIcon } from "../icons.js";
+import { XIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
@@ -13,41 +13,37 @@ import { jsx, jsxs } from "react/jsx-runtime";
 */
 const SearchField = ({ value, onValueChange, clearLabel, groupClassName, className, onKeyDown, ...props }) => /* @__PURE__ */ jsxs(InputGroup, {
 	className: cn("min-h-11 sm:min-h-0", groupClassName),
-	children: [
-		/* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(SearchIcon, {}) }),
-		/* @__PURE__ */ jsx(InputGroupInput, {
-			autoComplete: "off",
-			spellCheck: false,
-			...props,
-			className: cn("max-sm:h-11 max-sm:leading-11", className),
-			onChange: (event) => {
-				onValueChange(event.target.value);
+	children: [/* @__PURE__ */ jsx(InputGroupInput, {
+		autoComplete: "off",
+		spellCheck: false,
+		...props,
+		className: cn("max-sm:h-11 max-sm:leading-11", className),
+		onChange: (event) => {
+			onValueChange(event.target.value);
+		},
+		onKeyDown: (event) => {
+			if (event.key === "Escape" && value.length > 0) {
+				event.preventDefault();
+				event.stopPropagation();
+				onValueChange("");
+			}
+			onKeyDown?.(event);
+		},
+		type: "search",
+		value
+	}), value.length > 0 && /* @__PURE__ */ jsx(InputGroupAddon, {
+		align: "inline-end",
+		children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": clearLabel,
+			onClick: () => {
+				onValueChange("");
 			},
-			onKeyDown: (event) => {
-				if (event.key === "Escape" && value.length > 0) {
-					event.preventDefault();
-					event.stopPropagation();
-					onValueChange("");
-				}
-				onKeyDown?.(event);
-			},
-			type: "search",
-			value
-		}),
-		value.length > 0 && /* @__PURE__ */ jsx(InputGroupAddon, {
-			align: "inline-end",
-			children: /* @__PURE__ */ jsx(Button, {
-				"aria-label": clearLabel,
-				onClick: () => {
-					onValueChange("");
-				},
-				size: "icon-xs",
-				type: "button",
-				variant: "ghost",
-				children: /* @__PURE__ */ jsx(XIcon, {})
-			})
+			size: "icon-xs",
+			type: "button",
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(XIcon, {})
 		})
-	]
+	})]
 });
 //#endregion
 export { SearchField };

package/dist/components/select.js

@@ -83,7 +83,7 @@ const SelectPopup = ({ className, children, side = "bottom", sideOffset = 4, ali
 			/* @__PURE__ */ jsx("div", {
 				className: "bg-popover text-popover-foreground relative h-full min-w-(--anchor-width) rounded-lg border shadow-lg/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
 				children: /* @__PURE__ */ jsx(Select$1.List, {
-					className: cn("max-h-(--available-height) overflow-y-auto p-1", className),
+					className: cn("max-h-(--available-height) overflow-y-auto overscroll-contain p-1", className),
 					"data-slot": "select-list",
 					children
 				})

package/dist/components/sheet.js

@@ -1,6 +1,8 @@
 "use client";
 import { XIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import "../lib/safe-area.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
@@ -28,12 +30,12 @@ function SheetClose({ tooltip, ...props }) {
 	});
 }
 const SheetBackdrop = ({ className, ...props }) => /* @__PURE__ */ jsx(Dialog.Backdrop, {
-	className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", className),
+	className: cn("fixed inset-0 bg-black/32 backdrop-blur-sm transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", OVERLAY_LAYER_CLASS_NAMES.default, className),
 	"data-slot": "sheet-backdrop",
 	...props
 });
 const SheetViewport = ({ className: _className, side, variant = "default", ...props }) => /* @__PURE__ */ jsx(Dialog.Viewport, {
-	className: cn("fixed inset-0 z-50", side === "block-end" && "grid grid-rows-[1fr_auto] pt-12", side === "block-start" && "grid grid-rows-[auto_1fr] pb-12", side === "inline-start" && "flex justify-start", side === "inline-end" && "flex justify-end", variant === "inset" && "sm:p-4"),
+	className: cn("fixed inset-0", OVERLAY_LAYER_CLASS_NAMES.default, side === "block-end" && "grid grid-rows-[1fr_auto] pt-12", side === "block-start" && "grid grid-rows-[auto_1fr] pb-12", side === "inline-start" && "flex justify-start", side === "inline-end" && "flex justify-end", variant === "inset" && "sm:p-4"),
 	"data-slot": "sheet-viewport",
 	...props
 });
@@ -41,12 +43,28 @@ const SheetPopup = ({ className, children, showCloseButton = true, side = "inlin
 	side,
 	variant,
 	children: /* @__PURE__ */ jsxs(Dialog.Popup, {
-		className: cn("bg-popover text-popover-foreground relative flex max-h-full min-h-0 w-full min-w-0 flex-col shadow-lg/5 transition-[opacity,translate] duration-200 ease-in-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", side === "block-end" && "row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8", side === "block-start" && "border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8", side === "inline-start" && "w-[calc(100%-(--spacing(12)))] max-w-md border-e data-ending-style:-translate-x-8 data-starting-style:-translate-x-8 rtl:data-ending-style:translate-x-8 rtl:data-starting-style:translate-x-8", side === "inline-end" && "w-[calc(100%-(--spacing(12)))] max-w-md border-s data-ending-style:translate-x-8 data-starting-style:translate-x-8 rtl:data-ending-style:-translate-x-8 rtl:data-starting-style:-translate-x-8", variant === "inset" && "before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", className),
+		className: cn("bg-popover text-popover-foreground relative flex max-h-full min-h-0 w-full min-w-0 flex-col shadow-lg/5 transition-[opacity,translate] duration-200 ease-out will-change-transform not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:opacity-0 max-sm:before:hidden dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", side === "block-end" && [
+			"row-start-2 border-t data-ending-style:translate-y-8 data-starting-style:translate-y-8",
+			"pb-(--safe-area-bottom)",
+			"ps-(--safe-area-inline-start) pe-(--safe-area-inline-end)"
+		], side === "block-start" && [
+			"border-b data-ending-style:-translate-y-8 data-starting-style:-translate-y-8",
+			"pt-(--safe-area-top)",
+			"ps-(--safe-area-inline-start) pe-(--safe-area-inline-end)"
+		], side === "inline-start" && [
+			"w-[calc(100%-(--spacing(12)))] max-w-md border-e ps-(--safe-area-inline-start) data-ending-style:-translate-x-8 data-starting-style:-translate-x-8 rtl:data-ending-style:translate-x-8 rtl:data-starting-style:translate-x-8 [&.w-full.max-w-none]:pe-(--safe-area-inline-end)",
+			"pt-(--safe-area-top)",
+			"pb-(--safe-area-bottom)"
+		], side === "inline-end" && [
+			"w-[calc(100%-(--spacing(12)))] max-w-md border-s pe-(--safe-area-inline-end) data-ending-style:translate-x-8 data-starting-style:translate-x-8 rtl:data-ending-style:-translate-x-8 rtl:data-starting-style:-translate-x-8 [&.w-full.max-w-none]:ps-(--safe-area-inline-start)",
+			"pt-(--safe-area-top)",
+			"pb-(--safe-area-bottom)"
+		], variant === "inset" && "before:hidden sm:rounded-2xl sm:border sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=sheet-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", className),
 		"data-slot": "sheet-popup",
 		...props,
 		children: [children, showCloseButton && /* @__PURE__ */ jsx(Dialog.Close, {
 			"aria-label": "Close",
-			className: "absolute end-2 top-2",
+			className: cn("absolute end-[calc(--spacing(2)+var(--safe-area-inline-end))] top-2", side !== "block-end" && "top-[calc(--spacing(2)+var(--safe-area-top))]"),
 			render: /* @__PURE__ */ jsx(Button, {
 				size: "icon",
 				variant: "ghost"

package/dist/components/sidebar.d.ts

@@ -86,7 +86,7 @@ declare const SidebarMenu: ({ className, ...props }: React.ComponentProps<"ul">)
 declare const SidebarMenuItem: ({ className, ...props }: React.ComponentProps<"li">) => import("react").JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "rail" | "sm" | "default" | "lg" | null | undefined;
+  size?: "default" | "lg" | "sm" | "rail" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * The footer's avatar trigger, signed in (user menu) or not (sign-in): a

package/dist/components/sidebar.js

@@ -118,7 +118,7 @@ const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 			open: openMobile,
 			...props,
 			children: /* @__PURE__ */ jsxs(SheetPopup, {
-				className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden",
+				className: "bg-sidebar text-sidebar-foreground w-(--sidebar-width) [&>button]:hidden",
 				"data-mobile": "true",
 				"data-sidebar": "sidebar",
 				"data-slot": "sidebar",
@@ -135,17 +135,17 @@ const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 		});
 	}
 	return /* @__PURE__ */ jsxs("div", {
-		className: "group peer text-sidebar-foreground hidden md:block",
+		className: cn("group peer text-sidebar-foreground hidden [--sidebar-inline-size:calc(var(--sidebar-width)+var(--sidebar-safe-area-inline))] md:block", side === "left" ? "[--sidebar-safe-area-inline:var(--safe-area-inline-start)]" : "[--sidebar-safe-area-inline:var(--safe-area-inline-end)]", variant === "floating" || variant === "inset" ? "data-[collapsible=icon]:[--sidebar-inline-size:calc(var(--sidebar-width-icon)+--spacing(4)+var(--sidebar-safe-area-inline))]" : "data-[collapsible=icon]:[--sidebar-inline-size:calc(var(--sidebar-width-icon)+var(--sidebar-safe-area-inline))]"),
 		"data-collapsible": state === "collapsed" ? collapsible : "",
 		"data-side": side,
 		"data-slot": "sidebar",
 		"data-state": state,
 		"data-variant": variant,
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"),
+			className: cn("relative w-(--sidebar-inline-size) bg-transparent transition-[width] duration-200 ease-in-out", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180"),
 			"data-slot": "sidebar-gap"
 		}), /* @__PURE__ */ jsx("div", {
-			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[inset-inline-start,inset-inline-end,width] duration-200 ease-linear md:flex", side === "left" ? "start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]" : "end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-e group-data-[side=right]:border-s", className),
+			className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-inline-size) transition-[inset-inline-start,inset-inline-end,width] duration-200 ease-in-out md:flex", "pt-(--safe-area-top) pb-(--safe-area-bottom)", side === "left" ? "start-0 ps-(--safe-area-inline-start) group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-inline-size)*-1)]" : "end-0 pe-(--safe-area-inline-end) group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-inline-size)*-1)]", variant === "floating" || variant === "inset" ? ["p-2 pt-[calc(var(--safe-area-top)+--spacing(2))] pb-[calc(var(--safe-area-bottom)+--spacing(2))] group-data-[collapsible=icon]:w-[calc(var(--sidebar-inline-size)+2px)]", side === "left" ? "ps-[calc(var(--safe-area-inline-start)+--spacing(2))]" : "pe-[calc(var(--safe-area-inline-end)+--spacing(2))]"] : "group-data-[side=left]:border-e group-data-[side=right]:border-s", className),
 			"data-slot": "sidebar-container",
 			...props,
 			children: /* @__PURE__ */ jsx("div", {
@@ -182,7 +182,7 @@ const SidebarRail = ({ className, label = DEFAULT_TOGGLE_LABEL, "aria-label": ar
 	return /* @__PURE__ */ jsx("button", {
 		"aria-label": ariaLabel ?? label,
 		type: "button",
-		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-transform ease-linear group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex", "ltr:-translate-x-1/2 rtl:translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar", "group-data-[collapsible=offcanvas]:ltr:translate-x-0 group-data-[collapsible=offcanvas]:rtl:translate-x-0", "group-data-[collapsible=offcanvas]:group-data-[side=left]:after:end-full group-data-[collapsible=offcanvas]:group-data-[side=right]:after:start-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2", className),
+		className: cn("hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-transform ease-in-out group-data-[side=left]:-end-4 group-data-[side=right]:start-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex", "ltr:-translate-x-1/2 rtl:translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "hover:group-data-[collapsible=offcanvas]:bg-sidebar", "group-data-[collapsible=offcanvas]:ltr:translate-x-0 group-data-[collapsible=offcanvas]:rtl:translate-x-0", "group-data-[collapsible=offcanvas]:group-data-[side=left]:after:end-full group-data-[collapsible=offcanvas]:group-data-[side=right]:after:start-full", "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2", className),
 		"data-sidebar": "rail",
 		"data-slot": "sidebar-rail",
 		onClick: toggleSidebar,
@@ -220,7 +220,7 @@ const SidebarSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(Separa
 	...props
 });
 const SidebarContent = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto group-data-[collapsible=icon]:[scrollbar-width:none] group-data-[collapsible=icon]:[&::-webkit-scrollbar]:hidden", className),
+	className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-x-hidden overflow-y-auto overscroll-contain group-data-[collapsible=icon]:[scrollbar-width:none] group-data-[collapsible=icon]:[&::-webkit-scrollbar]:hidden", className),
 	"data-sidebar": "content",
 	"data-slot": "sidebar-content",
 	...props
@@ -233,7 +233,7 @@ const SidebarGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 });
 const SidebarGroupLabel = ({ className, asChild = false, ...props }) => {
 	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
-		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:hidden", className),
+		className: cn("text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-in-out focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:hidden", className),
 		"data-sidebar": "group-label",
 		"data-slot": "sidebar-group-label",
 		...props
@@ -265,7 +265,7 @@ const SidebarMenuItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
 	"data-slot": "sidebar-menu-item",
 	...props
 });
-const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:hover:bg-sidebar-accent data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>span:last-child]:transition-opacity [&>span:last-child]:duration-200 group-data-[collapsible=icon]:[&>span:last-child]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0", {
+const sidebarMenuButtonVariants = cva("peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-sidebar-accent-foreground data-[active=true]:hover:bg-sidebar-accent data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-hidden transition-[width,height,padding] select-none group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>span:last-child]:truncate [&>span:last-child]:transition-opacity [&>span:last-child]:duration-200 group-data-[collapsible=icon]:[&>span:last-child]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0", {
 	variants: {
 		variant: {
 			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",

package/dist/components/status-mark.d.ts

@@ -0,0 +1,17 @@
+//#region src/components/status-mark.d.ts
+type StatusMarkStatus = "pending" | "running" | "done" | "failed";
+type StatusMarkProps = {
+  status: StatusMarkStatus;
+  /** Accessible name; omit when adjacent text already states the status. */
+  label?: string | undefined;
+  className?: string;
+};
+/**
+ * One glyph for a unit of work across its life: dashes while it waits, a
+ * turning arc while it runs, then a closed ring with a check or a cross
+ * drawn in. Monochrome by design: it takes the text colour, and only a
+ * failure eases to destructive.
+ */
+declare const StatusMark: ({ className, label, status }: StatusMarkProps) => import("react").JSX.Element;
+//#endregion
+export { StatusMark, type StatusMarkStatus };

package/dist/components/status-mark.js

@@ -0,0 +1,74 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/status-mark.tsx
+const RING_RADIUS = 6.25;
+const CHECK_PATH = "M5.4 8.3 7.2 10.1 10.6 6.3";
+const CROSS_PATH = "M6.1 6.1 9.9 9.9M9.9 6.1 6.1 9.9";
+const on = {
+	active: "group-data-[status=running]/status:opacity-100 group-data-[status=done]/status:opacity-50 group-data-[status=failed]/status:opacity-60",
+	settled: "group-data-[status=done]/status:[stroke-dasharray:100_0] group-data-[status=failed]/status:[stroke-dasharray:100_0]"
+};
+const RING_CLASS = cn("opacity-55 [stroke-dasharray:3.75_8.75]", "transition-[stroke-dasharray,opacity] duration-300 ease-in-out motion-reduce:transition-[opacity]", "group-data-[status=running]/status:[stroke-dasharray:30_70]", on.active, on.settled, "motion-reduce:group-data-[status=running]/status:animate-status-breathe");
+const SPIN_CLASS = "origin-center [transform-box:view-box] animate-status-spin [animation-play-state:paused] motion-safe:group-data-[status=running]/status:[animation-play-state:running]";
+const markClass = (status) => cn("opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1.05]", "[transition:stroke-dashoffset_150ms_cubic-bezier(0.22,1,0.36,1),opacity_0ms_linear_150ms]", status === "done" ? "group-data-[status=done]/status:opacity-100 group-data-[status=done]/status:[stroke-dashoffset:0] group-data-[status=done]/status:[transition:stroke-dashoffset_300ms_cubic-bezier(0.22,1,0.36,1)_140ms,opacity_0ms_linear_140ms]" : "group-data-[status=failed]/status:opacity-100 group-data-[status=failed]/status:[stroke-dashoffset:0] group-data-[status=failed]/status:[transition:stroke-dashoffset_300ms_cubic-bezier(0.22,1,0.36,1)_140ms,opacity_0ms_linear_140ms]", "motion-reduce:[stroke-dashoffset:0] motion-reduce:[transition:opacity_200ms_ease]");
+/**
+* One glyph for a unit of work across its life: dashes while it waits, a
+* turning arc while it runs, then a closed ring with a check or a cross
+* drawn in. Monochrome by design: it takes the text colour, and only a
+* failure eases to destructive.
+*/
+const StatusMark = ({ className, label, status }) => /* @__PURE__ */ jsxs("svg", {
+	className: cn("group/status size-4 shrink-0 transition-[color] duration-200", status === "failed" && "text-destructive", className),
+	"data-slot": "status-mark",
+	"data-status": status,
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 1.5,
+	viewBox: "0 0 16 16",
+	...label === void 0 ? { "aria-hidden": true } : {
+		"aria-label": label,
+		role: "img"
+	},
+	children: [
+		/* @__PURE__ */ jsx("circle", {
+			className: "opacity-0 transition-opacity duration-200 group-data-[status=done]/status:opacity-[0.06] group-data-[status=failed]/status:opacity-[0.08]",
+			cx: "8",
+			cy: "8",
+			fill: "currentColor",
+			r: RING_RADIUS,
+			stroke: "none"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			className: "opacity-0 transition-opacity duration-200 group-data-[status=running]/status:opacity-20",
+			cx: "8",
+			cy: "8",
+			r: RING_RADIUS
+		}),
+		/* @__PURE__ */ jsx("g", {
+			className: SPIN_CLASS,
+			children: /* @__PURE__ */ jsx("circle", {
+				className: RING_CLASS,
+				cx: "8",
+				cy: "8",
+				pathLength: 100,
+				r: RING_RADIUS,
+				transform: "rotate(-90 8 8)"
+			})
+		}),
+		/* @__PURE__ */ jsx("path", {
+			className: markClass("done"),
+			d: CHECK_PATH,
+			pathLength: 1
+		}),
+		/* @__PURE__ */ jsx("path", {
+			className: markClass("failed"),
+			d: CROSS_PATH,
+			pathLength: 1
+		})
+	]
+});
+//#endregion
+export { StatusMark };

package/dist/components/swap-text.d.ts

@@ -0,0 +1,16 @@
+//#region src/components/swap-text.d.ts
+/**
+ * A short label that changes in place (a live status line): the old text
+ * lifts out with a slight blur while the new one rises into the same cell,
+ * so the change reads as one motion instead of a blink. Both layers share a
+ * grid cell, so nothing reflows mid-swap. The first render is still, and
+ * under reduced motion the label simply changes.
+ */
+declare const SwapText: ({ className, text }: {
+  /** Applied to the text inside each layer, so a text effect with its own
+   *  animation (a shimmer) runs alongside the swap instead of replacing it. */
+  className?: string;
+  text: string;
+}) => import("react").JSX.Element;
+//#endregion
+export { SwapText };