charming 0.1.1 → 0.1.3

data/lib/charming/presentation/components/activity_indicator.rb

@@ -1,158 +1,197 @@
 # frozen_string_literal: true
 
 module Charming
-  module Presentation
-    module Components
-      # ActivityIndicator renders a color-gradient progress or loading indicator
-      # as styled text. It produces a fixed-width row of characters whose colors
-      # interpolate between two gradient endpoints (or cycle through a single
-      # color). A label can be appended after the bar and an ellipsis that cycles
-      # through frames, useful for "loading" state display. Call `tick` to advance
-      # the frame counter, and call `render` to produce the styled output string.
-      class ActivityIndicator < Component
-        # Default character pool used for generating each position's character via stable hashing.
-        DEFAULT_CHARS = "0123456789abcdefABCDEF~!@#$%^&*+=_".chars.freeze
-
-        # The default two-color gradient applied across the bar width (red to cyan).
-        # The cyan endpoint mirrors the Phosphor theme palette's "cyan" token so the bar
-        # remains legible on Phosphor's dark navy background; gradient: accepts raw hex,
-        # so callers using a different theme should pass their own endpoints.
-        DEFAULT_GRADIENT = ["#ff0000", "#6FD0E3"].freeze
-
-        # The default label color for ellipsis and text portions when no custom
-        # label_style is provided.
-        DEFAULT_LABEL_COLOR = "#cccccc"
-
-        # Ellipsis frame sequence: four states cycle through "., "..", "...", and "" (empty).
-        ELLIPSIS_FRAMES = [".", "..", "...", ""].freeze
-
-        # Number of frames in the animation cycle before the indicator pattern repeats.
-        FRAME_COUNT = 10
-
-        # FNV-1a variant constants used by stable_hash for reproducible character selection per position.
-        FNV_OFFSET = 2_166_136_261
-        FNV_PRIME = 16_777_619
-        FNV_MASK = 0xffffffff
-
-        attr_reader :width, :label, :index, :seed, :chars, :gradient, :label_style
-
-        # Initializes a new ActivityIndicator with configurable visual parameters.
-        # width       — Display width of the gradient bar in characters (minimum 1). Default: 10.
-        # label       — Optional text label shown adjacent to the indicator.
-        # index       — Initial frame index for the ellipsis/frame animations. Default: 0.
-        # seed        — Hash seed that determines which characters appear at each position.
-        # chars       — Character pool to draw from (default is DEFAULT_CHARS).
-        # gradient    — Two-element array of hex color strings ["#rrggbb", "#rrggbb"] for interpolation.
-        # label_style — A Style object to use for rendering the label text; falls back to a gray foreground.
-        def initialize(width: 10, label: nil, index: 0, seed: 0, chars: DEFAULT_CHARS,
-          gradient: DEFAULT_GRADIENT, label_style: nil)
-          super()
-          raise ArgumentError, "chars cannot be empty" if chars.empty?
-
-          @width = [width.to_i, 1].max
-          @label = label
-          @index = index.to_i
-          @seed = seed
-          @chars = chars.map(&:to_s)
-          @gradient = gradient
-          @label_style = label_style
-        end
+  module Components
+    # ActivityIndicator renders a color-gradient progress or loading indicator
+    # as styled text. It produces a fixed-width row of characters whose colors
+    # interpolate between two gradient endpoints (or cycle through a single
+    # color). A label can be appended after the bar and an ellipsis that cycles
+    # through frames, useful for "loading" state display. Call `tick` to advance
+    # the frame counter, and call `render` to produce the styled output string.
+    class ActivityIndicator < Component
+      # Default character pool used for generating each position's character via stable hashing.
+      DEFAULT_CHARS = "0123456789abcdefABCDEF~!@#$%^&*+=_".chars.freeze
+
+      # The default two-color gradient applied across the bar width (red to cyan).
+      # The cyan endpoint mirrors the Phosphor theme palette's "cyan" token so the bar
+      # remains legible on Phosphor's dark navy background; gradient: accepts raw hex,
+      # so callers using a different theme should pass their own endpoints.
+      DEFAULT_GRADIENT = ["#ff0000", "#6FD0E3"].freeze
+
+      # The default label color for ellipsis and text portions when no custom
+      # label_style is provided.
+      DEFAULT_LABEL_COLOR = "#cccccc"
+
+      # Ellipsis frame sequence: four states cycle through "., "..", "...", and "" (empty).
+      ELLIPSIS_FRAMES = [".", "..", "...", ""].freeze
+
+      # Minimum bar width reserved when deciding whether a long label can fit before falling back.
+      MIN_FITTED_INDICATOR_WIDTH = 4
+
+      # Number of frames in the animation cycle before the indicator pattern repeats.
+      FRAME_COUNT = 10
+
+      # FNV-1a variant constants used by stable_hash for reproducible character selection per position.
+      FNV_OFFSET = 2_166_136_261
+      FNV_PRIME = 16_777_619
+      FNV_MASK = 0xffffffff
+
+      attr_reader :width, :label, :index, :seed, :chars, :gradient, :label_style, :max_width, :fallback_label
+
+      # Initializes a new ActivityIndicator with configurable visual parameters.
+      # width       — Display width of the gradient bar in characters (minimum 1). Default: 10.
+      # label       — Optional text label shown adjacent to the indicator.
+      # index       — Initial frame index for the ellipsis/frame animations. Default: 0.
+      # seed        — Hash seed that determines which characters appear at each position.
+      # chars       — Character pool to draw from (default is DEFAULT_CHARS).
+      # gradient    — Two-element array of hex color strings ["#rrggbb", "#rrggbb"] for interpolation.
+      # label_style    — A Style object to use for rendering the label text; falls back to a gray foreground.
+      # max_width      — Optional total display width cap for the indicator, label, and ellipsis.
+      # fallback_label — Optional shorter label used when the primary label cannot fit within max_width.
+      def initialize(width: 10, label: nil, index: 0, seed: 0, chars: DEFAULT_CHARS,
+        gradient: DEFAULT_GRADIENT, label_style: nil, max_width: nil, fallback_label: nil)
+        super()
+        raise ArgumentError, "chars cannot be empty" if chars.empty?
+
+        @width = [width.to_i, 1].max
+        @label = label
+        @index = index.to_i
+        @seed = seed
+        @chars = chars.map(&:to_s)
+        @gradient = gradient
+        @label_style = label_style
+        @max_width = max_width&.to_i
+        @fallback_label = fallback_label
+      end
 
