lumina-slides 8.9.4 → 9.0.0

package/src/components/site/SitePlayground.vue

@@ -0,0 +1,389 @@
+<template>
+    <div class="min-h-screen pt-24 px-4 lg:px-8 max-w-full">
+        <div class="flex flex-col lg:flex-row gap-6 h-[calc(100vh-8rem)]">
+
+            <!-- JSON Editor Panel -->
+            <div class="w-full lg:w-1/3 flex flex-col">
+                <div class="flex items-center justify-between mb-4">
+                    <h2 class="text-xl font-bold text-white">JSON Editor</h2>
+                    <div class="flex gap-2">
+                        <button @click="loadTemplate('flex')"
+                            class="px-3 py-1.5 text-xs font-bold uppercase bg-blue-500/20 text-blue-400 rounded-lg hover:bg-blue-500/30 transition">
+                            Flex
+                        </button>
+                        <button @click="loadTemplate('statement')"
+                            class="px-3 py-1.5 text-xs font-bold uppercase bg-purple-500/20 text-purple-400 rounded-lg hover:bg-purple-500/30 transition">
+                            Statement
+                        </button>
+                        <button @click="loadTemplate('custom')"
+                            class="px-3 py-1.5 text-xs font-bold uppercase bg-green-500/20 text-green-400 rounded-lg hover:bg-green-500/30 transition">
+                            Custom
+                        </button>
+                        <button @click="formatJson"
+                            class="px-3 py-1.5 text-xs font-bold uppercase bg-white/10 text-white/60 rounded-lg hover:bg-white/20 transition">
+                            Format
+                        </button>
+                        <button @click="exportHtml"
+                            class="px-3 py-1.5 text-xs font-bold uppercase bg-pink-500/20 text-pink-400 rounded-lg hover:bg-pink-500/30 transition flex items-center gap-1.5"
+                            title="Export as standalone HTML">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none"
+                                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                                <polyline points="7 10 12 15 17 10"></polyline>
+                                <line x1="12" y1="15" x2="12" y2="3"></line>
+                            </svg>
+                            Export
+                        </button>
+                    </div>
+                </div>
+
+                <div class="flex-1 relative rounded-xl overflow-hidden border border-white/10 bg-black/50">
+                    <textarea ref="editorRef" v-model="jsonInput" @input="onInput" spellcheck="false"
+                        class="w-full h-full p-6 bg-transparent text-white font-mono text-sm leading-relaxed resize-none focus:outline-none"
+                        placeholder='{"type": "flex", "elements": [...]}'></textarea>
+
+                    <!-- Error Indicator -->
+                    <div v-if="parseError"
+                        class="absolute bottom-0 left-0 right-0 px-4 py-2 bg-red-500/20 border-t border-red-500/30 text-red-400 text-xs font-mono">
+                        {{ parseError }}
+                    </div>
+                </div>
+            </div>
+
+            <!-- Preview Panel -->
+            <div class="w-full lg:w-2/3 flex flex-col">
+                <div class="flex items-center justify-between mb-4">
+                    <h2 class="text-xl font-bold text-white">Live Preview</h2>
+                    <div class="flex items-center gap-4">
+                        <span v-if="slideIndex !== null" class="text-sm text-white/40">
+                            Slide {{ slideIndex + 1 }} / {{ totalSlides }}
+                        </span>
+                        <div class="flex gap-1">
+                            <button @click="prevSlide"
+                                class="w-8 h-8 rounded-lg bg-white/10 text-white/60 hover:bg-white/20 transition flex items-center justify-center"
+                                title="Previous slide (←)">
+                                ←
+                            </button>
+                            <button @click="nextSlide"
+                                class="w-8 h-8 rounded-lg bg-white/10 text-white/60 hover:bg-white/20 transition flex items-center justify-center"
+                                title="Next slide (→)">
+                                →
+                            </button>
+                            <button @click="openSpeakerNotes"
+                                class="ml-2 px-3 py-1.5 text-xs font-bold uppercase rounded-lg transition flex items-center gap-1.5"
+                                :class="speakerNotesOpen ? 'bg-green-500/20 text-green-400' : 'bg-amber-500/20 text-amber-400 hover:bg-amber-500/30'"
+                                title="Open Speaker Notes (S)">
+                                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                                    stroke-width="2">
+                                    <path d="M12 2L2 7l10 5 10-5-10-5z" />
+                                    <path d="M2 17l10 5 10-5" />
+                                    <path d="M2 12l10 5 10-5" />
+                                </svg>
+                                {{ speakerNotesOpen ? 'Notes Open' : 'Notes' }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex-1 rounded-xl overflow-hidden border border-white/10 bg-black relative">
+                    <div id="playground-container" class="w-full h-full"></div>
+
+                    <!-- Empty State -->
+                    <div v-if="!hasValidJson" class="absolute inset-0 flex items-center justify-center text-white/30">
+                        <div class="text-center">
+                            <p class="text-4xl mb-4">🎨</p>
+                            <p class="text-lg font-medium">Enter valid JSON to see preview</p>
+                            <p class="text-sm mt-2">Try clicking a template button above</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, nextTick, watch } from 'vue';
+import { Lumina } from '../../core/Lumina';
+
+const jsonInput = ref('');
+const parseError = ref<string | null>(null);
+const hasValidJson = ref(false);
+const editorRef = ref<HTMLTextAreaElement | null>(null);
+const slideIndex = ref<number | null>(null);
+const totalSlides = ref(0);
+const speakerNotesOpen = ref(false);
+
+let engine: Lumina | null = null;
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+const TEMPLATES = {
+    flex: `{
+  "meta": { "title": "Playground" },
+  "slides": [
+    {
+      "type": "flex",
+      "direction": "horizontal",
+      "notes": "**Demo slide** - Show how the flex layout works. Point out the image on the left. Explain content stacking. Mention the button actions.",
+      "elements": [
+        {
+          "type": "image",
+          "src": "./brains.png",
+          "size": "half",
+          "fill": true
+        },
+        {
+          "type": "content",
+          "size": "half",
+          "valign": "center",
+          "padding": "xl",
+          "gap": "lg",
+          "elements": [
+            { "type": "title", "text": "Hello World", "size": "2xl" },
+            { "type": "text", "text": "Edit this JSON to see changes in real-time.", "muted": true },
+            { "type": "bullets", "items": ["Flow-based layout", "No coordinates", "LLM friendly"] },
+            { "type": "button", "label": "Get Started", "variant": "primary" }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "statement",
+      "tag": "Next Steps",
+      "title": "Try the Speaker Notes!",
+      "subtitle": "Click the Notes button above to open the presenter view.",
+      "notes": "This is the second slide. Encourage them to try the bidirectional sync. Show the timer functionality. Press T to toggle timer."
+    }
+  ]
+}`,
+    statement: `{
+  "meta": { "title": "Playground" },
+  "slides": [
+    {
+      "type": "statement",
+      "tag": "Welcome",
+      "title": "Hello World",
+      "subtitle": "Edit this JSON to see changes instantly.",
+      "notes": "Remember to greet the audience! Introduce yourself. Set expectations for the presentation."
+    }
+  ]
+}`,
+    custom: `{
+  "meta": { "title": "Custom Slide" },
+  "slides": [
+    {
+      "type": "custom",
+      "html": "<div class='custom-container'><h1 class='custom-title'>Custom HTML Slide</h1><p class='custom-text'>This slide uses raw HTML content!</p><div class='custom-grid'><div class='custom-card'>Card 1</div><div class='custom-card'>Card 2</div><div class='custom-card'>Card 3</div></div></div>",
+      "css": ".custom-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; padding: 2rem; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); } .custom-title { font-size: 4rem; font-weight: bold; background: linear-gradient(90deg, #00d4ff, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; } .custom-text { font-size: 1.5rem; color: rgba(255,255,255,0.7); margin-bottom: 3rem; } .custom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .custom-card { padding: 2rem; background: rgba(255,255,255,0.05); border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); color: white; font-weight: 600; }",
+      "notes": "This is a custom HTML slide with inline CSS. You have full control over the layout!"
+    }
+  ]
+}`
+};
+
+const loadTemplate = (name: keyof typeof TEMPLATES) => {
+    jsonInput.value = TEMPLATES[name];
+    updatePreview();
+};
+
+const formatJson = () => {
+    try {
+        const parsed = JSON.parse(jsonInput.value);
+        jsonInput.value = JSON.stringify(parsed, null, 2);
+    } catch {
+        // Ignore if invalid
+    }
+};
+
+const exportHtml = () => {
+    if (!jsonInput.value.trim()) return;
+
+    try {
+        let parsed = JSON.parse(jsonInput.value);
+
+        // Auto-wrap logic (same as preview)
+        if (parsed.type && !parsed.slides) {
+            parsed = {
+                meta: { title: 'Exported Deck' },
+                slides: [{ ...parsed, sizing: 'container' }]
+            };
+        }
+
+        // Apply container sizing
+        if (parsed.slides) {
+            parsed.slides.forEach((s: any) => s.sizing = 'container');
+        }
+
+        const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${parsed.meta?.title || 'Lumina Presentation'}</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lumina-slides@8.2.5/dist/style.css">
+    <style>
+        body { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: sans-serif; }
+        #app { width: 100vw; height: 100vh; }
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    
+    <!-- Lumina Engine (Universal Build) -->
+    <script src="https://cdn.jsdelivr.net/npm/lumina-slides@8.2.5/dist/lumina-slides.umd.cjs"><\/script>
+    
+    <script>
+        // Initialize when ready
+        document.addEventListener('DOMContentLoaded', () => {
+            const { Lumina } = LuminaSlides;
+            
+            // The JSON from your playground
+            const deckData = ${JSON.stringify(parsed, null, 4)};
+
+            // Start the engine
+            const engine = new Lumina('#app', {
+                loop: true,
+                navigation: true,
+                ui: {
+                    visible: true,
+                    showSlideCount: true,
+                    showControls: true,
+                    showProgressBar: true
+                },
+                keys: {
+                    next: ['ArrowRight', ' ', 'Enter'],
+                    prev: ['ArrowLeft', 'Backspace']
+                },
+                animation: { enabled: true, durationIn: 0.5 }
+            });
+            
+            engine.load(deckData);
+        });
+    <\/script>
+</body>
+</html>`;
+
+        const blob = new Blob([html], { type: 'text/html' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'lumina-deck.html';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+
+    } catch (e: any) {
+        alert('Invalid JSON: ' + e.message);
+    }
+};
+
+const onInput = () => {
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(updatePreview, 300);
+};
+
+const updatePreview = async () => {
+    parseError.value = null;
+
+    if (!jsonInput.value.trim()) {
+        hasValidJson.value = false;
+        return;
+    }
+
+    try {
+        let parsed = JSON.parse(jsonInput.value);
+
+        // Auto-wrap single slide in deck structure
+        if (parsed.type && !parsed.slides) {
+            parsed = {
+                meta: { title: 'Playground' },
+                slides: [{ ...parsed, sizing: 'container' }]
+            };
+        }
+
+        // Apply container sizing to all slides
+        if (parsed.slides) {
+            parsed.slides.forEach((s: any) => s.sizing = 'container');
+        }
+
+        hasValidJson.value = true;
+
+        // Initialize or update engine
+        if (!engine) {
+            await nextTick();
+            engine = new Lumina('#playground-container', {
+                loop: true,
+                navigation: true,
+                ui: {
+                    visible: true,
+                    showSlideCount: true,
+                    showControls: true,
+                    showProgressBar: true
+                },
+                keys: {
+                    next: ['ArrowRight', ' ', 'Enter'],
+                    prev: ['ArrowLeft', 'Backspace']
+                },
+                animation: { enabled: true, durationIn: 0.5 }
+            });
+
+            engine.on('slideChange', (payload) => {
+                slideIndex.value = payload.index;
+            });
+        }
+
+        engine.load(parsed);
+        totalSlides.value = parsed.slides?.length || 0;
+        slideIndex.value = 0;
+
+    } catch (e: any) {
+        parseError.value = e.message || 'Invalid JSON';
+        hasValidJson.value = false;
+    }
+};
+
+const prevSlide = () => {
+    if (engine) engine.prev();
+};
+
+const nextSlide = () => {
+    if (engine) engine.next();
+};
+
+const openSpeakerNotes = () => {
+    if (!engine) return;
+    const win = engine.openSpeakerNotes();
+    if (win) {
+        speakerNotesOpen.value = true;
+        // Monitor for close
+        const checkClosed = setInterval(() => {
+            if (win.closed) {
+                speakerNotesOpen.value = false;
+                clearInterval(checkClosed);
+            }
+        }, 500);
+    } else {
+        alert('Popup blocked! Please allow popups for speaker notes.');
+    }
+};
+
+onMounted(() => {
+    // Start with flex template
+    loadTemplate('flex');
+});
+
+onUnmounted(() => {
+    if (engine) {
+        engine.destroy();
+        engine = null;
+    }
+    if (debounceTimer) clearTimeout(debounceTimer);
+});
+</script>
+
+<style scoped>
+textarea::placeholder {
+    color: rgba(255, 255, 255, 0.2);
+}
+</style>

package/src/components/site/SitePromptBuilder.vue

@@ -0,0 +1,266 @@
+<template>
+    <div class="min-h-screen pt-32 px-4 lg:px-8 max-w-5xl mx-auto pb-32">
+        <!-- Unified Header -->
+        <div class="text-center mb-16 max-w-2xl mx-auto">
+            <h1 class="text-4xl md:text-5xl font-black mb-4 tracking-tight text-white">Prompt Builder</h1>
+            <p class="text-lg text-white/50 leading-relaxed">
+                Create a customized prompt for any LLM to generate Lumina presentations.
+            </p>
+        </div>
+
+        <!-- Progress Steps -->
+        <div class="flex justify-center mb-12">
+            <div class="flex items-center gap-2">
+                <template v-for="(step, i) in steps" :key="i">
+                    <button @click="currentStep = i" :class="[
+                        'w-10 h-10 rounded-full font-bold text-sm transition-all',
+                        currentStep === i
+                            ? 'bg-blue-500 text-white scale-110'
+                            : currentStep > i
+                                ? 'bg-green-500/20 text-green-400 border border-green-500/50'
+                                : 'bg-white/10 text-white/40'
+                    ]">
+                        {{ currentStep > i ? '✓' : i + 1 }}
+                    </button>
+                    <div v-if="i < steps.length - 1" class="w-8 h-0.5 bg-white/10"></div>
+                </template>
+            </div>
+        </div>
+
+        <!-- Step Content -->
+        <div class="max-w-2xl mx-auto">
+            <!-- Step 1: Language -->
+            <div v-if="currentStep === 0" class="space-y-6">
+                <h2 class="text-2xl font-bold text-center mb-8">{{ steps[0] }}</h2>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
+                    <button v-for="lang in languages" :key="lang.code" @click="form.language = lang.code; nextStep()"
+                        :class="[
+                            'p-8 rounded-3xl border transition-all text-center hover:scale-[1.02] active:scale-95 duration-500',
+                            form.language === lang.code
+                                ? 'bg-blue-600/20 border-blue-500/50 text-white shadow-[0_20px_40px_-10px_rgba(59,130,246,0.2)]'
+                                : 'bg-white/[0.03] border-white/5 hover:border-white/20'
+                        ]">
+                        <span class="text-4xl block mb-4 transform group-hover:scale-110 transition-transform">{{
+                            lang.flag
+                        }}</span>
+                        <span class="font-bold tracking-tight">{{ lang.name }}</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Step 2: Style -->
+            <div v-if="currentStep === 1" class="space-y-6">
+                <h2 class="text-2xl font-bold text-center mb-8">{{ steps[1] }}</h2>
+                <div class="grid grid-cols-2 gap-6">
+                    <button v-for="style in styles" :key="style.id" @click="form.style = style.id; nextStep()" :class="[
+                        'p-8 rounded-3xl border transition-all text-left hover:scale-[1.02] active:scale-95 duration-500 flex flex-col',
+                        form.style === style.id
+                            ? 'bg-blue-600/20 border-blue-500/50 shadow-[0_20px_40px_-10px_rgba(59,130,246,0.2)]'
+                            : 'bg-white/[0.03] border-white/5 hover:border-white/20'
+                    ]">
+                        <span class="text-3xl mb-4 block">{{ style.icon }}</span>
+                        <span class="text-xl font-bold block mb-1 tracking-tight">{{ style.name }}</span>
+                        <span class="text-sm text-white/30 font-medium leading-relaxed">{{ style.desc }}</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Step 3: Topic -->
+            <div v-if="currentStep === 2" class="space-y-6">
+                <h2 class="text-2xl font-bold text-center mb-8">{{ steps[2] }}</h2>
+                <textarea v-model="form.topic" rows="4"
+                    class="w-full p-4 rounded-xl bg-white/5 border border-white/10 text-white placeholder-white/30 focus:outline-none focus:border-blue-500"
+                    placeholder="Describe your presentation topic in a few sentences..."></textarea>
+                <button @click="nextStep()" :disabled="!form.topic.trim()"
+                    class="w-full py-4 rounded-xl bg-blue-500 text-white font-bold hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition">
+                    Continue →
+                </button>
+            </div>
+
+            <!-- Step 4: Audience -->
+            <div v-if="currentStep === 3" class="space-y-6">
+                <h2 class="text-2xl font-bold text-center mb-8">{{ steps[3] }}</h2>
+                <div class="grid grid-cols-2 lg:grid-cols-3 gap-6">
+                    <button v-for="aud in audiences" :key="aud.id" @click="form.audience = aud.id; nextStep()" :class="[
+                        'p-8 rounded-3xl border transition-all text-left hover:scale-[1.02] active:scale-95 duration-500 flex flex-col',
+                        form.audience === aud.id
+                            ? 'bg-blue-600/20 border-blue-500/50 shadow-[0_20px_40px_-10px_rgba(59,130,246,0.2)]'
+                            : 'bg-white/[0.03] border-white/5 hover:border-white/20'
+                    ]">
+                        <span class="text-3xl mb-4 block">{{ aud.icon }}</span>
+                        <span class="font-bold tracking-tight">{{ aud.name }}</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Step 5: Slide Count -->
+            <div v-if="currentStep === 4" class="space-y-6">
+                <h2 class="text-2xl font-bold text-center mb-8">{{ steps[4] }}</h2>
+                <div class="flex items-center justify-center gap-4">
+                    <button @click="form.slideCount = Math.max(3, form.slideCount - 1)"
+                        class="w-12 h-12 rounded-full bg-white/10 text-xl font-bold hover:bg-white/20">−</button>
+                    <span class="text-5xl font-bold w-20 text-center">{{ form.slideCount }}</span>
+                    <button @click="form.slideCount = Math.min(20, form.slideCount + 1)"
+                        class="w-12 h-12 rounded-full bg-white/10 text-xl font-bold hover:bg-white/20">+</button>
+                </div>
+                <p class="text-center text-white/40 text-sm">Recommended: 5-12 slides</p>
+
+                <!-- Speaker Notes Toggle -->
+                <div class="flex items-center justify-center gap-3 pt-4">
+                    <button @click="form.includeNotes = !form.includeNotes" :class="[
+                        'relative w-12 h-6 rounded-full transition-colors duration-200 ease-in-out',
+                        form.includeNotes ? 'bg-blue-500' : 'bg-white/10'
+                    ]">
+                        <span :class="[
+                            'absolute top-1 left-1 bg-white w-4 h-4 rounded-full transition-transform duration-200',
+                            form.includeNotes ? 'translate-x-6' : 'translate-x-0'
+                        ]"></span>
+                    </button>
+                    <span class="text-white font-medium cursor-pointer" @click="form.includeNotes = !form.includeNotes">
+                        Include Speaker Notes
+                    </span>
+                </div>
+                <button @click="nextStep()"
+                    class="w-full py-4 rounded-xl bg-blue-500 text-white font-bold hover:bg-blue-600 transition">
+                    Generate Prompt →
+                </button>
+            </div>
+
+            <!-- Step 6: Result -->
+            <div v-if="currentStep === 5" class="space-y-6">
+                <h2 class="text-2xl font-bold text-center mb-4">Your Prompt is Ready!</h2>
+                <p class="text-center text-white/60 mb-8">Copy and paste this into ChatGPT, Claude, or any LLM</p>
+
+                <div class="relative">
+                    <div class="p-6 rounded-xl bg-black border border-white/10 max-h-96 overflow-y-auto">
+                        <pre class="text-sm text-white/80 whitespace-pre-wrap font-mono">{{ generatedPrompt }}</pre>
+                    </div>
+                    <button @click="copyPrompt" :class="[
+                        'absolute top-4 right-4 px-4 py-2 rounded-lg font-bold text-sm transition',
+                        copied ? 'bg-green-500 text-white' : 'bg-white/10 hover:bg-white/20'
+                    ]">
+                        {{ copied ? '✓ Copied!' : 'Copy' }}
+                    </button>
+                </div>
+
+                <div class="flex gap-4">
+                    <button @click="currentStep = 0"
+                        class="flex-1 py-4 rounded-xl bg-white/10 text-white font-bold hover:bg-white/20 transition">
+                        ← Start Over
+                    </button>
+                    <a href="https://chat.openai.com" target="_blank"
+                        class="flex-1 py-4 rounded-xl bg-blue-500 text-white font-bold hover:bg-blue-600 transition text-center">
+                        Open ChatGPT →
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Navigation -->
+        <div v-if="currentStep > 0 && currentStep < 5" class="max-w-2xl mx-auto mt-8">
+            <button @click="currentStep--" class="text-white/50 hover:text-white transition">
+                ← Back
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+
+const currentStep = ref(0);
+const copied = ref(false);
+const basePrompt = ref('');
+
+const steps = ['Language', 'Style', 'Topic', 'Audience', 'Slides', 'Done'];
+
+const languages = [
+    { code: 'en', name: 'English', flag: '🇺🇸' },
+    { code: 'es', name: 'Español', flag: '🇪🇸' },
+    { code: 'pt', name: 'Português', flag: '🇧🇷' },
+    { code: 'fr', name: 'Français', flag: '🇫🇷' },
+    { code: 'de', name: 'Deutsch', flag: '🇩🇪' },
+    { code: 'it', name: 'Italiano', flag: '🇮🇹' },
+];
+
+const styles = [
+    { id: 'minimalist', name: 'Minimalist', desc: 'Clean and simple', icon: '◻️' },
+    { id: 'corporate', name: 'Corporate', desc: 'Professional and formal', icon: '🏢' },
+    { id: 'creative', name: 'Creative', desc: 'Bold and expressive', icon: '🎨' },
+    { id: 'technical', name: 'Technical', desc: 'Data and detail focused', icon: '⚙️' },
+];
+
+const audiences = [
+    { id: 'investors', name: 'Investors', icon: '💼' },
+    { id: 'executives', name: 'Executives', icon: '👔' },
+    { id: 'team', name: 'Team/Internal', icon: '👥' },
+    { id: 'customers', name: 'Customers', icon: '🎯' },
+    { id: 'students', name: 'Students', icon: '📚' },
+    { id: 'general', name: 'General Public', icon: '🌍' },
+];
+
+const form = ref({
+    language: 'en',
+    style: 'minimalist',
+    topic: '',
+    audience: 'general',
+    slideCount: 8,
+    includeNotes: true
+});
+
+const nextStep = () => {
+    if (currentStep.value < steps.length - 1) {
+        currentStep.value++;
+    }
+};
+
+const generatedPrompt = computed(() => {
+    const langName = languages.find(l => l.code === form.value.language)?.name || 'English';
+    const styleName = styles.find(s => s.id === form.value.style)?.name || 'Minimalist';
+    const audName = audiences.find(a => a.id === form.value.audience)?.name || 'General';
+
+    return `${basePrompt.value}
+
+---
+
+## USER REQUEST
+
+**Language**: ${langName}
+**Style**: ${styleName}
+**Audience**: ${audName}
+**Slide Count**: ${form.value.slideCount}
+**Topic**: ${form.value.topic}
+
+**Requirements**:
+${form.value.includeNotes ? `- **JSON Schema**: Every slide object MUST include the "notes" property.
+- Include key talking points and timing in the notes.` : ''}
+- Follow all quality constraints defined in the system prompt.
+
+Please generate the presentation now.`;
+});
+
+const copyPrompt = async () => {
+    try {
+        await navigator.clipboard.writeText(generatedPrompt.value);
+        copied.value = true;
+        setTimeout(() => copied.value = false, 2000);
+    } catch (e) {
+        console.error('Failed to copy:', e);
+    }
+};
+
+onMounted(async () => {
+    try {
+        // Use relative path which is safer for GitHub Pages subdirectories
+        // assuming index.html is at the project root which it is.
+        const url = './lumina-llm-prompt.txt';
+
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
+        basePrompt.value = await res.text();
+    } catch (e) {
+        console.error('Failed to load base prompt:', e);
+        basePrompt.value = "Error loading system prompt. Please ensure 'lumina-llm-prompt.txt' is in the public folder.";
+    }
+});
+</script>