@marianmeres/stuic 2.0.0-next.4 → 2.0.2

package/dist/actions/file-dropzone.svelte.d.ts

@@ -0,0 +1,8 @@
+interface FileDropzoneOptions {
+    enabled?: boolean;
+    inputEl: HTMLInputElement;
+    allowClick?: boolean;
+    processFiles?: (files: FileList | null) => any | Promise<any>;
+}
+export declare function fileDropzone(el: HTMLElement, fn?: () => FileDropzoneOptions): void;
+export {};

package/dist/actions/file-dropzone.svelte.js

@@ -0,0 +1,43 @@
+export function fileDropzone(el, fn) {
+    $effect(() => {
+        let { enabled = true, allowClick = true, inputEl, processFiles, } = fn?.() || {};
+        if (!enabled)
+            return;
+        if (!inputEl) {
+            console.warn("Missing inputEl instance, can't continue...");
+            return;
+        }
+        function preventDefault(e) {
+            e.preventDefault();
+            // e.stopPropagation();
+        }
+        function handle_drop(e) {
+            handle_files(e?.dataTransfer?.files ?? null);
+        }
+        function handle_change(e) {
+            if (e.target instanceof HTMLInputElement) {
+                handle_files(e.target.files);
+            }
+        }
+        function handle_files(files) {
+            processFiles?.(files);
+        }
+        function handle_click() {
+            allowClick && inputEl.click();
+        }
+        // over/drop are critical, enter/leave I'm not sure
+        const PREVENT = ["dragenter", "dragover", "dragleave", "drop"];
+        PREVENT.forEach((name) => el.addEventListener(name, preventDefault));
+        //
+        el.addEventListener("drop", handle_drop);
+        el.addEventListener("click", handle_click);
+        inputEl.addEventListener("change", handle_change);
+        //
+        return () => {
+            PREVENT.forEach((name) => el.removeEventListener(name, preventDefault));
+            el.removeEventListener("drop", handle_drop);
+            el.removeEventListener("click", handle_click);
+            inputEl.removeEventListener("change", handle_change);
+        };
+    });
+}

package/dist/actions/highlight-dragover.svelte.js

