<!-- #region MapperToolPage [C:3] [TYPE Page] [SEMANTICS sveltekit, mapper, column, dataset, tool] -->
<!-- @BRIEF Page component: routes/tools/mapper/+page.svelte -->
<!-- @LAYER Page -->
<!--
@SEMANTICS: mapper, column, dataset, tool
@PURPOSE: Page for the dataset column mapper tool.
@LAYER UI
@RELATION IMPLEMENTS -> [EXT:frontend:RoutePages]
@RELATION IMPLEMENTS -> [PageContracts]
@RELATION BINDS_TO -> [NavigationContracts]
@RELATION DEPENDS_ON -> [MapperTool]
@RELATION DEPENDS_ON -> [EXT:frontend:TaskRunner]
@UX_STATE: Ready -> Mapper tool and task runner share the main tools workspace.
@UX_STATE: Running -> Mapping jobs execute while progress remains visible in the task runner.
@UX_STATE: Error -> Mapping-specific validation or execution failures remain visible without route changes.
-->
<script lang="ts">
    import MapperTool from '../../../components/tools/MapperTool.svelte';
    import TaskRunner from '../../../components/TaskRunner.svelte';
    import { PageHeader } from '$lib/ui';
    import { t } from '$lib/i18n/index.svelte.js';
</script>

<div class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- Page Header -->
        <div class="mb-8">
            <PageHeader title={$t.mapper?.title} />
        </div>
        
        <!-- Main Content Grid -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Mapper Tool (Main Content) -->
            <div class="lg:col-span-2">
                <MapperTool />
            </div>
            
            <!-- Task Runner (Sidebar) -->
            <div class="lg:col-span-1">
                <TaskRunner />
            </div>
        </div>
    </div>
</div>
<!-- #endregion MapperToolPage -->
