@camstack/ui-library 1.2.372 → 1.2.373

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.373] - 2026-11-02
+
+### Changed
+
+- Device export table: selectors on the left with the search on the right, searchable Role and Integration filters showing display names, a bulk bar with select all / none, and a multi export that now lands every selected device
+
 ## [1.2.372] - 2026-11-02
 
 ### Changed

package/dist/composites/device-list/generic-mode.d.ts

@@ -94,6 +94,19 @@ export interface DeviceListGenericProps<T> {
 	readonly toolbar?: ReactNode | ((ctx: {
 		readonly filtered: readonly T[];
 	}) => ReactNode);
+	/**
+	* Extra selectors rendered on the LEFT, before the type filter, so every
+	* selector sits in one group and the search box stays alone on the right.
+	* Wraps onto their own row on a narrow screen.
+	*/
+	readonly filters?: ReactNode;
+	/**
+	* Full-width row between the filter row and the table (a bulk-action bar).
+	* A function receives the rows the search and filters currently leave.
+	*/
+	readonly belowFilters?: ReactNode | ((ctx: {
+		readonly filtered: readonly T[];
+	}) => ReactNode);
 }
 /**
 * Generic render-prop list: search + pagination chrome shared with the device

package/dist/composites/export-bulk-selection.d.ts

@@ -7,12 +7,25 @@
 * the only filter, D869).
 */
 import type { MultiSelectOption } from "./device-list/multi-select";
+import { type DeviceIntegrationRef } from "./device-list/device-integration";
 /** The slice of a device row the bulk filters read. */
 export interface ExportFilterable {
 	readonly id: number;
 	readonly addonId: string;
 	readonly role?: string | null;
+	/** The integration that created the device (`integrations.list` `id`). */
+	readonly integrationId?: string | null;
 }
+/** The slice of an `integrations.list` row the provider filter reads. */
+export interface ExportIntegration extends DeviceIntegrationRef {
+	readonly name: string;
+}
+/**
+* The provider filter value of a row: the id of the integration it belongs to,
+* or `addon:<addonId>` when no registered integration claims it (or the list
+* has not answered). The raw id is never shown — `providerFilterOptions` names it.
+*/
+export declare function providerFilterId(device: ExportFilterable, integrations: readonly ExportIntegration[] | null | undefined): string;
 export interface ExportBulkFilters {
 	/** Keep rows whose role is one of these; empty = no role filter. */
 	readonly roles: readonly string[];
@@ -24,11 +37,17 @@ export declare const NO_ROLE_FILTER_ID = "(none)";
 export declare const NO_EXPORT_FILTERS: ExportBulkFilters;
 export declare function roleFilterId(device: ExportFilterable): string;
 /** The rows the role / provider filters leave. */
-export declare function applyExportFilters<T extends ExportFilterable>(devices: readonly T[], filters: ExportBulkFilters): readonly T[];
-/** Distinct roles present among the rows (a roleless row counts as "(none)"). */
-export declare function roleFilterOptions(devices: readonly ExportFilterable[]): readonly MultiSelectOption[];
-/** Distinct provider addons present among the rows. */
-export declare function providerFilterOptions(devices: readonly ExportFilterable[]): readonly MultiSelectOption[];
+export declare function applyExportFilters<T extends ExportFilterable>(devices: readonly T[], filters: ExportBulkFilters, integrations?: readonly ExportIntegration[] | null): readonly T[];
+/**
+* Distinct roles present among the rows, named by `labelOf` (a roleless row is
+* `NO_ROLE_FILTER_ID`).
+*/
+export declare function roleFilterOptions(devices: readonly ExportFilterable[], labelOf?: (roleId: string) => string): readonly MultiSelectOption[];
+/**
+* Distinct integrations present among the rows, by NAME. A device no
+* registered integration claims is listed under its addon id.
+*/
+export declare function providerFilterOptions(devices: readonly ExportFilterable[], integrations?: readonly ExportIntegration[] | null): readonly MultiSelectOption[];
 /** `current` plus every shown row. */
 export declare function selectShown(current: ReadonlySet<string>, shown: readonly ExportFilterable[]): ReadonlySet<string>;
 /** `current` minus every shown row; selections outside the filter are kept. */

package/dist/index.cjs

@@ -62173,7 +62173,7 @@ var FIXED_PAGE_SIZE = 100;
 */
 function GenericModeList(props) {
 	const t = useUiText();
-	const { items, getKey, getSearchText, renderItem, getFilterType, mapFilterOption, filterOptions, filterLabel = "Type", initialTypeFilters = [], columns, renderExpanded, isExpanded, rowClassName, onRowClick, isLoading = false, searchPlaceholder = "Search", emptyLabel = "No items found.", pageSize: fixedPageSize = FIXED_PAGE_SIZE, pageSizeSelector, toolbar } = props;
+	const { items, getKey, getSearchText, renderItem, getFilterType, mapFilterOption, filterOptions, filterLabel = "Type", initialTypeFilters = [], columns, renderExpanded, isExpanded, rowClassName, onRowClick, isLoading = false, searchPlaceholder = "Search", emptyLabel = "No items found.", pageSize: fixedPageSize = FIXED_PAGE_SIZE, pageSizeSelector, toolbar, filters, belowFilters } = props;
 	const [chosenPageSize, setChosenPageSize] = usePersistedPageSize(pageSizeSelector ?? {
 		storageKey: null,
 		options: [fixedPageSize],
@@ -62241,16 +62241,22 @@ function GenericModeList(props) {
 		className: "flex flex-col gap-3 h-full min-h-0",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between gap-3 flex-wrap shrink-0",
-				children: [getFilterType && typeOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveTypeFilter, {
-					label: filterLabel,
-					options: typeOptions,
-					selected: typeFilters,
-					onChange: setTypeFilters
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: "flex items-center gap-2",
+				className: "flex items-start justify-between gap-3 flex-wrap shrink-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex min-w-0 flex-1 flex-wrap items-start gap-2",
+					children: [filters, getFilterType && typeOptions.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "flex min-w-40 flex-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResponsiveTypeFilter, {
+							label: filterLabel,
+							options: typeOptions,
+							selected: typeFilters,
+							onChange: setTypeFilters
+						})
+					}) : null]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2 max-sm:w-full",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "relative",
+						className: "relative max-sm:flex-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-foreground-subtle pointer-events-none" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 							ref: searchRef,
 							type: "text",
@@ -62258,11 +62264,12 @@ function GenericModeList(props) {
 							onChange: (e) => setSearchInput(e.target.value),
 							placeholder: searchPlaceholder,
 							"aria-label": searchPlaceholder,
-							className: "h-7 pl-7 pr-2.5 rounded-md border border-border bg-surface text-[11px] text-foreground placeholder:text-foreground-subtle/60 focus:outline-none focus:ring-1 focus:ring-primary/40 w-56"
+							className: "h-7 pl-7 pr-2.5 rounded-md border border-border bg-surface text-[11px] text-foreground placeholder:text-foreground-subtle/60 focus:outline-none focus:ring-1 focus:ring-primary/40 w-56 max-sm:w-full"
 						})]
 					}), typeof toolbar === "function" ? toolbar({ filtered }) : toolbar]
 				})]
 			}),
