windmill-components 1.60.4 → 1.75.0

package/components/apps/types.d.ts

@@ -1,66 +1,44 @@
 import type { Schema } from '../../common';
 import type { Preview } from '../../gen';
-import type { FilledItem } from 'svelte-grid';
+import type { History } from '../../history';
+import type { FilledItem } from '@windmill-labs/svelte-grid';
 import type { Writable } from 'svelte/store';
-import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, RowAppInput, StaticAppInput, UserAppInput } from './inputType';
+import type { AppComponent } from './editor/component/components';
+import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from './inputType';
 import type { World } from './rx';
-type BaseComponent<T extends string> = {
-    type: T;
-};
-export type TextComponent = BaseComponent<'textcomponent'>;
-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 VegaLiteComponent = BaseComponent<'vegalitecomponent'>;
-export type TimeseriesComponent = BaseComponent<'timeseriescomponent'>;
-export type ButtonComponent = BaseComponent<'buttoncomponent'> & {
-    recomputeIds: string[] | undefined;
-};
-export type FormComponent = BaseComponent<'formcomponent'> & {
-    recomputeIds: string[] | undefined;
-};
-export type RunFormComponent = BaseComponent<'runformcomponent'>;
-export type BarChartComponent = BaseComponent<'barchartcomponent'>;
-export type PieChartComponent = BaseComponent<'piechartcomponent'>;
-export type ScatterChartComponent = BaseComponent<'scatterchartcomponent'>;
-export type TableComponent = BaseComponent<'tablecomponent'> & {
-    actionButtons: (BaseAppComponent & ButtonComponent)[];
-};
-export type DisplayComponent = BaseComponent<'displaycomponent'>;
-export type ImageComponent = BaseComponent<'imagecomponent'>;
-export type InputComponent = BaseComponent<'inputcomponent'>;
-export type SelectComponent = BaseComponent<'selectcomponent'>;
-export type CheckboxComponent = BaseComponent<'checkboxcomponent'>;
-export type RadioComponent = BaseComponent<'radiocomponent'>;
 export type HorizontalAlignment = 'left' | 'center' | 'right';
 export type VerticalAlignment = 'top' | 'center' | 'bottom';
 export type Aligned = {
     horizontalAlignment: HorizontalAlignment;
     verticalAlignment: VerticalAlignment;
 };
+export interface GeneralAppInput {
+    onlyStatic?: boolean;
+    evaluatedValue?: boolean;
+    tooltip?: string;
+}
+export type ComponentCssProperty = {
+    class?: string;
+    style?: string;
+};
+export type ComponentCustomCSS<T extends string = string> = Record<T, ComponentCssProperty>;
 export interface BaseAppComponent extends Partial<Aligned> {
     id: ComponentID;
     componentInput: AppInput | undefined;
-    configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput) & {
-        onlyStatic?: boolean;
-        evaluatedValue?: boolean;
-        tooltip?: string;
-    }>;
+    configuration: Record<string, GeneralAppInput & (StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput | EvalAppInput | UploadAppInput)>;
     card: boolean | undefined;
+    customCss?: ComponentCustomCSS;
     /**
      * If `true` then the wrapper will allow items to flow outside of it's borders.
      *
      * *For example when the component has a popup like `Select`*
      */
     softWrap?: boolean;
+    numberOfSubgrids?: number;
 }
