@mohammad-irfan/create-dashboard-kit 1.0.0

package/dist/generator.js

@@ -0,0 +1,223 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { validateProjectName } from './validation.js';
+import { ensureDir, writeTemplateFile, copyDirRecursive, } from './templateEngine.js';
+import { buildDashboardConfigFile, buildTokensCssFile, buildIndexHtml, buildLogoSvg, buildAppTsx, buildPackageJson, buildProjectReadme, } from './configBuilder.js';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+/**
+ * Finds the source directory containing the generic dashboard starter kit components.
+ */
+export function resolveStarterKitSrc() {
+    const candidates = [
+        path.resolve(__dirname, '../templates/source'),
+        path.resolve(__dirname, '../../dashboard-starter-kit/src'),
+        path.resolve(process.cwd(), 'dashboard-starter-kit/src'),
+    ];
+    for (const candidate of candidates) {
+        if (fs.existsSync(candidate) && fs.existsSync(path.join(candidate, 'components/layout/AppShell.tsx'))) {
+            return candidate;
+        }
+    }
+    throw new Error('Unable to locate dashboard-starter-kit/src directory.');
+}
+export function generateProject(options) {
+    const validation = validateProjectName(options.projectName, options.targetDir, options.force);
+    if (!validation.valid) {
+        throw new Error(validation.error || 'Invalid project name.');
+    }
+    const starterSrc = resolveStarterKitSrc();
+    const targetDir = path.resolve(options.targetDir);
+    ensureDir(targetDir);
+    // 1. Generate package.json & Vite / TS configs
+    writeTemplateFile(targetDir, 'package.json', buildPackageJson(options));
+    writeTemplateFile(targetDir, 'README.md', buildProjectReadme(options));
+    writeTemplateFile(targetDir, 'index.html', buildIndexHtml(options));
+    const viteConfigContent = `import tailwindcss from '@tailwindcss/vite'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})
+`;
+    writeTemplateFile(targetDir, 'vite.config.ts', viteConfigContent);
+    const tsconfigRootContent = `{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
+`;
+    writeTemplateFile(targetDir, 'tsconfig.json', tsconfigRootContent);
+    const tsconfigAppContent = `{
+  "compilerOptions": {
+    "target": "es2023",
+    "lib": ["ES2023", "DOM"],
+    "module": "esnext",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "exclude": ["src/**/*.test.ts"]
+}
+`;
+    writeTemplateFile(targetDir, 'tsconfig.app.json', tsconfigAppContent);
+    const tsconfigNodeContent = `{
+  "compilerOptions": {
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
+`;
+    writeTemplateFile(targetDir, 'tsconfig.node.json', tsconfigNodeContent);
+    // 2. Generate Public Assets
+    writeTemplateFile(targetDir, 'public/assets/logo.svg', buildLogoSvg(options));
+    // 3. Copy Generic Components from Starter Kit
+    const componentsToCopy = [
+        'controls',
+        'feedback',
+        'icons',
+        'layout',
+        'metrics',
+        'navigation',
+        'surfaces',
+    ];
+    for (const compDir of componentsToCopy) {
+        const srcCompDir = path.join(starterSrc, 'components', compDir);
+        const destCompDir = path.join(targetDir, 'src', 'components', compDir);
+        copyDirRecursive(srcCompDir, destCompDir);
+    }
+    // 4. Copy Design System Files & Generate tokens.css
+    const destDesignDir = path.join(targetDir, 'src', 'design-system');
+    ensureDir(destDesignDir);
+    fs.copyFileSync(path.join(starterSrc, 'design-system', 'typography.css'), path.join(destDesignDir, 'typography.css'));
+    fs.copyFileSync(path.join(starterSrc, 'design-system', 'animations.css'), path.join(destDesignDir, 'animations.css'));
+    writeTemplateFile(targetDir, 'src/design-system/tokens.css', buildTokensCssFile(options));
+    // 5. Copy Theme System
+    const destThemeDir = path.join(targetDir, 'src', 'theme');
+    ensureDir(destThemeDir);
+    fs.copyFileSync(path.join(starterSrc, 'theme', 'ThemeContext.tsx'), path.join(destThemeDir, 'ThemeContext.tsx'));
+    fs.copyFileSync(path.join(starterSrc, 'theme', 'useTheme.ts'), path.join(destThemeDir, 'useTheme.ts'));
+    // 6. Generate Centralized dashboard.config.ts
+    writeTemplateFile(targetDir, 'src/config/dashboard.config.ts', buildDashboardConfigFile(options));
+    // 7. Generate src/index.css
+    const indexCssContent = `@import "tailwindcss";
+
+@import "./design-system/tokens.css";
+@import "./design-system/typography.css";
+@import "./design-system/animations.css";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-surface: var(--surface);
+  --color-surface-elevated: var(--surface-elevated);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-canvas: var(--canvas-background);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-ring: var(--ring);
+
+  --color-success: var(--success);
+  --color-success-fg: var(--success-fg);
+  --color-success-bg: var(--success-bg);
+
+  --color-warning: var(--warning);
+  --color-warning-fg: var(--warning-fg);
+  --color-warning-bg: var(--warning-bg);
+
+  --color-danger: var(--danger);
+  --color-danger-fg: var(--danger-fg);
+  --color-danger-bg: var(--danger-bg);
+
+  --color-info: var(--info);
+  --color-info-fg: var(--info-fg);
+  --color-info-bg: var(--info-bg);
+}
+`;
+    writeTemplateFile(targetDir, 'src/index.css', indexCssContent);
+    // 8. Generate src/main.tsx
+    const mainTsxContent = `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
+`;
+    writeTemplateFile(targetDir, 'src/main.tsx', mainTsxContent);
+    // 9. Generate src/App.tsx
+    writeTemplateFile(targetDir, 'src/App.tsx', buildAppTsx(options));
+    // 10. Generate src/index.ts (barrel exports for consumer)
+    const barrelContent = `export * from './components/layout/AppShell.tsx'
+export * from './components/layout/Header.tsx'
+export * from './components/layout/Sidebar.tsx'
+export * from './components/layout/PageHeader.tsx'
+export * from './components/surfaces/HeroSurface.tsx'
+export * from './components/surfaces/Panel.tsx'
+export * from './components/surfaces/PriorityCard.tsx'
+export * from './components/surfaces/QuietListCard.tsx'
+export * from './components/surfaces/EmptyState.tsx'
+export * from './components/metrics/StatCard.tsx'
+export * from './components/metrics/MetricRow.tsx'
+export * from './components/navigation/NavItem.tsx'
+export * from './components/navigation/ShortcutPill.tsx'
+export * from './components/feedback/StatusBadge.tsx'
+export * from './components/feedback/NotificationCenter.tsx'
+export * from './components/feedback/Skeleton.tsx'
+export * from './components/controls/Button.tsx'
+export * from './components/controls/Input.tsx'
+export * from './components/controls/Select.tsx'
+export * from './components/controls/SearchBar.tsx'
+export * from './components/controls/ThemeToggle.tsx'
+export * from './components/icons/IconSet.tsx'
+export * from './theme/ThemeContext.tsx'
+export * from './theme/useTheme.ts'
+export * from './config/dashboard.config.ts'
+`;
+    writeTemplateFile(targetDir, 'src/index.ts', barrelContent);
+    // 11. Generate Smoke Test in tests/
+    const smokeTestContent = `import test from 'node:test'
+import assert from 'node:assert/strict'
+import { dashboardConfig } from '../src/config/dashboard.config.ts'
+
+test('dashboard configuration loaded with correct branding and tokens', () => {
+  assert.equal(dashboardConfig.branding.name, '${options.brandName.replace(/'/g, "\\'")}')
+  assert.ok(dashboardConfig.navigation.length > 0)
+  assert.ok(dashboardConfig.colors.primary.light.length > 0)
+})
+`;
+    writeTemplateFile(targetDir, 'tests/dashboard.test.ts', smokeTestContent);
+    return { success: true, targetDir };
+}

