helm-env-delta 1.11.0 → 1.12.0

package/README.md

@@ -52,11 +52,11 @@ HelmEnvDelta (`hed`) automates environment synchronization for GitOps workflows
 
 🛡️ **Safety Rules** - Block major version upgrades, scaling violations, and forbidden patterns. Load validation rules from external files. Scan globally or target specific fields.
 
-🎨 **Format Enforcement** - Standardize YAML across all environments: key ordering, indentation, quoting, array sorting.
+🎨 **Format Enforcement** - Standardize YAML across all environments: key ordering, alphabetical key sorting, indentation, quoting, array sorting.
 
 📦 **Config Inheritance** - Reuse base configurations with environment-specific overrides.
 
-📊 **Multiple Reports** - Console, HTML (visual, self-contained), and JSON (CI/CD) output formats. HTML reports include diff stats dashboard, per-file line change badges, copy diff buttons, file search, and collapse/expand controls.
+📊 **Multiple Reports** - Console, HTML (visual, self-contained), and JSON (CI/CD) output formats. HTML reports include collapsible diff stats dashboard, stop rule violations table (dry-run only), synchronized side-by-side scrolling, copy diff buttons, file search, and collapse/expand controls. Empty categories are automatically hidden.
 
 🔍 **Discovery Tools** - Preview files (`-l`), inspect config (`--show-config`), filter by filename/content (`-f`), filter by change type (`-m`), validate with comprehensive warnings including unused pattern detection.
 
