lumina-slides 9.0.0 → 9.0.2

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.
Files changed (19) hide show
  1. package/dist/lumina-slides.js +8221 -8183
  2. package/dist/lumina-slides.umd.cjs +196 -196
  3. package/dist/style.css +1 -1
  4. package/package.json +1 -1
  5. package/src/animation/registry.ts +13 -10
  6. package/src/animation/stagger.ts +1 -1
  7. package/src/animation/types.ts +3 -1
  8. package/src/components/LuminaDeck.vue +15 -7
  9. package/src/components/site/SiteDocs.vue +270 -400
  10. package/src/components/site/SiteExamples.vue +1 -0
  11. package/src/core/Lumina.ts +43 -18
  12. package/src/core/animationConfig.ts +1 -1
  13. package/src/core/elementController.ts +14 -8
  14. package/src/core/elementResolver.ts +4 -4
  15. package/src/core/store.ts +6 -2
  16. package/src/core/types.ts +34 -9
  17. package/src/index.ts +4 -1
  18. package/src/utils/templateInterpolation.ts +52 -0
  19. package/src/views/DeckView.vue +55 -31
package/src/components/site/SiteDocs.vue CHANGED
@@ -180,8 +180,28 @@ engine.load(myDeckData);</code></pre>
180
180
  ]
181
181
  }</code></pre>
182
182
 
183
- <h3>Common slide-level properties</h3>
184
- <p>Any slide can include: <code>sizing</code> (<code>"viewport"</code> | <code>"container"</code>), <code>background</code> (image URL or <code>{ type: "video", src, ... }</code>), <code>notes</code> (speaker notes), <code>class</code>, <code>timelineTracks</code> (for keyframe animations; see <em>Timeline (keyframes)</em>). Layout-specific props (e.g. <code>image</code>, <code>timeline</code>, <code>features</code>) are described in each layout reference.</p>
183
+ <h3>Common slide-level properties (SlideBase)</h3>
184
+ <p>Every slide inherits these optional properties. Layout-specific props are in each layout reference.</p>
185
+ <div class="overflow-x-auto border border-white/10 rounded-lg my-6">
186
+ <table class="w-full text-left text-sm text-gray-400">
187
+ <thead class="bg-white/5 text-white font-bold">
188
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
189
+ </thead>
190
+ <tbody class="divide-y divide-white/5">
191
+ <tr><td class="p-3 font-mono text-blue-400">sizing</td><td class="p-3 font-mono text-xs">"viewport" | "container"</td><td class="p-3">Height behavior. Default: "viewport" (min 100vh). "container" = 100% of parent.</td></tr>
192
+ <tr><td class="p-3 font-mono text-blue-400">background</td><td class="p-3 font-mono text-xs">string | VideoProperties</td><td class="p-3">Image URL or <code>{ type: "video", src, poster?, autoplay?, loop?, muted? }</code>.</td></tr>
193
+ <tr><td class="p-3 font-mono text-blue-400">backgroundOpacity</td><td class="p-3 font-mono text-xs">number</td><td class="p-3">0–1. Default: 1 (or 0.2 for default overlay).</td></tr>
194
+ <tr><td class="p-3 font-mono text-blue-400">notes</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Speaker notes (basic markdown). For exportState and speaker window.</td></tr>
195
+ <tr><td class="p-3 font-mono text-blue-400">class</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Extra CSS class on the slide content container.</td></tr>
196
+ <tr><td class="p-3 font-mono text-blue-400">timelineTracks</td><td class="p-3 font-mono text-xs">Record&lt;id, Keyframes&gt;</td><td class="p-3">Remotion-style: <code>{ [elementId]: { "0": { opacity, x, y, scale, rotate?, visible? }, "1": {...} } }</code>. Use with <code>engine.seekTo(progress)</code>.</td></tr>
197
+ <tr><td class="p-3 font-mono text-blue-400">reveal</td><td class="p-3 font-mono text-xs">RevealInSequenceOptions?</td><td class="p-3">When set, engine runs <code>revealInSequence</code> on ready and slideChange. <code>delayMs</code>, <code>staggerMode</code>, <code>preset</code>, etc.</td></tr>
198
+ <tr><td class="p-3 font-mono text-blue-400">ids</td><td class="p-3 font-mono text-xs">Record&lt;path, string&gt;?</td><td class="p-3">Override element ids: <code>{ "tag": "intro-tag", "features.0": "hero" }</code>. For <code>engine.element(id)</code>.</td></tr>
199
+ <tr><td class="p-3 font-mono text-blue-400">meta</td><td class="p-3 font-mono text-xs">object?</td><td class="p-3">Slide-specific: <code>orbColor</code>, <code>orbPos</code>, <code>backgroundSize</code>, or custom.</td></tr>
200
+ <tr><td class="p-3 font-mono text-blue-400">id</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Unique slide ID. Used by exportState and navigation.</td></tr>
201
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Fallback for exportState/speaker notes when the layout has no required title.</td></tr>
202
+ </tbody>
203
+ </table>
204
+ </div>
185
205
  </div>
186
206
 
187
207
  <!-- SLIDE LAYOUTS -->
@@ -352,12 +372,21 @@ engine.load(myDeckData);</code></pre>
352
372
  <ul>
353
373
  <li><code>theme</code> — Preset name (<code>default</code>, <code>ocean</code>, <code>midnight</code>, <code>forest</code>, <code>cyber</code>, <code>latte</code>, <code>sunset</code>, <code>monochrome</code>) or a <code>ThemeConfig</code> object.</li>
354
374
  <li><code>loop</code> — Loop back to the first slide after the last. Default: <code>false</code>.</li>
355
- <li><code>navigation</code>, <code>keyboard</code>, <code>touch</code> — Enable/disable navigation. Defaults: <code>true</code>.</li>
356
375
  <li><code>selector</code> — Override the mount selector (default from constructor).</li>
357
376
  <li><code>debug</code> — Enable debug logs. Default: <code>false</code>.</li>
358
377
  <li><code>studio</code> — Enable Studio (page builder) mode. Default: <code>false</code>.</li>
359
378
  </ul>
360
379
 
380
+ <h3>Navigation</h3>
381
+ <p>Control how users move between slides (buttons, keyboard, touch):</p>
382
+ <ul>
383
+ <li><code>navigation</code> — Master switch. If <code>false</code>, prev/next arrow buttons are hidden and keyboard/touch do nothing. Default: <code>true</code>.</li>
384
+ <li><code>keyboard</code> — Enable keyboard shortcuts for next/prev. Only applies when <code>navigation</code> is true. Default: <code>true</code>.</li>
385
+ <li><code>touch</code> — Enable touch/swipe for next/prev. Only applies when <code>navigation</code> is true. Default: <code>true</code>.</li>
386
+ <li><code>ui.showControls</code> — Show or hide the prev/next (and speaker-notes) buttons in the footer. When hidden, keyboard and touch still work if enabled. Default: <code>true</code>.</li>
387
+ <li><code>keys</code> — Custom key bindings: <code>keys: { next: ['ArrowRight',' ','Enter'], prev: ['ArrowLeft','Backspace'] }</code>. Use <code>KeyboardEvent.key</code> values. You can override only one side, e.g. <code>keys: { prev: ['Backspace'] }</code> keeps default <code>next</code> and only changes <code>prev</code>.</li>
388
+ </ul>
389
+
361
390
  <h3>elementControl</h3>
362
391
  <p>For reveal-on-demand: <code>elementControl: { defaultVisible: false }</code> makes all elements start hidden. Override per id with <code>meta.initialElementState</code>. See <em>Element Control</em>.</p>
363
392
 
@@ -374,11 +403,8 @@ engine.load(myDeckData);</code></pre>
374
403
  <span class="text-blue-400">visible</span>: <span class="text-yellow-400">true</span>,
375
404
  <span class="text-blue-400">showProgressBar</span>: <span class="text-yellow-400">true</span>,
376
405
  <span class="text-blue-400">showSlideCount</span>: <span class="text-yellow-400">true</span>,
377
- <span class="text-blue-400">showControls</span>: <span class="text-yellow-400">true</span> <span class="text-gray-500">// Next/Prev arrows</span>
406
+ <span class="text-blue-400">showControls</span>: <span class="text-yellow-400">true</span> <span class="text-gray-500">// Next/Prev + speaker-notes; hide to rely only on keyboard/touch</span>
378
407
  }</code></pre>
379
-
380
- <h3>keys</h3>
381
- <p>Custom key bindings: <code>keys: { next: ['ArrowRight',' '], prev: ['ArrowLeft'] }</code>.</p>
382
408
  </div>
383
409
 
384
410
  <!-- EVENTS -->
@@ -1809,11 +1835,54 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
1809
1835
  <span class="text-gray-500">// "User is on slide ${state.currentSlide.index + 1} (${state.currentSlide.type}). ${state.narrative}"</span></code></pre>
1810
1836
  </div>
