presently 0.17.2 → 0.19.0

data/public/_static/index.css

@@ -13,6 +13,7 @@
 	--on-time: #2ed573;
 	--behind: #ff4757;
 	--ahead: #ffa502;
+	--control-height: 2.25rem;
 	--font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
 	--font-mono: "JetBrains Mono", "Fira Code", monospace;
 }
@@ -31,12 +32,48 @@ html, body {
    SLIDE STYLES (shared)
    ======================== */
 
-.slide {
+.slide-viewport {
+	position: relative;
+	display: grid;
+	place-items: center;
+	overflow: hidden;
+	container-type: size;
+}
+
+.slide-surface {
 	width: 100%;
 	height: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+	display: grid;
+	place-items: center;
+	container-type: size;
+	background: var(--slide-bg);
+}
+
+.slide {
+	--slide-font-size: 2.2cqi;
+	--slide-font-body: 1em;
+	--slide-font-title: 1.8em;
+	--slide-font-heading: 1.6em;
+	--slide-font-statement: 1.5em;
+	--slide-font-secondary: 0.8em;
+	--slide-font-column: 0.84em;
+	--slide-font-code: 0.75em;
+	--slide-gutter: 3.333cqi;
+	--slide-gap: 1.667cqi;
+	--slide-radius: 0.417cqi;
+	
+	flex: none;
+	width: 100cqw;
+	height: auto;
+	aspect-ratio: 16 / 9;
+	container-type: size;
+}
+
+@container (min-aspect-ratio: 16 / 9) {
+	.slide {
+		width: auto;
+		height: 100cqh;
+	}
 }
 
 .slide-inner {
@@ -47,13 +84,15 @@ html, body {
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: 4rem;
+	padding: var(--slide-gutter);
+	font-size: var(--slide-font-size);
+	line-height: 1.5;
 }
 
 /* Default template */
 .default-template .slide-body {
-	font-size: 1.8rem;
-	line-height: 1.6;
+	font-size: var(--slide-font-body);
+	line-height: 1.5;
 	width: 100%;
 }
 
@@ -80,9 +119,9 @@ html, body {
 }
 
 .title-template .slide-title {
-	font-size: 3.5rem;
+	font-size: var(--slide-font-title);
 	font-weight: 700;
-	margin-bottom: 1rem;
+	margin-bottom: calc(var(--slide-gap) * 0.75);
 }
 
 .title-template .slide-title p {
@@ -90,7 +129,7 @@ html, body {
 }
 
 .title-template .slide-subtitle {
-	font-size: 1.8rem;
+	font-size: var(--slide-font-body);
 	opacity: 0.7;
 }
 
@@ -99,13 +138,16 @@ html, body {
 }
 
 /* Section template */
-.section-template {
+.slide-surface[data-template="section"] {
 	background: linear-gradient(135deg, var(--accent), var(--surface-light));
+}
+
+.section-template {
 	text-align: center;
 }
 
 .section-template .slide-heading {
-	font-size: 3rem;
+	font-size: var(--slide-font-heading);
 	font-weight: 700;
 }
 
@@ -116,14 +158,15 @@ html, body {
 /* Two column template */
 .two-column-template {
 	flex-direction: row;
-	gap: 3rem;
-	padding: 3rem 4rem;
+	gap: calc(var(--slide-gap) * 1.5);
+	padding: calc(var(--slide-gutter) * 0.75) var(--slide-gutter);
 }
 
 .two-column-template .column {
 	flex: 1;
-	font-size: 1.4rem;
-	line-height: 1.6;
+	min-width: 0;
+	font-size: var(--slide-font-column);
+	line-height: 1.5;
 }
 
 .two-column-template .column ul {
@@ -136,30 +179,60 @@ html, body {
 
 /* Diagram template */
 .diagram-template {
-	padding: 0;
+	padding: var(--slide-gutter);
 }
 
-.diagram-template .slide-body > div {
+.diagram-template .slide-title {
+	flex: none;
+	width: 100%;
+	margin-bottom: var(--slide-gap);
+	font-size: var(--slide-font-body);
+	font-weight: 700;
+	text-align: center;
+}
+
+.diagram-template .slide-title p {
+	margin: 0;
+}
+
+.diagram-template .slide-body {
+	display: grid;
+	flex: 1;
+	place-items: center;
+	width: 100%;
+	min-height: 0;
+}
+
+.diagram-template .diagram-freeform {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.diagram-template .diagram-freeform > * {
 	position: absolute;
 	box-sizing: border-box;
 }
 
 /* Image template */
 .image-template .slide-caption {
-	font-size: 1.6rem;
-	margin-bottom: 2rem;
+	font-size: var(--slide-font-secondary);
+	margin-bottom: var(--slide-gap);
 	text-align: center;
 }
 
 .image-template .slide-image {
-	max-width: 80%;
+	display: grid;
+	place-items: center;
+	width: min(80cqi, 100%);
+	max-height: 65cqb;
 	text-align: center;
 }
 
-.image-template .slide-image img {
+.image-template .slide-image :is(img, video, svg, iframe) {
 	max-width: 100%;
-	max-height: 60vh;
-	border-radius: 8px;
+	max-height: 65cqb;
+	border-radius: var(--slide-radius);
 }
 
 /* Hide raw code blocks until syntax-js upgrades them */
@@ -273,11 +346,11 @@ pre > syntax-code {
 /* Statement template */
 .statement-template {
 	text-align: center;
-	gap: 2rem;
+	gap: var(--slide-gap);
 }
 
 .statement-template .slide-statement {
-	font-size: 2.5rem;
+	font-size: var(--slide-font-statement);
 	font-weight: 600;
 	line-height: 1.4;
 	width: 100%;
@@ -293,9 +366,9 @@ pre > syntax-code {
 
 /* Shared translation style — works in any template */
 .slide-translation {
-	font-size: 1.6rem;
+	font-size: var(--slide-font-secondary);
 	opacity: 0.7;
-	margin-top: 1rem;
+	margin-top: calc(var(--slide-gap) * 0.5);
 }
 
 .slide-translation p {
@@ -337,14 +410,14 @@ mermaid-diagram {
 
 /* Code template */
 .code-template {
-	padding: 2rem 3rem;
+	padding: var(--slide-gap) calc(var(--slide-gutter) * 0.75);
 	align-items: stretch;
 }
 
 .code-template .code-title {
-	font-size: 1.6rem;
+	font-size: var(--slide-font-secondary);
 	font-weight: 600;
-	margin-bottom: 1rem;
+	margin-bottom: calc(var(--slide-gap) * 0.5);
 }
 
 .code-template .code-title p {
@@ -355,21 +428,21 @@ mermaid-diagram {
 	position: relative;
 	flex: 1;
 	overflow: hidden;
-	border-radius: 8px;
+	border-radius: var(--slide-radius);
 	background: rgba(0, 0, 0, 0.3);
 }
 
 .code-scroll {
 	transition: transform 0.6s ease-in-out;
-	padding: 1rem;
+	padding: calc(var(--slide-gap) * 0.5);
 }
 
 .code-scroll pre {
 	margin: 0;
 	background: none;
 	padding: 0;
-	line-height: 1.6;
-	font-size: 1.5rem;
+	line-height: 1.5;
+	font-size: var(--slide-font-code);
 }
 
 /* Dim overlays */
@@ -441,29 +514,26 @@ live-view:has(.display) {
 
 /* Fade */
 html[data-transition="fade"]::view-transition-old(slide-container) {
-	animation: vt-fade-out 0.4s ease-in-out;
-}
-
-html[data-transition="fade"]::view-transition-new(slide-container) {
-	animation: vt-fade-in 0.4s ease-in-out;
+	animation: vt-fade-out 0.4s ease-in-out both;
+	z-index: 1;
 }
 
 /* Slide left */
 html[data-transition="slide-left"]::view-transition-old(slide-container) {
-	animation: vt-slide-out-left 0.4s ease-in-out;
+	animation: vt-slide-out-left 0.4s ease-in-out both;
 }
 
 html[data-transition="slide-left"]::view-transition-new(slide-container) {
-	animation: vt-slide-in-right 0.4s ease-in-out;
+	animation: vt-slide-in-right 0.4s ease-in-out both;
 }
 
 /* Slide right */
 html[data-transition="slide-right"]::view-transition-old(slide-container) {
-	animation: vt-slide-out-right 0.4s ease-in-out;
+	animation: vt-slide-out-right 0.4s ease-in-out both;
 }
 
 html[data-transition="slide-right"]::view-transition-new(slide-container) {
-	animation: vt-slide-in-left 0.4s ease-in-out;
+	animation: vt-slide-in-left 0.4s ease-in-out both;
 }
 
 /* ========================
@@ -472,8 +542,7 @@ html[data-transition="slide-right"]::view-transition-new(slide-container) {
 
 body.playback,
 .playback-stage,
-.playback-frame,
-.playback-frame > .slide {
+.playback-frame {
 	width: 100vw;
 	height: 100vh;
 }
@@ -687,21 +756,33 @@ body.playback[data-controls="false"] .playback-start-screen {
 }
 
 /* Controls */
-.controls {
+.toolbar {
 	display: flex;
 	align-items: center;
 	gap: 1rem;
+}
+
+.toolbar > button,
+.toolbar > select,
+.toolbar > .slide-info {
+	height: var(--control-height);
+	background: var(--surface-light);
+	border: 1px solid rgba(255,255,255,0.1);
+	border-radius: 6px;
+}
+
+.controls {
 	padding: 0.5rem 1rem;
 	background: var(--surface);
 	border-radius: 8px;
 }
 
 .controls button {
-	background: var(--surface-light);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	color: var(--slide-text);
-	border: 1px solid rgba(255,255,255,0.1);
-	padding: 0.5rem 1rem;
-	border-radius: 6px;
+	padding: 0 1rem;
 	cursor: pointer;
 	font-size: 0.9rem;
 	font-family: var(--font-sans);
@@ -713,11 +794,8 @@ body.playback[data-controls="false"] .playback-start-screen {
 }
 
 .controls .jump-to {
-	background: var(--surface-light);
 	color: var(--slide-text);
-	border: 1px solid rgba(255,255,255,0.1);
-	padding: 0.5rem 0.75rem;
-	border-radius: 6px;
+	padding: 0 0.75rem;
 	font-size: 0.9rem;
 	font-family: var(--font-sans);
 	cursor: pointer;
@@ -728,22 +806,61 @@ body.playback[data-controls="false"] .playback-start-screen {
 	background: var(--accent);
 }
 
-.controls button.reload {
-	margin-left: auto;
-}
-
 .controls .slide-info {
 	font-size: 1rem;
+	display: flex;
+	align-items: stretch;
+	flex: 1 1 0;
+	min-width: 0;
+	white-space: nowrap;
+	overflow: hidden;
+}
+
+.controls .slide-position,
+.controls .edit-link {
+	flex: 0 0 auto;
+}
+
+.controls .slide-position {
+	display: flex;
+	align-items: center;
+	padding: 0 0.75rem;
+	font-size: 0.9rem;
 	opacity: 0.8;
 }
 
 .controls .slide-path {
 	font-size: 0.8rem;
 	opacity: 0.6;
+	display: inline-flex;
+	align-items: center;
+	flex: 0 1 auto;
+	min-width: 0;
+	padding: 0 0.6rem;
+	border-left: 1px solid rgba(255,255,255,0.1);
+}
+
+.controls .slide-path-directory,
+.controls .slide-path-filename {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.controls .slide-path-directory {
+	flex: 1 1 0;
+}
+
+.controls .slide-path-filename {
+	flex: 0 1 auto;
 }
 
 .controls .edit-link {
-	margin-left: 0.3rem;
+	display: flex;
+	align-items: center;
+	margin-left: 0;
+	padding: 0 0.5rem;
+	border-left: 1px solid rgba(255,255,255,0.1);
 	text-decoration: none;
 	opacity: 0.6;
 	transition: opacity 0.2s;
@@ -784,10 +901,6 @@ body.playback[data-controls="false"] .playback-start-screen {
 	min-height: 0;
 }
 
-.preview-frame .slide {
-	zoom: 0.5;
-}
-
 .preview-frame .no-slide {
 	display: flex;
 	align-items: center;
@@ -814,9 +927,6 @@ body.playback[data-controls="false"] .playback-start-screen {
 }
 
 .timing-info {
-	display: flex;
-	gap: 2rem;
-	align-items: center;
 	font-size: 1rem;
 }
 
@@ -840,11 +950,8 @@ body.playback[data-controls="false"] .playback-start-screen {
 }
 
 .timing-info .pause-button {
-	background: var(--surface-light);
 	color: var(--slide-text);
-	border: 1px solid rgba(255,255,255,0.1);
 	padding: 0.3rem 0.75rem;
-	border-radius: 6px;
 	cursor: pointer;
 	font-size: 0.9rem;
 	font-family: var(--font-sans);
@@ -1140,12 +1247,6 @@ body.export {
 	overflow: hidden;
 }
 
-/* Slide fills its container, which is sized by inline style. */
-.export-slide-area .slide {
-	width: 100%;
-	height: 100%;
-}
-
 /* Notes panel below the slide. */
 .export-notes-area {
 	padding: 0.5rem 2rem 0.5rem;

data/readme.md

@@ -28,6 +28,8 @@ Please see the [project documentation](https://socketry.github.io/presently/) fo
 
   - [Animating Slides](https://socketry.github.io/presently/guides/animating-slides/index) - This guide explains how to animate content within slides using the slide scripting system.
 
+  - [Animated Diagrams](https://socketry.github.io/presently/guides/animated-diagrams/index) - This guide explains how to design responsive, lifecycle-safe animated diagrams in Presently using semantic markup, slide-specific CSS, and Anime.js choreography.
+
 ### Recording Narration
 
 Open `http://localhost:9292/record` to record narration separately from the live presenter interface. Presently stores one WebM/Opus recording per slide under `audio/`, mirroring the slide's relative path:
@@ -65,6 +67,20 @@ The task records the presentation at 1920×1080 and 30 frames per second by defa
 
 Please see the [project releases](https://socketry.github.io/presently/releases/index) for all releases.
 
+### v0.19.0
+
+  - Support language-prefixed inline code such as `ruby:` for syntax highlighting.
+  - Preserve blank lines within consistently indented HTML blocks in slide Markdown.
+
+### v0.18.0
+
+  - Render slides on a responsive 16:9 canvas across the display, presenter, recording, playback, and export interfaces.
+  - Center diagram content by default, add optional diagram titles, and make free-form absolute positioning explicit with `.diagram-freeform`.
+  - Prevent slide backgrounds and content from flickering during view transitions.
+  - Add lifecycle-managed Anime.js animation scopes, reusable diagram setup scripts, and guidance for authoring animated diagrams.
+  - Truncate long slide paths responsively while preserving their filenames in presenter controls.
+  - Preserve the complete saved presentation state when restoring the controller.
+
 ### v0.17.2
 
   - Fix slide rendering events for generated view identifiers that begin with a digit.
@@ -103,15 +119,6 @@ q
 
   - Add `Slide#element` and `SlideContext#element` getters — expose the slide body DOM element directly for cases where `find()` is not sufficient, such as measuring dimensions, attaching event listeners, or integrating third-party libraries.
 
-### v0.10.0
-
-  - Replace internal `SlideChain` with an exported `SlideContext` class. `SlideContext` accumulates elapsed time across `after()` calls exactly as `SlideChain` did, but also exposes `find()`, `setTimeout()`, and a `get elapsed()` getter. `Slide#after()` now returns a `SlideContext` — existing slide scripts are unaffected.
-  - Add `Slide#loop(callback, {delay})` — runs a callback in a repeating loop until the slide changes. The callback receives a fresh `SlideContext` each iteration so it can schedule steps with `after()`. The loop waits for all steps to complete (`context.elapsed`) plus an optional extra `delay` before starting the next iteration. All timeouts flow through the slide's existing tracked `setTimeout`, so they are cancelled automatically on slide change.
-
-### v0.9.0
-
-  - `SlideBuilder#show` and `SlideBuilder#next` no longer overwrite `view-transition-name` on elements that already have one set. This allows elements with explicit names (for morph transitions to other slides) to coexist with the build system — they still get `visibility` and `viewTransitionClass` managed, but keep their own name.
-
 ## See Also
 
   - [lively](https://github.com/socketry/lively) — The real-time application framework that powers Presently.

data/releases.md

@@ -1,5 +1,19 @@
 # Releases
 
+## v0.19.0
+
+  - Support language-prefixed inline code such as `ruby:` for syntax highlighting.
+  - Preserve blank lines within consistently indented HTML blocks in slide Markdown.
+
+## v0.18.0
+
+  - Render slides on a responsive 16:9 canvas across the display, presenter, recording, playback, and export interfaces.
+  - Center diagram content by default, add optional diagram titles, and make free-form absolute positioning explicit with `.diagram-freeform`.
+  - Prevent slide backgrounds and content from flickering during view transitions.
+  - Add lifecycle-managed Anime.js animation scopes, reusable diagram setup scripts, and guidance for authoring animated diagrams.
+  - Truncate long slide paths responsively while preserving their filenames in presenter controls.
+  - Preserve the complete saved presentation state when restoring the controller.
+
 ## v0.17.2
 
   - Fix slide rendering events for generated view identifiers that begin with a digit.

data/templates/diagram.xrb

@@ -1,4 +1,9 @@
 <div class="slide-inner diagram-template">
+	<?r if self.section?("title") ?>
+		<div class="slide-title">
+			#{self.section("title")}
+		</div>
+	<?r end ?>
 	<div class="slide-body">
 		#{self.section("body")}
 	</div>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: presently
 version: !ruby/object:Gem::Version
-  version: 0.17.2
+  version: 0.19.0
 platform: ruby
 authors:
 - Samuel Williams
@@ -72,14 +72,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.16'
+        version: '0.19'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '0.16'
+        version: '0.19'
 - !ruby/object:Gem::Dependency
   name: async-webdriver
   requirement: !ruby/object:Gem::Requirement
@@ -118,6 +118,7 @@ files:
 - bake/presently/rehearse.rb
 - bake/presently/slides.rb
 - bin/presently
+- context/animated-diagrams.md
 - context/animating-slides.md
 - context/getting-started.md
 - context/index.yaml
@@ -246,6 +247,8 @@ files:
 - public/_components/@socketry/syntax/themes/base/xrb.css
 - public/_components/@socketry/syntax/themes/base/yaml.css
 - public/_components/@socketry/syntax/themes/theming.md
+- public/_components/animejs/LICENSE.md
+- public/_components/animejs/dist/bundles/anime.esm.min.js
 - public/_static/custom.css
 - public/_static/index.css
 - public/application.js