{ e.stopPropagation(); open = !open; }} class="rounded px-2 py-1 text-sm text-gray-500 hover:bg-gray-200 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 transition flex items-center gap-1" title="Board background" aria-label="Board background" > {#if currentBackground}
{:else}
{/if} Background
{#if open}
e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} > {#if !customMode}
Solid Colors
{#each PRESET_SOLIDS as color}
setBackground(color)} class="w-full aspect-square rounded-lg border-2 transition hover:scale-110 {currentBackground === color ? 'border-white ring-2 ring-[var(--color-primary)]' : 'border-transparent'}" style="background: {color};" title={color} >
{/each}
Gradients
{#each PRESET_GRADIENTS as grad}
setBackground(grad)} class="w-full h-8 rounded-lg border-2 transition hover:scale-105 {currentBackground === grad ? 'border-white ring-2 ring-[var(--color-primary)]' : 'border-transparent'}" style="background: {grad};" aria-label="Select gradient background" >
{/each}
(customMode = true)} class="flex-1 rounded-lg border border-gray-300 dark:border-gray-600 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition" > Custom...
{#if currentBackground}
setBackground(null)} class="rounded-lg border border-gray-300 dark:border-gray-600 px-2 py-1.5 text-xs text-[var(--color-danger)] hover:bg-red-50 dark:hover:bg-red-900/30 transition" > Remove
{/if}
{:else}
setBackground(customValue)} disabled={!customValue} class="flex-1 rounded-lg bg-[var(--color-primary)] px-2 py-1.5 text-xs text-white hover:opacity-90 transition disabled:opacity-50" > Apply
(customMode = false)} class="rounded-lg border border-gray-300 dark:border-gray-600 px-2 py-1.5 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition" > Back
{/if}
{/if}