@heyramzi/ui 2.23.0 → 3.0.0

package/src/slides/Presenter.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { untrack } from "svelte";
+	import { onMount, untrack } from "svelte";
 	import Deck from "./Deck.svelte";
 	import type { DeckController } from "./deck-controller.svelte.js";
 	import { resolveLabels } from "./labels.js";
@@ -43,6 +43,9 @@
 	let index = $state(0);
 	let step = $state(0);
 	let now = $state<DeckController>();
+	let frame = $state<HTMLDivElement>();
+	// The deck hears keys only from focus inside it, and this window is there to drive it.
+	onMount(() => frame?.querySelector<HTMLElement>(".deck")?.focus());
 
 	const upcoming = $derived(now?.upcoming ?? null);
 	const notes = $derived(now?.current?.notes);
@@ -102,7 +105,7 @@
 
 	<main class="presenter__main">
 		<section class="presenter__now" aria-label={labels.current}>
-			<div class="presenter__frame" style:aspect-ratio="{canvas.w} / {canvas.h}">
+			<div bind:this={frame} class="presenter__frame" style:aspect-ratio="{canvas.w} / {canvas.h}">
 				<Deck
 					bind:index
 					bind:step
@@ -174,153 +177,157 @@
 </div>
 
 <style>
-	.presenter {
-		display: grid;
-		grid-template-rows: auto minmax(0, 1fr);
-		height: 100dvh;
-		color: var(--deck-fg);
-		background: var(--deck-bg);
-		font-family: var(--deck-font);
-	}
+	@layer theme, base, components, utilities;
 
