@heyramzi/ui 2.0.1 → 2.2.0

package/src/slides/demo.svelte

@@ -1,176 +1,180 @@
 <script lang="ts">
-  import Deck from './Deck.svelte';
-  import type { DeckController } from './deck-controller.svelte.js';
-  import DemoSlides, { demoStyle } from './demo-slides.svelte';
-  import type { DeckTheme, DeckTransition } from './types.js';
+	import Deck from "./Deck.svelte";
+	import type { DeckController } from "./deck-controller.svelte.js";
+	import DemoSlides, { demoStyle } from "./demo-slides.svelte";
+	import type { DeckTheme, DeckTransition } from "./types.js";
 
-  interface Props {
-    /** Where the presenter view is mounted. Leave out to hide the button. */
-    presenter?: string;
-  };
+	interface Props {
+		/** Where the presenter view is mounted. Leave out to hide the button. */
+		presenter?: string;
+	}
 
-  let { presenter }: Props = $props();
+	let { presenter }: Props = $props();
 
-  const themes: DeckTheme[] = ['ink', 'paper', 'auto'];
-  const transitions: DeckTransition[] = ['fade', 'slide', 'zoom', 'morph'];
+	const themes: DeckTheme[] = ["ink", "paper", "auto"];
+	const transitions: DeckTransition[] = ["fade", "slide", "zoom", "morph"];
 
-  let theme = $state<DeckTheme>('ink');
-  let transition = $state<DeckTransition>('fade');
-  let deck = $state<DeckController>();
+	let theme = $state<DeckTheme>("ink");
+	let transition = $state<DeckTransition>("fade");
+	let deck = $state<DeckController>();
 </script>
 
 <div class="demo">
