Dev tab bar

In review

Live · web

Editor tabs: dirty dots yield to the close X on hover · Delete closes the focused tab · overflow fades

ChatInput.tsxTabs.tsxtokens.csscomponent-catalog.mdgateway.tsAGENTS.md

export function NockerlChatInput() {
  // the floating pill
}

Closed 0 tabs · 6 open. The X is pointer-only; keyboard users press Delete on a focused tab (the ARIA deletable-tabs pattern). The island is live.

The web console’s editor tab strip, deliberately not a new component: it is the shipped Tabs composite carrying two dev-tab extensions (the extend-never-fork rule):

• onClose makes every tab closable: a quiet X for pointer users (out of the tab order) and Delete / Backspace on the focused tab for keyboard users, the ARIA deletable-tabs pattern. The list stays controlled: the callback only reports the value; the host removes the tab and moves selection.
• dirty (per tab) renders the editor’s unsaved dot in the trailing slot; with a closable tab it yields to the X on hover/focus (an opacity cross-fade, frozen under prefers-reduced-motion).
• Overflow needs nothing new: Tabs’ own scrollable tablist + edge fades take over when the strip outgrows its container.

Web-only by scope

Editor tabs are console chrome with no native equivalent. The extensions live in the shared NockerlTabs (any platform that ever needs them inherits the same API).

Code

TypeScript

import { NockerlTabs } from '@dizyx/nockerl-react';

<NockerlTabs
  label="Open files"
  size="sm"
  tabs={files.map((f) => ({ value: f.path, label: f.name, dirty: f.unsaved }))}
  value={activePath}
  onChange={setActivePath}
  onClose={(path) => closeFile(path)}  // host removes the tab + moves selection
/>

Parameters

The full surface lives on the Tabs page; the dev-tab additions:

Prop	Type	Default	Description
tabs *	TabItemDef[]	n/a	The tabs, left-to-right. Each owns a panel rendered via renderPanel or its own panel.
value *	string	n/a	The active tab value (controlled). Exactly one tab is selected.
onChange	(next: string) => void	n/a	Fired with the next value. Ignored for a disabled tab.
label *	string	n/a	Accessible name for the whole tablist (wired via aria-label).
variant	NockerlTabsVariant	'underline'	Underline indicator (default) vs. 'enclosed': the same cyan underline seated inside a recessed well.
size	NockerlTabsSize	'md'	Tab height + padding + type role.
renderPanel	(value: string) => ReactNode	n/a	Renders the body for the active tab. Falls back to the tab's own panel.
onClose	((value: string) => void) | undefined	n/a	CLOSABLE tabs (dev-tab-bar): when set, every tab grows a trailing close affordance (pointer) and DELETE / BACKSPACE closes the focused tab (the keyboard half of the ARIA deletable-tabs pattern; the X itself stays out of the tab order). The list stays CONTROLLED: this only reports the value; the host removes the tab + moves selection.

Also accepts the native <div> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.