@plumile/ui-devtools

Shared DevTools UI primitives for Kronex extensions and debugging panels.

Status

Specialized public package. This package is intended for internal tooling or specialized DevTools interfaces, not as a general-purpose component library.

Purpose

@plumile/ui-devtools provides a small set of visual primitives used by Kronex developer tooling, including:

• badges and pills
• diff pills for compact before/after summaries
• compact buttons, selects, and list items
• status lights
• cards and sections
• tabs and toolbar components
• split-view layouts
• code blocks and empty states
• a dedicated DevTools theme wrapper

Installation

npm install @plumile/ui-devtools

Peer dependencies:

npm install react react-dom

Main Public Surface

• DevtoolsTheme
• DevtoolsBadge
• DevtoolsPill
• DevtoolsDiffPills
• DevtoolsStatusLight
• DevtoolsButton
• DevtoolsSelect
• DevtoolsCard
• DevtoolsSection
• DevtoolsList
• DevtoolsListItem
• DevtoolsCodeBlock
• DevtoolsJsonBlock
• DevtoolsEmptyState
• DevtoolsTabs
• DevtoolsToolbar
• DevtoolsToolbarButton
• DevtoolsToolbarSeparator
• DevtoolsSplitView

DevtoolsTabs intentionally stays separate from @plumile/ui Tabs so this package can remain independent from the app UI package. DevtoolsToolbar* follows the same package boundary: DevTools panels keep their compact theme and do not depend on the app @plumile/ui toolbar primitives. Use DevtoolsButton and DevtoolsSelect for compact non-toolbar controls that still need the DevTools chrome, and DevtoolsList / DevtoolsListItem for dense card-like lists in diagnostics, live activity, or prepared resources. DevtoolsDiffPills renders added, changed, and removed key summaries with optional per-category overflow limits and block or inline layout variants. DevtoolsSplitView is likewise DevTools-specific; its pointer, keyboard, and separator accessibility behavior is aligned with @plumile/ui ResizableSplitView, but it keeps the compact --pdt-* styling and no runtime dependency on @plumile/ui. Use DevtoolsJsonBlock for visual JSON payloads; it renders nullish values as an empty fallback, pretty-prints serializable values through DevtoolsCodeBlock, and exposes a fallback for circular or otherwise unserializable input.

For the complete entry point, see src/index.ts.

Quick Start

import {
  DevtoolsCard,
  DevtoolsSection,
  DevtoolsTabs,
  DevtoolsTheme,
} from '@plumile/ui-devtools';

const items = [
  { id: 'timeline', label: 'Timeline' },
  { id: 'state', label: 'State' },
] as const;

export function Panel(): JSX.Element {
  return (
    <DevtoolsTheme>
      <DevtoolsTabs
        items={items}
        selectedId="timeline"
        onSelect={() => {}}
        ariaLabel="Panel sections"
      />
      <DevtoolsCard title="Router">
        <DevtoolsSection title="Live state">Ready</DevtoolsSection>
      </DevtoolsCard>
    </DevtoolsTheme>
  );
}

Validation Notes

• the package should keep targeted tests around stable interactive primitives such as tabs or toolbar interactions
• visual breadth is intentionally small, so concise README guidance is preferred over deeper docs

Limitations

• the look and feel is intentionally tied to Kronex DevTools
• this package does not aim to be a generic dashboard or admin UI toolkit

Related Docs

• Router DevTools Extension README
• Documentation Index