windmill-components 1.558.4 → 1.596.0

package/package/components/raw_apps/RawAppInlineScriptsPanel.svelte

@@ -1,49 +1,36 @@
-<script lang="ts">import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { twMerge } from 'tailwind-merge';
-import { workspaceStore } from '../../stores';
-import RawAppInlineScriptPanelList from './RawAppInlineScriptPanelList.svelte';
-import RawAppInlineScripRunnable from './RawAppInlineScriptRunnable.svelte';
+<script lang="ts">import { workspaceStore } from '../../stores';
+import RawAppInlineScripRunnable, {} from './RawAppInlineScriptRunnable.svelte';
 import { createScriptFromInlineScript } from '../apps/editor/inlineScriptsPanel/utils';
-let { runnables, selectedRunnable = $bindable(), appPath, width = undefined } = $props();
+let { runnables, selectedRunnable = $bindable(), appPath } = $props();
 </script>
 
-<Splitpanes
-	class={twMerge('!overflow-visible')}
-	style={width !== undefined ? `width:${width}px;` : 'width: 100%;'}
->
-	<Pane size={20}>
-		<RawAppInlineScriptPanelList bind:selectedRunnable {runnables} on:hidePanel />
-	</Pane>
-	<Pane size={80}>
-		{#if !selectedRunnable}
-			<div class="text-sm text-secondary text-center py-8 px-2">
-				Select a runnable on the left panel
-			</div>
-		{:else if runnables?.[selectedRunnable]}
-			{#key selectedRunnable}
-				<RawAppInlineScripRunnable
-					{appPath}
-					on:createScriptFromInlineScript={(e) => {
-						createScriptFromInlineScript(
-							selectedRunnable ?? '',
-							e.detail,
-							$workspaceStore ?? '',
-							appPath
-						)
-					}}
-					on:delete={() => {
-						if (selectedRunnable) {
-							delete runnables[selectedRunnable]
-						}
-						selectedRunnable = undefined
-					}}
-					id={selectedRunnable}
-					bind:runnable={runnables[selectedRunnable]}
-				/>{/key}
-		{:else}
-			<div class="text-sm text-tertiary text-center py-8 px-2">
-				No runnable at id {selectedRunnable}
-			</div>
-		{/if}
-	</Pane>
-</Splitpanes>
+{#if !selectedRunnable}
+	<div class="text-sm text-secondary text-center py-8 px-2">
+		Select a runnable on the left panel
+	</div>
+{:else if runnables?.[selectedRunnable]}
+	{#key selectedRunnable}
+		<RawAppInlineScripRunnable
+			{appPath}
+			on:createScriptFromInlineScript={(e) => {
+				createScriptFromInlineScript(
+					selectedRunnable ?? '',
+					e.detail,
+					$workspaceStore ?? '',
+					appPath
+				)
+			}}
+			on:delete={() => {
+				if (selectedRunnable) {
+					delete runnables[selectedRunnable]
+				}
+				selectedRunnable = undefined
+			}}
+			id={selectedRunnable}
+			bind:runnable={runnables[selectedRunnable]}
+		/>{/key}
+{:else}
+	<div class="text-sm text-primary text-center py-8 px-2">
+		No runnable at id {selectedRunnable}
+	</div>
+{/if}

package/package/components/raw_apps/RawAppInlineScriptsPanel.svelte.d.ts

@@ -1,27 +1,10 @@
-import type { Runnable } from '../apps/inputType';
+import { type Runnable } from './RawAppInlineScriptRunnable.svelte';
 interface Props {
     runnables: Record<string, Runnable>;
     selectedRunnable: string | undefined;
     appPath: string;
-    width?: number | undefined;
+    initRunnablesContent: Record<string, string>;
 }
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const RawAppInlineScriptsPanel: $$__sveltets_2_IsomorphicComponent<Props, {
-    hidePanel: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "selectedRunnable">;
-type RawAppInlineScriptsPanel = InstanceType<typeof RawAppInlineScriptsPanel>;
+declare const RawAppInlineScriptsPanel: import("svelte").Component<Props, {}, "selectedRunnable">;
+type RawAppInlineScriptsPanel = ReturnType<typeof RawAppInlineScriptsPanel>;
 export default RawAppInlineScriptsPanel;

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte

@@ -40,7 +40,7 @@ run(() => {
 					{/if}
 				</div>
 				{#if displayType}
-					<div class="text-xs text-tertiary mr-1">
+					<div class="text-xs text-primary mr-1">
 						{fieldType === 'array' && subFieldType
 							? `${fieldTypeToTsType(subFieldType)}[]`
 							: fieldTypeToTsType(fieldType)}
@@ -50,7 +50,7 @@ run(() => {
 
 			<div class={classNames('flex gap-x-2 gap-y-1 justify-end items-center')}>
 				{#if componentInput?.type && allowTypeChange !== false}
-					<ToggleButtonGroup class="h-7" bind:selected={componentInput.type}>
+					<ToggleButtonGroup bind:selected={componentInput.type}>
 						{#snippet children({ item })}
 							<ToggleButton {item} value="user" icon={User} iconOnly tooltip="User Input" />
 							<ToggleButton {item} value="static" icon={Pen} iconOnly tooltip="Static" />
@@ -73,7 +73,7 @@ run(() => {
 				/>
 			</div>
 		{:else if componentInput?.type === 'user' || componentInput?.type == undefined}
-			<span class="text-2xs italic text-tertiary">Field's value is a frontend input</span>
+			<span class="text-2xs italic text-primary">Field's value is a frontend input</span>
 		{/if}
 		{#if componentInput?.type === 'user' && ((fieldType == 'object' && format?.startsWith('resource-') && format !== 'resource-s3_object') || fieldType == 'resource')}
 			<div class="flex flex-row items-center">

package/package/components/raw_apps/RawAppModules.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">import { Loader2 } from 'lucide-svelte';
+import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
+let props = $props();
+let search = $state('');
+const filteredModules = $derived({
+    direct: search
+        ? (props.modules?.discovered?.direct?.filter((mod) => mod.toLowerCase().includes(search.toLowerCase())) ?? [])
+        : (props.modules?.discovered?.direct ?? []),
+    indirect: search
+        ? (props.modules?.discovered?.indirect?.filter((mod) => mod.toLowerCase().includes(search.toLowerCase())) ?? [])
+        : (props.modules?.discovered?.indirect ?? []),
+    dev: search
+        ? (props.modules?.discovered?.dev?.filter((mod) => mod.toLowerCase().includes(search.toLowerCase())) ?? [])
+        : (props.modules?.discovered?.dev ?? [])
+});
+</script>
+
+<PanelSection
+	size="sm"
+	collapsible
+	initiallyCollapsed
+	titlePadding="pl-1 !text-tertiary"
+	fullHeight={false}
+	title="packages ({Object.keys(props.modules?.installed ?? {}).length})"
+	id="app-editor-frontend-panel-modules"
+>
+	<input type="text" class="w-full max-w-sm" placeholder="Search packages" bind:value={search} />
+	<div class="mt-2 flex flex-col gap-4 w-full">
+		{#each ['direct', 'indirect', 'dev'] as type}
+			{@const typeModules = filteredModules[type]}
+			{#if typeModules.length > 0}
+				<div class="flex flex-col gap-1">
+					<div class="text-sm px-2 text-secondary font-mono uppercase"
+						>{type}
+						<span class="text-2xs text-tertiary">({typeModules.length})</span></div
+					>
+					{#each typeModules as mod (mod)}
+						<div class="text-xs px-2 text-secondary font-mono flex justify-between w-full"
+							><div class="truncate">{mod}</div>
+							<div class="flex items-center gap-1">
+								{#if props.modules?.installed?.[mod]}
+									<span class="text-2xs px-2 text-tertiary font-mono">
+										{props.modules?.installed?.[mod]}
+									</span>
+								{:else}
+									<Loader2 class="w-4 h-4 animate-spin text-tertiary" />
+								{/if}
+							</div>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		{/each}
+	</div>
+</PanelSection>

package/package/components/raw_apps/RawAppModules.svelte.d.ts

@@ -0,0 +1,14 @@
+export type Modules = {
+    installed: Record<string, string>;
+    discovered: {
+        direct: string[];
+        indirect: string[];
+        dev: string[];
+    };
+};
+type $$ComponentProps = {
+    modules: Modules | undefined;
+};
+declare const RawAppModules: import("svelte").Component<$$ComponentProps, {}, "">;
+type RawAppModules = ReturnType<typeof RawAppModules>;
+export default RawAppModules;

package/package/components/raw_apps/RawAppPreview.svelte.d.ts

@@ -1,11 +1,11 @@
 import { type UserExt } from '../../stores';
-import type { HiddenRunnable } from '../apps/types';
+import type { Runnable } from './rawAppPolicy';
 interface Props {
     workspace: string;
     user: UserExt | undefined;
     secret: string | undefined;
     path: string;
-    runnables: Record<string, HiddenRunnable>;
+    runnables: Record<string, Runnable>;
 }
 declare const RawAppPreview: import("svelte").Component<Props, {}, "">;
 type RawAppPreview = ReturnType<typeof RawAppPreview>;

package/package/components/raw_apps/RawAppSidebar.svelte

@@ -0,0 +1,277 @@
+<script lang="ts">import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
+import RawAppInlineScriptPanelList from './RawAppInlineScriptPanelList.svelte';
+import FileTreeNode from './FileTreeNode.svelte';
+import { buildFileTree } from './fileTreeUtils';
+import { Plus, File, Folder, Camera } from 'lucide-svelte';
+import RawAppModules from './RawAppModules.svelte';
+import RawAppHistoryList from './RawAppHistoryList.svelte';
+import Button from '../common/button/Button.svelte';
+let { runnables, selectedRunnable = $bindable(), files = $bindable(), modules, onSelectFile, selectedDocument = $bindable(), historyManager, historySelectedId, onHistorySelect, onManualSnapshot } = $props();
+const fileTree = $derived(buildFileTree(Object.keys(files ?? {})));
+let pathToRename = $state(undefined);
+let pathToExpand = $state(undefined);
+function handleFileClick(path) {
+    console.log('File clicked:', path);
+    selectedDocument = path;
+    onSelectFile?.(path);
+}
+function handleAddFile(folderPath) {
+    console.log('Add file to:', folderPath);
+    if (files) {
+        const nfiles = { ...files };
+        // Ensure folderPath ends with /
+        const normalizedFolder = folderPath.endsWith('/') ? folderPath : folderPath + '/';
+        const newPath = normalizedFolder + 'newfile.txt';
+        nfiles[newPath] = '';
+        files = nfiles;
+        pathToRename = newPath;
+        pathToExpand = normalizedFolder;
+    }
+}
+function handleRename(oldPath, newName) {
+    if (files) {
+        const nfiles = { ...files };
+        const pathParts = oldPath.split('/').filter(Boolean);
+        const parentPath = '/' + pathParts.slice(0, -1).join('/');
+        let newPath = parentPath === '/' ? '/' + newName : parentPath + '/' + newName;
+        // Check if this is a folder (ends with /)
+        const isFolder = oldPath.endsWith('/');
+        if (isFolder) {
+            // For folders, ensure new path also ends with /
+            if (!newPath.endsWith('/')) {
+                newPath = newPath + '/';
+            }
+            const oldFolderPath = oldPath;
+            const newFolderPath = newPath;
+            // Collect all paths to rename (including the folder itself and all children)
+            const pathsToRename = [];
+            Object.keys(nfiles).forEach((filePath) => {
+                if (filePath === oldFolderPath) {
+                    // The folder itself
+                    pathsToRename.push({ old: filePath, new: newFolderPath });
+                }
+                else if (filePath.startsWith(oldFolderPath)) {
+                    // Children of the folder
+                    const relativePath = filePath.substring(oldFolderPath.length);
+                    const updatedPath = newFolderPath + relativePath;
+                    pathsToRename.push({ old: filePath, new: updatedPath });
+                }
+            });
+            // Apply all renames
+            pathsToRename.forEach(({ old, new: newPath }) => {
+                nfiles[newPath] = nfiles[old];
+                delete nfiles[old];
+            });
+            selectedDocument = newFolderPath;
+        }
+        else {
+            // For files, simple rename
+            nfiles[newPath] = nfiles[oldPath];
+            delete nfiles[oldPath];
+            selectedDocument = newPath;
+        }
+        files = nfiles;
+        pathToRename = undefined;
+    }
+}
+function handleAddFolder(folderPath) {
+    console.log('Add folder to:', folderPath);
+    if (files) {
+        const nfiles = { ...files };
+        // Ensure folderPath ends with /
+        const normalizedFolder = folderPath.endsWith('/') ? folderPath : folderPath + '/';
+        const newPath = normalizedFolder + 'newfolder/';
+        nfiles[newPath] = '';
+        files = nfiles;
+        pathToRename = newPath;
+        pathToExpand = normalizedFolder;
+    }
+}
+function handleAddRootFile() {
+    console.log('Add file to root or selected folder');
+    if (files) {
+        const nfiles = { ...files };
+        let newPath;
+        let targetFolder;
+        if (selectedDocument) {
+            // If a folder is selected, add the file inside it
+            if (selectedDocument.endsWith('/')) {
+                newPath = selectedDocument + 'newfile.txt';
+                targetFolder = selectedDocument;
+            }
+            else {
+                // If a file is selected, add the new file in the same folder
+                const pathParts = selectedDocument.split('/').filter(Boolean);
+                if (pathParts.length > 1) {
+                    // File is in a subfolder
+                    const parentPath = '/' + pathParts.slice(0, -1).join('/') + '/';
+                    newPath = parentPath + 'newfile.txt';
+                    targetFolder = parentPath;
+                }
+                else {
+                    // File is at root
+                    newPath = '/newfile.txt';
+                }
+            }
+        }
+        else {
+            newPath = '/newfile.txt';
+        }
+        nfiles[newPath] = '';
+        files = nfiles;
+        pathToRename = newPath;
+        if (targetFolder) {
+            pathToExpand = targetFolder;
+        }
+    }
+}
+function handleAddRootFolder() {
+    if (files) {
+        const nfiles = { ...files };
+        let newPath;
+        let targetFolder;
+        if (selectedDocument) {
+            // If a folder is selected, add the folder inside it
+            if (selectedDocument.endsWith('/')) {
+                newPath = selectedDocument + 'newfolder/';
+                targetFolder = selectedDocument;
+            }
+            else {
+                // If a file is selected, add the new folder in the same folder
+                const pathParts = selectedDocument.split('/').filter(Boolean);
+                if (pathParts.length > 1) {
+                    // File is in a subfolder
+                    const parentPath = '/' + pathParts.slice(0, -1).join('/') + '/';
+                    newPath = parentPath + 'newfolder/';
+                    targetFolder = parentPath;
+                }
+                else {
+                    // File is at root
+                    newPath = '/newfolder/';
+                }
+            }
+        }
+        else {
+            newPath = '/newfolder/';
+        }
+        nfiles[newPath] = '';
+        files = nfiles;
+        pathToRename = newPath;
+        if (targetFolder) {
+            pathToExpand = targetFolder;
+        }
+    }
+}
+function handleDelete(path) {
+    if (files) {
+        console.log('Delete:', path);
+        const nfiles = { ...files };
+        // Check if this is a folder (ends with /)
+        const isFolder = path.endsWith('/');
+        if (isFolder) {
+            // Delete the folder and all its children
+            Object.keys(nfiles).forEach((filePath) => {
+                if (filePath === path || filePath.startsWith(path)) {
+                    delete nfiles[filePath];
+                }
+            });
+        }
+        else {
+            // Delete single file
+            delete nfiles[path];
+        }
+        files = nfiles;
+        console.log(nfiles);
+        // Clear selection if deleted item was selected
+        if (selectedDocument === path || (isFolder && selectedDocument?.startsWith(path))) {
+            selectedDocument = undefined;
+        }
+    }
+}
+</script>
+
+<PanelSection size="lg" fullHeight={false} title="frontend" id="app-editor-frontend-panel">
+	{#snippet action()}
+		<div class="flex gap-1">
+			<div class="flex gap-0.5">
+				<button
+					onclick={handleAddRootFile}
+					class="p-0.5 hover:bg-surface-hover rounded transition-colors flex items-center gap-0.5"
+					title="Add file to root"
+				>
+					<Plus size={12} class="text-secondary" />
+					<File size={12} class="text-tertiary" />
+				</button>
+				<button
+					onclick={handleAddRootFolder}
+					class="p-0.5 hover:bg-surface-hover rounded transition-colors flex items-center gap-0.5"
+					title="Add folder to root"
+				>
+					<Plus size={12} class="text-secondary" />
+					<Folder size={12} class="text-tertiary" />
+				</button>
+			</div>
+		</div>
+	{/snippet}
+	<div class="flex flex-col gap-0.5 w-full">
+		{#each fileTree as node (node.path)}
+			<FileTreeNode
+				{node}
+				onFileClick={handleFileClick}
+				onAddFile={handleAddFile}
+				onAddFolder={handleAddFolder}
+				onRename={handleRename}
+				onDelete={handleDelete}
+				selectedPath={selectedDocument}
+				{pathToRename}
+				{pathToExpand}
+			/>
+		{/each}
+		<FileTreeNode
+			node={{
+				name: 'wmill.ts',
+				path: '/wmill.ts',
+				isFolder: false
+			}}
+			noEdit={true}
+			onFileClick={handleFileClick}
+			onAddFile={handleAddFile}
+			onAddFolder={handleAddFolder}
+			selectedPath={selectedDocument}
+		/>
+	</div>
+</PanelSection>
+
+<RawAppModules {modules} />
+
+<div class="py-4"></div>
+<RawAppInlineScriptPanelList bind:selectedRunnable {runnables} />
+
+<div class="py-4"></div>
+<PanelSection fullHeight={false} size="lg" title="data">
+	<span class="text-2xs text-tertiary">Coming soon</span>
+</PanelSection>
+
+{#if historyManager && onHistorySelect && onManualSnapshot}
+	<div class="py-4"></div>
+	<PanelSection fullHeight={false} size="md" title="history" id="app-editor-history-panel">
+		{#snippet action()}
+			<div class="flex items-center gap-2">
+				<span class="text-2xs text-tertiary">{historyManager.allEntries.length}/50</span>
+				<Button
+					size="xs2"
+					color="dark"
+					variant="border"
+					startIcon={{ icon: Camera }}
+					on:click={onManualSnapshot}
+				></Button>
+			</div>
+		{/snippet}
+		<RawAppHistoryList
+			entries={historyManager.allEntries}
+			branches={historyManager.allBranches}
+			selectedId={historySelectedId}
+			onSelect={onHistorySelect}
+		/>
+	</PanelSection>
+{/if}

package/package/components/raw_apps/RawAppSidebar.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Runnable } from '../apps/inputType';
+import type { Modules } from './RawAppModules.svelte';
+import type { RawAppHistoryManager } from './RawAppHistoryManager.svelte';
+interface Props {
+    runnables: Record<string, Runnable>;
+    selectedRunnable: string | undefined;
+    files: Record<string, string> | undefined;
+    modules?: Modules;
+    onSelectFile?: (path: string) => void;
+    selectedDocument: string | undefined;
+    historyManager?: RawAppHistoryManager;
+    historySelectedId?: number | undefined;
+    onHistorySelect?: (id: number) => void;
+    onManualSnapshot?: () => void;
+}
+declare const RawAppSidebar: import("svelte").Component<Props, {}, "files" | "selectedRunnable" | "selectedDocument">;
+type RawAppSidebar = ReturnType<typeof RawAppSidebar>;
+export default RawAppSidebar;

package/package/components/raw_apps/fileTreeUtils.d.ts

@@ -0,0 +1,7 @@
+export interface TreeNode {
+    name: string;
+    path: string;
+    isFolder: boolean;
+    children?: TreeNode[];
+}
+export declare function buildFileTree(filePaths: string[]): TreeNode[];

package/package/components/raw_apps/fileTreeUtils.js

@@ -0,0 +1,54 @@
+export function buildFileTree(filePaths) {
+    const root = [];
+    const nodeMap = new Map();
+    // Sort paths to ensure parent folders are processed before children
+    const sortedPaths = filePaths.slice().sort();
+    for (const filePath of sortedPaths) {
+        // Check if this path represents a folder (ends with /)
+        const pathEndsWithSlash = filePath.endsWith('/');
+        const parts = filePath.split('/').filter(Boolean);
+        let currentPath = '';
+        let parentChildren = root;
+        for (let i = 0; i < parts.length; i++) {
+            const part = parts[i];
+            currentPath = currentPath ? `${currentPath}/${part}` : part;
+            // It's a folder if it's not the last part, or if the original path ended with /
+            const isFolder = i < parts.length - 1 || (i === parts.length - 1 && pathEndsWithSlash);
+            const isLastPart = i === parts.length - 1;
+            // Check if this node already exists
+            if (!nodeMap.has(currentPath)) {
+                // Build the node path with trailing / for folders
+                let nodePath = '/' + currentPath;
+                if (isFolder && isLastPart && pathEndsWithSlash) {
+                    nodePath = nodePath + '/';
+                }
+                const node = {
+                    name: part,
+                    path: nodePath,
+                    isFolder,
+                    children: isFolder ? [] : undefined
+                };
+                nodeMap.set(currentPath, node);
+                parentChildren.push(node);
+            }
+            else if (isFolder) {
+                // If the node exists but wasn't marked as a folder, update it
+                const existingNode = nodeMap.get(currentPath);
+                if (!existingNode.isFolder) {
+                    existingNode.isFolder = true;
+                    existingNode.children = [];
+                    // Update path to include trailing /
+                    if (isLastPart && pathEndsWithSlash && !existingNode.path.endsWith('/')) {
+                        existingNode.path = existingNode.path + '/';
+                    }
+                }
+            }
+            // Move to the next level for folders
+            if (isFolder) {
+                const node = nodeMap.get(currentPath);
+                parentChildren = node.children;
+            }
+        }
+    }
+    return root;
+}

package/package/components/raw_apps/lintStore.d.ts

@@ -0,0 +1,33 @@
+export interface MonacoLintError {
+    message: string;
+    severity: 'error' | 'warning';
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+}
+export interface RawAppLintStore {
+    /** Whether lint collection mode is enabled (true when in RawAppEditor context) */
+    enabled: boolean;
+    /** Errors grouped by runnable key */
+    errors: Record<string, MonacoLintError[]>;
+    /** Warnings grouped by runnable key */
+    warnings: Record<string, MonacoLintError[]>;
+}
+export declare const rawAppLintStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<RawAppLintStore>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+    /** Enable lint collection mode */
+    enable(): void;
+    /** Disable lint collection mode and clear all diagnostics */
+    disable(): void;
+    /** Check if lint collection is enabled */
+    isEnabled(): boolean;
+    /** Set diagnostics for a specific runnable key */
+    setDiagnostics(runnableKey: string, diagnostics: MonacoLintError[]): void;
+    /** Clear diagnostics for a specific runnable key */
+    clearDiagnostics(runnableKey: string): void;
+    /** Clear all diagnostics */
+    clearAll(): void;
+    /** Get current snapshot of diagnostics */
+    getSnapshot(): RawAppLintStore;
+};