windmill-components 1.511.1 → 1.531.0

package/package/components/apps/svelte-grid/MoveResize.svelte

@@ -1,15 +1,14 @@
-<script lang="ts">import { createEventDispatcher, getContext, onMount } from 'svelte';
+<script lang="ts">import { getContext, onMount } from 'svelte';
 import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
 import { computePosition, findGridItemParentGrid, isContainer } from '../editor/appUtils';
 import { throttle } from './utils/other';
 import { moveMode } from '../gridUtils';
-const dispatch = createEventDispatcher();
-let { sensor, width, height, left, top, id, container, xPerPx, yPerPx, gapX, gapY, item, cols, nativeContainer, onTop, shadow = $bindable(undefined), overlapped = undefined, type = undefined, fakeShadow = undefined, disableMove = true, mounted = false, onMove, children } = $props();
+let { sensor, width, height, left, top, id, container, xPerPx, yPerPx, gapX, gapY, item, cols, nativeContainer, onTop, shadow = $bindable(undefined), overlapped = undefined, type = undefined, fakeShadow = undefined, disableMove = true, mounted = false, onMove, onDropped, onInitMove, onResizeStart, onResizeEnd, onRepaint, children } = $props();
 const ctx = getContext('AppEditorContext');
 const { mode, app } = getContext('AppViewerContext');
 const scale = ctx ? ctx.scale : writable(100);
-const divId = `component-${id}`;
+const divId = `wm-component-${id}`;
 let shadowElement = $state();
 let active = $state(false);
 let initX, initY;
