yaxa-svelte 2.0.0 → 2.0.2

package/dist/admin/components/AdminDashboard.svelte

@@ -167,7 +167,7 @@
 >
 	<!-- Top Navigation Bar -->
 	<header
-		class="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-neutral-200 bg-white/80 px-6 backdrop-blur-md dark:border-neutral-800 dark:bg-neutral-900/80"
+		class="sticky top-0 z-30 flex min-h-14 flex-wrap items-center justify-between gap-2 border-b border-neutral-200 bg-white/80 px-4 py-2 backdrop-blur-md sm:h-14 sm:flex-nowrap sm:px-6 sm:py-0 dark:border-neutral-800 dark:bg-neutral-900/80"
 	>
 		<div class="flex items-center gap-3">
 			<div
@@ -177,7 +177,9 @@
 			</div>
 			<div class="flex items-center gap-2">
 				<h1 class="text-sm font-bold text-neutral-900 dark:text-neutral-100">{title}</h1>
-				<Badge color="primary" variant="subtle" size="xs">Drizzle Introspect</Badge>
+				<Badge color="primary" variant="subtle" size="xs" class="hidden sm:inline-flex"
+					>Drizzle Introspect</Badge
+				>
 			</div>
 		</div>
 
@@ -224,7 +226,7 @@
 	</header>
 
 	<!-- Main Workspace -->
