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

package/lib/primitives/chart.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { useBrand, useSlide } from '../context.js';
+const EXTRA_COLORS = ['#f59e0b', '#8b5cf6', '#ef4444', '#10b981', '#64748b'];
+/**
+ * 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 function Chart({ type, categories, series, showValues = false, showLegend = series.length > 1, valueFormat = {}, locale, className, style, }) {
+    const brand = useBrand();
+    const slide = useSlide();
+    const ref = useRef(null);
+    const [size, setSize] = useState({ width: 1200, height: 600 });
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        // Layout size, not the scaled on-screen size: the chart is drawn in
+        // slide pixels like everything else on the slide.
+        const measure = () => setSize({ width: element.offsetWidth, height: element.offsetHeight });
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, []);
+    const palette = [brand.colors.primary, brand.colors.secondary, ...EXTRA_COLORS];
+    const colored = series.map((s, index) => ({
+        ...s,
+        color: s.color ?? palette[index % palette.length],
+    }));
+    const format = new Intl.NumberFormat(locale, {
+        style: valueFormat.style ?? 'decimal',
+        currency: valueFormat.currency,
+        maximumFractionDigits: valueFormat.maximumFractionDigits ?? 0,
+        notation: 'compact',
+    });
+    const fullFormat = new Intl.NumberFormat(locale, {
+        style: valueFormat.style ?? 'decimal',
+        currency: valueFormat.currency,
+        maximumFractionDigits: valueFormat.maximumFractionDigits ?? 0,
+    });
+    const { width, height } = size;
+    const legendHeight = showLegend ? 64 : 0;
+    const rtl = slide.dir === 'rtl';
+    // The value axis sits on the leading side, so its labels' room does too.
+    const axisRoom = 120;
+    const pad = {
+        top: 40,
+        right: rtl ? axisRoom : 24,
+        bottom: 64 + legendHeight,
+        left: rtl ? 24 : axisRoom,
+    };
+    const plotW = Math.max(1, width - pad.left - pad.right);
+    const plotH = Math.max(1, height - pad.top - pad.bottom);
+    const all = colored.flatMap((s) => s.values).filter((v) => v !== null);
+    const [min, max, step] = niceRange(Math.min(0, ...all), Math.max(0, ...all));
+    const y = (value) => pad.top + plotH - ((value - min) / (max - min || 1)) * plotH;
+    const band = plotW / Math.max(1, categories.length);
+    const ticks = Array.from({ length: Math.round((max - min) / step) + 1 }, (_, i) => min + step * i);
+    const x = (index) => rtl ? pad.left + plotW - band * (index + 1) : pad.left + band * index;
+    const animate = slide.mode === 'live';
+    return (_jsxs("div", { ref: ref, className: className, style: { position: 'relative', width: '100%', height: 600, fontSize: 28, ...style }, children: [_jsxs("svg", { width: width, height: height, style: { display: 'block', overflow: 'visible' }, children: [ticks.map((tick) => (_jsxs("g", { children: [_jsx("line", { x1: pad.left, x2: pad.left + plotW, y1: y(tick), y2: y(tick), stroke: "currentColor", strokeOpacity: tick === 0 ? 0.5 : 0.12, strokeWidth: 2 }), _jsx("text", { x: rtl ? pad.left + plotW + 16 : pad.left - 16, y: y(tick), dy: "0.35em", textAnchor: rtl ? 'start' : 'end', fill: "var(--deck-muted)", children: format.format(tick) })] }, tick))), categories.map((category, index) => (_jsx("text", { x: x(index) + band / 2, y: pad.top + plotH + 44, textAnchor: "middle", fill: "var(--deck-muted)", children: category }, category))), type === 'bar' &&
+                        colored.map((s, si) => {
+                            const groupW = band * 0.72;
+                            const barW = groupW / colored.length;
+                            return s.values.map((value, ci) => {
+                                if (value === null)
+                                    return null;
+                                const top = Math.min(y(value), y(0));
+                                const barH = Math.abs(y(value) - y(0));
+                                const offset = rtl ? colored.length - 1 - si : si;
+                                const left = x(ci) + (band - groupW) / 2 + barW * offset;
+                                return (_jsxs("g", { children: [_jsx("rect", { className: animate ? 'deck-chart-bar' : undefined, style: animate
+                                                ? { animationDelay: `${ci * 60 + si * 30}ms` }
+                                                : undefined, x: left + 3, y: top, width: Math.max(1, barW - 6), height: Math.max(1, barH), rx: 6, fill: s.color }), showValues && (_jsx("text", { x: left + barW / 2, y: value >= 0 ? top - 12 : top + barH + 32, textAnchor: "middle", fill: "currentColor", fontSize: "0.85em", children: fullFormat.format(value) }))] }, `${si}-${ci}`));
+                            });
+                        }), type === 'line' &&
+                        colored.map((s, si) => {
+                            const points = s.values
+                                .map((value, ci) => value === null ? null : [x(ci) + band / 2, y(value)])
+                                .filter((p) => p !== null);
+                            return (_jsxs("g", { children: [_jsx("path", { className: animate ? 'deck-chart-line' : undefined, d: points
+                                            .map(([px, py], i) => `${i ? 'L' : 'M'}${px},${py}`)
+                                            .join(' '), fill: "none", stroke: s.color, strokeWidth: 6, strokeLinejoin: "round", strokeLinecap: "round" }), points.map(([px, py], i) => (_jsx("circle", { cx: px, cy: py, r: 9, fill: s.color }, i))), showValues &&
+                                        s.values.map((value, ci) => value === null ? null : (_jsx("text", { x: x(ci) + band / 2, y: y(value) - 22, textAnchor: "middle", fill: "currentColor", fontSize: "0.85em", children: fullFormat.format(value) }, ci)))] }, si));
+                        })] }), showLegend && (_jsx("div", { style: {
+                    position: 'absolute',
+                    insetInlineStart: axisRoom,
+                    bottom: 0,
+                    height: legendHeight,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 48,
+                }, children: colored.map((s) => (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 12 }, children: [_jsx("span", { style: {
+                                width: 24,
+                                height: 24,
+                                borderRadius: 4,
+                                background: s.color,
+                            } }), s.name] }, s.name))) }))] }));
+}
+/**
+ * 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 function niceRange(min, max) {
+    if (min === max)
+        return [min, min + 1, 1];
+    const rough = (max - min) / 5;
+    const magnitude = 10 ** Math.floor(Math.log10(rough));
+    const step = [1, 2, 2.5, 5, 10].map((m) => m * magnitude).find((candidate) => candidate >= rough) ??
+        magnitude * 10;
+    return [Math.floor(min / step) * step, Math.ceil(max / step) * step, step];
+}

package/lib/primitives/media.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties } from 'react';
+export interface ImageProps {
+    src: string;
+    alt: string;
+    /**
+     * `contain` shows the whole picture and exports it as a picture PowerPoint
+     * can move and resize. `cover` fills the box, cropping as it must, and stays
+     * part of the slide's background in PowerPoint.
+     */
+    fit?: 'contain' | 'cover';
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function Image({ src, alt, fit, className, style }: ImageProps): import("react").JSX.Element;

