janela 0.2.1 → 0.3.0

data/app/models/janela/pane.rb

@@ -1,137 +1,140 @@
 module Janela
-  # One pane of a dashboard: a measure, optionally grouped by a dimension,
-  # rendered as a single value, a table or a chart. A pane ignores filters on
-  # its own dimension so that clicking a value re-scopes the other panes
-  # rather than collapsing this one to the value clicked. A pane read from a
-  # snapshot shows stored results and cannot be clicked at all.
-  class Pane
-    RENDERERS = %w[table bar line].freeze
-
-    attr_reader :definition, :measure, :dimension, :renderer, :limit, :filters, :snapshot
-
-    # The helper renders the frame and the controller renders its replacement,
-    # so both derive the id the same way from the same parameters.
-    def self.frame_id(model:, measure:, by: nil, as: :table, granularity: nil, limit: nil, snapshot: nil)
-      parts = [ "janela", ("snapshot_#{snapshot.id}" if snapshot), model.model_name.route_key, measure, by,
-                (granularity if by), (as unless by.nil?), ("top#{limit}" if by && limit) ]
-      parts.compact.join("_")
-    end
+  # One pane of a frame, as data: where it sits, how wide it is, and what it
+  # shows (ADR 012). A row may only name a measure and a dimension the model's
+  # janela block declares, so an analyst arranges what is shown and cannot
+  # invent a query or reach a model nobody exposed.
+  class Pane < ActiveRecord::Base
+    SPANS = (1..12).freeze
+    LIMITS = (1..1000).freeze
+    # A form cannot offer a thousand options, and these are the row counts a
+    # dashboard actually asks for. Any limit inside LIMITS is still valid.
+    OFFERED_LIMITS = [ 5, 10, 20, 50, 100 ].freeze
 
-    def initialize(definition:, measure:, dimension: nil, renderer: "table", granularity: nil, limit: nil, filters: {}, snapshot: nil)
-      @definition = definition
-      @measure = measure
-      @dimension = dimension
-      @renderer = renderer.to_s
-      @filters = filters
-      @snapshot = snapshot
-
-      raise BadRequest, "unknown pane renderer #{renderer.inspect}" unless RENDERERS.include?(@renderer)
-      @granularity = Dimension.granularity!(granularity) if granularity.present?
-      @limit = definition.limit!(limit) if limit.present?
-    end
+    belongs_to :frame
 
-    def model
-      definition.model
-    end
+    before_validation :assign_position, on: :create
 
-    def single_value?
-      dimension.nil?
+    validates :position, presence: true
+    validates :measure, presence: true
+    validates :span, inclusion: { in: SPANS }
+    validates :limit, inclusion: { in: LIMITS }, allow_nil: true
+    validate :declared_by_a_janela_block
+
+    # The DOM id is the row, not the query it runs: two rows in one frame may
+    # show the same measure by the same dimension, and a fingerprint of the
+    # query would give them the same turbo frame for Turbo to replace (ADR 014).
+    def turbo_frame_id
+      "janela_pane_#{id}"
     end
 
-    def time?
-      !single_value? && dimension_definition.time?
+    # renderer: overrides what the row asked for, because a renderer is a
+    # viewing choice and a surface without a chart runtime shows a table
+    # instead (ADR 018).
+    def query(filters: {}, renderer: self.renderer)
+      Query.new(definition: definition, measure: measure.to_sym, dimension: dimension.presence&.to_sym,
+                renderer: renderer, granularity: granularity, limit: limit, filters: filters, title: title)
     end
 
-    def frozen?
-      !snapshot.nil?
+    # The row's own words, for a list or a heading. Built from the columns
+    # rather than from a query, because an editing page has to render even if
+    # a janela block has since lost the dimension this row names.
+    def label
+      return title if title.present?
+
+      dimension.present? ? "#{measure.humanize} by #{dimension.humanize}" : measure.to_s.humanize
     end
 
