lumina-slides 8.9.5 → 9.0.1

package/src/components/site/SiteUserMenu.vue

@@ -0,0 +1,90 @@
+<template>
+    <div class="relative" ref="menuRef">
+        <!-- Avatar Trigger -->
+        <button @click="isOpen = !isOpen"
+            class="flex items-center gap-2 rounded-full hover:bg-white/10 p-1 pr-3 transition border border-transparent hover:border-white/10">
+
+            <img v-if="avatarSrc" :src="avatarSrc" @error="handleImageError"
+                class="w-8 h-8 rounded-full border border-white/20 object-cover bg-neutral-800" alt="Avatar">
+
+            <div v-else
+                class="w-8 h-8 rounded-full border border-white/20 bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-xs font-bold text-white shadow-inner">
+                {{ initials }}
+            </div>
+            <span class="text-sm font-medium text-white/90 hidden md:block max-w-[100px] truncate">
+                {{ user?.displayName?.split(' ')[0] }}
+            </span>
+            <i class="ph-thin ph-caret-down text-xs text-white/50 transition-transform duration-200"
+                :class="{ 'rotate-180': isOpen }"></i>
+        </button>
+
+        <!-- Dropdown -->
+        <Transition enter-active-class="transition ease-out duration-200"
+            enter-from-class="opacity-0 translate-y-2 scale-95" enter-to-class="opacity-100 translate-y-0 scale-100"
+            leave-active-class="transition ease-in duration-150" leave-from-class="opacity-100 translate-y-0 scale-100"
+            leave-to-class="opacity-0 translate-y-2 scale-95">
+            <div v-if="isOpen"
+                class="absolute right-0 top-full mt-2 w-56 bg-[#111] border border-white/10 rounded-xl shadow-2xl overflow-hidden z-[100]">
+
+                <!-- Header -->
+                <div class="p-4 border-b border-white/5 bg-white/5">
+                    <p class="text-sm font-bold text-white truncate">{{ user?.displayName }}</p>
+                    <p class="text-xs text-white/50 truncate">{{ user?.email }}</p>
+                </div>
+
+                <!-- Menu Items -->
+                <div class="p-1">
+                    <button @click="navigate('dashboard')"
+                        class="w-full text-left px-3 py-2 rounded-lg text-sm text-white/80 hover:text-white hover:bg-white/10 transition flex items-center gap-3">
+                        <i class="ph-thin ph-stack text-blue-400 w-4"></i>
+                        My Decks
+                    </button>
+                    <button @click="navigate('examples')"
+                        class="w-full text-left px-3 py-2 rounded-lg text-sm text-white/80 hover:text-white hover:bg-white/10 transition flex items-center gap-3">
+                        <i class="ph-thin ph-compass text-purple-400 w-4"></i>
+                        Explore
+                    </button>
+                </div>
+
+                <div class="h-px bg-white/5 mx-2 my-1"></div>
+
+                <div class="p-1">
+                    <button @click="handleLogout"
+                        class="w-full text-left px-3 py-2 rounded-lg text-sm text-red-400 hover:text-red-300 hover:bg-red-500/10 transition flex items-center gap-3">
+                        <i class="ph-thin ph-sign-out w-4"></i>
+                        Sign Out
+                    </button>
+                </div>
+            </div>
+        </Transition>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAuth } from '../../composables/useAuth';
+
+// const emit = defineEmits(['navigate']); // Deprecated
+const router = useRouter();
+const { user, logout } = useAuth();
+const isOpen = ref(false);
+const menuRef = ref<HTMLElement | null>(null);
+const imageError = ref(false);
+
+// ... (watch and computed stay same)
+
+const navigate = (page: string) => {
+    isOpen.value = false;
+    router.push({ name: page });
+};
+
+const handleLogout = async () => {
+    isOpen.value = false;
+    await logout();
+    router.push({ name: 'home' });
+};
+// ... rest of script stays same but we need to re-copy it because we replace the whole script block in previous steps if I am not careful. 
+// Wait, I should just replace the specific lines or the whole block carefully.
+// Let's replace the top imports and the navigate function.
+</script>