-	<main class="mx-auto max-w-7xl p-6">
+	<main class="mx-auto max-w-7xl p-4 sm:p-6">
 		{#if activeTab === 'sandbox'}
 			<div class="space-y-6">
 				<div class="space-y-1">
@@ -281,8 +283,8 @@
 							<Badge size="xs" variant="subtle" color="neutral">{data.total} rows</Badge>
 						</div>
 
-						<div class="flex items-center gap-2">
-							<form onsubmit={handleSearch} class="relative">
+						<div class="flex w-full items-center gap-2 sm:w-auto">
+							<form onsubmit={handleSearch} class="relative flex-1 sm:flex-initial">
 								<input
 									id="admin-search-input"
 									name="adminSearch"
@@ -290,7 +292,7 @@
 									placeholder="Search records..."
 									aria-label="Search records"
 									bind:value={searchQuery}
-									class="w-48 rounded-lg border border-neutral-300 bg-white py-1.5 pr-3 pl-8 text-xs text-neutral-900 placeholder-neutral-400 transition-all focus:w-60 focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
+									class="w-full rounded-lg border border-neutral-300 bg-white py-1.5 pr-3 pl-8 text-xs text-neutral-900 placeholder-neutral-400 transition-all focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-none sm:w-48 sm:focus:w-60 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-100"
 								/>
 								<div
 									class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5 text-neutral-400"
@@ -303,7 +305,7 @@
 								variant="solid"
 								color="primary"
 								size="sm"
-								class="gap-1 text-xs"
+								class="shrink-0 gap-1 text-xs"
 								onclick={() => (isCreateModalOpen = true)}
 							>
 								<Icon name="sparkles" class="h-3.5 w-3.5" />
@@ -379,7 +381,7 @@
 						<!-- Pagination Footer -->
 						{#if data.total > data.pageSize}
 							<div
-								class="flex items-center justify-between border-t border-neutral-200 px-4 py-3 dark:border-neutral-800"
+								class="flex flex-wrap items-center justify-between gap-3 border-t border-neutral-200 px-4 py-3 dark:border-neutral-800"
 							>
 								<span class="text-xs text-neutral-500">
 									Showing {(data.page - 1) * data.pageSize + 1} to {Math.min(

package/dist/admin/components/DevSandbox.svelte

@@ -70,7 +70,7 @@
 	<!-- 1. Email Sandbox (Resend) -->
 	<Card class="space-y-5 border-neutral-200 p-6 shadow-xs dark:border-neutral-800">
 		<div
-			class="flex items-center justify-between border-b border-neutral-200 pb-3 dark:border-neutral-800"
+			class="flex flex-wrap items-center justify-between gap-2 border-b border-neutral-200 pb-3 dark:border-neutral-800"
 		>
 			<div class="flex items-center gap-2.5">
 				<div
@@ -148,7 +148,7 @@
 	<!-- 2. S3 / Cloudflare R2 Upload Sandbox -->
 	<Card class="space-y-5 border-neutral-200 p-6 shadow-xs dark:border-neutral-800">
 		<div
-			class="flex items-center justify-between border-b border-neutral-200 pb-3 dark:border-neutral-800"
+			class="flex flex-wrap items-center justify-between gap-2 border-b border-neutral-200 pb-3 dark:border-neutral-800"
 		>
 			<div class="flex items-center gap-2.5">
 				<div
@@ -244,7 +244,7 @@
 	<!-- 3. Auth & RBAC State Inspection -->
 	<Card class="space-y-4 border-neutral-200 p-6 shadow-xs lg:col-span-2 dark:border-neutral-800">
 		<div
-			class="flex items-center justify-between border-b border-neutral-200 pb-3 dark:border-neutral-800"
+			class="flex flex-wrap items-center justify-between gap-2 border-b border-neutral-200 pb-3 dark:border-neutral-800"
 		>
 			<div class="flex items-center gap-2.5">
 				<div
@@ -267,7 +267,7 @@
 		<div class="grid grid-cols-1 gap-4 text-xs sm:grid-cols-3">
 			<div class="space-y-1">
 				<span class="font-medium text-neutral-500">User Email</span>
-				<p class="font-mono font-semibold text-neutral-900 dark:text-neutral-100">
+				<p class="truncate font-mono font-semibold text-neutral-900 dark:text-neutral-100">
 					{user?.email || 'N/A'}
 				</p>
 			</div>

package/dist/admin/components/ImpersonationBanner.svelte

@@ -45,11 +45,11 @@
 
 {#if impersonatedUser}
 	<div
-		class="sticky top-0 z-50 flex items-center justify-between border-b border-amber-300 bg-amber-500/90 px-4 py-2 text-xs font-medium text-amber-950 shadow-xs backdrop-blur-md dark:border-amber-600/50 dark:bg-amber-600/90 dark:text-amber-50 {className}"
+		class="sticky top-0 z-50 flex flex-wrap items-center justify-between gap-2 border-b border-amber-300 bg-amber-500/90 px-4 py-2 text-xs font-medium text-amber-950 shadow-xs backdrop-blur-md dark:border-amber-600/50 dark:bg-amber-600/90 dark:text-amber-50 {className}"
 	>
-		<div class="flex items-center gap-2">
+		<div class="flex min-w-0 flex-1 items-center gap-2">
 			<Icon name="alert" class="h-4 w-4 shrink-0 text-amber-950 dark:text-amber-100" />
-			<span>
+			<span class="truncate">
 				You are currently impersonating <strong
 					>{impersonatedUser.name || impersonatedUser.email || impersonatedUser.id}</strong
 				>.
@@ -62,7 +62,7 @@
 			color="neutral"
 			loading={isStopping}
 			onclick={handleStop}
-			class="gap-1 border-none bg-amber-950 text-white hover:bg-amber-900 dark:bg-amber-100 dark:text-amber-950 dark:hover:bg-white"
+			class="shrink-0 gap-1 border-none bg-amber-950 text-white hover:bg-amber-900 dark:bg-amber-100 dark:text-amber-950 dark:hover:bg-white"
 		>
 			<Icon name="cross" class="h-3 w-3" />
 			<span>Exit Impersonation</span>

package/dist/admin/components/RecordDrawer.svelte

@@ -66,16 +66,16 @@
 
 <Slideover bind:open title={`Inspect Record: ${tableName}`} class="w-full max-w-xl">
 	{#if record}
-		<div class="flex flex-col gap-5 p-6">
+		<div class="flex flex-col gap-5">
 			<!-- Header Summary -->
 			<div
-				class="flex items-center justify-between rounded-lg border border-neutral-200 bg-neutral-50 p-3.5 dark:border-neutral-800 dark:bg-neutral-900"
+				class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-neutral-200 bg-neutral-50 p-3.5 dark:border-neutral-800 dark:bg-neutral-900"
 			>
-				<div class="space-y-0.5">
+				<div class="min-w-0 space-y-0.5">
 					<span class="text-xs font-semibold tracking-wider text-neutral-500 uppercase"
 						>Primary Key</span
 					>
-					<div class="font-mono text-sm font-bold text-neutral-900 dark:text-neutral-100">
+					<div class="truncate font-mono text-sm font-bold text-neutral-900 dark:text-neutral-100">
 						{primaryKey}: {record[primaryKey]}
 					</div>
 				</div>
@@ -192,7 +192,7 @@
 
 			<!-- Action Footer -->
 			<div
-				class="flex items-center justify-between border-t border-neutral-200 pt-4 dark:border-neutral-800"
+				class="flex flex-wrap items-center justify-between gap-2 border-t border-neutral-200 pt-4 dark:border-neutral-800"
 			>
 				<Button
 					variant="outline"

package/dist/components/ai/AiChat.svelte

@@ -209,7 +209,7 @@
 										: 'border border-neutral-200/80 bg-neutral-50 text-neutral-900 dark:border-neutral-800/80 dark:bg-neutral-900 dark:text-neutral-100'
 								)}
 							>
-								<div class="whitespace-pre-wrap">{msg.content}</div>
+								<div class="break-words whitespace-pre-wrap">{msg.content}</div>
 
 								{#if msg.isStreaming}
 									<span class="inline-block h-4 w-1.5 animate-pulse bg-current"></span>
@@ -221,7 +221,7 @@
 								<button
 									type="button"
 									onclick={() => copyMessage(msg.content)}
-									class="hover:text-neutral-700 dark:hover:text-neutral-200"
+									class="rounded-md p-1.5 hover:bg-neutral-100 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
 									title="Copy message"
 								>
 									<Icon name="copy" size="xs" />
@@ -231,7 +231,7 @@
 									<button
 										type="button"
 										onclick={() => onretry(msg)}
-										class="hover:text-neutral-700 dark:hover:text-neutral-200"
+										class="rounded-md p-1.5 hover:bg-neutral-100 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
 										title="Regenerate response"
 									>
 										<Icon name="rotate-cw" size="xs" />

package/dist/components/ai/PromptBar.svelte

@@ -156,11 +156,11 @@
 							: 'text-neutral-700 hover:bg-neutral-100 dark:text-neutral-300 dark:hover:bg-neutral-800/60'
 					)}
 				>
-					<div class="flex items-center gap-2">
-						<span class="font-mono font-medium">{cmd.name}</span>
-						<span class="text-neutral-500">{cmd.description}</span>
+					<div class="flex min-w-0 items-center gap-2">
+						<span class="shrink-0 font-mono font-medium">{cmd.name}</span>
+						<span class="truncate text-neutral-500">{cmd.description}</span>
 					</div>
-					<Icon name="corner-down-left" size="xs" class="text-neutral-400" />
+					<Icon name="corner-down-left" size="xs" class="shrink-0 text-neutral-400" />
 				</button>
 			{/each}
 		</div>
@@ -192,7 +192,7 @@
 						<button
 							type="button"
 							onclick={() => removeAttachment(idx)}
-							class="text-neutral-400 hover:text-rose-500"
+							class="rounded p-1 text-neutral-400 hover:text-rose-500"
 							aria-label="Remove attachment"
 						>
 							<Icon name="x" size="xs" />

package/dist/components/charts/BarChart.svelte

@@ -122,10 +122,12 @@
 		<!-- X-Axis Labels -->
 		<g class="fill-neutral-400 text-[10px] select-none dark:fill-neutral-500">
 			{#each data as d, i}
-				{@const x = padding.left + i * groupWidth + groupWidth / 2}
-				<text {x} y={height - 8} text-anchor="middle">
-					{xAxisFormat(d.label)}
-				</text>
+				{#if data.length <= 8 || i % Math.ceil(data.length / 6) === 0 || i === data.length - 1}
+					{@const x = padding.left + i * groupWidth + groupWidth / 2}
+					<text {x} y={height - 8} text-anchor="middle">
+						{xAxisFormat(d.label)}
+					</text>
+				{/if}
 			{/each}
 		</g>
 
@@ -137,11 +139,14 @@
 			{@const barWidth = isStacked ? availableWidth : availableWidth / (series.length || 1)}
 			{@const startOffset = (groupWidth - availableWidth) / 2}
 
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 			<g
 				role="group"
 				aria-label={d.label}
 				onmouseenter={() => (hoveredIdx = dIdx)}
 				onmouseleave={() => (hoveredIdx = null)}
+				onclick={() => (hoveredIdx = hoveredIdx === dIdx ? null : dIdx)}
 				class="cursor-pointer"
 			>
 				<!-- Group Hover Background highlight -->
@@ -207,8 +212,8 @@
 		{@const activeX = padding.left + hoveredIdx * groupWidth + groupWidth / 2}
 		<div
 			class="pointer-events-none absolute top-2 rounded-xl border border-neutral-200 bg-white/95 px-3 py-2 text-xs shadow-lg backdrop-blur-xs transition-all dark:border-neutral-800 dark:bg-neutral-900/95"
-			style="left: clamp(10px, {(activeX / width) *
-				100}%, calc(100% - 140px)); transform: translateX(-50%);"
+			style="left: clamp(70px, {(activeX / width) *
+				100}%, calc(100% - 70px)); transform: translateX(-50%);"
 		>
 			<div class="mb-1 font-semibold text-neutral-800 dark:text-neutral-200">
 				{xAxisFormat(activeItem.label)}

package/dist/components/charts/DonutChart.svelte

@@ -83,7 +83,7 @@
 			/>
 
 			<!-- Segments -->
-			{#each segments as seg, idx}
+			{#each segments as seg, idx (seg.item.label)}
 				<circle
 					role="graphics-symbol"
 					aria-label={seg.item.label}
@@ -131,9 +131,9 @@
 	<!-- Legend -->
 	{#if showLegend && data.length > 0}
 		<div
-			class="mt-4 flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs text-neutral-600 dark:text-neutral-300"
+			class="mt-4 flex flex-wrap justify-center gap-x-3 gap-y-1.5 text-[11px] text-neutral-600 sm:gap-x-4 sm:gap-y-2 sm:text-xs dark:text-neutral-300"
 		>
-			{#each segments as seg, idx}
+			{#each segments as seg, idx (seg.item.label)}
 				<button
 					type="button"
 					onmouseenter={() => (hoveredIdx = idx)}

package/dist/components/charts/LineChart.svelte

@@ -152,10 +152,9 @@
 		});
 	});
 
-	function handleMouseMove(e: MouseEvent) {
-		const svg = e.currentTarget as SVGSVGElement;
+	function updateClosestFromClientX(svg: SVGSVGElement, rawClientX: number) {
 		const rect = svg.getBoundingClientRect();
-		const clientX = e.clientX - rect.left;
+		const clientX = rawClientX - rect.left;
 		const svgX = (clientX / rect.width) * width;
 
 		if (data.length <= 1) {
@@ -176,6 +175,15 @@
 		hoveredIdx = closestIdx;
 	}
 
+	function handleMouseMove(e: MouseEvent) {
+		updateClosestFromClientX(e.currentTarget as SVGSVGElement, e.clientX);
+	}
+
+	function handleTouch(e: TouchEvent) {
+		if (!e.touches[0]) return;
+		updateClosestFromClientX(e.currentTarget as SVGSVGElement, e.touches[0].clientX);
+	}
+
 	function handleMouseLeave() {
 		hoveredIdx = null;
 	}
@@ -188,6 +196,8 @@
 		class="h-auto w-full overflow-visible"
 		onmousemove={handleMouseMove}
 		onmouseleave={handleMouseLeave}
+		ontouchstart={handleTouch}
+		ontouchmove={handleTouch}
 		role="img"
 		aria-label="Interactive Line Chart"
 	>
@@ -225,10 +235,12 @@
 		<!-- X-Axis Labels -->
 		<g class="fill-neutral-400 text-[10px] select-none dark:fill-neutral-500">
 			{#each data as d, i}
-				{@const x = getX(i)}
-				<text {x} y={height - 8} text-anchor="middle">
-					{xAxisFormat(d.label)}
-				</text>
+				{#if data.length <= 8 || i % Math.ceil(data.length / 6) === 0 || i === data.length - 1}
+					{@const x = getX(i)}
+					<text {x} y={height - 8} text-anchor="middle">
+						{xAxisFormat(d.label)}
+					</text>
+				{/if}
 			{/each}
 		</g>
 
@@ -295,8 +307,8 @@
 		{@const activeItem = data[hoveredIdx]}
 		<div
 			class="pointer-events-none absolute top-2 rounded-xl border border-neutral-200 bg-white/95 px-3 py-2 text-xs shadow-lg backdrop-blur-xs transition-all dark:border-neutral-800 dark:bg-neutral-900/95"
-			style="left: clamp(10px, {(getX(hoveredIdx) / width) *
-				100}%, calc(100% - 140px)); transform: translateX(-50%);"
+			style="left: clamp(70px, {(getX(hoveredIdx) / width) *
+				100}%, calc(100% - 70px)); transform: translateX(-50%);"
 		>
 			<div class="mb-1 font-semibold text-neutral-800 dark:text-neutral-200">
 				{xAxisFormat(activeItem.label)}

package/dist/components/elements/Carousel.svelte

@@ -7,11 +7,12 @@
 			root: 'relative w-full overflow-hidden rounded-2xl border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900',
 			viewport: 'relative flex w-full overflow-hidden',
 			slide: 'min-w-full transition-transform duration-500 ease-out',
-			controls: 'absolute inset-0 flex items-center justify-between pointer-events-none p-4',
+			controls: 'absolute inset-0 flex items-center justify-between pointer-events-none p-2 sm:p-4',
 			arrowBtn:
-				'pointer-events-auto inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/80 shadow-md backdrop-blur-xs transition hover:bg-white hover:scale-105 active:scale-95 dark:bg-neutral-900/80 dark:hover:bg-neutral-800 text-neutral-800 dark:text-neutral-100',
+				'pointer-events-auto inline-flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-full bg-white/80 shadow-md backdrop-blur-xs transition hover:bg-white hover:scale-105 active:scale-95 dark:bg-neutral-900/80 dark:hover:bg-neutral-800 text-neutral-800 dark:text-neutral-100',
 			dots: 'absolute bottom-4 left-0 right-0 flex items-center justify-center gap-2 pointer-events-none',
-			dotBtn: 'pointer-events-auto h-2 rounded-full transition-all duration-300'
+			dotBtn:
+				'pointer-events-auto relative h-2 rounded-full transition-all duration-300 after:absolute after:-inset-2 after:content-[""]'
 		}
 	});
 

