{ hovered = true; }} onmouseleave={() => { hovered = false; showSizePicker = false; previewSpan = null; }} > {@render children()} {#if hovered}
{#if onResize}
{ showSizePicker = !showSizePicker; previewSpan = null; }} class="rounded-md bg-card/90 p-1.5 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors {showSizePicker ? 'bg-primary text-primary-foreground' : 'hover:bg-accent hover:text-foreground'}" title={$t('widget.resize') ?? 'Resize'} >
{/if}
onEdit(widgetId)} class="rounded-md bg-card/90 p-1.5 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-primary hover:text-primary-foreground" title={$t('common.edit') ?? 'Edit'} >
{ showDeleteConfirm = true; }} class="rounded-md bg-card/90 p-1.5 text-muted-foreground shadow-sm backdrop-blur-sm transition-colors hover:bg-destructive hover:text-destructive-foreground" title={$t('common.delete') ?? 'Delete'} >
{#if showSizePicker && onResize}
{$t('widget.width') ?? 'Width'}
{#each Array.from({ length: maxCols }, (_, i) => i + 1) as span} {@const isActive = span === colSpan} {@const isPreview = span === previewSpan}
handleSpanSelect(span)} onmouseenter={() => { previewSpan = span; }} onmouseleave={() => { previewSpan = null; }} class="flex items-center gap-2 rounded-md px-2 py-1 text-left transition-colors {isActive ? 'bg-primary/15 text-primary ring-1 ring-primary/30' : isPreview ? 'bg-accent text-foreground' : 'text-foreground hover:bg-accent'}" >
{#each Array(maxCols) as _, ci}
{/each}
{span === maxCols ? ($t('widget.full_width') ?? 'Full') : `${span}/${maxCols}`}
{/each}
{/if}
{/if}
{#if showDeleteConfirm}
{ showDeleteConfirm = false; }} /> {/if}