-    def granularity
-      @granularity || (dimension_definition.granularity if time?)
+    # Arranging the window is the point of the editing surface, and a number
+    # field is not arranging, so a pane swaps places with its neighbour.
+    # Written without validations: the swap passes through a moment where two
+    # panes share a position, and neither row's own data is being changed.
+    def move_up
+      swap_with(panes_above.last)
     end
 
-    # Clicking a category adds one Ransack condition; clicking a time bucket
-    # would need two, and the dashboard toggles one key at a time (ADR 006).
-    # A stored pane is the record of a moment and is not clickable (ADR 009).
-    def clickable?
-      !single_value? && !time? && !frozen?
+    def move_down
+      swap_with(panes_below.first)
     end
 
     def chart?
-      !single_value? && renderer != "table"
+      Query::RENDERERS.include?(renderer.to_s) && renderer.to_s != "table"
     end
 
-    def frame_id
-      self.class.frame_id(model: model, measure: measure, by: dimension, as: renderer,
-                          granularity: @granularity, limit: limit, snapshot: snapshot)
+    def definition
+      Janela.definition!(model)
     end
 
-    def title
-      base = if single_value?
-        measure.to_s.humanize
-      else
-        by = "#{measure.to_s.humanize} by #{dimension.to_s.humanize}"
-        time? ? "#{by} per #{granularity}" : by
+    private
+      def panes_above
+        frame.panes.where(position: ...position).order(:position)
       end
-      frozen? ? "#{base} as of #{snapshot.taken_at.strftime('%-d %b %Y')}" : base
-    end
-
-    # What identifies this pane's data inside a snapshot.
-    def lookup_key
-      { "model" => model.model_name.route_key, "measure" => measure.to_s, "dimension" => dimension&.to_s,
-        "granularity" => granularity&.to_s, "limit" => limit }
-    end
 
-    def result(on: nil)
-      return snapshot.stored_result(self) if frozen?
+      def panes_below
+        frame.panes.where(position: (position + 1)..).order(:position)
+      end
 
-      definition.query(measure, by: dimension, where: applicable_filters, on: on, granularity: granularity, limit: limit)
-    end
+      def swap_with(other)
+        return false if other.nil?
 
-    # The Ransack key and value a click on this label should toggle. A null
-    # group filters with the null predicate, not an empty string (ADR 009 has
-    # no say here; see issue #21).
-    def filter_params(label)
-      return [ nil, nil ] unless clickable?
-      return [ "#{ransack_name}_null", "1" ] if label.to_s == Dimension::NONE
+        transaction do
+          mine = position
+          update_columns(position: other.position, updated_at: Time.current)
+          other.update_columns(position: mine, updated_at: Time.current)
+          frame.touch
+        end
+        true
+      end
 
-      [ "#{ransack_name}_eq", label.to_s ]
-    end
+      def assign_position
+        self.position ||= (frame&.panes&.maximum(:position) || 0) + 1
+      end
 
-    # Every label in this pane paired with the filter it toggles, for a chart
-    # to look up by label when a bar is clicked.
-    def filters_for(labels)
-      return {} unless clickable?
+      # A janela block can lose a measure or a dimension long after a row named
+      # it, and the pane would then fail at render as a missing pane rather
+      # than a bad row. Checked on save, and as errors rather than raising, so
+      # the row is rejected with something a person can read (ADR 014).
+      def declared_by_a_janela_block
+        return errors.add(:model, "must be a model with a janela block") if model.blank?
+
+        declaration = definition
+        validate_measure(declaration) if measure.present?
+        dimension_declaration = validate_dimension(declaration)
+        validate_renderer
+        validate_granularity(dimension_declaration)
+      rescue Janela::Error
+        errors.add(:model, "#{model.inspect} is not a janela model")
+      end
 
-      labels.to_h { |label| [ label.to_s, filter_params(label) ] }
-    end
+      def validate_measure(declaration)
+        return if declaration.measures.key?(measure.to_s.to_sym)
 
