yaxa-svelte 1.15.1 → 2.0.0

package/README.md

@@ -3,12 +3,12 @@
 # Yaxa
 
 **The Intuitive Svelte UI & Solo SaaS Library**  
-_Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2.7+ & Svelte 5 with Built-in SEO & SaaS Parity._
+_Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2 & 3 & Svelte 5 with Built-in SEO & SaaS Parity._
 
 [![npm version](https://img.shields.io/npm/v/yaxa-svelte.svg?color=CB3837&logo=npm)](https://www.npmjs.com/package/yaxa-svelte)
 [![npm downloads](https://img.shields.io/npm/dm/yaxa-svelte.svg?color=blue)](https://www.npmjs.com/package/yaxa-svelte)
 [![Svelte 5](https://img.shields.io/badge/Svelte-5.0+-FF3E00?style=flat&logo=svelte&logoColor=white)](https://svelte.dev)
-[![SvelteKit](https://img.shields.io/badge/SvelteKit-2.7+-FF3E00?style=flat&logo=svelte&logoColor=white)](https://kit.svelte.dev)
+[![SvelteKit](https://img.shields.io/badge/SvelteKit-2_%26_3-FF3E00?style=flat&logo=svelte&logoColor=white)](https://kit.svelte.dev)
 [![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)
@@ -21,7 +21,7 @@ _Nuxt UI v4 & Nuxt UI Pro Equivalent for SvelteKit 2.7+ & Svelte 5 with Built-in
 
 ## 🌟 Overview
 
-**Yaxa** brings the full developer experience, visual elegance, and full-stack toolkit of **Nuxt UI** and the **Nuxt SEO + SaaS ecosystem** to **SvelteKit 2.7+** and **Svelte 5**.
+**Yaxa** brings the full developer experience, visual elegance, and full-stack toolkit of **Nuxt UI** and the **Nuxt SEO + SaaS ecosystem** to **SvelteKit 2 & 3** and **Svelte 5**.
 
 - 🎨 **Tailwind CSS v4 Native Tokens**: Styled with `@theme` variables; harmonic radius scale (`--radius-xs` to `--radius-4xl`), chart palette tokens (`--color-chart-1` to `--color-chart-5`), atmospheric utilities (`yaxa-grain` & `yaxa-mesh-glow`), and auto-adaptive scrollbars.
 - 🎛️ **Visual Web Theme Studio**: Interactive runtime palette designer (`/theme` and `<ThemeStudio />`) with live sandbox preview and 1-click token export.
@@ -115,12 +115,12 @@ Import `yaxa-svelte/yaxa.css` and wrap your app in `<YaxaApp>`:
 <script lang="ts">
 	import 'yaxa-svelte/yaxa.css';
 	import { YaxaApp } from 'yaxa-svelte';
-	import { siteConfig } from '../site.config';
+	import { siteConfig } from '../site.config'; // or $lib/site.config
 
-	let { children } = $props();
+	let { data, children } = $props();
 </script>
 
-<YaxaApp config={siteConfig}>
+<YaxaApp config={siteConfig} user={data?.user}>
 	{@render children()}
 </YaxaApp>
 ```
@@ -136,6 +136,23 @@ If your project already imports Tailwind in `src/app.css`, import the standalone
 @source '../node_modules/yaxa-svelte/dist/**/*.{js,svelte}';
 ```
 
+Then in `src/routes/+layout.svelte`, simply import `../app.css` instead of `yaxa.css`:
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script lang="ts">
+	import '../app.css';
+	import { YaxaApp } from 'yaxa-svelte';
+	import { siteConfig } from '../site.config';
+
+	let { data, children } = $props();
+</script>
+
+<YaxaApp config={siteConfig} user={data?.user}>
+	{@render children()}
+</YaxaApp>
+```
+
 ---
 
 ## 🛡️ 1-Line Server SEO & Auth Automation
@@ -189,8 +206,7 @@ Dual-mode Drizzle ORM administration and introspection suite with live CRUD tabl
 // Approach A (Zero-File Route Interceptor in src/hooks.server.ts)
 import { sequence } from '@sveltejs/kit/hooks';
 import { createYaxaAdminHook } from 'yaxa-svelte/admin';
-import { db } from '$lib/server/db';
-import * as schema from '$lib/server/db/schema-pg';
+import { db, schemaPg as schema } from 'yaxa-svelte/db'; // or your project's $lib/server/db
 
 export const handle = sequence(createYaxaAdminHook({ db, schema, path: '/admin' }));
 ```
@@ -226,18 +242,20 @@ export const POST = createPolarWebhookHandler();
 
 ## 📦 Subpath Exports Architecture
 
-| Subpath                | Description                                                                                                                               |
-| :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
-| `yaxa-svelte`          | Core UI Primitives, SEO Components, `<Gate />`, Theme System & Composables (`useGate`, `useUpload`, `useToast`, `useClipboard`, etc.)     |
-| `yaxa-svelte/admin`    | Drizzle ORM Schema Introspection, `<AdminDashboard />`, `createYaxaAdminHook`, `createDrizzleAdmin`, `<DevSandbox />`, `<RecordDrawer />` |
-| `yaxa-svelte/server`   | Universal Server Hooks, SEO endpoints, Drizzle DB drivers, Cloud Storage handlers, and Email dispatch                                     |
-| `yaxa-svelte/auth`     | Better-Auth client & server integration (`useAuth`, `<AuthCard />`, `<PasskeyUI />`, `<TwoFactorModal />`, `createYaxaAuth`)              |
-| `yaxa-svelte/db`       | Multi-dialect Drizzle ORM clients & schemas for Neon (PostgreSQL) and Turso (SQLite/LibSQL)                                               |
-| `yaxa-svelte/polar`    | Polar.sh billing, customer portal sessions, and webhook synchronization                                                                   |
-| `yaxa-svelte/email`    | Resend transactional email templates with automatic development console fallback                                                          |
-| `yaxa-svelte/storage`  | AWS S3 and Cloudflare R2 presigned upload URL generators                                                                                  |
-| `yaxa-svelte/vite`     | Turnkey Vite plugin (`yaxa()`)                                                                                                            |
-| `yaxa-svelte/yaxa.css` | Tailwind CSS v4 design tokens and base stylesheet                                                                                         |
+| Subpath                 | Description                                                                                                                               |
+| :---------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
+| `yaxa-svelte`           | Core UI Primitives, SEO Components, `<Gate />`, Theme System & Composables (`useGate`, `useUpload`, `useToast`, `useClipboard`, etc.)     |
+| `yaxa-svelte/admin`     | Drizzle ORM Schema Introspection, `<AdminDashboard />`, `createYaxaAdminHook`, `createDrizzleAdmin`, `<DevSandbox />`, `<RecordDrawer />` |
+| `yaxa-svelte/server`    | Universal Server Hooks, SEO endpoints, Drizzle DB drivers, Cloud Storage handlers, and Email dispatch                                     |
+| `yaxa-svelte/auth`      | Better-Auth client & server integration (`useAuth`, `<AuthCard />`, `<PasskeyUI />`, `<TwoFactorModal />`, `createYaxaAuth`)              |
+| `yaxa-svelte/db`        | Multi-dialect Drizzle ORM clients & schemas for Neon (PostgreSQL) and Turso (SQLite/LibSQL)                                               |
+| `yaxa-svelte/polar`     | Polar.sh billing, customer portal sessions, and webhook synchronization                                                                   |
+| `yaxa-svelte/email`     | Resend transactional email templates with automatic development console fallback                                                          |
+| `yaxa-svelte/storage`   | AWS S3 and Cloudflare R2 presigned upload URL generators                                                                                  |
+| `yaxa-svelte/testing`   | Test mocks & utilities (`createMockSiteConfig`, `createMockUser`, `createTestWrapperProps`)                                               |
+| `yaxa-svelte/vite`      | Turnkey Vite plugin (`yaxa()`)                                                                                                            |
+| `yaxa-svelte/yaxa.css`  | Standalone turnkey Tailwind CSS v4 stylesheet with base styling, `@theme`, and scrollbars                                                 |
+| `yaxa-svelte/theme.css` | Pure Tailwind CSS v4 design tokens, `:root` variables, and harmonic radius scale without `@import 'tailwindcss'`                          |
 
 ---
 

package/dist/actions/infiniteScroll.js

@@ -1,4 +1,4 @@
-import { browser } from '$app/environment';
+import { browser } from '$app/env';
 /**
  * Headless Svelte Action to trigger loading callbacks when scrolling near the edges.
  *

package/dist/admin/handler.d.ts

@@ -39,8 +39,8 @@ export declare class DrizzleAdminService {
  * Example:
  * ```ts
  * // src/routes/admin/+page.server.ts
- * import { db } from '../server/db';
- * import * as schema from '../server/db/schema-pg';
+ * import { db } from '../server/db/index.js';
+ * import * as schema from '../server/db/schema-pg.js';
  * import { createDrizzleAdmin } from 'yaxa-svelte/admin';
  *
  * export const { load, actions } = createDrizzleAdmin({ db, schema });

package/dist/admin/handler.js

@@ -232,8 +232,8 @@ export class DrizzleAdminService {
  * Example:
  * ```ts
  * // src/routes/admin/+page.server.ts
- * import { db } from '../server/db';
- * import * as schema from '../server/db/schema-pg';
+ * import { db } from '../server/db/index.js';
+ * import * as schema from '../server/db/schema-pg.js';
  * import { createDrizzleAdmin } from 'yaxa-svelte/admin';
  *
  * export const { load, actions } = createDrizzleAdmin({ db, schema });

package/dist/admin/hook.d.ts

@@ -1,4 +1,4 @@
-import type { Handle } from '@sveltejs/kit';
+import type { Handle } from '@sveltejs/kit/hooks';
 import type { YaxaAdminHookOptions } from './types';
 /**
  * Creates a SvelteKit Handle hook for zero-file route interception and automatic Drizzle admin dashboard.
@@ -8,8 +8,8 @@ import type { YaxaAdminHookOptions } from './types';
  * // src/hooks.server.ts
  * import { sequence } from '@sveltejs/kit/hooks';
  * import { createYaxaAdminHook } from 'yaxa-svelte/admin';
- * import { db } from '../server/db';
- * import * as schema from '../server/db/schema-pg';
+ * import { db } from '../server/db/index.js';
+ * import * as schema from '../server/db/schema-pg.js';
  *
  * export const handle = sequence(
  *   createYaxaAdminHook({ db, schema, path: '/admin' })

package/dist/admin/hook.js

@@ -9,8 +9,8 @@ import { createPresignedUploadUrl } from '../server/storage/index';
  * // src/hooks.server.ts
  * import { sequence } from '@sveltejs/kit/hooks';
  * import { createYaxaAdminHook } from 'yaxa-svelte/admin';
- * import { db } from '../server/db';
- * import * as schema from '../server/db/schema-pg';
+ * import { db } from '../server/db/index.js';
+ * import * as schema from '../server/db/schema-pg.js';
  *
  * export const handle = sequence(
  *   createYaxaAdminHook({ db, schema, path: '/admin' })

package/dist/components/blocks/FAQ.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 
 	export interface FAQItem {
 		id: string | number;

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 export interface FAQItem {
     id: string | number;
     question: string;

package/dist/components/blocks/FeatureGrid.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 	import type { IconSource } from '../elements/Icon.svelte';
 
 	export interface FeatureItem {

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 import type { IconSource } from '../elements/Icon.svelte';
 export interface FeatureItem {
     id: string | number;

package/dist/components/blocks/Testimonials.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 
 	export interface TestimonialItem {
 		id: string | number;

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 export interface TestimonialItem {
     id: string | number;
     quote: string;

package/dist/components/elements/Button.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
 	import type { IconSource } from './Icon.svelte';

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 import type { Snippet } from 'svelte';
 import type { IconSource } from './Icon.svelte';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{

package/dist/components/elements/Carousel.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 
 	export const carouselVariants = tv({
@@ -127,12 +127,12 @@
 		</div>
 	{:else}
 		<!-- Viewport -->
-		<div class={slots.viewport()}>
+		<div class="{slots.viewport()} yaxa-carousel-viewport">
 			<div
-				class="flex w-full transition-transform duration-500 ease-out"
-				style="transform: translateX(-{currentIndex * 100}%);"
+				class="yaxa-carousel-track flex w-full transition-transform duration-500 ease-out"
+				style="--yaxa-carousel-offset: -{currentIndex * 100}%;"
 			>
-				{#each items as slide, index}
+				{#each items as slide, index (index)}
 					<div
 						class="min-w-full flex-shrink-0"
 						role="group"
@@ -198,3 +198,15 @@
 		{/if}
 	{/if}
 </div>
+
+<style>
+	.yaxa-carousel-viewport {
+		touch-action: pan-y;
+		-webkit-overflow-scrolling: touch;
+	}
+
+	.yaxa-carousel-track {
+		transform: translate3d(var(--yaxa-carousel-offset, 0%), 0, 0);
+		will-change: transform;
+	}
+</style>

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

@@ -1,10 +1,10 @@
-import { type VariantProps } from '../../utils/cn';
+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 | {
-            root?: 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;
@@ -15,8 +15,8 @@ export declare const carouselVariants: import("tailwind-variants").TVReturnType<
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            root?: 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;
@@ -35,8 +35,8 @@ export declare const carouselVariants: import("tailwind-variants").TVReturnType<
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            root?: 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;

package/dist/components/elements/CodeBlock.svelte

@@ -243,7 +243,7 @@
 <script lang="ts">
 	import Button from './Button.svelte';
 	import Icon from './Icon.svelte';
-	import { useToast } from '../../composables/useToast.svelte';
+	import { useToast } from '../../composables/useToast.svelte.js';
 
 	let {
 		code,

package/dist/components/elements/CodeDiff.svelte

@@ -156,7 +156,7 @@
 	import Button from './Button.svelte';
 	import Icon from './Icon.svelte';
 	import Badge from './Badge.svelte';
-	import { useToast } from '../../composables/useToast.svelte';
+	import { useToast } from '../../composables/useToast.svelte.js';
 
 	let {
 		original = '',

package/dist/components/elements/CodeDiff.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { renderComponent } from '../../testing';
+import { renderComponent } from '../../testing/index.js';
 import CodeDiff, { computeDiff } from './CodeDiff.svelte';
 describe('CodeDiff Component & Diff Algorithm', () => {
     it('should correctly compute line additions, deletions, and unchanged lines', () => {

package/dist/components/elements/DataTable.dom.test.js

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest';
 import { flushSync } from 'svelte';
-import { renderComponent } from '../../testing';
+import { renderComponent } from '../../testing/index.js';
 import DataTable, {} from './DataTable.svelte';
 const testData = [
     { id: '1', name: 'Alice Smith', role: 'Engineer', score: 95 },

package/dist/components/elements/EmptyState.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 	import type { IconSource } from './Icon.svelte';
 

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 import type { Snippet } from 'svelte';
 import type { IconSource } from './Icon.svelte';
 export declare const emptyStateVariants: import("tailwind-variants").TVReturnType<{

package/dist/components/elements/Icon.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv } from '../../utils/cn';
+	import { tv } from '../../utils/cn.js';
 	import type { Component, Snippet } from 'svelte';
 
 	export const iconVariants = tv({

package/dist/components/elements/Icon.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { renderComponent } from '../../testing';
+import { renderComponent } from '../../testing/index.js';
 import Icon from './Icon.svelte';
 describe('Icon Component', () => {
     it('renders built-in SVG icons by string name', () => {

package/dist/components/elements/Kbd.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 
 	export const kbdVariants = tv({
@@ -57,7 +57,7 @@
 </script>
 
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { browser } from '$app/env';
 
 	let { value, keys, combo, size = 'sm', class: className = '', children }: KbdProps = $props();
 

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 import type { Snippet } from 'svelte';
 export declare const kbdVariants: import("tailwind-variants").TVReturnType<{
     size: {

package/dist/components/elements/MetricCard.svelte

@@ -3,7 +3,7 @@
 	import Icon, { type IconSource } from './Icon.svelte';
 	import Badge from './Badge.svelte';
 	import Skeleton from './Skeleton.svelte';
-	import { cn } from '../../utils/cn';
+	import { cn } from '../../utils/cn.js';
 
 	interface Props {
 		title: string;

package/dist/components/elements/Progress.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 
 	export const progressVariants = tv({
 		base: 'relative w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-800',
@@ -47,6 +47,7 @@
 
 <div
 	class={progressVariants({ size, color, class: className })}
+	style="--yaxa-progress: {percentage ?? 0}%;"
 	role="progressbar"
 	aria-valuenow={value}
 	aria-valuemin={0}
@@ -54,10 +55,16 @@
 >
 	{#if percentage !== undefined}
 		<div
-			class="h-full rounded-full transition-all duration-300 ease-in-out"
-			style="width: {percentage}%"
+			class="yaxa-progress-bar h-full rounded-full transition-[width] duration-300 ease-in-out"
 		></div>
 	{:else}
 		<div class="h-full w-1/3 animate-pulse rounded-full"></div>
 	{/if}
 </div>
+
+<style>
+	.yaxa-progress-bar {
+		width: var(--yaxa-progress, 0%);
+		will-change: width;
+	}
+</style>

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 export declare const progressVariants: import("tailwind-variants").TVReturnType<{
     size: {
         xs: "h-1";

package/dist/components/elements/Skeleton.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, cn, type VariantProps } from '../../utils/cn';
+	import { tv, cn, type VariantProps } from '../../utils/cn.js';
 
 	export const skeletonVariants = tv({
 		base: 'relative overflow-hidden bg-neutral-200 select-none motion-reduce:animate-none dark:bg-neutral-800',

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         pulse: "animate-pulse";

package/dist/components/elements/Skeleton.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { renderComponent } from '../../testing';
+import { renderComponent } from '../../testing/index.js';
 import Skeleton, { skeletonVariants } from './Skeleton.svelte';
 describe('Skeleton Component (DOM & Variants)', () => {
     it('generates pulse animation classes by default', () => {

package/dist/components/elements/SortableList.svelte

@@ -11,7 +11,7 @@
 <script lang="ts" generics="T extends Record<string, any> | string | number">
 	import type { Snippet } from 'svelte';
 	import Icon from './Icon.svelte';
-	import { useSortable } from '../../composables/useSortable.svelte';
+	import { useSortable } from '../../composables/useSortable.svelte.js';
 
 	interface Props extends SortableListProps<T> {
 		children?: Snippet<

package/dist/components/elements/Terminal.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 
 	export interface TerminalLine {
 		command?: string;
@@ -22,7 +22,7 @@
 
 <script lang="ts">
 	import Icon from './Icon.svelte';
-	import { useClipboard } from '../../composables/useClipboard.svelte';
+	import { useClipboard } from '../../composables/useClipboard.svelte.js';
 
 	let {
 		title = 'bash',

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 export interface TerminalLine {
     command?: string;
     output?: string;

package/dist/components/elements/Timeline.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 	import type { IconSource } from './Icon.svelte';
 

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 import type { Snippet } from 'svelte';
 import type { IconSource } from './Icon.svelte';
 export interface TimelineItem {

package/dist/components/elements/Tree.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 	import type { IconSource } from './Icon.svelte';
 
 	export interface TreeNode {

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 import type { IconSource } from './Icon.svelte';
 export interface TreeNode {
     id: string;

package/dist/components/elements/VirtualList.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 
 	export const virtualListVariants = tv({
@@ -73,8 +73,8 @@
 </script>
 
 <div
-	class={virtualListVariants({ bordered, class: className })}
-	style="height: {heightStyle};"
+	class="{virtualListVariants({ bordered, class: className })} h-[var(--yaxa-vl-height)]"
+	style="--yaxa-vl-height: {heightStyle};"
 	onscroll={onScroll}
 	role="feed"
 	aria-busy={false}
@@ -91,9 +91,12 @@
 		</div>
 	{:else}
 		<!-- Total virtual space height holder -->
-		<div class="relative w-full" style="height: {totalHeight}px;">
+		<div class="relative h-[var(--yaxa-vl-total)] w-full" style="--yaxa-vl-total: {totalHeight}px;">
 			{#each visibleItems as { data, index, top } (index)}
-				<div class="absolute right-0 left-0 w-full" style="top: {top}px; height: {itemHeight}px;">
+				<div
+					class="yaxa-virtual-row absolute right-0 left-0 h-[var(--yaxa-vl-item-height)] w-full"
+					style="--yaxa-vl-top: {top}px; --yaxa-vl-item-height: {itemHeight}px;"
+				>
 					{#if item}
 						{@render item(data, index)}
 					{:else}
@@ -108,3 +111,12 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	.yaxa-virtual-row {
+		top: 0;
+		transform: translate3d(0, var(--yaxa-vl-top, 0px), 0);
+		will-change: transform;
+		contain: layout size;
+	}
+</style>

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 import type { Snippet } from 'svelte';
 export declare const virtualListVariants: import("tailwind-variants").TVReturnType<{
     bordered: {

package/dist/components/forms/Combobox.dom.test.js

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { renderComponent } from '../../testing';
+import { renderComponent } from '../../testing/index.js';
 import Combobox, { comboboxVariants } from './Combobox.svelte';
 const testOptions = [
     { value: 'svelte', label: 'Svelte 5' },

package/dist/components/forms/Combobox.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import { tv, type VariantProps } from '../../utils/cn';
+	import { tv, type VariantProps } from '../../utils/cn.js';
 	import type { Snippet } from 'svelte';
 	import type { IconSource } from '../elements/Icon.svelte';
 

package/dist/components/forms/Combobox.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from '../../utils/cn';
+import { type VariantProps } from '../../utils/cn.js';
 import type { Snippet } from 'svelte';
 import type { IconSource } from '../elements/Icon.svelte';
 export interface ComboboxOption {

package/dist/components/forms/DatePicker.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Popover } from 'bits-ui';
 	import Icon from '../elements/Icon.svelte';
-	import { cn } from '../../utils/cn';
+	import { cn } from '../../utils/cn.js';
 
 	export interface DatePreset {
 		label: string;