@@ -11,7 +11,7 @@ export function highlightDragover(el, fn) {
     // }
     function prevent(e) {
         e.preventDefault();
-        e.stopPropagation();
+        // e.stopPropagation();
     }
     const HIGH = ["dragenter", "dragover"];
     const UNHIGH = ["dragleave", "drop"];
@@ -22,13 +22,26 @@ export function highlightDragover(el, fn) {
             return;
         if (!Array.isArray(classes))
             classes = [classes];
+        // allow strings
+        classes = classes.reduce((m, c) => {
+            m = [
+                ...m,
+                ...c
+                    .split(/\s/)
+                    .map((v) => v.trim())
+                    .filter(Boolean),
+            ];
+            return m;
+        }, []);
+        // el.addEventListener("drop", prevent);
         const highlight = () => el.classList.add(...classes);
         const unhighlight = () => el.classList.remove(...classes);
         // ALL.forEach((name: any) => el.addEventListener(name, prevent, false));
-        HIGH.forEach((name) => el.addEventListener(name, highlight, false));
-        UNHIGH.forEach((name) => el.addEventListener(name, unhighlight, false));
+        HIGH.forEach((name) => el.addEventListener(name, highlight));
+        UNHIGH.forEach((name) => el.addEventListener(name, unhighlight));
         // el.addEventListener("drop", handle_drop, false);
         return () => {
+            // el.removeEventListener("drop", prevent);
             // ALL.forEach((name: any) => el.removeEventListener(name, prevent));
             HIGH.forEach((name) => el.removeEventListener(name, highlight));
             UNHIGH.forEach((name) => el.removeEventListener(name, unhighlight));

package/dist/actions/index.d.ts

@@ -1,8 +1,10 @@
 export * from "./autogrow.svelte.js";
 export * from "./autoscroll.js";
+export * from "./file-dropzone.svelte.js";
 export * from "./focus-trap.js";
 export * from "./highlight-dragover.svelte.js";
 export * from "./on-submit-validity-check.svelte.js";
+export * from "./resizable-width.svelte.js";
 export * from "./tooltip/tooltip.svelte.js";
 export * from "./trim.svelte.js";
 export * from "./validate.svelte.js";

package/dist/actions/index.js

@@ -1,8 +1,10 @@
 export * from "./autogrow.svelte.js";
 export * from "./autoscroll.js";
+export * from "./file-dropzone.svelte.js";
 export * from "./focus-trap.js";
 export * from "./highlight-dragover.svelte.js";
 export * from "./on-submit-validity-check.svelte.js";
+export * from "./resizable-width.svelte.js";
 export * from "./tooltip/tooltip.svelte.js";
 export * from "./trim.svelte.js";
 export * from "./validate.svelte.js";

package/dist/actions/resizable-width.svelte.d.ts

@@ -0,0 +1,21 @@
+export interface ResizableWidthOptions {
+    enabled?: boolean;
+    initial?: number;
+    min?: number;
+    max?: number;
+    units?: "px" | "%";
+    key?: string | number | null | undefined;
+    storage?: "local" | "session";
+    handleClass?: string;
+    handleDragClass?: string;
+    onResize?: (info: {
+        width: number;
+        units: "px" | "%";
+        container: number;
+    }) => void;
+    debug?: (...args: any[]) => void;
+}
+/**
+ * Note: units should not be changed on the fly...
+ */
+export declare function resizableWidth(el: HTMLDivElement, fn?: () => ResizableWidthOptions): void;

package/dist/actions/resizable-width.svelte.js

@@ -0,0 +1,162 @@
+import { localStorageState, sessionStorageState, } from "../utils/persistent-state.svelte.js";
+import { twMerge } from "../utils/tw-merge.js";
+/**
+ * Note: units should not be changed on the fly...
+ */
+export function resizableWidth(el, fn) {
+    const DEFAULT_HANDLE_CLS = [
+        "group",
+        "absolute top-0 right-0 bottom-0",
+        "w-[1px]",
+        "bg-black/20 hover:bg-black/30",
+        "dark:bg-white/10 dark:hover:bg-white/20",
+        "transition-colors duration-200",
+        "touch-none cursor-ew-resize",
+    ].join(" ");
+    const DEFAULT_DRAG_HANDLE_CLS = [
+        "absolute h-[20px] w-[9px]",
+        "-translate-x-[4px] top-1/2 -translate-y-1/2",
+        "rounded border border-black/20 dark:border-white/20",
+        "bg-gray-300 group-hover:bg-gray-400",
+        "dark:bg-gray-600 dark:group-hover:bg-gray-500",
+        "transition-colors duration-200",
+        "touch-none cursor-ew-resize",
+    ].join(" ");
+    function create_handle(el, handleClass, handleDragClass) {
+        const handle = document.createElement("div");
+        handle.setAttribute("data-handle", "true");
+        const dragHandle = document.createElement("div");
+        dragHandle.classList.add(...twMerge(DEFAULT_DRAG_HANDLE_CLS, handleDragClass).split(" "));
+        handle.appendChild(dragHandle);
+        el.appendChild(handle);
+        //
+        handle.classList.add(...twMerge(DEFAULT_HANDLE_CLS, handleClass).split(" "));
+        return handle;
+    }
+    $effect(() => {
+        let { enabled = true, initial = 0, min = 0, max = 0, units = "px", key, storage = "session", handleClass = "", handleDragClass = "", onResize, debug, } = fn?.() || {};
+        const _debug = (...args) => debug?.("[resizable-width]", ...args);
+        _debug("$effect");
+        if (!enabled)
+            return;
+        // initialize ////////////////////////////////////////////////////////////////////
+        //
+        let isResizing = false;
+        let startX = 0;
+        let startWidth = 0;
+        let containerW = undefined;
+        //
+        const handle = create_handle(el, handleClass, handleDragClass);
+        const container = el.parentElement;
+        // do we have a storage? if so, adjust the initial value...
+        const initialBackup = initial;
+        const _storage = get_storage(storage, key, initial);
+        if (_storage)
+            initial = _storage.current ?? initial;
+        // handlers/workers/helpers //////////////////////////////////////////////////////
+        function set_width(pxOrPercent) {
+            if (pxOrPercent) {
+                _debug(`set_width(${pxOrPercent})`);
+                set_width_px(units === "%" ? container.offsetWidth * (pxOrPercent / 100) : pxOrPercent);
+            }
+        }
+        function set_width_px(widthPx) {
+            _debug(`set_width_px(${widthPx})`);
+            containerW ??= container.offsetWidth;
+            const clamp = (value) => {
+                const _initial = value;
+                if (min)
+                    value = Math.max(min, value);
+                if (max)
+                    value = Math.min(max, value);
+                _initial !== value && _debug("clamped", value, units);
+                return value;
+            };
+            let width;
+            if (units === "%") {
+                const widthPercent = Math.min(100, (widthPx / containerW) * 100); // convert to % (with 100 max)
+                width = clamp(widthPercent);
+            }
+            else {
+                width = clamp(widthPx);
+            }
+            el.style.width = `${width}${units}`;
+            _debug("new width", width, units);
+            const info = { width, units, container: containerW };
+            onResize?.(info);
+            // maybe save to storage
+            if (_storage)
+                _storage.current = width;
+            return info;
+        }
+        function resize_start(e) {
+            e.preventDefault(); // prevent scrolling on touch devices
+            isResizing = true;
+            //
+            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+            startX = clientX;
+            startWidth = parseInt(getComputedStyle(el).width, 10);
+            containerW = container.offsetWidth;
+            //
+            document.body.style.cursor = "ew-resize";
+            document.body.style.userSelect = "none";
+        }
+        function resize(e) {
+            if (!isResizing)
+                return;
+            e.preventDefault(); // prevent scrolling on touch devices
+            //
+            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+            const deltaX = clientX - startX;
+            let width = startWidth + deltaX;
+            set_width_px(width);
+        }
+        function resize_stop() {
+            if (isResizing) {
+                isResizing = false;
+                containerW = undefined;
+                //
+                document.body.style.cursor = "";
+                document.body.style.userSelect = "";
+            }
+        }
+        function on_dblclick() {
+            set_width(initialBackup);
+        }
+        // initial styles ////////////////////////////////////////////////////////////////
+        el.style.position = "relative"; // so the handle will work
+        set_width(initial);
+        // listeners /////////////////////////////////////////////////////////////////////
+        // handle
+        handle.addEventListener("dblclick", on_dblclick);
+        handle.addEventListener("selectstart", (e) => e.preventDefault()); // prevent text selection during resize
+        // mouse
+        handle.addEventListener("mousedown", resize_start);
+        document.addEventListener("mousemove", resize);
+        document.addEventListener("mouseup", resize_stop);
+        // touch
+        handle.addEventListener("touchstart", resize_start, { passive: false });
+        document.addEventListener("touchmove", resize, { passive: false });
+        document.addEventListener("touchend", resize_stop);
+        document.addEventListener("touchcancel", resize_stop);
+        // cleanup ///////////////////////////////////////////////////////////////////////
+        return () => {
+            // mouse
+            document.removeEventListener("mousemove", resize);
+            document.removeEventListener("mouseup", resize_stop);
+            // touch
+            document.removeEventListener("touchmove", resize);
+            document.removeEventListener("touchend", resize_stop);
+            document.removeEventListener("touchcancel", resize_stop);
+            // will also remove it's own event listeners
+            handle.remove();
+        };
+    });
+}
+// helpers ///////////////////////////////////////////////////////////////////////////////
+function get_storage(type, key, initialValue) {
+    if (key) {
+        return (type === "session" ? sessionStorageState : localStorageState)(`resizable-width-${key}`, initialValue);
+    }
+    return null;
+}

package/dist/actions/validate.svelte.js

@@ -55,20 +55,20 @@ export function validate(el, fn) {
             // console.log(1111, validityState, el);
             // hm... Uncaught Svelte error: state_unsafe_mutation...
             // the `tick` await helps, but I'm not really sure I understand the internals...
-            tick().then(() => {
-                setValidationResult?.({
-                    validity: validityState,
-                    reasons,
-                    valid: validityState?.valid,
-                    // use translate fn for first reason (if fn provided and allowed),
-                    // otherwise fallback to native msg
-                    message: _t(reasons?.[0], el.value, el.validationMessage ||
-                        // PROBLEM: hidden inputs do not report validationMessage-s even
-                        // if correctly reported as invalid. So all we can do, is
-                        // put anything generically reasonable here...
-                        "This field contains invalid data. Please review and try again."),
-                });
+            // tick().then(() => {
+            setValidationResult?.({
+                validity: validityState,
+                reasons,
+                valid: validityState?.valid,
+                // use translate fn for first reason (if fn provided and allowed),
+                // otherwise fallback to native msg
+                message: _t(reasons?.[0], el.value, el.validationMessage ||
+                    // PROBLEM: hidden inputs do not report validationMessage-s even
+                    // if correctly reported as invalid. So all we can do, is
+                    // put only something generic here...
+                    "This field is invalid. Please review and try again."),
             });
+            // });
         };
         el.addEventListener(on, _doValidate);
         //

package/dist/components/Backdrop/Backdrop.svelte

@@ -139,7 +139,7 @@
 		bind:this={el}
 		role="presentation"
 		tabindex="-1"
-		class={twMerge("fixed inset-0 flex z-10", classProp)}
+		class={twMerge("fixed inset-0 flex z-10 h-dvh", classProp)}
 		in:fade={{ duration: fadeInDuration }}
 		out:fade={{ duration: fadeOutDuration }}
 		use:focusTrapAction={{

package/dist/components/Button/Button.svelte

@@ -3,12 +3,12 @@
 		bg-button-bg text-button-text 
 		dark:bg-button-bg-dark dark:text-button-text-dark
 		font-mono text-sm text-center 
-		leading-4
+		leading-none
 		border-1
 		border-button-border dark:border-button-border-dark
 		rounded-md
 		inline-flex items-center justify-center gap-x-2
-		px-3 py-1.5
+		px-3 py-2
 
 		hover:brightness-[1.05]
 		active:brightness-[0.95]

package/dist/components/Button/Button.svelte.d.ts

@@ -1,4 +1,4 @@
-export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-4\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-1.5\n\n\t\thover:brightness-[1.05]\n\t\tactive:brightness-[0.95]\n\t\tdisabled:hover:brightness-100\n\n\t\tfocus:brightness-[1.05] \n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
+export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text \n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\tfont-mono text-sm text-center \n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-md\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-3 py-2\n\n\t\thover:brightness-[1.05]\n\t\tactive:brightness-[0.95]\n\t\tdisabled:hover:brightness-100\n\n\t\tfocus:brightness-[1.05] \n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
 export declare const BUTTON_STUIC_PRESET_CLASSES: any;
 import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+	import { ItemCollection } from "@marianmeres/item-collection";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Button from "../Button/Button.svelte";
+	import type { FieldRadiosOption } from "../Input/types.js";
+	//
+	import "./index.css";
+
+	interface ItemCollectionType {
+		id: string;
+		option: FieldRadiosOption;
+	}
+	interface ItemColl extends ItemCollection<ItemCollectionType> {}
+
+	interface Props {
+		value?: string;
+		tabindex?: number; // tooShort
+		size?: "sm" | "md" | "lg" | string;
+		//
+		options: (string | FieldRadiosOption)[];
+		disabled?: boolean;
+		activeIndex?: number | undefined;
+		//
+		class?: string;
+		classButton?: string;
+		classButtonActive?: string;
+		style?: string;
+		// for side-effects, or validation... if would return explicit false, will not activate
+		onButtonClick?: (
+			index: number,
+			coll: ItemColl
+		) => Promise<boolean | undefined | void> | boolean | undefined | void;
+		buttonProps?: (index: number, coll: ItemColl) => undefined | Record<string, any>;
+	}
+
+	let {
+		options,
+		value = $bindable(),
+		tabindex = 0,
+		disabled,
+		size = "md",
+		//
+		activeIndex = $bindable(undefined),
+		//
+		class: classProp,
+		classButton,
+		classButtonActive,
+		style,
+		onButtonClick,
+		buttonProps,
+	}: Props = $props();
+
+	const coll: ItemColl = $derived.by(() => {
+		const out = new ItemCollection(
+			options.map((o, i) => {
+				// normalize string to FieldRadiosOption
+				if (typeof o === "string") o = { label: o };
+				// normalize FieldRadiosOption to ItemCollection's Item
+				return { id: `opt-${i}-${Math.random().toString(36).slice(2, 8)}`, option: o };
+			}),
+			{}
+		);
+
+		if (value !== undefined) {
+			const index = out.items.findIndex((item: ItemCollectionType) => {
+				return value === (item?.option.value ?? item.option.label);
+			});
+			if (index > -1) out.setActiveIndex(index);
+		} else if (activeIndex !== undefined) out.setActiveIndex(activeIndex);
+
+		return out;
+	});
+
+	$effect(() => {
+		return coll.subscribe((c) => {
+			value = c.active?.option.value ?? c.active?.option.label;
+			activeIndex = c.activeIndex;
+		});
+	});
+
+	const rounded = "rounded-md";
+	const roundedBtn = "rounded-md";
+	//
+	const CLS = `
+		stuic-button-group
+        ${rounded}
+		w-full
+        py-1.5 px-1.5 inline-block space-x-1
+        bg-button-group-bg text-button-group-text
+        dark:bg-button-group-bg-dark dark:text-button-group-text-dark
+        border-1
+        border-button-group-border dark:border-button-group-border-dark
+		flex justify-between
+        
+        focus-within:border-button-group-accent focus-within:dark:border-button-group-accent-dark
+        focus-within:ring-button-group-accent/20 focus-within:dark:ring-button-group-accent-dark/20
+        focus-within:ring-4
+    `;
+
+	const CLS_BUTTON = `
+        ${rounded}
+		w-full inline-block
+	    bg-transparent text-button-group-text dark:text-button-group-text-dark
+        hover:bg-transparent hover:text-button-group-text hover:dark:text-button-group-text-dark
+        outline-none focus:outline-none
+    `;
+
+	// we need some active indication by default... use just something subtle here, in the wild
+	// this will be styled with classButtonActive
+	const CLS_BUTTON_ACTIVE = `
+        shadow-none
+        bg-button-group-bg-active dark:bg-button-group-bg-active-dark
+        text-button-group-text-active dark:text-button-group-text-active-dark
+        hover:bg-button-group-bg-active hover:dark:bg-button-group-bg-active
+        hover:text-button-group-text-active hover:dark:text-button-group-text-active-dark
+        ${roundedBtn}
+    `;
+	// shadow-[0px_0px_1px_1px_rgba(0_0_0_/_.6)]
+
+	let els = $state<Record<number, HTMLButtonElement>>({});
+
+	async function maybe_activate(index: number, coll: ItemColl) {
+		if ((await onButtonClick?.(index, coll)) !== false) {
+			coll.setActiveIndex(index);
+			els[index].focus();
+		}
+	}
+</script>
+
+{#if coll.size}
+	<div
+		class={twMerge(CLS, classProp)}
+		{style}
+		role="radiogroup"
+		aria-labelledby={$coll?.active?.id || ""}
+	>
+		{#each coll.items as item, i}
+			<Button
+				tabindex={$coll.activeIndex === i ? tabindex : -1}
+				class={twMerge(
+					"border-none shadow-none",
+					CLS_BUTTON,
+					classButton,
+					$coll.activeIndex === i && [CLS_BUTTON_ACTIVE, classButtonActive].join(" ")
+				)}
+				{disabled}
+				{size}
+				type="button"
+				role="radio"
+				aria-checked={$coll.activeIndex === i}
+				onclick={async () => {
+					await maybe_activate(i, coll);
+				}}
+				bind:el={els[i]}
+				onkeydown={async (e) => {
+					if (["ArrowRight", "ArrowDown"].includes(e.key)) {
+						await maybe_activate(Math.min(i + 1, coll.size - 1), coll);
+					}
+					if (["ArrowLeft", "ArrowUp"].includes(e.key)) {
+						await maybe_activate(Math.max(0, i - 1), coll);
+					}
+				}}
+				id={item.id}
+				{...buttonProps?.(i, coll) || {}}
+			>
+				{item.option.label}
+			</Button>
+		{/each}
+	</div>
+{/if}

package/dist/components/ButtonGroupRadio/ButtonGroupRadio.svelte.d.ts

@@ -0,0 +1,26 @@
+import { ItemCollection } from "@marianmeres/item-collection";
+import type { FieldRadiosOption } from "../Input/types.js";
+import "./index.css";
+interface ItemCollectionType {
+    id: string;
+    option: FieldRadiosOption;
+}
+interface ItemColl extends ItemCollection<ItemCollectionType> {
+}
+interface Props {
+    value?: string;
+    tabindex?: number;
+    size?: "sm" | "md" | "lg" | string;
+    options: (string | FieldRadiosOption)[];
+    disabled?: boolean;
+    activeIndex?: number | undefined;
+    class?: string;
+    classButton?: string;
+    classButtonActive?: string;
+    style?: string;
+    onButtonClick?: (index: number, coll: ItemColl) => Promise<boolean | undefined | void> | boolean | undefined | void;
+    buttonProps?: (index: number, coll: ItemColl) => undefined | Record<string, any>;
+}
+declare const ButtonGroupRadio: import("svelte").Component<Props, {}, "value" | "activeIndex">;
+type ButtonGroupRadio = ReturnType<typeof ButtonGroupRadio>;
+export default ButtonGroupRadio;

package/dist/components/ButtonGroupRadio/index.css

@@ -0,0 +1,23 @@
+@import "../../_shared.css";
+@plugin '@tailwindcss/forms';
+
+/* prettier-ignore */
+@theme inline {
+	--color-button-group-bg: var(--color-button-group-bg, var(--color-white));
+	--color-button-group-bg-dark: var(--color-button-group-bg-dark, var(--color-neutral-600));
+
+	--color-button-group-text: var(--color-button-group-text, var(--color-black));
+	--color-button-group-text-dark: var(--color-button-group-text-dark, var(--color-neutral-300));
+
+	--color-button-group-border: var(--color-button-group-border, var(--color-neutral-300));
+	--color-button-group-border-dark: var(--color-button-group-border-dark, var(--color-neutral-800));
+
+    --color-button-group-accent: var(--color-button-group-accent, var(--color-red-600));
+	--color-button-group-accent-dark: var(--color-button-group-accent-dark, var(--color-red-400));
+
+	--color-button-group-bg-active: var(--color-button-group-bg-active, var(--color-neutral-500));
+	--color-button-group-bg-active-dark: var(--color-button-group-bg-active-dark, var(--color-neutral-500));
+
+    --color-button-group-text-active: var(--color-button-group-text-active, var(--color-white));
+    --color-button-group-text-active-dark: var(--color-button-group-text-active-dark, var(--color-white));
+}

package/dist/components/ButtonGroupRadio/index.d.ts

@@ -0,0 +1 @@
+export { default as ButtonGroupRadio } from "./ButtonGroupRadio.svelte";

package/dist/components/ButtonGroupRadio/index.js

@@ -0,0 +1 @@
+export { default as ButtonGroupRadio } from "./ButtonGroupRadio.svelte";