@stll/ui 0.52.1 → 0.54.0

package/dist/components/outline-rail.js

@@ -5,8 +5,9 @@ import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./toolt
 import { ScrollArea } from "./scroll-area.js";
 import { DirectionalIcon } from "./directional-icon.js";
 import "../lib/panel-inset.js";
+import { reconcileOutlineItems, retainOutlineIdSet } from "./outline-rail.logic.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Temporal } from "temporal-polyfill/full";
 //#region src/components/outline-rail.tsx
 /**
@@ -90,7 +91,101 @@ const Chevron = ({ open }) => /* @__PURE__ */ jsx(DirectionalIcon, {
 	flip: !open,
 	icon: ChevronRightIcon
 });
-const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId, header, formatMetaLabel, collapsedFromLevel, presentation = "popover", bottomInset, topOffset = 0, panelWidth = 300, ariaLabel = "Outline" }) => {
+const OutlineRowView = ({ item, hasChildren, isCollapsed, isActive, isHovered, indent, metaLabel, onJump, onToggle, onHover }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("flex items-center rounded-md pe-2.5", (isActive || isHovered) && "bg-accent"),
+	...isActive ? { [ACTIVE_ROW_ATTRIBUTE]: "" } : {},
+	onMouseEnter: () => onHover(item.id),
+	onMouseLeave: () => onHover(null),
+	children: [
+		hasChildren ? /* @__PURE__ */ jsx("button", {
+			"aria-expanded": !isCollapsed,
+			"aria-label": isCollapsed ? "Expand" : "Collapse",
+			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) => onToggle(item.id, event.currentTarget.parentElement),
+			type: "button",
+			children: /* @__PURE__ */ jsx(Chevron, { open: !isCollapsed })
+		}) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "shrink-0",
+			style: { width: indent + 4 }
+		}),
+		item.color && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "me-1.5 size-1.5 shrink-0 rounded-full",
+			style: { background: `var(${item.color})` }
+		}),
+		/* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				"aria-current": isActive ? "true" : void 0,
+				className: cn("flex min-w-0 flex-1 items-baseline gap-1.5 py-1.5 text-start text-[13px] leading-snug", rowTextClass(isActive, item.emphasis ?? OUTLINE_EMPHASIS.primary)),
+				onClick: () => onJump(item.id),
+				type: "button"
+			}),
+			children: item.title === void 0 ? /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate",
+				children: item.label
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: "shrink-0 font-medium",
+				children: item.label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 truncate font-normal",
+				children: item.title
+			})] })
+		}), /* @__PURE__ */ jsx(TooltipPopup, { children: outlineEntryText(item) })] }),
+		item.meta !== void 0 && (metaLabel !== void 0 ? /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			render: /* @__PURE__ */ jsx("button", {
+				"aria-label": metaLabel,
+				className: cn("text-foreground-placeholder text-2xs shrink-0 tabular-nums", OUTLINE_CONTROL_TARGET_CLASS),
+				style: {
+					minWidth: 32,
+					minHeight: 32
+				},
+				onClick: () => onJump(item.id),
+				type: "button"
+			}),
+			children: item.meta
+		}), /* @__PURE__ */ jsx(TooltipPopup, { children: metaLabel })] }) : /* @__PURE__ */ jsx("span", {
+			className: "text-foreground-placeholder text-2xs shrink-0 ps-2 tabular-nums",
+			children: item.meta
+		}))
+	]
+});
+const OutlineRow = memo(OutlineRowView);
+const OutlineTreeView = ({ tree, collapsed, toggled, activeAncestorIds, activeId, hoveredId, maxLevel, formatMetaLabel, onJump, onToggle, onHover }) => {
+	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));
+		return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(OutlineRow, {
+			hasChildren,
+			indent: 8 + Math.min(node.item.level, maxLevel) * 12,
+			isActive: activeId === node.item.id,
+			isCollapsed,
+			isHovered: hoveredId === node.item.id,
+			item: node.item,
+			metaLabel: node.item.meta === void 0 ? void 0 : formatMetaLabel?.(node.item.meta),
+			onHover,
+			onJump,
+			onToggle
+		}), hasChildren && !isCollapsed && /* @__PURE__ */ jsx("ul", {
+			className: "m-0 list-none p-0",
+			children: node.children.map(renderNode)
+		})] }, `${node.item.id}-${node.index}`);
+	};
+	return /* @__PURE__ */ jsx("ul", {
+		className: "m-0 list-none p-0 pb-2",
+		children: tree.map(renderNode)
+	});
+};
+const OutlineTree = memo(OutlineTreeView);
+const OutlineRail = ({ items: itemsProp, scrollContainerRef, resolvePct, onJump, activeId, header, formatMetaLabel, collapsedFromLevel, presentation = "popover", bottomInset, topOffset = 0, panelWidth = 300, ariaLabel = "Outline" }) => {
+	const [stableItems, setStableItems] = useState(itemsProp);
+	const items = reconcileOutlineItems(stableItems, itemsProp);
+	if (items !== stableItems) setStableItems(items);
 	const [pctById, setPctById] = useState(/* @__PURE__ */ new Map());
 	const [derivedActive, setDerivedActive] = useState(null);
 	const [hovered, setHovered] = useState(false);
@@ -109,11 +204,22 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 	const resolvePctRef = useRef(resolvePct);
 	const onJumpRef = useRef(onJump);
 	const tree = useMemo(() => buildTree(items), [items]);
-	const [seededItems, setSeededItems] = useState(null);
+	const [seededItems, setSeededItems] = useState([]);
 	if (seededItems !== items) {
+		const knownIds = new Set(seededItems.map((item) => item.id));
 		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)));
