ruflo 3.7.0-alpha.11 → 3.7.0-alpha.13

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

@@ -1,214 +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>
+<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

@@ -1,20 +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>
+<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

@@ -1,20 +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>
+<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

@@ -1,24 +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>
+<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

@@ -1,40 +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>
+<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>