-        # Advances the frame counter forward by +count+ steps, allowing the displayed pattern to change.
-        # Accepts an integer count (converted via +to_i+). Returns self for chaining.
-        def tick(count = 1)
-          @index += count.to_i
-          self
-        end
+      # Advances the frame counter forward by +count+ steps, allowing the displayed pattern to change.
+      # Accepts an integer count (converted via +to_i+). Returns self for chaining.
+      def tick(count = 1)
+        @index += count.to_i
+        self
+      end
 
-        # Renders the activity indicator as a styled string. If a label was provided,
-        # produces "bar ellipsis" alongside it; otherwise produces only the gradient bar.
-        # Returns a formatted string suitable for terminal rendering.
-        def render
-          return indicator unless label
+      # Renders the activity indicator as a styled string. If a label was provided,
+      # produces "bar ellipsis" alongside it; otherwise produces only the gradient bar.
+      # Returns a formatted string suitable for terminal rendering.
+      def render
+        return indicator unless label
 
-          "#{indicator} #{styled_label}#{styled_ellipsis}"
-        end
+        "#{indicator} #{styled_label}#{styled_ellipsis}"
+      end
 
-        private
+      private
 
-        # Renders the full gradient bar as an array of styled characters joined into a single string.
-        # Each character at +position+ is selected by hashing together seed, frame, and position —
-        # making the pattern stable across renders — then styled with the interpolated gradient color
-        # at that position.
-        def indicator
-          Array.new(width) { |position| styled_char(position) }.join
-        end
+      # Renders the full gradient bar as an array of styled characters joined into a single string.
+      # Each character at +position+ is selected by hashing together seed, frame, and position —
+      # making the pattern stable across renders — then styled with the interpolated gradient color
+      # at that position.
+      def indicator
+        Array.new(indicator_width) { |position| styled_char(position) }.join
+      end
 
-        # Selects a character for the bar at the given +position+, styles it with the gradient color
-        # interpolated for that position, and returns the result as a formatted string via +render+.
-        def styled_char(position)
-          style.foreground(color_at(position)).render(char_at(position))
-        end
+      # Selects a character for the bar at the given +position+, styles it with the gradient color
+      # interpolated for that position, and returns the result as a formatted string via +render+.
+      def styled_char(position)
+        style.foreground(color_at(position)).render(char_at(position))
+      end
 
