alembic 0.2.0 → 0.4.0

data/app/models/alembic/page/content_blocks.rb

@@ -0,0 +1,20 @@
+module Alembic
+  class Page < ApplicationRecord
+    module ContentBlocks
+      def self.register
+        Page.block(:alembic_hero, name: "Hero", width: 12, height: 3, drawn_by: :alembic_hero_block,
+          fields: [ { key: :kicker, label: "Small label" }, { key: :headline, label: "Headline" }, { key: :text, label: "Text" } ])
+        Page.block(:alembic_facts, name: "Facts", width: 12, height: 1, drawn_by: :alembic_facts_block,
+          fields: [ { key: :facts, label: "Facts, one per line" } ], body: :facts,
+          options: { question_count: { value: "question_count" } })
+        Page.block(:alembic_table, name: "Table", width: 12, height: 4, drawn_by: :alembic_table_block,
+          fields: [ { key: :rows, label: "Rows, one per line" } ], body: :rows)
+        Page.block(:alembic_code, name: "Code", width: 12, height: 3, drawn_by: :alembic_code_block,
+          fields: [ { key: :code, label: "Code" } ], body: :code)
+        Page.block(:alembic_start, name: "Start button", width: 4, height: 1, drawn_by: :alembic_start_block,
+          fields: [ { key: :label, label: "Label" } ],
+          options: { start_path: { value: "start_path" }, starts_a_run: { value: "starts_a_run" } })
+      end
+    end
+  end
+end

data/app/models/alembic/page/options.rb

@@ -6,8 +6,8 @@ module Alembic
         bodies[key.to_sym] = body
       end
 
-      def self.for(block)
-        named(filled(block).except(bodies[block["type"].to_sym]), declared.fetch(block["type"].to_sym, {}))
+      def self.for(block, values: {})
+        named(filled(block).except(bodies[block["type"].to_sym]), declared.fetch(block["type"].to_sym, {}), values)
       end
 
       def self.body_for(block)
@@ -28,19 +28,26 @@ module Alembic
         block.fetch("content", {}).reject { |_key, value| value == "" }.symbolize_keys
       end
 
-      def self.named(filled, options)
+      def self.named(filled, options, values)
         options.each_with_object(filled) do |(option, spec), built|
-          spec.is_a?(Hash) ? fill(built, option, spec) : built[option] = spec
+          spec.is_a?(Hash) ? fill(built, option, spec, values) : built[option] = spec
         end
       end
 
-      def self.fill(built, option, spec)
-        value = built.delete(spec.fetch(:from, option))
+      def self.fill(built, option, spec, values)
+        value = handed(built, option, spec, values)
         built[option] = value.nil? ? spec[:default] : value
         built.delete(option) if built[option].nil?
       end
 
-      private_class_method :filled, :named, :fill
+      def self.handed(built, option, spec, values)
+        return values[spec[:value]] if spec.key?(:value)
+        return values[built.delete(spec[:value_of]).to_s] if spec.key?(:value_of)
+
+        built.delete(spec.fetch(:from, option))
+      end
+
+      private_class_method :filled, :named, :fill, :handed
     end
   end
 end

data/app/models/alembic/page/preview.rb

@@ -0,0 +1,15 @@
+module Alembic
+  class Page < ApplicationRecord
+    module Preview
+      mattr_accessor :provider, :chooser
+
+      def self.values_for(page, choice)
+        provider ? provider.call(page, choice).to_h : {}
+      end
+
+      def self.choices_for(page)
+        chooser ? chooser.call(page).to_a : []
+      end
+    end
+  end
+end

data/app/models/alembic/result_blocks.rb

