bluedither 1.0.16 → 1.0.18

package/cli/commands/install.js

@@ -121,6 +121,9 @@ export default async function install(args) {
 
   console.log(`Copied ${copied} files to ${bdDir}`);
 
+  // Auto-wire Vite plugin if vite.config exists
+  autoWireVitePlugin(targetDir);
+
   // Generate Claude Code command file
   const claudeDir = resolve(targetDir, '.claude', 'commands');
   mkdirSync(claudeDir, { recursive: true });
@@ -145,14 +148,46 @@ $ARGUMENTS
   To apply the theme, use Claude Code:
     /apply-theme [description of your site]
 
-  To customize visually, add this to your HTML:
-    <script src="./bluedither/bluedither-tuner-inject.js"></script>
-
-  For auto-saving, run in a separate terminal:
-    npx bluedither tune --save-only
+  The tuner panel loads automatically in dev mode.
+  Click "Commit Changes" to save tweaks to tokens.json.
   `);
 }
 
+function autoWireVitePlugin(targetDir) {
+  // Find vite.config file
+  const variants = ['vite.config.js', 'vite.config.ts', 'vite.config.mjs', 'vite.config.mts'];
+  let configPath = null;
+  for (const v of variants) {
+    const p = resolve(targetDir, v);
+    if (existsSync(p)) { configPath = p; break; }
+  }
+  if (!configPath) return;
+
+  const config = readFileSync(configPath, 'utf-8');
+
+  // Skip if already wired
+  if (config.includes('bluedither')) return;
+
+  // Add import and plugin
+  const importLine = `import { bluedither } from './bluedither/dev-middleware.js'\n`;
+  let updated = importLine + config;
+
+  // Add bluedither() to plugins array
+  updated = updated.replace(
+    /plugins:\s*\[([^\]]*)\]/,
+    (match, inner) => {
+      const trimmed = inner.trim();
+      if (trimmed.endsWith(',')) {
+        return `plugins: [${trimmed} bluedither()]`;
+      }
+      return `plugins: [${trimmed}, bluedither()]`;
+    }
+  );
+
+  writeFileSync(configPath, updated);
+  console.log(`Wired BlueDither plugin into ${basename(configPath)}`);
+}
+
 async function installFromRegistry(slug, targetDir) {
   console.log(`\n  Installing theme "${slug}" from marketplace...\n`);
 
@@ -221,6 +256,9 @@ async function installFromRegistry(slug, targetDir) {
   const { framework, typescript } = detectFramework(targetDir);
   console.log(`  Detected framework: ${framework}${typescript ? ' + TypeScript' : ''}`);
 
+  // Auto-wire Vite plugin
+  autoWireVitePlugin(targetDir);
+
   const claudeDir = resolve(targetDir, '.claude', 'commands');
   mkdirSync(claudeDir, { recursive: true });
 
@@ -243,10 +281,7 @@ $ARGUMENTS
   To apply the theme, use Claude Code:
     /apply-theme [description of your site]
 
-  To customize visually, add this to your HTML:
-    <script src="./bluedither/bluedither-tuner-inject.js"><\/script>
-
-  For auto-saving, run in a separate terminal:
-    npx bluedither tune --save-only
+  The tuner panel loads automatically in dev mode.
+  Click "Commit Changes" to save tweaks to tokens.json.
   `);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bluedither",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "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,96 @@ 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 for tuner
+    window.__BD_SHADER__ = mount;
+    return () => { mount.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';
+## Vite Config
 
-const shaderRef = useRef(null);
-
-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