@parallelworks/ui 0.51.0 → 0.53.0

package/dist/components/SettingModeOption.js

@@ -1,22 +1,28 @@
 import { cx } from "../cx.js";
 import { Radio } from "./Radio.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
 //#region src/components/SettingModeOption.tsx
 /** A named and described choice in a SettingsCard, picking between modes such
 *  as default or custom. Stack them in a `RadioGroup`, which holds the value. */
 function SettingModeOption({ value, label, description, disabled }) {
+	const id = useId();
 	return /* @__PURE__ */ jsxs("label", {
-		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-default opacity-60" : "cursor-pointer", "border-t border-(--theme-border) first:border-t-0"),
+		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", "border-t border-(--theme-border) first:border-t-0"),
 		children: [/* @__PURE__ */ jsx(Radio, {
 			value,
 			disabled,
+			"aria-labelledby": `${id}label`,
+			"aria-describedby": `${id}description`,
 			className: "mt-0.5"
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0",
 			children: [/* @__PURE__ */ jsx("div", {
+				id: `${id}label`,
 				className: "font-semibold theme-text leading-tight",
 				children: label
 			}), /* @__PURE__ */ jsx("div", {
+				id: `${id}description`,
 				className: "theme-muted-text text-xs leading-snug mt-0.5",
 				children: description
 			})]

package/dist/components/SettingsCard.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 export interface SettingsCardProps {
     /** Names the card above it. Leave it out on a page's first card, where the
      *  page title already names it. */
@@ -8,6 +8,8 @@ export interface SettingsCardProps {
      *  header's far edge, such as Save. */
     action?: ReactNode;
     actionAlign?: 'beside' | 'end' | undefined;
+    /** The title's level in the page's outline; its SettingsHeadings sit one below. */
+    headingLevel?: 2 | 3 | undefined;
     /** Lets content such as an inline menu reach past the card's rounded edge. */
     overflowVisible?: boolean | undefined;
     className?: string | undefined;
@@ -16,8 +18,8 @@ export interface SettingsCardProps {
 }
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
  *  the next. Cards stack with room between them. */
-export declare function SettingsCard({ title, description, action, actionAlign, overflowVisible, className, children, }: SettingsCardProps): import("react").JSX.Element;
-/** A heading between groups of rows inside a SettingsCard. */
+export declare function SettingsCard({ title, description, action, actionAlign, headingLevel, overflowVisible, className, children, }: SettingsCardProps): import("react").JSX.Element;
+/** A heading between groups of rows inside a SettingsCard, a level below the card's title. */
 export declare function SettingsHeading({ children }: {
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/components/SettingsCard.js

@@ -1,32 +1,39 @@
 import { cx } from "../cx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
 //#region src/components/SettingsCard.tsx
+var HeadingLevel = createContext(3);
 /** A page's settings, grouped: a titled panel of SettingRows, each ruled off from
 *  the next. Cards stack with room between them. */
-function SettingsCard({ title, description, action, actionAlign = "beside", overflowVisible = false, className, children }) {
-	return /* @__PURE__ */ jsxs("section", {
-		className: cx("mt-10 first:mt-0", className),
-		children: [(title || action) && /* @__PURE__ */ jsxs("div", {
-			className: "mb-3 px-0.5",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: cx("flex items-center gap-1.5", actionAlign === "end" && "justify-between"),
-				children: [title && /* @__PURE__ */ jsx("h2", {
-					className: "text-[15px] leading-none font-semibold theme-text",
-					children: title
-				}), action]
-			}), description && /* @__PURE__ */ jsx("p", {
-				className: "mt-1.5 text-xs leading-snug theme-muted-text",
-				children: description
+function SettingsCard({ title, description, action, actionAlign = "beside", headingLevel = 2, overflowVisible = false, className, children }) {
+	const Heading = `h${headingLevel}`;
+	return /* @__PURE__ */ jsx(HeadingLevel, {
+		value: headingLevel + 1,
+		children: /* @__PURE__ */ jsxs("section", {
+			className: cx("mt-10 first:mt-0", className),
+			children: [(title || action) && /* @__PURE__ */ jsxs("div", {
+				className: "mb-3 px-0.5",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx("flex items-center gap-1.5", actionAlign === "end" && "justify-between"),
+					children: [title && /* @__PURE__ */ jsx(Heading, {
+						className: "text-[15px] leading-none font-semibold theme-text",
+						children: title
+					}), action]
+				}), description && /* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-xs leading-snug theme-muted-text",
+					children: description
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: cx("panel divide-y divide-(--theme-border)", overflowVisible ? "overflow-visible" : "overflow-hidden"),
+				children
 			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx("panel divide-y divide-(--theme-border)", overflowVisible ? "overflow-visible" : "overflow-hidden"),
-			children
-		})]
+		})
 	});
 }
-/** A heading between groups of rows inside a SettingsCard. */
+/** A heading between groups of rows inside a SettingsCard, a level below the card's title. */
 function SettingsHeading({ children }) {
-	return /* @__PURE__ */ jsx("h3", {
+	const Heading = `h${useContext(HeadingLevel)}`;
+	return /* @__PURE__ */ jsx(Heading, {
 		className: "px-5 py-3 text-sm font-semibold tracking-wider uppercase theme-muted-panel theme-muted-text",
 		children
 	});

package/dist/components/Slider.js

@@ -20,7 +20,7 @@ function Slider$1({ value, onValueChange, min, max, step = 1, disabled = false,
 				className: "h-1 w-full rounded-full bg-(--theme-border)",
 				children: [/* @__PURE__ */ jsx(Slider.Indicator, { className: "rounded-full bg-(--theme-accent)" }), /* @__PURE__ */ jsx(Slider.Thumb, {
 					"aria-label": ariaLabel,
-					className: "size-4 rounded-full border-2 border-(--theme-accent) bg-(--theme-panel-bg) shadow-sm outline-none has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-(--theme-focus-ring)"
+					className: "size-4 rounded-full border-2 border-(--theme-accent) bg-(--theme-panel-bg) shadow-sm has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-(--theme-focus)"
 				})]
 			})
 		})

package/dist/components/StatusBadge.js

@@ -13,7 +13,7 @@ function StatusBadge({ children, variant = "default", pulse = false, dot = false
 		children: [
 			pulse && /* @__PURE__ */ jsxs("span", {
 				className: "relative flex h-2 w-2",
-				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", toneFill[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", toneFill[variant]) })]
+				children: [/* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden", toneFill[variant]) }), /* @__PURE__ */ jsx("span", { className: cx("relative inline-flex h-2 w-2 rounded-full", toneFill[variant]) })]
 			}),
 			dot && !pulse && /* @__PURE__ */ jsx("span", { className: cx("inline-flex h-1.5 w-1.5 rounded-full", toneFill[variant]) }),
 			children
@@ -27,7 +27,7 @@ function StatusDot({ variant = "default", pulse = false, size = 8, className })
 			width: size,
 			height: size
 		},
-		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75", toneFill[variant]) }), /* @__PURE__ */ jsx("span", {
+		children: [pulse && /* @__PURE__ */ jsx("span", { className: cx("absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 motion-reduce:hidden", toneFill[variant]) }), /* @__PURE__ */ jsx("span", {
 			className: cx("relative inline-flex rounded-full", toneFill[variant]),
 			style: {
 				width: size,

package/dist/components/Switch.js

@@ -1,15 +1,16 @@
 import { cx } from "../cx.js";
+import { focusOutline } from "./fieldBox.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
 //#region src/components/Switch.tsx
 var sizes = {
 	sm: {
 		root: "h-5 w-9",
-		thumb: "size-4 data-checked:translate-x-4"
+		thumb: "size-4 data-checked:translate-x-4 rtl:data-checked:-translate-x-4"
 	},
 	md: {
 		root: "h-6 w-11",
-		thumb: "size-5 data-checked:translate-x-5"
+		thumb: "size-5 data-checked:translate-x-5 rtl:data-checked:-translate-x-5"
 	}
 };
 /**
@@ -20,8 +21,8 @@ var sizes = {
 function Switch$1({ size = "md", className, onLabel, offLabel, ...props }) {
 	const control = /* @__PURE__ */ jsx(Switch.Root, {
 		...props,
-		className: cx("peer inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border) transition-colors duration-200 cursor-pointer outline-none", "data-checked:bg-(--theme-accent)", "focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
-		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cx("rounded-full bg-white shadow-sm transition-transform duration-200", sizes[size].thumb) })
+		className: cx("peer inline-flex shrink-0 items-center rounded-full p-0.5 bg-(--theme-border-strong) transition-colors duration-200 cursor-pointer motion-reduce:transition-none", "data-checked:bg-(--theme-accent)", focusOutline, "aria-invalid:ring-2 aria-invalid:ring-(--theme-error)", "data-disabled:cursor-not-allowed data-disabled:opacity-50", sizes[size].root, className),
+		children: /* @__PURE__ */ jsx(Switch.Thumb, { className: cx("rounded-full bg-white shadow-sm transition-transform duration-200 motion-reduce:transition-none", sizes[size].thumb) })
 	});
 	if (onLabel === void 0 && offLabel === void 0) return control;
 	return /* @__PURE__ */ jsxs("span", {

package/dist/components/Table.d.ts

@@ -1,24 +1,30 @@
 import React from 'react';
-import type { TDirection } from './Sort.js';
-interface IItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+/** Which way a column sorts, as `aria-sort` names it. */
+export type SortDirection = 'ascending' | 'descending' | 'none';
+/** `comfortable` gives each row room; `compact` fits a short key and value list. */
+export type TableDensity = 'comfortable' | 'compact';
+interface ItemProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /** Lets the text wrap; by default a cell keeps to one line. */
     wrap?: boolean;
-    colspan?: number;
 }
-declare function Item({ wrap, children, className, colspan, ...tdProps }: IItemProps): React.JSX.Element;
-declare function CompactItem({ wrap, children, className, colspan, ...tdProps }: IItemProps): React.JSX.Element;
-interface ITableHeaderProps {
+declare function Item({ wrap, children, className, ...tdProps }: ItemProps): React.JSX.Element;
+interface HeaderProps {
     children?: React.ReactNode;
-    className?: string;
+    className?: string | undefined;
     style?: React.CSSProperties | undefined;
-    colspan?: number;
-    onClick?: (() => void) | undefined;
-    sort?: TDirection | 'none';
-    /** When false, drops uppercase + tracking-wider for a sentence-case header. */
-    caps?: boolean;
+    colSpan?: number | undefined;
+    /** Which way the column sorts now. With `onSort`, the header is a button
+     *  that shows it; `none` for a sortable column that isn't the sorted one. */
+    sort?: SortDirection | undefined;
+    /** Sorts by this column, or flips its direction. */
+    onSort?: (() => void) | undefined;
+    /** False sets the title in sentence case instead of small capitals. */
+    caps?: boolean | undefined;
 }
-declare function Header({ children, className, style, colspan, onClick, sort, caps, }: ITableHeaderProps): React.JSX.Element;
-interface ITableProps {
+declare function Header({ children, className, style, colSpan, sort, onSort, caps }: HeaderProps): React.JSX.Element;
+interface TableProps {
     children?: React.ReactNode;
+    density?: TableDensity | undefined;
     borderless?: boolean;
     /** When false, drops the theme-panel background. */
     panel?: boolean;
@@ -30,6 +36,13 @@ interface ITableProps {
     rounded?: boolean;
     roundedBottom?: boolean;
     isLoading?: boolean;
+    /** The header row stays in view while the rows scroll under it. It sticks
+     *  to the nearest scrolling ancestor, `--table-header-top` below its top
+     *  edge (0 unless an ancestor sets it), so the table no longer scrolls or
+     *  clips on its own: a box that scrolls itself is all a sticky header can
+     *  stick to. Its ancestor scrolls it sideways as well as down. Rows pass
+     *  under the header, so a `theadClassName` of your own needs a background. */
+    stickyHeader?: boolean | undefined;
     /** Forwarded to the `<table>`, for attributes that must sit on the element owning
      *  the rows — `role='grid'`, aria-activedescendant, aria-rowcount. `className` is
      *  excluded because it is spread after the table's own classes; use the
@@ -39,14 +52,11 @@ interface ITableProps {
         'aria-rowcount'?: number;
     };
 }
-export declare function Table({ borderless, panel, className, wrapperClassName, tbodyClassName, theadClassName, children, roundedTop, rounded, roundedBottom, isLoading, tableProps, }: ITableProps): React.JSX.Element;
+/** Rows of values under a row of column titles. Put `Table.Header`s first among
+ *  the children, then `<tr>`s of `Table.Item`s. */
+export declare function Table({ density, borderless, panel, className, wrapperClassName, tbodyClassName, theadClassName, children, roundedTop, rounded, roundedBottom, isLoading, stickyHeader, tableProps, }: TableProps): React.JSX.Element;
 export declare namespace Table {
     export { Header };
     export { Item };
 }
-export declare function CompactTable({ wrapperClassName, className, tbodyClassName, children, roundedTop, rounded, roundedBottom, }: Pick<ITableProps, 'wrapperClassName' | 'className' | 'tbodyClassName' | 'children' | 'roundedTop' | 'rounded' | 'roundedBottom'>): React.JSX.Element;
-export declare namespace CompactTable {
-    export { Header };
-    export { CompactItem as Item };
-}
 export {};

package/dist/components/Table.js

@@ -1,41 +1,41 @@
 import { cx } from "../cx.js";
+import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
 import { Loader } from "./Loader.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { createContext, useContext } from "react";
 //#region src/components/Table.tsx
-function Item({ wrap = false, children, className, colspan = 1, ...tdProps }) {
-	const yPadding = className?.includes("py-") ? "" : "py-4";
-	const xPadding = className?.includes("px-") ? "" : "px-2";
+var DensityContext = createContext("comfortable");
+var cellX = "px-3";
+function Item({ wrap = false, children, className, ...tdProps }) {
+	const density = useContext(DensityContext);
 	return /* @__PURE__ */ jsx("td", {
 		...tdProps,
-		colSpan: colspan,
-		className: cx(yPadding, xPadding, wrap ? "" : "whitespace-nowrap", className),
+		className: cx(cellX, density === "compact" ? "py-1.5 text-sm" : "py-4", !wrap && "whitespace-nowrap", className),
 		children
 	});
 }
-function CompactItem({ wrap = false, children, className, colspan = 1, ...tdProps }) {
-	return /* @__PURE__ */ jsx("td", {
-		...tdProps,
-		colSpan: colspan,
-		className: cx("px-2 text-sm font-medium", !wrap && "whitespace-nowrap", className),
-		children
-	});
-}
-function Header({ children, className, style, colspan = 1, onClick, sort, caps = true }) {
-	const yPadding = className?.includes("py-") ? "" : "py-3";
-	const xPadding = className?.includes("px-") ? "" : "px-3";
-	const textAlign = className?.includes("text-") ? "" : "text-left";
+var sortIcons = {
+	ascending: SortUpIcon,
+	descending: SortDownIcon,
+	none: SortUnsortedIcon
+};
+function Header({ children, className, style, colSpan, sort, onSort, caps = true }) {
+	const density = useContext(DensityContext);
+	const Icon = sortIcons[sort ?? "none"];
 	return /* @__PURE__ */ jsx("th", {
 		scope: "col",
-		colSpan: colspan,
+		colSpan,
 		style,
-		"aria-sort": sort === "unsorted" ? "none" : sort,
-		className: cx(className, yPadding, xPadding, textAlign, "text-xs font-medium", caps ? "uppercase tracking-wider" : ""),
-		children: onClick ? /* @__PURE__ */ jsx("button", {
+		"aria-sort": onSort ? sort ?? "none" : void 0,
+		className: cx(cellX, density === "compact" ? "py-2" : "py-3", "text-left text-xs font-medium", caps && "uppercase tracking-wider", className),
+		children: onSort ? /* @__PURE__ */ jsxs("button", {
 			type: "button",
-			onClick,
-			className: "w-full cursor-pointer text-inherit [text-align:inherit] hover:opacity-80 transition-opacity",
-			children
+			onClick: onSort,
+			className: "group/sort -mx-1 -my-1 inline-flex cursor-pointer py-1 align-middle items-center gap-1 rounded px-1 text-inherit [text-transform:inherit] hover:text-(--theme-app) focus-visible:outline-2 focus-visible:outline-(--theme-link) in-[.text-right]:flex-row-reverse",
+			children: [children, /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": "true",
+				className: cx("size-3.5 shrink-0", (sort ?? "none") === "none" && "opacity-0 group-hover/sort:opacity-40 group-focus-visible/sort:opacity-40 pointer-coarse:opacity-40")
+			})]
 		}) : children
 	});
 }
@@ -43,60 +43,37 @@ var isHeaderChild = (child) => {
 	if (!React.isValidElement(child)) return false;
 	return child.type === Header || typeof child.type === "function" && child.type.isTableHeader === true;
 };
-var getHeaders = (children) => children.filter(isHeaderChild);
-function Table({ borderless = false, panel = true, className = "", wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, tableProps }) {
-	const ChildrenArr = React.Children.toArray(children);
-	const Headers = getHeaders(ChildrenArr);
-	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
-	return /* @__PURE__ */ jsx("div", {
-		"aria-busy": isLoading,
-		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
-		children: isLoading ? /* @__PURE__ */ jsx("div", {
-			className: "flex justify-center items-center h-32",
-			children: /* @__PURE__ */ jsx(Loader, {})
-		}) : /* @__PURE__ */ jsx("div", {
-			className: cx("align-middle inline-block min-w-full overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
-			children: /* @__PURE__ */ jsxs("table", {
-				className: cx(className, "min-w-full divide-y theme-border"),
-				...tableProps,
-				children: [/* @__PURE__ */ jsx("thead", {
-					className: theadClassName,
-					children: /* @__PURE__ */ jsx("tr", { children: Headers })
-				}), /* @__PURE__ */ jsx("tbody", {
-					className: tbodyClassName,
-					children: ChildrenArr.filter((c) => !isHeaderChild(c))
-				})]
-			})
-		})
-	});
-}
-function CompactTable({ wrapperClassName = "", className = "", tbodyClassName = "divide-y", children, roundedTop = false, rounded = false, roundedBottom = false }) {
-	const ChildrenArr = React.Children.toArray(children);
-	const Headers = getHeaders(ChildrenArr);
+/** Rows of values under a row of column titles. Put `Table.Header`s first among
+*  the children, then `<tr>`s of `Table.Item`s. */
+function Table({ density = "comfortable", borderless = false, panel = true, className, wrapperClassName = "", tbodyClassName = "divide-y", theadClassName = "theme-muted-panel", children, roundedTop = false, rounded = false, roundedBottom = false, isLoading = false, stickyHeader = false, tableProps }) {
+	const childList = React.Children.toArray(children);
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
-	return /* @__PURE__ */ jsx("div", {
-		className: cx("flex flex-col w-full", !hasOverflow && "overflow-hidden", wrapperClassName),
+	return /* @__PURE__ */ jsx(DensityContext, {
+		value: density,
 		children: /* @__PURE__ */ jsx("div", {
-			className: cx("theme-panel inline-block min-w-full align-middle overflow-x-auto", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl pb-1", roundedTop && "rounded-t-2xl"),
-			children: /* @__PURE__ */ jsxs("table", {
-				className: cx("min-w-full divide-y theme-border", className),
-				children: [/* @__PURE__ */ jsx("thead", {
-					className: "theme-muted-panel",
-					children: /* @__PURE__ */ jsx("tr", {
-						className: "divide-x",
-						children: Headers
-					})
-				}), /* @__PURE__ */ jsx("tbody", {
-					className: tbodyClassName,
-					children: ChildrenArr.filter((c) => !isHeaderChild(c))
-				})]
+			"aria-busy": isLoading,
+			className: cx("flex w-full flex-col", !hasOverflow && !stickyHeader && "overflow-hidden", wrapperClassName),
+			children: isLoading ? /* @__PURE__ */ jsx("div", {
+				className: "flex h-32 items-center justify-center",
+				children: /* @__PURE__ */ jsx(Loader, {})
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cx("inline-block min-w-full align-middle", !stickyHeader && "overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
+				children: /* @__PURE__ */ jsxs("table", {
+					className: cx("min-w-full divide-y theme-border", className),
+					...tableProps,
+					children: [/* @__PURE__ */ jsx("thead", {
+						className: cx(stickyHeader && "sticky top-(--table-header-top,0px) z-(--layer-sticky) border-b-0 shadow-[inset_0_-1px_0_var(--theme-border)]", theadClassName),
+						children: /* @__PURE__ */ jsx("tr", { children: childList.filter(isHeaderChild) })
+					}), /* @__PURE__ */ jsx("tbody", {
+						className: tbodyClassName,
+						children: childList.filter((c) => !isHeaderChild(c))
+					})]
+				})
 			})
 		})
 	});
 }
 Table.Header = Header;
 Table.Item = Item;
-CompactTable.Header = Header;
-CompactTable.Item = CompactItem;
 //#endregion
-export { CompactTable, Table };
+export { Table };

package/dist/components/Tabs.d.ts

@@ -11,10 +11,6 @@ export interface TabItem<Value extends string = string> {
     disabled?: boolean;
     testId?: string;
 }
-declare const stickyClasses: {
-    underHeader: string;
-    underToolbar: string;
-};
 export interface TabsProps<Value extends string> extends SegmentLayout {
     /** Names the set of tabs for assistive technology. */
     label: string;
@@ -29,8 +25,9 @@ export interface TabsProps<Value extends string> extends SegmentLayout {
     variant?: 'line' | 'segmented' | undefined;
     /** At the tab row's far end, such as a picker for what the tabs show. */
     end?: ReactNode;
-    /** Pins the tab row as the page scrolls. */
-    sticky?: keyof typeof stickyClasses | undefined;
+    /** Pins the tab row to the top of the page's scroller as it scrolls; give it a
+     *  `top-*` in `className` to pin it under something else pinned there. */
+    sticky?: boolean | undefined;
     /** On the tab row. */
     className?: string | undefined;
     testId?: string | undefined;
@@ -49,4 +46,3 @@ export declare function TabPanel({ value, keepMounted, className, children, }: {
     className?: string | undefined;
     children: ReactNode;
 }): import("react").JSX.Element;
-export {};

package/dist/components/Tabs.js

@@ -1,20 +1,16 @@
 import { cx } from "../cx.js";
 import { Tooltip } from "./Tooltip.js";
-import { useLink } from "./Provider.js";
+import { AppLink } from "./AppLink.js";
 import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Tabs } from "@base-ui/react/tabs";
 //#region src/components/Tabs.tsx
-var stickyClasses = {
-	underHeader: "sticky top-10 z-(--layer-sticky) bg-(--theme-app-bg)",
-	underToolbar: "sticky top-22 z-(--layer-sticky) bg-(--theme-app-bg)"
-};
+var stickyClassName = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
 /** Views of one thing, one shown at a time: panels below the tabs, or pages
 *  the tabs link to. A lone tab would only repeat the page's title, so the row
 *  hides unless there are two or more, or something at its end. */
 function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "line", fill = false, iconOnly = false, end, sticky, className, testId, children }) {
-	const Link = useLink();
 	const segmented = variant === "segmented";
 	const layout = {
 		fill,
@@ -30,9 +26,9 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 			"data-testid": item.testId,
 			...item.href ? {
 				nativeButton: false,
-				render: /* @__PURE__ */ jsx(Link, { href: item.href })
+				render: /* @__PURE__ */ jsx(AppLink, { href: item.href })
 			} : {},
-			className: segmented ? segmentClassName(item.value === current, layout) : "flex cursor-pointer select-none items-center gap-1.5 whitespace-nowrap px-2 py-2 text-sm font-semibold theme-muted-text outline-none transition-colors hover:theme-text focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-link) data-active:text-(--theme-link) data-disabled:cursor-not-allowed data-disabled:opacity-50",
+			className: segmented ? segmentClassName(item.value === current, layout) : "flex cursor-pointer select-none items-center gap-1.5 whitespace-nowrap px-2 py-2 text-sm font-semibold theme-muted-text transition-colors hover:theme-text focus-visible:rounded-sm focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--theme-focus) data-active:text-(--theme-link) data-disabled:cursor-not-allowed data-disabled:opacity-50",
 			children: /* @__PURE__ */ jsx(SegmentContent, {
 				...item,
 				iconOnly: layout.iconOnly
@@ -54,7 +50,7 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 		"data-testid": testId,
 		className: children ? void 0 : "contents",
 		children: [showRow && /* @__PURE__ */ jsxs("div", {
-			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && stickyClasses[sticky], className),
+			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && stickyClassName, className),
 			children: [/* @__PURE__ */ jsxs(Tabs.List, {
 				"aria-label": label,
 				className: cx(segmented ? segmentGroupClassName(layout) : "relative flex min-w-0 overflow-x-auto"),
@@ -68,7 +64,7 @@ function TabPanel({ value, keepMounted, className, children }) {
 	return /* @__PURE__ */ jsx(Tabs.Panel, {
 		value,
 		keepMounted,
-		className: cx("outline-none", className),
+		className: cx("rounded-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-focus)", className),
 		children
 	});
 }

package/dist/components/ThemeEditor.js

@@ -2,12 +2,12 @@ import { cx } from "../cx.js";
 import { useStrings } from "./Provider.js";
 import { useCopy } from "./useCopy.js";
 import { Button } from "./Button.js";
+import { fieldBox } from "./fieldBox.js";
 import { parseColor, toHex } from "../theme/color.js";
 import { CODE_STYLES, DEFAULT_THEME, THEME_PRESETS, modeOf, parseTheme, schemeFor, serializeTheme } from "../theme/model.js";
 import { deriveTheme, generateTheme } from "../theme/derive.js";
 import { prefersWideGamut } from "../theme/index.js";
 import { Field } from "./Field.js";
-import { fieldBox } from "./fieldBox.js";
 import { Textarea } from "./Input.js";
 import { ColorInput } from "./ColorInput.js";
 import { Disclosure } from "./Disclosure.js";
@@ -32,7 +32,8 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 		setOwnMode(next);
 		onModeChange?.(next);
 	};
-	const scheme = schemeFor(value, editing);
+	const scheme = useMemo(() => schemeFor(value, editing), [value, editing]);
+	const serialized = useMemo(() => serializeTheme(value), [value]);
 	const seed = scheme.interface;
 	const update = (next) => onChange({
 		...value,
@@ -76,7 +77,7 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 						children: THEME_PRESETS.map((preset) => {
 							const native = preset.theme[editing] ? editing : preset.theme.light ? "light" : "dark";
 							const own = schemeFor(preset.theme, native).interface;
-							const current = serializeTheme(preset.theme) === serializeTheme(value);
+							const current = presetKey(preset.theme) === serialized;
 							return /* @__PURE__ */ jsxs(Button, {
 								size: "sm",
 								variant: current ? "primary" : "secondary",
@@ -201,12 +202,21 @@ function ThemeEditor({ value, onChange, mode, onModeChange, preference, onPrefer
 		})]
 	});
 }
+var presetKeys = /* @__PURE__ */ new WeakMap();
+var presetKey = (theme) => {
+	let key = presetKeys.get(theme);
+	if (key === void 0) {
+		key = serializeTheme(theme);
+		presetKeys.set(theme, key);
+	}
+	return key;
+};
 function Swatch({ colors }) {
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		className: "flex -space-x-1",
 		children: colors.map((c, i) => /* @__PURE__ */ jsx("span", {
-			className: "size-3 rounded-full border border-black/10",
+			className: "size-3 rounded-full border border-(--theme-border-strong)",
 			style: { backgroundColor: toHex(parseColor(c) ?? {
 				l: 0,
 				c: 0,
@@ -280,7 +290,7 @@ var CODE_SAMPLE = [
 /** The theme on a small page: a sidebar, a panel of text, a control, statuses and code. */
 function ThemePreview({ theme, mode }) {
 	const { theme: t } = useStrings();
-	const scheme = schemeFor(theme, mode);
+	const scheme = useMemo(() => schemeFor(theme, mode), [theme, mode]);
 	const style = useMemo(() => {
 		const generated = generateTheme(scheme, theme.code ? { code: theme.code } : {});
 		return {
@@ -294,7 +304,7 @@ function ThemePreview({ theme, mode }) {
 		"data-testid": "theme-preview",
 		style,
 		className: "flex min-h-80 overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-sm text-(--theme-app) shadow-(--theme-shadow)",
-		children: [/* @__PURE__ */ jsx("nav", {
+		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex w-32 shrink-0 flex-col gap-0.5 bg-(--theme-sidebar-bg) p-2",
 			children: t.previewNav.map((item, i) => /* @__PURE__ */ jsx("span", {
 				className: cx("rounded-md px-2 py-1.5", i === 1 ? "bg-(--theme-sidebar-active-bg) font-medium text-(--theme-sidebar-active-text)" : "text-(--theme-sidebar-text)"),
@@ -306,7 +316,7 @@ function ThemePreview({ theme, mode }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-2 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) p-3 shadow-(--theme-shadow-sm)",
 					children: [
-						/* @__PURE__ */ jsx("h3", {
+						/* @__PURE__ */ jsx("p", {
 							className: "font-semibold",
 							children: t.previewHeading
 						}),
@@ -337,7 +347,7 @@ function ThemePreview({ theme, mode }) {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2",
 					children: [/* @__PURE__ */ jsx("span", {
-						className: cx(fieldBox({ size: "sm" }), "flex-1 cursor-default text-(--theme-placeholder) border-(--theme-border-strong)"),
+						className: cx(fieldBox({ size: "sm" }), "flex flex-1 cursor-default items-center text-(--theme-placeholder) border-(--theme-border-strong)"),
 						children: t.previewSearch
 					}), /* @__PURE__ */ jsx("span", {
 						className: "rounded-md bg-(--theme-accent) px-3 py-1.5 text-xs font-medium text-(--theme-accent-text)",

package/dist/components/Toast.d.ts

@@ -1,10 +1,18 @@
 import { type ReactNode } from 'react';
+import { type LinkTarget } from './AppLink.js';
 export type ToastTone = 'info' | 'success' | 'warning' | 'error';
-export interface ToastAction {
+/** Runs `onClick`, or with `href` is a link, such as to what the toast reports
+ *  on; either way the toast then closes. */
+export type ToastAction = {
     label: ReactNode;
-    /** Runs, then the toast closes. */
     onClick: () => void;
-}
+    href?: undefined;
+} | ({
+    label: ReactNode;
+    onClick?: undefined;
+} & LinkTarget & {
+    href: string;
+});
 export interface ToastOptions {
     /** Shows the toast in place of an open one with this id, rather than stacking another. */
     id?: string | undefined;