zaniah 0.6.3 → 0.7.0

data/lib/zaniah/inspection.rb

@@ -0,0 +1,146 @@
+# frozen_string_literal: true
+
+module Zaniah
+  module Inspection
+    SOURCE_NODES = ObjectSpace::WeakMap.new
+
+    Entry = Data.define(:element, :type, :key, :test_id, :bounds, :style, :tooltip,
+      :context_menu, :handlers, :focusable, :focused, :children) do
+      def name = type
+      def object = element
+      def focusable? = focusable
+      def focused? = focused
+    end
+
+    Overlays = Data.define(:tooltip, :popup, :menu)
+    FrameInfo = Data.define(:number, :stats)
+
+    AccessibilitySnapshot = Data.define(:root) do
+      def query(role: nil, label: nil, states: {})
+        raise ArgumentError, "label must be a String or Regexp" unless label.nil? || label.is_a?(String) || label.is_a?(Regexp)
+        return [].freeze unless root
+
+        found = []
+        pending = [[root, []]]
+        until pending.empty?
+          node, path = pending.pop
+          if (!role || node.role == role) &&
+              (!label || (node.label && (label.is_a?(Regexp) ? label.match?(node.label) : node.label == label))) &&
+              states.all? { |key, value| node.states.key?(key) && node.states[key] == value }
+            found << [node, path.freeze].freeze
+          end
+          node.children.each_with_index.reverse_each { |child, index| pending << [child, path + [index]] }
+        end
+        found.freeze
+      end
+    end
+
+    Snapshot = Data.define(:root, :overlays, :text_runs, :frame, :accessibility, :hits) do
+      def find(test_id: nil, type: nil) = where(test_id: test_id, type: type).first
+
+      def where(test_id: nil, type: nil)
+        return [].freeze unless root
+        found = []
+        pending = [root]
+        until pending.empty?
+          entry = pending.pop
+          if (!test_id || entry.test_id == test_id) &&
+              (!type || (type.is_a?(Class) ? entry.element.is_a?(type) : entry.type == type))
+            found << entry
+          end
+          pending.concat(entry.children.reverse)
+        end
+        found.freeze
+      end
+
+      def at(point)
+        return unless point
+        owner = hits.reverse_each.find { |hit| hit.contains?(point) }&.owner
+        while owner
+          pending = [root].compact
+          until pending.empty?
+            entry = pending.pop
+            return entry if entry.element.equal?(owner)
+            pending.concat(entry.children)
+          end
+          owner = owner.respond_to?(:parent) ? owner.parent : nil
+        end
+        nil
+      end
+    end
+
+    module_function
+
+    def snapshot(window)
+      raise ArgumentError, "expected a rendered window" unless window.respond_to?(:last_root) && window.respond_to?(:dispatcher)
+
+      seen = {}
+      root = entry(window.last_root, window, seen)
+      popup = window.popup if window.respond_to?(:popup)
+      popup = Platform::Headless::Popup.new(labels: copy(popup.labels), enabled: copy(popup.enabled),
+        selected_index: popup.selected_index, bounds: popup.bounds) if popup
+      overlays = Overlays.new(tooltip: copy(window.tooltip_state), popup: popup,
+        menu: window.app&.respond_to?(:menu_bar) ? window.app.menu_bar : nil)
+      text_runs = copy(window.text_runs)
+      frame = FrameInfo.new(number: window.frame_number, stats: copy(window.frame_stats))
+      Snapshot.new(root: root, overlays: overlays, text_runs: text_runs, frame: frame,
+        accessibility: AccessibilitySnapshot.new(root: copy_accessibility(window.accessibility_tree.root)),
+        hits: window.dispatcher.hit_regions)
+    end
+
+    def idle?(app)
+      app.executor.idle? && app.windows.all? { |window| window.closed? || (!window.dirty? && !window.animation_active?) }
+    end
+
+    def perform(window, node, action) = Accessibility.perform(window, SOURCE_NODES[node] || node, action)
+
+    def copy_accessibility(node)
+      return unless node
+      result = Accessibility::Node.new(role: node.role, label: copy(node.label), value: copy(node.value),
+        bounds: node.bounds, states: copy(node.states),
+        children: node.children.map { |child| copy_accessibility(child) }.freeze, actions: copy(node.actions))
+      SOURCE_NODES[result] = node
+      result
+    end
+    private_class_method :copy_accessibility
+
+    def entry(object, window, seen)
+      return unless object && !seen[object.object_id]
+      seen[object.object_id] = true
+      style = object.resolved_style if object.respond_to?(:resolved_style)
+      style ||= object.root&.resolved_style if object.respond_to?(:root)
+      handle = object.focus_handle if object.respond_to?(:focus_handle)
+      items = object.context_menu_items if object.respond_to?(:context_menu_items)
+      menu = items&.map { |label, callback| [label.dup.freeze, !callback.nil?].freeze }&.freeze if items.is_a?(Array)
+      Entry.new(element: object, type: object.class.name.to_s.delete_prefix("Zaniah::").freeze,
+        key: object.respond_to?(:identity_key) ? copy(object.identity_key) : nil,
+        test_id: object.respond_to?(:test_id) ? copy(object.test_id) : nil,
+        bounds: object.respond_to?(:layout_node) ? object.layout_node&.bounds : nil,
+        style: snapshot_style(style),
+        tooltip: object.respond_to?(:tooltip_text) ? copy(object.tooltip_text) : nil,
+        context_menu: menu, handlers: object.respond_to?(:handlers) ? copy(object.handlers) : [].freeze,
+        focusable: !!handle&.focusable, focused: !!(handle && window.dispatcher.focused.equal?(handle)),
+        children: object.respond_to?(:children) ? object.children.filter_map { |child| entry(child, window, seen) }.freeze : [].freeze)
+    end
+    private_class_method :entry
+
+    def snapshot_style(style)
+      values = style ? style.to_h : {}.freeze
+      return values if values.frozen? && values.values.none? { |value| value.is_a?(String) || value.is_a?(Array) || value.is_a?(Hash) }
+      copy(values)
+    end
+    private_class_method :snapshot_style
+
+    def copy(value)
+      case value
+      when String then value.dup.freeze
+      when Array then value.map { |item| copy(item) }.freeze
+      when Hash then value.to_h { |key, item| [copy(key), copy(item)] }.freeze
+      else value
+      end
+    end
+    private_class_method :copy
+  end
+
+  def self.bundled_font_path = File.expand_path("../../assets/fonts/Abel-Regular.ttf", __dir__)
+end

