windmill-components 1.623.2 → 1.655.0

package/package/components/FieldHeader.svelte.d.ts

@@ -1,18 +1,4 @@
-import { InfoIcon } from 'lucide-svelte';
-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 FieldHeader: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     label: string;
     format?: string;
     contentEncoding?: string;
@@ -24,10 +10,9 @@ declare const FieldHeader: $$__sveltets_2_IsomorphicComponent<{
     prettify?: boolean;
     simpleTooltip?: string | undefined;
     lightHeader?: boolean;
-    SimpleTooltipIcon?: typeof InfoIcon;
+    SimpleTooltipIcon?: any;
     simpleTooltipIconClass?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FieldHeader = InstanceType<typeof FieldHeader>;
+}
+declare const FieldHeader: import("svelte").Component<Props, {}, "">;
+type FieldHeader = ReturnType<typeof FieldHeader>;
 export default FieldHeader;

package/package/components/FileExplorer.svelte

@@ -0,0 +1,249 @@
+<script lang="ts">import Button from './common/button/Button.svelte';
+import { Plus, File, Folder, FolderOpen } from 'lucide-svelte';
+import FileTreeNode from './raw_apps/FileTreeNode.svelte';
+import { buildFileTree } from './raw_apps/fileTreeUtils';
+let { files = $bindable({}), selectedPath = undefined, onSelectPath, extraNodes, showRoot = false, hideHeader = false } = $props();
+let pendingNewFilePath = $state(undefined);
+let pathToEdit = $state(undefined);
+// Empty folders exist only in the UI until a file is created inside them
+let emptyFolders = $state([]);
+const fileTree = $derived(buildFileTree([
+    ...Object.keys(files ?? {}),
+    ...emptyFolders,
+    ...(pendingNewFilePath ? [pendingNewFilePath] : [])
+]));
+function getUniquePath(basePath) {
+    const existingPaths = new Set([...Object.keys(files ?? {}), ...emptyFolders, pendingNewFilePath].filter(Boolean));
+    if (!existingPaths.has(basePath))
+        return basePath;
+    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('.');
+        nameWithoutExt = dotIndex > 0 ? fileName.substring(0, dotIndex) : fileName;
+        ext = dotIndex > 0 ? fileName.substring(dotIndex) : '';
+    }
+    let counter = 1;
+    let candidate;
+    do {
+        const newName = `${nameWithoutExt} (${counter})${ext}`;
+        candidate = isFolder ? `${parentPath}${newName}/` : `${parentPath}${newName}`;
+        counter++;
+    } while (existingPaths.has(candidate));
+    return candidate;
+}
+function handleFileClick(path) {
+    onSelectPath?.(path);
+}
+function handleAddFile(folderPath) {
+    const normalizedFolder = folderPath.endsWith('/') ? folderPath : folderPath + '/';
+    const basePath = normalizedFolder + 'newfile.txt';
+    const newPath = getUniquePath(basePath);
+    pendingNewFilePath = newPath;
+    pathToEdit = newPath;
+}
+export function handleAddRootFile() {
+    let basePath;
+    if (selectedPath && selectedPath !== '/') {
+        if (selectedPath.endsWith('/')) {
+            basePath = selectedPath + 'newfile.txt';
+        }
+        else {
+            const pathParts = selectedPath.split('/').filter(Boolean);
+            const parentPath = pathParts.length > 1 ? '/' + pathParts.slice(0, -1).join('/') + '/' : '/';
+            basePath = parentPath + 'newfile.txt';
+        }
+    }
+    else {
+        basePath = '/newfile.txt';
+    }
+    const newPath = getUniquePath(basePath);
+    pendingNewFilePath = newPath;
+    pathToEdit = newPath;
+}
+function handleAddFolder(folderPath) {
+    const normalizedFolder = folderPath.endsWith('/') ? folderPath : folderPath + '/';
+    const basePath = normalizedFolder + 'newfolder/';
+    const newPath = getUniquePath(basePath);
+    pendingNewFilePath = newPath;
+    pathToEdit = newPath;
+}
+export function handleAddRootFolder() {
+    let basePath;
+    if (selectedPath && selectedPath !== '/') {
+        if (selectedPath.endsWith('/')) {
+            basePath = selectedPath + 'newfolder/';
+        }
+        else {
+            const pathParts = selectedPath.split('/').filter(Boolean);
+            const parentPath = pathParts.length > 1 ? '/' + pathParts.slice(0, -1).join('/') + '/' : '/';
+            basePath = parentPath + 'newfolder/';
+        }
+    }
+    else {
+        basePath = '/newfolder/';
+    }
+    const newPath = getUniquePath(basePath);
+    pendingNewFilePath = newPath;
+    pathToEdit = newPath;
+}
+function handleRename(oldPath, newName) {
+    const isFolder = oldPath.endsWith('/');
+    const pathParts = oldPath.split('/').filter(Boolean);
+    const parentPath = '/' + pathParts.slice(0, -1).join('/');
+    let newPath = parentPath === '/' ? '/' + newName : parentPath + '/' + newName;
+    if (isFolder && !newPath.endsWith('/')) {
+        newPath = newPath + '/';
+    }
+    const isPendingNew = pendingNewFilePath === oldPath;
+    if (!isPendingNew && oldPath === newPath) {
+        pathToEdit = undefined;
+        return;
+    }
+    const nfiles = { ...files };
+    if (isFolder) {
+        if (isPendingNew) {
+            // New empty folder — track in UI until a file is created inside
+            emptyFolders = [...emptyFolders, newPath];
+            pendingNewFilePath = undefined;
+        }
+        else {
+            // Rename all children under old folder path
+            for (const key of Object.keys(nfiles)) {
+                if (key === oldPath || key.startsWith(oldPath)) {
+                    const newKey = newPath + key.substring(oldPath.length);
+                    nfiles[newKey] = nfiles[key];
+                    delete nfiles[key];
+                }
+            }
+            // Also rename in emptyFolders
+            emptyFolders = emptyFolders.map((f) => f === oldPath || f.startsWith(oldPath)
+                ? newPath + f.substring(oldPath.length)
+                : f);
+        }
+    }
+    else {
+        if (isPendingNew) {
+            nfiles[newPath] = '';
+            pendingNewFilePath = undefined;
+        }
+        else {
+            nfiles[newPath] = nfiles[oldPath];
+            delete nfiles[oldPath];
+        }
+        // Remove empty folders that are now implicitly defined by this file path
+        emptyFolders = emptyFolders.filter((f) => !newPath.startsWith(f));
+    }
+    files = nfiles;
+    pathToEdit = undefined;
+    onSelectPath?.(newPath);
+}
+function handleDelete(path) {
+    const isFolder = path.endsWith('/');
+    const nfiles = { ...files };
+    if (isFolder) {
+        for (const key of Object.keys(nfiles)) {
+            if (key === path || key.startsWith(path)) {
+                delete nfiles[key];
+            }
+        }
+        emptyFolders = emptyFolders.filter((f) => f !== path && !f.startsWith(path));
+    }
+    else {
+        delete nfiles[path];
+    }
+    files = nfiles;
+    if (selectedPath === path || (isFolder && selectedPath?.startsWith(path))) {
+        const remaining = Object.keys(nfiles);
+        if (remaining.length > 0) {
+            onSelectPath?.(remaining[0]);
+        }
+        else {
+            onSelectPath?.(showRoot ? '/' : '');
+        }
+    }
+}
+</script>
+
+{#if !hideHeader}
+	<div class="p-2 border-b flex items-center justify-between">
+		<span class="text-xs font-semibold text-emphasis">Files</span>
+		<div class="flex gap-1">
+			<Button
+				onClick={handleAddRootFile}
+				title="Add file"
+				unifiedSize="xs"
+				variant="subtle"
+				btnClasses="px-1 gap-0.5"
+			>
+				<Plus size={12} />
+				<File size={12} />
+			</Button>
+			<Button
+				onClick={handleAddRootFolder}
+				title="Add folder"
+				unifiedSize="xs"
+				variant="subtle"
+				btnClasses="px-1 gap-0.5"
+			>
+				<Plus size={12} />
+				<Folder size={12} />
+			</Button>
+		</div>
+	</div>
+{/if}
+<div class="flex-1 overflow-y-auto py-1 w-full">
+	{#if showRoot}
+		<button
+			onclick={() => onSelectPath?.('/')}
+			class="w-full flex items-center gap-1 px-2 py-1 text-xs hover:bg-surface-hover transition-colors rounded text-left {selectedPath ===
+			'/'
+				? 'bg-surface-accent-selected'
+				: ''}"
+		>
+			<FolderOpen size={12} class="flex-shrink-0 text-secondary" />
+			<span
+				class="truncate text-primary font-normal {selectedPath === '/' ? 'text-accent' : ''}"
+				>/</span
+			>
+		</button>
+	{/if}
+	{#each fileTree as node (node.path)}
+		<FileTreeNode
+			{node}
+			onFileClick={handleFileClick}
+			onAddFile={handleAddFile}
+			onAddFolder={handleAddFolder}
+			onRename={handleRename}
+			onDelete={handleDelete}
+			{selectedPath}
+			{pathToEdit}
+			onRequestEdit={(path) => (pathToEdit = path)}
+			onCancelEdit={() => {
+				pathToEdit = undefined
+				pendingNewFilePath = undefined
+			}}
+		/>
+	{/each}
+	{#if extraNodes}
+		{#each extraNodes as node (node.path)}
+			<FileTreeNode
+				{node}
+				noEdit
+				onFileClick={handleFileClick}
+				onAddFile={handleAddFile}
+				onAddFolder={handleAddFolder}
+				{selectedPath}
+			/>
+		{/each}
+	{/if}
+</div>

package/package/components/FileExplorer.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { TreeNode } from './raw_apps/fileTreeUtils';
+interface Props {
+    /** File path → content map. Keys use / prefix (e.g. /index.html). */
+    files: Record<string, string>;
+    /** Currently selected path (/-prefixed). Read-only; changes via onSelectPath callback. */
+    selectedPath?: string | undefined;
+    /** Called when user clicks a path (file or folder). */
+    onSelectPath?: (path: string) => void;
+    /** Extra tree nodes appended after the main tree (e.g. read-only wmill.ts). */
+    extraNodes?: TreeNode[];
+    /** Show a root / entry at the top of the tree. */
+    showRoot?: boolean;
+    /** Hide the built-in header (useful when parent provides its own). */
+    hideHeader?: boolean;
+}
+declare const FileExplorer: import("svelte").Component<Props, {
+    handleAddRootFile: () => void;
+    handleAddRootFolder: () => void;
+}, "files">;
+type FileExplorer = ReturnType<typeof FileExplorer>;
+export default FileExplorer;

package/package/components/FilesetEditor.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">import SimpleEditor from './SimpleEditor.svelte';
+import FileExplorer from './FileExplorer.svelte';
+let { args = $bindable({}) } = $props();
+// Internal files map uses /-prefixed keys (matching tree node paths).
+// Compute initial files + selection together to avoid referencing $state outside reactive context.
+const initialFiles = Object.fromEntries(Object.entries(args ?? {}).map(([k, v]) => ['/' + k, String(v ?? '')]));
+const initialFile = Object.keys(initialFiles).find((k) => !k.endsWith('/'));
+let files = $state(initialFiles);
+let selectedPath = $state(initialFile ?? '/');
+let editContent = $state(initialFile ? (initialFiles[initialFile] ?? '') : '');
+// The selected file path (/-prefixed, not a folder)
+const selectedFileKey = $derived.by(() => {
+    if (selectedPath != null && !selectedPath.endsWith('/')) {
+        return selectedPath;
+    }
+    return undefined;
+});
+// Display key without leading /
+const selectedDisplayKey = $derived(selectedFileKey?.replace(/^\//, ''));
+function flushEditContent() {
+    if (selectedFileKey != null && selectedFileKey in files && files[selectedFileKey] !== editContent) {
+        files = { ...files, [selectedFileKey]: editContent };
+    }
+}
+function handleSelectPath(path) {
+    flushEditContent();
+    selectedPath = path;
+    if (!path.endsWith('/') && path !== '') {
+        editContent = files[path] ?? '';
+    }
+}
+// Track the last args we wrote so we can detect external changes.
+let lastWrittenArgs = $state(args ?? {});
+// Sync files → args, overlaying current editContent for the active file.
+// This avoids spreading a new files object on every keystroke.
+$effect(() => {
+    const currentKey = selectedFileKey;
+    const currentContent = editContent;
+    const newArgs = {};
+    for (const [key, value] of Object.entries(files)) {
+        if (!key.endsWith('/')) {
+            const argKey = key.replace(/^\//, '');
+            newArgs[argKey] = key === currentKey ? currentContent : value;
+        }
+    }
+    lastWrittenArgs = newArgs;
+    args = newArgs;
+});
+// Sync args → files when args changes externally (e.g. from AI generation).
+$effect(() => {
+    const currentArgs = args;
+    if (currentArgs === lastWrittenArgs)
+        return;
+    // Check if the args object is actually different
+    const currentKeys = Object.keys(currentArgs ?? {}).sort().join('\0');
+    const lastKeys = Object.keys(lastWrittenArgs ?? {}).sort().join('\0');
+    if (currentKeys === lastKeys) {
+        const allSame = Object.entries(currentArgs ?? {}).every(([k, v]) => lastWrittenArgs[k] === v);
+        if (allSame)
+            return;
+    }
+    const newFiles = Object.fromEntries(Object.entries(currentArgs ?? {}).map(([k, v]) => ['/' + k, String(v ?? '')]));
+    files = newFiles;
+    lastWrittenArgs = currentArgs;
+    const firstFile = Object.keys(newFiles).find((k) => !k.endsWith('/'));
+    selectedPath = firstFile ?? '/';
+    editContent = firstFile ? (newFiles[firstFile] ?? '') : '';
+});
+function inferLang(filePath) {
+    const ext = filePath.split('.').pop()?.toLowerCase();
+    if (!ext)
+        return 'plaintext';
+    const langMap = {
+        json: 'json',
+        yaml: 'yaml',
+        yml: 'yaml',
+        toml: 'toml',
+        ini: 'ini',
+        xml: 'xml',
+        html: 'html',
+        css: 'css',
+        js: 'javascript',
+        ts: 'typescript',
+        py: 'python',
+        sh: 'shell',
+        bash: 'shell',
+        sql: 'sql',
+        md: 'markdown',
+        cfg: 'ini',
+        conf: 'ini',
+        j2: 'jinja',
+        jinja: 'jinja'
+    };
+    return langMap[ext] ?? 'plaintext';
+}
+</script>
+
+<div class="flex border rounded-md overflow-hidden h-[60vh]">
+	<div class="w-56 shrink-0 border-r flex flex-col bg-surface-secondary overflow-y-auto">
+		<FileExplorer
+			bind:files
+			{selectedPath}
+			onSelectPath={handleSelectPath}
+			showRoot
+		/>
+	</div>
+	<div class="flex-1 min-w-0 overflow-y-auto">
+		{#if selectedDisplayKey != null}
+			<div class="px-2 border-b text-xs text-secondary bg-surface-secondary sticky top-0 z-10 flex items-center h-[36.5px]">
+				{selectedDisplayKey}
+			</div>
+			{#key selectedFileKey}
+				<SimpleEditor
+					autoHeight
+					lang={inferLang(selectedDisplayKey)}
+					bind:code={editContent}
+					fixedOverflowWidgets={false}
+				/>
+			{/key}
+		{:else}
+			<div class="flex items-center justify-center h-full text-xs text-secondary">
+				Select a file or add a new one
+			</div>
+		{/if}
+	</div>
+</div>

package/package/components/FilesetEditor.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    args: Record<string, any>;
+}
+declare const FilesetEditor: import("svelte").Component<Props, {}, "args">;
+type FilesetEditor = ReturnType<typeof FilesetEditor>;
+export default FilesetEditor;