admin: group sources and safe search become rac checkboxes

the assigned sources list is a rac checkboxgroup and safe search uses the same drawn checkbox, extracted to a shared ui component with grouped and standalone modes enforced by a discriminated union. the label carries a 44px pointer-target floor on both axes, the focus ring is driven from rac's focus-visible state and guarded by a test, and toggleSource is gone because the group hands back the whole set.

admin/src/features/configuration/ProtectionGroups.tsx

@@ -18,6 +18,7 @@ import {
 	rulesQuery,
 } from "@/lib/queries";
 import type { Blocklist, ConfigStatus, Group, Rule, RuleAction, RuleKind } from "@/lib/types";
+import Checkbox from "@/ui/Checkbox";
 import ConfirmDialog from "@/ui/ConfirmDialog";
 import DefinitionList from "@/ui/DefinitionList";
 import Select from "@/ui/Select";
@@ -68,13 +69,6 @@ const styles = stylex.create({
 		alignItems: "center",
 		gap: "0.75rem",
 	},
-	checkboxLabel: {
-		display: "inline-flex",
-		alignItems: "center",
-		gap: "0.5rem",
-		fontSize: "0.875rem",
-		lineHeight: "1.25rem",
-	},
 	spacer: {
 		marginLeft: "auto",
 	},
@@ -355,21 +349,15 @@ function GroupDetailEditable({ group }: { group: Group }) {
 			)}
 
 			<div {...stylex.props(styles.controlRow)}>
-				<label {...stylex.props(styles.checkboxLabel)}>
-					<input
-						type="checkbox"
-						checked={group.safe_search}
-						disabled={update.isPending}
-						{...stylex.props(shared.focusRing)}
-						onChange={(event) =>
-							update.mutate({
-								id: group.id,
-								input: { name: group.name, safe_search: event.target.checked },
-							})
-						}
-					/>
+				<Checkbox
+					isSelected={group.safe_search}
+					isDisabled={update.isPending}
+					onChange={(safeSearch) =>
+						update.mutate({ id: group.id, input: { name: group.name, safe_search: safeSearch } })
+					}
+				>
 					Safe search
-				</label>
+				</Checkbox>
 				<span {...stylex.props(styles.spacer)}>
 					{!renaming && (
 						<button