-	.presenter__bar {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: center;
-		gap: 8px 20px;
-		padding: 12px 20px;
-		border-bottom: 1px solid var(--deck-line);
-	}
-	.presenter__title {
-		flex: 1;
-		min-width: 0;
-		margin: 0;
-		overflow: hidden;
-		font: 600 15px/1.2 var(--deck-font);
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-	.presenter__where {
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		font: 500 14px/1 var(--deck-font);
-		color: var(--deck-muted);
-	}
-	.presenter__steps {
-		padding: 3px 7px;
-		font-size: 12px;
-		font-variant-numeric: tabular-nums;
-		color: var(--deck-on-accent);
-		background: var(--deck-accent);
-		border-radius: 6px;
-	}
-	.presenter__timer {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-	}
-	.presenter__clock {
-		min-width: 5ch;
-		margin-right: 4px;
-		font: 700 28px/1 var(--deck-font-display);
-		font-variant-numeric: tabular-nums;
-		letter-spacing: -0.02em;
-	}
-	.presenter__button {
-		min-height: 32px;
-		padding: 0 12px;
-		font: 500 13px/1 var(--deck-font);
-		color: var(--deck-fg);
-		background: var(--deck-surface);
-		border: 1px solid var(--deck-line);
-		border-radius: 8px;
-		cursor: pointer;
-		transition: background-color var(--deck-t-quick) var(--deck-ease);
-	}
-	@media (hover: hover) and (pointer: fine) {
-		.presenter__button:hover {
-			background: var(--deck-line);
+	@layer components {
+		.presenter {
+			display: grid;
+			grid-template-rows: auto minmax(0, 1fr);
+			height: 100dvh;
+			color: var(--deck-fg);
+			background: var(--deck-bg);
+			font-family: var(--deck-font);
 		}
-	}
-	.presenter__button:focus-visible {
-		outline: 2px solid var(--deck-accent);
-		outline-offset: 2px;
-	}
 
-	.presenter__main {
-		display: grid;
-		grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
-		gap: 20px;
-		min-height: 0;
-		padding: 20px;
-	}
-	.presenter__now {
-		display: grid;
-		place-items: center;
-		min-height: 0;
-		container-type: size;
-	}
-	.presenter__frame {
-		overflow: hidden;
-		border-radius: 12px;
-		box-shadow: 0 0 0 1px var(--deck-line);
-	}
-	.presenter__now .presenter__frame {
-		width: min(100cqw, calc(100cqh * var(--ratio)));
-	}
-	.presenter__frame--next {
-		width: 100%;
-	}
-
-	.presenter__side {
-		display: grid;
-		grid-template-rows: auto minmax(0, 1fr);
-		gap: 20px;
-		min-height: 0;
-	}
-	.presenter__heading {
-		margin: 0 0 8px;
-		font: 600 12px/1 var(--deck-font);
-		letter-spacing: 0.02em;
-		color: var(--deck-muted);
-	}
-	.presenter__notes {
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
-	}
-	.presenter__notes-body {
-		flex: 1;
-		min-height: 0;
-		padding-right: 4px;
-		overflow-y: auto;
-		font-size: clamp(18px, 1.5vw, 26px);
-		line-height: 1.5;
-		white-space: pre-line;
-		text-wrap: pretty;
-	}
-	.presenter__notes-body p {
-		margin: 0;
-	}
-	.presenter__empty {
-		margin: 0;
-		color: var(--deck-muted);
-	}
-
-	@media (max-width: 860px) {
-		.presenter {
-			height: auto;
-			min-height: 100dvh;
+		.presenter__bar {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: center;
+			gap: 8px 20px;
+			padding: 12px 20px;
+			border-bottom: 1px solid var(--deck-line);
+		}
+		.presenter__title {
+			flex: 1;
+			min-width: 0;
+			margin: 0;
+			overflow: hidden;
+			font: 600 15px/1.2 var(--deck-font);
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		.presenter__where {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			font: 500 14px/1 var(--deck-font);
+			color: var(--deck-muted);
+		}
+		.presenter__steps {
+			padding: 3px 7px;
+			font-size: 12px;
+			font-variant-numeric: tabular-nums;
+			color: var(--deck-on-accent);
+			background: var(--deck-accent);
+			border-radius: 6px;
+		}
+		.presenter__timer {
+			display: flex;
+			align-items: center;
+			gap: 8px;
 		}
+		.presenter__clock {
+			min-width: 5ch;
+			margin-right: 4px;
+			font: 700 28px/1 var(--deck-font-display);
+			font-variant-numeric: tabular-nums;
+			letter-spacing: -0.02em;
+		}
+		.presenter__button {
+			min-height: 32px;
+			padding: 0 12px;
+			font: 500 13px/1 var(--deck-font);
+			color: var(--deck-fg);
+			background: var(--deck-surface);
+			border: 1px solid var(--deck-line);
+			border-radius: 8px;
+			cursor: pointer;
+			transition: background-color var(--deck-t-quick) var(--deck-ease);
+		}
+		@media (hover: hover) and (pointer: fine) {
+			.presenter__button:hover {
+				background: var(--deck-line);
+			}
+		}
+		.presenter__button:focus-visible {
+			outline: 2px solid var(--deck-accent);
+			outline-offset: 2px;
+		}
+
 		.presenter__main {
-			grid-template-columns: minmax(0, 1fr);
+			display: grid;
+			grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
+			gap: 20px;
+			min-height: 0;
+			padding: 20px;
 		}
 		.presenter__now {
-			container-type: inline-size;
+			display: grid;
+			place-items: center;
+			min-height: 0;
+			container-type: size;
+		}
+		.presenter__frame {
+			overflow: hidden;
+			border-radius: 12px;
+			box-shadow: 0 0 0 1px var(--deck-line);
 		}
 		.presenter__now .presenter__frame {
+			width: min(100cqw, calc(100cqh * var(--ratio)));
+		}
+		.presenter__frame--next {
 			width: 100%;
 		}
+
+		.presenter__side {
+			display: grid;
+			grid-template-rows: auto minmax(0, 1fr);
+			gap: 20px;
+			min-height: 0;
+		}
+		.presenter__heading {
+			margin: 0 0 8px;
+			font: 600 12px/1 var(--deck-font);
+			letter-spacing: 0.02em;
+			color: var(--deck-muted);
+		}
+		.presenter__notes {
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+		}
+		.presenter__notes-body {
+			flex: 1;
+			min-height: 0;
+			padding-right: 4px;
+			overflow-y: auto;
+			font-size: clamp(18px, 1.5vw, 26px);
+			line-height: 1.5;
+			white-space: pre-line;
+			text-wrap: pretty;
+		}
+		.presenter__notes-body p {
+			margin: 0;
+		}
+		.presenter__empty {
+			margin: 0;
+			color: var(--deck-muted);
+		}
+
+		@media (max-width: 860px) {
+			.presenter {
+				height: auto;
+				min-height: 100dvh;
+			}
+			.presenter__main {
+				grid-template-columns: minmax(0, 1fr);
+			}
+			.presenter__now {
+				container-type: inline-size;
+			}
+			.presenter__now .presenter__frame {
+				width: 100%;
+			}
+		}
 	}
 </style>

package/src/slides/Presenter.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type DeckProps } from "./types.js";
+interface Props extends Pick<DeckProps, "id" | "title" | "locale" | "canvas" | "theme" | "transition" | "slides" | "registry" | "labels" | "style" | "children"> {
+    /** The channel name the audience deck uses as its `sync`. */
+    sync: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/slides/README.md

@@ -37,7 +37,7 @@ Keys: arrows, Space (Shift+Space back), PageUp/PageDown, Home/End, `O` overview,
 | `presenter` | | URL of the presenter view. Adds a button and the `p` key. |
 | `labels` | | Partial `DeckLabels` to translate every string. |
 | `controller` | | Bindable `DeckController`: `next()`, `prev()`, `go(i, step)`, `toggleOverview()`, `position`, `ordinal`. |
-| `id`, `title`, `locale`, `onchange`, `class`, `style` | | |
+| `id`, `title`, `locale`, `onIndexChange`, `class`, `style` | | |
 
 `Slide`: `notes` (string or snippet), `hidden`, `label`, `align` (`center`, `start`, `bare`). `Fragment`: `step`, `reveal` (`rise`, `fade`, `scale`), `as`. Fragments that share a step stagger. Authored type classes: `deck-display`, `deck-title`, `deck-heading`, `deck-lead`, `deck-body`, `deck-caption`, `deck-label`, `deck-accent`.
 

package/src/slides/Slide.svelte

@@ -127,68 +127,73 @@
 </section>
 
 <style>
-	/* The box is a full canvas, moved and scaled from its top-left. */
-	.slide {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: 1;
-		width: var(--slide-w);
-		height: var(--slide-h);
-		transform-origin: 0 0;
-		visibility: hidden;
-		/* The old slide stays drawn for the length of the enter animation. */
-		transition: visibility 0s linear var(--deck-t-slide);
-	}
-	.slide[hidden] {
-		display: none;
-	}
-	.slide[data-active="true"] {
-		z-index: 2;
-		visibility: visible;
-		transition-delay: 0s;
-	}
-
-	/* The overview shows every slide. They all leave the stack at once and settle in turn, later ones slower. */
-	:global(.deck[data-view="overview"]) .slide {
-		visibility: visible;
-	}
-	:global(.deck[data-morphing]) .slide {
-		transition:
-			visibility 0s linear calc(var(--deck-t-morph) + 10 * var(--deck-stagger)),
-			transform calc(var(--deck-t-morph) + min(var(--i), 10) * var(--deck-stagger)) var(--deck-ease);
-	}
-	/* Opening shows the slides at once, so only closing waits before hiding them. */
-	:global(.deck[data-morphing][data-view="overview"]) .slide {
-		transition-delay: 0s;
-	}
-
-	.slide__surface {
-		position: relative;
-		box-sizing: border-box;
-		width: 100%;
-		height: 100%;
-		overflow: hidden;
-		color: var(--deck-fg);
-		background: var(--deck-bg);
-		font-family: var(--deck-font);
-		animation: var(--deck-t-slide) var(--deck-ease) backwards;
-	}
-	:global(.deck[data-view="overview"]) .slide__surface {
-		/* Design px, so divide by the scale to get the same corner on every thumbnail. */
-		border-radius: calc(10px / var(--slide-scale, 1));
-		box-shadow: 0 0 0 calc(1px / var(--slide-scale, 1)) var(--deck-line);
-	}
-
-	.slide__surface[data-align="center"],
-	.slide__surface[data-align="start"] {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		padding: var(--deck-pad);
-	}
-	.slide__surface[data-align="center"] {
-		align-items: center;
-		text-align: center;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		/* The box is a full canvas, moved and scaled from its top-left. */
+		.slide {
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 1;
+			width: var(--slide-w);
+			height: var(--slide-h);
+			transform-origin: 0 0;
+			visibility: hidden;
+			/* The old slide stays drawn for the length of the enter animation. */
+			transition: visibility 0s linear var(--deck-t-slide);
+		}
+		.slide[hidden] {
+			display: none;
+		}
+		.slide[data-active="true"] {
+			z-index: 2;
+			visibility: visible;
+			transition-delay: 0s;
+		}
+
+		/* The overview shows every slide. They all leave the stack at once and settle in turn, later ones slower. */
+		:global(.deck[data-view="overview"]) .slide {
+			visibility: visible;
+		}
+		:global(.deck[data-morphing]) .slide {
+			transition:
+				visibility 0s linear calc(var(--deck-t-morph) + 10 * var(--deck-stagger)),
+				transform calc(var(--deck-t-morph) + min(var(--i), 10) * var(--deck-stagger))
+					var(--deck-ease);
+		}
+		/* Opening shows the slides at once, so only closing waits before hiding them. */
+		:global(.deck[data-morphing][data-view="overview"]) .slide {
+			transition-delay: 0s;
+		}
+
+		.slide__surface {
+			position: relative;
+			box-sizing: border-box;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+			color: var(--deck-fg);
+			background: var(--deck-bg);
+			font-family: var(--deck-font);
+			animation: var(--deck-t-slide) var(--deck-ease) backwards;
+		}
+		:global(.deck[data-view="overview"]) .slide__surface {
+			/* Design px, so divide by the scale to get the same corner on every thumbnail. */
+			border-radius: calc(10px / var(--slide-scale, 1));
+			box-shadow: 0 0 0 calc(1px / var(--slide-scale, 1)) var(--deck-line);
+		}
+
+		.slide__surface[data-align="center"],
+		.slide__surface[data-align="start"] {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			padding: var(--deck-pad);
+		}
+		.slide__surface[data-align="center"] {
+			align-items: center;
+			text-align: center;
+		}
 	}
 </style>

package/src/slides/Slide.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type Snippet } from "svelte";
+import { type SlideAlign, type SlideNotes } from "./types.js";
+interface Props {
+    /** Accessible name, read after "Slide 3 of 12". */
+    label?: string;
+    /** Speaker notes for the presenter view. */
+    notes?: SlideNotes;
+    /** Skipped by paging and left out of the overview and print. */
+    hidden?: boolean;
+    /** `center` (default), `start`, or `bare` to lay the canvas out yourself. */
+    align?: SlideAlign;
+    class?: string;
+    style?: string;
+    children?: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/slides/SlideList.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SlideInstance, SlideRegistry } from "./model.js";
+interface Props {
+    slides: SlideInstance[];
+    registry: SlideRegistry;
+    unknownLabel: (type: string) => string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/slides/deck-controller.svelte.ts

@@ -46,13 +46,6 @@ export type ControllerOptions = {
   transition?: (update: () => void) => void;
 };
 
-/* With several decks on a page, keys belong to the one the reader last touched. */
-const live = new Set<DeckController>();
-let active: DeckController | null = null;
-const claimKeys = (deck: DeckController) => {
-  active = deck;
-};
-
 /** Height the controls bar takes at the bottom of the overview, in px. */
 const CONTROLS_ROOM = 56;
 
@@ -143,25 +136,13 @@ export class DeckController {
     return () => this.#listeners.delete(listener);
   }
 
-  /** Marks this deck as the one that owns the keys. Mounting does it too. */
-  activate() {
-    claimKeys(this);
-  }
-
   mount(): () => void {
-    live.add(this);
-    claimKeys(this);
-    return () => {
-      live.delete(this);
-      if (active === this) active = null;
-      clearTimeout(this.#timer);
-    };
+    return () => clearTimeout(this.#timer);
   }
 
+  /** Which deck hears a key is the page's call: Deck passes only keys from focus inside it. */
   get listening() {
-    if (this.options.keyboard === false) return false;
-    const eligible = [...live].filter((deck) => deck.options.keyboard !== false);
-    return eligible.length <= 1 || active === this;
+    return this.options.keyboard !== false;
   }
 
   #write(position: Position) {

package/src/slides/deck-keys.test.ts

@@ -0,0 +1,49 @@
+import { afterEach, describe, expect, it } from "vite-plus/test";
+import { flushSync, mount, unmount } from "svelte";
+import Deck from "./Deck.svelte";
+
+let app: ReturnType<typeof mount> | null = null;
+
+/* An empty registry draws each slide as its "unknown type" fallback, enough to page through. */
+const slides = ["one", "two", "three"].map((id) => ({ id, type: "plain", content: null }));
+
+function mountDeck() {
+  app = mount(Deck, {
+    target: document.body.appendChild(document.createElement("div")),
+    props: { id: "keys", title: "Keys", slides, registry: {} },
+  });
+  flushSync();
+}
+
+afterEach(() => {
+  if (app) unmount(app);
+  app = null;
+  document.body.innerHTML = "";
+});
+
+const said = () => document.querySelector(".deck__sr")?.textContent?.trim();
+
+function press(target: EventTarget, key: string) {
+  target.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+  flushSync();
+}
+
+describe("a deck's keys", () => {
+  it("ignores keys pressed outside it, even as the only deck on the page", () => {
+    mountDeck();
+    const before = said();
+    press(document.body, "ArrowRight");
+    press(document.body, " ");
+    expect(said()).toBe(before);
+  });
+
+  it("pages when focus is inside it", () => {
+    mountDeck();
+    const deck = document.querySelector<HTMLElement>(".deck");
+    if (!deck) throw new Error("no deck rendered");
+    deck.focus();
+    const before = said();
+    press(deck, "End");
+    expect(said()).not.toBe(before);
+  });
+});