SOLUCIÓN 1: La forma de comunicarse efectivamente con la IA

<script lang="ts">
// Componente de Slider en Svelte
let container: HTMLElement;
let position = 50;
let isDragging = false;

function startDrag() {
isDragging = true;
}
function stopDrag() {
isDragging = false;
}
function handleMove(e: MouseEvent) {
if (!isDragging || !container) return;
const rect = container.getBoundingClientRect();
let newX = e.clientX - rect.left;
if (newX < 0) newX = 0;
if (newX > rect.width) newX = rect.width;
position = (newX / rect.width) * 100;
}
</script>

<svelte:window 
on:mouseup={stopDrag} 
on:mousemove={handleMove} 
/>

<div class="slider-container" bind:this={container}>
<div class="panel-after">
<slot name="after" />
</div>
<div class="panel-before" style="clip-path: inset(0 {100 - position}% 0 0);">
<slot name="before" />
</div>
<div class="slider-handle" 
style="left: {position}%" 
on:mousedown={startDrag}>
</div>
</div>