outro_rails 0.1.0

data/app/views/outro_rails/chords/show.html.erb

@@ -0,0 +1,24 @@
+<% content_for :title, @chord.symbol %>
+
+<% subtitle = [ @chord.root_name,
+                @chord.quality.humanize.downcase,
+                @chord.extension.presence
+              ].compact.join(" ")
+  %>
+
+<div class="outro outro-container">
+
+  <%= render "outro_rails/shared/header",
+          title: @chord.symbol,
+          subtitle: subtitle
+      %>
+
+  <%= render "outro_rails/shared/breadcrumb", trail: [
+        [ "Outro Home", root_path ],
+        [ "Chord Library", chords_path ],
+        [ @chord.symbol ]
+      ] %>
+
+  <%= render 'outro_rails/chords/chord', chord: @chord %>
+
+</div>

data/app/views/outro_rails/circle_of_fifths/_wheel.html.erb

@@ -0,0 +1,64 @@
+<%# The circle-of-fifths wheel. Locals:
+      positions          - Theory::Key.circle_positions
+      selected_index     - wheel index of the selected key
+      subdominant_index  - wheel index one step counterclockwise
+      dominant_index     - wheel index one step clockwise
+      selected_mode      - :major or :minor (which ring carries highlights) %>
+
+<%
+  size = 380
+  center = size / 2.0
+  rings = { major: [ 122, 184 ], minor: [ 64, 120 ] }
+  wheel_label = "Circle of fifths with " \
+                "#{positions[selected_index].major_label} selected"
+%>
+
+<svg class="outro-circle" viewBox="0 0 <%= size %> <%= size %>" role="img"
+     aria-label="<%= wheel_label %>">
+  <% positions.each_with_index do |position, index| %>
+    <% rings.each do |ring_mode, (inner_radius, outer_radius)| %>
+      <%
+        major = ring_mode == :major
+        key   = major ? position.majors.first : position.minors.first
+        label = major ? position.major_label : position.minor_label
+
+        classes = [ "outro-circle__wedge" ]
+        if ring_mode == selected_mode
+          classes << "is-selected"    if index == selected_index
+          classes << "is-subdominant" if index == subdominant_index
+          classes << "is-dominant"    if index == dominant_index
+        elsif index == selected_index
+          classes << "is-relative"
+        end
+
+        lx, ly = wedge_label_point(center, center, inner_radius,
+                                   outer_radius, index)
+      %>
+      <a href="<%= circle_of_fifths_key_path(key.tonic.path_slug, ring_mode) %>"
+         aria-label="<%= label %>">
+        <path class="<%= classes.join(' ') %>"
+              d="<%= wedge_path(center, center, inner_radius,
+                                outer_radius, index) %>" />
+        <text class="outro-circle__label outro-circle__label--<%= ring_mode %>"
+              x="<%= lx %>" y="<%= ly %>"
+              text-anchor="middle"
+              dominant-baseline="middle"><%= label %></text>
+      </a>
+    <% end %>
+  <% end %>
+</svg>
+
+<p class="outro-circle-legend">
+  <span class="outro-circle-legend__item
+               outro-circle-legend__item--selected">Selected</span>
+  <span class="outro-circle-legend__item
+               outro-circle-legend__item--subdominant">
+    Subdominant (<%= selected_mode == :minor ? "iv" : "IV" %>)
+  </span>
+  <span class="outro-circle-legend__item
+               outro-circle-legend__item--dominant">
+    Dominant (<%= selected_mode == :minor ? "v" : "V" %>)
+  </span>
+  <span class="outro-circle-legend__item
+               outro-circle-legend__item--relative">Relative</span>
+</p>

data/app/views/outro_rails/circle_of_fifths/show.html.erb

