@camstack/ui-library 1.2.112 → 1.2.114

package/dist/composites/device-export-panel.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-import { UseDeviceProxyTrpc } from '../hooks/use-device-proxy';
 export interface DeviceExportPanelProps {
     /**
      * Addon id of the export addon whose surface is rendered. Used for
@@ -8,16 +7,18 @@ export interface DeviceExportPanelProps {
      */
     readonly addonId: string;
     /**
-     * tRPC client passed straight to the shared `<DeviceList>` so its
-     * per-row capability atoms (snapshot, switch, …) work. Supply
-     * `system.trpcClient` from `useSystem()` at the mount site.
+     * Optional callback to open a device-details page.
+     *
+     * There is no `trpc` prop. It existed to feed the device-mode list's per-row
+     * capability atoms (snapshot, switch, live control); this surface renders
+     * type + name + export and asks a device nothing, so the prop was removed
+     * rather than left as a parameter every caller still threads and nothing
+     * reads.
      */
-    readonly trpc: UseDeviceProxyTrpc;
-    /** Optional callback to open a device-details page. */
     readonly onOpenDevice?: (deviceId: string) => void;
 }
 /**
  * Generic device-export panel. Addon-agnostic — only the `device-export`
  * cap drives it.
  */
-export declare function DeviceExportPanel({ addonId, trpc, onOpenDevice, }: DeviceExportPanelProps): ReactElement;
+export declare function DeviceExportPanel({ addonId, onOpenDevice }: DeviceExportPanelProps): ReactElement;

package/dist/composites/device-select-filter.d.ts

@@ -20,6 +20,12 @@ export interface DeviceSelectCandidate {
     readonly name: string;
     readonly location?: string | null;
     readonly features?: readonly string[];
+    /** Name of the container this device lives in, when it has one. */
+    readonly parentName?: string | null;
+}
+/** A picker option that still knows where its device is. */
+export interface DeviceOption extends ConfigOption {
+    readonly location: string | null;
 }
 /**
  * Does a device satisfy the filter?
@@ -37,13 +43,33 @@ export declare function deviceOptionLabel(device: DeviceSelectCandidate): string
  * (value = the device id as a string). Sorted case-insensitively by label so
  * the picker order is stable.
  */
-export declare function devicesToOptions(devices: readonly DeviceSelectCandidate[], filter?: DeviceSelectFilter): ConfigOption[];
+/** `Location · type · in Container` — the parts a name alone does not say. */
+export declare function deviceOptionDescription(device: DeviceSelectCandidate): string;
+export declare function devicesToOptions(devices: readonly DeviceSelectCandidate[], filter?: DeviceSelectFilter): DeviceOption[];
+export interface DeviceFacets {
+    readonly locations: readonly string[];
+    readonly types: readonly string[];
+}
+/** The distinct locations and types on offer — the chips above the search. */
+export declare function deviceFacets(devices: readonly DeviceSelectCandidate[]): DeviceFacets;
+export interface FacetSelection {
+    readonly location?: string;
+    readonly type?: string;
+}
+/** Every chosen facet must match; an unchosen one matches everything. */
+export declare function matchesFacets(device: DeviceSelectCandidate, facets: FacetSelection): boolean;
+export interface SuggestedPartition<T extends DeviceOption> {
+    readonly suggested: readonly T[];
+    readonly others: readonly T[];
+}
+/** The devices sharing `location` come first — suggested, never pre-linked. */
+export declare function partitionSuggested<T extends DeviceOption>(options: readonly T[], location: string | null | undefined): SuggestedPartition<T>;
 /**
  * Free-text option filter — case-insensitive AND over whitespace tokens, each
  * matched against the option's `value` + `label` (so a device is found by name,
  * id, or location). An empty query returns every option in order.
  */
