lumina-slides 8.9.4 → 9.0.0

package/src/components/site/SiteDashboard.vue

@@ -0,0 +1,604 @@
+<template>
+    <!-- Ambient Background Glow -->
+    <div class="fixed inset-0 pointer-events-none overflow-hidden z-0">
+        <div
+            class="absolute -top-[20%] -left-[10%] w-[60%] h-[60%] bg-blue-600/5 blur-[120px] rounded-full animate-pulse-soft">
+        </div>
+        <div class="absolute -bottom-[20%] -right-[10%] w-[50%] h-[50%] bg-indigo-600/5 blur-[120px] rounded-full animate-pulse-soft"
+            style="animation-delay: 1.5s"></div>
+    </div>
+
+    <div class="min-h-screen pt-32 px-8 max-w-7xl mx-auto relative z-10">
+        <!-- Header Section (Clean Premium) -->
+        <div class="flex flex-col md:flex-row md:items-end justify-between mb-20 gap-8 relative">
+            <div>
+                <div class="flex items-center gap-3 mb-6">
+                    <div
+                        class="w-10 h-10 rounded-2xl bg-blue-600/20 flex items-center justify-center text-blue-500 border border-blue-500/10">
+                        <i class="ph-thin ph-stack text-sm"></i>
+                    </div>
+                    <span
+                        class="text-[11px] font-black text-blue-500 uppercase tracking-[0.4em] leading-none">Workspace</span>
+                </div>
+                <h2 class="text-6xl font-[800] tracking-[-0.04em] text-white mb-6 leading-[0.9]">
+                    My Presentations
+                </h2>
+                <p class="text-white/40 text-xl font-medium max-w-xl leading-relaxed tracking-tight">Design, present,
+                    and collaborate
+                    with Lumina Engine.</p>
+            </div>
+
+            <div class="relative">
+                <!-- Create Trigger (High End) -->
+                <button v-if="!isCreating" @click="isCreating = true"
+                    class="group relative px-10 py-5 rounded-[2rem] bg-white text-black font-black hover:scale-105 active:scale-95 transition-all duration-500 flex items-center gap-4 shadow-[0_30px_60px_-15px_rgba(255,255,255,0.3)] overflow-hidden">
+                    <div
+                        class="absolute inset-0 bg-gradient-to-tr from-transparent via-white/20 to-transparent translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000">
+                    </div>
+                    <i class="ph-thin ph-plus-circle text-xl"></i>
+                    <span class="tracking-tight text-lg">New Presentation</span>
+                </button>
+
+                <!-- Premium Popover Form -->
+                <Transition name="spring-pop">
+                    <div v-if="isCreating"
+                        class="absolute right-0 top-0 w-[420px] bg-[#0d0d0d]/90 border border-white/10 rounded-[3rem] p-10 shadow-[0_50px_100px_rgba(0,0,0,0.9)] z-[100] backdrop-blur-3xl">
+
+                        <!-- Header -->
+                        <div class="flex items-center justify-between mb-10">
+                            <div>
+                                <h4 class="text-2xl font-black tracking-tight uppercase mb-1">New Presentation</h4>
+                                <div class="h-1 w-12 bg-blue-600 rounded-full"></div>
+                            </div>
+                            <button @click="isCreating = false"
+                                class="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-white/20 hover:text-white hover:bg-white/10 transition">
+                                <i class="ph-thin ph-x"></i>
+                            </button>
+                        </div>
+
+                        <div class="space-y-8">
+                            <div class="group/field">
+                                <div class="flex justify-between items-end mb-3 px-1">
+                                    <label
+                                        class="text-[10px] font-black text-white/20 uppercase tracking-[0.3em] group-focus-within/field:text-blue-500 transition">Display
+                                        Title</label>
+                                    <span class="text-[9px] text-white/10 font-bold uppercase">Required</span>
+                                </div>
+                                <div class="relative">
+                                    <input v-model="newDeckForm.title" type="text"
+                                        class="w-full bg-white/[0.03] border border-white/5 rounded-2xl px-6 py-5 text-lg font-bold focus:border-blue-500 focus:bg-white/5 outline-none transition-all duration-500 shadow-inner"
+                                        @keyup.enter="createNewDeck" />
+                                    <Transition name="placeholder-slide">
+                                        <span v-if="!newDeckForm.title" :key="currentTitlePlaceholder"
+                                            class="absolute left-6 top-1/2 -translate-y-1/2 text-lg font-bold text-white/10 pointer-events-none select-none">
+                                            {{ currentTitlePlaceholder }}
+                                        </span>
+                                    </Transition>
+                                </div>
+                            </div>
+
+                            <div class="group/field">
+                                <label
+                                    class="block text-[10px] font-black text-white/20 uppercase tracking-[0.3em] mb-3 px-1">Summary</label>
+                                <div class="relative">
+                                    <textarea v-model="newDeckForm.description" rows="3"
+                                        class="w-full bg-white/[0.03] border border-white/5 rounded-2xl px-6 py-5 text-sm font-medium focus:border-blue-500 focus:bg-white/5 outline-none transition-all duration-500 resize-none shadow-inner"></textarea>
+                                    <Transition name="placeholder-slide">
+                                        <span v-if="!newDeckForm.description" :key="currentDescPlaceholder"
+                                            class="absolute left-6 top-5 text-sm font-medium text-white/10 pointer-events-none select-none max-w-[calc(100%-3rem)]">
+                                            {{ currentDescPlaceholder }}
+                                        </span>
+                                    </Transition>
+                                </div>
+                            </div>
+
+                            <button @click="createNewDeck" :disabled="!newDeckForm.title || creating"
+                                class="w-full py-6 rounded-[2rem] bg-blue-600 hover:bg-blue-500 disabled:opacity-20 disabled:grayscale text-white font-black text-lg transition-all duration-500 shadow-[0_20px_40px_-10px_rgba(37,99,235,0.4)] active:scale-[0.98] flex items-center justify-center gap-3">
+                                <i v-if="!creating" class="ph-thin ph-plus-circle"></i>
+                                <span v-if="!creating">Create Presentation</span>
+                                <span v-else class="flex items-center justify-center gap-2">
+                                    <i class="ph-thin ph-spinner ph-spin"></i> Finalizing...
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </Transition>
+            </div>
+        </div>
+
+        <!-- States -->
+        <div v-if="loading" class="flex flex-col items-center justify-center py-32 space-y-6">
+            <div class="relative w-16 h-16">
+                <div class="absolute inset-0 rounded-2xl border-2 border-white/5"></div>
+                <div class="absolute inset-0 rounded-2xl border-t-2 border-blue-500 animate-spin"></div>
+            </div>
+            <p class="text-white/30 font-medium tracking-wide">Syncing Workspace...</p>
+        </div>
+
+        <div v-else-if="error"
+            class="max-w-md mx-auto bg-red-500/5 border border-red-500/20 rounded-3xl p-10 text-center">
+            <div class="w-16 h-16 rounded-full bg-red-500/10 flex items-center justify-center mx-auto mb-6">
+                <i class="ph-thin ph-warning text-2xl text-red-500"></i>
+            </div>
+            <h3 class="text-xl font-bold mb-2">Sync Error</h3>
+            <p class="text-white/40 mb-8 text-sm leading-relaxed">{{ error }}</p>
+            <button @click="fetchDecks"
+                class="px-8 py-3 bg-white/10 hover:bg-white/20 rounded-xl text-xs font-black uppercase tracking-widest transition-all">
+                Reconnect
+            </button>
+        </div>
+
+        <div v-else-if="decks.length === 0"
+            class="flex flex-col items-center py-32 bg-white/[0.02] rounded-[3rem] border border-dashed border-white/10">
+            <div
+                class="w-24 h-24 rounded-[2rem] bg-gradient-to-br from-white/10 to-transparent flex items-center justify-center mb-8 text-4xl shadow-2xl">
+                ✨
+            </div>
+            <h3 class="text-2xl font-bold mb-3">Your canvas is empty</h3>
+            <p class="text-white/30 mb-10 max-w-sm text-center leading-relaxed">Start your next visual journey. Create a
+                deck to begin designing with Lumina Engine.</p>
+            <button @click="isCreating = true"
+                class="text-blue-400 font-extrabold hover:text-blue-300 transition-all flex items-center gap-2 group">
+                Create First Presentation <i
+                    class="ph-thin ph-arrow-right group-hover:translate-x-2 transition-transform"></i>
+            </button>
+        </div>
+
+        <!-- Deck Grid (Premium Stability) -->
+        <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 pb-20">
+            <div v-for="deck in decks" :key="deck.meta?.id"
+                class="group relative bg-[#0a0a0a] rounded-[2.5rem] border border-white/5 hover:border-white/10 transition-all duration-500 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.5)] hover:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.7)] flex flex-col overflow-hidden"
+                :style="getCardStyle(deck)">
+
+                <!-- Physical Inner Border -->
+                <div class="absolute inset-0 pointer-events-none rounded-[2.5rem] border border-white/[0.03] z-50">
+                </div>
+
+                <!-- Thumbnail Area (Abstract Identity) -->
+                <div class="relative aspect-[16/10] overflow-hidden">
+                    <!-- Dynamic Mesh Orb System -->
+                    <div class="absolute inset-0 opacity-40 mix-blend-screen group-hover:scale-110 transition-transform duration-1000"
+                        :style="getMeshStyle(deck)"></div>
+                    <div
+                        class="absolute inset-0 bg-gradient-to-br from-black/0 via-black/20 to-black/60 pointer-events-none">
+                    </div>
+
+                    <!-- Ambient Logo Watermark -->
+                    <div
+                        class="absolute inset-0 flex items-center justify-center z-10 opacity-10 group-hover:opacity-20 transition-opacity">
+                        <i class="ph-thin ph-shapes text-8xl text-white"></i>
+                    </div>
+
+                    <!-- Centered Actions on Hover -->
+                    <div
+                        class="absolute inset-0 z-30 flex items-center justify-center gap-6 bg-black/80 backdrop-blur-xl opacity-0 group-hover:opacity-100 transition-all duration-500">
+                        <button @click.stop="router.push({ name: 'studio', params: { id: deck.meta?.id } })"
+                            class="w-20 h-20 rounded-3xl bg-white text-black hover:scale-110 active:scale-90 transition-all flex flex-col items-center justify-center shadow-2xl group/btn"
+                            title="Open Studio">
+                            <i class="ph-thin ph-pencil-simple text-2xl mb-1.5"></i>
+                            <span class="text-[9px] font-black uppercase tracking-widest">Studio</span>
+                        </button>
+                        <button @click.stop="openDeckInNewTab(deck.meta?.id)"
+                            class="w-20 h-20 rounded-3xl text-white hover:scale-110 active:scale-95 transition-all flex flex-col items-center justify-center shadow-2xl group/play"
+                            :style="`background: ${getThemeColor(deck)}`" title="Start Presentation">
+                            <i class="ph-thin ph-play text-2xl mb-1.5 ml-1"></i>
+                            <span class="text-[9px] font-black uppercase tracking-widest">Play</span>
+                        </button>
+                    </div>
+
+                    <!-- Slide Count Badge -->
+                    <div class="absolute top-6 left-6 z-20">
+                        <div
+                            class="px-3 py-1.5 rounded-xl bg-black/60 backdrop-blur-md border border-white/10 flex items-center gap-2">
+                            <div class="w-1.5 h-1.5 rounded-full" :style="`background: ${getThemeColor(deck)}`"></div>
+                            <span class="text-[10px] font-black uppercase tracking-widest text-white/50">
+                                {{ deck.slides?.length || 0 }} {{ (deck.slides?.length === 1) ? 'Slide' : 'Slides' }}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Info Section (Accessible Actions) -->
+                <div class="p-10 flex-1 flex flex-col relative z-20">
+                    <div class="flex items-start justify-between mb-5">
+                        <div class="flex-1 min-w-0 pr-6"
+                            @click="router.push({ name: 'studio', params: { id: deck.meta?.id } })">
+                            <h3
+                                class="text-2xl font-extrabold text-white truncate hover:text-blue-500 transition-colors cursor-pointer tracking-tight leading-tight">
+                                {{ deck.meta?.title || 'Untitled' }}
+                            </h3>
+                            <p
+                                class="text-sm text-white/30 line-clamp-2 mt-3 leading-relaxed h-11 font-medium tracking-tight">
+                                {{ deck.meta?.description || 'No summary provided for this project.' }}
+                            </p>
+                        </div>
+
+                        <!-- Visible Delete Button -->
+                        <button @click.stop="confirmDelete(deck.meta?.id)"
+                            class="w-10 h-10 rounded-2xl flex items-center justify-center text-white/10 hover:text-red-500 hover:bg-red-500/10 transition-all duration-300 bg-white/5 border border-white/5"
+                            title="Delete Presentation">
+                            <i class="ph-thin ph-trash text-sm"></i>
+                        </button>
+                    </div>
+
+                    <div class="mt-auto pt-8 border-t border-white/[0.03] flex items-center justify-between">
+                        <div class="flex items-center gap-4">
+                            <div
+                                class="w-10 h-10 rounded-2xl bg-white/5 border border-white/5 flex items-center justify-center text-[11px] font-black text-white/30 uppercase tracking-tighter">
+                                {{ deck.meta?.authorName ? deck.meta.authorName.charAt(0) : 'L' }}
+                            </div>
+                            <div class="flex flex-col">
+                                <span
+                                    class="text-[9px] text-white/10 font-black uppercase tracking-[0.3em] mb-0.5">Updated</span>
+                                <span class="text-xs text-white/40 font-bold tracking-tight">{{
+                                    formatDate(deck.meta?.updatedAt || deck.meta?.savedAt) }}</span>
+                            </div>
+                        </div>
+
+                        <div class="flex items-center gap-2.5">
+                            <div class="w-2 h-2 rounded-full"
+                                :class="deck.meta?.isPublic ? 'bg-indigo-500 shadow-[0_0_15px_rgba(99,102,241,0.5)]' : 'bg-white/5'">
+                            </div>
+                            <div class="flex flex-col items-end">
+                                <span class="text-[8px] text-white/10 font-bold uppercase tracking-widest">{{
+                                    getReadingTime(deck) }} min read</span>
+                                <span class="text-[10px] font-black text-white/20 uppercase tracking-widest">v{{
+                                    deck.meta.version || '1.0' }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Delete Overlay (Premium & Authoritative) -->
+                <Transition name="fade-scale">
+                    <div v-if="deletingDeckId === deck.meta?.id"
+                        class="absolute inset-0 bg-[#0d0d0d] z-[60] flex flex-col items-center justify-center p-12 text-center"
+                        @click.stop>
+                        <div
+                            class="w-20 h-20 rounded-[2.5rem] bg-red-600/10 flex items-center justify-center mb-10 border border-red-600/10 text-red-500">
+                            <i class="ph-thin ph-trash text-3xl"></i>
+                        </div>
+                        <h4 class="text-2xl font-extrabold text-white/95 mb-3 tracking-tight leading-none">Permanently
+                            Delete?</h4>
+                        <p class="text-sm text-white/20 mb-12 max-w-[280px] leading-relaxed font-medium tracking-tight">
+                            This action cannot be undone. All data will be wiped from your workspace.</p>
+
+                        <div class="flex flex-col gap-4 w-full max-w-[260px]">
+                            <button @click.stop="handleDeleteDeck(deck.meta?.id)"
+                                class="w-full py-5 rounded-[1.5rem] bg-red-600 text-white font-extrabold text-[13px] uppercase tracking-widest hover:bg-red-500 transition-all shadow-[0_20px_40px_-5px_rgba(220,38,38,0.3)] active:scale-95">
+                                {{ deleting ? 'Processing...' : 'Delete Permanently' }}
+                            </button>
+                            <button @click.stop="deletingDeckId = null"
+                                class="w-full py-5 rounded-[1.5rem] bg-white/5 text-white font-extrabold text-[13px] uppercase tracking-widest hover:bg-white/10 transition-all border border-white/5 active:scale-95">
+                                Keep Presentation
+                            </button>
+                        </div>
+                    </div>
+                </Transition>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAuth } from '../../composables/useAuth';
+import { getUserDecks, saveDeck, softDeleteDeck } from '../../utils/firebase';
+import type { Deck } from '../../core/types';
+
+// const emit = defineEmits(['select-deck']); // No longer used
+const { user } = useAuth();
+const router = useRouter();
+
+const decks = ref<Deck[]>([]);
+const loading = ref(true);
+const creating = ref(false); // Action loading state
+const deleting = ref(false); // Global deleting state
+const deletingDeckId = ref<string | null>(null); // Specific deck being confirmed
+const isCreating = ref(false); // UI toggle state
+const error = ref<string | null>(null);
+
+const newDeckForm = ref({
+    title: '',
+    description: ''
+});
+
+// Dynamic Placeholder Logic
+const titlePlaceholders = [
+    "Quantum Leap into Visual Intelligence",
+    "Synchronizing Intuition with Silicon Logic",
+    "The Narrative Architecture of Tomorrow",
+    "Orchestrating the Singularity of Design",
+    "Ethereal Landscapes of Digital Thought",
+    "Transcending the Boundaries of Content",
+    "A Manifesto on Future Experiences"
+];
+
+const descPlaceholders = [
+    "Synthesizing multi-dimensional data into a seamless cognitive flow...",
+    "A deep dive into the next generation of visual storytelling.",
+    "Mapping the trajectory of decentralized intelligence.",
+    "The algorithmic pursuit of aesthetic perfection and clarity.",
+    "Redefining the relationship between information and focus.",
+    "An exploration of generative systems in the era of liquidity."
+];
+
+const currentTitleIndex = ref(0);
+const currentDescIndex = ref(0);
+const currentTitlePlaceholder = ref(titlePlaceholders[0]);
+const currentDescPlaceholder = ref(descPlaceholders[0]);
+let placeholderInterval: any = null;
+
+const rotatePlaceholders = () => {
+    currentTitleIndex.value = (currentTitleIndex.value + 1) % titlePlaceholders.length;
+    currentDescIndex.value = (currentDescIndex.value + 1) % descPlaceholders.length;
+    currentTitlePlaceholder.value = titlePlaceholders[currentTitleIndex.value];
+    currentDescPlaceholder.value = descPlaceholders[currentDescIndex.value];
+};
+
+watch(isCreating, (val) => {
+    if (val) {
+        placeholderInterval = setInterval(rotatePlaceholders, 3500);
+    } else {
+        if (placeholderInterval) clearInterval(placeholderInterval);
+    }
+});
+
+const confirmDelete = (id?: string) => {
+    if (!id) return;
+    deletingDeckId.value = id;
+};
+
+const handleDeleteDeck = async (id?: string) => {
+    if (!id || !user.value) return;
+
+    deleting.value = true;
+    try {
+        await softDeleteDeck(id);
+        // Refresh local list
+        decks.value = decks.value.filter(d => d.meta.id !== id);
+        deletingDeckId.value = null;
+    } catch (e) {
+        console.error("Failed to delete deck:", e);
+        error.value = "Failed to delete presentation.";
+    } finally {
+        deleting.value = false;
+    }
+};
+
+const fetchDecks = async () => {
+    if (!user.value) return;
+
+    loading.value = true;
+    error.value = null;
+
+    try {
+        decks.value = await getUserDecks(user.value.uid);
+    } catch (e: any) {
+        console.error("Failed to fetch decks:", e);
+        error.value = "Failed to load your decks. Please try again.";
+    } finally {
+        loading.value = false;
+    }
+};
+
+// Handle automatic fetching when auth is ready
+watch(user, (newUser) => {
+    if (newUser) {
+        fetchDecks();
+    } else {
+        // If auth finishes and there's no user, stop loading
+        loading.value = false;
+    }
+}, { immediate: true });
+
+const createNewDeck = async () => {
+    if (!user.value || !newDeckForm.value.title) return;
+
+    creating.value = true;
+    error.value = null;
+
+    // Create a scaffold deck with user values
+    const newDeck: Deck = {
+        meta: {
+            title: newDeckForm.value.title,
+            description: newDeckForm.value.description,
+            authorId: user.value.uid,
+            authorName: user.value.displayName || 'Anonymous',
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+            isPublic: false,
+            version: '1.0'
+        },
+        slides: [
+            {
+                type: 'statement',
+                title: 'Hello World',
+                subtitle: 'Welcome to your new presentation.'
+            }
+        ]
+    };
+
+    try {
+        const id = await saveDeck(newDeck, user.value.uid, user.value.displayName || 'User');
+        // Reset form
+        newDeckForm.value = { title: '', description: '' };
+        isCreating.value = false;
+
+        // Navigate to the new deck studio
+        router.push({ name: 'studio', params: { id } });
+    } catch (e) {
+        console.error("Failed to create deck:", e);
+        error.value = "Failed to create new deck.";
+    } finally {
+        creating.value = false;
+    }
+};
+
+const formatDate = (dateString?: string) => {
+    if (!dateString) return 'Unknown date';
+    return new Date(dateString).toLocaleDateString(undefined, {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+    });
+};
+
+// --- Theme Extraction Logic ---
+const getThemeColor = (deck: Deck) => {
+    // Attempt to extract primary from custom theme object or use defaults
+    const theme = deck.theme;
+    if (typeof theme === 'object' && theme?.colors?.primary) {
+        return theme.colors.primary;
+    }
+    // Fallback based on deck title hash for consistent randomness if no theme
+    const colors = ['#6366f1', '#3b82f6', '#8b5cf6', '#ec4899', '#f59e0b', '#10b981'];
+    const title = deck.meta?.title || 'Lumina';
+    let hash = 0;
+    for (let i = 0; i < title.length; i++) hash = title.charCodeAt(i) + ((hash << 5) - hash);
+    return colors[Math.abs(hash) % colors.length];
+};
+
+const getMeshStyle = (deck: Deck) => {
+    const color = getThemeColor(deck);
+    return {
+        backgroundImage: `
+            radial-gradient(circle at 20% 30%, ${color}66, transparent 70%),
+            radial-gradient(circle at 80% 70%, ${color}33, transparent 70%),
+            linear-gradient(135deg, #0f172a 0%, #000000 100%)
+        `
+    };
+};
+
+const getCardStyle = (deck: Deck) => {
+    const color = getThemeColor(deck);
+    return {
+        '--accent-glow': `${color}15`
+    };
+};
+
+// --- Intelligence Logic ---
+
+const getSlideIcon = (type?: string) => {
+    const types: Record<string, string> = {
+        'statement': 'ph-thin ph-quotes',
+        'hero': 'ph-thin ph-mountains',
+        'grid': 'ph-thin ph-grid-four',
+        'list': 'ph-thin ph-list-bullets',
+        'chart': 'ph-thin ph-chart-line',
+        'image': 'ph-thin ph-image',
+        'quote': 'ph-thin ph-quotes',
+        'code': 'ph-thin ph-code',
+        'feature': 'ph-thin ph-magic-wand'
+    };
+    return types[type || ''] || 'ph-thin ph-copy';
+};
+
+const getFirstSlideLabel = (deck: Deck) => {
+    const slide = deck.slides?.[0];
+    if (slide?.title) return slide.title.substring(0, 16) + (slide.title.length > 16 ? '...' : '');
+    return 'Cover Slide';
+};
+
+const getReadingTime = (deck: Deck) => {
+    // Highly scientific estimate: 30s per slide
+    const count = deck.slides?.length || 0;
+    return Math.max(1, Math.ceil(count * 0.5));
+};
+
+const openDeckInNewTab = (deckId?: string) => {
+    if (!deckId) return;
+    const routeData = router.resolve({ name: 'deck', params: { id: deckId } });
+    window.open(routeData.href, '_blank');
+};
+
+onMounted(() => {
+    // Initial fetch if user already available
+    if (user.value) fetchDecks();
+});
+</script>
+
+<style scoped>
+.spring-pop-enter-active,
+.spring-pop-leave-active {
+    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.spring-pop-enter-from {
+    opacity: 0;
+    transform: translateY(30px) scale(0.9) rotate3d(1, 0, 0, 10deg);
+}
+
+.spring-pop-leave-to {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+}
+
+.placeholder-slide-enter-active,
+.placeholder-slide-leave-active {
+    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.placeholder-slide-enter-from {
+    opacity: 0;
+    transform: translateY(10px);
+    filter: blur(4px);
+}
+
+.placeholder-slide-leave-to {
+    opacity: 0;
+    transform: translateY(-10px);
+    filter: blur(4px);
+}
+
+.fade-scale-enter-active,
+.fade-scale-leave-active {
+    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.fade-scale-enter-from {
+    opacity: 0;
+    transform: scale(1.1);
+}
+
+.fade-scale-leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+}
+
+.line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* Glassmorphism utility if not globally available */
+.glass {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(25px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+@keyframes pulse-soft {
+
+    0%,
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    50% {
+        opacity: 0.5;
+        transform: scale(0.8);
+    }
+}
+
+
+/* Accent Glow Hover */
+.group:hover {
+    box-shadow:
+        0 0 80px -20px var(--accent-glow);
+}
+</style>