@@ -0,0 +1,95 @@
+<% content_for :title, "Circle of Fifths - #{@key}" %>
+
+<%
+  minor = @key.mode == :minor
+  subdominant_degree = minor ? "iv" : "IV"
+  dominant_degree = minor ? "v" : "V"
+%>
+
+<div class="outro outro-container">
+
+  <%= render "outro_rails/shared/header",
+          title: @key,
+          subtitle: "Key signature: #{key_signature_label(@key)}"
+      %>
+
+  <%= render "outro_rails/shared/breadcrumb", trail: [
+        [ "Outro Home", root_path ],
+        [ "Circle of Fifths", circle_of_fifths_path ],
+        [ @key.to_s ]
+      ] %>
+
+  <div class="outro-grid outro-grid--wide">
+    <section class="outro-card">
+      <h2 class="outro-section-heading">Circle of fifths</h2>
+
+      <%= render "wheel",
+            positions: @positions,
+            selected_index: @selected_index,
+            subdominant_index: @subdominant_index,
+            dominant_index: @dominant_index,
+            selected_mode: @key.mode %>
+    </section>
+
+    <section class="outro-card">
+      <h2 class="outro-section-heading">Neighbouring keys</h2>
+
+      <dl class="outro-spec">
+        <dt class="outro-spec__term">
+          Subdominant (<%= subdominant_degree %>)
+        </dt>
+        <dd class="outro-spec__detail">
+          <%= link_to @subdominant.to_s,
+                circle_of_fifths_key_path(@subdominant.tonic.path_slug,
+                                          @subdominant.mode) %>
+        </dd>
+
+        <dt class="outro-spec__term">Dominant (<%= dominant_degree %>)</dt>
+        <dd class="outro-spec__detail">
+          <%= link_to @dominant.to_s,
+                circle_of_fifths_key_path(@dominant.tonic.path_slug,
+                                          @dominant.mode) %>
+        </dd>
+
+        <dt class="outro-spec__term">Relative</dt>
+        <dd class="outro-spec__detail">
+          <%= link_to @key.relative.to_s,
+                circle_of_fifths_key_path(@key.relative.tonic.path_slug,
+                                          @key.relative.mode) %>
+        </dd>
+
+        <dt class="outro-spec__term">Key signature</dt>
+        <dd class="outro-spec__detail"><%= key_signature_label(@key) %></dd>
+      </dl>
+
+      <div class="outro-card__footer">
+        <span class="outro-label" id="scale-instruments-label">
+          See this scale on
+        </span>
+        <div class="outro-chip-row" role="group"
+             aria-labelledby="scale-instruments-label">
+          <% OutroRails::ScalesController::INSTRUMENTS.each do |instrument| %>
+            <% scale_path = instrument_scale_path(
+                 instrument, @scale.root.path_slug, @scale.slug
+               ) %>
+            <%= link_to scale_path,
+                        class: "outro-chip outro-chip--link" do %>
+              <%= image_tag "outro_rails/#{instrument}.svg",
+                    class: "outro-chip__icon", alt: "",
+                    aria: { hidden: true } %>
+              <span class="outro-chip__label">
+                <%= scale_instrument_label(instrument) %>
+              </span>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    </section>
+
+    <%= render "outro_rails/scales/chords_table", scale: @scale %>
+
+    <%= render "outro_rails/scales/related_scales",
+          scale: @scale,
+          instrument: OutroRails::CircleOfFifthsController::LINK_INSTRUMENT %>
+  </div>
+</div>

data/app/views/outro_rails/home/index.html.erb

