lumina-slides 8.9.4 → 9.0.0

package/src/components/studio/EditorCanvas.vue

@@ -0,0 +1,326 @@
+<template>
+    <div ref="canvasContainer"
+        class="flex-1 bg-[#050505] overflow-hidden flex items-center justify-center relative transition-cursor duration-150"
+        :class="{
+            'cursor-grab': !isPanning && isSpacePressed,
+            'cursor-grabbing': isPanning,
+            'cursor-default': !isPanning && !isSpacePressed
+        }" @wheel="handleWheel" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
+        @mouseleave="handleMouseUp">
+
+        <!-- Zoom Controls -->
+        <div
+            class="absolute top-4 right-4 z-50 flex items-center gap-2 bg-black/60 backdrop-blur-md rounded-lg px-3 py-2 border border-white/10">
+            <button @click="zoomOut"
+                class="w-6 h-6 flex items-center justify-center text-white/70 hover:text-white transition">
+                <i class="ph-thin ph-minus text-xs"></i>
+            </button>
+            <span class="text-white/70 text-xs font-mono w-12 text-center">{{ Math.round(scale * 100) }}%</span>
+            <button @click="zoomIn"
+                class="w-6 h-6 flex items-center justify-center text-white/70 hover:text-white transition">
+                <i class="ph-thin ph-plus text-xs"></i>
+            </button>
+            <button @click="resetZoom"
+                class="w-6 h-6 flex items-center justify-center text-white/70 hover:text-white transition ml-2"
+                title="Reset Zoom">
+                <i class="ph-thin ph-arrows-out-simple text-xs"></i>
+            </button>
+        </div>
+
+        <!-- Pan Indicator -->
+        <div v-if="isPanning" class="absolute top-4 left-4 z-50 bg-blue-500/80 text-white text-xs px-2 py-1 rounded">
+            Panning
+        </div>
+
+        <!-- Zoomable/Pannable Canvas Wrapper -->
+        <div class="canvas-transform-wrapper" :style="transformStyle">
+            <!-- Slide Container - Matches LuminaDeck exactly -->
+            <!-- Slide Container - Fixed Frame with Background -->
+            <div class="w-[1280px] h-[720px] shadow-2xl relative border border-[#333] overflow-hidden"
+                :style="slideContainerStyle" @click.stop="selectSlide">
+
+                <!-- DYNAMIC BACKGROUND (Fixed layer) -->
+                <div class="absolute inset-0 z-0 pointer-events-none">
+                    <LuminaBackground :orb-color="slide?.meta?.orbColor" :orb-pos="orbPosition" />
+                </div>
+
+                <!-- SCROLLABLE CONTENT (Overlay layer) -->
+                <div class="absolute inset-0 z-10 overflow-y-auto overflow-x-hidden scroll-smooth">
+                    <div class="relative min-h-full w-full">
+                        <template v-if="slide">
+                            <!-- Free Layouts -->
+                            <EditorLayoutFlex v-if="slide.type === 'flex'" :data="(slide as any)"
+                                :slide-index="index" />
+
+                            <!-- Fixed Layouts with specialized editors -->
+                            <EditorLayoutSteps v-else-if="slide.type === 'steps'" :data="(slide as any)"
+                                :slide-index="index" />
+                            <EditorLayoutTimeline v-else-if="slide.type === 'timeline'" :data="(slide as any)"
+                                :slide-index="index" />
+                            <EditorLayoutFeatures v-else-if="slide.type === 'features'" :data="(slide as any)"
+                                :slide-index="index" />
+                            <EditorLayoutHalf v-else-if="slide.type === 'half'" :data="(slide as any)"
+                                :slide-index="index" />
+                            <EditorLayoutStatement v-else-if="slide.type === 'statement'" :data="(slide as any)"
+                                :slide-index="index" />
+
+                            <!-- Fallback for other layouts -->
+                            <EditorLayoutFixed v-else :data="(slide as any)" :slide-index="index" />
+                        </template>
+
+                        <div v-else class="flex w-full h-[720px] items-center justify-center text-white/30">
+                            No slide selected
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject, watch, onMounted } from 'vue';
+import { useLumina } from '../../composables/useLumina';
+import { StoreKey } from '../../core/store';
+import { ThemeManager } from '../../core/theme';
+
+// Layout Editors
+import EditorLayoutFlex from './EditorLayoutFlex.vue';
+import EditorLayoutFixed from './EditorLayoutFixed.vue';
+import EditorLayoutSteps from './EditorLayoutSteps.vue';
+import EditorLayoutTimeline from './EditorLayoutTimeline.vue';
+import EditorLayoutFeatures from './EditorLayoutFeatures.vue';
+import EditorLayoutHalf from './EditorLayoutHalf.vue';
+import EditorLayoutStatement from './EditorLayoutStatement.vue';
+
+const { slide, index } = useLumina();
+const store = inject(StoreKey);
+
+// Zoom/Pan State
+const scale = ref(0.6);
+const panX = ref(0);
+const panY = ref(0);
+const isPanning = ref(false);
+const lastMousePos = ref({ x: 0, y: 0 });
+
+const transformStyle = computed(() => ({
+    transform: `translate(${panX.value}px, ${panY.value}px) scale(${scale.value})`,
+    transformOrigin: 'center center',
+    transition: isPanning.value ? 'none' : 'transform 0.15s ease-out'
+}));
+
+// Dynamic orb position per slide
+const currentOrbPosition = ref({ top: '-20%', left: '-10%' });
+
+// Slide container style (background from theme)
+const slideContainerStyle = computed(() => ({
+    backgroundColor: 'var(--lumina-color-background, #030303)',
+    color: 'var(--lumina-color-text, #ffffff)',
+    fontFamily: 'var(--lumina-font-body, Inter, system-ui, sans-serif)',
+}));
+
+// Ambient orb style (matches LuminaDeck exactly)
+import LuminaBackground from '../parts/LuminaBackground.vue';
+
+const orbPosition = computed(() => ({
+    top: slide.value?.meta?.orbPos?.top || currentOrbPosition.value.top,
+    left: slide.value?.meta?.orbPos?.left || currentOrbPosition.value.left,
+}));
+
+
+// Apply theme when deck or theme changes
+const applyTheme = () => {
+    const deck = store?.state.deck;
+    if (!deck) return;
+
+    // Get theme from deck meta or deck root
+    const themeName = deck.meta?.theme || deck.theme || 'default';
+
+    // Construct full config from meta to ensure overrides are applied immediately
+    const meta = deck.meta || {};
+    const overrides = {
+        colors: meta.colors,
+        typography: meta.typography,
+        spacing: meta.spacing,
+        borderRadius: meta.borderRadius,
+        effects: meta.effects,
+        components: meta.components
+    };
+
+
+    // Inject theme globally with overrides
+    ThemeManager.inject(themeName, overrides);
+};
+
+// Watch for deck/theme changes
+watch(() => store?.state.deck?.meta?.theme, applyTheme, { immediate: true });
+watch(() => store?.state.deck?.theme, applyTheme);
+watch(() => store?.state.deck, applyTheme, { immediate: true, deep: false });
+
+// Randomize orb position on slide change
+watch(index, (newIndex, oldIndex) => {
+    if (newIndex === 0) {
+        currentOrbPosition.value = { top: '-20%', left: '-10%' };
+    } else if (oldIndex !== undefined) {
+        const randomRange = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min);
+        currentOrbPosition.value = {
+            top: `${randomRange(-25, 65)}%`,
+            left: `${randomRange(-25, 65)}%`
+        };
+    }
+}, { immediate: true });
+
+onMounted(() => {
+    applyTheme();
+});
+
+const zoomIn = () => { scale.value = Math.min(scale.value + 0.1, 2); };
+const zoomOut = () => { scale.value = Math.max(scale.value - 0.1, 0.2); };
+const resetZoom = () => { scale.value = 0.6; panX.value = 0; panY.value = 0; };
+
+const handleWheel = (e: WheelEvent) => {
+    // Zoom on Ctrl+Wheel or Meta+Wheel
+    if (e.ctrlKey || e.metaKey) {
+        e.preventDefault();
+        const delta = e.deltaY > 0 ? -0.05 : 0.05;
+        scale.value = Math.max(0.2, Math.min(2, scale.value + delta));
+        return;
+    }
+
+    // Smart Scrolling Logic
+    // Check if we are scrolling inside a scrollable container (the slide)
+    const target = e.target as HTMLElement;
+    const scrollContainer = target.closest('.overflow-y-auto') as HTMLElement;
+
+    if (scrollContainer) {
+        const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+        const isScrollable = scrollHeight > clientHeight;
+
+        if (isScrollable) {
+            // Check if we can scroll in the requested direction
+            const isAtTop = scrollTop <= 0;
+            const isAtBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 1;
+            const scrollingUp = e.deltaY < 0;
+            const scrollingDown = e.deltaY > 0;
+
+            if ((scrollingUp && !isAtTop) || (scrollingDown && !isAtBottom)) {
+                // Allow default scrolling behavior (don't prevent default)
+                // We stop propagation so we don't trigger other handlers if any
+                e.stopPropagation();
+                return;
+            }
+        }
+    }
+
+    // Fallback to Panning
+    // If not scrollable, or at the edge, we pan the canvas
+    e.preventDefault();
+
+    // Support Shift + Wheel for horizontal scrolling
+    if (e.shiftKey && e.deltaX === 0) {
+        panX.value -= e.deltaY;
+    } else {
+        panX.value -= e.deltaX;
+        panY.value -= e.deltaY;
+    }
+};
+
+const isSpacePressed = ref(false);
+const canvasContainer = ref<HTMLElement | null>(null);
+
+// Global Key Listeners for Space
+const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.code === 'Space' && !e.repeat && !(e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement)) {
+        isSpacePressed.value = true;
+    }
+};
+
+const handleKeyUp = (e: KeyboardEvent) => {
+    if (e.code === 'Space') {
+        isSpacePressed.value = false;
+        // If we were panning with space, stop panning
+        if (isPanning.value && !isMouseDown.value) {
+            isPanning.value = false;
+        }
+    }
+};
+
+onMounted(() => {
+    applyTheme();
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+});
+
+// Clean up listeners
+import { onUnmounted } from 'vue';
+onUnmounted(() => {
+    window.removeEventListener('keydown', handleKeyDown);
+    window.removeEventListener('keyup', handleKeyUp);
+});
+
+
+const isMouseDown = ref(false);
+
+const handleMouseDown = (e: MouseEvent) => {
+    const isMiddleClick = e.button === 1;
+    const isLeftClick = e.button === 0;
+
+    // Check if clicking on background (not the slide)
+    // We assume the slide container or its children are the "content"
+    // The wrapper div is the target if we click the "background"
+    const clickedElement = e.target as HTMLElement;
+    const isClickingBackground = clickedElement.classList.contains('canvas-transform-wrapper') ||
+        clickedElement === canvasContainer.value;
+
+
+    if (isMiddleClick || (isLeftClick && (isSpacePressed.value || e.shiftKey || isClickingBackground))) {
+        isPanning.value = true;
+        isMouseDown.value = true;
+        lastMousePos.value = { x: e.clientX, y: e.clientY };
+        e.preventDefault(); // Prevent text selection
+    }
+};
+
+const handleMouseMove = (e: MouseEvent) => {
+    if (!isPanning.value) return;
+
+    // Calculate delta and apply zoom factor to make panning natural at different scales
+    // Actually, simple delta is usually fine for panning, but sometimes dividing by scale helps tracking.
+    // For simple translation, 1:1 mouse movement usually feels best.
+    panX.value += e.clientX - lastMousePos.value.x;
+    panY.value += e.clientY - lastMousePos.value.y;
+    lastMousePos.value = { x: e.clientX, y: e.clientY };
+};
+
+const handleMouseUp = () => {
+    isPanning.value = false;
+    isMouseDown.value = false;
+};
+
+import { useEditor } from '../../composables/useEditor';
+const editorComposable = useEditor();
+
+const selectSlide = () => {
+    // Only select if not panning (prevent selection after dragging)
+    if (!isPanning.value) {
+        editorComposable.select(`slides.${index.value}`);
+    }
+};
+</script>
+
+<style scoped>
+.canvas-transform-wrapper {
+    will-change: transform;
+}
+
+/* Ambient Orb - matches LuminaDeck styles */
+.ambient-orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(var(--lumina-orb-blur, 120px));
+    opacity: var(--lumina-orb-opacity-effective, 0.20);
+    pointer-events: none;
+    will-change: transform, opacity;
+}
+</style>

