lumina-slides 8.9.5 → 9.0.1

package/src/components/studio/nodes/StudioDiagramNode.vue

@@ -0,0 +1,138 @@
+<template>
+    <!-- Single root element required for Vue attribute inheritance -->
+    <div class="studio-diagram-node" :data-lumina-id="elementId || undefined">
+        <NodeResizer v-if="editable && selected" :min-width="80" :min-height="40" />
+
+        <!-- Image Node -->
+        <div v-if="isImageNode" class="node-content node-image" :style="imageContainerStyle">
+            <img v-if="data?.imageUrl" :src="data.imageUrl" alt="" class="node-img" />
+            <div v-else class="placeholder">
+                <i class="ph-thin ph-image text-2xl text-gray-400"></i>
+                <span class="text-xs text-gray-400">No Image</span>
+            </div>
+        </div>
+
+        <!-- Regular Node -->
+        <div v-else class="node-content" :style="contentStyle">
+            {{ displayLabel || data?.label || 'Node' }}
+        </div>
+
+        <!-- Handles only visible in edit mode -->
+        <template v-if="editable">
+            <Handle type="target" :position="Position.Top" class="node-handle" />
+            <Handle type="source" :position="Position.Bottom" class="node-handle" />
+            <Handle type="target" :position="Position.Left" class="node-handle" />
+            <Handle type="source" :position="Position.Right" class="node-handle" />
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, type VNode, type Component } from 'vue';
+import { Handle, Position } from '@vue-flow/core';
+import { NodeResizer } from '@vue-flow/node-resizer';
+import '@vue-flow/node-resizer/dist/style.css';
+
+const props = defineProps<{
+    id: string;
+    data: any;
+    selected?: boolean;
+    // VueFlow can pass label as string, object, VNode, or Component
+    label?: string | object | VNode | Component;
+    type?: string;
+    style?: Record<string, any>;
+    editable?: boolean;
+    /** Element id for engine.element(id) control; applied as data-lumina-id on the root. */
+    elementId?: string;
+}>();
+
+// Extract a displayable string from the label prop
+const displayLabel = computed(() => {
+    if (!props.label) return null;
+    if (typeof props.label === 'string') return props.label;
+    // For objects/VNodes/Components, try to extract text or return null
+    if (typeof props.label === 'object' && 'toString' in props.label) {
+        const str = props.label.toString();
+        // Avoid returning "[object Object]"
+        if (str !== '[object Object]') return str;
+    }
+    return null;
+});
+
+// Check if this is an image node
+const isImageNode = computed(() => props.data?.type === 'image' || props.data?.shape === 'image');
+
+// Shape is stored in data.shape for styling
+const shape = computed(() => props.data?.shape || 'rectangle');
+
+const contentStyle = computed(() => ({
+    backgroundColor: props.style?.backgroundColor || props.data?.style?.backgroundColor || '#ffffff',
+    color: props.style?.color || props.data?.style?.color || '#000000',
+    borderRadius: shape.value === 'rounded' ? '12px' : '4px',
+    border: props.editable && props.selected ? '2px solid #3b82f6' : '1px solid #ccc',
+}));
+
+const imageContainerStyle = computed(() => ({
+    borderRadius: '4px',
+    border: props.editable && props.selected ? '2px solid #3b82f6' : 'none',
+    overflow: 'hidden',
+}));
+</script>
+
+<style scoped>
+.studio-diagram-node {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.node-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    text-align: center;
+    font-size: 12px;
+    word-break: break-word;
+}
+
+.node-image {
+    padding: 0;
+    background: transparent;
+}
+
+.node-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    min-height: 60px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px dashed rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+}
+
+.node-handle {
+    width: 10px;
+    height: 10px;
+    background-color: rgba(59, 130, 246, 0.6);
+    border: 2px solid white;
+    border-radius: 50%;
+}
+
+.node-handle:hover {
+    background-color: #3b82f6;
+    transform: scale(1.2);
+}
+</style>

package/src/composables/useAuth.ts

