windmill-components 1.550.0 → 1.555.1

package/package/components/RunForm.svelte

@@ -158,7 +158,7 @@ $effect(() => {
 	{#if topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
-			disabled={!isValid || jsonView}
+			disabled={!isValid && !jsonView}
 			on:click={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
 		>
 			{buttonText}
@@ -166,10 +166,12 @@ $effect(() => {
 	{/if}
 	{#if runnable?.schema}
 		<div class="my-2"></div>
-		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
-			<div class="text-sm py-4 italic">No arguments</div>
-		{:else if jsonView}
-			<div class="py-2" style="height: {schemaHeight}px" data-schema-picker>
+		{#if jsonView}
+			<div
+				class="py-2"
+				style="height: {!schemaHeight || schemaHeight < 600 ? 600 : schemaHeight}px"
+				data-schema-picker
+			>
 				<JsonInputs
 					bind:this={jsonEditor}
 					on:select={(e) => {
@@ -181,6 +183,8 @@ $effect(() => {
 					placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
 				/>
 			</div>
+		{:else if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
+			<div class="text-sm py-4 italic">No arguments</div>
 		{:else}
 			{#key reloadArgs}
 				<div bind:clientHeight={schemaHeight}>
@@ -211,7 +215,7 @@ $effect(() => {
 					{loading}
 					color="dark"
 					btnClasses="!px-6 !py-1 !h-8 inline-flex gap-2"
-					disabled={!isValid || jsonView}
+					disabled={!isValid && !jsonView}
 					on:click={() => runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag)}
 					shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 				>
@@ -249,7 +253,7 @@ $effect(() => {
 	{:else if !topButton}
 		<Button
 			btnClasses="!px-6 !py-1 w-full"
-			disabled={!isValid || jsonView}
+			disabled={!isValid && !jsonView}
 			on:click={() => runAction(undefined, args ?? {}, invisible_to_owner, overrideTag)}
 			shortCut={{ Icon: CornerDownLeft, hide: !viewKeybinding }}
 		>

package/package/components/S3ArrayHelperButton.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">import { Button } from './common';
 import { Plug } from 'lucide-svelte';
-let { label = 'Add object from an expression', onClick, connecting = false } = $props();
+let { label = 'Add object from an expression', onClick, connecting = false, class: className = '' } = $props();
 </script>
 
 {#if !connecting}
-	<div class="mt-2 mb-2">
-		<Button variant="border" color="light" size="xs" startIcon={{ icon: Plug }} onclick={onClick}>
-			{label}
-		</Button>
-	</div>
+	<Button
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="font-normal text-tertiary"
+		startIcon={{ icon: Plug }}
+		onclick={onClick}
+		wrapperClasses={className}
+	>
+		{label}
+	</Button>
 {/if}

package/package/components/S3ArrayHelperButton.svelte.d.ts

@@ -2,6 +2,7 @@ interface Props {
     label?: string;
     onClick: () => void;
     connecting?: boolean;
+    class?: string;
 }
 declare const S3ArrayHelperButton: import("svelte").Component<Props, {}, "">;
 type S3ArrayHelperButton = ReturnType<typeof S3ArrayHelperButton>;

package/package/components/S3FilePicker.svelte

@@ -717,7 +717,7 @@ $effect.pre(() => {
 			<div class="flex gap-1">
 				{#if secondaryStorageNames.value?.length}
 					<Select
-						inputClass="h-10 min-w-44 !placeholder-primary"
+						inputClass="h-10 min-w-44 !placeholder-secondary"
 						items={[
 							{ value: undefined, label: 'Default storage' },
 							...secondaryStorageNames.value.map((value) => ({ value }))

package/package/components/SchemaForm.svelte

@@ -14,7 +14,9 @@ import ArgInput from './ArgInput.svelte';
 import { createEventDispatcher, untrack } from 'svelte';
 import { deepEqual } from 'fast-equals';
 import { dragHandleZone } from '@windmill-labs/svelte-dnd-action';
-let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', computeS3ForceViewerPolicies = undefined, workspace = undefined, actions: actions_render = undefined } = $props();
+import ResizeTransitionWrapper from './common/ResizeTransitionWrapper.svelte';
+import { twMerge } from 'tailwind-merge';
+let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', lightHeaderFont = false, computeS3ForceViewerPolicies = undefined, workspace = undefined, actions: actions_render = undefined } = $props();
 const dispatch = createEventDispatcher();
 let inputCheck = $state({});
 export function setDefaults() {
@@ -155,10 +157,15 @@ $effect.pre(() => {
 	{#if keys.length > 0 && args}
 		{#each fields as item, i (item.id)}
 			{@const argName = item.value}
-			<div
-				class={typeof diff[argName] === 'object' && diff[argName].diff !== 'same'
-					? 'bg-red-300 dark:bg-red-800 rounded-md'
-					: ''}
+			<ResizeTransitionWrapper
+				vertical
+				class={twMerge(
+					typeof diff[argName] === 'object' &&
+						diff[argName].diff !== 'same' &&
+						'bg-red-300 dark:bg-red-800 rounded-md',
+					'relative'
+				)}
+				innerClass="w-full"
 			>
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				{#if !hiddenArgs.includes(argName) && keys.includes(argName)}
@@ -166,6 +173,7 @@ $effect.pre(() => {
 						{@const formerProperty = diff[argName].oldSchema}
 						<div class="px-2">
 							<ArgInput
+								{lightHeaderFont}
 								{disablePortal}
 								{resourceTypes}
 								{prettifyHeader}
@@ -228,6 +236,7 @@ $effect.pre(() => {
 							{JSON.stringify(args?.[argName])} -->
 							{#if !hidden[argName]}
 								<ArgInput
+									{lightHeaderFont}
 									on:change={() => {
 										dispatch('change')
 									}}
@@ -289,7 +298,7 @@ $effect.pre(() => {
 									{displayType}
 								>
 									{#snippet actions()}
-										{@render actions_render?.()}
+										{@render actions_render?.({ item })}
 										{#if linkedSecretCandidates?.includes(argName)}
 											<div>
 												<ToggleButtonGroup
@@ -305,15 +314,14 @@ $effect.pre(() => {
 													{#snippet children({ item })}
 														<ToggleButton
 															value="inlined"
-															size="sm"
+															small
 															label="Inlined"
 															tooltip="The value is inlined in the resource and thus has no special treatment."
 															{item}
 														/>
 														<ToggleButton
-															position="right"
 															value="secret"
-															size="sm"
+															small
 															label="Secret"
 															tooltip="The value will be stored in a newly created linked secret variable at the same path. That variable can be permissioned differently, will be treated as a secret the UI, operators will not be able to load it and every access will generate a corresponding audit log."
 															{item}
@@ -329,7 +337,7 @@ $effect.pre(() => {
 						{/if}
 					</div>
 				{/if}
-			</div>
+			</ResizeTransitionWrapper>
 		{/each}
 	{:else if !shouldHideNoInputs}
 		<div class="text-secondary text-sm">No inputs</div>

package/package/components/SchemaForm.svelte.d.ts

@@ -45,6 +45,7 @@ interface Props {
     displayType?: boolean;
     appPath?: string | undefined;
     className?: string;
+    lightHeaderFont?: boolean;
     computeS3ForceViewerPolicies?: (() => {
         allowed_resources: string[];
         allow_user_resources: boolean;
@@ -52,7 +53,12 @@ interface Props {
         file_key_regex: string;
     } | undefined) | undefined;
     workspace?: string | undefined;
-    actions?: import('svelte').Snippet;
+    actions?: import('svelte').Snippet<[{
+        item: {
+            id: string;
+            value: string;
+        };
+    }]> | undefined;
 }
 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> & {

package/package/components/SchemaFormWithArgPicker.svelte

@@ -81,7 +81,7 @@ let savedInputsPicker = undefined;
 let loading = false;
 let captureTable = undefined;
 let historicInputs = undefined;
-$: selectedTab, (dropdownItems = getDropdownItems());
+$: (selectedTab, (dropdownItems = getDropdownItems()));
 let inputPanelSize = 70;
 </script>
 

package/package/components/ScriptBuilder.svelte

@@ -221,7 +221,7 @@ async function isTemplateScript() {
         return templateScript;
     }
     catch (error) {
-        sendUserToast('An error occured when trying to load your template script, please try again later', true);
+        sendUserToast('An error occurred when trying to load your template script, please try again later', true);
     }
 }
 async function initContent(language, kind, template) {
@@ -1492,7 +1492,7 @@ async function loadWorkerTags() {
 							{#if $workerTags?.length ?? 0 > 0}
 								<div class="max-w-[200px] pr-8">
 									<WorkerTagSelect
-										inputClass="text-sm text-secondary !placeholder-secondary"
+										inputClass="text-sm text-secondary !h-8 !placeholder-secondary"
 										nullTag={script.language}
 										placeholder={customUi?.tagSelectPlaceholder}
 										bind:tag={script.tag}

package/package/components/ScriptEditor.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { BROWSER } from 'esm-env';
 import { JobService } from '../gen';
-import { copilotInfo, enterpriseLicense, userStore, workspaceStore } from '../stores';
+import { enterpriseLicense, userStore, workspaceStore } from '../stores';
 import { copyToClipboard, emptySchema, sendUserToast } from '../utils';
 import Editor from './Editor.svelte';
 import { inferArgs, inferAssets } from '../infer';
@@ -36,6 +36,7 @@ import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte';
 import { assetEq } from './assets/lib';
 import { editor as meditor } from 'monaco-editor';
+import { copilotInfo } from '../aiStore';
 let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right, enablePreprocessorSnippet = false } = $props();
 $effect.pre(() => {
     if (schema == undefined) {
@@ -391,7 +392,7 @@ $effect(() => {
 						icon: Github
 					}}
 				>
-					Use VScode
+					VScode
 				</Button>
 			</div>
 		{/if}
@@ -400,7 +401,7 @@ $effect(() => {
 <SplitPanesWrapper>
 	<Splitpanes class="!overflow-visible">
 		<Pane bind:size={codePanelSize} minSize={10} class="!overflow-visible">
-			<div class="h-full !overflow-visible bg-gray-50 dark:bg-[#272D38] relative">
+			<div class="h-full !overflow-visible bg-surface dark:bg-[#272D38] relative">
 				<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
 					{#if assets?.length}
 						<AssetsDropdownButton {assets} />

package/package/components/ScriptEditor.svelte.d.ts

@@ -75,6 +75,6 @@ declare const ScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     setCollaborationMode: () => Promise<void>;
     disableCollaboration: () => void;
     updateArgs: (newArgs: Record<string, any>) => Promise<void>;
-}, "args" | "code" | "assets" | "schema" | "editor" | "selectedTab" | "diffEditor" | "hasPreprocessor" | "captureTable">;
+}, "args" | "code" | "assets" | "schema" | "selectedTab" | "editor" | "diffEditor" | "hasPreprocessor" | "captureTable">;
 type ScriptEditor = InstanceType<typeof ScriptEditor>;
 export default ScriptEditor;

package/package/components/ShareModal.svelte

@@ -93,8 +93,8 @@ async function addAcl(owner, write) {
 						<div>
 							<ToggleButtonGroup bind:selected={ownerKind} on:selected={() => (owner = '')}>
 								{#snippet children({ item })}
-									<ToggleButton value="user" size="xs" label="User" {item} />
-									<ToggleButton value="group" size="xs" label="Group" {item} />
+									<ToggleButton value="user" small label="User" {item} />
+									<ToggleButton value="group" small label="Group" {item} />
 								{/snippet}
 							</ToggleButtonGroup>
 						</div>
@@ -139,8 +139,8 @@ async function addAcl(owner, write) {
 													}}
 												>
 													{#snippet children({ item })}
-														<ToggleButton value="viewer" size="xs" label="Viewer" {item} />
-														<ToggleButton value="writer" size="xs" label="Writer" {item} />
+														<ToggleButton value="viewer" small label="Viewer" {item} />
+														<ToggleButton value="writer" small label="Writer" {item} />
 													{/snippet}
 												</ToggleButtonGroup>
 											</div>

package/package/components/SimpleEditor.svelte

@@ -46,7 +46,7 @@ let suggestion = $state('');
 let placeholderVisible = $state(false);
 let mounted = $state(false);
 let valueAfterDispose = undefined;
-let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', loadAsync = false, key, disabled = false, minHeight = 1000 } = $props();
+let { lang, code = $bindable(), hash = createHash(), cmdEnterAction, formatAction, automaticLayout = true, extraLib = '', placeholder = '', disableSuggestions = false, disableLinting = false, hideLineNumbers = false, shouldBindKey = true, autoHeight = false, fixedOverflowWidgets = true, small = false, domLib = false, autofocus = false, allowVim = false, tailwindClasses = [], class: className = '', fakeMonacoPlaceholderClass = '', loadAsync = false, key, disabled = false, minHeight = 1000, renderLineHighlight = 'none', yPadding } = $props();
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
 export function getCode() {
@@ -229,6 +229,8 @@ async function loadMonaco() {
         editor = meditor.create(divEl, {
             ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
             model,
+            ...(yPadding !== undefined ? { padding: { bottom: yPadding, top: yPadding } } : {}),
+            renderLineHighlight,
             lineDecorationsWidth: 6,
             lineNumbersMinChars: 2,
             fontSize: fontSize,
@@ -480,9 +482,11 @@ updatePlaceholderVisibility(code ?? '');
 	<FakeMonacoPlaceHolder
 		{code}
 		autoheight
-		lineNumbersWidth={(23 * fontSize) / 14}
+		lineNumbersWidth={hideLineNumbers ? 0 : (23 * fontSize) / 14}
 		lineNumbersOffset={fontSize == 14 ? -8 : -11}
 		{fontSize}
+		showNumbers={!hideLineNumbers}
+		class={fakeMonacoPlaceholderClass}
 	/>
 {/if}
 

package/package/components/SimpleEditor.svelte.d.ts

@@ -25,11 +25,14 @@ type $$ComponentProps = {
     allowVim?: boolean;
     tailwindClasses?: string[];
     class?: string;
+    fakeMonacoPlaceholderClass?: string;
     loadAsync?: boolean;
     initialCursorPos?: IPosition;
     key?: string;
     disabled?: boolean;
     minHeight?: number;
+    renderLineHighlight?: 'all' | 'line' | 'gutter' | 'none';
+    yPadding?: number;
 };
 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> & {

package/package/components/StringTypeNarrowing.svelte

@@ -9,6 +9,7 @@ import ClearableInput from './common/clearableInput/ClearableInput.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import RegexGen from './copilot/RegexGen.svelte';
+import TextInput from './text_input/TextInput.svelte';
 let { pattern = $bindable(), enum_ = $bindable(), format = $bindable(), contentEncoding = $bindable(), customErrorMessage = $bindable(), minRows = $bindable(undefined), disableCreate = $bindable(undefined), disableVariablePicker = $bindable(undefined), password = $bindable(undefined), noExtra = false, dateFormat = $bindable(), enumLabels = $bindable(undefined), overrideAllowKindChange = true, originalType = undefined } = $props();
 let kind = $state(computeKind(enum_, contentEncoding, pattern, format));
 const allowKindChange = overrideAllowKindChange || originalType === 'string';
@@ -292,7 +293,10 @@ function onEnumKeyChange(oldKey, newKey) {
 	{:else if kind == 'none'}
 		{#if !noExtra}
 			<Label label="Min textarea rows">
-				<input type="number" bind:value={minRows} />
+				<TextInput
+					inputProps={{ type: 'number' }}
+					bind:value={() => minRows?.toString(), (v) => (minRows = v ? parseInt(v) : undefined)}
+				/>
 			</Label>
 		{/if}
 	{:else if kind === 'base64'}

package/package/components/SuperadminSettingsInner.svelte

@@ -288,17 +288,17 @@ async function updateName(name, email) {
 															}}
 														>
 															{#snippet children({ item })}
-																<ToggleButton value={'user'} size="xs" label="User" {item} />
+																<ToggleButton value={'user'} small label="User" {item} />
 																<ToggleButton
 																	value={'devops'}
-																	size="xs"
+																	small
 																	label="Devops"
 																	tooltip="Devops is a role that grants visibilty similar to that of a super admin, but without giving all rights. For example devops users can see service logs and crtical alerts. You can think of it as a 'readonly' super admin"
 																	{item}
 																/>
 																<ToggleButton
 																	value={'super_admin'}
-																	size="xs"
+																	small
 																	label="Superadmin"
 																	{item}
 																/>

package/package/components/TemplateEditor.svelte

@@ -15,6 +15,7 @@ import { initializeVscode } from './vscode';
 import EditorTheme from './EditorTheme.svelte';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
 import { setMonacoJsonOptions } from './monacoLanguagesOptions';
+import { inputBorderClass } from './text_input/TextInput.svelte';
 export const conf = {
     wordPattern: /(-?\d*\.\d\w*)|([^\`\~\!\@\#\%\^\&\*\(\)\-\=\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
     comments: {
@@ -388,7 +389,13 @@ async function loadMonaco() {
             lineDecorationsWidth: 6,
             lineNumbersMinChars: 2,
             fontSize,
-            suggestOnTriggerCharacters: true
+            suggestOnTriggerCharacters: true,
+            renderLineHighlight: 'none',
+            lineNumbers: 'off',
+            padding: {
+                bottom: 8,
+                top: 8
+            }
         });
     }
     catch (e) {
@@ -431,9 +438,11 @@ async function loadMonaco() {
     }
     editor.onDidFocusEditorText(() => {
         dispatch('focus');
+        isFocus = true;
     });
     editor.onDidBlurEditorText(() => {
         dispatch('blur');
+        isFocus = false;
         updateCode();
     });
     jsLoader = setTimeout(async () => {
@@ -509,6 +518,7 @@ async function loadMonaco() {
 export function focus() {
     editor?.focus();
 }
+let isFocus = false;
 let mounted = false;
 let loadTimeout = undefined;
 onMount(async () => {
@@ -562,19 +572,18 @@ onDestroy(() => {
 {#if !editor}
 	<FakeMonacoPlaceHolder
 		autoheight
+		showNumbers={false}
 		{code}
-		lineNumbersWidth={23}
-		lineNumbersOffset={-8}
-		class="border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip"
+		lineNumbersWidth={14}
+		lineNumbersOffset={-20}
+		class="template nonmain-editor rounded-md min-h-4 bg-surface-secondary !py-[9px] overflow-clip"
 	/>
 {/if}
 <div
 	bind:this={divEl}
-	style="height: 18px;"
-	class="{$$props.class ??
-		''} border template nonmain-editor rounded min-h-4 mx-0.5 overflow-clip {!editor
-		? 'hidden'
-		: ''}"
+	style="height: 18px; padding-left: 6px;"
+	class="{inputBorderClass({ forceFocus: isFocus })} {$$props.class ??
+		''} template nonmain-editor rounded-md min-h-4 overflow-clip {!editor ? 'hidden' : ''}"
 	bind:clientWidth={width}
 ></div>
 

package/package/components/Toast.svelte

@@ -3,12 +3,7 @@ import { CheckCircle2, XCircleIcon } from 'lucide-svelte';
 import { onMount } from 'svelte';
 import Button from './common/button/Button.svelte';
 import { processMessage } from './toast';
-export let message;
-export let toastId;
-export let error = false;
-export let actions = [];
-export let errorMessage = undefined;
-export let duration = 5000;
+let { message, toastId, error = false, actions = [], errorMessage = undefined, duration = 5000 } = $props();
 function handleClose() {
     toast.pop(toastId);
 }
@@ -46,7 +41,7 @@ onMount(() => {
 			<div class="ml-4 flex flex-shrink-0">
 				<button
 					type="button"
-					on:click={handleClose}
+					onclick={handleClose}
 					class="inline-flex rounded-md bg-surface-secondary text-gray-400 hover:text-tertiary focus:outline-none"
 				>
 					<span class="sr-only">Close</span>

package/package/components/Toast.svelte.d.ts

@@ -1,26 +1,12 @@
 import type { ToastAction } from '../toast';
-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 Toast: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     message: string;
     toastId: string;
     error?: boolean;
     actions?: ToastAction[];
     errorMessage?: string | undefined;
     duration?: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toast = InstanceType<typeof Toast>;
+}
+declare const Toast: import("svelte").Component<Props, {}, "">;
+type Toast = ReturnType<typeof Toast>;
 export default Toast;

package/package/components/Toggle.svelte

@@ -4,12 +4,13 @@ import { twMerge } from 'tailwind-merge';
 import Tooltip from './Tooltip.svelte';
 import { AlertTriangle } from 'lucide-svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
+import { inputBorderClass } from './text_input/TextInput.svelte';
 export let options = {};
 export let checked = false;
 export let disabled = false;
 export let textClass = '';
 export let textStyle = '';
-export let color = 'blue';
+export let color = 'nord';
 export let id = (Math.random() + 1).toString(36).substring(10);
 export let lightMode = false;
 export let eeOnly = false;
@@ -31,8 +32,12 @@ export let textDisabled = false;
 	{#if Boolean(options?.left)}
 		<span
 			class={twMerge(
-				'mr-2 font-medium duration-50 select-none',
-				bothOptions || textDisabled ? (checked ? 'text-disabled' : 'text-primary') : 'text-primary',
+				'mr-2 font-normal duration-50 select-none',
+				bothOptions || textDisabled
+					? checked
+						? 'text-disabled'
+						: 'text-tertiary'
+					: 'text-tertiary',
 				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-[0.5rem]' : 'text-sm',
 				textClass
 			)}
@@ -77,22 +82,27 @@ export let textDisabled = false;
 					? 'peer-checked:bg-red-600'
 					: color == 'blue'
 						? 'peer-checked:bg-blue-600 dark:peer-checked:bg-blue-500'
-						: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-400',
+						: 'peer-checked:bg-nord-950 dark:peer-checked:bg-nord-900',
 				size === 'sm'
 					? 'w-11 h-6 after:top-0.5 after:left-[2px] after:h-5 after:w-5'
 					: size === '2sm'
 						? 'w-9 h-5 after:top-0.5 after:left-[2px] after:h-4 after:w-4'
 						: size === '2xs'
 							? 'w-5 h-3 after:top-0.5 after:left-[2px] after:h-2 after:w-2'
-							: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3'
+							: 'w-7 h-4 after:top-0.5 after:left-[2px] after:h-3 after:w-3',
+				inputBorderClass()
 			)}
 		></div>
 	</div>
 	{#if Boolean(options?.right)}
 		<span
 			class={twMerge(
-				'ml-2 font-medium duration-50 select-none',
-				bothOptions || textDisabled ? (checked ? 'text-primary' : 'text-disabled') : 'text-primary',
+				'ml-2 font-normal duration-50 select-none',
+				bothOptions || textDisabled
+					? checked
+						? 'text-secondary'
+						: 'text-disabled'
+					: 'text-secondary',
 				size === 'xs' || size === '2sm' ? 'text-xs' : size === '2xs' ? 'text-xs' : 'text-sm',
 				textClass
 			)}

package/package/components/ToggleHubWorkspaceQuick.svelte

@@ -8,9 +8,9 @@ let { selected = $bindable('all') } = $props();
 <div class="max-w-min">
 	<ToggleButtonGroup id="flow-editor-flow-providers" bind:selected>
 		{#snippet children({ item })}
-			<ToggleButton value="all" label="All" light small {item} />
-			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light small {item} />
-			<ToggleButton value="workspace" icon={Building} label="Workspace" light small {item} />
+			<ToggleButton value="all" label="All" light {item} />
+			<ToggleButton value="hub" icon={WindmillIcon2} label="Hub" light {item} />
+			<ToggleButton value="workspace" icon={Building} label="Workspace" light {item} />
 		{/snippet}
 	</ToggleButtonGroup>
 </div>

package/package/components/WorkerGroup.svelte

@@ -187,20 +187,8 @@ $effect(() => {
 			class="mb-4"
 		>
 			{#snippet children({ item })}
-				<ToggleButton
-					position="left"
-					value="normal"
-					size="sm"
-					label="Any jobs within worker tags"
-					{item}
-				/>
-				<ToggleButton
-					position="dedicated"
-					value="dedicated"
-					size="sm"
-					label="Dedicated to a script/flow"
-					{item}
-				/>
+				<ToggleButton value="normal" small label="Any jobs within worker tags" {item} />
+				<ToggleButton value="dedicated" small label="Dedicated to a script/flow" {item} />
 			{/snippet}
 		</ToggleButtonGroup>
 		{#if selected == 'normal'}