sevgi-showcase 0.73.2 → 0.93.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c2dc7c21825c07ed66a185187025a0fd58969df58105d0d55ba4da7ec3d1f78f
-  data.tar.gz: 53a825990707906e4386cf104b8d83d13d33bd41752496044fd65b1493c1b9cf
+  metadata.gz: 50251e3e573b65b4e4fdaf8731f03af5da849ee270a0765df20a3987c0227d9b
+  data.tar.gz: 68bdb206d1e170ff485784a7ab6caadf1c20f7e2883307cf799b1ea2b205e0c3
 SHA512:
-  metadata.gz: bc0bd992d47b00eac1a4bd65f5835759c04e0b657bcb459109362ee0dab2bad0ec35090ce03223c64a45740f860352c26d56f286945793fb80377886246201f7
-  data.tar.gz: bd1f18ae77d395b4905b233bea49e80e5c2c6c68545847cc0a4b0a4a6668f2a1bcd3edcf9248b45e6613e80a5029399197428b9a801bbc95e7be997195fdf918
+  metadata.gz: bb652c2b35a40a038cb59d5fa19980381c10d497d5c01639d906b0a4704f3ac79ab21db919e117cf82423b3107b21e45055b345da737bcfa8c30cdd19bbb4544
+  data.tar.gz: 13b69afa718368211e58442d31f495cc73b3792e6d9fd294b4d99c884a01feedf7ad996fc30fbeeec7c9bc3ccc858938f8d3b173df9daf27e23a8189d44fb566

data/README.md

@@ -0,0 +1,5 @@
+# Sevgi Showcase
+
+Provides executable examples, rendered outputs, and documentation-site support.
+
+See the root [README](../README.md) and the documentation site for usage.

data/lib/sevgi/showcase/minitest/script.rb

@@ -1,38 +1,70 @@
 # frozen_string_literal: true
 
 module Sevgi
+  # Minitest helpers used by the showcase component.
+  # @api private
   module Test
+    # Executable showcase script descriptor.
+    # @api private
     class Script
+      # @return [String] absolute script path
       attr_reader :file
 
+      # Creates a script descriptor.
+      # @param file [String] executable .sevgi file
+      # @return [void]
+      # @raise [Sevgi::ArgumentError] when the file is missing or not executable
       def initialize(file) = @file = ::File.expand_path(sanitize(file))
 
+      # Returns the script directory.
+      # @return [String]
       def dir = @dir ||= ::File.dirname(file)
 
+      # Returns the script basename.
+      # @return [String]
       def file! = ::File.basename(file)
 
+      # Returns the script name without extension.
+      # @return [String]
       def name = @name ||= ::File.basename(file, ".*")
 
+      # @overload run(*args)
+      #   Runs the script directly.
+      #   @param args [Array<String>] extra command arguments
+      #   @return [Sevgi::Test::Shell::Result]
       def run(*) = Shell.run(file, *)
 
+      # Returns the script suite name.
+      # @return [String]
       def suite = @suite ||= ::File.basename(dir)
 
+      # Reports whether the expected SVG output exists.
+      # @return [Boolean]
       def svg? = ::File.exist?(svg)
 
+      # Returns the expected SVG output path.
+      # @return [String]
       def svg = @svg ||= ::File.expand_path("#{dir}/#{name}.svg")
 
+      # Returns the expected SVG output basename.
+      # @return [String]
       def svg! = ::File.basename(svg)
 
+      # Returns the optional YAML metadata path.
+      # @return [String]
       def yml = @yml ||= ::File.expand_path("#{dir}/#{name}.yml")
 
+      # Returns the optional YAML metadata basename.
+      # @return [String]
       def yml! = ::File.basename(yml)
 
