windmill-components 1.46.3 → 1.55.0

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

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type SlackProps = typeof __propDef.props;
-export declare type SlackEvents = typeof __propDef.events;
-export declare type SlackSlots = typeof __propDef.slots;
+export type SlackProps = typeof __propDef.props;
+export type SlackEvents = typeof __propDef.events;
+export type SlackSlots = typeof __propDef.slots;
 export default class Slack extends SvelteComponentTyped<SlackProps, SlackEvents, SlackSlots> {
 }
 export {};

package/components/icons/StripeIcon.svelte

@@ -0,0 +1,9 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 48 48">
+	<path
+		d="M 11.5 6 C 8.4802259 6 6 8.4802259 6 11.5 L 6 36.5 C 6 39.519774 8.4802259 42 11.5 42 L 36.5 42 C 39.519774 42 42 39.519774 42 36.5 L 42 11.5 C 42 8.4802259 39.519774 6 36.5 6 L 11.5 6 z M 11.5 9 L 36.5 9 C 37.898226 9 39 10.101774 39 11.5 L 39 36.5 C 39 37.898226 37.898226 39 36.5 39 L 11.5 39 C 10.101774 39 9 37.898226 9 36.5 L 9 11.5 C 9 10.101774 10.101774 9 11.5 9 z M 24.5 13 C 18.595 13 16.5 16.502 16.5 19.5 C 16.5 24.022 20.764797 25.442594 22.966797 26.058594 C 25.413797 26.779594 25.5 27.824484 25.5 28.271484 C 25.5 28.854484 25.259172 29.241688 25.076172 29.429688 C 24.552172 29.971688 23.624734 30.075562 22.677734 29.976562 C 20.612734 29.759563 18.51075 28.965844 17.34375 28.464844 C 17.17975 28.393844 17 28.516312 17 28.695312 L 17 33.357422 C 17 33.570422 17.129078 33.760078 17.330078 33.830078 C 19.065078 34.430078 21.291 35 23.5 35 C 29.405 35 31.5 31.364 31.5 28.25 C 31.5 24.985 29.309281 22.692641 24.988281 21.431641 C 22.511281 20.678641 22.5 19.822453 22.5 19.439453 C 22.5 18.973453 22.727672 18.654094 22.888672 18.496094 C 23.384672 18.007094 24.399984 17.918109 25.333984 18.037109 C 27.397984 18.220109 29.491297 19.017391 30.654297 19.525391 C 30.818297 19.597391 31 19.474922 31 19.294922 L 31 14.642578 C 31 14.429578 30.870922 14.239922 30.669922 14.169922 C 28.934922 13.570922 26.709 13 24.5 13 z"
+	/>
+</svg>

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

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

package/components/icons/TelegramIcon.svelte

