@webpieces/dev-config 0.2.29 → 0.2.31

package/README.md

@@ -93,10 +93,10 @@ Automatically adds architecture validation and circular dependency checking to N
 nx add @webpieces/dev-config
 
 # Generate dependency graph
-nx run .:arch:generate
+nx run architecture:generate
 
 # Validate architecture
-nx run .:arch:validate-no-cycles
+nx run architecture:validate-no-cycles
 
 # Check project for circular dependencies
 nx run my-project:check-circular-deps

package/architecture/lib/graph-generator.d.ts

@@ -10,7 +10,7 @@
  */
 export declare function generateRawGraph(): Promise<Record<string, string[]>>;
 /**
- * Transform project names to @webpieces/xxx format
+ * Transform project names (sorting dependencies only - no scope transformation)
  */
 export declare function transformGraph(rawGraph: Record<string, string[]>): Record<string, string[]>;
 /**

package/architecture/lib/graph-generator.js

@@ -62,18 +62,14 @@ async function generateRawGraph() {
     return rawDeps;
 }
 /**
- * Transform project names to @webpieces/xxx format
+ * Transform project names (sorting dependencies only - no scope transformation)
  */
 function transformGraph(rawGraph) {
     const result = {};
     for (const [projectName, deps] of Object.entries(rawGraph)) {
-        // Avoid double prefix if already has @webpieces/
-        const transformedName = projectName.startsWith('@webpieces/')
-            ? projectName
-            : `@webpieces/${projectName}`;
-        const transformedDeps = deps
-            .map((d) => (d.startsWith('@webpieces/') ? d : `@webpieces/${d}`))
-            .sort();
+        // Use project names as-is - don't force @webpieces scope on client projects
+        const transformedName = projectName;
+        const transformedDeps = deps.sort();
         result[transformedName] = transformedDeps;
     }
     return result;

package/architecture/lib/graph-generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-generator.js","sourceRoot":"","sources":["../../../../../../packages/tooling/dev-config/architecture/lib/graph-generator.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Graph Generator\n *\n * Generates dependency graph from project.json files in the workspace.\n * Reads build.dependsOn and implicitDependencies to determine project relationships.\n */\n\nimport {\n    createProjectGraphAsync,\n    readProjectsConfigurationFromProjectGraph,\n    ProjectConfiguration,\n} from '@nx/devkit';\n\n/**\n * Projects to exclude from graph validation (tools, configs, etc.)\n */\nconst EXCLUDED_PROJECTS = new Set<string>([]);\n\n/**\n * Extract project dependencies from project.json's build.dependsOn and implicitDependencies\n */\nfunction extractBuildDependencies(projectConfig: ProjectConfiguration): string[] {\n    const deps: string[] = [];\n\n    // 1. Read from build.dependsOn\n    const buildTarget = projectConfig.targets?.['build'];\n    if (buildTarget && buildTarget.dependsOn) {\n        for (const dep of buildTarget.dependsOn) {\n            if (typeof dep === 'string') {\n                // Format: \"project-name:build\" or just \"build\" (for self)\n                const match = dep.match(/^([^:]+):build$/);\n                if (match) {\n                    deps.push(match[1]);\n                }\n            }\n        }\n    }\n\n    // 2. Also read from implicitDependencies\n    if (projectConfig.implicitDependencies && Array.isArray(projectConfig.implicitDependencies)) {\n        for (const dep of projectConfig.implicitDependencies) {\n            if (typeof dep === 'string' && !deps.includes(dep)) {\n                deps.push(dep);\n            }\n        }\n    }\n\n    return deps.sort();\n}\n\n/**\n * Generate raw dependency graph from project.json files\n * Returns: { projectName: [dependencyNames] }\n */\nexport async function generateRawGraph(): Promise<Record<string, string[]>> {\n    const projectGraph = await createProjectGraphAsync();\n    const projectsConfig = readProjectsConfigurationFromProjectGraph(projectGraph);\n    const rawDeps: Record<string, string[]> = {};\n\n    for (const [projectName, projectConfig] of Object.entries(projectsConfig.projects)) {\n        // Skip excluded projects (tools, plugins)\n        if (EXCLUDED_PROJECTS.has(projectName)) {\n            continue;\n        }\n\n        // Extract dependencies from build.dependsOn in project.json\n        const deps = extractBuildDependencies(projectConfig);\n        rawDeps[projectName] = deps;\n    }\n\n    return rawDeps;\n}\n\n/**\n * Transform project names to @webpieces/xxx format\n */\nexport function transformGraph(rawGraph: Record<string, string[]>): Record<string, string[]> {\n    const result: Record<string, string[]> = {};\n\n    for (const [projectName, deps] of Object.entries(rawGraph)) {\n        // Avoid double prefix if already has @webpieces/\n        const transformedName = projectName.startsWith('@webpieces/')\n            ? projectName\n            : `@webpieces/${projectName}`;\n\n        const transformedDeps = deps\n            .map((d) => (d.startsWith('@webpieces/') ? d : `@webpieces/${d}`))\n            .sort();\n\n        result[transformedName] = transformedDeps;\n    }\n\n    return result;\n}\n\n/**\n * Generate complete dependency graph with transformations\n */\nexport async function generateGraph(): Promise<Record<string, string[]>> {\n    const rawGraph = await generateRawGraph();\n    return transformGraph(rawGraph);\n}\n"]}
+{"version":3,"file":"graph-generator.js","sourceRoot":"","sources":["../../../../../../packages/tooling/dev-config/architecture/lib/graph-generator.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;AAiDH,4CAiBC;AAKD,wCAYC;AAKD,sCAGC;AAzFD,uCAIoB;AAEpB;;GAEG;AACH,MAAM,iBAAiB,GAAG,IAAI,GAAG,CAAS,EAAE,CAAC,CAAC;AAE9C;;GAEG;AACH,SAAS,wBAAwB,CAAC,aAAmC;IACjE,MAAM,IAAI,GAAa,EAAE,CAAC;IAE1B,+BAA+B;IAC/B,MAAM,WAAW,GAAG,aAAa,CAAC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC;IACrD,IAAI,WAAW,IAAI,WAAW,CAAC,SAAS,EAAE,CAAC;QACvC,KAAK,MAAM,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE,CAAC;YACtC,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC1B,0DAA0D;gBAC1D,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;gBAC3C,IAAI,KAAK,EAAE,CAAC;oBACR,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;gBACxB,CAAC;YACL,CAAC;QACL,CAAC;IACL,CAAC;IAED,yCAAyC;IACzC,IAAI,aAAa,CAAC,oBAAoB,IAAI,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,oBAAoB,CAAC,EAAE,CAAC;QAC1F,KAAK,MAAM,GAAG,IAAI,aAAa,CAAC,oBAAoB,EAAE,CAAC;YACnD,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACnB,CAAC;QACL,CAAC;IACL,CAAC;IAED,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC;AACvB,CAAC;AAED;;;GAGG;AACI,KAAK,UAAU,gBAAgB;IAClC,MAAM,YAAY,GAAG,MAAM,IAAA,gCAAuB,GAAE,CAAC;IACrD,MAAM,cAAc,GAAG,IAAA,kDAAyC,EAAC,YAAY,CAAC,CAAC;IAC/E,MAAM,OAAO,GAA6B,EAAE,CAAC;IAE7C,KAAK,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACjF,0CAA0C;QAC1C,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YACrC,SAAS;QACb,CAAC;QAED,4DAA4D;QAC5D,MAAM,IAAI,GAAG,wBAAwB,CAAC,aAAa,CAAC,CAAC;QACrD,OAAO,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAChC,CAAC;IAED,OAAO,OAAO,CAAC;AACnB,CAAC;AAED;;GAEG;AACH,SAAgB,cAAc,CAAC,QAAkC;IAC7D,MAAM,MAAM,GAA6B,EAAE,CAAC;IAE5C,KAAK,MAAM,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QACzD,4EAA4E;QAC5E,MAAM,eAAe,GAAG,WAAW,CAAC;QACpC,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QAEpC,MAAM,CAAC,eAAe,CAAC,GAAG,eAAe,CAAC;IAC9C,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED;;GAEG;AACI,KAAK,UAAU,aAAa;IAC/B,MAAM,QAAQ,GAAG,MAAM,gBAAgB,EAAE,CAAC;IAC1C,OAAO,cAAc,CAAC,QAAQ,CAAC,CAAC;AACpC,CAAC","sourcesContent":["/**\n * Graph Generator\n *\n * Generates dependency graph from project.json files in the workspace.\n * Reads build.dependsOn and implicitDependencies to determine project relationships.\n */\n\nimport {\n    createProjectGraphAsync,\n    readProjectsConfigurationFromProjectGraph,\n    ProjectConfiguration,\n} from '@nx/devkit';\n\n/**\n * Projects to exclude from graph validation (tools, configs, etc.)\n */\nconst EXCLUDED_PROJECTS = new Set<string>([]);\n\n/**\n * Extract project dependencies from project.json's build.dependsOn and implicitDependencies\n */\nfunction extractBuildDependencies(projectConfig: ProjectConfiguration): string[] {\n    const deps: string[] = [];\n\n    // 1. Read from build.dependsOn\n    const buildTarget = projectConfig.targets?.['build'];\n    if (buildTarget && buildTarget.dependsOn) {\n        for (const dep of buildTarget.dependsOn) {\n            if (typeof dep === 'string') {\n                // Format: \"project-name:build\" or just \"build\" (for self)\n                const match = dep.match(/^([^:]+):build$/);\n                if (match) {\n                    deps.push(match[1]);\n                }\n            }\n        }\n    }\n\n    // 2. Also read from implicitDependencies\n    if (projectConfig.implicitDependencies && Array.isArray(projectConfig.implicitDependencies)) {\n        for (const dep of projectConfig.implicitDependencies) {\n            if (typeof dep === 'string' && !deps.includes(dep)) {\n                deps.push(dep);\n            }\n        }\n    }\n\n    return deps.sort();\n}\n\n/**\n * Generate raw dependency graph from project.json files\n * Returns: { projectName: [dependencyNames] }\n */\nexport async function generateRawGraph(): Promise<Record<string, string[]>> {\n    const projectGraph = await createProjectGraphAsync();\n    const projectsConfig = readProjectsConfigurationFromProjectGraph(projectGraph);\n    const rawDeps: Record<string, string[]> = {};\n\n    for (const [projectName, projectConfig] of Object.entries(projectsConfig.projects)) {\n        // Skip excluded projects (tools, plugins)\n        if (EXCLUDED_PROJECTS.has(projectName)) {\n            continue;\n        }\n\n        // Extract dependencies from build.dependsOn in project.json\n        const deps = extractBuildDependencies(projectConfig);\n        rawDeps[projectName] = deps;\n    }\n\n    return rawDeps;\n}\n\n/**\n * Transform project names (sorting dependencies only - no scope transformation)\n */\nexport function transformGraph(rawGraph: Record<string, string[]>): Record<string, string[]> {\n    const result: Record<string, string[]> = {};\n\n    for (const [projectName, deps] of Object.entries(rawGraph)) {\n        // Use project names as-is - don't force @webpieces scope on client projects\n        const transformedName = projectName;\n        const transformedDeps = deps.sort();\n\n        result[transformedName] = transformedDeps;\n    }\n\n    return result;\n}\n\n/**\n * Generate complete dependency graph with transformations\n */\nexport async function generateGraph(): Promise<Record<string, string[]>> {\n    const rawGraph = await generateRawGraph();\n    return transformGraph(rawGraph);\n}\n"]}

package/architecture/lib/graph-generator.ts

@@ -72,20 +72,15 @@ export async function generateRawGraph(): Promise<Record<string, string[]>> {
 }
 
 /**
- * Transform project names to @webpieces/xxx format
+ * Transform project names (sorting dependencies only - no scope transformation)
  */
 export function transformGraph(rawGraph: Record<string, string[]>): Record<string, string[]> {
     const result: Record<string, string[]> = {};
 
     for (const [projectName, deps] of Object.entries(rawGraph)) {
-        // Avoid double prefix if already has @webpieces/
-        const transformedName = projectName.startsWith('@webpieces/')
-            ? projectName
-            : `@webpieces/${projectName}`;
-
-        const transformedDeps = deps
-            .map((d) => (d.startsWith('@webpieces/') ? d : `@webpieces/${d}`))
-            .sort();
+        // Use project names as-is - don't force @webpieces scope on client projects
+        const transformedName = projectName;
+        const transformedDeps = deps.sort();
 
         result[transformedName] = transformedDeps;
     }

package/architecture/lib/graph-visualizer.js

@@ -26,6 +26,14 @@ const LEVEL_COLORS = {
     2: '#FFF3E0', // Light orange - applications
     3: '#FCE4EC', // Light pink - higher level
 };
+/**
+ * Remove scope from name for display
+ * '@scope/name' → 'name'
+ * 'name' → 'name'
+ */
+function getShortName(name) {
+    return name.includes('/') ? name.split('/').pop() : name;
+}
 /**
  * Generate Graphviz DOT format from the graph
  */
@@ -43,7 +51,7 @@ function generateDot(graph, title = 'WebPieces Architecture') {
     }
     // Create nodes with level-based colors
     for (const [project, info] of Object.entries(graph)) {
-        const shortName = project.replace('@webpieces/', '');
+        const shortName = getShortName(project);
         const color = LEVEL_COLORS[info.level] || '#F5F5F5';
         dot += `  "${shortName}" [fillcolor="${color}", label="${shortName}\\n(L${info.level})"];\n`;
     }
@@ -52,7 +60,7 @@ function generateDot(graph, title = 'WebPieces Architecture') {
     for (const [level, projects] of Object.entries(levels)) {
         dot += `  { rank=same; `;
         projects.forEach((p) => {
-            const shortName = p.replace('@webpieces/', '');
+            const shortName = getShortName(p);
             dot += `"${shortName}"; `;
         });
         dot += '}\n';
@@ -60,9 +68,9 @@ function generateDot(graph, title = 'WebPieces Architecture') {
     dot += '\n';
     // Create edges (dependencies)
     for (const [project, info] of Object.entries(graph)) {
-        const shortName = project.replace('@webpieces/', '');
+        const shortName = getShortName(project);
         for (const dep of info.dependsOn || []) {
-            const depShortName = dep.replace('@webpieces/', '');
+            const depShortName = getShortName(dep);
             dot += `  "${shortName}" -> "${depShortName}";\n`;
         }
     }

package/architecture/lib/graph-visualizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-visualizer.js","sourceRoot":"","sources":["../../../../../../packages/tooling/dev-config/architecture/lib/graph-visualizer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Graph Visualizer\n *\n * Generates visual representations of the architecture graph:\n * - DOT format (for Graphviz)\n * - Interactive HTML (using viz.js)\n *\n * Output files go to tmp/webpieces/ for easy viewing without committing.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport { execSync } from 'child_process';\nimport type { EnhancedGraph } from './graph-sorter';\n\n/**\n * Level colors for visualization\n */\nconst LEVEL_COLORS: Record<number, string> = {\n    0: '#E8F5E9', // Light green - foundation\n    1: '#E3F2FD', // Light blue - middleware\n    2: '#FFF3E0', // Light orange - applications\n    3: '#FCE4EC', // Light pink - higher level\n};\n\n/**\n * Generate Graphviz DOT format from the graph\n */\nexport function generateDot(graph: EnhancedGraph, title: string = 'WebPieces Architecture'): string {\n    let dot = 'digraph Architecture {\\n';\n    dot += '  rankdir=TB;\\n';\n    dot += '  node [shape=box, style=filled, fontname=\"Arial\"];\\n';\n    dot += '  edge [fontname=\"Arial\"];\\n\\n';\n\n    // Group projects by level\n    const levels: Record<number, string[]> = {};\n    for (const [project, info] of Object.entries(graph)) {\n        if (!levels[info.level]) levels[info.level] = [];\n        levels[info.level].push(project);\n    }\n\n    // Create nodes with level-based colors\n    for (const [project, info] of Object.entries(graph)) {\n        const shortName = project.replace('@webpieces/', '');\n        const color = LEVEL_COLORS[info.level] || '#F5F5F5';\n        dot += `  \"${shortName}\" [fillcolor=\"${color}\", label=\"${shortName}\\\\n(L${info.level})\"];\\n`;\n    }\n\n    dot += '\\n';\n\n    // Create same-rank subgraphs for each level\n    for (const [level, projects] of Object.entries(levels)) {\n        dot += `  { rank=same; `;\n        projects.forEach((p) => {\n            const shortName = p.replace('@webpieces/', '');\n            dot += `\"${shortName}\"; `;\n        });\n        dot += '}\\n';\n    }\n\n    dot += '\\n';\n\n    // Create edges (dependencies)\n    for (const [project, info] of Object.entries(graph)) {\n        const shortName = project.replace('@webpieces/', '');\n        for (const dep of info.dependsOn || []) {\n            const depShortName = dep.replace('@webpieces/', '');\n            dot += `  \"${shortName}\" -> \"${depShortName}\";\\n`;\n        }\n    }\n\n    dot += '\\n  labelloc=\"t\";\\n';\n    dot += `  label=\"${title}\\\\n(from architecture/dependencies.json)\";\\n`;\n    dot += '  fontsize=20;\\n';\n    dot += '}\\n';\n\n    return dot;\n}\n\n/**\n * Generate interactive HTML with embedded SVG using viz.js\n */\nexport function generateHTML(dot: string, title: string = 'WebPieces Architecture'): string {\n    return `<!DOCTYPE html>\n<html>\n<head>\n    <title>${title}</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/viz.js@2.1.2/viz.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/viz.js@2.1.2/full.render.js\"></script>\n    <style>\n        body {\n            margin: 0;\n            padding: 20px;\n            font-family: Arial, sans-serif;\n            background: #f5f5f5;\n        }\n        h1 {\n            text-align: center;\n            color: #333;\n        }\n        #graph {\n            text-align: center;\n            background: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend {\n            margin: 20px auto;\n            max-width: 600px;\n            padding: 15px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend h2 {\n            margin-top: 0;\n        }\n        .legend-item {\n            margin: 8px 0;\n        }\n        .legend-box {\n            display: inline-block;\n            width: 20px;\n            height: 20px;\n            border: 1px solid #ccc;\n            margin-right: 10px;\n            vertical-align: middle;\n        }\n    </style>\n</head>\n<body>\n    <h1>${title}</h1>\n\n    <div class=\"legend\">\n        <h2>Legend</h2>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #E8F5E9;\"></span>\n            <strong>Level 0:</strong> Foundation libraries (no dependencies)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #E3F2FD;\"></span>\n            <strong>Level 1:</strong> Middleware libraries (depend on Level 0)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #FFF3E0;\"></span>\n            <strong>Level 2:</strong> Applications (depend on Level 1)\n        </div>\n        <div class=\"legend-item\" style=\"margin-top: 15px;\">\n            <em>Note: Transitive dependencies are allowed but not shown in the graph.</em>\n        </div>\n    </div>\n\n    <div id=\"graph\"></div>\n\n    <script>\n        const dot = ${JSON.stringify(dot)};\n        const viz = new Viz();\n\n        viz.renderSVGElement(dot)\n            .then(element => {\n                document.getElementById('graph').appendChild(element);\n            })\n            .catch(err => {\n                console.error(err);\n                document.getElementById('graph').innerHTML = '<pre>' + err + '</pre>';\n            });\n    </script>\n</body>\n</html>`;\n}\n\n/**\n * Write visualization files to tmp/webpieces/\n */\nexport function writeVisualization(\n    graph: EnhancedGraph,\n    workspaceRoot: string,\n    title: string = 'WebPieces Architecture'\n): { dotPath: string; htmlPath: string } {\n    const outputDir = path.join(workspaceRoot, 'tmp', 'webpieces');\n\n    // Ensure directory exists\n    if (!fs.existsSync(outputDir)) {\n        fs.mkdirSync(outputDir, { recursive: true });\n    }\n\n    // Generate DOT\n    const dot = generateDot(graph, title);\n    const dotPath = path.join(outputDir, 'architecture.dot');\n    fs.writeFileSync(dotPath, dot, 'utf-8');\n\n    // Generate HTML\n    const html = generateHTML(dot, title);\n    const htmlPath = path.join(outputDir, 'architecture.html');\n    fs.writeFileSync(htmlPath, html, 'utf-8');\n\n    return { dotPath, htmlPath };\n}\n\n/**\n * Open the HTML visualization in the default browser\n */\nexport function openVisualization(htmlPath: string): boolean {\n    try {\n        const platform = process.platform;\n        let openCommand: string;\n\n        if (platform === 'darwin') {\n            openCommand = `open \"${htmlPath}\"`;\n        } else if (platform === 'win32') {\n            openCommand = `start \"\" \"${htmlPath}\"`;\n        } else {\n            openCommand = `xdg-open \"${htmlPath}\"`;\n        }\n\n        execSync(openCommand, { stdio: 'ignore' });\n        return true;\n    } catch (err: unknown) {\n        return false;\n    }\n}\n"]}
+{"version":3,"file":"graph-visualizer.js","sourceRoot":"","sources":["../../../../../../packages/tooling/dev-config/architecture/lib/graph-visualizer.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Graph Visualizer\n *\n * Generates visual representations of the architecture graph:\n * - DOT format (for Graphviz)\n * - Interactive HTML (using viz.js)\n *\n * Output files go to tmp/webpieces/ for easy viewing without committing.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport { execSync } from 'child_process';\nimport type { EnhancedGraph } from './graph-sorter';\n\n/**\n * Level colors for visualization\n */\nconst LEVEL_COLORS: Record<number, string> = {\n    0: '#E8F5E9', // Light green - foundation\n    1: '#E3F2FD', // Light blue - middleware\n    2: '#FFF3E0', // Light orange - applications\n    3: '#FCE4EC', // Light pink - higher level\n};\n\n/**\n * Remove scope from name for display\n * '@scope/name' → 'name'\n * 'name' → 'name'\n */\nfunction getShortName(name: string): string {\n    return name.includes('/') ? name.split('/').pop()! : name;\n}\n\n/**\n * Generate Graphviz DOT format from the graph\n */\nexport function generateDot(graph: EnhancedGraph, title: string = 'WebPieces Architecture'): string {\n    let dot = 'digraph Architecture {\\n';\n    dot += '  rankdir=TB;\\n';\n    dot += '  node [shape=box, style=filled, fontname=\"Arial\"];\\n';\n    dot += '  edge [fontname=\"Arial\"];\\n\\n';\n\n    // Group projects by level\n    const levels: Record<number, string[]> = {};\n    for (const [project, info] of Object.entries(graph)) {\n        if (!levels[info.level]) levels[info.level] = [];\n        levels[info.level].push(project);\n    }\n\n    // Create nodes with level-based colors\n    for (const [project, info] of Object.entries(graph)) {\n        const shortName = getShortName(project);\n        const color = LEVEL_COLORS[info.level] || '#F5F5F5';\n        dot += `  \"${shortName}\" [fillcolor=\"${color}\", label=\"${shortName}\\\\n(L${info.level})\"];\\n`;\n    }\n\n    dot += '\\n';\n\n    // Create same-rank subgraphs for each level\n    for (const [level, projects] of Object.entries(levels)) {\n        dot += `  { rank=same; `;\n        projects.forEach((p) => {\n            const shortName = getShortName(p);\n            dot += `\"${shortName}\"; `;\n        });\n        dot += '}\\n';\n    }\n\n    dot += '\\n';\n\n    // Create edges (dependencies)\n    for (const [project, info] of Object.entries(graph)) {\n        const shortName = getShortName(project);\n        for (const dep of info.dependsOn || []) {\n            const depShortName = getShortName(dep);\n            dot += `  \"${shortName}\" -> \"${depShortName}\";\\n`;\n        }\n    }\n\n    dot += '\\n  labelloc=\"t\";\\n';\n    dot += `  label=\"${title}\\\\n(from architecture/dependencies.json)\";\\n`;\n    dot += '  fontsize=20;\\n';\n    dot += '}\\n';\n\n    return dot;\n}\n\n/**\n * Generate interactive HTML with embedded SVG using viz.js\n */\nexport function generateHTML(dot: string, title: string = 'WebPieces Architecture'): string {\n    return `<!DOCTYPE html>\n<html>\n<head>\n    <title>${title}</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/viz.js@2.1.2/viz.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/viz.js@2.1.2/full.render.js\"></script>\n    <style>\n        body {\n            margin: 0;\n            padding: 20px;\n            font-family: Arial, sans-serif;\n            background: #f5f5f5;\n        }\n        h1 {\n            text-align: center;\n            color: #333;\n        }\n        #graph {\n            text-align: center;\n            background: white;\n            padding: 20px;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend {\n            margin: 20px auto;\n            max-width: 600px;\n            padding: 15px;\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        .legend h2 {\n            margin-top: 0;\n        }\n        .legend-item {\n            margin: 8px 0;\n        }\n        .legend-box {\n            display: inline-block;\n            width: 20px;\n            height: 20px;\n            border: 1px solid #ccc;\n            margin-right: 10px;\n            vertical-align: middle;\n        }\n    </style>\n</head>\n<body>\n    <h1>${title}</h1>\n\n    <div class=\"legend\">\n        <h2>Legend</h2>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #E8F5E9;\"></span>\n            <strong>Level 0:</strong> Foundation libraries (no dependencies)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #E3F2FD;\"></span>\n            <strong>Level 1:</strong> Middleware libraries (depend on Level 0)\n        </div>\n        <div class=\"legend-item\">\n            <span class=\"legend-box\" style=\"background: #FFF3E0;\"></span>\n            <strong>Level 2:</strong> Applications (depend on Level 1)\n        </div>\n        <div class=\"legend-item\" style=\"margin-top: 15px;\">\n            <em>Note: Transitive dependencies are allowed but not shown in the graph.</em>\n        </div>\n    </div>\n\n    <div id=\"graph\"></div>\n\n    <script>\n        const dot = ${JSON.stringify(dot)};\n        const viz = new Viz();\n\n        viz.renderSVGElement(dot)\n            .then(element => {\n                document.getElementById('graph').appendChild(element);\n            })\n            .catch(err => {\n                console.error(err);\n                document.getElementById('graph').innerHTML = '<pre>' + err + '</pre>';\n            });\n    </script>\n</body>\n</html>`;\n}\n\n/**\n * Write visualization files to tmp/webpieces/\n */\nexport function writeVisualization(\n    graph: EnhancedGraph,\n    workspaceRoot: string,\n    title: string = 'WebPieces Architecture'\n): { dotPath: string; htmlPath: string } {\n    const outputDir = path.join(workspaceRoot, 'tmp', 'webpieces');\n\n    // Ensure directory exists\n    if (!fs.existsSync(outputDir)) {\n        fs.mkdirSync(outputDir, { recursive: true });\n    }\n\n    // Generate DOT\n    const dot = generateDot(graph, title);\n    const dotPath = path.join(outputDir, 'architecture.dot');\n    fs.writeFileSync(dotPath, dot, 'utf-8');\n\n    // Generate HTML\n    const html = generateHTML(dot, title);\n    const htmlPath = path.join(outputDir, 'architecture.html');\n    fs.writeFileSync(htmlPath, html, 'utf-8');\n\n    return { dotPath, htmlPath };\n}\n\n/**\n * Open the HTML visualization in the default browser\n */\nexport function openVisualization(htmlPath: string): boolean {\n    try {\n        const platform = process.platform;\n        let openCommand: string;\n\n        if (platform === 'darwin') {\n            openCommand = `open \"${htmlPath}\"`;\n        } else if (platform === 'win32') {\n            openCommand = `start \"\" \"${htmlPath}\"`;\n        } else {\n            openCommand = `xdg-open \"${htmlPath}\"`;\n        }\n\n        execSync(openCommand, { stdio: 'ignore' });\n        return true;\n    } catch (err: unknown) {\n        return false;\n    }\n}\n"]}

package/architecture/lib/graph-visualizer.ts

@@ -23,6 +23,15 @@ const LEVEL_COLORS: Record<number, string> = {
     3: '#FCE4EC', // Light pink - higher level
 };
 
+/**
+ * Remove scope from name for display
+ * '@scope/name' → 'name'
+ * 'name' → 'name'
+ */
+function getShortName(name: string): string {
+    return name.includes('/') ? name.split('/').pop()! : name;
+}
+
 /**
  * Generate Graphviz DOT format from the graph
  */
@@ -41,7 +50,7 @@ export function generateDot(graph: EnhancedGraph, title: string = 'WebPieces Arc
 
     // Create nodes with level-based colors
     for (const [project, info] of Object.entries(graph)) {
-        const shortName = project.replace('@webpieces/', '');
+        const shortName = getShortName(project);
         const color = LEVEL_COLORS[info.level] || '#F5F5F5';
         dot += `  "${shortName}" [fillcolor="${color}", label="${shortName}\\n(L${info.level})"];\n`;
     }
@@ -52,7 +61,7 @@ export function generateDot(graph: EnhancedGraph, title: string = 'WebPieces Arc
     for (const [level, projects] of Object.entries(levels)) {
         dot += `  { rank=same; `;
         projects.forEach((p) => {
-            const shortName = p.replace('@webpieces/', '');
+            const shortName = getShortName(p);
             dot += `"${shortName}"; `;
         });
         dot += '}\n';
@@ -62,9 +71,9 @@ export function generateDot(graph: EnhancedGraph, title: string = 'WebPieces Arc
 
     // Create edges (dependencies)
     for (const [project, info] of Object.entries(graph)) {
-        const shortName = project.replace('@webpieces/', '');
+        const shortName = getShortName(project);
         for (const dep of info.dependsOn || []) {
-            const depShortName = dep.replace('@webpieces/', '');
+            const depShortName = getShortName(dep);
             dot += `  "${shortName}" -> "${depShortName}";\n`;
         }
     }

package/architecture/lib/package-validator.d.ts

@@ -26,9 +26,9 @@ export interface ValidationResult {
  *
  * For each project in the graph:
  * - Check that all graph dependencies exist in package.json
- * - Optionally warn about extra deps in package.json not in graph
+ * - Maps project names to package names for accurate comparison
  *
- * @param graph - Enhanced graph with project dependencies
+ * @param graph - Enhanced graph with project dependencies (uses project names)
  * @param workspaceRoot - Absolute path to workspace root
  * @returns Validation result with errors if any
  */

package/architecture/lib/package-validator.js

@@ -23,11 +23,11 @@ function readPackageJsonDeps(workspaceRoot, projectRoot) {
     try {
         const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
         const deps = [];
-        // Collect all @webpieces/* dependencies
+        // Collect ALL dependencies from package.json
         for (const depType of ['dependencies', 'peerDependencies']) {
             const depObj = packageJson[depType] || {};
             for (const depName of Object.keys(depObj)) {
-                if (depName.startsWith('@webpieces/') && !deps.includes(depName)) {
+                if (!deps.includes(depName)) {
                     deps.push(depName);
                 }
             }
@@ -39,42 +39,63 @@ function readPackageJsonDeps(workspaceRoot, projectRoot) {
         return [];
     }
 }
+/**
+ * Build map of project names to their package names
+ * e.g., "core-util" → "@webpieces/core-util"
+ */
+function buildProjectToPackageMap(workspaceRoot, projectsConfig) {
+    const map = new Map();
+    for (const [projectName, config] of Object.entries(projectsConfig.projects)) {
+        const packageJsonPath = path.join(workspaceRoot, config.root, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+            try {
+                const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+                if (packageJson.name) {
+                    map.set(projectName, packageJson.name);
+                }
+            }
+            catch {
+                // Ignore parse errors
+            }
+        }
+    }
+    return map;
+}
 /**
  * Validate that package.json dependencies match the dependency graph
  *
  * For each project in the graph:
  * - Check that all graph dependencies exist in package.json
- * - Optionally warn about extra deps in package.json not in graph
+ * - Maps project names to package names for accurate comparison
  *
- * @param graph - Enhanced graph with project dependencies
+ * @param graph - Enhanced graph with project dependencies (uses project names)
  * @param workspaceRoot - Absolute path to workspace root
  * @returns Validation result with errors if any
  */
 async function validatePackageJsonDependencies(graph, workspaceRoot) {
     const projectGraph = await (0, devkit_1.createProjectGraphAsync)();
     const projectsConfig = (0, devkit_1.readProjectsConfigurationFromProjectGraph)(projectGraph);
+    // Build map: project name → package name
+    const projectToPackage = buildProjectToPackageMap(workspaceRoot, projectsConfig);
     const errors = [];
     const projectResults = [];
     for (const [projectName, entry] of Object.entries(graph)) {
-        // Extract base name (remove @webpieces/ prefix)
-        const baseName = projectName.replace('@webpieces/', '');
-        // Find the project config
-        const projectConfig = projectsConfig.projects[baseName];
+        // Find the project config using project name directly
+        const projectConfig = projectsConfig.projects[projectName];
         if (!projectConfig) {
-            // Project not found in Nx config, skip
             continue;
         }
         const projectRoot = projectConfig.root;
         const packageJsonDeps = readPackageJsonDeps(workspaceRoot, projectRoot);
-        // Skip projects without package.json (common for apps in monorepo)
         if (packageJsonDeps === null) {
             continue;
         }
-        // Check for missing dependencies in package.json
+        // Convert graph dependencies (project names) to package names for comparison
         const missingInPackageJson = [];
-        for (const dep of entry.dependsOn) {
-            if (!packageJsonDeps.includes(dep)) {
-                missingInPackageJson.push(dep);
+        for (const depProjectName of entry.dependsOn) {
+            const depPackageName = projectToPackage.get(depProjectName) || depProjectName;
+            if (!packageJsonDeps.includes(depPackageName)) {
+                missingInPackageJson.push(depProjectName);
             }
         }
         // Check for extra dependencies in package.json (not critical, just informational)

package/architecture/lib/package-validator.js.map

@@ -1 +1 @@
-{"version":3,"file":"package-validator.js","sourceRoot":"","sources":["../../../../../../packages/tooling/dev-config/architecture/lib/package-validator.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Package Validator\n *\n * Validates that package.json dependencies match the project.json build.dependsOn\n * This ensures the two sources of truth don't drift apart.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport {\n    createProjectGraphAsync,\n    readProjectsConfigurationFromProjectGraph,\n} from '@nx/devkit';\n\n/**\n * Validation result for a single project\n */\nexport interface ProjectValidationResult {\n    project: string;\n    valid: boolean;\n    missingInPackageJson: string[];\n    extraInPackageJson: string[];\n}\n\n/**\n * Overall validation result\n */\nexport interface ValidationResult {\n    valid: boolean;\n    errors: string[];\n    projectResults: ProjectValidationResult[];\n}\n\n/**\n * Read package.json dependencies for a project\n * Returns null if package.json doesn't exist (apps often don't have one)\n */\nfunction readPackageJsonDeps(workspaceRoot: string, projectRoot: string): string[] | null {\n    const packageJsonPath = path.join(workspaceRoot, projectRoot, 'package.json');\n\n    if (!fs.existsSync(packageJsonPath)) {\n        return null; // No package.json - skip validation for this project\n    }\n\n    try {\n        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));\n        const deps: string[] = [];\n\n        // Collect all @webpieces/* dependencies\n        for (const depType of ['dependencies', 'peerDependencies']) {\n            const depObj = packageJson[depType] || {};\n            for (const depName of Object.keys(depObj)) {\n                if (depName.startsWith('@webpieces/') && !deps.includes(depName)) {\n                    deps.push(depName);\n                }\n            }\n        }\n\n        return deps.sort();\n    } catch (err: unknown) {\n        console.warn(`Could not read package.json at ${packageJsonPath}`);\n        return [];\n    }\n}\n\n/**\n * Validate that package.json dependencies match the dependency graph\n *\n * For each project in the graph:\n * - Check that all graph dependencies exist in package.json\n * - Optionally warn about extra deps in package.json not in graph\n *\n * @param graph - Enhanced graph with project dependencies\n * @param workspaceRoot - Absolute path to workspace root\n * @returns Validation result with errors if any\n */\nexport async function validatePackageJsonDependencies(\n    graph: Record<string, { level: number; dependsOn: string[] }>,\n    workspaceRoot: string\n): Promise<ValidationResult> {\n    const projectGraph = await createProjectGraphAsync();\n    const projectsConfig = readProjectsConfigurationFromProjectGraph(projectGraph);\n\n    const errors: string[] = [];\n    const projectResults: ProjectValidationResult[] = [];\n\n    for (const [projectName, entry] of Object.entries(graph)) {\n        // Extract base name (remove @webpieces/ prefix)\n        const baseName = projectName.replace('@webpieces/', '');\n\n        // Find the project config\n        const projectConfig = projectsConfig.projects[baseName];\n        if (!projectConfig) {\n            // Project not found in Nx config, skip\n            continue;\n        }\n\n        const projectRoot = projectConfig.root;\n        const packageJsonDeps = readPackageJsonDeps(workspaceRoot, projectRoot);\n\n        // Skip projects without package.json (common for apps in monorepo)\n        if (packageJsonDeps === null) {\n            continue;\n        }\n\n        // Check for missing dependencies in package.json\n        const missingInPackageJson: string[] = [];\n        for (const dep of entry.dependsOn) {\n            if (!packageJsonDeps.includes(dep)) {\n                missingInPackageJson.push(dep);\n            }\n        }\n\n        // Check for extra dependencies in package.json (not critical, just informational)\n        const extraInPackageJson: string[] = [];\n        for (const dep of packageJsonDeps) {\n            if (!entry.dependsOn.includes(dep)) {\n                extraInPackageJson.push(dep);\n            }\n        }\n\n        const valid = missingInPackageJson.length === 0;\n\n        if (!valid) {\n            errors.push(\n                `Project ${projectName} (${projectRoot}/package.json) is missing dependencies: ${missingInPackageJson.join(', ')}\\n` +\n                    `  Fix: Add these to package.json dependencies`\n            );\n        }\n\n        projectResults.push({\n            project: projectName,\n            valid,\n            missingInPackageJson,\n            extraInPackageJson,\n        });\n    }\n\n    return {\n        valid: errors.length === 0,\n        errors,\n        projectResults,\n    };\n}\n"]}
+{"version":3,"file":"package-validator.js","sourceRoot":"","sources":["../../../../../../packages/tooling/dev-config/architecture/lib/package-validator.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Package Validator\n *\n * Validates that package.json dependencies match the project.json build.dependsOn\n * This ensures the two sources of truth don't drift apart.\n */\n\nimport * as fs from 'fs';\nimport * as path from 'path';\nimport {\n    createProjectGraphAsync,\n    readProjectsConfigurationFromProjectGraph,\n} from '@nx/devkit';\n\n/**\n * Validation result for a single project\n */\nexport interface ProjectValidationResult {\n    project: string;\n    valid: boolean;\n    missingInPackageJson: string[];\n    extraInPackageJson: string[];\n}\n\n/**\n * Overall validation result\n */\nexport interface ValidationResult {\n    valid: boolean;\n    errors: string[];\n    projectResults: ProjectValidationResult[];\n}\n\n/**\n * Read package.json dependencies for a project\n * Returns null if package.json doesn't exist (apps often don't have one)\n */\nfunction readPackageJsonDeps(workspaceRoot: string, projectRoot: string): string[] | null {\n    const packageJsonPath = path.join(workspaceRoot, projectRoot, 'package.json');\n\n    if (!fs.existsSync(packageJsonPath)) {\n        return null; // No package.json - skip validation for this project\n    }\n\n    try {\n        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));\n        const deps: string[] = [];\n\n        // Collect ALL dependencies from package.json\n        for (const depType of ['dependencies', 'peerDependencies']) {\n            const depObj = packageJson[depType] || {};\n            for (const depName of Object.keys(depObj)) {\n                if (!deps.includes(depName)) {\n                    deps.push(depName);\n                }\n            }\n        }\n\n        return deps.sort();\n    } catch (err: unknown) {\n        console.warn(`Could not read package.json at ${packageJsonPath}`);\n        return [];\n    }\n}\n\n/**\n * Build map of project names to their package names\n * e.g., \"core-util\" → \"@webpieces/core-util\"\n */\nfunction buildProjectToPackageMap(\n    workspaceRoot: string,\n    projectsConfig: any\n): Map<string, string> {\n    const map = new Map<string, string>();\n\n    for (const [projectName, config] of Object.entries<any>(projectsConfig.projects)) {\n        const packageJsonPath = path.join(workspaceRoot, config.root, 'package.json');\n        if (fs.existsSync(packageJsonPath)) {\n            try {\n                const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));\n                if (packageJson.name) {\n                    map.set(projectName, packageJson.name);\n                }\n            } catch {\n                // Ignore parse errors\n            }\n        }\n    }\n\n    return map;\n}\n\n/**\n * Validate that package.json dependencies match the dependency graph\n *\n * For each project in the graph:\n * - Check that all graph dependencies exist in package.json\n * - Maps project names to package names for accurate comparison\n *\n * @param graph - Enhanced graph with project dependencies (uses project names)\n * @param workspaceRoot - Absolute path to workspace root\n * @returns Validation result with errors if any\n */\nexport async function validatePackageJsonDependencies(\n    graph: Record<string, { level: number; dependsOn: string[] }>,\n    workspaceRoot: string\n): Promise<ValidationResult> {\n    const projectGraph = await createProjectGraphAsync();\n    const projectsConfig = readProjectsConfigurationFromProjectGraph(projectGraph);\n\n    // Build map: project name → package name\n    const projectToPackage = buildProjectToPackageMap(workspaceRoot, projectsConfig);\n\n    const errors: string[] = [];\n    const projectResults: ProjectValidationResult[] = [];\n\n    for (const [projectName, entry] of Object.entries(graph)) {\n        // Find the project config using project name directly\n        const projectConfig = projectsConfig.projects[projectName];\n        if (!projectConfig) {\n            continue;\n        }\n\n        const projectRoot = projectConfig.root;\n        const packageJsonDeps = readPackageJsonDeps(workspaceRoot, projectRoot);\n\n        if (packageJsonDeps === null) {\n            continue;\n        }\n\n        // Convert graph dependencies (project names) to package names for comparison\n        const missingInPackageJson: string[] = [];\n        for (const depProjectName of entry.dependsOn) {\n            const depPackageName = projectToPackage.get(depProjectName) || depProjectName;\n            if (!packageJsonDeps.includes(depPackageName)) {\n                missingInPackageJson.push(depProjectName);\n            }\n        }\n\n        // Check for extra dependencies in package.json (not critical, just informational)\n        const extraInPackageJson: string[] = [];\n        for (const dep of packageJsonDeps) {\n            if (!entry.dependsOn.includes(dep)) {\n                extraInPackageJson.push(dep);\n            }\n        }\n\n        const valid = missingInPackageJson.length === 0;\n\n        if (!valid) {\n            errors.push(\n                `Project ${projectName} (${projectRoot}/package.json) is missing dependencies: ${missingInPackageJson.join(', ')}\\n` +\n                    `  Fix: Add these to package.json dependencies`\n            );\n        }\n\n        projectResults.push({\n            project: projectName,\n            valid,\n            missingInPackageJson,\n            extraInPackageJson,\n        });\n    }\n\n    return {\n        valid: errors.length === 0,\n        errors,\n        projectResults,\n    };\n}\n"]}

package/architecture/lib/package-validator.ts

@@ -46,11 +46,11 @@ function readPackageJsonDeps(workspaceRoot: string, projectRoot: string): string
         const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
         const deps: string[] = [];
 
-        // Collect all @webpieces/* dependencies
+        // Collect ALL dependencies from package.json
         for (const depType of ['dependencies', 'peerDependencies']) {
             const depObj = packageJson[depType] || {};
             for (const depName of Object.keys(depObj)) {
-                if (depName.startsWith('@webpieces/') && !deps.includes(depName)) {
+                if (!deps.includes(depName)) {
                     deps.push(depName);
                 }
             }
@@ -63,14 +63,41 @@ function readPackageJsonDeps(workspaceRoot: string, projectRoot: string): string
     }
 }
 
+/**
+ * Build map of project names to their package names
+ * e.g., "core-util" → "@webpieces/core-util"
+ */
+function buildProjectToPackageMap(
+    workspaceRoot: string,
+    projectsConfig: any
+): Map<string, string> {
+    const map = new Map<string, string>();
+
+    for (const [projectName, config] of Object.entries<any>(projectsConfig.projects)) {
+        const packageJsonPath = path.join(workspaceRoot, config.root, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+            try {
+                const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+                if (packageJson.name) {
+                    map.set(projectName, packageJson.name);
+                }
+            } catch {
+                // Ignore parse errors
+            }
+        }
+    }
+
+    return map;
+}
+
 /**
  * Validate that package.json dependencies match the dependency graph
  *
  * For each project in the graph:
  * - Check that all graph dependencies exist in package.json
- * - Optionally warn about extra deps in package.json not in graph
+ * - Maps project names to package names for accurate comparison
  *
- * @param graph - Enhanced graph with project dependencies
+ * @param graph - Enhanced graph with project dependencies (uses project names)
  * @param workspaceRoot - Absolute path to workspace root
  * @returns Validation result with errors if any
  */
@@ -81,33 +108,32 @@ export async function validatePackageJsonDependencies(
     const projectGraph = await createProjectGraphAsync();
     const projectsConfig = readProjectsConfigurationFromProjectGraph(projectGraph);
 
+    // Build map: project name → package name
+    const projectToPackage = buildProjectToPackageMap(workspaceRoot, projectsConfig);
+
     const errors: string[] = [];
     const projectResults: ProjectValidationResult[] = [];
 
     for (const [projectName, entry] of Object.entries(graph)) {
-        // Extract base name (remove @webpieces/ prefix)
-        const baseName = projectName.replace('@webpieces/', '');
-
-        // Find the project config
-        const projectConfig = projectsConfig.projects[baseName];
+        // Find the project config using project name directly
+        const projectConfig = projectsConfig.projects[projectName];
         if (!projectConfig) {
-            // Project not found in Nx config, skip
             continue;
         }
 
         const projectRoot = projectConfig.root;
         const packageJsonDeps = readPackageJsonDeps(workspaceRoot, projectRoot);
 
-        // Skip projects without package.json (common for apps in monorepo)
         if (packageJsonDeps === null) {
             continue;
         }
 
-        // Check for missing dependencies in package.json
+        // Convert graph dependencies (project names) to package names for comparison
         const missingInPackageJson: string[] = [];
-        for (const dep of entry.dependsOn) {
-            if (!packageJsonDeps.includes(dep)) {
-                missingInPackageJson.push(dep);
+        for (const depProjectName of entry.dependsOn) {
+            const depPackageName = projectToPackage.get(depProjectName) || depProjectName;
+            if (!packageJsonDeps.includes(depPackageName)) {
+                missingInPackageJson.push(depProjectName);
             }
         }
 

package/eslint-plugin/rules/enforce-architecture.js

@@ -227,6 +227,61 @@ function loadBlessedGraph(workspaceRoot) {
         return null;
     }
 }
+/**
+ * Build set of all workspace package names (from package.json files)
+ * Used to detect workspace imports (works for any scope or unscoped)
+ */
+function buildWorkspacePackageNames(workspaceRoot) {
+    const packageNames = new Set();
+    const mappings = buildProjectMappings(workspaceRoot);
+    for (const mapping of mappings) {
+        const pkgJsonPath = path.join(workspaceRoot, mapping.root, 'package.json');
+        if (fs.existsSync(pkgJsonPath)) {
+            try {
+                const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf-8'));
+                if (pkgJson.name) {
+                    packageNames.add(pkgJson.name);
+                }
+            }
+            catch {
+                // Ignore parse errors
+            }
+        }
+    }
+    return packageNames;
+}
+/**
+ * Check if an import path is a workspace project
+ * Works for scoped (@scope/name) or unscoped (name) packages
+ */
+function isWorkspaceImport(importPath, workspaceRoot) {
+    const workspacePackages = buildWorkspacePackageNames(workspaceRoot);
+    return workspacePackages.has(importPath);
+}
+/**
+ * Get project name from package name
+ * e.g., '@webpieces/client' → 'client', 'apis' → 'apis'
+ */
+function getProjectNameFromPackageName(packageName, workspaceRoot) {
+    const mappings = buildProjectMappings(workspaceRoot);
+    // Try to find by reading package.json files
+    for (const mapping of mappings) {
+        const pkgJsonPath = path.join(workspaceRoot, mapping.root, 'package.json');
+        if (fs.existsSync(pkgJsonPath)) {
+            try {
+                const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf-8'));
+                if (pkgJson.name === packageName) {
+                    return mapping.name; // Return project name
+                }
+            }
+            catch {
+                // Ignore parse errors
+            }
+        }
+    }
+    // Fallback: return package name as-is (might be unscoped project name)
+    return packageName;
+}
 /**
  * Build project mappings from project.json files in workspace
  */
@@ -263,12 +318,8 @@ function scanForProjects(dir, workspaceRoot, mappings) {
                     try {
                         const projectJson = JSON.parse(fs.readFileSync(projectJsonPath, 'utf-8'));
                         const projectRoot = path.relative(workspaceRoot, fullPath);
-                        // Determine project name
-                        let projectName = projectJson.name || entry.name;
-                        // Add @webpieces/ prefix if not present
-                        if (!projectName.startsWith('@webpieces/')) {
-                            projectName = `@webpieces/${projectName}`;
-                        }
+                        // Use project name from project.json as-is (no scope forcing)
+                        const projectName = projectJson.name || entry.name;
                         mappings.push({
                             root: projectRoot,
                             name: projectName,
@@ -348,38 +399,38 @@ const rule = {
         return {
             ImportDeclaration(node) {
                 const importPath = node.source.value;
-                // Only check @webpieces/* imports
-                if (!importPath.startsWith('@webpieces/')) {
-                    return;
+                // Check if this is a workspace import (works for any scope or unscoped)
+                if (!isWorkspaceImport(importPath, workspaceRoot)) {
+                    return; // Not a workspace import, skip validation
                 }
                 // Determine which project this file belongs to
-                const project = getProjectFromFile(filename, workspaceRoot);
-                if (!project) {
+                const sourceProject = getProjectFromFile(filename, workspaceRoot);
+                if (!sourceProject) {
                     // File not in any known project (e.g., tools/, scripts/)
                     return;
                 }
+                // Convert import (package name) to project name
+                const targetProject = getProjectNameFromPackageName(importPath, workspaceRoot);
                 // Self-import is always allowed
-                if (importPath === project) {
+                if (targetProject === sourceProject) {
                     return;
                 }
                 // Load blessed graph
                 const graph = loadBlessedGraph(workspaceRoot);
                 if (!graph) {
                     // No graph file - warn but don't fail (allows gradual adoption)
-                    // Uncomment below to enforce graph existence:
-                    // context.report({ node: node.source, messageId: 'noGraph' });
                     return;
                 }
                 // Get project entry
-                const projectEntry = graph[project];
+                const projectEntry = graph[sourceProject];
                 if (!projectEntry) {
                     // Project not in graph (new project?) - allow
                     return;
                 }
                 // Compute allowed dependencies (direct + transitive)
-                const allowedDeps = computeTransitiveDependencies(project, graph);
-                // Check if import is allowed
-                if (!allowedDeps.has(importPath)) {
+                const allowedDeps = computeTransitiveDependencies(sourceProject, graph);
+                // Check if import is allowed (use project name, not package name)
+                if (!allowedDeps.has(targetProject)) {
                     // Write documentation file for AI/developer to read
                     ensureDependenciesDoc(workspaceRoot);
                     const directDeps = projectEntry.dependsOn || [];
@@ -392,7 +443,7 @@ const rule = {
                         messageId: 'illegalImport',
                         data: {
                             imported: importPath,
-                            project: project,
+                            project: sourceProject,
                             level: String(projectEntry.level),
                             allowedList: allowedList,
                         },