data/lib/zaniah/platform/headless/window.rb

@@ -9,7 +9,7 @@ module Zaniah
         include Appearance
         DEFAULT_CLEAR = "#181b20"
 
-        attr_reader :content_size, :scene, :device, :dispatcher, :scale_factor, :text_runs, :pointer_position, :cursor_style, :animator, :clock, :accessibility_tree, :accessibility_revision, :frame_stats
+        attr_reader :content_size, :scene, :device, :dispatcher, :scale_factor, :text_runs, :pointer_position, :cursor_style, :animator, :clock, :accessibility_tree, :accessibility_revision, :frame_stats, :last_root, :frame_number
         attr_accessor :text_system, :ime_state, :title, :app, :devtools
 
         def initialize(width: 800, height: 600, title: "Zaniah UI", scale_factor: 1,
@@ -23,6 +23,7 @@ module Zaniah
           @accessibility_tree, @accessibility_revision = Accessibility::Tree.new, 0
           @frame_stats = {fps: 0.0, frame_ms: 0.0, layout_ms: 0.0, prepaint_ms: 0.0, paint_ms: 0.0, command_count: 0}.freeze
           @state, @used_state, @text_runs = {}, {}, []
+          @last_root, @frame_number = nil, 0
           @dirty, @closed, @pointer_down, @cursor_style = true, false, false, :arrow
         end
 
@@ -38,6 +39,10 @@ module Zaniah
         def animation_active? = !!@animator&.active?
         def closed? = @closed
         def pointer_down? = @pointer_down
+        def clipboard = @clipboard.to_s
+        def clipboard=(text)
+          @clipboard = text.to_s
+        end
         def set_cursor(style)
           raise ArgumentError, "unknown cursor #{style}" unless %i[arrow text pointer crosshair resize_horizontal resize_vertical].include?(style)
           return style if @cursor_style == style
@@ -65,6 +70,8 @@ module Zaniah
                     selected_index: @menu[:index], bounds: popup_bounds(@menu))
         end
 