@@ -0,0 +1,75 @@
+<% content_for :title, 'Outro' %>
+
+<%
+  tools = [
+    {
+      name: 'CAGED Shapes',
+      path: caged_path,
+      image: 'outro_rails/shapes.svg',
+      description: 'Five movable guitar chord shapes that map the ' \
+                   'whole fretboard.'
+    },
+    {
+      name: 'Chord Library',
+      path: chords_path,
+      image: 'outro_rails/library.svg',
+      description: 'Look up common chords and voicings.'
+    },
+    {
+      name: 'Chord Transposer',
+      path: transposer_path,
+      image: 'outro_rails/transposer.svg',
+      description: 'Move a chord chart into another key.'
+    },
+    {
+      name: 'Circle of Fifths',
+      path: circle_of_fifths_path,
+      image: 'outro_rails/circle.svg',
+      description: 'Explore relationships between keys and chords.'
+    },
+    {
+      name: 'Guitar Capo Chart',
+      path: capo_path,
+      image: 'outro_rails/capo.svg',
+      description: 'Pick a capo position to see what each open shape ' \
+                   'actually sounds like.'
+    },
+    {
+      name: 'Instruments',
+      path: instruments_path,
+      image: 'outro_rails/instruments.svg',
+      description: 'Playable diagrams you can click to hear.'
+    },
+    {
+      name: 'Scales',
+      path: scales_path,
+      image: 'outro_rails/scales.svg',
+      description: 'Scale patterns and notes.'
+    }
+  ]
+%>
+
+<div class="outro outro-container">
+  <header class="outro-header">
+    <h1 class="outro-header__title">Outro</h1>
+    <p class="outro-header__byline">Ruminate, Riff, Resolve</p>
+  </header>
+
+  <ul class="outro-grid outro-grid--tools">
+    <% tools.each do |tool| %>
+      <li class="outro-grid__item">
+        <div class="outro-card outro-card--link">
+          <span class="outro-card__media">
+            <%= image_tag tool[:image], alt: '', class: 'outro-card__image' %>
+          </span>
+          <h2 class="outro-card__title"><%= tool[:name] %></h2>
+          <p class="outro-card__description"><%= tool[:description] %></p>
+          <%= link_to 'Open tool',
+                      tool[:path],
+                      class: 'outro-card__cta',
+                      'aria-label': "Open #{tool[:name]}" %>
+        </div>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/app/views/outro_rails/instruments/_guitar.html.erb

@@ -0,0 +1,37 @@
+<% tuning = @tuning || OutroRails::Instruments::Guitar::Tunings.default %>
+
+<section class="outro-card">
+  <h2 class="outro-section-heading">
+    Full fretboard
+    <span class="outro-symbol-list__detail"><%= tuning.label %></span>
+  </h2>
+
+  <div class="outro-panel outro-filters">
+    <%= form_with url: instrument_picker_path, method: :get,
+          class: "outro-picker outro-picker--flush" do %>
+      <%= hidden_field_tag :instrument, @instrument %>
+
+      <label class="outro-picker__field">
+        <span class="outro-label">Tuning</span>
+        <%= select_tag :tuning,
+              options_for_select(guitar_tuning_options, tuning.slug),
+              class: "outro-select",
+              onchange: "this.form.requestSubmit()" %>
+      </label>
+
+      <%# Fallback for keyboard users / no JS; the select auto-submits
+          on change. %>
+      <%= button_tag type: :submit, name: nil,
+        class: "outro-button",
+        "aria-label": "Show Tuning" do %>
+        <%= image_tag "outro_rails/guitar.svg", class: 'outro-button__icon' %>
+        Show Tuning
+      <% end %>
+    <% end %>
+  </div>
+
+  <%= render "outro_rails/instruments/guitar_midi",
+        end_fret: 24,
+        tuning: tuning.notes,
+        prefer: tuning.prefer.to_s %>
+</section>

data/app/views/outro_rails/instruments/_guitar_figure.html.erb