@@ -0,0 +1,33 @@
+module Alembic
+  module ResultBlocks
+    OUTPUT = { key: :output, label: "Output" }.freeze
+    HEADING = { key: :heading, label: "Heading" }.freeze
+
+    def self.register
+      Page.block(:alembic_score, name: "Score", width: 12, height: 3, drawn_by: :alembic_score_block,
+        fields: [ OUTPUT, { key: :kicker, label: "Label above" }, { key: :caption, label: "Caption" } ],
+        options: { value: { value_of: :output } })
+      Page.block(:alembic_band, name: "Band", width: 12, height: 2, drawn_by: :alembic_band_block,
+        fields: [ OUTPUT, { key: :score, label: "Score output" } ],
+        options: { value: { value_of: :output }, score: { value_of: :score } })
+      Page.block(:alembic_categories, name: "Score per category", width: 12, height: 4, drawn_by: :alembic_categories_block,
+        fields: [ OUTPUT, HEADING ], options: { value: { value_of: :output } })
+      Page.block(:alembic_weakest, name: "Weakest categories", width: 12, height: 4, drawn_by: :alembic_weakest_block,
+        fields: [ OUTPUT, HEADING, { key: :cost_label, label: "Cost label" } ], options: { value: { value_of: :output } })
+      Page.block(:alembic_answers, name: "Answers given", width: 12, height: 4, drawn_by: :alembic_answers_block,
+        fields: [ HEADING ], options: { value: { value: "answers" } })
+      Page.block(:alembic_outcome, name: "Chosen outcome", width: 12, height: 4, drawn_by: :alembic_outcome_block,
+        fields: [ OUTPUT ], options: { value: { value_of: :output } })
+      Page.block(:alembic_outcomes, name: "Every outcome", width: 12, height: 6, drawn_by: :alembic_outcomes_block,
+        fields: [ OUTPUT, HEADING ], options: { value: { value_of: :output } })
+      register_lead if Alembic.lead_address
+    end
+
+    def self.register_lead
+      Page.block(:alembic_lead, name: "Lead", width: 12, height: 3, drawn_by: :alembic_lead_block,
+        fields: [ HEADING, { key: :blurb, label: "Text" }, { key: :button, label: "Button" }, { key: :placeholder, label: "Placeholder" } ],
+        options: { slug: { value: "slug" }, note: { value: "note" } })
+    end
+    private_class_method :register_lead
+  end
+end

data/app/models/alembic/summary/report.rb

@@ -13,7 +13,7 @@ module Alembic
           output_type = @registry.fetch(output["type"])
           produced[output["id"]] = output_type.compute(output, run, produced)
 
-          Result.new(id: output["id"], label: label_for(output, output_type), value: produced[output["id"]])
+          Result.new(id: output["id"], type: output["type"], label: label_for(output, output_type), value: produced[output["id"]])
         end
       end
 

data/app/models/alembic/summary/result.rb

@@ -1,5 +1,5 @@
 module Alembic
   module Summary
-    Result = Data.define(:id, :label, :value)
+    Result = Data.define(:id, :type, :label, :value)
   end
 end

data/app/views/alembic/blocks/_answers.html.erb

@@ -0,0 +1,11 @@
+<div>
+  <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-4"><%= heading %></h2>
+  <ul class="divide-y divide-gray-100 border-y border-gray-100">
+    <% answers.each do |question, answer| %>
+      <li class="flex items-baseline justify-between gap-6 py-3">
+        <span class="text-gray-600"><%= question %></span>
+        <span class="shrink-0 font-semibold text-gray-900"><%= answer %></span>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/app/views/alembic/blocks/_band.html.erb

@@ -0,0 +1,6 @@
+<div class="text-center">
+  <span class="inline-block mt-5 px-4 py-1.5 rounded-full text-sm font-semibold text-white <%= tone %>"><%= band["name"] %></span>
+  <% if band["description"].present? %>
+    <p class="text-gray-600 leading-relaxed max-w-lg mx-auto mt-4"><%= band["description"] %></p>
+  <% end %>
+</div>

data/app/views/alembic/blocks/_categories.html.erb

@@ -0,0 +1,11 @@
+<div>
+  <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-4"><%= heading %></h2>
+  <% shares.each do |name, share| %>
+    <div class="flex items-center gap-3 mb-2.5">
+      <span class="text-sm text-gray-600 w-44 shrink-0"><%= name %></span>
+      <span class="flex-1 h-2 bg-gray-100 rounded-full overflow-hidden">
+        <span class="block h-full rounded-full <%= alembic_tone(share) %>" style="width:<%= [ share.to_i, 4 ].max %>%"></span>
+      </span>
+    </div>
+  <% end %>
+</div>

data/app/views/alembic/blocks/_code.html.erb

