@rokkit/cli 1.0.0-next.127 → 1.0.0-next.129

package/dist/src/doctor.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Run all doctor checks against the given filesystem adapter.
+ * @param {{ exists: (p: string) => boolean, read: (p: string) => string, resolve: (p: string) => string }} fs
+ * @returns {Array<{ id: string, label: string, status: 'pass'|'fail', fixable: boolean, fix: string, autoFix?: string }>}
+ */
+export function runChecks(fs: {
+    exists: (p: string) => boolean;
+    read: (p: string) => string;
+    resolve: (p: string) => string;
+}): Array<{
+    id: string;
+    label: string;
+    status: "pass" | "fail";
+    fixable: boolean;
+    fix: string;
+    autoFix?: string;
+}>;
+/**
+ * Interactive doctor command — validates project setup.
+ * @param {{ fix?: boolean }} [opts]
+ */
+export function doctor(opts?: {
+    fix?: boolean;
+}): Promise<void>;

package/dist/src/init.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Generate a Rokkit config object from user choices.
+ * @param {{ palette: string, customColors?: Record<string, string>, icons: string, iconPath?: string, themes: string[], switcher: string }} opts
+ * @returns {Record<string, unknown>}
+ */
+export function generateConfig({ palette, customColors, icons, iconPath, themes, switcher }: {
+    palette: string;
+    customColors?: Record<string, string>;
+    icons: string;
+    iconPath?: string;
+    themes: string[];
+    switcher: string;
+}): Record<string, unknown>;
+/**
+ * Generate the content for uno.config.js.
+ * @returns {string}
+ */
+export function generateUnoConfig(): string;
+/**
+ * Generate an array of CSS @import lines for app.css.
+ * @param {string[]} themes
+ * @returns {string[]}
+ */
+export function generateAppCssImports(themes: string[]): string[];
+/**
+ * Generate the flash-prevention script for app.html.
+ * Returns null when no script is needed (system switcher).
+ * @param {string} switcher — 'system' | 'manual' | 'full'
+ * @param {string} [storageKey='rokkit-theme']
+ * @returns {string | null}
+ */
+export function generateInitScript(switcher: string, storageKey?: string): string | null;
+/**
+ * Interactive init command — prompts the user, writes config files.
+ */
+export function init(): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/cli",
-  "version": "1.0.0-next.127",
+  "version": "1.0.0-next.129",
   "description": "Command line utilities for icon bundling and conversion.",
   "author": "Jerry Thomas <me@jerrythomas.name>",
   "license": "MIT",
@@ -25,6 +25,7 @@
     "sade": "^1.8.1",
     "@iconify/tools": "5.0.3",
     "@iconify/types": "^2.0.0",
