@camstack/ui-library 1.2.111 → 1.2.113

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/index.cjs

@@ -43813,12 +43813,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 +43954,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 +44093,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 +44288,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

@@ -43789,12 +43789,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 +43930,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 +44069,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 +44264,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.111",
+  "version": "1.2.113",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",