windmill-components 1.613.5 → 1.623.2

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

@@ -1,8 +1,9 @@
 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';
+import type { DbFeatures } from './apps/components/display/dbtable/dbFeatures';
 /** Represents a selected table with its schema */
 export interface SelectedTable {
     schema: string;
@@ -12,7 +13,7 @@ type Props = {
     dbType: DbType;
     dbSchema: DBSchema;
     dbSupportsSchemas: boolean;
-    getColDefs: (tableKey: string) => Promise<ColumnDef[]>;
+    colDefs: Record<string, ColumnDef[]> | undefined;
     dbTableOpsFactory: (params: {
         colDefs: ColumnDef[];
         tableKey: string;
@@ -32,6 +33,15 @@ type Props = {
     disabledTables?: SelectedTable[];
     features?: DbFeatures;
 };
-declare const DBManager: import("svelte").Component<Props, {}, "selectedSchemaKey" | "selectedTableKey" | "selectedTables">;
+declare const DBManager: import("svelte").Component<Props, {
+    dbTable: () => ({
+        $on?(type: string, callback: (e: any) => void): () => void;
+        $set?(props: Partial<{
+            dbTableOps: IDbTableOps;
+        }>): void;
+    } & {
+        refresh: () => number;
+    }) | undefined;
+}, "selectedSchemaKey" | "selectedTableKey" | "selectedTables">;
 type DBManager = ReturnType<typeof DBManager>;
 export default DBManager;

package/package/components/DBManagerContent.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">import { dbSchemas, workspaceStore } from '../stores';
 import { sendUserToast, sortArray } from '../utils';
 import { Loader2 } from 'lucide-svelte';
-import { dbSupportsSchemas, getDbFeatures } from './apps/components/display/dbtable/utils';
+import { dbSupportsSchemas } from './apps/components/display/dbtable/utils';
 import DbManager from './DBManager.svelte';
 import { dbSchemaOpsWithPreviewScripts, dbTableOpsWithPreviewScripts, getDbType, getDucklakeSchema } from './dbOps';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SqlRepl from './SqlRepl.svelte';
 import SimpleAgTable from './SimpleAgTable.svelte';
-import { untrack } from 'svelte';
-import { getDbSchemas, loadAllTablesMetaData, loadTableMetaData } from './apps/components/display/dbtable/metadata';
-let { input, showRepl = true, hasReplResult = $bindable(false), isRefreshing = $bindable(false), selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [] } = $props();
+import {} from 'svelte';
+import { getDbSchemas, loadAllTablesMetaData } from './apps/components/display/dbtable/metadata';
+import { getDbFeatures } from './apps/components/display/dbtable/dbFeatures';
+import { resource } from 'runed';
+let { input, showRepl = true, hasReplResult = $bindable(false), selectedSchemaKey = $bindable(undefined), selectedTableKey = $bindable(undefined), dbSelector, multiSelectMode = false, selectedTables = $bindable([]), disabledTables = [] } = $props();
 let dbSchema = $derived(input && $dbSchemas[getDbSchemasPath(input)]);
 function getDbSchemasPath(input) {
     switch (input.type) {
@@ -19,39 +21,17 @@ function getDbSchemasPath(input) {
             return 'ducklake://' + input.ducklake;
     }
 }
-// `refreshCount` is a derived state. `refreshing` is the source of truth
-let refreshCount = $state(0);
-$effect(() => {
-    if (refreshing)
-        untrack(() => (refreshCount += 1));
-});
-let refreshing = $state(false);
-$effect(() => {
-    if (refreshing)
-        getSchema();
-});
-// Sync refreshing state with bindable prop
-$effect(() => {
-    isRefreshing = refreshing;
-});
-export const refresh = () => !refreshing && (refreshing = true);
-// Initial schema load
-$effect(() => {
-    if (input) {
-        untrack(() => getSchema());
-    }
+let colDefs = resource(() => [input], async () => {
+    if (!input)
+        return;
+    return await loadAllTablesMetaData($workspaceStore, input);
 });
-async function getSchema() {
+let dbSchemasPromise = resource(() => [input], async () => {
     if (!input)
         return;
     const dbSchemasPath = getDbSchemasPath(input);
-    if ($dbSchemas[dbSchemasPath] && !refreshing)
-        return;
-    const oldDbSchema = $dbSchemas[dbSchemasPath];
     if (input.type == 'database') {
-        await getDbSchemas(input.resourceType, input.resourcePath, $workspaceStore, $dbSchemas, (message) => {
-            sendUserToast(message, true);
-        });
+        $dbSchemas[dbSchemasPath] = await getDbSchemas(input.resourceType, input.resourcePath, $workspaceStore, (message) => sendUserToast(message, true));
     }
     else if (input.type == 'ducklake') {
         $dbSchemas[dbSchemasPath] = await getDucklakeSchema({
@@ -59,11 +39,13 @@ async function getSchema() {
             ducklake: input.ducklake
         });
     }
-    // avoid infinite loop on error due to the way getDbSchemas is implemented
-    // and relying on an assignement side effect
-    if (oldDbSchema !== $dbSchemas[dbSchemasPath])
-        $dbSchemas = $dbSchemas;
-    refreshing = false;
+});
+export const refresh = () => {
+    colDefs.refetch();
+    dbSchemasPromise.refetch();
+};
+export function isLoading() {
+    return colDefs.loading || dbSchemasPromise.loading;
 }
 let replPanelSize = $state(36);
 const REPL_MIN_SIZE = 1.5;
@@ -72,34 +54,12 @@ let replResultData = $state(undefined);
 $effect(() => {
     hasReplResult = !!replResultData;
 });
-let cachedColDefs = {};
-let cachedLastRefreshCount = 0;
-async function getColDefs(tableKey) {
-    if (cachedLastRefreshCount !== refreshCount)
-        cachedColDefs = {};
-    cachedLastRefreshCount = refreshCount;
-    if (cachedColDefs[tableKey])
-        return cachedColDefs[tableKey];
-    if (!input)
-        return [];
-    try {
-        cachedColDefs = (await loadAllTablesMetaData($workspaceStore, input)) ?? cachedColDefs;
-        return cachedColDefs[tableKey];
-    }
-    catch (e) {
-        if (input?.type == 'ducklake')
-            throw 'Impossible that loadAllTablesMetaData fails for Ducklake';
-        // Query is not implemented for all dbs, need a fallback
-        const result = await loadTableMetaData(input, $workspaceStore, tableKey);
-        if (result)
-            cachedColDefs[tableKey] = result;
-        return result ?? [];
-    }
-}
 // Export for parent components
 export function clearReplResult() {
     replResultData = undefined;
 }
+let _dbManager = $state();
+export const dbManager = () => _dbManager;
 </script>
 
 <svelte:window
@@ -140,7 +100,7 @@ export function clearReplResult() {
 			<DbManager
 				dbSupportsSchemas={input?.type == 'database' && dbSupportsSchemas(input.resourceType)}
 				{dbSchema}
-				{getColDefs}
+				colDefs={colDefs.current}
 				dbTableOpsFactory={({ colDefs, tableKey }) =>
 					dbTableOpsWithPreviewScripts({
 						colDefs,
@@ -161,6 +121,7 @@ export function clearReplResult() {
 				bind:selectedTableKey
 				{multiSelectMode}
 				bind:selectedTables
+				bind:this={_dbManager}
 				{disabledTables}
 				features={getDbFeatures(input)}
 			/>

package/package/components/DBManagerContent.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type DBSchema } from '../stores';
 import { type Snippet } from 'svelte';
 import type { DbInput } from './dbTypes';
 import type { SelectedTable } from './DBManager.svelte';
@@ -5,7 +6,6 @@ interface Props {
     input?: DbInput;
     showRepl?: boolean;
     hasReplResult?: boolean;
-    isRefreshing?: boolean;
     selectedSchemaKey?: string | undefined;
     selectedTableKey?: string | undefined;
     dbSelector?: Snippet<[]>;
@@ -17,8 +17,42 @@ interface Props {
     disabledTables?: SelectedTable[];
 }
 declare const DBManagerContent: import("svelte").Component<Props, {
-    refresh: () => boolean;
+    refresh: () => void;
+    isLoading: () => boolean;
     clearReplResult: () => void;
-}, "selectedSchemaKey" | "selectedTableKey" | "selectedTables" | "hasReplResult" | "isRefreshing">;
+    dbManager: () => ({
+        $on?(type: string, callback: (e: any) => void): () => void;
+        $set?(props: Partial<{
+            dbType: import("./dbTypes").DbType;
+            dbSchema: DBSchema;
+            dbSupportsSchemas: boolean;
+            colDefs: Record<string, import("./apps/components/display/dbtable/utils").ColumnDef[]> | undefined;
+            dbTableOpsFactory: (params: {
+                colDefs: import("./apps/components/display/dbtable/utils").ColumnDef[];
+                tableKey: string;
+            }) => import("./dbOps").IDbTableOps;
+            dbSchemaOps: import("./dbOps").IDbSchemaOps;
+            refresh?: () => void;
+            initialSchemaKey?: string;
+            initialTableKey?: string;
+            selectedSchemaKey?: string | undefined;
+            selectedTableKey?: string | undefined;
+            dbSelector?: Snippet<[]>;
+            multiSelectMode?: boolean;
+            selectedTables?: SelectedTable[];
+            disabledTables?: SelectedTable[];
+            features?: import("./apps/components/display/dbtable/dbFeatures").DbFeatures;
+        }>): void;
+    } & {
+        dbTable: () => ({
+            $on?(type: string, callback: (e: any) => void): () => void;
+            $set?(props: Partial<{
+                dbTableOps: import("./dbOps").IDbTableOps;
+            }>): void;
+        } & {
+            refresh: () => number;
+        }) | undefined;
+    }) | undefined;
+}, "selectedSchemaKey" | "selectedTableKey" | "selectedTables" | "hasReplResult">;
 type DBManagerContent = ReturnType<typeof DBManagerContent>;
 export default DBManagerContent;

package/package/components/DBManagerDrawer.svelte

@@ -68,7 +68,6 @@ $effect(() => {
 });
 let dbManagerContent = $state();
 let hasReplResult = $state(false);
-let isRefreshing = $state(false);
 </script>
 
 <svelte:window bind:innerWidth={windowWidth} />
@@ -91,15 +90,11 @@ let isRefreshing = $state(false);
 		}}
 		CloseIcon={hasReplResult ? ArrowLeft : undefined}
 		noPadding
+		id="db-manager-drawer"
 	>
 		{#if effectiveInput && $workspaceStore}
 			{#key selectedDatatable}
-				<DBManagerContent
-					bind:this={dbManagerContent}
-					input={effectiveInput}
-					bind:hasReplResult
-					bind:isRefreshing
-				>
+				<DBManagerContent bind:this={dbManagerContent} input={effectiveInput} bind:hasReplResult>
 					{#snippet dbSelector()}
 						{#if isDatatableInput}
 							{#if datatables.loading}
@@ -123,8 +118,11 @@ let isRefreshing = $state(false);
 		{/if}
 		{#snippet actions()}
 			<Button
-				loading={isRefreshing}
-				on:click={() => dbManagerContent?.refresh()}
+				loading={dbManagerContent?.isLoading() ?? false}
+				on:click={() => {
+					dbManagerContent?.refresh()
+					dbManagerContent?.dbManager()?.dbTable()?.refresh()
+				}}
 				startIcon={{ icon: RefreshCcw }}
 				size="xs"
 				color="light"

package/package/components/DBTable.svelte

@@ -37,7 +37,7 @@ let datasource = {
 };
 let rowCount = $state(0);
 let refreshCount = $state(0);
-const refresh = () => (refreshCount += 1);
+export const refresh = () => (refreshCount += 1);
 $effect(() => eGui && untrack(() => mountGrid()));
 function mountGrid() {
     if (eGui && !api) {

package/package/components/DBTable.svelte.d.ts

@@ -5,6 +5,8 @@ import './apps/components/display/table/theme/windmill-theme.css';
 type Props = {
     dbTableOps: IDbTableOps;
 };
-declare const DBTable: import("svelte").Component<Props, {}, "">;
+declare const DBTable: import("svelte").Component<Props, {
+    refresh: () => number;
+}, "">;
 type DBTable = ReturnType<typeof DBTable>;
 export default DBTable;

package/package/components/DBTableEditor.svelte

@@ -28,15 +28,14 @@ function validate(values, dbSchema) {
 }
 </script>
 
-<script lang="ts">import { ArrowRight, ClipboardCopy, Info, Plus, Settings, X } from 'lucide-svelte';
+<script lang="ts">import { ArrowRight, ClipboardCopy, Plus, Settings, X } from 'lucide-svelte';
 import { Button } from './common';
 import { Cell } from './table';
 import DataTable from './table/DataTable.svelte';
 import Head from './table/Head.svelte';
-import { datatypeHasLength, dbSupportsSchemas } from './apps/components/display/dbtable/utils';
+import { datatypeHasLength } from './apps/components/display/dbtable/utils';
 import { DB_TYPES } from '../consts';
 import Popover from './meltComponents/Popover.svelte';
-import Tooltip from './meltComponents/Tooltip.svelte';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import { sendUserToast } from '../toast';
 import { copyToClipboard } from '../utils';
@@ -50,6 +49,7 @@ import Portal from './Portal.svelte';
 import { Debounced } from 'runed';
 import { datatypeDefaultLength } from './apps/components/display/dbtable/tableEditor';
 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 defaultColumnType = {
@@ -72,8 +72,7 @@ function addColumn({ name, primaryKey }) {
         ...(datatypeHasLength(defaultColumnType) && {
             datatype_length: datatypeDefaultLength(defaultColumnType)
         }),
-        ...(primaryKey && { primaryKey }),
-        ...(!features?.defaultToNotNull && { nullable: true })
+        ...(primaryKey && { primaryKey })
     });
 }
 if (!initialValues) {
@@ -98,7 +97,7 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 			/>
 		</label>
 
-		<div class="flex flex-col">
+		<div class="flex flex-col" id="columns-section">
 			<!-- svelte-ignore a11y_label_has_associated_control -->
 			<label>Columns</label>
 			<DataTable>
@@ -162,11 +161,19 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 							</Cell>
 							<Cell last class="flex items-center mt-1.5">
 								{#if features?.primaryKeys}
-									<input type="checkbox" class="!w-4 !h-4" bind:checked={column.primaryKey} />
+									<input
+										type="checkbox"
+										class="!w-4 !h-4 primary-key-checkbox"
+										bind:checked={column.primaryKey}
+									/>
 								{/if}
-								<Popover class="ml-8" contentClasses="py-3 px-5 flex flex-col gap-6">
+								<Popover
+									class="ml-8"
+									contentClasses="py-3 px-5 flex flex-col gap-6"
+									enableFlyTransition
+								>
 									{#snippet trigger()}
-										<Settings size={18} />
+										<Settings size={18} class="settings-menu-btn" />
 									{/snippet}
 									{#snippet content()}
 										{#if datatypeHasLength(column.datatype)}
@@ -176,27 +183,26 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 											</label>
 										{/if}
 										{#if features?.defaultValues}
-											<label class="text-xs">
-												<span class="flex gap-1 mb-1">
-													Default value
-													<Tooltip>
-														<Info size={14} />
-														{#snippet text()}
-															Surround your expressions with curly brackets:
-															<code>
-																{'{NOW()}'}
-															</code>.
-															<br />
-															By default, it will be parsed as a literal
-														{/snippet}
-													</Tooltip>
-												</span>
-												<input type="text" placeholder="NULL" bind:value={column.defaultValue} />
-											</label>
+											<Label
+												class="flex gap-1 mb-1"
+												label="Default Value"
+												tooltip="Parsed as literal by default. Use curly brackets for expressions (e.g. {'{NOW()}'} )."
+											>
+												<input
+													class="default-value"
+													type="text"
+													placeholder="NULL"
+													bind:value={column.defaultValue}
+												/>
+											</Label>
 										{/if}
 										{#if !column.primaryKey}
 											<label class="flex gap-2 items-center text-xs">
-												<input type="checkbox" class="!w-4 !h-4" bind:checked={column.nullable} />
+												<input
+													type="checkbox"
+													class="nullable-checkbox !w-4 !h-4"
+													bind:checked={column.nullable}
+												/>
 												Nullable
 											</label>
 										{/if}
@@ -206,7 +212,7 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 									color="light"
 									startIcon={{ icon: X }}
 									wrapperClasses="w-fit ml-2"
-									btnClasses="p-0"
+									btnClasses="delete-column-btn p-0"
 									on:click={() => values.columns.splice(i, 1)}
 								/>
 							</Cell>
@@ -228,7 +234,7 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 			</DataTable>
 		</div>
 		{#if features?.foreignKeys}
-			<div class="flex flex-col">
+			<div class="flex flex-col" id="foreign-keys-section">
 				<!-- svelte-ignore a11y_label_has_associated_control -->
 				<label>Foreign Keys</label>
 				<DataTable>
@@ -244,14 +250,15 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 							<tr>
 								<Cell first class="flex">
 									<Select
-										inputClass={twMerge('!w-48')}
+										inputClass={twMerge('fk-table-select !w-48')}
 										error={fkErrors?.emptyTarget}
 										placeholder=""
 										bind:value={foreignKey.targetTable}
 										items={getFlatTableNamesFromSchema(dbSchema).map((o) => ({
 											value: o,
 											label:
-												(currentSchema && o.startsWith(currentSchema)) || !dbSupportsSchemas(dbType)
+												!features?.schemas ||
+												(currentSchema && o.toLowerCase().startsWith(currentSchema.toLowerCase()))
 													? o.split('.')[1]
 													: o
 										}))}
@@ -266,7 +273,7 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 												 		 from x-overflowing -->
 													<div class="grow h-[2rem] relative">
 														<Select
-															class="!absolute inset-0"
+															class="fk-source-col-select !absolute inset-0"
 															error={fkErrors?.nonExistingSourceColumns.includes(
 																column.sourceColumn
 															)}
@@ -281,7 +288,7 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 													<ArrowRight size={16} class="h-fit shrink-0" />
 													<div class="grow h-[2rem] relative">
 														<Select
-															class="!absolute inset-0"
+															class="fk-target-col-select !absolute inset-0"
 															error={fkErrors?.nonExistingTargetColumns.includes(
 																column.targetColumn
 															)}
@@ -297,26 +304,35 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 													</div>
 												</div>
 												<div class="ml-auto flex">
-													{#if columnIndex === 0}
-														<Popover contentClasses="py-3 px-5 w-52 flex flex-col gap-6">
+													{#if columnIndex === 0 && features.enforcedForeignKeys}
+														<Popover
+															contentClasses="py-3 px-5 w-52 flex flex-col gap-4"
+															enableFlyTransition
+														>
 															{#snippet trigger()}
-																<Settings size={18} />
+																<Settings class="fk-settings-btn" size={18} />
 															{/snippet}
 															{#snippet content()}
-																<span>
-																	ON DELETE <select bind:value={foreignKey.onDelete}>
-																		<option value="NO ACTION" selected>NO ACTION</option>
-																		<option value="CASCADE" selected>CASCADE</option>
-																		<option value="SET NULL" selected>SET NULL</option>
+																<Label label="On delete">
+																	<select
+																		class="fk-on-delete-select"
+																		bind:value={foreignKey.onDelete}
+																	>
+																		<option value="NO ACTION" selected>No action</option>
+																		<option value="CASCADE" selected>Cascade</option>
+																		<option value="SET NULL" selected>Set null</option>
 																	</select>
-																</span>
-																<span>
-																	ON UPDATE <select bind:value={foreignKey.onUpdate}>
-																		<option value="NO ACTION" selected>NO ACTION</option>
-																		<option value="CASCADE" selected>CASCADE</option>
-																		<option value="SET NULL" selected>SET NULL</option>
+																</Label>
+																<Label label="On update">
+																	<select
+																		class="fk-on-update-select"
+																		bind:value={foreignKey.onUpdate}
+																	>
+																		<option value="NO ACTION" selected>No action</option>
+																		<option value="CASCADE" selected>Cascade</option>
+																		<option value="SET NULL" selected>Set null</option>
 																	</select>
-																</span>
+																</Label>
 															{/snippet}
 														</Popover>
 													{/if}
@@ -324,7 +340,7 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 														color="light"
 														startIcon={{ icon: X }}
 														wrapperClasses="w-fit ml-2"
-														btnClasses="p-0"
+														btnClasses="fk-delete-btn p-0"
 														on:click={foreignKey.columns.length > 1
 															? () => foreignKey.columns.splice(columnIndex, 1)
 															: () => values.foreignKeys.splice(foreignKeyIndex, 1)}
@@ -394,6 +410,7 @@ let btnProps = new Debounced(() => computeBtnProps({ values }), 500);
 
 <Portal>
 	<ConfirmationModal
+		id="db-table-editor-confirmation-modal"
 		{...askingForConfirmation ?? { confirmationText: '', title: '' }}
 		on:canceled={() => (askingForConfirmation = undefined)}
 		on:confirmed={askingForConfirmation?.onConfirm ?? (() => {})}

package/package/components/DBTableEditor.svelte.d.ts

@@ -1,7 +1,7 @@
-import { type DbFeatures } from './apps/components/display/dbtable/utils';
 import { type DBSchema } from '../stores';
 import type { DbType } from './dbTypes';
 import { type TableEditorValues } from './apps/components/display/dbtable/tableEditor';
+import type { DbFeatures } from './apps/components/display/dbtable/dbFeatures';
 type Props = {
     dbType: DbType;
     dbSchema?: DBSchema;

package/package/components/DateInput.svelte

@@ -1,33 +1,27 @@
 <script lang="ts">import { createEventDispatcher } from 'svelte';
 import { format, isValid, parse } from 'date-fns';
-import { sendUserToast } from '../toast';
-export let value = undefined;
-export let autofocus = false;
-export let minDate = undefined;
-export let maxDate = undefined;
-export let dateFormat = 'dd-MM-yyyy';
-export let disabled = false;
+import { createBubbler } from 'svelte/legacy';
+const bubble = createBubbler();
+let { value = $bindable(undefined), autofocus = false, minDate = undefined, maxDate = undefined, dateFormat = 'dd-MM-yyyy', disabled = false } = $props();
 const defaultDateFormat = 'dd-MM-yyyy';
 const defaultHtmlDateFormat = 'yyyy-MM-dd';
-let date = computeDate(value);
+// Ensure we always have a valid format (prop can be undefined or empty string)
+function getFormat() {
+    return dateFormat && dateFormat.length > 0 ? dateFormat : defaultDateFormat;
+}
 const dispatch = createEventDispatcher();
-function computeDate(value) {
-    if (dateFormat === undefined) {
-        dateFormat = defaultDateFormat;
-    }
-    if (value && value.length > 0) {
+function computeDate(v, formatStr) {
+    if (v && v.length > 0) {
         try {
-            let date = parse(value, dateFormat, new Date());
-            if (date.toString() === 'Invalid Date') {
+            let parsedDate = parse(v, formatStr, new Date());
+            if (parsedDate.toString() === 'Invalid Date') {
                 console.debug('falling back to default html date format');
-                date = parse(value, defaultHtmlDateFormat, new Date());
+                parsedDate = parse(v, defaultHtmlDateFormat, new Date());
             }
-            const res = format(date, defaultHtmlDateFormat);
-            return res;
+            return format(parsedDate, defaultHtmlDateFormat);
         }
         catch (error) {
-            sendUserToast(`Failed to parse date: ${value} with format ${dateFormat} and ${defaultHtmlDateFormat}`, true);
-            console.error(`Failed to parse date: ${value}`, error);
+            console.error(`Failed to parse date: ${v} with format ${formatStr}`, error);
             return undefined;
         }
     }
@@ -35,42 +29,42 @@ function computeDate(value) {
         return undefined;
     }
 }
+let date = $derived(computeDate(value, getFormat()));
 function updateValue(newDate) {
     if (newDate && isValid(new Date(newDate))) {
-        if (dateFormat === undefined) {
-            dateFormat = defaultDateFormat;
-        }
         try {
-            let dateFromValue = newDate ? new Date(newDate + 'T00:00:00') : undefined;
-            if (dateFromValue === undefined) {
-                return;
-            }
-            const parsedDate = format(dateFromValue, dateFormat);
+            const dateFromValue = new Date(newDate + 'T00:00:00');
+            const parsedDate = format(dateFromValue, getFormat());
             value = parsedDate;
             dispatch('change', value);
         }
         catch (error) {
             console.error('Failed to parse date:', error);
-            return;
         }
     }
 }
 let randomId = 'datetarget-' + Math.random().toString(36).substring(7);
 </script>
 
-<div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
-	<!-- svelte-ignore a11y-autofocus -->
+<div
+	class="flex flex-row gap-1 items-center w-full"
+	id={randomId}
+	onpointerdown={bubble('pointerdown')}
+	onfocus={bubble('focus')}
+>
+	<!-- svelte-ignore a11y_autofocus -->
 	<input
 		{disabled}
 		type="date"
-		bind:value={date}
+		value={date}
 		{autofocus}
 		class="!w-full app-editor-input"
 		min={minDate}
 		max={maxDate}
-		on:change={() => {
-			if (date) {
-				updateValue(date)
+		onchange={(e) => {
+			const newDate = e.currentTarget.value
+			if (newDate) {
+				updateValue(newDate)
 			} else {
 				value = null
 				dispatch('change', value)