windmill-components 1.558.4 → 1.596.0

package/package/components/apps/editor/AppEditorHeader.svelte

@@ -7,7 +7,7 @@ import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
 import { AlignHorizontalSpaceAround, BellOff, Bug, DiffIcon, Expand, FileJson, FileUp, FormInput, History, Laptop2, Save, Smartphone, FileClock, Sun, Moon, SunMoon, Zap, Globe } from 'lucide-svelte';
 import { getContext, untrack } from 'svelte';
 import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
-import { BG_PREFIX, allItems, toStatic } from '../utils';
+import { toStatic } from '../utils';
 import AppExportButton from './AppExportButton.svelte';
 import AppInputs from './AppInputs.svelte';
 import PreviewToggle from './PreviewToggle.svelte';
@@ -20,42 +20,16 @@ import { secondaryMenuLeftStore, secondaryMenuRightStore } from './settingsPanel
 import Dropdown from '../../DropdownV2.svelte';
 import AppEditorTutorial from './AppEditorTutorial.svelte';
 import AppReportsDrawer from './AppReportsDrawer.svelte';
-import { getPrimaryKeys } from '../components/display/dbtable/utils';
 import DebugPanel from './contextPanel/DebugPanel.svelte';
-import { getCountInput } from '../components/display/dbtable/queries/count';
-import { getSelectInput } from '../components/display/dbtable/queries/select';
-import { getInsertInput } from '../components/display/dbtable/queries/insert';
-import { getUpdateInput } from '../components/display/dbtable/queries/update';
-import { getDeleteInput } from '../components/display/dbtable/queries/delete';
-import { collectOneOfFields } from './appUtils';
 import Summary from '../../Summary.svelte';
 import HideButton from './settingsPanel/HideButton.svelte';
 import DeployOverrideConfirmationModal from '../../common/confirmationModal/DeployOverrideConfirmationModal.svelte';
-import { computeS3FileInputPolicy, computeWorkspaceS3FileInputPolicy, computeS3ImageViewerPolicy } from './appUtilsS3';
 import AppJobsDrawer from './AppJobsDrawer.svelte';
-import { collectStaticFields } from './commonAppUtils';
 import LazyModePanel from './contextPanel/LazyModePanel.svelte';
-import { Sha256 } from '@aws-crypto/sha256-js';
 import AppEditorHeaderDeploy from './AppEditorHeaderDeploy.svelte';
 import AppEditorHeaderDeployInitialDraft from './AppEditorHeaderDeployInitialDraft.svelte';
 import { computeSecretUrl } from './appDeploy.svelte';
