windmill-components 1.613.4 → 1.623.1

package/package/assets/tokens/tokens.json

@@ -226,17 +226,7 @@
 			"yellow-700": "#8a6e31",
 			"yellow-800": "#61512d",
 			"yellow-900": "#443d22",
-			"yellow-950": "#3a351a",
-			"magenta-100": "#fae8fd",
-			"magenta-200": "#f0c6fb",
-			"magenta-300": "#e89ffa",
-			"magenta-400": "#de75f8",
-			"magenta-500": "#d551f5",
-			"magenta-600": "#bf41dd",
-			"magenta-700": "#b03dd8",
-			"magenta-800": "#963cc7",
-			"magenta-900": "#8537c0",
-			"magenta-950": "#6e2ba1"
+			"yellow-950": "#3a351a"
 		}
 	},
 	"guidelines": { "mode-1": { "blue": "#5e81ac", "demo-background": "#ffffff00" } },

package/package/ata/apis.js

@@ -1,80 +1,20 @@
 //  https://github.com/jsdelivr/data.jsdelivr.com
 import pLimit from 'p-limit';
-import { workspaceStore } from '../stores';
-import { get } from 'svelte/store';
-// Backend proxy fallback functions
-const getBackendProxyUrl = () => {
-    const workspace = get(workspaceStore);
-    if (!workspace) {
-        throw new Error('No workspace available');
-    }
-    return `/api/w/${workspace}/npm_proxy`;
-};
-const backendProxyApi = async (endpoint, resLimit) => {
-    if (isOverlimit(resLimit)) {
-        console.warn(`Exceeded limit of types downloaded for the needs of the assistant fetching: ${endpoint}, ${resLimit.usage}`);
-        return new Error('Exceeded limit of 100MB of data downloaded.');
-    }
-    try {
-        const baseUrl = getBackendProxyUrl();
-        const url = `${baseUrl}${endpoint}`;
-        return limit(() => fetch(url, { credentials: 'include' }).then((res) => {
-            if (res.ok) {
-                return res.text().then((text) => {
-                    resLimit.usage += text.length;
-                    console.log('resLimit (backend proxy)', url, resLimit.usage);
-                    return JSON.parse(text);
-                });
-            }
-            else {
-                return new Error('Backend proxy request failed');
-            }
-        }));
-    }
-    catch (e) {
-        return new Error('Backend proxy not available');
-    }
-};
-export const getNPMVersionsForModule = async (moduleName, resLimit) => {
+export const getNPMVersionsForModule = (moduleName, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/npm/${moduleName}`;
-    const result = await api(url, resLimit, {
+    return api(url, resLimit, {
         cache: 'no-store'
     });
-    // If jsdelivr fails, try backend proxy
-    if (result instanceof Error) {
-        console.log('jsdelivr failed for', moduleName, 'trying backend proxy');
-        return backendProxyApi(`/metadata/${encodeURIComponent(moduleName)}`, resLimit);
-    }
-    return result;
 };
-export const getNPMVersionForModuleReference = async (moduleName, reference, resLimit) => {
+export const getNPMVersionForModuleReference = (moduleName, reference, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/resolve/npm/${moduleName}@${reference}`;
-    const result = await api(url, resLimit);
-    // If jsdelivr fails, try backend proxy
-    if (result instanceof Error) {
-        console.log('jsdelivr failed for', moduleName, reference, 'trying backend proxy');
-        return backendProxyApi(`/resolve/${encodeURIComponent(moduleName)}?tag=${encodeURIComponent(reference)}`, resLimit);
-    }
-    return result;
+    return api(url, resLimit);
 };
 export const getFiletreeForModuleWithVersion = async (moduleName, version, raw, resLimit) => {
     const url = `https://data.jsdelivr.com/v1/package/npm/${moduleName}@${version}/flat`;
     const res = await api(url, resLimit);
     if (res instanceof Error) {
-        // Try backend proxy
-        console.log('jsdelivr failed for', moduleName, version, 'trying backend proxy');
-        const backendRes = await backendProxyApi(`/filetree/${encodeURIComponent(moduleName)}/${encodeURIComponent(version)}`, resLimit);
-        if (backendRes instanceof Error) {
-            return res;
-        }
-        else {
-            return {
-                ...backendRes,
-                moduleName,
-                version,
-                raw
-            };
-        }
+        return res;
     }
     else {
         return {
@@ -93,19 +33,6 @@ export const getDTSFileForModuleWithVersion = async (moduleName, version, file)
         return res.text();
     }
     else {
-        // Try backend proxy
-        console.log('jsdelivr failed for file', moduleName, version, file, 'trying backend proxy');
-        try {
-            const baseUrl = getBackendProxyUrl();
-            const proxyUrl = `${baseUrl}/file/${encodeURIComponent(moduleName)}/${encodeURIComponent(version)}${file}`;
-            const proxyRes = await limit(() => fetch(proxyUrl, { credentials: 'include' }));
-            if (proxyRes.ok) {
-                return proxyRes.text();
-            }
-        }
-        catch (e) {
-            console.log('Backend proxy failed for file', e);
-        }
         return new Error('OK');
     }
 };

package/package/components/AddUser.svelte

@@ -78,7 +78,7 @@ let selected = $state('developer');
 				<input type="text" onkeyup={handleKeyUp} placeholder="username" bind:value={username} />
 			{/if}
 
-			<span class="text-xs mb-1 pt-6 leading-6">Role</span>
+			<span class="text-xs mb-1 pt-2 leading-6">Role</span>
 			<ToggleButtonGroup bind:selected class="mb-4">
 				{#snippet children({ item })}
 					<ToggleButton

package/package/components/CenteredModal.svelte

@@ -1,50 +1,42 @@
 <script lang="ts">import { setLicense } from '../enterpriseUtils';
 import { enterpriseLicense, whitelabelNameStore } from '../stores';
-import { twMerge } from 'tailwind-merge';
 import WindmillIcon from './icons/WindmillIcon.svelte';
 import LoginPageHeader from './LoginPageHeader.svelte';
-let { subtitle = undefined, title = 'Windmill', disableLogo = false, large = false, centerVertically = true, loading = false, children } = $props();
+export let subtitle = undefined;
+export let title = 'Windmill';
+export let disableLogo = false;
+export let large = false;
 setLicense();
-let height = $state(0);
 </script>
 
-<div
-	class="flex justify-center h-screen p-4 relative bg-surface-secondary overflow-auto"
-	class:items-center={centerVertically}
-	style="scrollbar-gutter: stable both-edges;"
-	bind:clientHeight={height}
->
-	<div class={twMerge("flex flex-col gap-2 items-center w-full pb-8  h-fit", height > 1080 ? 'pt-28' : 'pt-12')} >
+<div class="center-center min-h-screen p-4 relative bg-surface-secondary">
+	<div class="flex flex-col gap-2 items-center w-full">
 		{#if (!disableLogo && !$enterpriseLicense) || !$whitelabelNameStore}
 			<div class="hidden lg:block">
 				<div>
-					<WindmillIcon size={centerVertically ? 64 : 48} spin={loading ? 'fast' : 'slow'} />
+					<WindmillIcon height="100px" width="100px" spin="slow" />
 				</div>
+				<h2 class="text-center py-2 text-primary">Windmill</h2>
 			</div>
-		{:else}
-			<div class="pt-8"></div>
 		{/if}
 
-		<div class="mb-4">
-			<h1 class="text-center text-lg text-emphasis font-semibold">
-				{title}
-			</h1>
-			{#if subtitle}
-				<p class="text-xs font-normal text-primary text-center mt-2">
-					{subtitle}
-				</p>
-			{/if}
-		</div>
-
-		{#if children}
-			<div
-				class="rounded-md bg-surface w-full {large
-					? 'max-w-5xl'
-					: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 z-10"
-			>
-				{@render children()}
+		<div
+			class="rounded-md bg-surface w-full {large
+				? 'max-w-5xl'
+				: 'max-w-[640px]'} p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10"
+		>
+			<div class="mb-10">
+				<h1 class="text-center text-lg text-emphasis font-semibold">
+					{title}
+				</h1>
+				{#if subtitle}
+					<p class="text-sm font-semibold text-emphasis text-center mt-2">
+						{subtitle}
+					</p>
+				{/if}
 			</div>
-		{/if}
+			<slot />
+		</div>
 	</div>
 
 	<LoginPageHeader />

package/package/components/CenteredModal.svelte.d.ts

@@ -1,12 +1,32 @@
-interface Props {
+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 CenteredModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
     subtitle?: string | undefined;
     title?: string;
     disableLogo?: boolean;
     large?: boolean;
-    centerVertically?: boolean;
-    loading?: boolean;
-    children?: import('svelte').Snippet;
-}
-declare const CenteredModal: import("svelte").Component<Props, {}, "">;
-type CenteredModal = ReturnType<typeof CenteredModal>;
+}, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type CenteredModal = InstanceType<typeof CenteredModal>;
 export default CenteredModal;

package/package/components/CenteredPage.svelte

@@ -1,12 +1,9 @@
 <script lang="ts">import { twMerge } from 'tailwind-merge';
-let { class: clazz = '', children, wrapperClasses = '', handleOverflow = true } = $props();
+let { class: clazz = '', children } = $props();
 let width = $state(0);
 </script>
 
-<div
-	class={twMerge('pb-8', wrapperClasses, handleOverflow ? 'h-full overflow-y-auto' : '')}
-	style={handleOverflow ? 'scrollbar-gutter: stable both-edges;' : ''}
->
+<div class="pb-8">
 	<div class={twMerge('max-w-7xl mx-auto px-4 sm:px-6 md:px-8', clazz)} bind:clientWidth={width}
 		>{@render children?.({ width })}</div
 	>

package/package/components/CenteredPage.svelte.d.ts

@@ -3,8 +3,6 @@ interface Props {
     children?: import('svelte').Snippet<[{
         width: number;
     }]>;
-    wrapperClasses?: string;
-    handleOverflow?: boolean;
 }
 declare const CenteredPage: import("svelte").Component<Props, {}, "">;
 type CenteredPage = ReturnType<typeof CenteredPage>;

package/package/components/ConcurrentJobsChart.svelte

@@ -3,7 +3,7 @@ import zoomPlugin from 'chartjs-plugin-zoom';
 import { Chart as ChartJS, CategoryScale, Legend, LineElement, LinearScale, PointElement, TimeScale, Title, Tooltip } from 'chart.js';
 import { getDbClockNow } from '../forLater';
 import { Line } from './chartjs-wrappers/chartJs';
-let { extendedJobs = undefined, maxIsNow = false, minTimeSet = null, maxTimeSet = null, onZoom } = $props();
+let { extendedJobs = undefined, maxIsNow = false, minTimeSet = undefined, maxTimeSet = undefined, onZoom } = $props();
 function calculateTimeSeries(extendedJobs) {
     const timeline = new Map();
     extendedJobs.jobs.forEach((j) => {
@@ -171,8 +171,7 @@ let options = $derived({
                 display: false
             },
             min: minMaxTimes.min,
-            max: minMaxTimes.max,
-            ticks: { maxRotation: 0, minRotation: 0 }
+            max: minMaxTimes.max
         },
         y: {
             grid: {

package/package/components/ConcurrentJobsChart.svelte.d.ts

@@ -3,8 +3,8 @@ import type { ExtendedJobs } from '../gen';
 interface Props {
     extendedJobs?: ExtendedJobs | undefined;
     maxIsNow?: boolean;
-    minTimeSet?: string | null;
-    maxTimeSet?: string | null;
+    minTimeSet?: string | undefined;
+    maxTimeSet?: string | undefined;
     onZoom: (zoom: {
         min: Date;
         max: Date;

package/package/components/CustomPopover.svelte

@@ -1,8 +1,13 @@
-<script lang="ts">import { run, createBubbler } from 'svelte/legacy';
-const bubble = createBubbler();
-import { createPopperActions } from 'svelte-popperjs';
+<script lang="ts">import { createPopperActions } from 'svelte-popperjs';
 import Portal from './Portal.svelte';
-let { placement = 'bottom-end', notClickable = false, disablePopup = false, disappearTimeout = 100, appearTimeout = 300, style = undefined, noPadding = false, focusEl = undefined, class: clazz = '', children, overlay } = $props();
+export let placement = 'bottom-end';
+export let notClickable = false;
+export let disablePopup = false;
+export let disappearTimeout = 100;
+export let appearTimeout = 300;
+export let style = undefined;
+export let noPadding = false;
+export let focusEl = undefined;
 const [popperRef, popperContent] = createPopperActions({ placement });
 const popperOptions = {
     placement,
@@ -17,7 +22,7 @@ const popperOptions = {
         }
     ]
 };
-let showTooltip = $state(false);
+let showTooltip = false;
 let timeout = undefined;
 let inTimeout = undefined;
 function open() {
@@ -34,38 +39,36 @@ function close() {
     inTimeout = undefined;
     timeout = setTimeout(() => (showTooltip = false), disappearTimeout);
 }
-run(() => {
-    focusEl && focusEl?.focus();
-});
+$: focusEl && focusEl?.focus();
 </script>
 
 {#if notClickable}
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<span {style} use:popperRef onmouseenter={open} onmouseleave={close} class={clazz}>
-		{@render children?.()}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<span {style} use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
+		<slot />
 	</span>
 {:else}
 	<button
 		{style}
 		use:popperRef
-		onmouseenter={open}
-		onmouseleave={close}
-		onclick={bubble('click')}
-		class={clazz}
+		on:mouseenter={open}
+		on:mouseleave={close}
+		on:click
+		class={$$props.class}
 	>
-		{@render children?.()}
+		<slot />
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
 	<Portal name="custom-popover">
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			use:popperContent={popperOptions}
-			onmouseenter={open}
-			onmouseleave={close}
+			on:mouseenter={open}
+			on:mouseleave={close}
 			class="z-[5001] border rounded-lg shadow-lg {noPadding ? '' : 'p-4'} bg-surface"
 		>
-			{@render overlay?.()}
+			<slot name="overlay" />
 		</div>
 	</Portal>
 {/if}

package/package/components/CustomPopover.svelte.d.ts

@@ -1,17 +1,42 @@
 import type { PopoverPlacement } from './Popover.model';
-interface Props {
-    placement?: PopoverPlacement;
-    notClickable?: boolean;
-    disablePopup?: boolean;
-    disappearTimeout?: number;
-    appearTimeout?: number;
-    style?: string | undefined;
-    noPadding?: boolean;
-    focusEl?: HTMLElement | undefined;
-    class?: string;
-    children?: import('svelte').Snippet;
-    overlay?: import('svelte').Snippet;
+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 CustomPopover: import("svelte").Component<Props, {}, "">;
-type CustomPopover = ReturnType<typeof CustomPopover>;
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const CustomPopover: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    placement?: PopoverPlacement | undefined;
+    notClickable?: boolean | undefined;
+    disablePopup?: boolean | undefined;
+    disappearTimeout?: number | undefined;
+    appearTimeout?: number | undefined;
+    style?: string | undefined | undefined;
+    noPadding?: boolean | undefined;
+    focusEl?: HTMLElement | undefined;
+}, {
+    default: {};
+    overlay: {};
+}>, {
+    click: PointerEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+    overlay: {};
+}, {}, string>;
+type CustomPopover = InstanceType<typeof CustomPopover>;
 export default CustomPopover;

package/package/components/DBManager.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import {} from '../stores';
-import { ChevronDownIcon, EditIcon, Loader2, MoreVertical, Plus, Table2, Trash2Icon } from 'lucide-svelte';
+import { ChevronDownIcon, MoreVertical, Plus, Table2, Trash2Icon } from 'lucide-svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import { ClearableInput, Drawer, DrawerContent } from './common';
 import { sendUserToast } from '../toast';
@@ -12,10 +12,7 @@ import DbTableEditor from './DBTableEditor.svelte';
 import Portal from './Portal.svelte';
 import Select from './select/Select.svelte';
 import { safeSelectItems } from './select/utils.svelte';
-import { dbSupportsTransactionalDdl, diffTableEditorValues } from './apps/components/display/dbtable/queries/alterTable';
-import { resource } from 'runed';
-import { capitalize, pluralize } from '../utils';
-let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, getColDefs, dbSupportsSchemas, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [], features } = $props();
+let { dbType, dbSchema, dbTableOpsFactory, dbSchemaOps, getColDefs, dbSupportsSchemas, refresh, initialSchemaKey, initialTableKey, selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [] } = $props();
 // Helper to check if a table is selected in multi-select mode
 function isTableSelected(schema, table) {
     return selectedTables.some((t) => t.schema === schema && t.table === table);
@@ -122,19 +119,7 @@ let tableKey = $derived(dbSupportsSchemas && selected.schemaKey
     ? `${selected.schemaKey}.${selected.tableKey}`
     : selected.tableKey);
 let askingForConfirmation = $state();
-let dbTableEditorState = $state({
-    open: false
-});
-let dbTableEditorAlterTableData = resource(() => dbTableEditorState.alterTableKey, async (table) => {
-    if (!table)
-        return;
-    let tableKey2 = dbSupportsSchemas && selected.schemaKey ? `${selected.schemaKey}.${table}` : table;
-    return await dbSchemaOps.onFetchTableEditorDefinition({
-        table: table,
-        schema: selected.schemaKey,
-        getColDefs: () => getColDefs(tableKey2)
-    });
-});
+let dbTableEditorState = $state({ open: false });
 let newSchemaDialogOpen = $state(false);
 let newSchemaName = $state('');
 // Check if the sanitized schema name already exists
@@ -239,9 +224,7 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 						<span class="truncate text-ellipsis grow text-left text-tertiary text-xs"
 							>{schemaKey}</span
 						>
-						<span class="text-2xs text-tertiary mr-2 group-hover:hidden">
-							{schemaTables.length}
-						</span>
+						<span class="text-2xs text-tertiary mr-2 group-hover:hidden">{schemaTables.length}</span>
 						<!-- Delete schema button (on hover) -->
 						<button
 							class="hidden group-hover:flex p-1 hover:bg-red-100 dark:hover:bg-red-900/30 rounded transition-colors mr-1"
@@ -275,8 +258,7 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 					{#each schemaTables as tableKey}
 						{@const isDisabled = isTableDisabled(schemaKey, tableKey)}
 						{@const isChecked = isTableSelected(schemaKey, tableKey) || isDisabled}
-						{@const isCurrentPreview =
-							selected.schemaKey === schemaKey && selected.tableKey === tableKey}
+						{@const isCurrentPreview = selected.schemaKey === schemaKey && selected.tableKey === tableKey}
 						<div
 							class={'group w-full text-sm font-normal flex gap-2 items-center h-8 cursor-pointer pl-7 pr-1 ' +
 								(isCurrentPreview ? 'bg-gray-500/25' : 'hover:bg-gray-500/10') +
@@ -384,16 +366,6 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 												askingForConfirmation = undefined
 											}
 										})
-								},
-								{
-									displayName: 'Alter table',
-									icon: EditIcon,
-									action: () => {
-										dbTableEditorState = {
-											open: true,
-											alterTableKey: tableKey
-										}
-									}
 								}
 							]}
 							class="w-fit"
@@ -445,78 +417,18 @@ const schemaAlreadyExists = $derived(sanitizedNewSchemaName !== '' && schemaKeys
 	open={dbTableEditorState.open}
 	on:close={() => (dbTableEditorState = { open: false })}
 >
-	<DrawerContent
-		on:close={() => (dbTableEditorState = { open: false })}
-		title={dbTableEditorState.alterTableKey
-			? `Alter ${dbTableEditorState.alterTableKey}`
-			: 'Create a new table'}
-	>
-		{#key dbTableEditorState.alterTableKey}
-			{#if !dbTableEditorState.alterTableKey || dbTableEditorAlterTableData.current}
-				<DbTableEditor
-					{features}
-					{dbSchema}
-					currentSchema={selected.schemaKey}
-					initialValues={dbTableEditorAlterTableData.current}
-					onConfirm={async ({ values }) => {
-						if (dbTableEditorState.alterTableKey && dbTableEditorAlterTableData.current) {
-							let diff = diffTableEditorValues(dbTableEditorAlterTableData.current, values)
-							await dbSchemaOps.onAlter({ schema: selected.schemaKey, values: diff })
-						} else {
-							await dbSchemaOps.onCreate({ values, schema: selected.schemaKey })
-						}
-						refresh?.()
-						sendUserToast(
-							dbTableEditorState.alterTableKey
-								? dbTableEditorState.alterTableKey + ' updated!'
-								: values.name + ' created!'
-						)
-						dbTableEditorState = { open: false }
-					}}
-					{dbType}
-					computePreview={({ values }) => {
-						if (dbTableEditorState.alterTableKey && dbTableEditorAlterTableData.current) {
-							let diff = diffTableEditorValues(dbTableEditorAlterTableData.current, values)
-							let queries = dbSchemaOps.previewAlterSql({
-								values: diff,
-								schema: selected.schemaKey
-							})
-							let alert = !dbSupportsTransactionalDdl(dbType)
-								? {
-										title: capitalize(dbType) + ' does not support transactional DDL',
-										body: 'Any of these statements failing may leave your database in an intermediate state.'
-									}
-								: undefined
-							return { sql: queries.join('\n'), ...(alert ? { alert } : {}) }
-						} else {
-							return { sql: dbSchemaOps.previewCreateSql({ values, schema: selected.schemaKey }) }
-						}
-					}}
-					computeBtnProps={({ values }) => {
-						if (dbTableEditorState.alterTableKey && dbTableEditorAlterTableData.current) {
-							let diff = diffTableEditorValues(dbTableEditorAlterTableData.current, values)
-							let queries = dbSchemaOps.previewAlterSql({
-								values: diff,
-								schema: selected.schemaKey
-							})
-							if (!queries.length) {
-								return { text: 'No changes detected', disabled: true }
-							}
-							return {
-								text: `Alter table (${pluralize(queries.length, 'change')} detected)`
-							}
-						} else {
-							return { text: 'Create table' }
-						}
-					}}
-				/>
-			{:else if dbTableEditorAlterTableData.loading}
-				<Loader2 class="animate-spin" size={32} />
-			{:else}
-				<p class="text-sm text-tertiary">Failed to load table definition.</p>
-				<p>{dbTableEditorAlterTableData.error}</p>
-			{/if}
-		{/key}
+	<DrawerContent on:close={() => (dbTableEditorState = { open: false })} title="Create a new table">
+		<DbTableEditor
+			{dbSchema}
+			currentSchema={selected.schemaKey}
+			onConfirm={async (values) => {
+				await dbSchemaOps.onCreate({ values, schema: selected.schemaKey })
+				refresh?.()
+				dbTableEditorState = { open: false }
+			}}
+			{dbType}
+			previewSql={(values) => dbSchemaOps.previewCreateSql({ values, schema: selected.schemaKey })}
+		/>
 	</DrawerContent>
 </Drawer>
 

package/package/components/DBManager.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type DBSchema } from '../stores';
-import { type ColumnDef, type DbFeatures } from './apps/components/display/dbtable/utils';
+import { type ColumnDef } from './apps/components/display/dbtable/utils';
 import type { IDbSchemaOps, IDbTableOps } from './dbOps';
 import type { DbType } from './dbTypes';
 import type { Snippet } from 'svelte';
@@ -30,7 +30,6 @@ type Props = {
     selectedTables?: SelectedTable[];
     /** Tables that are already added and should show as disabled */
     disabledTables?: SelectedTable[];
-    features?: DbFeatures;
 };
 declare const DBManager: import("svelte").Component<Props, {}, "selectedSchemaKey" | "selectedTableKey" | "selectedTables">;
 type DBManager = ReturnType<typeof DBManager>;