lumina-slides 9.0.5 → 9.0.7

package/README.md

@@ -20,6 +20,7 @@
   <p>
     <a href="#-quick-start"><strong>🚀 Quick Start</strong></a> · 
     <a href="#-layouts--gallery"><strong>🎨 Layout Gallery</strong></a> · 
+    <a href="#-studio"><strong>🖼️ Studio</strong></a> · 
     <a href="AGENTS.md"><strong>🤖 Agent Guide</strong></a>
   </p>
 
@@ -62,6 +63,67 @@ Lumina includes **7 built-in layouts** ready to use. Just set the `type` propert
 
 > [!TIP] > **See the Code**: Click on the dropdowns below to see the exact JSON used to generate these slides.
 
+---
+
+## 🖼️ Studio
+
+Build decks visually with the built-in **Studio**: edit slides in the inspector, tweak content and styles, then export or copy the JSON. Ideal for prototyping and editing AI-generated decks.
+
+<div align="center">
+
+  <img src="public/studio.gif" alt="Lumina Studio" width="100%" style="border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 80px -20px rgba(0,0,0,0.5);" />
+
+</div>
+
+### How to use Studio
+
+Install the package, mount Lumina with **Studio** enabled on a DOM node, and optionally pass an `initialDeck`. Listen for the `save` event to get the edited deck when the user saves.
+
+```bash
+npm install lumina-slides
+```
+
+```typescript
+import { Lumina } from "lumina-slides";
+import "lumina-slides/style.css";
+
+const initialDeck = {
+  meta: { title: "My Presentation" },
+  slides: [
+    { type: "statement", title: "Welcome", subtitle: "Edit in Studio." },
+    {
+      type: "features",
+      title: "Features",
+      features: [
+        { title: "One", description: "First feature" },
+        { title: "Two", description: "Second feature" },
+      ],
+    },
+  ],
+};
+
+const engine = new Lumina("#app", {
+  studioEmbed: true,
+  initialDeck, // omit to start from an empty deck
+});
+
+engine.on("save", (deck) => {
+  // Persist to your backend, download as JSON, or load elsewhere
+  console.log("Deck saved:", deck);
+});
+```
+
+| Option | Description |
+| :----- | :---------- |
+| `studioEmbed: true` | Renders the Studio UI (inspector, toolbar) next to the deck. |
+| `initialDeck` | Optional. Deck object `{ meta, slides }` to load on init. Omit for an empty deck. |
+
+When the user clicks **Save** in Studio, Lumina emits `save` with the full deck object.
+
+> [!TIP] **Try Studio online**: Run the docs app with Studio enabled or open the [Studio route](https://lumina-slides.web.app/#/studio) to use the visual editor in the browser.
+
+---
+
 <details>
 <summary><b>Example: Timeline JSON</b></summary>
 
@@ -197,6 +259,7 @@ Lumina includes a built-in normalizer. Your LLM can output "lazy" JSON to save m
 | 📝 **[LLM System Prompt](https://lumina-slides.web.app/lumina-llm-prompt.txt)**      | Ready-to-use system prompt for your AI to generate slides        |
 | 🤖 **[Custom GPT Agent](https://chatgpt.com/g/g-6951593015fc8191bf8db3ff13ebe986-lumina-slides-agent)** | Specialized ChatGPT agent to build and preview slides instantly  |
 | 🎮 **[Live Playground](https://lumina-slides.web.app/#/playground)**                 | Try Lumina in your browser with live JSON editing                |
+| 🖼️ **[Studio](https://lumina-slides.web.app/#/studio)**                              | Visual page builder: edit slides in the inspector and export JSON |
 
 ---