windmill-components 1.408.2 → 1.430.2

package/package/components/icons/SpotifyIcon.svelte

@@ -0,0 +1,8 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg {width} {height} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+    <path fill="#1ed760" d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8Z"/>
+    <path d="M406.6 231.1c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3zm-31 76.2c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm-26.9 65.6c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4z"/>
+</svg>

package/package/components/icons/SpotifyIcon.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: string | undefined;
+        width?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SpotifyIconProps = typeof __propDef.props;
+export type SpotifyIconEvents = typeof __propDef.events;
+export type SpotifyIconSlots = typeof __propDef.slots;
+export default class SpotifyIcon extends SvelteComponent<SpotifyIconProps, SpotifyIconEvents, SpotifyIconSlots> {
+}
+export {};

package/package/components/icons/index.d.ts

@@ -19,6 +19,7 @@ import Slack from './Slack.svelte';
 import TogglIcon from './TogglIcon.svelte';
 import WindmillIcon from './WindmillIcon.svelte';
 import WindmillIcon2 from './WindmillIcon2.svelte';
+import SchedulePollIcon from './SchedulePollIcon.svelte';
 import MailchimpIcon from './MailchimpIcon.svelte';
 import SendgridIcon from './SendgridIcon.svelte';
 import SendflakeIcon from './SendflakeIcon.svelte';
@@ -91,6 +92,7 @@ import VismaIcon from './VismaIcon.svelte';
 import JumpCloudIcon from './JumpCloudIcon.svelte';
 import KeycloakIcon from './KeycloakIcon.svelte';
 import ZitadelIcon from './ZitadelIcon.svelte';
+import SpotifyIcon from './SpotifyIcon.svelte';
 export declare const APP_TO_ICON_COMPONENT: {
     readonly postgresql: typeof PostgresIcon;
     readonly mysql: typeof Mysql;
@@ -188,5 +190,6 @@ export declare const APP_TO_ICON_COMPONENT: {
     readonly jumpcloud: typeof JumpCloudIcon;
     readonly keycloak: typeof KeycloakIcon;
     readonly zitadel: typeof ZitadelIcon;
+    readonly spotify: typeof SpotifyIcon;
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, SchedulePollIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon };

package/package/components/icons/index.js

@@ -19,6 +19,7 @@ import Slack from './Slack.svelte';
 import TogglIcon from './TogglIcon.svelte';
 import WindmillIcon from './WindmillIcon.svelte';
 import WindmillIcon2 from './WindmillIcon2.svelte';
+import SchedulePollIcon from './SchedulePollIcon.svelte';
 import MailchimpIcon from './MailchimpIcon.svelte';
 import SendgridIcon from './SendgridIcon.svelte';
 import SendflakeIcon from './SendflakeIcon.svelte';
@@ -91,6 +92,7 @@ import VismaIcon from './VismaIcon.svelte';
 import JumpCloudIcon from './JumpCloudIcon.svelte';
 import KeycloakIcon from './KeycloakIcon.svelte';
 import ZitadelIcon from './ZitadelIcon.svelte';
+import SpotifyIcon from './SpotifyIcon.svelte';
 export const APP_TO_ICON_COMPONENT = {
     postgresql: PostgresIcon,
     mysql: Mysql,
@@ -187,6 +189,7 @@ export const APP_TO_ICON_COMPONENT = {
     visma: VismaIcon,
     jumpcloud: JumpCloudIcon,
     keycloak: KeycloakIcon,
-    zitadel: ZitadelIcon
+    zitadel: ZitadelIcon,
+    spotify: SpotifyIcon
 };
-export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon };
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, WindmillIcon2, SchedulePollIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, FaunadbIcon, ClickhouseIcon, OpenaiIcon, AwsIcon, BcryptIcon, GoogleIcon, HackernewsIcon, MongodbIcon, RedditIcon, SupabaseIcon, WebdavIcon, ZammadIcon, NextcloudIcon, SendflakeIcon, SurrealdbIcon, ActivitypubIcon, AwsEcrIcon, CalcomIcon, ClickupIcon, CloudflareIcon, FirebaseIcon, GoogleFormsIcon, JiraIcon, NotionIcon, PineconeIcon, RssIcon, ShopifyIcon, TypeformIcon, BigQueryIcon, GraphqlIcon, NocoDbIcon, AzureIcon, MicrosoftIcon, OktaIcon, AuthentikIcon, AutheliaIcon, KanidmIcon, AsanaIcon, BitbucketIcon, DynatraceIcon, EdgeDbIcon, GitIcon, ZendeskIcon, TwilioIcon, TrelloIcon, ResendIcon, PushoverIcon, QuickbooksIcon, MsTeamsIcon, MailgunIcon, IpinfoIcon, GoogleCloudIcon, CaCertificate, CurrencyApiIcon, VismaIcon, JumpCloudIcon, KeycloakIcon, ZitadelIcon };