@@ -119,7 +119,7 @@ hed -c config.yaml
 hed -c config.yaml -H
 ```
 
-Self-contained HTML report — works offline, no CDN required. Includes diff stats, line change badges, copy buttons, sidebar search, and collapse/expand controls.
+Self-contained HTML report — works offline, no CDN required. Includes collapsible diff stats dashboard, stop rule violations table (shown in dry-run mode), synchronized side-by-side scrolling, copy buttons, sidebar search, and collapse/expand controls. Empty categories are automatically hidden.
 
 ### 5️⃣ Get Smart Suggestions (Optional)
 
@@ -208,6 +208,9 @@ outputFormat:
       - 'kind'
       - 'metadata'
       - 'spec'
+  keySort:
+    '**/*.yaml':
+      - path: 'spec.template.metadata.labels'
   arraySort:
     '**/*.yaml':
       - path: 'env'
@@ -664,6 +667,8 @@ stopRules:
 
 **Override:** Use `--force` to bypass stop rules when needed.
 
+**Visibility:** Stop rule violations appear in console output, JSON reports, and HTML reports (dry-run mode only, as a collapsible table in the header area).
+
 ---
 
 ### 🎨 Output Formatting
@@ -675,13 +680,18 @@ outputFormat:
   indent: 2 # Indentation size
   keySeparator: true # Blank line between top-level keys (or second-level keys when single top-level key)
 
-  keyOrders: # Custom key ordering
+  keyOrders: # Custom key ordering (pin specific keys to top)
     'apps/*.yaml':
       - 'apiVersion'
       - 'kind'
       - 'metadata'
       - 'spec'
 
+  keySort: # Sort all keys alphabetically at path
+    '**/*.yaml':
+      - path: 'spec.template.metadata.labels'
+      - path: 'env.vars'
+
   arraySort: # Sort arrays
     'services/**/values.yaml':
       - path: 'env'

package/dist/configFile.d.ts

@@ -77,6 +77,9 @@ declare const arraySortRuleSchema: z.ZodObject<{
         desc: "desc";
     }>>;
 }, z.core.$strip>;
+declare const keySortRuleSchema: z.ZodObject<{
+    path: z.ZodString;
+}, z.core.$strip>;
 declare const fixedValueRuleSchema: z.ZodObject<{
     path: z.ZodString;
     value: z.ZodUnknown;
@@ -111,6 +114,9 @@ declare const baseConfigSchema: z.ZodObject<{
         keySeparator: z.ZodOptional<z.ZodBoolean>;
         quoteValues: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString>>>;
         keyOrders: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString>>>;
+        keySort: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodObject<{
+            path: z.ZodString;
+        }, z.core.$strip>>>>;
         arraySort: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodObject<{
             path: z.ZodString;
             sortBy: z.ZodString;
@@ -230,6 +236,9 @@ declare const finalConfigSchema: z.ZodObject<{
         keySeparator: z.ZodDefault<z.ZodBoolean>;
         quoteValues: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString>>>;
         keyOrders: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString>>>;
+        keySort: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodObject<{
+            path: z.ZodString;
+        }, z.core.$strip>>>>;
         arraySort: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodObject<{
             path: z.ZodString;
             sortBy: z.ZodString;
@@ -301,6 +310,9 @@ declare const formatOnlyConfigSchema: z.ZodObject<{
         keySeparator: z.ZodDefault<z.ZodBoolean>;
         quoteValues: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString>>>;
         keyOrders: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodString>>>;
+        keySort: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodObject<{
+            path: z.ZodString;
+        }, z.core.$strip>>>>;
         arraySort: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodArray<z.ZodObject<{
             path: z.ZodString;
             sortBy: z.ZodString;
@@ -324,6 +336,7 @@ export type RegexFileRule = z.infer<typeof regexFileRuleSchema>;
 export type RegexFileKeyRule = z.infer<typeof regexFileKeyRuleSchema>;
 export type VersionFormatRule = z.infer<typeof versionFormatRuleSchema>;
 export type ArraySortRule = z.infer<typeof arraySortRuleSchema>;
+export type KeySortRule = z.infer<typeof keySortRuleSchema>;
 export type TransformRule = z.infer<typeof transformRuleSchema>;
 export type TransformRules = z.infer<typeof transformRulesSchema>;
 export type TransformConfig = Record<string, TransformRules>;

package/dist/configFile.js

@@ -79,6 +79,7 @@ const arraySortRuleSchema = zod_1.z.object({
     sortBy: zod_1.z.string().min(1),
     order: zod_1.z.enum(['asc', 'desc']).default('asc')
 });
+const keySortRuleSchema = zod_1.z.object({ path: zod_1.z.string().min(1) });
 const fixedValueRuleSchema = zod_1.z.object({
     path: zod_1.z.string().min(1).describe('JSONPath to the value to set'),
     value: zod_1.z.unknown().describe('The constant value to set (any type: string, number, boolean, null, object, array)')
@@ -128,6 +129,7 @@ const baseConfigSchema = zod_1.z.object({
         keySeparator: zod_1.z.boolean().optional(),
         quoteValues: zod_1.z.record(zod_1.z.string(), zod_1.z.array(zod_1.z.string())).optional(),
         keyOrders: zod_1.z.record(zod_1.z.string(), zod_1.z.array(zod_1.z.string())).optional(),
+        keySort: zod_1.z.record(zod_1.z.string(), zod_1.z.array(keySortRuleSchema)).optional(),
         arraySort: zod_1.z.record(zod_1.z.string(), zod_1.z.array(arraySortRuleSchema)).optional()
     })
         .optional(),
@@ -149,6 +151,7 @@ const finalConfigSchema = baseConfigSchema
         keySeparator: zod_1.z.boolean().default(false),
         quoteValues: zod_1.z.record(zod_1.z.string(), zod_1.z.array(zod_1.z.string())).optional(),
         keyOrders: zod_1.z.record(zod_1.z.string(), zod_1.z.array(zod_1.z.string())).optional(),
+        keySort: zod_1.z.record(zod_1.z.string(), zod_1.z.array(keySortRuleSchema)).optional(),
         arraySort: zod_1.z.record(zod_1.z.string(), zod_1.z.array(arraySortRuleSchema)).optional()
     })
         .optional()
@@ -176,6 +179,7 @@ const formatOnlyConfigSchema = baseConfigSchema
         keySeparator: zod_1.z.boolean().default(false),
         quoteValues: zod_1.z.record(zod_1.z.string(), zod_1.z.array(zod_1.z.string())).optional(),
         keyOrders: zod_1.z.record(zod_1.z.string(), zod_1.z.array(zod_1.z.string())).optional(),
+        keySort: zod_1.z.record(zod_1.z.string(), zod_1.z.array(keySortRuleSchema)).optional(),
         arraySort: zod_1.z.record(zod_1.z.string(), zod_1.z.array(arraySortRuleSchema)).optional()
     })
         .optional()

package/dist/htmlReporter.d.ts

@@ -1,5 +1,6 @@
 import { Config } from './configFile';
 import { FileDiffResult } from './fileDiff';
+import type { ValidationResult } from './stopRulesValidator';
 export type { DiffStats, ReportMetadata } from './reporters/htmlTemplate';
 declare const HtmlReporterErrorClass: {
     new (message: string, options?: import("./utils/errors").ErrorOptions): {
@@ -19,4 +20,4 @@ declare const HtmlReporterErrorClass: {
 export declare class HtmlReporterError extends HtmlReporterErrorClass {
 }
 export declare const isHtmlReporterError: (error: unknown) => error is HtmlReporterError;
-export declare const generateHtmlReport: (diffResult: FileDiffResult, formattedFiles: string[], config: Config, dryRun: boolean, logger?: import("./logger").Logger) => Promise<void>;
+export declare const generateHtmlReport: (diffResult: FileDiffResult, formattedFiles: string[], config: Config, dryRun: boolean, logger?: import("./logger").Logger, validationResult?: ValidationResult) => Promise<void>;

package/dist/htmlReporter.js

@@ -118,7 +118,7 @@ const writeHtmlFile = async (htmlContent, outputPath) => {
         });
     }
 };
-const generateHtmlReport = async (diffResult, formattedFiles, config, dryRun, logger) => {
+const generateHtmlReport = async (diffResult, formattedFiles, config, dryRun, logger, validationResult) => {
     const reportPath = generateTemporaryFilePath();
     const metadata = {
         timestamp: new Date().toISOString(),
@@ -151,7 +151,17 @@ const generateHtmlReport = async (diffResult, formattedFiles, config, dryRun, lo
     }
     statsArray.sort((a, b) => b.added + b.removed - (a.added + a.removed));
     const diffStats = { totalAdded, totalRemoved, fileStats: statsArray };
-    const htmlContent = (0, htmlTemplate_1.generateHtmlTemplate)(diffResult, formattedFiles, trulyUnchangedFiles, metadata, changedSections, changedFileIds, addedSections, addedFileIds, fileStats, diffStats);
+    const stopRuleViolations = validationResult && validationResult.violations.length > 0
+        ? validationResult.violations.map((violation) => ({
+            file: violation.file,
+            rule: { type: violation.rule.type, path: violation.rule.path },
+            path: violation.path,
+            oldValue: violation.oldValue,
+            updatedValue: violation.updatedValue,
+            message: violation.message
+        }))
+        : undefined;
+    const htmlContent = (0, htmlTemplate_1.generateHtmlTemplate)(diffResult, formattedFiles, trulyUnchangedFiles, metadata, changedSections, changedFileIds, addedSections, addedFileIds, diffStats, stopRuleViolations);
     await writeHtmlFile(htmlContent, reportPath);
     logger?.log(`✓ HTML report generated: ${reportPath}, opening in browser...`);
     try {

package/dist/index.js

@@ -326,7 +326,7 @@ const main = async () => {
     }
     const formattedFiles = await (0, fileUpdater_1.updateFiles)(diffResult, sourceFiles, destinationFiles, syncConfig, command.dryRun, command.skipFormat, logger);
     if (command.diffHtml && !command.quiet)
-        await (0, htmlReporter_1.generateHtmlReport)(diffResult, formattedFiles, syncConfig, command.dryRun, logger);
+        await (0, htmlReporter_1.generateHtmlReport)(diffResult, formattedFiles, syncConfig, command.dryRun, logger, command.dryRun ? validationResult : undefined);
     if (command.diffJson)
         (0, jsonReporter_1.generateJsonReport)(diffResult, formattedFiles, validationResult, syncConfig, command.dryRun, package_json_1.default.version);
 };

package/dist/reporters/htmlStyles.d.ts

@@ -1,3 +1,3 @@
 export declare const DIFF2HTML_STYLES: string;
-export declare const HTML_STYLES = "\n  /* Custom styles */\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    margin: 0;\n    padding: 20px;\n    background: #f6f8fa;\n  }\n\n  header {\n    background: white;\n    padding: 20px;\n    border-radius: 6px;\n    margin-bottom: 20px;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n  }\n\n  h1 {\n    margin: 0 0 10px 0;\n    color: #24292e;\n  }\n\n  .metadata {\n    display: flex;\n    gap: 20px;\n    margin: 10px 0;\n    color: #586069;\n    font-size: 14px;\n  }\n\n  .dry-run-badge {\n    display: inline-block;\n    padding: 4px 8px;\n    background: #cfe2ff;\n    color: #084298;\n    border-radius: 4px;\n    font-weight: bold;\n    font-size: 12px;\n  }\n\n  .summary {\n    display: flex;\n    gap: 12px;\n    margin: 15px 0;\n  }\n\n  .stat {\n    padding: 8px 16px;\n    border-radius: 6px;\n    font-weight: 600;\n    font-size: 14px;\n  }\n\n  .stat.added { background: #d4edda; color: #155724; }\n  .stat.changed { background: #fff3cd; color: #856404; }\n  .stat.deleted { background: #f8d7da; color: #721c24; }\n  .stat.formatted { background: #d1ecf1; color: #0c5460; }\n  .stat.unchanged { background: #e2e3e5; color: #383d41; }\n\n  .tabs {\n    display: flex;\n    background: white;\n    border-radius: 6px 6px 0 0;\n    border-bottom: 1px solid #d0d7de;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n  }\n\n  .tab {\n    padding: 12px 24px;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    font-size: 14px;\n    color: #586069;\n    transition: all 0.2s;\n  }\n\n  .tab:hover {\n    color: #24292e;\n  }\n\n  .tab.active {\n    border-bottom: 2px solid #0969da;\n    color: #0969da;\n    font-weight: 600;\n  }\n\n  main {\n    background: white;\n    padding: 20px;\n    border-radius: 0 0 6px 6px;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n  }\n\n  .tab-content {\n    display: none;\n  }\n\n  .tab-content.active {\n    display: block;\n  }\n\n  .file-section {\n    margin: 12px 0;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n  }\n\n  .file-section summary {\n    padding: 12px 16px;\n    background: #f6f8fa;\n    cursor: pointer;\n    font-weight: 600;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 13px;\n    color: #24292e;\n  }\n\n  .file-section summary:hover {\n    background: #eaeef2;\n  }\n\n  .file-section[open] > summary {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    border-bottom: 1px solid #d0d7de;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n\n  .filename-transform {\n    color: #0969da;\n  }\n\n  .diff-container {\n    padding: 0;\n  }\n\n  /* Hide diff2html file header with rename badge */\n  .d2h-file-header {\n    display: none;\n  }\n\n  .file-list {\n    margin: 20px 0;\n  }\n\n  .file-list ul {\n    list-style: none;\n    padding: 0;\n    margin: 10px 0;\n  }\n\n  .file-list li {\n    padding: 8px 16px;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 13px;\n    color: #586069;\n    border-bottom: 1px solid #f6f8fa;\n  }\n\n  .file-list li:hover {\n    background: #f6f8fa;\n  }\n\n  /* Treeview styles */\n  .tree-root {\n    list-style: none;\n    padding: 0;\n    margin: 10px 0;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 13px;\n  }\n\n  .tree-root ul {\n    list-style: none;\n    padding-left: 20px;\n    margin: 0;\n  }\n\n  .tree-folder,\n  .tree-file {\n    padding: 4px 8px;\n    border-radius: 4px;\n    cursor: default;\n  }\n\n  .tree-folder:hover,\n  .tree-file:hover {\n    background: #f6f8fa;\n  }\n\n  .tree-toggle {\n    display: inline-block;\n    width: 16px;\n    cursor: pointer;\n    color: #586069;\n    font-size: 10px;\n    user-select: none;\n  }\n\n  .tree-folder.collapsed > .tree-toggle {\n    transform: rotate(-90deg);\n  }\n\n  .tree-folder.collapsed > .tree-children {\n    display: none;\n  }\n\n  .tree-folder-name {\n    color: #0969da;\n    font-weight: 500;\n  }\n\n  .tree-file-name {\n    color: #586069;\n    padding-left: 16px;\n  }\n\n  /* Sidebar styles */\n  .sidebar-container {\n    display: flex;\n    gap: 0;\n  }\n\n  .sidebar {\n    width: 280px;\n    min-width: 280px;\n    border-right: 1px solid #d0d7de;\n    background: #f6f8fa;\n    transition: width 0.2s, min-width 0.2s, padding 0.2s, opacity 0.2s;\n  }\n\n  .sidebar.collapsed {\n    width: 0;\n    min-width: 0;\n    padding: 0;\n    overflow: hidden;\n    border-right: none;\n  }\n\n  .sidebar-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    border-bottom: 1px solid #d0d7de;\n    background: #fff;\n    font-weight: 600;\n    font-size: 14px;\n    color: #24292e;\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n\n  .sidebar-toggle {\n    background: none;\n    border: 1px solid #d0d7de;\n    border-radius: 4px;\n    cursor: pointer;\n    padding: 4px 8px;\n    color: #586069;\n    font-size: 12px;\n  }\n\n  .sidebar-toggle:hover {\n    background: #f6f8fa;\n    color: #24292e;\n  }\n\n  .sidebar-content {\n    padding: 8px;\n  }\n\n  .sidebar-tree .tree-file-link {\n    color: #586069;\n    text-decoration: none;\n    padding-left: 16px;\n    display: block;\n  }\n\n  .sidebar-tree .tree-file-link:hover {\n    color: #0969da;\n  }\n\n  .sidebar-tree .tree-file.active .tree-file-link {\n    color: #0969da;\n    font-weight: 600;\n  }\n\n  .changed-content {\n    flex: 1;\n    min-width: 0;\n    padding-left: 20px;\n  }\n\n  .sidebar-expand-btn {\n    display: none;\n    position: fixed;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    background: #f6f8fa;\n    border: 1px solid #d0d7de;\n    border-left: none;\n    border-radius: 0 4px 4px 0;\n    padding: 8px 4px;\n    cursor: pointer;\n    color: #586069;\n    z-index: 100;\n  }\n\n  .sidebar-expand-btn:hover {\n    background: #eaeef2;\n    color: #24292e;\n  }\n\n  .sidebar.collapsed ~ .sidebar-expand-btn {\n    display: block;\n  }\n\n  /* Added content area (same as changed-content) */\n  .added-content {\n    flex: 1;\n    min-width: 0;\n    padding-left: 20px;\n  }\n\n  /* Content container for added files */\n  .content-container {\n    padding: 16px;\n    background: #f6f8fa;\n    border-top: 1px solid #d0d7de;\n  }\n\n  .content-actions {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 12px;\n  }\n\n  .copy-btn,\n  .download-btn {\n    padding: 6px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    background: white;\n    cursor: pointer;\n    font-size: 13px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    color: #24292e;\n    transition: all 0.2s;\n  }\n\n  .copy-btn:hover,\n  .download-btn:hover {\n    background: #f3f4f6;\n    border-color: #b0b7be;\n  }\n\n  .copy-btn.copied {\n    background: #d4edda;\n    border-color: #28a745;\n    color: #155724;\n  }\n\n  .file-content {\n    margin: 0;\n    padding: 16px;\n    background: white;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    overflow-x: auto;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 12px;\n    line-height: 1.5;\n    white-space: pre;\n  }\n\n  .file-content code {\n    font-family: inherit;\n  }\n\n  /* Scroll-to-top button */\n  .scroll-to-top {\n    display: none;\n    position: fixed;\n    bottom: 30px;\n    right: 30px;\n    width: 40px;\n    height: 40px;\n    border: none;\n    border-radius: 50%;\n    background: #0969da;\n    color: white;\n    font-size: 18px;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n    transition: opacity 0.2s, background 0.2s;\n    z-index: 200;\n    line-height: 40px;\n    text-align: center;\n    padding: 0;\n  }\n\n  .scroll-to-top:hover {\n    background: #0550ae;\n  }\n\n  .scroll-to-top.visible {\n    display: block;\n  }\n\n  /* Content toolbar (collapse/expand buttons) */\n  .content-toolbar {\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n    margin-bottom: 12px;\n  }\n\n  .collapse-all-btn,\n  .expand-all-btn {\n    padding: 4px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 4px;\n    background: none;\n    cursor: pointer;\n    font-size: 12px;\n    color: #586069;\n    transition: all 0.2s;\n  }\n\n  .collapse-all-btn:hover,\n  .expand-all-btn:hover {\n    background: #f6f8fa;\n    color: #24292e;\n  }\n\n  /* Line change count badges */\n  .summary-badges {\n    float: right;\n    display: inline-flex;\n    gap: 6px;\n    margin-left: 12px;\n  }\n\n  .line-badge {\n    display: inline-block;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    line-height: 18px;\n  }\n\n  .line-added {\n    background: #d4edda;\n    color: #155724;\n  }\n\n  .line-removed {\n    background: #f8d7da;\n    color: #721c24;\n  }\n\n  .sidebar-tree .line-badge {\n    font-size: 10px;\n    padding: 0 5px;\n    line-height: 16px;\n  }\n\n  /* Diff toolbar */\n  .diff-toolbar {\n    display: flex;\n    justify-content: flex-end;\n    padding: 8px 16px;\n    border-bottom: 1px solid #d0d7de;\n    background: #f6f8fa;\n  }\n\n  .copy-diff-btn {\n    padding: 4px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    background: white;\n    cursor: pointer;\n    font-size: 12px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    color: #24292e;\n    transition: all 0.2s;\n  }\n\n  .copy-diff-btn:hover {\n    background: #f3f4f6;\n    border-color: #b0b7be;\n  }\n\n  .copy-diff-btn.copied {\n    background: #d4edda;\n    border-color: #28a745;\n    color: #155724;\n  }\n\n  /* Sidebar search */\n  .sidebar-search {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid #d0d7de;\n    border-radius: 4px;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 12px;\n    margin-bottom: 8px;\n    box-sizing: border-box;\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background: #fff;\n  }\n\n  .sidebar-search:focus {\n    outline: none;\n    border-color: #0969da;\n    box-shadow: 0 0 0 3px rgba(9,105,218,0.15);\n  }\n\n  /* Statistics dashboard */\n  .stats-dashboard {\n    margin: 15px 0 0;\n    padding: 12px 0 0;\n    border-top: 1px solid #e1e4e8;\n  }\n\n  .stats-summary {\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    margin-bottom: 10px;\n  }\n\n  .stats-summary .total-added {\n    font-weight: 700;\n    color: #155724;\n    font-size: 16px;\n  }\n\n  .stats-summary .total-removed {\n    font-weight: 700;\n    color: #721c24;\n    font-size: 16px;\n  }\n\n  .stats-bar {\n    display: flex;\n    height: 8px;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #e1e4e8;\n    margin-bottom: 10px;\n  }\n\n  .stats-segment {\n    height: 100%;\n    min-width: 2px;\n  }\n\n  .stats-segment.added-segment {\n    background: #28a745;\n  }\n\n  .stats-segment.removed-segment {\n    background: #d73a49;\n  }\n\n  .top-changed-files {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    font-size: 13px;\n  }\n\n  .top-changed-files li {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 3px 0;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    color: #586069;\n  }\n\n  .top-changed-files .file-path {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin-right: 8px;\n  }\n\n  .top-changed-files .file-stats {\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n";
+export declare const HTML_STYLES = "\n  /* Custom styles */\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    margin: 0;\n    padding: 20px;\n    background: #f6f8fa;\n  }\n\n  header {\n    background: white;\n    padding: 20px;\n    border-radius: 6px;\n    margin-bottom: 20px;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n  }\n\n  h1 {\n    margin: 0 0 10px 0;\n    color: #24292e;\n  }\n\n  .metadata {\n    display: flex;\n    gap: 20px;\n    margin: 10px 0;\n    color: #586069;\n    font-size: 14px;\n  }\n\n  .dry-run-badge {\n    display: inline-block;\n    padding: 4px 8px;\n    background: #cfe2ff;\n    color: #084298;\n    border-radius: 4px;\n    font-weight: bold;\n    font-size: 12px;\n  }\n\n  .summary {\n    display: flex;\n    gap: 12px;\n    margin: 15px 0;\n  }\n\n  .stat {\n    padding: 8px 16px;\n    border-radius: 6px;\n    font-weight: 600;\n    font-size: 14px;\n  }\n\n  .stat.added { background: #d4edda; color: #155724; }\n  .stat.changed { background: #fff3cd; color: #856404; }\n  .stat.deleted { background: #f8d7da; color: #721c24; }\n  .stat.formatted { background: #d1ecf1; color: #0c5460; }\n  .stat.unchanged { background: #e2e3e5; color: #383d41; }\n\n  .tabs {\n    display: flex;\n    background: white;\n    border-radius: 6px 6px 0 0;\n    border-bottom: 1px solid #d0d7de;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n  }\n\n  .tab {\n    padding: 12px 24px;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    font-size: 14px;\n    color: #586069;\n    transition: all 0.2s;\n  }\n\n  .tab:hover {\n    color: #24292e;\n  }\n\n  .tab.active {\n    border-bottom: 2px solid #0969da;\n    color: #0969da;\n    font-weight: 600;\n  }\n\n  main {\n    background: white;\n    padding: 20px;\n    border-radius: 0 0 6px 6px;\n    box-shadow: 0 1px 3px rgba(0,0,0,0.12);\n  }\n\n  .tab-content {\n    display: none;\n  }\n\n  .tab-content.active {\n    display: block;\n  }\n\n  .file-section {\n    margin: 12px 0;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n  }\n\n  .file-section summary {\n    padding: 12px 16px;\n    background: #f6f8fa;\n    cursor: pointer;\n    font-weight: 600;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 13px;\n    color: #24292e;\n  }\n\n  .file-section summary:hover {\n    background: #eaeef2;\n  }\n\n  .file-section[open] > summary {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    border-bottom: 1px solid #d0d7de;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n\n  .filename-transform {\n    color: #0969da;\n  }\n\n  .diff-container {\n    padding: 0;\n  }\n\n  /* Hide diff2html file header with rename badge */\n  .d2h-file-header {\n    display: none;\n  }\n\n  .file-list {\n    margin: 20px 0;\n  }\n\n  .file-list ul {\n    list-style: none;\n    padding: 0;\n    margin: 10px 0;\n  }\n\n  .file-list li {\n    padding: 8px 16px;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 13px;\n    color: #586069;\n    border-bottom: 1px solid #f6f8fa;\n  }\n\n  .file-list li:hover {\n    background: #f6f8fa;\n  }\n\n  /* Treeview styles */\n  .tree-root {\n    list-style: none;\n    padding: 0;\n    margin: 10px 0;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 13px;\n  }\n\n  .tree-root ul {\n    list-style: none;\n    padding-left: 20px;\n    margin: 0;\n  }\n\n  .tree-folder,\n  .tree-file {\n    padding: 4px 8px;\n    border-radius: 4px;\n    cursor: default;\n  }\n\n  .tree-folder:hover,\n  .tree-file:hover {\n    background: #f6f8fa;\n  }\n\n  .tree-toggle {\n    display: inline-block;\n    width: 16px;\n    cursor: pointer;\n    color: #586069;\n    font-size: 10px;\n    user-select: none;\n  }\n\n  .tree-folder.collapsed > .tree-toggle {\n    transform: rotate(-90deg);\n  }\n\n  .tree-folder.collapsed > .tree-children {\n    display: none;\n  }\n\n  .tree-folder-name {\n    color: #0969da;\n    font-weight: 500;\n  }\n\n  .tree-file-name {\n    color: #586069;\n    padding-left: 16px;\n  }\n\n  /* Sidebar styles */\n  .sidebar-container {\n    display: flex;\n    gap: 0;\n  }\n\n  .sidebar {\n    width: 280px;\n    min-width: 280px;\n    border-right: 1px solid #d0d7de;\n    background: #f6f8fa;\n    transition: width 0.2s, min-width 0.2s, padding 0.2s, opacity 0.2s;\n  }\n\n  .sidebar.collapsed {\n    width: 0;\n    min-width: 0;\n    padding: 0;\n    overflow: hidden;\n    border-right: none;\n  }\n\n  .sidebar-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 16px;\n    border-bottom: 1px solid #d0d7de;\n    background: #fff;\n    font-weight: 600;\n    font-size: 14px;\n    color: #24292e;\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n\n  .sidebar-toggle {\n    background: none;\n    border: 1px solid #d0d7de;\n    border-radius: 4px;\n    cursor: pointer;\n    padding: 4px 8px;\n    color: #586069;\n    font-size: 12px;\n  }\n\n  .sidebar-toggle:hover {\n    background: #f6f8fa;\n    color: #24292e;\n  }\n\n  .sidebar-content {\n    padding: 8px;\n  }\n\n  .sidebar-tree .tree-file-link {\n    color: #586069;\n    text-decoration: none;\n    padding-left: 16px;\n    display: block;\n  }\n\n  .sidebar-tree .tree-file-link:hover {\n    color: #0969da;\n  }\n\n  .sidebar-tree .tree-file.active .tree-file-link {\n    color: #0969da;\n    font-weight: 600;\n  }\n\n  .changed-content {\n    flex: 1;\n    min-width: 0;\n    padding-left: 20px;\n  }\n\n  .sidebar-expand-btn {\n    display: none;\n    position: fixed;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    background: #f6f8fa;\n    border: 1px solid #d0d7de;\n    border-left: none;\n    border-radius: 0 4px 4px 0;\n    padding: 8px 4px;\n    cursor: pointer;\n    color: #586069;\n    z-index: 100;\n  }\n\n  .sidebar-expand-btn:hover {\n    background: #eaeef2;\n    color: #24292e;\n  }\n\n  .sidebar.collapsed ~ .sidebar-expand-btn {\n    display: block;\n  }\n\n  /* Added content area (same as changed-content) */\n  .added-content {\n    flex: 1;\n    min-width: 0;\n    padding-left: 20px;\n  }\n\n  /* Content container for added files */\n  .content-container {\n    padding: 16px;\n    background: #f6f8fa;\n    border-top: 1px solid #d0d7de;\n  }\n\n  .content-actions {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 12px;\n  }\n\n  .copy-btn,\n  .download-btn {\n    padding: 6px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    background: white;\n    cursor: pointer;\n    font-size: 13px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    color: #24292e;\n    transition: all 0.2s;\n  }\n\n  .copy-btn:hover,\n  .download-btn:hover {\n    background: #f3f4f6;\n    border-color: #b0b7be;\n  }\n\n  .copy-btn.copied {\n    background: #d4edda;\n    border-color: #28a745;\n    color: #155724;\n  }\n\n  .file-content {\n    margin: 0;\n    padding: 16px;\n    background: white;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    overflow-x: auto;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 12px;\n    line-height: 1.5;\n    white-space: pre;\n  }\n\n  .file-content code {\n    font-family: inherit;\n  }\n\n  /* Scroll-to-top button */\n  .scroll-to-top {\n    display: none;\n    position: fixed;\n    bottom: 30px;\n    right: 30px;\n    width: 40px;\n    height: 40px;\n    border: none;\n    border-radius: 50%;\n    background: #0969da;\n    color: white;\n    font-size: 18px;\n    cursor: pointer;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.2);\n    transition: opacity 0.2s, background 0.2s;\n    z-index: 200;\n    line-height: 40px;\n    text-align: center;\n    padding: 0;\n  }\n\n  .scroll-to-top:hover {\n    background: #0550ae;\n  }\n\n  .scroll-to-top.visible {\n    display: block;\n  }\n\n  /* Content toolbar (collapse/expand buttons) */\n  .content-toolbar {\n    display: flex;\n    gap: 8px;\n    justify-content: flex-end;\n    margin-bottom: 12px;\n  }\n\n  .collapse-all-btn,\n  .expand-all-btn {\n    padding: 4px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 4px;\n    background: none;\n    cursor: pointer;\n    font-size: 12px;\n    color: #586069;\n    transition: all 0.2s;\n  }\n\n  .collapse-all-btn:hover,\n  .expand-all-btn:hover {\n    background: #f6f8fa;\n    color: #24292e;\n  }\n\n  /* Line change count badges */\n  .summary-badges {\n    float: right;\n    display: inline-flex;\n    gap: 6px;\n    margin-left: 12px;\n  }\n\n  .line-badge {\n    display: inline-block;\n    padding: 1px 8px;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    line-height: 18px;\n  }\n\n  .line-added {\n    background: #d4edda;\n    color: #155724;\n  }\n\n  .line-removed {\n    background: #f8d7da;\n    color: #721c24;\n  }\n\n  /* Diff toolbar */\n  .diff-toolbar {\n    display: flex;\n    justify-content: flex-end;\n    padding: 8px 16px;\n    border-bottom: 1px solid #d0d7de;\n    background: #f6f8fa;\n  }\n\n  .copy-diff-btn {\n    padding: 4px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    background: white;\n    cursor: pointer;\n    font-size: 12px;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    color: #24292e;\n    transition: all 0.2s;\n  }\n\n  .copy-diff-btn:hover {\n    background: #f3f4f6;\n    border-color: #b0b7be;\n  }\n\n  .copy-diff-btn.copied {\n    background: #d4edda;\n    border-color: #28a745;\n    color: #155724;\n  }\n\n  /* Sidebar search */\n  .sidebar-search {\n    width: 100%;\n    padding: 6px 8px;\n    border: 1px solid #d0d7de;\n    border-radius: 4px;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 12px;\n    margin-bottom: 8px;\n    box-sizing: border-box;\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    background: #fff;\n  }\n\n  .sidebar-search:focus {\n    outline: none;\n    border-color: #0969da;\n    box-shadow: 0 0 0 3px rgba(9,105,218,0.15);\n  }\n\n  /* Stats toggle button */\n  .stats-toggle-btn {\n    padding: 4px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 4px;\n    background: none;\n    cursor: pointer;\n    font-size: 12px;\n    color: #586069;\n    transition: all 0.2s;\n  }\n\n  .stats-toggle-btn:hover {\n    background: #f6f8fa;\n    color: #24292e;\n  }\n\n  /* Statistics dashboard */\n  .stats-dashboard {\n    margin: 15px 0 0;\n    padding: 12px 0 0;\n    border-top: 1px solid #e1e4e8;\n  }\n\n  .stats-summary {\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    margin-bottom: 10px;\n  }\n\n  .stats-summary .total-added {\n    font-weight: 700;\n    color: #155724;\n    font-size: 16px;\n  }\n\n  .stats-summary .total-removed {\n    font-weight: 700;\n    color: #721c24;\n    font-size: 16px;\n  }\n\n  .stats-bar {\n    display: flex;\n    height: 8px;\n    border-radius: 4px;\n    overflow: hidden;\n    background: #e1e4e8;\n    margin-bottom: 10px;\n  }\n\n  .stats-segment {\n    height: 100%;\n    min-width: 2px;\n  }\n\n  .stats-segment.added-segment {\n    background: #28a745;\n  }\n\n  .stats-segment.removed-segment {\n    background: #d73a49;\n  }\n\n  .top-changed-files {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    font-size: 13px;\n  }\n\n  .top-changed-files li {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 3px 0;\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    color: #586069;\n  }\n\n  .top-changed-files .file-path {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    margin-right: 8px;\n  }\n\n  .top-changed-files .file-stats {\n    white-space: nowrap;\n    flex-shrink: 0;\n  }\n\n  /* Stop rules violations badge */\n  .stat.violations { background: #f8d7da; color: #721c24; }\n\n  /* Violations section */\n  .violations-section {\n    margin: 15px 0 0;\n    padding: 12px 0 0;\n    border-top: 1px solid #e1e4e8;\n  }\n\n  .violations-toggle-btn {\n    padding: 4px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 4px;\n    background: none;\n    cursor: pointer;\n    font-size: 12px;\n    color: #586069;\n    transition: all 0.2s;\n  }\n\n  .violations-toggle-btn:hover {\n    background: #f6f8fa;\n    color: #24292e;\n  }\n\n  .violations-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 13px;\n    margin-top: 10px;\n  }\n\n  .violations-table th {\n    background: #f6f8fa;\n    text-align: left;\n    padding: 8px 12px;\n    border-bottom: 2px solid #d0d7de;\n    font-weight: 600;\n    color: #24292e;\n  }\n\n  .violations-table td {\n    padding: 8px 12px;\n    border-bottom: 1px solid #e1e4e8;\n    color: #24292e;\n    vertical-align: top;\n  }\n\n  .violations-table tr:hover td {\n    background: #f6f8fa;\n  }\n\n  .violation-rule-badge {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n    background: #fff3cd;\n    color: #856404;\n    white-space: nowrap;\n  }\n\n  .violation-value {\n    font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", monospace;\n    font-size: 12px;\n    background: #f6f8fa;\n    padding: 2px 6px;\n    border-radius: 3px;\n    border: 1px solid #e1e4e8;\n  }\n";
 export declare const TAB_SCRIPT: string;

package/dist/reporters/htmlStyles.js

@@ -471,12 +471,6 @@ exports.HTML_STYLES = `
     color: #721c24;
   }
 
