TermUI.Dev.UIInspector (TermUI v0.2.0)

View Source

UI Inspector overlay for development mode.

Shows component boundaries, names, types, and render times as an overlay on top of the application. Toggle with Ctrl+Shift+I when dev mode is enabled.

Features

  • Component boundary outlines
  • Component name and type labels
  • Render time display
  • Click to select component for state inspection

Summary

Functions

create_labeled_border(label, width, char)

Creates a top border line with embedded label.

find_component_at(components, x, y)

Finds component at screen position for selection.

format_render_time(time_us)

Formats render time for display.

get_module_name(module)

Extracts short module name from full module atom.

get_state_summary(state)

Gets summary of component state for quick display.

render(components, selected_id, area)

Renders the UI inspector overlay.

render_component_boundary(id, info, selected?)

Renders a single component's boundary and label.

Functions

create_labeled_border(label, width, char)

@spec create_labeled_border(String.t(), integer(), String.t()) :: String.t()

Creates a top border line with embedded label.

find_component_at(components, x, y)

@spec find_component_at(map(), integer(), integer()) :: term() | nil

Finds component at screen position for selection.

format_render_time(time_us)

@spec format_render_time(integer()) :: String.t()

Formats render time for display.

get_module_name(module)

@spec get_module_name(module()) :: String.t()

Extracts short module name from full module atom.

get_state_summary(state)

@spec get_state_summary(term()) :: String.t()

Gets summary of component state for quick display.

render(components, selected_id, area)

@spec render(map(), term() | nil, map()) :: term()

Renders the UI inspector overlay.

Returns render nodes for component boundaries and labels.

render_component_boundary(id, info, selected?)

@spec render_component_boundary(term(), map(), boolean()) :: term()

Renders a single component's boundary and label.