-async function hash(message) {
-    try {
-        const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
-        const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // hash the message
-        const hashArray = Array.from(new Uint8Array(hashBuffer)); // convert buffer to byte array
-        const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
-        return hashHex;
-    }
-    catch {
-        //subtle not available, trying pure js
-        const hash = new Sha256();
-        hash.update(message ?? '');
-        const result = Array.from(await hash.digest());
-        const hex = result.map((b) => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
-        return hex;
-    }
-}
+import { updatePolicy } from './appPolicy';
 let { policy = $bindable(), fromHub = false, diffDrawer = undefined, savedApp = $bindable(undefined), version = $bindable(undefined), leftPanelHidden = false, rightPanelHidden = false, bottomPanelHidden = false, newApp, newPath = '', unsavedConfirmationModal, onSavedNewAppPath, onShowLeftPanel, onShowRightPanel, onShowBottomPanel, onHideLeftPanel, onHideRightPanel, onHideBottomPanel } = $props();
 let newEditedPath = $state('');
 let deployedValue = $state(undefined); // Value to diff against
@@ -86,162 +60,8 @@ function closeSaveDrawer() {
 function closeDraftDrawer() {
     draftDrawerOpen = false;
 }
-async function computeTriggerables() {
-    const items = allItems($app.grid, $app.subgrids);
-    const allTriggers = (await Promise.all(items
-        .flatMap((x) => {
-        let c = x.data;
-        let r = [
-            { input: c.componentInput, id: x.id }
-        ];
-        if (c.type === 'tablecomponent') {
-            r.push(...c.actionButtons.map((x) => ({ input: x.componentInput, id: x.id })));
-        }
-        if ((c.type === 'aggridcomponent' ||
-            c.type === 'aggridcomponentee' ||
-            c.type === 'dbexplorercomponent' ||
-            c.type === 'aggridinfinitecomponent' ||
-            c.type === 'aggridinfinitecomponentee') &&
-            Array.isArray(c.actions)) {
-            r.push(...c.actions.map((x) => ({ input: x.componentInput, id: x.id })));
-        }
-        if (c.type === 'menucomponent') {
-            r.push(...c.menuItems.map((x) => ({ input: x.componentInput, id: x.id })));
-        }
-        if (c.type === 'dbexplorercomponent') {
-            let nr = [];
-            let config = c.configuration;
-            const dbType = config?.type?.selected;
-            let pg = config?.type?.configuration?.[dbType];
-            if (pg && dbType) {
-                const { table, resource, ducklake } = pg;
-                const tableValue = table.value;
-                const dbPath = resource?.value.split('$res:')[1] ??
-                    ducklake?.value?.split('ducklake://')[1];
-                const columnDefs = c.configuration.columnDefs.value;
-                const whereClause = c.configuration.whereClause.value;
-                if (tableValue && dbPath && columnDefs) {
-                    let dbInput = ducklake
-                        ? { type: 'ducklake', ducklake: dbPath }
-                        : { type: 'database', resourcePath: dbPath, resourceType: dbType };
-                    r.push({
-                        input: getSelectInput(dbInput, tableValue, columnDefs, whereClause),
-                        id: x.id
-                    });
-                    r.push({
-                        input: getCountInput(dbInput, tableValue, columnDefs, whereClause),
-                        id: x.id + '_count'
-                    });
-                    r.push({
-                        input: getInsertInput(dbInput, tableValue, columnDefs),
-                        id: x.id + '_insert'
-                    });
-                    let primaryColumns = getPrimaryKeys(columnDefs);
-                    let columns = columnDefs?.filter((x) => primaryColumns.includes(x.field));
-                    r.push({
-                        input: getDeleteInput(dbInput, tableValue, columns),
-                        id: x.id + '_delete'
-                    });
-                    columnDefs
-                        .filter((col) => col.editable || config.allEditable.value)
-                        .forEach((column) => {
-                        r.push({
-                            input: getUpdateInput(dbInput, tableValue, column, columns),
-                            id: x.id + '_update'
-                        });
-                    });
-                }
-            }
-            r.push(...nr);
-        }
-        const processed = r
-            .filter((x) => x.input)
-            .map(async (o) => {
-            if (o.input?.type == 'runnable') {
-                return await processRunnable(o.id, o.input.runnable, o.input.fields);
-            }
-        });
-        return processed;
-    })
-        .concat(Object.values($app.hiddenInlineScripts ?? {}).map(async (v, i) => {
-        return await processRunnable(BG_PREFIX + i, v, v.fields);
-    }))));
-    delete policy.triggerables;
-    const ntriggerables = Object.fromEntries(allTriggers.filter(Boolean));
-    policy.triggerables_v2 = ntriggerables;
-    const s3_inputs = items
-        .filter((x) => x.data.type === 's3fileinputcomponent')
-        .map((x) => {
-        const c = x.data;
-        const config = c.configuration;
-        return computeS3FileInputPolicy(config?.type?.configuration?.s3, $app);
-    })
-        .filter(Boolean);
-    if (items.findIndex((x) => {
-        const c = x.data;
-        if (c.type === 'schemaformcomponent' ||
-            c.type === 'formbuttoncomponent' ||
-            c.type === 'formcomponent') {
-            const props = c.type === 'schemaformcomponent'
-                ? c.componentInput?.value?.properties
-                : c.componentInput?.runnable?.type === 'runnableByName'
-                    ? c.componentInput?.runnable?.inlineScript?.schema?.properties
-                    : c.componentInput?.runnable?.schema?.properties;
-            return (Object.values(props ?? {}).findIndex((p) => (p?.type === 'object' && p?.format === 'resource-s3_object') ||
-                (p?.type === 'array' &&
-                    (p?.items?.resourceType === 's3object' || p?.items?.resourceType === 's3_object'))) !== -1);
-        }
-        else {
-            return false;
-        }
-    }) !== -1) {
-        s3_inputs.push(computeWorkspaceS3FileInputPolicy());
-    }
-    policy.s3_inputs = s3_inputs;
-    const s3FileKeys = items
-        .filter((x) => x.data.type === 'imagecomponent')
-        .map((x) => {
-        const c = x.data;
-        const config = c.configuration;
-        return computeS3ImageViewerPolicy(config);
-    })
-        .filter(Boolean);
-    policy.allowed_s3_keys = s3FileKeys;
-}
-async function processRunnable(id, runnable, fields) {
-    const staticInputs = collectStaticFields(fields);
-    const oneOfInputs = collectOneOfFields(fields, $app);
-    const allowUserResources = Object.entries(fields)
-        .map(([k, v]) => {
-        return v['allowUserResources'] ? k : undefined;
-    })
-        .filter(Boolean);
-    if (runnable?.type == 'runnableByName') {
-        let hex = await hash(runnable.inlineScript?.content);
-        console.log('hex', hex, id);
-        return [
-            `${id}:rawscript/${hex}`,
-            {
-                static_inputs: staticInputs,
-                one_of_inputs: oneOfInputs,
-                allow_user_resources: allowUserResources
-            }
-        ];
-    }
-    else if (runnable?.type == 'runnableByPath') {
-        let prefix = runnable.runType !== 'hubscript' ? runnable.runType : 'script';
-        return [
-            `${id}:${prefix}/${runnable.path}`,
-            {
-                static_inputs: staticInputs,
-                one_of_inputs: oneOfInputs,
-                allow_user_resources: allowUserResources
-            }
-        ];
-    }
-}
 async function createApp(path) {
-    await computeTriggerables();
+    policy = await updatePolicy($app, policy);
     try {
         await AppService.createApp({
             workspace: $workspaceStore,
@@ -328,7 +148,7 @@ async function syncWithDeployed() {
     });
 }
 async function updateApp(npath) {
-    await computeTriggerables();
+    policy = await updatePolicy($app, policy);
     await AppService.updateApp({
         workspace: $workspaceStore,
         path: $appPath,
@@ -368,7 +188,7 @@ async function updateApp(npath) {
     }
 }
 async function setPublishState() {
-    await computeTriggerables();
+    policy = await updatePolicy($app, policy);
     await AppService.updateApp({
         workspace: $workspaceStore,
         path: $appPath,
@@ -388,7 +208,7 @@ async function save() {
     return;
 }
 async function saveInitialDraft() {
-    await computeTriggerables();
+    policy = await updatePolicy($app, policy);
     try {
         await AppService.createApp({
             workspace: $workspaceStore,
@@ -467,7 +287,7 @@ async function saveDraft(forceSave = false) {
     }
     loading.saveDraft = true;
     try {
-        await computeTriggerables();
+        policy = await updatePolicy($app, policy);
         let path = $appPath;
         if (savedApp.draft_only) {
             await AppService.deleteApp({
@@ -707,8 +527,8 @@ let moreItems = $derived([
     }
 ]);
 let appEditorTutorial = $state(undefined);
-export function toggleTutorial() {
-    appEditorTutorial?.toggleTutorial();
+export function runTutorialById(id, options) {
+    appEditorTutorial?.runTutorialById(id, options);
 }
 let appReportingDrawerOpen = $state(false);
 export function openTroubleshootPanel() {
@@ -725,6 +545,7 @@ function setTheme(newDarkMode) {
         document.documentElement.classList.remove('dark');
     }
     $darkMode = newDarkMode ?? globalDarkMode;
+    $app.darkMode = newDarkMode;
 }
 let priorDarkMode = document.documentElement.classList.contains('dark');
 setTheme($app?.darkMode);
@@ -819,8 +640,7 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 		{#snippet actions()}
 			<div class="flex flex-row gap-4">
 				<Button
-					variant="border"
-					color="light"
+					variant="accent"
 					disabled={!savedApp || savedApp.draft_only}
 					on:click={async () => {
 						if (!savedApp) {
@@ -861,6 +681,7 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 					</div>
 				</Button>
 				<Button
+					variant="accent"
 					startIcon={{ icon: Save }}
 					disabled={pathError != '' || customPathError != ''}
 					on:click={() => {
@@ -944,7 +765,6 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 
 			{#if $app}
 				<ToggleButtonGroup
-					class="h-[30px]"
 					selected={$app.fullscreen ? 'true' : 'false'}
 					on:selected={({ detail }) => {
 						$app.fullscreen = detail === 'true'
@@ -953,24 +773,25 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 					{#snippet children({ item })}
 						<ToggleButton
 							icon={AlignHorizontalSpaceAround}
+							iconOnly
 							value={'false'}
 							tooltip="The max width is 1168px and the content stay centered instead of taking the full page width"
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						<ToggleButton
 							tooltip="The width is of the app if the full width of its container"
 							icon={Expand}
+							iconOnly
 							value={'true'}
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 					{/snippet}
 				</ToggleButtonGroup>
 			{/if}
 			{#if $app}
 				<ToggleButtonGroup
-					class="h-[30px]"
 					on:selected={({ detail }) => {
 						const theme = detail === 'dark' ? true : detail === 'sun' ? false : undefined
 						setTheme(theme)
@@ -980,44 +801,49 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 					{#snippet children({ item })}
 						<ToggleButton
 							icon={SunMoon}
+							iconOnly
 							value={'auto'}
 							tooltip="The app mode between dark/light is automatic"
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						<ToggleButton
 							icon={Sun}
+							iconOnly
 							value={'sun'}
 							tooltip="Force light mode"
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						<ToggleButton
 							tooltip="Force dark mode"
 							icon={Moon}
+							iconOnly
 							value={'dark'}
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 					{/snippet}
 				</ToggleButtonGroup>
 			{/if}
 			<div class="flex flex-row gap-2">
-				<ToggleButtonGroup class="h-[30px]" bind:selected={$breakpoint}>
+				<ToggleButtonGroup bind:selected={$breakpoint}>
 					{#snippet children({ item })}
 						<ToggleButton
 							tooltip="Computer View"
 							icon={Laptop2}
+							iconOnly
 							value={'lg'}
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						<ToggleButton
 							tooltip="Mobile View"
 							icon={Smartphone}
+							iconOnly
 							value={'sm'}
-							iconProps={{ size: 16 }}
 							{item}
+							size="md"
 						/>
 						{#if $breakpoint === 'sm'}
 							<Toggle
@@ -1082,7 +908,7 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 		<Dropdown items={moreItems} />
 		<AppEditorTutorial bind:this={appEditorTutorial} />
 
-		<div class="hidden md:inline relative overflow-visible">
+		<div class="hidden md:inline relative overflow-visible shrink-0">
 			{#if hasErrors}
 				<span
 					class="animate-ping absolute inline-flex rounded-full bg-red-600 h-2 w-2 z-50 -right-0.5 -top-0.5"
@@ -1097,23 +923,22 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 					}
 					$jobsDrawerOpen = true
 				}}
-				color={hasErrors ? 'red' : 'light'}
-				size="xs"
-				variant="border"
-				btnClasses="relative"
+				unifiedSize="md"
+				variant={hasErrors ? 'accent' : 'default'}
+				btnClasses={'relative'}
+				destructive={hasErrors}
+				startIcon={{ icon: Bug }}
 			>
 				<div class="flex flex-row gap-1 items-center">
-					<Bug size={14} />
 					<div>Debug runs</div>
-					<div class="text-2xs text-tertiary"
+					<div class="text-2xs {hasErrors ? '' : 'text-primary'}"
 						>({$jobs?.length > 99 ? '99+' : ($jobs?.length ?? 0)})</div
 					>
 					{#if hasErrors}
 						<Button
 							size="xs"
 							btnClasses="-my-2 !px-1 !py-0"
-							color="light"
-							variant="border"
+							variant="default"
 							on:click={() => errorByComponent.set({})}
 							><BellOff size={12} />
 						</Button>
@@ -1124,20 +949,22 @@ let hasErrors = $derived(Object.keys($errorByComponent).length > 0);
 		<AppExportButton bind:this={appExport} />
 		<PreviewToggle loading={loading.save} />
 		<Button
+			variant="accent"
 			loading={loading.save}
 			startIcon={{ icon: Save }}
 			on:click={() => saveDraft()}
-			size="xs"
+			unifiedSize="md"
 			disabled={!newApp && !savedApp}
 			shortCut={{ key: 'S' }}
 		>
 			Draft
 		</Button>
 		<Button
+			variant="accent"
 			loading={loading.save}
 			startIcon={{ icon: Save }}
 			on:click={save}
-			size="xs"
+			unifiedSize="md"
 			dropdownItems={$appPath != ''
 				? () => [
 						{

package/package/components/apps/editor/AppEditorHeader.svelte.d.ts

@@ -47,7 +47,9 @@ declare const AppEditorHeader: $$__sveltets_2_IsomorphicComponent<Props, {
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    toggleTutorial: () => void;
+    runTutorialById: (id: string, options?: {
+        skipStepsCount?: number;
+    }) => void;
     openTroubleshootPanel: () => void;
 }, "version" | "policy" | "savedApp">;
 type AppEditorHeader = InstanceType<typeof AppEditorHeader>;

package/package/components/apps/editor/AppEditorHeaderDeploy.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Alert } from '../../common';
 import Toggle from '../../Toggle.svelte';
 import { enterpriseLicense, userStore, workspaceStore } from '../../../stores';
-import { Loader2, AlertTriangle } from 'lucide-svelte';
+import { Loader2 } from 'lucide-svelte';
 import Tooltip from '../../Tooltip.svelte';
 import ClipboardPanel from '../../details/ClipboardPanel.svelte';
 import { untrack } from 'svelte';
@@ -10,6 +10,7 @@ import Path from '../../Path.svelte';
 import { computeSecretUrl } from './appDeploy.svelte';
 import { base } from '../../../base';
 import { isCloudHosted } from '../../../cloud';
+import EEOnly from '../../EEOnly.svelte';
 let { policy, setPublishState, appPath, customPath = $bindable(), onLatest, savedApp, summary = $bindable(), deploymentMsg = $bindable(), customPathError = $bindable(), pathError = $bindable(), newEditedPath = $bindable(), newPath, hideSecretUrl = false } = $props();
 let dirtyCustomPath = $state(false);
 let path = $state(undefined);
@@ -175,11 +176,9 @@ $effect(() => {
 				</Alert>
 				<div class="mb-2"></div>
 			{/if}
+			<!-- svelte-ignore block_empty -->
 			{#if !$enterpriseLicense}
-				<div class="flex text-xs items-center gap-1 text-yellow-500 whitespace-nowrap mb-2">
-					<AlertTriangle size={16} />
-					EE only <Tooltip>Enterprise Edition only feature</Tooltip>
-				</div>
+				<EEOnly />
 			{/if}
 			<Toggle
 				on:change={({ detail }) => {

package/package/components/apps/editor/AppEditorTutorial.svelte

@@ -3,55 +3,31 @@ import AppTutorials from '../../AppTutorials.svelte';
 import { BookOpen, CheckCircle, Circle, RefreshCw, CheckCheck } from 'lucide-svelte';
 import Dropdown from '../../DropdownV2.svelte';
 import { resetAllTodos, skipAllTodos } from '../../../tutorialUtils';
-import { getContext, onMount } from 'svelte';
-import { ignoredTutorials } from '../../tutorials/ignoredTutorials';
 import { tutorialsToDo } from '../../../stores';
 import ConfirmationModal from '../../common/confirmationModal/ConfirmationModal.svelte';
-import { isAppTainted } from '../../tutorials/utils';
+import { getTutorialIndex } from '../../../tutorials/config';
 let appTutorials = $state(undefined);
 let targetTutorial = $state(undefined);
-const { app } = getContext('AppViewerContext');
-onMount(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const forkedFromTheHub = urlParams.get('hub');
-    const forkedFromTemplate = urlParams.get('template');
-    if (!isAppTainted($app) &&
-        !$ignoredTutorials.includes(7) &&
-        $tutorialsToDo.includes(7) &&
-        !forkedFromTheHub &&
-        !forkedFromTemplate) {
-        appTutorials?.runTutorialById('simpleapptutorial');
-    }
-});
-export function toggleTutorial() {
-    const urlParams = new URLSearchParams(window.location.search);
-    const tutorial = urlParams.get('tutorial');
-    if (tutorial === 'simpleapptutorial') {
-        appTutorials?.runTutorialById('simpleapptutorial');
-    }
+export function runTutorialById(id, options) {
+    appTutorials?.runTutorialById(id, options);
 }
 async function getTutorialItems() {
+    const backgroundRunnablesIndex = getTutorialIndex('backgroundrunnables');
+    const connectionIndex = getTutorialIndex('connection');
     return [
-        {
-            displayName: 'App tutorial',
-            action: () => appTutorials?.runTutorialById('simpleapptutorial'),
-            index: 7,
-            icon: $tutorialsToDo.includes(7) ? Circle : CheckCircle,
-            iconColor: $tutorialsToDo.includes(7) ? undefined : 'green'
-        },
         {
             displayName: 'Background runnables',
             action: () => appTutorials?.runTutorialById('backgroundrunnables'),
-            index: 5,
-            icon: $tutorialsToDo.includes(5) ? Circle : CheckCircle,
-            iconColor: $tutorialsToDo.includes(5) ? undefined : 'green'
+            index: backgroundRunnablesIndex,
+            icon: $tutorialsToDo.includes(backgroundRunnablesIndex) ? Circle : CheckCircle,
+            iconColor: $tutorialsToDo.includes(backgroundRunnablesIndex) ? undefined : 'green'
         },
         {
             displayName: 'Connection',
             action: () => appTutorials?.runTutorialById('connection'),
-            index: 6,
-            icon: $tutorialsToDo.includes(6) ? Circle : CheckCircle,
-            iconColor: $tutorialsToDo.includes(6) ? undefined : 'green'
+            index: connectionIndex,
+            icon: $tutorialsToDo.includes(connectionIndex) ? Circle : CheckCircle,
+            iconColor: $tutorialsToDo.includes(connectionIndex) ? undefined : 'green'
         },
         {
             displayName: 'Reset tutorials',
@@ -72,13 +48,10 @@ async function getTutorialItems() {
 		{#snippet buttonReplacement()}
 			<Button
 				nonCaptureEvent
-				size="xs"
-				color="light"
-				variant="border"
+				unifiedSize="md"
+				variant="subtle"
 				iconOnly
-				startIcon={{
-					icon: BookOpen
-				}}
+				startIcon={{ icon: BookOpen }}
 			/>
 		{/snippet}
 	</Dropdown>
@@ -87,8 +60,8 @@ async function getTutorialItems() {
 <AppTutorials
 	bind:this={appTutorials}
 	on:reload
-	on:error={({ detail }) => {
-		targetTutorial = detail.detail
+	on:error={(event: CustomEvent<{ detail: string }>) => {
+		targetTutorial = event.detail.detail
 	}}
 />
 

package/package/components/apps/editor/AppEditorTutorial.svelte.d.ts

@@ -12,11 +12,13 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const AppEditorTutorial: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    reload: CustomEvent<any>;
+    reload: any;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
-    toggleTutorial: () => void;
+    runTutorialById: (id: string, options?: {
+        skipStepsCount?: number;
+    }) => void;
 }, "">;
 type AppEditorTutorial = InstanceType<typeof AppEditorTutorial>;
 export default AppEditorTutorial;

package/package/components/apps/editor/AppExportButton.svelte

@@ -4,7 +4,7 @@ import { copyToClipboard } from '../../../utils';
 import { Highlight } from 'svelte-highlight';
 import json from 'svelte-highlight/languages/json';
 import { Button } from '../../common';
-import { Clipboard } from 'lucide-svelte';
+import { Copy } from 'lucide-svelte';
 import { yaml } from 'svelte-highlight/languages';
 import YAML from 'yaml';
 import Tabs from '../../common/tabs/Tabs.svelte';
@@ -25,8 +25,8 @@ export function open(app_l) {
 	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer.toggleDrawer()}>
 		<div>
 			<Tabs bind:selected={rawType}>
-				<Tab value="yaml">YAML</Tab>
-				<Tab value="json">JSON</Tab>
+				<Tab value="yaml" label="YAML" />
+				<Tab value="json" label="JSON" />
 				{#snippet content()}
 					<div class="relative pt-2">
 						<Button
@@ -36,10 +36,9 @@ export function open(app_l) {
 										? YAML.stringify(app ?? {})
 										: JSON.stringify(app ?? {}, null, 4)
 								)}
-							color="dark"
-							variant="border"
+							variant="accent"
 							size="sm"
-							startIcon={{ icon: Clipboard }}
+							startIcon={{ icon: Copy }}
 							btnClasses="absolute top-2 right-2 w-min z-20"
 							iconOnly
 						/>

package/package/components/apps/editor/AppInputs.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">import { Alert } from '../../common';
 import Toggle from '../../Toggle.svelte';
 import { getContext } from 'svelte';
-import { BG_PREFIX, allItems } from '../utils';
 import AppComponentInput from './AppComponentInput.svelte';
 import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+import { allItems, BG_PREFIX } from './appUtilsCore';
 const { app } = getContext('AppViewerContext');
 let resourceOnly = true;
 </script>