janela 0.8.0 → 0.9.0

data/docs/multi-tenancy.md

@@ -149,6 +149,28 @@ save failed silently. `bin/rails janela:doctor` reports this for you:
 it asks your policy for a scope over frames and looks for an owner in
 what comes back.
 
+### A frame of your own for a page
+
+Your code finds a frame it keeps for one of its pages by owner and key
+(ADR 041):
+
+```ruby
+Janela::Frame.for(Current.account, :overview)
+Janela::Frame.for(queue, :analytics) { |frame| frame.name = "#{queue.name} analytics" }
+```
+
+When the owner is the tenant, nothing changes in your policy. When it is
+one of your own records, such as the queue above, the frame belongs to
+the tenant through that record, and your scope has to say so or the
+frame is hidden from the people it was made for:
+
+```ruby
+def resolve
+  scope.where(owner: Current.account)
+       .or(scope.where(owner_type: "Queue", owner_id: Current.account.queues.select(:id)))
+end
+```
+
 ## Snapshots
 
 A snapshot carries the same polymorphic owner a frame does, so your

data/docs/naming.md

@@ -44,6 +44,13 @@ from the thing itself rather than from a list of synonyms for "chart".
 | **Query** | The runtime object that calculates one pane | Not a window word, on purpose. It is an implementation detail rather than something a person arranges, so it gets the plain name for what it does. |
 | **Grid** | How a frame is divided: `columns`, `gap`, and each pane's `span` | A window is divided into panes, and the grid is the division. Small integers that choose a class the stylesheet already defines, so nothing an analyst types reaches CSS (ADR 016). |
 | **Vitral** | The optional stained glass theme | A stained glass window, in the same language. See ADR 023. |
+| **Vista** | The roadmap | The view through the window. What you can see from here is also what is ahead: *outlook* and *prospect* carry the same double meaning in English, and this one carries it in Portuguese. |
+| **Horizonte** | The roadmap's far half: wanted, not blocking a release | The horizon is the edge of what you can see. Work still in sight, as against work that is not in the picture at all. |
+
+The last two are a step away from anatomy. A window's parts name the
+things a host arranges; what you see through it names the things the
+project has not built yet. Both halves come from the same object, which
+is the point of picking an object rather than a list of synonyms.
 
 The anatomy was argued over before it was settled. *Sash* was
 considered for the dashboard and rejected: a sash is one layer inside a

data/docs/roadmap.md

@@ -2,7 +2,125 @@
 Topics: roadmap, releases, scope, planning
 ---
 