-export declare function filterDeviceOptions(options: readonly ConfigOption[], query: string): ConfigOption[];
+export declare function filterDeviceOptions<T extends ConfigOption>(options: readonly T[], query: string): T[];
 /**
  * Resolve the currently-selected values into options IN SELECTION ORDER (so
  * chips stay stable while searching). A selected value with no matching option

package/dist/index.cjs

@@ -6903,6 +6903,7 @@ function intersects(a, b) {
 */
 function deviceMatchesFilter(device, filter) {
 	if (filter?.excludeDeviceId !== void 0 && device.id === filter.excludeDeviceId) return false;
+	if (filter?.excludeTypes !== void 0 && filter.excludeTypes.includes(device.type)) return false;
 	const hasCaps = filter?.caps !== void 0 && filter.caps.length > 0;
 	const hasTypes = filter?.types !== void 0 && filter.types.length > 0;
 	if (!hasCaps && !hasTypes) return true;
@@ -6919,12 +6920,52 @@ function deviceOptionLabel(device) {
 * (value = the device id as a string). Sorted case-insensitively by label so
 * the picker order is stable.
 */
+/** `Location · type · in Container` — the parts a name alone does not say. */
+function deviceOptionDescription(device) {
+	const parts = [];
+	if (typeof device.location === "string" && device.location.length > 0) parts.push(device.location);
+	parts.push(device.type);
+	if (typeof device.parentName === "string" && device.parentName.length > 0) parts.push(`in ${device.parentName}`);
+	return parts.join(" · ");
+}
 function devicesToOptions(devices, filter) {
 	return devices.filter((d) => deviceMatchesFilter(d, filter)).map((d) => ({
 		value: String(d.id),
-		label: deviceOptionLabel(d)
+		label: deviceOptionLabel(d),
+		description: deviceOptionDescription(d),
+		location: typeof d.location === "string" && d.location.length > 0 ? d.location : null
 	})).toSorted((a, b) => a.label.localeCompare(b.label));
 }
+/** The distinct locations and types on offer — the chips above the search. */
+function deviceFacets(devices) {
+	const locations = /* @__PURE__ */ new Set();
+	const types = /* @__PURE__ */ new Set();
+	for (const d of devices) {
+		if (typeof d.location === "string" && d.location.length > 0) locations.add(d.location);
+		types.add(d.type);
+	}
+	return {
+		locations: [...locations].toSorted((a, b) => a.localeCompare(b)),
+		types: [...types].toSorted((a, b) => a.localeCompare(b))
+	};
+}
+/** Every chosen facet must match; an unchosen one matches everything. */
+function matchesFacets(device, facets) {
+	if (facets.location !== void 0 && device.location !== facets.location) return false;
+	if (facets.type !== void 0 && device.type !== facets.type) return false;
+	return true;
+}
+/** The devices sharing `location` come first — suggested, never pre-linked. */
+function partitionSuggested(options, location) {
+	if (location === null || location === void 0 || location.length === 0) return {
+		suggested: [],
+		others: [...options]
+	};
+	return {
+		suggested: options.filter((o) => o.location === location),
+		others: options.filter((o) => o.location !== location)
+	};
+}
 /**
 * Free-text option filter — case-insensitive AND over whitespace tokens, each
 * matched against the option's `value` + `label` (so a device is found by name,
@@ -6934,7 +6975,7 @@ function filterDeviceOptions(options, query) {
 	const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
 	if (tokens.length === 0) return [...options];
 	return options.filter((opt) => {
-		const hay = `${opt.value} ${opt.label}`.toLowerCase();
+		const hay = `${opt.value} ${opt.label} ${opt.description ?? ""}`.toLowerCase();
 		return tokens.every((t) => hay.includes(t));
 	});
 }
@@ -6973,21 +7014,61 @@ var DESC_CLASS$1 = "text-[10px] text-foreground-subtle mt-0.5 break-words";
 /** The compact projection of the listAll rows the device fields consume. */
 function toCandidates(rows) {
 	if (!Array.isArray(rows)) return [];
+	const nameById = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		if (typeof row !== "object" || row === null) continue;
+		const r = row;
+		if (typeof r.id === "number" && typeof r.name === "string") nameById.set(r.id, r.name);
+	}
 	const out = [];
 	for (const row of rows) {
 		if (typeof row !== "object" || row === null) continue;
 		const r = row;
 		if (typeof r.id !== "number" || typeof r.type !== "string" || typeof r.name !== "string") continue;
+		const parentName = typeof r.parentDeviceId === "number" ? nameById.get(r.parentDeviceId) ?? null : null;
 		out.push({
 			id: r.id,
 			type: r.type,
 			name: r.name,
 			location: typeof r.location === "string" ? r.location : null,
-			features: Array.isArray(r.features) ? r.features.filter((f) => typeof f === "string") : []
+			features: Array.isArray(r.features) ? r.features.filter((f) => typeof f === "string") : [],
+			parentName
 		});
 	}
 	return out;
 }
+var FACET_CHIP = "rounded-full border px-1.5 py-0.5 text-[10px] leading-4 transition-colors cursor-pointer";
+var FACET_CHIP_ON = `${FACET_CHIP} border-primary bg-primary/10 text-primary`;
+var FACET_CHIP_OFF = `${FACET_CHIP} border-border text-foreground-subtle hover:bg-surface-hover`;
+var GROUP_HEADING = "px-2.5 pt-1.5 pb-0.5 text-[10px] font-medium uppercase tracking-wide text-foreground-subtle";
+/** One row of facet chips: `All` plus every distinct value. */
+function FacetRow({ label, values, active, onPick }) {
+	if (values.length < 2) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-wrap items-center gap-1 mb-1",
+		role: "group",
+		"aria-label": label,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-[10px] text-foreground-subtle mr-0.5",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: active === void 0 ? FACET_CHIP_ON : FACET_CHIP_OFF,
+				onClick: () => onPick(void 0),
+				children: "All"
+			}),
+			values.map((v) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: active === v ? FACET_CHIP_ON : FACET_CHIP_OFF,
+				"aria-pressed": active === v,
+				onClick: () => onPick(active === v ? void 0 : v),
+				children: v
+			}, v))
+		]
+	});
+}
 function FieldShell({ label, description, required, translationFn, children }) {
 	const resolvedLabel = resolveLabel(label, translationFn);
 	const resolvedDescription = resolveLabel(description, translationFn);
@@ -7035,7 +7116,16 @@ function DeviceSelectField({ field, value, onChange, disabled, translationFn })
 }
 function DeviceMultiSelectField({ field, value, onChange, disabled, translationFn }) {
 	const { data } = useDeviceManagerListAll({});
-	const options = (0, react$1.useMemo)(() => devicesToOptions(toCandidates(data), field.deviceFilter), [data, field.deviceFilter]);
+	const smart = field.suggestLocation !== void 0;
+	const [facets, setFacets] = (0, react$1.useState)({});
+	const candidates = (0, react$1.useMemo)(() => toCandidates(data), [data]);
+	const facetValues = (0, react$1.useMemo)(() => deviceFacets(candidates.filter((c) => c.id !== field.deviceFilter?.excludeDeviceId)), [candidates, field.deviceFilter?.excludeDeviceId]);
+	const candidatesInScope = (0, react$1.useMemo)(() => smart ? candidates.filter((c) => matchesFacets(c, facets)) : candidates, [
+		candidates,
+		facets,
+		smart
+	]);
+	const options = (0, react$1.useMemo)(() => devicesToOptions(candidatesInScope, field.deviceFilter), [candidatesInScope, field.deviceFilter]);
 	const selected = Array.isArray(value) ? value.map(String) : [];
 	const isDisabled = disabled === true || field.disabled === true;
 	const atMax = field.maxItems !== void 0 && selected.length >= field.maxItems;
@@ -7045,7 +7135,13 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 	const inputRef = (0, react$1.useRef)(null);
 	const blurTimer = (0, react$1.useRef)(null);
 	const selectedOptions = (0, react$1.useMemo)(() => selectedDeviceOptions(options, selected), [options, selected]);
-	const filtered = (0, react$1.useMemo)(() => filterDeviceOptions(options, query), [options, query]);
+	const searched = (0, react$1.useMemo)(() => filterDeviceOptions(options, query), [options, query]);
+	const partition = (0, react$1.useMemo)(() => partitionSuggested(searched, smart ? field.suggestLocation : null), [
+		searched,
+		smart,
+		field.suggestLocation
+	]);
+	const filtered = (0, react$1.useMemo)(() => [...partition.suggested, ...partition.others], [partition]);
 	const toggle = (optValue) => {
 		if (isDisabled) return;
 		if (selected.includes(optValue)) onChange(selected.filter((v) => v !== optValue));
@@ -7095,6 +7191,23 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 					})]
 				}, opt.value))
 			}),
