yaxa-svelte 2.8.0 → 2.9.0

package/dist/components/content/Steps.svelte

@@ -0,0 +1,146 @@
+<script module lang="ts">
+	import { tv, cn, type VariantProps } from '../../utils/cn.js';
+	import type { Snippet } from 'svelte';
+	import type { IconSource } from '../elements/Icon.svelte';
+
+	export const stepsVariants = tv({
+		base: 'not-prose relative my-6 flex flex-col',
+		variants: {
+			size: {
+				sm: 'gap-5',
+				md: 'gap-7',
+				lg: 'gap-9'
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	});
+
+	export interface StepGuideItem {
+		title: string;
+		description?: string;
+		code?: string;
+		language?: string;
+		filename?: string;
+		badge?: string;
+		icon?: IconSource;
+	}
+
+	export interface StepsSlots {
+		root?: string;
+		item?: string;
+		indicator?: string;
+		line?: string;
+		content?: string;
+		title?: string;
+		description?: string;
+		code?: string;
+	}
+
+	export type StepsProps = VariantProps<typeof stepsVariants> & {
+		items?: StepGuideItem[];
+		level?: 'h2' | 'h3' | 'h4';
+		class?: string;
+		ui?: StepsSlots;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import CodeBlock from '../elements/CodeBlock.svelte';
+	import Badge from '../elements/Badge.svelte';
+	import Icon from '../elements/Icon.svelte';
+
+	let {
+		items = [],
+		level = 'h3',
+		size = 'md',
+		class: className = '',
+		ui,
+		children
+	}: StepsProps = $props();
+</script>
+
+<div data-slot="root" role="list" class={cn(stepsVariants({ size, class: className }), ui?.root)}>
+	{#if items.length > 0}
+		{#each items as item, index (item.title + '-' + index)}
+			{@const isLast = index === items.length - 1}
+			<div data-slot="item" role="listitem" class={cn('relative flex gap-4', ui?.item)}>
+				<!-- Vertical Connector Line -->
+				{#if !isLast}
+					<div
+						data-slot="line"
+						aria-hidden="true"
+						class={cn(
+							'absolute top-8 -bottom-7 left-3.5 w-px bg-neutral-200 dark:bg-neutral-800',
+							ui?.line
+						)}
+					></div>
+				{/if}
+
+				<!-- Number / Icon Indicator -->
+				<div
+					data-slot="indicator"
+					class={cn(
+						'relative z-10 flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-neutral-200 bg-neutral-100 text-xs font-bold text-neutral-800 shadow-2xs dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200',
+						ui?.indicator
+					)}
+				>
+					{#if item.icon}
+						<Icon name={item.icon} size="xs" />
+					{:else}
+						<span>{index + 1}</span>
+					{/if}
+				</div>
+
+				<!-- Step Content -->
+				<div data-slot="content" class={cn('min-w-0 flex-1 space-y-2 pt-0.5', ui?.content)}>
+					<div class="flex flex-wrap items-center gap-2">
+						<svelte:element
+							this={level}
+							data-slot="title"
+							class={cn(
+								'font-semibold tracking-tight text-neutral-900 dark:text-neutral-100',
+								size === 'sm' ? 'text-sm' : size === 'lg' ? 'text-lg' : 'text-base',
+								ui?.title
+							)}
+						>
+							{item.title}
+						</svelte:element>
+
+						{#if item.badge}
+							<Badge size="sm" variant="subtle" color="primary">{item.badge}</Badge>
+						{/if}
+					</div>
+
+					{#if item.description}
+						<p
+							data-slot="description"
+							class={cn(
+								'text-sm leading-relaxed text-neutral-600 dark:text-neutral-400',
+								ui?.description
+							)}
+						>
+							{item.description}
+						</p>
+					{/if}
+
+					{#if item.code}
+						<div data-slot="code" class={cn('pt-1', ui?.code)}>
+							<CodeBlock
+								code={item.code}
+								language={item.language ?? 'bash'}
+								filename={item.filename}
+							/>
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	{:else if children}
+		<div class="relative border-l border-neutral-200 pl-6 dark:border-neutral-800">
+			{@render children()}
+		</div>
+	{/if}
+</div>

package/dist/components/content/Steps.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type VariantProps } from '../../utils/cn.js';
+import type { Snippet } from 'svelte';
+import type { IconSource } from '../elements/Icon.svelte';
+export declare const stepsVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "not-prose relative my-6 flex flex-col", undefined, undefined, undefined>;
+export interface StepGuideItem {
+    title: string;
+    description?: string;
+    code?: string;
+    language?: string;
+    filename?: string;
+    badge?: string;
+    icon?: IconSource;
+}
+export interface StepsSlots {
+    root?: string;
+    item?: string;
+    indicator?: string;
+    line?: string;
+    content?: string;
+    title?: string;
+    description?: string;
+    code?: string;
+}
+export type StepsProps = VariantProps<typeof stepsVariants> & {
+    items?: StepGuideItem[];
+    level?: 'h2' | 'h3' | 'h4';
+    class?: string;
+    ui?: StepsSlots;
+    children?: Snippet;
+};
+declare const Steps: import("svelte").Component<StepsProps, {}, "">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;

package/dist/components/content/content.test.d.ts

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

package/dist/components/content/content.test.js

@@ -0,0 +1,115 @@
+import { describe, it, expect } from 'vitest';
+import { flushSync } from 'svelte';
+import { renderComponent } from '../../testing/index.js';
+import Callout, { calloutVariants } from './Callout.svelte';
+import CodeGroup, { codeGroupVariants } from './CodeGroup.svelte';
+import Steps, { stepsVariants } from './Steps.svelte';
+describe('Docs & Content Primitives (Callout, CodeGroup, Steps)', () => {
+    describe('Callout', () => {
+        it('generates semantic variant classes for note, tip, warning, and danger', () => {
+            expect(calloutVariants({ type: 'note' })).toContain('border-l-sky-500');
+            expect(calloutVariants({ type: 'tip' })).toContain('border-l-emerald-500');
+            expect(calloutVariants({ type: 'important' })).toContain('border-l-violet-500');
+            expect(calloutVariants({ type: 'warning' })).toContain('border-l-amber-500');
+            expect(calloutVariants({ type: 'danger' })).toContain('border-l-rose-500');
+        });
+        it('renders title, description, and dismisses when closable is clicked', () => {
+            let closed = false;
+            const { target, cleanup } = renderComponent(Callout, {
+                type: 'tip',
+                title: 'Performance Tip',
+                description: 'Use Svelte 5 runes for fine-grained reactivity.',
+                closable: true,
+                onclose: () => {
+                    closed = true;
+                }
+            });
+            expect(target.textContent).toContain('Performance Tip');
+            expect(target.textContent).toContain('Use Svelte 5 runes for fine-grained reactivity.');
+            const closeBtn = target.querySelector('[data-slot="close"]');
+            expect(closeBtn).not.toBeNull();
+            closeBtn?.click();
+            flushSync();
+            expect(closed).toBe(true);
+            expect(target.querySelector('[data-slot="root"]')).toBeNull();
+            cleanup();
+        });
+        it('renders as an anchor element when href is provided', () => {
+            const { target, cleanup } = renderComponent(Callout, {
+                type: 'important',
+                title: 'Read the Migration Guide',
+                href: '/docs/migration'
+            });
+            const root = target.querySelector('[data-slot="root"]');
+            expect(root?.tagName.toLowerCase()).toBe('a');
+            expect(root?.getAttribute('href')).toBe('/docs/migration');
+            cleanup();
+        });
+    });
+    describe('CodeGroup', () => {
+        it('generates variant classes for dark and adaptive theme modes', () => {
+            expect(codeGroupVariants({ themeMode: 'dark' })).toContain('bg-neutral-950');
+            expect(codeGroupVariants({ themeMode: 'adaptive' })).toContain('dark:bg-neutral-950');
+        });
+        it('renders tabs, displays active code, and synchronizes across instances via syncKey', () => {
+            const items = [
+                { label: 'pnpm', code: 'pnpm add yaxa-svelte' },
+                { label: 'npm', code: 'npm install yaxa-svelte' },
+                { label: 'bun', code: 'bun add yaxa-svelte' }
+            ];
+            const first = renderComponent(CodeGroup, {
+                items,
+                syncKey: 'test-pm-sync'
+            });
+            const second = renderComponent(CodeGroup, {
+                items,
+                syncKey: 'test-pm-sync'
+            });
+            expect(first.target.textContent).toContain('pnpm add yaxa-svelte');
+            expect(second.target.textContent).toContain('pnpm add yaxa-svelte');
+            // Click 'bun' tab on first CodeGroup
+            const tabs = first.target.querySelectorAll('[role="tab"]');
+            expect(tabs).toHaveLength(3);
+            tabs[2].click();
+            flushSync();
+            // Both first and second CodeGroup instances should now show 'bun add yaxa-svelte'
+            expect(first.target.textContent).toContain('bun add yaxa-svelte');
+            expect(second.target.textContent).toContain('bun add yaxa-svelte');
+            first.cleanup();
+            second.cleanup();
+        });
+    });
+    describe('Steps', () => {
+        it('generates size variant classes', () => {
+            expect(stepsVariants({ size: 'sm' })).toContain('gap-5');
+            expect(stepsVariants({ size: 'md' })).toContain('gap-7');
+            expect(stepsVariants({ size: 'lg' })).toContain('gap-9');
+        });
+        it('renders numbered step guide items with badges, descriptions, and code blocks', () => {
+            const items = [
+                {
+                    title: 'Install Package',
+                    badge: 'Required',
+                    description: 'Add Yaxa to your SvelteKit project.',
+                    code: 'pnpm add yaxa-svelte'
+                },
+                {
+                    title: 'Configure Styles',
+                    description: 'Import the Tailwind v4 stylesheet.',
+                    code: "@import 'yaxa-svelte/yaxa.css';",
+                    language: 'css'
+                }
+            ];
+            const { target, cleanup } = renderComponent(Steps, {
+                items
+            });
+            const stepItems = target.querySelectorAll('[data-slot="item"]');
+            expect(stepItems).toHaveLength(2);
+            expect(target.textContent).toContain('Install Package');
+            expect(target.textContent).toContain('Required');
+            expect(target.textContent).toContain('Configure Styles');
+            expect(target.textContent).toContain('pnpm add yaxa-svelte');
+            cleanup();
+        });
+    });
+});

package/dist/components/content/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Callout, calloutVariants } from './Callout.svelte';
+export type { CalloutProps, CalloutSlots, CalloutType } from './Callout.svelte';
+export { default as CodeGroup, codeGroupVariants } from './CodeGroup.svelte';
+export type { CodeGroupProps, CodeGroupSlots, CodeGroupItem } from './CodeGroup.svelte';
+export { default as Steps, stepsVariants } from './Steps.svelte';
+export type { StepsProps, StepsSlots, StepGuideItem } from './Steps.svelte';

package/dist/components/content/index.js

@@ -0,0 +1,3 @@
+export { default as Callout, calloutVariants } from './Callout.svelte';
+export { default as CodeGroup, codeGroupVariants } from './CodeGroup.svelte';
+export { default as Steps, stepsVariants } from './Steps.svelte';

package/dist/components/saas/auth-cards.test.js

@@ -3,13 +3,21 @@ import AuthCard from './AuthCard.svelte';
 import SignInCard from './SignInCard.svelte';
 import SignUpCard from './SignUpCard.svelte';
 import ResetPasswordCard from './ResetPasswordCard.svelte';
+import { AuthCard as SubpathAuthCard, SignInCard as SubpathSignInCard, SignUpCard as SubpathSignUpCard, ResetPasswordCard as SubpathResetPasswordCard, PasskeyUI, TwoFactorModal, useAuth } from '../../auth/index.js';
 import { renderComponent } from '../../testing/index.js';
 describe('Turnkey Auth Suite Components', () => {
-    it('exports all auth card component definitions', () => {
+    it('exports all auth card component definitions from yaxa-svelte/auth', () => {
         expect(AuthCard).toBeDefined();
         expect(SignInCard).toBeDefined();
         expect(SignUpCard).toBeDefined();
         expect(ResetPasswordCard).toBeDefined();
+        expect(SubpathAuthCard).toBeDefined();
+        expect(SubpathSignInCard).toBeDefined();
+        expect(SubpathSignUpCard).toBeDefined();
+        expect(SubpathResetPasswordCard).toBeDefined();
+        expect(PasskeyUI).toBeDefined();
+        expect(TwoFactorModal).toBeDefined();
+        expect(typeof useAuth).toBe('function');
     });
     it('renders SignInCard with sign-in fields and action buttons', () => {
         const { cleanup, target } = renderComponent(SignInCard, {

package/dist/index.d.ts

@@ -202,18 +202,6 @@ export type { OrgSwitcherProps, OrgItem } from './components/saas/OrgSwitcher.sv
 export { default as PricingCard } from './components/saas/PricingCard.svelte';
 export { default as PricingTable } from './components/saas/PricingTable.svelte';
 export { default as SubscriptionCard } from './components/saas/SubscriptionCard.svelte';
-export { default as AuthCard } from './components/saas/AuthCard.svelte';
-export type { AuthCardProps, AuthCardMode } from './components/saas/AuthCard.svelte';
-export { default as SignInCard } from './components/saas/SignInCard.svelte';
-export type { SignInCardProps } from './components/saas/SignInCard.svelte';
-export { default as SignUpCard } from './components/saas/SignUpCard.svelte';
-export type { SignUpCardProps } from './components/saas/SignUpCard.svelte';
-export { default as ResetPasswordCard } from './components/saas/ResetPasswordCard.svelte';
-export type { ResetPasswordCardProps } from './components/saas/ResetPasswordCard.svelte';
-export { default as PasskeyUI } from './components/saas/PasskeyUI.svelte';
-export { default as TwoFactorModal } from './components/saas/TwoFactorModal.svelte';
-export { useAuth } from './composables/useAuth.svelte';
-export type { SocialProvider } from './composables/useAuth.svelte';
 export { useGate } from './composables/useGate.svelte';
 export type { UseGateOptions } from './composables/useGate.svelte';
 export { useUpload } from './composables/useUpload.svelte';
@@ -224,6 +212,8 @@ export { default as FAQ, faqVariants } from './components/blocks/FAQ.svelte';
 export type { FAQProps, FAQItem } from './components/blocks/FAQ.svelte';
 export { default as FeatureGrid, featureGridVariants } from './components/blocks/FeatureGrid.svelte';
 export type { FeatureGridProps, FeatureItem } from './components/blocks/FeatureGrid.svelte';
+export { Callout, calloutVariants, CodeGroup, codeGroupVariants, Steps, stepsVariants } from './components/content/index';
+export type { CalloutProps, CalloutSlots, CalloutType, CodeGroupProps, CodeGroupSlots, CodeGroupItem, StepsProps, StepsSlots, StepGuideItem } from './components/content/index';
 export { createMockSiteConfig, createMockUser, createTestWrapperProps } from './testing';
 export type { YaxaTestOptions } from './testing';
 export { createApiClient, interpolatePath, serializeQueryParams, createQuery, createMutation, QueryClient, getQueryClient, setQueryClient, hashQueryKey } from './client';

package/dist/index.js

@@ -134,19 +134,14 @@ export { default as OrgSwitcher, orgSwitcherVariants } from './components/saas/O
 export { default as PricingCard } from './components/saas/PricingCard.svelte';
 export { default as PricingTable } from './components/saas/PricingTable.svelte';
 export { default as SubscriptionCard } from './components/saas/SubscriptionCard.svelte';
-export { default as AuthCard } from './components/saas/AuthCard.svelte';
-export { default as SignInCard } from './components/saas/SignInCard.svelte';
-export { default as SignUpCard } from './components/saas/SignUpCard.svelte';
-export { default as ResetPasswordCard } from './components/saas/ResetPasswordCard.svelte';
-export { default as PasskeyUI } from './components/saas/PasskeyUI.svelte';
-export { default as TwoFactorModal } from './components/saas/TwoFactorModal.svelte';
-export { useAuth } from './composables/useAuth.svelte';
 export { useGate } from './composables/useGate.svelte';
 export { useUpload } from './composables/useUpload.svelte';
 // Pre-Built SaaS Blocks
 export { default as Testimonials, testimonialsVariants } from './components/blocks/Testimonials.svelte';
 export { default as FAQ, faqVariants } from './components/blocks/FAQ.svelte';
 export { default as FeatureGrid, featureGridVariants } from './components/blocks/FeatureGrid.svelte';
+// Docs & Content Primitives (Prose Callouts, Synced CodeGroups & Step Guides)
+export { Callout, calloutVariants, CodeGroup, codeGroupVariants, Steps, stepsVariants } from './components/content/index';
 // Testing Utilities
 export { createMockSiteConfig, createMockUser, createTestWrapperProps } from './testing';
 // Type-Safe Client RPC & Runes Query Engine

package/dist/root-purity.test.d.ts

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

package/dist/root-purity.test.js

@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest';
+import * as rootExports from './index';
+import fs from 'node:fs';
+import path from 'node:path';
+describe('Root Entry Point Purity (yaxa-svelte)', () => {
+    const FORBIDDEN_EXPORTS = [
+        // Better-Auth client cards & composables (strictly yaxa-svelte/auth)
+        'useAuth',
+        'AuthCard',
+        'SignInCard',
+        'SignUpCard',
+        'ResetPasswordCard',
+        'PasskeyUI',
+        'TwoFactorModal',
+        'createYaxaAuth',
+        // Database & ORM (strictly yaxa-svelte/db)
+        'getDb',
+        'schemaPg',
+        'schemaSqlite',
+        // Server endpoints & pipeline (strictly yaxa-svelte/server)
+        'yaxaEndpoint',
+        'requireAuth',
+        'requireRole',
+        'createAiStreamHandler',
+        'createApiDocsHandler',
+        'yaxaSSE',
+        'broadcast',
+        'enqueueJob',
+        'defineWorker',
+        'createJobRunner',
+        'createRequestLogger',
+        'createServerTiming',
+        'resolveTraceContext',
+        // Admin (strictly yaxa-svelte/admin)
+        'createYaxaAdminHook',
+        'createDrizzleAdmin',
+        'AdminDashboard',
+        // Polar billing (strictly yaxa-svelte/polar)
+        'createPolarCheckout',
+        'createPolarWebhookHandler',
+        // Resend emails (strictly yaxa-svelte/email)
+        'sendMagicLinkEmail',
+        'sendWelcomeEmail',
+        // Storage uploads (strictly yaxa-svelte/storage)
+        'createPresignedUploadUrl'
+    ];
+    it('must NOT export any Better-Auth, database, or server backend primitives', () => {
+        for (const name of FORBIDDEN_EXPORTS) {
+            expect(rootExports[name], `Accidental re-export of '${name}' in root 'yaxa-svelte'! Must be in appropriate subpath ('yaxa-svelte/auth', 'yaxa-svelte/server', etc.)`).toBeUndefined();
+        }
+    });
+    it('src/lib/index.ts source must not reference restricted subpaths or heavy backend peer dependencies', () => {
+        const indexPath = path.resolve('src/lib/index.ts');
+        const source = fs.readFileSync(indexPath, 'utf-8');
+        const FORBIDDEN_SUBPATHS = [
+            './auth',
+            './server',
+            './db',
+            './polar',
+            './email',
+            './storage',
+            './admin',
+            'better-auth',
+            'drizzle-orm',
+            '@polar-sh/sdk',
+            'resend',
+            '@aws-sdk'
+        ];
+        for (const forbidden of FORBIDDEN_SUBPATHS) {
+            expect(source.includes(forbidden), `src/lib/index.ts contains forbidden reference: '${forbidden}'`).toBe(false);
+        }
+    });
+    it('src/lib/index.ts must not re-export auth card components', () => {
+        const indexPath = path.resolve('src/lib/index.ts');
+        const source = fs.readFileSync(indexPath, 'utf-8');
+        const FORBIDDEN_AUTH_CARDS = [
+            'AuthCard',
+            'SignInCard',
+            'SignUpCard',
+            'ResetPasswordCard',
+            'PasskeyUI',
+            'TwoFactorModal',
+            'useAuth'
+        ];
+        for (const card of FORBIDDEN_AUTH_CARDS) {
+            const regex = new RegExp(`\\b${card}\\b`);
+            expect(regex.test(source), `src/lib/index.ts contains forbidden auth component: '${card}'`).toBe(false);
+        }
+    });
+    it('root entry point successfully evaluates without throwing runtime errors', () => {
+        expect(rootExports).toBeDefined();
+        expect(typeof rootExports.Button).toBe('function');
+        expect(typeof rootExports.Modal).toBe('function');
+        expect(typeof rootExports.Gate).toBe('function');
+        expect(typeof rootExports.UserMenu).toBe('function');
+        expect(typeof rootExports.useGate).toBe('function');
+        expect(typeof rootExports.useYaxa).toBe('function');
+        expect(typeof rootExports.Callout).toBe('function');
+        expect(typeof rootExports.CodeGroup).toBe('function');
+        expect(typeof rootExports.Steps).toBe('function');
+    });
+});