glance-widgets-sdk 1.0.0

data/lib/glance_widgets/components/line_chart.rb

@@ -0,0 +1,213 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  LINE_CHART_DEFAULTS = {
+    'id' => 'lineChart', 'interpolation' => 'monotone', 'strokeWidth' => 2, 'fillOpacity' => 0,
+    'areaFillOpacity' => 0.3, 'markerRadius' => 3, 'fontSizeRatio' => 0.06, 'axisWidth' => 1,
+    'gridCellSize' => 8, 'zIndex' => 0, 'axisColor' => '#FFFFFF', 'labelColor' => '#FFFFFF',
+    'axisOpacity' => 0.5, 'labelOpacity' => 0.72,
+    'seriesColors' => %w[#6BA7FF #FF9F0A #34C759 #FF453A #BF5AF2 #5AC8FA]
+  }.freeze
+
+  module Components
+    def series_points(entry)
+      spec = entry.is_a?(Array) ? { 'values' => entry } : entry
+      raise ArgumentError, 'Series needs exactly one of values or points' if DataValues.set?(spec, 'values') == DataValues.set?(spec, 'points')
+      raw = spec['points'] || spec.fetch('values').each_with_index.map { |value, i| [i, value] }
+      raise ArgumentError, 'Series needs 2..1024 points' unless raw.length.between?(2, 1024)
+      unless raw.all? { |point| point.is_a?(Array) && point.length == 2 && point.all? { |v| Numbers.finite?(v) } }
+        raise ArgumentError, 'Series points must be finite number pairs'
+      end
+      points = DataValues.copy(raw).sort_by(&:first)
+      raise ArgumentError, 'Series cannot repeat x coordinates' if points.each_cons(2).any? { |a, b| a[0] == b[0] }
+      points
+    end
+
+    def chart_markers(points, color, markers, decimals, radius, label_color)
+      ys = points.map(&:last)
+      wanted = []
+      wanted << [points.length - 1, 'last'] if markers['last']
+      wanted << [ys.index(ys.max), 'max'] if markers['max']
+      wanted << [ys.index(ys.min), 'min'] if markers['min']
+      seen = {}
+      wanted.each_with_object([]) do |(index, kind), result|
+        next if seen[index]
+        seen[index] = true
+        x, y = points[index]
+        marker = { 'at' => { 'x' => x }, 'symbol' => { 'radiusPt' => radius, 'fill' => color } }
+        if markers['labels']
+          below = kind == 'min'
+          marker['label'] = Numbers.format_number(y, decimals)
+          marker['labelStyle'] = { 'color' => label_color, 'fontSizePt' => 10, 'position' => below ? 'bottom' : 'top' }
+          marker['at'] = { 'x' => x, 'offsetPt' => [0, below ? radius + 2 : -(radius + 2)] }
+        end
+        result << marker
+      end
+    end
+
+    def plot_plan(canvas, options, ticks, padding)
+      ratio = DataValues.fetch_or(options, 'fontSizeRatio', 0.06)
+      pt = font_pt(ratio, canvas)
+      metrics = { 'ratio' => ratio, 'fontPt' => pt, 'lineHeightPt' => pt * 1.2, 'gapPt' => pt * 0.4 }
+      axis_width = DataValues.fetch_or(options, 'axisWidth', 1)
+      axis_pt = options['showAxes'] ? axis_width : 0
+      label_width = ticks.map { |tick| text_width(tick, pt) }.max
+      half_label = options['showValueLabels'] ? metrics['lineHeightPt'] * 1.5 / 2 : 0
+      x_row = DataValues.fetch_or(options, 'xLabels', []).empty? ? 0 : metrics['gapPt'] + text_height(pt)
+      need = { 'left' => (options['showValueLabels'] ? label_width + metrics['gapPt'] : 0) + axis_pt,
+               'top' => half_label, 'right' => 0, 'bottom' => [half_label, axis_pt + x_row].max }
+      area_box = area(options['frame'], canvas)
+      insets = need.transform_values { |value| [value, padding].max - padding }
+      curve_region = emitted(area_box.inset_pt(insets), canvas)
+      rect = curve_region['rect']
+      plot = { 'x' => rect['x'] + padding, 'y' => rect['y'] + padding,
+               'width' => rect['width'] - 2 * padding, 'height' => rect['height'] - 2 * padding }
+      raise ArgumentError, 'Chart area too small for labels' unless plot['width'] > 0 && plot['height'] > 0
+      { 'canvas' => canvas, 'area' => area_box.to_pt, 'curveFrame' => curve_region['frame'],
+        'plot' => plot, 'text' => metrics, 'axisX' => plot['x'] - axis_width / 2.0 }
+    end
+
+    def chart_grid(id, path, z, grid, layout)
+      selected_theme = theme(grid['theme'])
+      canvas = layout['canvas']
+      region = emitted(Box.from_pt(layout['plot'], canvas), canvas)
+      solved = GlanceWidgets.solve_grid('region' => region['rect'], 'cellSize' => DataValues.fetch_or(grid, 'cellSize', 8),
+                                        'gapMode' => selected_theme['layout']['gapMode'])
+      matrix = Matrix.new(solved['columns'], solved['rows'], GlanceWidgets.theme_options(
+        selected_theme, 'default' => selected_theme['default'], 'layout' => solved['layout']
+      ))
+      GlanceWidgets.place(matrix.to_part, 'id' => id + ':grid', 'frame' => region['frame'],
+                                         'path' => path, 'zIndex' => z).merge('plot' => region['rect'])
+    end
+
+    def chart_overlays(id, z, options, layout, ticks)
+      canvas, area, plot, metrics = layout.values_at('canvas', 'area', 'plot', 'text')
+      axis_x, axis_width = layout['axisX'], DataValues.fetch_or(options, 'axisWidth', 1)
+      bottom = plot['y'] + plot['height']
+      colors = DataValues.fetch_or(options, 'colors', {})
+      layers = []
+      if options['showAxes']
+        style = { 'color' => DataValues.fetch_or(colors, 'axis', '#FFFFFF'), 'strokeWidth' => axis_width, 'opacity' => 0.5 }
+        layers << GlanceWidgets.vertical_line('id' => id + ':axis-value', 'at' => axis_x / canvas['width'],
+                                              'from' => plot['y'] / canvas['height'], 'to' => bottom / canvas['height'],
+                                              'zIndex' => z, 'style' => style)
+        layers << GlanceWidgets.horizontal_line('id' => id + ':axis-base',
+                                                'at' => (bottom + axis_width / 2.0) / canvas['height'],
+                                                'from' => (axis_x - axis_width / 2.0) / canvas['width'],
+                                                'to' => (plot['x'] + plot['width']) / canvas['width'],
+                                                'zIndex' => z, 'style' => style)
+      end
+      add = lambda do |role, rect, content, horizontal, vertical|
+        layers << label(id + ':' + role, Box.from_pt(rect, canvas), content, horizontal, vertical,
+                        metrics['ratio'], DataValues.fetch_or(colors, 'label', '#FFFFFF'), 0.72, z)
+      end
+      if options['showValueLabels']
+        height = metrics['lineHeightPt'] * 1.5
+        right = axis_x - axis_width / 2.0 - metrics['gapPt']
+        ticks.each_with_index do |content, i|
+          center = i.zero? ? plot['y'] : bottom
+          rect = { 'x' => area['x'], 'y' => center - height / 2,
+                   'width' => [0, right - area['x']].max, 'height' => height }
+          add.call("value-#{i}", rect, content, 'right', 'center')
+        end
+      end
+      labels = DataValues.fetch_or(options, 'xLabels', [])
+      axis_pt = options['showAxes'] ? axis_width : 0
+      labels.each_with_index do |content, i|
+        fraction = labels.length == 1 ? 0.5 : i.fdiv(labels.length - 1)
+        width = text_width(content, metrics['fontPt'])
+        centered = [area['x'], plot['x'] + fraction * plot['width'] - width / 2].max
+        left = [area['x'] + area['width'] - width, centered].min
+        add.call("x-#{i}", { 'x' => left, 'y' => bottom + axis_pt + metrics['gapPt'],
+                             'width' => width, 'height' => text_height(metrics['fontPt']) }, content, 'center', 'top')
+      end
+      layers
+    end
+
+    def chart(what, input_series, options)
+      raise ArgumentError, 'Chart needs at least one series' if input_series.empty?
+      id, path = identity(options, 'lineChart', what)
+      z, stroke = DataValues.fetch_or(options, 'zIndex', 0), DataValues.fetch_or(options, 'strokeWidth', 2)
+      markers = DataValues.fetch_or(options, 'markers', {})
+      radius = DataValues.fetch_or(markers, 'radius', 3)
+      has_markers = %w[last min max].any? { |key| markers[key] == true }
+      colors = DataValues.fetch_or(options, 'colors', {})
+      palette = DataValues.fetch_or(colors, 'series', LINE_CHART_DEFAULTS['seriesColors'])
+      series = input_series.each_with_index.map do |entry, i|
+        color = entry.is_a?(Hash) ? entry['color'] : nil
+        { 'points' => series_points(entry),
+          'color' => GlanceWidgets.normalize_color(color || palette[i % palette.length]) }
+      end
+      every = series.flat_map { |entry| entry['points'] }
+      domain = every.map(&:first).minmax
+      low, high = DataValues.fetch_or(options, 'min', every.map(&:last).min), DataValues.fetch_or(options, 'max', every.map(&:last).max)
+      if low == high && !DataValues.set?(options, 'min') && !DataValues.set?(options, 'max')
+        pad = low.abs < 0.001 ? 1 : low.abs * 0.1
+        low, high = low - pad, high + pad
+      end
+      raise ArgumentError, 'Chart max must exceed min' unless high > low
+      decimals = DataValues.fetch_or(options, 'decimals', decimals(low, high))
+      series.each { |entry| entry['points'] = entry['points'].map { |x, y| [x, Numbers.clamp(y, low, high)] } }
+      marker_lists = series.map do |entry|
+        chart_markers(entry['points'], entry['color'], markers, decimals, radius, DataValues.fetch_or(colors, 'label', '#FFFFFF'))
+      end
+      reaches = marker_lists.flatten.select { |marker| DataValues.set?(marker, 'label') }.map do |marker|
+        [radius + 2 + text_height(10), text_width(marker['label'], 10) / 2].max
+      end
+      padding = [48, [stroke / 2.0, has_markers ? radius : 0, *reaches].max].min
+      grid = options['grid'] == true ? {} : (options['grid'] == false ? nil : options['grid'])
+      ticks = [high, low].map { |value| Numbers.format_number(value, decimals) }
+      needs_canvas = options['showAxes'] || options['showValueLabels'] ||
+                     !DataValues.fetch_or(options, 'xLabels', []).empty? || !grid.nil?
+      layout = if needs_canvas
+                 plot_plan(GlanceWidgets.require_canvas(options['canvas'], what), options, ticks, padding)
+               end
+      area = options['frame']
+      frame = if layout
+                layout['curveFrame']
+              elsif area.nil?
+                { 'left' => 0, 'top' => 0, 'width' => 1, 'height' => 1 }
+              else
+                area.is_a?(Box) ? area.to_frame : DataValues.copy(area)
+              end
+      layers = []
+      if layout && grid
+        background = chart_grid(id, path, z, grid, layout)
+        layers << background
+        layout['plot'] = background['plot']
+      end
+      series.each_with_index do |entry, i|
+        layers << GlanceWidgets.curve(
+          'id' => "#{id}:series-#{i}", 'frame' => frame, 'zIndex' => z + 1,
+          'data' => { 'mode' => 'samples', 'points' => entry['points'], 'domain' => domain, 'yDomain' => [low, high],
+                      'interpolation' => DataValues.fetch_or(options, 'interpolation', 'monotone'), 'markers' => marker_lists[i] },
+          'style' => { 'color' => entry['color'], 'fillColor' => entry['color'], 'opacity' => 1,
+                       'fillOpacity' => DataValues.fetch_or(options, 'fillOpacity', 0),
+                       'strokeWidth' => stroke, 'plotPadding' => padding }
+        )
+      end
+      layers += chart_overlays(id, z + 2, options, layout, ticks) if layout
+      Components.combine(layers)
+    end
+  end
+
+  def line_chart(series, options = {})
+    Components.chart('line_chart', series, { 'showAxes' => true, 'showValueLabels' => true }.merge(options) { |_, default, user| user.nil? ? default : user })
+  end
+
+  def area_chart(series, options = {})
+    Components.chart('area_chart', series,
+                     { 'fillOpacity' => 0.3, 'showAxes' => true, 'showValueLabels' => true }.merge(options) { |_, default, user| user.nil? ? default : user })
+  end
+
+  def sparkline(values, options = {})
+    series = { 'values' => values }
+    series['color'] = options['color'] if DataValues.set?(options, 'color')
+    rest = options.reject { |key, _| %w[color fill fillOpacity].include?(key) }
+    Components.chart('sparkline', [series], rest.merge(
+      'id' => DataValues.fetch_or(options, 'id', 'sparkline'), 'markers' => DataValues.fetch_or(options, 'markers', 'last' => true),
+      'fillOpacity' => options['fill'] == true ? DataValues.fetch_or(options, 'fillOpacity', 0.3) : 0,
+      'showAxes' => false, 'showValueLabels' => false
+    ))
+  end
+end

data/lib/glance_widgets/components/modern.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  # Shared pieces of the modern (layer-built, not matrix) components. Thin or partial pieces are
+  # `line` layers (stroke 0.5-8 pt) and `curve` layers (stroke 0.25-12 pt), both with round caps.
+  MODERN_COLORS = { 'fill' => '#0A84FF', 'track' => '#8E8E93', 'label' => '#FFFFFF' }.freeze
+  TRACK_OPACITY = 0.3
+  LINE_STROKE_MAX_PT = 8
+  CURVE_STROKE_MAX_PT = 12
+  CURVE_POINT_DECIMALS = 1e3
+
+  module Modern
+    extend self
+
+    def require_stroke(what, name, value, max)
+      return if Numbers.finite?(value) && value >= 0.5 && value <= max
+      raise ArgumentError, "#{what}: #{name} must be between 0.5 and #{max} pt, got #{value}"
+    end
+
+    def min_capsule_length(canvas, direction, width)
+      width + FRAME_SIZE_MIN * (direction == 'horizontal' ? canvas['width'] : canvas['height'])
+    end
+
+    # A round-capped line whose visible extent is exactly [from, to].
+    def capsule(spec)
+      canvas, direction, width = spec['canvas'], spec['direction'], spec['width']
+      horizontal = direction == 'horizontal'
+      at = spec['at']
+      start = spec['from'] + width / 2.0
+      stop = [spec['to'] - width / 2.0, start + FRAME_SIZE_MIN * (horizontal ? canvas['width'] : canvas['height'])].max
+      frame = if horizontal
+                Box.new(start / canvas['width'], at / canvas['height'], (stop - start) / canvas['width'], 0)
+              else
+                Box.new(at / canvas['width'], start / canvas['height'], 0, (stop - start) / canvas['height'])
+              end
+      GlanceWidgets.line('id' => spec['id'], 'frame' => frame, 'direction' => direction, 'zIndex' => spec['zIndex'],
+                         'style' => { 'color' => spec['color'], 'opacity' => spec['opacity'], 'strokeWidth' => width, 'cap' => 'round' })
+    end
+
+    # A horizontal round-capped bar up to 12 pt thick: a 2-point curve whose visible extent is exactly [from, to].
+    def curve_capsule(spec)
+      canvas, width = spec['canvas'], spec['width']
+      half = width / 2.0
+      round = ->(v) { Numbers.round(v * CURVE_POINT_DECIMALS) / CURVE_POINT_DECIMALS }
+      frame_width = [spec['to'] - spec['from'], width + 0.05, FRAME_SIZE_MIN * canvas['width']].max
+      frame_height = [width, FRAME_SIZE_MIN * canvas['height']].max
+      GlanceWidgets.curve('id' => spec['id'], 'zIndex' => spec['zIndex'],
+                          'frame' => Box.from_pt({ 'x' => spec['from'], 'y' => spec['at'] - frame_height / 2.0, 'width' => frame_width, 'height' => frame_height }, canvas),
+                          'data' => { 'mode' => 'samples',
+                                      'points' => [[round.call(half), 0.5], [round.call(frame_width - half), 0.5]],
+                                      'domain' => [0, round.call(frame_width)], 'yDomain' => [0, 1], 'interpolation' => 'linear' },
+                          'style' => { 'color' => spec['color'], 'opacity' => spec['opacity'], 'strokeWidth' => width, 'lineCap' => 'round' })
+    end
+
+    def fill_length(fraction, full, minimum)
+      fraction <= 0 ? 0 : [full, [minimum, fraction * full].max].min
+    end
+  end
+end

data/lib/glance_widgets/components/pixel_bar_chart.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  PIXEL_BAR_CHART_DEFAULTS = {
+    'id' => 'pixelBarChart', 'rows' => 10, 'gap' => 0.16, 'barWidth' => 1, 'barSpacing' => 1,
+    'cornerRadius' => 0.15, 'fontSizeRatio' => 0.06, 'axisWidth' => 1, 'zIndex' => 0,
+    'colors' => { 'positive' => '#5EA2FF', 'negative' => '#FF6B6B', 'track' => nil,
+                  'axis' => '#FFFFFF', 'label' => '#FFFFFF' }, 'axisOpacity' => 0.5, 'labelOpacity' => 0.72
+  }.freeze
+
+  def pixel_bar_chart(values, options)
+    unless !values.empty? && values.all? { |v| Numbers.finite?(v) }
+      raise ArgumentError, 'pixel_bar_chart needs finite values'
+    end
+    canvas = require_canvas(options['canvas'], 'pixel_bar_chart')
+    id, path = Components.identity(options, 'pixelBarChart', 'pixel_bar_chart')
+    width, spacing, z = DataValues.fetch_or(options, 'barWidth', 1), DataValues.fetch_or(options, 'barSpacing', 1), DataValues.fetch_or(options, 'zIndex', 0)
+    colors = PIXEL_BAR_CHART_DEFAULTS['colors'].merge(DataValues.fetch_or(options, 'colors', {}))
+    categories = DataValues.fetch_or(options, 'categories', [])
+    show_categories = DataValues.fetch_or(options, 'showCategoryLabels', !categories.empty?)
+    show_values, show_axes = DataValues.fetch_or(options, 'showValueLabels', true), DataValues.fetch_or(options, 'showAxes', true)
+    raise ArgumentError, 'Categories need one entry per value' if show_categories && categories.length != values.length
+    low, high = DataValues.fetch_or(options, 'min', [0, *values].min), DataValues.fetch_or(options, 'max', [0, *values].max)
+    high = low + 1 if !DataValues.set?(options, 'min') && !DataValues.set?(options, 'max') && low == high
+    raise ArgumentError, 'pixel_bar_chart max must exceed min' unless high > low
+    zero = Numbers.clamp(0, low, high)
+    decimals = DataValues.fetch_or(options, 'decimals', Components.decimals(low, high))
+    ratio = DataValues.fetch_or(options, 'fontSizeRatio', 0.06)
+    pt = Components.font_pt(ratio, canvas)
+    line_height, gap_pt, axis_width = pt * 1.2, pt * 0.4, DataValues.fetch_or(options, 'axisWidth', 1)
+    area = Components.area(options['frame'], canvas)
+    rect = area.to_pt
+    rows, gap = DataValues.fetch_or(options, 'rows', 10), DataValues.fetch_or(options, 'gap', 0.16)
+    half_gap = show_axes || show_values || show_categories ? gap * rect['height'] / rows / 2 : 0
+    ticks = [high, zero, low].uniq { |v| v.zero? ? 0.0 : v.to_f }.map { |v| [v, Numbers.format_number(v, decimals)] }
+    label_width = ticks.map { |_, label| Components.text_width(label, pt) }.max
+    half_label = show_values ? line_height * 1.5 / 2 : 0
+    category_row = show_categories ? gap_pt + Components.text_height(pt) : 0
+    plot_box = area.inset_pt(
+      'left' => (show_values ? label_width + gap_pt : 0) + (show_axes || show_values ? axis_width + half_gap : 0),
+      'top' => half_label + half_gap, 'bottom' => [half_label, category_row].max + half_gap
+    )
+    frame = plot_box.to_frame
+    region = resolve_frame(frame, canvas)
+    columns = values.length * width + (values.length - 1) * spacing
+    grid = solve_grid('region' => region, 'columns' => columns, 'rows' => rows, 'gap' => gap)
+    geometry = fit_matrix(region, grid, grid['layout'])
+    baseline = Numbers.round((grid['rows'] * (high - zero)).fdiv(high - low))
+    matrix = Matrix.new(columns, grid['rows'],
+                        'default' => colors['track'].nil? ? EMPTY : normalize_color(colors['track']),
+                        'base' => { 'opacity' => 1, 'cornerRadius' => DataValues.fetch_or(options, 'cornerRadius', 0.15) },
+                        'layout' => grid['layout'])
+    values.each_with_index do |value, i|
+      x = i * (width + spacing)
+      value = Numbers.clamp(value, low, high)
+      if value > zero
+        cells = Numbers.round((value - zero).fdiv(high - zero) * baseline)
+        matrix.rect(x, baseline - cells, width, cells, colors['positive'])
+      elsif value < zero
+        cells = Numbers.round((zero - value).fdiv(zero - low) * (grid['rows'] - baseline))
+        matrix.rect(x, baseline, width, cells, colors['negative'])
+      end
+    end
+    placed = place(matrix.to_part, 'id' => id + ':plot', 'frame' => frame, 'path' => path, 'zIndex' => z)
+    layers = [placed]
+    axis_x = [column_boundary(geometry, 0), geometry['originX'] - axis_width / 2.0].min
+    if show_axes
+      style = { 'color' => colors['axis'], 'strokeWidth' => axis_width, 'opacity' => 0.5 }
+      layers << vertical_line('id' => id + ':axis-value', 'at' => axis_x / canvas['width'],
+                              'from' => row_boundary(geometry, 0) / canvas['height'],
+                              'to' => row_boundary(geometry, grid['rows']) / canvas['height'],
+                              'zIndex' => z + 1, 'style' => style)
+      layers << horizontal_line('id' => id + ':axis-base', 'at' => row_boundary(geometry, baseline) / canvas['height'],
+                                'from' => (axis_x - axis_width / 2.0) / canvas['width'],
+                                'to' => column_boundary(geometry, grid['columns']) / canvas['width'],
+                                'zIndex' => z + 1, 'style' => style)
+    end
+    add = lambda do |role, box, content, horizontal, vertical|
+      layers << Components.label(id + ':' + role, box, content, horizontal, vertical, ratio,
+                                  colors['label'], 0.72, z + 1)
+    end
+    if show_values
+      height = line_height * 1.5
+      right = axis_x - axis_width / 2.0 - gap_pt
+      ticks.each_with_index do |(value, content), i|
+        boundary = value == high ? 0 : (value == low ? grid['rows'] : baseline)
+        center = row_boundary(geometry, boundary)
+        box = Box.from_pt({ 'x' => rect['x'], 'y' => center - height / 2,
+                            'width' => [0, right - rect['x']].max, 'height' => height }, canvas)
+        add.call("value-#{i}", box, content, 'right', 'center')
+      end
+    end
+    if show_categories
+      pitch = (width + spacing) * (geometry['cellWidth'] + geometry['gapX'])
+      categories.each_with_index do |category, i|
+        start = i * (width + spacing)
+        center = (column_boundary(geometry, start) + column_boundary(geometry, start + width)) / 2
+        label_width = [pitch, 2 * (center - rect['x']), 2 * (rect['x'] + rect['width'] - center)].min
+        box = Box.from_pt({ 'x' => center - label_width / 2, 'y' => row_boundary(geometry, grid['rows']) + gap_pt,
+                            'width' => label_width, 'height' => Components.text_height(pt) }, canvas)
+        add.call("category-#{i}", box, category, 'center', 'top')
+      end
+    end
+    Components.combine(layers)
+  end
+end

data/lib/glance_widgets/components/pixel_progress.rb

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  PIXEL_PROGRESS_BAR_DEFAULTS = {
+    'min' => 0, 'max' => 100, 'orientation' => 'horizontal', 'segments' => 10,
+    'segmentSize' => 3, 'segmentGap' => 1, 'thickness' => 2
+  }.freeze
+  LABELED_PIXEL_PROGRESS_BAR_DEFAULTS = {
+    'id' => 'progress', 'labelPosition' => 'end', 'fontSizeRatio' => 0.07, 'labelOpacity' => 1, 'zIndex' => 0
+  }.freeze
+  PIXEL_RING_PROGRESS_DEFAULTS = { 'min' => 0, 'max' => 100, 'diameter' => 33, 'thickness' => 4, 'startAngle' => 0 }.freeze
+  LABELED_PIXEL_RING_PROGRESS_DEFAULTS = { 'id' => 'ring', 'labelOpacity' => 1, 'zIndex' => 0 }.freeze
+
+  def bar_matrix(value, options)
+    minimum = options['min'].nil? ? 0 : options['min']
+    maximum = options['max'].nil? ? 100 : options['max']
+    Components.range('pixel_progress_bar', minimum, maximum)
+    segments, size, gap = DataValues.fetch_or(options, 'segments', 10), DataValues.fetch_or(options, 'segmentSize', 3), DataValues.fetch_or(options, 'segmentGap', 1)
+    Components.positive('pixel_progress_bar', 'segments', segments)
+    Components.positive('pixel_progress_bar', 'segmentSize', size)
+    raise ArgumentError, 'segmentGap must be non-negative integer' unless Numbers.integer?(gap) && gap >= 0
+    Components.positive('pixel_progress_bar', 'thickness', options['thickness']) if DataValues.set?(options, 'thickness')
+    segments, size, gap = segments.to_i, size.to_i, gap.to_i
+    vertical, reverse = DataValues.fetch_or(options, 'orientation', 'horizontal') == 'vertical', DataValues.fetch_or(options, 'reverse', false)
+    theme = Components.theme(options['theme'])
+    region = Components.region(options, 'pixel_progress_bar')
+    length = segments * size + (segments - 1) * gap
+    across = DataValues.fetch_or(options, 'thickness', region ? nil : 2)
+    dimensions = vertical ? { 'rows' => length, 'columns' => across } : { 'columns' => length, 'rows' => across }
+    plan = Components.grid(region, dimensions, theme, 'pixel_progress_bar')
+    thickness = plan[vertical ? 'columns' : 'rows']
+    looks = Components.looks(theme, DataValues.fetch_or(options, 'colors', {}))
+    matrix_options = theme_options(theme, 'default' => EMPTY, 'layout' => plan['layout'])
+    matrix = Matrix.new(plan['columns'], plan['rows'], matrix_options)
+    lit = Numbers.round(Components.fraction(value, minimum, maximum) * segments)
+    segments.times do |index|
+      slot = vertical != reverse ? segments - 1 - index : index
+      offset = slot * (size + gap)
+      style = looks[index < lit ? 'on' : 'off']
+      vertical ? matrix.rect(0, offset, thickness, size, style) : matrix.rect(offset, 0, size, thickness, style)
+    end
+    matrix
+  end
+  private :bar_matrix
+
+  def pixel_progress_bar(value, options = {})
+    bar_matrix(value, options).to_part
+  end
+
+  def labeled_pixel_progress_bar(value, options)
+    canvas = require_canvas(options['canvas'], 'labeled_pixel_progress_bar')
+    id, path = Components.identity(options, 'progress', 'labeled_pixel_progress_bar')
+    minimum = options['min'].nil? ? 0 : options['min']
+    maximum = options['max'].nil? ? 100 : options['max']
+    Components.range('labeled_pixel_progress_bar', minimum, maximum)
+    theme = Components.theme(options['theme'])
+    vertical = DataValues.fetch_or(options, 'orientation', 'horizontal') == 'vertical'
+    at_end = DataValues.fetch_or(options, 'labelPosition', 'end') == 'end'
+    content = DataValues.fetch_or(options, 'label', percent_label(Components.fraction(value, minimum, maximum)))
+    z = DataValues.fetch_or(options, 'zIndex', 0)
+    area = Components.area(options['frame'], canvas)
+    rect = area.to_pt
+    across = vertical ? Components.font_for_width(content, rect['width']) : rect['height'] / (TEXT_LINE_HEIGHT * LABEL_BOX_LINES)
+    along = vertical ? rect['height'] / (TEXT_LINE_HEIGHT * LABEL_BOX_LINES * LABEL_MAX_SHARE_DIVISOR) : Components.font_for_width(content, rect['width'].fdiv(LABEL_MAX_SHARE_DIVISOR))
+    requested = [Components.font_pt(DataValues.fetch_or(options, 'fontSizeRatio', 0.07), canvas), across, along].min
+    pt = Components.font_pt(Components.font_ratio(requested, canvas), canvas)
+    slot = vertical ? pt * (TEXT_LINE_HEIGHT * LABEL_BOX_LINES) : Components.text_width(content, pt)
+    side = vertical ? (at_end ? 'bottom' : 'top') : (at_end ? 'right' : 'left')
+    bar_box = area.inset_pt(side => slot + pt * 0.4)
+    label_rect = if vertical
+                   { 'x' => rect['x'], 'y' => at_end ? rect['y'] + rect['height'] - slot : rect['y'],
+                     'width' => rect['width'], 'height' => slot }
+                 else
+                   { 'x' => at_end ? rect['x'] + rect['width'] - slot : rect['x'], 'y' => rect['y'],
+                     'width' => slot, 'height' => rect['height'] }
+                 end
+    part = bar_matrix(value, options.merge('frame' => bar_box, 'canvas' => canvas)).to_part
+    placed = place(part, 'id' => id + ':bar', 'frame' => Components.emitted(bar_box, canvas)['frame'],
+                         'path' => path, 'zIndex' => z)
+    horizontal = vertical ? 'center' : (at_end ? 'right' : 'left')
+    label = Components.label(id + ':label', Box.from_pt(label_rect, canvas), content, horizontal, 'center',
+                             Components.font_ratio(pt, canvas),
+                             DataValues.fetch_or(DataValues.fetch_or(options, 'colors', {}), 'label', theme['palette']['on']), 1, z + 1)
+    Components.combine([placed, label])
+  end
+
+  def ring_matrix(value, options)
+    minimum = options['min'].nil? ? 0 : options['min']
+    maximum = options['max'].nil? ? 100 : options['max']
+    Components.range('pixel_ring_progress', minimum, maximum)
+    diameter, thickness = DataValues.fetch_or(options, 'diameter', 33), DataValues.fetch_or(options, 'thickness', 4)
+    start = DataValues.fetch_or(options, 'startAngle', 0)
+    Components.positive('pixel_ring_progress', 'diameter', diameter)
+    Components.positive('pixel_ring_progress', 'thickness', thickness)
+    diameter, thickness = diameter.to_i, thickness.to_i
+    raise ArgumentError, 'Ring diameter must be odd and at least 3' unless diameter >= 3 && diameter.odd?
+    theme = Components.theme(options['theme'])
+    looks = Components.looks(theme, DataValues.fetch_or(options, 'colors', {}))
+    radius = (diameter - 1) / 2
+    matrix = Matrix.new(diameter, diameter, theme_options(theme, 'default' => EMPTY))
+    sweep = Components.fraction(value, minimum, maximum) * 360
+    matrix.arc(radius, radius, radius, 0, 360, looks['off'], 'thickness' => thickness)
+    if sweep > 0
+      a, b = options['counterClockwise'] ? [start - sweep, start] : [start, start + sweep]
+      matrix.arc(radius, radius, radius, a, b, looks['on'], 'thickness' => thickness)
+    end
+    matrix
+  end
+  private :ring_matrix
+
+  def pixel_ring_progress(value, options = {})
+    ring_matrix(value, options).to_part
+  end
+
+  def labeled_pixel_ring_progress(value, options)
+    canvas = require_canvas(options['canvas'], 'labeled_pixel_ring_progress')
+    id, path = Components.identity(options, 'ring', 'labeled_pixel_ring_progress')
+    theme, z = Components.theme(options['theme']), DataValues.fetch_or(options, 'zIndex', 0)
+    minimum = options['min'].nil? ? 0 : options['min']
+    maximum = options['max'].nil? ? 100 : options['max']
+    fraction = Components.fraction(value, minimum, maximum)
+    content = DataValues.fetch_or(options, 'label', percent_label(fraction))
+    area = Components.area(options['frame'], canvas).to_pt
+    side = [area['width'], area['height']].min
+    box = Box.from_pt({ 'x' => area['x'] + (area['width'] - side) / 2.0,
+                        'y' => area['y'] + (area['height'] - side) / 2.0,
+                        'width' => side, 'height' => side }, canvas)
+    ring = Components.emitted(box, canvas)
+    part = ring_matrix(value, options).to_part
+    placed = place(part, 'id' => id + ':ring', 'frame' => ring['frame'], 'path' => path, 'zIndex' => z)
+    diameter = part['content']['pixels'][0].length
+    geometry = fit_matrix(ring['rect'], { 'columns' => diameter, 'rows' => diameter }, part['content']['layout'])
+    center = cell_rect(geometry, (diameter - 1) / 2.0, (diameter - 1) / 2.0)
+    hole = [1, (diameter - 1) / 2.0 - DataValues.fetch_or(options, 'thickness', 4)].max
+    radius = hole * (geometry['cellWidth'] + geometry['gapX'])
+    width, height = 1.6 * radius, 1.2 * radius
+    requested = if DataValues.set?(options, 'fontSizeRatio')
+                  Components.font_pt(options['fontSizeRatio'], canvas)
+                else
+                  [height / (TEXT_LINE_HEIGHT * LABEL_BOX_LINES), Components.font_for_width(content, width)].min
+                end
+    pt = Components.font_pt(Components.font_ratio(requested, canvas), canvas)
+    bw, bh = [width, Components.text_width(content, pt)].max, [height, Components.text_height(pt)].max
+    label_box = Box.from_pt({ 'x' => center['x'] + center['width'] / 2.0 - bw / 2.0,
+                              'y' => center['y'] + center['height'] / 2.0 - bh / 2.0,
+                              'width' => bw, 'height' => bh }, canvas)
+    label = Components.label(id + ':label', label_box, content, 'center', 'center', Components.font_ratio(pt, canvas),
+                             DataValues.fetch_or(DataValues.fetch_or(options, 'colors', {}), 'label', theme['palette']['on']), 1, z + 1)
+    Components.combine([placed, label])
+  end
+end

data/lib/glance_widgets/components/pixel_text.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module GlanceWidgets
+  PIXEL_TEXT_DEFAULTS = { 'font' => '5x7', 'align' => 'center', 'valign' => 'center', 'unlit' => true }.freeze
+
+  module Components
+    def content_matrix(columns, rows, theme)
+      Matrix.new([1, columns].max, [1, rows].max, GlanceWidgets.theme_options(theme, 'default' => EMPTY))
+    end
+
+    def fit_pixel(content, region, options)
+      theme = options.fetch('theme')
+      gap = GAP_MODE_RATIOS.fetch(theme['layout']['gapMode'])
+      cell = [region['width'].fdiv(content.columns + (content.columns - 1) * gap),
+              region['height'].fdiv(content.rows + (content.rows - 1) * gap)].min
+      if DataValues.set?(options, 'maxCellSize')
+        raise ArgumentError, 'maxCellSize must be positive' unless options['maxCellSize'] > 0
+        cell = [cell, options['maxCellSize'] / (1 + gap)].min
+      end
+      count = ->(extent) { Numbers.floor((extent / cell + gap) / (1 + gap) + 1e-9) }
+      columns = [content.columns, count.call(region['width'])].max
+      rows = [content.rows, count.call(region['height'])].max
+      raise ArgumentError, 'Pixel content exceeds 4096 cells' if columns * rows > MAX_MATRIX_CELLS
+      solved = GlanceWidgets.solve_grid('region' => region, 'columns' => columns, 'rows' => rows,
+                                       'gapMode' => theme['layout']['gapMode'])
+      matrix = Matrix.new(columns, rows, GlanceWidgets.theme_options(
+        theme, 'default' => DataValues.fetch_or(options, 'unlit', false) ? theme['default'] : EMPTY, 'layout' => solved['layout']
+      ))
+      offset = lambda do |slack, position, start, finish|
+        position == start ? 0 : (position == finish ? slack : slack.div(2))
+      end
+      matrix.blit(content, offset.call(columns - content.columns, DataValues.fetch_or(options, 'align', 'center'), 'left', 'right'),
+                  offset.call(rows - content.rows, DataValues.fetch_or(options, 'valign', 'center'), 'top', 'bottom'))
+    end
+
+    def pixel_content(content, options)
+      raise ArgumentError, 'Pixel text must not be empty' if content.empty?
+      selected_theme = theme(options['theme'])
+      font = DataValues.fetch_or(options, 'font', '5x7')
+      spacing = options.select { |key, _| %w[monospace letterSpacing lineSpacing].include?(key) }
+      metrics = GlanceWidgets.measure_text(content, font, spacing)
+      matrix = content_matrix(metrics['width'], metrics['height'], selected_theme)
+      drawing = spacing.merge('font' => font, 'boxWidth' => metrics['width'],
+                              'align' => DataValues.fetch_or(options, 'lineAlign', DataValues.fetch_or(options, 'align', 'center')))
+      drawing['style'] = options['color'] if DataValues.set?(options, 'color')
+      matrix.text(content, 0, 0, drawing)
+    end
+
+    def fitted_text(content, region, options)
+      fit_pixel(pixel_content(content, options), region,
+                options.merge('theme' => theme(options['theme']), 'unlit' => DataValues.fetch_or(options, 'unlit', true)))
+    end
+  end
+
+  def pixel_text_panel(content, options)
+    canvas = require_canvas(options['canvas'], 'pixel_text_panel')
+    region = Components.emitted(Components.area(options['frame'], canvas), canvas)['rect']
+    Components.fitted_text(content, region, options).to_part
+  end
+
+  def pixel_text_root(content, options)
+    canvas = require_canvas(options['canvas'], 'pixel_text_root')
+    region = { 'x' => 0, 'y' => 0, 'width' => canvas['width'], 'height' => canvas['height'] }
+    Components.fitted_text(content, region, options).to_root
+  end
+end