1811
1837
 
1838
+ <!-- TEMPLATE TAGS & engine.data -->
1839
+ <div v-else-if="activeSection === 'template-tags'">
1840
+ <h1>Template Tags & Key-Value Store</h1>
1841
+ <p class="lead">Use <code>engine.data</code> as a key-value store and <code v-pre>{{key}}</code> placeholders in slide strings. Values resolve at render time and update reactively when <code>engine.data</code> changes.</p>
1842
+
1843
+ <h2>Key-Value Store (engine.data)</h2>
1844
+ <p>Store and read arbitrary values at any time. Persists across <code>load()</code> and <code>patch()</code>; useful for preferences, flags, or app state to share with your agent or between handlers.</p>
1845
+ <pre><code><span class="text-gray-500">// Set and get</span>
1846
+ engine.data.set(<span class="text-green-400">"theme"</span>, <span class="text-green-400">"dark"</span>);
1847
+ engine.data.get(<span class="text-green-400">"theme"</span>); <span class="text-gray-500">// "dark"</span>
1848
+
1849
+ <span class="text-gray-500">// Check, delete, list keys</span>
1850
+ engine.data.has(<span class="text-green-400">"theme"</span>); <span class="text-gray-500">// true</span>
1851
+ engine.data.delete(<span class="text-green-400">"theme"</span>);
1852
+ engine.data.keys(); <span class="text-gray-500">// ["otherKey", ...]</span>
1853
+
1854
+ <span class="text-gray-500">// Chainable set; clear all</span>
1855
+ engine.data.set(<span class="text-green-400">"a"</span>, <span class="text-cyan-400">1</span>).set(<span class="text-green-400">"b"</span>, <span class="text-cyan-400">2</span>);
1856
+ engine.data.clear();</code></pre>
1857
+
1858
+ <h2>Template Tags in Slide Content</h2>
1859
+ <p>Any string in slide content (title, subtitle, description, features, steps, timeline, etc.) can use <code v-pre>{{key}}</code> placeholders. At render time they are replaced with <code>engine.data.get(key)</code>; missing keys become an empty string. When you change values via <code>engine.data.set(key, value)</code>, the presentation updates automatically.</p>
1860
+ <pre><code>engine.data.set(<span class="text-green-400">"product"</span>, <span class="text-green-400">"Lumina"</span>);
1861
+ engine.data.set(<span class="text-green-400">"version"</span>, <span class="text-green-400">"2.0"</span>);
1862
+ engine.load({
1863
+ meta: { title: <span class="text-green-400">"Welcome"</span> },
1864
+ slides: [
1865
+ { type: <span class="text-green-400">"statement"</span>, title: <span class="text-green-400">"&#123;&#123;product&#125;&#125; v&#123;&#123;version&#125;&#125;"</span>, subtitle: <span class="text-green-400">"Hello &#123;&#123;user&#125;&#125;"</span> }
1866
+ ]
1867
+ });
1868
+ <span class="text-gray-500">// Renders: "Lumina v2.0" / "Hello " (user not set)</span>
1869
+
1870
+ engine.data.set(<span class="text-green-400">"user"</span>, <span class="text-green-400">"World"</span>);
1871
+ <span class="text-gray-500">// Renders: "Lumina v2.0" / "Hello World" (updates in place)</span></code></pre>
1872
+ <p>Keys: letters, numbers, underscore (e.g. <code v-pre>{{name}}</code>, <code v-pre>{{user_name}}</code>). Values are coerced to string; <code>null</code>/<code>undefined</code> → <code>""</code>.</p>
1873
+
1874
+ <p class="mt-8">
1875
+ <router-link to="/deck/layout-template-tags"
1876
+ class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-blue-500/20 text-blue-400 border border-blue-500/40 hover:bg-blue-500/30 transition font-medium">
1877
+ View Template Tags demo →
1878
+ </router-link>
1879
+ </p>
1880
+ </div>
1881
+
1812
1882
  <!-- REF: STATEMENT -->
1813
1883
  <div v-else-if="activeSection === 'ref-statement'">
1814
1884
  <h1>Statement Slide</h1>
1815
- <p class="lead">Used for high-impact titles, opening covers, or emphatic quotes. It is designed
1816
- to be punchy and minimal.</p>
1885
+ <p class="lead">High-impact titles, opening covers, or emphatic quotes. Punchy and minimal. Supports <code>sizing</code>, <code>background</code>, <code>notes</code>, <code>class</code>, <code>timelineTracks</code>, <code>reveal</code>, <code>ids</code>, <code>meta</code> (SlideBase).</p>
1817
1886
 
1818
1887
  <div class="my-8">
1819
1888
  <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
@@ -1827,34 +1896,14 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
1827
1896
  </tr>
1828
1897
  </thead>
1829
1898
  <tbody class="divide-y divide-white/5">
1830
- <tr>
1831
- <td class="p-3 font-mono text-purple-400">type</td>
1832
- <td class="p-3 font-mono text-xs">"statement"</td>
1833
- <td class="p-3">Required. Identifies the layout.</td>
1834
- </tr>
1835
- <tr>
1836
- <td class="p-3 font-mono text-blue-400">title</td>
1837
- <td class="p-3 font-mono text-xs">string</td>
1838
- <td class="p-3">Main headline. Keep it short (3-6 words).</td>
1839
- </tr>
1840
- <tr>
1841
- <td class="p-3 font-mono text-blue-400">subtitle</td>
1842
- <td class="p-3 font-mono text-xs">string?</td>
1843
- <td class="p-3">Optional supporting text.</td>
1844
- </tr>
1845
- <tr>
1846
- <td class="p-3 font-mono text-blue-400">tag</td>
1847
- <td class="p-3 font-mono text-xs">string?</td>
1848
- <td class="p-3">Small eyebrow tag above the title.</td>
1849
- </tr>
1850
- <tr>
1851
- <td class="p-3 font-mono text-cyan-400">notes</td>
1852
- <td class="p-3 font-mono text-xs">string?</td>
1853
- <td class="p-3">Speaker notes (available on any slide via <code>SlideBase</code>).</td>
1854
- </tr>
1899
+ <tr><td class="p-3 font-mono text-purple-400">type</td><td class="p-3 font-mono text-xs">"statement"</td><td class="p-3">Required. Identifies the layout.</td></tr>
1900
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Main headline. Keep it short (3–6 words). Alias: <code>t</code>.</td></tr>
1901
+ <tr><td class="p-3 font-mono text-blue-400">subtitle</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Optional supporting text. Alias: <code>s</code>.</td></tr>
1902
+ <tr><td class="p-3 font-mono text-blue-400">tag</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Small eyebrow tag above the title.</td></tr>
1855
1903
  </tbody>
1856
1904
  </table>
1857
1905
  </div>
1906
+ <p class="text-white/50 text-sm mt-2">Element ids: <code>s{N}-tag</code>, <code>s{N}-title</code>, <code>s{N}-subtitle</code>. Override via <code>ids</code>.</p>
1858
1907
  </div>
1859
1908
 
1860
1909
  <div class="my-8">
@@ -1866,63 +1915,29 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
1866
1915
  <!-- REF: HALF -->
1867
1916
  <div v-else-if="activeSection === 'ref-half'">
1868
1917
  <h1>Half / Split Slide</h1>
1869
- <p class="lead">Image or video on one side, text on the other. Ideal for product showcases or "about me" sections. <strong>One of <code>image</code> or <code>video</code> is required.</strong></p>
1918
+ <p class="lead">Image or video on one side, text on the other. Product showcases, "about me", explainers. <strong>Provide <code>image</code> or <code>video</code> (one required).</strong> Plus SlideBase (sizing, background, notes, class, timelineTracks, reveal, ids, meta).</p>
1870
1919
 
1871
1920
  <div class="my-8">
1872
1921
  <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
1873
1922
  <div class="overflow-x-auto border border-white/10 rounded-lg">
1874
1923
  <table class="w-full text-left text-sm text-gray-400">
1875
1924
  <thead class="bg-white/5 text-white font-bold">
1876
- <tr>
1877
- <th class="p-3 border-b border-white/10">Property</th>
1878
- <th class="p-3 border-b border-white/10">Type</th>
1879
- <th class="p-3 border-b border-white/10">Description</th>
1880
- </tr>
1925
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
1881
1926
  </thead>
1882
1927
  <tbody class="divide-y divide-white/5">
