windmill-components 1.57.3 → 1.58.1

package/components/ArgInput.svelte

@@ -1,6 +1,6 @@
 <script>import { faChevronDown, faChevronUp, faDollarSign, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
-import { Button } from './common';
+import { Badge, Button } from './common';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import FieldHeader from './FieldHeader.svelte';
@@ -13,6 +13,8 @@ import SimpleEditor from './SimpleEditor.svelte';
 import autosize from 'svelte-autosize';
 import Toggle from './Toggle.svelte';
 import Password from './Password.svelte';
+import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
+import Range from './Range.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -37,6 +39,7 @@ export let pickForField = undefined;
 export let variableEditor = undefined;
 export let itemPicker = undefined;
 export let noMargin = false;
+export let extra = {};
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
@@ -159,6 +162,8 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 							/>
 							{#if type == 'string' && format != 'date-time'}
 								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
+							{:else if type == 'number'}
+								<NumberTypeNarrowing bind:min={extra['min']} bind:max={extra['max']} />
 							{:else if type == 'object'}
 								<ObjectTypeNarrowing bind:format />
 							{:else if type == 'array'}
@@ -186,18 +191,31 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
-				<input
-					{autofocus}
-					on:focus
-					{disabled}
-					type="number"
-					class={valid
-						? ''
-						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
-					placeholder={defaultValue ?? ''}
-					bind:value
-					on:input={() => dispatch('input', { value, isRaw: true })}
-				/>
+				{#if extra['min'] != undefined && extra['max'] != undefined}
+					<div class="flex w-full gap-1">
+						<span>{extra['min']}</span>
+						<div class="grow">
+							<Range bind:value min={extra['min']} max={extra['max']} />
+						</div>
+						<span>{extra['max']}</span>
+						<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
+					</div>
+				{:else}
+					<input
+						{autofocus}
+						on:focus
+						{disabled}
+						type="number"
+						class={valid
+							? ''
+							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
+						placeholder={defaultValue ?? ''}
+						bind:value
+						min={extra['min']}
+						max={extra['max']}
+						on:input={() => dispatch('input', { value, isRaw: true })}
+					/>
+				{/if}
 			{:else if inputCat == 'boolean'}
 				<Toggle
 					{disabled}

package/components/ArgInput.svelte.d.ts

@@ -35,6 +35,7 @@ declare const __propDef: {
         variableEditor?: VariableEditor | undefined;
         itemPicker?: ItemPicker | undefined;
         noMargin?: boolean | undefined;
+        extra?: Record<string, any> | undefined;
         editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;

package/components/IconedResourceType.svelte

@@ -17,7 +17,7 @@ $: name_prefix = name.split('_')[0];
 			<svelte:component this={APP_TO_ICON_COMPONENT[name_prefix]} {height} {width} />
 		</span>
 	{:else}
-		<span style="width: {width}" class="bg-gray-100 rounded-full" />
+		<span style="width: {width}; height: {height}" class="bg-gray-100 rounded-full" />
 	{/if}
 	{#if !silent && after}
 		{name}

package/components/NumberTypeNarrowing.svelte

@@ -0,0 +1,19 @@
+<script>import Toggle from './Toggle.svelte';
+export let min;
+export let max;
+let minChecked = min != undefined;
+let maxChecked = max != undefined;
+</script>
+
+<div class="my-2" />
+
+<div class="flex flex-col gap-2">
+	<div class="flex gap-2">
+		<Toggle bind:checked={minChecked} options={{ right: 'min' }} />
+		<input type="number" bind:value={min} disabled={!minChecked} />
+	</div>
+	<div class="flex gap-2">
+		<Toggle bind:checked={maxChecked} options={{ right: 'max' }} />
+		<input type="number" bind:value={max} disabled={!maxChecked} />
+	</div>
+</div>

package/components/NumberTypeNarrowing.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        min: number | undefined;
+        max: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NumberTypeNarrowingProps = typeof __propDef.props;
+export type NumberTypeNarrowingEvents = typeof __propDef.events;
+export type NumberTypeNarrowingSlots = typeof __propDef.slots;
+export default class NumberTypeNarrowing extends SvelteComponentTyped<NumberTypeNarrowingProps, NumberTypeNarrowingEvents, NumberTypeNarrowingSlots> {
+}
+export {};

package/components/Range.svelte

@@ -0,0 +1,304 @@
+<script>
+	import { createEventDispatcher } from 'svelte'
+	import { fly, fade } from 'svelte/transition'
+
+	// Props
+	export let min = 0
+	export let max = 100
+	export let initialValue = 0
+	export let id = null
+	export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue
+
+	// Node Bindings
+	let container = null
+	let thumb = null
+	let progressBar = null
+	let element = null
+
+	// Internal State
+	let elementX = null
+	let currentThumb = null
+	let holding = false
+	let thumbHover = false
+	let keydownAcceleration = 0
+	let accelerationTimer = null
+
+	// Dispatch 'change' events
+	const dispatch = createEventDispatcher()
+
+	// Mouse shield used onMouseDown to prevent any mouse events penetrating other elements,
+	// ie. hover events on other elements while dragging. Especially for Safari
+	const mouseEventShield = document.createElement('div')
+	mouseEventShield.setAttribute('class', 'mouse-over-shield')
+	mouseEventShield.addEventListener('mouseover', (e) => {
+		e.preventDefault()
+		e.stopPropagation()
+	})
+
+	function resizeWindow() {
+		elementX = element.getBoundingClientRect().left
+	}
+
+	// Allows both bind:value and on:change for parent value retrieval
+	function setValue(val) {
+		value = val
+		dispatch('change', { value })
+	}
+
+	function onTrackEvent(e) {
+		// Update value immediately before beginning drag
+		updateValueOnEvent(e)
+		onDragStart(e)
+	}
+
+	function onHover(e) {
+		thumbHover = thumbHover ? false : true
+	}
+
+	function onDragStart(e) {
+		// If mouse event add a pointer events shield
+		if (e.type === 'mousedown') document.body.append(mouseEventShield)
+		currentThumb = thumb
+	}
+
+	function onDragEnd(e) {
+		// If using mouse - remove pointer event shield
+		if (e.type === 'mouseup') {
+			if (document.body.contains(mouseEventShield)) document.body.removeChild(mouseEventShield)
+			// Needed to check whether thumb and mouse overlap after shield removed
+			if (isMouseInElement(e, thumb)) thumbHover = true
+		}
+		currentThumb = null
+	}
+
+	// Check if mouse event cords overlay with an element's area
+	function isMouseInElement(event, element) {
+		let rect = element.getBoundingClientRect()
+		let { clientX: x, clientY: y } = event
+		if (x < rect.left || x >= rect.right) return false
+		if (y < rect.top || y >= rect.bottom) return false
+		return true
+	}
+
+	// Accessible keypress handling
+	function onKeyPress(e) {
+		// Max out at +/- 10 to value per event (50 events / 5)
+		// 100 below is to increase the amount of events required to reach max velocity
+		if (keydownAcceleration < 50) keydownAcceleration++
+		let throttled = Math.ceil(keydownAcceleration / 5)
+
+		if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+			if (value + throttled > max || value >= max) {
+				setValue(max)
+			} else {
+				setValue(value + throttled)
+			}
+		}
+		if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+			if (value - throttled < min || value <= min) {
+				setValue(min)
+			} else {
+				setValue(value - throttled)
+			}
+		}
+
+		// Reset acceleration after 100ms of no events
+		clearTimeout(accelerationTimer)
+		accelerationTimer = setTimeout(() => (keydownAcceleration = 1), 100)
+	}
+
+	function calculateNewValue(clientX) {
+		// Find distance between cursor and element's left cord (20px / 2 = 10px) - Center of thumb
+		let delta = clientX - (elementX + 10)
+
+		// Use width of the container minus (5px * 2 sides) offset for percent calc
+		let percent = (delta * 100) / (container.clientWidth - 10)
+
+		// Limit percent 0 -> 100
+		percent = percent < 0 ? 0 : percent > 100 ? 100 : percent
+
+		// Limit value min -> max
+		setValue(Math.round((percent * (max - min)) / 100 + min))
+	}
+
+	// Handles both dragging of touch/mouse as well as simple one-off click/touches
+	function updateValueOnEvent(e) {
+		// touchstart && mousedown are one-off updates, otherwise expect a currentPointer node
+		if (!currentThumb && e.type !== 'touchstart' && e.type !== 'mousedown') return false
+
+		if (e.stopPropagation) e.stopPropagation()
+		if (e.preventDefault) e.preventDefault()
+
+		// Get client's x cord either touch or mouse
+		const clientX =
+			e.type === 'touchmove' || e.type === 'touchstart' ? e.touches[0].clientX : e.clientX
+
+		calculateNewValue(clientX)
+	}
+
+	// React to left position of element relative to window
+	$: if (element) elementX = element.getBoundingClientRect().left
+
+	// Set a class based on if dragging
+	$: holding = Boolean(currentThumb)
+
+	// Update progressbar and thumb styles to represent value
+	$: if (progressBar && thumb) {
+		// Limit value min -> max
+		value = value > min ? value : min
+		value = value < max ? value : max
+
+		let percent = ((value - min) * 100) / (max - min)
+		let offsetLeft = (container.clientWidth - 10) * (percent / 100) + 5
+
+		// Update thumb position + active range track width
+		thumb.style.left = `${offsetLeft}px`
+		progressBar.style.width = `${offsetLeft}px`
+	}
+</script>
+
+<svelte:window
+	on:touchmove|nonpassive={updateValueOnEvent}
+	on:touchcancel={onDragEnd}
+	on:touchend={onDragEnd}
+	on:mousemove={updateValueOnEvent}
+	on:mouseup={onDragEnd}
+	on:resize={resizeWindow}
+/>
+<div class="range">
+	<div
+		class="range__wrapper"
+		tabindex="0"
+		on:keydown={onKeyPress}
+		bind:this={element}
+		role="slider"
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={value}
+		{id}
+		on:pointerdown|stopPropagation
+		on:mousedown|stopPropagation={onTrackEvent}
+		on:touchstart|stopPropagation={onTrackEvent}
+	>
+		<div class="range__track" bind:this={container}>
+			<div class="range__track--highlighted" bind:this={progressBar} />
+			<div
+				class="range__thumb"
+				class:range__thumb--holding={holding}
+				bind:this={thumb}
+				on:touchstart={onDragStart}
+				on:mousedown={onDragStart}
+				on:mouseover={() => (thumbHover = true)}
+				on:mouseout={() => (thumbHover = false)}
+			>
+				{#if holding || thumbHover}
+					<div class="range__tooltip" in:fly={{ y: 7, duration: 200 }} out:fade={{ duration: 100 }}>
+						{value}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<svelte:head>
+	<style>
+		.mouse-over-shield {
+			position: fixed;
+			top: 0px;
+			left: 0px;
+			height: 100%;
+			width: 100%;
+			background-color: rgba(255, 0, 0, 0);
+			z-index: 10000;
+			cursor: grabbing;
+		}</style>
+</svelte:head>
+
+<style>
+	.range {
+		position: relative;
+		flex: 1;
+	}
+
+	.range__wrapper {
+		min-width: 100%;
+		position: relative;
+		padding: 0.5rem;
+		box-sizing: border-box;
+		outline: none;
+	}
+
+	.range__wrapper:focus-visible > .range__track {
+		box-shadow: 0 0 0 2px white, 0 0 0 3px var(--track-focus, #6185ff);
+	}
+
+	.range__track {
+		height: 6px;
+		background-color: var(--track-bgcolor, #d0d0d0);
+		border-radius: 999px;
+	}
+
+	.range__track--highlighted {
+		background-color: var(--track-highlight-bgcolor, #6185ff);
+		background: var(--track-highlight-bg, linear-gradient(90deg, #6185ff, #9c65ff));
+		width: 0;
+		height: 6px;
+		position: absolute;
+		border-radius: 999px;
+	}
+
+	.range__thumb {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		background-color: var(--thumb-bgcolor, white);
+		cursor: pointer;
+		border-radius: 999px;
+		margin-top: -8px;
+		transition: box-shadow 100ms;
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		        user-select: none;
+		box-shadow: var(
+			--thumb-boxshadow,
+			0 1px 1px 0 rgba(0, 0, 0, 0.14),
+			0 0px 2px 1px rgba(0, 0, 0, 0.2)
+		);
+	}
+
+	.range__thumb--holding {
+		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 1px rgba(0, 0, 0, 0.2),
+			0 0 0 6px var(--thumb-holding-outline, rgba(113, 119, 250, 0.3));
+	}
+
+	.range__tooltip {
+		pointer-events: none;
+		position: absolute;
+		top: -33px;
+		color: var(--tooltip-text, white);
+		width: 38px;
+		padding: 4px 0;
+		border-radius: 4px;
+		text-align: center;
+		background-color: var(--tooltip-bgcolor, #6185ff);
+		background: var(--tooltip-bg, linear-gradient(45deg, #6185ff, #9c65ff));
+	}
+
+	.range__tooltip::after {
+		content: '';
+		display: block;
+		position: absolute;
+		height: 7px;
+		width: 7px;
+		background-color: var(--tooltip-bgcolor, #6185ff);
+		bottom: -3px;
+		left: calc(50% - 3px);
+		-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+		        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+		transform: rotate(-45deg);
+		border-radius: 0 0 0 3px;
+	}</style>

package/components/Range.svelte.d.ts

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  RangeProps */
+/** @typedef {typeof __propDef.events}  RangeEvents */
+/** @typedef {typeof __propDef.slots}  RangeSlots */
+export default class Range extends SvelteComponentTyped<{
+    value?: number | undefined;
+    id?: null | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    initialValue?: number | undefined;
+}, {
+    pointerdown: PointerEvent;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RangeProps = typeof __propDef.props;
+export type RangeEvents = typeof __propDef.events;
+export type RangeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+        id?: null | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        initialValue?: number | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/SchemaForm.svelte

@@ -86,6 +86,7 @@ let variableEditor = undefined;
 							{variableEditor}
 							{itemPicker}
 							bind:pickForField
+							bind:extra={schema.properties[argName]}
 						/>
 					{:else}
 						Expected argument to be an object, got {JSON.stringify(args)} instead

package/components/Tooltip.svelte

@@ -3,7 +3,7 @@ import Icon from 'svelte-awesome';
 import Popover from './Popover.svelte';
 </script>
 
-<Popover notClickable class="flex">
+<Popover notClickable>
 	<Icon
 		class="text-gray-500 font-thin inline-block align-middle w-4"
 		data={faInfoCircle}

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -32,7 +32,7 @@ let executeTimeout = undefined;
 function setDebouncedExecute() {
     executeTimeout && clearTimeout(executeTimeout);
     executeTimeout = setTimeout(() => {
-        executeComponent();
+        executeComponent(true);
     }, 200);
 }
 function computeStaticValues() {

package/components/apps/components/helpers/RunnableWrapper.svelte

@@ -11,7 +11,7 @@ export let autoRefresh = true;
 export let runnableComponent = undefined;
 export let forceSchemaDisplay = false;
 const { staticExporter, noBackend } = getContext('AppEditorContext');
-if (noBackend) {
+if (noBackend && componentInput?.type == 'runnable') {
     result = componentInput?.['value'];
 }
 onMount(() => {

package/components/apps/components/numberInputs/AppSliderInputs.svelte

@@ -0,0 +1,37 @@
+<script>import { Badge } from '../../../common';
+import Range from '../../../Range.svelte';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let verticalAlignment = undefined;
+export const staticOutputs = ['result'];
+const { worldStore } = getContext('AppEditorContext');
+let value;
+let min = 0;
+let max = 42;
+$: outputs = $worldStore?.outputsById[id];
+$: if (value || !value) {
+    // Disallow 'e' character in numbers
+    // if(value && value.toString().includes('e')) {
+    // 	value = +value.toString().replaceAll('e', '')
+    // }
+    const num = isNaN(+value) ? null : +value;
+    outputs?.result.set(num);
+}
+</script>
+
+<InputValue {id} input={configuration.min} bind:value={min} />
+<InputValue {id} input={configuration.max} bind:value={max} />
+
+<AlignWrapper {verticalAlignment}>
+	<div class="flex w-full gap-1 px-1">
+		<span>{min}</span>
+		<div class="grow">
+			<Range bind:value {min} {max} />
+		</div>
+		<span>{max}</span>
+		<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
+	</div>
+</AlignWrapper>

package/components/apps/components/numberInputs/AppSliderInputs.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppSliderInputsProps = typeof __propDef.props;
+export type AppSliderInputsEvents = typeof __propDef.events;
+export type AppSliderInputsSlots = typeof __propDef.slots;
+export default class AppSliderInputs extends SvelteComponentTyped<AppSliderInputsProps, AppSliderInputsEvents, AppSliderInputsSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/editor/AppEditorHeader.svelte

@@ -7,6 +7,7 @@ import Skeleton from '../../common/skeleton/Skeleton.svelte';
 import ToggleButton from '../../common/toggleButton/ToggleButton.svelte';
 import ToggleButtonGroup from '../../common/toggleButton/ToggleButtonGroup.svelte';
 import DisplayResult from '../../DisplayResult.svelte';
+import Dropdown from '../../Dropdown.svelte';
 import FlowProgressBar from '../../flows/FlowProgressBar.svelte';
 import FlowStatusViewer from '../../FlowStatusViewer.svelte';
 import JobArgs from '../../JobArgs.svelte';
@@ -17,14 +18,13 @@ import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { AppService, Job, Policy } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
-import { faBug, faClipboard, faExternalLink, faSave } from '@fortawesome/free-solid-svg-icons';
-import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, Pencil, Smartphone } from 'lucide-svelte';
+import { faBug, faClipboard, faExternalLink, faFileExport, faGlobe, faSave } from '@fortawesome/free-solid-svg-icons';
+import { AlignHorizontalSpaceAround, Expand, Eye, Laptop2, Loader2, MoreVertical, Pencil, Smartphone } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { classNames, copyToClipboard, sendUserToast } from '../../../utils';
+import { appToHubUrl, classNames, copyToClipboard, sendUserToast } from '../../../utils';
 import AppExportButton from './AppExportButton.svelte';
-import AppPublishButton from './AppPublishButton.svelte';
 import PanelSection from './settingsPanel/common/PanelSection.svelte';
 async function hash(message) {
     const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
@@ -41,12 +41,23 @@ const loading = {
 };
 let newPath = '';
 let pathError = undefined;
+let appExport;
 let saveDrawerOpen = false;
 let jobsDrawerOpen = false;
 let publishDrawerOpen = false;
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
+function toStatic() {
+    const newApp = JSON.parse(JSON.stringify($app));
+    newApp.grid.forEach((x) => {
+        let c = x.data;
+        if (c.componentInput?.type == 'runnable') {
+            c.componentInput.value = $staticExporter[x.id]();
+        }
+    });
+    return { app: newApp, summary: $summary };
+}
 async function computeTriggerables() {
     const allTriggers = await Promise.all($app.grid.map(async (x) => {
         let c = x.data;
@@ -307,7 +318,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 </Drawer>
 
 <div
-	class="border-b flex flex-row justify-between py-1 gap-4 overflow-x-auto gap-y-2 px-4 items-center"
+	class="border-b flex flex-row justify-between py-1 gap-4  gap-y-2 px-4 items-center overflow-y-visible"
 >
 	<div class="min-w-64 w-64">
 		<input type="text" placeholder="App summary" class="text-sm w-full" bind:value={$summary} />
@@ -318,11 +329,13 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 				<ToggleButton position="left" value="dnd" size="xs">
 					<div class="inline-flex gap-1 items-center">
 						<Pencil size={14} />
-						Editor
+						<span class="hidden md:inline">Editor</span>
 					</div>
 				</ToggleButton>
 				<ToggleButton position="right" value="preview" size="xs">
-					<div class="inline-flex gap-1 items-center"> <Eye size={14} /> Preview</div>
+					<div class="inline-flex gap-1 items-center">
+						<Eye size={14} /> <span class="hidden md:inline">Preview</span>
+					</div>
 				</ToggleButton>
 			</ToggleButtonGroup>
 		</div>
@@ -337,7 +350,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 			</ToggleButtonGroup>
 		</div>
 
-		<span class="hidden lg:block">
+		<div class="hidden lg:block">
 			<ToggleButtonGroup bind:selected={$app.fullscreen}>
 				<ToggleButton position="left" value={false} size="xs">
 					<div class="flex gap-1 justify-start">
@@ -352,23 +365,44 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 					<Expand size={14} />
 				</ToggleButton>
 			</ToggleButtonGroup>
-		</span>
+		</div>
 	</div>
-	<div class="flex flex-row grow gap-2 justify-end items-center">
-		<Button
-			on:click={() => (jobsDrawerOpen = true)}
-			color="light"
-			size="xs"
-			variant="border"
-			startIcon={{ icon: faBug }}
+	<div class="flex flex-row grow gap-2 justify-end items-center overflow-visible">
+		<Dropdown
+			placement="bottom-end"
+			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px] hidden lg:block"
+			dropdownItems={[
+				{
+					displayName: 'JSON',
+					icon: faFileExport,
+					action: () => {
+						appExport.open()
+					}
+				},
+				{
+					displayName: 'Publish to Hub',
+					icon: faGlobe,
+					action: () => {
+						const url = appToHubUrl(toStatic())
+						window.open(url.toString(), '_blank')
+					}
+				}
+			]}
 		>
-			Debug Runs
-		</Button>
-		<span class="hidden lg:inline-flex gap-1">
-			<AppPublishButton summary={$summary} staticExporter={$staticExporter} app={$app} />
-			<AppExportButton app={$app} />
+			<MoreVertical size={20} />
+		</Dropdown>
+		<span class="hidden md:inline">
+			<Button
+				on:click={() => (jobsDrawerOpen = true)}
+				color="light"
+				size="xs"
+				variant="border"
+				startIcon={{ icon: faBug }}
+			>
+				<span class="hidden md:inline">Debug Runs</span>
+			</Button>
 		</span>
-
+		<AppExportButton bind:this={appExport} app={$app} />
 		<Button
 			on:click={() => (publishDrawerOpen = true)}
 			color="light"
@@ -376,7 +410,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 			variant="border"
 			startIcon={{ icon: faExternalLink }}
 		>
-			Publish
+			<span class="hidden md:inline">Publish</span>
 		</Button>
 		<Button
 			loading={loading.save}
@@ -385,7 +419,7 @@ $: selectedJobId && testJobLoader?.watchJob(selectedJobId);
 			color="dark"
 			size="xs"
 		>
-			Save
+			<span class="hidden md:inline">Save</span>
 		</Button>
 	</div>
 </div>

package/components/apps/editor/AppExportButton.svelte

@@ -1,20 +1,17 @@
 <script>import Drawer from '../../common/drawer/Drawer.svelte';
 import DrawerContent from '../../common/drawer/DrawerContent.svelte';
 import { copyToClipboard } from '../../../utils';
-import { faClipboard, faFileExport } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
+import { faClipboard } from '@fortawesome/free-solid-svg-icons';
 import { Highlight } from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import { Button } from '../../common';
 let jsonViewerDrawer;
+export function open() {
+    jsonViewerDrawer?.toggleDrawer();
+}
 export let app;
 </script>
 
-<Button size="xs" variant="border" color="light" on:click={() => jsonViewerDrawer.toggleDrawer()}>
-	<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
-	JSON
-</Button>
-
 <Drawer bind:this={jsonViewerDrawer} size="800px">
 	<DrawerContent title="App JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
 		<div class="relative">

package/components/apps/editor/AppExportButton.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { App } from '../types';
 declare const __propDef: {
     props: {
+        open?: (() => void) | undefined;
         app: App;
     };
     events: {
@@ -13,5 +14,6 @@ export type AppExportButtonProps = typeof __propDef.props;
 export type AppExportButtonEvents = typeof __propDef.events;
 export type AppExportButtonSlots = typeof __propDef.slots;
 export default class AppExportButton extends SvelteComponentTyped<AppExportButtonProps, AppExportButtonEvents, AppExportButtonSlots> {
+    get open(): () => void;
 }
 export {};

package/components/apps/editor/ComponentEditor.svelte

@@ -16,6 +16,7 @@ import AppForm from '../components/form/AppForm.svelte';
 import AppScatterChart from '../components/dataDisplay/AppScatterChart.svelte';
 import AppTimeseries from '../components/dataDisplay/AppTimeseries.svelte';
 import AppHtml from '../components/dataDisplay/AppHtml.svelte';
+import AppSliderInputs from '../components/numberInputs/AppSliderInputs.svelte';
 export let component;
 export let selected;
 export let locked = false;
@@ -130,6 +131,8 @@ const { staticOutputs, mode, connectingInput } = getContext('AppEditorContext');
 			/>
 		{:else if component.type === 'numberinputcomponent'}
 			<NumberInputComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'slidercomponent'}
+			<AppSliderInputs {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{/if}
 	</div>
 </div>

package/components/apps/editor/componentsPanel/data.js

@@ -50,6 +50,28 @@ const inputs = {
             },
             card: false
         },
+        {
+            softWrap: true,
+            verticalAlignment: 'center',
+            id: 'slidercomponent',
+            type: 'slidercomponent',
+            componentInput: undefined,
+            configuration: {
+                min: {
+                    type: 'static',
+                    value: 0,
+                    fieldType: 'number',
+                    onlyStatic: true,
+                },
+                max: {
+                    type: 'static',
+                    value: 42,
+                    fieldType: 'number',
+                    onlyStatic: true,
+                },
+            },
+            card: false
+        },
         {
             softWrap: true,
             verticalAlignment: 'center',

package/components/apps/types.d.ts

@@ -12,6 +12,7 @@ export type TextInputComponent = BaseComponent<'textinputcomponent'>;
 export type PasswordInputComponent = BaseComponent<'passwordinputcomponent'>;
 export type DateInputComponent = BaseComponent<'dateinputcomponent'>;
 export type NumberInputComponent = BaseComponent<'numberinputcomponent'>;
+export type SliderComponent = BaseComponent<'slidercomponent'>;
 export type HtmlComponent = BaseComponent<'htmlcomponent'>;
 export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
 export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
@@ -53,7 +54,7 @@ export interface BaseAppComponent extends Partial<Aligned> {
      */
     softWrap?: boolean;
 }
-export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
+export type AppComponent = BaseAppComponent & (RunFormComponent | DisplayComponent | TextInputComponent | PasswordInputComponent | DateInputComponent | NumberInputComponent | SliderComponent | BarChartComponent | TimeseriesComponent | HtmlComponent | TableComponent | TextComponent | TableComponent | ButtonComponent | PieChartComponent | ScatterChartComponent | ImageComponent | InputComponent | SelectComponent | CheckboxComponent | RadioComponent | FormComponent);
 export type ComponentSet = {
     title: string;
     components: AppComponent[];

package/components/apps/utils.js

@@ -1,6 +1,6 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
-import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2 } from 'lucide-svelte';
+import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal } from 'lucide-svelte';
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({
@@ -113,6 +113,10 @@ export const displayData = {
         name: 'Number',
         icon: Binary
     },
+    slidercomponent: {
+        name: 'Slider',
+        icon: SlidersHorizontal
+    },
     passwordinputcomponent: {
         name: 'Password',
         icon: Lock

package/components/common/table/AppRow.svelte

@@ -2,7 +2,7 @@
 import SharedBadge from '../../SharedBadge.svelte';
 import { AppService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
-import { faEdit, faEye, faFileExport, faPen, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faCodeFork, faEdit, faEye, faFileExport, faPen, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { MoreVertical } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Button from '../button/Button.svelte';
@@ -44,6 +44,18 @@ const dispatch = createEventDispatcher();
 							Edit
 						</Button>
 					</div>
+				{:else}
+					<div>
+						<Button
+							color="light"
+							size="xs"
+							variant="border"
+							startIcon={{ icon: faCodeFork }}
+							href="/apps/add?template={path}"
+						>
+							Fork
+						</Button>
+					</div>
 				{/if}
 			{/if}
 

package/components/icons/AppwriteIcon.svelte

@@ -0,0 +1,18 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg x="0" y="0" {width} {height} viewBox="0 0 320 213.18964" fill="none" version="1.1" id="svg6">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="m 213.428,213.18799 c -19.465,0 -37.711,-5.218 -53.415,-14.332 -11.783,6.82 -24.876,11.384 -38.621,13.306 -27.992004,3.915 -56.393204,-3.451 -78.954904,-20.476 -11.1823,-8.427 -20.5946,-18.974 -27.6991,-31.039 -7.1043998,-12.065 -11.7616998,-25.412 -13.7057998,-39.278 -1.94400001,-13.866 -1.13660001,-27.979001 2.376,-41.533001 3.5126,-13.554 9.6615998,-26.2825 18.0955998,-37.4588 8.434,-11.1764 18.9877,-20.5813 31.0579,-27.6773 12.0703,-7.0959004 25.4203,-11.7438004 39.2883,-13.6781004 13.867004,-1.93420004 27.979004,-1.11690004 41.531004,2.4052 9.353,2.4311 18.313,6.118 26.639,10.9448004 C 175.723,5.2610886 193.966,0.04428856 213.428,0.04428856 272.287,0.04428856 320,47.757389 320,106.61599 c 0,58.859 -47.713,106.572 -106.572,106.572 z m -71.253,-185.825201 0.032,-0.028 c -14.799,-6.6401 -31.29,-9.0605 -47.611004,-6.7781 -22.824,3.1919 -43.4462,15.3201 -57.3285,33.7165 -13.8823,18.3968 -19.888,41.5538 -16.6961,64.378801 3.1919,22.824 15.3201,43.446 33.7165,57.328 18.3961,13.882 41.5541,19.888 64.378104,16.696 22.825,-3.192 43.447,-15.32 57.329,-33.716 13.882,-18.397 19.888,-41.554 16.696,-64.379001 -1.473,-10.53 -4.847,-20.591 -9.862,-29.738 -9.083,-16.4993 -23.372,-29.7302 -40.654,-37.4802 z"
+		fill="#000000"
+		id="path2"
+	/>
+	<path
+		d="m 109.487,69.743989 c -0.128,0.315 -1.757,6.715 -3.512,14.306 -1.821,7.591 -4.707,19.573001 -6.335004,26.662001 -3.14,12.986 -5.022,21.518 -5.022,22.648 0,0.311 1.946,0.565 4.328,0.565 H 103.277 l 1.942,-8.66 c 1.132,-4.704 3.642,-15.495 5.649,-23.964 2.008,-8.470001 4.453,-18.758001 5.396,-22.900001 0.939,-4.141 1.88,-7.902 2.07,-8.342 0.189,-0.564 -0.88,-0.751 -4.141,-0.751 -2.448,0 -4.583,0.187 -4.706,0.436 z m -33.691004,27.165 -5.772,6.275001 1.696,2.006 c 0.938,1.128 3.513,3.953 5.709,6.275 l 4.015,4.264 h 11.418 l -5.394,-5.835 c -2.951,-3.133 -5.398,-6.146 -5.398,-6.522 0,-0.439 2.26,-3.261 5.021,-6.273001 2.759,-3.072 5.018,-5.711 5.018,-6.024 0,-0.251 -2.384,-0.439 -5.269,-0.439 h -5.207 z m 43.916004,-5.898 c 0,0.191 1.067,1.381 2.382,2.699 4.897,4.893 8.347,9.036001 8.158,9.849001 -0.124,0.441 -2.51,3.387 -5.394,6.462 l -5.205,5.708 h 5.832 l 5.835,-0.062 5.33,-5.833 c 2.951,-3.26 5.334,-6.15 5.334,-6.526 0,-0.311 -2.509,-3.261 -5.647,-6.584001 l -5.644,-6.088 h -5.461 c -3.074,0 -5.52,0.188 -5.52,0.375 z"
+		fill="#000000"
+		id="path4"
+	/>
+</svg>

package/components/icons/AppwriteIcon.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 AppwriteIconProps = typeof __propDef.props;
+export type AppwriteIconEvents = typeof __propDef.events;
+export type AppwriteIconSlots = typeof __propDef.slots;
+export default class AppwriteIcon extends SvelteComponentTyped<AppwriteIconProps, AppwriteIconEvents, AppwriteIconSlots> {
+}
+export {};

package/components/icons/LinkdingIcon.svelte

@@ -0,0 +1,13 @@
+<script>export let height = '24px';
+export let width = '24px';
+</script>
+
+<svg version="1.1" id="svg2" x=0 y=0 {width} {height} viewBox="0 0 56 56">
+	<g id="g8">
+		<path
+			style="fill:#000000"
+			d="M 21.934964,54.577686 C -1.2680732,49.62024 -6.9798152,18.503632 12.863299,5.1567822 32.772873,-8.2347712 58.966204,9.2924868 54.765887,33.195885 53.022738,43.115892 43.59487,52.995551 34.461449,54.473328 c -2.2,0.355957 -4.675,0.790728 -5.5,0.966157 -0.825,0.175429 -3.986918,-0.212381 -7.026485,-0.861799 z M 45.071867,32.670208 C 51.629793,25.125635 52.430122,21.8666 49.075771,16.36585 46.719483,12.501807 40.750657,9.5309908 37.156102,10.433166 c -1.449711,0.363855 -7.267103,5.218963 -12.927538,10.78913 -9.143972,8.998151 -10.124574,10.294702 -8.793078,11.626198 1.331496,1.331496 2.599723,0.416811 11.372216,-8.201994 5.862435,-5.759729 10.688216,-9.700615 11.878812,-9.700615 3.447831,0 7.274935,3.794342 7.274935,7.212657 0,2.529244 -1.664895,4.762079 -9.488223,12.724911 -8.933265,9.092559 -9.388707,9.75693 -7.786773,11.358864 1.601934,1.601934 1.958639,1.452934 6.098641,-2.547491 2.418455,-2.336917 7.047503,-7.297996 10.286773,-11.024618 z M 20.243568,44.55131 c 1.769834,-0.767016 7.407067,-5.639768 12.527183,-10.828339 8.223928,-8.333878 9.123338,-9.5881 7.71428,-10.757515 -1.387314,-1.151368 -2.874359,-0.06683 -11.419226,8.328339 -11.100401,10.90593 -13.206314,11.696497 -17.515462,6.575365 -1.423892,-1.692199 -2.5888942,-3.782435 -2.5888942,-4.64497 0,-0.862534 4.5088982,-6.150211 10.0197732,-11.750393 9.53558,-9.69011 9.931944,-10.261632 8.202286,-11.8269512 -1.717047,-1.553906 -2.319947,-1.135176 -10.909762,7.5771182 -5.000752,5.072057 -9.5917812,10.204837 -10.2022872,11.40618 -2.73924,5.390228 0.339025,13.302752 6.1596852,15.833154 4.065039,1.767185 4.136052,1.767965 8.012424,0.08801 z"
+			id="path116"
+		/>
+	</g>
+</svg>

package/components/icons/LinkdingIcon.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 LinkdingIconProps = typeof __propDef.props;
+export type LinkdingIconEvents = typeof __propDef.events;
+export type LinkdingIconSlots = typeof __propDef.slots;
+export default class LinkdingIcon extends SvelteComponentTyped<LinkdingIconProps, LinkdingIconEvents, LinkdingIconSlots> {
+}
+export {};

package/components/icons/index.d.ts

@@ -33,6 +33,8 @@ import NextcloudIcon from './NextcloudIcon.svelte';
 import FaunadbIcon from './FaunadbIcon.svelte';
 import ClickhouseIcon from './ClickhouseIcon.svelte';
 import OpenaiIcon from './OpenaiIcon.svelte';
+import AppwriteIcon from './AppwriteIcon.svelte';
+import LinkdingIconSvelte from './LinkdingIcon.svelte';
 export declare const APP_TO_ICON_COMPONENT: {
     readonly postgresql: typeof PostgresIcon;
     readonly mysql: typeof Mysql;
@@ -72,5 +74,7 @@ export declare const APP_TO_ICON_COMPONENT: {
     readonly faunadb: typeof FaunadbIcon;
     readonly clickhouse: typeof ClickhouseIcon;
     readonly openai: typeof OpenaiIcon;
+    readonly appwrite: typeof AppwriteIcon;
+    readonly linkding: typeof LinkdingIconSvelte;
 };
 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, FaunadbIcon, ClickhouseIcon, OpenaiIcon, };

package/components/icons/index.js

@@ -33,6 +33,8 @@ import NextcloudIcon from './NextcloudIcon.svelte';
 import FaunadbIcon from './FaunadbIcon.svelte';
 import ClickhouseIcon from './ClickhouseIcon.svelte';
 import OpenaiIcon from './OpenaiIcon.svelte';
+import AppwriteIcon from './AppwriteIcon.svelte';
+import LinkdingIconSvelte from './LinkdingIcon.svelte';
 export const APP_TO_ICON_COMPONENT = {
     postgresql: PostgresIcon,
     mysql: Mysql,
@@ -72,5 +74,7 @@ export const APP_TO_ICON_COMPONENT = {
     faunadb: FaunadbIcon,
     clickhouse: ClickhouseIcon,
     openai: OpenaiIcon,
+    appwrite: AppwriteIcon,
+    linkding: LinkdingIconSvelte
 };
 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, FaunadbIcon, ClickhouseIcon, OpenaiIcon, };

package/gen/services/AppService.d.ts

@@ -28,11 +28,7 @@ export declare class AppService {
     }): CancelablePromise<{
         app: {
             summary: string;
-            value: {
-                staticApp: any;
-                app: any;
-                summary: string;
-            };
+            value: any;
         };
     }>;
     /**

package/gen/services/WorkspaceService.d.ts

@@ -105,7 +105,23 @@ export declare class WorkspaceService {
         };
     }): CancelablePromise<string>;
     /**
-     * delete workspace
+     * archive workspace
+     * @returns string status
+     * @throws ApiError
+     */
+    static archiveWorkspace({ workspace, }: {
+        workspace: string;
+    }): CancelablePromise<string>;
+    /**
+     * unarchive workspace
+     * @returns string status
+     * @throws ApiError
+     */
+    static unarchiveWorkspace({ workspace, }: {
+        workspace: string;
+    }): CancelablePromise<string>;
+    /**
+     * delete workspace (require super admin)
      * @returns string status
      * @throws ApiError
      */

package/gen/services/WorkspaceService.js

@@ -121,14 +121,42 @@ export class WorkspaceService {
         });
     }
     /**
-     * delete workspace
+     * archive workspace
+     * @returns string status
+     * @throws ApiError
+     */
+    static archiveWorkspace({ workspace, }) {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/w/{workspace}/workspaces/archive',
+            path: {
+                'workspace': workspace,
+            },
+        });
+    }
+    /**
+     * unarchive workspace
+     * @returns string status
+     * @throws ApiError
+     */
+    static unarchiveWorkspace({ workspace, }) {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/workspaces/unarchive/{workspace}',
+            path: {
+                'workspace': workspace,
+            },
+        });
+    }
+    /**
+     * delete workspace (require super admin)
      * @returns string status
      * @throws ApiError
      */
     static deleteWorkspace({ workspace, }) {
         return __request(OpenAPI, {
             method: 'DELETE',
-            url: '/w/{workspace}/workspaces/delete',
+            url: '/workspaces/delete/{workspace}',
             path: {
                 'workspace': workspace,
             },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.57.3",
+	"version": "1.58.1",
 	"devDependencies": {
 		"@playwright/test": "^1.29.1",
 		"@sveltejs/adapter-static": "^1.0.0",
@@ -68,6 +68,9 @@
 		"svelte-select": "^5.0.1",
 		"vscode-ws-jsonrpc": "^2.0.1"
 	},
+	"peerDependencies": {
+		"svelte": "^3.53.1"
+	},
 	"exports": {
 		"./package.json": "./package.json",
 		"./assets/app.css": "./assets/app.css",
@@ -116,6 +119,7 @@
 		"./components/ModuleStatus.svelte": "./components/ModuleStatus.svelte",
 		"./components/MoveDrawer.svelte": "./components/MoveDrawer.svelte",
 		"./components/Multiselect.svelte": "./components/Multiselect.svelte",
+		"./components/NumberTypeNarrowing.svelte": "./components/NumberTypeNarrowing.svelte",
 		"./components/ObjectResourceInput.svelte": "./components/ObjectResourceInput.svelte",
 		"./components/ObjectTypeNarrowing.svelte": "./components/ObjectTypeNarrowing.svelte",
 		"./components/PageHeader.svelte": "./components/PageHeader.svelte",
@@ -123,6 +127,7 @@
 		"./components/Path.svelte": "./components/Path.svelte",
 		"./components/Popover.svelte": "./components/Popover.svelte",
 		"./components/RadioButton.svelte": "./components/RadioButton.svelte",
+		"./components/Range.svelte": "./components/Range.svelte",
 		"./components/Required.svelte": "./components/Required.svelte",
 		"./components/ResourceEditor.svelte": "./components/ResourceEditor.svelte",
 		"./components/ResourcePicker.svelte": "./components/ResourcePicker.svelte",
@@ -174,6 +179,7 @@
 		"./components/apps/components/helpers/RunnableComponent.svelte": "./components/apps/components/helpers/RunnableComponent.svelte",
 		"./components/apps/components/helpers/RunnableWrapper.svelte": "./components/apps/components/helpers/RunnableWrapper.svelte",
 		"./components/apps/components/numberInputs/AppNumberInput.svelte": "./components/apps/components/numberInputs/AppNumberInput.svelte",
+		"./components/apps/components/numberInputs/AppSliderInputs.svelte": "./components/apps/components/numberInputs/AppSliderInputs.svelte",
 		"./components/apps/components/selectInputs/AppCheckbox.svelte": "./components/apps/components/selectInputs/AppCheckbox.svelte",
 		"./components/apps/components/selectInputs/AppSelect.svelte": "./components/apps/components/selectInputs/AppSelect.svelte",
 		"./components/apps/components/table/AppTable.svelte": "./components/apps/components/table/AppTable.svelte",
@@ -184,7 +190,6 @@
 		"./components/apps/editor/AppEditorHeader.svelte": "./components/apps/editor/AppEditorHeader.svelte",
 		"./components/apps/editor/AppExportButton.svelte": "./components/apps/editor/AppExportButton.svelte",
 		"./components/apps/editor/AppPreview.svelte": "./components/apps/editor/AppPreview.svelte",
-		"./components/apps/editor/AppPublishButton.svelte": "./components/apps/editor/AppPublishButton.svelte",
 		"./components/apps/editor/ComponentEditor.svelte": "./components/apps/editor/ComponentEditor.svelte",
 		"./components/apps/editor/ComponentHeader.svelte": "./components/apps/editor/ComponentHeader.svelte",
 		"./components/apps/editor/GridEditor.svelte": "./components/apps/editor/GridEditor.svelte",
@@ -342,6 +347,7 @@
 		"./components/home/ListFilters.svelte": "./components/home/ListFilters.svelte",
 		"./components/home/NoItemFound.svelte": "./components/home/NoItemFound.svelte",
 		"./components/icons/AirtableIcon.svelte": "./components/icons/AirtableIcon.svelte",
+		"./components/icons/AppwriteIcon.svelte": "./components/icons/AppwriteIcon.svelte",
 		"./components/icons/ClickhouseIcon.svelte": "./components/icons/ClickhouseIcon.svelte",
 		"./components/icons/DatadogIcon.svelte": "./components/icons/DatadogIcon.svelte",
 		"./components/icons/DbIcon.svelte": "./components/icons/DbIcon.svelte",
@@ -359,6 +365,7 @@
 		"./components/icons/HatIcon.svelte": "./components/icons/HatIcon.svelte",
 		"./components/icons/HttpIcon.svelte": "./components/icons/HttpIcon.svelte",
 		"./components/icons/HubspotIcon.svelte": "./components/icons/HubspotIcon.svelte",
+		"./components/icons/LinkdingIcon.svelte": "./components/icons/LinkdingIcon.svelte",
 		"./components/icons/LinkedinIcon.svelte": "./components/icons/LinkedinIcon.svelte",
 		"./components/icons/Mail.svelte": "./components/icons/Mail.svelte",
 		"./components/icons/MailchimpIcon.svelte": "./components/icons/MailchimpIcon.svelte",

package/utils.d.ts

@@ -99,6 +99,7 @@ export declare function loadHubApps(): Promise<{
 }[] | undefined>;
 export declare function formatCron(inp: string): string;
 export declare function flowToHubUrl(flow: Flow): URL;
+export declare function appToHubUrl(staticApp: any): URL;
 export declare function scriptToHubUrl(content: string, summary: string, description: string, kind: Script.kind, language: Script.language, schema: Schema | undefined, lock: string | undefined): URL;
 export declare function classNames(...classes: Array<string | undefined>): string;
 export declare function scriptLangToEditorLang(lang: Script.language): 'typescript' | 'python' | 'go' | 'shell';

package/utils.js

@@ -491,6 +491,11 @@ export function flowToHubUrl(flow) {
     url.searchParams.append('flow', encodeState(openFlow));
     return url;
 }
+export function appToHubUrl(staticApp) {
+    const url = new URL('https://hub.windmill.dev/apps/add');
+    url.searchParams.append('app', encodeState(staticApp));
+    return url;
+}
 export function scriptToHubUrl(content, summary, description, kind, language, schema, lock) {
     const url = new URL('https://hub.windmill.dev/scripts/add');
     url.searchParams.append('content', content);

package/components/apps/editor/AppPublishButton.svelte

@@ -1,46 +0,0 @@
-<script>import Drawer from '../../common/drawer/Drawer.svelte';
-import DrawerContent from '../../common/drawer/DrawerContent.svelte';
-import { copyToClipboard } from '../../../utils';
-import { faClipboard, faFileExport, faGlobe } from '@fortawesome/free-solid-svg-icons';
-import Icon from 'svelte-awesome';
-import { Highlight } from 'svelte-highlight';
-import json from 'svelte-highlight/languages/json';
-import { Button } from '../../common';
-let jsonViewerDrawer;
-export let app;
-export let staticExporter;
-export let summary;
-function toStatic() {
-    const newApp = JSON.parse(JSON.stringify(app));
-    newApp.grid.forEach((x) => {
-        let c = x.data;
-        if (c.componentInput?.type == 'runnable') {
-            c.componentInput.value = staticExporter[x.id]();
-        }
-    });
-    return { app: newApp, summary };
-}
-</script>
-
-<Button size="sm" variant="border" color="light" on:click={() => jsonViewerDrawer.toggleDrawer()}>
-	<Icon data={faGlobe} scale={0.6} class="inline mr-2" />
-	Publish
-</Button>
-
-<Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="App JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
-		<div class="relative">
-			<Button
-				on:click={() => copyToClipboard(JSON.stringify(toStatic(), null, 4))}
-				color="dark"
-				variant="border"
-				size="sm"
-				startIcon={{ icon: faClipboard }}
-				btnClasses="absolute top-2 right-2"
-			>
-				Copy content
-			</Button>
-			<Highlight language={json} code={JSON.stringify(toStatic(), null, 4)} />
-		</div>
-	</DrawerContent>
-</Drawer>

package/components/apps/editor/AppPublishButton.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { App } from '../types';
-declare const __propDef: {
-    props: {
-        app: App;
-        staticExporter: Record<string, () => any>;
-        summary: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppPublishButtonProps = typeof __propDef.props;
-export type AppPublishButtonEvents = typeof __propDef.events;
-export type AppPublishButtonSlots = typeof __propDef.slots;
-export default class AppPublishButton extends SvelteComponentTyped<AppPublishButtonProps, AppPublishButtonEvents, AppPublishButtonSlots> {
-}
-export {};