@parallelworks/ui 0.19.0 → 0.19.1

package/dist/components/Input.js

@@ -0,0 +1,88 @@
+import { AlertIcon, EyeIcon, EyeOffIcon } from "../icons.js";
+import { RequiredMark } from "./RequiredMark.js";
+import cx from "classnames";
+import { forwardRef, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Input.tsx
+var Input = forwardRef(({ label, error, className = "", mono, type, required, ...props }, ref) => {
+	const [showPassword, setShowPassword] = useState(false);
+	const isPassword = type === "password";
+	const inputType = isPassword && showPassword ? "text" : type;
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	const errorId = `${id}-error`;
+	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const inputClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", "disabled:bg-[var(--theme-muted-panel-bg)] disabled:text-[var(--theme-muted-text-color)] disabled:cursor-not-allowed disabled:opacity-70", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", isPassword && "pr-11", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: id,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: isPassword ? "relative w-full" : "",
+				children: [/* @__PURE__ */ jsx("input", {
+					ref,
+					type: inputType,
+					className: inputClasses,
+					...props,
+					id,
+					required,
+					"aria-invalid": error ? true : props["aria-invalid"],
+					"aria-describedby": describedBy
+				}), isPassword && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "absolute right-3 top-1/2 -translate-y-1/2 bg-transparent border-none text-[var(--theme-muted-text-color)] cursor-pointer p-1 transition-colors duration-200 flex items-center justify-center hover:text-[var(--theme-app)]",
+					onClick: () => setShowPassword(!showPassword),
+					tabIndex: -1,
+					"aria-label": showPassword ? "Hide password" : "Show password",
+					children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "w-5 h-5" })
+				})]
+			}),
+			error && /* @__PURE__ */ jsxs("span", {
+				id: errorId,
+				role: "alert",
+				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+			})
+		]
+	});
+});
+Input.displayName = "Input";
+var Textarea = forwardRef(({ label, error, className = "", mono, required, ...props }, ref) => {
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	const errorId = `${id}-error`;
+	const describedBy = [props["aria-describedby"], error ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	const textareaClasses = cx("w-full py-3 px-4 bg-[var(--theme-muted-panel-bg)] border border-[var(--theme-border)] rounded-lg text-[var(--theme-app)] text-sm transition-all duration-200 box-border min-h-[140px] resize-y", "focus:outline-none focus:border-[var(--theme-element)] focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--theme-element)_25%,transparent)]", "placeholder:text-[var(--theme-muted-text-color)]", mono && "font-mono text-[0.8125rem]", error && "border-[#ef4444]", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("label", {
+				className: "text-[0.8125rem] font-medium text-[var(--theme-app)]",
+				htmlFor: id,
+				children: [label, required && /* @__PURE__ */ jsx(RequiredMark, {})]
+			}),
+			/* @__PURE__ */ jsx("textarea", {
+				ref,
+				className: textareaClasses,
+				...props,
+				id,
+				required,
+				"aria-invalid": error ? true : props["aria-invalid"],
+				"aria-describedby": describedBy
+			}),
+			error && /* @__PURE__ */ jsxs("span", {
+				id: errorId,
+				role: "alert",
+				className: "text-[0.8125rem] text-[#ef4444] flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx(AlertIcon, { className: "w-4 h-4" }), error]
+			})
+		]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Input, Textarea };

package/dist/components/LetterBadge.js

@@ -0,0 +1,13 @@
+import cx from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/LetterBadge.tsx
+/** A compact letter badge ("AI", "PUB", "SSH") used as a type mark in place of
+* an icon. Size the box and text via className (e.g. "h-5 w-5 text-[8px]"). */
+function LetterBadge({ text, className }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cx("inline-flex shrink-0 items-center justify-center rounded-[3px] border theme-border font-bold leading-none tracking-tight text-(--theme-app)", className),
+		children: text
+	});
+}
+//#endregion
+export { LetterBadge };

package/dist/components/Listbox.js