-  .sidebar-tree .line-badge {
-    font-size: 10px;
-    padding: 0 5px;
-    line-height: 16px;
-  }
-
   /* Diff toolbar */
   .diff-toolbar {
     display: flex;
@@ -531,6 +525,23 @@ exports.HTML_STYLES = `
     box-shadow: 0 0 0 3px rgba(9,105,218,0.15);
   }
 
+  /* Stats toggle button */
+  .stats-toggle-btn {
+    padding: 4px 12px;
+    border: 1px solid #d0d7de;
+    border-radius: 4px;
+    background: none;
+    cursor: pointer;
+    font-size: 12px;
+    color: #586069;
+    transition: all 0.2s;
+  }
+
+  .stats-toggle-btn:hover {
+    background: #f6f8fa;
+    color: #24292e;
+  }
+
   /* Statistics dashboard */
   .stats-dashboard {
     margin: 15px 0 0;
@@ -606,6 +617,79 @@ exports.HTML_STYLES = `
     white-space: nowrap;
     flex-shrink: 0;
   }
+
+  /* Stop rules violations badge */
+  .stat.violations { background: #f8d7da; color: #721c24; }
+
+  /* Violations section */
+  .violations-section {
+    margin: 15px 0 0;
+    padding: 12px 0 0;
+    border-top: 1px solid #e1e4e8;
+  }
+
+  .violations-toggle-btn {
+    padding: 4px 12px;
+    border: 1px solid #d0d7de;
+    border-radius: 4px;
+    background: none;
+    cursor: pointer;
+    font-size: 12px;
+    color: #586069;
+    transition: all 0.2s;
+  }
+
+  .violations-toggle-btn:hover {
+    background: #f6f8fa;
+    color: #24292e;
+  }
+
+  .violations-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+    margin-top: 10px;
+  }
+
+  .violations-table th {
+    background: #f6f8fa;
+    text-align: left;
+    padding: 8px 12px;
+    border-bottom: 2px solid #d0d7de;
+    font-weight: 600;
+    color: #24292e;
+  }
+
+  .violations-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid #e1e4e8;
+    color: #24292e;
+    vertical-align: top;
+  }
+
+  .violations-table tr:hover td {
+    background: #f6f8fa;
+  }
+
+  .violation-rule-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+    background: #fff3cd;
+    color: #856404;
+    white-space: nowrap;
+  }
+
+  .violation-value {
+    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+    font-size: 12px;
+    background: #f6f8fa;
+    padding: 2px 6px;
+    border-radius: 3px;
+    border: 1px solid #e1e4e8;
+  }
 `;
 exports.TAB_SCRIPT = String.raw `
   // Tab switching