-    # The filter on this pane's own dimension is not applied to its query, but
-    # it is what the user clicked here, so the view highlights it.
-    def selected_value
-      return unless clickable?
-      return Dimension::NONE if filter("#{ransack_name}_null").present?
+        errors.add(:measure, "#{measure.inspect} is not a measure of #{declaration.model}")
+      end
 
-      filter("#{ransack_name}_eq")
-    end
+      def validate_dimension(declaration)
+        return if dimension.blank?
 
-    private
-      def filter(key)
-        filters[key] || filters[key.to_sym]
+        declaration.dimensions.fetch(dimension.to_sym) do
+          errors.add(:dimension, "#{dimension.inspect} is not a dimension of #{declaration.model}")
+          nil
+        end
       end
 
-      def dimension_definition
-        definition.dimension!(dimension)
-      end
+      def validate_renderer
+        return if Query::RENDERERS.include?(renderer.to_s)
 
-      def ransack_name
-        dimension_definition.ransack_name
+        errors.add(:renderer, "must be one of #{Query::RENDERERS.join(', ')}")
       end
 
-      def applicable_filters
-        return filters if single_value? || time?
+      def validate_granularity(dimension_declaration)
+        return if granularity.blank?
+
+        unless Dimension::GRANULARITIES.include?(granularity)
+          return errors.add(:granularity, "must be one of #{Dimension::GRANULARITIES.join(', ')}")
+        end
+        return if dimension_declaration.nil? || dimension_declaration.time?
 
-        filters.reject { |key, _| key.to_s.start_with?(ransack_name) }
+        errors.add(:granularity, "only applies to a time dimension, and #{dimension} is not one")
       end
   end
 end

data/app/models/janela/query.rb

