create-three-blocks-starter 0.0.11 → 0.0.13

package/bin/index.js

@@ -1042,7 +1042,7 @@ const promptTemplateSelection = async ( manifest ) => {
 					selected = ( selected - 1 + templates.length ) % templates.length;
 					render();
 
-				} else if ( ch === 'B' || ch === 'j' ) {
+				} else if ( ch === 'B' || ch === 'j' || ch === '\t' ) {
 
 					clearLines();
 					selected = ( selected + 1 ) % templates.length;
@@ -1167,6 +1167,8 @@ async function main() {
 		logInfo( bold( cyan( 'Available Templates' ) ) );
 		console.log( '' );
 		console.log( `  ${bold( 'starter' ).padEnd( 20 )} Base Three.js WebGPU template with PBF demo ${dim( '(default)' )}` );
+		console.log( `  ${bold( 'minimal' ).padEnd( 20 )} Clean rotating cube + grid starting point` );
+		console.log( `  ${bold( 'scroll' ).padEnd( 20 )} Smooth scroll website with magnet sections + keyboard` );
 		console.log( `  ${bold( 'game' ).padEnd( 20 )} Physics-driven scene with @three-blocks/pro` );
 		console.log( '' );
 		logInfo( dim( 'Usage: npx create-three-blocks-starter my-app --template game' ) );
@@ -1175,19 +1177,124 @@ async function main() {
 
 	}
 
+	// Early template selection (hardcoded, runs before package download)
+	const promptEarlyTemplateSelection = async () => {
+
+		const templates = [
+			{ name: 'starter', label: 'Starter (default)', description: 'Base Three.js WebGPU template with PBF demo' },
+			{ name: 'minimal', label: 'Minimal', description: 'Clean rotating cube + grid starting point' },
+			{ name: 'scroll', label: 'Scroll Website', description: 'Smooth scroll website with magnet sections' },
+			{ name: 'game', label: 'Game (Physics)', description: 'Physics-driven scene with @three-blocks/pro' }
+		];
+
+		console.log( '' );
+		logInfo( dim( 'Select a template:' ) );
+		console.log( '' );
+
+		return await new Promise( ( resolve ) => {
+
+			const stdin = process.stdin;
+			const stdout = process.stdout;
+			let selected = 0; // starter is default (index 0)
+
+			const cleanup = () => {
+
+				stdin.removeListener( 'data', onData );
+				if ( stdin.isTTY ) stdin.setRawMode( false );
+				stdin.pause();
+
+			};
+
+			const render = () => {
+
+				for ( let i = 0; i < templates.length; i ++ ) {
+
+					const t = templates[ i ];
+					const prefix = i === selected ? cyan( '› ' ) : '  ';
+					const label = i === selected ? bold( t.label ) : dim( t.label );
+					const desc = dim( ` - ${t.description}` );
+					stdout.write( `${prefix}${label}${desc}\n` );
+
+				}
+
+			};
+
+			const clearLines = () => {
+
+				for ( let i = 0; i < templates.length; i ++ ) {
+
+					readline.moveCursor( stdout, 0, - 1 );
+					readline.clearLine( stdout, 0 );
+
+				}
+
+			};
+
+			const onData = ( chunk ) => {
+
+				const str = String( chunk );
+				for ( const ch of str ) {
+
+					if ( ch === '\u0003' ) {
+
+						cleanup();
+						process.exit( 1 );
+
+					}
+
+					if ( ch === '\r' || ch === '\n' ) {
+
+						cleanup();
+						console.log( '' );
+						return resolve( templates[ selected ].name );
+
+					}
+
+					if ( ch === '\u001b' ) continue;
+					if ( ch === '[' ) continue;
+					if ( ch === 'A' || ch === 'k' ) {
+
+						clearLines();
+						selected = ( selected - 1 + templates.length ) % templates.length;
+						render();
+
+					} else if ( ch === 'B' || ch === 'j' || ch === '\t' ) {
+
+						clearLines();
+						selected = ( selected + 1 ) % templates.length;
+						render();
+
+					}
+
+				}
+
+			};
+
+			render();
+			stdin.setEncoding( 'utf8' );
+			if ( stdin.isTTY ) stdin.setRawMode( true );
+			stdin.resume();
+			stdin.on( 'data', onData );
+
+		} );
+
+	};
+
 	if ( ! appName ) {
 
 		die(
 			`Usage:\n` +
       `  npx create-three-blocks-starter <directory> [options]\n\n` +
       `Options:\n` +
-      `  --template, -t <name>   Use a specific template (starter, game)\n` +
+      `  --template, -t <name>   Use a specific template (starter, minimal, scroll, game)\n` +
       `  --list-templates        List available templates\n` +
       `  --channel, -c <channel> Release channel (stable|beta|alpha)\n` +
       `  --starter-path <path>   Use local starter path (for development)\n` +
       `  --debug, -d             Enable verbose logging\n\n` +
       `Examples:\n` +
       `  npx create-three-blocks-starter my-app\n` +
+      `  npx create-three-blocks-starter my-app --template minimal\n` +
+      `  npx create-three-blocks-starter my-app --template scroll\n` +
       `  npx create-three-blocks-starter my-app --template game`
 		);
 
@@ -1196,6 +1303,13 @@ async function main() {
 	const targetDir = path.resolve( process.cwd(), appName );
 	await ensureEmptyDir( targetDir );
 
+	// Early interactive template selection (before auth, if no --template specified)
+	if ( ! template && process.stdin.isTTY ) {
+
+		template = await promptEarlyTemplateSelection();
+
+	}
+
 	// Early exit for local development with --starter-path (skip auth entirely)
 	if ( starterPath ) {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-three-blocks-starter",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "private": false,
   "type": "module",
   "description": "Create a new Three Blocks starter app",