windmill-components 1.623.2 → 1.655.0

package/package/components/raw_apps/RawAppEditorHeader.svelte

@@ -2,8 +2,10 @@
 import Button from '../common/button/Button.svelte';
 import UndoRedo from '../common/button/UndoRedo.svelte';
 import { AppService, DraftService } from '../../gen';
-import { enterpriseLicense, userStore, workspaceStore } from '../../stores';
-import { Bug, DiffIcon, EllipsisVertical, FileJson, FileUp, History, Pen, Save, WandSparkles } from 'lucide-svelte';
+import { rawAppToHubUrl } from '../../hub';
+import { enterpriseLicense, hubBaseUrlStore, userStore, workspaceStore } from '../../stores';
+import YAML from 'yaml';
+import { Bug, DiffIcon, Download, EllipsisVertical, FileJson, Globe, History, Pen, Save, WandSparkles } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined, defaultIfEmptyString } from '../../utils';
 // import {  allItems, toStatic } from '../apps/editor/settingsPanel/utils'
@@ -22,6 +24,9 @@ import AppEditorHeaderDeploy from '../apps/editor/AppEditorHeaderDeploy.svelte';
 import { updateRawAppPolicy } from './rawAppPolicy';
 import { aiChatManager } from '../copilot/chat/AIChatManager.svelte';
 import { AIBtnClasses } from '../copilot/chat/AIButtonStyle';
+import { isRuleActive } from '../../workspaceProtectionRules.svelte';
+import { buildForkEditUrl } from '../../utils/editInFork';
+import { isCloudHosted } from '../../cloud';
 let { summary = $bindable(), policy = $bindable(), diffDrawer = undefined, savedApp = $bindable(undefined), version = $bindable(undefined), newApp, newPath = '', appPath, runnables, data, files, jobs = $bindable(), jobsById = $bindable(), getBundle, canUndo = false, canRedo = false, onUndo = undefined, onRedo = undefined } = $props();
 let newEditedPath = $state('');
 let deployedValue = $state(undefined); // Value to diff against
@@ -39,7 +44,36 @@ let appExport = $state();
 let draftDrawerOpen = $state(false);
 let saveDrawerOpen = $state(false);
 let historyBrowserDrawerOpen = $state(false);
+let publishToHubDrawerOpen = $state(false);
+let publishingToHub = $state(false);
 let deploymentMsg = $state(undefined);