package/package/components/instanceSettings.d.ts

@@ -6,8 +6,15 @@ export interface Setting {
     ee_only?: string;
     tooltip?: string;
     key: string;
-    fieldType: 'text' | 'number' | 'boolean' | 'password' | 'select' | 'textarea' | 'seconds' | 'email' | 'license_key' | 'object_store_config' | 'critical_error_channels' | 'slack_connect' | 'smtp_connect';
+    fieldType: 'text' | 'number' | 'boolean' | 'password' | 'select' | 'textarea' | 'seconds' | 'email' | 'license_key' | 'object_store_config' | 'critical_error_channels' | 'slack_connect' | 'smtp_connect' | 'indexer_rates';
     storage: SettingStorage;
+    advancedToggle?: {
+        label: string;
+        onChange: (values: Record<string, any>) => Record<string, any>;
+        checked: (values: Record<string, any>) => boolean;
+    };
+    hiddenIfNull?: boolean;
+    requiresReloadOnChange?: boolean;
     isValid?: (value: any) => boolean;
     error?: string;
     defaultValue?: () => any;

package/package/components/instanceSettings.js

@@ -74,6 +74,14 @@ export const settings = {
             ee_only: 'You can only adjust this setting to above 30 days in the EE version',
             cloudonly: false
         },
+        {
+            label: 'Delete logs from s3 periodically',
+            description: 'Job and service logs are periodically deleted from disk. When this setting is on, they will also be deleted from the object storage.',
+            key: 'monitor_logs_on_s3',
+            fieldType: 'boolean',
+            storage: 'setting',
+            ee_only: ''
+        },
         {
             label: 'Expose metrics',
             description: 'Expose Prometheus metrics for workers and servers on port 8001 at /metrics. <a href="https://www.windmill.dev/docs/advanced/instance_settings#expose-metrics">Learn more</a>',
@@ -92,12 +100,21 @@ export const settings = {
         },
         {
             label: 'Critical alert channels',
-            description: 'Channels to send critical alerts to. SMTP must be configured for the email channel. A Slack workspace must be connected to the instance for the Slack channel. <a href="https://www.windmill.dev/docs/core_concepts/critical_alert_channels">Learn more</a>',
+            description: 'Channels to send critical alerts to. SMTP must be configured for the email channel. A Slack workspace must be connected to the instance for the Slack channel. <a href="https://www.windmill.dev/docs/core_concepts/critical_alerts">Learn more</a>',
             key: 'critical_error_channels',
             fieldType: 'critical_error_channels',
             storage: 'setting',
             ee_only: 'Channels other than tracing are only available in the EE version'
         },
+        {
+            label: 'Mute critical alerts in UI',
+            description: 'Enable to mute critical alerts in the UI',
+            key: 'critical_alert_mute_ui',
+            fieldType: 'boolean',
+            storage: 'setting',
+            requiresReloadOnChange: true,
+            ee_only: 'Critical alerts in UI are only available in the EE version'
+        },
         {
             label: 'Azure OpenAI base path',
             description: 'All Windmill AI features will run on the specified deployed model. Format: https://{your-resource-name}.openai.azure.com/openai/deployments/{deployment-id}. <a href="https://www.windmill.dev/docs/core_concepts/ai_generation#azure-openai-advanced-models">Learn more</a>',
@@ -108,12 +125,36 @@ export const settings = {
         },
         {
             label: 'Private Hub base url',
-            description: 'Base url of your private Hub instance, without trailing slash. <a href="https://www.windmill.dev/docs/core_concepts/private_hub">Learn more</a>',
+            description: 'Base URL of your private Hub instance, without trailing slash. <a href="https://www.windmill.dev/docs/core_concepts/private_hub">Learn more</a>',
             placeholder: 'https://hub.company.com',
             key: 'hub_base_url',
             fieldType: 'text',
             storage: 'setting',
-            ee_only: ''
+            ee_only: '',
+            advancedToggle: {
+                label: 'I have a different URL for Hub access from end-user browsers',
+                onChange(values) {
+                    if (values['hub_accessible_url']) {
+                        values['hub_accessible_url'] = null;
+                    }
+                    else {
+                        values['hub_accessible_url'] = values['hub_base_url'] || 'https://hub.company.com';
+                    }
+                    return values;
+                },
+                checked: (values) => values['hub_accessible_url'] != null
+            },
+            requiresReloadOnChange: true
+        },
+        {
+            label: 'Private Hub accessible url',
+            description: 'Base URL accessible from end-user browsers, without trailing slash. <a href="https://www.windmill.dev/docs/core_concepts/private_hub">Learn more</a>',
+            key: 'hub_accessible_url',
+            fieldType: 'text',
+            hiddenIfNull: true,
+            storage: 'setting',
+            ee_only: '',
+            requiresReloadOnChange: true
         }
     ],
     'SSO/OAuth': [],
@@ -161,7 +202,16 @@ export const settings = {
             key: 'smtp_settings',
             fieldType: 'smtp_connect',
             storage: 'setting',
-            ee_only: '',
+            ee_only: ''
+        }
+    ],
+    'Indexer/Search': [
+        {
+            label: '',
+            key: 'indexer_settings',
+            fieldType: 'indexer_rates',
+            storage: 'setting',
+            ee_only: 'Full text search across jobs and service logs is an EE feature'
         }
     ],
     Slack: [
@@ -198,7 +248,7 @@ export const settings = {
             label: 'Keep job directories',
             key: 'keep_job_dir',
             fieldType: 'boolean',
-            description: 'Keep Job directories after execution at /tmp/windmill/<worker>/<job_id>',
+            description: 'Keep Job directories after execution at /tmp/windmill/WORKER/JOB_ID',
             storage: 'setting'
         },
         {

package/package/components/job_args.d.ts

@@ -0,0 +1 @@
+export declare function isWindmillTooBigObject(obj: any): boolean;

package/package/components/job_args.js

@@ -0,0 +1,6 @@
+import { deepEqual } from 'fast-equals';
+export function isWindmillTooBigObject(obj) {
+    return (typeof obj === 'object' &&
+        deepEqual(Object.keys(obj), ['reason']) &&
+        obj['reason'] == 'WINDMILL_TOO_BIG');
+}

package/package/components/multiselect/MultiSelect.svelte.d.ts

@@ -23,7 +23,7 @@ declare class __sveltets_Render<Option extends T> {
         input?: HTMLInputElement | null | undefined;
         inputClass?: string | undefined;
         inputStyle?: string | null | undefined;
-        inputmode?: "email" | "text" | "numeric" | "decimal" | "none" | "search" | "tel" | "url" | null | undefined;
+        inputmode?: "email" | "url" | "text" | "numeric" | "decimal" | "none" | "search" | "tel" | null | undefined;
         invalid?: boolean | undefined;
         liSelectedClass?: string | undefined;
         liSelectedStyle?: string | null | undefined;

package/package/components/multiselect/utils.js

@@ -48,6 +48,10 @@ export function scroll_into_view_if_needed_polyfill(elem, centerIfNeeded = true)
             });
         }
         observer.disconnect();
+    }, {
+        root: null,
+        rootMargin: '0px 1000px',
+        threshold: 0.1 // Adjust threshold to control when observer should trigger
     });
     observer.observe(elem);
     return observer; // return for testing

