windmill-components 1.84.6 → 1.86.0

package/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte

@@ -1,12 +1,22 @@
 <script>import Toggle from '../../../../Toggle.svelte';
-import Tooltip from '../../../../Tooltip.svelte';
 import TriggerBadgesList from './TriggerBadgesList.svelte';
 import { getDependencies } from './triggerListUtils';
 export let fields;
 export let autoRefresh = false;
 export let id;
 export let inlineScript;
-export let doNotRecomputeOnInputChanged = false;
+export let recomputeOnInputChanged = true;
+export let doNotRecomputeOnInputChanged = undefined;
+//TODO: remove after migration is done
+$: {
+    if (doNotRecomputeOnInputChanged != undefined) {
+        recomputeOnInputChanged = !doNotRecomputeOnInputChanged;
+        doNotRecomputeOnInputChanged = undefined;
+    }
+    if (recomputeOnInputChanged == undefined) {
+        recomputeOnInputChanged = true;
+    }
+}
 $: dependencies = getDependencies(fields);
 </script>
 
@@ -14,11 +24,9 @@ $: dependencies = getDependencies(fields);
 	<div class="flex items-center px-1">
 		<Toggle
 			size="xs"
-			color="red"
-			bind:checked={doNotRecomputeOnInputChanged}
-			options={{ right: 'do NOT recompute on input changes' }}
+			bind:checked={recomputeOnInputChanged}
+			options={{ right: 'recompute on any input changes' }}
 		/>
-		<Tooltip>If not toggled, whenever an input is changed, the script will be re-run.</Tooltip>
 	</div>
 {/if}
 
@@ -27,5 +35,5 @@ $: dependencies = getDependencies(fields);
 	{id}
 	inputDependencies={dependencies}
 	onLoad={autoRefresh}
-	{doNotRecomputeOnInputChanged}
+	{recomputeOnInputChanged}
 />

package/components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte.d.ts

