@parallelworks/ui 0.57.0 → 0.58.0

package/README.md

@@ -84,7 +84,7 @@ Each need has one component. Reach for it before styling markup by hand.
 | How full something is, how far a task has come | `Meter`, `ProgressBar` |
 | Pages of a long list | `Pagination` |
 | A grouped page of settings | `SettingsCard` with `SettingRow`s |
-| A person | `Avatar` |
+| A person | `Avatar`, colored by name without a picture |
 | A status in words | `StatusBadge`, or `StatusDot` beside text that says it |
 | A run's, job's or step's status beside its name | `RunStatusIcon`; `StatusBadge` with `runStatusTone` to say it in words |
 | A copy action | `CopyButton`; `CopyCodeBlock` for a command or snippet; `useCopy` for a menu row or a control of your own |
@@ -312,6 +312,16 @@ icon beside an error message may keep the message's text shade through
 from the accent's hue when they come within 30° of it, so a keyword never looks
 like a link.
 
+Eight category colors tell things apart without ranking them:
+`--theme-category-1` to `--theme-category-8` are soft fills at hues 45° apart,
+all at one lightness and chroma so none reads louder, and each
+`--theme-category-N-text` is solved to secondary text's targets on its fill. An
+`Avatar` without a picture takes one, picked by an FNV-1a hash of its name (or
+its `colorKey`), so the same name has the same color on every page; a nameless
+one keeps the accent. `categoryOf(key)` gives the same pick, 1–8, and
+`categoryClasses(key)` its fill and text classes, for anything else drawn
+beside a name, such as a group's icon.
+
 Every color is mapped into sRGB with the CSS Color 4 method, which lowers
 chroma at fixed lightness and hue. It is mapped into display-p3 too: where the
 wider color differs from sRGB by more than one just-noticeable difference
@@ -566,13 +576,20 @@ root:
 | ------------------- | ----------------------------------------------------------------------- |
 | `--app-inset-top`   | The height of a fixed top bar. Drawers and toasts start below it.       |
 | `--app-inset-start` | The width of a fixed sidebar on the start side. Toasts center over the page beside it, and a drawer at its widest leaves that strip, and never less than 2.5rem. Update it when the sidebar collapses. |
-| `--table-header-top` | How far below the top of its scrolling box a table's sticky header row stops (`Table stickyHeader`, which list tables use). Set it on the scrolling box, or an ancestor, when something else sticks at that box's top, such as a page header in a page that scrolls as a whole. Inside `ListPage` the rows scroll in their own box below the header and toolbar, so it stays 0. |
 
 ```ts
 document.documentElement.style.setProperty('--app-inset-top', '56px')
 document.documentElement.style.setProperty('--app-inset-start', '220px')
 ```
 
+A table's sticky header row (`Table stickyHeader`, which list tables use) needs
+no variable. It stops just below whatever its scrolling box already pins at the
+top, such as a page header, a toolbar and tabs: it finds each element there with
+`position: sticky` and a `top` whose parent also holds the table, so it stays
+pinned while the table passes, and follows it as it wraps to a new height or
+comes and goes. In a box that scrolls on its own, such as a fixed-height panel
+or `ListPage`'s rows, it pins at the box's top.
+
 Everything the package lays over the page stacks on one scale, set on the
 document root by `base.css`. Give the host's own fixed elements a place on it,
 such as `z-index: 100` for a top bar, rather than a z-index chosen to win:

package/dist/access/PrincipalPicker.js

@@ -1,6 +1,7 @@
 import { cx } from "../cx.js";
 import { OrganizationIcon, RefreshIcon, UsersIcon } from "../icons.js";
 import { useQueryMatch } from "../components/search.js";
+import { categoryClasses } from "../components/category.js";
 import { Avatar } from "../components/Avatar.js";
 import { Callout } from "../components/Callout.js";
 import { Combobox } from "../components/Combobox.js";