-        # Chooses a character from self.chars by hashing seed:frame:position together with a stable
-        # FNV-1a hash. The resulting index is modulated against the character pool length, ensuring
-        # reproducible output across renders.
-        def char_at(position)
-          chars.fetch(stable_hash("#{seed}:#{frame}:#{position}") % chars.length)
-        end
+      # Chooses a character from self.chars by hashing seed:frame:position together with a stable
+      # FNV-1a hash. The resulting index is modulated against the character pool length, ensuring
+      # reproducible output across renders.
+      def char_at(position)
+        chars.fetch(stable_hash("#{seed}:#{frame}:#{position}") % chars.length)
+      end
 
-        # Renders the label text in its own style (or fallback gray color) via a Style renderer call.
-        def styled_label
-          label_style_or_default.render(label.to_s)
-        end
+      # Renders the label text in its own style (or fallback gray color) via a Style renderer call.
+      def styled_label
+        label_style_or_default.render(label_text)
+      end
 
-        # Renders an ellipsis frame (".", "..", "...", or empty) based on (index / 4) mod 4, styled with the label style.
-        def styled_ellipsis
-          label_style_or_default.render(ellipsis_frame)
-        end
+      # Renders an ellipsis frame (".", "..", "...", or empty) based on (index / 4) mod 4, styled with the label style.
+      def styled_ellipsis
+        label_style_or_default.render(ellipsis_frame)
+      end
 
-        # Returns the current ellipsis frame string: one of ".", "..", "...", "". Cycles through four frames per tick.
-        def ellipsis_frame
-          ELLIPSIS_FRAMES.fetch((index / 4) % ELLIPSIS_FRAMES.length)
-        end
+      # Returns the current ellipsis frame string: one of ".", "..", "...", "". Cycles through four frames per tick.
+      def ellipsis_frame
+        ELLIPSIS_FRAMES.fetch((index / 4) % ELLIPSIS_FRAMES.length)
+      end
 
-        # Returns the label style if set, otherwise produces a gray foreground style for fallback rendering.
-        def label_style_or_default
-          label_style || style.foreground(DEFAULT_LABEL_COLOR)
-        end
+      # Returns the label style if set, otherwise produces a gray foreground style for fallback rendering.
+      def label_style_or_default
+        label_style || style.foreground(DEFAULT_LABEL_COLOR)
+      end
 
-        # Interpolates between gradient[0] and gradient[1] at the fractional +position+ (0.0 to 1.0).
-        # Returns the first gradient color if width is 1; otherwise returns a blended hex string based on position.
-        def color_at(position)
-          return gradient.first unless width > 1
+      # Returns the label to render, using fallback_label when the primary label cannot fit
+      # alongside a minimal indicator and the widest ellipsis frame.
+      def label_text
+        return label.to_s unless use_fallback_label?
 
-          blend(gradient.first, gradient.last, position / (width - 1).to_f)
-        end
+        fallback_label.to_s
+      end
 
-        # Blends two hex colors by interpolating their red/green/blue components at fractional +amount+.
-        # Accepts strings like "#ff0000" and produces a new "#rrggbb" string.
-        def blend(start_hex, end_hex, amount)
-          start_rgb = rgb(start_hex)
-          end_rgb = rgb(end_hex)
-          mixed = start_rgb.zip(end_rgb).map { |from, to| (from + ((to - from) * amount)).round }
-          "#%02x%02x%02x" % mixed
-        end
+      # True when the primary label cannot fit within max_width even with a compact indicator.
+      def use_fallback_label?
+        return false unless max_width && fallback_label
 
-        # Decomposes a hex color string ("#rrggbb") into an array of three integers [r, g, b].
-        def rgb(hex)
-          value = hex.to_s.delete_prefix("#")
-          raise ArgumentError, "gradient colors must be #rrggbb" unless value.match?(/\A[0-9a-fA-F]{6}\z/)
+        fitted_width(label.to_s, MIN_FITTED_INDICATOR_WIDTH) > max_width
+      end
 
-          [value[0..1], value[2..3], value[4..5]].map { |part| part.to_i(16) }
-        end
+      # Returns the fitted indicator width after reserving room for label text and the widest ellipsis.
+      def indicator_width
+        return width unless max_width && label
 
