lumina-slides 8.4.1 → 8.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +9 -0
- package/README.md +32 -42
- package/dist/lumina-slides.js +6971 -16090
- package/dist/lumina-slides.umd.cjs +19 -36
- package/dist/style.css +1 -1
- package/package.json +44 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) Juan Pablo Paillet
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
|
6
|
+
|
|
7
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
|
8
|
+
|
|
9
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
package/README.md
CHANGED
|
@@ -7,13 +7,15 @@
|
|
|
7
7
|
<br />
|
|
8
8
|
<br />
|
|
9
9
|
|
|
10
|
-
<h1>
|
|
10
|
+
<h1>JSON-Driven Presentation Engine</h1>
|
|
11
11
|
|
|
12
|
-
<p style="font-size: 1.2em; max-width:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
12
|
+
<p style="font-size: 1.2em; max-width: 700px;">
|
|
13
|
+
A lightweight, framework-agnostic library that renders beautiful, animated slide decks from simple JSON.
|
|
14
|
+
Perfect for AI-generated content, dynamic dashboards, and interactive presentations.
|
|
15
|
+
</p>
|
|
16
|
+
|
|
17
|
+
<p style="font-size: 1em; max-width: 600px; opacity: 0.8;">
|
|
18
|
+
✨ <b>60fps animations</b> · 🎨 <b>6 built-in themes</b> · 📱 <b>Responsive</b> · ⚡ <b>Zero dependencies UI</b>
|
|
17
19
|
</p>
|
|
18
20
|
|
|
19
21
|
<p>
|
|
@@ -35,17 +37,19 @@
|
|
|
35
37
|
|
|
36
38
|
## 🎨 Layouts & Gallery
|
|
37
39
|
|
|
38
|
-
Lumina
|
|
40
|
+
Lumina includes **7 built-in layouts** ready to use. Just set the `type` property in your JSON:
|
|
39
41
|
|
|
40
|
-
| Layout | Description
|
|
41
|
-
| :------------ |
|
|
42
|
-
| **Statement** |
|
|
43
|
-
| **Features** |
|
|
44
|
-
| **Timeline** |
|
|
45
|
-
| **Steps** | Numbered
|
|
46
|
-
| **Half** |
|
|
47
|
-
| **Chart** | Data visualization with Chart.js.
|
|
48
|
-
| **
|
|
42
|
+
| Layout | Description | Visual Preview |
|
|
43
|
+
| :------------ | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------ |
|
|
44
|
+
| **Statement** | Bold title slides for introductions, transitions, or key messages. Supports title, subtitle, and background. <br><br> `type: "statement"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-statement.png" width="200" style="border-radius: 6px;"> |
|
|
45
|
+
| **Features** | Auto-grid layout for showcasing features, benefits, or stats. Adapts columns based on item count. <br><br> `type: "features"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-features.png" width="200" style="border-radius: 6px;"> |
|
|
46
|
+
| **Timeline** | Horizontal timeline with snap navigation. Great for roadmaps, history, or process flows. <br><br> `type: "timeline"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-timeline.png" width="200" style="border-radius: 6px;"> |
|
|
47
|
+
| **Steps** | Numbered step-by-step guide. Perfect for tutorials, instructions, or procedures. <br><br> `type: "steps"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-steps.png" width="200" style="border-radius: 6px;"> |
|
|
48
|
+
| **Half** | Split layout with image on one side, content on the other. Fully responsive. <br><br> `type: "half"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-half.png" width="200" style="border-radius: 6px;"> |
|
|
49
|
+
| **Chart** | Data visualization with Chart.js. Supports bar, line, pie, and doughnut charts. <br><br> `type: "chart"` <br>⚠️ _Requires `chart.js`_ | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-chart.png" width="200" style="border-radius: 6px;"> |
|
|
50
|
+
| **Flex** | Declarative auto-layout system. Define structure with rows, columns, and nested containers. <br><br> `type: "flex"` | <img src="https://pailletjuanpablo.github.io/lumina-slides/layout-flex-demo.png" width="200" style="border-radius: 6px;"> |
|
|
51
|
+
|
|
52
|
+
> [!TIP] > **Embedded Mode**: All layouts can be rendered in compact containers (dashboards, widgets) by using the `compact: true` option.
|
|
49
53
|
|
|
50
54
|
> [!TIP] > **See the Code**: Click on the dropdowns below to see the exact JSON used to generate these slides.
|
|
51
55
|
|
|
@@ -118,7 +122,11 @@ const engine = new Lumina("#app", { theme: "ocean" });
|
|
|
118
122
|
### 1. Install
|
|
119
123
|
|
|
120
124
|
```bash
|
|
125
|
+
# Core installation
|
|
121
126
|
npm install lumina-slides
|
|
127
|
+
|
|
128
|
+
# With Chart support (optional - only if using chart slides)
|
|
129
|
+
npm install lumina-slides chart.js
|
|
122
130
|
```
|
|
123
131
|
|
|
124
132
|
### 2. Implementation
|
|
@@ -170,33 +178,15 @@ Lumina includes a built-in normalizer. Your LLM can output "lazy" JSON to save m
|
|
|
170
178
|
|
|
171
179
|
---
|
|
172
180
|
|
|
173
|
-
##
|
|
174
|
-
|
|
175
|
-
### `engine.load(deck)`
|
|
176
|
-
|
|
177
|
-
Replaces the entire deck. Use this for the initial load.
|
|
178
|
-
|
|
179
|
-
### `engine.patch(diff)`
|
|
180
|
-
|
|
181
|
-
Updates **parts** of the deck. Use this for:
|
|
181
|
+
## 📚 Documentation & Resources
|
|
182
182
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
- `action`: User clicked a button.
|
|
192
|
-
- `slideChange`: User navigated.
|
|
193
|
-
|
|
194
|
-
```typescript
|
|
195
|
-
engine.on("action", (e) => {
|
|
196
|
-
// e.value = "buy_now_clicked"
|
|
197
|
-
// Tell the Agent to proceed to checkout!
|
|
198
|
-
});
|
|
199
|
-
```
|
|
183
|
+
| Resource | Description |
|
|
184
|
+
| :------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------- |
|
|
185
|
+
| 📖 **[Full Documentation](https://pailletjuanpablo.github.io/lumina-slides/)** | Complete guides, examples, and live playground |
|
|
186
|
+
| 🔧 **[API Reference](https://pailletjuanpablo.github.io/lumina-slides/#/api)** | TypeDoc-generated API docs with all methods and types |
|
|
187
|
+
| 🤖 **[Agent Integration Guide](./AGENTS.md)** | How to integrate Lumina with AI agents (OpenAI, Anthropic, etc.) |
|
|
188
|
+
| 📝 **[LLM System Prompt](https://pailletjuanpablo.github.io/lumina-slides/lumina-llm-prompt.txt)** | Ready-to-use system prompt for your AI to generate slides |
|
|
189
|
+
| 🎮 **[Live Playground](https://pailletjuanpablo.github.io/lumina-slides/#/playground)** | Try Lumina in your browser with live JSON editing |
|
|
200
190
|
|
|
201
191
|
---
|
|
202
192
|
|