lumina-slides 8.9.4 → 9.0.0

package/src/utils/firebase.ts

@@ -0,0 +1,184 @@
+import { initializeApp, FirebaseApp, FirebaseOptions } from "firebase/app";
+import { getFirestore, Firestore, collection, addDoc, doc, getDoc, setDoc, DocumentReference, query, where, getDocs } from "firebase/firestore";
+import { getAuth, Auth, GoogleAuthProvider } from "firebase/auth";
+import type { Deck } from "../core/types";
+
+interface FirebaseClient {
+    app: FirebaseApp;
+    db: Firestore;
+    auth: Auth;
+    provider: GoogleAuthProvider;
+}
+
+// Singleton instance
+let firebaseInstance: FirebaseClient | undefined;
+
+/**
+ * Initialize Firebase with environment variables.
+ * This should be called once in main.ts.
+ */
+export const initFirebase = (): FirebaseClient => {
+    if (firebaseInstance) return firebaseInstance;
+
+    const config: FirebaseOptions = {
+        apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+        authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+        projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+        storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+        messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+        appId: import.meta.env.VITE_FIREBASE_APP_ID
+    };
+
+    // Validation (Professional Practice)
+    if (!config.apiKey) {
+        throw new Error("Missing Firebase Configuration: VITE_FIREBASE_API_KEY is not defined.");
+    }
+
+    const app = initializeApp(config);
+    const db = getFirestore(app);
+    const auth = getAuth(app);
+    const provider = new GoogleAuthProvider();
+
+    firebaseInstance = { app, db, auth, provider };
+    return firebaseInstance;
+};
+
+/**
+ * Get the initialized Auth instance. Throws if not initialized.
+ */
+export const getFirebaseAuth = (): Auth => {
+    if (!firebaseInstance) throw new Error("Firebase not initialized. Call initFirebase() in main.ts.");
+    return firebaseInstance.auth;
+};
+
+/**
+ * Get the initialized Auth Provider.
+ */
+export const getAuthProvider = (): GoogleAuthProvider => {
+    if (!firebaseInstance) throw new Error("Firebase not initialized.");
+    return firebaseInstance.provider;
+};
+
+/**
+ * Get the initialized Firestore instance.
+ */
+export const getFirestoreDb = (): Firestore => {
+    if (!firebaseInstance) throw new Error("Firebase not initialized.");
+    return firebaseInstance.db;
+};
+
+/**
+ * Save a deck (presentation) to Firestore.
+ */
+export const saveDeck = async (deck: Deck, userId?: string, userName?: string): Promise<string> => {
+    const db = getFirestoreDb();
+
+    try {
+        const metaUpdates: Deck['meta'] = { ...deck.meta };
+
+        if (userId) metaUpdates.authorId = userId;
+        if (userName) metaUpdates.authorName = userName;
+
+        const dataToSave = {
+            meta: metaUpdates,
+            slides: deck.slides || [],
+            savedAt: new Date().toISOString(),
+            version: '1.0'
+        };
+
+        const docRef: DocumentReference = await addDoc(collection(db, "decks"), dataToSave);
+        return docRef.id;
+    } catch (e: unknown) {
+        const error = e instanceof Error ? e : new Error(String(e));
+        console.error("Error adding document: ", error);
+        throw error;
+    }
+};
+
+/**
+ * Retrieve all decks belonging to a specific user (excluding deleted).
+ */
+export const getUserDecks = async (userId: string): Promise<Deck[]> => {
+    const db = getFirestoreDb();
+    try {
+        const q = query(
+            collection(db, "decks"),
+            where("meta.authorId", "==", userId)
+        );
+        const querySnapshot = await getDocs(q);
+
+        return querySnapshot.docs
+            .map((doc) => {
+                const data = doc.data();
+                return {
+                    meta: { ...data.meta, id: doc.id },
+                    slides: data.slides
+                } as Deck;
+            })
+            .filter(deck => !deck.meta.deletedAt); // Safe client-side filter
+    } catch (e: unknown) {
+        const error = e instanceof Error ? e : new Error(String(e));
+        console.error("Error fetching user decks: ", error);
+        throw error;
+    }
+};
+
+/**
+ * Soft delete a deck by setting deletedAt timestamp.
+ */
+export const softDeleteDeck = async (id: string): Promise<void> => {
+    const db = getFirestoreDb();
+    try {
+        const docRef = doc(db, "decks", id);
+        await setDoc(docRef, {
+            meta: { deletedAt: new Date().toISOString() }
+        }, { merge: true });
+    } catch (e: unknown) {
+        const error = e instanceof Error ? e : new Error(String(e));
+        console.error("Error soft deleting document: ", error);
+        throw error;
+    }
+};
+
+export const updateDeck = async (id: string, deck: Deck): Promise<void> => {
+    const db = getFirestoreDb();
+
+    try {
+        const dataToSave = {
+            meta: deck.meta || {},
+            slides: deck.slides || [],
+            updatedAt: new Date().toISOString(),
+            version: '1.0'
+        };
+
+        const docRef = doc(db, "decks", id);
+        await setDoc(docRef, dataToSave, { merge: true });
+    } catch (e: unknown) {
+        const error = e instanceof Error ? e : new Error(String(e));
+        console.error("Error updating document: ", error);
+        throw error;
+    }
+};
+
+export const getDeck = async (id: string): Promise<Deck | null> => {
+    const db = getFirestoreDb();
+
+    try {
+        const docRef = doc(db, "decks", id);
+        const docSnap = await getDoc(docRef);
+
+        if (docSnap.exists()) {
+            const data = docSnap.data();
+            return {
+                meta: data.meta,
+                slides: data.slides
+            } as Deck;
+        } else {
+            return null;
+        }
+    } catch (e: unknown) {
+        const error = e instanceof Error ? e : new Error(String(e));
+        console.error("Error getting document: ", error);
+        throw error;
+    }
+};