@@ -0,0 +1,145 @@
+<%#
+  Small printable guitar figure. A classic songbook-style chord box
+  (strings as columns, frets as rows) rendered as a static SVG with no
+  controls and no JavaScript. Dots are SVG fills, so they survive
+  printing even when the browser skips background graphics.
+
+  Takes the same locals as instruments/_guitar_midi (all optional):
+    start_fret:      first fret of the window (default 0). 0 or 1 shows
+                     the nut; anything higher shows an "Nfr" label instead.
+    end_fret:        last fret of the window. The box always shows at
+                     least four fret rows and grows to cover every dot.
+    tuning:          open-string notes low to high (default standard)
+    highlight_frets: positions to dot, [string, fret] pairs or
+                     "string:fret" strings (string 1 = highest pitch).
+                     Fret 0 marks the string open (O above the nut);
+                     strings with no position at all are muted (X).
+    highlight_color: any CSS color for the dots (default blue)
+    root_frets:      subset of positions to mark as roots (default [])
+    root_color:      any CSS color for root dots (default red)
+    prefer:          'sharps' or 'flats' for the note labels under the
+                     box (default 'sharps')
+%>
+
+<%
+  complete = lambda do |position|
+    if position.is_a?(String)
+      position.match?(/\A\s*\d+\s*:\s*\d+\s*\z/)
+    else
+      pair = position.respond_to?(:to_a) ? position.to_a : []
+      !pair[0].nil? && !pair[1].nil?
+    end
+  end
+
+  default_tuning  = OutroRails::InstrumentsHelper::GUITAR_STANDARD_TUNING
+  tuning          = local_assigns.fetch(:tuning, default_tuning)
+  highlight_frets = guitar_positions(
+    Array(local_assigns.fetch(:highlight_frets, [])).select(&complete)
+  )
+  highlight_color = local_assigns.fetch(:highlight_color, "#2f6bed")
+  root_frets      = guitar_positions(
+    Array(local_assigns.fetch(:root_frets, [])).select(&complete)
+  )
+  highlight_frets |= root_frets
+  root_color      = local_assigns.fetch(:root_color, "#d1495b")
+  prefer          = local_assigns.fetch(:prefer, "sharps").to_sym
+
+  open_midis   = guitar_open_midis(tuning)   # { 1 => 64, ..., 6 => 40 }
+  strings      = open_midis.keys.sort  # 1 (rightmost col) .. N (leftmost)
+  string_count = strings.size
+
+  fretted    = highlight_frets.map(&:last).select(&:positive?)
+  start_fret = local_assigns.fetch(:start_fret, nil)
+  row_start  =
+    if !start_fret.nil?                     then [start_fret.to_i, 1].max
+    elsif fretted.empty? || fretted.max <= 4 then 1
+    else fretted.min
+    end
+  row_end   = [local_assigns.fetch(:end_fret, nil).to_i,
+               fretted.max.to_i, row_start + 3].max
+  rows      = (row_start..row_end).to_a
+  show_nut  = row_start == 1
+
+  sounded = highlight_frets.group_by(&:first)
+                           .transform_values { |pos| pos.map(&:last).min }
+  roots   = root_frets.to_set
+
+  gap_x, gap_y = 13, 15
+  pad_l  = 8
+  pad_r  = show_nut ? 8 : 30          # room for the "Nfr" label
+  top    = 14                         # O / X row
+  bottom = 12                         # note labels
+  board_w = (string_count - 1) * gap_x
+  width   = pad_l + board_w + pad_r
+  height  = top + (rows.size * gap_y) + bottom
+
+  col_x = ->(string) { pad_l + ((string_count - string) * gap_x) }
+  row_y = ->(fret)   { top + ((fret - row_start) + 0.5) * gap_y }
+
+  frets_label = strings.sort.reverse.map { |s|
+    sounded.key?(s) ? sounded[s] : "x"
+  }.join(" ")
+%>
+
+<svg class="outro-figure__svg outro-figure__svg--guitar"
+     viewBox="0 0 <%= width %> <%= height %>"
+     width="<%= width %>"
+     role="img"
+     aria-label="Guitar chord box, low to high: <%= frets_label %>">
+  <g stroke="currentColor" stroke-opacity="0.75" stroke-width="0.8">
+    <%# strings (vertical) %>
+    <% strings.each do |string| %>
+      <line x1="<%= col_x.call(string) %>" y1="<%= top %>"
+            x2="<%= col_x.call(string) %>"
+            y2="<%= top + rows.size * gap_y %>" />
+    <% end %>
+    <%# frets (horizontal); the top line is drawn separately as nut or fret %>
+    <% (1..rows.size).each do |i| %>
+      <line x1="<%= pad_l %>" y1="<%= top + i * gap_y %>"
+            x2="<%= pad_l + board_w %>" y2="<%= top + i * gap_y %>" />
+    <% end %>
+  </g>
+
+  <% if show_nut %>
+    <rect x="<%= pad_l - 0.5 %>" y="<%= top - 2.5 %>"
+          width="<%= board_w + 1 %>" height="3"
+          fill="currentColor" />
+  <% else %>
+    <line x1="<%= pad_l %>" y1="<%= top %>"
+          x2="<%= pad_l + board_w %>" y2="<%= top %>"
+          stroke="currentColor" stroke-opacity="0.75" stroke-width="0.8" />
+    <text x="<%= pad_l + board_w + 8 %>" y="<%= row_y.call(row_start) + 2.5 %>"
+          font-size="7.5" fill="currentColor"><%= row_start %>fr</text>
+  <% end %>
+
+  <%# O / X above the nut %>
+  <% if highlight_frets.any? %>
+    <% strings.each do |string| %>
+      <text x="<%= col_x.call(string) %>" y="<%= top - 5.5 %>"
+            font-size="7.5" text-anchor="middle" fill="currentColor"
+            fill-opacity="<%= sounded.key?(string) ? 1 : 0.6 %>"><%=
+        if sounded[string] == 0 then "O"
+        elsif !sounded.key?(string) then "X"
+        end
+      %></text>
+    <% end %>
+  <% end %>
+
+  <%# dots %>
+  <% highlight_frets.each do |string, fret| %>
+    <% next unless fret.positive? && fret >= row_start %>
+    <% root = roots.include?([string, fret]) %>
+    <circle cx="<%= col_x.call(string) %>" cy="<%= row_y.call(fret) %>"
+            r="4.4" fill="<%= root ? root_color : highlight_color %>" />
+  <% end %>
+
+  <%# sounded note names under the box %>
+  <% strings.each do |string| %>
+    <% next unless sounded.key?(string) %>
+    <text x="<%= col_x.call(string) %>" y="<%= height - 3 %>"
+          font-size="6.5" text-anchor="middle"
+          fill="currentColor" fill-opacity="0.8"><%=
+      midi_to_note_name(open_midis[string] + sounded[string], prefer: prefer)
+    %></text>
+  <% end %>
+</svg>

