windmill-components 1.542.5 → 1.555.0

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -29,7 +29,6 @@ let selectedTab = $state('inputs');
 let args = $state({});
 function getSchema(runnable) {
     if (runnable?.type == 'runnableByPath') {
-        console.log('runnable.schema', runnable.schema);
         return runnable.schema;
     }
     else if (runnable?.type == 'runnableByName' && runnable.inlineScript) {

package/package/components/raw_apps/RawAppInlineScriptsPanel.svelte

@@ -4,10 +4,7 @@ import { workspaceStore } from '../../stores';
 import RawAppInlineScriptPanelList from './RawAppInlineScriptPanelList.svelte';
 import RawAppInlineScripRunnable from './RawAppInlineScriptRunnable.svelte';
 import { createScriptFromInlineScript } from '../apps/editor/inlineScriptsPanel/utils';
-export let runnables;
-export let selectedRunnable;
-export let appPath;
-export let width = undefined;
+let { runnables, selectedRunnable = $bindable(), appPath, width = undefined } = $props();
 </script>
 
 <Splitpanes
@@ -22,7 +19,7 @@ export let width = undefined;
 			<div class="text-sm text-secondary text-center py-8 px-2">
 				Select a runnable on the left panel
 			</div>
-		{:else if $runnables?.[selectedRunnable]}
+		{:else if runnables?.[selectedRunnable]}
 			{#key selectedRunnable}
 				<RawAppInlineScripRunnable
 					{appPath}
@@ -35,16 +32,13 @@ export let width = undefined;
 						)
 					}}
 					on:delete={() => {
-						runnables.update((runnables) => {
-							if (selectedRunnable) {
-								delete runnables[selectedRunnable]
-							}
-							selectedRunnable = undefined
-							return { ...runnables }
-						})
+						if (selectedRunnable) {
+							delete runnables[selectedRunnable]
+						}
+						selectedRunnable = undefined
 					}}
 					id={selectedRunnable}
-					bind:runnable={$runnables[selectedRunnable]}
+					bind:runnable={runnables[selectedRunnable]}
 				/>{/key}
 		{:else}
 			<div class="text-sm text-tertiary text-center py-8 px-2">

package/package/components/raw_apps/RawAppInlineScriptsPanel.svelte.d.ts

@@ -1,5 +1,10 @@
-import type { Writable } from 'svelte/store';
 import type { Runnable } from '../apps/inputType';
