lumina-slides 8.9.4 → 9.0.0

package/src/core/events.ts

@@ -0,0 +1,53 @@
+import { LuminaEventMap } from './types';
+
+/**
+ * TYPE-SAFE EVENT BUS
+ * A tiny emitter ensuring strict payload types.
+ * 
+ * IMPROVEMENTS:
+ * 1. Strict Typing: Enforces payload matching usage.
+ * 2. Set-based Storage: Efficient add/remove.
+ * 3. One-time listeners: via `once` (implementation optional but good).
+ */
+
+/**
+ * Generic handler function type for event callbacks.
+ */
+export type Handler<T> = (payload: T) => void;
+
+export class EventBus {
+    private handlers: Map<keyof LuminaEventMap, Set<Handler<any>>> = new Map();
+
+    public on<K extends keyof LuminaEventMap>(event: K, handler: Handler<LuminaEventMap[K]>): void {
+        if (!this.handlers.has(event)) {
+            this.handlers.set(event, new Set());
+        }
+        this.handlers.get(event)!.add(handler);
+    }
+
+    public off<K extends keyof LuminaEventMap>(event: K, handler: Handler<LuminaEventMap[K]>): void {
+        const set = this.handlers.get(event);
+        if (set) {
+            set.delete(handler);
+        }
+    }
+
+    public emit<K extends keyof LuminaEventMap>(event: K, payload: LuminaEventMap[K]): void {
+        const set = this.handlers.get(event);
+        if (set) {
+            set.forEach((handler) => {
+                try {
+                    handler(payload);
+                } catch (err) {
+                    console.error(`[LuminaBus] Error in handler for event "${event}":`, err);
+                }
+            });
+        }
+    }
+
+    public clear() {
+        this.handlers.clear();
+    }
+}
+
+export const bus = new EventBus();

package/src/core/fonts.ts

