lumina-slides 8.9.4 → 9.0.0

package/src/components/studio/StudioJsonEditor.vue

@@ -0,0 +1,191 @@
+<template>
+    <div v-if="isOpen" class="fixed inset-0 z-[60] flex items-center justify-center p-4">
+        <!-- Backdrop -->
+        <div class="absolute inset-0 bg-black/80 backdrop-blur-md transition-opacity" @click="$emit('close')"></div>
+
+        <!-- Modal -->
+        <div
+            class="relative w-full max-w-4xl h-[80vh] bg-[#1a1a1a] border border-[#333] rounded-2xl shadow-2xl flex flex-col overflow-hidden transform transition-all animate-in fade-in zoom-in-95 duration-200">
+
+            <!-- Header -->
+            <div class="px-6 py-4 border-b border-[#333] flex items-center justify-between bg-[#222]">
+                <div class="flex items-center gap-4">
+                    <div class="flex items-center gap-2">
+                        <i class="ph-thin ph-code text-blue-400 text-lg"></i>
+                        <h2 class="text-lg font-bold text-white tracking-wide">JSON EDITOR</h2>
+                    </div>
+
+                    <!-- Mode Switcher -->
+                    <div class="flex bg-black/40 p-1 rounded-lg border border-white/5">
+                        <button @click="mode = 'slide'"
+                            :class="['px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded-md transition-all',
+                                mode === 'slide' ? 'bg-blue-600 text-white shadow-lg' : 'text-white/40 hover:text-white']">
+                            Current Slide
+                        </button>
+                        <button @click="mode = 'deck'"
+                            :class="['px-3 py-1 text-[10px] font-bold uppercase tracking-wider rounded-md transition-all',
+                                mode === 'deck' ? 'bg-blue-600 text-white shadow-lg' : 'text-white/40 hover:text-white']">
+                            Full Deck
+                        </button>
+                    </div>
+                </div>
+
+                <div class="flex items-center gap-3">
+                    <span v-if="error"
+                        class="text-red-400 text-[10px] font-mono animate-pulse bg-red-400/10 px-2 py-1 rounded">
+                        <i class="ph-thin ph-warning mr-1"></i> {{ error }}
+                    </span>
+                    <button @click="$emit('close')" class="text-white/40 hover:text-white transition-colors p-1">
+                        <i class="ph-thin ph-x text-xl"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Content Area -->
+            <div class="flex-1 flex overflow-hidden relative">
+                <!-- Line Numbers (Simulated) -->
+                <div
+                    class="w-12 bg-black/20 border-r border-[#333] flex flex-col items-center py-4 text-[10px] font-mono text-white/20 select-none">
+                    <div v-for="n in lineCount" :key="n" class="leading-relaxed h-5">{{ n }}</div>
+                </div>
+
+                <!-- Textarea -->
+                <div class="flex-1 relative group">
+                    <textarea ref="textareaRef" v-model="jsonContent" spellcheck="false"
+                        class="w-full h-full bg-transparent p-4 text-[13px] font-mono text-blue-100/90 leading-relaxed outline-none resize-none selection:bg-blue-500/30"
+                        @input="validateJson" placeholder="{ ... }"></textarea>
+                </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="px-6 py-4 border-t border-[#333] flex items-center justify-between bg-[#222]">
+                <div class="text-[10px] text-white/30 font-mono">
+                    <i class="ph-thin ph-info mr-1"></i>
+                    Changes are applied to the local store only. Remember to SAVE to the cloud.
+                </div>
+
+                <div class="flex items-center gap-3">
+                    <button @click="$emit('close')"
+                        class="px-5 py-2 text-sm font-medium text-white/60 hover:text-white hover:bg-white/5 rounded-lg transition-all">
+                        Cancel
+                    </button>
+                    <button @click="handleApply" :disabled="!!error || !isDirty"
+                        class="px-6 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-blue-900 disabled:opacity-50 text-white text-sm font-bold rounded-lg shadow-lg shadow-blue-900/20 transition-all flex items-center gap-2 active:scale-95">
+                        <i class="ph-thin ph-check"></i>
+                        APPLY CHANGES
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { useEditor } from '../../composables/useEditor';
+
+const props = defineProps<{
+    isOpen: boolean;
+}>();
+
+const emit = defineEmits(['close']);
+
+const editor = useEditor();
+const mode = ref<'slide' | 'deck'>('slide');
+const jsonContent = ref('');
+const error = ref<string | null>(null);
+const isDirty = ref(false);
+const textareaRef = ref<HTMLTextAreaElement | null>(null);
+
+// Get initial content
+const refreshContent = () => {
+    try {
+        if (mode.value === 'slide') {
+            const index = editor.store.state.currentIndex;
+            const slide = editor.store.state.deck?.slides[index];
+            jsonContent.value = slide ? JSON.stringify(slide, null, 4) : '';
+        } else {
+            jsonContent.value = JSON.stringify(editor.store.state.deck, null, 4);
+        }
+        error.value = null;
+        isDirty.value = false;
+    } catch (e) {
+        console.error('Failed to stringify JSON', e);
+    }
+};
+
+// Auto-refresh when opening or switching mode
+watch(() => props.isOpen, (open) => {
+    if (open) refreshContent();
+});
+
+watch(mode, refreshContent);
+
+const lineCount = computed(() => {
+    return jsonContent.value.split('\n').length;
+});
+
+const validateJson = () => {
+    isDirty.value = true;
+    try {
+        JSON.parse(jsonContent.value);
+        error.value = null;
+    } catch (e: any) {
+        error.value = e.message;
+    }
+};
+
+const handleApply = () => {
+    try {
+        const parsed = JSON.parse(jsonContent.value);
+
+        if (mode.value === 'slide') {
+            const index = editor.store.state.currentIndex;
+            editor.store.updateNode(`slides.${index}`, parsed);
+        } else {
+            editor.store.updateNode('', parsed);
+        }
+
+        // editor.commit(); // Handled by watch
+        isDirty.value = false;
+        emit('close');
+    } catch (e: any) {
+        error.value = "Invalid JSON: " + e.message;
+    }
+};
+</script>
+
+<style scoped>
+.animate-in {
+    animation: enter 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes enter {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.98);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
+textarea::-webkit-scrollbar {
+    width: 8px;
+}
+
+textarea::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+textarea::-webkit-scrollbar-thumb {
+    background: #333;
+    border-radius: 4px;
+}
+
+textarea::-webkit-scrollbar-thumb:hover {
+    background: #444;
+}
+</style>

package/src/components/studio/StudioLayers.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="flex flex-col h-full text-xs">
+        <!-- Header -->
+        <div
+            class="px-3 py-2 font-bold text-white/50 uppercase tracking-wider border-b border-[#333] flex items-center justify-between">
+            <span>Elements</span>
+            <span class="text-white/30 font-mono">Slide {{ currentSlideIndex + 1 }}</span>
+        </div>
+
+        <!-- Layer Tree -->
+        <div class="flex-1 overflow-y-auto p-2">
+            <template v-if="currentSlide">
+                <LayerItem :data="currentSlide" :path="`slides.${currentSlideIndex}`" />
+            </template>
+            <div v-else class="text-white/30 italic text-center mt-4">
+                No slide selected
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { useEditor } from '../../composables/useEditor';
+import LayerItem from './LayerItem.vue';
+
+const editor = useEditor();
+
+const slides = computed(() => editor.store.state.deck?.slides || []);
+const totalSlides = computed(() => slides.value.length);
+const currentSlideIndex = computed(() => editor.store.state.currentIndex);
+const currentSlide = computed(() => slides.value[currentSlideIndex.value]);
+
+const selectedLayout = ref('flex');
+
+const availableLayouts = [
+    { value: 'flex', label: 'Flex (Free Layout)' },
+    { value: 'statement', label: 'Statement' },
+    { value: 'half', label: 'Half (Image + Content)' },
+    { value: 'features', label: 'Features Grid' },
+    { value: 'timeline', label: 'Timeline' },
+    { value: 'steps', label: 'Steps' },
+];
+
+const goToSlide = (index: number) => {
+    editor.store.goto(index);
+};
+
+// CORRECT templates matching actual type definitions
+const slideTemplates: Record<string, any> = {
+    'flex': {
+        type: 'flex',
+        direction: 'horizontal',
+        gap: 'md',
+        padding: 'lg',
+        elements: [
+            {
+                type: 'content',
+                size: 'half',
+                halign: 'left',
+                valign: 'center',
+                elements: [
+                    { type: 'title', text: 'New Slide', size: 'xl' },
+                    { type: 'text', text: 'Start editing your content here.' }
+                ]
+            },
+            {
+                type: 'image',
+                size: 'half',
+                src: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=800',
+                alt: 'Placeholder image',
+                fill: true,
+                rounded: 'lg'
+            }
+        ]
+    },
+    'statement': {
+        type: 'statement',
+        tag: 'Tagline',
+        title: 'Big Statement Here',
+        subtitle: 'Supporting description text goes below the main statement.'
+    },
+    'half': {
+        type: 'half',
+        imageSide: 'right',
+        image: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=800',
+        tag: 'Category',
+        title: 'Split Layout Title',
+        paragraphs: [
+            'First paragraph of content.',
+            'Second paragraph with more details.'
+        ],
+        cta: 'Learn More'
+    },
+    'features': {
+        type: 'features',
+        title: 'Key Features',
+        description: 'Discover what makes us different.',
+        features: [
+            { icon: 'star', title: 'Feature One', desc: 'Description of the first feature.' },
+            { icon: 'rocket', title: 'Feature Two', desc: 'Description of the second feature.' },
+            { icon: 'lightning', title: 'Feature Three', desc: 'Description of the third feature.' }
+        ]
+    },
+    'timeline': {
+        type: 'timeline',
+        title: 'Our Journey',
+        subtitle: 'Key milestones in our history.',
+        timeline: [
+            { date: '2020', title: 'Founded', description: 'Company was established.' },
+            { date: '2022', title: 'Growth', description: 'Expanded to new markets.' },
+            { date: '2024', title: 'Today', description: 'Serving customers worldwide.' }
+        ]
+    },
+    'steps': {
+        type: 'steps',
+        title: 'How It Works',
+        subtitle: 'Simple steps to get started.',
+        steps: [
+            { step: '1', title: 'Step One', description: 'First thing to do.' },
+            { step: '2', title: 'Step Two', description: 'Second thing to do.' },
+            { step: '3', title: 'Step Three', description: 'Final step.' }
+        ]
+    }
+};
+
+const addSlide = () => {
+    const template = slideTemplates[selectedLayout.value] || slideTemplates['flex'];
+    const newSlide = JSON.parse(JSON.stringify(template));
+
+    // Get current slides array and add new slide
+    const currentSlides = [...(editor.store.state.deck?.slides || [])];
+    currentSlides.push(newSlide);
+
+    // Update via patchDeck for proper reactivity 
+    editor.store.patchDeck({ slides: currentSlides });
+    editor.commit();
+
+    // Navigate to the new slide after a small delay
+    const newIndex = currentSlides.length - 1;
+    setTimeout(() => {
+        editor.store.goto(newIndex);
+    }, 50);
+};
+</script>