@camstack/ui-library 1.2.322 → 1.2.324

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`. */
@@ -13070,7 +13076,7 @@ var FACET_TRIGGER = "inline-flex max-w-full items-center gap-1 rounded-md border
 var FACET_ITEM = "flex h-7 w-full items-center gap-2 px-2 text-left text-xs text-foreground hover:bg-surface-hover";
 /**
 * One facet as a compact MULTI-select dropdown: closed it is one line
-* ("Location · Cucina, Salone"), open it lists every value with a check.
+* ("Location · Kitchen, Hall"), open it lists every value with a check.
 * The operator asked for dropdowns over rows of chips (2026-09-05): with
 * sixteen rooms and a dozen types the chips ate the panel.
 */
@@ -20430,7 +20436,7 @@ function CameraGridLayoutEditor({ deviceId }) {
 * The honest report. A grid's `high` composes its sources' `high` and its `low`
 * their `low`, so a profile is on offer only when EVERY source can serve it —
 * and the refusal names the source, because "this grid has no low" is not
-* something an operator can act on and "615 has no low" is.
+* something an operator can act on and "101 has no low" is.
 *
 * Read-only on purpose: what is on offer is decided by the source cameras'
 * assignments, and a control here would be a switch that writes nothing (D62).
@@ -23908,8 +23914,8 @@ function resolveClipsView(input, t = defaultUiText) {
 *  - **Four states are tellable apart**: loading, empty-with-a-cause,
 *    degraded-per-source, and each silent source in its own words. Every one
 *    of them used to render as "no clips", which is the defect this whole line
-*    of work is about — a camera with no SD card (640) is not quiet, and a
-*    camera whose own index disagrees with its own calendar (618, 6–20
+*    of work is about — a camera with no SD card (106) is not quiet, and a
+*    camera whose own index disagrees with its own calendar (108, 6–20
 *    September) is not quiet either.
 *
 * ## The period comes from the recording section's timebar, not a day picker
@@ -23962,7 +23968,7 @@ function resolveClipsView(input, t = defaultUiText) {
 * There is no "default" option and no empty value. This section used to send
 * no `provider` at all until the operator chose, because the cap documented
 * absence as "the device's bound provider, which is CamStack on every camera".
-* No code implemented that: measured on device 592 (2026-09-20, bound to
+* No code implemented that: measured on device 107 (2026-09-20, bound to
 * `recorder` AND `provider-reolink`) a bare `listClips` with `limit: 3`
 * answered SIX rows — three per source, merged — while the default option read
 * "CamStack recordings". The label named one thing and the query asked two.
@@ -31954,8 +31960,8 @@ function GroupedModelSelector({ catalog, value, onChange, disabled }) {
 //#region src/composites/model-picker.tsx
 var PROVIDER_LABEL = {
 	camstack: "CamStack",
-	frigate: "Frigate",
-	scrypted: "Scrypted",
+	frigate: "plus catalog",
+	scrypted: "plugin catalog",
 	custom: "Custom"
 };
 function providerOf(model) {
@@ -31964,7 +31970,7 @@ function providerOf(model) {
 /**
 * Shared model picker — the ONE model-selection control across the app.
 *
-* Provider first (CamStack / Frigate / Scrypted / Custom), then inside that
+* Provider first (CamStack / plus catalog / plugin catalog / Custom), then inside that
 * catalog the grouped Family→Tier→Variant selector when entries declare
 * `group`, else a flat `<select>`. The persisted value stays the flat model
 * id. `value === ''` renders nothing selected (callers that support an
@@ -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;
@@ -39605,17 +39749,17 @@ function CopyButton({ value, label, srLabel, className, disabled }) {
 * fuzzy-match — case and separator-insensitive text search helper.
 *
 * Normalization rule: lowercase + strip all runs of hyphens, underscores and
-* whitespace entirely.  This makes `Tapparella cucina` and `tapparella-cucina`
-* both normalize to `tapparellacucina`, so a substring match succeeds in
+* whitespace entirely.  This makes `Tapparella kitchen` and `tapparella-kitchen`
+* both normalize to `tapparellakitchen`, so a substring match succeeds in
 * either direction.
 */
 /**
 * Strips hyphens, underscores and whitespace runs from `s` and lowercases it.
 *
 * @example
-* normalizeForSearch('Tapparella cucina') // 'tapparellacucina'
-* normalizeForSearch('tapparella-cucina') // 'tapparellacucina'
-* normalizeForSearch('tapparella_cucina') // 'tapparellacucina'
+* normalizeForSearch('Tapparella kitchen') // 'tapparellakitchen'
+* normalizeForSearch('tapparella-kitchen') // 'tapparellakitchen'
+* normalizeForSearch('tapparella_kitchen') // 'tapparellakitchen'
 */
 function normalizeForSearch(s) {
 	return s.toLowerCase().replace(/[-_\s]+/g, "");
@@ -39625,9 +39769,9 @@ function normalizeForSearch(s) {
 * form of `query`.  An empty query always matches.
 *
 * @example
-* fuzzyMatch('Tapparella cucina', 'tapparella-cucina') // true
-* fuzzyMatch('tapparella cucina', 'Tapparella-Cucina') // true
-* fuzzyMatch('xyz', 'tapparella-cucina')               // false
+* fuzzyMatch('Tapparella kitchen', 'tapparella-kitchen') // true
+* fuzzyMatch('tapparella kitchen', 'Tapparella-Kitchen') // true
+* fuzzyMatch('xyz', 'tapparella-kitchen')               // false
 */
 function fuzzyMatch(query, target) {
 	const nq = normalizeForSearch(query);
@@ -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", {
@@ -68654,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;
@@ -69555,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;
@@ -69823,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;