@@ -0,0 +1,9 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" {width} {height} viewBox="0 0 50 50">
+	<path
+		d="M 44.376953 5.9863281 C 43.889905 6.0076957 43.415817 6.1432497 42.988281 6.3144531 C 42.565113 6.4845113 40.128883 7.5243408 36.53125 9.0625 C 32.933617 10.600659 28.256963 12.603668 23.621094 14.589844 C 14.349356 18.562196 5.2382813 22.470703 5.2382812 22.470703 L 5.3046875 22.445312 C 5.3046875 22.445312 4.7547875 22.629122 4.1972656 23.017578 C 3.9185047 23.211806 3.6186028 23.462555 3.3730469 23.828125 C 3.127491 24.193695 2.9479735 24.711788 3.015625 25.259766 C 3.2532479 27.184511 5.2480469 27.730469 5.2480469 27.730469 L 5.2558594 27.734375 L 14.158203 30.78125 C 14.385177 31.538434 16.858319 39.792923 17.402344 41.541016 C 17.702797 42.507484 17.984013 43.064995 18.277344 43.445312 C 18.424133 43.635633 18.577962 43.782915 18.748047 43.890625 C 18.815627 43.933415 18.8867 43.965525 18.957031 43.994141 C 18.958531 43.994806 18.959437 43.99348 18.960938 43.994141 C 18.969579 43.997952 18.977708 43.998295 18.986328 44.001953 L 18.962891 43.996094 C 18.979231 44.002694 18.995359 44.013801 19.011719 44.019531 C 19.043456 44.030655 19.062905 44.030268 19.103516 44.039062 C 20.123059 44.395042 20.966797 43.734375 20.966797 43.734375 L 21.001953 43.707031 L 26.470703 38.634766 L 35.345703 45.554688 L 35.457031 45.605469 C 37.010484 46.295216 38.415349 45.910403 39.193359 45.277344 C 39.97137 44.644284 40.277344 43.828125 40.277344 43.828125 L 40.310547 43.742188 L 46.832031 9.7519531 C 46.998903 8.9915162 47.022612 8.334202 46.865234 7.7402344 C 46.707857 7.1462668 46.325492 6.6299361 45.845703 6.34375 C 45.365914 6.0575639 44.864001 5.9649605 44.376953 5.9863281 z M 44.429688 8.0195312 C 44.627491 8.0103707 44.774102 8.032983 44.820312 8.0605469 C 44.866523 8.0881109 44.887272 8.0844829 44.931641 8.2519531 C 44.976011 8.419423 45.000036 8.7721605 44.878906 9.3242188 L 44.875 9.3359375 L 38.390625 43.128906 C 38.375275 43.162926 38.240151 43.475531 37.931641 43.726562 C 37.616914 43.982653 37.266874 44.182554 36.337891 43.792969 L 26.632812 36.224609 L 26.359375 36.009766 L 26.353516 36.015625 L 23.451172 33.837891 L 39.761719 14.648438 A 1.0001 1.0001 0 0 0 38.974609 13 A 1.0001 1.0001 0 0 0 38.445312 13.167969 L 14.84375 28.902344 L 5.9277344 25.849609 C 5.9277344 25.849609 5.0423771 25.356927 5 25.013672 C 4.99765 24.994652 4.9871961 25.011869 5.0332031 24.943359 C 5.0792101 24.874869 5.1948546 24.759225 5.3398438 24.658203 C 5.6298218 24.456159 5.9609375 24.333984 5.9609375 24.333984 L 5.9941406 24.322266 L 6.0273438 24.308594 C 6.0273438 24.308594 15.138894 20.399882 24.410156 16.427734 C 29.045787 14.44166 33.721617 12.440122 37.318359 10.902344 C 40.914175 9.3649615 43.512419 8.2583658 43.732422 8.1699219 C 43.982886 8.0696253 44.231884 8.0286918 44.429688 8.0195312 z M 33.613281 18.792969 L 21.244141 33.345703 L 21.238281 33.351562 A 1.0001 1.0001 0 0 0 21.183594 33.423828 A 1.0001 1.0001 0 0 0 21.128906 33.507812 A 1.0001 1.0001 0 0 0 20.998047 33.892578 A 1.0001 1.0001 0 0 0 20.998047 33.900391 L 19.386719 41.146484 C 19.35993 41.068197 19.341173 41.039555 19.3125 40.947266 L 19.3125 40.945312 C 18.800713 39.30085 16.467362 31.5161 16.144531 30.439453 L 33.613281 18.792969 z M 22.640625 35.730469 L 24.863281 37.398438 L 21.597656 40.425781 L 22.640625 35.730469 z"
+	/>
+</svg>

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

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

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

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type TogglIconProps = typeof __propDef.props;
-export declare type TogglIconEvents = typeof __propDef.events;
-export declare type TogglIconSlots = typeof __propDef.slots;
+export type TogglIconProps = typeof __propDef.props;
+export type TogglIconEvents = typeof __propDef.events;
+export type TogglIconSlots = typeof __propDef.slots;
 export default class TogglIcon extends SvelteComponentTyped<TogglIconProps, TogglIconEvents, TogglIconSlots> {
 }
 export {};

package/components/icons/WindmillIcon.svelte

