bluedither 1.0.1 → 1.0.3

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/extract.js

@@ -1,15 +1,11 @@
 /**
  * bluedither extract [dir] [--validate]
  *
- * Validates theme directory completeness.
- * Full Paper extraction is planned for Phase 5.
+ * Validates theme directory completeness using bluedither.config.json paths.
  */
 
 import { readFileSync, existsSync } from 'fs';
-import { resolve, dirname } from 'path';
-import { fileURLToPath } from 'url';
-
-const __dirname = dirname(fileURLToPath(import.meta.url));
+import { resolve } from 'path';
 
 export default async function extract(args) {
   if (args.includes('--help')) {
@@ -30,27 +26,52 @@ export default async function extract(args) {
 
   console.log(`Checking theme package in: ${dir}\n`);
 
+  // Read config to get actual paths
+  const configPath = resolve(dir, 'bluedither.config.json');
+  if (!existsSync(configPath)) {
+    console.error('✗ No bluedither.config.json found.');
+    process.exit(1);
+  }
+
+  const config = JSON.parse(readFileSync(configPath, 'utf-8'));
+
   const required = [
-    { path: 'theme/tokens.json', label: 'Tokens' },
-    { path: 'theme/tokens.defaults.json', label: 'Default tokens' },
-    { path: 'theme/tokens.schema.json', label: 'Token schema' },
-    { path: 'theme/structure.json', label: 'Structure contract' },
-    { path: 'theme/rules.md', label: 'Design rules' },
-    { path: 'theme/template/index.html', label: 'HTML template' },
-    { path: 'theme/shaders/bluedither-shader.js', label: 'Shader module' },
-    { path: 'theme/shaders/paper-shaders-bundle.js', label: 'Shader bundle' },
-    { path: 'skill.md', label: 'Skill instructions' },
+    { path: config.tokens, label: 'Tokens' },
+    { path: config.defaults, label: 'Default tokens' },
+    { path: config.schema, label: 'Token schema' },
+    { path: config.structure, label: 'Structure contract' },
+    { path: config.rules, label: 'Design rules' },
+    { path: config.skill, label: 'Skill instructions' },
     { path: 'bluedither.config.json', label: 'Package manifest' },
   ];
 
-  const optional = [
-    { path: 'dist/bluedither-tuner.js', label: 'Tuner bundle' },
-    { path: 'dist/bluedither-shader.js', label: 'Shader bundle (dist)' },
-    { path: 'theme/generators/vanilla.md', label: 'Vanilla generator' },
-    { path: 'theme/generators/react.md', label: 'React generator' },
-    { path: 'theme/generators/vue.md', label: 'Vue generator' },
-    { path: 'theme/generators/svelte.md', label: 'Svelte generator' },
-  ];
+  // Add shader sources if present
+  if (config.shaderSources) {
+    for (const s of config.shaderSources) {
+      required.push({ path: s, label: `Shader source (${s})` });
+    }
+  }
+
+  // Template directory
+  for (const tmplPath of ['theme/template/index.html', 'template/index.html']) {
+    if (existsSync(resolve(dir, tmplPath))) {
+      required.push({ path: tmplPath, label: 'HTML template' });
+      break;
+    }
+  }
+
+  const optional = [];
+  if (config.tuner) optional.push({ path: config.tuner, label: 'Tuner bundle' });
+  if (config.shaders) {
+    for (const s of config.shaders) {
+      optional.push({ path: s, label: `Shader bundle (${s})` });
+    }
+  }
+  if (config.generators) {
+    for (const gen of ['vanilla.md', 'react.md', 'vue.md', 'svelte.md']) {
+      optional.push({ path: `${config.generators}${gen}`, label: `${gen.replace('.md', '')} generator` });
+    }
+  }
 
   let allPresent = true;
 
@@ -70,8 +91,8 @@ export default async function extract(args) {
   // Schema validation
   if (doValidate) {
     console.log('\nSchema validation:');
-    const schemaPath = resolve(dir, 'theme', 'tokens.schema.json');
-    const tokensPath = resolve(dir, 'theme', 'tokens.json');
+    const schemaPath = resolve(dir, config.schema);
+    const tokensPath = resolve(dir, config.tokens);
 
     if (!existsSync(schemaPath) || !existsSync(tokensPath)) {
       console.log('  ✗ Cannot validate: schema or tokens file missing');

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}`);
@@ -125,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/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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bluedither",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A bold, dithered-shader hero theme for Claude Code — skill + fine-tuner",
   "type": "module",
   "bin": {
@@ -31,7 +31,9 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@paper-design/shaders": "^0.0.71"
+    "@paper-design/shaders": "^0.0.71",
+    "archiver": "^7.0.1",
+    "jszip": "^3.10.1"
   },
   "devDependencies": {
     "ajv": "^8.18.0",

package/theme/tokens.defaults.json

@@ -1,20 +1,20 @@
 {
   "$schema": "./tokens.schema.json",
   "meta": {
-    "name": "BlueDither",
+    "name": "Understanding Moon",
     "version": "1.0.0",
-    "description": "A bold, dithered-shader hero theme with striking typography"
+    "description": "A deep navy theme with teal dithered ripple shader evoking lunar surfaces"
   },
   "layout": {
     "designWidth": 1364
   },
   "colors": {
     "background": "#040037",
-    "primary": "#3300FF",
+    "primary": "#005A6A",
     "text": "#FFFFFF",
     "ctaBackground": "#FFFFFF",
     "ctaText": "#14161C",
-    "shaderFront": "#3300FF",
+    "shaderFront": "#005A6A",
     "shaderBack": "#00000000"
   },
   "typography": {
@@ -57,7 +57,7 @@
   },
   "shader": {
     "speed": 0.41,
-    "shape": "warp",
+    "shape": "ripple",
     "type": "2x2",
     "size": 4.2,
     "scale": 1,

package/theme/tokens.json

@@ -1,20 +1,20 @@
 {
   "$schema": "./tokens.schema.json",
   "meta": {
-    "name": "BlueDither",
+    "name": "Understanding Moon",
     "version": "1.0.0",
-    "description": "A bold, dithered-shader hero theme with striking typography"
+    "description": "A deep navy theme with teal dithered ripple shader evoking lunar surfaces"
   },
   "layout": {
     "designWidth": 1364
   },
   "colors": {
     "background": "#040037",
-    "primary": "#ff006f",
+    "primary": "#005A6A",
     "text": "#FFFFFF",
     "ctaBackground": "#FFFFFF",
     "ctaText": "#14161C",
-    "shaderFront": "#ffdd00",
+    "shaderFront": "#005A6A",
     "shaderBack": "#00000000"
   },
   "typography": {
@@ -57,7 +57,7 @@
   },
   "shader": {
     "speed": 0.41,
-    "shape": "warp",
+    "shape": "ripple",
     "type": "2x2",
     "size": 4.2,
     "scale": 1,