windmill-components 1.36.0 → 1.36.2

package/components/common/button/Button.svelte

@@ -1,6 +1,8 @@
-<script>import { goto } from '$app/navigation';
+<script>import { createEventDispatcher } from 'svelte';
+import { goto } from '$app/navigation';
 import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
+import { ButtonType } from './model';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
@@ -10,101 +12,62 @@ export let disabled = false;
 export let href = undefined;
 export let target = '_self';
 export let iconOnly = false;
-export let id = '';
 export let startIcon = undefined;
 export let endIcon = undefined;
+export let element = undefined;
+export let id = '';
+const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
     blue: {
-        border: 'border-blue-500 hover:border-blue-700 bg-white hover:bg-blue-100 text-blue-500 hover:text-blue-700 focus:ring-blue-300',
-        contained: 'bg-blue-500 hover:bg-blue-700 text-white focus:ring-blue-300'
+        border: 'border-blue-500 hover:border-blue-700 focus:border-blue-700 bg-white hover:bg-blue-100 focus:bg-blue-100 text-blue-500 hover:text-blue-700 focus:text-blue-700 focus:ring-blue-300',
+        contained: 'bg-blue-500 hover:bg-blue-700 focus:bg-blue-700 text-white focus:ring-blue-300'
     },
     red: {
         border: 'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
         contained: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-300'
     },
     dark: {
-        border: 'border-gray-800 hover:border-gray-900 bg-white hover:bg-gray-200 text-gray-800 hover:text-gray-900 focus:ring-gray-300',
-        contained: 'bg-gray-700 hover:bg-gray-900 text-white focus:ring-gray-300'
+        border: 'border-gray-800 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
+        contained: 'bg-gray-700 hover:bg-gray-900 focus:bg-gray-900 text-white focus:ring-gray-300'
     },
     light: {
-        border: 'border bg-white hover:bg-gray-100 text-gray-700 hover:text-gray-800 focus:ring-gray-300',
-        contained: 'bg-white hover:bg-gray-100 text-gray-700 focus:ring-gray-300'
+        border: 'border bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 hover:text-gray-800 focus:text-gray-800 focus:ring-gray-300',
+        contained: 'bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 focus:ring-gray-300'
     }
 };