1883
- <tr>
1884
- <td class="p-3 font-mono text-purple-400">type</td>
1885
- <td class="p-3 font-mono text-xs">"half"</td>
1886
- <td class="p-3">Required.</td>
1887
- </tr>
1888
- <tr>
1889
- <td class="p-3 font-mono text-blue-400">image</td>
1890
- <td class="p-3 font-mono text-xs">string?</td>
1891
- <td class="p-3">Image URL. Omit if using <code>video</code>.</td>
1892
- </tr>
1893
- <tr>
1894
- <td class="p-3 font-mono text-blue-400">video</td>
1895
- <td class="p-3 font-mono text-xs">VideoProperties?</td>
1896
- <td class="p-3"><code>{ type: "video", src, autoplay?, muted?, loop? }</code>. Use instead of <code>image</code>.</td>
1897
- </tr>
1898
- <tr>
1899
- <td class="p-3 font-mono text-blue-400">imageSide</td>
1900
- <td class="p-3 font-mono text-xs">"left" | "right"</td>
1901
- <td class="p-3">Which side the media is on. Default: "left".</td>
1902
- </tr>
1903
- <tr>
1904
- <td class="p-3 font-mono text-blue-400">tag</td>
1905
- <td class="p-3 font-mono text-xs">string?</td>
1906
- <td class="p-3">Optional eyebrow label above the title.</td>
1907
- </tr>
1908
- <tr>
1909
- <td class="p-3 font-mono text-blue-400">title</td>
1910
- <td class="p-3 font-mono text-xs">string</td>
1911
- <td class="p-3">Headline text.</td>
1912
- </tr>
1913
- <tr>
1914
- <td class="p-3 font-mono text-blue-400">paragraphs</td>
1915
- <td class="p-3 font-mono text-xs">string[]</td>
1916
- <td class="p-3">Array of text blocks.</td>
1917
- </tr>
1918
- <tr>
1919
- <td class="p-3 font-mono text-blue-400">cta</td>
1920
- <td class="p-3 font-mono text-xs">string?</td>
1921
- <td class="p-3">Optional button label.</td>
1922
- </tr>
1928
+ <tr><td class="p-3 font-mono text-purple-400">type</td><td class="p-3 font-mono text-xs">"half"</td><td class="p-3">Required.</td></tr>
1929
+ <tr><td class="p-3 font-mono text-blue-400">image</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Image URL. Omit if using <code>video</code>.</td></tr>
1930
+ <tr><td class="p-3 font-mono text-blue-400">video</td><td class="p-3 font-mono text-xs">VideoProperties?</td><td class="p-3"><code>{ type: "video", src, poster?, autoplay?, loop?, muted?, controls?, className? }</code>. Use instead of <code>image</code>.</td></tr>
1931
+ <tr><td class="p-3 font-mono text-blue-400">imageSide</td><td class="p-3 font-mono text-xs">"left" | "right"</td><td class="p-3">Which side the media is on. Default: "left".</td></tr>
1932
+ <tr><td class="p-3 font-mono text-blue-400">imageClass</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Extra CSS class on the <code>img</code> (e.g. filters, scale).</td></tr>
1933
+ <tr><td class="p-3 font-mono text-blue-400">tag</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Eyebrow label above the title.</td></tr>
1934
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Headline.</td></tr>
1935
+ <tr><td class="p-3 font-mono text-blue-400">paragraphs</td><td class="p-3 font-mono text-xs">string[]</td><td class="p-3">Array of text blocks. Rendered as separate <code>&lt;p&gt;</code>.</td></tr>
1936
+ <tr><td class="p-3 font-mono text-blue-400">cta</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Button label. Click emits <code>action</code> with <code>type: "cta"</code>, <code>label</code>.</td></tr>
1923
1937
  </tbody>
1924
1938
  </table>
1925
1939
  </div>
1940
+ <p class="text-white/50 text-sm mt-2">Element ids: <code>s{N}-media</code>, <code>s{N}-tag</code>, <code>s{N}-title</code>, <code>s{N}-paragraphs</code>, <code>s{N}-cta</code>.</p>
1926
1941
  </div>
1927
1942
 
1928
1943
  <div class="my-8">
@@ -1934,43 +1949,40 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
1934
1949
  <!-- REF: FEATURES -->
1935
1950
  <div v-else-if="activeSection === 'ref-features'">
1936
1951
  <h1>Features Slide</h1>
1937
- <p class="lead">Displays a grid of cards, perfect for listing benefits, stats, or services.</p>
1952
+ <p class="lead">Grid of cards for benefits, stats, or services. Responsive: 1 column on mobile, auto-fit on desktop. SlideBase (sizing, background, notes, class, timelineTracks, reveal, ids, meta) applies.</p>
1938
1953
 
1939
1954
  <div class="my-8">
1940
- <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
1955
+ <h2 class="text-xl font-bold text-white mb-4">Slide configuration</h2>
1941
1956
  <div class="overflow-x-auto border border-white/10 rounded-lg">
1942
1957
  <table class="w-full text-left text-sm text-gray-400">
1943
1958
  <thead class="bg-white/5 text-white font-bold">
1944
- <tr>
1945
- <th class="p-3 border-b border-white/10">Property</th>
1946
- <th class="p-3 border-b border-white/10">Type</th>
1947
- <th class="p-3 border-b border-white/10">Description</th>
1948
- </tr>
1959
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
1949
1960
  </thead>
1950
1961
  <tbody class="divide-y divide-white/5">
1951
- <tr>
1952
- <td class="p-3 font-mono text-purple-400">type</td>
1953
- <td class="p-3 font-mono text-xs">"features"</td>
1954
- <td class="p-3">Required.</td>
1955
- </tr>
1956
- <tr>
1957
- <td class="p-3 font-mono text-blue-400">title</td>
1958
- <td class="p-3 font-mono text-xs">string</td>
1959
- <td class="p-3">Section header.</td>
1960
- </tr>
1961
- <tr>
1962
- <td class="p-3 font-mono text-blue-400">description</td>
1963
- <td class="p-3 font-mono text-xs">string?</td>
1964
- <td class="p-3">Optional context.</td>
1965
- </tr>
1966
- <tr>
1967
- <td class="p-3 font-mono text-blue-400">features</td>
1968
- <td class="p-3 font-mono text-xs">FeatureItem[]</td>
1969
- <td class="p-3">Array: <code>{ class?, title, desc, icon?, id? }</code>. <code>class</code> can be <code>""</code>; <code>desc</code> or <code>description</code>.</td>
1970
- </tr>
1962
+ <tr><td class="p-3 font-mono text-purple-400">type</td><td class="p-3 font-mono text-xs">"features"</td><td class="p-3">Required.</td></tr>
1963
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Section header.</td></tr>
1964
+ <tr><td class="p-3 font-mono text-blue-400">description</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Context below the header. Alias: <code>d</code>, <code>desc</code>.</td></tr>
1965
+ <tr><td class="p-3 font-mono text-blue-400">features</td><td class="p-3 font-mono text-xs">FeatureItem[]</td><td class="p-3">Array of feature cards. See FeatureItem below.</td></tr>
1971
1966
  </tbody>
1972
1967
  </table>
1973
1968
  </div>
1969
+
1970
+ <h3 class="text-lg font-bold text-white mt-8 mb-4">FeatureItem (each card)</h3>
1971
+ <div class="overflow-x-auto border border-white/10 rounded-lg">
1972
+ <table class="w-full text-left text-sm text-gray-400">
1973
+ <thead class="bg-white/5 text-white font-bold">
1974
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
1975
+ </thead>
1976
+ <tbody class="divide-y divide-white/5">
1977
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Card title.</td></tr>
1978
+ <tr><td class="p-3 font-mono text-blue-400">description</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Body text. Alias: <code>desc</code>.</td></tr>
1979
+ <tr><td class="p-3 font-mono text-blue-400">icon</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Icon name. Phosphor: <code>ph-star</code>, <code>ph-check</code>; or <code>star</code> (prefix <code>ph-</code> applied).</td></tr>
1980
+ <tr><td class="p-3 font-mono text-blue-400">class</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Extra CSS class on the card. Use <code>""</code> if omitted.</td></tr>
1981
+ <tr><td class="p-3 font-mono text-blue-400">id</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Override for <code>engine.element(id)</code>. Default: <code>s{N}-features-{i}</code>.</td></tr>
1982
+ </tbody>
1983
+ </table>
1984
+ </div>
1985
+ <p class="text-white/50 text-sm mt-2">Element ids: <code>s{N}-header</code>, <code>s{N}-features-0</code>, <code>s{N}-features-1</code>, …</p>
1974
1986
  </div>
1975
1987
 
1976
1988
  <div class="my-8">
@@ -1982,43 +1994,41 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
1982
1994
  <!-- REF: TIMELINE -->
1983
1995
  <div v-else-if="activeSection === 'ref-timeline'">
1984
1996
  <h1>Timeline Slide</h1>
1985
- <p class="lead">Vertical chronological list for events, roadmaps, or history. Do not confuse with <em>Timeline (keyframes)</em> for <code>slide.timelineTracks</code>.</p>
1997
+ <p class="lead">Vertical chronological list for events, roadmaps, or history. Alternating left/right on desktop. <em>Not</em> the same as <code>slide.timelineTracks</code> (keyframe animation). SlideBase applies.</p>
1986
1998
 
1987
1999
  <div class="my-8">