@@ -0,0 +1,87 @@
+import { ref, computed } from 'vue';
+import {
+    signInWithPopup,
+    signOut as firebaseSignOut,
+    onAuthStateChanged,
+    User,
+    AuthError
+} from 'firebase/auth';
+import { getFirebaseAuth, getAuthProvider } from '../utils/firebase';
+
+// Global state (Singleton pattern for composable)
+const currentUser = ref<User | null>(null);
+const isLoading = ref(true);
+let isListenerAttached = false;
+
+/**
+ * Composable for Firebase Authentication.
+ * Provides reactive user state and login/logout methods.
+ */
+export function useAuth() {
+
+    /**
+     * Helper to safely get auth instance or throw.
+     */
+    const ensureAuth = () => {
+        try {
+            return { auth: getFirebaseAuth(), provider: getAuthProvider() };
+        } catch (e) {
+            throw new Error("Authentication service is not ready. Ensure initFirebase() is called in main.ts");
+        }
+    };
+
+    const loginWithGoogle = async (): Promise<User> => {
+        const { auth, provider } = ensureAuth();
+
+        try {
+            const result = await signInWithPopup(auth, provider);
+            currentUser.value = result.user;
+            return result.user;
+        } catch (error: unknown) {
+            const authError = error as AuthError;
+            console.error(`[Auth] Login failed: ${authError.code} - ${authError.message}`);
+            throw authError; // Propagate for UI handling
+        }
+    };
+
+    const logout = async (): Promise<void> => {
+        try {
+            const auth = getFirebaseAuth(); // Can just get auth, provider not needed
+            await firebaseSignOut(auth);
+            currentUser.value = null;
+        } catch (error: unknown) {
+            console.error("[Auth] Logout failed", error);
+            throw error;
+        }
+    };
+
+    /**
+     * Initialize the Auth listener. 
+     * Idempotent: calling it multiple times is safe.
+     */
+    const initAuthListener = (): void => {
+        if (isListenerAttached) return;
+
+        try {
+            const auth = getFirebaseAuth();
+            onAuthStateChanged(auth, (user) => {
+                currentUser.value = user;
+                isLoading.value = false;
+            });
+            isListenerAttached = true;
+        } catch (e) {
+            // If firebase isn't ready yet, this might fail. 
+            // In a strict app, this shouldn't happen if main.ts inits first.
+            console.warn("[Auth] Failed to attach listener:", e);
+        }
+    };
+
+    return {
+        user: computed(() => currentUser.value),
+        isAuthenticated: computed(() => !!currentUser.value),
+        isLoading: computed(() => isLoading.value),
+        loginWithGoogle,
+        logout,
+        initAuthListener
+    };
+}

package/src/composables/useEditor.ts

