fix(table): append headers/columns to zero sized string slice

There are many "interesting" cases:

- logical content is wider than display width (long lines).
  In this case, we truncate.
- logical content is smaller than display height (fewer lines
  than visible).
  In this case, we pad with empty lines up to the specified height.
- logical content is higher than display height (more lines than
  visible).
  In this case, we truncate.

- style specifies a width wider than the display width.
  In this case, we ignore the style width and
  fit in the display width.
- style specifies a height higher than the display height.
  Same as width, we ignore the style and fit in the display height.
- style specifies a narrower width or smaller height than the display.
  In this case we obey the style.

README.md

@@ -41,10 +41,26 @@ the common, and many customization options.
 * [Example code, one field](https://github.com/charmbracelet/tea/tree/master/examples/textinput/main.go)
 * [Example code, many fields](https://github.com/charmbracelet/tea/tree/master/examples/textinputs/main.go)
 
+## Text Area
+
+<img src="https://stuff.charm.sh/bubbles-examples/textarea.gif" width="400" alt="Text Area Example">
+
+A text area field, akin to an `<textarea />` in HTML. Allows for input that
+spans multiple lines. Supports unicode, pasting, vertical scrolling when the
+value exceeds the width and height of the element,  and many customization
+options.
+
+* [Example code, chat input](https://github.com/charmbracelet/tea/tree/master/examples/chat/main.go)
+* [Example code, story time input](https://github.com/charmbracelet/tea/tree/master/examples/textarea/main.go)
+
 
 ## Progress
 
-<img src="https://stuff.charm.sh/bubbles-examples/progress.gif" width="800" alt="Progressbar Example">
+<picture>
+  <source media="(max-width: 800px)" srcset="https://stuff.charm.sh/bubbles-examples/progress.gif">
+  <source media="(min-width: 800px)" width="800" srcset="https://stuff.charm.sh/bubbles-examples/progress.gif">
+  <img src="https://stuff.charm.sh/bubbles-examples/progress.gif" alt="Progressbar Example">
+</picture>
 
 A simple, customizable progress meter, with optional animation via
 [Harmonica][harmonica]. Supports solid and gradient fills. The empty and filled
@@ -71,7 +87,11 @@ logic and visualize pagination however you like.
 
 ## Viewport
 
-<img src="https://stuff.charm.sh/bubbles-examples/viewport.gif?0" width="600" alt="Viewport Example">
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/bubbles-examples/viewport.gif?0">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/bubbles-examples/viewport.gif?0">
+  <img src="https://stuff.charm.sh/bubbles-examples/viewport.gif?0" alt="Viewport Example">
+</picture>
 
 A viewport for vertically scrolling content. Optionally includes standard
 pager keybindings and mouse wheel support. A high performance mode is available
@@ -87,7 +107,11 @@ indenting and text wrapping.
 
 ## List
 
-<img src="https://stuff.charm.sh/bubbles-examples/list.gif" width="600" alt="List Example">
+<picture>
+  <source media="(max-width: 600px)" srcset="https://stuff.charm.sh/bubbles-examples/list.gif">
+  <source media="(min-width: 600px)" width="600" srcset="https://stuff.charm.sh/bubbles-examples/list.gif">
+  <img src="https://stuff.charm.sh/bubbles-examples/list.gif" alt="List Example">
+</picture>
 
 A customizable, batteries-included component for browsing a set of items.
 Features pagination, fuzzy filtering, auto-generated help, an activity spinner,
@@ -121,7 +145,11 @@ can be customized as you see fit.
 
 ## Help
 
-<img src="https://stuff.charm.sh/bubbles-examples/help.gif" width="500" alt="Help Example">
+<picture>
+  <source media="(max-width: 500px)" srcset="https://stuff.charm.sh/bubbles-examples/help.gif">
+  <source media="(min-width: 500px)" width="500" srcset="https://stuff.charm.sh/bubbles-examples/help.gif">
+  <img src="https://stuff.charm.sh/bubbles-examples/help.gif" alt="Help Example">
+</picture>
 
 A customizable horizontal mini help view that automatically generates itself
 from your keybindings. It features single and multi-line modes, which the user

cursor/cursor.go

@@ -0,0 +1,207 @@
+package cursor
+
+import (
+	"context"
+	"time"
+
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+)
+
+const defaultBlinkSpeed = time.Millisecond * 530
+
+// initialBlinkMsg initializes cursor blinking.
+type initialBlinkMsg struct{}
+
+// BlinkMsg signals that the cursor should blink. It contains metadata that
+// allows us to tell if the blink message is the one we're expecting.
+type BlinkMsg struct {
+	id  int
+	tag int
+}
+
+// blinkCanceled is sent when a blink operation is canceled.
+type blinkCanceled struct{}
+
+// blinkCtx manages cursor blinking.
+type blinkCtx struct {
+	ctx    context.Context
+	cancel context.CancelFunc
+}
+
+// Mode describes the behavior of the cursor.
+type Mode int
+
+// Available cursor modes.
+const (
+	CursorBlink Mode = iota
+	CursorStatic
+	CursorHide
+)
+
+// String returns the cursor mode in a human-readable format. This method is
+// provisional and for informational purposes only.
+func (c Mode) String() string {
+	return [...]string{
+		"blink",
+		"static",
+		"hidden",
+	}[c]
+}
+
+// Model is the Bubble Tea model for this cursor element.
+type Model struct {
+	BlinkSpeed time.Duration
+	// Style for styling the cursor block.
+	Style lipgloss.Style
+	// TextStyle is the style used for the cursor when it is hidden (when blinking).
+	// I.e. displaying normal text.
+	TextStyle lipgloss.Style
+
+	// char is the character under the cursor
+	char string
+	// The ID of this Model as it relates to other cursors
+	id int
+	// focus indicates whether the containing input is focused
+	focus bool
+	// Cursor Blink state.
+	Blink bool
+	// Used to manage cursor blink
+	blinkCtx *blinkCtx
+	// The ID of the blink message we're expecting to receive.
+	blinkTag int
+	// cursorMode determines the behavior of the cursor
+	cursorMode Mode
+}
+
+// New creates a new model with default settings.
+func New() Model {
+	return Model{
+		BlinkSpeed: defaultBlinkSpeed,
+
+		Blink:      true,
+		cursorMode: CursorBlink,
+
+		blinkCtx: &blinkCtx{
+			ctx: context.Background(),
+		},
+	}
+}
+
+// Update updates the cursor.
+func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
+	switch msg := msg.(type) {
+	case initialBlinkMsg:
+		// We accept all initialBlinkMsgs generated by the Blink command.
+
+		if m.cursorMode != CursorBlink || !m.focus {
+			return m, nil
+		}
+
+		cmd := m.BlinkCmd()
+		return m, cmd
+
+	case BlinkMsg:
+		// We're choosy about whether to accept blinkMsgs so that our cursor
+		// only exactly when it should.
+
+		// Is this model blink-able?
+		if m.cursorMode != CursorBlink || !m.focus {
+			return m, nil
+		}
+
+		// Were we expecting this blink message?
+		if msg.id != m.id || msg.tag != m.blinkTag {
+			return m, nil
+		}
+
+		var cmd tea.Cmd
+		if m.cursorMode == CursorBlink {
+			m.Blink = !m.Blink
+			cmd = m.BlinkCmd()
+		}
+		return m, cmd
+
+	case blinkCanceled: // no-op
+		return m, nil
+	}
+	return m, nil
+}
+
+// CursorMode returns the model's cursor mode. For available cursor modes, see
+// type CursorMode.
+func (m Model) CursorMode() Mode {
+	return m.cursorMode
+}
+
+// SetCursorMode sets the model's cursor mode. This method returns a command.
+//
+// For available cursor modes, see type CursorMode.
+func (m *Model) SetCursorMode(mode Mode) tea.Cmd {
+	m.cursorMode = mode
+	m.Blink = m.cursorMode == CursorHide || !m.focus
+	if mode == CursorBlink {
+		return Blink
+	}
+	return nil
+}
+
+// BlinkCmd is an command used to manage cursor blinking.
+func (m *Model) BlinkCmd() tea.Cmd {
+	if m.cursorMode != CursorBlink {
+		return nil
+	}
+
+	if m.blinkCtx != nil && m.blinkCtx.cancel != nil {
+		m.blinkCtx.cancel()
+	}
+
+	ctx, cancel := context.WithTimeout(m.blinkCtx.ctx, m.BlinkSpeed)
+	m.blinkCtx.cancel = cancel
+
+	m.blinkTag++
+
+	return func() tea.Msg {
+		defer cancel()
+		<-ctx.Done()
+		if ctx.Err() == context.DeadlineExceeded {
+			return BlinkMsg{id: m.id, tag: m.blinkTag}
+		}
+		return blinkCanceled{}
+	}
+}
+
+// Blink is a command used to initialize cursor blinking.
+func Blink() tea.Msg {
+	return initialBlinkMsg{}
+}
+
+// Focus focuses the cursor to allow it to blink if desired.
+func (m *Model) Focus() tea.Cmd {
+	m.focus = true
+	m.Blink = m.cursorMode == CursorHide // show the cursor unless we've explicitly hidden it
+
+	if m.cursorMode == CursorBlink && m.focus {
+		return m.BlinkCmd()
+	}
+	return nil
+}
+
+// Blur blurs the cursor.
+func (m *Model) Blur() {
+	m.focus = false
+	m.Blink = true
+}
+
+// SetChar sets the character under the cursor.
+func (m *Model) SetChar(char string) {
+	m.char = char
+}
+
+// View displays the cursor.
+func (m Model) View() string {
+	if m.Blink {
+		return m.TextStyle.Render(m.char)
+	}
+	return m.Style.Inline(true).Reverse(true).Render(m.char)
+}

key/key.go

@@ -106,7 +106,7 @@ func (b Binding) Help() Help {
 // keybindings won't be activated and won't show up in help. Keybindings are
 // enabled by default.
 func (b Binding) Enabled() bool {
-	return !b.disabled
+	return !b.disabled && b.keys != nil
 }
 
 // SetEnabled enables or disables the keybinding.
@@ -130,9 +130,10 @@ type Help struct {
 
 // Matches checks if the given KeyMsg matches the given bindings.
 func Matches(k tea.KeyMsg, b ...Binding) bool {
+	keys := k.String()
 	for _, binding := range b {
 		for _, v := range binding.keys {
-			if k.String() == v && binding.Enabled() {
+			if keys == v && binding.Enabled() {
 				return true
 			}
 		}

key/key_test.go

@@ -0,0 +1,26 @@
+package key
+
+import (
+	"testing"
+)
+
+func TestBinding_Enabled(t *testing.T) {
+	binding := NewBinding(
+		WithKeys("k", "up"),
+		WithHelp("↑/k", "move up"),
+	)
+	if !binding.Enabled() {
+		t.Errorf("expected key to be Enabled")
+	}
+
+	binding.SetEnabled(false)
+	if binding.Enabled() {
+		t.Errorf("expected key not to be Enabled")
+	}
+
+	binding.SetEnabled(true)
+	binding.Unbind()
+	if binding.Enabled() {
+		t.Errorf("expected key not to be Enabled")
+	}
+}

list/list.go

@@ -534,6 +534,15 @@ func (m Model) SettingFilter() bool {
 	return m.filterState == Filtering
 }
 
+// IsFiltered returns whether or not the list is currently filtered.
+// It's purely a convenience method for the following:
+//
+//	 m.FilterState() == FilterApplied
+//
+func (m Model) IsFiltered() bool {
+	return m.filterState == FilterApplied
+}
+
 // Width returns the current width setting.
 func (m Model) Width() int {
 	return m.width

spinner/spinner.go

@@ -109,11 +109,17 @@ func (m Model) ID() int {
 }
 
 // New returns a model with default values.
-func New() Model {
+func New(opts ...Option) Model {
-	return Model{
+	m := Model{
 		Spinner: Line,
 		id:      nextID(),
 	}
+
+	for _, opt := range opts {
+		opt(&m)
+	}
+
+	return m
 }
 
 // NewModel returns a model with default values.
@@ -199,3 +205,23 @@ func (m Model) tick(id, tag int) tea.Cmd {
 func Tick() tea.Msg {
 	return TickMsg{Time: time.Now()}
 }
+
+// Option is used to set options in New. For example:
+//
+//    spinner := New(WithSpinner(Dot))
+//
+type Option func(*Model)
+
+// WithSpinner is an option to set the spinner.
+func WithSpinner(spinner Spinner) Option {
+	return func(m *Model) {
+		m.Spinner = spinner
+	}
+}
+
+// WithStyle is an option to set the spinner style.
+func WithStyle(style lipgloss.Style) Option {
+	return func(m *Model) {
+		m.Style = style
+	}
+}

spinner/spinner_test.go

@@ -0,0 +1,61 @@
+package spinner_test
+
+import (
+	"testing"
+
+	"github.com/charmbracelet/bubbles/spinner"
+)
+
+func TestSpinnerNew(t *testing.T) {
+	assertEqualSpinner := func(t *testing.T, exp, got spinner.Spinner) {
+		t.Helper()
+
+		if exp.FPS != got.FPS {
+			t.Errorf("expecting %d FPS, got %d", exp.FPS, got.FPS)
+		}
+
+		if e, g := len(exp.Frames), len(got.Frames); e != g {
+			t.Fatalf("expecting %d frames, got %d", e, g)
+		}
+
+		for i, e := range exp.Frames {
+			if g := got.Frames[i]; e != g {
+				t.Errorf("expecting frame index %d with value %q, got %q", i, e, g)
+			}
+		}
+	}
+	t.Run("default", func(t *testing.T) {
+		s := spinner.New()
+
+		assertEqualSpinner(t, spinner.Line, s.Spinner)
+	})
+
+	t.Run("WithSpinner", func(t *testing.T) {
+		customSpinner := spinner.Spinner{
+			Frames: []string{"a", "b", "c", "d"},
+			FPS:    16,
+		}
+
+		s := spinner.New(spinner.WithSpinner(customSpinner))
+
+		assertEqualSpinner(t, customSpinner, s.Spinner)
+	})
+
+	tests := map[string]spinner.Spinner{
+		"Line":    spinner.Line,
+		"Dot":     spinner.Dot,
+		"MiniDot": spinner.MiniDot,
+		"Jump":    spinner.Jump,
+		"Pulse":   spinner.Pulse,
+		"Points":  spinner.Points,
+		"Globe":   spinner.Globe,
+		"Moon":    spinner.Moon,
+		"Monkey":  spinner.Monkey,
+	}
+
+	for name, s := range tests {
+		t.Run(name, func(t *testing.T) {
+			assertEqualSpinner(t, spinner.New(spinner.WithSpinner(s)).Spinner, s)
+		})
+	}
+}

table/table.go

@@ -0,0 +1,393 @@
+package table
+
+import (
+	"strings"
+
+	"github.com/charmbracelet/bubbles/key"
+	"github.com/charmbracelet/bubbles/viewport"
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+	"github.com/mattn/go-runewidth"
+)
+
+// Model defines a state for the table widget.
+type Model struct {
+	KeyMap KeyMap
+
+	cols   []Column
+	rows   []Row
+	cursor int
+	focus  bool
+	styles Styles
+
+	viewport viewport.Model
+}
+
+// Row represents one line in the table.
+type Row []string
+
+// Column defines the table structure.
+type Column struct {
+	Title string
+	Width int
+}
+
+// KeyMap defines keybindings. It satisfies to the help.KeyMap interface, which
+// is used to render the menu menu.
+type KeyMap struct {
+	LineUp       key.Binding
+	LineDown     key.Binding
+	PageUp       key.Binding
+	PageDown     key.Binding
+	HalfPageUp   key.Binding
+	HalfPageDown key.Binding
+	GotoTop      key.Binding
+	GotoBottom   key.Binding
+}
+
+// DefaultKeyMap returns a default set of keybindings.
+func DefaultKeyMap() KeyMap {
+	const spacebar = " "
+	return KeyMap{
+		LineUp: key.NewBinding(
+			key.WithKeys("up", "k"),
+			key.WithHelp("↑/k", "up"),
+		),
+		LineDown: key.NewBinding(
+			key.WithKeys("down", "j"),
+			key.WithHelp("↓/j", "down"),
+		),
+		PageUp: key.NewBinding(
+			key.WithKeys("b", "pgup"),
+			key.WithHelp("b/pgup", "page up"),
+		),
+		PageDown: key.NewBinding(
+			key.WithKeys("f", "pgdown", spacebar),
+			key.WithHelp("f/pgdn", "page down"),
+		),
+		HalfPageUp: key.NewBinding(
+			key.WithKeys("u", "ctrl+u"),
+			key.WithHelp("u", "½ page up"),
+		),
+		HalfPageDown: key.NewBinding(
+			key.WithKeys("d", "ctrl+d"),
+			key.WithHelp("d", "½ page down"),
+		),
+		GotoTop: key.NewBinding(
+			key.WithKeys("home", "g"),
+			key.WithHelp("g/home", "go to start"),
+		),
+		GotoBottom: key.NewBinding(
+			key.WithKeys("end", "G"),
+			key.WithHelp("G/end", "go to end"),
+		),
+	}
+}
+
+// Styles contains style definitions for this list component. By default, these
+// values are generated by DefaultStyles.
+type Styles struct {
+	Header   lipgloss.Style
+	Cell     lipgloss.Style
+	Selected lipgloss.Style
+}
+
+// DefaultStyles returns a set of default style definitions for this table.
+func DefaultStyles() Styles {
+	return Styles{
+		Selected: lipgloss.NewStyle().Bold(true).Foreground(lipgloss.Color("212")),
+		Header:   lipgloss.NewStyle().Bold(true).Padding(0, 1),
+		Cell:     lipgloss.NewStyle().Padding(0, 1),
+	}
+}
+
+// SetStyles sets the table styles.
+func (m *Model) SetStyles(s Styles) {
+	m.styles = s
+	m.UpdateViewport()
+}
+
+// Option is used to set options in New. For example:
+//
+//    table := New(WithColumns([]Column{{Title: "ID", Width: 10}}))
+//
+type Option func(*Model)
+
+// New creates a new model for the table widget.
+func New(opts ...Option) Model {
+	m := Model{
+		cursor:   0,
+		viewport: viewport.New(0, 20),
+
+		KeyMap: DefaultKeyMap(),
+		styles: DefaultStyles(),
+	}
+
+	for _, opt := range opts {
+		opt(&m)
+	}
+
+	m.UpdateViewport()
+
+	return m
+}
+
+// WithColumns sets the table columns (headers).
+func WithColumns(cols []Column) Option {
+	return func(m *Model) {
+		m.cols = cols
+	}
+}
+
+// WithRows sets the table rows (data).
+func WithRows(rows []Row) Option {
+	return func(m *Model) {
+		m.rows = rows
+	}
+}
+
+// WithHeight sets the height of the table.
+func WithHeight(h int) Option {
+	return func(m *Model) {
+		m.viewport.Height = h
+	}
+}
+
+// WithWidth sets the width of the table.
+func WithWidth(w int) Option {
+	return func(m *Model) {
+		m.viewport.Width = w
+	}
+}
+
+// WithFocused sets the focus state of the table.
+func WithFocused(f bool) Option {
+	return func(m *Model) {
+		m.focus = f
+	}
+}
+
+// WithStyles sets the table styles.
+func WithStyles(s Styles) Option {
+	return func(m *Model) {
+		m.styles = s
+	}
+}
+
+// WithKeyMap sets the key map.
+func WithKeyMap(km KeyMap) Option {
+	return func(m *Model) {
+		m.KeyMap = km
+	}
+}
+
+// Update is the Bubble Tea update loop.
+func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
+	if !m.focus {
+		return m, nil
+	}
+
+	var cmds []tea.Cmd
+
+	switch msg := msg.(type) {
+	case tea.KeyMsg:
+		switch {
+		case key.Matches(msg, m.KeyMap.LineUp):
+			m.MoveUp(1)
+		case key.Matches(msg, m.KeyMap.LineDown):
+			m.MoveDown(1)
+		case key.Matches(msg, m.KeyMap.PageUp):
+			m.MoveUp(m.viewport.Height)
+		case key.Matches(msg, m.KeyMap.PageDown):
+			m.MoveDown(m.viewport.Height)
+		case key.Matches(msg, m.KeyMap.HalfPageUp):
+			m.MoveUp(m.viewport.Height / 2)
+		case key.Matches(msg, m.KeyMap.HalfPageDown):
+			m.MoveDown(m.viewport.Height / 2)
+		case key.Matches(msg, m.KeyMap.LineDown):
+			m.MoveDown(1)
+		case key.Matches(msg, m.KeyMap.GotoTop):
+			m.GotoTop()
+		case key.Matches(msg, m.KeyMap.GotoBottom):
+			m.GotoBottom()
+		}
+	}
+
+	return m, tea.Batch(cmds...)
+}
+
+// Focused returns the focus state of the table.
+func (m Model) Focused() bool {
+	return m.focus
+}
+
+// Focus focusses the table, allowing the user to move around the rows and
+// interact.
+func (m *Model) Focus() {
+	m.focus = true
+	m.UpdateViewport()
+}
+
+// Blur blurs the table, preventing selection or movement.
+func (m *Model) Blur() {
+	m.focus = false
+	m.UpdateViewport()
+}
+
+// View renders the component.
+func (m Model) View() string {
+	return m.headersView() + "\n" + m.viewport.View()
+}
+
+// UpdateViewport updates the list content based on the previously defined
+// columns and rows.
+func (m *Model) UpdateViewport() {
+	renderedRows := make([]string, 0, len(m.rows))
+	for i := range m.rows {
+		renderedRows = append(renderedRows, m.renderRow(i))
+	}
+
+	m.viewport.SetContent(
+		lipgloss.JoinVertical(lipgloss.Left, renderedRows...),
+	)
+}
+
+// SelectedRow returns the selected row.
+// You can cast it to your own implementation.
+func (m Model) SelectedRow() Row {
+	return m.rows[m.cursor]
+}
+
+// SetRows set a new rows state.
+func (m *Model) SetRows(r []Row) {
+	m.rows = r
+	m.UpdateViewport()
+}
+
+// SetWidth sets the width of the viewport of the table.
+func (m *Model) SetWidth(w int) {
+	m.viewport.Width = w
+	m.UpdateViewport()
+}
+
+// SetHeight sets the height of the viewport of the table.
+func (m *Model) SetHeight(h int) {
+	m.viewport.Height = h
+	m.UpdateViewport()
+}
+
+// Height returns the viewport height of the table.
+func (m Model) Height() int {
+	return m.viewport.Height
+}
+
+// Width returns the viewport width of the table.
+func (m Model) Width() int {
+	return m.viewport.Width
+}
+
+// Cursor returns the index of the selected row.
+func (m Model) Cursor() int {
+	return m.cursor
+}
+
+// SetCursor sets the cursor position in the table.
+func (m *Model) SetCursor(n int) {
+	m.cursor = clamp(n, 0, len(m.rows)-1)
+	m.UpdateViewport()
+}
+
+// MoveUp moves the selection up by any number of row.
+// It can not go above the first row.
+func (m *Model) MoveUp(n int) {
+	m.cursor = clamp(m.cursor-n, 0, len(m.rows)-1)
+	m.UpdateViewport()
+
+	if m.cursor < m.viewport.YOffset {
+		m.viewport.SetYOffset(m.cursor)
+	}
+}
+
+// MoveDown moves the selection down by any number of row.
+// It can not go below the last row.
+func (m *Model) MoveDown(n int) {
+	m.cursor = clamp(m.cursor+n, 0, len(m.rows)-1)
+	m.UpdateViewport()
+
+	if m.cursor > (m.viewport.YOffset + (m.viewport.Height - 1)) {
+		m.viewport.SetYOffset(m.cursor - (m.viewport.Height - 1))
+	}
+}
+
+// GotoTop moves the selection to the first row.
+func (m *Model) GotoTop() {
+	m.MoveUp(m.cursor)
+}
+
+// GotoBottom moves the selection to the last row.
+func (m *Model) GotoBottom() {
+	m.MoveDown(len(m.rows))
+}
+
+// FromValues create the table rows from a simple string. It uses `\n` by
+// default for getting all the rows and the given separator for the fields on
+// each row.
+func (m *Model) FromValues(value, separator string) {
+	rows := []Row{}
+	for _, line := range strings.Split(value, "\n") {
+		r := Row{}
+		for _, field := range strings.Split(line, separator) {
+			r = append(r, field)
+		}
+		rows = append(rows, r)
+	}
+
+	m.SetRows(rows)
+}
+
+func (m Model) headersView() string {
+	var s = make([]string, 0, len(m.cols))
+	for _, col := range m.cols {
+		style := lipgloss.NewStyle().Width(col.Width).MaxWidth(col.Width).Inline(true)
+		renderedCell := style.Render(runewidth.Truncate(col.Title, col.Width, "…"))
+		s = append(s, m.styles.Header.Render(renderedCell))
+	}
+	return lipgloss.JoinHorizontal(lipgloss.Left, s...)
+}
+
+func (m *Model) renderRow(rowID int) string {
+	var s = make([]string, 0, len(m.cols))
+	for i, value := range m.rows[rowID] {
+		style := lipgloss.NewStyle().Width(m.cols[i].Width).MaxWidth(m.cols[i].Width).Inline(true)
+		renderedCell := m.styles.Cell.Render(style.Render(runewidth.Truncate(value, m.cols[i].Width, "…")))
+		s = append(s, renderedCell)
+	}
+
+	row := lipgloss.JoinHorizontal(lipgloss.Left, s...)
+
+	if rowID == m.cursor {
+		return m.styles.Selected.Render(row)
+	}
+
+	return row
+}
+
+func max(a, b int) int {
+	if a > b {
+		return a
+	}
+
+	return b
+}
+
+func min(a, b int) int {
+	if a < b {
+		return a
+	}
+
+	return b
+}
+
+func clamp(v, low, high int) int {
+	return min(max(v, low), high)
+}

table/table_test.go

@@ -0,0 +1,54 @@
+package table
+
+import "testing"
+
+func TestFromValues(t *testing.T) {
+	input := "foo1,bar1\nfoo2,bar2\nfoo3,bar3"
+	table := New(WithColumns([]Column{{Title: "Foo"}, {Title: "Bar"}}))
+	table.FromValues(input, ",")
+
+	if len(table.rows) != 3 {
+		t.Fatalf("expect table to have 3 rows but it has %d", len(table.rows))
+	}
+
+	expect := []Row{
+		{"foo1", "bar1"},
+		{"foo2", "bar2"},
+		{"foo3", "bar3"},
+	}
+	if !deepEqual(table.rows, expect) {
+		t.Fatal("table rows is not equals to the input")
+	}
+}
+
+func TestFromValuesWithTabSeparator(t *testing.T) {
+	input := "foo1.\tbar1\nfoo,bar,baz\tbar,2"
+	table := New(WithColumns([]Column{{Title: "Foo"}, {Title: "Bar"}}))
+	table.FromValues(input, "\t")
+
+	if len(table.rows) != 2 {
+		t.Fatalf("expect table to have 2 rows but it has %d", len(table.rows))
+	}
+
+	expect := []Row{
+		{"foo1.", "bar1"},
+		{"foo,bar,baz", "bar,2"},
+	}
+	if !deepEqual(table.rows, expect) {
+		t.Fatal("table rows is not equals to the input")
+	}
+}
+
+func deepEqual(a, b []Row) bool {
+	if len(a) != len(b) {
+		return false
+	}
+	for i, r := range a {
+		for j, f := range r {
+			if f != b[i][j] {
+				return false
+			}
+		}
+	}
+	return true
+}

textarea/textarea_test.go

@@ -0,0 +1,446 @@
+package textarea
+
+import (
+	"strings"
+	"testing"
+
+	tea "github.com/charmbracelet/bubbletea"
+)
+
+func TestNew(t *testing.T) {
+	textarea := newTextArea()
+	view := textarea.View()
+
+	if !strings.Contains(view, ">") {
+		t.Log(view)
+		t.Error("Text area did not render the prompt")
+	}
+
+	if !strings.Contains(view, "World!") {
+		t.Log(view)
+		t.Error("Text area did not render the placeholder")
+	}
+}
+
+func TestInput(t *testing.T) {
+	textarea := newTextArea()
+
+	input := "foo"
+
+	for _, k := range []rune(input) {
+		textarea, _ = textarea.Update(keyPress(k))
+	}
+
+	view := textarea.View()
+
+	if !strings.Contains(view, input) {
+		t.Log(view)
+		t.Error("Text area did not render the input")
+	}
+
+	if textarea.col != len(input) {
+		t.Log(view)
+		t.Error("Text area did not move the cursor to the correct position")
+	}
+}
+
+func TestSoftWrap(t *testing.T) {
+	textarea := newTextArea()
+	textarea.Prompt = ""
+	textarea.ShowLineNumbers = false
+	textarea.SetWidth(5)
+	textarea.SetHeight(5)
+	textarea.CharLimit = 60
+
+	textarea, _ = textarea.Update(nil)
+
+	input := "foo bar baz"
+
+	for _, k := range []rune(input) {
+		textarea, _ = textarea.Update(keyPress(k))
+	}
+
+	view := textarea.View()
+
+	for _, word := range strings.Split(input, " ") {
+		if !strings.Contains(view, word) {
+			t.Log(view)
+			t.Error("Text area did not render the input")
+		}
+	}
+
+	// Due to the word wrapping, each word will be on a new line and the
+	// text area will look like this:
+	//
+	// > foo
+	// > bar
+	// > baz█
+	//
+	// However, due to soft-wrapping the column will still be at the end of the line.
+	if textarea.row != 0 || textarea.col != len(input) {
+		t.Log(view)
+		t.Error("Text area did not move the cursor to the correct position")
+	}
+}
+
+func TestCharLimit(t *testing.T) {
+	textarea := newTextArea()
+
+	// First input (foo bar) should be accepted as it will fall within the
+	// CharLimit. Second input (baz) should not appear in the input.
+	input := []string{"foo bar", "baz"}
+	textarea.CharLimit = len(input[0])
+
+	for _, k := range []rune(strings.Join(input, " ")) {
+		textarea, _ = textarea.Update(keyPress(k))
+	}
+
+	view := textarea.View()
+	if strings.Contains(view, input[1]) {
+		t.Log(view)
+		t.Error("Text area should not include input past the character limit")
+	}
+}
+
+func TestVerticalScrolling(t *testing.T) {
+	textarea := newTextArea()
+	textarea.Prompt = ""
+	textarea.ShowLineNumbers = false
+	textarea.SetHeight(1)
+	textarea.SetWidth(20)
+	textarea.CharLimit = 100
+
+	textarea, _ = textarea.Update(nil)
+
+	input := "This is a really long line that should wrap around the text area."
+
+	for _, k := range []rune(input) {
+		textarea, _ = textarea.Update(keyPress(k))
+	}
+
+	view := textarea.View()
+
+	// The view should contain the first "line" of the input.
+	if !strings.Contains(view, "This is a really") {
+		t.Log(view)
+		t.Error("Text area did not render the input")
+	}
+
+	// But we should be able to scroll to see the next line.
+	// Let's scroll down for each line to view the full input.
+	lines := []string{
+		"long line that",
+		"should wrap around",
+		"the text area.",
+	}
+	for _, line := range lines {
+		textarea.viewport.LineDown(1)
+		view = textarea.View()
+		if !strings.Contains(view, line) {
+			t.Log(view)
+			t.Error("Text area did not render the correct scrolled input")
+		}
+	}
+}
+
+func TestWordWrapOverflowing(t *testing.T) {
+	// An interesting edge case is when the user enters many words that fill up
+	// the text area and then goes back up and inserts a few words which causes
+	// a cascading wrap and causes an overflow of the last line.
+	//
+	// In this case, we should not let the user insert more words if, after the
+	// entire wrap is complete, the last line is overflowing.
+	textarea := newTextArea()
+
+	textarea.SetHeight(3)
+	textarea.SetWidth(20)
+	textarea.CharLimit = 500
+
+	textarea, _ = textarea.Update(nil)
+
+	input := "Testing Testing Testing Testing Testing Testing Testing Testing"
+
+	for _, k := range []rune(input) {
+		textarea, _ = textarea.Update(keyPress(k))
+		textarea.View()
+	}
+
+	// We have essentially filled the text area with input.
+	// Let's see if we can cause wrapping to overflow the last line.
+	textarea.row = 0
+	textarea.col = 0
+
+	input = "Testing"
+
+	for _, k := range []rune(input) {
+		textarea, _ = textarea.Update(keyPress(k))
+		textarea.View()
+	}
+
+	lastLineWidth := textarea.LineInfo().Width
+	if lastLineWidth > 20 {
+		t.Log(lastLineWidth)
+		t.Log(textarea.View())
+		t.Fail()
+	}
+}
+
+func TestValueSoftWrap(t *testing.T) {
+	textarea := newTextArea()
+	textarea.SetWidth(16)
+	textarea.SetHeight(10)
+	textarea.CharLimit = 500
+
+	textarea, _ = textarea.Update(nil)
+
+	input := "Testing Testing Testing Testing Testing Testing Testing Testing"
+
+	for _, k := range []rune(input) {
+		textarea, _ = textarea.Update(keyPress(k))
+		textarea.View()
+	}
+
+	value := textarea.Value()
+	if value != input {
+		t.Log(value)
+		t.Log(input)
+		t.Fatal("The text area does not have the correct value")
+	}
+}
+
+func TestSetValue(t *testing.T) {
+	textarea := newTextArea()
+	textarea.SetValue(strings.Join([]string{"Foo", "Bar", "Baz"}, "\n"))
+
+	if textarea.row != 2 && textarea.col != 3 {
+		t.Log(textarea.row, textarea.col)
+		t.Fatal("Cursor Should be on row 2 column 3 after inserting 2 new lines")
+	}
+
+	value := textarea.Value()
+	if value != "Foo\nBar\nBaz" {
+		t.Fatal("Value should be Foo\nBar\nBaz")
+	}
+
+	// SetValue should reset text area
+	textarea.SetValue("Test")
+	value = textarea.Value()
+	if value != "Test" {
+		t.Log(value)
+		t.Fatal("Text area was not reset when SetValue() was called")
+	}
+}
+
+func TestInsertString(t *testing.T) {
+	textarea := newTextArea()
+
+	// Insert some text
+	input := "foo baz"
+
+	for _, k := range []rune(input) {
+		textarea, _ = textarea.Update(keyPress(k))
+	}
+
+	// Put cursor in the middle of the text
+	textarea.col = 4
+
+	textarea.InsertString("bar ")
+
+	value := textarea.Value()
+	if value != "foo bar baz" {
+		t.Log(value)
+		t.Fatal("Expected insert string to insert bar between foo and baz")
+	}
+}
+
+func TestCanHandleEmoji(t *testing.T) {
+	textarea := newTextArea()
+	input := "🧋"
+
+	for _, k := range []rune(input) {
+		textarea, _ = textarea.Update(keyPress(k))
+	}
+
+	value := textarea.Value()
+	if value != input {
+		t.Log(value)
+		t.Fatal("Expected emoji to be inserted")
+	}
+
+	input = "🧋🧋🧋"
+
+	textarea.SetValue(input)
+
+	value = textarea.Value()
+	if value != input {
+		t.Log(value)
+		t.Fatal("Expected emoji to be inserted")
+	}
+
+	if textarea.col != 3 {
+		t.Log(textarea.col)
+		t.Fatal("Expected cursor to be on the third character")
+	}
+
+	if charOffset := textarea.LineInfo().CharOffset; charOffset != 6 {
+		t.Log(charOffset)
+		t.Fatal("Expected cursor to be on the sixth character")
+	}
+}
+
+func TestVerticalNavigationKeepsCursorHorizontalPosition(t *testing.T) {
+	textarea := newTextArea()
+	textarea.SetWidth(20)
+
+	textarea.SetValue(strings.Join([]string{"你好你好", "Hello"}, "\n"))
+
+	textarea.row = 0
+	textarea.col = 2
+
+	// 你好|你好
+	// Hell|o
+	// 1234|
+
+	// Let's imagine our cursor is on the first line where the pipe is.
+	// We press the down arrow to get to the next line.
+	// The issue is that if we keep the cursor on the same column, the cursor will jump to after the `e`.
+	//
+	// 你好|你好
+	// He|llo
+	//
+	// But this is wrong because visually we were at the 4th character due to
+	// the first line containing double-width runes.
+	// We want to keep the cursor on the same visual column.
+	//
+	// 你好|你好
+	// Hell|o
+	//
+	// This test ensures that the cursor is kept on the same visual column by
+	// ensuring that the column offset goes from 2 -> 4.
+
+	lineInfo := textarea.LineInfo()
+	if lineInfo.CharOffset != 4 || lineInfo.ColumnOffset != 2 {
+		t.Log(lineInfo.CharOffset)
+		t.Log(lineInfo.ColumnOffset)
+		t.Fatal("Expected cursor to be on the fourth character because there two double width runes on the first line.")
+	}
+
+	downMsg := tea.KeyMsg{Type: tea.KeyDown, Alt: false, Runes: []rune{}}
+	textarea, _ = textarea.Update(downMsg)
+
+	lineInfo = textarea.LineInfo()
+	if lineInfo.CharOffset != 4 || lineInfo.ColumnOffset != 4 {
+		t.Log(lineInfo.CharOffset)
+		t.Log(lineInfo.ColumnOffset)
+		t.Fatal("Expected cursor to be on the fourth character because we came down from the first line.")
+	}
+}
+
+func TestVerticalNavigationShouldRememberPositionWhileTraversing(t *testing.T) {
+	textarea := newTextArea()
+	textarea.SetWidth(40)
+
+	// Let's imagine we have a text area with the following content:
+	//
+	// Hello
+	// World
+	// This is a long line.
+	//
+	// If we are at the end of the last line and go up, we should be at the end
+	// of the second line.
+	// And, if we go up again we should be at the end of the first line.
+	// But, if we go back down twice, we should be at the end of the last line
+	// again and not the fifth (length of second line) character of the last line.
+	//
+	// In other words, we should remember the last horizontal position while
+	// traversing vertically.
+
+	textarea.SetValue(strings.Join([]string{"Hello", "World", "This is a long line."}, "\n"))
+
+	// We are at the end of the last line.
+	if textarea.col != 20 || textarea.row != 2 {
+		t.Log(textarea.col)
+		t.Fatal("Expected cursor to be on the 20th character of the last line")
+	}
+
+	// Let's go up.
+	upMsg := tea.KeyMsg{Type: tea.KeyUp, Alt: false, Runes: []rune{}}
+	textarea, _ = textarea.Update(upMsg)
+
+	// We should be at the end of the second line.
+	if textarea.col != 5 || textarea.row != 1 {
+		t.Log(textarea.col)
+		t.Fatal("Expected cursor to be on the 5th character of the second line")
+	}
+
+	// And, again.
+	textarea, _ = textarea.Update(upMsg)
+
+	// We should be at the end of the first line.
+	if textarea.col != 5 || textarea.row != 0 {
+		t.Log(textarea.col)
+		t.Fatal("Expected cursor to be on the 5th character of the first line")
+	}
+
+	// Let's go down, twice.
+	downMsg := tea.KeyMsg{Type: tea.KeyDown, Alt: false, Runes: []rune{}}
+	textarea, _ = textarea.Update(downMsg)
+	textarea, _ = textarea.Update(downMsg)
+
+	// We should be at the end of the last line.
+	if textarea.col != 20 || textarea.row != 2 {
+		t.Log(textarea.col)
+		t.Fatal("Expected cursor to be on the 20th character of the last line")
+	}
+
+	// Now, for correct behavior, if we move right or left, we should forget
+	// (reset) the saved horizontal position. Since we assume the user wants to
+	// keep the cursor where it is horizontally. This is how most text areas
+	// work.
+
+	textarea, _ = textarea.Update(upMsg)
+	leftMsg := tea.KeyMsg{Type: tea.KeyLeft, Alt: false, Runes: []rune{}}
+	textarea, _ = textarea.Update(leftMsg)
+
+	if textarea.col != 4 || textarea.row != 1 {
+		t.Log(textarea.col)
+		t.Fatal("Expected cursor to be on the 5th character of the second line")
+	}
+
+	// Going down now should keep us at the 4th column since we moved left and
+	// reset the horizontal position saved state.
+	textarea, _ = textarea.Update(downMsg)
+	if textarea.col != 4 || textarea.row != 2 {
+		t.Log(textarea.col)
+		t.Fatal("Expected cursor to be on the 4th character of the last line")
+	}
+}
+
+func TestRendersEndOfLineBuffer(t *testing.T) {
+	textarea := newTextArea()
+	textarea.ShowLineNumbers = true
+	textarea.SetWidth(20)
+
+	view := textarea.View()
+	if !strings.Contains(view, "~") {
+		t.Log(view)
+		t.Fatal("Expected to see a tilde at the end of the line")
+	}
+}
+
+func newTextArea() Model {
+	textarea := New()
+
+	textarea.Prompt = "> "
+	textarea.Placeholder = "Hello, World!"
+
+	textarea.Focus()
+
+	textarea, _ = textarea.Update(nil)
+
+	return textarea
+}
+
+func keyPress(key rune) tea.Msg {
+	return tea.KeyMsg{Type: tea.KeyRunes, Runes: []rune{key}, Alt: false}
+}

textinput/textinput.go

@@ -205,7 +205,7 @@ func (m *Model) SetValue(s string) {
 	} else {
 		m.value = runes
 	}
-	if (m.pos == 0 && len(m.value) == 0) || m.pos > len(m.value) {
+	if m.pos == 0 || m.pos > len(m.value) {
 		m.setCursor(len(m.value))
 	}
 	m.handleOverflow()
@@ -611,7 +611,7 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
 		switch msg.Type {
-		case tea.KeyBackspace: // delete character before cursor
+		case tea.KeyBackspace, tea.KeyCtrlH: // delete character before cursor
 			m.Err = nil
 
 			if msg.Alt {

timer/timer.go

@@ -162,10 +162,8 @@ func (m *Model) Start() tea.Cmd {
 
 // Stop pauses the timer. Has no effect if the timer has timed out.
 func (m *Model) Stop() tea.Cmd {
-	return func() tea.Msg {
 	return m.startStop(false)
 }
-}
 
 // Toggle stops the timer if it's running and starts it if it's stopped.
 func (m *Model) Toggle() tea.Cmd {

viewport/viewport.go

@@ -237,7 +237,7 @@ func Sync(m Model) tea.Cmd {
 }
 
 // ViewDown is a high performance command that moves the viewport up by a given
-// numer of lines. Use Model.ViewDown to get the lines that should be rendered.
+// number of lines. Use Model.ViewDown to get the lines that should be rendered.
 // For example:
 //
 //     lines := model.ViewDown(1)
@@ -344,24 +344,29 @@ func (m Model) updateAsModel(msg tea.Msg) (Model, tea.Cmd) {
 func (m Model) View() string {
 	if m.HighPerformanceRendering {
 		// Just send newlines since we're going to be rendering the actual
-		// content seprately. We still need to send something that equals the
+		// content separately. We still need to send something that equals the
 		// height of this view so that the Bubble Tea standard renderer can
 		// position anything below this view properly.
-		return strings.Repeat("\n", m.Height-1)
+		return strings.Repeat("\n", max(0, m.Height-1))
 	}
 
-	lines := m.visibleLines()
+	w, h := m.Width, m.Height
-
+	if sw := m.Style.GetWidth(); sw != 0 {
-	// Fill empty space with newlines
+		w = min(w, sw)
-	extraLines := ""
-	if len(lines) < m.Height {
-		extraLines = strings.Repeat("\n", max(0, m.Height-len(lines)))
 	}
-
+	if sh := m.Style.GetHeight(); sh != 0 {
+		h = min(h, sh)
+	}
+	contentWidth := w - m.Style.GetHorizontalFrameSize()
+	contentHeight := h - m.Style.GetVerticalFrameSize()
+	contents := lipgloss.NewStyle().
+		Height(contentHeight).    // pad to height.
+		MaxHeight(contentHeight). // truncate height if taller.
+		MaxWidth(contentWidth).   // truncate width.
+		Render(strings.Join(m.visibleLines(), "\n"))
 	return m.Style.Copy().
-		UnsetWidth().
+		UnsetWidth().UnsetHeight(). // Style size already applied in contents.
-		UnsetHeight().
+		Render(contents)
-		Render(strings.Join(lines, "\n") + extraLines)
 }
 
 func clamp(v, low, high int) int {