-        # Advances the animation frame counter, wrapping around after +FRAME_COUNT+ (10) steps.
-        def frame
-          index % FRAME_COUNT
-        end
+        (max_width - label_width - 1 - widest_ellipsis_width).clamp(1, width)
+      end
+
+      def label_width
+        UI::Width.measure(label_text)
+      end
+
+      def fitted_width(text, indicator_width)
+        indicator_width + 1 + UI::Width.measure(text) + widest_ellipsis_width
+      end
+
+      def widest_ellipsis_width
+        @widest_ellipsis_width ||= ELLIPSIS_FRAMES.map { |frame| UI::Width.measure(frame) }.max
+      end
+
+      # Interpolates between gradient[0] and gradient[1] at the fractional +position+ (0.0 to 1.0).
+      # Returns the first gradient color if width is 1; otherwise returns a blended hex string based on position.
+      def color_at(position)
+        return gradient.first unless indicator_width > 1
+
+        blend(gradient.first, gradient.last, position / (indicator_width - 1).to_f)
+      end
+
+      # Blends two hex colors by interpolating their red/green/blue components at fractional +amount+.
+      # Accepts strings like "#ff0000" and produces a new "#rrggbb" string.
+      def blend(start_hex, end_hex, amount)
+        start_rgb = rgb(start_hex)
+        end_rgb = rgb(end_hex)
+        mixed = start_rgb.zip(end_rgb).map { |from, to| (from + ((to - from) * amount)).round }
+        "#%02x%02x%02x" % mixed
+      end
+
+      # Decomposes a hex color string ("#rrggbb") into an array of three integers [r, g, b].
+      def rgb(hex)
+        value = hex.to_s.delete_prefix("#")
+        raise ArgumentError, "gradient colors must be #rrggbb" unless value.match?(/\A[0-9a-fA-F]{6}\z/)
+
+        [value[0..1], value[2..3], value[4..5]].map { |part| part.to_i(16) }
+      end
+
+      # Advances the animation frame counter, wrapping around after +FRAME_COUNT+ (10) steps.
+      def frame
+        index % FRAME_COUNT
+      end
 
-        # Produces a deterministic integer hash from the input string using FNV-1a hashing, ensuring the same
-        # characters appear at the same positions across multiple renderings of this indicator.
-        def stable_hash(value)
-          value.bytes.reduce(FNV_OFFSET) do |hash, byte|
-            ((hash ^ byte) * FNV_PRIME) & FNV_MASK
-          end
+      # Produces a deterministic integer hash from the input string using FNV-1a hashing, ensuring the same
+      # characters appear at the same positions across multiple renderings of this indicator.
+      def stable_hash(value)
+        value.bytes.reduce(FNV_OFFSET) do |hash, byte|
+          ((hash ^ byte) * FNV_PRIME) & FNV_MASK
         end
       end
     end

data/lib/charming/presentation/components/command_palette.rb

@@ -1,118 +1,116 @@
 # frozen_string_literal: true
 
 module Charming
-  module Presentation
-    module Components
-      # CommandPalette renders a fuzzy-searchable command picker UI. It wraps a TextInput for search
-      # input and a List for result display, dispatching key events between them. Users type to filter
-      # the registered commands by label match, navigate with up/down/home/end keys (delegated to List),
-      # confirm a selection with Enter (returns [:selected, command]), or cancel with Escape (returns :cancelled).
-      # State is serializable as a hash of value/cursor/selected_index for session persistence.
-      class CommandPalette < Component
-        Command = Data.define(:label, :value)
-
-        # A single command palette entry: a human-readable +label+ and a callable or
-        # method symbol +value+ that gets executed when the user selects it.
-        attr_reader :commands, :input
-
-        # Initializes the dropdown widget with a list of Command entries and search
-        # parameters for building the underlying TextInput (placeholder text, cursor
-        # position, value) and List (display height, initial selection). Returns void;
-        # the state is later serializable via +state+ for session persistence.
-        def initialize(commands:, placeholder: "Search commands", height: nil, value: "", cursor: nil, selected_index: 0, theme: nil)
-          super(theme: theme)
-          @commands = commands
-          @height = height
-          @input = TextInput.new(value: value, placeholder: placeholder, cursor: cursor)
-          @list = build_list(selected_index: selected_index)
-        end
+  module Components
+    # CommandPalette renders a fuzzy-searchable command picker UI. It wraps a TextInput for search
+    # input and a List for result display, dispatching key events between them. Users type to filter
+    # the registered commands by label match, navigate with up/down/home/end keys (delegated to List),
+    # confirm a selection with Enter (returns [:selected, command]), or cancel with Escape (returns :cancelled).
+    # State is serializable as a hash of value/cursor/selected_index for session persistence.
+    class CommandPalette < Component
+      Command = Data.define(:label, :value)
+
+      # A single command palette entry: a human-readable +label+ and a callable or
+      # method symbol +value+ that gets executed when the user selects it.
+      attr_reader :commands, :input
+
+      # Initializes the dropdown widget with a list of Command entries and search
+      # parameters for building the underlying TextInput (placeholder text, cursor
+      # position, value) and List (display height, initial selection). Returns void;
+      # the state is later serializable via +state+ for session persistence.
+      def initialize(commands:, placeholder: "Search commands", height: nil, value: "", cursor: nil, selected_index: 0, theme: nil)
+        super(theme: theme)
+        @commands = commands
+        @height = height
+        @input = TextInput.new(value: value, placeholder: placeholder, cursor: cursor)
+        @list = build_list(selected_index: selected_index)
+      end
 
