@stll/ui 0.52.1 → 0.53.0

package/dist/components/alert-dialog.d.ts

@@ -4,7 +4,7 @@ import * as React$1 from "react";
 //#region src/components/alert-dialog.d.ts
 declare const AlertDialogCreateHandle: typeof AlertDialog$1.createHandle;
 declare const AlertDialog: typeof AlertDialog$1.Root;
-declare const AlertDialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function AlertDialogTrigger({ tooltip, ...props }: AlertDialog$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;

package/dist/components/alert-dialog.js

@@ -11,7 +11,7 @@ const AlertDialog = AlertDialog$1.Root;
 const AlertDialogPortal = AlertDialog$1.Portal;
 function AlertDialogTrigger({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
 			"data-slot": "alert-dialog-trigger",
 			nativeButton: false,
@@ -65,7 +65,7 @@ const AlertDialogDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
 });
 function AlertDialogClose({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(AlertDialog$1.Close, {
 			"data-slot": "alert-dialog-close",
 			...props

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

@@ -1,7 +1,7 @@
 import * as React$1 from "react";
 //#region src/components/bidi-text.d.ts
 export declare const BidiText: (props: BidiTextProps) => React$1.JSX.Element;
-export declare const UserText: (props: BidiTextProps) => React$1.JSX.Element;
+export declare const UserText: typeof BidiText;
 type BidiDirection = "auto" | "ltr" | "rtl";
 type BdiElementProps = Omit<React$1.ComponentPropsWithoutRef<"bdi">, "dir"> & {
   as?: "bdi";

package/dist/components/button.d.ts

@@ -13,9 +13,39 @@ import { VariantProps } from "class-variance-authority";
  */
 declare const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 declare const buttonVariants: (props?: ({
-  size?: "default" | "sm" | "lg" | "icon" | "chip" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "row" | "xl" | "xs" | null | undefined;
-  variant?: "link" | "default" | "destructive" | "destructive-outline" | "destructive-ghost" | "ghost" | "muted" | "outline" | "secondary" | null | undefined;
+  size?: "chip" | "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "lg" | "row" | "sm" | "xl" | "xs" | null | undefined;
+  variant?: "default" | "destructive" | "destructive-ghost" | "destructive-outline" | "ghost" | "link" | "muted" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** What a button's box holds: a glyph alone, or a visible label. */
+declare const BUTTON_CONTENT: {
+  readonly icon: "icon";
+  readonly text: "text";
+};
+/**
+ * An icon size is a square that fits a glyph and no label, so the button shows
+ * no text, and its accessible name doubles as its tooltip. A text size shows
+ * its own label and gets a tooltip only from an explicit `tooltip`: an implicit
+ * one would repeat or contradict the label, and because a tooltip opens on
+ * focus, it would take the first Escape from a popover or dialog that focuses
+ * the button.
+ *
+ * Icon sizes are exactly the `icon`-prefixed ones; the type below enforces it,
+ * because the `icon-button-requires-tooltip` lint rule reads the same prefix.
+ */
+declare const BUTTON_SIZE_CONTENT: {
+  readonly chip: "text";
+  readonly default: "text";
+  readonly icon: "icon";
+  readonly "icon-lg": "icon";
+  readonly "icon-sm": "icon";
+  readonly "icon-xl": "icon";
+  readonly "icon-xs": "icon";
+  readonly lg: "text";
+  readonly row: "text";
+  readonly sm: "text";
+  readonly xl: "text";
+  readonly xs: "text";
+};
 type ButtonProps = {
   variant?: VariantProps<typeof buttonVariants>["variant"];
   size?: VariantProps<typeof buttonVariants>["size"];
@@ -25,4 +55,4 @@ type ButtonProps = {
 } & useRender.ComponentProps<"button">;
 declare function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
-export { Button, buttonAccessibleDisabledClass, buttonVariants };
+export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/button.js

@@ -7,6 +7,7 @@ import { Loader } from "./loader.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { panic } from "better-result";
 import { cva } from "class-variance-authority";
 //#region src/components/button.tsx
 /**
@@ -29,9 +30,10 @@ const buttonAccessibleDisabledClass = "cursor-not-allowed opacity-64";
 * buttons keep the treatment of their surface instead.
 */
 const buttonPressClass = "motion-safe:transition-transform motion-safe:duration-150 ease-out motion-safe:active:scale-[0.98]";
+const BUTTON_DEFAULT_SIZE = "default";
 const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border text-base font-medium whitespace-nowrap outline-none select-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-64 sm:text-sm pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4", {
 	defaultVariants: {
-		size: "default",
+		size: BUTTON_DEFAULT_SIZE,
 		variant: "default"
 	},
 	variants: {
@@ -62,9 +64,47 @@ const buttonVariants = cva("focus-visible:ring-ring focus-visible:ring-offset-ba
 		}
 	}
 });
+/** What a button's box holds: a glyph alone, or a visible label. */
+const BUTTON_CONTENT = {
+	icon: "icon",
+	text: "text"
+};
+/**
+* An icon size is a square that fits a glyph and no label, so the button shows
+* no text, and its accessible name doubles as its tooltip. A text size shows
+* its own label and gets a tooltip only from an explicit `tooltip`: an implicit
+* one would repeat or contradict the label, and because a tooltip opens on
+* focus, it would take the first Escape from a popover or dialog that focuses
+* the button.
+*
+* Icon sizes are exactly the `icon`-prefixed ones; the type below enforces it,
+* because the `icon-button-requires-tooltip` lint rule reads the same prefix.
+*/
+const BUTTON_SIZE_CONTENT = {
+	chip: BUTTON_CONTENT.text,
+	default: BUTTON_CONTENT.text,
+	icon: BUTTON_CONTENT.icon,
+	"icon-lg": BUTTON_CONTENT.icon,
+	"icon-sm": BUTTON_CONTENT.icon,
+	"icon-xl": BUTTON_CONTENT.icon,
+	"icon-xs": BUTTON_CONTENT.icon,
+	lg: BUTTON_CONTENT.text,
+	row: BUTTON_CONTENT.text,
+	sm: BUTTON_CONTENT.text,
+	xl: BUTTON_CONTENT.text,
+	xs: BUTTON_CONTENT.text
+};
+const implicitTooltip = (size, accessibleName) => {
+	const content = BUTTON_SIZE_CONTENT[size ?? BUTTON_DEFAULT_SIZE];
+	switch (content) {
+		case BUTTON_CONTENT.icon: return accessibleName;
+		case BUTTON_CONTENT.text: return;
+		default: return panic(`Unhandled button content: ${String(content)}`);
+	}
+};
 function Button({ className, variant, size, render, loading, icon, children, disabled, tooltip, ...props }) {
 	const typeValue = render ? void 0 : "button";
-	const tooltipContent = tooltip ?? props["aria-label"] ?? props.title;
+	const tooltipContent = tooltip ?? implicitTooltip(size, props["aria-label"] ?? props.title);
 	const disposition = resolveButtonDisposition({
 		disabled,
 		loading,
@@ -110,4 +150,4 @@ function Button({ className, variant, size, render, loading, icon, children, dis
 	});
 }
 //#endregion
-export { Button, buttonAccessibleDisabledClass, buttonVariants };
+export { BUTTON_CONTENT, BUTTON_SIZE_CONTENT, Button, buttonAccessibleDisabledClass, buttonVariants };

package/dist/components/combobox.d.ts

@@ -36,6 +36,5 @@ declare const ComboboxChips: ({ className, children, startAddon, ...props }: Com
   startAddon?: React$1.ReactNode;
 }) => React$1.JSX.Element;
 declare const ComboboxChip: ({ children, ...props }: Combobox$1.Chip.Props) => React$1.JSX.Element;
-declare const useComboboxFilter: typeof Combobox$1.useFilter;
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue };

package/dist/components/combobox.js

@@ -231,6 +231,5 @@ const ComboboxChipRemove = (props) => /* @__PURE__ */ jsx(Combobox$1.ChipRemove,
 	...props,
 	children: /* @__PURE__ */ jsx(XIcon, {})
 });
-const useComboboxFilter = Combobox$1.useFilter;
 //#endregion
-export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, useComboboxFilter };
+export { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue };

package/dist/components/details-grid.js

@@ -2,7 +2,7 @@ import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/details-grid.tsx
 const DetailsGrid = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: "@container min-w-0",
+	className: "@container min-w-0 [contain-intrinsic-inline-size:20rem]",
 	"data-slot": "details-grid-container",
 	children: /* @__PURE__ */ jsx("dl", {
 		className: cn("grid grid-cols-[repeat(auto-fit,minmax(min(100%,20rem),1fr))] gap-x-6 gap-y-2 font-sans @min-[64rem]:grid-cols-3", className),

package/dist/components/dialog.d.ts

@@ -14,7 +14,7 @@ declare const DialogProvider: ({ labels, children }: React$1.PropsWithChildren<{
 declare const Dialog: <Payload>({ dirty, onOpenChange, onOpenChangeComplete, ...props }: Dialog$1.Root.Props<Payload> & {
   dirty?: boolean;
 }) => React$1.JSX.Element;
-declare const DialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function DialogTrigger({ tooltip, ...props }: Dialog$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;

package/dist/components/dialog.js

@@ -65,7 +65,7 @@ const Dialog = ({ dirty = false, onOpenChange, onOpenChangeComplete, ...props })
 const DialogPortal = Dialog$1.Portal;
 function DialogTrigger({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(Dialog$1.Trigger, {
 			"data-slot": "dialog-trigger",
 			...props
@@ -74,7 +74,7 @@ function DialogTrigger({ tooltip, ...props }) {
 }
 function DialogClose({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(Dialog$1.Close, {
 			"data-slot": "dialog-close",
 			...props

package/dist/components/inline-rename.js

@@ -33,6 +33,7 @@ const InlineRenameInput = ({ value, onValueChange, onCommit, onCancel, onBlur, c
 			"data-slot": "inline-rename-mirror",
 			children: mirrorText
 		}), /* @__PURE__ */ jsx("input", {
+			enterKeyHint: "done",
 			...props,
 			"data-slot": "inline-rename-input",
 			dir: dir ?? (isStructuredInputType(props.type) ? "ltr" : contentDir(value)),

package/dist/components/input-group.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
-  align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+  align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const InputGroupAddon: ({ className, align, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) => React$1.JSX.Element;
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;

package/dist/components/menu.d.ts

@@ -2,8 +2,8 @@ import * as React$1 from "react";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
 //#region src/components/menu.d.ts
 declare const MenuCreateHandle: typeof Menu$1.createHandle;
-declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => React$1.JSX.Element;
-declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Menu: typeof Menu$1.Root;
+declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").MenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare function MenuTrigger({ tooltip, ...props }: Menu$1.Trigger.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;

package/dist/components/menu.js

@@ -12,7 +12,7 @@ const Menu = Menu$1.Root;
 const MenuPortal = Menu$1.Portal;
 function MenuTrigger({ tooltip, ...props }) {
 	return renderTooltipTrigger({
-		tooltip: tooltip ?? props["aria-label"] ?? props.title,
+		tooltip,
 		trigger: /* @__PURE__ */ jsx(Menu$1.Trigger, {
 			"data-slot": "menu-trigger",
 			nativeButton: true,

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

@@ -59,5 +59,5 @@ export type OutlineRailProps = {
 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, formatMetaLabel, collapsedFromLevel, presentation, bottomInset, topOffset, panelWidth, ariaLabel }: OutlineRailProps) => import("react").JSX.Element | null;
+export declare const OutlineRail: ({ items: itemsProp, 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

@@ -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/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;