@@ -0,0 +1,123 @@
+import { useStrings } from "./Provider.js";
+import { AngleDownIcon } from "../icons.js";
+import { keyedByContent } from "./keys.js";
+import { focusOnMount } from "./focus.js";
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from "@headlessui/react";
+import cx from "classnames";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Listbox.tsx
+function CustomListbox({ options = [], handleOptionSelected, type, allowSearch = false, closeOnSelect = true, className = "", invalid = false, required = false, id, "aria-describedby": describedBy }) {
+	const { dropdown: strings } = useStrings();
+	const [filter, setFilter] = useState("");
+	const [controlledOpen, setControlledOpen] = useState(false);
+	const optionsToShow = options.filter((option) => !option.selected && option.label && option.label.toLowerCase().includes(filter.toLowerCase()));
+	function useOutsideAlerter(ref) {
+		useEffect(() => {
+			function handleClickOutside(event) {
+				if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
+					setControlledOpen(false);
+					setFilter("");
+				}
+			}
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => {
+				document.removeEventListener("mousedown", handleClickOutside);
+			};
+		}, [ref]);
+	}
+	const wrapperRef = useRef(null);
+	useOutsideAlerter(wrapperRef);
+	const optionsElement = /* @__PURE__ */ jsxs(ListboxOptions, {
+		modal: false,
+		static: true,
+		className: "absolute w-full py-1 z-50 theme-input rounded-md",
+		children: [allowSearch && /* @__PURE__ */ jsx("div", {
+			className: "pl-2 pr-4 mb-1",
+			children: /* @__PURE__ */ jsx("input", {
+				autoComplete: "off",
+				type: "search",
+				ref: focusOnMount,
+				onChange: (e) => setFilter(e.target.value),
+				value: filter,
+				className: "w-full p-1 theme-input",
+				onKeyDown: (e) => {
+					if (![
+						"ArrowUp",
+						"ArrowDown",
+						"Enter",
+						"Home",
+						"End",
+						"Escape"
+					].includes(e.key)) e.stopPropagation();
+				}
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "overflow-auto max-h-60 theme-panel",
+			children: optionsToShow.length > 0 ? keyedByContent(optionsToShow, (o) => String(o.value)).map(({ key, item: option }) => /* @__PURE__ */ jsx(ListboxOption, {
+				className: "relative hover:theme-hover select-none pl-2 pr-4",
+				value: option.value,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-full flex flex-row",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "w-3/4 py-2 flex items-center",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "w-4 h-6 btn btn-info text-xl line-height-0 mr-2",
+								children: "+"
+							}),
+							option.icon && /* @__PURE__ */ jsx("span", {
+								className: "mr-2 flex items-center",
+								children: option.icon
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "mr-2",
+								children: option.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "italic",
+								children: option.secondaryLabel
+							})
+						]
+					})
+				})
+			}, key)) : /* @__PURE__ */ jsx("div", {
+				className: "w-full flex flex-row",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "w-3/4 py-2 pl-2 capitalize flex items-center",
+					children: filter === "" ? `All ${type} Added` : `No ${type} Found`
+				})
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Listbox, {
+		as: "div",
+		className: cx("relative mt-1 theme-input border theme-border rounded-md", className),
+		ref: wrapperRef,
+		onChange: handleOptionSelected,
+		children: [/* @__PURE__ */ jsxs(ListboxButton, {
+			id,
+			"aria-describedby": describedBy,
+			"aria-required": required || void 0,
+			onClick: () => setControlledOpen((prev) => !prev),
+			className: cx("relative w-full py-2 pl-3 text-left", invalid && "border-red-600 focus:border-red-600 focus:ring-red-500"),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "block truncate",
+				children: strings.select(type)
+			}), /* @__PURE__ */ jsx("span", {
+				className: "pointer-events-none absolute inset-y-0 right-0 flex items-center justify-items-center",
+				children: /* @__PURE__ */ jsx(AngleDownIcon, {
+					className: "h-5 w-8",
+					"aria-hidden": "true"
+				})
+			})]
+		}), closeOnSelect ? /* @__PURE__ */ jsx(Transition, {
+			leave: "transition ease-in duration-100",
+			leaveFrom: "opacity-100",
+			leaveTo: "opacity-0",
+			children: optionsElement || null
+		}) : /* @__PURE__ */ jsx(Fragment$1, { children: controlledOpen && optionsElement })]
+	});
+}
+//#endregion
+export { CustomListbox as default };