package/dist/presets.d.ts

@@ -0,0 +1,8 @@
+import type { PresetThemeTokens, ThemePreset } from './types.js';
+export declare const JOBTRACK_PRESET: PresetThemeTokens;
+export declare const CAFE_PRESET: PresetThemeTokens;
+/**
+ * Adjusts or computes a dark mode counterpart for a hex color if not provided.
+ */
+export declare function deriveDarkColor(hex: string): string;
+export declare function resolvePresetTokens(preset: ThemePreset, customPrimary?: string, customAccent?: string): PresetThemeTokens;

package/dist/presets.js

@@ -0,0 +1,72 @@
+export const JOBTRACK_PRESET = {
+    name: 'JobTrack Blue',
+    brandDefault: 'Acme Workspace',
+    taglineDefault: 'Team operations and project command center',
+    primaryLight: '#2563eb',
+    primaryDark: '#3b82f6',
+    accentLight: '#059669',
+    accentDark: '#10b981',
+    backgroundLight: '#f4f5f7',
+    backgroundDark: '#0b0c0e',
+    canvasLight: '#eef3fb',
+    canvasDark: '#181a1f',
+    surfaceLight: '#ffffff',
+    surfaceDark: '#151719',
+    surfaceElevatedLight: '#ffffff',
+    surfaceElevatedDark: '#1c1f22',
+    borderLight: '#e3e7ec',
+    borderDark: '#2a2f35',
+};
+export const CAFE_PRESET = {
+    name: 'Cafe OS Amber',
+    brandDefault: 'Cafe OS',
+    taglineDefault: 'Artisan Coffeehouse & Kitchen Management Suite',
+    primaryLight: '#d97706',
+    primaryDark: '#f59e0b',
+    accentLight: '#15803d',
+    accentDark: '#22c55e',
+    backgroundLight: '#fdfbf7',
+    backgroundDark: '#0e0d0b',
+    canvasLight: '#f5efe6',
+    canvasDark: '#1a1815',
+    surfaceLight: '#ffffff',
+    surfaceDark: '#1e1b17',
+    surfaceElevatedLight: '#ffffff',
+    surfaceElevatedDark: '#26221d',
+    borderLight: '#e8dfd3',
+    borderDark: '#383229',
+};
+/**
+ * Adjusts or computes a dark mode counterpart for a hex color if not provided.
+ */
+export function deriveDarkColor(hex) {
+    // Simple luminosity shift or fallback to lighter tone if user supplied custom color
+    return hex;
+}
+export function resolvePresetTokens(preset, customPrimary, customAccent) {
+    if (preset === 'cafe') {
+        return CAFE_PRESET;
+    }
+    if (preset === 'custom' && customPrimary) {
+        return {
+            name: 'Custom Theme',
+            brandDefault: 'My Dashboard',
+            taglineDefault: 'Custom Operational Dashboard',
+            primaryLight: customPrimary,
+            primaryDark: deriveDarkColor(customPrimary),
+            accentLight: customAccent || '#059669',
+            accentDark: customAccent || '#10b981',
+            backgroundLight: '#f4f5f7',
+            backgroundDark: '#0b0c0e',
+            canvasLight: '#f1f5f9',
+            canvasDark: '#181a1f',
+            surfaceLight: '#ffffff',
+            surfaceDark: '#151719',
+            surfaceElevatedLight: '#ffffff',
+            surfaceElevatedDark: '#1c1f22',
+            borderLight: '#e2e8f0',
+            borderDark: '#2a2f35',
+        };
+    }
+    return JOBTRACK_PRESET;
+}

