lumina-slides 8.9.4 → 9.0.0

package/src/components/LuminaDeck.vue

@@ -0,0 +1,224 @@
+<template>
+    <div class="h-full w-full relative flex flex-col text-white overflow-hidden" data-lumina-root
+        style="background-color: var(--lumina-colors-background, #030303); color: var(--lumina-colors-text, #ffffff);">
+
+        <!-- DYNAMIC BACKGROUND -->
+        <LuminaBackground :orb-color="slide?.meta?.orbColor" :orb-pos="orbPosition" />
+
+        <!-- INSPECTOR TOGGLE -->
+        <div v-if="isDebug" class="absolute top-0 right-0 p-6 z-50 flex gap-4 pointer-events-auto">
+            <button @click="ui.showJson = !ui.showJson"
+                class="w-8 h-8 rounded-full glass-panel flex items-center justify-center text-gray-400 hover:text-white transition"
+                title="JSON"><i class="ph-thin ph-code text-xs"></i></button>
+        </div>
+
+        <!-- JSON INSPECTOR -->
+        <transition name="fade">
+            <div v-if="ui.showJson" class="fixed inset-0 z-[100] flex justify-end" @click.self="ui.showJson = false">
+                <!-- Backdrop -->
+                <div class="absolute inset-0 bg-black/20 backdrop-blur-sm transition-opacity"
+                    @click="ui.showJson = false">
+                </div>
+
+                <!-- Panel -->
+                <div
+                    class="relative h-full w-full md:w-[450px] bg-[#0a0a0a]/95 border-l border-white/10 shadow-2xl overflow-auto text-left flex flex-col transform transition-transform duration-300">
+
+                    <!-- Header -->
+                    <div class="p-6 pb-2 border-b border-white/5 flex items-center justify-between shrink-0">
+                        <span class="text-xs font-bold text-gray-400 uppercase tracking-widest">Slide Data</span>
+                        <button @click="ui.showJson = false"
+                            class="w-8 h-8 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center text-white/50 hover:text-white transition">
+                            <i class="ph-thin ph-x"></i>
+                        </button>
+                    </div>
+
+                    <!-- Content -->
+                    <div class="p-6">
+                        <pre
+                            class="text-[10px] font-mono text-green-400 whitespace-pre-wrap">{{ JSON.stringify(slide, null, 2) }}</pre>
+                    </div>
+                </div>
+            </div>
+        </transition>
+
+        <!-- VIEWPORT -->
+        <main ref="viewport" class="flex-1 min-h-0 w-full relative overflow-y-auto overflow-x-hidden z-10 scroll-smooth touch-pan-y pb-24 md:pb-0"
+            @touchstart="onTouchStart" @touchend="onTouchEnd">
+            <transition :css="false" @leave="onLeave" @enter="onEnter" mode="out-in">
+                <component v-if="currentSlideComponent" :is="currentSlideComponent" :key="index" :data="slide"
+                    :slide-index="index" @action="handleAction" class="min-h-full w-full">
+                </component>
+            </transition>
+        </main>
+
+        <!-- NAV BAR: fixed on mobile so controls stay visible (container can exceed 100vh); absolute on md+ -->
+        <div v-if="uiOptions?.visible"
+            class="fixed md:absolute bottom-0 left-0 right-0 w-full z-40 px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))] bg-gradient-to-t from-black/60 via-black/20 to-transparent flex justify-between items-end pointer-events-none">
+            <div v-if="uiOptions?.showSlideCount" class="pointer-events-auto text-left">
+                <h2 class="text-[10px] font-bold tracking-[0.2em] uppercase mb-1"
+                    :style="{ color: 'var(--lumina-color-muted)' }">{{ deckTitle }}</h2>
+                <div class="flex items-center gap-2 text-sm font-mono"
+                    :style="{ color: 'var(--lumina-color-text-safe, var(--lumina-color-text))', opacity: 0.8 }">
+                    <span>{{ (index + 1).toString().padStart(2, '0') }}</span>
+                    <div v-if="uiOptions?.showProgressBar" class="h-px w-8"
+                        :style="{ backgroundColor: 'var(--lumina-color-text-safe, var(--lumina-color-text))', opacity: 0.3 }">
+                    </div>
+                    <span>{{ total.toString().padStart(2, '0') }}</span>
+                </div>
+            </div>
+            <!-- Spacer if count hidden -->
+            <div v-else class="flex-1"></div>
+
+            <div v-if="uiOptions?.showControls" class="pointer-events-auto flex gap-3">
+                <!-- Notes Toggle (Sync Window) -->
+                <button v-if="slide?.notes" @click="openSpeakerNotes"
+                    class="w-12 h-12 rounded-full glass-panel hover:bg-white/10 flex items-center justify-center transition active:scale-95"
+                    title="Open Speaker View">
+                    <i class="ph-thin ph-presentation text-sm text-gray-400 hover:text-white"></i>
+                </button>
+
+                <button @click="prev"
+                    :class="['w-12 h-12 rounded-full glass-panel hover:bg-white/10 flex items-center justify-center transition active:scale-95', (!hasPrev || !isNavEnabled) ? 'opacity-30 cursor-not-allowed' : '']"
+                    :disabled="!hasPrev || !isNavEnabled"><i class="ph-thin ph-arrow-left"></i></button>
+                <button @click="next"
+                    :class="['w-12 h-12 rounded-full bg-white text-black hover:scale-105 flex items-center justify-center transition shadow-lg active:scale-95', (!hasNext || !isNavEnabled) ? 'opacity-30 cursor-not-allowed' : '']"
+                    :disabled="!hasNext || !isNavEnabled"><i class="ph-thin ph-arrow-right"></i></button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, inject } from 'vue';
+import { useLumina } from '../composables/useLumina';
+import { useKeyboard } from '../composables/useKeyboard';
+import { useSwipeNav } from '../composables/useSwipeNav';
+import { bus } from '../core/events';
+import gsap from 'gsap';
+import { StoreKey } from '../core/store';
+import { resolveTransitionConfig } from '../core/animationConfig';
+import LuminaBackground from './parts/LuminaBackground.vue';
+
+// Composable Integration
+const { slide, index, total, next, prev, options } = useLumina();
+
+const viewport = ref<HTMLElement | null>(null);
+
+const store = inject(StoreKey)!;
+
+const hasNext = computed(() => store.hasNext());
+const hasPrev = computed(() => store.hasPrev());
+const deckTitle = computed(() => store.state.deck?.meta?.title);
+const uiOptions = computed(() => store.state.options.ui);
+const isNavEnabled = computed(() => store.state.options.navigation);
+
+useKeyboard();
+const { onTouchStart, onTouchEnd } = useSwipeNav();
+
+// Random orb position state
+const currentOrbPosition = ref({ top: '-20%', left: '-10%' });
+
+// Function to generate random orb position
+const generateRandomOrbPosition = () => {
+    // Generate true random positions within a safe range to keep the 80vw orb visible
+    // Range: -20% to 60% provides good coverage without losing the orb
+    const randomRange = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min);
+
+    return {
+        top: `${randomRange(-25, 65)}%`,
+        left: `${randomRange(-25, 65)}%`
+    };
+};
+
+// Watch for slide index changes to update orb position
+watch(index, (newIndex, oldIndex) => {
+    // First slide (index 0) keeps default position
+    if (newIndex === 0) {
+        currentOrbPosition.value = { top: '-20%', left: '-10%' };
+    } else if (oldIndex !== undefined) {
+        // Only randomize when actually navigating between slides (not on initial load)
+        currentOrbPosition.value = generateRandomOrbPosition();
+    }
+
+    // Reset scroll position
+    if (viewport.value) {
+        viewport.value.scrollTop = 0;
+    }
+}, { immediate: true });
+
+const ui = ref({ showJson: false }); // Removed showNotes
+const engine = inject('LuminaEngine') as any;
+
+const openSpeakerNotes = () => {
+    if (engine && typeof engine.openSpeakerNotes === 'function') {
+        engine.openSpeakerNotes();
+    } else {
+        console.warn('Lumina Engine not found or openSpeakerNotes not available');
+        alert('Speaker notes require the full Lumina Engine environment.');
+    }
+};
+
+const isDebug = computed(() => options.debug);
+
+const currentSlideComponent = computed(() => {
+    if (!slide.value || !slide.value.type) return null;
+    return `layout-${slide.value.type}`;
+});
+
+const orbPosition = computed(() => ({
+    top: slide.value?.meta?.orbPos?.top || currentOrbPosition.value.top,
+    left: slide.value?.meta?.orbPos?.left || currentOrbPosition.value.left,
+}));
+
+const handleAction = (payload: any) => {
+    bus.emit('action', payload);
+};
+
+
+
+// --- Viewport Transitions ---
+const onEnter = (el: Element, done: () => void) => {
+    const element = el as HTMLElement;
+    const vm = (el as any).__vue_app__ || (el as any).__vue_parent__ || (el as any)?.__vueParentComponent?.proxy;
+
+    // Set initial opacity to 1 so the slide container is visible
+    element.style.opacity = '1';
+
+    // Trigger internal content animations
+    if (vm && typeof vm.animateIn === 'function') {
+        vm.animateIn();
+    }
+
+    done();
+};
+
+const onLeave = async (el: Element, done: () => void) => {
+    const cfg = resolveTransitionConfig(store, undefined);
+    if (cfg.enabled === false) {
+        done();
+        return;
+    }
+
+    const vm = (el as any).__vue_app__ || (el as any).__vue_parent__ || (el as any)?.__vueParentComponent?.proxy;
+    if (vm && typeof vm.animateOut === 'function') {
+        await vm.animateOut();
+    }
+
+    const { durationOut, easeOut, type } = cfg;
+    const tl = gsap.timeline({ onComplete: done });
+
+    if (type === 'fade') {
+        tl.to(el, { opacity: 0, duration: durationOut });
+    } else if (type === 'zoom') {
+        tl.to(el, { opacity: 0, scale: 0.95, filter: 'blur(10px)', duration: durationOut });
+    } else {
+        tl.to(el, {
+            opacity: 0,
+            y: -30,
+            duration: durationOut,
+            ease: easeOut
+        });
+    }
+};
+</script>