1988
- <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
2000
+ <h2 class="text-xl font-bold text-white mb-4">Slide configuration</h2>
1989
2001
  <div class="overflow-x-auto border border-white/10 rounded-lg">
1990
2002
  <table class="w-full text-left text-sm text-gray-400">
1991
2003
  <thead class="bg-white/5 text-white font-bold">
1992
- <tr>
1993
- <th class="p-3 border-b border-white/10">Property</th>
1994
- <th class="p-3 border-b border-white/10">Type</th>
1995
- <th class="p-3 border-b border-white/10">Description</th>
1996
- </tr>
2004
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
1997
2005
  </thead>
1998
2006
  <tbody class="divide-y divide-white/5">
1999
- <tr>
2000
- <td class="p-3 font-mono text-purple-400">type</td>
2001
- <td class="p-3 font-mono text-xs">"timeline"</td>
2002
- <td class="p-3">Required.</td>
2003
- </tr>
2004
- <tr>
2005
- <td class="p-3 font-mono text-blue-400">title</td>
2006
- <td class="p-3 font-mono text-xs">string</td>
2007
- <td class="p-3">Header.</td>
2008
- </tr>
2009
- <tr>
2010
- <td class="p-3 font-mono text-blue-400">subtitle</td>
2011
- <td class="p-3 font-mono text-xs">string?</td>
2012
- <td class="p-3">Optional.</td>
2013
- </tr>
2014
- <tr>
2015
- <td class="p-3 font-mono text-blue-400">timeline</td>
2016
- <td class="p-3 font-mono text-xs">TimelineItem[]</td>
2017
- <td class="p-3">Array: <code>{ date, title, description, icon?, id? }</code>. Aliases: <code>t</code>→title, <code>desc</code>→description.</td>
2018
- </tr>
2007
+ <tr><td class="p-3 font-mono text-purple-400">type</td><td class="p-3 font-mono text-xs">"timeline"</td><td class="p-3">Required.</td></tr>
2008
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Header. Alias: <code>t</code>.</td></tr>
2009
+ <tr><td class="p-3 font-mono text-blue-400">subtitle</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Subheader. Alias: <code>s</code>.</td></tr>
2010
+ <tr><td class="p-3 font-mono text-blue-400">timeline</td><td class="p-3 font-mono text-xs">TimelineItem[]</td><td class="p-3">Ordered events. See TimelineItem below. Alias: <code>tl</code>.</td></tr>
2011
+ <tr><td class="p-3 font-mono text-blue-400">lineClass</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Extra CSS class on the vertical connector line.</td></tr>
2019
2012
  </tbody>
2020
2013
  </table>
2021
2014
  </div>
2015
+
2016
+ <h3 class="text-lg font-bold text-white mt-8 mb-4">TimelineItem (each event)</h3>
2017
+ <div class="overflow-x-auto border border-white/10 rounded-lg">
2018
+ <table class="w-full text-left text-sm text-gray-400">
2019
+ <thead class="bg-white/5 text-white font-bold">
2020
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
2021
+ </thead>
2022
+ <tbody class="divide-y divide-white/5">
2023
+ <tr><td class="p-3 font-mono text-blue-400">date</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Time marker (e.g. "Q1 2024", "Jan 15", "Now").</td></tr>
2024
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Event title. Alias: <code>t</code>.</td></tr>
2025
+ <tr><td class="p-3 font-mono text-blue-400">description</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Details. Alias: <code>desc</code>, <code>d</code>.</td></tr>
2026
+ <tr><td class="p-3 font-mono text-blue-400">icon</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Phosphor icon. <code>ph-*</code> or short name.</td></tr>
2027
+ <tr><td class="p-3 font-mono text-blue-400">id</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Override for element control. Default: <code>s{N}-timeline-{i}</code>.</td></tr>
2028
+ </tbody>
2029
+ </table>
2030
+ </div>
2031
+ <p class="text-white/50 text-sm mt-2">Element ids: <code>s{N}-title</code>, <code>s{N}-subtitle</code>, <code>s{N}-timeline-0</code>, …</p>
2022
2032
  </div>
2023
2033
 
2024
2034
  <div class="my-8">
@@ -2030,43 +2040,41 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
2030
2040
  <!-- REF: STEPS -->
2031
2041
  <div v-else-if="activeSection === 'ref-steps'">
2032
2042
  <h1>Steps Slide</h1>
2033
- <p class="lead">Used for tutorials, "how-to" guides, or process flows.</p>
2043
+ <p class="lead">Numbered steps for tutorials, how-to guides, or process flows. Responsive grid. SlideBase applies.</p>
2034
2044
 
2035
2045
  <div class="my-8">
2036
- <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
2046
+ <h2 class="text-xl font-bold text-white mb-4">Slide configuration</h2>
2037
2047
  <div class="overflow-x-auto border border-white/10 rounded-lg">
2038
2048
  <table class="w-full text-left text-sm text-gray-400">
2039
2049
  <thead class="bg-white/5 text-white font-bold">
2040
- <tr>
2041
- <th class="p-3 border-b border-white/10">Property</th>
2042
- <th class="p-3 border-b border-white/10">Type</th>
2043
- <th class="p-3 border-b border-white/10">Description</th>
2044
- </tr>
2050
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
2045
2051
  </thead>
2046
2052
  <tbody class="divide-y divide-white/5">
2047
- <tr>
2048
- <td class="p-3 font-mono text-purple-400">type</td>
2049
- <td class="p-3 font-mono text-xs">"steps"</td>
2050
- <td class="p-3">Required.</td>
2051
- </tr>
2052
- <tr>
2053
- <td class="p-3 font-mono text-blue-400">title</td>
2054
- <td class="p-3 font-mono text-xs">string</td>
2055
- <td class="p-3">Process name.</td>
2056
- </tr>
2057
- <tr>
2058
- <td class="p-3 font-mono text-blue-400">subtitle</td>
2059
- <td class="p-3 font-mono text-xs">string?</td>
2060
- <td class="p-3">Optional.</td>
2061
- </tr>
2062
- <tr>
2063
- <td class="p-3 font-mono text-blue-400">steps</td>
2064
- <td class="p-3 font-mono text-xs">StepItem[]</td>
2065
- <td class="p-3">Array: <code>{ step, title, description?, icon?, id? }</code>. <code>step</code> is e.g. <code>"01"</code>.</td>
2066
- </tr>
2053
+ <tr><td class="p-3 font-mono text-purple-400">type</td><td class="p-3 font-mono text-xs">"steps"</td><td class="p-3">Required.</td></tr>
2054
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Process or section header.</td></tr>
2055
+ <tr><td class="p-3 font-mono text-blue-400">subtitle</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Optional subheader.</td></tr>
2056
+ <tr><td class="p-3 font-mono text-blue-400">steps</td><td class="p-3 font-mono text-xs">StepItem[]</td><td class="p-3">Ordered steps. See StepItem below. Alias: <code>st</code>.</td></tr>
2057
+ </tbody>
2058
+ </table>
2059
+ </div>
2060
+
2061
+ <h3 class="text-lg font-bold text-white mt-8 mb-4">StepItem (each step)</h3>
2062
+ <div class="overflow-x-auto border border-white/10 rounded-lg">
2063
+ <table class="w-full text-left text-sm text-gray-400">
2064
+ <thead class="bg-white/5 text-white font-bold">
2065
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
2066
+ </thead>
2067
+ <tbody class="divide-y divide-white/5">
2068
+ <tr><td class="p-3 font-mono text-blue-400">step</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Badge label: <code>"01"</code>, <code>"1"</code>, <code>"A"</code>, etc.</td></tr>
2069
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Step title.</td></tr>
2070
+ <tr><td class="p-3 font-mono text-blue-400">description</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Body text.</td></tr>
2071
+ <tr><td class="p-3 font-mono text-blue-400">icon</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Phosphor icon; shown as watermark. <code>ph-*</code> or short name.</td></tr>
2072
+ <tr><td class="p-3 font-mono text-blue-400">class</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Extra CSS class on the step card.</td></tr>
2073
+ <tr><td class="p-3 font-mono text-blue-400">id</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Override for element control. Default: <code>s{N}-steps-{i}</code>.</td></tr>
2067
2074
  </tbody>
2068
2075
  </table>
2069
2076
  </div>
2077
+ <p class="text-white/50 text-sm mt-2">Element ids: <code>s{N}-header</code>, <code>s{N}-steps-0</code>, <code>s{N}-steps-1</code>, …</p>
2070
2078
  </div>
2071
2079
 
2072
2080
  <div class="my-8">
@@ -2078,187 +2086,61 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
2078
2086
  <!-- REF: FLEX -->
2079
2087
  <div v-else-if="activeSection === 'ref-flex'">
2080
2088
  <h1>Flex Layout</h1>