-  <div class="demo__bar">
-    <div class="demo__group" role="radiogroup" aria-label="Theme">
-      {#each themes as option (option)}
-        <button
-          type="button"
-          role="radio"
-          aria-checked={theme === option}
-          class="demo__option"
-          onclick={() => (theme = option)}>{option}</button
-        >
-      {/each}
-    </div>
-    <label class="demo__field">
-      <span>Transition</span>
-      <select bind:value={transition}>
-        {#each transitions as option (option)}
-          <option value={option}>{option}</option>
-        {/each}
-      </select>
-    </label>
-    <div class="demo__actions">
-      <button type="button" class="demo__action" onclick={() => deck?.toggleOverview()}>Overview</button>
-      {#if presenter}
-        <a class="demo__action" href={presenter} target="heyramzi-slides-demo-presenter">Presenter</a>
-      {/if}
-      <button type="button" class="demo__action" onclick={() => window.print()}>Print</button>
-    </div>
-  </div>
+	<div class="demo__bar">
+		<div class="demo__group" role="radiogroup" aria-label="Theme">
+			{#each themes as option (option)}
+				<button
+					type="button"
+					role="radio"
+					aria-checked={theme === option}
+					class="demo__option"
+					onclick={() => (theme = option)}>{option}</button
+				>
+			{/each}
+		</div>
+		<label class="demo__field">
+			<span>Transition</span>
+			<select bind:value={transition}>
+				{#each transitions as option (option)}
+					<option value={option}>{option}</option>
+				{/each}
+			</select>
+		</label>
+		<div class="demo__actions">
+			<button type="button" class="demo__action" onclick={() => deck?.toggleOverview()}
+				>Overview</button
+			>
+			{#if presenter}
+				<a class="demo__action" href={presenter} target="heyramzi-slides-demo-presenter"
+					>Presenter</a
+				>
+			{/if}
+			<button type="button" class="demo__action" onclick={() => window.print()}>Print</button>
+		</div>
+	</div>
 
-  <div class="demo__stage">
-    <Deck
-      bind:controller={deck}
-      id="slides-demo"
-      title="Slides demo"
-      sync="slides-demo"
-      urlSync={false}
-      {theme}
-      {transition}
-      {presenter}
-      style={demoStyle}
-    >
-      <DemoSlides />
-    </Deck>
-  </div>
+	<div class="demo__stage">
+		<Deck
+			bind:controller={deck}
+			id="slides-demo"
+			title="Slides demo"
+			sync="slides-demo"
+			urlSync={false}
+			{theme}
+			{transition}
+			{presenter}
+			style={demoStyle}
+		>
+			<DemoSlides />
+		</Deck>
+	</div>
 </div>
 
 <style>
-  .demo {
-    display: grid;
-    gap: 14px;
-    width: 100%;
-  }
+	.demo {
+		display: grid;
+		gap: 14px;
+		width: 100%;
+	}
 
-  .demo__bar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 10px 16px;
-    font-size: 13px;
-  }
-  .demo__group {
-    display: inline-flex;
-    padding: 3px;
-    background: color-mix(in srgb, currentColor 7%, transparent);
-    border-radius: 10px;
-  }
-  .demo__option {
-    padding: 5px 12px;
-    font: inherit;
-    font-weight: 500;
-    color: inherit;
-    text-transform: capitalize;
-    background: transparent;
-    border: 0;
-    border-radius: 7px;
-    opacity: 0.65;
-    cursor: pointer;
-    transition:
-      background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out),
-      opacity var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-  }
-  @media (hover: hover) and (pointer: fine) {
-    .demo__option:hover {
-      opacity: 1;
-    }
-  }
-  .demo__option[aria-checked='true'] {
-    background: color-mix(in srgb, currentColor 14%, transparent);
-    opacity: 1;
-  }
-  .demo__field {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    opacity: 0.85;
-  }
-  .demo__field select {
-    padding: 5px 8px;
-    font: inherit;
-    color: inherit;
-    text-transform: capitalize;
-    background: color-mix(in srgb, currentColor 7%, transparent);
-    border: 0;
-    border-radius: 8px;
-  }
-  .demo__actions {
-    display: inline-flex;
-    gap: 6px;
-    margin-left: auto;
-  }
-  .demo__action {
-    padding: 6px 12px;
-    font: inherit;
-    font-weight: 500;
-    color: inherit;
-    text-decoration: none;
-    background: transparent;
-    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
-    border-radius: 8px;
-    cursor: pointer;
-    transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-  }
-  @media (hover: hover) and (pointer: fine) {
-    .demo__action:hover {
-      background: color-mix(in srgb, currentColor 8%, transparent);
-    }
-  }
-  .demo__option:focus-visible,
-  .demo__action:focus-visible,
-  .demo__field select:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
-  }
+	.demo__bar {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 10px 16px;
+		font-size: 13px;
+	}
+	.demo__group {
+		display: inline-flex;
+		padding: 3px;
+		background: color-mix(in srgb, currentColor 7%, transparent);
+		border-radius: 10px;
+	}
+	.demo__option {
+		padding: 5px 12px;
+		font: inherit;
+		font-weight: 500;
+		color: inherit;
+		text-transform: capitalize;
+		background: transparent;
+		border: 0;
+		border-radius: 7px;
+		opacity: 0.65;
+		cursor: pointer;
+		transition:
+			background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out),
+			opacity var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.demo__option:hover {
+			opacity: 1;
+		}
+	}
+	.demo__option[aria-checked="true"] {
+		background: color-mix(in srgb, currentColor 14%, transparent);
+		opacity: 1;
+	}
+	.demo__field {
+		display: inline-flex;
+		align-items: center;
+		gap: 8px;
+		opacity: 0.85;
+	}
+	.demo__field select {
+		padding: 5px 8px;
+		font: inherit;
+		color: inherit;
+		text-transform: capitalize;
+		background: color-mix(in srgb, currentColor 7%, transparent);
+		border: 0;
+		border-radius: 8px;
+	}
+	.demo__actions {
+		display: inline-flex;
+		gap: 6px;
+		margin-left: auto;
+	}
+	.demo__action {
+		padding: 6px 12px;
+		font: inherit;
+		font-weight: 500;
+		color: inherit;
+		text-decoration: none;
+		background: transparent;
+		border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
+		border-radius: 8px;
+		cursor: pointer;
+		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
+	}
+	@media (hover: hover) and (pointer: fine) {
+		.demo__action:hover {
+			background: color-mix(in srgb, currentColor 8%, transparent);
+		}
+	}
+	.demo__option:focus-visible,
+	.demo__action:focus-visible,
+	.demo__field select:focus-visible {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
 
-  .demo__stage {
-    overflow: hidden;
-    border-radius: 16px;
-    box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
-  }
+	.demo__stage {
+		overflow: hidden;
+		border-radius: 16px;
+		box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
+	}
 
-  @media print {
-    .demo {
-      display: block;
-    }
-    .demo__bar {
-      display: none;
-    }
-    .demo__stage {
-      overflow: visible;
-      border-radius: 0;
-      box-shadow: none;
-    }
-  }
+	@media print {
+		.demo {
+			display: block;
+		}
+		.demo__bar {
+			display: none;
+		}
+		.demo__stage {
+			overflow: visible;
+			border-radius: 0;
+			box-shadow: none;
+		}
+	}
 </style>

package/src/slides/export/capture.ts

@@ -1,16 +1,20 @@
 // Capture a page, or one element of it, to PNG at a canvas size and device scale.
 
-import { mkdir, writeFile } from 'node:fs/promises';
-import path from 'node:path';
-import type { BrowserLike, LocatorLike, PageLike, Size, WaitUntil } from './types.js';
+import { mkdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+import type {
+  BrowserLike,
+  LocatorLike,
+  PageLike,
+  Size,
+  WaitUntil,
+} from "./types.js";
 
 /**
- * `networkidle` makes a screenshot land on a finished page and never fires on a
- * page that keeps polling: an analytics beacon, a chat widget, a buffering hero
- * video. So the first attempt asks for idle and a retry falls back to `load`,
- * which always fires; the caller's `wait` settles whatever is left.
+ * `networkidle` never fires on a page that keeps polling, like a chat widget, so a retry
+ * falls back to `load`, which always fires.
  */
-export const DEFAULT_WAITS: readonly WaitUntil[] = ['networkidle', 'load'];
+export const DEFAULT_WAITS: readonly WaitUntil[] = ["networkidle", "load"];
 
 export interface GotoOptions {
   /** Tried in order; the first that resolves wins and the last failure is thrown. */
@@ -30,7 +34,7 @@ export async function gotoSettled(page: PageLike, url: string, options: GotoOpti
       failure = error;
     }
   }
-  throw failure ?? new Error('gotoSettled needs at least one wait condition.');
+  throw failure ?? new Error("gotoSettled needs at least one wait condition.");
 }
 
 export type CaptureSource = { url: string } | { html: string };
@@ -64,18 +68,18 @@ export async function capturePage(
     deviceScaleFactor: options.scale ?? 1,
   });
   try {
-    if ('url' in source) await gotoSettled(page, source.url, options.goto);
-    else await page.setContent(source.html, { waitUntil: 'load' });
+    if ("url" in source) await gotoSettled(page, source.url, options.goto);
+    else await page.setContent(source.html, { waitUntil: "load" });
     if (options.style) await page.addStyleTag({ content: options.style });
     if (options.wait) await page.waitForTimeout(options.wait);
     const { selector } = options;
     let bytes: Uint8Array;
     if (selector) {
       const target = page.locator(selector).first();
-      await target.waitFor({ state: 'visible' });
-      bytes = await target.screenshot({ type: 'png' });
+      await target.waitFor({ state: "visible" });
+      bytes = await target.screenshot({ type: "png" });
     } else {
-      bytes = await page.screenshot({ type: 'png', fullPage: options.fullPage });
+      bytes = await page.screenshot({ type: "png", fullPage: options.fullPage });
     }
     if (options.path) {
       await mkdir(path.dirname(options.path), { recursive: true });
@@ -88,8 +92,8 @@ export async function capturePage(
 }
 
 /** `01.png`, `02.png` ...: the file name for the nth capture, one-based, zero-padded. */
-export function frameName(index: number, digits = 2, extension = 'png'): string {
-  return `${String(index + 1).padStart(digits, '0')}.${extension}`;
+export function frameName(index: number, digits = 2, extension = "png"): string {
+  return `${String(index + 1).padStart(digits, "0")}.${extension}`;
 }
 
 /**

package/src/slides/export/ffmpeg.ts

@@ -1,23 +1,29 @@
 // Encode frames to an mp4 with the ffmpeg on the machine. The package ships no
 // binary; pass `ffmpeg` to name one that is not on PATH.
 
-import { spawn } from 'node:child_process';
-import { mkdir, rm } from 'node:fs/promises';
-import path from 'node:path';
+import { spawn } from "node:child_process";
+import { mkdir, rm } from "node:fs/promises";
+import path from "node:path";
 
 /** Runs ffmpeg and resolves when it exits 0; the error carries the tail of its stderr. */
-export function runFfmpeg(args: string[], ffmpeg = 'ffmpeg'): Promise<void> {
+export function runFfmpeg(args: string[], ffmpeg = "ffmpeg"): Promise<void> {
   return new Promise((resolve, reject) => {
-    const child = spawn(ffmpeg, args, { stdio: ['ignore', 'ignore', 'pipe'] });
-    let stderr = '';
-    child.stderr.on('data', (chunk) => {
+    const child = spawn(ffmpeg, args, { stdio: ["ignore", "ignore", "pipe"] });
+    let stderr = "";
+    child.stderr.on("data", (chunk) => {
       stderr += chunk;
     });
-    child.on('error', (error) =>
-      reject(new Error(`${ffmpeg} could not be started (${error.message}). Video export needs ffmpeg on PATH, or pass its path.`)),
+    child.on("error", (error) =>
+      reject(
+        new Error(
+          `${ffmpeg} could not be started (${error.message}). Video export needs ffmpeg on PATH, or pass its path.`,
+        ),
+      ),
     );
-    child.on('close', (code) =>
-      code === 0 ? resolve() : reject(new Error(`${ffmpeg} exited ${code}:\n${stderr.slice(-1500)}`)),
+    child.on("close", (code) =>
+      code === 0
+        ? resolve()
+        : reject(new Error(`${ffmpeg} exited ${code}:\n${stderr.slice(-1500)}`)),
     );
   });
 }
@@ -36,31 +42,35 @@ export interface EncodeOptions {
 /** The ffmpeg arguments for a silent yuv420p H.264 mp4 from a numbered image sequence. */
 export function encodeArgs(dir: string, outFile: string, options: EncodeOptions): string[] {
   return [
-    '-y',
-    '-hide_banner',
-    '-loglevel',
-    'error',
-    '-framerate',
+    "-y",
+    "-hide_banner",
+    "-loglevel",
+    "error",
+    "-framerate",
     String(options.fps),
-    '-i',
-    path.join(dir, options.pattern ?? '%04d.png'),
-    '-an',
-    '-vf',
-    'format=yuv420p',
-    '-c:v',
-    'libx264',
-    '-preset',
-    options.preset ?? 'slow',
-    '-crf',
+    "-i",
+    path.join(dir, options.pattern ?? "%04d.png"),
+    "-an",
+    "-vf",
+    "format=yuv420p",
+    "-c:v",
+    "libx264",
+    "-preset",
+    options.preset ?? "slow",
+    "-crf",
     String(options.crf ?? 23),
-    '-movflags',
-    '+faststart',
+    "-movflags",
+    "+faststart",
     outFile,
   ];
 }
 
 /** Encodes a folder of numbered frames. There is no audio stream at all. */
-export async function encodeFrames(dir: string, outFile: string, options: EncodeOptions): Promise<void> {
+export async function encodeFrames(
+  dir: string,
+  outFile: string,
+  options: EncodeOptions,
+): Promise<void> {
   await mkdir(path.dirname(outFile), { recursive: true });
   await runFfmpeg(encodeArgs(dir, outFile, options), options.ffmpeg);
 }
@@ -74,7 +84,7 @@ export interface LoopFrame {
   file: string;
 }
 
-export interface LoopOptions extends Omit<EncodeOptions, 'fps' | 'pattern'> {
+export interface LoopOptions extends Omit<EncodeOptions, "fps" | "pattern"> {
   fps?: number;
   seconds?: number;
   /** Photograph the frame at `t`; called once per frame, in order. */
@@ -87,13 +97,8 @@ export function loopFrameCount(seconds: number, fps: number): number {
 }
 
 /**
- * Renders a seamless loop: asks `drawFrame` for t = 0, 1/n, ... (n-1)/n and
- * encodes the result.
- *
- * `t` never reaches 1, so the last frame is one step short of the first and
- * the cut back to frame zero is the same step as every other. Driving all
- * motion off one t is what makes the seam exact by construction. A captured
- * CSS animation loops only when its last frame happens to land on its first.
+ * Renders a seamless loop from `drawFrame` at t = 0 to (n-1)/n, never 1, so the cut back
+ * to frame zero is the same step as every other.
  */
 export async function renderLoop(
   outFile: string,
@@ -109,7 +114,7 @@ export async function renderLoop(
       await options.drawFrame({
         index,
         t: index / frames,
-        file: path.join(work, `${String(index).padStart(4, '0')}.png`),
+        file: path.join(work, `${String(index).padStart(4, "0")}.png`),
       });
     }
     await encodeFrames(work, outFile, { ...options, fps });

package/src/slides/export/index.ts

@@ -2,8 +2,8 @@
 // depending on Playwright or bundling ffmpeg. Hand it the Playwright pages and
 // browsers you already have.
 
-export * from './capture.js';
-export * from './ffmpeg.js';
-export * from './launch.js';
-export * from './pdf.js';
-export type * from './types.js';
+export * from "./capture.js";
+export * from "./ffmpeg.js";
+export * from "./launch.js";
+export * from "./pdf.js";
+export type * from "./types.js";

package/src/slides/export/launch.ts

@@ -6,5 +6,7 @@
 export async function launchChromium<B>(chromium: {
   launch(options?: { headless?: boolean; channel?: string }): Promise<B>;
 }): Promise<B> {
-  return chromium.launch({ headless: true }).catch(() => chromium.launch({ headless: true, channel: 'chrome' }));
+  return chromium
+    .launch({ headless: true })
+    .catch(() => chromium.launch({ headless: true, channel: "chrome" }));
 }