ratatui_ruby 0.4.0 → 0.6.0

data/examples/widget_sparkline_demo/app.rb

@@ -0,0 +1,275 @@
+# frozen_string_literal: true
+
+# SPDX-FileCopyrightText: 2025 Kerrick Long <me@kerricklong.com>
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+$LOAD_PATH.unshift File.expand_path("../../lib", __dir__)
+require "ratatui_ruby"
+
+# Demonstrates high-density data visualization with interactive attribute cycling.
+#
+# Users need context. A single value ("90% CPU") tells you current status, but not the trend. Full charts take up too much room.
+#
+# This demo showcases the <tt>Sparkline</tt> widget. It provides an interactive playground where you can cycle through data sets, directions, colors, and custom bar sets.
+#
+# Use it to understand how to condense history into a single line for dashboards or headers.
+#
+# === Example
+#
+# Run the demo from the terminal:
+#
+#   ruby examples/widget_sparkline_demo/app.rb
+#
+# rdoc-image:/doc/images/widget_sparkline_demo.png
+class WidgetSparklineDemo
+  def run
+    RatatuiRuby.run do |tui|
+      @tui = tui
+      setup
+      loop do
+        render
+        break if handle_input == :quit
+      end
+    end
+  end
+
+  private def setup
+    # Data sets with different characteristics
+    @data_sets = [
+      {
+        name: "Steady Growth",
+        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+      },
+      {
+        name: "With Gaps",
+        data: [5, nil, 8, nil, 6, nil, 9, nil, 7, nil, 10, nil],
+      },
+      {
+        name: "Random",
+        data: [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5, 8],
+      },
+      {
+        name: "Sawtooth",
+        data: [1, 2, 3, 4, 5, 4, 3, 2, 1, 2, 3, 4],
+      },
+      {
+        name: "Peaks",
+        data: [1, 5, 1, 8, 1, 6, 1, 9, 1, 7, 1, 10],
+      },
+    ]
+    @data_index = 2
+    srand(12345) # Ensure reproducible "Random" data for snapshots
+
+    @directions = [
+      { name: "Left to Right", direction: :left_to_right },
+      { name: "Right to Left", direction: :right_to_left },
+    ]
+    @direction_index = 0
+
+    @styles = [
+      { name: "Green", style: @tui.style(fg: :green) },
+      { name: "Yellow", style: @tui.style(fg: :yellow) },
+      { name: "Red", style: @tui.style(fg: :red) },
+      { name: "Cyan", style: @tui.style(fg: :cyan) },
+      { name: "Magenta", style: @tui.style(fg: :magenta) },
+    ]
+    @style_index = 3
+
+    @absent_symbols = [
+      { name: "None", symbol: nil },
+      { name: "Dot (·)", symbol: "·" },
+      { name: "Square (▫)", symbol: "▫" },
+      { name: "Dash (-)", symbol: "-" },
+      { name: "Underscore (_)", symbol: "_" },
+    ]
+    @absent_symbol_index = 1
+
+    @absent_styles = [
+      { name: "Default", style: nil },
+      { name: "Dark Gray", style: @tui.style(fg: :dark_gray) },
+      { name: "Dim Red", style: @tui.style(fg: :red, modifiers: [:dim]) },
+      { name: "Dim Yellow", style: @tui.style(fg: :yellow, modifiers: [:dim]) },
+    ]
+    @absent_style_index = 2
+
+    @bar_sets = [
+      { name: "Default (Block)", set: nil },
+      {
+        name: "Numbers (0-8)",
+        set: {
+          0 => "0", 1 => "1", 2 => "2", 3 => "3", 4 => "4", 5 => "5", 6 => "6", 7 => "7", 8 => "8"
+        },
+      },
+      { name: "ASCII (Heights)", set: [" ", "_", ".", "-", "=", "+", "*", "#", "@"] },
+    ]
+    @bar_set_index = 0
+
+    @hotkey_style = @tui.style(modifiers: [:bold, :underlined])
+  end
+
+  private def render
+    @tui.draw do |frame|
+      data_set = @data_sets[@data_index]
+      direction = @directions[@direction_index][:direction]
+      style = @styles[@style_index][:style]
+      absent_symbol = @absent_symbols[@absent_symbol_index][:symbol]
+      absent_value_style = @absent_styles[@absent_style_index][:style]
+      bar_set = @bar_sets[@bar_set_index][:set]
+
+      # Use static data for clarity when cycling options
+      current_data = data_set[:data]
+
+      layout = @tui.layout_split(
+        frame.area,
+        direction: :vertical,
+        constraints: [
+          @tui.constraint_fill(1),
+          @tui.constraint_length(6),
+        ]
+      )
+
+      # Main content area with multiple sparkline examples
+      main_content_area = layout[0]
+      main_layout = @tui.layout_split(
+        main_content_area,
+        direction: :vertical,
+        constraints: [
+          @tui.constraint_length(1),
+          @tui.constraint_length(3),
+          @tui.constraint_length(3),
+          @tui.constraint_length(3),
+          @tui.constraint_length(3),
+          @tui.constraint_fill(1),
+        ]
+      )
+
+      frame.render_widget(
+        @tui.paragraph(text: "Sparkline Widget Demo - Cycle attributes with hotkeys"),
+        main_layout[0]
+      )
+
+      # Sparkline 1: Main interactive sparkline
+      frame.render_widget(
+        @tui.sparkline(
+          data: current_data,
+          direction:,
+          style:,
+          absent_value_symbol: absent_symbol,
+          absent_value_style:,
+          bar_set:,
+          block: @tui.block(title: "Interactive Sparkline")
+        ),
+        main_layout[1]
+      )
+
+      # Sparkline 2: Same data, opposite direction
+      frame.render_widget(
+        @tui.sparkline(
+          data: current_data.reverse,
+          direction:,
+          style:,
+          absent_value_symbol: absent_symbol,
+          absent_value_style:,
+          bar_set:,
+          block: @tui.block(title: "Reversed Data")
+        ),
+        main_layout[2]
+      )
+
+      # Sparkline 3: Without absent value symbol (for comparison)
+      frame.render_widget(
+        @tui.sparkline(
+          data: current_data,
+          direction:,
+          style:,
+          bar_set:,
+          block: @tui.block(title: "Without Absent Marker")
+        ),
+        main_layout[3]
+      )
+
+      # Sparkline 4: Gap pattern responsive to absent marker controls
+      frame.render_widget(
+        @tui.sparkline(
+          data: [5, nil, 8, nil, 6, nil, 9, nil, 7, nil, 10, nil],
+          direction:,
+          style: @tui.style(fg: :blue),
+          absent_value_symbol: absent_symbol,
+          absent_value_style:,
+          bar_set:,
+          block: @tui.block(title: "Gap Pattern (Responsive)")
+        ),
+        main_layout[4]
+      )
+
+      # Bottom control panel
+      control_area = layout[1]
+      frame.render_widget(
+        @tui.block(
+          title: "Controls",
+          borders: [:all],
+          children: [
+            @tui.paragraph(
+              text: [
+                # Line 1: Data
+                @tui.text_line(spans: [
+                  @tui.text_span(content: "↑/↓", style: @hotkey_style),
+                  @tui.text_span(content: ": Data (#{@data_sets[@data_index][:name]})"),
+                ]),
+                # Line 2: View
+                @tui.text_line(spans: [
+                  @tui.text_span(content: "d", style: @hotkey_style),
+                  @tui.text_span(content: ": Direction (#{@directions[@direction_index][:name]})  "),
+                  @tui.text_span(content: "c", style: @hotkey_style),
+                  @tui.text_span(content: ": Color (#{@styles[@style_index][:name]})"),
+                ]),
+                # Line 3: Markers
+                @tui.text_line(spans: [
+                  @tui.text_span(content: "m", style: @hotkey_style),
+                  @tui.text_span(content: ": Absent Value Symbol (#{@absent_symbols[@absent_symbol_index][:name]})  "),
+                  @tui.text_span(content: "s", style: @hotkey_style),
+                  @tui.text_span(content: ": Absent Value Style (#{@absent_styles[@absent_style_index][:name]})"),
+                ]),
+                # Line 4: General
+                @tui.text_line(spans: [
+                  @tui.text_span(content: "b", style: @hotkey_style),
+                  @tui.text_span(content: ": Bar Set (#{@bar_sets[@bar_set_index][:name]})  "),
+                  @tui.text_span(content: "q", style: @hotkey_style),
+                  @tui.text_span(content: ": Quit"),
+                ]),
+              ]
+            ),
+          ]
+        ),
+        control_area
+      )
+    end
+  end
+
+  private def handle_input
+    event = @tui.poll_event
+
+    case event
+    in { type: :key, code: "q" } | { type: :key, code: "c", modifiers: ["ctrl"] }
+      :quit
+    in type: :key, code: "up"
+      @data_index = (@data_index - 1) % @data_sets.length
+    in type: :key, code: "down"
+      @data_index = (@data_index + 1) % @data_sets.length
+    in type: :key, code: "d"
+      @direction_index = (@direction_index + 1) % @directions.length
+    in type: :key, code: "c"
+      @style_index = (@style_index + 1) % @styles.length
+    in type: :key, code: "m"
+      @absent_symbol_index = (@absent_symbol_index + 1) % @absent_symbols.length
+    in type: :key, code: "s"
+      @absent_style_index = (@absent_style_index + 1) % @absent_styles.length
+    in type: :key, code: "b"
+      @bar_set_index = (@bar_set_index + 1) % @bar_sets.length
+    else
+      nil
+    end
+  end
+end
+
+WidgetSparklineDemo.new.run if __FILE__ == $PROGRAM_NAME