@@ -0,0 +1,224 @@
+import { ref, computed, inject, InjectionKey, watch, onMounted, onUnmounted } from 'vue';
+import { StoreKey, type LuminaStore } from '../core/store';
+import { getByPath } from '../utils/deep';
+
+interface HistorySnapshot {
+    deck: any;
+    currentIndex: number;
+    timestamp: number;
+}
+
+export const EditorKey: InjectionKey<ReturnType<typeof createEditor>> = Symbol('EditorKey');
+
+export function createEditor(manualStore?: LuminaStore) {
+    const store = manualStore || inject(StoreKey);
+    if (!store) {
+        throw new Error("Lumina Editor requires Lumina Store.");
+    }
+
+    // --- State ---
+    const selection = ref<string | null>(null);
+    const clipboard = ref<any>(null);
+    const history = ref<HistorySnapshot[]>([]);
+    const historyIndex = ref(-1);
+
+    // --- Selection ---
+    const select = (path: string | null) => {
+        selection.value = path;
+    };
+
+    const getSelectedData = () => {
+        if (!selection.value || !store.state.deck) return null;
+        return getByPath(store.state.deck, selection.value);
+    };
+
+    // --- History Management ---
+    let debounceTimer: any = null;
+    const isUndoRedoOp = ref(false); // Internal flag to prevent history loops
+
+    const commit = (immediate = false) => {
+        if (isUndoRedoOp.value) return;
+
+        // Clear any pending debounce
+        if (debounceTimer) {
+            clearTimeout(debounceTimer);
+            debounceTimer = null;
+        }
+
+        const pushToHistory = () => {
+            // Remove future history if we were in the middle of the stack
+            if (historyIndex.value < history.value.length - 1) {
+                history.value = history.value.slice(0, historyIndex.value + 1);
+            }
+
+            if (store.state.deck) {
+                // Deduplicate: Don't push if identical to current head
+                const currentHead = history.value[historyIndex.value];
+                const newSnapshot = JSON.parse(JSON.stringify(store.state.deck));
+                const currentIndex = store.state.currentIndex;
+
+                if (currentHead &&
+                    JSON.stringify(currentHead.deck) === JSON.stringify(newSnapshot) &&
+                    currentHead.currentIndex === currentIndex
+                ) {
+                    return;
+                }
+
+                history.value.push({
+                    deck: newSnapshot,
+                    currentIndex: currentIndex,
+                    timestamp: Date.now()
+                });
+                historyIndex.value++;
+
+                // Limit history size
+                if (history.value.length > 50) {
+                    history.value.shift();
+                    historyIndex.value--;
+                }
+            }
+        };
+
+        if (immediate) {
+            pushToHistory();
+        } else {
+            // Debounce for text typing etc.
+            debounceTimer = setTimeout(pushToHistory, 500);
+        }
+    };
+
+    // Watch for ANY change in the deck
+    watch(
+        () => store.state.deck,
+        (newVal) => {
+            if (newVal && !isUndoRedoOp.value) {
+                commit(false); // Debounced by default
+            }
+        },
+        { deep: true }
+    );
+
+    // Also watch index changes so navigation is undoable
+    watch(
+        () => store.state.currentIndex,
+        () => {
+            if (!isUndoRedoOp.value) {
+                commit(false);
+            }
+        }
+    );
+
+    const undo = () => {
+        // Force commit any pending changes (e.g. from debounce)
+        // so we can undo from the current state
+        commit(true);
+
+        if (historyIndex.value > 0) {
+            isUndoRedoOp.value = true;
+            historyIndex.value--;
+            const snapshot = history.value[historyIndex.value];
+            if (snapshot) {
+                store.loadDeck(JSON.parse(JSON.stringify(snapshot.deck)));
+                store.goto(snapshot.currentIndex); // Restore slide position
+            }
+            // Wait for Vue reactivity to settle before re-enabling watcher
+            setTimeout(() => { isUndoRedoOp.value = false; }, 100);
+        }
+    };
+
+    const redo = () => {
+        // Force commit shouldn't be necessary for redo usually (as we are going forward),
+        // but for consistency if we made a change then decided to redo??
+        // Actually if we make a change, history is sliced, so we can't redo.
+        // So redo checks are safe.
+        // But let's keep logic simple.
+
+        if (historyIndex.value < history.value.length - 1) {
+            isUndoRedoOp.value = true;
+            historyIndex.value++;
+            const snapshot = history.value[historyIndex.value];
+            if (snapshot) {
+                store.loadDeck(JSON.parse(JSON.stringify(snapshot.deck)));
+                store.goto(snapshot.currentIndex); // Restore slide position
+            }
+            setTimeout(() => { isUndoRedoOp.value = false; }, 100);
+        }
+    };
+
+    // --- Keyboard Shortcuts ---
+    const handleKeydown = (e: KeyboardEvent) => {
+        // Only trigger if no input/textarea is focused (unless it's just a general command)
+        // Actually, standard undo/redo SHOULD work in inputs too, but browser handles that natively for text.
+        // We want app-level undo.
+
+        if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
+            if (e.shiftKey) {
+                e.preventDefault();
+                redo();
+            } else {
+                e.preventDefault();
+                undo();
+            }
+        } else if ((e.ctrlKey || e.metaKey) && e.key === 'y') {
+            e.preventDefault();
+            redo();
+        }
+    };
+
+    onMounted(() => {
+        window.addEventListener('keydown', handleKeydown);
+        // Initial commit
+        if (store.state.deck && history.value.length === 0) {
+            commit(true);
+        }
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('keydown', handleKeydown);
+    });
+
+    // --- Clipboard ---
+    const copy = () => {
+        if (!selection.value || !store.state.deck) return;
+        const data = getByPath(store.state.deck, selection.value);
+        if (data) {
+            clipboard.value = JSON.parse(JSON.stringify(data));
+        }
+    };
+
+    const paste = (targetArrayPath: string) => {
+        if (!clipboard.value) return;
+        store.addNode(targetArrayPath, JSON.parse(JSON.stringify(clipboard.value)));
+        // Watcher will catch this
+    };
+
+    // --- Update Helpers ---
+    const updateSelected = (key: string, value: any) => {
+        if (!selection.value) return;
+        store.updateNode(`${selection.value}.${key}`, value);
+    };
+
+    return {
+        selection,
+        clipboard,
+        store,
+        canUndo: computed(() => historyIndex.value > 0),
+        canRedo: computed(() => historyIndex.value < history.value.length - 1),
+        select,
+        getSelectedData,
+        updateSelected,
+        commit, // Exposed but mostly internal now
+        undo,
+        redo,
+        copy,
+        paste
+    };
+}
+
+export function useEditor() {
+    const editor = inject(EditorKey);
+    if (!editor) {
+        throw new Error("useEditor must be used within LuminaStudio");
+    }
+    return editor;
+}

package/src/composables/useElementState.ts