+        def tooltip_state = @tooltip&.merge(text: @tooltip[:text].dup.freeze)&.freeze
+
         def resize(width, height)
           @content_size = Size.new(width, height)
           @device.resize(width, height)
@@ -173,6 +180,8 @@ module Zaniah
             prepaint_ms: (prepaint_finished - layout_finished) * 1000,
             paint_ms: (paint_finished - prepaint_finished) * 1000,
             command_count: @scene.commands.length / 4}.freeze
+          @last_root = element
+          @frame_number += 1
           @on_frame&.call(element, clear)
           @device.render(@scene, clear: clear) if present
           @text_system.end_frame if @text_system.respond_to?(:end_frame)

data/lib/zaniah/platform/tui/window.rb

@@ -9,6 +9,7 @@ module Zaniah
       class Window < Headless::Window
         def initialize(input: $stdin, output: $stdout, **options)
           @input, @output = input, output
+          options[:keymap] ||= Input::Keymap.default_ui(platform: :tui, clock: options.fetch(:clock, MONOTONIC_CLOCK))
           super(**options)
           @text_system = TextRenderer.new
           @input_decoder = InputDecoder.new { |event| self.input(event) }
@@ -39,6 +40,13 @@ module Zaniah
 
         def feed_input(bytes) = @input_decoder.feed(bytes)
 
+        def clipboard=(text)
+          super
+          @output.write("\e]52;c;#{[clipboard].pack('m0')}\a")
+          @output.flush
+          clipboard
+        end
+
         def render(element, **options)
           super(element, **options, present: false)
           rows = Array.new((content_size.height / 20).ceil) { Array.new((content_size.width / 8).ceil, " ") }

data/lib/zaniah/task_executor.rb

@@ -81,6 +81,8 @@ module Zaniah
       @wake.synchronize { @condition.signal }
     end
 
+    def idle? = @foreground.empty?
+
     def drain
       now = @clock.call
       due, @timers = @timers.partition { |deadline, _| deadline <= now }

data/lib/zaniah/text.rb

@@ -81,6 +81,7 @@ module Zaniah
       align: @text_align, ellipsis: @ellipsis, kinsoku: @kinsoku)
       @wrap, @line_height, @letter_spacing = mode, line_height, letter_spacing
       @text_align, @ellipsis, @kinsoku = align, ellipsis, kinsoku
+      @focus_handle.context[:multiline] = mode != :none || @text.include?("\n") if @focus_handle
       self
     end
 
@@ -88,7 +89,8 @@ module Zaniah
       @selectable = value
       @selection ||= TextSelection.new(0)
       return self unless value
-      focusable(context: {in_text_field: true}) { |action| text_action(action) }
+      focusable(context: {in_text_field: true, multiline: @wrap != :none || @text.include?("\n")},
+        validate: ->(action) { validate_text_action(action) }) { |action| text_action(action) }
       @focus_handle.on_input = ->(event) { text_input(event) }
       on_mouse_down { |event, _| begin_selection(event) }
       on_drag { |event, _| extend_selection(event) }
@@ -104,6 +106,7 @@ module Zaniah
     end
 
     def request_layout(cx)
+      @cx = cx
       @text = @buffer.to_s if @buffer
       value = display_text
       @paragraph, @line = nil, nil
@@ -226,10 +229,24 @@ module Zaniah
       head = @selection.head
       case action
       when :select_all then @selection = TextSelection.new(0, @text.bytesize)
+      when :copy then @cx.window.clipboard = @text.byteslice(@selection.range)
+      when :cut
+        @cx.window.clipboard = @text.byteslice(@selection.range)
+        delete_range(@selection.range)
+      when :paste then replace_selection(@cx.window.clipboard.to_s.encode(Encoding::UTF_8, invalid: :replace, undef: :replace))
+      when :undo, :redo then history(action)
       when :move_left then @selection = TextSelection.new(@selection.collapsed? ? Unicode.previous_boundary(@text, head) : @selection.range.begin)
       when :move_right then @selection = TextSelection.new(@selection.collapsed? ? Unicode.next_boundary(@text, head) : @selection.range.end)
       when :select_left then @selection = TextSelection.new(@selection.anchor, Unicode.previous_boundary(@text, head))
       when :select_right then @selection = TextSelection.new(@selection.anchor, Unicode.next_boundary(@text, head))
