windmill-components 1.87.0 → 1.89.1

package/package/components/common/drawer/Drawer.svelte

@@ -0,0 +1,160 @@
+<script>import { onMount } from 'svelte';
+import { createEventDispatcher } from 'svelte';
+import { browser } from '$app/environment';
+export let open = false;
+export let duration = 0.3;
+export let placement = 'right';
+export let size = '600px';
+export let alwaysOpen = false;
+$: durationMs = duration * 1000;
+export function toggleDrawer() {
+    open = !open;
+}
+export function openDrawer() {
+    open = true;
+}
+export function closeDrawer() {
+    open = false;
+    setTimeout(() => {
+        dispatch('afterClose');
+    }, durationMs);
+}
+export function isOpen() {
+    return open;
+}
+let mounted = false;
+const dispatch = createEventDispatcher();
+$: style = `--duration: ${duration}s; --size: ${size};`;
+function scrollLock(open) {
+    if (browser) {
+        const body = document.querySelector('body');
+        if (mounted && body) {
+            body.style.overflowY = open ? 'hidden' : 'auto';
+        }
+    }
+}
+$: scrollLock(open);
+function handleClickAway() {
+    dispatch('clickAway');
+    open = false;
+}
+function onKeyDown(event) {
+    if (open) {
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                open = false;
+                break;
+        }
+    }
+}
+$: open ? dispatch('open') : dispatch('close');
+let timeout = true;
+$: !open ? setTimeout(() => (timeout = true), durationMs) : (timeout = false);
+onMount(() => {
+    mounted = true;
+});
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+<aside
+	class="drawer {$$props.class ?? ''} {$$props.positionClass ?? ''}"
+	class:open
+	class:close={!open && timeout}
+	{style}
+>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="overlay {$$props.positionClass ?? ''}" on:click={handleClickAway} />
+	<div class="panel {placement} {$$props.positionClass}" class:size>
+		{#if open || !timeout || alwaysOpen}
+			<slot {open} />
+		{/if}
+	</div>
+</aside>
+
+<style>
+	.drawer {
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		z-index: -1;
+		transition: z-index var(--duration) step-end;
+		overflow: clip;
+		pointer-events: none;
+	}
+
+	.drawer.open {
+		height: 100%;
+		width: 100%;
+		z-index: 1002;
+		transition: z-index var(--duration) step-start;
+		pointer-events: auto;
+	}
+
+	.overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(100, 100, 100, 0.5);
+		opacity: 0;
+		z-index: 2;
+		transition: opacity var(--duration) ease;
+	}
+
+	.drawer.open > .overlay {
+		opacity: 1;
+	}
+
+	.drawer.close > .panel {
+		height: 0;
+		overflow: hidden;
+	}
+
+	.panel {
+		position: fixed;
+		width: 100%;
+		background: white;
+		z-index: 3;
+		transition: transform var(--duration) ease;
+	}
+
+	.panel.left {
+		left: 0;
+		transform: translate(-100%, 0);
+	}
+
+	.panel.right {
+		right: 0;
+		transform: translate(100%, 0);
+	}
+
+	.panel.top {
+		top: 0;
+		transform: translate(0, -100%);
+	}
+
+	.panel.bottom {
+		bottom: 0;
+		transform: translate(0, 100%);
+	}
+
+	.panel.left.size,
+	.panel.right.size {
+		max-width: var(--size);
+	}
+
+	.panel.top.size,
+	.panel.bottom.size {
+		max-height: var(--size);
+	}
+
+	.drawer.open > .panel {
+		transform: translate(0, 0);
+	}</style>

package/package/components/common/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,37 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean | undefined;
+        duration?: number | undefined;
+        placement?: string | undefined;
+        size?: string | undefined;
+        alwaysOpen?: boolean | undefined;
+        toggleDrawer?: (() => void) | undefined;
+        openDrawer?: (() => void) | undefined;
+        closeDrawer?: (() => void) | undefined;
+        isOpen?: (() => boolean) | undefined;
+    };
+    events: {
+        clickAway: CustomEvent<any>;
+        open: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {
+            open: boolean;
+        };
+    };
+};
+export type DrawerProps = typeof __propDef.props;
+export type DrawerEvents = typeof __propDef.events;
+export type DrawerSlots = typeof __propDef.slots;
+export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
+    get toggleDrawer(): () => void;
+    get openDrawer(): () => void;
+    get closeDrawer(): () => void;
+    get isOpen(): () => boolean;
+}
+export {};