package/dist/prompts.d.ts

@@ -0,0 +1,2 @@
+import type { GeneratorOptions } from './types.js';
+export declare function promptInteractive(initialProjectName?: string): Promise<GeneratorOptions>;

package/dist/prompts.js

@@ -0,0 +1,121 @@
+import readline from 'node:readline/promises';
+import { stdin as input, stdout as output } from 'node:process';
+import { validateHexColor } from './validation.js';
+export async function promptInteractive(initialProjectName) {
+    const rl = readline.createInterface({ input, output });
+    try {
+        console.log('\n✨ Welcome to create-dashboard-kit!');
+        console.log('Scaffold a modern, editorial dashboard extracted from JobTrack.\n');
+        // 1. Project Name
+        let projectName = initialProjectName || '';
+        while (projectName.trim().length === 0) {
+            projectName = await rl.question('? Project name: ');
+            if (!projectName.trim()) {
+                console.log('  ⚠️ Project name is required.');
+            }
+        }
+        projectName = projectName.trim();
+        // 2. Brand Name
+        const defaultBrand = projectName
+            .split(/[-_]/)
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(' ');
+        const brandInput = await rl.question(`? Display / Brand name (${defaultBrand}): `);
+        const brandName = brandInput.trim() || defaultBrand;
+        // 3. Theme Preset
+        console.log('\n? Choose a theme preset:');
+        console.log('  1) JobTrack Blue (Modern SaaS, Royal Blue & Slate)');
+        console.log('  2) Cafe OS Amber (Artisan F&B, Roast Amber & Cream Linen)');
+        console.log('  3) Custom Palette');
+        const presetChoice = await rl.question('  Select preset [1-3] (1): ');
+        let preset = 'jobtrack';
+        if (presetChoice.trim() === '2') {
+            preset = 'cafe';
+        }
+        else if (presetChoice.trim() === '3') {
+            preset = 'custom';
+        }
+        // 4. Primary & Accent Colors
+        let primaryColor = preset === 'cafe' ? '#d97706' : '#2563eb';
+        let accentColor = preset === 'cafe' ? '#15803d' : '#059669';
+        if (preset === 'custom') {
+            let customPrimary = '';
+            while (!validateHexColor(customPrimary)) {
+                customPrimary = await rl.question('? Primary hex color (e.g. #7c3aed): ');
+                if (!validateHexColor(customPrimary)) {
+                    console.log('  ⚠️ Please enter a valid hex color starting with # (e.g. #7c3aed)');
+                }
+            }
+            primaryColor = customPrimary.trim();
+            let customAccent = '';
+            while (!validateHexColor(customAccent)) {
+                customAccent = await rl.question('? Accent hex color (e.g. #06b6d4): ');
+                if (!validateHexColor(customAccent)) {
+                    console.log('  ⚠️ Please enter a valid hex color starting with # (e.g. #06b6d4)');
+                }
+            }
+            accentColor = customAccent.trim();
+        }
+        // 5. Default Theme Mode
+        console.log('\n? Default color mode:');
+        console.log('  1) System (follows user preference)');
+        console.log('  2) Dark');
+        console.log('  3) Light');
+        const modeChoice = await rl.question('  Select mode [1-3] (1): ');
+        let defaultMode = 'system';
+        if (modeChoice.trim() === '2')
+            defaultMode = 'dark';
+        if (modeChoice.trim() === '3')
+            defaultMode = 'light';
+        // 6. Button Shape
+        console.log('\n? Button shape:');
+        console.log('  1) Pill (rounded-full - Signature JobTrack style)');
+        console.log('  2) Rounded (rounded-xl)');
+        console.log('  3) Square (rounded-md)');
+        const shapeChoice = await rl.question('  Select shape [1-3] (1): ');
+        let buttonShape = 'pill';
+        if (shapeChoice.trim() === '2')
+            buttonShape = 'rounded';
+        if (shapeChoice.trim() === '3')
+            buttonShape = 'square';
+        // 7. Card Radius
+        console.log('\n? Card border radius:');
+        console.log('  1) Large (rounded-2xl - Signature JobTrack style)');
+        console.log('  2) Medium (rounded-xl)');
+        console.log('  3) Small (rounded-lg)');
+        const radiusChoice = await rl.question('  Select radius [1-3] (1): ');
+        let cardRadius = 'large';
+        if (radiusChoice.trim() === '2')
+            cardRadius = 'medium';
+        if (radiusChoice.trim() === '3')
+            cardRadius = 'small';
+        // 8. Sidebar State
+        console.log('\n? Sidebar default desktop state:');
+        console.log('  1) Expanded (w-64)');
+        console.log('  2) Collapsed (w-16 compact icon rail)');
+        const sidebarChoice = await rl.question('  Select state [1-2] (1): ');
+        const sidebarState = sidebarChoice.trim() === '2' ? 'collapsed' : 'expanded';
+        // 9. Include Demo Data
+        const demoChoice = await rl.question('\n? Include demo data & prebuilt panels? [Y/n]: ');
+        const includeDemo = !demoChoice.trim().toLowerCase().startsWith('n');
+        // 10. Framework (Locked to React + Vite as per specification)
+        const targetDir = `./${projectName}`;
+        return {
+            projectName,
+            targetDir,
+            brandName,
+            preset,
+            primaryColor,
+            accentColor,
+            defaultMode,
+            buttonShape,
+            cardRadius,
+            sidebarState,
+            includeDemo,
+            framework: 'react-vite',
+        };
+    }
+    finally {
+        rl.close();
+    }
+}

