lumina-slides 8.9.4 → 9.0.0

package/src/components/studio/StudioInspector.vue

@@ -0,0 +1,595 @@
+<template>
+    <div class="flex flex-col h-full text-xs">
+        <!-- Header -->
+        <div
+            class="px-3 py-2 font-bold text-white/50 uppercase tracking-wider border-b border-[#333] flex items-center justify-between">
+            <span>Properties</span>
+            <span v-if="selectedType" class="text-blue-400 font-mono">{{ selectedType }}</span>
+        </div>
+
+        <!-- No Selection State -->
+        <div v-if="!selectedData" class="flex-1 flex items-center justify-center p-4">
+            <div class="text-white/30 italic text-center">
+                <i class="ph-thin ph-cursor text-2xl mb-2 block opacity-50"></i>
+                Select an element to edit
+            </div>
+        </div>
+
+        <!-- Property Form -->
+        <div v-else class="flex-1 overflow-y-auto p-3 space-y-4">
+
+            <!-- Dedicated Diagram Node Inspector -->
+            <div v-if="isDiagramNode">
+                <div class="mb-4 flex items-center gap-2 text-[10px] text-white/50 uppercase tracking-widest cursor-pointer hover:text-white"
+                    @click="editor.select(editor.selection.value!.split('.nodes.')[0])">
+                    <i class="ph-thin ph-caret-left"></i> Back to Diagram
+                </div>
+                <DiagramNodeEditor :data="selectedData" @update="updateDiagramNode" @delete="deleteDiagramNode" />
+            </div>
+
+            <!-- Dedicated Diagram Edge Inspector -->
+            <div v-else-if="isDiagramEdge">
+                <div class="mb-4 flex items-center gap-2 text-[10px] text-white/50 uppercase tracking-widest cursor-pointer hover:text-white"
+                    @click="editor.select(editor.selection.value!.split('.edges.')[0])">
+                    <i class="ph-thin ph-caret-left"></i> Back to Diagram
+                </div>
+                <DiagramEdgeEditor :data="selectedData" @update="updateDiagramEdge" @delete="deleteSelected" />
+            </div>
+
+            <!-- Standard Inspector -->
+            <div v-else class="space-y-4">
+
+                <!-- Diagram Palette (If Diagram Slide selected) -->
+                <div v-if="selectedType === 'diagram'"
+                    class="p-3 bg-blue-900/10 border border-blue-500/20 rounded mb-4">
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest mb-2">Diagram Palette</div>
+                    <div class="grid grid-cols-3 gap-2">
+                        <div draggable="true" @dragstart="onDragStart($event, 'default')"
+                            @click="addNodeWithShape('default')"
+                            class="cursor-grab flex flex-col items-center gap-1 p-2 bg-[#1a1a1a] hover:bg-[#252525] rounded border border-transparent hover:border-white/20 transition">
+                            <div class="w-6 h-4 border border-white/50 bg-white/10"></div>
+                            <span class="text-[9px] text-white/70">Rect</span>
+                        </div>
+                        <div draggable="true" @dragstart="onDragStart($event, 'input')"
+                            @click="addNodeWithShape('input')"
+                            class="cursor-grab flex flex-col items-center gap-1 p-2 bg-[#1a1a1a] hover:bg-[#252525] rounded border border-transparent hover:border-white/20 transition">
+                            <div class="w-6 h-4 border border-white/50 bg-white/10 rounded-full"></div>
+                            <span class="text-[9px] text-white/70">Rounded</span>
+                        </div>
+                        <div draggable="true" @dragstart="onDragStart($event, 'image')"
+                            @click="addNodeWithShape('image')"
+                            class="cursor-grab flex flex-col items-center gap-1 p-2 bg-[#1a1a1a] hover:bg-[#252525] rounded border border-transparent hover:border-white/20 transition">
+                            <i class="ph-thin ph-image text-white/50 text-lg"></i>
+                            <span class="text-[9px] text-white/70">Image</span>
+                        </div>
+                    </div>
+                    <div class="mt-2 text-[9px] text-blue-200/50 text-center">
+                        Drag from handle to handle on visible nodes to connect.
+                    </div>
+                </div>
+
+                <!-- Primitive Fields Section -->
+                <div v-if="Object.keys(primitiveFields).length > 0" class="space-y-3">
+
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest">Properties</div>
+                    <template v-for="(value, key) in primitiveFields" :key="key">
+                        <FieldEditor :fieldKey="key as string" :value="value" @update="updateField" />
+                    </template>
+
+                    <!-- Element Reveal Animation -->
+                    <div v-if="!isSlide && selectedType !== 'content'" class="space-y-1">
+                        <label class="text-white/50 text-[10px] uppercase">Reveal Animation</label>
+                        <select :value="selectedData.class || ''"
+                            @change="updateField('class', ($event.target as HTMLSelectElement).value)"
+                            class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                            <option value="">None</option>
+                            <option value="reveal-up">Reveal Up</option>
+                            <option value="reveal-zoom">Reveal Zoom</option>
+                            <option value="reveal-left">Reveal Left</option>
+                            <option value="reveal-right">Reveal Right</option>
+                            <option value="reveal-img">Image Cinematic</option>
+                        </select>
+                    </div>
+                </div>
+
+                <!-- Flex Layout (direction, gap, padding, halign, valign) -->
+                <div v-if="isSlide && selectedType === 'flex'" class="space-y-4">
+                    <CollapsibleSection title="Layout" icon="ph-thin ph-squares-four" :defaultExpanded="true">
+                        <div class="space-y-3">
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Direction</label>
+                                <select :value="selectedData.direction || 'horizontal'"
+                                    @change="updateField('direction', ($event.target as HTMLSelectElement).value)"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                                    <option value="horizontal">→ Horizontal</option>
+                                    <option value="vertical">↓ Vertical</option>
+                                </select>
+                            </div>
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Gap</label>
+                                <select :value="selectedData.gap || 'none'"
+                                    @change="updateField('gap', ($event.target as HTMLSelectElement).value)"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                                    <option value="none">None</option>
+                                    <option value="xs">XS</option>
+                                    <option value="sm">Sm</option>
+                                    <option value="md">Md</option>
+                                    <option value="lg">Lg</option>
+                                    <option value="xl">XL</option>
+                                    <option value="2xl">2XL</option>
+                                    <option value="3xl">3XL</option>
+                                    <option value="4xl">4XL</option>
+                                </select>
+                            </div>
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Padding</label>
+                                <select :value="selectedData.padding || 'none'"
+                                    @change="updateField('padding', ($event.target as HTMLSelectElement).value)"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                                    <option value="none">None</option>
+                                    <option value="xs">XS</option>
+                                    <option value="sm">Sm</option>
+                                    <option value="md">Md</option>
+                                    <option value="lg">Lg</option>
+                                    <option value="xl">XL</option>
+                                    <option value="2xl">2XL</option>
+                                    <option value="3xl">3XL</option>
+                                    <option value="4xl">4XL</option>
+                                </select>
+                            </div>
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Horizontal alignment</label>
+                                <select :value="selectedData.halign || 'left'"
+                                    @change="updateField('halign', ($event.target as HTMLSelectElement).value)"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                                    <option value="left">← Left</option>
+                                    <option value="center">↔ Center</option>
+                                    <option value="right">→ Right</option>
+                                </select>
+                            </div>
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Vertical alignment</label>
+                                <select :value="selectedData.valign || 'top'"
+                                    @change="updateField('valign', ($event.target as HTMLSelectElement).value)"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                                    <option value="top">↑ Top</option>
+                                    <option value="center">↕ Center</option>
+                                    <option value="bottom">↓ Bottom</option>
+                                </select>
+                            </div>
+                        </div>
+                    </CollapsibleSection>
+                </div>
+
+                <!-- Slide Specific Settings -->
+                <div v-if="isSlide" class="space-y-4">
+                    <!-- Appearance -->
+                    <CollapsibleSection title="Slide Appearance" icon="ph-thin ph-paint-brush" :defaultExpanded="true">
+                        <div class="space-y-3">
+                            <ColorField label="Background Color" fieldKey="colors.background"
+                                :value="selectedData.meta?.colors?.background" @update="updateMeta" />
+
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Background Image URL</label>
+                                <input type="text" :value="selectedData.background || ''"
+                                    @input="updateField('background', ($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="grid grid-cols-2 gap-2">
+                                <div class="space-y-1">
+                                    <label class="text-white/50 text-[10px] uppercase">Opacity</label>
+                                    <input type="number" step="0.1" min="0" max="1"
+                                        :value="selectedData.backgroundOpacity ?? 1"
+                                        @input="updateField('backgroundOpacity', 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">Size</label>
+                                    <select :value="selectedData.meta?.backgroundSize || 'cover'"
+                                        @change="updateMeta('backgroundSize', ($event.target as HTMLSelectElement).value)"
+                                        class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white">
+                                        <option value="cover">Cover</option>
+                                        <option value="contain">Contain</option>
+                                        <option value="auto">Auto</option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div class="pt-2 border-t border-[#333]">
+                                <ColorField label="Orb Color" fieldKey="effects.orbColor"
+                                    :value="selectedData.meta?.orbColor" @update="updateMetaRaw" />
+
+                                <div class="space-y-1 pt-2">
+                                    <div class="text-white/50 text-[10px] uppercase">Orb Position</div>
+                                    <div class="grid grid-cols-2 gap-2">
+                                        <input type="text" :value="selectedData.meta?.orbPos?.top || ''"
+                                            placeholder="Top (e.g. 10%)"
+                                            @input="updateMeta('orbPos.top', ($event.target as HTMLInputElement).value)"
+                                            class="bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white" />
+                                        <input type="text" :value="selectedData.meta?.orbPos?.left || ''"
+                                            placeholder="Left (e.g. 50%)"
+                                            @input="updateMeta('orbPos.left', ($event.target as HTMLInputElement).value)"
+                                            class="bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </CollapsibleSection>
+
+                    <!-- Local Transitions -->
+                    <CollapsibleSection title="Slide Transitions" icon="ph-thin ph-magic-wand" :defaultExpanded="false">
+                        <div class="space-y-3">
+                            <div class="space-y-1">
+                                <label class="text-white/50 text-[10px] uppercase">Animation Preset</label>
+                                <select :value="selectedData.meta?.effects?.animationType || ''"
+                                    @change="updateMeta('effects.animationType', ($event.target as HTMLSelectElement).value)"
+                                    class="w-full bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-xs text-white font-mono">
+                                    <option value="">Global Default</option>
+                                    <option value="cascade">Cascade</option>
+                                    <option value="fade">Fade</option>
+                                    <option value="slide">Slide</option>
+                                    <option value="zoom">Zoom</option>
+                                    <option value="spring">Spring</option>
+                                    <option value="blur">Blur</option>
+                                    <option value="skew">Skew</option>
+                                    <option value="flip">Flip (3D)</option>
+                                    <option value="zoom-rotate">Zoom Rotate</option>
+                                    <option value="elastic-up">Elastic Up</option>
+                                </select>
+                            </div>
+
+                            <div class="grid grid-cols-2 gap-2">
+                                <div class="space-y-1">
+                                    <label class="text-white/50 text-[10px] uppercase">Duration</label>
+                                    <input type="number" step="0.1"
+                                        :value="selectedData.meta?.effects?.animationDuration || ''"
+                                        placeholder="e.g. 0.8"
+                                        @input="updateMeta('effects.animationDuration', 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">Stagger</label>
+                                    <input type="number" step="0.05"
+                                        :value="selectedData.meta?.effects?.animationStagger || ''"
+                                        placeholder="e.g. 0.1"
+                                        @input="updateMeta('effects.animationStagger', 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>
+                        </div>
+                    </CollapsibleSection>
+                </div>
+
+                <!-- Action Editor (for Buttons & Images) -->
+                <div v-if="isActionable" class="pt-2 border-t border-[#333]">
+                    <ActionEditor :actionType="selectedData.actionType" :href="selectedData.href"
+                        :gotoSlide="selectedData.gotoSlide" :target="selectedData.target" :action="selectedData.action"
+                        @update="updateField" />
+                </div>
+
+                <!-- String Array Fields (paragraphs, bullets, items) -->
+
+                <template v-for="(arr, key) in stringArrayFields" :key="key">
+                    <div class="space-y-2">
+                        <div class="flex items-center justify-between">
+                            <span class="text-white/30 text-[10px] uppercase tracking-widest">{{ getFieldLabel(key as
+                                string) }}</span>
+                            <button @click="addStringToArray(key as string)"
+                                class="text-[10px] px-2 py-0.5 bg-blue-600 hover:bg-blue-500 rounded text-white">
+                                <i class="ph-thin ph-plus mr-1"></i>Add
+                            </button>
+                        </div>
+                        <div v-for="(item, i) in arr" :key="i" class="flex gap-1">
+                            <input type="text" :value="item"
+                                @input="updateArrayItem(key as string, i, ($event.target as HTMLInputElement).value)"
+                                class="flex-1 bg-[#1a1a1a] border border-[#333] rounded px-2 py-1 text-white focus:border-blue-500 focus:outline-none" />
+                            <button @click="removeFromArray(key as string, i)"
+                                class="w-6 h-6 flex items-center justify-center text-red-400 hover:text-red-300">
+                                <i class="ph-thin ph-trash text-[10px]"></i>
+                            </button>
+                        </div>
+                    </div>
+                </template>
+
+                <!-- Object Array Fields (timeline, steps, features) -->
+                <template v-for="(arr, key) in objectArrayFields" :key="key">
+                    <div class="space-y-2">
+                        <div class="flex items-center justify-between">
+                            <span class="text-white/30 text-[10px] uppercase tracking-widest">{{ key }} ({{ arr.length
+                                }})</span>
+                            <button @click="addObjectToArray(key as string)"
+                                class="text-[10px] px-2 py-0.5 bg-blue-600 hover:bg-blue-500 rounded text-white">
+                                <i class="ph-thin ph-plus mr-1"></i>Add
+                            </button>
+                        </div>
+                        <div v-for="(item, i) in arr" :key="i"
+                            class="bg-[#1a1a1a] border border-[#333] rounded p-2 space-y-2">
+                            <div class="flex items-center justify-between text-[10px] text-white/50 pb-1">
+                                <span class="font-bold uppercase truncate pr-2">{{ getItemLabel(item, i) }}</span>
+                                <div class="flex gap-1 shrink-0">
+                                    <button @click="selectItem(key as string, i)"
+                                        class="w-6 h-6 flex items-center justify-center bg-blue-600/20 text-blue-400 hover:bg-blue-600 hover:text-white rounded transition-colors"
+                                        title="Edit Element">
+                                        <i class="ph-thin ph-pencil-simple text-[10px]"></i>
+                                    </button>
+                                    <div class="flex flex-col gap-0.5">
+                                        <button v-if="i > 0" @click="moveInArray(key as string, i, -1)"
+                                            class="h-3 flex items-center justify-center text-white/30 hover:text-white"
+                                            title="Move Up">
+                                            <i class="ph-thin ph-caret-up text-[8px]"></i>
+                                        </button>
+                                        <button v-if="i < arr.length - 1" @click="moveInArray(key as string, i, 1)"
+                                            class="h-3 flex items-center justify-center text-white/30 hover:text-white"
+                                            title="Move Down">
+                                            <i class="ph-thin ph-caret-down text-[8px]"></i>
+                                        </button>
+                                    </div>
+                                    <button @click="removeFromArray(key as string, i)"
+                                        class="w-6 h-6 flex items-center justify-center text-red-400 hover:text-red-300 hover:bg-red-900/30 rounded transition-colors"
+                                        title="Delete">
+                                        <i class="ph-thin ph-trash text-[10px]"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+
+                <!-- Diagram Special Handling -->
+                <div v-if="selectedType === 'diagram'" class="space-y-4 pt-4 border-t border-[#333]">
+                    <div class="text-white/30 text-[10px] uppercase tracking-widest">Diagram Flow</div>
+
+                    <!-- Hint -->
+                    <div class="p-2 bg-blue-900/10 border border-blue-500/20 rounded text-[10px] text-blue-200">
+                        <i class="ph-thin ph-info mr-1"></i>
+                        Drag nodes directly on the canvas. Add new nodes here.
+                    </div>
+
+                    <!-- Node Management similar to Array Fields but specialized logic if needed -->
+                    <!-- Or just reuse the generic object array logic which should capture 'nodes' automatically if we add 'nodes' to arrayKeys -->
+                </div>
+
+                <!-- Delete Button -->
+                <div class="pt-4 border-t border-[#333] mt-4">
+                    <button @click="deleteSelected"
+                        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 Element
+                    </button>
+                </div>
+            </div> <!-- End of Standard Inspector -->
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useEditor } from '../../composables/useEditor';
+import FieldEditor from './FieldEditor.vue';
+import ActionEditor from './ActionEditor.vue';
+import CollapsibleSection from './CollapsibleSection.vue';
+import ColorField from './ColorField.vue';
+// Import the new dedicated editor
+
+import DiagramNodeEditor from './inspectors/DiagramNodeEditor.vue';
+import DiagramEdgeEditor from './inspectors/DiagramEdgeEditor.vue';
+import { getFieldLabel } from './fieldLabels';
+
+const editor = useEditor();
+
+const selectedData = computed(() => editor.getSelectedData());
+const selectedType = computed(() => selectedData.value?.type);
+
+const isSlide = computed(() => {
+    return /^slides\.\d+$/.test(editor.selection.value || '');
+});
+
+// Detect if a diagram node/edge is selected
+// Path format: slides.X.nodes.Y or slides.X.edges.Y
+const isDiagramNode = computed(() => {
+    return editor.selection.value && editor.selection.value.includes('.nodes.') && !editor.selection.value.endsWith('.nodes');
+});
+
+const isDiagramEdge = computed(() => {
+    const result = editor.selection.value && editor.selection.value.includes('.edges.') && !editor.selection.value.endsWith('.edges');
+    return result;
+});
+
+const isActionable = computed(() => {
+    const type = selectedData.value?.type;
+    return type === 'button' || type === 'image';
+});
+
+// Helper to update diagram node - emits event to update VueFlow directly (bypasses store -> watch cycle)
+const updateDiagramNode = (key: string, value: any) => {
+    // Parse selection path to get slide index and node id
+    // Path format: slides.X.nodes.Y
+    const parts = editor.selection.value?.split('.') || [];
+    if (parts.length < 4) return;
+
+    const slideIndex = parseInt(parts[1]);
+    const nodeData = editor.getSelectedData();
+    if (!nodeData?.id) return;
+
+    // Emit event to LayoutDiagram to update VueFlow directly
+    import('../../core/events').then(({ bus }) => {
+        bus.emit('diagram-node-update', {
+            slideIndex,
+            nodeId: nodeData.id,
+            key,
+            value
+        });
+    });
+};
+
+const deleteDiagramNode = () => {
+    deleteSelected();
+};
+
+// Helper for edges
+const updateDiagramEdge = (key: string, value: any) => {
+    // Similar logic, path is direct relative to edge
+    const path = `${editor.selection.value}.${key}`;
+    editor.store.updateNode(path, value);
+    editor.commit();
+};
+
+const addNodeWithShape = (shape: string) => {
+    const template = {
+        id: `node-${Date.now()}`,
+        label: 'New Node',
+        position: { x: 250, y: 250 },
+        type: shape, // 'default', 'input', 'output'
+        style: { backgroundColor: '#ffffff', color: '#000000', width: '150px' },
+        dragKey: Date.now() + Math.random()
+    };
+
+    // Assume selection is the slide, so append to 'nodes'
+    const path = `${editor.selection.value}.nodes`;
+    editor.store.addNode(path, template);
+    editor.commit();
+};
+
+// ... (Rest of existing methods: updateField, etc.)
+
+// Separate field types
+const primitiveFields = computed(() => {
+    if (!selectedData.value) return {};
+    const excluded = ['type', 'actionType', 'href', 'gotoSlide', 'target', 'action', 'class', 'dragKey', 'position', 'style', 'data', 'sourcePosition', 'targetPosition', 'source', 'target', 'animated', 'nodes', 'edges'];
+    const flexLayoutKeys = (isSlide.value && selectedType.value === 'flex') ? ['direction', 'gap', 'padding', 'halign', 'valign'] : [];
+    return Object.fromEntries(
+        Object.entries(selectedData.value).filter(([key, val]) =>
+            !excluded.includes(key) && !flexLayoutKeys.includes(key) &&
+            (typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number')
+        )
+    );
+});
+
+const stringArrayFields = computed(() => {
+    if (!selectedData.value) return {};
+    return Object.fromEntries(
+        Object.entries(selectedData.value).filter(([_key, val]) =>
+            Array.isArray(val) && val.length > 0 && typeof val[0] === 'string'
+        )
+    );
+});
+
+const objectArrayFields = computed<Record<string, any[]>>(() => {
+    if (!selectedData.value) return {};
+    const arrayKeys = ['timeline', 'steps', 'features', 'elements', 'datasets'];
+    return Object.fromEntries(
+        Object.entries(selectedData.value).filter(([key, val]) =>
+            arrayKeys.includes(key) && Array.isArray(val)
+        )
+    ) as Record<string, any[]>;
+});
+
+const getItemLabel = (item: any, index: number) => {
+    return item.title || item.date || item.step || item.label || `#${index + 1}`;
+};
+
+
+const getObjectTemplate = (key: string): any => {
+    const templates: Record<string, any> = {
+        'timeline': { date: '2024', title: 'New Event', description: 'Description', dragKey: Date.now() + Math.random() },
+        'steps': { step: '1', title: 'New Step', description: 'Description', dragKey: Date.now() + Math.random() },
+        'features': { icon: 'star', title: 'New Feature', desc: 'Description', dragKey: Date.now() + Math.random() },
+        'elements': { type: 'text', text: 'New text element', dragKey: Date.now() + Math.random() },
+        'datasets': { label: 'Dataset', values: [], dragKey: Date.now() + Math.random() },
+    };
+    return templates[key] || { title: 'New Item', dragKey: Date.now() + Math.random() };
+};
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+const updateField = (key: string, value: any) => {
+    const immediateKeys = ['actionType', 'variant', 'type', 'animationsEnabled', 'useOrb', 'useGlass', 'useShadows', 'class', 'backgroundOpacity'];
+    if (immediateKeys.includes(key) || typeof value === 'boolean') {
+        if (debounceTimer) clearTimeout(debounceTimer);
+        editor.updateSelected(key, value);
+        editor.commit();
+        return;
+    }
+    if (debounceTimer) clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+        editor.updateSelected(key, value);
+        editor.commit();
+    }, 150);
+};
+
+const addStringToArray = (key: string) => {
+    const path = `${editor.selection.value}.${key}`;
+    editor.store.addNode(path, 'New item');
+    editor.commit();
+};
+
+const addObjectToArray = (key: string) => {
+    const path = `${editor.selection.value}.${key}`;
+    const template = getObjectTemplate(key);
+    editor.store.addNode(path, template);
+    editor.commit();
+    const parentData = editor.getSelectedData();
+    const arr = (parentData ? parentData[key] : []) as any[];
+    if (arr && arr.length > 0) {
+        editor.select(`${path}.${arr.length - 1}`);
+    }
+};
+
+const selectItem = (key: string, index: number) => {
+    const path = `${editor.selection.value}.${key}.${index}`;
+    editor.select(path);
+};
+
+const updateArrayItem = (key: string, index: number, value: string) => {
+    const path = `${editor.selection.value}.${key}.${index}`;
+    editor.store.updateNode(path, value);
+    editor.commit();
+};
+
+
+const removeFromArray = (key: string, index: number) => {
+    const path = `${editor.selection.value}.${key}`;
+    editor.store.removeNode(path, index);
+    editor.commit();
+};
+
+const moveInArray = (key: string, index: number, direction: number) => {
+    const path = `${editor.selection.value}.${key}`;
+    editor.store.moveNode(path, index, index + direction);
+    editor.commit();
+};
+
+const deleteSelected = () => {
+    if (!editor.selection.value) return;
+    const parts = editor.selection.value.split('.');
+    const index = parseInt(parts.pop()!);
+    const arrayPath = parts.join('.');
+
+    if (!isNaN(index) && arrayPath !== 'slides') {
+        editor.store.removeNode(arrayPath, index);
+        editor.commit();
+        editor.select(null);
+    }
+};
+
+const updateMeta = (key: string, value: any) => {
+    // e.g. key='colors.background' -> meta.colors.background
+    const path = `${editor.selection.value}.meta.${key}`;
+    editor.store.updateNode(path, value);
+    editor.commit();
+};
+
+const updateMetaRaw = (key: string, value: any) => {
+    // Simplification for orbColor
+    const path = `${editor.selection.value}.meta.${key.replace('effects.', '')}`;
+    editor.store.updateNode(path, value);
+    editor.commit();
+};
+
+const onDragStart = (event: DragEvent, type: string) => {
+    if (event.dataTransfer) {
+        event.dataTransfer.setData('application/vueflow', type);
+        event.dataTransfer.effectAllowed = 'move';
+    }
+};
+</script>