windmill-components 1.623.2 → 1.655.0

package/package/components/details/createAppFromScript.d.ts

@@ -20,9 +20,12 @@ export declare function createAppFromScript(path: string, schema: Record<string,
             type: string;
             configuration: {};
             panes: number[];
-            customCss: {
-                container?: undefined;
-            };
+            customCss: Partial<{
+                readonly container: {
+                    readonly class: "";
+                    readonly style: "";
+                };
+            }>;
             numberOfSubgrids: number;
             id: string;
             actions?: undefined;
@@ -116,7 +119,20 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                     autoRefresh?: undefined;
                     recomputeOnInputChanged?: undefined;
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly label: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly description: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
                 recomputeIds?: undefined;
                 horizontalAlignment?: undefined;
@@ -309,7 +325,16 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                     recomputeOnInputChanged: boolean;
                     value?: undefined;
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly button: {
+                        readonly style: "";
+                        readonly class: "";
+                    };
+                    readonly container: {
+                        readonly style: "";
+                        readonly class: "";
+                    };
+                }>;
                 recomputeIds: never[];
                 horizontalAlignment: string;
                 verticalAlignment: string;
@@ -343,7 +368,24 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                     };
                 };
                 tabs: string[];
-                customCss: {};
+                customCss: Partial<{
+                    readonly tabRow: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly allTabs: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly selectedTab: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 numberOfSubgrids: number;
                 id: string;
                 disabledTabs: {
@@ -382,7 +424,16 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                         path: string;
                     };
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly header: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
             };
             id: string;
@@ -415,7 +466,16 @@ export declare function createAppFromScript(path: string, schema: Record<string,
                         };
                     };
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly header: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
             };
             id: string;
@@ -566,9 +626,12 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
             type: string;
             configuration: {};
             panes: number[];
-            customCss: {
-                container?: undefined;
-            };
+            customCss: Partial<{
+                readonly container: {
+                    readonly class: "";
+                    readonly style: "";
+                };
+            }>;
             numberOfSubgrids: number;
             id: string;
         };
@@ -660,7 +723,20 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                     autoRefresh?: undefined;
                     recomputeOnInputChanged?: undefined;
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly label: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly description: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
                 recomputeIds?: undefined;
                 horizontalAlignment?: undefined;
@@ -853,7 +929,16 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                     recomputeOnInputChanged: boolean;
                     value?: undefined;
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly button: {
+                        readonly style: "";
+                        readonly class: "";
+                    };
+                    readonly container: {
+                        readonly style: "";
+                        readonly class: "";
+                    };
+                }>;
                 recomputeIds: never[];
                 horizontalAlignment: string;
                 verticalAlignment: string;
@@ -887,7 +972,24 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                     };
                 };
                 tabs: string[];
-                customCss: {};
+                customCss: Partial<{
+                    readonly tabRow: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly allTabs: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly selectedTab: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 numberOfSubgrids: number;
                 id: string;
                 disabledTabs: {
@@ -927,7 +1029,16 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                         };
                     };
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly header: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
             };
             id: string;
@@ -960,7 +1071,16 @@ export declare function createAppFromFlow(path: string, schema: Record<string, a
                         };
                     };
                 };
-                customCss: {};
+                customCss: Partial<{
+                    readonly header: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                    readonly container: {
+                        readonly class: "";
+                        readonly style: "";
+                    };
+                }>;
                 id: string;
             };
             id: string;

package/package/components/details/createAppFromScript.js

@@ -1,3 +1,4 @@
+import { ccomponents } from '../apps/editor/component';
 export function createAppFromScript(path, schema) {
     return {
         grid: [
@@ -22,7 +23,7 @@ export function createAppFromScript(path, schema) {
                     type: 'verticalsplitpanescomponent',
                     configuration: {},
                     panes: [50, 50],
-                    customCss: {},
+                    customCss: structuredClone(ccomponents['verticalsplitpanescomponent'].customCss),
                     numberOfSubgrids: 2,
                     id: 'a'
                 },
@@ -103,7 +104,7 @@ export function createAppFromScript(path, schema) {
                             fieldType: 'schema',
                             value: schema
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['schemaformcomponent'].customCss),
                         id: 'c'
                     },
                     id: 'c'
@@ -291,7 +292,7 @@ export function createAppFromScript(path, schema) {
                             autoRefresh: true,
                             recomputeOnInputChanged: true
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['buttoncomponent'].customCss),
                         recomputeIds: [],
                         horizontalAlignment: 'right',
                         verticalAlignment: 'center',
@@ -327,7 +328,7 @@ export function createAppFromScript(path, schema) {
                             }
                         },
                         tabs: ['Result', 'Logs'],
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['tabscomponent'].customCss),
                         numberOfSubgrids: 2,
                         id: 'b',
                         disabledTabs: [
@@ -375,7 +376,7 @@ export function createAppFromScript(path, schema) {
                                 path: 'result'
                             }
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['displaycomponent'].customCss),
                         id: 'e'
                     },
                     id: 'e'