data/app/views/outro_rails/instruments/_guitar_midi.html.erb

@@ -0,0 +1,137 @@
+<%#
+  Playable guitar fretboard.
+
+  Locals (all optional):
+    start_fret:       first fret shown (default 0 - includes open strings)
+    end_fret:         last fret shown  (default 12)
+    tuning:           open-string notes low to high
+                      (default %w[E2 A2 D3 G3 B3 E4], standard tuning)
+    highlight_frets:  positions to mark with a dot. Strings are numbered
+                      1 (highest pitch) to 6 (lowest). Accepts [string, fret]
+                      pairs or "string:fret" strings, e.g.
+                      [[5, 3], [4, 2], [3, 0], [2, 1], [1, 0]]  (open C major)
+    highlight_color:  any CSS color for the dots (default blue)
+    root_frets:       subset of positions to mark as roots with a distinct
+                      color, same formats as highlight_frets (default []).
+                      Root positions should also be included in
+                      highlight_frets so playback covers them.
+    root_color:       any CSS color for root dots (default red)
+
+  When highlight_frets is present, "Play Chord" strums all marked notes
+  (lowest first, slightly staggered like a downstroke) and "Play Notes"
+  plays them one at a time, low to high. Every fret is always individually
+  clickable/tappable (Enter/Space works too).
+%>
+
+<%
+  start_fret      = local_assigns.fetch(:start_fret, 0)
+  end_fret        = local_assigns.fetch(:end_fret, 12)
+  default_tuning  = OutroRails::InstrumentsHelper::GUITAR_STANDARD_TUNING
+  tuning          = local_assigns.fetch(:tuning, default_tuning)
+  highlight_frets = guitar_positions(local_assigns.fetch(:highlight_frets, []))
+  highlight_color = local_assigns.fetch(:highlight_color, "#2f6bed")
+  root_frets      = guitar_positions(local_assigns.fetch(:root_frets, []))
+  root_color      = local_assigns.fetch(:root_color, "#d1495b")
+  prefer          = local_assigns.fetch(:prefer, 'sharps')
+
+  start_fret, end_fret = end_fret, start_fret if start_fret > end_fret
+  guitar     = OutroRails::Instruments::Guitar
+  fret_range = guitar::MIN_FRET..guitar::MAX_FRET
+  start_fret = start_fret.clamp(fret_range)
+  end_fret   = end_fret.clamp(fret_range)
+
+  open_midis = guitar_open_midis(tuning)          # { 1 => 64, ..., 6 => 40 }
+  strings    = open_midis.keys.sort     # 1 (top row) .. 6 (bottom row)
+  frets      = (start_fret..end_fret).to_a
+  highlights = highlight_frets.to_set
+  roots      = root_frets.to_set
+
+  # "string:fret:midi" triples for the play buttons.
+  positions_attr = highlight_frets
+    .map { |string, fret| [string, fret, open_midis.fetch(string) + fret] }
+    .map { |triple| triple.join(":") }
+    .join(",")
+
+  single_markers = guitar::SINGLE_MARKER_FRETS
+  double_markers = guitar::DOUBLE_MARKER_FRETS
+
+  board_label = "Guitar fretboard, frets #{start_fret} to #{end_fret}"
+%>
+
+<div class="outro-guitar"
+     data-outro-guitar
+     style="--outro-guitar-highlight: <%= highlight_color %>;
+            --outro-guitar-root: <%= root_color %>;">
+  <div>
+    <div class="outro-guitar__board"
+         role="group"
+         aria-label="<%= board_label %>">
+      <% strings.each do |string| %>
+        <div class="outro-guitar__row"
+             style="--string-size: <%= 1 + (string - 1) * 0.4 %>px;">
+          <span class="outro-guitar__string-label"><%=
+            midi_to_note_name(open_midis[string], prefer: prefer.to_sym)
+          %></span>
+          <% frets.each do |fret| %>
+            <%
+              midi = open_midis[string] + fret
+              note = midi_to_note(midi, prefer: prefer.to_sym)
+              note_name = midi_to_note_name(midi, prefer: prefer.to_sym)
+              highlighted = highlights.include?([string, fret])
+
+              fret_classes = [
+                "outro-guitar__fret",
+                ("outro-guitar__fret--open" if fret.zero?),
+                ("is-highlighted" if highlighted),
+                ("is-root" if roots.include?([string, fret]))
+              ].compact.join(" ")
+
+              where = fret.zero? ? "open" : "fret #{fret}"
+              fret_label = "Play #{note}, string #{string} #{where}"
+            %>
+            <div class="<%= fret_classes %>"
+                 data-guitar-fret
+                 data-string="<%= string %>"
+                 data-fret="<%= fret %>"
+                 data-midi="<%= midi %>"
+                 role="button"
+                 tabindex="0"
+                 aria-label="<%= fret_label %>">
+              <span class="outro-guitar__dot"><%= note_name %></span>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="outro-guitar__numbers" aria-hidden="true">
+      <span class="outro-guitar__number outro-guitar__number--label"></span>
+      <% frets.each do |fret| %>
+        <span class="outro-guitar__number
+                     <%= "outro-guitar__number--open" if fret.zero? %>">
+          <span class="outro-guitar__inlay"><%=
+            if double_markers.include?(fret) then "&#9679; &#9679;".html_safe
+            elsif single_markers.include?(fret) then "&#9679;".html_safe
+            end
+          %></span>
+          <span><%= fret.zero? ? "Open" : fret %></span>
+        </span>
+      <% end %>
+    </div>
+  </div>
+
+  <% if highlight_frets.any? %>
+    <div class="outro-guitar__controls">
+      <button type="button" class="outro-guitar__button"
+              data-guitar-play="chord"
+              data-positions="<%= positions_attr %>">
+        Play Chord
+      </button>
+      <button type="button" class="outro-guitar__button"
+              data-guitar-play="scale"
+              data-positions="<%= positions_attr %>">
+        Play Notes
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/views/outro_rails/instruments/_piano.html.erb