@@ -0,0 +1 @@
+<pre class="overflow-x-auto rounded-lg bg-gray-900 p-4 text-sm text-gray-100"><code><%= code %></code></pre>

data/app/views/alembic/blocks/_facts.html.erb

@@ -0,0 +1,5 @@
+<div class="flex flex-wrap gap-2 mb-8">
+  <% facts.each do |value, label| %>
+    <span class="text-sm text-gray-500 bg-gray-50 border border-gray-200 rounded-md px-3 py-1.5"><% if label %><b class="text-gray-900"><%= value %></b> <%= label %><% else %><%= value %><% end %></span>
+  <% end %>
+</div>

data/app/views/alembic/blocks/_hero.html.erb

@@ -0,0 +1,9 @@
+<div>
+  <% if kicker.present? %>
+    <p class="text-xs font-semibold uppercase tracking-widest text-accent-600 mb-3"><%= kicker %></p>
+  <% end %>
+  <h1 class="text-3xl md:text-4xl font-bold tracking-tight text-gray-900 mb-3"><%= headline %></h1>
+  <% if text.present? %>
+    <p class="text-lg text-gray-600 mb-6"><%= text %></p>
+  <% end %>
+</div>

data/app/views/alembic/blocks/_lead.html.erb

@@ -0,0 +1,15 @@
+<%= ui_panel(padding: :lg) do %>
+  <h2 class="text-xl font-semibold text-gray-900 mb-2"><%= heading %></h2>
+  <% if blurb.present? %>
+    <p class="text-gray-600 mb-5"><%= blurb %></p>
+  <% end %>
+  <%= form_with url: address, method: :post, class: "flex flex-col sm:flex-row gap-3" do %>
+    <%= render Alembic.lead_fields_partial if Alembic.lead_fields_partial %>
+    <%= hidden_field_tag "slug", slug %>
+    <%= hidden_field_tag "note", note %>
+    <div class="flex-1">
+      <%= ui_input(name: "email", type: :email, placeholder: placeholder) %>
+    </div>
+    <button type="submit" class="inline-flex items-center justify-center font-semibold rounded-lg bg-accent-600 text-white hover:bg-accent-500 px-6 py-3 cursor-pointer whitespace-nowrap"><%= button %></button>
+  <% end %>
+<% end %>

data/app/views/alembic/blocks/_outcome_entry.html.erb

@@ -0,0 +1,44 @@
+<%= ui_panel(padding: :lg) do %>
+  <details id="outcome-<%= entry["key"] %>" class="group" <%= "open" if open %>>
+    <summary class="flex items-start gap-3 cursor-pointer list-none">
+      <% if entry["label"].present? %>
+        <span class="text-xs font-semibold uppercase tracking-wider text-accent-600 border border-accent-200 rounded px-2 py-1 shrink-0"><%= entry["label"] %></span>
+      <% end %>
+      <span class="flex-1">
+        <span class="block text-lg font-semibold text-gray-900"><%= entry["name"] %></span>
+        <span class="block text-sm text-gray-500"><%= entry["tagline"] %></span>
+      </span>
+      <span class="text-gray-400 transition group-open:rotate-90">&#9656;</span>
+    </summary>
+
+    <div class="mt-5 space-y-5">
+      <% if Array(entry["facts"]).any? %>
+        <dl class="grid grid-cols-1 sm:grid-cols-3 gap-px overflow-hidden rounded-lg bg-gray-200">
+          <% Array(entry["facts"]).each do |label, value| %>
+            <div class="bg-gray-50 p-3"><dt class="text-xs uppercase tracking-wide text-gray-400 mb-1"><%= label %></dt><dd class="text-sm text-gray-900"><%= value %></dd></div>
+          <% end %>
+        </dl>
+      <% end %>
+
+      <% Array(entry["sections"]).each do |section| %>
+        <div>
+          <h4 class="text-xs font-semibold uppercase tracking-wider <%= section["note"].present? ? "text-red-600" : "text-accent-600" %> mb-1"><%= section["heading"] %></h4>
+          <p class="text-gray-700"><%= section["text"] %></p>
+          <% if section["note"].present? %>
+            <p class="mt-1 text-sm text-red-700"><span class="font-semibold">Result:</span> <%= section["note"] %></p>
+          <% end %>
+        </div>
+      <% end %>
+
+      <% if Array(entry["steps"]).any? %>
+        <div>
+          <h4 class="text-xs font-semibold uppercase tracking-wider text-accent-600 mb-2">How to build it</h4>
+          <% Array(entry["steps"]).each_with_index do |step, index| %>
+            <p class="text-sm font-semibold text-gray-900 mt-3"><%= index + 1 %>. <%= step["title"] %></p>
+            <pre class="mt-1 overflow-x-auto rounded-lg bg-gray-900 p-4 text-xs leading-relaxed text-gray-100"><code><%= step["code"] %></code></pre>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </details>
+<% end %>

