@heyramzi/ui 2.24.0 → 3.0.0

package/src/slides/Overview.svelte

@@ -49,70 +49,75 @@
 </ol>
 
 <style>
-	.deck__tiles {
-		position: absolute;
-		inset: 0;
-		z-index: 4;
-		margin: 0;
-		padding: 0;
-		list-style: none;
-		/* The ring and number appear once the thumbnails have landed. */
-		animation: tiles-in var(--deck-t-quick) linear var(--deck-t-morph) backwards;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.deck__tiles {
+			position: absolute;
+			inset: 0;
+			z-index: 4;
+			margin: 0;
+			padding: 0;
+			list-style: none;
+			/* The ring and number appear once the thumbnails have landed. */
+			animation: tiles-in var(--deck-t-quick) linear var(--deck-t-morph) backwards;
+		}
+		@media (prefers-reduced-motion: reduce) {
+			.deck__tiles {
+				animation: none;
+			}
+		}
+		.deck__tile-cell {
+			position: absolute;
+		}
+		.deck__tile {
+			position: absolute;
+			inset: 0;
+			padding: 0;
+			color: var(--deck-fg);
+			background: transparent;
+			border: 0;
+			border-radius: 10px;
+			cursor: pointer;
+			outline: 2px solid transparent;
+			outline-offset: 3px;
+			transition: outline-color var(--deck-t-quick) var(--deck-ease);
+		}
+		@media (hover: hover) and (pointer: fine) {
+			.deck__tile:hover {
+				outline-color: color-mix(in srgb, var(--deck-accent) 55%, transparent);
+			}
+		}
+		.deck__tile[aria-current="step"] {
+			outline-color: var(--deck-accent);
+		}
+		.deck__tile:focus-visible {
+			outline-color: var(--deck-fg);
+		}
+		.deck__tile-n {
+			position: absolute;
+			bottom: -12px;
+			left: 50%;
+			min-width: 22px;
+			transform: translateX(-50%);
+			padding: 3px 6px;
+			font: 600 11px/1 var(--deck-font);
+			font-variant-numeric: tabular-nums;
+			text-align: center;
+			color: var(--deck-fg);
+			background: var(--deck-bg);
+			box-shadow: 0 0 0 1px var(--deck-line);
+			border-radius: 6px;
+		}
+		.deck__tile[aria-current="step"] .deck__tile-n {
+			color: var(--deck-on-accent);
+			background: var(--deck-accent);
+		}
 	}
+
 	@keyframes tiles-in {
 		from {
 			opacity: 0;
 		}
 	}
-	@media (prefers-reduced-motion: reduce) {
-		.deck__tiles {
-			animation: none;
-		}
-	}
-	.deck__tile-cell {
-		position: absolute;
-	}
-	.deck__tile {
-		position: absolute;
-		inset: 0;
-		padding: 0;
-		color: var(--deck-fg);
-		background: transparent;
-		border: 0;
-		border-radius: 10px;
-		cursor: pointer;
-		outline: 2px solid transparent;
-		outline-offset: 3px;
-		transition: outline-color var(--deck-t-quick) var(--deck-ease);
-	}
-	@media (hover: hover) and (pointer: fine) {
-		.deck__tile:hover {
-			outline-color: color-mix(in srgb, var(--deck-accent) 55%, transparent);
-		}
-	}
-	.deck__tile[aria-current="step"] {
-		outline-color: var(--deck-accent);
-	}
-	.deck__tile:focus-visible {
-		outline-color: var(--deck-fg);
-	}
-	.deck__tile-n {
-		position: absolute;
-		bottom: -12px;
-		left: 50%;
-		min-width: 22px;
-		transform: translateX(-50%);
-		padding: 3px 6px;
-		font: 600 11px/1 var(--deck-font);
-		font-variant-numeric: tabular-nums;
-		text-align: center;
-		color: var(--deck-fg);
-		background: var(--deck-bg);
-		box-shadow: 0 0 0 1px var(--deck-line);
-		border-radius: 6px;
-	}
-	.deck__tile[aria-current="step"] .deck__tile-n {
-		color: var(--deck-on-accent);
-		background: var(--deck-accent);
-	}
 </style>

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

@@ -0,0 +1,8 @@
+import type { DeckController } from "./deck-controller.svelte.js";
+interface Props {
+    deck: DeckController;
+    returnFocus?: HTMLElement;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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;