@camstack/ui-library 1.2.46 → 1.2.48

package/dist/index.cjs

@@ -10362,6 +10362,29 @@ var Lightbulb = createLucideIcon("lightbulb", [
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
+var Link2 = createLucideIcon("link-2", [
+	["path", {
+		d: "M9 17H7A5 5 0 0 1 7 7h2",
+		key: "8i5ue5"
+	}],
+	["path", {
+		d: "M15 7h2a5 5 0 1 1 0 10h-2",
+		key: "1b9ql8"
+	}],
+	["line", {
+		x1: "8",
+		x2: "16",
+		y1: "12",
+		y2: "12",
+		key: "1jonct"
+	}]
+]);
+/**
+* @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 ListChecks = createLucideIcon("list-checks", [
 	["path", {
 		d: "M13 5h8",
@@ -13074,13 +13097,33 @@ function DialogTrigger({ children, ...props }) {
 * whenever they are asymmetric (they are: ~59px top vs ~34px bottom). Every
 * term collapses to the previous `100dvh - 2rem` where the insets are 0.
 */
-var contentVariants = cva("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 m-0 w-[calc(100vw-2rem)] bg-background-elevated text-foreground border border-border rounded-lg p-4 backdrop:bg-black/50 backdrop:backdrop-blur-sm max-h-[calc(100dvh-2rem-2*max(env(safe-area-inset-top),env(safe-area-inset-bottom)))] overflow-y-auto [&:not([open])]:hidden", {
+var contentVariants = cva("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 m-0 w-[calc(100vw-2rem)] bg-background-elevated text-foreground border border-border rounded-lg p-4 backdrop:bg-black/50 backdrop:backdrop-blur-sm max-h-[calc(100dvh-2rem-2*max(env(safe-area-inset-top),env(safe-area-inset-bottom)))] [&:not([open])]:hidden", {
 	variants: {
 		width: {
 			sm: "max-w-sm",
 			md: "max-w-md",
 			lg: "max-w-lg"
 		},
+		/**
+		* WHICH box scrolls when the content is taller than the height cap.
+		*
+		* `content` (default) scrolls the whole dialog: the title, any tab strip
+		* and the Save/Cancel row travel with the fields. That is fine for a
+		* short form and wrong for a long one — the operator scrolls to the
+		* bottom of a rule editor and the buttons are somewhere above him, the
+		* tab strip is gone, and the only way back to either is to scroll the
+		* form he was reading.
+		*
+		* `body` makes the dialog a flex column that does not scroll at all and
+		* hands the scrolling to `<DialogBody>`. The chrome around the body —
+		* header, tab strip, footer — stays put at every height. The dialog
+		* keeps its own padding either way, so `sheet-on-mobile`'s
+		* safe-area bottom padding still applies to the footer.
+		*/
+		scroll: {
+			content: "overflow-y-auto",
+			body: "flex flex-col overflow-hidden"
+		},
 		placement: {
 			center: "",
 			"sheet-on-mobile": "bottom-0 left-0 right-0 top-auto w-full max-w-full translate-x-0 translate-y-0 rounded-b-none max-h-[92dvh] pb-[calc(1rem+env(safe-area-inset-bottom))] md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-lg md:bottom-auto md:pb-4 md:max-h-[calc(100dvh-2rem-2*max(env(safe-area-inset-top),env(safe-area-inset-bottom)))]"
@@ -13105,10 +13148,11 @@ var contentVariants = cva("fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-
 	],
 	defaultVariants: {
 		width: "md",
-		placement: "center"
+		placement: "center",
+		scroll: "content"
 	}
 });
-var DialogContent = (0, react$1.forwardRef)(({ className, width, placement, children, ...props }, ref) => {
+var DialogContent = (0, react$1.forwardRef)(({ className, width, placement, scroll, children, ...props }, ref) => {
 	const { open, setOpen, contentId } = useDialogContext();
 	const innerRef = (0, react$1.useRef)(null);
 	const dialogRef = ref ?? innerRef;
@@ -13126,7 +13170,8 @@ var DialogContent = (0, react$1.forwardRef)(({ className, width, placement, chil
 		id: contentId,
 		className: cn(contentVariants({
 			width,
-			placement
+			placement,
+			scroll
 		}), className),
 		onClick: handleClick,
 		onClose: () => setOpen(false),
@@ -13135,15 +13180,33 @@ var DialogContent = (0, react$1.forwardRef)(({ className, width, placement, chil
 	});
 });
 DialogContent.displayName = "DialogContent";
+/** `shrink-0` is inert outside a flex column and load-bearing inside one:
+*  under `scroll="body"` the header must keep its height while the body gives
+*  ground, or a long form squeezes its own title to nothing. */
 function DialogHeader({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("flex flex-col gap-1 mb-3", className),
+		className: cn("flex flex-col gap-1 mb-3 shrink-0", className),
+		...props
+	});
+}
+/**
+* The scrolling middle of a `scroll="body"` dialog.
+*
+* `min-h-0` is what makes it work: a flex item's default `min-height: auto`
+* refuses to shrink below its content, so without it the body pushes the
+* footer out of the dialog instead of scrolling — the exact failure this
+* variant exists to remove. Anything sticky INSIDE a dialog body pins against
+* this element, since it is the scroll container.
+*/
+function DialogBody({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("flex-1 min-h-0 overflow-y-auto", className),
 		...props
 	});
 }
 function DialogFooter({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: cn("flex justify-end gap-2 mt-4", className),
+		className: cn("flex justify-end gap-2 mt-4 shrink-0", className),
 		...props
 	});
 }
@@ -13544,10 +13607,27 @@ function Tabs({ value: controlledValue, onValueChange, defaultValue = "", classN
 		})
 	});
 }
+/**
+* The strip SCROLLS sideways; it never squashes and never clips.
+*
+* Before this, the bar was a bare `flex flex-row`: every trigger was a
+* shrinkable flex item with no `whitespace-nowrap`, so past ~4 tabs on a narrow
+* viewport the labels wrapped inside a fixed-height (`h-7`) button and the
+* last tabs left the box with no way to reach them. That is the "the headers
+* are not scrollable" report on the Notification Center, whose rule sections
+* (6) and rule-editor tabs (up to 6) both live in one of these.
+*
+* BOTH axes are spelled out on purpose. Per CSS Overflow, `visible` is not
+* combinable with `auto`, so `overflow-x-auto` alone would silently promote
+* `overflow-y` to `auto` as well — and a one-row bar whose content box is
+* shortened by the horizontal scrollbar then raises a SECOND, vertical
+* scrollbar. That exact defect is documented on `SchemaTabBar`; `overflow-y`
+* pinned to `hidden` makes it impossible here.
+*/
 function TabsList({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "tablist",
-		className: cn("flex flex-row border-b border-border-subtle", className),
+		className: cn("flex flex-row overflow-x-auto overflow-y-hidden border-b border-border-subtle", className),
 		...props
 	});
 }
@@ -13560,7 +13640,7 @@ function TabsTrigger({ value, className, ...props }) {
 		"aria-selected": isActive,
 		"aria-controls": `tabpanel-${value}`,
 		tabIndex: isActive ? 0 : -1,
-		className: cn("h-7 text-xs px-3 transition-colors", isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
+		className: cn("h-7 shrink-0 whitespace-nowrap text-xs px-3 transition-colors", isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground", className),
 		onClick: () => setValue(value),
 		...props
 	});
@@ -13829,25 +13909,34 @@ function SettingRow({ label, children, actions, elements = "plain", className, v
 }
 //#endregion
 //#region src/composites/data-table.tsx
+/**
+* The default cap for an internally-scrolling table.
+*
+* `60vh` leaves the page header, its filters and its actions on screen at
+* every viewport while still showing ~10 rows — and it is a fraction, so it
+* does not need a breakpoint of its own.
+*/
+var TABLE_SCROLL_MAX_H = "max-h-[60vh]";
 var ALIGN_CLASS = {
 	left: "text-left",
 	right: "text-right",
 	center: "text-center"
 };
-function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "auto" }) {
+function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyMessage, className, bordered = true, rowClassName, mobileMode = "auto", maxBodyHeight }) {
 	const isNarrow = useIsMobile();
 	const layout = resolveTableLayout({
 		mode: mobileMode,
 		columnCount: columns.length,
 		isNarrow
 	});
+	const scrolls = maxBodyHeight !== void 0;
 	if (rows.length === 0 && emptyMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface px-3 py-4 text-xs text-foreground-subtle text-center ${className ?? ""}`,
 		children: emptyMessage
 	});
 	if (rows.length === 0) return null;
 	if (layout === "cards") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `space-y-2 ${className ?? ""}`,
+		className: `space-y-2 ${scrolls ? `${maxBodyHeight} overflow-y-auto` : ""} ${className ?? ""}`,
 		children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DataTableCard, {
 			row,
 			rowIndex,
@@ -13858,9 +13947,15 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 		}, rowKey ? rowKey(row, rowIndex) : rowIndex))
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `rounded-lg ${bordered ? "border border-border" : ""} bg-surface overflow-x-auto ${className ?? ""}`,
+		className: [
+			"rounded-lg",
+			bordered ? "border border-border" : "",
+			"bg-surface overflow-x-auto",
+			scrolls ? `${maxBodyHeight} overflow-y-auto` : "",
+			className ?? ""
+		].filter(Boolean).join(" "),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("table", {
-			className: "w-full text-xs",
+			className: `w-full text-xs ${scrolls ? "border-separate border-spacing-0" : ""}`,
 			style: { minWidth: `${minWidthPx}px` },
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("thead", {
 				className: "bg-surface",
@@ -13870,6 +13965,7 @@ function DataTable({ columns, rows, rowKey, onRowClick, minWidthPx = 480, emptyM
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("th", {
 						className: [
 							"px-3 py-2 text-foreground-subtle font-medium bg-surface border-b border-border",
+							scrolls ? "sticky top-0 z-10" : "",
 							ALIGN_CLASS[align],
 							nowrap ? "whitespace-nowrap" : "",
 							col.width ?? ""
@@ -46880,6 +46976,345 @@ function KebabMenu({ items, header, triggerClassName, title = "More actions" })
 	});
 }
 //#endregion
+//#region src/composites/device-selector-picker.tsx
+/**
+* <DeviceSelectorPicker> — the operator-facing editor for a v3
+* {@link DeviceSelector}: the "on WHICH devices" half of a scope grant.
+*
+* Four tabs, one per selector kind, because the kinds are not interchangeable
+* and the operator has to choose between them deliberately:
+*
+*   All      → every device, now and forever. DYNAMIC.
+*   By type  → every device of a `DeviceType`. DYNAMIC — a camera added
+*              tomorrow is covered with no re-grant.
+*   By room  → every device carrying an operator-assigned `location` label.
+*              DYNAMIC. Rendered ONLY when the fleet actually has labels;
+*              an empty tab reads as a broken feature, not as "unused".
+*   Chosen   → an explicit id list. STATIC — this is the one that does NOT
+*              cover a new device, and the tab says so.
+*
+* Counts are LIVE (computed off `deviceManager.listAll`) so "Camera · 12"
+* answers "how much am I granting" without leaving the panel.
+*
+* Shared, not forked: the raw `<ScopePicker>` device row and the simple
+* Access panel both render this. Two editors for one wire shape is how a
+* selector ends up meaning different things in two places.
+*/
+/** Human label for a `DeviceType` — 'lawn-mower' → 'Lawn mower'. */
+function deviceTypeLabel(type) {
+	const spaced = type.replaceAll("-", " ");
+	return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+/** Which tab a selector belongs to. */
+function tabForSelector(selector) {
+	return selector.kind;
+}
+/**
+* A fresh selector when the operator switches tabs. Switching is destructive
+* by nature — an `ids` list has no meaning as a `types` list — so each tab
+* starts empty rather than guessing a translation.
+*/
+function emptySelectorFor(tab) {
+	switch (tab) {
+		case "all": return { kind: "all" };
+		case "types": return {
+			kind: "types",
+			types: []
+		};
+		case "locations": return {
+			kind: "locations",
+			locations: []
+		};
+		case "ids": return {
+			kind: "ids",
+			ids: []
+		};
+	}
+}
+function DeviceSelectorPicker({ value, onChange, includeLinked, onIncludeLinkedChange, clampToDeviceIds, dense = false }) {
+	const { data: rawDevices } = useDeviceManagerListAll({});
+	const [search, setSearch] = (0, react$1.useState)("");
+	const devices = (0, react$1.useMemo)(() => {
+		const all = (rawDevices ?? []).map((d) => ({
+			id: d.id,
+			name: d.name,
+			type: d.type,
+			location: d.location,
+			parentDeviceId: d.parentDeviceId
+		}));
+		if (clampToDeviceIds == null) return all;
+		const allowed = new Set(clampToDeviceIds);
+		return all.filter((d) => allowed.has(d.id));
+	}, [rawDevices, clampToDeviceIds]);
+	const typeOptions = (0, react$1.useMemo)(() => {
+		const counts = /* @__PURE__ */ new Map();
+		for (const d of devices) counts.set(d.type, (counts.get(d.type) ?? 0) + 1);
+		if (value.kind === "types") {
+			for (const t of value.types) if (!counts.has(t)) counts.set(t, 0);
+		}
+		return [...counts.entries()].map(([type, count]) => ({
+			value: type,
+			label: deviceTypeLabel(type),
+			count
+		})).sort((a, b) => a.label.localeCompare(b.label));
+	}, [devices, value]);
+	const locationOptions = (0, react$1.useMemo)(() => {
+		const counts = /* @__PURE__ */ new Map();
+		for (const d of devices) {
+			if (d.location === null || d.location.length === 0) continue;
+			counts.set(d.location, (counts.get(d.location) ?? 0) + 1);
+		}
+		if (value.kind === "locations") {
+			for (const l of value.locations) if (!counts.has(l)) counts.set(l, 0);
+		}
+		return [...counts.entries()].map(([location, count]) => ({
+			value: location,
+			label: location,
+			count
+		})).sort((a, b) => a.label.localeCompare(b.label));
+	}, [devices, value]);
+	/** The Room tab exists only when the fleet has rooms. */
+	const hasLocations = locationOptions.length > 0;
+	const visibleDevices = (0, react$1.useMemo)(() => {
+		const q = search.trim().toLowerCase();
+		return [...q.length === 0 ? devices : devices.filter((d) => d.name.toLowerCase().includes(q) || String(d.id).includes(q) || (d.location ?? "").toLowerCase().includes(q))].sort((a, b) => a.name.localeCompare(b.name));
+	}, [devices, search]);
+	const activeTab = tabForSelector(value);
+	const tabs = [
+		{
+			id: "all",
+			label: "All"
+		},
+		{
+			id: "types",
+			label: "By type"
+		},
+		...hasLocations || activeTab === "locations" ? [{
+			id: "locations",
+			label: "By room"
+		}] : [],
+		{
+			id: "ids",
+			label: "Chosen"
+		}
+	];
+	const toggleType = (type) => {
+		const current = value.kind === "types" ? value.types : [];
+		onChange({
+			kind: "types",
+			types: current.some((t) => String(t) === type) ? current.filter((t) => String(t) !== type) : [...current, ...typeFromString(type)]
+		});
+	};
+	const toggleLocation = (location) => {
+		const current = value.kind === "locations" ? value.locations : [];
+		onChange({
+			kind: "locations",
+			locations: current.includes(location) ? current.filter((l) => l !== location) : [...current, location]
+		});
+	};
+	const toggleId = (id) => {
+		const current = value.kind === "ids" ? value.ids : [];
+		onChange({
+			kind: "ids",
+			ids: current.includes(id) ? current.filter((v) => v !== id) : [...current, id]
+		});
+	};
+	const pad = dense ? "p-2" : "p-3";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "space-y-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex flex-wrap gap-1 border-b border-border pb-1",
+				children: tabs.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: () => onChange(emptySelectorFor(t.id)),
+					className: `shrink-0 whitespace-nowrap rounded px-2 py-1 text-[11px] transition-colors ${activeTab === t.id ? "bg-primary/15 text-primary font-medium" : "text-foreground-subtle hover:bg-foreground-subtle/10 hover:text-foreground"}`,
+					children: t.label
+				}, t.id))
+			}),
+			activeTab === "all" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `rounded border border-border bg-surface ${pad}`,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: "text-[11px] text-foreground",
+					children: [
+						"Every device in this deployment — ",
+						devices.length,
+						" right now."
+					]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: "mt-1 text-[10px] text-foreground-subtle",
+					children: "Devices added later are covered automatically."
+				})]
+			}),
+			activeTab === "types" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGrid, {
+				options: typeOptions,
+				selected: value.kind === "types" ? value.types.map((t) => String(t)) : [],
+				onToggle: toggleType,
+				emptyLabel: "No devices to pick a type from.",
+				footnote: "Devices of a checked type are covered automatically as they are added.",
+				pad
+			}),
+			activeTab === "locations" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxGrid, {
+				options: locationOptions,
+				selected: value.kind === "locations" ? [...value.locations] : [],
+				onToggle: toggleLocation,
+				emptyLabel: "No device has a room assigned yet.",
+				footnote: "A device with no room set is never covered by a room rule.",
+				pad
+			}),
+			activeTab === "ids" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: `rounded border border-border bg-surface ${pad} space-y-2`,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "relative",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-foreground-subtle" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "search",
+							value: search,
+							onChange: (e) => setSearch(e.target.value),
+							placeholder: "Search devices…",
+							className: "w-full rounded border border-border bg-background py-1 pl-7 pr-2 text-[11px] text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-1 focus:ring-primary"
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "max-h-56 overflow-auto rounded border border-border",
+						children: [visibleDevices.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "px-2 py-3 text-[10px] italic text-foreground-subtle",
+							children: "No device matches."
+						}), visibleDevices.map((d) => {
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "flex cursor-pointer items-center gap-2 px-2 py-1.5 text-[11px] hover:bg-foreground-subtle/10",
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+										type: "checkbox",
+										checked: value.kind === "ids" && value.ids.includes(d.id),
+										onChange: () => toggleId(d.id),
+										className: "rounded border-border focus:ring-primary"
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "min-w-0 flex-1 truncate text-foreground",
+										children: d.name
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "shrink-0 font-mono text-[10px] text-foreground-subtle",
+										children: [
+											"#",
+											d.id,
+											d.location !== null && d.location.length > 0 ? ` · ${d.location}` : ""
+										]
+									})
+								]
+							}, d.id);
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+						className: "text-[10px] text-foreground-subtle",
+						children: [
+							"A fixed list — a device added later is ",
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "font-medium",
+								children: "not"
+							}),
+							" covered until you edit this."
+						]
+					})
+				]
+			}),
+			includeLinked !== void 0 && onIncludeLinkedChange !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IncludeLinkedToggle, {
+				value: includeLinked,
+				onChange: onIncludeLinkedChange,
+				pad
+			})
+		]
+	});
+}
+/**
+* Turn a raw string back into the `DeviceType` union without a cast. The
+* enum's values ARE the strings, so a lookup over its members is both exact
+* and total — an unknown string yields no entry and selects nothing.
+*/
+function typeFromString(raw) {
+	return Object.values(_camstack_types.DeviceType).filter((t) => String(t) === raw);
+}
+function CheckboxGrid({ options, selected, onToggle, emptyLabel, footnote, pad }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `rounded border border-border bg-surface ${pad} space-y-2`,
+		children: [options.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-[10px] italic text-foreground-subtle",
+			children: emptyLabel
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "grid max-h-56 grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-1 overflow-auto",
+			children: options.map((o) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				className: "flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-[11px] hover:bg-foreground-subtle/10",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						type: "checkbox",
+						checked: selected.includes(o.value),
+						onChange: () => onToggle(o.value),
+						className: "rounded border-border focus:ring-primary"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "min-w-0 flex-1 truncate text-foreground",
+						children: o.label
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "shrink-0 font-mono text-[10px] text-foreground-subtle",
+						children: o.count
+					})
+				]
+			}, o.value))
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "text-[10px] text-foreground-subtle",
+			children: footnote
+		})]
+	});
+}
+/**
+* The toggle whose OFF state is a real semantic restriction, so the hint says
+* what it costs rather than describing the mechanism: without it, an operator
+* granted a camera cannot fire the siren or floodlight attached to it,
+* because `create` does not inherit parent → child by default.
+*/
+function IncludeLinkedToggle({ value, onChange, pad }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: `rounded border border-border bg-surface ${pad}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			className: "flex cursor-pointer items-start gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "checkbox",
+				checked: value,
+				onChange: (e) => onChange(e.target.checked),
+				className: "mt-0.5 rounded border-border focus:ring-primary"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "flex items-center gap-1.5 text-[11px] font-medium text-foreground",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Link2, { className: "h-3 w-3" }), "Include linked devices"]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "mt-0.5 block text-[10px] text-foreground-subtle",
+					children: value ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: "Accessories attached to a granted camera — siren, floodlight, PIR — are covered too." }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						"Only the devices selected above. An operator granted a camera will",
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "font-medium text-foreground",
+							children: "not"
+						}),
+						" be able to trigger the siren or light attached to it."
+					] })
+				})]
+			})]
+		})
+	});
+}
+/** Summary line for a selector — used by the raw picker's collapsed row. */
+function describeDeviceSelector(selector) {
+	switch (selector.kind) {
+		case "all": return "All devices";
+		case "ids": return selector.ids.length === 0 ? "No device chosen" : `${selector.ids.length} device${selector.ids.length === 1 ? "" : "s"}`;
+		case "types": return selector.types.length === 0 ? "No type chosen" : selector.types.map((t) => deviceTypeLabel(String(t))).join(", ");
+		case "locations": return selector.locations.length === 0 ? "No room chosen" : selector.locations.join(", ");
+	}
+}
+//#endregion
 //#region src/composites/scope-picker.tsx
 /**
 * <ScopePicker> — operator-facing editor for a `TokenScope[]` value.
@@ -46893,13 +47328,24 @@ function KebabMenu({ items, header, triggerClassName, title = "More actions" })
 *   - category   → target: 'device' | 'system'
 *   - capability → target: cap name from `KNOWN_CAP_NAMES`
 *   - addon      → target: addon id from `useAddonsList`
-*   - device     → targets: readonly deviceId[] (multi-select)
+*   - device     → a v3 `DeviceSelector` (all / ids / types / locations)
+*                  plus `includeLinked`, edited by `<DeviceSelectorPicker>`
 *
 * `access` is always 3 independent checkboxes (view / create / delete).
 *
 * `clampToParent` narrows the target dropdown + access checkboxes to
 * what the CALLER possesses. Admins pass `null` to allow everything.
+*
+* This is the RAW editor. The simple, two-question Access panel on
+* `/system/users` composes the same wire shape through `ACCESS_ROLES`; this
+* one is what an operator drops into when a grant set is not a plain role.
 */
