presently 0.22.0 → 0.24.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bceb99c19c4563f60e51fe3e17cce836c7176ebd9b695919af5737ccc87fd4ca
-  data.tar.gz: 102b2bbab9019d17c5aadb85c3f40044c1e94bdb2e587482c246d0c184f5fa36
+  metadata.gz: ff7fb5b5f79f21fe8d6ebae384ee3e8454fe85012c209568d244b40840898774
+  data.tar.gz: ba3b8d4703af77058b4abfc2343032cc778ce61487f52b70ef6cb7643547001a
 SHA512:
-  metadata.gz: 8edf0ac3857670ce3afe65522bdf9d560b2f909fb68a85a43161200047f6a8fe588be5bef3ee685ca007a927d47999b5afc7c0db65ae43896c78b018ec347ffc
-  data.tar.gz: b8cca4183e4494e9fdd2923e429bc3bdca75310f127eba5474f410214c90f2cd5a0b2d89bb03df1e887673d30b81ebb45320b3af5853b73f137e6fbe6c2554f7
+  metadata.gz: d75218dd736c68eb3022142ea6bb3305a0db487f823a915175f11f8774b01ef5a6cba0b2cfa4cabb2f881367896d5c9d331a944a1d5e09295d86c5237066f918
+  data.tar.gz: 13c3042a25f7f664efec66a0be216e38edd3d8a087248d3236727d35e509c9d3787e50698b06984e6cde3a3ec52e876c894a1a6110e5cca8d48aed812a096270

data/context/animating-slides.md

@@ -29,6 +29,20 @@ The script receives a `slide` object — an instance of the `Slide` class export
 
 If the script contains a syntax error or throws an exception, the error is logged to the browser console and the presentation continues unaffected.
 
+## Flicker-Free Initial State
+
+Presently keeps a scripted slide hidden until its scripts have run. Any visibility or styling that defines the slide's initial state must therefore be applied synchronously at the top level of the script:
+
+``` javascript
+const bullets = slide.find("li").builder({effect: "fade"})
+bullets.show(0)
+bullets.play(500)
+```
+
+Use `slide.after()`, `setTimeout()`, promises, and `requestAnimationFrame()` only for changes that occur after the initial state is established. Deferring the initial `show()` call allows the slide to become visible before the callback runs and can expose its uninitialized content for a frame.
+
+Integrations using `SlideRendering#render(update)` have the same requirement: `update` must mutate the supplied view synchronously. Presently runs the new slide's scripts immediately after that update, before yielding to asynchronous syntax highlighting or code-focus preparation.
+
 ## The Slide API
 
 ### `slide.find(selector)`

data/lib/presently/application.rb

@@ -11,7 +11,7 @@ require_relative "presentation_controller"
 require_relative "home_view"
 require_relative "display_view"
 require_relative "presenter_view"
-require_relative "recording_view"
+require_relative "recorder_view"
 require_relative "recordings"
 require_relative "slide_assets"
 require_relative "playback"
@@ -44,7 +44,7 @@ module Presently
 		# The view classes that this application allows.
 		# @returns [Array(Class)] The allowed view classes.
 		def allowed_views
-			[HomeView, DisplayView, PresenterView, RecordingView]
+			[HomeView, DisplayView, PresenterView, RecorderView, RecordingControlsView]
 		end
 		
 		# The shared state passed to all views via the resolver.
@@ -60,7 +60,7 @@ module Presently
 				templates = Templates.for(@templates_roots)
 				presentation = Presentation.load(@slides_root, templates)
 				
-				PresentationController.new(presentation, state: State.new)
+				PresentationController.new(presentation, state: State.new, recordings: @recordings)
 			end
 		end
 		
@@ -89,9 +89,9 @@ module Presently
 			
 			router.get("/display"){make_page(resolver.root(DisplayView), interface: :display).call}
 			router.get("/presenter"){make_page(resolver.root(PresenterView), interface: :presenter).call}
-			router.get("/record"){make_page(resolver.root(RecordingView), interface: :recorder).call}
+			router.get("/recorder"){make_page(resolver.root(RecorderView), interface: :recorder).call}
 			
-			router.route("/recordings", methods: ["GET", "HEAD", "PUT"]) do |request|
+			router.route("/recordings", methods: ["GET", "HEAD", "PUT", "PATCH"]) do |request|
 				handle_recording(request, request_parameters(request))
 			end
 			
