windmill-components 1.531.1 → 1.537.1

package/package/components/Portal.svelte.d.ts

@@ -3,45 +3,25 @@ export function portal(el: any, options: any): {
     destroy: () => void;
 };
 export default Portal;
-type Portal = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
-    name?: any;
-    target?: string | HTMLElement | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
+type Portal = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
 };
-declare const Portal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+declare const Portal: import("svelte").Component<{
+    /**
+     * - DOM Element or CSS Selector
+     */
+    target?: string | HTMLElement | undefined;
     name?: any;
+    class?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * - DOM Element or CSS Selector
+     */
     target?: string | HTMLElement | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-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;
-}
+    name?: any;
+    class?: string | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+};

package/package/components/ResourceEditor.svelte

@@ -18,6 +18,7 @@ import GfmMarkdown from './GfmMarkdown.svelte';
 import TestTriggerConnection from './triggers/TestTriggerConnection.svelte';
 import GitHubAppIntegration from './GitHubAppIntegration.svelte';
 import Button from './common/button/Button.svelte';
+import { clearJsonSchemaResourceCache } from './schema/jsonSchemaResource.svelte';
 let { canSave = $bindable(true), resource_type = $bindable(undefined), path = $bindable(''), newResource = false, hidePath = false, onChange, defaultValues = undefined } = $props();
 let isValid = $state(true);
 let jsonError = $state('');
@@ -64,6 +65,9 @@ export async function editResource() {
             path: resourceToEdit.path,
             requestBody: { path, value: args, description }
         });
+        if (resourceToEdit.resource_type === 'json_schema') {
+            clearJsonSchemaResourceCache(resourceToEdit.path, $workspaceStore);
+        }
         sendUserToast(`Updated resource at ${path}`);
         dispatch('refresh', path);
     }

package/package/components/RunForm.svelte

