lumina-slides 9.0.5 → 9.0.7

package/src/components/LuminaDeck.vue

@@ -1,232 +1,237 @@
-<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="interpolatedSlide ?? 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 v-if="isNavEnabled" @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 ? 'opacity-30 cursor-not-allowed' : '']"
-                    :disabled="!hasPrev"><i class="ph-thin ph-arrow-left"></i></button>
-                <button v-if="isNavEnabled" @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 ? 'opacity-30 cursor-not-allowed' : '']"
-                    :disabled="!hasNext"><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 { interpolateObject } from '../utils/templateInterpolation';
-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}`;
-});
-
-/** Slide data with {{tag}} placeholders resolved from store.userData (engine.data). Updates reactively when userData changes. */
-const interpolatedSlide = computed(() => {
-    const s = slide.value;
-    if (s == null) return null;
-    return interpolateObject(s, store.state.userData);
-});
-
-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>
+<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="interpolatedSlide ?? 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 v-if="isNavEnabled" @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 ? 'opacity-30 cursor-not-allowed' : '']"
+                    :disabled="!hasPrev"><i class="ph-thin ph-arrow-left"></i></button>
+                <button v-if="isNavEnabled" @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 ? 'opacity-30 cursor-not-allowed' : '']"
+                    :disabled="!hasNext"><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 { interpolateObject } from '../utils/templateInterpolation';
+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}`;
+});
+
+/** Slide data with {{tag}} placeholders resolved from store.userData (engine.data). Updates reactively when userData changes. */
+const interpolatedSlide = computed(() => {
+    const s = slide.value;
+    if (s == null) return null;
+    return interpolateObject(s, store.state.userData);
+});
+
+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();
+    }
+
+    // Run reveal cascade once the slide is mounted (elements exist in DOM)
+    if (engine && typeof engine.runRevealForSlideIfNeeded === 'function') {
+        engine.runRevealForSlideIfNeeded(store.state.currentIndex);
+    }
+
+    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>

package/src/components/base/LuminaElement.vue

@@ -58,6 +58,8 @@ const propClass = computed(() => {
 
 const mergedStyle = computed(() => {
   const resolved = unref(state.style) ?? {};
+  // State (opacity, transform from element control) must override props for visibility.
+  // Props provide layout styles (display, position, sizing); state provides opacity/transform.
   const out = { ...(props.style || {}), ...resolved };
   if ('opacity' in resolved && out.transition == null) {
     out.transition = 'opacity var(--lumina-element-opacity-transition, 0.35s ease-out)';