+			typeof belowFilters === "function" ? belowFilters({ filtered }) : belowFilters,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "flex-1 min-h-0 overflow-y-auto",
 				children: isLoading && totalItems === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -62393,6 +62400,17 @@ function DeviceList(props) {
 }
 //#endregion
 //#region src/composites/export-bulk-selection.ts
+/** The provider filter value of a device no registered integration claims. */
+var UNREGISTERED_PREFIX = "addon:";
+/**
+* The provider filter value of a row: the id of the integration it belongs to,
+* or `addon:<addonId>` when no registered integration claims it (or the list
+* has not answered). The raw id is never shown — `providerFilterOptions` names it.
+*/
+function providerFilterId(device, integrations) {
+	const resolved = deviceIntegrationResolver(integrations)(device);
+	return resolved.kind === "resolved" ? resolved.integration.id : `${UNREGISTERED_PREFIX}${device.addonId}`;
+}
 /** The role filter value of a row that has no role. */
 var NO_ROLE_FILTER_ID = "(none)";
 var NO_EXPORT_FILTERS = {
@@ -62404,24 +62422,40 @@ function roleFilterId(device) {
 	return role === null || role === void 0 || role === "" ? NO_ROLE_FILTER_ID : role;
 }
 /** The rows the role / provider filters leave. */
-function applyExportFilters(devices, filters) {
+function applyExportFilters(devices, filters, integrations) {
 	const roles = new Set(filters.roles);
 	const providers = new Set(filters.providers);
-	return devices.filter((d) => (roles.size === 0 || roles.has(roleFilterId(d))) && (providers.size === 0 || providers.has(d.addonId)));
+	return devices.filter((d) => (roles.size === 0 || roles.has(roleFilterId(d))) && (providers.size === 0 || providers.has(providerFilterId(d, integrations))));
 }
-function distinctOptions(values) {
-	return [...new Set(values)].toSorted().map((id) => ({
-		id,
-		label: id
-	}));
+function sortedByLabel(options) {
+	return options.toSorted((a, b) => a.label.localeCompare(b.label));
 }
-/** Distinct roles present among the rows (a roleless row counts as "(none)"). */
-function roleFilterOptions(devices) {
-	return distinctOptions(devices.map(roleFilterId));
+/**
+* Distinct roles present among the rows, named by `labelOf` (a roleless row is
+* `NO_ROLE_FILTER_ID`).
+*/
+function roleFilterOptions(devices, labelOf = (id) => id) {
+	return sortedByLabel([...new Set(devices.map(roleFilterId))].map((id) => ({
+		id,
+		label: labelOf(id)
+	})));
 }
-/** Distinct provider addons present among the rows. */
-function providerFilterOptions(devices) {
-	return distinctOptions(devices.map((d) => d.addonId));
+/**
+* Distinct integrations present among the rows, by NAME. A device no
+* registered integration claims is listed under its addon id.
+*/
+function providerFilterOptions(devices, integrations) {
+	const nameById = new Map((integrations ?? []).map((i) => [i.id, i.name]));
+	const options = /* @__PURE__ */ new Map();
+	for (const d of devices) {
+		const id = providerFilterId(d, integrations);
+		if (options.has(id)) continue;
+		options.set(id, nameById.get(id) ?? d.addonId);
+	}
+	return sortedByLabel([...options].map(([id, label]) => ({
+		id,
+		label
+	})));
 }
 /** `current` plus every shown row. */
 function selectShown(current, shown) {
@@ -62577,9 +62611,15 @@ var DeviceItemRowSchema = zod.z.object({
 	disabled: zod.z.boolean(),
 	parentDeviceId: zod.z.number().nullable(),
 	role: zod.z.string().nullable().optional(),
+	integrationId: zod.z.string().nullable().optional(),
 	features: zod.z.array(zod.z.string()).optional(),
 	isCamera: zod.z.boolean().optional()
 });
+var IntegrationRowsSchema = zod.z.array(zod.z.object({
+	id: zod.z.string(),
+	addonId: zod.z.string(),
+	name: zod.z.string()
+}));
 var SupportedKindsSchema = zod.z.array(zod.z.string());
 var STATUS_POLL_INTERVAL_MS = 1e4;
 /** Where the viewer's "rows per page" choice for this table is remembered. */
@@ -62836,6 +62876,11 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		addonId
 	}, { retry: false });
 	const devicesQuery = useDeviceManagerListAll({ projection: "slim" }, { refetchInterval: FLEET_POLL_INTERVAL_MS });
+	const integrationsQuery = useIntegrationsList(void 0);
+	const integrations = (0, react$1.useMemo)(() => {
+		const parsed = IntegrationRowsSchema.safeParse(integrationsQuery.data);
+		return parsed.success ? parsed.data : null;
+	}, [integrationsQuery.data]);
 	const entityKindsQuery = useDeviceExportListSupportedEntityKinds({
 		nodeId: "hub",
 		addonId
@@ -62953,28 +62998,28 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		const succeeded = [];
 		const failed = [];
 		const mutation = action === "expose" ? exposeMutation : unexposeMutation;
-		(await Promise.allSettled(deviceIds.map((deviceId) => mutation.mutateAsync({
-			deviceId,
-			nodeId: "hub",
-			addonId
-		})))).forEach((result, index) => {
-			const deviceId = deviceIds[index] ?? "";
+		for (const deviceId of deviceIds) {
 			const label = labelFor(deviceId);
-			if (result.status === "fulfilled") {
+			try {
+				await mutation.mutateAsync({
+					deviceId,
+					nodeId: "hub",
+					addonId
+				});
 				succeeded.push(label);
-				return;
+			} catch (reason) {
+				const message = reason instanceof Error ? reason.message : String(reason);
+				console.error(`[device-export] ${action} failed`, {
+					tags: { deviceId: Number.parseInt(deviceId, 10) },
+					addonId,
+					error: message
+				});
+				failed.push({
+					label,
+					message
+				});
 			}
-			const message = result.reason instanceof Error ? result.reason.message : String(result.reason);
-			console.error(`[device-export] ${action} failed`, {
-				tags: { deviceId: Number.parseInt(deviceId, 10) },
-				addonId,
-				error: message
-			});
-			failed.push({
-				label,
-				message
-			});
-		});
+		}
 		setOutcome({
 			action,
 			total: deviceIds.length,
@@ -63035,9 +63080,19 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		running
 	]);
 	const [bulkFilters, setBulkFilters] = (0, react$1.useState)(NO_EXPORT_FILTERS);
-	const roleOptions = (0, react$1.useMemo)(() => roleFilterOptions(candidateDevices), [candidateDevices]);
-	const providerOptions = (0, react$1.useMemo)(() => providerFilterOptions(candidateDevices), [candidateDevices]);
-	const shownDevices = (0, react$1.useMemo)(() => applyExportFilters(candidateDevices, bulkFilters), [candidateDevices, bulkFilters]);
+	const roleOptions = (0, react$1.useMemo)(() => roleFilterOptions(candidateDevices, (id) => id === "(none)" ? t("uiLibrary.deviceExport.noRole", "No role") : deviceRoleMetaOf(id, t).label).map((o) => ({
+		value: o.id,
+		label: o.label
+	})), [candidateDevices, t]);
+	const providerOptions = (0, react$1.useMemo)(() => providerFilterOptions(candidateDevices, integrations).map((o) => ({
+		value: o.id,
+		label: o.label
+	})), [candidateDevices, integrations]);
+	const shownDevices = (0, react$1.useMemo)(() => applyExportFilters(candidateDevices, bulkFilters, integrations), [
+		candidateDevices,
+		bulkFilters,
+		integrations
+	]);
 	const shownRows = (0, react$1.useMemo)(() => {
 		const deviceRows = shownDevices.map((device) => ({
 			kind: "device",
@@ -63150,72 +63205,86 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		toggleSelection,
 		t
 	]);
-	const renderToolbar = (0, react$1.useCallback)(({ filtered: filteredRows }) => {
+	const filterSelectors = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [roleOptions.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "min-w-36 flex-1 sm:w-44 sm:flex-none",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionSelect, {
+			mode: "multi",
+			searchable: true,
+			options: roleOptions,
+			value: bulkFilters.roles,
+			onChange: setRoleFilter,
+			placeholder: t("uiLibrary.deviceExport.filterRole", "Role"),
+			emptyMessage: t("uiLibrary.deviceExport.filterNoOption", "No match."),
+			testId: "export-filter-role"
+		})
+	}), providerOptions.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "min-w-36 flex-1 sm:w-44 sm:flex-none",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionSelect, {
+			mode: "multi",
+			searchable: true,
+			options: providerOptions,
+			value: bulkFilters.providers,
+			onChange: setProviderFilter,
+			placeholder: t("uiLibrary.deviceExport.filterIntegration", "Integration"),
+			emptyMessage: t("uiLibrary.deviceExport.filterNoOption", "No match."),
+			testId: "export-filter-integration"
+		})
+	})] });
+	const renderBulkBar = (0, react$1.useCallback)(({ filtered: filteredRows }) => {
 		const filtered = filteredRows.flatMap((row) => row.kind === "device" ? [row.device] : []);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "inline-flex flex-wrap items-center gap-1.5",
+		if (filtered.length === 0 && selectedIds.size === 0) return null;
+		const hasSelection = selectedIds.size > 0;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			role: "toolbar",
+			"aria-label": t("uiLibrary.deviceExport.bulkBar", "Bulk export"),
+			className: `flex flex-wrap items-center gap-2 rounded-md border px-2.5 py-1.5 ${hasSelection ? "border-primary/40 bg-primary/10" : "border-border bg-surface"}`,
 			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiSelectDropdown, {
-					label: t("uiLibrary.deviceExport.filterRole", "Role"),
-					options: roleOptions,
-					selected: bulkFilters.roles,
-					onChange: setRoleFilter
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiSelectDropdown, {
-					label: t("uiLibrary.deviceExport.filterProvider", "Provider"),
-					options: providerOptions,
-					selected: bulkFilters.providers,
-					onChange: setProviderFilter
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...hasSelection ? { "data-testid": "export-selection-count" } : {},
+					className: `text-[11px] font-medium ${hasSelection ? "text-foreground" : "text-foreground-subtle"}`,
+					children: hasSelection ? t("uiLibrary.deviceExport.selected", "{{count}} selected", { count: selectedIds.size }) : t("uiLibrary.deviceExport.noneSelected", "None selected")
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 					size: "sm",
-					variant: "secondary",
+					variant: "ghost",
 					disabled: filtered.length === 0,
 					onClick: () => setSelectedIds((current) => selectShown(current, filtered)),
-					children: t("uiLibrary.deviceExport.selectShown", "Select {{count}} shown", { count: filtered.length })
+					children: t("uiLibrary.deviceExport.selectShown", "Select all {{count}} shown", { count: filtered.length })
 				}),
-				selectedIds.size > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				hasSelection && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						size: "sm",
 						variant: "ghost",
 						onClick: () => setSelectedIds((current) => deselectShown(current, filtered)),
 						children: t("uiLibrary.deviceExport.deselectShown", "Deselect shown")
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						"data-testid": "export-selection-count",
-						className: "text-[11px] text-foreground-subtle",
-						children: t("uiLibrary.deviceExport.selected", "{{count}} selected", { count: selectedIds.size })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-						size: "sm",
-						variant: "primary",
-						disabled: busy,
-						onClick: exposeSelected,
-						children: t("uiLibrary.deviceExport.exposeN", "Expose {{count}}", { count: selectedIds.size })
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-						size: "sm",
-						variant: "secondary",
-						disabled: busy,
-						onClick: unexposeSelected,
-						children: t("uiLibrary.deviceExport.unexposeN", "Unexpose {{count}}", { count: selectedIds.size })
-					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						size: "sm",
 						variant: "ghost",
 						onClick: clearSelection,
 						children: t("uiLibrary.deviceExport.clear", "Clear")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "ml-auto inline-flex flex-wrap items-center gap-1.5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							size: "sm",
+							variant: "primary",
+							disabled: busy,
+							onClick: exposeSelected,
+							children: t("uiLibrary.deviceExport.exposeN", "Expose {{count}}", { count: selectedIds.size })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+							size: "sm",
+							variant: "secondary",
+							disabled: busy,
+							onClick: unexposeSelected,
+							children: t("uiLibrary.deviceExport.unexposeN", "Unexpose {{count}}", { count: selectedIds.size })
+						})]
 					})
 				] })
 			]
 		});
 	}, [
 		t,
-		roleOptions,
-		providerOptions,
-		bulkFilters,
-		setRoleFilter,
-		setProviderFilter,
 		selectedIds.size,
 		busy,
 		exposeSelected,
@@ -63270,7 +63339,8 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 					filterOptions: typeFilterOptions,
 					columns,
 					onRowClick: onOpenDevice ? onRowClick : void 0,
-					toolbar: renderToolbar,
+					filters: filterSelectors,
+					belowFilters: renderBulkBar,
 					pageSizeSelector: DEVICE_EXPORT_PAGE_SIZE,
 					searchPlaceholder: t("uiLibrary.deviceExport.search", "Search by name or stableId"),
 					emptyLabel: t("uiLibrary.deviceExport.noMatch", "No device matches this search.")
@@ -72899,7 +72969,7 @@ function TimelineSlider({ markers, bands = [], selectedId = null, step = 5, aria
 }
 //#endregion
 //#region src/ui-library-version.ts
-var uiLibraryVersion = "1.2.372";
+var uiLibraryVersion = "1.2.373";
 //#endregion
 //#region src/hooks/use-account-unit-preferences.ts
 /**

package/dist/index.js

@@ -62149,7 +62149,7 @@ var FIXED_PAGE_SIZE = 100;
 */
 function GenericModeList(props) {
 	const t = useUiText();
-	const { items, getKey, getSearchText, renderItem, getFilterType, mapFilterOption, filterOptions, filterLabel = "Type", initialTypeFilters = [], columns, renderExpanded, isExpanded, rowClassName, onRowClick, isLoading = false, searchPlaceholder = "Search", emptyLabel = "No items found.", pageSize: fixedPageSize = FIXED_PAGE_SIZE, pageSizeSelector, toolbar } = props;
+	const { items, getKey, getSearchText, renderItem, getFilterType, mapFilterOption, filterOptions, filterLabel = "Type", initialTypeFilters = [], columns, renderExpanded, isExpanded, rowClassName, onRowClick, isLoading = false, searchPlaceholder = "Search", emptyLabel = "No items found.", pageSize: fixedPageSize = FIXED_PAGE_SIZE, pageSizeSelector, toolbar, filters, belowFilters } = props;
 	const [chosenPageSize, setChosenPageSize] = usePersistedPageSize(pageSizeSelector ?? {
 		storageKey: null,
 		options: [fixedPageSize],
@@ -62217,16 +62217,22 @@ function GenericModeList(props) {
 		className: "flex flex-col gap-3 h-full min-h-0",
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center justify-between gap-3 flex-wrap shrink-0",
-				children: [getFilterType && typeOptions.length > 0 ? /* @__PURE__ */ jsx(ResponsiveTypeFilter, {
-					label: filterLabel,
-					options: typeOptions,
-					selected: typeFilters,
-					onChange: setTypeFilters
-				}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-2",
+				className: "flex items-start justify-between gap-3 flex-wrap shrink-0",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-wrap items-start gap-2",
+					children: [filters, getFilterType && typeOptions.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "flex min-w-40 flex-1",
+						children: /* @__PURE__ */ jsx(ResponsiveTypeFilter, {
+							label: filterLabel,
+							options: typeOptions,
+							selected: typeFilters,
+							onChange: setTypeFilters
+						})
+					}) : null]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 max-sm:w-full",
 					children: [/* @__PURE__ */ jsxs("div", {
-						className: "relative",
+						className: "relative max-sm:flex-1",
 						children: [/* @__PURE__ */ jsx(Search, { className: "absolute left-2 top-1/2 -translate-y-1/2 h-3 w-3 text-foreground-subtle pointer-events-none" }), /* @__PURE__ */ jsx("input", {
 							ref: searchRef,
 							type: "text",
@@ -62234,11 +62240,12 @@ function GenericModeList(props) {
 							onChange: (e) => setSearchInput(e.target.value),
 							placeholder: searchPlaceholder,
 							"aria-label": searchPlaceholder,
-							className: "h-7 pl-7 pr-2.5 rounded-md border border-border bg-surface text-[11px] text-foreground placeholder:text-foreground-subtle/60 focus:outline-none focus:ring-1 focus:ring-primary/40 w-56"
+							className: "h-7 pl-7 pr-2.5 rounded-md border border-border bg-surface text-[11px] text-foreground placeholder:text-foreground-subtle/60 focus:outline-none focus:ring-1 focus:ring-primary/40 w-56 max-sm:w-full"
 						})]
 					}), typeof toolbar === "function" ? toolbar({ filtered }) : toolbar]
 				})]
 			}),
+			typeof belowFilters === "function" ? belowFilters({ filtered }) : belowFilters,
 			/* @__PURE__ */ jsx("div", {
 				className: "flex-1 min-h-0 overflow-y-auto",
 				children: isLoading && totalItems === 0 ? /* @__PURE__ */ jsx("div", {
@@ -62369,6 +62376,17 @@ function DeviceList(props) {
 }
 //#endregion
 //#region src/composites/export-bulk-selection.ts
+/** The provider filter value of a device no registered integration claims. */
+var UNREGISTERED_PREFIX = "addon:";
+/**
+* The provider filter value of a row: the id of the integration it belongs to,
+* or `addon:<addonId>` when no registered integration claims it (or the list
+* has not answered). The raw id is never shown — `providerFilterOptions` names it.
+*/
+function providerFilterId(device, integrations) {
+	const resolved = deviceIntegrationResolver(integrations)(device);
+	return resolved.kind === "resolved" ? resolved.integration.id : `${UNREGISTERED_PREFIX}${device.addonId}`;
+}
 /** The role filter value of a row that has no role. */
 var NO_ROLE_FILTER_ID = "(none)";
 var NO_EXPORT_FILTERS = {
@@ -62380,24 +62398,40 @@ function roleFilterId(device) {
 	return role === null || role === void 0 || role === "" ? NO_ROLE_FILTER_ID : role;
 }
 /** The rows the role / provider filters leave. */
-function applyExportFilters(devices, filters) {
+function applyExportFilters(devices, filters, integrations) {
 	const roles = new Set(filters.roles);
 	const providers = new Set(filters.providers);
-	return devices.filter((d) => (roles.size === 0 || roles.has(roleFilterId(d))) && (providers.size === 0 || providers.has(d.addonId)));
+	return devices.filter((d) => (roles.size === 0 || roles.has(roleFilterId(d))) && (providers.size === 0 || providers.has(providerFilterId(d, integrations))));
 }
-function distinctOptions(values) {
-	return [...new Set(values)].toSorted().map((id) => ({
-		id,
-		label: id
-	}));
+function sortedByLabel(options) {
+	return options.toSorted((a, b) => a.label.localeCompare(b.label));
 }
-/** Distinct roles present among the rows (a roleless row counts as "(none)"). */
-function roleFilterOptions(devices) {
-	return distinctOptions(devices.map(roleFilterId));
+/**
+* Distinct roles present among the rows, named by `labelOf` (a roleless row is
+* `NO_ROLE_FILTER_ID`).
+*/
+function roleFilterOptions(devices, labelOf = (id) => id) {
+	return sortedByLabel([...new Set(devices.map(roleFilterId))].map((id) => ({
+		id,
+		label: labelOf(id)
+	})));
 }
-/** Distinct provider addons present among the rows. */
-function providerFilterOptions(devices) {
-	return distinctOptions(devices.map((d) => d.addonId));
+/**
+* Distinct integrations present among the rows, by NAME. A device no
+* registered integration claims is listed under its addon id.
+*/
+function providerFilterOptions(devices, integrations) {
+	const nameById = new Map((integrations ?? []).map((i) => [i.id, i.name]));
+	const options = /* @__PURE__ */ new Map();
+	for (const d of devices) {
+		const id = providerFilterId(d, integrations);
+		if (options.has(id)) continue;
+		options.set(id, nameById.get(id) ?? d.addonId);
+	}
+	return sortedByLabel([...options].map(([id, label]) => ({
+		id,
+		label
+	})));
 }
 /** `current` plus every shown row. */
 function selectShown(current, shown) {
@@ -62553,9 +62587,15 @@ var DeviceItemRowSchema = z.object({
 	disabled: z.boolean(),
 	parentDeviceId: z.number().nullable(),
 	role: z.string().nullable().optional(),
+	integrationId: z.string().nullable().optional(),
 	features: z.array(z.string()).optional(),
 	isCamera: z.boolean().optional()
 });
+var IntegrationRowsSchema = z.array(z.object({
+	id: z.string(),
+	addonId: z.string(),
+	name: z.string()
+}));
 var SupportedKindsSchema = z.array(z.string());
 var STATUS_POLL_INTERVAL_MS = 1e4;
 /** Where the viewer's "rows per page" choice for this table is remembered. */
@@ -62812,6 +62852,11 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		addonId
 	}, { retry: false });
 	const devicesQuery = useDeviceManagerListAll({ projection: "slim" }, { refetchInterval: FLEET_POLL_INTERVAL_MS });
+	const integrationsQuery = useIntegrationsList(void 0);
+	const integrations = useMemo(() => {
+		const parsed = IntegrationRowsSchema.safeParse(integrationsQuery.data);
+		return parsed.success ? parsed.data : null;
+	}, [integrationsQuery.data]);
 	const entityKindsQuery = useDeviceExportListSupportedEntityKinds({
 		nodeId: "hub",
 		addonId
@@ -62929,28 +62974,28 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		const succeeded = [];
 		const failed = [];
 		const mutation = action === "expose" ? exposeMutation : unexposeMutation;
-		(await Promise.allSettled(deviceIds.map((deviceId) => mutation.mutateAsync({
-			deviceId,
-			nodeId: "hub",
-			addonId
-		})))).forEach((result, index) => {
-			const deviceId = deviceIds[index] ?? "";
+		for (const deviceId of deviceIds) {
 			const label = labelFor(deviceId);
-			if (result.status === "fulfilled") {
+			try {
+				await mutation.mutateAsync({
+					deviceId,
+					nodeId: "hub",
+					addonId
+				});
 				succeeded.push(label);
-				return;
+			} catch (reason) {
+				const message = reason instanceof Error ? reason.message : String(reason);
+				console.error(`[device-export] ${action} failed`, {
+					tags: { deviceId: Number.parseInt(deviceId, 10) },
+					addonId,
+					error: message
+				});
+				failed.push({
+					label,
+					message
+				});
 			}
-			const message = result.reason instanceof Error ? result.reason.message : String(result.reason);
-			console.error(`[device-export] ${action} failed`, {
-				tags: { deviceId: Number.parseInt(deviceId, 10) },
-				addonId,
-				error: message
-			});
-			failed.push({
-				label,
-				message
-			});
-		});
+		}
 		setOutcome({
 			action,
 			total: deviceIds.length,
@@ -63011,9 +63056,19 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		running
 	]);
 	const [bulkFilters, setBulkFilters] = useState(NO_EXPORT_FILTERS);
-	const roleOptions = useMemo(() => roleFilterOptions(candidateDevices), [candidateDevices]);
-	const providerOptions = useMemo(() => providerFilterOptions(candidateDevices), [candidateDevices]);
-	const shownDevices = useMemo(() => applyExportFilters(candidateDevices, bulkFilters), [candidateDevices, bulkFilters]);
+	const roleOptions = useMemo(() => roleFilterOptions(candidateDevices, (id) => id === "(none)" ? t("uiLibrary.deviceExport.noRole", "No role") : deviceRoleMetaOf(id, t).label).map((o) => ({
+		value: o.id,
+		label: o.label
+	})), [candidateDevices, t]);
+	const providerOptions = useMemo(() => providerFilterOptions(candidateDevices, integrations).map((o) => ({
+		value: o.id,
+		label: o.label
+	})), [candidateDevices, integrations]);
+	const shownDevices = useMemo(() => applyExportFilters(candidateDevices, bulkFilters, integrations), [
+		candidateDevices,
+		bulkFilters,
+		integrations
+	]);
 	const shownRows = useMemo(() => {
 		const deviceRows = shownDevices.map((device) => ({
 			kind: "device",
@@ -63126,72 +63181,86 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 		toggleSelection,
 		t
 	]);
-	const renderToolbar = useCallback(({ filtered: filteredRows }) => {
+	const filterSelectors = /* @__PURE__ */ jsxs(Fragment$1, { children: [roleOptions.length > 1 && /* @__PURE__ */ jsx("div", {
+		className: "min-w-36 flex-1 sm:w-44 sm:flex-none",
+		children: /* @__PURE__ */ jsx(OptionSelect, {
+			mode: "multi",
+			searchable: true,
+			options: roleOptions,
+			value: bulkFilters.roles,
+			onChange: setRoleFilter,
+			placeholder: t("uiLibrary.deviceExport.filterRole", "Role"),
+			emptyMessage: t("uiLibrary.deviceExport.filterNoOption", "No match."),
+			testId: "export-filter-role"
+		})
+	}), providerOptions.length > 1 && /* @__PURE__ */ jsx("div", {
+		className: "min-w-36 flex-1 sm:w-44 sm:flex-none",
+		children: /* @__PURE__ */ jsx(OptionSelect, {
+			mode: "multi",
+			searchable: true,
+			options: providerOptions,
+			value: bulkFilters.providers,
+			onChange: setProviderFilter,
+			placeholder: t("uiLibrary.deviceExport.filterIntegration", "Integration"),
+			emptyMessage: t("uiLibrary.deviceExport.filterNoOption", "No match."),
+			testId: "export-filter-integration"
+		})
+	})] });
+	const renderBulkBar = useCallback(({ filtered: filteredRows }) => {
 		const filtered = filteredRows.flatMap((row) => row.kind === "device" ? [row.device] : []);
-		return /* @__PURE__ */ jsxs("span", {
-			className: "inline-flex flex-wrap items-center gap-1.5",
+		if (filtered.length === 0 && selectedIds.size === 0) return null;
+		const hasSelection = selectedIds.size > 0;
+		return /* @__PURE__ */ jsxs("div", {
+			role: "toolbar",
+			"aria-label": t("uiLibrary.deviceExport.bulkBar", "Bulk export"),
+			className: `flex flex-wrap items-center gap-2 rounded-md border px-2.5 py-1.5 ${hasSelection ? "border-primary/40 bg-primary/10" : "border-border bg-surface"}`,
 			children: [
-				/* @__PURE__ */ jsx(MultiSelectDropdown, {
-					label: t("uiLibrary.deviceExport.filterRole", "Role"),
-					options: roleOptions,
-					selected: bulkFilters.roles,
-					onChange: setRoleFilter
-				}),
-				/* @__PURE__ */ jsx(MultiSelectDropdown, {
-					label: t("uiLibrary.deviceExport.filterProvider", "Provider"),
-					options: providerOptions,
-					selected: bulkFilters.providers,
-					onChange: setProviderFilter
+				/* @__PURE__ */ jsx("span", {
+					...hasSelection ? { "data-testid": "export-selection-count" } : {},
+					className: `text-[11px] font-medium ${hasSelection ? "text-foreground" : "text-foreground-subtle"}`,
+					children: hasSelection ? t("uiLibrary.deviceExport.selected", "{{count}} selected", { count: selectedIds.size }) : t("uiLibrary.deviceExport.noneSelected", "None selected")
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					size: "sm",
-					variant: "secondary",
+					variant: "ghost",
 					disabled: filtered.length === 0,
 					onClick: () => setSelectedIds((current) => selectShown(current, filtered)),
-					children: t("uiLibrary.deviceExport.selectShown", "Select {{count}} shown", { count: filtered.length })
+					children: t("uiLibrary.deviceExport.selectShown", "Select all {{count}} shown", { count: filtered.length })
 				}),
-				selectedIds.size > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				hasSelection && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					/* @__PURE__ */ jsx(Button, {
 						size: "sm",
 						variant: "ghost",
 						onClick: () => setSelectedIds((current) => deselectShown(current, filtered)),
 						children: t("uiLibrary.deviceExport.deselectShown", "Deselect shown")
 					}),
-					/* @__PURE__ */ jsx("span", {
-						"data-testid": "export-selection-count",
-						className: "text-[11px] text-foreground-subtle",
-						children: t("uiLibrary.deviceExport.selected", "{{count}} selected", { count: selectedIds.size })
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						variant: "primary",
-						disabled: busy,
-						onClick: exposeSelected,
-						children: t("uiLibrary.deviceExport.exposeN", "Expose {{count}}", { count: selectedIds.size })
-					}),
-					/* @__PURE__ */ jsx(Button, {
-						size: "sm",
-						variant: "secondary",
-						disabled: busy,
-						onClick: unexposeSelected,
-						children: t("uiLibrary.deviceExport.unexposeN", "Unexpose {{count}}", { count: selectedIds.size })
-					}),
 					/* @__PURE__ */ jsx(Button, {
 						size: "sm",
 						variant: "ghost",
 						onClick: clearSelection,
 						children: t("uiLibrary.deviceExport.clear", "Clear")
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "ml-auto inline-flex flex-wrap items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "primary",
+							disabled: busy,
+							onClick: exposeSelected,
+							children: t("uiLibrary.deviceExport.exposeN", "Expose {{count}}", { count: selectedIds.size })
+						}), /* @__PURE__ */ jsx(Button, {
+							size: "sm",
+							variant: "secondary",
+							disabled: busy,
+							onClick: unexposeSelected,
+							children: t("uiLibrary.deviceExport.unexposeN", "Unexpose {{count}}", { count: selectedIds.size })
+						})]
 					})
 				] })
 			]
 		});
 	}, [
 		t,
-		roleOptions,
-		providerOptions,
-		bulkFilters,
-		setRoleFilter,
-		setProviderFilter,
 		selectedIds.size,
 		busy,
 		exposeSelected,
@@ -63246,7 +63315,8 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 					filterOptions: typeFilterOptions,
 					columns,
 					onRowClick: onOpenDevice ? onRowClick : void 0,
-					toolbar: renderToolbar,
+					filters: filterSelectors,
+					belowFilters: renderBulkBar,
 					pageSizeSelector: DEVICE_EXPORT_PAGE_SIZE,
 					searchPlaceholder: t("uiLibrary.deviceExport.search", "Search by name or stableId"),
 					emptyLabel: t("uiLibrary.deviceExport.noMatch", "No device matches this search.")
@@ -72875,7 +72945,7 @@ function TimelineSlider({ markers, bands = [], selectedId = null, step = 5, aria
 }
 //#endregion
 //#region src/ui-library-version.ts
-var uiLibraryVersion = "1.2.372";
+var uiLibraryVersion = "1.2.373";
 //#endregion
 //#region src/hooks/use-account-unit-preferences.ts
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.372",
+  "version": "1.2.373",
   "repository": {
     "type": "git",
     "url": "https://github.com/camstack/server.git",