frontend-svelte/src/widgets/ComparisonSlider/ui/ComparisonSlider/components/ControlsWrapper.svelte

<script lang="ts">
import type { TypographyControl } from '$shared/lib';
import { Input } from '$shared/shadcn/ui/input';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { ComboControlV2 } from '$shared/ui';
import AArrowUP from '@lucide/svelte/icons/a-arrow-up';
import { Spring } from 'svelte/motion';
import { slide } from 'svelte/transition';

interface Props {
    wrapper?: HTMLDivElement | null;
    sliderPos: number;
    isDragging: boolean;
    text: string;
    containerWidth: number;
    weightControl: TypographyControl;
    sizeControl: TypographyControl;
    heightControl: TypographyControl;
}

let {
    sliderPos,
    isDragging,
    wrapper = $bindable(null),
    text = $bindable(),
    containerWidth = 0,
    weightControl,
    sizeControl,
    heightControl,
}: Props = $props();

let panelWidth = $state(0);
const margin = 24;
let side = $state<'left' | 'right'>('left');

// Unified active state for the entire wrapper
let isActive = $state(false);

function handleWrapperClick() {
    if (!isDragging) {
        isActive = true;
    }
}

function handleClickOutside(e: MouseEvent) {
    if (wrapper && !wrapper.contains(e.target as Node)) {
        isActive = false;
    }
}

function handleInputFocus() {
    isActive = true;
}

function handleKeyDown(e: KeyboardEvent) {
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        handleWrapperClick();
    }
}

// Movement Logic
$effect(() => {
    if (containerWidth === 0 || panelWidth === 0) return;
    const sliderX = (sliderPos / 100) * containerWidth;
    const buffer = 40;
    const leftTrigger = margin + panelWidth + buffer;
    const rightTrigger = containerWidth - (margin + panelWidth + buffer);

    if (side === 'left' && sliderX < leftTrigger) {
        side = 'right';
    } else if (side === 'right' && sliderX > rightTrigger) {
        side = 'left';
    }
});

// The "Dodge"
const xSpring = new Spring(0, {
    stiffness: 0.14, // Lower is slower
    damping: 0.5, // Settle
});

// The "Focus"
const ySpring = new Spring(0, {
    stiffness: 0.32,
    damping: 0.65,
});

// The "Rise"
const scaleSpring = new Spring(1, {
    stiffness: 0.32,
    damping: 0.65,
});

// The "Lean"
const rotateSpring = new Spring(0, {
    stiffness: 0.12,
    damping: 0.55,
});

$effect(() => {
    const targetX = side === 'right' ? containerWidth - panelWidth - margin * 2 : 0;
    if (containerWidth > 0 && panelWidth > 0 && !isActive) {
        // On side change set the position and the rotation
        xSpring.target = targetX;
        rotateSpring.target = side === 'right' ? 3.5 : -3.5;

        setTimeout(() => {
            rotateSpring.target = 0;
        }, 600);
    }
});

// Elevation and scale on focus and mouse over
$effect(() => {
    if (isActive && !isDragging) {
        // Lift up
        ySpring.target = 8;
        // Slightly bigger
        scaleSpring.target = 1.1;

        rotateSpring.target = side === 'right' ? -1.1 : 1.1;

        setTimeout(() => {
            rotateSpring.target = 0;
            scaleSpring.target = 1.05;
        }, 300);
    } else {
        ySpring.target = 0;
        scaleSpring.target = 1;
        rotateSpring.target = 0;
    }
});

$effect(() => {
    if (isDragging) {
        isActive = false;
    }
});

// Click outside handler
$effect(() => {
    if (typeof window === 'undefined') return;

    document.addEventListener('click', handleClickOutside);
    return () => document.removeEventListener('click', handleClickOutside);
});
</script>

<div
    onclick={handleWrapperClick}
    bind:this={wrapper}
    bind:clientWidth={panelWidth}
    class={cn(
        'absolute top-6 left-6 z-50 will-change-transform transition-opacity duration-300 flex items-top gap-1.5',
        panelWidth === 0 ? 'opacity-0' : 'opacity-100',
    )}
    style:pointer-events={isDragging ? 'none' : 'auto'}
    style:transform="
        translate({xSpring.current}px, {ySpring.current}px)
        scale({scaleSpring.current})
        rotateZ({rotateSpring.current}deg)
    "
    role="button"
    tabindex={0}
    onkeydown={handleKeyDown}
    aria-label="Font controls"
>
    <div
        class={cn(
            'animate-nudge relative transition-all',
            side === 'left' ? 'order-2' : 'order-0',
            isActive ? 'opacity-0' : 'opacity-100',
            isDragging && 'opacity-80 grayscale-[0.2]',
        )}
    >
        <AArrowUP class={cn('size-3', 'stroke-indigo-600')} />
    </div>

    <div
        class={cn(
            'relative p-2 rounded-2xl border transition-all duration-250 ease-out flex flex-col gap-1.5',
            isActive
                ? 'bg-white/95 border-indigo-400/40 shadow-[0_30px_70px_-10px_rgba(99,102,241,0.25)]'
                : ' bg-white/25 border-white/40 shadow-[0_12px_40px_-12px_rgba(0,0,0,0.12)]',
            isDragging && 'opacity-80 grayscale-[0.2]',
        )}
        style:backdrop-filter="blur(24px)"
    >
        <div class="relative px-2 py-1">
            <Input
                bind:value={text}
                disabled={isDragging}
                onfocusin={handleInputFocus}
                class={cn(
                    isActive
                        ? 'h-8 text-xs  text-center bg-white/40 border-none rounded-lg focus-visible:ring-indigo-500/50 text-slate-900'
                        : 'bg-transparent shadow-none border-none p-0 h-auto  text-sm  font-medium focus-visible:ring-0 text-slate-900/50',
                    ' placeholder:text-slate-400 selection:bg-indigo-100 flex-1 transition-all duration-350 w-56',
                )}
                placeholder="Edit label..."
            />
        </div>

        {#if isActive}
            <div
                in:slide={{ duration: 250, delay: 50 }}
                out:slide={{ duration: 250 }}
                class="flex justify-between items-center-safe"
            >
                <ComboControlV2 control={weightControl} />
                <ComboControlV2 control={sizeControl} />
                <ComboControlV2 control={heightControl} />
            </div>
        {/if}
    </div>
</div>

<style>
@keyframes nudge {
    0%, 100% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
    2% {
        transform: translateY(-2px) scale(1.1) rotate(-1deg);
    }
    4% {
        transform: translateY(0) scale(1) rotate(1deg);
    }
    6% {
        transform: translateY(-2px) scale(1.1) rotate(0deg);
    }
    8% {
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

.animate-nudge {
    animation: nudge 10s ease-in-out infinite;
}
</style>