@seriousgaming/deck 0.0.0-stage → 1.0.0-alpha.2

package/lib/export/pptx.d.ts

@@ -0,0 +1,12 @@
+import type { DeckExport } from './ir.js';
+/**
+ * Write a {@link DeckExport} as a PowerPoint file.
+ *
+ * The only module that knows pptxgenjs exists. It is imported here on demand,
+ * so a deck that is presented and never exported never downloads it, and
+ * replacing it means rewriting this file and nothing else.
+ *
+ * PowerPoint's wide layout is 13.333 by 7.5 inches; the slide canvas is 1920 by
+ * 1080 pixels, so a pixel is 1/144 inch and half a point.
+ */
+export declare function writePptx(deck: DeckExport): Promise<Blob>;

package/lib/export/pptx.js

@@ -0,0 +1,125 @@
+/**
+ * Write a {@link DeckExport} as a PowerPoint file.
+ *
+ * The only module that knows pptxgenjs exists. It is imported here on demand,
+ * so a deck that is presented and never exported never downloads it, and
+ * replacing it means rewriting this file and nothing else.
+ *
+ * PowerPoint's wide layout is 13.333 by 7.5 inches; the slide canvas is 1920 by
+ * 1080 pixels, so a pixel is 1/144 inch and half a point.
+ */
+export async function writePptx(deck) {
+    const loaded = (await import('pptxgenjs'));
+    const PptxGenJSClass = 'default' in loaded.default ? loaded.default.default : loaded.default;
+    const pres = new PptxGenJSClass();
+    pres.layout = 'LAYOUT_WIDE';
+    pres.title = deck.title;
+    pres.rtlMode = deck.dir === 'rtl';
+    const inch = (value) => value / (deck.width / 13.333);
+    for (const slideExport of deck.slides) {
+        const slide = pres.addSlide();
+        slide.background = { data: stripDataPrefix(slideExport.background) };
+        for (const element of slideExport.elements) {
+            switch (element.kind) {
+                case 'text':
+                    addText(slide, element, inch, deck.dir);
+                    break;
+                case 'table':
+                    addTable(slide, element, inch, deck.dir);
+                    break;
+                case 'image':
+                    addImage(slide, element, inch);
+                    break;
+            }
+        }
+        if (slideExport.notes)
+            slide.addNotes(slideExport.notes);
+    }
+    return (await pres.write({ outputType: 'blob' }));
+}
+/** Pixels on the 1920-wide canvas to points. */
+const pt = (pixels) => Math.round(pixels * 0.5 * 10) / 10;
+/** pptxgenjs wants `image/png;base64,...`, without the `data:` scheme. */
+function stripDataPrefix(dataUrl) {
+    return dataUrl.replace(/^data:/, '');
+}
+function position(box, inch) {
+    return { x: inch(box.x), y: inch(box.y), w: inch(box.w), h: inch(box.h) };
+}
+function textRuns(paragraphs, dir) {
+    const runs = [];
+    paragraphs.forEach((paragraph, p) => {
+        paragraph.runs.forEach((run, r) => {
+            const isLast = r === paragraph.runs.length - 1;
+            runs.push({
+                text: run.text,
+                options: {
+                    fontFace: run.font,
+                    fontSize: pt(run.size),
+                    color: run.color,
+                    bold: run.bold,
+                    italic: run.italic,
+                    underline: run.underline ? { style: 'sng' } : undefined,
+                    align: paragraph.align,
+                    rtlMode: dir === 'rtl',
+                    bullet: paragraph.bullet === 'number'
+                        ? { type: 'number', indent: pt(run.size * 1.2) }
+                        : paragraph.bullet === 'disc'
+                            ? { indent: pt(run.size * 1.2) }
+                            : false,
+                    indentLevel: paragraph.bullet ? paragraph.level : undefined,
+                    lineSpacing: paragraph.lineHeight ? pt(paragraph.lineHeight) : undefined,
+                    paraSpaceAfter: paragraph.spaceAfter ? pt(paragraph.spaceAfter) : undefined,
+                    breakLine: isLast && p < paragraphs.length - 1,
+                },
+            });
+        });
+    });
+    return runs;
+}
+function addText(slide, element, inch, dir) {
+    // A little slack on the width: PowerPoint lays text out a hair wider than a
+    // browser, and a heading that wraps one word early looks broken.
+    const box = { ...element.box, w: element.box.w * 1.04 };
+    if (dir === 'rtl')
+        box.x -= element.box.w * 0.04;
+    slide.addText(textRuns(element.paragraphs, dir), {
+        ...position(box, inch),
+        margin: 0,
+        valign: 'top',
+        fit: 'none',
+        wrap: true,
+    });
+}
+function addTable(slide, element, inch, dir) {
+    const rows = element.rows.map((row) => row.cells.map((cell) => ({
+        text: textRuns(cell.paragraphs, dir),
+        options: {
+            fill: cell.fill ? { color: cell.fill } : undefined,
+            border: cell.border
+                ? [
+                    { type: 'none' },
+                    { type: 'none' },
+                    { type: 'solid', color: cell.border.color, pt: pt(cell.border.width) },
+                    { type: 'none' },
+                ]
+                : { type: 'none' },
+            valign: 'middle',
+            margin: [0.06, 0.1, 0.06, 0.1],
+        },
+    })));
+    slide.addTable(rows, {
+        x: inch(element.box.x),
+        y: inch(element.box.y),
+        w: inch(element.box.w),
+        colW: element.columnWidths.map(inch),
+        rowH: element.rows.map((row) => inch(row.height)),
+    });
+}
+function addImage(slide, element, inch) {
+    slide.addImage({
+        data: stripDataPrefix(element.src),
+        ...position(element.box, inch),
+        altText: element.alt,
+    });
+}

