Rename dark-interactive-nav.js → slides-runtime.js

bluedusk · claude · bluedusk · commit 6f1058f3dc18 · 2026-03-26T13:43:57.000+11:00
It handles much more than navigation — particles, charts, speaker notes.
Updated all references across docs and preview.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -14,6 +14,6 @@ See [RELEASE.md](RELEASE.md) for the release process. Version must be updated in
 - `SKILL.md` — Main skill entry point (Pro + Vibe modes)
 - `assets/components.css` — Shared component CSS for all Pro themes
 - `assets/themes/` — Theme CSS files (one per Pro theme)
-- `assets/dark-interactive-nav.js` — Shared navigation JS for all Pro themes
+- `assets/slides-runtime.js` — Shared runtime JS for all Pro themes (nav, charts, particles, speaker notes)
 - `references/` — Supporting docs loaded on-demand by the skill
 - `.claude-plugin/` — Plugin manifest and marketplace config
diff --git a/README.md b/README.md
@@ -238,7 +238,7 @@ This skill uses **progressive disclosure** — the main `SKILL.md` is a concise
 | `assets/viewport-base.css` | Mandatory responsive CSS | Phase 3 (Vibe) |
 | `assets/components.css` | Shared component CSS for all Pro themes | Phase 3 (Pro) |
 | `assets/themes/*.css` | Theme CSS files (colors, fonts) | Phase 3 (Pro) |
-| `assets/dark-interactive-nav.js` | Navigation JS + Chart.js integration | Phase 3 (Pro) |
+| `assets/slides-runtime.js` | Navigation JS + Chart.js integration | Phase 3 (Pro) |
 | `scripts/extract-pptx.py` | PPT content extraction | Phase 4 (PPT conversion) |
 | `references/conversion-patterns.md` | Framework detection patterns | Phase 5 (HTML conversion) |
 | `scripts/deploy.sh` | Deploy to Vercel | Phase 7 (sharing) |
diff --git a/SKILL.md b/SKILL.md
@@ -267,7 +267,7 @@ If images were provided, the slide outline already incorporates them from Step 1
 - [component-templates.md](references/component-templates.md) — HTML component templates with decision table
 - [components.css](assets/components.css) — Shared component CSS (copy verbatim into `<style>`)
 - Theme CSS from `assets/themes/` — copy verbatim into `<style>`, BEFORE components.css
-- [dark-interactive-nav.js](assets/dark-interactive-nav.js) — Navigation JS (copy verbatim into `<script>`)
+- [slides-runtime.js](assets/slides-runtime.js) — Navigation JS (copy verbatim into `<script>`)
 - If any slides use **Chart** components, add Chart.js CDN in `<head>` before `<style>`: `<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>`
 
 **Available Pro themes** (user specifies in prompt, default: Obsidian):
@@ -283,7 +283,7 @@ If images were provided, the slide outline already incorporates them from Step 1
 **Key requirements:**
 - Single self-contained HTML file, all CSS/JS inline
 - For Vibe mode: include the FULL contents of viewport-base.css in the `<style>` block
-- For Pro mode: include the chosen theme CSS + components.css in the `<style>` block, and dark-interactive-nav.js in the `<script>` block
+- For Pro mode: include the chosen theme CSS + components.css in the `<style>` block, and slides-runtime.js in the `<script>` block
 - Use fonts from Fontshare or Google Fonts — never system fonts
 - Add detailed comments explaining each section
 - Every section needs a clear `/* === SECTION NAME === */` comment block
@@ -497,7 +497,7 @@ Captures each slide as a screenshot and combines into a single PDF. Animations a
 | [component-templates.md](references/component-templates.md) | Structured HTML component templates with decision table | Phase 3 (Pro) |
 | [components.css](assets/components.css) | Shared component CSS for all Pro themes — copy verbatim | Phase 3 (Pro) |
 | [themes/](assets/themes/) | Theme CSS files (dark-interactive, excalidraw, excalidraw-dark, editorial-light, binary-architect) — pick one | Phase 3 (Pro) |
-| [dark-interactive-nav.js](assets/dark-interactive-nav.js) | Navigation JS — copy verbatim | Phase 3 (Pro) |
+| [slides-runtime.js](assets/slides-runtime.js) | Navigation JS — copy verbatim | Phase 3 (Pro) |
 | [scripts/extract-pptx.py](scripts/extract-pptx.py) | Python script for PPT content extraction | Phase 4 (PPT conversion) |
 | [conversion-patterns.md](references/conversion-patterns.md) | Framework detection patterns and extraction rules | Phase 5 (HTML conversion) |
 | [scripts/deploy.sh](scripts/deploy.sh) | Deploy slides to Vercel for instant sharing | Phase 7 (sharing) |
diff --git a/assets/slides-runtime.js b/assets/slides-runtime.js
@@ -1,7 +1,9 @@
 /* ===========================================
-   DARK INTERACTIVE NAVIGATION
-   Copy this script into the <script> tag at the
-   end of <body> when using the Dark Interactive preset.
+   SLIDES RUNTIME
+   Shared by all Pro themes. Copy verbatim into
+   the <script> tag at the end of <body>.
+   Handles: particles, navigation, charts,
+   speaker notes console logging.
    =========================================== */
 
 // Particles
diff --git a/preview.html b/preview.html
@@ -448,7 +448,7 @@ <h2 class="anim-1" style="font-size:clamp(28px,3.5vw,44px);">Get Started with <s
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/roughjs@4.6.6/bundled/rough.js"></script>
-<script src="assets/dark-interactive-nav.js"></script>
+<script src="assets/slides-runtime.js"></script>
 <script>
   // Theme switcher
   var themePicker = document.getElementById('themePicker');
diff --git a/references/STYLE_PRESETS.md b/references/STYLE_PRESETS.md
@@ -353,7 +353,7 @@ Curated visual styles for Frontend Slides. Each preset is inspired by real desig
 - Rainbow gradient text for hero titles
 - Glow blob ambient lighting
 
-**Special:** This preset uses a **structured component system** instead of creative interpretation. Read [component-templates.md](component-templates.md) for the 13 HTML templates, [dark-interactive.css](../assets/dark-interactive.css) for the complete CSS, and [dark-interactive-nav.js](../assets/dark-interactive-nav.js) for the navigation JS. Copy CSS and JS verbatim, use HTML templates as building blocks.
+**Special:** This preset uses a **structured component system** instead of creative interpretation. Read [component-templates.md](component-templates.md) for the 13 HTML templates, [dark-interactive.css](../assets/dark-interactive.css) for the complete CSS, and [slides-runtime.js](../assets/slides-runtime.js) for the navigation JS. Copy CSS and JS verbatim, use HTML templates as building blocks.
 
 **Best for:** Technical presentations, developer talks, API/architecture overviews, and cases where deterministic output across different AI agents is more important than visual variety.
 
diff --git a/references/conversion-patterns.md b/references/conversion-patterns.md
@@ -207,7 +207,7 @@ Framework navigation JS is **completely replaced**, not merged:
 
 3. **Replace with:**
    - Standard HTMLSlides navigation from [html-template.md](html-template.md) (for Vibe presets)
-   - Or [dark-interactive-nav.js](../assets/dark-interactive-nav.js) verbatim (for Pro mode)
+   - Or [slides-runtime.js](../assets/slides-runtime.js) verbatim (for Pro mode)
 
 ## Image Handling
 
