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

package/lib/context.d.ts

@@ -0,0 +1,54 @@
+import { type Brand } from './brand.js';
+import type { Transition } from './Slide.js';
+/** Every slide is laid out on this canvas and scaled to fit wherever it is shown. */
+export declare const SLIDE_WIDTH = 1920;
+export declare const SLIDE_HEIGHT = 1080;
+/**
+ * How a slide is being rendered.
+ *
+ * `live` is the presenter's view: steps reveal one at a time and things move.
+ * `static` is every other render (print, PDF, PowerPoint and PNG export, the
+ * overview grid), and shows each slide as it ends up, fully built and still.
+ */
+export type RenderMode = 'live' | 'static';
+/** A step value meaning 'everything on the slide is shown'. */
+export declare const ALL_STEPS: number;
+export interface DeckState {
+    slideIndex: number;
+    slideCount: number;
+    /** Steps revealed on the current slide; 0 before the first. */
+    step: number;
+    next: () => void;
+    prev: () => void;
+    goTo: (slideIndex: number, step?: number) => void;
+}
+export declare const DeckContext: import("react").Context<DeckState | null>;
+export interface SlideState {
+    index: number;
+    mode: RenderMode;
+    /** Steps revealed on this slide. {@link ALL_STEPS} in a static render. */
+    step: number;
+    isActive: boolean;
+    /** Text direction of the deck, which the exporter carries into PowerPoint. */
+    dir: 'ltr' | 'rtl';
+    /** Called by each `Step` so the deck knows how many clicks a slide takes. */
+    registerStep: (at: number) => () => void;
+    /** Called by `Slide` so the deck can carry its notes into an export. */
+    registerNotes: (notes: string | undefined) => void;
+    /** Transition a slide uses when it names none. */
+    defaultTransition: Transition;
+    /** Which way the presenter moved to reach this slide. */
+    direction: 'forward' | 'backward';
+}
+export declare const SlideContext: import("react").Context<SlideState | null>;
+/** Where the deck is, and how to move it. Only inside a `Deck`. */
+export declare function useDeck(): DeckState;
+/**
+ * The slide this component sits on: how far it is built, and whether it is a
+ * live or static render. Custom animations read `step` and `mode` from here, and
+ * should show their final state whenever `mode` is `static`.
+ */
+export declare function useSlide(): SlideState;
+export declare const BrandContext: import("react").Context<Brand>;
+/** The deck's resolved brand, for components that draw in its colours. */
+export declare function useBrand(): Brand;

package/lib/context.js

@@ -0,0 +1,32 @@
+import { createContext, useContext } from 'react';
+import { defaultBrand } from './brand.js';
+/** Every slide is laid out on this canvas and scaled to fit wherever it is shown. */
+export const SLIDE_WIDTH = 1920;
+export const SLIDE_HEIGHT = 1080;
+/** A step value meaning 'everything on the slide is shown'. */
+export const ALL_STEPS = Number.POSITIVE_INFINITY;
+export const DeckContext = createContext(null);
+export const SlideContext = createContext(null);
+/** Where the deck is, and how to move it. Only inside a `Deck`. */
+export function useDeck() {
+    const deck = useContext(DeckContext);
+    if (!deck)
+        throw new Error('useDeck must be used inside <Deck>');
+    return deck;
+}
+/**
+ * The slide this component sits on: how far it is built, and whether it is a
+ * live or static render. Custom animations read `step` and `mode` from here, and
+ * should show their final state whenever `mode` is `static`.
+ */
+export function useSlide() {
+    const slide = useContext(SlideContext);
+    if (!slide)
+        throw new Error('useSlide must be used inside <Slide>');
+    return slide;
+}
+export const BrandContext = createContext(defaultBrand);
+/** The deck's resolved brand, for components that draw in its colours. */
+export function useBrand() {
+    return useContext(BrandContext);
+}

package/lib/controls.d.ts

