feat: add npm global package support to dashboard and config API

Author: fullstackjam

src/lib/presets.ts

@@ -1,6 +1,7 @@
 export interface PresetPackages {
 	cli: string[];
 	cask: string[];
+	npm?: string[];
 }
 
 export const PRESET_PACKAGES: Record<string, PresetPackages> = {
@@ -68,7 +69,8 @@ export const PRESET_PACKAGES: Record<string, PresetPackages> = {
 			'arc',
 			'postman',
 			'notion'
-		]
+		],
+		npm: ['typescript', 'tsx', 'eslint', 'prettier', 'nodemon']
 	},
 	full: {
 		cli: [
@@ -136,13 +138,14 @@ export const PRESET_PACKAGES: Record<string, PresetPackages> = {
 			'keka',
 			'aldente',
 			'rectangle'
-		]
+		],
+		npm: ['typescript', 'tsx', 'eslint', 'prettier', 'nodemon', 'pm2', 'serve', 'vercel', 'wrangler']
 	}
 };
 
 export function getPresetPackages(preset: string): string[] {
 	const p = PRESET_PACKAGES[preset];
-	return p ? [...p.cli, ...p.cask] : [];
+	return p ? [...p.cli, ...p.cask, ...(p.npm || [])] : [];
 }
 
 export const PRESET_NAMES = ['minimal', 'developer', 'full'] as const;

src/routes/[username]/[slug]/config/+server.ts

@@ -48,6 +48,7 @@ export const GET: RequestHandler = async ({ platform, params }) => {
 	const rawPackages: any[] = JSON.parse(config.packages || '[]');
 	const packageNames: string[] = [];
 	const caskNames: string[] = [];
+	const npmNames: string[] = [];
 
 	for (const pkg of rawPackages) {
 		if (typeof pkg === 'string') {
@@ -56,9 +57,13 @@ export const GET: RequestHandler = async ({ platform, params }) => {
 				caskNames.push(pkg);
 			}
 		} else {
-			packageNames.push(pkg.name);
-			if (pkg.type === 'cask') {
-				caskNames.push(pkg.name);
+			if (pkg.type === 'npm') {
+				npmNames.push(pkg.name);
+			} else {
+				packageNames.push(pkg.name);
+				if (pkg.type === 'cask') {
+					caskNames.push(pkg.name);
+				}
 			}
 		}
 	}
@@ -80,6 +85,7 @@ export const GET: RequestHandler = async ({ platform, params }) => {
 		packages: packageNames,
 		casks: caskNames,
 		taps: taps,
+		npm: npmNames,
 		dotfiles_repo: config.dotfiles_repo || ''
 	});
 };

src/routes/dashboard/+page.svelte

@@ -44,7 +44,7 @@
 	interface SearchResult {
 		name: string;
 		desc: string;
-		type: 'formula' | 'cask' | 'tap';
+		type: 'formula' | 'cask' | 'tap' | 'npm';
 	}
 
 	let selectedPackages = $state(new Map<string, string>());
@@ -116,24 +116,35 @@
 		return Array.from(selectedPackages.keys()).filter((pkg) => !presetPkgs.has(pkg));
 	}
 
-	function getGroupedPackages(): { cli: string[]; apps: string[] } {
+	function getGroupedPackages(): { cli: string[]; apps: string[]; npm: string[] } {
 		const cli: string[] = [];
 		const apps: string[] = [];
+		const npm: string[] = [];
 		for (const [pkg, t] of selectedPackages) {
 			if (t === 'cask') apps.push(pkg);
+			else if (t === 'npm') npm.push(pkg);
 			else cli.push(pkg);
 		}
-		return { cli, apps };
+		return { cli, apps, npm };
 	}
 
 
 
 	function initPackagesForPreset(preset: string) {
-		const presetPkgs = getPresetPackages(preset);
+		const p = PRESET_PACKAGES[preset];
+		if (!p) return;
 		const newMap = new Map<string, string>();
-		for (const pkg of presetPkgs) {
+		for (const pkg of p.cli) {
 			newMap.set(pkg, 'formula');
 		}
+		for (const pkg of p.cask) {
+			newMap.set(pkg, 'cask');
+		}
+		if (p.npm) {
+			for (const pkg of p.npm) {
+				newMap.set(pkg, 'npm');
+			}
+		}
 		selectedPackages = newMap;
 	}
 
@@ -574,6 +585,23 @@
 						{/if}
 					</div>
 				</div>
+
+				<div class="packages-group">
+					<div class="group-header">
+						<span class="group-label">NPM</span>
+						<span class="group-count">{grouped.npm.length}</span>
+					</div>
+					<div class="group-tags">
+						{#each grouped.npm as pkg}
+							<button type="button" class="pkg-tag" onclick={() => togglePackage(pkg, 'npm')}>
+								{pkg}<span class="remove-icon">×</span>
+							</button>
+						{/each}
+						{#if grouped.npm.length === 0}
+							<span class="group-empty">No npm packages</span>
+						{/if}
+					</div>
+				</div>
 				<div class="packages-search">
 					<input 
 						type="text"