@camstack/ui-library 1.2.372 → 1.2.374

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.2.374] - 2026-11-02
+
+### Changed
+
+- A select that discovers its options can be an optional picker ('Default' choice, 'missing' label for a gone value); the device export table's Type filter is searchable like Role and Integration.
+- A searchable select no longer throws after it closes on a page that was just left.
+
+## [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

@@ -71,6 +71,14 @@ export interface DeviceListGenericProps<T> {
 	/** Label for the type multi-select trigger. Default 'Type'. */
 	readonly filterLabel?: string;
 	/**
+	* Render the type filter as the library's searchable multi `OptionSelect`
+	* (typing narrows the list), sized like a sibling selector in `filters`,
+	* instead of the chips / compact dropdown. Default false.
+	*/
+	readonly searchableTypeFilter?: boolean;
+	/** `data-testid` of the searchable type filter. Default `device-list-filter-type`. */
+	readonly typeFilterTestId?: string;
+	/**
 	* Initial type-filter selection. Empty (default) = no filter. Used once at
 	* mount — later changes to this prop are ignored (local state owns it).
 	*/
@@ -94,6 +102,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/generated/system-hooks.d.ts

@@ -953,6 +953,8 @@ export declare const useIntegrationInstancesGetInstance: typeof trpc.integration
 export declare const useIntegrationInstancesCreateInstance: typeof trpc.integrationInstances.createInstance.useMutation;
 /** Generated alias around `trpc.integrationInstances.updateInstance.useMutation`. */
 export declare const useIntegrationInstancesUpdateInstance: typeof trpc.integrationInstances.updateInstance.useMutation;
+/** Generated alias around `trpc.integrationInstances.setInstanceEnabled.useMutation`. */
+export declare const useIntegrationInstancesSetInstanceEnabled: typeof trpc.integrationInstances.setInstanceEnabled.useMutation;
 /** Generated alias around `trpc.integrationInstances.deleteInstance.useMutation`. */
 export declare const useIntegrationInstancesDeleteInstance: typeof trpc.integrationInstances.deleteInstance.useMutation;
 /** Generated alias around `trpc.integrationInstances.testInstance.useMutation`. */

package/dist/index.cjs

@@ -11668,6 +11668,8 @@ var useIntegrationInstancesGetInstance = /*#__PURE__*/ alias(() => trpc.integrat
 var useIntegrationInstancesCreateInstance = /*#__PURE__*/ alias(() => trpc.integrationInstances.createInstance.useMutation);
 /** Generated alias around `trpc.integrationInstances.updateInstance.useMutation`. */
 var useIntegrationInstancesUpdateInstance = /*#__PURE__*/ alias(() => trpc.integrationInstances.updateInstance.useMutation);
+/** Generated alias around `trpc.integrationInstances.setInstanceEnabled.useMutation`. */
+var useIntegrationInstancesSetInstanceEnabled = /*#__PURE__*/ alias(() => trpc.integrationInstances.setInstanceEnabled.useMutation);
 /** Generated alias around `trpc.integrationInstances.deleteInstance.useMutation`. */
 var useIntegrationInstancesDeleteInstance = /*#__PURE__*/ alias(() => trpc.integrationInstances.deleteInstance.useMutation);
 /** Generated alias around `trpc.integrationInstances.testInstance.useMutation`. */
@@ -14365,6 +14367,9 @@ function OptionSelect(props) {
 	const triggerRef = (0, react$1.useRef)(null);
 	const listboxRef = (0, react$1.useRef)(null);
 	const blurTimer = (0, react$1.useRef)(null);
+	(0, react$1.useEffect)(() => () => {
+		if (blurTimer.current) clearTimeout(blurTimer.current);
+	}, []);
 	const computeListboxCoords = () => {
 		const trigger = triggerRef.current;
 		if (trigger === null) return null;
@@ -32221,6 +32226,42 @@ function ConfigDiscoveredSelectControl({ field, values, value, onChange, disable
 	const { ready, settled, query, found } = useDiscoveredOptions(field, values);
 	const current = value === void 0 || value === null ? "" : String(value);
 	const disabledNow = disabled || field.disabled;
+	const noneLabel = field.discoverOptions?.noneLabel;
+	const answered = ready && settled && !query.isLoading && !query.isFetching && !query.isError && query.data !== void 0;
+	if (noneLabel !== void 0) {
+		const known = current === "" || found.some((option) => option.value === current);
+		const missingLabel = field.discoverOptions?.missingLabel;
+		const staleLabel = answered && missingLabel !== void 0 ? `${missingLabel} ${current}` : current;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "space-y-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionSelect, {
+				mode: "single",
+				singleDisplay: "field",
+				searchable: true,
+				disabled: disabledNow,
+				value: current,
+				onChange,
+				placeholder: noneLabel,
+				options: [
+					{
+						value: "",
+						label: noneLabel
+					},
+					...known ? [] : [{
+						value: current,
+						label: staleLabel
+					}],
+					...found
+				],
+				testId: controlId,
+				optionTestIdPrefix: `${controlId}-option`
+			}), answered ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				"data-testid": `${controlId}-status`,
+				className: `text-[11px] ${query.isError ? "text-danger" : "text-foreground-subtle"}`,
+				children: discoveryStatus(t, ready, settled, query)
+			})]
+		});
+	}
 	if (found.length > 0) {
 		const known = found.some((option) => option.value === current);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionSelect, {
@@ -32239,11 +32280,7 @@ function ConfigDiscoveredSelectControl({ field, values, value, onChange, disable
 			optionTestIdPrefix: `${controlId}-option`
 		});
 	}
-	let status;
-	if (!ready) status = t("uiLibrary.configFormField.discoverNotReady", "Fill in the fields above to load the list, or type the value.");
-	else if (!settled || query.isLoading || query.isFetching) status = t("uiLibrary.configFormField.loadingOptions", "Loading options…");
-	else if (query.isError) status = t("uiLibrary.configFormField.discoverFailed", "Could not load the list: {{message}}. Type the value instead.", { message: query.error instanceof Error ? query.error.message : String(query.error) });
-	else status = t("uiLibrary.configFormField.discoverEmpty", "Nothing was found. Type the value instead.");
+	const status = discoveryStatus(t, ready, settled, query);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "space-y-1",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Input, {
@@ -32259,6 +32296,13 @@ function ConfigDiscoveredSelectControl({ field, values, value, onChange, disable
 		})]
 	});
 }