+			smart && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FacetRow, {
+				label: "Location",
+				values: facetValues.locations,
+				active: facets.location,
+				onPick: (location) => setFacets((f) => ({
+					...f,
+					location
+				}))
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FacetRow, {
+				label: "Type",
+				values: facetValues.types,
+				active: facets.type,
+				onPick: (type) => setFacets((f) => ({
+					...f,
+					type
+				}))
+			})] }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: INPUT_SHELL + (isDisabled ? " opacity-50" : ""),
 				children: [
@@ -7144,7 +7257,12 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 				}) : filtered.map((opt, i) => {
 					const checked = selected.includes(opt.value);
 					const blockedByMax = !checked && atMax;
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					const suggestedCount = partition.suggested.length;
+					const heading = !smart ? null : i === 0 && suggestedCount > 0 ? `Suggested · ${field.suggestLocation ?? ""}` : i === suggestedCount && suggestedCount > 0 ? "Other devices" : null;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [heading !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: GROUP_HEADING,
+						children: heading
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 						type: "button",
 						role: "option",
 						"aria-selected": checked,
@@ -7159,11 +7277,17 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: ["flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border", checked ? "border-primary bg-primary text-white" : "border-border"].join(" "),
 							children: checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, { className: "h-2.5 w-2.5" })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "truncate text-foreground",
-							children: opt.label
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "block truncate text-foreground",
+								children: opt.label
+							}), opt.description !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "block truncate text-[10px] text-foreground-subtle",
+								children: opt.description
+							})]
 						})]
-					}, opt.value);
+					})] }, opt.value);
 				})
 			}),
 			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
@@ -43813,12 +43937,33 @@ function DeviceList(props) {
 *   - a link-state status badge + exposed-device count from `getStatus`,
 *   - an optional "Setup" section (pairing QR + copyable fields) from
 *     the cap's `setup` block,
-*   - ONE unified devices overview — the shared `<DeviceList>` table
-*     restricted to this exporter's `listSupportedDeviceKinds`, with a
-*     per-row Expose/Exposed toggle wired through the list's
-*     `renderRowAction` extension point. Each row reflects whether the
-*     device is exposed to THIS integration and lets the operator
-*     toggle it directly from the integration page.
+*   - ONE unified devices overview — the shared `<DeviceList>` in its
+*     GENERIC mode (the same table `/integrations` renders), restricted
+*     to this exporter's `listSupportedDeviceKinds`.
+*
+* ── What an entry shows, and what it deliberately does not ───────────
+*
+* Three columns plus a selection box: device TYPE, NAME, EXPORT. That is
+* the whole row.
+*
+* It used to be the full device-mode row — Hardware (manufacturer ·
+* model), Features, and the merged Preview cell carrying the per-type
+* live control, the battery/charging pills, the snapshot eye, the reboot
+* quick-action, the PTZ button and the reachability dot. Every one of
+* those is reachable on `/devices` and on the device's own page; none of
+* them existed only here, which is the ONLY reason they were removable.
+* The Expose toggle is the affordance this surface owns, so it stays —
+* and the row click still opens the device page.
+*
+* ── Multi-select, and why every run reports ──────────────────────────
+*
+* Selecting rows exposes (or unexposes) them in one go. The toolbar
+* always names the COUNT the buttons will act on, and every run — bulk
+* or single-row — ends in a summary that names the devices on both
+* sides. A generic "export failed" would leave the operator re-running
+* the whole set to discover which half landed; and the previous
+* single-row toggle used `mutate` with no `onError`, so a refused
+* accessory changed nothing on screen at all.
 *
 * This composite is the reusable replacement for the per-addon
 * Module-Federation overview tables that each export addon used to
@@ -43933,31 +44078,84 @@ function SetupSection({ setup }) {
 	});
 }
 /**
-* Per-row Expose/Exposed toggle — the `renderRowAction` injected into
-* `<DeviceList>`. Reflects whether the row's device is exposed to THIS
-* exporter and flips it via expose/unexpose, routed by `addonId`.
+* Per-row Expose/Exposed toggle. Reflects whether the row's device is exposed
+* to THIS exporter and flips it through the SAME runner the bulk buttons use —
+* so a single-row refusal is reported by name instead of vanishing, which is
+* what the previous fire-and-forget `mutate` did.
+*
+* The accessible name carries the device name (`Expose Garden cam`): several
+* of these live in one table, and "Expose" alone names none of them.
 */
-function ExportRowToggle({ addonId, deviceId, exposed, busy, onExpose, onUnexpose }) {
+function ExportRowToggle({ addonId, device, exposed, busy, onToggle }) {
 	const handleClick = (e) => {
 		e.stopPropagation();
 		if (busy) return;
-		if (exposed) onUnexpose(deviceId);
-		else onExpose(deviceId);
+		onToggle(device, exposed ? "unexpose" : "expose");
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 		size: "sm",
 		variant: exposed ? "ghost" : "primary",
 		disabled: busy,
 		onClick: handleClick,
+		"aria-label": `${exposed ? "Unexpose" : "Expose"} ${device.name}`,
 		title: exposed ? `Stop exposing to "${addonId}"` : `Expose to "${addonId}"`,
 		children: exposed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Unlink2, { className: "mr-1 h-3.5 w-3.5" }), "Exposed"] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Share2, { className: "mr-1 h-3.5 w-3.5" }), "Expose"] })
 	});
 }
 /**
+* The result of the last run, named device by device.
+*
+* Rendered for a CLEAN run too. "It probably worked" is not something an
+* operator should have to infer from silence, and a summary that appears only
+* on failure trains them to read no news as good news right up until the one
+* time the render itself was what failed.
+*/
+function BulkSummary({ outcome, onDismiss }) {
+	const verb = outcome.action === "expose" ? "Exposed" : "Unexposed";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "export-bulk-summary",
+		className: `flex flex-col gap-1 px-4 py-2 border-b border-border text-[11px] ${outcome.failed.length === 0 ? "text-foreground-subtle" : "text-danger"}`,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "font-medium",
+					children: [
+						verb,
+						" ",
+						outcome.succeeded.length,
+						" of ",
+						outcome.total,
+						" selected device",
+						outcome.total === 1 ? "" : "s",
+						"."
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					size: "sm",
+					variant: "ghost",
+					onClick: onDismiss,
+					"aria-label": "Dismiss export result",
+					children: "Dismiss"
+				})]
+			}),
+			outcome.succeeded.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "text-foreground-subtle",
+				children: ["Succeeded: ", outcome.succeeded.join(", ")]
+			}),
+			outcome.failed.map((failure) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+				"Failed: ",
+				failure.label,
+				" — ",
+				failure.message
+			] }, failure.label))
+		]
+	});
+}
+/**
 * Generic device-export panel. Addon-agnostic — only the `device-export`
 * cap drives it.
 */