-      # A gross hack to avoid touching filesystem during testing.  Intercept the Save methods to display output in stdout
-      # instead of saving an actual file.
-
+      # @overload run_passive(*args)
+      #   Runs the script without writing Save output to files.
+      #   @param args [Array<String>] extra command arguments
+      #   @return [Sevgi::Test::Shell::Result]
       def run_passive(*)
         warn("...#{name}")
-        Shell.run("sevgi", "-r", "sevgi/showcase/kludge", file, *)
+        Shell.run("sevgi", "-r", "sevgi/showcase/passive", file, *)
       end
 
       private

data/lib/sevgi/showcase/minitest/shell.rb

@@ -3,26 +3,49 @@
 require "open3"
 
 module Sevgi
+  # Minitest helpers used by the showcase component.
+  # @api private
   module Test
+    # Shell runner helpers for showcase tests.
+    # @api private
     module Shell
+      # Shell command result.
+      # @api private
       Result = Data.define(:args, :out, :err, :exit_code) do
+        # Returns the command string.
+        # @return [String]
         def cmd = args.join(" ")
 
+        # Reports whether the command failed.
+        # @return [Boolean]
         def notok? = !ok?
 
+        # Reports whether the command exited successfully.
+        # @return [Boolean]
         def ok? = exit_code&.zero?
 
+        # Returns the first stdout line.
+        # @return [String, nil]
         def outline = out.first
 
+        # Returns stdout as a newline-joined string.
+        # @return [String]
         def to_s = out.join("\n")
       end
 
       # Adapted to popen3 from github.com/mina-deploy/mina
+      # Shell command runner.
+      # @api private
       class Runner
+        # Creates a runner.
+        # @return [void]
         def initialize
           @coathooks = 0
         end
 
+        # Runs a command and captures stdout, stderr, and exit status.
+        # @param args [Array<String>] command and arguments
+        # @return [Sevgi::Test::Shell::Result]
         def run(*args, &block)
           out, err, status = Open3.popen3(*args) do |stdin, stdout, stderr, thread|
             inputs(stdin, thread, &block) if block
@@ -41,12 +64,14 @@ module Sevgi
 
         def outputs(stdout, stderr, thread)
           # handle `^C`
-          trap("INT") { handle_sigint(thread.pid) }
+          trap = trap("INT") { handle_sigint(thread.pid) }
 
-          out = stdout.readlines.map(&:chomp)
-          err = stderr.readlines.map(&:chomp)
+          out = Thread.new { stdout.readlines.map(&:chomp) }
+          err = Thread.new { stderr.readlines.map(&:chomp) }
 
-          [out, err, thread.value]
+          [out.value, err.value, thread.value]
+        ensure
+          trap("INT", trap) if trap
         end
 
         def handle_sigint(pid)
@@ -66,6 +91,10 @@ module Sevgi
 
       extend self
 
+      # @overload run(*args)
+      #   Runs a command through a fresh runner.
+      #   @param args [Array<String>] command and arguments
+      #   @return [Sevgi::Test::Shell::Result]
       def run(...) = Runner.new.run(...)
     end
   end

data/lib/sevgi/showcase/minitest/suite.rb

@@ -1,26 +1,43 @@
 # frozen_string_literal: true
 
 module Sevgi
+  # Minitest helpers used by the showcase component.
+  # @api private
   module Test
+    # Showcase script suite collection.
+    # @api private
     class Suite
+      # Creates a suite from a showcase root directory.
+      # @param rootdir [String] showcase root directory
+      # @return [void]
       def initialize(rootdir)
         @scripts = load(rootdir)
       end
 
+      # Returns scripts belonging to a suite.
+      # @param suite [String, Symbol] suite name
+      # @return [Array<Sevgi::Test::Script>]
       def [](suite)
         (@cache ||= {})[suite] ||= @scripts.select { |script| script.suite == suite.to_s }
       end
 
+      # Returns all suite names.
+      # @return [Array<String>]
       def suites
         @suites ||= @scripts.map(&:suite).uniq
       end
 
