<script lang="ts">
	import { sanitizeCss, scopeCss } from '$lib/utils/cssSanitize.js';

	interface Props {
		css: string;
	}

	let { css }: Props = $props();

	// CSS is also sanitized server-side at SAVE time. This is defense-in-depth
	// so legacy unsanitized rows (or any future client-rendered preview) cannot
	// inject script-bearing CSS. We also prefix every selector with
	// `.custom-css-scope` so a malicious admin's `body { display:none }` cannot
	// hide the whole app — the rule only takes effect inside the wrapper div.
	const sanitizedCss = $derived(scopeCss(sanitizeCss(css ?? '')));
</script>

{#if sanitizedCss}
	<div class="custom-css-scope contents" aria-hidden="true">
		<!-- eslint-disable-next-line svelte/no-at-html-tags -- CSS is sanitized -->
		{@html `<style>${sanitizedCss}</style>`}
	</div>
{/if}