+      when :word_left, :word_right, :select_word_left, :select_word_right
+        direction = action.to_s.end_with?("left") ? :left : :right
+        target = Unicode.word_boundary(@text, head, direction)
+        @selection = action.to_s.start_with?("select") ? TextSelection.new(@selection.anchor, target) : TextSelection.new(target)
+      when :line_up, :line_down
+        @selection = TextSelection.new(Unicode.neighbor_line_offset(@text, head, action == :line_up ? -1 : 1))
+      when :document_start then @selection = TextSelection.new(0)
+      when :document_end then @selection = TextSelection.new(@text.bytesize)
       when :line_start, :select_line_start then move_to_line_edge(action, :start)
       when :line_end, :select_line_end then move_to_line_edge(action, :end)
       when :delete_backward then delete_backward
@@ -237,9 +254,35 @@ module Zaniah
       when :insert_newline then replace_selection("\n") if @editable
       else return false
       end
+      @cx&.window&.request_frame
       true
     end
 
+    def validate_text_action(action)
+      case action
+      when :copy then !@secure && !@selection.collapsed?
+      when :cut then !!@editable && !@secure && !@selection.collapsed?
+      when :paste then !!@editable && !@buffer.composition
+      when :undo then !!@editable && !@buffer.composition && @buffer.can_undo?
+      when :redo then !!@editable && @buffer.can_redo?
+      when :delete_backward, :delete_forward, :insert_newline then !!@editable
+      when :select_all, :move_left, :move_right, :select_left, :select_right,
+        :word_left, :word_right, :select_word_left, :select_word_right,
+        :line_up, :line_down, :document_start, :document_end,
+        :line_start, :line_end, :select_line_start, :select_line_end then true
+      end
+    end
+
+    def history(action)
+      before = @buffer.to_s
+      @buffer.public_send(action)
+      @text = @buffer.to_s
+      return if @text == before
+      position = Unicode.grapheme_boundaries(@text).reverse.find { |offset| offset <= @selection.head } || 0
+      @selection = TextSelection.new(position)
+      @on_change&.call(@text)
+    end
+
     def text_input(event)
       case event
       when Input::TextInput

data/lib/zaniah/text_buffer.rb

@@ -14,6 +14,8 @@ module Zaniah
 
     def to_s = @text.dup
     def bytesize = @text.bytesize
+    def can_undo? = !@undo.empty?
+    def can_redo? = !@redo.empty?
 
     def insert(offset, string)
       change(offset...offset, string, :insert)

data/lib/zaniah/ui/charts.rb

@@ -32,14 +32,14 @@ module Zaniah
         result.freeze
       end
 
-      def paint_line(scene, bounds, values, color)
-        points = chart_points(bounds, values)
+      def paint_line(scene, bounds, values, color, range: nil)
+        points = chart_points(bounds, values, range: range)
         path = points.map.with_index { |(x, y), index| "#{index.zero? ? "M" : "L"}#{x},#{y}" }.join
         scene.path(path, stroke: color, width: 2)
       end
 
-      def chart_points(bounds, values)
-        minimum, maximum = values.minmax
+      def chart_points(bounds, values, range: nil)
+        minimum, maximum = range || values.minmax
         span = maximum == minimum ? 1.0 : maximum - minimum
         step = values.length == 1 ? 0 : bounds.width / (values.length - 1)
         values.map.with_index { |value, index| [bounds.x + index * step, bounds.bottom - (value - minimum) / span * bounds.height] }
@@ -83,6 +83,40 @@ module Zaniah
         span = maximum == minimum ? 1.0 : maximum - minimum
         values.map { |value| levels[((value - minimum) / span * (levels.length - 1)).round] }.join
       end