+/** `<select>` value → the tri-state `includeLinked` it means. */
+var INCLUDE_LINKED_VALUES = {
+	"": void 0,
+	yes: true,
+	no: false
+};
 var ACCESS_OPTIONS = [
 	{
 		value: "view",
@@ -46930,14 +47376,24 @@ function defaultRow() {
 	};
 }
 /**
-* Collect the union of device targets a parent grants. Used to clamp
-* the device picker so a child grant can't refer to a deviceId the
-* caller themselves doesn't have.
+* The deviceIds a parent's grants actually resolve to, against the live
+* fleet. Used to clamp the device picker so a child grant can't refer to a
+* device the caller themselves doesn't have.
+*
+* v3 selectors are not a literal id list, so this RESOLVES them through the
+* shared resolver rather than reading ids off the grant — a `types:['camera']`
+* parent must clamp to its cameras, and re-deriving that here is exactly the
+* drift D103 warns about. A parent holding `category:device` (unrestricted)
+* yields the whole fleet.
 */
-function parentDeviceTargets(parent) {
+function parentDeviceIds(parent, fleet) {
 	if (parent == null) return [];
 	const out = /* @__PURE__ */ new Set();
-	for (const s of parent) if (s.type === "device") for (const t of s.targets) out.add(t);
+	for (const access of [
+		"view",
+		"create",
+		"delete"
+	]) for (const id of (0, _camstack_types.resolveViewableDeviceIds)(parent, fleet, access)) out.add(id);
 	return [...out];
 }
 function clampedSingleTargets(type, parent, addonChoices, capChoices) {
@@ -46968,7 +47424,7 @@ function clampedAccessForRow(row, parent) {
 	];
 	const matches = parent.filter((s) => {
 		if (s.type !== row.type) return false;
-		if (s.type === "device" && row.type === "device") return s.targets.some((t) => row.targets.includes(t));
+		if (s.type === "device" && row.type === "device") return true;
 		if (s.type !== "device" && row.type !== "device") return s.target === row.target;
 		return false;
 	});
@@ -46988,11 +47444,13 @@ function ScopePicker({ value, onChange, clampToParent, emptyHint }) {
 		value: c,
 		label: c
 	})), []);