+		setToggled((previous) => retainOutlineIdSet({
+			ids: previous,
+			knownIds,
+			seed: () => false,
+			items
+		}));
+		setCollapsed((previous) => retainOutlineIdSet({
+			ids: previous,
+			knownIds,
+			seed: (item) => collapsedFromLevel !== void 0 && item.level >= collapsedFromLevel,
+			items
+		}));
 	}
 	const maxLevel = useMemo(() => {
 		let max = 0;
@@ -210,15 +316,16 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		}
 		return ancestors;
 	}, [active, items]);
+	const activeControlled = activeId !== void 0;
 	const jumpTo = useCallback((id) => {
 		const container = scrollContainerRef.current;
 		if (!container) return;
-		if (activeId === void 0) {
+		if (!activeControlled) {
 			setDerivedActive(id);
 			manualLockUntil.current = Temporal.Now.instant().epochMilliseconds + 900;
 		}
 		onJumpRef.current(id, container);
-	}, [activeId, scrollContainerRef]);
+	}, [activeControlled, scrollContainerRef]);
 	const toggleCollapse = useCallback((id, rowEl) => {
 		const rowTop = rowEl?.getBoundingClientRect().top;
 		setToggled((prev) => new Set(prev).add(id));
@@ -283,81 +390,6 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 		if (closeTimer.current !== null) clearTimeout(closeTimer.current);
 		if (openTimer.current !== null) clearTimeout(openTimer.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", highlighted && "bg-accent"),
-			...isActive ? { [ACTIVE_ROW_ATTRIBUTE]: "" } : {},
-			onMouseEnter: () => setHoveredId(node.item.id),
-			onMouseLeave: () => setHoveredId(null),
-			children: [
-				hasChildren ? /* @__PURE__ */ jsx("button", {
-					"aria-expanded": !isCollapsed,
-					"aria-label": isCollapsed ? "Expand" : "Collapse",
-					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),
-					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", {
-						"aria-current": isActive ? "true" : void 0,
-						className: cn("flex min-w-0 flex-1 items-baseline gap-1.5 py-1.5 text-start text-[13px] leading-snug", rowTextClass(isActive, node.item.emphasis ?? OUTLINE_EMPHASIS.primary)),
-						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: outlineEntryText(node.item) })] }),
-				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",
-			children: node.children.map(renderNode)
-		})] }, `${node.item.id}-${node.index}`);
-	};
 	const visibleTicks = items.flatMap((item) => {
 		const pct = pctById.get(item.id);
 		return pct !== void 0 && item.level <= railLevelCap ? [{
@@ -483,9 +515,18 @@ const OutlineRail = ({ items, scrollContainerRef, resolvePct, onJump, activeId,
 				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)
+				children: /* @__PURE__ */ jsx(OutlineTree, {
+					activeAncestorIds,
+					activeId: active,
+					collapsed,
+					formatMetaLabel,
+					hoveredId,
+					maxLevel,
+					onHover: setHoveredId,
+					onJump: jumpTo,
+					onToggle: toggleCollapse,
+					toggled,
+					tree
 				})
 			})]
 		})]

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

