@camstack/ui-library 1.2.343 → 1.2.345

package/dist/index.cjs

@@ -5950,6 +5950,191 @@ function useDisplayIconResolver() {
 	return (0, react$1.useMemo)(() => (name) => resolveDisplayIcon(name), [useIconGlyphsVersion()]);
 }
 //#endregion
+//#region src/hotkeys/combo.ts
+function parseCombo(combo) {
+	const parts = combo.split("+");
+	const key = parts[parts.length - 1] ?? "";
+	const modifiers = parts.slice(0, -1);
+	return {
+		mod: modifiers.includes("mod"),
+		shift: modifiers.includes("shift"),
+		alt: modifiers.includes("alt"),
+		key
+	};
+}
+function detectPlatform() {
+	if (typeof navigator === "undefined") return "other";
+	return /mac|iphone|ipad/i.test(navigator.platform) ? "mac" : "other";
+}
+function matchesCombo(event, combo, platform) {
+	const want = parseCombo(combo);
+	const modDown = platform === "mac" ? event.metaKey : event.ctrlKey;
+	const strayDown = platform === "mac" ? event.ctrlKey : event.metaKey;
+	return event.key.toLowerCase() === want.key && modDown === want.mod && !strayDown && event.shiftKey === want.shift && event.altKey === want.alt;
+}
+//#endregion
+//#region src/hotkeys/hotkey-provider.tsx
+var PAGE_SCOPE = "page";
+/** Asked last, after the page: a global handler that yields to whatever the page registers. */
+var FALLBACK_SCOPE = "fallback";
+var RegistryContext = (0, react$1.createContext)(null);
+var ScopeContext = (0, react$1.createContext)(PAGE_SCOPE);
+function isTypingTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable) return true;
+	return target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+}
+/**
+* Scopes stack in mount order; the newest enabled one is asked first. A `modal`
+* scope (an open dialog) ends the walk: what sits under it is not reachable.
+* Inside a scope the newest binding wins; a handler that returns `false` hands
+* over to the next one.
+*/
+function dispatch(state, event, platform) {
+	if (event.isComposing || event.keyCode === 229) return;
+	const typing = isTypingTarget(event.target);
+	const order = [
+		...[...state.scopes].reverse().map((s) => s.id),
+		PAGE_SCOPE,
+		FALLBACK_SCOPE
+	];
+	for (const scopeId of order) {
+		const candidates = state.bindings.filter((b) => b.scope === scopeId && matchesCombo(event, b.combo, platform)).reverse();
+		for (const binding of candidates) {
+			if (typing && !binding.allowInInput) continue;
+			if (binding.handlerRef.current(event) === false) continue;
+			if (binding.preventDefault) event.preventDefault();
+			return;
+		}
+		if (state.scopes.find((s) => s.id === scopeId)?.modal) return;
+	}
+}
+function HotkeyProvider({ children, platform }) {
+	const stateRef = (0, react$1.useRef)({
+		bindings: [],
+		scopes: []
+	});
+	const effectivePlatform = platform ?? detectPlatform();
+	const registry = (0, react$1.useMemo)(() => ({
+		addBinding: (binding) => {
+			stateRef.current = {
+				...stateRef.current,
+				bindings: [...stateRef.current.bindings, binding]
+			};
+			return () => {
+				stateRef.current = {
+					...stateRef.current,
+					bindings: stateRef.current.bindings.filter((b) => b.id !== binding.id)
+				};
+			};
+		},
+		addScope: (scope) => {
+			stateRef.current = {
+				...stateRef.current,
+				scopes: [...stateRef.current.scopes, scope]
+			};
+			return () => {
+				stateRef.current = {
+					...stateRef.current,
+					scopes: stateRef.current.scopes.filter((s) => s !== scope)
+				};
+			};
+		}
+	}), []);
+	(0, react$1.useEffect)(() => {
+		const onKeyDown = (event) => dispatch(stateRef.current, event, effectivePlatform);
+		window.addEventListener("keydown", onKeyDown, true);
+		return () => window.removeEventListener("keydown", onKeyDown, true);
+	}, [effectivePlatform]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RegistryContext.Provider, {
+		value: registry,
+		children
+	});
+}
+var nextBindingId = 0;
+/**
+* Bind a combo for the life of the component. Without a `HotkeyProvider` above
+* it does nothing, so the browser keeps its own shortcut.
+*/
+function useHotkey(combo, handler, options = {}) {
+	const registry = (0, react$1.useContext)(RegistryContext);
+	const inheritedScope = (0, react$1.useContext)(ScopeContext);
+	const handlerRef = (0, react$1.useRef)(handler);
+	handlerRef.current = handler;
+	const scope = options.scope ?? inheritedScope;
+	const enabled = options.enabled ?? true;
+	const preventDefault = options.preventDefault ?? true;
+	const allowInInput = options.allowInInput ?? parseCombo(combo).mod;
+	(0, react$1.useEffect)(() => {
+		if (!registry || !enabled) return void 0;
+		nextBindingId += 1;
+		return registry.addBinding({
+			id: nextBindingId,
+			combo,
+			scope,
+			handlerRef,
+			preventDefault,
+			allowInInput
+		});
+	}, [
+		registry,
+		enabled,
+		combo,
+		scope,
+		preventDefault,
+		allowInInput
+	]);
+}
+/** Bindings made below this component belong to `id`; while enabled it is the topmost scope. */
+function HotkeyScope({ id, children, enabled = true, modal = false }) {
+	const registry = (0, react$1.useContext)(RegistryContext);
+	(0, react$1.useEffect)(() => {
+		if (!registry || !enabled) return void 0;
+		return registry.addScope({
+			id,
+			modal
+		});
+	}, [
+		registry,
+		enabled,
+		id,
+		modal
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScopeContext.Provider, {
+		value: id,
+		children
+	});
+}
+//#endregion
+//#region src/hotkeys/use-search-field-hotkey.ts
+function isReachable(el) {
+	return el.isConnected && !el.disabled && el.getClientRects().length > 0;
+}
+/**
+* Register a search field: ⌘F / Ctrl+F and ⌘K / Ctrl+K focus and select it.
+* A field that is hidden or disabled declines, so the browser's find still runs.
+* The library's search inputs call this themselves.
+*/
+function useSearchFieldHotkey(ref, options = {}) {
+	const enabled = options.enabled ?? true;
+	const scope = options.scope;
+	const focusField = () => {
+		const el = ref.current;
+		if (!el || !isReachable(el)) return false;
+		el.focus();
+		el.select();
+		return true;
+	};
+	useHotkey("mod+f", focusField, {
+		enabled,
+		scope
+	});
+	useHotkey("mod+k", focusField, {
+		enabled,
+		scope
+	});
+}
+//#endregion
 //#region ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
 	var t, f, n = "";
@@ -9689,6 +9874,8 @@ function windowRows(rows, offsets, total, scrollTop) {
 	};
 }
 function IconPicker({ value, onPick, fallbackGlyph, labels, extraWords, clearGlyph, labelFor, categoryLabel = _camstack_types.iconCategoryLabel, disabled = false }) {
+	const searchFieldRef = (0, react$1.useRef)(null);
+	useSearchFieldHotkey(searchFieldRef);
 	const [open, setOpen] = (0, react$1.useState)(false);
 	const [query, setQuery] = (0, react$1.useState)("");
 	const [scrollTop, setScrollTop] = (0, react$1.useState)(0);
@@ -9749,6 +9936,7 @@ function IconPicker({ value, onPick, fallbackGlyph, labels, extraWords, clearGly
 				className: "w-full",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: searchFieldRef,
 						type: "search",
 						value: query,
 						autoFocus: true,
@@ -10007,7 +10195,14 @@ var inputVariants = cva("h-7 w-full px-2.5 text-xs bg-surface border rounded-md
 	} },
 	defaultVariants: { state: "default" }
 });