+      # Suite names that are expected to be invalid examples.
       NON_VALIDS = ["gotcha"].freeze
 
+      # Returns scripts expected to be invalid.
+      # @return [Array<Sevgi::Test::Script>]
       def non_valids
         NON_VALIDS.map { self[it] }.flatten
       end
 
+      # Returns scripts expected to render successfully.
+      # @return [Array<Sevgi::Test::Script>]
       def valids
         suites.reject { NON_VALIDS.include?(it) }.map { self[it] }.flatten
       end

data/lib/sevgi/showcase/passive.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Sevgi
+  module Graphics
+    module Document
+      class Base
+        # @overload Save(*args, **kwargs)
+        #   Redirects showcase saves to stdout during passive integration tests.
+        #   @param args [Array<Object>] ignored save arguments
+        #   @param kwargs [Hash] render options
+        #   @return [Object] F.out return value
+        #   @api private
+        def Save(*, **) = Out(**)
+
+        # @overload Save!(*args, **kwargs)
+        #   Redirects forced showcase saves to stdout during passive integration tests.
+        #   @param args [Array<Object>] ignored save arguments
+        #   @param kwargs [Hash] render options
+        #   @return [Object] F.out return value
+        #   @api private
+        def Save!(...) = Save(...)
+      end
+    end
+  end
+end

data/lib/sevgi/showcase/version.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 module Sevgi
+  # Showcase component namespace.
   module Showcase
-    VERSION = "0.73.2"
+    # Current showcase component version.
+    VERSION = "0.93.1"
   end
 end

data/srv/checker-board.sevgi

@@ -0,0 +1,96 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+class CheckerBoard
+  BOARD_MARGIN = 50
+  CELL_SIZE = 100
+  PIECE_SIZE = 80
+
+  STYLE = {
+    ".board-frame" => { fill: "#d1bfa7", stroke: "#6a3f2b" },
+    ".inner-frame" => {
+      fill: "#6a3f2b",
+      stroke: "#6a3f2b",
+      "stroke-width": (BOARD_MARGIN * 0.7).round
+    },
+    ".cell" => { stroke: "white", "stroke-width": 1 },
+    ".light.cell" => { fill: "#d4a76f" },
+    ".dark.cell" => { fill: "#6a3f2b" },
+    ".piece" => {
+      filter: "drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.5))",
+      stroke: "none"
+    },
+    ".light.piece" => { fill: "#f5f5f5" },
+    ".dark.piece" => { fill: "#333" }
+  }.freeze
+
+  def initialize
+    @pieces = []
+  end
+
+  def width = (CELL_SIZE * 8) + (BOARD_MARGIN * 2)
+
+  def height = width
+
+  def view_box = "0 0 #{width} #{height}"
+
+  def add_piece(row, col, dark: false)
+    @pieces << [row, col, dark]
+  end
+
+  def render_on(svg)
+    svg.css STYLE
+    add_frame(svg)
+    add_cells(svg)
+    add_pieces(svg)
+  end
+
+  private
+
+  def add_frame(svg)
+    svg.rect class: "board-frame", x: 0, y: 0, width: width, height: height
+    svg.rect class: "inner-frame", x: BOARD_MARGIN, y: BOARD_MARGIN,
+             width: width - (BOARD_MARGIN * 2),
+             height: height - (BOARD_MARGIN * 2)
+  end
+
+  def add_cells(svg)
+    8.times do |row|
+      8.times do |col|
+        svg.rect class: "#{(row + col).even? ? "dark" : "light"} cell",
+                 x: (col * CELL_SIZE) + BOARD_MARGIN,
+                 y: (row * CELL_SIZE) + BOARD_MARGIN,
+                 width: CELL_SIZE,
+                 height: CELL_SIZE
+      end
+    end
+  end
+
+  def add_pieces(svg)
+    @pieces.each do |row, col, dark|
+      x = (col * CELL_SIZE) + BOARD_MARGIN + 10
+      y = (row * CELL_SIZE) + BOARD_MARGIN + 10
+
+      svg.circle class: "#{dark ? "dark" : "light"} piece",
+                 cx: x + (PIECE_SIZE / 2),
+                 cy: y + (PIECE_SIZE / 2),
+                 r: PIECE_SIZE / 2
+    end
+  end
+end
+
+board = CheckerBoard.new
+
+[1, 3, 5, 7].each do |col|
+  board.add_piece 0, col, dark: true
+  board.add_piece 6, col, dark: false
+end
+
+[0, 2, 4, 6].each do |col|
+  board.add_piece 1, col, dark: true
+  board.add_piece 7, col, dark: false
+end
+
+SVG :minimal, viewBox: board.view_box do
+  board.render_on(self)
+end.Save