2081
- <p class="lead">Flow-based layout for composing slides using semantic sizing. No coordinates
2082
- needed—perfect for LLM generation.</p>
2089
+ <p class="lead">Flow-based layout with semantic sizing (quarter, half, full, etc.). No coordinates—ideal for LLMs. SlideBase applies. Top-level and content children can have <code>size?: FlexSize</code>.</p>
2083
2090
 
2084
2091
  <div class="my-8">
2085
- <h2 class="text-xl font-bold text-white mb-4">Slide Options</h2>
2092
+ <h2 class="text-xl font-bold text-white mb-4">Slide options</h2>
2086
2093
  <div class="overflow-x-auto border border-white/10 rounded-lg">
2087
2094
  <table class="w-full text-left text-sm text-gray-400">
2088
2095
  <thead class="bg-white/5 text-white font-bold">
2089
- <tr>
2090
- <th class="p-3 border-b border-white/10">Property</th>
2091
- <th class="p-3 border-b border-white/10">Type</th>
2092
- <th class="p-3 border-b border-white/10">Description</th>
2093
- </tr>
2096
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
2094
2097
  </thead>
2095
2098
  <tbody class="divide-y divide-white/5">
2096
- <tr>
2097
- <td class="p-3 font-mono text-purple-400">type</td>
2098
- <td class="p-3 font-mono text-xs">"flex"</td>
2099
- <td class="p-3">Required.</td>
2100
- </tr>
2101
- <tr>
2102
- <td class="p-3 font-mono text-blue-400">direction</td>
2103
- <td class="p-3 font-mono text-xs">"horizontal" | "vertical"</td>
2104
- <td class="p-3">Main flow direction. Default: "horizontal".</td>
2105
- </tr>
2106
- <tr>
2107
- <td class="p-3 font-mono text-blue-400">gap</td>
2108
- <td class="p-3 font-mono text-xs">SpacingToken</td>
2109
- <td class="p-3">Gap between elements. Default: "none".</td>
2110
- </tr>
2111
- <tr>
2112
- <td class="p-3 font-mono text-blue-400">padding</td>
2113
- <td class="p-3 font-mono text-xs">SpacingToken</td>
2114
- <td class="p-3">Container padding. Default: "none".</td>
2115
- </tr>
2116
- <tr>
2117
- <td class="p-3 font-mono text-blue-400">halign</td>
2118
- <td class="p-3 font-mono text-xs">"left" | "center" | "right"</td>
2119
- <td class="p-3">Horizontal alignment of the flex group. Default: "left".</td>
2120
- </tr>
2121
- <tr>
2122
- <td class="p-3 font-mono text-blue-400">valign</td>
2123
- <td class="p-3 font-mono text-xs">"top" | "center" | "bottom"</td>
2124
- <td class="p-3">Vertical alignment of the flex group. Default: "top".</td>
2125
- </tr>
2126
- <tr>
2127
- <td class="p-3 font-mono text-blue-400">elements</td>
2128
- <td class="p-3 font-mono text-xs">FlexElement[]</td>
2129
- <td class="p-3">Array of flex elements in flow order. Each can have <code>size</code> (FlexSize).</td>
2130
- </tr>
2099
+ <tr><td class="p-3 font-mono text-purple-400">type</td><td class="p-3 font-mono text-xs">"flex"</td><td class="p-3">Required.</td></tr>
2100
+ <tr><td class="p-3 font-mono text-blue-400">direction</td><td class="p-3 font-mono text-xs">"horizontal" | "vertical"</td><td class="p-3">Main flow. Default: "horizontal".</td></tr>
2101
+ <tr><td class="p-3 font-mono text-blue-400">gap</td><td class="p-3 font-mono text-xs">SpacingToken</td><td class="p-3">none | xs | sm | md | lg | xl | 2xl. Default: "none".</td></tr>
2102
+ <tr><td class="p-3 font-mono text-blue-400">padding</td><td class="p-3 font-mono text-xs">SpacingToken</td><td class="p-3">Container padding. Default: "none".</td></tr>
2103
+ <tr><td class="p-3 font-mono text-blue-400">halign</td><td class="p-3 font-mono text-xs">left | center | right</td><td class="p-3">Default: "left".</td></tr>
2104
+ <tr><td class="p-3 font-mono text-blue-400">valign</td><td class="p-3 font-mono text-xs">top | center | bottom</td><td class="p-3">Default: "top".</td></tr>
2105
+ <tr><td class="p-3 font-mono text-blue-400">elements</td><td class="p-3 font-mono text-xs">FlexElement[]</td><td class="p-3">Flow order. Each: <code>type</code> + type-specific props + optional <code>size</code> (FlexSize).</td></tr>
2131
2106
  </tbody>
2132
2107
  </table>
2133
2108
  </div>
2134
2109
  </div>
2135
2110
 
2136
2111
  <div class="my-8">
2137
- <h2 class="text-xl font-bold text-white mb-4">Size Tokens</h2>
2138
- <p>Each element can have a <code>size</code> property to control how much space it occupies:
2139
- </p>
2140
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4 my-6 not-prose">
2141
- <div class="p-4 bg-white/5 rounded-lg text-center"><code>auto</code><br><span
2142
- class="text-xs text-white/40">flexible</span></div>
2143
- <div class="p-4 bg-white/5 rounded-lg text-center"><code>quarter</code><br><span
2144
- class="text-xs text-white/40">25%</span></div>
2145
- <div class="p-4 bg-white/5 rounded-lg text-center"><code>third</code><br><span
2146
- class="text-xs text-white/40">33%</span></div>
2147
- <div class="p-4 bg-white/5 rounded-lg text-center"><code>half</code><br><span
2148
- class="text-xs text-white/40">50%</span></div>
2149
- <div class="p-4 bg-white/5 rounded-lg text-center"><code>two-thirds</code><br><span
2150
- class="text-xs text-white/40">66%</span></div>
2151
- <div class="p-4 bg-white/5 rounded-lg text-center"><code>three-quarters</code><br><span
2152
- class="text-xs text-white/40">75%</span></div>
2153
- <div class="p-4 bg-white/5 rounded-lg text-center"><code>full</code><br><span
2154
- class="text-xs text-white/40">100%</span></div>
2155
- </div>
2112
+ <h2 class="text-xl font-bold text-white mb-4">FlexSize (element width)</h2>
2113
+ <p>Optional <code>size</code> on elements: <code>auto</code> (flex) | <code>quarter</code> (25%) | <code>third</code> (33%) | <code>half</code> (50%) | <code>two-thirds</code> (66%) | <code>three-quarters</code> (75%) | <code>full</code> (100%).</p>
2156
2114
  </div>
2157
2115
 
2158
2116
  <div class="my-8">
2159
- <h2 class="text-xl font-bold text-white mb-4">Element Types</h2>
2117
+ <h2 class="text-xl font-bold text-white mb-4">Element types (top-level and in content)</h2>
2160
2118
  <div class="overflow-x-auto border border-white/10 rounded-lg">
2161
2119
  <table class="w-full text-left text-sm text-gray-400">
2162
2120
  <thead class="bg-white/5 text-white font-bold">
2163
- <tr>
2164
- <th class="p-3 border-b border-white/10">Type</th>
2165
- <th class="p-3 border-b border-white/10">Properties</th>
2166
- <th class="p-3 border-b border-white/10">Description</th>
2167
- </tr>
2121
+ <tr><th class="p-3 border-b border-white/10">type</th><th class="p-3 border-b border-white/10">Properties</th><th class="p-3 border-b border-white/10">Description</th></tr>
2168
2122
  </thead>
2169
2123
  <tbody class="divide-y divide-white/5">
