bluedither 1.0.13 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bluedither",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "A bold, dithered-shader hero theme for Claude Code — skill + fine-tuner",
   "type": "module",
   "bin": {

package/skill.md

@@ -89,13 +89,7 @@ Follow the generator's patterns for component structure, file naming, shader ini
 ## Step 6 — Inform About Fine-Tuner
 
 Tell the user:
-> Your BlueDither theme has been generated. To customize colors, fonts, spacing, and shader parameters visually, run:
->
-> ```
-> npm run tune
-> ```
->
-> Open http://localhost:3333 to see your theme with a floating customization panel.
+> Your BlueDither theme has been generated with the tuner panel built in. Adjust colors, fonts, spacing, and shader parameters live, then click "Commit Changes" to save.
 
 ## CSS Custom Property Computation
 
@@ -115,7 +109,7 @@ Border radius converts directly: `px / 16` rem (no clamp).
 2. **Only content slots are editable** — never change colors, typography, spacing, shader, or opacity tokens during generation.
 3. **Two sections only** — navbar + hero. No footers, sidebars, additional sections, icons, or images.
 4. **Framework-native output** — use the framework's idioms (JSX for React, SFCs for Vue, etc.), never output raw HTML for a framework project.
-5. **Shader is required** — the WebGL dithering shader must be initialized in every greenfield and hero-partial output.
+5. **Shader is required** — the WebGL dithering shader must be initialized in every greenfield and hero-partial output. **Always assign the mount to `window.__BD_SHADER__`** so the tuner can update shader params live.
 6. **CSS namespace** — all custom properties use `--bd-*` prefix. All classes use `bd-*` prefix.
 7. **Headline is 2 lines max**, ALL CAPS, 4-6 words.
 8. **Exactly 4 nav items.**

package/theme/generators/react.md

@@ -41,7 +41,7 @@ Navbar component with logo, nav items, and CTA.
 ### `BlueDitherHero.jsx`
 Hero section with shader and text content.
 
-- **Shader initialization**: Use `useEffect` + `useRef` for the shader parent div:
+- **Shader initialization**: Use `useEffect` + `useRef` for the shader parent div. **CRITICAL**: Assign the mount to `window.__BD_SHADER__` so the tuner can update shader params live:
 ```jsx
 import { useEffect, useRef } from 'react';
 
@@ -51,7 +51,8 @@ useEffect(() => {
   // Dynamic import to avoid SSR issues
   import('./paper-shaders-bundle.js').then(({ ShaderMount, ditheringFragmentShader, getShaderColorFromString }) => {
     const mount = new ShaderMount(shaderRef.current, ditheringFragmentShader, uniforms, opts, speed, 0, 2);
-    return () => mount.dispose();
+    window.__BD_SHADER__ = mount;
+    return () => { mount.dispose(); window.__BD_SHADER__ = null; };
   });
 }, []);
 ```

package/theme/generators/svelte.md

@@ -62,10 +62,12 @@ Hero section with shader initialization using `onMount`:
   onMount(async () => {
     const { ShaderMount, ditheringFragmentShader, getShaderColorFromString } = await import('./paper-shaders-bundle.js');
     shaderMount = new ShaderMount(shaderParent, ditheringFragmentShader, uniforms, opts, speed, 0, 2);
+    window.__BD_SHADER__ = shaderMount;
   });
 
   onDestroy(() => {
     shaderMount?.dispose();
+    window.__BD_SHADER__ = null;
   });
 </script>
 

package/theme/generators/vanilla.md

@@ -32,9 +32,13 @@ URL-encode the font family name.
 
 Copy `theme/shaders/bluedither-shader.js` and `theme/shaders/paper-shaders-bundle.js` to the target project.
 
-Import and initialize inline:
+Import and initialize inline. **CRITICAL**: Assign to `window.__BD_SHADER__` so the tuner can update shader params live:
 ```js
 import { ShaderMount, ditheringFragmentShader, getShaderColorFromString } from './paper-shaders-bundle.js';
+
+// After creating the mount:
+const mount = new ShaderMount(parent, ditheringFragmentShader, uniforms, opts, speed, 0, 2);
+window.__BD_SHADER__ = mount;
 ```
 
 Map shader tokens to uniforms as shown in `template/index.html`'s existing `<script type="module">` block.

package/theme/generators/vue.md

@@ -66,10 +66,12 @@ let shaderMount = null;
 onMounted(async () => {
   const { ShaderMount, ditheringFragmentShader, getShaderColorFromString } = await import('./paper-shaders-bundle.js');
   shaderMount = new ShaderMount(shaderParent.value, ditheringFragmentShader, uniforms, opts, speed, 0, 2);
+  window.__BD_SHADER__ = shaderMount;
 });
 
 onUnmounted(() => {
   shaderMount?.dispose();
+  window.__BD_SHADER__ = null;
 });
 </script>