bluedither 1.0.17 → 1.0.19

package/fine-tuner/dev-middleware.js

@@ -18,17 +18,20 @@ import { resolve, dirname } from 'path';
 const ENDPOINT = '/__bluedither/commit';
 
 function findTokensPath() {
-  // Search from cwd for bluedither/tokens.json
+  // Search from cwd — prioritize public/ (Vite serves static from there)
   const cwd = process.cwd();
   const paths = [
-    resolve(cwd, 'bluedither', 'tokens.json'),
     resolve(cwd, 'public', 'bluedither', 'tokens.json'),
+    resolve(cwd, 'bluedither', 'tokens.json'),
     resolve(cwd, 'theme', 'tokens.json'),
   ];
   for (const p of paths) {
     if (existsSync(p)) return p;
   }
-  // Default to bluedither/tokens.json even if it doesn't exist yet
+  // Default to public/bluedither if public/ dir exists (Vite project), else bluedither/
+  if (existsSync(resolve(cwd, 'public'))) {
+    return resolve(cwd, 'public', 'bluedither', 'tokens.json');
+  }
   return resolve(cwd, 'bluedither', 'tokens.json');
 }
 

package/fine-tuner/inject.js

@@ -111,7 +111,9 @@
       if (t.shader?.scale != null) params.scale = t.shader.scale;
       if (t.shader?.size != null) params.size = t.shader.size;
       if (t.shader?.rotation != null) params.rotation = t.shader.rotation;
-      shader.updateParams(params);
+      if (typeof shader.updateParams === 'function') {
+        shader.updateParams(params);
+      }
       return true;
     };
 

package/package.json

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

package/theme/generators/react.md

@@ -2,6 +2,40 @@
 
 When the target project uses **React** (detected via `react` in package.json dependencies), follow these patterns.
 
+## CRITICAL: File Placement Rules
+
+**In `src/` (importable source files):**
+- All `.jsx`/`.tsx` component files
+- `bluedither.css` — CSS custom properties + rules
+- `paper-shaders-bundle.js` — copied from `bluedither/shaders/`
+- Any other JS modules that are `import`-ed
+
+**In `public/bluedither/` (static assets loaded at runtime):**
+- `bluedither-tuner.js` — tuner panel
+- `bluedither-tuner.css` — tuner styles
+- `bluedither-tuner-inject.js` — tuner loader
+- `tokens.json` — design tokens (read at runtime by tuner)
+- `tokens.defaults.json` — default tokens
+- `dev-middleware.js` — Vite commit endpoint
+
+**NEVER import JS files from `public/` — Vite will error.** Shader files MUST be in `src/`.
+
+Copy shader files during generation:
+```bash
+cp bluedither/shaders/paper-shaders-bundle.js src/paper-shaders-bundle.js
+```
+
+Copy tuner assets to public:
+```bash
+mkdir -p public/bluedither
+cp bluedither/bluedither-tuner.js public/bluedither/
+cp bluedither/bluedither-tuner.css public/bluedither/
+cp bluedither/bluedither-tuner-inject.js public/bluedither/
+cp bluedither/tokens.json public/bluedither/
+cp bluedither/tokens.defaults.json public/bluedither/
+cp bluedither/dev-middleware.js public/bluedither/
+```
+
 ## Detection
 
 React is detected when `package.json` contains `react` in `dependencies` or `devDependencies`. Also check for:
@@ -11,76 +45,110 @@ React is detected when `package.json` contains `react` in `dependencies` or `dev
 
 ## Component Structure
 
-Generate separate component files matching `structure.json` nodes:
+Generate all component files in `src/`:
 
-### `BlueDitherTheme.jsx` (or `.tsx`)
-Root component wrapping the full layout. Imports and composes child components.
+### `src/App.jsx` (or modify existing)
+Root component wrapping the full layout. Imports shader, CSS, and loads tuner in dev mode.
 
 ```jsx
-import { BlueDitherHeader } from './BlueDitherHeader';
-import { BlueDitherHero } from './BlueDitherHero';
+import { useEffect, useRef } from 'react';
+import { ShaderMount, ditheringFragmentShader, DitheringShapes, DitheringTypes, getShaderColorFromString } from './paper-shaders-bundle.js';
 import './bluedither.css';
 