package/src/components/studio/EditorLayoutFeatures.vue

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

package/src/components/studio/EditorLayoutFixed.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="w-full h-full">
+        <!-- Render the layout with selectable wrapper -->
+        <EditorNode :path="`slides.${slideIndex}`" :label="data.type" class="w-full h-full">
+            <component :is="getLayoutComponent(data.type)" :data="data" />
+        </EditorNode>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { BaseSlideData } from '../../core/types';
+import EditorNode from './EditorNode.vue';
+
+// Import all layout components for rendering preview
+import LayoutHalf from '../layouts/LayoutHalf.vue';
+import LayoutStatement from '../layouts/LayoutStatement.vue';
+import LayoutFeatures from '../layouts/LayoutFeatures.vue';
+import LayoutTimeline from '../layouts/LayoutTimeline.vue';
+import LayoutSteps from '../layouts/LayoutSteps.vue';
+import LayoutChart from '../layouts/LayoutChart.vue';
+import LayoutVideo from '../layouts/LayoutVideo.vue';
+import LayoutAuto from '../layouts/LayoutAuto.vue';
+import LayoutCustom from '../layouts/LayoutCustom.vue';
+import LayoutDiagram from '../layouts/LayoutDiagram.vue';
+
+const props = defineProps<{
+    data: BaseSlideData;
+    slideIndex: number;
+}>();
+
+const getLayoutComponent = (type: string) => {
+    const components: Record<string, any> = {
+        'half': LayoutHalf,
+        'statement': LayoutStatement,
+        'features': LayoutFeatures,
+        'timeline': LayoutTimeline,
+        'steps': LayoutSteps,
+        'chart': LayoutChart,
+        'video': LayoutVideo,
+        'auto': LayoutAuto,
+        'custom': LayoutCustom,
+        'diagram': LayoutDiagram,
+    };
+    return components[type] || 'div';
+};
+</script>