data/app/views/alembic/blocks/_outcomes.html.erb

@@ -0,0 +1,10 @@
+<div>
+  <% if heading.present? %>
+    <h2 class="text-2xl font-bold tracking-tight text-gray-900 mb-6"><%= heading %></h2>
+  <% end %>
+  <div class="space-y-3">
+    <% entries.each do |entry| %>
+      <%= render "alembic/blocks/outcome_entry", entry: entry, open: false %>
+    <% end %>
+  </div>
+</div>

data/app/views/alembic/blocks/_score.html.erb

@@ -0,0 +1,7 @@
+<div class="text-center">
+  <p class="text-xs font-semibold uppercase tracking-widest text-accent-600 mb-4"><%= kicker %></p>
+  <div class="text-7xl md:text-8xl font-bold tracking-tight text-gray-900"><%= value.nil? ? "—" : "#{value}%" %></div>
+  <% if caption.present? %>
+    <p class="text-sm text-gray-500 mt-1"><%= caption %></p>
+  <% end %>
+</div>

data/app/views/alembic/blocks/_table.html.erb

@@ -0,0 +1,20 @@
+<div class="overflow-x-auto">
+  <table class="w-full text-sm text-left">
+    <thead>
+      <tr class="border-b border-gray-200">
+        <% heading.each do |cell| %>
+          <th class="py-2 pr-4 font-semibold text-gray-900"><%= cell %></th>
+        <% end %>
+      </tr>
+    </thead>
+    <tbody>
+      <% rows.each do |row| %>
+        <tr class="border-b border-gray-100">
+          <% row.each do |cell| %>
+            <td class="py-2 pr-4 text-gray-600"><%= cell %></td>
+          <% end %>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>

data/app/views/alembic/blocks/_weakest.html.erb

@@ -0,0 +1,12 @@
+<div>
+  <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-4"><%= heading %></h2>
+  <div class="space-y-4">
+    <% categories.each do |category| %>
+      <%= ui_panel(padding: :lg) do %>
+        <h3 class="text-lg font-semibold text-gray-900 mb-1.5"><%= category["name"] %></h3>
+        <p class="text-gray-700 mb-2"><%= category["miss"] %></p>
+        <p class="text-sm text-accent-700"><span class="font-semibold"><%= cost_label %></span> <%= category["cost"] %></p>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/views/alembic/flows/_question.html.erb

@@ -0,0 +1,24 @@
+<fieldset>
+  <% if category.present? %>
+    <p class="text-xs font-semibold uppercase tracking-wider text-accent-600 mb-2"><%= category %></p>
+  <% end %>
+  <legend class="text-xl font-semibold text-gray-900 mb-5 leading-snug"><%= question.text %></legend>
+  <div class="space-y-3">
+    <% question.choices.each do |choice| %>
+      <label class="block cursor-pointer">
+        <%= radio_button_tag "answers[#{question.id}]", choice.value, false, class: "peer sr-only", onchange: (local_assigns.fetch(:sends_on_choice, true) ? "this.form.requestSubmit()" : nil) %>
+        <span class="flex items-start gap-3 rounded-lg border-2 border-gray-200 bg-white px-4 py-3 transition hover:border-gray-400 peer-checked:border-accent-500 peer-checked:bg-accent-50">
+          <% if shows_values %>
+            <span class="text-xs font-semibold uppercase tracking-wider text-accent-600 border border-accent-200 rounded px-2 py-0.5 shrink-0 mt-0.5"><%= choice.value %></span>
+          <% end %>
+          <span class="text-gray-900">
+            <%= choice.label.presence || choice.value %>
+            <% if choice.hint.present? %>
+              <small class="block text-gray-500"><%= choice.hint %></small>
+            <% end %>
+          </span>
+        </span>
+      </label>
+    <% end %>
+  </div>
+</fieldset>