data/examples/widget_style_colors/README.md

@@ -0,0 +1,34 @@
+<!--
+SPDX-FileCopyrightText: 2026 Kerrick Long <me@kerricklong.com>
+SPDX-License-Identifier: CC-BY-SA-4.0
+-->
+
+# Style Colors Example
+
+Demonstrates high-fidelity color support.
+
+Terminals support millions of colors. This example generates a mathematically precise HSL gradient to prove the rendering engine's color fidelity.
+
+## Features Demonstrated
+
+- **HSL to RGB Conversion**: generating smooth color gradients programmatically.
+- **TrueColor Support**: Rendering arbitrary HEX colors.
+
+## Hotkeys
+
+- **q** / **Ctrl+c**: Quit
+
+## Usage
+
+```bash
+ruby examples/widget_style_colors/app.rb
+```
+
+## Learning Outcomes
+
+Use this example if you need to...
+- Create meaningful heatmaps.
+- Generate color palettes dynamically.
+- Test your terminal's color support capabilities.
+
+![Demo](/doc/images/widget_style_colors.png)

data/examples/widget_style_colors/app.rb

@@ -6,7 +6,7 @@
 $LOAD_PATH.unshift File.expand_path("../../lib", __dir__)
 require "ratatui_ruby"
 
-class ColorGradientDemo
+class WidgetStyleColors
   def initialize
     @width = 80
     @height = 24