2170
- <tr>
2171
- <td class="p-3 font-mono text-cyan-400">content</td>
2172
- <td class="p-3 font-mono text-xs">elements, valign, halign, gap, padding
2173
- </td>
2174
- <td class="p-3">Container that groups child elements vertically.</td>
2175
- </tr>
2176
- <tr>
2177
- <td class="p-3 font-mono text-cyan-400">image</td>
2178
- <td class="p-3 font-mono text-xs">src, alt?, fill?, fit?, rounded?</td>
2179
- <td class="p-3">Visual media element.</td>
2180
- </tr>
2181
- <tr>
2182
- <td class="p-3 font-mono text-cyan-400">title</td>
2183
- <td class="p-3 font-mono text-xs">text, size?, align?</td>
2184
- <td class="p-3">Large heading (lg | xl | 2xl | 3xl).</td>
2185
- </tr>
2186
- <tr>
2187
- <td class="p-3 font-mono text-cyan-400">text</td>
2188
- <td class="p-3 font-mono text-xs">text, align?, muted?</td>
2189
- <td class="p-3">Body paragraph text.</td>
2190
- </tr>
2191
- <tr>
2192
- <td class="p-3 font-mono text-cyan-400">bullets</td>
2193
- <td class="p-3 font-mono text-xs">items: string[]</td>
2194
- <td class="p-3">Unordered bullet list.</td>
2195
- </tr>
2196
- <tr>
2197
- <td class="p-3 font-mono text-cyan-400">ordered</td>
2198
- <td class="p-3 font-mono text-xs">items: string[]</td>
2199
- <td class="p-3">Numbered list.</td>
2200
- </tr>
2201
- <tr>
2202
- <td class="p-3 font-mono text-cyan-400">button</td>
2203
- <td class="p-3 font-mono text-xs">label, action?, variant?, fullWidth?</td>
2204
- <td class="p-3">CTA button (primary | secondary | outline | ghost).</td>
2205
- </tr>
2206
- <tr>
2207
- <td class="p-3 font-mono text-cyan-400">timeline</td>
2208
- <td class="p-3 font-mono text-xs">items: TimelineItem[], compact?</td>
2209
- <td class="p-3">Embedded timeline.</td>
2210
- </tr>
2211
- <tr>
2212
- <td class="p-3 font-mono text-cyan-400">stepper</td>
2213
- <td class="p-3 font-mono text-xs">items: StepItem[], compact?</td>
2214
- <td class="p-3">Embedded step process.</td>
2215
- </tr>
2216
- <tr>
2217
- <td class="p-3 font-mono text-cyan-400">spacer</td>
2218
- <td class="p-3 font-mono text-xs">size?: SpacingToken</td>
2219
- <td class="p-3">Adds visual spacing.</td>
2220
- </tr>
2124
+ <tr><td class="p-3 font-mono text-cyan-400">content</td><td class="p-3 font-mono text-xs">elements, valign?, halign?, gap?, padding?, size?</td><td class="p-3">Groups children vertically. Children: title, text, bullets, ordered, button, timeline, stepper, spacer (no image/video/nested content).</td></tr>
2125
+ <tr><td class="p-3 font-mono text-cyan-400">image</td><td class="p-3 font-mono text-xs">src, alt?, fill?, fit?, rounded?, href?, target?, class?, size?, id?</td><td class="p-3">Media. fill: edge-to-edge. fit: cover|contain. href+target: link. Rounded: none|sm|md|lg|xl|full.</td></tr>
2126
+ <tr><td class="p-3 font-mono text-cyan-400">video</td><td class="p-3 font-mono text-xs">src, poster?, autoplay?, loop?, muted?, controls?, fill?, fit?, rounded?, class?, size?, id?</td><td class="p-3">Video element. Same fill/fit/rounded as image.</td></tr>
2127
+ <tr><td class="p-3 font-mono text-cyan-400">title</td><td class="p-3 font-mono text-xs">text, size? (lg|xl|2xl|3xl), align?, id?</td><td class="p-3">Heading. align: left|center|right. Top-level only: optional FlexSize <code>size</code>.</td></tr>
2128
+ <tr><td class="p-3 font-mono text-cyan-400">text</td><td class="p-3 font-mono text-xs">text, align?, muted?, size?, id?</td><td class="p-3">Paragraph. muted: subtle style.</td></tr>
2129
+ <tr><td class="p-3 font-mono text-cyan-400">bullets</td><td class="p-3 font-mono text-xs">items: string[], size?, id?</td><td class="p-3">Unordered list.</td></tr>
2130
+ <tr><td class="p-3 font-mono text-cyan-400">ordered</td><td class="p-3 font-mono text-xs">items: string[], size?, id?</td><td class="p-3">Numbered list.</td></tr>
2131
+ <tr><td class="p-3 font-mono text-cyan-400">button</td><td class="p-3 font-mono text-xs">label, action?, actionType?, href?, gotoSlide?, target?, variant?, fullWidth?, size?, id?</td><td class="p-3">actionType: event|url|slide|download. url: href+target. slide: gotoSlide. variant: primary|secondary|outline|ghost.</td></tr>
2132
+ <tr><td class="p-3 font-mono text-cyan-400">timeline</td><td class="p-3 font-mono text-xs">items: TimelineItem[], compact?, size?, id?</td><td class="p-3">Embedded timeline. compact: tighter layout.</td></tr>
2133
+ <tr><td class="p-3 font-mono text-cyan-400">stepper</td><td class="p-3 font-mono text-xs">items: StepItem[], compact?, size?, id?</td><td class="p-3">Embedded steps.</td></tr>
2134
+ <tr><td class="p-3 font-mono text-cyan-400">spacer</td><td class="p-3 font-mono text-xs">size?: SpacingToken, id?</td><td class="p-3">Vertical gap. size: none|xs|sm|md|lg|xl|2xl. Default: md.</td></tr>
2221
2135
  </tbody>
2222
2136
  </table>
2223
2137
  </div>
2138
+ <p class="text-white/50 text-sm mt-2">SpacingToken: <code>none | xs | sm | md | lg | xl | 2xl</code>. Element ids: <code>s{N}-elements-{i}</code>, <code>s{N}-elements-{i}-elements-{j}</code> for content children.</p>
2224
2139
  </div>
2225
2140
 
2226
2141
  <div class="my-8">
2227
- <h2 class="text-xl font-bold text-white mb-4">Content Container</h2>
2228
- <p>Use <code>content</code> to group related elements with alignment control:</p>
2229
- <div class="overflow-x-auto border border-white/10 rounded-lg mt-6">
2230
- <table class="w-full text-left text-sm text-gray-400">
2231
- <thead class="bg-white/5 text-white font-bold">
2232
- <tr>
2233
- <th class="p-3 border-b border-white/10">Property</th>
2234
- <th class="p-3 border-b border-white/10">Values</th>
2235
- <th class="p-3 border-b border-white/10">Default</th>
2236
- </tr>
2237
- </thead>
2238
- <tbody class="divide-y divide-white/5">
2239
- <tr>
2240
- <td class="p-3 font-mono text-blue-400">valign</td>
2241
- <td class="p-3 font-mono text-xs">top | center | bottom</td>
2242
- <td class="p-3">center</td>
2243
- </tr>
2244
- <tr>
2245
- <td class="p-3 font-mono text-blue-400">halign</td>
2246
- <td class="p-3 font-mono text-xs">left | center | right</td>
2247
- <td class="p-3">left</td>
2248
- </tr>
2249
- <tr>
2250
- <td class="p-3 font-mono text-blue-400">gap</td>
2251
- <td class="p-3 font-mono text-xs">none | xs | sm | md | lg | xl | 2xl</td>
2252
- <td class="p-3">md</td>
2253
- </tr>
2254
- <tr>
2255
- <td class="p-3 font-mono text-blue-400">padding</td>
2256
- <td class="p-3 font-mono text-xs">none | xs | sm | md | lg | xl | 2xl</td>
2257
- <td class="p-3">lg</td>
2258
- </tr>
2259
- </tbody>
2260
- </table>
2261
- </div>
2142
+ <h2 class="text-xl font-bold text-white mb-4">Content container (valign, halign, gap, padding)</h2>
2143
+ <p>Defaults: valign <code>center</code>, halign <code>left</code>, gap <code>md</code>, padding <code>lg</code>.</p>
2262
2144
  </div>
2263
2145
 
2264
2146
  <div class="my-8">
@@ -2270,8 +2152,7 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
2270
2152
  <!-- REF: CHART -->
2271
2153
  <div v-else-if="activeSection === 'ref-chart'">
2272
2154
  <h1>Chart Slide</h1>
2273
- <p class="lead">Visualize data extracted from CSV/Excel files. Perfect for LLM-generated reports
2274
- and dashboards.</p>
2155
+ <p class="lead">Data visualization with Chart.js. Types: <code>bar</code>, <code>line</code>, <code>pie</code>, <code>doughnut</code>. Requires <code>chart.js</code> as an optional peer. SlideBase applies.</p>
2275
2156
 
2276
2157
  <div class="my-8">
2277
2158
  <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
@@ -2493,31 +2374,10 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
2493
2374
  "data": {
2494
2375
  "labels": ["Q1", "Q2", "Q3", "Q4"],
2495
2376
  "datasets": [
2496
- {
2497
- "label": "2023",
2498
- "values": [100, 120, 140, 160],
2499
- "color": "#6b7280"
2500
- },
2501
- {
2502
- "label": "2024",
2503
- "values": [120, 150, 180, 220],
2504
- "color": "c:p"
2505
- }
2377
+ { "label": "2023", "values": [100, 120, 140, 160], "color": "#6b7280" },
2378
+ { "label": "2024", "values": [120, 150, 180, 220], "color": "c:p" }
2506
2379
  ]
2507
- },
2508
- video: `{
2509
- "type": "statement",
2510
- "sizing": "container",
2511
- "meta": { "orbColor": "#ec4899" },
2512
- "background": {
2513
- "type": "video",
2514
- "src": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
2515
- "opacity": 0.4
2516
- },
2517
- "tag": "Cinematic",
2518
- "title": "Video Backgrounds",
2519
- "subtitle": "Immersive support."
2520
- }`
2380
+ }
2521
2381
  }' />
2522
2382
  </div>
2523
2383
 