package/package/components/common/drawer/DrawerContent.svelte

@@ -0,0 +1,33 @@
+<script>import { classNames } from '../../../utils';
+import CloseButton from '../CloseButton.svelte';
+export let title = undefined;
+export let overflow_y = true;
+export let noPadding = false;
+export let forceOverflowVisible = false;
+</script>
+
+<div class="flex flex-col divide-y h-screen max-h-screen">
+	<div class="flex justify-between w-wull items-center px-2 py-2">
+		<div class="flex items-center gap-2">
+			<CloseButton on:close />
+
+			<span class="font-semibold truncate text-gray-800">{title ?? ''}</span>
+		</div>
+		{#if $$slots.actions}
+			<div class="flex gap-2 items-center justify-end">
+				<slot name="actions" />
+			</div>
+		{/if}
+	</div>
+
+	<div
+		class={classNames(
+			noPadding ? '' : 'p-4',
+			'grow h-full max-h-full',
+			forceOverflowVisible ? '!overflow-visible' : ''
+		)}
+		class:overflow-y-auto={overflow_y}
+	>
+		<slot />
+	</div>
+</div>

package/package/components/common/drawer/DrawerContent.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        overflow_y?: boolean | undefined;
+        noPadding?: boolean | undefined;
+        forceOverflowVisible?: boolean | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        actions: {};
+        default: {};
+    };
+};
+export type DrawerContentProps = typeof __propDef.props;
+export type DrawerContentEvents = typeof __propDef.events;
+export type DrawerContentSlots = typeof __propDef.slots;
+export default class DrawerContent extends SvelteComponentTyped<DrawerContentProps, DrawerContentEvents, DrawerContentSlots> {
+}
+export {};

package/package/components/common/fileInput/FileInput.svelte

@@ -0,0 +1,142 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { FileUp } from 'lucide-svelte';
+import Button from '../../common/button/Button.svelte';
+import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { twMerge } from 'tailwind-merge';
+let c = '';
+export { c as class };
+export let style = '';
+export let accept = '*';
+export let multiple = false;
+export let convertTo = undefined;
+export let hideIcon = false;
+export let iconSize = 36;
+export let returnFileNames = false;
+const dispatch = createEventDispatcher();
+let input;
+let files = undefined;
+async function onChange(fileList) {
+    if (!fileList || !fileList.length) {
+        files = undefined;
+        dispatch('change', files);
+        return;
+    }
+    if (!multiple || !files) {
+        files = [];
+    }
+    for (let i = 0; i < fileList.length; i++) {
+        const file = fileList.item(i);
+        if (file)
+            files.push(file);
+    }
+    // Needs to be reset so the same file can be selected
+    // multiple times in a row
+    input.value = '';
+    dispatchChange();
+}
+async function convertFile(file) {
+    return new Promise((resolve) => {
+        if (!convertTo) {
+            return resolve(null);
+        }
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            resolve(reader.result);
+        };
+        switch (convertTo) {
+            case 'buffer':
+                reader.readAsArrayBuffer(file);
+                break;
+            case 'binary':
+                reader.readAsBinaryString(file);
+                break;
+            case 'base64':
+                reader.readAsDataURL(file);
+                break;
+            case 'text':
+                reader.readAsText(file);
+                break;
+        }
+    });
+}
+function removeFile(index) {
+    if (!files)
+        return;
+    files.splice(index, 1);
+    files = files.length ? files : undefined;
+    dispatchChange();
+}
+async function dispatchChange() {
+    files = files;
+    if (convertTo && files) {
+        const promises = files.map(convertFile);
+        let converted = await Promise.all(promises);
+        if (returnFileNames) {
+            converted = converted.map((c, i) => ({ name: files[i].name, data: c }));
+        }
+        dispatch('change', converted);
+    }
+    else {
+        dispatch('change', files);
+    }
+}
+</script>
+
+<button
+	class={twMerge(
+		`relative center-center flex-col text-center font-medium text-gray-600 
+		border-2 border-dashed border-gray-400 hover:border-blue-500 
+		focus-within:border-blue-500 hover:bg-blue-50 focus-within:bg-blue-50 
+		duration-200 rounded-lg p-1`,
+		c
+	)}
+	{style}
+>
+	{#if !hideIcon && !files}
+		<FileUp size={iconSize} class="mb-2" />
+	{/if}
+	{#if files}
+		<div class="w-full max-h-full overflow-auto px-6">
+			<slot name="selected-title">
+				<div class="text-center mb-2 px-2">
+					Selected file{files.length > 1 ? 's' : ''}:
+				</div>
+			</slot>
+			<ul class="relative z-20 max-w-[250px] bg-white rounded-lg overflow-hidden mx-auto">
+				{#each files as { name }, i}
+					<li
+						class="flex justify-between items-center font-normal text-sm
+					hover:bg-gray-300/20 duration-200 py-1 px-2 cursor-default"
+					>
+						<span class="pr-2 ellipsize">{name}</span>
+						<Button
+							size="xs"
+							color="red"
+							variant="border"
+							iconOnly
+							btnClasses="bg-transparent"
+							startIcon={{ icon: faTrash }}
+							on:click={() => removeFile(i)}
+						/>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	{:else}
+		<slot>
+			<span>Drag and drop {multiple ? 'files' : 'a file'}</span>
+		</slot>
+	{/if}
+	<input
+		class="!absolute !inset-0 !z-10 !opacity-0 !cursor-pointer"
+		type="file"
+		title={files ? `${files.length} file${files.length > 1 ? 's' : ''} chosen` : 'No file chosen'}
+		bind:this={input}
+		on:change={({ currentTarget }) => {
+			onChange(currentTarget.files)
+		}}
+		{accept}
+		{multiple}
+		{...$$restProps}
+	/>
+</button>

package/package/components/common/fileInput/FileInput.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ReadFileAs } from './model';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string | undefined;
+        style?: string | undefined;
+        accept?: string | undefined;
+        multiple?: boolean | undefined;
+        convertTo?: ReadFileAs | undefined;
+        hideIcon?: boolean | undefined;
+        iconSize?: number | undefined;
+        returnFileNames?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'selected-title': {};
+        default: {};
+    };
+};
+export type FileInputProps = typeof __propDef.props;
+export type FileInputEvents = typeof __propDef.events;
+export type FileInputSlots = typeof __propDef.slots;
+export default class FileInput extends SvelteComponentTyped<FileInputProps, FileInputEvents, FileInputSlots> {
+}
+export {};

