@rokkit/cli 1.0.0-next.147 → 1.0.0-next.148

package/dist/src/config.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Load rokkit.config.js using injected adapter or real filesystem.
+ * Returns null (not an error) if config is absent or fails to load.
+ * @param {{ readConfig?: () => Record<string, unknown>, cwd?: string }} adapters
+ * @returns {Promise<Record<string, unknown> | null>}
+ */
+export function loadConfig(adapters: {
+    readConfig?: () => Record<string, unknown>;
+    cwd?: string;
+}): Promise<Record<string, unknown> | null>;

package/dist/src/convert.d.ts

@@ -50,7 +50,7 @@ export function getFolderNames(dir: string): string[];
  */
 export function bundleFolders(folders: string[], config: import("./types").IconBuilderOptions, opts: import("./types").FolderOptions): void;
 /**
- * Converts a folder of icons into an icon bundle
+ * Converts a folder of icons into individual SVG files
  * @param {string[]}                             folders
  * @param {import('./types').IconBuilderOptions} config
  * @param {import('./types').FolderOptions}      opts

package/dist/src/init.d.ts

@@ -3,7 +3,7 @@
  * @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 }: {
+export function generateConfig({ palette, customColors, icons, iconPath, themes, defaultTheme, switcher }: {
     palette: string;
     customColors?: Record<string, string>;
     icons: string;
@@ -29,7 +29,7 @@ export function generateAppCssImports(themes: string[]): string[];
  * @param {string} [storageKey='rokkit-theme']
  * @returns {string | null}
  */
-export function generateInitScript(switcher: string, storageKey?: string): string | null;
+export function generateInitScript(switcher: string, storageKey?: string, defaultStyle?: string): string | null;
 /**
  * Interactive init command — prompts the user, writes config files.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/cli",
-  "version": "1.0.0-next.147",
+  "version": "1.0.0-next.148",
   "description": "Command line utilities for icon bundling and conversion.",
   "repository": {
     "type": "git",

package/src/config.js

@@ -0,0 +1,23 @@
+import { existsSync } from 'fs'
+import { resolve } from 'path'
+
+/**
+ * Load rokkit.config.js using injected adapter or real filesystem.
+ * Returns null (not an error) if config is absent or fails to load.
+ * @param {{ readConfig?: () => Record<string, unknown>, cwd?: string }} adapters
+ * @returns {Promise<Record<string, unknown> | null>}
+ */
+export async function loadConfig(adapters) {
+	if (adapters.readConfig) return adapters.readConfig()
+
+	const cwd = adapters.cwd ?? process.cwd()
+	const configPath = resolve(cwd, 'rokkit.config.js')
+	if (!existsSync(configPath)) return null
+
+	try {
+		const { default: config } = await import(`file://${configPath}?t=${Date.now()}`)
+		return config
+	} catch {
+		return null
+	}
+}

package/src/convert.js

@@ -172,40 +172,39 @@ export function getFolderNames(dir) {
 	}
 }
 
+function folderOpts(folder, config, opts, extra) {
+	const folderConfig = config.bundles?.[folder] || {}
+	return { target: opts.output, color: folderConfig.color || false, prefix: folder, ...extra }
+}
+
 /**
- * Converts a folder of icons into an icon bundle
  * @param {string[]} folders
  * @param {import('./types').IconBuilderOptions} config
- * @param {import('./types').FolderOptions}      opts
+ * @param {import('./types').FolderOptions} opts
+ * @param {{ fn: Function, extra?: Record<string, unknown> }} processor
  */