data/app/views/alembic/flows/complete.html.erb

@@ -11,13 +11,19 @@
 
   <% if @outputs.any? %>
     <%= ui_section do %>
-      <%= ui_grid(cols: { default: 1, sm: 2 }, gap: :lg) do %>
+      <div class="space-y-10">
         <% @outputs.each do |output| %>
           <div data-output="<%= output.id %>">
-            <%= ui_stat_card(label: output.label, value: alembic_output_lines(output.value).join(" · ")) %>
+            <%= alembic_default_result(output, @outputs) %>
           </div>
         <% end %>
-      <% end %>
+      </div>
+    <% end %>
+  <% end %>
+
+  <% if Alembic.lead_address %>
+    <%= ui_section do %>
+      <%= alembic_lead_block(slug: summary_values["slug"], note: summary_values["note"]) %>
     <% end %>
   <% end %>
 

data/app/views/alembic/flows/one_page.html.erb

@@ -0,0 +1,35 @@
+<% content_for(:title, @guide.headline) %>
+<% content_for :head do %>
+  <%= javascript_include_tag "alembic/one_page", defer: true %>
+<% end %>
+
+<section class="py-20 md:py-28">
+  <div class="max-w-2xl mx-auto px-6">
+    <%= link_to "← Start over", flow_start_path(@guide.slug), class: "text-sm text-accent-600 hover:text-accent-700" %>
+
+    <%= form_with url: flow_step_path(@guide.slug), method: :get, data: { turbo: false, one_page: true }, class: "mt-6" do %>
+      <% @questions.each_with_index do |question, index| %>
+        <div data-one-page-question>
+          <div class="flex items-center justify-between text-sm text-gray-500 mb-2">
+            <span>Question <%= index + 1 %> of <%= @questions.size %></span>
+          </div>
+          <div class="h-1.5 bg-gray-100 rounded-full overflow-hidden mb-8">
+            <i class="block h-full bg-accent-600 rounded-full transition-all" style="width:<%= (index * 100.0 / @questions.size).round %>%"></i>
+          </div>
+          <%= render "alembic/flows/question", question: question, category: step_category(question), shows_values: shows_answer_values?, sends_on_choice: false %>
+          <% if index.positive? %>
+            <button type="button" data-one-page-previous hidden class="mt-6 cursor-pointer text-sm text-gray-500 underline underline-offset-2 hover:text-gray-900">← Previous</button>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div data-one-page-ready class="mt-8">
+        <p class="text-gray-600 mb-5">That's every question.</p>
+        <div class="flex items-center gap-4">
+        <button type="submit" class="inline-flex items-center justify-center font-semibold rounded-lg bg-accent-600 text-white hover:bg-accent-500 px-6 py-3 cursor-pointer">See my results</button>
+        <button type="button" data-one-page-previous hidden class="cursor-pointer text-sm text-gray-500 underline underline-offset-2 hover:text-gray-900">← Previous</button>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</section>

data/app/views/alembic/flows/show.html.erb

@@ -1,17 +1,20 @@
-<% content_for(:title, @flow.title.presence || @flow.slug) %>
+<% intro_page = Alembic::Flow::Summaries.new(@flow).intro_page %>
+<% if intro_page&.live_version %>
+  <% content_for(:title, @flow.title.presence || @flow.slug) %>
+  <% content_for :head do %>
+    <%= stylesheet_link_tag "ks_blocks" %>
+  <% end %>
 
-<%= ui_page(max_width: :md) do %>
-  <%= ui_page_header(title: @flow.title.presence || @flow.slug, subtitle: flow_summary(@flow)) %>
+  <%= drawn_page(intro_page, values: intro_values) %>
+<% else %>
+  <% content_for(:title, intro_values["title"]) %>
 
