windmill-components 1.122.0 → 1.138.2

package/package/components/ScriptEditor.svelte

@@ -20,17 +20,20 @@ import { scriptLangToEditorLang } from '../scripts';
 import { WebsocketProvider } from 'y-websocket';
 import Modal from './common/modal/Modal.svelte';
 import { Icon } from 'svelte-awesome';
+import DiffEditor from './DiffEditor.svelte';
 // Exported
 export let schema = emptySchema();
 export let code;
 export let path;
 export let lang;
 export let kind = undefined;
+export let template = 'script';
 export let tag;
 export let initialArgs = {};
 export let fixedOverflowWidgets = true;
 export let noSyncFromGithub = false;
 export let editor = undefined;
+export let diffEditor = undefined;
 export let collabMode = false;
 export let edit = true;
 let websocketAlive = {
@@ -70,6 +73,7 @@ function onKeyDown(event) {
     }
 }
 function runTest() {
+    //@ts-ignore
     testJobLoader.runPreview(path, code, lang, args, tag);
 }
 async function loadPastTests() {
@@ -178,7 +182,7 @@ function collabUrl() {
 	<div>Have others join by sharing the following url:</div>
 	<div class="flex gap-2 pr-4">
 		<input type="text" disabled value={collabUrl()} />
-		<button on:click={() => copyToClipboard(collabUrl())} class="text-gray-700 ml-2">
+		<button on:click={() => copyToClipboard(collabUrl())} class="text-secondary ml-2">
 			<Icon data={faClipboard} />
 		</button>
 	</div>
@@ -204,6 +208,8 @@ function collabUrl() {
 			{websocketAlive}
 			collabUsers={peers}
 			kind={asKind(kind)}
+			{template}
+			{diffEditor}
 		/>
 		{#if !noSyncFromGithub}
 			<div class="py-1">
@@ -254,9 +260,16 @@ function collabUrl() {
 						}}
 						class="flex flex-1 h-full !overflow-visible"
 						lang={scriptLangToEditorLang(lang)}
+						deno={lang == 'deno'}
 						automaticLayout={true}
 						{fixedOverflowWidgets}
 					/>
+					<DiffEditor
+						bind:this={diffEditor}
+						automaticLayout
+						{fixedOverflowWidgets}
+						class="hidden h-full"
+					/>
 				{/key}
 			</div>
 		</Pane>
@@ -305,7 +318,14 @@ function collabUrl() {
 						</div>
 					</Pane>
 					<Pane size={67}>
-						<LogPanel {lang} previewJob={testJob} {pastPreviews} previewIsLoading={testIsLoading} />
+						<LogPanel
+							{lang}
+							previewJob={testJob}
+							{pastPreviews}
+							previewIsLoading={testIsLoading}
+							{editor}
+							{diffEditor}
+						/>
 					</Pane>
 				</Splitpanes>
 			</div>

package/package/components/ScriptEditor.svelte.d.ts

@@ -1,7 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Schema } from '../common';
+import type { Schema, SupportedLanguage } from '../common';
 import Editor from './Editor.svelte';
 import type { Preview } from '../gen/models/Preview';
+import DiffEditor from './DiffEditor.svelte';
 declare const __propDef: {
     props: {
         schema?: Schema | any;
@@ -9,14 +10,16 @@ declare const __propDef: {
         path: string | undefined;
         lang: Preview.language;
         kind?: string | undefined;
+        template?: "script" | "mysql" | "pgsql" | "docker" | "powershell" | undefined;
         tag: string | undefined;
         initialArgs?: Record<string, any> | undefined;
         fixedOverflowWidgets?: boolean | undefined;
         noSyncFromGithub?: boolean | undefined;
         editor?: Editor | undefined;
+        diffEditor?: DiffEditor | undefined;
         collabMode?: boolean | undefined;
         edit?: boolean | undefined;
-        inferSchema?: ((code: string, nlang?: 'go' | 'bash' | 'python3' | 'deno') => Promise<void>) | undefined;
+        inferSchema?: ((code: string, nlang?: SupportedLanguage) => Promise<void>) | undefined;
         setCollaborationMode?: (() => Promise<void>) | undefined;
         disableCollaboration?: (() => void) | undefined;
     };
@@ -31,7 +34,7 @@ export type ScriptEditorProps = typeof __propDef.props;
 export type ScriptEditorEvents = typeof __propDef.events;
 export type ScriptEditorSlots = typeof __propDef.slots;
 export default class ScriptEditor extends SvelteComponentTyped<ScriptEditorProps, ScriptEditorEvents, ScriptEditorSlots> {
-    get inferSchema(): (code: string, nlang?: "deno" | "python3" | "go" | "bash" | undefined) => Promise<void>;
+    get inferSchema(): (code: string, nlang?: import("../gen").Script.language | undefined) => Promise<void>;
     get setCollaborationMode(): () => Promise<void>;
     get disableCollaboration(): () => void;
 }

package/package/components/ScriptPicker.svelte

@@ -1,7 +1,7 @@
 <script>import { ScriptService, FlowService, Script } from '../gen';
 import { hubScripts, workspaceStore } from '../stores';
-import { createEventDispatcher } from 'svelte';
-import Select from 'svelte-select';
+import { createEventDispatcher, onMount } from 'svelte';
+import Select from './apps/svelte-select/lib/index';
 import { getScriptByPath } from '../scripts';
 import { Button, Drawer, DrawerContent } from './common';
 import HighlightCode from './HighlightCode.svelte';
@@ -10,6 +10,11 @@ import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import { Code2, Globe } from 'lucide-svelte';
+import { faExternalLink, faRotateRight } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import FlowIcon from './home/FlowIcon.svelte';
+import DarkModeObserver from './DarkModeObserver.svelte';
+import { truncate } from '../utils';
 export let initialPath = undefined;
 export let scriptPath = undefined;
 export let allowFlow = false;
@@ -17,26 +22,27 @@ export let allowHub = false;
 export let itemKind = allowHub ? 'hub' : 'script';
 export let kind = Script.kind.SCRIPT;
 export let disabled = false;
+export let canRefresh = false;
 let items = [];
 let drawerViewer;
 let drawerFlowViewer;
 let code = '';
 let lang;
-let options = [['Script', 'script', Code2]];
-allowHub && options.unshift(['Hub', 'hub', Globe]);
-allowFlow && options.push(['Flow', 'flow', undefined]);
+let options = [['Script', 'script', Code2, undefined]];
+allowHub && options.unshift(['Hub', 'hub', Globe, undefined]);
+allowFlow && options.push(['Flow', 'flow', FlowIcon, '#14b8a6']);
 const dispatch = createEventDispatcher();
 async function loadItems() {
     if (itemKind == 'flow') {
         items = (await FlowService.listFlows({ workspace: $workspaceStore })).map((flow) => ({
             value: flow.path,
-            label: `${flow.path}${flow.summary ? ` | ${flow.summary}` : ''}`
+            label: `${flow.path}${flow.summary ? ` | ${truncate(flow.summary, 20)}` : ''}`
         }));
     }
     else if (itemKind == 'script') {
         items = (await ScriptService.listScripts({ workspace: $workspaceStore, kind })).map((script) => ({
             value: script.path,
-            label: `${script.path}${script.summary ? ` | ${script.summary}` : ''}`
+            label: `${script.path}${script.summary ? ` | ${truncate(script.summary, 20)}` : ''}`
         }));
     }
     else {
@@ -48,8 +54,22 @@ async function loadItems() {
     }
 }
 $: itemKind && $workspaceStore && loadItems();
+let darkMode = false;
+function onThemeChange() {
+    if (document.documentElement.classList.contains('dark')) {
+        darkMode = true;
+    }
+    else {
+        darkMode = false;
+    }
+}
+onMount(() => {
+    onThemeChange();
+});
 </script>
 
+<DarkModeObserver on:change={onThemeChange} />
+
 <Drawer bind:this={drawerViewer} size="900px">
 	<DrawerContent title="Script {scriptPath}" on:close={drawerViewer.closeDrawer}>
 		<HighlightCode {code} language={lang} />
@@ -66,8 +86,8 @@ $: itemKind && $workspaceStore && loadItems();
 	{#if options.length > 1}
 		<div>
 			<ToggleButtonGroup bind:selected={itemKind}>
-				{#each options as [label, value, icon]}
-					<ToggleButton {icon} {disabled} {value} {label} />
+				{#each options as [label, value, icon, selectedColor]}
+					<ToggleButton {icon} {disabled} {value} {label} {selectedColor} />
 				{/each}
 			</ToggleButtonGroup>
 		</div>
@@ -78,42 +98,74 @@ $: itemKind && $workspaceStore && loadItems();
 	{:else}
 		<Select
 			value={items.find((x) => x.value == initialPath)}
-			class="grow"
+			class="grow shrink max-w-full"
 			on:change={() => {
 				dispatch('select', { path: scriptPath })
 			}}
+			on:input={(ev) => {
+				if (!ev.detail) {
+					dispatch('select', { path: undefined })
+				}
+			}}
 			bind:justValue={scriptPath}
 			{items}
 			placeholder="Pick a {itemKind}"
 			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-			containerStyles={SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+			containerStyles={darkMode
+				? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+				: SELECT_INPUT_DEFAULT_STYLE.containerStyles}
+			portal={false}
 		/>
 	{/if}
 
+	{#if canRefresh}
+		<Button variant="border" color="light" wrapperClasses="self-stretch" on:click={loadItems}
+			><Icon scale={0.8} data={faRotateRight} /></Button
+		>
+	{/if}
+
 	{#if scriptPath !== undefined && scriptPath !== ''}
 		{#if itemKind == 'flow'}
-			<Button
-				color="light"
-				size="xs"
-				on:click={async () => {
-					drawerFlowViewer.openDrawer()
-				}}
-			>
-				Show flow
-			</Button>
+			<div class="flex gap-2">
+				<Button
+					endIcon={{ icon: faExternalLink }}
+					target="_blank"
+					color="light"
+					size="xs"
+					href="/flows/edit/{scriptPath}">edit</Button
+				>
+				<Button
+					color="light"
+					size="xs"
+					on:click={async () => {
+						drawerFlowViewer.openDrawer()
+					}}
+				>
+					view
+				</Button>
+			</div>
 		{:else}
-			<Button
-				color="light"
-				size="xs"
-				on:click={async () => {
-					const { language, content } = await getScriptByPath(scriptPath ?? '')
-					code = content
-					lang = language
-					drawerViewer.openDrawer()
-				}}
-			>
-				Show code
-			</Button>
+			<div class="flex gap-2">
+				<Button
+					endIcon={{ icon: faExternalLink }}
+					target="_blank"
+					color="light"
+					size="xs"
+					href="/scripts/edit/{scriptPath}">edit</Button
+				>
+				<Button
+					color="light"
+					size="xs"
+					on:click={async () => {
+						const { language, content } = await getScriptByPath(scriptPath ?? '')
+						code = content
+						lang = language
+						drawerViewer.openDrawer()
+					}}
+				>
+					view
+				</Button>
+			</div>
 		{/if}
 	{/if}
 </div>

package/package/components/ScriptPicker.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         itemKind?: "flow" | "script" | "hub" | undefined;
         kind?: Script.kind | undefined;
         disabled?: boolean | undefined;
+        canRefresh?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;

package/package/components/ScriptVersionHistory.svelte

@@ -5,6 +5,11 @@ import { ScriptService } from '../gen';
 import { workspaceStore } from '../stores';
 import { Skeleton } from './common';
 import FlowModuleScript from './flows/content/FlowModuleScript.svelte';
+import { createEventDispatcher } from 'svelte';
+import Button from './common/button/Button.svelte';
+import { ExternalLink } from 'lucide-svelte';
+const dispatch = createEventDispatcher();
+export let openDetails = false;
 export let scriptPath;
 let selectedVersion = undefined;
 let versions = undefined;
@@ -31,11 +36,24 @@ loadVersions();
 									on:click={() => (selectedVersion = version)}
 								>
 									<span class="text-xs truncate">{version}</span>
+									{#if openDetails}
+										<Button
+											on:click={() => {
+												dispatch('openDetails', { version })
+											}}
+											class="ml-2 inline-flex gap-1 text-xs items-center"
+											size="xs"
+											color="light"
+											variant="border"
+										>
+											Run page<ExternalLink size={14} />
+										</Button>
+									{/if}
 								</div>
 							{/each}
 						</div>
 					{:else}
-						<div class="text-sm text-gray-500">No items</div>
+						<div class="text-sm text-tertiary">No items</div>
 					{/if}
 				{:else}
 					<Skeleton layout={[[40], [40], [40], [40], [40]]} />
@@ -50,7 +68,7 @@ loadVersions();
 					<FlowModuleScript path={scriptPath} hash={selectedVersion} />
 				{/key}
 			{:else}
-				<div class="text-sm p-2 text-gray-500">Select a deployment version to see its details</div>
+				<div class="text-sm p-2 text-tertiary">Select a deployment version to see its details</div>
 			{/if}
 		</div>
 	</Pane>

package/package/components/ScriptVersionHistory.svelte.d.ts

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        openDetails?: boolean | undefined;
         scriptPath: string;
     };
     events: {
+        openDetails: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/SharedBadge.svelte

@@ -56,7 +56,7 @@ $: {
 	<Badge capitalize color="blue" baseClass="border border-blue-200 flex gap-1 items-center">
 		<Popover notClickable>
 			<Users size={12} />
-			<span slot="text">{kind == 'read' ? 'Shared & read-only' : 'Read & Write'} {reason}</span>
+			<span slot="text">{kind == 'read' ? 'Read & Run only' : 'Read & Write'} {reason}</span>
 		</Popover>
 	</Badge>
 {/if}

package/package/components/SimpleEditor.svelte

@@ -11,16 +11,6 @@ import 'monaco-editor/esm/vs/language/typescript/monaco.contribution';
 import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import libStdContent from '../es5.d.ts.txt?raw';
 import { buildWorkerDefinition } from 'monaco-editor-workers';
-meditor.defineTheme('myTheme', {
-    base: 'vs',
-    inherit: true,
-    rules: [],
-    colors: {
-        'editorLineNumber.foreground': '#999',
-        'editorGutter.background': '#F9FAFB'
-    }
-});
-meditor.setTheme('myTheme');
 languages.typescript.javascriptDefaults.setCompilerOptions({
     target: languages.typescript.ScriptTarget.Latest,
     allowNonTsExtensions: true,
@@ -76,6 +66,31 @@ export function format() {
 export function focus() {
     editor?.focus();
 }
+export function getSelectedLines() {
+    if (editor) {
+        const selection = editor.getSelection();
+        if (selection) {
+            const range = {
+                startLineNumber: selection.startLineNumber,
+                startColumn: 1,
+                endLineNumber: selection.endLineNumber + 1,
+                endColumn: 1
+            };
+            return editor.getModel()?.getValueInRange(range);
+        }
+    }
+}
+export function onDidChangeCursorSelection(f) {
+    if (editor) {
+        return editor.onDidChangeCursorSelection(f);
+    }
+}
+export function show() {
+    divEl?.classList.remove('hidden');
+}
+export function hide() {
+    divEl?.classList.add('hidden');
+}
 let width = 0;
 async function loadMonaco() {
     model = meditor.createModel(code, lang, mUri.parse(uri));

package/package/components/SimpleEditor.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import 'monaco-editor/esm/vs/editor/edcore.main';
+import { editor as meditor } from 'monaco-editor/esm/vs/editor/editor.api';
 import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution';
 import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
 import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
@@ -25,6 +26,10 @@ declare const __propDef: {
         setCode?: ((ncode: string) => void) | undefined;
         format?: (() => void) | undefined;
         focus?: (() => void) | undefined;
+        getSelectedLines?: (() => string | undefined) | undefined;
+        onDidChangeCursorSelection?: ((f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor/esm/vs/editor/editor.api").IDisposable | undefined) | undefined;
+        show?: (() => void) | undefined;
+        hide?: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;
@@ -43,5 +48,9 @@ export default class SimpleEditor extends SvelteComponentTyped<SimpleEditorProps
     get setCode(): (ncode: string) => void;
     get format(): () => void;
     get focus(): () => void;
+    get getSelectedLines(): () => string | undefined;
+    get onDidChangeCursorSelection(): (f: (e: meditor.ICursorSelectionChangedEvent) => void) => import("monaco-editor/esm/vs/editor/editor.api").IDisposable | undefined;
+    get show(): () => void;
+    get hide(): () => void;
 }
 export {};

package/package/components/Star.svelte

@@ -44,6 +44,10 @@ const dispatch = createEventDispatcher();
 			<Star size={18} fill="currentcolor" />
 		{/if}
 	{:else}
-		<Star size={18} fill={buttonHover ? 'currentcolor' : 'none'} />
+		<Star
+			class={!buttonHover ? 'opacity-60' : ''}
+			size={18}
+			fill={buttonHover ? 'currentcolor' : 'none'}
+		/>
 	{/if}
 </button>

package/package/components/StringTypeNarrowing.svelte

@@ -69,7 +69,7 @@ function computeKind() {
 <div class="my-2" />
 
 {#if kind == 'pattern'}
-	<label for="input" class="mb-2 text-gray-700 text-xs">
+	<label for="input" class="mb-2 text-secondary text-xs">
 		Pattern (Regex)
 		<div class="flex flex-row">
 			<input
@@ -92,7 +92,7 @@ function computeKind() {
 		</div>
 	</label>
 {:else if kind == 'enum'}
-	<label for="input" class="mb-2 text-gray-700 text-xs">
+	<label for="input" class="mb-2 text-secondary text-xs">
 		Enums
 		<div class="flex flex-col gap-1">
 			{#each enum_ || [] as e}

package/package/components/SupabaseConnect.svelte

@@ -0,0 +1,160 @@
+<script>import { Loader2, RotateCwIcon } from 'lucide-svelte';
+import { Button, DrawerContent } from './common';
+import Drawer from './common/drawer/Drawer.svelte';
+import Path from './Path.svelte';
+import { sendUserToast } from '../toast';
+import { Highlight } from 'svelte-highlight';
+import { json } from 'svelte-highlight/languages';
+import autosize from 'svelte-autosize';
+import { ResourceService, VariableService } from '../gen';
+import { oauthStore, workspaceStore } from '../stores';
+import Password from './Password.svelte';
+import { createEventDispatcher } from 'svelte';
+let drawer;
+let token = undefined;
+export async function open() {
+    token = $oauthStore?.access_token ?? '';
+    drawer.openDrawer?.();
+    step = 'init';
+    description = '';
+}
+let step = 'init';
+async function listDatabases() {
+    if (!token)
+        return;
+    databases = undefined;
+    const res = await fetch('/api/oauth/list_supabase', {
+        headers: {
+            'Content-Type': 'application/json',
+            'X-Supabase-Token': token
+        }
+    });
+    databases = await res.json();
+}
+let databases = undefined;
+$: token != undefined && listDatabases();
+let selectedDatabase = undefined;
+let description = '';
+let pathError = '';
+let password = '';
+let path = undefined;
+$: resourceValue = {
+    host: selectedDatabase?.database?.host,
+    user: 'postgres',
+    port: 5432,
+    dbname: 'postgres',
+    sslmode: 'prefer',
+    password: `$var:${path}`
+};
+$: disabled = path == undefined || pathError != '' || path == '';
+const dispatch = createEventDispatcher();
+async function save() {
+    if (!path)
+        return;
+    await VariableService.createVariable({
+        workspace: $workspaceStore,
+        requestBody: {
+            path,
+            value: password,
+            is_secret: true,
+            description: 'Password for supabase postgres database',
+            is_oauth: false
+        }
+    });
+    await ResourceService.createResource({
+        workspace: $workspaceStore,
+        requestBody: {
+            resource_type: 'postgresql',
+            path,
+            value: resourceValue,
+            description
+        }
+    });
+    sendUserToast('Saved postgres resource');
+    dispatch('refresh');
+    drawer.closeDrawer?.();
+}
+</script>
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent title="Add a Supabase Database" on:close={drawer.closeDrawer}>
+		{#if step === 'init' || selectedDatabase == undefined}
+			<h2
+				>Connect an existing database <div class="inline-block ml-2"
+					><Button
+						variant="border"
+						color="light"
+						wrapperClasses="self-stretch"
+						on:click={listDatabases}><RotateCwIcon size={12} /></Button
+					></div
+				>
+			</h2>
+			<div class="mt-6" />
+
+			{#if databases == undefined}
+				<Loader2 class="animate-spin" />
+			{:else}
+				<div class=" flex flex-col gap-y-2" />
+				{#each databases as database}
+					<button
+						class="btn btn-outline-primary mt-2 border p-2 w-full border-secondary-inverse hover:border-secondary rounded"
+						on:click={() => {
+							selectedDatabase = database
+
+							step = 'resource'
+						}}
+					>
+						<div class="flex flex-row items-center">
+							<div class="flex-grow">
+								<h3 class="text-lg font-semibold">{database.name}</h3>
+
+								<p class="text-sm text-secondary">id: {database.id} - region: {database.region}</p>
+							</div>
+						</div>
+					</button>
+				{/each}
+			{/if}
+
+			<h3 class="mt-8 mb-2">Create a new database</h3>
+			<p class="text-sm text-secondary"
+				><a href="https://supabase.com/dashboard/projects" target="_blank" rel="noopener noreferrer"
+					>Create a new database in your Supabase account
+				</a>
+			</p>
+		{:else if step === 'resource'}
+			<Path
+				bind:error={pathError}
+				bind:path
+				initialPath=""
+				fullNamePlaceholder={'supabase_' + selectedDatabase?.name}
+				kind="resource"
+			/>
+
+			<h2 class="mt-8 mb-2">Database Password</h2>
+			<p class="text-sm text-secondary mb-1"
+				>For security reasons from supabase, the password of the database cannot be retrieved
+				automatically. In a future update, a dedicated role for windmill will be created and the
+				password for it will be generated automatically. The password of the database is shown
+				during the project creation.</p
+			>
+			<Password required bind:password />
+
+			<h3 class="mt-6 mb-2">Description</h3>
+			<textarea type="text" autocomplete="off" use:autosize bind:value={description} />
+
+			<div class="mt-12" />
+			<p class="my-1 text-sm text-secondary"
+				>A resource and a variable will be created at path: {path}. The content of the resource will
+				be:</p
+			>
+			<Highlight language={json} code={JSON.stringify(resourceValue, null, 4)} />
+		{/if}
+		<div slot="actions" class="flex gap-1">
+			{#if step == 'resource' && selectedDatabase != undefined}
+				<Button variant="border" on:click={() => (step = 'init')}>Back</Button>
+
+				<Button {disabled} on:click={save}>Save</Button>
+			{/if}
+		</div>
+	</DrawerContent>
+</Drawer>

package/package/components/SupabaseConnect.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: (() => Promise<void>) | undefined;
+    };
+    events: {
+        refresh: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SupabaseConnectProps = typeof __propDef.props;
+export type SupabaseConnectEvents = typeof __propDef.events;
+export type SupabaseConnectSlots = typeof __propDef.slots;
+export default class SupabaseConnect extends SvelteComponentTyped<SupabaseConnectProps, SupabaseConnectEvents, SupabaseConnectSlots> {
+    get open(): () => Promise<void>;
+}
+export {};