lumina-slides 8.9.4 → 9.0.0

package/src/components/layouts/LayoutChart.vue

@@ -0,0 +1,287 @@
+<template>
+    <BaseSlide :data="data" :slide-index="slideIndex">
+        <div
+            :class="['w-full flex flex-col justify-center p-8 lg:p-16', data.sizing === 'container' ? 'min-h-full py-8' : 'min-h-screen']">
+            <!-- Header -->
+            <div v-if="data.title || data.subtitle" :class="['text-center mb-8', data.class || '']">
+                <LuminaElement v-if="data.title" :id="titleId" tag="h2" class="font-heading font-bold mb-3" :style="{
+                    fontSize: 'var(--lumina-text-5xl)',
+                    letterSpacing: 'var(--lumina-tracking-tighter)',
+                    color: 'var(--lumina-color-text-safe, var(--lumina-color-text))',
+                    textShadow: '0 2px 10px rgba(0,0,0,0.1)'
+                }">
+                    {{ data.title }}
+                </LuminaElement>
+                <LuminaElement v-if="data.subtitle" :id="subtitleId" tag="p" class="text-lg lg:text-xl"
+                    :style="{ color: 'var(--lumina-color-text-safe, var(--lumina-color-text))', opacity: 0.8 }">
+                    {{ data.subtitle }}
+                </LuminaElement>
+            </div>
+
+            <!-- Error State -->
+            <div v-if="chartError" class="flex-1 flex items-center justify-center">
+                <div class="text-center p-8 bg-red-500/10 border border-red-500/30 rounded-xl max-w-lg">
+                    <svg class="w-12 h-12 mx-auto mb-4 text-red-400" fill="none" stroke="currentColor"
+                        viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                    </svg>
+                    <p class="text-red-300 font-medium mb-2">Chart.js Required</p>
+                    <code class="text-sm bg-black/30 px-3 py-1 rounded text-red-200">npm install chart.js</code>
+                </div>
+            </div>
+
+            <!-- Loading State -->
+            <div v-else-if="chartLoading" class="flex-1 flex items-center justify-center">
+                <div class="animate-pulse text-white/40">Loading chart...</div>
+            </div>
+
+            <!-- Chart Container -->
+            <LuminaElement v-else :id="chartId"
+                :class="['flex-1 flex items-center justify-center max-w-5xl mx-auto w-full', data.chartClass || '']">
+                <div class="w-full h-full min-h-[300px] lg:min-h-[400px] relative">
+                    <canvas ref="chartCanvas"></canvas>
+                </div>
+            </LuminaElement>
+        </div>
+    </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, computed, inject } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import { resolveId } from '../../core/elementResolver';
+import { StoreKey } from '../../core/store';
+import type { SlideChart, ChartDataset } from '../../core/types';
+
+// Chart.js is loaded dynamically - it's an optional dependency
+let ChartJS: typeof import('chart.js').Chart | null = null;
+const chartError = ref<string | null>(null);
+const chartLoading = ref(true);
+
+const props = defineProps<{
+    data: SlideChart;
+    slideIndex?: number;
+}>();
+
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+const titleId = computed(() => resolveId(props.data, slideIndex.value, ['title']));
+const subtitleId = computed(() => resolveId(props.data, slideIndex.value, ['subtitle']));
+const chartId = computed(() => resolveId(props.data, slideIndex.value, ['chart']));
+
+const chartCanvas = ref<HTMLCanvasElement | null>(null);
+let chartInstance: any = null;
+
+// Try to load Chart.js dynamically
+const loadChartJS = async () => {
+    try {
+        const chartModule = await import('chart.js');
+        ChartJS = chartModule.Chart;
+        ChartJS.register(...chartModule.registerables);
+        chartLoading.value = false;
+        return true;
+    } catch (e) {
+        chartError.value = 'Chart.js is required for chart slides. Install it with: npm install chart.js';
+        chartLoading.value = false;
+        console.warn('[Lumina] chart.js not found. Install with: npm install chart.js');
+        return false;
+    }
+};
+
+// Color token resolver
+const resolveColor = (colorToken: string | undefined, index: number): string => {
+    if (!colorToken) {
+        // Default color palette
+        const defaultColors = [
+            'rgba(59, 130, 246, 0.8)',   // Blue
+            'rgba(16, 185, 129, 0.8)',   // Green
+            'rgba(245, 158, 11, 0.8)',   // Amber
+            'rgba(239, 68, 68, 0.8)',    // Red
+            'rgba(139, 92, 246, 0.8)',   // Purple
+            'rgba(236, 72, 153, 0.8)',   // Pink
+        ];
+        return defaultColors[index % defaultColors.length];
+    }
+
+    // Resolve Lumina color tokens with strict fallbacks
+    switch (colorToken) {
+        case 'c:p':
+            return getComputedStyle(document.documentElement).getPropertyValue('--lumina-colors-primary').trim() || '#3b82f6';
+        case 'c:s':
+            return getComputedStyle(document.documentElement).getPropertyValue('--lumina-colors-secondary').trim() || '#10b981';
+        case 'c:m':
+            return getComputedStyle(document.documentElement).getPropertyValue('--lumina-colors-muted').trim() || '#9ca3af';
+        default:
+            // If valid definition, return it
+            if (colorToken && (colorToken.startsWith('#') || colorToken.startsWith('rgb') || colorToken.startsWith('hsl'))) return colorToken;
+            // If known color name (red, blue), return it
+            if (colorToken && /^[a-z]+$/i.test(colorToken)) return colorToken;
+
+            // Fallback for empty/undefined/invalid tokens
+            return resolveColor(undefined, index);
+    }
+};
+
+// Generate smart palette derived from theme identity
+const generateSegmentColors = (datasets: ChartDataset[], labelsCount: number): string[] => {
+    const colors: string[] = [];
+
+    // Get theme colors from CSS variables
+    const style = getComputedStyle(document.body);
+    const primary = style.getPropertyValue('--lumina-color-primary').trim() || '#3b82f6';
+    const secondary = style.getPropertyValue('--lumina-color-secondary').trim() || '#8b5cf6';
+    const accent = style.getPropertyValue('--lumina-color-accent').trim() || '#06b6d4';
+
+    // Create an intelligent palette based on brand identity
+    // We alternate between brand colors and variations
+    const basePalette = [
+        primary,
+        secondary,
+        accent,
+        // Generate variations (simulated by opacity or mixing - hard to do perfectly in JS without lib, 
+        // but we can assume these are distinct enough for 3 categories)
+    ];
+
+    // If we need more colors, we loop or use fallbacks that match the vibe
+    const extendedPalette = [
+        ...basePalette,
+        '#f59e0b', // construction/warning (often useful in business/engine contexts)
+        '#10b981', // success
+        '#ef4444'  // danger
+    ];
+
+    // For Pie/Doughnut charts, if we only have one dataset and one color, 
+    // it results in a mono-colored chart which is often not desired.
+    // We force using the extended palette to differentiate segments.
+    for (let i = 0; i < labelsCount; i++) {
+        // If it's a multi-dataset chart (e.g. bar), we might want to respect the dataset color.
+        // But for single-dataset Pie charts, we ignore the single color to show variety.
+        if (datasets.length === 1 && datasets[0].color && labelsCount > 1) {
+            colors.push(extendedPalette[i % extendedPalette.length]);
+        }
+        else if (datasets[0]?.color) {
+            colors.push(resolveColor(datasets[0].color, i));
+        } else {
+            colors.push(extendedPalette[i % extendedPalette.length]);
+        }
+    }
+    return colors;
+};
+
+const chartConfig = computed(() => {
+    const { chartType, data } = props.data;
+    const isPieType = chartType === 'pie' || chartType === 'doughnut';
+
+    return {
+        type: chartType,
+        data: {
+            labels: data.labels,
+            datasets: data.datasets.map((dataset, index) => ({
+                label: dataset.label,
+                data: dataset.values,
+                backgroundColor: isPieType
+                    ? generateSegmentColors(data.datasets, data.labels.length)
+                    : resolveColor(dataset.color, index),
+                borderColor: isPieType
+                    ? 'rgba(0, 0, 0, 0.2)'
+                    : resolveColor(dataset.color, index),
+                borderWidth: isPieType ? 2 : 2,
+                tension: chartType === 'line' ? 0.4 : 0,
+                fill: chartType === 'line' ? false : undefined,
+            }))
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: {
+                    display: true,
+                    position: 'bottom' as const,
+                    labels: {
+                        color: getComputedStyle(document.body).getPropertyValue('--lumina-color-text').trim() || '#ffffff',
+                        padding: 20,
+                        font: {
+                            family: 'Inter, system-ui, sans-serif',
+                            size: 12
+                        }
+                    }
+                },
+                tooltip: {
+                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                    titleColor: '#fff',
+                    bodyColor: 'rgba(255, 255, 255, 0.8)',
+                    padding: 12,
+                    cornerRadius: 8,
+                    titleFont: {
+                        family: 'Inter, system-ui, sans-serif',
+                        weight: 'bold' as const
+                    },
+                    bodyFont: {
+                        family: 'Inter, system-ui, sans-serif'
+                    }
+                }
+            },
+            scales: isPieType ? {} : {
+                x: {
+                    grid: {
+                        color: 'rgba(128, 128, 128, 0.1)'
+                    },
+                    ticks: {
+                        color: getComputedStyle(document.body).getPropertyValue('--lumina-color-text-secondary').trim() || '#e5e7eb',
+                        font: {
+                            family: 'Inter, system-ui, sans-serif'
+                        }
+                    }
+                },
+                y: {
+                    grid: {
+                        color: 'rgba(128, 128, 128, 0.1)'
+                    },
+                    ticks: {
+                        color: getComputedStyle(document.body).getPropertyValue('--lumina-color-text-secondary').trim() || '#e5e7eb',
+                        font: {
+                            family: 'Inter, system-ui, sans-serif'
+                        }
+                    }
+                }
+            }
+        }
+    };
+});
+
+const createChart = () => {
+    if (!chartCanvas.value || !ChartJS) return;
+
+    // Destroy existing chart
+    if (chartInstance) {
+        chartInstance.destroy();
+    }
+
+    const ctx = chartCanvas.value.getContext('2d');
+    if (!ctx) return;
+
+    chartInstance = new ChartJS(ctx, chartConfig.value as any);
+};
+
+onMounted(async () => {
+    // Load Chart.js dynamically
+    const loaded = await loadChartJS();
+    if (loaded) {
+        // Small delay to ensure canvas is ready
+        setTimeout(createChart, 50);
+    }
+});
+
+onUnmounted(() => {
+    if (chartInstance) {
+        chartInstance.destroy();
+        chartInstance = null;
+    }
+});
+
+// Watch for data changes
+watch(() => props.data, () => {
+    createChart();
+}, { deep: true });
+</script>