@@ -34,7 +33,7 @@ onMount(() => {
                 initY = (clientY / $scale) * 100;
                 window.addEventListener('pointermove', pointermove);
                 window.addEventListener('pointerup', pointerup);
-                dispatch('initmove');
+                onInitMove?.();
                 const cordDiff = {
                     x: (moveX / $scale) * 100 - initX,
                     y: (moveY / $scale) * 100 - initY
@@ -76,11 +75,7 @@ export function inActivate() {
     }
 }
 let repaint = (activate, isPointerUp) => {
-    dispatch('repaint', {
-        id,
-        isPointerUp,
-        activate
-    });
+    onRepaint?.({ id, isPointerUp, activate });
 };
 // Autoscroll
 let _scrollTop = 0;
@@ -123,7 +118,7 @@ const pointerdown = ({ clientX, clientY }) => {
         ctx.componentActive.set(true);
         initX = (clientX / $scale) * 100;
         initY = (clientY / $scale) * 100;
-        dispatch('initmove');
+        onInitMove?.();
     };
     window.addEventListener('pointermove', pointermove);
     window.addEventListener('pointerup', pointerup);
@@ -235,7 +230,7 @@ function computeShadow(clientX, clientY) {
     const intersectingElement = elementsAtPoint.find((el) => el.id !== divId &&
         el.classList.contains('svlt-grid-item') &&
         el.getAttribute('data-iscontainer') === 'true');
-    const newOverlapped = intersectingElement ? intersectingElement?.id.split('-')[1] : undefined;
+    const newOverlapped = intersectingElement ? intersectingElement?.id.split('-')[2] : undefined;
     const container = newOverlapped
         ? intersectingElement?.querySelector('.svlt-grid-container')
         : document.getElementById('root-grid');
@@ -272,6 +267,9 @@ const pointerup = (e) => {
     else {
         dragClosure = undefined;
     }
+    if (!fakeShadow) {
+        return;
+    }
     if (!moving) {
         return;
     }
@@ -279,7 +277,7 @@ const pointerup = (e) => {
     if (overlapped && (overlapped === parent || parent?.startsWith(overlapped))) {
         return;
     }
-    dispatch('dropped', {
+    onDropped?.({
         id,
         overlapped,
         x: fakeShadow?.x,
@@ -305,7 +303,7 @@ const resizePointerDown = (e, o) => {
     scrollElement = getScroller(container);
     window.addEventListener('pointermove', resizePointerMove);
     window.addEventListener('pointerup', resizePointerUp);
-    dispatch('resizeStart');
+    onResizeStart?.();
 };
 const resizePointerMove = ({ pageX, pageY }) => {
     if (shadow) {
@@ -335,7 +333,7 @@ const resizePointerUp = (e) => {
     repaint(true, true);
     window.removeEventListener('pointermove', resizePointerMove);
     window.removeEventListener('pointerup', resizePointerUp);
-    dispatch('resizeEnd');
+    onResizeEnd?.();
 };
 function shouldDisplayShadow(moveMode, overlapped) {
     if (moveMode === 'move') {

package/package/components/apps/svelte-grid/MoveResize.svelte.d.ts

@@ -34,35 +34,28 @@ interface Props {
         clientY: number;
         intersectingElement?: string | undefined;
         shadow?: GridShadow | undefined;
-        overlapped?: string | undefined;
+        overlapped?: string;
+    }) => void;
+    onDropped?: (e: {
+        id: string;
+        overlapped: string | undefined;
+        x: number;
+        y: number;
+    }) => void;
+    onInitMove?: () => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
+    onRepaint?: (e: {
+        id: string;
+        isPointerUp: boolean;
+        activate: boolean;
     }) => void;
     children?: 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 MoveResize: $$__sveltets_2_IsomorphicComponent<Props, {
-    initmove: CustomEvent<any>;
-    repaint: CustomEvent<any>;
-    dropped: CustomEvent<any>;
-    resizeStart: CustomEvent<any>;
-    resizeEnd: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+declare const MoveResize: import("svelte").Component<Props, {
     inActivate: () => void;
     initmove: () => void;
     updateMove: (newCoordDiff: any, clientY: any) => void;
 }, "shadow">;
-type MoveResize = InstanceType<typeof MoveResize>;
+type MoveResize = ReturnType<typeof MoveResize>;
 export default MoveResize;

package/package/components/apps/utils.d.ts

@@ -1,9 +1,11 @@
 import type { Schema } from '../../common';
+import { type AppComponent } from './editor/component';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
 import type { App, ComponentCssProperty, GridItem, HorizontalAlignment, VerticalAlignment } from './types';
 export declare const BG_PREFIX = "bg_";
 export declare function migrateApp(app: App): void;
+export declare function processSubcomponents(data: AppComponent, fn: (data: AppComponent) => void): void;
 export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
 export declare function accessPropertyByPath<T>(object: T, path: string): any;

package/package/components/apps/utils.js

@@ -23,6 +23,28 @@ export function migrateApp(app) {
         });
     });
 }
+export function processSubcomponents(data, fn) {
+    if (data.type == 'tablecomponent' && Array.isArray(data.actionButtons)) {
+        for (let c of data.actionButtons) {
+            fn(c);
+        }
+    }
+    if ((data.type == 'aggridcomponent' ||
+        data.type == 'aggridcomponentee' ||
+        data.type == 'dbexplorercomponent' ||
+        data.type == 'aggridinfinitecomponent' ||
+        data.type == 'aggridinfinitecomponentee') &&
+        Array.isArray(data.actions)) {
+        for (let c of data.actions ?? []) {
+            fn(c);
+        }
+    }
+    if (data.type === 'menucomponent' && Array.isArray(data.menuItems)) {
+        for (let c of data.menuItems) {
+            fn(c);
+        }
+    }
+}
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
         return grid ?? [];

package/package/components/assets/AssetsDropdownButton.svelte

@@ -131,7 +131,7 @@ $effect(() => {
 						</svelte:fragment>
 					</Popover>
 					<div class="flex flex-col flex-1">
-						<Tooltip class="select-none max-w-48 truncate" disablePopup={disableLiTooltip}>
+						<Tooltip class="select-none w-48 truncate" disablePopup={disableLiTooltip}>
 							{asset.path}
 							<svelte:fragment slot="text">
 								{asset.path}

package/package/components/assets/JobAssetsViewer.svelte

@@ -2,7 +2,7 @@
 import { inferAssets } from '../../infer';
 import { workspaceStore } from '../../stores';
 import { usePromise } from '../../svelte5Utils.svelte';
-import { pruneNullishArrayWithSet, uniqueBy } from '../../utils';
+import { pruneNullishArray, uniqueBy } from '../../utils';
 import DbManagerDrawer from '../DBManagerDrawer.svelte';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import S3FilePicker from '../S3FilePicker.svelte';
@@ -14,7 +14,7 @@ async function extractAssets(job) {
         const additionalAssetsMap = {
         // TODO : Transitive assets
         };
-        return uniqueBy(pruneNullishArrayWithSet([
+        return uniqueBy(pruneNullishArray([
             ...(job.raw_flow?.modules.flatMap((m) => getFlowModuleAssets(m, additionalAssetsMap)) ??
                 []),
             ...parseInputArgsAssets(job.args ?? {})

package/package/components/assets/lib.js

@@ -5,6 +5,8 @@ export function formatAsset(asset) {
             return `res://${asset.path}`;
         case 's3object':
             return `s3://${asset.path}`;
+        case 'ducklake':
+            return `ducklake://${asset.path}`;
     }
 }
 export function getAssetUsagePageUri(usage) {
@@ -54,6 +56,8 @@ export function formatAssetKind(asset) {
             }
         case 's3object':
             return 'S3 Object';
+        case 'ducklake':
+            return 'Ducklake';
     }
 }
 export function formatAssetAccessType(accessType) {

package/package/components/auditLogs/AuditLogsFilters.svelte

@@ -45,7 +45,6 @@ $effect.pre(() => {
     }
 });
 async function loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope) {
-    console.log("loading logs");
     loading = true;
     if (username == 'all') {
         username = undefined;
@@ -74,7 +73,6 @@ async function loadLogs(username, page, perPage, before, after, operation, resou
     });
     hasMore = logs.length > 0 && logs.length === perPage;
     loading = false;
-    console.log("loadede logs");
 }
 async function loadUsers() {
     usernames =
@@ -111,7 +109,7 @@ function updateLogs() {
         addQueryParam('workspace', 'admins');
     }
     const query = '?' + queryParams.join('&');
-    goto(query);
+    goto(query, { replaceState: true, keepFocus: true });
     loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope);
 }
 function updateQueryParams() {
@@ -282,13 +280,13 @@ $effect(() => {
 		</div>
 	{/if}
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">After</span>
-		<input type="text" value={after ?? 'After'} disabled />
+		<span class="text-xs absolute -top-4">From</span>
+		<input type="text" value={after ?? 'From'} disabled />
 		<CalendarPicker
 			clearable
 			date={after}
 			placement="bottom-end"
-			label="After"
+			label="From"
 			on:change={({ detail }) => {
 				after = new Date(detail).toISOString()
 			}}
@@ -298,12 +296,12 @@ $effect(() => {
 		/>
 	</div>
 	<div class="flex gap-1 relative w-full">
-		<span class="text-xs absolute -top-4">Before</span>
-		<input type="text" value={before ?? 'Before'} disabled />
+		<span class="text-xs absolute -top-4">To</span>
+		<input type="text" value={before ?? 'To'} disabled />
 		<CalendarPicker
 			clearable
 			bind:date={before}
-			label="Before"
+			label="To"
 			placement="bottom-end"
 			on:change={({ detail }) => {
 				before = new Date(detail).toISOString()

package/package/components/auditLogs/AuditLogsFilters.svelte.d.ts

@@ -13,6 +13,6 @@ interface Props {
     actionKind?: ActionKind | 'all';
     scope?: undefined | 'all_workspaces' | 'instance';
 }
-declare const AuditLogsFilters: import("svelte").Component<Props, {}, "resource" | "username" | "operation" | "before" | "after" | "perPage" | "hasMore" | "logs" | "pageIndex" | "actionKind" | "scope">;
+declare const AuditLogsFilters: import("svelte").Component<Props, {}, "resource" | "username" | "operation" | "before" | "after" | "logs" | "perPage" | "hasMore" | "pageIndex" | "actionKind" | "scope">;
 type AuditLogsFilters = ReturnType<typeof AuditLogsFilters>;
 export default AuditLogsFilters;

package/package/components/common/button/Button.svelte

@@ -10,7 +10,7 @@ import { createTooltip } from '@melt-ui/svelte';
 import { conditionalMelt } from '../../../utils';
 import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
 import { triggerableByAI } from '../../../actions/triggerableByAI.svelte';
-let { id = '', aiId = undefined, aiDescription = undefined, size = 'md', spacingSize = size, color = 'blue', variant = 'contained', btnClasses = '', wrapperClasses = '', wrapperStyle = '', disabled = false, href = undefined, target = undefined, iconOnly = false, loadUntilNav = false, clickableWhileLoading = false, element = $bindable(undefined), nonCaptureEvent = false, propagateEvent = false, loading = $bindable(false), title = undefined, style = '', download = undefined, startIcon = undefined, endIcon = undefined, shortCut = undefined, tooltipPopover = undefined, dropdownBtnClasses = '', dropdownItems = undefined, hideDropdown = false, children, tooltip, dropdownOpen = $bindable(false), ...rest } = $props();
+let { id = '', aiId = undefined, aiDescription = undefined, size = 'md', spacingSize = size, color = 'blue', variant = 'contained', btnClasses = '', wrapperClasses = '', wrapperStyle = '', disabled = false, href = undefined, target = undefined, iconOnly = false, loadUntilNav = false, clickableWhileLoading = false, element = $bindable(undefined), nonCaptureEvent = false, propagateEvent = false, loading = $bindable(false), title = undefined, style = '', download = undefined, startIcon = undefined, endIcon = undefined, shortCut = undefined, tooltipPopover = undefined, dropdownBtnClasses = '', dropdownItems = undefined, hideDropdown = false, children, tooltip, onClick, dropdownOpen = $bindable(false), ...rest } = $props();
 function computeDropdowns(menuItems) {
     const items = typeof menuItems === 'function' ? menuItems() : menuItems;
     return items.map((item) => ({
@@ -30,13 +30,14 @@ export function click() {
 const dispatch = createEventDispatcher();
 const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
-async function onClick(event) {
+async function onclick(event) {
     if (!nonCaptureEvent) {
         event.preventDefault();
         if (!propagateEvent) {
             // by default events are not propagated, added this prop so that we can
             event.stopPropagation();
         }
+        onClick?.(event);
         dispatch('click', event);
     }
 }
@@ -165,7 +166,7 @@ $effect(() => {
 		<button
 			bind:this={element}
 			onpointerdown={bubble('pointerdown')}
-			onclick={onClick}
+			{onclick}
 			onfocus={bubble('focus')}
 			onblur={bubble('blur')}
 			onmouseenter={bubble('mouseenter')}

package/package/components/common/button/Button.svelte.d.ts

@@ -48,6 +48,7 @@ interface Props {
     dropdownBtnClasses?: string;
     dropdownItems?: MenuItem[] | (() => MenuItem[]) | undefined;
     hideDropdown?: boolean;
+    onClick?: (e?: Event) => void;
     children?: import('svelte').Snippet;
     tooltip?: import('svelte').Snippet;
     [key: string]: any;

package/package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -4,7 +4,7 @@ import { fade } from 'svelte/transition';
 import Button from '../button/Button.svelte';
 import { AlertTriangle, CornerDownLeft, Loader2, RefreshCcw } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-const { title, confirmationText, keyListen = true, loading = false, open = false, type: _type, showIcon = true } = $props();
+const { title, confirmationText, keyListen = true, loading = false, open = false, type: _type, showIcon = true, children, onConfirmed, onCanceled } = $props();
 const type = $derived(_type ?? 'danger');
 const dispatch = createEventDispatcher();
 function onKeyDown(event) {
@@ -14,9 +14,11 @@ function onKeyDown(event) {
         switch (event.key) {
             case 'Enter':
                 dispatch('confirmed');
+                onConfirmed?.();
                 break;
             case 'Escape':
                 dispatch('canceled');
+                onCanceled?.();
                 break;
         }
     }
@@ -83,15 +85,14 @@ const Icon = $derived(theme[type].Icon ?? AlertTriangle);
 								{title}
 							</h3>
 							<div class="mt-2 text-sm text-secondary">
-								<!-- svelte-ignore slot_element_deprecated -->
-								<slot />
+								{@render children?.()}
 							</div>
 						</div>
 					</div>
 					<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
 						<Button
 							disabled={loading}
-							on:click={() => dispatch('confirmed')}
+							on:click={() => (dispatch('confirmed'), onConfirmed?.())}
 							color={theme[type].color}
 							size="sm"
 							shortCut={{ Icon: CornerDownLeft, hide: !keyListen, withoutModifier: true }}
@@ -103,7 +104,7 @@ const Icon = $derived(theme[type].Icon ?? AlertTriangle);
 						</Button>
 						<Button
 							disabled={loading}
-							on:click={() => dispatch('canceled')}
+							on:click={() => (dispatch('canceled'), onCanceled?.())}
 							color="light"
 							size="sm"
 							shortCut={{ key: 'Esc', hide: !keyListen, withoutModifier: true }}

package/package/components/common/confirmationModal/ConfirmationModal.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type Snippet } from 'svelte';
 type Props = {
     title: string;
     confirmationText: string;
@@ -6,6 +7,9 @@ type Props = {
     open?: boolean;
     type?: 'danger' | 'reload';
     showIcon?: boolean;
+    children?: Snippet;
+    onConfirmed?: () => void | Promise<void>;
+    onCanceled?: () => void;
 };
 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> & {
@@ -20,20 +24,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, 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 ConfirmationModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, {
-    default: {};
-}>, {
+declare const ConfirmationModal: $$__sveltets_2_IsomorphicComponent<Props, {
     confirmed: CustomEvent<any>;
     canceled: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
+}, {}, {}, "">;
 type ConfirmationModal = InstanceType<typeof ConfirmationModal>;
 export default ConfirmationModal;

package/package/components/common/confirmationModal/asyncConfirmationModal.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type ComponentProps } from 'svelte';
+import type ConfirmationModal from './ConfirmationModal.svelte';
+/**
+ * This allows asking for confirmation while maintaining a linear imperative flow,
+ * and avoiding unnecessary states and callback hopping
+ *
+ * @example
+ *  let confirmationModal = createAsyncConfirmationModal()
+ *  // ...
+ *  let confirmed = await confirmationModal.ask({
+ *    title: "The following objects do not exist",
+ *    confirmationText: `Yes`,
+ *    children: `Do you want to create the objects ?`
+ *  })
+ *  if (!confirmed) return
+ *  // ...
+ *  <ConfirmationModal {...confirmationModal.props} />
+ */
+export declare function createAsyncConfirmationModal(): {
+    props: ComponentProps<ConfirmationModal>;
+    ask: (props: Params) => Promise<boolean>;
+};
+type Params = Omit<ComponentProps<ConfirmationModal>, 'children'> & {
+    children: string;
+};
+export {};

package/package/components/common/confirmationModal/asyncConfirmationModal.svelte.js

@@ -0,0 +1,50 @@
+import { createRawSnippet } from 'svelte';
+import { sendUserToast } from '../../../toast';
+/**
+ * This allows asking for confirmation while maintaining a linear imperative flow,
+ * and avoiding unnecessary states and callback hopping
+ *
+ * @example
+ *  let confirmationModal = createAsyncConfirmationModal()
+ *  // ...
+ *  let confirmed = await confirmationModal.ask({
+ *    title: "The following objects do not exist",
+ *    confirmationText: `Yes`,
+ *    children: `Do you want to create the objects ?`
+ *  })
+ *  if (!confirmed) return
+ *  // ...
+ *  <ConfirmationModal {...confirmationModal.props} />
+ */
+export function createAsyncConfirmationModal() {
+    // Create a new instance of ConfirmationModal with the provided props
+    const o = $state({
+        props: {
+            confirmationText: '',
+            title: ''
+        },
+        ask: (params) => new Promise((resolve) => {
+            o.props = {
+                ...params,
+                children: createRawSnippet(() => ({ render: () => params.children })),
+                open: true,
+                loading: false,
+                onCanceled: () => (resolve(false), (o.props.open = false)),
+                onConfirmed: async () => {
+                    o.props.loading = true;
+                    try {
+                        await params.onConfirmed?.();
+                        o.props.loading = false;
+                        resolve(true);
+                        o.props.open = false;
+                    }
+                    catch (e) {
+                        sendUserToast('Error : ' + JSON.stringify(e), true);
+                        o.props.loading = false;
+                    }
+                }
+            };
+        })
+    });
+    return o;
+}

package/package/components/common/fileDownload/FileDownload.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">import { workspaceStore } from '../../../stores';
 import { Download } from 'lucide-svelte';
 import { base } from '../../../base';
-export let s3object;
-export let workspaceId = undefined;
-export let appPath = undefined;
+let { s3object, workspaceId = undefined, appPath = undefined } = $props();
 </script>
 
 <a

package/package/components/common/fileDownload/FileDownload.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 FileDownload: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     s3object: any;
     workspaceId?: string | undefined;
     appPath?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FileDownload = InstanceType<typeof FileDownload>;
+}
+declare const FileDownload: import("svelte").Component<Props, {}, "">;
+type FileDownload = ReturnType<typeof FileDownload>;
 export default FileDownload;

package/package/components/common/languageIcons/LanguageIcon.svelte

@@ -20,6 +20,7 @@ import CSharpIcon from '../../icons/CSharpIcon.svelte';
 import NuIcon from '../../icons/NuIcon.svelte';
 import JavaIcon from '../../icons/JavaIcon.svelte';
 import DuckDbIcon from '../../icons/DuckDbIcon.svelte';
+import RubyIcon from '../../icons/RubyIcon.svelte';
 let { lang, width = 30, height = 30, scale = 1, ...rest } = $props();
 const languageLabel = {
     python3: 'Python',
@@ -43,8 +44,9 @@ const languageLabel = {
     ansible: 'Ansible',
     csharp: 'C#',
     nu: 'Nu',
-    java: 'Java'
-    // for related places search: ADD_NEW_LANG
+    java: 'Java',
+    ruby: 'Ruby'
+    // for related places search: ADD_NEW_LANG 
 };
 const langToComponent = {
     go: GoIcon,
@@ -73,6 +75,7 @@ const langToComponent = {
     csharp: CSharpIcon,
     nu: NuIcon,
     java: JavaIcon,
+    ruby: RubyIcon,
     duckdb: DuckDbIcon
     // for related places search: ADD_NEW_LANG
 };

package/package/components/common/modal/Modal.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
 import Button from '../button/Button.svelte';
-import Badge from '../badge/Badge.svelte';
 import { twMerge } from 'tailwind-merge';
 import CloseButton from '../CloseButton.svelte';
 export let title;
@@ -34,7 +33,7 @@ function fadeFast(node) {
 }
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window on:keydown|capture={onKeyDown} />
 
 {#if open}
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -94,9 +93,7 @@ function fadeFast(node) {
 								color="light"
 								size="sm"
 							>
-								<span class="inline-flex gap-2"
-									>{cancelText ?? 'Cancel'}<Badge color="dark-gray">Escape</Badge></span
-								>
+								{cancelText ?? 'Cancel'}
 							</Button>
 						</div>
 					{/if}

package/package/components/common/tabs/TabsV2.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">import { setContext, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 import { twMerge } from 'tailwind-merge';
-let { selected = $bindable(), hideTabs = false, class: c = '', wrapperClass = '', style = '', hashNavigation = false, values = undefined, children, content, onSelectedChange } = $props();
+let { selected = $bindable(), hideTabs = false, class: c = '', wrapperClass = '', style = '', hashNavigation = false, values = undefined, children, content, onSelectedChange, onTabClick } = $props();
 const selectedStore = writable(selected);
 setContext('Tabs', {
     selected: selectedStore,
     update: (value) => {
         selectedStore.set(value);
         selected = value;
+        onTabClick?.(value);
     },
     hashNavigation
 });

package/package/components/common/tabs/TabsV2.svelte.d.ts

@@ -9,6 +9,7 @@ interface Props {
     children?: import('svelte').Snippet<[any]>;
     content?: import('svelte').Snippet;
     onSelectedChange?: (value: string) => void;
+    onTabClick?: (value: string) => void;
 }
 declare const TabsV2: import("svelte").Component<Props, {}, "selected">;
 type TabsV2 = ReturnType<typeof TabsV2>;