package/dist/templateEngine.d.ts

@@ -0,0 +1,3 @@
+export declare function ensureDir(dirPath: string): void;
+export declare function writeTemplateFile(baseDir: string, relativePath: string, content: string): void;
+export declare function copyDirRecursive(srcDir: string, destDir: string, filter?: (fileName: string, fullPath: string) => boolean): void;

package/dist/templateEngine.js

@@ -0,0 +1,31 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { sanitizeTargetPath } from './validation.js';
+export function ensureDir(dirPath) {
+    if (!fs.existsSync(dirPath)) {
+        fs.mkdirSync(dirPath, { recursive: true });
+    }
+}
+export function writeTemplateFile(baseDir, relativePath, content) {
+    const targetPath = sanitizeTargetPath(baseDir, relativePath);
+    ensureDir(path.dirname(targetPath));
+    fs.writeFileSync(targetPath, content, 'utf-8');
+}
+export function copyDirRecursive(srcDir, destDir, filter) {
+    ensureDir(destDir);
+    const entries = fs.readdirSync(srcDir, { withFileTypes: true });
+    for (const entry of entries) {
+        const srcPath = path.join(srcDir, entry.name);
+        const destPath = path.join(destDir, entry.name);
+        if (filter && !filter(entry.name, srcPath)) {
+            continue;
+        }
+        if (entry.isDirectory()) {
+            copyDirRecursive(srcPath, destPath, filter);
+        }
+        else if (entry.isFile()) {
+            ensureDir(path.dirname(destPath));
+            fs.copyFileSync(srcPath, destPath);
+        }
+    }
+}