@@ -159,10 +159,38 @@ module Presently
 			when "GET", "HEAD"
 				serve_recording(request, slide, @recordings)
 			when "PUT"
-				store_recording(request, slide)
+				duration = recording_duration(parameters)
+				if parameters.key?("duration") && !duration
+					return invalid_recording_duration
+				end
+				
+				store_recording(request, slide, duration: duration)
+			when "PATCH"
+				duration = recording_duration(parameters)
+				return invalid_recording_duration unless duration
+				return Protocol::HTTP::Response[404, [], ["Recording not found."]] unless @recordings.exist?(slide)
+				
+				slide.update_duration!(duration)
+				Protocol::HTTP::Response[200, [["content-type", "application/json"]], ["{\"updated\":true,\"duration\":#{duration}}"]]
+			end
+		end
+		
+		# Parse an optional positive recording duration.
+		# @parameter parameters [Hash] The decoded query parameters.
+		# @returns [Integer | Nil] The duration in seconds, or `nil` when absent or invalid.
+		def recording_duration(parameters)
+			if value = parameters["duration"]
+				duration = Integer(value, exception: false)
+				return duration if duration&.positive?
 			end
 		end
 		
+		# Build the response for an invalid recording duration.
+		# @returns [Protocol::HTTP::Response] A bad request response.
+		def invalid_recording_duration
+			Protocol::HTTP::Response[400, [], ["Duration must be a positive number of seconds."]]
+		end
+		
 		# Serve normalized narration for playback, falling back to the source take.
 		def handle_playback_recording(request, parameters)
 			index = recording_index(parameters)
@@ -206,7 +234,7 @@ module Presently
 		# @parameter request [Protocol::HTTP::Request] The incoming request.
 		# @parameter slide [Slide] The slide being recorded.
 		# @returns [Protocol::HTTP::Response]
-		def store_recording(request, slide)
+		def store_recording(request, slide, duration: nil)
 			content_type = request.headers["content-type"]&.split(";", 2)&.first
 			unless content_type == Recordings::CONTENT_TYPE
 				return Protocol::HTTP::Response[415, [], ["Expected #{Recordings::CONTENT_TYPE}."]]
@@ -217,7 +245,10 @@ module Presently
 			end
 			
 			@recordings.write(slide, request.body)
-			Protocol::HTTP::Response[201, [["content-type", "application/json"]], ["{\"saved\":true}"]]
+			slide.update_duration!(duration) if duration
+			
+			result = duration ? "{\"saved\":true,\"duration\":#{duration}}" : "{\"saved\":true}"
+			Protocol::HTTP::Response[201, [["content-type", "application/json"]], [result]]
 		rescue Recordings::TooLarge => error
 			Protocol::HTTP::Response[413, [], [error.message]]
 		end

data/lib/presently/home_view.rb

@@ -20,7 +20,7 @@ module Presently
 				description: "Control the presentation with speaker notes, timing, and slide previews.",
 			},
 			{
-				href: "/record",
+				href: "/recorder",
 				title: "Narration Recorder",
 				description: "Record, review, and save narration for each slide.",
 			},

data/lib/presently/page.rb