@@ -892,4 +976,44 @@ exports.TAB_SCRIPT = String.raw `
       });
     });
   });
+
+  // Stats dashboard toggle
+  const statsToggleBtn = document.getElementById('stats-toggle-btn');
+  const statsDashboardContent = document.getElementById('stats-dashboard-content');
+  if (statsToggleBtn && statsDashboardContent) {
+    statsToggleBtn.addEventListener('click', () => {
+      const isHidden = statsDashboardContent.style.display === 'none';
+      statsDashboardContent.style.display = isHidden ? 'block' : 'none';
+      statsToggleBtn.textContent = isHidden ? 'Hide Details' : 'Show Details';
+    });
+  }
+
+  // Violations section toggle
+  const violationsToggleBtn = document.getElementById('violations-toggle-btn');
+  const violationsContent = document.getElementById('violations-content');
+  if (violationsToggleBtn && violationsContent) {
+    violationsToggleBtn.addEventListener('click', () => {
+      const isHidden = violationsContent.style.display === 'none';
+      violationsContent.style.display = isHidden ? 'block' : 'none';
+      const count = violationsToggleBtn.textContent.match(/\d+/)?.[0] || '0';
+      violationsToggleBtn.textContent = isHidden ? 'Hide Violations (' + count + ')' : 'Show Violations (' + count + ')';
+    });
+  }
+
+  // Synchronized horizontal scrolling for side-by-side diff panels
+  document.querySelectorAll('.d2h-files-diff').forEach(container => {
+    const panels = container.querySelectorAll('.d2h-file-side-diff');
+    if (panels.length === 2) {
+      let isSyncing = false;
+      panels.forEach((panel, index) => {
+        panel.addEventListener('scroll', () => {
+          if (isSyncing) return;
+          isSyncing = true;
+          const other = panels[1 - index];
+          other.scrollLeft = panel.scrollLeft;
+          isSyncing = false;
+        });
+      });
+    }
+  });
 `;

