{{-- Photo placeholder mirrors page x-data to avoid Alpine "preview is not defined" race during hydration --}}
<div class="flex flex-col gap-6" x-data="{ file: null, preview: null, status: 'idle' }" data-testid="photo-help-skeleton">
    <x-skeleton.header />

    <div class="grid grid-cols-3 gap-5">
        <x-skeleton.card class="col-span-2" :lines="5" :header="false" />
        <div class="flex flex-col gap-4">
            <x-skeleton.card :lines="2" />
            <x-skeleton.card :lines="2" />
        </div>
    </div>
</div>