windmill-components 1.642.0 → 1.655.0

package/package/components/ScriptEditor.svelte

@@ -19,7 +19,7 @@ import { scriptLangToEditorLang } from '../scripts';
 import { WebsocketProvider } from 'y-websocket';
 import Modal from './common/modal/Modal.svelte';
 import DiffEditor from './DiffEditor.svelte';
-import { AlertTriangle, Bug, Copy, CornerDownLeft, ExternalLink, Github, GitBranch, Play, PlayIcon, Terminal, WandSparkles } from 'lucide-svelte';
+import { AlertTriangle, Bug, Copy, CornerDownLeft, Disc, Download, ExternalLink, Github, GitBranch, Play, PlayIcon, Terminal, WandSparkles } from 'lucide-svelte';
 import { DebugToolbar, DebugPanel, DebugConsole, getDAPClient, debugState, resetDAPClient, getDebugServerUrl, isDebuggable, getDebugFileExtension, fetchContextualVariables, signDebugRequest, getDebugErrorMessage } from './debug';
 import { SvelteSet } from 'svelte/reactivity';
 import { setLicense } from '../enterpriseUtils';
@@ -48,7 +48,10 @@ import Toggle from './Toggle.svelte';
 import { deepEqual } from 'fast-equals';
 import { usePreparedAssetSqlQueries } from '../infer.svelte';
 import { resource, watch } from 'runed';
-let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right, enablePreprocessorSnippet = false } = $props();
+import { createScriptRecording } from './recording/scriptRecording.svelte';
+import { setActiveRecording } from './recording/flowRecording.svelte';
+import DropdownV2 from './DropdownV2.svelte';
+let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editorBarRight, enablePreprocessorSnippet = false } = $props();
 let initialArgs = structuredClone($state.snapshot(args));
 let jsonView = $state(false);
 let schemaHeight = $state(0);
@@ -114,6 +117,9 @@ let testIsLoading = $state(false);
 let testJob = $state();
 let pastPreviews = $state([]);
 let validCode = $state(true);
+// Recording
+let scriptRecording = createScriptRecording();
+let lastRecording = $state(undefined);
 let wsProvider = $state(undefined);
 let yContent = $state(undefined);
 let peers = $state([]);
@@ -189,16 +195,34 @@ export async function runTest() {
         ? { _ENTRYPOINT_OVERRIDE: 'preprocessor', ...(args ?? {}) }
         : (args ?? {}), tag, undefined, undefined, {
         done(_x) {
+            if (scriptRecording.active) {
+                lastRecording = scriptRecording.stop();
+                setActiveRecording(undefined);
+            }
             loadPastTests();
         },
         doneError({ error }) {
+            if (scriptRecording.active) {
+                lastRecording = scriptRecording.stop();
+                setActiveRecording(undefined);
+            }
             console.error(error);
-            // sendUserToast('Error running test', true)
         }
     });
     logPanel?.setFocusToLogs();
     return job;
 }