@@ -0,0 +1,25 @@
+import { OutlineItem } from "./outline-rail.js";
+//#region src/components/outline-rail.logic.d.ts
+/**
+ * `next` with every entry whose content `previous` already holds under the
+ * same id replaced by that earlier object, and `previous` itself when nothing
+ * changed. Callers rebuild their items from scratch on every change (an
+ * editor re-collects its headings after each edit); reconciling keeps an
+ * unchanged entry's identity, so only the rows that actually changed render.
+ */
+export declare const reconcileOutlineItems: (previous: OutlineItem[], next: OutlineItem[]) => OutlineItem[];
+type RetainKnownIdsOptions = {
+  ids: ReadonlySet<string>;
+  /** The ids present before `items` replaced them. */
+  knownIds: ReadonlySet<string>;
+  /** What an id seen for the first time gets. */
+  seed: (item: OutlineItem) => boolean;
+  items: OutlineItem[];
+};
+/**
+ * Carry a per-entry flag set (collapsed, toggled by hand) across an items
+ * change: an entry that was already there keeps the reader's state, an entry
+ * seen for the first time gets `seed`, and a removed entry drops out.
+ */
+export declare const retainOutlineIdSet: ({ ids, knownIds, seed, items }: RetainKnownIdsOptions) => ReadonlySet<string>;
+//#endregion

package/dist/components/outline-rail.logic.js

@@ -0,0 +1,40 @@
+//#region src/components/outline-rail.logic.ts
+const OUTLINE_ITEM_EQUALS = Object.values({
+	id: (a, b) => a.id === b.id,
+	label: (a, b) => a.label === b.label,
+	title: (a, b) => a.title === b.title,
+	level: (a, b) => a.level === b.level,
+	meta: (a, b) => a.meta === b.meta,
+	color: (a, b) => a.color === b.color,
+	emphasis: (a, b) => a.emphasis === b.emphasis
+});
+const sameOutlineItem = (a, b) => OUTLINE_ITEM_EQUALS.every((equals) => equals(a, b));
+/**
+* `next` with every entry whose content `previous` already holds under the
+* same id replaced by that earlier object, and `previous` itself when nothing
+* changed. Callers rebuild their items from scratch on every change (an
+* editor re-collects its headings after each edit); reconciling keeps an
+* unchanged entry's identity, so only the rows that actually changed render.
+*/
+const reconcileOutlineItems = (previous, next) => {
+	if (previous === next) return previous;
+	const previousById = /* @__PURE__ */ new Map();
+	for (const item of previous) previousById.set(item.id, item);
+	const reconciled = next.map((item) => {
+		const earlier = previousById.get(item.id);
+		return earlier !== void 0 && sameOutlineItem(earlier, item) ? earlier : item;
+	});
+	return reconciled.length === previous.length && reconciled.every((item, index) => item === previous[index]) ? previous : reconciled;
+};
+/**
+* Carry a per-entry flag set (collapsed, toggled by hand) across an items
+* change: an entry that was already there keeps the reader's state, an entry
+* seen for the first time gets `seed`, and a removed entry drops out.
+*/
+const retainOutlineIdSet = ({ ids, knownIds, seed, items }) => {
+	const next = /* @__PURE__ */ new Set();
+	for (const item of items) if (knownIds.has(item.id) ? ids.has(item.id) : seed(item)) next.add(item.id);
+	return next.size === ids.size && [...next].every((id) => ids.has(id)) ? ids : next;
+};
+//#endregion
+export { reconcileOutlineItems, retainOutlineIdSet };

package/dist/components/popover.js