-        # Returns the currently displayed Command entry in the List at the time of calling.
-        # Returns nil if no entry is highlighted (i.e., user has opened the palette but not
-        # moved the selection). Useful for retrieving the result after key handling.
-        def selected_command
-          list.selected_item
-        end
+      # Returns the currently displayed Command entry in the List at the time of calling.
+      # Returns nil if no entry is highlighted (i.e., user has opened the palette but not
+      # moved the selection). Useful for retrieving the result after key handling.
+      def selected_command
+        list.selected_item
+      end
 
-        # Collects the current state of the TextInput and List into a serializable hash
-        # suitable for round-trip storage in session. Returns {value:, cursor:, selected_index:}.
-        def state
-          {
-            value: input.value,
-            cursor: input.cursor,
-            selected_index: list.selected_index
-          }
-        end
+      # Collects the current state of the TextInput and List into a serializable hash
+      # suitable for round-trip storage in session. Returns {value:, cursor:, selected_index:}.
+      def state
+        {
+          value: input.value,
+          cursor: input.cursor,
+          selected_index: list.selected_index
+        }
+      end
 
-        # Handles key events by routing them to the appropriate sub-component: Escape kills the
-        # palette returning :cancelled; up/down/home/end keys go to the List selection handler
-        # via handle_list_key; all other keys (including typed characters) are passed to the TextInput
-        # which manages cursor position and input filtering. If a list key match fails, falls through
-        # to the TextInput handler. Returns nil/nil if no handler consumed the event, or :cancelled when
-        # Escape is pressed.
-        def handle_key(event)
-          key = Charming.key_of(event)
-          return :cancelled if key == :escape
+      # Handles key events by routing them to the appropriate sub-component: Escape kills the
+      # palette returning :cancelled; up/down/home/end keys go to the List selection handler
+      # via handle_list_key; all other keys (including typed characters) are passed to the TextInput
+      # which manages cursor position and input filtering. If a list key match fails, falls through
+      # to the TextInput handler. Returns nil/nil if no handler consumed the event, or :cancelled when
+      # Escape is pressed.
+      def handle_key(event)
+        key = Charming.key_of(event)
+        return :cancelled if key == :escape
 
-          return handle_list_key(event) if list_key?(key)
+        return handle_list_key(event) if list_key?(key)
 
-          handle_input_key(event)
-        end
+        handle_input_key(event)
+      end
 
-        # Renders the command palette as a vertically-stacked text representation: the search TextInput
-        # row on line 1, and then the filtered List results (or "No commands found") on subsequent lines.
-        # Returns a multiline string suitable for terminal rendering.
-        def render
-          [input.render, render_results].join("\n")
-        end
+      # Renders the command palette as a vertically-stacked text representation: the search TextInput
+      # row on line 1, and then the filtered List results (or "No commands found") on subsequent lines.
+      # Returns a multiline string suitable for terminal rendering.
+      def render
+        [input.render, render_results].join("\n")
+      end
 
-        private
+      private
 
-        attr_reader :height, :list
+      attr_reader :height, :list
 
-        # Delegates key handling entirely to the internal List widget, which manages up/down/home/end selection.
-        # Returns whatever the List's handle_key returns (typically nil or the symbol from the subclass).
-        def handle_list_key(event)
-          list.handle_key(event)
-        end
+      # Delegates key handling entirely to the internal List widget, which manages up/down/home/end selection.
+      # Returns whatever the List's handle_key returns (typically nil or the symbol from the subclass).
+      def handle_list_key(event)
+        list.handle_key(event)
+      end
 