+    "prompts": "^2.4.2",
     "ramda": "^0.32.0"
   },
   "files": [

package/src/doctor.js

@@ -0,0 +1,186 @@
+/* eslint-disable no-console */
+import { existsSync, readFileSync, writeFileSync } from 'fs'
+import { resolve } from 'path'
+import { generateUnoConfig, generateAppCssImports, generateInitScript } from './init.js'
+
+/**
+ * Run all doctor checks against the given filesystem adapter.
+ * @param {{ exists: (p: string) => boolean, read: (p: string) => string, resolve: (p: string) => string }} fs
+ * @returns {Array<{ id: string, label: string, status: 'pass'|'fail', fixable: boolean, fix: string, autoFix?: string }>}
+ */
+export function runChecks(fs) {
+	const checks = []
+
+	// 1. rokkit.config.js exists
+	const configExists = fs.exists(fs.resolve('rokkit.config.js'))
+	checks.push({
+		id: 'config-exists',
+		label: 'rokkit.config.js exists',
+		status: configExists ? 'pass' : 'fail',
+		fixable: true,
+		fix: 'Run `rokkit init` to generate config',
+		autoFix: 'generate-config'
+	})
+
+	// 2. uno.config.js uses presetRokkit
+	const unoPath = fs.resolve('uno.config.js')
+	const unoExists = fs.exists(unoPath)
+	let unoUsesPreset = false
+	if (unoExists) {
+		const unoContent = fs.read(unoPath)
+		unoUsesPreset = unoContent.includes('presetRokkit')
+	}
+	checks.push({
+		id: 'uno-uses-preset',
+		label: 'uno.config.js uses presetRokkit()',
+		status: unoUsesPreset ? 'pass' : 'fail',
+		fixable: false,
+		fix: unoExists
+			? `Replace uno.config.js contents with:\n${  generateUnoConfig()}`
+			: `Create uno.config.js with:\n${  generateUnoConfig()}`
+	})
+
+	// 3. app.css has theme imports
+	const cssPath = fs.resolve('src/app.css')
+	const cssExists = fs.exists(cssPath)
+	let cssHasBase = false
+	if (cssExists) {
+		const css = fs.read(cssPath)
+		cssHasBase = css.includes('@rokkit/themes/dist/base')
+	}
+	checks.push({
+		id: 'css-imports',
+		label: 'app.css has theme imports',
+		status: cssHasBase ? 'pass' : 'fail',
+		fixable: true,
+		fix: 'Append theme imports to src/app.css',
+		autoFix: 'patch-css'
+	})
+
+	// 4. app.html has init script
+	const htmlPath = fs.resolve('src/app.html')
+	const htmlExists = fs.exists(htmlPath)
+	let htmlHasScript = false
+	if (htmlExists) {
+		const html = fs.read(htmlPath)
+		htmlHasScript = html.includes('rokkit-theme') || html.includes('data-mode')
+	}
+	checks.push({
+		id: 'html-init-script',
+		label: 'app.html has theme init script',
+		status: htmlHasScript ? 'pass' : 'fail',
+		fixable: true,
+		fix: 'Add flash-prevention script to src/app.html',
+		autoFix: 'patch-html'
+	})
+
+	return checks
+}
+
+/**
+ * Create a real filesystem adapter rooted at cwd.
+ * @param {string} cwd
+ */
+function createFsAdapter(cwd) {
+	return {
+		exists: (p) => existsSync(p),
+		read: (p) => readFileSync(p, 'utf-8'),
+		resolve: (p) => resolve(cwd, p)
+	}
+}
+
+/**
+ * Auto-fix failed checks that are marked fixable.
+ * @param {Array<{ id: string, status: string, fixable: boolean, autoFix?: string }>} checks
+ * @param {string} cwd
+ * @returns {number} number of fixed items
+ */
+function autoFix(checks, cwd) {
+	let fixed = 0
+
+	for (const check of checks) {
+		if (check.status !== 'fail' || !check.fixable) continue
+
+		if (check.autoFix === 'generate-config') {
+			const configPath = resolve(cwd, 'rokkit.config.js')
+			writeFileSync(configPath, 'export default {}\n')
+			console.info(`  Fixed: ${check.label}`)
+			fixed++
+		}
+
+		if (check.autoFix === 'patch-css') {
+			const cssPath = resolve(cwd, 'src/app.css')
+			const imports = generateAppCssImports(['rokkit'])
+			if (existsSync(cssPath)) {
+				const existing = readFileSync(cssPath, 'utf-8')
+				const missing = imports.filter((line) => !existing.includes(line))
+				if (missing.length > 0) {
+					writeFileSync(cssPath, `${missing.join('\n')  }\n${  existing}`)
+				}
+			} else {
+				writeFileSync(cssPath, `${imports.join('\n')  }\n`)
+			}
+			console.info(`  Fixed: ${check.label}`)
+			fixed++
+		}
+
+		if (check.autoFix === 'patch-html') {
+			const htmlPath = resolve(cwd, 'src/app.html')
+			if (existsSync(htmlPath)) {
+				const html = readFileSync(htmlPath, 'utf-8')
+				const script = generateInitScript('manual', 'rokkit-theme')
+				if (script && !html.includes('rokkit-theme')) {
+					const patched = html.replace(/(<body[^>]*>)/, `$1\n${script}`)
+					writeFileSync(htmlPath, patched)
+					console.info(`  Fixed: ${check.label}`)
+					fixed++
+				}
+			}
+		}
+	}
+
+	return fixed
+}
+
+/**
+ * Interactive doctor command — validates project setup.
+ * @param {{ fix?: boolean }} [opts]
+ */
+export async function doctor(opts = {}) {
+	const cwd = process.cwd()
+	const fs = createFsAdapter(cwd)
+	const checks = runChecks(fs)
+
+	console.info('Rokkit Doctor\n')
+
+	let failures = 0
+	for (const check of checks) {
+		const icon = check.status === 'pass' ? 'PASS' : 'FAIL'
+		console.info(`  ${icon}  ${check.label}`)
+		if (check.status === 'fail') {
+			failures++
+			if (!opts.fix) {
+				console.info(`         ${check.fixable ? '(auto-fixable) ' : ''}${check.fix}`)
+			}
+		}
+	}
+
+	if (failures > 0 && opts.fix) {
+		console.info('\nAuto-fixing...\n')
+		const fixed = autoFix(checks, cwd)
+		const remaining = failures - fixed
+		if (remaining > 0) {
+			console.info(`\n${fixed} fixed, ${remaining} require manual action:`)
+			for (const check of checks) {
+				if (check.status === 'fail' && !check.fixable) {
+					console.info(`  - ${check.label}: ${check.fix}`)
+				}
+			}
+		} else {
+			console.info(`\nAll ${fixed} issues fixed!`)
+		}
+	}
+
+	console.info('')
+	process.exitCode = failures > 0 && !opts.fix ? 1 : 0
+}

package/src/index.js

@@ -53,4 +53,21 @@ prog
 		convertFolders(folders, config, opts)
 	})
 