@@ -35,7 +36,7 @@ function PrincipalTile({ principal, compact = false, className }) {
 	const Icon = everyone ? OrganizationIcon : UsersIcon;
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cx("flex size-8 shrink-0 items-center justify-center rounded-md [&_svg]:size-4", compact && "size-6 [&_svg]:size-3.5", everyone ? "bg-(--theme-info-muted) text-(--theme-info-text)" : "bg-(--theme-muted-panel-bg) text-(--theme-muted-text-color)", className),
+		className: cx("flex size-8 shrink-0 items-center justify-center rounded-md [&_svg]:size-4", compact && "size-6 [&_svg]:size-3.5", everyone ? "bg-(--theme-info-muted) text-(--theme-info-text)" : categoryClasses(principal.name), className),
 		children: /* @__PURE__ */ jsx(Icon, {})
 	});
 }

package/dist/ai/ai.css

@@ -182,6 +182,44 @@
 .markdown [data-streamdown="table"] tbody tr:last-child {
   border-bottom: 0;
 }
+/* Markdown set inside other UI, such as a step's summary, reads at the page's
+ * text size, its headings a step above it rather than at a document's sizes. */
+.markdown-compact {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.markdown-compact :is(h1, h2, h3, h4, h5, h6) {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+}
+.markdown-compact :is(h1, h2) {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.markdown-compact [data-streamdown="table-wrapper"] table,
+.markdown-compact [data-streamdown="table"] :is(th, td) {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+/* A summary's tables are mostly a few short columns of counts: they hug their
+ * content so each number sits by its label, and a phone fits them unscrolled. */
+.markdown-compact table[data-streamdown="table"] {
+  width: auto;
+  min-width: min(100%, 20rem);
+}
+.markdown-compact [data-streamdown="table"] :is(th, td) {
+  min-width: 0;
+  padding-inline-end: 2rem;
+  font-variant-numeric: tabular-nums;
+}
+.markdown-compact [data-streamdown="table"] th {
+  font-weight: 500;
+  color: var(--theme-muted-text-color);
+}
+.markdown-compact :not(pre) > code {
+  font-size: 0.8125rem;
+}
 @media (prefers-reduced-motion: reduce) {
   .markdown [data-streamdown="table-wrapper"] > div:first-child {
     transition: none;

package/dist/components/Avatar.d.ts

@@ -4,6 +4,10 @@ export interface AvatarProps {
     /** Image URL. Until it loads, or when it fails, the initials of `name` show. */
     src?: string | null | undefined;
     name?: string | undefined;
+    /** Picks the fallback's color from the theme's categorical palette, so the same key gets the
+     *  same color everywhere. Defaults to `name`; pass a stable id when names can repeat or
+     *  change, or `null` for the accent fill whatever the name. Without either, the accent fills it. */
+    colorKey?: string | null | undefined;
     size?: AvatarSize | undefined;
     status?: AvatarStatus | undefined;
     className?: string | undefined;
@@ -13,4 +17,4 @@ export declare function avatarInitials(name: string | undefined): string;
 /** A person's picture, or their initials while it loads or when it fails. It is
  *  one image to assistive technology, named for the person, whichever shows,
  *  and their presence when it has a status dot. */
-export declare function Avatar({ src, name, size, status, className }: AvatarProps): import("react").JSX.Element;
+export declare function Avatar({ src, name, colorKey, size, status, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar.js

@@ -1,5 +1,6 @@
 import { cx } from "../cx.js";
 import { useStrings } from "./Provider.js";
+import { categoryClasses } from "./category.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/Avatar.tsx
@@ -28,9 +29,10 @@ function avatarInitials(name) {
 /** A person's picture, or their initials while it loads or when it fails. It is
 *  one image to assistive technology, named for the person, whichever shows,
 *  and their presence when it has a status dot. */
-function Avatar$1({ src, name, size = "md", status, className }) {
+function Avatar$1({ src, name, colorKey, size = "md", status, className }) {
 	const { common } = useStrings();
 	const who = name || common.userAvatar;
+	const colorBy = colorKey === void 0 ? name?.trim() : colorKey;
 	return /* @__PURE__ */ jsxs("span", {
 		role: "img",
 		"aria-label": status ? common.withPresence(who, common.presence[status]) : who,
@@ -45,7 +47,7 @@ function Avatar$1({ src, name, size = "md", status, className }) {
 				className: "absolute inset-0 size-full object-cover data-error:hidden data-loading:invisible"
 			}, src), /* @__PURE__ */ jsx(Avatar.Fallback, {
 				"aria-hidden": "true",
-				className: "flex size-full items-center justify-center bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] text-(--theme-accent-text)",
+				className: cx("flex size-full items-center justify-center", colorBy ? categoryClasses(colorBy) : "bg-gradient-to-br from-[var(--gradient-start,var(--theme-accent))] to-[var(--gradient-mid,var(--theme-link))] text-(--theme-accent-text)"),
 				children: size === "xs" ? avatarInitials(name).charAt(0) : avatarInitials(name)
 			})]
 		}), status && /* @__PURE__ */ jsx("span", {

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;

package/dist/components/Provider.js

@@ -236,6 +236,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 +297,7 @@ var DEFAULTS = {
 				viewDetails: "View details",
 				openFolder: "Open folder",
 				link: "link",
+				path: "path",
 				detailsTab: "Details",
 				previewTab: "Preview",
 				preview: "Preview",

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, useRef } 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 = useRef(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: thead,
+						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/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,10 @@
+import { type RefObject } from 'react';
+/**
+ * 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) or come and go, before the browser paints.
+ * In a box that scrolls on its own, nothing sits above, so it pins at 0.
+ */
+export declare function useStickyTop(ref: RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/components/stickyTop.js

@@ -0,0 +1,88 @@
+import { useLayoutEffect } from "react";
+//#region src/components/stickyTop.ts
+var scrolls = (style) => /auto|scroll|hidden|overlay/.test(`${style.overflow} ${style.overflowX} ${style.overflowY}`);
+/** The box a sticky element sticks to: its nearest ancestor that scrolls, or
+*  the document's when none does. */
+function scrollContainer(el) {
+	const root = el.ownerDocument.documentElement;
+	for (let node = el.parentElement; node && node !== root; node = node.parentElement) if (scrolls(getComputedStyle(node))) return node;
+	return root;
+}
+/** Elements laid out as children of `parent`'s box: its children, with those
+*  of a `display: contents` child (such as a tab row's root) in its place. */
+function boxChildren(nodes, into) {
+	for (const node of nodes) {
+		into.push(node);
+		if (getComputedStyle(node).display === "contents") boxChildren(node.children, into);
+	}
+}
+function chromeAbove(el, scroller) {
+	const above = {
+		chrome: [],
+		parents: [],
+		siblings: []
+	};
+	for (let node = el; node !== scroller && node.parentElement;) {
+		const parent = node.parentElement;
+		const earlier = [];
+		for (let sib = node.previousElementSibling; sib; sib = sib.previousElementSibling) earlier.push(sib);
+		const laidOut = [];
+		boxChildren(earlier, laidOut);
+		for (const sib of laidOut) {
+			above.siblings.push(sib);
+			const style = getComputedStyle(sib);
+			if (style.display === "contents") above.parents.push(sib);
+			if (style.position === "sticky" && style.top !== "auto" && sib instanceof HTMLElement) above.chrome.push(sib);
+		}
+		above.parents.push(parent);
+		node = parent;
+	}
+	return above;
+}
+/** Where `chrome`'s bottom edge sits, below the scroller's top, while it's pinned. */
+function pinnedBottom(chrome) {
+	const height = chrome.getBoundingClientRect().height;
+	return height > 0 ? (Number.parseFloat(getComputedStyle(chrome).top) || 0) + height : 0;
+}
+/**
+* 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) or come and go, before the browser paints.
+* In a box that scrolls on its own, nothing sits above, so it pins at 0.
+*/
+function useStickyTop(ref, enabled) {
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!enabled || !el) return;
+		let chrome = [];
+		const place = () => {
+			el.style.top = `${Math.max(0, ...chrome.map(pinnedBottom))}px`;
+		};
+		const resizes = new ResizeObserver(place);
+		const changes = new MutationObserver(gather);
+		function gather() {
+			if (!el) return;
+			const above = chromeAbove(el, scrollContainer(el));
+			chrome = above.chrome;
+			resizes.disconnect();
+			changes.disconnect();
+			for (const node of chrome) resizes.observe(node);
+			for (const parent of above.parents) changes.observe(parent, { childList: true });
+			for (const sib of above.siblings) changes.observe(sib, {
+				attributes: true,
+				attributeFilter: ["class", "style"]
+			});
+			place();
+		}
+		gather();
+		return () => {
+			resizes.disconnect();
+			changes.disconnect();
+			el.style.top = "";
+		};
+	}, [ref, enabled]);
+}
+//#endregion
+export { useStickyTop };

package/dist/file-explorer/FileExplorer.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
 import { buttonClasses } from "../components/buttonClasses.js";
-import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon } from "../icons.js";
+import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, FolderTreeIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon } from "../icons.js";
 import { MenuItem, MenuPopup, MenuSeparator } from "../components/Menu.js";
 import { safeUrl } from "../safeUrl.js";
 import { Loader } from "../components/Loader.js";
@@ -676,24 +676,30 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			...open,
 			onClick: () => handleSelectTreeItem(node.path, node)
 		}];
-		const uriExtras = uris.map((value) => ({
-			label: `${getUriScheme(value).toUpperCase()} URI`,
-			value,
-			icon: /* @__PURE__ */ jsx(LinkIcon, {})
-		}));
-		const pageUrl = absoluteUrl(href);
-		if (pageUrl) uriExtras.unshift({
-			label: t.preview.link,
-			value: pageUrl,
-			icon: /* @__PURE__ */ jsx(LinkIcon, {})
+		const copy = copySubmenu({
+			name: isFile ? node.name : void 0,
+			extra: [
+				{
+					label: t.preview.path,
+					value: node.root ? void 0 : getObjectKeyFromNode(node),
+					icon: /* @__PURE__ */ jsx(FolderTreeIcon, {})
+				},
+				{
+					label: t.preview.link,
+					value: absoluteUrl(href),
+					icon: /* @__PURE__ */ jsx(LinkIcon, {})
+				},
+				...uris.map((value) => ({
+					label: `${getUriScheme(value).toUpperCase()} URI`,
+					value,
+					icon: /* @__PURE__ */ jsx(LinkIcon, {})
+				}))
+			]
 		});
 		return assembleRowMenu({
 			lead,
 			actions,
-			copy: uriExtras.length > 0 ? copySubmenu({
-				name: isFile ? node.name : void 0,
-				extra: uriExtras
-			}) : void 0
+			copy: copy.items.length > 0 ? copy : void 0
 		});
 	};
 	const openNodeContextMenu = (e, node) => {

package/dist/graph/DependencyGraph.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import type { GraphLayout } from '../editing.js';
 import type { DependencyGraphEditor } from './editorApi.js';
 import { type RunLink, type WorkflowJob } from './types.js';
@@ -17,7 +18,7 @@ interface GraphRun {
     executedJobs?: Record<string, unknown> | undefined;
     links?: Record<string, RunLink> | undefined;
 }
-export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, }: {
+export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, sidebarStickyTop, children, }: {
     run: GraphRun;
     preview?: boolean;
     removeBorder?: boolean | undefined;
@@ -30,6 +31,18 @@ export default function DependencyGraph({ run, preview, removeBorder, viewMode,
     /** The workflow as written, for what the editor's expressions can read. */
     workflow?: Record<string, unknown> | undefined;
     fixedHeight?: string | undefined;
+    /** A step to open; `prefix` is its `subworkflows/<job>/step_<n>/` chain when it runs inside a subworkflow. */
+    openStep?: {
+        job: string;
+        step: number;
+        prefix?: string | undefined;
+    } | undefined;
+    /** Called when the log dialog closes, so a host can forget the step it asked to open. */
+    onCloseLog?: (() => void) | undefined;
+    /** Pins the job list this many pixels below the top of the page's scroll area, under the host's own pinned bars. */
+    sidebarStickyTop?: number | undefined;
+    /** Shown under the annotations, above the graph. */
+    children?: ReactNode;
 }): import("react").JSX.Element | undefined;
 export declare function DependencyGraphPreview(inputs: {
     yml?: Record<string, unknown>;