@@ -0,0 +1,9 @@
+<section class="outro-card">
+  <h2 class="outro-section-heading">
+    Full keyboard
+  </h2>
+
+  <%= render "outro_rails/instruments/piano_midi",
+        start_note: 'A1', end_note: 'C8' %>
+
+</section>

data/app/views/outro_rails/instruments/_piano_figure.html.erb

@@ -0,0 +1,82 @@
+<%#
+  Small printable piano figure. A static SVG thumbnail of a voicing,
+  with no controls and no JavaScript. Because the highlights are SVG
+  fills (not CSS backgrounds), they survive printing even when the
+  browser skips background graphics.
+
+  Takes the same locals as instruments/_piano_midi (all optional):
+    start_note:      first key, e.g. "C3"  (default "C3")
+    end_note:        last key,  e.g. "C5"  (default "C5")
+    highlight_keys:  array of note names to highlight, e.g. %w[C4 E4 G4]
+    highlight_color: any CSS color for highlighted keys (default blue)
+    root_keys:       subset of keys to mark as roots (default [])
+    root_color:      any CSS color for root keys (default red)
+    prefer:          'sharps' or 'flats' for spelling (default 'sharps')
+%>
+
+<%
+  start_note      = local_assigns.fetch(:start_note, nil).presence || "C3"
+  end_note        = local_assigns.fetch(:end_note, nil).presence || "C5"
+  highlight_keys  = Array(local_assigns.fetch(:highlight_keys, []))
+  highlight_color = local_assigns.fetch(:highlight_color, "#2f6bed")
+  root_keys       = Array(local_assigns.fetch(:root_keys, []))
+  root_color      = local_assigns.fetch(:root_color, "#d1495b")
+  prefer          = local_assigns.fetch(:prefer, "sharps").to_sym
+
+  keys              = piano_keys_between(start_note, end_note, prefer: prefer)
+  highlighted_midis = highlight_keys.map { |n| note_to_midi(n) }
+  root_midis        = root_keys.map { |n| note_to_midi(n) }
+
+  white_w, white_h = 14, 46      # viewBox units
+  black_w, black_h = 8.5, 28
+
+  whites = []
+  blacks = []
+  white_index = 0
+
+  keys.each do |key|
+    if key[:black]
+      x = (white_index * white_w) - (black_w / 2.0)
+      blacks << key.merge(x: x.clamp(0, Float::INFINITY))
+    else
+      whites << key.merge(x: white_index * white_w)
+      white_index += 1
+    end
+  end
+
+  width = [white_index, 1].max * white_w
+
+  fill_for = lambda do |key|
+    if root_midis.include?(key[:midi]) then root_color
+    elsif highlighted_midis.include?(key[:midi]) then highlight_color
+    elsif key[:black] then "#222222"
+    else "#ffffff"
+    end
+  end
+
+  label =
+    if highlight_keys.any?
+      "Piano voicing: #{highlight_keys.join(', ')}"
+    else
+      "Piano keyboard from #{start_note} to #{end_note}"
+    end
+%>
+
+<svg class="outro-figure__svg outro-figure__svg--piano"
+     viewBox="0 0 <%= width %> <%= white_h %>"
+     width="<%= (width * 0.9).round %>"
+     role="img"
+     aria-label="<%= label %>">
+  <% whites.each do |key| %>
+    <rect x="<%= key[:x] %>" y="0"
+          width="<%= white_w %>" height="<%= white_h %>"
+          rx="1.5" fill="<%= fill_for.call(key) %>"
+          stroke="#444444" stroke-width="0.75" />
+  <% end %>
+  <% blacks.each do |key| %>
+    <rect x="<%= key[:x] %>" y="0"
+          width="<%= black_w %>" height="<%= black_h %>"
+          rx="1.5" fill="<%= fill_for.call(key) %>"
+          stroke="#111111" stroke-width="0.75" />
+  <% end %>
+</svg>