neutrinos-cli 2.0.0-beta.3 → 2.0.0-beta.4

package/dist/src/bin/cli.js

@@ -4,6 +4,21 @@ if (major < 22) {
     console.error('neutrinos requires Node.js 22+. Current: ' + process.version);
     process.exit(1);
 }
+// Delegate to workspace-local CLI binary if it exists and differs from this one.
+// This ensures the workspace's pinned CLI version is used, not the global install.
+import { resolveLocalCli } from '../utils/local-cli.js';
+const localScript = resolveLocalCli(process.cwd(), realpathSync(fileURLToPath(import.meta.url)));
+if (localScript) {
+    const child = spawn(process.execPath, [localScript, ...process.argv.slice(2)], {
+        stdio: 'inherit',
+    });
+    process.on('SIGINT', () => child.kill('SIGINT'));
+    process.on('SIGTERM', () => child.kill('SIGTERM'));
+    const code = await new Promise((resolve) => {
+        child.on('close', (c) => resolve(c ?? 1));
+    });
+    process.exit(code);
+}
 import dotenv from 'dotenv';
 import { PACKAGE_ROOT } from '../utils/path-utils.js';
 dotenv.config({
@@ -14,6 +29,7 @@ import { Argument, Command, Option } from 'commander';
 import EventEmitter from 'node:events';
 import { cwd, env, exit } from 'node:process';
 import { readFileSync, realpathSync } from 'node:fs';
+import { spawn } from 'node:child_process';
 import { fileURLToPath } from 'node:url';
 import open from 'open';
 import { join, resolve } from 'node:path';
@@ -26,6 +42,7 @@ import { generate } from '../commands/generate.js';
 import { createWorkspace } from '../commands/new-workspace.js';
 import { publish } from '../commands/publish.js';
 import { startPluginsServer } from '../commands/serve.js';
+import { runTests } from '../commands/test.js';
 import { completion } from '../commands/completion.js';
 import { doctor } from '../commands/doctor.js';
 import { getPackages } from '../utils/get-packages.js';
@@ -179,6 +196,14 @@ export const createProgram = () => {
         .action((options) => {
         servePlugin(cwd(), Number(options.port) || 6969);
     });
+    program
+        .command('test')
+        .alias('t')
+        .option('-w, --watch', 'Run in watch mode')
+        .description('run story-based tests')
+        .action((options) => {
+        runTests(cwd(), options);
+    });
     program
         .command('serve')
         .option('-p, --port <port>', 'Port number for serving the plugins', '3000')

package/dist/src/commands/dev.js

@@ -1,10 +1,15 @@
-import { createServer } from 'vite';
+import { spawn } from 'node:child_process';
 export const servePlugin = async (wsPath, port) => {
-    const server = await createServer({
-        root: wsPath,
-        server: { port },
+    const child = spawn('npx', ['storybook', 'dev', '-p', String(port)], {
+        cwd: wsPath,
+        stdio: 'inherit',
+    });
+    await new Promise((resolve, reject) => {
+        child.on('close', (code) => {
+            if (code === 0)
+                resolve();
+            else
+                reject(new Error(`Storybook exited with code ${code}`));
+        });
     });
-    await server.listen();
-    server.printUrls();
-    server.bindCLIShortcuts({ print: true });
 };

package/dist/src/commands/doctor.js

@@ -1,6 +1,6 @@
 import { bold, greenBright, red, yellowBright } from 'colorette';
 import { log as _log } from 'node:console';
-import { checks } from '../utils/doctor-checks.js';
+import { checks } from '../utils/doctor-checks/index.js';
 const SYMBOLS = {
     pass: greenBright('✔'),
     warn: yellowBright('⚠'),

package/dist/src/commands/new-workspace.js

@@ -75,16 +75,19 @@ const cleanUp = (dir) => {
     done('Cleaned up workspace');
 };
 const initializePackages = async (dir) => {
-    inprogress('Adding default npm scripts to workspace...');
+    inprogress('Installing default packages in workspace...');
     const pkgJson = JSON.parse(readFileSync(join(dir, 'package.json'), 'utf-8'));
-    const scripts = {
-        build: 'neutrinos build',
-        start: 'neutrinos start',
-        serve: 'neutrinos serve',
-    };
+    pkgJson.scripts = {};
     pkgJson.devDependencies = {
+        'neutrinos-cli': '^2.0.0',
         lit: '^3.3.2',
         typescript: '^5.9.3',
+        storybook: '^10.3.1',
+        '@storybook/web-components-vite': '^10.3.1',
+        '@storybook/addon-vitest': '^10.3.1',
+        vitest: '^4.0.0',
+        '@vitest/browser': '^4.0.0',
+        '@vitest/browser-playwright': '^4.0.0',
     };
     pkgJson.dependencies = {
         express: '^5.2.1',
@@ -92,13 +95,11 @@ const initializePackages = async (dir) => {
     };
     pkgJson.workspaces = ['packages/*'];
     pkgJson.type = 'module';
-    Object.assign(pkgJson.scripts, {}, scripts);
     writeFileSync(join(dir, 'package.json'), await prettify(pkgJson, 'json'));
     execSync('npm install', {
         cwd: dir,
     });
     done(`Installed default packages in workspace: ${bold(dir)}`);
-    done(`Added default npm scripts to workspace: ${bold(dir)}`);
 };
 const initializeStaticServer = (dir) => {
     cpSync(pluginServerTemplatesPath(), join(dir, 'plugins-server'), {

package/dist/src/commands/test.js

@@ -0,0 +1,27 @@
+import { spawn } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { failed } from '../utils/logger.js';
+export const runTests = async (wsPath, options) => {
+    const vitestConfig = join(wsPath, 'vitest.config.ts');
+    if (!existsSync(vitestConfig)) {
+        failed('vitest.config.ts not found in workspace. Run "neutrinos doctor --fix" or create it manually.');
+        process.exit(1);
+    }
+    const args = ['vitest'];
+    if (!options.watch) {
+        args.push('--run');
+    }
+    const child = spawn('npx', args, {
+        cwd: wsPath,
+        stdio: 'inherit',
+    });
+    await new Promise((resolve, reject) => {
+        child.on('close', (code) => {
+            if (code === 0)
+                resolve();
+            else
+                reject(new Error(`Vitest exited with code ${code}`));
+        });
+    });
+};

package/dist/src/utils/doctor-checks/auth-state.js

@@ -0,0 +1,21 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { authConfigJson } from '../path-utils.js';
+export const authStateCheck = {
+    name: 'Auth state',
+    run() {
+        const authPath = authConfigJson();
+        if (!existsSync(authPath)) {
+            return [{ name: 'Auth state', status: 'fail', message: `${authPath} not found. Run "neutrinos auth login"`, fixable: false }];
+        }
+        try {
+            const tokenSet = JSON.parse(readFileSync(authPath, 'utf-8'));
+            if (tokenSet.expires_at && tokenSet.expires_at < Date.now() / 1000) {
+                return [{ name: 'Auth state', status: 'warn', message: 'Token expired. Run "neutrinos auth login"', fixable: false }];
+            }
+        }
+        catch {
+            return [{ name: 'Auth state', status: 'warn', message: 'Could not parse auth.json', fixable: false }];
+        }
+        return [{ name: 'Auth state', status: 'pass', message: 'Token present and valid', fixable: false }];
+    },
+};

package/dist/src/utils/doctor-checks/component-entry-file.js

@@ -0,0 +1,40 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { basename, join } from 'node:path';
+import { getGeneratedComponentName } from '../path-utils.js';
+import { getPackagesSafe } from './get-packages-safe.js';
+export const componentEntryFileCheck = {
+    name: 'Component entry file',
+    run(wsPath) {
+        const packages = getPackagesSafe(wsPath);
+        if (packages === null) {
+            return [{ name: 'Component entry file', status: 'fail', message: 'Could not discover packages', fixable: false }];
+        }
+        const results = [];
+        for (const pkgPath of packages) {
+            const pkgJsonPath = join(pkgPath, 'package.json');
+            const pkgJson = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+            if (!pkgJson.alpha?.component)
+                continue;
+            const pkgName = pkgJson.name || basename(pkgPath);
+            const entryName = getGeneratedComponentName(basename(pkgPath));
+            const entryFile = join(pkgPath, `${entryName}.ts`);
+            if (!existsSync(entryFile)) {
+                results.push({
+                    name: `Package "${pkgName}" entry file`,
+                    status: 'fail',
+                    message: `${entryName}.ts is missing`,
+                    fixable: false,
+                });
+            }
+            else {
+                results.push({
+                    name: `Package "${pkgName}" entry file`,
+                    status: 'pass',
+                    message: `${entryName}.ts exists`,
+                    fixable: false,
+                });
+            }
+        }
+        return results;
+    },
+};

package/dist/src/utils/doctor-checks/get-packages-safe.js

@@ -0,0 +1,16 @@
+import { existsSync, globSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+export function getPackagesSafe(wsPath) {
+    try {
+        const packageJsonContent = readFileSync(join(wsPath, 'package.json'), 'utf-8');
+        const parsed = JSON.parse(packageJsonContent);
+        const packagesDir = parsed.workspaces ?? [];
+        const packageNames = globSync(packagesDir, { cwd: wsPath });
+        return packageNames
+            .map((name) => join(wsPath, name))
+            .filter((p) => existsSync(join(p, 'package.json')));
+    }
+    catch {
+        return null;
+    }
+}

package/dist/src/utils/doctor-checks/index.js

@@ -0,0 +1,26 @@
+import { nodeModulesCheck } from './node-modules.js';
+import { pluginJsonCheck } from './plugin-json.js';
+import { rootPackageJsonCheck } from './root-package-json.js';
+import { tsconfigCheck } from './tsconfig.js';
+import { pluginsServerCheck } from './plugins-server.js';
+import { storybookCheck } from './storybook.js';
+import { vitestConfigCheck } from './vitest-config.js';
+import { packageAlphaBlockCheck } from './package-alpha-block.js';
+import { componentEntryFileCheck } from './component-entry-file.js';
+import { nodeVersionCheck } from './node-version.js';
+import { authStateCheck } from './auth-state.js';
+import { lockFileSyncCheck } from './lock-file-sync.js';
+export const checks = [
+    nodeModulesCheck,
+    pluginJsonCheck,
+    rootPackageJsonCheck,
+    tsconfigCheck,
+    pluginsServerCheck,
+    storybookCheck,
+    vitestConfigCheck,
+    packageAlphaBlockCheck,
+    componentEntryFileCheck,
+    nodeVersionCheck,
+    authStateCheck,
+    lockFileSyncCheck,
+];

package/dist/src/utils/doctor-checks/lock-file-sync.js

@@ -0,0 +1,38 @@
+import { execSync } from 'node:child_process';
+import { existsSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+export const lockFileSyncCheck = {
+    name: 'Lock file sync',
+    run(wsPath) {
+        const packageJsonPath = join(wsPath, 'package.json');
+        if (!existsSync(packageJsonPath)) {
+            return [{ name: 'Lock file sync', status: 'fail', message: 'No package.json to compare against', fixable: false }];
+        }
+        const pnpmLock = join(wsPath, 'pnpm-lock.yaml');
+        const npmLock = join(wsPath, 'package-lock.json');
+        let lockPath = null;
+        let manager = 'npm';
+        if (existsSync(pnpmLock)) {
+            lockPath = pnpmLock;
+            manager = 'pnpm';
+        }
+        else if (existsSync(npmLock)) {
+            lockPath = npmLock;
+            manager = 'npm';
+        }
+        if (!lockPath) {
+            return [{ name: 'Lock file sync', status: 'fail', message: 'No lock file found. Run "npm install" or "pnpm install"', fixable: true }];
+        }
+        const lockMtime = statSync(lockPath).mtimeMs;
+        const pkgMtime = statSync(packageJsonPath).mtimeMs;
+        if (pkgMtime > lockMtime) {
+            return [{ name: 'Lock file sync', status: 'warn', message: `package.json is newer than lock file. Run "${manager} install"`, fixable: true }];
+        }
+        return [{ name: 'Lock file sync', status: 'pass', message: 'Lock file is up to date', fixable: false }];
+    },
+    fix(wsPath) {
+        const pnpmLock = join(wsPath, 'pnpm-lock.yaml');
+        const manager = existsSync(pnpmLock) ? 'pnpm' : 'npm';
+        execSync(`${manager} install`, { cwd: wsPath, stdio: 'inherit' });
+    },
+};

package/dist/src/utils/doctor-checks/node-modules.js

@@ -0,0 +1,17 @@
+import { execSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+export const nodeModulesCheck = {
+    name: 'node_modules',
+    run(wsPath) {
+        if (!existsSync(join(wsPath, 'node_modules'))) {
+            return [{ name: 'node_modules', status: 'fail', message: 'Not installed. Run "npm install" or "pnpm install"', fixable: true }];
+        }
+        return [{ name: 'node_modules', status: 'pass', message: 'Dependencies installed', fixable: false }];
+    },
+    fix(wsPath) {
+        const pnpmLock = join(wsPath, 'pnpm-lock.yaml');
+        const manager = existsSync(pnpmLock) ? 'pnpm' : 'npm';
+        execSync(`${manager} install`, { cwd: wsPath, stdio: 'inherit' });
+    },
+};

package/dist/src/utils/doctor-checks/node-version.js

@@ -0,0 +1,10 @@
+export const nodeVersionCheck = {
+    name: 'Node version',
+    run() {
+        const [major] = process.versions.node.split('.').map(Number);
+        if (major < 22) {
+            return [{ name: 'Node version', status: 'fail', message: `v${process.versions.node} does not meet requirement (>=22). Install Node.js 22+`, fixable: false }];
+        }
+        return [{ name: 'Node version', status: 'pass', message: `v${process.versions.node} meets requirement (>=22)`, fixable: false }];
+    },
+};

package/dist/src/utils/doctor-checks/package-alpha-block.js

@@ -0,0 +1,62 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+import { basename, join } from 'node:path';
+import { getPackagesSafe } from './get-packages-safe.js';
+export const packageAlphaBlockCheck = {
+    name: 'Package alpha block',
+    run(wsPath) {
+        const packages = getPackagesSafe(wsPath);
+        if (packages === null) {
+            return [{ name: 'Package alpha block', status: 'fail', message: 'Could not discover packages (missing package.json or workspaces)', fixable: false }];
+        }
+        if (packages.length === 0) {
+            return [{ name: 'Package alpha block', status: 'pass', message: 'No packages found (nothing to check)', fixable: false }];
+        }
+        const results = [];
+        for (const pkgPath of packages) {
+            const pkgJsonPath = join(pkgPath, 'package.json');
+            const pkgJson = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+            const pkgName = pkgJson.name || basename(pkgPath);
+            if (!pkgJson.alpha) {
+                results.push({
+                    name: `Package "${pkgName}" alpha block`,
+                    status: 'fail',
+                    message: 'No alpha block found. Add alpha.component or alpha.module',
+                    fixable: true,
+                });
+            }
+            else if (!pkgJson.alpha.component && !pkgJson.alpha.module) {
+                results.push({
+                    name: `Package "${pkgName}" alpha block`,
+                    status: 'warn',
+                    message: 'alpha block exists but neither component nor module is true',
+                    fixable: true,
+                });
+            }
+            else {
+                const type = pkgJson.alpha.component ? 'alpha.component' : 'alpha.module';
+                results.push({
+                    name: `Package "${pkgName}" alpha block`,
+                    status: 'pass',
+                    message: `${type} is set`,
+                    fixable: false,
+                });
+            }
+        }
+        return results;
+    },
+    fix(wsPath) {
+        const packages = getPackagesSafe(wsPath);
+        if (!packages)
+            return;
+        for (const pkgPath of packages) {
+            const pkgJsonPath = join(pkgPath, 'package.json');
+            const pkgJson = JSON.parse(readFileSync(pkgJsonPath, 'utf-8'));
+            const alpha = (pkgJson['alpha'] ?? {});
+            if (!alpha['component'] && !alpha['module']) {
+                alpha['component'] = true;
+            }
+            pkgJson['alpha'] = alpha;
+            writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 4) + '\n');
+        }
+    },
+};

package/dist/src/utils/doctor-checks/plugin-json.js

@@ -0,0 +1,56 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { basename } from 'node:path';
+import { pluginJsonPath } from '../path-utils.js';
+export const pluginJsonCheck = {
+    name: 'plugin.json',
+    run(wsPath) {
+        const path = pluginJsonPath(wsPath);
+        if (!existsSync(path)) {
+            return [{ name: 'plugin.json', status: 'fail', message: 'File is missing', fixable: true }];
+        }
+        let json;
+        try {
+            json = JSON.parse(readFileSync(path, 'utf-8'));
+        }
+        catch {
+            return [{ name: 'plugin.json', status: 'fail', message: 'File is not valid JSON', fixable: false }];
+        }
+        const missing = [];
+        if (!json.name)
+            missing.push('name');
+        if (!json.components?.selectorPrefix)
+            missing.push('components.selectorPrefix');
+        if (!json.modules?.idPrefix)
+            missing.push('modules.idPrefix');
+        if (missing.length > 0) {
+            return [{ name: 'plugin.json', status: 'fail', message: `Missing required fields: ${missing.join(', ')}`, fixable: true }];
+        }
+        return [{ name: 'plugin.json', status: 'pass', message: 'All required fields present', fixable: false }];
+    },
+    fix(wsPath) {
+        const path = pluginJsonPath(wsPath);
+        const defaults = {
+            name: basename(wsPath),
+            components: { selectorPrefix: 'comp' },
+            modules: { idPrefix: 'mod' },
+        };
+        if (!existsSync(path)) {
+            writeFileSync(path, JSON.stringify(defaults, null, 4) + '\n');
+            return;
+        }
+        let existing = {};
+        try {
+            existing = JSON.parse(readFileSync(path, 'utf-8'));
+        }
+        catch {
+            writeFileSync(path, JSON.stringify(defaults, null, 4) + '\n');
+            return;
+        }
+        existing.name ??= defaults.name;
+        existing.components ??= {};
+        existing.components.selectorPrefix ??= defaults.components.selectorPrefix;
+        existing.modules ??= {};
+        existing.modules.idPrefix ??= defaults.modules.idPrefix;
+        writeFileSync(path, JSON.stringify(existing, null, 4) + '\n');
+    },
+};

package/dist/src/utils/doctor-checks/plugins-server.js

@@ -0,0 +1,21 @@
+import { cpSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { pluginServerRoot, pluginServerTemplatesPath } from '../path-utils.js';
+export const pluginsServerCheck = {
+    name: 'plugins-server/',
+    run(wsPath) {
+        const serverDir = pluginServerRoot(wsPath);
+        if (!existsSync(serverDir)) {
+            return [{ name: 'plugins-server/', status: 'fail', message: 'Directory is missing', fixable: true }];
+        }
+        if (!existsSync(join(serverDir, 'index.js'))) {
+            return [{ name: 'plugins-server/', status: 'fail', message: 'Directory exists but index.js is missing', fixable: true }];
+        }
+        return [{ name: 'plugins-server/', status: 'pass', message: 'Directory exists with index.js', fixable: false }];
+    },
+    fix(wsPath) {
+        const serverDir = pluginServerRoot(wsPath);
+        const templateDir = pluginServerTemplatesPath();
+        cpSync(templateDir, serverDir, { recursive: true });
+    },
+};

package/dist/src/utils/doctor-checks/root-package-json.js

@@ -0,0 +1,51 @@
+import { existsSync, readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+export const rootPackageJsonCheck = {
+    name: 'Root package.json',
+    run(wsPath) {
+        const path = join(wsPath, 'package.json');
+        if (!existsSync(path)) {
+            return [{ name: 'Root package.json', status: 'fail', message: 'File is missing', fixable: false }];
+        }
+        let json;
+        try {
+            json = JSON.parse(readFileSync(path, 'utf-8'));
+        }
+        catch {
+            return [{ name: 'Root package.json', status: 'fail', message: 'File is not valid JSON', fixable: false }];
+        }
+        const issues = [];
+        if (!json['workspaces'])
+            issues.push('workspaces');
+        if (json['type'] !== 'module')
+            issues.push('type: "module"');
+        const deps = (json['dependencies'] ?? {});
+        if (!deps['@jatahworx/alpha-annotations-lib'])
+            issues.push('dependency @jatahworx/alpha-annotations-lib');
+        const devDeps = (json['devDependencies'] ?? {});
+        if (!devDeps['lit'])
+            issues.push('devDependency lit');
+        if (!devDeps['typescript'])
+            issues.push('devDependency typescript');
+        if (issues.length > 0) {
+            const fixable = issues.includes('workspaces') || issues.includes('type: "module"');
+            return [{ name: 'Root package.json', status: 'fail', message: `Missing: ${issues.join(', ')}`, fixable }];
+        }
+        return [{ name: 'Root package.json', status: 'pass', message: 'workspaces, dependencies, and type configured', fixable: false }];
+    },
+    fix(wsPath) {
+        const path = join(wsPath, 'package.json');
+        if (!existsSync(path))
+            return;
+        let json;
+        try {
+            json = JSON.parse(readFileSync(path, 'utf-8'));
+        }
+        catch {
+            return;
+        }
+        json['workspaces'] ??= ['packages/*'];
+        json['type'] ??= 'module';
+        writeFileSync(path, JSON.stringify(json, null, 4) + '\n');
+    },
+};

package/dist/src/utils/doctor-checks/storybook.js

@@ -0,0 +1,26 @@
+import { cpSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { templatesPath } from '../path-utils.js';
+export const storybookCheck = {
+    name: '.storybook/',
+    run(wsPath) {
+        const storybookDir = join(wsPath, '.storybook');
+        if (!existsSync(storybookDir)) {
+            return [{ name: '.storybook/', status: 'fail', message: 'Directory is missing', fixable: true }];
+        }
+        const missing = [];
+        if (!existsSync(join(storybookDir, 'main.ts')))
+            missing.push('main.ts');
+        if (!existsSync(join(storybookDir, 'preview.ts')))
+            missing.push('preview.ts');
+        if (missing.length > 0) {
+            return [{ name: '.storybook/', status: 'fail', message: `Missing: ${missing.join(', ')}`, fixable: true }];
+        }
+        return [{ name: '.storybook/', status: 'pass', message: 'main.ts and preview.ts present', fixable: false }];
+    },
+    fix(wsPath) {
+        const templateDir = join(templatesPath(), 'project', '.storybook');
+        const storybookDir = join(wsPath, '.storybook');
+        cpSync(templateDir, storybookDir, { recursive: true });
+    },
+};

package/dist/src/utils/doctor-checks/tsconfig.js

@@ -0,0 +1,25 @@
+import { execSync } from 'node:child_process';
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+export const tsconfigCheck = {
+    name: 'tsconfig.json',
+    run(wsPath) {
+        const path = join(wsPath, 'tsconfig.json');
+        if (!existsSync(path)) {
+            return [{ name: 'tsconfig.json', status: 'fail', message: 'File is missing. Create a tsconfig.json', fixable: false }];
+        }
+        try {
+            execSync('npx tsc --showConfig', { cwd: wsPath, stdio: 'pipe', timeout: 15_000 });
+        }
+        catch (err) {
+            const stderr = err instanceof Error && 'stderr' in err
+                ? String(err.stderr).trim()
+                : '';
+            if (stderr.includes('ENOENT') || stderr.includes('not found') || !stderr) {
+                return [{ name: 'tsconfig.json', status: 'warn', message: 'File exists but could not run tsc to validate. Ensure typescript is installed', fixable: false }];
+            }
+            return [{ name: 'tsconfig.json', status: 'fail', message: `Invalid config: ${stderr}`, fixable: false }];
+        }
+        return [{ name: 'tsconfig.json', status: 'pass', message: 'Valid configuration', fixable: false }];
+    },
+};

package/dist/src/utils/doctor-checks/vitest-config.js

@@ -0,0 +1,16 @@
+import { cpSync, existsSync } from 'node:fs';
+import { join } from 'node:path';
+import { templatesPath } from '../path-utils.js';
+export const vitestConfigCheck = {
+    name: 'vitest.config.ts',
+    run(wsPath) {
+        if (!existsSync(join(wsPath, 'vitest.config.ts'))) {
+            return [{ name: 'vitest.config.ts', status: 'fail', message: 'File is missing', fixable: true }];
+        }
+        return [{ name: 'vitest.config.ts', status: 'pass', message: 'File exists', fixable: false }];
+    },
+    fix(wsPath) {
+        const templateFile = join(templatesPath(), 'project', 'vitest.config.ts');
+        cpSync(templateFile, join(wsPath, 'vitest.config.ts'));
+    },
+};

package/dist/src/utils/doctor-checks.js

@@ -1,7 +1,7 @@
 import { execSync } from 'node:child_process';
 import { cpSync, existsSync, globSync, readFileSync, statSync, writeFileSync } from 'node:fs';
 import { basename, join } from 'node:path';
-import { authConfigJson, pluginJsonPath, pluginServerRoot, pluginServerTemplatesPath } from './path-utils.js';
+import { authConfigJson, pluginJsonPath, pluginServerRoot, pluginServerTemplatesPath, templatesPath } from './path-utils.js';
 import { getGeneratedComponentName } from './path-utils.js';
 // ── Check 0: node_modules ──────────────────────────────────────────────
 const nodeModulesCheck = {
@@ -164,7 +164,45 @@ const pluginsServerCheck = {
         cpSync(templateDir, serverDir, { recursive: true });
     },
 };
-// ── Check 5: Package alpha block ───────────────────────────────────────
+// ── Check 5: .storybook/ ───────────────────────────────────────────────
+const storybookCheck = {
+    name: '.storybook/',
+    run(wsPath) {
+        const storybookDir = join(wsPath, '.storybook');
+        if (!existsSync(storybookDir)) {
+            return [{ name: '.storybook/', status: 'fail', message: 'Directory is missing', fixable: true }];
+        }
+        const missing = [];
+        if (!existsSync(join(storybookDir, 'main.ts')))
+            missing.push('main.ts');
+        if (!existsSync(join(storybookDir, 'preview.ts')))
+            missing.push('preview.ts');
+        if (missing.length > 0) {
+            return [{ name: '.storybook/', status: 'fail', message: `Missing: ${missing.join(', ')}`, fixable: true }];
+        }
+        return [{ name: '.storybook/', status: 'pass', message: 'main.ts and preview.ts present', fixable: false }];
+    },
+    fix(wsPath) {
+        const templateDir = join(templatesPath(), 'project', '.storybook');
+        const storybookDir = join(wsPath, '.storybook');
+        cpSync(templateDir, storybookDir, { recursive: true });
+    },
+};
+// ── Check 6: vitest.config.ts ──────────────────────────────────────────
+const vitestConfigCheck = {
+    name: 'vitest.config.ts',
+    run(wsPath) {
+        if (!existsSync(join(wsPath, 'vitest.config.ts'))) {
+            return [{ name: 'vitest.config.ts', status: 'fail', message: 'File is missing', fixable: true }];
+        }
+        return [{ name: 'vitest.config.ts', status: 'pass', message: 'File exists', fixable: false }];
+    },
+    fix(wsPath) {
+        const templateFile = join(templatesPath(), 'project', 'vitest.config.ts');
+        cpSync(templateFile, join(wsPath, 'vitest.config.ts'));
+    },
+};
+// ── Check 7: Package alpha block ───────────────────────────────────────
 function getPackagesSafe(wsPath) {
     try {
         const packageJsonContent = readFileSync(join(wsPath, 'package.json'), 'utf-8');
@@ -349,6 +387,8 @@ export const checks = [
     rootPackageJsonCheck,
     tsconfigCheck,
     pluginsServerCheck,
+    storybookCheck,
+    vitestConfigCheck,
     packageAlphaBlockCheck,
     componentEntryFileCheck,
     nodeVersionCheck,

package/dist/src/utils/generate-component.js

@@ -45,8 +45,8 @@ const createStyles = (config) => {
     const template = handlebars.compile(readFileSync(join(componentTemplatesPath(), '.styles.ts.hbs'), 'utf-8'));
     return template(config);
 };
-const createTest = (config) => {
-    const template = handlebars.compile(readFileSync(join(componentTemplatesPath(), '.test.ts.hbs'), 'utf-8'));
+const createStory = (config) => {
+    const template = handlebars.compile(readFileSync(join(componentTemplatesPath(), '.stories.ts.hbs'), 'utf-8'));
     return template(config);
 };
 const appendToPublicAPIExports = (config) => {
@@ -69,6 +69,7 @@ const createComponentFiles = async (name, componentDirPath, wsPath) => {
     await Promise.all([
         writeFile(join(componentDirPath, `${componentSelector}.ts`), createTs(config), 'utf-8'),
         writeFile(join(componentDirPath, `${componentSelector}.styles.ts`), await prettify(createStyles(config), 'typescript'), 'utf-8'),
+        writeFile(join(componentDirPath, `${componentSelector}.stories.ts`), await prettify(createStory(config), 'typescript'), 'utf-8'),
     ]);
     const publicAPIPath = join(wsPath, './public-api.ts');
     const publicAPIContent = readFileSync(publicAPIPath, 'utf-8');

package/dist/src/utils/local-cli.js

@@ -0,0 +1,23 @@
+import { existsSync, realpathSync } from 'node:fs';
+import { join } from 'node:path';
+/**
+ * Resolves the workspace-local CLI binary path.
+ * Returns the resolved path if delegation should happen, or null if not.
+ *
+ * Delegation happens when:
+ *   1. A local neutrinos-cli binary exists in the workspace's node_modules
+ *   2. It resolves to a different path than the currently executing script
+ *
+ * Returns null when:
+ *   - No local binary exists (e.g., running `neutrinos new` outside a workspace)
+ *   - The local binary IS the current script (already running locally, prevents infinite recursion)
+ */
+export const resolveLocalCli = (workingDir, currentScriptPath) => {
+    const localCliEntry = join(workingDir, 'node_modules', 'neutrinos-cli', 'dist', 'src', 'bin', 'cli.js');
+    if (!existsSync(localCliEntry))
+        return null;
+    const localScript = realpathSync(localCliEntry);
+    if (currentScriptPath === localScript)
+        return null;
+    return localScript;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neutrinos-cli",
-    "version": "2.0.0-beta.3",
+    "version": "2.0.0-beta.4",
     "type": "module",
     "bin": {
         "neutrinos": "./dist/src/bin/cli.js"

package/templates/component/.stories.ts.hbs

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { expect, fn, userEvent } from 'storybook/test';
+import { html } from 'lit';
+import './{{componentSelector}}';
+
+const TAG = '{{componentSelectorPrefix}}-{{componentSelector}}-1\\.0\\.0';
+
+const meta: Meta = {
+    title: 'Components/{{componentLabel}}',
+    tags: ['autodocs'],
+    render: (args) =>
+        html`<{{componentSelectorPrefix}}-{{componentSelector}}-1.0.0
+            .value=${args.value}
+            ?disabled=${args.disabled}
+            ?readonly=${args.readonly}
+            @onIncrement=${args.onIncrement}
+            @onDecrement=${args.onDecrement}
+        ></{{componentSelectorPrefix}}-{{componentSelector}}-1.0.0>`,
+    argTypes: {
+        value: { control: 'number' },
+        disabled: { control: 'boolean' },
+        readonly: { control: 'boolean' },
+    },
+    args: {
+        value: 0,
+        disabled: false,
+        readonly: false,
+        onIncrement: fn(),
+        onDecrement: fn(),
+    },
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+    play: async ({ canvasElement, args }) => {
+        const el = canvasElement.querySelector(TAG)!;
+        const buttons = el.shadowRoot!.querySelectorAll('button');
+        const incrementBtn = buttons[0]!;
+        const decrementBtn = buttons[1]!;
+
+        await userEvent.click(incrementBtn);
+        await expect(args.onIncrement).toHaveBeenCalled();
+
+        await userEvent.click(decrementBtn);
+        await expect(args.onDecrement).toHaveBeenCalled();
+    },
+};
+
+export const Disabled: Story = {
+    args: { disabled: true },
+};

package/templates/project/.storybook/decorators/event-logger.ts

@@ -0,0 +1,153 @@
+/**
+ * Storybook decorator that intercepts alpha* and http-plugin* CustomEvents
+ * and renders a scrollable event log panel below the story.
+ *
+ * Enable per-story via `parameters.eventLogger: true` or globally in preview.ts.
+ */
+import { html, type TemplateResult } from 'lit';
+import type { DecoratorFunction } from 'storybook/internal/types';
+
+interface LogEntry {
+    time: string;
+    type: string;
+    detail: string;
+}
+
+const MAX_ENTRIES = 200;
+
+function createEventLogPanel(): { container: HTMLDivElement; append: (entry: LogEntry) => void; clear: () => void } {
+    const container = document.createElement('div');
+    container.className = 'event-logger-panel';
+    Object.assign(container.style, {
+        marginTop: '16px',
+        border: '1px solid #333',
+        borderRadius: '4px',
+        background: '#1e1e1e',
+        color: '#d4d4d4',
+        fontFamily: "'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace",
+        fontSize: '12px',
+        maxHeight: '240px',
+        overflowY: 'auto',
+        padding: '0',
+    });
+
+    // Header
+    const header = document.createElement('div');
+    Object.assign(header.style, {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: '6px 10px',
+        background: '#2d2d2d',
+        borderBottom: '1px solid #333',
+        position: 'sticky',
+        top: '0',
+    });
+    header.innerHTML = '<span style="font-weight:600;color:#569cd6">Event Log</span>';
+
+    const clearBtn = document.createElement('button');
+    clearBtn.textContent = 'Clear';
+    Object.assign(clearBtn.style, {
+        background: 'transparent',
+        border: '1px solid #555',
+        color: '#aaa',
+        borderRadius: '3px',
+        cursor: 'pointer',
+        padding: '2px 8px',
+        fontSize: '11px',
+    });
+    header.appendChild(clearBtn);
+    container.appendChild(header);
+
+    const logBody = document.createElement('div');
+    logBody.style.padding = '4px 0';
+    container.appendChild(logBody);
+
+    let entryCount = 0;
+
+    function append(entry: LogEntry) {
+        if (entryCount >= MAX_ENTRIES) {
+            logBody.firstChild?.remove();
+        } else {
+            entryCount++;
+        }
+
+        const row = document.createElement('div');
+        Object.assign(row.style, {
+            padding: '2px 10px',
+            borderBottom: '1px solid #2a2a2a',
+            display: 'flex',
+            gap: '10px',
+        });
+        row.innerHTML = `<span style="color:#6a9955;white-space:nowrap">${entry.time}</span><span style="color:#dcdcaa;min-width:180px">${entry.type}</span><span style="color:#ce9178;word-break:break-all">${entry.detail}</span>`;
+        logBody.appendChild(row);
+        container.scrollTop = container.scrollHeight;
+    }
+
+    function clear() {
+        logBody.innerHTML = '';
+        entryCount = 0;
+    }
+
+    clearBtn.addEventListener('click', clear);
+
+    return { container, append, clear };
+}
+
+export const eventLoggerDecorator: DecoratorFunction = (storyFn, context) => {
+    const enabled = context.parameters?.eventLogger !== false;
+    if (!enabled) return storyFn();
+
+    // Return a lit template that wraps the story and appends the log panel
+    const storyResult = storyFn() as TemplateResult;
+
+    // We need to use a connected callback approach since we need real DOM
+    const wrapper = document.createElement('div');
+
+    // Render story content placeholder
+    const storySlot = document.createElement('div');
+    wrapper.appendChild(storySlot);
+
+    const { container: logPanel, append } = createEventLogPanel();
+    wrapper.appendChild(logPanel);
+
+    const EVENT_PATTERN = /^(alpha|http-plugin)/;
+    const controller = new AbortController();
+
+    const listener = (e: Event) => {
+        if (EVENT_PATTERN.test(e.type)) {
+            const now = new Date();
+            const time = `${now.toLocaleTimeString()}.${String(now.getMilliseconds()).padStart(3, '0')}`;
+            let detail = '';
+            if (e instanceof CustomEvent && e.detail != null) {
+                try {
+                    detail = typeof e.detail === 'string' ? e.detail : JSON.stringify(e.detail, null, 0);
+                    if (detail.length > 300) detail = detail.slice(0, 300) + '…';
+                } catch {
+                    detail = String(e.detail);
+                }
+            }
+            append({ time, type: e.type, detail });
+        }
+    };
+
+    // Capture all events on window
+    const origDispatch = window.dispatchEvent.bind(window);
+    window.dispatchEvent = function (event: Event) {
+        listener(event);
+        return origDispatch(event);
+    };
+
+    // Cleanup when story unmounts
+    const observer = new MutationObserver(() => {
+        if (!document.contains(wrapper)) {
+            controller.abort();
+            window.dispatchEvent = origDispatch;
+            observer.disconnect();
+        }
+    });
+    // Start observing after a tick to let DOM settle
+    setTimeout(() => observer.observe(document.body, { childList: true, subtree: true }), 100);
+
+    return html`<div>${storyResult} ${logPanel}</div>`;
+};

package/templates/project/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+    stories: ['../packages/**/*.stories.ts'],
+    framework: '@storybook/web-components-vite',
+    addons: ['@storybook/addon-vitest'],
+    async viteFinal(config) {
+        return {
+            ...config,
+            esbuild: {
+                ...config.esbuild,
+                target: 'es2020',
+                keepNames: true,
+            },
+        };
+    },
+};
+
+export default config;

package/templates/project/.storybook/preview.ts

@@ -0,0 +1,12 @@
+import type { Preview } from '@storybook/web-components-vite';
+import { eventLoggerDecorator } from './decorators/event-logger';
+
+const preview: Preview = {
+    parameters: {
+        controls: { expanded: true },
+        eventLogger: true,
+    },
+    decorators: [eventLoggerDecorator],
+};
+
+export default preview;

package/templates/project/tsconfig.json

@@ -23,5 +23,5 @@
         "noUnusedParameters": true,
         "noFallthroughCasesInSwitch": true
     },
-    "include": ["packages", "index.ts"]
+    "include": ["packages"]
 }

package/templates/project/vitest.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vitest/config';
+import { playwright } from '@vitest/browser-playwright';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+
+export default defineConfig({
+    test: {
+        projects: [
+            {
+                plugins: [
+                    storybookTest({ configDir: import.meta.dirname + '/.storybook' }),
+                ],
+                test: {
+                    name: 'storybook',
+                    browser: {
+                        enabled: true,
+                        provider: playwright({}),
+                        headless: true,
+                        instances: [{ browser: 'chromium' }],
+                    },
+                },
+            },
+        ],
+    },
+});

package/templates/component/.spec.ts.hbs

@@ -1,15 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import { html } from 'lit';
-import './{{componentSelector}}';
-import { {{componentClassName}} } from './{{componentSelector}}';
-
-describe('alpha-hue', () => {
-    beforeEach(async () => {
-        // Things to do before each test
-    });
-
-    it('should render', async () => {
-        const element: Hue = await fixture(html\`<{{componentSelector}}></{{componentSelector}}>\`);
-        expect(element).shadowDom.to.equalSnapshot();
-    });
-});

package/templates/project/index.html

@@ -1,24 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Components</title>
-        <style alphaGlobalStyle>
-            /*
-                Global styles with alphaGlobalStyle directive. This will be available in all components.
-                example render output: html`<div class="small-1">Hello World</div>` 
-             */
-            .small-1 {
-                font-size: 12px;
-            }
-            .small-2 {
-                color: red;
-            }
-        </style>
-    </head>
-    <body style="padding: 1rem; box-sizing: border-box">
-        <div id="app"></div>
-        <script type="module" src="./index.ts"></script>
-    </body>
-</html>

package/templates/project/index.ts

@@ -1,86 +0,0 @@
-import * as _cs from './public-api.ts';
-declare global {
-    interface Window {
-        alpha: any;
-        ap: any;
-    }
-}
-
-const setup = () => {
-    const style = document.createElement('style');
-    document.querySelector('head')?.appendChild(style);
-};
-/**
- * Store all the component instances in globalThis.aci
- * for testing purposes
- */
-globalThis.aci = {} as any;
-const addComponent = (name: string, { inputs, outputs }: ComponentConfig) => {
-    const customElem = document.createElement(name) as any;
-    const fieldSet = document.createElement('fieldset');
-    const legend = document.createElement('legend');
-    legend.textContent = name;
-    fieldSet.appendChild(legend);
-    const key = name.slice('alpha'.length + 1);
-    (globalThis.aci[key] = globalThis.aci[key] || []).push(customElem);
-    for (let [key, val] of Object.entries(inputs || {})) {
-        customElem[key] = val;
-        const input = document.createElement('input');
-        input.type = 'text';
-        input.value = val;
-        input.placeholder = key;
-        input.addEventListener('change', (e) => {
-            customElem[key] = (e.target as any).value;
-        });
-        fieldSet.appendChild(input);
-    }
-    fieldSet.appendChild(customElem);
-    const outputEvents = outputs?.events || ['change'];
-    outputEvents.forEach((event) => {
-        customElem.addEventListener(event, (e: any) => {
-            console.log(`[${name}][event:${event}]`, e);
-        });
-    });
-    document.body.appendChild(fieldSet);
-};
-
-const components: Record<string, ComponentConfig> = (() => {
-    console.log(_cs);
-    const comps = {};
-    for (const [_, _class] of Object.entries(_cs)) {
-        const inputs = Reflect.getMetadata('AlphaAttribute', _class.prototype);
-        const c = Reflect.getMetadata('AlphaComponent', _class.prototype);
-        const selector = `${c.selector}-${c.componentVersion}`;
-        comps[selector] = {
-            inputs: inputs?.reduce((acc, { fieldMappings, defaultValue }) => {
-                acc[fieldMappings] = defaultValue ?? '';
-                return acc;
-            }, {}),
-            outputs: {
-                events: ['change'],
-            },
-        };
-    }
-    return comps;
-})();
-document.addEventListener('DOMContentLoaded', async () => {
-    setup();
-    for (let [name, config] of Object.entries(components)) {
-        addComponent(name, config);
-    }
-});
-
-interface ComponentConfig {
-    class?: string;
-    inputs?: {
-        disabled?: boolean;
-        readonly?: boolean;
-        value?: any;
-        name?: any;
-        id?: any;
-        [key: string]: any;
-    };
-    outputs?: {
-        events: string[];
-    };
-}