+prog
+	.command('init')
+	.describe('Initialize Rokkit in an existing SvelteKit project')
+	.action(async (opts) => {
+		const { init } = await import('./init.js')
+		await init(opts)
+	})
+
+prog
+	.command('doctor')
+	.describe('Validate Rokkit project setup')
+	.option('--fix', 'Auto-fix safe issues')
+	.action(async (opts) => {
+		const { doctor } = await import('./doctor.js')
+		await doctor(opts)
+	})
+
 prog.parse(process.argv)

package/src/init.js

@@ -0,0 +1,254 @@
+/* eslint-disable no-console */
+import prompts from 'prompts'
+import { writeFileSync, readFileSync, existsSync } from 'fs'
+import { resolve } from 'path'
+
+const SKIN_PRESETS = {
+	default: { primary: 'orange', secondary: 'pink', accent: 'sky', surface: 'slate' },
+	vibrant: { primary: 'blue', secondary: 'purple', accent: 'sky', surface: 'slate' },
+	seaweed: {
+		primary: 'sky',
+		secondary: 'green',
+		accent: 'blue',
+		surface: 'zinc',
+		danger: 'rose',
+		error: 'rose',
+		success: 'lime',
+		warning: 'amber',
+		info: 'indigo'
+	}
+}
+
+const DEFAULT_COLORS = {
+	primary: 'orange',
+	secondary: 'pink',
+	accent: 'sky',
+	surface: 'slate',
+	success: 'green',
+	warning: 'yellow',
+	danger: 'red',
+	error: 'red',
+	info: 'cyan'
+}
+
+/**
+ * Generate a Rokkit config object from user choices.
+ * @param {{ palette: string, customColors?: Record<string, string>, icons: string, iconPath?: string, themes: string[], switcher: string }} opts
+ * @returns {Record<string, unknown>}
+ */
+export function generateConfig({ palette, customColors, icons, iconPath, themes, switcher }) {
+	const colors =
+		palette === 'custom'
+			? { ...DEFAULT_COLORS, ...customColors }
+			: { ...DEFAULT_COLORS, ...(SKIN_PRESETS[palette] || {}) }
+
+	const config = { colors, themes, switcher, storageKey: 'rokkit-theme' }
+
+	if (icons === 'custom' && iconPath) {
+		config.icons = { custom: iconPath }
+	}
+
+	return config
+}
+
+/**
+ * Generate the content for uno.config.js.
+ * @returns {string}
+ */
+export function generateUnoConfig() {
+	return `import { defineConfig } from 'unocss'
+import { presetRokkit } from '@rokkit/unocss'
+
+export default defineConfig({
+  presets: [presetRokkit()]
+})
+`
+}
+
+/**
+ * Generate an array of CSS @import lines for app.css.
+ * @param {string[]} themes
+ * @returns {string[]}
+ */
+export function generateAppCssImports(themes) {
+	const lines = [
+		"@import '@unocss/reset/tailwind.css';",
+		"@import '@rokkit/themes/dist/base';"
+	]
+	for (const theme of themes) {
+		lines.push(`@import '@rokkit/themes/dist/${theme}';`)
+	}
+	return lines
+}
+
+/**
+ * Generate the flash-prevention script for app.html.
+ * Returns null when no script is needed (system switcher).
+ * @param {string} switcher — 'system' | 'manual' | 'full'
+ * @param {string} [storageKey='rokkit-theme']
+ * @returns {string | null}
+ */
+export function generateInitScript(switcher, storageKey = 'rokkit-theme') {
+	if (switcher === 'system') return null
+
+	const setStyle =
+		switcher === 'full'
+			? `b.dataset.style = t.style || 'rokkit'\n          `
+			: ''
+
+	return `    <script>
+      (function () {
+        try {
+          var t = JSON.parse(localStorage.getItem('${storageKey}') || '{}')
+          var b = document.body
+          ${setStyle}b.dataset.mode = t.mode || 'dark'
+        } catch (e) {}
+      })()
+    </script>`
+}
+
+/**
+ * Interactive init command — prompts the user, writes config files.
+ */
+export async function init() {
+	console.info('Rokkit Init — Setting up your SvelteKit project\n')
+
+	const response = await prompts([
+		{
+			type: 'select',
+			name: 'palette',
+			message: 'Color palette',
+			choices: [
+				{ title: 'Default (orange/pink/sky)', value: 'default' },
+				{ title: 'Vibrant (blue/purple/sky)', value: 'vibrant' },
+				{ title: 'Seaweed (sky/green/blue)', value: 'seaweed' },
+				{ title: 'Custom', value: 'custom' }
+			]
+		},
+		{
+			type: (prev) => (prev === 'custom' ? 'text' : null),
+			name: 'primary',
+			message: 'Primary color (Tailwind palette name)',
+			initial: 'orange'
+		},
+		{
+			type: (_, values) => (values.palette === 'custom' ? 'text' : null),
+			name: 'secondary',
+			message: 'Secondary color',
+			initial: 'pink'
+		},
+		{
+			type: (_, values) => (values.palette === 'custom' ? 'text' : null),
+			name: 'accent',
+			message: 'Accent color',
+			initial: 'sky'
+		},
+		{
+			type: (_, values) => (values.palette === 'custom' ? 'text' : null),
+			name: 'surface',
+			message: 'Surface color',
+			initial: 'slate'
+		},
+		{
+			type: 'select',
+			name: 'icons',
+			message: 'Icon collections',
+			choices: [
+				{ title: 'Rokkit icons only', value: 'rokkit' },
+				{ title: 'Rokkit + custom collection', value: 'custom' }
+			]
+		},
+		{
+			type: (prev) => (prev === 'custom' ? 'text' : null),
+			name: 'iconPath',
+			message: 'Path to custom icon collection JSON',
+			initial: './static/icons/custom.json'
+		},
+		{
+			type: 'multiselect',
+			name: 'themes',
+			message: 'Theme styles',
+			choices: [
+				{ title: 'Rokkit', value: 'rokkit', selected: true },
+				{ title: 'Minimal', value: 'minimal' },
+				{ title: 'Material', value: 'material' }
+			],
+			min: 1
+		},
+		{
+			type: 'select',
+			name: 'switcher',
+			message: 'Theme switching',
+			choices: [
+				{ title: 'System only (prefers-color-scheme)', value: 'system' },
+				{ title: 'Manual (light/dark toggle)', value: 'manual' },
+				{ title: 'Full (light/dark + style variants)', value: 'full' }
+			]
+		}
+	])
+
+	if (response.palette === 'custom') {
+		response.customColors = {
+			primary: response.primary,
+			secondary: response.secondary,
+			accent: response.accent,
+			surface: response.surface
+		}
+	}
+
+	const config = generateConfig(response)
+	const cwd = process.cwd()
+
+	// --- rokkit.config.js ---
+	const configPath = resolve(cwd, 'rokkit.config.js')
+	if (existsSync(configPath)) {
+		console.warn('  rokkit.config.js already exists — skipping')
+	} else {
+		writeFileSync(configPath, `export default ${JSON.stringify(config, null, 2)}\n`)
+		console.info('  Created rokkit.config.js')
+	}
+
+	// --- uno.config.js ---
+	const unoPath = resolve(cwd, 'uno.config.js')
+	if (existsSync(unoPath)) {
+		console.warn('  uno.config.js already exists — skipping (see rokkit doctor for migration)')
+	} else {
+		writeFileSync(unoPath, generateUnoConfig())
+		console.info('  Created uno.config.js')
+	}
+
+	// --- src/app.css ---
+	const appCssPath = resolve(cwd, 'src/app.css')
+	const cssImports = generateAppCssImports(config.themes)
+	if (existsSync(appCssPath)) {
+		const existing = readFileSync(appCssPath, 'utf-8')
+		const missing = cssImports.filter((line) => !existing.includes(line))
+		if (missing.length > 0) {
+			writeFileSync(appCssPath, `${missing.join('\n')  }\n${  existing}`)
+			console.info(`  Patched app.css — added ${missing.length} imports`)
+		} else {
+			console.info('  app.css already has theme imports')
+		}
+	} else {
+		writeFileSync(appCssPath, `${cssImports.join('\n')  }\n`)
+		console.info('  Created src/app.css')
+	}
+
+	// --- src/app.html (theme init script) ---
+	const initScript = generateInitScript(config.switcher, config.storageKey)
+	if (initScript) {
+		const appHtmlPath = resolve(cwd, 'src/app.html')
+		if (existsSync(appHtmlPath)) {
+			const html = readFileSync(appHtmlPath, 'utf-8')
+			if (!html.includes('rokkit-theme') && !html.includes(config.storageKey)) {
+				const patched = html.replace(/(<body[^>]*>)/, `$1\n${initScript}`)
+				writeFileSync(appHtmlPath, patched)
+				console.info('  Patched app.html — added theme init script')
+			} else {
+				console.info('  app.html already has init script')
+			}
+		}
+	}
+
+	console.info('\nDone! Run `rokkit doctor` to verify your setup.')
+}