@spartan-ng/cli 1.7.0 → 1.8.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "1.7.0",
+  "version": "1.8.0-beta.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/spartan-ng/spartan.git"

package/src/generators/healthcheck/healthchecks/brn-collapsible.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.brainCollapsibleHealthcheck = void 0;
 const devkit_1 = require("@nx/devkit");
 const generator_1 = require("../../migrate-collapsible/generator");
+const helm_collapsible_files_1 = require("../../migrate-collapsible/helm-collapsible-files");
 const healthchecks_1 = require("../healthchecks");
 exports.brainCollapsibleHealthcheck = {
     name: 'Brain Collapsible',
@@ -12,10 +13,8 @@ exports.brainCollapsibleHealthcheck = {
             if (!file.endsWith('.ts') && !file.endsWith('.html')) {
                 return;
             }
-            // skip HlmCollapsible itself
-            if (file.endsWith('hlm-collapsible.ts') ||
-                file.endsWith('hlm-collapsible-trigger.ts') ||
-                file.endsWith('hlm-collapsible-content.ts')) {
+            // skip the Helm Collapsible and Trace implementations
+            if (helm_collapsible_files_1.HELM_COLLAPSIBLE_FILES.some((name) => file.endsWith(name))) {
                 return;
             }
             const contents = tree.read(file, 'utf-8');

package/src/generators/healthcheck/healthchecks/brn-collapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"brn-collapsible.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/healthcheck/healthchecks/brn-collapsible.ts"],"names":[],"mappings":";;;AAAA,uCAAkD;AAClD,mEAAkF;AAClF,kDAAwE;AAE3D,QAAA,2BAA2B,GAAgB;IACvD,IAAI,EAAE,mBAAmB;IACzB,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO;QACzB,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACxC,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBACtD,OAAO;YACR,CAAC;YAED,6BAA6B;YAC7B,IACC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC;gBACnC,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC;gBAC3C,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC,EAC1C,CAAC;gBACF,OAAO;YACR,CAAC;YAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAE1C,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACf,OAAO;YACR,CAAC;YAED,IAAI,QAAQ,CAAC,QAAQ,CAAC,iCAAiC,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;gBAClG,OAAO,CACN,0FAA0F,EAC1F,kCAAmB,CAAC,KAAK,EACzB,IAAI,CACJ,CAAC;YACH,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QACnB,MAAM,IAAA,uCAA2B,EAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;IACb,CAAC;IACD,MAAM,EAAE,+DAA+D;CACvE,CAAC"}
+{"version":3,"file":"brn-collapsible.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/healthcheck/healthchecks/brn-collapsible.ts"],"names":[],"mappings":";;;AAAA,uCAAkD;AAClD,mEAAkF;AAClF,6FAA0F;AAC1F,kDAAwE;AAE3D,QAAA,2BAA2B,GAAgB;IACvD,IAAI,EAAE,mBAAmB;IACzB,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO;QACzB,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACxC,2DAA2D;YAC3D,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBACtD,OAAO;YACR,CAAC;YAED,sDAAsD;YACtD,IAAI,+CAAsB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;gBAChE,OAAO;YACR,CAAC;YAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAE1C,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACf,OAAO;YACR,CAAC;YAED,IAAI,QAAQ,CAAC,QAAQ,CAAC,iCAAiC,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC;gBAClG,OAAO,CACN,0FAA0F,EAC1F,kCAAmB,CAAC,KAAK,EACzB,IAAI,CACJ,CAAC;YACH,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QACnB,MAAM,IAAA,uCAA2B,EAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAC;IACb,CAAC;IACD,MAAM,EAAE,+DAA+D;CACvE,CAAC"}

package/src/generators/migrate-collapsible/generator.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.migrateCollapsibleGenerator = migrateCollapsibleGenerator;
 const devkit_1 = require("@nx/devkit");
 const visit_files_1 = require("../../utils/visit-files");
