@parallelworks/ui 0.12.1 → 0.14.0

package/dist/chunks/{Tooltip-WgbiC_nd.js → Tooltip-n9w7Tkt1.js}

@@ -4,6 +4,19 @@ import { Fragment as Fragment$1 } from "react";
 import { Tooltip } from "react-tooltip";
 //#region src/components/Tooltip.tsx
 var TOOLTIP_ID = "global-tooltip";
+/** Anchor props that reveal `content` only while the text is ellipsized; `measure` picks the clipped descendant when it isn't the anchor. */
+function truncationTooltipProps(content, measure) {
+	return {
+		role: "none",
+		"data-tooltip-id": TOOLTIP_ID,
+		onMouseEnter: (event) => {
+			const anchor = event.currentTarget;
+			const measured = measure ? measure(anchor) : anchor;
+			if (measured && measured.scrollWidth > measured.clientWidth) anchor.setAttribute("data-tooltip-content", content);
+			else anchor.removeAttribute("data-tooltip-content");
+		}
+	};
+}
 var linkRegex = /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g;
 function formatLine(line) {
 	const nodes = [];
@@ -40,12 +53,14 @@ function KbdShortcut({ keys }) {
 		})] }, `${part}-${idx}`))
 	});
 }
+var globalCloseEvents = { escape: true };
 /** Singleton rendered at layout root; anchors opt in via data-tooltip-id={TOOLTIP_ID}, data-tooltip-content, and data-tooltip-shortcut. */
 function GlobalTooltip() {
 	return /* @__PURE__ */ jsx(Tooltip, {
 		id: TOOLTIP_ID,
 		className: "max-w-lg break-words config-tips normal-case text-left z-[10000]",
 		place: "top",
+		globalCloseEvents,
 		render: ({ content, activeAnchor }) => {
 			const body = formatTooltipContent(content);
 			const shortcut = activeAnchor?.getAttribute("data-tooltip-shortcut");
@@ -58,14 +73,24 @@ function GlobalTooltip() {
 	});
 }
 function TooltipInfo({ text, className = "", children, place = "top", tabIndex }) {
-	return /* @__PURE__ */ jsx("div", {
+	const anchorProps = {
 		"data-tooltip-id": TOOLTIP_ID,
 		"data-tooltip-content": text,
 		"data-tooltip-place": place,
-		className,
+		className
+	};
+	if (children || !text) return /* @__PURE__ */ jsx("div", {
+		...anchorProps,
 		tabIndex,
 		children: children || /* @__PURE__ */ jsx(TooltipIcon, { className: "tooltip" })
 	});
+	return /* @__PURE__ */ jsx("div", {
+		...anchorProps,
+		role: "img",
+		"aria-label": text,
+		tabIndex: tabIndex ?? 0,
+		children: /* @__PURE__ */ jsx(TooltipIcon, { className: "tooltip" })
+	});
 }
 //#endregion
-export { formatTooltipContent as i, TOOLTIP_ID as n, TooltipInfo as r, GlobalTooltip as t };
+export { truncationTooltipProps as a, formatTooltipContent as i, TOOLTIP_ID as n, TooltipInfo as r, GlobalTooltip as t };

package/dist/chunks/{editor-BH81U5-C.js → editor-BZ9Buwi4.js}

@@ -1,15 +1,15 @@
 import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
-import { c as useStrings, i as useNotify } from "./Provider-CfFV-vc5.js";
+import { c as useStrings, i as useNotify } from "./Provider-CbFVFB7O.js";
 import { t as Loader } from "./Loader-BXoXTZGc.js";
 import { t as SwitchToggleSmall } from "./SwitchToggleSmall-FcsaYSTs.js";
-import { c as FieldWrapper, n as flattenGroups, r as impureSetValueFromPath } from "./lib-DTgL8klR.js";
+import { c as FieldWrapper, n as flattenGroups, r as impureSetValueFromPath } from "./lib-DyJvmbzj.js";
 import cx from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useMemo, useRef, useState } from "react";
+import { Suspense, lazy, useId, useMemo, useRef, useState } from "react";
 import { convertToDynamicForm, parseStringsOfObj, parseStringsOfObjReady } from "@parallelworks/workflow-parser";
 import { useField, useFormikContext } from "formik";
 //#region src/editor/Editor.tsx
-var MonacoEditor = lazy(() => import("./Monaco-DCwRDrPm.js"));
+var MonacoEditor = lazy(() => import("./Monaco-H56KyEdb.js"));
 function Editor({ ...props }) {
 	return /* @__PURE__ */ jsx(Suspense, {
 		fallback: /* @__PURE__ */ jsx(Loader, { text: "Loading editor..." }),
@@ -19,7 +19,7 @@ function Editor({ ...props }) {
 //#endregion
 //#region src/editor/EditorField.tsx
 function hasResetKeys(obj) {
-	return obj.editorKeyPostfix !== void 0;
+	return typeof obj === "object" && obj !== null && "editorKeyPostfix" in obj && typeof obj.editorKeyPostfix === "string";
 }
 function EditorField(props) {
 	const { field, label, labelPosition, disabled, onChange, tooltipComponent, spaceCompact, setFormDirty } = props;
@@ -51,9 +51,10 @@ function EditorField(props) {
 		labelPosition,
 		spaceCompact,
 		children: /* @__PURE__ */ jsx(Editor, {
+			ariaLabel: label,
 			height: "200px",
 			path: field.name,
-			value: touchedRef.current ? void 0 : value,
+			...touchedRef.current ? {} : { value },
 			className: cx("bg-(--theme-input-bg) w-11 border focus:border rounded text-[10px] leading-4 pl-[6px]", disabled && "opacity-75"),
 			readOnly: disabled,
 			onChange: handleChange,
@@ -63,53 +64,59 @@ function EditorField(props) {
 }
 //#endregion
 //#region src/editor/FormCodePanel.tsx
+var isObject = (value) => typeof value === "object" && value !== null;
 var shouldIgnoreField = (fieldSchema, inputs, arrayIndex) => {
-	if (!fieldSchema?.ignore || !fieldSchema?.hidden) return false;
+	if (!fieldSchema?.["ignore"] || !fieldSchema?.["hidden"]) return false;
 	if (!parseStringsOfObjReady) return false;
 	return parseStringsOfObj({
 		inputs,
 		obj: convertToDynamicForm(fieldSchema),
 		index: arrayIndex ?? -1
-	}).hidden === true;
+	})["hidden"] === true;
 };
 var filterFields = (formJSON, data, prefix, rootData, arrayIndex) => {
 	const filteredFields = [];
 	return {
 		filteredFields,
 		filtered: Object.keys(data).reduce((acc, key) => {
-			if (data[key] !== null && Array.isArray(data[key])) {
-				acc[key] = [];
-				if (!formJSON[key]) return acc;
-				for (let i = 0; i < data[key].length; i++) {
+			const value = data[key];
+			const fieldSchema = formJSON[key];
+			if (value !== null && Array.isArray(value)) {
+				const items = [];
+				acc[key] = items;
+				if (!fieldSchema) return acc;
+				const nestedSchema = isObject(fieldSchema) ? fieldSchema["options"] : void 0;
+				for (let i = 0; i < value.length; i++) {
 					let filteredFieldsNested = [];
 					let filteredNested = {};
-					if (typeof data[key][i] === "object") {
-						const result = filterFields(formJSON[key].options, data[key][i], key + `[${i}].`, rootData || data, i);
+					const item = value[i];
+					if (isObject(item)) {
+						const result = filterFields(isObject(nestedSchema) ? nestedSchema : {}, item, key + `[${i}].`, rootData || data, i);
 						filteredNested = result.filtered;
 						filteredFieldsNested = result.filteredFields;
-					} else filteredNested = data[key][i];
+					} else filteredNested = item;
 					filteredFields.push(...filteredFieldsNested);
-					acc[key][i] = filteredNested;
+					items[i] = filteredNested;
 				}
 				return acc;
 			}
-			if (data[key] !== null && formJSON && formJSON[key] && typeof data[key] === "object") {
-				const { filteredFields: filteredFieldsNested, filtered: filteredNested } = filterFields(formJSON[key], data[key], key + ".", rootData || data, arrayIndex);
+			if (fieldSchema && isObject(value)) {
+				const { filteredFields: filteredFieldsNested, filtered: filteredNested } = filterFields(isObject(fieldSchema) ? fieldSchema : {}, value, key + ".", rootData || data, arrayIndex);
 				filteredFields.push(...filteredFieldsNested);
 				acc[key] = filteredNested;
 				return acc;
 			}
-			if (formJSON?.[key]?.sensitive) {
+			if (isObject(fieldSchema) && fieldSchema["sensitive"]) {
 				const name = prefix ? prefix + key : key;
 				filteredFields.push({
 					key: name,
-					value: data[key]
+					value
 				});
 				return acc;
 			}
 			const contextData = rootData || data;
-			if (formJSON && shouldIgnoreField(formJSON[key], contextData, arrayIndex)) return acc;
-			acc[key] = data[key];
+			if (isObject(fieldSchema) && shouldIgnoreField(fieldSchema, contextData, arrayIndex)) return acc;
+			acc[key] = value;
 			return acc;
 		}, {})
 	};
@@ -123,6 +130,7 @@ var populateFiltered = (filteredFields, data) => {
 function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = false }) {
 	const notify = useNotify();
 	const { common: t } = useStrings();
+	const uid = useId();
 	const [jsonHasErrors, setJsonHasErrors] = useState(false);
 	const [showHidden, setShowHidden] = useState(false);
 	const [copied, setCopied] = useState(false);
@@ -156,9 +164,11 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "bg-(--theme-muted-panel-bg) text-(--theme-muted-panel-color) flex shrink-0 items-center gap-3 border-b border-(--theme-border) px-3 py-2",
 				children: [hasHiddenFields && /* @__PURE__ */ jsxs("label", {
+					htmlFor: `${uid}-show-hidden`,
 					title: t.showHiddenFieldsHint,
 					className: "flex cursor-pointer select-none items-center gap-2 text-sm text-(--theme-app)",
 					children: [/* @__PURE__ */ jsx(SwitchToggleSmall, {
+						id: `${uid}-show-hidden`,
 						value: showHidden,
 						"aria-label": t.showHiddenFields,
 						onClick: () => setShowHidden((prev) => !prev)
@@ -199,6 +209,7 @@ function FormCodePanel({ formJSON, data, mutate, height = "600px", disabled = fa
 					onChange: (e) => {
 						try {
 							const parsed = JSON.parse(e);
+							if (!isObject(parsed)) return;
 							mutate(showHiddenRef.current ? parsed : populateFiltered(filteredFieldsRef.current, parsed));
 						} catch {
 							console.log("JSON.parse error in slurm editor");
@@ -240,7 +251,7 @@ function createEditorThemes() {
 	};
 	const light = {
 		disabledBg: themeVar("--theme-input-disabled-bg", "#f3f4f6"),
-		disabledFg: themeVar("--theme-muted-text-color", "#6c757d"),
+		disabledFg: themeVar("--theme-muted-text-color", "#5f6b76"),
 		border: themeVar("--theme-border", "#d1d5db"),
 		selection: themeVar("--theme-element", "#2f81f7"),
 		selectionFg: themeVar("--theme-element-text", "#ffffff")

package/dist/chunks/lib-DyJvmbzj.js

@@ -0,0 +1,256 @@
+import { t as RequiredMark } from "./RequiredMark-DfLdYbYZ.js";
+import cx from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useId, useMemo } from "react";
+//#region src/form/fieldContext.tsx
+var FieldContext = createContext({ required: false });
+var FieldProvider = FieldContext.Provider;
+/** True when the surrounding FieldWrapper is showing the required asterisk. */
+function useFieldRequired() {
+	return useContext(FieldContext).required;
+}
+/** Ties the single focusable control of a field to its FieldWrapper label. */
+function useFieldControlProps() {
+	const { id, descriptionId } = useContext(FieldContext);
+	return {
+		id,
+		"aria-describedby": descriptionId
+	};
+}
+/** For controls and groups that can only be named through aria-labelledby. */
+function useFieldLabelledByProps() {
+	const { labelId, descriptionId } = useContext(FieldContext);
+	return {
+		"aria-labelledby": labelId,
+		"aria-describedby": descriptionId
+	};
+}
+//#endregion
+//#region src/form/FieldWrapper.tsx
+function FieldWrapper({ label, tooltipComponent, description, labelPosition = "left", spaceCompact = false, optional = false, children }) {
+	const uid = useId();
+	const id = `${uid}control`;
+	const labelId = `${uid}label`;
+	const descriptionId = description ? `${uid}description` : void 0;
+	const field = useMemo(() => ({
+		required: !optional,
+		id,
+		labelId,
+		descriptionId
+	}), [
+		optional,
+		id,
+		labelId,
+		descriptionId
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full", labelPosition === "left" ? "items-start" : "items-left flex-col"),
+		children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor: id,
+			id: labelId,
+			className: cx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
+			children: [
+				label,
+				!optional && /* @__PURE__ */ jsx(RequiredMark, {}),
+				tooltipComponent
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "w-full",
+			children: [/* @__PURE__ */ jsx(FieldProvider, {
+				value: field,
+				children: typeof children === "function" ? children({
+					id,
+					labelId,
+					describedBy: descriptionId
+				}) : children
+			}), description && /* @__PURE__ */ jsx("div", {
+				id: descriptionId,
+				className: "text-xs theme-muted-text mt-1 leading-relaxed",
+				children: description
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/form/utils/secondaryField.ts
+function findSecondaryOption(options, value) {
+	for (const candidate of options) {
+		if (!candidate || typeof candidate !== "object") continue;
+		const option = candidate;
+		if (option.value === value) return option;
+		if (Array.isArray(option.options)) {
+			const nestedOption = findSecondaryOption(option.options, value);
+			if (nestedOption) return nestedOption;
+		}
+	}
+}
+function applySecondaryField(secondaryField, secondaryValue, setFieldValue) {
+	if (secondaryField === void 0 || secondaryValue === void 0) return;
+	const fields = Array.isArray(secondaryField) ? secondaryField : [secondaryField];
+	const values = Array.isArray(secondaryValue) ? secondaryValue : [secondaryValue];
+	fields.forEach((field, index) => {
+		setFieldValue(field, values[index]);
+	});
+}
+//#endregion
+//#region src/form/lib.ts
+var EMPTY_ENTRY = {};
+function asRecord(value) {
+	return value && typeof value === "object" && !Array.isArray(value) ? value : {};
+}
+/**
+* Drops a schema flag the expression parser could not resolve. workflow.schema.json types
+* `optional`/`hidden`/`ignore` as ["string", "boolean"], so a flag whose expression depends
+* on something unavailable at form-render time (a list `[index]` outside a row, `needs.`,
+* `env.`, a secret `var.`) arrives as the raw `${{…}}` string. That string is truthy, which
+* inverts each flag's documented `false` default. Returning undefined lets the caller apply
+* that default instead of reading an expression it never evaluated as "yes".
+*/
+function resolvedFlag(value) {
+	return typeof value === "string" && value.includes("${{") ? void 0 : value;
+}
+function enforceOneMustBeTrue(items, options, promoteIndex) {
+	if (items.length === 0) return items;
+	const clampedIndex = Math.max(0, Math.min(promoteIndex, items.length - 1));
+	const oneMustBeTrueFields = Object.keys(options).filter((key) => typeof options[key] === "object" && options[key] !== null && "one_must_be_true" in options[key] && options[key].one_must_be_true);
+	for (const fieldKey of oneMustBeTrueFields) {
+		const fieldSchema = options[fieldKey];
+		if (typeof fieldSchema === "object" && fieldSchema && "options" in fieldSchema) {
+			const opts = fieldSchema.options;
+			const trueOption = typeof opts === "object" && opts && !Array.isArray(opts) && "onOption" in opts ? opts.onOption || true : true;
+			if (!items.some((item) => item[fieldKey] === trueOption)) items[clampedIndex][fieldKey] = trueOption;
+		}
+	}
+	return items;
+}
+function flattenGroups(schema) {
+	if (!schema || typeof schema !== "object") return {};
+	const fields = schema;
+	let flattenedFields = {};
+	Object.keys(fields).forEach((key) => {
+		const entry = fields[key];
+		if (entry?.type === "group") {
+			const flattenedGroup = flattenGroups(entry.options);
+			flattenedFields = {
+				...flattenedFields,
+				...flattenedGroup
+			};
+		} else if (entry?.type === "object") {
+			const flattenedGroup = flattenGroups(entry.options);
+			flattenedFields = {
+				...flattenedFields,
+				[key]: flattenedGroup
+			};
+		} else flattenedFields[key] = entry;
+	});
+	return flattenedFields;
+}
+/**Not a pure function. Edits 'obj' passed into function */
+function impureSetValueFromPath(obj, path, value) {
+	const pathArray = path.split(".");
+	if (pathArray.length === 1) {
+		obj[pathArray[0]] = value;
+		return;
+	}
+	let current = obj;
+	for (let i = 0; i < pathArray.length - 1; i++) {
+		const segment = pathArray[i];
+		const arrayMatch = segment.match(/^(.+)\[(\d+)\]$/);
+		if (arrayMatch) {
+			const key = arrayMatch[1];
+			const index = Number(arrayMatch[2]);
+			if (!current[key]) current[key] = [];
+			const list = current[key];
+			if (!list[index]) list[index] = {};
+			current = list[index];
+		} else {
+			if (!current[segment]) current[segment] = {};
+			current = current[segment];
+		}
+	}
+	current[pathArray[pathArray.length - 1]] = value;
+}
+function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
+	if (!options || typeof options !== "object") return;
+	const schema = options;
+	const source = srcData;
+	const data = structuredClone(source);
+	return Object.keys(schema).reduce((acc, field) => {
+		if (field.startsWith("$")) return acc;
+		const fieldSchema = schema[field] ?? EMPTY_ENTRY;
+		if (fieldSchema.type === "group") {
+			const values = initializeValues(fieldSchema.options, data);
+			if (!values) return acc;
+			Object.keys(values).forEach((key) => {
+				acc[key] = data[key] ?? values[key];
+			});
+			return acc;
+		}
+		if (fieldSchema.type === "step") {
+			if (schema["$meta"]?.wizard?.flatten !== false) {
+				const values = initializeValues(fieldSchema.options, data);
+				if (!values) return acc;
+				Object.keys(values).forEach((key) => {
+					acc[key] = data[key] ?? values[key];
+				});
+			} else acc[field] = initializeValues(fieldSchema.options, asRecord(data[field]));
+			return acc;
+		}
+		if (fieldSchema.type === "object") {
+			acc[field] = initializeValues(fieldSchema.options, asRecord(data[field]));
+			return acc;
+		}
+		if (fieldSchema.type === "list") {
+			const listData = data[field];
+			if (fieldSchema.options === "string") {
+				acc[field] = Array.isArray(listData) ? [...listData] : [];
+				return acc;
+			}
+			const arr = [];
+			if (Array.isArray(listData)) for (let i = 0; i < listData.length; i++) arr.push(initializeValues(fieldSchema.options, asRecord(listData[i])));
+			acc[field] = arr;
+			return acc;
+		}
+		if (data[field] !== void 0) {
+			acc[field] = data[field];
+			if ((fieldSchema.type === "dropdown" || fieldSchema.type === "storage") && fieldSchema.secondaryField && fieldSchema.options && Array.isArray(fieldSchema.options)) {
+				const option = findSecondaryOption(fieldSchema.options, data[field]);
+				applySecondaryField(fieldSchema.secondaryField, option?.secondaryValue, (secondaryField, secondaryValue) => {
+					if (!(fieldSchema.type === "storage" && Object.prototype.hasOwnProperty.call(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
+				});
+			}
+			return acc;
+		}
+		if (fieldSchema.type === "label") return acc;
+		if (fieldSchema.optional && fieldSchema.default === void 0) return acc;
+		acc[field] = "";
+		if (fieldSchema.autoselect) acc[field] = void 0;
+		if (fieldSchema.type === "boolean") {
+			const boolOptions = asRecord(fieldSchema.options);
+			if (boolOptions["offOption"] && boolOptions["onOption"]) acc[field] = boolOptions["offOption"];
+			else acc[field] = false;
+		}
+		if (fieldSchema.type === "dropdown") {
+			if (fieldSchema.options && Array.isArray(fieldSchema.options) && fieldSchema.options.length > 0) acc[field] = fieldSchema.options[0].value;
+			if (fieldSchema.type === "dropdown" && fieldSchema.secondaryField && fieldSchema.options && Array.isArray(fieldSchema.options)) {
+				const option = fieldSchema.options.find((option) => option.value === data[field]);
+				const secondaryField = Array.isArray(fieldSchema.secondaryField) ? fieldSchema.secondaryField : [fieldSchema.secondaryField];
+				const secondaryValue = Array.isArray(option?.secondaryValue) ? option?.secondaryValue : [option?.secondaryValue];
+				secondaryField.forEach((field, index) => {
+					impureSetValueFromPath(data, field, secondaryValue[index]);
+					impureSetValueFromPath(acc, field, secondaryValue[index]);
+				});
+			}
+		}
+		if (fieldSchema.type === "multi-dropdown" || fieldSchema.type === "checkbox-group") acc[field] = [];
+		if (fieldSchema.default !== void 0) {
+			const dflt = fieldSchema.default;
+			const isPwResource = typeof dflt === "string" && dflt.startsWith("pw://");
+			acc[field] = fieldSchema.type === "string" || ignoreDefaultStrings && !isPwResource && (fieldSchema.type === "textarea" || fieldSchema.type === "compute-clusters" || fieldSchema.type === "compute-resources") ? "" : dflt;
+		}
+		if (fieldSchema.prefillDefault && fieldSchema.default !== void 0) acc[field] = fieldSchema.default;
+		return acc;
+	}, data);
+}
+//#endregion
+export { resolvedFlag as a, FieldWrapper as c, useFieldLabelledByProps as d, useFieldRequired as f, initializeValues as i, FieldProvider as l, flattenGroups as n, applySecondaryField as o, impureSetValueFromPath as r, findSecondaryOption as s, enforceOneMustBeTrue as t, useFieldControlProps as u };

package/dist/chunks/{list-CWVR3dfZ.js → list-CBZpAYP7.js}

@@ -1,8 +1,8 @@
 import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, DisplayIcon, ErrorIcon, FilterIcon, MenuIcon, SearchIcon, XIcon } from "../icons.js";
-import { c as useStrings, n as useLink, r as useNavigation } from "./Provider-CfFV-vc5.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-WgbiC_nd.js";
-import { c as PageHeader, f as rowContextMenuProps, g as useRowMenuActive, l as MoreButton } from "./PageHeader-dyoL44ue.js";
-import { n as Table } from "./Table-ByziK93x.js";
+import { c as useStrings, n as useLink, r as useNavigation } from "./Provider-CbFVFB7O.js";
+import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-n9w7Tkt1.js";
+import { _ as useRowMenuActive, c as PageHeader, p as rowContextMenuProps, u as MoreButton } from "./PageHeader-CxxbidPp.js";
+import { n as Table } from "./Table-CutP1bRt.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Children, Fragment as Fragment$1, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
@@ -91,6 +91,7 @@ function OverflowMenu({ items }) {
 		as: "div",
 		className: "relative inline-block text-left",
 		children: [/* @__PURE__ */ jsx(MenuButton, {
+			"aria-label": t.moreActions,
 			className: "inline-flex items-center justify-center h-9 w-9 rounded-md border theme-border link hover:theme-hover transition-colors",
 			"data-tooltip-id": TOOLTIP_ID,
 			"data-tooltip-content": t.moreActions,
@@ -264,9 +265,13 @@ function ListError({ error, noun = "data" }) {
 	});
 }
 function ListSkeleton({ rows = 6 }) {
-	return /* @__PURE__ */ jsx("div", {
+	const { loading } = useStrings();
+	return /* @__PURE__ */ jsxs("div", {
+		role: "status",
+		"aria-label": loading,
 		className: "divide-y border-b border-(--theme-border) divide-(--theme-border)",
-		children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+		children: [Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
 			className: "flex items-center gap-3 px-4 py-2.5 animate-pulse",
 			children: [
 				/* @__PURE__ */ jsx("div", { className: "h-5 w-5 rounded bg-(--theme-muted-panel-bg)" }),
@@ -276,7 +281,10 @@ function ListSkeleton({ rows = 6 }) {
 				}),
 				/* @__PURE__ */ jsx("div", { className: "ml-auto h-3 w-20 rounded bg-(--theme-muted-panel-bg)" })
 			]
-		}, i))
+		}, i)), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: loading
+		})]
 	});
 }
 /** Prevents the name column from being crushed under table-auto layout during horizontal overflow. */
@@ -428,12 +436,13 @@ function ListRow({ href, items, goTo, openMenu, pinnedActions, selected, selecti
 							"data-tooltip-id": "global-tooltip",
 							"data-tooltip-content": action.label,
 							"data-tooltip-place": "bottom",
-							disabled: action.disabled,
+							"aria-disabled": action.disabled,
 							onClick: (e) => {
 								e.stopPropagation();
+								if (action.disabled) return;
 								action.onSelect();
 							},
-							className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) disabled:cursor-not-allowed disabled:opacity-20 [&>svg]:h-4 [&>svg]:w-4", alwaysShowActions || menuActive ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"),
+							className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) aria-disabled:cursor-not-allowed aria-disabled:opacity-20 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color) [&>svg]:h-4 [&>svg]:w-4", alwaysShowActions || menuActive ? "opacity-100" : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100"),
 							children: action.icon
 						}, action.key))
 					}), /* @__PURE__ */ jsx(MoreButton, {
@@ -695,8 +704,8 @@ function AnchoredPopover({ icon, label, active, shortcut, panelClassName, childr
 	const open = useCallback(() => {
 		const r = btnRef.current?.getBoundingClientRect();
 		if (r) setPos({
-			right: Math.max(8, window.innerWidth - r.right),
-			top: r.bottom + 4
+			right: Math.max(8, Math.round(window.innerWidth - r.right)),
+			top: Math.round(r.bottom) + 4
 		});
 	}, []);
 	useEffect(() => {
@@ -740,6 +749,7 @@ function AnchoredPopover({ icon, label, active, shortcut, panelClassName, childr
 		className: cx(listControlButtonClasses, active && "border-(--theme-link) text-(--theme-app)"),
 		children: [icon, active && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" })]
 	}), pos && createPortal(/* @__PURE__ */ jsx("div", {
+		role: "none",
 		className: "fixed inset-0 z-50",
 		onMouseDown: close,
 		onContextMenu: (e) => {
@@ -994,10 +1004,17 @@ function FilterFacetRow({ view, facet, open, onEnter, onLeave }) {
 	const selected = view.filters[facet.key] ?? [];
 	return /* @__PURE__ */ jsxs("div", {
 		className: "relative",
+		role: "none",
 		onMouseEnter: onEnter,
 		onMouseLeave: onLeave,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex cursor-default items-center justify-between gap-3 px-3 py-1.5 text-[13px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
+		onFocus: onEnter,
+		onBlur: onLeave,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			"aria-haspopup": "menu",
+			onClick: onEnter,
+			className: "flex w-full cursor-default items-center justify-between gap-3 px-3 py-1.5 text-[13px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
 			children: [/* @__PURE__ */ jsx("span", { children: facet.label }), /* @__PURE__ */ jsxs("span", {
 				className: "flex items-center gap-1.5",
 				children: [selected.length > 0 && /* @__PURE__ */ jsx("span", {
@@ -1242,7 +1259,7 @@ function useHoverCard() {
 		keepOpen
 	};
 }
-function HoverCardSurface({ x, y, widthClassName, relayoutKey, onKeepOpen, onLeave, children }) {
+function HoverCardSurface({ x, y, widthClassName, padded = true, relayoutKey, onKeepOpen, onLeave, children }) {
 	const ref = useRef(null);
 	const [pos, setPos] = useState(null);
 	useLayoutEffect(() => {
@@ -1260,9 +1277,12 @@ function HoverCardSurface({ x, y, widthClassName, relayoutKey, onKeepOpen, onLea
 	]);
 	return createPortal(/* @__PURE__ */ jsx("div", {
 		ref,
+		role: "none",
 		onMouseEnter: onKeepOpen,
 		onMouseLeave: onLeave,
-		className: cx("fixed z-[9999] rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) p-3 shadow-xl backdrop-blur-xl", widthClassName),
+		onFocus: onKeepOpen,
+		onBlur: onLeave,
+		className: cx("fixed z-[9999] overflow-hidden rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) shadow-xl backdrop-blur-xl", padded && "p-3", widthClassName),
 		style: {
 			left: pos?.left ?? x,
 			top: pos?.top ?? y + 8,

package/dist/components/Breadcrumbs.d.ts

@@ -16,12 +16,21 @@ interface BreadcrumbContextType {
     setTitleActionSlot: (el: HTMLElement | null) => void;
     rightActionSlot: HTMLElement | null;
     setRightActionSlot: (el: HTMLElement | null) => void;
+    /** Pathname whose breadcrumbs a page set itself, so layouts leave it alone. */
+    claimedPath: React.MutableRefObject<string | null>;
 }
 export declare const useBreadcrumb: () => BreadcrumbContextType;
 export declare function BreadcrumbProvider({ children, }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 export declare function useSetBreadcrumbs(getBreadcrumbs: (() => IBreadcrumbItem[]) | IBreadcrumbItem[]): void;
+/**
+ * For layout routes that derive breadcrumbs from the URL: applies them only
+ * while no page under the layout has set its own for the current path.
+ * Without this, a layout re-running its effect (for example when the
+ * organization's display name loads) overwrote the page's breadcrumbs.
+ */
+export declare function useSetDefaultBreadcrumbs(getBreadcrumbs: (() => IBreadcrumbItem[]) | IBreadcrumbItem[]): void;
 /** For pages that render their own header instead of the breadcrumb strip. */
 export declare function useClearBreadcrumbs(): void;
 export declare function useHideBreadcrumbs(hidden: boolean): void;

package/dist/components/CollapsiblePanel.d.ts

@@ -4,16 +4,16 @@ interface IControlledCollapsiblePanelProps {
     children: React.ReactNode;
     open: boolean | undefined;
     setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-    onClick?: () => void;
-    wrapperElement?: React.ElementType;
+    onClick?: (() => void) | undefined;
+    wrapperElement?: React.ElementType | undefined;
     shown?: boolean;
     setShown?: (shown: boolean) => void;
     customizedButton?: React.ReactNode;
-    className?: string;
+    className?: string | undefined;
 }
 export declare function ControlledCollapsiblePanel({ title, children, open, setOpen, onClick, wrapperElement, customizedButton, className, }: IControlledCollapsiblePanelProps): React.JSX.Element;
 export declare function UncontrolledCollapsiblePanel({ title, children, onClick, wrapperElement, initialState, className, customizedButton, }: Omit<IControlledCollapsiblePanelProps, 'setOpen' | 'open'> & {
-    initialState?: boolean;
+    initialState?: boolean | undefined;
 }): React.JSX.Element;
 type MaybeCollapsibleProps = {
     className?: string;