windmill-components 1.35.42 → 1.36.0

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -0,0 +1,241 @@
+<script>import { getContext } from 'svelte';
+import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte';
+import Icon from 'svelte-awesome';
+import { faCalendarAlt, faPen, faPlus, faSliders } from '@fortawesome/free-solid-svg-icons';
+import { emptyFlowModuleState, isEmptyFlowModule } from '../flowStateUtils';
+import { classNames, emptyModule } from '../../../utils';
+import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
+import RemoveStepConfirmationModal from '../content/RemoveStepConfirmationModal.svelte';
+export let prefix = undefined;
+export let modules;
+export let moduleStates;
+const { select, selectedId, schedule } = getContext('FlowEditorContext');
+function insertAtIndex(index) {
+    moduleStates.splice(index, 0, emptyFlowModuleState());
+    modules.splice(index, 0, emptyModule());
+    moduleStates = moduleStates;
+    modules = modules;
+    select([prefix, String(index)].filter(Boolean).join('-'));
+}
+function removeAtIndex(index) {
+    select('settings');
+    modules.splice(index, 1);
+    moduleStates.splice(index, 1);
+    moduleStates = moduleStates;
+    modules = modules;
+}
+let indexToRemove = undefined;
+$: confirmationModalOpen = indexToRemove !== undefined;
+</script>
+
+<div class="flex flex-col justify-between h-full">
+	<ul class="w-full">
+		{#if prefix === undefined}
+			<div
+				on:click={() => select('settings')}
+				class={classNames(
+					'border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4',
+					$selectedId.includes('settings')
+						? 'outline outline-offset-1 outline-2  outline-slate-900'
+						: ''
+				)}
+			>
+				<Icon data={faSliders} class="mr-2" />
+				<span class="font-bold flex flex-row justify-between w-full flex-wrap gap-2"
+					>Settings <span
+						class={classNames('badge', $schedule?.enabled ? 'badge-on' : 'badge-off')}
+						on:click|stopPropagation={() => select('settings-schedule')}
+					>
+						{$schedule.cron}
+						<Icon class={$schedule.cron ? 'ml-2' : ''} data={faCalendarAlt} scale={0.8} />
+					</span></span
+				>
+			</div>
+
+			<FlowModuleSchemaItem
+				on:click={() => select('inputs')}
+				isFirst
+				hasLine
+				selected={$selectedId === 'inputs'}
+			>
+				<div slot="icon">
+					<Icon data={faPen} scale={0.8} />
+				</div>
+				<div slot="content" class="flex flex-row">
+					<span>Inputs</span>
+				</div>
+			</FlowModuleSchemaItem>
+		{/if}
+
+		{#each modules as mod, index (index)}
+			<button
+				on:click={() => insertAtIndex(index)}
+				type="button"
+				class="text-gray-900 m-0.5 my-0.5 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+			>
+				<Icon data={faPlus} scale={0.8} />
+			</button>
+			{#if mod.value.type === 'forloopflow'}
+				<li>
+					<FlowModuleSchemaItem
+						deletable
+						on:delete={() => removeAtIndex(index)}
+						on:click={() => select(['loop', String(index)].join('-'))}
+						selected={$selectedId === ['loop', String(index)].join('-')}
+						retry={mod.retry?.constant != undefined || mod.retry?.exponential != undefined}
+						earlyStop={mod.stop_after_if != undefined}
+						suspend={Boolean(mod.suspend)}
+					>
+						<div slot="icon">
+							<span>{index + 1}</span>
+						</div>
+						<div slot="content" class="truncate block w-full">
+							<span>{mod.summary || 'For loop'}</span>
+						</div>
+					</FlowModuleSchemaItem>
+
+					<div class="flex text-xs">
+						<div class="line mr-2 w-8" />
+
+						<div class="w-full mb-2">
+							{#if moduleStates[index]?.childFlowModules}
+								<svelte:self
+									prefix={String(index)}
+									moduleStates={moduleStates[index].childFlowModules}
+									modules={mod.value.modules}
+								/>
+							{/if}
+						</div>
+					</div>
+
+					<div class="italic text-xs pl-10 text-gray-600">
+						The loop's result is the list of every iteration's result.
+					</div>
+				</li>
+			{:else}
+				<li>
+					<FlowModuleSchemaItem
+						on:click={() => select([prefix, String(index)].filter(Boolean).join('-'))}
+						color={prefix ? 'orange' : 'blue'}
+						isLast={index === modules.length - 1}
+						selected={$selectedId === [prefix, String(index)].filter(Boolean).join('-')}
+						deletable
+						on:delete={(event) => {
+							if (event.detail.event.shiftKey || isEmptyFlowModule(mod)) {
+								removeAtIndex(index)
+							} else {
+								indexToRemove = index
+							}
+						}}
+						retry={mod.retry?.constant != undefined || mod.retry?.exponential != undefined}
+						earlyStop={mod.stop_after_if != undefined}
+						suspend={Boolean(mod.suspend)}
+					>
+						<div slot="icon">
+							<span>{index + 1}</span>
+						</div>
+						<div slot="content" class="w-full truncate block">
+							<span
+								>{mod.summary ||
+									mod.value.path ||
+									(mod.value.type === 'rawscript'
+										? `Inline ${mod.value.language}`
+										: 'Select a script')}</span
+							>
+						</div>
+					</FlowModuleSchemaItem>
+				</li>
+			{/if}
+		{/each}
+
+		<button
+			on:click={() => insertAtIndex(modules.length)}
+			type="button"
+			class="text-gray-900 bg-white border m-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+		>
+			<Icon data={faPlus} scale={0.8} />
+		</button>
+	</ul>
+	{#if prefix === undefined}
+		<FlowErrorHandlerItem />
+	{/if}
+</div>
+
+<RemoveStepConfirmationModal
+	bind:open={confirmationModalOpen}
+	on:canceled={() => {
+		indexToRemove = undefined
+	}}
+	on:confirmed={() => {
+		if (indexToRemove !== undefined) {
+			removeAtIndex(indexToRemove)
+			indexToRemove = undefined
+		}
+	}}
+/>
+
+<style>
+	.badge {
+
+    display: flex;
+
+    cursor: pointer;
+
+    align-items: center;
+
+    white-space: nowrap;
+
+    border-radius: 0.25rem;
+
+    border-width: 1px;
+
+    padding-left: 0.625rem;
+
+    padding-right: 0.625rem;
+
+    padding-top: 0.125rem;
+
+    padding-bottom: 0.125rem;
+
+    font-size: 0.875rem;
+
+    line-height: 1.25rem;
+
+    font-weight: 500
+}
+
+	.badge-on {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(225 239 254 / var(--tw-bg-opacity));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(30 66 159 / var(--tw-text-opacity))
+}
+
+	.badge-on:hover {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(195 221 253 / var(--tw-bg-opacity))
+}
+
+	.badge-off {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+
+    --tw-text-opacity: 1;
+
+    color: rgb(31 41 55 / var(--tw-text-opacity))
+}
+
+	.badge-off:hover {
+
+    --tw-bg-opacity: 1;
+
+    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
+}</style>

package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FlowModuleState } from '../flowState';
+import type { FlowModule } from '../../../gen';
+declare const __propDef: {
+    props: {
+        prefix?: string | undefined;
+        modules: FlowModule[];
+        moduleStates: FlowModuleState[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FlowModuleSchemaMapProps = typeof __propDef.props;
+export declare type FlowModuleSchemaMapEvents = typeof __propDef.events;
+export declare type FlowModuleSchemaMapSlots = typeof __propDef.slots;
+export default class FlowModuleSchemaMap extends SvelteComponentTyped<FlowModuleSchemaMapProps, FlowModuleSchemaMapEvents, FlowModuleSchemaMapSlots> {
+}
+export {};

package/components/flows/pickers/PickHubScript.svelte

@@ -3,9 +3,10 @@ import FlowScriptPicker from './FlowScriptPicker.svelte';
 import ItemPicker from '../../ItemPicker.svelte';
 import { hubScripts } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
-export let isTrigger = false;
+import { Script } from '../../../gen';
+export let kind;
 let items;
-$: items = $hubScripts?.filter((x) => x.is_trigger == isTrigger) ?? [];
+$: items = $hubScripts?.filter((x) => x.kind == kind);
 let itemPicker;
 const dispatch = createEventDispatcher();
 </script>
@@ -20,10 +21,11 @@ const dispatch = createEventDispatcher();
 	loadItems={async () => {
 		return items
 	}}
+	noItemMessage="Hub not reachable. If your environment is air gapped, contact sales@windmill.dev to setup a local mirror."
 />
 
 <FlowScriptPicker
-	label={`Pick a ${isTrigger ? 'trigger ' : ''} script from the Hub`}
+	label={`Pick a ${kind == Script.kind.SCRIPT ? '' : kind} script from the Hub`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
 	on:click={() => itemPicker.openModal()}

package/components/flows/pickers/PickHubScript.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
+import { Script } from '../../../gen';
 declare const __propDef: {
     props: {
-        isTrigger?: boolean | undefined;
+        kind: Script.kind;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/pickers/PickScript.svelte

@@ -4,17 +4,11 @@ import { ScriptService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
 import FlowScriptPicker from './FlowScriptPicker.svelte';
-export let isTrigger = false;
-let items = [];
+export let kind;
 let itemPicker;
 const dispatch = createEventDispatcher();
 async function loadItems() {
-    items = await ScriptService.listScripts({ workspace: $workspaceStore, isTrigger });
-}
-$: {
-    if ($workspaceStore) {
-        loadItems();
-    }
+    return await ScriptService.listScripts({ workspace: $workspaceStore, kind });
 }
 </script>
 
@@ -25,13 +19,11 @@ $: {
 	}}
 	itemName={'Script'}
 	extraField="summary"
-	loadItems={async () => {
-		return items
-	}}
+	{loadItems}
 />
 
 <FlowScriptPicker
-	label={`Pick a ${isTrigger ? 'trigger ' : ''}script from your workspace`}
+	label={`Pick a ${kind == 'script' ? '' : kind} script from your workspace`}
 	icon={faUserGroup}
 	iconColor="text-blue-500"
 	on:click={() => itemPicker.openModal()}

package/components/flows/pickers/PickScript.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        isTrigger?: boolean | undefined;
+        kind: string;
     };
     events: {
         pick: CustomEvent<any>;

package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -0,0 +1,44 @@
+<script context="module">export {};
+</script>
+
+<script>import PropPicker from '../../propertyPicker/PropPicker.svelte';
+import { createEventDispatcher, setContext } from 'svelte';
+import { HSplitPane } from 'svelte-split-pane';
+import { writable } from 'svelte/store';
+export let pickableProperties = {};
+const propPickerConfig = writable(undefined);
+const dispatch = createEventDispatcher();
+setContext('PropPickerWrapper', {
+    propPickerConfig,
+    focusProp: (propName, insertionMode, onSelect) => {
+        propPickerConfig.set({
+            propName,
+            insertionMode,
+            onSelect
+        });
+    },
+    clearFocus: () => {
+        propPickerConfig.set(undefined);
+    }
+});
+</script>
+
+<HSplitPane leftPaneSize="50%" rightPaneSize="50%" minLeftPaneSize="20%" minRightPaneSize="20%">
+	<left slot="left" class="relative">
+		<div class="overflow-auto h-full p-4">
+			<slot />
+		</div>
+	</left>
+	<right slot="right">
+		<div class="overflow-auto h-full">
+			<PropPicker
+				{pickableProperties}
+				on:select={({ detail }) => {
+					dispatch('select', detail)
+					$propPickerConfig?.onSelect(detail)
+					propPickerConfig.set(undefined)
+				}}
+			/>
+		</div>
+	</right>
+</HSplitPane>

package/components/flows/propPicker/PropPickerWrapper.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+declare type InsertionMode = 'append' | 'connect' | 'insert';
+declare type SelectCallback = (path: string) => void;
+declare type PropPickerConfig = {
+    insertionMode: InsertionMode;
+    propName: string;
+    onSelect: SelectCallback;
+};
+export declare type PropPickerWrapperContext = {
+    propPickerConfig: Writable<PropPickerConfig | undefined>;
+    focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void;
+    clearFocus: () => void;
+};
+import { type Writable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        pickableProperties?: Object | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PropPickerWrapperProps = typeof __propDef.props;
+export declare type PropPickerWrapperEvents = typeof __propDef.events;
+export declare type PropPickerWrapperSlots = typeof __propDef.slots;
+export default class PropPickerWrapper extends SvelteComponentTyped<PropPickerWrapperProps, PropPickerWrapperEvents, PropPickerWrapperSlots> {
+}
+export {};

package/components/flows/scheduleUtils.d.ts

@@ -2,6 +2,5 @@ export declare type Schedule = {
     args: Record<string, any>;
     cron: string;
     enabled: boolean;
-    previewArgs: Record<string, any>;
 };
 export declare function loadFlowSchedule(path: string, workspace?: string): Promise<Schedule>;

package/components/flows/scheduleUtils.js

@@ -16,6 +16,5 @@ export async function loadFlowSchedule(path, workspace = '') {
         enabled: schedule.enabled,
         cron: schedule.schedule,
         args: schedule.args ?? {},
-        previewArgs: JSON.parse(JSON.stringify(schedule.args))
     };
 }

package/components/flows/types.d.ts

@@ -0,0 +1,8 @@
+import type { Writable } from 'svelte/store';
+import type { Schedule } from './scheduleUtils';
+export declare type FlowEditorContext = {
+    selectedId: Writable<string>;
+    select: (id: string) => void;
+    schedule: Writable<Schedule>;
+    previewArgs: Writable<Record<string, any>>;
+};

package/components/flows/types.js

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

package/components/flows/utils.d.ts

@@ -2,7 +2,8 @@ import type { Schema } from '../../common';
 import { type Flow, type FlowModule, type InputTransform, type Job } from '../../gen';
 export declare function cleanInputs(flow: Flow | any): Flow;
 export declare function getTypeAsString(arg: any): string;
-export declare function scrollIntoView(element: any): void;
+export declare function selectedIdToIndexes(selectedId: string): number[];
+export declare function selectedIdToModule(selectedId: string, flow: Flow): FlowModule;
 export declare function loadSchemaFromModule(module: FlowModule): Promise<{
     input_transforms: Record<string, InputTransform>;
     schema: Schema;
@@ -12,3 +13,4 @@ export declare function getDefaultExpr(importPath?: string | undefined, key?: st
 export declare function jobsToResults(jobs: Job[]): any;
 export declare function runFlowPreview(args: Record<string, any>, flow: Flow): Promise<string>;
 export declare function codeToStaticTemplate(code?: string): string | undefined;
+export declare function getIndexes(parentIndex: number | undefined, childIndex: number): number[];

package/components/flows/utils.js

@@ -35,16 +35,24 @@ export function getTypeAsString(arg) {
     }
     return typeof arg;
 }
-export function scrollIntoView(element) {
-    if (!element)
-        return;
-    var headerOffset = 45;
-    var elementPosition = element.getBoundingClientRect().top;
-    var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-    window.scrollTo({
-        top: offsetPosition,
-        behavior: 'smooth'
-    });
+export function selectedIdToIndexes(selectedId) {
+    const splitted = selectedId.split('-');
+    if (splitted[0] == 'loop') {
+        return [Number(splitted[1])];
+    }
+    else {
+        return splitted.map(Number);
+    }
+}
+export function selectedIdToModule(selectedId, flow) {
+    const [p, c] = selectedIdToIndexes(selectedId);
+    const pm = flow.value.modules[p];
+    if (c && pm.value.type == 'forloopflow') {
+        return pm.value.modules[c];
+    }
+    else {
+        return pm;
+    }
 }
 export async function loadSchemaFromModule(module) {
     const mod = module.value;
@@ -134,3 +142,11 @@ export function codeToStaticTemplate(code) {
     }
     return undefined;
 }
+export function getIndexes(parentIndex, childIndex) {
+    const indexes = [];
+    if (parentIndex !== undefined) {
+        indexes.push(parentIndex);
+    }
+    indexes.push(childIndex);
+    return indexes;
+}

package/components/icons/AirtableIcon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 50 50"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 >
 	<path
 		d="M 24.505859 4.0078125 C 23.980484 4.0080625 23.454344 4.1114062 22.964844 4.3164062 L 4.2226562 11.646484 C 3.4796562 11.959484 3 12.683281 3 13.488281 C 2.999 14.293281 3.4771406 15.017797 4.2441406 15.341797 L 23.236328 22.775391 C 23.613328 22.935391 24.018969 23.013672 24.417969 23.013672 C 24.802969 23.013672 25.181391 22.939875 25.525391 22.796875 L 45.771484 15.330078 C 46.519484 15.018078 47.001953 14.292422 47.001953 13.482422 C 47.000953 12.672422 46.516422 11.949047 45.732422 11.623047 L 26.046875 4.3144531 C 25.556875 4.1104531 25.031234 4.0075625 24.505859 4.0078125 z M 24.498047 6.0097656 C 24.770047 6.0097656 25.0455 6.0647813 25.3125 6.1757812 L 45.041016 13.46875 L 24.794922 20.935547 C 24.551922 21.039547 24.266188 21.039828 23.992188 20.923828 L 4.9765625 13.5 L 23.705078 6.1738281 L 23.728516 6.1640625 C 23.972516 6.0610625 24.233047 6.0097656 24.498047 6.0097656 z M 1.9980469 17.001953 C 0.94204687 17.001953 -2.9605947e-16 17.853906 0 19.003906 L 0 34.970703 C 0 36.129703 0.95195312 36.972656 2.0019531 36.972656 C 2.2979531 36.972656 2.6015312 36.906766 2.8945312 36.759766 L 20.894531 27.998047 C 22.425531 27.232047 22.349531 25.022281 20.769531 24.363281 L 2.7695312 17.15625 C 2.5135313 17.05125 2.2520469 17.001953 1.9980469 17.001953 z M 48.001953 17.001953 C 47.760953 17.001953 47.514484 17.045625 47.271484 17.140625 L 28.271484 24.505859 C 27.505484 24.806859 27 25.544188 27 26.367188 L 27 42.998047 C 27 44.146047 27.940047 45 28.998047 45 C 29.239047 45 29.485516 44.956328 29.728516 44.861328 L 48.728516 37.425781 C 49.495516 37.125781 50 36.387453 50 35.564453 L 50 19.003906 C 50 17.855906 49.059953 17.001953 48.001953 17.001953 z M 2.0058594 19.003906 L 2.0253906 19.013672 L 20.017578 26.201172 L 2 34.970703 L 2.0058594 19.003906 z M 48 19.003906 L 48 35.564453 L 29 42.998047 L 28.994141 26.371094 L 48 19.003906 z"

package/components/icons/DiscordIcon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 50 50"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 	><path
 		d="M 18.90625 7 C 18.90625 7 12.539063 7.4375 8.375 10.78125 C 8.355469 10.789063 8.332031 10.800781 8.3125 10.8125 C 7.589844 11.480469 7.046875 12.515625 6.375 14 C 5.703125 15.484375 4.992188 17.394531 4.34375 19.53125 C 3.050781 23.808594 2 29.058594 2 34 C 1.996094 34.175781 2.039063 34.347656 2.125 34.5 C 3.585938 37.066406 6.273438 38.617188 8.78125 39.59375 C 11.289063 40.570313 13.605469 40.960938 14.78125 41 C 15.113281 41.011719 15.429688 40.859375 15.625 40.59375 L 18.0625 37.21875 C 20.027344 37.683594 22.332031 38 25 38 C 27.667969 38 29.972656 37.683594 31.9375 37.21875 L 34.375 40.59375 C 34.570313 40.859375 34.886719 41.011719 35.21875 41 C 36.394531 40.960938 38.710938 40.570313 41.21875 39.59375 C 43.726563 38.617188 46.414063 37.066406 47.875 34.5 C 47.960938 34.347656 48.003906 34.175781 48 34 C 48 29.058594 46.949219 23.808594 45.65625 19.53125 C 45.007813 17.394531 44.296875 15.484375 43.625 14 C 42.953125 12.515625 42.410156 11.480469 41.6875 10.8125 C 41.667969 10.800781 41.644531 10.789063 41.625 10.78125 C 37.460938 7.4375 31.09375 7 31.09375 7 C 31.019531 6.992188 30.949219 6.992188 30.875 7 C 30.527344 7.046875 30.234375 7.273438 30.09375 7.59375 C 30.09375 7.59375 29.753906 8.339844 29.53125 9.40625 C 27.582031 9.09375 25.941406 9 25 9 C 24.058594 9 22.417969 9.09375 20.46875 9.40625 C 20.246094 8.339844 19.90625 7.59375 19.90625 7.59375 C 19.734375 7.203125 19.332031 6.964844 18.90625 7 Z M 18.28125 9.15625 C 18.355469 9.359375 18.40625 9.550781 18.46875 9.78125 C 16.214844 10.304688 13.746094 11.160156 11.4375 12.59375 C 11.074219 12.746094 10.835938 13.097656 10.824219 13.492188 C 10.816406 13.882813 11.039063 14.246094 11.390625 14.417969 C 11.746094 14.585938 12.167969 14.535156 12.46875 14.28125 C 17.101563 11.410156 22.996094 11 25 11 C 27.003906 11 32.898438 11.410156 37.53125 14.28125 C 37.832031 14.535156 38.253906 14.585938 38.609375 14.417969 C 38.960938 14.246094 39.183594 13.882813 39.175781 13.492188 C 39.164063 13.097656 38.925781 12.746094 38.5625 12.59375 C 36.253906 11.160156 33.785156 10.304688 31.53125 9.78125 C 31.59375 9.550781 31.644531 9.359375 31.71875 9.15625 C 32.859375 9.296875 37.292969 9.894531 40.3125 12.28125 C 40.507813 12.460938 41.1875 13.460938 41.8125 14.84375 C 42.4375 16.226563 43.09375 18.027344 43.71875 20.09375 C 44.9375 24.125 45.921875 29.097656 45.96875 33.65625 C 44.832031 35.496094 42.699219 36.863281 40.5 37.71875 C 38.5 38.496094 36.632813 38.84375 35.65625 38.9375 L 33.96875 36.65625 C 34.828125 36.378906 35.601563 36.078125 36.28125 35.78125 C 38.804688 34.671875 40.15625 33.5 40.15625 33.5 C 40.570313 33.128906 40.605469 32.492188 40.234375 32.078125 C 39.863281 31.664063 39.226563 31.628906 38.8125 32 C 38.8125 32 37.765625 32.957031 35.46875 33.96875 C 34.625 34.339844 33.601563 34.707031 32.4375 35.03125 C 32.167969 35 31.898438 35.078125 31.6875 35.25 C 29.824219 35.703125 27.609375 36 25 36 C 22.371094 36 20.152344 35.675781 18.28125 35.21875 C 18.070313 35.078125 17.8125 35.019531 17.5625 35.0625 C 16.394531 34.738281 15.378906 34.339844 14.53125 33.96875 C 12.234375 32.957031 11.1875 32 11.1875 32 C 10.960938 31.789063 10.648438 31.699219 10.34375 31.75 C 9.957031 31.808594 9.636719 32.085938 9.53125 32.464844 C 9.421875 32.839844 9.546875 33.246094 9.84375 33.5 C 9.84375 33.5 11.195313 34.671875 13.71875 35.78125 C 14.398438 36.078125 15.171875 36.378906 16.03125 36.65625 L 14.34375 38.9375 C 13.367188 38.84375 11.5 38.496094 9.5 37.71875 C 7.300781 36.863281 5.167969 35.496094 4.03125 33.65625 C 4.078125 29.097656 5.0625 24.125 6.28125 20.09375 C 6.90625 18.027344 7.5625 16.226563 8.1875 14.84375 C 8.8125 13.460938 9.492188 12.460938 9.6875 12.28125 C 12.707031 9.894531 17.140625 9.296875 18.28125 9.15625 Z M 18.5 21 C 15.949219 21 14 23.316406 14 26 C 14 28.683594 15.949219 31 18.5 31 C 21.050781 31 23 28.683594 23 26 C 23 23.316406 21.050781 21 18.5 21 Z M 31.5 21 C 28.949219 21 27 23.316406 27 26 C 27 28.683594 28.949219 31 31.5 31 C 34.050781 31 36 28.683594 36 26 C 36 23.316406 34.050781 21 31.5 21 Z M 18.5 23 C 19.816406 23 21 24.265625 21 26 C 21 27.734375 19.816406 29 18.5 29 C 17.183594 29 16 27.734375 16 26 C 16 24.265625 17.183594 23 18.5 23 Z M 31.5 23 C 32.816406 23 34 24.265625 34 26 C 34 27.734375 32.816406 29 31.5 29 C 30.183594 29 29 27.734375 29 26 C 29 24.265625 30.183594 23 31.5 23 Z"
 	/></svg

package/components/icons/GCloudIcon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 50 50"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 	><path
 		d="M 15.6875 4 C 14.113281 4 12.652344 4.867188 11.875 6.25 L 2.59375 22.78125 C 1.816406 24.160156 1.816406 25.839844 2.59375 27.21875 L 11.875 43.75 C 12.652344 45.132813 14.113281 46 15.6875 46 L 34.3125 46 C 35.886719 46 37.347656 45.132813 38.125 43.75 L 47.40625 27.21875 C 48.183594 25.839844 48.183594 24.160156 47.40625 22.78125 L 38.125 6.25 C 37.347656 4.867188 35.886719 4 34.3125 4 Z M 15.6875 6 L 34.3125 6 C 35.15625 6 35.941406 6.449219 36.375 7.21875 L 39.0625 12 L 17.5 12 L 17.21875 12.5 L 11.15625 23 L 7.90625 17.375 L 13.625 7.21875 C 14.058594 6.449219 14.84375 6 15.6875 6 Z M 18.65625 14 L 31.34375 14 L 37.71875 25 L 34.125 31.21875 L 31.34375 36 L 18.65625 36 L 17.5 34.03125 L 14.90625 29.53125 L 12.28125 25 Z M 33.65625 14 L 40.1875 14 L 45.6875 23.75 C 46.121094 24.519531 46.121094 25.480469 45.6875 26.25 L 36.375 42.78125 C 35.941406 43.550781 35.15625 44 34.3125 44 L 29.0625 44 L 32.5 38 L 32.78125 37.5 L 39.71875 25.5 L 40 25 L 39.71875 24.5 Z M 25 19 C 21.699219 19 19 21.699219 19 25 C 19 28.300781 21.699219 31 25 31 C 28.300781 31 31 28.300781 31 25 C 31 21.699219 28.300781 19 25 19 Z M 6.75 19.40625 L 10 25 L 10.28125 25.5 L 15.78125 35.03125 L 17.21875 37.5 L 17.5 38 L 30.1875 38 L 26.71875 44 L 15.6875 44 C 14.84375 44 14.058594 43.550781 13.625 42.78125 L 4.3125 26.25 C 3.878906 25.480469 3.878906 24.519531 4.3125 23.75 Z M 25 21 C 27.222656 21 29 22.777344 29 25 C 29 27.222656 27.222656 29 25 29 C 22.777344 29 21 27.222656 21 25 C 21 22.777344 22.777344 21 25 21 Z"
 	/></svg

package/components/icons/GItlabIcon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 50 50"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 	><path
 		d="M 38.011719 4 C 37.574219 3.996094 37.183594 4.273438 37.046875 4.691406 L 32.074219 20 L 17.925781 20 L 12.953125 4.691406 C 12.820313 4.289063 12.449219 4.011719 12.023438 4 C 11.597656 3.992188 11.214844 4.25 11.0625 4.648438 L 5.070313 20.640625 C 5.066406 20.640625 5.066406 20.644531 5.0625 20.648438 L 2.0625 28.648438 C 1.90625 29.070313 2.046875 29.542969 2.414063 29.808594 L 24.40625 45.800781 L 24.410156 45.808594 C 24.414063 45.808594 24.414063 45.808594 24.414063 45.8125 C 24.425781 45.820313 24.441406 45.828125 24.453125 45.835938 C 24.46875 45.84375 24.480469 45.855469 24.496094 45.863281 C 24.5 45.863281 24.5 45.867188 24.503906 45.867188 C 24.503906 45.867188 24.507813 45.871094 24.511719 45.871094 C 24.515625 45.875 24.519531 45.878906 24.527344 45.878906 C 24.53125 45.882813 24.539063 45.886719 24.542969 45.890625 C 24.5625 45.898438 24.585938 45.910156 24.609375 45.917969 C 24.609375 45.917969 24.609375 45.917969 24.609375 45.921875 C 24.632813 45.929688 24.65625 45.9375 24.675781 45.945313 C 24.679688 45.945313 24.679688 45.945313 24.683594 45.949219 C 24.699219 45.953125 24.714844 45.957031 24.734375 45.964844 C 24.742188 45.964844 24.75 45.96875 24.761719 45.96875 C 24.761719 45.972656 24.761719 45.972656 24.761719 45.96875 C 24.78125 45.976563 24.800781 45.980469 24.820313 45.984375 C 24.847656 45.988281 24.871094 45.992188 24.898438 45.996094 C 24.9375 45.996094 24.980469 46 25.019531 46 C 25.058594 45.996094 25.09375 45.996094 25.128906 45.988281 C 25.144531 45.988281 25.15625 45.988281 25.171875 45.984375 C 25.171875 45.984375 25.175781 45.984375 25.179688 45.984375 C 25.1875 45.980469 25.191406 45.980469 25.199219 45.980469 C 25.203125 45.980469 25.207031 45.976563 25.214844 45.976563 C 25.222656 45.972656 25.234375 45.972656 25.242188 45.96875 C 25.257813 45.964844 25.269531 45.960938 25.28125 45.957031 C 25.289063 45.957031 25.292969 45.957031 25.296875 45.953125 C 25.300781 45.953125 25.304688 45.953125 25.308594 45.953125 C 25.324219 45.945313 25.34375 45.9375 25.359375 45.933594 C 25.378906 45.925781 25.394531 45.917969 25.410156 45.910156 C 25.414063 45.910156 25.414063 45.910156 25.417969 45.90625 C 25.421875 45.90625 25.425781 45.90625 25.429688 45.902344 C 25.4375 45.898438 25.445313 45.894531 25.453125 45.890625 C 25.476563 45.878906 25.496094 45.867188 25.515625 45.855469 C 25.523438 45.851563 25.527344 45.847656 25.53125 45.84375 C 25.535156 45.84375 25.539063 45.839844 25.542969 45.839844 C 25.558594 45.828125 25.574219 45.820313 25.589844 45.808594 L 25.597656 45.796875 L 47.589844 29.808594 C 47.953125 29.542969 48.09375 29.070313 47.9375 28.648438 L 44.945313 20.675781 C 44.941406 20.667969 44.9375 20.65625 44.9375 20.648438 L 38.9375 4.648438 C 38.789063 4.261719 38.425781 4.003906 38.011719 4 Z M 11.933594 8.027344 L 15.824219 20 L 7.445313 20 Z M 38.066406 8.027344 L 42.558594 20 L 34.175781 20 Z M 8.066406 22 L 16.472656 22 L 22.328125 40.015625 Z M 18.578125 22 L 31.421875 22 L 25 41.765625 Z M 33.527344 22 L 41.933594 22 L 27.671875 40.015625 Z M 6.3125 23.007813 L 19.6875 39.902344 L 4.203125 28.640625 Z M 43.6875 23.007813 L 45.796875 28.640625 L 30.3125 39.902344 Z"
 	/></svg

package/components/icons/GSheetsIcon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 50 50"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 	><path
 		d="M 28.90625 1.96875 C 28.863281 1.976563 28.820313 1.988281 28.78125 2 L 11.5 2 C 9.585938 2 8 3.558594 8 5.46875 L 8 43.90625 C 8 46.160156 9.867188 48 12.125 48 L 37.875 48 C 40.132813 48 42 46.160156 42 43.90625 L 42 15.1875 C 42.027344 15.054688 42.027344 14.914063 42 14.78125 L 42 14.5 C 42.007813 14.234375 41.90625 13.972656 41.71875 13.78125 L 30.21875 2.28125 C 30.027344 2.09375 29.765625 1.992188 29.5 2 L 29.1875 2 C 29.097656 1.976563 29 1.964844 28.90625 1.96875 Z M 11.5 4 L 28 4 L 28 12.34375 C 28 14.355469 29.644531 16 31.65625 16 L 40 16 L 40 43.90625 C 40 45.074219 39.054688 46 37.875 46 L 12.125 46 C 10.945313 46 10 45.074219 10 43.90625 L 10 5.46875 C 10 4.644531 10.660156 4 11.5 4 Z M 30 4.9375 L 39.0625 14 L 31.65625 14 C 30.722656 14 30 13.277344 30 12.34375 Z M 17 24 L 17 38 L 33 38 L 33 24 Z M 19 26 L 24 26 L 24 28 L 19 28 Z M 26 26 L 31 26 L 31 28 L 26 28 Z M 19 30 L 24 30 L 24 32 L 19 32 Z M 26 30 L 31 30 L 31 32 L 26 32 Z M 19 34 L 24 34 L 24 36 L 19 36 Z M 26 34 L 31 34 L 31 36 L 26 36 Z"
 	/></svg

package/components/icons/GcalIcon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 32 32"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 	><path
 		d="M 6.9667969 4 C 5.8922226 4 5 4.8922226 5 5.9667969 L 5 8.3867188 C 4.6700827 8.5693007 4.3668503 8.8022905 4.1230469 9.1015625 C 3.5561678 9.7967647 3.3299502 10.7122 3.5097656 11.591797 L 3.5097656 11.59375 C 4.0409792 14.178038 4.7794422 17.772026 4.8261719 18 C 4.7795089 18.227574 4.0439586 21.806083 3.5136719 24.390625 C 3.33239 25.274562 3.5603689 26.193876 4.1289062 26.892578 L 4.1289062 26.894531 C 4.6989448 27.593193 5.5544182 28 6.4570312 28 L 25.501953 28 C 26.414029 28 27.27875 27.588847 27.855469 26.882812 L 27.855469 26.880859 C 28.431397 26.174017 28.661627 25.244791 28.478516 24.351562 C 27.948342 21.768542 27.220293 18.226607 27.173828 18 C 27.220578 17.771923 27.959908 14.172625 28.490234 11.587891 C 28.670205 10.710536 28.445474 9.7948488 27.878906 9.0996094 L 27.876953 9.0976562 C 27.633016 8.7986233 27.330145 8.566746 27 8.3847656 L 27 5.9667969 C 27 4.8922226 26.107777 4 25.033203 4 L 6.9667969 4 z M 7 6 L 25 6 L 25 8 L 7 8 L 7 6 z M 6.4414062 10 L 25 10 L 25 10.003906 L 25.580078 10.003906 C 25.870925 10.00932 26.145127 10.138539 26.328125 10.363281 C 26.516313 10.593787 26.591101 10.893775 26.53125 11.185547 C 25.98421 13.851742 25.173828 17.798828 25.173828 17.798828 L 25.132812 18 L 25.173828 18.201172 C 25.173828 18.201172 25.970539 22.088714 26.517578 24.753906 C 26.579608 25.059411 26.503358 25.374804 26.306641 25.617188 C 26.107355 25.861152 25.815878 26 25.501953 26 L 6.4570312 26 C 6.1536443 26 5.871649 25.864198 5.6796875 25.628906 C 5.4891549 25.393814 5.4120715 25.088382 5.4726562 24.792969 C 6.0196814 22.126846 6.8261719 18.201172 6.8261719 18.201172 L 6.8671875 18 L 6.8261719 17.798828 C 6.8261719 17.798828 6.0168603 13.857943 5.46875 11.191406 L 5.4707031 11.191406 C 5.4106381 10.897589 5.4835861 10.595863 5.671875 10.365234 L 5.6738281 10.365234 C 5.8620903 10.134148 6.1432948 10 6.4414062 10 z M 13.294922 13 C 12.044922 13 10.909797 13.341641 10.341797 13.681641 L 10.796875 15.271484 C 11.250875 15.044484 12.046797 14.703125 12.841797 14.703125 C 13.750797 14.703125 14.205078 15.158563 14.205078 15.726562 C 14.205078 16.521563 13.295 16.863281 12.5 16.863281 L 11.591797 16.863281 L 11.591797 18.453125 L 12.501953 18.453125 C 13.524953 18.453125 14.433594 18.909359 14.433594 19.818359 C 14.433594 20.500359 13.864516 21.068359 12.728516 21.068359 C 11.819516 21.068359 10.910078 20.727 10.455078 20.5 L 9.9980469 22.318359 C 10.566047 22.659359 11.589844 23 12.839844 23 C 15.339844 23 16.816406 21.749922 16.816406 20.044922 C 16.816406 18.681922 15.907484 17.885203 14.771484 17.658203 C 15.908484 17.203203 16.476562 16.409719 16.476562 15.386719 C 16.476562 14.023719 15.339922 13 13.294922 13 z M 19 13 L 19 23 L 21 23 L 21 13 L 19 13 z"
 	/></svg

package/components/icons/GdriveIcon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 32 32"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 	><path
 		d="M 11.4375 5 L 11.15625 5.46875 L 3.15625 18.46875 L 2.84375 18.96875 L 3.125 19.5 L 7.125 26.5 L 7.40625 27 L 24.59375 27 L 24.875 26.5 L 28.875 19.5 L 29.15625 18.96875 L 28.84375 18.46875 L 20.84375 5.46875 L 20.5625 5 Z M 13.78125 7 L 19.4375 7 L 26.21875 18 L 20.5625 18 Z M 12 7.90625 L 14.96875 12.75 L 8.03125 24.03125 L 5.15625 19 Z M 16.15625 14.65625 L 18.21875 18 L 14.09375 18 Z M 12.875 20 L 26.28125 20 L 23.40625 25 L 9.78125 25 Z"
 	/></svg

package/components/icons/GithubIcon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 30 30"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 >
 	<path
 		d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"

package/components/icons/GmailIcon.svelte

@@ -9,7 +9,7 @@ export let width = '24px';
 	{width}
 	{height}
 	viewBox="0 0 50 50"
-	style=" fill:#000000;"
+	style="fill:currentcolor;"
 	><path
 		d="M 43.753906 6.4023438 C 42.53621 6.3489969 41.294792 6.712898 40.271484 7.46875 L 37.525391 9.4960938 L 25 18.755859 L 12.591797 9.5839844 A 1.0001 1.0001 0 0 0 11.949219 9.3007812 L 12.199219 9.3007812 L 9.734375 7.4765625 C 8.7104042 6.7188363 7.4671493 6.3528895 6.2480469 6.40625 C 5.0289444 6.4596105 3.8349462 6.9314667 2.9082031 7.8457031 C 1.7309454 9.0063798 1 10.629831 1 12.410156 L 1 15.84375 A 1.0001 1.0001 0 0 0 1 16.138672 L 1 39.5 C 1 41.421188 2.5788117 43 4.5 43 L 12 43 A 1.0001 1.0001 0 0 0 13 42 L 13 25.373047 L 24.40625 33.804688 A 1.0001 1.0001 0 0 0 25.59375 33.804688 L 37 25.373047 L 37 42 A 1.0001 1.0001 0 0 0 38 43 L 45.5 43 C 47.421188 43 49 41.421188 49 39.5 L 49 16.119141 A 1.0001 1.0001 0 0 0 49 15.859375 L 49 12.410156 C 49 10.6517 48.290455 9.0357821 47.128906 7.8730469 C 47.095336 7.8394769 47.084086 7.83018 47.097656 7.84375 A 1.0001 1.0001 0 0 0 47.091797 7.8378906 C 46.165242 6.9256756 44.971603 6.4556905 43.753906 6.4023438 z M 43.644531 8.4003906 C 44.400835 8.4300436 45.134049 8.7168876 45.689453 9.2636719 C 45.708363 9.2823439 45.722171 9.2964424 45.712891 9.2871094 C 46.50934 10.084374 47 11.188613 47 12.410156 L 47 15.496094 L 39 21.408203 L 39 11 A 1.0001 1.0001 0 0 0 38.996094 10.898438 L 41.458984 9.078125 A 1.0001 1.0001 0 0 0 41.460938 9.078125 C 42.109578 8.598977 42.888228 8.3707375 43.644531 8.4003906 z M 6.3574219 8.40625 C 7.1145694 8.37661 7.8958927 8.6037105 8.5449219 9.0839844 L 11.003906 10.902344 A 1.0001 1.0001 0 0 0 11 11 L 11 21.408203 L 3 15.496094 L 3 12.410156 C 3 11.174482 3.5017577 10.068855 4.3125 9.2695312 C 4.8677569 8.7217677 5.6002743 8.4358895 6.3574219 8.40625 z M 37 12.371094 L 37 22.886719 L 25 31.755859 L 13 22.886719 L 13 12.373047 L 24.40625 20.804688 A 1.0001 1.0001 0 0 0 25.59375 20.804688 L 37 12.371094 z M 3 17.982422 L 11 23.896484 L 11 41 L 4.5 41 C 3.6591883 41 3 40.340812 3 39.5 L 3 17.982422 z M 47 17.982422 L 47 39.5 C 47 40.340812 46.340812 41 45.5 41 L 39 41 L 39 23.896484 L 47 17.982422 z"
 	/></svg

package/components/icons/HatIcon.svelte

@@ -0,0 +1,19 @@
+<script>let clazz = '';
+export { clazz as class };
+</script>
+
+<svg
+	class={clazz}
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path d="M12 14l9-5-9-5-9 5 9 5z" /><path
+		d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"
+	/><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222"
+	/>
+</svg>