+
+      def chart_palette(cx)
+        palette = Array(@colors || [cx.theme.colors.accent, cx.theme.colors.info, cx.theme.colors.success, cx.theme.colors.warning])
+        raise ArgumentError, "chart colors must not be empty" if palette.empty?
+        palette
+      end
+
+      def chart_legend(entries, palette)
+        Div.new.flex_row.gap(10).children(entries.each_with_index.map do |entry, index|
+          label = block_given? ? yield(entry) : entry.to_s
+          Div.new.flex_row.items_center.gap(4)
+            .child(Div.new.w(8).h(8).bg(palette[index % palette.length]))
+            .child(Label.new(label, size: :xs))
+        end)
+      end
+
+      def cartesian_axes(scene, bounds, color)
+        divisions = 4
+        grid = (1...divisions).flat_map do |index|
+          fraction = index.to_f / divisions
+          x = bounds.x + bounds.width * fraction
+          y = bounds.y + bounds.height * fraction
+          ["M#{x},#{bounds.y}V#{bounds.bottom}", "M#{bounds.x},#{y}H#{bounds.right}"]
+        end.join
+        ticks = (1...divisions).flat_map do |index|
+          fraction = index.to_f / divisions
+          x = bounds.x + bounds.width * fraction
+          y = bounds.y + bounds.height * fraction
+          ["M#{x},#{bounds.bottom}V#{bounds.bottom - 3}", "M#{bounds.x},#{y}H#{bounds.x + 3}"]
+        end.join
+        scene.path(grid, stroke: color, width: 0.5)
+        scene.path("M#{bounds.x},#{bounds.y}V#{bounds.bottom}H#{bounds.right}", stroke: color, width: 1)
+        scene.path(ticks, stroke: color, width: 1)
+      end
     end
 
     class LineChart < Sparkline
@@ -96,25 +130,21 @@ module Zaniah
       end
 
       def build(cx)
-        palette = Array(@colors || [cx.theme.colors.accent, cx.theme.colors.info, cx.theme.colors.success, cx.theme.colors.warning])
+        palette = chart_palette(cx)
+        range = @series.values.flatten.minmax
         canvas = @canvas = Canvas.new do |bounds, context|
           @plot_bounds = bounds.inset(Edges.new(12, 8, 20, 28))
-          axes(context.scene, @plot_bounds, cx.theme.colors.border)
-          @series.each_with_index { |(_name, values), index| paint_line(context.scene, @plot_bounds, values, palette[index % palette.length]) }
+          cartesian_axes(context.scene, @plot_bounds, cx.theme.colors.border)
+          @series.each_with_index do |(_name, values), index|
+            paint_line(context.scene, @plot_bounds, values, palette[index % palette.length], range: range)
+          end
         end.w(@width).h(@height).on_hover { |event, context| show_line_tooltip(event, context) }
           .focusable(context: {in_chart: true}) { |action| chart_action(action, cx) }
-        legend = Div.new.flex_row.gap(10).children(@series.keys.each_with_index.map do |name, index|
-          Div.new.flex_row.items_center.gap(4).child(Div.new.w(8).h(8).bg(palette[index % palette.length])).child(Label.new(name, size: :xs))
-        end)
-        Div.new.gap(4).child(canvas).child(legend)
+        Div.new.gap(4).child(canvas).child(chart_legend(@series.keys, palette))
       end
 
       private
 
-      def axes(scene, bounds, color)
-        scene.path("M#{bounds.x},#{bounds.y}V#{bounds.bottom}H#{bounds.right}", stroke: color, width: 1)
-      end
-
       def show_line_tooltip(event, cx)
         return unless @plot_bounds
         text = @series.map do |name, values|
@@ -131,14 +161,15 @@ module Zaniah
       end
 
       def build(cx)
-        palette = Array(@colors || [cx.theme.colors.accent, cx.theme.colors.info, cx.theme.colors.success, cx.theme.colors.warning])
+        palette = chart_palette(cx)
+        @axis_color = cx.theme.colors.border
         canvas = @canvas = Canvas.new do |bounds, context|
           @plot_bounds = bounds.inset(Edges.new(12, 8, 20, 28))
-          axes(context.scene, @plot_bounds, cx.theme.colors.border)
+          cartesian_axes(context.scene, @plot_bounds, @axis_color)
           paint_bars(context.scene, @plot_bounds, palette)
         end.w(@width).h(@height).on_hover { |event, context| show_line_tooltip(event, context) }
           .focusable(context: {in_chart: true}) { |action| chart_action(action, cx) }
