windmill-components 1.70.0 → 1.77.0

package/components/apps/svelte-grid/utils/item.d.ts

@@ -0,0 +1,14 @@
+import type { FilledItem, ItemLayout } from '../types';
+export declare function getItemById(id: any, items: any): any;
+export declare function isEmpty(matrix: any[][], x: number, y: number, w: number, h: number): boolean;
+export declare function findFreeSpaceForItem<T>(matrix: FilledItem<T>[][], item: ItemLayout): {
+    x: number;
+    y: number;
+};
+export declare function moveItemsAroundItem(active: any, items: any, cols: any, original: any): any;
+export declare function moveItem(active: any, items: any, cols: any, original: any): any;
+export declare function normalize(items: any, col: any): any;
+export declare function adjust<T>(items: FilledItem<T>[], col: any): FilledItem<T>[];
+export declare function getUndefinedItems(items: any, col: any, breakpoints: any): any;
+export declare function getClosestColumn(items: any, item: any, col: any, breakpoints: any): any;
+export declare function specifyUndefinedColumns(items: any, col: any, breakpoints: any): any[];

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

@@ -0,0 +1,192 @@
+import { makeMatrix, makeMatrixFromItemsIgnore, findCloseBlocks, findItemsById, makeMatrixFromItems } from './matrix';
+import { getRowsCount } from './other';
+export function getItemById(id, items) {
+    return items.find((value) => value.id === id);
+}
+export function isEmpty(matrix, x, y, w, h) {
+    for (var i = 0; i < h; i++) {
+        if (matrix[y + i]) {
+            for (var j = 0; j < w; j++) {
+                if (matrix[y + i][x + j] != undefined) {
+                    return false;
+                }
+            }
+        }
+    }
+    return true;
+}
+function distance(a, b) {
+    return Math.abs(a.x - b.x + 0.25) + Math.abs(a.y - b.y + 0.25);
+}
+export function findFreeSpaceForItem(matrix, item) {
+    const cols = matrix[0].length;
+    const w = Math.min(cols, item.w);
+    const h = item.h;
+    let xNtime = cols - w;
+    let getMatrixRows = matrix.length;
+    const range = Array.from({ length: getMatrixRows }, (_, y) => Array.from({ length: xNtime }, (_, x) => ({ x, y })))
+        .flat(1)
+        .sort((a, b) => {
+        let dst1 = distance(a, item);
+        let dst2 = distance(b, item);
+        if (dst1 > dst2) {
+            return 1;
+        }
+        else if (dst1 < dst2) {
+            return -1;
+        }
+        else {
+            return 0;
+        }
+    });
+    for (const { x, y } of range.values()) {
+        if (isEmpty(matrix, x, y, w, h)) {
+            return { x, y };
+        }
+    }
+    return {
+        y: getMatrixRows,
+        x: 0
+    };
+}
+const getItem = (item, col) => {
+    return { ...item[col], id: item.id };
+};
+const updateItem = (elements, active, position, col) => {
+    return elements.map((value) => {
+        if (value.id === active.id) {
+            return { ...value, [col]: { ...value[col], ...position } };
+        }
+        return value;
+    });
+};
+export function moveItemsAroundItem(active, items, cols, original) {
+    // Get current item from the breakpoint
+    const activeItem = getItem(active, cols);
+    const ids = items.map((value) => value.id).filter((value) => value !== activeItem.id);
+    const els = items.filter((value) => value.id !== activeItem.id);
+    // Update items
+    let newItems = updateItem(items, active, activeItem, cols);
+    let matrix = makeMatrixFromItemsIgnore(newItems, ids, getRowsCount(newItems, cols), cols);
+    let tempItems = newItems;
+    // Exclude resolved elements ids in array
+    let exclude = [];
+    els.forEach((item) => {
+        // Find position for element
+        let position = findFreeSpaceForItem(matrix, item[cols]);
+        // Exclude item
+        exclude.push(item.id);
+        tempItems = updateItem(tempItems, item, position, cols);
+        // Recreate ids of elements
+        let getIgnoreItems = ids.filter((value) => exclude.indexOf(value) === -1);
+        // Update matrix for next iteration
+        matrix = makeMatrixFromItemsIgnore(tempItems, getIgnoreItems, getRowsCount(tempItems, cols), cols);
+    });
+    // Return result
+    return tempItems;
+}
+export function moveItem(active, items, cols, original) {
+    // Get current item from the breakpoint
+    const item = getItem(active, cols);
+    // Create matrix from the items expect the active
+    let matrix = makeMatrixFromItemsIgnore(items, [item.id], getRowsCount(items, cols), cols);
+    // Getting the ids of items under active Array<String>
+    const closeBlocks = findCloseBlocks(matrix, item);
+    // Getting the objects of items under active Array<Object>
+    let closeObj = findItemsById(closeBlocks, items);
+    // Getting whenever of these items is fixed
+    const fixed = closeObj.find((value) => value[cols].fixed);
+    // If found fixed, reset the active to its original position
+    if (fixed)
+        return items;
+    // Update items
+    items = updateItem(items, active, item, cols);
+    // Create matrix of items expect close elements
+    matrix = makeMatrixFromItemsIgnore(items, closeBlocks, getRowsCount(items, cols), cols);
+    // Create temp vars
+    let tempItems = items;
+    let tempCloseBlocks = closeBlocks;
+    // Exclude resolved elements ids in array
+    let exclude = [];
+    // Iterate over close elements under active item
+    closeObj.forEach((item) => {
+        // Find position for element
+        let position = findFreeSpaceForItem(matrix, item[cols]);
+        // Exclude item
+        exclude.push(item.id);
+        // Assign the position to the element in the column
+        tempItems = updateItem(tempItems, item, position, cols);
+        // Recreate ids of elements
+        let getIgnoreItems = tempCloseBlocks.filter((value) => exclude.indexOf(value) === -1);
+        // Update matrix for next iteration
+        matrix = makeMatrixFromItemsIgnore(tempItems, getIgnoreItems, getRowsCount(tempItems, cols), cols);
+    });
+    // Return result
+    return tempItems;
+}
+// Helper function
+export function normalize(items, col) {
+    let result = items.slice();
+    result.forEach((value) => {
+        const getItem = value[col];
+        if (!getItem.static) {
+            result = moveItem(getItem, result, col, { ...getItem });
+        }
+    });
+    return result;
+}
+// Helper function
+export function adjust(items, col) {
+    let matrix = makeMatrix(getRowsCount(items, col), col);
+    let res = [];
+    items.forEach((item) => {
+        let position = findFreeSpaceForItem(matrix, item[col]);
+        res.push({
+            ...item,
+            [col]: {
+                ...item[col],
+                ...position
+            }
+        });
+        matrix = makeMatrixFromItems(res, getRowsCount(res, col), col);
+    });
+    return res;
+}
+export function getUndefinedItems(items, col, breakpoints) {
+    return items
+        .map((value) => {
+        if (!value[col]) {
+            return value.id;
+        }
+    })
+        .filter(Boolean);
+}
+export function getClosestColumn(items, item, col, breakpoints) {
+    return breakpoints
+        .map(([_, column]) => item[column] && column)
+        .filter(Boolean)
+        .reduce(function (acc, value) {
+        const isLower = Math.abs(value - col) < Math.abs(acc - col);
+        return isLower ? value : acc;
+    });
+}
+export function specifyUndefinedColumns(items, col, breakpoints) {
+    let matrix = makeMatrixFromItems(items, getRowsCount(items, col), col);
+    const getUndefinedElements = getUndefinedItems(items, col, breakpoints);
+    let newItems = [...items];
+    getUndefinedElements.forEach((elementId) => {
+        const getElement = items.find((item) => item.id === elementId);
+        const closestColumn = getClosestColumn(items, getElement, col, breakpoints);
+        const position = findFreeSpaceForItem(matrix, getElement[closestColumn]);
+        const newItem = {
+            ...getElement,
+            [col]: {
+                ...getElement[closestColumn],
+                ...position
+            }
+        };
+        newItems = newItems.map((value) => (value.id === elementId ? newItem : value));
+        matrix = makeMatrixFromItems(newItems, getRowsCount(newItems, col), col);
+    });
+    return newItems;
+}