data/srv/checker-board.svg

@@ -0,0 +1,117 @@
+<svg viewBox="0 0 900 900">
+  <style type="text/css">
+    <![CDATA[
+      .board-frame {
+        fill: #d1bfa7;
+        stroke: #6a3f2b;
+      }
+      .inner-frame {
+        fill: #6a3f2b;
+        stroke: #6a3f2b;
+        stroke-width: 35;
+      }
+      .cell {
+        stroke: white;
+        stroke-width: 1;
+      }
+      .light.cell {
+        fill: #d4a76f;
+      }
+      .dark.cell {
+        fill: #6a3f2b;
+      }
+      .piece {
+        filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.5));
+        stroke: none;
+      }
+      .light.piece {
+        fill: #f5f5f5;
+      }
+      .dark.piece {
+        fill: #333;
+      }
+    ]]>
+  </style>
+  <rect class="board-frame" x="0" y="0" width="900" height="900"/>
+  <rect class="inner-frame" x="50" y="50" width="800" height="800"/>
+  <rect class="dark cell" x="50" y="50" width="100" height="100"/>
+  <rect class="light cell" x="150" y="50" width="100" height="100"/>
+  <rect class="dark cell" x="250" y="50" width="100" height="100"/>
+  <rect class="light cell" x="350" y="50" width="100" height="100"/>
+  <rect class="dark cell" x="450" y="50" width="100" height="100"/>
+  <rect class="light cell" x="550" y="50" width="100" height="100"/>
+  <rect class="dark cell" x="650" y="50" width="100" height="100"/>
+  <rect class="light cell" x="750" y="50" width="100" height="100"/>
+  <rect class="light cell" x="50" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="150" y="150" width="100" height="100"/>
+  <rect class="light cell" x="250" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="350" y="150" width="100" height="100"/>
+  <rect class="light cell" x="450" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="550" y="150" width="100" height="100"/>
+  <rect class="light cell" x="650" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="750" y="150" width="100" height="100"/>
+  <rect class="dark cell" x="50" y="250" width="100" height="100"/>
+  <rect class="light cell" x="150" y="250" width="100" height="100"/>
+  <rect class="dark cell" x="250" y="250" width="100" height="100"/>
+  <rect class="light cell" x="350" y="250" width="100" height="100"/>
+  <rect class="dark cell" x="450" y="250" width="100" height="100"/>
+  <rect class="light cell" x="550" y="250" width="100" height="100"/>
+  <rect class="dark cell" x="650" y="250" width="100" height="100"/>
+  <rect class="light cell" x="750" y="250" width="100" height="100"/>
+  <rect class="light cell" x="50" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="150" y="350" width="100" height="100"/>
+  <rect class="light cell" x="250" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="350" y="350" width="100" height="100"/>
+  <rect class="light cell" x="450" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="550" y="350" width="100" height="100"/>
+  <rect class="light cell" x="650" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="750" y="350" width="100" height="100"/>
+  <rect class="dark cell" x="50" y="450" width="100" height="100"/>
+  <rect class="light cell" x="150" y="450" width="100" height="100"/>
+  <rect class="dark cell" x="250" y="450" width="100" height="100"/>
+  <rect class="light cell" x="350" y="450" width="100" height="100"/>
+  <rect class="dark cell" x="450" y="450" width="100" height="100"/>
+  <rect class="light cell" x="550" y="450" width="100" height="100"/>
+  <rect class="dark cell" x="650" y="450" width="100" height="100"/>
+  <rect class="light cell" x="750" y="450" width="100" height="100"/>
+  <rect class="light cell" x="50" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="150" y="550" width="100" height="100"/>
+  <rect class="light cell" x="250" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="350" y="550" width="100" height="100"/>
+  <rect class="light cell" x="450" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="550" y="550" width="100" height="100"/>
+  <rect class="light cell" x="650" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="750" y="550" width="100" height="100"/>
+  <rect class="dark cell" x="50" y="650" width="100" height="100"/>
+  <rect class="light cell" x="150" y="650" width="100" height="100"/>
+  <rect class="dark cell" x="250" y="650" width="100" height="100"/>
+  <rect class="light cell" x="350" y="650" width="100" height="100"/>
+  <rect class="dark cell" x="450" y="650" width="100" height="100"/>
+  <rect class="light cell" x="550" y="650" width="100" height="100"/>
+  <rect class="dark cell" x="650" y="650" width="100" height="100"/>
+  <rect class="light cell" x="750" y="650" width="100" height="100"/>
+  <rect class="light cell" x="50" y="750" width="100" height="100"/>
+  <rect class="dark cell" x="150" y="750" width="100" height="100"/>
+  <rect class="light cell" x="250" y="750" width="100" height="100"/>
+  <rect class="dark cell" x="350" y="750" width="100" height="100"/>
+  <rect class="light cell" x="450" y="750" width="100" height="100"/>
+  <rect class="dark cell" x="550" y="750" width="100" height="100"/>
+  <rect class="light cell" x="650" y="750" width="100" height="100"/>
+  <rect class="dark cell" x="750" y="750" width="100" height="100"/>
+  <circle class="dark piece" cx="200" cy="100" r="40"/>
+  <circle class="light piece" cx="200" cy="700" r="40"/>
+  <circle class="dark piece" cx="400" cy="100" r="40"/>
+  <circle class="light piece" cx="400" cy="700" r="40"/>
+  <circle class="dark piece" cx="600" cy="100" r="40"/>
+  <circle class="light piece" cx="600" cy="700" r="40"/>
+  <circle class="dark piece" cx="800" cy="100" r="40"/>
+  <circle class="light piece" cx="800" cy="700" r="40"/>
+  <circle class="dark piece" cx="100" cy="200" r="40"/>
+  <circle class="light piece" cx="100" cy="800" r="40"/>
+  <circle class="dark piece" cx="300" cy="200" r="40"/>
+  <circle class="light piece" cx="300" cy="800" r="40"/>
+  <circle class="dark piece" cx="500" cy="200" r="40"/>
+  <circle class="light piece" cx="500" cy="800" r="40"/>
+  <circle class="dark piece" cx="700" cy="200" r="40"/>
+  <circle class="light piece" cx="700" cy="800" r="40"/>
+</svg>

