windmill-components 1.60.3 → 1.83.1

package/script_helpers.d.ts

@@ -1,17 +1,18 @@
 import type { Script } from "./gen";
-export declare const PYTHON_INIT_CODE = "import os\nimport wmill\n\n# You can import any package from PyPI, even if the assistant complains\n\n\"\"\"\nUse Cmd/Ctrl + S to autoformat the code. Reset content in the bar to start from a clean template.\nThe client is used to interact with windmill itself through its standard API.\nOne can explore the methods available through autocompletion of `wmill.XXX`.\n\"\"\"\n\ndef main(no_default: str,\n         name = \"Nicolas Bourbaki\",\n         age = 42,\n         obj: dict = {\"even\": \"dicts\"},\n         l: list = [\"or\", \"lists!\"],\n         file_: bytes = bytes(0)):\n    \"\"\"A main function is required for the script to be able to accept arguments.\n    Types are recommended.\"\"\"\n    print(f\"Hello World and a warm welcome especially to {name}\")\n    print(\"and its acolytes..\", age, obj, l, len(file_))\n    # retrieve variables, including secrets by querying the windmill platform.\n    # secret fetching is audited by windmill.\n\n    try:\n      secret = wmill.get_variable(\"f/examples/secret\")\n    except:\n      secret = \"No secret yet at f/examples/secret !\"\n\n    print(f\"The variable at `f/examples/secret`: {secret}\")\n    \n    # Get last state of this script execution by the same trigger/user\n    last_state = wmill.get_state()\n    new_state = {\"foo\": 42} if last_state is None else last_state\n    new_state[\"foo\"] += 1\n    wmill.set_state(new_state)\n\n    # fetch reserved variables as environment variables\n    user = os.environ.get(\"WM_USERNAME\")\n    # the return value is then parsed and can be retrieved by other scripts conveniently\n    return {\"splitted\": name.split(), \"user\": user, \"state\": new_state}\n";
+import PYTHON_INIT_CODE from './init_scripts/python_init_code.py?raw';
+import PYTHON_INIT_CODE_CLEAR from './init_scripts/python_init_code_clear.py?raw';
+import PYTHON_INIT_CODE_TRIGGER from './init_scripts/python_init_code_trigger.py?raw';
+import PYTHON_FAILURE_MODULE_CODE from './init_scripts/python_failure_module.py?raw';
+export { PYTHON_INIT_CODE, PYTHON_INIT_CODE_CLEAR, PYTHON_INIT_CODE_TRIGGER, PYTHON_FAILURE_MODULE_CODE };
 export declare const DENO_INIT_CODE: string;
 export declare const GO_INIT_CODE = "package inner\n\nimport (\n\t\"fmt\"\n\t\"rsc.io/quote\"\n  // wmill \"github.com/windmill-labs/windmill-go-client\"\n)\n\n// the main must return (interface{}, error)\n\nfunc main(x string, nested struct{ Foo string `json:\"foo\"` }) (interface{}, error) {\n\tfmt.Println(\"Hello, World\")\n\tfmt.Println(nested.Foo)\n\tfmt.Println(quote.Opt())\n  // v, _ := wmill.GetVariable(\"f/examples/secret\")\n  return x, nil\n}\n";
 export declare const GO_FAILURE_MODULE_CODE = "package inner\n\nimport (\n\t\"fmt\"\n  \"os\"\n)\n\n// connect the error parameter to 'previous_result.error'\n\nfunc main(message string, name string) (interface{}, error) {\n\tfmt.Println(message)\n\tfmt.Println(name)\n\tfmt.Println(\"flow id that failed\", os.Getenv(\"WM_FLOW_JOB_ID\"))\n  return message, nil\n}\n";
 export declare const DENO_INIT_CODE_CLEAR: string;
 export declare const DENO_FAILURE_MODULE_CODE = "// flow is considered recovered and a success unless an exception is thrown\n\nexport async function main(message: string, name: string) {\n  const flow_id = Deno.env.get(\"WM_FLOW_JOB_ID\")\n  console.log(\"message\", message)\n  console.log(\"name\",name)\n  return { message, flow_id }\n}\n";
