windmill-components 1.56.1 → 1.56.2

package/assets/app.css

@@ -0,0 +1,54 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	@font-face {
+		font-family: 'Inter';
+		src: url('/Inter-Variable.ttf');
+		font-weight: 100 900;
+		font-display: swap;
+	}
+
+	.splitpanes--vertical > .splitpanes__pane {
+		transition: none !important;
+	}
+
+	.splitpanes--horizontal > .splitpanes__pane {
+		transition: none !important;
+	}
+
+	.monaco-workbench > .notifications-toasts.visible {
+		display: none !important;
+	}
+
+	.nowrap pre code.hljs {
+		whitespace: normal !important;
+	}
+
+	svelte-virtual-list-row {
+		overflow: visible !important;
+	}
+
+	svelte-virtual-list-contents > * + * {
+		border-top-width: 1px !important;
+		border-bottom-width: 0px !important;
+	}
+
+	.monaco-editor textarea:focus {
+		box-shadow: none !important;
+	}
+
+	.templatable-editor span.mtk20 {
+		color: black !important;
+	}
+}
+
+@layer components {
+	/* Flow graph viewer -> Svelvet library internal class overwrite */
+	.Node {
+		display: flex !important;
+		cursor: pointer !important;
+	}
+}

package/components/CenteredModal.svelte

@@ -1,10 +1,11 @@
 <script>import { SettingsService } from '../gen';
+import { onMount } from 'svelte';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
 let version = '';
-SettingsService.backendVersion().then((x) => {
-    version = x;
+onMount(async () => {
+    version = await SettingsService.backendVersion();
 });
 </script>
 

package/components/Editor.svelte

@@ -1,26 +1,7 @@
-<script context="module">import * as monaco from 'monaco-editor';
-monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.Latest,
-    allowNonTsExtensions: true,
-    noLib: true
-});
-monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-    noSemanticValidation: true,
-    noSuggestionDiagnostics: true,
-    noSyntaxValidation: true
-});
-monaco.editor.defineTheme('myTheme', {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-        'editorLineNumber.foreground': '#999',
-        'editorGutter.background': '#F9FAFB'
-    }
-});
-monaco.editor.setTheme('myTheme');
+<script context="module">import getMessageServiceOverride from 'vscode/service-override/messages';
+import { StandaloneServices } from 'vscode/services';
 try {
-    StandaloneServices.initialize({
+    StandaloneServices?.initialize({
         ...getMessageServiceOverride(document.body)
     });
 }
@@ -29,18 +10,37 @@ catch (e) {
 }
 </script>
 
-<script>import { browser, dev } from '$app/env';
+<script>import { browser, dev } from '$app/environment';
 import { page } from '$app/stores';
 import { sendUserToast } from '../utils';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
-import getMessageServiceOverride from 'vscode/service-override/messages';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
+languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: languages.typescript.ScriptTarget.Latest,
+    allowNonTsExtensions: true,
+    noLib: true
+});
+languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+    noSemanticValidation: true,
+    noSuggestionDiagnostics: true,
+    noSyntaxValidation: true
+});
+meditor.defineTheme('myTheme', {
+    base: 'vs',
+    inherit: true,
+    rules: [],
+    colors: {
+        'editorLineNumber.foreground': '#999',
+        'editorGutter.background': '#F9FAFB'
+    }
+});
+meditor.setTheme('myTheme');
 import { BASH_INIT_CODE, DENO_INIT_CODE_CLEAR, GO_INIT_CODE, PYTHON_INIT_CODE_CLEAR } from '../script_helpers';
 import { createHash as randomHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import { StandaloneServices } from 'vscode/services';
 let divEl = null;
 let editor;
 export let lang;
@@ -352,9 +352,9 @@ async function closeWebsockets() {
     websocketInterval && clearInterval(websocketInterval);
 }
 async function loadMonaco() {
-    const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
+    const model = meditor.createModel(code, lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
+    editor = meditor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         $dirtyStore = true;
@@ -366,11 +366,11 @@ async function loadMonaco() {
     });
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
             code = getCode();
             shouldBindKey && format && format();
         });
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
             code = getCode();
             shouldBindKey && cmdEnterAction && cmdEnterAction();
         });