-function DeviceExportPanel({ addonId, trpc, onOpenDevice }) {
+function DeviceExportPanel({ addonId, onOpenDevice }) {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)();
 	const statusQuery = useDeviceExportGetStatus({
 		nodeId: "hub",
@@ -44019,38 +44217,171 @@ function DeviceExportPanel({ addonId, trpc, onOpenDevice }) {
 	const loading = statusQuery.isLoading || exposedQuery.isLoading || kindsQuery.isLoading || devicesQuery.isLoading;
 	const exposedCount = status?.exposedDeviceCount ?? exposedIds.size;
 	const busy = exposeMutation.isPending || unexposeMutation.isPending;
-	const onExpose = (0, react$1.useCallback)((deviceId) => {
-		exposeMutation.mutate({
-			deviceId,
-			nodeId: "hub",
-			addonId
+	const [selectedIds, setSelectedIds] = (0, react$1.useState)(() => /* @__PURE__ */ new Set());
+	const [outcome, setOutcome] = (0, react$1.useState)(null);
+	const [running, setRunning] = (0, react$1.useState)(false);
+	const toggleSelection = (0, react$1.useCallback)((deviceId) => {
+		setSelectedIds((current) => {
+			const next = new Set(current);
+			if (next.has(deviceId)) next.delete(deviceId);
+			else next.add(deviceId);
+			return next;
 		});
-	}, [exposeMutation, addonId]);
-	const onUnexpose = (0, react$1.useCallback)((deviceId) => {
-		unexposeMutation.mutate({
+	}, []);
+	const clearSelection = (0, react$1.useCallback)(() => setSelectedIds(/* @__PURE__ */ new Set()), []);
+	const dismissOutcome = (0, react$1.useCallback)(() => setOutcome(null), []);
+	/** Display label for a device id — its name, or the raw id if it left the fleet. */
+	const labelFor = (0, react$1.useCallback)((deviceId) => candidateDevices.find((d) => String(d.id) === deviceId)?.name ?? `#${deviceId}`, [candidateDevices]);
+	/**
+	* The ONE path an expose/unexpose takes — a single row's toggle is a run of
+	* one. Every device is dispatched, every result is recorded, and a failure is
+	* both logged (with `deviceId`, so it can be asked about per-camera) and
+	* named on screen. Nothing here can drop a device quietly: the loop visits
+	* the whole input and each visit lands in `succeeded` or in `failed`.
+	*/
+	const runExport = (0, react$1.useCallback)(async (action, deviceIds) => {
+		if (deviceIds.length === 0 || running) return;
+		setRunning(true);
+		setOutcome(null);
+		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] ?? "";
+			const label = labelFor(deviceId);
+			if (result.status === "fulfilled") {
+				succeeded.push(label);
+				return;
+			}
+			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
+			});
 		});
-	}, [unexposeMutation, addonId]);
-	const renderRowAction = (0, react$1.useCallback)((device) => {
-		const id = String(device.id);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExportRowToggle, {
-			addonId,
-			deviceId: id,
-			exposed: exposedIds.has(id),
-			busy,
-			onExpose,
-			onUnexpose
+		setOutcome({
+			action,
+			total: deviceIds.length,
+			succeeded,
+			failed
 		});
+		setSelectedIds(/* @__PURE__ */ new Set());
+		setRunning(false);
 	}, [
 		addonId,
-		exposedIds,
+		exposeMutation,
+		unexposeMutation,
+		labelFor,
+		running
+	]);
+	const selectedList = (0, react$1.useMemo)(() => [...selectedIds], [selectedIds]);
+	const exposeSelected = (0, react$1.useCallback)(() => {
+		runExport("expose", selectedList);
+	}, [runExport, selectedList]);
+	const unexposeSelected = (0, react$1.useCallback)(() => {
+		runExport("unexpose", selectedList);
+	}, [runExport, selectedList]);
+	const onRowToggle = (0, react$1.useCallback)((device, action) => {
+		runExport(action, [String(device.id)]);
+	}, [runExport]);
+	const onRowClick = (0, react$1.useCallback)((device) => onOpenDevice?.(String(device.id)), [onOpenDevice]);
+	const getKey = (0, react$1.useCallback)((device) => String(device.id), []);
+	const getSearchText = (0, react$1.useCallback)((device) => `${device.name} ${device.stableId}`, []);
+	const getFilterType = (0, react$1.useCallback)((device) => device.type, []);
+	const columns = (0, react$1.useMemo)(() => [
+		{
+			key: "select",
+			header: "",
+			headerClassName: "w-8",
+			cell: (device) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "checkbox",
+				checked: selectedIds.has(String(device.id)),
+				onChange: () => toggleSelection(String(device.id)),
+				onClick: (e) => e.stopPropagation(),
+				"aria-label": `Select ${device.name}`
+			})
+		},
+		{
+			key: "type",
+			header: "Type",
+			headerClassName: "w-32",
+			cell: (device) => {
+				const meta = deviceTypeMetaOf(device.type);
+				const TypeIcon = meta.icon;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "inline-flex items-center gap-1.5 text-[11px] text-foreground-subtle",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TypeIcon, { className: "h-3.5 w-3.5 shrink-0" }), meta.label]
+				});
+			}
+		},
+		{
+			key: "name",
+			header: "Name",
+			cell: (device) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs font-medium text-foreground",
+				children: device.name
+			})
+		},
+		{
+			key: "export",
+			header: "Export",
+			headerClassName: "w-32 text-right",
+			cellClassName: "text-right",
+			cell: (device) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExportRowToggle, {
+				addonId,
+				device,
+				exposed: exposedIds.has(String(device.id)),
+				busy,
+				onToggle: onRowToggle
+			})
+		}
+	], [
+		addonId,
 		busy,
-		onExpose,
-		onUnexpose
+		exposedIds,
+		onRowToggle,
+		selectedIds,
+		toggleSelection
 	]);
-	const onNavigate = (0, react$1.useCallback)((deviceId) => onOpenDevice?.(String(deviceId)), [onOpenDevice]);
+	const selectionToolbar = selectedIds.size === 0 ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "inline-flex items-center gap-1.5",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				"data-testid": "export-selection-count",
+				className: "text-[11px] text-foreground-subtle",
+				children: [selectedIds.size, " selected"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				size: "sm",
+				variant: "primary",
+				disabled: busy,
+				onClick: exposeSelected,
+				children: ["Expose ", selectedIds.size]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+				size: "sm",
+				variant: "secondary",
+				disabled: busy,
+				onClick: unexposeSelected,
+				children: ["Unexpose ", selectedIds.size]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				size: "sm",
+				variant: "ghost",
+				onClick: clearSelection,
+				children: "Clear"
+			})
+		]
+	});
 	const hasSupportedKinds = supportedKindList.length > 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "rounded-lg border border-border bg-surface overflow-hidden",