package/components/apps/svelte-grid/utils/matrix.d.ts

@@ -0,0 +1,6 @@
+import type { FilledItem } from "../types";
+export declare const makeMatrix: (w: number, h: number) => any[][];
+export declare function makeMatrixFromItems<T>(items: FilledItem<T>[], row: number, col: number): FilledItem<T>[][];
+export declare function findCloseBlocks<T>(matrix: FilledItem<T>[][], curObject: any): string[];
+export declare function makeMatrixFromItemsIgnore(items: any, ignoreList: any, _row: any, _col: any): any[][];
+export declare function findItemsById<T>(closeBlocks: string[], items: FilledItem<T>[]): FilledItem<T>[];

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

@@ -0,0 +1,53 @@
+export const makeMatrix = (rows, cols) => Array.from(Array(rows), () => new Array(cols)); // make 2d array
+export function makeMatrixFromItems(items, row, col) {
+    let matrix = makeMatrix(row, col);
+    for (var i = 0; i < items.length; i++) {
+        const value = items[i][col];
+        if (value) {
+            const { x, y, h } = value;
+            const id = items[i].id;
+            const w = Math.min(col, value.w);
+            for (var j = y; j < y + h; j++) {
+                const row = matrix[j];
+                for (var k = x; k < x + w; k++) {
+                    row[k] = { ...value, id };
+                }
+            }
+        }
+    }
+    return matrix;
+}
+export function findCloseBlocks(matrix, curObject) {
+    const { h, x, y } = curObject;
+    const w = Math.min(matrix[0].length, curObject.w);
+    const tempR = matrix.slice(y, y + h);
+    let result = [];
+    for (var i = 0; i < tempR.length; i++) {
+        let tempA = tempR[i].slice(x, x + w);
+        result = [...result, ...tempA.map((val) => val?.id).filter((id) => id !== undefined && id !== curObject.id)];
+    }
+    return [...new Set(result)];
+}
+export function makeMatrixFromItemsIgnore(items, ignoreList, _row, _col) {
+    let matrix = makeMatrix(_row, _col);
+    for (var i = 0; i < items.length; i++) {
+        const value = items[i][_col];
+        const id = items[i].id;
+        const { x, y, h } = value;
+        const w = Math.min(_col, value.w);
+        if (ignoreList.indexOf(id) === -1) {
+            for (var j = y; j < y + h; j++) {
+                const row = matrix[j];
+                if (row) {
+                    for (var k = x; k < x + w; k++) {
+                        row[k] = { ...value, id };
+                    }
+                }
+            }
+        }
+    }
+    return matrix;
+}
+export function findItemsById(closeBlocks, items) {
+    return items.filter((value) => closeBlocks.indexOf(value.id) !== -1);
+}