package/dist/{chunks/Loader-BXoXTZGc.js → components/Loader.js}

@@ -44,4 +44,4 @@ function Loader({ size = 48, text, textSize = 12, full = true, color = "", loade
 	});
 }
 //#endregion
-export { Loader as t };
+export { Loader as default };

package/dist/components/Markdown.js

@@ -0,0 +1,15 @@
+import { Suspense, lazy } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Markdown.tsx
+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",
+			children: props.children
+		}),
+		children: /* @__PURE__ */ jsx(MarkdownImpl, { ...props })
+	});
+}
+//#endregion
+export { Markdown as default };

package/dist/components/MultiSelect.js

@@ -0,0 +1,171 @@
+import { useStrings } from "./Provider.js";
+import { keyedByContent } from "./keys.js";
+import { DropdownCaret, filterOption, flattenOptions, isCategory, isOption } from "./dropdownUtils.js";
+import { focusOnMount } from "./focus.js";
+import { Combobox, ComboboxButton, ComboboxOption, ComboboxOptions } from "@headlessui/react";
+import cx from "classnames";
+import { useCallback, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { usePopper } from "react-popper";
+//#region src/components/MultiSelect.tsx
+function MultiSelectDropdown({ options, value, onChange, id, "aria-labelledby": labelledBy, "aria-describedby": describedBy, required, className, wrapperClassName = "w-full", textBoxClassName, disabled = false, placeholder, loading = false, searchable = true, maxTagCount = 2, compareBy }) {
+	const strings = useStrings();
+	const [query, setQuery] = useState("");
+	const [referenceEl, setReferenceEl] = useState(null);
+	const [popperEl, setPopperEl] = useState(null);
+	const { styles, attributes } = usePopper(referenceEl, popperEl, {
+		placement: "bottom-start",
+		modifiers: [{
+			name: "offset",
+			options: { offset: [0, 4] }
+		}]
+	});
+	const allOptions = useMemo(() => flattenOptions(options), [options]);
+	const compare = compareBy ?? ((a, b) => a === b);
+	const selectedOptions = useMemo(() => {
+		const result = [];
+		for (const val of value) {
+			const found = allOptions.find((opt) => isOption(opt) && compare(opt.value, val));
+			if (found) result.push(found);
+		}
+		return result;
+	}, [
+		value,
+		allOptions,
+		compare
+	]);
+	const filteredOptions = useMemo(() => {
+		if (!searchable || query.trim() === "") return allOptions;
+		const result = [];
+		for (const opt of allOptions) if (isCategory(opt)) {
+			const matchedChildren = (Array.isArray(opt.options) ? opt.options : []).filter((o) => filterOption(o, query));
+			if (matchedChildren.length > 0) result.push(opt, ...matchedChildren);
+		} else if (isOption(opt) && filterOption(opt, query)) result.push(opt);
+		return result;
+	}, [
+		allOptions,
+		query,
+		searchable
+	]);
+	const display = useMemo(() => {
+		const shown = selectedOptions.slice(0, maxTagCount);
+		return {
+			label: shown.map((o) => o.label).join(", "),
+			overflow: selectedOptions.length - shown.length
+		};
+	}, [selectedOptions, maxTagCount]);
+	const handleChange = useCallback((newValues) => {
+		if (!Array.isArray(newValues)) return;
+		onChange(newValues);
+	}, [onChange]);
+	const isDisabled = disabled || loading;
+	const isEmpty = filteredOptions.length === 0;
+	return /* @__PURE__ */ jsx(Combobox, {
+		multiple: true,
+		value: Array.isArray(value) ? value : [],
+		onChange: handleChange,
+		disabled: isDisabled,
+		onClose: () => setQuery(""),
+		by: compare,
+		children: ({ open }) => /* @__PURE__ */ jsxs("div", {
+			ref: setReferenceEl,
+			className: cx("relative", wrapperClassName),
+			children: [
+				/* @__PURE__ */ jsx(ComboboxButton, {
+					as: "div",
+					id,
+					"aria-labelledby": labelledBy,
+					"aria-describedby": describedBy,
+					"aria-required": required || void 0,
+					className: cx("theme-input flex items-center cursor-pointer rounded border text-[14px] w-full px-2 pr-8 py-1 min-h-[30px] overflow-hidden", isDisabled && "opacity-50 cursor-not-allowed", textBoxClassName, className),
+					children: loading ? /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text",
+						children: strings.loading
+					}) : selectedOptions.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: display.label
+					}), display.overflow > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "ml-1 shrink-0 theme-muted-text",
+						children: ["+", display.overflow]
+					})] }) : /* @__PURE__ */ jsx("span", {
+						className: "theme-muted-text truncate",
+						children: placeholder
+					})
+				}),
+				/* @__PURE__ */ jsx(DropdownCaret, {}),
+				open && /* @__PURE__ */ jsxs(ComboboxOptions, {
+					modal: false,
+					ref: setPopperEl,
+					static: true,
+					"data-testid": "msd-list",
+					style: styles["popper"],
+					...attributes["popper"],
+					className: "theme-panel z-10 max-h-60 w-full overflow-auto rounded-md shadow-lg focus:outline-none",
+					children: [searchable && /* @__PURE__ */ jsx("div", {
+						className: "sticky top-0 theme-panel p-2 border-b z-10",
+						children: /* @__PURE__ */ jsx("input", {
+							placeholder,
+							"data-1p-ignore": true,
+							autoComplete: "off",
+							type: "text",
+							className: "theme-input w-full",
+							value: query,
+							onChange: (e) => setQuery(e.target.value),
+							onKeyDown: (e) => e.stopPropagation(),
+							ref: focusOnMount
+						})
+					}), /* @__PURE__ */ jsx("div", {
+						className: "py-1",
+						children: isEmpty ? /* @__PURE__ */ jsx("div", {
+							className: "px-4 py-2 text-sm theme-muted-text",
+							children: strings.dropdown.noOptionsFound
+						}) : keyedByContent(filteredOptions, (o) => isCategory(o) ? `category-${o.category ?? "uncat"}` : `option-${String(o.value)}`).map(({ key, item: opt }) => {
+							if (isCategory(opt)) return /* @__PURE__ */ jsx("li", {
+								role: "presentation",
+								className: "px-4 py-2 text-sm font-bold theme-muted-text",
+								children: opt.category
+							}, key);
+							const option = opt;
+							return /* @__PURE__ */ jsx(ComboboxOption, {
+								value: option.value,
+								disabled: option.disabled ?? false,
+								"data-testid": `msd-option-${String(option.value)}`,
+								className: ({ focus }) => cx("relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm", focus && "theme-hover", option.disabled && "cursor-not-allowed opacity-50"),
+								children: ({ selected }) => /* @__PURE__ */ jsxs("div", {
+									className: "flex items-center",
+									children: [
+										/* @__PURE__ */ jsx("span", {
+											className: "absolute inset-y-0 left-0 flex items-center pl-3",
+											children: /* @__PURE__ */ jsx("input", {
+												autoComplete: "off",
+												type: "checkbox",
+												checked: selected,
+												readOnly: true,
+												tabIndex: -1,
+												className: "h-4 w-4 cursor-pointer",
+												"aria-hidden": "true"
+											})
+										}),
+										option.icon && /* @__PURE__ */ jsx("span", {
+											className: "mr-2 flex items-center",
+											children: option.icon
+										}),
+										/* @__PURE__ */ jsx("div", {
+											className: "flex flex-col",
+											children: /* @__PURE__ */ jsx("span", {
+												className: "block truncate",
+												children: option.label
+											})
+										})
+									]
+								})
+							}, key);
+						})
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { MultiSelectDropdown as default };

package/dist/components/Overview.js

@@ -0,0 +1,39 @@
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Skeleton from "react-loading-skeleton";
+//#region src/components/Overview.tsx
+function Overview({ Icon, name, type, children, right, className, loading, iconSize = 75 }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex items-center w-full", className),
+		children: [
+			loading ? /* @__PURE__ */ jsx(Skeleton, {
+				width: iconSize,
+				height: iconSize,
+				circle: true
+			}) : Icon,
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col min-w-0 flex-1",
+				children: loading ? /* @__PURE__ */ jsx(Skeleton, {
+					count: 2,
+					height: 12
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "font-semibold text-xl tracking-tight",
+						children: name
+					}),
+					type && /* @__PURE__ */ jsx("p", { children: type }),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex flex-row gap-x-2",
+						children
+					})
+				] })
+			}),
+			right && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0 self-center",
+				children: right
+			})
+		]
+	});
+}
+//#endregion
+export { Overview };

