@camstack/ui-library 1.2.321 → 1.2.323

package/dist/index.cjs

@@ -11061,6 +11061,12 @@ var useDishwasherSetOption = trpc.dishwasher.setOption.useMutation;
 var useDishwasherGetOptions = trpc.dishwasher.getOptions.useQuery;
 /** Generated alias around `trpc.dishwasher.getStatus.useQuery`. */
 var useDishwasherGetStatus = trpc.dishwasher.getStatus.useQuery;
+/** Generated alias around `trpc.displayPalette.getPalette.useQuery`. */
+var useDisplayPaletteGetPalette = trpc.displayPalette.getPalette.useQuery;
+/** Generated alias around `trpc.displayPalette.listPresets.useQuery`. */
+var useDisplayPaletteListPresets = trpc.displayPalette.listPresets.useQuery;
+/** Generated alias around `trpc.displayPalette.setPalette.useMutation`. */
+var useDisplayPaletteSetPalette = trpc.displayPalette.setPalette.useMutation;
 /** Generated alias around `trpc.doorbell.getStatus.useQuery`. */
 var useDoorbellGetStatus = trpc.doorbell.getStatus.useQuery;
 /** Generated alias around `trpc.enumSensor.getStatus.useQuery`. */
@@ -33143,6 +33149,143 @@ var Switch = (0, react$1.forwardRef)(({ className, checked, onCheckedChange, lab
 });
 Switch.displayName = "Switch";
 //#endregion
+//#region src/primitives/tabs-list-scroll.tsx
+/** Scroll offsets and sizes — jsdom defaults are 0, so tests set these explicitly. */
+function readTabStripOverflow(el) {
+	const epsilon = 1;
+	const { scrollLeft, scrollWidth, clientWidth } = el;
+	const hasOverflow = scrollWidth > clientWidth + epsilon;
+	return {
+		overflowLeft: hasOverflow && scrollLeft > epsilon,
+		overflowRight: hasOverflow && scrollLeft + clientWidth < scrollWidth - epsilon
+	};
+}
+function scrollTabIntoViewNearest(tab) {
+	if (typeof tab.scrollIntoView === "function") tab.scrollIntoView({
+		inline: "nearest",
+		block: "nearest"
+	});
+}
+function scrollStripByOneTab(el, direction) {
+	const tabs = el.querySelectorAll("[role=\"tab\"]");
+	if (tabs.length === 0) return;
+	const scrollLeft = el.scrollLeft;
+	if (direction === "right") {
+		for (const tab of tabs) if (tab.offsetLeft + tab.offsetWidth > scrollLeft + 1) {
+			scrollTabIntoViewNearest(tab);
+			return;
+		}
+		return;
+	}
+	for (let i = tabs.length - 1; i >= 0; i--) {
+		const tab = tabs[i];
+		if (tab === void 0) continue;
+		if (tab.offsetLeft < scrollLeft - 1) {
+			scrollTabIntoViewNearest(tab);
+			return;
+		}
+	}
+}
+function scrollActiveTabIntoView(el) {
+	const active = el.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
+	if (active !== null && typeof active.scrollIntoView === "function") active.scrollIntoView({
+		inline: "nearest",
+		block: "nearest"
+	});
+}
+/**
+* Horizontally scrollable tab strip with edge fades when tabs are hidden and,
+* on fine-pointer devices, chevron buttons that scroll one tab at a time.
+* Touch keeps native swipe — no chevrons on coarse pointers.
+*/
+function TabsListScrollShell({ activeTabKey, listClassName, className, children, ...props }) {
+	const scrollRef = (0, react$1.useRef)(null);
+	const [overflow, setOverflow] = (0, react$1.useState)({
+		overflowLeft: false,
+		overflowRight: false
+	});
+	const [finePointer, setFinePointer] = (0, react$1.useState)(false);
+	const remeasure = (0, react$1.useCallback)(() => {
+		const el = scrollRef.current;
+		if (el === null) return;
+		setOverflow(readTabStripOverflow(el));
+	}, []);
+	(0, react$1.useEffect)(() => {
+		remeasure();
+		const el = scrollRef.current;
+		if (el === null) return;
+		el.addEventListener("scroll", remeasure, { passive: true });
+		const ro = typeof ResizeObserver !== "undefined" ? new ResizeObserver(remeasure) : null;
+		ro?.observe(el);
+		for (const child of el.children) ro?.observe(child);
+		return () => {
+			el.removeEventListener("scroll", remeasure);
+			ro?.disconnect();
+		};
+	}, [remeasure, children]);
+	(0, react$1.useEffect)(() => {
+		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+		const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
+		const apply = () => {
+			setFinePointer(mq.matches);
+		};
+		apply();
+		mq.addEventListener("change", apply);
+		return () => mq.removeEventListener("change", apply);
+	}, []);
+	(0, react$1.useEffect)(() => {
+		const el = scrollRef.current;
+		if (el === null || activeTabKey === void 0) return;
+		scrollActiveTabIntoView(el);
+		remeasure();
+	}, [activeTabKey, remeasure]);
+	const scrollBy = (direction) => {
+		const el = scrollRef.current;
+		if (el === null) return;
+		scrollStripByOneTab(el, direction);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: cn("relative min-w-0", className),
+		"data-tab-strip-overflow-left": overflow.overflowLeft ? "" : void 0,
+		"data-tab-strip-overflow-right": overflow.overflowRight ? "" : void 0,
+		children: [
+			overflow.overflowLeft && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute inset-y-0 left-0 z-[1] w-8 bg-gradient-to-r from-background to-transparent"
+			}),
+			overflow.overflowRight && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: "pointer-events-none absolute inset-y-0 right-0 z-[1] w-8 bg-gradient-to-l from-background to-transparent"
+			}),
+			finePointer && overflow.overflowLeft && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				icon: ChevronLeft,
+				"aria-label": "Scroll tabs left",
+				className: "absolute left-0 top-1/2 z-[2] -translate-y-1/2 bg-background/80 shadow-sm",
+				onClick: () => scrollBy("left")
+			}),
+			finePointer && overflow.overflowRight && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				icon: ChevronRight,
+				"aria-label": "Scroll tabs right",
+				className: "absolute right-0 top-1/2 z-[2] -translate-y-1/2 bg-background/80 shadow-sm",
+				onClick: () => scrollBy("right")
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: scrollRef,
+				role: "tablist",
+				className: listClassName,
+				...props,
+				children
+			})
+		]
+	});
+}
+//#endregion
 //#region src/primitives/tabs.tsx
 var TabsContext = (0, react$1.createContext)(null);
 function useTabsContext() {
@@ -33187,17 +33330,18 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", appear
 * pinned to `hidden` makes it impossible here.
 */
 function TabsList({ className, ...props }) {
-	const { appearance } = useTabsContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		role: "tablist",
-		className: cn("flex flex-row overflow-x-auto overflow-y-hidden", appearance === "pills" ? "gap-1 border-b border-border-subtle py-1" : "border-b border-border-subtle", className),
+	const { appearance, value } = useTabsContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsListScrollShell, {
+		activeTabKey: value,
+		listClassName: cn("flex flex-row overflow-x-auto overflow-y-hidden", appearance === "pills" ? "gap-1 border-b border-border-subtle py-1" : "border-b border-border-subtle", className),
 		...props
 	});
 }