package/components/apps/svelte-grid/utils/other.d.ts

@@ -0,0 +1,3 @@
+export declare function throttle(func: any, timeFrame: any): (...args: any[]) => void;
+export declare function getRowsCount(items: any, cols: any): number;
+export declare const getColumn: (containerWidth: any, columns: any) => any;

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

@@ -0,0 +1,30 @@
+export function throttle(func, timeFrame) {
+    let lastTime = new Date().getTime();
+    return function (...args) {
+        let now = new Date().getTime();
+        if (now - lastTime >= timeFrame) {
+            func(...args);
+            lastTime = now;
+        }
+    };
+}
+export function getRowsCount(items, cols) {
+    const getItemsMaxHeight = items.map((val) => {
+        const item = val[cols];
+        return (item && item.y) + (item && item.h) || 0;
+    });
+    return Math.max(...getItemsMaxHeight, 1);
+}
+export const getColumn = (containerWidth, columns) => {
+    const sortColumns = columns.slice().sort((a, b) => a[0] - b[0]);
+    const breakpoint = sortColumns.find((value) => {
+        const [width] = value;
+        return containerWidth <= width;
+    });
+    if (breakpoint) {
+        return breakpoint[1];
+    }
+    else {
+        return sortColumns[sortColumns.length - 1][1];
+    }
+};

