@parallelworks/ui 0.4.0 → 0.5.1

package/dist/chunks/{list-D5f5Fq-O.js → list-CGbR-ueU.js}

@@ -1,324 +1,12 @@
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, CopyIcon, DisplayIcon, ErrorIcon, FilterIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, SearchIcon, UserIcon, XIcon } from "../icons.js";
-import { c as useStrings, i as useNotify, n as useLink } from "./Provider-uUHgWOWc.js";
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, DisplayIcon, ErrorIcon, FilterIcon, SearchIcon, XIcon } from "../icons.js";
+import { c as useStrings, n as useLink } from "./Provider-wC9G01Ou.js";
 import { n as TOOLTIP_ID, r as TooltipInfo } from "./Tooltip-WgbiC_nd.js";
-import { n as Table } from "./Table-C5z6qWjM.js";
+import { n as Table } from "./Table-ByziK93x.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useLocalStorage } from "usehooks-ts";
-//#region src/list/RowContextMenu.tsx
-/** Converts a single row action to a menu item: a `to` makes it a link, otherwise an action. */
-function toRowMenuItem(action) {
-	if (action.to) return {
-		kind: "link",
-		label: action.label,
-		icon: action.icon,
-		to: action.to,
-		destructive: action.destructive
-	};
-	return {
-		kind: "action",
-		label: action.label,
-		icon: action.icon,
-		onSelect: action.onSelect ?? (() => {}),
-		disabled: action.disabled,
-		destructive: action.destructive
-	};
-}
-/** Bridges a toolbar action (icon component, `onClick`/`href`) onto the shared
-* `RowAction` shape. Typed structurally so any toolbar action shape matching
-* these fields is assignable. */
-function toolbarActionToRowAction(action) {
-	const Icon = action.icon;
-	return {
-		key: action.key,
-		label: action.label,
-		icon: /* @__PURE__ */ jsx(Icon, {}),
-		onSelect: action.onClick,
-		to: action.href,
-		disabled: action.disabled,
-		destructive: action.key === "delete" || action.key === "destroy"
-	};
-}
-/** Assembles a row's context menu in the shared order: leading link(s) → middle
-* actions → extra items → Copy submenu → trailing (destructive) actions last. */
-function assembleRowMenu({ lead = [], actions, exclude, order, trailing = ["delete"], extra = [], copy }) {
-	const trailingSet = new Set(trailing);
-	const excludeSet = new Set(exclude);
-	let middle = actions.filter((a) => !trailingSet.has(a.key) && !excludeSet.has(a.key));
-	if (order) {
-		const byKey = new Map(middle.map((a) => [a.key, a]));
-		middle = order.map((key) => byKey.get(key)).filter((a) => a !== void 0);
-	}
-	const trailingItems = trailing.map((key) => actions.find((a) => a.key === key)).filter((a) => a !== void 0);
-	return [
-		...lead,
-		...middle.map(toRowMenuItem),
-		...extra,
-		...copy ? [copy] : [],
-		...trailingItems.map(toRowMenuItem)
-	];
-}
-function useRowMenu() {
-	const [menu, setMenu] = useState(null);
-	const onCloseRef = useRef(void 0);
-	return {
-		openMenu: useCallback((x, y, items, onClose) => {
-			if (items.length > 0) {
-				onCloseRef.current?.();
-				onCloseRef.current = onClose;
-				setMenu({
-					x,
-					y,
-					items
-				});
-			}
-		}, []),
-		contextMenu: /* @__PURE__ */ jsx(RowContextMenu, {
-			state: menu,
-			onClose: useCallback(() => {
-				onCloseRef.current?.();
-				onCloseRef.current = void 0;
-				setMenu(null);
-			}, [])
-		})
-	};
-}
-/** The full-screen menu overlay drops CSS :hover on the triggering row; wrap openMenu here to substitute a JS-driven `active` highlight. */
-function useRowMenuActive(openMenu) {
-	const [active, setActive] = useState(false);
-	return {
-		active,
-		openMenu: useCallback((x, y, items) => {
-			setActive(true);
-			openMenu(x, y, items, () => setActive(false));
-		}, [openMenu])
-	};
-}
-function rowContextMenuProps(openMenu, items) {
-	return { onContextMenu: (e) => {
-		e.preventDefault();
-		if (items.length > 0) e.stopPropagation();
-		openMenu(e.clientX, e.clientY, items);
-	} };
-}
-function RowContextMenu({ state, onClose }) {
-	const ref = useRef(null);
-	const [pos, setPos] = useState(null);
-	useLayoutEffect(() => {
-		if (!state || !ref.current) {
-			setPos(null);
-			return;
-		}
-		const { width, height } = ref.current.getBoundingClientRect();
-		const pad = 8;
-		const top = height > window.innerHeight - pad - state.y && state.y - height - pad >= 0 ? state.y - height : Math.min(state.y, window.innerHeight - height - pad);
-		setPos({
-			left: Math.max(pad, Math.min(state.x, window.innerWidth - width - pad)),
-			top: Math.max(pad, top)
-		});
-	}, [state]);
-	useEffect(() => {
-		if (!state) return;
-		const close = () => onClose();
-		const onKey = (e) => {
-			if (e.key === "Escape") onClose();
-		};
-		window.addEventListener("scroll", close, true);
-		window.addEventListener("resize", close);
-		window.addEventListener("keydown", onKey);
-		return () => {
-			window.removeEventListener("scroll", close, true);
-			window.removeEventListener("resize", close);
-			window.removeEventListener("keydown", onKey);
-		};
-	}, [state, onClose]);
-	if (!state) return null;
-	const side = (pos?.left ?? state.x) > window.innerWidth * .6 ? "left" : "right";
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		className: "fixed inset-0 z-50",
-		onClick: onClose,
-		onContextMenu: (e) => {
-			e.preventDefault();
-			if (ref.current?.contains(e.target)) {
-				onClose();
-				return;
-			}
-			const { clientX, clientY } = e;
-			const overlay = e.currentTarget;
-			overlay.style.pointerEvents = "none";
-			const under = document.elementFromPoint(clientX, clientY);
-			overlay.style.pointerEvents = "";
-			onClose();
-			under?.dispatchEvent(new MouseEvent("contextmenu", {
-				bubbles: true,
-				cancelable: true,
-				clientX,
-				clientY
-			}));
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			role: "menu",
-			className: "absolute min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg backdrop-blur-xl",
-			style: {
-				left: pos?.left ?? state.x,
-				top: pos?.top ?? state.y,
-				visibility: pos ? "visible" : "hidden"
-			},
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ jsx(MenuItemList, {
-				items: state.items,
-				onClose,
-				side
-			})
-		})
-	}), document.body);
-}
-var MENU_ITEM_CLASSES = "flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg) transition-colors cursor-pointer [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0";
-function MenuItemList({ items, onClose, side }) {
-	return items.map((item, i) => item.kind === "divider" ? /* @__PURE__ */ jsx("div", {
-		"aria-hidden": "true",
-		className: "my-1 h-px bg-(--theme-border)"
-	}, `divider-${i}`) : /* @__PURE__ */ jsx(MenuRow, {
-		item,
-		onClose,
-		side
-	}, `${item.label}-${i}`));
-}
-function MenuRow({ item, onClose, side }) {
-	const Link = useLink();
-	const notify = useNotify();
-	const { list: t } = useStrings();
-	const [openSub, setOpenSub] = useState(false);
-	const closeTimer = useRef(void 0);
-	if (item.kind === "submenu") {
-		const open = () => {
-			clearTimeout(closeTimer.current);
-			setOpenSub(true);
-		};
-		const close = () => {
-			closeTimer.current = setTimeout(() => setOpenSub(false), 160);
-		};
-		return /* @__PURE__ */ jsxs("div", {
-			className: "relative",
-			onMouseEnter: open,
-			onMouseLeave: close,
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: cx(MENU_ITEM_CLASSES, "justify-between text-(--theme-app)"),
-				children: [/* @__PURE__ */ jsxs("span", {
-					className: "flex items-center gap-2.5",
-					children: [item.icon, item.label]
-				}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 shrink-0 opacity-60" })]
-			}), openSub && /* @__PURE__ */ jsx("div", {
-				className: cx("absolute -top-1 z-10 min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg", side === "left" ? "right-full" : "left-full"),
-				children: /* @__PURE__ */ jsx(MenuItemList, {
-					items: item.items,
-					onClose,
-					side
-				})
-			})]
-		});
-	}
-	if (item.kind === "link") return /* @__PURE__ */ jsxs(Link, {
-		to: item.to,
-		onClick: onClose,
-		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)"),
-		children: [item.icon, item.label]
-	});
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		disabled: item.disabled,
-		onClick: () => {
-			if (item.copy) {
-				const { text, label } = item.copy;
-				navigator.clipboard?.writeText(text).then(() => notify.success(t.copied(label)), () => notify.error(t.couldntCopy(label)));
-			}
-			item.onSelect?.();
-			onClose();
-		},
-		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)", item.disabled && "opacity-40 cursor-not-allowed hover:bg-transparent"),
-		children: [
-			item.icon,
-			item.label,
-			item.selected && /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto opacity-80" })
-		]
-	});
-}
-/** Builds the Copy submenu entries for whichever fields a row has, in stable
-* order. The menu itself performs the copy and notifies; `t` is an optional
-* host translator for the field labels (falls back to the provider defaults'
-* English). */
-function copySubmenu({ name, nameLabel, email, username, uid, id, url, extra, t }) {
-	const items = [
-		{
-			label: nameLabel ?? (t ? t("rowContextMenu.labelName") : "name"),
-			value: name,
-			icon: /* @__PURE__ */ jsx(CopyIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelEmail") : "email",
-			value: email,
-			icon: /* @__PURE__ */ jsx(MailIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelUsername") : "username",
-			value: username,
-			icon: /* @__PURE__ */ jsx(UserIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelUid") : "UID",
-			value: uid === null || uid === void 0 ? null : String(uid),
-			icon: /* @__PURE__ */ jsx(KeyIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelId") : "ID",
-			value: id,
-			icon: /* @__PURE__ */ jsx(IdCardIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelUrl") : "URL",
-			value: url,
-			icon: /* @__PURE__ */ jsx(LinkIcon, {})
-		},
-		...(extra ?? []).map((e) => ({
-			label: e.label,
-			value: e.value,
-			icon: e.icon ?? /* @__PURE__ */ jsx(CopyIcon, {})
-		}))
-	].filter((f) => f.value).map((f) => ({
-		kind: "action",
-		label: t ? t("rowContextMenu.copy", { label: f.label }) : `Copy ${f.label}`,
-		icon: f.icon,
-		copy: {
-			text: f.value,
-			label: f.label
-		}
-	}));
-	return {
-		kind: "submenu",
-		label: t ? t("common.copy") : "Copy",
-		icon: /* @__PURE__ */ jsx(ClipboardIcon, {}),
-		items
-	};
-}
-/** Stays visible while active (menu open) so it doesn't vanish behind the overlay. */
-function MoreButton({ onOpen, active, className }) {
-	const { list: t } = useStrings();
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": t.moreActions,
-		onClick: (e) => {
-			e.stopPropagation();
-			const r = e.currentTarget.getBoundingClientRect();
-			onOpen(r.right, r.bottom);
-		},
-		className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:opacity-100", active ? "opacity-100" : "opacity-0 group-hover:opacity-100", className),
-		children: /* @__PURE__ */ jsx(MoreIcon, { className: "h-4 w-4" })
-	});
-}
-//#endregion
 //#region src/list/ListTable.tsx
 var NAME_TEXT = "font-medium text-[13px] leading-tight text-(--theme-app) truncate";
 var SUBTITLE_TEXT = "text-xs leading-tight text-(--theme-muted-text-color) truncate";
@@ -1256,4 +944,4 @@ function HoverCardSurface({ x, y, widthClassName, relayoutKey, onKeepOpen, onLea
 	}), document.querySelector(".ds-root") ?? document.body);
 }
 //#endregion
-export { useRowMenu as A, listTableProps as C, rowContextMenuProps as D, copySubmenu as E, toRowMenuItem as O, listTableFixedProps as S, assembleRowMenu as T, ListSkeleton as _, ListSearchControl as a, RowSelectCheckbox as b, ListFilterMenu as c, DEFAULT_ORDER as d, FAVORITE_ORDER as f, ListError as g, ListActionsHeader as h, ListCount as i, useRowMenuActive as j, toolbarActionToRowAction as k, listControlButtonClasses as l, GroupRow as m, useHoverCard as n, useListSearch as o, useListView as p, ListPager as r, ListDisplayMenu as s, HoverCardSurface as t, isTextEntryContext as u, NAME_MIN_WIDTH_PX as v, MoreButton as w, actionsColumnWidth as x, NameCell as y };
+export { listTableProps as C, listTableFixedProps as S, ListSkeleton as _, ListSearchControl as a, RowSelectCheckbox as b, ListFilterMenu as c, DEFAULT_ORDER as d, FAVORITE_ORDER as f, ListError as g, ListActionsHeader as h, ListCount as i, listControlButtonClasses as l, GroupRow as m, useHoverCard as n, useListSearch as o, useListView as p, ListPager as r, ListDisplayMenu as s, HoverCardSurface as t, isTextEntryContext as u, NAME_MIN_WIDTH_PX as v, actionsColumnWidth as x, NameCell as y };

package/dist/chunks/useCssIsDark-DHr05dG2.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+//#region src/components/useCssIsDark.ts
+function readIsDark() {
+	const scheme = getComputedStyle(document.documentElement).colorScheme;
+	const dark = scheme.includes("dark");
+	if (dark !== scheme.includes("light")) return dark;
+	if (typeof window.matchMedia !== "function") return false;
+	return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+/**
+* Follows the host's CSS color-scheme, the same signal the log viewer's
+* light-dark() palette uses — no provider API involved. For the rare concrete
+* pick (editor themes, image variants) the tokens cannot express.
+*/
+function useCssIsDark() {
+	const [isDark, setIsDark] = useState(readIsDark);
+	useEffect(() => {
+		const update = () => setIsDark(readIsDark());
+		const media = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)") : void 0;
+		media?.addEventListener("change", update);
+		const observer = new MutationObserver(update);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: [
+				"style",
+				"class",
+				"data-theme"
+			]
+		});
+		return () => {
+			media?.removeEventListener("change", update);
+			observer.disconnect();
+		};
+	}, []);
+	return isDark;
+}
+//#endregion
+export { useCssIsDark as t };

