bluedither 1.0.0 → 1.0.2

package/cli/bin.js

@@ -21,7 +21,9 @@ const HELP = `
     bluedither install [target-dir]     Install theme into a project
     bluedither tune [--port N]          Launch fine-tuner dev server
     bluedither extract [dir] [--validate]  Validate theme package completeness
-    bluedither publish                  Validate and prepare for publishing
+    bluedither publish                  Validate and publish to marketplace
+    bluedither login                    Authenticate with marketplace
+    bluedither search <query>           Search marketplace for themes
 
   Options:
     --help    Show help for a command
@@ -48,6 +50,8 @@ const commands = {
   tune: () => import('./commands/tune.js'),
   extract: () => import('./commands/extract.js'),
   publish: () => import('./commands/publish.js'),
+  login: () => import('./commands/login.js'),
+  search: () => import('./commands/search.js'),
 };
 
 if (!commands[command]) {

package/cli/commands/install.js

@@ -8,8 +8,9 @@
  */
 
 import { readFileSync, writeFileSync, copyFileSync, mkdirSync, existsSync } from 'fs';
-import { resolve, dirname, basename } from 'path';
+import { resolve, dirname, basename, join } from 'path';
 import { fileURLToPath } from 'url';
+import { getDownloadUrl } from '../lib/registry.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const BLUEDITHER_ROOT = resolve(__dirname, '..', '..');
@@ -44,7 +45,18 @@ export default async function install(args) {
     return;
   }
 
-  const targetDir = resolve(args[0] || '.');
+  // Check if first arg is a registry reference (@designer/theme-name)
+  const firstArg = args[0] || '.';
+  const registryMatch = firstArg.match(/^@([^/]+)\/(.+)$/);
+
+  if (registryMatch) {
+    const slug = registryMatch[2];
+    const targetDir = resolve(args[1] || '.');
+    await installFromRegistry(slug, targetDir);
+    return;
+  }
+
+  const targetDir = resolve(firstArg);
 
   if (!existsSync(targetDir)) {
     console.error(`Target directory does not exist: ${targetDir}`);
@@ -66,6 +78,7 @@ export default async function install(args) {
     ['theme/tokens.schema.json', 'tokens.schema.json'],
     ['theme/structure.json', 'structure.json'],
     ['theme/rules.md', 'rules.md'],
+    ['theme/template/index.html', 'template/index.html'],
     ['theme/shaders/bluedither-shader.js', 'shaders/bluedither-shader.js'],
     ['theme/shaders/paper-shaders-bundle.js', 'shaders/paper-shaders-bundle.js'],
     ['skill.md', 'skill.md'],
@@ -124,3 +137,80 @@ $ARGUMENTS
     Or run: npx bluedither tune
   `);
 }
+
+async function installFromRegistry(slug, targetDir) {
+  console.log(`\n  Installing theme "${slug}" from marketplace...\n`);
+
+  if (!existsSync(targetDir)) {
+    console.error(`Target directory does not exist: ${targetDir}`);
+    process.exit(1);
+  }
+
+  // Get download URL from marketplace
+  let downloadUrl;
+  try {
+    downloadUrl = await getDownloadUrl(slug);
+  } catch (err) {
+    console.error(`  ✗ ${err.message}`);
+    process.exit(1);
+  }
+
+  // Download ZIP
+  console.log('  Downloading theme package...');
+  const response = await fetch(downloadUrl);
+  if (!response.ok) {
+    console.error('  ✗ Download failed.');
+    process.exit(1);
+  }
+  const buffer = Buffer.from(await response.arrayBuffer());
+
+  // Extract ZIP
+  console.log('  Extracting...');
+  const JSZip = (await import('jszip')).default;
+  const zip = await JSZip.loadAsync(buffer);
+
+  const bdDir = resolve(targetDir, 'bluedither');
+  mkdirSync(bdDir, { recursive: true });
+
+  let extracted = 0;
+  for (const [path, entry] of Object.entries(zip.files)) {
+    if (entry.dir) {
+      mkdirSync(resolve(bdDir, path), { recursive: true });
+      continue;
+    }
+    const content = await entry.async('nodebuffer');
+    const destPath = resolve(bdDir, path);
+    mkdirSync(dirname(destPath), { recursive: true });
+    writeFileSync(destPath, content);
+    extracted++;
+  }
+
+  console.log(`  Extracted ${extracted} files to ${bdDir}`);
+
+  // Detect framework and create Claude Code command
+  const { framework, typescript } = detectFramework(targetDir);
+  console.log(`  Detected framework: ${framework}${typescript ? ' + TypeScript' : ''}`);
+
+  const claudeDir = resolve(targetDir, '.claude', 'commands');
+  mkdirSync(claudeDir, { recursive: true });
+
+  const commandContent = `---
+description: Apply BlueDither theme to this project
+---
+
+Read the skill instructions at bluedither/skill.md and follow them to generate the BlueDither theme for this project.
+
+The theme files are in the bluedither/ directory. The target framework is ${framework}${typescript ? ' with TypeScript' : ''}.
+
+$ARGUMENTS
+`;
+
+  writeFileSync(resolve(claudeDir, 'apply-theme.md'), commandContent);
+
+  console.log(`
+  ✓ Theme "${slug}" installed!
+
+  To apply the theme, use Claude Code:
+    /apply-theme [description of your site]
+  `);
+}