package/src/components/studio/ActionEditor.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="space-y-2">
+        <div class="text-white/30 text-[10px] uppercase tracking-widest">Action</div>
+
+        <!-- Action Type Selector -->
+        <div class="space-y-1">
+            <label class="text-white/50 uppercase tracking-wider text-[10px]">Type</label>
+            <select :value="actionType || 'none'" @change="updateActionType"
+                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none">
+                <option value="none">None</option>
+                <option value="url">Open URL</option>
+                <option value="slide">Go to Slide</option>
+                <option value="download">Download File</option>
+                <option value="event">Custom Event</option>
+            </select>
+        </div>
+
+        <!-- URL Field (for url/download) -->
+        <div v-if="actionType === 'url' || actionType === 'download'" class="space-y-1">
+            <label class="text-white/50 uppercase tracking-wider text-[10px]">
+                {{ actionType === 'download' ? 'File URL' : 'Link URL' }}
+            </label>
+            <input type="url" :value="href || ''" @input="updateHref" placeholder="https://example.com"
+                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none" />
+        </div>
+
+        <!-- Target Selector (for url) -->
+        <div v-if="actionType === 'url'" class="space-y-1">
+            <label class="text-white/50 uppercase tracking-wider text-[10px]">Open In</label>
+            <div class="flex gap-2">
+                <button @click="emit('update', 'target', '_blank')"
+                    class="flex-1 px-2 py-1 text-[10px] rounded border transition"
+                    :class="target !== '_self' ? 'bg-blue-600 border-blue-500 text-white' : 'bg-[#1a1a1a] border-[#333] text-white/50'">
+                    New Tab
+                </button>
+                <button @click="emit('update', 'target', '_self')"
+                    class="flex-1 px-2 py-1 text-[10px] rounded border transition"
+                    :class="target === '_self' ? 'bg-blue-600 border-blue-500 text-white' : 'bg-[#1a1a1a] border-[#333] text-white/50'">
+                    Same Tab
+                </button>
+            </div>
+        </div>
+
+        <!-- Slide Selector -->
+        <div v-if="actionType === 'slide'" class="space-y-1">
+            <label class="text-white/50 uppercase tracking-wider text-[10px]">Go to Slide</label>
+            <select :value="gotoSlide ?? ''" @change="updateGotoSlide"
+                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white focus:border-blue-500 focus:outline-none">
+                <option value="">Select slide...</option>
+                <option v-for="(_, i) in slideCount" :key="i" :value="i">
+                    Slide {{ i + 1 }}
+                </option>
+            </select>
+        </div>
+
+        <!-- Custom Action (for event) -->
+        <div v-if="actionType === 'event'" class="space-y-1">
+            <label class="text-white/50 uppercase tracking-wider text-[10px]">Action ID</label>
+            <input type="text" :value="action || ''" @input="updateAction" placeholder="custom-action-id"
+                class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1.5 text-white font-mono text-xs focus:border-blue-500 focus:outline-none" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useEditor } from '../../composables/useEditor';
+
+const props = defineProps<{
+    actionType?: string;
+    href?: string;
+    gotoSlide?: number;
+    target?: string;
+    action?: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update', key: string, value: any): void;
+}>();
+
+const editor = useEditor();
+const slideCount = computed(() => editor.store.state.deck?.slides?.length || 0);
+
+const updateActionType = (e: Event) => {
+    const value = (e.target as HTMLSelectElement).value;
+    emit('update', 'actionType', value === 'none' ? undefined : value);
+    // Clear related fields when type changes
+    if (value !== 'url' && value !== 'download') {
+        emit('update', 'href', undefined);
+    }
+    if (value !== 'slide') {
+        emit('update', 'gotoSlide', undefined);
+    }
+};
+
+const updateHref = (e: Event) => {
+    emit('update', 'href', (e.target as HTMLInputElement).value || undefined);
+};
+
+const updateGotoSlide = (e: Event) => {
+    const value = (e.target as HTMLSelectElement).value;
+    emit('update', 'gotoSlide', value ? parseInt(value) : undefined);
+};
+
+const updateAction = (e: Event) => {
+    emit('update', 'action', (e.target as HTMLInputElement).value || undefined);
+};
+</script>