package/dist/reporters/htmlTemplate.d.ts

@@ -1,4 +1,15 @@
 import { FileDiffResult } from '../fileDiff';
+export interface HtmlStopRuleViolation {
+    file: string;
+    rule: {
+        type: string;
+        path?: string;
+    };
+    path: string;
+    oldValue: unknown;
+    updatedValue: unknown;
+    message: string;
+}
 export interface ReportMetadata {
     timestamp: string;
     source: string;
@@ -14,7 +25,4 @@ export interface DiffStats {
         removed: number;
     }>;
 }
-export declare const generateHtmlTemplate: (diffResult: FileDiffResult, formattedFiles: string[], trulyUnchangedFiles: string[], metadata: ReportMetadata, changedSections: string[], changedFileIds?: Map<string, string>, addedSections?: string[], addedFileIds?: Map<string, string>, fileStats?: Map<string, {
-    added: number;
-    removed: number;
-}>, diffStats?: DiffStats) => string;
+export declare const generateHtmlTemplate: (diffResult: FileDiffResult, formattedFiles: string[], trulyUnchangedFiles: string[], metadata: ReportMetadata, changedSections: string[], changedFileIds?: Map<string, string>, addedSections?: string[], addedFileIds?: Map<string, string>, diffStats?: DiffStats, stopRuleViolations?: HtmlStopRuleViolation[]) => string;