package/package/components/common/fileInput/model.d.ts

@@ -0,0 +1 @@
+export type ReadFileAs = 'buffer' | 'binary' | 'base64' | 'text';

package/package/components/common/fileInput/model.js

@@ -0,0 +1 @@
+export {};

package/package/components/common/index.d.ts

@@ -0,0 +1,25 @@
+export { default as ActionRow } from './actionRow/ActionRow.svelte';
+export { default as Alert } from './alert/Alert.svelte';
+export { default as Badge } from './badge/Badge.svelte';
+export { default as Button } from './button/Button.svelte';
+export { default as UndoRedo } from './button/UndoRedo.svelte';
+export { default as ClearableInput } from './clearableInput/ClearableInput.svelte';
+export { default as Drawer } from './drawer/Drawer.svelte';
+export { default as DrawerContent } from './drawer/DrawerContent.svelte';
+export { default as Kbd } from './kbd/Kbd.svelte';
+export { default as Menu } from './menu/Menu.svelte';
+export { default as MenuItem } from './menu/MenuItem.svelte';
+export { default as Popup } from './popup/Popup.svelte';
+export { default as SecondsInput } from './seconds/SecondsInput.svelte';
+export { default as Skeleton } from './skeleton/Skeleton.svelte';
+export { default as Tab } from './tabs/Tab.svelte';
+export { default as TabContent } from './tabs/TabContent.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
+export { default as ToggleButton } from './toggleButton/ToggleButton.svelte';
+export { default as ToggleButtonGroup } from './toggleButton/ToggleButtonGroup.svelte';
+export { default as Breadcrumb } from './breadcrumb/Breadcrumb.svelte';
+export { default as FileInput } from './fileInput/FileInput.svelte';
+export * from './alert/model';
+export * from './badge/model';
+export * from './button/model';
+export * from './skeleton/model';

package/package/components/common/index.js