@@ -0,0 +1,100 @@
+export interface GoogleFont {
+    family: string;
+    category: 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace';
+    label: string;
+}
+
+export const GOOGLE_FONTS: GoogleFont[] = [
+    // Sans Serif
+    { family: 'Inter', category: 'sans-serif', label: 'Inter' },
+    { family: 'Roboto', category: 'sans-serif', label: 'Roboto' },
+    { family: 'Open Sans', category: 'sans-serif', label: 'Open Sans' },
+    { family: 'Montserrat', category: 'sans-serif', label: 'Montserrat' },
+    { family: 'Lato', category: 'sans-serif', label: 'Lato' },
+    { family: 'Poppins', category: 'sans-serif', label: 'Poppins' },
+    { family: 'Raleway', category: 'sans-serif', label: 'Raleway' },
+    { family: 'Nunito', category: 'sans-serif', label: 'Nunito' },
+    { family: 'Ubuntu', category: 'sans-serif', label: 'Ubuntu' },
+    { family: 'Rubik', category: 'sans-serif', label: 'Rubik' },
+    { family: 'Work Sans', category: 'sans-serif', label: 'Work Sans' },
+    { family: 'Quicksand', category: 'sans-serif', label: 'Quicksand' },
+    { family: 'Outfit', category: 'sans-serif', label: 'Outfit' },
+    { family: 'Plus Jakarta Sans', category: 'sans-serif', label: 'Plus Jakarta Sans' },
+
+    // Serif
+    { family: 'Merriweather', category: 'serif', label: 'Merriweather' },
+    { family: 'Playfair Display', category: 'serif', label: 'Playfair Display' },
+    { family: 'Lora', category: 'serif', label: 'Lora' },
+    { family: 'PT Serif', category: 'serif', label: 'PT Serif' },
+    { family: 'Noto Serif', category: 'serif', label: 'Noto Serif' },
+    { family: 'Crimson Text', category: 'serif', label: 'Crimson Text' },
+    { family: 'Libre Baskerville', category: 'serif', label: 'Libre Baskerville' },
+    { family: 'Cinzel', category: 'serif', label: 'Cinzel' },
+    { family: 'Cormorant Garamond', category: 'serif', label: 'Cormorant Garamond' },
+    { family: 'DM Serif Display', category: 'serif', label: 'DM Serif Display' },
+
+    // Display
+    { family: 'Bebas Neue', category: 'display', label: 'Bebas Neue' },
+    { family: 'Lobster', category: 'display', label: 'Lobster' },
+    { family: 'Comfortaa', category: 'display', label: 'Comfortaa' },
+    { family: 'Abril Fatface', category: 'display', label: 'Abril Fatface' },
+    { family: 'Righteous', category: 'display', label: 'Righteous' },
+    { family: 'Alfa Slab One', category: 'display', label: 'Alfa Slab One' },
+    { family: 'Bangers', category: 'display', label: 'Bangers' },
+    { family: 'Orbitron', category: 'display', label: 'Orbitron' },
+    { family: 'Rajdhani', category: 'sans-serif', label: 'Rajdhani' },
+    { family: 'Audiowide', category: 'display', label: 'Audiowide' },
+    { family: 'Press Start 2P', category: 'display', label: 'Press Start 2P' },
+    { family: 'Unbounded', category: 'display', label: 'Unbounded' },
+    { family: 'Syne', category: 'display', label: 'Syne' },
+
+    // Handwriting
+    { family: 'Pacifico', category: 'handwriting', label: 'Pacifico' },
+    { family: 'Dancing Script', category: 'handwriting', label: 'Dancing Script' },
+    { family: 'Shadows Into Light', category: 'handwriting', label: 'Shadows Into Light' },
+    { family: 'Caveat', category: 'handwriting', label: 'Caveat' },
+    { family: 'Satisfy', category: 'handwriting', label: 'Satisfy' },
+    { family: 'Great Vibes', category: 'handwriting', label: 'Great Vibes' },
+    { family: 'Sacramento', category: 'handwriting', label: 'Sacramento' },
+    { family: 'Gloria Hallelujah', category: 'handwriting', label: 'Gloria Hallelujah' },
+    { family: 'Permanent Marker', category: 'handwriting', label: 'Permanent Marker' },
+
+    // Monospace
+    { family: 'Roboto Mono', category: 'monospace', label: 'Roboto Mono' },
+    { family: 'Inconsolata', category: 'monospace', label: 'Inconsolata' },
+    { family: 'Source Code Pro', category: 'monospace', label: 'Source Code Pro' },
+    { family: 'Space Mono', category: 'monospace', label: 'Space Mono' },
+    { family: 'JetBrains Mono', category: 'monospace', label: 'JetBrains Mono' },
+    { family: 'Fira Code', category: 'monospace', label: 'Fira Code' },
+];
+
+const loadedFonts = new Set<string>();
+
+/**
+ * Dynamically loads a Google Font by adding a <link> tag to the document head.
+ * @param family The font family name (e.g., 'Inter', 'Playfair Display')
+ */
+export function loadGoogleFont(family: string) {
+    // Clean family name (remove quotes, fallbacks)
+    const cleanFamily = family.split(',')[0].replace(/['"]/g, '').trim();
+
+    // Check if it's a known Google Font
+    if (!GOOGLE_FONTS.some(f => f.family === cleanFamily)) {
+        return; // Skip system fonts or unknown fonts
+    }
+
+    if (loadedFonts.has(cleanFamily)) {
+        return; // Already loaded
+    }
+
+    // Mark as loaded immediately to prevent duplicate requests
+    loadedFonts.add(cleanFamily);
+
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    // Request a wide range of weights to be safe
+    const familyQuery = cleanFamily.replace(/ /g, '+');
+    link.href = `https://fonts.googleapis.com/css2?family=${familyQuery}:wght@300;400;500;600;700;800&display=swap`;
+
+    document.head.appendChild(link);
+}

package/src/core/presets.ts

@@ -0,0 +1,231 @@
+import { ThemeConfig } from './types';
+
+/**
+ * THEME PRESETS
+ * Pre-configured themes that users can select by name.
+ * Each preset only defines values that differ from DEFAULT_THEME.
+ * 
+ * Available presets: 'default', 'ocean', 'midnight', 'forest', 'cyber', 'latte'
+ */
+export const THEME_PRESETS: Record<string, ThemeConfig> = {
+    default: {
+        colors: {
+            primary: '#3b82f6',
+            secondary: '#8b5cf6',
+            accent: '#06b6d4',
+            background: '#030303',
+            surface: '#0a0a0a',
+            text: '#ffffff',
+            textSecondary: '#e5e7eb',
+            muted: '#9ca3af',
+            gradientFrom: '#3b82f6',
+            gradientTo: '#8b5cf6',
+        },
+        typography: {
+            fontFamily: {
+                heading: 'Inter, system-ui, sans-serif',
+                body: 'Inter, system-ui, sans-serif',
+                mono: 'ui-monospace, SFMono-Regular, monospace',
+            },
+        },
+        effects: {
+            useGradients: true,
+            useGlass: true,
+            useOrb: true,
+            useShadows: true,
+        },
+    },
+
+    ocean: {
+        colors: {
+            primary: '#06b6d4',
+            secondary: '#0ea5e9',
+            accent: '#22d3ee',
+            background: '#0f172a',
+            surface: '#1e293b',
+            text: '#f0f9ff',
+            textSecondary: '#e0f2fe',
+            muted: '#94a3b8',
+            success: '#14b8a6',
+            warning: '#fb923c',
+            danger: '#f43f5e',
+            info: '#38bdf8',
+            border: 'rgba(148, 163, 184, 0.2)',
+            gradientFrom: '#06b6d4',
+            gradientTo: '#0ea5e9',
+        },
+        typography: {
+            fontFamily: {
+                heading: 'Outfit, Inter, sans-serif',
+                body: 'Inter, system-ui, sans-serif',
+            },
+        },
+        effects: {
+            orbOpacity: 0.3,
+            glassOpacity: 0.05,
+        },
+    },
+
+    midnight: {
+        colors: {
+            primary: '#6366f1',
+            secondary: '#8b5cf6',
+            accent: '#a78bfa',
+            background: '#000000',
+            surface: '#0a0a0f',
+            text: '#e0e7ff',
+            textSecondary: '#c7d2fe',
+            muted: '#6b7280',
+            success: '#10b981',
+            warning: '#fbbf24',
+            danger: '#f87171',
+            info: '#60a5fa',
+            border: 'rgba(99, 102, 241, 0.2)',
+            gradientFrom: '#6366f1',
+            gradientTo: '#a855f7',
+        },
+        effects: {
+            orbOpacity: 0.5,
+            shadowIntensity: 'lg',
+        },
+    },
+
+    forest: {
+        colors: {
+            primary: '#10b981',
+            secondary: '#059669',
+            accent: '#34d399',
+            background: '#022c22',
+            surface: '#064e3b',
+            text: '#ecfdf5',
+            textSecondary: '#d1fae5',
+            muted: '#6ee7b7',
+            success: '#22c55e',
+            warning: '#fbbf24',
+            danger: '#ef4444',
+            info: '#38bdf8',
+            border: 'rgba(52, 211, 153, 0.2)',
+            gradientFrom: '#10b981',
+            gradientTo: '#059669',
+        },
+        effects: {
+            orbOpacity: 0.35,
+            orbBlur: '150px',
+        },
+    },
+
+    cyber: {
+        colors: {
+            primary: '#f472b6',
+            secondary: '#e879f9',
+            accent: '#22d3ee',
+            background: '#18181b',
+            surface: '#27272a',
+            text: '#ffffff',
+            textSecondary: '#fafafa',
+            muted: '#a1a1aa',
+            success: '#4ade80',
+            warning: '#facc15',
+            danger: '#f87171',
+            info: '#38bdf8',
+            border: 'rgba(244, 114, 182, 0.3)',
+            gradientFrom: '#f472b6',
+            gradientTo: '#e879f9',
+        },
+        typography: {
+            fontFamily: {
+                heading: 'Orbitron, sans-serif',
+                body: 'Rajdhani, sans-serif',
+            },
+            letterSpacing: {
+                widest: '0.15em',
+            },
+        },
+        effects: {
+            orbOpacity: 0.6,
+            shadowIntensity: 'xl',
+            shadowColor: 'rgba(244, 114, 182, 0.3)',
+        },
+        components: {
+            cardRadius: '0.5rem',
+            buttonRadius: '0.5rem',
+        },
+    },
+
+    latte: {
+        colors: {
+            primary: '#d97706',
+            secondary: '#ea580c',
+            accent: '#f59e0b',
+            background: '#fffbeb',
+            surface: '#fef3c7',
+            text: '#451a03',
+            textSecondary: '#78350f',
+            muted: '#92400e',
+            success: '#16a34a',
+            warning: '#ca8a04',
+            danger: '#dc2626',
+            info: '#2563eb',
+            border: 'rgba(146, 64, 14, 0.2)',
+            shadow: 'rgba(120, 53, 15, 0.1)',
+            gradientFrom: '#d97706',
+            gradientTo: '#ea580c',
+        },
+        typography: {
+            fontFamily: {
+                heading: 'Playfair Display, Georgia, serif',
+                body: 'Lato, system-ui, sans-serif',
+            },
+        },
+        effects: {
+            useOrb: false, // Light mode, no orb
+            glassOpacity: 0.5,
+            glassBorderOpacity: 0.15,
+            shadowColor: 'rgba(120, 53, 15, 0.15)',
+        },
+        components: {
+            cardBackground: 'rgba(255, 255, 255, 0.7)',
+        },
+    },
+
+    // Additional presets for more variety
+
+    sunset: {
+        colors: {
+            primary: '#f97316',
+            secondary: '#f43f5e',
+            accent: '#fb7185',
+            background: '#1c1917',
+            surface: '#292524',
+            text: '#fafaf9',
+            textSecondary: '#e7e5e4',
+            muted: '#a8a29e',
+            gradientFrom: '#f97316',
+            gradientTo: '#f43f5e',
+        },
+        effects: {
+            orbOpacity: 0.45,
+            gradientDirection: 'to-br',
+        },
+    },
+
+    monochrome: {
+        colors: {
+            primary: '#ffffff',
+            secondary: '#a1a1aa',
+            accent: '#d4d4d8',
+            background: '#09090b',
+            surface: '#18181b',
+            text: '#fafafa',
+            textSecondary: '#e4e4e7',
+            muted: '#71717a',
+            border: 'rgba(255, 255, 255, 0.1)',
+            gradientFrom: '#ffffff',
+            gradientTo: '#a1a1aa',
+        },
+        effects: {
+            useGradients: false,
+            orbOpacity: 0.2,
+        },
+    },
+};

package/src/core/prompts.ts

@@ -0,0 +1,272 @@
+
+import { getLuminaJsonSchema, getThemeJsonSchema } from './schema';
+
+/**
+ * Options for {@link generateSystemPrompt}. Tune prompt length and content for your LLM.
+ */
+export interface SystemPromptOptions {
+    /**
+     * The target model family. 
+     * - 'reasoning': Optimizes for CoT (Chain of Thought) before JSON. Great for complex decks.
+     * - 'fast': Optimizes for direct JSON output. Great for real-time.
+     */
+    mode?: 'reasoning' | 'fast';
+
+    /**
+     * Whether to include the full strict schema in the prompt.
+     * If false, a shorter alias-based description is used (saves tokens).
+     */
+    includeSchema?: boolean;
+
+    /**
+     * Whether to include theming documentation.
+     * Enables the LLM to generate custom themes.
+     */
+    includeTheming?: boolean;
+}
+
+const BASE_INSTRUCTION = `
+You are LuminaAI, a specialized presentation design agent.
+Your goal is to transform user requests into "Lumina Deck" JSON structures.
+The rendering engine is deterministic, so your JSON must be syntactically perfect.
+`.trim();
+
+const LAYOUT_GUIDE = `
+## Available Layouts
+1. **statement**: Big bold text. Use for titles, quotes, or single big ideas.
+2. **features**: Grid of cards. Use for "Benefits", "Stats", "Team", "Services".
+3. **timeline**: Vertical list of events. Use for "History", "Roadmap", "Process".
+4. **steps**: Numbered list. Use for "How to", "Tutorials".
+5. **half**: Split screen (Image + Text). Use for high-context slides.
+6. **flex**: Declarative auto-layout. Use for complex compositions.
+7. **chart**: Data visualization. Use for bar, line, pie, doughnut charts.
+`.trim();
+
+const THEMING_GUIDE = `
+## Theming System
+
+Lumina has a powerful theming system. You can customize the entire presentation look.
+
+### Theme Presets
+Use a built-in preset by setting \`meta.theme\`:
+- **default**: Clean blue on dark
+- **ocean**: Cyan on slate
+- **midnight**: Indigo on black
+- **forest**: Emerald greens
+- **cyber**: Neon pink on zinc
+- **latte**: Light mode, warm amber
+- **sunset**: Orange to rose gradient
+- **monochrome**: Black and white
+
+### Custom Theme Configuration
+Use \`meta.themeConfig\` to customize any aspect:
+
+\`\`\`json
+{
+  "meta": {
+    "title": "My Deck",
+    "theme": "default",
+    "themeConfig": {
+      "colors": {
+        "primary": "#8b5cf6",
+        "secondary": "#ec4899",
+        "background": "#0a0a0a",
+        "text": "#ffffff",
+        "muted": "#6b7280",
+        "gradientFrom": "#8b5cf6",
+        "gradientTo": "#ec4899"
+      },
+      "effects": {
+        "useGradients": true,
+        "useGlass": true,
+        "glassOpacity": 0.05,
+        "useOrb": true,
+        "orbOpacity": 0.4
+      },
+      "components": {
+        "cardRadius": "1.5rem",
+        "buttonRadius": "9999px"
+      }
+    }
+  },
+  "slides": [...]
+}
+\`\`\`
+
+### Available Theme Options
+
+**Colors (25+ options)**:
+- Core: \`primary\`, \`secondary\`, \`accent\`, \`background\`, \`surface\`, \`text\`, \`textSecondary\`, \`muted\`
+- Semantic: \`success\`, \`warning\`, \`danger\`, \`info\`
+- UI: \`border\`, \`borderSubtle\`, \`shadow\`, \`overlay\`, \`highlight\`
+- Interactive: \`buttonPrimary\`, \`buttonPrimaryText\`, \`buttonSecondary\`, \`link\`, \`linkHover\`
+- Gradients: \`gradientFrom\`, \`gradientVia\`, \`gradientTo\`
+
+**Effects**:
+- \`useGradients\`: boolean - Enable/disable gradients
+- \`gradientDirection\`: 'to-t' | 'to-b' | 'to-l' | 'to-r' | 'to-tl' | 'to-tr' | 'to-bl' | 'to-br'
+- \`useShadows\`: boolean - Enable/disable shadows
+- \`shadowIntensity\`: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+- \`useGlass\`: boolean - Enable/disable glassmorphism
+- \`glassOpacity\`: number (0-1)
+- \`glassBlur\`: string (e.g., "20px")
+- \`useOrb\`: boolean - Enable/disable ambient orb glow
+- \`orbOpacity\`: number (0-1)
+- \`animationsEnabled\`: boolean
+- \`transitionDuration\`: string (e.g., "0.3s")
+- \`hoverScale\`: number (e.g., 1.05)
+
+**Components**:
+- Buttons: \`buttonRadius\`, \`buttonPadding\`, \`buttonFontWeight\`
+- Cards: \`cardRadius\`, \`cardPadding\`, \`cardBorderWidth\`
+- Timeline: \`timelineNodeSize\`, \`timelineLineWidth\`, \`timelineNodeColor\`
+- Progress: \`progressHeight\`, \`progressRadius\`
+- Tags: \`tagPadding\`, \`tagRadius\`, \`tagFontSize\`
+`.trim();
+
+const EXAMPLES = `
+## Examples
+
+User: "Create a slide about our growth."
+Output:
+{
+  "type": "statement",
+  "title": "Exponential Growth",
+  "subtitle": "Q4 Revenue up 200%",
+  "meta": { "variant": "gradient" }
+}
+
+User: "Show the roadmap for 2024."
+Output:
+{
+  "type": "timeline",
+  "title": "2024 Roadmap",
+  "timeline": [
+      { "date": "Q1", "title": "Alpha", "description": "Internal testing." },
+      { "date": "Q2", "title": "Beta", "description": "Public waitlist." }
+  ]
+}
+
+User: "Create a dark purple themed deck."
+Output:
+{
+  "meta": {
+    "title": "Purple Presentation",
+    "themeConfig": {
+      "colors": {
+        "primary": "#a855f7",
+        "secondary": "#c084fc",
+        "background": "#0c0a1d",
+        "gradientFrom": "#a855f7",
+        "gradientTo": "#6366f1"
+      }
+    }
+  },
+  "slides": [
+    { "type": "statement", "title": "Welcome", "subtitle": "Custom purple theme" }
+  ]
+}
+`.trim();
+
+/**
+ * Builds a system prompt string for an LLM that will output Lumina JSON.
+ * Use as the system message when integrating with OpenAI, Anthropic, etc.
+ *
+ * @param options - `mode`: 'reasoning' (CoT) or 'fast' (direct JSON); `includeSchema`, `includeTheming`.
+ * @returns Full system prompt including schema (if enabled), layout guide, theming, and examples.
+ * @example
+ * const sys = generateSystemPrompt({ mode: "fast", includeSchema: true });
+ * await openai.chat.completions.create({ messages: [{ role: "system", content: sys }, { role: "user", content }] });
+ */
+export function generateSystemPrompt(options: SystemPromptOptions = {}) {
+    const { mode = 'fast', includeSchema = true, includeTheming = true } = options;
+
+    const sections = [BASE_INSTRUCTION];
+
+    // 1. Mode Specific Instructions
+    if (mode === 'reasoning') {
+        sections.push(`
+**CRITICAL INSTRUCTION**: 
+Before outputting JSON, you must THINK about the design. 
+Wrap your thought process in <thinking> tags. 
+Analyze the content density and choose the best layout for each point.
+    `.trim());
+    } else {
+        sections.push(`
+**CRITICAL INSTRUCTION**: 
+Output ONLY valid JSON. Do not output markdown code blocks. 
+Do not explain your reasoning.
+    `.trim());
+    }
+
+    // 2. Layout Guide
+    sections.push(LAYOUT_GUIDE);
+
+    // 3. Theming Guide (if enabled)
+    if (includeTheming) {
+        sections.push(THEMING_GUIDE);
+    }
+
+    // 4. Schema Injection
+    if (includeSchema) {
+        const schema = JSON.stringify(getLuminaJsonSchema(), null, 2);
+        sections.push(`
+## Strict JSON Schema
+You must respect this schema for every object:
+${schema}
+    `.trim());
+    }
+
+    // 5. Examples (Few-Shot)
+    sections.push(EXAMPLES);
+
+    return sections.join("\n\n---\n\n");
+}
+
+/**
+ * Builds a system prompt for an LLM that outputs only `ThemeConfig` JSON.
+ * Use when the user asks to change colors/theme without editing slides.
+ *
+ * @returns System prompt with theming guide and theme JSON schema.
+ * @example
+ * const sys = generateThemePrompt();
+ * // LLM responds with { colors: {...}, effects: {...} } to merge into meta.themeConfig.
+ */
+export function generateThemePrompt() {
+    const schemaJson = JSON.stringify(getThemeJsonSchema(), null, 2);
+
+    return `
+You are a theme designer for Lumina presentation engine.
+Your job is to generate ThemeConfig JSON based on user requests.
+
+${THEMING_GUIDE}
+
+## Theme Schema
+${schemaJson}
+
+## Example Request & Response
+
+User: "Create a warm sunset theme"
+Response:
+{
+  "colors": {
+    "primary": "#f97316",
+    "secondary": "#f43f5e",
+    "accent": "#fb7185",
+    "background": "#1c1917",
+    "surface": "#292524",
+    "text": "#fafaf9",
+    "gradientFrom": "#f97316",
+    "gradientTo": "#f43f5e"
+  },
+  "effects": {
+    "useGradients": true,
+    "gradientDirection": "to-br",
+    "useOrb": true,
+    "orbOpacity": 0.45
+  }
+}
+
+Now generate a theme based on the user's request. Output ONLY valid JSON.
+`.trim();
+}