windmill-components 1.532.0 → 1.542.4

package/package/components/StringTypeNarrowing.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import { computeKind } from '../utils';
+<script lang="ts">import { computeKind } from '../utils';
 import Label from './Label.svelte';
 import ResourceTypePicker from './ResourceTypePicker.svelte';
 import Toggle from './Toggle.svelte';
@@ -21,6 +20,7 @@ const FORMATS = [
     'uri',
     'uuid',
     'ipv4',
+    'ipv6',
     'yaml',
     'sql',
     // 'time',
@@ -38,21 +38,16 @@ const FIELD_SETTINGS = [
     ['Format', 'format'],
     ['Pattern', 'pattern']
 ];
-run(() => {
+$effect(() => {
     format =
         kind == 'resource' ? (resource != undefined ? `resource-${resource}` : 'resource') : format;
 });
-run(() => {
+$effect(() => {
     pattern = patternStr == '' ? undefined : patternStr;
 });
-run(() => {
+$effect(() => {
     contentEncoding = kind == 'base64' ? 'base64' : undefined;
 });
-run(() => {
-    if (format == 'email') {
-        pattern = '^[\\w-+.]+@([\\w-]+\\.)+[\\w-]{2,63}$';
-    }
-});
 function add() {
     if (enumLabels === undefined) {
         enumLabels = {};

package/package/components/TemplateEditor.svelte

@@ -1,19 +1,5 @@
 <script module>
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
-
-	languages.typescript.javascriptDefaults.setCompilerOptions({
-		target: languages.typescript.ScriptTarget.Latest,
-		allowNonTsExtensions: true,
-		noSemanticValidation: false,
-		noLib: true,
-		moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
-	})
-	languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-		noSemanticValidation: false,
-		noSyntaxValidation: false,
-		noSuggestionDiagnostics: false,
-		diagnosticCodesToIgnore: [1108]
-	})
 </script>
 
 <script lang="ts">import { BROWSER } from 'esm-env';
@@ -28,6 +14,7 @@ import { writable } from 'svelte/store';
 import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
+import { setMonacoJsonOptions } from './monacoLanguagesOptions';
 export const conf = {
     wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
     comments: {
@@ -381,9 +368,8 @@ let initialized = false;
 let jsLoader = undefined;
 let timeoutModel = undefined;
 async function loadMonaco() {
-    console.log('init template');
+    setMonacoJsonOptions();
     await initializeVscode('templateEditor');
-    console.log('initialized');
     initialized = true;
     languages.register({ id: 'template' });
     // Register a tokens provider for the language

package/package/components/TimeAgo.svelte

@@ -4,8 +4,8 @@ import { onDestroy, onMount } from 'svelte';
 export let date;
 export let agoOnlyIfRecent = false;
 export let noDate = false;
+export let isRecent = true;
 let computedTimeAgo = undefined;
-let isRecent = true;
 let interval;
 $: date && computeDate();
 onMount(() => {

package/package/components/TimeAgo.svelte.d.ts

@@ -15,6 +15,7 @@ declare const TimeAgo: $$__sveltets_2_IsomorphicComponent<{
     date: string;
     agoOnlyIfRecent?: boolean;
     noDate?: boolean;
+    isRecent?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/package/components/Toggle.svelte

@@ -26,6 +26,7 @@ export let textDisabled = false;
 	class="{$$props.class || ''} z-auto flex flex-row items-center duration-50 {disabled
 		? 'grayscale opacity-50'
 		: 'cursor-pointer'}"
+	title={options?.title}
 >
 	{#if Boolean(options?.left)}
 		<span
@@ -92,7 +93,7 @@ export let textDisabled = false;
 			class={twMerge(
 				'ml-2 font-medium duration-50 select-none',
 				bothOptions || textDisabled ? (checked ? 'text-primary' : 'text-disabled') : 'text-primary',
-				size === 'xs' || size === '2sm' ? 'text-xs' : 'text-sm',
+				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-xs' : 'text-sm',
 				textClass
 			)}
 			style={textStyle}

package/package/components/Toggle.svelte.d.ts

@@ -19,6 +19,7 @@ declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
         right?: string;
         rightTooltip?: string;
         rightDocumentationLink?: string;
+        title?: string;
     } | undefined;
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
@@ -33,7 +34,7 @@ declare const Toggle: $$__sveltets_2_IsomorphicComponent<{
     size?: "sm" | "xs" | "2xs" | "2sm" | undefined;
     textDisabled?: boolean | undefined;
 }, {
-    click: MouseEvent;
+    click: PointerEvent;
     focus: FocusEvent;
     change: CustomEvent<boolean>;
 } & {

package/package/components/WorkerRepl.svelte

@@ -37,7 +37,7 @@ let homeDirectory = '~';
 let pendingsJobs = $state([]);
 let loadingPendingJobs = $state(false);
 let isCancelingJob = $state(false);
-let prompt = $derived(`$-${working_directory === '/' ? '/' : working_directory.split('/').at(-1)} `);
+let prompt = $derived(`$-${working_directory === '/' ? '/' : working_directory.split('/').pop()} `);
 let codeObj = $state(undefined);
 function getNewWorkingDirectoryPath(currentDir, newPath) {
     if (newPath.startsWith('/') || newPath.startsWith('~')) {

package/package/components/apps/components/display/AppNavbarItem.svelte

@@ -9,6 +9,7 @@ import { loadIcon } from '../icon';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import { twMerge } from 'tailwind-merge';
 import ResolveNavbarItemPath from './ResolveNavbarItemPath.svelte';
+import { urlParamsToObject } from '../../../../utils';
 let { navbarItem, id, borderColor = undefined, index, output = $bindable(), orientation = undefined } = $props();
 let icon = $state();
 async function handleIcon() {
@@ -47,7 +48,7 @@ function getButtonProps(resolvedPath) {
                 const queryParams = url.search;
                 const hash = url.hash;
                 replaceStateFn?.(`${window.location.pathname}${queryParams}${hash}`);
-                $worldStore.outputsById['ctx'].query.set(Object.fromEntries(new URLSearchParams(queryParams).entries()));
+                $worldStore.outputsById['ctx'].query.set(urlParamsToObject(new URLSearchParams(queryParams)));
                 $worldStore.outputsById['ctx'].hash.set(hash.substring(1));
                 $selected = resolvedPath === extractPathDetails() ? resolvedPath : undefined;
             },

package/package/components/apps/components/display/table/AppAggridTable.svelte

@@ -17,7 +17,7 @@ import { twMerge } from 'tailwind-merge';
 import { deepCloneWithFunctions, initCss } from '../../../utils';
 import ResolveStyle from '../../helpers/ResolveStyle.svelte';
 import AppAggridTableActions from './AppAggridTableActions.svelte';
-import { cellRendererFactory, defaultCellRenderer } from './utils';
+import { cellRendererFactory, transformColumnDefs } from './utils';
 import Popover from '../../../../Popover.svelte';
 import { Button } from '../../../../common';
 import InputValue from '../../helpers/InputValue.svelte';
@@ -217,6 +217,12 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
             taComponent.props.rowIndex = params.node.rowIndex ?? 0;
             taComponent.props.row = params.data;
             taComponent.props.p = params;
+            const nextActions = computedOrder
+                ? computedOrder
+                    .map((key) => actions?.find((a) => a.id === key))
+                    .filter(Boolean)
+                : actions;
+            taComponent.props.actions = nextActions;
         }
     };
 });
@@ -229,31 +235,21 @@ function mountGrid() {
     // console.log(resolvedConfig?.extraConfig)
     if (eGui) {
         try {
-            let columnDefs = Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
-                ? [...resolvedConfig?.columnDefs] // Clone to avoid direct mutation
-                : [];
-            // Add the action column if actions are defined
-            if (actions && actions.length > 0) {
-                columnDefs.push({
-                    headerName: resolvedConfig?.customActionsHeader
-                        ? resolvedConfig?.customActionsHeader
-                        : 'Actions',
-                    cellRenderer: tableActionsFactory,
-                    autoHeight: true,
-                    cellStyle: { textAlign: 'center' },
-                    cellClass: 'grid-cell-centered',
-                    ...(!resolvedConfig?.wrapActions ? { minWidth: 130 * actions?.length } : {})
-                });
-            }
+            const agColumnDefs = transformColumnDefs({
+                columnDefs: Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
+                    ? [...resolvedConfig?.columnDefs]
+                    : [],
+                actions,
+                customActionsHeader: resolvedConfig?.customActionsHeader,
+                wrapActions: resolvedConfig?.wrapActions,
+                tableActionsFactory,
+                onInvalidColumnDefs: (errors) => {
+                    sendUserToast(`Invalid columnDefs: ${errors.join('\n')}`, true);
+                }
+            });
             createGrid(eGui, {
                 rowData: value,
-                columnDefs: columnDefs.map((fields) => {
-                    let cr = defaultCellRenderer(fields.cellRendererType);
-                    return {
-                        ...fields,
-                        ...(cr ? { cellRenderer: cr } : {})
-                    };
-                }),
+                columnDefs: agColumnDefs,
                 pagination: resolvedConfig?.pagination,
                 paginationAutoPageSize: resolvedConfig?.pagination,
                 suppressPaginationPanel: true,
@@ -377,31 +373,21 @@ function updateValue() {
 }
 function updateOptions() {
     try {
-        const columnDefs = Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
-            ? [...resolvedConfig?.columnDefs] // Clone to avoid direct mutation
-            : [];
-        // Add the action column if actions are defined
-        if (actions && actions.length > 0) {
-            columnDefs.push({
-                headerName: resolvedConfig?.customActionsHeader
-                    ? resolvedConfig?.customActionsHeader
-                    : 'Actions',
-                cellRenderer: tableActionsFactory,
-                autoHeight: true,
-                cellStyle: { textAlign: 'center' },
-                cellClass: 'grid-cell-centered',
-                ...(!resolvedConfig?.wrapActions ? { minWidth: 130 * actions?.length } : {})
-            });
-        }
+        const agColumnDefs = transformColumnDefs({
+            columnDefs: Array.isArray(resolvedConfig?.columnDefs) && resolvedConfig.columnDefs.every(isObject)
+                ? [...resolvedConfig?.columnDefs]
+                : [],
+            actions,
+            customActionsHeader: resolvedConfig?.customActionsHeader,
+            wrapActions: resolvedConfig?.wrapActions,
+            tableActionsFactory,
+            onInvalidColumnDefs: (errors) => {
+                sendUserToast(`Invalid columnDefs: ${errors.join('\n')}`, true);
+            }
+        });
         api?.updateGridOptions({
             rowData: value,
-            columnDefs: columnDefs.map((fields) => {
-                let cr = defaultCellRenderer(fields.cellRendererType);
-                return {
-                    ...fields,
-                    ...(cr ? { cellRenderer: cr } : {})
-                };
-            }),
+            columnDefs: agColumnDefs,
             pagination: resolvedConfig?.pagination,
             paginationAutoPageSize: resolvedConfig?.pagination,
             suppressPaginationPanel: true,
@@ -421,6 +407,10 @@ function updateOptions() {
                 ...resolvedConfig?.extraConfig?.['defaultColDef']
             }
         });
+        // Force refresh to re-render cell renderers after actions change
+        api?.refreshCells({ force: true });
+        // Force complete redraw to clear stale inline styles
+        api?.redrawRows();
     }
     catch (e) {
         console.error(e);
@@ -507,7 +497,13 @@ $effect(() => {
 	bind:loading
 	hideRefreshButton={true}
 >
-	<SyncColumnDefs {id} columnDefs={resolvedConfig.columnDefs} {result}>
+	<SyncColumnDefs
+		{id}
+		columnDefs={resolvedConfig.columnDefs}
+		{result}
+		actionsPresent={Array.isArray(actions) && actions.length > 0}
+		customActionsHeader={resolvedConfig?.customActionsHeader}
+	>
 		<div
 			class={twMerge(
 				'flex flex-col h-full component-wrapper divide-y',

package/package/components/apps/components/display/table/SyncColumnDefs.svelte

@@ -5,37 +5,119 @@ import { RefreshCw } from 'lucide-svelte';
 import Badge from '../../../../common/badge/Badge.svelte';
 import Alert from '../../../../common/alert/Alert.svelte';
 import { isObject } from '../../../../../utils';
-let { id, columnDefs = [], result = [], allowColumnDefsActions = true, children } = $props();
+let { id, columnDefs = [], result = [], allowColumnDefsActions = true, children, actionsPresent = false, customActionsHeader = undefined } = $props();
 const { app, mode, selectedComponent } = getContext('AppViewerContext');
+let syncInProgress = false;
+function hasActionsPlaceholder(cols) {
+    if (!Array.isArray(cols))
+        return false;
+    return cols.findIndex((c) => c?._isActionsColumn === true) > -1;
+}
+function addActionsPlaceholder(cols) {
+    const hdr = customActionsHeader ?? 'Actions';
+    const placeholder = {
+        field: '__actions__',
+        _isActionsColumn: true,
+        headerName: hdr,
+        flex: 1
+    };
+    if (!Array.isArray(cols))
+        return [placeholder];
+    return [...cols, placeholder];
+}
+function removeActionsPlaceholder(cols) {
+    if (!Array.isArray(cols))
+        return [];
+    return cols.filter((c) => c?._isActionsColumn !== true);
+}
+async function ensureActionsColumn() {
+    // Only act in editor (DND) mode
+    if ($mode !== 'dnd')
+        return;
+    const gridItem = findGridItem($app, id);
+    if (!gridItem)
+        return;
+    // Type the configuration more safely
+    const rawConf = gridItem.data.configuration?.columnDefs;
+    if (!rawConf)
+        return;
+    // Type guard for configuration structure
+    const conf = rawConf;
+    if (!conf.type || (conf.type !== 'static' && conf.type !== 'evalv2'))
+        return;
+    let currentColumns;
+    if (conf.type === 'static') {
+        currentColumns = Array.isArray(conf.value) ? conf.value : [];
+    }
+    else if (conf.type === 'evalv2') {
+        try {
+            const parsed = JSON.parse(conf.expr ?? '[]');
+            currentColumns = Array.isArray(parsed) ? parsed : [];
+        }
+        catch (e) {
+            console.warn('Failed to parse columnDefs expression:', e);
+            currentColumns = [];
+        }
+    }
+    const hasPlaceholder = hasActionsPlaceholder(currentColumns);
+    // Auto-sync logic: add missing actions column, remove when actions gone
+    const needsAdd = actionsPresent && !hasPlaceholder;
+    const needsRemove = !actionsPresent && hasPlaceholder;
+    if (!needsAdd && !needsRemove)
+        return;
+    let nextColumns = currentColumns || [];
+    if (needsAdd)
+        nextColumns = addActionsPlaceholder(nextColumns);
+    if (needsRemove)
+        nextColumns = removeActionsPlaceholder(nextColumns);
+    // Update configuration with proper typing
+    if (conf.type === 'static') {
+        conf.value = nextColumns;
+    }
+    else if (conf.type === 'evalv2') {
+        conf.expr = JSON.stringify(nextColumns);
+    }
+    await updateConfiguration();
+}
+$effect(() => {
+    const shouldSync = actionsPresent !== undefined || columnDefs?.length !== undefined;
+    if (shouldSync && !syncInProgress) {
+        syncInProgress = true;
+        ensureActionsColumn().finally(() => {
+            syncInProgress = false;
+        });
+    }
+});
 async function syncColumns() {
-    let gridItem = findGridItem($app, id);
+    const gridItem = findGridItem($app, id);
     if (gridItem && result) {
         const keys = Object.keys(result[0] ?? {}) ?? [];
-        if (gridItem.data.configuration.columnDefs.type === 'static') {
-            gridItem.data.configuration.columnDefs.value = keys.map((key) => ({
-                field: key,
-                headerName: key,
-                flex: 1
-            }));
+        const conf = gridItem.data.configuration.columnDefs;
+        const newColumns = keys.map((key) => ({
+            field: key,
+            headerName: key,
+            flex: 1
+        }));
+        if (conf.type === 'static') {
+            conf.value = newColumns;
         }
-        else if (gridItem.data.configuration.columnDefs.type === 'evalv2') {
-            gridItem.data.configuration.columnDefs.expr = JSON.stringify(keys.map((key, index) => ({
-                field: key,
-                headerName: key,
-                flex: 1
-            })));
+        else if (conf.type === 'evalv2') {
+            conf.expr = JSON.stringify(newColumns);
         }
         await updateConfiguration();
     }
 }
 async function setEmptyColumns() {
-    let gridItem = findGridItem($app, id);
-    if (gridItem && gridItem.data.configuration.columnDefs.type === 'static') {
-        gridItem.data.configuration.columnDefs.value = [];
+    const gridItem = findGridItem($app, id);
+    if (!gridItem)
+        return;
+    const conf = gridItem.data.configuration.columnDefs;
+    if (conf.type === 'static') {
+        conf.value = [];
         await updateConfiguration();
     }
-    else if (gridItem && gridItem.data.configuration.columnDefs.type === 'evalv2') {
-        gridItem.data.configuration.columnDefs.expr = '[]';
+    else if (conf.type === 'evalv2') {
+        conf.expr = '[]';
         await updateConfiguration();
     }
 }

package/package/components/apps/components/display/table/SyncColumnDefs.svelte.d.ts

@@ -1,9 +1,12 @@
+import type { WindmillColumnDef } from './utils';
 interface Props {
     id: string;
-    columnDefs?: Array<any>;
-    result?: Array<any> | undefined;
+    columnDefs?: WindmillColumnDef[];
+    result?: Array<Record<string, any>> | undefined;
     allowColumnDefsActions?: boolean;
     children?: import('svelte').Snippet;
+    actionsPresent?: boolean;
+    customActionsHeader?: string | undefined;
 }
 declare const SyncColumnDefs: import("svelte").Component<Props, {}, "">;
 type SyncColumnDefs = ReturnType<typeof SyncColumnDefs>;

package/package/components/apps/components/display/table/utils.js

@@ -76,6 +76,12 @@ export function transformColumnDefs({ columnDefs, actions, customActionsHeader,
         return [];
     }
     let r = columnDefs?.filter((x) => x && !x.ignored) ?? [];
+    // Allow an explicit "actions" placeholder in columnDefs so users can manage it like any column.
+    // When present, replace it with the computed actions colDef. When not present but actions exist,
+    // we will append the actions column after validation below.
+    const actionsIndex = r.findIndex((c) => {
+        return c?._isActionsColumn === true;
+    });
     if (onDelete) {
         r.push({
             field: 'delete',
@@ -118,15 +124,40 @@ export function transformColumnDefs({ columnDefs, actions, customActionsHeader,
         });
     }
     if (actions?.length) {
-        r.push({
-            headerName: customActionsHeader ?? 'Actions',
+        const computedActionsCol = {
+            field: '__actions__',
+            _isActionsColumn: true,
+            headerName: 'Actions',
             cellRenderer: tableActionsFactory,
             autoHeight: true,
             cellStyle: { textAlign: 'center' },
             cellClass: 'grid-cell-centered',
-            lockPosition: 'right',
-            ...(!wrapActions ? { minWidth: 130 * actions?.length } : {})
-        });
+            // Only lock position to right if user hasn't explicitly positioned the actions column
+            ...(actionsIndex === -1 ? { lockPosition: 'right' } : {}),
+            // Set default minWidth based on number of actions (if not wrapping)
+            ...(!wrapActions ? { minWidth: 130 * actions?.length } : {}),
+            // Respect user-specified overrides when placeholder present (these should override defaults)
+            ...(actionsIndex > -1
+                ? {
+                    // keep width/pin/flex/align/hide from placeholder when provided
+                    ...(['width', 'minWidth', 'maxWidth', 'flex', 'pinned', 'headerName', 'cellStyle', 'cellClass', 'autoHeight', 'hide']
+                        .reduce((acc, key) => {
+                        if (r[actionsIndex] && r[actionsIndex][key] !== undefined)
+                            acc[key] = r[actionsIndex][key];
+                        return acc;
+                    }, {}))
+                }
+                : {}),
+            ...(customActionsHeader?.trim() ? { headerName: customActionsHeader } : {})
+        };
+        if (actionsIndex > -1) {
+            // Replace the placeholder with computed column
+            r.splice(actionsIndex, 1, computedActionsCol);
+        }
+        else {
+            // Backward compatible: append if not explicitly placed
+            r.push(computedActionsCol);
+        }
     }
     return r.map((fields) => {
         let cr = defaultCellRenderer(fields.cellRendererType);

package/package/components/apps/components/inputs/currency/CurrencyInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import DarkModeObserver from '../../../../DarkModeObserver.svelte';
-import { untrack } from 'svelte';
+import { onMount, untrack } from 'svelte';
 /* Forked from MIT LICENSE
 https://raw.githubusercontent.com/Canutin/svelte-currency-input/main/src/lib/CurrencyInput.svelte
 */
@@ -14,7 +14,12 @@ const DEFAULT_CLASS_FORMATTED = 'currencyInput__formatted';
 const DEFAULT_CLASS_FORMATTED_POSITIVE = 'currencyInput__formatted--positive';
 const DEFAULT_CLASS_FORMATTED_NEGATIVE = 'currencyInput__formatted--negative';
 const DEFAULT_CLASS_FORMATTED_ZERO = 'currencyInput__formatted--zero';
-let { value = $bindable(DEFAULT_VALUE), locale = DEFAULT_LOCALE, currency = DEFAULT_CURRENCY, name = DEFAULT_NAME, required = false, disabled = false, placeholder = DEFAULT_VALUE, isNegativeAllowed = true, fractionDigits = DEFAULT_FRACTION_DIGITS, inputClasses = null, noColor = false, style = '' } = $props();
+let { value = $bindable(), locale = DEFAULT_LOCALE, currency = DEFAULT_CURRENCY, name = DEFAULT_NAME, required = false, disabled = false, placeholder = DEFAULT_VALUE, isNegativeAllowed = true, fractionDigits = DEFAULT_FRACTION_DIGITS, inputClasses = null, noColor = false, style = '' } = $props();
+onMount(() => {
+    if (value == undefined) {
+        value = DEFAULT_VALUE;
+    }
+});
 // Formats value as: e.g. $1,523.00 | -$1,523.00
 const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
     try {
@@ -67,7 +72,7 @@ const setUnformattedValue = (event) => {
         inputTarget = event.target;
         // Reverse the value when minus is pressed
         if (isNegativeAllowed && event.key === '-')
-            value = value * -1;
+            value = (value ?? DEFAULT_VALUE) * -1;
     }
     // Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
     let unformattedValue = isNegativeAllowed
@@ -101,7 +106,7 @@ const setFormattedValue = () => {
     const startCaretPosition = inputTarget?.selectionStart || 0;
     const previousFormattedValueLength = formattedValue.length;
     // Apply formatting to input
-    formattedValue = formatCurrency(value, fractionDigits, 0);
+    formattedValue = formatCurrency(value ?? DEFAULT_VALUE, fractionDigits, 0);
     // Update `value` after formatting
     setUnformattedValue();
     // New caret position
@@ -115,7 +120,7 @@ const setFormattedValue = () => {
 let formattedValue = $state('');
 let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
 let isZero = $derived(value === 0);
-let isNegative = $derived(value < 0);
+let isNegative = $derived((value ?? DEFAULT_VALUE) < 0);
 $effect(() => {
     value;
     untrack(() => {

package/package/components/apps/components/layout/AppModal.svelte

@@ -121,11 +121,11 @@ async function getMenuElements() {
 		<Disposable
 			{id}
 			bind:this={disposable}
-			on:open={() => {
+			onOpen={() => {
 				outputs?.open.set(true)
 				onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}
-			on:close={() => {
+			onClose={() => {
 				outputs?.open.set(false)
 				onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}

package/package/components/apps/editor/AppEditor.svelte

@@ -12,7 +12,7 @@ import { Alert, Button, Tab } from '../../common';
 import TabContent from '../../common/tabs/TabContent.svelte';
 import Tabs from '../../common/tabs/TabsV2.svelte';
 import { userStore, workspaceStore } from '../../../stores';
-import { classNames, encodeState, getModifierKey, sendUserToast } from '../../../utils';
+import { classNames, encodeState, getModifierKey, sendUserToast, urlParamsToObject } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import ComponentList from './componentsPanel/ComponentList.svelte';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
@@ -60,7 +60,7 @@ let context = $state({
     groups: $userStore?.groups,
     username: $userStore?.username,
     name: $userStore?.name,
-    query: Object.fromEntries(new URL(window.location.href).searchParams.entries()),
+    query: urlParamsToObject(new URL(window.location.href).searchParams),
     hash: window.location.hash.substring(1),
     workspace: $workspaceStore,
     mode: 'editor',
@@ -643,7 +643,8 @@ $effect(() => {
     untrack(() => setGridPanelSize($componentActive));
 });
 $effect(() => {
-    $connectingInput.opened, untrack(() => updatePannelInConnecting());
+    ;
+    ($connectingInput.opened, untrack(() => updatePannelInConnecting()));
 });
 $effect(() => {
     forceDeactivatePanzoom = isModifierKeyPressed && handMode;

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -91,7 +91,6 @@ function closeDraftDrawer() {
 }
 async function computeTriggerables() {
     const items = allItems($app.grid, $app.subgrids);
-    console.debug('items', items);
     const allTriggers = (await Promise.all(items
         .flatMap((x) => {
         let c = x.data;

package/package/components/apps/editor/GridViewer.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { EditorBreakpoint } from '../types';
 import type { FilledItem } from '../svelte-grid/types';
-declare class __sveltets_Render<T> {
-    props(): {
+declare function $$render<T>(): {
+    props: {
         items: FilledItem<T>[];
         rowHeight?: number;
         gap?: any;
@@ -13,11 +13,18 @@ declare class __sveltets_Render<T> {
         parentWidth?: number | undefined;
         children?: import("svelte").Snippet<[any]>;
     };
-    events(): {
+    exports: {};
+    bindings: "items" | "containerWidth";
+    slots: {};
+    events: {
         resize: CustomEvent<any>;
         mount: CustomEvent<any>;
     };
-    slots(): {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "items" | "containerWidth";
     exports(): {};
 }