package/package/components/prop_picker.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="svelte" />
+import type { Writable } from 'svelte/store';
+import type { PickableProperties } from './flows/previousResults';
+type InsertionMode = 'append' | 'connect' | 'insert';
+export type FlowPropPickerConfig = {
+    insertionMode: InsertionMode;
+    clearFocus: () => void;
+    onSelect: (path: string) => boolean;
+};
+export type PropPickerContext = {
+    flowPropPickerConfig: Writable<FlowPropPickerConfig | undefined>;
+    pickablePropertiesFiltered: Writable<PickableProperties | undefined>;
+};
+export {};

package/package/components/prop_picker.js

@@ -0,0 +1 @@
+export {};

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -1,13 +1,13 @@
-<script>import { copyToClipboard, pluralize, truncate } from '../../utils';
+<script>import { copyToClipboard, truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
-import { Badge } from '../common';
 import { computeKey } from './utils';
-import WarningMessage from './WarningMessage.svelte';
 import { NEVER_TESTED_THIS_FAR } from '../flows/models';
 import Portal from '../Portal.svelte';
+import { Button } from '../common';
 import { Download, PanelRightOpen } from 'lucide-svelte';
 import S3FilePicker from '../S3FilePicker.svelte';
 import { workspaceStore } from '../../stores';
+import AnimatedButton from '../common/button/AnimatedButton.svelte';
 export let json;
 export let level = 0;
 export let currentPath = '';
@@ -15,10 +15,13 @@ export let pureViewer = false;
 export let collapsed = (level != 0 && level % 3 == 0) || Array.isArray(json);
 export let rawKey = false;
 export let topBrackets = false;
-export let topLevelNode = false;
 export let allowCopy = true;
 export let collapseLevel = undefined;
+export let prefix = '';
+export let expandedEvenOnLevel0 = undefined;
+export let connecting = false;
 let s3FileViewer;
+let hoveredKey = null;
 const collapsedSymbol = '...';
 $: keys = ['object', 's3object'].includes(getTypeAsString(json)) ? Object.keys(json) : [];
 $: isArray = Array.isArray(json);
@@ -40,96 +43,137 @@ function collapse() {
     collapsed = !collapsed;
 }
 const dispatch = createEventDispatcher();
-function selectProp(key, value = undefined) {
-    if (pureViewer && allowCopy) {
-        const valueToCopy = value !== undefined ? value : computeKey(key, isArray, currentPath);
-        copyToClipboard(valueToCopy);
+function computeFullKey(key, rawKey) {
+    if (rawKey) {
+        return `${prefix}('${key}')`;
     }
-    dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath));
+    const keyToSelect = computeKey(key, isArray, currentPath);
+    const separator = !prefix || keyToSelect.startsWith('[') ? '' : '.';
+    return prefix + separator + keyToSelect;
 }
-$: keyLimit = isArray ? 1 : 100;
+function selectProp(key, value, clickedValue) {
+    const fullKey = computeFullKey(key, rawKey);
+    if (allowCopy) {
+        if (pureViewer && clickedValue) {
+            copyToClipboard(typeof value == 'string' ? value : JSON.stringify(value));
+        }
+        else {
+            copyToClipboard(fullKey);
+        }
+    }
+    dispatch('select', fullKey);
+}
+$: keyLimit = isArray ? 5 : 100;
 $: fullyCollapsed = keys.length > 1 && collapsed;
 </script>
 
 <Portal name="object-viewer">
 	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
 </Portal>
-
 {#if keys.length > 0}
 	{#if !fullyCollapsed}
 		<span>
 			{#if level != 0 && keys.length > 1}
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<span class="cursor-pointer border hover:bg-surface-hover px-1 rounded" on:click={collapse}>
-					-
-				</span>
+
+				<Button
+					color="light"
+					size="xs2"
+					variant="border"
+					on:click={collapse}
+					wrapperClasses="inline-flex w-fit"
+					btnClasses="font-mono h-4 text-2xs px-1 font-thin text-primary rounded-[0.275rem]"
+					>-</Button
+				>
 			{/if}
-			{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
-			<ul class={`w-full pl-2 ${level === 0 ? 'border-none' : 'border-l border-dotted'}`}>
+			{#if level == 0 && topBrackets}<span class="text-tertiary">{openBracket}</span>{/if}
+			<ul
+				class={`w-full ${
+					level === 0 ? `border-none ${topBrackets ? 'pl-2' : ''}` : 'pl-2 border-l border-dotted'
+				}`}
+			>
 				{#each keys.length > keyLimit ? keys.slice(0, keyLimit) : keys as key, index (key)}
 					<li>
-						<button on:click={() => selectProp(key)} class="whitespace-nowrap">
-							{#if topLevelNode}
-								<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
-							{:else}
-								<span
-									class="key {pureViewer
-										? 'cursor-auto'
-										: 'border '} font-semibold rounded px-1 hover:bg-surface-hover text-2xs text-secondary"
-								>
-									{!isArray ? key : index}</span
-								>
-							{/if}:
-						</button>
+						<AnimatedButton
+							animate={connecting && hoveredKey === key}
+							marginWidth="1px"
+							wrapperClasses="inline-flex h-fit w-fit items-center"
+							baseRadius="0.275rem"
+							animationDuration="2s"
+						>
+							<Button
+								on:click={() => selectProp(key, undefined, false)}
+								on:mouseenter={() => {
+									hoveredKey = key
+								}}
+								on:mouseleave={() => (hoveredKey = null)}
+								size="xs2"
+								color="light"
+								variant="border"
+								wrapperClasses="p-0 whitespace-nowrap w-fit"
+								btnClasses="font-mono h-4 py-1 text-2xs font-thin px-1 rounded-[0.275rem]"
+								title={computeFullKey(key, rawKey)}
+							>
+								<span class={pureViewer ? 'cursor-auto' : ''}>{!isArray ? key : index} </span>
+							</Button>
+						</AnimatedButton>
+						<span class="text-2xs -ml-0.5 text-tertiary">:</span>
 
 						{#if getTypeAsString(json[key]) === 'object'}
 							<svelte:self
 								json={json[key]}
 								level={level + 1}
-								currentPath={computeKey(key, isArray, currentPath)}
+								currentPath={computeFullKey(key, rawKey)}
 								{pureViewer}
 								{allowCopy}
 								on:select
 								{collapseLevel}
-								collapsed={collapseLevel !== undefined ? level + 1 >= collapseLevel : undefined}
+								collapsed={collapseLevel !== undefined
+									? level + 1 >= collapseLevel && key != expandedEvenOnLevel0
+									: undefined}
 							/>
 						{:else}
-							<button
-								class="val text-left {pureViewer
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<span
+								class="val inline text-left {pureViewer
 									? 'cursor-auto'
-									: ''} rounded px-1 hover:bg-blue-100 dark:hover:bg-blue-100/10 {getTypeAsString(
-									json[key]
-								)}"
-								on:click={() => selectProp(key, json[key])}
+									: ''} rounded pl-0.5 {getTypeAsString(json[key])}"
+								on:click={() => {
+									selectProp(key, json[key], true)
+								}}
+								title={JSON.stringify(json[key])}
 							>
 								{#if json[key] === NEVER_TESTED_THIS_FAR}
-									<WarningMessage />
+									<span class="text-2xs text-tertiary font-normal">
+										Test the flow to see a value
+									</span>
 								{:else if json[key] == undefined}
 									<span class="text-2xs">undefined</span>
 								{:else if json[key] == null}
 									<span class="text-2xs">null</span>
 								{:else if typeof json[key] == 'string'}
-									<span title={json[key]} class="text-2xs">"{truncate(json[key], 200)}"</span>
+									<span class="text-2xs">"{truncate(json[key], 200)}"</span>
 								{:else}
-									<span title={JSON.stringify(json[key])} class="text-2xs">
+									<span class="text-2xs">
 										{truncate(JSON.stringify(json[key]), 200)}
 									</span>
 								{/if}
-							</button>
+							</span>
 						{/if}
 					</li>
 				{/each}
 				{#if keys.length > keyLimit}
 					{@const increment = Math.min(100, keys.length - keyLimit)}
-					<button on:click={() => (keyLimit += increment)} class="text-xs py-2 text-blue-600">
+					<button on:click={() => (keyLimit += increment)} class="text-2xs px-2 text-secondary">
 						{keyLimit}/{keys.length}: Load {increment} more...
 					</button>
 				{/if}
 			</ul>
 			{#if level == 0 && topBrackets}
 				<div class="flex">
-					<span class="h-0">{closeBracket}</span>
+					<span class="text-tertiary">{closeBracket}</span>
 					{#if getTypeAsString(json) === 's3object'}
 						<a
 							class="text-secondary underline font-semibold text-2xs whitespace-nowrap ml-1 w-fit"
@@ -155,16 +199,19 @@ $: fullyCollapsed = keys.length > 1 && collapsed;
 
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
-	<span
-		class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200"
-		class:hidden={!fullyCollapsed}
-		on:click={collapse}
-	>
-		{openBracket}{collapsedSymbol}{closeBracket}
-	</span>
+
 	{#if fullyCollapsed}
-		<span class="text-tertiary text-xs">
-			{pluralize(Object.keys(json).length, Array.isArray(json) ? 'item' : 'key')}
+		<span>
+			<Button
+				color="light"
+				size="xs2"
+				variant="border"
+				on:click={collapse}
+				wrapperClasses="inline-flex w-fit"
+				btnClasses="h-4 text-[9px] px-1  text-primary rounded-[0.275rem]"
+			>
+				{openBracket}{collapsedSymbol}{closeBracket}
+			</Button>
 		</span>
 	{/if}
 {:else if topBrackets}
@@ -172,7 +219,7 @@ $: fullyCollapsed = keys.length > 1 && collapsed;
 {:else if json == undefined}
 	<span class="text-tertiary text-2xs ml-2">undefined</span>
 {:else}
-	<span class="text-tertiary text-2xs ml-2">No items ([])</span>
+	<span class="text-tertiary text-2xs ml-2">No items</span>
 {/if}
 
 <style>

package/package/components/propertyPicker/ObjectViewer.svelte.d.ts

@@ -8,9 +8,11 @@ declare const __propDef: {
         collapsed?: boolean | undefined;
         rawKey?: boolean | undefined;
         topBrackets?: boolean | undefined;
-        topLevelNode?: boolean | undefined;
         allowCopy?: boolean | undefined;
         collapseLevel?: number | undefined;
+        prefix?: string | undefined;
+        expandedEvenOnLevel0?: string | undefined;
+        connecting?: boolean | undefined;
         getTypeAsString?: ((arg: any) => string) | undefined;
     };
     events: {