@@ -0,0 +1,81 @@
+import { computed, inject, type MaybeRefOrGetter, toValue } from 'vue';
+import { StoreKey } from '../core/store';
+import type { ElementState } from '../core/types';
+
+/** @internal */
+type CRef<T> = import('vue').ComputedRef<T>;
+
+/**
+ * Return type of {@link useElementState}. Composable bindings for visibility, style, and class
+ * derived from the engine’s element state (written by engine.element(id).show/hide/opacity/etc.).
+ */
+export interface UseElementStateReturn {
+  /** false when engine.element(id).hide() was called; true otherwise. Default true. */
+  visible: CRef<boolean>;
+  /** Combined style: opacity, transform, and any style from the store. Apply as :style="state.style". */
+  style: CRef<Record<string, string | number>>;
+  /** Extra CSS classes from the store. Merge with component classes. */
+  class: CRef<string>;
+}
+
+/**
+ * Composable that subscribes to the engine’s element state for a given id. Use in custom
+ * layouts when you need to apply visibility/style/class yourself instead of using
+ * LuminaElement. Requires Lumina app context (StoreKey). If store is missing, returns
+ * safe defaults (visible true, empty style and class).
+ *
+ * @param id - Element id: string, Ref, or getter. From resolveId, elemId, or explicit id.
+ * @returns {UseElementStateReturn} visible, style, class. Bind :style and :class. When visible is
+ * false, style includes opacity: 0 so the element keeps its layout space (no v-show/display:none).
+ *
+ * @example
+ * const id = computed(() => resolveId(props.data, props.slideIndex, ['tag']));
+ * const state = useElementState(id);
+ * // In template: <span :style="state.style" :class="state.class">...</span>
+ *
+ * @see LuminaElement
+ * @see resolveId
+ * @see ElementState
+ */
+export function useElementState(id: MaybeRefOrGetter<string>): UseElementStateReturn {
+  const store = inject(StoreKey);
+  if (!store) {
+    return {
+      visible: computed(() => true),
+      style: computed(() => ({})),
+      class: computed(() => '')
+    };
+  }
+
+  const visible = computed(() => {
+    const resolved = toValue(id);
+    if (!resolved) return true;
+    const s = store.state.elementState[resolved];
+    return s?.visible !== false;
+  });
+
+  const style = computed(() => {
+    const resolved = toValue(id);
+    if (!resolved) return {};
+    const s = store.state.elementState[resolved] as ElementState | undefined;
+    const out: Record<string, string | number> = {};
+    // When not visible: opacity 0 so the element keeps its layout space (like slides in any app)
+    if (s?.visible === false) {
+      out.opacity = 0;
+    } else if (s?.opacity !== undefined) {
+      out.opacity = s.opacity;
+    }
+    if (s?.transform) out.transform = s.transform;
+    if (s?.style && typeof s.style === 'object') Object.assign(out, s.style);
+    return out;
+  });
+
+  const classVal = computed(() => {
+    const resolved = toValue(id);
+    if (!resolved) return '';
+    const s = store.state.elementState[resolved];
+    return (s?.class as string) || '';
+  });
+
+  return { visible, style, class: classVal };
+}

package/src/composables/useFlexLayout.ts