@@ -7,7 +7,8 @@ declare const __propDef: {
         autoRefresh?: boolean | undefined;
         id: string;
         inlineScript: InlineScript;
-        doNotRecomputeOnInputChanged?: boolean | undefined;
+        recomputeOnInputChanged?: boolean | undefined;
+        doNotRecomputeOnInputChanged?: undefined | boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte

@@ -5,7 +5,7 @@ const { selectedComponent } = getContext('AppViewerContext');
 export let fields;
 export let appComponent;
 export let runnable;
-export let doNotRecomputeOnInputChanged = false;
+export let recomputeOnInputChanged = false;
 const onClick = ['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(appComponent.type);
 $: onLoad =
     !onClick ||
@@ -18,7 +18,7 @@ $: onLoad =
 	inputDependencies={onClick ? [] : getDependencies(fields)}
 	bind:inlineScript={runnable.inlineScript}
 	{onLoad}
-	{doNotRecomputeOnInputChanged}
+	{recomputeOnInputChanged}
 	id={$selectedComponent?.[0]}
 	{onClick}
 />

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
         appComponent: AppComponent;
         runnable: RunnableByName;
-        doNotRecomputeOnInputChanged?: boolean | undefined;
+        recomputeOnInputChanged?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte

@@ -8,7 +8,7 @@ export let inlineScript;
 export let onClick = false;
 export let onLoad = false;
 export let id = undefined;
-export let doNotRecomputeOnInputChanged = false;
+export let recomputeOnInputChanged = false;
 const colors = {
     red: 'text-red-800 border-red-600 bg-red-100',
     green: 'text-green-800 border-green-600 bg-green-100',
@@ -66,11 +66,11 @@ function deleteDep(index) {
 
 <div class="flex w-full flex-col items-start gap-2 mt-2 mb-1">
 	{#if recomputedBadges.length === 0 && !onLoad && !onClick && inputDependencies?.length === 0 && !frontendDependencies}
-		<p class="text-xs font-semibold text-slate-800 ">
+		<p class="text-xs font-semibold text-slate-800">
 			This script has no triggers. It will never run.
 		</p>
 	{:else}
-		<div class="text-sm font-semibold text-gray-800 ">Triggered by</div>
+		<div class="text-sm font-semibold text-gray-800">Triggered by</div>
 
 		{#if onLoad || onClick}
 			<div class="w-full">
@@ -86,7 +86,7 @@ function deleteDep(index) {
 				</div>
 			</div>
 		{/if}
-		{#if inputDependencies.length > 0 && !doNotRecomputeOnInputChanged}
+		{#if inputDependencies.length > 0 && (recomputeOnInputChanged ?? true)}
 			<div class="w-full">
 				<div class="flex justify-between items-center mb-1">
 					<div class="text-xs font-semibold text-slate-800">Change on values</div>
@@ -112,7 +112,8 @@ function deleteDep(index) {
 			</div>
 		{/if}
 	{/if}
-	{#if frontendDependencies && !doNotRecomputeOnInputChanged}
+
+	{#if frontendDependencies && recomputeOnInputChanged}
 		<div class="w-full">
 			<div class="flex justify-between items-center">
 				<div class="text-xs font-semibold text-slate-800 mb-1">Change on values</div>

package/components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         onClick?: boolean | undefined;
         onLoad?: boolean | undefined;
         id?: string | undefined;
-        doNotRecomputeOnInputChanged?: boolean | undefined;
+        recomputeOnInputChanged?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/inputType.d.ts

@@ -54,6 +54,7 @@ export type ResultInput = {
     type: 'runnable';
     value?: any;
     doNotRecomputeOnInputChanged?: boolean;
+    recomputeOnInputChanged?: boolean;
 };
 type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | UploadInput | ResultInput | TemplateInput) & InputConfiguration<T, V>;
 type InputConfiguration<T extends InputType, V extends InputType> = {

package/components/apps/rx.d.ts

@@ -19,8 +19,6 @@ export type World = {
     connect: <T>(inputSpec: AppInput, next: (x: T) => void, id?: string) => Input<T>;
     stateId: Writable<number>;
     newOutput: <T>(id: string, name: string, previousValue: T) => Output<T>;
-    initializedOutputs: number;
-    initialized: boolean;
 };
 export declare function buildWorld(context: Record<string, any>): Writable<World>;
 export declare function buildObservableWorld(): {

package/components/apps/rx.js

@@ -28,9 +28,7 @@ export function buildWorld(context) {
         outputsById,
         connect: newWorld.connect,
         stateId,
-        newOutput,
-        initializedOutputs: 0,
-        initialized: false
+        newOutput
     });
     return writableWorld;
 }

package/components/apps/svelte-grid/utils/helper.js

@@ -1,5 +1,5 @@
+import { adjust, findFreeSpaceForItem } from './item';
 import { makeMatrixFromItems } from './matrix';
-import { findFreeSpaceForItem, normalize, adjust } from './item';
 import { getRowsCount } from './other';
 function makeItem(item) {
     const { min = { w: 1, h: 1 }, max } = item;

package/components/apps/types.d.ts

@@ -78,6 +78,8 @@ export type App = {
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
         autoRefresh?: boolean;
         doNotRecomputeOnInputChanged?: boolean;
+        recomputeOnInputChanged?: boolean;
+        noBackendValue?: any;
     }>;
     css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>;
     subgrids?: Record<string, GridItem[]>;
@@ -92,12 +94,17 @@ export type AppViewerContext = {
     worldStore: Writable<World>;
     app: Writable<App>;
     summary: Writable<string>;
+    initialized: Writable<{
+        initializedComponents: string[];
+        initialized: boolean;
+    }>;
     selectedComponent: Writable<string[] | undefined>;
     mode: Writable<EditorMode>;
     connectingInput: Writable<ConnectingInput>;
     breakpoint: Writable<EditorBreakpoint>;
     runnableComponents: Writable<Record<string, {
         autoRefresh: boolean;
+        refreshOnStart?: boolean;
         cb: (inlineScript?: InlineScript) => Promise<void>;
     }>>;
     staticExporter: Writable<Record<string, () => any>>;
@@ -125,6 +132,11 @@ export type AppViewerContext = {
         left?: () => boolean;
         right?: (skipTableActions?: boolean | undefined) => string | boolean;
         setTab?: (index: number) => void;
+        agGrid?: {
+            api: any;
+            columnApi: any;
+        };
+        setCode?: (value: string) => void;
     }>>;
     hoverStore: Writable<string | undefined>;
     allIdsInPath: Writable<string[]>;

package/components/apps/utils.d.ts

@@ -1,7 +1,7 @@
 import type { Schema } from '../../common';
-import type { App, ComponentCssProperty, GridItem } from './types';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
+import type { App, ComponentCssProperty, GridItem, HorizontalAlignment, VerticalAlignment } 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>;
@@ -19,3 +19,5 @@ 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 Record<string, ComponentCssProperty>>(appCss?: Record<string, ComponentCssProperty>, componentCss?: T): T | undefined;
+export declare function tailwindHorizontalAlignment(alignment?: HorizontalAlignment): string;
+export declare function tailwindVerticalAlignment(alignment?: VerticalAlignment): string;

package/components/apps/utils.js

@@ -1,6 +1,6 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
-import { emptySchema, sendUserToast } from '../../utils';
+import { emptySchema } from '../../utils';
 import { twMerge } from 'tailwind-merge';
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
@@ -116,12 +116,15 @@ export function clearResultAppInput(appInput) {
 }
 export function toStatic(app, staticExporter, summary) {
     const newApp = JSON.parse(JSON.stringify(app));
-    newApp.grid.forEach((x) => {
+    allItems(newApp.grid, newApp.subgrids).forEach((x) => {
         let c = x.data;
         if (c.componentInput?.type == 'runnable') {
             c.componentInput.value = staticExporter[x.id]();
         }
     });
+    newApp.hiddenInlineScripts?.forEach((x, i) => {
+        x.noBackendValue = staticExporter[`bg_` + i]();
+    });
     return { app: newApp, summary };
 }
 export function buildExtraLib(components, idToExclude, hasRows, state, goto) {
@@ -137,6 +140,7 @@ ${goto
         ? `declare async function goto(path: string, newTab?: boolean): Promise<void>;
 declare function setTab(id: string, index: string): void;
 declare function recompute(id: string): void;
+declare function getAgGrid(id: string): {api: any, columnApi: any} | undefined;
 `
         : ''}
 declare const state: ${JSON.stringify(state)};
@@ -192,3 +196,23 @@ export function concatCustomCss(appCss, componentCss) {
         ];
     }));
 }
+export function tailwindHorizontalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end'
+    };
+    return classes[alignment];
+}
+export function tailwindVerticalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        top: 'items-start',
+        center: 'items-center',
+        bottom: 'items-end'
+    };
+    return classes[alignment];
+}

package/components/build_workers.d.ts

@@ -0,0 +1,14 @@
+export interface Environment {
+    globalAPI?: boolean;
+    baseUrl?: string;
+    getWorker?(workerId: string, label: string): Promise<Worker> | Worker;
+    getWorkerUrl?(workerId: string, label: string): string;
+    workerOverrideGlobals: WorkerOverrideGlobals;
+}
+type WorkerOverrideGlobals = {
+    basePath: string;
+    workerPath: string;
+    workerOptions: WorkerOptions;
+};
+export declare function buildWorkerDefinition(workerPath: string, basePath: string, useModuleWorker: boolean): void;
+export {};

package/components/build_workers.js

@@ -0,0 +1,45 @@
+export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
+    const monWin = self;
+    const workerOverrideGlobals = {
+        basePath: basePath,
+        workerPath: workerPath,
+        workerOptions: {
+            type: useModuleWorker ? 'module' : 'classic'
+        }
+    };
+    if (!monWin.MonacoEnvironment) {
+        monWin.MonacoEnvironment = {
+            workerOverrideGlobals: workerOverrideGlobals
+        };
+    }
+    const getWorker = (_, label) => {
+        console.log('getWorker: workerId: ' + _ + ' label: ' + label);
+        const buildWorker = (globals, label, workerName, editorType) => {
+            globals.workerOptions.name = label;
+            const workerFilename = globals.workerOptions.type === 'module' ? `${workerName}-es.js` : `${workerName}-iife.js`;
+            const workerPathLocal = `${globals.workerPath}/${workerFilename}`;
+            const workerUrl = new URL(workerPathLocal, globals.basePath);
+            console.log(`${editorType}: url: ${workerUrl.href} created from basePath: ${globals.basePath} and file: ${workerPathLocal}`);
+            return new Worker(workerUrl.href, globals.workerOptions);
+        };
+        switch (label) {
+            case 'template':
+            case 'typescript':
+            case 'javascript':
+                return buildWorker(workerOverrideGlobals, label, 'tsWorker', 'TS Worker');
+            case 'html':
+            case 'handlebars':
+            case 'razor':
+                return buildWorker(workerOverrideGlobals, label, 'htmlWorker', 'HTML Worker');
+            case 'css':
+            case 'scss':
+            case 'less':
+                return buildWorker(workerOverrideGlobals, label, 'cssWorker', 'CSS Worker');
+            case 'json':
+                return buildWorker(workerOverrideGlobals, label, 'jsonWorker', 'JSON Worker');
+            default:
+                return buildWorker(workerOverrideGlobals, label, 'editorWorker', 'Editor Worker');
+        }
+    };
+    monWin.MonacoEnvironment.getWorker = getWorker;
+}

package/components/common/badge/Badge.svelte

@@ -12,7 +12,6 @@ export let baseClass = 'text-center';
 export let capitalize = false;
 export let icon = undefined;
 let defaulIconProps = {
-    data: undefined,
     position: 'left',
     scale: 0.7
 };

package/components/common/button/Button.svelte

@@ -4,11 +4,14 @@ import { ButtonType } from './model';
 import { goto } from '$app/navigation';
 import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
+import ButtonDropdown from './ButtonDropdown.svelte';
+import { MenuItem } from '@rgossiaux/svelte-headlessui';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
 export let variant = 'contained';
 export let btnClasses = '';
+export let wrapperClasses = '';
 export let disabled = false;
 export let href = undefined;
 export let target = '_self';
@@ -22,6 +25,7 @@ export let buttonType = 'button';
 export let loading = false;
 export let title = undefined;
 export let style = '';
+export let dropdownItems = undefined;
 const dispatch = createEventDispatcher();
 // Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
 const colorVariants = {
@@ -56,7 +60,7 @@ const colorVariants = {
 };
 $: buttonProps = {
     id,
-    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' : ''),
+    class: twMerge(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize][variant], 'focus:ring-2 font-semibold', dropdownItems ? 'rounded-l-md h-full' : 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : '', 'transition-all'),
     href,
     target,
     tabindex: disabled ? -1 : 0,
@@ -86,28 +90,46 @@ $: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', st
 $: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes);
 </script>
 
-<svelte:element
-	this={href ? 'a' : 'button'}
-	bind:this={element}
-	on:pointerdown
-	on:click={onClick}
-	on:focus
-	on:blur
-	{...buttonProps}
-	disabled={disabled || loading}
-	type="submit"
-	{style}
->
-	{#if loading}
-		<Loader2 class="animate-spin mr-1" size={14} />
-	{:else if startIcon}
-		<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
-	{/if}
+<div class="{dropdownItems ? 'flex flex-row divide-x divide-frost-600' : ''} {wrapperClasses}">
+	<svelte:element
+		this={href ? 'a' : 'button'}
+		bind:this={element}
+		on:pointerdown
+		on:click={onClick}
+		on:focus
+		on:blur
+		{...buttonProps}
+		disabled={disabled || loading}
+		type="submit"
+		{style}
+	>
+		{#if loading}
+			<Loader2 class="animate-spin mr-1" size={14} />
+		{:else 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 !iconOnly}
+			<slot />
+		{/if}
+		{#if endIcon}
+			<Icon data={endIcon.icon} class={endIconClass} scale={ButtonType.IconScale[size]} />
+		{/if}
+	</svelte:element>
+
+	{#if dropdownItems}
+		<div class={twMerge(buttonProps.class, 'rounded-r-md rounded-l-none m-0 p-0 h-auto')}>
+			<ButtonDropdown>
+				<svelte:fragment slot="items">
+					{#each dropdownItems as item}
+						<MenuItem on:click={item.onClick} href={item.href}>
+							<div class="!text-gray-700 px-4 py-2 my-1 cursor-pointer hover:bg-gray-100 !text-sm">
+								{item.label}
+							</div>
+						</MenuItem>
+					{/each}
+				</svelte:fragment>
+			</ButtonDropdown>
+		</div>
 	{/if}
-</svelte:element>
+</div>

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

@@ -9,6 +9,7 @@ declare const __propDef: {
         color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
         variant?: ButtonType.Variant | undefined;
         btnClasses?: string | undefined;
+        wrapperClasses?: string | undefined;
         disabled?: boolean | undefined;
         href?: string | undefined;
         target?: ButtonType.Target | undefined;
@@ -18,10 +19,15 @@ declare const __propDef: {
         element?: ButtonType.Element | undefined;
         id?: string | undefined;
         nonCaptureEvent?: boolean | undefined;
-        buttonType?: "reset" | "submit" | "button" | undefined;
+        buttonType?: "button" | "submit" | "reset" | undefined;
         loading?: boolean | undefined;
         title?: string | undefined;
         style?: string | undefined;
+        dropdownItems?: {
+            label: string;
+            onClick?: (() => void) | undefined;
+            href?: string | undefined;
+        }[] | undefined;
     };
     events: {
         pointerdown: PointerEvent;

package/components/common/button/ButtonDropdown.svelte

@@ -0,0 +1,25 @@
+<script>
+	import { Menu, Transition, MenuButton, MenuItems } from '@rgossiaux/svelte-headlessui'
+	import { ChevronDown } from 'lucide-svelte'
+</script>
+
+<Menu let:open as="div" class="relative z-50 flex w-full h-full">
+	<MenuButton class="h-full w-full px-2">
+		<ChevronDown class="w-5 h-5" />
+	</MenuButton>
+	<Transition
+		show={open}
+		enter="transition ease-out duration-25"
+		enterFrom="transform opacity-0 scale-95"
+		enterTo="transform opacity-100 scale-100"
+		leave="transition ease-in duration-25"
+		leaveFrom="transform opacity-100 scale-100"
+		leaveTo="transform opacity-0 scale-95"
+	>
+		<MenuItems
+			class="absolute right-0 z-50 mt-2 w-56 origin-top-right top-8 divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+		>
+			<slot name="items" />
+		</MenuItems>
+	</Transition>
+</Menu>

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

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

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 = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    type Color = typeof BUTTON_COLORS[number];
+    type Size = 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    type Color = (typeof BUTTON_COLORS)[number];
     type Variant = 'contained' | 'border';
     type Target = '_self' | '_blank';
     type Element = HTMLButtonElement | HTMLAnchorElement;
@@ -12,7 +12,6 @@ export declare namespace ButtonType {
     const FontSizeClasses: Record<ButtonType.Size, string>;
     const SpacingClasses: Record<ButtonType.Size, Record<ButtonType.Variant, string>>;
     const IconScale: Record<ButtonType.Size, number>;
-    const ItemContextKey: "popupItemProps";
     interface ItemProps {
         size: Size;
         color: Color;

package/components/common/button/model.js

@@ -2,6 +2,7 @@ export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray', '
 export var ButtonType;
 (function (ButtonType) {
     ButtonType.FontSizeClasses = {
+        xs2: 'text-xs',
         xs: 'text-xs',
         sm: 'text-sm',
         md: 'text-md',
@@ -9,6 +10,10 @@ export var ButtonType;
         xl: 'text-xl'
     };
     ButtonType.SpacingClasses = {
+        xs2: {
+            border: 'px-2 py-[4px]',
+            contained: 'px-2 py-[4px]'
+        },
         xs: {
             border: 'px-3 py-[6px]',
             contained: 'px-3 py-[7px]'
@@ -28,15 +33,14 @@ export var ButtonType;
         xl: {
             border: 'px-4 py-[8px]',
             contained: 'px-4 py-[9px]'
-        },
+        }
     };
     ButtonType.IconScale = {
+        xs2: 0.6,
         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

@@ -55,20 +55,19 @@ let timeout = true;
 $: !open ? setTimeout(() => (timeout = true), durationMs) : (timeout = false);
 onMount(() => {
     mounted = true;
-    scrollLock(open);
 });
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
 
 <aside
-	class="drawer {$$props.class} {$$props.positionClass}"
+	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="overlay {$$props.positionClass ?? ''}" on:click={handleClickAway} />
 	<div class="panel {placement} {$$props.positionClass}" class:size>
 		{#if open || !timeout || alwaysOpen}
 			<slot {open} />

package/components/common/drawer/DrawerContent.svelte

@@ -1,21 +1,17 @@
 <script>import { classNames } from '../../../utils';
-import { faClose } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher } from 'svelte';
-import { Icon } from 'svelte-awesome';
 import CloseButton from '../CloseButton.svelte';
 export let title = undefined;
 export let overflow_y = true;
 export let noPadding = false;
 export let forceOverflowVisible = false;
-const dispatch = createEventDispatcher();
 </script>
 
 <div class="flex flex-col divide-y h-screen max-h-screen">
-	<div class="flex justify-between w-wull items-center px-2 py-2 ">
+	<div class="flex justify-between w-wull items-center px-2 py-2">
 		<div class="flex items-center gap-2">
 			<CloseButton on:close />
 
-			<span class="font-semibold truncate text-gray-800">{title}</span>
+			<span class="font-semibold truncate text-gray-800">{title ?? ''}</span>
 		</div>
 		{#if $$slots.actions}
 			<div class="flex gap-1 items-center justify-end">