package/dist/components/PageHeader.js

@@ -0,0 +1,194 @@
+import { useLink, useSlots, useStrings } from "./Provider.js";
+import { AddIcon, ChevronRightIcon, EditIcon, MoreIcon } from "../icons.js";
+import { keyedByContent } from "./keys.js";
+import { TOOLTIP_ID } from "./Tooltip.js";
+import { AddMenu } from "./AddMenu.js";
+import { useBreadcrumb } from "./Breadcrumbs.js";
+import { useRowMenu } from "../list/RowContextMenu.js";
+import cx from "classnames";
+import { Fragment, useLayoutEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/components/PageHeader.tsx
+var headerActionButtonClasses = "flex items-center justify-center w-6 h-6 rounded-md shrink-0 cursor-pointer text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg) transition-colors";
+var headerAddButtonClasses = "inline-flex h-[26px] shrink-0 items-center gap-1.5 rounded-md border border-(--theme-border) px-2 text-xs font-medium cursor-pointer text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
+/** With menu, the plus opens a chooser; otherwise navigates to or calls the
+* single action. `word` is the visible verb; `label` stays the full action for
+* the tooltip and screen readers. */
+function HeaderAddButton({ to, onClick, label, word = "add", menu, disabled = false, disabledHint }) {
+	const { common } = useStrings();
+	const Link = useLink();
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AddIcon, { className: "w-3 h-3" }), /* @__PURE__ */ jsx("span", { children: word === "create" ? common.create : common.add })] });
+	if (menu) return /* @__PURE__ */ jsx(AddMenu, {
+		items: menu,
+		label,
+		buttonClassName: headerAddButtonClasses,
+		children: content
+	});
+	if (to) return /* @__PURE__ */ jsx(Link, {
+		to,
+		"aria-label": label,
+		title: label,
+		className: headerAddButtonClasses,
+		children: content
+	});
+	const hint = disabled ? disabledHint : void 0;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: disabled ? void 0 : onClick,
+		"aria-label": hint ? `${label}. ${hint}` : label,
+		"aria-disabled": disabled || void 0,
+		...hint ? {
+			"data-tooltip-id": TOOLTIP_ID,
+			"data-tooltip-content": hint
+		} : { title: label },
+		className: cx(headerAddButtonClasses, "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:hover:bg-transparent aria-disabled:hover:text-(--theme-muted-text-color)"),
+		children: content
+	});
+}
+function HeaderActionMenu({ items, label = "Actions" }) {
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(AddMenu, {
+		items,
+		label,
+		buttonClassName: headerActionButtonClasses,
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+	});
+}
+/** The header "…" trigger for a RowMenuItem menu — same rendering (submenus,
+* destructive styling) as the list pages' right-click context menus. */
+function HeaderRowMenu({ items, label = "Actions" }) {
+	const { openMenu, contextMenu } = useRowMenu();
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		className: headerActionButtonClasses,
+		onClick: (e) => {
+			const r = e.currentTarget.getBoundingClientRect();
+			openMenu(r.left, r.bottom + 4, items);
+		},
+		children: /* @__PURE__ */ jsx(MoreIcon, { className: "w-3.5 h-3.5" })
+	}), contextMenu] });
+}
+function HeaderEditButton({ to, onClick, label = "Edit", disabled, tooltip }) {
+	const Link = useLink();
+	const tooltipProps = tooltip ? {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": tooltip
+	} : {};
+	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
+		to,
+		"aria-label": label,
+		...tooltip ? {} : { title: label },
+		className: headerActionButtonClasses,
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled,
+		"aria-label": label,
+		title: tooltip ? void 0 : label,
+		className: cx(headerActionButtonClasses, disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"),
+		...tooltipProps,
+		children: /* @__PURE__ */ jsx(EditIcon, { className: "w-3 h-3" })
+	});
+}
+/** Renders nothing when the modern breadcrumb strip isn't mounted (classic chrome or self-headered pages). */
+function BreadcrumbsTitleAction({ children }) {
+	const { titleActionSlot } = useBreadcrumb();
+	if (!titleActionSlot) return null;
+	return createPortal(children, titleActionSlot);
+}
+function BreadcrumbsRightAction({ children }) {
+	const { rightActionSlot } = useBreadcrumb();
+	if (!rightActionSlot) return null;
+	return createPortal(children, rightActionSlot);
+}
+var breadcrumbsActionClasses = "flex items-center gap-1 link text-xs whitespace-nowrap disabled:opacity-50 disabled:cursor-not-allowed";
+function BreadcrumbsActionButton({ icon: Icon, label, ariaLabel, to, onClick, disabled, tooltip }) {
+	const Link = useLink();
+	const tip = tooltip ? {
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": tooltip
+	} : {};
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), label] });
+	if (to && !disabled) return /* @__PURE__ */ jsx(Link, {
+		to,
+		className: breadcrumbsActionClasses,
+		...ariaLabel ? { "aria-label": ariaLabel } : {},
+		...tip,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		disabled,
+		className: breadcrumbsActionClasses,
+		...ariaLabel ? { "aria-label": ariaLabel } : {},
+		...tip,
+		children: content
+	});
+}
+function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, className, sticky = true, stickyTopClassName = "top-0" }) {
+	const { setHidden } = useBreadcrumb();
+	const Link = useLink();
+	const { breadcrumbPin, navToggle } = useSlots();
+	useLayoutEffect(() => {
+		setHidden(true);
+		return () => setHidden(false);
+	}, [setHidden]);
+	const crumbs = [...breadcrumbs ?? []];
+	const lastLabel = crumbs[crumbs.length - 1]?.label;
+	if (title !== null && title !== void 0 && title !== lastLabel) crumbs.push({ label: title });
+	const crumbRow = crumbs.length > 0 && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5 min-w-0",
+		children: [
+			/* @__PURE__ */ jsx("nav", {
+				"aria-label": "Breadcrumb",
+				className: "flex items-center gap-2 min-w-0 text-[13px]",
+				children: keyedByContent(crumbs, (c) => c.href ?? (typeof c.label === "string" ? c.label : "crumb")).map(({ key, item: crumb }, idx) => {
+					if (idx === crumbs.length - 1) return /* @__PURE__ */ jsx("h1", {
+						className: "m-0 text-[13px] font-medium leading-none text-(--theme-app) truncate",
+						children: crumb.label
+					}, key);
+					return /* @__PURE__ */ jsxs(Fragment, { children: [crumb.href ? /* @__PURE__ */ jsx(Link, {
+						to: crumb.href,
+						className: "text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors cursor-pointer whitespace-nowrap",
+						children: crumb.label
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "text-(--theme-muted-text-color) whitespace-nowrap",
+						children: crumb.label
+					}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3 h-3 opacity-60 shrink-0 text-(--theme-muted-text-color)" })] }, key);
+				})
+			}),
+			titleAction,
+			breadcrumbPin?.({ crumbs })
+		]
+	});
+	const actionCluster = actions && /* @__PURE__ */ jsx("div", {
+		className: "flex items-center gap-1.5 shrink-0",
+		children: actions
+	});
+	const toggle = navToggle?.();
+	const hasLeading = !!crumbRow || !!toggle;
+	const leading = hasLeading ? /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 min-w-0",
+		children: [toggle, crumbRow]
+	}) : /* @__PURE__ */ jsx("div", {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx(sticky && cx("sticky z-20", stickyTopClassName), "w-full bg-(--theme-app-bg)", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex items-center justify-between gap-6 px-4 h-11", hasLeading && "border-b border-(--theme-border)"),
+			children: [leading, actionCluster]
+		}), toolbar && /* @__PURE__ */ jsx("div", {
+			className: "px-4",
+			children: toolbar
+		})]
+	});
+}
+//#endregion
+export { BreadcrumbsActionButton, BreadcrumbsRightAction, BreadcrumbsTitleAction, HeaderActionMenu, HeaderAddButton, HeaderEditButton, HeaderRowMenu, PageHeader, headerActionButtonClasses };