package/lib/primitives/media.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NATIVE_ATTRIBUTE } from '../export/collect.js';
+export function Image({ src, alt, fit = 'contain', className, style }) {
+    return (_jsx("img", { ...(fit === 'contain' ? { [NATIVE_ATTRIBUTE]: 'image' } : {}), src: src, alt: alt, className: className, draggable: false, style: { display: 'block', objectFit: fit, ...style } }));
+}

package/lib/primitives/table.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties, ReactNode } from 'react';
+export interface TableProps {
+    columns: ReactNode[];
+    rows: ReactNode[][];
+    /** Text alignment per column; numbers usually read best at the end. */
+    align?: ('start' | 'center' | 'end')[];
+    className?: string;
+    style?: CSSProperties;
+}
+/** A table with a branded header row. Exports as an editable PowerPoint table. */
+export declare function Table({ columns, rows, align, className, style }: TableProps): import("react").JSX.Element;

package/lib/primitives/table.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NATIVE_ATTRIBUTE } from '../export/collect.js';
+/** A table with a branded header row. Exports as an editable PowerPoint table. */
+export function Table({ columns, rows, align = [], className, style }) {
+    const cell = (index) => ({
+        padding: '18px 24px',
+        textAlign: align[index] ?? 'start',
+        borderBottom: '2px solid var(--deck-surface)',
+    });
+    return (_jsxs("table", { [NATIVE_ATTRIBUTE]: 'table', className: className, style: {
+            borderCollapse: 'collapse',
+            width: '100%',
+            fontSize: 36,
+            background: 'var(--deck-background)',
+            ...style,
+        }, children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column, index) => (_jsx("th", { style: {
+                            ...cell(index),
+                            background: 'var(--deck-primary)',
+                            color: 'var(--deck-on-primary)',
+                            fontWeight: 700,
+                        }, children: column }, index))) }) }), _jsx("tbody", { children: rows.map((row, r) => (_jsx("tr", { style: {
+                        background: r % 2 ? 'var(--deck-surface)' : 'var(--deck-background)',
+                    }, children: row.map((value, index) => (_jsx("td", { style: cell(index), children: value }, index))) }, r))) })] }));
+}

