ruflo 3.5.1 → 3.5.3

package/src/ruvocal/src/lib/components/RuFloUniverse.svelte

@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	interface Props {
+		width?: number;
+		height?: number;
+	}
+
+	let { width = 420, height = 192 }: Props = $props();
+	let canvas: HTMLCanvasElement;
+
+	onMount(() => {
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		const dpr = Math.min(window.devicePixelRatio, 2);
+		canvas.width = width * dpr;
+		canvas.height = height * dpr;
+		ctx.scale(dpr, dpr);
+
+		// Nodes — tightly clustered around center where RuFlo text sits
+		const nodes = [
+			{ x: 0.50, y: 0.50, r: 4, color: "#3b82f6" },
+			{ x: 0.35, y: 0.42, r: 2.5, color: "#06b6d4" },
+			{ x: 0.65, y: 0.42, r: 2.5, color: "#818cf8" },
+			{ x: 0.38, y: 0.58, r: 2.5, color: "#2dd4bf" },
+			{ x: 0.62, y: 0.58, r: 2.5, color: "#a78bfa" },
+			{ x: 0.26, y: 0.50, r: 2, color: "#38bdf8" },
+			{ x: 0.74, y: 0.50, r: 2, color: "#c084fc" },
+			{ x: 0.44, y: 0.35, r: 2, color: "#22d3ee" },
+			{ x: 0.56, y: 0.65, r: 2, color: "#6366f1" },
+			{ x: 0.30, y: 0.62, r: 1.8, color: "#0ea5e9" },
+			{ x: 0.70, y: 0.62, r: 1.8, color: "#8b5cf6" },
+			{ x: 0.42, y: 0.70, r: 1.8, color: "#14b8a6" },
+			{ x: 0.58, y: 0.35, r: 1.8, color: "#60a5fa" },
+			{ x: 0.32, y: 0.34, r: 1.8, color: "#34d399" },
+			{ x: 0.68, y: 0.34, r: 1.8, color: "#a855f7" },
+		];
+
+		const edges: [number, number][] = [
+			[0, 1], [0, 2], [0, 3], [0, 4],
+			[1, 5], [1, 7], [1, 13],
+			[2, 6], [2, 12], [2, 14],
+			[3, 5], [3, 8], [3, 9],
+			[4, 6], [4, 10], [4, 14],
+			[5, 9], [5, 13],
+			[6, 10], [6, 14],
+			[7, 12], [7, 13],
+			[8, 9], [8, 11],
+			[10, 14], [11, 9],
+		];
+
+		// Stars
+		const stars = Array.from({ length: 120 }, () => ({
+			x: Math.random() * width,
+			y: Math.random() * height,
+			r: Math.random() * 1.2 + 0.3,
+			phase: Math.random() * Math.PI * 2,
+		}));
+
+		// Particles traveling along edges
+		const particles = edges.map((_, i) => ({
+			edge: i,
+			t: Math.random(),
+			speed: 0.002 + Math.random() * 0.003,
+		}));
+
+		let animId: number;
+		let time = 0;
+
+		function draw() {
+			animId = requestAnimationFrame(draw);
+			time += 0.008;
+
+			ctx.fillStyle = "#06060f";
+			ctx.fillRect(0, 0, width, height);
+
+			// Stars
+			for (const s of stars) {
+				const alpha = 0.3 + Math.sin(time * 1.5 + s.phase) * 0.2;
+				ctx.beginPath();
+				ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+				ctx.fillStyle = `rgba(255,255,255,${alpha})`;
+				ctx.fill();
+			}
+
+			// Compute animated node positions
+			const px = nodes.map((n, i) => n.x * width + Math.sin(time + i) * 3);
+			const py = nodes.map((n, i) => n.y * height + Math.cos(time * 0.8 + i * 1.3) * 2);
+
+			// Edges
+			for (let i = 0; i < edges.length; i++) {
+				const [a, b] = edges[i];
+				const alpha = 0.12 + Math.sin(time * 1.5 + i) * 0.06;
+				ctx.beginPath();
+				ctx.moveTo(px[a], py[a]);
+				ctx.lineTo(px[b], py[b]);
+				ctx.strokeStyle = `rgba(59,130,246,${alpha})`;
+				ctx.lineWidth = 1;
+				ctx.stroke();
+			}
+
+			// Particles along edges
+			for (const p of particles) {
+				p.t = (p.t + p.speed) % 1;
+				const [a, b] = edges[p.edge];
+				const x = px[a] + (px[b] - px[a]) * p.t;
+				const y = py[a] + (py[b] - py[a]) * p.t;
+				ctx.beginPath();
+				ctx.arc(x, y, 1.2, 0, Math.PI * 2);
+				ctx.fillStyle = "rgba(96,165,250,0.7)";
+				ctx.fill();
+			}
+
+			// Orbital rings (ellipses) — centered with nodes and text
+			ctx.save();
+			ctx.translate(width * 0.5, height * 0.5);
+			ctx.rotate(time * 0.2);
+			ctx.beginPath();
+			ctx.ellipse(0, 0, 45, 20, 0, 0, Math.PI * 2);
+			ctx.strokeStyle = "rgba(59,130,246,0.1)";
+			ctx.lineWidth = 1.5;
+			ctx.stroke();
+			ctx.restore();
+
+			ctx.save();
+			ctx.translate(width * 0.5, height * 0.5);
+			ctx.rotate(-time * 0.15 + 0.5);
+			ctx.beginPath();
+			ctx.ellipse(0, 0, 55, 25, 0.4, 0, Math.PI * 2);
+			ctx.strokeStyle = "rgba(129,140,248,0.07)";
+			ctx.lineWidth = 1.5;
+			ctx.stroke();
+			ctx.restore();
+
+			// Nodes with glow
+			for (let i = 0; i < nodes.length; i++) {
+				const n = nodes[i];
+				const pulse = 1 + Math.sin(time * 2 + i * 0.7) * 0.15;
+				const r = n.r * pulse;
+
+				// Glow
+				const grad = ctx.createRadialGradient(px[i], py[i], 0, px[i], py[i], r * 5);
+				grad.addColorStop(0, n.color + "30");
+				grad.addColorStop(1, n.color + "00");
+				ctx.beginPath();
+				ctx.arc(px[i], py[i], r * 5, 0, Math.PI * 2);
+				ctx.fillStyle = grad;
+				ctx.fill();
+
+				// Core
+				ctx.beginPath();
+				ctx.arc(px[i], py[i], r, 0, Math.PI * 2);
+				ctx.fillStyle = n.color;
+				ctx.fill();
+			}
+		}
+
+		draw();
+
+		return () => {
+			cancelAnimationFrame(animId);
+		};
+	});
+</script>
+
+<div
+	class="relative h-full w-full overflow-hidden"
+	style="background: #06060f;"
+>
+	<canvas
+		bind:this={canvas}
+		style="width: {width}px; height: {height}px;"
+	></canvas>
+	<!-- Overlay text -->
+	<div class="pointer-events-none absolute inset-0 flex flex-col items-center justify-center">
+		<h2
+			class="text-3xl font-light tracking-[0.3em] text-indigo-100"
+			style="text-shadow: 0 0 20px rgba(99, 102, 241, 0.5), 0 0 40px rgba(99, 102, 241, 0.2);"
+		>
+			RuFlo
+		</h2>
+		<p class="mt-1 text-[10px] tracking-[0.25em] text-slate-400/70">INTELLIGENT WORKFLOWS</p>
+	</div>
+</div>