+const helm_collapsible_files_1 = require("./helm-collapsible-files");
 async function migrateCollapsibleGenerator(tree, { skipFormat }) {
     updateImports(tree);
     replaceSelector(tree);
@@ -15,10 +16,8 @@ async function migrateCollapsibleGenerator(tree, { skipFormat }) {
  */
 function updateImports(tree) {
     (0, visit_files_1.visitFiles)(tree, '/', (path) => {
-        // skip HlmCollapsible itself
-        if (path.endsWith('hlm-collapsible.ts') ||
-            path.endsWith('hlm-collapsible-trigger.ts') ||
-            path.endsWith('hlm-collapsible-content.ts')) {
+        // skip the Helm Collapsible and Trace implementations
+        if (helm_collapsible_files_1.HELM_COLLAPSIBLE_FILES.some((name) => path.endsWith(name))) {
             return;
         }
         const content = tree.read(path, 'utf-8');

package/src/generators/migrate-collapsible/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-collapsible/generator.ts"],"names":[],"mappings":";;AAIA,kEAOC;AAXD,uCAAoD;AACpD,yDAAqD;AAG9C,KAAK,UAAU,2BAA2B,CAAC,IAAU,EAAE,EAAE,UAAU,EAAqC;IAC9G,aAAa,CAAC,IAAI,CAAC,CAAC;IACpB,eAAe,CAAC,IAAI,CAAC,CAAC;IAEtB,IAAI,CAAC,UAAU,EAAE,CAAC;QACjB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED;;GAEG;AACH,SAAS,aAAa,CAAC,IAAU;IAChC,IAAA,wBAAU,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAC9B,6BAA6B;QAC7B,IACC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC;YACnC,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC;YAC3C,IAAI,CAAC,QAAQ,CAAC,4BAA4B,CAAC,EAC1C,CAAC;YACF,OAAO;QACR,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEzC,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QAED,IAAI,OAAO,CAAC,QAAQ,CAAC,kCAAkC,CAAC,EAAE,CAAC;YAC1D,MAAM,cAAc,GAAG,OAAO;gBAC7B,2FAA2F;iBAC1F,OAAO,CACP,uEAAuE,EACvE,uEAAuE,CACvE;gBACD,qEAAqE;iBACpE,OAAO,CAAC,uBAAuB,EAAE,uBAAuB,CAAC;gBAC1D,8DAA8D;iBAC7D,OAAO,CAAC,gBAAgB,EAAE,uBAAuB,CAAC;gBACnD,oEAAoE;iBACnE,OAAO,CAAC,4BAA4B,EAAE,EAAE,CAAC;gBAC1C,oEAAoE;iBACnE,OAAO,CAAC,4BAA4B,EAAE,EAAE,CAAC;gBAC1C,qDAAqD;iBACpD,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;YAEzB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;QAClC,CAAC;IACF,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,IAAU;IAClC,0FAA0F;IAC1F,IAAA,wBAAU,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;QAC9B,8EAA8E;QAC9E,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YACtD,OAAO;QACR,CAAC;QAED,IAAI,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,OAAO;QACR,CAAC;QAED,IAAI,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAAC;YACtF,OAAO,GAAG,qBAAqB,CAAC,OAAO,CAAC,CAAC;YAEzC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC3B,CAAC;IACF,CAAC,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAK;IACnC,iDAAiD;IACjD,OAAO,KAAK;SACV,KAAK,CAAC,OAAO,CAAC;SACd,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;QACZ,gEAAgE;QAChE,8BAA8B;QAC9B,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAE/B,OAAO,CACN,GAAG;YACF,mEAAmE;aAClE,OAAO,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;aAC/C,OAAO,CAAC,wBAAwB,EAAE,wBAAwB,CAAC;YAC5D,mEAAmE;aAClE,OAAO,CAAC,qBAAqB,EAAE,mBAAmB,CAAC,CACrD,CAAC;IACH,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACZ,CAAC;AAED,kBAAe,2BAA2B,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-collapsible/generator.ts"],"names":[],"mappings":"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"}

package/src/generators/migrate-collapsible/helm-collapsible-files.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Helm components that intentionally wrap the brain collapsible directives as host directives (to
+ * expose their inputs). They are not consumers of the deprecated `<brn-collapsible>` component, so
+ * both the healthcheck and the migration must skip them.
+ */
+export declare const HELM_COLLAPSIBLE_FILES: string[];

package/src/generators/migrate-collapsible/helm-collapsible-files.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HELM_COLLAPSIBLE_FILES = void 0;
+/**
+ * Helm components that intentionally wrap the brain collapsible directives as host directives (to
+ * expose their inputs). They are not consumers of the deprecated `<brn-collapsible>` component, so
+ * both the healthcheck and the migration must skip them.
+ */
+exports.HELM_COLLAPSIBLE_FILES = [
+    'hlm-collapsible.ts',
+    'hlm-collapsible-trigger.ts',
+    'hlm-collapsible-content.ts',
+    'hlm-trace-collapsible.ts',
+    'hlm-trace-collapsible-trigger.ts',
+    'hlm-trace-collapsible-content.ts',
+];
+//# sourceMappingURL=helm-collapsible-files.js.map

package/src/generators/migrate-collapsible/helm-collapsible-files.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helm-collapsible-files.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-collapsible/helm-collapsible-files.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACU,QAAA,sBAAsB,GAAG;IACrC,oBAAoB;IACpB,4BAA4B;IAC5B,4BAA4B;IAC5B,0BAA0B;IAC1B,kCAAkC;IAClC,kCAAkC;CAClC,CAAC"}

package/src/generators/ui/libs/code-block/files/index.ts.template

@@ -0,0 +1,28 @@
+import { HlmCodeBlock } from './lib/hlm-code-block';
+import { HlmCodeBlockActions } from './lib/hlm-code-block-actions';
+import { HlmCodeBlockContent } from './lib/hlm-code-block-content';
+import { HlmCodeBlockCopyButton } from './lib/hlm-code-block-copy-button';
+import { HlmCodeBlockFooter } from './lib/hlm-code-block-footer';
+import { HlmCodeBlockHeader } from './lib/hlm-code-block-header';
+import { HlmCodeBlockLine } from './lib/hlm-code-block-line';
+import { HlmCodeBlockTitle } from './lib/hlm-code-block-title';
+
+export * from './lib/hlm-code-block';
+export * from './lib/hlm-code-block-actions';
+export * from './lib/hlm-code-block-content';
+export * from './lib/hlm-code-block-copy-button';
+export * from './lib/hlm-code-block-footer';
+export * from './lib/hlm-code-block-header';
+export * from './lib/hlm-code-block-line';
+export * from './lib/hlm-code-block-title';
+
+export const HlmCodeBlockImports = [
+	HlmCodeBlock,
+	HlmCodeBlockActions,
+	HlmCodeBlockContent,
+	HlmCodeBlockCopyButton,
+	HlmCodeBlockFooter,
+	HlmCodeBlockHeader,
+	HlmCodeBlockLine,
+	HlmCodeBlockTitle,
+] as const;

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-actions.ts.template

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmCodeBlockActions],hlm-code-block-actions',
+	exportAs: 'hlmCodeBlockActions',
+	host: { 'data-slot': 'code-block-actions' },
+})
+export class HlmCodeBlockActions {
+	constructor() {
+		classes(
+			() =>
+				'spartan-code-block-actions ms-auto flex shrink-0 items-center [[data-slot=code-block]>&]:absolute [[data-slot=code-block]>&]:z-10 [[data-slot=code-block]>&]:opacity-0 [[data-slot=code-block]>&]:transition-opacity [[data-slot=code-block]>&]:group-focus-within/code-block:opacity-100 [[data-slot=code-block]>&]:group-hover/code-block:opacity-100 [[data-slot=code-block]>&]:pointer-coarse:opacity-100',
+		);
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-content.ts.template

@@ -0,0 +1,85 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import {
+	booleanAttribute,
+	ChangeDetectionStrategy,
+	Component,
+	computed,
+	inject,
+	input,
+	numberAttribute,
+} from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { HlmCodeBlockLine } from './hlm-code-block-line';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'pre[hlmCodeBlockContent]',
+	exportAs: 'hlmCodeBlockContent',
+	imports: [HlmCodeBlockLine],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'data-slot': 'code-block-content',
+		'[attr.data-wrap]': 'wrap() || null',
+		'[attr.data-numbered]': 'lineNumbers() || null',
+		'[attr.dir]': '_direction()',
+		'[style.counter-reset]': '_style()',
+		tabindex: '0',
+	},
+	template: `
+		<code
+			data-slot="code-block-code"
+			class="spartan-code-block-code grid min-h-lh min-w-max content-start in-data-numbered:grid-cols-[auto_1fr] in-data-wrap:min-w-0"
+		>
+			@if (_lines(); as lines) {
+				@for (line of lines; track $index) {
+					<span hlmCodeBlockLine>{{ line }}</span>
+				}
+			} @else if (_hasCode()) {
+				<span [textContent]="_code()"></span>
+			} @else {
+				<ng-content />
+			}
+		</code>
+	`,
+})
+export class HlmCodeBlockContent {
+	private readonly _dir = inject(Directionality);
+
+	protected readonly _direction = this._dir.valueSignal;
+
+	public readonly wrap = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+	public readonly lineNumbers = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
+
+	public readonly startLine = input<number, NumberInput>(1, { transform: numberAttribute });
+
+	/** When set, the code is rendered line by line instead of projecting `<ng-content />`. */
+	public readonly code = input<string>();
+
+	protected readonly _code = computed(() => {
+		const code = this.code();
+		return typeof code === 'string' ? code : null;
+	});
+
+	protected readonly _hasCode = computed(() => this._code() !== null);
+
+	protected readonly _lines = computed(() => {
+		const code = this._code();
+		if (!this.lineNumbers() || code === null) return null;
+
+		// An empty line renders a newline so copying a selection keeps blank lines.
+		return code
+			.replace(/\n$/, '')
+			.split('\n')
+			.map((line) => (line === '' ? '\n' : line));
+	});
+
+	protected readonly _style = computed(() => `line ${this.startLine() - 1}`);
+
+	constructor() {
+		classes(
+			() =>
+				'spartan-code-block-content scroll-fade-x data-wrap:scroll-fade-y min-h-0 min-w-0 scrollbar-thin overflow-auto text-start font-mono outline-none data-wrap:wrap-break-word data-wrap:whitespace-pre-wrap',
+		);
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-copy-button.ts.template

@@ -0,0 +1,62 @@
+import { ChangeDetectionStrategy, Component, computed, effect, input, signal } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCheck, lucideCopy } from '@ng-icons/lucide';
+import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
+import { classes } from '<%- importAlias %>/utils';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'button[hlmCodeBlockCopyButton]',
+	exportAs: 'hlmCodeBlockCopyButton',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideCopy, lucideCheck }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon-xs' })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
+	host: {
+		type: 'button',
+		'data-slot': 'code-block-copy-button',
+		'[attr.data-copied]': '_copied() || null',
+		'[attr.aria-label]': '_ariaLabel()',
+		'(click)': '_copy()',
+	},
+	template: `
+		<ng-icon [name]="_icon()" />
+
+		@if (_copied()) {
+			<span aria-live="polite" class="sr-only">
+				{{ copiedText() }}
+			</span>
+		}
+	`,
+})
+export class HlmCodeBlockCopyButton {
+	protected readonly _copied = signal(false);
+
+	protected readonly _icon = computed(() => (this._copied() ? 'lucideCheck' : 'lucideCopy'));
+
+	public readonly value = input<string>('');
+	public readonly copyText = input<string>('Copy');
+	public readonly copiedText = input<string>('Copied');
+
+	protected readonly _ariaLabel = computed(() => (this._copied() ? this.copiedText() : this.copyText()));
+
+	constructor() {
+		classes(() => 'spartan-code-block-copy-button');
+
+		effect((onCleanup) => {
+			if (!this._copied()) return;
+
+			const timeout = setTimeout(() => this._copied.set(false), 2000);
+			onCleanup(() => clearTimeout(timeout));
+		});
+	}
+
+	protected async _copy(): Promise<void> {
+		try {
+			await navigator.clipboard.writeText(this.value());
+			this._copied.set(true);
+		} catch {
+			// ignore clipboard errors
+		}
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-footer.ts.template

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmCodeBlockFooter],hlm-code-block-footer',
+	exportAs: 'hlmCodeBlockFooter',
+	host: { 'data-slot': 'code-block-footer' },
+})
+export class HlmCodeBlockFooter {
+	constructor() {
+		classes(() => 'spartan-code-block-footer flex min-w-0 shrink-0 items-center');
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-header.ts.template

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmCodeBlockHeader],hlm-code-block-header',
+	exportAs: 'hlmCodeBlockHeader',
+	host: { 'data-slot': 'code-block-header' },
+})
+export class HlmCodeBlockHeader {
+	constructor() {
+		classes(
+			() =>
+				'spartan-code-block-header flex min-w-0 shrink-0 items-center *:has-[>[data-slot=code-block-title]]:min-w-0',
+		);
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-line.ts.template

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, VariantProps } from 'class-variance-authority';
+
+const codeBlockLineVariants = cva(
+	"spartan-code-block-line relative block min-h-lh after:absolute after:top-0 after:select-none in-data-numbered:col-span-2 in-data-numbered:grid in-data-numbered:grid-cols-subgrid in-data-numbered:[counter-increment:line] in-data-numbered:before:content-[counter(line)] in-data-numbered:before:select-none in-data-numbered:supports-[content:counter(line)_/_'']:before:content-[counter(line)_/_'']",
+	{
+		variants: {
+			variant: {
+				default: 'spartan-code-block-line-variant-default',
+				added: 'spartan-code-block-line-variant-added',
+				removed: 'spartan-code-block-line-variant-removed',
+				highlighted: 'spartan-code-block-line-variant-highlighted',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+type CodeBlockLineVariants = VariantProps<typeof codeBlockLineVariants>;
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'span[hlmCodeBlockLine]',
+	exportAs: 'hlmCodeBlockLine',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { 'data-slot': 'code-block-line', '[attr.data-variant]': 'variant()' },
+	template: `
+		<span data-slot="code-block-line-content" class="min-w-0">
+			<ng-content />
+		</span>
+	`,
+})
+export class HlmCodeBlockLine {
+	public readonly variant = input<CodeBlockLineVariants['variant']>('default');
+
+	constructor() {
+		classes(() => codeBlockLineVariants({ variant: this.variant() }));
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block-title.ts.template

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmCodeBlockTitle],hlm-code-block-title',
+	exportAs: 'hlmCodeBlockTitle',
+	host: { 'data-slot': 'code-block-title' },
+})
+export class HlmCodeBlockTitle {
+	constructor() {
+		classes(
+			() =>
+				'spartan-code-block-title min-w-0 truncate [&_ng-icon]:pointer-events-none [&_ng-icon]:inline-block [&_ng-icon]:align-middle',
+		);
+	}
+}

package/src/generators/ui/libs/code-block/files/lib/hlm-code-block.ts.template

@@ -0,0 +1,34 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+const codeBlockVariants = cva(
+	'spartan-code-block group/code-block relative flex w-full min-w-0 flex-col overflow-hidden',
+	{
+		variants: {
+			variant: {
+				default: 'spartan-code-block-variant-default',
+				destructive: 'spartan-code-block-variant-destructive',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+);
+
+type CodeBlockVariants = VariantProps<typeof codeBlockVariants>;
+
+@Directive({
+	selector: '[hlmCodeBlock],hlm-code-block',
+	exportAs: 'hlmCodeBlock',
+	host: { 'data-slot': 'code-block', '[attr.data-variant]': 'variant()', '[attr.data-size]': 'size()' },
+})
+export class HlmCodeBlock {
+	public readonly variant = input<CodeBlockVariants['variant']>('default');
+	public readonly size = input<'default' | 'sm'>('default');
+
+	constructor() {
+		classes(() => codeBlockVariants({ variant: this.variant() }));
+	}
+}

package/src/generators/ui/libs/code-block/generator.d.ts

@@ -0,0 +1,3 @@
+import type { Tree } from '@nx/devkit';
+import type { HlmBaseGeneratorSchema } from '../../../base/schema';
+export declare function generator(tree: Tree, options: HlmBaseGeneratorSchema): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/ui/libs/code-block/generator.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generator = generator;
+const tslib_1 = require("tslib");
+const generator_1 = tslib_1.__importDefault(require("../../../base/generator"));
+async function generator(tree, options) {
+    return await (0, generator_1.default)(tree, { ...options, name: 'code-block' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/code-block/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/code-block/generator.ts"],"names":[],"mappings":";;AAIA,8BAEC;;AALD,gFAAuD;AAGhD,KAAK,UAAU,SAAS,CAAC,IAAU,EAAE,OAA+B;IAC1E,OAAO,MAAM,IAAA,mBAAgB,EAAC,IAAI,EAAE,EAAE,GAAG,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAC;AACzE,CAAC"}

package/src/generators/ui/libs/trace/files/index.ts.template

@@ -0,0 +1,28 @@
+import { HlmTrace } from './lib/hlm-trace';
+import { HlmTraceCollapsible } from './lib/hlm-trace-collapsible';
+import { HlmTraceCollapsibleContent } from './lib/hlm-trace-collapsible-content';
+import { HlmTraceCollapsibleTrigger } from './lib/hlm-trace-collapsible-trigger';
+import { HlmTraceDescription } from './lib/hlm-trace-description';
+import { HlmTraceIcon } from './lib/hlm-trace-icon';
+import { HlmTraceLine } from './lib/hlm-trace-line';
+import { HlmTraceTitle } from './lib/hlm-trace-title';
+
+export * from './lib/hlm-trace';
+export * from './lib/hlm-trace-collapsible';
+export * from './lib/hlm-trace-collapsible-content';
+export * from './lib/hlm-trace-collapsible-trigger';
+export * from './lib/hlm-trace-description';
+export * from './lib/hlm-trace-icon';
+export * from './lib/hlm-trace-line';
+export * from './lib/hlm-trace-title';
+
+export const HlmTraceImports = [
+	HlmTrace,
+	HlmTraceCollapsible,
+	HlmTraceCollapsibleContent,
+	HlmTraceCollapsibleTrigger,
+	HlmTraceDescription,
+	HlmTraceIcon,
+	HlmTraceLine,
+	HlmTraceTitle,
+] as const;

package/src/generators/ui/libs/trace/files/lib/hlm-trace-collapsible-content.ts.template

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { BrnCollapsibleContent } from '@spartan-ng/brain/collapsible';
+import { classes, hlm } from '<%- importAlias %>/utils';
+import { ClassValue } from 'clsx';
+
+@Component({
+	selector: 'hlm-trace-collapsible-content',
+	exportAs: 'hlmTraceCollapsibleContent',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnCollapsibleContent, inputs: ['id'] }],
+	host: { 'data-slot': 'trace-collapsible-content' },
+	template: `
+		<div [class]="_computedContentInnerClasses()" data-slot="trace-collapsible-content-inner">
+			<ng-content />
+		</div>
+	`,
+})
+export class HlmTraceCollapsibleContent {
+	public readonly contentInnerClasses = input<ClassValue>();
+
+	protected readonly _computedContentInnerClasses = computed(() =>
+		hlm(
+			'spartan-trace-collapsible-content-inner text-muted-foreground min-w-0 wrap-break-word',
+			this.contentInnerClasses(),
+		),
+	);
+
+	constructor() {
+		classes(
+			() =>
+				'spartan-trace-collapsible-content block min-w-0 overflow-hidden transition-[height] data-[state=closed]:h-0 data-[state=open]:h-(--brn-collapsible-content-height) motion-reduce:transition-none',
+		);
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-collapsible-trigger.ts.template

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronRight } from '@ng-icons/lucide';
+import { BrnCollapsibleTrigger } from '@spartan-ng/brain/collapsible';
+import { classes } from '<%- importAlias %>/utils';
+
+@Component({
+	// eslint-disable-next-line @angular-eslint/component-selector
+	selector: 'button[hlmTraceCollapsibleTrigger]',
+	exportAs: 'hlmTraceCollapsibleTrigger',
+	imports: [NgIcon],
+	providers: [provideIcons({ lucideChevronRight })],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	hostDirectives: [{ directive: BrnCollapsibleTrigger, inputs: ['type'] }],
+	host: { 'data-slot': 'trace-collapsible-trigger' },
+	template: `
+		<ng-content />
+		<ng-icon
+			name="lucideChevronRight"
+			class="transition-transform group-aria-expanded/trace-collapsible-trigger:rotate-90 motion-reduce:transition-none"
+		/>
+	`,
+})
+export class HlmTraceCollapsibleTrigger {
+	constructor() {
+		classes(
+			() =>
+				'spartan-trace-collapsible-trigger group/trace-collapsible-trigger text-muted-foreground hover:text-foreground has-[[data-status=error]]:text-destructive flex w-fit max-w-full min-w-0 cursor-pointer items-center text-left transition-colors outline-none',
+		);
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-collapsible.ts.template

@@ -0,0 +1,21 @@
+import { Directive } from '@angular/core';
+import { BrnCollapsible } from '@spartan-ng/brain/collapsible';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceCollapsible],hlm-trace-collapsible',
+	exportAs: 'hlmTraceCollapsible',
+	hostDirectives: [
+		{
+			directive: BrnCollapsible,
+			inputs: ['expanded', 'disabled'],
+			outputs: ['expandedChange'],
+		},
+	],
+	host: { 'data-slot': 'trace-collapsible' },
+})
+export class HlmTraceCollapsible {
+	constructor() {
+		classes(() => 'spartan-trace-collapsible flex w-full min-w-0 flex-col');
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-description.ts.template

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceDescription],hlm-trace-description',
+	exportAs: 'hlmTraceDescription',
+	host: { 'data-slot': 'trace-description' },
+})
+export class HlmTraceDescription {
+	constructor() {
+		classes(() => 'spartan-trace-description text-muted-foreground/70 shrink-0 tabular-nums');
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-icon.ts.template

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceIcon],hlm-trace-icon',
+	exportAs: 'hlmTraceIcon',
+	host: { 'data-slot': 'trace-icon', '[attr.aria-hidden]': 'true' },
+})
+export class HlmTraceIcon {
+	constructor() {
+		classes(() => 'spartan-trace-icon flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none');
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-line.ts.template

@@ -0,0 +1,18 @@
+import { Directive, input } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceLine],hlm-trace-line',
+	exportAs: 'hlmTraceLine',
+	host: { 'data-slot': 'trace-line', '[attr.data-status]': 'status()' },
+})
+export class HlmTraceLine {
+	public readonly status = input<'running' | 'error' | 'pending'>();
+
+	constructor() {
+		classes(
+			() =>
+				'spartan-trace-line text-muted-foreground [a:hover,button:hover]:text-foreground data-[status=error]:text-destructive data-[status=error]:in-[a:hover,button:hover]:text-destructive data-[status=running]:*:data-[slot=trace-title]:shimmer flex w-fit max-w-full min-w-0 items-center transition-colors data-[status=pending]:opacity-60 [a,button]:cursor-pointer',
+		);
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace-title.ts.template

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTraceTitle],hlm-trace-title',
+	exportAs: 'hlmTraceTitle',
+	host: { 'data-slot': 'trace-title' },
+})
+export class HlmTraceTitle {
+	constructor() {
+		classes(() => 'spartan-trace-title motion-reduce:shimmer-none min-w-0 truncate');
+	}
+}

package/src/generators/ui/libs/trace/files/lib/hlm-trace.ts.template

@@ -0,0 +1,16 @@
+import { Directive } from '@angular/core';
+import { classes } from '<%- importAlias %>/utils';
+
+@Directive({
+	selector: '[hlmTrace],hlm-trace',
+	exportAs: 'hlmTrace',
+	host: { 'data-slot': 'trace' },
+})
+export class HlmTrace {
+	constructor() {
+		classes(
+			() =>
+				'spartan-trace flex w-full min-w-0 flex-col *:has-[>[data-slot=trace-line]]:flex *:has-[>[data-slot=trace-line]]:w-fit *:has-[>[data-slot=trace-line]]:max-w-full *:has-[>[data-slot=trace-line]]:min-w-0 *:has-[>[data-slot=trace-line]]:text-left *:has-[>[data-slot=trace-line]]:outline-none',
+		);
+	}
+}