@@ -29,6 +29,7 @@ module Presently
 		].freeze
 		IMPORTS = {
 			"live" => "/_components/@socketry/live/Live.js",
+			"@socketry/live" => "/_components/@socketry/live/Live.js",
 			"live-audio" => "/_components/@socketry/live-audio/Live/Audio.js",
 			"morphdom" => "/_components/morphdom/morphdom-esm.js",
 			"@socketry/presently" => "/_components/@socketry/presently/Presently.js",

data/lib/presently/playback.xrb

@@ -19,6 +19,7 @@
 		<script type="importmap">
 		{
 			"imports": {
+				"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"
@@ -31,12 +32,17 @@
 	
 	<body class="playback" data-autoplay="#{self.autoplay}" data-controls="#{self.controls}">
 		<main class="playback-stage">
+			<div id="playback-frame" class="playback-frame slide-viewport"></div>
+		</main>
+
+		<!-- Keep inactive slides inert while retaining their rendered HTML for local navigation. -->
+		<div class="playback-slides" hidden>
 			<?r self.slides.each_with_index do |slide, index| ?>
-			<div class="playback-frame slide-viewport" data-index="#{index}" data-transition="#{slide.transition}" data-duration="#{slide.duration}"<?r if index != 0 ?> hidden<?r end ?>>
+			<template data-index="#{index}" data-transition="#{slide.transition}" data-duration="#{slide.duration}">
 				#{self.render_slide(slide)}
-			</div>
+			</template>
 			<?r end ?>
-		</main>
+		</div>
 		
 		<div class="playback-audio" hidden>
 			<?r self.slides.each_with_index do |slide, index| ?>

data/lib/presently/presentation_controller.rb

@@ -18,8 +18,10 @@ module Presently
 		# Initialize a new controller for the given presentation.
 		# @parameter presentation [Presentation] The presentation to control.
 		# @parameter state [State | Nil] The state persistence object. If provided, state is saved on changes and restored on initialization.
-		def initialize(presentation, state: nil)
+		# @parameter recordings [Recordings | Nil] The narration recording store, when recording is enabled.
+		def initialize(presentation, state: nil, recordings: nil)
 			@presentation = presentation
+			@recordings = recordings
 			@current_index = 0
 			@clock = Clock.new
 			@listeners = []
@@ -55,6 +57,13 @@ module Presently
 			@presentation.slides[@current_index]
 		end
 		
+		# Whether the given slide has a narration recording.
+		# @parameter slide [Slide] The slide to check.
+		# @returns [Boolean]
+		def recording_available?(slide)
+			@recordings&.exist?(slide) || false
+		end
+		
 		# The slide following the current one.
 		# @returns [Slide | Nil] The next slide, or `nil` if on the last slide.
 		def next_slide

data/lib/presently/{recording_view.rb → recorder_view.rb}

@@ -4,6 +4,7 @@
 # Copyright, 2026, by Samuel Williams.
 
 require_relative "editor"
+require_relative "recording_controls_view"
 require_relative "slide_view"
 require_relative "slide_renderer"
 
@@ -13,7 +14,7 @@ module Presently
 	# Recording is intentionally separate from {PresenterView}: presenting is a
 	# live performance interface, while recording is an authoring workflow with
 	# retakes, playback, and explicit saving.
-	class RecordingView < SlideView
+	class RecorderView < SlideView
 		# Initialize a recording view.
 		# @parameter id [String] The unique element identifier.
 		# @parameter data [Hash] The element data attributes.
@@ -22,6 +23,7 @@ module Presently
 			super(id, data)
 			@controller = controller
 			@slide_renderer = SlideRenderer.new(css_class: "slide recording-slide", templates: controller.templates)
+			@recording_controls = RecordingControlsView.mount(self, "recording-controls", controller: controller)
 		end
 		
 		# Bind this view to a page and register for slide changes.
@@ -73,9 +75,6 @@ module Presently
 			slide = @controller.current_slide
 			return unless slide
 			
-			index = @controller.current_index
-			recording_url = "/recordings?index=#{index}"
-			
 			builder.tag(:div, class: "recorder") do
 				render_navigation(builder, slide)
 				
@@ -88,21 +87,7 @@ module Presently
 						builder.tag(:section, class: "recording-panel") do
 							builder.tag(:h2){builder.text("Narration")}
 							builder.tag(:p){builder.text("Record, review, and save one audio track for this slide.")}
-							
-							builder.tag("presently-recorder",
-								id: "presently-recorder-#{index}",
-								"data-recording-url": recording_url
-							) do
-								builder.tag(:div, class: "recording-actions") do
-									builder.tag(:button, class: "recording-toggle", type: "button"){builder.text("● Record")}
-									builder.tag(:button, class: "recording-save", type: "button", disabled: true){builder.text("Save")}
-									builder.tag(:span, class: "recording-indicator", "aria-hidden": "true"){}
-									builder.tag(:span, class: "recording-time"){builder.text("0:00")}
-								end
-								
-								builder.tag(:audio, class: "recording-playback", controls: true, preload: "metadata", hidden: true){}
-								builder.tag(:p, class: "recording-status", role: "status"){builder.text("Checking for an existing recording…")}
-							end
+							builder << @recording_controls.to_html
 						end
 						
 						builder.tag(:section, class: "recording-notes") do

data/lib/presently/recording_controls_view.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+# Released under the MIT License.
+# Copyright, 2026, by Samuel Williams.
+
+require "live"
+
+module Presently
+	# The persistent narration controls nested within {RecorderView}.
+	class RecordingControlsView < Live::View
+		# Initialize the recording controls view.
+		# @parameter id [String] The stable element identifier.
+		# @parameter data [Hash] The element data attributes.
+		# @parameter controller [PresentationController] The shared presentation controller.
+		def initialize(id, data, controller:)
+			super(id, data)
+			@controller = controller
+		end
+		
+		# Use the client-side recorder as this live view's custom element.
+		def tag_name
+			"presently-recording-controls"
+		end
+		
+		# Render the recorder host. Its shadow DOM owns the controls themselves.
+		# @parameter builder [XRB::Builder] The HTML builder.
+		def build_markup(builder)
+			slide = @controller.current_slide
+			return unless slide
+			
+			index = @controller.current_index
+			recording_present = @controller.recording_available?(slide)
+			
+			builder.inline_tag(tag_name,
+				id: @id,
+				data: @data,
+				"data-slide-index": index,
+				"data-recording-url": "/recordings?index=#{index}",
+				"data-slide-duration": slide.duration,
+				"data-recording-state": recording_present ? "present" : "missing"
+			)
+		end
+	end
+end

data/lib/presently/slide.rb

@@ -6,6 +6,7 @@
 require "yaml"
 require "markly"
 require "protocol/url"
+require "tempfile"
 
 require "markly/renderer/html"
 
@@ -353,6 +354,47 @@ module Presently
 			@front_matter&.fetch("duration", 60) || 60
 		end
 		
+		# Update the expected duration in the slide's YAML front matter.
+		# Preserves the remainder of the source file rather than reserializing it.
+		# @parameter duration [Integer] The new positive duration in seconds.
+		# @returns [Integer] The persisted duration.
+		def update_duration!(duration)
+			duration = Integer(duration)
+			raise ArgumentError, "Duration must be positive!" unless duration.positive?
+			
+			path = source_path
+			source = File.read(path)
+			newline = source.include?("\r\n") ? "\r\n" : "\n"
+			
+			front_matter_pattern = /\A---[ \t]*(?<newline>\r?\n)(?<body>.*?)(?<closing>^---[ \t]*(?:\r?\n|\z))/m
+			if match = front_matter_pattern.match(source)
+				body = match[:body]
+				
+				if line = /^duration:[^#\r\n]*(?<comment>[ \t]+#[^\r\n]*)?(?<newline>\r?\n|\z)/.match(body)
+					replacement = "duration: #{duration}#{line[:comment]}#{line[:newline]}"
+					body = body[0...line.begin(0)] + replacement + body[line.end(0)..]
+				else
+					body += match[:newline] unless body.empty? || body.end_with?("\n")
+					body += "duration: #{duration}#{match[:newline]}"
+				end
+				
+				source = source[0...match.begin(:body)] + body + source[match.end(:body)..]
+			else
+				source = "---#{newline}duration: #{duration}#{newline}---#{newline}#{source}"
+			end
+			
+			stat = File.stat(path)
+			Tempfile.create([".presently-slide", ".md"], File.dirname(path), binmode: true) do |file|
+				file.chmod(stat.mode & 0o7777)
+				file.write(source)
+				file.flush
+				File.rename(file.path, path)
+			end
+			
+			(@front_matter ||= {})["duration"] = duration
+			return duration
+		end
+		
 		# The title of this slide.
 		# @returns [String] The H1 text, front matter title, or filename without extension.
 		def title

data/lib/presently/slide_renderer.rb

@@ -45,7 +45,9 @@ module Presently
 			scope = TemplateScope.new(slide)
 			html = template.to_string(scope)
 			
-			classes = [@css_class, extra_class].compact.join(" ")
+			classes = [@css_class, extra_class]
+			classes << "slide-scripted" unless slide.scripts.empty?
+			classes = classes.compact.join(" ")
 			path = Stylesheet.encode_path(slide.path)
 			
 			builder.tag(:div, class: "slide-surface", data: {template: slide.template}) do

data/lib/presently/version.rb

@@ -5,5 +5,5 @@
 
 # @namespace
 module Presently
-	VERSION = "0.22.0"
+	VERSION = "0.24.0"
 end

data/lib/presently.rb

@@ -8,7 +8,7 @@ require_relative "presently/version"
 require_relative "presently/recordings"
 require_relative "presently/stylesheet"
 require_relative "presently/recordings/normalizer"
-require_relative "presently/recording_view"
+require_relative "presently/recorder_view"
 require_relative "presently/playback"
 require_relative "presently/application"
 require_relative "presently/environment/application"

data/public/_components/@socketry/presently/Presently/Scripts.js

@@ -25,6 +25,9 @@ export function runScript(slideEl, {animated = true} = {}) {
 		}
 	} catch (error) {
 		console.error('Slide script error:', error);
+	} finally {
+		// Scripted slides remain hidden until their initial state has been applied.
+		slideEl.dataset.slideReady = '';
 	}
 
 	return slide;

data/public/_components/@socketry/presently/Presently/SlideRendering.js

@@ -12,15 +12,13 @@ async function prepareSlides() {
 // Owns the scripts and view transition associated with one rendering of a slide view.
 export class SlideRendering {
 	#view;
-	#html;
 	#transitionName;
 	#viewTransition = null;
 	#slides = [];
 	#disposed = false;
 
-	constructor(view, {html = null, transition = null} = {}) {
+	constructor(view, {transition = null} = {}) {
 		this.#view = view;
-		this.#html = html;
 		this.#transitionName = transition;
 	}
 
@@ -29,39 +27,46 @@ export class SlideRendering {
 	async initialize() {
 		if (this.#disposed) return false;
 
-		await prepareSlides();
-		if (this.#disposed) return false;
-
+		// Establish script-controlled visibility before yielding to asynchronous
+		// highlighting, so partially initialized slide content is never painted.
 		this.#view.querySelectorAll('.slide').forEach(slideElement => {
 			const slide = runScript(slideElement);
 			if (slide) this.#slides.push(slide);
 		});
 
-		return true;
+		await prepareSlides();
+		return !this.#disposed;
 	}
 
 	// Update the view, initialize its slides, and emit the change event.
-	// @parameter live [Live] The connected Live client.
+	// The update must mutate the view synchronously so slide scripts can establish
+	// their initial state before the browser can paint the updated DOM.
+	// @parameter update [Function] Updates the view's DOM synchronously.
 	// @returns [Promise(Boolean)] Whether the rendering was completed.
-	async render(live) {
+	async render(update) {
 		if (this.#disposed) return false;
 
 		let initialized = false;
-		const update = async () => {
+		const render = async () => {
 			if (this.#disposed) return;
 
-			live.update(this.#view.id, this.#html);
+			update(this.#view);
 			initialized = await this.initialize();
 		};
 
-		if (this.#transitionName && document.startViewTransition) {
+		if (this.#transitionName && document.startViewTransition && !document.hidden) {
 			document.documentElement.dataset.transition = this.#transitionName;
 			let viewTransition = null;
 
 			try {
-				viewTransition = document.startViewTransition(update);
+				viewTransition = document.startViewTransition(render);
 				this.#viewTransition = viewTransition;
-				await viewTransition.finished;
+
+				// A hidden document may abort the visual transition, but the DOM update should still complete.
+				viewTransition.ready.catch(() => {});
+				const finished = viewTransition.finished.catch(() => {});
+				await viewTransition.updateCallbackDone;
+				await finished;
 			} finally {
 				if (this.#viewTransition === viewTransition) {
 					this.#viewTransition = null;
@@ -69,7 +74,7 @@ export class SlideRendering {
 				}
 			}
 		} else {
-			await update();
+			await render();
 		}
 
 		if (initialized && !this.#disposed) {

data/public/_static/recorder.css

@@ -55,62 +55,81 @@
 	opacity: 0.65;
 }
 
-presently-recorder {
+presently-recording-controls {
 	display: grid;
 	gap: 1rem;
+	/* Preserve the completed control layout while the client component upgrades. */
+	min-block-size: 12.5rem;
 }
 
-.recording-actions {
+presently-recording-controls::part(actions) {
 	display: flex;
 	align-items: center;
 	gap: 0.6rem;
 }
 
-.recording-actions button {
+presently-recording-controls::part(toggle),
+presently-recording-controls::part(save),
+presently-recording-controls::part(apply-duration) {
+	box-sizing: border-box;
 	padding: 0.55rem 0.9rem;
 	background: var(--surface-light);
-	border: 1px solid rgba(255,255,255,0.12);
+	border: 1px solid rgba(255, 255, 255, 0.12);
 	border-radius: 6px;
 	color: var(--slide-text);
 	cursor: pointer;
 	font: inherit;
+	transition:
+		background-color 120ms ease-out,
+		border-color 120ms ease-out,
+		color 120ms ease-out,
+		opacity 120ms ease-out;
 }
 
-.recording-actions button:hover:not(:disabled) {
+presently-recording-controls::part(apply-duration) {
+	justify-self: start;
+}
+
+presently-recording-controls::part(toggle):hover:not(:disabled),
+presently-recording-controls::part(save):hover:not(:disabled),
+presently-recording-controls::part(apply-duration):hover:not(:disabled) {
 	background: var(--accent);
 }
 
-.recording-actions button:disabled {
+presently-recording-controls::part(toggle):disabled,
+presently-recording-controls::part(save):disabled,
+presently-recording-controls::part(apply-duration):disabled {
 	cursor: default;
 	opacity: 0.35;
 }
 
-.recording-toggle:not(:disabled) {
+presently-recording-controls::part(toggle):not(:disabled) {
 	color: var(--accent-light);
 }
 
-presently-recorder[data-state="recording"] .recording-toggle {
+presently-recording-controls[data-recording-state="recording"]::part(toggle) {
 	color: #ef5350;
 }
 
-.recording-indicator {
+presently-recording-controls::part(indicator) {
+	box-sizing: border-box;
 	width: 0.65rem;
 	height: 0.65rem;
 	margin-left: auto;
-	background: rgba(255,255,255,0.2);
+	background: rgba(255, 255, 255, 0.2);
 	border-radius: 50%;
 }
 
-presently-recorder[data-state="preparing"] .recording-indicator,
-presently-recorder[data-state="starting"] .recording-indicator {
+presently-recording-controls[data-recording-state="preparing"]::part(indicator),
+presently-recording-controls[data-recording-state="starting"]::part(indicator) {
 	background: #f5b942;
-	box-shadow: 0 0 0 0.25rem rgba(245,185,66,0.15);
+	box-shadow: 0 0 0 0.25rem rgba(245, 185, 66, 0.15);
 	animation: recording-indicator-pulse 600ms ease-in-out infinite alternate;
 }
 
-presently-recorder[data-state="recording"] .recording-indicator {
+presently-recording-controls[data-recording-state="recording"]::part(indicator) {
 	background: #ef5350;
-	box-shadow: 0 0 0 0.25rem rgba(239,83,80,0.15);
+	box-shadow: 0 0 0 0.25rem rgba(239, 83, 80, 0.15);
 }
 
 @keyframes recording-indicator-pulse {
@@ -120,25 +139,29 @@ presently-recorder[data-state="recording"] .recording-indicator {
 	}
 }
 
-.recording-time {
+presently-recording-controls::part(time) {
 	font-family: var(--font-mono);
 	font-variant-numeric: tabular-nums;
 }
 
-.recording-playback {
+presently-recording-controls::part(playback) {
+	display: block;
 	width: 100%;
 }
 
-.recording-status {
-	min-height: 1.4em;
-	margin: 0;
-	font-size: 0.9rem;
-	opacity: 0.7;
+presently-recording-controls::part(duration-option) {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	cursor: pointer;
 }
 
-.recording-status.error {
-	color: #ff4757;
-	opacity: 1;
+@media (prefers-reduced-motion: reduce) {
+	presently-recording-controls::part(toggle),
+	presently-recording-controls::part(save),
+	presently-recording-controls::part(apply-duration) {
+		transition: none;
+	}
 }
 
 .recording-notes {

data/public/_static/slides.css

@@ -60,6 +60,11 @@
 	container-type: size;
 }
 
+/* Never expose a scripted slide before its script establishes the initial state. */
+.slide-scripted:not([data-slide-ready]) {
+	visibility: hidden;
+}
+
 @container (min-aspect-ratio: 16 / 9) {
 	.slide {
 		width: auto;