lumina-slides 9.0.4 → 9.0.6

package/src/components/site/SiteExamples.vue

@@ -1,66 +1,66 @@
-<template>
-    <div class="min-h-screen pt-32 px-8 max-w-7xl mx-auto pb-24">
-        <!-- Unified Header -->
-        <div class="text-center mb-16 max-w-3xl mx-auto">
-            <h1 class="text-4xl md:text-5xl font-black mb-4 tracking-tight text-white">Interactive Examples</h1>
-            <p class="text-lg text-white/50 leading-relaxed">Collection of templates and semantic layouts built with the
-                Lumina Engine.</p>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <div v-for="deck in decks" :key="deck.id"
-                class="group relative rounded-2xl overflow-hidden border border-white/10 bg-white/5 hover:border-blue-500/50 transition duration-500 cursor-pointer block"
-                @click="router.push({ name: 'deck', params: { id: deck.id } })">
-                <div
-                    class="aspect-video bg-gradient-to-br from-gray-800 to-black group-hover:scale-105 transition duration-700 flex items-center justify-center">
-                    <span class="text-4xl">{{ deck.icon }}</span>
-                </div>
-                <div class="p-6 relative z-10 bg-black/80 backdrop-blur-sm -mt-2">
-                    <h3 class="text-xl font-bold mb-2">{{ deck.title }}</h3>
-                    <p class="text-sm text-white/60 mb-4 h-10">{{ deck.description }}</p>
-                    <div
-                        class="flex items-center text-blue-400 text-sm font-bold uppercase tracking-wider group-hover:translate-x-2 transition">
-                        View Demo <span class="ml-2">→</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const decks = [
-    { id: 'deck', title: 'Feature Showcase', description: 'A comprehensive tour of all major features.', icon: '🚀' },
-    { id: 'layout-element-control', title: 'Element Control', description: 'Reveal-on-demand: elements start hidden and appear automatically.', icon: '🎭' },
-    { id: 'layout-template-tags', title: 'Template Tags', description: '{{key}} placeholders in slide content, resolved from engine.data. Updates reactively.', icon: '🏷️' },
-    { id: 'animation-presets', title: 'Animation: Presets', description: 'Built-in presets: fadeUp, scaleIn, spring. Use with animate() or revealInSequence.', icon: '✨' },
-    { id: 'animation-stagger', title: 'Animation: Stagger', description: 'Stagger modes: center-out, wave, random. Control order and timing.', icon: '〰️' },
-    { id: 'animation-timeline', title: 'Animation: Timeline', description: 'Remotion-style: scrub 0–1, keyframes per element, seekTo and playTimeline.', icon: '⏯️' },
-    { id: 'layout-statement', title: 'Statement Layout', description: 'Bold typography for impactful messages.', icon: '📢' },
-    { id: 'layout-half', title: 'Split Layout', description: 'Classic text and image pairing.', icon: '🌗' },
-    { id: 'layout-features', title: 'Feature Grid', description: 'Responsive grids for feature lists.', icon: '🍱' },
-    { id: 'layout-timeline', title: 'Timeline', description: 'Vertical chronological sequence.', icon: '⏱️' },
-    { id: 'layout-steps', title: 'Process Steps', description: 'Horizontal sequential flow.', icon: '👣' },
-    { id: 'layout-flex-demo', title: 'Flex Layout', description: 'Flow-based composition for LLMs.', icon: '🧬' },
-    { id: 'layout-video', title: 'Video & Media', description: 'Cinematic backgrounds and video elements.', icon: '🎬' },
-    { id: 'layout-chart', title: 'Chart Layout', description: 'Data visualization with Chart.js.', icon: '📊' },
-    { id: 'layout-custom', title: 'Custom HTML', description: 'Full control with raw HTML/CSS.', icon: '🎨' },
-    { id: 'layout-embedded', title: 'Embedded Widget', description: 'Container-sized, perfect for embedding.', icon: '🧩' },
-    { id: 'theme-default', title: 'Theme: Default', description: 'Clean blue on dark. Professional.', icon: '💎' },
-    { id: 'theme-ocean', title: 'Theme: Ocean', description: 'Cyan on slate. Calm and professional.', icon: '🌊' },
-    { id: 'theme-midnight', title: 'Theme: Midnight', description: 'Indigo on black. Bold and dramatic.', icon: '🌙' },
-    { id: 'theme-forest', title: 'Theme: Forest', description: 'Emerald greens for eco-friendly vibes.', icon: '🌲' },
-    { id: 'theme-cyber', title: 'Theme: Cyber', description: 'Neon pink futuristic with sci-fi fonts.', icon: '🤖' },
-    { id: 'theme-latte', title: 'Theme: Latte', description: 'Light mode with warm amber accents.', icon: '☕' },
-    { id: 'theme-sunset', title: 'Theme: Sunset', description: 'Orange to rose gradient warmth.', icon: '🌅' },
-    { id: 'theme-monochrome', title: 'Theme: Monochrome', description: 'Pure black and white elegance.', icon: '⚫' },
-    { id: 'theme-custom-example', title: 'Custom Theme', description: 'Full ThemeConfig with 80+ options.', icon: '🔧' },
-];
-
-
-defineEmits(['select-deck']);
-</script>
+<template>
+    <div class="min-h-screen pt-32 px-8 max-w-7xl mx-auto pb-24">
+        <!-- Unified Header -->
+        <div class="text-center mb-16 max-w-3xl mx-auto">
+            <h1 class="text-4xl md:text-5xl font-black mb-4 tracking-tight text-white">Interactive Examples</h1>
+            <p class="text-lg text-white/50 leading-relaxed">Collection of templates and semantic layouts built with the
+                Lumina Engine.</p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div v-for="deck in decks" :key="deck.id"
+                class="group relative rounded-2xl overflow-hidden border border-white/10 bg-white/5 hover:border-blue-500/50 transition duration-500 cursor-pointer block"
+                @click="router.push({ name: 'deck', params: { id: deck.id } })">
+                <div
+                    class="aspect-video bg-gradient-to-br from-gray-800 to-black group-hover:scale-105 transition duration-700 flex items-center justify-center">
+                    <span class="text-4xl">{{ deck.icon }}</span>
+                </div>
+                <div class="p-6 relative z-10 bg-black/80 backdrop-blur-sm -mt-2">
+                    <h3 class="text-xl font-bold mb-2">{{ deck.title }}</h3>
+                    <p class="text-sm text-white/60 mb-4 h-10">{{ deck.description }}</p>
+                    <div
+                        class="flex items-center text-blue-400 text-sm font-bold uppercase tracking-wider group-hover:translate-x-2 transition">
+                        View Demo <span class="ml-2">→</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const decks = [
+    { id: 'deck', title: 'Feature Showcase', description: 'A comprehensive tour of all major features. Elements cascade-reveal by default on every slide enter.', icon: '🚀' },
+    { id: 'layout-element-control', title: 'Element Control', description: 'Default cascade on enter. Override with elementControl.defaultVisible, slide.reveal, or meta.initialElementState.', icon: '🎭' },
+    { id: 'layout-template-tags', title: 'Template Tags', description: '{{key}} placeholders in slide content, resolved from engine.data. Updates reactively.', icon: '🏷️' },
+    { id: 'animation-presets', title: 'Animation: Presets', description: 'Built-in presets: fadeUp, scaleIn, spring. Use with slide.reveal or element().animate().', icon: '✨' },
+    { id: 'animation-stagger', title: 'Animation: Stagger', description: 'Stagger modes: center-out, wave, random. Configure via slide.reveal or meta.reveal.', icon: '〰️' },
+    { id: 'animation-timeline', title: 'Animation: Timeline', description: 'Remotion-style: scrub 0–1, keyframes per element, seekTo and playTimeline. Opts out of cascade.', icon: '⏯️' },
+    { id: 'layout-statement', title: 'Statement Layout', description: 'Bold typography. Elements cascade-reveal on enter; reset and replay when returning.', icon: '📢' },
+    { id: 'layout-half', title: 'Split Layout', description: 'Classic text and image pairing. Cascade on enter.', icon: '🌗' },
+    { id: 'layout-features', title: 'Feature Grid', description: 'Responsive grids for feature lists. Cascade on enter.', icon: '🍱' },
+    { id: 'layout-timeline', title: 'Timeline', description: 'Vertical chronological sequence with cascade on enter.', icon: '⏱️' },
+    { id: 'layout-steps', title: 'Process Steps', description: 'Horizontal sequential flow with cascade on enter.', icon: '👣' },
+    { id: 'layout-flex-demo', title: 'Flex Layout', description: 'Flow-based composition for LLMs. Cascade on enter.', icon: '🧬' },
+    { id: 'layout-video', title: 'Video & Media', description: 'Cinematic backgrounds and video elements.', icon: '🎬' },
+    { id: 'layout-chart', title: 'Chart Layout', description: 'Data visualization with Chart.js.', icon: '📊' },
+    { id: 'layout-custom', title: 'Custom HTML', description: 'Full control with raw HTML/CSS.', icon: '🎨' },
+    { id: 'layout-embedded', title: 'Embedded Widget', description: 'Container-sized, perfect for embedding.', icon: '🧩' },
+    { id: 'theme-default', title: 'Theme: Default', description: 'Clean blue on dark. Professional.', icon: '💎' },
+    { id: 'theme-ocean', title: 'Theme: Ocean', description: 'Cyan on slate. Calm and professional.', icon: '🌊' },
+    { id: 'theme-midnight', title: 'Theme: Midnight', description: 'Indigo on black. Bold and dramatic.', icon: '🌙' },
+    { id: 'theme-forest', title: 'Theme: Forest', description: 'Emerald greens for eco-friendly vibes.', icon: '🌲' },
+    { id: 'theme-cyber', title: 'Theme: Cyber', description: 'Neon pink futuristic with sci-fi fonts.', icon: '🤖' },
+    { id: 'theme-latte', title: 'Theme: Latte', description: 'Light mode with warm amber accents.', icon: '☕' },
+    { id: 'theme-sunset', title: 'Theme: Sunset', description: 'Orange to rose gradient warmth.', icon: '🌅' },
+    { id: 'theme-monochrome', title: 'Theme: Monochrome', description: 'Pure black and white elegance.', icon: '⚫' },
+    { id: 'theme-custom-example', title: 'Custom Theme', description: 'Full ThemeConfig with 80+ options.', icon: '🔧' },
+];
+
+
+defineEmits(['select-deck']);
+</script>

