@shival99/z-ui 2.1.5 → 2.1.7

package/scripts/z-init-project.mjs

@@ -0,0 +1,645 @@
+#!/usr/bin/env node
+/**
+ * z-init-project — bootstrap an Angular project to consume @shival99/z-ui.
+ *
+ * Run this from the ROOT of the target Angular project (the one you want to set
+ * up), NOT from inside z-ui. It will:
+ *   1. Detect whether the target is an Nx monorepo (project.json) or a single
+ *      Angular app (angular.json), and which project to configure.
+ *   2. Install the required dependencies (z-ui, Tailwind v4, PostCSS, icons).
+ *   3. Wire up Tailwind v4 + the chosen z-ui theme into the build styles array.
+ *   4. Create .postcssrc.json.
+ *   5. Inject the Be Vietnam Pro + Inter Tight Google Fonts <link> into index.html.
+ *   6. Create/patch src styles (font-sans variable).
+ *   7. Patch app.config.ts with z-ui providers (icon loader, toast, translate, theme).
+ *   8. Patch the root standalone component to preloadTheme(<theme>) on init.
+ *
+ * Usage:
+ *   node z-init-project.mjs                 # interactive
+ *   node z-init-project.mjs --theme neutral --project my-app --yes
+ *   node z-init-project.mjs --dry-run       # show what would change, write nothing
+ *
+ * Flags:
+ *   --theme <name>     one of the available themes (default: neutral)
+ *   --project <name>   project name (monorepo only; defaults to the single/first app)
+ *   --no-install       skip dependency installation
+ *   --yes, -y          accept defaults, no prompts
+ *   --dry-run          print planned changes without writing
+ *   --cwd <path>       target project root (default: current directory)
+ */
+
+import { execSync } from 'node:child_process';
+import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
+import { createInterface } from 'node:readline';
+import { dirname, join, relative, resolve } from 'node:path';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const Z_UI_PKG = '@shival99/z-ui';
+
+const AVAILABLE_THEMES = ['neutral', 'gray', 'slate', 'stone', 'zinc', 'green', 'orange', 'violet', 'hospital'];
+
+const DEFAULT_THEME = 'neutral';
+
+/** Runtime deps a consuming app needs. Versions track attendance-pull's setup. */
+const DEPENDENCIES = [
+  `${Z_UI_PKG}@latest`,
+  'tailwindcss@^4.3.0',
+  '@tailwindcss/postcss@^4.3.0',
+  'postcss@^8.5.15',
+  'autoprefixer@^10.5.0',
+];
+
+const FONT_LINK_HREF =
+  'https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap';
+
+const FONT_LINK_TAG = `  <link\n    href="${FONT_LINK_HREF}"\n    rel="stylesheet"\n  />`;
+
+const STYLES_CSS_CONTENT = `:root {
+  --font-sans: 'Be Vietnam Pro', 'Inter Tight', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
+}
+
+* {
+  font-family: var(--font-sans) !important;
+}
+`;
+
+const POSTCSS_CONTENT = `${JSON.stringify({ plugins: { '@tailwindcss/postcss': {} } }, null, 2)}\n`;
+
+// ---------------------------------------------------------------------------
+// Tiny CLI helpers
+// ---------------------------------------------------------------------------
+
+const C = {
+  reset: '\x1b[0m',
+  dim: '\x1b[2m',
+  bold: '\x1b[1m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  red: '\x1b[31m',
+  cyan: '\x1b[36m',
+};
+
+const log = {
+  step: m => console.log(`${C.cyan}▸${C.reset} ${m}`),
+  ok: m => console.log(`${C.green}✓${C.reset} ${m}`),
+  warn: m => console.log(`${C.yellow}!${C.reset} ${m}`),
+  err: m => console.error(`${C.red}✗${C.reset} ${m}`),
+  info: m => console.log(`${C.dim}${m}${C.reset}`),
+};
+
+function parseArgs(argv) {
+  const args = { _: [] };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === '--yes' || a === '-y') args.yes = true;
+    else if (a === '--dry-run') args.dryRun = true;
+    else if (a === '--no-install') args.noInstall = true;
+    else if (a === '--theme') args.theme = argv[++i];
+    else if (a === '--project') args.project = argv[++i];
+    else if (a === '--cwd') args.cwd = argv[++i];
+    else if (a === '--help' || a === '-h') args.help = true;
+    else args._.push(a);
+  }
+  return args;
+}
+
+function printHelp() {
+  console.log(`${C.bold}z-ui-init${C.reset} — set up an Angular project to consume ${Z_UI_PKG}
+
+${C.bold}Usage${C.reset}
+  npx ${Z_UI_PKG} z-ui-init [options]      ${C.dim}# in your project root${C.reset}
+  z-ui-init [options]
+
+${C.bold}Options${C.reset}
+  --theme <name>     theme to wire in (default: ${DEFAULT_THEME})
+                     ${C.dim}${AVAILABLE_THEMES.join(', ')}${C.reset}
+  --project <name>   project to configure (monorepo; defaults to the single/first app)
+  --cwd <path>       target project root (default: current directory)
+  --no-install       skip dependency installation
+  --yes, -y          accept defaults, no prompts
+  --dry-run          print planned changes without writing
+  --help, -h         show this help`);
+}
+
+function prompt(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise(res =>
+    rl.question(question, ans => {
+      rl.close();
+      res(ans.trim());
+    })
+  );
+}
+
+async function chooseTheme(yes, preselected) {
+  if (preselected) {
+    if (!AVAILABLE_THEMES.includes(preselected)) {
+      log.err(`Unknown theme "${preselected}". Available: ${AVAILABLE_THEMES.join(', ')}`);
+      process.exit(1);
+    }
+    return preselected;
+  }
+  if (yes) return DEFAULT_THEME;
+
+  console.log(`\n${C.bold}Choose a theme:${C.reset}`);
+  AVAILABLE_THEMES.forEach((t, i) => {
+    const marker = t === DEFAULT_THEME ? `${C.dim}(default)${C.reset}` : '';
+    console.log(`  ${i + 1}) ${t} ${marker}`);
+  });
+  const ans = await prompt(`Theme [1-${AVAILABLE_THEMES.length} or name, Enter=${DEFAULT_THEME}]: `);
+  if (!ans) return DEFAULT_THEME;
+  const byIndex = AVAILABLE_THEMES[Number(ans) - 1];
+  if (byIndex) return byIndex;
+  if (AVAILABLE_THEMES.includes(ans)) return ans;
+  log.warn(`"${ans}" not recognized, falling back to ${DEFAULT_THEME}.`);
+  return DEFAULT_THEME;
+}
+
+// ---------------------------------------------------------------------------
+// File utilities
+// ---------------------------------------------------------------------------
+
+let DRY_RUN = false;
+
+function read(file) {
+  return readFileSync(file, 'utf8');
+}
+
+function write(file, content) {
+  if (DRY_RUN) {
+    log.info(`[dry-run] would write ${file}`);
+    return;
+  }
+  mkdirSync(dirname(file), { recursive: true });
+  writeFileSync(file, content);
+}
+
+function readJson(file) {
+  return JSON.parse(read(file));
+}
+
+function writeJson(file, obj) {
+  write(file, `${JSON.stringify(obj, null, 2)}\n`);
+}
+
+/** Find the first existing path among candidates. */
+function firstExisting(paths) {
+  return paths.find(p => existsSync(p)) ?? null;
+}
+
+/** Absolute filesystem path inside the project's source root. */
+function absSrc(ws, ...parts) {
+  return join(ws.root, ws.sourceRoot, ...parts);
+}
+
+// ---------------------------------------------------------------------------
+// Workspace detection
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve the target project: its name, the config file that owns its build
+ * target (angular.json or project.json), and the source root + index/styles.
+ */
+function detectWorkspace(root, requestedProject) {
+  const nxJson = join(root, 'nx.json');
+  const angularJson = join(root, 'angular.json');
+  const isNx = existsSync(nxJson);
+
+  if (isNx) {
+    log.step('Detected Nx monorepo (nx.json present).');
+    const projects = discoverNxProjects(root);
+    if (projects.length === 0) {
+      log.err('No project.json with an Angular application target found under apps/* or libs/*.');
+      process.exit(1);
+    }
+    let project = projects[0];
+    if (requestedProject) {
+      const found = projects.find(p => p.name === requestedProject);
+      if (!found) {
+        log.err(`Project "${requestedProject}" not found. Available: ${projects.map(p => p.name).join(', ')}`);
+        process.exit(1);
+      }
+      project = found;
+    } else if (projects.length > 1) {
+      log.warn(
+        `Multiple projects found, using "${project.name}". Pass --project to pick another: ${projects
+          .map(p => p.name)
+          .join(', ')}`
+      );
+    }
+    return { kind: 'nx', root, ...project };
+  }
+
+  if (existsSync(angularJson)) {
+    log.step('Detected single Angular workspace (angular.json present).');
+    const cfg = readJson(angularJson);
+    const names = Object.keys(cfg.projects || {});
+    const appNames = names.filter(n => cfg.projects[n].projectType !== 'library');
+    if (appNames.length === 0) {
+      log.err('No application project found in angular.json.');
+      process.exit(1);
+    }
+    const name = requestedProject || cfg.defaultProject || appNames[0];
+    if (!cfg.projects[name]) {
+      log.err(`Project "${name}" not found in angular.json. Available: ${names.join(', ')}`);
+      process.exit(1);
+    }
+    return {
+      kind: 'angular',
+      root,
+      name,
+      configFile: angularJson,
+      sourceRoot: cfg.projects[name].sourceRoot || 'src',
+    };
+  }
+
+  log.err('Neither angular.json nor nx.json found. Run this from an Angular project root.');
+  process.exit(1);
+}
+
+function discoverNxProjects(root) {
+  const out = [];
+  for (const baseName of ['apps', 'libs']) {
+    const base = join(root, baseName);
+    if (!existsSync(base)) continue;
+    for (const entry of readdirSync(base)) {
+      const projDir = join(base, entry);
+      if (!statSync(projDir).isDirectory()) continue;
+      const projectJson = join(projDir, 'project.json');
+      if (!existsSync(projectJson)) continue;
+      const cfg = readJson(projectJson);
+      const target = findApplicationTarget(cfg);
+      if (!target) continue;
+      out.push({
+        name: cfg.name || entry,
+        configFile: projectJson,
+        // Relative to workspace root, e.g. "apps/my-app/src".
+        sourceRoot: cfg.sourceRoot || relative(root, join(projDir, 'src')),
+        buildTargetKey: target,
+      });
+    }
+  }
+  return out;
+}
+
+/** Return the name of the build target that uses the Angular application builder. */
+function findApplicationTarget(projectCfg) {
+  const targets = projectCfg.targets || {};
+  for (const [key, t] of Object.entries(targets)) {
+    const exec = t.executor || t.builder || '';
+    if (exec.includes('@angular/build:application') || exec.includes('@angular-devkit/build-angular')) {
+      return key;
+    }
+  }
+  return targets.build ? 'build' : null;
+}
+
+// ---------------------------------------------------------------------------
+// Setup steps
+// ---------------------------------------------------------------------------
+
+function installDeps(root) {
+  const pm = detectPackageManager(root);
+  const addCmd = { pnpm: 'pnpm add', npm: 'npm install', yarn: 'yarn add', bun: 'bun add' }[pm];
+  const cmd = `${addCmd} ${DEPENDENCIES.join(' ')}`;
+  log.step(`Installing dependencies with ${pm}…`);
+  log.info(cmd);
+  if (DRY_RUN) {
+    log.info('[dry-run] skipping install');
+    return;
+  }
+  execSync(cmd, { cwd: root, stdio: 'inherit' });
+  log.ok('Dependencies installed.');
+}
+
+function detectPackageManager(root) {
+  if (existsSync(join(root, 'pnpm-lock.yaml'))) return 'pnpm';
+  if (existsSync(join(root, 'yarn.lock'))) return 'yarn';
+  if (existsSync(join(root, 'bun.lockb'))) return 'bun';
+  return 'npm';
+}
+
+/** Inject the z-ui style entries (tailwind + chosen theme) into the build target. */
+function patchBuildStyles(ws, theme) {
+  const tailwindEntry = `node_modules/${Z_UI_PKG}/assets/css/tailwind.css`;
+  const themeEntry = `node_modules/${Z_UI_PKG}/assets/css/themes/${theme}.css`;
+  const appStyles = `${ws.sourceRoot}/styles.css`.replace(/\\/g, '/');
+
+  const cfg = readJson(ws.configFile);
+  let options;
+  if (ws.kind === 'nx') {
+    const targetKey = ws.buildTargetKey || 'build';
+    cfg.targets ||= {};
+    cfg.targets[targetKey] ||= {};
+    cfg.targets[targetKey].options ||= {};
+    options = cfg.targets[targetKey].options;
+  } else {
+    const proj = cfg.projects[ws.name];
+    proj.architect ||= proj.targets;
+    const arch = proj.architect || proj.targets;
+    arch.build ||= {};
+    arch.build.options ||= {};
+    options = arch.build.options;
+  }
+
+  const styles = Array.isArray(options.styles) ? options.styles : [];
+  const desired = [tailwindEntry, themeEntry, appStyles];
+
+  // Drop any previously-added z-ui tailwind/theme entries so re-runs stay clean.
+  const cleaned = styles.filter(s => {
+    const str = typeof s === 'string' ? s : s.input;
+    if (!str) return true;
+    if (str.includes(`${Z_UI_PKG}/assets/css/tailwind.css`)) return false;
+    if (str.includes(`${Z_UI_PKG}/assets/css/themes/`)) return false;
+    return true;
+  });
+
+  // Ensure the app styles entry exists exactly once, after the z-ui entries.
+  const withoutApp = cleaned.filter(s => {
+    const str = typeof s === 'string' ? s : s.input;
+    return str !== appStyles;
+  });
+
+  options.styles = [...desired, ...withoutApp.filter(s => !desired.includes(s))];
+
+  writeJson(ws.configFile, cfg);
+  log.ok(`Build styles set (${relative(process.cwd(), ws.configFile)}):`);
+  desired.forEach(s => log.info(`    • ${s}`));
+}
+
+function createPostcssrc(root) {
+  const target = join(root, '.postcssrc.json');
+  if (existsSync(target)) {
+    log.warn('.postcssrc.json already exists — leaving it untouched.');
+    return;
+  }
+  write(target, POSTCSS_CONTENT);
+  log.ok('Created .postcssrc.json');
+}
+
+function patchIndexHtml(ws) {
+  const indexPath = firstExisting([
+    absSrc(ws, 'index.html'),
+    join(ws.root, ws.sourceRoot, '..', 'index.html'),
+    join(ws.root, 'src', 'index.html'),
+  ]);
+  if (!indexPath) {
+    log.warn('index.html not found — skipping font link injection.');
+    return;
+  }
+  let html = read(indexPath);
+  if (html.includes('Be+Vietnam+Pro')) {
+    log.warn('Be Vietnam Pro font link already present — skipping.');
+    return;
+  }
+  if (html.includes('</head>')) {
+    html = html.replace('</head>', `${FONT_LINK_TAG}\n</head>`);
+  } else {
+    log.warn('No </head> found in index.html — appending font link at top.');
+    html = `${FONT_LINK_TAG}\n${html}`;
+  }
+  write(indexPath, html);
+  log.ok(`Injected font <link> into ${relative(process.cwd(), indexPath)}`);
+}
+
+function createStylesCss(ws) {
+  const stylesPath = absSrc(ws, 'styles.css');
+  if (existsSync(stylesPath)) {
+    const current = read(stylesPath);
+    if (current.includes('--font-sans')) {
+      log.warn('styles.css already defines --font-sans — leaving it untouched.');
+      return;
+    }
+    write(stylesPath, `${STYLES_CSS_CONTENT}\n${current}`);
+    log.ok('Prepended font variables to existing styles.css');
+    return;
+  }
+  write(stylesPath, STYLES_CSS_CONTENT);
+  log.ok('Created src/styles.css');
+}
+
+function patchAppConfig(ws, theme) {
+  const configPath = firstExisting([absSrc(ws, 'app', 'app.config.ts'), absSrc(ws, 'app', 'app.config.server.ts')]);
+  if (!configPath) {
+    log.warn('app.config.ts not found — printing the providers block to add manually.');
+    printAppConfigSnippet(theme);
+    return;
+  }
+
+  let src = read(configPath);
+  if (src.includes('provideZTheme')) {
+    log.warn('app.config.ts already references provideZTheme — skipping provider patch.');
+    return;
+  }
+
+  // Add imports (skip any whose symbol is already imported anywhere in the file).
+  const wantedImports = [
+    [`provideHttpClient`, `import { provideHttpClient } from '@angular/common/http';`],
+    [`provideZIconLoader`, `import { provideZIconLoader } from '${Z_UI_PKG}/components/z-icon';`],
+    [`provideZToast`, `import { provideZToast } from '${Z_UI_PKG}/components/z-toast';`],
+    [`provideZTheme`, `import { provideZTheme, provideZTranslate } from '${Z_UI_PKG}/providers';`],
+  ];
+  const importBlock = wantedImports
+    .filter(([symbol]) => !src.includes(symbol))
+    .map(([, imp]) => imp)
+    .join('\n');
+
+  if (importBlock) {
+    const lastImport = src.lastIndexOf('import ');
+    const lineEnd = src.indexOf('\n', lastImport);
+    src = `${src.slice(0, lineEnd + 1)}${importBlock}\n${src.slice(lineEnd + 1)}`;
+  }
+
+  // Provider lines to add, skipping any already present in the file.
+  const wantedProviders = [
+    [`provideHttpClient`, `provideHttpClient(),`],
+    [`provideZIconLoader`, `provideZIconLoader(),`],
+    [`provideZToast`, `provideZToast({ zPosition: 'top-right', zDuration: 3000, zCloseButton: true }),`],
+    [`provideZTranslate`, `provideZTranslate({ defaultLang: 'vi' }),`],
+    [`provideZTheme`, `provideZTheme({ defaultTheme: '${theme}', defaultDarkMode: false }),`],
+  ];
+  const newProviders = wantedProviders.filter(([symbol]) => !src.includes(`${symbol}(`)).map(([, line]) => line);
+
+  const providersMatch = src.match(/providers\s*:\s*\[/);
+  if (!providersMatch) {
+    log.warn('Could not find providers array — printing snippet to add manually.');
+    printAppConfigSnippet(theme);
+    return;
+  }
+  const insertAt = providersMatch.index + providersMatch[0].length;
+  const indent = '\n    ';
+  const injection = newProviders.map(l => `${indent}${l}`).join('');
+  src = `${src.slice(0, insertAt)}${injection}${src.slice(insertAt)}`;
+
+  write(configPath, src);
+  log.ok(`Patched ${relative(process.cwd(), configPath)} with z-ui providers.`);
+}
+
+function printAppConfigSnippet(theme) {
+  console.log(`\n${C.bold}Add these to your app.config.ts providers:${C.reset}`);
+  console.log(
+    `${C.dim}import { provideHttpClient } from '@angular/common/http';
+import { provideZIconLoader } from '${Z_UI_PKG}/components/z-icon';
+import { provideZToast } from '${Z_UI_PKG}/components/z-toast';
+import { provideZTheme, provideZTranslate } from '${Z_UI_PKG}/providers';
+
+providers: [
+  provideHttpClient(),
+  provideZIconLoader(),
+  provideZToast({ zPosition: 'top-right', zDuration: 3000, zCloseButton: true }),
+  provideZTranslate({ defaultLang: 'vi' }),
+  provideZTheme({ defaultTheme: '${theme}', defaultDarkMode: false }),
+]${C.reset}`
+  );
+}
+
+function patchRootComponent(ws, theme) {
+  const candidates = [absSrc(ws, 'app', 'app.ts'), absSrc(ws, 'app', 'app.component.ts')];
+  const compPath = firstExisting(candidates);
+  if (!compPath) {
+    log.warn('Root component (app.ts/app.component.ts) not found — add preloadTheme manually.');
+    printPreloadSnippet(theme);
+    return;
+  }
+
+  let src = read(compPath);
+  if (src.includes('preloadTheme')) {
+    log.warn('Root component already calls preloadTheme — skipping.');
+    return;
+  }
+
+  // Ensure ZThemeService import.
+  if (!src.includes('ZThemeService')) {
+    const imp = `import { ZThemeService } from '${Z_UI_PKG}/services';`;
+    const lastImport = src.lastIndexOf('import ');
+    const lineEnd = src.indexOf('\n', lastImport);
+    src = `${src.slice(0, lineEnd + 1)}${imp}\n${src.slice(lineEnd + 1)}`;
+  }
+
+  // Ensure inject + OnInit are imported from @angular/core.
+  src = ensureNamedImports(src, '@angular/core', ['inject', 'OnInit']);
+
+  const classMatch = src.match(/export class (\w+)([^{]*)\{/);
+  if (!classMatch) {
+    log.warn('Could not locate the root component class — add preloadTheme manually.');
+    printPreloadSnippet(theme);
+    return;
+  }
+  const className = classMatch[1];
+  const heritage = classMatch[2];
+
+  // Add `implements OnInit` if not present.
+  if (!/implements[^{]*OnInit/.test(heritage)) {
+    const newHeritage = /implements/.test(heritage)
+      ? heritage.replace(/implements\s+([^{]+)/, (m, list) => `implements ${list.trim()}, OnInit `)
+      : `${heritage.trimEnd()} implements OnInit `;
+    src = src.replace(classMatch[0], `export class ${className}${newHeritage}{`);
+  }
+
+  // Inject service + ngOnInit body right after the class opening brace.
+  const reMatch = src.match(new RegExp(`export class ${className}[^{]*\\{`));
+  const braceIdx = reMatch.index + reMatch[0].length;
+  const body = `
+  private readonly _themeService = inject(ZThemeService);
+
+  ngOnInit(): void {
+    this._themeService.preloadTheme('${theme}');
+  }
+`;
+  src = `${src.slice(0, braceIdx)}${body}${src.slice(braceIdx)}`;
+
+  write(compPath, src);
+  log.ok(`Patched ${relative(process.cwd(), compPath)} to preloadTheme('${theme}').`);
+}
+
+/** Make sure `names` are present in the named import from `moduleSpec`. */
+function ensureNamedImports(src, moduleSpec, names) {
+  const re = new RegExp(`import\\s*\\{([^}]*)\\}\\s*from\\s*['"]${moduleSpec.replace(/[/@]/g, '\\$&')}['"]`);
+  const m = src.match(re);
+  if (!m) {
+    // No existing import from this module — add a fresh one.
+    const imp = `import { ${names.join(', ')} } from '${moduleSpec}';`;
+    return `${imp}\n${src}`;
+  }
+  const existing = m[1]
+    .split(',')
+    .map(s => s.trim())
+    .filter(Boolean);
+  const merged = Array.from(new Set([...existing, ...names]));
+  return src.replace(re, `import { ${merged.join(', ')} } from '${moduleSpec}'`);
+}
+
+function printPreloadSnippet(theme) {
+  console.log(`\n${C.bold}Add this to your root component:${C.reset}`);
+  console.log(
+    `${C.dim}import { inject, OnInit } from '@angular/core';
+import { ZThemeService } from '${Z_UI_PKG}/services';
+
+export class App implements OnInit {
+  private readonly _themeService = inject(ZThemeService);
+  ngOnInit(): void {
+    this._themeService.preloadTheme('${theme}');
+  }
+}${C.reset}`
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main
+// ---------------------------------------------------------------------------
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  if (args.help) {
+    printHelp();
+    return;
+  }
+  DRY_RUN = !!args.dryRun;
+  const root = resolve(args.cwd || process.cwd());
+
+  console.log(`\n${C.bold}z-ui project setup${C.reset}`);
+  log.info(`Target: ${root}${DRY_RUN ? '  (dry-run)' : ''}\n`);
+
+  if (!existsSync(join(root, 'package.json'))) {
+    log.err('No package.json in target directory. Run from an Angular project root.');
+    process.exit(1);
+  }
+
+  const ws = detectWorkspace(root, args.project);
+  log.ok(`Configuring project "${ws.name}" (sourceRoot: ${ws.sourceRoot}).`);
+
+  const theme = await chooseTheme(args.yes, args.theme);
+  log.ok(`Theme: ${theme}`);
+
+  if (!args.yes && !DRY_RUN) {
+    const go = await prompt(`\nProceed with setup? [Y/n] `);
+    if (go && !/^y(es)?$/i.test(go)) {
+      log.warn('Aborted.');
+      process.exit(0);
+    }
+  }
+
+  console.log('');
+  if (!args.noInstall) installDeps(root);
+  else log.warn('Skipping dependency installation (--no-install).');
+
+  patchBuildStyles(ws, theme);
+  createPostcssrc(root);
+  patchIndexHtml(ws);
+  createStylesCss(ws);
+  patchAppConfig(ws, theme);
+  patchRootComponent(ws, theme);
+
+  console.log('');
+  log.ok(`${C.bold}Done.${C.reset} z-ui is wired into "${ws.name}" with the "${theme}" theme.`);
+  log.info('Next: start your dev server and verify the theme + fonts load.');
+  if (DRY_RUN) log.warn('This was a dry-run — no files were written.');
+}
+
+main().catch(e => {
+  log.err(e?.stack || String(e));
+  process.exit(1);
+});

package/types/shival99-z-ui-components-z-icon.d.ts

@@ -1,17 +1,33 @@
 import * as _angular_core from '@angular/core';
 import { Type, EnvironmentProviders } from '@angular/core';
 import { ClassValue } from 'clsx';
+import * as hugeIcons from '@hugeicons/core-free-icons';
 import * as saxBoldIcons from '@ng-icons/iconsax/bold';
 import * as saxOutlineIcons from '@ng-icons/iconsax/outline';
 import * as lucideIcons from '@ng-icons/lucide';
+import * as phosphorBoldIcons from '@ng-icons/phosphor-icons/bold';
+import * as phosphorDuotoneIcons from '@ng-icons/phosphor-icons/duotone';
+import * as phosphorFillIcons from '@ng-icons/phosphor-icons/fill';
+import * as phosphorLightIcons from '@ng-icons/phosphor-icons/light';
+import * as phosphorRegularIcons from '@ng-icons/phosphor-icons/regular';
+import * as phosphorThinIcons from '@ng-icons/phosphor-icons/thin';
 import * as animatedIcons from 'ng-animated-icons';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 
 type ZLucideIcon = Extract<keyof typeof lucideIcons, `lucide${string}`>;
 type ZSaxIcon = Extract<keyof typeof saxBoldIcons | keyof typeof saxOutlineIcons, `sax${string}`>;
+type ZPhosphorIcon = Extract<keyof typeof phosphorRegularIcons | keyof typeof phosphorBoldIcons | keyof typeof phosphorFillIcons | keyof typeof phosphorLightIcons | keyof typeof phosphorThinIcons | keyof typeof phosphorDuotoneIcons, `phosphor${string}`>;
+/**
+ * HugeIcons exports are PascalCase with an `Icon` suffix (e.g. `HeartIcon`,
+ * `Home01Icon`). We re-expose them with a `huge` prefix to stay consistent
+ * with the other families (e.g. `hugeHeart`, `hugeHome01`).
+ */
+type ZHugeIcon = {
+    [K in keyof typeof hugeIcons as K extends `${infer Name}Icon` ? `huge${Name}` : never]: true;
+} extends infer M ? Extract<keyof M, `huge${string}`> : never;
 declare const Z_ICONS: {};
-type ZIcon = ZLucideIcon | ZSaxIcon;
+type ZIcon = ZLucideIcon | ZSaxIcon | ZPhosphorIcon | ZHugeIcon;
 
 type ZIconAnimationTrigger = 'manual' | 'hover' | 'focus' | 'interaction' | 'always';
 declare class ZIconComponent {