tui_tui 0.2.0 → 0.4.0

data/examples/form.rb

@@ -51,73 +51,55 @@ module FormSample
   CONTACTS = ["Email", "SMS", "Push", "郵送"].freeze
   COUNTRIES = ["日本", "United States", "United Kingdom", "Deutschland", "France", "中国", "한국"].freeze
 
-  # Shared text-editing helpers, so single- and multi-line fields agree on what
-  # is printable and how a click column maps to a character index.
-  module Text
-    module_function
-
-    # No control bytes (Enter/Tab/Esc/Backspace never insert); multibyte passes.
-    def printable?(string) = string.bytes.all? { |b| b >= 0x20 && b != 0x7F }
-
-    def width(chars) = TuiTui::DisplayText.new(chars.join).width
-
-    # The character index whose left edge sits closest to `rel_col` columns in —
-    # accounting for wide characters before it.
-    def column_index(chars, rel_col)
-      width = 0
-      chars.each_with_index do |ch, i|
-        w = TuiTui::DisplayText.new(ch).width
-        return i if rel_col < width + ((w + 1) / 2)
-
-        width += w
-      end
-      chars.length
-    end
-  end
-
-  # A single editable line. The cursor is a character index, drawn as a bright
-  # block at the right column even past wide characters.
+  # A single editable line backed by the shared TuiTui::TextInput model: it owns
+  # the grapheme buffer, cursor, and column geometry, so this field only adds the
+  # Emacs key aliases, the form's focus/submit semantics, and the chrome. A value
+  # wider than the box scrolls horizontally (via TextInput#viewport) to keep the
+  # cursor — the real hardware cursor — visible.
   class TextField
     attr_reader :key, :label
 
     def initialize(key, label, value: "")
       @key = key
       @label = label
-      @chars = value.grapheme_clusters # edit by grapheme, so the cursor never lands inside an emoji/combining cluster
-      @pos = @chars.length
+      @input = TuiTui::TextInput.new(value: value)
+      @scroll = 0 # left grapheme of the visible window; refreshed each draw
     end
 
     def rows = 1
-    def value = @chars.join
+    def value = @input.value
     def summary = value.empty? ? "(empty)" : value
     def capturing? = true # keys are text, so "q" never quits while editing
 
     # Returns :submit / :focus_next / :focus_prev to the form, or nil (consumed).
+    # The canonical editing keys (text, Backspace/Delete, arrows, Home/End) go to
+    # TextInput; only the Emacs aliases and focus keys are handled here.
     def handle(key)
       case key
       when "\r" then :submit
       when :down then :focus_next
       when :up then :focus_prev
-      when TuiTui::KeyCode::BACKSPACE, :backspace then edit { delete_back }
-      when :delete, CTRL_D then edit { @chars.delete_at(@pos) }
-      when :left, CTRL_B then edit { @pos = [@pos - 1, 0].max }
-      when :right, CTRL_F then edit { @pos = [@pos + 1, @chars.length].min }
-      when :home, CTRL_A then edit { @pos = 0 }
-      when :end, CTRL_E then edit { @pos = @chars.length }
-      when String then edit { insert(key) if Text.printable?(key) }
+      when CTRL_A then edit { @input.to_home }
+      when CTRL_E then edit { @input.to_end }
+      when CTRL_B then edit { @input.left }
+      when CTRL_F then edit { @input.right }
+      when CTRL_D then edit { @input.delete_forward }
+      else edit { @input.handle_editing(key) }
       end
     end
 
     def click(_rel_row, col)
-      @pos = Text.column_index(@chars, col - VALUE_COL)
+      @input.cursor = @input.index_at(col - VALUE_COL, from: @scroll)
       nil
     end
 
     def draw(canvas, top, focused:)
       canvas.text(top, LABEL_COL, label, LABEL)
       canvas.fill(TuiTui::Rect.new(row: top, col: VALUE_COL, rows: 1, cols: VALUE_W), BOX)
