@camstack/ui-library 1.2.322 → 1.2.323

package/dist/composites/detection-colors.d.ts

@@ -1,14 +1,24 @@
 /**
-* 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.
+* Detection class colours — the bundled display palette (D939).
+*
+* A mounted {@link DisplayPaletteProvider} paints the cluster's effective
+* palette instead. There is no second hex table here.
+*/
+import { type PaletteReady } from "@camstack/types";
+/**
+* Fixed colours for known classes, from the bundled CamStack preset.
+* Kept for callers that read the map directly.
 */
 export declare const CLASS_COLORS: Readonly<Record<string, string>>;
-/** Primary/default color when nothing else matches */
+/** Primary colour when nothing else matches — the first bundled fallback. */
 export declare const DEFAULT_COLOR: string;
+export interface PalettePaintSource {
+	readonly swatches: PaletteReady["swatches"];
+	readonly fallbacks: PaletteReady["fallbacks"];
+}
 /**
-* Get the color for a detection class name.
-* Resolves: custom override → taxonomy/UI-only fixed color → deterministic
-* hash-based color for unknown classes.
+* 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.
 */
-export declare function getClassColor(className: string, customColors?: Readonly<Record<string, string>>): string;
+export declare function getClassColor(className: string, customColors?: Readonly<Record<string, string>>, palette?: PalettePaintSource): string;

package/dist/composites/display-palette-context.d.ts

@@ -0,0 +1,26 @@
+/**
+* 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}.
+*/
+import { type ReactNode } from "react";
+import { type PaletteReady } from "@camstack/types";
+export type DisplayPaletteView = {
+	readonly status: "absent";
+} | {
+	readonly status: "pending";
+} | {
+	readonly status: "unknown";
+	readonly reason: string;
+} | {
+	readonly status: "ready";
+	readonly palette: PaletteReady;
+};
+export interface DisplayPaletteProviderProps {
+	readonly value: DisplayPaletteView;
+	readonly children: ReactNode;
+}
+export declare function DisplayPaletteProvider({ value, children }: DisplayPaletteProviderProps): ReactNode;
+export declare function useDisplayPaletteView(): DisplayPaletteView;
+export declare function useClassPainter(): (className: string, customColors?: Readonly<Record<string, string>>) => string;

package/dist/composites/index.d.ts

@@ -98,6 +98,7 @@ export { ariaSortForColumn, nextSortDirection, nextTableSort, sortRowsByColumn }
 export type { Detection, DetectionCanvasProps } from "./detection-canvas";
 export { DetectionCanvas } from "./detection-canvas";
 export { CLASS_COLORS, DEFAULT_COLOR, getClassColor } from "./detection-colors";
+export { DisplayPaletteProvider, useClassPainter, useDisplayPaletteView, type DisplayPaletteProviderProps, type DisplayPaletteView } from "./display-palette-context";
 export type { DetectionOverlayProps } from "./detection-overlay";
 export { DetectionOverlay } from "./detection-overlay";
 export type { DetectionResultTreeProps } from "./detection-result-tree";

package/dist/generated/system-hooks.d.ts

@@ -781,6 +781,12 @@ export declare const useDishwasherSetOption: typeof trpc.dishwasher.setOption.us
 export declare const useDishwasherGetOptions: typeof trpc.dishwasher.getOptions.useQuery;
 /** Generated alias around `trpc.dishwasher.getStatus.useQuery`. */
 export declare const useDishwasherGetStatus: typeof trpc.dishwasher.getStatus.useQuery;
+/** Generated alias around `trpc.displayPalette.getPalette.useQuery`. */
+export declare const useDisplayPaletteGetPalette: typeof trpc.displayPalette.getPalette.useQuery;
+/** Generated alias around `trpc.displayPalette.listPresets.useQuery`. */
+export declare const useDisplayPaletteListPresets: typeof trpc.displayPalette.listPresets.useQuery;
+/** Generated alias around `trpc.displayPalette.setPalette.useMutation`. */
+export declare const useDisplayPaletteSetPalette: typeof trpc.displayPalette.setPalette.useMutation;
 /** Generated alias around `trpc.doorbell.getStatus.useQuery`. */
 export declare const useDoorbellGetStatus: typeof trpc.doorbell.getStatus.useQuery;
 /** Generated alias around `trpc.enumSensor.getStatus.useQuery`. */

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", {
@@ -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;