@galaxy-io/dls 2.8.1 → 2.10.0

package/dist/inputs/SelectInput.js

@@ -22,13 +22,14 @@ import { rootStyle, useOwnField } from "./internal/ownField.js";
 import { BareFieldContext, useIsBareField } from "./internal/bareField.js";
 import "./internal/innerButton.js";
 import { useDedupedOpen, useRestoreFocusAfterOutsidePress } from "./internal/useComboboxPopover.js";
+import { isSearchMatch, normalizeSearchTerm } from "../utils/search.js";
 /* empty css                      */
 import { styled } from "@linaria/react";
 import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "@linaria/core";
 import { useMergeRefs } from "@floating-ui/react";
-import { CaretDownIcon, CheckIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
+import { CaretDownIcon, CheckIcon, MinusIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 //#region src/inputs/SelectInput.tsx
 /**
@@ -63,7 +64,7 @@ var SelectInputSize = /* @__PURE__ */ function(SelectInputSize) {
 	SelectInputSize["X_LARGE"] = "X_LARGE";
 	return SelectInputSize;
 }({});
-/** Resting fill of the field (Constitution V-A surface set; 1.x `InputVariant` unchanged). */
+/** Resting fill of the field (AGENTS.md "Variant": surface set; 1.x `InputVariant` unchanged). */
 var SelectInputVariant = /* @__PURE__ */ function(SelectInputVariant) {
 	/** `background.base` fill. */
 	SelectInputVariant["BASE"] = "BASE";
@@ -227,7 +228,7 @@ var SELECT_INPUT_VARIANT_TO_CSS_MAP = {
 var GHOST_CSS = "gx-SelectInput-GHOST_CSS-g1yocujd";
 /**
 * Hover on an editable field: `border.hovered` (stronger than `border.primary` in both themes,
-* Constitution III.6).
+* `tokens.test.ts` holds the order).
 */
 var SELECT_INPUT_VARIANT_TO_HOVER_CSS_MAP = {
 	["BASE"]: "gx-SelectInput-BASE-b1uexxly",
@@ -451,22 +452,14 @@ var SELECT_INPUT_SIZE_TO_GROUP_LABEL_CSS_MAP = {
 };
 /** Space above and below the pinned section's separator (Menu's). */
 var SEPARATOR_CSS = "gx-SelectInput-SEPARATOR_CSS-s9yly5q";
-/** Lower-cased, trimmed term (the filter's comparison form; Menu's rule). */
-function normalizeTerm(term) {
-	return term.trim().toLocaleLowerCase();
-}
 /** An option matches when the term is empty or its label (or description) contains it. */
-function matches(term, option) {
-	if (term === "") return true;
-	if (option.label.toLocaleLowerCase().includes(term)) return true;
-	return option.description?.toLocaleLowerCase().includes(term) ?? false;
-}
+var matches = (term, option) => isSearchMatch(term, option.label, option.description);
 /** A printable character that should drive typeahead or the search term. */
 function isPrintableKey(event) {
 	return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
 }
-/** Builds the rows in order: pinned, separator, sections, Create, then the status row. */
-function buildModel({ options, pinnedIds, term, isFiltering, selected, limitReason, createLabel, isLoading, listboxId }) {
+/** Builds the rows in order: select-all, pinned, separator, sections, Create, then the status row. */
+function buildModel({ options, pinnedIds, term, isFiltering, selected, limitReason, createLabel, selectAllLabel, isLoading, listboxId }) {
 	const indexById = /* @__PURE__ */ new Map();
 	options.forEach((option, index) => {
 		if (!indexById.has(option.id)) indexById.set(option.id, index);
@@ -525,7 +518,19 @@ function buildModel({ options, pinnedIds, term, isFiltering, selected, limitReas
 		section.rows.push(makeItem(option, index));
 	});
 	const restCount = sections.reduce((count, section) => count + section.rows.length, 0);
-	const hasSeparator = pinned.length > 0 && restCount > 0;
+	const targets = [...pinned, ...sections.flatMap((section) => section.rows)].filter((item) => !item.isDisabled);
+	const selectedTargetCount = targets.filter((item) => item.isSelected).length;
+	const selectAll = selectAllLabel === null || targets.length === 0 ? null : {
+		kind: "selectAll",
+		key: "select-all",
+		domId: `${listboxId}-select-all`,
+		navIndex: -1,
+		flatIndex: -1,
+		label: selectAllLabel,
+		targetIds: targets.map((item) => item.option.id),
+		state: selectedTargetCount === targets.length ? "checked" : selectedTargetCount > 0 ? "mixed" : "unchecked"
+	};
+	const hasSeparator = (pinned.length > 0 || selectAll !== null) && restCount > 0;
 	const create = createLabel === null ? null : {
 		kind: "create",
 		key: "create",
@@ -542,6 +547,7 @@ function buildModel({ options, pinnedIds, term, isFiltering, selected, limitReas
 		nav.push(item);
 		flat.push(item);
 	};
+	if (selectAll !== null) pushNav(selectAll);
 	for (const item of pinned) pushNav(item);
 	if (hasSeparator) flat.push({
 		kind: "separator",
@@ -558,6 +564,7 @@ function buildModel({ options, pinnedIds, term, isFiltering, selected, limitReas
 		key: status
 	});
 	return {
+		selectAll,
 		pinned,
 		hasSeparator,
 		sections,
@@ -568,9 +575,12 @@ function buildModel({ options, pinnedIds, term, isFiltering, selected, limitReas
 		optionCount: position
 	};
 }
-/** The first enabled row, else the first row (or -1). */
+/**
+* The first enabled option or Create row, else the first row (or -1). Select-all is skipped, so
+* Enter after typing a term picks the first match rather than every match.
+*/
 function firstEnabledIndex(nav) {
-	const index = nav.findIndex((item) => item.kind === "create" || !item.isDisabled);
+	const index = nav.findIndex((item) => item.kind === "create" || item.kind === "option" && !item.isDisabled);
 	return index === -1 ? nav.length > 0 ? 0 : -1 : index;
 }
 /** The first selected option row, or -1. */
@@ -588,7 +598,7 @@ function openIndex(nav, target) {
 }
 /** The field, the trailing parts, the panel and the engine, wired to the nearest Field. */
 function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
-	const { options, selectedIds, isMultiple, onOptionSelect, onClear, renderSelection, getSelectionText, limitReason, onCreate, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, placeholder = "Select an option…", error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, isSearchable = false, onSearch, isClearable = false, isLoading = false, emptyMessage = "No results", onEndReached, renderOption, pinnedIds, placement = Placement.BOTTOM_START, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = rootProps;
+	const { options, selectedIds, isMultiple, onOptionSelect, onClear, renderSelection, getSelectionText, limitReason, onCreate, selectAllLabel, onSelectAll, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, labelTooltip: _labelTooltip, description: _description, placeholder = "Select an option…", error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, isOpen, defaultIsOpen = false, onOpenChange, isSearchable = false, onSearch, isClearable = false, isLoading = false, emptyMessage = "No results", onEndReached, renderOption, pinnedIds, placement = Placement.BOTTOM_START, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = rootProps;
 	const isBare = useIsBareField();
 	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
 		id,
@@ -641,7 +651,7 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 		}
 	}, [unknownKey]);
 	const selectionText = selectedOptions.length > 0 ? getSelectionText(selectedOptions) : "";
-	const term = isSearchable ? normalizeTerm(rawTerm) : "";
+	const term = isSearchable ? normalizeSearchTerm(rawTerm) : "";
 	const trimmedTerm = rawTerm.trim();
 	const isFiltering = isSearchable && onSearch === void 0;
 	const hasExactMatch = trimmedTerm !== "" && options.some((option) => option.label.toLocaleLowerCase() === trimmedTerm.toLocaleLowerCase());
@@ -653,6 +663,7 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 		selected: selectedSet,
 		limitReason,
 		createLabel: onCreate !== void 0 && isSearchable && trimmedTerm !== "" && !hasExactMatch && limitReason === void 0 ? trimmedTerm : null,
+		selectAllLabel: isMultiple && isFilled(selectAllLabel) ? selectAllLabel : null,
 		isLoading,
 		listboxId
 	});
@@ -767,6 +778,10 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 			setRawTerm("");
 			return;
 		}
+		if (item.kind === "selectAll") {
+			onSelectAll?.(item.targetIds, item.state !== "checked");
+			return;
+		}
 		if (item.isDisabled) return;
 		onOptionSelect(item.option.id);
 		if (!isMultiple) close();
@@ -1016,11 +1031,12 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 			children: placeholderText
 		})
 	});
-	/** One option or Create row. */
+	/** One option, Create or select-all row. */
 	const renderNavRow = (item, virtualStart) => {
 		const isActive = item.navIndex === activeIndex;
 		const isRowDisabled = item.kind === "option" && item.isDisabled;
-		const isSelected = item.kind === "option" && item.isSelected;
+		const isSelected = item.kind === "option" && item.isSelected || item.kind === "selectAll" && item.state === "checked";
+		const isMixed = item.kind === "selectAll" && item.state === "mixed";
 		const virtualProps = virtualStart === void 0 ? {} : {
 			"data-index": item.flatIndex,
 			ref: virtualizer.measureElement,
@@ -1031,7 +1047,13 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 			} : {}
 		};
 		let content;
-		if (item.kind === "create") content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
+		if (item.kind === "selectAll") content = /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Text, {
+			as: "span",
+			size: rowTextSize,
+			lineClamp: 1,
+			children: item.label
+		}) });
+		else if (item.kind === "create") content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Icon, {
 			component: PlusIcon,
 			size: rowIconPx,
 			variant: IconVariant.SECONDARY,
@@ -1083,6 +1105,7 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 			id: item.domId,
 			role: "option",
 			"aria-selected": isSelected,
+			...item.kind === "selectAll" ? { "aria-checked": isMixed ? "mixed" : isSelected } : {},
 			...isRowDisabled ? { "aria-disabled": true } : {},
 			onPointerMove: () => {
 				if (item.navIndex !== activeIndex) setActive(item.navIndex, false);
@@ -1091,8 +1114,8 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 			className: cx(SELECT_INPUT_SIZE_TO_ROW_CSS_MAP[size], isActive && ACTIVE_ROW_CSS, isActive && !isRowDisabled && ACTIVE_ROW_PRESS_CSS, isRowDisabled && ROW_DISABLED_CSS, virtualStart !== void 0 && VIRTUAL_ROW_CSS),
 			children: [content, /* @__PURE__ */ jsx(CheckSlot, {
 				className: SELECT_INPUT_SIZE_TO_CHECK_SLOT_CSS_MAP[size],
-				children: isSelected && /* @__PURE__ */ jsx(Icon, {
-					component: CheckIcon,
+				children: (isSelected || isMixed) && /* @__PURE__ */ jsx(Icon, {
+					component: isMixed ? MinusIcon : CheckIcon,
 					size: rowIconPx,
 					variant: isRowDisabled ? IconVariant.DISABLED : IconVariant.PRIMARY,
 					"aria-hidden": true
@@ -1168,7 +1191,8 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 			};
 			switch (item.kind) {
 				case "option":
-				case "create": return renderNavRow(item, virtualItem.start);
+				case "create":
+				case "selectAll": return renderNavRow(item, virtualItem.start);
 				case "heading": return renderHeading(item, virtual);
 				case "separator": return renderSeparator(item.key, virtual);
 				default: return renderStatus(item.kind, virtual);
@@ -1176,6 +1200,7 @@ function SelectInputFrame({ rootProps, forwardedRef, isRoot }) {
 		})
 	});
 	else listContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		model.selectAll !== null && renderNavRow(model.selectAll),
 		model.pinned.map((item) => renderNavRow(item)),
 		model.hasSeparator && renderSeparator("separator"),
 		model.sections.map((section) => section.heading === null ? section.rows.map((item) => renderNavRow(item)) : /* @__PURE__ */ jsxs(GroupRoot, {
@@ -1351,6 +1376,8 @@ var SelectInputInner = forwardRef(function SelectInput({ value, defaultValue = n
 		getSelectionText: (selected) => selected[0]?.label ?? "",
 		limitReason: void 0,
 		onCreate: void 0,
+		selectAllLabel: void 0,
+		onSelectAll: void 0,
 		...className === void 0 ? {} : { className },
 		...style === void 0 ? {} : { style }
 	});

package/dist/inputs/internal/selectAll.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @internal The selection MultiSelectInput's select-all row produces. Private on purpose (an
+ * `internal/` module: built, never a package export).
+ */
+/**
+ * The next selection after the select-all row is chosen. `shouldSelect` appends the covered ids
+ * that are not yet selected, in display order, after the current selection (selection order is
+ * kept) and stops at `limit` (`maxSelected`); otherwise it removes every covered id. Ids outside
+ * `ids` (options hidden by the search term) are never touched.
+ */
+export declare function applySelectAll<TId extends string>(current: readonly TId[], ids: readonly TId[], shouldSelect: boolean, limit?: number): TId[];

package/dist/inputs/internal/selectAll.js

@@ -0,0 +1,28 @@
+//#region src/inputs/internal/selectAll.ts
+/**
+* @internal The selection MultiSelectInput's select-all row produces. Private on purpose (an
+* `internal/` module: built, never a package export).
+*/
+/**
+* The next selection after the select-all row is chosen. `shouldSelect` appends the covered ids
+* that are not yet selected, in display order, after the current selection (selection order is
+* kept) and stops at `limit` (`maxSelected`); otherwise it removes every covered id. Ids outside
+* `ids` (options hidden by the search term) are never touched.
+*/
+function applySelectAll(current, ids, shouldSelect, limit) {
+	if (!shouldSelect) {
+		const covered = new Set(ids);
+		return current.filter((id) => !covered.has(id));
+	}
+	const next = [...current];
+	const selected = new Set(current);
+	for (const id of ids) {
+		if (limit !== void 0 && next.length >= limit) break;
+		if (selected.has(id)) continue;
+		selected.add(id);
+		next.push(id);
+	}
+	return next;
+}
+//#endregion
+export { applySelectAll };

package/dist/json/JsonViewer.js

@@ -7,8 +7,9 @@ import { ButtonSize, ButtonVariant } from "../buttons/Button.js";
 import CopyButton from "../buttons/CopyButton.js";
 import Span, { SpanVariant } from "../text/Span.js";
 import { InputSize, InputVariant } from "../inputs/Input.js";
-import SearchInput from "../inputs/SearchInput.js";
 import CollapseMotion from "../transform/internal/CollapseMotion.js";
+import { isSearchMatch, normalizeSearchTerm } from "../utils/search.js";
+import SearchInput from "../inputs/SearchInput.js";
 import { TREE_ROW_CSS, TREE_ROW_LABEL_CSS, TREE_ROW_LEVEL_VARIABLE, TREE_ROW_SIZE_TO_CARET_PX_MAP, TREE_ROW_SIZE_TO_CSS_MAP, TREE_ROW_SIZE_TO_TEXT_SIZE_MAP, TreeRowCaretSlot, TreeRowSize } from "../tree/treeRow.js";
 /* empty css                     */
 import { styled } from "@linaria/react";
@@ -161,12 +162,12 @@ var searchTextOf = (node) => {
 	const display = displayOf(node.value, node.kind);
 	return node.kind === "STRING" ? display.slice(1, -1) : display;
 };
-/** Whether a node's key (not an index) or primitive value contains the lower-cased term. */
-var isMatch = (node, term) => typeof node.key === "string" && node.key.toLowerCase().includes(term) || (searchTextOf(node)?.toLowerCase().includes(term) ?? false);
+/** Whether a node's key (not an index) or primitive value contains the term (the shared search rule). */
+var isMatch = (node, term) => isSearchMatch(term, typeof node.key === "string" ? node.key : void 0, searchTextOf(node));
 /** Splits `text` around case-insensitive occurrences of `term`, marking each. */
 function highlight(text, term) {
 	if (term === "") return text;
-	const lower = text.toLowerCase();
+	const lower = text.toLocaleLowerCase();
 	const parts = [];
 	let from = 0;
 	let at = lower.indexOf(term, from);
@@ -198,11 +199,11 @@ var JsonViewer = forwardRef(function JsonViewer(props, ref) {
 	const [expanded, setExpanded] = useState(() => new Set(allNodes.filter((node) => node.isContainer && node.level <= defaultExpandedDepth).map((node) => node.path)));
 	const [term, setTerm] = useState("");
 	const preSearchExpanded = useRef(null);
-	const lowerTerm = term.toLowerCase();
+	const lowerTerm = normalizeSearchTerm(term);
 	const matchCount = useMemo(() => lowerTerm === "" ? 0 : allNodes.filter((node) => isMatch(node, lowerTerm)).length, [allNodes, lowerTerm]);
 	/** Search drives expansion: the ancestors of every match open; clearing restores the set. */
 	const handleSearch = (next) => {
-		const lower = next.toLowerCase();
+		const lower = normalizeSearchTerm(next);
 		if (lower === "") {
 			if (preSearchExpanded.current !== null) setExpanded(preSearchExpanded.current);
 			preSearchExpanded.current = null;

package/dist/layout/AppFrame.d.ts

@@ -0,0 +1,20 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** The sidebar column's width in px, the same in every Galaxy module (Filament, Alchemy). */
+export declare const APP_FRAME_SIDEBAR_WIDTH = 240;
+export interface AppFrameProps extends AriaAttributes {
+    /** The sidebar column's content: a `SidebarNav` with no `header`. It fills the column. */
+    sidebar: ReactNode;
+    /** The page, usually a `PageLayout`. The column is a flex column that never overflows the frame. */
+    children: ReactNode;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A Galaxy module's frame: the sidebar column, a hairline, and the page. */
+declare const AppFrame: import("react").ForwardRefExoticComponent<AppFrameProps & import("react").RefAttributes<HTMLDivElement>>;
+export default AppFrame;

package/dist/layout/AppFrame.js

@@ -0,0 +1,71 @@
+import { Orientation } from "../theme/enums.js";
+import Divider from "./Divider.js";
+/* empty css                   */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/layout/AppFrame.tsx
+/**
+* The product frame of a Galaxy module: a fixed sidebar column, a vertical hairline, and a content
+* column that holds the page. It fills the box the host gives it (`height: 100%`) on
+* `background.primary`, the sidebar's own fill, and clips: the page owns the one scrolling region.
+*
+* It is one of two frame systems, and they never mix:
+*
+* - **AppFrame + PageLayout + a header-less SidebarNav** (Filament, Alchemy): a module inside the
+*   Galaxy host. The sidebar column is inset `8 8 0` so, with SidebarNav's own 8px, the first item
+*   sits 16px from the top and both sides and lines up with the host's Home button. PageLayout's
+*   64px header carries the page title.
+* - **Topbar + a SidebarNav `header`** (the app template, standalone apps): both rows are 48px, so
+*   their bottom hairlines meet. That frame is composed from `Flex`, `SidebarNav` and `Topbar`.
+*
+* A SidebarNav `header` inside AppFrame would sit 8px below a Topbar line it never meets, so pass
+* it a `footer` and its items only, and `hasDividers={false}` when the footer should run on
+* without a line.
+*
+* There is no width prop (layout props live on Box, Flex, FlexItem and Grid): the sidebar is
+* `APP_FRAME_SIDEBAR_WIDTH`, 240px, the width every Galaxy module uses. Not a page (`PageLayout`),
+* not resizable panes (`ResizablePanels`).
+*/
+/** The sidebar column's width in px, the same in every Galaxy module (Filament, Alchemy). */
+var APP_FRAME_SIDEBAR_WIDTH = 240;
+/** The frame: a row that fills the host's box on the sidebar's fill, clipped. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-AppFrame-r1x0tg2p",
+	propsAsIs: false
+});
+/**
+* The sidebar column: fixed width, inset `8 8 0`. With SidebarNav's own 8px the first item sits
+* 16px from the top and both sides, on the Galaxy host's Home button (the host contract), and the
+* footer runs to the bottom edge.
+*/
+var Sidebar = /*#__PURE__*/ styled("div")({
+	name: "Sidebar",
+	class: "gx-AppFrame-Sidebar-s1mhncm4",
+	propsAsIs: false
+});
+/** The page column: takes the rest of the row and may shrink to nothing, so the page clips, not the frame. */
+var Content = /*#__PURE__*/ styled("div")({
+	name: "Content",
+	class: "gx-AppFrame-Content-c1eeh9po",
+	propsAsIs: false
+});
+/** A Galaxy module's frame: the sidebar column, a hairline, and the page. */
+var AppFrame = forwardRef(function AppFrame({ sidebar, children, id, className, style, ...rest }, ref) {
+	return /* @__PURE__ */ jsxs(Root, {
+		...rest,
+		ref,
+		id,
+		className,
+		style,
+		children: [
+			/* @__PURE__ */ jsx(Sidebar, { children: sidebar }),
+			/* @__PURE__ */ jsx(Divider, { orientation: Orientation.VERTICAL }),
+			/* @__PURE__ */ jsx(Content, { children })
+		]
+	});
+});
+AppFrame.displayName = "AppFrame";
+//#endregion
+export { APP_FRAME_SIDEBAR_WIDTH, AppFrame as default };

package/dist/layout/EmptyLayout.d.ts

@@ -0,0 +1,53 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Where the region sits (canonical rungs, subset); one-to-one with `EmptyStateSize`. */
+export declare enum EmptyLayoutSize {
+    /** A small card or a side panel: EmptyState `SMALL`. */
+    SMALL = "SMALL",
+    /** A panel or a page section. The default: EmptyState `MEDIUM`. */
+    MEDIUM = "MEDIUM",
+    /** A whole page body: EmptyState `LARGE`. */
+    LARGE = "LARGE"
+}
+/** The mark above the header: an icon in a tile. */
+interface EmptyLayoutIconProps {
+    /** Phosphor icon component (`TrayIcon`, not `<TrayIcon />`) shown in a small tile above the header. Not with `graphic`. */
+    icon?: PhosphorIcon;
+    /** A node of the app's own above the header, with no tile around it. Not with `icon`. */
+    graphic?: undefined;
+}
+/** An app illustration instead of the icon tile. */
+interface EmptyLayoutGraphicProps {
+    /** Phosphor icon component (`TrayIcon`, not `<TrayIcon />`) shown in a small tile above the header. Not with `graphic`. */
+    icon?: undefined;
+    /** A node of the app's own above the header, with no tile around it. Not with `icon`. */
+    graphic: ReactNode;
+}
+interface EmptyLayoutBaseProps extends AriaAttributes {
+    /** One line that says what would be here ("No pipelines yet"). */
+    header: string;
+    /** Why it is empty or what to do next. Up to three short lines. */
+    description?: string;
+    /** The way out: usually one `PRIMARY` and one `SECONDARY` `Button`. */
+    actions?: ReactNode;
+    /**
+     * Where the region sits; picks the EmptyState size one-to-one.
+     * @default EmptyLayoutSize.MEDIUM
+     */
+    size?: EmptyLayoutSize;
+    /** Pass `"status"` when the region empties because of something the user did (a search), so it is announced. */
+    role?: "status";
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** EmptyLayout props. Passing both `icon` and `graphic` is a type error, as on EmptyState. */
+export type EmptyLayoutProps = EmptyLayoutBaseProps & (EmptyLayoutIconProps | EmptyLayoutGraphicProps);
+/** A region with nothing to show: an EmptyState, filled and centred. */
+declare const EmptyLayout: import("react").ForwardRefExoticComponent<EmptyLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+export default EmptyLayout;

package/dist/layout/EmptyLayout.js

@@ -0,0 +1,59 @@
+import EmptyState, { EmptyStateSize } from "../feedback/EmptyState.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/EmptyLayout.tsx
+/**
+* A region with nothing to show, filled and centred: `EmptyState` sized for where it sits, in a
+* box that fills its parent (a page body, a panel, a table area) and centres it both ways. A
+* preset over EmptyState, the `Modal → ConfirmDialog` pattern: EmptyState centres only across, and
+* a non-layout component may not take a height, so this is the one place that fills.
+*
+* Siblings: `ErrorLayout` (the region failed), `PendingLayout` (the region is loading). Inside a
+* table body, a chart or a card, use `EmptyState` itself: those already size the region.
+*/
+/** Where the region sits (canonical rungs, subset); one-to-one with `EmptyStateSize`. */
+var EmptyLayoutSize = /* @__PURE__ */ function(EmptyLayoutSize) {
+	/** A small card or a side panel: EmptyState `SMALL`. */
+	EmptyLayoutSize["SMALL"] = "SMALL";
+	/** A panel or a page section. The default: EmptyState `MEDIUM`. */
+	EmptyLayoutSize["MEDIUM"] = "MEDIUM";
+	/** A whole page body: EmptyState `LARGE`. */
+	EmptyLayoutSize["LARGE"] = "LARGE";
+	return EmptyLayoutSize;
+}({});
+/** Fills the region and centres the empty state in it. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-EmptyLayout-rxz77xy",
+	propsAsIs: false
+});
+/** One-to-one: the layout's size is the empty state's. */
+var EMPTY_LAYOUT_SIZE_TO_EMPTY_STATE_SIZE_MAP = {
+	["SMALL"]: EmptyStateSize.SMALL,
+	["MEDIUM"]: EmptyStateSize.MEDIUM,
+	["LARGE"]: EmptyStateSize.LARGE
+};
+/** A region with nothing to show: an EmptyState, filled and centred. */
+var EmptyLayout = forwardRef(function EmptyLayout({ header, description, actions, icon, graphic, size = "MEDIUM", role, id, className, style, ...rest }, ref) {
+	const mark = graphic === void 0 ? icon === void 0 ? {} : { icon } : { graphic };
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(EmptyState, {
+			...mark,
+			size: EMPTY_LAYOUT_SIZE_TO_EMPTY_STATE_SIZE_MAP[size],
+			header,
+			...description === void 0 ? {} : { description },
+			...actions === void 0 ? {} : { actions },
+			...role === void 0 ? {} : { role }
+		})
+	});
+});
+EmptyLayout.displayName = "EmptyLayout";
+//#endregion
+export { EmptyLayoutSize, EmptyLayout as default };

package/dist/layout/ErrorLayout.d.ts

@@ -0,0 +1,42 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** Where the region sits (canonical rungs, subset); one-to-one with `EmptyStateSize`. */
+export declare enum ErrorLayoutSize {
+    /** A small card or a side panel: EmptyState `SMALL`, caption detail. */
+    SMALL = "SMALL",
+    /** A panel or a page section. The default: EmptyState `MEDIUM`, caption detail. */
+    MEDIUM = "MEDIUM",
+    /** A whole page body: EmptyState `LARGE`, `body_sm` detail. */
+    LARGE = "LARGE"
+}
+export interface ErrorLayoutProps extends AriaAttributes {
+    /** One line that says what failed ("Couldn't load pipelines"). */
+    header: string;
+    /** What the reader can do about it, in plain words. */
+    description?: string;
+    /** The raw error message, under the state in mono, selectable. For a message worth copying, not for prose. */
+    detail?: string;
+    /** The way out: a "Try again" `Button`, and a link to help when there is one. */
+    actions?: ReactNode;
+    /**
+     * Replaces the icon in the tile. Pass the component (`PlugsIcon`), not an element.
+     * @default WarningCircleIcon
+     */
+    icon?: PhosphorIcon;
+    /**
+     * Where the region sits; picks the EmptyState size one-to-one.
+     * @default ErrorLayoutSize.MEDIUM
+     */
+    size?: ErrorLayoutSize;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A region that failed: an error EmptyState with an optional detail, filled, centred and announced. */
+declare const ErrorLayout: import("react").ForwardRefExoticComponent<ErrorLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ErrorLayout;

package/dist/layout/ErrorLayout.js

@@ -0,0 +1,60 @@
+import { EmptyStateSize } from "../feedback/EmptyState.js";
+import { ErrorStateContent } from "./internal/errorState.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/layout/ErrorLayout.tsx
+/**
+* A region that failed to load, filled and centred: an `ERROR` EmptyState (a `WarningCircleIcon`
+* tile by default) with the way out in `actions`, and an optional `detail` (the raw message, mono
+* and selectable, so it can be copied into a bug report). The stack is `role="alert"`, so a region
+* that fails after it was on screen is announced. A preset over EmptyState, the
+* `Modal → ConfirmDialog` pattern; an empty table body shows the same error state.
+*
+* Siblings: `EmptyLayout` (nothing to show), `PendingLayout` (still loading). A problem with the
+* content on screen, which stays readable, is an `Alert`.
+*/
+/** Where the region sits (canonical rungs, subset); one-to-one with `EmptyStateSize`. */
+var ErrorLayoutSize = /* @__PURE__ */ function(ErrorLayoutSize) {
+	/** A small card or a side panel: EmptyState `SMALL`, caption detail. */
+	ErrorLayoutSize["SMALL"] = "SMALL";
+	/** A panel or a page section. The default: EmptyState `MEDIUM`, caption detail. */
+	ErrorLayoutSize["MEDIUM"] = "MEDIUM";
+	/** A whole page body: EmptyState `LARGE`, `body_sm` detail. */
+	ErrorLayoutSize["LARGE"] = "LARGE";
+	return ErrorLayoutSize;
+}({});
+/** Fills the region and centres the error state in it. */
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-ErrorLayout-r17y69m",
+	propsAsIs: false
+});
+/** One-to-one: the layout's size is the empty state's. */
+var ERROR_LAYOUT_SIZE_TO_EMPTY_STATE_SIZE_MAP = {
+	["SMALL"]: EmptyStateSize.SMALL,
+	["MEDIUM"]: EmptyStateSize.MEDIUM,
+	["LARGE"]: EmptyStateSize.LARGE
+};
+/** A region that failed: an error EmptyState with an optional detail, filled, centred and announced. */
+var ErrorLayout = forwardRef(function ErrorLayout({ header, description, detail, actions, icon, size = "MEDIUM", id, className, style, ...rest }, ref) {
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		id,
+		className,
+		style,
+		children: /* @__PURE__ */ jsx(ErrorStateContent, {
+			size: ERROR_LAYOUT_SIZE_TO_EMPTY_STATE_SIZE_MAP[size],
+			icon,
+			header,
+			description,
+			detail,
+			actions
+		})
+	});
+});
+ErrorLayout.displayName = "ErrorLayout";
+//#endregion
+export { ErrorLayoutSize, ErrorLayout as default };

package/dist/layout/PageLayout.d.ts

@@ -0,0 +1,26 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+export interface PageLayoutProps extends AriaAttributes {
+    /** The page title. A string renders as an `h1` (`HEADING_MD`, medium, one line); a node renders as is. It names the `<main>` landmark. */
+    header: ReactNode;
+    /** The page's actions, at the end of the header row: one `PRIMARY` button at most, the rest `SECONDARY` or `TERTIARY`. */
+    actions?: ReactNode;
+    /** A strip under the header's hairline, above the tabs: an `Alert isBanner`. It stays put while the body scrolls. */
+    banner?: ReactNode;
+    /** The page's sibling views: a `Tabs` row, under the banner. */
+    tabs?: ReactNode;
+    /** A padded row of filters, a search or view switches, under the tabs, with a hairline under it. */
+    toolbar?: ReactNode;
+    /** The page body, in a `<main>` on `background.base` that never scrolls: wrap scrolling content in a `ScrollArea`. */
+    children: ReactNode;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** One page of a Galaxy module: header, hairline, banner, tabs, toolbar, then the body. */
+declare const PageLayout: import("react").ForwardRefExoticComponent<PageLayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+export default PageLayout;