windmill-components 1.642.0 → 1.655.0

package/package/components/ContextualVariableEditor.svelte

@@ -10,22 +10,22 @@ import autosize from '../autosize';
 import Label from './Label.svelte';
 import TextInput from './text_input/TextInput.svelte';
 const dispatch = createEventDispatcher();
-let edit = false;
-let name = '';
-let value = '';
+let edit = $state(false);
+let name = $state('');
+let value = $state('');
 export function initNew() {
     edit = false;
     name = '';
     value = '';
-    drawer.openDrawer();
+    drawer?.openDrawer();
 }
 export function editVariable(editName, editValue) {
     edit = true;
     name = editName;
     value = editValue;
-    drawer.openDrawer();
+    drawer?.openDrawer();
 }
-let drawer;
+let drawer = $state();
 async function updateVariable() {
     await WorkspaceService.setEnvironmentVariable({
         workspace: $workspaceStore,
@@ -36,7 +36,7 @@ async function updateVariable() {
     });
     sendUserToast(`${edit ? 'Updated' : 'Created'} contextual variable ${name}. It may take up to a few minutes to update.`);
     dispatch('update');
-    drawer.closeDrawer();
+    drawer?.closeDrawer();
     setTimeout(() => {
         dispatch('update');
     }, 5000);
@@ -46,7 +46,7 @@ async function updateVariable() {
 <Drawer bind:this={drawer} size="900px">
 	<DrawerContent
 		title={edit ? `Update contextual variable ${name}` : 'Create a contextual variable'}
-		on:close={drawer.closeDrawer}
+		on:close={drawer?.closeDrawer}
 	>
 		<div class="flex flex-col gap-8">
 			{#if !edit}

package/package/components/ContextualVariableEditor.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 ContextualVariableEditor: $$__sveltets_2_IsomorphicComponent<{
-    initNew?: () => void;
-    editVariable?: (editName: string, editValue: string) => void;
-}, {
+declare const ContextualVariableEditor: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     update: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     initNew: () => void;
     editVariable: (editName: string, editValue: string) => void;
-}, string>;
+}, "">;
 type ContextualVariableEditor = InstanceType<typeof ContextualVariableEditor>;
 export default ContextualVariableEditor;

package/package/components/CustomOauth.svelte

@@ -1,25 +1,21 @@
-<script lang="ts">import OauthExtraParams from './OauthExtraParams.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import OauthExtraParams from './OauthExtraParams.svelte';
 import OauthScopes from './OauthScopes.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
-export let connect_config = {
-    scopes: [],
-    auth_url: '',
-    token_url: '',
-    req_body_auth: false,
-    extra_params: {},
-    extra_params_callback: {}
-};
-$: if (!connect_config) {
-    connect_config = {
-        scopes: [],
-        auth_url: '',
-        token_url: '',
-        req_body_auth: false,
-        extra_params: {},
-        extra_params_callback: {}
-    };
-}
+let { connect_config = $bindable() } = $props();
+run(() => {
+    if (!connect_config) {
+        connect_config = {
+            scopes: [],
+            auth_url: '',
+            token_url: '',
+            req_body_auth: false,
+            extra_params: {},
+            extra_params_callback: {}
+        };
+    }
+});
 </script>
 
 <div class="flex flex-col gap-6">
@@ -39,12 +35,12 @@ $: if (!connect_config) {
 			bind:value={connect_config.token_url}
 		/>
 	</label>
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs">Scopes</span>
 		<OauthScopes bind:scopes={connect_config.scopes} />
 	</label>
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs"
 			>Extra Query Args for Authorize Request&nbsp;<Tooltip
@@ -54,14 +50,14 @@ $: if (!connect_config) {
 		>
 		<OauthExtraParams bind:extra_params={connect_config.extra_params} />
 	</label>
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs"
 			>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 		>
 		<OauthExtraParams bind:extra_params={connect_config.extra_params_callback} />
 	</label>
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="flex flex-col gap-1">
 		<span class="text-emphasis font-semibold text-xs"
 			>Payload <Tooltip

package/package/components/CustomOauth.svelte.d.ts

@@ -1,27 +1,5 @@
-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 CustomOauth: $$__sveltets_2_IsomorphicComponent<{
-    connect_config?: {
-        scopes: never[];
-        auth_url: string;
-        token_url: string;
-        req_body_auth: boolean;
-        extra_params: {};
-        extra_params_callback: {};
-    };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CustomOauth = InstanceType<typeof CustomOauth>;
+declare const CustomOauth: import("svelte").Component<{
+    connect_config?: any;
+}, {}, "connect_config">;
+type CustomOauth = ReturnType<typeof CustomOauth>;
 export default CustomOauth;

package/package/components/CustomPopover.svelte

@@ -2,10 +2,11 @@
 const bubble = createBubbler();
 import { createPopperActions } from 'svelte-popperjs';
 import Portal from './Portal.svelte';
+import { untrack } from 'svelte';
 let { placement = 'bottom-end', notClickable = false, disablePopup = false, disappearTimeout = 100, appearTimeout = 300, style = undefined, noPadding = false, focusEl = undefined, class: clazz = '', children, overlay } = $props();
-const [popperRef, popperContent] = createPopperActions({ placement });
+const [popperRef, popperContent] = createPopperActions({ placement: untrack(() => placement) });
 const popperOptions = {
-    placement,
+    placement: untrack(() => placement),
     strategy: 'fixed',
     modifiers: [
         { name: 'offset', options: { offset: [8, 8] } },

package/package/components/CustomSso.svelte

@@ -1,27 +1,22 @@
-<script lang="ts">import OauthExtraParams from './OauthExtraParams.svelte';
+<script lang="ts">import { run } from 'svelte/legacy';
+import OauthExtraParams from './OauthExtraParams.svelte';
 import OauthScopes from './OauthScopes.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
-export let login_config = {
-    scopes: [],
-    auth_url: '',
-    token_url: '',
-    userinfo_url: '',
-    req_body_auth: false,
-    extra_params: {},
-    extra_params_callback: {}
-};
-$: if (!login_config) {
-    login_config = {
-        scopes: [],
-        auth_url: '',
-        token_url: '',
-        userinfo_url: '',
-        req_body_auth: false,
-        extra_params: {},
-        extra_params_callback: {}
-    };
-}
+let { login_config = $bindable() } = $props();
+run(() => {
+    if (!login_config) {
+        login_config = {
+            scopes: [],
+            auth_url: '',
+            token_url: '',
+            userinfo_url: '',
+            req_body_auth: false,
+            extra_params: {},
+            extra_params_callback: {}
+        };
+    }
+});
 </script>
 
 <label class="block pb-6">
@@ -48,12 +43,12 @@ $: if (!login_config) {
 		bind:value={login_config.userinfo_url}
 	/>
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs">Scopes</span>
 	<OauthScopes bind:scopes={login_config.scopes} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Authorize Request&nbsp;<Tooltip
@@ -63,14 +58,14 @@ $: if (!login_config) {
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params_callback} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-6">
 	<span class="text-primary font-semibold text-xs"
 		>Payload <Tooltip

package/package/components/CustomSso.svelte.d.ts

@@ -1,28 +1,5 @@
-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 CustomSso: $$__sveltets_2_IsomorphicComponent<{
-    login_config?: {
-        scopes: never[];
-        auth_url: string;
-        token_url: string;
-        userinfo_url: string;
-        req_body_auth: boolean;
-        extra_params: {};
-        extra_params_callback: {};
-    };
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CustomSso = InstanceType<typeof CustomSso>;
+declare const CustomSso: import("svelte").Component<{
+    login_config?: any;
+}, {}, "login_config">;
+type CustomSso = ReturnType<typeof CustomSso>;
 export default CustomSso;

package/package/components/DBManagerDrawer.svelte

@@ -7,13 +7,9 @@ import Select from './select/Select.svelte';
 import { ArrowLeft, Expand, LoaderCircle, Minimize, RefreshCcw } from 'lucide-svelte';
 import DBManagerContent from './DBManagerContent.svelte';
 import { resource } from 'runed';
-let { offset = 0 } = $props();
-let input = $state();
-let open = $derived(!!input);
-// For datatable inputs, track the selected datatable separately
-let selectedDatatable = $state(undefined);
-// Check if input is a datatable type
-const isDatatableInput = $derived(input?.type === 'database' && input.resourcePath.startsWith('datatable://'));
+import { untrack } from 'svelte';
+let { uriState, offset = 0 } = $props();
+let open = $derived(uriState.open);
 // Load available datatables when drawer opens with datatable input
 const datatables = resource([], async () => {
     if (!$workspaceStore)
@@ -26,47 +22,27 @@ const datatables = resource([], async () => {
         return [];
     }
 });
-// Computed input that updates when selectedDatatable changes
-const effectiveInput = $derived.by(() => {
-    if (!input)
-        return undefined;
-    if (!isDatatableInput || !selectedDatatable)
-        return input;
-    return {
-        ...input,
-        resourcePath: `datatable://${selectedDatatable}`
-    };
-});
 const datatableItems = $derived(datatables.current.map((dt) => ({
     value: dt,
     label: dt
 })));
-export function openDrawer(nInput) {
-    input = nInput;
-    if (isDatatableInput) {
-        datatables.refetch();
-    }
-    // If it's a datatable input, extract the datatable name for the selector
-    if (nInput.type === 'database' && nInput.resourcePath.startsWith('datatable://')) {
-        selectedDatatable = nInput.resourcePath.replace('datatable://', '');
-        datatables.refetch();
-    }
-    else {
-        selectedDatatable = undefined;
+// Refetch datatables when switching to a datatable input
+$effect(() => {
+    if (uriState.isDatatableInput) {
+        untrack(() => datatables.refetch());
     }
-}
-export function closeDrawer() {
-    input = undefined;
-    selectedDatatable = undefined;
+});
+function handleClose() {
+    uriState.closeDrawer();
     dbManagerContent?.clearReplResult();
-    if (window.location.hash.startsWith('#dbmanager:'))
-        history.replaceState('', document.title, window.location.href.replace(/#dbmanager:.*$/, ''));
 }
 let windowWidth = $state(window.innerWidth);
 let expand = $state(false);
 $effect(() => {
-    if (!open)
+    if (!open) {
         expand = false;
+        uriState.closeDrawer();
+    }
 });
 let dbManagerContent = $state();
 let hasReplResult = $state(false);
@@ -79,7 +55,7 @@ let hasReplResult = $state(false);
 	size={expand ? `${windowWidth}px` : '1200px'}
 	preventEscape
 	{offset}
-	on:close={closeDrawer}
+	on:close={handleClose}
 >
 	<DrawerContent
 		title={hasReplResult ? 'Query Result' : 'Database Manager'}
@@ -87,18 +63,24 @@ let hasReplResult = $state(false);
 			if (hasReplResult) {
 				dbManagerContent?.clearReplResult()
 			} else {
-				closeDrawer()
+				handleClose()
 			}
 		}}
 		CloseIcon={hasReplResult ? ArrowLeft : undefined}
 		noPadding
 		id="db-manager-drawer"
 	>
-		{#if effectiveInput && $workspaceStore}
-			{#key selectedDatatable}
-				<DBManagerContent bind:this={dbManagerContent} input={effectiveInput} bind:hasReplResult>
+		{#if uriState.effectiveInput && $workspaceStore}
+			{#key uriState.selectedDatatable}
+				<DBManagerContent
+					bind:this={dbManagerContent}
+					input={uriState.effectiveInput}
+					bind:hasReplResult
+					bind:selectedSchemaKey={uriState.selectedSchema}
+					bind:selectedTableKey={uriState.selectedTable}
+				>
 					{#snippet dbSelector()}
-						{#if isDatatableInput}
+						{#if uriState.isDatatableInput}
 							{#if datatables.loading}
 								<div class="flex items-center gap-2 text-tertiary ml-2">
 									<LoaderCircle size={14} class="animate-spin" />
@@ -108,7 +90,7 @@ let hasReplResult = $state(false);
 								<Select
 									transformInputSelectedText={(s) => `Datatable: ${s}`}
 									items={datatableItems}
-									bind:value={selectedDatatable}
+									bind:value={uriState.selectedDatatable}
 									placeholder="Select data table"
 									size="md"
 								/>

package/package/components/DBManagerDrawer.svelte.d.ts

@@ -1,11 +1,9 @@
-import type { DbInput } from './dbTypes';
+import type { DbManagerUriState } from './dbManagerDrawerModel.svelte';
 interface Props {
+    uriState: DbManagerUriState;
     /** Z-index offset for the drawer, useful when opening from within modals */
     offset?: number;
 }
-declare const DBManagerDrawer: import("svelte").Component<Props, {
-    openDrawer: (nInput: DbInput) => void;
-    closeDrawer: () => void;
-}, "">;
+declare const DBManagerDrawer: import("svelte").Component<Props, {}, "">;
 type DBManagerDrawer = ReturnType<typeof DBManagerDrawer>;
 export default DBManagerDrawer;

package/package/components/DBSchemaExplorer.svelte

@@ -25,10 +25,10 @@ function handleSelected({ detail }) {
 	</ToggleButtonGroup>
 {/if}
 {#if dbSchema.lang === 'graphql'}
-	{#await import('./GraphqlSchemaViewer.svelte')}
+	{#await Promise.all([import('./GraphqlSchemaViewer.svelte'), formatGraphqlSchema(dbSchema.schema)])}
 		<Loader2 class="animate-spin" />
-	{:then Module}
-		<Module.default code={formatGraphqlSchema(dbSchema.schema)} class="h-full" />
+	{:then [Module, code]}
+		<Module.default {code} class="h-full" />
 	{/await}
 {:else}
 	<ObjectViewer json={formatSchema(dbSchema)} pureViewer collapseLevel={1} />

package/package/components/DBTableEditor.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" module>"use strict";
+<script lang="ts" module>import { untrack } from 'svelte';
 function validate(values, dbSchema) {
     const columnNamesErrs = values.columns.flatMap((column) => {
         const isUnique = values.columns.filter((c) => c.name === column.name).length === 1;
@@ -51,7 +51,7 @@ import { datatypeDefaultLength } from './apps/components/display/dbtable/tableEd
 import Alert from './common/alert/Alert.svelte';
 import Label from './Label.svelte';
 const { dbType, dbSchema, currentSchema, initialValues, features, onConfirm, computeBtnProps, computePreview } = $props();
-const columnTypes = DB_TYPES[dbType];
+const columnTypes = DB_TYPES[untrack(() => dbType)];
 const defaultColumnType = {
     postgresql: 'BIGSERIAL',
     snowflake: 'varchar',
@@ -59,8 +59,8 @@ const defaultColumnType = {
     bigquery: 'string',
     mysql: 'varchar',
     duckdb: 'string'
-}[dbType];
-const values = $state($state.snapshot(initialValues) ?? {
+}[untrack(() => dbType)];
+const values = $state($state.snapshot(untrack(() => initialValues)) ?? {
     name: '',
     columns: [],
     foreignKeys: []
@@ -75,8 +75,8 @@ function addColumn({ name, primaryKey }) {
         ...(primaryKey && { primaryKey })
     });
 }
-if (!initialValues) {
-    addColumn({ name: 'id', primaryKey: features?.primaryKeys });
+if (!untrack(() => initialValues)) {
+    addColumn({ name: 'id', primaryKey: untrack(() => features)?.primaryKeys });
 }
 const errors = $derived(validate(values, dbSchema));
 let askingForConfirmation = $state();

package/package/components/DatatablePicker.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">import { WorkspaceService } from '../gen';
-import { globalDbManagerDrawer, workspaceStore } from '../stores';
+import { workspaceStore } from '../stores';
 import Select from './select/Select.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
 import { usePromise } from '../svelte5Utils.svelte';
 let { value = $bindable(undefined), disabled = false, disablePortal = false, showSchemaExplorer = false, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined } = $props();
 let datatables = usePromise(() => WorkspaceService.listDataTables({ workspace: $workspaceStore ?? '' }));
-let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 </script>
 
 <div class={className}>
@@ -23,7 +22,6 @@ let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 		<ExploreAssetButton
 			class="mt-1 w-fit"
 			asset={{ kind: 'datatable', path: value }}
-			{dbManagerDrawer}
 		/>
 	{/if}
 </div>

package/package/components/DateInput.svelte

@@ -46,6 +46,7 @@ function updateValue(newDate) {
 let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex flex-row gap-1 items-center w-full"
 	id={randomId}

package/package/components/DateTimeInput.svelte

@@ -76,6 +76,7 @@ function setTimeLater(mins) {
 let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex flex-row gap-1 items-center w-full relative"
 	id={randomId}

package/package/components/DefaultScripts.svelte

@@ -4,15 +4,13 @@ import { Button } from './common';
 import Drawer from './common/drawer/Drawer.svelte';
 import DrawerContent from './common/drawer/DrawerContent.svelte';
 import DefaultScriptsInner from './DefaultScriptsInner.svelte';
-let drawer;
-export let placement = 'left';
-export let size = 'xs2';
-export let noText = false;
+let { placement = 'left', size = 'xs2', noText = false } = $props();
+let drawer = $state();
 </script>
 
 {#if $userStore?.is_admin || $userStore?.is_super_admin}
 	<Drawer bind:this={drawer} {placement}>
-		<DrawerContent title="Edit Default Scripts" on:close={drawer.closeDrawer}>
+		<DrawerContent title="Edit Default Scripts" on:close={drawer?.closeDrawer}>
 			<DefaultScriptsInner />
 		</DrawerContent>
 	</Drawer>

package/package/components/DefaultScripts.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 DefaultScripts: $$__sveltets_2_IsomorphicComponent<{
-    placement?: "left" | "right";
-    size?: "xs3" | "xs2";
+interface Props {
+    placement?: 'left' | 'right';
+    size?: 'xs3' | 'xs2';
     noText?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DefaultScripts = InstanceType<typeof DefaultScripts>;
+}
+declare const DefaultScripts: import("svelte").Component<Props, {}, "">;
+type DefaultScripts = ReturnType<typeof DefaultScripts>;
 export default DefaultScripts;

package/package/components/DefaultScriptsInner.svelte

@@ -4,8 +4,7 @@ import { flip } from 'svelte/animate';
 import Toggle from './Toggle.svelte';
 import { defaultScriptLanguages } from '../scripts';
 import Alert from './common/alert/Alert.svelte';
-export let small = false;
-$: langs = computeLangs($defaultScripts);
+let { small = false } = $props();
 function computeLangs(defaultScripts) {
     const allLangs = Object.keys(defaultScriptLanguages);
     if (!defaultScripts || defaultScripts.order == undefined)
@@ -30,6 +29,7 @@ async function changePosition(i, up) {
         requestBody: $defaultScripts
     });
 }
+let langs = $derived(computeLangs($defaultScripts));
 </script>
 
 <Alert title="Global to workspace" type="info" class="mb-4" size={small ? 'xs' : 'sm'}>
@@ -47,7 +47,7 @@ async function changePosition(i, up) {
 			<div>
 				{#if i > 0}
 					<button
-						on:click={() => changePosition(i ?? 0, true)}
+						onclick={() => changePosition(i ?? 0, true)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move up"
 					>
@@ -56,7 +56,7 @@ async function changePosition(i, up) {
 				{/if}
 				{#if i < langs.length - 1}
 					<button
-						on:click={() => changePosition(i ?? 0, false)}
+						onclick={() => changePosition(i ?? 0, false)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move down">&downarrow;</button
 					>

package/package/components/DefaultScriptsInner.svelte.d.ts

@@ -1,20 +1,6 @@
-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 DefaultScriptsInner: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     small?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DefaultScriptsInner = InstanceType<typeof DefaultScriptsInner>;
+}
+declare const DefaultScriptsInner: import("svelte").Component<Props, {}, "">;
+type DefaultScriptsInner = ReturnType<typeof DefaultScriptsInner>;
 export default DefaultScriptsInner;