package/lib/primitives/text.d.ts

@@ -0,0 +1,33 @@
+import type { CSSProperties, ElementType, ReactNode } from 'react';
+import { type StepAnimation } from '../Step.js';
+interface TextBase {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export interface HeadingProps extends TextBase {
+    level?: 1 | 2 | 3;
+}
+/** A heading in the brand's heading font. Exports as an editable text box. */
+export declare function Heading({ level, children, className, style }: HeadingProps): import("react").JSX.Element;
+export interface TextProps extends TextBase {
+    as?: ElementType;
+    /** `lead` for an introductory paragraph, `caption` for small print. */
+    variant?: 'body' | 'lead' | 'caption';
+}
+/** Body copy. Inline formatting (`<strong>`, `<em>`, styled spans) survives export. */
+export declare function Text({ as: Element, variant, children, className, style, }: TextProps): import("react").JSX.Element;
+export interface BulletsProps extends TextBase {
+    items: ReactNode[];
+    ordered?: boolean;
+    /**
+     * Reveal the items one click at a time, the first on click `stepFrom`
+     * (default 1). In print and export every item shows.
+     */
+    stepped?: boolean;
+    stepFrom?: number;
+    animation?: StepAnimation;
+}
+/** A bulleted or numbered list. Exports as an editable PowerPoint list. */
+export declare function Bullets({ items, ordered, stepped, stepFrom, animation, className, style, }: BulletsProps): import("react").JSX.Element;
+export {};

package/lib/primitives/text.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NATIVE_ATTRIBUTE } from '../export/collect.js';
+import { Step } from '../Step.js';
+const native = { [NATIVE_ATTRIBUTE]: 'text' };
+const HEADING_SIZES = { 1: 104, 2: 72, 3: 52 };
+/** A heading in the brand's heading font. Exports as an editable text box. */
+export function Heading({ level = 2, children, className, style }) {
+    const Element = `h${level}`;
+    return (_jsx(Element, { ...native, className: className, style: { fontSize: HEADING_SIZES[level], fontWeight: 700, ...style }, children: children }));
+}
+const TEXT_STYLES = {
+    body: { fontSize: 40 },
+    lead: { fontSize: 52, lineHeight: 1.3 },
+    caption: { fontSize: 28, color: 'var(--deck-muted)' },
+};
+/** Body copy. Inline formatting (`<strong>`, `<em>`, styled spans) survives export. */
+export function Text({ as: Element = 'p', variant = 'body', children, className, style, }) {
+    return (_jsx(Element, { ...native, className: className, style: { ...TEXT_STYLES[variant], ...style }, children: children }));
+}
+/** A bulleted or numbered list. Exports as an editable PowerPoint list. */
+export function Bullets({ items, ordered = false, stepped = false, stepFrom = 1, animation = 'fade-left', className, style, }) {
+    const List = ordered ? 'ol' : 'ul';
+    return (_jsx(List, { ...native, className: className, style: {
+            margin: 0,
+            paddingInlineStart: '1.1em',
+            fontSize: 44,
+            lineHeight: 1.3,
+            ...style,
+        }, children: items.map((item, index) => stepped ? (_jsx(Step, { as: "li", at: stepFrom + index, animation: animation, style: { marginBottom: 24 }, children: item }, index)) : (_jsx("li", { style: { marginBottom: 24 }, children: item }, index))) }));
+}

