@parallelworks/ui 0.57.0 → 0.59.0

package/dist/components/Field.js

@@ -37,12 +37,14 @@ var labelSizes = {
 	sm: {
 		text: "text-xs text-(--theme-muted-text-color)",
 		inlineHeight: "min-h-7",
-		stackGap: "gap-1"
+		stackGap: "gap-1",
+		inlineLine: "py-1.5"
 	},
 	md: {
 		text: "text-sm text-(--theme-app)",
 		inlineHeight: "min-h-9",
-		stackGap: "gap-1.5"
+		stackGap: "gap-1.5",
+		inlineLine: "py-2"
 	}
 };
 var labelClassName = "flex items-center gap-1 font-medium";
@@ -64,7 +66,7 @@ function ErrorText({ id, children }) {
 }
 /** A control with its label, help and error, tied to it for assistive technology. One frame
 *  for every field, in a form or standing alone. */
-function Field$1({ label, hint, help, actions, description, error, invalid, required = false, disabled = false, layout = "stacked", compact = false, size = "md", group = false, id: ownId, className, children }) {
+function Field$1({ label, hint, help, actions, description, error, invalid, required = false, disabled = false, layout = "stacked", compact = false, size = "md", group = false, controlFirst = false, id: ownId, className, children }) {
 	const uid = useId();
 	const id = ownId ?? `${uid}control`;
 	const labelId = `${uid}label`;
@@ -125,8 +127,8 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		}
 	} : {};
 	const labelBox = cx(labelClassName, labelSize.text, inline && cx(labelSize.inlineHeight, "shrink-0", compact ? "mr-2 w-fit" : "w-52 pr-3"), inRow && "row-start-1 self-end");
-	const labelContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsxs("span", { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] }),
+	const nameContent = /* @__PURE__ */ jsxs(Fragment, { children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})] });
+	const labelExtras = /* @__PURE__ */ jsxs(Fragment, { children: [
 		helpTip,
 		hint,
 		actions && /* @__PURE__ */ jsx("span", {
@@ -135,42 +137,83 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		})
 	] });
 	const placed = typeof children === "function" ? children(control) : children;