@@ -10,7 +10,7 @@ const PopoverCreateHandle = Popover$1.createHandle;
 const Popover = Popover$1.Root;
 function PopoverTrigger({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(Popover$1.Trigger, {
 			"data-slot": "popover-trigger",
 			...props

package/dist/components/prose.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/prose.d.ts
 declare const proseVariants: (props?: ({
-  size?: "default" | "sm" | "lede" | null | undefined;
+  size?: "default" | "lede" | "sm" | null | undefined;
   tone?: "default" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** A readable measure for narrative copy; task-shaped text should not use it. */

package/dist/components/scroll-area.js

@@ -8,12 +8,12 @@ const AXIS_VIEWPORT_CLASS = {
 	vertical: "overflow-x-hidden"
 };
 const ScrollArea = ({ axis = "both", className, children, scrollFade = false, scrollbarClassName, scrollbarGutter = false, viewportRef, ...props }) => /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
-	className: cn("size-full min-h-0", className),
+	className: cn("flex size-full min-h-0 flex-col", className),
 	...props,
 	children: [
 		/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
 			ref: viewportRef,
-			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background h-full max-h-[inherit] overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5", AXIS_VIEWPORT_CLASS[axis]),
+			className: cn("focus-visible:ring-ring focus-visible:ring-offset-background min-h-0 flex-1 overscroll-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-offset-1 data-has-overflow-x:overscroll-x-contain", scrollFade && "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] [--fade-size:1.5rem]", scrollbarGutter && "data-has-overflow-x:pb-2.5 data-has-overflow-y:pe-2.5", AXIS_VIEWPORT_CLASS[axis]),
 			"data-slot": "scroll-area-viewport",
 			children
 		}),

package/dist/components/sheet.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/sheet.d.ts
 declare const Sheet: <Payload>(props: Dialog.Root.Props<Payload>) => React$1.JSX.Element;
-declare const SheetPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SheetPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 type SheetSide = "inline-start" | "inline-end" | "block-start" | "block-end";
 declare function SheetTrigger({ tooltip, ...props }: Dialog.Trigger.Props & {
   tooltip?: React$1.ReactNode;

package/dist/components/sheet.js

@@ -13,7 +13,7 @@ const Sheet = Dialog.Root;
 const SheetPortal = Dialog.Portal;
 function SheetTrigger({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(Dialog.Trigger, {
 			"data-slot": "sheet-trigger",
 			...props
@@ -22,7 +22,7 @@ function SheetTrigger({ tooltip, ...props }) {
 }
 function SheetClose({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(Dialog.Close, {
 			"data-slot": "sheet-close",
 			...props

package/dist/components/sidebar.d.ts

@@ -60,7 +60,20 @@ declare const Sidebar: ({ side, variant, collapsible, mobileTitle, mobileDescrip
   /** Screen-reader description for the mobile sheet. Override to localize. */
   mobileDescription?: string;
 }) => import("react").JSX.Element;
-declare const SidebarTrigger: ({ className, onClick, label, "aria-label": ariaLabel, ...props }: React.ComponentProps<typeof Button> & {
+type PanelTriggerSide = "left" | "right";
+/**
+ * Toolbar toggle for a panel docked at one edge. `SidebarTrigger` is the
+ * `"left"` one; a host panel docked at the opposite edge (an inspector)
+ * renders the `"right"` one, so the two buttons stay mirror images instead
+ * of two hand-kept copies of the same chrome. `side` is logical, like
+ * `Sidebar`'s.
+ */
+declare const PanelTrigger: ({ side, label, "aria-label": ariaLabel, ...props }: Omit<React.ComponentProps<typeof Button>, "children"> & {
+  side: PanelTriggerSide;
+  /** Accessible name for the trigger. */
+  label: string;
+}) => import("react").JSX.Element;
+declare const SidebarTrigger: ({ onClick, label, ...props }: Omit<React.ComponentProps<typeof PanelTrigger>, "label" | "side"> & {
   /** Accessible name for the trigger. Override to localize. */
   label?: string;
 }) => import("react").JSX.Element;
@@ -86,7 +99,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?: "default" | "sm" | "lg" | "rail" | null | undefined;
+  size?: "default" | "lg" | "rail" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * The footer's avatar trigger, signed in (user menu) or not (sign-in): a
@@ -120,4 +133,4 @@ declare const SidebarMenuSubButton: ({ asChild, size, isActive, className, ...pr
   isActive?: boolean;
 }) => import("react").JSX.Element;
 //#endregion
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarIdentityTriggerClassName, useSidebar, useSidebarInlineSize, useSidebarLayout };
+export { PanelTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarIdentityTriggerClassName, useSidebar, useSidebarInlineSize, useSidebarLayout };

package/dist/components/sidebar.js

@@ -1,5 +1,5 @@
 "use client";
-import { PanelLeftIcon } from "../icons.js";
+import { PanelLeftIcon, PanelRightIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
@@ -12,8 +12,8 @@ import { deriveSidebarState, nextOpenMobile, nextRequestedOpen, resolveSidebarLa
 import { Skeleton } from "./skeleton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useId, useState } from "react";
-import { cva } from "class-variance-authority";
 import { panic } from "better-result";
+import { cva } from "class-variance-authority";
 //#region src/components/sidebar.tsx
 /**
 * Inline size the sidebar takes out of the layout row when expanded, in CSS
@@ -157,24 +157,44 @@ const Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offcanvas"
 		})]
 	});
 };
-const SidebarTrigger = ({ className, onClick, label = DEFAULT_TOGGLE_LABEL, "aria-label": ariaLabel, ...props }) => {
-	const { toggleSidebar } = useSidebar();
+const PANEL_TRIGGER_ICONS = {
+	left: PanelLeftIcon,
+	right: PanelRightIcon
+};
+/**
+* Toolbar toggle for a panel docked at one edge. `SidebarTrigger` is the
+* `"left"` one; a host panel docked at the opposite edge (an inspector)
+* renders the `"right"` one, so the two buttons stay mirror images instead
+* of two hand-kept copies of the same chrome. `side` is logical, like
+* `Sidebar`'s.
+*/
+const PanelTrigger = ({ side, label, "aria-label": ariaLabel, ...props }) => {
+	const Icon = PANEL_TRIGGER_ICONS[side];
 	return /* @__PURE__ */ jsxs(Button, {
 		"aria-label": ariaLabel ?? label,
-		className: cn("size-7", className),
+		"data-slot": "panel-trigger",
+		size: "icon",
+		variant: "ghost",
+		...props,
+		className: cn("size-7", props.className),
+		children: [/* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: label
+		})]
+	});
+};
+const SidebarTrigger = ({ onClick, label = DEFAULT_TOGGLE_LABEL, ...props }) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx(PanelTrigger, {
 		"data-sidebar": "trigger",
 		"data-slot": "sidebar-trigger",
+		label,
 		onClick: (event) => {
 			onClick?.(event);
 			toggleSidebar();
 		},
-		size: "icon",
-		variant: "ghost",
 		...props,
-		children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
-			className: "sr-only",
-			children: label
-		})]
+		side: "left"
 	});
 };
 const SidebarRail = ({ className, label = DEFAULT_TOGGLE_LABEL, "aria-label": ariaLabel, ...props }) => {
@@ -373,4 +393,4 @@ const SidebarMenuSubButton = ({ asChild = false, size = "md", isActive = false,
 	});
 };
 //#endregion
-export { SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarIdentityTriggerClassName, useSidebar, useSidebarInlineSize, useSidebarLayout };
+export { PanelTrigger, SIDEBAR_WIDTH_ICON_PX, SIDEBAR_WIDTH_PX, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarIdentityTriggerClassName, useSidebar, useSidebarInlineSize, useSidebarLayout };

package/dist/components/split-button.d.ts

@@ -1,4 +1,4 @@
-import { Button } from "./button.js";
+import { BUTTON_CONTENT, Button } from "./button.js";
 import { DropdownMenu as Menu } from "./menu.js";
 import { Popover } from "./popover.js";
 import { ComponentProps, ReactNode } from "react";
@@ -16,9 +16,11 @@ type SplitButtonSharedProps = {
 };
 type SplitButtonPrimary = {
   children: ReactNode;
+  primaryContent: (typeof BUTTON_CONTENT)[keyof typeof BUTTON_CONTENT];
   primaryLabel: string;
 } | {
   children: string;
+  primaryContent?: never;
   primaryLabel?: never;
 };
 type SplitButtonProps = SplitButtonSharedProps & SplitButtonPrimary & ({

package/dist/components/split-button.js

@@ -1,7 +1,7 @@
 "use client";
 import { ChevronDownIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
-import { Button } from "./button.js";
+import { BUTTON_CONTENT, Button } from "./button.js";
 import { Popover, PopoverTrigger } from "./popover.js";
 import { DropdownMenu as Menu, DropdownMenuTrigger as MenuTrigger } from "./menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,6 +12,7 @@ const SplitButton = (props) => {
 	const triggerButton = /* @__PURE__ */ jsx(Button, {
 		className: cn("text-muted-foreground group-hover/split:bg-muted group-focus-within/split:bg-muted hover:bg-accent hover:text-foreground active:bg-accent/80 data-popup-open:bg-accent rounded-md [&_svg]:mx-0", size === "sm" ? "h-7 w-3.5 px-0 sm:h-7" : "h-8 w-4 px-0 sm:h-8", "pointer-coarse:min-h-11 pointer-coarse:min-w-11"),
 		size: "sm",
+		tooltip: menuLabel,
 		variant: "ghost"
 	});
 	const controls = /* @__PURE__ */ jsxs("div", {
@@ -25,6 +26,7 @@ const SplitButton = (props) => {
 			disabled: primaryDisabled,
 			onClick: onPrimaryClick,
 			size: "sm",
+			tooltip: props.primaryContent === BUTTON_CONTENT.icon ? primaryLabel : void 0,
 			variant: "ghost",
 			children
 		}), props.surface === "popover" ? /* @__PURE__ */ jsx(PopoverTrigger, {

package/dist/components/steps.d.ts

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 //#region src/components/steps.d.ts
 declare const stepsVariants: (props?: ({
-  variant?: "progress" | "default" | "compact" | null | undefined;
+  variant?: "compact" | "default" | "progress" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StepsProps = React$1.ComponentProps<"ol"> & VariantProps<typeof stepsVariants> & {
   markerStyle: NonNullable<React$1.CSSProperties["listStyleType"]>;
@@ -10,7 +10,7 @@ type StepsProps = React$1.ComponentProps<"ol"> & VariantProps<typeof stepsVarian
 /** A meaningful procedure, timeline, or ranking. The list owns its numbers. */
 declare const Steps: ({ className, variant, markerStyle, style, ...props }: StepsProps) => React$1.JSX.Element;
 declare const stepVariants: (props?: ({
-  status?: "current" | "completed" | "upcoming" | null | undefined;
+  status?: "completed" | "current" | "upcoming" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StepProps = React$1.ComponentProps<"li"> & VariantProps<typeof stepVariants>;
 declare const Step: ({ className, status, ...props }: StepProps) => React$1.JSX.Element;

package/dist/components/tabs.js

@@ -22,7 +22,7 @@ const TabsList = ({ variant = "default", className, children, ref, ...props }) =
 		if (hasTabOrderChanged(previousTabs, tabs)) setRemeasureToken((token) => token + 1);
 	});
 	return /* @__PURE__ */ jsxs(Tabs$1.List, {
-		className: cn("text-muted-foreground relative z-0 flex w-fit max-w-full items-center justify-center-safe gap-x-0.5", "scrollbar-none overflow-auto data-[orientation=horizontal]:overscroll-x-contain data-[orientation=vertical]:overscroll-y-contain [&::-webkit-scrollbar]:hidden", "data-[orientation=vertical]:flex-col", variant === "default" ? "bg-muted text-foreground-label rounded-lg p-0.5" : "*:data-[slot=tabs-tab]:hover:bg-accent data-[orientation=horizontal]:py-1 data-[orientation=vertical]:px-1", className),
+		className: cn("text-muted-foreground relative z-0 flex w-fit max-w-full items-center justify-center-safe gap-x-0.5", "scrollbar-none overflow-auto data-[orientation=horizontal]:overflow-y-hidden data-[orientation=horizontal]:overscroll-x-contain data-[orientation=vertical]:overflow-x-hidden data-[orientation=vertical]:overscroll-y-contain [&::-webkit-scrollbar]:hidden", "data-[orientation=vertical]:flex-col", variant === "default" ? "bg-muted text-foreground-label rounded-lg p-0.5" : "*:data-[slot=tabs-tab]:hover:bg-accent data-[orientation=horizontal]:py-1 data-[orientation=vertical]:px-1", className),
 		"data-slot": "tabs-list",
 		ref: composeRefs(listRef, ref),
 		...props,

package/dist/components/tooltip-trigger-helper.d.ts

@@ -4,6 +4,11 @@ type TooltipTriggerOptions = {
   trigger: React$1.ReactElement;
   tooltip: React$1.ReactNode;
 };
+/**
+ * Overlay triggers pass only an explicit `tooltip`. They cannot tell whether
+ * their content is a label or a glyph; a trigger rendered as `Button` hands its
+ * `aria-label` to that Button, whose size decides (see `BUTTON_SIZE_CONTENT`).
+ */
 declare const renderTooltipTrigger: ({ trigger, tooltip }: TooltipTriggerOptions) => React$1.JSX.Element;
 //#endregion
 export { renderTooltipTrigger };

package/dist/components/tooltip-trigger-helper.js

@@ -3,6 +3,11 @@ import { hasTooltipContent } from "../lib/tooltip-content.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tooltip-trigger-helper.tsx
+/**
+* Overlay triggers pass only an explicit `tooltip`. They cannot tell whether
+* their content is a label or a glyph; a trigger rendered as `Button` hands its
+* `aria-label` to that Button, whose size decides (see `BUTTON_SIZE_CONTENT`).
+*/
 const renderTooltipTrigger = ({ trigger, tooltip }) => {
 	if (!hasTooltipContent(tooltip)) return trigger;
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: trigger }), /* @__PURE__ */ jsx(TooltipPopup, { children: tooltip })] });