windmill-components 1.433.0 → 1.444.0

package/package/components/ArgInput.svelte

@@ -70,6 +70,7 @@ export let shouldDispatchChanges = false;
 export let noDefaultOnSelectFirst = false;
 export let helperScript = undefined;
 export let otherArgs = {};
+export let lightHeader = false;
 let oneOfSelected = undefined;
 async function updateOneOfSelected(oneOf) {
     if (oneOf &&
@@ -101,7 +102,6 @@ let s3FileUploadRawMode;
 let isListJson = false;
 let hasIsListJsonChanged = false;
 let el = undefined;
-let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 let rawValue = undefined;
 function computeDefaultValue(nvalue, inputCat, defaultValue, nnullable) {
@@ -168,12 +168,12 @@ $: !isListJson &&
     !hasIsListJsonChanged &&
     checkArrayValueType();
 $: defaultValue != undefined && handleDefaultValueChange();
-let oldDefaultValue = defaultValue;
+let oldDefaultValue = structuredClone(defaultValue);
 function handleDefaultValueChange() {
-    if (value == oldDefaultValue) {
+    if (deepEqual(value, oldDefaultValue)) {
         value = defaultValue;
     }
-    oldDefaultValue = defaultValue;
+    oldDefaultValue = structuredClone(defaultValue);
 }
 function evalValueToRaw() {
     rawValue =
@@ -298,6 +298,7 @@ $: shouldDispatchChanges && debounced(value);
 				{contentEncoding}
 				{format}
 				{simpleTooltip}
+				{lightHeader}
 			/>
 		{/if}
 
@@ -450,7 +451,6 @@ $: shouldDispatchChanges && debounced(value);
 																{onlyMaskPassword}
 																{disablePortal}
 																{disabled}
-																noDelete
 																schema={getSchemaFromProperties(itemsType?.properties)}
 																bind:args={v}
 															/>
@@ -613,11 +613,11 @@ $: shouldDispatchChanges && debounced(value);
 					<div class="flex flex-col gap-2 w-full">
 						{#if oneOf && oneOf.length >= 2}
 							<ToggleButtonGroup
+								bind:selected={oneOfSelected}
 								on:selected={() => {
-									value = {}
+									value = { label: oneOfSelected }
 									redraw += 1
 								}}
-								bind:selected={oneOfSelected}
 							>
 								{#each oneOf as obj}
 									<ToggleButton value={obj.title} label={obj.title} />
@@ -635,10 +635,8 @@ $: shouldDispatchChanges && debounced(value);
 													{disablePortal}
 													{disabled}
 													schema={{
-														properties: Object.fromEntries(
-															Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
-														),
-														order: obj.order?.filter((k) => k !== 'label') ?? undefined,
+														properties: obj.properties,
+														order: obj.order,
 														$schema: '',
 														required: obj.required ?? [],
 														type: 'object'
@@ -658,12 +656,10 @@ $: shouldDispatchChanges && debounced(value);
 													{onlyMaskPassword}
 													{disablePortal}
 													{disabled}
-													noDelete
+													schemaSkippedValues={['label']}
 													schema={{
-														properties: Object.fromEntries(
-															Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
-														),
-														order: obj.order?.filter((k) => k !== 'label') ?? undefined,
+														properties: obj.properties,
+														order: obj.order,
 														$schema: '',
 														required: obj.required ?? [],
 														type: 'object'

package/package/components/ArgInput.svelte.d.ts

@@ -68,6 +68,7 @@ declare const __propDef: {
             hash: string;
         } | undefined;
         otherArgs?: Record<string, any> | undefined;
+        lightHeader?: boolean | undefined;
         focus?: (() => void) | undefined;
     };
     events: {

package/package/components/AssignableTags.svelte

@@ -4,14 +4,16 @@ import Tooltip from './Tooltip.svelte';
 import AssignableTagsInner from './AssignableTagsInner.svelte';
 export let placement = 'bottom-end';
 export let color = 'dark';
+export let disabled = false;
 </script>
 
 <Popup
 	floatingConfig={{ strategy: 'absolute', placement: placement }}
 	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+	{disabled}
 >
 	<svelte:fragment slot="button">
-		<Button {color} size="xs" nonCaptureEvent={true}>
+		<Button {color} size="xs" nonCaptureEvent={true} {disabled}>
 			<div class="flex flex-row gap-1 items-center"
 				><Pen size={14} /> Custom tags&nbsp;<Tooltip light
 					>Tags are assigned to scripts and flows. Workers only accept jobs that correspond to their

package/package/components/AssignableTags.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         placement?: "top-end" | "bottom-end" | undefined;
         color?: "dark" | "nord" | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         refresh: CustomEvent<any>;

package/package/components/AuthSettings.svelte

@@ -0,0 +1,248 @@
+<script>import { enterpriseLicense } from '../stores';
+import { Alert, Button, Tab, Tabs } from './common';
+import OAuthSetting from './OAuthSetting.svelte';
+import OktaSetting from './OktaSetting.svelte';
+import CloseButton from './common/CloseButton.svelte';
+import KeycloakSetting from './KeycloakSetting.svelte';
+import CustomSso from './CustomSso.svelte';
+import AuthentikSetting from './AuthentikSetting.svelte';
+import AutheliaSetting from './AutheliaSetting.svelte';
+import KanidmSetting from './KanidmSetting.svelte';
+import ZitadelSetting from './ZitadelSetting.svelte';
+import CustomOauth from './CustomOauth.svelte';
+import { capitalize } from '../utils';
+import Toggle from './Toggle.svelte';
+import { ExternalLink, Plus } from 'lucide-svelte';
+export let snowflakeAccountIdentifier = '';
+export let oauths = {};
+const windmillBuiltins = [
+    'github',
+    'gitlab',
+    'bitbucket',
+    'slack',
+    'gsheets',
+    'gdrive',
+    'gmail',
+    'gcal',
+    'gforms',
+    'gcloud',
+    'gworkspace',
+    'basecamp',
+    'linkedin',
+    'quickbooks',
+    'visma',
+    'spotify',
+    'snowflake_oauth',
+    'xero'
+];
+let oauth_name = undefined;
+let clientName = '';
+let resourceName = '';
+let tab = 'sso';
+let requirePreexistingUserForOauth = false;
+</script>
+
+<div>
+	<Tabs bind:selected={tab} class="mt-2 mb-4">
+		<Tab value="sso">SSO</Tab>
+		<Tab value="oauth">OAuth</Tab>
+		<Tab value="scim">SCIM/SAML</Tab>
+	</Tabs>
+</div>
+
+<div class="mb-6">
+	{#if tab === 'sso'}
+		{#if !$enterpriseLicense || $enterpriseLicense.endsWith('_pro')}
+			<Alert type="warning" title="Limited to 10 SSO users">
+				Without EE, the number of SSO users is limited to 10. SCIM/SAML is available on EE
+			</Alert>
+		{/if}
+
+		<div class="py-1" />
+		<div class="mb-2">
+			<span class="text-primary text-sm"
+				>When at least one of the below options is set, users will be able to login to Windmill via
+				their third-party account.
+				<br /> To test SSO, the recommended workflow is to to save the settings and try to login in
+				an incognito window.
+				<a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#sso">Learn more</a
+				></span
+			>
+		</div>
+		<div class="flex flex-col gap-3 py-4">
+			<OAuthSetting name="google" bind:value={oauths['google']} />
+			<OAuthSetting name="microsoft" bind:value={oauths['microsoft']} />
+			<OktaSetting bind:value={oauths['okta']} />
+			<OAuthSetting name="github" bind:value={oauths['github']} />
+			<OAuthSetting name="gitlab" bind:value={oauths['gitlab']} />
+			<OAuthSetting name="jumpcloud" bind:value={oauths['jumpcloud']} />
+			<KeycloakSetting bind:value={oauths['keycloak']} />
+			<AuthentikSetting bind:value={oauths['authentik']} />
+			<AutheliaSetting bind:value={oauths['authelia']} />
+			<KanidmSetting bind:value={oauths['kanidm']} />
+			<ZitadelSetting bind:value={oauths['zitadel']} />
+			{#each Object.keys(oauths) as k}
+				{#if !['authelia', 'authentik', 'google', 'microsoft', 'github', 'gitlab', 'jumpcloud', 'okta', 'keycloak', 'slack', 'kanidm', 'zitadel'].includes(k) && 'login_config' in oauths[k]}
+					{#if oauths[k]}
+						<div class="flex flex-col gap-2 pb-4">
+							<div class="flex flex-row items-center gap-2">
+								<!-- svelte-ignore a11y-label-has-associated-control -->
+								<label class="text-md font-medium text-primary">{k}</label>
+								<CloseButton
+									on:close={() => {
+										delete oauths[k]
+										oauths = { ...oauths }
+									}}
+								/>
+							</div>
+							<div class="p-2 border rounded">
+								<label class="block pb-2">
+									<span class="text-primary font-semibold text-sm">Custom Name</span>
+									<input
+										type="text"
+										placeholder="Custom Name"
+										bind:value={oauths[k]['display_name']}
+									/>
+								</label>
+								<label class="block pb-2">
+									<span class="text-primary font-semibold text-sm">Client Id</span>
+									<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
+								</label>
+								<label class="block pb-2">
+									<span class="text-primary font-semibold text-sm">Client Secret</span>
+									<input type="text" placeholder="Client Secret" bind:value={oauths[k]['secret']} />
+								</label>
+								{#if !windmillBuiltins.includes(k) && k != 'slack'}
+									<CustomSso bind:login_config={oauths[k]['login_config']} />
+								{/if}
+							</div>
+						</div>
+					{/if}
+				{/if}
+			{/each}
+		</div>
+		<div class="flex gap-2 py-4">
+			<input type="text" placeholder="client_id" bind:value={clientName} />
+			<Button
+				variant="border"
+				color="blue"
+				hover="yo"
+				size="sm"
+				endIcon={{ icon: Plus }}
+				disabled={clientName == ''}
+				on:click={() => {
+					oauths[clientName] = { id: '', secret: '', login_config: {} }
+					clientName = ''
+				}}
+			>
+				Add custom SSO client {!$enterpriseLicense ? '(requires ee)' : ''}
+			</Button>
+		</div>
+		<div class="flex gap-2 py-4">
+			<Toggle
+				options={{
+					right: 'Require users to have been added manually to Windmill to sign in through OAuth'
+				}}
+				bind:checked={requirePreexistingUserForOauth}
+			/>
+		</div>
+	{:else if tab === 'oauth'}
+		<div class="mb-2">
+			<span class="text-primary text-sm"
+				>When one of the below options is set, you will be able to create a specific resource
+				containing a token automatically generated by the third-party provider.
+				<br />
+				To test it after setting an oauth client, go to the Resources menu and create a new one of the
+				type of your oauth client (i.e. a 'github' resource if you set Github OAuth).
+				<br /><a target="_blank" href="https://www.windmill.dev/docs/misc/setup_oauth#oauth"
+					>Learn more</a
+				></span
+			>
+		</div>
+		<div class="py-1" />
+		<OAuthSetting login={false} name="slack" bind:value={oauths['slack']} />
+		<div class="py-1" />
+
+		{#each Object.keys(oauths) as k}
+			{#if oauths[k] && !('login_config' in oauths[k])}
+				{#if !['slack'].includes(k) && oauths[k]}
+					<div class="flex flex-col gap-2 pb-4">
+						<div class="flex flex-row items-center gap-2">
+							<!-- svelte-ignore a11y-label-has-associated-control -->
+							<label class="text-md font-medium text-primary">{k}</label>
+							<CloseButton
+								on:close={() => {
+									delete oauths[k]
+									oauths = { ...oauths }
+								}}
+							/>
+						</div>
+						<div class="p-2 border rounded">
+							<label class="block pb-2">
+								<span class="text-primary font-semibold text-sm">Client Id</span>
+								<input type="text" placeholder="Client Id" bind:value={oauths[k]['id']} />
+							</label>
+							<label class="block pb-2">
+								<span class="text-primary font-semibold text-sm">Client Secret</span>
+								<input type="text" placeholder="Client Secret" bind:value={oauths[k]['secret']} />
+							</label>
+							{#if !windmillBuiltins.includes(k) && k != 'slack'}
+								<CustomOauth bind:connect_config={oauths[k]['connect_config']} />
+							{/if}
+							{#if k == 'snowflake_oauth'}
+								<label class="block pb-2">
+									<span class="text-primary font-semibold text-sm flex gap-2 items-center"
+										><a
+											href="https://docs.snowflake.com/en/user-guide/admin-account-identifier#using-an-account-name-as-an-identifier"
+											target="_blank">Snowflake Account Identifier</a
+										><ExternalLink size={12} /></span
+									>
+									<input
+										type="text"
+										placeholder="<orgname>-<account_name>"
+										required={true}
+										bind:value={snowflakeAccountIdentifier}
+									/>
+								</label>
+							{/if}
+						</div>
+					</div>
+				{/if}
+			{/if}
+		{/each}
+
+		<div class="flex gap-2">
+			<select name="oauth_name" id="oauth_name" bind:value={oauth_name}>
+				<option value={undefined}>Select an OAuth client</option>
+				<option value="custom">Fully Custom (requires ee)</option>
+				{#each windmillBuiltins as name}
+					<option value={name}>{capitalize(name)}</option>
+				{/each}
+			</select>
+			{#if oauth_name == 'custom'}
+				<input type="text" placeholder="client_id" bind:value={resourceName} />
+			{:else}
+				<input type="text" value={oauth_name ?? ''} disabled />
+			{/if}
+			<Button
+				variant="border"
+				color="blue"
+				hover="yo"
+				size="sm"
+				endIcon={{ icon: Plus }}
+				disabled={!oauth_name ||
+					(oauth_name == 'custom' && resourceName == '') ||
+					(oauth_name == 'custom' && !$enterpriseLicense)}
+				on:click={() => {
+					let name = oauth_name == 'custom' ? resourceName : oauth_name
+					oauths[name ?? ''] = { id: '', secret: '' }
+					resourceName = ''
+				}}
+			>
+				Add OAuth client {oauth_name == 'custom' && !$enterpriseLicense ? '(requires ee)' : ''}
+			</Button>
+		</div>
+	{:else if tab == 'scim'}
+		<slot name="scim" />
+	{/if}
+</div>

package/package/components/AuthSettings.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        snowflakeAccountIdentifier?: string | undefined;
+        oauths?: Record<string, any> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        scim: {};
+    };
+};
+export type AuthSettingsProps = typeof __propDef.props;
+export type AuthSettingsEvents = typeof __propDef.events;
+export type AuthSettingsSlots = typeof __propDef.slots;
+export default class AuthSettings extends SvelteComponent<AuthSettingsProps, AuthSettingsEvents, AuthSettingsSlots> {
+}
+export {};

package/package/components/AutoscalingConfigEditor.svelte

@@ -270,7 +270,7 @@ let test_input = 3;
 				<ToggleButton
 					value="script"
 					size="sm"
-					label="Custom Script"
+					label="Custom script"
 					tooltip="Run a custom script to scale your worker group"
 				/>
 				<ToggleButton position="center" disabled value="ecs" size="sm" label="ECS (soon)" />
@@ -345,7 +345,7 @@ let test_input = 3;
 		{:else}
 			<ToggleButtonGroup selected={'script'} disabled class="mb-4 mt-2">
 				<ToggleButton value="dryrun" size="sm" label="Dry run" />
-				<ToggleButton value="script" size="sm" label="Custom Script" />
+				<ToggleButton value="script" size="sm" label="Custom script" />
 				<ToggleButton position="center" value="ecs" size="sm" label="ECS (soon)" />
 				<ToggleButton position="right" value="nomad" size="sm" label="Nomad (soon)" />
 				<ToggleButton position="right" value="kubernetes" size="sm" label="Kubernetes (soon)" />

package/package/components/CronInput.svelte

@@ -244,7 +244,7 @@ const items = Object.keys(timezones)
 		</Label>
 
 		{#if !disabled}
-			<div class="flex flex-row gap-2">
+			<div class="flex flex-row gap-2 mb-2">
 				<CronBuilder let:close>
 					<div class="w-full flex flex-col">
 						<div class="w-full flex flex-col gap-1">
@@ -382,7 +382,7 @@ const items = Object.keys(timezones)
 								close(null)
 							}}
 						>
-							Set Cron Schedule
+							Set cron schedule
 						</Button>
 					</div>
 				</CronBuilder>

package/package/components/DeployWorkspace.svelte

@@ -602,7 +602,7 @@ async function showDiff(kind, path) {
 
 		{#if !hideButton}
 			<div class="mt-16 flex flex-row-reverse max-w-3xl"
-				><Button on:click={deployAll}>Deploy All Toggled</Button></div
+				><Button on:click={deployAll}>Deploy all toggled</Button></div
 			>
 		{/if}
 	{:else}

package/package/components/Description.svelte

@@ -0,0 +1,9 @@
+<script>export let link = undefined;
+</script>
+
+<div class="text-xs text-tertiary font-normal">
+	<slot />
+	{#if link}
+		<a href={link} target="_blank">Learn more</a>
+	{/if}
+</div>

package/package/components/Description.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        link?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DescriptionProps = typeof __propDef.props;
+export type DescriptionEvents = typeof __propDef.events;
+export type DescriptionSlots = typeof __propDef.slots;
+export default class Description extends SvelteComponent<DescriptionProps, DescriptionEvents, DescriptionSlots> {
+}
+export {};

package/package/components/Dev.svelte

@@ -389,7 +389,9 @@ setContext('TriggerContext', {
     primarySchedule: primaryScheduleStore,
     selectedTrigger: selectedTriggerStore,
     triggersCount: triggersCount,
-    simplifiedPoll: writable(false)
+    simplifiedPoll: writable(false),
+    defaultValues: writable(undefined),
+    captureOn: writable(undefined)
 });
 setContext('FlowEditorContext', {
     selectedId: selectedIdStore,
@@ -405,7 +407,8 @@ setContext('FlowEditorContext', {
     initialPath: '',
     flowInputsStore: writable({}),
     customUi: {},
-    insertButtonOpen: writable(false)
+    insertButtonOpen: writable(false),
+    executionCount: writable(0),
 });
 setContext('PropPickerContext', {
     flowPropPickerConfig: writable(undefined),
@@ -609,7 +612,19 @@ async function inferModuleArgs(selectedIdStore) {
 					</Pane>
 					<Pane size={33}>
 						{#key reload}
-							<FlowEditorPanel enableAi noEditor />
+							<FlowEditorPanel
+								enableAi
+								noEditor
+								on:applyArgs={(ev) => {
+									if (ev.detail.kind === 'preprocessor') {
+										$testStepStore['preprocessor'] = ev.detail.args ?? {}
+										$selectedIdStore = 'preprocessor'
+									} else {
+										$previewArgsStore = ev.detail.args ?? {}
+										flowPreviewButtons?.openPreview()
+									}
+								}}
+							/>
 						{/key}
 					</Pane>
 				</Splitpanes>

package/package/components/DisplayResult.svelte

@@ -33,6 +33,7 @@ export let noControls = false;
 export let drawerOpen = false;
 export let nodeId = undefined;
 export let language = undefined;
+export let appPath = undefined;
 const IMG_MAX_SIZE = 10000000;
 const TABLE_MAX_SIZE = 5000000;
 const DISPLAY_MAX_SIZE = 100000;
@@ -225,6 +226,7 @@ function handleArrayOfObjectsHeaders(json) {
     if (Array.isArray(json) &&
         json.length > 0 &&
         Array.isArray(json[0]) &&
+        json[0].length > 0 &&
         json[0].every((item) => typeof item === 'string') &&
         json
             .slice(1)
@@ -264,6 +266,7 @@ function arrayOfRowsToObjects(input) {
         // handle possible first row of headers
         if (input.length > 1 &&
             Array.isArray(input[0]) &&
+            input[0].length > 0 &&
             input[0].every((item) => typeof item === 'string')) {
             const headers = input[0];
             const rows = input.slice(1);
@@ -563,7 +566,7 @@ let seeS3PreviewFileFromList = '';
 									>
 								</button>
 							{:else if !result?.disable_download}
-								<FileDownload {workspaceId} s3object={result} />
+								<FileDownload {workspaceId} s3object={result} {appPath} />
 								<button
 									class="text-secondary underline text-2xs whitespace-nowrap"
 									on:click={() => {
@@ -580,7 +583,7 @@ let seeS3PreviewFileFromList = '';
 							{/if}
 						</div>
 						{#if typeof result?.s3 === 'string'}
-							{#if result?.s3?.endsWith('.parquet') || result?.s3?.endsWith('.csv')}
+							{#if !appPath && (result?.s3?.endsWith('.parquet') || result?.s3?.endsWith('.csv'))}
 								{#key result.s3}
 									<ParqetTableRenderer
 										disable_download={result?.disable_download}
@@ -594,7 +597,7 @@ let seeS3PreviewFileFromList = '';
 									<img
 										alt="preview rendered"
 										class="w-auto h-full"
-										src={`/api/w/${workspaceId}/job_helpers/load_image_preview?file_key=${result.s3}` +
+										src={`/api/w/${workspaceId}/${appPath ? 'apps_u/load_image_preview/' + appPath : 'job_helpers/load_image_preview'}?file_key=${result.s3}` +
 											(result.storage ? `&storage=${result.storage}` : '')}
 									/>
 								</div>
@@ -602,7 +605,7 @@ let seeS3PreviewFileFromList = '';
 								<div class="h-96 mt-2 border">
 									<PdfViewer
 										allowFullscreen
-										source={`/api/w/${workspaceId}/job_helpers/load_image_preview?file_key=${result.s3}` +
+										source={`/api/w/${workspaceId}/${appPath ? 'apps_u/load_image_preview/' + appPath : 'job_helpers/load_image_preview'}?file_key=${result.s3}` +
 											(result.storage ? `&storage=${result.storage}` : '')}
 									/>
 								</div>

package/package/components/DisplayResult.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         drawerOpen?: boolean | undefined;
         nodeId?: string | undefined;
         language?: string | undefined;
+        appPath?: string | undefined;
         forceJson?: boolean | undefined;
     };
     events: {

package/package/components/DropdownV2.svelte

@@ -3,6 +3,7 @@ import Menu from './common/menu/MenuV2.svelte';
 import DropdownV2Inner from './DropdownV2Inner.svelte';
 export let items = [];
 export let justifyEnd = true;
+export let disabled = false;
 async function computeItems() {
     if (typeof items === 'function') {
         return ((await items()) ?? []).filter((item) => !item.hide);
@@ -13,7 +14,7 @@ async function computeItems() {
 }
 </script>
 
-<Menu placement="bottom-end" {justifyEnd} on:close on:open>
+<Menu placement="bottom-end" {justifyEnd} on:close on:open {disabled}>
 	<div slot="trigger">
 		{#if $$slots.buttonReplacement}
 			<slot name="buttonReplacement" />

package/package/components/DropdownV2.svelte.d.ts

@@ -27,6 +27,7 @@ declare const __propDef: {
             hide?: boolean | undefined;
         }[]>) | undefined;
         justifyEnd?: boolean | undefined;
+        disabled?: boolean | undefined;
     };
     events: {
         close: CustomEvent<any>;

package/package/components/EditableSchemaForm.svelte

@@ -197,7 +197,7 @@ let editor = undefined;
 						label="JSON View"
 						size="xs"
 						options={{
-							right: 'JSON Editor',
+							right: 'JSON editor',
 							rightTooltip:
 								'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
 						}}
@@ -522,7 +522,7 @@ let editor = undefined;
 				startIcon={{ icon: Plus }}
 				on:click={() => variableEditor?.initNew?.()}
 			>
-				New Variable
+				New variable
 			</Button>
 		</div>
 	</ItemPicker>