package/src/utils/streaming.ts

@@ -0,0 +1,134 @@
+
+/**
+ * Streaming utilities for piping LLM token streams into Lumina.
+ * Use when the model streams JSON incrementally; these helpers tolerate incomplete output.
+ */
+
+/**
+ * Parses possibly incomplete JSON by auto-closing unclosed brackets and strings.
+ * Use in your LLM stream handler: append chunks to a buffer, call this on each chunk;
+ * when it returns non-null, pass the result to `engine.load()` for progressive rendering.
+ *
+ * @param input - Raw or partial JSON string (e.g. from SSE or WebSocket chunks).
+ * @returns Parsed object, or `null` if the string cannot be repaired to valid JSON.
+ * @example
+ * let buf = "";
+ * for await (const chunk of stream) {
+ *   buf += chunk;
+ *   const json = parsePartialJson(buf);
+ *   if (json) engine.load(json);
+ * }
+ */
+export function parsePartialJson(input: string): any {
+    let fixed = input.trim();
+
+    // 1. Remove trailing commas (common in streams)
+    fixed = fixed.replace(/,(\s*[}\]])/g, '$1');
+
+    // 2. Count open brackets/braces
+    const stack: string[] = [];
+    let inString = false;
+    let isEscaped = false;
+
+    for (let i = 0; i < fixed.length; i++) {
+        const char = fixed[i];
+
+        if (inString) {
+            if (char === '\\') {
+                isEscaped = !isEscaped;
+            } else if (char === '"' && !isEscaped) {
+                inString = false;
+            } else {
+                isEscaped = false;
+            }
+            continue;
+        }
+
+        if (char === '"') {
+            inString = true;
+        } else if (char === '{') {
+            stack.push('}');
+        } else if (char === '[') {
+            stack.push(']');
+        } else if (char === '}') {
+            if (stack[stack.length - 1] === '}') stack.pop();
+        } else if (char === ']') {
+            if (stack[stack.length - 1] === ']') stack.pop();
+        }
+    }
+
+    // 3. Auto-close strings
+    if (inString) {
+        fixed += '"';
+        // If we closed a property key "key": "val, we might need value closing
+        // But usually streams cut off at value. "title": "my tit
+    }
+
+    // 4. Auto-close structural stack in reverse
+    while (stack.length > 0) {
+        fixed += stack.pop();
+    }
+
+    try {
+        return JSON.parse(fixed);
+    } catch (e) {
+        // If it still fails, return null or a safe fallback
+        // console.warn("Stream parse failed, waiting for more chunks...");
+        return null;
+    }
+}
+
+
+/**
+ * Returns a function that parses partial JSON and invokes `callback` only after the stream
+ * has been idle for `delay` ms. Reduces UI jitter when tokens arrive very fast.
+ *
+ * @param callback - Called with the parsed object when a valid parse occurs after the debounce.
+ * @param delay - Idle time in ms before firing. Default 50.
+ * @returns A function `(raw: string) => void` to call with each concatenated chunk.
+ * @example
+ * const onChunk = createDebouncedLoader((deck) => engine.load(deck), 80);
+ * for await (const c of stream) { buffer += c; onChunk(buffer); }
+ */
+export function createDebouncedLoader<T>(
+    callback: (data: T) => void,
+    delay = 50
+) {
+    let timeout: any = null;
+
+    return (rawData: string) => {
+        const parsed = parsePartialJson(rawData);
+
+        if (!parsed) return; // Skip invalid frames
+
+        if (timeout) clearTimeout(timeout);
+
+        timeout = setTimeout(() => {
+            callback(parsed);
+        }, delay);
+    };
+}
+
+
+/**
+ * Returns whether a slide object has the minimum fields needed to render.
+ * Use when streaming to decide between showing the slide or a skeleton/placeholder.
+ *
+ * @param slide - A possible slide object (e.g. from `parsePartialJson` mid-stream).
+ * @returns `true` if `slide.type` exists and type-specific required fields (e.g. `title` for statement, `features` for features) are present.
+ * @example
+ * const json = parsePartialJson(buffer);
+ * if (json?.slides) json.slides.forEach((s, i) => { if (isSlideReady(s)) showSlide(i, s); else showSkeleton(i); });
+ */
+export function isSlideReady(slide: any): boolean {
+    if (!slide) return false;
+    if (!slide.type) return false;
+
+    // For statement, we need at least a title partial
+    if (slide.type === 'statement' && typeof slide.title !== 'string') return false;
+
+    // For features, we need the array to exist
+    if (slide.type === 'features' && !Array.isArray(slide.features)) return false;
+
+    return true;
+}