@@ -44081,19 +44412,27 @@ function DeviceExportPanel({ addonId, trpc, onOpenDevice }) {
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorBox, { message: status.error })
 			}),
 			status?.setup && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SetupSection, { setup: status.setup }),
+			outcome !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BulkSummary, {
+				outcome,
+				onDismiss: dismissOutcome
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "p-3",
 				children: loading && candidateDevices.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "flex items-center gap-2 px-1 py-6 text-xs text-foreground-subtle",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), "Loading exportable devices…"]
 				}) : hasSupportedKinds && candidateDevices.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceList, {
-					devices: candidateDevices,
-					trpc,
-					filters: { typeOptions: supportedTypeOptions },
-					urlScope: "nested",
-					lsKey: `device-export:${addonId}`,
-					onNavigate: onOpenDevice ? onNavigate : void 0,
-					renderRowAction
+					mode: "generic",
+					items: candidateDevices,
+					getKey,
+					getSearchText,
+					getFilterType,
+					filterOptions: supportedTypeOptions,
+					columns,
+					onRowClick: onOpenDevice ? onRowClick : void 0,
+					toolbar: selectionToolbar,
+					searchPlaceholder: "Search by name or stableId",
+					emptyLabel: "No device matches this search."
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
 					icon: Share2,
 					title: "No exportable devices",

package/dist/index.js

@@ -6879,6 +6879,7 @@ function intersects(a, b) {
 */
 function deviceMatchesFilter(device, filter) {
 	if (filter?.excludeDeviceId !== void 0 && device.id === filter.excludeDeviceId) return false;
+	if (filter?.excludeTypes !== void 0 && filter.excludeTypes.includes(device.type)) return false;
 	const hasCaps = filter?.caps !== void 0 && filter.caps.length > 0;
 	const hasTypes = filter?.types !== void 0 && filter.types.length > 0;
 	if (!hasCaps && !hasTypes) return true;
@@ -6895,12 +6896,52 @@ function deviceOptionLabel(device) {
 * (value = the device id as a string). Sorted case-insensitively by label so
 * the picker order is stable.
 */
+/** `Location · type · in Container` — the parts a name alone does not say. */
+function deviceOptionDescription(device) {
+	const parts = [];
+	if (typeof device.location === "string" && device.location.length > 0) parts.push(device.location);
+	parts.push(device.type);
+	if (typeof device.parentName === "string" && device.parentName.length > 0) parts.push(`in ${device.parentName}`);
+	return parts.join(" · ");
+}
 function devicesToOptions(devices, filter) {
 	return devices.filter((d) => deviceMatchesFilter(d, filter)).map((d) => ({
 		value: String(d.id),
-		label: deviceOptionLabel(d)
+		label: deviceOptionLabel(d),
+		description: deviceOptionDescription(d),
+		location: typeof d.location === "string" && d.location.length > 0 ? d.location : null
 	})).toSorted((a, b) => a.label.localeCompare(b.label));
 }
+/** The distinct locations and types on offer — the chips above the search. */
+function deviceFacets(devices) {
+	const locations = /* @__PURE__ */ new Set();
+	const types = /* @__PURE__ */ new Set();
+	for (const d of devices) {
+		if (typeof d.location === "string" && d.location.length > 0) locations.add(d.location);
+		types.add(d.type);
+	}
+	return {
+		locations: [...locations].toSorted((a, b) => a.localeCompare(b)),
+		types: [...types].toSorted((a, b) => a.localeCompare(b))
+	};
+}
+/** Every chosen facet must match; an unchosen one matches everything. */
+function matchesFacets(device, facets) {
+	if (facets.location !== void 0 && device.location !== facets.location) return false;
+	if (facets.type !== void 0 && device.type !== facets.type) return false;
+	return true;
+}
+/** The devices sharing `location` come first — suggested, never pre-linked. */
+function partitionSuggested(options, location) {
+	if (location === null || location === void 0 || location.length === 0) return {
+		suggested: [],
+		others: [...options]
+	};
+	return {
+		suggested: options.filter((o) => o.location === location),
+		others: options.filter((o) => o.location !== location)
+	};
+}
 /**
 * Free-text option filter — case-insensitive AND over whitespace tokens, each
 * matched against the option's `value` + `label` (so a device is found by name,
@@ -6910,7 +6951,7 @@ function filterDeviceOptions(options, query) {
 	const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
 	if (tokens.length === 0) return [...options];
 	return options.filter((opt) => {
-		const hay = `${opt.value} ${opt.label}`.toLowerCase();
+		const hay = `${opt.value} ${opt.label} ${opt.description ?? ""}`.toLowerCase();
 		return tokens.every((t) => hay.includes(t));
 	});
 }
@@ -6949,21 +6990,61 @@ var DESC_CLASS$1 = "text-[10px] text-foreground-subtle mt-0.5 break-words";
 /** The compact projection of the listAll rows the device fields consume. */
 function toCandidates(rows) {
 	if (!Array.isArray(rows)) return [];
+	const nameById = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		if (typeof row !== "object" || row === null) continue;
+		const r = row;
+		if (typeof r.id === "number" && typeof r.name === "string") nameById.set(r.id, r.name);
+	}
 	const out = [];
 	for (const row of rows) {
 		if (typeof row !== "object" || row === null) continue;
 		const r = row;
 		if (typeof r.id !== "number" || typeof r.type !== "string" || typeof r.name !== "string") continue;
+		const parentName = typeof r.parentDeviceId === "number" ? nameById.get(r.parentDeviceId) ?? null : null;
 		out.push({
 			id: r.id,
 			type: r.type,
 			name: r.name,
 			location: typeof r.location === "string" ? r.location : null,
-			features: Array.isArray(r.features) ? r.features.filter((f) => typeof f === "string") : []
+			features: Array.isArray(r.features) ? r.features.filter((f) => typeof f === "string") : [],
+			parentName
 		});
 	}
 	return out;
 }
+var FACET_CHIP = "rounded-full border px-1.5 py-0.5 text-[10px] leading-4 transition-colors cursor-pointer";
+var FACET_CHIP_ON = `${FACET_CHIP} border-primary bg-primary/10 text-primary`;
+var FACET_CHIP_OFF = `${FACET_CHIP} border-border text-foreground-subtle hover:bg-surface-hover`;
+var GROUP_HEADING = "px-2.5 pt-1.5 pb-0.5 text-[10px] font-medium uppercase tracking-wide text-foreground-subtle";
+/** One row of facet chips: `All` plus every distinct value. */
+function FacetRow({ label, values, active, onPick }) {
+	if (values.length < 2) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-wrap items-center gap-1 mb-1",
+		role: "group",
+		"aria-label": label,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-[10px] text-foreground-subtle mr-0.5",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: active === void 0 ? FACET_CHIP_ON : FACET_CHIP_OFF,
+				onClick: () => onPick(void 0),
+				children: "All"
+			}),
+			values.map((v) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: active === v ? FACET_CHIP_ON : FACET_CHIP_OFF,
+				"aria-pressed": active === v,
+				onClick: () => onPick(active === v ? void 0 : v),
+				children: v
+			}, v))
+		]
+	});
+}
 function FieldShell({ label, description, required, translationFn, children }) {
 	const resolvedLabel = resolveLabel(label, translationFn);
 	const resolvedDescription = resolveLabel(description, translationFn);
@@ -7011,7 +7092,16 @@ function DeviceSelectField({ field, value, onChange, disabled, translationFn })
 }
 function DeviceMultiSelectField({ field, value, onChange, disabled, translationFn }) {
 	const { data } = useDeviceManagerListAll({});
-	const options = useMemo(() => devicesToOptions(toCandidates(data), field.deviceFilter), [data, field.deviceFilter]);
+	const smart = field.suggestLocation !== void 0;
+	const [facets, setFacets] = useState({});
+	const candidates = useMemo(() => toCandidates(data), [data]);
+	const facetValues = useMemo(() => deviceFacets(candidates.filter((c) => c.id !== field.deviceFilter?.excludeDeviceId)), [candidates, field.deviceFilter?.excludeDeviceId]);
+	const candidatesInScope = useMemo(() => smart ? candidates.filter((c) => matchesFacets(c, facets)) : candidates, [
+		candidates,
+		facets,
+		smart
+	]);
+	const options = useMemo(() => devicesToOptions(candidatesInScope, field.deviceFilter), [candidatesInScope, field.deviceFilter]);
 	const selected = Array.isArray(value) ? value.map(String) : [];
 	const isDisabled = disabled === true || field.disabled === true;
 	const atMax = field.maxItems !== void 0 && selected.length >= field.maxItems;
@@ -7021,7 +7111,13 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 	const inputRef = useRef(null);
 	const blurTimer = useRef(null);
 	const selectedOptions = useMemo(() => selectedDeviceOptions(options, selected), [options, selected]);
-	const filtered = useMemo(() => filterDeviceOptions(options, query), [options, query]);
+	const searched = useMemo(() => filterDeviceOptions(options, query), [options, query]);
+	const partition = useMemo(() => partitionSuggested(searched, smart ? field.suggestLocation : null), [
+		searched,
+		smart,
+		field.suggestLocation
+	]);
+	const filtered = useMemo(() => [...partition.suggested, ...partition.others], [partition]);
 	const toggle = (optValue) => {
 		if (isDisabled) return;
 		if (selected.includes(optValue)) onChange(selected.filter((v) => v !== optValue));
@@ -7071,6 +7167,23 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 					})]
 				}, opt.value))
 			}),