-	const deviceChoices = (0, react$1.useMemo)(() => (devices ?? []).map((d) => ({
-		value: String(d.id),
-		label: `${d.name} (#${d.id} · ${d.addonId})`
-	})).sort((a, b) => a.label.localeCompare(b.label)), [devices]);
-	const parentDeviceClamp = (0, react$1.useMemo)(() => clampToParent == null ? null : parentDeviceTargets(clampToParent), [clampToParent]);
+	const fleet = (0, react$1.useMemo)(() => (devices ?? []).map((d) => ({
+		id: d.id,
+		type: d.type,
+		location: d.location,
+		parentDeviceId: d.parentDeviceId
+	})), [devices]);
+	const parentDeviceClamp = (0, react$1.useMemo)(() => clampToParent == null ? null : parentDeviceIds(clampToParent, fleet), [clampToParent, fleet]);
 	/**
 	* Build a fresh scope row when `type` changes. The discriminated union
 	* forces us to re-construct the object per variant so the resulting
@@ -47018,7 +47476,10 @@ function ScopePicker({ value, onChange, clampToParent, emptyHint }) {
 			};
 			case "device": return {
 				type: "device",
-				targets: [],
+				selector: {
+					kind: "ids",
+					ids: []
+				},
 				access: accessArr
 			};
 		}
@@ -47028,11 +47489,18 @@ function ScopePicker({ value, onChange, clampToParent, emptyHint }) {
 			if (i !== idx) return s;
 			if (patch.type !== void 0 && patch.type !== s.type) return rebuildForType(patch.type, patch.access ?? s.access);
 			const access = [...patch.access ?? s.access];
-			if (s.type === "device") return {
-				type: "device",
-				targets: [...patch.targets ?? s.targets],
-				access
-			};
+			if (s.type === "device") {
+				const base = {
+					type: "device",
+					selector: patch.selector ?? s.selector,
+					access
+				};
+				const linked = "includeLinked" in patch ? patch.includeLinked : s.includeLinked;
+				return linked === void 0 ? base : {
+					...base,
+					includeLinked: linked
+				};
+			}
 			if (s.type === "category") return {
 				type: "category",
 				target: patch.target ?? s.target,
@@ -47091,11 +47559,35 @@ function ScopePicker({ value, onChange, clampToParent, emptyHint }) {
 								})
 							]
 						}),
-						row.type === "device" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceTargetPicker, {
-							value: row.targets,
-							choices: deviceChoices,
-							clampToParent: parentDeviceClamp,
-							onChange: (targets) => update(idx, { targets })
+						row.type === "device" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-[200px] flex-1 space-y-1.5",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeviceSelectorPicker, {
+								dense: true,
+								value: row.selector,
+								onChange: (selector) => update(idx, { selector }),
+								clampToDeviceIds: parentDeviceClamp
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+								className: "flex flex-wrap items-center gap-1.5 text-[10px] text-foreground-subtle",
+								children: ["Linked devices", /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+									value: row.includeLinked === void 0 ? "" : row.includeLinked ? "yes" : "no",
+									onChange: (e) => update(idx, { includeLinked: INCLUDE_LINKED_VALUES[e.target.value] }),
+									className: "rounded border border-border bg-background px-1.5 py-0.5 text-[10px] focus:outline-none focus:ring-1 focus:ring-primary",
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "",
+											children: "Automatic (view inherits)"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "yes",
+											children: "Always included"
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+											value: "no",
+											children: "Never included"
+										})
+									]
+								})]
+							})]
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
 							value: row.target,
 							onChange: (e) => update(idx, { target: e.target.value }),
@@ -47158,76 +47650,40 @@ function ScopePicker({ value, onChange, clampToParent, emptyHint }) {
 		]
 	});
 }
-function DeviceTargetPicker({ value, choices, clampToParent, onChange }) {
-	const [pendingAdd, setPendingAdd] = (0, react$1.useState)("");
-	const visibleChoices = (0, react$1.useMemo)(() => {
-		const filtered = clampToParent == null ? choices : choices.filter((c) => clampToParent.includes(c.value));
-		const taken = new Set(value);
-		return filtered.filter((c) => !taken.has(c.value));
-	}, [
-		choices,
-		clampToParent,
-		value
-	]);
-	const labelFor = (id) => choices.find((c) => c.value === id)?.label ?? `#${id}`;
-	const handleAdd = (id) => {
-		if (!id) return;
-		onChange([...value, id]);
-		setPendingAdd("");
-	};
-	const handleRemove = (id) => {
-		onChange(value.filter((v) => v !== id));
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex-1 min-w-[160px] flex flex-wrap items-center gap-1",
-		children: [
-			value.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: "text-[10px] text-foreground-subtle italic px-1",
-				children: "no devices selected"
-			}),
-			value.map((id) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "inline-flex items-center gap-1 rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-mono text-primary",
-				children: [labelFor(id), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: () => handleRemove(id),
-					className: "hover:text-danger transition-colors",
-					title: "Remove device",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(X, { className: "h-2.5 w-2.5" })
-				})]
-			}, id)),
-			visibleChoices.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
-				value: pendingAdd,
-				onChange: (e) => handleAdd(e.target.value),
-				className: "rounded border border-border bg-background px-1.5 py-0.5 text-[10px] focus:outline-none focus:ring-1 focus:ring-primary",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-					value: "",
-					children: "+ add device…"
-				}), visibleChoices.map((c) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
-					value: c.value,
-					children: c.label
-				}, c.value))]
-			})
-		]
-	});
-}
 /**
 * Validation helper. The wire schema (`TokenScopeSchema`) requires every
-* scope to carry a non-empty target/targets and `access.length >= 1`.
-* Use this before passing the picker output to a mutate call so the
+* scope to carry a usable target and `access.length >= 1`; a v3 device
+* selector additionally requires a non-empty list for every kind except
+* `all`. Use this before passing the picker output to a mutate call so the
 * user sees a clean inline error instead of a tRPC ZodError.
+*
+* An EMPTY selector list is rejected rather than silently treated as "all":
+* the schema's `.min(1)` would reject it server-side anyway, and the failure
+* mode of guessing wrong here is granting the whole fleet.
 */
 function validateScopes(scopes) {
 	for (const s of scopes) {
 		if (s.type === "device") {
-			if (s.targets.length === 0) return `Scope device: pick at least one device`;
+			const problem = validateSelector(s.selector);
+			if (problem !== null) return problem;
 		} else if (s.target.trim().length === 0) return `Scope ${s.type}: pick a target`;
 		if (s.access.length === 0) {
-			const targetDesc = s.type === "device" ? `[${s.targets.join(",")}]` : s.target;
+			const targetDesc = s.type === "device" ? describeDeviceSelector(s.selector) : s.target;
 			return `Scope ${s.type}:${targetDesc}: pick at least one access`;
 		}
 	}
 	return null;
 }