package/src/views/DashboardView.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="min-h-screen bg-[#030303] text-white">
+        <SiteNavBar active-page="dashboard" @navigate="handleNavigate" />
+
+        <SiteDashboard @select-deck="openDeck" />
+
+        <SiteFooter />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import SiteNavBar from '../components/site/SiteNavBar.vue';
+import SiteDashboard from '../components/site/SiteDashboard.vue';
+import SiteFooter from '../components/site/SiteFooter.vue';
+
+const router = useRouter();
+
+const handleNavigate = (page: string) => {
+    // Map internal page names to route names
+    // 'home', 'examples', etc usually match
+    const routeName = page === 'prompt-builder' ? 'prompt-builder' : page;
+    router.push({ name: routeName });
+};
+
+const openDeck = (deckId: string) => {
+    // Navigate to studio to edit
+    // Or maybe we want to view it first?
+    // Let's assume dashboard opens Editor for now as requested in previous flow
+    router.push({ name: 'studio', params: { id: deckId } });
+};
+</script>

package/src/views/DeckView.vue

@@ -0,0 +1,289 @@
+<template>
+    <div class="lumina-deck-root w-full relative bg-black">
+        <!-- Edit (owner) -->
+        <button v-if="canEdit" @click="editDeck"
+            class="fixed top-6 right-6 max-sm:top-auto max-sm:bottom-24 max-sm:right-20 z-[100] px-4 py-2 max-sm:px-2.5 max-sm:py-2 rounded-full bg-blue-600 border border-blue-500 text-xs font-bold uppercase hover:bg-blue-500 transition backdrop-blur-md flex items-center gap-2">
+            <i class="ph-thin ph-pencil-simple"></i>
+            <span class="max-sm:hidden">Edit</span>
+        </button>
+
+        <!-- Duplicate & Edit (GPT / non-owner): copies the deck for the user and prompts login if needed -->
+        <button v-else-if="showDuplicateEdit" @click="duplicateAndEdit" :disabled="duplicating"
+            class="fixed top-6 right-6 max-sm:top-auto max-sm:bottom-24 max-sm:right-20 z-[100] px-4 py-2 max-sm:px-2.5 max-sm:py-2 rounded-full bg-blue-600/90 border border-blue-500 text-xs font-bold uppercase hover:bg-blue-500 transition backdrop-blur-md flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+            :title="duplicating ? 'Copying…' : 'Duplicate & Edit'">
+            <i v-if="duplicating" class="ph-thin ph-spinner ph-spin"></i>
+            <i v-else class="ph-thin ph-copy"></i>
+            <span class="max-sm:hidden">{{ duplicating ? 'Copying…' : 'Duplicate & Edit' }}</span>
+        </button>
+
+        <!-- Modal: sign in to duplicate and edit -->
+        <Teleport to="body">
+            <div v-if="showLoginModal" class="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
+                @click.self="showLoginModal = false">
+                <div class="bg-[#0f0f0f] border border-white/10 rounded-2xl p-6 max-w-sm w-full shadow-2xl"
+                    @click.stop>
+                    <h3 class="text-lg font-bold text-white mb-2">Sign in to duplicate</h3>
+                    <p class="text-white/60 text-sm mb-6">Create a copy in your account to edit this presentation.</p>
+                    <div class="flex flex-col gap-3">
+                        <button @click="onLoginAndDuplicate" :disabled="loginLoading"
+                            class="w-full px-4 py-3 rounded-xl bg-white text-black font-bold flex items-center justify-center gap-2 hover:bg-white/90 transition disabled:opacity-60">
+                            <i v-if="loginLoading" class="ph-thin ph-spinner ph-spin"></i>
+                            <i v-else class="ph-thin ph-google-logo"></i>
+                            {{ loginLoading ? 'Signing in…' : 'Sign in with Google' }}
+                        </button>
+                        <button @click="showLoginModal = false"
+                            class="w-full px-4 py-2 rounded-xl border border-white/20 text-white/80 font-medium hover:bg-white/5 transition">
+                            Cancel
+                        </button>
+                    </div>
+                    <p v-if="loginError" class="mt-4 text-sm text-red-400">{{ loginError }}</p>
+                </div>
+            </div>
+        </Teleport>
+
+        <!-- Container -->
+        <div id="deck-container" class="w-full h-full min-h-0 overflow-hidden"></div>
+
+        <!-- Timeline (Remotion-style) for animation-timeline example -->
+        <div v-if="showTimelineUI" class="fixed bottom-0 left-0 right-0 z-[90] flex items-center gap-3 px-4 py-3 bg-black/90 border-t border-white/10 backdrop-blur">
+            <span class="text-white/70 text-sm tabular-nums w-10">{{ Math.round(timelineProgress) }}%</span>
+            <input type="range" min="0" max="100" step="0.5" :value="timelineProgress"
+                class="flex-1 h-2 rounded accent-blue-500"
+                @input="onTimelineInput" />
+            <button type="button" :disabled="timelinePlaying"
+                class="px-3 py-1.5 rounded bg-blue-600 text-white text-sm font-medium hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                @click="onTimelinePlay">Play</button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted, computed, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { Lumina } from '../core/Lumina';
+import { getDeck, saveDeck, initFirebase } from '../utils/firebase';
+import { useAuth } from '../composables/useAuth';
+import type { Deck } from '../core/types';
+
+const route = useRoute();
+const router = useRouter();
+const { user, loginWithGoogle } = useAuth();
+let engine: Lumina | null = null;
+const engineRef = ref<Lumina | null>(null);
+const deckAuthorId = ref<string | null>(null);
+const loadedDeck = ref<Deck | null>(null);
+const duplicating = ref(false);
+const showLoginModal = ref(false);
+const loginError = ref('');
+const loginLoading = ref(false);
+
+// Timeline (Remotion-style) for animation-timeline
+const timelineProgress = ref(0);
+const currentSlideIndex = ref(0);
+const timelinePlaying = ref(false);
+const timelineCancelRef = ref<(() => void) | null>(null);
+const timelineIntervalRef = ref<ReturnType<typeof setInterval> | null>(null);
+
+const showTimelineUI = computed(() => {
+    const id = route.params.id as string;
+    if (id !== 'animation-timeline') return false;
+    const slide = loadedDeck.value?.slides[currentSlideIndex.value] as { timelineTracks?: unknown } | undefined;
+    return !!slide?.timelineTracks;
+});
+
+function onTimelineInput(e: Event) {
+    const v = parseFloat((e.target as HTMLInputElement).value);
+    timelineProgress.value = v;
+    engineRef.value?.seekTo(v / 100);
+}
+
+function onTimelinePlay() {
+    if (timelinePlaying.value || !engineRef.value) return;
+    timelinePlaying.value = true;
+    const [promise, cancel] = engineRef.value.playTimeline(5);
+    timelineCancelRef.value = cancel;
+    timelineIntervalRef.value = setInterval(() => {
+        if (!engineRef.value) return;
+        const p = engineRef.value.timelineProgress;
+        timelineProgress.value = p * 100;
+        if (p >= 1) {
+            if (timelineIntervalRef.value) clearInterval(timelineIntervalRef.value);
+            timelineIntervalRef.value = null;
+            timelinePlaying.value = false;
+            timelineCancelRef.value = null;
+        }
+    }, 50);
+    promise.then(() => {
+        if (timelineIntervalRef.value) clearInterval(timelineIntervalRef.value);
+        timelineIntervalRef.value = null;
+        timelinePlaying.value = false;
+        timelineCancelRef.value = null;
+    });
+}
+
+const canEdit = computed(() => {
+    return user.value && deckAuthorId.value && user.value.uid === deckAuthorId.value;
+});
+
+const showDuplicateEdit = computed(() => {
+    const hasDuplicateParam = 'duplicate' in route.query;
+    return hasDuplicateParam && !canEdit.value && loadedDeck.value != null;
+});
+
+const editDeck = () => {
+    router.push({ name: 'studio', params: { id: route.params.id } });
+};
+
+async function duplicateAndEdit() {
+    if (!loadedDeck.value) return;
+    if (!user.value) {
+        showLoginModal.value = true;
+        loginError.value = '';
+        return;
+    }
+    duplicating.value = true;
+    try {
+        const { id: _id, authorId: _aid, authorName: _an, ...restMeta } = loadedDeck.value.meta || {};
+        const copyMeta = { ...restMeta, title: (loadedDeck.value.meta?.title || 'Presentation') + ' (Copy)' };
+        const copy: Deck = { meta: copyMeta, slides: loadedDeck.value.slides || [] };
+        const newId = await saveDeck(copy, user.value.uid, user.value.displayName || undefined);
+        router.push({ name: 'studio', params: { id: newId } });
+    } catch (e) {
+        console.error('Failed to duplicate deck:', e);
+        alert('Could not create a copy. Please try again.');
+    } finally {
+        duplicating.value = false;
+    }
+}
+
+async function onLoginAndDuplicate() {
+    loginError.value = '';
+    loginLoading.value = true;
+    try {
+        await loginWithGoogle();
+        showLoginModal.value = false;
+        await duplicateAndEdit();
+    } catch (e: unknown) {
+        const msg = e instanceof Error ? e.message : 'Sign-in failed. Please try again.';
+        loginError.value = msg;
+    } finally {
+        loginLoading.value = false;
+    }
+}
+
+onMounted(async () => {
+    try {
+        initFirebase();
+    } catch (e) { }
+
+        const deckId = route.params.id as string;
+        if (!deckId) return;
+
+        try {
+            let deckData: Deck | null = null;
+            const isExample = deckId.startsWith('deck') || deckId.startsWith('layout') || deckId.startsWith('theme') || deckId.startsWith('animation');
+
+        if (isExample) {
+            const response = await fetch(`${import.meta.env.BASE_URL}${deckId}.json`);
+            deckData = (await response.json()) as Deck;
+        } else {
+            deckData = await getDeck(deckId);
+        }
+
+        if (deckData?.meta?.authorId) {
+            deckAuthorId.value = deckData.meta.authorId;
+        }
+        if (!deckData) throw new Error('Deck not found');
+
+        loadedDeck.value = deckData;
+
+        engine = new Lumina('#deck-container', {
+            loop: true,
+            studio: false,
+            debug: isExample,
+            navigation: true,
+            ui: {
+                visible: true,
+                showSlideCount: true,
+                showControls: true,
+                showProgressBar: true
+            },
+            theme: (deckData as Deck & { theme?: string }).theme || 'default'
+        });
+        engineRef.value = engine;
+
+        if (deckId === 'layout-element-control') {
+            engine.on('ready', () => {
+                ['s0-tag', 's0-title', 's0-subtitle'].forEach((id, i) => {
+                    setTimeout(() => engine?.element(id).show(), (i + 1) * 700);
+                });
+            });
+            engine.on('slideChange', ({ index }) => {
+                if (index === 1) {
+                    ['s1-tag', 's1-title', 's1-subtitle'].forEach((id, i) => {
+                        setTimeout(() => engine?.element(id).show(), (i + 1) * 700);
+                    });
+                }
+            });
+        }
+
+        if (deckId === 'animation-presets') {
+            const presets = ['fadeUp', 'scaleIn', 'spring'] as const;
+            engine.on('ready', () => engine?.revealInSequence(0, { preset: presets[0], delayMs: 450 }));
+            engine.on('slideChange', ({ index }) => {
+                engine?.revealInSequence(index, { preset: presets[index] ?? 'fadeUp', delayMs: 450 });
+            });
+        }
+
+        if (deckId === 'animation-stagger') {
+            const modes = ['center-out', 'wave', 'random'] as const;
+            engine.on('ready', () =>
+                engine?.revealInSequence(0, { preset: 'scaleIn', staggerMode: modes[0], delayMs: 380 })
+            );
+            engine.on('slideChange', ({ index }) => {
+                engine?.revealInSequence(index, {
+                    preset: 'scaleIn',
+                    staggerMode: modes[index] ?? 'sequential',
+                    randomSeed: index,
+                    delayMs: 380
+                });
+            });
+        }
+
+        if (deckId === 'animation-timeline') {
+            engine.on('ready', () => {
+                engine?.seekTo(0);
+                timelineProgress.value = 0;
+                currentSlideIndex.value = 0;
+            });
+            engine.on('slideChange', ({ index }) => {
+                if (timelineIntervalRef.value) {
+                    clearInterval(timelineIntervalRef.value);
+                    timelineIntervalRef.value = null;
+                }
+                timelineCancelRef.value?.();
+                timelineCancelRef.value = null;
+                timelinePlaying.value = false;
+                currentSlideIndex.value = index;
+                engine?.seekTo(0, index);
+                timelineProgress.value = 0;
+            });
+        }
+
+        engine.load(deckData);
+    } catch (error) {
+        console.error("Failed to load deck:", error);
+        alert("Failed to load presentation.");
+        router.push({ name: 'dashboard' });
+    }
+});
+
+onUnmounted(() => {
+    if (timelineIntervalRef.value) clearInterval(timelineIntervalRef.value);
+    timelineCancelRef.value?.();
+    if (engine) {
+        engine.destroy();
+    }
+    engineRef.value = null;
+});
+</script>

package/src/views/HomeView.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="min-h-screen">
+        <SiteNavBar active-page="home" @navigate="(p) => router.push({ name: p })" />
+        <SiteHome @navigate="(p) => router.push({ name: p })" />
+        <SiteFooter />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import SiteNavBar from '../components/site/SiteNavBar.vue';
+import SiteHome from '../components/site/SiteHome.vue';
+// Assuming we extract footer or just include it here
+import SiteFooter from '../components/site/SiteFooter.vue';
+
+const router = useRouter();
+</script>

package/src/views/SiteLayout.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="min-h-screen bg-[#030303] text-white flex flex-col">
+        <SiteNavBar :active-page="currentPage" />
+
+        <main class="flex-1 w-full">
+            <router-view />
+        </main>
+
+        <SiteFooter />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import SiteNavBar from '../components/site/SiteNavBar.vue';
+import SiteFooter from '../components/site/SiteFooter.vue';
+
+const route = useRoute();
+const currentPage = computed(() => route.name?.toString() || '');
+</script>