+			smart && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FacetRow, {
+				label: "Location",
+				values: facetValues.locations,
+				active: facets.location,
+				onPick: (location) => setFacets((f) => ({
+					...f,
+					location
+				}))
+			}), /* @__PURE__ */ jsx(FacetRow, {
+				label: "Type",
+				values: facetValues.types,
+				active: facets.type,
+				onPick: (type) => setFacets((f) => ({
+					...f,
+					type
+				}))
+			})] }),
 			/* @__PURE__ */ jsxs("div", {
 				className: INPUT_SHELL + (isDisabled ? " opacity-50" : ""),
 				children: [
@@ -7120,7 +7233,12 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 				}) : filtered.map((opt, i) => {
 					const checked = selected.includes(opt.value);
 					const blockedByMax = !checked && atMax;
-					return /* @__PURE__ */ jsxs("button", {
+					const suggestedCount = partition.suggested.length;
+					const heading = !smart ? null : i === 0 && suggestedCount > 0 ? `Suggested · ${field.suggestLocation ?? ""}` : i === suggestedCount && suggestedCount > 0 ? "Other devices" : null;
+					return /* @__PURE__ */ jsxs("div", { children: [heading !== null && /* @__PURE__ */ jsx("div", {
+						className: GROUP_HEADING,
+						children: heading
+					}), /* @__PURE__ */ jsxs("button", {
 						type: "button",
 						role: "option",
 						"aria-selected": checked,
@@ -7135,11 +7253,17 @@ function DeviceMultiSelectField({ field, value, onChange, disabled, translationF
 						children: [/* @__PURE__ */ jsx("span", {
 							className: ["flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border", checked ? "border-primary bg-primary text-white" : "border-border"].join(" "),
 							children: checked && /* @__PURE__ */ jsx(Check, { className: "h-2.5 w-2.5" })
-						}), /* @__PURE__ */ jsx("span", {
-							className: "truncate text-foreground",
-							children: opt.label
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "block truncate text-foreground",
+								children: opt.label
+							}), opt.description !== void 0 && /* @__PURE__ */ jsx("span", {
+								className: "block truncate text-[10px] text-foreground-subtle",
+								children: opt.description
+							})]
 						})]
-					}, opt.value);
+					})] }, opt.value);
 				})
 			}),
 			description && /* @__PURE__ */ jsx("p", {
@@ -43789,12 +43913,33 @@ function DeviceList(props) {
 *   - a link-state status badge + exposed-device count from `getStatus`,
 *   - an optional "Setup" section (pairing QR + copyable fields) from
 *     the cap's `setup` block,
-*   - ONE unified devices overview — the shared `<DeviceList>` table
-*     restricted to this exporter's `listSupportedDeviceKinds`, with a
-*     per-row Expose/Exposed toggle wired through the list's
-*     `renderRowAction` extension point. Each row reflects whether the
-*     device is exposed to THIS integration and lets the operator
-*     toggle it directly from the integration page.
+*   - ONE unified devices overview — the shared `<DeviceList>` in its
+*     GENERIC mode (the same table `/integrations` renders), restricted
+*     to this exporter's `listSupportedDeviceKinds`.
+*
+* ── What an entry shows, and what it deliberately does not ───────────
+*
+* Three columns plus a selection box: device TYPE, NAME, EXPORT. That is
+* the whole row.
+*
+* It used to be the full device-mode row — Hardware (manufacturer ·
+* model), Features, and the merged Preview cell carrying the per-type
+* live control, the battery/charging pills, the snapshot eye, the reboot
+* quick-action, the PTZ button and the reachability dot. Every one of
+* those is reachable on `/devices` and on the device's own page; none of
+* them existed only here, which is the ONLY reason they were removable.
+* The Expose toggle is the affordance this surface owns, so it stays —
+* and the row click still opens the device page.
+*
+* ── Multi-select, and why every run reports ──────────────────────────
+*
+* Selecting rows exposes (or unexposes) them in one go. The toolbar
+* always names the COUNT the buttons will act on, and every run — bulk
+* or single-row — ends in a summary that names the devices on both
+* sides. A generic "export failed" would leave the operator re-running
+* the whole set to discover which half landed; and the previous
+* single-row toggle used `mutate` with no `onError`, so a refused
+* accessory changed nothing on screen at all.
 *
 * This composite is the reusable replacement for the per-addon
 * Module-Federation overview tables that each export addon used to
@@ -43909,31 +44054,84 @@ function SetupSection({ setup }) {
 	});
 }
 /**
-* Per-row Expose/Exposed toggle — the `renderRowAction` injected into
-* `<DeviceList>`. Reflects whether the row's device is exposed to THIS
-* exporter and flips it via expose/unexpose, routed by `addonId`.
+* Per-row Expose/Exposed toggle. Reflects whether the row's device is exposed
+* to THIS exporter and flips it through the SAME runner the bulk buttons use —
+* so a single-row refusal is reported by name instead of vanishing, which is
+* what the previous fire-and-forget `mutate` did.
+*
+* The accessible name carries the device name (`Expose Garden cam`): several
+* of these live in one table, and "Expose" alone names none of them.
 */
-function ExportRowToggle({ addonId, deviceId, exposed, busy, onExpose, onUnexpose }) {
+function ExportRowToggle({ addonId, device, exposed, busy, onToggle }) {
 	const handleClick = (e) => {
 		e.stopPropagation();
 		if (busy) return;
-		if (exposed) onUnexpose(deviceId);
-		else onExpose(deviceId);
+		onToggle(device, exposed ? "unexpose" : "expose");
 	};
 	return /* @__PURE__ */ jsx(Button, {
 		size: "sm",
 		variant: exposed ? "ghost" : "primary",
 		disabled: busy,
 		onClick: handleClick,
+		"aria-label": `${exposed ? "Unexpose" : "Expose"} ${device.name}`,
 		title: exposed ? `Stop exposing to "${addonId}"` : `Expose to "${addonId}"`,
 		children: exposed ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Unlink2, { className: "mr-1 h-3.5 w-3.5" }), "Exposed"] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Share2, { className: "mr-1 h-3.5 w-3.5" }), "Expose"] })
 	});
 }
 /**
+* The result of the last run, named device by device.
+*
+* Rendered for a CLEAN run too. "It probably worked" is not something an
+* operator should have to infer from silence, and a summary that appears only
+* on failure trains them to read no news as good news right up until the one
+* time the render itself was what failed.
+*/
+function BulkSummary({ outcome, onDismiss }) {
+	const verb = outcome.action === "expose" ? "Exposed" : "Unexposed";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-testid": "export-bulk-summary",
+		className: `flex flex-col gap-1 px-4 py-2 border-b border-border text-[11px] ${outcome.failed.length === 0 ? "text-foreground-subtle" : "text-danger"}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsxs("span", {
+					className: "font-medium",
+					children: [
+						verb,
+						" ",
+						outcome.succeeded.length,
+						" of ",
+						outcome.total,
+						" selected device",
+						outcome.total === 1 ? "" : "s",
+						"."
+					]
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "ghost",
+					onClick: onDismiss,
+					"aria-label": "Dismiss export result",
+					children: "Dismiss"
+				})]
+			}),
+			outcome.succeeded.length > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "text-foreground-subtle",
+				children: ["Succeeded: ", outcome.succeeded.join(", ")]
+			}),
+			outcome.failed.map((failure) => /* @__PURE__ */ jsxs("span", { children: [
+				"Failed: ",
+				failure.label,
+				" — ",
+				failure.message
+			] }, failure.label))
+		]
+	});
+}
+/**
 * Generic device-export panel. Addon-agnostic — only the `device-export`
 * cap drives it.
 */
-function DeviceExportPanel({ addonId, trpc, onOpenDevice }) {
+function DeviceExportPanel({ addonId, onOpenDevice }) {
 	const queryClient = useQueryClient();
 	const statusQuery = useDeviceExportGetStatus({
 		nodeId: "hub",
@@ -43995,38 +44193,171 @@ function DeviceExportPanel({ addonId, trpc, onOpenDevice }) {
 	const loading = statusQuery.isLoading || exposedQuery.isLoading || kindsQuery.isLoading || devicesQuery.isLoading;
 	const exposedCount = status?.exposedDeviceCount ?? exposedIds.size;
 	const busy = exposeMutation.isPending || unexposeMutation.isPending;
-	const onExpose = useCallback((deviceId) => {
-		exposeMutation.mutate({
-			deviceId,
-			nodeId: "hub",
-			addonId
+	const [selectedIds, setSelectedIds] = useState(() => /* @__PURE__ */ new Set());
+	const [outcome, setOutcome] = useState(null);
+	const [running, setRunning] = useState(false);
+	const toggleSelection = useCallback((deviceId) => {
+		setSelectedIds((current) => {
+			const next = new Set(current);
+			if (next.has(deviceId)) next.delete(deviceId);
+			else next.add(deviceId);
+			return next;
 		});
-	}, [exposeMutation, addonId]);
-	const onUnexpose = useCallback((deviceId) => {
-		unexposeMutation.mutate({
+	}, []);
+	const clearSelection = useCallback(() => setSelectedIds(/* @__PURE__ */ new Set()), []);
+	const dismissOutcome = useCallback(() => setOutcome(null), []);
+	/** Display label for a device id — its name, or the raw id if it left the fleet. */
+	const labelFor = useCallback((deviceId) => candidateDevices.find((d) => String(d.id) === deviceId)?.name ?? `#${deviceId}`, [candidateDevices]);
+	/**
+	* The ONE path an expose/unexpose takes — a single row's toggle is a run of
+	* one. Every device is dispatched, every result is recorded, and a failure is
+	* both logged (with `deviceId`, so it can be asked about per-camera) and
+	* named on screen. Nothing here can drop a device quietly: the loop visits
+	* the whole input and each visit lands in `succeeded` or in `failed`.
+	*/
+	const runExport = useCallback(async (action, deviceIds) => {
+		if (deviceIds.length === 0 || running) return;
+		setRunning(true);
+		setOutcome(null);
+		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] ?? "";
+			const label = labelFor(deviceId);
+			if (result.status === "fulfilled") {
+				succeeded.push(label);
+				return;
+			}
+			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
+			});
 		});