+/** Non-empty check per selector kind. `all` selects the fleet and is always
+*  complete. */
+function validateSelector(selector) {
+	switch (selector.kind) {
+		case "all": return null;
+		case "ids": return selector.ids.length === 0 ? "Scope device: pick at least one device" : null;
+		case "types": return selector.types.length === 0 ? "Scope device: pick at least one device type" : null;
+		case "locations": return selector.locations.length === 0 ? "Scope device: pick at least one room" : null;
+	}
+}
 //#endregion
 //#region src/contexts/zone-editing.tsx
 /**
@@ -48153,8 +48609,10 @@ exports.DeviceItem = DeviceItem;
 exports.DeviceList = DeviceList;
 exports.DeviceMultiSelectField = DeviceMultiSelectField;
 exports.DeviceSelectField = DeviceSelectField;
+exports.DeviceSelectorPicker = DeviceSelectorPicker;
 exports.DeviceStepMatrix = DeviceStepMatrix;
 exports.Dialog = Dialog;
+exports.DialogBody = DialogBody;
 exports.DialogContent = DialogContent;
 exports.DialogDescription = DialogDescription;
 exports.DialogFooter = DialogFooter;
@@ -48298,6 +48756,7 @@ exports.SwitchHeroCard = SwitchHeroCard;
 exports.SwitchInlineControl = SwitchInlineControl;
 exports.SwitchPanel = SwitchPanel;
 exports.SystemProvider = SystemProvider;
+exports.TABLE_SCROLL_MAX_H = TABLE_SCROLL_MAX_H;
 exports.TEXT_FIELD_LABEL = TEXT_FIELD_LABEL;
 exports.TEXT_HINT = TEXT_HINT;
 exports.TEXT_METRIC = TEXT_METRIC;
@@ -48350,10 +48809,12 @@ exports.cursorFractionFor = cursorFractionFor;
 exports.darkColors = require_theme_index.darkColors$1;
 exports.defaultTheme = require_theme_index.defaultTheme$1;
 exports.deriveDeviceKind = deriveDeviceKind;
+exports.describeDeviceSelector = describeDeviceSelector;
 exports.deviceMatchesFilter = deviceMatchesFilter;
 exports.deviceOptionLabel = deviceOptionLabel;
 exports.deviceRoleMeta = deviceRoleMeta;
 exports.deviceRoleMetaOf = deviceRoleMetaOf;
+exports.deviceTypeLabel = deviceTypeLabel;
 exports.deviceTypeMeta = deviceTypeMeta;
 exports.deviceTypeMetaOf = deviceTypeMetaOf;
 exports.devicesToOptions = devicesToOptions;
@@ -48411,6 +48872,7 @@ exports.statusIcons = statusIcons;
 exports.stepHasModelForFormat = stepHasModelForFormat;
 exports.stepModelOptions = stepModelOptions;
 exports.stripParentNamePrefix = stripParentNamePrefix;
+exports.tabForSelector = tabForSelector;
 exports.tankAlert = tankAlert;
 exports.themeToCss = require_theme_index.themeToCss$1;
 exports.trpc = trpc;