uipkge-ng 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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

package/README.md

@@ -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
@@ -191,7 +191,7 @@ Components
                           → 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, 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.
+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
 
@@ -199,6 +199,7 @@ 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.
@@ -216,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
 
@@ -244,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
 
@@ -300,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
 
@@ -374,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 |
@@ -383,7 +391,6 @@ 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 |
 
 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).
 

package/dist/commands/add.js

@@ -1,6 +1,6 @@
 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 { assertWritable, conflictingFiles, isItemInstalled, targetedFiles, writeItemFiles } from '../files.js';
@@ -9,6 +9,7 @@ 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,7 +67,23 @@ 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;
     }
@@ -121,6 +138,7 @@ export async function runAdd(options) {
         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

@@ -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

@@ -1,6 +1,6 @@
 import { existsSync, readFileSync } from 'node:fs';
 import * as path from 'node:path';
-import { readConfig, registryFor } from '../config.js';
+import { fromSource, readConfig, registryFor } from '../config.js';
 import { targetedFiles } from '../files.js';
 import { adaptItem, resolveLayout } from '../layout.js';
 import { color } from '../output.js';
@@ -8,7 +8,7 @@ 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 } from '../setup.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` : ''}`;
@@ -66,9 +66,8 @@ export async function runChecks(cwd) {
     });
     if (!angular)
         return checks;
-    const nx = Boolean(deps['nx'] || existsSync(path.join(packageRoot, 'nx.json')));
-    if (nx)
-        push({ section: 'Project', title: 'Nx', status: 'fail', detail: 'Nx workspaces are not supported yet' });
+    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 ──
@@ -135,7 +134,7 @@ export async function runChecks(cwd) {
         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'] || deps['@analogjs/vite-plugin-angular']);
+    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." });
     }
@@ -169,6 +168,19 @@ export async function runChecks(cwd) {
             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'));
@@ -185,9 +197,25 @@ export async function runChecks(cwd) {
         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 index.filter(i => !FOUNDATION_ITEMS.has(i.name))) {
+    for (const item of candidates) {
         const files = targetedFiles(adaptItem(item, layout));
         if (!files.length)
             continue;

package/dist/commands/info.js

@@ -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

@@ -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

@@ -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

@@ -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/project.js

@@ -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/setup.js

@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "uipkge-ng",
-  "version": "0.1.1",
+  "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)",