@@ -0,0 +1,18 @@
+import type { ExportFormat } from './export/use-deck-export.js';
+interface ControlsProps {
+    dir: 'ltr' | 'rtl';
+    slideIndex: number;
+    slideCount: number;
+    atStart: boolean;
+    next: () => void;
+    prev: () => void;
+    toggleOverview: () => void;
+    toggleFullscreen: () => void;
+    exportFormats: ExportFormat[];
+    menuOpen: boolean;
+    setMenuOpen: (update: (open: boolean) => boolean) => void;
+    runExport: (format: ExportFormat) => Promise<void>;
+}
+/** The presenter's bar: previous, position, next, overview, fullscreen and export. */
+export declare function Controls({ dir, slideIndex, slideCount, atStart, next, prev, toggleOverview, toggleFullscreen, exportFormats, menuOpen, setMenuOpen, runExport, }: ControlsProps): import("react").JSX.Element;
+export {};

package/lib/controls.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const EXPORT_LABELS = {
+    pdf: 'PDF (print, save as PDF)',
+    pptx: 'PowerPoint (editable)',
+    png: 'This slide as PNG',
+};
+/** The presenter's bar: previous, position, next, overview, fullscreen and export. */
+export function Controls({ dir, slideIndex, slideCount, atStart, next, prev, toggleOverview, toggleFullscreen, exportFormats, menuOpen, setMenuOpen, runExport, }) {
+    return (_jsxs("div", { className: "deck-controls", onClick: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", onClick: prev, "aria-label": "Previous", disabled: atStart, children: dir === 'rtl' ? '→' : '←' }), _jsxs("span", { className: "deck-position", "aria-live": "polite", children: [slideIndex + 1, " / ", slideCount] }), _jsx("button", { type: "button", onClick: next, "aria-label": "Next", children: dir === 'rtl' ? '←' : '→' }), _jsx("button", { type: "button", onClick: toggleOverview, "aria-label": "Overview", children: "\u25A6" }), _jsx("button", { type: "button", onClick: toggleFullscreen, "aria-label": "Fullscreen", children: "\u26F6" }), exportFormats.length > 0 && (_jsxs("span", { style: { position: 'relative' }, children: [_jsx("button", { type: "button", onClick: () => setMenuOpen((open) => !open), "aria-expanded": menuOpen, children: "Export" }), menuOpen && (_jsx("span", { className: "deck-menu", role: "menu", children: ['pdf', 'pptx', 'png']
+                            .filter((format) => exportFormats.includes(format))
+                            .map((format) => (_jsx("button", { type: "button", role: "menuitem", onClick: () => {
+                                setMenuOpen(() => false);
+                                void runExport(format);
+                            }, children: EXPORT_LABELS[format] }, format))) }))] }))] }));
+}

package/lib/export/collect.d.ts

@@ -0,0 +1,32 @@
+import type { Box, ExportElement, Paragraph } from './ir.js';
+/** The attribute a primitive carries to be exported as a native object. */
+export declare const NATIVE_ATTRIBUTE = "data-deck-native";
+/** Set on a native element the exporter could not describe, so it stays in the picture. */
+export declare const NATIVE_FAILED_ATTRIBUTE = "data-deck-native-failed";
+/**
+ * Describe every native element on one slide, in document order.
+ *
+ * A native element nested inside another is left to its ancestor, so a
+ * heading inside a native card is not exported twice. An element that cannot
+ * be described is marked {@link NATIVE_FAILED_ATTRIBUTE} and left out, which
+ * keeps it in the slide's background picture rather than losing it.
+ */
+export declare function collectNativeElements(slide: HTMLElement): Promise<ExportElement[]>;
+/**
+ * Walk an element's text into paragraphs of styled runs.
+ *
+ * A block-level element starts a paragraph and a list item makes it a bullet,
+ * which is the whole of what PowerPoint can hold. Inline formatting comes from
+ * each text node's computed style, so a `<strong>` or a styled span carries
+ * through without the primitives knowing about it.
+ */
+export declare function extractParagraphs(root: HTMLElement): Paragraph[];
+/**
+ * The first family in a CSS font stack, as an office suite would name it.
+ *
+ * Self-hosted variable fonts register as 'X Variable', which no installed font
+ * is called; the static family of the same name is what a viewer has, if any.
+ */
+export declare function fontName(stack: string): string;
+/** Where an `object-fit: contain` picture actually lands inside its box. */
+export declare function fitContain(box: Box, naturalWidth: number, naturalHeight: number): Box;

