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

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

@@ -7,6 +7,7 @@ import type { ButtonVariants } from '<%- importAlias %>/button';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmPaginationLink } from './hlm-pagination-link';
+import { injectHlmPaginationConfig } from './hlm-pagination.token';
 
 @Component({
 	selector: 'hlm-pagination-next',
@@ -29,6 +30,8 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 	`,
 })
 export class HlmPaginationNext {
+	private readonly _config = injectHlmPaginationConfig();
+
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** The link to navigate to the next page. */
 	public readonly link = input<RouterLink['routerLink']>();
@@ -38,9 +41,9 @@ export class HlmPaginationNext {
 	public readonly queryParamsHandling = input<RouterLink['queryParamsHandling']>();
 
 	/** The aria-label for the next page link. */
-	public readonly ariaLabel = input<string>('Go to next page', { alias: 'aria-label' });
+	public readonly ariaLabel = input<string>(this._config.nextAriaLabel, { alias: 'aria-label' });
 	/** The text to display for the next page link. */
-	public readonly text = input<string>('Next');
+	public readonly text = input<string>(this._config.nextLabel);
 	/** Whether the button should only display the icon. */
 	public readonly iconOnly = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,

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

@@ -7,6 +7,7 @@ import type { ButtonVariants } from '<%- importAlias %>/button';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
 import { HlmPaginationLink } from './hlm-pagination-link';
+import { injectHlmPaginationConfig } from './hlm-pagination.token';
 
 @Component({
 	selector: 'hlm-pagination-previous',
@@ -29,6 +30,8 @@ import { HlmPaginationLink } from './hlm-pagination-link';
 	`,
 })
 export class HlmPaginationPrevious {
+	private readonly _config = injectHlmPaginationConfig();
+
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	/** The link to navigate to the previous page. */
 	public readonly link = input<RouterLink['routerLink']>();
@@ -38,9 +41,9 @@ export class HlmPaginationPrevious {
 	public readonly queryParamsHandling = input<RouterLink['queryParamsHandling']>();
 
 	/** The aria-label for the previous page link. */
-	public readonly ariaLabel = input<string>('Go to previous page', { alias: 'aria-label' });
+	public readonly ariaLabel = input<string>(this._config.previousAriaLabel, { alias: 'aria-label' });
 	/** The text to display for the previous page link. */
-	public readonly text = input<string>('Previous');
+	public readonly text = input<string>(this._config.previousLabel);
 	/** Whether the button should only display the icon. */
 	public readonly iconOnly = input<boolean, BooleanInput>(false, {
 		transform: booleanAttribute,

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

@@ -0,0 +1,29 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export interface HlmPaginationConfig {
+	totalItemsLabel: string;
+	pagesLabel: string;
+	previousLabel: string;
+	previousAriaLabel: string;
+	nextLabel: string;
+	nextAriaLabel: string;
+}
+
+const defaultConfig: HlmPaginationConfig = {
+	totalItemsLabel: 'total items',
+	pagesLabel: 'pages',
+	nextLabel: 'Next',
+	nextAriaLabel: 'Go to next page',
+	previousLabel: 'Previous',
+	previousAriaLabel: 'Go to previous page',
+};
+
+const HlmPaginationConfigToken = new InjectionToken<HlmPaginationConfig>('HlmPaginationConfig');
+
+export function provideHlmPaginationConfig(config: Partial<HlmPaginationConfig>): ValueProvider {
+	return { provide: HlmPaginationConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmPaginationConfig(): HlmPaginationConfig {
+	return inject(HlmPaginationConfigToken, { optional: true }) ?? defaultConfig;
+}

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',
+		);
+	}
+}

package/src/generators/ui/libs/trace/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/trace/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: 'trace' });
+}
+//# sourceMappingURL=generator.js.map

package/src/generators/ui/libs/trace/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../../../libs/cli/src/generators/ui/libs/trace/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,OAAO,EAAE,CAAC,CAAC;AACpE,CAAC"}

