rlz-web-slides 0.1.0

package/lib/player/Presentation.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export interface PresentationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    slides: readonly ReactNode[];
+    mode?: 'embedded' | 'fullscreen';
+    initialSlide?: number;
+    onSlideChange?: (index: number) => void;
+    controls?: boolean;
+}
+/** A scoped player. Keyboard navigation belongs to the focused player only. */
+export declare function Presentation({ slides, mode, initialSlide, onSlideChange, controls, ...props }: PresentationProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/player/SlideContext.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+export declare function SlideCountProvider({ slideCount, children }: {
+    slideCount: number;
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function CurrentSlideProvider({ slideNumber, children }: {
+    slideNumber: number;
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useSlideCount(): number;
+export declare function useCurrentSlideNumber(): number;

package/lib/public-api.d.ts

@@ -0,0 +1,7 @@
+export { Slide, type SlideProps } from './components/Slide';
+export { Panel, type PanelProps } from './components/Panel';
+export { SlideNumber, type SlideNumberProps } from './components/SlideNumber';
+export { DecoratedSlide, type DecoratedSlideProps } from './slides/DecoratedSlide';
+export { Presentation, type PresentationProps } from './player/Presentation';
+export { SlidesThemeProvider, resolveSlidesTheme, useSlidesTheme, type AuroraBackgroundOptions, type BackgroundColor, type BackgroundVariants, type GridBackgroundOptions, type MeshBackgroundOptions, type SpotlightBackgroundOptions, type SlidesTheme, type SlidesThemeInput, type TextureBackgroundOptions } from './theme';
+export { css } from '@emotion/react';

package/lib/slides/DecoratedSlide.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import { type SlideProps } from '../components/Slide';
+import type { Interpolation, Theme } from '@emotion/react';
+export interface DecoratedSlideProps extends SlideProps {
+    headerLeft?: ReactNode;
+    headerRight?: ReactNode;
+    footerLeft?: ReactNode;
+    footerRight?: ReactNode;
+    css?: Interpolation<Theme>;
+}
+/** Optional content regions shared by the themed slide templates. */
+export declare function DecoratedSlide({ css, headerLeft, headerRight, footerLeft, footerRight, children, drawing, ...props }: DecoratedSlideProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/theme.d.ts

@@ -0,0 +1,98 @@
+import type { CSSObject } from '@emotion/react';
+import { type ReactNode } from 'react';
+export type ColorName = 'accent-1' | 'accent-2' | 'accent-3' | 'light' | 'dark' | 'neutral';
+export type BackgroundColor = ColorName | (string & {});
+export type Background = (color?: BackgroundColor) => CSSObject;
+export interface TextureBackgroundOptions {
+    base?: BackgroundColor;
+    dot?: BackgroundColor;
+    size?: number;
+}
+export interface AuroraBackgroundOptions {
+    base?: BackgroundColor;
+    lowerLeft?: BackgroundColor;
+    upperRight?: BackgroundColor;
+    center?: BackgroundColor;
+}
+export interface MeshBackgroundOptions {
+    base?: BackgroundColor;
+    colors?: [BackgroundColor, BackgroundColor, BackgroundColor];
+}
+export interface GridBackgroundOptions {
+    base?: BackgroundColor;
+    line?: BackgroundColor;
+    size?: number;
+}
+export interface SpotlightBackgroundOptions {
+    base?: BackgroundColor;
+    light?: BackgroundColor;
+    position?: string;
+}
+export interface BackgroundVariants {
+    solid: Background;
+    gradient: Background;
+    texture: (options?: TextureBackgroundOptions) => CSSObject;
+    aurora: (options?: AuroraBackgroundOptions) => CSSObject;
+    mesh: (options?: MeshBackgroundOptions) => CSSObject;
+    grid: (options?: GridBackgroundOptions) => CSSObject;
+    spotlight: (options?: SpotlightBackgroundOptions) => CSSObject;
+}
+export type Backgrounds = BackgroundVariants;
+export interface ThemeColors {
+    'accent-1': string;
+    'accent-2': string;
+    'accent-3': string;
+    light: string;
+    textLight: string;
+    dark: string;
+    textDark: string;
+    neutral: string;
+    muted: string;
+}
+export type ShadowLevel = 'low' | 'medium' | 'high';
+export interface SpacingScale {
+    tight: number;
+    compact: number;
+    half: number;
+    comfortable: number;
+    base: number;
+    double: number;
+}
+export interface RadiusScale {
+    quarter: number;
+    half: number;
+    base: number;
+    double: number;
+}
+export interface SlidesTheme {
+    width: number;
+    height: number;
+    fontFamily: string;
+    fontSize: number;
+    spacing: number;
+    radius: number;
+    spacings: SpacingScale;
+    radii: RadiusScale;
+    colors: ThemeColors;
+    backgrounds: Backgrounds;
+    shadows: Record<ShadowLevel, CSSObject>;
+    typography: CSSObject;
+    motion: {
+        duration: number;
+        easing: string;
+    };
+}
+export type SlidesThemeInput = Partial<Omit<SlidesTheme, 'colors' | 'motion' | 'backgrounds' | 'shadows' | 'spacings' | 'radii'>> & {
+    backgrounds?: Partial<Backgrounds>;
+    shadows?: Partial<SlidesTheme['shadows']>;
+    colors?: Partial<SlidesTheme['colors']>;
+    motion?: Partial<SlidesTheme['motion']>;
+};
+/** Resolve every field, deriving background factories from the final palette. */
+export declare function resolveSlidesTheme(input?: SlidesThemeInput): SlidesTheme;
+/** Nested providers inherit raw overrides so derived colors remain reactive. */
+export declare function SlidesThemeProvider({ theme, children }: {
+    theme?: SlidesThemeInput;
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function useSlidesTheme(): SlidesTheme;

package/package.json

@@ -0,0 +1,80 @@
+{
+    "name": "rlz-web-slides",
+    "version": "0.1.0",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/rlz/web-slides.git"
+    },
+    "homepage": "https://rlz.github.io/web-slides/",
+    "license": "MIT",
+    "keywords": [
+        "react",
+        "slides",
+        "presentation",
+        "emotion"
+    ],
+    "engines": {
+        "node": ">=22.12.0"
+    },
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc -b && vite build",
+        "build:pages": "tsc -b && vite build --mode pages",
+        "export:html": "node scripts/export-demo.mjs",
+        "lint": "oxlint && prettier --check .",
+        "format": "prettier --write .",
+        "preview": "vite preview",
+        "start": "vite",
+        "demo": "vite --mode demo",
+        "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json",
+        "test": "npm run build:lib && node --test tests/*.test.mjs",
+        "prepack": "npm run build:lib"
+    },
+    "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^7.3.1",
+        "@fortawesome/free-solid-svg-icons": "^7.3.1",
+        "@fortawesome/react-fontawesome": "^3.5.0",
+        "@vitejs/plugin-react": "^6.0.4",
+        "colord": "^2.10.0",
+        "culori": "^4.0.2",
+        "vite": "^8.2.0"
+    },
+    "devDependencies": {
+        "@emotion/react": "^11.14.0",
+        "@types/culori": "^4.0.1",
+        "@types/node": "^26.3.0",
+        "@types/react": "^19.2.17",
+        "@types/react-dom": "^19.2.3",
+        "oxlint": "^1.75.0",
+        "prettier": "^3.9.6",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8",
+        "typescript": "^7.0.2"
+    },
+    "description": "Composable React slides, themes, an embedded player and standalone HTML export",
+    "main": "./lib/index.js",
+    "types": "./lib/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./lib/index.d.ts",
+            "import": "./lib/index.js"
+        },
+        "./build": {
+            "types": "./scripts/build-slides.d.mts",
+            "import": "./scripts/build-slides.mjs"
+        }
+    },
+    "files": [
+        "lib",
+        "scripts/build-slides.mjs",
+        "scripts/build-slides.d.mts",
+        "README.md",
+        "LICENSE"
+    ],
+    "peerDependencies": {
+        "@emotion/react": "^11.14.0",
+        "react": "^19.2.8",
+        "react-dom": "^19.2.8"
+    }
+}

package/scripts/build-slides.d.mts

@@ -0,0 +1,17 @@
+import type { SlidesThemeInput } from '../lib/theme'
+
+export interface SlideModule {
+    file: string
+    exportName?: string
+    props?: Record<string, unknown>
+}
+export interface BuildSlidesOptions {
+    title?: string
+    theme?: SlidesThemeInput
+    publicDir?: string
+}
+export function buildSlides(
+    slides: (string | SlideModule)[],
+    filename: string,
+    options?: BuildSlidesOptions
+): Promise<string>

package/scripts/build-slides.mjs

@@ -0,0 +1,165 @@
+import { build } from 'vite'
+import react from '@vitejs/plugin-react'
+import { mkdir, readdir, readFile, writeFile } from 'node:fs/promises'
+import { dirname, extname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const libraryEntry = fileURLToPath(new URL('../lib/index.js', import.meta.url))
+const mimeTypes = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.svg': 'image/svg+xml',
+    '.gif': 'image/gif',
+    '.webp': 'image/webp',
+    '.avif': 'image/avif',
+    '.ico': 'image/x-icon',
+    '.otf': 'font/otf',
+    '.ttf': 'font/ttf',
+    '.woff': 'font/woff',
+    '.woff2': 'font/woff2',
+    '.mp4': 'video/mp4',
+    '.webm': 'video/webm',
+    '.mp3': 'audio/mpeg',
+    '.wav': 'audio/wav',
+    '.pdf': 'application/pdf'
+}
+
+/**
+ * Bundle React slide modules into a standalone, interactive HTML file.
+ * @param {(string | {file: string, exportName?: string, props?: Record<string, unknown>})[]} slides
+ * @param {string} filename Output path, with or without .html.
+ * @param {{title?: string, theme?: import('../lib/theme').SlidesThemeInput, publicDir?: string}} options
+ * @returns {Promise<string>} Absolute output path.
+ */
+export async function buildSlides(slides, filename, options = {}) {
+    if (!Array.isArray(slides) || slides.length === 0)
+        throw new TypeError('Pass at least one slide module')
+    if (typeof filename !== 'string' || !filename.trim())
+        throw new TypeError('Pass a non-empty filename')
+    const root = process.cwd()
+    const descriptors = slides.map((slide) =>
+        typeof slide === 'string' ? { file: slide } : slide
+    )
+    for (const slide of descriptors) {
+        if (!slide || typeof slide.file !== 'string' || !slide.file.trim())
+            throw new TypeError('Every slide needs a module file path')
+    }
+    const publicDir = resolve(root, options.publicDir ?? 'public')
+    const entryId = resolve(root, '.web-slides-entry.tsx')
+    const source = [
+        'import { createElement } from "react"',
+        'import { createRoot } from "react-dom/client"',
+        `import { Presentation, SlidesThemeProvider } from ${JSON.stringify(libraryEntry)}`,
+        ...descriptors.map(
+            (slide, index) =>
+                `import { ${JSON.stringify(slide.exportName ?? 'default')} as Slide${index} } from ${JSON.stringify(resolve(root, slide.file))}`
+        ),
+        `const slides = [${descriptors.map((slide, index) => `createElement(Slide${index}, ${JSON.stringify(slide.props ?? {})})`).join(',')}]`,
+        `createRoot(document.getElementById('root')).render(createElement(SlidesThemeProvider, {theme: ${JSON.stringify(options.theme ?? {})}}, createElement(Presentation, {slides, mode: 'fullscreen'})))`
+    ].join('\n')
+    const result = await build({
+        configFile: false,
+        root,
+        publicDir,
+        plugins: [
+            {
+                name: 'web-slides-entry',
+                resolveId(id) {
+                    if (id === entryId) return entryId
+                },
+                load(id) {
+                    if (id === entryId) return source
+                }
+            },
+            react({ jsxImportSource: '@emotion/react' })
+        ],
+        define: { 'process.env.NODE_ENV': JSON.stringify('production') },
+        resolve: { dedupe: ['react', 'react-dom', '@emotion/react'] },
+        build: {
+            write: false,
+            copyPublicDir: false,
+            minify: false,
+            lib: {
+                entry: entryId,
+                name: 'WebSlidesPresentation',
+                formats: ['iife']
+            }
+        }
+    })
+    const outputs = (Array.isArray(result) ? result : [result]).flatMap(
+        (bundle) => bundle.output
+    )
+    let javascript = outputs
+        .filter((output) => output.type === 'chunk')
+        .map((output) => output.code)
+        .join('\n')
+    let css = outputs
+        .filter(
+            (output) =>
+                output.type === 'asset' && output.fileName.endsWith('.css')
+        )
+        .map((output) => String(output.source))
+        .join('\n')
+    for (const output of outputs) {
+        if (output.type === 'asset' && !output.fileName.endsWith('.css'))
+            throw new Error(`Asset could not be inlined: ${output.fileName}`)
+    }
+    // Vite library mode inlines imported assets. Public assets need explicit embedding.
+    for (const file of await publicFiles(publicDir)) {
+        const url = `/${file}`
+        const escaped = url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        const pattern = new RegExp(
+            /(?<=["'`(])/.source + escaped + /(?=["'`)])/.source,
+            'g'
+        )
+        if (!javascript.match(pattern) && !css.match(pattern)) continue
+        const mime = mimeTypes[extname(file).toLowerCase()]
+        if (!mime)
+            throw new Error(
+                `Import this resource from source instead of public: ${file}`
+            )
+        const data = `data:${mime};base64,${(await readFile(resolve(publicDir, file))).toString('base64')}`
+        javascript = javascript.replace(pattern, () => data)
+        css = css.replace(pattern, () => data)
+    }
+    const title = (options.title ?? 'Presentation').replace(
+        /[&<>"']/g,
+        (character) =>
+            ({
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#39;'
+            })[character]
+    )
+    const html = `<!doctype html>\n<html lang="ru">\n<head>\n<meta charset="UTF-8">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<title>${title}</title>\n<style>body { margin: 0; background: #171c17; }\n${css.replace(/<\/style/gi, '<\\/style')}</style>\n</head>\n<body>\n<div id="root"></div>\n<script>${javascript.replace(/<\/script/gi, '<\\/script')}</script>\n</body>\n</html>\n`
+    const outputPath = resolve(
+        root,
+        filename.endsWith('.html') ? filename : `${filename}.html`
+    )
+    await mkdir(dirname(outputPath), { recursive: true })
+    await writeFile(outputPath, html)
+    return outputPath
+}
+
+async function publicFiles(directory, prefix = '') {
+    let entries
+    try {
+        entries = await readdir(resolve(directory, prefix), {
+            withFileTypes: true
+        })
+    } catch (error) {
+        if (error.code === 'ENOENT') return []
+        throw error
+    }
+    const result = []
+    for (const entry of entries) {
+        const file = prefix ? `${prefix}/${entry.name}` : entry.name
+        if (entry.isDirectory())
+            result.push(...(await publicFiles(directory, file)))
+        else if (entry.isFile()) result.push(file)
+    }
+    return result.sort((a, b) => b.length - a.length)
+}