data/srv/checker-board.yml

@@ -0,0 +1,6 @@
+dark:
+  "#d1bfa7": "#705f4b"
+  "#d4a76f": "#b88a55"
+  "#6a3f2b": "#d3a778"
+  "#333": "#161616"
+  "#f5f5f5": "#e8e2dc"

data/srv/gear-wheel.sevgi

@@ -0,0 +1,22 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+GEAR_STYLE = {
+  fill: "#333",
+  stroke: "none"
+}.freeze
+
+SVG :minimal, viewBox: "0 0 100 100", style: { background: "lightgreen" } do
+  mask id: "hole" do
+    rect x: 0, y: 0, width: 100, height: 100, fill: "white"
+    circle cx: 50, cy: 50, r: 15, fill: "black"
+  end
+
+  circle cx: 50, cy: 50, r: 30, mask: "url(#hole)", **GEAR_STYLE
+
+  [0, 45, 90, 135].each do |angle|
+    rect x: 45, y: 10, width: 10, height: 80,
+         mask: "url(#hole)", transform: "rotate(#{angle} 50 50)",
+         **GEAR_STYLE
+  end
+end.Save

data/srv/gear-wheel.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 100 100" style="background:lightgreen">
+  <mask id="hole">
+    <rect x="0" y="0" width="100" height="100" fill="white"/>
+    <circle cx="50" cy="50" r="15" fill="black"/>
+  </mask>
+  <circle cx="50" cy="50" r="30" mask="url(#hole)" fill="#333" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" mask="url(#hole)" transform="rotate(0 50 50)" fill="#333" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" mask="url(#hole)" transform="rotate(45 50 50)" fill="#333" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" mask="url(#hole)" transform="rotate(90 50 50)" fill="#333" stroke="none"/>
+  <rect x="45" y="10" width="10" height="80" mask="url(#hole)" transform="rotate(135 50 50)" fill="#333" stroke="none"/>
+</svg>

data/srv/gear-wheel.yml

@@ -0,0 +1,3 @@
+dark:
+  "#333": "#e5c39c"
+  lightgreen: "#1f3522"

data/srv/grid-cells.sevgi

@@ -0,0 +1,20 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+CELL_SIZE = 20
+COLORS = %w[#FF6961 #77DD77 #FFD700].freeze
+COLS = 8
+ROWS = 3
+
+SVG :minimal, viewBox: "0 0 #{COLS * CELL_SIZE} #{ROWS * CELL_SIZE}" do
+  css ".cell" => { stroke: "white", rx: (CELL_SIZE * 0.1).round }
+
+  COLS.times do |col|
+    ROWS.times do |row|
+      rect class: "cell",
+           x: col * CELL_SIZE, y: row * CELL_SIZE,
+           width: CELL_SIZE, height: CELL_SIZE,
+           fill: COLORS[(col + row) % COLORS.length]
+    end
+  end
+end.Save

data/srv/grid-cells.svg

@@ -0,0 +1,34 @@
+<svg viewBox="0 0 160 60">
+  <style type="text/css">
+    <![CDATA[
+      .cell {
+        stroke: white;
+        rx: 2;
+      }
+    ]]>
+  </style>
+  <rect class="cell" x="0" y="0" width="20" height="20" fill="#FF6961"/>
+  <rect class="cell" x="0" y="20" width="20" height="20" fill="#77DD77"/>
+  <rect class="cell" x="0" y="40" width="20" height="20" fill="#FFD700"/>
+  <rect class="cell" x="20" y="0" width="20" height="20" fill="#77DD77"/>
+  <rect class="cell" x="20" y="20" width="20" height="20" fill="#FFD700"/>
+  <rect class="cell" x="20" y="40" width="20" height="20" fill="#FF6961"/>
+  <rect class="cell" x="40" y="0" width="20" height="20" fill="#FFD700"/>
+  <rect class="cell" x="40" y="20" width="20" height="20" fill="#FF6961"/>
+  <rect class="cell" x="40" y="40" width="20" height="20" fill="#77DD77"/>
+  <rect class="cell" x="60" y="0" width="20" height="20" fill="#FF6961"/>
+  <rect class="cell" x="60" y="20" width="20" height="20" fill="#77DD77"/>
+  <rect class="cell" x="60" y="40" width="20" height="20" fill="#FFD700"/>
+  <rect class="cell" x="80" y="0" width="20" height="20" fill="#77DD77"/>
+  <rect class="cell" x="80" y="20" width="20" height="20" fill="#FFD700"/>
+  <rect class="cell" x="80" y="40" width="20" height="20" fill="#FF6961"/>
+  <rect class="cell" x="100" y="0" width="20" height="20" fill="#FFD700"/>
+  <rect class="cell" x="100" y="20" width="20" height="20" fill="#FF6961"/>
+  <rect class="cell" x="100" y="40" width="20" height="20" fill="#77DD77"/>
+  <rect class="cell" x="120" y="0" width="20" height="20" fill="#FF6961"/>
+  <rect class="cell" x="120" y="20" width="20" height="20" fill="#77DD77"/>
+  <rect class="cell" x="120" y="40" width="20" height="20" fill="#FFD700"/>
+  <rect class="cell" x="140" y="0" width="20" height="20" fill="#77DD77"/>
+  <rect class="cell" x="140" y="20" width="20" height="20" fill="#FFD700"/>
+  <rect class="cell" x="140" y="40" width="20" height="20" fill="#FF6961"/>
+</svg>

data/srv/grid-cells.yml

@@ -0,0 +1,4 @@
+dark:
+  "#FF6961": "#f27b72"
+  "#77DD77": "#7fdc9c"
+  "#FFD700": "#f1c95b"

data/srv/heart-mask.sevgi

@@ -0,0 +1,14 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+HEART_PATH = "M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
+
+SVG :minimal, viewBox: "-10 -10 120 120" do
+  mask id: "heart" do
+    rect x: 0, y: 0, width: 100, height: 100, fill: "white"
+    path d: HEART_PATH, fill: "black"
+  end
+
+  polygon points: %w[-10,120 120,120 120,-10], fill: "orange"
+  circle cx: 50, cy: 50, r: 50, mask: "url(#heart)", fill: "red"
+end.Save

data/srv/heart-mask.svg

@@ -0,0 +1,8 @@
+<svg viewBox="-10 -10 120 120">
+  <mask id="heart">
+    <rect x="0" y="0" width="100" height="100" fill="white"/>
+    <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black"/>
+  </mask>
+  <polygon points="-10,120 120,120 120,-10" fill="orange"/>
+  <circle cx="50" cy="50" r="50" mask="url(#heart)" fill="red"/>
+</svg>

data/srv/heart-mask.yml

@@ -0,0 +1,3 @@
+dark:
+  orange: "#f2b35d"
+  red: "#e8505b"

data/srv/meter-face.sevgi

@@ -0,0 +1,20 @@
+#!/usr/bin/env -S ruby -S sevgi
+# frozen_string_literal: true
+
+LED_COUNT = 10
+LED_GAP = 2
+LED_WIDTH = 10
+TOTAL_WIDTH = (LED_COUNT * (LED_WIDTH + LED_GAP)) + 8
+
+SVG :minimal, viewBox: "0 0 #{TOTAL_WIDTH} 30" do
+  rect x: 2, y: 2, width: TOTAL_WIDTH - 4, height: 26,
+       rx: 4, fill: "none", stroke: "#666"
+
+  x = 5
+  LED_COUNT.times do |i|
+    rect x:, y: 5, width: LED_WIDTH, height: 20,
+         rx: 3, fill: "green", "fill-opacity": (i < 7 ? 1 : 0.3)
+
+    x += LED_WIDTH + LED_GAP
+  end
+end.Save

data/srv/meter-face.svg

@@ -0,0 +1,13 @@
+<svg viewBox="0 0 128 30">
+  <rect x="2" y="2" width="124" height="26" rx="4" fill="none" stroke="#666"/>
+  <rect x="5" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="17" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="29" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="41" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="53" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="65" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="77" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="1"/>
+  <rect x="89" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="0.3"/>
+  <rect x="101" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="0.3"/>
+  <rect x="113" y="5" width="10" height="20" rx="3" fill="green" fill-opacity="0.3"/>
+</svg>