@@ -2584,7 +2444,7 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
2584
2444
  <!-- REF: VIDEO -->
2585
2445
  <div v-else-if="activeSection === 'ref-video'">
2586
2446
  <h1>Video Slide</h1>
2587
- <p class="lead">Full-screen video player with optional title overlay (shown on hover).</p>
2447
+ <p class="lead">Full-screen video. <code>video</code> (VideoProperties) is required. Optional <code>title</code> overlay at bottom-left (on hover). SlideBase applies.</p>
2588
2448
 
2589
2449
  <div class="my-8">
2590
2450
  <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
@@ -2653,8 +2513,7 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
2653
2513
  <!-- REF: CUSTOM HTML -->
2654
2514
  <div v-else-if="activeSection === 'ref-custom'">
2655
2515
  <h1>Custom HTML Slide</h1>
2656
- <p class="lead">Full control with raw HTML content. Inject any HTML structure with custom
2657
- styling.</p>
2516
+ <p class="lead">Raw <code>html</code> and optional <code>css</code>. For iframes, D3, or brand-specific layouts. SlideBase applies. Sanitized: <code>&lt;script&gt;</code> and <code>on*</code> handlers removed.</p>
2658
2517
 
2659
2518
  <div class="my-8">
2660
2519
  <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
@@ -2731,99 +2590,109 @@ engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
2731
2590
  <!-- REF: DIAGRAM -->
2732
2591
  <div v-else-if="activeSection === 'ref-diagram'">
2733
2592
  <h1>Diagram Slide</h1>
2734
- <p class="lead">Interactive node-based diagram using Vue Flow. Supports nodes, edges, and (in Studio) drag-and-drop and inline editing.</p>
2593
+ <p class="lead">Node-based diagram (Vue Flow). <code>nodes</code> and <code>edges</code> required. In Studio: drag-and-drop, connect, resize. SlideBase applies.</p>
2735
2594
 
2736
2595
  <div class="my-8">
2737
2596
  <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
2738
2597
  <div class="overflow-x-auto border border-white/10 rounded-lg">
2739
2598
  <table class="w-full text-left text-sm text-gray-400">
2740
2599
  <thead class="bg-white/5 text-white font-bold">
2741
- <tr>
2742
- <th class="p-3 border-b border-white/10">Property</th>
2743
- <th class="p-3 border-b border-white/10">Type</th>
2744
- <th class="p-3 border-b border-white/10">Description</th>
2745
- </tr>
2600
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
2746
2601
  </thead>
2747
2602
  <tbody class="divide-y divide-white/5">
2748
- <tr>
2749
- <td class="p-3 font-mono text-purple-400">type</td>
2750
- <td class="p-3 font-mono text-xs">"diagram"</td>
2751
- <td class="p-3">Required.</td>
2752
- </tr>
2753
- <tr>
2754
- <td class="p-3 font-mono text-blue-400">nodes</td>
2755
- <td class="p-3 font-mono text-xs">object[]</td>
2756
- <td class="p-3">Vue Flow nodes: <code>id</code>, <code>type</code> (default/input), <code>position</code> <code>{x,y}</code>, <code>label</code>, <code>data</code> (e.g. shape, style).</td>
2757
- </tr>
2758
- <tr>
2759
- <td class="p-3 font-mono text-blue-400">edges</td>
2760
- <td class="p-3 font-mono text-xs">object[]</td>
2761
- <td class="p-3">Vue Flow edges: <code>id</code>, <code>source</code>, <code>target</code>, <code>sourceHandle</code>, <code>targetHandle</code> (optional).</td>
2762
- </tr>
2763
- <tr>
2764
- <td class="p-3 font-mono text-blue-400">config</td>
2765
- <td class="p-3 font-mono text-xs">object?</td>
2766
- <td class="p-3"><code>fitView</code> and other Vue Flow options.</td>
2767
- </tr>
2603
+ <tr><td class="p-3 font-mono text-purple-400">type</td><td class="p-3 font-mono text-xs">"diagram"</td><td class="p-3">Required.</td></tr>
2604
+ <tr><td class="p-3 font-mono text-blue-400">title</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Optional header.</td></tr>
2605
+ <tr><td class="p-3 font-mono text-blue-400">nodes</td><td class="p-3 font-mono text-xs">object[]</td><td class="p-3">Vue Flow: <code>id</code>, <code>type</code> (default|input|...), <code>position: { x, y }</code>, <code>label</code>, <code>data?</code> (shape, style).</td></tr>
2606
+ <tr><td class="p-3 font-mono text-blue-400">edges</td><td class="p-3 font-mono text-xs">object[]</td><td class="p-3">Vue Flow: <code>id</code>, <code>source</code>, <code>target</code>, <code>sourceHandle?</code>, <code>targetHandle?</code>.</td></tr>
2607
+ <tr><td class="p-3 font-mono text-blue-400">config</td><td class="p-3 font-mono text-xs">object?</td><td class="p-3"><code>fitView?: boolean</code> and other Vue Flow options.</td></tr>
2768
2608
  </tbody>
2769
2609
  </table>
2770
2610
  </div>
2611
+ <p class="text-white/50 text-sm mt-2">Element control: <code>s{N}-nodes-{i}</code>, <code>s{N}-edges-{i}</code>. Studio: palette, drag, connect, resize.</p>
2771
2612
  </div>
2772
- <p class="text-white/60 text-sm">Element control: <code>s{N}-nodes-{i}</code>, <code>s{N}-edges-{i}</code>. With <code>studio: true</code>, diagrams are editable (add nodes via palette, drag, connect, resize).</p>
2773
2613
  </div>
2774
2614
 
2775
2615
  <!-- REF: FREE -->
2776
2616
  <div v-else-if="activeSection === 'ref-free'">
2777
2617
  <h1>Free / Composition Slide</h1>
2778
- <p class="lead">Absolutely positioned elements (text, image, box) for Remotion-style storytelling. Use <code>timelineTracks</code> to animate <code>x</code>, <code>y</code> (as translate), <code>opacity</code>, etc.</p>
2618
+ <p class="lead">Absolutely positioned elements for Remotion-style storytelling. Three types: <code>text</code>, <code>image</code>, <code>box</code>. Position and animation are driven by <code>slide.timelineTracks</code> (x, y as translate). SlideBase applies.</p>
2779
2619
 
2780
2620
  <div class="my-8">
2781
- <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
2621
+ <h2 class="text-xl font-bold text-white mb-4">Slide configuration</h2>
2782
2622
  <div class="overflow-x-auto border border-white/10 rounded-lg">
2783
2623
  <table class="w-full text-left text-sm text-gray-400">
2784
2624
  <thead class="bg-white/5 text-white font-bold">
2785
- <tr>
2786
- <th class="p-3 border-b border-white/10">Property</th>
2787
- <th class="p-3 border-b border-white/10">Type</th>
2788
- <th class="p-3 border-b border-white/10">Description</th>
2789
- </tr>
2625
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
2790
2626
  </thead>
2791
2627
  <tbody class="divide-y divide-white/5">
2792
- <tr>
2793
- <td class="p-3 font-mono text-purple-400">type</td>
2794
- <td class="p-3 font-mono text-xs">"free"</td>
2795
- <td class="p-3">Required.</td>
2796
- </tr>
2797
- <tr>
2798
- <td class="p-3 font-mono text-blue-400">elements</td>
2799
- <td class="p-3 font-mono text-xs">FreeElement[]</td>
2800
- <td class="p-3">Each: <code>type</code> (<code>"text"</code>|<code>"image"</code>|<code>"box"</code>), <code>text?</code>, <code>src?</code>, <code>width?</code>, <code>height?</code>, <code>fontSize?</code>, <code>color?</code>, <code>fontWeight?</code>, <code>backgroundColor?</code> (box), <code>id?</code>.</td>
2801
- </tr>
2628
+ <tr><td class="p-3 font-mono text-purple-400">type</td><td class="p-3 font-mono text-xs">"free"</td><td class="p-3">Required.</td></tr>
2629
+ <tr><td class="p-3 font-mono text-blue-400">elements</td><td class="p-3 font-mono text-xs">FreeElement[]</td><td class="p-3">Array of text, image, or box. See FreeElement below.</td></tr>
2802
2630
  </tbody>
2803
2631
  </table>
2804
2632
  </div>
