@stll/ui 0.44.0 → 0.45.0

package/dist/components/matter-icon.js

@@ -0,0 +1,56 @@
+import { LayersIcon } from "../icons.js";
+import { cn } from "../lib/utils.js";
+import { resolveMatterColor } from "../lib/matter-colors.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/matter-icon.tsx
+const ALL_MATTERS_STACK_COLORS = [
+	"var(--option-red)",
+	"var(--option-blue)",
+	"var(--option-green)"
+];
+const MatterIcon = (props) => {
+	if ("matter" in props) return /* @__PURE__ */ jsx(LayersIcon, {
+		"aria-hidden": "true",
+		className: cn(props.className),
+		style: { color: resolveMatterColor(props.matter.id, props.matter.color) }
+	});
+	if (props.variant === "all") return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		className: cn(props.className),
+		fill: "none",
+		viewBox: "0 0 24 24",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+				stroke: ALL_MATTERS_STACK_COLORS[0],
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+				stroke: ALL_MATTERS_STACK_COLORS[1],
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				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",
+				stroke: ALL_MATTERS_STACK_COLORS[2],
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(LayersIcon, {
+		"aria-hidden": "true",
+		className: cn(props.className)
+	});
+};
+const MattersNavIcon = ({ className }) => /* @__PURE__ */ jsx(MatterIcon, {
+	className,
+	variant: "none"
+});
+//#endregion
+export { MatterIcon, MattersNavIcon };

package/dist/components/menu.d.ts

@@ -7,7 +7,13 @@ declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-u
 declare function MenuTrigger({ tooltip, ...props }: Menu$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;
-declare const MenuPopup: ({ children, className, sideOffset, align, alignOffset, side, anchor, collisionAvoidance, ...props }: Menu$1.Popup.Props & {
+declare const MenuPopup: ({ children, className, sideOffset, align, alignOffset, side, anchor, collisionAvoidance, header, viewportClassName, ...props }: Menu$1.Popup.Props & {
+  /** Content pinned above the scrolling list, such as a search field. It sits
+   *  outside the list, so a row scrolled into view can never hide under it. */
+  header?: React$1.ReactNode;
+  /** Classes for the scrolling list inside the popup, e.g. a lower height
+   *  cap for a long searchable list. */
+  viewportClassName?: string;
   align?: Menu$1.Positioner.Props["align"];
   sideOffset?: Menu$1.Positioner.Props["sideOffset"];
   alignOffset?: Menu$1.Positioner.Props["alignOffset"];
@@ -37,6 +43,8 @@ declare const MenuSubTrigger: ({ className, inset, children, ...props }: Menu$1.
   inset?: boolean;
 }) => React$1.JSX.Element;
 declare const MenuSubPopup: ({ className, sideOffset, alignOffset, align, ...props }: Menu$1.Popup.Props & {
+  header?: React$1.ReactNode;
+  viewportClassName?: string;
   align?: Menu$1.Positioner.Props["align"];
   sideOffset?: Menu$1.Positioner.Props["sideOffset"];
   alignOffset?: Menu$1.Positioner.Props["alignOffset"];

package/dist/components/menu.js

@@ -20,7 +20,7 @@ function MenuTrigger({ tooltip, ...props }) {
 		})
 	});
 }
-const MenuPopup = ({ children, className, sideOffset = 4, align, alignOffset, side = "bottom", anchor, collisionAvoidance, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+const MenuPopup = ({ children, className, sideOffset = 4, align, alignOffset, side = "bottom", anchor, collisionAvoidance, header, viewportClassName, ...props }) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
 	align: align ?? (anchor ? "start" : "center"),
 	alignOffset,
 	anchor,
@@ -29,14 +29,14 @@ const MenuPopup = ({ children, className, sideOffset = 4, align, alignOffset, si
 	"data-slot": "menu-positioner",
 	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),
+	children: /* @__PURE__ */ jsxs(Menu$1.Popup, {
+		className: cn("bg-popover relative flex max-h-(--available-height) origin-(--transform-origin) flex-col 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: [header, /* @__PURE__ */ jsx("div", {
+			className: cn("min-h-0 w-full flex-1 overflow-y-auto p-1", viewportClassName),
 			children
-		})
+		})]
 	})
 }) });
 const MenuGroup = (props) => /* @__PURE__ */ jsx(Menu$1.Group, {

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

@@ -41,16 +41,23 @@ export type OutlineRailProps = {
    *  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;
+  /** Name a trailing annotation for assistive technology and its tooltip. */
+  formatMetaLabel?: (meta: string) => string;
   /** 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;
+  /** `panel` and `rail` fill a host-owned track; `popover` owns its disclosure. */
+  presentation?: "panel" | "rail" | "popover";
+  /** A host that already reserves docked chrome passes zero. */
+  bottomInset?: number;
   topOffset?: number;
   panelWidth?: number;
   ariaLabel?: string;
 };
+export declare const OUTLINE_CONTROL_MIN_SIZE = 32;
 /** The entry as one line of text: label, then its title when it has one. */
 export declare const outlineEntryText: (item: OutlineItem) => string;
-export declare const OutlineRail: ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, collapsedFromLevel, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;
+export declare const OutlineRail: ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, formatMetaLabel, collapsedFromLevel, presentation, bottomInset, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;
 //#endregion

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/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/sheet.js

@@ -1,6 +1,7 @@
 "use client";
 import { XIcon } 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 { Button } from "./button.js";
 import { ScrollArea } from "./scroll-area.js";
@@ -28,12 +29,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
 });