-# Where Janela Is Going
+# Vista
+
+<p style="text-align: center;">Vista shows where Janela is heading.</p>
+
+<svg viewBox="0 0 680 360" width="100%" role="img" aria-labelledby="vista-title vista-desc" class="vista-art" style="display: block; margin: 1.75rem 0; border-radius: 10px;">
+  <title id="vista-title">Vista</title>
+  <desc id="vista-desc">Sea and sky with a horizon across them. Eight lights burn on the near water, one for each issue in 1.0, and three sit far off at the horizon for the work still in sight past it. A low sun rises and sets on the horizon as the pointer moves up and down, and never climbs higher: the sky above is empty, because what is not coming is not in view.</desc>
+
+  <style>
+    .vista-art .v-far { transform: translate3d(calc(var(--vitral-shift-x, 0) * 13px), calc(var(--vitral-shift-y, 0) * 7px), 0); transition: transform .45s cubic-bezier(.2,.7,.3,1); }
+    .vista-art .v-mid { transform: translate3d(calc(var(--vitral-shift-x, 0) * 6px), calc(var(--vitral-shift-y, 0) * 3px), 0); transition: transform .45s cubic-bezier(.2,.7,.3,1); }
+    .vista-art .v-near { transform: translate3d(calc(var(--vitral-shift-x, 0) * -8px), calc(var(--vitral-shift-y, 0) * -4px), 0); transition: transform .45s cubic-bezier(.2,.7,.3,1); }
+    .vista-art .v-glow-a { opacity: calc(.6 - var(--vitral-shift-x, 0) * 1.2); transform: translate3d(calc(var(--vitral-shift-x, 0) * -40px), calc(var(--vitral-shift-y, 0) * 16px), 0); transition: transform .9s cubic-bezier(.2,.7,.3,1), opacity .9s ease; }
+    .vista-art .v-glow-b { opacity: calc(.6 + var(--vitral-shift-x, 0) * 1.2); transform: translate3d(calc(var(--vitral-shift-x, 0) * 44px), calc(var(--vitral-shift-y, 0) * -14px), 0); transition: transform .9s cubic-bezier(.2,.7,.3,1), opacity .9s ease; }
+    .vista-art .v-sun { transform: translate3d(calc(var(--vitral-shift-x, 0) * 10px), calc(var(--vitral-shift-y, 0) * 84px), 0); transition: transform 1.1s cubic-bezier(.2,.7,.3,1); }
+    .vista-art .v-glint { opacity: calc(.45 - var(--vitral-shift-y, 0) * .9); transform: translate3d(calc(var(--vitral-shift-x, 0) * 10px), 0, 0); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.3,1); }
+    @media (prefers-reduced-motion: reduce) {
+      .vista-art .v-sun, .vista-art .v-glint { transform: none; opacity: .45; }
+      .vista-art .v-far, .vista-art .v-mid, .vista-art .v-near, .vista-art .v-glow-a, .vista-art .v-glow-b { transform: none; opacity: .6; }
+    }
+  </style>
+
+  <defs>
+    <clipPath id="vFrame"><rect x="0" y="0" width="680" height="360" rx="10"/></clipPath>
+    <clipPath id="vAbove"><rect x="0" y="0" width="680" height="196"/></clipPath>
+    <radialGradient id="vSun">
+      <stop offset="0" stop-color="#FFF4D6" stop-opacity="0.95"/>
+      <stop offset="0.7" stop-color="#FFD58A" stop-opacity="0.9"/>
+      <stop offset="1" stop-color="#F7A96B" stop-opacity="0.75"/>
+    </radialGradient>
+    <radialGradient id="vSunHalo">
+      <stop offset="0" stop-color="#FFD98F" stop-opacity="0.5"/>
+      <stop offset="1" stop-color="#F7A96B" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="vSky" x1="0" y1="0" x2="0.22" y2="1">
+      <stop offset="0" stop-color="#5B49C9" stop-opacity="0.54"/>
+      <stop offset="0.38" stop-color="#8A6EE4" stop-opacity="0.34"/>
+      <stop offset="0.7" stop-color="#E06082" stop-opacity="0.29"/>
+      <stop offset="1" stop-color="#F0B046" stop-opacity="0.46"/>
+    </linearGradient>
+    <linearGradient id="vSea" x1="0" y1="0" x2="0.08" y2="1">
+      <stop offset="0" stop-color="#F0B046" stop-opacity="0.34"/>
+      <stop offset="0.22" stop-color="#1CA89E" stop-opacity="0.38"/>
+      <stop offset="1" stop-color="#132F5C" stop-opacity="0.78"/>
+    </linearGradient>
+    <radialGradient id="vLamp">
+      <stop offset="0" stop-color="#FFE9B8" stop-opacity="0.78"/>
+      <stop offset="1" stop-color="#FFD98F" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="vP1"><stop offset="0" stop-color="#367AEB" stop-opacity="0.6"/><stop offset="1" stop-color="#367AEB" stop-opacity="0"/></radialGradient>
+    <radialGradient id="vP2"><stop offset="0" stop-color="#1CA89E" stop-opacity="0.30"/><stop offset="1" stop-color="#1CA89E" stop-opacity="0"/></radialGradient>
+    <radialGradient id="vP3"><stop offset="0" stop-color="#E06082" stop-opacity="0.5"/><stop offset="1" stop-color="#E06082" stop-opacity="0"/></radialGradient>
+  </defs>
+
+  <g clip-path="url(#vFrame)">
+    <g class="v-far">
+      <rect x="-30" y="-30" width="740" height="256" fill="url(#vSky)"/>
+      <ellipse class="v-glow-a" cx="150" cy="104" rx="230" ry="132" fill="url(#vP1)"/>
+      <ellipse class="v-glow-b" cx="520" cy="140" rx="250" ry="100" fill="url(#vP3)"/>
+    </g>
+
+    <g clip-path="url(#vAbove)">
+      <g class="v-sun">
+        <circle cx="432" cy="192" r="96" fill="url(#vSunHalo)"/>
+        <circle cx="432" cy="192" r="24" fill="url(#vSun)"/>
+      </g>
+    </g>
+    <g class="v-mid">
+      <rect x="-30" y="196" width="740" height="204" fill="url(#vSea)"/>
+      <ellipse cx="580" cy="288" rx="220" ry="124" fill="url(#vP2)"/>
+      <path d="M6 200.0 h18 M46 200.0 h18 M80 200.0 h11 M145 200.0 h9 M173 200.0 h8 M204 200.0 h22 M235 200.0 h7 M266 200.0 h18 M305 200.0 h19 M339 200.0 h23 M372 200.0 h30 M424 200.0 h24 M490 200.0 h16 M519 200.0 h30 M555 200.0 h12 M581 200.0 h30 M618 200.0 h22 M650 200.0 h9" stroke="#FFF3DA" stroke-opacity="0.28" stroke-width="1" stroke-linecap="round"/>
+      <path d="M74 204.2 h12 M100 204.2 h12 M195 204.2 h28 M245 204.2 h13 M384 204.2 h10 M404 204.2 h23 M441 204.2 h31 M527 204.2 h30 M568 204.2 h12 M604 204.2 h12 M639 204.2 h23 M669 204.2 h8" stroke="#FFF3DA" stroke-opacity="0.28" stroke-width="1" stroke-linecap="round"/>
+      <path d="M127 209.4 h23 M169 209.4 h16 M278 209.4 h32 M329 209.4 h27 M398 209.4 h27 M431 209.4 h25 M477 209.4 h17 M501 209.4 h23 M548 209.4 h28 M598 209.4 h33 M650 209.4 h32" stroke="#FFF3DA" stroke-opacity="0.27" stroke-width="1" stroke-linecap="round"/>
+      <path d="M6 215.8 h32 M56 215.8 h27 M148 215.8 h38 M208 215.8 h20 M247 215.8 h22 M370 215.8 h23 M487 215.8 h35 M538 215.8 h35 M593 215.8 h15 M631 215.8 h36" stroke="#FFF3DA" stroke-opacity="0.26" stroke-width="1" stroke-linecap="round"/>
+      <path d="M6 223.7 h28 M44 223.7 h26 M96 223.7 h32 M141 223.7 h15 M169 223.7 h17 M207 223.7 h26 M258 223.7 h41 M308 223.7 h11 M326 223.7 h32 M492 223.7 h30 M543 223.7 h31" stroke="#FFF3DA" stroke-opacity="0.25" stroke-width="1" stroke-linecap="round"/>
+      <path d="M56 233.5 h23 M99 233.5 h33 M149 233.5 h39 M197 233.5 h44 M252 233.5 h27 M308 233.5 h24 M361 233.5 h39 M477 233.5 h40 M542 233.5 h18 M591 233.5 h46 M664 233.5 h22" stroke="#FFF3DA" stroke-opacity="0.24" stroke-width="1" stroke-linecap="round"/>
+      <path d="M52 245.5 h34 M107 245.5 h13 M246 245.5 h33 M309 245.5 h40 M494 245.5 h38 M562 245.5 h35 M615 245.5 h46" stroke="#FFF3DA" stroke-opacity="0.22" stroke-width="1" stroke-linecap="round"/>
+      <path d="M6 260.4 h52 M147 260.4 h37 M193 260.4 h58 M271 260.4 h50 M414 260.4 h33 M482 260.4 h26 M521 260.4 h33 M589 260.4 h35 M639 260.4 h42" stroke="#FFF3DA" stroke-opacity="0.20" stroke-width="1" stroke-linecap="round"/>
+      <path d="M79 278.8 h28 M126 278.8 h34 M310 278.8 h39 M432 278.8 h49 M507 278.8 h60 M605 278.8 h28 M669 278.8 h63" stroke="#FFF3DA" stroke-opacity="0.17" stroke-width="1" stroke-linecap="round"/>
+      <path d="M296 301.6 h69 M404 301.6 h26 M521 301.6 h73 M610 301.6 h49" stroke="#FFF3DA" stroke-opacity="0.14" stroke-width="1" stroke-linecap="round"/>
+      <path d="M156 329.6 h58 M314 329.6 h91 M422 329.6 h26 M479 329.6 h75 M587 329.6 h58" stroke="#FFF3DA" stroke-opacity="0.09" stroke-width="1" stroke-linecap="round"/>
+      <circle cx="186" cy="202" r="8" fill="url(#vLamp)" opacity="0.2"/>
+      <circle cx="186" cy="202" r="1.7" fill="#FFF3DC" opacity="0.55"/>
+      <circle cx="322" cy="201" r="8" fill="url(#vLamp)" opacity="0.2"/>
+      <circle cx="322" cy="201" r="1.5" fill="#FFF3DC" opacity="0.55"/>
+      <circle cx="540" cy="202.5" r="8" fill="url(#vLamp)" opacity="0.2"/>
+      <circle cx="540" cy="202.5" r="1.6" fill="#FFF3DC" opacity="0.55"/>
+    </g>
+
+    <g class="v-glint" stroke="#FFE2A6" stroke-linecap="round">
+      <path d="M404 201 h56" stroke-width="2" stroke-opacity="0.7"/>
+      <path d="M412 207 h40" stroke-width="1.6" stroke-opacity="0.55"/>
+      <path d="M418 214 h28" stroke-width="1.4" stroke-opacity="0.42"/>
+      <path d="M423 223 h18" stroke-width="1.2" stroke-opacity="0.3"/>
+      <path d="M427 234 h10" stroke-width="1" stroke-opacity="0.2"/>
+    </g>
+    <g class="v-near">
+      <circle cx="74" cy="330" r="22" fill="url(#vLamp)" opacity="0.4"/>
+      <circle cx="74" cy="330" r="4.3" fill="#FFF6E2" opacity="0.88"/>
+      <circle cx="154" cy="302" r="20" fill="url(#vLamp)" opacity="0.4"/>
+      <circle cx="154" cy="302" r="4.0" fill="#FFF6E2" opacity="0.88"/>
+      <circle cx="238" cy="340" r="21" fill="url(#vLamp)" opacity="0.4"/>
+      <circle cx="238" cy="340" r="4.2" fill="#FFF6E2" opacity="0.88"/>
+      <circle cx="312" cy="283" r="18" fill="url(#vLamp)" opacity="0.4"/>
+      <circle cx="312" cy="283" r="3.6" fill="#FFF6E2" opacity="0.88"/>
+      <circle cx="392" cy="314" r="19" fill="url(#vLamp)" opacity="0.4"/>
+      <circle cx="392" cy="314" r="3.8" fill="#FFF6E2" opacity="0.88"/>
+      <circle cx="470" cy="268" r="16" fill="url(#vLamp)" opacity="0.4"/>
+      <circle cx="470" cy="268" r="3.3" fill="#FFF6E2" opacity="0.88"/>
+      <circle cx="552" cy="294" r="18" fill="url(#vLamp)" opacity="0.4"/>
+      <circle cx="552" cy="294" r="3.5" fill="#FFF6E2" opacity="0.88"/>
+      <circle cx="630" cy="256" r="16" fill="url(#vLamp)" opacity="0.4"/>
+      <circle cx="630" cy="256" r="3.1" fill="#FFF6E2" opacity="0.88"/>
+    </g>
+
+    <path d="M0 196 H680" stroke="#FFF1D2" stroke-opacity="0.72" stroke-width="1.5" fill="none"/>
+    <text x="664" y="218" text-anchor="end" font-size="10" letter-spacing="0.13em" fill="#FFF4DE" opacity="0.6">HORIZONTE</text>
+  </g>
+</svg>
 
 Janela is alpha. It works, it is tested against a real Rails application
 in a real browser, and its public surface has changed in three of the