package/dist/components/elements/CodeBlock.svelte

@@ -282,19 +282,19 @@
 	<!-- Header Bar -->
 	{#if filename || language}
 		<div
-			class="flex items-center justify-between border-b px-4 py-2 font-mono text-xs {isAdaptive
+			class="flex items-center justify-between gap-2 border-b px-4 py-2 font-mono text-xs {isAdaptive
 				? 'border-neutral-200 bg-neutral-100/80 text-neutral-600 dark:border-neutral-800 dark:bg-neutral-900/80 dark:text-neutral-400'
 				: 'border-neutral-800 bg-neutral-900/80 text-neutral-400'}"
 		>
-			<div class="flex items-center gap-2">
+			<div class="flex min-w-0 items-center gap-2">
 				{#if filename}
 					<span
-						class="flex items-center gap-1.5 font-medium {isAdaptive
+						class="flex min-w-0 items-center gap-1.5 truncate font-medium {isAdaptive
 							? 'text-neutral-800 dark:text-neutral-200'
 							: 'text-neutral-200'}"
 					>
-						<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
-						{filename}
+						<span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500"></span>
+						<span class="truncate">{filename}</span>
 					</span>
 				{:else}
 					<span
@@ -307,7 +307,7 @@
 				{/if}
 			</div>
 
-			<div class="flex items-center gap-1.5">
+			<div class="flex shrink-0 items-center gap-2">
 				{#if filename && language}
 					<span
 						class="rounded px-1.5 py-0.5 text-[10px] font-bold tracking-wider uppercase {isAdaptive

package/dist/components/elements/CodeDiff.svelte

@@ -328,7 +328,7 @@
 	{:else}
 		<!-- Split Side-by-Side View -->
 		<div
-			class="grid grid-cols-2 divide-x divide-neutral-200 overflow-x-auto p-2 font-mono text-xs leading-relaxed dark:divide-neutral-800 {isAdaptive
+			class="grid grid-cols-1 divide-y divide-neutral-200 overflow-x-auto p-2 font-mono text-xs leading-relaxed md:grid-cols-2 md:divide-x md:divide-y-0 dark:divide-neutral-800 {isAdaptive
 				? 'text-neutral-800 dark:text-neutral-200'
 				: 'text-neutral-200'}"
 		>

package/dist/components/elements/DataTable.svelte