@@ -0,0 +1,149 @@
+module Janela
+  # The query behind one pane: a measure, optionally grouped by a dimension,
+  # rendered as a single value, a table or a chart. A query ignores filters on
+  # its own dimension so that clicking a value re-scopes the other panes
+  # rather than collapsing this one to the value clicked. A query read from a
+  # snapshot shows stored results and cannot be clicked at all.
+  class Query
+    RENDERERS = %w[table bar line].freeze
+
+    attr_reader :definition, :measure, :dimension, :renderer, :limit, :filters, :snapshot
+
+    # The helper renders the turbo frame and the controller renders its
+    # replacement, so both derive the id the same way from the same parameters.
+    def self.turbo_frame_id(model:, measure:, by: nil, as: :table, granularity: nil, limit: nil, snapshot: nil)
+      parts = [ "janela", ("snapshot_#{snapshot.id}" if snapshot), model.model_name.route_key, measure, by,
+                (granularity if by), (as unless by.nil?), ("top#{limit}" if by && limit) ]
+      parts.compact.join("_")
+    end
+
+    def initialize(definition:, measure:, dimension: nil, renderer: "table", granularity: nil, limit: nil, filters: {}, snapshot: nil, title: nil)
+      @definition = definition
+      @title = title
+      @measure = measure
+      @dimension = dimension
+      @renderer = renderer.to_s
+      @filters = filters
+      @snapshot = snapshot
+
+      raise BadRequest, "unknown pane renderer #{renderer.inspect}" unless RENDERERS.include?(@renderer)
+      @granularity = Dimension.granularity!(granularity) if granularity.present?
+      @limit = definition.limit!(limit) if limit.present?
+    end
+
+    def model
+      definition.model
+    end
+
+    # Every number this pane renders goes through here, so a table cell, a
+    # single value and a chart tooltip cannot disagree about what the measure
+    # means (ADR 020).
+    def format(value)
+      definition.measure!(measure).format(value)
+    end
+
+    def single_value?
+      dimension.nil?
+    end
+
+    def time?
+      !single_value? && dimension_definition.time?
+    end
+
+    def frozen?
+      !snapshot.nil?
+    end
+
+    def granularity
+      @granularity || (dimension_definition.granularity if time?)
+    end
+
+    # Clicking a category adds one Ransack condition; clicking a time bucket
+    # would need two, and the dashboard toggles one key at a time (ADR 006).
+    # A stored pane is the record of a moment and is not clickable (ADR 009).
+    def clickable?
+      !single_value? && !time? && !frozen?
+    end
+
+    def chart?
+      !single_value? && renderer != "table"
+    end
+
+    def turbo_frame_id
+      self.class.turbo_frame_id(model: model, measure: measure, by: dimension, as: renderer,
+                          granularity: @granularity, limit: limit, snapshot: snapshot)
+    end
+
+    # A pane row may carry its own title, which is the first analyst authored
+    # text the gem renders. It is escaped like any other string (ADR 014).
+    def title
+      return @title if @title.present?
+
+      base = if single_value?
+        measure.to_s.humanize
+      else
+        by = "#{measure.to_s.humanize} by #{dimension.to_s.humanize}"
+        time? ? "#{by} per #{granularity}" : by
+      end
+      frozen? ? "#{base} as of #{snapshot.taken_at.strftime('%-d %b %Y')}" : base
+    end
+
+    # What identifies this pane's data inside a snapshot.
+    def lookup_key
+      { "model" => model.model_name.route_key, "measure" => measure.to_s, "dimension" => dimension&.to_s,
+        "granularity" => granularity&.to_s, "limit" => limit }
+    end
+
+    def result(on: nil)
+      return snapshot.stored_result(self) if frozen?
+
+      definition.query(measure, by: dimension, where: applicable_filters, on: on, granularity: granularity, limit: limit)
+    end
+
+    # The Ransack key and value a click on this label should toggle. A null
+    # group filters with the null predicate, not an empty string (ADR 009 has
+    # no say here; see issue #21).
+    def filter_params(label)
+      return [ nil, nil ] unless clickable?
+      return [ "#{ransack_name}_null", "1" ] if label.to_s == Dimension::NONE
+
+      [ "#{ransack_name}_eq", label.to_s ]
+    end
+
+    # Every label in this pane paired with the filter it toggles, for a chart
+    # to look up by label when a bar is clicked.
+    def filters_for(labels)
+      return {} unless clickable?
+
+      labels.to_h { |label| [ label.to_s, filter_params(label) ] }
+    end
+
+    # The filter on this pane's own dimension is not applied to its query, but
+    # it is what the user clicked here, so the view highlights it.
+    def selected_value
+      return unless clickable?
+      return Dimension::NONE if filter("#{ransack_name}_null").present?
+
+      filter("#{ransack_name}_eq")
+    end
+
+    private
+      def filter(key)
+        filters[key] || filters[key.to_sym]
+      end
+
+      def dimension_definition
+        definition.dimension!(dimension)
+      end
+
+      def ransack_name
+        dimension_definition.ransack_name
+      end
+
+      def applicable_filters
+        return filters if single_value? || time?
+
+        filters.reject { |key, _| key.to_s.start_with?(ransack_name) }
+      end
+  end
+end

data/app/models/janela/snapshot.rb

@@ -15,8 +15,8 @@ module Janela
       create!(name: name, taken_at: taken_at, filters: taking.filters, panes: taking.panes)
     end
 
-    def stored_result(pane)
-      key = pane.lookup_key
+    def stored_result(query)
+      key = query.lookup_key
       entry = panes.find { |stored| stored.slice(*key.keys) == key }
       raise NotFound, "snapshot #{id} has no pane #{key.compact.values.join(' ')}" unless entry
 
@@ -32,9 +32,9 @@ module Janela
       end
 
       def pane(model, measure, by: nil, granularity: nil, limit: nil, on: nil)