-        Div.new.gap(4).child(canvas).child(Label.new(@series.keys.join(" · "), size: :xs))
+        Div.new.gap(4).child(canvas).child(chart_legend(@series.keys, palette))
       end
 
       private
@@ -185,20 +216,16 @@ module Zaniah
       end
 
       def build(cx)
-        palette = Array(@colors || [cx.theme.colors.accent, cx.theme.colors.info, cx.theme.colors.success, cx.theme.colors.warning])
-        raise ArgumentError, "chart colors must not be empty" if palette.empty?
+        palette = chart_palette(cx)
 
         @canvas = Canvas.new do |bounds, context|
           @plot_bounds = bounds
           paint_slices(context.scene, bounds, palette)
         end.w(@width).h(@height).on_hover { |event, context| show_slice_tooltip(event, context) }
           .focusable(context: {in_chart: true}) { |action| chart_action(action, cx) }
-        legend = Div.new.flex_row.gap(10).children(@slices.each_with_index.map do |(name, value), index|
-          percent = value / @total * 100
-          Div.new.flex_row.items_center.gap(4)
-            .child(Div.new.w(8).h(8).bg(palette[index % palette.length]))
-            .child(Label.new("#{name}: #{format("%.1f", percent)}%", size: :xs))
-        end)
+        legend = chart_legend(@slices, palette) do |name, value|
+          "#{name}: #{format("%.1f", value / @total * 100)}%"
+        end
         Div.new.gap(4).child(@canvas).child(legend)
       end
 
@@ -308,20 +335,15 @@ module Zaniah
       end
 
       def build(cx)
-        palette = Array(@colors || [cx.theme.colors.accent, cx.theme.colors.info, cx.theme.colors.success, cx.theme.colors.warning])
-        raise ArgumentError, "chart colors must not be empty" if palette.empty?
+        palette = chart_palette(cx)
 
         canvas = @canvas = Canvas.new do |bounds, context|
           @plot_bounds = bounds.inset(Edges.new(12, 8, 20, 28))
-          paint_axes(context.scene, @plot_bounds, cx.theme.colors.border)
+          cartesian_axes(context.scene, @plot_bounds, cx.theme.colors.border)
           paint_points(context.scene, @plot_bounds, palette)
         end.w(@width).h(@height).on_hover { |event, context| show_scatter_tooltip(event, context) }
           .focusable(context: {in_chart: true}) { |action| chart_action(action, cx) }
-        legend = Div.new.flex_row.gap(10).children(@points.keys.each_with_index.map do |name, index|
-          Div.new.flex_row.items_center.gap(4).child(Div.new.w(8).h(8).bg(palette[index % palette.length]))
-            .child(Label.new(name, size: :xs))
-        end)
-        Div.new.gap(4).child(canvas).child(legend)
+        Div.new.gap(4).child(canvas).child(chart_legend(@points.keys, palette))
       end
 
       def tui_cells(*) = spark(@series.values.first)
@@ -341,10 +363,6 @@ module Zaniah
 
       private
 
-      def paint_axes(scene, bounds, color)
-        scene.path("M#{bounds.x},#{bounds.y}V#{bounds.bottom}H#{bounds.right}", stroke: color, width: 1)
-      end
-
       def paint_points(scene, bounds, palette)
         all = @points.values.flatten(1)
         min_x, max_x = all.map(&:first).minmax
@@ -381,20 +399,15 @@ module Zaniah
       end
 
       def build(cx)
-        palette = Array(@colors || [cx.theme.colors.accent, cx.theme.colors.info, cx.theme.colors.success, cx.theme.colors.warning])
-        raise ArgumentError, "chart colors must not be empty" if palette.empty?
+        palette = chart_palette(cx)
 
         canvas = @canvas = Canvas.new do |bounds, context|
           @plot_bounds = bounds.inset(Edges.new(12, 8, 20, 28))
-          axes(context.scene, @plot_bounds, cx.theme.colors.border)
+          cartesian_axes(context.scene, @plot_bounds, cx.theme.colors.border)
           paint_areas(context.scene, @plot_bounds, palette)
         end.w(@width).h(@height).on_hover { |event, context| show_line_tooltip(event, context) }
           .focusable(context: {in_chart: true}) { |action| chart_action(action, cx) }