package/dist/components/switch.d.ts

@@ -0,0 +1,5 @@
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/switch.d.ts
+declare const Switch: ({ className, ...props }: Switch$1.Root.Props) => import("react").JSX.Element;
+//#endregion
+export { Switch };

package/dist/components/switch.js

@@ -0,0 +1,16 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+//#region src/components/switch.tsx
+const Switch = ({ className, ...props }) => /* @__PURE__ */ jsx(Switch$1.Root, {
+	className: cn("focus-visible:ring-ring focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input relative inline-flex h-5 w-9 shrink-0 items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-disabled:opacity-64", className),
+	"data-slot": "switch",
+	...props,
+	children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
+		className: "bg-background pointer-events-none block size-4 rounded-full shadow-xs transition-transform ltr:data-checked:translate-x-4.5 ltr:data-unchecked:translate-x-0.5 rtl:data-checked:-translate-x-4.5 rtl:data-unchecked:-translate-x-0.5",
+		"data-slot": "switch-thumb"
+	})
+});
+//#endregion
+export { Switch };

package/dist/components/toast.js

@@ -3,6 +3,7 @@ import { CircleAlertIcon, CircleCheckIcon, InfoIcon, TriangleAlertIcon, XIcon }
 import { cn } from "../lib/utils.js";
 import { Loader } from "./loader.js";
 import { buttonVariants } from "./button.js";