@@ -410,7 +411,7 @@ export function createAppFromScript(path, schema) {
                                 }
                             }
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['jobidlogcomponent'].customCss),
                         id: 'f'
                     },
                     id: 'f'
@@ -572,7 +573,7 @@ export function createAppFromFlow(path, schema) {
                     type: 'verticalsplitpanescomponent',
                     configuration: {},
                     panes: [50, 50],
-                    customCss: {},
+                    customCss: structuredClone(ccomponents['verticalsplitpanescomponent'].customCss),
                     numberOfSubgrids: 2,
                     id: 'a'
                 },
@@ -652,7 +653,7 @@ export function createAppFromFlow(path, schema) {
                             fieldType: 'schema',
                             value: schema
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['schemaformcomponent'].customCss),
                         id: 'c'
                     },
                     id: 'c'
@@ -840,7 +841,7 @@ export function createAppFromFlow(path, schema) {
                             autoRefresh: false,
                             recomputeOnInputChanged: false
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['buttoncomponent'].customCss),
                         recomputeIds: [],
                         horizontalAlignment: 'right',
                         verticalAlignment: 'center',
@@ -876,7 +877,7 @@ export function createAppFromFlow(path, schema) {
                             }
                         },
                         tabs: ['Result', 'Logs'],
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['tabscomponent'].customCss),
                         numberOfSubgrids: 2,
                         id: 'b',
                         disabledTabs: [
@@ -925,7 +926,7 @@ export function createAppFromFlow(path, schema) {
                                 }
                             }
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['jobidflowstatuscomponent'].customCss),
                         id: 'e'
                     },
                     id: 'e'
@@ -960,7 +961,7 @@ export function createAppFromFlow(path, schema) {
                                 }
                             }
                         },
-                        customCss: {},
+                        customCss: structuredClone(ccomponents['jobidlogcomponent'].customCss),
                         id: 'f'
                     },
                     id: 'f'

package/package/components/diffEditorTypes.d.ts

@@ -0,0 +1,6 @@
+import type { ButtonType } from './common';
+export interface ButtonProp {
+    text: string;
+    color?: ButtonType.Color;
+    onClick: () => void;
+}

package/package/components/diffEditorTypes.js

@@ -0,0 +1 @@
+export {};

package/package/components/flows/CreateActionsApp.svelte

@@ -3,20 +3,29 @@ import { base } from '../../base';
 import { Button } from '../common';
 import Drawer from '../common/drawer/Drawer.svelte';
 import DrawerContent from '../common/drawer/DrawerContent.svelte';
+import Tabs from '../common/tabs/Tabs.svelte';
+import Tab from '../common/tabs/Tab.svelte';
 import Modal from '../common/modal/Modal.svelte';
-import { LayoutDashboard, Loader2, Plus, Code2, FlaskConical } from 'lucide-svelte';
+import { LayoutDashboard, Loader2, Plus, Code2 } from 'lucide-svelte';
 import { importStore } from '../apps/store';
-import Badge from '../common/badge/Badge.svelte';
 import YAML from 'yaml';
 let drawer = undefined;
 let pendingRaw = $state('');
 let importType = $state('yaml');
-// Modal states
+let appKind = $state('lowcode');
 let appTypeModalOpen = $state(false);