+async function publishToHub() {
+    if (!app)
+        return;
+    publishingToHub = true;
+    try {
+        const { default: JSZip } = await import('jszip');
+        const { js, css } = await getBundle();
+        const zip = new JSZip();
+        zip.file('app.yaml', YAML.stringify(app));
+        zip.file('bundle.js', js);
+        zip.file('bundle.css', css);
+        const blob = await zip.generateAsync({ type: 'blob' });
+        // Download the zip
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${(appPath || 'raw-app').replaceAll('/', '__')}.zip`;
+        a.click();
+        setTimeout(() => URL.revokeObjectURL(url), 100);
+        // Open hub page
+        const hubUrl = rawAppToHubUrl($hubBaseUrlStore, summary || appPath.split('/').pop()?.replace('_', ' ') || 'my raw app');
+        window.open(hubUrl.toString(), '_blank');
+    }
+    finally {
+        publishingToHub = false;
+    }
+}
 function closeSaveDrawer() {
     saveDrawerOpen = false;
 }
@@ -418,11 +452,10 @@ let moreItems = [
         }
     },
     {
-        displayName: 'Hub compatible JSON',
-        icon: FileUp,
+        displayName: 'Publish to Hub',
+        icon: Globe,
         action: () => {
-            sendUserToast('todo');
-            // appExport.open(toStatic(app, $staticExporter, summary).app)
+            publishToHubDrawerOpen = true;
         }
     },
     {
@@ -585,7 +618,7 @@ $effect(() => {
 			{appPath}
 			{onLatest}
 			{savedApp}
-			{summary}
+			bind:summary
 			bind:customPath
 			bind:deploymentMsg
 			bind:customPathError
@@ -601,6 +634,42 @@ $effect(() => {
 	</DrawerContent>
 </Drawer>
 
+<Drawer bind:open={publishToHubDrawerOpen} size="600px">
+	<DrawerContent title="Publish to Hub" on:close={() => (publishToHubDrawerOpen = false)}>
+		{#snippet actions()}
+			<Button
+				loading={publishingToHub}
+				disabled={!app}
+				on:click={publishToHub}
+				variant="accent"
+				startIcon={{ icon: Download }}
+			>
+				Download & open hub
+			</Button>
+		{/snippet}
+		<div class="flex flex-col gap-4">
+			<p class="text-secondary text-sm">
+				This will download a zip file containing your raw app bundle and open the Windmill Hub
+				submission page.
+			</p>
+			<div class="text-sm">
+				<p class="font-semibold mb-2">The zip file will contain:</p>
+				<ul class="list-disc list-inside text-secondary space-y-1">
+					<li
+						><code class="text-xs bg-surface-secondary px-1 rounded">app.yaml</code> - App configuration</li
+					>
+					<li
+						><code class="text-xs bg-surface-secondary px-1 rounded">bundle.js</code> - JavaScript bundle</li
+					>
+					<li
+						><code class="text-xs bg-surface-secondary px-1 rounded">bundle.css</code> - CSS styles</li
+					>
+				</ul>
+			</div>
+		</div>
+	</DrawerContent>
+</Drawer>
+
 <AppJobsDrawer
 	bind:open={jobsDrawerOpen}
 	on:clear={() => {
@@ -733,7 +802,17 @@ $effect(() => {
 							onClick: () => {
 								window.open(`/apps/add?template=${appPath}`)
 							}
-						}
+						},
+						...(!isCloudHosted() && !isRuleActive('DisableWorkspaceForking')
+							? [
+									{
+										label: 'Edit in workspace fork',
+										onClick: () => {
+											window.open(buildForkEditUrl('raw_app', appPath))
+										}
+									}
+								]
+							: [])
 					]
 				: undefined}
 		>

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

@@ -51,6 +51,6 @@ declare const RawAppEditorHeader: $$__sveltets_2_IsomorphicComponent<Props, {
     restore: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "summary" | "jobs" | "version" | "policy" | "jobsById" | "savedApp">;
+}, {}, {}, "summary" | "version" | "jobs" | "policy" | "jobsById" | "savedApp">;
 type RawAppEditorHeader = InstanceType<typeof RawAppEditorHeader>;
 export default RawAppEditorHeader;

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

@@ -1,5 +1,4 @@
 import type { ScriptLang } from '../../gen';
-import Editor from '../Editor.svelte';
 import type { InlineScript, StaticAppInput, UserAppInput, CtxAppInput } from '../apps/inputType';
 import { SvelteSet } from 'svelte/reactivity';
 interface Props {
@@ -11,7 +10,7 @@ interface Props {
     fields?: Record<string, StaticAppInput | UserAppInput | CtxAppInput>;
     path: string;
     onRun: () => Promise<void>;
-    editor?: Editor | undefined;
+    editor?: any | undefined;
     lastDeployedCode?: string | undefined;
     /** Called when code is selected in the editor */
     onSelectionChange?: (selection: {

package/package/components/raw_apps/RawAppInlineScriptPanelList.svelte

@@ -2,10 +2,46 @@
 import { Plus, File, AlertCircle, AlertTriangle } from 'lucide-svelte';
 import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
 import Popover from '../Popover.svelte';
-import { getNextId } from '../flows/idUtils';
+import { getNextId, forbiddenIds } from '../flows/idUtils';
 import { rawAppLintStore } from './lintStore';
 import RunnableRow from './RunnableRow.svelte';
+import { sendUserToast } from '../../toast';
 let { selectedRunnable = $bindable(), runnables, onSelect } = $props();
+let editingId = $state(undefined);
+const validIdPattern = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
+function renameRunnable(oldId, newId) {
+    if (newId === oldId) {
+        editingId = undefined;
+        return;
+    }
+    if (!newId) {
+        sendUserToast('ID cannot be empty', true);
+        editingId = undefined;
+        return;
+    }
+    if (!validIdPattern.test(newId)) {
+        sendUserToast('ID must be a valid identifier (letters, digits, underscores)', true);
+        editingId = undefined;
+        return;
+    }
+    if (newId in runnables) {
+        sendUserToast(`ID "${newId}" is already in use`, true);
+        editingId = undefined;
+        return;
+    }
+    if (forbiddenIds.includes(newId)) {
+        sendUserToast(`"${newId}" is a reserved keyword`, true);
+        editingId = undefined;
+        return;
+    }
+    runnables[newId] = runnables[oldId];
+    delete runnables[oldId];
+    if (selectedRunnable === oldId) {
+        selectedRunnable = newId;
+        onSelect?.(newId);
+    }
+    editingId = undefined;
+}
 // Subscribe to lint store for reactive updates
 let lintSnapshot = $state(rawAppLintStore.getSnapshot());
 $effect(() => {
@@ -56,6 +92,7 @@ function createBackgroundScript() {
 								{id}
 								{runnable}
 								isSelected={selectedRunnable === id}
+								isEditing={editingId === id}
 								onSelect={() => {
 									selectedRunnable = id
 									onSelect?.(id)
@@ -66,6 +103,9 @@ function createBackgroundScript() {
 										selectedRunnable = undefined
 									}
 								}}
+								onRename={(newId) => renameRunnable(id, newId)}
+								onRequestEdit={() => (editingId = id)}
+								onCancelEdit={() => (editingId = undefined)}
 							/>
 						{/if}
 					{/each}

package/package/components/raw_apps/RawAppInlineScriptRunnable.svelte

@@ -191,7 +191,6 @@ $effect(() => {
 										customTitle={meta?.['customTitle']}
 										loading={meta?.['loading']}
 										documentationLink={meta?.['documentationLink']}
-										markdownTooltip={meta?.['markdownTooltip']}
 										allowTypeChange={meta?.['allowTypeChange']}
 										displayType
 									/>

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

@@ -3,7 +3,6 @@ interface Props {
     runnables: Record<string, Runnable>;
     selectedRunnable: string | undefined;
     appPath: string;
-    initRunnablesContent: Record<string, string>;
     /** Called when code is selected in the editor */
     onSelectionChange?: (selection: {
         content: string;

package/package/components/raw_apps/RawAppInputsSpecEditor.svelte

@@ -17,7 +17,7 @@ let ctxProperties = $derived([
     { value: 'workspace', label: 'Workspace', subtitle: `string — "${$workspaceStore ?? 'unknown'}"` },
     { value: 'author', label: 'Author', subtitle: `string — "${$userStore?.email ?? 'unknown'}"` }
 ]);
-let { id, componentInput = $bindable(), key, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, loading = false, documentationLink = undefined, markdownTooltip = undefined } = $props();
+let { id, componentInput = $bindable(), key, shouldCapitalize = true, resourceOnly = false, tooltip = undefined, fieldType, subFieldType, format, selectOptions, placeholder, customTitle = undefined, displayType = false, allowTypeChange = true, loading = false, documentationLink = undefined } = $props();
 run(() => {
     if (componentInput == undefined) {
         //@ts-ignore
@@ -48,9 +48,9 @@ run(() => {
 					{#if loading}
 						<Loader2 size={14} class="animate-spin ml-2" />
 					{/if}
-					{#if tooltip || markdownTooltip}
-						<Tooltip small {documentationLink} {markdownTooltip}>
-							{tooltip}
+					{#if tooltip}
+						<Tooltip small {documentationLink}>
+							{@html tooltip}
 						</Tooltip>
 					{/if}
 				</div>

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

@@ -17,7 +17,6 @@ interface Props {
     allowTypeChange?: boolean;
     loading?: boolean;
     documentationLink?: string | undefined;
-    markdownTooltip?: string | undefined;
 }
 declare const RawAppInputsSpecEditor: import("svelte").Component<Props, {}, "componentInput">;
 type RawAppInputsSpecEditor = ReturnType<typeof RawAppInputsSpecEditor>;

package/package/components/raw_apps/RawAppSidebar.svelte

@@ -1,14 +1,13 @@
 <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 FileExplorer from '../FileExplorer.svelte';
 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';
 import RawAppDataTableList from './RawAppDataTableList.svelte';
 import RawAppDataTableDrawer from './RawAppDataTableDrawer.svelte';
-let { runnables, selectedRunnable = $bindable(), files = $bindable(), modules, onSelectFile, selectedDocument = $bindable(), historyManager, historySelectedId, onHistorySelect, onHistorySelectCurrent, onManualSnapshot, dataTableRefs = [], onDataTableRefsChange, defaultDatatable = undefined, defaultSchema = undefined, onDefaultChange } = $props();
+let { runnables, selectedRunnable = $bindable(), files = $bindable({}), modules, onSelectFile, selectedDocument = $bindable(), historyManager, historySelectedId, onHistorySelect, onHistorySelectCurrent, onManualSnapshot, dataTableRefs = [], onDataTableRefsChange, defaultDatatable = undefined, defaultSchema = undefined, onDefaultChange } = $props();
 let dataTableDrawer = $state();
 let selectedDataTableIndex = $state(undefined);
 function handleAddDataTable(ref) {
@@ -22,303 +21,52 @@ function handleRemoveDataTable(index) {
 }
 function handleSelectDataTable(ref, index) {
     selectedDataTableIndex = selectedDataTableIndex === index ? undefined : index;
-    // Open the drawer in manage mode when selecting a data table
     if (selectedDataTableIndex === index) {
         dataTableDrawer?.openDrawerWithRef(ref);
     }
 }
-// Track pending new file/folder that hasn't been confirmed yet
-let pendingNewFilePath = $state(undefined);
-const fileTree = $derived(buildFileTree([
-    ...Object.keys(files ?? {}),
-    ...(pendingNewFilePath ? [pendingNewFilePath] : [])
-]));
-let pathToEdit = $state(undefined);
-// Helper to find a unique path by appending numbers if needed
-function getUniquePath(basePath) {
-    const existingPaths = new Set([...Object.keys(files ?? {}), pendingNewFilePath].filter(Boolean));
-    if (!existingPaths.has(basePath)) {
-        return basePath;
-    }
-    // Split path into name and extension (for files) or handle folders
-    const isFolder = basePath.endsWith('/');
-    let pathWithoutTrailing = isFolder ? basePath.slice(0, -1) : basePath;
-    const lastSlash = pathWithoutTrailing.lastIndexOf('/');
-    const parentPath = pathWithoutTrailing.substring(0, lastSlash + 1);
-    const fileName = pathWithoutTrailing.substring(lastSlash + 1);
-    let nameWithoutExt;
-    let ext;
-    if (isFolder) {
-        nameWithoutExt = fileName;
-        ext = '';
-    }
-    else {
-        const dotIndex = fileName.lastIndexOf('.');
-        if (dotIndex > 0) {
-            nameWithoutExt = fileName.substring(0, dotIndex);
-            ext = fileName.substring(dotIndex);
-        }
-        else {
-            nameWithoutExt = fileName;
-            ext = '';
-        }
-    }
-    // Try incrementing numbers until we find a unique path
-    let counter = 1;
-    let candidatePath;
-    do {
-        const newName = `${nameWithoutExt} (${counter})${ext}`;
-        candidatePath = isFolder ? `${parentPath}${newName}/` : `${parentPath}${newName}`;
-        counter++;
-    } while (existingPaths.has(candidatePath));
-    return candidatePath;
-}
-function handleFileClick(path) {
-    console.log('File clicked:', path);
+let fileExplorer = $state();
+function handleSelectPath(path) {
     selectedDocument = path;
-    // Only open files in the editor, not folders
     if (!path.endsWith('/')) {
         onSelectFile?.(path);
     }
 }
-function handleAddFile(folderPath) {
-    console.log('Add file to:', folderPath);
-    // Ensure folderPath ends with /
-    const normalizedFolder = folderPath.endsWith('/') ? folderPath : folderPath + '/';
-    const basePath = normalizedFolder + 'newfile.txt';
-    const newPath = getUniquePath(basePath);
-    // Don't update files yet - just mark as pending and enter edit mode
-    pendingNewFilePath = newPath;
-    pathToEdit = newPath;
-}
-function handleRename(oldPath, newName) {
-    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('/');
-    // For folders, ensure new path also ends with /
-    if (isFolder && !newPath.endsWith('/')) {
-        newPath = newPath + '/';
-    }
-    // Check if this is a pending new file/folder being created
-    const isPendingNew = pendingNewFilePath === oldPath;
-    // For existing items, skip if name didn't change
-    if (!isPendingNew && oldPath === newPath) {
-        pathToEdit = undefined;
-        return;
-    }
-    if (!files) {
-        files = {};
-    }
-    const nfiles = { ...files };
-    if (isFolder) {
-        if (isPendingNew) {
-            // Creating a new folder - just add it with the final name
-            nfiles[newPath] = '';
-            pendingNewFilePath = undefined;
-        }
-        else {
-            // Renaming existing folder
-            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 = newPath;
-    }
-    else {
-        if (isPendingNew) {
-            // Creating a new file - just add it with the final name
-            nfiles[newPath] = '';
-            pendingNewFilePath = undefined;
-        }
-        else {
-            // Renaming existing file
-            nfiles[newPath] = nfiles[oldPath];
-            delete nfiles[oldPath];
-        }
-        selectedDocument = newPath;
-    }
-    files = nfiles;
-    pathToEdit = undefined;
-    // Select the new file in the editor (only for files, not folders)
-    if (!isFolder) {
-        onSelectFile?.(newPath);
-    }
-}
-function handleAddFolder(folderPath) {
-    console.log('Add folder to:', folderPath);
-    // Ensure folderPath ends with /
-    const normalizedFolder = folderPath.endsWith('/') ? folderPath : folderPath + '/';
-    const basePath = normalizedFolder + 'newfolder/';
-    const newPath = getUniquePath(basePath);
-    // Don't update files yet - just mark as pending and enter edit mode
-    pendingNewFilePath = newPath;
-    pathToEdit = newPath;
-}
-function handleAddRootFile() {
-    console.log('Add file to root or selected folder');
-    let basePath;
-    if (selectedDocument) {
-        // If a folder is selected, add the file inside it
-        if (selectedDocument.endsWith('/')) {
-            basePath = selectedDocument + 'newfile.txt';
-        }
-        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('/') + '/';
-                basePath = parentPath + 'newfile.txt';
-            }
-            else {
-                // File is at root
-                basePath = '/newfile.txt';
-            }
-        }
-    }
-    else {
-        basePath = '/newfile.txt';
-    }
-    const newPath = getUniquePath(basePath);
-    // Don't update files yet - just mark as pending and enter edit mode
-    pendingNewFilePath = newPath;
-    pathToEdit = newPath;
-}
-function handleAddRootFolder() {
-    let basePath;
-    if (selectedDocument) {
-        // If a folder is selected, add the folder inside it
-        if (selectedDocument.endsWith('/')) {
-            basePath = selectedDocument + 'newfolder/';
-        }
-        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('/') + '/';
-                basePath = parentPath + 'newfolder/';
-            }
-            else {
-                // File is at root
-                basePath = '/newfolder/';
-            }
-        }
-    }
-    else {
-        basePath = '/newfolder/';
-    }
-    const newPath = getUniquePath(basePath);
-    // Don't update files yet - just mark as pending and enter edit mode
-    pendingNewFilePath = newPath;
-    pathToEdit = newPath;
-}
-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="sm" fullHeight={false} title="frontend" id="app-editor-frontend-panel">
 	{#snippet action()}
 		<div class="flex gap-1">
-			<div class="flex gap-1">
-				<Button
-					onClick={handleAddRootFile}
-					title="Add file to root"
-					unifiedSize="xs"
-					variant="subtle"
-					btnClasses="px-1 gap-0.5"
-				>
-					<Plus size={12} />
-					<File size={12} />
-				</Button>
-				<Button
-					onClick={handleAddRootFolder}
-					title="Add folder to root"
-					unifiedSize="xs"
-					variant="subtle"
-					btnClasses="px-1 gap-0.5"
-				>
-					<Plus size={12} />
-					<Folder size={12} />
-				</Button>
-			</div>
+			<Button
+				onClick={() => fileExplorer?.handleAddRootFile()}
+				title="Add file to root"
+				unifiedSize="xs"
+				variant="subtle"
+				btnClasses="px-1 gap-0.5"
+			>
+				<Plus size={12} />
+				<File size={12} />
+			</Button>
+			<Button
+				onClick={() => fileExplorer?.handleAddRootFolder()}
+				title="Add folder to root"
+				unifiedSize="xs"
+				variant="subtle"
+				btnClasses="px-1 gap-0.5"
+			>
+				<Plus size={12} />
+				<Folder size={12} />
+			</Button>
 		</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}
-				{pathToEdit}
-				onRequestEdit={(path) => (pathToEdit = path)}
-				onCancelEdit={() => {
-					pathToEdit = undefined
-					pendingNewFilePath = undefined
-				}}
-			/>
-		{/each}
-		<FileTreeNode
-			node={{
-				name: 'wmill.ts',
-				path: '/wmill.ts',
-				isFolder: false
-			}}
-			noEdit={true}
-			onFileClick={handleFileClick}
-			onAddFile={handleAddFile}
-			onAddFolder={handleAddFolder}
-			selectedPath={selectedDocument}
-		/>
-	</div>
+	<FileExplorer
+		bind:this={fileExplorer}
+		bind:files
+		selectedPath={selectedDocument}
+		onSelectPath={handleSelectPath}
+		extraNodes={[{ name: 'wmill.ts', path: '/wmill.ts', isFolder: false }]}
+		hideHeader
+	/>
 </PanelSection>
 
 <RawAppModules {modules} />

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

@@ -5,7 +5,7 @@ import type { DataTableRef } from './dataTableRefUtils';
 interface Props {
     runnables: Record<string, Runnable>;
     selectedRunnable: string | undefined;
-    files: Record<string, string> | undefined;
+    files: Record<string, string>;
     modules?: Modules;
     onSelectFile?: (path: string) => void;
     selectedDocument: string | undefined;