package/components/apps/types.d.ts

@@ -1,10 +1,11 @@
 import type { Schema } from '../../common';
 import type { Preview } from '../../gen';
-import type { FilledItem } from '@windmill-labs/svelte-grid';
+import type { History } from '../../history';
 import type { Writable } from 'svelte/store';
 import type { AppComponent } from './editor/component/components';
 import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from './inputType';
 import type { World } from './rx';
+import type { FilledItem } from './svelte-grid/types';
 export type HorizontalAlignment = 'left' | 'center' | 'right';
 export type VerticalAlignment = 'top' | 'center' | 'bottom';
 export type Aligned = {
@@ -17,8 +18,8 @@ export interface GeneralAppInput {
     tooltip?: string;
 }
 export type ComponentCssProperty = {
-    class: string;
-    style: string;
+    class?: string;
+    style?: string;
 };
 export type ComponentCustomCSS<T extends string = string> = Record<T, ComponentCssProperty>;
 export interface BaseAppComponent extends Partial<Aligned> {
@@ -50,9 +51,9 @@ export type GridItem = FilledItem<{
 }>;
 export type InlineScript = {
     content: string;
-    language: Preview.language;
-    path: string;
-    schema: Schema;
+    language: Preview.language | 'frontend';
+    path?: string;
+    schema?: Schema;
 };
 export type App = {
     grid: GridItem[];
@@ -65,6 +66,7 @@ export type App = {
         name: string;
         inlineScript: InlineScript | undefined;
         fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        autoRefresh?: boolean;
     }>;
     css?: Record<'viewer' | 'grid' | AppComponent['type'], ComponentCustomCSS>;
     subgrids?: Record<string, GridItem[]>;
@@ -75,10 +77,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>;
@@ -102,6 +103,18 @@ export type AppEditorContext = {
     }>>;
     openDebugRun: Writable<((componentID: string) => void) | undefined>;
     focusedGrid: Writable<FocusedGrid | undefined>;
+    stateId: Writable<number>;
+    parentWidth: Writable<number>;
+    state: Writable<Record<string, any>>;
+    componentControl: Writable<Record<string, {
+        left?: () => boolean;
+        right?: () => boolean;
+        setTab?: (index: number) => void;
+    }>>;
+};
+export type AppEditorContext = {
+    history: History<App> | undefined;
+    pickVariableCallback: Writable<((path: string) => void) | undefined>;
 };
 export type FocusedGrid = {
     parentComponentId: string;

package/components/apps/utils.d.ts

@@ -1,9 +1,8 @@
 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, GridItem } from './types';
 export declare function allItems(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): GridItem[];
-export declare function allItemsWithParent(grid: GridItem[], subgrids: Record<string, GridItem[]> | undefined): [GridItem, string | undefined][];
 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 function accessPropertyByPath<T>(object: T, path: string): T | undefined;
@@ -15,7 +14,8 @@ export declare function toStatic(app: App, staticExporter: Record<string, () =>
     app: App;
     summary: string;
 };
-export declare function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean): string;
+export declare function buildExtraLib(components: Record<string, Record<string, Output<any>>>, idToExclude: string, hasRows: boolean, state: Record<string, any>, goto: 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,60 +1,13 @@
 import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { emptySchema } from '../../utils';
-/*
-export function deleteComponent(
-    subgrid: string | undefined,
-    component: AppComponent,
-    app: App,
-    staticOutputs: Record<string, any>,
-    runnableComponents: Record<string, any>
-) {
-    if (parentItems) {
-        let index = parentItems.findIndex((item) => item.data?.id === component.id)
-        if (index != -1) {
-            parentItems.splice(index, 1)
-        }
-    }
-
-    delete staticOutputs[component.id]
-    delete runnableComponents[component.id]
-
-    if (
-        component.componentInput?.type === 'runnable' &&
-        component.componentInput?.runnable?.type === 'runnableByName'
-    ) {
-        const { name, inlineScript } = component.componentInput.runnable
-
-        if (inlineScript) {
-            if (!app.unusedInlineScripts) {
-                app.unusedInlineScripts = []
-            }
-
-            app.unusedInlineScripts.push({
-                name,
-                inlineScript
-            })
-        }
-    }
-}
-
-*/
+import { twMerge } from 'tailwind-merge';
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
         return grid;
     }
     return [...grid, ...Object.values(subgrids).flat()];
 }