@@ -15,16 +15,16 @@ class ColorGradientDemo
   def run
     RatatuiRuby.run do |tui|
       loop do
-        render(tui)
+        tui.draw do |frame|
+          frame.render_widget(render(tui), frame.area)
+        end
         event = tui.poll_event
-        break if event&.key? && (event.ctrl_c? || event == :q)
+        break if event.key? && (event.ctrl_c? || event == :q)
       end
     end
   end
 
-  private
-
-  def render(tui)
+  private def render(tui)
     lines = []
 
     (0...@height).each do |row|
@@ -43,10 +43,10 @@ class ColorGradientDemo
         spans << span
       end
 
-      lines << tui.text_line(spans: spans)
+      lines << tui.text_line(spans:)
     end
 
-    paragraph = tui.paragraph(
+    tui.paragraph(
       text: lines,
       block: tui.block(
         title: "Hex Color Gradient (Press 'q' or Ctrl+C to exit)",
@@ -54,11 +54,9 @@ class ColorGradientDemo
         border_type: :rounded
       )
     )
-
-    tui.draw(paragraph)
   end
 
-  def hsl_to_rgb(hue, saturation, lightness)
+  private def hsl_to_rgb(hue, saturation, lightness)
     h = hue / 360.0
     s = saturation / 100.0
     l = lightness / 100.0
@@ -66,39 +64,39 @@ class ColorGradientDemo
     if s == 0
       r = g = b = l
     else
-      q = l < 0.5 ? l * (1 + s) : l + s - (l * s)
-      p = 2 * l - q
+      q = (l < 0.5) ? l * (1 + s) : l + s - (l * s)
+      p = (2 * l) - q
 
-      r = hue_to_rgb(p, q, h + 1.0 / 3.0)
+      r = hue_to_rgb(p, q, h + (1.0 / 3.0))
       g = hue_to_rgb(p, q, h)
-      b = hue_to_rgb(p, q, h - 1.0 / 3.0)
+      b = hue_to_rgb(p, q, h - (1.0 / 3.0))
     end
 
     [
       (r * 255).round,
       (g * 255).round,
-      (b * 255).round
+      (b * 255).round,
     ]
   end
 
-  def hue_to_rgb(p, q, t)
+  private def hue_to_rgb(p, q, t)
     t += 1 while t < 0
     t -= 1 while t > 1
 
     if t < 1.0 / 6.0
-      p + (q - p) * 6 * t
+      p + ((q - p) * 6 * t)
     elsif t < 1.0 / 2.0
       q
     elsif t < 2.0 / 3.0
-      p + (q - p) * (2.0 / 3.0 - t) * 6
+      p + ((q - p) * ((2.0 / 3.0) - t) * 6)
     else
       p
     end
   end
 
-  def rgb_to_hex(rgb)
+  private def rgb_to_hex(rgb)
     "##{rgb.map { |c| c.to_s(16).upcase.rjust(2, '0') }.join}"
   end
 end
 
-ColorGradientDemo.new.run if __FILE__ == $PROGRAM_NAME
+WidgetStyleColors.new.run if __FILE__ == $PROGRAM_NAME

data/examples/widget_table_demo/README.md

@@ -0,0 +1,48 @@
+<!--
+SPDX-FileCopyrightText: 2025 Kerrick Long <me@kerricklong.com>
+SPDX-License-Identifier: CC-BY-SA-4.0
+-->
+
+# Table Widget Example
+
+Demonstrates advanced options for the `Table` widget, including selection, row-level highlighting, and column-level highlighting.
+
+Data grids are complex. Users expect to navigate them with keys, select rows, and clearly see which cell is active. The `Table` widget provides these features out of the box efficiently.
+
+## Features Demonstrated
+
+- **Selection State**: Managing `selected_row` and `selected_column` to track user focus.
+- **Complex Highlighting**:
+    - **Row**: Highlight the entire active row.
+    - **Highlight Symbol:** Adding a visual indicator (like `> `) to the selected row.
+- **Spacing:** Adjusting `column_spacing` and `highlight_spacing` to control layout density.
+- **Flex Layout:** Switching between different column distribution modes (`legacy`, `start`, `space_between`, etc.).
+- **Offset Control:** Manually controlling the scroll position using `offset`.
+
+## Hotkeys
+
+- **Arrows (↑/↓)**: Navigate Rows (`selected_row`)
+- **Arrows (←/→)**: Navigate Columns (`selected_column`)
+- **x**: Toggle Row Selection (`selected_row` = nil)
+- **s**: Cycle Table Style (`style`)
+- **p**: Cycle Spacing (`highlight_spacing`)
+- **c**: Toggle Column Highlight (`column_highlight_style`)
+- **z**: Toggle Cell Highlight (`cell_highlight_style`)
+- **o**: Cycle Offset Mode (`offset`)
+- **f**: Cycle Flex Mode (`flex`)
+- **q**: Quit
+
+## Usage
+
+```bash
+ruby examples/widget_table_demo/app.rb
+```
+
+## Learning Outcomes
+
+Use this example if you need to...
+- Build a file explorer or process list.
+- Create a data-heavy dashboard.
+- Handle conflicting style requirements (e.g., "Highlight this row, but make this error cell red").
+
+![Demo](/doc/images/widget_table_demo.png)

data/examples/widget_table_demo/app.rb

@@ -0,0 +1,239 @@
+# frozen_string_literal: true
+
+# SPDX-FileCopyrightText: 2025 Kerrick Long <me@kerricklong.com>
+# SPDX-License-Identifier: AGPL-3.0-or-later
+
+$LOAD_PATH.unshift File.expand_path("../../lib", __dir__)
+require "bundler/setup"
+require "ratatui_ruby"
+
+# Sample process data
+PROCESSES = [
+  { pid: 1234, name: "ruby", cpu: 15.2 },
+  { pid: 5678, name: "postgres", cpu: 8.7 },
+  { pid: 9012, name: "nginx", cpu: 3.1 },
+  { pid: 3456, name: "redis", cpu: 12.4 },
+  { pid: 7890, name: "sidekiq", cpu: 22.8 },
+  { pid: 2345, name: "webpack", cpu: 45.3 },
+  { pid: 6789, name: "node", cpu: 18.9 },
+].freeze
+
+class WidgetTableDemo
+  attr_reader :selected_index, :selected_col, :current_style_index, :column_spacing, :highlight_spacing, :column_highlight_style, :cell_highlight_style
+
+  HIGHLIGHT_SPACINGS = [
+    { name: "When Selected", spacing: :when_selected },
+    { name: "Always", spacing: :always },
+    { name: "Never", spacing: :never },
+  ].freeze
+
+  OFFSET_MODES = [
+    { name: "Auto (No Offset)", offset: nil, allow_selection: true },
+    { name: "Offset Only (row 3)", offset: 3, allow_selection: false },
+    { name: "Selection + Offset (Conflict)", offset: 0, allow_selection: true },
+  ].freeze
+
+  FLEX_MODES = [
+    { name: "Legacy (Default)", flex: :legacy },
+    { name: "Start", flex: :start },
+    { name: "Center", flex: :center },
+    { name: "End", flex: :end },
+    { name: "Space Between", flex: :space_between },
+    { name: "Space Around", flex: :space_around },
+    { name: "Space Evenly", flex: :space_evenly },
+  ].freeze
+
+  def initialize
+    @selected_index = 1
+    @selected_col = 1
+    @current_style_index = 0
+    @column_spacing = 1
+    @highlight_spacing_index = 0
+    @show_column_highlight = true
+    @show_cell_highlight = true
+    @offset_mode_index = 0
+    @flex_mode_index = 0
+  end
+
+  def run
+    RatatuiRuby.run do |tui|
+      @tui = tui
+      setup_styles
+      loop do
+        @tui.draw do |frame|
+          render(frame)
+        end
+        break if handle_input == :quit
+      end
+    end
+  end
+
+  private def setup_styles
+    @styles = [
+      { name: "Cyan", style: @tui.style(fg: :cyan) },
+      { name: "Red", style: @tui.style(fg: :red) },
+      { name: "Green", style: @tui.style(fg: :green) },
+      { name: "Blue on White", style: @tui.style(fg: :blue, bg: :white) },
+      { name: "Magenta", style: @tui.style(fg: :magenta, modifiers: [:bold]) },
+    ]
+    @column_highlight_style = @tui.style(fg: :magenta)
+    @cell_highlight_style = @tui.style(fg: :white, bg: :red, modifiers: [:bold])
+    @hotkey_style = @tui.style(modifiers: [:bold, :underlined])
+  end
+
+  private def render(frame)
+    # Create table rows from process data
+    rows = PROCESSES.map { |p| [p[:pid].to_s, p[:name], "#{p[:cpu]}%"] }
+
+    # Define column widths
+    widths = [
+      @tui.constraint_length(8),
+      @tui.constraint_length(15),
+      @tui.constraint_length(10),
+    ]
+
+    # Create highlight style (yellow text)
+    highlight_style = @tui.style(fg: :yellow)
+
+    current_style_entry = @styles[@current_style_index]
+    current_spacing_entry = HIGHLIGHT_SPACINGS[@highlight_spacing_index]
+    offset_mode_entry = OFFSET_MODES[@offset_mode_index]
+    flex_mode_entry = FLEX_MODES[@flex_mode_index]
+
+    # Determine selection/offset based on mode
+    effective_selection = offset_mode_entry[:allow_selection] ? @selected_index : nil
+    effective_offset = offset_mode_entry[:offset]
+    selection_label = effective_selection.nil? ? "none" : effective_selection.to_s
+    offset_label = effective_offset.nil? ? "auto" : effective_offset.to_s
+
+    # Main table
+    table = @tui.table(
+      header: ["PID", "Name", "CPU"],
+      rows:,
+      widths:,
+      selected_row: effective_selection,
+      selected_column: @selected_col,
+      offset: effective_offset,
+      highlight_style:,
+      highlight_symbol: "> ",
+      highlight_spacing: current_spacing_entry[:spacing],
+      column_highlight_style: @show_column_highlight ? @column_highlight_style : nil,
+      cell_highlight_style: @show_cell_highlight ? @cell_highlight_style : nil,
+      style: current_style_entry[:style],
+      column_spacing: @column_spacing,
+      flex: flex_mode_entry[:flex],
+      block: @tui.block(
+        title: "Processes | Sel: #{selection_label} | Offset: #{offset_label} | Flex: #{flex_mode_entry[:name]}",
+        borders: :all
+      ),
+      footer: ["Total: #{PROCESSES.length}", "Total CPU: #{PROCESSES.sum { |p| p[:cpu] }}%", ""]
+    )
+
+    # Bottom control panel
+    control_panel = @tui.block(
+      title: "Controls",
+      borders: [:all],
+      children: [
+        @tui.paragraph(
+          text: [
+            # Line 1: Navigation
+            @tui.text_line(spans: [
+              @tui.text_span(content: "↑/↓", style: @hotkey_style),
+              @tui.text_span(content: ": Nav Row  "),
+              @tui.text_span(content: "←/→", style: @hotkey_style),
+              @tui.text_span(content: ": Nav Col  "),
+              @tui.text_span(content: "x", style: @hotkey_style),
+              @tui.text_span(content: ": Toggle Row (#{selection_label})  "),
+              @tui.text_span(content: "q", style: @hotkey_style),
+              @tui.text_span(content: ": Quit"),
+            ]),
+            # Line 2: Table Controls
+            @tui.text_line(spans: [
+              @tui.text_span(content: "s", style: @hotkey_style),
+              @tui.text_span(content: ": Style (#{current_style_entry[:name]})  "),
+              @tui.text_span(content: "p", style: @hotkey_style),
+              @tui.text_span(content: ": Spacing (#{current_spacing_entry[:name]})  "),
+            ]),
+            # Line 3: More Controls
+            @tui.text_line(spans: [
+              @tui.text_span(content: "+/-", style: @hotkey_style),
+              @tui.text_span(content: ": Col Space (#{@column_spacing})  "),
+              @tui.text_span(content: "c", style: @hotkey_style),
+              @tui.text_span(content: ": Col Highlight (#{@show_column_highlight ? 'On' : 'Off'})  "),
+              @tui.text_span(content: "f", style: @hotkey_style),
+              @tui.text_span(content: ": Flex Mode (#{flex_mode_entry[:name]})"),
+            ]),
+            # Line 4: Offset Mode
+            @tui.text_line(spans: [
+              @tui.text_span(content: "z", style: @hotkey_style),
+              @tui.text_span(content: ": Cell Highlight (#{@show_cell_highlight ? 'On' : 'Off'})  "),
+              @tui.text_span(content: "o", style: @hotkey_style),
+              @tui.text_span(content: ": Offset Mode (#{offset_mode_entry[:name]})"),
+            ]),
+          ]
+        ),
+      ]
+    )
+
+    # Layout
+    layout = @tui.layout_split(
+      frame.area,
+      direction: :vertical,
+      constraints: [
+        @tui.constraint_fill(1),
+        @tui.constraint_length(6),
+      ]
+    )
+
+    frame.render_widget(table, layout[0])
+    frame.render_widget(control_panel, layout[1])
+  end
+
+  private def handle_input
+    event = @tui.poll_event
+
+    case event
+    in { type: :key, code: "q" } | { type: :key, code: "c", modifiers: ["ctrl"] }
+      :quit
+    in type: :key, code: "down" | "j"
+      @selected_index = ((@selected_index || -1) + 1) % PROCESSES.length
+    in type: :key, code: "up" | "k"
+      @selected_index = (@selected_index || 0) - 1
+      @selected_index = PROCESSES.length - 1 if @selected_index.negative?
+    in type: :key, code: "right" | "l"
+      @selected_col = ((@selected_col || -1) + 1) % 3 # 3 columns
+    in type: :key, code: "left" | "h"
+      # 'h' is already used for highlight spacing, but let's override it or ignore vim keys for left/right?
+      # Actually 'h' is used for spacing in this demo. Let's just use arrows for cols.
+      # Or map 'h' to left if user meant vim keys.
+      # The demo uses 'h' for "Spacing". Let's change Spacing key to 'p' (property/padding?) or something else.
+      # Or just stick to arrows for columns to avoid conflict.
+      @selected_col = (@selected_col || 0) - 1
+      @selected_col = 2 if @selected_col.negative?
+    in type: :key, code: "s"
+      @current_style_index = (@current_style_index + 1) % @styles.length
+    in type: :key, code: "+"
+      @column_spacing += 1
+    in type: :key, code: "-"
+      @column_spacing = [@column_spacing - 1, 0].max
+    in type: :key, code: "p"
+      @highlight_spacing_index = (@highlight_spacing_index + 1) % HIGHLIGHT_SPACINGS.length
+    in type: :key, code: "x"
+      @selected_index = @selected_index.nil? ? 0 : nil
+    in type: :key, code: "c"
+      @show_column_highlight = !@show_column_highlight
+    in type: :key, code: "z"
+      @show_cell_highlight = !@show_cell_highlight
+    in type: :key, code: "o"
+      @offset_mode_index = (@offset_mode_index + 1) % OFFSET_MODES.length
+    in type: :key, code: "f"
+      @flex_mode_index = (@flex_mode_index + 1) % FLEX_MODES.length
+    else
+      nil
+    end
+  end
+end
+
+if __FILE__ == $0
+  WidgetTableDemo.new.run
+end