-        pane = Pane.new(definition: model.janela, measure: measure, dimension: by,
-                        granularity: granularity, limit: limit, filters: filters)
-        panes << pane.lookup_key.merge("result" => plain(pane.result(on: on)))
+        query = Query.new(definition: model.janela, measure: measure, dimension: by,
+                          granularity: granularity, limit: limit, filters: filters)
+        panes << query.lookup_key.merge("result" => plain(query.result(on: on)))
       end
 
       private

data/app/views/janela/frames/_card.html.erb

@@ -0,0 +1,7 @@
+<%= link_to frame_path(frame), class: "janela-card" do %>
+  <span class="janela-card-name"><%= frame.name %></span>
+  <span class="janela-card-meta">
+    <%= t("janela.frames.frame.panes", count: frame.panes.size) %>,
+    <%= t("janela.frames.frame.changed", time: time_ago_in_words(frame.updated_at)) %>
+  </span>
+<% end %>

data/app/views/janela/frames/_form.html.erb

@@ -0,0 +1,23 @@
+<%= form_with model: frame, url: frame.persisted? ? frame_path(frame) : frames_path, class: "janela-form" do |form| %>
+  <%= render "janela/shared/errors", record: frame %>
+
+  <div class="janela-field">
+    <%= form.label :name %>
+    <%= form.text_field :name, required: true %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :columns %>
+    <%= form.select :columns, Janela::Frame::COLUMNS.to_a %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :gap %>
+    <%= form.select :gap, Janela::Frame::GAPS.to_a %>
+  </div>
+
+  <div class="janela-actions">
+    <%= form.submit t("janela.actions.save"), class: "janela-button" %>
+    <%= link_to t("janela.actions.cancel"), frame.persisted? ? frame_path(frame) : frames_path %>
+  </div>
+<% end %>

data/app/views/janela/frames/_frame.html.erb

@@ -0,0 +1,4 @@
+<%= tag.div class: janela_frame_classes(frame),
+            data: { controller: "janela--frame", janela__frame_filters_value: filters.to_json } do %>
+  <%= render partial: "janela/frames/pane", collection: frame.panes, as: :pane, locals: { filters: filters, charts: charts } %>
+<% end %>

data/app/views/janela/frames/_pane.html.erb

@@ -0,0 +1,12 @@
+<%# Rendered inline on the first response, so the page is a correct dashboard
+    before any JavaScript runs (ADR 014). Deliberately no src: a turbo frame
+    with both a src and content fetches the src and throws the content away.
+    The frame controller reads data-janela-src and sets src when filters
+    change, which is what makes cross-filtering work from here. %>
+<%# A table needs no JavaScript, so it is what a surface with no chart runtime
+    shows in place of an empty canvas (ADR 018). %>
+<% query = pane.query(filters: filters, renderer: pane.chart? && !charts ? "table" : pane.renderer) %>
+<%= turbo_frame_tag pane.turbo_frame_id, class: "janela-span-#{pane.span}",
+      data: { janela__frame_target: "pane", janela_src: janela_routes.frame_pane_path(pane.frame_id, pane) } do %>
+  <%= render "janela/queries/query", query: query, result: query.result(on: janela_scope(query.model)) %>
+<% end %>

data/app/views/janela/frames/edit.html.erb

@@ -0,0 +1,25 @@
+<% content_for :title, @frame.name %>
+<h1 class="janela-heading"><%= @frame.name %></h1>
+<p class="janela-crumb">
+  <%= link_to Janela::Frame.model_name.human(count: 2), frames_path %>
+  <%= link_to t("janela.actions.view"), frame_path(@frame) %>
+</p>
+
+<%= render "form", frame: @frame %>
+
+<h2 class="janela-subheading"><%= Janela::Pane.model_name.human(count: 2) %></h2>
+
+<% if @frame.panes.any? %>
+  <ul class="janela-list">
+    <%= render partial: "janela/panes/row", collection: @frame.panes, as: :pane, locals: { frame: @frame } %>
+  </ul>
+<% else %>
+  <p class="janela-empty"><%= t(".blank", name: Janela::Pane.model_name.human(count: 2).downcase) %></p>
+<% end %>
+
+<p class="janela-actions">
+  <%= link_to t("janela.actions.add_pane", name: Janela::Pane.model_name.human), new_frame_pane_path(@frame), class: "janela-button" %>
+</p>
+
+<%= button_to t("janela.actions.delete_frame", name: Janela::Frame.model_name.human.downcase), frame_path(@frame),
+      method: :delete, class: "janela-button janela-danger" %>

