frontend-svelte/src/features/DisplayFont/ui/FontSampler/FontSampler.svelte

<!--
    Component: FontSampler
    Displays a sample text with a given font in a contenteditable element.
    Visual design matches FontCard: sharp corners, red hover accent, header stats.
-->
<script lang="ts">
import {
    FontApplicator,
    type UnifiedFont,
} from '$entities/Font';
import { controlManager } from '$features/SetupFont';
import {
    ContentEditable,
    Footnote,
} from '$shared/ui';
import { fly } from 'svelte/transition';

interface Props {
    /** Font info */
    font: UnifiedFont;
    /** Editable sample text */
    text: string;
    /** Position index — drives the staggered entrance delay */
    index?: number;
}

let { font, text = $bindable(), index = 0 }: Props = $props();

const fontWeight = $derived(controlManager.weight);
const fontSize = $derived(controlManager.renderedSize);
const lineHeight = $derived(controlManager.height);
const letterSpacing = $derived(controlManager.spacing);

// Adjust the property name to match your UnifiedFont type
const fontType = $derived((font as any).type ?? (font as any).category ?? '');

const stats = $derived([
    { label: 'SZ', value: `${fontSize}PX` },
    { label: 'WGT', value: `${fontWeight}` },
    { label: 'LH', value: lineHeight?.toFixed(2) },
    { label: 'LTR', value: `${letterSpacing}` },
]);
</script>

<div
    in:fly={{ y: 20, duration: 400, delay: index * 50 }}
    class="
        group relative
        bg-paper dark:bg-dark-card
        border border-black/5 dark:border-white/10
        hover:border-brand dark:hover:border-brand
        hover:shadow-[5px_5px_0px_0px_theme('colors.brand')]
        transition-all duration-200
        overflow-hidden
        flex flex-col
        min-h-60
        rounded-none
    "
    style:font-weight={fontWeight}
>
    <!-- ── Header bar ─────────────────────────────────────────────────── -->
    <div
        class="
            flex items-center justify-between
            px-4 sm:px-5 md:px-6 py-3 sm:py-4
            border-b border-black/5 dark:border-white/10
            bg-paper dark:bg-dark-card
        "
    >
        <!-- Left: index · name · type badge -->
        <div class="flex items-center gap-2 sm:gap-4 min-w-0">
            <span class="font-mono text-[0.625rem] tracking-widest text-neutral-400 uppercase leading-none shrink-0">
                {String(index + 1).padStart(2, '0')}
            </span>

            <div class="w-px h-3 bg-black/10 dark:bg-white/10 shrink-0"></div>

            <span
                class="font-primary font-bold text-sm text-swiss-black dark:text-neutral-200 leading-none tracking-tight uppercase truncate"
            >
                {font.name}
            </span>

            {#if fontType}
                <span
                    class="
                        hidden sm:inline-block shrink-0
                        px-2 py-0.5
                        border border-black/10 dark:border-white/10 rounded-full
                        text-[0.5rem] font-secondary font-medium uppercase
                        text-neutral-500 tracking-wide leading-none
                    "
                >
                    {fontType}
                </span>
            {/if}
        </div>

        <!-- Right: stats, hidden on mobile, fade in on group hover -->
        <div class="hidden md:flex items-center gap-3 lg:gap-4 opacity-50 group-hover:opacity-100 transition-opacity duration-200 shrink-0 ml-4">
            {#each stats as stat, i}
                <div class="flex items-center gap-1">
                    <span class="font-mono text-[0.5rem] tracking-widest text-neutral-400 uppercase">
                        {stat.label}:
                    </span>
                    <span
                        class="font-mono text-[0.5rem] font-bold tracking-widest text-swiss-black dark:text-neutral-200 uppercase"
                    >
                        {stat.value}
                    </span>
                </div>
                {#if i < stats.length - 1}
                    <div class="w-px h-2 bg-black/10 dark:bg-white/10"></div>
                {/if}
            {/each}
        </div>
    </div>

    <!-- ── Main content area ──────────────────────────────────────────── -->
    <div class="flex-1 p-4 sm:p-5 md:p-8 flex items-center overflow-hidden bg-paper dark:bg-dark-card relative z-10">
        <FontApplicator {font} weight={fontWeight}>
            <ContentEditable
                bind:text
                {fontSize}
                {lineHeight}
                {letterSpacing}
            />
        </FontApplicator>
    </div>

    <!-- ── Mobile stats footer (md:hidden — header stats take over above) -->
    <div class="md:hidden px-4 sm:px-5 py-1.5 sm:py-2 border-t border-black/5 dark:border-white/10 flex gap-2 sm:gap-4 bg-paper dark:bg-dark-card mt-auto">
        {#each stats as stat, i}
            <Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider {i === 0 ? 'ml-auto' : ''}">
                {stat.label}:{stat.value}
            </Footnote>
            {#if i < stats.length - 1}
                <div class="w-px h-2 sm:h-2.5 self-center bg-black/10 dark:bg-white/10 hidden sm:block"></div>
            {/if}
        {/each}
    </div>

    <!-- ── Red hover line ─────────────────────────────────────────────── -->
    <div
        class="
            absolute bottom-0 left-0
            w-full h-0.5 bg-brand
            scale-x-0 group-hover:scale-x-100
            transition-transform origin-left duration-300
        "
    >
    </div>
</div>