package/components/Editor.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import * as monaco from 'monaco-editor';
+import { editor as meditor } from 'monaco-editor';
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -24,7 +24,7 @@ declare const __propDef: {
         setCode?: ((ncode: string) => void) | undefined;
         clearContent?: (() => Promise<void>) | undefined;
         reloadWebsocket?: (() => Promise<void>) | undefined;
-        addAction?: ((id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
+        addAction?: ((id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -46,6 +46,6 @@ export default class Editor extends SvelteComponentTyped<EditorProps, EditorEven
     get setCode(): (ncode: string) => void;
     get clearContent(): () => Promise<void>;
     get reloadWebsocket(): () => Promise<void>;
-    get addAction(): (id: string, label: string, callback: (editor: monaco.editor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
+    get addAction(): (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;
 }
 export {};

package/components/FlowPreviewContent.svelte

@@ -16,7 +16,7 @@ export let previewMode;
 export let open;
 export let jobId = undefined;
 export let job = undefined;
-let isValid = false;
+let isValid = true;
 let isRunning = false;
 let jobProgressReset;
 const { selectedId, previewArgs } = getContext('FlowEditorContext');

package/components/InputTransformForm.svelte

@@ -8,6 +8,7 @@ import { Button, ToggleButton, ToggleButtonGroup } from './common';
 import { faCode } from '@fortawesome/free-solid-svg-icons';
 import TemplateEditor from './TemplateEditor.svelte';
 import Tooltip from './Tooltip.svelte';
+import { setInputCat as computeInputCat } from '../utils';
 export let schema;
 export let arg;
 export let argName;
@@ -20,7 +21,7 @@ export let itemPicker = undefined;
 let monaco = undefined;
 let monacoTemplate = undefined;
 let argInput = undefined;
-let inputCat = 'object';
+let inputCat = computeInputCat(schema.properties[argName].type, schema.properties[argName].format, schema.properties[argName].items?.type, schema.properties[argName].enum, schema.properties[argName].contentEncoding);
 let propertyType = getPropertyType(arg);
 function getPropertyType(arg) {
     let type = arg?.type ?? 'static';

package/components/SimpleEditor.svelte

@@ -1,26 +1,24 @@
-<script context="module">import * as monaco from 'monaco-editor';
+<script>import { browser, dev } from '$app/environment';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import yamlWorker from 'monaco-yaml/yaml.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import { buildWorkerDefinition } from 'monaco-editor-workers';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
+import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
 import libStdContent from '../es5.d.ts.txt?raw';
-monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.Latest,
+languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: languages.typescript.ScriptTarget.Latest,
     allowNonTsExtensions: true,
     noLib: true
 });
-monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+languages.json.jsonDefaults.setDiagnosticsOptions({
     validate: true,
     allowComments: false,
     schemas: [],
     enableSchemaRequest: true
 });
-</script>
-
-<script>import { browser, dev } from '$app/env';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import yamlWorker from 'monaco-yaml/yaml.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import { buildWorkerDefinition } from 'monaco-editor-workers';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
 let divEl = null;
 let editor;
 let model;
@@ -86,9 +84,9 @@ function format() {
 }
 let width = 0;
 async function loadMonaco() {
-    model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
+    model = meditor.createModel(code, lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
+    editor = meditor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
@@ -116,11 +114,11 @@ async function loadMonaco() {
         updateHeight();
     }
     editor.onDidFocusEditorText(() => {
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function () {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
             code = getCode();
             shouldBindKey && format && format();
         });
-        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, function () {
+        editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, function () {
             code = getCode();
             shouldBindKey && cmdEnterAction && cmdEnterAction();
         });
@@ -133,7 +131,7 @@ async function loadMonaco() {
     if (lang == 'javascript') {
         const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
         if (extraLib != '') {
-            monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+            languages.typescript.javascriptDefaults.setExtraLibs([
                 {
                     content: extraLib,
                     filePath: 'windmill.d.ts'
@@ -142,7 +140,7 @@ async function loadMonaco() {
             ]);
         }
         else {
-            monaco.languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
+            languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
         }
     }
 }

package/components/TemplateEditor.svelte

@@ -1,11 +1,16 @@
-<script context="module">import * as monaco from 'monaco-editor';
+<script>import { browser, dev } from '$app/environment';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import { buildWorkerDefinition } from 'monaco-editor-workers';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+import { convertKind, createDocumentationString, createHash, displayPartsToString, editorConfig, updateOptions } from '../editorUtils';
+import { languages, editor as meditor, Uri as mUri, Range } from 'monaco-editor';
 import libStdContent from '../es5.d.ts.txt?raw';
-monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-    target: monaco.languages.typescript.ScriptTarget.Latest,
+languages.typescript.javascriptDefaults.setCompilerOptions({
+    target: languages.typescript.ScriptTarget.Latest,
     allowNonTsExtensions: true,
     noLib: true
 });
-monaco.languages.register({ id: 'template' });
+languages.register({ id: 'template' });
 export const conf = {
     wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
     comments: {
@@ -308,19 +313,10 @@ export const language = {
     }
 };
 // Register a tokens provider for the language
-monaco.languages.registerTokensProviderFactory('template', {
+languages.registerTokensProviderFactory('template', {
     create: () => language
 });
-monaco.languages.setLanguageConfiguration('template', conf);
-// monaco.languages.typescript.getTypeScriptWorker()
-// Register a completion item provider for the new language
-</script>
-
-<script>import { browser, dev } from '$app/env';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import { buildWorkerDefinition } from 'monaco-editor-workers';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-import { convertKind, createDocumentationString, createHash, displayPartsToString, editorConfig, updateOptions } from '../editorUtils';
+languages.setLanguageConfiguration('template', conf);
 let divEl = null;
 let editor;
 let model;
@@ -364,9 +360,9 @@ let cip;
 let extraModel;
 let width = 0;
 async function loadMonaco() {
-    model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
+    model = meditor.createModel(code, lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = monaco.editor.create(divEl, {
+    editor = meditor.create(divEl, {
         ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
         lineNumbers: 'off',
         fontSize: 16,
@@ -375,7 +371,7 @@ async function loadMonaco() {
     });
     const stdLib = { content: libStdContent, filePath: 'es5.d.ts' };
     if (extraLib != '') {
-        monaco.languages.typescript.javascriptDefaults.setExtraLibs([
+        languages.typescript.javascriptDefaults.setExtraLibs([
             {
                 content: extraLib,
                 filePath: 'windmill.d.ts'
@@ -384,12 +380,12 @@ async function loadMonaco() {
         ]);
     }
     else {
-        monaco.languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
+        languages.typescript.javascriptDefaults.setExtraLibs([stdLib]);
     }
-    extraModel = monaco.editor.createModel('`' + model.getValue() + '`', 'javascript');
-    const worker = await monaco.languages.typescript.getJavaScriptWorker();
+    extraModel = meditor.createModel('`' + model.getValue() + '`', 'javascript');
+    const worker = await languages.typescript.getJavaScriptWorker();
     const client = await worker(extraModel.uri);
-    cip = monaco.languages.registerCompletionItemProvider('template', {
+    cip = languages.registerCompletionItemProvider('template', {
         triggerCharacters: ['.'],
         provideCompletionItems: async (model, position) => {
             extraModel.setValue('`' + model.getValue() + '`');
@@ -399,7 +395,7 @@ async function loadMonaco() {
                 return { suggestions: [] };
             }
             const wordInfo = model.getWordUntilPosition(position);
-            const wordRange = new monaco.Range(position.lineNumber, wordInfo.startColumn, position.lineNumber, wordInfo.endColumn);
+            const wordRange = new Range(position.lineNumber, wordInfo.startColumn, position.lineNumber, wordInfo.endColumn);
             const suggestions = info.entries
                 .filter((x) => x.kind != 'keyword' && x.kind != 'var')
                 .map((entry) => {
@@ -407,11 +403,11 @@ async function loadMonaco() {
                 if (entry.replacementSpan) {
                     const p1 = model.getPositionAt(entry.replacementSpan.start);
                     const p2 = model.getPositionAt(entry.replacementSpan.start + entry.replacementSpan.length);
-                    range = new monaco.Range(p1.lineNumber, p1.column, p2.lineNumber, p2.column);
+                    range = new Range(p1.lineNumber, p1.column, p2.lineNumber, p2.column);
                 }
                 const tags = [];
                 if (entry.kindModifiers?.indexOf('deprecated') !== -1) {
-                    tags.push(monaco.languages.CompletionItemTag.Deprecated);
+                    tags.push(languages.CompletionItemTag.Deprecated);
                 }
                 return {
                     uri: model.uri,

package/components/TemplateEditor.svelte.d.ts

@@ -1,25 +1 @@
-export declare const conf: {
-    wordPattern: RegExp;
-    comments: {
-        lineComment: string;
-        blockComment: [string, string];
-    };
-    brackets: [string, string][];
-    onEnterRules: never[];
-    autoClosingPairs: ({
-        open: string;
-        close: string;
-        notIn?: undefined;
-    } | {
-        open: string;
-        close: string;
-        notIn: string[];
-    })[];
-    folding: {
-        markers: {
-            start: RegExp;
-            end: RegExp;
-        };
-    };
-};
-export declare const language: boolean;
+export {};

package/components/apps/components/buttons/AppButton.svelte

@@ -1,5 +1,5 @@
 <script>import { Button } from '../../../common';
-import { faArrowRight, faRefresh } from '@fortawesome/free-solid-svg-icons';
+import { faArrowRight, faRefresh, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
@@ -56,12 +56,17 @@ $: loading = isLoading && ownClick;
 			}}
 			{size}
 			{color}
-			endIcon={{
-				icon: loading ? faRefresh : faArrowRight,
-				classes: loading ? 'animate-spin w-4' : 'w-4'
-			}}
+			endIcon={loading
+				? {
+						icon: faSpinner,
+						classes: 'animate-spin w-4'
+				  }
+				: undefined}
 		>
 			{labelValue}
+			{#if !loading}
+				<span class="w-5" />
+			{/if}
 		</Button>
 	</AlignWrapper>
 </RunnableWrapper>

package/components/apps/editor/settingsPanel/AlignmentEditor.svelte

@@ -6,22 +6,24 @@ export let component;
 
 {#if component.verticalAlignment !== undefined}
 	<PanelSection title="Alignment">
-		<div class="w-full text-xs font-semibold">Horizontal</div>
+		{#if component.horizontalAlignment}
+			<div class="w-full text-xs font-semibold">Horizontal</div>
 
-		<div class="w-full">
-			<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
-				<ToggleButton position="left" value="left" size="xs">
-					<AlignStartVertical size={16} />
-				</ToggleButton>
-				<ToggleButton position="center" value="center" size="xs">
-					<AlignCenterVertical size={16} />
-				</ToggleButton>
-				<ToggleButton position="right" value="right" size="xs">
-					<AlignEndVertical size={16} />
-				</ToggleButton>
-			</ToggleButtonGroup>
-		</div>
-		{#if component.type !== 'formcomponent'}
+			<div class="w-full">
+				<ToggleButtonGroup bind:selected={component.horizontalAlignment}>
+					<ToggleButton position="left" value="left" size="xs">
+						<AlignStartVertical size={16} />
+					</ToggleButton>
+					<ToggleButton position="center" value="center" size="xs">
+						<AlignCenterVertical size={16} />
+					</ToggleButton>
+					<ToggleButton position="right" value="right" size="xs">
+						<AlignEndVertical size={16} />
+					</ToggleButton>
+				</ToggleButtonGroup>
+			</div>
+		{/if}
+		{#if component.type !== 'formcomponent' && component.verticalAlignment}
 			<div class="w-full text-xs font-semibold">Vertical</div>
 			<div class="w-full">
 				<ToggleButtonGroup bind:selected={component.verticalAlignment}>

package/components/apps/utils.js

@@ -1,6 +1,6 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
-import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft } from 'lucide-svelte';
+import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft } from 'lucide-svelte';
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -8,8 +8,12 @@ beforeNavigate((newNavigationState) => {
     if (!navigationState &&
         $dirtyStore &&
         newNavigationState.to &&
-        newNavigationState.to.pathname !== newNavigationState.from.pathname) {
-        navigationState = newNavigationState;
+        newNavigationState.to.url.pathname !== newNavigationState.from?.url.pathname) {
+        navigationState = {
+            to: newNavigationState.to.url,
+            from: newNavigationState.from?.url,
+            cancel: newNavigationState.cancel
+        };
         newNavigationState.cancel();
     }
 });

package/components/common/drawer/Drawer.svelte

@@ -1,5 +1,6 @@
 <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';
@@ -25,9 +26,11 @@ let mounted = false;
 const dispatch = createEventDispatcher();
 $: style = `--duration: ${duration}s; --size: ${size};`;
 function scrollLock(open) {
-    const body = document.querySelector('body');
-    if (mounted && body) {
-        body.style.overflowY = open ? 'hidden' : 'auto';
+    if (browser) {
+        const body = document.querySelector('body');
+        if (mounted && body) {
+            body.style.overflowY = open ? 'hidden' : 'auto';
+        }
     }
 }
 $: scrollLock(open);

package/components/common/menu/Menu.svelte

@@ -1,3 +1,7 @@
+<script context="module">"use strict";
+let current = undefined;
+</script>
+
 <script>import { classNames } from '../../../utils';
 import { onMount } from 'svelte';
 export let noMinW = false;
@@ -37,7 +41,16 @@ const placementsClasses = {
 
 <div class="relative" bind:this={menu}>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div on:click|stopPropagation={() => (show = !show)} class="cursor-pointer hover:bg-gray-100/30">
+	<div
+		on:click|stopPropagation={() => {
+			if (!show) {
+				current && current()
+				current = close
+			}
+			show = !show
+		}}
+		class="cursor-pointer hover:bg-gray-100/30"
+	>
 		<slot class="triggerable" name="trigger" />
 	</div>
 	{#if show}

package/components/common/table/LanguageBadge.svelte.d.ts

@@ -1,17 +1,5 @@
-/** @typedef {typeof __propDef.props}  LanguageBadgeProps */
-/** @typedef {typeof __propDef.events}  LanguageBadgeEvents */
-/** @typedef {typeof __propDef.slots}  LanguageBadgeSlots */
-export default class LanguageBadge extends SvelteComponentTyped<{
-    language: Script.language;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type LanguageBadgeProps = typeof __propDef.props;
-export type LanguageBadgeEvents = typeof __propDef.events;
-export type LanguageBadgeSlots = typeof __propDef.slots;
-import { Script } from "../../../gen";
 import { SvelteComponentTyped } from "svelte";
+import { Script } from '../../../gen';
 declare const __propDef: {
     props: {
         language: Script.language;
@@ -21,4 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
+export type LanguageBadgeProps = typeof __propDef.props;
+export type LanguageBadgeEvents = typeof __propDef.events;
+export type LanguageBadgeSlots = typeof __propDef.slots;
+export default class LanguageBadge extends SvelteComponentTyped<LanguageBadgeProps, LanguageBadgeEvents, LanguageBadgeSlots> {
+}
 export {};

package/components/sidebar/MenuLink.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../utils';
-import { navigating } from '$app/stores';
+import { navigating, page } from '$app/stores';
 import Icon from 'svelte-awesome';
 export let label;
 export let href;
@@ -9,10 +9,10 @@ export let disabled = false;
 let isSelected = false;
 navigating.subscribe(() => {
     if (href === '/') {
-        isSelected = window.location.pathname === href;
+        isSelected = $page.url.pathname === href;
     }
     else {
-        isSelected = window.location.pathname.includes(href);
+        isSelected = $page.url.pathname.includes(href);
     }
 });
 </script>
@@ -41,7 +41,7 @@ navigating.subscribe(() => {
 		{#if !isCollapsed}
 			<span
 				class={classNames(
-					'whitespace-pre text-white truncate',
+					'whitespace-pre truncate',
 					isSelected ? ' text-gray-700 font-bold' : 'text-white group-hover:text-gray-900'
 				)}
 			>

package/components/sidebar/MenuLink.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types';
 declare const __propDef: {
     props: {
         [x: string]: any;