package/dist/components/AddMenu.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export interface HeaderAddMenuItem {
+    label: string;
+    icon?: ReactNode;
+    to?: string;
+    onSelect?: () => void;
+    disabled?: boolean;
+    separatorAbove?: boolean;
+}
+export declare function AddMenu({ items, label, buttonClassName, zClassName, children, }: {
+    items: HeaderAddMenuItem[];
+    label: string;
+    buttonClassName?: string;
+    /** Raise above modals when needed (e.g. z-[9999]). */
+    zClassName?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/BareModal.d.ts

@@ -0,0 +1,17 @@
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+/** Omit when the content supplies its own panel styling. */
+export declare const modalPanelClasses = "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl";
+export declare function BareModal({ open, onClose, ariaLabel, className, onPanelKeyDown, onPanelMouseDown, align, preventClose, children, }: {
+    open: boolean;
+    onClose: () => void;
+    ariaLabel?: string;
+    className?: string;
+    onPanelKeyDown?: (e: ReactKeyboardEvent<HTMLDivElement>) => void;
+    onPanelMouseDown?: (e: ReactMouseEvent<HTMLDivElement>) => void;
+    /** Vertical placement of the panel. Defaults to the ds top-anchored position. */
+    align?: 'top' | 'center';
+    /** Block the accidental-dismiss paths (backdrop click, Escape) so typed
+     * input isn't lost. The explicit close controls still work. */
+    preventClose?: boolean;
+    children: ReactNode;
+}): import("react").ReactPortal | null;

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface IBreadcrumbItem {
+    label: string;
+    href?: string;
+    newWindow?: boolean;
+}
+interface BreadcrumbContextType {
+    breadcrumbs: IBreadcrumbItem[];
+    setBreadcrumbs: (breadcrumbs: IBreadcrumbItem[]) => void;
+    rightsideBreadcrumb?: IBreadcrumbItem | null;
+    setRightsideBreadcrumb: (breadcrumb: IBreadcrumbItem | null) => void;
+    hidden: boolean;
+    setHidden: (hidden: boolean) => void;
+    /** Null whenever the breadcrumb strip isn't rendered (classic chrome). */
+    titleActionSlot: HTMLElement | null;
+    setTitleActionSlot: (el: HTMLElement | null) => void;
+    rightActionSlot: HTMLElement | null;
+    setRightActionSlot: (el: HTMLElement | null) => void;
+}
+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 pages that render their own header instead of the breadcrumb strip. */
+export declare function useClearBreadcrumbs(): void;
+export declare function useHideBreadcrumbs(hidden: boolean): void;
+export {};

package/dist/components/ConfirmModal.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+export declare function ConfirmModal({ open, onClose, title, description, children, confirmLabel, onConfirm, confirmDisabled, destructive, align, cancelLabel, closeOnConfirm, }: {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: ReactNode;
+    children?: ReactNode;
+    confirmLabel: string;
+    /** An async handler keeps both buttons disabled until it settles. */
+    onConfirm: () => void | Promise<unknown>;
+    confirmDisabled?: boolean;
+    destructive?: boolean;
+    align?: 'top' | 'center';
+    cancelLabel?: string;
+    /** When false, the dialog stays open after a successful confirm. */
+    closeOnConfirm?: boolean;
+}): import("react").JSX.Element;

package/dist/components/CreateModal.d.ts

@@ -0,0 +1,92 @@
+import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import { type HeaderAddMenuItem } from './AddMenu.js';
+interface CreateModalProps {
+    open: boolean;
+    onClose: () => void;
+    typeIcon?: ReactNode;
+    typeLabel: string;
+    /** Makes the type chip a dropdown to switch between sibling form types. */
+    typeMenu?: HeaderAddMenuItem[];
+    namePlaceholder: string;
+    hideName?: boolean;
+    initialName?: string;
+    showDescription?: boolean;
+    descriptionPlaceholder?: string;
+    submitLabel?: string;
+    submittingLabel?: string;
+    validateName?: (name: string) => string | null;
+    /** Normalize the name as the user types (e.g. strip disallowed characters). */
+    sanitizeName?: (name: string) => string;
+    nameHint?: (name: string) => ReactNode;
+    children?: ReactNode;
+    properties?: ReactNode;
+    advanced?: ReactNode;
+    submitDisabled?: boolean;
+    /** Hide the primary submit button and label the dismiss button "Close". */
+    hideSubmit?: boolean;
+    nameOptional?: boolean;
+    onNameChange?: (name: string) => void;
+    /** Additional unsaved input in `children`/`properties` that should block an
+     * accidental dismiss (name/description/favorite are already tracked). */
+    dirty?: boolean;
+    /** Show a favorite toggle in the footer. */
+    showFavorite?: boolean;
+    /** Resolves true to close the modal, false to keep it open (e.g. on error). */
+    onSubmit: (name: string, description: string, favorite: boolean) => Promise<boolean>;
+}
+/** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
+export declare function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceholder, hideName, initialName, showDescription, descriptionPlaceholder, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled, hideSubmit, nameOptional, onNameChange, dirty, showFavorite, onSubmit, }: CreateModalProps): import("react").JSX.Element;
+/** Labeled single-line input row for the dialog's extra fields. */
+export declare function CreateModalField({ label, tooltip, ...props }: InputHTMLAttributes<HTMLInputElement> & {
+    label: string;
+    /** Help text surfaced via an info icon next to the label. */
+    tooltip?: string;
+}): import("react").JSX.Element;
+/** Labeled multi-line field for credential blobs (JSON keys, PEM keys). */
+export declare function CreateModalTextarea({ label, tooltip, rows, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label: string;
+    /** Help text surfaced via an info icon next to the label. */
+    tooltip?: string;
+}): import("react").JSX.Element;
+/** Labeled input row with typeahead suggestions; free-form values allowed. */
+export declare function CreateModalAutocompleteField({ label, tooltip, value, onChange, options, placeholder, }: {
+    label: string;
+    /** Help text surfaced via an info icon next to the label. */
+    tooltip?: string;
+    value: string;
+    onChange: (value: string) => void;
+    options: string[];
+    placeholder?: string;
+}): import("react").JSX.Element;
+/** Compact property pill with an on/off switch. */
+export declare function CreateModalSwitch({ label, checked, onChange, tooltip, }: {
+    label: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    /** Help text surfaced on hover (explains what the toggle does). */
+    tooltip?: string;
+}): import("react").JSX.Element;
+export interface CreateModalSelectOption {
+    label: string;
+    value: string;
+    /** Small leading icon (e.g. the resource's provider icon). */
+    icon?: ReactNode;
+    /** Category header to group this option under in the dropdown. */
+    group?: string;
+}
+/** Compact property pill with a dropdown of options. Options may carry leading
+ * icons and group headers (e.g. Clusters vs Kubernetes). */
+export declare function CreateModalSelect({ label, icon, value, options, onChange, disabled, disabledHint, tooltip, }: {
+    label: string;
+    icon?: ReactNode;
+    value?: string;
+    options: CreateModalSelectOption[];
+    onChange: (value: string) => void;
+    /** Gray the pill out (e.g. while a prerequisite pill is unset). */
+    disabled?: boolean;
+    /** Shown as the pill's tooltip while disabled (e.g. the prerequisite). */
+    disabledHint?: string;
+    /** Help text surfaced on hover (explains what the pill selects). */
+    tooltip?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/components/Loader.d.ts

@@ -5,6 +5,7 @@ interface LoaderProps {
     color?: string;
     full?: boolean;
     loaderStyle?: React.CSSProperties;
+    variant?: 'spinner' | 'logo';
 }
-export default function Loader({ size, text, textSize, full, color, loaderStyle, }: LoaderProps): import("react").JSX.Element;
+export default function Loader({ size, text, textSize, full, color, loaderStyle, variant, }: LoaderProps): import("react").JSX.Element;
 export {};

package/dist/components/PageHeader.d.ts

@@ -0,0 +1,69 @@
+import type { ComponentType, ReactNode } from 'react';
+import { type RowMenuItem } from '../list/RowContextMenu.js';
+import { type HeaderAddMenuItem } from './AddMenu.js';
+export interface PageHeaderBreadcrumb {
+    label: string;
+    href?: string;
+}
+/** A rendered crumb row entry, as handed to the breadcrumbPin slot. */
+export interface PageHeaderCrumb {
+    label: ReactNode;
+    href?: string;
+}
+/** 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. */
+export declare function HeaderAddButton({ to, onClick, label, word, menu, }: {
+    to?: string;
+    onClick?: () => void;
+    label: string;
+    word?: 'add' | 'create';
+    menu?: HeaderAddMenuItem[];
+}): import("react").JSX.Element;
+export declare function HeaderActionMenu({ items, label, }: {
+    items: HeaderAddMenuItem[];
+    label?: string;
+}): import("react").JSX.Element | null;
+/** The header "…" trigger for a RowMenuItem menu — same rendering (submenus,
+ * destructive styling) as the list pages' right-click context menus. */
+export declare function HeaderRowMenu({ items, label, }: {
+    items: RowMenuItem[];
+    label?: string;
+}): import("react").JSX.Element | null;
+export declare function HeaderEditButton({ to, onClick, label, disabled, tooltip, }: {
+    to?: string;
+    onClick?: () => void;
+    label?: string;
+    disabled?: boolean;
+    tooltip?: string;
+}): import("react").JSX.Element;
+/** Renders nothing when the modern breadcrumb strip isn't mounted (classic chrome or self-headered pages). */
+export declare function BreadcrumbsTitleAction({ children }: {
+    children: ReactNode;
+}): import("react").ReactPortal | null;
+export declare function BreadcrumbsRightAction({ children }: {
+    children: ReactNode;
+}): import("react").ReactPortal | null;
+export declare function BreadcrumbsActionButton({ icon: Icon, label, to, onClick, disabled, tooltip, }: {
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    label: string;
+    to?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    tooltip?: string;
+}): import("react").JSX.Element;
+interface PageHeaderProps {
+    breadcrumbs?: PageHeaderBreadcrumb[];
+    title?: ReactNode;
+    titleAction?: ReactNode;
+    actions?: ReactNode;
+    toolbar?: ReactNode;
+    className?: string;
+    sticky?: boolean;
+    /** Negative offset (e.g. -top-4) prevents rows peeking above the header when the container has top padding. */
+    stickyTopClassName?: string;
+}
+export declare function PageHeader({ breadcrumbs, title, titleAction, actions, toolbar, className, sticky, stickyTopClassName, }: PageHeaderProps): import("react").JSX.Element;
+export {};