-	}, [unexposeMutation, addonId]);
-	const renderRowAction = useCallback((device) => {
-		const id = String(device.id);
-		return /* @__PURE__ */ jsx(ExportRowToggle, {
-			addonId,
-			deviceId: id,
-			exposed: exposedIds.has(id),
-			busy,
-			onExpose,
-			onUnexpose
+		setOutcome({
+			action,
+			total: deviceIds.length,
+			succeeded,
+			failed
 		});
+		setSelectedIds(/* @__PURE__ */ new Set());
+		setRunning(false);
 	}, [
 		addonId,
-		exposedIds,
+		exposeMutation,
+		unexposeMutation,
+		labelFor,
+		running
+	]);
+	const selectedList = useMemo(() => [...selectedIds], [selectedIds]);
+	const exposeSelected = useCallback(() => {
+		runExport("expose", selectedList);
+	}, [runExport, selectedList]);
+	const unexposeSelected = useCallback(() => {
+		runExport("unexpose", selectedList);
+	}, [runExport, selectedList]);
+	const onRowToggle = useCallback((device, action) => {
+		runExport(action, [String(device.id)]);
+	}, [runExport]);
+	const onRowClick = useCallback((device) => onOpenDevice?.(String(device.id)), [onOpenDevice]);
+	const getKey = useCallback((device) => String(device.id), []);
+	const getSearchText = useCallback((device) => `${device.name} ${device.stableId}`, []);
+	const getFilterType = useCallback((device) => device.type, []);
+	const columns = useMemo(() => [
+		{
+			key: "select",
+			header: "",
+			headerClassName: "w-8",
+			cell: (device) => /* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				checked: selectedIds.has(String(device.id)),
+				onChange: () => toggleSelection(String(device.id)),
+				onClick: (e) => e.stopPropagation(),
+				"aria-label": `Select ${device.name}`
+			})
+		},
+		{
+			key: "type",
+			header: "Type",
+			headerClassName: "w-32",
+			cell: (device) => {
+				const meta = deviceTypeMetaOf(device.type);
+				const TypeIcon = meta.icon;
+				return /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1.5 text-[11px] text-foreground-subtle",
+					children: [/* @__PURE__ */ jsx(TypeIcon, { className: "h-3.5 w-3.5 shrink-0" }), meta.label]
+				});
+			}
+		},
+		{
+			key: "name",
+			header: "Name",
+			cell: (device) => /* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-foreground",
+				children: device.name
+			})
+		},
+		{
+			key: "export",
+			header: "Export",
+			headerClassName: "w-32 text-right",
+			cellClassName: "text-right",
+			cell: (device) => /* @__PURE__ */ jsx(ExportRowToggle, {
+				addonId,
+				device,
+				exposed: exposedIds.has(String(device.id)),
+				busy,
+				onToggle: onRowToggle
+			})
+		}
+	], [
+		addonId,
 		busy,
-		onExpose,
-		onUnexpose
+		exposedIds,
+		onRowToggle,
+		selectedIds,
+		toggleSelection
 	]);