-  <%= ui_section do %>
-    <div class="flex flex-wrap items-center gap-3">
-      <% if @flow.each_step? && @flow.definition.present? && !previewing? %>
-        <%= ui_form(action: alembic.flow_runs_path(@flow.slug), method: :post) do %>
-          <%= ui_button(label: @flow.start_label.presence || "Start", type: :submit) %>
-        <% end %>
-      <% else %>
-        <%= ui_button(label: @flow.start_label.presence || "Start", href: first_step_path(@flow.slug)) %>
-      <% end %>
+  <section class="py-20 md:py-28">
+    <div class="max-w-2xl mx-auto px-6">
+      <%= alembic_hero_block(headline: intro_values["title"], text: intro_values["summary"]) %>
+      <%= alembic_facts_block(question_count: intro_values["question_count"]) { "{question_count} | questions" } %>
+      <%= alembic_start_block(label: @flow.start_label.presence || "Start →", start_path: intro_values["start_path"],
+            starts_a_run: intro_values["starts_a_run"]) %>
     </div>
-  <% end %>
+  </section>
 <% end %>

data/app/views/alembic/flows/step.html.erb

@@ -0,0 +1,47 @@
+<% content_for(:title, @guide.headline) %>
+
+<section class="py-20 md:py-28">
+  <div class="max-w-2xl mx-auto px-6">
+    <%= link_to "← Start over", flow_start_path(@guide.slug), class: "text-sm text-accent-600 hover:text-accent-700" %>
+
+    <% answered = @answers.size %>
+    <% questions = answered + @guide.questions_left(@answers) %>
+    <div class="mt-6 flex items-center justify-between text-sm text-gray-500 mb-2">
+      <span>Question <%= answered + 1 %> of <%= questions %></span>
+    </div>
+    <div class="h-1.5 bg-gray-100 rounded-full overflow-hidden mb-8">
+      <i class="block h-full bg-accent-600 rounded-full transition-all" style="width:<%= (answered * 100.0 / [ questions, 1 ].max).round %>%"></i>
+    </div>
+
+    <% if flash[:alert] %>
+      <div class="mt-6"><%= ui_alert(message: flash[:alert], type: :error) %></div>
+    <% end %>
+
+    <% if @waiting %>
+      <p class="mt-6 text-gray-700">Waiting for <%= @waiting %>.</p>
+    <% else %>
+      <%= form_with url: step_form[:url], method: step_form[:method], data: { turbo: false }, class: "mt-6" do %>
+        <%= hidden_field_tag :asked, @question.id %>
+        <% if carries_answers? %>
+          <% @answers.each do |key, value| %>
+            <%= hidden_field_tag "answers[#{key}]", value %>
+          <% end %>
+        <% end %>
+
+        <% if @question.respond_to?(:choices) %>
+          <%= render "alembic/flows/question", question: @question, category: step_category(@question),
+                shows_values: shows_answer_values? %>
+        <% else %>
+          <%= render @drawing, step: @question %>
+        <% end %>
+
+        <div class="mt-8 flex items-center gap-4">
+          <%= ui_button(label: "Next", type: :submit) %>
+          <% if @answers.any? %>
+            <button type="submit" name="back" value="1" formnovalidate class="cursor-pointer text-sm text-gray-500 underline underline-offset-2 hover:text-gray-900">← Back</button>
+          <% end %>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</section>

data/app/views/alembic/flows/summary_page.html.erb

@@ -0,0 +1,5 @@
+<% content_for :head do %>
+  <%= stylesheet_link_tag "ks_blocks" %>
+<% end %>
+
+<%= drawn_page(@summary_page, values: summary_values) %>

data/app/views/alembic/manage/flows/_outputs.html.erb