package/lib/export/collect.js

@@ -0,0 +1,312 @@
+import { toHex } from '../brand.js';
+/** The attribute a primitive carries to be exported as a native object. */
+export const NATIVE_ATTRIBUTE = 'data-deck-native';
+/** Set on a native element the exporter could not describe, so it stays in the picture. */
+export const NATIVE_FAILED_ATTRIBUTE = 'data-deck-native-failed';
+const BLOCK_DISPLAYS = new Set([
+    'block',
+    'flex',
+    'grid',
+    'list-item',
+    'table',
+    'flow-root',
+    'table-row',
+    'table-cell',
+]);
+/**
+ * Describe every native element on one slide, in document order.
+ *
+ * A native element nested inside another is left to its ancestor, so a
+ * heading inside a native card is not exported twice. An element that cannot
+ * be described is marked {@link NATIVE_FAILED_ATTRIBUTE} and left out, which
+ * keeps it in the slide's background picture rather than losing it.
+ */
+export async function collectNativeElements(slide) {
+    const origin = slide.getBoundingClientRect();
+    const natives = [...slide.querySelectorAll(`[${NATIVE_ATTRIBUTE}]`)].filter((element) => !element.parentElement?.closest(`[${NATIVE_ATTRIBUTE}]`));
+    const elements = [];
+    for (const element of natives) {
+        element.removeAttribute(NATIVE_FAILED_ATTRIBUTE);
+        try {
+            const described = await describe(element, origin);
+            if (described)
+                elements.push(described);
+            else
+                element.setAttribute(NATIVE_FAILED_ATTRIBUTE, '');
+        }
+        catch {
+            element.setAttribute(NATIVE_FAILED_ATTRIBUTE, '');
+        }
+    }
+    return elements;
+}
+async function describe(element, origin) {
+    if (getComputedStyle(element).display === 'none')
+        return null;
+    switch (element.getAttribute(NATIVE_ATTRIBUTE)) {
+        case 'text':
+            return describeText(element, origin);
+        case 'table':
+            return describeTable(element, origin);
+        case 'image':
+            return describeImage(element, origin);
+        default:
+            return null;
+    }
+}
+function contentBox(element, origin) {
+    const rect = element.getBoundingClientRect();
+    const style = getComputedStyle(element);
+    const left = px(style.paddingLeft) + px(style.borderLeftWidth);
+    const right = px(style.paddingRight) + px(style.borderRightWidth);
+    const top = px(style.paddingTop) + px(style.borderTopWidth);
+    const bottom = px(style.paddingBottom) + px(style.borderBottomWidth);
+    return {
+        x: rect.left - origin.left + left,
+        y: rect.top - origin.top + top,
+        w: Math.max(1, rect.width - left - right),
+        h: Math.max(1, rect.height - top - bottom),
+    };
+}
+function px(value) {
+    const n = parseFloat(value);
+    return Number.isFinite(n) ? n : 0;
+}
+function describeText(element, origin) {
+    const paragraphs = extractParagraphs(element);
+    if (paragraphs.length === 0)
+        return null;
+    return { kind: 'text', box: contentBox(element, origin), paragraphs };
+}
+/**
+ * Walk an element's text into paragraphs of styled runs.
+ *
+ * A block-level element starts a paragraph and a list item makes it a bullet,
+ * which is the whole of what PowerPoint can hold. Inline formatting comes from
+ * each text node's computed style, so a `<strong>` or a styled span carries
+ * through without the primitives knowing about it.
+ */
+export function extractParagraphs(root) {
+    const paragraphs = [];
+    let current = null;
+    const open = (block) => {
+        close();
+        const style = getComputedStyle(block);
+        const isItem = style.display === 'list-item';
+        const list = isItem ? block.closest('ol, ul') : null;
+        const paragraph = {
+            align: alignOf(style),
+            bullet: isItem ? (list?.tagName === 'OL' ? 'number' : 'disc') : null,
+            level: isItem ? listDepth(block, root) : 0,
+            lineHeight: style.lineHeight.endsWith('px') ? px(style.lineHeight) : undefined,
+            spaceAfter: px(style.marginBottom) || undefined,
+            runs: [],
+        };
+        current = paragraph;
+        return paragraph;
+    };
+    const close = () => {
+        if (current) {
+            trimRuns(current.runs);
+            if (current.runs.length > 0)
+                paragraphs.push(current);
+        }
+        current = null;
+    };
+    const walk = (node, block) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = (node.textContent ?? '').replace(/\s+/g, ' ');
+            if (!text)
+                return;
+            const paragraph = current ?? open(block);
+            const parent = node.parentElement ?? block;
+            paragraph.runs.push(runOf(text, getComputedStyle(parent)));
+            return;
+        }
+        if (!(node instanceof HTMLElement))
+            return;
+        const style = getComputedStyle(node);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return;
+        if (node.tagName === 'BR') {
+            if (current)
+                current.runs.push({ ...lastRun(current), text: '\n' });
+            return;
+        }
+        const isBlock = node !== root && BLOCK_DISPLAYS.has(style.display);
+        if (isBlock)
+            open(node);
+        for (const child of node.childNodes)
+            walk(child, isBlock ? node : block);
+        if (isBlock)
+            close();
+    };
+    open(root);
+    for (const child of root.childNodes)
+        walk(child, root);
+    close();
+    return paragraphs;
+}
+function lastRun(paragraph) {
+    return (paragraph.runs[paragraph.runs.length - 1] ?? {
+        text: '',
+        font: '',
+        size: 16,
+        color: '000000',
+        bold: false,
+        italic: false,
+        underline: false,
+    });
+}
+function trimRuns(runs) {
+    while (runs.length > 0 && runs[0].text.trim() === '' && runs[0].text !== '\n')
+        runs.shift();
+    if (runs[0])
+        runs[0].text = runs[0].text.replace(/^ +/, '');
+    while (runs.length > 0 && runs[runs.length - 1].text.trim() === '')
+        runs.pop();
+    if (runs.length > 0) {
+        const last = runs[runs.length - 1];
+        last.text = last.text.replace(/ +$/, '');
+    }
+}
+function runOf(text, style) {
+    const transformed = style.textTransform === 'uppercase'
+        ? text.toUpperCase()
+        : style.textTransform === 'lowercase'
+            ? text.toLowerCase()
+            : text;
+    return {
+        text: transformed,
+        font: fontName(style.fontFamily),
+        size: px(style.fontSize),
+        color: toHex(style.color) ?? '000000',
+        bold: Number(style.fontWeight) >= 600 || style.fontWeight === 'bold',
+        italic: style.fontStyle === 'italic',
+        underline: style.textDecorationLine.includes('underline'),
+    };
+}
+/**
+ * The first family in a CSS font stack, as an office suite would name it.
+ *
+ * Self-hosted variable fonts register as 'X Variable', which no installed font
+ * is called; the static family of the same name is what a viewer has, if any.
+ */
+export function fontName(stack) {
+    const first = stack
+        .split(',')[0]
+        ?.trim()
+        .replace(/^["']|["']$/g, '') ?? '';
+    if (/^(system-ui|-apple-system|sans-serif|serif|monospace)$/i.test(first))
+        return 'Arial';
+    return first.replace(/ Variable$/, '');
+}
+function alignOf(style) {
+    const rtl = style.direction === 'rtl';
+    switch (style.textAlign) {
+        case 'center':
+            return 'center';
+        case 'right':
+            return 'right';
+        case 'left':
+            return 'left';
+        case 'justify':
+            return 'justify';
+        case 'end':
+            return rtl ? 'left' : 'right';
+        default:
+            return rtl ? 'right' : 'left';
+    }
+}
+function listDepth(item, root) {
+    let depth = -1;
+    for (let node = item; node && node !== root; node = node.parentElement) {
+        if (node.tagName === 'UL' || node.tagName === 'OL')
+            depth += 1;
+    }
+    if (root.tagName === 'UL' || root.tagName === 'OL')
+        depth += 1;
+    return Math.max(0, depth);
+}
+function fillOf(...elements) {
+    for (const element of elements) {
+        if (!element)
+            continue;
+        const background = getComputedStyle(element).backgroundColor;
+        const alpha = /rgba\([^)]*,\s*([\d.]+)\)/.exec(background);
+        if (background === 'transparent' || (alpha && Number(alpha[1]) === 0))
+            continue;
+        const hex = toHex(background);
+        if (hex)
+            return hex;
+    }
+    return null;
+}
+function describeTable(element, origin) {
+    const table = element.tagName === 'TABLE' ? element : element.querySelector('table');
+    if (!table)
+        return null;
+    const rows = [...table.querySelectorAll('tr')];
+    if (rows.length === 0)
+        return null;
+    const columnWidths = [...rows[0].cells].map((cell) => cell.getBoundingClientRect().width);
+    const tableRect = table.getBoundingClientRect();
+    return {
+        kind: 'table',
+        box: {
+            x: tableRect.left - origin.left,
+            y: tableRect.top - origin.top,
+            w: tableRect.width,
+            h: tableRect.height,
+        },
+        columnWidths,
+        rows: rows.map((row) => ({
+            height: row.getBoundingClientRect().height,
+            cells: [...row.cells].map((cell) => {
+                const style = getComputedStyle(cell);
+                const borderWidth = px(style.borderBottomWidth);
+                return {
+                    paragraphs: extractParagraphs(cell),
+                    fill: fillOf(cell, row, row.parentElement, table),
+                    border: borderWidth > 0 && style.borderBottomStyle !== 'none'
+                        ? {
+                            color: toHex(style.borderBottomColor) ?? '000000',
+                            width: borderWidth,
+                        }
+                        : null,
+                };
+            }),
+        })),
+    };
+}
+async function describeImage(element, origin) {
+    const image = element instanceof HTMLImageElement ? element : element.querySelector('img');
+    if (!image)
+        return null;
+    if (!image.complete)
+        await image.decode();
+    const box = contentBox(image, origin);
+    const fitted = fitContain(box, image.naturalWidth, image.naturalHeight);
+    const canvas = document.createElement('canvas');
+    // Twice the slide's own resolution, so a picture still looks sharp when
+    // someone enlarges it in PowerPoint.
+    canvas.width = Math.round(fitted.w * 2);
+    canvas.height = Math.round(fitted.h * 2);
+    const context = canvas.getContext('2d');
+    if (!context)
+        return null;
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    // Throws for a cross-origin picture served without CORS; the caller keeps
+    // it in the background picture instead.
+    const src = canvas.toDataURL('image/png');
+    return { kind: 'image', box: fitted, src, alt: image.alt };
+}
+/** Where an `object-fit: contain` picture actually lands inside its box. */
+export function fitContain(box, naturalWidth, naturalHeight) {
+    if (!naturalWidth || !naturalHeight)
+        return box;
+    const scale = Math.min(box.w / naturalWidth, box.h / naturalHeight);
+    const w = naturalWidth * scale;
+    const h = naturalHeight * scale;
+    return { x: box.x + (box.w - w) / 2, y: box.y + (box.h - h) / 2, w, h };
+}

package/lib/export/index.d.ts

@@ -0,0 +1,28 @@
+import type { DeckExport } from './ir.js';
+export interface RenderedSlide {
+    element: HTMLElement;
+    notes?: string;
+}
+/**
+ * A slide as an image data URL: PNG by default, JPEG on request.
+ *
+ * With `withoutNative`, every native element is hidden first, which leaves
+ * what PowerPoint cannot hold as objects: backgrounds, decoration and any
+ * custom component. The exporter lays the natives back on top as real objects.
+ */
+export declare function rasteriseSlide(slide: HTMLElement, { withoutNative, scale, format, }?: {
+    withoutNative?: boolean;
+    scale?: number;
+    format?: 'png' | 'jpeg';
+}): Promise<string>;
+/** Describe rendered slides as data, ready for any exporter. */
+export declare function describeDeck(slides: RenderedSlide[], { title, dir }: {
+    title: string;
+    dir: 'ltr' | 'rtl';
+}, onProgress?: (done: number, total: number) => void): Promise<DeckExport>;
+/** Hand a file to the browser to save. */
+export declare function download(file: Blob | string, fileName: string): void;
+/** A file name from a deck title, safe on every desktop. */
+export declare function fileNameFor(title: string, extension: string, suffix?: string): string;
+export { writePptx } from './pptx.js';
+export type { DeckExport } from './ir.js';

package/lib/export/index.js

@@ -0,0 +1,92 @@
+import { SLIDE_HEIGHT, SLIDE_WIDTH } from '../context.js';
+import { collectNativeElements } from './collect.js';
+/**
+ * A slide as an image data URL: PNG by default, JPEG on request.
+ *
+ * With `withoutNative`, every native element is hidden first, which leaves
+ * what PowerPoint cannot hold as objects: backgrounds, decoration and any
+ * custom component. The exporter lays the natives back on top as real objects.
+ */
+export async function rasteriseSlide(slide, { withoutNative = false, scale = 1, format = 'png', } = {}) {
+    const { createContext, destroyContext, domToDataUrl } = await import('modern-screenshot');
+    const host = slide.closest('.deck-static-stack') ?? slide;
+    if (withoutNative)
+        host.classList.add('deck-exporting');
+    // The type goes on the context: domToJpeg and domToPng set it only on a
+    // context they create, so handed this one they would both write PNG.
+    const context = await createContext(slide, {
+        width: SLIDE_WIDTH,
+        height: SLIDE_HEIGHT,
+        scale,
+        type: format === 'jpeg' ? 'image/jpeg' : 'image/png',
+        quality: 0.92,
+    });
+    try {
+        context.sandbox = await loadedSandbox(slide.ownerDocument);
+        return await domToDataUrl(context);
+    }
+    finally {
+        destroyContext(context);
+        if (withoutNative)
+            host.classList.remove('deck-exporting');
+    }
+}
+/**
+ * The frame modern-screenshot reads browser defaults from, loaded as a
+ * standards-mode document. It copies only the styles that differ from those
+ * defaults, and the frame it makes for itself is read while still the initial
+ * quirks-mode `about:blank`. Firefox applies the quirk that drops a heading's
+ * top margin there, so the deck's zeroed margins matched the 'default' and were
+ * left out of the picture, where the browser's own margins came back and pushed
+ * the slide's content below the editable text laid over it. The `srcdoc` is set
+ * before the frame is inserted so the first `load` is the document's own.
+ */
+async function loadedSandbox(document) {
+    const sandbox = document.createElement('iframe');
+    sandbox.width = '0';
+    sandbox.height = '0';
+    sandbox.style.visibility = 'hidden';
+    sandbox.style.position = 'fixed';
+    sandbox.srcdoc = '<!DOCTYPE html><meta charset="UTF-8"><title></title><body>';
+    const loaded = new Promise((resolve) => sandbox.addEventListener('load', resolve, { once: true }));
+    document.body.appendChild(sandbox);
+    await loaded;
+    return sandbox;
+}
+/** Describe rendered slides as data, ready for any exporter. */
+export async function describeDeck(slides, { title, dir }, onProgress) {
+    const described = [];
+    for (const [index, slide] of slides.entries()) {
+        // Collect first: an element that cannot be described is marked, and so
+        // stays in the background picture taken next.
+        const elements = await collectNativeElements(slide.element);
+        // JPEG: a slide is opaque, and a gradient or photograph as PNG runs to
+        // megabytes a slide.
+        const background = await rasteriseSlide(slide.element, {
+            withoutNative: true,
+            format: 'jpeg',
+        });
+        described.push({ background, notes: slide.notes, elements });
+        onProgress?.(index + 1, slides.length);
+    }
+    return { title, dir, width: SLIDE_WIDTH, height: SLIDE_HEIGHT, slides: described };
+}
+/** Hand a file to the browser to save. */
+export function download(file, fileName) {
+    const url = typeof file === 'string' ? file : URL.createObjectURL(file);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.rel = 'noopener';
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    if (typeof file !== 'string')
+        setTimeout(() => URL.revokeObjectURL(url), 30_000);
+}
+/** A file name from a deck title, safe on every desktop. */
+export function fileNameFor(title, extension, suffix = '') {
+    const base = title.replace(/[\\/:*?"<>|]+/g, ' ').trim() || 'Presentation';
+    return `${base}${suffix}.${extension}`;
+}
+export { writePptx } from './pptx.js';

package/lib/export/ir.d.ts

@@ -0,0 +1,85 @@
+/**
+ * A deck as plain data, between the rendered slides and any file format.
+ *
+ * Private to this library and deliberately so. Primitives describe themselves
+ * in these terms, and each exporter reads only these terms, so the PowerPoint
+ * writer (or whatever replaces it) can change without a game noticing. Nothing
+ * outside the library, the SDK and the host included, reads this shape, which
+ * is what keeps it free to change.
+ *
+ * Geometry is in CSS pixels on the 1920 by 1080 slide canvas. Converting to a
+ * format's own units is the exporter's job.
+ */
+export interface DeckExport {
+    title: string;
+    dir: 'ltr' | 'rtl';
+    width: number;
+    height: number;
+    slides: SlideExport[];
+}
+export interface SlideExport {
+    /** Everything on the slide that is not a native element, as an image data URL. */
+    background: string;
+    notes?: string;
+    elements: ExportElement[];
+}
+export interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export type ExportElement = TextElement | TableElement | ImageElement;
+export interface TextRun {
+    text: string;
+    font: string;
+    /** CSS pixels. */
+    size: number;
+    /** Six hex digits, no hash. */
+    color: string;
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+}
+export interface Paragraph {
+    align: 'left' | 'center' | 'right' | 'justify';
+    /** Bullet style, or none for an ordinary paragraph. */
+    bullet: 'disc' | 'number' | null;
+    /** Nesting depth of a bulleted paragraph, from 0. */
+    level: number;
+    /** CSS pixels, when the line height is set explicitly. */
+    lineHeight?: number;
+    /** CSS pixels of space after the paragraph. */
+    spaceAfter?: number;
+    runs: TextRun[];
+}
+export interface TextElement {
+    kind: 'text';
+    box: Box;
+    paragraphs: Paragraph[];
+}
+export interface TableCell {
+    paragraphs: Paragraph[];
+    /** Six hex digits, or null for none. */
+    fill: string | null;
+    border: {
+        color: string;
+        width: number;
+    } | null;
+}
+export interface TableElement {
+    kind: 'table';
+    box: Box;
+    columnWidths: number[];
+    rows: {
+        height: number;
+        cells: TableCell[];
+    }[];
+}
+export interface ImageElement {
+    kind: 'image';
+    box: Box;
+    /** PNG data URL. */
+    src: string;
+    alt: string;
+}

package/lib/export/ir.js

@@ -0,0 +1 @@
+export {};