chore(deps): upgrade css-code-coverage to 0.8.0 (#66)

Author: bartveneman

package-lock.json

@@ -15,15 +15,15 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"lint": "oxlint --config oxlintrc.json",
 		"stylelint": "stylelint \"src/**/*.{css,svelte}\" --ignore-path .gitignore",
-		"css-coverage": "css-coverage --coverage-dir=./css-coverage --min-line-coverage=.8  --min-file-line-coverage=.62 --show-uncovered=all"
+		"css-coverage": "css-coverage --coverage-dir=./css-coverage --min-coverage=.8  --min-file-coverage=.66 --show-uncovered=all"
 	},
 	"dependencies": {
 		"@bramus/specificity": "^2.4.2",
 		"@melt-ui/pp": "^0.3.2",
 		"@melt-ui/svelte": "^0.86.6",
 		"@oddbird/popover-polyfill": "^0.6.1",
 		"@projectwallace/css-analyzer": "^7.6.0",
-		"@projectwallace/css-code-coverage": "^0.7.0",
+		"@projectwallace/css-code-coverage": "^0.8.0",
 		"@projectwallace/css-code-quality": "^3.0.2",
 		"@projectwallace/css-design-tokens": "^0.10.0",
 		"@projectwallace/css-layer-tree": "^2.0.0",

package.json

@@ -328,7 +328,6 @@
 		overflow: auto hidden;
 		max-height: 100%;
 		height: 100%;
-		scroll-margin: var(--space-4);
 		color: var(--fg-200);
 
 		/* Regular outline not visible because of scroll containers */

src/lib/components/Pre.svelte

@@ -6,7 +6,7 @@
 	import Panel from '$components/Panel.svelte'
 	import Meter from '$components/Meter.svelte'
 	import Pre from '$components/Pre.svelte'
-	import { calculate_coverage, type Coverage, type CoverageResult } from '@projectwallace/css-code-coverage'
+	import { calculate_coverage, type Coverage } from '@projectwallace/css-code-coverage'
 	import Empty from '$components/Empty.svelte'
 	import Table from '$components/Table.svelte'
 	import { string_sort } from '$lib/string-sort'
@@ -21,13 +21,8 @@
 		elements: { root, item }
 	} = create_keyboard_list()
 	let selected_index = $state(0)
-	let calculated: CoverageResult | undefined = $state(undefined)
-
-	// TODO: this should be a $derived() but apparently the library isn't side-effect free
-	// https://github.com/projectwallace/css-code-coverage/issues/28
-	$effect(() => {
-		calculated = calculate_coverage(browser_coverage)
-	})
+	// $state.snapshot() necessary to avoid "unsafe state mutation" errors
+	let calculated = $derived(calculate_coverage($state.snapshot(browser_coverage)))
 
 	let max_lines = $derived.by(() => {
 		if (!calculated) return 0