-export declare const PYTHON_INIT_CODE_CLEAR = "#import wmill\n\ndef main(x: str):\n  return x\n";
-export declare const PYTHON_FAILURE_MODULE_CODE = "import os\n# flow is considered recovered and a success unless an exception is raised\n\ndef main(message: str, name: str):\n  flow_id = os.environ.get(\"WM_FLOW_JOB_ID\")\n  print(\"message\", message)\n  print(\"name\", name)\n  return message, flow_id\n";
 export declare const POSTGRES_INIT_CODE: string;
 export declare const MYSQL_INIT_CODE: string;
-export declare const BASH_INIT_CODE = "\n# arguments of the form X=\"$I\" are parsed as parameters X of type string\nmsg=\"$1\"\n\n# the last line of the stdout is the return value\necho \"Hello $msg\"\n";
+export declare const BASH_INIT_CODE = "# arguments of the form X=\"$I\" are parsed as parameters X of type string\nmsg=\"$1\"\ndflt=\"${2:-default value}\"\n\n# the last line of the stdout is the return value\necho \"Hello $msg\"\n";
 export declare const DENO_INIT_CODE_TRIGGER: string;
-export declare const PYTHON_INIT_CODE_TRIGGER = "import wmill\n\ndef main():\n    # A common trigger script would follow this pattern:\n    # 1. Get the last saved state\n    # const state = wnmill.get_state()\n    # 2. Get the actual state from the external service\n    # const newState = ...\n    # 3. Compare the two states and update the internal state\n    # wmill.setState(newState)\n    # 4. Return the new rows\n    # return range from (state to newState)\n    return [1, 2, 3]\n";
 export declare const GO_INIT_CODE_TRIGGER = "package inner\n\nimport (\n\twmill \"github.com/windmill-labs/windmill-go-client\"\n)\n\nfunc main() (interface{}, error) {\n\n\t// A common trigger script would follow this pattern:\n\t// 1. Get the last saved state\n\tstate, _ := wmill.GetState()\n\t// 2. Get the actual state from the external service\n\t// newState := ...\n\t// 3. Compare the two states and update the internal state\n\twmill.SetState(4)\n\t// 4. Return the new rows\n\n\treturn state, nil\n\n\t// In subsequent scripts, you may refer to each row/value returned by the trigger script using\n\t// 'flow_input.iter.value'\n}\n";
 export declare const DENO_INIT_CODE_APPROVAL = "import * as wmill from \"https://deno.land/x/windmill@v1.41.0/mod.ts\"\n\nexport async function main(approver?: string) {\n  return wmill.getResumeEndpoints(approver)\n}";
 export declare function isInitialCode(content: string): boolean;

package/script_helpers.js

@@ -1,45 +1,8 @@
-export const PYTHON_INIT_CODE = `import os
-import wmill
-
-# You can import any package from PyPI, even if the assistant complains
-
-"""
-Use Cmd/Ctrl + S to autoformat the code. Reset content in the bar to start from a clean template.
-The client is used to interact with windmill itself through its standard API.
-One can explore the methods available through autocompletion of \`wmill.XXX\`.
-"""
-
-def main(no_default: str,
-         name = "Nicolas Bourbaki",
-         age = 42,
-         obj: dict = {"even": "dicts"},
-         l: list = ["or", "lists!"],
-         file_: bytes = bytes(0)):
-    """A main function is required for the script to be able to accept arguments.
-    Types are recommended."""
-    print(f"Hello World and a warm welcome especially to {name}")
-    print("and its acolytes..", age, obj, l, len(file_))
-    # retrieve variables, including secrets by querying the windmill platform.
-    # secret fetching is audited by windmill.
-
-    try:
-      secret = wmill.get_variable("f/examples/secret")
-    except:
-      secret = "No secret yet at f/examples/secret !"
-
-    print(f"The variable at \`f/examples/secret\`: {secret}")
-    
-    # Get last state of this script execution by the same trigger/user
-    last_state = wmill.get_state()
-    new_state = {"foo": 42} if last_state is None else last_state
-    new_state["foo"] += 1
-    wmill.set_state(new_state)
-
-    # fetch reserved variables as environment variables
-    user = os.environ.get("WM_USERNAME")
-    # the return value is then parsed and can be retrieved by other scripts conveniently
-    return {"splitted": name.split(), "user": user, "state": new_state}
-`;
+import PYTHON_INIT_CODE from './init_scripts/python_init_code.py?raw';
+import PYTHON_INIT_CODE_CLEAR from './init_scripts/python_init_code_clear.py?raw';
+import PYTHON_INIT_CODE_TRIGGER from './init_scripts/python_init_code_trigger.py?raw';
+import PYTHON_FAILURE_MODULE_CODE from './init_scripts/python_failure_module.py?raw';
+export { PYTHON_INIT_CODE, PYTHON_INIT_CODE_CLEAR, PYTHON_INIT_CODE_TRIGGER, PYTHON_FAILURE_MODULE_CODE };
 export const DENO_INIT_CODE = `// Ctrl+. to cache dependencies on imports hover, Ctrl+S to format.
 
 // import { toWords } from "npm:number-to-words@1"
@@ -105,20 +68,6 @@ export async function main(message: string, name: string) {
   return { message, flow_id }
 }
 `;