package/lib/export/use-deck-export.d.ts

@@ -0,0 +1,19 @@
+export type ExportFormat = 'pdf' | 'pptx' | 'png';
+interface ExportOptions {
+    slideIndex: number;
+    title: string;
+    dir: 'ltr' | 'rtl';
+    goTo: (index: number, step?: number) => void;
+}
+/**
+ * Export, and the static render it works from: every slide still and fully
+ * built, in a stack of its own, while an export or a print is under way.
+ */
+export declare function useDeckExport({ slideIndex, title, dir, goTo }: ExportOptions): {
+    staticRender: boolean;
+    stackRef: import("react").RefObject<HTMLDivElement | null>;
+    busy: string | null;
+    runExport: (format: ExportFormat) => Promise<void>;
+    registerNotesFor: (index: number) => (notes: string | undefined) => void;
+};
+export {};

package/lib/export/use-deck-export.js

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { describeDeck, download, fileNameFor, rasteriseSlide, writePptx } from './index.js';
+/**
+ * Export, and the static render it works from: every slide still and fully
+ * built, in a stack of its own, while an export or a print is under way.
+ */
+export function useDeckExport({ slideIndex, title, dir, goTo }) {
+    const [staticRender, setStaticRender] = useState(false);
+    const [busy, setBusy] = useState(null);
+    const stackRef = useRef(null);
+    const notesRef = useRef(new Map());
+    const registerNotesFor = useCallback((index) => (notes) => {
+        notesRef.current.set(index, notes);
+    }, []);
+    // The browser's own print shortcut gets the same static stack the PDF
+    // control does; flushSync because print layout happens before React would
+    // otherwise render.
+    useEffect(() => {
+        const before = () => flushSync(() => setStaticRender(true));
+        const after = () => setStaticRender(false);
+        window.addEventListener('beforeprint', before);
+        window.addEventListener('afterprint', after);
+        return () => {
+            window.removeEventListener('beforeprint', before);
+            window.removeEventListener('afterprint', after);
+        };
+    }, []);
+    /** Render every slide still and fully built, wait for it to settle, then run `work`. */
+    const withStaticSlides = useCallback(async (work) => {
+        flushSync(() => setStaticRender(true));
+        try {
+            await settle(stackRef.current);
+            const rendered = [
+                ...(stackRef.current?.querySelectorAll('.deck-slide') ?? []),
+            ];
+            return await work(rendered);
+        }
+        finally {
+            setStaticRender(false);
+        }
+    }, []);
+    const describe = useCallback((rendered, onProgress) => describeDeck(rendered.map((element, index) => ({
+        element,
+        notes: notesRef.current.get(index),
+    })), { title, dir }, onProgress), [title, dir]);
+    const runExport = useCallback(async (format) => {
+        if (format === 'pdf') {
+            flushSync(() => setStaticRender(true));
+            await settle(stackRef.current);
+            window.print();
+            return;
+        }
+        setBusy(format === 'pptx' ? 'Building PowerPoint…' : 'Rendering slide…');
+        try {
+            await withStaticSlides(async (rendered) => {
+                if (format === 'png') {
+                    const png = await rasteriseSlide(rendered[slideIndex], { scale: 1 });
+                    download(png, fileNameFor(title, 'png', ` - slide ${slideIndex + 1}`));
+                    return;
+                }
+                const described = await describe(rendered, (done, total) => setBusy(`Building PowerPoint… ${done} of ${total}`));
+                download(await writePptx(described), fileNameFor(title, 'pptx'));
+            });
+        }
+        catch (error) {
+            console.error('Deck export failed', error);
+            setBusy(`Export failed: ${error instanceof Error ? error.message : String(error)}`);
+            await new Promise((resolve) => setTimeout(resolve, 3000));
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [withStaticSlides, describe, slideIndex, title]);
+    // Exposed for automation (end-to-end tests, a host's own export button):
+    // the same paths the controls take, with no menu to click through.
+    useEffect(() => {
+        const handle = {
+            export: runExport,
+            describe: () => withStaticSlides((rendered) => describe(rendered)),
+            goTo,
+        };
+        window.__deck = handle;
+        return () => {
+            delete window.__deck;
+        };
+    }, [runExport, withStaticSlides, describe, goTo]);
+    return { staticRender, stackRef, busy, runExport, registerNotesFor };
+}
+/** Wait for fonts and pictures in a freshly rendered subtree, and two frames for layout. */
+async function settle(root) {
+    await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+    await document.fonts?.ready;
+    if (!root)
+        return;
+    await Promise.all([...root.querySelectorAll('img')].map((image) => image.complete ? undefined : image.decode().catch(() => undefined)));
+}

package/lib/index.d.ts

@@ -0,0 +1,17 @@
+export { Deck, type DeckProps, type ExportFormat } from './Deck.js';
+export { Slide, type SlideProps, type Transition } from './Slide.js';
+export { Step, useStepVisible, type StepProps, type StepAnimation } from './Step.js';
+export { ALL_STEPS, SLIDE_HEIGHT, SLIDE_WIDTH, useBrand, useDeck, useSlide, type DeckState, type RenderMode, type SlideState, } from './context.js';
+export { defaultBrand, readableOn, resolveBrand, type Brand } from './brand.js';
+export { Bullets, Heading, Text, type BulletsProps, type HeadingProps, type TextProps, } from './primitives/text.js';
+export { Image, type ImageProps } from './primitives/media.js';
+export { Table, type TableProps } from './primitives/table.js';
+export { Chart, type ChartProps, type ChartSeriesInput, type ValueFormat, } from './primitives/chart.js';
+/**
+ * Marks any element of your own as native PowerPoint text, so it exports as an
+ * editable text box rather than as part of the slide's picture:
+ * `<div {...nativeText}>...</div>`.
+ */
+export declare const nativeText: {
+    readonly 'data-deck-native': "text";
+};

package/lib/index.js

@@ -0,0 +1,15 @@
+export { Deck } from './Deck.js';
+export { Slide } from './Slide.js';
+export { Step, useStepVisible } from './Step.js';
+export { ALL_STEPS, SLIDE_HEIGHT, SLIDE_WIDTH, useBrand, useDeck, useSlide, } from './context.js';
+export { defaultBrand, readableOn, resolveBrand } from './brand.js';
+export { Bullets, Heading, Text, } from './primitives/text.js';
+export { Image } from './primitives/media.js';
+export { Table } from './primitives/table.js';
+export { Chart, } from './primitives/chart.js';
+/**
+ * Marks any element of your own as native PowerPoint text, so it exports as an
+ * editable text box rather than as part of the slide's picture:
+ * `<div {...nativeText}>...</div>`.
+ */
+export const nativeText = { 'data-deck-native': 'text' };

package/lib/keyboard.d.ts

@@ -0,0 +1,18 @@
+interface KeyActions {
+    dir: 'ltr' | 'rtl';
+    next: () => void;
+    prev: () => void;
+    first: () => void;
+    last: () => void;
+    toggleFullscreen: () => void;
+    toggleOverview: () => void;
+    dismiss: () => void;
+}
+/**
+ * Right, down, space, page down and enter advance (a presenter's clicker sends
+ * page down); left, up, page up and backspace go back; home and end jump; F
+ * toggles fullscreen; O toggles the overview. In a right-to-left deck the left
+ * and right arrows swap.
+ */
+export declare function useDeckKeys({ dir, next, prev, first, last, toggleFullscreen, toggleOverview, dismiss, }: KeyActions): void;
+export {};

package/lib/keyboard.js

@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+/**
+ * Right, down, space, page down and enter advance (a presenter's clicker sends
+ * page down); left, up, page up and backspace go back; home and end jump; F
+ * toggles fullscreen; O toggles the overview. In a right-to-left deck the left
+ * and right arrows swap.
+ */
+export function useDeckKeys({ dir, next, prev, first, last, toggleFullscreen, toggleOverview, dismiss, }) {
+    useEffect(() => {
+        const onKey = (event) => {
+            if (event.defaultPrevented || event.metaKey || event.ctrlKey || event.altKey)
+                return;
+            const target = event.target;
+            if (target instanceof Element &&
+                target.closest('input, textarea, select, [contenteditable="true"]')) {
+                return;
+            }
+            const forward = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
+            const backward = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+            switch (event.key) {
+                case forward:
+                case 'ArrowDown':
+                case 'PageDown':
+                case ' ':
+                case 'Enter':
+                    next();
+                    break;
+                case backward:
+                case 'ArrowUp':
+                case 'PageUp':
+                case 'Backspace':
+                    prev();
+                    break;
+                case 'Home':
+                    first();
+                    break;
+                case 'End':
+                    last();
+                    break;
+                case 'f':
+                case 'F':
+                    toggleFullscreen();
+                    break;
+                case 'o':
+                case 'O':
+                    toggleOverview();
+                    break;
+                case 'Escape':
+                    dismiss();
+                    return;
+                default:
+                    return;
+            }
+            event.preventDefault();
+        };
+        window.addEventListener('keydown', onKey);
+        return () => window.removeEventListener('keydown', onKey);
+    }, [dir, next, prev, first, last, toggleFullscreen, toggleOverview, dismiss]);
+}

package/lib/memory.d.ts

@@ -0,0 +1,31 @@
+import type { ReactElement } from 'react';
+/**
+ * Where a presenter was in a deck, kept so coming back lands there.
+ *
+ * Kept by the slide's name rather than its number: a deck that varies by
+ * scenario or session state can gain or lose slides between visits, and 'slide
+ * nine' would then be the wrong slide. The number is kept too, as the fallback
+ * for a slide that has since disappeared.
+ */
+export interface SavedPosition {
+    slide: string | null;
+    index: number;
+    /** Steps revealed; `'all'` for a fully built slide. */
+    step: number | 'all';
+}
+/** A slide's name: its `id` prop, or the React key every slide in an array has. */
+export declare function slideName(slide: ReactElement): string | null;
+/** The slide a name or number points at, or null when it points at nothing. */
+export declare function resolveSlide(slides: ReactElement[], target: string | number | null | undefined): number | null;
+/**
+ * Storage can be missing or refuse access (a private window, blocked site
+ * data), so every read and write is allowed to fail. Forgetting a position is
+ * the right outcome then, and failing the deck is not.
+ */
+export declare function readPosition(key: string): SavedPosition | null;
+export declare function writePosition(key: string, position: SavedPosition): void;
+/** Where a saved position lands in the deck as it is now. */
+export declare function restore(slides: ReactElement[], saved: SavedPosition): {
+    slideIndex: number;
+    step: number;
+} | null;

package/lib/memory.js

@@ -0,0 +1,60 @@
+import { ALL_STEPS } from './context.js';
+const PREFIX = 'deck-position:';
+/** A slide's name: its `id` prop, or the React key every slide in an array has. */
+export function slideName(slide) {
+    const id = slide.props.id;
+    if (typeof id === 'string')
+        return id;
+    return slide.key === null ? null : String(slide.key);
+}
+/** The slide a name or number points at, or null when it points at nothing. */
+export function resolveSlide(slides, target) {
+    if (target === null || target === undefined)
+        return null;
+    if (typeof target === 'number') {
+        return slides.length === 0 ? null : Math.min(Math.max(0, target), slides.length - 1);
+    }
+    const index = slides.findIndex((slide) => slideName(slide) === target);
+    return index === -1 ? null : index;
+}
+/**
+ * Storage can be missing or refuse access (a private window, blocked site
+ * data), so every read and write is allowed to fail. Forgetting a position is
+ * the right outcome then, and failing the deck is not.
+ */
+export function readPosition(key) {
+    try {
+        const raw = window.localStorage.getItem(PREFIX + key);
+        if (!raw)
+            return null;
+        const saved = JSON.parse(raw);
+        if (typeof saved.index !== 'number')
+            return null;
+        return {
+            slide: typeof saved.slide === 'string' ? saved.slide : null,
+            index: saved.index,
+            step: saved.step === 'all' || typeof saved.step === 'number' ? saved.step : 0,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+export function writePosition(key, position) {
+    try {
+        window.localStorage.setItem(PREFIX + key, JSON.stringify(position));
+    }
+    catch {
+        // Not remembered, which is all failing here can cost.
+    }
+}
+/** Where a saved position lands in the deck as it is now. */
+export function restore(slides, saved) {
+    const byName = saved.slide === null ? null : resolveSlide(slides, saved.slide);
+    if (byName !== null) {
+        return { slideIndex: byName, step: saved.step === 'all' ? ALL_STEPS : saved.step };
+    }
+    // The slide has gone: land near where it was, at its start.
+    const byIndex = resolveSlide(slides, saved.index);
+    return byIndex === null ? null : { slideIndex: byIndex, step: 0 };
+}

package/lib/navigation.d.ts

@@ -0,0 +1,26 @@
+import { type ReactElement } from 'react';
+export type Direction = 'forward' | 'backward';
+export interface Position {
+    slideIndex: number;
+    step: number;
+    direction: Direction;
+}
+interface NavigationOptions {
+    slides: ReactElement[];
+    startAt?: string | number;
+    rememberAs?: string;
+    onSlideChange?: (slideIndex: number) => void;
+}
+/**
+ * Where the presenter is, and the moves that change it: by slide, and within a
+ * slide by the steps its `<Step>`s register.
+ */
+export declare function useDeckNavigation({ slides, startAt, rememberAs, onSlideChange, }: NavigationOptions): {
+    slideIndex: number;
+    position: Position;
+    goTo: (index: number, step?: number) => void;
+    next: () => void;
+    prev: () => void;
+    registerStepFor: (index: number) => (at: number) => () => void;
+};
+export {};

package/lib/navigation.js

@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { ALL_STEPS } from './context.js';
+import { readPosition, resolveSlide, restore, slideName, writePosition } from './memory.js';
+/**
+ * Where the presenter is, and the moves that change it: by slide, and within a
+ * slide by the steps its `<Step>`s register.
+ */
+export function useDeckNavigation({ slides, startAt, rememberAs, onSlideChange, }) {
+    const startingPosition = useCallback((key) => {
+        const saved = key === undefined ? null : readPosition(key);
+        const restored = saved ? restore(slides, saved) : null;
+        return {
+            slideIndex: restored?.slideIndex ?? resolveSlide(slides, startAt ?? 0) ?? 0,
+            step: restored?.step ?? 0,
+            direction: 'forward',
+        };
+    }, [slides, startAt]);
+    const [position, setPosition] = useState(() => startingPosition(rememberAs));
+    // A different key is a different place to come back to: a session that
+    // starts while the deck is open, say. Pick up whatever it remembers.
+    const rememberedAs = useRef(rememberAs);
+    useEffect(() => {
+        if (rememberedAs.current === rememberAs)
+            return;
+        rememberedAs.current = rememberAs;
+        setPosition(startingPosition(rememberAs));
+    }, [rememberAs, startingPosition]);
+    const slideIndex = clamp(position.slideIndex, 0, slides.length - 1);
+    useEffect(() => onSlideChange?.(slideIndex), [slideIndex, onSlideChange]);
+    const currentName = slides[slideIndex] ? slideName(slides[slideIndex]) : null;
+    useEffect(() => {
+        if (rememberAs === undefined || rememberedAs.current !== rememberAs)
+            return;
+        writePosition(rememberAs, {
+            slide: currentName,
+            index: slideIndex,
+            step: position.step === ALL_STEPS ? 'all' : position.step,
+        });
+    }, [rememberAs, currentName, slideIndex, position.step]);
+    const stepsRef = useRef(new Map());
+    const stepsOf = useCallback((index) => {
+        const counts = stepsRef.current.get(index);
+        return counts ? [...counts.keys()].sort((a, b) => a - b) : [];
+    }, []);
+    const registerStepFor = useCallback((index) => (at) => {
+        const counts = stepsRef.current.get(index) ?? new Map();
+        counts.set(at, (counts.get(at) ?? 0) + 1);
+        stepsRef.current.set(index, counts);
+        return () => {
+            const held = counts.get(at) ?? 0;
+            if (held <= 1)
+                counts.delete(at);
+            else
+                counts.set(at, held - 1);
+        };
+    }, []);
+    const goTo = useCallback((index, step = 0) => {
+        setPosition((current) => ({
+            slideIndex: clamp(index, 0, slides.length - 1),
+            step,
+            direction: index < current.slideIndex ? 'backward' : 'forward',
+        }));
+    }, [slides.length]);
+    const next = useCallback(() => {
+        setPosition((current) => {
+            const steps = stepsOf(current.slideIndex);
+            const following = steps.find((at) => at > current.step);
+            if (following !== undefined)
+                return { ...current, step: following };
+            if (current.slideIndex >= slides.length - 1)
+                return current;
+            return { slideIndex: current.slideIndex + 1, step: 0, direction: 'forward' };
+        });
+    }, [slides.length, stepsOf]);
+    const prev = useCallback(() => {
+        setPosition((current) => {
+            const steps = stepsOf(current.slideIndex);
+            if (current.step > 0 && steps.length > 0) {
+                const reached = current.step === ALL_STEPS ? steps[steps.length - 1] : current.step;
+                const earlier = [...steps].reverse().find((at) => at < reached);
+                return { ...current, step: earlier ?? 0 };
+            }
+            if (current.slideIndex === 0)
+                return current;
+            // Going back lands on the previous slide as it was left: fully built.
+            return { slideIndex: current.slideIndex - 1, step: ALL_STEPS, direction: 'backward' };
+        });
+    }, [stepsOf]);
+    return { slideIndex, position, goTo, next, prev, registerStepFor };
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), Math.max(min, max));
+}

package/lib/overview.d.ts

@@ -0,0 +1,11 @@
+import { type ReactElement } from 'react';
+import { type SlideState } from './context.js';
+interface OverviewProps {
+    slides: ReactElement[];
+    slideIndex: number;
+    staticState: (index: number) => SlideState;
+    choose: (index: number) => void;
+}
+/** Every slide as a thumbnail, fully built, to jump to. */
+export declare function Overview({ slides, slideIndex, staticState, choose }: OverviewProps): import("react").JSX.Element;
+export {};

package/lib/overview.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { SLIDE_WIDTH, SlideContext } from './context.js';
+/** Every slide as a thumbnail, fully built, to jump to. */
+export function Overview({ slides, slideIndex, staticState, choose }) {
+    return (_jsx("div", { className: "deck-overview", role: "list", children: slides.map((slide, index) => (_jsxs("button", { type: "button", className: "deck-thumb", "aria-current": index === slideIndex, "aria-label": `Slide ${index + 1}`, onClick: () => choose(index), children: [_jsx(Thumbnail, { children: _jsx(SlideContext.Provider, { value: staticState(index), children: slide }) }), _jsx("span", { className: "deck-thumb-number", children: index + 1 })] }, index))) }));
+}
+function Thumbnail({ children }) {
+    const ref = useRef(null);
+    const [scale, setScale] = useState(0.15);
+    useLayoutEffect(() => {
+        const parent = ref.current?.parentElement;
+        if (!parent)
+            return;
+        const fit = () => setScale(parent.getBoundingClientRect().width / SLIDE_WIDTH || 0.15);
+        fit();
+        const observer = new ResizeObserver(fit);
+        observer.observe(parent);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsx("div", { ref: ref, className: "deck-static", style: { transform: `scale(${scale})` }, children: children }));
+}

package/lib/primitives/chart.d.ts

@@ -0,0 +1,40 @@
+import { type CSSProperties } from 'react';
+export interface ChartSeriesInput {
+    name: string;
+    /** One value per category; `null` for a gap. */
+    values: (number | null)[];
+    /** Any CSS hex colour. Series take the brand's colours in turn by default. */
+    color?: string;
+}
+export interface ValueFormat {
+    style?: 'decimal' | 'currency' | 'percent';
+    /** ISO 4217 code, for `currency`. */
+    currency?: string;
+    maximumFractionDigits?: number;
+}
+export interface ChartProps {
+    type: 'bar' | 'line';
+    categories: string[];
+    series: ChartSeriesInput[];
+    showValues?: boolean;
+    /** Defaults to true when there is more than one series. */
+    showLegend?: boolean;
+    valueFormat?: ValueFormat;
+    /** Locale for number formatting; the document's language by default. */
+    locale?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A bar or line chart drawn in the brand's colours.
+ *
+ * Sized by its container, so give it a width and height through `style` or
+ * layout. On screen it draws in when its slide arrives. In PowerPoint it is a
+ * picture of the chart as drawn, so the export always matches the screen.
+ */
+export declare function Chart({ type, categories, series, showValues, showLegend, valueFormat, locale, className, style, }: ChartProps): import("react").JSX.Element;
+/**
+ * An axis a person would draw: a nice step (1, 2, 2.5 or 5 times a power of
+ * ten) that splits the range into about five, and bounds that are whole steps.
+ */
+export declare function niceRange(min: number, max: number): [number, number, number];