windmill-components 1.89.1 → 1.103.0

package/package/components/apps/editor/settingsPanel/script/shared/ScriptSettingsActions.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ButtonType } from '../../../../../common/button/model';
+declare const __propDef: {
+    props: {
+        actions?: {
+            label: string;
+            icon: any;
+            color: ButtonType.Color;
+            callback: () => void;
+        }[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptSettingsActionsProps = typeof __propDef.props;
+export type ScriptSettingsActionsEvents = typeof __propDef.events;
+export type ScriptSettingsActionsSlots = typeof __propDef.slots;
+export default class ScriptSettingsActions extends SvelteComponentTyped<ScriptSettingsActionsProps, ScriptSettingsActionsEvents, ScriptSettingsActionsSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/script/shared/ScriptSettingsSection.svelte

@@ -0,0 +1,18 @@
+<script>import Tooltip from '../../../../../Tooltip.svelte';
+export let title;
+export let tooltip = undefined;
+</script>
+
+<div class="p-2">
+	<div class="mb-2 text-sm font-semibold justify-between flex flex-row items-center">
+		{title}
+
+		{#if tooltip}
+			<Tooltip>
+				{tooltip}
+			</Tooltip>
+		{/if}
+	</div>
+
+	<slot />
+</div>

package/package/components/apps/editor/settingsPanel/script/shared/ScriptSettingsSection.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        tooltip?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ScriptSettingsSectionProps = typeof __propDef.props;
+export type ScriptSettingsSectionEvents = typeof __propDef.events;
+export type ScriptSettingsSectionSlots = typeof __propDef.slots;
+export default class ScriptSettingsSection extends SvelteComponentTyped<ScriptSettingsSectionProps, ScriptSettingsSectionEvents, ScriptSettingsSectionSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte

@@ -0,0 +1,47 @@
+<script>import { getContext } from 'svelte';
+import { Button } from '../../../../../common';
+import Tooltip from '../../../../../Tooltip.svelte';
+import { Plus, X } from 'lucide-svelte';
+const { selectedComponentInEditor } = getContext('AppEditorContext');
+export let appInput;
+export let appComponent;
+$: checked = Boolean(appInput.transformer);
+</script>
+
+<div class="p-2">
+	<div class="text-sm font-semibold justify-between flex flex-row items-center">
+		<div class="flex flex-row items-center gap-2">
+			Transformer
+
+			<Tooltip wrapperClass="flex">
+				{"A transformer is an optional frontend script that is executed right after the component's script whose purpose is to do lightweight transformation in the browser. It takes the previous computation's result as `result`"}
+			</Tooltip>
+		</div>
+		<Button
+			size="xs"
+			color={checked ? 'red' : 'light'}
+			variant="border"
+			on:click={() => {
+				if (appInput.transformer) {
+					appInput.transformer = undefined
+				} else {
+					appInput.transformer = {
+						language: 'frontend',
+						content: 'return result'
+					}
+					$selectedComponentInEditor = appComponent.id + '_transformer'
+				}
+			}}
+		>
+			<div class="flex flex-row gap-1 items-center">
+				{#if checked}
+					<X size={16} />
+					Remove
+				{:else}
+					<Plus size={16} />
+					Add
+				{/if}
+			</div>
+		</Button>
+	</div>
+</div>

package/package/components/apps/editor/settingsPanel/script/shared/ScriptTransformer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ResultAppInput } from '../../../../inputType';
+import type { AppComponent } from '../../../component';
+declare const __propDef: {
+    props: {
+        appInput: ResultAppInput;
+        appComponent: AppComponent;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptTransformerProps = typeof __propDef.props;
+export type ScriptTransformerEvents = typeof __propDef.events;
+export type ScriptTransformerSlots = typeof __propDef.slots;
+export default class ScriptTransformer extends SvelteComponentTyped<ScriptTransformerProps, ScriptTransformerEvents, ScriptTransformerSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte

@@ -0,0 +1,115 @@
+<script>import Alert from '../../../../../common/alert/Alert.svelte';
+import { classNames } from '../../../../../../utils';
+import { Plus, X } from 'lucide-svelte';
+import { Button } from '../../../../../common';
+import { getContext } from 'svelte';
+import Tooltip from '../../../../../Tooltip.svelte';
+export let triggerEvents = [];
+export let inlineScript = undefined;
+export let isFrontend = false;
+export let dependencies = [];
+export let shoudlDisplayChangeEvents = false;
+$: changeEvents = isFrontend
+    ? inlineScript?.refreshOn
+        ? inlineScript.refreshOn.map((x) => `${x.id} - ${x.key}`)
+        : []
+    : dependencies;
+$: hasNoTriggers =
+    triggerEvents.length === 0 && (changeEvents.length === 0 || !shoudlDisplayChangeEvents);
+const badgeClass = 'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium border';
+const colors = {
+    green: 'text-green-800 border-green-600 bg-green-100',
+    indigo: 'text-indigo-800 border-indigo-600 bg-indigo-100',
+    blue: 'text-blue-800 border-blue-600 bg-blue-100'
+};
+const { connectingInput, app } = getContext('AppViewerContext');
+function applyConnection(connection) {
+    const refresh = {
+        id: connection.componentId,
+        key: connection.path
+    };
+    if (!inlineScript) {
+        return;
+    }
+    if (inlineScript.refreshOn?.find((y) => y.id === refresh.id && y.key === refresh.key)) {
+        return;
+    }
+    if (!inlineScript.refreshOn) {
+        inlineScript.refreshOn = [refresh];
+    }
+    else {
+        inlineScript.refreshOn.push(refresh);
+    }
+    inlineScript = JSON.parse(JSON.stringify(inlineScript));
+    $app = $app;
+}
+</script>
+
+{#if isFrontend && shoudlDisplayChangeEvents}
+	<div class="flex mb-4">
+		<Button
+			size="xs2"
+			color="dark"
+			on:click={() => {
+				$connectingInput = {
+					opened: true,
+					input: undefined,
+					hoveredComponent: undefined,
+					onConnect: applyConnection
+				}
+			}}
+		>
+			<div class="flex flex-row gap-1 items-center">
+				<Plus size={14} />
+
+				Add dependency
+			</div>
+		</Button>
+	</div>
+{/if}
+{#if hasNoTriggers}
+	<Alert type="warning" title="No triggers" size="xs">
+		This script has no triggers. It will never run.
+	</Alert>
+{:else}
+	{#if triggerEvents.length > 0}
+		<div class="text-xs font-semibold text-slate-800 mb-1">Events</div>
+		<div class="flex flex-row gap-2 flex-wrap">
+			{#each triggerEvents as triggerEvent}
+				<span class={classNames(badgeClass, colors['green'])}>{triggerEvent}</span>
+			{/each}
+		</div>
+	{/if}
+	{#if changeEvents.length > 0 && shoudlDisplayChangeEvents}
+		<div class="text-xs font-semibold text-slate-800 mb-1 mt-2">Change on value</div>
+		<div class="flex flex-row gap-2 flex-wrap">
+			{#each changeEvents as changeEvent}
+				<span class={classNames(badgeClass, colors['blue'])}>
+					{changeEvent}
+					{#if changeEvent === 'Eval'}
+						<Tooltip class="!text-blue-600 ml-1">
+							At least one input is configured as an evaluated input and the component will be
+							triggered if the result of the eval change. Eval expressions are re-evaluated on any
+							output or state changes.
+						</Tooltip>
+					{/if}
+					{#if isFrontend}
+						<button
+							class="bg-blue-300 ml-2 p-0.5 rounded-md hover:bg-blue-400 cursor-pointer"
+							on:click={() => {
+								if (inlineScript?.refreshOn) {
+									inlineScript.refreshOn = inlineScript.refreshOn.filter(
+										(x) => `${x.id} - ${x.key}` !== changeEvent
+									)
+									inlineScript = JSON.parse(JSON.stringify(inlineScript))
+								}
+							}}
+						>
+							<X size="14" />
+						</button>
+					{/if}
+				</span>
+			{/each}
+		</div>
+	{/if}
+{/if}

package/package/components/apps/editor/settingsPanel/script/shared/ScriptTriggers.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InlineScript } from '../../../../types';
+declare const __propDef: {
+    props: {
+        triggerEvents?: string[] | undefined;
+        inlineScript?: InlineScript | undefined;
+        isFrontend?: boolean | undefined;
+        dependencies?: string[] | undefined;
+        shoudlDisplayChangeEvents?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ScriptTriggersProps = typeof __propDef.props;
+export type ScriptTriggersEvents = typeof __propDef.events;
+export type ScriptTriggersSlots = typeof __propDef.slots;
+export default class ScriptTriggers extends SvelteComponentTyped<ScriptTriggersProps, ScriptTriggersEvents, ScriptTriggersSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/script/utils.d.ts

@@ -0,0 +1,8 @@
+import type { EvalAppInput, Runnable } from '../../../inputType';
+import type { AppComponent } from '../../component';
+import type { StaticAppInput, ConnectedAppInput, RowAppInput, UserAppInput } from '../../../inputType';
+export declare function getDependencies(fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput | EvalAppInput> | undefined): string[];
+export declare function isFrontend(runnable: Runnable): boolean;
+export declare function isTriggerable(componentType: string): boolean;
+export declare function isTriggerOnAppLoad(appComponent: AppComponent): boolean;
+export declare function getAllTriggerEvents(appComponent: AppComponent, autoRefresh: boolean | undefined): string[];

package/package/components/apps/editor/settingsPanel/script/utils.js

@@ -0,0 +1,41 @@
+export function getDependencies(fields) {
+    let dependencies = [];
+    if (!fields)
+        return dependencies;
+    Object.values(fields).forEach((field) => {
+        if (field.type === 'connected' && dependencies && field.connection) {
+            dependencies.push(`${field.connection.componentId} - ${field.connection.path}`);
+        }
+        if (field.type === 'eval' && !dependencies.includes('Eval')) {
+            dependencies.push(`Eval`);
+        }
+    });
+    return dependencies;
+}
+export function isFrontend(runnable) {
+    return runnable?.type === 'runnableByName' && runnable.inlineScript?.language === 'frontend';
+}
+export function isTriggerable(componentType) {
+    return ['buttoncomponent', 'formbuttoncomponent', 'formcomponent', 'steppercomponent'].includes(componentType);
+}
+export function isTriggerOnAppLoad(appComponent) {
+    return Boolean(appComponent?.configuration?.triggerOnAppLoad != undefined &&
+        appComponent.configuration.triggerOnAppLoad.type == 'static' &&
+        appComponent.configuration.triggerOnAppLoad.value);
+}
+export function getAllTriggerEvents(appComponent, autoRefresh) {
+    const events = [];
+    const triggerOnAppLoad = isTriggerOnAppLoad(appComponent);
+    const isTriggerableComponent = isTriggerable(appComponent.type);
+    if (isTriggerableComponent) {
+        events.push('click');
+        if (triggerOnAppLoad) {
+            events.push('start');
+        }
+    }
+    else if (autoRefresh) {
+        events.push('start');
+        events.push('refresh');
+    }
+    return events;
+}

package/package/components/apps/inputType.d.ts

@@ -1,6 +1,6 @@
 import type { ReadFileAs } from '../common/fileInput/model';
 import type { InlineScript } from './types';
-export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select';
+export type InputType = 'integer' | 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select' | 'schema';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -34,6 +34,7 @@ export type TemplateInput = {
     type: 'template';
 };
 export type RunnableByPath = {
+    name: string;
     path: string;
     schema: any;
     runType: 'script' | 'flow' | 'hubscript';
@@ -55,8 +56,10 @@ export type ResultInput = {
     value?: any;
     doNotRecomputeOnInputChanged?: boolean;
     recomputeOnInputChanged?: boolean;
+    autoRefresh?: boolean;
+    hideRefreshButton?: boolean;
 };
-type AppInputSpec<T extends InputType, U, V extends InputType = never> = (StaticInput<U> | ConnectedInput | UserInput<U> | RowInput | EvalInput | UploadInput | ResultInput | TemplateInput) & InputConfiguration<T, V>;
+export 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> = {
     fieldType: T;
     subFieldType?: V;
@@ -82,7 +85,7 @@ export type StaticOptions = {
         label: string;
     }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', object[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', object[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'> | AppInputSpec<'schema', object>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/package/components/apps/rx.js

@@ -12,7 +12,6 @@ export function buildWorld(context) {
     };
     function newOutput(id, name, previousValue) {
         if (outputsById[id]?.[name]) {
-            writableWorld?.update((x) => x);
             return outputsById[id][name];
         }
         let o = newWorld.newOutput(id, name, stateId, previousValue);
@@ -121,7 +120,12 @@ export function settableOutput(state, previousValue) {
     function set(x, force = false) {
         if (!deepEqual(value, x) || force) {
             state.update((x) => x + 1);
-            value = x;
+            if (typeof x === 'object') {
+                value = JSON.parse(JSON.stringify(x));
+            }
+            else {
+                value = x;
+            }
             subscribers.forEach((x) => x.next(value));
         }
     }

package/package/components/apps/store.d.ts

@@ -1,4 +1,4 @@
-import type { Policy } from "../../gen";
+import type { Policy } from '../../gen';
 import type { App } from './types';
 export declare const importStore: import("svelte/store").Writable<{
     summary: string;

package/package/components/apps/store.js

@@ -1,2 +1,2 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
 export const importStore = writable(undefined);

package/package/components/apps/svelte-grid/MoveResize.svelte

@@ -257,9 +257,8 @@ const resizePointerUp = (e) => {
 	id={divId}
 	class="svlt-grid-item"
 	class:svlt-grid-active={active || (trans && rect)}
-	style="width: {active ? newSize.width : width}px; height:{active
-		? newSize.height
-		: height}px; {onTop ? 'z-index: 1000;' : ''}
+	style="width: {active ? newSize.width : width}px; height:{active ? newSize.height : height}px; 
+	{onTop ? 'z-index: 1000;' : ''}
   {active && rect
 		? `transform: translate(${cordDiff.x}px, ${cordDiff.y}px);top:${rect.top}px;left:${rect.left}px;`
 		: trans

package/package/components/apps/types.d.ts

@@ -2,8 +2,8 @@ import type { Schema } from '../../common';
 import type { Preview } from '../../gen';
 import type { History } from '../../history';
 import type { Writable } from 'svelte/store';
-import type { AppComponent, components } from './editor/component/components';
-import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, ResultAppInput, RowAppInput, StaticAppInput, UploadAppInput, UserAppInput } from './inputType';
+import type { AppComponent, PresetComponentConfig, RecomputeOthersSource, components } from './editor/component/components';
+import type { AppInput, ConnectedAppInput, ConnectedInput, EvalAppInput, InputConnection, ResultAppInput, RowAppInput, Runnable, StaticAppInput, UploadAppInput, UserAppInput } from './inputType';
 import type { World } from './rx';
 import type { FilledItem } from './svelte-grid/types';
 export type HorizontalAlignment = 'left' | 'center' | 'right';
@@ -47,6 +47,7 @@ export interface BaseAppComponent extends Partial<Aligned> {
 export type ComponentSet = {
     title: string;
     components: Readonly<AppComponent['type'][]>;
+    presets?: Readonly<PresetComponentConfig['type'][]> | undefined;
 };
 type SectionID = string;
 export type AppSection = {
@@ -65,6 +66,15 @@ export type InlineScript = {
     }[];
 };
 export type AppCssItemName = 'viewer' | 'grid' | AppComponent['type'];
+export type HiddenRunnable = {
+    name: string;
+    fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+    autoRefresh?: boolean;
+    doNotRecomputeOnInputChanged?: boolean;
+    recomputeOnInputChanged?: boolean;
+    noBackendValue?: any;
+    hidden?: boolean;
+} & Runnable & RecomputeOthersSource;
 export type App = {
     grid: GridItem[];
     fullscreen: boolean;
@@ -73,15 +83,7 @@ export type App = {
         name: string;
         inlineScript: InlineScript;
     }>;
-    hiddenInlineScripts: Array<{
-        name: string;
-        inlineScript: InlineScript | undefined;
-        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
-        autoRefresh?: boolean;
-        doNotRecomputeOnInputChanged?: boolean;
-        recomputeOnInputChanged?: boolean;
-        noBackendValue?: any;
-    }>;
+    hiddenInlineScripts: Array<HiddenRunnable>;
     css?: Partial<Record<AppCssItemName, Record<string, ComponentCssProperty>>>;
     subgrids?: Record<string, GridItem[]>;
 };
@@ -90,6 +92,7 @@ export type ConnectingInput = {
     input?: ConnectedInput;
     sourceName?: string;
     hoveredComponent: string | undefined;
+    onConnect?: ((connection: InputConnection) => void) | undefined;
 };
 export interface CancelablePromise<T> extends Promise<T> {
     cancel: () => void;
@@ -141,6 +144,7 @@ export type AppViewerContext = {
             columnApi: any;
         };
         setCode?: (value: string) => void;
+        onDelete?: () => void;
     }>>;
     hoverStore: Writable<string | undefined>;
     allIdsInPath: Writable<string[]>;

package/package/components/apps/utils.d.ts

@@ -2,8 +2,13 @@ import type { Schema } from '../../common';
 import type { AppInput, InputType, ResultAppInput, StaticAppInput } from './inputType';
 import type { Output } from './rx';
 import type { App, ComponentCssProperty, GridItem, HorizontalAlignment, VerticalAlignment } from './types';
+export declare const BG_PREFIX = "bg_";
+export declare function migrateApp(app: App): void;
 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 loadSchema(workspace: string, path: string, runType: 'script' | 'flow' | 'hubscript'): Promise<{
+    schema: Schema;
+    summary: string | undefined;
+}>;
 export declare function schemaToInputsSpec(schema: Schema, defaultUserInput: boolean): Record<string, StaticAppInput>;
 export declare function accessPropertyByPath<T>(object: T, path: string): any;
 export declare function fieldTypeToTsType(inputType: InputType): string;
@@ -21,3 +26,10 @@ 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;
+export declare const TailwindClassPatterns: {
+    bg: RegExp;
+    height: RegExp;
+    width: RegExp;
+};
+export declare function hasTailwindClass(classes: string | undefined, pattern: RegExp): boolean;
+export declare function transformBareBase64IfNecessary(source: string | undefined): string | undefined;

package/package/components/apps/utils.js

@@ -2,6 +2,20 @@ import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { emptySchema } from '../../utils';
 import { twMerge } from 'tailwind-merge';
+export const BG_PREFIX = 'bg_';
+export function migrateApp(app) {
+    app.hiddenInlineScripts.forEach((x) => {
+        if (x.type == undefined) {
+            //@ts-ignore
+            x.type = 'runnableByName';
+        }
+        //TODO: remove after migration is done
+        if (x.doNotRecomputeOnInputChanged != undefined) {
+            x.recomputeOnInputChanged = !x.doNotRecomputeOnInputChanged;
+            x.doNotRecomputeOnInputChanged = undefined;
+        }
+    });
+}
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
         return grid;
@@ -14,14 +28,14 @@ export async function loadSchema(workspace, path, runType) {
             workspace,
             path
         });
-        return script.schema;
+        return { schema: script.schema, summary: script.summary };
     }
     else if (runType === 'flow') {
         const flow = await FlowService.getFlowByPath({
             workspace,
             path
         });
-        return flow.schema;
+        return { schema: flow.schema, summary: flow.summary };
     }
     else {
         const script = await ScriptService.getHubScriptByPath({
@@ -33,7 +47,7 @@ export async function loadSchema(workspace, path, runType) {
             script.schema = emptySchema();
         }
         await inferArgs(script.language, script.content, script.schema);
-        return script.schema;
+        return { schema: script.schema, summary: script.summary };
     }
 }
 export function schemaToInputsSpec(schema, defaultUserInput) {
@@ -126,7 +140,7 @@ export function toStatic(app, staticExporter, summary) {
         }
     });
     newApp.hiddenInlineScripts?.forEach((x, i) => {
-        x.noBackendValue = staticExporter[`bg_` + i]();
+        x.noBackendValue = staticExporter[BG_PREFIX + i]();
     });
     return { app: newApp, summary };
 }
@@ -178,7 +192,7 @@ 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();
+    return text.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
 }
 export function concatCustomCss(appCss, componentCss) {
     if (!componentCss)
@@ -219,3 +233,22 @@ export function tailwindVerticalAlignment(alignment) {
     };
     return classes[alignment];
 }
+export const TailwindClassPatterns = {
+    bg: /bg-(?:[^-\s]+-)?(?:[^-\s]+)/g,
+    height: /(h-[^\s]+)/g,
+    width: /(w-[^\s]+)/g
+};
+export function hasTailwindClass(classes, pattern) {
+    return Boolean(classes?.match(pattern));
+}
+export function transformBareBase64IfNecessary(source) {
+    if (!source) {
+        return source;
+    }
+    if (source.startsWith('data:') || !source.includes(',')) {
+        return source;
+    }
+    else {
+        return `data:application/octet-stream;base64,${source}`;
+    }
+}

package/package/components/common/alert/Alert.svelte

@@ -1,9 +1,12 @@
 <script>import { classNames } from '../../../utils';
 import { faCheckCircle, faInfoCircle, faWarning } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
+import Tooltip from '../../Tooltip.svelte';
 export let type = 'info';
 export let title;
 export let notRounded = false;
+export let tooltip = '';
+export let documentationLink = undefined;
 export let size = 'sm';
 const icons = {
     info: faInfoCircle,
@@ -60,7 +63,9 @@ const classes = {
 					classes[type].titleClass
 				)}
 			>
-				{title}
+				{title}&nbsp;{#if tooltip != '' || documentationLink}
+				<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+			{/if}
 			</span>
 			<div
 				class={classNames(

package/package/components/common/alert/Alert.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         type?: AlertType | undefined;
         title: string;
         notRounded?: boolean | undefined;
+        tooltip?: string | undefined;
+        documentationLink?: string | undefined;
         size?: "xs" | "sm" | undefined;
     };
     events: {