package/lib/styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The library's whole stylesheet, injected once by `Deck`.
+ *
+ * In a string rather than a `.css` import so a game's bundler needs no CSS
+ * handling to use the deck, and so nothing about the library's styling leaks
+ * into how the game is built.
+ */
+export declare const DECK_CSS = "\n.deck-root {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    background: #111;\n    color: var(--deck-text);\n    font-family: var(--deck-font-body);\n    -webkit-font-smoothing: antialiased;\n    user-select: none;\n}\n.deck-root *, .deck-root *::before, .deck-root *::after { box-sizing: border-box; }\n.deck-stage {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 1920px;\n    height: 1080px;\n    transform-origin: center center;\n}\n.deck-slide {\n    position: relative;\n    width: 1920px;\n    height: 1080px;\n    overflow: hidden;\n    background: var(--deck-background);\n    color: var(--deck-text);\n    font-family: var(--deck-font-body);\n    font-size: 40px;\n    line-height: 1.35;\n}\n.deck-slide h1, .deck-slide h2, .deck-slide h3 {\n    font-family: var(--deck-font-heading);\n    margin: 0;\n    line-height: 1.1;\n}\n.deck-slide p { margin: 0; }\n\n/* Slide transitions: the incoming slide animates in, and the outgoing one is gone. */\n.deck-enter-fade { animation: deck-fade 450ms ease both; }\n.deck-enter-slide.deck-forward { animation: deck-slide-in-right 550ms cubic-bezier(.2,.7,.2,1) both; }\n.deck-enter-slide.deck-backward { animation: deck-slide-in-left 550ms cubic-bezier(.2,.7,.2,1) both; }\n.deck-enter-zoom { animation: deck-zoom 500ms cubic-bezier(.2,.7,.2,1) both; }\n.deck-enter-rise { animation: deck-rise 600ms cubic-bezier(.2,.7,.2,1) both; }\n@keyframes deck-fade { from { opacity: 0; } to { opacity: 1; } }\n@keyframes deck-slide-in-right { from { transform: translateX(8%); opacity: 0; } to { transform: none; opacity: 1; } }\n@keyframes deck-slide-in-left { from { transform: translateX(-8%); opacity: 0; } to { transform: none; opacity: 1; } }\n@keyframes deck-zoom { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }\n@keyframes deck-rise { from { transform: translateY(6%); opacity: 0; } to { transform: none; opacity: 1; } }\n\n/* Steps keep their space while hidden, so revealing one never reflows the slide. */\n.deck-step { transition: opacity 450ms ease, transform 550ms cubic-bezier(.2,.7,.2,1), filter 450ms ease; }\n.deck-step[data-visible=\"false\"] { opacity: 0; pointer-events: none; }\n.deck-step[data-visible=\"false\"][data-animation=\"fade-up\"] { transform: translateY(40px); }\n.deck-step[data-visible=\"false\"][data-animation=\"fade-left\"] { transform: translateX(-40px); }\n.deck-step[data-visible=\"false\"][data-animation=\"zoom\"] { transform: scale(.85); }\n.deck-step[data-visible=\"false\"][data-animation=\"blur\"] { filter: blur(12px); }\n.deck-step[data-animation=\"none\"] { transition: none; }\n.deck-static .deck-step { transition: none; }\n\n/* Drawing in a chart's bars and lines. */\n.deck-chart-bar { transform-box: fill-box; transform-origin: bottom; animation: deck-grow 700ms cubic-bezier(.2,.7,.2,1) both; }\n.deck-chart-line { stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: deck-draw 1200ms ease forwards; }\n.deck-static .deck-chart-bar, .deck-static .deck-chart-line { animation: none; stroke-dashoffset: 0; }\n@keyframes deck-grow { from { transform: scaleY(0); } to { transform: none; } }\n@keyframes deck-draw { to { stroke-dashoffset: 0; } }\n\n@media (prefers-reduced-motion: reduce) {\n    .deck-root *, .deck-root *::before, .deck-root *::after {\n        animation-duration: 1ms !important;\n        transition-duration: 1ms !important;\n    }\n}\n\n/* Controls fade in when the pointer moves, and out again when it rests. */\n.deck-controls {\n    position: absolute;\n    left: 50%;\n    bottom: 16px;\n    transform: translateX(-50%);\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    padding: 6px;\n    border-radius: 999px;\n    background: rgba(20, 22, 28, .82);\n    color: #fff;\n    font: 14px/1 system-ui, sans-serif;\n    opacity: 0;\n    transition: opacity 250ms ease;\n    z-index: 2;\n}\n.deck-root[data-controls=\"shown\"] .deck-controls, .deck-controls:focus-within { opacity: 1; }\n.deck-controls button {\n    all: unset;\n    cursor: pointer;\n    padding: 8px 12px;\n    border-radius: 999px;\n}\n.deck-controls button:hover, .deck-controls button:focus-visible { background: rgba(255,255,255,.16); }\n.deck-controls button:disabled { opacity: .4; cursor: default; }\n.deck-controls .deck-position { padding: 0 8px; font-variant-numeric: tabular-nums; }\n.deck-menu {\n    position: absolute;\n    bottom: 52px;\n    right: 0;\n    display: flex;\n    flex-direction: column;\n    min-width: 220px;\n    padding: 6px;\n    border-radius: 12px;\n    background: rgba(20, 22, 28, .95);\n}\n.deck-menu button { border-radius: 8px; }\n.deck-busy {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    place-items: center;\n    background: rgba(0,0,0,.55);\n    color: #fff;\n    font: 18px system-ui, sans-serif;\n    z-index: 3;\n}\n\n/* The overview grid. */\n.deck-overview {\n    position: absolute;\n    inset: 0;\n    overflow: auto;\n    padding: 24px;\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\n    gap: 16px;\n    background: #111;\n    z-index: 1;\n}\n.deck-thumb { all: unset; cursor: pointer; display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; outline: 2px solid transparent; }\n.deck-thumb[aria-current=\"true\"] { outline-color: var(--deck-primary); }\n.deck-thumb > div { position: absolute; top: 0; left: 0; transform-origin: top left; }\n.deck-thumb-number { position: absolute; left: 8px; bottom: 6px; color: #fff; font: 12px system-ui; text-shadow: 0 1px 2px #000; }\n\n/* Static renders, laid out off screen for export and on paper for print. */\n.deck-static-stack { position: fixed; top: 0; left: -100000px; }\n/*\n * While a slide's background picture is taken, native elements step aside so\n * PowerPoint can lay them back on top as real objects. Text hides its glyphs\n * only, so a pill or a card it is drawn on stays in the picture; the rest hide\n * whole, because PowerPoint redraws their fills itself. One the exporter could\n * not describe stays in the picture instead.\n */\n.deck-exporting [data-deck-native]:not([data-deck-native=\"text\"]):not([data-deck-native-failed]) {\n    visibility: hidden !important;\n}\n.deck-exporting [data-deck-native=\"text\"]:not([data-deck-native-failed]),\n.deck-exporting [data-deck-native=\"text\"]:not([data-deck-native-failed]) * {\n    color: transparent !important;\n    -webkit-text-fill-color: transparent !important;\n    text-shadow: none !important;\n    text-decoration-color: transparent !important;\n}\n\n@media print {\n    @page { size: 1920px 1080px; margin: 0; }\n    html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }\n    body > *:not(.deck-static-stack) { display: none !important; }\n    .deck-static-stack { position: static; }\n    .deck-static-stack .deck-slide { break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }\n}\n";
+/** Put {@link DECK_CSS} into the document once, however many decks mount. */
+export declare function injectDeckStyles(doc?: Document): void;

