@trineui/cli 0.1.0 → 0.1.2

package/README.md

@@ -16,7 +16,8 @@ Notes:
 
 - `button` is the only supported component in this public-style baseline
 - omitting `--target` uses the current directory when it already matches the supported Angular app shape
-- when the current directory is not a supported Angular app target, omitting `--target` falls back to `apps/demo` for local Trine repo verification only
+- when the current directory is not a supported Angular app target, the CLI auto-detects a single Angular app target under the current directory and proceeds automatically
+- when multiple Angular app targets are found, the CLI stops and asks for `--target <app-root>`
 - external targets can run `trine add button` from the app root or pass an explicit app root such as `--target /absolute/path/to/angular-app`
 - the canonical public package name is `@trineui/cli`
 - the CLI command exposed through the package bin is still `trine`
@@ -30,6 +31,7 @@ Notes:
 - for `apps/demo`, `@trine/ui` resolves locally for delivered components while `@trine/ui/*` temporarily bridges non-localized components back to the authoring source
 - the delivered shared styling baseline is `tokens.css` + `trine-consumer.css`
 - the current proven target dependency baseline is Angular 21, Tailwind CSS v4, and `class-variance-authority`
+- the current proven target shape accepts a global stylesheet entry such as `src/styles.scss`, `src/styles.css`, or `src/global.scss` when it is resolved from `angular.json`
 - use a Node LTS line supported by Angular 21 in the target repo; odd-numbered Node releases can build with warnings
 - when `package.json` is present in the target root, the CLI warns if Tailwind CSS v4 or `class-variance-authority` are missing
 

package/dist/add-component.js

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'node:url';
 import ts from 'typescript';
 const STYLE_SOURCE_FILES = ['styles/tokens.css', 'styles/trine-consumer.css'];
 const TEMPLATE_ROOT = fileURLToPath(new URL('../templates/', import.meta.url));