+	const controlInContext = /* @__PURE__ */ jsx(FieldRowContext, {
+		value: false,
+		children: /* @__PURE__ */ jsx(ControlContext, {
+			value: controlContext,
+			children: placed
+		})
+	});
+	const messages = /* @__PURE__ */ jsxs(Fragment, { children: [
+		description && /* @__PURE__ */ jsx(Field.Description, {
+			id: descriptionId,
+			className: "text-xs leading-relaxed text-(--theme-muted-text-color)",
+			children: description
+		}),
+		help && /* @__PURE__ */ jsx(Field.Description, {
+			id: helpId,
+			hidden: true,
+			children: formatInfoTipContent(help)
+		}),
+		error && /* @__PURE__ */ jsxs(Field.Error, {
+			id: errorId,
+			match: true,
+			role: "alert",
+			className: errorTextClassName,
+			children: [/* @__PURE__ */ jsx(WarningIcon, {
+				"aria-hidden": "true",
+				className: "size-3.5 shrink-0"
+			}), error]
+		})
+	] });
+	const fieldLabel = (className) => /* @__PURE__ */ jsx(Field.Label, {
+		...labelledBy > 0 ? {
+			htmlFor: void 0,
+			onClick: () => document.getElementById(id)?.focus()
+		} : typeof children === "function" || ownId !== void 0 ? { htmlFor: id } : {},
+		id: labelId,
+		className,
+		"data-field-label": true,
+		children: nameContent
+	});
+	if (controlFirst && !group) {
+		const lined = inline || inRow;
+		return /* @__PURE__ */ jsxs(Field.Root, {
+			invalid: isInvalid,
+			disabled,
+			className: inRow ? cx("contents", className) : cx("flex w-full items-start", className),
+			"data-field-row": inRow || void 0,
+			children: [inline && !compact && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "w-52 shrink-0"
+			}), /* @__PURE__ */ jsxs("div", {
+				ref: help ? setControlBox : void 0,
+				className: cx("flex w-fit max-w-full min-w-0 items-start gap-2", lined && labelSize.inlineLine, inRow && "row-start-2"),
+				children: [/* @__PURE__ */ jsx("div", {
+					className: cx("flex h-lh shrink-0 items-center", labelSize.text),
+					...helpFocus,
+					children: controlInContext
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-col gap-1",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: cx("font-medium", labelSize.text, disabled && "opacity-60"),
+						children: [fieldLabel(disabled ? "cursor-not-allowed" : "cursor-pointer"), (help || hint || actions) && /* @__PURE__ */ jsx("span", {
+							className: "ms-1 inline-flex items-center gap-1 align-[-0.125em]",
+							children: labelExtras
+						})]
+					}), messages]
+				})]
+			})]
+		});
+	}
 	const body = /* @__PURE__ */ jsxs("div", {
 		ref: help ? setControlBox : void 0,
 		className: cx("flex w-full min-w-0 flex-col gap-1", inRow && "row-start-2"),
 		...helpFocus,
-		children: [
-			/* @__PURE__ */ jsx(FieldRowContext, {
-				value: false,
-				children: /* @__PURE__ */ jsx(ControlContext, {
-					value: controlContext,
-					children: inline ? /* @__PURE__ */ jsx("div", {
-						className: cx("grid items-center", labelSize.inlineHeight),
-						children: placed
-					}) : placed
-				})
-			}),
-			description && /* @__PURE__ */ jsx(Field.Description, {
-				id: descriptionId,
-				className: "text-xs leading-relaxed text-(--theme-muted-text-color)",
-				children: description
-			}),
-			help && /* @__PURE__ */ jsx(Field.Description, {
-				id: helpId,
-				hidden: true,
-				children: formatInfoTipContent(help)
-			}),
-			error && /* @__PURE__ */ jsxs(Field.Error, {
-				id: errorId,
-				match: true,
-				role: "alert",
-				className: errorTextClassName,
-				children: [/* @__PURE__ */ jsx(WarningIcon, {
-					"aria-hidden": "true",
-					className: "size-3.5 shrink-0"
-				}), error]
-			})
-		]
+		children: [inline ? /* @__PURE__ */ jsx("div", {
+			className: cx("grid items-center", labelSize.inlineHeight),
+			children: controlInContext
+		}) : controlInContext, messages]
 	});
 	const frame = inRow ? cx("contents", className) : cx("flex w-full", inline ? "items-start" : cx("flex-col", labelSize.stackGap), className);
 	if (group) return /* @__PURE__ */ jsx(Field.Root, {
@@ -182,10 +225,10 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		}),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: frame,
-			children: [/* @__PURE__ */ jsx(Fieldset.Legend, {
+			children: [/* @__PURE__ */ jsxs(Fieldset.Legend, {
 				id: labelId,
 				className: labelBox,
-				children: labelContent
+				children: [/* @__PURE__ */ jsx("span", { children: nameContent }), labelExtras]
 			}), body]
 		})
 	});
@@ -196,23 +239,7 @@ function Field$1({ label, hint, help, actions, description, error, invalid, requ
 		"data-field-row": inRow || void 0,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: labelBox,
-			children: [
-				/* @__PURE__ */ jsxs(Field.Label, {
-					...labelledBy > 0 ? {
-						htmlFor: void 0,
-						onClick: () => document.getElementById(id)?.focus()
-					} : typeof children === "function" || ownId !== void 0 ? { htmlFor: id } : {},
-					id: labelId,
-					"data-field-label": true,
-					children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
-				}),
-				helpTip,
-				hint,
-				actions && /* @__PURE__ */ jsx("span", {
-					className: actionsClassName,
-					children: actions
-				})
-			]
+			children: [fieldLabel(), labelExtras]
 		}), body]
 	});
 }

