admin-ui-starter-kit 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin-ui-starter-kit",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Opinionated React component kit for admin panels and SaaS dashboards, built on top of shadcn/ui + Tailwind CSS v4. Callback-driven, framework-agnostic, i18n-ready.",
   "type": "module",
   "license": "MIT",
@@ -29,6 +29,8 @@
   "files": [
     "dist",
     "README.md",
+    "MIGRATION.md",
+    "COMPONENT_SELECTION.md",
     "INTEGRATION.md",
     "CHANGELOG.md",
     "CONTRIBUTING.md",
@@ -39,10 +41,13 @@
     "CLAUDE.md",
     "AGENTS.md",
     ".agents/skills/component-library-rules",
+    ".agents/skills/admin-ui-consumer-migration",
+    "scripts/audit-consumer.mjs",
     "scripts/install-skill.mjs",
     "scripts/serve-showcase.mjs"
   ],
   "bin": {
+    "admin-ui-starter-kit-audit": "./scripts/audit-consumer.mjs",
     "admin-ui-starter-kit-install-skill": "./scripts/install-skill.mjs",
     "admin-ui-starter-kit-showcase": "./scripts/serve-showcase.mjs"
   },
@@ -326,6 +331,11 @@
       "import": "./dist/components/layout/index.js",
       "require": "./dist/components/layout/index.cjs"
     },