-        legend = Div.new.flex_row.gap(10).children(@series.keys.each_with_index.map do |name, index|
-          Div.new.flex_row.items_center.gap(4).child(Div.new.w(8).h(8).bg(palette[index % palette.length]))
-            .child(Label.new(name, size: :xs))
-        end)
-        Div.new.gap(4).child(canvas).child(legend)
+        Div.new.gap(4).child(canvas).child(chart_legend(@series.keys, palette))
       end
 
       private
@@ -457,7 +470,7 @@ module Zaniah
             value.negative? ? negative[index] = finish : positive[index] = finish
           end
         end
-        scene.path("M#{bounds.x},#{zero}H#{bounds.right}", stroke: "#777", width: 1)
+        scene.path("M#{bounds.x},#{zero}H#{bounds.right}", stroke: @axis_color || "#777", width: 1)
       end
     end
   end

data/lib/zaniah/ui/choice_fields.rb

@@ -23,9 +23,10 @@ module Zaniah
     class Combobox < Component
       attr_reader :value, :query
 
-      def initialize(items, value: nil, label: "Choose", placeholder: "Type to filter…", disabled: false)
+      def initialize(items, value: nil, label: "Choose", placeholder: "Type to filter…", disabled: false, matcher: nil)
         super()
         @items = normalize_items(items)
+        @matcher = Matcher::Session.new(@items.map(&:first), matcher || Zaniah.configuration.matcher || Matcher::Substring.new)
         @label, @placeholder, @disabled = label.to_s, placeholder.to_s, !!disabled
         @value = value
         @query = label_for(value).to_s
@@ -37,22 +38,27 @@ module Zaniah
 
       def build(cx)
         @cx = cx
-        @matches = @items.select { |label, _| @query.empty? || label.downcase.include?(@query.downcase) }.first(8)
+        @matches = @matcher.results(@query).first(8).filter_map do |match|
+          item = @items[match.index]
+          [item, match] if item
+        end
         @selected_index = @selected_index.clamp(0, [@matches.length - 1, 0].max)
         field = TextField.new(@query, label: @label, placeholder: @placeholder, disabled: @disabled)
           .on_change { |text, context| @query = text; @open = true; @selected_index = 0; context&.window&.request_frame }
         root = Div.new.gap(cx.theme.spacing[1]).focusable(context: {in_combobox: true}) { |action| combo_action(action) }.child(field)
         if @open && !@matches.empty? && !@disabled
           root.child(Div.new.p(2).gap(1).bg(cx.theme.colors.surface).border(1).border_color(cx.theme.colors.border)
-            .rounded(cx.theme.radii[:sm]).children(@matches.map.with_index do |(label, value), index|
-              Button.new(label, size: :sm, variant: index == @selected_index ? :secondary : :ghost).w_full
+            .rounded(cx.theme.radii[:sm]).children(@matches.map.with_index do |((label, value), match), index|
+              button = match.ranges.empty? ? Button.new(label, size: :sm, variant: index == @selected_index ? :secondary : :ghost) :
+                HighlightedButton.new(label, ranges: match.ranges, size: :sm, variant: index == @selected_index ? :secondary : :ghost)
+              button.w_full
                 .on_click { |event, context| choose(value, label, event, context) }
             end))
         end
         root
       end
 
-      def tui_cells(*) = "#{@label}: [#{@query}█]" + (@open ? "\n" + @matches.map.with_index { |(label, _), index| "#{index == @selected_index ? ">" : " "} #{label}" }.join("\n") : "")
+      def tui_cells(*) = "#{@label}: [#{@query}█]" + (@open ? "\n" + @matches.map.with_index { |((label, _), _match), index| "#{index == @selected_index ? ">" : " "} #{label}" }.join("\n") : "")
       def accessibility_node(_cx) = node(:combobox, label: @label, value: @value,
         states: {expanded: @open, disabled: @disabled}, actions: @disabled ? [] : %i[focus set_value])
 
@@ -77,7 +83,7 @@ module Zaniah
         when :choose_option
           match = @matches[@selected_index]
           return false unless match
-          return choose(match[1], match[0], nil, @cx)
+          return choose(match[0][1], match[0][0], nil, @cx)
         when :dismiss then @open = false
         else return false
         end