package/dist/types.d.ts

@@ -0,0 +1,54 @@
+export type ThemePreset = 'jobtrack' | 'cafe' | 'custom';
+export type ThemeMode = 'light' | 'dark' | 'system';
+export type ButtonShape = 'pill' | 'rounded' | 'square';
+export type CardRadius = 'small' | 'medium' | 'large';
+export type SidebarState = 'expanded' | 'collapsed';
+export interface GeneratorOptions {
+    projectName: string;
+    targetDir: string;
+    brandName: string;
+    tagline?: string;
+    preset: ThemePreset;
+    primaryColor: string;
+    accentColor: string;
+    defaultMode: ThemeMode;
+    buttonShape: ButtonShape;
+    cardRadius: CardRadius;
+    sidebarState: SidebarState;
+    includeDemo: boolean;
+    framework: 'react-vite';
+    force?: boolean;
+}
+export interface CliFlags {
+    brand?: string;
+    preset?: string;
+    primary?: string;
+    accent?: string;
+    mode?: string;
+    shape?: string;
+    radius?: string;
+    sidebar?: string;
+    demo?: boolean;
+    force?: boolean;
+    help?: boolean;
+    version?: boolean;
+}
+export interface PresetThemeTokens {
+    name: string;
+    brandDefault: string;
+    taglineDefault: string;
+    primaryLight: string;
+    primaryDark: string;
+    accentLight: string;
+    accentDark: string;
+    backgroundLight: string;
+    backgroundDark: string;
+    canvasLight: string;
+    canvasDark: string;
+    surfaceLight: string;
+    surfaceDark: string;
+    surfaceElevatedLight: string;
+    surfaceElevatedDark: string;
+    borderLight: string;
+    borderDark: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/validation.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Validates whether a project name conforms to npm package naming rules
+ * and is filesystem-safe.
+ */
+export declare function validateProjectName(name: string, targetDir: string, force?: boolean): {
+    valid: boolean;
+    error?: string;
+};
+/**
+ * Validates a 3, 6, or 8 digit hex color string (e.g. #2563eb, #fff).
+ */
+export declare function validateHexColor(color: string): boolean;
+/**
+ * Sanitizes a target filesystem path and ensures it stays strictly within the resolved base directory.
+ */
+export declare function sanitizeTargetPath(baseDir: string, relativePath: string): string;

package/dist/validation.js

@@ -0,0 +1,73 @@
+import fs from 'node:fs';
+import path from 'node:path';
+/**
+ * Validates whether a project name conforms to npm package naming rules
+ * and is filesystem-safe.
+ */
+export function validateProjectName(name, targetDir, force = false) {
+    if (!name || name.trim().length === 0) {
+        return { valid: false, error: 'Project name cannot be empty.' };
+    }
+    const trimmed = name.trim();
+    // Guard against path traversal patterns and absolute paths in project name
+    if (trimmed.includes('..') || trimmed.includes('\0') || trimmed.startsWith('/') || trimmed.startsWith('\\')) {
+        return { valid: false, error: 'Project name cannot contain path traversal characters (.., /, \\).' };
+    }
+    // npm naming convention: lowercase alphanumeric, hyphens, underscores
+    const npmSafeRegex = /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/;
+    if (!npmSafeRegex.test(trimmed)) {
+        return {
+            valid: false,
+            error: `Project name "${trimmed}" must be URL/npm-safe (lowercase letters, numbers, hyphens, or underscores).`,
+        };
+    }
+    // Reserved filesystem and npm names
+    const reservedNames = new Set([
+        'node_modules',
+        'favicon.ico',
+        'public',
+        'src',
+        'dist',
+        'build',
+        'package.json',
+    ]);
+    if (reservedNames.has(trimmed.toLowerCase())) {
+        return { valid: false, error: `"${trimmed}" is a reserved directory/package name.` };
+    }
+    // Check if directory already exists
+    if (fs.existsSync(targetDir)) {
+        try {
+            const files = fs.readdirSync(targetDir);
+            if (files.length > 0 && !force) {
+                return {
+                    valid: false,
+                    error: `Target directory "${path.basename(targetDir)}" already exists and is not empty. Use --force to overwrite.`,
+                };
+            }
+        }
+        catch {
+            // If unable to read directory, treat as error
+            return { valid: false, error: `Cannot access target directory "${targetDir}".` };
+        }
+    }
+    return { valid: true };
+}
+/**
+ * Validates a 3, 6, or 8 digit hex color string (e.g. #2563eb, #fff).
+ */
+export function validateHexColor(color) {
+    if (!color)
+        return false;
+    return /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/.test(color.trim());
+}
+/**
+ * Sanitizes a target filesystem path and ensures it stays strictly within the resolved base directory.
+ */
+export function sanitizeTargetPath(baseDir, relativePath) {
+    const resolvedBase = path.resolve(baseDir);
+    const resolvedTarget = path.resolve(resolvedBase, relativePath);
+    if (!resolvedTarget.startsWith(resolvedBase)) {
+        throw new Error(`Security Violation: Path traversal detected outside "${resolvedBase}".`);
+    }
+    return resolvedTarget;
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@mohammad-irfan/create-dashboard-kit",
+  "version": "1.0.0",
+  "description": "Project generator for modern, customizable dashboards based on the JobTrack design system.",
+  "type": "module",
+  "main": "dist/cli.js",
+  "types": "dist/cli.d.ts",
+  "bin": {
+    "create-dashboard-kit": "bin/create-dashboard.js"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "templates",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepack": "npm run build",
+    "test": "node --test tests/cli.test.ts",
+    "start": "node bin/create-dashboard.js"
+  },
+  "keywords": [
+    "create-dashboard-kit",
+    "create-dashboard",
+    "dashboard",
+    "starter-kit",
+    "cli",
+    "generator",
+    "react",
+    "vite",
+    "tailwind",
+    "design-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mr-irfan1/create-dashboard-kit.git"
+  },
+  "homepage": "https://github.com/mr-irfan1/create-dashboard-kit#readme",
+  "bugs": {
+    "url": "https://github.com/mr-irfan1/create-dashboard-kit/issues"
+  },
+  "author": "JobTrack Team",
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "typescript": "~6.0.2"
+  }
+}