@aigentic/ruflo 3.7.0-alpha.69

package/src/ruvocal/src/lib/components/chat/UrlFetchModal.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import Modal from "../Modal.svelte";
+	import { base } from "$app/paths";
+	import { tick } from "svelte";
+	import { pickSafeMime } from "$lib/utils/mime";
+
+	interface Props {
+		open?: boolean;
+		acceptMimeTypes?: string[]; // optional client-side validation
+		onclose?: () => void;
+		onfiles?: (files: File[]) => void;
+	}
+
+	let { open = $bindable(false), acceptMimeTypes = [], onclose, onfiles }: Props = $props();
+
+	let urlValue = $state("");
+	let loading = $state(false);
+	let errorMsg = $state("");
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	async function focusInputSoon() {
+		// Wait for modal and content to mount, then focus and select
+		await tick();
+		await tick();
+		setTimeout(() => {
+			inputEl?.focus();
+			inputEl?.select();
+		}, 0);
+	}
+
+	$effect(() => {
+		if (open) {
+			// reset state when opening
+			urlValue = "";
+			errorMsg = "";
+			void focusInputSoon();
+		}
+	});
+
+	function isHttpsUrl(url: string) {
+		try {
+			const u = new URL(url);
+			return u.protocol === "https:";
+		} catch {
+			return false;
+		}
+	}
+
+	function matchesAllowed(contentType: string, allowed: string[]): boolean {
+		const ct = contentType.split(";")[0]?.trim().toLowerCase();
+		if (!ct) return false;
+		const [ctType, ctSubtype] = ct.split("/");
+		for (const a of allowed) {
+			const [aType, aSubtype] = a.toLowerCase().split("/");
+			const typeOk = aType === "*" || aType === ctType;
+			const subOk = aSubtype === "*" || aSubtype === ctSubtype;
+			if (typeOk && subOk) return true;
+		}
+		return false;
+	}
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	async function handleSubmit() {
+		errorMsg = "";
+		const trimmed = urlValue.trim();
+		if (!isHttpsUrl(trimmed)) {
+			errorMsg = "Enter a valid HTTPS URL.";
+			return;
+		}
+		loading = true;
+		try {
+			// Use server proxy directly for one URL to validate size/types before creating File
+			const params = new URLSearchParams({ url: trimmed });
+			if (acceptMimeTypes.length > 0) params.set("accept", acceptMimeTypes.join(","));
+			const proxyUrl = `${base}/api/fetch-url?${params}`;
+			const res = await fetch(proxyUrl);
+			if (!res.ok) {
+				const txt = await res.text();
+				throw new Error(txt || `Failed to fetch (${res.status})`);
+			}
+			const forwardedType = res.headers.get("x-forwarded-content-type");
+			const blob = await res.blob();
+			const mimeType = pickSafeMime(forwardedType, blob.type, trimmed);
+			// Optional client-side mime filter (same wildcard semantics as dropzone)
+			if (acceptMimeTypes.length > 0 && mimeType && !matchesAllowed(mimeType, acceptMimeTypes)) {
+				throw new Error("File type not allowed.");
+			}
+			const disp = res.headers.get("content-disposition");
+			const filename = (() => {
+				const filenameStar = disp?.match(/filename\*=UTF-8''([^;]+)/i)?.[1];
+				if (filenameStar) {
+					const cleaned = filenameStar.trim().replace(/['"]/g, "");
+					try {
+						return decodeURIComponent(cleaned);
+					} catch {
+						return cleaned;
+					}
+				}
+				const filenameMatch = disp?.match(/filename="?([^";]+)"?/i)?.[1];
+				if (filenameMatch) return filenameMatch.trim();
+				try {
+					const u = new URL(trimmed);
+					const last = u.pathname.split("/").pop() || "attachment";
+					return decodeURIComponent(last);
+				} catch {
+					return "attachment";
+				}
+			})();
+			const file = new File([blob], filename, { type: mimeType });
+			onfiles?.([file]);
+			close();
+		} catch (e) {
+			errorMsg = e instanceof Error ? e.message : "Failed to fetch URL";
+		} finally {
+			loading = false;
+		}
+	}
+</script>
+
+{#if open}
+	<Modal onclose={close} width="w-[90dvh] md:w-[480px]">
+		{#snippet children()}
+			<form
+				class="flex w-full flex-col gap-5 p-6"
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleSubmit();
+				}}
+			>
+				<div class="flex items-start justify-between">
+					<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Add from URL</h2>
+					<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="flex flex-col gap-2">
+					<label class="text-sm text-gray-600 dark:text-gray-400" for="fetch-url-input"
+						>Enter URL</label
+					>
+					<input
+						id="fetch-url-input"
+						bind:this={inputEl}
+						bind:value={urlValue}
+						type="url"
+						placeholder="https://example.com/file.txt"
+						class="w-full rounded-xl border border-gray-200 bg-white px-3 py-2 text-[15px] text-gray-800 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:ring-gray-700"
+						aria-invalid={errorMsg ? "true" : "false"}
+						onkeydown={(e) => {
+							if (e.key === "Enter") {
+								e.preventDefault();
+								handleSubmit();
+							}
+						}}
+					/>
+				</div>
+
+				{#if errorMsg}
+					<p class="-mt-1 text-sm text-red-600 dark:text-red-400">{errorMsg}</p>
+				{/if}
+				<p class="-mt-2 text-xs text-gray-500 dark:text-gray-400">Only HTTPS. Max 10MB.</p>
+
+				<div class="flex items-center justify-end gap-2">
+					<button
+						type="button"
+						class="inline-flex items-center 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 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
+						onclick={close}
+					>
+						Cancel
+					</button>
+					<button
+						type="submit"
+						class="inline-flex items-center rounded-xl border border-gray-900 bg-gray-900 px-3 py-1.5 text-sm font-semibold text-white hover:bg-black disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-100 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+						disabled={loading || urlValue.trim() === ""}
+					>
+						{#if loading}Fetching…{:else}Add{/if}
+					</button>
+				</div>
+			</form>
+		{/snippet}
+	</Modal>
+{/if}
+
+<style lang="postcss">
+	:global(input) {
+		font-family: inherit;
+	}
+	/* Uses app-level colors and rounded/blur styles via utility classes */
+	/* The Modal itself provides consistent container + scrollbar-custom styling */
+</style>

package/src/ruvocal/src/lib/components/chat/VoiceRecorder.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonCheckmark from "~icons/carbon/checkmark";
+	import IconArrowUp from "~icons/lucide/arrow-up";
+	import EosIconsLoading from "~icons/eos-icons/loading";
+	import IconLoading from "$lib/components/icons/IconLoading.svelte";
+	import AudioWaveform from "$lib/components/voice/AudioWaveform.svelte";
+
+	interface Props {
+		isTranscribing: boolean;
+		isTouchDevice: boolean;
+		oncancel: () => void;
+		onconfirm: (audioBlob: Blob) => void;
+		onsend: (audioBlob: Blob) => void;
+		onerror: (message: string) => void;
+	}
+
+	let { isTranscribing, isTouchDevice, oncancel, onconfirm, onsend, onerror }: Props = $props();
+
+	let mediaRecorder: MediaRecorder | null = $state(null);
+	let audioChunks: Blob[] = $state([]);
+	let analyser: AnalyserNode | null = $state(null);
+	let frequencyData: Uint8Array = $state(new Uint8Array(32));
+	let animationFrameId: number | null = $state(null);
+	let audioContext: AudioContext | null = $state(null);
+	let mediaStream: MediaStream | null = $state(null);
+
+	function startVisualization() {
+		function update() {
+			if (analyser) {
+				const data = new Uint8Array(analyser.frequencyBinCount);
+				analyser.getByteFrequencyData(data);
+				// Create new array to trigger Svelte reactivity
+				frequencyData = data;
+			}
+			animationFrameId = requestAnimationFrame(update);
+		}
+		update();
+	}
+
+	function stopVisualization() {
+		if (animationFrameId !== null) {
+			cancelAnimationFrame(animationFrameId);
+			animationFrameId = null;
+		}
+	}
+
+	async function startRecording() {
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({
+				audio: {
+					channelCount: 1,
+					sampleRate: 16000, // Whisper prefers 16kHz
+					echoCancellation: true,
+					noiseSuppression: true,
+				},
+			});
+
+			mediaStream = stream;
+
+			// Set up audio context for visualization
+			audioContext = new AudioContext();
+			const source = audioContext.createMediaStreamSource(stream);
+			analyser = audioContext.createAnalyser();
+			analyser.fftSize = 64; // Small for performance, gives 32 frequency bins
+			analyser.smoothingTimeConstant = 0.4;
+			source.connect(analyser);
+			frequencyData = new Uint8Array(analyser.frequencyBinCount);
+
+			// Start MediaRecorder
+			// Use webm/opus for broad browser support
+			const mimeType = MediaRecorder.isTypeSupported("audio/webm;codecs=opus")
+				? "audio/webm;codecs=opus"
+				: "audio/webm";
+
+			mediaRecorder = new MediaRecorder(stream, { mimeType });
+			audioChunks = [];
+
+			mediaRecorder.ondataavailable = (e) => {
+				if (e.data.size > 0) {
+					audioChunks = [...audioChunks, e.data];
+				}
+			};
+
+			mediaRecorder.start(100); // Collect data every 100ms
+			startVisualization();
+		} catch (err) {
+			if (err instanceof DOMException) {
+				if (err.name === "NotAllowedError") {
+					onerror("Microphone access denied. Please allow in browser settings.");
+				} else if (err.name === "NotFoundError") {
+					onerror("No microphone found.");
+				} else {
+					onerror(`Microphone error: ${err.message}`);
+				}
+			} else {
+				onerror("Could not access microphone.");
+			}
+		}
+	}
+
+	function stopRecording(): Promise<Blob | null> {
+		return new Promise((resolve) => {
+			stopVisualization();
+
+			// Stop all audio tracks
+			if (mediaStream) {
+				mediaStream.getTracks().forEach((track) => track.stop());
+				mediaStream = null;
+			}
+
+			// Close audio context
+			if (audioContext) {
+				audioContext.close();
+				audioContext = null;
+			}
+			analyser = null;
+
+			if (!mediaRecorder || mediaRecorder.state === "inactive") {
+				mediaRecorder = null;
+				resolve(
+					audioChunks.length > 0
+						? new Blob(audioChunks, { type: audioChunks[0]?.type || "audio/webm" })
+						: null
+				);
+				return;
+			}
+
+			// Wait for final data before resolving
+			mediaRecorder.onstop = () => {
+				const mimeType = audioChunks[0]?.type || "audio/webm";
+				const blob = audioChunks.length > 0 ? new Blob(audioChunks, { type: mimeType }) : null;
+				mediaRecorder = null;
+				resolve(blob);
+			};
+
+			mediaRecorder.stop();
+		});
+	}
+
+	async function handleCancel() {
+		await stopRecording();
+		oncancel();
+	}
+
+	async function handleConfirm() {
+		const audioBlob = await stopRecording();
+		if (audioBlob && audioBlob.size > 0) {
+			if (isTouchDevice) {
+				onsend(audioBlob);
+			} else {
+				onconfirm(audioBlob);
+			}
+		} else {
+			onerror("No audio recorded. Please try again.");
+		}
+	}
+
+	onMount(() => {
+		startRecording();
+	});
+
+	onDestroy(() => {
+		// Fire and forget - cleanup happens but we don't wait
+		stopRecording();
+	});
+</script>
+
+<div class="flex h-full w-full items-center justify-between px-3 py-1.5">
+	<!-- Cancel button -->
+	<button
+		type="button"
+		class="btn grid size-8 place-items-center rounded-full border bg-white text-black shadow transition-none hover:bg-gray-100 dark:border-transparent dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500 sm:size-7"
+		onclick={handleCancel}
+		aria-label="Cancel recording"
+	>
+		<CarbonClose class="size-4" />
+	</button>
+
+	<!-- Waveform / Loading -->
+	<div class="flex h-12 flex-1 items-center overflow-hidden pl-2.5 pr-1.5">
+		{#if isTranscribing}
+			<div class="flex h-full w-full items-center justify-center">
+				<IconLoading classNames="text-gray-400" />
+			</div>
+		{:else}
+			<AudioWaveform {frequencyData} minHeight={4} maxHeight={40} />
+		{/if}
+	</div>
+
+	<!-- Confirm/Send button -->
+	<button
+		type="button"
+		class="btn grid size-8 place-items-center rounded-full border shadow transition-none disabled:opacity-50 sm:size-7 {isTouchDevice
+			? 'border-transparent bg-black text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200'
+			: 'bg-white text-black hover:bg-gray-100 dark:border-transparent dark:bg-gray-600 dark:text-white dark:hover:bg-gray-500'}"
+		onclick={handleConfirm}
+		disabled={isTranscribing}
+		aria-label={isTranscribing
+			? "Transcribing..."
+			: isTouchDevice
+				? "Send message"
+				: "Confirm and transcribe"}
+	>
+		{#if isTranscribing}
+			<EosIconsLoading class="size-4" />
+		{:else if isTouchDevice}
+			<IconArrowUp class="size-4" />
+		{:else}
+			<CarbonCheckmark class="size-4" />
+		{/if}
+	</button>
+</div>

package/src/ruvocal/src/lib/components/icons/IconBurger.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={classNames}
+	width="1em"
+	height="1em"
+	fill="none"
+	viewBox="0 0 16 16"
+	><path
+		d="M8.795 10.418a.84.84 0 1 1 0 1.681H1.907a.84.84 0 0 1 0-1.681h6.888ZM14.093 3.9a.841.841 0 0 1 0 1.682H1.907a.84.84 0 0 1 0-1.682h12.186Z"
+		fill="currentColor"
+	/>
+</svg>

package/src/ruvocal/src/lib/components/icons/IconCheap.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	class={classNames}
+	width="1em"
+	height="1em"
+	viewBox="0 0 12 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M6 7.778a.856.856 0 0 1-.628-.261.858.858 0 0 1-.26-.628c-.001-.245.086-.454.26-.628A.861.861 0 0 1 6 6c.244 0 .453.087.628.261a.852.852 0 0 1 .26.628.867.867 0 0 1-.26.628.844.844 0 0 1-.628.26Zm-2.056-4h4.112l.566-1.134a.423.423 0 0 0-.017-.433A.42.42 0 0 0 8.222 2H3.778c-.17 0-.298.07-.383.211a.424.424 0 0 0-.017.433l.566 1.134ZM4.4 10h3.2c.667 0 1.233-.231 1.7-.694.467-.463.7-1.032.7-1.706 0-.281-.048-.556-.144-.822a2.404 2.404 0 0 0-.412-.722L8.29 4.666H3.71l-1.155 1.39a2.404 2.404 0 0 0-.412.722C2.048 7.044 2 7.318 2 7.6c0 .674.232 1.243.695 1.706.463.463 1.031.694 1.705.694Z"
+		fill="currentColor"
+	/>
+</svg>

package/src/ruvocal/src/lib/components/icons/IconChevron.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	width="1em"
+	height="1em"
+	viewBox="0 0 15 6"
+	class={classNames}
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M1.67236 1L7.67236 7L13.6724 1"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

package/src/ruvocal/src/lib/components/icons/IconDazzled.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	class={classNames}
+	fill="none"
+	viewBox="0 0 26 23"
+>
+	<path
+		fill="url(#gr)"
+		d="M.93 10.65A10.17 10.17 0 0 1 11.11.48h4.67a9.45 9.45 0 0 1 0 18.89H4.53L1.62 22.2a.38.38 0 0 1-.69-.28V10.65Z"
+	/>
+	<path
+		fill="#000"
+		fill-rule="evenodd"
+		d="M11.52 7.4a1.86 1.86 0 1 1-3.72 0 1.86 1.86 0 0 1 3.72 0Zm7.57 0a1.86 1.86 0 1 1-3.73 0 1.86 1.86 0 0 1 3.73 0ZM8.9 12.9a.55.55 0 0 0-.11.35.76.76 0 0 1-1.51 0c0-.95.67-1.94 1.76-1.94 1.09 0 1.76 1 1.76 1.94H9.3a.55.55 0 0 0-.12-.35c-.06-.07-.1-.08-.13-.08s-.08 0-.14.08Zm4.04 0a.55.55 0 0 0-.12.35h-1.51c0-.95.68-1.94 1.76-1.94 1.1 0 1.77 1 1.77 1.94h-1.51a.55.55 0 0 0-.12-.35c-.06-.07-.11-.08-.14-.08-.02 0-.07 0-.13.08Zm-1.89.79c-.02 0-.07-.01-.13-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.75 1.95 1.1 0 1.77-1 1.77-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.14.08Zm4.04 0c-.03 0-.08-.01-.14-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.76 1.95 1.08 0 1.76-1 1.76-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.13.08Zm1.76-.44c0-.16.05-.28.12-.35.06-.07.1-.08.13-.08s.08 0 .14.08c.06.07.11.2.11.35a.76.76 0 0 0 1.51 0c0-.95-.67-1.94-1.76-1.94-1.09 0-1.76 1-1.76 1.94h1.5Z"
+		clip-rule="evenodd"
+	/>
+	<defs>
+		<radialGradient
+			id="gr"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientTransform="matrix(0 31.37 -34.85 0 13.08 -9.02)"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD21E" />
+			<stop offset="1" stop-color="red" />
+		</radialGradient>
+	</defs>
+</svg>

package/src/ruvocal/src/lib/components/icons/IconFast.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	class={classNames}
+	width="1em"
+	height="1em"
+	viewBox="0 0 12 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M6 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm0 .8A3.2 3.2 0 0 1 9.2 6c0 .96-.4 1.8-1.08 2.4-.56-.52-1.32-.8-2.12-.8s-1.52.28-2.12.8A3.15 3.15 0 0 1 2.8 6 3.2 3.2 0 0 1 6 2.8Zm-.8.8a.4.4 0 1 0 0 .8.4.4 0 0 0 0-.8Zm1.6 0a.4.4 0 1 0 0 .8.4.4 0 0 0 0-.8Zm1.236 1.176c-.052 0-.1.012-.156.024l-1.28.528-.108.044a.807.807 0 0 0-1.053.059.796.796 0 0 0-.008 1.13.796.796 0 0 0 .869.179.81.81 0 0 0 .5-.628l.092-.04 1.288-.52.008-.004a.4.4 0 0 0-.152-.772ZM4 4.8a.4.4 0 1 0 0 .8.4.4 0 0 0 0-.8Z"
+		fill="currentColor"
+	/>
+</svg>

package/src/ruvocal/src/lib/components/icons/IconLoading.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<div class={"inline-flex h-8 flex-none items-center gap-1 " + classNames}>
+	<div
+		class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.25s;"
+	></div>
+	<div
+		class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.5s;"
+	></div>
+	<div
+		class="h-1 w-1 flex-none animate-bounce rounded-full bg-gray-500 dark:bg-gray-400"
+		style="animation-delay: 0.75s;"
+	></div>
+</div>

package/src/ruvocal/src/lib/components/icons/IconMCP.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={classNames}
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 24"
+>
+	<g
+		fill="none"
+		stroke="currentColor"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="1.5"
+	>
+		<path
+			d="m3.5 11.75l8.172-8.171a2.828 2.828 0 1 1 4 4m0 0L9.5 13.75m6.172-6.171a2.828 2.828 0 0 1 4 4l-6.965 6.964a1 1 0 0 0 0 1.414L14 21.25"
+		/>
+		<path d="m17.5 9.75l-6.172 6.171a2.829 2.829 0 0 1-4-4L13.5 5.749" />
+	</g>
+</svg>

package/src/ruvocal/src/lib/components/icons/IconMoon.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	width="50"
+	height="50"
+	class={classNames}
+	viewBox="0 0 50 50"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M25.054 43.02C20.02 43.02 15.762 41.278 12.28 37.794C8.79695 34.31 7.05496 30.052 7.05396 25.02C7.05396 20.42 8.55396 16.428 11.554 13.044C14.554 9.66 18.387 7.685 23.054 7.12C23.487 7.053 23.87 7.112 24.204 7.296C24.537 7.48 24.804 7.721 25.004 8.02C25.204 8.318 25.312 8.668 25.33 9.07C25.347 9.471 25.222 9.854 24.954 10.22C24.3955 11.0688 23.9655 11.9955 23.678 12.97C23.3906 13.961 23.2477 14.9882 23.254 16.02C23.254 19.02 24.304 21.57 26.404 23.67C28.504 25.77 31.054 26.82 34.054 26.82C35.087 26.82 36.112 26.67 37.13 26.37C38.096 26.0936 39.0145 25.6721 39.854 25.12C40.22 24.886 40.596 24.778 40.98 24.796C41.364 24.813 41.705 24.904 42.004 25.07C42.337 25.236 42.596 25.486 42.78 25.82C42.964 26.153 43.022 26.553 42.954 27.02C42.487 31.62 40.529 35.436 37.08 38.47C33.63 41.503 29.622 43.02 25.054 43.02Z"
+		fill="#D2D5DB"
+	/>
+</svg>

package/src/ruvocal/src/lib/components/icons/IconNew.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	class={classNames}
+	width="1em"
+	height="1em"
+	fill="none"
+	viewBox="0 0 16 16"
+	><path
+		d="M7.258 1.856c.333 0 .66.024.979.07-.558.319-.972.86-1.123 1.503A5.254 5.254 0 1 0 9.32 13.513l.275-.127c.334-.17.712-.229 1.08-.17l.158.031.01.003 1.343.36-.359-1.345a1.77 1.77 0 0 1 .137-1.247 5.23 5.23 0 0 0 .538-2.041 2.356 2.356 0 0 0 1.544-1 6.808 6.808 0 0 1-.676 3.742v.001c-.034.066-.031.116-.025.14l.36 1.345a1.572 1.572 0 0 1-1.823 1.945l-.1-.024-1.334-.357a.2.2 0 0 0-.14.018l-.012.005A6.825 6.825 0 1 1 7.259 1.856Zm4.837-1.36c.434 0 .785.352.785.786v1.905h1.9a.785.785 0 0 1 0 1.57h-1.9v1.9a.786.786 0 1 1-1.57 0v-1.9H9.404a.785.785 0 0 1 0-1.57h1.906V1.282c0-.434.352-.787.785-.787Z"
+		fill="currentColor"
+	/></svg
+>