presently 0.17.2 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbd618c70d381e757d204404a473452d88cc0c1891909c6dea520364ff9eca8d
-  data.tar.gz: 487397bb18e96b517ca941dabc902ed23e65cf9f1acc4aece5c741aa9a649088
+  metadata.gz: e645cb300c0b3005e89e9c384c420e5b0702d48798738dbd5caae47fdf829059
+  data.tar.gz: d3ed14a08c1df1ee1af2b3ae7188aa40742b2f2f08e202aaf46cd6d31646020e
 SHA512:
-  metadata.gz: aecbc0cae0200a68de57dc5f5a97ab9b92db64bf06383fe6eb96aeb4eb4a41ae3c4ff86ef8f7df29498d3f4054426c3b86aca20133e1404b72adacb1184a9232
-  data.tar.gz: cb70f29e9b067804054868a486a017fd262d9407a5b2885797e1b33357060b6e39c24f2977508cc7b95dcf9e579fa5c4e688fd37f75c165036eb1c8f250e1b4c
+  metadata.gz: b3509544227b7ab61cdec9f70bcaf3487d098dc0f7a5e5c94aea4eff58b828c7c3502122e56e0f1f19cdce21846019b60fd35adfc8f4654e675dc65be25eb6a0
+  data.tar.gz: 8e701e3f6253f6c9a4385ce745a789df17027763193da89c31e72b5e8136ceec588800400d2576a1c743a25da094f768a96fab38a08096ddc8da19644b5355df

data/context/animated-diagrams.md

