yaxa-svelte 2.0.1 → 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/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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaxa-svelte",
-  "version": "2.0.1",
+  "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",