+    "./layout/app-shell": {
+      "types": "./dist/components/layout/app-shell/index.d.ts",
+      "import": "./dist/components/layout/app-shell/index.js",
+      "require": "./dist/components/layout/app-shell/index.cjs"
+    },
     "./layout/containers": {
       "types": "./dist/components/layout/containers/index.d.ts",
       "import": "./dist/components/layout/containers/index.js",
@@ -390,7 +400,7 @@
     "lucide-react": "^1.0.0",
     "qrcode": "^1.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-day-picker": "^9.0.0",
+    "react-day-picker": "^10.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-hook-form": "^7.0.0",
     "react-leaflet": "^5.0.0",
@@ -514,9 +524,10 @@
     "leaflet.fullscreen": "^5.3.1",
     "leaflet.markercluster": "^1.5.3",
     "lucide-react": "^1.14.0",
+    "playwright": "^1.60.0",
     "qrcode": "^1.5.4",
     "react": "^19.2.5",
-    "react-day-picker": "^9.14.0",
+    "react-day-picker": "^10.0.1",
     "react-docgen-typescript": "^2.4.0",
     "react-dom": "^19.2.5",
     "react-hook-form": "^7.74.0",

package/scripts/audit-consumer.mjs

@@ -0,0 +1,337 @@
+#!/usr/bin/env node
+/**
+ * audit-consumer — checks a consuming app for common admin-ui-starter-kit
+ * migration mistakes:
+ *
+ * - stale copied import paths such as @/components/ui/base/buttons
+ * - invalid package imports not listed in package.json exports
+ * - local files that only re-export package components
+ *
+ * Run from a consumer app:
+ *
+ *   npx admin-ui-starter-kit-audit
+ *   npx admin-ui-starter-kit-audit --fix
+ */
+import { promises as fs } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const PACKAGE_NAME = 'admin-ui-starter-kit';
+const APP_OWNED_FEATURE_FAMILIES = new Set(['global-search']);
+const __filename = fileURLToPath(import.meta.url);
+const PACKAGE_ROOT = path.resolve(path.dirname(__filename), '..');
+const PACKAGE_JSON = JSON.parse(
+	await fs.readFile(path.join(PACKAGE_ROOT, 'package.json'), 'utf8'),
+);
+const PUBLIC_EXPORTS = new Set(Object.keys(PACKAGE_JSON.exports ?? {}));
+
+const DEFAULT_PATHS = ['src', 'app', 'resources/js', 'components', 'pages'];
+const CODE_EXTENSIONS = new Set(['.cjs', '.cts', '.js', '.jsx', '.mjs', '.mts', '.ts', '.tsx']);
+const SKIP_DIRS = new Set([
+	'.git',
+	'.next',
+	'.nuxt',
+	'.turbo',
+	'.vercel',
+	'build',
+	'coverage',
+	'dist',
+	'node_modules',
+	'public',
+	'vendor',
+]);
+
+function parseArgs(argv) {
+	const opts = { fix: false, json: false, help: false, paths: [] };
+	for (const arg of argv.slice(2)) {
+		if (arg === '--fix') {
+			opts.fix = true;
+		} else if (arg === '--json') {
+			opts.json = true;
+		} else if (arg === '--help' || arg === '-h') {
+			opts.help = true;
+		} else if (arg.startsWith('--paths=')) {
+			opts.paths.push(...arg.slice('--paths='.length).split(',').filter(Boolean));
+		} else if (arg.startsWith('-')) {
+			throw new Error(`Unknown option: ${arg}`);
+		} else {
+			opts.paths.push(arg);
+		}
+	}
+	return opts;
+}
+
+function printHelp() {
+	console.log(
+		`Usage: npx ${PACKAGE_NAME}-audit [options] [paths...]\n\n` +
+			`Audits a consuming app for stale local UI imports, invalid package subpaths,\n` +
+			`and local files that only mirror ${PACKAGE_NAME} exports.\n\n` +
+			`Options:\n` +
+			`  --fix             Rewrite known copied import paths to package imports\n` +
+			`  --paths=a,b       Comma-separated paths to scan\n` +
+			`  --json            Print machine-readable JSON\n` +
+			`  --help, -h        Show this message\n`,
+	);
+}
+
+async function exists(p) {
+	try {
+		await fs.access(p);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+async function walk(dir, files = []) {
+	const entries = await fs.readdir(dir, { withFileTypes: true });
+	for (const entry of entries) {
+		if (SKIP_DIRS.has(entry.name)) continue;
+		const full = path.join(dir, entry.name);
+		if (entry.isDirectory()) {
+			await walk(full, files);
+		} else if (entry.isFile() && CODE_EXTENSIONS.has(path.extname(entry.name))) {
+			files.push(full);
+		}
+	}
+	return files;
+}
+
+async function getScanFiles(cwd, requestedPaths) {
+	const roots = requestedPaths.length > 0 ? requestedPaths : DEFAULT_PATHS;
+	const files = [];
+	for (const relative of roots) {
+		const full = path.resolve(cwd, relative);
+		if (!(await exists(full))) continue;
+		const stat = await fs.stat(full);
+		if (stat.isDirectory()) {
+			await walk(full, files);
+		} else if (stat.isFile() && CODE_EXTENSIONS.has(path.extname(full))) {
+			files.push(full);
+		}
+	}
+	return [...new Set(files)].sort();
+}
+
+function getImportSpecifiers(source) {
+	const specifiers = [];
+	const patterns = [
+		/\bimport\s+(?:type\s+)?(?:[^'"]*?\s+from\s+)?['"]([^'"]+)['"]/g,
+		/\bexport\s+(?:type\s+)?[^'"]*?\s+from\s+['"]([^'"]+)['"]/g,
+		/\bimport\s*\(\s*['"]([^'"]+)['"]\s*\)/g,
+	];
+	for (const pattern of patterns) {
+		for (const match of source.matchAll(pattern)) specifiers.push(match[1]);
+	}
+	return specifiers;
+}
+
+function normalizePackageKey(specifier) {
+	if (specifier === PACKAGE_NAME) return '.';
+	if (!specifier.startsWith(`${PACKAGE_NAME}/`)) return null;
+	return `.${specifier.slice(PACKAGE_NAME.length)}`;
+}
+
+function packageImportIssue(specifier) {
+	const key = normalizePackageKey(specifier);
+	if (key === null) return null;
+	if (PUBLIC_EXPORTS.has(key)) return null;
+	return {
+		kind: 'invalid-package-import',
+		specifier,
+		message: `${specifier} is not a public ${PACKAGE_NAME} export`,
+	};
+}
+
+function mapOldSpecifier(specifier) {
+	const exactMappings = {
+		'@/components/layout': `${PACKAGE_NAME}/layout`,
+		'@/components/common/navigation': `${PACKAGE_NAME}/base/navigation`,
+		'@/components/ui/navigation': `${PACKAGE_NAME}/base/navigation`,
+	};
+
+	if (exactMappings[specifier]) return exactMappings[specifier];
+
+	const typographyPrefixes = [
+		'@/components/ui/base/typography',
+		'@/components/ui/typography',
+		'@/components/typography',
+	];
+	if (typographyPrefixes.some((prefix) => specifier === prefix || specifier.startsWith(`${prefix}/`))) {
+		return `${PACKAGE_NAME}/typography`;
+	}
+
+	const layerMappings = [
+		{ prefix: '@/components/ui/base/', target: 'base' },
+		{ prefix: '@/components/ui/navigation/', target: 'base', family: 'navigation' },
+		{ prefix: '@/components/base/', target: 'base' },
+		{ prefix: '@/components/common/navigation/', target: 'base', family: 'navigation' },
+		{ prefix: '@/components/composed/', target: 'composed' },
+		{ prefix: '@/components/features/', target: 'features' },
+		{ prefix: '@/components/layout/', target: 'layout' },
+	];
+
+	for (const mapping of layerMappings) {
+		if (!specifier.startsWith(mapping.prefix)) continue;
+		const rest = specifier.slice(mapping.prefix.length);
+		const parts = rest.split('/').filter(Boolean);
+		const family = mapping.family ?? parts[0];
+		if (!family) continue;
+		if (mapping.target === 'features' && APP_OWNED_FEATURE_FAMILIES.has(family)) continue;
+
+		if (mapping.target === 'base' && family === 'display' && parts[1] === 'metadata') {
+			return `${PACKAGE_NAME}/base/display/metadata`;
+		}
+
+		const candidate = `${PACKAGE_NAME}/${mapping.target}/${family}`;
+		if (PUBLIC_EXPORTS.has(normalizePackageKey(candidate))) return candidate;
+	}
+
+	return null;
+}
+
+function isKnownCopiedImport(specifier) {
+	return mapOldSpecifier(specifier) !== null;
+}
+
+function isMirrorFile(source) {
+	const withoutComments = source
+		.replace(/\/\*[\s\S]*?\*\//g, '')
+		.replace(/^\s*\/\/.*$/gm, '')
+		.trim();
+	if (!withoutComments) return false;
+
+	const statements = withoutComments
+		.split(';')
+		.map((statement) => statement.trim())
+		.filter(Boolean);
+	if (statements.length === 0) return false;
+
+	return statements.every((statement) =>
+		/^export\s+(?:type\s+)?(?:\{[\s\S]*\}|\*)\s+from\s+['"]admin-ui-starter-kit(?:\/[^'"]+)?['"]$/m.test(
+			statement,
+		),
+	);
+}
+
+function replaceSpecifiers(source) {
+	let changed = false;
+	const next = source.replace(
+		/(['"])(@\/components\/(?:ui\/base|ui\/typography|ui\/navigation|common\/navigation|base|typography|composed|features|layout)(?:\/[^'"]*)?)\1/g,
+		(match, quote, specifier) => {
+			const replacement = mapOldSpecifier(specifier);
+			if (!replacement) return match;
+			changed = true;
+			return `${quote}${replacement}${quote}`;
+		},
+	);
+	return { changed, source: next };
+}
+
+async function audit(opts) {
+	const cwd = process.cwd();
+	const files = await getScanFiles(cwd, opts.paths);
+	const issues = [];
+	const fixedFiles = [];
+
+	for (const file of files) {
+		const source = await fs.readFile(file, 'utf8');
+		const relative = path.relative(cwd, file);
+		const specifiers = getImportSpecifiers(source);
+
+		for (const specifier of specifiers) {
+			if (isKnownCopiedImport(specifier)) {
+				issues.push({
+					kind: 'stale-local-import',
+					file: relative,
+					specifier,
+					suggested: mapOldSpecifier(specifier),
+					message: `${specifier} should import directly from ${PACKAGE_NAME}`,
+				});
+			}
+
+			const invalidPackageImport = packageImportIssue(specifier);
+			if (invalidPackageImport) {
+				issues.push({ ...invalidPackageImport, file: relative });
+			}
+		}
+
+		if (isMirrorFile(source)) {
+			issues.push({
+				kind: 'local-package-mirror',
+				file: relative,
+				message: 'local file only re-exports admin-ui-starter-kit; replace call-site imports directly',
+			});
+		}
+
+		if (opts.fix) {
+			const replacement = replaceSpecifiers(source);
+			if (replacement.changed) {
+				await fs.writeFile(file, replacement.source);
+				fixedFiles.push(relative);
+			}
+		}
+	}
+
+	return { filesScanned: files.length, issues, fixedFiles: [...new Set(fixedFiles)].sort() };
+}
+
+function printReport(result, opts) {
+	if (opts.json) {
+		console.log(JSON.stringify(result, null, 2));
+		return;
+	}
+
+	if (result.fixedFiles.length > 0) {
+		console.log(`Rewrote imports in ${result.fixedFiles.length} file(s):`);
+		for (const file of result.fixedFiles) console.log(`  - ${file}`);
+		console.log('');
+	}
+
+	if (result.issues.length === 0) {
+		console.log(`Admin UI audit passed (${result.filesScanned} files scanned).`);
+		return;
+	}
+
+	console.error(`Admin UI audit found ${result.issues.length} issue(s):`);
+	for (const issue of result.issues) {
+		const suggestion = issue.suggested ? ` -> ${issue.suggested}` : '';
+		console.error(`- ${issue.file}: ${issue.message}${suggestion}`);
+	}
+
+	if (!opts.fix) {
+		console.error('\nRun with --fix to rewrite known copied import paths.');
+	}
+}
+
+async function main() {
+	const opts = parseArgs(process.argv);
+	if (opts.help) {
+		printHelp();
+		return;
+	}
+
+	const first = await audit(opts);
+	if (!opts.fix || first.fixedFiles.length === 0) {
+		printReport(first, opts);
+		process.exit(first.issues.length > 0 ? 1 : 0);
+	}
+
+	const second = await audit({ ...opts, fix: false });
+	const merged = {
+		filesScanned: second.filesScanned,
+		issues: second.issues,
+		fixedFiles: first.fixedFiles,
+	};
+	printReport(merged, opts);
+	process.exit(second.issues.length > 0 ? 1 : 0);
+}
+
+main().catch((error) => {
+	if (error instanceof Error) {
+		console.error(`admin-ui-starter-kit-audit: ${error.message}`);
+	} else {
+		console.error(error);
+	}
+	process.exit(2);
+});

package/scripts/install-skill.mjs

@@ -1,16 +1,15 @@
 #!/usr/bin/env node
 /**
- * install-skill — consumer-facing installer for the
- * `component-library-rules` skill that ships inside the
- * `admin-ui-starter-kit` npm package.
+ * install-skill — consumer-facing installer for the AI skills that ship
+ * inside the `admin-ui-starter-kit` npm package.
  *
  * Run from a consumer project (after `npm install admin-ui-starter-kit`):
  *
- *   npx admin-ui-starter-kit-install-skill [--target=claude|agents|both] [--force]
+ *   npx admin-ui-starter-kit-install-skill [--skill=name|all] [--target=claude|agents|both] [--force]
  *
  * Default behaviour: copies the skill into BOTH
- *   <cwd>/.claude/skills/component-library-rules/
- *   <cwd>/.agents/skills/component-library-rules/
+ *   <cwd>/.claude/skills/<skill-name>/
+ *   <cwd>/.agents/skills/<skill-name>/
  *
  * The script is idempotent. It refuses to run inside the library itself
  * (the maintainer has `scripts/publish-skill.mjs` for that workflow).
@@ -20,18 +19,16 @@ import path from 'node:path';
 import readline from 'node:readline';
 import { fileURLToPath } from 'node:url';
 
-const SKILL_NAME = 'component-library-rules';
+const SKILL_NAMES = ['component-library-rules', 'admin-ui-consumer-migration'];
 const PACKAGE_NAME = 'admin-ui-starter-kit';
 
 const __filename = fileURLToPath(import.meta.url);
 // scripts/install-skill.mjs lives at <pkg>/scripts/, so package root is one up.
 const PACKAGE_ROOT = path.resolve(path.dirname(__filename), '..');
-const SOURCE = path.join(PACKAGE_ROOT, '.agents', 'skills', SKILL_NAME);
-
 const CWD = process.cwd();
 
 function parseArgs(argv) {
-	const opts = { target: 'both', force: false, help: false };
+	const opts = { target: 'both', skill: 'all', force: false, help: false };
 	for (const arg of argv.slice(2)) {
 		if (arg === '--force' || arg === '-f') {
 			opts.force = true;
@@ -44,6 +41,15 @@ function parseArgs(argv) {
 				process.exit(2);
 			}
 			opts.target = value;
+		} else if (arg.startsWith('--skill=')) {
+			const value = arg.slice('--skill='.length);
+			if (value !== 'all' && !SKILL_NAMES.includes(value)) {
+				console.error(
+					`✖ Invalid --skill=${value}. Expected one of: all, ${SKILL_NAMES.join(', ')}.`,
+				);
+				process.exit(2);
+			}
+			opts.skill = value;
 		} else {
 			console.error(`✖ Unknown argument: ${arg}`);
 			opts.help = true;
@@ -55,8 +61,9 @@ function parseArgs(argv) {
 function printHelp() {
 	console.log(
 		`Usage: npx ${PACKAGE_NAME}-install-skill [options]\n\n` +
-			`Installs the "${SKILL_NAME}" skill into the current project.\n\n` +
+			`Installs ${PACKAGE_NAME} AI skills into the current project.\n\n` +
 			`Options:\n` +
+			`  --skill=all|${SKILL_NAMES.join('|')}   Which skill to install (default: all)\n` +
 			`  --target=claude|agents|both   Where to install (default: both)\n` +
 			`  --force, -f                   Overwrite existing skill dir without prompting\n` +
 			`  --help, -h                    Show this message\n`,
@@ -107,7 +114,7 @@ function confirm(question) {
 	});
 }
 
-async function installInto(targetDir, force) {
+async function installInto(skillName, sourceDir, targetDir, force) {
 	// Safety: the only thing we ever delete is the existing skill dir at the
 	// exact target path. We never touch the parent directory or siblings.
 	if (await exists(targetDir)) {
@@ -120,8 +127,8 @@ async function installInto(targetDir, force) {
 		}
 		await fs.rm(targetDir, { recursive: true, force: true });
 	}
-	const count = await copyDir(SOURCE, targetDir);
-	console.log(`  ✓ Installed ${SKILL_NAME} → ${targetDir} (${count} files)`);
+	const count = await copyDir(sourceDir, targetDir);
+	console.log(`  ✓ Installed ${skillName} → ${targetDir} (${count} files)`);
 	return count;
 }
 
@@ -143,31 +150,38 @@ async function main() {
 		process.exit(2);
 	}
 
-	if (!(await exists(SOURCE))) {
-		console.error(
-			`✖ Source skill not found at ${SOURCE}\n` +
-				`  This usually means the ${PACKAGE_NAME} package is missing the skill files.\n` +
-				`  Try reinstalling: npm install ${PACKAGE_NAME}@latest`,
-		);
-		process.exit(1);
-	}
+	const skillNames = opts.skill === 'all' ? SKILL_NAMES : [opts.skill];
 
-	const targets = [];
-	if (opts.target === 'claude' || opts.target === 'both') {
-		targets.push(path.join(CWD, '.claude', 'skills', SKILL_NAME));
-	}
-	if (opts.target === 'agents' || opts.target === 'both') {
-		targets.push(path.join(CWD, '.agents', 'skills', SKILL_NAME));
-	}
+	console.log(`Installing ${skillNames.length === 1 ? `"${skillNames[0]}"` : 'AI skills'} from ${PACKAGE_NAME}\n`);
 
-	console.log(`Installing "${SKILL_NAME}" from ${PACKAGE_NAME}\n`);
-	for (const target of targets) {
-		try {
-			await installInto(target, opts.force);
-		} catch (err) {
-			console.error(`  ✖ ${target}`);
-			console.error(`    ${err instanceof Error ? err.message : String(err)}`);
+	for (const skillName of skillNames) {
+		const source = path.join(PACKAGE_ROOT, '.agents', 'skills', skillName);
+		if (!(await exists(source))) {
+			console.error(
+				`✖ Source skill not found at ${source}\n` +
+					`  This usually means the ${PACKAGE_NAME} package is missing the skill files.\n` +
+					`  Try reinstalling: npm install ${PACKAGE_NAME}@latest`,
+			);
 			process.exitCode = 1;
+			continue;
+		}
+
+		const targets = [];
+		if (opts.target === 'claude' || opts.target === 'both') {
+			targets.push(path.join(CWD, '.claude', 'skills', skillName));
+		}
+		if (opts.target === 'agents' || opts.target === 'both') {
+			targets.push(path.join(CWD, '.agents', 'skills', skillName));
+		}
+
+		for (const target of targets) {
+			try {
+				await installInto(skillName, source, target, opts.force);
+			} catch (err) {
+				console.error(`  ✖ ${target}`);
+				console.error(`    ${err instanceof Error ? err.message : String(err)}`);
+				process.exitCode = 1;
+			}
 		}
 	}
 

package/src/App.css

@@ -21,6 +21,11 @@
     --color-sidebar-primary: var(--sidebar-primary);
     --color-sidebar-foreground: var(--sidebar-foreground);
     --color-sidebar: var(--sidebar);
+    --color-app-shell-header-accent-foreground: var(--app-shell-header-accent-foreground);
+    --color-app-shell-header-accent: var(--app-shell-header-accent);
+    --color-app-shell-header-border: var(--app-shell-header-border);
+    --color-app-shell-header-foreground: var(--app-shell-header-foreground);
+    --color-app-shell-header: var(--app-shell-header-background);
     --color-chart-5: var(--chart-5);
     --color-chart-4: var(--chart-4);
     --color-chart-3: var(--chart-3);
@@ -106,6 +111,11 @@
      * never re-purpose existing variables.
      */
     --popover-content-pad: 0.25rem; /* PopoverContent inner padding */
+    --app-shell-header-height: 4.5rem; /* Header-first layout topbar height */
+    --app-shell-header-control-size: 2.25rem; /* Header icon/logo controls */
+    --app-shell-sidebar-width: 16rem;  /* Header-first layout sidebar column */
+    --app-shell-sidebar-width-expanded: var(--app-shell-sidebar-width);
+    --app-shell-sidebar-width-current: var(--app-shell-sidebar-width-expanded);
 }
 
 
@@ -153,6 +163,24 @@
     --sidebar-accent-foreground: oklch(0.205 0 0);
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
+    --app-shell-header-light-background: oklch(1 0 0);
+    --app-shell-header-light-foreground: oklch(0.145 0 0);
+    --app-shell-header-light-muted-foreground: oklch(0.556 0 0);
+    --app-shell-header-light-border: oklch(0.922 0 0);
+    --app-shell-header-light-accent: oklch(0.97 0 0);
+    --app-shell-header-light-accent-foreground: oklch(0.205 0 0);
+    --app-shell-header-dark-background: oklch(0.145 0 0);
+    --app-shell-header-dark-foreground: oklch(0.985 0 0);
+    --app-shell-header-dark-muted-foreground: oklch(0.78 0 0);
+    --app-shell-header-dark-border: oklch(1 0 0 / 14%);
+    --app-shell-header-dark-accent: oklch(1 0 0 / 10%);
+    --app-shell-header-dark-accent-foreground: oklch(0.985 0 0);
+    --app-shell-header-background: var(--app-shell-header-light-background);
+    --app-shell-header-foreground: var(--app-shell-header-light-foreground);
+    --app-shell-header-muted-foreground: var(--app-shell-header-light-muted-foreground);
+    --app-shell-header-border: var(--app-shell-header-light-border);
+    --app-shell-header-accent: var(--app-shell-header-light-accent);
+    --app-shell-header-accent-foreground: var(--app-shell-header-light-accent-foreground);
 }
 
 .dark {