@@ -0,0 +1,122 @@
+import type { FlexElementContent } from '../core/types';
+import type { CSSProperties } from 'vue';
+
+// Constants
+export const spacingVarMap: Record<string, string> = {
+    'none': 'var(--lumina-space-none, 0)',
+    'xs': 'var(--lumina-space-xs)',
+    'sm': 'var(--lumina-space-sm)',
+    'md': 'var(--lumina-space-md)',
+    'lg': 'var(--lumina-space-lg)',
+    'xl': 'var(--lumina-space-xl)',
+    '2xl': 'var(--lumina-space-2xl)',
+    '3xl': 'var(--lumina-space-3xl)',
+    '4xl': 'var(--lumina-space-4xl)',
+};
+
+export const sizeMap: Record<string, string> = {
+    'auto': 'auto',
+    'quarter': '25%',
+    'third': '33.333%',
+    'half': '50%',
+    'two-thirds': '66.666%',
+    'three-quarters': '75%',
+    'full': '100%',
+};
+
+export const valignMap: Record<string, string> = {
+    'top': 'flex-start',
+    'Top': 'flex-start',
+    'center': 'center',
+    'Center': 'center',
+    'bottom': 'flex-end',
+    'Bottom': 'flex-end',
+};
+
+export const halignMap: Record<string, string> = {
+    'left': 'flex-start',
+    'Left': 'flex-start',
+    'center': 'center',
+    'Center': 'center',
+    'right': 'flex-end',
+    'Right': 'flex-end',
+};
+
+// Helpers
+export const getSizeClass = (size?: string): string => {
+    if (!size || size === 'auto') return 'flex-1';
+    return '';
+};
+
+export const getFlexItemStyle = (element: { size?: string }, directionVertical: boolean): CSSProperties => {
+    const size = element.size || 'auto';
+    if (size === 'auto') return { flex: '1 1 auto' };
+    return {
+        flex: `0 0 ${sizeMap[size]}`,
+        maxWidth: !directionVertical ? sizeMap[size] : undefined,
+        maxHeight: directionVertical ? sizeMap[size] : undefined,
+    };
+};
+
+export const getFlexContainerStyle = (element: FlexElementContent): CSSProperties => {
+    const valign = element.valign || 'center';
+    const halign = element.halign || 'left';
+    const gap = element.gap || 'md';
+    const padding = element.padding || 'lg';
+
+    return {
+        display: 'flex',
+        flexDirection: 'column', // Content containers are always column based for children
+        justifyContent: valignMap[valign] as CSSProperties['justifyContent'],
+        alignItems: halignMap[halign] as CSSProperties['alignItems'],
+        gap: spacingVarMap[gap],
+        padding: spacingVarMap[padding],
+    };
+};
+
+// Deprecated: kept for backward compat if needed, but we will update consumers
+export const getElementStyle = getFlexItemStyle;
+export const getContentStyle = (element: FlexElementContent & { size?: string }): CSSProperties => {
+    // Legacy combined style
+    return {
+        ...getFlexItemStyle(element, false), // Default assumption
+        ...getFlexContainerStyle(element)
+    };
+};
+
+export const getTopLevelStyle = (): CSSProperties => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: spacingVarMap['lg'],
+});
+
+/**
+ * Alignment for the main flex slide container (all elements as a group).
+ * When direction is horizontal: justify-content = halign, align-items = valign.
+ * When direction is vertical: justify-content = valign, align-items = halign.
+ */
+export const getFlexSlideMainStyle = (
+    direction: 'horizontal' | 'vertical' | undefined,
+    halign: string | undefined,
+    valign: string | undefined
+): CSSProperties => {
+    const jc = direction === 'vertical' ? valignMap[valign || 'top'] : halignMap[halign || 'left'];
+    const ai = direction === 'vertical' ? halignMap[halign || 'left'] : valignMap[valign || 'top'];
+    return {
+        justifyContent: jc as CSSProperties['justifyContent'],
+        alignItems: ai as CSSProperties['alignItems'],
+    };
+};
+
+export const getRoundedClass = (rounded?: string, fill?: boolean) => {
+    if (fill !== false && !rounded) return 'w-full h-full';
+    const map: Record<string, string> = {
+        'none': 'w-full h-full rounded-none',
+        'sm': 'w-full h-full rounded-sm',
+        'md': 'w-full h-full rounded-md',
+        'lg': 'w-full h-full rounded-lg',
+        'xl': 'w-full h-full rounded-xl',
+        'full': 'w-full h-full rounded-full',
+    };
+    return map[rounded || 'lg'] || 'w-full h-full rounded-lg';
+};

package/src/composables/useKeyboard.ts

@@ -0,0 +1,45 @@
+import { onMounted, onUnmounted, inject } from 'vue';
+import { StoreKey } from '../core/store';
+
+/**
+ * GLOBAL KEYBOARD HANDLER
+ * 
+ * Binds global keyboard events (Arrow Keys, Enter, etc.) to store actions.
+ * Throttles input to prevent accidental double-skips.
+ * Respects 'navigation' and 'keyboard' global flags.
+ */
+export function useKeyboard() {
+    const store = inject(StoreKey);
+
+    if (!store) return;
+
+    let lastTime = 0;
+    const THROTTLE_MS = 300;
+
+    const handleKeydown = (e: KeyboardEvent) => {
+        const { options } = store.state;
+        if (!options.keyboard || !options.navigation) return;
+
+        const now = Date.now();
+        if (now - lastTime < THROTTLE_MS) return;
+
+        const nextKeys = options.keys?.next || [];
+        const prevKeys = options.keys?.prev || [];
+
+        if (nextKeys.includes(e.key)) {
+            store.next();
+            lastTime = now;
+        } else if (prevKeys.includes(e.key)) {
+            store.prev();
+            lastTime = now;
+        }
+    };
+
+    onMounted(() => {
+        window.addEventListener('keydown', handleKeydown);
+    });
+
+    onUnmounted(() => {
+        window.removeEventListener('keydown', handleKeydown);
+    });
+}