npm - uipkge-ng - Versions diffs - 0.1.0 → 0.1.2 - Mend

uipkge-ng 0.1.0 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,44 @@
+# Changelog
+All notable changes to `uipkge-ng` (and its aliases `@uipkge/ng` and `uipkge`). This project follows [Semantic Versioning](https://semver.org); while it's 0.x, minor versions may change behaviour.
+## 0.1.2 — 2026-09-26
+### Added
+- Nx workspaces: Angular apps are found from their `project.json` (Node apps and libraries are skipped), `@/*` and `@/ui/*` go into `tsconfig.base.json` beside your library paths, and a Sass app gets the tokens in its `project.json`. Works from the workspace root or inside an app.
+- Components added from a URL or a local file are recorded in `components.json` under `sources`, so `list`, `diff`, `info` and `doctor` include them like registry components.
+- `doctor` and `init` warn about a global `* { margin: 0; padding: 0 }` outside a CSS layer — it overrides Tailwind v4's layered utilities and strips every component's spacing — and tell you to move it into `@layer base`.
+### Fixed
+- A project with `@analogjs/vite-plugin-angular` (used for Vitest in Nx and some Angular CLI setups) is no longer mistaken for an Analog app, which pointed Tailwind setup at Vite instead of PostCSS.
+## 0.1.1 — 2026-09-26
+### Added
+- `doctor`: checks the setup (Node, Angular app, `components.json`, registries and their tokens, aliases, Tailwind v4 and its build step, design tokens actually loaded, `cn()`, incomplete components, undeclared component packages) and prints the fix for each problem. Exits with 1 on failure; `--json`.
+### Fixed
+- `add` no longer stops half-way on a bundle item — an item with no files of its own, only dependencies, such as `charts`. Bundles now install their dependencies.
+- `add` checks every item before writing anything, so a broken item can't leave a project half-installed.
+- `init` works when the default registry (`registryUrl`) ships only its own components: `utils` and `tailwind` come from uipkge instead, and it says so.
+### Changed
+- Resolving dependencies fetches in parallel: adding all 200 uipkge components resolves in about 3 seconds instead of about 70.
+- `build` writes bare names in `registryDependencies` as uipkge URLs, so they resolve the same in every project whatever its default registry is. A bare name that matches one of the registry's own items is now an error — use `@your-registry/name` or a URL for those.
+## 0.1.0 — 2026-09-25
+First release.
+- `init`: Tailwind CSS v4, the `cn()` helper, design tokens and tsconfig paths; Sass/Less apps get the tokens registered in `angular.json`.
+- `add`: components with their dependencies, `@angular/*` pinned to the app's version; `--dry-run`, `--view`, `--diff`, `--path`, `--overwrite`; stops before writing when a file you have differs.
+- `list`, `view`, `diff`, `info`.
+- Custom folders through `aliases`, with import rewriting.
+- Named and private registries (`@name/item`, `{name}` URLs, `${ENV}` headers from the environment, `.env.local` and `.env`).
+- `build` for publishing your own registry; `mcp` server for AI assistants.
+- Multi-project Angular workspaces and npm/pnpm/yarn/bun monorepos.

package/README.md CHANGED Viewed

@@ -41,7 +41,7 @@ import { UiButtonComponent } from '@/ui/button';
 ## Requirements
 - Node.js **20.12** or newer
-- An Angular CLI application with standalone components (Analog/Vite supported; Nx workspaces not yet)
+- An Angular CLI application with standalone components — including multi-project workspaces and Nx (Analog/Vite supported)
 - npm, pnpm, yarn or bun — detected from your lockfile
 ## Getting started
@@ -92,6 +92,7 @@ Dark mode follows a `dark` class on `<html>`.
 | [`view <items...>`](#view) | show a component's details and source |
 | [`diff [item]`](#diff) | compare your copies with the registry |
 | [`info`](#info) | project, config and registry details |
+| [`doctor`](#doctor) | check the setup and explain how to fix problems |
 | [`build [registry.json]`](#publishing-your-own-registry) | build your own registry |
 | [`mcp`](#ai-assistants-mcp) | MCP server for AI assistants |
@@ -168,12 +169,37 @@ Checks what you installed from the default registry and from every named one. Ta
 Prints the CLI and Node versions, the project (app, Angular, package manager, Tailwind, PostCSS), `components.json`, the folders your aliases resolve to, whether the registry is reachable and what's installed. Paste it into bug reports; `--json` for machines.
+### doctor
+```bash
+npx uipkge-ng doctor
+```
+Checks the whole setup — like `react-native doctor` — and says how to fix anything wrong:
+```text
+Styling
+ ✔ Tailwind CSS           ^4.3.3
+ ✔ Tailwind build         .postcssrc.json uses @tailwindcss/postcss
+ ✖ Design tokens          src/uipkge.css isn't loaded
+                          → Add `@import './uipkge.css';` to src/styles.css, or list src/uipkge.css under "styles" in angular.json.
+Components
+ ! Incomplete components  files missing from 1: card
+                          → Reinstall with `uipkge-ng add card --overwrite`.
+ ✖ Component packages     not in package.json: class-variance-authority
+                          → Run `npm install class-variance-authority`.
+```
+It checks Node, the Angular app (and workspace), `components.json`, that the registry and every named registry answer (and their tokens are set), that your aliases resolve, Tailwind v4 and its build step, that the design tokens are actually loaded, the `cn()` helper, global CSS resets that would override Tailwind (`* { padding: 0 }` outside a layer), components with missing files, and npm packages your components need but `package.json` doesn't list. It changes nothing. It exits with 1 when something fails, so it can run in CI; `--json` for scripts.
 ## Existing projects
 uipkge-ng is built to be run on apps that already have code in them:
 - **Your files are never overwritten silently.** If a file `add` would write already exists with different content — say your own `button.component.ts` — it stops before writing anything. Interactively it asks; otherwise re-run with `--overwrite`, or install elsewhere with `--path src/app/uipkge`.
 - **Your styles stay yours.** Tokens live in their own file (`src/uipkge.css`); your stylesheet only gains one import line.
+- **Your global resets are checked.** Tailwind v4 keeps its utilities in a CSS layer, and CSS outside a layer always wins — so a `* { margin: 0; padding: 0 }` reset (common in older apps and in some starters) strips every component's spacing. `init` and `doctor` point it out; wrap it in `@layer base { … }` and everything spaces correctly again.
 - **Your tsconfig stays yours.** Existing paths are kept. If `@/*` already points somewhere else, uipkge's path is added as a fallback and the helper goes where your mapping resolves.
 - **Your `utils.ts` stays yours.** If `src/lib/utils.ts` exists, `init` keeps it and warns if it doesn't export `cn()`.
 - **Try first.** `add --dry-run` shows exactly what would change, `add --diff` shows how.
@@ -191,7 +217,7 @@ Each app gets its own `components.json`, tokens and paths — written to its `ts
 **npm, pnpm, yarn and bun workspaces**: run it in the app (`apps/web`). The package manager comes from the workspace's lockfile.
-**Nx** isn't supported yet.
+**Nx** workspaces work from the workspace root or inside an app (`apps/shop`). Angular apps are found from their `project.json` — Node apps and libraries are skipped — and `@/*` / `@/ui/*` go into `tsconfig.base.json` next to your library paths, where Nx keeps them. A Sass app gets the tokens in its `project.json` `styles`.
 ## components.json
@@ -219,6 +245,7 @@ Each app gets its own `components.json`, tokens and paths — written to its `ts
 | `tokens` | the file uipkge owns for design tokens and item CSS |
 | `aliases` | where components, helpers and blocks go — see [Custom folders](#custom-folders) |
 | `registries` | named and private registries — see [Registries](#registries) |
+| `sources` | written by `add`: where components added from a URL or a local file came from, so `list`, `diff`, `info` and `doctor` include them |
 ## Custom folders
@@ -237,7 +264,7 @@ Every command then uses those folders, and the `@/ui/…` and `@/lib/…` import
 ## Registries
-Components come from `https://uipkge.dev/r/angular` unless you configure otherwise. Any shadcn-style registry works — a public one, your company's private one, or one you [build yourself](#publishing-your-own-registry).
+Out of the box everything comes from the uipkge registry, `https://uipkge.dev/r/angular` — no setup needed. Any shadcn-style registry works — a public one, your company's private one, or one you [build yourself](#publishing-your-own-registry).
 ### Changing the default registry
@@ -275,7 +302,7 @@ uipkge-ng view @internal/data-table
 - `{name}` becomes the item name; `list` reads the index at `{name}` = `registry`.
 - `${VAR}` in headers comes from the environment, then `.env.local`, then `.env`. A missing variable is an error before any request is made.
 - Headers are only ever sent to that registry's own URLs.
-- `list @name`, `info` and `diff` show which of its items you have. Items added from a URL or a file can be checked with `uipkge-ng diff <url-or-file>`.
+- `list @name`, `info` and `diff` show which of its items you have. Components added from a URL or a local file are recorded under `sources`, so `list` (in their own group), `diff`, `info` and `doctor` include them too.
 ## Publishing your own registry
@@ -349,6 +376,12 @@ It never writes files — installing stays a command you run. It reads the `comp
 | `--debug` | stack traces on errors |
 | `-h, --help` / `-v, --version` | |
+## Known limits
+- **Tested by hand on macOS.** CI runs Linux, macOS and Windows on every push (Windows doesn't block yet).
+- **Analog** apps build with Vite: `init` installs `@tailwindcss/vite`, but you add `tailwindcss()` to `vite.config.ts` yourself.
+- `--path` moves only the components you name; their dependencies stay in the default folder so imports keep resolving.
 ## Troubleshooting
 | Message | Fix |
@@ -358,9 +391,8 @@ It never writes files — installing stays a command you run. It reads the `comp
 | `N files already exist with different content` | keep yours and use `--path`, or replace with `--overwrite` |
 | `The "ui" alias "…" is not mapped in tsconfig.json "paths"` | add the mapping, or reset `aliases` to the defaults |
 | `Registry "@acme" needs the environment variable ACME_TOKEN` | set it in your shell, `.env.local` or `.env` |
-| `Nx workspaces are not supported yet` | use a standalone Angular CLI app for now |
-Still stuck? Include the output of `npx uipkge-ng info` when you [open an issue](https://github.com/uday-a/uipkge-cli/issues).
+Start with `npx uipkge-ng doctor` — it finds most setup problems and tells you the fix. Still stuck? Include the output of `npx uipkge-ng info` when you [open an issue](https://github.com/uday-a/uipkge-cli/issues).
 ## Credits
@@ -368,4 +400,6 @@ Created by **Uday Adaka** as part of **[uipkge](https://uipkge.dev)**. It uses t
 ## License
-[MIT](./LICENSE) © 2026 Uday Adaka — uipkge. You can use, change and redistribute it freely; keep the copyright and license notice in copies of the CLI.
+[MIT](./LICENSE) © 2026 Uday Adaka — uipkge.
+In plain words: you can use it for anything — personal or commercial — fork it, change it, and sell or redistribute it, including your modified version. The one condition: keep the copyright line (Uday Adaka, uipkge) and the license text in every copy.

package/dist/commands/add.js CHANGED Viewed

@@ -1,14 +1,15 @@
 import { existsSync, readFileSync } from 'node:fs';
 import * as path from 'node:path';
-import { registryFor, requireConfig } from '../config.js';
+import { registryFor, requireConfig, toSource, writeConfig } from '../config.js';
 import { UipkgeError } from '../errors.js';
 import { applyCss, applyEnv, envKeys, hasCss } from '../extras.js';
-import { conflictingFiles, isItemInstalled, targetedFiles, writeItemFiles } from '../files.js';
+import { assertWritable, conflictingFiles, isItemInstalled, targetedFiles, writeItemFiles } from '../files.js';
 import { adaptItem, resolveLayout } from '../layout.js';
 import { color, log, plural } from '../output.js';
 import { installPackages, missingPackages, pinAngular } from '../packages.js';
 import { declaredDependencies, loadProject, resolveTarget } from '../project.js';
 import { confirm, isInteractive, pickComponents } from '../prompts.js';
+import { refKind } from '../registry.js';
 import { planInstall } from '../resolve.js';
 import { colorPatch, compareItem } from './diff.js';
 import { firstSentence, isListable } from './list.js';
@@ -66,10 +67,29 @@ export async function runAdd(options) {
         return printDiff(root, previewPlan, options.diff);
     if (options.dryRun)
         return printDryRun(root, config.tokens, plan, packages, devPackages, options.overwrite);
+    /** Remember where URL/file components came from, so diff/info/doctor can find them later. */
+    const recordSources = async () => {
+        const cwd = path.resolve(options.cwd);
+        let changed = false;
+        for (const ref of names.filter(n => refKind(n) === 'url' || refKind(n) === 'file')) {
+            const { name } = await registry.item(ref);
+            const source = toSource(root, cwd, ref);
+            if (config.sources?.[name] !== source) {
+                config.sources = { ...config.sources, [name]: source };
+                changed = true;
+            }
+        }
+        if (changed)
+            await writeConfig(root, config);
+    };
     if (!plan.install.length) {
+        await recordSources();
         log.info(`Already installed: ${plan.skipped.join(', ')}. ${color.dim('Use --overwrite to reinstall.')}`);
         return;
     }
+    // Every item must be writable before anything is written or installed.
+    for (const item of plan.install)
+        assertWritable(root, item);
     // Existing files that differ: never write the rest of an item around them.
     let overwrite = options.overwrite;
     const conflicts = overwrite ? [] : plan.install.flatMap(item => conflictingFiles(root, item).map(file => `${file} (${item.name})`));
@@ -115,8 +135,10 @@ export async function runAdd(options) {
             log.warn(`${item.name} ships a Tailwind v3 config; Tailwind v4 reads config from CSS, so it was not applied.`);
         if (item.docs)
             docs.push([item.name, item.docs]);
-        log.success(`${item.name} ${color.dim(`(${[plural(result.written.length, 'file'), ...extras].join(', ')})`)}`);
+        const summary = targetedFiles(item).length ? plural(result.written.length, 'file') : 'bundle';
+        log.success(`${item.name} ${color.dim(`(${[summary, ...extras].join(', ')})`)}`);
     }
+    await recordSources();
     log.blank();
     log.info(`${color.green('✔')} Added ${plural(plan.install.length, 'component')}.`);
     if (plan.skipped.length)

package/dist/commands/diff.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { existsSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
 import * as path from 'node:path';
 import { createTwoFilesPatch } from 'diff';
-import { registryFor, requireConfig } from '../config.js';
+import { fromSource, registryFor, requireConfig } from '../config.js';
 import { isItemInstalled, targetedFiles, normalizeEol } from '../files.js';
 import { adaptItem, resolveLayout } from '../layout.js';
 import { color, log, plural } from '../output.js';
@@ -59,7 +59,7 @@ export async function runDiff(options) {
         await diffOne(root, adaptItem(await registry.item(options.name), layout), options.name);
         return;
     }
-    await diffAll(root, registry, Object.keys(config.registries ?? {}), layout);
+    await diffAll(root, registry, Object.keys(config.registries ?? {}), layout, config.sources ?? {});
 }
 async function diffOne(root, item, ref) {
     const files = await compareItem(root, item);
@@ -110,8 +110,29 @@ export async function installedRefs(root, registry, namespaces, layout) {
     }));
     return refs.flat();
 }
-async function diffAll(root, registry, namespaces, layout) {
-    const installed = await installedRefs(root, registry, namespaces, layout);
+/**
+ * Components added from a URL or file (components.json `sources`) that are still installed,
+ * as loadable refs mapped to how they're shown (the stored source). A source that can't be
+ * loaded any more is reported and skipped.
+ */
+export async function installedSources(root, registry, sources, layout) {
+    const found = new Map();
+    for (const source of Object.values(sources)) {
+        const ref = fromSource(root, source);
+        try {
+            if (isItemInstalled(root, adaptItem(await registry.item(ref), layout)))
+                found.set(ref, source);
+        }
+        catch (error) {
+            log.warn(`Skipped ${source}: ${error instanceof Error ? error.message : String(error)}`);
+        }
+    }
+    return found;
+}
+async function diffAll(root, registry, namespaces, layout, sources) {
+    const external = await installedSources(root, registry, sources, layout);
+    const installed = [...(await installedRefs(root, registry, namespaces, layout)), ...external.keys()];
+    const label = (ref) => external.get(ref) ?? ref;
     if (!installed.length) {
         log.info('No uipkge components are installed yet. Add one with `uipkge-ng add <name>`.');
         return;
@@ -133,8 +154,8 @@ async function diffAll(root, registry, namespaces, layout) {
     }
     outdated.sort();
     log.info(`${plural(outdated.length, 'component')} ${outdated.length === 1 ? 'differs' : 'differ'} from the registry:`);
-    for (const name of outdated)
-        log.info(`  ${color.yellow('•')} ${name}`);
+    for (const ref of outdated)
+        log.info(`  ${color.yellow('•')} ${label(ref)}`);
     log.blank();
     log.info(color.dim('See the changes with `uipkge-ng diff <name>`.'));
 }

package/dist/commands/doctor.js ADDED Viewed

@@ -0,0 +1,279 @@
+import { existsSync, readFileSync } from 'node:fs';
+import * as path from 'node:path';
+import { fromSource, readConfig, registryFor } from '../config.js';
+import { targetedFiles } from '../files.js';
+import { adaptItem, resolveLayout } from '../layout.js';
+import { color } from '../output.js';
+import { installArgs, missingPackages } from '../packages.js';
+import { angularApps, declaredDependencies, detectPackageManager, findApp, readPackageJson, resolveTarget } from '../project.js';
+import { FOUNDATION_ITEMS, namedRegistryFrom } from '../registry.js';
+import { projectEnv } from '../env.js';
+import { TAILWIND_POSTCSS, readPostcssConfig, relativeImport, unlayeredResets } from '../setup.js';
+const MIN_NODE = [20, 12];
+/** `3: a, b, c` or `202: a, b, c, d, e, f … and 196 more`. */
+const summarize = (names, shown = 6) => `${names.length}: ${names.slice(0, shown).join(', ')}${names.length > shown ? ` … and ${names.length - shown} more` : ''}`;
+/**
+ * Checks a project's uipkge setup, like `react-native doctor`. Never throws:
+ * every problem becomes a failed check with a fix, and later checks that
+ * depend on it are skipped rather than failing with noise.
+ */
+export async function runChecks(cwd) {
+    const checks = [];
+    const push = (c) => (checks.push(c), c);
+    // ── Environment ──
+    const [major = 0, minor = 0] = process.versions.node.split('.').map(Number);
+    const nodeOk = major > MIN_NODE[0] || (major === MIN_NODE[0] && minor >= MIN_NODE[1]);
+    push({
+        section: 'Environment',
+        title: 'Node.js',
+        status: nodeOk ? 'pass' : 'fail',
+        detail: process.version,
+        fix: nodeOk ? undefined : `uipkge-ng needs Node ${MIN_NODE.join('.')} or newer.`,
+    });
+    // ── Project ──
+    const location = findApp(path.resolve(cwd));
+    if (!location) {
+        push({ section: 'Project', title: 'package.json', status: 'fail', detail: 'none found', fix: 'Run this inside your Angular project.' });
+        return checks;
+    }
+    if (location.ambiguous) {
+        push({
+            section: 'Project',
+            title: 'Angular app',
+            status: 'fail',
+            detail: `this workspace has ${location.ambiguous.length} apps: ${location.ambiguous.map(a => a.name).join(', ')}`,
+            fix: `Run it inside one app's folder, or pass it with \`-c ${path.relative(cwd, location.ambiguous[0].root) || '.'}\`.`,
+        });
+        return checks;
+    }
+    const { root, packageRoot } = location;
+    let pkg;
+    try {
+        pkg = await readPackageJson(packageRoot);
+    }
+    catch (error) {
+        push({ section: 'Project', title: 'package.json', status: 'fail', detail: error.message });
+        return checks;
+    }
+    const deps = declaredDependencies(pkg);
+    const angular = deps['@angular/core'];
+    push({
+        section: 'Project',
+        title: 'Angular',
+        status: angular ? 'pass' : 'fail',
+        detail: angular ? `${angular}${location.app ? ` (app: ${location.app.name})` : ''}` : 'no @angular/core in package.json',
+        fix: angular ? undefined : 'uipkge-ng works with Angular CLI apps.',
+    });
+    if (!angular)
+        return checks;
+    if (existsSync(path.join(packageRoot, 'nx.json')))
+        push({ section: 'Project', title: 'Workspace', status: 'pass', detail: 'Nx' });
+    const pm = detectPackageManager(packageRoot, pkg);
+    push({ section: 'Project', title: 'Package manager', status: 'pass', detail: pm });
+    // ── Configuration ──
+    let config = null;
+    try {
+        config = await readConfig(root);
+    }
+    catch (error) {
+        push({ section: 'Configuration', title: 'components.json', status: 'fail', detail: error.message, fix: 'Fix the JSON, or run `uipkge-ng init --overwrite`.' });
+        return checks;
+    }
+    if (!config) {
+        push({ section: 'Configuration', title: 'components.json', status: 'fail', detail: `not found in ${root}`, fix: 'Run `uipkge-ng init`.' });
+        return checks;
+    }
+    push({ section: 'Configuration', title: 'components.json', status: 'pass', detail: path.relative(cwd, path.join(root, 'components.json')) || 'components.json' });
+    const registry = registryFor(root, config, cwd);
+    let index = null;
+    try {
+        index = (await registry.index()).items;
+        push({ section: 'Configuration', title: 'Registry', status: 'pass', detail: `${registry.baseUrl} (${index.length} items)` });
+    }
+    catch (error) {
+        push({
+            section: 'Configuration',
+            title: 'Registry',
+            status: 'fail',
+            detail: `${registry.baseUrl}: ${error.message}`,
+            fix: 'Check your connection, "registryUrl" in components.json, or UIPKGE_REGISTRY_URL.',
+        });
+    }
+    const env = projectEnv(root);
+    for (const [ns, raw] of Object.entries(config.registries ?? {})) {
+        try {
+            namedRegistryFrom(ns, raw, env);
+            await registry.index(ns);
+            push({ section: 'Configuration', title: `Registry ${ns}`, status: 'pass' });
+        }
+        catch (error) {
+            push({
+                section: 'Configuration',
+                title: `Registry ${ns}`,
+                status: 'fail',
+                detail: error.message,
+                fix: `Check "${ns}" under "registries" in components.json; tokens come from the environment, .env.local or .env.`,
+            });
+        }
+    }
+    let layout = null;
+    try {
+        layout = resolveLayout(root, config.aliases);
+        push({ section: 'Configuration', title: 'Folders (aliases)', status: 'pass', detail: `ui → ${layout.dirs.ui}, lib → ${layout.dirs.lib}` });
+    }
+    catch (error) {
+        push({ section: 'Configuration', title: 'Folders (aliases)', status: 'fail', detail: error.message, fix: 'Map the aliases in tsconfig "paths", or run `uipkge-ng init --overwrite`.' });
+    }
+    // ── Styling ──
+    const tailwind = deps['tailwindcss'];
+    const tailwindMajor = Number(tailwind?.match(/\d+/)?.[0] ?? 0);
+    push({
+        section: 'Styling',
+        title: 'Tailwind CSS',
+        status: tailwindMajor >= 4 ? 'pass' : 'fail',
+        detail: tailwind ?? 'not installed',
+        fix: tailwindMajor >= 4 ? undefined : tailwind ? 'uipkge components need Tailwind CSS v4.' : 'Run `uipkge-ng init`.',
+    });
+    const analog = Boolean(deps['@analogjs/platform']);
+    if (analog) {
+        push({ section: 'Styling', title: 'Tailwind build', status: 'warn', detail: 'Analog builds with Vite', fix: "Check vite.config.ts has `tailwindcss()` from '@tailwindcss/vite' in plugins." });
+    }
+    else {
+        const postcss = await readPostcssConfig(packageRoot);
+        const wired = postcss?.content.includes(TAILWIND_POSTCSS);
+        push({
+            section: 'Styling',
+            title: 'Tailwind build',
+            status: wired ? 'pass' : 'fail',
+            detail: wired ? `${postcss.file} uses ${TAILWIND_POSTCSS}` : postcss ? `${postcss.file} doesn't use ${TAILWIND_POSTCSS}` : 'no PostCSS config',
+            fix: wired ? undefined : `Add "${TAILWIND_POSTCSS}" to your PostCSS plugins, or run \`uipkge-ng init --overwrite\`.`,
+        });
+    }
+    const tokensFile = path.join(root, config.tokens);
+    if (!existsSync(tokensFile)) {
+        push({ section: 'Styling', title: 'Design tokens', status: 'fail', detail: `${config.tokens} is missing`, fix: 'Run `uipkge-ng init --overwrite`.' });
+    }
+    else {
+        // Loaded either by an @import in the global stylesheet or as its own entry in angular.json "styles".
+        const importPath = relativeImport(config.styles, config.tokens);
+        const stylesFile = path.join(root, config.styles);
+        const imported = existsSync(stylesFile) && new RegExp(`@import\\s+(url\\()?['"]${importPath.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&')}['"]`).test(readFileSync(stylesFile, 'utf8'));
+        const app = location.app ?? angularApps(packageRoot).find(a => a.root === root);
+        const registered = Boolean(app?.styles.some(s => path.resolve(root, s) === tokensFile));
+        push({
+            section: 'Styling',
+            title: 'Design tokens',
+            status: imported || registered ? 'pass' : 'fail',
+            detail: imported ? `${config.styles} imports ${importPath}` : registered ? `${config.tokens} is in angular.json "styles"` : `${config.tokens} isn't loaded`,
+            fix: imported || registered ? undefined : `Add \`@import '${importPath}';\` to ${config.styles}, or list ${config.tokens} under "styles" in angular.json.`,
+        });
+    }
+    const globalStyles = path.join(root, config.styles);
+    if (existsSync(globalStyles)) {
+        const resets = unlayeredResets(readFileSync(globalStyles, 'utf8'));
+        push({
+            section: 'Styling',
+            title: 'Global resets',
+            status: resets.length ? 'warn' : 'pass',
+            detail: resets.length
+                ? `${config.styles} zeroes margin/padding on \`${resets[0]}\` outside a CSS layer, which overrides Tailwind's utilities (components lose their spacing)`
+                : 'none that override Tailwind',
+            fix: resets.length ? `Move that rule into \`@layer base { … }\` in ${config.styles}.` : undefined,
+        });
+    }
+    if (layout) {
+        const utils = path.join(root, layout.dirs.lib, 'utils.ts');
+        const hasCn = existsSync(utils) && /export\s+(?:function|const|let)\s+cn\b|export\s*\{[^}]*\bcn\b[^}]*\}/.test(readFileSync(utils, 'utf8'));
+        push({
+            section: 'Styling',
+            title: 'cn() helper',
+            status: hasCn ? 'pass' : 'fail',
+            detail: hasCn ? path.relative(root, utils) : existsSync(utils) ? `${path.relative(root, utils)} doesn't export cn()` : `${path.relative(root, utils)} is missing`,
+            fix: hasCn ? undefined : 'Every component imports it. Run `uipkge-ng init --overwrite`, or add it (`uipkge-ng view utils`).',
+        });
+    }
+    // ── Components ──
+    if (!index || !layout) {
+        push({ section: 'Components', title: 'Installed components', status: 'skip', detail: 'needs the registry and folders above' });
+        return checks;
+    }
+    // Registry components, plus those added from a URL or file (recorded in `sources`).
+    const candidates = index.filter(i => !FOUNDATION_ITEMS.has(i.name));
+    for (const [name, source] of Object.entries(config.sources ?? {})) {
+        try {
+            candidates.push(await registry.item(fromSource(root, source)));
+        }
+        catch (error) {
+            push({
+                section: 'Components',
+                title: `Source of ${name}`,
+                status: 'warn',
+                detail: `${source}: ${error.message}`,
+                fix: `Fix or remove "${name}" under "sources" in components.json.`,
+            });
+        }
+    }
+    const installed = [];
+    const partial = [];
+    for (const item of candidates) {
+        const files = targetedFiles(adaptItem(item, layout));
+        if (!files.length)
+            continue;
+        const present = files.filter(f => existsSync(resolveTarget(root, f.target))).length;
+        if (present === files.length)
+            installed.push(item);
+        else if (present > 0)
+            partial.push(item.name);
+    }
+    push({ section: 'Components', title: 'Installed components', status: 'pass', detail: installed.length ? summarize(installed.map(i => i.name)) : 'none yet' });
+    if (partial.length) {
+        push({
+            section: 'Components',
+            title: 'Incomplete components',
+            status: 'warn',
+            detail: `files missing from ${summarize(partial)}`,
+            fix: `Reinstall with \`uipkge-ng add ${partial.join(' ')} --overwrite\`.`,
+        });
+    }
+    const missing = missingPackages(installed.flatMap(i => i.dependencies ?? []), deps);
+    push({
+        section: 'Components',
+        title: 'Component packages',
+        status: missing.length ? 'fail' : 'pass',
+        detail: missing.length ? `not in package.json: ${missing.join(', ')}` : 'all declared',
+        fix: missing.length ? `Run \`${pm} ${installArgs(pm, missing, false).join(' ')}\`.` : undefined,
+    });
+    return checks;
+}
+const MARK = {
+    pass: color.green('✔'),
+    warn: color.yellow('!'),
+    fail: color.red('✖'),
+    skip: color.dim('-'),
+};
+export async function runDoctor(options) {
+    const checks = await runChecks(options.cwd);
+    const failed = checks.filter(c => c.status === 'fail').length;
+    const warned = checks.filter(c => c.status === 'warn').length;
+    if (failed)
+        process.exitCode = 1;
+    if (options.json) {
+        process.stdout.write(`${JSON.stringify({ ok: failed === 0, checks }, null, 2)}\n`);
+        return;
+    }
+    const width = Math.max(...checks.map(c => c.title.length)) + 2;
+    const out = [color.bold('uipkge-ng doctor')];
+    let section = '';
+    for (const c of checks) {
+        if (c.section !== section)
+            out.push('', color.bold(c.section)), (section = c.section);
+        out.push(` ${MARK[c.status]} ${c.title.padEnd(width)}${c.detail ? color.dim(c.detail) : ''}`);
+        if (c.fix && (c.status === 'fail' || c.status === 'warn'))
+            out.push(`   ${' '.repeat(width)}${color.cyan('→')} ${c.fix}`);
+    }
+    const passed = checks.filter(c => c.status === 'pass').length;
+    out.push('', failed
+        ? color.red(`${failed} problem${failed === 1 ? '' : 's'} found`) + color.dim(` · ${passed} passed${warned ? ` · ${warned} warning${warned === 1 ? '' : 's'}` : ''}`)
+        : color.green('Everything looks good.') + color.dim(` ${passed} checks passed${warned ? ` · ${warned} warning${warned === 1 ? '' : 's'}` : ''}`), '');
+    process.stdout.write(out.join('\n'));
+}

package/dist/commands/info.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { existsSync } from 'node:fs';
 import * as path from 'node:path';
 import { readConfig, registryFor } from '../config.js';
 import { isItemInstalled } from '../files.js';
+import { installedSources } from './diff.js';
 import { adaptItem, resolveLayout } from '../layout.js';
 import { color } from '../output.js';
 import { declaredDependencies, detectPackageManager, findApp, readPackageJson } from '../project.js';
@@ -26,7 +27,7 @@ export async function collectInfo(cwd, version) {
             app: location?.app?.name ?? null,
             apps: location?.ambiguous?.map(a => a.name) ?? null,
             angular: deps['@angular/core'] ?? null,
-            analog: Boolean(deps['@analogjs/platform'] || deps['@analogjs/vite-plugin-angular']),
+            analog: Boolean(deps['@analogjs/platform']),
             nx: Boolean(deps['nx'] || (packageRoot && existsSync(path.join(packageRoot, 'nx.json')))),
             packageManager: packageRoot && pkg ? detectPackageManager(packageRoot, pkg) : null,
             tailwind: deps['tailwindcss'] ?? null,
@@ -61,6 +62,13 @@ export async function collectInfo(cwd, version) {
     catch (error) {
         info.registry.error = error instanceof Error ? error.message : String(error);
     }
+    // Components added from a URL or file, recorded by `add`.
+    if (root && config?.sources && layout) {
+        const found = new Set((await installedSources(root, registryFor(root, config, cwd), config.sources, layout)).values());
+        for (const [name, source] of Object.entries(config.sources))
+            if (found.has(source))
+                info.installed.push(`${name} (${source})`);
+    }
     // Named registries: best effort, an unreachable one just adds nothing.
     if (root && config?.registries) {
         const registry = registryFor(root, config, cwd);
@@ -98,7 +106,7 @@ export async function runInfo(options) {
         row('package manager', info.project.packageManager ?? '—'),
         row('tailwind', yes(info.project.tailwind)),
         row('postcss config', yes(info.project.postcssConfig)),
-        row('analog / nx', `${info.project.analog ? 'analog' : 'no'} / ${info.project.nx ? color.yellow('nx (not supported yet)') : 'no'}`),
+        row('analog / nx', `${info.project.analog ? 'analog' : 'no'} / ${info.project.nx ? 'nx' : 'no'}`),
         '',
         color.bold('components.json'),
         info.config ? JSON.stringify(info.config, null, 2).split('\n').map(l => `  ${l}`).join('\n') : row('status', color.yellow('not initialized — run `uipkge-ng init`')),

package/dist/commands/init.js CHANGED Viewed

@@ -7,10 +7,10 @@ import { writeItemFiles } from '../files.js';
 import { adaptItem, resolveLayout } from '../layout.js';
 import { color, log } from '../output.js';
 import { installPackages, missingPackages } from '../packages.js';
-import { declaredDependencies, loadProject } from '../project.js';
+import { declaredDependencies, isNxWorkspace, loadProject } from '../project.js';
 import { confirm, isInteractive } from '../prompts.js';
 import { createRegistry, DEFAULT_REGISTRY_URL, NotFoundError, resolveRegistryUrl } from '../registry.js';
-import { addGlobalStyle, appTsconfigEdit, planTailwind, readPostcssConfig, relativeImport, withTailwindPlugin, tsconfigsToEdit, withTokensImport, writeIfChanged, } from '../setup.js';
+import { addGlobalStyle, appTsconfigEdit, planTailwind, readPostcssConfig, relativeImport, withTailwindPlugin, tsconfigsToEdit, unlayeredResets, withTokensImport, writeIfChanged, } from '../setup.js';
 export async function runInit(options) {
     const project = await loadProject(options.cwd);
     const { root, packageRoot } = project;
@@ -74,14 +74,17 @@ export async function runInit(options) {
         done.push('Tailwind CSS v4 installed (add the Vite plugin)');
     }
     // 3. tsconfig aliases the component sources import.
-    const tsconfigs = tsconfigsToEdit(root);
+    // Nx keeps every path in the shared tsconfig.base.json: an app tsconfig with its own `paths`
+    // would stop seeing libraries added there later.
+    const nxBase = path.join(packageRoot, 'tsconfig.base.json');
+    const tsconfigs = isNxWorkspace(packageRoot) && existsSync(nxBase) ? [path.relative(root, nxBase)] : tsconfigsToEdit(root);
     if (!tsconfigs.length)
         throw new UipkgeError(`No tsconfig.json in ${root}.`);
     const edited = [];
     for (const file of tsconfigs) {
         const abs = path.join(root, file);
         if (await writeIfChanged(abs, appTsconfigEdit(root, file, await readFile(abs, 'utf8'))))
-            edited.push(file);
+            edited.push(path.relative(packageRoot, abs).replace(/\\/g, '/'));
     }
     if (edited.length)
         done.push(`tsconfig paths \`@/*\` and \`@/ui/*\` added (${edited.join(', ')})`);
@@ -106,6 +109,12 @@ export async function runInit(options) {
     await linkTokens(project, config.styles, config.tokens, done);
     await writeConfig(root, config);
     done.push('components.json written');
+    // An unlayered `* { padding: 0 }` beats Tailwind v4's layered utilities and strips every component's spacing.
+    const stylesPath = path.join(root, config.styles);
+    const resets = existsSync(stylesPath) ? unlayeredResets(await readFile(stylesPath, 'utf8')) : [];
+    if (resets.length) {
+        log.warn(`${config.styles} resets margin/padding on \`${resets[0]}\` outside a CSS layer; it will override Tailwind's utilities. Move it into \`@layer base { … }\`.`);
+    }
     log.blank();
     log.success(color.bold('uipkge is ready.'));
     for (const line of done)
@@ -134,8 +143,9 @@ async function linkTokens(project, styles, tokens, done) {
     // Sass/Less: a CSS import there doesn't carry Tailwind v4's syntax reliably, so the tokens become their own global stylesheet.
     if (!styles.endsWith('.css') && project.app) {
         const entry = path.relative(project.packageRoot, path.join(root, tokens)).replace(/\\/g, '/');
-        if (await addGlobalStyle(project.packageRoot, project.app.name, entry))
-            done.push(`angular.json styles include ${entry}`);
+        const where = path.relative(project.packageRoot, project.app.config.file).replace(/\\/g, '/');
+        if (await addGlobalStyle(project.app.config, entry))
+            done.push(`${where} styles include ${entry}`);
         return;
     }
     if (!existsSync(stylesFile)) {

package/dist/commands/list.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as path from 'node:path';
-import { readConfig, registryFor } from '../config.js';
+import { fromSource, readConfig, registryFor } from '../config.js';
 import { UipkgeError } from '../errors.js';
 import { isItemInstalled } from '../files.js';
 import { adaptItem, resolveLayout } from '../layout.js';
@@ -17,6 +17,8 @@ export function firstSentence(text) {
     return end === -1 ? flat : flat.slice(0, end);
 }
 const OTHER = 'other';
+/** Group for components added from a URL or local file (components.json `sources`). */
+export const SOURCES_GROUP = 'added from a url or file';
 /** Filters, then groups by first category (alphabetical, `other` last), rows sorted by name. */
 export function groupRows(items, filter) {
     const query = filter.query?.trim().toLowerCase();
@@ -43,9 +45,11 @@ export function groupRows(items, filter) {
     for (const row of rows)
         byCategory.set(row.category, [...(byCategory.get(row.category) ?? []), row]);
     return [...byCategory]
-        .sort(([a], [b]) => (a === OTHER ? 1 : b === OTHER ? -1 : a.localeCompare(b)))
+        // Registry categories alphabetically, then `other`, then components from URLs/files.
+        .sort(([a], [b]) => rank(a) - rank(b) || a.localeCompare(b))
         .map(([cat, list]) => ({ category: cat, rows: list.sort((x, y) => x.name.localeCompare(y.name)) }));
 }
+const rank = (category) => (category === SOURCES_GROUP ? 2 : category === OTHER ? 1 : 0);
 export const ellipsize = (text, width) => width < 2 ? '' : text.length <= width ? text : `${text.slice(0, width - 1).trimEnd()}…`;
 export async function runList(options) {
     const cwd = path.resolve(options.cwd);
@@ -66,7 +70,21 @@ export async function runList(options) {
             layout = undefined;
         }
     }
-    const groups = groupRows(options.namespace ? index.items.map(i => ({ ...i, name: `${options.namespace}/${i.name}` })) : index.items, {
+    // Components added from a URL or file (recorded by `add`) aren't in any index; list them in their own group.
+    const fromSources = [];
+    if (!options.namespace && root && config?.sources) {
+        for (const source of Object.values(config.sources)) {
+            try {
+                const item = await registry.item(fromSource(root, source));
+                fromSources.push({ ...item, categories: [SOURCES_GROUP], description: `${source}${item.description ? ` — ${item.description}` : ''}` });
+            }
+            catch {
+                // An unreachable source is reported by `doctor`; browsing shouldn't fail on it.
+            }
+        }
+    }
+    const items = options.namespace ? index.items.map(i => ({ ...i, name: `${options.namespace}/${i.name}` })) : [...index.items, ...fromSources];
+    const groups = groupRows(items, {
         query: options.query,
         category: options.category,
         installedOnly: options.installedOnly,

package/dist/config.js CHANGED Viewed

@@ -3,9 +3,17 @@ import { readFile, writeFile } from 'node:fs/promises';
 import * as path from 'node:path';
 import { projectEnv } from './env.js';
 import { UipkgeError } from './errors.js';
-import { createRegistry, resolveRegistryUrl } from './registry.js';
+import { createRegistry, refKind, resolveRegistryUrl } from './registry.js';
 export const CONFIG_FILE = 'components.json';
 export const DEFAULT_ALIASES = { ui: '@/ui', lib: '@/lib', blocks: '@/app/components/blocks' };
+/** How `sources` stores a ref: URLs as they are, local files relative to the app so the entry stays portable. */
+export function toSource(root, cwd, ref) {
+    return refKind(ref) === 'file' ? path.relative(root, path.resolve(cwd, ref)).replace(/\\/g, '/') : ref;
+}
+/** A `sources` entry as a ref the registry client can load from anywhere. */
+export function fromSource(root, source) {
+    return refKind(source) === 'url' ? source : path.resolve(root, source);
+}
 export function defaultConfig(registryUrl) {
     return {
         framework: 'angular',

package/dist/files.js CHANGED Viewed

@@ -26,15 +26,24 @@ export function conflictingFiles(root, item) {
         return normalizeEol(readFileSync(abs, 'utf8')) === normalizeEol(f.content) ? [] : [path.relative(root, abs)];
     });
 }
-export async function writeItemFiles(root, item, overwrite) {
-    const result = { written: [], kept: [] };
-    const files = targetedFiles(item);
-    if (!files.length)
-        throw new UipkgeError(`Registry item \`${item.name}\` has no files to install.`);
-    for (const file of files) {
+/**
+ * Throws if the item can't be written as-is. `add` checks every item before
+ * writing any, so a bad item never leaves a project half-installed. An item
+ * without files (a bundle such as `charts`) is fine: it only brings its
+ * dependencies.
+ */
+export function assertWritable(root, item) {
+    for (const file of targetedFiles(item)) {
         if (typeof file.content !== 'string') {
-            throw new UipkgeError(`Registry item \`${item.name}\` is missing the content of ${file.target}.`);
+            throw new UipkgeError(`Registry item \`${item.name}\` is missing the content of ${file.target}.`, 'Nothing was installed.');
         }
+        resolveTarget(root, file.target);
+    }
+}
+export async function writeItemFiles(root, item, overwrite) {
+    const result = { written: [], kept: [] };
+    assertWritable(root, item);
+    for (const file of targetedFiles(item)) {
         const abs = resolveTarget(root, file.target);
         const rel = path.relative(root, abs);
         if (existsSync(abs) && !overwrite) {

package/dist/index.js CHANGED Viewed

@@ -6,6 +6,7 @@ import { normalizeOptionalValues } from './args.js';
 import { runAdd } from './commands/add.js';
 import { runBuild } from './commands/build.js';
 import { runDiff } from './commands/diff.js';
+import { runDoctor } from './commands/doctor.js';
 import { runInfo } from './commands/info.js';
 import { runInit } from './commands/init.js';
 import { runList } from './commands/list.js';
@@ -21,6 +22,7 @@ const COMMAND_HELP = [
     ['view <items...>', "show a component's details and files"],
     ['diff [item]', 'compare installed components with the registry'],
     ['info', 'show project, config and registry details'],
+    ['doctor', 'check the setup and explain how to fix problems'],
     ['build [file]', 'build your own registry (registry.json → public/r)'],
     ['mcp', 'run an MCP server so AI assistants can browse components'],
 ];
@@ -47,7 +49,7 @@ Options
   -s, --silent          only print errors
       --category <c>    only one category (list)
   -i, --installed       only installed components (list)
-      --json            machine-readable output (list, view, info)
+      --json            machine-readable output (list, view, info, doctor)
       --output <dir>    where build writes the registry (default public/r)
       --debug           show stack traces on errors
   -h, --help            show this help
@@ -55,7 +57,7 @@ Options
 Registry: https://uipkge.dev/r/angular (override with components.json "registryUrl" or UIPKGE_REGISTRY_URL)
 `;
-const COMMANDS = new Set(['init', 'add', 'list', 'ls', 'view', 'diff', 'info', 'build', 'mcp']);
+const COMMANDS = new Set(['init', 'add', 'list', 'ls', 'view', 'diff', 'info', 'doctor', 'build', 'mcp']);
 const OPTION_COMMANDS = {
     overwrite: ['init', 'add'],
     all: ['add'],
@@ -65,7 +67,7 @@ const OPTION_COMMANDS = {
     diff: ['add'],
     category: ['list', 'ls'],
     installed: ['list', 'ls'],
-    json: ['list', 'ls', 'view', 'info'],
+    json: ['list', 'ls', 'view', 'info', 'doctor'],
     output: ['build'],
 };
 async function main(argv) {
@@ -135,6 +137,8 @@ async function main(argv) {
             return runDiff({ cwd, name: rest[0] });
         case 'info':
             return runInfo({ cwd, json: values.json, version: VERSION });
+        case 'doctor':
+            return runDoctor({ cwd, json: values.json });
         case 'build':
             return runBuild({ cwd, registry: rest[0] ?? 'registry.json', output: values.output ?? 'public/r' });
         case 'mcp':

package/dist/project.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync } from 'node:fs';
+import { existsSync, readFileSync, readdirSync } from 'node:fs';
 import { readFile } from 'node:fs/promises';
 import * as path from 'node:path';
 import { parse } from 'jsonc-parser';
@@ -52,23 +52,53 @@ const isInside = (child, parent) => {
     const rel = path.relative(parent, child);
     return !rel.startsWith('..') && !path.isAbsolute(rel);
 };
-/** Application projects in angular.json (libraries have no global styles to theme). */
+function toApp(packageRoot, name, p, config, rootDir) {
+    const root = rootDir ?? path.resolve(packageRoot, p.root ?? '');
+    const styles = ((p.architect ?? p.targets)?.build?.options?.styles ?? [])
+        .map(s => (typeof s === 'string' ? s : s.input))
+        .filter((s) => Boolean(s))
+        .map(s => path.relative(root, path.resolve(packageRoot, s)).replace(/\\/g, '/'));
+    return { name, root, styles, config };
+}
+/** project.json files of an Nx workspace (a few levels deep, skipping build output and dependencies). */
+function nxProjectFiles(dir, depth = 0, out = []) {
+    if (depth > 4)
+        return out;
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        if (entry.isFile() && entry.name === 'project.json')
+            out.push(path.join(dir, entry.name));
+        else if (entry.isDirectory() && !/^(node_modules|dist|tmp|coverage|\..*)$/.test(entry.name))
+            nxProjectFiles(path.join(dir, entry.name), depth + 1, out);
+    }
+    return out;
+}
+/**
+ * Angular application projects (libraries have no global styles to theme): from
+ * angular.json, or in an Nx workspace from each app's project.json, keeping only
+ * apps whose build target is Angular's.
+ */
 export function angularApps(packageRoot) {
     const file = path.join(packageRoot, 'angular.json');
-    if (!existsSync(file))
+    if (existsSync(file)) {
+        const doc = (parse(readFileSync(file, 'utf8')) ?? {});
+        return Object.entries(doc.projects ?? {})
+            .filter(([, p]) => (p.projectType ?? 'application') === 'application')
+            .map(([name, p]) => toApp(packageRoot, name, p, { file, path: ['projects', name] }));
+    }
+    if (!existsSync(path.join(packageRoot, 'nx.json')))
         return [];
-    const doc = (parse(readFileSync(file, 'utf8')) ?? {});
-    return Object.entries(doc.projects ?? {})
-        .filter(([, p]) => (p.projectType ?? 'application') === 'application')
-        .map(([name, p]) => {
-        const root = path.resolve(packageRoot, p.root ?? '');
-        const styles = ((p.architect ?? p.targets)?.build?.options?.styles ?? [])
-            .map(s => (typeof s === 'string' ? s : s.input))
-            .filter((s) => Boolean(s))
-            .map(s => path.relative(root, path.resolve(packageRoot, s)).replace(/\\/g, '/'));
-        return { name, root, styles };
+    return nxProjectFiles(packageRoot).flatMap(projectFile => {
+        const p = (parse(readFileSync(projectFile, 'utf8')) ?? {});
+        const build = p.targets?.build;
+        const angularBuild = /angular/.test(build?.executor ?? build?.builder ?? '');
+        if (p.projectType !== 'application' || !angularBuild)
+            return [];
+        const root = path.dirname(projectFile);
+        return [toApp(packageRoot, p.name ?? path.basename(root), p, { file: projectFile, path: [] }, root)];
     });
 }
+/** An Nx workspace: its tsconfig paths live in the shared tsconfig.base.json. */
+export const isNxWorkspace = (packageRoot) => existsSync(path.join(packageRoot, 'nx.json'));
 /**
  * Which Angular app `cwd` belongs to. An existing components.json between cwd
  * and the package root wins; otherwise the angular.json project containing
@@ -112,16 +142,15 @@ export async function loadProject(cwd) {
     if (!angularCore) {
         throw new UipkgeError(`${root} is not an Angular project (no @angular/core in package.json).`);
     }
-    if (deps['nx'] || existsSync(path.join(packageRoot, 'nx.json'))) {
-        throw new UipkgeError('Nx workspaces are not supported yet.', 'Run uipkge-ng inside a standalone Angular CLI app.');
-    }
     return {
         root,
         packageRoot,
         app: location.app,
         packageJson,
         angularCore,
-        isAnalog: Boolean(deps['@analogjs/platform'] || deps['@analogjs/vite-plugin-angular']),
+        // The Analog framework itself. @analogjs/vite-plugin-angular alone is common in Angular CLI and
+        // Nx workspaces (Vitest), and those still build with the Angular CLI, not Vite.
+        isAnalog: Boolean(deps['@analogjs/platform']),
         hasTailwind: Boolean(deps['tailwindcss']),
         packageManager: detectPackageManager(packageRoot, packageJson),
     };

package/dist/resolve.js CHANGED Viewed

@@ -28,17 +28,28 @@ transform = item => item) {
     const skipped = [];
     const dependencies = new Set();
     const devDependencies = new Set();
-    async function visit(ref, direct) {
-        // The default registry's foundation is init's job; a component depending on
-        // `utils` must not reinstall it. `@acme/utils` is someone else's item.
+    // The default registry's foundation is init's job; a component depending on
+    // `utils` must not reinstall it. `@acme/utils` is someone else's item.
+    const isFoundation = (ref) => {
         const kind = refKind(ref);
         const ownRegistry = kind === 'name' || (kind === 'url' && ref.startsWith(`${registry.baseUrl}/`));
-        if (ownRegistry && FOUNDATION_ITEMS.has(itemNameFromRef(ref)))
+        return ownRegistry && FOUNDATION_ITEMS.has(itemNameFromRef(ref));
+    };
+    // Start fetches early and in parallel; the registry caches them, so the ordered
+    // walk below just awaits ones already in flight. Errors surface there, not here.
+    const prefetch = (refs) => {
+        for (const ref of refs)
+            if (!isFoundation(ref))
+                registry.item(ref).catch(() => undefined);
+    };
+    async function visit(ref, direct) {
+        if (isFoundation(ref))
             return undefined;
         const item = transform(await registry.item(ref), direct);
         if (visited.has(item.name))
             return item.name;
         visited.add(item.name);
+        prefetch(item.registryDependencies ?? []);
         for (const dep of item.registryDependencies ?? [])
             await visit(dep, false);
         if (isInstalled(item) && !overwrite) {
@@ -51,6 +62,7 @@ transform = item => item) {
         return item.name;
     }
     const requested = [];
+    prefetch(names);
     for (const name of names) {
         const resolved = await visit(name, true);
         if (resolved && !requested.includes(resolved))

package/dist/setup.js CHANGED Viewed

@@ -142,21 +142,23 @@ export async function writeIfChanged(file, next) {
 }
 /**
  * Puts `entry` (relative to the workspace root) first in the app's global
- * `styles` for every target that has them (build, test), keeping angular.json's
+ * `styles` for every target that has them (build, test), in whichever file
+ * configures the app — angular.json or an Nx project.json — keeping its
  * formatting. Returns whether anything changed.
  */
-export async function addGlobalStyle(packageRoot, project, entry) {
-    const file = path.join(packageRoot, 'angular.json');
-    let text = await readFile(file, 'utf8');
-    const doc = parse(text);
-    const entryOf = doc.projects?.[project];
-    const key = entryOf?.architect ? 'architect' : 'targets';
+export async function addGlobalStyle(config, entry) {
+    let text = await readFile(config.file, 'utf8');
+    let node = parse(text);
+    for (const key of config.path)
+        node = node?.[key];
+    const project = node;
+    const key = project?.architect ? 'architect' : 'targets';
     let changed = false;
-    for (const [name, target] of Object.entries(entryOf?.[key] ?? {})) {
+    for (const [name, target] of Object.entries(project?.[key] ?? {})) {
         const styles = target.options?.styles;
         if (!Array.isArray(styles) || styles.some(s => (typeof s === 'string' ? s : s.input) === entry))
             continue;
-        const edits = modify(text, ['projects', project, key, name, 'options', 'styles', 0], entry, {
+        const edits = modify(text, [...config.path, key, name, 'options', 'styles', 0], entry, {
             isArrayInsertion: true,
             formattingOptions: { insertSpaces: true, tabSize: 2, eol: '\n' },
         });
@@ -164,6 +166,35 @@ export async function addGlobalStyle(packageRoot, project, entry) {
         changed = true;
     }
     if (changed)
-        await writeFile(file, text, 'utf8');
+        await writeFile(config.file, text, 'utf8');
     return changed;
 }
+/**
+ * Universal rules outside any `@layer` that zero margin or padding (`* { padding: 0 }`). Tailwind v4 puts utilities in a cascade layer, and unlayered CSS
+ * always wins over layered CSS, so a reset like this strips the spacing from every component.
+ * Returns the offending selectors.
+ */
+export function unlayeredResets(css) {
+    let text = css.replace(/\/\*[\s\S]*?\*\//g, '');
+    // Drop @layer blocks (brace-matched) — rules inside a layer are fine.
+    for (let i = text.search(/@layer\b[^;{]*\{/); i !== -1; i = text.search(/@layer\b[^;{]*\{/)) {
+        let depth = 0;
+        let j = text.indexOf('{', i);
+        for (; j < text.length; j++) {
+            if (text[j] === '{')
+                depth++;
+            else if (text[j] === '}' && --depth === 0)
+                break;
+        }
+        text = text.slice(0, i) + text.slice(j + 1);
+    }
+    const found = [];
+    for (const m of text.matchAll(/(^|[};])\s*([^{};@]+?)\s*\{([^{}]*)\}/g)) {
+        const selector = m[2].trim().replace(/\s+/g, ' ');
+        // Only the universal selector reaches component elements; `html, body { margin: 0 }` is harmless.
+        const universal = selector.split(',').some(part => /^\*(::?[a-z-]+)?$/.test(part.trim()));
+        if (universal && /(^|[;\s])(margin|padding)\s*:\s*0(px)?\s*(;|$)/.test(m[3]))
+            found.push(selector);
+    }
+    return found;
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "uipkge-ng",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Add uipkge Angular components to your project: copy the source, own the code.",
   "license": "MIT",
   "author": "Uday Adaka (https://uipkge.dev)",
@@ -25,7 +25,8 @@
     "uipkge-ng": "dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "CHANGELOG.md"
   ],
   "engines": {
     "node": ">=20.12"
@@ -34,7 +35,9 @@
     "build": "tsc -p tsconfig.build.json",
     "dev": "tsx src/index.ts",
     "test": "vitest run",
-    "typecheck": "tsc --noEmit -p tsconfig.json"
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@clack/prompts": "^1.8.1",
@@ -43,6 +46,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
+    "@vitest/coverage-v8": "3.2.7",
     "tsx": "^4.20.0",
     "typescript": "^5.9.3",
     "vitest": "^3.2.7"