package/src/components/studio/ArrayEditor.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="space-y-2">
+        <!-- Array Header -->
+        <div class="flex items-center justify-between">
+            <label class="text-white/50 uppercase tracking-wider text-[10px]">{{ label }} ({{ items.length }})</label>
+            <button @click="addItem"
+                class="text-[10px] px-2 py-0.5 bg-blue-600 hover:bg-blue-500 rounded text-white transition">
+                <i class="ph-thin ph-plus mr-1"></i>Add
+            </button>
+        </div>
+
+        <!-- Items List -->
+        <div class="space-y-2">
+            <div v-for="(item, i) in items" :key="i" class="bg-[#1a1a1a] border border-[#333] rounded p-2">
+
+                <!-- Item Header -->
+                <div class="flex items-center justify-between mb-2 pb-2 border-b border-[#333]">
+                    <span class="text-white/70 text-[10px] font-bold uppercase">{{ getItemLabel(item, i) }}</span>
+                    <div class="flex gap-1">
+                        <button v-if="i > 0" @click="moveItem(i, i - 1)"
+                            class="w-5 h-5 flex items-center justify-center text-white/50 hover:text-white text-[10px]">
+                            <i class="ph-thin ph-caret-up"></i>
+                        </button>
+                        <button v-if="i < items.length - 1" @click="moveItem(i, i + 1)"
+                            class="w-5 h-5 flex items-center justify-center text-white/50 hover:text-white text-[10px]">
+                            <i class="ph-thin ph-caret-down"></i>
+                        </button>
+                        <button @click="removeItem(i)"
+                            class="w-5 h-5 flex items-center justify-center text-red-400 hover:text-red-300 text-[10px]">
+                            <i class="ph-thin ph-trash"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Item Fields -->
+                <div class="space-y-2">
+                    <template v-for="(value, key) in getEditableItemFields(item)" :key="key">
+                        <div class="space-y-1">
+                            <label class="text-white/40 text-[9px] uppercase">{{ key }}</label>
+
+                            <!-- Enum Select -->
+                            <select v-if="getEnumOptions(key as string)" :value="value"
+                                @change="updateItemField(i, key as string, ($event.target as HTMLSelectElement).value)"
+                                class="w-full bg-[#111] border border-[#333] rounded px-2 py-1 text-white text-xs focus:border-blue-500 focus:outline-none">
+                                <option v-for="opt in getEnumOptions(key as string)" :key="opt" :value="opt">{{ opt }}
+                                </option>
+                            </select>
+
+                            <!-- Textarea for long text -->
+                            <textarea v-else-if="isLongTextField(key as string, value)"
+                                :value="value as string | number"
+                                @input="updateItemField(i, key as string, ($event.target as HTMLTextAreaElement).value)"
+                                rows="2"
+                                class="w-full bg-[#111] border border-[#333] rounded px-2 py-1 text-white text-xs focus:border-blue-500 focus:outline-none resize-none"></textarea>
+
+                            <!-- Default Input -->
+                            <input v-else type="text" :value="value"
+                                @input="updateItemField(i, key as string, ($event.target as HTMLInputElement).value)"
+                                class="w-full bg-[#111] border border-[#333] rounded px-2 py-1 text-white text-xs focus:border-blue-500 focus:outline-none" />
+                        </div>
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    label: string;
+    items: any[];
+    basePath: string;
+    itemTemplate: Record<string, any>;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update', path: string, value: any): void;
+    (e: 'add', item: any): void;
+    (e: 'remove', index: number): void;
+    (e: 'move', payload: { from: number, to: number }): void;
+}>();
+
+const getItemLabel = (item: any, index: number) => {
+    return item.title || item.date || item.step || item.label || item.name || `#${index + 1}`;
+};
+
+const getEditableItemFields = (item: any) => {
+    return Object.fromEntries(
+        Object.entries(item).filter(([_, val]) =>
+            typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean'
+        )
+    );
+};
+
+const getEnumOptions = (key: string): string[] | null => {
+    const enums: Record<string, string[]> = {
+        'variant': ['primary', 'secondary', 'outline', 'ghost'],
+        'size': ['sm', 'md', 'lg'],
+        'imageSide': ['left', 'right'],
+    };
+    return enums[key] || null;
+};
+
+const isLongTextField = (key: string, value: any): boolean => {
+    const longFields = ['description', 'desc', 'text', 'content'];
+    return longFields.includes(key) || (typeof value === 'string' && value.length > 40);
+};
+
+const updateItemField = (index: number, key: string, value: any) => {
+    emit('update', `${props.basePath}.${index}.${key}`, value);
+};
+
+const addItem = () => {
+    emit('add', JSON.parse(JSON.stringify(props.itemTemplate)));
+};
+
+const removeItem = (index: number) => {
+    emit('remove', index);
+};
+
+const moveItem = (from: number, to: number) => {
+    emit('move', { from, to });
+};
+</script>

package/src/components/studio/CollapsibleSection.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="border border-[#333] rounded bg-[#151515] overflow-hidden">
+        <button @click="isExpanded = !isExpanded"
+            class="w-full flex items-center justify-between px-3 py-2 bg-[#1a1a1a] hover:bg-[#222] transition text-left group">
+            <div class="flex items-center gap-2">
+                <i v-if="icon"
+                    :class="[icon, 'text-white/40 group-hover:text-white/70 transition w-4 text-center']"></i>
+                <span
+                    class="text-[10px] uppercase tracking-widest font-bold text-white/50 group-hover:text-white/70 transition">
+                    {{ title }}
+                </span>
+            </div>
+            <i class="ph-thin ph-caret-down text-[10px] text-white/30 transition-transform duration-200"
+                :class="{ 'rotate-180': isExpanded }"></i>
+        </button>
+
+        <div v-show="isExpanded" class="p-3 border-t border-[#333] space-y-3">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps<{
+    title: string;
+    icon?: string;
+    defaultExpanded?: boolean;
+}>();
+
+const isExpanded = ref(props.defaultExpanded ?? false);
+</script>

package/src/components/studio/ColorField.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="flex items-center gap-2">
+        <input type="color" :value="String(value || '#ffffff')"
+            @input="emit('update', fieldKey, ($event.target as HTMLInputElement).value)"
+            class="w-6 h-6 rounded border border-[#333] cursor-pointer bg-transparent" />
+        <span class="flex-1 text-white/70">{{ label }}</span>
+        <input type="text" :value="value" @input="emit('update', fieldKey, ($event.target as HTMLInputElement).value)"
+            class="w-16 bg-[#1a1a1a] border border-[#333] rounded px-1.5 py-0.5 text-[10px] font-mono text-white/70 focus:border-blue-500 focus:outline-none" />
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    label: string;
+    fieldKey: string;
+    value: any;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update', key: string, value: string): void;
+}>();
+</script>