lumina-slides 9.0.4 → 9.0.6

package/src/views/DeckView.vue

@@ -1,313 +1,313 @@
-<template>
-    <div class="lumina-deck-root w-full relative bg-black">
-        <!-- Edit (owner) -->
-        <button v-if="canEdit" @click="editDeck"
-            class="fixed top-6 right-6 max-sm:top-auto max-sm:bottom-24 max-sm:right-20 z-[100] px-4 py-2 max-sm:px-2.5 max-sm:py-2 rounded-full bg-blue-600 border border-blue-500 text-xs font-bold uppercase hover:bg-blue-500 transition backdrop-blur-md flex items-center gap-2">
-            <i class="ph-thin ph-pencil-simple"></i>
-            <span class="max-sm:hidden">Edit</span>
-        </button>
-
-        <!-- Duplicate & Edit (GPT / non-owner): copies the deck for the user and prompts login if needed -->
-        <button v-else-if="showDuplicateEdit" @click="duplicateAndEdit" :disabled="duplicating"
-            class="fixed top-6 right-6 max-sm:top-auto max-sm:bottom-24 max-sm:right-20 z-[100] px-4 py-2 max-sm:px-2.5 max-sm:py-2 rounded-full bg-blue-600/90 border border-blue-500 text-xs font-bold uppercase hover:bg-blue-500 transition backdrop-blur-md flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
-            :title="duplicating ? 'Copying…' : 'Duplicate & Edit'">
-            <i v-if="duplicating" class="ph-thin ph-spinner ph-spin"></i>
-            <i v-else class="ph-thin ph-copy"></i>
-            <span class="max-sm:hidden">{{ duplicating ? 'Copying…' : 'Duplicate & Edit' }}</span>
-        </button>
-
-        <!-- Modal: sign in to duplicate and edit -->
-        <Teleport to="body">
-            <div v-if="showLoginModal" class="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
-                @click.self="showLoginModal = false">
-                <div class="bg-[#0f0f0f] border border-white/10 rounded-2xl p-6 max-w-sm w-full shadow-2xl"
-                    @click.stop>
-                    <h3 class="text-lg font-bold text-white mb-2">Sign in to duplicate</h3>
-                    <p class="text-white/60 text-sm mb-6">Create a copy in your account to edit this presentation.</p>
-                    <div class="flex flex-col gap-3">
-                        <button @click="onLoginAndDuplicate" :disabled="loginLoading"
-                            class="w-full px-4 py-3 rounded-xl bg-white text-black font-bold flex items-center justify-center gap-2 hover:bg-white/90 transition disabled:opacity-60">
-                            <i v-if="loginLoading" class="ph-thin ph-spinner ph-spin"></i>
-                            <i v-else class="ph-thin ph-google-logo"></i>
-                            {{ loginLoading ? 'Signing in…' : 'Sign in with Google' }}
-                        </button>
-                        <button @click="showLoginModal = false"
-                            class="w-full px-4 py-2 rounded-xl border border-white/20 text-white/80 font-medium hover:bg-white/5 transition">
-                            Cancel
-                        </button>
-                    </div>
-                    <p v-if="loginError" class="mt-4 text-sm text-red-400">{{ loginError }}</p>
-                </div>
-            </div>
-        </Teleport>
-
-        <!-- Container -->
-        <div id="deck-container" class="w-full h-full min-h-0 overflow-hidden"></div>
-
-        <!-- Timeline (Remotion-style) for animation-timeline example -->
-        <div v-if="showTimelineUI" class="fixed bottom-0 left-0 right-0 z-[90] flex items-center gap-3 px-4 py-3 bg-black/90 border-t border-white/10 backdrop-blur">
-            <span class="text-white/70 text-sm tabular-nums w-10">{{ Math.round(timelineProgress) }}%</span>
-            <input type="range" min="0" max="100" step="0.5" :value="timelineProgress"
-                class="flex-1 h-2 rounded accent-blue-500"
-                @input="onTimelineInput" />
-            <button type="button" :disabled="timelinePlaying"
-                class="px-3 py-1.5 rounded bg-blue-600 text-white text-sm font-medium hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
-                @click="onTimelinePlay">Play</button>
-        </div>
-
-        <!-- Template Tags: edit engine.data and see slides update (layout-template-tags example) -->
-        <div v-if="showTemplateTagsUI" class="fixed bottom-0 left-0 right-0 z-[90] flex items-center gap-4 px-4 py-3 bg-black/90 border-t border-white/10 backdrop-blur flex-wrap">
-            <span class="text-white/50 text-xs uppercase tracking-wider">engine.data</span>
-            <label class="flex items-center gap-2 text-sm text-white/80">
-                Product
-                <input v-model="templateProduct" type="text" placeholder="product"
-                    class="w-28 px-2 py-1 rounded bg-white/10 border border-white/20 text-white text-sm focus:border-blue-500 focus:outline-none"
-                    @input="onTemplateDataInput('product', ($event.target as HTMLInputElement).value)" />
-            </label>
-            <label class="flex items-center gap-2 text-sm text-white/80">
-                Version
-                <input v-model="templateVersion" type="text" placeholder="version"
-                    class="w-24 px-2 py-1 rounded bg-white/10 border border-white/20 text-white text-sm focus:border-blue-500 focus:outline-none"
-                    @input="onTemplateDataInput('version', ($event.target as HTMLInputElement).value)" />
-            </label>
-            <label class="flex items-center gap-2 text-sm text-white/80">
-                User
-                <input v-model="templateUser" type="text" placeholder="user"
-                    class="w-28 px-2 py-1 rounded bg-white/10 border border-white/20 text-white text-sm focus:border-blue-500 focus:outline-none"
-                    @input="onTemplateDataInput('user', ($event.target as HTMLInputElement).value)" />
-            </label>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onUnmounted, computed, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { Lumina } from '../core/Lumina';
-import { getDeck, saveDeck, initFirebase } from '../utils/firebase';
-import { useAuth } from '../composables/useAuth';
-import type { Deck } from '../core/types';
-
-const route = useRoute();
-const router = useRouter();
-const { user, loginWithGoogle } = useAuth();
-let engine: Lumina | null = null;
-const engineRef = ref<Lumina | null>(null);
-const deckAuthorId = ref<string | null>(null);
-const loadedDeck = ref<Deck | null>(null);
-const duplicating = ref(false);
-const showLoginModal = ref(false);
-const loginError = ref('');
-const loginLoading = ref(false);
-
-// Timeline (Remotion-style) for animation-timeline
-const timelineProgress = ref(0);
-const currentSlideIndex = ref(0);
-const timelinePlaying = ref(false);
-const timelineCancelRef = ref<(() => void) | null>(null);
-const timelineIntervalRef = ref<ReturnType<typeof setInterval> | null>(null);
-
-const showTimelineUI = computed(() => {
-    const p = route.params.id;
-    const id = typeof p === 'string' ? p : (Array.isArray(p) && p[0] ? p[0] : '');
-    if (id !== 'animation-timeline') return false;
-    const slide = loadedDeck.value?.slides[currentSlideIndex.value];
-    return !!slide?.timelineTracks;
-});
-
-// Template Tags example: edit engine.data and see slides update
-const templateProduct = ref('Lumina');
-const templateVersion = ref('2.0');
-const templateUser = ref('World');
-const showTemplateTagsUI = computed(() => {
-    const p = route.params.id;
-    const id = typeof p === 'string' ? p : (Array.isArray(p) && p[0] ? p[0] : '');
-    return id === 'layout-template-tags';
-});
-function onTemplateDataInput(key: string, value: string) {
-    engineRef.value?.data.set(key, value);
-}
-
-function onTimelineInput(e: Event) {
-    const t = e.target;
-    if (t instanceof HTMLInputElement) {
-        const v = parseFloat(t.value);
-        timelineProgress.value = v;
-        engineRef.value?.seekTo(v / 100);
-    }
-}
-
-function onTimelinePlay() {
-    if (timelinePlaying.value || !engineRef.value) return;
-    timelinePlaying.value = true;
-    const [promise, cancel] = engineRef.value.playTimeline(5);
-    timelineCancelRef.value = cancel;
-    timelineIntervalRef.value = setInterval(() => {
-        if (!engineRef.value) return;
-        const p = engineRef.value.timelineProgress;
-        timelineProgress.value = p * 100;
-        if (p >= 1) {
-            if (timelineIntervalRef.value) clearInterval(timelineIntervalRef.value);
-            timelineIntervalRef.value = null;
-            timelinePlaying.value = false;
-            timelineCancelRef.value = null;
-        }
-    }, 50);
-    promise.then(() => {
-        if (timelineIntervalRef.value) clearInterval(timelineIntervalRef.value);
-        timelineIntervalRef.value = null;
-        timelinePlaying.value = false;
-        timelineCancelRef.value = null;
-    });
-}
-
-const canEdit = computed(() => {
-    return user.value && deckAuthorId.value && user.value.uid === deckAuthorId.value;
-});
-
-const showDuplicateEdit = computed(() => {
-    const hasDuplicateParam = 'duplicate' in route.query;
-    return hasDuplicateParam && !canEdit.value && loadedDeck.value != null;
-});
-
-const editDeck = () => {
-    router.push({ name: 'studio', params: { id: route.params.id } });
-};
-
-async function duplicateAndEdit() {
-    if (!loadedDeck.value) return;
-    if (!user.value) {
-        showLoginModal.value = true;
-        loginError.value = '';
-        return;
-    }
-    duplicating.value = true;
-    try {
-        const { id: _id, authorId: _aid, authorName: _an, ...restMeta } = loadedDeck.value.meta || {};
-        const copyMeta = { ...restMeta, title: (loadedDeck.value.meta?.title || 'Presentation') + ' (Copy)' };
-        const copy: Deck = { meta: copyMeta, slides: loadedDeck.value.slides || [] };
-        const newId = await saveDeck(copy, user.value.uid, user.value.displayName || undefined);
-        router.push({ name: 'studio', params: { id: newId } });
-    } catch (e) {
-        console.error('Failed to duplicate deck:', e);
-        alert('Could not create a copy. Please try again.');
-    } finally {
-        duplicating.value = false;
-    }
-}
-
-async function onLoginAndDuplicate() {
-    loginError.value = '';
-    loginLoading.value = true;
-    try {
-        await loginWithGoogle();
-        showLoginModal.value = false;
-        await duplicateAndEdit();
-    } catch (e) {
-        const msg = e instanceof Error ? e.message : 'Sign-in failed. Please try again.';
-        loginError.value = msg;
-    } finally {
-        loginLoading.value = false;
-    }
-}
-
-onMounted(async () => {
-    try {
-        initFirebase();
-    } catch (e) { }
-
-        const p = route.params.id;
-        const deckId = typeof p === 'string' ? p : (Array.isArray(p) && p[0] ? p[0] : '');
-        if (!deckId) return;
-
-        try {
-            let deckData: Deck | null = null;
-            const isExample = deckId.startsWith('deck') || deckId.startsWith('layout') || deckId.startsWith('theme') || deckId.startsWith('animation');
-
-        if (isExample) {
-            const response = await fetch(`${import.meta.env.BASE_URL}${deckId}.json`);
-            deckData = (await response.json()) as Deck;
-        } else {
-            deckData = await getDeck(deckId);
-        }
-
-        if (deckData?.meta?.authorId) {
-            deckAuthorId.value = deckData.meta.authorId;
-        }
-        if (!deckData) throw new Error('Deck not found');
-
-        loadedDeck.value = deckData;
-
-        engine = new Lumina('#deck-container', {
-            loop: true,
-            studio: false,
-            debug: isExample,
-            navigation: true,
-            ui: {
-                visible: true,
-                showSlideCount: true,
-                showControls: true,
-                showProgressBar: true
-            },
-            theme: deckData.theme || 'default'
-        });
-        engineRef.value = engine;
-
-        if (deckId === 'layout-element-control') {
-            engine.on('ready', () => {
-                ['s0-tag', 's0-title', 's0-subtitle'].forEach((id, i) => {
-                    setTimeout(() => engine?.element(id).show(), (i + 1) * 700);
-                });
-            });
-            engine.on('slideChange', ({ index }) => {
-                if (index === 1) {
-                    ['s1-tag', 's1-title', 's1-subtitle'].forEach((id, i) => {
-                        setTimeout(() => engine?.element(id).show(), (i + 1) * 700);
-                    });
-                }
-            });
-        }
-
-        if (deckId === 'animation-timeline') {
-            engine.on('ready', () => {
-                engine?.seekTo(0);
-                timelineProgress.value = 0;
-                currentSlideIndex.value = 0;
-            });
-            engine.on('slideChange', ({ index }) => {
-                if (timelineIntervalRef.value) {
-                    clearInterval(timelineIntervalRef.value);
-                    timelineIntervalRef.value = null;
-                }
-                timelineCancelRef.value?.();
-                timelineCancelRef.value = null;
-                timelinePlaying.value = false;
-                currentSlideIndex.value = index;
-                engine?.seekTo(0, index);
-                timelineProgress.value = 0;
-            });
-        }
-
-        if (deckId === 'layout-template-tags') {
-            engine.data.set('product', templateProduct.value);
-            engine.data.set('version', templateVersion.value);
-            engine.data.set('user', templateUser.value);
-        }
-
-        engine.load(deckData);
-    } catch (error) {
-        console.error("Failed to load deck:", error);
-        alert("Failed to load presentation.");
-        router.push({ name: 'dashboard' });
-    }
-});
-
-onUnmounted(() => {
-    if (timelineIntervalRef.value) clearInterval(timelineIntervalRef.value);
-    timelineCancelRef.value?.();
-    if (engine) {
-        engine.destroy();
-    }
-    engineRef.value = null;
-});
-</script>
+<template>
+    <div class="lumina-deck-root w-full relative bg-black">
+        <!-- Edit (owner) -->
+        <button v-if="canEdit" @click="editDeck"
+            class="fixed top-6 right-6 max-sm:top-auto max-sm:bottom-24 max-sm:right-20 z-[100] px-4 py-2 max-sm:px-2.5 max-sm:py-2 rounded-full bg-blue-600 border border-blue-500 text-xs font-bold uppercase hover:bg-blue-500 transition backdrop-blur-md flex items-center gap-2">
+            <i class="ph-thin ph-pencil-simple"></i>
+            <span class="max-sm:hidden">Edit</span>
+        </button>
+
+        <!-- Duplicate & Edit (GPT / non-owner): copies the deck for the user and prompts login if needed -->
+        <button v-else-if="showDuplicateEdit" @click="duplicateAndEdit" :disabled="duplicating"
+            class="fixed top-6 right-6 max-sm:top-auto max-sm:bottom-24 max-sm:right-20 z-[100] px-4 py-2 max-sm:px-2.5 max-sm:py-2 rounded-full bg-blue-600/90 border border-blue-500 text-xs font-bold uppercase hover:bg-blue-500 transition backdrop-blur-md flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+            :title="duplicating ? 'Copying…' : 'Duplicate & Edit'">
+            <i v-if="duplicating" class="ph-thin ph-spinner ph-spin"></i>
+            <i v-else class="ph-thin ph-copy"></i>
+            <span class="max-sm:hidden">{{ duplicating ? 'Copying…' : 'Duplicate & Edit' }}</span>
+        </button>
+
+        <!-- Modal: sign in to duplicate and edit -->
+        <Teleport to="body">
+            <div v-if="showLoginModal" class="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
+                @click.self="showLoginModal = false">
+                <div class="bg-[#0f0f0f] border border-white/10 rounded-2xl p-6 max-w-sm w-full shadow-2xl"
+                    @click.stop>
+                    <h3 class="text-lg font-bold text-white mb-2">Sign in to duplicate</h3>
+                    <p class="text-white/60 text-sm mb-6">Create a copy in your account to edit this presentation.</p>
+                    <div class="flex flex-col gap-3">
+                        <button @click="onLoginAndDuplicate" :disabled="loginLoading"
+                            class="w-full px-4 py-3 rounded-xl bg-white text-black font-bold flex items-center justify-center gap-2 hover:bg-white/90 transition disabled:opacity-60">
+                            <i v-if="loginLoading" class="ph-thin ph-spinner ph-spin"></i>
+                            <i v-else class="ph-thin ph-google-logo"></i>
+                            {{ loginLoading ? 'Signing in…' : 'Sign in with Google' }}
+                        </button>
+                        <button @click="showLoginModal = false"
+                            class="w-full px-4 py-2 rounded-xl border border-white/20 text-white/80 font-medium hover:bg-white/5 transition">
+                            Cancel
+                        </button>
+                    </div>
+                    <p v-if="loginError" class="mt-4 text-sm text-red-400">{{ loginError }}</p>
+                </div>
+            </div>
+        </Teleport>
+
+        <!-- Container -->
+        <div id="deck-container" class="w-full h-full min-h-0 overflow-hidden"></div>
+
+        <!-- Timeline (Remotion-style) for animation-timeline example -->
+        <div v-if="showTimelineUI" class="fixed bottom-0 left-0 right-0 z-[90] flex items-center gap-3 px-4 py-3 bg-black/90 border-t border-white/10 backdrop-blur">
+            <span class="text-white/70 text-sm tabular-nums w-10">{{ Math.round(timelineProgress) }}%</span>
+            <input type="range" min="0" max="100" step="0.5" :value="timelineProgress"
+                class="flex-1 h-2 rounded accent-blue-500"
+                @input="onTimelineInput" />
+            <button type="button" :disabled="timelinePlaying"
+                class="px-3 py-1.5 rounded bg-blue-600 text-white text-sm font-medium hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                @click="onTimelinePlay">Play</button>
+        </div>
+
+        <!-- Template Tags: edit engine.data and see slides update (layout-template-tags example) -->
+        <div v-if="showTemplateTagsUI" class="fixed bottom-0 left-0 right-0 z-[90] flex items-center gap-4 px-4 py-3 bg-black/90 border-t border-white/10 backdrop-blur flex-wrap">
+            <span class="text-white/50 text-xs uppercase tracking-wider">engine.data</span>
+            <label class="flex items-center gap-2 text-sm text-white/80">
+                Product
+                <input v-model="templateProduct" type="text" placeholder="product"
+                    class="w-28 px-2 py-1 rounded bg-white/10 border border-white/20 text-white text-sm focus:border-blue-500 focus:outline-none"
+                    @input="onTemplateDataInput('product', ($event.target as HTMLInputElement).value)" />
+            </label>
+            <label class="flex items-center gap-2 text-sm text-white/80">
+                Version
+                <input v-model="templateVersion" type="text" placeholder="version"
+                    class="w-24 px-2 py-1 rounded bg-white/10 border border-white/20 text-white text-sm focus:border-blue-500 focus:outline-none"
+                    @input="onTemplateDataInput('version', ($event.target as HTMLInputElement).value)" />
+            </label>
+            <label class="flex items-center gap-2 text-sm text-white/80">
+                User
+                <input v-model="templateUser" type="text" placeholder="user"
+                    class="w-28 px-2 py-1 rounded bg-white/10 border border-white/20 text-white text-sm focus:border-blue-500 focus:outline-none"
+                    @input="onTemplateDataInput('user', ($event.target as HTMLInputElement).value)" />
+            </label>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { Lumina } from '../core/Lumina';
+import { getDeck, saveDeck, initFirebase } from '../utils/firebase';
+import { useAuth } from '../composables/useAuth';
+import type { Deck } from '../core/types';
+
+const route = useRoute();
+const router = useRouter();
+const { user, loginWithGoogle } = useAuth();
+let engine: Lumina | null = null;
+const engineRef = ref<Lumina | null>(null);
+const deckAuthorId = ref<string | null>(null);
+const loadedDeck = ref<Deck | null>(null);
+const duplicating = ref(false);
+const showLoginModal = ref(false);
+const loginError = ref('');
+const loginLoading = ref(false);
+
+// Timeline (Remotion-style) for animation-timeline
+const timelineProgress = ref(0);
+const currentSlideIndex = ref(0);
+const timelinePlaying = ref(false);
+const timelineCancelRef = ref<(() => void) | null>(null);
+const timelineIntervalRef = ref<ReturnType<typeof setInterval> | null>(null);
+
+const showTimelineUI = computed(() => {
+    const p = route.params.id;
+    const id = typeof p === 'string' ? p : (Array.isArray(p) && p[0] ? p[0] : '');
+    if (id !== 'animation-timeline') return false;
+    const slide = loadedDeck.value?.slides[currentSlideIndex.value];
+    return !!slide?.timelineTracks;
+});
+
+// Template Tags example: edit engine.data and see slides update
+const templateProduct = ref('Lumina');
+const templateVersion = ref('2.0');
+const templateUser = ref('World');
+const showTemplateTagsUI = computed(() => {
+    const p = route.params.id;
+    const id = typeof p === 'string' ? p : (Array.isArray(p) && p[0] ? p[0] : '');
+    return id === 'layout-template-tags';
+});
+function onTemplateDataInput(key: string, value: string) {
+    engineRef.value?.data.set(key, value);
+}
+
+function onTimelineInput(e: Event) {
+    const t = e.target;
+    if (t instanceof HTMLInputElement) {
+        const v = parseFloat(t.value);
+        timelineProgress.value = v;
+        engineRef.value?.seekTo(v / 100);
+    }
+}
+
+function onTimelinePlay() {
+    if (timelinePlaying.value || !engineRef.value) return;
+    timelinePlaying.value = true;
+    const [promise, cancel] = engineRef.value.playTimeline(5);
+    timelineCancelRef.value = cancel;
+    timelineIntervalRef.value = setInterval(() => {
+        if (!engineRef.value) return;
+        const p = engineRef.value.timelineProgress;
+        timelineProgress.value = p * 100;
+        if (p >= 1) {
+            if (timelineIntervalRef.value) clearInterval(timelineIntervalRef.value);
+            timelineIntervalRef.value = null;
+            timelinePlaying.value = false;
+            timelineCancelRef.value = null;
+        }
+    }, 50);
+    promise.then(() => {
+        if (timelineIntervalRef.value) clearInterval(timelineIntervalRef.value);
+        timelineIntervalRef.value = null;
+        timelinePlaying.value = false;
+        timelineCancelRef.value = null;
+    });
+}
+
+const canEdit = computed(() => {
+    return user.value && deckAuthorId.value && user.value.uid === deckAuthorId.value;
+});
+
+const showDuplicateEdit = computed(() => {
+    const hasDuplicateParam = 'duplicate' in route.query;
+    return hasDuplicateParam && !canEdit.value && loadedDeck.value != null;
+});
+
+const editDeck = () => {
+    router.push({ name: 'studio', params: { id: route.params.id } });
+};
+
+async function duplicateAndEdit() {
+    if (!loadedDeck.value) return;
+    if (!user.value) {
+        showLoginModal.value = true;
+        loginError.value = '';
+        return;
+    }
+    duplicating.value = true;
+    try {
+        const { id: _id, authorId: _aid, authorName: _an, ...restMeta } = loadedDeck.value.meta || {};
+        const copyMeta = { ...restMeta, title: (loadedDeck.value.meta?.title || 'Presentation') + ' (Copy)' };
+        const copy: Deck = { meta: copyMeta, slides: loadedDeck.value.slides || [] };
+        const newId = await saveDeck(copy, user.value.uid, user.value.displayName || undefined);
+        router.push({ name: 'studio', params: { id: newId } });
+    } catch (e) {
+        console.error('Failed to duplicate deck:', e);
+        alert('Could not create a copy. Please try again.');
+    } finally {
+        duplicating.value = false;
+    }
+}
+
+async function onLoginAndDuplicate() {
+    loginError.value = '';
+    loginLoading.value = true;
+    try {
+        await loginWithGoogle();
+        showLoginModal.value = false;
+        await duplicateAndEdit();
+    } catch (e) {
+        const msg = e instanceof Error ? e.message : 'Sign-in failed. Please try again.';
+        loginError.value = msg;
+    } finally {
+        loginLoading.value = false;
+    }
+}
+
+onMounted(async () => {
+    try {
+        initFirebase();
+    } catch (e) { }
+
+        const p = route.params.id;
+        const deckId = typeof p === 'string' ? p : (Array.isArray(p) && p[0] ? p[0] : '');
+        if (!deckId) return;
+
+        try {
+            let deckData: Deck | null = null;
+            const isExample = deckId.startsWith('deck') || deckId.startsWith('layout') || deckId.startsWith('theme') || deckId.startsWith('animation');
+
+        if (isExample) {
+            const response = await fetch(`${import.meta.env.BASE_URL}${deckId}.json`);
+            deckData = (await response.json()) as Deck;
+        } else {
+            deckData = await getDeck(deckId);
+        }
+
+        if (deckData?.meta?.authorId) {
+            deckAuthorId.value = deckData.meta.authorId;
+        }
+        if (!deckData) throw new Error('Deck not found');
+
+        loadedDeck.value = deckData;
+
+        engine = new Lumina('#deck-container', {
+            loop: true,
+            studio: false,
+            debug: isExample,
+            navigation: true,
+            ui: {
+                visible: true,
+                showSlideCount: true,
+                showControls: true,
+                showProgressBar: true
+            },
+            theme: deckData.theme || 'default'
+        });
+        engineRef.value = engine;
+
+        if (deckId === 'layout-element-control') {
+            engine.on('ready', () => {
+                ['s0-tag', 's0-title', 's0-subtitle'].forEach((id, i) => {
+                    setTimeout(() => engine?.element(id).show(), (i + 1) * 700);
+                });
+            });
+            engine.on('slideChange', ({ index }) => {
+                if (index === 1) {
+                    ['s1-tag', 's1-title', 's1-subtitle'].forEach((id, i) => {
+                        setTimeout(() => engine?.element(id).show(), (i + 1) * 700);
+                    });
+                }
+            });
+        }
+
+        if (deckId === 'animation-timeline') {
+            engine.on('ready', () => {
+                engine?.seekTo(0);
+                timelineProgress.value = 0;
+                currentSlideIndex.value = 0;
+            });
+            engine.on('slideChange', ({ index }) => {
+                if (timelineIntervalRef.value) {
+                    clearInterval(timelineIntervalRef.value);
+                    timelineIntervalRef.value = null;
+                }
+                timelineCancelRef.value?.();
+                timelineCancelRef.value = null;
+                timelinePlaying.value = false;
+                currentSlideIndex.value = index;
+                engine?.seekTo(0, index);
+                timelineProgress.value = 0;
+            });
+        }
+
+        if (deckId === 'layout-template-tags') {
+            engine.data.set('product', templateProduct.value);
+            engine.data.set('version', templateVersion.value);
+            engine.data.set('user', templateUser.value);
+        }
+
+        engine.load(deckData);
+    } catch (error) {
+        console.error("Failed to load deck:", error);
+        alert("Failed to load presentation.");
+        router.push({ name: 'dashboard' });
+    }
+});
+
+onUnmounted(() => {
+    if (timelineIntervalRef.value) clearInterval(timelineIntervalRef.value);
+    timelineCancelRef.value?.();
+    if (engine) {
+        engine.destroy();
+    }
+    engineRef.value = null;
+});
+</script>