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

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

@@ -5,6 +5,7 @@ export const hlmH1 = 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text
 
 @Directive({
 	selector: '[hlmH1]',
+	exportAs: 'hlmH1',
 })
 export class HlmH1 {
 	constructor() {

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

@@ -6,6 +6,7 @@ export const hlmH2 =
 
 @Directive({
 	selector: '[hlmH2]',
+	exportAs: 'hlmH2',
 })
 export class HlmH2 {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmH3 = 'scroll-m-20 text-2xl font-semibold tracking-tight';
 
 @Directive({
 	selector: '[hlmH3]',
+	exportAs: 'hlmH3',
 })
 export class HlmH3 {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmH4 = 'scroll-m-20 text-xl font-semibold tracking-tight';
 
 @Directive({
 	selector: '[hlmH4]',
+	exportAs: 'hlmH4',
 })
 export class HlmH4 {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmLarge = 'text-lg font-semibold';
 
 @Directive({
 	selector: '[hlmLarge]',
+	exportAs: 'hlmLarge',
 })
 export class HlmLarge {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmLead = 'text-xl text-muted-foreground';
 
 @Directive({
 	selector: '[hlmLead]',
+	exportAs: 'hlmLead',
 })
 export class HlmLead {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmMuted = 'text-sm text-muted-foreground';
 
 @Directive({
 	selector: '[hlmMuted]',
+	exportAs: 'hlmMuted',
 })
 export class HlmMuted {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmP = 'leading-7 [&:not(:first-child)]:mt-6';
 
 @Directive({
 	selector: '[hlmP]',
+	exportAs: 'hlmP',
 })
 export class HlmP {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmSmall = 'text-sm font-medium leading-none';
 
 @Directive({
 	selector: '[hlmSmall]',
+	exportAs: 'hlmSmall',
 })
 export class HlmSmall {
 	constructor() {

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

@@ -5,6 +5,7 @@ export const hlmUl = 'my-6 ml-6 list-disc [&>li]:mt-2';
 
 @Directive({
 	selector: '[hlmUl]',
+	exportAs: 'hlmUl',
 })
 export class HlmUl {
 	constructor() {

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/schema.d.ts

@@ -1,7 +1,7 @@
 import { type Primitive } from './primitives';
 
 export interface HlmUIGeneratorSchema {
-	name?: Primitive;
+	name?: Primitive | 'all';
 	directory?: string;
 	rootProject?: boolean;
 	tags?: string;

package/src/generators/ui/schema.json

@@ -6,7 +6,7 @@
 	"properties": {
 		"name": {
 			"type": "string",
-			"description": "Primitive name",
+			"description": "Primitive name, or 'all' to add every primitive",
 			"$default": {
 				"$source": "argv",
 				"index": 0

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-['−'];
+	}
 }

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

@@ -1419,6 +1419,30 @@
 	.spartan-tooltip-content {
 		@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-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md;
 	}
+	/* MARK: Trace */
+	.spartan-trace {
+		@apply *:has-[>[data-slot=trace-line]]:focus-visible:ring-ring/30 gap-1.5 *:has-[>[data-slot=trace-line]]:rounded-sm *:has-[>[data-slot=trace-line]]:focus-visible:ring-2;
+	}
+
+	.spartan-trace-collapsible-trigger {
+		@apply focus-visible:ring-ring/30 gap-1 rounded-sm focus-visible:ring-2;
+	}
+
+	.spartan-trace-line {
+		@apply gap-2 text-xs/relaxed;
+	}
+
+	.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-1.5 mb-1 ml-[calc(--spacing(1.75)-1px)] border-l pr-1 pl-3.75;
+	}
 
 	/* MARK: Input Group */
 	.spartan-input-group {
@@ -1476,4 +1500,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/30 rounded-md text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-2 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-nova.css

@@ -355,6 +355,55 @@
 		@apply [&>ng-icon]:text-[length:--spacing(3.5)];
 	}
 
+	/* MARK: Code Block */
+	.spartan-code-block {
+		@apply has-[>[data-slot=code-block-content]:focus-visible]:ring-ring/50 rounded-lg text-sm has-[>[data-slot=code-block-content]:focus-visible]:ring-3 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.5 group-data-[size=sm]/code-block:pt-2.5;
+	}
+
+	.spartan-code-block-footer {
+		@apply text-muted-foreground gap-2 px-3 pb-3 group-data-[size=sm]/code-block:px-2.5 group-data-[size=sm]/code-block:pb-2.5;
+	}
+
+	.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(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.5 group-data-[size=sm]/code-block:py-2.5 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.5 group-data-[size=sm]/code-block:px-2.5 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-['-'];
+	}
+
 	/* MARK: Combobox */
 	.spartan-combobox-content {
 		@apply bg-popover text-popover-foreground data-open:animate-in **:has-[[data-slot=input-group-control]:focus-visible]:border-input data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 ring-foreground/10 **:data-[slot=input-group]:bg-input/30 **:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 **:has-[[data-slot=input-group-control]:focus-visible]:ring-0 **:data-[slot=input-group]:m-1 **:data-[slot=input-group]:mb-0 **:data-[slot=input-group]:h-8 **:data-[slot=input-group]:shadow-none;
@@ -1450,6 +1499,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-md 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-md *:has-[>[data-slot=trace-line]]:focus-visible:ring-3;
+	}
+
+	.spartan-trace-collapsible-trigger {
+		@apply focus-visible:ring-ring/50 gap-1 rounded-md 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 mb-1 ml-[calc(--spacing(2)-1px)] border-l pr-1 pl-4 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-[[data-slot=input-group-control]:disabled]:bg-input/50 dark:has-[[data-slot=input-group-control]:disabled]:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:disabled]:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 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;