-function TabsTrigger({ value, className, ...props }) {
+var TabsTrigger = (0, react$1.forwardRef)(function TabsTrigger({ value, className, ...props }, ref) {
 	const { value: activeValue, setValue, appearance } = useTabsContext();
 	const isActive = value === activeValue;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		ref,
 		type: "button",
 		role: "tab",
 		"aria-selected": isActive,
@@ -33207,7 +33351,7 @@ function TabsTrigger({ value, className, ...props }) {
 		onClick: () => setValue(value),
 		...props
 	});
-}
+});
 function TabsContent({ value, className, ...props }) {
 	const { value: activeValue } = useTabsContext();
 	if (value !== activeValue) return null;
@@ -39971,58 +40115,66 @@ function useDataTableFilter(rows, config, initialState = EMPTY_DATA_TABLE_FILTER
 //#endregion
 //#region src/composites/detection-colors.ts
 /**
-* Detection class colors — a thin adapter over the SINGLE event-kind
-* taxonomy dictionary in `@camstack/types` (`EVENT_TAXONOMY`). Colors are no
-* longer duplicated here; this module only adds the UI-only classes the
-* taxonomy doesn't model (face / plate) and the deterministic hash fallback.
+* Detection class colours — the bundled display palette (D939).
 *
-* Used by: DetectionCanvas / DetectionResultTree / DetectionOverlay (UI),
-* and any other place that visualizes detection classes.
+* A mounted {@link DisplayPaletteProvider} paints the cluster's effective
+* palette instead. There is no second hex table here.
 */
-/** UI-only classes not modelled in the event taxonomy (sub-detections). */
-var UI_ONLY_COLORS = {
-	face: "#a855f7",
-	plate: "#ec4899"
-};
+var BUNDLED$1 = (0, _camstack_types.bundledCamstack)();
+/** Marks that are palette entries and not detection classes. */
+var MARK_IDS = new Set([
+	"live",
+	"recording",
+	"heatmapScrub"
+]);
 /**
-* Fixed colors for known detection classes — derived from the taxonomy
-* (every detection/motion kind) plus the UI-only face/plate classes. Kept as
-* a named export for back-compat with existing consumers.
+* Fixed colours for known classes, from the bundled CamStack preset.
+* Kept for callers that read the map directly.
 */
-var CLASS_COLORS = Object.freeze({
-	...Object.fromEntries(Object.values(_camstack_types.EVENT_TAXONOMY).filter((e) => e.category === "detection" || e.kind === "motion").map((e) => [e.kind, e.color])),
-	...UI_ONLY_COLORS
-});
-/** Fallback color palette for unknown classes (deterministic hash-based) */
-var FALLBACK_PALETTE = [
-	"#ef4444",
-	"#8b5cf6",
-	"#06b6d4",
-	"#f97316",
-	"#10b981",
-	"#6366f1",
-	"#e11d48",
-	"#0891b2",
-	"#7c3aed",
-	"#059669"
-];
-/** Primary/default color when nothing else matches */
-var DEFAULT_COLOR = _camstack_types.DEFAULT_EVENT_COLOR;
-/**
-* Get the color for a detection class name.
-* Resolves: custom override → taxonomy/UI-only fixed color → deterministic
-* hash-based color for unknown classes.
-*/
-function getClassColor(className, customColors) {
-	if (customColors?.[className]) return customColors[className];
-	if (customColors?.[className.toLowerCase()]) return customColors[className.toLowerCase()];
-	const fromTaxonomy = _camstack_types.EVENT_TAXONOMY[className] ?? _camstack_types.EVENT_TAXONOMY[className.toLowerCase()];
-	if (fromTaxonomy !== void 0) return fromTaxonomy.color;
-	if (CLASS_COLORS[className]) return CLASS_COLORS[className];
-	if (CLASS_COLORS[className.toLowerCase()]) return CLASS_COLORS[className.toLowerCase()];
-	let hash = 0;
-	for (let i = 0; i < className.length; i++) hash = hash * 31 + (className.codePointAt(i) ?? 0) >>> 0;
-	return FALLBACK_PALETTE[hash % FALLBACK_PALETTE.length] ?? DEFAULT_COLOR;
+var CLASS_COLORS = Object.freeze(Object.fromEntries(_camstack_types.PALETTE_ENTRY_IDS.filter((id) => !MARK_IDS.has(id)).map((id) => [id, (0, _camstack_types.paintHex)(BUNDLED$1.swatches, BUNDLED$1.fallbacks, id)])));
+function firstFallback(fallbacks) {
+	const hex = fallbacks[0];
+	if (hex === void 0) throw new Error("display palette has no fallback colour");
+	return hex;
+}
+/** Primary colour when nothing else matches — the first bundled fallback. */
+var DEFAULT_COLOR = firstFallback(BUNDLED$1.fallbacks);
+/**
+* Colour for a detection class. Custom overrides win, then the palette
+* (the bundled preset when none is passed). Unknown classes hash into
+* the palette's fallbacks.
+*/
+function getClassColor(className, customColors, palette) {
+	const direct = customColors?.[className];
+	if (direct !== void 0 && direct.length > 0) return direct;
+	const lower = className.toLowerCase();
+	const lowered = customColors?.[lower];
+	if (lowered !== void 0 && lowered.length > 0) return lowered;
+	return (0, _camstack_types.paintHex)(palette?.swatches ?? BUNDLED$1.swatches, palette?.fallbacks ?? BUNDLED$1.fallbacks, className);
+}
+//#endregion
+//#region src/composites/display-palette-context.tsx
+/**
+* The cluster palette, when a host has read `display-palette` (D939).
+* No provider, a pending read, or an unknown store all paint the bundled
+* CamStack preset. Only `ready` replaces it. Callers that must say the
+* store was unreadable read {@link useDisplayPaletteView}.
+*/
+var BUNDLED = (0, _camstack_types.bundledCamstack)();
+var DisplayPaletteContext = (0, react$1.createContext)({ status: "absent" });
+function DisplayPaletteProvider({ value, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DisplayPaletteContext.Provider, {
+		value,
+		children
+	});
+}
+function useDisplayPaletteView() {
+	return (0, react$1.useContext)(DisplayPaletteContext);
+}
+function useClassPainter() {
+	const view = (0, react$1.useContext)(DisplayPaletteContext);
+	const palette = view.status === "ready" ? view.palette : BUNDLED;
+	return (className, customColors) => getClassColor(className, customColors, palette);
 }
 //#endregion
 //#region src/composites/detection-canvas.tsx
@@ -40037,8 +40189,9 @@ function getClassColor(className, customColors) {
 */
 function DetectionCanvas({ src, imageWidth, imageHeight, detections = [], classColors, aspectRatio, className, placeholder, showConfidence = true, minConfidence = 0, borderWidth = 2 }) {
 	const t = useUiText();
+	const paint = useClassPainter();
 	function getColor(cls) {
-		return getClassColor(cls, classColors);
+		return paint(cls, classColors);
 	}
 	const ratio = aspectRatio ?? (imageWidth && imageHeight ? `${imageWidth}/${imageHeight}` : "16/9");
 	const filtered = detections.filter((d) => d.score >= minConfidence);
@@ -40095,6 +40248,7 @@ function DetectionCanvas({ src, imageWidth, imageHeight, detections = [], classC
 	});
 }
 function BoundingBox({ detection, imageWidth, imageHeight, color, showConfidence, borderWidth, children }) {
+	const paint = useClassPainter();
 	const { x, y, width, height } = detection.bbox;
 	const labelsElement = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "absolute left-0 flex flex-col items-start gap-px",
@@ -40108,7 +40262,7 @@ function BoundingBox({ detection, imageWidth, imageHeight, color, showConfidence
 			children: [detection.macroClass, showConfidence && ` ${(detection.score * 100).toFixed(0)}%`]
 		}), detection.labels.map((l, k) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 			className: "text-[9px] font-semibold px-1 rounded-sm whitespace-nowrap text-white",
-			style: { backgroundColor: getClassColor(l.label) },
+			style: { backgroundColor: paint(l.label) },
 			children: [
 				l.label,
 				" ",
@@ -40179,6 +40333,7 @@ function MaskOverlay({ mask, maskWidth, maskHeight, bbox, imageWidth, imageHeigh
 	});
 }
 function ChildBoundingBox({ child, parentBbox, color, showConfidence }) {
+	const paint = useClassPainter();
 	if (parentBbox.width <= 0 || parentBbox.height <= 0) return null;
 	const relLeft = (child.bbox.x - parentBbox.x) / parentBbox.width * 100;
 	const relTop = (child.bbox.y - parentBbox.y) / parentBbox.height * 100;
@@ -40207,7 +40362,7 @@ function ChildBoundingBox({ child, parentBbox, color, showConfidence }) {
 				children: [child.macroClass, showConfidence && ` ${(child.score * 100).toFixed(0)}%`]
 			}), child.labels.map((l, k) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				className: "text-[8px] font-semibold px-0.5 rounded-sm whitespace-nowrap text-white",
-				style: { backgroundColor: getClassColor(l.label) },
+				style: { backgroundColor: paint(l.label) },
 				children: [
 					l.label,
 					" ",
@@ -40385,9 +40540,10 @@ function MotionZones({ motion }) {
 * one a detection box can never answer.
 */
 function StationaryBoxes({ boxes }) {
+	const paint = useClassPainter();
 	const now = Date.now();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: boxes.map((b) => {
-		const color = getClassColor(b.className);
+		const color = paint(b.className);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			"data-census-box": "",
 			className: "absolute",
@@ -40418,6 +40574,7 @@ function StationaryBoxes({ boxes }) {
 	}) });
 }
 function DetectionBoxes({ detections, frameWidth, frameHeight }) {
+	const paint = useClassPainter();
 	if (frameWidth === 0 || frameHeight === 0) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: detections.map((d) => {
 		const { x, y, width: bw, height: bh } = d.bbox;
@@ -40425,7 +40582,7 @@ function DetectionBoxes({ detections, frameWidth, frameHeight }) {
 		const top = y / frameHeight * 100;
 		const width = bw / frameWidth * 100;
 		const height = bh / frameHeight * 100;
-		const color = getClassColor(d.macroClass);
+		const color = paint(d.macroClass);
 		const parts = [`${d.macroClass} ${(d.score * 100).toFixed(0)}%`];
 		for (const l of d.labels) parts.push(l.label);
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -40500,7 +40657,8 @@ function DetectionResultTree({ detections, classColors, className, hiddenKeys, o
 	});
 }
 function DetectionNode({ detection, children_, colors, hiddenKeys, onToggleVisibility }) {
-	const color = getClassColor(detection.macroClass, colors);
+	const paint = useClassPainter();
+	const color = paint(detection.macroClass, colors);
 	const isVisible = !hiddenKeys?.has(detection.id);
 	const mask = detection.debug?.mask;
 	const maskWidth = detection.debug?.maskWidth;
@@ -40565,8 +40723,8 @@ function DetectionNode({ detection, children_, colors, hiddenKeys, onToggleVisib
 				children: detection.labels.map((l, k) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 					className: "inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded-full",
 					style: {
-						backgroundColor: getClassColor(l.label, colors) + "20",
-						color: getClassColor(l.label, colors)
+						backgroundColor: paint(l.label, colors) + "20",
+						color: paint(l.label, colors)
 					},
 					children: [
 						l.label,
@@ -40595,10 +40753,11 @@ function DetectionNode({ detection, children_, colors, hiddenKeys, onToggleVisib
 	});
 }
 function ChildrenTree({ items, colors, hiddenKeys, onToggleVisibility }) {
+	const paint = useClassPainter();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "ml-4 mt-1.5 space-y-1.5 border-l-2 border-border pl-3",
 		children: items.map((child) => {
-			const childColor = getClassColor(child.macroClass, colors);
+			const childColor = paint(child.macroClass, colors);
 			const isVisible = !hiddenKeys?.has(child.id);
 			const mask = child.debug?.mask;
 			const maskWidth = child.debug?.maskWidth;
@@ -40642,8 +40801,8 @@ function ChildrenTree({ items, colors, hiddenKeys, onToggleVisibility }) {
 					children: child.labels.map((l, k) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "inline-flex items-center gap-0.5 text-[9px] font-medium px-1 py-0.5 rounded-full",
 						style: {
-							backgroundColor: getClassColor(l.label, colors) + "20",
-							color: getClassColor(l.label, colors)
+							backgroundColor: paint(l.label, colors) + "20",
+							color: paint(l.label, colors)
 						},
 						children: [
 							l.label,
@@ -40661,6 +40820,7 @@ function ChildrenTree({ items, colors, hiddenKeys, onToggleVisibility }) {
 }
 function AlternateLabelsSection({ alternateLabels, colors }) {
 	const [expanded, setExpanded] = (0, react$1.useState)(false);
+	const paint = useClassPainter();
 	const t = useUiText();
 	const sources = Object.keys(alternateLabels);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -40688,8 +40848,8 @@ function AlternateLabelsSection({ alternateLabels, colors }) {
 					children: labels.map((l, k) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 						className: "inline-flex items-center gap-0.5 text-[9px] px-1 py-0.5 rounded-full",
 						style: {
-							backgroundColor: getClassColor(source, colors) + "10",
-							color: getClassColor(source, colors),
+							backgroundColor: paint(source, colors) + "10",
+							color: paint(source, colors),
 							opacity: Math.max(.4, l.score)
 						},
 						children: [l.label, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -65327,7 +65487,7 @@ function noItemsSentence(noun, emptyMeansAll, t) {
 		noun: pickerNounLabel(noun, t)
 	});
 }
-function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle: groupTitleProp, emptyLabel, annotate, disabled = false, testId, showAll = false, lockedIds, lockedNote: lockedNoteProp }) {
+function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, selection = "multiple", groupBy: pinnedGroupBy, emptyMeansAll = false, savedHadDevices = false, noun = "camera", groupTitle: groupTitleProp, emptyLabel, annotate, disabled = false, testId, showAll = false, lockedIds, lockedNote: lockedNoteProp }) {
 	const t = useUiText();
 	const groupTitle = groupTitleProp ?? ((group) => deviceGroupTitle(group, t));
 	const lockedNote = lockedNoteProp ?? t("uiLibrary.devicePicker.alreadyAdded", "Already added");
@@ -65360,7 +65520,7 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 		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 }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			!(selection === "single" && chips.length === 0) && /* @__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", {
@@ -65404,7 +65564,9 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 				groupTitle,
 				noun,
 				disabled,
-				showAll
+				showAll,
+				selection,
+				...pinnedGroupBy !== void 0 ? { pinnedGroupBy } : {}
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerPanel, {
 				devices,
 				value,
@@ -65415,7 +65577,8 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 				groupTitle,
 				noun,
 				disabled,
-				showAll
+				showAll,
+				selection
 			})),
 			widening && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DevicesWidenWarning, { noun })
 		]
@@ -65426,13 +65589,23 @@ function DevicePicker({ devices: devicesIn, listState, fleet, value, onChange, e
 * read below happens only then (for Zone grouping and the Zone filter).
 */
 function GroupedPickerPanel(props) {
-	const { groupBy, setGroupBy } = useStoredGroupBy();
+	const stored = useStoredGroupBy();
+	const [localGroupBy, setLocalGroupBy] = (0, react$1.useState)(null);
+	const pinned = props.pinnedGroupBy;
+	const groupBy = pinned !== void 0 ? localGroupBy ?? pinned : stored.groupBy;
+	const onGroupByChange = (next) => {
+		if (pinned !== void 0) {
+			setLocalGroupBy(next);
+			return;
+		}
+		stored.setGroupBy(next);
+	};
 	const zones = usePickerSiteZones(true);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PickerPanel, {
 		...props,
 		grouping: {
 			groupBy,
-			onGroupByChange: setGroupBy,
+			onGroupByChange,
 			zones
 		}
 	});
@@ -65450,8 +65623,9 @@ 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, grouping }) {
+function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, disabled, locked, lockedNote, showAll, selection, grouping }) {
 	const t = useUiText();
+	const radioName = (0, react$1.useId)();
 	const [filters, setFilters] = (0, react$1.useState)(PICKER_NO_FILTERS);
 	const [toggles, setToggles] = (0, react$1.useState)(/* @__PURE__ */ new Map());
 	const [shown, setShown] = (0, react$1.useState)(60);
@@ -65525,7 +65699,10 @@ function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, dis
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 				className: "mt-1 text-[10px] text-foreground-subtle",
-				children: t("uiLibrary.devicePicker.shownOf", "{{shown}} of {{total}} shown · {{selected}} selected", {
+				children: selection === "single" ? t("uiLibrary.devicePicker.shownOfSingle", "{{shown}} of {{total}} shown", {
+					shown: matches.length,
+					total: devices.length
+				}) : t("uiLibrary.devicePicker.shownOf", "{{shown}} of {{total}} shown · {{selected}} selected", {
 					shown: matches.length,
 					total: devices.length,
 					selected: value.length
@@ -65547,7 +65724,9 @@ function PickerPanel({ devices, value, onChange, annotate, groupTitle, noun, dis
 					groupBy: shownBy,
 					disabled,
 					locked,
-					lockedNote
+					lockedNote,
+					selection,
+					radioName
 				}, 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",
@@ -65577,8 +65756,9 @@ 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 }) {
+function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTitle, groupBy, disabled, locked, lockedNote, selection, radioName }) {
 	const t = useUiText();
+	const single = selection === "single";
 	if (row.kind === "header") {
 		const { group, expanded } = row;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -65596,7 +65776,7 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 							className: "truncate",
 							children: groupTitle(group)
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						!single && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 							className: "font-normal normal-case",
 							children: [
 								"(",
@@ -65608,14 +65788,14 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 						})
 					]
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				!single && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					disabled,
 					className: "text-[10px] text-primary hover:underline disabled:opacity-50",
 					onClick: () => onChange(selectPickerGroup(value, group)),
 					children: t("uiLibrary.devicePicker.all", "All")
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				!single && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					disabled,
 					className: "text-[10px] text-foreground-subtle hover:underline disabled:opacity-50",
@@ -65632,10 +65812,11 @@ function PickerRowView({ row, value, onChange, onToggleGroup, annotate, groupTit
 		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",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-			type: "checkbox",
+			type: single ? "radio" : "checkbox",
+			...single ? { name: radioName } : {},
 			checked: row.selected || isLocked,
 			disabled: disabled || isLocked,
-			onChange: () => onChange(togglePickerDevice(value, row.device.id)),
+			onChange: () => onChange(single ? [row.device.id] : togglePickerDevice(value, row.device.id)),
 			className: "accent-primary",
 			"data-device-id": String(row.device.id)
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
@@ -68633,6 +68814,7 @@ exports.DialogHeader = DialogHeader;
 exports.DialogTitle = DialogTitle;
 exports.DialogTrigger = DialogTrigger;
 exports.DiscoveryPanel = DiscoveryPanel;
+exports.DisplayPaletteProvider = DisplayPaletteProvider;
 exports.Dog = Dog;
 exports.DoorClosed = DoorClosed;
 exports.DoorOpen = DoorOpen;
@@ -69534,6 +69716,7 @@ exports.useCameraStreamsGetRtspEntries = useCameraStreamsGetRtspEntries;
 exports.useCameraStreamsPickStream = useCameraStreamsPickStream;
 exports.useCapabilityPresence = useCapabilityPresence;
 exports.useCarbonMonoxideGetStatus = useCarbonMonoxideGetStatus;
+exports.useClassPainter = useClassPainter;
 exports.useClimateControlGetStatus = useClimateControlGetStatus;
 exports.useClimateControlSetFanMode = useClimateControlSetFanMode;
 exports.useClimateControlSetMode = useClimateControlSetMode;
@@ -69802,6 +69985,10 @@ exports.useDishwasherSetVarioSpeedPlus = useDishwasherSetVarioSpeedPlus;
 exports.useDishwasherStart = useDishwasherStart;
 exports.useDishwasherStop = useDishwasherStop;
 exports.useDisplayIconResolver = useDisplayIconResolver;
+exports.useDisplayPaletteGetPalette = useDisplayPaletteGetPalette;
+exports.useDisplayPaletteListPresets = useDisplayPaletteListPresets;
+exports.useDisplayPaletteSetPalette = useDisplayPaletteSetPalette;
+exports.useDisplayPaletteView = useDisplayPaletteView;
 exports.useDoorbellEvents = useDoorbellEvents;
 exports.useDoorbellGetStatus = useDoorbellGetStatus;
 exports.useEnumSensorGetStatus = useEnumSensorGetStatus;