package/src/components/layouts/LayoutCustom.vue

@@ -0,0 +1,92 @@
+<template>
+    <BaseSlide :data="data" :slide-index="slideIndex">
+        <div :class="[
+            'custom-slide-wrapper relative w-full overflow-hidden',
+            data.sizing === 'container' ? 'h-full' : 'min-h-screen'
+        ]">
+            <!-- HTML Content -->
+            <div class="custom-html-content w-full h-full" v-html="sanitizedHtml"></div>
+        </div>
+    </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, watch } from 'vue';
+import BaseSlide from '../base/BaseSlide.vue';
+import { StoreKey } from '../../core/store';
+import type { SlideCustom } from '../../core/types';
+
+const props = defineProps<{
+    data: SlideCustom;
+    slideIndex?: number;
+}>();
+
+const store = inject(StoreKey);
+const slideIndex = computed(() => props.slideIndex ?? store?.state.currentIndex ?? 0);
+
+// Generate unique ID for this instance
+const styleId = `custom-slide-${Math.random().toString(36).slice(2, 10)}`;
+
+/**
+ * Inject CSS into <head> as a style element
+ */
+function injectStyles() {
+    // Remove existing style if any
+    removeStyles();
+
+    if (!props.data.css) return;
+
+    const styleEl = document.createElement('style');
+    styleEl.id = styleId;
+    styleEl.textContent = props.data.css;
+    document.head.appendChild(styleEl);
+}
+
+function removeStyles() {
+    const existing = document.getElementById(styleId);
+    if (existing) {
+        existing.remove();
+    }
+}
+
+// Inject on mount, update on data change
+onMounted(() => {
+    injectStyles();
+});
+
+// Watch for css changes
+watch(() => props.data.css, () => {
+    injectStyles();
+});
+
+onUnmounted(() => {
+    removeStyles();
+});
+
+/**
+ * Basic HTML sanitization - removes script tags and event handlers
+ */
+const sanitizedHtml = computed(() => {
+    if (!props.data.html) return '';
+
+    return props.data.html
+        .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+        .replace(/on\w+\s*=\s*["'][^"']*["']/gi, '')
+        .replace(/javascript:/gi, '');
+});
+</script>
+
+<style scoped>
+.custom-slide-wrapper {
+    /* Wrapper styles */
+}
+
+.custom-html-content {
+    /* Allow custom content to fill the space */
+    display: block;
+}
+
+.custom-html-content :deep(*) {
+    box-sizing: border-box;
+}
+</style>