@@ -0,0 +1,259 @@
+# Animated Diagrams
+
+This guide explains how to design responsive, lifecycle-safe animated diagrams in Presently using semantic markup, slide-specific CSS, and Anime.js choreography.
+
+## Why Animated Diagrams?
+
+Animation is useful when a diagram describes change rather than merely structure. A carefully paced diagram can show causality, ordering, concurrency, or data movement without presenting every relationship simultaneously.
+
+Use an animated diagram when you need:
+
+- **A process unfolding over time:** Requests, protocols, state machines, and deployment workflows.
+- **Attention control:** Introduce one relationship at a time while keeping the complete layout stable.
+- **Coordinated motion:** Move packets, highlight participants, update counters, or trace paths together.
+
+Prefer a static diagram when motion does not add meaning. Prefer Presently's build effects or `slide.after()` when elements only need to appear sequentially.
+
+## Separate Structure, Appearance, and Choreography
+
+A maintainable diagram has three layers:
+
+1. The slide's Markdown file contains the complete semantic structure.
+2. A matching sidecar stylesheet defines layout and visual language.
+3. The slide script describes how the scene changes over time.
+
+For `slides/040-request-flow.md`, place its styles in `slides/040-request-flow.css`. Presently scopes that stylesheet to the matching slide automatically.
+
+Keeping the complete scene in the document makes the diagram understandable without animation, prevents layout shifts, and gives agentic tools clear boundaries for editing each concern.
+
+## Choose the Right Rendering Medium
+
+Presently does not require SVG. Choose the simplest medium that expresses the diagram:
+
+| Medium | Best suited to |
+|---|---|
+| HTML with Grid or Flexbox | Cards, services, queues, labels, dashboards, and responsive process diagrams. |
+| SVG with a `viewBox` | Edges, paths, graphs, precise coordinates, and shapes that must scale as one scene. |
+| Canvas | Large numbers of particles or frequently redrawn objects where retained DOM elements become expensive. |
+| Mixed HTML and SVG | Accessible HTML nodes over an SVG layer containing connectors and moving paths. |
+
+Start with HTML and CSS. Introduce SVG when relationships or geometry require it, not merely because the result is called a diagram.
+
+## Create a Scoped Anime.js Timeline
+
+`slide.anime(callback)` creates an Anime.js scope rooted at the current slide body. The callback receives Anime.js's exports and the raw scope:
+
+``` javascript
+slide.anime(({createTimeline, stagger}, scope) => {
+  const timeline = createTimeline({
+    autoplay: slide.animated,
+    loop: slide.animated,
+    loopDelay: 1200,
+  })
+    .add(".diagram-node", {
+      opacity: [0.35, 1],
+      y: [12, 0],
+      delay: stagger(100),
+    })
+
+  if (!slide.animated) timeline.seek(timeline.duration)
+})
+```
+
+String selectors are resolved within the slide rather than the whole document. The same scope is returned from every call to `slide.anime()` and can be used for advanced Anime.js features:
+
+``` javascript
+const scope = slide.anime()
+```
+
+Presently calls `scope.revert()` when the slide is deactivated. This cancels its animations and restores properties modified through the scope. Additional resources such as audio, observers, and third-party controls should still use `slide.defer()` or `slide.signal`.
+
+## Reuse a Diagram Across Slides
+
+Shared Markdown can define both a diagram and its Anime.js timeline. Mark the reusable setup with a `javascript presently` fence so Presently removes it from the rendered diagram and executes it before the slide-specific script:
+
+```` markdown
+<div class="request-flow">
+  <!-- Shared diagram structure. -->
+</div>
+
+```javascript presently
+slide.anime(({createTimeline}, scope) => {
+  scope.data.timeline = createTimeline({autoplay: false})
+    .label("request")
+    // Define the complete shared choreography.
+})
+```
+````
+
+Include that fragment in each slide:
+
+``` markdown
+![[shared/request-flow.md]]
+```
+
+The ordinary JavaScript block in the slide's presenter notes runs afterward and can select the state appropriate for that slide:
+
+``` javascript
+const timeline = slide.anime().data.timeline
+timeline.seek("request")
+timeline.play()
+```
+
+Every executable block has its own JavaScript lexical scope but receives the same `slide` object. Use the Anime scope's `data` or `methods` properties for intentional communication between shared setup and slide-specific control. All of those resources remain local to the rendered slide and are reverted together when it is deactivated.
+
+## Design the Static Scene First
+
+Build and style the final diagram before adding animation. Every node should have a stable position, and hidden elements should still reserve the space they require.
+
+Use a descriptive accessible label for a primarily visual scene:
+
+``` html
+<div
+  class="request-flow"
+  role="img"
+  aria-label="A request travels from the browser through the application to the database, then returns as a response."
+>
+  <!-- Complete diagram structure. -->
+</div>
+```
+
+If individual controls are interactive, keep them accessible instead of hiding the entire subtree behind `role="img"`.
+
+## Choreograph Meaning, Not Decoration
+
+Organize the timeline into meaningful phases. Introduce the structure once, then repeat only the activity that represents ongoing work. The following example reveals a stable diagram before repeatedly sending a request and response through a traffic lane:
+
+``` javascript
+slide.anime(({createTimeline, stagger}) => {
+  const traffic = createTimeline({
+    autoplay: false,
+    loop: true,
+    loopDelay: 900,
+    defaults: {ease: "inOutQuad"},
+  })
+    .add(".request", {
+      left: ["0%", "100%"],
+      opacity: [0, 1, 1, 0],
+      duration: 2200,
+    })
+    .add(".response", {
+      left: ["100%", "0%"],
+      opacity: [0, 1, 1, 0],
+      duration: 1800,
+    }, "+=350")
+
+  const intro = createTimeline({
+    autoplay: slide.animated,
+    onComplete: () => {
+      if (slide.animated) traffic.restart()
+    },
+  })
+    .add(".diagram-lane", {
+      opacity: [0, 1],
+      scaleX: [0.85, 1],
+      duration: 450,
+    })
+    .add(".diagram-node", {
+      opacity: [0.35, 1],
+      y: [10, 0],
+      delay: stagger(120),
+      duration: 500,
+    }, 150)
+    .add(".event", {
+      opacity: [0, 1],
+      y: [8, 0],
+      delay: stagger(180),
+      duration: 450,
+    }, 550)
+
+  if (!slide.animated) intro.seek(intro.duration)
+})
+```
+
+Place each moving element inside the lane which defines its path. This makes `0%` and `100%` meaningful endpoints and keeps traffic from obscuring node labels. Use separate lanes only when they communicate a meaningful distinction, such as concurrent channels or different routes.
+
+Give moving elements a hidden initial state in the sidecar stylesheet, since the repeating timeline remains paused while the scene is introduced:
+
+``` css
+.request,
+.response {
+  opacity: 0;
+}
+```
+
+Prefer transformations and opacity for continuous movement. Use CSS Grid, Flexbox, percentages, container query units, or an SVG `viewBox` to keep geometry responsive. Avoid repeatedly measuring layout inside animation callbacks.
+
+## Establish a Consistent Visual Language
+
+Use semantic classes and CSS custom properties so that meaning remains separate from a particular color or coordinate:
+
+``` css
+.diagram-node {
+  --node-color: var(--accent);
+  border: 0.08em solid var(--node-color);
+  background: color-mix(in srgb, var(--node-color) 10%, var(--slide-bg));
+}
+
+.diagram-node[data-tone="storage"] {
+  --node-color: #f90;
+}
+
+.diagram-node[data-state="active"] {
+  box-shadow: 0 0 1em color-mix(in srgb, var(--node-color) 25%, transparent);
+}
+```
+
+Useful conventions include:
+
+- `data-tone` for stable semantic roles such as client, processing, storage, success, and failure.
+- `data-state` for runtime states such as idle, active, pending, complete, and unavailable.
+- CSS variables for colors, line widths, spacing, timing, and repeated dimensions.
+- Short labels and restrained color usage so motion remains the primary cue.
+
+These conventions help separate agents generate diagrams that still look and behave like parts of the same presentation.
+
+## Static Export and Reduced Motion
+
+`slide.animated` is false during static export and when the viewer prefers reduced motion. Do not autoplay or loop in that case. Seek to a frame which communicates the diagram's result:
+
+``` javascript
+const timeline = createTimeline({
+  autoplay: slide.animated,
+  loop: slide.animated,
+})
+
+// Add the complete choreography before selecting the static frame.
+
+if (!slide.animated) timeline.seek(timeline.duration)
+```
+
+The final frame is not always the best summary. When necessary, add a timeline label and seek to that position instead.
+
+## Common Pitfalls
+
+- Do not create or remove the primary layout repeatedly during animation. Construct it once and animate its state.
+- Do not select from `document` when a selector should be scoped to the current slide.
+- Do not leave timelines, event listeners, media, or observers active after navigation.
+- Do not rely on color alone to communicate state.
+- Do not animate every available property. Motion should explain the system rather than compete with it.
+- Do not assume animation will run during export or for every viewer.
+
+## Instructions for Agentic Authoring
+
+When asking an agent to create a diagram, provide the following constraints:
+
+``` text
+Create a Presently diagram slide that explains [process].
+
+Keep semantic structure in the Markdown slide, appearance in the matching
+sidecar CSS file, and choreography in the slide's JavaScript block. Construct
+the complete scene before animating it. Use HTML/CSS unless SVG materially
+simplifies connectors or geometry. Use slide.anime() for coordinated motion,
+respect slide.animated, and choose a meaningful static export frame. Keep all
+selectors scoped to the slide, use data-state/data-tone for semantic state,
+include an accessible description, and ensure cleanup is owned by the slide.
+Use motion only to clarify causality, ordering, concurrency, or data flow.
+```
+
+Ask the agent to verify the diagram at the audience display size and in the presenter preview. It should remain legible before the animation begins, at its busiest frame, and in its static exported state.

