yaxa-svelte 2.0.4 → 2.1.0

package/README.md

@@ -12,6 +12,8 @@ _Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2 & 3 & Svelte 5 with Built-i
 [![Tailwind CSS v4](https://img.shields.io/badge/Tailwind_CSS-v4.0-38B2AC?style=flat&logo=tailwind-css&logoColor=white)](https://tailwindcss.com)
 [![Bits UI](https://img.shields.io/badge/Bits_UI-v2.0-18181b?style=flat)](https://bits-ui.com)
 [![License: MIT](https://img.shields.io/badge/License-MIT-emerald.svg)](LICENSE)
+[![Security Policy](https://img.shields.io/badge/Security-Policy-blue.svg)](SECURITY.md)
+[![Contributing](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md)
 
 [**Live Documentation & Playground →**](https://yaxa.vercel.app)
 
@@ -293,12 +295,12 @@ theme.setAccent('sky'); // Sky Cyan (#0ea5e9)
 
 ## 🤝 Contributing
 
-Contributions are always welcome!
+Contributions are always welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) and [Security Policy](SECURITY.md) before submitting pull requests.
 
 1. Fork the repository: `git clone https://github.com/FuntionalFrost/yaxa.git`
 2. Install dependencies: `pnpm install`
 3. Start development server: `pnpm dev`
-4. Run type checking & linting: `pnpm check && pnpm lint`
+4. Run verification gates: `pnpm lint && pnpm check && pnpm test && pnpm build`
 
 ---
 

package/dist/components/blocks/FAQ.svelte.d.ts

@@ -5,7 +5,7 @@ export interface FAQItem {
     answer: string;
     category?: string;
 }
-export declare const faqVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "w-full py-12 max-w-3xl mx-auto", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const faqVariants: import("tailwind-variants").TVReturnType<{}, undefined, "w-full py-12 max-w-3xl mx-auto", undefined, undefined, undefined>;
 export type FAQProps = VariantProps<typeof faqVariants> & {
     title?: string;
     description?: string;

package/dist/components/blocks/FeatureGrid.svelte.d.ts

@@ -8,7 +8,7 @@ export interface FeatureItem {
     tag?: string;
     href?: string;
 }
-export declare const featureGridVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "w-full py-12", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const featureGridVariants: import("tailwind-variants").TVReturnType<{}, undefined, "w-full py-12", undefined, undefined, undefined>;
 export type FeatureGridProps = VariantProps<typeof featureGridVariants> & {
     title?: string;
     description?: string;

package/dist/components/blocks/Testimonials.svelte.d.ts

@@ -8,7 +8,7 @@ export interface TestimonialItem {
     avatar?: string;
     rating?: number;
 }
-export declare const testimonialsVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "w-full py-12", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;
+export declare const testimonialsVariants: import("tailwind-variants").TVReturnType<{}, undefined, "w-full py-12", undefined, undefined, undefined>;
 export type TestimonialsProps = VariantProps<typeof testimonialsVariants> & {
     title?: string;
     description?: string;

package/dist/components/elements/Avatar.svelte.d.ts

@@ -1,32 +1,14 @@
 import { type VariantProps } from '../../utils/cn';
 export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
     size: {
-        xs: "h-6 w-6 text-[10px]";
-        sm: "h-8 w-8 text-xs";
-        md: "h-10 w-10 text-sm";
-        lg: "h-12 w-12 text-base";
-        xl: "h-14 w-14 text-lg";
-        '2xl': "h-16 w-16 text-xl";
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
     };
-}, undefined, "relative inline-flex shrink-0 items-center justify-center font-medium select-none overflow-hidden rounded-full bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300", {
-    size: {
-        xs: "h-6 w-6 text-[10px]";
-        sm: "h-8 w-8 text-xs";
-        md: "h-10 w-10 text-sm";
-        lg: "h-12 w-12 text-base";
-        xl: "h-14 w-14 text-lg";
-        '2xl': "h-16 w-16 text-xl";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    size: {
-        xs: "h-6 w-6 text-[10px]";
-        sm: "h-8 w-8 text-xs";
-        md: "h-10 w-10 text-sm";
-        lg: "h-12 w-12 text-base";
-        xl: "h-14 w-14 text-lg";
-        '2xl': "h-16 w-16 text-xl";
-    };
-}, undefined>>;
+}, undefined, "relative inline-flex shrink-0 items-center justify-center font-medium select-none overflow-hidden rounded-full bg-neutral-200 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300", undefined, undefined, undefined>;
 export type AvatarProps = VariantProps<typeof avatarVariants> & {
     src?: string;
     alt?: string;

package/dist/components/elements/Badge.svelte.d.ts

@@ -3,68 +3,26 @@ import type { Snippet } from 'svelte';
 import type { IconSource } from './Icon.svelte';
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        solid: "text-white";
-        outline: "border bg-transparent";
-        soft: "";
-        subtle: "border";
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
     };
     color: {
-        primary: "";
-        neutral: "";
-        success: "";
-        warning: "";
-        error: "";
-        info: "";
+        primary: string;
+        neutral: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
     };
     size: {
-        xs: "text-[10px] px-1.5 py-0.5 gap-1 rounded";
-        sm: "text-xs px-2.5 py-0.5 gap-1.5 rounded-md";
-        md: "text-xs px-2.5 py-1 gap-1.5 rounded-md";
-        lg: "text-sm px-3 py-1.5 gap-2 rounded-lg";
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
     };
-}, undefined, "inline-flex items-center font-medium select-none transition-colors duration-150", {
-    variant: {
-        solid: "text-white";
-        outline: "border bg-transparent";
-        soft: "";
-        subtle: "border";
-    };
-    color: {
-        primary: "";
-        neutral: "";
-        success: "";
-        warning: "";
-        error: "";
-        info: "";
-    };
-    size: {
-        xs: "text-[10px] px-1.5 py-0.5 gap-1 rounded";
-        sm: "text-xs px-2.5 py-0.5 gap-1.5 rounded-md";
-        md: "text-xs px-2.5 py-1 gap-1.5 rounded-md";
-        lg: "text-sm px-3 py-1.5 gap-2 rounded-lg";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        solid: "text-white";
-        outline: "border bg-transparent";
-        soft: "";
-        subtle: "border";
-    };
-    color: {
-        primary: "";
-        neutral: "";
-        success: "";
-        warning: "";
-        error: "";
-        info: "";
-    };
-    size: {
-        xs: "text-[10px] px-1.5 py-0.5 gap-1 rounded";
-        sm: "text-xs px-2.5 py-0.5 gap-1.5 rounded-md";
-        md: "text-xs px-2.5 py-1 gap-1.5 rounded-md";
-        lg: "text-sm px-3 py-1.5 gap-2 rounded-lg";
-    };
-}, undefined>>;
+}, undefined, "inline-flex items-center font-medium select-none transition-colors duration-150", undefined, undefined, undefined>;
 export type BadgeProps = VariantProps<typeof badgeVariants> & {
     dot?: boolean;
     icon?: IconSource;

package/dist/components/elements/Button.svelte.d.ts

@@ -3,92 +3,34 @@ import type { Snippet } from 'svelte';
 import type { IconSource } from './Icon.svelte';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        solid: "shadow-xs text-white";
-        outline: "border bg-transparent shadow-xs";
-        soft: "";
-        subtle: "border";
-        ghost: "bg-transparent";
-        link: "p-0 underline-offset-4 hover:underline";
+        solid: string;
+        outline: string;
+        soft: string;
+        subtle: string;
+        ghost: string;
+        link: string;
     };
     color: {
-        primary: "";
-        neutral: "";
-        success: "";
-        warning: "";
-        error: "";
+        primary: string;
+        neutral: string;
+        success: string;
+        warning: string;
+        error: string;
     };
     size: {
-        xs: "text-xs px-2 py-1 gap-1 rounded-md";
-        sm: "text-sm px-2.5 py-1.5 gap-1.5 rounded-md";
-        md: "text-sm px-3.5 py-2 gap-2 rounded-lg";
-        lg: "text-base px-4 py-2.5 gap-2 rounded-lg";
-        xl: "text-base px-5 py-3 gap-2.5 rounded-xl";
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
     };
     block: {
-        true: "w-full";
+        true: string;
     };
     square: {
-        true: "aspect-square p-0";
+        true: string;
     };
-}, undefined, "inline-flex items-center justify-center font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 select-none active:scale-[0.98] whitespace-nowrap max-w-full overflow-hidden text-ellipsis shrink-0 [&>svg]:shrink-0", {
-    variant: {
-        solid: "shadow-xs text-white";
-        outline: "border bg-transparent shadow-xs";
-        soft: "";
-        subtle: "border";
-        ghost: "bg-transparent";
-        link: "p-0 underline-offset-4 hover:underline";
-    };
-    color: {
-        primary: "";
-        neutral: "";
-        success: "";
-        warning: "";
-        error: "";
-    };
-    size: {
-        xs: "text-xs px-2 py-1 gap-1 rounded-md";
-        sm: "text-sm px-2.5 py-1.5 gap-1.5 rounded-md";
-        md: "text-sm px-3.5 py-2 gap-2 rounded-lg";
-        lg: "text-base px-4 py-2.5 gap-2 rounded-lg";
-        xl: "text-base px-5 py-3 gap-2.5 rounded-xl";
-    };
-    block: {
-        true: "w-full";
-    };
-    square: {
-        true: "aspect-square p-0";
-    };
-}, undefined, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        solid: "shadow-xs text-white";
-        outline: "border bg-transparent shadow-xs";
-        soft: "";
-        subtle: "border";
-        ghost: "bg-transparent";
-        link: "p-0 underline-offset-4 hover:underline";
-    };
-    color: {
-        primary: "";
-        neutral: "";
-        success: "";
-        warning: "";
-        error: "";
-    };
-    size: {
-        xs: "text-xs px-2 py-1 gap-1 rounded-md";
-        sm: "text-sm px-2.5 py-1.5 gap-1.5 rounded-md";
-        md: "text-sm px-3.5 py-2 gap-2 rounded-lg";
-        lg: "text-base px-4 py-2.5 gap-2 rounded-lg";
-        xl: "text-base px-5 py-3 gap-2.5 rounded-xl";
-    };
-    block: {
-        true: "w-full";
-    };
-    square: {
-        true: "aspect-square p-0";
-    };
-}, undefined>>;
+}, undefined, "inline-flex items-center justify-center font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 select-none active:scale-[0.98] whitespace-nowrap max-w-full overflow-hidden text-ellipsis shrink-0 [&>svg]:shrink-0", undefined, undefined, undefined>;
 export type ButtonProps = VariantProps<typeof buttonVariants> & {
     type?: 'button' | 'submit' | 'reset';
     href?: string;

package/dist/components/elements/Carousel.svelte.d.ts

@@ -1,30 +1,6 @@
 import { type VariantProps } from '../../utils/cn.js';
 import type { Snippet } from 'svelte';
-export declare const carouselVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            viewport?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            slide?: import("tailwind-variants").ClassValue;
-            controls?: import("tailwind-variants").ClassValue;
-            arrowBtn?: import("tailwind-variants").ClassValue;
-            dots?: import("tailwind-variants").ClassValue;
-            dotBtn?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            viewport?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            slide?: import("tailwind-variants").ClassValue;
-            controls?: import("tailwind-variants").ClassValue;
-            arrowBtn?: import("tailwind-variants").ClassValue;
-            dots?: import("tailwind-variants").ClassValue;
-            dotBtn?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
+export declare const carouselVariants: import("tailwind-variants").TVReturnType<{}, {
     root: string;
     viewport: string;
     slide: string;
@@ -32,35 +8,7 @@ export declare const carouselVariants: import("tailwind-variants").TVReturnType<
     arrowBtn: string;
     dots: string;
     dotBtn: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            viewport?: import("tailwind-variants").ClassValue;
-            root?: import("tailwind-variants").ClassValue;
-            slide?: import("tailwind-variants").ClassValue;
-            controls?: import("tailwind-variants").ClassValue;
-            arrowBtn?: import("tailwind-variants").ClassValue;
-            dots?: import("tailwind-variants").ClassValue;
-            dotBtn?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {}, {
-    root: string;
-    viewport: string;
-    slide: string;
-    controls: string;
-    arrowBtn: string;
-    dots: string;
-    dotBtn: string;
-}, import("tailwind-variants").TVReturnTypeLike<unknown, {
-    root: string;
-    viewport: string;
-    slide: string;
-    controls: string;
-    arrowBtn: string;
-    dots: string;
-    dotBtn: string;
-}>>;
+}, undefined, undefined, undefined, undefined>;
 export type CarouselProps<T> = VariantProps<typeof carouselVariants> & {
     items: T[];
     currentIndex?: number;

package/dist/components/elements/CodeBlock.svelte

@@ -46,10 +46,15 @@
 		const isSvelte = ['svelte', 'svelte5', 'sv'].includes(lang);
 		const isHtml = ['html', 'xml', 'svg'].includes(lang);
 		const isPython = ['python', 'py'].includes(lang);
-		const isSql = lang === 'sql';
+		const isRust = ['rust', 'rs'].includes(lang);
+		const isGo = ['go', 'golang'].includes(lang);
+		const isSql = ['sql', 'pgsql', 'postgres', 'postgresql', 'mysql', 'sqlite'].includes(lang);
+		const isGraphQL = ['graphql', 'gql'].includes(lang);
 		const isBash = ['bash', 'sh', 'zsh', 'shell'].includes(lang);
 		const isJson = ['json', 'jsonc', 'json5'].includes(lang);
 		const isCss = ['css', 'scss', 'postcss', 'tailwind', 'tailwindcss'].includes(lang);
+		const isYaml = ['yaml', 'yml'].includes(lang);
+		const isToml = ['toml', 'cargo'].includes(lang);
 
 		let multilineState:
 			| null
@@ -179,7 +184,7 @@
 
 				if (
 					(!isLatex && remaining.startsWith('//')) ||
-					((isPython || isBash || lang === 'env' || lang === 'yaml' || lang === 'yml') &&
+					((isPython || isBash || lang === 'env' || isYaml || isToml || isGraphQL) &&
 						remaining.startsWith('#')) ||
 					(isLatex && remaining.startsWith('%')) ||
 					(isSql && remaining.startsWith('--'))
@@ -188,8 +193,8 @@
 					break;
 				}
 
-				// 2. Python Triple-Quoted Strings (Docstrings)
-				if (isPython && (remaining.startsWith('"""') || remaining.startsWith("'''"))) {
+				// 2. Python & TOML Triple-Quoted Strings (Docstrings / Multiline)
+				if ((isPython || isToml) && (remaining.startsWith('"""') || remaining.startsWith("'''"))) {
 					const delim = remaining.startsWith('"""') ? '"""' : "'''";
 					const closeIdx = remaining.indexOf(delim, 3);
 					if (closeIdx !== -1) {
@@ -228,6 +233,110 @@
 					}
 				}
 
+				// 4b. YAML Key-Value Pairs, Anchors, Aliases & Directives
+				if (isYaml) {
+					// Anchors & Aliases (&anchor, *alias)
+					const anchorMatch = remaining.match(/^([&*][\w.-]+)/);
+					if (anchorMatch) {
+						tokens.push({ text: anchorMatch[0], type: 'macro' });
+						remaining = remaining.slice(anchorMatch[0].length);
+						continue;
+					}
+
+					// Tags (!!str, !!int, !!map, !custom)
+					const yamlTagMatch = remaining.match(/^(!{1,2}[\w.-]+)/);
+					if (yamlTagMatch) {
+						tokens.push({ text: yamlTagMatch[0], type: 'directive' });
+						remaining = remaining.slice(yamlTagMatch[0].length);
+						continue;
+					}
+
+					// Document start/end markers (--- or ...)
+					if (remaining === line) {
+						const docMarkerMatch = remaining.match(/^(\s*(?:---|(?:\.\.\.))\s*)$/);
+						if (docMarkerMatch) {
+							tokens.push({ text: docMarkerMatch[1], type: 'punctuation' });
+							remaining = remaining.slice(docMarkerMatch[1].length);
+							continue;
+						}
+					}
+
+					// Quoted keys before ':'
+					const yamlQuotedKeyMatch = remaining.match(
+						/^("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')(?=\s*:(?:\s|$))/
+					);
+					if (yamlQuotedKeyMatch) {
+						tokens.push({ text: yamlQuotedKeyMatch[1], type: 'attr' });
+						remaining = remaining.slice(yamlQuotedKeyMatch[1].length);
+						continue;
+					}
+
+					// Bare keys before ':'
+					const yamlKeyMatch = remaining.match(/^([\w.-]+)(?=\s*:(?:\s|$))/);
+					if (yamlKeyMatch) {
+						tokens.push({ text: yamlKeyMatch[0], type: 'attr' });
+						remaining = remaining.slice(yamlKeyMatch[0].length);
+						continue;
+					}
+
+					// YAML booleans, nulls & block scalar indicators
+					const yamlKwMatch = remaining.match(/^(true|false|yes|no|on|off|null|~|[|>][+-]?)\b/i);
+					if (yamlKwMatch) {
+						tokens.push({ text: yamlKwMatch[0], type: 'keyword' });
+						remaining = remaining.slice(yamlKwMatch[0].length);
+						continue;
+					}
+				}
+
+				// 4c. TOML Table Headers & Key-Value Pairs
+				if (isToml) {
+					// Table headers ([table] or [[array_of_tables]])
+					const tomlTableMatch = remaining.match(/^(\[\[?[\w.:"-]+\]\]?)/);
+					if (tomlTableMatch) {
+						tokens.push({ text: tomlTableMatch[0], type: 'directive' });
+						remaining = remaining.slice(tomlTableMatch[0].length);
+						continue;
+					}
+
+					// Quoted keys before '='
+					const tomlQuotedKeyMatch = remaining.match(
+						/^("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')(?=\s*=)/
+					);
+					if (tomlQuotedKeyMatch) {
+						tokens.push({ text: tomlQuotedKeyMatch[1], type: 'attr' });
+						remaining = remaining.slice(tomlQuotedKeyMatch[1].length);
+						continue;
+					}
+
+					// Bare or dotted keys before '='
+					const tomlKeyMatch = remaining.match(/^([\w.-]+)(?=\s*=)/);
+					if (tomlKeyMatch) {
+						tokens.push({ text: tomlKeyMatch[0], type: 'attr' });
+						remaining = remaining.slice(tomlKeyMatch[0].length);
+						continue;
+					}
+
+					// Special TOML float constants (+inf, -inf, nan)
+					const tomlFloatMatch = remaining.match(/^([+-]?(?:inf|nan))\b/i);
+					if (tomlFloatMatch) {
+						tokens.push({ text: tomlFloatMatch[0], type: 'number' });
+						remaining = remaining.slice(tomlFloatMatch[0].length);
+						continue;
+					}
+				}
+
+				// 4d. ISO Dates / Timestamps for YAML & TOML
+				if (isYaml || isToml) {
+					const dateMatch = remaining.match(
+						/^(\d{4}-\d{2}-\d{2}(?:[Tt\s]\d{2}:\d{2}:\d{2}(?:\.\d+)?(?:[Zz]|[+-]\d{2}:\d{2})?)?|\d{2}:\d{2}:\d{2}(?:\.\d+)?)\b/
+					);
+					if (dateMatch) {
+						tokens.push({ text: dateMatch[0], type: 'number' });
+						remaining = remaining.slice(dateMatch[0].length);
+						continue;
+					}
+				}
+
 				// 5. CSS & Tailwind CSS v4 At-Rules, Variables & Colors
 				if (isCss) {
 					// Tailwind v4 & CSS At-rules (@theme, @utility, @source, @plugin, @import, @custom-variant, etc.)
@@ -316,10 +425,10 @@
 					}
 				}
 
-				// 9. Python Built-in Types (int, str, dict, list, bool, etc.)
+				// 9. Python Built-in Types & Modern Typing Constructs (Python 3.0 to 3.13+)
 				if (isPython) {
 					const pyTypeMatch = remaining.match(
-						/^(str|int|float|bool|dict|list|tuple|set|bytes|Any|Optional|Union|Callable|Literal)\b/
+						/^(str|int|float|bool|dict|list|tuple|set|bytes|Any|Optional|Union|Callable|Literal|TypeIs|TypeGuard|Self)\b/
 					);
 					if (pyTypeMatch) {
 						tokens.push({ text: pyTypeMatch[0], type: 'macro' });
@@ -340,6 +449,126 @@
 					}
 				}
 
+				// 10b. Rust Attributes, Macro Invocations, Lifetimes & Standard Types
+				if (isRust) {
+					// Rust Attributes (#[derive(Debug, Clone)], #![no_std])
+					const rustAttrMatch = remaining.match(/^#(!?\[[\w:,()=\s"-]+\])/);
+					if (rustAttrMatch) {
+						tokens.push({ text: rustAttrMatch[0], type: 'decorator' });
+						remaining = remaining.slice(rustAttrMatch[0].length);
+						continue;
+					}
+
+					// Rust Macro Invocations (println!, vec!, format!, panic!, etc.)
+					const rustMacroMatch = remaining.match(
+						/^(println|eprintln|print|eprint|format|vec|panic|assert|assert_eq|assert_ne|todo|unimplemented|unreachable|write|writeln|cfg|include|env|concat)!/
+					);
+					if (rustMacroMatch) {
+						tokens.push({ text: rustMacroMatch[0], type: 'macro' });
+						remaining = remaining.slice(rustMacroMatch[0].length);
+						continue;
+					}
+
+					// Rust Lifetimes ('a, 'static)
+					const lifetimeMatch = remaining.match(/^'(?:static|[a-z_]\w*)(?!')\b/);
+					if (lifetimeMatch) {
+						tokens.push({ text: lifetimeMatch[0], type: 'macro' });
+						remaining = remaining.slice(lifetimeMatch[0].length);
+						continue;
+					}
+
+					// Rust Primitive & Standard Types
+					const rustTypeMatch = remaining.match(
+						/^(i8|i16|i32|i64|i128|isize|u8|u16|u32|u64|u128|usize|f32|f64|bool|char|str|String|Option|Result|Vec|Box|Rc|Arc|Cell|RefCell|Mutex|RwLock|HashMap|HashSet|BTreeMap|BTreeSet|Self|None|Some|Ok|Err)\b/
+					);
+					if (rustTypeMatch) {
+						tokens.push({ text: rustTypeMatch[0], type: 'macro' });
+						remaining = remaining.slice(rustTypeMatch[0].length);
+						continue;
+					}
+				}
+
+				// 10c. Go Primitive Types & Built-ins
+				if (isGo) {
+					const goTypeMatch = remaining.match(
+						/^(string|int|int8|int16|int32|int64|uint|uint8|uint16|uint32|uint64|uintptr|byte|rune|float32|float64|complex64|complex128|error|any|bool)\b/
+					);
+					if (goTypeMatch) {
+						tokens.push({ text: goTypeMatch[0], type: 'macro' });
+						remaining = remaining.slice(goTypeMatch[0].length);
+						continue;
+					}
+
+					const goBuiltinMatch = remaining.match(
+						/^(make|len|cap|new|append|copy|close|delete|panic|recover|print|println|complex|real|imag)\b(?=\s*\()/
+					);
+					if (goBuiltinMatch) {
+						tokens.push({ text: goBuiltinMatch[0], type: 'function' });
+						remaining = remaining.slice(goBuiltinMatch[0].length);
+						continue;
+					}
+				}
+
+				// 10d. SQL Data Types & Clauses
+				if (isSql) {
+					// SQL Standard Data Types
+					const sqlTypeMatch = remaining.match(
+						/^(INTEGER|INT|BIGINT|SMALLINT|TINYINT|SERIAL|BIGSERIAL|VARCHAR|TEXT|CHAR|CHARACTER|BOOLEAN|BOOL|DATE|TIME|TIMESTAMP|TIMESTAMPTZ|NUMERIC|DECIMAL|FLOAT|REAL|DOUBLE\s+PRECISION|DOUBLE|JSON|JSONB|UUID|BLOB|BYTEA|ARRAY|INTERVAL)\b/i
+					);
+					if (sqlTypeMatch) {
+						tokens.push({ text: sqlTypeMatch[0], type: 'macro' });
+						remaining = remaining.slice(sqlTypeMatch[0].length);
+						continue;
+					}
+
+					// Comprehensive SQL Clauses & Keywords
+					const sqlKwMatch = remaining.match(
+						/^(CREATE|ALTER|DROP|TRUNCATE|TABLE|DATABASE|SCHEMA|VIEW|INDEX|TRIGGER|FUNCTION|PROCEDURE|PRIMARY|FOREIGN|KEY|REFERENCES|CONSTRAINT|CHECK|DEFAULT|UNIQUE|NOT|NULL|CASCADE|RESTRICT|SELECT|DISTINCT|FROM|WHERE|AND|OR|IN|BETWEEN|LIKE|ILIKE|IS|EXISTS|HAVING|GROUP|ORDER|BY|ASC|DESC|LIMIT|OFFSET|FETCH|FIRST|NEXT|ROWS|ONLY|JOIN|INNER|LEFT|RIGHT|FULL|OUTER|CROSS|ON|USING|INSERT|INTO|VALUES|UPDATE|SET|DELETE|RETURNING|UNION|INTERSECT|EXCEPT|ALL|CASE|WHEN|THEN|ELSE|END|AS|BEGIN|COMMIT|ROLLBACK|TRANSACTION|SAVEPOINT|GRANT|REVOKE|WITH|RECURSIVE|OVER|PARTITION)\b/i
+					);
+					if (sqlKwMatch) {
+						tokens.push({ text: sqlKwMatch[0], type: 'keyword' });
+						remaining = remaining.slice(sqlKwMatch[0].length);
+						continue;
+					}
+				}
+
+				// 10e. GraphQL Variables, Directives & Scalars
+				if (isGraphQL) {
+					// GraphQL Variables ($id, $input)
+					const gqlVarMatch = remaining.match(/^(\$[\w]+)\b/);
+					if (gqlVarMatch) {
+						tokens.push({ text: gqlVarMatch[0], type: 'macro' });
+						remaining = remaining.slice(gqlVarMatch[0].length);
+						continue;
+					}
+
+					// Directives (@include, @skip, @deprecated, @specifiedBy)
+					const gqlDirMatch = remaining.match(/^(@(?:include|skip|deprecated|specifiedBy))\b/);
+					if (gqlDirMatch) {
+						tokens.push({ text: gqlDirMatch[0], type: 'decorator' });
+						remaining = remaining.slice(gqlDirMatch[0].length);
+						continue;
+					}
+
+					// Core Scalars
+					const gqlScalarMatch = remaining.match(/^(String|Int|Float|Boolean|ID)\b/);
+					if (gqlScalarMatch) {
+						tokens.push({ text: gqlScalarMatch[0], type: 'macro' });
+						remaining = remaining.slice(gqlScalarMatch[0].length);
+						continue;
+					}
+
+					// GraphQL Keywords
+					const gqlKwMatch = remaining.match(
+						/^(query|mutation|subscription|fragment|on|type|input|interface|union|enum|scalar|schema|directive|extend)\b/
+					);
+					if (gqlKwMatch) {
+						tokens.push({ text: gqlKwMatch[0], type: 'keyword' });
+						remaining = remaining.slice(gqlKwMatch[0].length);
+						continue;
+					}
+				}
+
 				// 11. Bash / Shell Variables & CLI Flags
 				if (isBash) {
 					const bashVarMatch = remaining.match(/^(\$\{?[\w#?@*!$-]+\}?)/);
@@ -591,7 +820,7 @@
 			? 'text-neutral-800 dark:text-neutral-200'
 			: 'text-neutral-200'} {wrap ? 'whitespace-pre-wrap' : 'whitespace-pre'}"><code
 			class="language-{language}"
-			>{#each tokenizedLines as lineTokens, lineIdx}{@const lineNum =
+			>{#each tokenizedLines as lineTokens, lineIdx (lineIdx)}{@const lineNum =
 					lineIdx + 1}{@const isHighlighted = highlightLines.includes(lineNum)}<div
 					class="table-row {isHighlighted
 						? '-mx-4 block border-l-2 border-primary-500 bg-primary-500/10 px-4'
@@ -600,7 +829,7 @@
 								? 'text-neutral-400 dark:text-neutral-600'
 								: 'text-neutral-600 dark:text-neutral-500'}">{lineNum}</span
 						>{/if}<span class="table-cell"
-						>{#each lineTokens as token}{#if token.type === 'rune'}<span
+						>{#each lineTokens as token, tokenIdx (tokenIdx)}{#if token.type === 'rune'}<span
 									class="font-bold text-amber-500 dark:text-amber-400">{token.text}</span
 								>{:else if token.type === 'keyword'}<span class="font-semibold text-primary-500"
 									>{token.text}</span