+async function recordAndTest() {
+    lastRecording = undefined;
+    scriptRecording.start(path ?? '', code, lang ?? '', args ?? {}, schema);
+    setActiveRecording(scriptRecording);
+    await runTest();
+}
+function downloadRecording() {
+    if (lastRecording) {
+        scriptRecording.download(lastRecording);
+    }
+}
 async function loadPastTests() {
     pastPreviews = await JobService.listCompletedJobs({
         workspace: $workspaceStore,
@@ -640,7 +664,7 @@ export async function updateArgs(newArgs) {
         argsRender++;
     }
 }
-setContext('disableTooltips', customUi?.disableTooltips === true);
+setContext('disableTooltips', untrack(() => customUi)?.disableTooltips === true);
 let codePanelSize = $state(70);
 let testPanelSize = $state(30);
 let storedTestPanelSize = untrack(() => testPanelSize);
@@ -792,7 +816,7 @@ $effect(() => {
 				bind:showHistoryDrawer
 			>
 				{#snippet right()}
-					{@render editor_bar_right?.()}
+					{@render editorBarRight?.()}
 				{/snippet}
 			</EditorBar>
 		{/if}
@@ -890,40 +914,72 @@ $effect(() => {
 						/>
 					</div>
 					{#if !(debugMode && isDebuggableScript)}
-						<div class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch">
-							{#if testIsLoading}
-								<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" unifiedSize="md">
-									<WindmillIcon
-										white={true}
-										class="mr-2 text-white"
-										height="16px"
-										width="20px"
-										spin="fast"
-									/>
-									Cancel
-								</Button>
-							{:else}
-								{@const disableTriggerButton =
-									customUi?.previewPanel?.disableTriggerButton === true}
+						<div class="flex flex-row gap-2">
+							<div
+								class="flex flex-row divide-x divide-gray-800 dark:divide-gray-300 items-stretch"
+							>
+								{#if testIsLoading}
+									<Button on:click={jobLoader?.cancelJob} btnClasses="w-full" unifiedSize="md">
+										<WindmillIcon
+											white={true}
+											class="mr-2 text-white"
+											height="16px"
+											width="20px"
+											spin="fast"
+										/>
+										Cancel
+									</Button>
+								{:else}
+									{@const disableTriggerButton =
+										customUi?.previewPanel?.disableTriggerButton === true}
+									<Button
+										on:click={() => runTest()}
+										unifiedSize="md"
+										btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
+										variant="accent-secondary"
+										startIcon={{ icon: Play, classes: 'animate-none' }}
+										shortCut={{ Icon: CornerDownLeft }}
+									>
+										Test
+									</Button>
+									{#if !disableTriggerButton}
+										<CaptureButton on:openTriggers />
+									{/if}
+								{/if}
+							</div>
+							{#if lastRecording}
 								<Button
-									on:click={() => runTest()}
+									on:click={downloadRecording}
 									unifiedSize="md"
-									btnClasses="w-full {!disableTriggerButton ? 'rounded-r-none' : ''}"
-									variant="accent-secondary"
-									startIcon={{ icon: Play, classes: 'animate-none' }}
-									shortCut={{ Icon: CornerDownLeft }}
-								>
-									Test
-								</Button>
-								{#if !disableTriggerButton}
-									<CaptureButton on:openTriggers />
-								{/if}
+									startIcon={{ icon: Download }}
+									iconOnly
+									title="Download recording"
+								/>
 							{/if}
 						</div>
 					{/if}
-					<div class="absolute top-2 right-2"
-						><Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} /></div
-					>
+					<div class="absolute top-2 right-2 flex items-center gap-2">
+						<Toggle size="2xs" bind:checked={jsonView} options={{ right: 'JSON' }} />
+						<DropdownV2
+							size="xs"
+							items={[
+								{
+									displayName: 'Test & record',
+									icon: Disc,
+									action: () => recordAndTest()
+								},
+								...(lastRecording
+									? [
+											{
+												displayName: 'Download recording',
+												icon: Download,
+												action: () => downloadRecording()
+											}
+										]
+									: [])
+							]}
+						/>
+					</div>
 				</div>
 				<Splitpanes
 					horizontal

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

@@ -11,7 +11,7 @@ interface Props {
     path: string | undefined;
     lang: Preview['language'];
     kind?: string | undefined;
-    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative';
+    template?: 'pgsql' | 'mysql' | 'script' | 'docker' | 'powershell' | 'bunnative' | 'claudesandbox';
     tag: string | undefined;
     initialArgs?: Record<string, any>;
     fixedOverflowWidgets?: boolean;
@@ -34,7 +34,7 @@ interface Props {
     lastDeployedCode?: string | undefined;
     disableAi?: boolean;
     assets?: AssetWithAltAccessType[];
-    editor_bar_right?: import('svelte').Snippet;
+    editorBarRight?: import('svelte').Snippet;
     enablePreprocessorSnippet?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {

package/package/components/ScriptPicker.svelte

@@ -20,7 +20,7 @@ let drawerFlowViewer = $state();
 let code = $state('');
 let lang = $state();
 let options = [['Script', 'script', Code2, undefined]];
-allowFlow && options.push(['Flow', 'flow', FlowIcon, '#14b8a6']);
+untrack(() => allowFlow) && options.push(['Flow', 'flow', FlowIcon, '#14b8a6']);
 const dispatch = createEventDispatcher();
 async function loadItems() {
     if (itemKind == 'flow') {

package/package/components/ScriptWrapper.svelte

@@ -1,7 +1,8 @@
-<script lang="ts">import ScriptBuilder from './ScriptBuilder.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import ScriptBuilder from './ScriptBuilder.svelte';
 import AiChatLayout from './copilot/chat/AiChatLayout.svelte';
 let { script: oldScript, disableAi, ...props } = $props();
-let script = $state(oldScript);
+let script = $state(untrack(() => oldScript));
 </script>
 
 <AiChatLayout noPadding {disableAi}>

package/package/components/Scrollable.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">import { onMount, onDestroy } from 'svelte';
 import { twMerge } from 'tailwind-merge';
-let isAtBottom = false;
-let isScrollable = false;
-export let id = undefined;
-export let scrollableClass = '';
-export let shiftedShadow = false;
+let isAtBottom = $state(false);
+let isScrollable = $state(false);
+let { id = undefined, scrollableClass = '', shiftedShadow = false, children } = $props();
 let mutationObserver;
-let el;
+let el = $state();
 function handleScroll(event) {
     const scrollableElement = event.target;
     isAtBottom =
@@ -14,7 +12,9 @@ function handleScroll(event) {
             scrollableElement.scrollHeight - 2;
 }
 function checkIfScrollable(el) {
-    return el.scrollHeight > el.clientHeight;
+    if (!el)
+        return false;
+    return el?.scrollHeight > el?.clientHeight;
 }
 function observeScrollability(el) {
     isScrollable = checkIfScrollable(el);
@@ -24,7 +24,7 @@ function observeScrollability(el) {
     mutationObserver?.observe(el, { childList: true, subtree: true, characterData: true });
 }
 export function scrollIntoView(top) {
-    el.scrollTo({ top, behavior: 'smooth' });
+    el?.scrollTo({ top, behavior: 'smooth' });
 }
 onMount(() => {
     observeScrollability(el);
@@ -35,8 +35,8 @@ onDestroy(() => {
 </script>
 
 <div {id} class={twMerge('relative pb-1', scrollableClass)}>
-	<div bind:this={el} on:scroll={handleScroll} class="w-full h-full overflow-y-auto">
-		<slot />
+	<div bind:this={el} onscroll={handleScroll} class="w-full h-full overflow-y-auto">
+		{@render children?.()}
 	</div>
 	{#if !isAtBottom && isScrollable}
 		<div

package/package/components/Scrollable.svelte.d.ts

@@ -1,34 +1,11 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Scrollable: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     id?: string | null | undefined;
     scrollableClass?: string;
     shiftedShadow?: boolean;
-    scrollIntoView?: (top: number) => void;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+    children?: import('svelte').Snippet;
+}
+declare const Scrollable: import("svelte").Component<Props, {
     scrollIntoView: (top: number) => void;
-}, string>;
-type Scrollable = InstanceType<typeof Scrollable>;
+}, "">;
+type Scrollable = ReturnType<typeof Scrollable>;
 export default Scrollable;

package/package/components/SearchItems.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import uFuzzy from '@leeoniya/ufuzzy';
 import { untrack } from 'svelte';
 let { filter = '', items, f, filteredItems = $bindable(), opts = {} } = $props();
-let uf = new uFuzzy(opts);
+let uf = new uFuzzy(untrack(() => opts));
 function filterItems() {
     let trimmed = filter.trim();
     if (items == undefined || trimmed.length == 0) {

package/package/components/ServiceLogsInner.svelte

@@ -16,7 +16,7 @@ import { AnsiUp } from 'ansi_up';
 import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte';
 import Select from './select/Select.svelte';
 import { goto } from '../navigation';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import { watch } from 'runed';
 let { searchTerm, queryParseErrors = $bindable(), tagLabel } = $props();
 let minTs = $state(undefined);
@@ -120,13 +120,13 @@ function getAllLogs(queryMinTs, queryMaxTs) {
         autoRefresh = false;
     });
 }
-let initialSelected = $page.url.searchParams.get('mode') &&
-    $page.url.searchParams.get('workerGroup') &&
-    $page.url.searchParams.get('hostname')
+let initialSelected = page.url.searchParams.get('mode') &&
+    page.url.searchParams.get('workerGroup') &&
+    page.url.searchParams.get('hostname')
     ? {
-        mode: $page.url.searchParams.get('mode'),
-        workerGroup: $page.url.searchParams.get('workerGroup'),
-        hostname: $page.url.searchParams.get('hostname')
+        mode: page.url.searchParams.get('mode'),
+        workerGroup: page.url.searchParams.get('workerGroup'),
+        hostname: page.url.searchParams.get('hostname')
     }
     : undefined;
 let selected = $state(initialSelected);
@@ -425,7 +425,13 @@ watch(() => [searchTerm, selected, timeframe, allLogs], () => {
 			{#if allLogs == undefined}
 				<div class="text-center pb-2"><Loader2 class="animate-spin" /></div>
 			{:else if Object.keys(allLogs).length == 0}
-				<div class="flex justify-center items-center h-full">No logs</div>
+				<div class="flex flex-col justify-center items-center h-full gap-2">
+					<span>No logs</span>
+					<span class="text-2xs text-tertiary"
+						>Search only covers a recent time window, configurable in instance settings
+						under Indexer.</span
+					>
+				</div>
 			{:else if minTs && maxTs}
 				{@const minTsN = new Date(minTs).getTime()}
 				{@const maxTsN = new Date(maxTs).getTime()}
@@ -565,7 +571,7 @@ watch(() => [searchTerm, selected, timeframe, allLogs], () => {
 								<LogSnippetViewer
 									content={snippet_fragment || document.logs[0]}
 									highlighted={snippet_highlighted}
-									on:click={() => {
+									onClick={() => {
 										let logLineNumber = document.line_number[0]
 										let logFile = document.file_name[0]
 										let host = document.host[0]

package/package/components/ShareModal.svelte

@@ -24,13 +24,18 @@ let groups = $state([]);
 let usernames = $state([]);
 let drawer = $state();
 let own = $state(false);
-export async function openDrawer(newPath, kind_l) {
+export async function openDrawer(newPath, kind_l, isOwnerOverride) {
     path = newPath;
     kind = kind_l;
     loadAcls();
     loadGroups();
     loadUsernames();
-    loadOwner();
+    if (isOwnerOverride !== undefined) {
+        own = isOwnerOverride;
+    }
+    else {
+        loadOwner();
+    }
     drawer?.openDrawer();
 }
 async function loadOwner() {
@@ -118,12 +123,14 @@ async function addAcl(owner, write) {
 				{/if}
 				{#if acls?.length > 0}
 					<TableCustom>
-						<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-						<tr slot="header-row">
-							<th>owner</th>
-							<th></th>
-							<th></th>
-						</tr>
+
+						{#snippet headerRow()}
+												<tr >
+								<th>owner</th>
+								<th></th>
+								<th></th>
+							</tr>
+											{/snippet}
 						{#snippet body()}
 							<tbody>
 								{#each acls as [owner, write]}

package/package/components/ShareModal.svelte.d.ts

@@ -16,7 +16,7 @@ declare const ShareModal: $$__sveltets_2_IsomorphicComponent<Record<string, neve
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    openDrawer: (newPath: string, kind_l: "resource" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app" | "group_" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger" | "email_trigger") => Promise<void>;
+    openDrawer: (newPath: string, kind_l: "resource" | "volume" | "script" | "flow" | "app" | "variable" | "schedule" | "raw_app" | "group_" | "http_trigger" | "websocket_trigger" | "kafka_trigger" | "nats_trigger" | "postgres_trigger" | "mqtt_trigger" | "gcp_trigger" | "sqs_trigger" | "email_trigger", isOwnerOverride?: boolean) => Promise<void>;
 }, "">;
 type ShareModal = InstanceType<typeof ShareModal>;
 export default ShareModal;

package/package/components/SimpleEditor.svelte

@@ -50,7 +50,7 @@ let valueAfterDispose = undefined;
 let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false, key, disabled = false, minHeight = 1000, renderLineHighlight = 'none', suggestion } = $props();
 let yPadding = MONACO_Y_PADDING;
 const dispatch = createEventDispatcher();
-const uri = `file:///${hash}.${langToExt(lang)}`;
+const uri = `file:///${untrack(() => hash)}.${langToExt(untrack(() => lang))}`;
 export function getCode() {
     if (valueAfterDispose != undefined) {
         return valueAfterDispose;

package/package/components/Slider.svelte

@@ -3,10 +3,7 @@ import { slide } from 'svelte/transition';
 import Button from './common/button/Button.svelte';
 import Tooltip from './Tooltip.svelte';
 import { twMerge } from 'tailwind-merge';
-export let text;
-export let tooltip = undefined;
-export let view = false;
-export let size = 'md';
+let { text, tooltip = undefined, view = $bindable(false), size = 'md', children } = $props();
 </script>
 
 <Button
@@ -24,5 +21,5 @@ export let size = 'md';
 	{/if}
 </Button>
 {#if view}
-	<div class="my-4 px-2" transition:slide|local><slot /></div>
+	<div class="my-4 px-2" transition:slide|local>{@render children?.()}</div>
 {/if}

package/package/components/Slider.svelte.d.ts

@@ -1,32 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Slider: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     text: string;
     tooltip?: string | undefined;
     view?: boolean;
-    size?: "xs" | "sm" | "md" | "lg";
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Slider = InstanceType<typeof Slider>;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    children?: import('svelte').Snippet;
+}
+declare const Slider: import("svelte").Component<Props, {}, "view">;
+type Slider = ReturnType<typeof Slider>;
 export default Slider;

package/package/components/StringTypeNarrowing.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { computeKind } from '../utils';
+<script lang="ts">import { untrack } from 'svelte';
+import { computeKind } from '../utils';
 import Label from './Label.svelte';
 import ResourceTypePicker from './ResourceTypePicker.svelte';
 import Toggle from './Toggle.svelte';
@@ -12,7 +13,7 @@ import RegexGen from './copilot/RegexGen.svelte';
 import TextInput from './text_input/TextInput.svelte';
 let { pattern = $bindable(), enum_ = $bindable(), format = $bindable(), contentEncoding = $bindable(), customErrorMessage = $bindable(), minRows = $bindable(undefined), disableCreate = $bindable(undefined), disableVariablePicker = $bindable(undefined), password = $bindable(undefined), noExtra = false, dateFormat = $bindable(), enumLabels = $bindable(undefined), overrideAllowKindChange = true, originalType = undefined } = $props();
 let kind = $state(computeKind(enum_, contentEncoding, pattern, format));
-const allowKindChange = overrideAllowKindChange || originalType === 'string';
+const allowKindChange = untrack(() => overrideAllowKindChange) || untrack(() => originalType) === 'string';
 let patternStr = $state(pattern ?? '');
 let resource = $state();
 const FORMATS = [

package/package/components/Subsection.svelte

@@ -1,10 +1,11 @@
-<script lang="ts">import { enterpriseLicense } from '../stores';
+<script lang="ts">import { untrack } from 'svelte';
+import { enterpriseLicense } from '../stores';
 import { ChevronDown, ChevronRight } from 'lucide-svelte';
 import Tooltip from './Tooltip.svelte';
 import { twMerge } from 'tailwind-merge';
 import EEOnly from './EEOnly.svelte';
 let { label = undefined, tooltip = undefined, eeOnly = false, collapsable = false, collapsed = $bindable(true), openInitially = false, headless = false, class: clazz = undefined, header, action, badge, children } = $props();
-if (openInitially && collapsable && collapsed) {
+if (untrack(() => openInitially) && untrack(() => collapsable) && collapsed) {
     collapsed = false;
 }
 </script>

package/package/components/Summary.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { Pen } from 'lucide-svelte';
 import TextInput from './text_input/TextInput.svelte';
-export let value;
-export let disabled = false;
+let { value = $bindable(), disabled = false } = $props();
 function blur(e) {
     e.key === 'Enter' && e?.target?.blur();
 }

package/package/components/Summary.svelte.d.ts

@@ -1,21 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Summary: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     value: string;
     disabled?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Summary = InstanceType<typeof Summary>;
+}
+declare const Summary: import("svelte").Component<Props, {}, "value">;
+type Summary = ReturnType<typeof Summary>;
 export default Summary;

package/package/components/SupabaseConnect.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { Loader2, RotateCwIcon } from 'lucide-svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { Loader2, RotateCwIcon } from 'lucide-svelte';
 import { Button, DrawerContent } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import Path from './Path.svelte';
@@ -11,15 +12,15 @@ import { oauthStore, workspaceStore } from '../stores';
 import Password from './Password.svelte';
 import { createEventDispatcher } from 'svelte';
 import HighlightTheme from './HighlightTheme.svelte';
-let drawer;
-let token = undefined;
+let drawer = $state();
+let token = $state(undefined);
 export async function open() {
     token = $oauthStore?.access_token ?? '';
-    drawer.openDrawer?.();
+    drawer?.openDrawer?.();
     step = 'init';
     description = '';
 }
-let step = 'init';
+let step = $state('init');
 async function listDatabases() {
     if (!token)
         return;
@@ -32,27 +33,29 @@ async function listDatabases() {
     });
     databases = await res.json();
 }
-let databases = undefined;
-$: token != undefined && listDatabases();
-let selectedDatabase = undefined;
-let description = '';
-let pathError = '';
-let password = '';
-let path = undefined;
+let databases = $state(undefined);
+run(() => {
+    token != undefined && listDatabases();
+});
+let selectedDatabase = $state(undefined);
+let description = $state('');
+let pathError = $state('');
+let password = $state('');
+let path = $state(undefined);
 /**
  * https://github.com/orgs/supabase/discussions/17817
  * host is in the format of `aws-0-${region}.pooler.supabase.com`
  * user is in the format of `postgres.${id}`
  */
-$: resourceValue = {
+let resourceValue = $derived.by(() => ({
     host: `aws-0-${selectedDatabase?.region}.pooler.supabase.com`,
     user: `postgres.${selectedDatabase?.id}`,
     port: 5432,
     dbname: 'postgres',
     sslmode: 'prefer',
     password: `$var:${path}`
-};
-$: disabled = path == undefined || pathError != '' || path == '';
+}));
+let disabled = $derived(path == undefined || pathError != '' || path == '');
 const dispatch = createEventDispatcher();
 async function save() {
     if (!path)
@@ -78,7 +81,7 @@ async function save() {
     });
     sendUserToast('Saved postgres resource');
     dispatch('refresh');
-    drawer.closeDrawer?.();
+    drawer?.closeDrawer?.();
 }
 </script>
 
@@ -103,7 +106,7 @@ async function save() {
 				{#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={() => {
+						onclick={() => {
 							selectedDatabase = database
 
 							step = 'resource'