2633
+
2634
+ <h3 class="text-lg font-bold text-white mt-8 mb-4">FreeElement (each item)</h3>
2635
+ <div class="overflow-x-auto border border-white/10 rounded-lg">
2636
+ <table class="w-full text-left text-sm text-gray-400">
2637
+ <thead class="bg-white/5 text-white font-bold">
2638
+ <tr><th class="p-3 border-b border-white/10">Property</th><th class="p-3 border-b border-white/10">Type</th><th class="p-3 border-b border-white/10">Description</th></tr>
2639
+ </thead>
2640
+ <tbody class="divide-y divide-white/5">
2641
+ <tr><td class="p-3 font-mono text-purple-400">type</td><td class="p-3 font-mono text-xs">"text" | "image" | "box"</td><td class="p-3">Required. <code>text</code>: string content. <code>image</code>: use <code>src</code>. <code>box</code>: colored block, use <code>backgroundColor</code>.</td></tr>
2642
+ <tr><td class="p-3 font-mono text-blue-400">text</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">For <code>type: "text"</code>. Rendered as block.</td></tr>
2643
+ <tr><td class="p-3 font-mono text-blue-400">src</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">For <code>type: "image"</code>. Image URL.</td></tr>
2644
+ <tr><td class="p-3 font-mono text-blue-400">width</td><td class="p-3 font-mono text-xs">number | string?</td><td class="p-3">CSS width. Number → px. String: e.g. <code>"50%"</code>, <code>"10rem"</code>.</td></tr>
2645
+ <tr><td class="p-3 font-mono text-blue-400">height</td><td class="p-3 font-mono text-xs">number | string?</td><td class="p-3">CSS height. Same as width.</td></tr>
2646
+ <tr><td class="p-3 font-mono text-blue-400">fontSize</td><td class="p-3 font-mono text-xs">number | string?</td><td class="p-3">For text. Number → px.</td></tr>
2647
+ <tr><td class="p-3 font-mono text-blue-400">color</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Text color. CSS value.</td></tr>
2648
+ <tr><td class="p-3 font-mono text-blue-400">fontWeight</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">e.g. <code>"bold"</code>, <code>"600"</code>.</td></tr>
2649
+ <tr><td class="p-3 font-mono text-blue-400">backgroundColor</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">For <code>type: "box"</code>. CSS color.</td></tr>
2650
+ <tr><td class="p-3 font-mono text-blue-400">id</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Override for <code>timelineTracks</code> and <code>engine.element(id)</code>. Default: <code>s{N}-elements-{i}</code>.</td></tr>
2651
+ </tbody>
2652
+ </table>
2653
+ </div>
2654
+
2655
+ <h3 class="text-lg font-bold text-white mt-8 mb-4">Positioning and animation (timelineTracks)</h3>
2656
+ <p>Elements are placed at <code>left: 0; top: 0</code> by default. To move or animate them, set <code>slide.timelineTracks</code> on the slide (SlideBase). Keys are element ids: <code>s{N}-elements-0</code>, <code>s{N}-elements-1</code>, or the element’s <code>id</code>. Value: keyframes from progress string to state:</p>
2657
+ <ul class="list-disc list-inside text-white/70 my-4 space-y-1">
2658
+ <li><code>opacity</code> (0–1)</li>
2659
+ <li><code>x</code>, <code>y</code> (number, px) → applied as <code>translate(x, y)</code></li>
2660
+ <li><code>scale</code>, <code>rotate</code></li>
2661
+ <li><code>visible</code> (boolean)</li>
2662
+ </ul>
2663
+ <p class="text-white/60 text-sm">Keyframe keys: <code>"0"</code>, <code>"0.25"</code>, <code>"0.5"</code>, <code>"1"</code>, etc. Linear interpolation. Use <code>engine.seekTo(progress)</code> or <code>engine.playTimeline(duration)</code>.</p>
2664
+
2665
+ <h3 class="text-lg font-bold text-white mt-8 mb-4">Example</h3>
2666
+ <pre class="bg-[#0A0A0A] border border-white/10 rounded-xl p-5 overflow-x-auto mb-6 text-sm"><code>{
2667
+ <span class="text-blue-400">"type"</span>: <span class="text-green-400">"free"</span>,
2668
+ <span class="text-blue-400">"elements"</span>: [
2669
+ { <span class="text-blue-400">"type"</span>: <span class="text-green-400">"text"</span>, <span class="text-blue-400">"text"</span>: <span class="text-green-400">"Hello"</span>, <span class="text-blue-400">"fontSize"</span>: <span class="text-cyan-400">48</span> },
2670
+ { <span class="text-blue-400">"type"</span>: <span class="text-green-400">"box"</span>, <span class="text-blue-400">"width"</span>: <span class="text-cyan-400">200</span>, <span class="text-blue-400">"height"</span>: <span class="text-cyan-400">100</span>, <span class="text-blue-400">"backgroundColor"</span>: <span class="text-green-400">"#3b82f6"</span>, <span class="text-blue-400">"id"</span>: <span class="text-green-400">"myBox"</span> }
2671
+ ],
2672
+ <span class="text-blue-400">"timelineTracks"</span>: {
2673
+ <span class="text-green-400">"s0-elements-0"</span>: { <span class="text-green-400">"0"</span>: { <span class="text-blue-400">opacity</span>: <span class="text-cyan-400">0</span>, <span class="text-blue-400">y</span>: <span class="text-cyan-400">20</span> }, <span class="text-green-400">"0.5"</span>: { <span class="text-blue-400">opacity</span>: <span class="text-cyan-400">1</span>, <span class="text-blue-400">y</span>: <span class="text-cyan-400">0</span> } },
2674
+ <span class="text-green-400">"myBox"</span>: { <span class="text-green-400">"0"</span>: { <span class="text-blue-400">x</span>: <span class="text-cyan-400">-50</span>, <span class="text-blue-400">visible</span>: <span class="text-yellow-400">false</span> }, <span class="text-green-400">"0.5"</span>: { <span class="text-blue-400">x</span>: <span class="text-cyan-400">100</span>, <span class="text-blue-400">visible</span>: <span class="text-yellow-400">true</span> } }
2675
+ }
2676
+ }</code></pre>
2805
2677
  </div>
2806
- <p class="text-white/60 text-sm">Element ids: <code>s{N}-elements-0</code>, <code>s{N}-elements-1</code>, … (or custom <code>id</code> on each element). Position is driven by <code>slide.timelineTracks</code>; see <em>Timeline (keyframes)</em>.</p>
2807
2678
  </div>
2808
2679
 
2809
2680
  <!-- REF: AUTO -->
2810
2681
  <div v-else-if="activeSection === 'ref-auto'">
2811
2682
  <h1>Auto Strategy</h1>
2812
- <p class="lead">Smartly chooses the best layout based on the data structure provided. Useful for
2813
- AI agents or rapid prototyping.</p>
2683
+ <p class="lead">Picks a layout from the data shape. Use <code>type: "auto"</code>; the engine resolves to one of: Chart, Timeline, Steps, Features, Half, Statement. All SlideBase and layout-specific props are passed through to the chosen layout. Best for LLMs and rapid prototyping.</p>
2814
2684
 
2815
2685
  <div class="p-6 bg-blue-500/10 border border-blue-500/20 rounded-xl my-8">
2816
- <h3 class="text-blue-400 font-bold mb-2">How it works</h3>
2686
+ <h3 class="text-blue-400 font-bold mb-2">Resolution order (first match wins)</h3>
2817
2687
  <ul class="list-disc list-inside text-sm text-blue-200/80 space-y-1">
2818
- <li>If <code>chartType</code> + <code>data.datasets</code> exist ->
2819
- <strong>Chart</strong>
2820
- </li>
2821
- <li>If <code>timeline</code> array exists -> <strong>Timeline</strong></li>
2822
- <li>If <code>steps</code> array exists -> <strong>Steps</strong></li>
2823
- <li>If <code>features</code> array exists -> <strong>Features</strong></li>
2824
- <li>If <code>image</code> exists -> <strong>Half</strong></li>
2825
- <li>Otherwise -> <strong>Statement</strong></li>
2688
+ <li><code>chartType</code> and <code>data.datasets</code> → <strong>Chart</strong></li>
2689
+ <li><code>timeline</code> (array) → <strong>Timeline</strong></li>
2690
+ <li><code>steps</code> (array) → <strong>Steps</strong></li>
2691
+ <li><code>features</code> (array) → <strong>Features</strong></li>
2692
+ <li><code>image</code> or <code>video</code> → <strong>Half</strong></li>
2693
+ <li>else → <strong>Statement</strong> (<code>title</code>, <code>subtitle</code>)</li>
2826
2694
  </ul>
2695
+ <p class="text-blue-200/70 text-sm mt-3">Provide the fields required by the target layout (e.g. <code>features</code> must be FeatureItem[] if resolved to Features).</p>
2827
2696
  </div>
2828
2697
 
2829
2698
  <div class="my-8">
@@ -3200,6 +3069,7 @@ const navigation = [
3200
3069
  { id: 'element-control', label: 'Element Control' },
3201
3070
  { id: 'animations', label: 'Animations (reveal, presets, stagger)' },
3202
3071
  { id: 'timeline-keyframes', label: 'Timeline (keyframes)' },
3072
+ { id: 'template-tags', label: 'Template Tags & engine.data' },
3203
3073
  { id: 'sizing', label: 'Embedding' },
3204
3074
  { id: 'speaker-notes', label: 'Speaker Notes' }
3205
3075
  ]