@@ -305,9 +305,9 @@
 	<!-- Optional Header Toolbar -->
 	{#if showSearch || showExport || showColumnToggle || toolbar}
 		<div class="flex flex-wrap items-center justify-between gap-3">
-			<div class="flex items-center gap-2">
+			<div class="flex flex-1 flex-wrap items-center gap-2 sm:flex-initial">
 				{#if showSearch}
-					<div class="relative w-64">
+					<div class="relative w-full sm:w-64">
 						<Icon
 							name="search"
 							size="xs"
@@ -383,7 +383,7 @@
 	<!-- Bulk Actions Bar -->
 	{#if selectable && selected.length > 0 && bulkActions}
 		<div
-			class="flex items-center justify-between rounded-xl border border-primary-500/30 bg-primary-50/50 px-4 py-2.5 dark:bg-primary-950/30"
+			class="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-primary-500/30 bg-primary-50/50 px-4 py-2.5 dark:bg-primary-950/30"
 		>
 			<span class="text-xs font-semibold text-primary-900 dark:text-primary-200">
 				{selected.length} row{selected.length > 1 ? 's' : ''} selected
@@ -451,7 +451,7 @@
 									{#if column.resizable}
 										<button
 											type="button"
-											class="absolute top-0 right-0 h-full w-1.5 cursor-col-resize opacity-0 transition-opacity group-hover/th:opacity-100 hover:bg-primary-500"
+											class="absolute top-0 -right-1 h-full w-3 cursor-col-resize touch-none opacity-0 transition-opacity group-hover/th:opacity-100 hover:bg-primary-500"
 											onmousedown={(e) => startColumnResize(colKey, e)}
 											ontouchstart={(e) => startColumnResize(colKey, e)}
 											aria-label={`Resize column ${column.label}`}
@@ -537,7 +537,7 @@
 			<div
 				class="flex flex-wrap items-center justify-between gap-3 border-t border-neutral-200/80 bg-neutral-50/50 px-4 py-3 text-xs text-neutral-500 dark:border-neutral-800/80 dark:bg-neutral-900/40 dark:text-neutral-400"
 			>
-				<div class="flex items-center gap-2">
+				<div class="flex flex-wrap items-center gap-2">
 					<span>Rows per page:</span>
 					<select
 						value={pageSize}

package/dist/components/elements/SortableList.svelte

@@ -118,7 +118,7 @@
 
 			<!-- Reorder Arrow Buttons for Keyboard / Touch Users -->
 			<div
-				class="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100 sm:flex"
+				class="flex items-center gap-1 opacity-100 transition-opacity focus-within:opacity-100 sm:opacity-0 sm:group-hover:opacity-100"
 			>
 				<button
 					type="button"
@@ -127,7 +127,7 @@
 						sortable.moveUp(index);
 						items = sortable.items;
 					}}
-					class="rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 disabled:opacity-30 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+					class="rounded p-2 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 disabled:opacity-30 sm:p-1 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
 					aria-label="Move item up"
 				>
 					<Icon name="chevron-up" class="h-3.5 w-3.5" />
@@ -139,7 +139,7 @@
 						sortable.moveDown(index);
 						items = sortable.items;
 					}}
-					class="rounded p-1 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 disabled:opacity-30 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+					class="rounded p-2 text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 disabled:opacity-30 sm:p-1 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
 					aria-label="Move item down"
 				>
 					<Icon name="chevron-down" class="h-3.5 w-3.5" />

package/dist/components/elements/Terminal.svelte

@@ -47,19 +47,19 @@
 		class="flex items-center justify-between border-b border-neutral-800/80 bg-neutral-900/80 px-4 py-2.5"
 	>
 		<!-- Window Control Dots -->
-		<div class="flex items-center gap-1.5" aria-hidden="true">
+		<div class="flex shrink-0 items-center gap-1.5" aria-hidden="true">
 			<span class="h-3 w-3 rounded-full bg-rose-500/80"></span>
 			<span class="h-3 w-3 rounded-full bg-amber-500/80"></span>
 			<span class="h-3 w-3 rounded-full bg-emerald-500/80"></span>
 		</div>
 
 		<!-- Title -->
-		<div class="text-[11px] font-medium text-neutral-400">
+		<div class="min-w-0 truncate px-2 text-[11px] font-medium text-neutral-400">
 			{title}
 		</div>
 
 		<!-- Copy Button -->
-		<div>
+		<div class="shrink-0">
 			{#if copyable && fullCommandText}
 				<button
 					type="button"

package/dist/components/forms/DatePicker.svelte

@@ -219,7 +219,8 @@
 
 	<Popover.Portal>
 		<Popover.Content
-			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-72 rounded-xl border border-neutral-200 bg-white p-3 shadow-xl duration-150 outline-none dark:border-neutral-800 dark:bg-neutral-900"
+			collisionPadding={8}
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-72 max-w-[calc(100vw-1rem)] rounded-xl border border-neutral-200 bg-white p-3 shadow-xl duration-150 outline-none dark:border-neutral-800 dark:bg-neutral-900"
 			sideOffset={6}
 		>
 			<!-- Presets Bar -->

package/dist/components/forms/DateRangePicker.svelte

@@ -279,7 +279,8 @@
 
 	<Popover.Portal>
 		<Popover.Content
-			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-80 rounded-xl border border-neutral-200 bg-white p-3.5 shadow-xl duration-150 outline-none dark:border-neutral-800 dark:bg-neutral-900"
+			collisionPadding={8}
+			class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-80 max-w-[calc(100vw-1rem)] rounded-xl border border-neutral-200 bg-white p-3.5 shadow-xl duration-150 outline-none dark:border-neutral-800 dark:bg-neutral-900"
 			sideOffset={6}
 		>
 			<!-- Quick Presets -->

package/dist/components/forms/InputOTP.svelte

@@ -129,10 +129,10 @@
 			case 'sm':
 				return 'w-8 h-9 text-base';
 			case 'lg':
-				return 'w-14 h-16 text-2xl';
+				return 'w-10 h-12 text-lg sm:w-14 sm:h-16 sm:text-2xl';
 			case 'md':
 			default:
-				return 'w-11 h-12 text-xl';
+				return 'w-9 h-10 text-base sm:w-11 sm:h-12 sm:text-xl';
 		}
 	});
 
@@ -143,10 +143,14 @@
 	});
 </script>
 