-const fontSizeClasses = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-md',
-    lg: 'text-lg',
-    xl: 'text-xl'
-};
-const spacingClasses = {
-    xs: 'px-3 py-1.5',
-    sm: 'px-3 py-1.5',
-    md: 'px-4 py-2',
-    lg: 'px-4 py-2',
-    xl: 'px-4 py-2'
-};
-const iconScale = {
-    xs: 0.6,
-    sm: 0.8,
-    md: 1,
-    lg: 1.1,
-    xl: 1.2
-};
 $: buttonProps = {
-    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', fontSizeClasses[size], spacingClasses[spacingSize], 'focus:ring-4 font-medium', 'rounded-md', 'flex justify-center items-center text-center whitespace-nowrap', btnClasses, disabled ? 'pointer-events-none cursor-default filter grayscale' : ''),
-    disabled
+    class: classNames(colorVariants[color][variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-4 font-medium', 'rounded-md', 'flex justify-center items-center text-center whitespace-nowrap', btnClasses, disabled ? 'pointer-events-none cursor-default filter grayscale' : ''),
+    disabled,
+    href,
+    target,
+    tabindex: disabled ? -1 : 0
 };
+function onClick(event) {
+    dispatch('click', event);
+    if (href)
+        goto(href);
+}
 $: isSmall = size === 'xs' || size === 'sm';
+$: startIconClass = classNames(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes);
+$: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes);
 </script>
 
-{#if href}
-	<button
-		{id}
-		type="button"
-		on:click|stopPropagation={() => goto(href ?? '#')}
-		{target}
-		tabindex={disabled ? -1 : 0}
-		{...buttonProps}
-	>
-		{#if startIcon}
-			<Icon
-				data={startIcon.icon}
-				class={classNames(iconOnly ? undefined : 'mr-2', startIcon.classes)}
-				scale={iconScale[size]}
-			/>
-		{/if}
-		{#if !iconOnly}
-			<slot />
-		{/if}
-		{#if endIcon}
-			<Icon
-				data={endIcon.icon}
-				class={classNames(iconOnly ? undefined : 'ml-2', endIcon.classes)}
-				scale={iconScale[size]}
-			/>
-		{/if}
-	</button>
-{:else}
-	<button {id} type="button" on:click|stopPropagation {...buttonProps} {...$$restProps}>
-		{#if startIcon}
-			<Icon
-				data={startIcon.icon}
-				class={classNames(iconOnly ? undefined : 'mr-2', startIcon.classes)}
-				scale={iconScale[size]}
-			/>
-		{/if}
-		{#if !iconOnly}
-			<slot />
-		{/if}
-		{#if endIcon}
-			<Icon
-				data={endIcon.icon}
-				class={classNames(iconOnly ? undefined : 'ml-2', endIcon.classes)}
-				scale={iconScale[size]}
-			/>
-		{/if}
-	</button>
-{/if}
+<svelte:element
+	this={href ? 'a' : 'button'}
+	bind:this={element}
+	on:click|stopPropagation={onClick}
+	on:focus
+	on:blur
+	{...buttonProps}
+>
+	{#if startIcon}
+		<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
+	{/if}
+	{#if !iconOnly}
+		<slot />
+	{/if}
+	{#if endIcon}
+		<Icon data={endIcon.icon} class={endIconClass} scale={ButtonType.IconScale[size]} />
+	{/if}
+</svelte:element>

package/components/common/button/Button.svelte.d.ts

@@ -1,29 +1,26 @@
 import { SvelteComponentTyped } from "svelte";
-import type { Button } from './model';
+import Icon from 'svelte-awesome';
+import { ButtonType } from './model';
 declare const __propDef: {
     props: {
-        [x: string]: any;
-        size?: Button.Size | undefined;
-        spacingSize?: Button.Size | undefined;
-        color?: Button.Color | undefined;
-        variant?: Button.Variant | undefined;
+        size?: ButtonType.Size | undefined;
+        spacingSize?: ButtonType.Size | undefined;
+        color?: ButtonType.Color | undefined;
+        variant?: ButtonType.Variant | undefined;
         btnClasses?: string | undefined;
         disabled?: boolean | undefined;
         href?: string | undefined;
-        target?: Button.Target | undefined;
+        target?: ButtonType.Target | undefined;
         iconOnly?: boolean | undefined;
+        startIcon?: ButtonType.Icon | undefined;
+        endIcon?: ButtonType.Icon | undefined;
+        element?: ButtonType.Element | undefined;
         id?: string | undefined;
-        startIcon?: {
-            icon: any;
-            classes?: string;
-        } | undefined;
-        endIcon?: {
-            icon: any;
-            classes?: string;
-        } | undefined;
     };
     events: {
-        click: MouseEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/common/button/ButtonPopup.svelte

@@ -0,0 +1,67 @@
+<script>import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { setContext } from 'svelte';
+import Icon from 'svelte-awesome';
+import { Button, ButtonType, Popup } from '..';
+export let size = 'md';
+export let color = 'blue';
+export let variant = 'contained';
+export let mainClasses = '';
+export let toggleClasses = '';
+export let disabled = false;
+export let href = undefined;
+export let target = '_self';
+export let startIcon = undefined;
+export let endIcon = undefined;
+let ref;
+setContext(ButtonType.ItemContextKey, { size, color });
+$: separator = color === 'red' || color === 'blue' ? 'border-gray-200' : 'border-gray-400';
+$: commonProps = {
+    size,
+    color,
+    variant,
+    disabled
+};
+</script>
+
+<div class="flex justy-start items-center">
+	{#if $$slots.main}
+		<Button
+			{...commonProps}
+			{href}
+			{target}
+			{startIcon}
+			{endIcon}
+			btnClasses="!rounded-r-none !border-r-0 {mainClasses}"
+			on:click
+		>
+			<slot name="main" />
+		</Button>
+	{/if}
+	<span class={$$slots.main && variant === 'contained' ? 'border-l ' + separator : ''}>
+		<Button
+			bind:element={ref}
+			{...commonProps}
+			btnClasses="{$$slots.main ? '!rounded-l-none' : ''} {toggleClasses}"
+		>
+			<slot name="toggle">
+				<!-- Invisible, but needed to match the height of the 'main' button -->
+				<span class="!opacity-0 !w-0">A</span>
+				<Icon data={faChevronDown} scale={ButtonType.IconScale[size]} />
+			</slot>
+		</Button>
+	</span>
+</div>
+{#if ref}
+	<Popup
+		{ref}
+		options={{
+			placement: $$slots.main ? 'bottom-end' : 'bottom',
+			strategy: 'absolute',
+			modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
+		}}
+	>
+		<ul class="bg-white rounded-t border pt-1 pb-2 max-h-40 overflow-auto">
+			<slot />
+		</ul>
+	</Popup>
+{/if}

package/components/common/button/ButtonPopup.svelte.d.ts

@@ -0,0 +1,33 @@
+import { SvelteComponentTyped } from "svelte";
+import Icon from 'svelte-awesome';
+import { ButtonType } from '..';
+declare const __propDef: {
+    props: {
+        size?: ButtonType.Size | undefined;
+        color?: ButtonType.Color | undefined;
+        variant?: ButtonType.Variant | undefined;
+        mainClasses?: string | undefined;
+        toggleClasses?: string | undefined;
+        disabled?: boolean | undefined;
+        href?: string | undefined;
+        target?: ButtonType.Target | undefined;
+        startIcon?: ButtonType.Icon | undefined;
+        endIcon?: ButtonType.Icon | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        main: {};
+        toggle: {};
+        default: {};
+    };
+};
+export declare type ButtonPopupProps = typeof __propDef.props;
+export declare type ButtonPopupEvents = typeof __propDef.events;
+export declare type ButtonPopupSlots = typeof __propDef.slots;
+export default class ButtonPopup extends SvelteComponentTyped<ButtonPopupProps, ButtonPopupEvents, ButtonPopupSlots> {
+}
+export {};

package/components/common/button/ButtonPopupItem.svelte

@@ -0,0 +1,47 @@
+<script>import { getContext } from 'svelte';
+import { Button, ButtonType } from '..';
+import { classNames } from '../../../utils';
+export let btnClasses = '';
+export let disabled = false;
+export let href = undefined;
+export let target = '_self';
+export let iconOnly = false;
+export let startIcon = undefined;
+export let endIcon = undefined;
+const props = getContext(ButtonType.ItemContextKey);
+const iconWidthClass = {
+    xs: '!w-[12px]',
+    sm: '!w-[14px]',
+    md: '!w-[16px]',
+    lg: '!w-[18px]',
+    xl: '!w-[20px]'
+};
+const getWidthClass = () => (props?.size ? iconWidthClass[props.size] : undefined);
+$: buttonProps = {
+    ...props,
+    variant: 'border',
+    btnClasses: classNames(btnClasses, '!justify-start !border-0 !rounded-none !w-full'),
+    disabled,
+    href,
+    target,
+    iconOnly,
+    startIcon: startIcon
+        ? {
+            icon: startIcon.icon,
+            classes: classNames(startIcon?.classes, getWidthClass())
+        }
+        : undefined,
+    endIcon: endIcon
+        ? {
+            icon: endIcon.icon,
+            classes: classNames(endIcon?.classes, getWidthClass())
+        }
+        : undefined
+};
+</script>
+
+<li class="mt-1">
+	<Button {...buttonProps} on:click>
+		<slot />
+	</Button>
+</li>

package/components/common/button/ButtonPopupItem.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import { ButtonType } from '..';
+declare const __propDef: {
+    props: {
+        btnClasses?: string | undefined;
+        disabled?: boolean | undefined;
+        href?: string | undefined;
+        target?: ButtonType.Target | undefined;
+        iconOnly?: boolean | undefined;
+        startIcon?: ButtonType.Icon | undefined;
+        endIcon?: ButtonType.Icon | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ButtonPopupItemProps = typeof __propDef.props;
+export declare type ButtonPopupItemEvents = typeof __propDef.events;
+export declare type ButtonPopupItemSlots = typeof __propDef.slots;
+export default class ButtonPopupItem extends SvelteComponentTyped<ButtonPopupItemProps, ButtonPopupItemEvents, ButtonPopupItemSlots> {
+}
+export {};

package/components/common/button/model.d.ts

@@ -1,6 +1,19 @@
-export declare namespace Button {
+export declare namespace ButtonType {
     type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     type Color = 'blue' | 'red' | 'dark' | 'light';
     type Variant = 'contained' | 'border';
     type Target = '_self' | '_blank';
+    type Element = HTMLButtonElement | HTMLAnchorElement;
+    interface Icon {
+        icon: any;
+        classes?: string;
+    }
+    const FontSizeClasses: Record<ButtonType.Size, string>;
+    const SpacingClasses: Record<ButtonType.Size, string>;
+    const IconScale: Record<ButtonType.Size, number>;
+    const ItemContextKey: "popupItemProps";
+    interface ItemProps {
+        size: Size;
+        color: Color;
+    }
 }

package/components/common/button/model.js

@@ -1 +1,26 @@
-export {};
+export var ButtonType;
+(function (ButtonType) {
+    ButtonType.FontSizeClasses = {
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'text-md',
+        lg: 'text-lg',
+        xl: 'text-xl'
+    };
+    ButtonType.SpacingClasses = {
+        xs: 'px-3 py-1.5',
+        sm: 'px-3 py-1.5',
+        md: 'px-4 py-2',
+        lg: 'px-4 py-2',
+        xl: 'px-4 py-2'
+    };
+    ButtonType.IconScale = {
+        xs: 0.7,
+        sm: 0.8,
+        md: 1,
+        lg: 1.1,
+        xl: 1.2
+    };
+    // ButtonPopup types
+    ButtonType.ItemContextKey = 'popupItemProps';
+})(ButtonType || (ButtonType = {}));

package/components/common/drawer/Drawer.svelte

@@ -21,6 +21,7 @@ function handleClickAway() {
     dispatch('clickAway');
     open = !open;
 }
+$: open ? dispatch('open') : dispatch('close');
 onMount(() => {
     mounted = true;
     scrollLock(open);

package/components/common/drawer/Drawer.svelte.d.ts

@@ -9,6 +9,8 @@ declare const __propDef: {
     };
     events: {
         clickAway: CustomEvent<any>;
+        open: CustomEvent<any>;
+        close: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/common/drawer/DrawerContent.svelte

@@ -5,7 +5,7 @@ export let title = undefined;
 const dispatch = createEventDispatcher();
 </script>
 
-<div class="divide-y h-screen">
+<div class="flex flex-col divide-y h-screen">
 	<div class="flex justify-between items-center py-2 px-4">
 		<span class="text-sm font-bold">{title}</span>
 		<button on:click={() => dispatch('close')}>

package/components/common/index.d.ts

@@ -1,10 +1,14 @@
 export { default as ActionRow } from './actionRow/ActionRow.svelte';
 export { default as Badge } from './badge/Badge.svelte';
 export { default as Button } from './button/Button.svelte';
+export { default as ButtonPopup } from './button/ButtonPopup.svelte';
+export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
+export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as Menu } from './menu/Menu.svelte';
 export { default as MenuItem } from './menu/MenuItem.svelte';
+export { default as Popup } from './popup/Popup.svelte';
 export { default as Tab } from './tabs/Tab.svelte';
 export { default as TabContent } from './tabs/TabContent.svelte';
 export { default as Tabs } from './tabs/Tabs.svelte';

package/components/common/index.js

@@ -1,10 +1,14 @@
 export { default as ActionRow } from './actionRow/ActionRow.svelte';
 export { default as Badge } from './badge/Badge.svelte';
 export { default as Button } from './button/Button.svelte';
+export { default as ButtonPopup } from './button/ButtonPopup.svelte';
+export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
+export { default as Kbd } from './kbd/Kbd.svelte';
 export { default as Menu } from './menu/Menu.svelte';
 export { default as MenuItem } from './menu/MenuItem.svelte';
+export { default as Popup } from './popup/Popup.svelte';
 export { default as Tab } from './tabs/Tab.svelte';
 export { default as TabContent } from './tabs/TabContent.svelte';
 export { default as Tabs } from './tabs/Tabs.svelte';

package/components/common/kbd/Kbd.svelte

@@ -0,0 +1,7 @@
+<kbd
+	class="mx-1 px-2 py-1.5 text-xs font-semibold text-gray-800 
+	bg-gray-100 border border-gray-200 rounded-lg 
+	dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500 {$$props.class}"
+>
+	<slot />
+</kbd>

package/components/common/kbd/Kbd.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  KbdProps */
+/** @typedef {typeof __propDef.events}  KbdEvents */
+/** @typedef {typeof __propDef.slots}  KbdSlots */
+export default class Kbd extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type KbdProps = typeof __propDef.props;
+export type KbdEvents = typeof __propDef.events;
+export type KbdSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/common/popup/Popup.svelte

@@ -0,0 +1,147 @@
+<svelte:options accessors />
+
+<script>import { onMount, onDestroy } from 'svelte';
+import { slide } from 'svelte/transition';
+import { createPopperActions } from 'svelte-popperjs';
+import { clickOutside } from '../../../utils';
+import { Kbd } from '..';
+import { createStateMachine } from '../../../stateMachine';
+export let ref;
+export let options = { placement: 'auto' };
+/** Events on the reference element */
+export let openOn = ['focus'];
+/** Events on the reference element */
+export let closeOn = ['blur'];
+export let disableInstruction = false;
+export let innerClasses = '';
+export let outerClasses = '';
+const states = ['closed', 'open-focus-in', 'open-focus-out'];
+const stateMachine = createStateMachine(states, {
+    to: {
+        closed: ({ previousState, currentState }) => {
+            const activeElem = document.activeElement;
+            const revert = popup.contains(activeElem) || ref.contains(activeElem);
+            return revert ? previousState : currentState;
+        }
+    }
+});
+const [popperRef, popperContent] = createPopperActions();
+let popup;
+let focusableElements;
+function getFocusableElements() {
+    let elements = [];
+    popup
+        .querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
+        .forEach((elem) => elements.push(elem));
+    focusableElements = elements.filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
+    focusableElements.forEach((el) => {
+        el.tabIndex = -1;
+        el.addEventListener('click', openFocusIn);
+        el.addEventListener('blur', closed);
+    });
+}
+function closed() {
+    if ($stateMachine.currentState === 'open-focus-out') {
+        setTimeout(() => {
+            stateMachine.setState('closed');
+        }, 0);
+    }
+    else {
+        stateMachine.setState('closed');
+    }
+}
+function openFocusOut() {
+    stateMachine.setState('open-focus-out');
+}
+function openFocusIn() {
+    stateMachine.setState('open-focus-in');
+}
+function keyDown(event) {
+    const modifiers = ['Shift', 'Control', 'Command', 'Alt'];
+    // Prevent closing the popup when the only key pressed is a modifier key
+    if (modifiers.includes(event.key) || $stateMachine.currentState === 'closed')
+        return;
+    if (event.key === 'Escape') {
+        return document.activeElement?.blur();
+    }
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
+        return;
+    event.preventDefault();
+    if (popup.contains(document.activeElement)) {
+        const index = focusableElements.findIndex((elem) => elem === document.activeElement);
+        if (index === -1)
+            return;
+        let targetIndex = undefined;
+        if (event.key === 'ArrowUp') {
+            targetIndex = index === 0 ? focusableElements.length - 1 : index - 1;
+        }
+        else if (event.key === 'ArrowDown') {
+            targetIndex = index + 1 === focusableElements.length ? 0 : index + 1;
+        }
+        if (targetIndex !== undefined) {
+            focusableElements[targetIndex].focus();
+            stateMachine.setState('open-focus-in');
+        }
+    }
+    else {
+        const elem = focusableElements[event.key === 'ArrowUp' ? focusableElements.length - 1 : 0];
+        if (elem) {
+            elem.focus();
+            stateMachine.setState('open-focus-in');
+        }
+    }
+}
+function addRefListeners() {
+    openOn.forEach((action) => ref.addEventListener(action, openFocusOut));
+    closeOn.forEach((action) => ref.addEventListener(action, closed));
+}
+function removeAllListeners() {
+    focusableElements?.forEach((el) => el.removeEventListener('click', openFocusIn));
+    focusableElements?.forEach((el) => el.removeEventListener('blur', closed));
+    openOn.forEach((action) => ref.removeEventListener(action, openFocusOut));
+    closeOn.forEach((action) => ref.removeEventListener(action, closed));
+}
+$: if ($stateMachine.currentState === 'closed') {
+    focusableElements?.forEach((el) => el.removeEventListener('click', openFocusIn));
+}
+else {
+    setTimeout(() => {
+        getFocusableElements();
+    }, 0);
+}
+onMount(() => {
+    popperRef(ref);
+    addRefListeners();
+});
+onDestroy(removeAllListeners);
+</script>
+
+<svelte:window on:keydown={keyDown} />
+
+<div
+	bind:this={popup}
+	use:popperContent={options}
+	use:clickOutside
+	on:click_outside={closed}
+	aria-haspopup="true"
+	aria-expanded={$stateMachine.currentState !== 'closed'}
+>
+	{#if $stateMachine.currentState !== 'closed'}
+		<div transition:slide={{ duration: 200 }} class={outerClasses}>
+			<div class={innerClasses}>
+				<slot />
+			</div>
+			{#if !disableInstruction && focusableElements?.length}
+				<div
+					class="flex justify-center items-center font-semibold
+					text-xs text-gray-700 p-1 border-x border-b rounded-b bg-gray-100"
+				>
+					Use
+					<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↑</Kbd>
+					and
+					<Kbd class="!bg-gray-200 !border-gray-300 !px-1 !py-0 !rounded-sm">↓</Kbd>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>

package/components/common/popup/Popup.svelte.d.ts

@@ -0,0 +1,46 @@
+import { SvelteComponentTyped } from "svelte";
+import { type PopperOptions } from 'svelte-popperjs';
+declare const __propDef: {
+    props: {
+        ref: HTMLElement;
+        options?: PopperOptions<any>;
+        /** Events on the reference element */ openOn?: (keyof HTMLElementEventMap)[] | undefined;
+        /** Events on the reference element */ closeOn?: (keyof HTMLElementEventMap)[] | undefined;
+        disableInstruction?: boolean | undefined;
+        innerClasses?: string | undefined;
+        outerClasses?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type PopupProps = typeof __propDef.props;
+export declare type PopupEvents = typeof __propDef.events;
+export declare type PopupSlots = typeof __propDef.slots;
+export default class Popup extends SvelteComponentTyped<PopupProps, PopupEvents, PopupSlots> {
+    get ref(): HTMLElement;
+    /**accessor*/
+    set ref(_: HTMLElement);
+    get options(): PopperOptions<any>;
+    /**accessor*/
+    set options(_: PopperOptions<any>);
+    get openOn(): (keyof HTMLElementEventMap)[] | undefined;
+    /**accessor*/
+    set openOn(_: (keyof HTMLElementEventMap)[] | undefined);
+    get closeOn(): (keyof HTMLElementEventMap)[] | undefined;
+    /**accessor*/
+    set closeOn(_: (keyof HTMLElementEventMap)[] | undefined);
+    get disableInstruction(): boolean | undefined;
+    /**accessor*/
+    set disableInstruction(_: boolean | undefined);
+    get innerClasses(): string | undefined;
+    /**accessor*/
+    set innerClasses(_: string | undefined);
+    get outerClasses(): string | undefined;
+    /**accessor*/
+    set outerClasses(_: string | undefined);
+}
+export {};

package/components/flows/content/FlowLoop.svelte

@@ -23,15 +23,15 @@ $: mod = $flowStore.value.modules[index];
 $: pickableProperties = getStepPropPicker([Number(index)], $flowStore.schema, $flowStateStore, $previewArgs).pickableProperties;
 </script>
 
-<FlowCard title="For loop">
-	<div slot="header" class="grow">
-		<input bind:value={mod.summary} placeholder={'Summary'} />
-	</div>
-	<div>
+<div class="h-full flex flex-col">
+	<FlowCard title="For loop">
+		<div slot="header" class="grow">
+			<input bind:value={mod.summary} placeholder={'Summary'} />
+		</div>
 		<div class="overflow-hidden flex-grow">
-			<VSplitPane topPanelSize="50%" downPanelSize="40%" minTopPaneSize="20%" minDownPaneSize="20%">
-				<top slot="top">
-					<div class="p-6 flex flex-col">
+			<VSplitPane topPanelSize="60%" downPanelSize="40%" minTopPaneSize="20%" minDownPaneSize="20%">
+				<top slot="top" class="h-full">
+					<div class="p-6 flex flex-col h-full overflow-clip">
 						{#if mod.value.type === 'forloopflow'}
 							<span class="mb-2 text-sm font-bold"
 								>Iterator expression
@@ -163,6 +163,6 @@ $: pickableProperties = getStepPropPicker([Number(index)], $flowStore.schema, $f
 					</Tabs>
 				</down>
 			</VSplitPane>
-		</div>
-	</div>
-</FlowCard>
+		</div></FlowCard
+	>
+</div>

package/components/flows/content/FlowModuleHeader.svelte

@@ -67,8 +67,8 @@ $: moduleRetry = module.retry?.constant || module.retry?.exponential;
 		variant="border"
 		startIcon={{ icon: faTrashAlt }}
 		{iconOnly}
-		on:click={(event) => {
-			if (event.shiftKey || shouldPick) {
+		on:click={({ detail }) => {
+			if (detail.shiftKey || shouldPick) {
 				dispatch('delete')
 				select('settings')
 			} else {

package/components/flows/content/FlowSettings.svelte

@@ -7,6 +7,7 @@ import Required from '../../Required.svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import FlowSchedules from './FlowSchedules.svelte';
 import SvelteMarkdown from 'svelte-markdown';
+import { Toggle } from 'flowbite-svelte';
 export let initialPath;
 export let defaultTab = 'metadata';
 </script>
@@ -15,6 +16,7 @@ export let defaultTab = 'metadata';
 	<Tabs selected={defaultTab}>
 		<Tab value="metadata">Metadata</Tab>
 		<Tab value="schedule">Schedule</Tab>
+		<Tab value="same-worker">Same Worker</Tab>
 
 		<svelte:fragment slot="content">
 			<TabContent value="metadata" class="p-4">
@@ -73,6 +75,17 @@ export let defaultTab = 'metadata';
 			<TabContent value="schedule" class="p-4">
 				<FlowSchedules />
 			</TabContent>
+
+			<TabContent value="same-worker" class="p-4">
+				<span class="my-2 text-sm font-bold">Same Worker</span>
+
+				<Toggle
+					bind:checked={$flowStore.value.same_worker}
+					options={{
+						right: 'Same Worker'
+					}}
+				/>
+			</TabContent>
 		</svelte:fragment>
 	</Tabs>
 </FlowCard>

package/components/flows/pickers/PickHubScript.svelte

@@ -6,7 +6,7 @@ import { createEventDispatcher } from 'svelte';
 import { Script } from '../../../gen';
 export let kind;
 let items;
-$: items = $hubScripts?.filter((x) => x.kind == kind);
+$: items = $hubScripts?.filter((x) => x.kind == kind) ?? [];
 let itemPicker;
 const dispatch = createEventDispatcher();
 </script>

package/components/flows/pickers/model.d.ts

@@ -0,0 +1,5 @@
+export interface HubItem {
+    summary: String;
+    path: String;
+    version?: String;
+}

package/components/flows/pickers/model.js

@@ -0,0 +1 @@
+export {};

package/components/scripts/CreateActions.svelte

@@ -0,0 +1,114 @@
+<script>import { goto } from '$app/navigation';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import Fuse from 'fuse.js';
+import { Script } from '../../gen';
+import { ScriptService } from '../../gen';
+import { workspaceStore, hubScripts } from '../../stores';
+import { sendUserToast } from '../../utils';
+import { Button, ButtonPopup, ButtonPopupItem } from '../common';
+import ItemPicker from '../ItemPicker.svelte';
+import Drawer from '../common/drawer/Drawer.svelte';
+import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+import { flowStore, initFlow } from '../flows/flowStore';
+const drawers = {
+    hub: undefined,
+    template: undefined,
+    json: undefined
+};
+let hubItems;
+let pendingJson;
+let templateScripts = [];
+let templateFilter = '';
+let filteredTemplates;
+const fuseOptions = {
+    includeScore: false,
+    keys: ['description', 'path', 'content', 'hash', 'summary']
+};
+const templateFuse = new Fuse(templateScripts, fuseOptions);
+$: hubItems = $hubScripts?.filter((x) => x.kind == Script.kind.SCRIPT) || [];
+$: filteredTemplates =
+    templateFilter.length > 0
+        ? templateFuse.search(templateFilter).map((value) => value.item)
+        : templateScripts;
+function importJson() {
+    Object.assign($flowStore, JSON.parse(pendingJson));
+    initFlow($flowStore);
+    sendUserToast('OpenFlow imported from JSON');
+    drawers.json?.toggleDrawer();
+}
+async function loadTemplateScripts() {
+    templateScripts = await ScriptService.listScripts({
+        workspace: $workspaceStore,
+        isTemplate: true
+    });
+    templateFuse.setCollection(templateScripts);
+}
+</script>
+
+<!-- Buttons -->
+<div class="flex flex-row gap-2">
+	<ButtonPopup size="sm" startIcon={{ icon: faPlus }} href="/scripts/add">
+		<svelte:fragment slot="main">New script</svelte:fragment>
+		<ButtonPopupItem on:click={() => drawers.hub?.openModal()}>
+			Import script from WindmillHub
+		</ButtonPopupItem>
+		<ButtonPopupItem on:click={() => drawers.template?.toggleDrawer()}>
+			Import script from template
+		</ButtonPopupItem>
+		<ButtonPopupItem on:click={() => drawers.json?.toggleDrawer()}>
+			Import script from raw JSON
+		</ButtonPopupItem>
+	</ButtonPopup>
+</div>
+
+<!-- Initially hidden elements in a drawer -->
+<!-- WindmillHub script list -->
+<ItemPicker
+	bind:this={drawers.hub}
+	pickCallback={(path) => {
+		console.log('pick', { path })
+		goto('/scripts/add?hub=' + path)
+	}}
+	itemName={'Script'}
+	extraField="summary"
+	loadItems={async () => {
+		return hubItems
+	}}
+/>
+<!-- Template script list -->
+<Drawer bind:this={drawers.template} size="800px" on:open={loadTemplateScripts}>
+	<DrawerContent title="Pick a template" on:close={() => drawers.template?.toggleDrawer()}>
+		<div class="pt-2 pb-4">
+			<input placeholder="Search templates" bind:value={templateFilter} class="search-bar" />
+		</div>
+		<div class="flex flex-col mb-2 md:mb-6">
+			{#if filteredTemplates && filteredTemplates.length > 0}
+				{#each filteredTemplates as { summary, path, hash }}
+					<a
+						class="p-1 flex flex-row items-baseline gap-2 selected text-gray-700"
+						href="/scripts/add?template={path}"
+					>
+						{#if summary}
+							<p class="text-sm font-semibold">{summary}</p>
+						{/if}
+
+						<p class="text-sm">{path}</p>
+						<p class="text-gray-400 text-xs text-right grow">
+							Last version: {hash}
+						</p>
+					</a>
+				{/each}
+			{:else}
+				<p class="text-sm text-gray-700">No templates</p>
+			{/if}
+		</div>
+	</DrawerContent>
+</Drawer>
+<!-- Raw JSON -->
+<Drawer bind:this={drawers.json} size="800px">
+	<DrawerContent title="Import JSON" on:close={() => drawers.json?.toggleDrawer()}>
+		<div class="p-2"><Button size="sm" on:click={importJson}>Import</Button></div>
+		<SimpleEditor bind:code={pendingJson} lang="json" class="h-full" />
+	</DrawerContent>
+</Drawer>

package/components/scripts/CreateActions.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CreateActionsProps = typeof __propDef.props;
+export declare type CreateActionsEvents = typeof __propDef.events;
+export declare type CreateActionsSlots = typeof __propDef.slots;
+export default class CreateActions extends SvelteComponentTyped<CreateActionsProps, CreateActionsEvents, CreateActionsSlots> {
+}
+export {};

package/gen/models/FlowValue.d.ts

@@ -2,4 +2,5 @@ import type { FlowModule } from './FlowModule';
 export declare type FlowValue = {
     modules: Array<FlowModule>;
     failure_module?: FlowModule;
+    same_worker?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windmill-components",
-  "version": "1.36.0",
+  "version": "1.36.2",
   "devDependencies": {
     "@playwright/test": "^1.26.1",
     "@sveltejs/adapter-static": "^1.0.0-next.44",
@@ -132,6 +132,8 @@
     "./components/common/badge/Badge.svelte": "./components/common/badge/Badge.svelte",
     "./components/common/badge/model": "./components/common/badge/model.js",
     "./components/common/button/Button.svelte": "./components/common/button/Button.svelte",
+    "./components/common/button/ButtonPopup.svelte": "./components/common/button/ButtonPopup.svelte",
+    "./components/common/button/ButtonPopupItem.svelte": "./components/common/button/ButtonPopupItem.svelte",
     "./components/common/button/model": "./components/common/button/model.js",
     "./components/common/confirmationModal/ConfirmationModal.svelte": "./components/common/confirmationModal/ConfirmationModal.svelte",
     "./components/common/confirmationModal/UnsavedConfirmationModal.svelte": "./components/common/confirmationModal/UnsavedConfirmationModal.svelte",
@@ -139,8 +141,10 @@
     "./components/common/drawer/Drawer.svelte": "./components/common/drawer/Drawer.svelte",
     "./components/common/drawer/DrawerContent.svelte": "./components/common/drawer/DrawerContent.svelte",
     "./components/common": "./components/common/index.js",
+    "./components/common/kbd/Kbd.svelte": "./components/common/kbd/Kbd.svelte",
     "./components/common/menu/Menu.svelte": "./components/common/menu/Menu.svelte",
     "./components/common/menu/MenuItem.svelte": "./components/common/menu/MenuItem.svelte",
+    "./components/common/popup/Popup.svelte": "./components/common/popup/Popup.svelte",
     "./components/common/tabs/Tab.svelte": "./components/common/tabs/Tab.svelte",
     "./components/common/tabs/TabContent.svelte": "./components/common/tabs/TabContent.svelte",
     "./components/common/tabs/Tabs.svelte": "./components/common/tabs/Tabs.svelte",
@@ -178,6 +182,7 @@
     "./components/flows/pickers/FlowScriptPicker.svelte": "./components/flows/pickers/FlowScriptPicker.svelte",
     "./components/flows/pickers/PickHubScript.svelte": "./components/flows/pickers/PickHubScript.svelte",
     "./components/flows/pickers/PickScript.svelte": "./components/flows/pickers/PickScript.svelte",
+    "./components/flows/pickers/model": "./components/flows/pickers/model.js",
     "./components/flows/propPicker/PropPickerWrapper.svelte": "./components/flows/propPicker/PropPickerWrapper.svelte",
     "./components/flows/scheduleUtils": "./components/flows/scheduleUtils.js",
     "./components/flows/types": "./components/flows/types.js",
@@ -215,6 +220,7 @@
     "./components/propertyPicker/WarningMessage.svelte": "./components/propertyPicker/WarningMessage.svelte",
     "./components/propertyPicker/utils": "./components/propertyPicker/utils.js",
     "./components/script_editor/LogPanel.svelte": "./components/script_editor/LogPanel.svelte",
+    "./components/scripts/CreateActions.svelte": "./components/scripts/CreateActions.svelte",
     "./components/sidebar/MenuLink.svelte": "./components/sidebar/MenuLink.svelte",
     "./components/sidebar/SidebarContent.svelte": "./components/sidebar/SidebarContent.svelte",
     "./components/sidebar/UserMenu.svelte": "./components/sidebar/UserMenu.svelte",
@@ -340,6 +346,7 @@
     "./script_helpers": "./script_helpers.js",
     "./scripts": "./scripts.js",
     "./sql": "./sql.js",
+    "./stateMachine": "./stateMachine.js",
     "./stores": "./stores.js",
     "./user": "./user.js",
     "./utils": "./utils.js"

package/stateMachine.d.ts

@@ -0,0 +1,30 @@
+import { type Readable } from 'svelte/store';
+export interface StateMachine<T extends readonly string[]> {
+    states: T;
+    currentState: T[number];
+}
+export interface StateMachineTransition<T extends readonly string[]> {
+    from?: Partial<Record<T[number], TransitionFromFunction<T>>>;
+    to?: Partial<Record<T[number], TransitionToFunction<T>>>;
+}
+declare type StateMachineInfo<T extends readonly string[]> = {
+    states: StateMachine<T>['states'];
+    currentState: StateMachine<T>['currentState'];
+};
+/** The return value should be a `state` that is available on the current machine. */
+export declare type TransitionFromFunction<T extends readonly string[]> = (info: StateMachineInfo<T> & {
+    desiredState: T[number];
+}) => T[number];
+/** Callback after the state has been changed. */
+export declare type TransitionToFunction<T extends readonly string[]> = (info: StateMachineInfo<T> & {
+    previousState: T[number];
+}) => T[number];
+declare type StateStore<T extends readonly string[]> = Readable<StateMachine<T>> & {
+    setState: (state: T[number]) => StateMachineInfo<T>;
+};
+/** **IMPORTANT:** use the `as const` syntax on the states array to get type safety.
+ * *Example: `createStateMachine(['foo', 'bar'] as const)`*
+ *
+ * Returns a new state machine with the default state set to the first element of the `states` argument. */
+export declare function createStateMachine<T extends readonly string[]>(states: T, transition?: StateMachineTransition<T>): StateStore<T>;
+export {};

package/stateMachine.js

@@ -0,0 +1,41 @@
+import { writable } from 'svelte/store';
+/** **IMPORTANT:** use the `as const` syntax on the states array to get type safety.
+ * *Example: `createStateMachine(['foo', 'bar'] as const)`*
+ *
+ * Returns a new state machine with the default state set to the first element of the `states` argument. */
+export function createStateMachine(states, transition = {}) {
+    const defaultValue = {
+        states,
+        currentState: states[0]
+    };
+    const defaultStore = writable(defaultValue);
+    const stateStore = {
+        subscribe: defaultStore.subscribe,
+        setState: (nextState) => {
+            defaultStore.update((prev) => {
+                const previousState = prev.currentState;
+                const beforeFunc = transition?.from && transition.from[previousState];
+                const afterFunc = transition?.to && transition.to[nextState];
+                let returnState = nextState;
+                if (beforeFunc) {
+                    returnState = beforeFunc({
+                        states,
+                        currentState: previousState,
+                        desiredState: nextState
+                    });
+                }
+                if (afterFunc) {
+                    returnState = afterFunc({
+                        states,
+                        currentState: returnState,
+                        previousState
+                    });
+                }
+                prev.currentState = returnState;
+                return prev;
+            });
+            return { states, currentState: nextState };
+        }
+    };
+    return stateStore;
+}

package/utils.d.ts

@@ -13,7 +13,9 @@ export declare function sendUserToast(message: string, error?: boolean): void;
 export declare function truncateHash(hash: string): string;
 export declare function sleep(ms: number): Promise<void>;
 export declare function validatePassword(password: string): boolean;
-export declare function clickOutside(node: any): any;
+export declare function clickOutside(node: Node): {
+    destroy(): void;
+};
 export declare type DropdownType = 'action' | 'delete';
 export interface DropdownItem {
     displayName: string;

package/utils.js

@@ -92,11 +92,10 @@ export function validatePassword(password) {
     const re = /^(?=.*[\d])(?=.*[!@#$%^&*])[\w!@#$%^&*]{8,30}$/;
     return re.test(password);
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function clickOutside(node) {
     const handleClick = (event) => {
         if (node && !node.contains(event.target) && !event.defaultPrevented) {
-            node.dispatchEvent(new CustomEvent('click_outside', node));
+            node.dispatchEvent(new CustomEvent('click_outside', { detail: event }));
         }
     };
     document.addEventListener('click', handleClick, true);