package/src/components/studio/EditorLayoutChart.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="w-full h-full">
+        <EditorNode :path="`slides.${slideIndex}`" :label="data.type" class="w-full h-full">
+            <LayoutChart :data="data" />
+        </EditorNode>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { SlideChart } from '../../core/types';
+import EditorNode from './EditorNode.vue';
+import LayoutChart from '../layouts/LayoutChart.vue';
+
+defineProps<{
+    data: SlideChart;
+    slideIndex: number;
+}>();
+</script>

package/src/components/studio/EditorLayoutCustom.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="w-full h-full">
+        <EditorNode :path="`slides.${slideIndex}`" :label="data.type" class="w-full h-full">
+            <LayoutCustom :data="data" />
+        </EditorNode>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { SlideCustom } from '../../core/types';
+import EditorNode from './EditorNode.vue';
+import LayoutCustom from '../layouts/LayoutCustom.vue';
+
+defineProps<{
+    data: SlideCustom;
+    slideIndex: number;
+}>();
+</script>

package/src/components/studio/EditorLayoutVideo.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="w-full h-full">
+        <EditorNode :path="`slides.${slideIndex}`" :label="data.type" class="w-full h-full">
+            <LayoutVideo :data="data" />
+        </EditorNode>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { SlideVideo } from '../../core/types';
+import EditorNode from './EditorNode.vue';
+import LayoutVideo from '../layouts/LayoutVideo.vue';
+
+defineProps<{
+    data: SlideVideo;
+    slideIndex: number;
+}>();
+</script>