-      canvas.text(top, VALUE_COL, TuiTui::DisplayText.new(value).truncate(VALUE_W), TEXT)
-      canvas.cursor_at(top, VALUE_COL + Text.width(@chars[0...@pos])) if focused
+      viewport = @input.viewport(VALUE_W)
+      @scroll = viewport.start
+      canvas.text(top, VALUE_COL, viewport.text, TEXT)
+      canvas.cursor_at(top, VALUE_COL + viewport.cursor_col) if focused
     end
 
     private
@@ -126,27 +108,14 @@ module FormSample
       yield
       nil
     end
-
-    # Re-cluster across the boundary so a combining mark merges into its base.
-    def insert(string)
-      head = @chars[0...@pos].join
-      @chars = (head + string + @chars[@pos..].join).grapheme_clusters
-      @pos = (head + string).grapheme_clusters.length
-    end
-
-    def delete_back
-      return if @pos.zero?
-
-      @chars.delete_at(@pos - 1)
-      @pos -= 1
-    end
   end
 
-  # A multi-line text box. The buffer is an array of character arrays (one per
-  # line); the cursor is a (row, col) pair. Enter splits the current line,
-  # Backspace joins lines, arrows navigate and spill focus at the top/bottom
-  # edges. Only ROWS_SHOWN lines are visible; the view scrolls to track the
-  # cursor. Click to drop the cursor at a position.
+  # A multi-line text box built on TuiTui::TextInput: each line is a plain string
+  # in @lines, and the *focused* line is hydrated into a TextInput (@input) that
+  # owns the within-line editing, cursor, click mapping, and horizontal scroll.
+  # This class adds only the cross-line structure — splitting on Enter, joining on
+  # Backspace/Delete, vertical scrolling, and focus spill at the top/bottom edges.
+  # Leaving a line writes it back to @lines and re-hydrates the new focused line.
   class TextArea
     attr_reader :key, :label
 
@@ -155,16 +124,17 @@ module FormSample
     def initialize(key, label, value: "")
       @key = key
       @label = label
-      @lines = value.empty? ? [[]] : value.split("\n", -1).map(&:grapheme_clusters) # one grapheme per element
+      @lines = value.empty? ? [""] : value.split("\n", -1)
       @row = @lines.size - 1
-      @col = @lines.last.size
+      @input = TuiTui::TextInput.new(value: @lines[@row]) # cursor at end of the last line
       @top = 0 # first visible line
+      @scroll = 0 # left grapheme of the focused line's viewport; refreshed each draw
       scroll  # keep the cursor visible even when seeded with a long value
     end
 
     def rows = ROWS_SHOWN
-    def value = @lines.map(&:join).join("\n")
-    def summary = value.empty? ? "(empty)" : "#{@lines.size} line(s), #{@lines.sum(&:size)} chars"
+    def value = @lines.join("\n")
+    def summary = value.empty? ? "(empty)" : "#{@lines.size} line(s), #{char_count} chars"
     def capturing? = true
 
     def handle(key)
@@ -173,12 +143,12 @@ module FormSample
       when :down, CTRL_N then @row == @lines.size - 1 ? :focus_next : move(1)
       when :left, CTRL_B then edit { move_left }
       when :right, CTRL_F then edit { move_right }
-      when :home, CTRL_A then edit { @col = 0 }
-      when :end, CTRL_E then edit { @col = line.size }
+      when :home, CTRL_A then edit { @input.to_home }
+      when :end, CTRL_E then edit { @input.to_end }
       when "\r" then edit { split_line }
       when TuiTui::KeyCode::BACKSPACE, :backspace then edit { backspace }
       when :delete, CTRL_D then edit { delete_forward }
-      when String then edit { insert(key) if Text.printable?(key) }
+      when String then edit { @input.type(key) }
       end
     end
 
@@ -186,87 +156,95 @@ module FormSample
       ln = @top + rel_row
       return nil if ln >= @lines.size
 
-      @row = ln
-      @col = Text.column_index(@lines[ln], col - VALUE_COL)
+      focus(ln, 0) unless ln == @row
+      from = ln == @row ? @scroll : 0
+      @input.cursor = @input.index_at(col - VALUE_COL, from: from)
       nil
     end
 
     def draw(canvas, top, focused:)
       canvas.text(top, LABEL_COL, label, LABEL)