-let featurePreviewModalOpen = $state(false);
 async function importRaw() {
-    $importStore = importType === 'yaml' ? YAML.parse(pendingRaw) : JSON.parse(pendingRaw);
-    await goto('/apps/add?nodraft=true');
+    const parsed = importType === 'yaml' ? YAML.parse(pendingRaw) : JSON.parse(pendingRaw);
+    if (appKind === 'fullcode') {
+        // Navigation to /apps_raw/add triggers a full page reload (for cross-origin isolation),
+        // so the in-memory importStore would be lost. Use sessionStorage instead.
+        sessionStorage.setItem('rawAppImport', JSON.stringify(parsed));
+        await goto('/apps_raw/add?nodraft=true');
+    }
+    else {
+        $importStore = parsed;
+        await goto('/apps/add?nodraft=true');
+    }
     drawer?.closeDrawer?.();
 }
 function openAppTypeModal() {
@@ -28,45 +37,43 @@ function selectLowCode() {
 }
 function selectFullCode() {
     appTypeModalOpen = false;
-    featurePreviewModalOpen = true;
-}
-function confirmFullCode() {
-    featurePreviewModalOpen = false;
     goto(`${base}/apps_raw/add?nodraft=true`);
 }
 </script>
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-	<Button
-		id="create-app-button"
-		aiId="apps-create-actions-app"
-		aiDescription="Create a new app"
-		unifiedSize="lg"
-		startIcon={{ icon: Plus }}
-		endIcon={{ icon: LayoutDashboard }}
-		on:click={openAppTypeModal}
-		variant="accent"
-		dropdownItems={[
-			{
-				label: 'Import low-code app from YAML',
-				onClick: () => {
-					drawer?.toggleDrawer?.()
-					importType = 'yaml'
-				}
-			},
-			{
-				label: 'Import low-code app from JSON',
-				onClick: () => {
-					drawer?.toggleDrawer?.()
-					importType = 'json'
+		<Button
+			id="create-app-button"
+			aiId="apps-create-actions-app"
+			aiDescription="Create a new app"
+			unifiedSize="lg"
+			startIcon={{ icon: Plus }}
+			endIcon={{ icon: LayoutDashboard }}
+			on:click={openAppTypeModal}
+			variant="accent"
+			dropdownItems={[
+				{
+					label: 'Import low-code app',
+					onClick: () => {
+						appKind = 'lowcode'
+						importType = 'yaml'
+						drawer?.toggleDrawer?.()
+					}
+				},
+				{
+					label: 'Import full-code app',
+					onClick: () => {
+						appKind = 'fullcode'
+						importType = 'yaml'
+						drawer?.toggleDrawer?.()
+					}
 				}
-			}
-		]}
-	>
-		<div class="flex flex-row items-center"> App </div>
-	</Button>
-</div>
+			]}
+		>
+			<div class="flex flex-row items-center"> App </div>
+		</Button>
+	</div>
 
 <!-- App Type Selection Modal -->
 <Modal bind:open={appTypeModalOpen} title="Choose your app builder">
@@ -106,75 +113,42 @@ function confirmFullCode() {
 					<h3 class="font-semibold text-primary">Full-code App</h3>
 					<p class="text-xs text-tertiary mt-1">
 						Build with React or Svelte with full control and a powerful AI agent.
+
+					<br /><br />
+					Better for complex apps or apps that require full flexibility and control.
 					</p>
 				</div>
-				<br /><br />
-				<div class="flex flex-row items-center gap-2">
-					<Badge color="yellow">
-						<FlaskConical size={12} class="mr-1" />
-						Preview (unstable)
-					</Badge>
-				</div>
 			</button>
 		</div>
 	</div>
 </Modal>
 
-<!-- Feature Preview Warning Modal -->
-<Modal kind="X" bind:open={featurePreviewModalOpen} title="Feature Preview Notice">
-	<div class="flex flex-col gap-4">
-		<div
-			class="flex items-start gap-3 p-4 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800"
-		>
-			<FlaskConical size={24} class="text-yellow-600 dark:text-yellow-400 shrink-0 mt-0.5" />
-			<div class="text-sm text-yellow-800 dark:text-yellow-200">
-				<p class="font-semibold mb-2">Full-code Apps are in Feature Preview</p>
-				<p>
-					This feature is not yet stable and may change significantly before it reaches General
-					Availability (GA), which is expected in <strong>January 2026</strong>.
-				</p>
-				<ul class="list-disc list-inside mt-2 space-y-1 text-yellow-700 dark:text-yellow-300">
-					<li>APIs and interfaces may change without notice</li>
-					<li>Some functionality may be incomplete or buggy</li>
-					<li>Not recommended for production use yet</li>
-				</ul>
-			</div>
-		</div>
-
-		<div class="flex justify-end gap-3 pt-2">
-			<Button
-				variant="default"
-				unifiedSize="md"
-				onClick={() => {
-					featurePreviewModalOpen = false
-					appTypeModalOpen = true
-				}}
-			>
-				Go back
-			</Button>
-			<Button unifiedSize="md" variant="accent" on:click={confirmFullCode}
-				>I understand, continue</Button
-			>
-		</div>
-	</div>
-</Modal>
-
-<!-- Raw JSON -->
+<!-- Import Drawer -->
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
-		title={'Import low-code app from ' + (importType === 'yaml' ? 'YAML' : 'JSON')}
+		title={appKind === 'fullcode' ? 'Import full-code app' : 'Import low-code app'}
 		on:close={() => drawer?.toggleDrawer?.()}
 	>
-		{#await import('../SimpleEditor.svelte')}
-			<Loader2 class="animate-spin" />
-		{:then Module}
-			<Module.default
-				bind:code={pendingRaw}
-				lang={importType}
-				class="h-full"
-				fixedOverflowWidgets={false}
-			/>
-		{/await}
+		<Tabs bind:selected={importType}>
+			<Tab value="yaml" label="YAML" />
+			<Tab value="json" label="JSON" />
+			{#snippet content()}
+				<div class="relative pt-2 h-full">
+					{#key importType}
+						{#await import('../SimpleEditor.svelte')}
+							<Loader2 class="animate-spin" />
+						{:then Module}
+							<Module.default
+								bind:code={pendingRaw}
+								lang={importType}
+								class="h-full"
+								fixedOverflowWidgets={false}
+							/>
+						{/await}
+					{/key}
+				</div>
+			{/snippet}
+		</Tabs>
 		{#snippet actions()}
 			<Button size="sm" on:click={importRaw}>Import</Button>
 		{/snippet}

package/package/components/flows/CreateActionsFlow.svelte

@@ -20,35 +20,35 @@ async function importRaw() {
 
 <!-- Buttons -->
 <div class="flex flex-row gap-2">
-	<Button
-		id="create-flow-button"
-		aiId="flows-create-actions-flow"
-		aiDescription="Create a new flow"
-		unifiedSize="lg"
-		startIcon={{ icon: Plus }}
-		endIcon={{ icon: BarsStaggered }}
-		href="{base}/flows/add?nodraft=true"
-		variant="accent"
-		dropdownItems={[
-			{
-				label: 'Import from YAML',
-				onClick: () => {
-					drawer?.toggleDrawer?.()
-					importType = 'yaml'
+		<Button
+			id="create-flow-button"
+			aiId="flows-create-actions-flow"
+			aiDescription="Create a new flow"
+			unifiedSize="lg"
+			startIcon={{ icon: Plus }}
+			endIcon={{ icon: BarsStaggered }}
+			href="{base}/flows/add?nodraft=true"
+			variant="accent"
+			dropdownItems={[
+				{
+					label: 'Import from YAML',
+					onClick: () => {
+						drawer?.toggleDrawer?.()
+						importType = 'yaml'
+					}
+				},
+				{
+					label: 'Import from JSON',
+					onClick: () => {
+						drawer?.toggleDrawer?.()
+						importType = 'json'
+					}
 				}
-			},
-			{
-				label: 'Import from JSON',
-				onClick: () => {
-					drawer?.toggleDrawer?.()
-					importType = 'json'
-				}
-			}
-		]}
-	>
-		Flow
-	</Button>
-</div>
+			]}
+		>
+			Flow
+		</Button>
+	</div>
 
 <!-- Raw JSON -->
 <Drawer bind:this={drawer} size="800px">

package/package/components/flows/DebounceLimit.svelte.d.ts

@@ -11,6 +11,6 @@ type $$ComponentProps = {
     color?: 'nord' | undefined;
     fontClass?: string;
 };
-declare const DebounceLimit: import("svelte").Component<$$ComponentProps, {}, "debounce_key" | "debounce_delay_s" | "debounce_args_to_accumulate" | "max_total_debouncing_time" | "max_total_debounces_amount">;
+declare const DebounceLimit: import("svelte").Component<$$ComponentProps, {}, "debounce_delay_s" | "debounce_key" | "debounce_args_to_accumulate" | "max_total_debouncing_time" | "max_total_debounces_amount">;
 type DebounceLimit = ReturnType<typeof DebounceLimit>;
 export default DebounceLimit;