panelTypes[tabActiveIndex] && editor.setActivePanel(panelTypes[tabActiveIndex])} class={`panel ${className}`.trim()} {classes} style={styleName} {styles} data-panel-body={panelId} data-panel-dockable={crossPanelDropAction ? "" : undefined} > {#each tabLabels as tabLabel, tabIndex} tabPointerDown(e, tabIndex)} on:click={(e) => e.stopPropagation()} on:auxclick={(e) => { // Middle mouse button click if (e.button === BUTTON_MIDDLE) { e.stopPropagation(); closeAction?.(tabIndex); } }} bind:this={tabElements[tabIndex]} > {#if editingNameTabIndex !== tabIndex} renameAction && setEditingTabName(tabIndex, tabLabel.name)}>{tabLabel.name} {:else} { // Stop propagation when we handle the key ourselves so the global keyboard forwarder doesn't dispatch them and trigger unrelated bindings if (e.key === "Enter") { commitEditingTabName(e); e.stopPropagation(); } else if (e.key === "Escape") { editingNameTabIndex = undefined; e.stopPropagation(); } }} /> {/if} {#if tabLabel.unsaved} * {/if} {#if tabCloseButtons} { e?.stopPropagation(); closeAction?.(tabIndex); }} icon="CloseX" size={16} data-close-button /> {/if} {/each} {#if dragging && insertionMarkerLeft !== undefined}

{/if} {#if !dragging && crossPanelDropAction && $panelDrag.active && $panelDrag.hoverTargetPanelId === panelId && $panelDrag.hoverInsertionMarkerLeft !== undefined}

{/if} {#if panelTypes[tabActiveIndex]} {/if} {#if $panelDrag.active && $panelDrag.hoverDockingPanelId === panelId && $panelDrag.hoverDockingEdge}

{/if}