@@ -0,0 +1,61 @@
+<%= ui_section(title: "What it works out") do %>
+  <% uncategorised.each do |question| %>
+    <div class="mb-4" data-problem>
+      <%= ui_alert(type: :warning, message: "#{EasyFlow::Steps::Question.asked(question)} has no category, so it counts toward no category's score.") %>
+    </div>
+  <% end %>
+  <% outputs.each_with_index do |output, index| %>
+    <% field = "flow[outputs][#{index}]" %>
+    <div data-output-editor="<%= output["id"] %>" class="mb-6">
+      <%= hidden_field_tag "#{field}[id]", output["id"], id: nil %>
+      <%= hidden_field_tag "#{field}[type]", output["type"], id: nil %>
+      <p class="mb-1 text-sm ks-tone-muted"><%= output["type"] %></p>
+      <%= ui_input(name: "#{field}[label]", value: output["label"]) %>
+      <% if output["type"] == "band" %>
+        <% (Array(output["bands"]) + [ {} ]).each_with_index do |band, position| %>
+          <div class="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-3" data-band>
+            <%= ui_input(name: "#{field}[bands][#{position}][name]", value: band["name"], placeholder: "Name") %>
+            <%= ui_input(name: "#{field}[bands][#{position}][ceiling]", value: band["ceiling"], type: :number, placeholder: "Up to, below") %>
+            <%= ui_input(name: "#{field}[bands][#{position}][description]", value: band["description"], placeholder: "Description") %>
+          </div>
+        <% end %>
+      <% end %>
+      <% if output["type"] == "outcome" %>
+        <label class="ks-label mb-1 mt-3">Rules, first that holds wins</label>
+        <%= ui_textarea(name: "#{field}[rules_text]", value: alembic_rules_text(output["rules"]), rows: 4) %>
+        <% (Array(output["entries"]) + [ {} ]).each_with_index do |entry, position| %>
+          <% place = "#{field}[entries][#{position}]" %>
+          <% texts = alembic_entry_texts(entry) %>
+          <div class="mt-4 space-y-2 border-t border-(color:--ks-color-divider) pt-4" data-outcome-entry>
+            <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+              <%= ui_input(name: "#{place}[key]", value: entry["key"], placeholder: "Key the rules name") %>
+              <%= ui_input(name: "#{place}[label]", value: entry["label"], placeholder: "Label, such as Tier 1") %>
+              <%= ui_input(name: "#{place}[name]", value: entry["name"], placeholder: "Name") %>
+              <%= ui_input(name: "#{place}[tagline]", value: entry["tagline"], placeholder: "Tagline") %>
+            </div>
+            <%= ui_textarea(name: "#{place}[facts_text]", value: texts["facts_text"], rows: 3, placeholder: "Facts, one per line: Label | value") %>
+            <%= ui_textarea(name: "#{place}[sections_text]", value: texts["sections_text"], rows: 4, placeholder: "Sections, one per line: Heading | text | result note") %>
+            <%= ui_textarea(name: "#{place}[steps_text]", value: texts["steps_text"], rows: 6, placeholder: "Steps: a title line, then code, with --- between steps") %>
+          </div>
+        <% end %>
+      <% end %>
+      <% if output["type"] == "lowest" %>
+        <label class="ks-label mb-1 mt-3">How many to name</label>
+        <%= ui_input(name: "#{field}[count]", value: output["count"], type: :number) %>
+        <% categories.each do |category| %>
+          <div class="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-3" data-category-copy>
+            <p class="text-sm"><%= category %></p>
+            <%= ui_input(name: "#{field}[copy][#{category}][miss]", value: output.dig("copy", category, "miss"), placeholder: "What it misses") %>
+            <%= ui_input(name: "#{field}[copy][#{category}][cost]", value: output.dig("copy", category, "cost"), placeholder: "What it costs") %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  <% end %>
+  <% field = "flow[outputs][#{outputs.size}]" %>
+  <div data-new-outcome class="mt-6">
+    <label class="ks-label mb-1">Add an outcome</label>
+    <%= hidden_field_tag "#{field}[type]", "outcome", id: nil %>
+    <%= ui_input(name: "#{field}[id]", placeholder: "The new outcome's id") %>
+  </div>
+<% end %>

data/app/views/alembic/manage/flows/edit.html.erb

@@ -17,6 +17,36 @@
       <%= ui_input(name: "flow[start_label]", value: @flow.start_label) %>
     <% end %>
 