data/app/views/janela/frames/index.html.erb

@@ -0,0 +1,15 @@
+<% content_for :title, Janela::Frame.model_name.human(count: 2) %>
+<h1 class="janela-heading"><%= Janela::Frame.model_name.human(count: 2) %></h1>
+<p class="janela-actions">
+  <%= link_to t("janela.actions.new_frame", name: Janela::Frame.model_name.human), new_frame_path, class: "janela-button" %>
+</p>
+
+<% if @frames.any? %>
+  <div class="janela-frame janela-cols-3 janela-gap-4">
+    <% @frames.each do |frame| %>
+      <%= render "janela/frames/card", frame: frame %>
+    <% end %>
+  </div>
+<% else %>
+  <p class="janela-empty"><%= t(".blank", name: Janela::Frame.model_name.human(count: 2).downcase) %></p>
+<% end %>

data/app/views/janela/frames/new.html.erb

@@ -0,0 +1,5 @@
+<% content_for :title, t("janela.actions.new_frame", name: Janela::Frame.model_name.human) %>
+<h1 class="janela-heading"><%= t("janela.actions.new_frame", name: Janela::Frame.model_name.human) %></h1>
+<p class="janela-crumb"><%= link_to Janela::Frame.model_name.human(count: 2), frames_path %></p>
+
+<%= render "form", frame: @frame %>

data/app/views/janela/frames/show.html.erb

@@ -0,0 +1,9 @@
+<% content_for :title, @frame.name %>
+<h1 class="janela-heading"><%= @frame.name %></h1>
+<p class="janela-crumb">
+  <%= link_to Janela::Frame.model_name.human(count: 2), frames_path %>
+  <%= link_to t("janela.actions.edit"), edit_frame_path(@frame) %>
+</p>
+
+<%# charts: false because this page loads no chart runtime (ADR 018). %>
+<%= janela_frame @frame, charts: false %>

data/app/views/janela/panes/_form.html.erb

@@ -0,0 +1,58 @@
+<%
+  # Step two: every option comes from this model's janela block, so a choice
+  # that would be rejected is not offered in the first place.
+  measures = definition.measures.keys.map { |name| [ name.to_s.humanize, name ] }
+  dimensions = definition.dimensions.keys.map { |name| [ name.to_s.humanize, name ] }
+  time_dimensions = definition.dimensions.values.select(&:time?).map { |dimension| dimension.name.to_s.humanize }
+  chosen = definition.dimensions[pane.dimension.presence&.to_sym]
+  granularity_applies = pane.dimension.present? ? chosen&.time? : time_dimensions.any?
+%>
+<%= form_with model: pane, url: pane.persisted? ? frame_pane_path(frame, pane) : frame_panes_path(frame), class: "janela-form" do |form| %>
+  <%= render "janela/shared/errors", record: pane %>
+  <%= form.hidden_field :model %>
+
+  <p class="janela-muted"><%= Janela::Pane.human_attribute_name(:model) %>: <%= definition.model.model_name.human %></p>
+
+  <div class="janela-field">
+    <%= form.label :measure %>
+    <%= form.select :measure, measures %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :dimension %>
+    <%= form.select :dimension, dimensions, include_blank: t("janela.panes.no_dimension") %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :renderer %>
+    <%= form.select :renderer, Janela::Query::RENDERERS.map { |renderer| [ t("janela.renderers.#{renderer}"), renderer ] } %>
+  </div>
+
+  <% if granularity_applies %>
+    <div class="janela-field">
+      <%= form.label :granularity %>
+      <%= form.select :granularity, Janela::Dimension::GRANULARITIES.map { |value| [ value.humanize, value ] }, include_blank: t("janela.panes.declared_granularity") %>
+      <span class="janela-hint"><%= t("janela.panes.granularity_hint", dimensions: time_dimensions.to_sentence) %></span>
+    </div>
+  <% end %>
+
+  <div class="janela-field">
+    <%= form.label :limit %>
+    <%= form.select :limit, Janela::Pane::OFFERED_LIMITS, include_blank: t("janela.panes.no_limit") %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :span %>
+    <%= form.select :span, Janela::Pane::SPANS.to_a %>
+  </div>
+
+  <div class="janela-field">
+    <%= form.label :title %>
+    <%= form.text_field :title, placeholder: t("janela.panes.title_placeholder") %>
+  </div>
+
+  <div class="janela-actions">
+    <%= form.submit t("janela.actions.save"), class: "janela-button" %>
+    <%= link_to t("janela.actions.cancel"), edit_frame_path(frame) %>
+  </div>
+<% end %>