-        # Passes the key event to the TextInput for cursor position and search text management.
-        # If the input returns :handled, rebuilds the List so that filtering is re-evaluated against
-        # the new input value. Returns nil/nil if no handler consumed the event.
-        def handle_input_key(event)
-          result = input.handle_key(event)
-          @list = build_list if result == :handled
-          result
-        end
+      # Passes the key event to the TextInput for cursor position and search text management.
+      # If the input returns :handled, rebuilds the List so that filtering is re-evaluated against
+      # the new input value. Returns nil/nil if no handler consumed the event.
+      def handle_input_key(event)
+        result = input.handle_key(event)
+        @list = build_list if result == :handled
+        result
+      end
 
-        # Checks whether the given key is a List-navigation key (up/down/home/end). Returns true for those keys
-        # so they can be dispatched via +handle_list_key+ rather than falling through to TextInput.
-        def list_key?(key)
-          %i[up down home end enter].include?(key)
-        end
+      # Checks whether the given key is a List-navigation key (up/down/home/end). Returns true for those keys
+      # so they can be dispatched via +handle_list_key+ rather than falling through to TextInput.
+      def list_key?(key)
+        %i[up down home end enter].include?(key)
+      end
 
-        # Renders the filtered results section below the search input. If no commands match the current filter text,
-        # returns "No commands found"; otherwise renders the List widget's styled display string. Returns a single-line string.
-        def render_results
-          return "No commands found" if filtered_commands.empty?
+      # Renders the filtered results section below the search input. If no commands match the current filter text,
+      # returns "No commands found"; otherwise renders the List widget's styled display string. Returns a single-line string.
+      def render_results
+        return "No commands found" if filtered_commands.empty?
 
-          list.render
-        end
+        list.render
+      end
 
-        # Builds a new List from the currently filtered commands at the given selected_index height and label extractor.
-        # The +selected_index+ parameter defaults to the last known value in +list+ to preserve scroll position across rebuilds.
-        def build_list(selected_index: list&.selected_index || 0)
-          List.new(items: filtered_commands, selected_index: selected_index, height: height, label: :label.to_proc, theme: theme)
-        end
+      # Builds a new List from the currently filtered commands at the given selected_index height and label extractor.
+      # The +selected_index+ parameter defaults to the last known value in +list+ to preserve scroll position across rebuilds.
+      def build_list(selected_index: list&.selected_index || 0)
+        List.new(items: filtered_commands, selected_index: selected_index, height: height, label: :label.to_proc, theme: theme)
+      end
 
-        # Returns the full commands array when input value is empty; otherwise a subset whose labels match case-insensitively
-        # against the current TextInput value. Used to drive the fuzzy search behavior. Returns an Array of Command entries.
-        def filtered_commands
-          return commands if input.value.empty?
+      # Returns the full commands array when input value is empty; otherwise a subset whose labels match case-insensitively
+      # against the current TextInput value. Used to drive the fuzzy search behavior. Returns an Array of Command entries.
+      def filtered_commands
+        return commands if input.value.empty?
 
-          commands.select do |command|
-            command.label.downcase.include?(input.value.downcase)
-          end
+        commands.select do |command|
+          command.label.downcase.include?(input.value.downcase)
         end
       end
     end

data/lib/charming/presentation/components/command_palette_modal.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Charming
+  module Components
+    # CommandPaletteModal wraps command palette content in the framework's standard modal chrome.
+    class CommandPaletteModal < Component
+      DEFAULT_TITLE = "Command palette"
+      DEFAULT_HELP = "Type to filter. Enter selects. Escape closes."
+      DEFAULT_WIDTH = 52
+
+      def initialize(content:, title: DEFAULT_TITLE, help: DEFAULT_HELP, width: DEFAULT_WIDTH, style: nil, theme: nil)
+        super(theme: theme)
+        @content = content
+        @title = title
+        @help = help
+        @width = width
+        @style = style
+      end
+
+      def render
+        render_component Modal.new(content: content, title: title, help: help, width: width, style: modal_style, theme: theme)
+      end
+
+      private
+
+      attr_reader :content, :title, :help, :width
+
+      def modal_style
+        @style
+      end
+    end
+  end
+end