package/src/components/layouts/LayoutDiagram.vue

@@ -0,0 +1,253 @@
+<template>
+    <BaseSlide :data="data" :slide-index="index" class="layout-diagram">
+        <!-- Stop propagation to prevent EditorNode from overriding edge/node selection -->
+        <div :class="['w-full relative', data.sizing === 'container' ? 'h-full min-h-[400px]' : 'h-screen']"
+            @click.stop>
+            <VueFlow v-model:nodes="nodes" v-model:edges="edges" class="h-full w-full" :fit-view-on-init="true"
+                :default-viewport="{ zoom: 1 }" :min-zoom="0.1" :max-zoom="4" @dragover="onDragOver" @drop="onDrop">
+
+                <Controls v-if="isEditable" />
+
+                <template #node-default="props">
+                    <StudioDiagramNode v-bind="props" :editable="isEditable" :element-id="props.node?.id" />
+                </template>
+                <template #node-input="props">
+                    <StudioDiagramNode v-bind="props" :editable="isEditable" :element-id="props.node?.id" />
+                </template>
+            </VueFlow>
+        </div>
+    </BaseSlide>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onMounted } from 'vue';
+import { VueFlow, useVueFlow } from '@vue-flow/core';
+import { Controls } from '@vue-flow/controls';
+import BaseSlide from '../base/BaseSlide.vue';
+import type { SlideDiagram } from '../../core/types';
+import { useLumina } from '../../composables/useLumina';
+
+// CSS imports
+import '@vue-flow/core/dist/style.css';
+import '@vue-flow/core/dist/theme-default.css';
+import '@vue-flow/controls/dist/style.css';
+
+const props = defineProps<{
+    data: SlideDiagram
+}>();
+
+const { options, index } = useLumina();
+
+const isEditable = computed(() => {
+    // If studio option is enabled, allow editing.
+    return !!options.studio;
+});
+
+const nodes = ref(props.data.nodes || []);
+const edges = ref(props.data.edges || []);
+
+// NO WATCH FOR NODES - VueFlow is the source of truth
+// We only sync FROM VueFlow TO store (one-way), not the other way
+// Watch only for edges (which don't have the same position/dimensions issue)
+watch(() => props.data.edges, (newEdges) => {
+    if (newEdges && JSON.stringify(newEdges) !== JSON.stringify(edges.value)) {
+        edges.value = [...newEdges];
+    }
+}, { deep: true });
+
+// Initial setup from props
+onMounted(() => {
+    if (props.data.nodes) nodes.value = [...props.data.nodes];
+    if (props.data.edges) edges.value = [...props.data.edges];
+});
+
+const { onNodeDragStop, onConnect } = useVueFlow();
+
+// Helper to sync all nodes to store
+const syncNodesToStore = () => {
+    const plainNodes = nodes.value.map(n => JSON.parse(JSON.stringify(n)));
+    import('../../core/events').then(({ bus }) => {
+        bus.emit('action', {
+            type: 'slide-update',
+            slideIndex: index.value,
+            patch: { nodes: plainNodes }
+        });
+    });
+};
+
+// Listen for direct node updates from inspector (bypasses store -> watch cycle)
+import('../../core/events').then(({ bus }) => {
+    bus.on('diagram-node-update', (payload) => {
+        if (payload.slideIndex !== index.value) {
+            return;
+        }
+
+        // Find and update the node in VueFlow's state directly
+        const nodeIndex = nodes.value.findIndex((n: any) => n.id === payload.nodeId);
+        if (nodeIndex !== -1) {
+            const node = nodes.value[nodeIndex];
+            // Handle nested paths like 'style.backgroundColor' or 'data.shape'
+            const keys = payload.key.split('.');
+            let target: any = node;
+            for (let i = 0; i < keys.length - 1; i++) {
+                if (!target[keys[i]]) target[keys[i]] = {};
+                target = target[keys[i]];
+            }
+            target[keys[keys.length - 1]] = payload.value;
+
+            // Trigger reactivity
+            nodes.value = [...nodes.value];
+
+            // Sync to store
+            syncNodesToStore();
+        }
+    });
+});
+
+// Handle Node Dragging (Persistence)
+onNodeDragStop((e) => {
+    if (!isEditable.value) return;
+
+    // Create plain objects to avoid proxy issues
+    const plainNodes = nodes.value.map(n => JSON.parse(JSON.stringify(n)));
+
+    import('../../core/events').then(({ bus }) => {
+        bus.emit('action', {
+            type: 'slide-update',
+            slideIndex: index.value,
+            patch: {
+                nodes: plainNodes
+            }
+        });
+    });
+});
+
+// Also handle connection changes
+onConnect((params) => {
+    if (!isEditable.value) return;
+
+    // VueFlow does NOT automatically add the edge. We must do it ourselves.
+    const newEdge = {
+        id: `edge-${params.source}-${params.target}-${Date.now()}`,
+        source: params.source,
+        target: params.target,
+        sourceHandle: params.sourceHandle,
+        targetHandle: params.targetHandle,
+        type: 'default',
+        animated: false,
+    };
+
+    // Add to local state first for instant feedback
+    edges.value = [...edges.value, newEdge];
+
+    // Persist to store
+    const plainEdges = edges.value.map(e => JSON.parse(JSON.stringify(e)));
+    import('../../core/events').then(({ bus }) => {
+        bus.emit('action', {
+            type: 'slide-update',
+            slideIndex: index.value,
+            patch: {
+                edges: plainEdges
+            }
+        });
+    });
+});
+
+// Selection Sync
+import { inject } from 'vue';
+import { EditorKey } from '../../composables/useEditor';
+import StudioDiagramNode from '../studio/nodes/StudioDiagramNode.vue';
+
+// Optional injection (will be null if not in Studio scope)
+const editor = inject(EditorKey, null);
+
+const { onNodeClick, onPaneClick, onEdgeClick, addNodes, project, findNode } = useVueFlow();
+
+// Register custom node types
+// We map 'default', 'input', 'output' all to our custom node to ensure resizing works for everything
+// Or we can introduce a new type 'custom' and migrate data. 
+// For now, let's map 'default' -> StudioDiagramNode via the template slot or node-types prop
+// Using template slots is easier for dynamic resolving but defineProps is cleaner.
+// Let's use template slots in VueFlow component above.
+
+onNodeClick(({ node }) => {
+    if (!isEditable.value || !editor) return;
+    // Use props.data.nodes (store data) for index lookup to match getByPath
+    const storeNodes = props.data.nodes || [];
+    const nodeIndex = storeNodes.findIndex((n: any) => n.id === node.id);
+    if (nodeIndex !== -1) {
+        editor.select(`slides.${index.value}.nodes.${nodeIndex}`);
+    }
+});
+
+onEdgeClick(({ edge }) => {
+    if (!isEditable.value || !editor) return;
+    // Use props.data.edges (store data) for index lookup to match getByPath
+    const storeEdges = props.data.edges || [];
+    const edgeIndex = storeEdges.findIndex((e: any) => e.id === edge.id);
+    if (edgeIndex !== -1) {
+        const path = `slides.${index.value}.edges.${edgeIndex}`;
+        editor.select(path);
+    }
+});
+
+// NOTE: Do NOT use onPaneClick for selection as it fires AFTER edge/node clicks and overrides them.
+// Users can deselect by clicking on the slide in the left panel.
+
+// Drag and Drop Logic
+const onDragOver = (event: DragEvent) => {
+    event.preventDefault();
+    if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'move';
+    }
+};
+
+const onDrop = (event: DragEvent) => {
+    if (!isEditable.value || !editor) return;
+
+    const type = event.dataTransfer?.getData('application/vueflow');
+    if (!type) return;
+
+    // Calculate position
+    const { left, top } = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    const position = project({
+        x: event.clientX - left,
+        y: event.clientY - top,
+    });
+
+    const newNode = {
+        id: `node-${Date.now()}`,
+        type: 'default', // Using 'default' which we will map to our custom component
+        position,
+        label: `${type} Node`,
+        data: {
+            type: type, // Store actual shape info in data
+            style: { backgroundColor: '#ffffff', color: '#000000', width: '150px', height: '50px' }
+        },
+    };
+
+    // Add to store
+    // We can use editor.store.addNode, but we need the correct path
+    // Since we are in LayoutDiagram, we know the path is `slides.${index.value}.nodes`
+    // Use setTimeout to allow UI update
+
+    // First add locally to via VueFlow for instant feedback? 
+    // No, single source of truth.
+
+    editor.store.addNode(`slides.${index.value}.nodes`, newNode);
+    editor.commit();
+};
+</script>
+
+<style>
+/* Override VueFlow default node styles so our custom component controls appearance */
+.vue-flow__node-default,
+.vue-flow__node-input,
+.vue-flow__node-output {
+    padding: 0 !important;
+    border-radius: 0 !important;
+    border: none !important;
+    background-color: transparent !important;
+    /* NOTE: Do NOT set width here - let NodeResizer control it */
+}
+</style>