+interface Props {
+    runnables: Record<string, Runnable>;
+    selectedRunnable: string | undefined;
+    appPath: string;
+    width?: number | 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> & {
         $$bindings?: Bindings;
@@ -13,15 +18,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const RawAppInlineScriptsPanel: $$__sveltets_2_IsomorphicComponent<{
-    runnables: Writable<Record<string, Runnable>>;
-    selectedRunnable: string | undefined;
-    appPath: string;
-    width?: number | undefined;
-}, {
+declare const RawAppInlineScriptsPanel: $$__sveltets_2_IsomorphicComponent<Props, {
     hidePanel: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "selectedRunnable">;
 type RawAppInlineScriptsPanel = InstanceType<typeof RawAppInlineScriptsPanel>;
 export default RawAppInlineScriptsPanel;

package/package/components/raw_apps/RawAppPreview.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">import {} from '../../stores';
 import RawAppBackgroundRunner from './RawAppBackgroundRunner.svelte';
 import { htmlContent } from './utils';
-export let workspace;
-export let user;
-export let version;
-export let path;
-export let runnables;
-let iframe;
+let { workspace, user, secret, path, runnables } = $props();
+let iframe = $state();
 </script>
 
 <RawAppBackgroundRunner {workspace} editor={false} {iframe} {runnables} {path} />
@@ -14,6 +10,6 @@ let iframe;
 <iframe
 	bind:this={iframe}
 	title="raw-app"
-	srcDoc={htmlContent(workspace, version, { ctx: user, workspace })}
+	srcDoc={htmlContent(workspace, secret, { ctx: user, workspace })}
 	class="w-full h-full min-h-screen bg-white border-none"
 ></iframe>

package/package/components/raw_apps/RawAppPreview.svelte.d.ts

@@ -1,26 +1,12 @@
 import { type UserExt } from '../../stores';
 import type { HiddenRunnable } from '../apps/types';
-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 RawAppPreview: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     workspace: string;
     user: UserExt | undefined;
-    version: number;
+    secret: string | undefined;
     path: string;
     runnables: Record<string, HiddenRunnable>;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type RawAppPreview = InstanceType<typeof RawAppPreview>;
+}
+declare const RawAppPreview: import("svelte").Component<Props, {}, "">;
+type RawAppPreview = ReturnType<typeof RawAppPreview>;
 export default RawAppPreview;

package/package/components/raw_apps/utils.d.ts

@@ -2,5 +2,5 @@ import type { HiddenRunnable } from '../apps/types';
 export type RawApp = {
     files: string[];
 };
-export declare function htmlContent(workspace: string, version: number, ctx: any): string;
+export declare function htmlContent(workspace: string, secret: string | undefined, ctx: any): string;
 export declare function genWmillTs(runnables: Record<string, HiddenRunnable>): string;

package/package/components/raw_apps/utils.js

@@ -1,20 +1,20 @@
 import { schemaToTsType } from '../../schema';
 import { capitalize } from '../../utils';
-export function htmlContent(workspace, version, ctx) {
+export function htmlContent(workspace, secret, ctx) {
     return `
         <!DOCTYPE html>
         <html>
             <head>
                 <meta charset="UTF-8" />
                 <title>App Preview</title>
-                <link rel="stylesheet" href="/api/w/${workspace}/apps/get_data/v/${version}.css" />
+                <link rel="stylesheet" href="/api/w/${workspace}/apps/get_data/v/${secret}.css" />
 				<script>
 					window.ctx = ${ctx ? JSON.stringify(ctx) : 'undefined'}
 				</script>
             </head>
             <body>
                 <div id="root"></div>
-                <script src="/api/w/${workspace}/apps/get_data/v/${version}.js"></script>
+                <script src="/api/w/${workspace}/apps/get_data/v/${secret}.js"></script>
             </body>
         </html>
     `;

package/package/components/runs/JobsLoader.svelte

@@ -4,7 +4,7 @@ import { sendUserToast } from '../../toast';
 import { workspaceStore } from '../../stores';
 import { tweened } from 'svelte/motion';
 import { subtractDaysFromDateString } from '../../utils';
-let { jobs = $bindable(), user, label = null, worker = null, folder, path, success = undefined, isSkipped = false, showSchedules = true, showFutureJobs = true, argFilter, resultFilter = undefined, schedulePath = undefined, jobKindsCat = undefined, minTs = $bindable(undefined), maxTs = $bindable(undefined), jobKinds = $bindable(''), queue_count = $bindable(undefined), suspended_count = $bindable(undefined), autoRefresh = true, completedJobs = $bindable(undefined), externalJobs = $bindable(undefined), concurrencyKey, tag, extendedJobs = $bindable(undefined), argError = '', resultError = '', loading = $bindable(false), refreshRate = 5000, syncQueuedRunsCount = true, allWorkspaces = false, computeMinAndMax, lookback = 0, perPage = undefined, allowWildcards = false } = $props();
+let { jobs = $bindable(), user, label = null, worker = null, folder, path, success = undefined, isSkipped = false, showSchedules = true, showFutureJobs = true, argFilter, resultFilter = undefined, schedulePath = undefined, jobKindsCat = undefined, minTs = $bindable(undefined), maxTs = $bindable(undefined), jobKinds = $bindable(undefined), queue_count = $bindable(undefined), suspended_count = $bindable(undefined), autoRefresh = true, completedJobs = $bindable(undefined), externalJobs = $bindable(undefined), concurrencyKey, tag, extendedJobs = $bindable(undefined), argError = '', resultError = '', loading = $bindable(false), refreshRate = 5000, syncQueuedRunsCount = true, allWorkspaces = false, computeMinAndMax, lookback = 0, perPage = undefined, allowWildcards = false } = $props();
 let intervalId = $state();
 let sync = true;
 function onParamChanges() {

package/package/components/runs/NoWorkerWithTagWarning.svelte

@@ -7,9 +7,9 @@ let noWorkerWithTag = $state(false);
 let timeout = undefined;
 let visible = true;
 let customTag = $derived.by(() => {
-    if (tag.includes('$workspace') || tag.includes('$args'))
+    if (tag?.includes('$workspace') || tag?.includes('$args'))
         return;
-    if (tag.includes('(')) {
+    if (tag?.includes('(')) {
         return tag.split('(')[0];
     }
     return tag;
@@ -34,7 +34,7 @@ async function lookForTag() {
 }
 $effect(() => {
     customTag;
-    untrack(() => lookForTag());
+    untrack(() => timeout && setTimeout(() => lookForTag(), 2500));
 });
 onDestroy(() => {
     visible = false;

package/package/components/runs/NoWorkerWithTagWarning.svelte.d.ts

@@ -1,5 +1,5 @@
 interface Props {
-    tag: string;
+    tag: string | undefined;
     tagLabel?: string;
 }
 declare const NoWorkerWithTagWarning: import("svelte").Component<Props, {}, "">;

package/package/components/runs/RunOption.svelte

@@ -2,10 +2,10 @@
 let { label, children, tooltip, for: forAttr = '', noLabel = false } = $props();
 </script>
 
-<div class="flex flex-col items-start w-fit">
+<div class="flex flex-col items-start w-fit gap-0.5">
 	<div class="text-xs truncate">
 		{#if forAttr}
-			<label for={forAttr} class:text-transparent={noLabel}>{label}</label>
+			<label for={forAttr} class="text-hint" class:text-transparent={noLabel}>{label}</label>
 		{:else}
 			<span class:text-transparent={noLabel}>{label}</span>
 		{/if}

package/package/components/runs/RunsFilter.svelte

@@ -121,9 +121,10 @@ function resetFilter() {
 		</RunOption>
 	{/if}
 	<!-- Filter by -->
-	<div class="flex flex-row gap-1">
+	<div class="flex flex-row gap-4">
 		<RunOption label="Filter by" for="filter-by">
 			<ToggleButtonGroup
+				class="h-9"
 				bind:selected={filterBy}
 				on:selected={(e) => {
 					if (e.detail != filterBy) {
@@ -164,7 +165,7 @@ function resetFilter() {
 						bind:value={() => user ?? undefined, (v) => (user = v ?? null)}
 						clearable
 						onClear={() => ((user = null), dispatch('reset'))}
-						inputClass="!h-[32px] min-w-36"
+						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (usernames.push(item), (user = item))}
 						createText="Press enter to use this value"
 						id="user"
@@ -179,7 +180,7 @@ function resetFilter() {
 						bind:value={() => folder ?? undefined, (v) => (folder = v ?? null)}
 						clearable
 						onClear={() => ((folder = null), dispatch('reset'))}
-						inputClass="!h-[32px] min-w-36"
+						inputClass="!max-h-9 min-w-36 border-none"
 						id="folder"
 					/>
 				{/key}
@@ -192,7 +193,7 @@ function resetFilter() {
 						bind:value={() => path ?? undefined, (v) => (path = v ?? null)}
 						clearable
 						onClear={() => ((path = null), dispatch('reset'))}
-						inputClass="!h-[32px] min-w-36"
+						inputClass="!max-h-9 min-w-36 border-none"
 						onCreateItem={(item) => (paths.push(item), (path = item))}
 						createText="Press enter to use this value"
 						id="path"
@@ -417,7 +418,7 @@ function resetFilter() {
 	<RunOption label="Kind" for="kind">
 		{#if small && !calendarSmall}
 			<DropdownSelect
-				btnClasses="min-w-24"
+				btnClasses="min-w-24 h-9 bg-surface-secondary font-normal"
 				items={[
 					{
 						displayName: 'All',
@@ -462,7 +463,7 @@ function resetFilter() {
 				selected={jobKindsCat}
 			/>
 		{:else}
-			<ToggleButtonGroup bind:selected={jobKindsCat}>
+			<ToggleButtonGroup bind:selected={jobKindsCat} class="h-9">
 				{#snippet children({ item })}
 					<ToggleButton value="all" label="All" {item} />
 					<ToggleButton
@@ -509,6 +510,7 @@ function resetFilter() {
 	<!-- Status -->
 	<RunOption label="Status" for="status">
 		<ToggleButtonGroup
+			class="h-9"
 			selected={success ?? 'all'}
 			on:selected={({ detail }) => {
 				success = detail === 'all' ? undefined : detail
@@ -523,7 +525,7 @@ function resetFilter() {
 					tooltip="Running"
 					class="whitespace-nowrap"
 					icon={CirclePlay}
-					iconProps={{ color: success === 'running' ? 'blue' : 'gray' }}
+					selectedColor="yellow"
 					{item}
 				/>
 				<ToggleButton
@@ -531,7 +533,7 @@ function resetFilter() {
 					tooltip="Success"
 					class="whitespace-nowrap"
 					icon={CircleCheck}
-					iconProps={{ color: success === 'success' ? 'green' : 'gray' }}
+					selectedColor="green"
 					{item}
 				/>
 				<ToggleButton
@@ -539,7 +541,7 @@ function resetFilter() {
 					tooltip="Failure"
 					class="whitespace-nowrap"
 					icon={CircleAlert}
-					iconProps={{ color: success === 'failure' ? 'red' : 'gray' }}
+					selectedColor="red"
 					{item}
 				/>
 				{#if success == 'waiting'}
@@ -548,7 +550,7 @@ function resetFilter() {
 						tooltip="Waiting"
 						class="whitespace-nowrap"
 						icon={Hourglass}
-						iconProps={{ color: 'blue' }}
+						selectedColor="blue"
 						{item}
 					/>
 				{:else if success == 'suspended'}
@@ -557,7 +559,7 @@ function resetFilter() {
 						tooltip="Suspended"
 						class="whitespace-nowrap"
 						icon={Hourglass}
-						iconProps={{ color: 'blue' }}
+						selectedColor="purple"
 						{item}
 					/>
 				{/if}
@@ -576,11 +578,12 @@ function resetFilter() {
 		{#snippet trigger()}
 			<Button
 				color="light"
-				variant="border"
+				variant="contained"
 				size="xs"
 				nonCaptureEvent={true}
 				startIcon={{ icon: ListFilterPlus }}
 				iconOnly
+				btnClasses="bg-surface-secondary py-[8.5px]"
 			></Button>
 		{/snippet}
 

package/package/components/runs/RunsFilter.svelte.d.ts

@@ -42,6 +42,6 @@ declare const RunsFilter: $$__sveltets_2_IsomorphicComponent<Props, {
     successChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "path" | "folder" | "user" | "tag" | "success" | "worker" | "label" | "isSkipped" | "argFilter" | "resultFilter" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
+}, {}, {}, "path" | "user" | "folder" | "tag" | "success" | "worker" | "label" | "isSkipped" | "argFilter" | "resultFilter" | "schedulePath" | "jobKindsCat" | "concurrencyKey" | "argError" | "resultError" | "allWorkspaces" | "allowWildcards" | "filterBy">;
 type RunsFilter = InstanceType<typeof RunsFilter>;
 export default RunsFilter;

package/package/components/schema/AddPropertyV2.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">import { modalToSchema } from '../../common';
 import { emptySchema, sendUserToast } from '../../utils';
+import { untrack } from 'svelte';
 import AddPropertyFormV2 from './AddPropertyFormV2.svelte';
-let { schema = $bindable(emptySchema()), trigger, noPopover, onAddNew } = $props();
+let { schema = $bindable(undefined), trigger, noPopover, onAddNew } = $props();
 export const DEFAULT_PROPERTY = {
     selectedType: 'string',
     description: '',
     name: '',
     required: false
 };
-if (!schema) {
-    schema = emptySchema();
-}
+$effect.pre(() => {
+    if (!schema) {
+        untrack(() => (schema = emptySchema()));
+    }
+});
 // Internal state: bound to args builder modal
 let argError = '';
 let editing = false;

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -191,24 +191,25 @@ const rnd = generateRandomString();
 		{/snippet}
 	</Drawer>
 {:else}
-	<div class="mt-2"></div>
-	<SimpleEditor
-		bind:this={editor}
-		small
-		fixedOverflowWidgets={false}
-		on:change={() => {
-			try {
-				schema = JSON.parse(schemaString)
-				error = ''
-			} catch (err) {
-				error = err.message
-			}
-		}}
-		bind:code={schemaString}
-		lang="json"
-		autoHeight
-		automaticLayout
-	/>
+	<div class="mt-2 bg-surface-secondary rounded-md border py-2.5">
+		<SimpleEditor
+			bind:this={editor}
+			small
+			fixedOverflowWidgets={false}
+			on:change={() => {
+				try {
+					schema = JSON.parse(schemaString)
+					error = ''
+				} catch (err) {
+					error = err.message
+				}
+			}}
+			bind:code={schemaString}
+			lang="json"
+			autoHeight
+			automaticLayout
+		/>
+	</div>
 	{#if !emptyString(error)}
 		<div class="text-red-400 text-xs">{error}</div>
 	{:else}

package/package/components/schema/FlowPropertyEditor.svelte

@@ -15,6 +15,11 @@ import ResourcePicker from '../ResourcePicker.svelte';
 import { DynamicInput } from '../../utils';
 let { format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = undefined, password = undefined, variableEditor = undefined, itemPicker = undefined, nullable = $bindable(undefined), disabled = $bindable(undefined), defaultValue = $bindable(undefined), propsNames = [], showExpr = $bindable(undefined), extra = {}, customErrorMessage = undefined, itemsType = undefined, properties = $bindable(undefined), order = $bindable(undefined), requiredProperty = $bindable(undefined), displayWebhookWarning = true, onDrawerClose = undefined } = $props();
 let oneOfSelected = $state(oneOf?.[0]?.title);
+$effect(() => {
+    if (oneOf?.length && !oneOfSelected) {
+        oneOfSelected = oneOf[0].title;
+    }
+});
 const dispatch = createEventDispatcher();
 function getResourceTypesFromFormat(format) {
     if (format?.startsWith('resource-')) {
@@ -372,9 +377,10 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 			showExpr = showExpr ? undefined : 'true //fields.foo == 42'
 		}}
 	/>
-	{#if showExpr != undefined}
-		<div class="border">
+	{#if showExpr}
+		<div class="mt-2 bg-surface-secondary rounded-md pl-4">
 			<SimpleEditor
+				yPadding={8}
 				extraLib={`declare const fields: Record<${propsNames
 					?.filter((x) => x != name)
 					.map((x) => `"${x}"`)
@@ -383,6 +389,7 @@ let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-sche
 				bind:code={showExpr}
 				shouldBindKey={false}
 				fixedOverflowWidgets={false}
+				hideLineNumbers
 				autoHeight
 			/>
 		</div>

package/package/components/schema/FlowPropertyEditor.svelte.d.ts

@@ -47,6 +47,6 @@ declare const FlowPropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     requiredChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "disabled" | "properties" | "defaultValue" | "oneOf" | "format" | "order" | "nullable" | "showExpr" | "requiredProperty">;
+}, {}, {}, "disabled" | "properties" | "oneOf" | "format" | "defaultValue" | "order" | "nullable" | "showExpr" | "requiredProperty">;
 type FlowPropertyEditor = InstanceType<typeof FlowPropertyEditor>;
 export default FlowPropertyEditor;

package/package/components/schema/PropertyEditor.svelte

@@ -12,6 +12,7 @@ import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelt
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 import { createEventDispatcher, onMount, untrack } from 'svelte';
 import { createDispatcherIfMounted } from '../../createDispatcherIfMounted';
+import TextInput, { inputBaseClass, inputBorderClass } from '../text_input/TextInput.svelte';
 let { description = $bindable(undefined), format = $bindable(undefined), contentEncoding = $bindable(undefined), type = undefined, oneOf = $bindable(), pattern = $bindable(undefined), enum_ = $bindable(undefined), extra = $bindable({}), minW = true, customErrorMessage = $bindable(undefined), title = $bindable(undefined), placeholder = $bindable(undefined), properties = $bindable(), isFlowInput = false, isAppInput = false, order = $bindable(), itemsType = $bindable(undefined), typeeditor, children } = $props();
 $effect.pre(() => {
     if (description == undefined) {
@@ -112,6 +113,7 @@ $effect(() => {
 				onkeydown={onKeyDown}
 				onchange={() => dispatch('change')}
 				placeholder="Field description"
+				class={twMerge(inputBorderClass(), inputBaseClass, 'w-full')}
 			></textarea>
 		</Label>
 
@@ -119,30 +121,31 @@ $effect(() => {
 			{#snippet header()}
 				<Tooltip light>Will be displayed in the UI instead of the field name.</Tooltip>
 			{/snippet}
-			<input
+			<TextInput
 				bind:value={title}
-				onchange={() => dispatch('change')}
-				onkeydown={onKeyDown}
-				placeholder="Field title"
+				inputProps={{ placeholder: 'Field title', onkeydown, onchange: () => dispatch('change') }}
 			/>
 		</Label>
 
-		<Label label="Placeholder">
-			{#snippet header()}
-				<Tooltip light>
-					Will be displayed in the input field when the field is empty. If not set, the default
-					value will be used. The placeholder is disabled depending on the field type, format, etc.
-				</Tooltip>
-			{/snippet}
+		{#if shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern, extra)}
+			<Label label="Placeholder">
+				{#snippet header()}
+					<Tooltip light>
+						Will be displayed in the input field when the field is empty. If not set, the default
+						value will be used. The placeholder is disabled depending on the field type, format,
+						etc.
+					</Tooltip>
+				{/snippet}
 
-			<textarea
-				placeholder="Enter a placeholder"
-				rows="1"
-				bind:value={placeholder}
-				onchange={() => dispatch('change')}
-				disabled={!shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern, extra)}
-			></textarea>
-		</Label>
+				<textarea
+					placeholder="Enter a placeholder"
+					rows="1"
+					bind:value={placeholder}
+					onchange={() => dispatch('change')}
+					class={twMerge(inputBorderClass(), inputBaseClass, 'w-full')}
+				></textarea>
+			</Label>
+		{/if}
 
 		{#if type == 'array'}
 			<ArrayTypeNarrowing
@@ -218,10 +221,3 @@ $effect(() => {
 		{@render children?.()}
 	</div>
 </div>
-
-<style>
-	input::-webkit-outer-spin-button,
-	input::-webkit-inner-spin-button {
-		-webkit-appearance: none !important;
-		margin: 0;
-	}</style>

package/package/components/schema/PropertyEditor.svelte.d.ts

@@ -46,6 +46,6 @@ declare const PropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     focus: () => void;
-}, "description" | "title" | "properties" | "placeholder" | "pattern" | "extra" | "oneOf" | "format" | "order" | "enum_" | "contentEncoding" | "customErrorMessage" | "itemsType">;
+}, "description" | "title" | "pattern" | "properties" | "placeholder" | "extra" | "oneOf" | "format" | "order" | "enum_" | "contentEncoding" | "customErrorMessage" | "itemsType">;
 type PropertyEditor = InstanceType<typeof PropertyEditor>;
 export default PropertyEditor;

package/package/components/schema/SchemaFormDND.svelte

@@ -4,7 +4,7 @@ import SchemaForm from '../SchemaForm.svelte';
 import { GripVertical } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
 import { generateRandomString } from '../../utils';
-let { schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false, className = '', dndType = generateRandomString() } = $props();
+let { schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false, className = '', dndType = generateRandomString(), lightHeaderFont } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -83,10 +83,11 @@ $effect(() => {
 	{shouldDispatchChanges}
 	bind:isValid
 	{noVariablePicker}
+	{lightHeaderFont}
 >
 	{#snippet actions()}
 		{#if !disableDnd}
-			<div class="w-4 h-8 cursor-move ml-2 handle" aria-label="drag-handle" use:dragHandle>
+			<div class="w-4 h-8 cursor-move ml-2 handle mt-[9px]" aria-label="drag-handle" use:dragHandle>
 				<GripVertical size={16} />
 			</div>
 		{/if}

package/package/components/schema/SchemaFormDND.svelte.d.ts

@@ -22,6 +22,7 @@ interface Props {
     helperScript?: DynamicInput.HelperScript;
     className?: string;
     dndType?: string;
+    lightHeaderFont?: boolean;
 }
 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/select/DraggableTags.svelte

@@ -21,7 +21,7 @@ let dragPos = $state([0, 0]);
 		role="listitem"
 		class={twMerge(
 			allowClear ? 'pr-1' : 'pr-3',
-			'pl-3 min-h-6 bg-surface-secondary rounded-full flex items-center gap-0.5',
+			'pl-3 min-h-6 border bg-surface rounded-full flex items-center gap-0.5',
 			currentlyDraggingIndex !== undefined ? 'hover:opacity-20' : ''
 		)}
 		style={currentlyDraggingIndex === index
@@ -45,7 +45,7 @@ let dragPos = $state([0, 0]);
 		<span class="text-sm select-none">{item.label || item.value}</span>
 		{#if allowClear}
 			<CloseButton
-				class="text-tertiary"
+				class="text-hint bg-transparent"
 				small
 				on:close={(e) => (onRemove(item), e.stopPropagation())}
 			/>