package/src/generators/ui/primitive-deps.js

@@ -19,6 +19,7 @@ exports.primitiveDependencies = {
     carousel: ['utils', 'button'],
     chart: ['utils'],
     checkbox: ['utils'],
+    'code-block': ['utils', 'button'],
     collapsible: ['utils'],
     combobox: ['utils', 'input-group', 'button'],
     command: ['utils', 'button', 'input-group', 'dialog'],
@@ -64,6 +65,7 @@ exports.primitiveDependencies = {
     toggle: ['utils'],
     'toggle-group': ['utils', 'toggle'],
     tooltip: ['utils'],
+    trace: ['utils'],
     typography: ['utils'],
     utils: [],
 };

package/src/generators/ui/primitive-deps.js.map

@@ -1 +1 @@
-{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"primitive-deps.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/ui/primitive-deps.ts"],"names":[],"mappings":"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"}

package/src/generators/ui/primitives.d.ts

@@ -1 +1 @@
-export type Primitive = 'accordion' | 'alert' | 'alert-dialog' | 'aspect-ratio' | 'attachment' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'bubble' | 'button' | 'button-group' | 'calendar' | 'card' | 'carousel' | 'chart' | 'checkbox' | 'collapsible' | 'combobox' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'drawer' | 'dropdown-menu' | 'empty' | 'field' | 'hover-card' | 'input' | 'input-group' | 'input-otp' | 'item' | 'kbd' | 'label' | 'marker' | 'menubar' | 'message' | 'message-scroller' | 'native-select' | 'navigation-menu' | 'pagination' | 'popover' | 'progress' | 'questionnaire' | 'radio-group' | 'resizable' | 'scroll-area' | 'select' | 'separator' | 'sheet' | 'sidebar' | 'skeleton' | 'slider' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'textarea' | 'toggle' | 'toggle-group' | 'tooltip' | 'typography' | 'utils';
+export type Primitive = 'accordion' | 'alert' | 'alert-dialog' | 'aspect-ratio' | 'attachment' | 'autocomplete' | 'avatar' | 'badge' | 'breadcrumb' | 'bubble' | 'button' | 'button-group' | 'calendar' | 'card' | 'carousel' | 'chart' | 'checkbox' | 'code-block' | 'collapsible' | 'combobox' | 'command' | 'context-menu' | 'date-picker' | 'dialog' | 'drawer' | 'dropdown-menu' | 'empty' | 'field' | 'hover-card' | 'input' | 'input-group' | 'input-otp' | 'item' | 'kbd' | 'label' | 'marker' | 'menubar' | 'message' | 'message-scroller' | 'native-select' | 'navigation-menu' | 'pagination' | 'popover' | 'progress' | 'questionnaire' | 'radio-group' | 'resizable' | 'scroll-area' | 'select' | 'separator' | 'sheet' | 'sidebar' | 'skeleton' | 'slider' | 'sonner' | 'spinner' | 'switch' | 'table' | 'tabs' | 'textarea' | 'toggle' | 'toggle-group' | 'tooltip' | 'trace' | 'typography' | 'utils';

package/src/generators/ui/style-luma.css

@@ -1477,4 +1477,82 @@
 	.spartan-menu-translucent {
 		@apply bg-popover/70 **:data-[slot$=-item]:focus:bg-foreground/10 **:data-[slot$=-item]:data-highlighted:bg-foreground/10 **:data-[slot$=-separator]:bg-foreground/5 **:data-[slot$=-trigger]:focus:bg-foreground/10 **:data-[slot$=-trigger]:aria-expanded:bg-foreground/10! **:data-[variant=destructive]:focus:bg-foreground/10! **:data-[variant=destructive]:text-accent-foreground! **:data-[variant=destructive]:**:text-accent-foreground! relative animate-none! before:pointer-events-none before:absolute before:inset-0 before:-z-1 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150;
 	}