package/dist/reporters/htmlTemplate.js

@@ -4,31 +4,74 @@ exports.generateHtmlTemplate = void 0;
 const htmlStyles_1 = require("./htmlStyles");
 const treeBuilder_1 = require("./treeBuilder");
 const treeRenderer_1 = require("./treeRenderer");
+const formatViolationValue = (value) => {
+    if (value === undefined || value === null)
+        return '<span class="violation-value">-</span>';
+    return `<span class="violation-value">${(0, treeRenderer_1.escapeHtml)(String(value))}</span>`;
+};
+const renderStopRulesSection = (violations) => {
+    if (violations.length === 0)
+        return '';
+    const rows = violations
+        .map((v) => `<tr>
+          <td>${(0, treeRenderer_1.escapeHtml)(v.file)}</td>
+          <td><span class="violation-rule-badge">${(0, treeRenderer_1.escapeHtml)(v.rule.type)}</span></td>
+          <td>${(0, treeRenderer_1.escapeHtml)(v.path)}</td>
+          <td>${formatViolationValue(v.oldValue)}</td>
+          <td>${formatViolationValue(v.updatedValue)}</td>
+          <td>${(0, treeRenderer_1.escapeHtml)(v.message)}</td>
+        </tr>`)
+        .join('');
+    return `
+    <div class="violations-section">
+      <button class="violations-toggle-btn" id="violations-toggle-btn">Show Violations (${violations.length})</button>
+      <div id="violations-content" style="display: none">
+        <table class="violations-table">
+          <thead>
+            <tr>
+              <th>File</th>
+              <th>Rule</th>
+              <th>Path</th>
+              <th>Old Value</th>
+              <th>New Value</th>
+              <th>Message</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${rows}
+          </tbody>
+        </table>
+      </div>
+    </div>`;
+};
 const renderStatsDashboard = (diffStats) => {
     const total = diffStats.totalAdded + diffStats.totalRemoved;
     if (total === 0)
         return '';
     const addedPercent = Math.round((diffStats.totalAdded / total) * 100);
     const removedPercent = 100 - addedPercent;
-    const top5 = diffStats.fileStats.slice(0, 5);
-    const topFilesHtml = top5
+    const top10 = diffStats.fileStats.slice(0, 10);
+    const topFilesHtml = top10
         .map((f) => `<li><span class="file-path">${(0, treeRenderer_1.escapeHtml)(f.path)}</span><span class="file-stats"><span class="line-badge line-added">+${f.added}</span> <span class="line-badge line-removed">-${f.removed}</span></span></li>`)
         .join('');
     return `
     <div class="stats-dashboard">
-      <div class="stats-summary">
-        <span class="total-added">+${diffStats.totalAdded}</span>
-        <span class="total-removed">-${diffStats.totalRemoved}</span>
-        <span style="color: #586069; font-size: 13px;">lines across ${diffStats.fileStats.length} file${diffStats.fileStats.length === 1 ? '' : 's'}</span>
-      </div>
-      <div class="stats-bar">
-        <div class="stats-segment added-segment" style="width: ${addedPercent}%"></div>
-        <div class="stats-segment removed-segment" style="width: ${removedPercent}%"></div>
+      <button class="stats-toggle-btn" id="stats-toggle-btn">Show Details</button>
+      <div id="stats-dashboard-content" style="display: none">
+        <div class="stats-summary">
+          <span class="total-added">+${diffStats.totalAdded}</span>
+          <span class="total-removed">-${diffStats.totalRemoved}</span>
+          <span style="color: #586069; font-size: 13px;">lines across ${diffStats.fileStats.length} file${diffStats.fileStats.length === 1 ? '' : 's'}</span>
+        </div>
+        <div class="stats-bar">
+          <div class="stats-segment added-segment" style="width: ${addedPercent}%"></div>
+          <div class="stats-segment removed-segment" style="width: ${removedPercent}%"></div>
+        </div>
+        ${top10.length > 0 ? `<ul class="top-changed-files">${topFilesHtml}</ul>` : ''}
       </div>
-      ${top5.length > 0 ? `<ul class="top-changed-files">${topFilesHtml}</ul>` : ''}
     </div>`;
 };