+      viewport = @input.viewport(VALUE_W)
+      @scroll = viewport.start
       ROWS_SHOWN.times do |i|
         row = top + i
         canvas.fill(TuiTui::Rect.new(row: row, col: VALUE_COL, rows: 1, cols: VALUE_W), BOX)
         ln = @top + i
         next if ln >= @lines.size
 
-        canvas.text(row, VALUE_COL, TuiTui::DisplayText.new(@lines[ln].join).truncate(VALUE_W), TEXT)
+        text = ln == @row ? viewport.text : TuiTui::DisplayText.new(@lines[ln]).truncate(VALUE_W)
+        canvas.text(row, VALUE_COL, text, TEXT)
       end
-      canvas.cursor_at(top + (@row - @top), VALUE_COL + Text.width(@lines[@row][0...@col])) if focused
+      canvas.cursor_at(top + (@row - @top), VALUE_COL + viewport.cursor_col) if focused
     end
 
     private
 
+    def char_count = @lines.sum { |line| line.grapheme_clusters.size }
+
+    # Re-hydrate `row` as the active editor with its cursor at grapheme `cursor`
+    # (clamped to the line by TextInput#cursor=). The previously focused line is
+    # already current in @lines, since #edit writes it back after every key.
+    def focus(row, cursor)
+      @row = row
+      @input = TuiTui::TextInput.new(value: @lines[row])
+      @input.cursor = cursor
+    end
+
     def edit
       yield
+      @lines[@row] = @input.value # keep @lines the source of truth for value/draw
       scroll
       nil
     end
 
-    def line = @lines[@row]
-
     # Move the cursor `delta` rows, keeping the column within the new line.
     def move(delta)
-      @row += delta
-      @col = [@col, line.size].min
+      focus(@row + delta, @input.cursor)
       scroll
       nil
     end
 
     def move_left
-      if @col.positive? then @col -= 1
-      elsif @row.positive? then @row -= 1; @col = line.size
+      if @input.cursor.positive? then @input.left
+      elsif @row.positive? then focus(@row - 1, @lines[@row - 1].grapheme_clusters.size)
       end
     end
 
     def move_right
-      if @col < line.size then @col += 1
-      elsif @row < @lines.size - 1 then @row += 1; @col = 0
+      if @input.cursor < @input.length then @input.right
+      elsif @row < @lines.size - 1 then focus(@row + 1, 0)
       end
     end
 
+    # Split the focused line at the cursor; the tail becomes a new line below.
     def split_line
-      tail = line.slice!(@col..) || []
-      @lines.insert(@row + 1, tail)
-      @row += 1
-      @col = 0
+      graphemes = @input.value.grapheme_clusters
+      @lines[@row] = graphemes[0...@input.cursor].join
+      @lines.insert(@row + 1, graphemes[@input.cursor..].join)
+      focus(@row + 1, 0)
     end
 
+    # Delete before the cursor, joining onto the end of the previous line.
     def backspace
-      if @col.positive?
-        line.delete_at(@col - 1)
-        @col -= 1
-      elsif @row.positive?
-        prev = @lines[@row - 1]
-        @col = prev.size
-        prev.concat(line)
-        @lines.delete_at(@row)
-        @row -= 1
-      end
+      return @input.delete_back if @input.cursor.positive?
+      return if @row.zero?
+
+      seam = @lines[@row - 1].grapheme_clusters.size
+      @lines[@row - 1] += @input.value
+      @lines.delete_at(@row)
+      focus(@row - 1, seam)
     end
 
+    # Delete under the cursor, pulling the next line up onto this one.
     def delete_forward
-      if @col < line.size
-        line.delete_at(@col)
-      elsif @row < @lines.size - 1
-        line.concat(@lines.delete_at(@row + 1))
-      end
-    end
+      return @input.delete_forward if @input.cursor < @input.length
+      return if @row == @lines.size - 1
 
-    # Re-cluster the line across the boundary so combining marks merge correctly.
-    def insert(string)
-      head = line[0...@col].join
-      @lines[@row] = (head + string + line[@col..].join).grapheme_clusters
-      @col = (head + string).grapheme_clusters.length
+      seam = @input.cursor
+      @lines[@row] = @input.value + @lines[@row + 1]
+      @lines.delete_at(@row + 1)
+      focus(@row, seam)
     end
 
     # Keep the cursor line within the visible window.