-export function bundleFolders(folders, config, opts) {
+function processFolders(folders, config, opts, { fn, extra = {} }) {
 	for (const folder of folders) {
-		const folderPath = path.join(opts.input, folder)
-		const folderConfig = config.bundles?.[folder] || {}
-
-		bundle(folderPath, {
-			target: opts.output,
-			color: folderConfig.color || false,
-			prefix: folder
-		})
+		fn(path.join(opts.input, folder), folderOpts(folder, config, opts, extra))
 	}
 }
+
 /**
  * Converts a folder of icons into an icon bundle
+ * @param {string[]} folders
+ * @param {import('./types').IconBuilderOptions} config
+ * @param {import('./types').FolderOptions}      opts
+ */
+export function bundleFolders(folders, config, opts) {
+	processFolders(folders, config, opts, { fn: bundle })
+}
+
+/**
+ * Converts a folder of icons into individual SVG files
  * @param {string[]}                             folders
  * @param {import('./types').IconBuilderOptions} config
  * @param {import('./types').FolderOptions}      opts
  */
 export function convertFolders(folders, config, opts) {
-	for (const folder of folders) {
-		const folderPath = path.join(opts.input, folder)
-		const folderConfig = config.bundles[folder] || {}
-
-		convert(folderPath, {
-			target: opts.output,
-			color: folderConfig.color || false,
-			prefix: folder,
-			package: config.package || {}
-		})
-	}
+	processFolders(folders, config, opts, { fn: convert, extra: { package: config.package || {} } })
 }

package/src/doctor.js

@@ -3,6 +3,11 @@ import { existsSync, readFileSync, writeFileSync } from 'fs'
 import { resolve } from 'path'
 import { generateUnoConfig, generateAppCssImports, generateInitScript } from './init.js'
 
+const KNOWN_THEMES = [
+  'rokkit', 'minimal', 'material', 'glass', 'grada-ui',
+  'shadcn', 'daisy-ui', 'bits-ui', 'carbon', 'ant-design'
+]
+
 /**
  * Check config file existence
  * @param {Object} fs
@@ -28,10 +33,11 @@ function checkConfig(fs) {
 function checkUnoPreset(fs) {
 	const unoPath = fs.resolve('uno.config.js')
 	const unoExists = fs.exists(unoPath)
-	const unoUsesPreset = unoExists && fs.read(unoPath).includes('presetRokkit')
+	const unoContent = unoExists ? fs.read(unoPath) : ''
+	const unoUsesPreset = unoContent.includes('presetRokkit') && unoContent.includes('rokkit.config')
 	return {
 		id: 'uno-uses-preset',
-		label: 'uno.config.js uses presetRokkit()',
+		label: 'uno.config.js uses presetRokkit(config)',
 		status: unoUsesPreset ? 'pass' : 'fail',
 		fixable: false,
 		fix: unoExists
@@ -48,17 +54,36 @@ function checkUnoPreset(fs) {
 function checkCssImports(fs) {
 	const cssPath = fs.resolve('src/app.css')
 	const cssExists = fs.exists(cssPath)
-	const cssHasBase = cssExists && fs.read(cssPath).includes('@rokkit/themes/dist/base')
+	const cssHasBase = cssExists && fs.read(cssPath).includes('@rokkit/themes/base.css')
 	return {
 		id: 'css-imports',
-		label: 'app.css has theme imports',
+		label: 'app.css imports @rokkit/themes/base.css',
 		status: cssHasBase ? 'pass' : 'fail',
 		fixable: true,
-		fix: 'Append theme imports to src/app.css',
+		fix: 'Append base theme import to src/app.css',
 		autoFix: 'patch-css'
 	}
 }
 
+/**
+ * Check app.css has at least one theme style
+ * @param {Object} fs
+ * @returns {Object}
+ */
+function checkCssTheme(fs) {
+	const cssPath = fs.resolve('src/app.css')
+	const cssExists = fs.exists(cssPath)
+	const css = cssExists ? fs.read(cssPath) : ''
+	const hasTheme = KNOWN_THEMES.some((t) => css.includes(`@rokkit/themes/${t}.css`))
+	return {
+		id: 'css-theme',
+		label: 'app.css has a theme style',
+		status: hasTheme ? 'pass' : 'warn',
+		fixable: false,
+		fix: `Add a theme import to src/app.css, e.g. @import '@rokkit/themes/rokkit.css'\n         Available: ${KNOWN_THEMES.join(', ')}, or use a custom theme`
+	}
+}
+
 /**
  * Check app.html has init script
  * @param {Object} fs
@@ -86,7 +111,7 @@ function checkHtmlScript(fs) {
  * @returns {Array<{ id: string, label: string, status: 'pass'|'fail', fixable: boolean, fix: string, autoFix?: string }>}
  */
 export function runChecks(fs) {
-	return [checkConfig(fs), checkUnoPreset(fs), checkCssImports(fs), checkHtmlScript(fs)]
+	return [checkConfig(fs), checkUnoPreset(fs), checkCssImports(fs), checkCssTheme(fs), checkHtmlScript(fs)]
 }
 
 /**
@@ -119,7 +144,7 @@ function applyGenerateConfig(cwd, label) {
  */
 function applyPatchCss(cwd, label) {
 	const cssPath = resolve(cwd, 'src/app.css')
-	const imports = generateAppCssImports(['rokkit'])
+	const imports = generateAppCssImports([])
 	if (existsSync(cssPath)) {
 		const existing = readFileSync(cssPath, 'utf-8')
 		const missing = imports.filter((line) => !existing.includes(line))
@@ -189,7 +214,7 @@ function autoFix(checks, cwd) {
  */
 function printFixHints(checks) {
 	for (const check of checks) {
-		if (check.status === 'fail') {
+		if (check.status === 'fail' || check.status === 'warn') {
 			console.info(`         ${check.fixable ? '(auto-fixable) ' : ''}${check.fix}`)
 		}
 	}
@@ -215,7 +240,7 @@ function printManualItems(checks) {
 function printChecks(checks) {
 	let failures = 0
 	for (const check of checks) {
-		const icon = check.status === 'pass' ? 'PASS' : 'FAIL'
+		const icon = check.status === 'pass' ? 'PASS' : check.status === 'warn' ? 'WARN' : 'FAIL'
 		console.info(`  ${icon}  ${check.label}`)
 		if (check.status === 'fail') failures++
 	}

package/src/init.js

@@ -36,13 +36,19 @@ const DEFAULT_COLORS = {
  * @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 }) {
+export function generateConfig({ palette, customColors, icons, iconPath, themes, defaultTheme, switcher }) {
 	const colors =
 		palette === 'custom'
 			? { ...DEFAULT_COLORS, ...customColors }
 			: { ...DEFAULT_COLORS, ...(SKIN_PRESETS[palette] || {}) }
 
-	const config = { colors, themes, switcher, storageKey: 'rokkit-theme' }
+	const config = {
+		colors,
+		themes,
+		defaultTheme: defaultTheme || themes[0],
+		switcher,
+		storageKey: 'rokkit-theme'
+	}
 
 	if (icons === 'custom' && iconPath) {
 		config.icons = { custom: iconPath }
@@ -58,9 +64,10 @@ export function generateConfig({ palette, customColors, icons, iconPath, themes,
 export function generateUnoConfig() {
 	return `import { defineConfig } from 'unocss'
 import { presetRokkit } from '@rokkit/unocss'
+import config from './rokkit.config.js'
 
 export default defineConfig({
-  presets: [presetRokkit()]
+  presets: [presetRokkit(config)]
 })
 `
 }
@@ -71,9 +78,9 @@ export default defineConfig({
  * @returns {string[]}
  */
 export function generateAppCssImports(themes) {
-	const lines = ["@import '@unocss/reset/tailwind.css';", "@import '@rokkit/themes/dist/base';"]
+	const lines = ["@import '@unocss/reset/tailwind.css';", "@import '@rokkit/themes/base.css';"]
 	for (const theme of themes) {
-		lines.push(`@import '@rokkit/themes/dist/${theme}';`)
+		lines.push(`@import '@rokkit/themes/${theme}.css';`)
 	}
 	return lines
 }
@@ -85,10 +92,10 @@ export function generateAppCssImports(themes) {
  * @param {string} [storageKey='rokkit-theme']
  * @returns {string | null}
  */
-export function generateInitScript(switcher, storageKey = 'rokkit-theme') {
+export function generateInitScript(switcher, storageKey = 'rokkit-theme', defaultStyle = 'rokkit') {
 	if (switcher === 'system') return null
 
-	const setStyle = switcher === 'full' ? `b.dataset.style = t.style || 'rokkit'\n          ` : ''
+	const setStyle = switcher === 'full' ? `b.dataset.style = t.style || '${defaultStyle}'\n          ` : ''
 
 	return `    <script>
       (function () {
@@ -159,10 +166,23 @@ const PROMPTS_CONFIG = [
 		choices: [
 			{ title: 'Rokkit', value: 'rokkit', selected: true },
 			{ title: 'Minimal', value: 'minimal' },
-			{ title: 'Material', value: 'material' }
+			{ title: 'Material', value: 'material' },
+			{ title: 'Glass', value: 'glass' },
+			{ title: 'Grada UI', value: 'grada-ui' },
+			{ value: 'shadcn', title: 'shadcn', hint: 'flat borders + ring focus' },
+			{ value: 'daisy-ui', title: 'daisy-ui', hint: 'rounded-full + bold fills' },
+			{ value: 'bits-ui', title: 'bits-ui', hint: 'rounded-lg + polished' },
+			{ value: 'carbon', title: 'carbon', hint: 'square edges + enterprise' },
+			{ value: 'ant-design', title: 'ant-design', hint: 'thin borders + dense' }
 		],
 		min: 1
 	},
+	{
+		type: (prev) => (prev?.length > 1 ? 'select' : null),
+		name: 'defaultTheme',
+		message: 'Default theme style',
+		choices: (prev) => prev.map((t) => ({ title: t.charAt(0).toUpperCase() + t.slice(1), value: t }))
+	},
 	{
 		type: 'select',
 		name: 'switcher',
@@ -269,7 +289,7 @@ export async function init() {
 	writeUnoConfig(cwd)
 	writeAppCss(cwd, generateAppCssImports(config.themes))
 
-	const initScript = generateInitScript(config.switcher, config.storageKey)
+	const initScript = generateInitScript(config.switcher, config.storageKey, config.defaultTheme)
 	if (initScript) writeAppHtml(cwd, initScript, config.storageKey)
 
 	console.info('\nDone! Run `rokkit doctor` to verify your setup.')

package/src/skin.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
-import { writeFileSync, existsSync } from 'fs'
+import { writeFileSync } from 'fs'
 import { resolve } from 'path'
+import { loadConfig } from './config.js'
 
 const SKIN_TOKEN_DEFAULTS = {
 	primary: 'orange',
@@ -54,7 +55,10 @@ export function serializeConfig(config) {
  */
 export async function runSkinList(adapters = {}) {
 	const config = await loadConfig(adapters)
-	if (!config) return
+	if (!config) {
+		console.error('rokkit.config.js not found. Run `rokkit init` first.')
+		return
+	}
 	const skins = config.skins ?? {}
 	const names = Object.keys(skins)
 	if (names.length === 0) {
@@ -87,7 +91,10 @@ export async function runSkinCreate(name, adapters = {}) {
 	}
 
 	const config = await loadConfig(adapters)
-	if (!config) return
+	if (!config) {
+		console.error('rokkit.config.js not found. Run `rokkit init` first.')
+		return
+	}
 
 	if (config.skins?.[name]) {
 		console.warn(`Skin "${name}" already exists in rokkit.config.js.`)
@@ -104,25 +111,6 @@ export async function runSkinCreate(name, adapters = {}) {
 	)
 }
 
-/**
- * Load rokkit.config.js using injected adapter or real filesystem.
- * @param {{ readConfig?: () => Record<string, unknown>, cwd?: string }} adapters
- * @returns {Promise<Record<string, unknown> | null>}
- */
-async function loadConfig(adapters) {
-	if (adapters.readConfig) return adapters.readConfig()
-
-	const cwd = adapters.cwd ?? process.cwd()
-	const configPath = resolve(cwd, 'rokkit.config.js')
-	if (!existsSync(configPath)) {
-		console.error('rokkit.config.js not found. Run `rokkit init` first.')
-		return null
-	}
-
-	const { default: config } = await import(`file://${configPath}?t=${Date.now()}`)
-	return config
-}
-
 /**
  * Write updated config using injected adapter or real filesystem.
  * @param {Record<string, unknown>} config

package/src/theme.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { writeFileSync, existsSync, mkdirSync, readdirSync } from 'fs'
 import { resolve, join } from 'path'
+import { loadConfig } from './config.js'
 
 /**
  * All component names that ship with Rokkit — one CSS block will be generated for each.
@@ -128,26 +129,6 @@ export async function runThemeCreate(name, adapters = {}) {
 	)
 }
 
-/**
- * Load rokkit.config.js using injected adapter or real filesystem.
- * Returns null (not an error) if config is absent — theme list can still show custom files.
- * @param {{ readConfig?: () => Record<string, unknown>, cwd?: string }} adapters
- */
-async function loadConfig(adapters) {
-	if (adapters.readConfig) return adapters.readConfig()
-
-	const cwd = adapters.cwd ?? process.cwd()
-	const configPath = resolve(cwd, 'rokkit.config.js')
-	if (!existsSync(configPath)) return null
-
-	try {
-		const { default: config } = await import(`file://${configPath}?t=${Date.now()}`)
-		return config
-	} catch {
-		return null
-	}
-}
-
 /**
  * CLI entry point for `rokkit theme` subcommands.
  * @param {string} sub — 'list' | 'create'