<script lang="ts">
	import '../app.css';
	import favicon from '$lib/assets/favicon.svg';
	import { Toaster } from 'svelte-sonner';
	import { page } from '$app/stores';
	import { handleApiError } from '$lib/utils/error-handler';
	import KeyboardManager from '$lib/components/keyboard/KeyboardManager.svelte';
	import HelpDrawer from '$lib/components/help/HelpDrawer.svelte';

	let { children } = $props();

	// Detectar errores de CUALQUIER página (layout o page)
	$effect(() => {
		const pageData = $page.data as any;
		if (pageData?.error) {
			handleApiError(pageData.error);
		}
	});
</script>

<svelte:head>
	<link rel="icon" href={favicon} />
</svelte:head>

{@render children?.()}

<Toaster richColors position="top-right" />
<KeyboardManager />
<HelpDrawer />
<!-- Hidden Global Search Input for Shortcuts -->
<input
	id="global-search-input"
	type="text"
	class="sr-only"
	placeholder="Global Search..."
	onfocus={() => console.log('Global Search Focused')}
/>