data/examples/life.rb

@@ -134,7 +134,7 @@ module LifeSample
       text = " gen #{@gen}  (#{@alive.size} alive, #{state}, #{@speed}x)  " \
              "click=draw  Space=pause  s=step  +/-=speed  r=reseed  q=quit"
       rect = TuiTui::Rect.new(row: size.rows, col: 1, rows: 1, cols: size.cols)
-      TuiTui::StatusBar.draw(canvas, rect, left: text, style: BAR)
+      TuiTui::Widget::StatusBar.draw(canvas, rect, left: text, style: BAR)
     end
   end
 end

data/examples/log_viewer.rb

@@ -0,0 +1,118 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# A tail -f style log viewer: three log sources on a Widget::Tabs bar, the
+# active source in a Widget::TextView (severity-colored styled lines), and a
+# Widget::StatusBar footer. Every tick appends a line to each source; while a
+# tab sits at the bottom it follows new lines, scrolling up pauses following
+# (G resumes) — each tab keeps its own scroll position.
+#
+#   ruby examples/log_viewer.rb
+#
+# Keys: Tab / → next tab, ← previous, 1-3 jump, click a tab, j/k scroll,
+# g top (pauses), G bottom (resumes following), q (or Ctrl-C) quit.
+
+require_relative "../lib/tui_tui"
+
+module LogViewerSample
+  THEME = TuiTui::Theme.auto
+  SOURCES = ["app", "worker", "アクセスログ"].freeze
+  # Weighted so most lines are fine, some warn, a few fail — like real logs.
+  KINDS = %i[success success success success warning danger].freeze
+  MESSAGES = {
+    success: ["GET /api/items 200 12ms", "job finished in 0.4s", "healthcheck ok", "cache hit user:42"],
+    warning: ["slow query 830ms", "retrying connection (2/5)", "queue depth above 100", "deprecated param 'page'"],
+    danger: ["POST /orders 500 Internal Server Error", "job failed: timeout", "redis connection refused"]
+  }.freeze
+
+  class App
+    def initialize
+      @active = 0
+      @clock = 0 # fake seconds, so timestamps advance deterministically
+      @logs = SOURCES.map { Array.new(10) { next_line } }
+      @tops = Array.new(SOURCES.size, 0)
+      @follow = Array.new(SOURCES.size, true)
+    end
+
+    def wants_tick? = true # always tailing
+
+    def update(event)
+      case event
+      in TuiTui::KeyEvent(key: "q" | TuiTui::KeyCode::CTRL_C) then :quit
+      in TuiTui::KeyEvent(key: "\t" | :right) then switch(@active + 1)
+      in TuiTui::KeyEvent(key: :left) then switch(@active - 1)
+      in TuiTui::KeyEvent(key: "1" | "2" | "3") then switch(event.key.to_i - 1)
+      in TuiTui::KeyEvent(key: "j" | :down) then scroll(1)
+      in TuiTui::KeyEvent(key: "k" | :up) then scroll(-1)
+      in TuiTui::KeyEvent(key: "g") then scroll(-@logs[@active].size)
+      in TuiTui::KeyEvent(key: "G") then resume_follow
+      in TuiTui::MouseEvent(action: :press) then click(event)
+      in TuiTui::TickEvent then append
+      else self
+      end
+    end
+
+    def view(size)
+      canvas = TuiTui::Canvas.blank(size)
+      # Remember the rects for hit-testing and scrolling (the tabs.rb @bar
+      # pattern): the runtime renders before every event, so they are current.
+      @bar, body, status = TuiTui::Rect.of(size).split_rows(1, :rest, 1)
+      @page = [body.rows, 1].max
+      TuiTui::Widget::Tabs.draw(canvas, @bar, SOURCES, active: @active, theme: THEME)
+      lines = @logs[@active]
+      max_top = [lines.size - body.rows, 0].max
+      @tops[@active] = @follow[@active] ? max_top : @tops[@active].clamp(0, max_top)
+      TuiTui::Widget::TextView.draw(canvas, body, lines, top: @tops[@active], scrollbar: THEME)
+      state = @follow[@active] ? "following" : "paused"
+      TuiTui::Widget::StatusBar.draw(canvas, status, left: " #{SOURCES[@active]}  #{lines.size} lines",
+                                                     right: "#{state}  Tab/1-3 switch  j/k/g/G scroll  q quit ",
+                                                     style: THEME.bar)
+      canvas
+    end
+
+    private
+
+    def switch(index)
+      @active = index % SOURCES.size
+      self
+    end
+
+    def click(event)
+      index = @bar && TuiTui::Widget::Tabs.index_at(@bar, event, SOURCES)
+      index ? switch(index) : self
+    end
+
+    # Move the active tab's window; landing on the last page means "at the
+    # bottom", which turns following back on (scrolling up anywhere pauses it).
+    def scroll(delta)
+      max_top = [@logs[@active].size - (@page || 1), 0].max
+      @tops[@active] = (@tops[@active] + delta).clamp(0, max_top)
+      @follow[@active] = @tops[@active] == max_top && delta.positive?
+      self
+    end
+
+    def resume_follow
+      @follow[@active] = true
+      self
+    end
+
+    def append
+      @clock += 1
+      @logs.each { |log| log << next_line }
+      self
+    end
+
+    # One styled log line: a muted timestamp plus a severity-colored message
+    # (theme.success / warning / danger via Theme#status).
+    def next_line
+      @clock += 1
+      kind = KINDS.sample
+      stamp = format("12:%02d:%02d ", (@clock / 60) % 60, @clock % 60)
+      TuiTui::Line[TuiTui::Span[stamp, THEME.muted], TuiTui::Span[MESSAGES[kind].sample, THEME.status(kind)]]
+    end
+  end
+end
+
+if $PROGRAM_NAME == __FILE__
+  TuiTui::Runtime.new(LogViewerSample::App.new).run
+end