+    <%= ui_section(title: "How each question is asked") do %>
+      <%= hidden_field_tag "flow[shows_answer_values]", "0", id: nil %>
+      <label class="flex items-center gap-2">
+        <%= check_box_tag "flow[shows_answer_values]", "1", @shows_answer_values %>
+        <span>Show each answer's value beside its label</span>
+      </label>
+
+      <%= hidden_field_tag "flow[asks_on_one_page]", "0", id: nil %>
+      <label class="mt-3 flex items-center gap-2">
+        <%= check_box_tag "flow[asks_on_one_page]", "1", @asks_on_one_page, disabled: @branches %>
+        <span>Ask every question on one page</span>
+      </label>
+    <% end %>
+
+    <%= ui_section(title: "Where this starts") do %>
+      <p class="mb-3"><%= link_to "Preview the intro page", alembic.manage_flow_preview_path(@flow), class: "text-sm text-(color:--ks-color-link) hover:text-(color:--ks-color-link-hover) dark:text-(color:--ks-color-link-dark) dark:hover:text-(color:--ks-color-link-hover-dark)" %></p>
+      <%= ui_select(name: "flow[intro_page_id]", selected: @intro_page&.id,
+            include_blank: "Alembic's default intro page",
+            options: @published_pages.map { |page| [ page.name, page.id ] }) %>
+    <% end %>
+
+    <%= ui_section(title: "Where this finishes") do %>
+      <p class="mb-3"><%= link_to "Preview the summary page with sample results", alembic.step_manage_flow_preview_path(@flow, answers: Alembic::Flow::PreviewValues.sample_state(@flow)), class: "text-sm text-(color:--ks-color-link) hover:text-(color:--ks-color-link-hover) dark:text-(color:--ks-color-link-dark) dark:hover:text-(color:--ks-color-link-hover-dark)" %></p>
+      <%= ui_select(name: "flow[summary_page_id]", selected: @summary_page&.id,
+            include_blank: "Alembic's default summary page",
+            options: @published_pages.map { |page| [ page.name, page.id ] }) %>
+    <% end %>
+
+    <%= render "alembic/manage/flows/outputs", outputs: @outputs, categories: @categories, uncategorised: @uncategorised %>
+
     <%= ui_section(title: "What this keeps of a run") do %>
       <%= ui_select(name: "flow[persists]", selected: @flow.persists,
             options: [ [ "Nothing", "unsaved" ],

data/app/views/alembic/manage/pages/_block_content.html.erb

@@ -1 +1 @@
-<%= shown_block(block) %>
+<%= shown_block(block, values: preview_values(page)) %>

data/app/views/alembic/manage/pages/show.html.erb

@@ -8,10 +8,19 @@
   <%= ui_button(label: "Publish", type: :submit, variant: :secondary) %>
 <% end %>
 
+<% choices = Alembic::Page::Preview.choices_for(@page) %>
+<% if choices.any? %>
+  <%= ui_form(action: alembic.preview_manage_page_path(@page), method: :patch) do %>
+    <label class="ks-label mb-1">Preview with</label>
+    <%= ui_select(name: "choice", options: choices, selected: session.dig(:alembic_preview, @page.id.to_s), include_blank: "Sample results") %>
+    <%= ui_button(label: "Show", type: :submit, variant: :secondary) %>
+  <% end %>
+<% end %>
+
 <%= ui_panel do %>
   <%= react_ui("alembic/page-builder", @payload.merge(token: form_authenticity_token)) %>
 <% end %>
 
 <%= block_contents(@page.blocks) do |block| %>
-  <%= render "alembic/manage/pages/block_content", block: block %>
+  <%= render "alembic/manage/pages/block_content", block: block, page: @page %>
 <% end %>

data/config/routes.rb

@@ -2,6 +2,7 @@ Alembic::Engine.routes.draw do
   namespace :manage do
     resources :pages, only: [ :index, :create, :show ] do
       post "publish", on: :member
+      patch "preview", on: :member
       get "layout", to: "page_blocks#layout", as: :layout
       post "blocks", to: "page_blocks#add_block", as: :blocks
       patch "blocks", to: "page_blocks#place_blocks"

data/db/migrate/20260930120000_add_summary_page_to_alembic_flow_definition_summaries.rb

@@ -0,0 +1,6 @@
+class AddSummaryPageToAlembicFlowDefinitionSummaries < ActiveRecord::Migration[8.1]
+  def change
+    add_reference :alembic_flow_definition_summaries, :summary_page,
+      foreign_key: { to_table: :alembic_pages, on_delete: :nullify }
+  end
+end