package/src/ruvocal/src/lib/components/ScrollToBottomBtn.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import IconChevron from "./icons/IconChevron.svelte";
+
+	interface Props {
+		scrollNode: HTMLElement;
+		class?: string;
+	}
+
+	let { scrollNode, class: className = "" }: Props = $props();
+
+	let visible = $state(false);
+	let observer: ResizeObserver | null = $state(null);
+
+	function updateVisibility() {
+		if (!scrollNode) return;
+		visible =
+			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight;
+	}
+
+	function destroy() {
+		observer?.disconnect();
+		scrollNode?.removeEventListener("scroll", updateVisibility);
+	}
+	const cleanup = $effect.root(() => {
+		$effect(() => {
+			if (scrollNode) {
+				if (window.ResizeObserver) {
+					observer = new ResizeObserver(() => updateVisibility());
+					observer.observe(scrollNode);
+					cleanup();
+				}
+				scrollNode?.addEventListener("scroll", updateVisibility);
+			}
+		});
+		return () => destroy();
+	});
+</script>
+
+{#if visible}
+	<button
+		transition:fade={{ duration: 150 }}
+		onclick={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
+		class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
+		><IconChevron classNames="mt-[2px]" /></button
+	>
+{/if}

package/src/ruvocal/src/lib/components/ScrollToPreviousBtn.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import { onDestroy, untrack } from "svelte";
+	import IconChevron from "./icons/IconChevron.svelte";
+
+	let visible = $state(false);
+	interface Props {
+		scrollNode: HTMLElement;
+		class?: string;
+	}
+
+	let { scrollNode, class: className = "" }: Props = $props();
+	let observer: ResizeObserver | null = $state(null);
+
+	function updateVisibility() {
+		if (!scrollNode) return;
+		visible =
+			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight &&
+			scrollNode.scrollTop > 200;
+	}
+
+	function scrollToPrevious() {
+		if (!scrollNode) return;
+		const messages = scrollNode.querySelectorAll("[data-message-id]");
+		const scrollTop = scrollNode.scrollTop;
+		let previousMessage: Element | null = null;
+
+		for (let i = messages.length - 1; i >= 0; i--) {
+			const messageTop =
+				messages[i].getBoundingClientRect().top +
+				scrollTop -
+				scrollNode.getBoundingClientRect().top;
+			if (messageTop < scrollTop - 1) {
+				previousMessage = messages[i];
+				break;
+			}
+		}
+
+		if (previousMessage) {
+			previousMessage.scrollIntoView({ behavior: "smooth", block: "start" });
+		}
+	}
+
+	function destroy() {
+		observer?.disconnect();
+		scrollNode?.removeEventListener("scroll", updateVisibility);
+	}
+
+	onDestroy(destroy);
+
+	$effect(() => {
+		scrollNode &&
+			untrack(() => {
+				if (scrollNode) {
+					destroy();
+
+					if (window.ResizeObserver) {
+						observer = new ResizeObserver(() => {
+							updateVisibility();
+						});
+						observer.observe(scrollNode);
+					}
+					scrollNode.addEventListener("scroll", updateVisibility);
+				}
+			});
+	});
+</script>
+
+{#if visible}
+	<button
+		transition:fade={{ duration: 150 }}
+		onclick={scrollToPrevious}
+		class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
+	>
+		<IconChevron classNames="rotate-180 mt-[2px]" />
+	</button>
+{/if}

package/src/ruvocal/src/lib/components/ShareConversationModal.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+	import CarbonLink from "~icons/carbon/link";
+	import CarbonCheckmark from "~icons/carbon/checkmark";
+	import EosIconsLoading from "~icons/eos-icons/loading";
+	import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
+	import { onMount } from "svelte";
+	import { createShareLink } from "$lib/createShareLink";
+
+	interface Props {
+		open?: boolean;
+		onclose?: () => void;
+		oncopied?: () => void;
+	}
+
+	let { open = false, onclose, oncopied }: Props = $props();
+
+	let creating = $state(false);
+	let createdUrl: string | null = $state(null);
+	let errorMsg: string | null = $state(null);
+	let justCopied = $state(false);
+
+	async function handleCreate() {
+		try {
+			creating = true;
+			errorMsg = null;
+			createdUrl = await createShareLink(page.params.id ?? "");
+		} catch (e) {
+			errorMsg = (e as Error).message || "Could not create link";
+		} finally {
+			creating = false;
+		}
+	}
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	// If the current page is already a shared chat (7-char id), pre-fill the link
+	onMount(async () => {
+		if (page.params.id && page.params.id.length === 7) {
+			try {
+				createdUrl = await createShareLink(page.params.id);
+			} catch (e) {
+				// ignore
+			}
+		}
+	});
+
+	function withLeafId(url: string | null): string | null {
+		if (!url) return url;
+		try {
+			const leafId = localStorage.getItem("leafId");
+			if (!leafId) return url;
+			const u = new URL(url);
+			u.searchParams.set("leafId", leafId);
+			return u.toString();
+		} catch (e) {
+			return url;
+		}
+	}
+</script>
+
+{#if open}
+	<Modal onclose={close} width="w-[90dvh] md:w-[500px]">
+		<div class="flex w-full flex-col gap-3 p-5 sm:gap-5 sm:p-6">
+			<!-- Header + copy -->
+			{#if createdUrl}
+				<div class="flex items-start justify-between">
+					<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">
+						Public link created
+					</div>
+					<button type="button" class="group" onclick={close} aria-label="Close">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 32 32"
+							class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
+						>
+							<path
+								d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+				</div>
+				<div class="text-sm text-gray-600 dark:text-gray-400">
+					A public link to your chat has been created.
+				</div>
+			{:else}
+				<div class="flex items-start justify-between">
+					<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">
+						Share public link to chat
+					</div>
+					<button type="button" class="group" onclick={close} aria-label="Close">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 32 32"
+							class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
+						>
+							<path
+								d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+				</div>
+				<div class="text-sm text-gray-600 dark:text-gray-400">
+					Any messages you add after sharing stay private.
+				</div>
+			{/if}
+
+			{#if errorMsg}
+				<div
+					class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-700 dark:bg-red-500/10 dark:text-red-300"
+				>
+					{errorMsg}
+				</div>
+			{/if}
+
+			<!-- URL row -->
+			<div
+				class="flex h-12 items-center gap-2 whitespace-nowrap rounded-2xl border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-800"
+			>
+				<input
+					class="w-full truncate bg-transparent text-[15px] text-gray-700 outline-none placeholder:text-gray-400 dark:text-gray-200 dark:placeholder:text-gray-500 max-sm:text-sm"
+					readonly
+					value={createdUrl ??
+						`${page.data.publicConfig.PUBLIC_SHARE_PREFIX || `${page.data.publicConfig.PUBLIC_ORIGIN || page.url.origin}${base}`}/r/...`}
+				/>
+
+				{#if createdUrl}
+					<CopyToClipBoardBtn
+						classNames="inline-flex items-center rounded-xl -mr-1 border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow enabled:hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:enabled:hover:bg-gray-600"
+						showTooltip={false}
+						value={withLeafId(createdUrl) ?? createdUrl}
+						onClick={() => {
+							justCopied = true;
+							oncopied?.();
+							setTimeout(() => (justCopied = false), 1200);
+						}}
+					>
+						{#snippet children()}
+							<span class="inline-flex items-center gap-1.5">
+								{#if justCopied}
+									<CarbonCheckmark class="text-[.95em] text-green-600 dark:text-green-400" />
+									Copied
+								{:else}
+									<!-- Use the copy icon provided by CopyToClipBoardBtn default otherwise -->
+									<svg width="1em" height="1em" viewBox="0 0 32 32" class="text-[.95em]"
+										><path
+											fill="currentColor"
+											d="M28 10v18H10V10zm-2 2H12v14h14zm-4-8v2H6v14H4V4z"
+										/></svg
+									>
+									Copy link
+								{/if}
+							</span>
+						{/snippet}
+					</CopyToClipBoardBtn>
+				{:else}
+					<button
+						class="-mr-1 inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
+						type="button"
+						disabled={creating}
+						onclick={handleCreate}
+					>
+						{#if creating}
+							<EosIconsLoading class="text-[1.05em]" />
+							Creating…
+						{:else}
+							<CarbonLink class="text-[1.05em]" />
+							Create link
+						{/if}
+					</button>
+				{/if}
+			</div>
+		</div>
+	</Modal>
+{/if}

package/src/ruvocal/src/lib/components/StopGeneratingBtn.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
+
+	interface Props {
+		classNames?: string;
+		onClick?: () => void;
+		showBorder?: boolean;
+	}
+
+	let { classNames = "", onClick, showBorder = false }: Props = $props();
+</script>
+
+<button
+	type="button"
+	onclick={onClick}
+	class={`btn stop-generating-btn ${showBorder ? "stop-generating-btn--spinning" : ""} ${classNames}`}
+	aria-label="Stop generating"
+>
+	<span class="sr-only">Stop generating</span>
+	<CarbonStopFilledAlt class="size-3.5 text-gray-500" />
+</button>
+
+<style lang="postcss">
+	.stop-generating-btn {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		--stop-generating-ring-color: rgba(31, 41, 55, 0.35);
+	}
+
+	.stop-generating-btn :global(svg) {
+		display: block;
+	}
+
+	.stop-generating-btn::after {
+		content: "";
+		position: absolute;
+		inset: -2px;
+		border-radius: inherit;
+		pointer-events: none;
+		background: transparent;
+	}
+
+	.stop-generating-btn--spinning::after {
+		background: conic-gradient(
+			from 0deg,
+			transparent 0deg 240deg,
+			var(--stop-generating-ring-color) 240deg 360deg
+		);
+		mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
+		animation: stop-generating-rotate 1.2s linear infinite;
+	}
+
+	:global(.dark) .stop-generating-btn {
+		--stop-generating-ring-color: rgba(255, 255, 255, 0.2);
+	}
+
+	@keyframes stop-generating-rotate {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

package/src/ruvocal/src/lib/components/SubscribeModal.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { isPro } from "$lib/stores/isPro";
+	import IconPro from "$lib/components/icons/IconPro.svelte";
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	interface Props {
+		close: () => void;
+	}
+
+	let { close }: Props = $props();
+</script>
+
+<Modal closeOnBackdrop={false} onclose={close} width="!max-w-[420px] !m-4">
+	<div
+		class="flex w-full flex-col gap-8 bg-white bg-gradient-to-b to-transparent px-6 pb-7 dark:bg-black dark:from-white/10 dark:to-white/5"
+	>
+		<div
+			class="-mx-6 grid h-48 select-none place-items-center bg-gradient-to-t from-black/5 dark:from-white/10"
+		>
+			<div class="flex flex-col items-center justify-center gap-2.5 px-8 text-center">
+				<div
+					class="flex size-14 items-center justify-center rounded-full text-3xl {$isPro
+						? 'bg-gradient-to-br from-yellow-500/15 via-orange-500/15 to-red-500/15'
+						: 'bg-gradient-to-br from-pink-500/15 from-15% via-green-500/15 to-yellow-500/15'}"
+				>
+					{#if $isPro}
+						<IconDazzled />
+					{:else}
+						<IconPro classNames="!mr-0" />
+					{/if}
+				</div>
+				<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+					{$isPro ? "Out of Credits" : "Upgrade Required"}
+				</h2>
+			</div>
+		</div>
+
+		<div class="text-gray-700 dark:text-gray-200">
+			{#if $isPro}
+				<p class="text-[15px] leading-relaxed">
+					You've used all your available credits. Purchase additional credits to continue using
+					HuggingChat.
+				</p>
+				<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
+					Your credits can be used in other HF services and external apps via Inference Providers.
+				</p>
+			{:else}
+				<p class="text-[15px] leading-relaxed">
+					You've reached your message limit. Upgrade to Hugging Face PRO to continue using
+					HuggingChat.
+				</p>
+				<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
+					It's also possible to use your PRO credits in your favorite AI tools.
+				</p>
+			{/if}
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			{#if $isPro}
+				<a
+					href="https://huggingface.co/settings/billing?add-credits=true"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
+				>
+					Purchase Credits
+				</a>
+			{:else}
+				<a
+					href="https://huggingface.co/subscribe/pro?from=HuggingChat"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
+				>
+					Upgrade to Pro
+				</a>
+			{/if}
+			<button
+				class="w-full rounded-xl bg-gray-200 px-5 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-300/80 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10"
+				onclick={close}
+			>
+				Maybe later
+			</button>
+		</div>
+	</div>
+</Modal>

package/src/ruvocal/src/lib/components/Switch.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { tap } from "$lib/utils/haptics";
+
+	interface Props {
+		checked: boolean;
+		name: string;
+	}
+
+	let { checked = $bindable(), name }: Props = $props();
+
+	function toggle() {
+		checked = !checked;
+		tap();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			toggle();
+		}
+	}
+</script>
+
+<input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
+<div
+	aria-checked={checked}
+	aria-roledescription="switch"
+	aria-label="switch"
+	role="switch"
+	tabindex="0"
+	onclick={toggle}
+	onkeydown={onKeydown}
+	class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 peer-checked:bg-blue-600 hover:bg-gray-400 peer-checked:hover:bg-blue-600 focus-visible:ring focus-visible:ring-offset-1 dark:bg-gray-600 dark:ring-gray-700 dark:hover:bg-gray-500 dark:peer-checked:hover:bg-blue-600 peer-checked:[&>div]:translate-x-3.5"
+>
+	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"></div>
+</div>