-export function BlueDitherTheme() {
+// Content from tokens.json content section
+const CONTENT = { /* ... */ };
+
+// Shader params from tokens.json shader + colors sections
+const SHADER_PARAMS = { /* ... */ };
+
+function App() {
+  const shaderRef = useRef(null);
+
+  // Initialize shader
+  useEffect(() => {
+    if (!shaderRef.current) return;
+    const mount = new ShaderMount(shaderRef.current, ditheringFragmentShader, {
+      u_colorFront: getShaderColorFromString(SHADER_PARAMS.colorFront),
+      u_colorBack: getShaderColorFromString(SHADER_PARAMS.colorBack),
+      u_shape: DitheringShapes[SHADER_PARAMS.shape] ?? DitheringShapes.warp,
+      u_type: DitheringTypes[SHADER_PARAMS.type] ?? DitheringTypes['2x2'],
+      u_pxSize: SHADER_PARAMS.size,
+      u_scale: SHADER_PARAMS.scale,
+      u_rotation: SHADER_PARAMS.rotation,
+      u_originX: 0.5, u_originY: 0.5,
+      u_worldWidth: 0, u_worldHeight: 0,
+      u_fit: 0, u_offsetX: 0, u_offsetY: 0,
+    }, { alpha: true, premultipliedAlpha: false }, SHADER_PARAMS.speed, 0, 2);
+
+    // CRITICAL: expose wrapper with updateParams for the tuner
+    window.__BD_SHADER__ = {
+      updateParams(params) {
+        const uniforms = {};
+        if (params.colorFront !== undefined) uniforms.u_colorFront = getShaderColorFromString(params.colorFront);
+        if (params.colorBack !== undefined) uniforms.u_colorBack = getShaderColorFromString(params.colorBack);
+        if (params.shape !== undefined) uniforms.u_shape = DitheringShapes[params.shape] ?? DitheringShapes.warp;
+        if (params.type !== undefined) uniforms.u_type = DitheringTypes[params.type] ?? DitheringTypes['2x2'];
+        if (params.size !== undefined) uniforms.u_pxSize = params.size;
+        if (params.scale !== undefined) uniforms.u_scale = params.scale;
+        if (params.rotation !== undefined) uniforms.u_rotation = parseFloat(params.rotation) || 180;
+        if (Object.keys(uniforms).length > 0) mount.setUniforms(uniforms);
+        if (params.speed !== undefined) mount.setSpeed(params.speed);
+      },
+      dispose() { mount.dispose(); },
+    };
+    return () => { window.__BD_SHADER__.dispose(); window.__BD_SHADER__ = null; };
+  }, []);
+
+  // Load tuner in dev mode only
+  useEffect(() => {
+    if (import.meta.env.DEV) {
+      const s = document.createElement('script');
+      s.src = '/bluedither/bluedither-tuner-inject.js';
+      document.body.appendChild(s);
+      return () => s.remove();
+    }
+  }, []);
+
   return (
     <div className="bd-root">
-      <BlueDitherHero />
-      <BlueDitherHeader />
+      <div className="bd-hero">
+        <div className="bd-hero-inner">
+          <div className="bd-shader-layer" ref={shaderRef} />
+          {/* hero content */}
+        </div>
+      </div>
+      <header className="bd-header">
+        {/* header content */}
+      </header>
     </div>
   );
 }
 ```
 
-### `BlueDitherHeader.jsx`
-Navbar component with logo, nav items, and CTA.
+Note: The shader uses `ShaderMount` directly from `paper-shaders-bundle.js` — do NOT create a separate shader wrapper module. Import `ShaderMount`, `ditheringFragmentShader`, `DitheringShapes`, `DitheringTypes`, and `getShaderColorFromString` directly.
 
-- Nav items come from `content.navItems` token array
-- Use `<nav>` with `<a>` elements for nav items
-- CTA is an `<a>` or `<button>` element
+The `window.__BD_SHADER__` assignment is **required** — the tuner calls `updateParams()` on it for live shader editing. The ShaderMount instance has `setUniforms()` and `setSpeed()` methods. The tuner's `updateParams` maps token names to uniform names (e.g., `colorFront` → `u_colorFront`).
 
-### `BlueDitherHero.jsx`
-Hero section with shader and text content.
+### `src/bluedither.css`
+All CSS custom properties and `.bd-*` class rules.
 
-- **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';
-
-const shaderRef = useRef(null);
+## Vite Config
 
-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);
-    window.__BD_SHADER__ = mount;
-    return () => { mount.dispose(); window.__BD_SHADER__ = null; };
-  });
-}, []);
+The `npx bluedither install` command auto-wires the Vite plugin. If it wasn't auto-wired, add manually:
+```js
+import { bluedither } from './bluedither/dev-middleware.js'
+export default defineConfig({ plugins: [react(), bluedither()] })
 ```
 
-### `bluedither.css`
-All CSS custom properties and `.bd-*` class rules, identical to the vanilla `<style>` block but as an external file.
-
 ## TypeScript
 
 If TypeScript is detected, use `.tsx` extensions and add minimal type annotations:
-- Props interfaces where components accept props
 - `useRef<HTMLDivElement>(null)` for refs
 
 ## Next.js
 
 If Next.js is detected:
 - Add `"use client"` at the top of components that use `useEffect` or `useRef`
-- The CSS file can be imported directly in the component
-
-## File Output
-
-| File | Contents |
-|------|----------|
-| `BlueDitherTheme.jsx/tsx` | Root layout component |
-| `BlueDitherHeader.jsx/tsx` | Navbar component |
-| `BlueDitherHero.jsx/tsx` | Hero + shader component |
-| `bluedither.css` | CSS custom properties + rules |
-| `paper-shaders-bundle.js` | Shader library (copied) |
 
 ## Content Handling