lumina-slides 8.9.4 → 9.0.0

package/src/components/studio/StudioToolbar.vue

@@ -0,0 +1,222 @@
+<template>
+    <div class="h-12 bg-[#1a1a1a] border-b border-[#333] flex items-center px-4 justify-between select-none">
+        <!-- Logo -->
+        <div class="flex items-center gap-3">
+            <span class="font-heading font-bold text-white tracking-wider">LUMINA STUDIO</span>
+            <router-link :to="{ name: 'dashboard' }" class="text-white/40 hover:text-white text-xs transition">
+                <i class="ph-thin ph-arrow-left mr-1"></i> Exit
+            </router-link>
+        </div>
+
+        <!-- Tools (Only for Flex slides) -->
+        <div v-if="canAddElements"
+            class="flex items-center gap-1.5 bg-[#252525] p-1.5 rounded-xl border border-white/10 shadow-lg shadow-black/20">
+            <button @click="addElement('title')"
+                class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-white/10 text-white/50 hover:text-white transition-all duration-200 active:scale-95"
+                title="Add Title">
+                <i class="ph-thin ph-text-h text-lg"></i>
+            </button>
+            <button @click="addElement('text')"
+                class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-white/10 text-white/50 hover:text-white transition-all duration-200 active:scale-95"
+                title="Add Text">
+                <i class="ph-thin ph-text-align-left text-lg"></i>
+            </button>
+
+            <div class="w-px h-6 bg-white/5 mx-1"></div>
+
+            <button @click="addElement('image')"
+                class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-white/10 text-white/50 hover:text-white transition-all duration-200 active:scale-95"
+                title="Add Image">
+                <i class="ph-thin ph-image text-lg"></i>
+            </button>
+            <button @click="addElement('button')"
+                class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-white/10 text-white/50 hover:text-white transition-all duration-200 active:scale-95"
+                title="Add Button">
+                <i class="ph-thin ph-rectangle text-lg"></i>
+            </button>
+        </div>
+
+        <!-- Placeholder for symmetry when hidden -->
+        <div v-else class="flex-1 opacity-0 pointer-events-none"></div>
+
+        <!-- Actions -->
+        <div class="flex items-center gap-2">
+            <button @click="editor.undo()" :disabled="!editor.canUndo.value"
+                class="p-1.5 rounded hover:bg-[#333] text-white/70 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent transition"
+                title="Undo (Ctrl+Z)">
+                <i class="ph-thin ph-arrow-u-up-left"></i>
+            </button>
+            <button @click="editor.redo()" :disabled="!editor.canRedo.value"
+                class="p-1.5 rounded hover:bg-[#333] text-white/70 hover:text-white disabled:opacity-30 disabled:hover:bg-transparent transition"
+                title="Redo (Ctrl+Y)">
+                <i class="ph-thin ph-arrow-u-up-right"></i>
+            </button>
+            <div class="w-px h-4 bg-[#444] mx-1"></div>
+            <button @click="saveToFirestore" :disabled="isSaving"
+                class="min-w-[80px] px-3 py-1 bg-green-600 hover:bg-green-500 disabled:bg-green-800 text-white text-xs font-bold rounded transition flex items-center justify-center gap-1">
+                <i v-if="isSaving" class="ph-thin ph-spinner ph-spin"></i>
+                <i v-else-if="showSavedMessage" class="ph-thin ph-check"></i>
+                <i v-else class="ph-thin ph-cloud-arrow-up"></i>
+                {{ isSaving ? 'SAVING...' : (showSavedMessage ? 'SAVED' : 'SAVE') }}
+            </button>
+            <button @click="showJsonEditor = true"
+                class="px-3 py-1 bg-[#333] hover:bg-[#444] text-white/80 text-xs font-bold rounded transition flex items-center gap-1"
+                title="Edit RAW Data">
+                <i class="ph-thin ph-code"></i> JSON
+            </button>
+            <button @click="exportDeck"
+                class="px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded transition flex items-center gap-1">
+                <i class="ph-thin ph-download-simple"></i> EXPORT
+            </button>
+        </div>
+        <Teleport to="body">
+            <!-- Save Success Modal Removed -->
+            <StudioJsonEditor :is-open="showJsonEditor" @close="showJsonEditor = false" />
+        </Teleport>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted, watch, toRaw } from 'vue';
+import { useRoute } from 'vue-router';
+import { useEditor } from '../../composables/useEditor';
+import { useAuth } from '../../composables/useAuth';
+import { saveDeck, updateDeck } from '../../utils/firebase';
+import type { Deck } from '../../core/types';
+// import SaveSuccessModal from './SaveSuccessModal.vue';
+import StudioJsonEditor from './StudioJsonEditor.vue';
+
+const editor = useEditor();
+const route = useRoute();
+const { user } = useAuth();
+const isSaving = ref(false);
+// const showSaveModal = ref(false);
+const showSavedMessage = ref(false);
+const showJsonEditor = ref(false);
+const savedDeckId = ref('');
+const isUpdate = ref(false);
+
+const canAddElements = computed(() => {
+    const currentIndex = editor.store.state.currentIndex;
+    const slide = editor.store.state.deck?.slides[currentIndex];
+    return slide?.type === 'flex';
+});
+
+onMounted(() => {
+    // Priority 1: Route Params (the most reliable in Vue Router apps)
+    // Priority 2: Store Meta (if already loaded)
+    const idFromRoute = route.params.id as string;
+    const idFromStore = editor.store.state.deck?.meta?.id;
+
+    if (idFromRoute) {
+        savedDeckId.value = idFromRoute;
+    } else if (idFromStore) {
+        savedDeckId.value = idFromStore;
+    }
+});
+
+// Keep savedDeckId in sync with route changes (e.g., if we go from /studio to /studio/123)
+watch(() => route.params.id, (newId) => {
+    if (newId) savedDeckId.value = newId as string;
+}, { immediate: true });
+
+const addElement = (type: string) => {
+    const currentIndex = editor.store.state.currentIndex;
+    const slide = editor.store.state.deck?.slides[currentIndex];
+
+    if (!slide) return;
+
+    const templates: Record<string, any> = {
+        'title': { type: 'title', text: 'New Title', dragKey: Date.now() + Math.random() },
+        'text': { type: 'text', text: 'New paragraph text...', dragKey: Date.now() + Math.random() },
+        'image': { type: 'image', src: 'https://via.placeholder.com/400x300', alt: 'Placeholder', dragKey: Date.now() + Math.random() },
+        'button': { type: 'button', label: 'Click Me', variant: 'primary', dragKey: Date.now() + Math.random() }
+    };
+
+    const newElement = templates[type];
+    if (!newElement) return;
+
+    // Find the first content container or root elements array
+    if (slide.type === 'flex' && Array.isArray((slide as any).elements)) {
+        const elements = (slide as any).elements;
+        // Find first content container
+        const contentIdx = elements.findIndex((el: any) => el.type === 'content');
+        if (contentIdx >= 0 && Array.isArray(elements[contentIdx].elements)) {
+            editor.store.addNode(`slides.${currentIndex}.elements.${contentIdx}.elements`, newElement);
+        } else {
+            editor.store.addNode(`slides.${currentIndex}.elements`, newElement);
+        }
+        //     editor.commit(); // Handled by watch
+    }
+};
+
+const saveToFirestore = async () => {
+    isSaving.value = true;
+    try {
+        // Use toRaw to strip Vue proxies for a cleaner JSON stringify
+        const rawDeck = toRaw(editor.store.state.deck);
+        if (!rawDeck) {
+            alert('No deck found to save.');
+            return;
+        }
+
+        const deckToSave = JSON.parse(JSON.stringify(rawDeck));
+
+
+
+        // Ensure meta exists
+        if (!deckToSave.meta) deckToSave.meta = {};
+
+        // Use the most up-to-date ID available
+        const currentId = savedDeckId.value || deckToSave.meta.id;
+
+        if (currentId) {
+            // Update existing
+            await updateDeck(currentId, deckToSave as Deck);
+            isUpdate.value = true;
+        } else {
+            // Create new
+            const userId = user.value?.uid;
+            const userName = user.value?.displayName || undefined;
+            const newId = await saveDeck(deckToSave as Deck, userId, userName);
+
+            // CRITICAL: Update local ref so next click is an UPDATE
+            savedDeckId.value = newId;
+
+            // ALSO CRITICAL: Update the store so other components know the ID
+            // We use updateNode to modify the deck meta in the store safely
+            editor.store.updateNode('meta.id', newId);
+
+            isUpdate.value = false;
+        }
+
+        // Show inline success message
+        showSavedMessage.value = true;
+        setTimeout(() => {
+            showSavedMessage.value = false;
+        }, 3000);
+
+    } catch (error: any) {
+        console.error('Save failed:', error);
+        alert(`Failed to save: ${error.message || 'Unknown error'}. Check console and ensure Firebase is initialized.`);
+    } finally {
+        isSaving.value = false;
+    }
+};
+
+const exportDeck = () => {
+    const deck = editor.store.state.deck;
+    if (!deck) return;
+
+    const json = JSON.stringify(deck, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${deck.meta?.title || 'deck'}.json`;
+    a.click();
+
+    URL.revokeObjectURL(url);
+};
+</script>

package/src/components/studio/fieldLabels.ts

@@ -0,0 +1,224 @@
+/**
+ * FIELD LABELS & VALUE MAPPINGS
+ * Provides user-friendly labels for technical field names and enum values.
+ */
+
+// Field name to friendly label mapping
+export const FIELD_LABELS: Record<string, string> = {
+    // Layout
+    'direction': 'Layout Direction',
+    'gap': 'Spacing',
+    'padding': 'Inner Padding',
+    'halign': 'Horizontal Align',
+    'valign': 'Vertical Align',
+    'align': 'Text Alignment',
+    'size': 'Size',
+    'imageSide': 'Image Position',
+
+    // Typography
+    'title': 'Title',
+    'subtitle': 'Subtitle',
+    'text': 'Text Content',
+    'tag': 'Label / Tag',
+    'description': 'Description',
+    'desc': 'Description',
+    'label': 'Label',
+    'name': 'Name',
+
+    // Media
+    'src': 'Image URL',
+    'image': 'Image',
+    'poster': 'Video Poster',
+    'alt': 'Alt Text',
+    'background': 'Background',
+    'icon': 'Icon',
+
+    // Actions
+    'action': 'Action ID',
+    'actionType': 'Action Type',
+    'href': 'Link URL',
+    'gotoSlide': 'Go to Slide',
+    'target': 'Open In',
+    'cta': 'Call to Action',
+    'url': 'URL',
+
+    // Styling
+    'variant': 'Style Variant',
+    'rounded': 'Corner Radius',
+    'fit': 'Object Fit',
+    'fill': 'Fill Container',
+    'type': 'Type',
+
+    // Chart
+    'chartType': 'Chart Type',
+    'data': 'Data',
+
+    // Layout Types
+    'elements': 'Elements',
+    'features': 'Features',
+    'timeline': 'Timeline',
+    'steps': 'Steps',
+    'paragraphs': 'Paragraphs',
+    'bullets': 'Bullet Points',
+
+    // Meta
+    'notes': 'Speaker Notes',
+    'sizing': 'Sizing Mode',
+    'id': 'ID',
+    'meta': 'Metadata',
+    'orbColor': 'Orb Color',
+    'orbPos': 'Orb Position',
+
+    // Timeline/Steps specific
+    'date': 'Date',
+    'step': 'Step Number',
+    'year': 'Year',
+};
+
+// Enum value to friendly display name
+export const VALUE_LABELS: Record<string, Record<string, string>> = {
+    'direction': {
+        'horizontal': '→ Horizontal',
+        'vertical': '↓ Vertical',
+    },
+    'gap': {
+        'none': 'None',
+        'xs': 'Extra Small',
+        'sm': 'Small',
+        'md': 'Medium',
+        'lg': 'Large',
+        'xl': 'Extra Large',
+        '2xl': '2X Large',
+        '3xl': '3X Large',
+        '4xl': 'Huge',
+    },
+    'padding': {
+        'none': 'None',
+        'xs': 'Extra Small',
+        'sm': 'Small',
+        'md': 'Medium',
+        'lg': 'Large',
+        'xl': 'Extra Large',
+        '2xl': '2X Large',
+        '3xl': '3X Large',
+        '4xl': 'Huge',
+    },
+    'size': {
+        'auto': 'Auto',
+        'quarter': '25%',
+        'third': '33%',
+        'half': '50%',
+        'two-thirds': '66%',
+        'three-quarters': '75%',
+        'full': '100%',
+    },
+    'halign': {
+        'left': '← Left',
+        'center': '↔ Center',
+        'right': '→ Right',
+    },
+    'valign': {
+        'top': '↑ Top',
+        'center': '↕ Center',
+        'bottom': '↓ Bottom',
+    },
+    'align': {
+        'left': '← Left',
+        'center': '↔ Center',
+        'right': '→ Right',
+    },
+    'imageSide': {
+        'left': '← Left',
+        'right': '→ Right',
+    },
+    'variant': {
+        'primary': '● Primary',
+        'secondary': '○ Secondary',
+        'outline': '□ Outline',
+        'ghost': '◌ Ghost',
+    },
+    'rounded': {
+        'none': 'None',
+        'sm': 'Slight',
+        'md': 'Medium',
+        'lg': 'Large',
+        'xl': 'Extra Large',
+        '2xl': '2X Large',
+        '3xl': '3X Large',
+        'full': 'Full Circle',
+    },
+    'fit': {
+        'cover': 'Cover (fill)',
+        'contain': 'Contain (fit)',
+    },
+    'fill': {
+        'true': 'Yes',
+        'false': 'No',
+    },
+    'chartType': {
+        'bar': '📊 Bar Chart',
+        'line': '📈 Line Chart',
+        'pie': '🥧 Pie Chart',
+        'doughnut': '🍩 Doughnut',
+        'radar': '🕸 Radar',
+        'polarArea': '🎯 Polar Area',
+    },
+    'sizing': {
+        'viewport': 'Full Screen',
+        'container': 'Container',
+    },
+    'type': {
+        'title': '📌 Heading',
+        'text': '📄 Paragraph',
+        'content': '📝 Content',
+        'image': '🖼 Image',
+        'video': '🎥 Video',
+        'button': '🔘 Button',
+        'spacer': '⬜ Spacer',
+    },
+    'actionType': {
+        'none': '⊘ None',
+        'url': '🔗 Open URL',
+        'slide': '📑 Go to Slide',
+        'download': '⬇️ Download',
+        'event': '⚡ Custom Event',
+    },
+    'target': {
+        '_blank': 'New Tab',
+        '_self': 'Same Tab',
+    },
+};
+
+// Field groupings for organized display
+export const FIELD_GROUPS: Record<string, string[]> = {
+    'Layout': ['direction', 'gap', 'padding', 'halign', 'valign', 'size', 'imageSide'],
+    'Content': ['title', 'subtitle', 'text', 'tag', 'description', 'desc', 'label', 'cta'],
+    'Media': ['src', 'image', 'poster', 'alt', 'background', 'icon'],
+    'Styling': ['variant', 'rounded', 'fit', 'fill'],
+    'Actions': ['action', 'href', 'url'],
+    'Data': ['elements', 'features', 'timeline', 'steps', 'paragraphs', 'bullets', 'data'],
+    'Meta': ['notes', 'sizing', 'type', 'id'],
+};
+
+// Helper functions
+export function getFieldLabel(key: string): string {
+    return FIELD_LABELS[key] || formatCamelCase(key);
+}
+
+export function getValueLabel(field: string, value: string): string {
+    return VALUE_LABELS[field]?.[value] || value;
+}
+
+export function getValueOptions(field: string): { value: string; label: string }[] | null {
+    const mapping = VALUE_LABELS[field];
+    if (!mapping) return null;
+    return Object.entries(mapping).map(([value, label]) => ({ value, label }));
+}
+
+// Convert camelCase to Title Case as fallback
+function formatCamelCase(str: string): string {
+    return str
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/^./, s => s.toUpperCase())
+        .trim();
+}

package/src/components/studio/inspectors/DiagramEdgeEditor.vue

@@ -0,0 +1,77 @@
+<template>
+    <div class="space-y-4">
+        <!-- Edge Properties -->
+        <div class="space-y-3">
+            <div class="text-white/30 text-[10px] uppercase tracking-widest">Connection Properties</div>
+
+            <!-- Label -->
+            <div class="space-y-1">
+                <label class="text-white/50 text-[10px] uppercase">Label</label>
+                <input type="text" :value="data.label || ''"
+                    @input="update('label', ($event.target as HTMLInputElement).value)"
+                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white focus:border-blue-500 focus:outline-none" />
+            </div>
+
+            <!-- Type -->
+            <div class="space-y-1">
+                <label class="text-white/50 text-[10px] uppercase">Line Type</label>
+                <select :value="data.type || 'default'"
+                    @change="update('type', ($event.target as HTMLSelectElement).value)"
+                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white focus:border-blue-500 focus:outline-none">
+                    <option value="default">Bezier (Default)</option>
+                    <option value="straight">Straight</option>
+                    <option value="step">Step</option>
+                    <option value="smoothstep">Smooth Step</option>
+                </select>
+            </div>
+
+            <!-- Animated Toggle -->
+            <div class="flex items-center justify-between">
+                <label class="text-white/50 text-[10px] uppercase">Animated</label>
+                <button @click="update('animated', !data.animated)"
+                    class="w-8 h-4 rounded-full relative transition-colors duration-200"
+                    :class="data.animated ? 'bg-blue-600' : 'bg-[#333]'">
+                    <div class="absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full transition-transform duration-200"
+                        :class="data.animated ? 'translate-x-4' : 'translate-x-0'"></div>
+                </button>
+            </div>
+
+            <!-- Style / Color -->
+            <div class="space-y-1">
+                <label class="text-white/50 text-[10px] uppercase">Stroke Color</label>
+                <div class="flex gap-2">
+                    <input type="color" :value="data.style?.stroke || '#b1b1b7'"
+                        @input="updateStyle('stroke', ($event.target as HTMLInputElement).value)"
+                        class="bg-transparent w-6 h-6 p-0 border-0 cursor-pointer" />
+                    <input type="text" :value="data.style?.stroke || ''" placeholder="#b1b1b7"
+                        @input="updateStyle('stroke', ($event.target as HTMLInputElement).value)"
+                        class="flex-1 bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                </div>
+            </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="pt-4 border-t border-[#333]">
+            <button @click="$emit('delete')"
+                class="w-full px-3 py-2 rounded bg-red-900/30 border border-red-500/30 text-red-400 hover:bg-red-900/50 transition flex items-center justify-center gap-2">
+                <i class="ph-thin ph-trash text-xs"></i> Delete Connection
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    data: any; // Edge object
+}>();
+
+const emit = defineEmits(['update', 'delete']);
+
+const update = (key: string, value: any) => {
+    emit('update', key, value);
+};
+
+const updateStyle = (key: string, value: string) => {
+    emit('update', `style.${key}`, value);
+};
+</script>

package/src/components/studio/inspectors/DiagramNodeEditor.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="space-y-4">
+        <!-- Node Properties -->
+        <div class="space-y-3">
+            <div class="text-white/30 text-[10px] uppercase tracking-widest">Node Properties</div>
+
+            <!-- Label -->
+            <div class="space-y-1">
+                <label class="text-white/50 text-[10px] uppercase">Label</label>
+                <input type="text" :value="data.label"
+                    @input="update('label', ($event.target as HTMLInputElement).value)"
+                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white focus:border-blue-500 focus:outline-none" />
+            </div>
+
+            <!-- Shape (visual only, stored in data.shape) -->
+            <div class="space-y-1">
+                <label class="text-white/50 text-[10px] uppercase">Shape</label>
+                <select :value="data.data?.shape || data.data?.type || 'rectangle'"
+                    @change="updateData('shape', ($event.target as HTMLSelectElement).value)"
+                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white focus:border-blue-500 focus:outline-none">
+                    <option value="rectangle">Rectangle</option>
+                    <option value="rounded">Rounded</option>
+                    <option value="image">Image</option>
+                </select>
+            </div>
+
+            <!-- Image URL (only for image nodes) -->
+            <div v-if="isImageNode" class="space-y-1">
+                <label class="text-white/50 text-[10px] uppercase">Image URL</label>
+                <input type="text" :value="data.data?.imageUrl || ''" placeholder="https://..."
+                    @input="updateData('imageUrl', ($event.target as HTMLInputElement).value)"
+                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white focus:border-blue-500 focus:outline-none" />
+            </div>
+
+            <!-- Position (Fine Tuning) -->
+            <div class="grid grid-cols-2 gap-2">
+                <div class="space-y-1">
+                    <label class="text-white/50 text-[10px] uppercase">X Position</label>
+                    <input type="number" :value="data.position?.x"
+                        @input="updatePosition('x', parseFloat(($event.target as HTMLInputElement).value))"
+                        class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white" />
+                </div>
+                <div class="space-y-1">
+                    <label class="text-white/50 text-[10px] uppercase">Y Position</label>
+                    <input type="number" :value="data.position?.y"
+                        @input="updatePosition('y', parseFloat(($event.target as HTMLInputElement).value))"
+                        class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white" />
+                </div>
+            </div>
+
+            <!-- Style / Color (hide for image nodes) -->
+            <div v-if="!isImageNode" class="space-y-1">
+                <label class="text-white/50 text-[10px] uppercase">Background Color</label>
+                <div class="flex gap-2">
+                    <input type="color" :value="data.style?.backgroundColor || '#ffffff'"
+                        @input="updateStyle('backgroundColor', ($event.target as HTMLInputElement).value)"
+                        class="bg-transparent w-6 h-6 p-0 border-0 cursor-pointer" />
+                    <input type="text" :value="data.style?.backgroundColor || ''" placeholder="#ffffff"
+                        @input="updateStyle('backgroundColor', ($event.target as HTMLInputElement).value)"
+                        class="flex-1 bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                </div>
+            </div>
+
+            <div v-if="!isImageNode" class="space-y-1">
+                <label class="text-white/50 text-[10px] uppercase">Text Color</label>
+                <div class="flex gap-2">
+                    <input type="color" :value="data.style?.color || '#000000'"
+                        @input="updateStyle('color', ($event.target as HTMLInputElement).value)"
+                        class="bg-transparent w-6 h-6 p-0 border-0 cursor-pointer" />
+                    <input type="text" :value="data.style?.color || ''" placeholder="#000000"
+                        @input="updateStyle('color', ($event.target as HTMLInputElement).value)"
+                        class="flex-1 bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono" />
+                </div>
+            </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="pt-4 border-t border-[#333]">
+            <button @click="$emit('delete')"
+                class="w-full px-3 py-2 rounded bg-red-900/30 border border-red-500/30 text-red-400 hover:bg-red-900/50 transition flex items-center justify-center gap-2">
+                <i class="ph-thin ph-trash text-xs"></i> Delete Node
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    data: any; // Node object
+}>();
+
+const emit = defineEmits(['update', 'delete']);
+
+// Check if this is an image node
+const isImageNode = computed(() =>
+    props.data?.data?.shape === 'image' || props.data?.data?.type === 'image'
+);
+
+const update = (key: string, value: any) => {
+    emit('update', key, value);
+};
+
+const updatePosition = (axis: 'x' | 'y', value: number) => {
+    emit('update', `position.${axis}`, value);
+};
+
+const updateStyle = (key: string, value: string) => {
+    // Store style in data.style so custom node can access it via props.data.style
+    emit('update', `data.style.${key}`, value);
+};
+
+const updateData = (key: string, value: string) => {
+    emit('update', `data.${key}`, value);
+};
+</script>