package/cli/commands/login.js

@@ -0,0 +1,71 @@
+/**
+ * bluedither login
+ *
+ * Authenticates via the BlueDither marketplace.
+ * Opens browser for OAuth, receives token via local callback server.
+ */
+
+import { createServer } from 'http';
+import { saveCredentials } from '../lib/credentials.js';
+import { REGISTRY_URL } from '../lib/registry.js';
+
+export default async function login(args) {
+  if (args.includes('--help')) {
+    console.log(`
+  bluedither login
+
+  Authenticate with the BlueDither marketplace.
+  Opens your browser for GitHub sign-in and saves credentials locally.
+    `);
+    return;
+  }
+
+  return new Promise((resolvePromise, reject) => {
+    const server = createServer(async (req, res) => {
+      if (req.method === 'POST' && req.url === '/callback') {
+        let body = '';
+        req.on('data', chunk => { body += chunk; });
+        req.on('end', () => {
+          try {
+            const creds = JSON.parse(body);
+            saveCredentials(creds);
+            res.writeHead(200, { 'Content-Type': 'application/json' });
+            res.end('{"ok":true}');
+            console.log('\n  ✓ Logged in successfully!\n');
+            server.close();
+            resolvePromise();
+          } catch (err) {
+            res.writeHead(400);
+            res.end();
+            reject(err);
+          }
+        });
+      } else {
+        res.writeHead(404);
+        res.end();
+      }
+    });
+
+    server.listen(0, () => {
+      const port = server.address().port;
+      const loginUrl = `${REGISTRY_URL}/login?cli_port=${port}`;
+
+      console.log(`\n  Opening browser for authentication...`);
+      console.log(`  If it doesn't open, visit: ${loginUrl}\n`);
+
+      // Open browser
+      import('child_process').then(({ exec }) => {
+        const cmd = process.platform === 'win32' ? 'start' :
+                    process.platform === 'darwin' ? 'open' : 'xdg-open';
+        exec(`${cmd} "${loginUrl}"`);
+      });
+
+      // Timeout after 5 minutes
+      setTimeout(() => {
+        console.error('\n  ✗ Login timed out.\n');
+        server.close();
+        reject(new Error('Login timed out'));
+      }, 300_000);
+    });
+  });
+}

package/cli/commands/publish.js

@@ -1,23 +1,22 @@
 /**
  * bluedither publish
  *
- * Validates the theme package and prepares for publishing.
- * Full marketplace upload will be added in Phase 6.
+ * Validates the theme package and publishes to the BlueDither marketplace.
  */
 
-import { existsSync, readFileSync } from 'fs';
+import { existsSync, readFileSync, createReadStream } from 'fs';
 import { resolve } from 'path';
 import { execSync } from 'child_process';