-	const onNavigate = useCallback((deviceId) => onOpenDevice?.(String(deviceId)), [onOpenDevice]);
+	const selectionToolbar = selectedIds.size === 0 ? void 0 : /* @__PURE__ */ jsxs("span", {
+		className: "inline-flex items-center gap-1.5",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				"data-testid": "export-selection-count",
+				className: "text-[11px] text-foreground-subtle",
+				children: [selectedIds.size, " selected"]
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				variant: "primary",
+				disabled: busy,
+				onClick: exposeSelected,
+				children: ["Expose ", selectedIds.size]
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				variant: "secondary",
+				disabled: busy,
+				onClick: unexposeSelected,
+				children: ["Unexpose ", selectedIds.size]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				onClick: clearSelection,
+				children: "Clear"
+			})
+		]
+	});
 	const hasSupportedKinds = supportedKindList.length > 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "rounded-lg border border-border bg-surface overflow-hidden",
@@ -44057,19 +44388,27 @@ function DeviceExportPanel({ addonId, trpc, onOpenDevice }) {
 				children: /* @__PURE__ */ jsx(ErrorBox, { message: status.error })
 			}),
 			status?.setup && /* @__PURE__ */ jsx(SetupSection, { setup: status.setup }),
+			outcome !== null && /* @__PURE__ */ jsx(BulkSummary, {
+				outcome,
+				onDismiss: dismissOutcome
+			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "p-3",
 				children: loading && candidateDevices.length === 0 ? /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-2 px-1 py-6 text-xs text-foreground-subtle",
 					children: [/* @__PURE__ */ jsx(LoaderCircle, { className: "h-3.5 w-3.5 animate-spin" }), "Loading exportable devices…"]
 				}) : hasSupportedKinds && candidateDevices.length > 0 ? /* @__PURE__ */ jsx(DeviceList, {
-					devices: candidateDevices,
-					trpc,
-					filters: { typeOptions: supportedTypeOptions },
-					urlScope: "nested",
-					lsKey: `device-export:${addonId}`,
-					onNavigate: onOpenDevice ? onNavigate : void 0,
-					renderRowAction
+					mode: "generic",
+					items: candidateDevices,
+					getKey,
+					getSearchText,
+					getFilterType,
+					filterOptions: supportedTypeOptions,
+					columns,
+					onRowClick: onOpenDevice ? onRowClick : void 0,
+					toolbar: selectionToolbar,
+					searchPlaceholder: "Search by name or stableId",
+					emptyLabel: "No device matches this search."
 				}) : /* @__PURE__ */ jsx(EmptyState, {
 					icon: Share2,
 					title: "No exportable devices",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.2.112",
+  "version": "1.2.114",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",