-const generateHtmlTemplate = (diffResult, formattedFiles, trulyUnchangedFiles, metadata, changedSections, changedFileIds = new Map(), addedSections = [], addedFileIds = new Map(), fileStats = new Map(), diffStats) => {
+const generateHtmlTemplate = (diffResult, formattedFiles, trulyUnchangedFiles, metadata, changedSections, changedFileIds = new Map(), addedSections = [], addedFileIds = new Map(), diffStats, stopRuleViolations) => {
     const changedFilePaths = diffResult.changedFiles.map((f) => f.path);
     const changedTree = (0, treeBuilder_1.buildFileTree)(changedFilePaths);
     const addedFilePaths = diffResult.addedFiles.map((f) => f.path);
@@ -36,47 +79,33 @@ const generateHtmlTemplate = (diffResult, formattedFiles, trulyUnchangedFiles, m
     const deletedTree = (0, treeBuilder_1.buildFileTree)(diffResult.deletedFiles);
     const formattedTree = (0, treeBuilder_1.buildFileTree)(formattedFiles);
     const unchangedTree = (0, treeBuilder_1.buildFileTree)(trulyUnchangedFiles);
-    return `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>helm-env-delta Report - ${metadata.timestamp}</title>
-  <style>${htmlStyles_1.DIFF2HTML_STYLES}</style>
-  <style>
-${htmlStyles_1.HTML_STYLES}
-  </style>
-</head>
-<body>
-  <header>
-    <h1>helm-env-delta Diff Report</h1>
-    <div class="metadata">
-      <span>📅 Generated: ${metadata.timestamp}</span>
-      <span>📂 Source: ${metadata.source}</span>
-      <span>🎯 Destination: ${metadata.destination}</span>
-      ${metadata.dryRun ? '<span class="dry-run-badge">DRY RUN - No Files Modified</span>' : ''}
-    </div>
-    <div class="summary">
-      <span class="stat added">${diffResult.addedFiles.length} Added</span>
-      <span class="stat changed">${diffResult.changedFiles.length} Changed</span>
-      <span class="stat deleted">${diffResult.deletedFiles.length} Deleted</span>
-      <span class="stat formatted">${formattedFiles.length} Formatted</span>
-      <span class="stat unchanged">${trulyUnchangedFiles.length} Unchanged</span>
-    </div>
-    ${diffStats ? renderStatsDashboard(diffStats) : ''}
-  </header>
-
-  <nav class="tabs">
-    <button class="tab active" data-tab="changed">Changed (${diffResult.changedFiles.length})</button>
-    <button class="tab" data-tab="added">Added (${diffResult.addedFiles.length})</button>
-    <button class="tab" data-tab="deleted">Deleted (${diffResult.deletedFiles.length})</button>
-    <button class="tab" data-tab="formatted">Formatted (${formattedFiles.length})</button>
-    <button class="tab" data-tab="unchanged">Unchanged (${trulyUnchangedFiles.length})</button>
-  </nav>
-
-  <main>
-    <section id="changed" class="tab-content active">
-      ${changedSections.length > 0
+    const categories = [
+        { id: 'changed', label: 'Changed', count: diffResult.changedFiles.length },
+        { id: 'added', label: 'Added', count: diffResult.addedFiles.length },
+        { id: 'deleted', label: 'Deleted', count: diffResult.deletedFiles.length },
+        { id: 'formatted', label: 'Formatted', count: formattedFiles.length },
+        { id: 'unchanged', label: 'Unchanged', count: trulyUnchangedFiles.length }
+    ];
+    const activeCategories = categories.filter((c) => c.count > 0);
+    const firstActiveTab = activeCategories[0]?.id ?? 'changed';
+    const violationsBadge = stopRuleViolations && stopRuleViolations.length > 0
+        ? `<span class="stat violations">${stopRuleViolations.length} Violation${stopRuleViolations.length === 1 ? '' : 's'}</span>`
+        : '';
+    const summaryBadges = activeCategories.map((c) => `<span class="stat ${c.id}">${c.count} ${c.label}</span>`).join('\n      ') +
+        (violationsBadge ? `\n      ${violationsBadge}` : '');
+    const tabButtons = activeCategories
+        .map((c) => `<button class="tab${c.id === firstActiveTab ? ' active' : ''}" data-tab="${c.id}">${c.label} (${c.count})</button>`)
+        .join('\n    ');
+    const renderSection = (id, content) => {
+        const cat = categories.find((c) => c.id === id);
+        if (!cat || cat.count === 0)
+            return '';
+        return `
+    <section id="${id}" class="tab-content${id === firstActiveTab ? ' active' : ''}">
+      ${content}
+    </section>`;
+    };
+    const changedContent = changedSections.length > 0
         ? `
         <div class="sidebar-container">
           <aside class="sidebar" id="changed-sidebar">
@@ -86,7 +115,7 @@ ${htmlStyles_1.HTML_STYLES}
             </div>
             <div class="sidebar-content">
               <input type="text" class="sidebar-search" placeholder="Filter files..." />
-              ${(0, treeRenderer_1.renderSidebarTree)(changedTree, changedFileIds, fileStats)}
+              ${(0, treeRenderer_1.renderSidebarTree)(changedTree, changedFileIds)}
             </div>
           </aside>
           <button class="sidebar-expand-btn">&#9654;</button>
@@ -99,11 +128,8 @@ ${htmlStyles_1.HTML_STYLES}
           </div>
         </div>
       `
-        : '<p style="color: #586069; text-align: center; padding: 40px;">No changed files</p>'}
-    </section>
-
-    <section id="added" class="tab-content">
-      ${addedSections.length > 0
+        : '<p style="color: #586069; text-align: center; padding: 40px;">No changed files</p>';
+    const addedContent = addedSections.length > 0
         ? `
         <div class="sidebar-container">
           <aside class="sidebar" id="added-sidebar">
@@ -122,38 +148,53 @@ ${htmlStyles_1.HTML_STYLES}
           </div>
         </div>
       `
-        : '<p style="color: #586069; text-align: center; padding: 40px;">No added files</p>'}
-    </section>
-
-    <section id="deleted" class="tab-content">
-      ${diffResult.deletedFiles.length > 0
-        ? `
-        <div class="file-list">
-          ${(0, treeRenderer_1.renderTreeview)(deletedTree)}
-        </div>
-      `
-        : '<p style="color: #586069; text-align: center; padding: 40px;">No deleted files</p>'}
-    </section>
+        : '<p style="color: #586069; text-align: center; padding: 40px;">No added files</p>';
+    const deletedContent = diffResult.deletedFiles.length > 0
+        ? `<div class="file-list">${(0, treeRenderer_1.renderTreeview)(deletedTree)}</div>`
+        : '<p style="color: #586069; text-align: center; padding: 40px;">No deleted files</p>';
+    const formattedContent = formattedFiles.length > 0
+        ? `<div class="file-list">${(0, treeRenderer_1.renderTreeview)(formattedTree)}</div>`
+        : '<p style="color: #586069; text-align: center; padding: 40px;">No files with only formatting changes</p>';
+    const unchangedContent = trulyUnchangedFiles.length > 0
+        ? `<div class="file-list">${(0, treeRenderer_1.renderTreeview)(unchangedTree)}</div>`
+        : '<p style="color: #586069; text-align: center; padding: 40px;">No unchanged files</p>';
+    return `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>helm-env-delta Report - ${metadata.timestamp}</title>
+  <style>${htmlStyles_1.DIFF2HTML_STYLES}</style>
+  <style>
+${htmlStyles_1.HTML_STYLES}
+  </style>
+</head>
+<body>
+  <header>
+    <h1>helm-env-delta Diff Report</h1>
+    <div class="metadata">
+      <span>📅 Generated: ${metadata.timestamp}</span>
+      <span>📂 Source: ${metadata.source}</span>
+      <span>🎯 Destination: ${metadata.destination}</span>
+      ${metadata.dryRun ? '<span class="dry-run-badge">DRY RUN - No Files Modified</span>' : ''}
+    </div>
+    <div class="summary">
+      ${summaryBadges}
+    </div>
+    ${diffStats ? renderStatsDashboard(diffStats) : ''}
+    ${stopRuleViolations && stopRuleViolations.length > 0 ? renderStopRulesSection(stopRuleViolations) : ''}
+  </header>
 
-    <section id="formatted" class="tab-content">
-      ${formattedFiles.length > 0
-        ? `
-        <div class="file-list">
-          ${(0, treeRenderer_1.renderTreeview)(formattedTree)}
-        </div>
-      `
-        : '<p style="color: #586069; text-align: center; padding: 40px;">No files with only formatting changes</p>'}
-    </section>
+  <nav class="tabs">
+    ${tabButtons}
+  </nav>
 
-    <section id="unchanged" class="tab-content">
-      ${trulyUnchangedFiles.length > 0
-        ? `
-        <div class="file-list">
-          ${(0, treeRenderer_1.renderTreeview)(unchangedTree)}
-        </div>
-      `
-        : '<p style="color: #586069; text-align: center; padding: 40px;">No unchanged files</p>'}
-    </section>
+  <main>
+    ${renderSection('changed', changedContent)}
+    ${renderSection('added', addedContent)}
+    ${renderSection('deleted', deletedContent)}
+    ${renderSection('formatted', formattedContent)}
+    ${renderSection('unchanged', unchangedContent)}
   </main>
 
   <button class="scroll-to-top" title="Scroll to top">&#9650;</button>

package/dist/reporters/treeRenderer.d.ts

@@ -1,7 +1,4 @@
 import { TreeNode } from './treeBuilder';
 export declare const renderTreeview: (nodes: TreeNode[]) => string;
-export declare const renderSidebarTree: (nodes: TreeNode[], fileIds: Map<string, string>, fileStats?: Map<string, {
-    added: number;
-    removed: number;
-}>) => string;
+export declare const renderSidebarTree: (nodes: TreeNode[], fileIds: Map<string, string>) => string;
 export declare const escapeHtml: (text: string) => string;

package/dist/reporters/treeRenderer.js

@@ -22,17 +22,15 @@ const renderTreeNode = (node) => {
       <span class="tree-file-name">${(0, exports.escapeHtml)(node.name)}</span>
     </li>`;
 };
-const renderSidebarTree = (nodes, fileIds, fileStats) => {
+const renderSidebarTree = (nodes, fileIds) => {
     if (nodes.length === 0)
         return '';
-    return `<ul class="tree-root sidebar-tree">${nodes.map((node) => renderSidebarNode(node, fileIds, fileStats)).join('')}</ul>`;
+    return `<ul class="tree-root sidebar-tree">${nodes.map((node) => renderSidebarNode(node, fileIds)).join('')}</ul>`;
 };
 exports.renderSidebarTree = renderSidebarTree;
-const renderSidebarNode = (node, fileIds, fileStats) => {
+const renderSidebarNode = (node, fileIds) => {
     if (node.isFolder) {
-        const children = node.children
-            ? node.children.map((child) => renderSidebarNode(child, fileIds, fileStats)).join('')
-            : '';
+        const children = node.children ? node.children.map((child) => renderSidebarNode(child, fileIds)).join('') : '';
         return `
       <li class="tree-folder" data-path="${(0, exports.escapeHtml)(node.path)}">
         <span class="tree-toggle">&#9660;</span>
@@ -41,13 +39,9 @@ const renderSidebarNode = (node, fileIds, fileStats) => {
       </li>`;
     }
     const fileId = fileIds.get(node.path) || '';
-    const stats = fileStats?.get(node.path);
-    const badges = stats
-        ? ` <span class="line-badge line-added">+${stats.added}</span><span class="line-badge line-removed">-${stats.removed}</span>`
-        : '';
     return `
     <li class="tree-file" data-path="${(0, exports.escapeHtml)(node.path)}" data-file-id="${(0, exports.escapeHtml)(fileId)}">
-      <a href="#${(0, exports.escapeHtml)(fileId)}" class="tree-file-link">${(0, exports.escapeHtml)(node.name)}</a>${badges}
+      <a href="#${(0, exports.escapeHtml)(fileId)}" class="tree-file-link">${(0, exports.escapeHtml)(node.name)}</a>
     </li>`;
 };
 const escapeHtml = (text) => text

package/dist/yamlFormatter.js

@@ -20,12 +20,16 @@ exports.YamlFormatterError = (0, errors_1.createErrorClass)('YAML Formatter Erro
 exports.isYamlFormatterError = (0, errors_1.createErrorTypeGuard)(exports.YamlFormatterError);
 const getFormattingRules = (filePath, outputFormat) => {
     const keyOrders = [];
+    const keySort = [];
     const arraySort = [];
     const quoteValues = [];
     const allPatterns = new Set();
     if (outputFormat?.keyOrders)
         for (const pattern of Object.keys(outputFormat.keyOrders))
             allPatterns.add(pattern);
+    if (outputFormat?.keySort)
+        for (const pattern of Object.keys(outputFormat.keySort))
+            allPatterns.add(pattern);
     if (outputFormat?.arraySort)
         for (const pattern of Object.keys(outputFormat.arraySort))
             allPatterns.add(pattern);
@@ -38,6 +42,9 @@ const getFormattingRules = (filePath, outputFormat) => {
         const keyOrder = outputFormat?.keyOrders?.[pattern];
         if (keyOrder)
             keyOrders.push(keyOrder);
+        const keySortRule = outputFormat?.keySort?.[pattern];
+        if (keySortRule)
+            keySort.push(keySortRule);
         const arrayRule = outputFormat?.arraySort?.[pattern];
         if (arrayRule)
             arraySort.push(arrayRule);
@@ -45,7 +52,7 @@ const getFormattingRules = (filePath, outputFormat) => {
         if (quoteValue)
             quoteValues.push(quoteValue);
     }
-    return { keyOrders, arraySort, quoteValues };
+    return { keyOrders, keySort, arraySort, quoteValues };
 };
 const preserveMultilineStrings = (yamlDocument) => {
     if (!yamlDocument.contents)
@@ -81,6 +88,8 @@ const formatYaml = (content, filePath, outputFormat) => {
         const rules = getFormattingRules(filePath, outputFormat);
         if (rules.keyOrders.length > 0)
             applyKeyOrdering(yamlDocument, rules.keyOrders);
+        if (rules.keySort.length > 0)
+            applyKeySort(yamlDocument, rules.keySort);
         if (rules.arraySort.length > 0)
             applyArraySorting(yamlDocument, rules.arraySort);
         if (rules.quoteValues.length > 0)
@@ -171,6 +180,43 @@ const applyOrderingToMap = (map, currentPath, orderHierarchy) => {
         }
     }
 };
+const applyKeySort = (yamlDocument, sortRules) => {
+    if (sortRules.length === 0)
+        return;
+    const allRules = sortRules.flat();
+    for (const rule of allRules) {
+        const pathParts = (0, jsonPath_1.parseJsonPath)(rule.path);
+        if (pathParts.length === 0)
+            continue;
+        if (yamlDocument.contents)
+            traverseAndSortKeys(yamlDocument.contents, [], pathParts);
+    }
+};
+const traverseAndSortKeys = (node, currentPath, targetPath) => {
+    if (!node || typeof node !== 'object')
+        return;
+    if (matchPath(currentPath, targetPath)) {
+        if ((0, yamlTypeGuards_1.isYamlMap)(node))
+            sortMapKeysAlphabetically(node);
+        return;
+    }
+    if ((0, yamlTypeGuards_1.isYamlMap)(node))
+        for (const item of node.items) {
+            const keyValue = (0, yamlTypeGuards_1.extractKeyValue)(item);
+            if (keyValue && item.value) {
+                const childPath = [...currentPath, keyValue];
+                if (isPotentialMatch(childPath, targetPath))
+                    traverseAndSortKeys(item.value, childPath, targetPath);
+            }
+        }
+};
+const sortMapKeysAlphabetically = (map) => {
+    map.items.sort((a, b) => {
+        const aKey = a.key && typeof a.key === 'object' && 'value' in a.key ? String(a.key.value) : '';
+        const bKey = b.key && typeof b.key === 'object' && 'value' in b.key ? String(b.key.value) : '';
+        return aKey.localeCompare(bKey);
+    });
+};
 const applyValueQuoting = (yamlDocument, quoteLists) => {
     if (quoteLists.length === 0)
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "helm-env-delta",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "HelmEnvDelta – environment-aware YAML delta and sync for GitOps",
   "author": "BCsabaEngine",
   "license": "ISC",
@@ -68,15 +68,15 @@
   },
   "devDependencies": {
     "@types/hogan.js": "^3.0.5",
-    "@types/node": "^25.2.1",
+    "@types/node": "^25.2.3",
     "@types/picomatch": "^4.0.2",
-    "@typescript-eslint/eslint-plugin": "^8.54.0",
-    "@typescript-eslint/parser": "^8.54.0",
+    "@typescript-eslint/eslint-plugin": "^8.55.0",
+    "@typescript-eslint/parser": "^8.55.0",
     "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-unicorn": "^62.0.0",
+    "eslint-plugin-unicorn": "^63.0.0",
     "prettier": "^3.8.1",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",