package/src/components/studio/EditorLayoutFlex.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import draggable from 'vuedraggable';
+import type { SlideFlex, FlexElement, FlexSize } from '../../core/types';
+import EditorNode from './EditorNode.vue';
+import { useEditor } from '../../composables/useEditor';
+
+// Parts
+import FlexImage from '../parts/FlexImage.vue';
+import FlexTitle from '../parts/FlexTitle.vue';
+import FlexText from '../parts/FlexText.vue';
+import FlexButton from '../parts/FlexButton.vue';
+import FlexBullets from '../parts/FlexBullets.vue';
+import FlexOrdered from '../parts/FlexOrdered.vue';
+import FlexTimeline from '../parts/FlexTimeline.vue';
+import FlexStepper from '../parts/FlexStepper.vue';
+import FlexSpacer from '../parts/FlexSpacer.vue';
+
+import {
+    spacingVarMap,
+    getSizeClass,
+    getFlexItemStyle,
+    getFlexContainerStyle,
+    getTopLevelStyle,
+    getFlexSlideMainStyle,
+} from '../../composables/useFlexLayout';
+
+const props = defineProps<{
+    data: SlideFlex,
+    slideIndex: number
+}>();
+
+const editor = useEditor();
+
+const elements = computed(() => props.data.elements || []);
+
+const directionClass = computed(() =>
+    props.data.direction === 'vertical' ? 'flex-col' : 'flex-row'
+);
+
+// Added containerStyle for dynamic padding
+const containerStyle = computed(() => ({
+    padding: spacingVarMap[props.data.padding || 'none'],
+}));
+
+const mainFlexStyle = computed(() => ({
+    gap: spacingVarMap[props.data.gap || 'none'],
+    ...getFlexSlideMainStyle(props.data.direction, props.data.halign, props.data.valign),
+}));
+
+const getElementStyle = (element: FlexElement & { size?: FlexSize }) => {
+    return getFlexItemStyle(element, props.data.direction === 'vertical');
+};
+
+const getContentStyle = getFlexContainerStyle; // Alias for template usage
+
+const getChildComponent = (type: string) => {
+    const components: Record<string, any> = {
+        'title': FlexTitle,
+        'text': FlexText,
+        'image': FlexImage,
+        'bullets': FlexBullets,
+        'ordered': FlexOrdered,
+        'button': FlexButton,
+        'timeline': FlexTimeline,
+        'stepper': FlexStepper,
+        'spacer': FlexSpacer,
+    };
+    return components[type] || 'div';
+};
+
+const handleDragChange = (event: any) => {
+    if (event.moved) {
+        const { oldIndex, newIndex } = event.moved;
+        editor.store.moveNode(`slides.${props.slideIndex}.elements`, oldIndex, newIndex);
+        editor.commit();
+    }
+};
+
+const handleContentDragChange = (event: any, parentIndex: number) => {
+    if (event.moved) {
+        const { oldIndex, newIndex } = event.moved;
+        editor.store.moveNode(`slides.${props.slideIndex}.elements.${parentIndex}.elements`, oldIndex, newIndex);
+        editor.commit();
+    }
+};
+</script>
+
+<template>
+    <!-- Root container with dynamic padding -->
+    <div class="w-full h-full flex items-center justify-center" :style="containerStyle">
+        <!-- Match nesting: .flex-layout > .flex ... -->
+        <draggable :list="elements" item-key="dragKey" :group="{ name: 'elements' }" @change="handleDragChange"
+            :class="['flex w-full h-full max-w-7xl mx-auto', directionClass]" :style="mainFlexStyle">
+            <template #item="{ element, index }">
+                <EditorNode :path="`slides.${slideIndex}.elements.${index}`" :label="element.type" :resizable="true"
+                    :class="[getSizeClass(element.size), 'relative']" :style="element.type === 'content' || element.type === 'image' || element.type === 'video' ?
+                        { ...getElementStyle(element), height: '100%' } :
+                        { ...getTopLevelStyle(), width: '100%' }">
+
+                    <!-- 1. Content Container -->
+                    <div v-if="element.type === 'content'" class="h-full w-full">
+                        <draggable :list="element.elements" item-key="dragKey" :group="{ name: 'elements' }"
+                            @change="handleContentDragChange($event, index)" class="w-full h-full flex flex-col"
+                            :style="[getContentStyle(element), { minHeight: '50px' }]">
+                            <template #item="{ element: child, index: childIndex }">
+                                <EditorNode :path="`slides.${slideIndex}.elements.${index}.elements.${childIndex}`"
+                                    :label="child.type" style="width: 100%">
+                                    <component :is="getChildComponent(child.type)" v-bind="child" />
+                                </EditorNode>
+                            </template>
+                        </draggable>
+                    </div>
+
+                    <!-- 2. Leaf Elements - Image -->
+                    <FlexImage v-else-if="element.type === 'image'" :src="element.src" :alt="element.alt"
+                        :fill="element.fill" :rounded="element.rounded" :container-class="'w-full h-full'" />
+
+                    <!-- 3. Leaf Elements - Video -->
+                    <div v-else-if="element.type === 'video'"
+                        class="w-full h-full bg-gray-900 flex items-center justify-center text-white/20 rounded-lg">
+                        <i class="ph-thin ph-play mr-2"></i> Video: {{ element.src?.split('/').pop() || 'Unknown' }}
+                    </div>
+
+                    <!-- 4. Top Level Generic Elements (Title, Text, etc.) -->
+                    <!-- They are already wrapped in EditorNode. EditorNode applies styles to itself. -->
+                    <component v-else :is="getChildComponent(element.type)" v-bind="element" />
+
+                </EditorNode>
+            </template>
+        </draggable>
+    </div>
+</template>

package/src/components/studio/EditorLayoutHalf.vue

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

package/src/components/studio/EditorLayoutStatement.vue

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

package/src/components/studio/EditorLayoutSteps.vue

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

package/src/components/studio/EditorLayoutTimeline.vue

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