dillonkearns/elm-pages/12.2.1

NOTE: the latest version is 12.3.0

Tui.Screen

Styled terminal output for a Tui.Program's view function.

import Tui.Screen as Screen


view : Tui.Context -> Model -> Screen.Screen
view _ model =
    Screen.lines
        [ Screen.text "Hello, TUI!" |> Screen.bold
        , Screen.blank
        , Screen.text ("Count: " ++ String.fromInt model.count)
            |> Screen.fg Ansi.Color.cyan
        ]

Building Screens

Screens compose vertically with lines and horizontally with concat. For split-pane layouts, see the Tui.Layout module in the tui-widgets package.

type alias Screen =
Screen Style

Opaque type representing terminal output. Built from primitives, rendered by the framework.

text : String -> Screen

Unstyled text.

lines : List Screen -> Screen

Stack screens vertically. Each item starts on a new line.

concat : List Screen -> Screen

Concatenate screens horizontally, row by row. If one child has more lines than another, the extra trailing lines are preserved.

empty : Screen

Empty screen that renders nothing and takes up zero lines. Use this as a "null" value, for example with Maybe.withDefault:

case maybeError of
    Just err ->
        Screen.text err |> Screen.fg Ansi.Color.red


    Nothing ->
        Screen.empty

Note: this is different from blank which renders one empty line. empty produces no output at all.

blank : Screen

A blank line that renders one empty line. Useful as a vertical spacer in lines:

Screen.lines
    [ Screen.text "Title"
    , Screen.blank
    , Screen.text "Content"
    ]

Note: this is different from empty which renders nothing. blank produces a visible gap (one empty row).

Styling

Pipeline-style builders that compose on any Screen (text, concat, lines):

Screen.text "warning" |> Screen.fg Ansi.Color.yellow |> Screen.bold


Screen.concat [ a, b ] |> Screen.dim -- dims both a and b

For reusable styling, define a styling function and apply it to multiple screens:

borderStyling : Screen -> Screen
borderStyling = Screen.fg Ansi.Color.gray >> Screen.bold


Screen.text "|" |> borderStyling
fg : Color -> Screen -> Screen

Set foreground color on a Screen. Composes with pipeline syntax:

Screen.text "error" |> Screen.fg Ansi.Color.red


Screen.text "warning" |> Screen.fg Ansi.Color.yellow |> Screen.bold
bg : Color -> Screen -> Screen

Set background color on a Screen.

Screen.text "selected" |> Screen.bg Ansi.Color.blue
bold : Screen -> Screen

Apply bold attribute.

Screen.text "important" |> Screen.bold
dim : Screen -> Screen

Apply dim attribute.

Screen.text "muted" |> Screen.dim
italic : Screen -> Screen

Apply italic attribute.

underline : Screen -> Screen

Apply underline attribute.

strikethrough : Screen -> Screen

Apply strikethrough attribute.

inverse : Screen -> Screen

Apply inverse (reverse video) attribute.

withAttributes : List Attribute -> Screen -> Screen

Apply a list of attributes at once. Useful when the attribute set is dynamic (from a config, theme, or computed list). Equivalent to chaining the individual builders.

import Tui.Attribute as Attr
import Tui.Screen as Screen


Screen.text "Heading"
    |> Screen.withAttributes [ Attr.Bold, Attr.Underline ]

See Tui.Attribute for the Attribute type used by withAttributes.

type alias Style =
Style

Terminal cell style: foreground color, background color, text attributes, and optional hyperlink.

Opaque so the field list can grow in future releases without breaking user code. To build styled text, use the Screen-level builders (fg, bold, etc.) directly on a Screen. To read the style of a Tui.Screen.Advanced.Span, use Tui.Screen.Advanced.styleForeground and friends.

Style is opaque so that future releases can add fields without breaking user code. To inspect a Style obtained from a Tui.Screen.Advanced.Span, use the getter functions in Tui.Screen.Advanced.

Text Manipulation

truncateWidth : Int -> Screen -> Screen

Truncate a Screen to a maximum width in columns, preserving styles. Adds "\u{2026}" if truncated. Works on the first line only. Returns empty for non-positive widths.

wrapWidth : Int -> Screen -> List Screen

Wrap a Screen to a maximum width, preserving styles across line breaks. Returns a list of Screens, one per wrapped line.

Screen.concat
    [ Screen.text "This is a "
    , Screen.text "very important" |> Screen.bold
    , Screen.text " paragraph about decoding JSON values."
    ]
    |> Screen.wrapWidth 30
-- Returns 3 Screens with "very important" still bold

Wraps at word boundaries (spaces). Words longer than maxWidth are broken mid-word. Existing line breaks are preserved. Returns [] for empty screens or non-positive widths.

Inspecting

toString : Screen -> String

Convert a Screen to a plain text string (no ANSI codes). Useful for testing, layout measurement, and debugging.

For framework-level consumers that need to inspect rendered lines or rebuild styled output, see Tui.Screen.Advanced.