+/** The one line that says why the list is not (yet) offered. */
+function discoveryStatus(t, ready, settled, query) {
+	if (!ready) return t("uiLibrary.configFormField.discoverNotReady", "Fill in the fields above to load the list, or type the value.");
+	if (!settled || query.isLoading || query.isFetching) return t("uiLibrary.configFormField.loadingOptions", "Loading options…");
+	if (query.isError) return t("uiLibrary.configFormField.discoverFailed", "Could not load the list: {{message}}. Type the value instead.", { message: query.error instanceof Error ? query.error.message : String(query.error) });
+	return t("uiLibrary.configFormField.discoverEmpty", "Nothing was found. Type the value instead.");
+}
 //#endregion
 //#region src/composites/config-form-field.tsx
 var INPUT_CLASS = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
@@ -62173,7 +62217,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", searchableTypeFilter = false, typeFilterTestId = "device-list-filter-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 +62285,37 @@ 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 && searchableTypeFilter ? /* @__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: typeOptions.map((o) => ({
+								value: o.id,
+								label: o.label
+							})),
+							value: typeFilters,
+							onChange: setTypeFilters,
+							placeholder: filterLabel,
+							emptyMessage: t("uiLibrary.deviceExport.filterNoOption", "No match."),
+							testId: typeFilterTestId
+						})
+					}) : 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 +62323,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 +62459,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 +62481,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 +62670,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 +62935,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 +63057,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 +63139,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 +63264,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,
@@ -63268,9 +63396,13 @@ function DeviceExportPanel({ addonId, onOpenDevice, showSetup = true }) {
 					getSearchText,
 					getFilterType,
 					filterOptions: typeFilterOptions,
+					filterLabel: t("uiLibrary.deviceExport.filterType", "Type"),
+					searchableTypeFilter: true,
+					typeFilterTestId: "export-filter-type",
 					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 +73031,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.374";
 //#endregion
 //#region src/hooks/use-account-unit-preferences.ts
 /**
@@ -75369,6 +75501,7 @@ exports.useIntegrationInstancesDescribe = useIntegrationInstancesDescribe;
 exports.useIntegrationInstancesGetInstance = useIntegrationInstancesGetInstance;
 exports.useIntegrationInstancesInstanceFormSchema = useIntegrationInstancesInstanceFormSchema;
 exports.useIntegrationInstancesListInstances = useIntegrationInstancesListInstances;
+exports.useIntegrationInstancesSetInstanceEnabled = useIntegrationInstancesSetInstanceEnabled;
 exports.useIntegrationInstancesTestInstance = useIntegrationInstancesTestInstance;
 exports.useIntegrationInstancesUpdateInstance = useIntegrationInstancesUpdateInstance;
 exports.useIntegrationsCreate = useIntegrationsCreate;