package/lib/styles.js

@@ -0,0 +1,192 @@
+import { SLIDE_HEIGHT, SLIDE_WIDTH } from './context.js';
+/**
+ * The library's whole stylesheet, injected once by `Deck`.
+ *
+ * In a string rather than a `.css` import so a game's bundler needs no CSS
+ * handling to use the deck, and so nothing about the library's styling leaks
+ * into how the game is built.
+ */
+export const DECK_CSS = `
+.deck-root {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #111;
+    color: var(--deck-text);
+    font-family: var(--deck-font-body);
+    -webkit-font-smoothing: antialiased;
+    user-select: none;
+}
+.deck-root *, .deck-root *::before, .deck-root *::after { box-sizing: border-box; }
+.deck-stage {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: ${SLIDE_WIDTH}px;
+    height: ${SLIDE_HEIGHT}px;
+    transform-origin: center center;
+}
+.deck-slide {
+    position: relative;
+    width: ${SLIDE_WIDTH}px;
+    height: ${SLIDE_HEIGHT}px;
+    overflow: hidden;
+    background: var(--deck-background);
+    color: var(--deck-text);
+    font-family: var(--deck-font-body);
+    font-size: 40px;
+    line-height: 1.35;
+}
+.deck-slide h1, .deck-slide h2, .deck-slide h3 {
+    font-family: var(--deck-font-heading);
+    margin: 0;
+    line-height: 1.1;
+}
+.deck-slide p { margin: 0; }
+
+/* Slide transitions: the incoming slide animates in, and the outgoing one is gone. */
+.deck-enter-fade { animation: deck-fade 450ms ease both; }
+.deck-enter-slide.deck-forward { animation: deck-slide-in-right 550ms cubic-bezier(.2,.7,.2,1) both; }
+.deck-enter-slide.deck-backward { animation: deck-slide-in-left 550ms cubic-bezier(.2,.7,.2,1) both; }
+.deck-enter-zoom { animation: deck-zoom 500ms cubic-bezier(.2,.7,.2,1) both; }
+.deck-enter-rise { animation: deck-rise 600ms cubic-bezier(.2,.7,.2,1) both; }
+@keyframes deck-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes deck-slide-in-right { from { transform: translateX(8%); opacity: 0; } to { transform: none; opacity: 1; } }
+@keyframes deck-slide-in-left { from { transform: translateX(-8%); opacity: 0; } to { transform: none; opacity: 1; } }
+@keyframes deck-zoom { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
+@keyframes deck-rise { from { transform: translateY(6%); opacity: 0; } to { transform: none; opacity: 1; } }
+
+/* Steps keep their space while hidden, so revealing one never reflows the slide. */
+.deck-step { transition: opacity 450ms ease, transform 550ms cubic-bezier(.2,.7,.2,1), filter 450ms ease; }
+.deck-step[data-visible="false"] { opacity: 0; pointer-events: none; }
+.deck-step[data-visible="false"][data-animation="fade-up"] { transform: translateY(40px); }
+.deck-step[data-visible="false"][data-animation="fade-left"] { transform: translateX(-40px); }
+.deck-step[data-visible="false"][data-animation="zoom"] { transform: scale(.85); }
+.deck-step[data-visible="false"][data-animation="blur"] { filter: blur(12px); }
+.deck-step[data-animation="none"] { transition: none; }
+.deck-static .deck-step { transition: none; }
+
+/* Drawing in a chart's bars and lines. */
+.deck-chart-bar { transform-box: fill-box; transform-origin: bottom; animation: deck-grow 700ms cubic-bezier(.2,.7,.2,1) both; }
+.deck-chart-line { stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: deck-draw 1200ms ease forwards; }
+.deck-static .deck-chart-bar, .deck-static .deck-chart-line { animation: none; stroke-dashoffset: 0; }
+@keyframes deck-grow { from { transform: scaleY(0); } to { transform: none; } }
+@keyframes deck-draw { to { stroke-dashoffset: 0; } }
+
+@media (prefers-reduced-motion: reduce) {
+    .deck-root *, .deck-root *::before, .deck-root *::after {
+        animation-duration: 1ms !important;
+        transition-duration: 1ms !important;
+    }
+}
+
+/* Controls fade in when the pointer moves, and out again when it rests. */
+.deck-controls {
+    position: absolute;
+    left: 50%;
+    bottom: 16px;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    padding: 6px;
+    border-radius: 999px;
+    background: rgba(20, 22, 28, .82);
+    color: #fff;
+    font: 14px/1 system-ui, sans-serif;
+    opacity: 0;
+    transition: opacity 250ms ease;
+    z-index: 2;
+}
+.deck-root[data-controls="shown"] .deck-controls, .deck-controls:focus-within { opacity: 1; }
+.deck-controls button {
+    all: unset;
+    cursor: pointer;
+    padding: 8px 12px;
+    border-radius: 999px;
+}
+.deck-controls button:hover, .deck-controls button:focus-visible { background: rgba(255,255,255,.16); }
+.deck-controls button:disabled { opacity: .4; cursor: default; }
+.deck-controls .deck-position { padding: 0 8px; font-variant-numeric: tabular-nums; }
+.deck-menu {
+    position: absolute;
+    bottom: 52px;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    min-width: 220px;
+    padding: 6px;
+    border-radius: 12px;
+    background: rgba(20, 22, 28, .95);
+}
+.deck-menu button { border-radius: 8px; }
+.deck-busy {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background: rgba(0,0,0,.55);
+    color: #fff;
+    font: 18px system-ui, sans-serif;
+    z-index: 3;
+}
+
+/* The overview grid. */
+.deck-overview {
+    position: absolute;
+    inset: 0;
+    overflow: auto;
+    padding: 24px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 16px;
+    background: #111;
+    z-index: 1;
+}
+.deck-thumb { all: unset; cursor: pointer; display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; outline: 2px solid transparent; }
+.deck-thumb[aria-current="true"] { outline-color: var(--deck-primary); }
+.deck-thumb > div { position: absolute; top: 0; left: 0; transform-origin: top left; }
+.deck-thumb-number { position: absolute; left: 8px; bottom: 6px; color: #fff; font: 12px system-ui; text-shadow: 0 1px 2px #000; }
+
+/* Static renders, laid out off screen for export and on paper for print. */
+.deck-static-stack { position: fixed; top: 0; left: -100000px; }
+/*
+ * While a slide's background picture is taken, native elements step aside so
+ * PowerPoint can lay them back on top as real objects. Text hides its glyphs
+ * only, so a pill or a card it is drawn on stays in the picture; the rest hide
+ * whole, because PowerPoint redraws their fills itself. One the exporter could
+ * not describe stays in the picture instead.
+ */
+.deck-exporting [data-deck-native]:not([data-deck-native="text"]):not([data-deck-native-failed]) {
+    visibility: hidden !important;
+}
+.deck-exporting [data-deck-native="text"]:not([data-deck-native-failed]),
+.deck-exporting [data-deck-native="text"]:not([data-deck-native-failed]) * {
+    color: transparent !important;
+    -webkit-text-fill-color: transparent !important;
+    text-shadow: none !important;
+    text-decoration-color: transparent !important;
+}
+
+@media print {
+    @page { size: ${SLIDE_WIDTH}px ${SLIDE_HEIGHT}px; margin: 0; }
+    html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
+    body > *:not(.deck-static-stack) { display: none !important; }
+    .deck-static-stack { position: static; }
+    .deck-static-stack .deck-slide { break-after: page; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
+}
+`;
+let injected = false;
+/** Put {@link DECK_CSS} into the document once, however many decks mount. */
+export function injectDeckStyles(doc = document) {
+    if (injected || doc.getElementById('deck-styles')) {
+        injected = true;
+        return;
+    }
+    const style = doc.createElement('style');
+    style.id = 'deck-styles';
+    style.textContent = DECK_CSS;
+    doc.head.appendChild(style);
+    injected = true;
+}

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@seriousgaming/deck",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-alpha.2",
+  "description": "Presentation decks for Serious Gaming games, with PDF, PowerPoint and PNG export",
+  "homepage": "https://sdk.seriousgaming.com/",
+  "license": "Apache-2.0",
+  "author": "Redburn Technology Ltd",
+  "files": [
+    "lib",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js"
+    }
+  },
+  "dependencies": {
+    "modern-screenshot": "^4.7.0",
+    "pptxgenjs": "^4.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "jsdom": "^30.1.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.3"
+  },
+  "peerDependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "build": "rm -rf lib && tsc -p tsconfig.build.json",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "harness": "vite build --config harness/vite.config.ts",
+    "lint": "oxlint --max-warnings=0",
+    "lint:fix": "oxlint --fix",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "typecheck": "tsc --noEmit"
+  }
 }