-<div class={cn('flex items-center gap-2 select-none', className)}>
+<div
+	class={cn('flex max-w-full items-center justify-center gap-1 select-none sm:gap-2', className)}
+>
 	{#each Array.from({ length }, (_, i) => i) as index}
 		{#if separator && index === separatorIndex}
-			<span class="px-1 font-bold text-neutral-400 select-none dark:text-neutral-600"> − </span>
+			<span class="px-0.5 font-bold text-neutral-400 select-none sm:px-1 dark:text-neutral-600">
+				−
+			</span>
 		{/if}
 
 		<input

package/dist/components/forms/RadioGroup.svelte

@@ -28,7 +28,9 @@
 </script>
 
 <div
-	class="flex {orientation === 'horizontal' ? 'flex-row gap-4' : 'flex-col gap-2'} {className}"
+	class="flex {orientation === 'horizontal'
+		? 'flex-row flex-wrap gap-4'
+		: 'flex-col gap-2'} {className}"
 	role="radiogroup"
 >
 	{#each options as opt}

package/dist/components/forms/RichTextEditor.svelte

@@ -69,7 +69,7 @@
 >
 	<!-- Formatting Toolbar -->
 	<div
-		class="flex flex-wrap items-center justify-between border-b border-neutral-200/80 bg-neutral-50/70 p-1.5 dark:border-neutral-800/80 dark:bg-neutral-900/60"
+		class="flex flex-wrap items-center justify-between gap-1.5 border-b border-neutral-200/80 bg-neutral-50/70 p-1.5 dark:border-neutral-800/80 dark:bg-neutral-900/60"
 	>
 		<div class="flex flex-wrap items-center gap-0.5">
 			<!-- Bold -->

package/dist/components/forms/ToggleGroup.svelte

@@ -106,7 +106,7 @@
 <div
 	role="group"
 	class={cn(
-		'inline-flex items-center select-none',
+		'inline-flex max-w-full flex-wrap items-center select-none',
 		block ? 'flex w-full' : '',
 		sizeClasses.container,
 		containerVariantClasses,

package/dist/components/layout/Footer.svelte

@@ -52,7 +52,7 @@
 		<div class="grid grid-cols-1 gap-8 md:grid-cols-4 lg:grid-cols-5">
 			<!-- Brand Info -->
 			<div class="space-y-4 md:col-span-2 lg:col-span-2">
-				<div class="flex items-center gap-3">
+				<div class="flex flex-wrap items-center gap-3">
 					<a href="/" class="inline-flex items-center gap-2.5 font-bold tracking-tight">
 						<Logo size="sm" showText text={currentConfig.name} />
 					</a>
@@ -68,7 +68,9 @@
 					{currentConfig.description}
 				</p>
 				{#if currentConfig.email}
-					<div class="flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400">
+					<div
+						class="flex flex-wrap items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400"
+					>
 						<span>Contact:</span>
 						<a
 							href="mailto:{currentConfig.email}"
@@ -79,7 +81,7 @@
 						<button
 							type="button"
 							onclick={() => copyEmail(currentConfig.email!)}
-							class="inline-flex items-center justify-center rounded p-1 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
+							class="inline-flex items-center justify-center rounded p-1.5 text-neutral-400 transition-colors hover:bg-neutral-100 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
 							aria-label="Copy email address"
 							title={copiedEmail ? 'Copied to clipboard!' : 'Copy email address'}
 						>
@@ -188,7 +190,7 @@
 							href={currentConfig.socials?.github || currentConfig.project?.repositoryUrl}
 							target="_blank"
 							rel="noopener noreferrer"
-							class="text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
+							class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-white"
 							aria-label="GitHub"
 						>
 							<Icon name="github" size="sm" />
@@ -199,7 +201,7 @@
 							href={currentConfig.socials.npm}
 							target="_blank"
 							rel="noopener noreferrer"
-							class="text-neutral-500 hover:text-red-500 dark:hover:text-red-400"
+							class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-neutral-500 hover:bg-neutral-100 hover:text-red-500 dark:hover:bg-neutral-800 dark:hover:text-red-400"
 							aria-label="npm"
 						>
 							<Icon name="npm" size="sm" />
@@ -210,7 +212,7 @@
 							href={currentConfig.socials.twitter}
 							target="_blank"
 							rel="noopener noreferrer"
-							class="text-neutral-500 hover:text-neutral-900 dark:hover:text-white"
+							class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-white"
 							aria-label="Twitter"
 						>
 							<Icon name="twitter" size="sm" />

package/dist/components/layout/Header.svelte

@@ -80,8 +80,22 @@
 			</div>
 
 			<!-- Right Section: Search, Theme Toggle, Actions, Socials -->
-			<div class="flex items-center gap-2">
+			<div class="flex items-center gap-1.5 sm:gap-2">
 				{#if onOpenCommand}
+					<!-- Mobile Search Button -->
+					<Button
+						variant="ghost"
+						color="neutral"
+						square
+						size="sm"
+						class="sm:hidden"
+						onclick={onOpenCommand}
+						aria-label="Search documentation"
+					>
+						<Icon name="search" size="sm" />
+					</Button>
+
+					<!-- Desktop Search Pill -->
 					<button
 						onclick={onOpenCommand}
 						type="button"
@@ -110,7 +124,7 @@
 					{/if}
 				</Button>
 
-				<!-- GitHub Link -->
+				<!-- GitHub Link (Desktop) -->
 				{#if currentConfig.socials?.github}
 					<Button
 						href={currentConfig.socials.github}
@@ -118,13 +132,14 @@
 						color="neutral"
 						square
 						size="sm"
+						class="hidden sm:inline-flex"
 						aria-label="GitHub Repository"
 					>
 						<Icon name="github" size="sm" />
 					</Button>
 				{/if}
 
-				<!-- npm Link -->
+				<!-- npm Link (Desktop) -->
 				{#if currentConfig.socials?.npm}
 					<Button
 						href={currentConfig.socials.npm}
@@ -132,6 +147,7 @@
 						color="neutral"
 						square
 						size="sm"
+						class="hidden sm:inline-flex"
 						aria-label="npm Package"
 					>
 						<Icon name="npm" size="sm" />
@@ -173,17 +189,61 @@
 		<!-- Mobile Navigation Dropdown -->
 		{#if mobileMenuOpen}
 			<div class="border-t border-neutral-200 py-4 md:hidden dark:border-neutral-800">
-				<div class="flex flex-col space-y-2">
+				<div class="flex flex-col space-y-1">
 					{#each resolvedLinks as item (item.href)}
 						<a
 							href={item.href}
 							onclick={() => (mobileMenuOpen = false)}
-							class="rounded-lg px-3 py-2 text-base font-medium text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
+							class="flex items-center justify-between rounded-lg px-3 py-2 text-base font-medium text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800"
 						>
-							{item.label}
+							<span class="flex items-center gap-2">
+								{#if item.icon}
+									<Icon name={item.icon} size="xs" />
+								{/if}
+								{item.label}
+							</span>
+							{#if item.badge}
+								<span
+									class="rounded bg-primary-100 px-1.5 py-0.5 text-xs font-semibold text-primary-700 dark:bg-primary-950 dark:text-primary-300"
+								>
+									{item.badge}
+								</span>
+							{/if}
 						</a>
 					{/each}
 				</div>
+
+				<!-- Mobile Menu Socials -->
+				{#if currentConfig.socials?.github || currentConfig.socials?.npm}
+					<div
+						class="mt-4 flex items-center gap-2 border-t border-neutral-200 pt-4 dark:border-neutral-800"
+					>
+						{#if currentConfig.socials?.github}
+							<Button
+								href={currentConfig.socials.github}
+								variant="outline"
+								size="sm"
+								class="flex-1 justify-center"
+								aria-label="GitHub Repository"
+							>
+								<Icon name="github" size="xs" class="mr-1.5" />
+								GitHub
+							</Button>
+						{/if}
+						{#if currentConfig.socials?.npm}
+							<Button
+								href={currentConfig.socials.npm}
+								variant="outline"
+								size="sm"
+								class="flex-1 justify-center"
+								aria-label="npm Package"
+							>
+								<Icon name="npm" size="xs" class="mr-1.5" />
+								npm
+							</Button>
+						{/if}
+					</div>
+				{/if}
 			</div>
 		{/if}
 	</Container>

package/dist/components/layout/ResizablePanels.svelte

@@ -13,12 +13,14 @@
 			direction: {
 				horizontal: {
 					root: 'flex-row',
-					handle: 'w-2 cursor-col-resize select-none',
+					handle:
+						'relative w-2 cursor-col-resize select-none after:absolute after:inset-y-0 after:-inset-x-2 after:content-[""]',
 					grip: 'h-6 w-1'
 				},
 				vertical: {
 					root: 'flex-col',
-					handle: 'h-2 cursor-row-resize select-none',
+					handle:
+						'relative h-2 cursor-row-resize select-none after:absolute after:inset-x-0 after:-inset-y-2 after:content-[""]',
 					grip: 'h-1 w-6'
 				}
 			}

package/dist/components/legal/LegalDocument.svelte

@@ -334,21 +334,21 @@
 		</p>
 
 		<div
-			class="mt-6 flex flex-wrap items-center gap-6 text-sm text-neutral-500 dark:text-neutral-400"
+			class="mt-6 flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-neutral-500 dark:text-neutral-400"
 		>
 			<span class="inline-flex items-center gap-1.5">
 				<Icon name="info" size="xs" />
 				Last Updated:
 				<strong class="font-medium text-neutral-700 dark:text-neutral-200">{lastUpdated}</strong>
 			</span>
-			<span>•</span>
+			<span class="hidden sm:inline">•</span>
 			<span
 				>Entity:
 				<strong class="font-medium text-neutral-700 dark:text-neutral-200">{entityName}</strong
 				></span
 			>
 			{#if contactEmail}
-				<span>•</span>
+				<span class="hidden sm:inline">•</span>
 				<div class="inline-flex items-center gap-1.5">
 					<a
 						href="mailto:{contactEmail}"
@@ -406,11 +406,11 @@
 					id={sec.id}
 					class="scroll-mt-24 space-y-4 border-b border-neutral-100 pb-10 last:border-0 dark:border-neutral-900"
 				>
-					<h2 class="text-xl font-bold tracking-tight text-neutral-900 dark:text-white">
+					<h2 class="text-xl font-bold tracking-tight break-words text-neutral-900 dark:text-white">
 						{sec.title}
 					</h2>
 					<div
-						class="prose max-w-none text-neutral-600 prose-neutral dark:text-neutral-300 dark:prose-invert"
+						class="prose max-w-none break-words text-neutral-600 prose-neutral dark:text-neutral-300 dark:prose-invert"
 					>
 						{@html formatLegalHtml(sec.content || '')}
 					</div>

package/dist/components/navigation/Breadcrumb.svelte

@@ -35,7 +35,7 @@
 	<ol
 		data-slot="list"
 		class={cn(
-			'inline-flex items-center space-x-1.5 text-sm text-neutral-500 md:space-x-2 dark:text-neutral-400',
+			'flex flex-wrap items-center space-x-1.5 gap-y-1 text-sm text-neutral-500 md:space-x-2 dark:text-neutral-400',
 			ui?.list
 		)}
 	>

package/dist/components/navigation/Pagination.svelte

@@ -66,7 +66,7 @@
 	});
 </script>
 
-<nav aria-label="Pagination" class="flex items-center gap-1 {className}">
+<nav aria-label="Pagination" class="flex flex-wrap items-center justify-center gap-1 {className}">
 	<!-- Previous -->
 	<Button
 		variant="outline"

package/dist/components/navigation/Stepper.svelte

@@ -100,7 +100,7 @@
 				</div>
 
 				<!-- Step Label -->
-				<div class="hidden sm:block">
+				<div class={orientation === 'vertical' ? 'block' : 'hidden sm:block'}>
 					<div
 						class="text-xs font-semibold {status === 'active'
 							? 'text-primary-700 dark:text-primary-400'
@@ -122,7 +122,7 @@
 			{#if !isLast}
 				{#if orientation === 'horizontal'}
 					<div
-						class="mx-3 h-0.5 flex-1 transition-colors duration-200 {index < currentStep
+						class="mx-1.5 h-0.5 flex-1 transition-colors duration-200 sm:mx-3 {index < currentStep
 							? 'bg-primary-600 dark:bg-primary-500'
 							: 'bg-neutral-200 dark:bg-neutral-800'}"
 					></div>

package/dist/components/navigation/Tabs.svelte

@@ -79,7 +79,7 @@
 		bind:this={listElement}
 		data-slot="list"
 		class={cn(
-			'relative flex',
+			'relative scrollbar-none flex max-w-full overflow-x-auto',
 			variant === 'segmented' &&
 				'rounded-xl border border-neutral-200/60 bg-neutral-100 p-1 dark:border-neutral-800/60 dark:bg-neutral-900',
 			variant === 'underline' && 'gap-6 border-b border-neutral-200 dark:border-neutral-800',
@@ -111,7 +111,7 @@
 				disabled={tab.disabled}
 				onclick={() => (value = tab.value)}
 				class={cn(
-					'relative z-10 inline-flex items-center justify-center gap-2 text-sm font-medium transition-all duration-150 select-none focus-visible:ring-2 focus-visible:ring-[var(--yaxa-ring)] focus-visible:outline-none motion-reduce:transition-none',
+					'relative z-10 inline-flex shrink-0 items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-all duration-150 select-none focus-visible:ring-2 focus-visible:ring-(--yaxa-ring) focus-visible:outline-none motion-reduce:transition-none',
 					tab.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
 					variant === 'segmented' && [
 						'rounded-lg px-3 py-1.5',

package/dist/components/overlays/Modal.svelte

@@ -3,7 +3,7 @@
 	import type { Snippet } from 'svelte';
 
 	export const modalVariants = tv({
-		base: 'fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-neutral-200 bg-white p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 yaxa-surface-elevated motion-reduce:transition-none',
+		base: 'fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-neutral-200 bg-white p-4 sm:p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 yaxa-surface-elevated motion-reduce:transition-none',
 		variants: {
 			size: {
 				sm: 'max-w-sm',

package/dist/components/overlays/Modal.svelte.d.ts

@@ -8,7 +8,7 @@ export declare const modalVariants: import("tailwind-variants").TVReturnType<{
         xl: "max-w-4xl";
         full: "max-w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]";
     };
-}, undefined, "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-neutral-200 bg-white p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 yaxa-surface-elevated motion-reduce:transition-none", {
+}, undefined, "fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-2xl border border-neutral-200 bg-white p-4 sm:p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 dark:border-neutral-800 dark:bg-neutral-900 yaxa-surface-elevated motion-reduce:transition-none", {
     size: {
         sm: "max-w-sm";
         md: "max-w-lg";

package/dist/components/overlays/NotificationCenter.svelte

@@ -74,8 +74,9 @@
 		<Popover.Portal>
 			<Popover.Content
 				sideOffset={6}
+				collisionPadding={8}
 				align="end"
-				class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-80 overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-800 dark:bg-neutral-900"
+				class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-80 max-w-[calc(100vw-1rem)] overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-800 dark:bg-neutral-900"
 			>
 				<!-- Header -->
 				<div

package/dist/components/overlays/Popover.svelte

@@ -34,9 +34,10 @@
 
 	<Popover.Portal>
 		<Popover.Content
+			collisionPadding={8}
 			class={unstyled
 				? className
-				: `data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 rounded-xl border border-neutral-200 bg-white p-4 shadow-xl duration-150 outline-none dark:border-neutral-800 dark:bg-neutral-900 ${className}`}
+				: `data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 max-w-[calc(100vw-1rem)] rounded-xl border border-neutral-200 bg-white p-4 shadow-xl duration-150 outline-none dark:border-neutral-800 dark:bg-neutral-900 ${className}`}
 			sideOffset={8}
 		>
 			{#if children}

package/dist/components/overlays/Toaster.svelte

@@ -29,18 +29,18 @@
 	let positionClasses = $derived.by(() => {
 		switch (position) {
 			case 'top-left':
-				return 'top-4 left-4 items-start';
+				return 'top-4 inset-x-4 sm:right-auto sm:left-4 items-center sm:items-start';
 			case 'top-center':
-				return 'top-4 left-1/2 -translate-x-1/2 items-center';
+				return 'top-4 inset-x-4 sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 items-center';
 			case 'bottom-right':
-				return 'bottom-4 right-4 items-end';
+				return 'bottom-4 inset-x-4 sm:left-auto sm:right-4 items-center sm:items-end';
 			case 'bottom-left':
-				return 'bottom-4 left-4 items-start';
+				return 'bottom-4 inset-x-4 sm:right-auto sm:left-4 items-center sm:items-start';
 			case 'bottom-center':
-				return 'bottom-4 left-1/2 -translate-x-1/2 items-center';
+				return 'bottom-4 inset-x-4 sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 items-center';
 			case 'top-right':
 			default:
-				return 'top-4 right-4 items-end';
+				return 'top-4 inset-x-4 sm:left-auto sm:right-4 items-center sm:items-end';
 		}
 	});
 
@@ -55,7 +55,7 @@
 
 {#if visibleToasts.length > 0}
 	<div
-		class="yaxa-toaster pointer-events-none fixed z-[9999] flex w-full max-w-md flex-col gap-2.5 p-4 sm:p-0 {positionClasses} {className}"
+		class="yaxa-toaster pointer-events-none fixed z-[9999] flex max-w-md flex-col gap-2.5 sm:w-full {positionClasses} {className}"
 		aria-label="Notifications"
 		data-rich-colors={restProps.richColors ?? true}
 		data-expand={restProps.expand ?? false}

package/dist/components/saas/AuthCard.svelte

@@ -472,7 +472,7 @@
 		<!-- Mode Switchers & Navigation Links -->
 		<div class="flex flex-col items-center gap-2 pt-2 text-xs text-zinc-500 dark:text-zinc-400">
 			{#if currentMode === 'signin'}
-				<div class="flex w-full items-center justify-between">
+				<div class="flex w-full flex-wrap items-center justify-between gap-2">
 					{#if showForgotPassword}
 						<button
 							type="button"

package/dist/components/saas/OrgSwitcher.svelte

@@ -91,8 +91,9 @@
 		<Popover.Portal>
 			<Popover.Content
 				sideOffset={6}
+				collisionPadding={8}
 				align="start"
-				class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-64 overflow-hidden rounded-xl border border-neutral-200 bg-white p-1.5 shadow-xl dark:border-neutral-800 dark:bg-neutral-900"
+				class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 w-64 max-w-[calc(100vw-1rem)] overflow-hidden rounded-xl border border-neutral-200 bg-white p-1.5 shadow-xl dark:border-neutral-800 dark:bg-neutral-900"
 			>
 				<div
 					class="px-2 py-1.5 text-[10px] font-semibold tracking-wider text-neutral-400 uppercase"

package/dist/components/saas/PasskeyUI.svelte

@@ -165,8 +165,8 @@
 				</div>
 			{:else}
 				{#each passkeys as key (key.id)}
-					<div class="flex items-center justify-between p-3.5 px-4">
-						<div class="flex items-center gap-3">
+					<div class="flex items-center justify-between gap-2 p-3.5 px-4">
+						<div class="flex min-w-0 items-center gap-3">
 							<div
 								class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-100/60 text-primary-700 dark:bg-primary-950/60 dark:text-primary-300"
 							>

package/dist/components/saas/SubscriptionCard.svelte

@@ -106,7 +106,7 @@
 			</p>
 		</div>
 
-		<div class="flex items-center gap-2">
+		<div class="flex flex-wrap items-center gap-2">
 			{#if onupgrade}
 				<Button variant="outline" size="sm" onclick={onupgrade}>Change Plan</Button>
 			{/if}

package/dist/components/seo/OgImage.svelte

@@ -38,7 +38,7 @@
 	class="relative overflow-hidden rounded-xl border border-neutral-200 shadow-xl dark:border-neutral-800 {className}"
 >
 	<div
-		class="flex items-center justify-between border-b border-neutral-200 bg-neutral-100 px-4 py-2.5 text-sm font-medium text-neutral-600 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400"
+		class="flex flex-wrap items-center justify-between gap-2 border-b border-neutral-200 bg-neutral-100 px-3 py-2 text-xs font-medium text-neutral-600 sm:px-4 sm:py-2.5 sm:text-sm dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400"
 	>
 		<span class="flex items-center gap-1.5">
 			<span class="h-2 w-2 rounded-full bg-emerald-500"></span>

package/dist/components/theme/ThemeStudio.svelte

@@ -91,20 +91,23 @@
 	{#if showHeader}
 		<!-- Top Bar -->
 		<div
-			class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm dark:border-neutral-800 dark:bg-neutral-900"
+			class="flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-neutral-200 bg-white p-4 shadow-sm sm:p-6 dark:border-neutral-800 dark:bg-neutral-900"
 		>
-			<div>
-				<h1 class="text-xl font-bold text-neutral-900 dark:text-white">Visual Web Theme Studio</h1>
+			<div class="min-w-0 flex-1">
+				<h1 class="text-lg font-bold text-neutral-900 sm:text-xl dark:text-white">
+					Visual Web Theme Studio
+				</h1>
 				<p class="mt-1 text-xs text-neutral-500">
 					Visually customize palettes, harmonic radii, fonts, and scrollbars with instant live
 					preview and zero FOUC.
 				</p>
 			</div>
 
-			<div class="flex items-center gap-2.5">
+			<div class="flex w-full flex-wrap items-center gap-2 sm:w-auto">
 				<Button
 					variant="outline"
 					size="sm"
+					class="flex-1 sm:flex-initial"
 					onclick={() => {
 						const chosen = theme.randomize();
 						toast.info(
@@ -117,22 +120,33 @@
 					Randomize
 				</Button>
 
-				<Button variant="outline" size="sm" onclick={() => theme.reset()}>
+				<Button
+					variant="outline"
+					size="sm"
+					class="flex-1 sm:flex-initial"
+					onclick={() => theme.reset()}
+				>
 					<Icon name="rotate-ccw" size="xs" class="mr-1.5" />
 					Reset
 				</Button>
 
-				<Button variant="solid" size="sm" onclick={() => (exportModalOpen = true)}>
+				<Button
+					variant="solid"
+					size="sm"
+					class="w-full sm:w-auto"
+					onclick={() => (exportModalOpen = true)}
+				>
 					<Icon name="download" size="xs" class="mr-1.5" />
 					Export Theme Tokens
 				</Button>
 			</div>
 		</div>
 	{:else}
-		<div class="flex items-center justify-end gap-2.5">
+		<div class="flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto">
 			<Button
 				variant="outline"
 				size="sm"
+				class="flex-1 sm:flex-initial"
 				onclick={() => {
 					const chosen = theme.randomize();
 					toast.info(
@@ -145,12 +159,22 @@
 				Randomize
 			</Button>
 
-			<Button variant="outline" size="sm" onclick={() => theme.reset()}>
+			<Button
+				variant="outline"
+				size="sm"
+				class="flex-1 sm:flex-initial"
+				onclick={() => theme.reset()}
+			>
 				<Icon name="rotate-ccw" size="xs" class="mr-1.5" />
 				Reset
 			</Button>
 
-			<Button variant="solid" size="sm" onclick={() => (exportModalOpen = true)}>
+			<Button
+				variant="solid"
+				size="sm"
+				class="w-full sm:w-auto"
+				onclick={() => (exportModalOpen = true)}
+			>
 				<Icon name="download" size="xs" class="mr-1.5" />
 				Export Theme Tokens
 			</Button>
@@ -167,12 +191,12 @@
 					Color Mode
 				</div>
 				<div class="grid grid-cols-3 gap-1.5">
-					{#each ['light', 'dark', 'system'] as const as mode}
+					{#each ['light', 'dark', 'system'] as const as mode (mode)}
 						<Button
 							variant={theme.mode === mode ? 'solid' : 'outline'}
 							size="xs"
 							onclick={() => theme.setMode(mode)}
-							class="w-full justify-center px-1.5 py-1 text-[11px] capitalize"
+							class="min-h-9 w-full justify-center px-1.5 py-1 text-[11px] capitalize"
 						>
 							<Icon
 								name={mode === 'light' ? 'sun' : mode === 'dark' ? 'moon' : 'laptop'}
@@ -199,7 +223,7 @@
 					</span>
 				</div>
 				<div class="grid grid-cols-4 gap-1.5">
-					{#each Object.entries(ACCENT_PALETTES) as [key, pal]}
+					{#each Object.entries(ACCENT_PALETTES) as [key, pal] (key)}
 						<button
 							type="button"
 							onclick={() => theme.setAccent(key as AccentName)}
@@ -234,7 +258,7 @@
 					</span>
 				</div>
 				<div class="grid grid-cols-2 gap-2">
-					{#each Object.entries(NEUTRAL_PALETTES) as [key, pal]}
+					{#each Object.entries(NEUTRAL_PALETTES) as [key, pal] (key)}
 						{@const active = theme.neutral === key}
 						<button
 							type="button"
@@ -284,12 +308,12 @@
 					<span class="text-xs font-semibold text-primary-500 capitalize">{theme.radius}</span>
 				</div>
 				<div class="grid grid-cols-5 gap-1">
-					{#each Object.entries(RADIUS_PRESETS) as [key, r]}
+					{#each Object.entries(RADIUS_PRESETS) as [key, r] (key)}
 						{@const active = theme.radius === key}
 						<button
 							type="button"
 							onclick={() => theme.setRadius(key as RadiusPreset)}
-							class="border px-1 py-1.5 text-center text-[10px] font-semibold transition-all {active
+							class="min-h-9 min-w-0 border px-1 py-1.5 text-center text-[10px] font-semibold transition-all sm:text-xs {active
 								? 'border-primary-500 bg-primary-500 font-bold text-white shadow-xs'
 								: 'border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700'}"
 							style="border-radius: {r.value} !important;"
@@ -306,12 +330,12 @@
 					Typography & Sizing
 				</div>
 				<div class="grid grid-cols-3 gap-1">
-					{#each Object.entries(FONT_PRESETS) as [key, font]}
+					{#each Object.entries(FONT_PRESETS) as [key, font] (key)}
 						{@const active = theme.fontFamily === key}
 						<button
 							type="button"
 							onclick={() => theme.setFontFamily(key as FontFamily)}
-							class="rounded-md border px-1 py-1.5 text-center text-[11px] font-semibold capitalize transition-all {active
+							class="min-h-9 rounded-md border px-1 py-1.5 text-center text-[11px] font-semibold capitalize transition-all {active
 								? 'border-primary-500 bg-primary-500 text-white shadow-xs'
 								: 'border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-100 dark:border-neutral-800 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700'}"
 							style="font-family: {font.value} !important;"
@@ -326,12 +350,12 @@
 						Density / Size Scale
 					</div>
 					<div class="grid grid-cols-3 gap-1">
-						{#each Object.entries(FONT_SIZE_PRESETS) as [key, sz]}
+						{#each Object.entries(FONT_SIZE_PRESETS) as [key, sz] (key)}
 							<Button
 								variant={theme.fontSize === key ? 'solid' : 'outline'}
 								size="xs"
 								onclick={() => theme.setFontSize(key as BaseFontSize)}
-								class="w-full justify-center px-1 py-1 text-[11px]"
+								class="min-h-8.5 w-full min-w-0 justify-center px-0.5 py-1 text-[10px] sm:px-1 sm:text-[11px]"
 							>
 								<span class="truncate">{sz.name}</span>
 							</Button>
@@ -342,14 +366,17 @@
 
 			<!-- Scrollbar Auto-Alignment -->
 			<Card padding="sm" class="space-y-2">
-				<div class="flex items-center justify-between">
-					<div>
+				<div class="flex items-center justify-between gap-3">
+					<div class="min-w-0 flex-1">
 						<div class="text-xs font-bold text-neutral-900 dark:text-white">Accent Scrollbars</div>
-						<div class="text-[11px] text-neutral-500">Sync scrollbar thumb to active accent</div>
+						<div class="truncate text-[11px] text-neutral-500 sm:whitespace-normal">
+							Sync scrollbar thumb to active accent
+						</div>
 					</div>
 					<Button
 						variant={theme.accentScrollbar ? 'solid' : 'outline'}
 						size="xs"
+						class="shrink-0"
 						onclick={() => theme.setAccentScrollbar(!theme.accentScrollbar)}
 					>
 						{theme.accentScrollbar ? 'Enabled' : 'Disabled'}
@@ -361,10 +388,10 @@
 		<!-- Right Live Sandbox Canvas (7 cols on xl, 8 cols on 2xl) -->
 		<div class="space-y-6 xl:col-span-7 2xl:col-span-8">
 			<!-- Elements Preview Card -->
-			<Card>
+			<Card ui={{ header: 'p-4 sm:p-6', body: 'p-4 sm:p-6 space-y-6' }}>
 				{#snippet header()}
 					<div class="flex items-center justify-between">
-						<span class="font-semibold text-neutral-900 dark:text-white">
+						<span class="text-sm font-semibold text-neutral-900 sm:text-base dark:text-white">
 							Interactive Component Sandbox
 						</span>
 						<Badge variant="soft" color="primary">Live Preview</Badge>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaxa-svelte",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "The Intuitive Svelte UI Library — Nuxt UI v4 equivalent for SvelteKit 2 & 3 & Svelte 5 with automated SEO, dynamic OpenGraph cards, sitemaps, robots.txt, and Tailwind CSS v4.",
   "license": "MIT",
   "homepage": "https://yaxa.vercel.app",