-export const PYTHON_INIT_CODE_CLEAR = `#import wmill
-
-def main(x: str):
-  return x
-`;
-export const PYTHON_FAILURE_MODULE_CODE = `import os
-# flow is considered recovered and a success unless an exception is raised
-
-def main(message: str, name: str):
-  flow_id = os.environ.get("WM_FLOW_JOB_ID")
-  print("message", message)
-  print("name", name)
-  return message, flow_id
-`;
 export const POSTGRES_INIT_CODE = `import {
   pgSql,
   type Resource,
@@ -138,7 +87,7 @@ export async function main(
 export const MYSQL_INIT_CODE = `import {
   mySql,
   type Resource
-} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mysql.ts";
 
 // MySQL parameterized statement. No SQL injection is possible.
 export async function main(
@@ -151,9 +100,9 @@ export async function main(
   )\`INSERT INTO demo VALUES (\${key}, \${value})\`;
   return query.rows;
 }`;
-export const BASH_INIT_CODE = `
-# arguments of the form X="$I" are parsed as parameters X of type string
+export const BASH_INIT_CODE = `# arguments of the form X="$I" are parsed as parameters X of type string
 msg="$1"
+dflt="\${2:-default value}"
 
 # the last line of the stdout is the return value
 echo "Hello $msg"
@@ -178,20 +127,6 @@ export async function main() {
   // 'flow_input.iter.value'
 }
 `;
-export const PYTHON_INIT_CODE_TRIGGER = `import wmill
-
-def main():
-    # A common trigger script would follow this pattern:
-    # 1. Get the last saved state
-    # const state = wnmill.get_state()
-    # 2. Get the actual state from the external service
-    # const newState = ...
-    # 3. Compare the two states and update the internal state
-    # wmill.setState(newState)
-    # 4. Return the new rows
-    # return range from (state to newState)
-    return [1, 2, 3]
-`;
 export const GO_INIT_CODE_TRIGGER = `package inner
 
 import (

package/scripts.d.ts

@@ -1,3 +1,3 @@
 import type { Schema } from './common';
-export declare function loadSchema(path: string): Promise<Schema>;
+export declare function loadSchema(path: string, hash?: string): Promise<Schema>;
 export declare function loadSchemaFlow(path: string): Promise<Schema>;

package/scripts.js

@@ -3,7 +3,7 @@ import { FlowService, ScriptService } from './gen';
 import { inferArgs } from './infer';
 import { workspaceStore } from './stores';
 import { emptySchema } from './utils';
-export async function loadSchema(path) {
+export async function loadSchema(path, hash) {
     if (path.startsWith('hub/')) {
         const { content, language, schema } = await ScriptService.getHubScriptByPath({ path });
         if (language == 'deno') {
@@ -15,6 +15,13 @@ export async function loadSchema(path) {
             return schema ?? emptySchema();
         }
     }
+    else if (hash) {
+        const script = await ScriptService.getScriptByHash({
+            workspace: get(workspaceStore),
+            hash
+        });
+        return script.schema;
+    }
     else {
         const script = await ScriptService.getScriptByPath({
             workspace: get(workspaceStore),

package/stores.d.ts

@@ -1,6 +1,6 @@
 import { type Readable } from "svelte/store";
 import type { UserWorkspaceList } from "./gen/models/UserWorkspaceList.js";
-import type { TokenResponse } from "./gen";
+import { type TokenResponse } from "./gen";
 export interface UserExt {
     email: string;
     username: string;
@@ -16,6 +16,10 @@ export declare const usageStore: import("svelte/store").Writable<number>;
 export declare const oauthStore: import("svelte/store").Writable<TokenResponse | undefined>;
 export declare const userStore: import("svelte/store").Writable<UserExt | undefined>;
 export declare const workspaceStore: import("svelte/store").Writable<string | undefined>;
+export declare const premiumStore: import("svelte/store").Writable<{
+    premium: boolean;
+    usage?: number | undefined;
+}>;
 export declare const starStore: import("svelte/store").Writable<number>;
 export declare const usersWorkspaceStore: import("svelte/store").Writable<UserWorkspaceList | undefined>;
 export declare const superadmin: import("svelte/store").Writable<false | String | undefined>;

package/stores.js

@@ -1,11 +1,14 @@
 import { browser } from "$app/environment";
 import { derived, writable } from "svelte/store";
 import { getUserExt } from "./user";
+import { WorkspaceService } from "./gen";
+import { isCloudHosted } from "./utils";
 let persistedWorkspace = browser && localStorage.getItem("workspace");
 export const usageStore = writable(0);
 export const oauthStore = writable(undefined);
 export const userStore = writable(undefined);
 export const workspaceStore = writable(persistedWorkspace ? String(persistedWorkspace) : undefined);
+export const premiumStore = writable({ premium: false });
 export const starStore = writable(1);
 export const usersWorkspaceStore = writable(undefined);
 export const superadmin = writable(undefined);
@@ -32,7 +35,11 @@ if (browser) {
             catch (e) {
                 console.error('Could not persist workspace to local storage', e);
             }
-            userStore.set(await getUserExt(workspace));
+            const user = await getUserExt(workspace);
+            userStore.set(user);
+            if (isCloudHosted() && user?.is_admin) {
+                premiumStore.set((await WorkspaceService.getPremiumInfo({ workspace })));
+            }
         }
         else {
             userStore.set(undefined);

package/user.d.ts

@@ -1,3 +1,3 @@
-import { type UserExt } from './stores.js';
+import { type UserExt } from "./stores.js";
 export declare function refreshSuperadmin(): Promise<void>;
 export declare function getUserExt(workspace: string): Promise<UserExt | undefined>;

package/user.js

@@ -1,16 +1,22 @@
-import { get } from 'svelte/store';
-import { UserService } from './gen';
-import { superadmin } from './stores.js';
+import { get } from "svelte/store";
+import { UserService } from "./gen";
+import { superadmin } from "./stores.js";
+import { goto } from "$app/navigation";
 export async function refreshSuperadmin() {
     if (get(superadmin) == undefined) {
-        UserService.globalWhoami().then((x) => {
-            if (x.super_admin) {
-                superadmin.set(x.email);
+        try {
+            const me = await UserService.globalWhoami();
+            if (me.super_admin) {
+                superadmin.set(me.email);
             }
             else {
                 superadmin.set(false);
             }
-        });
+        }
+        catch {
+            superadmin.set(false);
+            goto("/user/logout");
+        }
     }
 }
 export async function getUserExt(workspace) {
@@ -26,6 +32,6 @@ function mapUserToUserExt(user) {
     return {
         ...user,
         groups: user.groups,
-        pgroups: user.groups.map((x) => `g/${x}`)
+        pgroups: user.groups.map((x) => `g/${x}`),
     };
 }

package/utils.d.ts

@@ -6,7 +6,7 @@ export declare function isToday(someDate: Date): boolean;
 export declare function daysAgo(someDate: Date): number;
 export declare function secondsAgo(date: Date): number;
 export declare function displayDaysAgo(dateString: string): string;
-export declare function displayDate(dateString: string | undefined, displaySecond?: boolean): string;
+export declare function displayDate(dateString: string | Date | undefined, displaySecond?: boolean): string;
 export declare function msToSec(ms: number | undefined): string;
 export declare function getToday(): Date;
 export declare function sendUserToast(message: string, error?: boolean): void;
@@ -16,7 +16,6 @@ export declare function validatePassword(password: string): boolean;
 export declare function clickOutside(node: Node): {
     destroy(): void;
 };
-export type DropdownType = 'action' | 'delete';
 export interface DropdownItem {
     displayName: string;
     eventName?: string;
@@ -24,12 +23,12 @@ export interface DropdownItem {
     href?: string;
     separatorTop?: boolean;
     separatorBottom?: boolean;
-    type?: DropdownType;
+    type?: 'action' | 'delete';
     disabled?: boolean;
     icon?: any | undefined;
 }
 export declare function emptySchema(): {
-    $schema: string;
+    $schema: string | undefined;
     properties: {};
     required: never[];
     type: string;
@@ -62,7 +61,10 @@ export declare function encodeState(state: any): string;
 export declare function decodeState(query: string): any;
 export declare function decodeArgs(queryArgs: string | undefined): any;
 export declare function setQuery(url: URL, key: string, value: string): Promise<void>;
-export declare function setQueryWithoutLoad(url: URL, key: string, value: string): void;
+export declare function setQueryWithoutLoad(url: URL, args: {
+    key: string;
+    value: string | null | undefined;
+}[], bounceTime?: number): void;
 export declare function groupBy<T>(scripts: T[], toGroup: (t: T) => string, dflts?: string[]): [string, T[]][];
 export declare function removeMarkdown(text: string): string;
 export declare function truncate(s: string, n: number, suffix?: string): string;
@@ -80,6 +82,7 @@ export declare function getScriptByPath(path: string): Promise<{
     schema: any;
     description: string;
 }>;
+export declare function getLatestHashForScript(path: string): Promise<string>;
 export declare function loadHubScripts(): Promise<void>;
 export declare function loadHubFlows(): Promise<{
     id: number;
@@ -109,3 +112,8 @@ export declare function capitalize(word: string): string;
 export declare function addWhitespaceBeforeCapitals(word?: string): string;
 export declare function isCloudHosted(): boolean;
 export declare function isObject(obj: any): boolean;
+export declare function debounce(func: (...args: any[]) => any, wait: number): (...args: any[]) => void;
+export declare function throttle<T>(func: (...args: any[]) => T, wait: number): (...args: any[]) => void;
+export declare function isMac(): boolean;
+export declare function getModifierKey(): string;
+export declare function isValidHexColor(color: string): boolean;

package/utils.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { goto } from '$app/navigation';
-import { AppService, FlowService, FolderService, Script, ScriptService, UserService } from './gen';
+import { AppService, FlowService, Script, ScriptService, UserService } from './gen';
 import { toast } from '@zerodevx/svelte-toast';
 import { hubScripts, workspaceStore } from './stores';
 import { page } from '$app/stores';
@@ -24,7 +24,7 @@ export function daysAgo(someDate) {
     return Math.floor((today.getTime() - someDate.getTime()) / 86400000);
 }
 export function secondsAgo(date) {
-    return Math.floor((new Date().getTime() - date.getTime()) / 1000);
+    return Math.max(0, Math.floor((new Date().getTime() - date.getTime()) / 1000));
 }
 export function displayDaysAgo(dateString) {
     const date = new Date(dateString);
@@ -57,11 +57,11 @@ export function displayDate(dateString, displaySecond = false) {
         return '';
     }
     else {
-        return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()} at ${date.toLocaleTimeString([], {
+        return `${date.toLocaleTimeString([], {
             hour: '2-digit',
             minute: '2-digit',
             second: displaySecond ? '2-digit' : undefined
-        })}`;
+        })} ${date.getDate()}/${date.getMonth() + 1}`;
     }
 }
 export function msToSec(ms) {
@@ -147,7 +147,7 @@ export function removeItemAll(arr, value) {
     return arr;
 }
 export async function isOwner(path, user, workspace) {
-    if (user.is_admin && ((workspace == 'starter' || workspace == 'admin') && user.is_super_admin)) {
+    if (user.is_admin && (workspace == 'starter' || workspace == 'admin') && user.is_super_admin) {
         return true;
     }
     else if (workspace == 'starter' || workspace == 'admin') {
@@ -208,8 +208,12 @@ export function removeKeysWithEmptyValues(obj) {
 export function allTrue(dict) {
     return Object.values(dict).every(Boolean);
 }
+function subtractSeconds(date, seconds) {
+    date.setSeconds(date.getSeconds() - seconds);
+    return date;
+}
 export function forLater(scheduledString) {
-    return new Date() < new Date(scheduledString);
+    return new Date() < subtractSeconds(new Date(scheduledString), 5);
 }
 export function elapsedSinceSecs(date) {
     return Math.round((new Date().getTime() - new Date(date).getTime()) / 1000);
@@ -240,18 +244,25 @@ export async function setQuery(url, key, value) {
     await goto(`?${url.searchParams.toString()}`);
 }
 let debounced = undefined;
-export function setQueryWithoutLoad(url, key, value) {
+export function setQueryWithoutLoad(url, args, bounceTime) {
     debounced && clearTimeout(debounced);
     debounced = setTimeout(() => {
         const nurl = new URL(url.toString());
-        nurl.searchParams.set(key, value);
+        for (const { key, value } of args) {
+            if (value) {
+                nurl.searchParams.set(key, value);
+            }
+            else {
+                nurl.searchParams.delete(key);
+            }
+        }
         try {
             history.replaceState(history.state, '', nurl.toString());
         }
         catch (e) {
             console.error(e);
         }
-    }, 200);
+    }, bounceTime ?? 200);
 }
 export function groupBy(scripts, toGroup, dflts = []) {
     let r = {};
@@ -390,9 +401,6 @@ export function setInputCat(type, format, itemsType, enum_, contentEncoding) {
     else if (type == 'string' && contentEncoding == 'base64') {
         return 'base64';
     }
-    else if (type == 'string' && format?.startsWith('resource')) {
-        return 'resource-string';
-    }
     else {
         return 'string';
     }
@@ -402,7 +410,7 @@ export function scriptPathToHref(path) {
         return 'https://hub.windmill.dev/from_version/' + path.substring(4);
     }
     else {
-        return `/scripts/get/${path}`;
+        return `/scripts/get/${path}?workspace_id=${get(workspaceStore)}`;
     }
 }
 export async function getScriptByPath(path) {
@@ -428,6 +436,13 @@ export async function getScriptByPath(path) {
         };
     }
 }
+export async function getLatestHashForScript(path) {
+    const script = await ScriptService.getScriptByPath({
+        workspace: get(workspaceStore),
+        path: path ?? ''
+    });
+    return script.hash;
+}
 export async function loadHubScripts() {
     try {
         const scripts = (await ScriptService.listHubScripts()).asks ?? [];
@@ -560,8 +575,38 @@ export function addWhitespaceBeforeCapitals(word) {
     return word.replace(/([A-Z])/g, ' $1').trim();
 }
 export function isCloudHosted() {
-    return get(page).url.hostname == 'app.windmill.dev';
+    return get(page)?.url?.hostname == 'app.windmill.dev';
 }
 export function isObject(obj) {
     return typeof obj === 'object';
 }
+export function debounce(func, wait) {
+    let timeout;
+    return function (...args) {
+        // @ts-ignore
+        const context = this;
+        clearTimeout(timeout);
+        timeout = setTimeout(() => func.apply(context, args), wait);
+    };
+}
+export function throttle(func, wait) {
+    let timeout;
+    return function (...args) {
+        if (!timeout) {
+            timeout = setTimeout(() => {
+                timeout = null;
+                // @ts-ignore
+                func.apply(this, args);
+            }, wait);
+        }
+    };
+}
+export function isMac() {
+    return navigator.userAgent.indexOf('Mac OS X') !== -1;
+}
+export function getModifierKey() {
+    return isMac() ? '⌘' : 'CTRL';
+}
+export function isValidHexColor(color) {
+    return /^#(([A-F0-9]{2}){3,4}|[A-F0-9]{3})$/i.test(color);
+}

package/components/apps/components/DisplayComponent.svelte

@@ -1,16 +0,0 @@
-<script>import DisplayResult from '../../DisplayResult.svelte';
-import RunnableWrapper from './helpers/RunnableWrapper.svelte';
-export let id;
-export let componentInput;
-let result = undefined;
-export const staticOutputs = ['result', 'loading'];
-</script>
-
-<RunnableWrapper flexWrap bind:result bind:componentInput {id}>
-	<div class="w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm">
-		Results
-	</div>
-	<div class="p-2">
-		<DisplayResult {result} />
-	</div>
-</RunnableWrapper>

package/components/apps/components/DisplayComponent.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../inputType';
-declare const __propDef: {
-    props: {
-        id: string;
-        componentInput: AppInput | undefined;
-        staticOutputs?: string[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DisplayComponentProps = typeof __propDef.props;
-export type DisplayComponentEvents = typeof __propDef.events;
-export type DisplayComponentSlots = typeof __propDef.slots;
-export default class DisplayComponent extends SvelteComponentTyped<DisplayComponentProps, DisplayComponentEvents, DisplayComponentSlots> {
-    get staticOutputs(): string[];
-}
-export {};

package/components/apps/components/dataDisplay/AppHtml.svelte

@@ -1,35 +0,0 @@
-<script>import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-export let id;
-export let componentInput;
-export let horizontalAlignment = 'left';
-export let verticalAlignment = undefined;
-export let configuration;
-export const staticOutputs = ['result', 'loading'];
-let result = undefined;
-let h = undefined;
-let w = undefined;
-</script>
-
-<div
-	on:pointerdown={(e) => {
-		e?.preventDefault()
-	}}
-	class="h-full w-full"
-	bind:clientHeight={h}
-	bind:clientWidth={w}
->
-	<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
-		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-			{#key result}
-				<iframe
-					frameborder="0"
-					style="height: {h}px; width: {w}px"
-					class="p-0"
-					title="sandbox"
-					srcdoc={result ? '<scr' + `ipt src="/tailwind.css"></script>` + result : 'No html'}
-				/>
-			{/key}
-		</AlignWrapper>
-	</RunnableWrapper>
-</div>

package/components/apps/components/dataDisplay/AppText.svelte

@@ -1,86 +0,0 @@
-<script>import { Clipboard } from 'lucide-svelte';
-import { copyToClipboard } from '../../../../utils';
-import Button from '../../../common/button/Button.svelte';
-import Popover from '../../../Popover.svelte';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-export let id;
-export let componentInput;
-export let horizontalAlignment = 'left';
-export let verticalAlignment = undefined;
-export let configuration;
-export const staticOutputs = ['result', 'loading'];
-let extraStyle = undefined;
-let result = undefined;
-let style = undefined;
-let copyButton;
-function getComponent() {
-    switch (style) {
-        case 'Title':
-            return 'h1';
-        case 'Subtitle':
-            return 'h3';
-        case 'Body':
-            return 'p';
-        case 'Caption':
-            return 'p';
-        case 'Label':
-            return 'label';
-        default:
-            return 'p';
-    }
-}
-function getClasses() {
-    switch (style) {
-        case 'Caption':
-            return 'text-sm italic text-gray-500';
-        case 'Label':
-            return 'font-semibold text-sm';
-        default:
-            return '';
-    }
-}
-let component = 'p';
-let classes = '';
-$: style && (component = getComponent());
-$: style && (classes = getClasses());
-</script>
-
-<InputValue {id} input={configuration.extraStyle} bind:value={extraStyle} />
-<InputValue {id} input={configuration.style} bind:value={style} />
-<InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
-
-<RunnableWrapper flexWrap bind:componentInput {id} bind:result>
-	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		{#if !result || result === ''}
-			<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
-				No text
-			</div>
-		{:else}
-			<div class="flex flex-wrap gap-2">
-				<svelte:element
-					this={component}
-					class="whitespace-pre-wrap {classes}"
-					style={extraStyle}
-				>
-					{String(result)}
-				</svelte:element>
-				{#if copyButton && result}
-					<Popover notClickable>
-						<Button
-							size="xs"
-							btnClasses="!px-2"
-							on:click={() => copyToClipboard(result)}
-						>
-							<Clipboard size={14} strokeWidth={2} />
-						</Button>
-						<svelte:fragment slot="text">
-							Copy to clipboard
-						</svelte:fragment>
-					</Popover>
-				{/if}
-			</div>
-		{/if}
-	</AlignWrapper>
-</RunnableWrapper>