@tanstack/devtools/src/utils/constants.ts

TanStack Devtools is a set of tools for building advanced devtools for your application.

/**
 * Maximum number of plugins that can be active simultaneously in the devtools.
 *
 * The workspace arranges them in a tree of splits and stacked tabs, so this is
 * a cap on how many can be *open*, not on how many fit side by side — a stacked
 * tab costs no space.
 */
export const MAX_ACTIVE_PLUGINS = 18

/**
 * Height of a group's tab bar, along the top edge of the group's rect. Tall
 * enough for a 24px close target, which is the WCAG 2.5.8 minimum.
 */
export const PLUGIN_GROUP_TAB_HEIGHT = 30
/** Thickness of the draggable gutter between two panes of a split. */
export const PLUGIN_SPLITTER_SIZE = 6
/**
 * A pane smaller than this is not worth having. A drop that would breach it in
 * either axis becomes a stacked tab instead of a split, so the gesture always
 * produces something readable.
 */
export const MIN_PANE_SIZE = { w: 280, h: 160 }
/** How much of a pane's edge counts as a split zone rather than the centre. */
export const PANE_DROP_EDGE_RATIO = 0.25

export const WORKBENCH_HEADER_HEIGHT = 36
export const PLUGINS_STRIP_HEIGHT = 44
/**
 * The single inline gutter every workbench surface aligns to: the header, the
 * secondary tab strips and the content of each destination all start here, so
 * the left edge reads as one column instead of three.
 */
export const WORKBENCH_GUTTER = 16
/** Half gutter, used on narrow panels where 16px eats too much width. */
export const WORKBENCH_GUTTER_NARROW = 12
export const PANEL_CLOSE_THRESHOLD = 70
export const PANEL_MAX_VIEWPORT_RATIO = 0.9