+import { ScrollArea } from "./scroll-area.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { Toast } from "@base-ui/react/toast";
@@ -74,18 +75,22 @@ const Toasts = ({ position }) => {
 				})(),
 				toast: toastItem,
 				children: /* @__PURE__ */ jsxs(Toast.Content, {
-					className: "pointer-events-auto flex items-center gap-3 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 select-text data-behind:opacity-0 data-behind:not-data-expanded:pointer-events-none data-expanded:opacity-100",
+					className: "pointer-events-auto flex items-center gap-3 px-3.5 py-3 text-sm transition-opacity duration-250 select-text data-behind:opacity-0 data-behind:not-data-expanded:pointer-events-none data-expanded:opacity-100",
 					children: [/* @__PURE__ */ jsxs("div", {
 						className: "flex min-w-0 flex-1 gap-2",
-						children: [/* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }), /* @__PURE__ */ jsxs("div", {
-							className: "flex min-w-0 flex-col gap-0.5 select-text",
-							children: [/* @__PURE__ */ jsx(Toast.Title, {
-								className: "truncate font-medium",
-								"data-slot": "toast-title"
-							}), /* @__PURE__ */ jsx(Toast.Description, {
-								className: "text-muted-foreground wrap-break-word",
-								"data-slot": "toast-description"
-							})]
+						children: [/* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }), /* @__PURE__ */ jsx(ScrollArea, {
+							axis: "vertical",
+							className: "h-auto min-w-0 flex-1 [&_[data-slot=scroll-area-viewport]]:max-h-[60dvh]",
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col gap-0.5 select-text",
+								children: [/* @__PURE__ */ jsx(Toast.Title, {
+									className: "font-medium wrap-anywhere whitespace-pre-wrap",
+									"data-slot": "toast-title"
+								}), /* @__PURE__ */ jsx(Toast.Description, {
+									className: "text-muted-foreground wrap-anywhere whitespace-pre-wrap",
+									"data-slot": "toast-description"
+								})]
+							})
 						})]
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "ms-auto flex shrink-0 items-center gap-2",
@@ -132,20 +137,31 @@ const AnchoredToasts = () => {
 						toast: toastItem,
 						children: tooltipStyle ? /* @__PURE__ */ jsx(Toast.Content, {
 							className: "pointer-events-auto px-2 py-1 select-text",
-							children: /* @__PURE__ */ jsx(Toast.Title, { "data-slot": "toast-title" })
+							children: /* @__PURE__ */ jsx(ScrollArea, {
+								axis: "vertical",
+								className: "h-auto [&_[data-slot=scroll-area-viewport]]:max-h-[60dvh]",
+								children: /* @__PURE__ */ jsx(Toast.Title, {
+									className: "wrap-anywhere whitespace-pre-wrap",
+									"data-slot": "toast-title"
+								})
+							})
 						}) : /* @__PURE__ */ jsxs(Toast.Content, {
-							className: "pointer-events-auto flex items-center gap-3 overflow-hidden px-3.5 py-3 text-sm select-text",
+							className: "pointer-events-auto flex items-center gap-3 px-3.5 py-3 text-sm select-text",
 							children: [/* @__PURE__ */ jsxs("div", {
 								className: "flex min-w-0 flex-1 gap-2",
-								children: [/* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }), /* @__PURE__ */ jsxs("div", {
-									className: "flex min-w-0 flex-col gap-0.5 select-text",
-									children: [/* @__PURE__ */ jsx(Toast.Title, {
-										className: "truncate font-medium",
-										"data-slot": "toast-title"
-									}), /* @__PURE__ */ jsx(Toast.Description, {
-										className: "text-muted-foreground wrap-break-word",
-										"data-slot": "toast-description"
-									})]
+								children: [/* @__PURE__ */ jsx(ToastIcon, { type: toastItem.type }), /* @__PURE__ */ jsx(ScrollArea, {
+									axis: "vertical",
+									className: "h-auto min-w-0 flex-1 [&_[data-slot=scroll-area-viewport]]:max-h-[60dvh]",
+									children: /* @__PURE__ */ jsxs("div", {
+										className: "flex min-w-0 flex-col gap-0.5 select-text",
+										children: [/* @__PURE__ */ jsx(Toast.Title, {
+											className: "font-medium wrap-anywhere whitespace-pre-wrap",
+											"data-slot": "toast-title"
+										}), /* @__PURE__ */ jsx(Toast.Description, {
+											className: "text-muted-foreground wrap-anywhere whitespace-pre-wrap",
+											"data-slot": "toast-description"
+										})]
+									})
 								})]
 							}), toastItem.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
 								className: cn(buttonVariants({ size: "xs" }), "ms-auto shrink-0 select-none"),
@@ -204,8 +220,8 @@ function normalizeToastActionProps({ action, actionProps, includeEmptyActionProp
 	} };
 }
 function getDefaultToastTimeout(type) {
-	if (type === "loading") return 0;
-	if (type === "error" || type === "warning") return 6e3;
+	if (type === "loading" || type === "error") return 0;
+	if (type === "warning") return 6e3;
 	return 4e3;
 }
 function normalizeToastTimeout(timeout) {