@camstack/ui-library 1.1.41 → 1.1.42

package/dist/index.cjs

@@ -8458,6 +8458,68 @@ var Bell = createLucideIcon("bell", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Bike = createLucideIcon("bike", [
+	["circle", {
+		cx: "18.5",
+		cy: "17.5",
+		r: "3.5",
+		key: "15x4ox"
+	}],
+	["circle", {
+		cx: "5.5",
+		cy: "17.5",
+		r: "3.5",
+		key: "1noe27"
+	}],
+	["circle", {
+		cx: "15",
+		cy: "5",
+		r: "1",
+		key: "19l28e"
+	}],
+	["path", {
+		d: "M12 17.5V14l-3-3 4-3 2 3h2",
+		key: "1npguv"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var Bird = createLucideIcon("bird", [
+	["path", {
+		d: "M16 7h.01",
+		key: "1kdx03"
+	}],
+	["path", {
+		d: "M3.4 18H12a8 8 0 0 0 8-8V7a4 4 0 0 0-7.28-2.3L2 20",
+		key: "oj1oa8"
+	}],
+	["path", {
+		d: "m20 7 2 .5-2 .5",
+		key: "12nv4d"
+	}],
+	["path", {
+		d: "M10 18v3",
+		key: "1yea0a"
+	}],
+	["path", {
+		d: "M14 17.75V21",
+		key: "1pymcb"
+	}],
+	["path", {
+		d: "M7 18a6 6 0 0 0 3.84-10.61",
+		key: "1npnn0"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Blinds = createLucideIcon("blinds", [
 	["path", {
 		d: "M3 3h18",
@@ -8614,6 +8676,46 @@ var Bug = createLucideIcon("bug", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Bus = createLucideIcon("bus", [
+	["path", {
+		d: "M8 6v6",
+		key: "18i7km"
+	}],
+	["path", {
+		d: "M15 6v6",
+		key: "1sg6z9"
+	}],
+	["path", {
+		d: "M2 12h19.6",
+		key: "de5uta"
+	}],
+	["path", {
+		d: "M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3",
+		key: "1wwztk"
+	}],
+	["circle", {
+		cx: "7",
+		cy: "18",
+		r: "2",
+		key: "19iecd"
+	}],
+	["path", {
+		d: "M9 18h5",
+		key: "lrx6i"
+	}],
+	["circle", {
+		cx: "16",
+		cy: "18",
+		r: "2",
+		key: "1v4tcr"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Camera = createLucideIcon("camera", [["path", {
 	d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z",
 	key: "18u6gg"
@@ -8629,6 +8731,34 @@ var Camera = createLucideIcon("camera", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Car = createLucideIcon("car", [
+	["path", {
+		d: "M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2",
+		key: "5owen"
+	}],
+	["circle", {
+		cx: "7",
+		cy: "17",
+		r: "2",
+		key: "u2ysq9"
+	}],
+	["path", {
+		d: "M9 17h6",
+		key: "r8uit2"
+	}],
+	["circle", {
+		cx: "17",
+		cy: "17",
+		r: "2",
+		key: "axvx0g"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Cast = createLucideIcon("cast", [
 	["path", {
 		d: "M2 8V6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-6",
@@ -8656,6 +8786,30 @@ var Cast = createLucideIcon("cast", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Cat = createLucideIcon("cat", [
+	["path", {
+		d: "M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5Z",
+		key: "x6xyqk"
+	}],
+	["path", {
+		d: "M8 14v.5",
+		key: "1nzgdb"
+	}],
+	["path", {
+		d: "M16 14v.5",
+		key: "1lajdz"
+	}],
+	["path", {
+		d: "M11.25 16.25h1.5L12 17l-.75-.75Z",
+		key: "12kq1m"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Check = createLucideIcon("check", [["path", {
 	d: "M20 6 9 17l-5-5",
 	key: "1gmf2c"
@@ -9239,6 +9393,34 @@ var Database = createLucideIcon("database", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Dog = createLucideIcon("dog", [
+	["path", {
+		d: "M11.25 16.25h1.5L12 17z",
+		key: "w7jh35"
+	}],
+	["path", {
+		d: "M16 14v.5",
+		key: "1lajdz"
+	}],
+	["path", {
+		d: "M4.42 11.247A13.152 13.152 0 0 0 4 14.556C4 18.728 7.582 21 12 21s8-2.272 8-6.444a11.702 11.702 0 0 0-.493-3.309",
+		key: "u7s9ue"
+	}],
+	["path", {
+		d: "M8 14v.5",
+		key: "1nzgdb"
+	}],
+	["path", {
+		d: "M8.5 8.5c-.384 1.05-1.083 2.028-2.344 2.5-1.931.722-3.576-.297-3.656-1-.113-.994 1.177-6.53 4-7 1.923-.321 3.651.845 3.651 2.235A7.497 7.497 0 0 1 14 5.277c0-1.39 1.844-2.598 3.767-2.277 2.823.47 4.113 6.006 4 7-.08.703-1.725 1.722-3.656 1-1.261-.472-1.855-1.45-2.239-2.5",
+		key: "v8hric"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var DoorClosed = createLucideIcon("door-closed", [
 	["path", {
 		d: "M10 12h.01",
@@ -10452,6 +10634,30 @@ var Network = createLucideIcon("network", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Package = createLucideIcon("package", [
+	["path", {
+		d: "M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z",
+		key: "1a0edw"
+	}],
+	["path", {
+		d: "M12 22V12",
+		key: "d0xqtd"
+	}],
+	["polyline", {
+		points: "3.29 7 12 12 20.71 7",
+		key: "ousv84"
+	}],
+	["path", {
+		d: "m7.5 4.27 9 5.15",
+		key: "1c824w"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Pause = createLucideIcon("pause", [["rect", {
 	x: "14",
 	y: "3",
@@ -10536,6 +10742,16 @@ var Pipette = createLucideIcon("pipette", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Plane = createLucideIcon("plane", [["path", {
+	d: "M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z",
+	key: "1v9wt8"
+}]]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Play = createLucideIcon("play", [["path", {
 	d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
 	key: "10ikf1"
@@ -10810,6 +11026,26 @@ var RotateCw = createLucideIcon("rotate-cw", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Sailboat = createLucideIcon("sailboat", [
+	["path", {
+		d: "M10 2v15",
+		key: "1qf71f"
+	}],
+	["path", {
+		d: "M7 22a4 4 0 0 1-4-4 1 1 0 0 1 1-1h16a1 1 0 0 1 1 1 4 4 0 0 1-4 4z",
+		key: "1pxcvx"
+	}],
+	["path", {
+		d: "M9.159 2.46a1 1 0 0 1 1.521-.193l9.977 8.98A1 1 0 0 1 20 13H4a1 1 0 0 1-.824-1.567z",
+		key: "5oog16"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Save = createLucideIcon("save", [
 	["path", {
 		d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z",
@@ -11475,6 +11711,22 @@ var Table2 = createLucideIcon("table-2", [["path", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Tag = createLucideIcon("tag", [["path", {
+	d: "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z",
+	key: "vktsd0"
+}], ["circle", {
+	cx: "7.5",
+	cy: "7.5",
+	r: ".5",
+	fill: "currentColor",
+	key: "kqv944"
+}]]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Target = createLucideIcon("target", [
 	["circle", {
 		cx: "12",
@@ -11530,6 +11782,25 @@ var ToggleLeft = createLucideIcon("toggle-left", [["circle", {
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var ToggleRight = createLucideIcon("toggle-right", [["circle", {
+	cx: "15",
+	cy: "12",
+	r: "3",
+	key: "1afu0r"
+}], ["rect", {
+	width: "20",
+	height: "14",
+	x: "2",
+	y: "5",
+	rx: "7",
+	key: "g7kal2"
+}]]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Tractor = createLucideIcon("tractor", [
 	["path", {
 		d: "m10 11 11 .9a1 1 0 0 1 .8 1.1l-.665 4.158a1 1 0 0 1-.988.842H20",
@@ -11578,6 +11849,38 @@ var Tractor = createLucideIcon("tractor", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var TrainFront = createLucideIcon("train-front", [
+	["path", {
+		d: "M8 3.1V7a4 4 0 0 0 8 0V3.1",
+		key: "1v71zp"
+	}],
+	["path", {
+		d: "m9 15-1-1",
+		key: "1yrq24"
+	}],
+	["path", {
+		d: "m15 15 1-1",
+		key: "1t0d6s"
+	}],
+	["path", {
+		d: "M9 19c-2.8 0-5-2.2-5-5v-4a8 8 0 0 1 16 0v4c0 2.8-2.2 5-5 5Z",
+		key: "1p0hjs"
+	}],
+	["path", {
+		d: "m8 19-2 3",
+		key: "13i0xs"
+	}],
+	["path", {
+		d: "m16 19 2 3",
+		key: "xo31yx"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Trash2 = createLucideIcon("trash-2", [
 	["path", {
 		d: "M10 11v6",
@@ -11652,6 +11955,38 @@ var TriangleAlert = createLucideIcon("triangle-alert", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Truck = createLucideIcon("truck", [
+	["path", {
+		d: "M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2",
+		key: "wrbu53"
+	}],
+	["path", {
+		d: "M15 18H9",
+		key: "1lyqi6"
+	}],
+	["path", {
+		d: "M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14",
+		key: "lysw3i"
+	}],
+	["circle", {
+		cx: "17",
+		cy: "18",
+		r: "2",
+		key: "332jqn"
+	}],
+	["circle", {
+		cx: "7",
+		cy: "18",
+		r: "2",
+		key: "19iecd"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var Type = createLucideIcon("type", [
 	["path", {
 		d: "M12 4v16",
@@ -11702,6 +12037,43 @@ var Upload = createLucideIcon("upload", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var UserCheck = createLucideIcon("user-check", [
+	["path", {
+		d: "m16 11 2 2 4-4",
+		key: "9rsbq5"
+	}],
+	["path", {
+		d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2",
+		key: "1yyitq"
+	}],
+	["circle", {
+		cx: "9",
+		cy: "7",
+		r: "4",
+		key: "nufk8"
+	}]
+]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var User = createLucideIcon("user", [["path", {
+	d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2",
+	key: "975kel"
+}], ["circle", {
+	cx: "12",
+	cy: "7",
+	r: "4",
+	key: "17ys0d"
+}]]);
+/**
+* @license lucide-react v0.576.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
 var UtensilsCrossed = createLucideIcon("utensils-crossed", [
 	["path", {
 		d: "m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8",
@@ -30827,28 +31199,28 @@ function PipelineBuilder({ schema, steps, onChange, templates, selectedTemplateI
 //#endregion
 //#region src/composites/detection-colors.ts
 /**
-* Detection class colors — single source of truth.
+* 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.
 *
-* Used by: DetectionCanvas (UI), result-annotator (server-side SVG),
-* admin-ui event viewer, and any other place that visualizes detections.
+* Used by: DetectionCanvas / DetectionResultTree / DetectionOverlay (UI),
+* and any other place that visualizes detection classes.
 */
-/** Fixed colors for known detection classes */
-var CLASS_COLORS = {
-	person: "#3b82f6",
-	vehicle: "#f59e0b",
-	animal: "#22c55e",
+/** UI-only classes not modelled in the event taxonomy (sub-detections). */
+var UI_ONLY_COLORS = {
 	face: "#a855f7",
-	plate: "#ec4899",
-	bird: "#14b8a6",
-	dog: "#84cc16",
-	cat: "#f97316",
-	car: "#f59e0b",
-	truck: "#d97706",
-	bus: "#b45309",
-	motorcycle: "#eab308",
-	bicycle: "#ca8a04",
-	motion: "#facc15"
+	plate: "#ec4899"
 };
+/**
+* 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.
+*/
+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",
@@ -30863,19 +31235,113 @@ var FALLBACK_PALETTE = [
 	"#059669"
 ];
 /** Primary/default color when nothing else matches */
-var DEFAULT_COLOR = "#f59e42";
+var DEFAULT_COLOR = _camstack_types.DEFAULT_EVENT_COLOR;
 /**
 * Get the color for a detection class name.
-* Returns a fixed color for known classes, or a deterministic hash-based color for unknown ones.
+* 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] ?? "#f59e42";
+	return FALLBACK_PALETTE[hash % FALLBACK_PALETTE.length] ?? DEFAULT_COLOR;
+}
+//#endregion
+//#region src/composites/event-kind-visuals.tsx
+/**
+* Event-kind VISUALS — the UI-side half of the unified taxonomy dictionary
+* (`@camstack/types` `EVENT_TAXONOMY` owns the serializable data:
+* color / iconId / labelKey; this owns `iconId → lucide component` and
+* `labelKey → t()`).
+*
+* Every UI that renders an event kind (timeline, events tree, chips,
+* detection canvas/tree) resolves its glyph + translated label here — no
+* per-component hardcoded icon or label.
+*/
+/**
+* `iconId` → lucide component. Built ONLY from statically-imported icons
+* (bundle-safe). Unknown ids resolve to the neutral `Tag` fallback.
+*/
+var EVENT_KIND_ICONS = {
+	motion: Activity,
+	audio: Volume2,
+	person: User,
+	vehicle: Car,
+	animal: PawPrint,
+	package: Package,
+	sensor: Radio,
+	control: SlidersHorizontal,
+	car: Car,
+	truck: Truck,
+	bus: Bus,
+	motorcycle: Bike,
+	bicycle: Bike,
+	airplane: Plane,
+	boat: Sailboat,
+	train: TrainFront,
+	bird: Bird,
+	cat: Cat,
+	dog: Dog,
+	horse: PawPrint,
+	sheep: PawPrint,
+	cow: PawPrint,
+	elephant: PawPrint,
+	bear: PawPrint,
+	zebra: PawPrint,
+	giraffe: PawPrint,
+	door: DoorOpen,
+	pir: Radar,
+	smoke: Flame,
+	water: Droplet,
+	gas: Wind,
+	vibration: Vibrate,
+	tamper: ShieldAlert,
+	presence: UserCheck,
+	generic: Tag,
+	lock: Lock,
+	siren: Siren,
+	switch: ToggleRight,
+	doorbell: BellRing,
+	button: CircleDot,
+	"audio-speech": MessageSquare,
+	"audio-music": Music,
+	"audio-dog": Dog,
+	"audio-doorbell": BellRing,
+	"audio-siren": Siren,
+	"audio-glass_breaking": TriangleAlert,
+	"audio-alarm": TriangleAlert
+};
+/** Resolve an `iconId` to a lucide component (falls back to `Tag`). */
+function resolveEventKindIcon(iconId) {
+	if (Object.hasOwn(EVENT_KIND_ICONS, iconId)) return EVENT_KIND_ICONS[iconId];
+	if (iconId.startsWith("audio-")) return Volume2;
+	return Tag;
+}
+/**
+* Translated label for an event kind — `t(labelKey)` when a translation
+* exists, else the English `label` fallback. Robust to a missing key: an
+* i18n backend that echoes the key unchanged (react-i18next default) is
+* treated as "no translation" and the fallback label is returned, so the UI
+* never renders a raw `eventKind.*` key.
+*/
+function eventKindLabel(descriptor, t) {
+	if (t === void 0) return descriptor.label;
+	const translated = t(descriptor.labelKey);
+	return translated === descriptor.labelKey || translated.length === 0 ? descriptor.label : translated;
+}
+/** Small convenience component: renders the lucide glyph for an `iconId`. */
+function EventKindGlyph({ iconId, size = 16, color, className }) {
+	return (0, react$1.createElement)(resolveEventKindIcon(iconId), {
+		size,
+		color,
+		className
+	});
 }
 //#endregion
 //#region src/composites/detection-canvas.tsx
@@ -32524,6 +32990,294 @@ function mountAddonPage(PageComponent, options = {}) {
 	}));
 }
 //#endregion
+//#region src/composites/device-select-filter.ts
+/** True when two string lists share at least one member. */
+function intersects(a, b) {
+	if (a.length === 0 || b.length === 0) return false;
+	const set = new Set(a);
+	return b.some((v) => set.has(v));
+}
+/**
+* Does a device satisfy the filter?
+*
+* Union match: with an empty/absent filter every device passes; otherwise the
+* device passes when ANY provided clause matches — its `features` intersect
+* `caps`, OR its `type` is in `types`. `excludeDeviceId` is subtracted last
+* (it always drops the device regardless of the other clauses).
+*/
+function deviceMatchesFilter(device, filter) {
+	if (filter?.excludeDeviceId !== void 0 && device.id === filter.excludeDeviceId) return false;
+	const hasCaps = filter?.caps !== void 0 && filter.caps.length > 0;
+	const hasTypes = filter?.types !== void 0 && filter.types.length > 0;
+	if (!hasCaps && !hasTypes) return true;
+	if (hasCaps && intersects(device.features ?? [], filter.caps)) return true;
+	if (hasTypes && filter.types.includes(device.type)) return true;
+	return false;
+}
+/** Human label for a device option: `Name (Location)` when a location is set. */
+function deviceOptionLabel(device) {
+	return typeof device.location === "string" && device.location.length > 0 ? `${device.name} (${device.location})` : device.name;
+}
+/**
+* Filter a device list and project it into sorted `{ value, label }` options
+* (value = the device id as a string). Sorted case-insensitively by label so
+* the picker order is stable.
+*/
+function devicesToOptions(devices, filter) {
+	return devices.filter((d) => deviceMatchesFilter(d, filter)).map((d) => ({
+		value: String(d.id),
+		label: deviceOptionLabel(d)
+	})).toSorted((a, b) => a.label.localeCompare(b.label));
+}
+/**
+* Free-text option filter — case-insensitive AND over whitespace tokens, each
+* matched against the option's `value` + `label` (so a device is found by name,
+* id, or location). An empty query returns every option in order.
+*/
+function filterDeviceOptions(options, query) {
+	const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+	if (tokens.length === 0) return [...options];
+	return options.filter((opt) => {
+		const hay = `${opt.value} ${opt.label}`.toLowerCase();
+		return tokens.every((t) => hay.includes(t));
+	});
+}
+/**
+* Resolve the currently-selected values into options IN SELECTION ORDER (so
+* chips stay stable while searching). A selected value with no matching option
+* becomes a synthetic `{ value, label: value }` — a stale id still shows as a
+* removable chip rather than silently vanishing.
+*/
+function selectedDeviceOptions(options, selected) {
+	const byValue = new Map(options.map((o) => [o.value, o]));
+	return selected.map((v) => byValue.get(v) ?? {
+		value: v,
+		label: v
+	});
+}
+//#endregion
+//#region src/composites/device-select-field.tsx
+/**
+* `device-select` / `device-multiselect` renderers.
+*
+* Both fetch EVERY system device via `deviceManager.listAll` and narrow the
+* options CLIENT-SIDE with the field's declarative `deviceFilter` (see
+* `device-select-filter.ts`). No server-computed option list is involved —
+* the form field carries only the filter. Value(s) are device ids as strings.
+*
+* The multi variant mirrors the "Linked devices" searchable combobox UX
+* (removable chips + typeahead dropdown); the single variant is a native
+* select. Both are inline in ui-library (like `node-select`) so any host that
+* renders the shared form field gets them without extra registration.
+*/
+var INPUT_CLASS$1 = "w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs text-foreground focus:border-primary focus:ring-1 focus:ring-primary/30 outline-none disabled:opacity-50 disabled:cursor-not-allowed";
+var INPUT_SHELL = "flex items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1.5 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary/30";
+var LABEL_CLASS$1 = "block text-[11px] font-medium text-foreground mb-1 break-words";
+var DESC_CLASS$1 = "text-[10px] text-foreground-subtle mt-0.5 break-words";
+/** The compact projection of the listAll rows the device fields consume. */
+function toCandidates(rows) {
+	if (!Array.isArray(rows)) return [];
+	const out = [];
+	for (const row of rows) {
+		if (typeof row !== "object" || row === null) continue;
+		const r = row;
+		if (typeof r.id !== "number" || typeof r.type !== "string" || typeof r.name !== "string") continue;
+		out.push({
+			id: r.id,
+			type: r.type,
+			name: r.name,
+			location: typeof r.location === "string" ? r.location : null,
+			features: Array.isArray(r.features) ? r.features.filter((f) => typeof f === "string") : []
+		});
+	}
+	return out;
+}
+function FieldShell({ label, description, required, translationFn, children }) {
+	const resolvedLabel = resolveLabel(label, translationFn);
+	const resolvedDescription = resolveLabel(description, translationFn);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [
+			resolvedLabel !== void 0 && resolvedLabel !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: LABEL_CLASS$1,
+				children: [resolvedLabel, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-danger ml-0.5",
+					children: "*"
+				})]
+			}),
+			children,
+			resolvedDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: DESC_CLASS$1,
+				children: resolvedDescription
+			})
+		]
+	});
+}
+function DeviceSelectField({ field, value, onChange, disabled, translationFn }) {
+	const { data } = useDeviceManagerListAll({});
+	const options = (0, react$1.useMemo)(() => devicesToOptions(toCandidates(data), field.deviceFilter), [data, field.deviceFilter]);
+	const current = value === void 0 || value === null ? "" : String(value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FieldShell, {
+		label: field.label,
+		description: field.description,
+		required: field.required,
+		translationFn,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+			className: INPUT_CLASS$1,
+			value: current,
+			disabled: disabled || field.disabled,
+			onChange: (e) => onChange(e.target.value),
+			children: [!field.required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: "",
+				children: "— Select device —"
+			}), options.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: opt.value,
+				children: opt.label
+			}, opt.value))]
+		})
+	});
+}
+function DeviceMultiSelectField({ field, value, onChange, disabled, translationFn }) {
+	const { data } = useDeviceManagerListAll({});
+	const options = (0, react$1.useMemo)(() => devicesToOptions(toCandidates(data), field.deviceFilter), [data, field.deviceFilter]);
+	const selected = Array.isArray(value) ? value.map(String) : [];
+	const isDisabled = disabled === true || field.disabled === true;
+	const atMax = field.maxItems !== void 0 && selected.length >= field.maxItems;
+	const [query, setQuery] = (0, react$1.useState)("");
+	const [open, setOpen] = (0, react$1.useState)(false);
+	const [highlight, setHighlight] = (0, react$1.useState)(0);
+	const inputRef = (0, react$1.useRef)(null);
+	const blurTimer = (0, react$1.useRef)(null);
+	const selectedOptions = (0, react$1.useMemo)(() => selectedDeviceOptions(options, selected), [options, selected]);
+	const filtered = (0, react$1.useMemo)(() => filterDeviceOptions(options, query), [options, query]);
+	const toggle = (optValue) => {
+		if (isDisabled) return;
+		if (selected.includes(optValue)) onChange(selected.filter((v) => v !== optValue));
+		else {
+			if (field.maxItems !== void 0 && selected.length >= field.maxItems) return;
+			onChange([...selected, optValue]);
+		}
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			setOpen(true);
+			setHighlight((h) => filtered.length === 0 ? 0 : (h + 1) % filtered.length);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			setOpen(true);
+			setHighlight((h) => filtered.length === 0 ? 0 : (h - 1 + filtered.length) % filtered.length);
+		} else if (e.key === "Enter") {
+			e.preventDefault();
+			const opt = filtered[highlight];
+			if (opt) toggle(opt.value);
+		} else if (e.key === "Escape") setOpen(false);
+		else if (e.key === "Backspace" && query === "" && selected.length > 0) onChange(selected.slice(0, -1));
+	};
+	const label = resolveLabel(field.label, translationFn);
+	const description = resolveLabel(field.description, translationFn);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "min-w-0",
+		children: [
+			label !== void 0 && label !== "" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				className: LABEL_CLASS$1,
+				children: label
+			}),
+			selectedOptions.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-wrap gap-1 mb-1.5",
+				children: selectedOptions.map((opt) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "inline-flex items-center gap-1 rounded-md bg-primary/10 px-1.5 py-0.5 text-[11px] text-primary max-w-full",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "truncate",
+						children: opt.label
+					}), !isDisabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "shrink-0 hover:text-danger",
+						"aria-label": `Remove ${opt.label}`,
+						onClick: () => toggle(opt.value),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-2.5 w-2.5" })
+					})]
+				}, opt.value))
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: INPUT_SHELL + (isDisabled ? " opacity-50" : ""),
+				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: inputRef,
+						type: "text",
+						role: "combobox",
+						"aria-expanded": open,
+						"aria-controls": `dsel-${field.key}`,
+						className: "min-w-0 flex-1 bg-transparent text-xs text-foreground outline-none placeholder:text-foreground-disabled",
+						value: query,
+						placeholder: atMax ? `Max ${field.maxItems} selected` : field.placeholder ?? "Search devices…",
+						disabled: isDisabled,
+						onChange: (e) => {
+							setQuery(e.target.value);
+							setOpen(true);
+							setHighlight(0);
+						},
+						onFocus: () => setOpen(true),
+						onBlur: () => {
+							blurTimer.current = setTimeout(() => setOpen(false), 120);
+						},
+						onKeyDown: handleKeyDown
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDown, {
+						className: "h-3.5 w-3.5 shrink-0 cursor-pointer text-foreground-subtle",
+						onMouseDown: (e) => {
+							e.preventDefault();
+							if (blurTimer.current) clearTimeout(blurTimer.current);
+							setOpen((o) => !o);
+							inputRef.current?.focus();
+						}
+					})
+				]
+			}),
+			open && !isDisabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: `dsel-${field.key}`,
+				role: "listbox",
+				className: "mt-1 max-h-56 overflow-y-auto rounded-md border border-border bg-surface shadow-lg",
+				onMouseDown: (e) => {
+					e.preventDefault();
+				},
+				children: filtered.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "px-2.5 py-2 text-[11px] text-foreground-subtle italic",
+					children: options.length === 0 ? "No matching devices" : `No matches for “${query}”`
+				}) : filtered.map((opt, i) => {
+					const checked = selected.includes(opt.value);
+					const blockedByMax = !checked && atMax;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						role: "option",
+						"aria-selected": checked,
+						disabled: blockedByMax,
+						className: [
+							"flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs transition-colors",
+							i === highlight ? "bg-primary/10" : "hover:bg-surface-hover",
+							blockedByMax ? "opacity-40 cursor-not-allowed" : "cursor-pointer"
+						].join(" "),
+						onMouseEnter: () => setHighlight(i),
+						onClick: () => toggle(opt.value),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: ["flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded border", checked ? "border-primary bg-primary text-white" : "border-border"].join(" "),
+							children: checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Check, { className: "h-2.5 w-2.5" })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "truncate text-foreground",
+							children: opt.label
+						})]
+					}, opt.value);
+				})
+			}),
+			description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: DESC_CLASS$1,
+				children: description
+			})
+		]
+	});
+}
+//#endregion
 //#region src/contexts/custom-field-renderers.tsx
 /**
 * Custom field renderer registry.
@@ -38506,6 +39260,20 @@ function FormField({ field, values, onChange, disabled, translationFn, onTestFie
 			disabled,
 			translationFn
 		});
+		case "device-select": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceSelectField, {
+			field,
+			value,
+			onChange: handleChange,
+			disabled,
+			translationFn
+		});
+		case "device-multiselect": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceMultiSelectField, {
+			field,
+			value,
+			onChange: handleChange,
+			disabled,
+			translationFn
+		});
 		case "probe": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProbeField, {
 			field,
 			value,
@@ -45748,6 +46516,8 @@ exports.DeviceExportPanel = DeviceExportPanel;
 exports.DeviceGrid = DeviceGrid;
 exports.DeviceItem = DeviceItem;
 exports.DeviceList = DeviceList;
+exports.DeviceMultiSelectField = DeviceMultiSelectField;
+exports.DeviceSelectField = DeviceSelectField;
 exports.Dialog = Dialog;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
@@ -45763,8 +46533,10 @@ exports.DropdownItem = DropdownItem;
 exports.DropdownTrigger = DropdownTrigger;
 exports.DummyHeroCard = DummyHeroCard;
 exports.DummyInline = DummyInline;
+exports.EVENT_KIND_ICONS = EVENT_KIND_ICONS;
 exports.EmptyState = EmptyState;
 exports.ErrorBox = ErrorBox;
+exports.EventKindGlyph = EventKindGlyph;
 exports.EventStream = EventStream;
 exports.EyeOff = EyeOff;
 exports.FILL = FILL;
@@ -45930,11 +46702,16 @@ exports.cursorFractionFor = cursorFractionFor;
 exports.darkColors = require_theme_index.darkColors$1;
 exports.defaultTheme = require_theme_index.defaultTheme$1;
 exports.deriveDeviceKind = deriveDeviceKind;
+exports.deviceMatchesFilter = deviceMatchesFilter;
+exports.deviceOptionLabel = deviceOptionLabel;
 exports.deviceRoleMeta = deviceRoleMeta;
 exports.deviceRoleMetaOf = deviceRoleMetaOf;
 exports.deviceTypeMeta = deviceTypeMeta;
 exports.deviceTypeMetaOf = deviceTypeMetaOf;
+exports.devicesToOptions = devicesToOptions;
 exports.ensureMfHostInit = ensureMfHostInit;
+exports.eventKindLabel = eventKindLabel;
+exports.filterDeviceOptions = filterDeviceOptions;
 exports.findTimezone = _camstack_types.findTimezone;
 exports.formatControlDateTime = formatControlDateTime;
 exports.formatLastSeen = formatLastSeen;
@@ -45966,9 +46743,11 @@ exports.resolveContainerPrimary = resolveContainerPrimary;
 exports.resolveControlAlign = resolveControlAlign;
 exports.resolveDeviceControl = resolveDeviceControl;
 exports.resolveDisplayIcon = resolveDisplayIcon;
+exports.resolveEventKindIcon = resolveEventKindIcon;
 exports.resolvePrimaryChild = resolvePrimaryChild;
 exports.resolveSensorDisplay = resolveSensorDisplay;
 exports.scrubReducer = scrubReducer;
+exports.selectedDeviceOptions = selectedDeviceOptions;
 exports.serializeRecordedCommand = serializeRecordedCommand;
 exports.shouldCommit = shouldCommit;
 exports.shouldEmit = shouldEmit;