-var Input = (0, react$1.forwardRef)(({ className, state, leftSlot, rightSlot, ...props }, ref) => {
+var Input = (0, react$1.forwardRef)(({ className, state, leftSlot, rightSlot, searchHotkey, ...props }, ref) => {
+	const innerRef = (0, react$1.useRef)(null);
+	const setRef = (0, react$1.useCallback)((node) => {
+		innerRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useSearchFieldHotkey(innerRef, { enabled: searchHotkey ?? props.type === "search" });
 	if (leftSlot || rightSlot) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: cn("relative flex items-center", className),
 		children: [
@@ -10016,7 +10211,7 @@ var Input = (0, react$1.forwardRef)(({ className, state, leftSlot, rightSlot, ..
 				children: leftSlot
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				ref,
+				ref: setRef,
 				className: cn(inputVariants({ state }), leftSlot && "pl-8", rightSlot && "pr-8", className),
 				...props
 			}),
@@ -10027,7 +10222,7 @@ var Input = (0, react$1.forwardRef)(({ className, state, leftSlot, rightSlot, ..
 		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-		ref,
+		ref: setRef,
 		className: cn(inputVariants({ state }), className),
 		...props
 	});
@@ -26510,6 +26705,8 @@ function TrackedToggles({ options, tracked, nameOf, onToggle }) {
 	});
 }
 function AssociationSlotCard({ deviceId, row, onSaved, readOnly = false }) {
+	const searchFieldRef = (0, react$1.useRef)(null);
+	useSearchFieldHotkey(searchFieldRef);
 	const t = useUiText();
 	const descriptor = _camstack_types.EXTENSION_SLOTS[row.slot].descriptor;
 	const saved = row.value.deviceIds;
@@ -26641,6 +26838,7 @@ function AssociationSlotCard({ deviceId, row, onSaved, readOnly = false }) {
 						})]
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref: searchFieldRef,
 						type: "search",
 						"aria-label": t("uiLibrary.associationSlotCard.searchDevices", "Search devices"),
 						value: search,
@@ -29014,8 +29212,8 @@ var contentVariants = cva("relative fixed left-1/2 top-1/2 -translate-x-1/2 -tra
 		* flex chain does not resolve without it on iOS Safari.
 		*/
 		scroll: {
-			content: "overflow-y-auto",
-			body: "flex flex-col overflow-hidden"
+			content: "overflow-y-auto overscroll-contain",
+			body: "flex flex-col overflow-hidden overscroll-contain"
 		},
 		placement: {
 			center: "",
@@ -29089,7 +29287,12 @@ var DialogContent = (0, react$1.forwardRef)(({ className, width, placement, scro
 			"aria-label": t("uiLibrary.dialog.close", "Close"),
 			className: "absolute right-4 top-4 z-10 shrink-0",
 			onClick: () => setOpen(false)
-		}), children]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HotkeyScope, {
+			id: contentId,
+			modal: true,
+			enabled: open,
+			children
+		})]
 	});
 });
 DialogContent.displayName = "DialogContent";
@@ -29119,7 +29322,7 @@ function DialogHeader({ className, ...props }) {
 */
 function DialogBody({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("flex-1 min-h-0 overflow-y-auto", className),
+		className: cn("flex-1 min-h-0 overflow-y-auto overscroll-contain", className),
 		...props
 	});
 }
@@ -36348,7 +36551,7 @@ function RoleNodePill({ roleLabel, roleId, nodeName, colorId, emphasized = false
 * ```tsx
 * <Breadcrumb items={[
 *   { label: 'Integrations', onClick: () => navigate('/integrations') },
-*   { label: 'RTSP Cameras', onClick: () => navigate('/integrations/int_0001') },
+*   { label: 'RTSP Cameras', onClick: () => navigate('/integrations/provider-rtsp?instance=int_0001') },
 *   { label: 'Front Door' },
 * ]} />
 * ```
@@ -41956,6 +42159,8 @@ function MultiSelectDropdown({ label, options, selected, onChange }) {
 var CHIP_ON = "rounded-full border border-primary bg-primary/10 px-2 py-0.5 text-[10px] text-foreground";
 var CHIP_OFF = "rounded-full border border-border px-2 py-0.5 text-[10px] text-foreground-muted hover:bg-surface-hover";
 function DataTableFilterBar({ state, facets, labels, onSearch, onToggleFacet, onClear, facetLabel, groups = [], onToggleGroupFacet }) {
+	const searchRef = (0, react$1.useRef)(null);
+	useSearchFieldHotkey(searchRef);
 	const active = isDataTableFilterActive(state);
 	const showFacets = facets.length > 1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -41964,6 +42169,7 @@ function DataTableFilterBar({ state, facets, labels, onSearch, onToggleFacet, on
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 				className: "relative min-w-[12rem] flex-1",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-foreground-subtle" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref: searchRef,
 					type: "search",
 					value: state.search,
 					onChange: (e) => onSearch(e.target.value),
@@ -44194,6 +44400,8 @@ var TEXT_DEBOUNCE_MS = 300;
 var TOP_LOAD_THRESHOLD_PX = 24;
 var BYTES_PER_MB = 1024 * 1024;
 function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: propsDeviceId, containerDeviceId: propsContainerDeviceId, integrationId: propsIntegrationId, requestId: propsRequestId, level: initialLevel, maxHeight = "max-h-96", showScope = false, showDeviceChip = false, showFilters = true, showSourceSelect, limit = 100, liveBuffer: externalBuffer, onClose, className }) {
+	const searchFieldRef = (0, react$1.useRef)(null);
+	useSearchFieldHotkey(searchFieldRef);
 	const t = useUiText();
 	const sourceSelectOn = showSourceSelect ?? showFilters;
 	const [localAddonId, setLocalAddonId] = (0, react$1.useState)("");
@@ -44471,6 +44679,7 @@ function LogStream({ agentId: propsAgentId, addonId: propsAddonId, deviceId: pro
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "relative",
 							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+								ref: searchFieldRef,
 								type: "text",
 								value: searchText,
 								onChange: (e) => setSearchText(e.target.value),
@@ -45122,6 +45331,8 @@ function hasContent(entry) {
 }
 var MAX_LIVE_ENTRIES = 300;
 function EventStream({ agentId, addonId, deviceId, defaultCategories, categories: legacyCategories, category: propsCategory, maxHeight = "max-h-96", limit = 50, showCategoryFilter = true, showFilters: _showFilters = false, liveBuffer: externalBuffer, onClose, className }) {
+	const searchFieldRef = (0, react$1.useRef)(null);
+	useSearchFieldHotkey(searchFieldRef);
 	const t = useUiText();
 	const defaultsArray = (0, react$1.useMemo)(() => defaultCategories ?? legacyCategories ?? DEFAULT_EVENT_CATEGORIES, [defaultCategories, legacyCategories]);
 	const defaultsKey = (0, react$1.useMemo)(() => [...defaultsArray].toSorted().join(","), [defaultsArray]);
@@ -45398,6 +45609,7 @@ function EventStream({ agentId, addonId, deviceId, defaultCategories, categories
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "relative",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: searchFieldRef,
 							type: "text",
 							value: searchText,
 							onChange: (e) => setSearchText(e.target.value),
@@ -45896,6 +46108,8 @@ function coldRuntimeStateSlice(capName) {
 *  deeper opens on demand. */
 var DEFAULT_EXPAND_DEPTH = 1;
 function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", onClose, className }) {
+	const searchFieldRef = (0, react$1.useRef)(null);
+	useSearchFieldHotkey(searchFieldRef);
 	const t = useUiText();
 	const [activeCaps, setActiveCaps] = (0, react$1.useState)((0, react$1.useMemo)(() => new Set(defaultCaps ?? []), [defaultCaps]));
 	const [searchText, setSearchText] = (0, react$1.useState)("");
@@ -46123,6 +46337,7 @@ function StateValuesStream({ deviceId, defaultCaps, maxHeight = "max-h-96", onCl
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "relative",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									ref: searchFieldRef,
 									type: "text",
 									value: searchText,
 									onChange: (e) => setSearchText(e.target.value),
@@ -47512,6 +47727,42 @@ function resolveClimateTempStep(tempStep) {
 	if (typeof tempStep === "number" && Number.isFinite(tempStep) && tempStep > 0) return tempStep;
 	return 1;
 }
+var TARGET_FALLBACK_INT_DIGITS = 2;
+var TARGET_MAX_DECIMALS = 3;
+function decimalPlaces(n) {
+	if (!Number.isFinite(n)) return 0;
+	for (let d = 0; d < TARGET_MAX_DECIMALS; d += 1) if (Math.abs(n * 10 ** d - Math.round(n * 10 ** d)) < 1e-9) return d;
+	return TARGET_MAX_DECIMALS;
+}
+/**
+* Character count of the longest set-temperature the device can show, derived
+* from its range and step (5-30 step 0.5 reserves "30.5" = 4). The big target
+* number reserves this width so the − / + buttons do not move when the value
+* gains decimals or loses a digit.
+*/
+function climateTargetWidthChars(display) {
+	const step = resolveClimateTempStep(display.tempStep);
+	const bounds = [display.minTemp, display.maxTemp].filter((v) => typeof v === "number" && Number.isFinite(v));
+	const intDigits = bounds.length === 0 ? TARGET_FALLBACK_INT_DIGITS : Math.max(...bounds.map((v) => String(Math.trunc(Math.abs(v))).length));
+	const sign = bounds.some((v) => v < 0) ? 1 : 0;
+	const decimals = Math.max(decimalPlaces(step), ...bounds.map(decimalPlaces));
+	return sign + intDigits + (decimals > 0 ? 1 + decimals : 0);
+}
+/** Static class names so Tailwind generates them (no runtime-built classes). */
+var TARGET_MIN_WIDTH_CLASS = {
+	1: "min-w-[1ch]",
+	2: "min-w-[2ch]",
+	3: "min-w-[3ch]",
+	4: "min-w-[4ch]",
+	5: "min-w-[5ch]",
+	6: "min-w-[6ch]",
+	7: "min-w-[7ch]",
+	8: "min-w-[8ch]"
+};
+/** `min-w-[Nch]` + right alignment for the big target number. */
+function climateTargetWidthClass(display) {
+	return `${TARGET_MIN_WIDTH_CLASS[Math.min(Math.max(climateTargetWidthChars(display), 1), 8)]} text-center`;
+}
 function nextClimateTarget(current, deltaSteps, display) {
 	let next = current + deltaSteps * resolveClimateTempStep(display.tempStep);
 	const min = display.minTemp;
@@ -53899,7 +54150,7 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "flex items-baseline gap-0.5",
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "text-4xl font-bold leading-none tabular-nums",
+									className: cn("text-4xl font-bold leading-none tabular-nums", climateTargetWidthClass(display)),
 									style: { color: accent },
 									children: display.target
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -53940,7 +54191,7 @@ function AcPanel({ trpc, deviceId, layout, optimistic }) {
 					})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "relative z-10 flex items-baseline gap-0.5",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: "text-4xl font-bold leading-none tabular-nums text-foreground",
+							className: cn("text-4xl font-bold leading-none tabular-nums text-foreground", climateTargetWidthClass(display)),
 							children: display.currentTemp ?? "—"
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "text-lg text-foreground-subtle",
@@ -54058,7 +54309,7 @@ function CompactSelect({ label, icon, value, options, disabled, onChange }) {
 			className: "text-[10px] font-semibold uppercase tracking-wider text-foreground-subtle",
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cn("flex items-center gap-1 overflow-hidden rounded-lg border border-border/60 bg-surface-subtle px-1.5 py-1.5", disabled && "opacity-40"),
+			className: cn("flex items-center gap-1 overflow-hidden rounded-lg border border-border/60 bg-surface-subtle px-1.5 py-1.5 has-[:focus-visible]:border-primary", disabled && "opacity-40"),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "flex shrink-0",
@@ -60142,6 +60393,8 @@ function GenericModeList(props) {
 		defaultSize: fixedPageSize
 	});
 	const [searchInput, setSearchInput] = (0, react$1.useState)("");
+	const searchRef = (0, react$1.useRef)(null);
+	useSearchFieldHotkey(searchRef);
 	const debouncedSearch = useDebouncedString(searchInput, 300);
 	const [typeFilters, setTypeFilters] = (0, react$1.useState)(() => [...initialTypeFilters]);
 	const [page, setPage] = (0, react$1.useState)(1);
@@ -60212,6 +60465,7 @@ function GenericModeList(props) {
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "relative",
 						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",
 							value: searchInput,
 							onChange: (e) => setSearchInput(e.target.value),
@@ -61095,6 +61349,8 @@ function DeviceSelectorPicker({ value, onChange, includeLinked, onIncludeLinkedC
 	const t = useUiText();
 	const { data: rawDevices } = useDeviceManagerListAll({});
 	const [search, setSearch] = (0, react$1.useState)("");
+	const searchRef = (0, react$1.useRef)(null);
+	useSearchFieldHotkey(searchRef);
 	const devices = (0, react$1.useMemo)(() => {
 		const all = (rawDevices ?? []).map((d) => ({
 			id: d.id,
@@ -61225,6 +61481,7 @@ function DeviceSelectorPicker({ value, onChange, includeLinked, onIncludeLinkedC
 					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "relative",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-foreground-subtle" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							ref: searchRef,
 							type: "search",
 							value: search,
 							onChange: (e) => setSearch(e.target.value),
@@ -62327,6 +62584,7 @@ function FilterBar({ filters, values, onChange, className }) {
 				placeholder: searchFilter.placeholder ?? t("uiLibrary.filterBar.search", "Search..."),
 				value: values[searchFilter.key] ?? "",
 				onChange: (e) => handleChange(searchFilter.key, e.target.value),
+				searchHotkey: true,
 				leftSlot: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, { className: "h-3 w-3 text-foreground-subtle" }),
 				className: "flex-1"
 			}), hasNonSearchFilters && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -62388,6 +62646,7 @@ function FilterBar({ filters, values, onChange, className }) {
 					placeholder: filter.placeholder ?? t("uiLibrary.filterBar.search", "Search..."),
 					value: values[filter.key] ?? "",
 					onChange: (e) => handleChange(filter.key, e.target.value),
+					searchHotkey: true,
 					leftSlot: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, { className: "h-3 w-3 text-foreground-subtle" }),
 					className: "w-48"
 				}, filter.key);
@@ -62921,7 +63180,7 @@ function mountAddonPage(PageComponent, options = {}) {
 		console.error(`[mountAddonPage] Element #${rootId} not found`);
 		return;
 	}
-	(0, react_dom_client.createRoot)(root).render((0, react$1.createElement)(DevShell, {
+	(0, react_dom_client.createRoot)(root).render((0, react$1.createElement)(HotkeyProvider, null, (0, react$1.createElement)(DevShell, {
 		serverUrl,
 		title,
 		children: ({ trpc, theme }) => (0, react$1.createElement)(PageComponent, {
@@ -62931,7 +63190,7 @@ function mountAddonPage(PageComponent, options = {}) {
 				console.log("[dev] navigate:", path);
 			}
 		})
-	}));
+	})));
 }
 //#endregion
 //#region src/composites/node-picker.tsx
@@ -67243,6 +67502,8 @@ function zoneUnavailable(zones, t) {
 	if (zones.state === "failed") return t("uiLibrary.deviceFilterBar.zonesUnavailable", "zones unavailable");
 }
 function DeviceFilterBar({ filters, onFiltersChange, typeOptions, zoneOptions, locationOptions, zones, grouping, searchPlaceholder, searchLabel, disabled = false }) {
+	const searchFieldRef = (0, react$1.useRef)(null);
+	useSearchFieldHotkey(searchFieldRef);
 	const t = useUiText();
 	const [text, setText] = (0, react$1.useState)(filters.query);
 	const latest = (0, react$1.useRef)({
@@ -67272,6 +67533,7 @@ function DeviceFilterBar({ filters, onFiltersChange, typeOptions, zoneOptions, l
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: INPUT_SHELL,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, { className: "h-3.5 w-3.5 shrink-0 text-foreground-subtle" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					ref: searchFieldRef,
 					type: "text",
 					value: text,
 					placeholder: searchPlaceholder,
@@ -67397,6 +67659,64 @@ function withResolvedParentDetail(devices) {
 	return changed ? next : devices;
 }
 //#endregion
+//#region src/composites/device-picker/device-provider-label.ts
+/**
+* Who offers a device, as the picker draws it: "{addon name} ({integration
+* name})" — the integration part only when the device comes from a named
+* integration instance — otherwise just "{addon name}".
+*
+* Derived from what the UI already reads: the device's providing `addonId` and
+* its `integrationId` (fleet listing), the addon's manifest name
+* (`addons.list`) and the instance's name (`integrations.list`). Nothing here
+* knows a kind or an addon; a row whose provider cannot be resolved shows no
+* line at all rather than a guess.
+*/
+/** "Home Assistant (Casa)", or "Home Assistant" without an instance name. */
+function formatProviderLabel(addonName, integrationName) {
+	const instance = integrationName?.trim() ?? "";
+	return instance === "" || instance === addonName ? addonName : `${addonName} (${instance})`;
+}
+/** `deviceId → provider label`; a device whose addon is unknown is absent. */
+function providerLabelsOf(fleet, addons, integrations) {
+	const addonName = /* @__PURE__ */ new Map();
+	for (const a of addons) if (a.name !== void 0 && a.name !== "") addonName.set(a.id, a.name);
+	const instanceName = new Map(integrations.map((i) => [i.id, i.name]));
+	const out = /* @__PURE__ */ new Map();
+	for (const d of fleet) {
+		const addon = addonName.get(d.addonId);
+		if (addon === void 0) continue;
+		const instance = d.integrationId === void 0 ? null : instanceName.get(d.integrationId) ?? null;
+		out.set(d.id, formatProviderLabel(addon, instance));
+	}
+	return out;
+}
+var NONE = /* @__PURE__ */ new Map();
+var PROVIDER_LABELS_STALE_MS = 6e4;
+/**
+* The labels for every device in the fleet; empty until the reads answer (a
+* failed read draws no provider line — it is a hint, never a gate).
+*/
+function useDeviceProviderLabels(enabled) {
+	const trpcClient = useSystem().trpcClient;
+	const query = (0, _tanstack_react_query.useQuery)({
+		queryKey: ["ui-library", "device-provider-labels"],
+		enabled,
+		staleTime: PROVIDER_LABELS_STALE_MS,
+		queryFn: async () => {
+			const [fleet, addons, integrations] = await Promise.all([
+				trpcClient.deviceManager.listAll.query({ projection: "slim" }),
+				trpcClient.addons.list.query(),
+				trpcClient.integrations.list.query()
+			]);
+			return providerLabelsOf(fleet, addons.map((a) => ({
+				id: a.manifest.id,
+				name: a.manifest.name
+			})), integrations);
+		}
+	});
+	return (0, react$1.useMemo)(() => query.data ?? NONE, [query.data]);
+}
+//#endregion
 //#region src/composites/device-picker/device-picker-grouping.ts
 /**
 * The admin side of the device picker's "Group by" (Zone | Location | None):
@@ -67761,7 +68081,7 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, s
 		children: [
 			listState === "pending" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevicesLoadingLine, { noun: plural }),
 			listState === "failed" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevicesFailedLine, { noun: noun === "camera" ? "devices" : plural }),
-			!(selection === "single" && chips.length === 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			!(selection === "single" && chips.length === 0 && showAll) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "flex flex-wrap items-center gap-1",
 				children: [
 					chips.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -67825,6 +68145,7 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, s
 		]
 	});
 }
+var NO_PROVIDERS = /* @__PURE__ */ new Map();
 /**
 * The device picker's panel: mounted only while the list is open, so the zone
 * read below happens only then (for Zone grouping and the Zone filter).
@@ -67842,8 +68163,10 @@ function GroupedPickerPanel(props) {
 		stored.setGroupBy(next);
 	};
 	const zones = usePickerSiteZones(true);
+	const providers = useDeviceProviderLabels(true);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerPanel, {
 		...props,
+		providers,
 		grouping: {
 			groupBy,
 			onGroupByChange,
@@ -67864,7 +68187,7 @@ var NO_ZONES = {
 	zones: []
 };
 /** The searchable, grouped list — rendered one page at a time. */
-function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, locked, lockedNote, showAll, selection, grouping }) {
+function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, locked, lockedNote, showAll, selection, grouping, providers = NO_PROVIDERS }) {
 	const t = useUiText();
 	const radioName = (0, react$1.useId)();
 	const [filters, setFilters] = (0, react$1.useState)(PICKER_NO_FILTERS);
@@ -67967,7 +68290,8 @@ function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, dis
 					locked,
 					lockedNote,
 					selection,
-					radioName
+					radioName,
+					providers
 				}, row.key)), page.remaining > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					className: "mt-1 w-full rounded border border-border py-1 text-[11px] text-foreground-subtle hover:bg-surface-hover",
@@ -67997,7 +68321,7 @@ function secondLine(device, groupBy) {
 	].filter((part) => part !== null);
 	return parts.length > 0 ? parts.join(" · ") : void 0;
 }
-function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTitle, groupBy, disabled, locked, lockedNote, selection, radioName }) {
+function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTitle, groupBy, disabled, locked, lockedNote, selection, radioName, providers }) {
 	const t = useUiText();
 	const single = selection === "single";
 	if (row.kind === "header") {
@@ -68049,6 +68373,8 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 	const isLocked = locked.has(row.device.id);
 	const note = isLocked ? lockedNote : annotate?.(row.device.id);
 	const second = secondLine(row.device, groupBy);
+	const rowId = row.device.id;
+	const provider = typeof rowId === "number" ? providers.get(rowId) : void 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 		className: "flex cursor-pointer items-center gap-2.5 px-3 py-1 text-xs text-foreground hover:bg-surface-hover",
 		"data-testid": "device-picker-row",
@@ -68072,6 +68398,11 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 					className: "truncate text-[10px] text-foreground-subtle",
 					children: second
 				}),
+				provider !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "truncate text-[10px] text-foreground-subtle",
+					"data-testid": "device-picker-provider",
+					children: provider
+				}),
 				note !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: isLocked ? "text-[10px] text-foreground-subtle" : "text-[10px] text-warning",
 					children: note
@@ -71235,6 +71566,7 @@ exports.ExtensionsPanel = ExtensionsPanel;
 exports.ExternalLink = ExternalLink;
 exports.Eye = Eye;
 exports.EyeOff = EyeOff;
+exports.FALLBACK_SCOPE = FALLBACK_SCOPE;
 exports.FAST_ICON_GLYPHS = FAST_ICON_GLYPHS;
 exports.FILL = FILL;
 exports.FLEET_LIST_GC_TIME_MS = FLEET_LIST_GC_TIME_MS;
@@ -71286,6 +71618,8 @@ exports.History = History;
 exports.HistoryChart = HistoryChart;
 exports.HistoryWindowBar = HistoryWindowBar;
 exports.HlsVideo = HlsVideo;
+exports.HotkeyProvider = HotkeyProvider;
+exports.HotkeyScope = HotkeyScope;
 exports.House = House;
 exports.HoverZoomImage = HoverZoomImage;
 exports.HubSessionTestCard = HubSessionTestCard;
@@ -71717,6 +72051,7 @@ exports.defaultUiText = defaultUiText;
 exports.deriveDeviceKind = deriveDeviceKind;
 exports.deriveWebrtcDebugStats = deriveWebrtcDebugStats;
 exports.describeDeviceSelector = describeDeviceSelector;
+exports.detectPlatform = detectPlatform;
 exports.deviceIntegrationResolver = deviceIntegrationResolver;
 exports.deviceListStateOf = deviceListStateOf;
 exports.deviceMatchesFilter = deviceMatchesFilter;
@@ -71813,6 +72148,7 @@ exports.loadRemoteBundle = loadRemoteBundle;
 exports.lucideExportName = lucideExportName;
 exports.makeScrubBridge = makeScrubBridge;
 exports.mapRootDetectorPlacements = mapRootDetectorPlacements;
+exports.matchesCombo = matchesCombo;
 exports.mergeSecretForSubmit = mergeSecretForSubmit;
 exports.metadataEntries = metadataEntries;
 exports.metadataString = metadataString;
@@ -71844,6 +72180,7 @@ exports.pageSizeLabel = pageSizeLabel;
 exports.paginateRows = paginateRows;
 exports.parentDetailOf = parentDetailOf;
 exports.parseCapKey = parseCapKey;
+exports.parseCombo = parseCombo;
 exports.parseConsumableLevel = parseConsumableLevel;
 exports.parseIceCandidate = parseIceCandidate;
 exports.parsePickerGroupBy = parsePickerGroupBy;
@@ -72454,6 +72791,7 @@ exports.useHeatingValveGetStatus = useHeatingValveGetStatus;
 exports.useHistoryPanels = useHistoryPanels;
 exports.useHistoryReader = useHistoryReader;
 exports.useHistoryReads = useHistoryReads;
+exports.useHotkey = useHotkey;
 exports.useHumidifierGetStatus = useHumidifierGetStatus;
 exports.useHumidifierSetMode = useHumidifierSetMode;
 exports.useHumidifierSetOn = useHumidifierSetOn;
@@ -73048,6 +73386,7 @@ exports.useScriptRunnerGetStatus = useScriptRunnerGetStatus;
 exports.useScriptRunnerRun = useScriptRunnerRun;
 exports.useScriptRunnerStop = useScriptRunnerStop;
 exports.useScrubController = useScrubController;
+exports.useSearchFieldHotkey = useSearchFieldHotkey;
 exports.useServerManagementApplyServerUpdate = useServerManagementApplyServerUpdate;
 exports.useServerManagementCheckServerUpdate = useServerManagementCheckServerUpdate;
 exports.useServerManagementGetServerPackageStatus = useServerManagementGetServerPackageStatus;