data/context/animating-slides.md

@@ -218,6 +218,32 @@ button.addEventListener("click", handleClick, {signal: slide.signal})
 
 Aborting the signal removes this event listener; it does not invoke `handleClick`. Use `slide.defer(...)` for resources which do not accept an `AbortSignal`.
 
+## Anime.js
+
+Build effects and `slide.after()` work well for simple reveals. For coordinated motion, path animation, staggered elements, or a longer visual narrative, use `slide.anime(callback)` to create a lifecycle-managed [Anime.js](https://animejs.com/) scope.
+
+``` javascript
+slide.anime(({createTimeline, stagger}) => {
+  const timeline = createTimeline({
+    autoplay: slide.animated,
+    loop: slide.animated,
+  })
+    .add(".diagram-node", {
+      opacity: [0, 1],
+      y: [12, 0],
+      delay: stagger(100),
+    })
+
+  if (!slide.animated) timeline.seek(timeline.duration)
+})
+```
+
+The callback receives the Anime.js module API and runs inside a scope rooted at the slide body. Selectors cannot match elements in another slide. Presently reuses the scope across calls and automatically invokes `scope.revert()` when the slide is deactivated.
+
+`slide.animated` is false during static export and when the browser requests reduced motion. Configure timelines not to autoplay or loop in that case, then seek to a meaningful static frame.
+
+See [Animated Diagrams](../animated-diagrams/) for layout, choreography, accessibility, and agent-authoring guidance.
+
 ## Looping Animations with `slide.loop()`
 
 To repeat an animation indefinitely, use `slide.loop()`. The callback receives a fresh `SlideContext` each iteration and can use `after()` to schedule steps in the same way as a regular chain. The loop waits for all steps to complete and then restarts, with an optional extra pause between iterations.
@@ -251,26 +277,28 @@ All slide templates support absolutely positioned elements since the slide conta
 </div>
 ~~~
 
-In the `diagram` template, all direct `<div>` children are `position: absolute` by default, so you can build free-form layouts without repeating the positioning declaration:
+The `diagram` template centers its content by default. For coordinate-based layouts, use a `.diagram-freeform` wrapper; it fills the slide canvas and absolutely positions each direct child:
 
 ~~~ markdown
 ---
 template: diagram
 ---
 
-<div style="left: 10%; top: 20%; width: 35%; height: 30%; background: var(--surface-light);">
-  Node A
-</div>
+<div class="diagram-freeform">
+  <div style="left: 10%; top: 20%; width: 35%; height: 30%; background: var(--surface-light);">
+    Node A
+  </div>
 
-<div style="left: 55%; top: 20%; width: 35%; height: 30%; background: var(--surface-light);">
-  Node B
+  <div style="left: 55%; top: 20%; width: 35%; height: 30%; background: var(--surface-light);">
+    Node B
+  </div>
 </div>
 ~~~
 
 Combine with the scripting system to animate diagram elements into place:
 
 ``` javascript
-const nodes = slide.find("div").builder({group: "node", effect: "fade"})
+const nodes = slide.find(".diagram-freeform > div").builder({group: "node", effect: "fade"})
 nodes.show(0)
 slide
   .after(400, () => nodes.next())

data/context/getting-started.md

@@ -336,7 +336,7 @@ System architecture overview
 
 ### Diagram
 
-A free-form layout slide with a `position: relative` container. Direct `<div>` children are `position: absolute` by default, so you can place elements precisely using inline styles. Use this for custom diagrams, annotated layouts, or any slide that doesn't fit a standard template.
+A centered canvas for diagrams and other custom visual layouts, with an optional title. A single grid or flex container is usually enough to create a diagram that remains centered as the slide scales:
 
 ``` markdown
 ---
@@ -344,15 +344,21 @@ template: diagram
 duration: 60
 ---
 
-<div style="left: 10%; top: 20%; width: 35%; height: 25%;">
-  Browser
-</div>
+# Title
+
+Request lifecycle
 
-<div style="left: 55%; top: 20%; width: 35%; height: 25%;">
-  Server
+# Body
+
+<div style="display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2em; width: 80%;">
+  <div>Browser</div>
+  <div>→</div>
+  <div>Server</div>
 </div>
 ```
 
+For coordinate-based layouts, wrap the elements in `<div class="diagram-freeform">`. The wrapper fills the canvas and absolutely positions each direct child.
+
 All other templates also support absolutely positioned overlays since the slide container is `position: relative`. This lets you add callouts, badges, or annotations on top of any template's normal content.
 
 ## Transitions

data/context/index.yaml

@@ -14,3 +14,8 @@ files:
   title: Animating Slides
   description: This guide explains how to animate content within slides using the
     slide scripting system.
+- path: animated-diagrams.md
+  title: Animated Diagrams
+  description: This guide explains how to design responsive, lifecycle-safe animated
+    diagrams in Presently using semantic markup, slide-specific CSS, and Anime.js
+    choreography.

data/lib/presently/display_view.rb

@@ -60,7 +60,7 @@ module Presently
 			return unless slide
 			
 			builder.tag(:div, class: "display", data: {transition: slide.transition}) do
-				builder.tag(:div, class: "slide-container") do
+				builder.tag(:div, class: "slide-container slide-viewport") do
 					@slide_renderer.render(builder, slide)
 				end
 				

data/lib/presently/export.rb

@@ -117,7 +117,7 @@ module Presently
 						builder.text("Elapsed: #{format_duration(elapsed)}")
 					end
 					builder.tag(:span, class: "export-duration") do
-						builder.text("Slide: #{format_duration(slide.duration)}")
+						builder.text("Duration: #{format_duration(slide.duration)}")
 					end
 				end
 				

data/lib/presently/export.xrb

@@ -14,7 +14,8 @@
 		{
 			"imports": {
 				"@socketry/presently": "/_components/@socketry/presently/Presently.js",
-				"@socketry/syntax": "/_components/@socketry/syntax/Syntax.js"
+				"@socketry/syntax": "/_components/@socketry/syntax/Syntax.js",
+				"animejs": "/_components/animejs/dist/bundles/anime.esm.min.js"
 			}
 		}
 		</script>
@@ -25,7 +26,7 @@
 	<body class="export">
 		<?r self.slides.each_with_index do |slide, index| ?>
 		<div class="export-page" style="width: #{self.page_size.slide_width_px}px; height: #{self.page_size.slide_height_px + (self.notes ? self.page_size.notes_height_px : 0)}px;">
-			<div class="export-slide-area" style="width: #{self.page_size.slide_width_px}px; height: #{self.page_size.slide_height_px}px;">
+			<div class="export-slide-area slide-viewport" style="width: #{self.page_size.slide_width_px}px; height: #{self.page_size.slide_height_px}px;">
 				#{self.render_slide(slide)}
 			</div>
 			<?r if self.notes ?>

data/lib/presently/page.rb

@@ -24,6 +24,7 @@ module Presently
 			"morphdom" => "/_components/morphdom/morphdom-esm.js",
 			"@socketry/presently" => "/_components/@socketry/presently/Presently.js",
 			"@socketry/syntax" => "/_components/@socketry/syntax/Syntax.js",
+			"animejs" => "/_components/animejs/dist/bundles/anime.esm.min.js",
 		}.freeze
 		MODULES = ["/application.js"].freeze
 		

data/lib/presently/playback.xrb

@@ -19,7 +19,8 @@
 		{
 			"imports": {
 				"@socketry/presently": "/_components/@socketry/presently/Presently.js",
-				"@socketry/syntax": "/_components/@socketry/syntax/Syntax.js"
+				"@socketry/syntax": "/_components/@socketry/syntax/Syntax.js",
+				"animejs": "/_components/animejs/dist/bundles/anime.esm.min.js"
 			}
 		}
 		</script>
@@ -30,7 +31,7 @@
 	<body class="playback" data-autoplay="#{self.autoplay}" data-controls="#{self.controls}">
 		<main class="playback-stage">
 			<?r self.slides.each_with_index do |slide, index| ?>
-			<div class="playback-frame" data-index="#{index}" data-transition="#{slide.transition}" data-duration="#{slide.duration}"<?r if index != 0 ?> hidden<?r end ?>>
+			<div class="playback-frame slide-viewport" data-index="#{index}" data-transition="#{slide.transition}" data-duration="#{slide.duration}"<?r if index != 0 ?> hidden<?r end ?>>
 				#{self.render_slide(slide)}
 			</div>
 			<?r end ?>

data/lib/presently/presentation_controller.rb

@@ -3,6 +3,8 @@
 # Released under the MIT License.
 # Copyright, 2026, by Samuel Williams.
 
+require "console"
+
 require_relative "clock"
 require_relative "presentation"
 require_relative "state"
@@ -21,9 +23,9 @@ module Presently
 			@current_index = 0
 			@clock = Clock.new
 			@listeners = []
-			@state = state
 			
-			@state&.restore(self)
+			state&.restore(self)
+			@state = state
 		end
 		
 		# @attribute [Presentation] The underlying presentation data.

data/lib/presently/presenter_view.rb

@@ -110,7 +110,7 @@ module Presently
 				else "on-time"
 				end
 				
-				builder.tag(:div, class: "timing-info #{pacing_class}") do
+				builder.tag(:div, class: "toolbar timing-info #{pacing_class}") do
 					builder.tag(:button,
 						class: "pause-button",
 						onClick: forward_event(action: "pause")
@@ -151,7 +151,7 @@ module Presently
 					
 					if slide
 						builder.tag(:span, class: "slide-duration") do
-							builder.text("Slide: #{format_duration(slide.duration)}")
+							builder.text("Duration: #{format_duration(slide.duration)}")
 						end
 					end
 					
@@ -191,21 +191,26 @@ module Presently
 			
 			builder.tag(:div, class: "presenter") do
 				# Controls bar
-				builder.tag(:div, class: "controls") do
+				builder.tag(:div, class: "toolbar controls") do
 					builder.tag(:button,
 						onClick: forward_event(action: "previous")
 					) do
 						builder.text("← Previous")
 					end
 					
+					builder.tag(:button,
+						onClick: forward_event(action: "next")
+					) do
+						builder.text("Next →")
+					end
+					
 					builder.tag(:span, class: "slide-info") do
-						builder.text("Slide #{@controller.current_index + 1} of #{@controller.slide_count}")
+						builder.tag(:span, class: "slide-position") do
+							builder.text("Slide #{@controller.current_index + 1} of #{@controller.slide_count}")
+						end
 						
 						if slide
-							builder.text(" · ")
-							builder.tag(:code, class: "slide-path") do
-								builder.text(slide.path)
-							end
+							render_slide_path(builder, slide.path)
 							
 							if editor_url = editor_url_for(slide.source_path)
 								builder.tag(:a, href: editor_url, class: "edit-link") do
@@ -215,12 +220,6 @@ module Presently
 						end
 					end
 					
-					builder.tag(:button,
-						onClick: forward_event(action: "next")
-					) do
-						builder.text("Next →")
-					end
-					
 					# Jump-to dropdown for marked slides
 					markers = []
 					@controller.slides.each_with_index do |s, i|
@@ -232,7 +231,7 @@ module Presently
 					unless markers.empty?
 						builder.tag(:select,
 							class: "jump-to",
-							data: {live_id: @id}
+							"data-live-id": @id
 						) do
 							builder.tag(:option, value: "", disabled: true, selected: true) do
 								builder.text("Jump to…")
@@ -259,7 +258,7 @@ module Presently
 					# Current slide
 					builder.tag(:div, class: "preview current-preview") do
 						builder.tag(:h3){builder.text("Current")}
-						builder.tag(:div, class: "preview-frame") do
+						builder.tag(:div, class: "preview-frame slide-viewport") do
 							@preview_renderer.render(builder, slide)
 						end
 					end
@@ -267,7 +266,7 @@ module Presently
 					# Next slide
 					builder.tag(:div, class: "preview next-preview") do
 						builder.tag(:h3){builder.text("Next")}
-						builder.tag(:div, class: "preview-frame") do
+						builder.tag(:div, class: "preview-frame slide-viewport") do
 							if next_slide
 								@preview_renderer.render(builder, next_slide)
 							else

data/lib/presently/recording_view.rb

@@ -80,7 +80,7 @@ module Presently
 				render_navigation(builder, slide)
 				
 				builder.tag(:div, class: "recording-workspace") do
-					builder.tag(:div, class: "recording-preview") do
+					builder.tag(:div, class: "recording-preview slide-viewport") do
 						@slide_renderer.render(builder, slide)
 					end
 					
@@ -124,20 +124,21 @@ module Presently
 		# @parameter builder [XRB::Builder] The HTML builder.
 		# @parameter slide [Slide] The current slide.
 		def render_navigation(builder, slide)
-			builder.tag(:div, class: "controls recording-navigation") do
+			builder.tag(:div, class: "toolbar controls recording-navigation") do
 				builder.tag(:button, onClick: forward_event(action: "previous")){builder.text("← Previous")}
+				builder.tag(:button, onClick: forward_event(action: "next")){builder.text("Next →")}
 				
 				builder.tag(:span, class: "slide-info") do
-					builder.text("Slide #{@controller.current_index + 1} of #{@controller.slide_count} · ")
-					builder.tag(:code, class: "slide-path"){builder.text(slide.path)}
+					builder.tag(:span, class: "slide-position") do
+						builder.text("Slide #{@controller.current_index + 1} of #{@controller.slide_count}")
+					end
+					render_slide_path(builder, slide.path)
 					
 					if editor_url = editor_url_for(slide.source_path)
 						builder.tag(:a, href: editor_url, class: "edit-link"){builder.text("✎")}
 					end
 				end
 				
-				builder.tag(:button, onClick: forward_event(action: "next")){builder.text("Next →")}
-				
 				markers = @controller.slides.each_with_index.filter_map do |candidate, index|
 					[index, candidate.marker] if candidate.marker
 				end