data/app/views/janela/panes/_row.html.erb

@@ -0,0 +1,12 @@
+<li class="janela-list-row">
+  <span class="janela-list-name"><%= pane.label %></span>
+  <span class="janela-card-meta"><%= t("janela.panes.summary", renderer: pane.renderer, span: pane.span) %></span>
+  <span class="janela-actions">
+    <%= button_to t("janela.actions.move_up"), move_up_frame_pane_path(frame, pane), method: :patch,
+          class: "janela-button", disabled: pane == frame.panes.first %>
+    <%= button_to t("janela.actions.move_down"), move_down_frame_pane_path(frame, pane), method: :patch,
+          class: "janela-button", disabled: pane == frame.panes.last %>
+    <%= link_to t("janela.actions.edit"), edit_frame_pane_path(frame, pane) %>
+    <%= button_to t("janela.actions.delete"), frame_pane_path(frame, pane), method: :delete, class: "janela-button" %>
+  </span>
+</li>

data/app/views/janela/panes/edit.html.erb

@@ -0,0 +1,5 @@
+<% content_for :title, @pane.label %>
+<h1 class="janela-heading"><%= @pane.label %></h1>
+<p class="janela-crumb"><%= link_to @frame.name, edit_frame_path(@frame) %></p>
+
+<%= render "form", frame: @frame, pane: @pane, definition: @definition %>

data/app/views/janela/panes/new.html.erb

@@ -0,0 +1,22 @@
+<% content_for :title, t("janela.actions.add_pane", name: Janela::Pane.model_name.human) %>
+<h1 class="janela-heading"><%= t("janela.actions.add_pane", name: Janela::Pane.model_name.human) %></h1>
+<p class="janela-crumb"><%= link_to @frame.name, edit_frame_path(@frame) %></p>
+
+<% if @definition %>
+  <%= render "form", frame: @frame, pane: @pane, definition: @definition %>
+<% else %>
+  <%# Step one of two. The engine's pages run no JavaScript, so one select
+      cannot refill another: picking the model first is what lets step two
+      offer only measures and dimensions that model declares (ADR 018). %>
+  <%= form_with url: new_frame_pane_path(@frame), method: :get, class: "janela-form" do |form| %>
+    <div class="janela-field">
+      <%= form.label :model, Janela::Pane.human_attribute_name(:model) %>
+      <%= form.select :model, Janela.definitions.map { |definition| [ definition.model.model_name.human, definition.model.model_name.route_key ] } %>
+    </div>
+
+    <div class="janela-actions">
+      <%= form.submit t("janela.actions.continue"), class: "janela-button" %>
+      <%= link_to t("janela.actions.cancel"), edit_frame_path(@frame) %>
+    </div>
+  <% end %>
+<% end %>