@@ -39,6 +157,8 @@ A check nobody can prove is working is a check nobody should rely on.
 
 ## In 1.0
 
+The eight lights burning in the near ground.
+
 | Issue | What |
 | --- | --- |
 | [#24](https://github.com/retail-tasker/janela/issues/24) | A chart's height and aspect ratio are the host's to set |
@@ -53,10 +173,10 @@ A check nobody can prove is working is a check nobody should rely on.
 Progress is tracked on the
 [1.0 milestone](https://github.com/retail-tasker/janela/milestone/2).
 
-## After 1.0
+## Horizonte
 
-Wanted, not blocking a stable release. Being on this list is not a
-refusal.
+The three lights far off at the horizon. Wanted, not blocking a stable
+release, and being on this list is not a refusal.
 
 - **Drill-down on time panes** ([#18](https://github.com/retail-tasker/janela/issues/18)).
   Clicking a month could filter every other pane to it, or narrow that
@@ -70,10 +190,11 @@ refusal.
 
 ## Not coming
 
-Janela is meant to be small enough that forking it and adding your own
-piece is a normal way to use it. These are the things you would be
-adding yourself, and each is left out because something you already run
-does it better.
+The sky above the horizon is empty, and that is the honest part of the
+picture. Janela is meant to be small enough that forking it and adding
+your own piece is a normal way to use it. These are the things you would
+be adding yourself, and each is left out because something you already
+run does it better.
 
 Natural-language query. A separate data warehouse. A row-level-security
 subsystem, because your application already has Pundit or CanCanCan and

data/docs/theming.md

@@ -64,22 +64,27 @@ the names a theme spends most of its time on.
 
 | Class | On | Rendered when |
 | --- | --- | --- |
-| `janela-pane` | `<table>`, `<p>` or `<canvas>` | every pane, whatever the renderer |
+| `janela-pane` | `<table>`, `<p>`, `<figure>` or `<div>` | every pane, whatever the renderer |
 | `janela-value` | `<p>` | a single value pane |
 | `janela-value-label` | `<span>` | its caption |
 | `janela-value-number` | `<strong>` | the number itself |
-| `janela-chart` | `<canvas>` | a bar or line pane |
+| `janela-chart` | `<canvas>` | a bar or line pane, inside its `<figure>` |
+| `janela-chart-title` | `<figcaption>` | its caption (ADR 042) |
 | `janela-empty` | `<p>` | a pane whose query returned nothing |
 | `janela-error` | `<p>` | a pane that could not be read |
+| `janela-content` | `<div>` | a stored pane holding words or a host partial rather than a query (ADR 039) |
+| `janela-content-heading` | `<h2>` | a text pane's heading |
 
-A table pane also renders a `<caption>`, its accessible name, and a
-chart pane carries the same string as `aria-label`.
+A table pane renders a `<caption>` and a chart pane a `<figcaption>`,
+each its own accessible name; the chart's canvas points to its
+figcaption with `aria-labelledby` rather than repeating the string in
+`aria-label`, so the two cannot drift apart (ADR 042).
 
 ### Hiding a heading you already wrote
 
-Put `janela-own-headings` on any ancestor and a pane's caption and a
-single value's label are hidden from sight while staying in the
-accessibility tree.
+Put `janela-own-headings` on any ancestor and a table's caption, a
+single value's label and a chart's title are hidden from sight while
+staying in the accessibility tree.
 
 ```erb
 <div class="janela-own-headings">
@@ -89,14 +94,11 @@ accessibility tree.
 ```
 
 Use it when your own markup already says what the pane is, so the text
-is not on screen twice. It hides rather than removes on purpose: a table
-with no caption has no accessible name, so a screen reader lands on a
-grid of numbers with nothing to say what they measure. `display: none`
-would do that, which is why this rule ships here rather than being left
-for each host to write.
-
-A chart pane needs nothing: its title is only ever an `aria-label` and
-was never drawn.
+is not on screen twice. It hides rather than removes on purpose: a pane
+with no visible caption still needs its accessible name, so a screen
+reader lands on a grid of numbers with nothing to say what they
+measure. `display: none` would do that, which is why this rule ships
+here rather than being left for each host to write.
 
 ## What is not the contract
 

data/lib/janela/definition.rb

@@ -97,6 +97,14 @@ module Janela
       dimensions.values.filter_map(&:through).map(&:to_s).uniq
     end
 
+    # A filter the host fixed for a render (ADR 040), applied as its own
+    # condition before the reader's, so the reader's can only narrow inside
+    # it. The same bounds as any filter: declared dimensions, ADR 025's
+    # predicates and value limit.
+    def narrow(relation, conditions)
+      filter(relation, conditions.to_h)
+    end
+
     private
       def filter(relation, params)
         return relation if params.empty?

data/lib/janela/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Janela
-  VERSION = "0.8.0"
+  VERSION = "0.9.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: janela
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 platform: ruby
 authors:
 - Jay Killeen
@@ -114,6 +114,7 @@ files:
 - app/models/janela/query.rb
 - app/models/janela/snapshot.rb
 - app/views/janela/frames/_card.html.erb
+- app/views/janela/frames/_content.html.erb
 - app/views/janela/frames/_form.html.erb
 - app/views/janela/frames/_frame.html.erb
 - app/views/janela/frames/_pane.html.erb
@@ -121,6 +122,7 @@ files:
 - app/views/janela/frames/index.html.erb
 - app/views/janela/frames/new.html.erb
 - app/views/janela/frames/show.html.erb
+- app/views/janela/panes/_content_form.html.erb
 - app/views/janela/panes/_form.html.erb
 - app/views/janela/panes/_row.html.erb
 - app/views/janela/panes/edit.html.erb
@@ -137,6 +139,9 @@ files:
 - db/migrate/20260916000001_create_janela_frames.rb
 - db/migrate/20260916000002_create_janela_panes.rb
 - db/migrate/20260921000001_add_owner_to_janela_snapshots.rb
+- db/migrate/20260924000001_add_content_to_janela_panes.rb
+- db/migrate/20260924000002_add_key_to_janela_frames.rb
+- docs/composing.md
 - docs/decisions/001-built-to-be-forked.md
 - docs/decisions/002-measures-and-dimensions-over-ransack.md
 - docs/decisions/003-cross-filtering-with-turbo-frames.md
@@ -174,6 +179,11 @@ files:
 - docs/decisions/035-a-check-does-what-janela-does-or-says-what-it-saw.md
 - docs/decisions/036-janela-publishes-what-a-theme-may-target.md
 - docs/decisions/037-what-1-0-means.md
+- docs/decisions/038-a-ratio-is-a-measure-of-its-own.md
+- docs/decisions/039-a-pane-can-hold-words-and-only-code-writes-markup.md
+- docs/decisions/040-a-host-can-fix-a-frames-filter.md
+- docs/decisions/041-a-host-finds-its-frame-by-owner-and-key.md
+- docs/decisions/042-a-charts-title-is-a-figcaption.md
 - docs/decisions/INDEX.md
 - docs/multi-tenancy.md
 - docs/naming.md
@@ -199,24 +209,22 @@ metadata:
   bug_tracker_uri: https://github.com/retail-tasker/janela/issues
   rubygems_mfa_required: 'true'
 post_install_message: |
-  Janela 0.8.0 raises where it used to do nothing. One thing to act on,
-  and one to read.
+  Janela 0.9.0: a migration if you use stored frames, and a markup
+  check if you wrote CSS or JavaScript against a chart pane.
 
-  1. If you set Janela.parent_controller anywhere but an initializer, it
-     now raises instead of being ignored in silence. config.to_prepare
-     and config.after_initialize are both too late, and the README's own
-     layout recipe is a to_prepare block. Until now your dashboards kept
-     inheriting whatever was named first, so your authentication and
-     policy_scope were not the ones you wrote (ADR 035).
+  1. If you use stored frames, take two migrations together:
+     bin/rails janela:install:migrations && bin/rails db:migrate
+     A pane can now hold words or a host partial instead of a query
+     (ADR 039), and Janela::Frame.for(owner, key) finds a frame kept
+     for one of your pages without a column of your own (ADR 041).
+     Existing frames and panes are unaffected either way.
 
-  2. bin/rails janela:doctor reports findings it could not reach before,
-     including a Pundit host with no policy for Janela::Frame or
-     Janela::Snapshot, which used to pass the doctor and raise on every
-     request. Expect things that were always true and never printed.
-
-  Also: the class names on Janela's own pages are no longer public API.
-  They are scoped under janela-page and may change in any release. What
-  your own markup contains is unchanged and is listed in docs/theming.md.
+  2. A chart pane's title is now a visible <figcaption> inside a
+     <figure> wrapping the canvas, not only the canvas's aria-label
+     (ADR 042). janela-pane moved from the <canvas> to the <figure>;
+     janela-chart stayed on the canvas. If you selected
+     .janela-pane.janela-chart as one element, or read a chart's
+     title from aria-label, both need updating.
 
   Steps: UPGRADING.md in this gem, or
   https://github.com/retail-tasker/janela/blob/main/UPGRADING.md