-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 | VegaLiteComponent);
 export type ComponentSet = {
     title: string;
-    components: AppComponent[];
+    components: Readonly<AppComponent['type'][]>;
 };
 type SectionID = string;
 export type AppSection = {
@@ -84,6 +62,13 @@ export type App = {
         name: string;
         inlineScript: InlineScript;
     }>;
+    hiddenInlineScripts: Array<{
+        name: string;
+        inlineScript: InlineScript | undefined;
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+    }>;
+    css?: Record<'viewer' | 'grid' | AppComponent['type'], ComponentCustomCSS>;
+    subgrids?: Record<string, GridItem[]>;
 };
 export type ConnectingInput = {
     opened: boolean;
@@ -91,10 +76,9 @@ export type ConnectingInput = {
     sourceName?: string;
     hoveredComponent: string | undefined;
 };
-export type AppEditorContext = {
+export type AppViewerContext = {
     worldStore: Writable<World | undefined>;
     staticOutputs: Writable<Record<string, string[]>>;
-    lazyGrid: Writable<GridItem[]>;
     app: Writable<App>;
     summary: Writable<string>;
     selectedComponent: Writable<string | undefined>;
@@ -112,8 +96,29 @@ export type AppEditorContext = {
         component: string;
     }[]>;
     noBackend: boolean;
+    errorByComponent: Writable<Record<string, {
+        error: string;
+        componentId: string;
+    }>>;
+    openDebugRun: Writable<((componentID: string) => void) | undefined>;
+    focusedGrid: Writable<FocusedGrid | undefined>;
+    stateId: Writable<number>;
+    parentWidth: Writable<number>;
+};
+export type AppEditorContext = {
+    history: History<App> | undefined;
+    componentControl: Writable<Record<string, {
+        left?: () => boolean;
+        right?: () => boolean;
+    }>>;
+    pickVariableCallback: Writable<((path: string) => void) | undefined>;
+};
+export type FocusedGrid = {
+    parentComponentId: string;
+    subGridIndex: number;
 };
 export type EditorMode = 'dnd' | 'preview';
 export type EditorBreakpoint = 'sm' | 'lg';
+export declare const IS_APP_PUBLIC_CONTEXT_KEY: "isAppPublicContext";
 type ComponentID = string;
 export {};

package/components/apps/types.js

@@ -1 +1 @@
-export {};
+export const IS_APP_PUBLIC_CONTEXT_KEY = 'isAppPublicContext';

package/components/apps/utils.d.ts

@@ -1,13 +1,10 @@
 import type { Schema } from '../../common';
+import type { App, ComponentCssProperty, ComponentCustomCSS, GridItem } from './types';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
-import type { App, AppComponent } from './types';
+export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
 export declare function loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<Schema>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
-export declare const displayData: Record<AppComponent['type'], {
-    name: string;
-    icon: any;
-}>;
 export declare function accessPropertyByPath<T>(object: T, path: string): T | undefined;
 export declare function fieldTypeToTsType(inputType: InputType): string;
 export declare function isScriptByNameDefined(appInput: AppInput | undefined): boolean;
@@ -18,3 +15,7 @@ export declare function toStatic(app: App, staticExporter: Record<string, () =>
     summary: string;
 };
 export declare function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean): string;
+export declare function getAllScriptNames(app: App): string[];
+export declare function toPascalCase(text: string): string;
+export declare function toKebabCase(text: string): string;
+export declare function concatCustomCss<T extends string = string>(appCss?: ComponentCustomCSS<T>, componentCss?: ComponentCustomCSS<T>): Record<T, ComponentCssProperty> | undefined;

package/components/apps/utils.js

@@ -1,7 +1,13 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { emptySchema } from '../../utils';
-import { BarChart4, Binary, CircleDot, FormInput, Inspect, List, Monitor, PieChart, Play, Table2, Image, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+export function allItems(grid, subgrids) {
+    if (subgrids == undefined) {
+        return grid;
+    }
+    return [...grid, ...Object.values(subgrids).flat()];
+}
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({
@@ -21,7 +27,9 @@ export async function loadSchema(workspace, path, runType) {
         const script = await ScriptService.getHubScriptByPath({
             path
         });
-        if (script.schema == undefined || Object.keys(script.schema).length == 0 || typeof script.schema != 'object') {
+        if (script.schema == undefined ||
+            Object.keys(script.schema).length == 0 ||
+            typeof script.schema != 'object') {
             script.schema = emptySchema();
         }
         await inferArgs(script.language, script.content, script.schema);
@@ -43,96 +51,6 @@ export function schemaToInputsSpec(schema, defaultUserInput) {
         return accu;
     }, {});
 }
-export const displayData = {
-    displaycomponent: {
-        name: 'Result',
-        icon: Monitor
-    },
-    textcomponent: {
-        name: 'Text',
-        icon: Type
-    },
-    buttoncomponent: {
-        name: 'Button',
-        icon: Inspect
-    },
-    formcomponent: {
-        name: 'Form',
-        icon: FormInput
-    },
-    piechartcomponent: {
-        name: 'Pie Chart',
-        icon: PieChart
-    },
-    barchartcomponent: {
-        name: 'Bar/Line Chart',
-        icon: BarChart4
-    },
-    htmlcomponent: {
-        name: 'Html',
-        icon: Code2
-    },
-    vegalitecomponent: {
-        name: 'Vega Lite',
-        icon: PieChart
-    },
-    timeseriescomponent: {
-        name: 'Timeseries',
-        icon: GripHorizontal
-    },
-    scatterchartcomponent: {
-        name: 'Scatter Chart',
-        icon: GripHorizontal
-    },
-    tablecomponent: {
-        name: 'Table',
-        icon: Table2
-    },
-    checkboxcomponent: {
-        name: 'Toggle',
-        icon: ToggleLeft
-    },
-    textinputcomponent: {
-        name: 'Text input',
-        icon: TextCursorInput
-    },
-    imagecomponent: {
-        name: 'Image',
-        icon: Image
-    },
-    inputcomponent: {
-        name: 'Input',
-        icon: FormInput
-    },
-    radiocomponent: {
-        name: 'Radio button',
-        icon: CircleDot
-    },
-    runformcomponent: {
-        name: 'Run form',
-        icon: Play
-    },
-    selectcomponent: {
-        name: 'Select',
-        icon: List
-    },
-    numberinputcomponent: {
-        name: 'Number',
-        icon: Binary
-    },
-    slidercomponent: {
-        name: 'Slider',
-        icon: SlidersHorizontal
-    },
-    passwordinputcomponent: {
-        name: 'Password',
-        icon: Lock
-    },
-    dateinputcomponent: {
-        name: 'Date input',
-        icon: Calendar
-    }
-};
 export function accessPropertyByPath(object, path) {
     // convert indexes to properties
     path = path.replace(/\[(\w+)\]/g, '.$1');
@@ -141,7 +59,7 @@ export function accessPropertyByPath(object, path) {
     let a = path.split('.');
     for (let i = 0, depth = a.length; i < depth; ++i) {
         let key = a[i];
-        if (object[key]) {
+        if (object[key] != undefined) {
             object = object[key];
         }
         else {
@@ -203,7 +121,7 @@ export function toStatic(app, staticExporter, summary) {
     return { app: newApp, summary };
 }
 export function buildExtraLib(components, idToExclude, hasRows) {
-    return Object.entries(components)
+    return (Object.entries(components)
         .filter(([k, v]) => k != idToExclude)
         .map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
         .map(([k, v]) => `
@@ -211,5 +129,55 @@ export function buildExtraLib(components, idToExclude, hasRows) {
 declare const ${k} = ${JSON.stringify(v)};
 
 `)
-        .join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : '');
+        .join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : ''));
+}
+export function getAllScriptNames(app) {
+    const names = app.grid.reduce((acc, gridItem) => {
+        const { componentInput } = gridItem.data;
+        if (componentInput?.type === 'runnable' &&
+            componentInput?.runnable?.type === 'runnableByName') {
+            acc.push(componentInput.runnable.name);
+        }
+        if (componentInput?.type === 'tablecomponent') {
+            componentInput.actionButtons.forEach((actionButton) => {
+                if (actionButton.componentInput?.type === 'runnable') {
+                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
+                        acc.push(actionButton.componentInput.runnable.name);
+                    }
+                }
+            });
+        }
+        return acc;
+    }, []);
+    const unusedNames = app.unusedInlineScripts.map((x) => x.name);
+    const backgroundNames = app.hiddenInlineScripts?.map((x) => x.name) ?? [];
+    return [...names, ...unusedNames, ...backgroundNames];
+}
+function clearAndUpper(text) {
+    return text.replace(/-/, '').toUpperCase();
+}
+export function toPascalCase(text) {
+    return text.replace(/(^\w|-\w)/g, clearAndUpper);
+}
+export function toKebabCase(text) {
+    return text.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+export function concatCustomCss(appCss, componentCss) {
+    if (!componentCss)
+        return undefined;
+    const customStyle = {};
+    Object.keys(componentCss).forEach((key) => {
+        const k = key;
+        // This is the general style of the component type
+        const appStyle = appCss?.[k]?.style?.trim() || '';
+        const appEnding = appStyle?.endsWith(';') || !appStyle ? ' ' : '; ';
+        // This is the custom style of the component instance
+        const compStyle = componentCss[k]?.style?.trim() || '';
+        const compEnding = compStyle?.endsWith(';') || !compStyle ? ' ' : ';';
+        customStyle[k] = {
+            style: (appStyle + appEnding + compStyle + compEnding).trim(),
+            class: twMerge(appCss?.[k]?.class, componentCss[k]?.class)
+        };
+    });
+    return customStyle;
 }

package/components/common/button/Button.svelte

@@ -1,9 +1,9 @@
 <script>import { createEventDispatcher } from 'svelte';
-import { classNames } from '../../../utils';
 import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
 import { goto } from '$app/navigation';
 import { Loader2 } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
@@ -21,9 +21,14 @@ export let nonCaptureEvent = false;
 export let buttonType = 'button';
 export let loading = false;
 export let title = undefined;
+export let style = '';
 const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
+    none: {
+        border: '',
+        contained: ''
+    },
     blue: {
         border: 'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
         contained: 'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300'
@@ -51,12 +56,13 @@ const colorVariants = {
 };
 $: buttonProps = {
     id,
-    class: classNames(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize], 'focus:ring-2 font-semibold', 'duration-200 rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''),
+    class: twMerge(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize][variant], 'focus:ring-2 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''),
     href,
     target,
     tabindex: disabled ? -1 : 0,
     type: buttonType,
-    title
+    title,
+    ...$$restProps
 };
 async function onClick(event) {
     if (!nonCaptureEvent) {
@@ -76,8 +82,8 @@ async function onClick(event) {
     }
 }
 $: 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);
+$: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes);
+$: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes);
 </script>
 
 <svelte:element
@@ -90,6 +96,7 @@ $: endIconClass = classNames(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', e
 	{...buttonProps}
 	disabled={disabled || loading}
 	type="submit"
+	{style}
 >
 	{#if loading}
 		<Loader2 class="animate-spin mr-1" size={14} />

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

@@ -3,9 +3,10 @@ import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         size?: ButtonType.Size | undefined;
         spacingSize?: ButtonType.Size | undefined;
-        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
+        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         btnClasses?: string | undefined;
         disabled?: boolean | undefined;
@@ -20,6 +21,7 @@ declare const __propDef: {
         buttonType?: "reset" | "submit" | "button" | undefined;
         loading?: boolean | undefined;
         title?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         pointerdown: PointerEvent;

package/components/common/button/ButtonPopup.svelte

@@ -13,6 +13,7 @@ export let target = '_self';
 export let startIcon = undefined;
 export let endIcon = undefined;
 export let spacingSize = size;
+export let loading = false;
 let ref;
 setContext(ButtonType.ItemContextKey, { size, color });
 $: separator = color === 'red' || color === 'blue' ? 'border-gray-200' : 'border-gray-400';
@@ -28,6 +29,7 @@ $: commonProps = {
 <div class="flex justy-start items-center">
 	{#if $$slots.main}
 		<Button
+			{loading}
 			{...commonProps}
 			{href}
 			{target}

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

@@ -4,7 +4,7 @@ import { ButtonType } from '..';
 declare const __propDef: {
     props: {
         size?: ButtonType.Size | undefined;
-        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
+        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         mainClasses?: string | undefined;
         toggleClasses?: string | undefined;
@@ -14,6 +14,7 @@ declare const __propDef: {
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
         spacingSize?: ButtonType.Size | undefined;
+        loading?: boolean | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/components/common/button/UndoRedo.svelte

@@ -0,0 +1,32 @@
+<script>import { Redo, Undo } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { Button } from '..';
+export let undoProps = {};
+export let redoProps = {};
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex">
+	<Button
+		title="Undo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-r-none"
+		on:click={() => dispatch('undo')}
+		{...undoProps}
+	>
+		<Undo size={14} />
+	</Button>
+	<Button
+		title="Redo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
+		on:click={() => dispatch('redo')}
+		{...redoProps}
+	>
+		<Redo size={14} />
+	</Button>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        undoProps?: Record<string, any> | undefined;
+        redoProps?: Record<string, any> | undefined;
+    };
+    events: {
+        undo: CustomEvent<any>;
+        redo: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UndoRedoProps = typeof __propDef.props;
+export type UndoRedoEvents = typeof __propDef.events;
+export type UndoRedoSlots = typeof __propDef.slots;
+export default class UndoRedo extends SvelteComponentTyped<UndoRedoProps, UndoRedoEvents, UndoRedoSlots> {
+}
+export {};

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

@@ -1,4 +1,4 @@
-export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray"];
+export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray", "none"];
 export declare namespace ButtonType {
     type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     type Color = typeof BUTTON_COLORS[number];
@@ -10,7 +10,7 @@ export declare namespace ButtonType {
         classes?: string;
     }
     const FontSizeClasses: Record<ButtonType.Size, string>;
-    const SpacingClasses: Record<ButtonType.Size, string>;
+    const SpacingClasses: Record<ButtonType.Size, Record<ButtonType.Variant, string>>;
     const IconScale: Record<ButtonType.Size, number>;
     const ItemContextKey: "popupItemProps";
     interface ItemProps {

package/components/common/button/model.js

@@ -1,4 +1,4 @@
-export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray'];
+export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray', 'none'];
 export var ButtonType;
 (function (ButtonType) {
     ButtonType.FontSizeClasses = {
@@ -9,11 +9,26 @@ export var ButtonType;
         xl: 'text-xl'
     };
     ButtonType.SpacingClasses = {
-        xs: 'px-3 py-1.5',
-        sm: 'px-3 py-1.5',
-        md: 'px-3 py-1.5',
-        lg: 'px-4 py-2',
-        xl: 'px-4 py-2'
+        xs: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]'
+        },
+        sm: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]'
+        },
+        md: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]'
+        },
+        lg: {
+            border: 'px-4 py-[8px]',
+            contained: 'px-4 py-[9px]'
+        },
+        xl: {
+            border: 'px-4 py-[8px]',
+            contained: 'px-4 py-[9px]'
+        },
     };
     ButtonType.IconScale = {
         xs: 0.7,

package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -23,12 +23,19 @@ function onKeyDown(event) {
         }
     }
 }
+function fadeFast(node) {
+    return fade(node, { duration: 100 });
+}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
 
 {#if open}
-	<div transition:fade={{ duration: 100 }} class={'relative  z-50'} role="dialog">
+	<div
+		transition:fadeFast|local
+		class={'absolute top-0 bottom-0 left-0 right-0 z-50'}
+		role="dialog"
+	>
 		<div
 			class={classNames(
 				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -41,9 +41,9 @@ onDestroy(() => {
 	}}
 >
 	<div class="flex flex-col w-full space-y-4">
-		<span
-			>Are you sure you want to discard change you have made? (A draft has been temporarily and
-			locally saved)</span
-		>
+		<span>
+			Are you sure you want to discard change you have made? (A draft has been temporarily and
+			locally saved)
+		</span>
 	</div>
 </ConfirmationModal>

package/components/common/drawer/Drawer.svelte

@@ -42,8 +42,10 @@ function onKeyDown(event) {
     if (open) {
         switch (event.key) {
             case 'Escape':
-                open = false;
                 event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                open = false;
                 break;
         }
     }
@@ -59,11 +61,17 @@ onMount(() => {
 
 <svelte:window on:keydown={onKeyDown} />
 
-<aside class="drawer {$$props.class}" class:open class:close={!open && timeout} {style}>
-	<div class="overlay" on:click={handleClickAway} />
-	<div class="panel {placement}" class:size>
+<aside
+	class="drawer {$$props.class} {$$props.positionClass}"
+	class:open
+	class:close={!open && timeout}
+	{style}
+>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="overlay {$$props.positionClass}" on:click={handleClickAway} />
+	<div class="panel {placement} {$$props.positionClass}" class:size>
 		{#if open || !timeout || alwaysOpen}
-			<slot />
+			<slot {open} />
 		{/if}
 	</div>
 </aside>

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

@@ -20,7 +20,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            open: boolean;
+        };
     };
 };
 export type DrawerProps = typeof __propDef.props;