@@ -25,7 +25,7 @@ export async function setArgs(nargs) {
 export function run() {
     runAction(scheduledForStr, args ?? {}, invisible_to_owner, overrideTag);
 }
-let { runnable = $bindable(), runAction, buttonText = 'Run', schedulable = true, detailed = true, autofocus = false, topButton = false, loading = false, noVariablePicker = false, viewKeybinding = false, scheduledForStr = $bindable(), invisible_to_owner = $bindable(), overrideTag = $bindable(), args = $bindable(), jsonView = false, isValid = $bindable(true) } = $props();
+let { runnable, runAction, buttonText = 'Run', schedulable = true, detailed = true, autofocus = false, topButton = false, loading = false, noVariablePicker = false, viewKeybinding = false, scheduledForStr = $bindable(), invisible_to_owner = $bindable(), overrideTag = $bindable(), args = $bindable(), jsonView = false, isValid = $bindable(true) } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -238,7 +238,7 @@ $effect(() => {
 								bind:scheduledForStr
 								bind:invisible_to_owner
 								bind:overrideTag
-								bind:runnable
+								{runnable}
 							/>
 						{/snippet}
 					</Popover>

package/package/components/RunForm.svelte.d.ts

@@ -33,6 +33,6 @@ declare const RunForm: import("svelte").Component<Props, {
     setArgs: (nargs: Record<string, any>) => Promise<void>;
     run: () => void;
     setCode: (code: string) => void;
-}, "args" | "invisible_to_owner" | "runnable" | "isValid" | "scheduledForStr" | "overrideTag">;
+}, "args" | "invisible_to_owner" | "isValid" | "scheduledForStr" | "overrideTag">;
 type RunForm = ReturnType<typeof RunForm>;
 export default RunForm;

package/package/components/RunFormAdvancedPopup.svelte

@@ -53,7 +53,19 @@ async function loadWorkerGroups() {
 	{#if !$userStore?.operator}
 		{#if $workerTags && $workerTags?.length > 0}
 			<div class="w-full">
-				<select placeholder="Worker group" bind:value={overrideTag}>
+				<select
+					placeholder="Worker group"
+					bind:value={
+						() => overrideTag ?? '',
+						(v) => {
+							if (v == '') {
+								overrideTag = undefined
+							} else {
+								overrideTag = v
+							}
+						}
+					}
+				>
 					{#if overrideTag}
 						<option value="">reset to default</option>
 					{:else}

package/package/components/SchemaForm.svelte

@@ -14,7 +14,7 @@ import ArgInput from './ArgInput.svelte';
 import { createEventDispatcher, untrack } from 'svelte';
 import { deepEqual } from 'fast-equals';
 import { dragHandleZone } from '@windmill-labs/svelte-dnd-action';
-let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', computeS3ForceViewerPolicies = undefined, workspace = undefined, actions } = $props();
+let { schema = $bindable(), hiddenArgs = [], schemaFieldTooltip = {}, args = $bindable(undefined), disabledArgs = [], disabled = false, isValid = $bindable(true), autofocus = false, defaultValues = {}, shouldHideNoInputs = false, compact = false, linkedSecret = $bindable(undefined), linkedSecretCandidates = undefined, noVariablePicker = false, flexWrap = false, noDelete = false, prettifyHeader = false, disablePortal = false, showSchemaExplorer = false, showReset = false, onlyMaskPassword = false, dndConfig = undefined, items = undefined, helperScript = undefined, lightHeader = false, diff = {}, nestedParent = undefined, shouldDispatchChanges = false, nestedClasses = '', dynamicEnums = {}, largeGap = false, css = undefined, displayType = true, appPath = undefined, className = '', computeS3ForceViewerPolicies = undefined, workspace = undefined, actions: actions_render = undefined } = $props();
 const dispatch = createEventDispatcher();
 let inputCheck = $state({});
 export function setDefaults() {
@@ -135,7 +135,6 @@ $effect.pre(() => {
 $effect.pre(() => {
     isValid = allTrue(inputCheck ?? {});
 });
-const actions_render = $derived(actions);
 </script>
 
 {#if showReset}

package/package/components/ScriptBuilder.svelte

@@ -908,7 +908,7 @@ async function loadWorkerTags() {
 														>
 															<LanguageIcon {lang} />
 															<span class="ml-2 py-2 truncate">{label}</span>
-															{#if lang === 'nu' || lang === 'ruby'}
+															{#if lang === 'ruby'}
 																<span class="text-tertiary !text-xs"> BETA </span>
 															{/if}
 														</Button>

package/package/components/ScriptEditor.svelte

@@ -35,6 +35,7 @@ import { aiChatManager, AIMode } from './copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../actions/triggerableByAI.svelte';
 import AssetsDropdownButton from './assets/AssetsDropdownButton.svelte';
 import { assetEq } from './assets/lib';
+import { editor as meditor } from 'monaco-editor';
 let { schema = $bindable(), code = $bindable(), path, lang, kind = undefined, template = 'script', tag, fixedOverflowWidgets = true, noSyncFromGithub = false, editor = $bindable(undefined), diffEditor = $bindable(undefined), collabMode = false, edit = true, noHistory = false, saveToWorkspace = false, watchChanges = false, customUi = undefined, args = $bindable(), selectedTab = $bindable('main'), hasPreprocessor = $bindable(false), captureTable = $bindable(undefined), showCaptures = true, stablePathForCaptures = '', lastSavedCode = undefined, lastDeployedCode = undefined, disableAi = false, assets = $bindable(), editor_bar_right } = $props();
 $effect.pre(() => {
     if (schema == undefined) {
@@ -162,6 +163,7 @@ export async function inferSchema(code, nlang, resetArgs = false) {
 onMount(() => {
     inferSchema(code);
     loadPastTests();
+    aiChatManager.saveAndClear();
     aiChatManager.changeMode(AIMode.SCRIPT);
 });
 setLicense();
@@ -272,7 +274,7 @@ function getError(job) {
 function showDiffMode() {
     diffMode = true;
     diffEditor?.setOriginal(lastDeployedCode ?? '');
-    diffEditor?.setModified(editor?.getCode() ?? '');
+    diffEditor?.setModifiedModel(editor?.getModel());
     diffEditor?.show();
     editor?.hide();
 }
@@ -492,16 +494,29 @@ $effect(() => {
 						{args}
 					/>
 					<DiffEditor
-						class="h-full"
+						className="h-full"
 						bind:this={diffEditor}
+						modifiedModel={editor?.getModel() as meditor.ITextModel}
 						automaticLayout
 						defaultLang={scriptLangToEditorLang(lang)}
 						{fixedOverflowWidgets}
-						showButtons={diffMode}
-						on:hideDiffMode={hideDiffMode}
-						on:seeHistory={() => {
-							showHistoryDrawer = true
-						}}
+						buttons={diffMode
+							? [
+									{
+										text: 'See changes history',
+										onClick: () => {
+											showHistoryDrawer = true
+										}
+									},
+									{
+										text: 'Quit diff mode',
+										onClick: () => {
+											hideDiffMode()
+										},
+										color: 'red'
+									}
+								]
+							: []}
 					/>
 				{/key}
 			</div>

package/package/components/SimpleEditor.svelte

@@ -289,7 +289,6 @@ async function loadMonaco() {
         return;
     }
     try {
-        console.log('fixedOverflowWidgets', fixedOverflowWidgets);
         editor = meditor.create(divEl, {
             ...editorConfig(code ?? '', lang, automaticLayout, fixedOverflowWidgets, $relativeLineNumbers),
             model,

package/package/components/StringTypeNarrowing.svelte.d.ts

@@ -15,6 +15,6 @@ interface Props {
     overrideAllowKindChange?: boolean;
     originalType?: string | undefined;
 }
-declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "disableCreate" | "pattern" | "format" | "enum_" | "enumLabels" | "contentEncoding" | "customErrorMessage" | "dateFormat" | "minRows" | "disableVariablePicker">;
+declare const StringTypeNarrowing: import("svelte").Component<Props, {}, "password" | "disableCreate" | "pattern" | "format" | "enum_" | "enumLabels" | "contentEncoding" | "customErrorMessage" | "minRows" | "disableVariablePicker" | "dateFormat">;
 type StringTypeNarrowing = ReturnType<typeof StringTypeNarrowing>;
 export default StringTypeNarrowing;

package/package/components/apps/components/layout/AppModal.svelte

@@ -121,11 +121,11 @@ async function getMenuElements() {
 		<Disposable
 			{id}
 			bind:this={disposable}
-			on:open={() => {
+			onOpen={() => {
 				outputs?.open.set(true)
 				onOpenRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}
-			on:close={() => {
+			onClose={() => {
 				outputs?.open.set(false)
 				onCloseRecomputeIds?.forEach((id) => $runnableComponents?.[id]?.cb?.map((cb) => cb?.()))
 			}}

package/package/components/apps/editor/component/ComponentNavigation.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { getContext } from 'svelte';
 import { handleEscape, handlePaste, handleArrowUp, handleCut, handleCopy, down, right, left } from './componentCallbacks.svelte';
-const { history, movingcomponents, jobsDrawerOpen } = getContext('AppEditorContext');
+const { history, movingcomponents, jobsDrawerOpen, runnableJobEditorPanel } = getContext('AppEditorContext');
 const { app, selectedComponent, focusedGrid, componentControl } = getContext('AppViewerContext');
 const ctx = {
     history,
@@ -16,7 +16,8 @@ function keydown(event) {
     // Ignore keydown events if the user is typing in monaco
     let classes = event.target?.['className'];
     if ((typeof classes === 'string' && classes.includes('inputarea')) ||
-        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) ||
+        $runnableJobEditorPanel.focused) {
         return;
     }
     switch (event.key) {

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -350,7 +350,7 @@ let extraLib = $derived(isFrontend && worldStore
 				<DiffEditor
 					open={false}
 					bind:this={diffEditor}
-					class="h-full"
+					className="h-full"
 					automaticLayout
 					fixedOverflowWidgets
 					defaultLang={scriptLangToEditorLang(inlineScript?.language)}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -79,7 +79,6 @@ function refresh(runnable) {
     if (deepEqual(runnable, lastRunnable)) {
         return;
     }
-    console.log('runnable', runnable);
     notFound = false;
     if (runnable.runType == 'script') {
         refreshScript(runnable);

package/package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -218,6 +218,7 @@ $effect(() => {
 $effect(() => {
     items != undefined && handleItemsChange();
 });
+const rnd = generateRandomString();
 </script>
 
 <div class="flex gap-2 flex-col mt-2 w-full">
@@ -267,7 +268,8 @@ $effect(() => {
 				use:dragHandleZone={{
 					items,
 					flipDurationMs,
-					dropTargetStyle: {}
+					dropTargetStyle: {},
+					type: rnd
 				}}
 				onconsider={handleConsider}
 				onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/GridCondition.svelte

@@ -92,6 +92,7 @@ function addCondition() {
     });
     component.numberOfSubgrids = items.length + 1;
 }
+const rnd = generateRandomString();
 </script>
 
 <PanelSection title={'Conditions'}>
@@ -107,7 +108,8 @@ function addCondition() {
 			use:dragHandleZone={{
 				items: items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				type: rnd
 			}}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/GridNavbar.svelte

@@ -94,6 +94,7 @@ function handleFinalize(e) {
 }
 let resolvedPaths = $state([]);
 let resolvedLabels = $state([]);
+const rnd = generateRandomString();
 </script>
 
 <PanelSection
@@ -107,7 +108,8 @@ let resolvedLabels = $state([]);
 			use:dragHandleZone={{
 				items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				type: rnd
 			}}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/GridTab.svelte

@@ -112,6 +112,7 @@ function handleFinalize(e) {
         });
     }
 }
+const rnd = generateRandomString();
 </script>
 
 <PanelSection title={`${word}s ${tabs && tabs.length > 0 ? `(${tabs.length})` : ''}`}>
@@ -123,7 +124,8 @@ function handleFinalize(e) {
 			use:dragHandleZone={{
 				items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				type: rnd
 			}}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte

@@ -3,7 +3,7 @@ import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
 import { cleanseOneOfConfiguration } from '../appUtils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 let { key, oneOf = $bindable(), inputSpecsConfiguration, labels, shouldCapitalize, id, resourceOnly, tooltip, disabledOptions = [], acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = true } = $props();
-$effect(() => {
+$effect.pre(() => {
     if (oneOf == undefined) {
         oneOf = { configuration: {}, selected: '' };
     }
@@ -35,59 +35,61 @@ function getValueOfDeprecated(obj) {
 </script>
 
 <div class="p-2 border">
-	<div class="mb-2 text-sm font-semibold">
-		{capitalize(addWhitespaceBeforeCapitals(key))}&nbsp;
-		{#if tooltip}
-			<Tooltip light>{tooltip}</Tooltip>
-		{/if}
-	</div>
-	<select
-		class="w-full border border-gray-300 rounded-md p-2"
-		value={oneOf.selected}
-		onchange={(e) => {
-			oneOf = { ...oneOf, selected: e?.target?.['value'] }
-		}}
-	>
-		{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
-			{#if (!disabledOptions.includes(choice) && !getValueOfDeprecated(inputSpecsConfiguration[choice])) || oneOf.selected === choice}
-				<option value={choice}>{labels?.[choice] ?? choice}</option>
+	{#if oneOf}
+		<div class="mb-2 text-sm font-semibold">
+			{capitalize(addWhitespaceBeforeCapitals(key))}&nbsp;
+			{#if tooltip}
+				<Tooltip light>{tooltip}</Tooltip>
 			{/if}
-		{/each}
-	</select>
-	{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}
-		<div class="mb-4"></div>
-	{/if}
-	<div class="flex flex-col gap-4">
-		{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
-			{@const config = {
-				...inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey],
-				...oneOf.configuration?.[oneOf.selected]?.[nestedKey]
+		</div>
+		<select
+			class="w-full border border-gray-300 rounded-md p-2"
+			value={oneOf.selected}
+			onchange={(e) => {
+				oneOf = { ...oneOf, selected: e?.target?.['value'] }
 			}}
+		>
+			{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
+				{#if (!disabledOptions.includes(choice) && !getValueOfDeprecated(inputSpecsConfiguration[choice])) || oneOf.selected === choice}
+					<option value={choice}>{labels?.[choice] ?? choice}</option>
+				{/if}
+			{/each}
+		</select>
+		{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}
+			<div class="mb-4"></div>
+		{/if}
+		<div class="flex flex-col gap-4">
+			{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
+				{@const config = {
+					...inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey],
+					...oneOf.configuration?.[oneOf.selected]?.[nestedKey]
+				}}
 
-			{#if config && oneOf.configuration[oneOf.selected]}
-				<InputsSpecEditor
-					{recomputeOnInputChanged}
-					key={nestedKey}
-					bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
-					{id}
-					{acceptSelf}
-					userInputEnabled={false}
-					{shouldCapitalize}
-					{resourceOnly}
-					fieldType={config?.['fieldType']}
-					subFieldType={config?.['subFieldType']}
-					format={config?.['format']}
-					selectOptions={config?.['selectOptions']}
-					placeholder={config?.['placeholder']}
-					customTitle={config?.['customTitle']}
-					tooltip={config?.['tooltip']}
-					fileUpload={config?.['fileUpload']}
-					loading={config?.['loading']}
-					documentationLink={config?.['documentationLink']}
-					allowTypeChange={config?.['allowTypeChange']}
-					{showOnDemandOnlyToggle}
-				/>
-			{/if}
-		{/each}
-	</div>
+				{#if config && oneOf.configuration[oneOf.selected]}
+					<InputsSpecEditor
+						{recomputeOnInputChanged}
+						key={nestedKey}
+						bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
+						{id}
+						{acceptSelf}
+						userInputEnabled={false}
+						{shouldCapitalize}
+						{resourceOnly}
+						fieldType={config?.['fieldType']}
+						subFieldType={config?.['subFieldType']}
+						format={config?.['format']}
+						selectOptions={config?.['selectOptions']}
+						placeholder={config?.['placeholder']}
+						customTitle={config?.['customTitle']}
+						tooltip={config?.['tooltip']}
+						fileUpload={config?.['fileUpload']}
+						loading={config?.['loading']}
+						documentationLink={config?.['documentationLink']}
+						allowTypeChange={config?.['allowTypeChange']}
+						{showOnDemandOnlyToggle}
+					/>
+				{/if}
+			{/each}
+		</div>
+	{/if}
 </div>

package/package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -72,6 +72,7 @@ function handleFinalize(e) {
     const { items: newItems } = e.detail;
     items = newItems;
 }
+const rnd = generateRandomString();
 </script>
 
 {#if components}
@@ -101,7 +102,8 @@ function handleFinalize(e) {
 				use:dragHandleZone={{
 					items,
 					flipDurationMs: 200,
-					dropTargetStyle: {}
+					dropTargetStyle: {},
+					type: rnd
 				}}
 				onconsider={handleConsider}
 				onfinalize={handleFinalize}

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

@@ -1,7 +1,7 @@
 export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray", "none"];
 export declare namespace ButtonType {
     type Size = 'xs3' | 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    type Color = string;
+    type Color = 'blue' | 'red' | 'dark' | 'light' | 'green' | 'gray' | 'none' | 'marine' | 'nord';
     type Variant = 'contained' | 'border' | 'divider';
     type Target = '_self' | '_blank';
     type Element = HTMLButtonElement | HTMLAnchorElement;

package/package/components/common/drawer/Disposable.svelte

@@ -1,17 +1,11 @@
-<script lang="ts" context="module">export let openedDrawers = [];
+<script lang="ts" module>export let openedDrawers = $state({ val: [] });
 </script>
 
-<script lang="ts">import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
-import { zIndexes } from '../../../zIndexes';
-import { createEventDispatcher } from 'svelte';
-export let open = false;
-export let id = (Math.random() + 1).toString(36).substring(10);
-export let preventEscape = false;
-if (open) {
-    openedDrawers.push(id);
-}
-export let initialOffset = 0;
-let offset = initialOffset;
+<script lang="ts">import { zIndexes } from '../../../zIndexes';
+import { untrack } from 'svelte';
+let { open = $bindable(false), id = (Math.random() + 1).toString(36).substring(10), preventEscape = false, initialOffset = 0, children, onOpen, onClose } = $props();
+let offset = $state(initialOffset);
+let zIndex = $derived(zIndexes.disposables + offset);
 export function toggleDrawer() {
     if (!open) {
         openDrawer();
@@ -21,26 +15,28 @@ export function toggleDrawer() {
     }
 }
 export function openDrawer() {
-    open = true;
-    offset = openedDrawers.length - 1;
-    if (openedDrawers.includes(id)) {
-        return;
+    if (!open) {
+        open = true;
+        if (openedDrawers.val.includes(id)) {
+            return;
+        }
+        offset = openedDrawers.val.length - 1;
+        openedDrawers.val.push(id);
     }
-    openedDrawers.push(id);
 }
 export function closeDrawer() {
-    open = false;
-    offset = initialOffset;
-    // remove the last opened drawer
-    openedDrawers = openedDrawers.filter((drawer) => drawer !== id);
+    if (open) {
+        open = false;
+        offset = initialOffset;
+        // remove the last opened drawer
+        openedDrawers.val = openedDrawers.val.filter((drawer) => drawer !== id);
+    }
 }
 export function isOpen() {
     return open;
 }
-const dispatch = createEventDispatcher();
-const dispatchIfMounted = createDispatcherIfMounted(dispatch);
 function handleClickAway(e) {
-    const last = openedDrawers[openedDrawers.length - 1];
+    const last = openedDrawers.val[openedDrawers.val.length - 1];
     if (last === id) {
         e.stopPropagation();
         closeDrawer();
@@ -50,9 +46,10 @@ function onKeyDown(event) {
     if (open) {
         switch (event.key) {
             case 'Escape':
-                if ((id == openedDrawers[openedDrawers.length - 1] || openedDrawers.length == 0) &&
+                if ((id == openedDrawers.val[openedDrawers.val.length - 1] ||
+                    openedDrawers.val.length == 0) &&
                     !preventEscape) {
-                    openedDrawers.pop();
+                    openedDrawers.val.pop();
                     event.preventDefault();
                     event.stopPropagation();
                     event.stopImmediatePropagation();
@@ -62,10 +59,34 @@ function onKeyDown(event) {
         }
     }
 }
-$: zIndex = zIndexes.disposables + offset;
-$: dispatchIfMounted(open ? 'open' : 'close');
+if (open) {
+    openedDrawers.val.push(id);
+}
+let wasEverOpen = false;
+let lastOpen = open;
+$effect.pre(() => {
+    if (open === untrack(() => lastOpen)) {
+        return;
+    }
+    lastOpen = open;
+    if (open) {
+        // console.log('open', id, wasEverOpen)
+        wasEverOpen = true;
+        onOpen?.();
+    }
+    else if (untrack(() => wasEverOpen)) {
+        // console.log('close', id)
+        onClose?.();
+    }
+});
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
-<slot {handleClickAway} {zIndex} {closeDrawer} {open} />
+{@render children?.({
+	handleClickAway,
+	zIndex,
+	closeDrawer,
+	open,
+	isTop: openedDrawers.val[openedDrawers.val.length - 1] == id
+})}