windmill-components 1.623.2 → 1.655.0

package/package/components/QueueMetricsDrawerInner.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import 'chartjs-adapter-date-fns';
+<script lang="ts">import { run } from 'svelte/legacy';
+import 'chartjs-adapter-date-fns';
 import { Line } from './chartjs-wrappers/chartJs';
 import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement, LogarithmicScale, TimeScale } from 'chart.js';
 import { WorkerService } from '../gen';
@@ -6,7 +7,7 @@ import Skeleton from './common/skeleton/Skeleton.svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import Alert from './common/alert/Alert.svelte';
 import { Section } from './common';
-let loading = true;
+let loading = $state(true);
 const colorTuples = [
     ['#7EB26D', 'rgba(126, 178, 109, 0.2)'],
     ['#EAB839', 'rgba(234, 184, 57, 0.2)'],
@@ -34,10 +35,10 @@ function getColors(labels) {
     return Object.fromEntries(colors.map((c, i) => [labels[i], c]));
 }
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, TimeScale, LogarithmicScale);
-let countData = undefined;
-let delayData = undefined;
-let minDate = new Date();
-let noMetrics = false;
+let countData = $state(undefined);
+let delayData = $state(undefined);
+let minDate = $state(new Date());
+let noMetrics = $state(false);
 function fillData(data, zero = 0) {
     // fill holes with 0
     const sorted = [];
@@ -122,9 +123,13 @@ async function loadMetrics() {
     loading = false;
 }
 loadMetrics();
-let darkMode = false;
-$: ChartJS.defaults.color = darkMode ? '#ccc' : '#666';
-$: ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+let darkMode = $state(false);
+run(() => {
+    ChartJS.defaults.color = darkMode ? '#ccc' : '#666';
+});
+run(() => {
+    ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+});
 </script>
 
 <DarkModeObserver bind:darkMode />

package/package/components/QueueMetricsDrawerInner.svelte.d.ts

@@ -1,19 +1,4 @@
 import 'chartjs-adapter-date-fns';
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const QueueMetricsDrawerInner: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type QueueMetricsDrawerInner = InstanceType<typeof QueueMetricsDrawerInner>;
+declare const QueueMetricsDrawerInner: import("svelte").Component<Record<string, never>, {}, "">;
+type QueueMetricsDrawerInner = ReturnType<typeof QueueMetricsDrawerInner>;
 export default QueueMetricsDrawerInner;

package/package/components/RadioButton.svelte

@@ -1,11 +1,6 @@
-<script lang="ts">export let label = '';
-export let options;
-export let value;
-export let disabled = false;
-export let labelClass = '';
-export let inputClass = '';
-import { createEventDispatcher } from 'svelte';
+<script lang="ts">import { createEventDispatcher } from 'svelte';
 import Tooltip from './Tooltip.svelte';
+let { label = '', options, value = $bindable(), disabled = false, labelClass = '', inputClass = '' } = $props();
 const dispatch = createEventDispatcher();
 </script>
 
@@ -25,7 +20,7 @@ const dispatch = createEventDispatcher();
 					class="sr-only"
 					bind:group={value}
 					aria-labelledby="memory-option-0-label"
-					on:click={() => dispatch('change', val)}
+					onclick={() => dispatch('change', val)}
 				/>
 				<p>
 					{#if typeof label !== 'string'}

package/package/components/RadioButton.svelte.d.ts

@@ -1,3 +1,14 @@
+interface Props {
+    label?: string;
+    options: [string | {
+        title: string;
+        desc: string;
+    }, any][];
+    value: any;
+    disabled?: boolean;
+    labelClass?: string;
+    inputClass?: string;
+}
 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;
@@ -11,20 +22,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RadioButton: $$__sveltets_2_IsomorphicComponent<{
-    label?: string;
-    options: [string | {
-        title: string;
-        desc: string;
-    }, any][];
-    value: any;
-    disabled?: boolean;
-    labelClass?: string;
-    inputClass?: string;
-}, {
+declare const RadioButton: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "value">;
 type RadioButton = InstanceType<typeof RadioButton>;
 export default RadioButton;

package/package/components/Range.svelte

@@ -1,22 +1,19 @@
-<script lang="ts">import RangeSlider from 'svelte-range-slider-pips';
-export let min = 0;
-export let max = 100;
-export let initialValue = 0;
-export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue;
-export let disabled = false;
-export let defaultValue = undefined;
-export let format = (v) => `${v}`;
-export let hideInput = false;
+<script lang="ts">import { run, createBubbler, stopPropagation } from 'svelte/legacy';
+const bubble = createBubbler();
+import RangeSlider from 'svelte-range-slider-pips';
+let { min = 0, max = 100, initialValue = 0, value = $bindable(typeof initialValue === 'string' ? parseInt(initialValue) : initialValue), disabled = false, defaultValue = undefined, format = (v) => `${v}`, hideInput = false } = $props();
 let step = 1;
-let slider;
+let slider = $state();
 function calculateAxisStep(min, max) {
     const range = max - min;
     return range < 100 ? 1 : range / 20;
 }
-$: if (value === null) {
-    value = 0;
-}
-$: axisStep = calculateAxisStep(min, max);
+run(() => {
+    if (value === null) {
+        value = 0;
+    }
+});
+let axisStep = $derived(calculateAxisStep(min, max));
 function handleKeyDown(event) {
     if (disabled)
         return;
@@ -35,17 +32,17 @@ function handleKeyDown(event) {
     event.preventDefault();
 }
 // Calculate the handle width based on the length of the max value
-$: handleWidth = `${Math.max(max.toString().length ?? 2, 2)}em`;
+let handleWidth = $derived(`${Math.max(max.toString().length ?? 2, 2)}em`);
 </script>
 
 <div class="flex flex-row w-full mx-2 items-center gap-8">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 
 	<div
 		class={'grow'}
 		style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; --handle-width: {handleWidth}; --handle-border: 4px;"
-		on:pointerdown|stopPropagation
-		on:keydown={handleKeyDown}
+		onpointerdown={stopPropagation(bubble('pointerdown'))}
+		onkeydown={handleKeyDown}
 		>{#if max <= min}
 			<div class="text-secondary text-sm"
 				>Impossible to display range: {`max (${max}) <= min (${min})`}</div

package/package/components/Range.svelte.d.ts

@@ -1,29 +1,13 @@
-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 Range: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     min?: number;
     max?: number;
     initialValue?: number;
-    value?: number;
+    value?: any;
     disabled?: boolean;
     defaultValue?: number | undefined;
     format?: (value: number) => string;
     hideInput?: boolean;
-}, {
-    pointerdown: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Range = InstanceType<typeof Range>;
+}
+declare const Range: import("svelte").Component<Props, {}, "value">;
+type Range = ReturnType<typeof Range>;
 export default Range;

package/package/components/RepositorySelector.svelte

@@ -1,8 +1,9 @@
-<script lang="ts">import { GitSyncService } from '../gen';
+<script lang="ts">import { untrack } from 'svelte';
+import { GitSyncService } from '../gen';
 import Select from './select/Select.svelte';
 let { disabled = false, selectedRepository = $bindable(), accountId, initialRepositories, totalCount, perPage, containerClass = 'flex-1', minWidth = '160px', onError } = $props();
 // Track all loaded repositories across pages
-let loadedRepositories = $state(initialRepositories);
+let loadedRepositories = $state(untrack(() => initialRepositories));
 let currentPage = $state(1);
 let isLoadingMore = $state(false);
 // Client-side filtered repositories based on search text

package/package/components/Required.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">export let required;
-export let detail = '';
+<script lang="ts">"use strict";
+let { required, detail = '', class: className = '' } = $props();
 </script>
 
 {#if required}
-	<span class="text-red-500 dark:text-red-400 text-sm font-normal {$$props.class}">*</span>
+	<span class="text-red-500 dark:text-red-400 text-sm font-normal {className}">*</span>
 {:else if detail || detail != ''}
-	<span class="text-sm text-primary ml-2 font-normal {$$props.class}"
+	<span class="text-sm text-primary ml-2 font-normal {className}"
 		>({detail != '' ? `${detail}` : ''})</span
 	>
 {/if}

package/package/components/Required.svelte.d.ts

@@ -1,22 +1,8 @@
-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 Required: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: any;
+interface Props {
     required: boolean;
-    detail?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Required = InstanceType<typeof Required>;
+    detail?: string;
+    class?: string;
+}
+declare const Required: import("svelte").Component<Props, {}, "">;
+type Required = ReturnType<typeof Required>;
 export default Required;

package/package/components/ResourceEditor.svelte

@@ -8,6 +8,7 @@ import Required from './Required.svelte';
 import { userStore, workspaceStore } from '../stores';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
+import FilesetEditor from './FilesetEditor.svelte';
 import Toggle from './Toggle.svelte';
 import { sendUserToast } from '../toast';
 import TestConnection from './TestConnection.svelte';
@@ -19,7 +20,8 @@ import TestTriggerConnection from './triggers/TestTriggerConnection.svelte';
 import GitHubAppIntegration from './GitHubAppIntegration.svelte';
 import Button from './common/button/Button.svelte';
 import { clearJsonSchemaResourceCache } from './schema/jsonSchemaResource.svelte';
-let { canSave = $bindable(true), resource_type = $bindable(undefined), path = $bindable(''), newResource = false, hidePath = false, onChange, defaultValues = undefined } = $props();
+import ResourceGen from './copilot/ResourceGen.svelte';
+let { canSave = $bindable(true), resource_type = $bindable(undefined), path = $bindable(''), hidePath = false, onChange, defaultValues = undefined } = $props();
 let isValid = $state(true);
 let jsonError = $state('');
 let can_write = $state(true);
@@ -34,6 +36,7 @@ let linkedVars = $state([]);
 let resourceTypeInfo = $state(undefined);
 let editDescription = $state(false);
 let viewJsonSchema = $state(false);
+let newResource = $derived(!path);
 const dispatch = createEventDispatcher();
 let rawCode = $state(undefined);
 async function initEdit() {
@@ -49,7 +52,7 @@ async function initEdit() {
         .filter(([_, v]) => typeof v == 'string' && v == `$var:${initialPath}`)
         .map(([k, _]) => k);
 }
-if (!newResource) {
+if (!untrack(() => newResource)) {
     initEdit();
 }
 else if (resource_type) {
@@ -96,7 +99,7 @@ async function loadResourceType() {
                 resourceSchema.order =
                     resourceSchema.order ?? Object.keys(resourceSchema.properties).sort();
             }
-            if (resourceTypeInfo?.format_extension) {
+            if (resourceTypeInfo?.format_extension && !resourceTypeInfo?.is_fileset) {
                 textFileContent = args.content;
             }
         }
@@ -133,7 +136,7 @@ function switchTab(asJson) {
     }
     else {
         parseJson();
-        if (resourceTypeInfo?.format_extension) {
+        if (resourceTypeInfo?.format_extension && !resourceTypeInfo?.is_fileset) {
             textFileContent = args.content;
         }
     }
@@ -236,6 +239,13 @@ run(() => {
 						right: 'As JSON'
 					}}
 				/>
+				<ResourceGen
+					bind:args
+					resourceType={resource_type}
+					resourceName={path}
+					resourceDescription={description}
+					{resourceSchema}
+				/>
 				{#if resourceToEdit?.resource_type === 'nats' || resourceToEdit?.resource_type === 'kafka'}
 					<TestTriggerConnection kind={resourceToEdit?.resource_type} args={{ connection: args }} />
 				{:else}
@@ -261,9 +271,22 @@ run(() => {
 			<div>
 				{#if loadingSchema}
 					<Skeleton layout={[[4]]} />
+				{:else if !viewJsonSchema && resourceTypeInfo?.is_fileset}
+					<div class="mt-1 flex items-center gap-2">
+						<h5 class="inline-flex items-center gap-4">Fileset</h5>
+						<ResourceGen
+							bind:args
+							resourceType={resource_type}
+							resourceName={path}
+							resourceDescription={description}
+							{resourceSchema}
+							isFileset
+						/>
+					</div>
+					<FilesetEditor bind:args />
 				{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
 					{#if resourceTypeInfo?.format_extension}
-						<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
+						<h5 class="mt-1 inline-flex items-center gap-4">
 							File content ({resourceTypeInfo.format_extension})
 						</h5>
 						<div class="">

package/package/components/ResourceEditor.svelte.d.ts

@@ -2,7 +2,6 @@ interface Props {
     canSave?: boolean;
     resource_type?: string | undefined;
     path?: string;
-    newResource?: boolean;
     hidePath?: boolean;
     onChange?: (args: {
         path: string;

package/package/components/ResourceEditorDrawer.svelte

@@ -1,40 +1,35 @@
 <script lang="ts">import { Button, Drawer } from './common';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import { Loader2, Save } from 'lucide-svelte';
-let drawer;
-let canSave = true;
-let resource_type = undefined;
-let defaultValues = undefined;
-let resourceEditor = undefined;
-let path = undefined;
-let newResource = false;
+let drawer = $state();
+let canSave = $state(true);
+let resource_type = $state(undefined);
+let defaultValues = $state(undefined);
+let resourceEditor = $state(undefined);
+let path = $state(undefined);
 export async function initEdit(p) {
     resource_type = undefined;
-    newResource = false;
     path = p;
-    drawer.openDrawer?.();
+    drawer?.openDrawer?.();
 }
 export async function initNew(resourceType, nDefaultValues) {
-    newResource = true;
     path = undefined;
     resource_type = resourceType;
     defaultValues = nDefaultValues;
-    drawer.openDrawer?.();
+    drawer?.openDrawer?.();
 }
-let mode = newResource ? 'new' : 'edit';
-$: path ? (mode = 'edit') : (mode = 'new');
+let mode = $derived(!path ? 'new' : 'edit');
 </script>
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
 		title={mode == 'edit' ? 'Edit ' + path : 'Add a resource'}
-		on:close={drawer.closeDrawer}
+		on:close={drawer?.closeDrawer}
 	>
 		{#await import('./ResourceEditor.svelte')}
 			<Loader2 class="animate-spin" />
 		{:then Module}
 			<Module.default
-				{newResource}
 				{path}
 				{resource_type}
 				{defaultValues}
@@ -54,7 +49,7 @@ $: path ? (mode = 'edit') : (mode = 'new');
 					} else {
 						resourceEditor?.createResource()
 					}
-					drawer.closeDrawer()
+					drawer?.closeDrawer()
 				}}
 				disabled={!canSave}
 			>

package/package/components/ResourceEditorDrawer.svelte.d.ts

@@ -2,7 +2,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -11,16 +11,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ResourceEditorDrawer: $$__sveltets_2_IsomorphicComponent<{
-    initEdit?: (p: string) => Promise<void>;
-    initNew?: (resourceType: string, nDefaultValues?: Record<string, any>) => Promise<void>;
-}, {
+declare const ResourceEditorDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     refresh: any;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     initEdit: (p: string) => Promise<void>;
     initNew: (resourceType: string, nDefaultValues?: Record<string, any>) => Promise<void>;
-}, string>;
+}, "">;
 type ResourceEditorDrawer = InstanceType<typeof ResourceEditorDrawer>;
 export default ResourceEditorDrawer;

package/package/components/ResourcePicker.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { ResourceService } from '../gen';
+<script lang="ts">import { ResourceService, WorkspaceService } from '../gen';
 import { workspaceStore } from '../stores';
 import { onMount, untrack } from 'svelte';
 import AppConnect from './AppConnectDrawer.svelte';
@@ -7,10 +7,9 @@ import { Button } from './common';
 import { Loader2, Pen, Plus, RotateCw } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
 import Select from './select/Select.svelte';
-import DbManagerDrawer from './DBManagerDrawer.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
 import DropdownV2 from './DropdownV2.svelte';
-let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined, excludedValues = undefined } = $props();
+let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined, excludedValues = undefined, datatableAsPgResource = false } = $props();
 if (initialValue && value == undefined) {
     value = initialValue;
 }
@@ -68,6 +67,23 @@ async function loadResources(resourceType) {
             label: x.path,
             type: x.resource_type
         }));
+        if (datatableAsPgResource && resourceType === 'postgresql') {
+            try {
+                const datatables = await WorkspaceService.listDataTables({
+                    workspace: $workspaceStore
+                });
+                for (const dt of datatables) {
+                    nc.push({
+                        value: `datatable://${dt}`,
+                        label: `datatable://${dt}`,
+                        type: 'postgresql'
+                    });
+                }
+            }
+            catch (e) {
+                console.error('Failed to load data tables', e);
+            }
+        }
         // TODO check if this is needed
         if (!nc.find((x) => x.value == value) && (initialValue || value)) {
             nc.push({ value: value ?? initialValue, label: value ?? initialValue, type: '' });
@@ -84,7 +100,7 @@ async function loadResources(resourceType) {
     }
     loading = false;
 }
-let previousResourceType = resourceType;
+let previousResourceType = untrack(() => resourceType);
 $effect(() => {
     $workspaceStore && resourceType;
     untrack(() => {
@@ -103,8 +119,8 @@ $effect(() => {
 });
 let appConnect = $state();
 let resourceEditor = $state();
-let dbManagerDrawer = $state();
 let hovering = $state(false);
+let isDatatableSelected = $derived(value?.startsWith('datatable://') ?? false);
 </script>
 
 <AppConnect
@@ -160,16 +176,18 @@ let hovering = $state(false);
 			id="resource-picker-select"
 		>
 			{#snippet endSnippet({ item, close })}
-				<Button
-					{disabled}
-					variant="subtle"
-					size="xs2"
-					wrapperClasses="-mr-2 pl-1 -my-2"
-					btnClasses="hover:bg-surface-tertiary"
-					on:click={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
-					startIcon={{ icon: Pen }}
-					iconOnly
-				/>
+				{#if !item.value?.startsWith('datatable://')}
+					<Button
+						{disabled}
+						variant="subtle"
+						size="xs2"
+						wrapperClasses="-mr-2 pl-1 -my-2"
+						btnClasses="hover:bg-surface-tertiary"
+						on:click={() => (resourceEditor?.initEdit?.(item.value ?? ''), close())}
+						startIcon={{ icon: Pen }}
+						iconOnly
+					/>
+				{/if}
 			{/snippet}
 			{#snippet bottomSnippet({ close })}
 				<div class="flex bg-surface border-t divide-x">
@@ -224,7 +242,7 @@ let hovering = $state(false);
 				</div>
 			{/snippet}
 		</Select>
-		{#if value && hovering}
+		{#if value && hovering && !isDatatableSelected}
 			<div class="absolute {disabled ? 'right-2' : 'right-10'} z-20">
 				<Button
 					variant="subtle"
@@ -243,9 +261,6 @@ let hovering = $state(false);
 			class="mt-1"
 			_resourceMetadata={{ resource_type: resourceType }}
 			asset={{ kind: 'resource', path: value }}
-			{dbManagerDrawer}
 		/>
 	{/if}
 </div>
-
-<DbManagerDrawer bind:this={dbManagerDrawer} />

package/package/components/ResourcePicker.svelte.d.ts

@@ -14,6 +14,7 @@ interface Props {
     class?: string;
     onClear?: () => void;
     excludedValues?: string[];
+    datatableAsPgResource?: boolean;
 }
 declare const ResourcePicker: import("svelte").Component<Props, {
     askNewResource: () => Promise<void>;

package/package/components/RightClickPopover.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">import { clickOutside } from '../utils';
+import { fly } from 'svelte/transition';
+import Portal from './Portal.svelte';
+const { children } = $props();
+let _isOpen = $state(false);
+let mousePos = $state({ x: 0, y: 0 });
+export function open(e) {
+    e.preventDefault();
+    _isOpen = true;
+    mousePos = { x: e.clientX, y: e.clientY };
+}
+export function close() {
+    _isOpen = false;
+}
+export function isOpen() {
+    return _isOpen;
+}
+</script>
+
+<Portal>
+	{#if _isOpen}
+		<div
+			in:fly={{ x: 0, y: -10, duration: 120 }}
+			use:clickOutside={{
+				onClickOutside: (e) => {
+					_isOpen = false
+					e.preventDefault()
+					e.stopPropagation()
+				}
+			}}
+			class="absolute left-0 top-0 z-[9999] w-fit"
+			style="transform: translate({mousePos.x + 2}px, {mousePos.y + 2}px)"
+		>
+			{@render children()}
+		</div>
+	{/if}
+</Portal>

package/package/components/RightClickPopover.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const RightClickPopover: import("svelte").Component<Props, {
+    open: (e: MouseEvent) => void;
+    close: () => void;
+    isOpen: () => boolean;
+}, "">;
+type RightClickPopover = ReturnType<typeof RightClickPopover>;
+export default RightClickPopover;