@@ -0,0 +1,25 @@
+export { default as ActionRow } from './actionRow/ActionRow.svelte';
+export { default as Alert } from './alert/Alert.svelte';
+export { default as Badge } from './badge/Badge.svelte';
+export { default as Button } from './button/Button.svelte';
+export { default as UndoRedo } from './button/UndoRedo.svelte';
+export { default as ClearableInput } from './clearableInput/ClearableInput.svelte';
+export { default as Drawer } from './drawer/Drawer.svelte';
+export { default as DrawerContent } from './drawer/DrawerContent.svelte';
+export { default as Kbd } from './kbd/Kbd.svelte';
+export { default as Menu } from './menu/Menu.svelte';
+export { default as MenuItem } from './menu/MenuItem.svelte';
+export { default as Popup } from './popup/Popup.svelte';
+export { default as SecondsInput } from './seconds/SecondsInput.svelte';
+export { default as Skeleton } from './skeleton/Skeleton.svelte';
+export { default as Tab } from './tabs/Tab.svelte';
+export { default as TabContent } from './tabs/TabContent.svelte';
+export { default as Tabs } from './tabs/Tabs.svelte';
+export { default as ToggleButton } from './toggleButton/ToggleButton.svelte';
+export { default as ToggleButtonGroup } from './toggleButton/ToggleButtonGroup.svelte';
+export { default as Breadcrumb } from './breadcrumb/Breadcrumb.svelte';
+export { default as FileInput } from './fileInput/FileInput.svelte';
+export * from './alert/model';
+export * from './badge/model';
+export * from './button/model';
+export * from './skeleton/model';

package/package/components/common/kbd/Kbd.svelte

@@ -0,0 +1,10 @@
+<script>export let kbdClass = '';
+</script>
+
+<span
+	class="{$$props.class} rounded border bg-white/70 px-1.5 !text-xs text-gray-600 shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-500"
+>
+	<kbd class={kbdClass}>
+		<slot />
+	</kbd>
+</span>

package/package/components/common/kbd/Kbd.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        kbdClass?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type KbdProps = typeof __propDef.props;
+export type KbdEvents = typeof __propDef.events;
+export type KbdSlots = typeof __propDef.slots;
+export default class Kbd extends SvelteComponentTyped<KbdProps, KbdEvents, KbdSlots> {
+}
+export {};

package/package/components/common/languageIcons/Bash.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg
+	{width}
+	{height}
+	{...$$restProps}
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path d="M14.1478 3.56504L9.4137 0.752673C8.84829 0.415776 8.15106 0.415776 7.58566 0.752673L2.85152 3.56504C2.28612 3.899 1.9375 4.52007 1.9375 5.19093V10.8127C1.9375 11.4836 2.28612 12.1047 2.85152 12.4386L7.58566 15.2481C7.8669 15.415 8.18329 15.5 8.49968 15.5C8.81607 15.5 9.12953 15.415 9.4137 15.2481L14.1478 12.4386C14.7132 12.1017 15.0619 11.4836 15.0619 10.8127V5.19093C15.0619 4.52007 14.7132 3.899 14.1478 3.56504Z" fill="white"/>
+	<path d="M14.1478 3.5651L9.4137 0.752734C9.13246 0.58575 8.81607 0.500793 8.49968 0.500793C8.18329 0.500793 7.86983 0.58575 7.58566 0.752734L2.85152 3.5651C2.28612 3.89906 1.9375 4.52013 1.9375 5.19099V10.8128C1.9375 11.4837 2.28612 12.1047 2.85152 12.4387L7.58566 15.2481C7.8669 15.4151 8.18329 15.5001 8.49968 15.5001C8.81607 15.5001 9.12953 15.4151 9.4137 15.2481L14.1478 12.4387C14.7132 12.1018 15.0619 11.4837 15.0619 10.8128V5.19099C15.0619 4.52013 14.7132 3.89906 14.1478 3.5651ZM7.75265 14.961L3.0185 12.1516C2.55563 11.8762 2.26854 11.3635 2.26854 10.8128V5.19099C2.26854 4.64024 2.55563 4.12757 3.0185 3.85219L7.75265 1.04276C7.98115 0.908 8.23895 0.837691 8.49968 0.837691C8.76041 0.837691 9.02114 0.908 9.24671 1.04276L13.9809 3.85219C14.3705 4.08363 14.6341 4.48497 14.7074 4.93612C14.5492 4.60216 14.1976 4.50841 13.7846 4.75156L9.3053 7.51998C8.74576 7.84516 8.33562 8.21428 8.33562 8.88515V14.4044C8.33562 14.8087 8.49675 15.0694 8.74869 15.1456C8.66666 15.1602 8.58464 15.169 8.49968 15.169C8.23895 15.1661 7.97822 15.0958 7.75265 14.961Z" fill="#283037"/>
+	<path d="M12.9086 11.3547L11.728 12.0607C11.6958 12.0783 11.6724 12.0988 11.6724 12.1369V12.4445C11.6724 12.4826 11.6987 12.4972 11.728 12.4796L12.9262 11.7531C12.9584 11.7355 12.9614 11.7004 12.9614 11.6623V11.3899C12.9643 11.3518 12.9379 11.3371 12.9086 11.3547Z" fill="#4DA825"/>
+	<path d="M10.3983 8.75913C10.4364 8.73863 10.4686 8.76499 10.4686 8.81479L10.4715 9.222C10.6414 9.15462 10.7908 9.13704 10.9256 9.16634C10.9549 9.17513 10.9666 9.21321 10.9549 9.26008L10.8641 9.62042C10.8582 9.64678 10.8406 9.67608 10.8231 9.69366C10.8143 9.70245 10.8084 9.70831 10.7996 9.71123C10.7879 9.71709 10.7762 9.72002 10.7645 9.71709C10.7029 9.70245 10.5565 9.67022 10.328 9.7874C10.0877 9.91044 10.0028 10.1184 10.0057 10.2737C10.0086 10.4583 10.1024 10.5169 10.4305 10.5198C10.867 10.5256 11.0574 10.719 11.0604 11.1584C11.0662 11.592 10.8348 12.0549 10.4803 12.342L10.4891 12.7462C10.4891 12.796 10.4569 12.8517 10.4188 12.8693L10.1786 13.007C10.1405 13.0275 10.1082 13.004 10.1082 12.9542L10.1053 12.5558C9.90025 12.6408 9.69225 12.6613 9.56042 12.6086C9.53406 12.5998 9.52527 12.5617 9.53406 12.5207L9.62194 12.1545C9.6278 12.1252 9.64538 12.0959 9.66589 12.0783C9.67468 12.0724 9.68053 12.0666 9.68932 12.0607C9.70397 12.0549 9.71569 12.0519 9.72741 12.0578C9.87096 12.1047 10.0526 12.0842 10.2284 11.9933C10.451 11.8791 10.6004 11.6535 10.5975 11.425C10.5946 11.22 10.4832 11.135 10.2137 11.1321C9.87095 11.1321 9.5487 11.0647 9.54285 10.5579C9.53992 10.1419 9.7567 9.70831 10.0995 9.43293L10.0965 9.02572C10.0965 8.97592 10.1258 8.92026 10.1668 8.89975L10.3983 8.75913Z" fill="white"/>
+</svg>