package/src/components/studio/LuminaStudioEmbed.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="flex flex-col w-full h-screen bg-black text-white font-sans overflow-hidden">
+        <StudioToolbar :embed-mode="true" @save="onSave" />
+        <div class="flex flex-1 overflow-hidden relative">
+            <StudioSidebar />
+            <EditorCanvas />
+            <div class="w-72 bg-[#111] border-l border-[#333] flex flex-col">
+                <StudioInspector />
+            </div>
+            <SlideNavigator />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { provide, watch, onMounted } from 'vue';
+import { createStore, StoreKey } from '../../core/store';
+import { createEditor, EditorKey } from '../../composables/useEditor';
+import type { Deck } from '../../core/types';
+import StudioToolbar from './StudioToolbar.vue';
+import StudioSidebar from './StudioSidebar.vue';
+import StudioInspector from './StudioInspector.vue';
+import EditorCanvas from './EditorCanvas.vue';
+import SlideNavigator from './SlideNavigator.vue';
+
+const DEFAULT_DECK: Deck = {
+    meta: { title: 'Untitled' },
+    slides: [{ type: 'statement', title: 'New Slide', subtitle: '' }]
+};
+
+const props = withDefaults(
+    defineProps<{ deck?: Deck | null }>(),
+    { deck: undefined }
+);
+
+const emit = defineEmits<{ save: [deck: Deck] }>();
+
+const store = createStore({ studio: true });
+provide(StoreKey, store);
+
+const editor = createEditor(store);
+provide(EditorKey, editor);
+
+function loadInitial() {
+    const payload = props.deck ?? DEFAULT_DECK;
+    if (payload && Array.isArray((payload as Deck).slides)) {
+        store.loadDeck(payload as Deck);
+    } else {
+        store.loadDeck(DEFAULT_DECK);
+    }
+}
+
+onMounted(loadInitial);
+
+watch(
+    () => props.deck,
+    (newDeck) => {
+        if (newDeck && Array.isArray(newDeck.slides)) {
+            store.loadDeck(newDeck);
+        }
+    },
+    { deep: true }
+);
+
+function onSave(deck: Deck) {
+    emit('save', deck);
+}
+</script>

package/src/components/studio/StudioEmbedRoot.vue

@@ -0,0 +1,19 @@
+<template>
+    <LuminaStudioEmbed :deck="deckRef" @save="onSave" />
+</template>
+
+<script setup lang="ts">
+import type { Ref } from 'vue';
+import { bus } from '../../core/events';
+import type { Deck } from '../../core/types';
+import LuminaStudioEmbed from './LuminaStudioEmbed.vue';
+
+defineProps<{
+    /** Ref to the current deck; engine.load() updates this. */
+    deckRef: Ref<Deck | null> | Deck | null;
+}>();
+
+function onSave(deck: Deck) {
+    bus.emit('save', deck);
+}
+</script>