windmill-components 1.37.0 → 1.46.2

package/components/common/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        items: string[];
+        selectedIndex: number;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        separator: {};
+    };
+};
+export declare type BreadcrumbProps = typeof __propDef.props;
+export declare type BreadcrumbEvents = typeof __propDef.events;
+export declare type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};

package/components/common/button/Button.svelte

@@ -16,6 +16,7 @@ export let startIcon = undefined;
 export let endIcon = undefined;
 export let element = undefined;
 export let id = '';
+export let nonCaptureEvent = false;
 const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
@@ -27,28 +28,39 @@ const colorVariants = {
         border: 'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
         contained: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-300'
     },
+    green: {
+        border: 'border-green-600 hover:border-green-700 bg-white hover:bg-green-100 text-green-600 hover:text-green-700 focus:ring-green-300',
+        contained: 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-300'
+    },
     dark: {
         border: 'border-gray-800 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
         contained: 'bg-gray-700 hover:bg-gray-900 focus:bg-gray-900 text-white focus:ring-gray-300'
     },
     light: {
-        border: 'border bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 hover:text-gray-800 focus:text-gray-800 focus:ring-gray-300',
-        contained: 'bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 focus:ring-gray-300'
+        border: 'border border-gray-300 bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 hover:text-gray-800 focus:text-gray-800 focus:ring-gray-300',
+        contained: 'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700 focus:ring-gray-300'
     }
 };
 $: buttonProps = {
     id,
-    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-4 font-medium', 'rounded-md', 'flex justify-center items-center text-center whitespace-nowrap', btnClasses, disabled ? 'pointer-events-none cursor-default filter grayscale' : ''),
+    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-4 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? 'bg-gray-300' : ''),
     disabled,
     href,
     target,
     tabindex: disabled ? -1 : 0
 };
 function onClick(event) {
-    event.preventDefault();
-    dispatch('click', event);
-    if (href) {
-        goto(href);
+    if (!nonCaptureEvent) {
+        event.preventDefault();
+        dispatch('click', event);
+        if (href) {
+            if (href.startsWith('http') || target == '_blank') {
+                window.open(href, target);
+            }
+            else {
+                goto(href);
+            }
+        }
     }
 }
 $: isSmall = size === 'xs' || size === 'sm';
@@ -59,7 +71,7 @@ $: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', e
 <svelte:element
 	this={href ? 'a' : 'button'}
 	bind:this={element}
-	on:click|stopPropagation={onClick}
+	on:click={onClick}
 	on:focus
 	on:blur
 	{...buttonProps}

package/components/common/button/Button.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
         endIcon?: ButtonType.Icon | undefined;
         element?: ButtonType.Element | undefined;
         id?: string | undefined;
+        nonCaptureEvent?: boolean | undefined;
     };
     events: {
         focus: FocusEvent;

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

@@ -1,6 +1,6 @@
 export declare namespace ButtonType {
     type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    type Color = 'blue' | 'red' | 'dark' | 'light';
+    type Color = 'blue' | 'red' | 'dark' | 'light' | 'green';
     type Variant = 'contained' | 'border';
     type Target = '_self' | '_blank';
     type Element = HTMLButtonElement | HTMLAnchorElement;

package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -11,6 +11,7 @@ export let open = false;
 const dispatch = createEventDispatcher();
 function onKeyDown(event) {
     if (open) {
+        event.stopPropagation();
         switch (event.key) {
             case 'Enter':
                 dispatch('confirmed');

package/components/common/drawer/Drawer.svelte

@@ -7,6 +7,15 @@ export let size = '600px';
 export function toggleDrawer() {
     open = !open;
 }
+export function openDrawer() {
+    open = true;
+}
+export function closeDrawer() {
+    open = false;
+}
+export function isOpen() {
+    return open;
+}
 let mounted = false;
 const dispatch = createEventDispatcher();
 $: style = `--duration: ${duration}s; --size: ${size};`;
@@ -19,20 +28,35 @@ function scrollLock(open) {
 $: scrollLock(open);
 function handleClickAway() {
     dispatch('clickAway');
-    open = !open;
+    open = false;
+}
+function onKeyDown(event) {
+    if (open) {
+        switch (event.key) {
+            case 'Escape':
+                open = false;
+                event.preventDefault();
+                break;
+        }
+    }
 }
 $: open ? dispatch('open') : dispatch('close');
+let timeout = true;
+$: !open ? setTimeout(() => (timeout = true), duration * 1000) : (timeout = false);
 onMount(() => {
     mounted = true;
     scrollLock(open);
 });
 </script>
 
-<aside class="drawer" class:open {style}>
-	<div class="overlay" on:click={handleClickAway} />
+<svelte:window on:keydown={onKeyDown} />
 
+<aside class="drawer" class:open class:close={!open && timeout} {style}>
+	<div class="overlay" on:click={handleClickAway} />
 	<div class="panel {placement}" class:size>
-		<slot />
+		{#if open || !timeout}
+			<slot />
+		{/if}
 	</div>
 </aside>
 
@@ -45,9 +69,12 @@ onMount(() => {
 		width: 100%;
 		z-index: -1;
 		transition: z-index var(--duration) step-end;
+		overflow: clip;
 	}
 
 	.drawer.open {
+		height: 100%;
+		width: 100%;
 		z-index: 99;
 		transition: z-index var(--duration) step-start;
 	}
@@ -64,17 +91,21 @@ onMount(() => {
 		transition: opacity var(--duration) ease;
 	}
 
-	.drawer.open .overlay {
+	.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;
-		overflow: auto;
 	}
 
 	.panel.left {
@@ -107,6 +138,6 @@ onMount(() => {
 		max-height: var(--size);
 	}
 
-	.drawer.open .panel {
+	.drawer.open > .panel {
 		transform: translate(0, 0);
 	}</style>

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

@@ -6,6 +6,9 @@ declare const __propDef: {
         placement?: string | undefined;
         size?: string | undefined;
         toggleDrawer?: (() => void) | undefined;
+        openDrawer?: (() => void) | undefined;
+        closeDrawer?: (() => void) | undefined;
+        isOpen?: (() => boolean) | undefined;
     };
     events: {
         clickAway: CustomEvent<any>;
@@ -23,5 +26,8 @@ export declare type DrawerEvents = typeof __propDef.events;
 export declare 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/components/common/drawer/DrawerContent.svelte

@@ -1,19 +1,33 @@
 <script>import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
+import Button from '../button/Button.svelte';
 export let title = undefined;
+export let overflow_y = true;
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="flex flex-col divide-y h-screen">
-	<div class="flex justify-between items-center py-2 px-4">
-		<span class="text-sm font-bold">{title}</span>
-		<button on:click={() => dispatch('close')}>
-			<Icon data={faClose} class="w-4 h-4" />
-		</button>
+<div class="flex flex-col divide-y h-screen max-h-screen">
+	<div class="flex justify-between items-center py-2 px-6 gap-x-2">
+		<Button
+			variant="border"
+			size="lg"
+			color="dark"
+			on:click={() => {
+				dispatch('close')
+			}}
+		>
+			<Icon data={faClose} />
+		</Button>
+		<span class="font-bold truncate">{title}</span>
+		<div class="flex flex-row">
+			{#if $$slots.submission}
+				<slot name="submission" class="sticky" />
+			{/if}
+		</div>
 	</div>
 
-	<div class="p-2 h-full">
+	<div class="py-2 px-6 grow h-full max-h-full" class:overflow-y-auto={overflow_y}>
 		<slot />
 	</div>
 </div>

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

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         title?: string | undefined;
+        overflow_y?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;
@@ -9,6 +10,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        submission: {
+            class: string;
+        };
         default: {};
     };
 };

package/components/common/index.d.ts

@@ -16,6 +16,7 @@ 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 * from './alert/model';
 export * from './badge/model';
 export * from './button/model';

package/components/common/index.js

@@ -16,6 +16,7 @@ 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 * from './alert/model';
 export * from './badge/model';
 export * from './button/model';

package/components/common/kbd/Kbd.svelte

@@ -1,5 +1,5 @@
 <kbd
-	class="mx-1 px-2 py-1.5 text-xs font-semibold text-gray-800 
+	class="mx-1 px-2 py-1 text-xs font-mono font-semibold text-gray-800 
 	bg-gray-100 border border-gray-200 rounded-lg 
 	dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500 {$$props.class}"
 >

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/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/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/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/components/common/languageIcons/LanguageIcon.svelte

@@ -0,0 +1,19 @@
+<script>import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
+export let lang;
+export let width = 16;
+export let height = 16;
+export let scale = 1;
+const langToComponent = {
+    go: GoIcon,
+    python3: PythonIcon,
+    deno: TypeScriptIcon,
+    bash: BashIcon
+};
+</script>
+
+<svelte:component
+	this={langToComponent[lang]}
+	width={width * scale}
+	height={height * scale}
+	{...$$restProps}
+/>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { SupportedLanguage } from '../../../common';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        lang: SupportedLanguage;
+        width?: number | undefined;
+        height?: number | undefined;
+        scale?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type LanguageIconProps = typeof __propDef.props;
+export declare type LanguageIconEvents = typeof __propDef.events;
+export declare type LanguageIconSlots = typeof __propDef.slots;
+export default class LanguageIcon extends SvelteComponentTyped<LanguageIconProps, LanguageIconEvents, LanguageIconSlots> {
+}
+export {};

package/components/common/languageIcons/Python.svelte

@@ -0,0 +1,51 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg
+	{width}
+	{height}
+	{...$$restProps}
+	viewBox="0 0 17 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g clip-path="url(#clip0_128_281)">
+		<path
+			d="M8.4728 0C4.6952 0 4.65462 1.46633 4.65462 1.76815C4.65462 2.22604 4.65462 3.6 4.65462 3.6H8.54553V4.14996C8.54553 4.14996 4.49433 4.14996 3.10916 4.14996C1.95295 4.14996 0.5 4.85295 0.5 7.96814C0.5 10.8297 1.63338 11.9363 2.77724 11.9363C3.11687 11.9363 4.13636 11.9363 4.13636 11.9363C4.13636 11.9363 4.13636 10.5159 4.13636 10.0272C4.13636 9.22851 4.53215 7.74996 6.37724 7.74996C8.69142 7.74996 9.28211 7.74996 10.2363 7.74996C10.8039 7.74996 12.4044 7.50327 12.4044 5.65455C12.4044 3.69789 12.4044 3.05236 12.4044 2.13178C12.4046 1.67316 12.3262 0 8.4728 0ZM6.32735 1.23185C6.71455 1.23185 7.02742 1.54458 7.02742 1.93193C7.02742 2.31898 6.71455 2.632 6.32735 2.632C5.94015 2.632 5.62727 2.31913 5.62727 1.93193C5.62727 1.54458 5.94015 1.23185 6.32735 1.23185Z"
+			fill="url(#paint0_linear_128_281)"
+		/>
+		<path
+			d="M8.527 16C12.3029 16 12.3498 14.506 12.3498 14.2319C12.3498 13.774 12.3498 12.4 12.3498 12.4H8.45427V11.85C8.45427 11.85 12.5317 11.85 13.8906 11.85C15.0556 11.85 16.4998 11.1295 16.4998 8.03187C16.4998 4.63957 14.967 4.06372 14.2226 4.06372C13.8828 4.06372 12.8634 4.06372 12.8634 4.06372C12.8634 4.06372 12.8634 5.54968 12.8634 5.97281C12.8634 6.7715 12.4807 8.25005 10.6226 8.25005C8.30838 8.25005 7.78969 8.25005 6.76336 8.25005C6.19725 8.25005 4.59521 8.52583 4.59521 10.3455C4.59521 12.4509 4.59521 13.0022 4.59521 13.8682C4.59521 14.629 5.06009 16 8.527 16ZM10.6726 14.7682C10.2854 14.7682 9.97252 14.4553 9.97252 14.0681C9.97252 13.6809 10.2853 13.368 10.6726 13.368C11.0597 13.368 11.3727 13.6809 11.3727 14.0681C11.3727 14.4553 11.0597 14.7682 10.6726 14.7682Z"
+			fill="url(#paint1_linear_128_281)"
+		/>
+	</g>
+	<defs>
+		<linearGradient
+			id="paint0_linear_128_281"
+			x1="1.99942"
+			y1="1.42927"
+			x2="9.95251"
+			y2="9.40896"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#387EB8" />
+			<stop offset="1" stop-color="#366994" />
+		</linearGradient>
+		<linearGradient
+			id="paint1_linear_128_281"
+			x1="6.83245"
+			y1="6.52758"
+			x2="15.3593"
+			y2="14.6967"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFE052" />
+			<stop offset="1" stop-color="#FFC331" />
+		</linearGradient>
+		<clipPath id="clip0_128_281">
+			<rect width="16" height="16" fill="white" transform="translate(0.5)" />
+		</clipPath>
+	</defs>
+</svg>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  PythonProps */
+/** @typedef {typeof __propDef.events}  PythonEvents */
+/** @typedef {typeof __propDef.slots}  PythonSlots */
+export default class Python extends SvelteComponentTyped<{
+    [x: string]: any;
+    height?: number | undefined;
+    width?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PythonProps = typeof __propDef.props;
+export type PythonEvents = typeof __propDef.events;
+export type PythonSlots = 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/components/common/languageIcons/TypeScript.svelte

@@ -0,0 +1,31 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg
+	{width}
+	{height}
+	{...$$restProps}
+	viewBox="0 0 17 16"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g clip-path="url(#clip0_128_278)">
+		<path
+			d="M14.9375 0H2.0625C1.19956 0 0.5 0.699555 0.5 1.5625V14.4375C0.5 15.3004 1.19956 16 2.0625 16H14.9375C15.8004 16 16.5 15.3004 16.5 14.4375V1.5625C16.5 0.699555 15.8004 0 14.9375 0Z"
+			fill="#3178C6"
+		/>
+		<path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M10.4062 12.7187V14.2812C10.6594 14.4125 10.9688 14.5094 11.3125 14.575C11.6562 14.6406 12.0312 14.6719 12.4062 14.6719C12.7812 14.6719 13.125 14.6375 13.4688 14.5656C13.8125 14.4937 14.0938 14.375 14.3438 14.2219C14.5969 14.0562 14.8125 13.8469 14.9375 13.5656C15.0625 13.2844 15.1594 12.9719 15.1594 12.5656C15.1594 12.2812 15.1156 12.0344 15.0312 11.8156C14.9469 11.5969 14.825 11.4094 14.6562 11.2531C14.4969 11.0875 14.3125 10.9406 14.0938 10.8156C13.875 10.6906 13.625 10.5594 13.3438 10.4406C13.1375 10.3562 12.9688 10.275 12.7812 10.1937C12.6188 10.1125 12.4781 10.0312 12.375 9.94998C12.2594 9.86561 12.1719 9.77811 12.1094 9.68748C12.0469 9.59373 12.0156 9.49061 12.0156 9.37498C12.0156 9.26873 12.0434 9.17186 12.1 9.08436C12.1566 8.99686 12.2344 8.92498 12.3344 8.86248C12.4344 8.79998 12.5594 8.75311 12.7094 8.71873C12.8563 8.68436 13.0188 8.66873 13.2094 8.66873C13.3406 8.66873 13.4781 8.67842 13.6156 8.69811C13.7594 8.7178 13.9063 8.74811 14.0531 8.78873C14.2 8.82936 14.3438 8.87936 14.4906 8.94186C14.6281 9.00436 14.7563 9.07623 14.8656 9.15748V7.68873C14.6281 7.59811 14.3656 7.52936 14.0844 7.48561C13.8031 7.44186 13.4906 7.41998 13.1156 7.41998C12.7406 7.41998 12.3969 7.46061 12.0531 7.53873C11.7094 7.61686 11.4281 7.74186 11.1781 7.91373C10.925 8.08248 10.7406 8.28873 10.5844 8.56998C10.4375 8.83248 10.3656 9.13248 10.3656 9.50748C10.3656 9.97623 10.5 10.3825 10.7719 10.695C11.0406 11.0387 11.4594 11.2887 11.9906 11.5387C12.2063 11.6262 12.3969 11.7137 12.5844 11.7981C12.7719 11.8825 12.9281 11.97 13.0531 12.0606C13.1875 12.1512 13.2938 12.2512 13.3656 12.3575C13.4438 12.4637 13.4844 12.5887 13.4844 12.7325C13.4844 12.8325 13.46 12.9262 13.4125 13.0137C13.365 13.1012 13.2906 13.1762 13.1906 13.2387C13.0906 13.3012 12.9688 13.3512 12.8156 13.3887C12.6688 13.4231 12.5031 13.4419 12.2844 13.4419C11.9406 13.4419 11.5969 13.3825 11.2844 13.2637C10.9406 13.145 10.6281 12.9669 10.3469 12.7325L10.4062 12.7187ZM7.78125 8.87498H9.78125V7.59373H4.1875V8.87498H6.1875V14.5937H7.78125V8.87498Z"
+			fill="white"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_128_278">
+			<rect width="16" height="16" fill="white" transform="translate(0.5)" />
+		</clipPath>
+	</defs>
+</svg>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TypeScriptProps */
+/** @typedef {typeof __propDef.events}  TypeScriptEvents */
+/** @typedef {typeof __propDef.slots}  TypeScriptSlots */
+export default class TypeScript extends SvelteComponentTyped<{
+    [x: string]: any;
+    height?: number | undefined;
+    width?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TypeScriptProps = typeof __propDef.props;
+export type TypeScriptEvents = typeof __propDef.events;
+export type TypeScriptSlots = 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/components/common/languageIcons/index.d.ts

@@ -0,0 +1,5 @@
+export { default as LanguageIcon } from './LanguageIcon.svelte';
+export { default as BashIcon } from './Bash.svelte';
+export { default as GoIcon } from './Go.svelte';
+export { default as PythonIcon } from './Python.svelte';
+export { default as TypeScriptIcon } from './TypeScript.svelte';

package/components/common/languageIcons/index.js

@@ -0,0 +1,5 @@
+export { default as LanguageIcon } from './LanguageIcon.svelte';
+export { default as BashIcon } from './Bash.svelte';
+export { default as GoIcon } from './Go.svelte';
+export { default as PythonIcon } from './Python.svelte';
+export { default as TypeScriptIcon } from './TypeScript.svelte';