+
+	/* MARK: Trace */
+	.spartan-trace {
+		@apply *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/30 gap-3 *:has-[>[data-slot=trace-line]]:rounded-lg *:has-[>[data-slot=trace-line]]:focus-visible:ring-3;
+	}
+
+	.spartan-trace-collapsible-trigger {
+		@apply focus-visible:ring-ring/30 gap-1 rounded-lg focus-visible:ring-3;
+	}
+
+	.spartan-trace-line {
+		@apply gap-2 text-sm;
+	}
+
+	.spartan-trace-icon {
+		@apply size-4 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] [[data-slot=trace-title]~&]:-ml-1;
+	}
+
+	.spartan-trace-collapsible-content {
+		@apply duration-200;
+	}
+
+	.spartan-trace-collapsible-content-inner {
+		@apply mt-2.5 mb-1 ml-[calc(--spacing(2)-1px)] border-l pr-1 pl-4 leading-relaxed;
+	}
+
+	/* MARK: Code Block */
+	.spartan-code-block {
+		@apply has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/30 rounded-2xl text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 data-[size=sm]:rounded-xl data-[size=sm]:text-xs;
+	}
+
+	.spartan-code-block-variant-default {
+		@apply bg-muted text-foreground ring-foreground/5 dark:ring-foreground/10 ring-1;
+	}
+
+	.spartan-code-block-variant-destructive {
+		@apply bg-destructive/5 text-destructive ring-destructive/15 dark:bg-destructive/10 dark:ring-destructive/20 ring-1;
+	}
+
+	.spartan-code-block-header {
+		@apply text-muted-foreground group-data-[variant=destructive]/code-block:text-destructive gap-2 px-5 pt-5 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pt-3;
+	}
+
+	.spartan-code-block-footer {
+		@apply text-muted-foreground gap-2 px-5 pb-5 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pb-3;
+	}
+
+	.spartan-code-block-title {
+		@apply text-foreground group-data-[variant=destructive]/code-block:text-destructive font-sans text-sm font-medium group-data-[size=sm]/code-block:text-xs [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[size=sm]/code-block:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)] *:[ng-icon]:me-1.5;
+	}
+
+	.spartan-code-block-actions {
+		@apply *:data-[slot=button]:hover:bg-foreground/5 dark:*:data-[slot=button]:hover:bg-foreground/10 [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-foreground/10 -my-1 -me-1.5 gap-1 [[data-slot=code-block]>&]:end-4 [[data-slot=code-block]>&]:top-4 [[data-slot=code-block]>&]:m-0 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-2 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:*:[button]:ring-1;
+	}
+
+	.spartan-code-block-copy-button {
+		@apply hover:bg-foreground/5 dark:hover:bg-foreground/10;
+	}
+
+	.spartan-code-block-content {
+		@apply px-5 py-5 leading-relaxed group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:py-3 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5;
+	}
+
+	.spartan-code-block-line {
+		@apply before:text-muted-foreground after:text-muted-foreground -mx-5 px-5 group-data-[size=sm]/code-block:-mx-3 group-data-[size=sm]/code-block:px-3 before:min-w-6 before:text-end after:start-1 in-data-numbered:gap-x-3;
+	}
+
+	.spartan-code-block-line-variant-highlighted {
+		@apply bg-foreground/5;
+	}
+
+	.spartan-code-block-line-variant-added {
+		@apply bg-foreground/5 after:content-['+'];
+	}
+
+	.spartan-code-block-line-variant-removed {
+		@apply bg-destructive/10 after:text-destructive after:content-['−'];
+	}
 }

package/src/generators/ui/style-lyra.css

@@ -1398,6 +1398,31 @@
 		@apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-none px-3 py-1.5 text-xs;
 	}
 