+const LOCAL_REPO_DEMO_ROOT = path.resolve(TEMPLATE_ROOT, '../../../apps/demo');
 const STYLE_IMPORT_LINE = "@import './styles/trine-consumer.css';";
 const DEMO_BRIDGE_COMMENT = '// Temporary demo verification bridge: delivered local components resolve locally; other components still re-export from the authoring source.';
 const DEMO_LOCAL_COMPONENTS = [
@@ -60,10 +61,7 @@ const DEMO_PROXY_EXPORT_LINES = [
 ];
 export function addComponent(manifest, options) {
     const targetRoot = path.resolve(options.cwd, options.target);
-    const targetAppDir = path.join(targetRoot, 'src', 'app');
-    const targetStylesEntry = path.join(targetRoot, 'src', 'styles.scss');
-    const targetTsconfig = path.join(targetRoot, 'tsconfig.app.json');
-    assertTargetShape(manifest.componentName, targetRoot, targetAppDir, targetStylesEntry, targetTsconfig);
+    const { targetStylesEntry, targetTsconfig } = resolveTargetShape(manifest.componentName, targetRoot);
     const componentDestDir = path.join(targetRoot, 'src', 'app', 'components', 'ui', manifest.componentName);
     const stylesDestDir = path.join(targetRoot, 'src', 'styles');
     const componentCopyTargets = manifest.sourceFiles.map((source) => ({
@@ -94,7 +92,7 @@ export function addComponent(manifest, options) {
         updatedFiles.push(toTargetRelativePath(targetRoot, componentBarrelPath));
     }
     const uiRootBarrelPath = path.join(targetRoot, 'src', 'app', 'components', 'ui', 'index.ts');
-    const uiRootUpdated = isDemoTarget(targetRoot, options.cwd)
+    const uiRootUpdated = isDemoTarget(targetRoot)
         ? rewriteDemoUiRootBarrel(uiRootBarrelPath)
         : ensureLinesFile(uiRootBarrelPath, [manifest.uiExportLine]);
     if (uiRootUpdated) {
@@ -110,7 +108,7 @@ export function addComponent(manifest, options) {
     if (stylesResult.authoringImportStillPresent) {
         warnings.push(`${toTargetRelativePath(targetRoot, targetStylesEntry)} still imports @trine/ui/styles/trine.css for the broader demo authoring baseline.`);
     }
-    if (isDemoTarget(targetRoot, options.cwd)) {
+    if (isDemoTarget(targetRoot)) {
         warnings.push('apps/demo keeps non-localized components on a temporary @trine/ui/* bridge back to packages/ui so the full demo app can still build while delivered components resolve locally.');
     }
     else {
@@ -145,7 +143,10 @@ function ensureSharedStyleBaseline(targetRoot, stylesDestDir, componentLabel) {
         warnings,
     };
 }
-function assertTargetShape(componentName, targetRoot, targetAppDir, targetStylesEntry, targetTsconfig) {
+function resolveTargetShape(componentName, targetRoot) {
+    const targetAppDir = path.join(targetRoot, 'src', 'app');
+    const targetTsconfig = path.join(targetRoot, 'tsconfig.app.json');
+    const targetStylesEntry = resolveStylesEntry(targetRoot);
     const missing = [];
     if (!existsSync(targetRoot)) {
         missing.push(targetRoot);
@@ -153,18 +154,25 @@ function assertTargetShape(componentName, targetRoot, targetAppDir, targetStyles
     if (!existsSync(targetAppDir)) {
         missing.push(targetAppDir);
     }
-    if (!existsSync(targetStylesEntry)) {
-        missing.push(targetStylesEntry);
+    if (!targetStylesEntry) {
+        missing.push(`${path.join(targetRoot, 'src', 'styles.scss')} or ${path.join(targetRoot, 'src', 'styles.css')} or the first resolvable build styles entry in ${path.join(targetRoot, 'angular.json')}`);
     }
     if (!existsSync(targetTsconfig)) {
         missing.push(targetTsconfig);
     }
     if (missing.length > 0) {
         throw new Error([
-            `trine add ${componentName} requires an Angular app target with src/app, src/styles.scss, and tsconfig.app.json.`,
+            `trine add ${componentName} requires an Angular app target with src/app, a global stylesheet entry, and tsconfig.app.json.`,
             ...missing.map((file) => `- ${file}`),
         ].join('\n'));
     }
+    if (!targetStylesEntry) {
+        throw new Error(`trine add ${componentName} could not resolve a global stylesheet entry for ${targetRoot}.`);
+    }
+    return {
+        targetStylesEntry,
+        targetTsconfig,
+    };
 }
 function ensureLinesFile(filePath, lines) {
     const existing = existsSync(filePath) ? readFileSync(filePath, 'utf8') : '';
@@ -213,14 +221,14 @@ function ensureTsconfigAlias(tsconfigPath, targetRoot, cwd) {
     const config = (parsed.config ?? {});
     config.compilerOptions ??= {};
     config.compilerOptions.paths ??= {};
-    const aliasTarget = isDemoTarget(targetRoot, cwd)
-        ? toPosixPath(path.relative(cwd, path.join(targetRoot, 'src', 'app', 'components', 'ui', 'index.ts')))
+    const aliasTarget = isDemoTarget(targetRoot)
+        ? toPosixPath(path.relative(process.cwd(), path.join(targetRoot, 'src', 'app', 'components', 'ui', 'index.ts')))
         : toConfigRelativePath(path.relative(path.dirname(tsconfigPath), path.join(targetRoot, 'src', 'app', 'components', 'ui', 'index.ts')));
     const wildcardTarget = 'packages/ui/*';
     const currentAlias = config.compilerOptions.paths['@trine/ui'];
     const currentWildcardAlias = config.compilerOptions.paths['@trine/ui/*'];
     const aliasIsCurrent = Array.isArray(currentAlias) && currentAlias.length === 1 && currentAlias[0] === aliasTarget;
-    const wildcardIsCurrent = !isDemoTarget(targetRoot, cwd) ||
+    const wildcardIsCurrent = !isDemoTarget(targetRoot) ||
         (Array.isArray(currentWildcardAlias) &&
             currentWildcardAlias.length === 1 &&
             currentWildcardAlias[0] === wildcardTarget);
@@ -228,7 +236,7 @@ function ensureTsconfigAlias(tsconfigPath, targetRoot, cwd) {
         return false;
     }
     config.compilerOptions.paths['@trine/ui'] = [aliasTarget];
-    if (isDemoTarget(targetRoot, cwd)) {
+    if (isDemoTarget(targetRoot)) {
         config.compilerOptions.paths['@trine/ui/*'] = [wildcardTarget];
     }
     else if ('@trine/ui/*' in config.compilerOptions.paths) {
@@ -265,8 +273,9 @@ function ensureStylesImport(stylesPath) {
         authoringImportStillPresent: current.includes("@import '@trine/ui/styles/trine.css';"),
     };
 }
-function isDemoTarget(targetRoot, cwd) {
-    return path.resolve(targetRoot) === path.resolve(cwd, 'apps/demo');
+function isDemoTarget(targetRoot) {
+    return (existsSync(LOCAL_REPO_DEMO_ROOT) &&
+        path.resolve(targetRoot) === path.resolve(LOCAL_REPO_DEMO_ROOT));
 }
 function toPosixPath(filePath) {
     return filePath.split(path.sep).join(path.posix.sep);
@@ -313,3 +322,41 @@ function readTargetDependencyWarnings(targetRoot, componentLabel) {
 function looksLikeTailwindV4(range) {
     return /(^|[^\d])4(\D|$)/.test(range);
 }
+export function looksLikeAngularAppRoot(root) {
+    return (existsSync(path.join(root, 'src', 'app')) &&
+        existsSync(path.join(root, 'tsconfig.app.json')) &&
+        resolveStylesEntry(root) !== undefined);
+}
+function resolveStylesEntry(targetRoot) {
+    const conventionalStyles = ['src/styles.scss', 'src/styles.css'];
+    for (const relativePath of conventionalStyles) {
+        const absolutePath = path.join(targetRoot, relativePath);
+        if (existsSync(absolutePath)) {
+            return absolutePath;
+        }
+    }
+    const angularJsonPath = path.join(targetRoot, 'angular.json');
+    if (!existsSync(angularJsonPath)) {
+        return undefined;
+    }
+    try {
+        const angularJson = JSON.parse(readFileSync(angularJsonPath, 'utf8'));
+        for (const project of Object.values(angularJson.projects ?? {})) {
+            const styles = project.architect?.build?.options?.styles ?? project.targets?.build?.options?.styles ?? [];
+            for (const styleEntry of styles) {
+                const relativePath = typeof styleEntry === 'string' ? styleEntry : (styleEntry.input ?? undefined);
+                if (!relativePath) {
+                    continue;
+                }
+                const absolutePath = path.join(targetRoot, relativePath);
+                if (existsSync(absolutePath)) {
+                    return absolutePath;
+                }
+            }
+        }
+    }
+    catch {
+        return undefined;
+    }
+    return undefined;
+}

package/dist/index.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
-import { existsSync } from 'node:fs';
+import { readdirSync } from 'node:fs';
 import path from 'node:path';
+import { looksLikeAngularAppRoot } from "./add-component.js";
 import { addButton } from "./add-button.js";
 const HELP_TEXT = `Usage:
   npx @trineui/cli@latest add button [--target <app-root>]
@@ -8,12 +9,13 @@ const HELP_TEXT = `Usage:
 
 Defaults:
   - current directory when it matches the supported Angular app target shape
-  - otherwise apps/demo for local Trine repo verification only
+  - otherwise auto-detect a single Angular app target under the current directory
+  - when multiple Angular app targets are found, re-run with --target <app-root>
 
 Notes:
   - v0 supports Button only
   - external targets can run trine add button from the app root or pass --target /absolute/path/to/angular-app
-  - the current proven target model is Angular 21 + src/app + src/styles.scss + tsconfig.app.json
+  - the current proven target model is Angular 21 + src/app + tsconfig.app.json + a global stylesheet entry such as src/styles.scss, src/styles.css, or src/global.scss resolved from angular.json
   - use a Node LTS line supported by Angular 21 in the target repo
   - the current proven styling/runtime baseline requires Tailwind CSS v4 and class-variance-authority in the target repo
   - consumer-owned component files fail clearly if they already exist
@@ -29,7 +31,7 @@ function main(argv) {
     if (!isSupportedComponent(component)) {
         throw new Error(component ? `Unsupported component: ${component}\n\n${HELP_TEXT}` : HELP_TEXT);
     }
-    const target = readTarget(rest) ?? defaultTarget(process.cwd());
+    const target = readTarget(rest) ?? autoDetectTarget(process.cwd());
     const result = addButton({
         target,
         cwd: process.cwd(),
@@ -48,6 +50,7 @@ function printSuccess(component, result) {
     const relativeTarget = path.relative(process.cwd(), result.targetRoot) || '.';
     const displayTarget = relativeTarget.startsWith('..') ? result.targetRoot : relativeTarget;
     const componentLabel = capitalize(component);
+    const isRepoDemoVerification = result.warnings.some((warning) => warning.includes('temporary @trine/ui/* bridge'));
     const lines = [
         `trine add ${component} completed.`,
         `Target: ${displayTarget}`,
@@ -62,7 +65,7 @@ function printSuccess(component, result) {
         lines.push('', 'Warnings:', ...result.warnings.map((warning) => `- ${warning}`));
     }
     lines.push('', 'Manual next steps:', `- Ensure the target repo has Tailwind CSS v4 and class-variance-authority installed before building the delivered ${componentLabel}.`, `- Build the target app and confirm ${componentLabel} imports resolve through the local @trine/ui alias.`, `- Review the copied ${component}.skin.ts and tokens.css if you want local consumer customization.`);
-    if (relativeTarget === 'apps/demo') {
+    if (isRepoDemoVerification) {
         lines.push('- Open /validation-shell and review the CLI delivery proof section for the temporary demo verification path.');
     }
     console.log(lines.join('\n'));
@@ -73,11 +76,52 @@ function isSupportedComponent(value) {
 function capitalize(value) {
     return value.charAt(0).toUpperCase() + value.slice(1);
 }
-function defaultTarget(cwd) {
-    return looksLikeAngularAppRoot(cwd) ? '.' : 'apps/demo';
+function autoDetectTarget(cwd) {
+    if (looksLikeAngularAppRoot(cwd)) {
+        return '.';
+    }
+    const matches = findAngularAppTargets(cwd);
+    if (matches.length === 1) {
+        return matches[0];
+    }
+    if (matches.length > 1) {
+        throw new Error([
+            'Multiple Angular app targets were found under the current directory. Re-run with --target <app-root>:',
+            ...matches.map((match) => `- ${match}`),
+        ].join('\n'));
+    }
+    return '.';
+}
+function findAngularAppTargets(root) {
+    const matches = new Set();
+    walkForAngularApps(root, root, matches);
+    return [...matches].sort((left, right) => left.localeCompare(right));
+}
+function walkForAngularApps(root, currentDir, matches) {
+    for (const entry of readdirSync(currentDir, { withFileTypes: true })) {
+        if (entry.isDirectory()) {
+            if (shouldSkipDirectory(entry.name)) {
+                continue;
+            }
+            walkForAngularApps(root, path.join(currentDir, entry.name), matches);
+            continue;
+        }
+        if (!entry.isFile() || entry.name !== 'tsconfig.app.json') {
+            continue;
+        }
+        const candidateRoot = currentDir;
+        if (!looksLikeAngularAppRoot(candidateRoot)) {
+            continue;
+        }
+        const relativeRoot = path.relative(root, candidateRoot) || '.';
+        matches.add(toPosixPath(relativeRoot));
+    }
+}
+function shouldSkipDirectory(name) {
+    return ['.angular', '.git', '.playwright-cli', 'dist', 'node_modules', 'output'].includes(name);
 }
-function looksLikeAngularAppRoot(root) {
-    return ['src/app', 'src/styles.scss', 'tsconfig.app.json'].every((relativePath) => existsSync(path.join(root, relativePath)));
+function toPosixPath(filePath) {
+    return filePath.split(path.sep).join(path.posix.sep);
 }
 try {
     main(process.argv.slice(2));

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@trineui/cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "description": "Copy-paste ownership CLI for Trine UI components.",
   "main": "./dist/index.js",
   "bin": {
-    "trine": "./bin/trine.js"
+    "trine": "bin/trine.js"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json",