lumina-slides 9.0.7 → 9.0.8

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "9.0.7",
+  "version": "9.0.8",
   "homepage": "https://lumina-slides.web.app/",
   "description": "The interface layer for the agentic era. Turn text to UI with declarative JSON.",
   "type": "module",

package/src/components/site/SiteDocs.vue

@@ -156,6 +156,59 @@
 engine.load(myDeckData);</code></pre>
                     </div>
 
+                    <!-- STUDIO -->
+                    <div v-else-if="activeSection === 'studio'" id="studio">
+                        <h1>Studio</h1>
+                        <p class="lead">Build and edit decks visually with the built-in Studio: inspector, toolbar, and one-click export.</p>
+                        <div class="my-8 rounded-xl overflow-hidden border border-white/10 shadow-2xl">
+                            <img src="/studio.gif" alt="Lumina Studio" class="w-full" />
+                        </div>
+                        <p>Mount Lumina with <code>studioEmbed: true</code> on a DOM node and optionally pass an <code>initialDeck</code>. When the user saves in Studio, listen for the <code>save</code> event to get the full deck object.</p>
+
+                        <pre class="language-js"><code><span class="text-purple-400">import</span> { Lumina } <span class="text-purple-400">from</span> <span class="text-green-400">'lumina-slides'</span>;
+<span class="text-purple-400">import</span> <span class="text-green-400">'lumina-slides/style.css'</span>;
+
+<span class="text-gray-500">// Optional: deck to load when the app starts. Omit for an empty deck.</span>
+<span class="text-blue-400">const</span> initialDeck = {
+    meta: { title: <span class="text-green-400">'My Presentation'</span> },
+    slides: [
+        { type: <span class="text-green-400">'statement'</span>, title: <span class="text-green-400">'Welcome'</span>, subtitle: <span class="text-green-400">'Edit in Studio.'</span> },
+        {
+            type: <span class="text-green-400">'features'</span>,
+            title: <span class="text-green-400">'Features'</span>,
+            features: [
+                { title: <span class="text-green-400">'One'</span>, description: <span class="text-green-400">'First feature'</span> },
+                { title: <span class="text-green-400">'Two'</span>, description: <span class="text-green-400">'Second feature'</span> }
+            ]
+        }
+    ]
+};
+
+<span class="text-blue-400">const</span> engine = <span class="text-blue-400">new</span> Lumina(<span class="text-green-400">'#app'</span>, {
+    studioEmbed: <span class="text-yellow-400">true</span>,
+    initialDeck
+});
+
+engine.on(<span class="text-green-400">'save'</span>, (deck) => {
+    <span class="text-gray-500">// Persist to your backend, download as JSON, or load elsewhere</span>
+    console.log(<span class="text-green-400">'Deck saved:'</span>, deck);
+});</code></pre>
+
+                        <h3>Options</h3>
+                        <div class="overflow-x-auto border border-white/10 rounded-lg my-6">
+                            <table class="w-full text-left text-sm text-white/70">
+                                <thead class="bg-white/5 text-white font-bold">
+                                    <tr><th class="p-3 border-b border-white/10">Option</th><th class="p-3 border-b border-white/10">Description</th></tr>
+                                </thead>
+                                <tbody class="divide-y divide-white/5">
+                                    <tr><td class="p-3 font-mono text-blue-400">studioEmbed: true</td><td class="p-3">Renders the Studio UI (inspector, toolbar) next to the deck.</td></tr>
+                                    <tr><td class="p-3 font-mono text-blue-400">initialDeck</td><td class="p-3">Optional. Deck object <code>{ meta, slides }</code> to load on init. Omit for an empty deck.</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <p>When the user clicks <strong>Save</strong> in Studio, Lumina emits <code>save</code> with the full deck. Use it to persist, export, or feed into another Lumina instance.</p>
+                    </div>
+
                     <!-- DECK STRUCTURE -->
                     <div v-else-if="activeSection === 'deck'" id="deck">
                         <h1>Deck Structure</h1>
@@ -3198,6 +3251,7 @@ const navigation = [
             { id: 'intro', label: 'Introduction' },
             { id: 'install', label: 'Installation' },
             { id: 'setup', label: 'Quick Start' },
+            { id: 'studio', label: 'Studio' },
             { id: 'theming', label: 'Theming & Presets' }
         ]
     },

package/src/components/studio/StudioEmbedRoot.vue

@@ -1,18 +1,21 @@
 <template>
-    <LuminaStudioEmbed :deck="deckRef" @save="onSave" />
+    <LuminaStudioEmbed :deck="deck" @save="onSave" />
 </template>
 
 <script setup lang="ts">
 import type { Ref } from 'vue';
+import { computed, unref } from 'vue';
 import { bus } from '../../core/events';
 import type { Deck } from '../../core/types';
 import LuminaStudioEmbed from './LuminaStudioEmbed.vue';
 
-defineProps<{
+const props = defineProps<{
     /** Ref to the current deck; engine.load() updates this. */
     deckRef: Ref<Deck | null> | Deck | null;
 }>();
 
+const deck = computed(() => unref(props.deckRef));
+
 function onSave(deck: Deck) {
     bus.emit('save', deck);
 }

package/src/components/studio/StudioToolbar.vue

@@ -83,8 +83,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed, inject, ref, onMounted, watch } from 'vue';
+import { routeLocationKey } from 'vue-router';
 import { useEditor } from '../../composables/useEditor';
 import { useAuth } from '../../composables/useAuth';
 import { saveDeck, updateDeck } from '../../utils/firebase';
@@ -97,7 +97,7 @@ const props = withDefaults(defineProps<{ embedMode?: boolean }>(), { embedMode:
 const emit = defineEmits<{ save: [deck: Deck] }>();
 
 const editor = useEditor();
-const route = useRoute();
+const route = inject(routeLocationKey) ?? { params: {} as Record<string, string | string[]> };
 const { user } = useAuth();
 const isSaving = ref(false);
 // const showSaveModal = ref(false);