-export function allItemsWithParent(grid, subgrids) {
-    const items = grid.map((item) => [item, undefined]);
-    if (subgrids == undefined) {
-        return items;
-    }
-    return [
-        ...items,
-        ...Object.entries(subgrids).flatMap(([k, v]) => v.map((g) => [g, k]))
-    ];
-}
 export async function loadSchema(workspace, path, runType) {
     if (runType === 'script') {
         const script = await ScriptService.getScriptByPath({
@@ -106,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 {
@@ -167,16 +120,22 @@ export function toStatic(app, staticExporter, summary) {
     });
     return { app: newApp, summary };
 }
-export function buildExtraLib(components, idToExclude, hasRows) {
-    return (Object.entries(components)
+export function buildExtraLib(components, idToExclude, hasRows, state, goto) {
+    const cs = 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]) => `
-
-declare const ${k} = ${JSON.stringify(v)};
-
+        .map(([k, v]) => `declare const ${k}: ${JSON.stringify(v)};
 `)
-        .join('\n') + (hasRows ? 'declare const row: Record<string, any>;' : ''));
+        .join('\n');
+    return `${cs}
+${hasRows ? 'declare const row: Record<string, any>;' : ''}
+${goto
+        ? `declare async function goto(path: string, newTab?: boolean): Promise<void>;
+declare function setTab(id: string, index: string): void;
+`
+        : ''}
+declare const state: ${JSON.stringify(state)};
+`;
 }
 export function getAllScriptNames(app) {
     const names = app.grid.reduce((acc, gridItem) => {
@@ -209,3 +168,22 @@ export function toPascalCase(text) {
 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/CloseButton.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { faClose } from '@fortawesome/free-solid-svg-icons'
+	import { createEventDispatcher } from 'svelte'
+
+	import { Icon } from 'svelte-awesome'
+
+	export let noBg = false
+	const dispatch = createEventDispatcher()
+</script>
+
+<button
+	on:click={() => dispatch('close')}
+	class="hover:bg-gray-200 {noBg
+		? ''
+		: 'bg-gray-100'} rounded-full w-8 h-8 flex items-center justify-center transition-all"
+>
+	<Icon data={faClose} class="text-gray-500" />
+</button>

package/components/common/CloseButton.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  CloseButtonProps */
+/** @typedef {typeof __propDef.events}  CloseButtonEvents */
+/** @typedef {typeof __propDef.slots}  CloseButtonSlots */
+export default class CloseButton extends SvelteComponentTyped<{
+    noBg?: boolean | undefined;
+}, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CloseButtonProps = typeof __propDef.props;
+export type CloseButtonEvents = typeof __propDef.events;
+export type CloseButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        noBg?: boolean | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/common/badge/Badge.svelte

@@ -7,6 +7,7 @@ export let large = false;
 export let href = '';
 export let rounded = false;
 export let dismissable = false;
+export let wrapperClass = '';
 export let baseClass = 'text-center';
 export let capitalize = false;
 export let icon = undefined;
@@ -44,7 +45,11 @@ $: iconProps = icon ? { ...defaulIconProps, ...icon } : { data: undefined };
 const handleHide = () => (hidden = !hidden);
 </script>
 
-<span on:click on:keydown class="inline-flex justify-center items-center whitespace-nowrap">
+<span
+	on:click
+	on:keydown
+	class="inline-flex justify-center items-center whitespace-nowrap {wrapperClass}"
+>
 	<svelte:element
 		this={href ? 'a' : 'span'}
 		{href}

package/components/common/badge/Badge.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         href?: string | undefined;
         rounded?: boolean | undefined;
         dismissable?: boolean | undefined;
+        wrapperClass?: string | undefined;
         baseClass?: string | undefined;
         capitalize?: boolean | undefined;
         icon?: BadgeIconProps | undefined;

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

@@ -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>