+import { getCredentials } from '../lib/credentials.js';
+import { uploadPackage, publishTheme, REGISTRY_URL } from '../lib/registry.js';
 
 export default async function publish(args) {
   if (args.includes('--help')) {
     console.log(`
   bluedither publish
 
-  Validates theme package completeness, runs the build, and prepares
-  the package for publishing.
-
-  Marketplace upload will be available in a future version.
+  Validates, builds, and publishes your theme to the BlueDither marketplace.
+  If you're not logged in, a browser window will open for authentication.
     `);
     return;
   }
@@ -34,13 +33,18 @@ export default async function publish(args) {
   const config = JSON.parse(readFileSync(configPath, 'utf-8'));
   console.log(`Publishing: ${config.name}@${config.version}\n`);
 
-  // Step 1: Build
+  // Step 1: Build BlueDither assets (shader + tuner bundles)
   console.log('Step 1: Building...');
-  try {
-    execSync('npm run build', { cwd: dir, stdio: 'inherit' });
-  } catch {
-    console.error('\n✗ Build failed. Fix errors before publishing.');
-    process.exit(1);
+  const buildScript = resolve(dir, 'scripts/build.js');
+  if (existsSync(buildScript)) {
+    try {
+      execSync(`node "${buildScript}"`, { cwd: dir, stdio: 'inherit' });
+    } catch {
+      console.error('\n✗ Build failed. Fix errors before publishing.');
+      process.exit(1);
+    }
+  } else {
+    console.log('  No build script found — skipping build step.');
   }
 
   // Step 2: Validate package completeness
@@ -76,10 +80,99 @@ export default async function publish(args) {
     process.exit(1);
   }
 
+  console.log('\n✓ Validation passed.\n');
+
+  // Step 4: Authenticate
+  let creds = getCredentials();
+  if (!creds?.access_token) {
+    console.log('\nStep 4: Authenticating...');
+    const { default: login } = await import('./login.js');
+    await login([]);
+    creds = getCredentials();
+    if (!creds?.access_token) {
+      console.error('\n✗ Login failed. Cannot publish without authentication.');
+      process.exit(1);
+    }
+  }
+
+  console.log('\nStep 5: Creating package ZIP...');
+  const JSZip = (await import('jszip')).default;
+  const { readdirSync, statSync } = await import('fs');
+  const zip = new JSZip();
+
+  // Collect files to include
+  const includeFiles = [
+    config.tokens, config.defaults, config.schema,
+    config.structure, config.rules, config.skill,
+    'bluedither.config.json',
+  ];
+  if (config.tuner && existsSync(resolve(dir, config.tuner))) includeFiles.push(config.tuner);
+  if (config.shaders) includeFiles.push(...config.shaders);
+  if (config.shaderSources) includeFiles.push(...config.shaderSources);
+
+  function addDirToZip(dirPath, zipPath) {
+    const entries = readdirSync(dirPath, { withFileTypes: true });
+    for (const entry of entries) {
+      const full = resolve(dirPath, entry.name);
+      const zp = zipPath ? `${zipPath}/${entry.name}` : entry.name;
+      if (entry.isDirectory()) {
+        addDirToZip(full, zp);
+      } else {
+        zip.file(zp, readFileSync(full));
+      }
+    }
+  }
+
+  for (const f of includeFiles) {
+    const full = resolve(dir, f);
+    if (!existsSync(full)) continue;
+    if (statSync(full).isDirectory()) {
+      addDirToZip(full, f);
+    } else {
+      zip.file(f, readFileSync(full));
+    }
+  }
+
+  // Include generators directory
+  if (config.generators && existsSync(resolve(dir, config.generators))) {
+    addDirToZip(resolve(dir, config.generators), config.generators);
+  }
+
+  // Include template directory (check both source and installed layouts)
+  for (const tmplPath of ['theme/template', 'template']) {
+    const templateDir = resolve(dir, tmplPath);
+    if (existsSync(templateDir)) {
+      addDirToZip(templateDir, tmplPath);
+      break;
+    }
+  }
+
+  const zipBuffer = await zip.generateAsync({ type: 'nodebuffer', compression: 'DEFLATE' });
+  const slug = config.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+
+  console.log(`  ZIP size: ${(zipBuffer.length / 1024).toFixed(1)} KB`);
+
+  console.log('\nStep 6: Uploading to marketplace...');
+  const zipBlob = new Blob([zipBuffer], { type: 'application/zip' });
+  const zipFile = new File([zipBlob], `${slug}.zip`, { type: 'application/zip' });
+
+  const { path: packagePath } = await uploadPackage(zipFile, slug, creds.access_token);
+
+  console.log('Step 7: Publishing theme...');
+  const tokens = JSON.parse(readFileSync(resolve(dir, config.tokens), 'utf-8'));
+
+  const theme = await publishTheme({
+    name: config.name,
+    slug,
+    description: tokens.content?.subHeadline || '',
+    tokens_json: tokens,
+    package_path: packagePath,
+  }, creds.access_token);
+
   console.log(`
-  ✓ Package ready for publishing.
+  ✓ Published to marketplace!
 
-  Marketplace upload is not yet available.
-  To publish as an npm package, run: npm publish
+  View:    ${REGISTRY_URL}/themes/${slug}
+  Install: npx bluedither install @${slug}
   `);
 }

package/cli/commands/search.js

@@ -0,0 +1,64 @@
+/**
+ * bluedither search <query>
+ *
+ * Searches the BlueDither marketplace for themes.
+ */
+
+import { searchThemes } from '../lib/registry.js';
+
+export default async function search(args) {
+  if (args.includes('--help') || args.length === 0) {
+    console.log(`
+  bluedither search <query>
+
+  Search the BlueDither marketplace for themes.
+
+  Example:
+    bluedither search "dark minimal"
+    `);
+    if (args.length === 0 && !args.includes('--help')) {
+      process.exit(1);
+    }
+    return;
+  }
+
+  const query = args.join(' ');
+  console.log(`\n  Searching for "${query}"...\n`);
+
+  try {
+    const themes = await searchThemes(query);
+
+    if (themes.length === 0) {
+      console.log('  No themes found.\n');
+      return;
+    }
+
+    // Table header
+    const nameW = 24, designerW = 18, dlW = 10;
+    console.log(
+      '  ' +
+      'Name'.padEnd(nameW) +
+      'Designer'.padEnd(designerW) +
+      'Downloads'.padEnd(dlW) +
+      'Install command'
+    );
+    console.log('  ' + '-'.repeat(nameW + designerW + dlW + 30));
+
+    for (const t of themes) {
+      const designer = t.profiles?.display_name || 'unknown';
+      const slug = t.slug;
+      const handle = designer.toLowerCase().replace(/\s+/g, '-');
+      console.log(
+        '  ' +
+        t.name.slice(0, nameW - 2).padEnd(nameW) +
+        designer.slice(0, designerW - 2).padEnd(designerW) +
+        String(t.download_count || 0).padEnd(dlW) +
+        `npx bluedither install @${handle}/${slug}`
+      );
+    }
+    console.log();
+  } catch (err) {
+    console.error(`  ✗ ${err.message}\n`);
+    process.exit(1);
+  }
+}

package/cli/commands/tune.js

@@ -2,7 +2,9 @@
  * bluedither tune [--port N]
  *
  * Launches the fine-tuner dev server.
- * Finds the nearest bluedither.config.json or theme/ directory.
+ * Finds the nearest bluedither theme directory — either:
+ *   - Source repo layout: ./theme/tokens.json + ./fine-tuner/server.js
+ *   - Installed layout: ./bluedither/tokens.json (from `npx bluedither install`)
  */
 
 import { existsSync } from 'fs';
@@ -11,16 +13,7 @@ import { fileURLToPath } from 'url';
 import { spawn } from 'child_process';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
-
-function findThemeRoot(startDir) {
-  let dir = startDir;
-  while (dir !== dirname(dir)) {
-    if (existsSync(resolve(dir, 'bluedither.config.json'))) return dir;
-    if (existsSync(resolve(dir, 'theme', 'tokens.json'))) return dir;
-    dir = dirname(dir);
-  }
-  return null;
-}
+const PKG_ROOT = resolve(__dirname, '..', '..');
 
 export default async function tune(args) {
   if (args.includes('--help')) {
@@ -28,7 +21,7 @@ export default async function tune(args) {
   bluedither tune [--port N]
 
   Launches the fine-tuner dev server for real-time token editing.
-  Searches upward for bluedither.config.json or theme/tokens.json.
+  Searches for a BlueDither theme in the current directory.
 
   Options:
     --port N    Port number (default: 3333)
@@ -36,28 +29,55 @@ export default async function tune(args) {
     return;
   }
 
-  const themeRoot = findThemeRoot(process.cwd());
+  const cwd = process.cwd();
+
+  // Determine where the theme files live
+  let themeDir = null;
+  let tokensPath = null;
 
-  if (!themeRoot) {
+  // Case 1: Source repo layout (theme/ at cwd root)
+  if (existsSync(resolve(cwd, 'theme', 'tokens.json'))) {
+    themeDir = resolve(cwd, 'theme');
+    tokensPath = resolve(themeDir, 'tokens.json');
+  }
+  // Case 2: Installed layout (bluedither/ subfolder from `npx bluedither install`)
+  else if (existsSync(resolve(cwd, 'bluedither', 'tokens.json'))) {
+    themeDir = resolve(cwd, 'bluedither');
+    tokensPath = resolve(themeDir, 'tokens.json');
+  }
+  // Case 3: Search upward
+  else {
+    let dir = cwd;
+    while (dir !== dirname(dir)) {
+      if (existsSync(resolve(dir, 'theme', 'tokens.json'))) {
+        themeDir = resolve(dir, 'theme');
+        tokensPath = resolve(themeDir, 'tokens.json');
+        break;
+      }
+      if (existsSync(resolve(dir, 'bluedither', 'tokens.json'))) {
+        themeDir = resolve(dir, 'bluedither');
+        tokensPath = resolve(themeDir, 'tokens.json');
+        break;
+      }
+      dir = dirname(dir);
+    }
+  }
+
+  if (!themeDir) {
     console.error('Could not find a BlueDither theme directory.');
-    console.error('Run this from a directory containing bluedither.config.json or theme/tokens.json.');
+    console.error('Run this from a project with bluedither/ or theme/ containing tokens.json.');
     process.exit(1);
   }
 
-  const serverPath = resolve(themeRoot, 'fine-tuner', 'server.js');
-
+  // The fine-tuner server lives in the npm package
+  const serverPath = resolve(PKG_ROOT, 'fine-tuner', 'server.js');
   if (!existsSync(serverPath)) {
-    // If we're in an installed theme (not the source repo), use the source repo's server
-    const sourceServer = resolve(__dirname, '..', '..', 'fine-tuner', 'server.js');
-    if (!existsSync(sourceServer)) {
-      console.error('Fine-tuner server not found.');
-      process.exit(1);
-    }
-    const child = spawn('node', [sourceServer, ...args], { cwd: themeRoot, stdio: 'inherit' });
-    child.on('exit', (code) => process.exit(code || 0));
-    return;
+    console.error('Fine-tuner server not found at: ' + serverPath);
+    process.exit(1);
   }
 
-  const child = spawn('node', [serverPath, ...args], { cwd: themeRoot, stdio: 'inherit' });
+  // Pass the theme directory to the server via env var
+  const env = { ...process.env, BD_THEME_DIR: themeDir };
+  const child = spawn('node', [serverPath, ...args], { cwd: dirname(themeDir), env, stdio: 'inherit' });
   child.on('exit', (code) => process.exit(code || 0));
 }

package/cli/lib/credentials.js

@@ -0,0 +1,26 @@
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
+import { resolve } from 'path';
+import { homedir } from 'os';
+
+const CRED_DIR = resolve(homedir(), '.bluedither');
+const CRED_FILE = resolve(CRED_DIR, 'credentials.json');
+
+export function getCredentials() {
+  if (!existsSync(CRED_FILE)) return null;
+  try {
+    return JSON.parse(readFileSync(CRED_FILE, 'utf-8'));
+  } catch {
+    return null;
+  }
+}
+
+export function saveCredentials(creds) {
+  mkdirSync(CRED_DIR, { recursive: true });
+  writeFileSync(CRED_FILE, JSON.stringify(creds, null, 2));
+}
+
+export function clearCredentials() {
+  if (existsSync(CRED_FILE)) {
+    writeFileSync(CRED_FILE, '{}');
+  }
+}

package/cli/lib/registry.js

@@ -0,0 +1,58 @@
+const REGISTRY_URL = process.env.BLUEDITHER_REGISTRY_URL || 'https://marketplace-five-flame.vercel.app';
+
+export async function searchThemes(query) {
+  const url = `${REGISTRY_URL}/api/themes?q=${encodeURIComponent(query)}`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Search failed: ${res.statusText}`);
+  return res.json();
+}
+
+export async function getTheme(slug) {
+  const url = `${REGISTRY_URL}/api/themes/${encodeURIComponent(slug)}`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Theme not found: ${slug}`);
+  return res.json();
+}
+
+export async function getDownloadUrl(slug) {
+  const url = `${REGISTRY_URL}/api/themes/${encodeURIComponent(slug)}/download`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Download failed: ${res.statusText}`);
+  const data = await res.json();
+  return data.url;
+}
+
+export async function uploadPackage(file, slug, accessToken) {
+  const formData = new FormData();
+  formData.append('package', file);
+  formData.append('slug', slug);
+
+  const res = await fetch(`${REGISTRY_URL}/api/upload`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${accessToken}` },
+    body: formData,
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.error || `Upload failed: ${res.statusText}`);
+  }
+  return res.json();
+}
+
+export async function publishTheme(metadata, accessToken) {
+  const res = await fetch(`${REGISTRY_URL}/api/themes`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${accessToken}`,
+    },
+    body: JSON.stringify(metadata),
+  });
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({}));
+    throw new Error(err.error || `Publish failed: ${res.statusText}`);
+  }
+  return res.json();
+}
+
+export { REGISTRY_URL };