package/package/components/common/languageIcons/Bash.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  BashProps */
+/** @typedef {typeof __propDef.events}  BashEvents */
+/** @typedef {typeof __propDef.slots}  BashSlots */
+export default class Bash extends SvelteComponentTyped<{
+    [x: string]: any;
+    height?: number | undefined;
+    width?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BashProps = typeof __propDef.props;
+export type BashEvents = typeof __propDef.events;
+export type BashSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        height?: number | undefined;
+        width?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/common/languageIcons/FetchIcon.svelte

@@ -0,0 +1 @@
+<span class="text-sm text-blue-600 font-mono">HTTP</span>

package/package/components/common/languageIcons/FetchIcon.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FetchIconProps */
+/** @typedef {typeof __propDef.events}  FetchIconEvents */
+/** @typedef {typeof __propDef.slots}  FetchIconSlots */
+export default class FetchIcon extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FetchIconProps = typeof __propDef.props;
+export type FetchIconEvents = typeof __propDef.events;
+export type FetchIconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/common/languageIcons/Go.svelte

@@ -0,0 +1,34 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg
+	{width}
+	{height}
+	{...$$restProps}
+	viewBox="0 0 16 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		d="M1.20743 6.82123C1.17627 6.82123 1.16848 6.80565 1.18406 6.78228L1.34764 6.57197C1.36322 6.5486 1.40217 6.53302 1.43333 6.53302H4.21424C4.2454 6.53302 4.25319 6.55639 4.23761 6.57976L4.10519 6.78228C4.08961 6.80565 4.05066 6.82902 4.02729 6.82902L1.20743 6.82123Z"
+		fill="#00ACD7"
+	/>
+	<path
+		d="M0.0311587 7.53787C0 7.53787 -0.00778968 7.52229 0.00778968 7.49892L0.171373 7.28861C0.186952 7.26524 0.225901 7.24966 0.257059 7.24966H3.80915C3.84031 7.24966 3.85589 7.27303 3.8481 7.2964L3.78578 7.48335C3.77799 7.5145 3.74684 7.53008 3.71568 7.53008L0.0311587 7.53787Z"
+		fill="#00ACD7"
+	/>
+	<path
+		d="M1.91641 8.25449C1.88525 8.25449 1.87746 8.23112 1.89304 8.20775L2.0021 8.01301C2.01768 7.98965 2.04884 7.96628 2.08 7.96628H3.63793C3.66909 7.96628 3.68467 7.98965 3.68467 8.0208L3.66909 8.20775C3.66909 8.23891 3.63793 8.26228 3.61456 8.26228L1.91641 8.25449Z"
+		fill="#00ACD7"
+	/>
+	<path
+		d="M10.002 6.68102C9.51124 6.80565 9.17629 6.89912 8.69333 7.02375C8.57648 7.05491 8.56869 7.0627 8.46742 6.94586C8.35058 6.81344 8.26489 6.72776 8.10131 6.64986C7.61056 6.40839 7.13539 6.47849 6.69138 6.7667C6.16168 7.10944 5.88904 7.61575 5.89683 8.24669C5.90462 8.86984 6.33305 9.38394 6.94844 9.46962C7.47814 9.53973 7.92215 9.35278 8.27268 8.95552C8.34279 8.86984 8.40511 8.77637 8.483 8.66732C8.20258 8.66732 7.85204 8.66732 6.9796 8.66732C6.81601 8.66732 6.77706 8.56605 6.83159 8.43363C6.93286 8.19216 7.11981 7.78711 7.22887 7.58459C7.25224 7.53785 7.30676 7.45996 7.42361 7.45996C7.82088 7.45996 9.28534 7.45996 10.2591 7.45996C10.2435 7.67027 10.2435 7.88059 10.2123 8.0909C10.1266 8.65174 9.91631 9.16584 9.57356 9.61762C9.0127 10.3576 8.28047 10.8172 7.3535 10.9418C6.59011 11.0431 5.88125 10.8951 5.25808 10.4277C4.68164 9.99151 4.35447 9.4151 4.26879 8.69847C4.16752 7.84943 4.41679 7.08607 4.93091 6.41618C5.48398 5.69177 6.21621 5.23219 7.11202 5.06861C7.84425 4.93619 8.54532 5.02188 9.17629 5.45029C9.58914 5.72292 9.88515 6.09681 10.0799 6.5486C10.1266 6.6187 10.0955 6.65765 10.002 6.68102Z"
+		fill="#00ACD7"
+	/>
+	<path
+		d="M12.5805 10.9886C11.8717 10.973 11.2251 10.7705 10.6798 10.3031C10.2202 9.90584 9.93202 9.39953 9.83855 8.79975C9.69833 7.91955 9.93981 7.14061 10.4695 6.44735C11.0382 5.69957 11.7236 5.3101 12.6506 5.14652C13.4452 5.00631 14.193 5.08421 14.8707 5.54378C15.4861 5.96441 15.8678 6.53304 15.969 7.28082C16.1014 8.33239 15.7977 9.18922 15.0732 9.92142C14.5591 10.4433 13.9281 10.7705 13.2037 10.9185C12.9934 10.9574 12.783 10.9652 12.5805 10.9886ZM14.4345 7.84165C14.4267 7.74039 14.4267 7.6625 14.4111 7.5846C14.2709 6.81345 13.562 6.37725 12.822 6.54861C12.0976 6.71219 11.6302 7.17177 11.4588 7.90397C11.3186 8.51154 11.6146 9.1269 12.1755 9.37617C12.6039 9.56311 13.0323 9.53974 13.4452 9.32943C14.0606 9.01006 14.3955 8.51154 14.4345 7.84165Z"
+		fill="#00ACD7"
+	/>
+</svg>

package/package/components/common/languageIcons/Go.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  GoProps */
+/** @typedef {typeof __propDef.events}  GoEvents */
+/** @typedef {typeof __propDef.slots}  GoSlots */
+export default class Go extends SvelteComponentTyped<{
+    [x: string]: any;
+    height?: number | undefined;
+    width?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type GoProps = typeof __propDef.props;
+export type GoEvents = typeof __propDef.events;
+export type GoSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        height?: number | undefined;
+        width?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/common/languageIcons/JavaScript.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 630 630">
+	<rect width="630" height="630" fill="#f7df1e" />
+	<path
+		d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"
+	/>
+</svg>