package/dist/components/HoverCard.js

@@ -3,6 +3,17 @@ import { useFullscreenContainer } from "./fullscreen.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { PreviewCard } from "@base-ui/react/preview-card";
 //#region src/components/HoverCard.tsx
+var stop = (event) => event.stopPropagation();
+var pressHandlers = {
+	onClick: stop,
+	onAuxClick: stop,
+	onDoubleClick: stop,
+	onContextMenu: stop,
+	onPointerDown: stop,
+	onPointerUp: stop,
+	onMouseDown: stop,
+	onMouseUp: stop
+};
 /** Detail about its anchor, such as a person's profile, after a short hover or
 *  on focus. A visual enhancement: whatever the card shows must also be
 *  reachable another way, such as the page the anchor links to. The card
@@ -25,6 +36,7 @@ function HoverCard({ card, children, defaultOpen = false }) {
 				className: positionerClassName,
 				children: /* @__PURE__ */ jsx(PreviewCard.Popup, {
 					className: cardClassName,
+					...pressHandlers,
 					children: card
 				})
 			})

package/dist/components/Markdown.d.ts

@@ -7,6 +7,9 @@ export interface MarkdownProps {
     controls?: ControlsConfig;
     /** Per-tag overrides of the rendered elements. */
     components?: Components;
+    httpsImagesOnly?: boolean;
+    /** Sets it at the page's text size, for Markdown inside other UI rather than a document of its own. */
+    compact?: boolean;
 }
 /** Markdown, with highlighted code, math and mermaid diagrams. Links leave in a
  *  new tab, and inline code breaks after path separators. */

package/dist/components/Markdown.js

@@ -1,3 +1,4 @@
+import { cx } from "../cx.js";
 import { jsx } from "react/jsx-runtime";
 import { Suspense, lazy } from "react";
 //#region src/components/Markdown.tsx
@@ -7,7 +8,7 @@ var MarkdownImpl = lazy(() => import("./MarkdownImpl.js"));
 function Markdown(props) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx("div", {
-			className: "markdown whitespace-pre-wrap text-start w-full",
+			className: cx("markdown whitespace-pre-wrap text-start w-full", props.compact && "markdown-compact"),
 			children: props.children
 		}),
 		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })

package/dist/components/MarkdownImpl.d.ts

@@ -1,3 +1,3 @@
 import 'katex/dist/katex.min.css';
 import type { MarkdownProps } from './Markdown.js';
-export default function MarkdownImpl({ children, isStreaming, controls, components, }: MarkdownProps): import("react").JSX.Element;
+export default function MarkdownImpl({ children, isStreaming, controls, components, httpsImagesOnly, compact, }: MarkdownProps): import("react").JSX.Element;

package/dist/components/MarkdownImpl.js

@@ -2,6 +2,7 @@ import { cx } from "../cx.js";
 import { ExternalLink } from "./ExternalLink.js";
 import { readIsDark } from "./useCssIsDark.js";
 import { CODE_THEMES } from "./codeTheme.js";
+import { rehypeHttpsImagesOnly } from "./httpsImages.js";
 import { rehypeCodeBreaks } from "./markdownCodeBreaks.js";
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
@@ -33,7 +34,8 @@ function loadMermaid() {
 	return mermaidLoad;
 }
 var rehypePlugins = [...Object.values(defaultRehypePlugins), rehypeCodeBreaks];
