fragment-tools 0.2.5 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-tools",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "A web development environment for creative coding",
   "main": "index.js",
   "bin": {
@@ -21,20 +21,19 @@
   },
   "homepage": "https://github.com/raphaelameaume/fragment#readme",
   "dependencies": {
-    "@clack/core": "^0.3.3",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.4",
-    "body-parser": "^1.20.0",
+    "@clack/core": "^0.4.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "body-parser": "^2.2.0",
     "changedpi": "^1.0.4",
-    "chokidar": "^3.5.2",
     "convert-length": "^1.0.1",
-    "get-port": "^6.0.0",
+    "get-port": "^7.1.0",
     "gifenc": "^1.0.3",
     "glslify": "^7.1.1",
     "is-unicode-supported": "^2.0.0",
     "kleur": "^4.1.4",
     "sade": "^1.7.4",
     "svelte": "^5.19.0",
-    "vite": "^5.4.12",
+    "vite": "^6.3.5",
     "webm-writer": "^1.0.0",
     "ws": "^8.2.3"
   },

package/src/cli/createConfig.js

@@ -6,6 +6,7 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 import checkDependencies from './plugins/check-dependencies.js';
 import { file } from './utils.js';
 import { log } from './log.js';
+import sketches from './plugins/sketches.js';
 
 export async function loadConfig({ cwd, filepath }) {
 	try {
@@ -58,6 +59,7 @@ export async function createConfig(
 ) {
 	const entriesPaths = entries.map((entry) => path.join(cwd, entry));
 	const root = file('../client');
+	const publicDir = path.join(cwd, 'public');
 	const app = path.join(root, 'app');
 
 	log.info(`Creating Vite configuration...`);
@@ -72,6 +74,7 @@ export async function createConfig(
 			configFile: false,
 			root,
 			logLevel: dev ? 'info' : 'silent',
+			publicDir,
 			resolve: {
 				alias: [
 					{
@@ -110,6 +113,7 @@ export async function createConfig(
 					entriesPaths,
 					build,
 				}),
+				sketches({ cwd, entries }),
 			],
 			define: {
 				__CWD__: `${JSON.stringify(cwd)}`,

package/src/cli/plugins/sketches.js

@@ -0,0 +1,44 @@
+import path from 'node:path';
+
+export default function sketches({ cwd, entries }) {
+	const virtualModuleId = 'virtual:sketches';
+	const resolvedVirtualModuleId = '\0' + virtualModuleId;
+
+	return {
+		name: 'fragment-plugin-sketches',
+		resolveId(id) {
+			if (id === virtualModuleId) {
+				return resolvedVirtualModuleId;
+			}
+		},
+		load(id) {
+			if (id === resolvedVirtualModuleId) {
+				return `
+				export const sketches = {
+    ${entries
+		.map((entry) => {
+			const entryPath = path.join(cwd, entry);
+
+			return `"${entry}": () => import("${entryPath}")`;
+		})
+		.join(',')}
+};
+
+export const onSketchReload = (fn) => {
+    if (import.meta.hot) {
+        import.meta.hot.data.onSketchChange = fn;
+    }
+};
+
+if (import.meta.hot) {
+    import.meta.hot.accept((m) => {
+        if (typeof import.meta.hot.data.onSketchChange === "function") {
+            import.meta.hot.data.onSketchChange(m);
+        }
+    });
+}
+				`;
+			}
+		},
+	};
+}

package/src/client/app/components/Init.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { assignSketchFiles } from '../triggers/shared.js';
 	import { sketchesManager } from '../state/sketches.svelte.js';
-	import { onSketchReload } from '@fragment/sketches';
+	import { onSketchReload } from 'virtual:sketches';
 	import { getFilename } from '../utils/file.utils.js';
 	import '../utils/glslErrors.js';
 

package/src/client/app/modules/Params.svelte

@@ -139,8 +139,6 @@
 					disabled,
 					__initialValue: initialValue,
 				} = prop}
-				{@const isDisabled =
-					typeof disabled === 'function' ? disabled() : disabled}
 				{#if !hidden}
 					<Field
 						context={sketch.key}
@@ -150,9 +148,9 @@
 						{initialValue}
 						{type}
 						{index}
-						disabled={isDisabled}
+						{disabled}
 						bind:params={sketchProps[key].params}
-						triggers={prop.triggers}
+						bind:triggers={prop.triggers}
 						onclick={(event) => {
 							sketch.version++;
 							// value(event, sketch.params);

package/src/client/app/renderers/FragmentRenderer.js

@@ -15,7 +15,7 @@ export let onMountPreview = ({ canvas, id }) => {
 		frag,
 	});
 
-	return { frag };
+	return { canvas, frag };
 };
 
 export let onResizePreview = ({ id, width, height, pixelRatio }) => {

package/src/client/app/state/Sketch.svelte.js

@@ -199,6 +199,10 @@ class Sketch {
 			typeof instanceProp.hidden === 'function'
 				? instanceProp.hidden
 				: () => instanceProp.hidden;
+		let __disabled =
+			typeof instanceProp.disabled === 'function'
+				? instanceProp.disabled
+				: () => instanceProp.disabled;
 
 		let initialValue = deepClone(value);
 
@@ -215,6 +219,9 @@ class Sketch {
 			__initialValue: initialValue,
 			__currentValue: deepClone(value),
 			__hidden,
+			__disabled,
+			hidden: __hidden(),
+			disabled: __disabled(),
 			type,
 			params: structuredClone(params),
 			triggers,
@@ -256,6 +263,7 @@ class Sketch {
 
 		Object.keys(this.props).forEach((key) => {
 			this.props[key].hidden = this.props[key].__hidden();
+			this.props[key].disabled = this.props[key].__disabled();
 		});
 
 		this.version++;
@@ -438,6 +446,8 @@ class Sketch {
 
 				// sync hidden
 				prop.hidden = prop.__hidden();
+				// sync disabled state
+				prop.disabled = prop.__disabled();
 
 				// sync params
 				if (instanceProp.params) {

package/src/client/app/state/rendering.svelte.js

@@ -150,7 +150,7 @@ class Rendering {
 	}
 
 	findRenderer({ renderingMode }) {
-		return this.renderers[renderingMode].instance;
+		return this.renderers[renderingMode]?.instance;
 	}
 
 	override(config) {
@@ -605,7 +605,7 @@ export class Render {
 			return;
 		}
 
-		this.record = await exports.record(this.canvas, {
+		this.record = exports.record(this.canvas, {
 			filename: sketch.key,
 			pattern: sketch.filenamePattern,
 			exportDir: sketch.exportDir,
@@ -627,6 +627,8 @@ export class Render {
 			onComplete: (params) => {
 				sketch.afterRecord.forEach((fn) => fn(params));
 				this.record = null;
+				this.paused = false;
+				this.recording = false;
 			},
 		});
 	}
@@ -647,7 +649,8 @@ export class Render {
 			this.sketch.instance?.dispose?.();
 			this.sketch.reset();
 
-			this.init();
+			this.loading = false;
+			this.loaded = false;
 		} catch (error) {
 			console.error(error);
 			displayError(error, this.sketch.key);

package/src/client/app/state/sketches.svelte.js

@@ -1,5 +1,7 @@
 import { displayError } from '../state/errors.svelte.js';
-import { sketches as all } from '@fragment/sketches';
+
+import { sketches as all } from 'virtual:sketches';
+
 import Sketch from './Sketch.svelte.js';
 import { rendering } from './rendering.svelte.js';
 import { removeHotListeners } from '../triggers/index.js';
@@ -15,7 +17,7 @@ class SketchesManager {
 
 			await rendering.preloadRenderer({
 				renderingMode: sketch.rendering,
-				renderer: sketch.renderer,
+				customRenderer: sketch.renderer,
 			});
 
 			return sketch;

package/src/client/app/ui/Field.svelte

@@ -52,7 +52,7 @@
 		onchange,
 		onclick = () => {},
 		children,
-		triggers = [],
+		triggers = $bindable([]),
 	} = $props();
 
 	let showTriggers = $state(false);
@@ -165,7 +165,7 @@
 	{#if triggerable}
 		<FieldSection {key} visible={showTriggers} secondary>
 			<FieldTriggers
-				{triggers}
+				bind:triggers
 				{onTrigger}
 				{context}
 				triggerable={fieldType === fieldTypes.BUTTON}
@@ -222,10 +222,6 @@
 		padding-bottom: 0px !important;
 	}
 
-	.field.disabled {
-		pointer-events: none;
-	}
-
 	.field__actions {
 		display: flex;
 		align-items: center;

package/src/client/app/ui/FieldSection.svelte

@@ -16,6 +16,7 @@
 	class="field__section"
 	class:visible
 	class:secondary
+	class:disabled
 	class:nameless={displayName === null}
 >
 	<div class="field__infos">
@@ -48,8 +49,10 @@
 		grid-template-columns: 1fr;
 	}
 
-	:global(body:not(.fragment-dragging)) .field__section:hover .field__label,
-	.field__section:focus-within .field__label {
+	:global(body:not(.fragment-dragging))
+		.field__section:not(.disabled):hover
+		.field__label,
+	.field__section:not(.disabled):focus-within .field__label {
 		opacity: 1;
 	}
 

package/src/client/app/ui/FieldTrigger.svelte

@@ -51,7 +51,7 @@
 		onchange = () => {},
 		onTrigger = () => {},
 		onDelete = () => {},
-		params = { key: [] },
+		params = $bindable({ key: [] }),
 	} = $props();
 
 	let validInputs = $derived.by(() =>
@@ -202,11 +202,11 @@
 			/>
 		{/if}
 		{#if inputType === 'Keyboard'}
-			<TextInput value={key} label="key" oninput={onTextChange} />
+			<TextInput bind:value={key} label="key" oninput={onTextChange} />
 		{/if}
 		{#if inputType === 'MIDI'}
 			<TextInput
-				value={key}
+				bind:value={key}
 				label={['onNoteOn', 'onNoteOff'].includes(eventName)
 					? 'note'
 					: 'number'}

package/src/client/app/ui/FieldTriggers.svelte

@@ -31,17 +31,15 @@
 		{#each triggers as trigger, index}
 			<FieldTrigger
 				{index}
+				bind:triggers
 				inputType={trigger.inputType}
 				eventName={trigger.eventName}
-				params={trigger.params}
+				bind:params={trigger.params}
 				enabled={trigger.enabled}
 				{onTrigger}
 				{context}
 				{controllable}
 				{triggerable}
-				onchange={(index, trigger) => {
-					triggers[index] = trigger;
-				}}
 				onDelete={onTriggerDelete}
 			/>
 		{/each}

package/src/client/app/ui/ModuleRenderer.svelte

@@ -51,7 +51,6 @@
 					Something went wrong while loading module:
 					<span class="module-name">{name}</span>
 				</p>
-				<p class="error">{error.message}</p>
 			</div>
 		</div>
 	</div>

package/src/client/app/ui/SketchRenderer.svelte

@@ -63,6 +63,14 @@
 		};
 	});
 
+	$effect(() => {
+		if (exports.recording && !render?.recording) {
+			render.startRecording();
+		} else if (render?.recording && !exports.recording) {
+			render.stopRecording();
+		}
+	});
+
 	function checkForRefresh(event) {
 		if (!event.metaKey && !event.ctrlKey) {
 			event.preventDefault();
@@ -97,12 +105,6 @@
 	function checkForRecord(event) {
 		if (event.shiftKey) {
 			exports.recording = !exports.recording;
-
-			if (exports.recording && !render.recording) {
-				render.startRecording();
-			} else if (render.recording && !exports.recording) {
-				render.stopRecording();
-			}
 		}
 	}
 

package/src/client/app/ui/fields/ButtonInput.svelte

@@ -11,7 +11,7 @@
 	} = $props();
 </script>
 
-<div class="button-container" class:disabled>
+<div class="button-input" class:disabled>
 	<button
 		class="button"
 		{disabled}
@@ -26,7 +26,7 @@
 </div>
 
 <style>
-	.button-container {
+	.button-input {
 		display: flex;
 		width: 100%;
 	}
@@ -57,15 +57,15 @@
 		color: var(--color-text-input-disabled);
 	}
 
-	:global(body:not(.fragment-dragging)) .button:hover {
+	:global(body:not(.fragment-dragging)) .button:not(:disabled):hover {
 		color: var(--color-text);
 
 		box-shadow: inset 0 0 0 1px
 			var(--box-shadow-color-active, var(--color-active));
 	}
 
-	:global(body:not(.fragment-dragging)) .button:active,
-	:global(body:not(.fragment-dragging)) .button:focus-visible {
+	:global(body:not(.fragment-dragging)) .button:not(:disabled):active,
+	:global(body:not(.fragment-dragging)) .button:not(:disabled):focus-visible {
 		box-shadow: 0 0 0 2px
 			var(--box-shadow-color-active, var(--color-active));
 	}

package/src/client/app/ui/fields/ColorInput.svelte

@@ -217,7 +217,9 @@
 		pointer-events: none;
 	}
 
-	:global(body:not(.fragment-dragging)) .mirror:hover {
+	:global(body:not(.fragment-dragging))
+		.color-input:not(.disabled)
+		.mirror:hover {
 		box-shadow: inset 0 0 0 1px var(--box-shadow-color, var(--color-active));
 	}
 
@@ -229,8 +231,12 @@
 		width: 100%;
 		height: 100%;
 		opacity: 0;
-		cursor: pointer;
+
 		background: transparent;
 		border: none;
 	}
+
+	.color-input:not(.disabled) .input {
+		cursor: pointer;
+	}
 </style>

package/src/client/app/ui/fields/IntervalInput.svelte

@@ -81,7 +81,7 @@
 			value[0] = newValues[0];
 			value[1] = newValues[1];
 
-			onchange(value);
+			onchange(newValues);
 		}
 	}
 
@@ -94,9 +94,10 @@
 	}
 
 	function handleValueChange(index, newValue) {
-		value[index] = newValue;
+		let newValues = [...value];
+		newValues[index] = newValue;
 
-		onchange(value);
+		onchange(newValues);
 	}
 
 	$effect(() => {
@@ -141,7 +142,7 @@
 				{max}
 				progress={false}
 				value={value[0]}
-				on:change={(event) => handleValueChange(0, event.detail)}
+				onchange={(event) => handleValueChange(0, event)}
 			/>
 			<NumberInput
 				{label}
@@ -154,7 +155,7 @@
 				{max}
 				progress={false}
 				value={value[1]}
-				on:change={(event) => handleValueChange(1, event.detail)}
+				onchange={(event) => handleValueChange(1, event)}
 			/>
 		</div>
 	</FieldInputRow>

package/src/client/app/ui/fields/ProgressInput.svelte

@@ -87,7 +87,7 @@
 	aria-valuemin={min}
 	aria-valuemax={max}
 	aria-valuenow={value}
-	tabindex="0"
+	tabindex={disabled ? -1 : 0}
 >
 	<div
 		class="fill"

package/src/client/index.html

@@ -2,9 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" href="/favicon.ico" />
+		<link rel="icon" href="./public/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="stylesheet" href="/css/global.css" />
+		<link rel="stylesheet" href="./public/css/global.css" />
 		<title>fragment</title>
 	</head>
 	<body>
@@ -13,6 +13,6 @@
 			<span class="loading__step">▢ Loading dependencies...</span>
 		</div>
 		<div id="app"></div>
-		<script type="module" src="/main.js"></script>
+		<script type="module" src="./main.js"></script>
 	</body>
 </html>

package/src/client/public/css/global.css

@@ -8,7 +8,7 @@
 		local('Jetbrains-Mono-Regular'),
 		local('Jetbrains Mono'),
 		local('Jetbrains-Mono'),
-		url('/fonts/JetBrainsMono-Regular.woff2') format('woff2');
+		url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
 }
 
 :root {

package/src/client/public/icons/chevron-bottom.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 10.75L12 14.25L8.75 10.75"></path>
-</svg>

package/src/client/public/icons/chevron-right.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.75 8.75L14.25 12L10.75 15.25"/>
-</svg>

package/src/client/public/icons/chevron-top.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.25 14.25L12 10.75L8.75 14.25"></path>
-</svg>

package/src/client/public/icons/columns-horizontal.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"/>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 12L5 12"/>
-</svg>

package/src/client/public/icons/columns-vertical.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V17.25C19.25 18.3546 18.3546 19.25 17.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V6.75Z"/>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 5V19"/>
-</svg>

package/src/client/public/icons/folder-plus.svg

@@ -1,6 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.25 19.25H6.75C5.64543 19.25 4.75 18.3546 4.75 17.25V7.75H17.25C18.3546 7.75 19.25 8.64543 19.25 9.75V12.25"/>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.5 7.5L12.5685 5.7923C12.2181 5.14977 11.5446 4.75 10.8127 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V11"/>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 14.75V19.25"/>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.25 17L14.75 17"/>
-</svg>

package/src/client/public/icons/lock.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V10.3427C7.75 8.78147 7.65607 7.04125 8.74646 5.9239C9.36829 5.2867 10.3745 4.75 12 4.75C13.6255 4.75 14.6317 5.2867 15.2535 5.9239C16.3439 7.04125 16.25 8.78147 16.25 10.3427V10.5"></path>
-</svg>

package/src/client/public/icons/picture-in-picture.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.25 17.25H6.75C5.64543 17.25 4.75 16.3546 4.75 15.25V6.75C4.75 5.64543 5.64543 4.75 6.75 4.75H17.25C18.3546 4.75 19.25 5.64543 19.25 6.75V9.25"/>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.75 13.75C10.75 13.1977 11.1977 12.75 11.75 12.75H18.25C18.8023 12.75 19.25 13.1977 19.25 13.75V18.25C19.25 18.8023 18.8023 19.25 18.25 19.25H11.75C11.1977 19.25 10.75 18.8023 10.75 18.25V13.75Z"/>
-</svg>

package/src/client/public/icons/trash.svg

@@ -1,5 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6.75 7.75L7.59115 17.4233C7.68102 18.4568 8.54622 19.25 9.58363 19.25H14.4164C15.4538 19.25 16.319 18.4568 16.4088 17.4233L17.25 7.75"/>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 7.5V6.75C9.75 5.64543 10.6454 4.75 11.75 4.75H12.25C13.3546 4.75 14.25 5.64543 14.25 6.75V7.5"/>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 7.75H19"/>
-</svg>

package/src/client/public/icons/trigger.svg

@@ -1,8 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 8H7.25"></path>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12.75 8H19.25"></path>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.75 16H12.25"></path>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.75 16H19.25"></path>
-  <circle cx="10" cy="8" r="2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
-  <circle cx="15" cy="16" r="2.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
-</svg>

package/src/client/public/icons/unlock.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" fill="none" viewBox="0 0 24 24">
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z"></path>
-  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.75 10.5V9.84343C7.75 8.61493 7.70093 7.29883 8.42416 6.30578C8.99862 5.51699 10.0568 4.75 12 4.75C14 4.75 15.25 6.25 15.25 6.25"></path>
-</svg>