+	/* MARK: Trace */
+	.spartan-trace {
+		@apply *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50 gap-2 *:has-[>[data-slot=trace-line]]:rounded-none *:has-[>[data-slot=trace-line]]:focus-visible:ring-1;
+	}
+
+	.spartan-trace-collapsible-trigger {
+		@apply focus-visible:ring-ring/50 gap-1 rounded-none focus-visible:ring-1;
+	}
+
+	.spartan-trace-line {
+		@apply gap-2 text-xs;
+	}
+
+	.spartan-trace-icon {
+		@apply size-3.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)] [[data-slot=trace-title]~&]:-ml-1;
+	}
+
+	.spartan-trace-collapsible-content {
+		@apply duration-200;
+	}
+
+	.spartan-trace-collapsible-content-inner {
+		@apply mt-2 mb-1 ml-[calc(--spacing(1.75)-1px)] border-l pr-1 pl-3.75 leading-relaxed;
+	}
+
 	/* MARK: Input Group */
 	.spartan-input-group {
 		@apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5;
@@ -1454,4 +1479,53 @@
 	.spartan-input-group-textarea {
 		@apply rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent dark:disabled:bg-transparent;
 	}
+
+	/* MARK: Code Block */
+	.spartan-code-block {
+		@apply has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 rounded-none text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-1 data-[size=sm]:text-xs;
+	}
+
+	.spartan-code-block-variant-default {
+		@apply border-input text-foreground dark:bg-input/30 has-[>[data-slot=code-block-content]:focus-visible]:border-ring border;
+	}
+
+	.spartan-code-block-variant-destructive {
+		@apply border-destructive/30 text-destructive dark:border-destructive/40 border;
+	}
+
+	.spartan-code-block-header {
+		@apply text-muted-foreground group-data-[variant=destructive]/code-block:text-destructive gap-2 px-3 pt-3 group-data-[size=sm]/code-block:px-2 group-data-[size=sm]/code-block:pt-2;
+	}
+
+	.spartan-code-block-footer {
+		@apply text-muted-foreground gap-2 px-3 pb-3 group-data-[size=sm]/code-block:px-2 group-data-[size=sm]/code-block:pb-2;
+	}
+
+	.spartan-code-block-title {
+		@apply text-foreground group-data-[variant=destructive]/code-block:text-destructive font-sans text-xs font-medium [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)] *:[ng-icon]:me-1.5;
+	}
+
+	.spartan-code-block-actions {
+		@apply [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-foreground/10 -my-1 -me-1.5 gap-1 [[data-slot=code-block]>&]:end-2 [[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:m-0 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-1.5 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-1.5 [[data-slot=code-block]>&]:*:[button]:ring-1;
+	}
+
+	.spartan-code-block-content {
+		@apply px-3 py-3 leading-relaxed group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-2 group-data-[size=sm]/code-block:py-2 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5;
+	}
+
+	.spartan-code-block-line {
+		@apply before:text-muted-foreground after:text-muted-foreground -mx-3 px-3 group-data-[size=sm]/code-block:-mx-2 group-data-[size=sm]/code-block:px-2 before:min-w-6 before:text-end after:start-1 in-data-numbered:gap-x-3;
+	}
+
+	.spartan-code-block-line-variant-highlighted {
+		@apply bg-muted;
+	}
+
+	.spartan-code-block-line-variant-added {
+		@apply bg-muted after:content-['+'];
+	}
+
+	.spartan-code-block-line-variant-removed {
+		@apply bg-destructive/10 after:text-destructive after:content-['−'];
+	}
 }

package/src/generators/ui/style-maia.css

@@ -1420,6 +1420,31 @@
 		@apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl;
 	}
 
+	/* MARK: Trace */
+	.spartan-trace {
+		@apply *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/50 gap-3 *:has-[>[data-slot=trace-line]]:rounded-lg *:has-[>[data-slot=trace-line]]:focus-visible:ring-[3px];
+	}
+
+	.spartan-trace-collapsible-trigger {
+		@apply focus-visible:ring-ring/50 gap-1 rounded-lg focus-visible:ring-[3px];
+	}
+
+	.spartan-trace-line {
+		@apply gap-2 text-sm;
+	}
+
+	.spartan-trace-icon {
+		@apply size-4 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] [[data-slot=trace-title]~&]:-ml-1;
+	}
+
+	.spartan-trace-collapsible-content {
+		@apply duration-200;
+	}
+
+	.spartan-trace-collapsible-content-inner {
+		@apply mt-2.5 mb-1 ml-[calc(--spacing(2)-1px)] border-l pr-1 pl-4 leading-relaxed;
+	}
+
 	/* MARK: Input Group */
 	.spartan-input-group {
 		@apply border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5;
@@ -1472,4 +1497,53 @@
 	.spartan-input-group-textarea {
 		@apply rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 data-[matches-spartan-invalid=true]:ring-0 dark:bg-transparent;
 	}
+
+	/* MARK: Code Block */
+	.spartan-code-block {
+		@apply has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 rounded-xl text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-[3px] data-[size=sm]:rounded-lg data-[size=sm]:text-xs;
+	}
+
+	.spartan-code-block-variant-default {
+		@apply border-input text-foreground dark:bg-input/30 has-[>[data-slot=code-block-content]:focus-visible]:border-ring border;
+	}
+
+	.spartan-code-block-variant-destructive {
+		@apply border-destructive/30 text-destructive dark:border-destructive/40 border;
+	}
+
+	.spartan-code-block-header {
+		@apply text-muted-foreground group-data-[variant=destructive]/code-block:text-destructive gap-2 px-4 pt-4 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pt-3;
+	}
+
+	.spartan-code-block-footer {
+		@apply text-muted-foreground gap-2 px-4 pb-4 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:pb-3;
+	}
+
+	.spartan-code-block-title {
+		@apply text-foreground group-data-[variant=destructive]/code-block:text-destructive font-sans text-sm font-medium group-data-[size=sm]/code-block:text-xs [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] group-data-[size=sm]/code-block:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)] *:[ng-icon]:me-1.5;
+	}
+
+	.spartan-code-block-actions {
+		@apply [[data-slot=code-block]>&]:*:[button]:bg-background [[data-slot=code-block]>&]:*:[button]:ring-foreground/10 -my-1 -me-1.5 gap-1 [[data-slot=code-block]>&]:end-3 [[data-slot=code-block]>&]:top-3 [[data-slot=code-block]>&]:m-0 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:end-2 group-data-[size=sm]/code-block:[[data-slot=code-block]>&]:top-2 [[data-slot=code-block]>&]:*:[button]:ring-1;
+	}
+
+	.spartan-code-block-content {
+		@apply px-4 py-4 leading-relaxed group-has-data-[slot=code-block-footer]/code-block:pb-2 group-has-data-[slot=code-block-header]/code-block:pt-2 group-data-[size=sm]/code-block:px-3 group-data-[size=sm]/code-block:py-3 group-data-[size=sm]/code-block:group-has-data-[slot=code-block-header]/code-block:pt-1.5;
+	}
+
+	.spartan-code-block-line {
+		@apply before:text-muted-foreground after:text-muted-foreground -mx-4 px-4 group-data-[size=sm]/code-block:-mx-3 group-data-[size=sm]/code-block:px-3 before:min-w-6 before:text-end after:start-1 in-data-numbered:gap-x-3;
+	}
+
+	.spartan-code-block-line-variant-highlighted {
+		@apply bg-muted;
+	}
+
+	.spartan-code-block-line-variant-added {
+		@apply bg-muted after:content-['+'];
+	}
+
+	.spartan-code-block-line-variant-removed {
+		@apply bg-destructive/10 after:text-destructive after:content-['−'];
+	}
 }