-function MarkdownImpl({ children, isStreaming, controls, components }) {
+var httpsImagesRehypePlugins = [...Object.entries(defaultRehypePlugins).flatMap(([name, plugin]) => name === "harden" ? [rehypeHttpsImagesOnly, plugin] : [plugin]), rehypeCodeBreaks];
+function MarkdownImpl({ children, isStreaming, controls, components, httpsImagesOnly, compact }) {
 	const needsMermaid = !!children && children.includes("```mermaid");
 	const [, setMermaidReady] = useState(() => !!pluginsWithMermaid);
 	useEffect(() => {
@@ -48,7 +50,7 @@ function MarkdownImpl({ children, isStreaming, controls, components }) {
 	}, [needsMermaid]);
 	const plugins = needsMermaid && pluginsWithMermaid ? pluginsWithMermaid : basePlugins;
 	return /* @__PURE__ */ jsx("div", {
-		className: "markdown whitespace-normal text-start w-full",
+		className: cx("markdown whitespace-normal text-start w-full", compact && "markdown-compact"),
 		children: /* @__PURE__ */ jsx(Streamdown, {
 			mode: isStreaming ? "streaming" : "static",
 			isAnimating: isStreaming ?? false,
@@ -58,7 +60,7 @@ function MarkdownImpl({ children, isStreaming, controls, components }) {
 			} : {},
 			...controls ? { controls } : {},
 			plugins,
-			rehypePlugins,
+			rehypePlugins: httpsImagesOnly ? httpsImagesRehypePlugins : rehypePlugins,
 			shikiTheme: CODE_THEMES,
 			components: {
 				a: ({ node, ...props }) => /* @__PURE__ */ jsx(ExternalLink, {

package/dist/components/Provider.d.ts

@@ -227,6 +227,14 @@ export interface UIStrings {
         loadingLogs: string;
         noLogFound: string;
         logLoadFailed: string;
+        loadingSummary: string;
+        hasSummary: string;
+        stepOf: (position: number, count: number) => string;
+        summaryLoadFailed: string;
+        summaryTab: string;
+        logsTab: string;
+        scriptTab: string;
+        openSubworkflow: string;
         statusLabel: (status: string) => string;
         statusReason: (reason: string | undefined | null) => string | undefined;
         /** A run's general log, beside its summary. */
@@ -277,6 +285,8 @@ export interface UIStrings {
             openFolder: string;
             /** A path's page in the app, as in "Copy link". */
             link: string;
+            /** An object's key within its storage, as in "Copy path". */
+            path: string;
             detailsTab: string;
             previewTab: string;
             preview: string;
@@ -734,7 +744,12 @@ export interface UIProviderProps {
     /** The engine, or a loader that resolves to it. A loader is called once, the first one
      *  passed, so it may be written inline. */
     engine?: WorkflowEngineSource | undefined;
+    /** The nonce the page's Content Security Policy allows inline scripts by,
+     *  for a host that renders on the server: a few components emit a script
+     *  that places them before hydration. The components render no inline
+     *  `<style>`, so a policy without 'unsafe-inline' styles needs none. */
+    nonce?: string | undefined;
     children: React.ReactNode;
 }
-export declare function UIProvider({ strings, navigation, data, slots, engine: engineProp, children, }: UIProviderProps): import("react").JSX.Element;
+export declare function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonce, children, }: UIProviderProps): import("react").JSX.Element;
 export {};

package/dist/components/Provider.js

@@ -4,6 +4,7 @@ import { Toaster } from "./Toast.js";
 import { TooltipProvider } from "./Tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { CSPProvider } from "@base-ui/react/csp-provider";
 import { dequal } from "dequal";
 //#region src/components/Provider.tsx
 var isGroup = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
@@ -236,6 +237,14 @@ var DEFAULTS = {
 			loadingLogs: "Loading logs",
 			noLogFound: "No log found",
 			logLoadFailed: "Log could not be loaded",
+			loadingSummary: "Loading summary",
+			hasSummary: "Has a summary",
+			stepOf: (position, count) => `Step ${position} of ${count}`,
+			summaryLoadFailed: "Summary could not be loaded",
+			summaryTab: "Summary",
+			logsTab: "Logs",
+			scriptTab: "Script",
+			openSubworkflow: "Open Subworkflow",
 			statusLabel: (status) => status,
 			statusReason: () => void 0,
 			generalLog: "General log",
@@ -289,6 +298,7 @@ var DEFAULTS = {
 				viewDetails: "View details",
 				openFolder: "Open folder",
 				link: "link",
+				path: "path",
 				detailsTab: "Details",
 				previewTab: "Preview",
 				preview: "Preview",
@@ -685,7 +695,7 @@ function useMerged(compute, input) {
 	};
 	return ref.current.value;
 }
-function UIProvider({ strings, navigation, data, slots, engine: engineProp, children }) {
+function UIProvider({ strings, navigation, data, slots, engine: engineProp, nonce, children }) {
 	const [firstLoader] = useState(() => typeof engineProp === "function" ? engineProp : void 0);
 	const engine = typeof engineProp === "function" ? firstLoader ?? engineProp : engineProp;
 	useEffect(() => {
@@ -712,9 +722,13 @@ function UIProvider({ strings, navigation, data, slots, engine: engineProp, chil
 				value: mergedData,
 				children: /* @__PURE__ */ jsx(SlotsContext, {
 					value: stableSlots,
-					children: /* @__PURE__ */ jsxs(EngineContext, {
+					children: /* @__PURE__ */ jsx(EngineContext, {
 						value: engine,
-						children: [/* @__PURE__ */ jsx(TooltipProvider, { children }), /* @__PURE__ */ jsx(Toaster, {})]
+						children: /* @__PURE__ */ jsxs(CSPProvider, {
+							nonce,
+							disableStyleElements: true,
+							children: [/* @__PURE__ */ jsx(TooltipProvider, { children }), /* @__PURE__ */ jsx(Toaster, {})]
+						})
 					})
 				})
 			})

package/dist/components/StickyBar.d.ts

@@ -0,0 +1,14 @@
+import { type ReactNode } from 'react';
+export interface StickyBarProps {
+    /** Padding, borders and layout; the bar sets its own position, `top`,
+     *  layer and background. */
+    className?: string | undefined;
+    testId?: string | undefined;
+    children?: ReactNode;
+}
+/** A strip of a page's own controls, such as a row of filters or a page's
+ *  actions, pinned as the page scrolls. It stops just below whatever its
+ *  scroller already pins at the top, such as the page header, and moves with
+ *  it as that wraps or changes height. For an `ActionToolbar` or `Tabs` alone,
+ *  give them `sticky` instead. */
+export declare function StickyBar({ className, testId, children }: StickyBarProps): import("react").JSX.Element;

package/dist/components/StickyBar.js

@@ -0,0 +1,22 @@
+import { cx } from "../cx.js";
+import { stickyClasses, useStickyTop } from "./stickyTop.js";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/components/StickyBar.tsx
+/** A strip of a page's own controls, such as a row of filters or a page's
+*  actions, pinned as the page scrolls. It stops just below whatever its
+*  scroller already pins at the top, such as the page header, and moves with
+*  it as that wraps or changes height. For an `ActionToolbar` or `Tabs` alone,
+*  give them `sticky` instead. */
+function StickyBar({ className, testId, children }) {
+	const [el, setEl] = useState(null);
+	useStickyTop(el, true);
+	return /* @__PURE__ */ jsx("div", {
+		ref: setEl,
+		"data-testid": testId,
+		className: cx(stickyClasses, className),
+		children
+	});
+}
+//#endregion
+export { StickyBar };

package/dist/components/Table.d.ts

@@ -37,11 +37,13 @@ interface TableProps {
     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. */
+     *  to the nearest scrolling ancestor, just below whatever that ancestor
+     *  already pins at its top, such as a page header, a toolbar or tabs, which
+     *  it finds and follows by itself; in a box that scrolls on its own it pins
+     *  at the box's top. 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

package/dist/components/Table.js

@@ -1,8 +1,9 @@
 import { cx } from "../cx.js";
 import { SortDownIcon, SortUnsortedIcon, SortUpIcon } from "../icons.js";
 import { Loader } from "./Loader.js";
+import { useStickyTop } from "./stickyTop.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext } from "react";
+import React, { createContext, useContext, useState } from "react";
 //#region src/components/Table.tsx
 var DensityContext = createContext("comfortable");
 var cellX = "px-3";
@@ -47,6 +48,8 @@ var isHeaderChild = (child) => {
 *  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 [thead, setThead] = useState(null);
+	useStickyTop(thead, stickyHeader && !isLoading);
 	const hasOverflow = wrapperClassName.split(" ").some((cls) => cls.startsWith("overflow-"));
 	return /* @__PURE__ */ jsx(DensityContext, {
 		value: density,
@@ -62,7 +65,8 @@ function Table({ density = "comfortable", borderless = false, panel = true, clas
 					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),
+						ref: setThead,
+						className: cx(stickyHeader && "sticky top-0 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,

package/dist/components/Tabs.d.ts

@@ -25,8 +25,8 @@ 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 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. */
+    /** Pins the tab row as the page scrolls, just below whatever the page's
+     *  scroller already pins at the top, such as the page header and a toolbar. */
     sticky?: boolean | undefined;
     /** On the tab row. */
     className?: string | undefined;

package/dist/components/Tabs.js

@@ -2,11 +2,11 @@ import { cx } from "../cx.js";
 import { Tooltip } from "./Tooltip.js";
 import { AppLink } from "./AppLink.js";
 import { SegmentContent, segmentClassName, segmentGroupClassName } from "./segmented.js";
+import { useStickyTop } from "./stickyTop.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 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. */
@@ -19,6 +19,8 @@ function Tabs$1({ label, items, value, defaultValue, onValueChange, variant = "l
 	const [own, setOwn] = useState(defaultValue ?? items[0]?.value);
 	const current = value ?? own;
 	const showRow = items.length > 1 || !!end;
+	const [row, setRow] = useState(null);
+	useStickyTop(row, !!sticky);
 	const tabs = items.map((item) => {
 		const tab = /* @__PURE__ */ jsx(Tabs.Tab, {
 			value: item.value,
@@ -50,7 +52,8 @@ 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 && stickyClassName, className),
+			ref: setRow,
+			className: cx("flex items-center justify-between gap-2", !segmented && "border-b border-(--theme-border)", sticky && "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)", className),
 			children: [/* @__PURE__ */ jsxs(Tabs.List, {
 				"aria-label": label,
 				className: cx(segmented ? segmentGroupClassName(layout) : "relative flex min-w-0 overflow-x-auto"),

package/dist/components/category.d.ts

@@ -0,0 +1,9 @@
+/** The fill and text of each palette entry, written out so the stylesheet build sees them. */
+export declare const CATEGORY_CLASSES: readonly ['bg-(--theme-category-1) text-(--theme-category-1-text)', 'bg-(--theme-category-2) text-(--theme-category-2-text)', 'bg-(--theme-category-3) text-(--theme-category-3-text)', 'bg-(--theme-category-4) text-(--theme-category-4-text)', 'bg-(--theme-category-5) text-(--theme-category-5-text)', 'bg-(--theme-category-6) text-(--theme-category-6-text)', 'bg-(--theme-category-7) text-(--theme-category-7-text)', 'bg-(--theme-category-8) text-(--theme-category-8-text)'];
+/** 32-bit FNV-1a over a string's UTF-8 bytes: cheap, well spread, and the same in any language. */
+export declare function fnv1a(text: string): number;
+/** The palette entry, 1–8, for a key. Case, surrounding space and Unicode composition don't
+ *  change it, so "Ada Lovelace" and " ada lovelace" match. */
+export declare function categoryOf(key: string): number;
+/** The fill and text classes for a key. */
+export declare function categoryClasses(key: string): string;

package/dist/components/category.js

@@ -0,0 +1,30 @@
+//#region src/components/category.ts
+/** The fill and text of each palette entry, written out so the stylesheet build sees them. */
+var CATEGORY_CLASSES = [
+	"bg-(--theme-category-1) text-(--theme-category-1-text)",
+	"bg-(--theme-category-2) text-(--theme-category-2-text)",
+	"bg-(--theme-category-3) text-(--theme-category-3-text)",
+	"bg-(--theme-category-4) text-(--theme-category-4-text)",
+	"bg-(--theme-category-5) text-(--theme-category-5-text)",
+	"bg-(--theme-category-6) text-(--theme-category-6-text)",
+	"bg-(--theme-category-7) text-(--theme-category-7-text)",
+	"bg-(--theme-category-8) text-(--theme-category-8-text)"
+];
+var encoder = new TextEncoder();
+/** 32-bit FNV-1a over a string's UTF-8 bytes: cheap, well spread, and the same in any language. */
+function fnv1a(text) {
+	let hash = 2166136261;
+	for (const byte of encoder.encode(text)) hash = Math.imul(hash ^ byte, 16777619);
+	return hash >>> 0;
+}
+/** The palette entry, 1–8, for a key. Case, surrounding space and Unicode composition don't
+*  change it, so "Ada Lovelace" and " ada lovelace" match. */
+function categoryOf(key) {
+	return fnv1a(key.trim().normalize("NFC").toLowerCase()) % CATEGORY_CLASSES.length + 1;
+}
+/** The fill and text classes for a key. */
+function categoryClasses(key) {
+	return CATEGORY_CLASSES[categoryOf(key) - 1];
+}
+//#endregion
+export { CATEGORY_CLASSES, categoryClasses, categoryOf, fnv1a };

package/dist/components/httpsImages.d.ts

@@ -0,0 +1,12 @@
+interface HastElement {
+    type: 'element';
+    tagName: string;
+    properties?: Record<string, unknown>;
+    children: HastNode[];
+}
+type HastNode = HastElement | {
+    type: string;
+    children?: HastNode[];
+};
+export declare function rehypeHttpsImagesOnly(): (tree: HastNode) => void;
+export {};

package/dist/components/httpsImages.js

@@ -0,0 +1,27 @@
+//#region src/components/httpsImages.ts
+function isHttpsUrl(url) {
+	if (typeof url !== "string") return false;
+	try {
+		return new URL(url).protocol === "https:";
+	} catch {
+		return false;
+	}
+}
+function isHttpsSrcSet(srcSet) {
+	return (Array.isArray(srcSet) ? srcSet : [srcSet]).every((entry) => typeof entry === "string" && entry.split(",").every((candidate) => isHttpsUrl(candidate.trim().split(/\s+/)[0])));
+}
+function walk(node) {
+	if (node.type === "element") {
+		const { tagName, properties } = node;
+		if (properties && tagName === "img" && !isHttpsUrl(properties["src"])) delete properties["src"];
+		if (properties && (tagName === "img" || tagName === "source") && !isHttpsSrcSet(properties["srcSet"])) delete properties["srcSet"];
+	}
+	for (const child of node.children ?? []) walk(child);
+}
+function rehypeHttpsImagesOnly() {
+	return (tree) => {
+		walk(tree);
+	};
+}
+//#endregion
+export { rehypeHttpsImagesOnly };

package/dist/components/stickyTop.d.ts

@@ -0,0 +1,14 @@
+/** Pins a bar to the top of its scroller, over what scrolls under it.
+ *  `useStickyTop` moves it below whatever else is pinned there. */
+export declare const stickyClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
+/**
+ * Pins a `sticky` element just below whatever its scroller already pins at
+ * the top, such as a page header, a toolbar and a tab row, rather than at
+ * `top: 0` behind them. It finds them in the page, so neither they nor the
+ * host declare anything, and it follows them as they change height (a toolbar
+ * wrapping on a narrow screen), move, or come and go, before the browser
+ * paints. Chrome that uses it stacks: each piece pins under the ones before
+ * it, and its own `top` moving is a change the pieces after it follow.
+ * In a box that scrolls on its own, nothing sits above, so it pins at 0.
+ */
+export declare function useStickyTop(el: HTMLElement | null, enabled: boolean): void;