yaxa-svelte 1.11.0 → 1.12.0

package/README.md

@@ -231,18 +231,19 @@ export const POST = createPolarWebhookHandler();
 
 ## 🧩 Component Library
 
-| Category              | Components                                                                                                                                                                                                                                                                                                           |
-| :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **Theming & Studio**  | `<ThemeStudio>`, `theme`, `ACCENT_PALETTES`, `NEUTRAL_PALETTES`, `RADIUS_PRESETS`, Harmonic Radius Multiplier Scale, Chart Palette Series Tokens                                                                                                                                                                     |
-| **AI Primitives**     | `<AiChat>`, `<PromptBar>`, `<AiThought>`, `<AiToolCall>`                                                                                                                                                                                                                                                             |
-| **Charts (Pure SVG)** | `<LineChart>`, `<BarChart>`, `<DonutChart>` (0 external charting dependencies, auto-responsive, dark/light theme aware)                                                                                                                                                                                              |
-| **SaaS Suite**        | `<Gate>`, `<AuthCard>`, `<UserMenu>`, `<OrgSwitcher>`, `<PricingCard>`, `<PricingTable>`, `<SubscriptionCard>`, `useAuth`, `useGate`, `useUpload`                                                                                                                                                                    |
-| **Admin Suite**       | `<AdminDashboard>`, `<RecordDrawer>`, `<DevSandbox>`, `<ImpersonationBanner>`, `createYaxaAdminHook`, `createDrizzleAdmin`                                                                                                                                                                                           |
-| **Elements**          | `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `DataTable` (with Column Visibility & Export), `Chip`, `Meter`, `MetricCard`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`, `CodeBlock` (with Svelte 5 Runes Highlighting), `Tree`, `Timeline`, `Terminal`, `VirtualList`, `Carousel` |
-| **Forms**             | `Form`, `FormField`, `Input`, `InputOTP`, `Textarea`, `Checkbox`, `Switch`, `Select`, `Combobox`, `MultiSelect`, `NumberInput`, `RadioGroup`, `Slider`, `ColorPicker`, `ToggleGroup`, `DatePicker`, `DateRangePicker`, `Dropzone`, `<RichTextEditor>`, `<PhoneInput>`, `<CreditCardInput>`                           |
-| **Layout & Blocks**   | `Container`, `Header`, `Footer`, `Section`, `Card`, `Divider`, `YaxaApp`, `DashboardShell` (with independent sidebar tokens), `ResizablePanels`, Page Blocks (`Hero`, `SaaS Metrics`, `FAQ`, `Testimonials`, `FeatureGrid`)                                                                                          |
-| **Overlays & Nav**    | `Tabs`, `Breadcrumb`, `Pagination`, `CommandPalette` (`⌘K`), `DropdownMenu`, `ContextMenu`, `Modal`, `Drawer`, `Slideover`, `Popover`, `Tooltip` (with `arrow={false}` & `unstyled`), `Alert`, `Accordion`, `NotificationCenter`, `Stepper`                                                                          |
-| **Composables**       | `useAuth`, `useGate`, `useUpload`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`, `useIdle`, `useInfiniteScroll`, `useSortable`                                                                                                                                         |
+| Category               | Components                                                                                                                                                                                                                                                                                                               |
+| :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Theming & Studio**   | `<ThemeStudio>`, `theme`, `ACCENT_PALETTES`, `NEUTRAL_PALETTES`, `RADIUS_PRESETS`, Harmonic Radius Multiplier Scale, Chart Palette Series Tokens                                                                                                                                                                         |
+| **AI Primitives**      | `<AiChat>`, `<PromptBar>`, `<AiThought>`, `<AiToolCall>`                                                                                                                                                                                                                                                                 |
+| **Charts (Pure SVG)**  | `<LineChart>`, `<BarChart>`, `<DonutChart>` (0 external charting dependencies, auto-responsive, dark/light theme aware)                                                                                                                                                                                                  |
+| **SaaS & Auth Suite**  | `<PasskeyUI>` (WebAuthn), `<TwoFactorModal>` (TOTP), `<AuthCard>` (Polymorphic), `<Gate>`, `<UserMenu>`, `<OrgSwitcher>`, `<PricingCard>`, `<PricingTable>`, `<SubscriptionCard>`, `useAuth`, `useGate`, `useUpload`                                                                                                     |
+| **Admin Suite**        | `<AdminDashboard>`, `<RecordDrawer>`, `<DevSandbox>`, `<ImpersonationBanner>`, `createYaxaAdminHook`, `createDrizzleAdmin`                                                                                                                                                                                               |
+| **Elements & Code**    | `<CodeDiff>` (Interactive Diff & Changelog), `<CodeBlock>`, `<DataTable>` (Client & Server Modes), `Button`, `ButtonGroup`, `Badge`, `Avatar`, `AvatarGroup`, `Chip`, `Meter`, `MetricCard`, `Kbd`, `Icon`, `Spinner`, `Progress`, `Skeleton`, `Link`, `Logo`, `Tree`, `Timeline`, `Terminal`, `VirtualList`, `Carousel` |
+| **Forms (Auto-Wired)** | `<Form>`, `<FormField>`, `Input`, `InputOTP`, `Textarea`, `Checkbox`, `Switch`, `Select`, `Combobox`, `MultiSelect`, `NumberInput`, `PhoneInput`, `CreditCardInput`, `RadioGroup`, `Slider`, `ColorPicker`, `ToggleGroup`, `DatePicker`, `DateRangePicker`, `Dropzone`, `<RichTextEditor>`                               |
+| **Layout & Blocks**    | `Container`, `Header`, `Footer`, `Section`, `Card`, `Divider`, `YaxaApp`, `DashboardShell` (with independent sidebar tokens), `ResizablePanels`, Page Blocks (`Hero`, `SaaS Metrics`, `FAQ`, `Testimonials`, `FeatureGrid`)                                                                                              |
+| **Overlays & Nav**     | `Tabs`, `Breadcrumb`, `Pagination`, `CommandPalette` (`⌘K`), `DropdownMenu`, `ContextMenu`, `Modal`, `Drawer`, `Slideover`, `Popover`, `Tooltip` (with `arrow={false}` & `unstyled`), `Alert`, `Accordion`, `NotificationCenter`, `Stepper`                                                                              |
+| **Motion & Actions**   | `springTilt`, `smoothSlide`, `staggerFly`, `autosize`, `clickOutside`, `portal`, `sortableItem`, `infiniteScrollAction`                                                                                                                                                                                                  |
+| **Composables**        | `useAuth`, `useGate`, `useUpload`, `useClipboard`, `useShortcuts`, `useColorMode`, `useToast`, `useMediaQuery`, `useDebounce`, `useIdle`, `useInfiniteScroll`, `useSortable`, `useDataTable`, `useLocale`                                                                                                                |
 
 ---
 

package/dist/actions/index.d.ts

@@ -8,3 +8,5 @@ export { infiniteScroll } from './infiniteScroll';
 export type { InfiniteScrollActionOptions } from './infiniteScroll';
 export { sortableItem } from './sortable';
 export type { SortableItemOptions } from './sortable';
+export { springTilt } from './springTilt';
+export type { SpringTiltOptions } from './springTilt';

package/dist/actions/index.js

@@ -3,3 +3,4 @@ export { clickOutside } from './clickOutside';
 export { portal } from './portal';
 export { infiniteScroll } from './infiniteScroll';
 export { sortableItem } from './sortable';
+export { springTilt } from './springTilt';

package/dist/actions/springTilt.d.ts

@@ -0,0 +1,15 @@
+export interface SpringTiltOptions {
+    max?: number;
+    perspective?: number;
+    scale?: number;
+    stiffness?: number;
+    damping?: number;
+    disabled?: boolean;
+}
+/**
+ * Svelte Action that applies physics-driven 3D spring tilt on hover.
+ */
+export declare function springTilt(node: HTMLElement, options?: SpringTiltOptions): {
+    update(newOptions?: SpringTiltOptions): void;
+    destroy(): void;
+};

package/dist/actions/springTilt.js

@@ -0,0 +1,57 @@
+import { spring } from 'svelte/motion';
+/**
+ * Svelte Action that applies physics-driven 3D spring tilt on hover.
+ */
+export function springTilt(node, options = {}) {
+    let max = options.max ?? 10;
+    let perspective = options.perspective ?? 1000;
+    let scale = options.scale ?? 1.02;
+    const stiffness = options.stiffness ?? 0.12;
+    const damping = options.damping ?? 0.28;
+    let disabled = options.disabled ?? false;
+    const coords = spring({ x: 0, y: 0, scale: 1 }, { stiffness, damping });
+    const unsub = coords.subscribe((val) => {
+        if (disabled) {
+            node.style.transform = '';
+            return;
+        }
+        node.style.transform = `perspective(${perspective}px) rotateX(${val.x.toFixed(2)}deg) rotateY(${val.y.toFixed(2)}deg) scale(${val.scale.toFixed(3)})`;
+        node.style.transformStyle = 'preserve-3d';
+    });
+    function onMouseMove(e) {
+        if (disabled)
+            return;
+        const rect = node.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const centerX = rect.width / 2;
+        const centerY = rect.height / 2;
+        const rotateX = -((y - centerY) / (centerY || 1)) * max;
+        const rotateY = ((x - centerX) / (centerX || 1)) * max;
+        coords.set({ x: rotateX, y: rotateY, scale });
+    }
+    function onMouseLeave() {
+        if (disabled)
+            return;
+        coords.set({ x: 0, y: 0, scale: 1 });
+    }
+    node.addEventListener('mousemove', onMouseMove);
+    node.addEventListener('mouseleave', onMouseLeave);
+    return {
+        update(newOptions = {}) {
+            max = newOptions.max ?? 10;
+            perspective = newOptions.perspective ?? 1000;
+            scale = newOptions.scale ?? 1.02;
+            disabled = Boolean(newOptions.disabled);
+            if (disabled) {
+                node.style.transform = '';
+            }
+        },
+        destroy() {
+            unsub();
+            node.removeEventListener('mousemove', onMouseMove);
+            node.removeEventListener('mouseleave', onMouseLeave);
+            node.style.transform = '';
+        }
+    };
+}

package/dist/actions/springTilt.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/actions/springTilt.test.js

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest';
+import { springTilt } from './springTilt';
+describe('springTilt Action', () => {
+    it('attaches event listeners and updates transform on mousemove', () => {
+        const div = document.createElement('div');
+        Object.defineProperty(div, 'getBoundingClientRect', {
+            value: () => ({
+                left: 0,
+                top: 0,
+                width: 200,
+                height: 200,
+                right: 200,
+                bottom: 200
+            })
+        });
+        const action = springTilt(div, { max: 15, perspective: 800 });
+        expect(div.style.transformStyle).toBe('preserve-3d');
+        // Dispatch mousemove
+        const moveEvent = new MouseEvent('mousemove', {
+            clientX: 150,
+            clientY: 150
+        });
+        div.dispatchEvent(moveEvent);
+        // Cleanup
+        action.destroy();
+        expect(div.style.transform).toBe('');
+    });
+});

package/dist/components/blocks/FAQ.svelte

@@ -25,6 +25,7 @@
 <script lang="ts">
 	import Icon from '../elements/Icon.svelte';
 	import Badge from '../elements/Badge.svelte';
+	import { smoothSlide } from '../../motion/transitions';
 
 	let {
 		title = 'Frequently Asked Questions',
@@ -120,14 +121,15 @@
 					<Icon
 						name="chevron-down"
 						size="sm"
-						class="ml-4 shrink-0 text-neutral-400 transition-transform duration-200 {isOpen
-							? 'rotate-180'
+						class="ml-4 shrink-0 text-neutral-400 transition-transform duration-250 ease-out {isOpen
+							? 'rotate-180 text-primary-600 dark:text-primary-400'
 							: ''}"
 					/>
 				</button>
 
 				{#if isOpen}
 					<div
+						transition:smoothSlide={{ duration: 220 }}
 						class="border-t border-neutral-100/60 px-5 pt-3 pb-5 text-xs leading-relaxed text-neutral-600 dark:border-neutral-800/60 dark:text-neutral-400"
 					>
 						{item.answer}

package/dist/components/blocks/FeatureGrid.svelte

@@ -21,6 +21,7 @@
 		badge?: string;
 		features?: FeatureItem[];
 		columns?: 2 | 3 | 4;
+		interactive?: boolean;
 		class?: string;
 	};
 </script>
@@ -29,6 +30,8 @@
 	import Icon from '../elements/Icon.svelte';
 	import Badge from '../elements/Badge.svelte';
 	import Card from '../layout/Card.svelte';
+	import { springTilt } from '../../actions/springTilt';
+	import { staggerFly } from '../../motion/transitions';
 
 	let {
 		title = 'Everything you need to ship faster',
@@ -36,6 +39,7 @@
 		badge = 'Features',
 		features = [],
 		columns = 3,
+		interactive = true,
 		class: className = ''
 	}: FeatureGridProps = $props();
 
@@ -76,51 +80,57 @@
 	{/if}
 
 	<div class="grid gap-6 {gridCols}">
-		{#each features as feature (feature.id)}
-			<Card
-				class="group relative flex flex-col justify-between p-6 transition-all duration-200 hover:-translate-y-1 hover:shadow-xl dark:hover:border-neutral-700"
+		{#each features as feature, idx (feature.id)}
+			<div
+				in:staggerFly={{ index: idx, y: 24, duration: 320 }}
+				use:springTilt={{ disabled: !interactive, max: 8, scale: 1.015 }}
+				class="h-full"
 			>
-				<div>
-					<!-- Icon & Tag Row -->
-					<div class="mb-4 flex items-center justify-between">
-						{#if feature.icon}
-							<div
-								class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-50 text-primary-600 transition-colors group-hover:bg-primary-600 group-hover:text-white dark:bg-primary-950/60 dark:text-primary-400"
-							>
-								<Icon name={feature.icon} size="sm" />
-							</div>
-						{/if}
+				<Card
+					class="group relative flex h-full flex-col justify-between p-6 transition-all duration-200 hover:shadow-xl dark:hover:border-neutral-700"
+				>
+					<div>
+						<!-- Icon & Tag Row -->
+						<div class="mb-4 flex items-center justify-between">
+							{#if feature.icon}
+								<div
+									class="flex h-10 w-10 items-center justify-center rounded-xl bg-primary-50 text-primary-600 transition-colors group-hover:bg-primary-600 group-hover:text-white dark:bg-primary-950/60 dark:text-primary-400"
+								>
+									<Icon name={feature.icon} size="sm" />
+								</div>
+							{/if}
 
-						{#if feature.tag}
-							<Badge size="xs" variant="subtle" color="primary">
-								{feature.tag}
-							</Badge>
-						{/if}
-					</div>
+							{#if feature.tag}
+								<Badge size="xs" variant="subtle" color="primary">
+									{feature.tag}
+								</Badge>
+							{/if}
+						</div>
 
-					<!-- Title -->
-					<h3 class="text-base font-bold text-neutral-900 dark:text-white">
-						{feature.title}
-					</h3>
+						<!-- Title -->
+						<h3 class="text-base font-bold text-neutral-900 dark:text-white">
+							{feature.title}
+						</h3>
 
-					<!-- Description -->
-					<p class="mt-2 text-xs leading-relaxed text-neutral-600 dark:text-neutral-400">
-						{feature.description}
-					</p>
-				</div>
-
-				{#if feature.href}
-					<div class="mt-4 border-t border-neutral-100 pt-3 dark:border-neutral-800/80">
-						<a
-							href={feature.href}
-							class="inline-flex items-center gap-1 text-xs font-semibold text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
-						>
-							Learn more
-							<Icon name="arrow-right" size="xs" />
-						</a>
+						<!-- Description -->
+						<p class="mt-2 text-xs leading-relaxed text-neutral-600 dark:text-neutral-400">
+							{feature.description}
+						</p>
 					</div>
-				{/if}
-			</Card>
+
+					{#if feature.href}
+						<div class="mt-4 border-t border-neutral-100 pt-3 dark:border-neutral-800/80">
+							<a
+								href={feature.href}
+								class="inline-flex items-center gap-1 text-xs font-semibold text-primary-600 transition-colors hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
+							>
+								Learn more
+								<Icon name="arrow-right" size="xs" />
+							</a>
+						</div>
+					{/if}
+				</Card>
+			</div>
 		{/each}
 	</div>
 </section>

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

@@ -15,6 +15,7 @@ export type FeatureGridProps = VariantProps<typeof featureGridVariants> & {
     badge?: string;
     features?: FeatureItem[];
     columns?: 2 | 3 | 4;
+    interactive?: boolean;
     class?: string;
 };
 declare const FeatureGrid: import("svelte").Component<FeatureGridProps, {}, "">;

package/dist/components/blocks/Testimonials.svelte

@@ -21,6 +21,7 @@
 		badge?: string;
 		items?: TestimonialItem[];
 		columns?: 1 | 2 | 3;
+		interactive?: boolean;
 		class?: string;
 	};
 </script>
@@ -30,6 +31,8 @@
 	import Card from '../layout/Card.svelte';
 	import Badge from '../elements/Badge.svelte';
 	import Avatar from '../elements/Avatar.svelte';
+	import { springTilt } from '../../actions/springTilt';
+	import { staggerFly } from '../../motion/transitions';
 
 	let {
 		title = 'Loved by solo founders & engineering teams',
@@ -37,6 +40,7 @@
 		badge = 'Social Proof',
 		items = [],
 		columns = 3,
+		interactive = true,
 		class: className = ''
 	}: TestimonialsProps = $props();
 
@@ -77,42 +81,52 @@
 	{/if}
 
 	<div class="grid gap-6 {gridCols}">
-		{#each items as item (item.id)}
-			<Card class="flex flex-col justify-between p-6 transition-all duration-200 hover:shadow-lg">
-				<div>
-					<!-- Star Rating -->
-					{#if item.rating}
-						<div class="mb-4 flex items-center gap-1 text-amber-400">
-							{#each Array.from({ length: item.rating }, (_, i) => i) as starIndex (starIndex)}
-								<Icon name="star" size="xs" />
-							{/each}
-						</div>
-					{/if}
+		{#each items as item, idx (item.id)}
+			<div
+				in:staggerFly={{ index: idx, y: 20, duration: 300 }}
+				use:springTilt={{ disabled: !interactive, max: 6, scale: 1.01 }}
+				class="h-full"
+			>
+				<Card
+					class="flex h-full flex-col justify-between p-6 transition-all duration-200 hover:shadow-lg dark:hover:border-neutral-700"
+				>
+					<div>
+						<!-- Star Rating -->
+						{#if item.rating}
+							<div class="mb-4 flex items-center gap-1 text-amber-400">
+								{#each Array.from({ length: item.rating }, (_, i) => i) as starIndex (starIndex)}
+									<Icon name="star" size="xs" />
+								{/each}
+							</div>
+						{/if}
 
-					<!-- Quote Text -->
-					<blockquote class="text-sm leading-relaxed text-neutral-700 italic dark:text-neutral-300">
-						"{item.quote}"
-					</blockquote>
-				</div>
+						<!-- Quote Text -->
+						<blockquote
+							class="text-sm leading-relaxed text-neutral-700 italic dark:text-neutral-300"
+						>
+							"{item.quote}"
+						</blockquote>
+					</div>
 
-				<!-- Author Info -->
-				<div
-					class="mt-6 flex items-center gap-3 border-t border-neutral-100 pt-4 dark:border-neutral-800"
-				>
-					<Avatar src={item.avatar} alt={item.author} size="sm" />
+					<!-- Author Info -->
+					<div
+						class="mt-6 flex items-center gap-3 border-t border-neutral-100 pt-4 dark:border-neutral-800"
+					>
+						<Avatar src={item.avatar} alt={item.author} size="sm" />
 
-					<div class="min-w-0 flex-1">
-						<div class="truncate text-xs font-semibold text-neutral-900 dark:text-white">
-							{item.author}
-						</div>
-						{#if item.role || item.company}
-							<div class="truncate text-[11px] text-neutral-500 dark:text-neutral-400">
-								{item.role}{item.role && item.company ? ' • ' : ''}{item.company}
+						<div class="min-w-0 flex-1">
+							<div class="truncate text-xs font-semibold text-neutral-900 dark:text-white">
+								{item.author}
 							</div>
-						{/if}
+							{#if item.role || item.company}
+								<div class="truncate text-[11px] text-neutral-500 dark:text-neutral-400">
+									{item.role}{item.role && item.company ? ' • ' : ''}{item.company}
+								</div>
+							{/if}
+						</div>
 					</div>
-				</div>
-			</Card>
+				</Card>
+			</div>
 		{/each}
 	</div>
 </section>

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

@@ -15,6 +15,7 @@ export type TestimonialsProps = VariantProps<typeof testimonialsVariants> & {
     badge?: string;
     items?: TestimonialItem[];
     columns?: 1 | 2 | 3;
+    interactive?: boolean;
     class?: string;
 };
 declare const Testimonials: import("svelte").Component<TestimonialsProps, {}, "">;