@@ -27,13 +27,13 @@ export let white = false;
 			fill: #ffffff;
 		}
 		.st2 {
-			fill: #999;
+			fill: #bcd4fc;
 		}
 		.st3 {
-			fill: black;
+			fill: #3b82f6;
 		}
 		.st4 {
-			fill: #999;
+			fill: #b3b3b3;
 		}
 		.st5 {
 			fill: url(#SVGID_1_);

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

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type WindmillIconProps = typeof __propDef.props;
-export declare type WindmillIconEvents = typeof __propDef.events;
-export declare type WindmillIconSlots = typeof __propDef.slots;
+export type WindmillIconProps = typeof __propDef.props;
+export type WindmillIconEvents = typeof __propDef.events;
+export type WindmillIconSlots = typeof __propDef.slots;
 export default class WindmillIcon extends SvelteComponentTyped<WindmillIconProps, WindmillIconEvents, WindmillIconSlots> {
 }
 export {};

package/components/icons/index.d.ts

@@ -0,0 +1,70 @@
+import AirtableIcon from './AirtableIcon.svelte';
+import DbIcon from './DbIcon.svelte';
+import DiscordIcon from './DiscordIcon.svelte';
+import GcalIcon from './GcalIcon.svelte';
+import GCloudIcon from './GCloudIcon.svelte';
+import GdriveIcon from './GdriveIcon.svelte';
+import GithubIcon from './GithubIcon.svelte';
+import GitlabIcon from './GItlabIcon.svelte';
+import GmailIcon from './GmailIcon.svelte';
+import GSheetsIcon from './GSheetsIcon.svelte';
+import HttpIcon from './HttpIcon.svelte';
+import Mail from './Mail.svelte';
+import MastodonIcon from './MastodonIcon.svelte';
+import MatrixIcon from './MatrixIcon.svelte';
+import Mysql from './Mysql.svelte';
+import PostgresIcon from './PostgresIcon.svelte';
+import S3Icon from './S3Icon.svelte';
+import Slack from './Slack.svelte';
+import TogglIcon from './TogglIcon.svelte';
+import WindmillIcon from './WindmillIcon.svelte';
+import MailchimpIcon from './MailchimpIcon.svelte';
+import SendgridIcon from './SendgridIcon.svelte';
+import SendflakeIcon from './SendflakeIcon.svelte';
+import QRCodeIcon from './QRCodeIcon.svelte';
+import LinkedinIcon from './LinkedinIcon.svelte';
+import HubspotIcon from './HubspotIcon.svelte';
+import DatadogIcon from './DatadogIcon.svelte';
+import StripeIcon from './StripeIcon.svelte';
+import TelegramIcon from './TelegramIcon.svelte';
+import FunkwhaleIcon from './FunkwhaleIcon.svelte';
+import GdocsIcon from './GdocsIcon.svelte';
+import NextcloudIcon from './NextcloudIcon.svelte';
+export declare const APP_TO_ICON_COMPONENT: {
+    readonly postgresql: typeof PostgresIcon;
+    readonly mysql: typeof Mysql;
+    readonly smtp: typeof Mail;
+    readonly mongodb: typeof DbIcon;
+    readonly slack: typeof Slack;
+    readonly github: typeof GithubIcon;
+    readonly gmail: typeof GmailIcon;
+    readonly gsheets: typeof GSheetsIcon;
+    readonly gitlab: typeof GitlabIcon;
+    readonly gcloud: typeof GCloudIcon;
+    readonly gcal: typeof GcalIcon;
+    readonly gdrive: typeof GdriveIcon;
+    readonly airtable: typeof AirtableIcon;
+    readonly toggl: typeof TogglIcon;
+    readonly s3: typeof S3Icon;
+    readonly discord: typeof DiscordIcon;
+    readonly discord_webhook: typeof DiscordIcon;
+    readonly mastodon: typeof MastodonIcon;
+    readonly matrix: typeof MatrixIcon;
+    readonly windmill: typeof WindmillIcon;
+    readonly http: typeof HttpIcon;
+    readonly mailchimp: typeof MailchimpIcon;
+    readonly sendgrid: typeof SendgridIcon;
+    readonly snowflake: typeof SendflakeIcon;
+    readonly qrcode: typeof QRCodeIcon;
+    readonly linkedin: typeof LinkedinIcon;
+    readonly hubspot: typeof HubspotIcon;
+    readonly datadog: typeof DatadogIcon;
+    readonly stripe: typeof StripeIcon;
+    readonly telegram: typeof TelegramIcon;
+    readonly funkwhale: typeof FunkwhaleIcon;
+    readonly helper: typeof WindmillIcon;
+    readonly windmillhub: typeof WindmillIcon;
+    readonly gdocs: typeof GdocsIcon;
+    readonly ocs: typeof NextcloudIcon;
+};
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, };

package/components/icons/index.js

@@ -0,0 +1,70 @@
+import AirtableIcon from './AirtableIcon.svelte';
+import DbIcon from './DbIcon.svelte';
+import DiscordIcon from './DiscordIcon.svelte';
+import GcalIcon from './GcalIcon.svelte';
+import GCloudIcon from './GCloudIcon.svelte';
+import GdriveIcon from './GdriveIcon.svelte';
+import GithubIcon from './GithubIcon.svelte';
+import GitlabIcon from './GItlabIcon.svelte';
+import GmailIcon from './GmailIcon.svelte';
+import GSheetsIcon from './GSheetsIcon.svelte';
+import HttpIcon from './HttpIcon.svelte';
+import Mail from './Mail.svelte';
+import MastodonIcon from './MastodonIcon.svelte';
+import MatrixIcon from './MatrixIcon.svelte';
+import Mysql from './Mysql.svelte';
+import PostgresIcon from './PostgresIcon.svelte';
+import S3Icon from './S3Icon.svelte';
+import Slack from './Slack.svelte';
+import TogglIcon from './TogglIcon.svelte';
+import WindmillIcon from './WindmillIcon.svelte';
+import MailchimpIcon from './MailchimpIcon.svelte';
+import SendgridIcon from './SendgridIcon.svelte';
+import SendflakeIcon from './SendflakeIcon.svelte';
+import QRCodeIcon from './QRCodeIcon.svelte';
+import LinkedinIcon from './LinkedinIcon.svelte';
+import HubspotIcon from './HubspotIcon.svelte';
+import DatadogIcon from './DatadogIcon.svelte';
+import StripeIcon from './StripeIcon.svelte';
+import TelegramIcon from './TelegramIcon.svelte';
+import FunkwhaleIcon from './FunkwhaleIcon.svelte';
+import GdocsIcon from './GdocsIcon.svelte';
+import NextcloudIcon from './NextcloudIcon.svelte';
+export const APP_TO_ICON_COMPONENT = {
+    postgresql: PostgresIcon,
+    mysql: Mysql,
+    smtp: Mail,
+    mongodb: DbIcon,
+    slack: Slack,
+    github: GithubIcon,
+    gmail: GmailIcon,
+    gsheets: GSheetsIcon,
+    gitlab: GitlabIcon,
+    gcloud: GCloudIcon,
+    gcal: GcalIcon,
+    gdrive: GdriveIcon,
+    airtable: AirtableIcon,
+    toggl: TogglIcon,
+    s3: S3Icon,
+    discord: DiscordIcon,
+    discord_webhook: DiscordIcon,
+    mastodon: MastodonIcon,
+    matrix: MatrixIcon,
+    windmill: WindmillIcon,
+    http: HttpIcon,
+    mailchimp: MailchimpIcon,
+    sendgrid: SendgridIcon,
+    snowflake: SendflakeIcon,
+    qrcode: QRCodeIcon,
+    linkedin: LinkedinIcon,
+    hubspot: HubspotIcon,
+    datadog: DatadogIcon,
+    stripe: StripeIcon,
+    telegram: TelegramIcon,
+    funkwhale: FunkwhaleIcon,
+    helper: WindmillIcon,
+    windmillhub: WindmillIcon,
+    gdocs: GdocsIcon,
+    ocs: NextcloudIcon
+};
+export { AirtableIcon, DbIcon, DiscordIcon, GcalIcon, GCloudIcon, GdriveIcon, GithubIcon, GitlabIcon, GmailIcon, GSheetsIcon, HttpIcon, Mail, MastodonIcon, MatrixIcon, Mysql, PostgresIcon, S3Icon, Slack, TogglIcon, WindmillIcon, MailchimpIcon, SendgridIcon, LinkedinIcon, HubspotIcon, TelegramIcon, StripeIcon, DatadogIcon, FunkwhaleIcon, GdocsIcon, };

package/components/jobs/JobDetail.svelte

@@ -1,15 +1,15 @@
 <script>import { goto } from '$app/navigation';
 import { page } from '$app/stores';
 import { displayDate, displayDaysAgo, forLater, msToSec, truncateHash, truncateRev } from '../../utils';
-import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faWind } from '@fortawesome/free-solid-svg-icons';
+import { faCalendar, faCircle, faClock, faFastForward, faHourglassHalf, faRobot, faSearch, faTimes, faUser, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
 import { check } from 'svelte-awesome/icons';
-import { Badge, Button } from '../common';
+import { Badge } from '../common';
 const SMALL_ICON_SCALE = 0.7;
 export let job;
 </script>
 
-<div class="border rounded py-4">
+<div class="border border-gray-400 rounded py-4">
 	<div class="grid grid-cols-1 lg:grid-cols-3 w-full gap-4">
 		<div class="flex-col">
 			<div class="flex flex-row text-sm">
@@ -121,7 +121,7 @@ export let job;
 				<div>
 					{#if job && job.parent_job}
 						{#if job.is_flow_step}
-							<Icon class="text-gray-700" data={faWind} scale={SMALL_ICON_SCALE} /><span
+							<Icon class="text-gray-700" data={faBarsStaggered} scale={SMALL_ICON_SCALE} /><span
 								class="mx-2"
 							>
 								Step of flow <a href={`/run/${job.parent_job}`}>{truncateRev(job.parent_job, 6)}</a

package/components/jobs/JobDetail.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type JobDetailProps = typeof __propDef.props;
-export declare type JobDetailEvents = typeof __propDef.events;
-export declare type JobDetailSlots = typeof __propDef.slots;
+export type JobDetailProps = typeof __propDef.props;
+export type JobDetailEvents = typeof __propDef.events;
+export type JobDetailSlots = typeof __propDef.slots;
 export default class JobDetail extends SvelteComponentTyped<JobDetailProps, JobDetailEvents, JobDetailSlots> {
 }
 export {};

package/components/preview/FlowPreviewStatus.svelte

@@ -2,27 +2,16 @@
 export let job;
 </script>
 
-<div class="overflow-x-auto relative">
-	<table class="text-sm text-left text-gray-500 dark:text-gray-400">
-		<tbody>
-			<tr>
-				<th scope="row" class="py-2 pr-6 font-bold text-gray-900 whitespace-nowrap dark:text-white">
-					Status
-				</th>
-				<td class="py-2 "> <JobStatus {job} /></td>
-			</tr>
-			{#if job}
-				<tr>
-					<th scope="row" class="py-2 pr-6  font-bold text-gray-900 whitespace-nowrap ">
-						Job Id
-					</th>
-					<td class="py-2">
-						<a rel="noreferrer" target="_blank" href="/run/{job?.id}?workspace={job?.workspace_id}">
-							{job?.id}
-						</a>
-					</td>
-				</tr>
-			{/if}
-		</tbody>
-	</table>
+<div class="grid grid-cols-2 gap-4 mb-1 text-gray-500 dark:text-gray-400">
+	<JobStatus {job} />
+	{#if job}
+		<div
+			><div class=" text-gray-900 whitespace-nowrap ">
+				<span class="font-bold">Job Id</span>
+				<a rel="noreferrer" target="_blank" href="/run/{job?.id}?workspace={job?.workspace_id}">
+					{job?.id}
+				</a>
+			</div>
+		</div>
+	{/if}
 </div>

package/components/preview/FlowPreviewStatus.svelte.d.ts

@@ -9,9 +9,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowPreviewStatusProps = typeof __propDef.props;
-export declare type FlowPreviewStatusEvents = typeof __propDef.events;
-export declare type FlowPreviewStatusSlots = typeof __propDef.slots;
+export type FlowPreviewStatusProps = typeof __propDef.props;
+export type FlowPreviewStatusEvents = typeof __propDef.events;
+export type FlowPreviewStatusSlots = typeof __propDef.slots;
 export default class FlowPreviewStatus extends SvelteComponentTyped<FlowPreviewStatusProps, FlowPreviewStatusEvents, FlowPreviewStatusSlots> {
 }
 export {};

package/components/progressBar/ProgressBar.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ProgressBarProps = typeof __propDef.props;
-export declare type ProgressBarEvents = typeof __propDef.events;
-export declare type ProgressBarSlots = typeof __propDef.slots;
+export type ProgressBarProps = typeof __propDef.props;
+export type ProgressBarEvents = typeof __propDef.events;
+export type ProgressBarSlots = typeof __propDef.slots;
 export default class ProgressBar extends SvelteComponentTyped<ProgressBarProps, ProgressBarEvents, ProgressBarSlots> {
 }
 export {};

package/components/progressBar/ProgressBarGeneralPart.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ProgressBarGeneralPartProps = typeof __propDef.props;
-export declare type ProgressBarGeneralPartEvents = typeof __propDef.events;
-export declare type ProgressBarGeneralPartSlots = typeof __propDef.slots;
+export type ProgressBarGeneralPartProps = typeof __propDef.props;
+export type ProgressBarGeneralPartEvents = typeof __propDef.events;
+export type ProgressBarGeneralPartSlots = typeof __propDef.slots;
 export default class ProgressBarGeneralPart extends SvelteComponentTyped<ProgressBarGeneralPartProps, ProgressBarGeneralPartEvents, ProgressBarGeneralPartSlots> {
 }
 export {};

package/components/progressBar/ProgressBarLoopAccessor.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ProgressBarLoopAccessorProps = typeof __propDef.props;
-export declare type ProgressBarLoopAccessorEvents = typeof __propDef.events;
-export declare type ProgressBarLoopAccessorSlots = typeof __propDef.slots;
+export type ProgressBarLoopAccessorProps = typeof __propDef.props;
+export type ProgressBarLoopAccessorEvents = typeof __propDef.events;
+export type ProgressBarLoopAccessorSlots = typeof __propDef.slots;
 export default class ProgressBarLoopAccessor extends SvelteComponentTyped<ProgressBarLoopAccessorProps, ProgressBarLoopAccessorEvents, ProgressBarLoopAccessorSlots> {
 }
 export {};

package/components/progressBar/ProgressBarLoopPart.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ProgressBarLoopPartProps = typeof __propDef.props;
-export declare type ProgressBarLoopPartEvents = typeof __propDef.events;
-export declare type ProgressBarLoopPartSlots = typeof __propDef.slots;
+export type ProgressBarLoopPartProps = typeof __propDef.props;
+export type ProgressBarLoopPartEvents = typeof __propDef.events;
+export type ProgressBarLoopPartSlots = typeof __propDef.slots;
 export default class ProgressBarLoopPart extends SvelteComponentTyped<ProgressBarLoopPartProps, ProgressBarLoopPartEvents, ProgressBarLoopPartSlots> {
 }
 export {};

package/components/progressBar/model.d.ts

@@ -4,29 +4,29 @@ export interface ProgressStateStoreValue {
     finished: boolean;
     error: boolean;
 }
-export declare type StepKind = 'general' | 'loop';
-declare type Step<T extends StepKind> = {
+export type StepKind = 'general' | 'loop';
+type Step<T extends StepKind> = {
     type: T;
     isDone: boolean;
 };
-export declare type GeneralStep = Step<'general'>;
-export declare type LoopStep = Step<'loop'> & {
+export type GeneralStep = Step<'general'>;
+export type LoopStep = Step<'loop'> & {
     index: number;
     length: number;
 };
-export declare type ProgressStep = GeneralStep | LoopStep;
+export type ProgressStep = GeneralStep | LoopStep;
 export declare function isLoopStep(step: ProgressStep | undefined): step is LoopStep;
-declare type State<T extends StepKind> = {
+type State<T extends StepKind> = {
     type: T;
     isDone: boolean;
     isDoneChanged: boolean;
 };
-export declare type GeneralState = State<'general'>;
-export declare type LoopState = LoopStep & {
+export type GeneralState = State<'general'>;
+export type LoopState = LoopStep & {
     index: number;
     indexChanged: boolean;
 };
-export declare type ProgressState = GeneralState | LoopState;
+export type ProgressState = GeneralState | LoopState;
 export declare function isLoopState(state: ProgressState | undefined): state is LoopState;
 export declare function getTween(initialValue?: number, duration?: number): import("svelte/motion").Tweened<number>;
 export {};

package/components/propertyPicker/ObjectViewer.svelte

@@ -1,5 +1,6 @@
-<script>import { truncate } from '../../utils';
+<script>import { pluralize, truncate } from '../../utils';
 import { createEventDispatcher } from 'svelte';
+import { Badge } from '../common';
 import { NEVER_TESTED_THIS_FAR } from '../flows/utils';
 import { getTypeAsString } from '../flows/utils';
 import { computeKey } from './utils';
@@ -12,6 +13,7 @@ export let pureViewer = false;
 export let collapsed = level == 3 || Array.isArray(json);
 export let rawKey = false;
 export let topBrackets = false;
+export let topLevelNode = false;
 const collapsedSymbol = '...';
 let keys;
 let isArray;
@@ -35,17 +37,30 @@ function selectProp(key) {
 {#if keys.length > 0}
 	<span class:hidden={collapsed}>
 		{#if level != 0}
-			<span class="cursor-pointer hover:bg-gray-200 px-1 rounded" on:click={collapse}> (-) </span>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<span
+				class="cursor-pointer border border-gray-300 hover:bg-gray-200 px-1 rounded"
+				on:click={collapse}
+			>
+				-
+			</span>
 		{/if}
 		{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
 		<ul class="w-full">
 			{#each keys as key, index}
 				<li class="pt-1">
-					<button
-						on:click={() => selectProp(key)}
-						class="key {pureViewer ? 'cursor-auto' : ''} font-normal rounded px-1 hover:bg-blue-100"
-					>
-						{!isArray ? key : index}:
+					<button on:click={() => selectProp(key)}>
+						{#if topLevelNode}
+							<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
+						{:else}
+							<span
+								class="key {pureViewer
+									? 'cursor-auto'
+									: 'border border-gray-300'} font-normal rounded px-1 hover:bg-blue-100"
+							>
+								{!isArray ? key : index}</span
+							>
+						{/if}:
 					</button>
 
 					{#if getTypeAsString(json[key]) === 'object'}
@@ -61,7 +76,7 @@ function selectProp(key) {
 						<button
 							class="val {pureViewer
 								? 'cursor-auto'
-								: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
+								: ''} rounded hover:bg-blue-100 {getTypeAsString(json[key])}"
 							on:click={() => selectProp(key)}
 						>
 							{#if json[key] === NEVER_TESTED_THIS_FAR}
@@ -78,9 +93,19 @@ function selectProp(key) {
 		</ul>
 		{#if level == 0 && topBrackets}<span class="h-0">{closeBracket}</span>{/if}
 	</span>
-	<span class="cursor-pointer hover:bg-gray-200" class:hidden={!collapsed} on:click={collapse}>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<span
+		class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200"
+		class:hidden={!collapsed}
+		on:click={collapse}
+	>
 		{openBracket}{collapsedSymbol}{closeBracket}
 	</span>
+	{#if collapsed}
+		<span class="text-gray-500 text-xs">
+			{pluralize(Object.keys(json).length, Array.isArray(json) ? 'item' : 'key')}
+		</span>
+	{/if}
 	{#if !isLast && collapsed}
 		<span class="text-black">,</span>
 	{/if}

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         collapsed?: boolean | undefined;
         rawKey?: boolean | undefined;
         topBrackets?: boolean | undefined;
+        topLevelNode?: boolean | undefined;
     };
     events: {
         select: CustomEvent<any>;
@@ -17,9 +18,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ObjectViewerProps = typeof __propDef.props;
-export declare type ObjectViewerEvents = typeof __propDef.events;
-export declare type ObjectViewerSlots = typeof __propDef.slots;
+export type ObjectViewerProps = typeof __propDef.props;
+export type ObjectViewerEvents = typeof __propDef.events;
+export type ObjectViewerSlots = typeof __propDef.slots;
 export default class ObjectViewer extends SvelteComponentTyped<ObjectViewerProps, ObjectViewerEvents, ObjectViewerSlots> {
 }
 export {};