data/examples/todo.rb

@@ -3,7 +3,9 @@
 
 # A small but usable todo list. It demonstrates a typical TuiTui app shape:
 # a ScrollList-backed main view, styled rows built from Line/Span, modal widgets
-# for add/edit/delete/help, and width-safe rendering for Japanese text.
+# for add/edit/delete/help opened and dispatched via TuiTui::ModalHost, and
+# width-safe rendering for Japanese text.
+# All colors come from TuiTui::Theme.auto, so it adapts to light/dark terminals.
 #
 #   ruby examples/todo.rb
 #
@@ -15,19 +17,6 @@ require_relative "../lib/tui_tui"
 module TodoSample
   Todo = Data.define(:title, :done)
 
-  S = TuiTui::Style
-  STYLE = {
-    title: S.new(attrs: [:bold]),
-    dim: S.new(attrs: [:dim]),
-    done: S.new(fg: :green),
-    pending: S.new(fg: :yellow),
-    select: S.new(attrs: [:reverse]),
-    select_pending: S.new(fg: :yellow, attrs: [:reverse]),
-    select_done: S.new(fg: :green, attrs: [:reverse]),
-    empty: S.new(fg: :bright_black, attrs: [:italic]),
-    filter: S.new(fg: :cyan, attrs: [:bold]),
-  }.freeze
-
   HELP = [
     ["j / k  ↑ / ↓", "move"],
     ["Space", "toggle done"],
@@ -50,10 +39,10 @@ module TodoSample
   class App
     def initialize(todos = SEED)
       @todos = todos.dup
-      @list = TuiTui::ScrollList.new
+      @theme = TuiTui::Theme.auto
+      @list = TuiTui::Widget::ScrollList.new
       @filter = ""
-      @modal = nil
-      @on_result = nil
+      @host = TuiTui::ModalHost.new
       @toast = nil
       sync_list
     end
@@ -64,32 +53,39 @@ module TodoSample
     def update(event)
       @toast = nil if @toast&.expired?
       return self unless event.is_a?(TuiTui::KeyEvent)
-      return route_modal(event.key) if @modal
+
+      if @host.open?
+        @host.handle(event)
+        sync_list
+        return self
+      end
 
       handle_key(event.key)
     end
 
     def view(size)
       canvas = TuiTui::Canvas.blank(size)
-      body_rows = [size.rows - 4, 1].max
-      body = TuiTui::Rect.new(row: 3, col: 2, rows: body_rows, cols: [size.cols - 2, 1].max)
+      header, body, status = TuiTui::Rect.of(size).split_rows(2, :rest, 2)
+      # Indent the list one column and keep at least one line even when the
+      # terminal is too short for the chrome.
+      body = body.with(col: 2, cols: [size.cols - 2, 1].max, rows: [body.rows, 1].max)
 
-      draw_header(canvas, size)
+      draw_header(canvas, header)
       draw_list(canvas, body)
-      draw_status(canvas, size)
-      @toast&.draw(canvas, size, style: STYLE[:select])
-      @modal&.draw(canvas, size)
+      draw_status(canvas, status)
+      @toast&.draw(canvas, size, style: @theme.selection)
+      @host.draw(canvas, size)
       canvas
     end
 
     private
 
-    def toast(message) = @toast = TuiTui::Toast.new(message)
+    def toast(message) = @toast = TuiTui::Widget::Toast.new(message)
 
     def handle_key(key)
       case key
       when "q", TuiTui::KeyCode::CTRL_C then return :quit
-      when "?" then open_modal(TuiTui::Help.new("Todo keys", HELP)) { nil }
+      when "?" then @host.open(TuiTui::Modal::Help.new("Todo keys", HELP, theme: @theme))
       when "a" then prompt_add
       when "e" then prompt_edit
       when "d" then confirm_delete
@@ -104,23 +100,8 @@ module TodoSample
       self
     end
 
-    def open_modal(widget, &on_result)
-      @modal = widget
-      @on_result = on_result
-    end
-
-    def route_modal(key)
-      result = @modal.handle(key)
-      return self if result.nil?
-
-      @modal = nil
-      @on_result.call(result)
-      sync_list
-      self
-    end
-
     def prompt_add
-      open_modal(TuiTui::Prompt.new("New todo:")) do |result|
+      @host.open(TuiTui::Modal::Prompt.new("New todo:", theme: @theme)) do |result|
         next unless result.is_a?(Array) && result.first == :ok
 
         title = result.last.strip
@@ -135,7 +116,7 @@ module TodoSample
       index = selected_index
       return unless index
 
-      open_modal(TuiTui::Prompt.new("Edit todo:", value: @todos[index].title)) do |result|
+      @host.open(TuiTui::Modal::Prompt.new("Edit todo:", value: @todos[index].title, theme: @theme)) do |result|
         next unless result.is_a?(Array) && result.first == :ok
 
         title = result.last.strip
@@ -147,7 +128,7 @@ module TodoSample
     end
 
     def prompt_filter
-      open_modal(TuiTui::Prompt.new("Filter:", value: @filter)) do |result|
+      @host.open(TuiTui::Modal::Prompt.new("Filter:", value: @filter, theme: @theme)) do |result|
         next unless result.is_a?(Array) && result.first == :ok
 
         @filter = result.last.strip
@@ -159,7 +140,7 @@ module TodoSample
       return unless index
 
       title = TuiTui::DisplayText.new(@todos[index].title).truncate(30)
-      open_modal(TuiTui::Confirm.new("Delete #{title}?", ok: "Delete")) do |result|
+      @host.open(TuiTui::Modal::Confirm.new("Delete #{title}?", ok: "Delete", theme: @theme)) do |result|
         next unless result == :ok
 
         @todos.delete_at(index)
@@ -181,51 +162,49 @@ module TodoSample
       toast(todo.done ? "reopened" : "done")
     end
 
-    def draw_header(canvas, size)
-      canvas.text(1, 2, "Todo list", STYLE[:title])
+    def draw_header(canvas, rect)
+      canvas.text(rect.row, 2, "Todo list", @theme.title)
       if @filter.empty?
-        canvas.text(1, 14, "#{open_count} open / #{@todos.size} total", STYLE[:dim])
+        canvas.text(rect.row, 14, "#{open_count} open / #{@todos.size} total", @theme.muted)
       else
-        canvas.text(1, 14, "filter: #{@filter}", STYLE[:filter])
+        canvas.text(rect.row, 14, "filter: #{@filter}", @theme.accent)
       end
-      canvas.hline(2, 1, size.cols, "-", STYLE[:dim])
+      canvas.hline(rect.row + 1, 1, rect.cols, "-", @theme.frame) if rect.rows > 1
     end
 
     def draw_list(canvas, rect)
       sync_list
       if visible.empty?
         message = @filter.empty? ? "No todos. Press a to add one." : "No matches. Press c to clear the filter."
-        canvas.text(rect.row, rect.col, message, STYLE[:empty])
+        canvas.text(rect.row, rect.col, message, @theme.muted)
         return
       end
 
-      TuiTui::List.new(@list).draw(canvas, rect, highlight: STYLE[:select]) do |visible_index, selected|
+      TuiTui::Widget::List.new(@list).draw(canvas, rect, highlight: @theme.selection) do |visible_index, selected|
         todo = @todos[visible[visible_index]]
         row_line(todo, selected)
       end
     end
 
     def row_line(todo, selected)
-      marker = todo.done ? "[x] " : "[ ] "
-      state = row_state(todo, selected)
-      text = todo.done ? STYLE[:dim] : nil
+      # The selected row is painted whole with theme.selection (List's
+      # highlight); unselected rows color the marker by todo state.
+      return TuiTui::Line[TuiTui::Span["#{marker(todo)}#{todo.title}", @theme.selection]] if selected
 
       TuiTui::Line[
-        TuiTui::Span[marker, state],
-        TuiTui::Span[todo.title, selected ? STYLE[:select] : text],
+        TuiTui::Span[marker(todo), todo.done ? @theme.success : @theme.warning],
+        TuiTui::Span[todo.title, todo.done ? @theme.muted : @theme.text],
       ]
     end
 
-    def row_state(todo, selected)
-      return todo.done ? STYLE[:select_done] : STYLE[:select_pending] if selected
+    def marker(todo) = todo.done ? "[x] " : "[ ] "
 
-      todo.done ? STYLE[:done] : STYLE[:pending]
-    end
+    def draw_status(canvas, rect)
+      return if rect.rows.zero?
 
-    def draw_status(canvas, size)
       status = " a add   e edit   d delete   f filter   Space toggle   ? help   q quit"
-      canvas.hline(size.rows - 1, 1, size.cols, "-", STYLE[:dim]) if size.rows > 1
-      canvas.text(size.rows, 1, status, STYLE[:dim])
+      canvas.hline(rect.row, 1, rect.cols, "-", @theme.frame) if rect.rows > 1
+      canvas.text(rect.row + rect.rows - 1, 1, status, @theme.muted)
     end
 
     def selected_index = visible[@list.cursor]

data/examples/widgets.rb

@@ -62,10 +62,10 @@ module WidgetsSample
     def handle_key(key)
       case key
       when "q", TuiTui::KeyCode::CTRL_C then return :quit
-      when "c" then open(TuiTui::Confirm.new("Proceed?", theme: @theme)) { |r| @last = "confirm -> #{r}" }
-      when "s" then open(TuiTui::Select.new("Pick a color", ITEMS, theme: @theme)) { |r| @last = "select -> #{label(r)}" }
-      when "p" then open(TuiTui::Prompt.new("Name:", theme: @theme)) { |r| @last = "prompt -> #{prompt_value(r)}" }
-      when "?" then open(TuiTui::Help.new("Keys", HELP, theme: @theme)) { nil }
+      when "c" then open(TuiTui::Modal::Confirm.new("Proceed?", theme: @theme)) { |r| @last = "confirm -> #{r}" }
+      when "s" then open(TuiTui::Modal::Select.new("Pick a color", ITEMS, theme: @theme)) { |r| @last = "select -> #{label(r)}" }
+      when "p" then open(TuiTui::Modal::Prompt.new("Name:", theme: @theme)) { |r| @last = "prompt -> #{prompt_value(r)}" }
+      when "?" then open(TuiTui::Modal::Help.new("Keys", HELP, theme: @theme)) { nil }
       when "t" then cycle_theme
       end
       self