windmill-components 1.83.4 → 1.85.0

package/components/Path.svelte

@@ -1,18 +1,22 @@
+<script context="module">"use strict";
+const lastMetaUsed = writable(undefined);
+</script>
+
 <script>import { pathToMeta } from '../common';
-import { AppService, FlowService, FolderService, GroupService, ResourceService, ScheduleService, ScriptService, VariableService } from '../gen';
+import { AppService, FlowService, FolderService, ResourceService, ScheduleService, ScriptService, VariableService } from '../gen';
 import { superadmin, userStore, workspaceStore } from '../stores';
+import { faEye, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
-import Required from './Required.svelte';
+import { Icon } from 'svelte-awesome';
+import { writable } from 'svelte/store';
 import { Button, Drawer, DrawerContent } from './common';
-import { faEye, faPlus } from '@fortawesome/free-solid-svg-icons';
-import ToggleButtonGroup from './common/toggleButton/ToggleButtonGroup.svelte';
+import Badge from './common/badge/Badge.svelte';
 import ToggleButton from './common/toggleButton/ToggleButton.svelte';
-import { Icon } from 'svelte-awesome';
-import Tooltip from './Tooltip.svelte';
+import ToggleButtonGroup from './common/toggleButton/ToggleButtonGroup.svelte';
 import FolderEditor from './FolderEditor.svelte';
-import GroupEditor from './GroupEditor.svelte';
 import { random_adj } from './random_positive_adjetive';
-import Badge from './common/badge/Badge.svelte';
+import Required from './Required.svelte';
+import Tooltip from './Tooltip.svelte';
 let meta = undefined;
 export let namePlaceholder = '';
 export let initialPath;
@@ -24,12 +28,15 @@ export let kind;
 let inputP = undefined;
 const dispatch = createEventDispatcher();
 let folders = [];
-let groups = [];
 $: meta && onMetaChange();
 function onMetaChange() {
     if (meta) {
         path = metaToPath(meta);
         validate(meta, path, kind);
+        $lastMetaUsed = {
+            ...meta,
+            name: ''
+        };
     }
 }
 function metaToPath(meta) {
@@ -47,12 +54,17 @@ function handleKeyUp(event) {
 }
 export async function reset() {
     if (path == '' || path == 'u//') {
-        meta = {
-            ownerKind: 'user',
-            name: random_adj() + '_' + namePlaceholder,
-            owner: ''
-        };
-        meta.owner = $userStore.username.split('@')[0];
+        if ($lastMetaUsed == undefined) {
+            meta = {
+                ownerKind: 'user',
+                name: random_adj() + '_' + namePlaceholder,
+                owner: ''
+            };
+            meta.owner = $userStore.username.split('@')[0].replace(/[^a-zA-Z0-9]/g, '');
+        }
+        else {
+            meta = { ...$lastMetaUsed, name: random_adj() + '_' + namePlaceholder };
+        }
         let newMeta = { ...meta };
         while (await pathExists(metaToPath(newMeta), kind)) {
             disabled = true;
@@ -73,20 +85,18 @@ async function loadFolders() {
     let initialFolder = '';
     if (initialPath?.split('/')?.[0] == 'f') {
         initialFolder = initialPath?.split('/')?.[1];
-        initialFolders.push(initialFolder);
+        initialFolders.push({ name: initialFolder, write: true });
     }
     folders = initialFolders.concat((await FolderService.listFolderNames({
         workspace: $workspaceStore
-    })).filter((x) => x != initialFolder));
-}
-async function loadGroups() {
-    let initialGroups = [];
-    if (initialPath?.split('/')?.[0] == 'f') {
-        initialGroups.push(initialPath?.split('/')?.[1]);
-    }
-    groups = initialGroups.concat(await GroupService.listGroupNames({
-        workspace: $workspaceStore
-    }));
+    }))
+        .filter((x) => x != initialFolder)
+        .map((x) => ({
+        name: x,
+        write: ($userStore?.folders?.includes(x) == true ?? false) ||
+            ($userStore?.is_admin ?? false) ||
+            ($userStore?.is_super_admin ?? false)
+    })));
 }
 async function validate(meta, path, kind) {
     error = '';
@@ -164,7 +174,6 @@ function validateName(meta) {
 $: {
     if ($workspaceStore && $userStore) {
         loadFolders();
-        loadGroups();
         initPath();
     }
 }
@@ -192,54 +201,14 @@ async function addFolder() {
         requestBody: { name: newFolderName }
     });
     folderCreated = newFolderName;
-    if (meta) {
-        meta.owner = newFolderName;
-    }
+    $userStore?.folders?.push(newFolderName);
     loadFolders();
-}
-let newGroup;
-let viewGroup;
-let newGroupName;
-let groupCreated = undefined;
-async function addGroup() {
-    await GroupService.createGroup({
-        workspace: $workspaceStore ?? '',
-        requestBody: { name: newGroupName }
-    });
-    groupCreated = newGroupName;
     if (meta) {
-        meta.owner = newGroupName;
+        meta.owner = newFolderName;
     }
-    loadGroups();
 }
 </script>
 
-<Drawer bind:this={newGroup}>
-	<DrawerContent
-		title="New Folder"
-		on:close={() => {
-			newGroup.closeDrawer()
-			groupCreated = undefined
-		}}
-	>
-		<div class="flex flex-row">
-			<input class="mr-2" placeholder="New group name" bind:value={newGroupName} />
-			<Button size="md" endIcon={{ icon: faPlus }} disabled={!newGroupName} on:click={addGroup}>
-				New&nbsp;group
-			</Button>
-		</div>
-		{#if groupCreated}
-			<div class="mt-8" />
-			<GroupEditor name={groupCreated} />
-		{/if}
-	</DrawerContent>
-</Drawer>
-<Drawer bind:this={viewGroup}>
-	<DrawerContent title="Folder {meta?.owner}" on:close={viewGroup.closeDrawer}>
-		<GroupEditor name={meta?.owner ?? ''} />
-	</DrawerContent>
-</Drawer>
-
 <Drawer bind:this={newFolder}>
 	<DrawerContent
 		title="New Folder"
@@ -276,6 +245,7 @@ async function addGroup() {
 	<div class="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 pb-0 mb-1">
 		{#if meta != undefined}
 			<div class="flex gap-4 shrink">
+				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label class="block">
 					<span class="text-gray-700 text-sm whitespace-nowrap">Owner</span>
 
@@ -322,8 +292,8 @@ async function addGroup() {
 
 						<div class="flex flex-row gap-1 w-full">
 							<select class="grow w-full" {disabled} bind:value={meta.owner}>
-								{#each folders as f}
-									<option>{f}</option>
+								{#each folders as { name, write }}
+									<option disabled={!write}>{name}{write ? '' : ' (read-only)'}</option>
 								{/each}
 							</select>
 							<Button variant="border" size="xs" on:click={viewFolder.openDrawer}>
@@ -334,27 +304,6 @@ async function addGroup() {
 							></div
 						>
 					</label>
-				{:else if meta.ownerKind === 'group'}
-					<label class="block grow w-48">
-						<span class="text-gray-700 text-sm"
-							>Group <Tooltip>Item will be owned by the group and hence all its member</Tooltip
-							></span
-						>
-
-						<div class="flex flex-row gap-1">
-							<select class="grow w-full" {disabled} bind:value={meta.owner}>
-								{#each groups as g}
-									<option>{g}</option>
-								{/each}
-							</select>
-							<Button variant="border" size="xs" on:click={viewGroup.openDrawer}>
-								<Icon scale={0.8} data={faEye} /></Button
-							>
-							<Button variant="border" size="xs" on:click={newGroup.openDrawer}>
-								<Icon scale={0.8} data={faPlus} /></Button
-							></div
-						>
-					</label>
 				{/if}
 			</div>
 			<label class="block grow w-full max-w-md">
@@ -362,6 +311,7 @@ async function addGroup() {
 					Name
 					<Required required={true} />
 				</span>
+				<!-- svelte-ignore a11y-autofocus -->
 				<input
 					{disabled}
 					type="text"

package/components/Range.svelte

@@ -51,10 +51,6 @@
 		onDragStart(e)
 	}
 
-	function onHover(e) {
-		thumbHover = thumbHover ? false : true
-	}
-
 	function onDragStart(e) {
 		// If mouse event add a pointer events shield
 		if (e.type === 'mousedown') document.body.append(mouseEventShield)
@@ -182,6 +178,7 @@
 	>
 		<div class="range__track" bind:this={container}>
 			<div class="range__track--highlighted" bind:this={progressBar} />
+			<!-- svelte-ignore a11y-mouse-events-have-key-events -->
 			<div
 				class="range__thumb"
 				class:range__thumb--holding={holding}

package/components/ResourceEditor.svelte

@@ -1,15 +1,15 @@
-<script>import { ResourceService, VariableService } from '../gen';
+<script>import { ResourceService } from '../gen';
 import { canWrite, emptyString, sendUserToast } from '../utils';
 import { createEventDispatcher } from 'svelte';
+import { Alert, Button, Drawer, Skeleton } from './common';
 import Path from './Path.svelte';
 import Required from './Required.svelte';
-import { Alert, Button, Drawer, Skeleton } from './common';
 import { userStore, workspaceStore } from '../stores';
-import DrawerContent from './common/drawer/DrawerContent.svelte';
-import autosize from 'svelte-autosize';
-import SimpleEditor from './SimpleEditor.svelte';
 import { faSave } from '@fortawesome/free-solid-svg-icons';
+import autosize from 'svelte-autosize';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
 import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 import Toggle from './Toggle.svelte';
 let path = '';
 let initialPath = '';
@@ -118,7 +118,7 @@ function switchTab(asJson) {
 		on:close={drawer.closeDrawer}
 	>
 		<div>
-			<div class="flex flex-col gap-3 py-3  text-gray-700">
+			<div class="flex flex-col gap-3 py-3 text-gray-700">
 				<div>
 					{#if !can_write}
 						<div class="m-2">

package/components/ResourcePicker.svelte

@@ -3,11 +3,11 @@ import { workspaceStore } from '../stores';
 import { faPen, faPlus, faRotateRight } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { Button } from './common';
 import Select from 'svelte-select';
+import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 import AppConnect from './AppConnect.svelte';
+import { Button } from './common';
 import ResourceEditor from './ResourceEditor.svelte';
-import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 const dispatch = createEventDispatcher();
 export let initialValue = undefined;
 export let value = initialValue;

package/components/RunForm.svelte

@@ -1,15 +1,14 @@
-<script>import { page } from '$app/stores';
-import { decodeArgs, defaultIfEmptyString, displayDaysAgo, emptyString, getToday, truncateHash } from '../utils';
+<script>import { defaultIfEmptyString, displayDaysAgo, emptyString, getToday, truncateHash } from '../utils';
 import { slide } from 'svelte/transition';
+import { runFormStore, userStore } from '../stores';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import SchemaForm from './SchemaForm.svelte';
+import CliHelpBox from './CliHelpBox.svelte';
 import { Badge, Button } from './common';
+import InlineCodeCopy from './InlineCodeCopy.svelte';
+import SchemaForm from './SchemaForm.svelte';
 import SharedBadge from './SharedBadge.svelte';
 import Toggle from './Toggle.svelte';
-import { runFormStore, userStore } from '../stores';
 import Tooltip from './Tooltip.svelte';
-import CliHelpBox from './CliHelpBox.svelte';
-import InlineCodeCopy from './InlineCodeCopy.svelte';
 export let runnable;
 export let runAction;
 export let buttonText = 'Run';

package/components/ScheduleEditor.svelte

@@ -6,20 +6,20 @@
 	}
 </script>
 
-<script>import { sendUserToast, formatCron, canWrite, emptyString } from '../utils';
-import { ScriptService, Script, ScheduleService, FlowService } from '../gen';
-import Toggle from './Toggle.svelte';
+<script>import Toggle from './Toggle.svelte';
+import { FlowService, ScheduleService, Script, ScriptService } from '../gen';
+import { canWrite, emptyString, formatCron, sendUserToast } from '../utils';
+import { Alert, Button } from './common';
+import Drawer from './common/drawer/Drawer.svelte';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import CronInput, { OFFSET } from './CronInput.svelte';
 import Path from './Path.svelte';
-import { Alert, Badge, Button } from './common';
-import Tooltip from './Tooltip.svelte';
-import { userStore, workspaceStore } from '../stores';
+import Required from './Required.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import ScriptPicker from './ScriptPicker.svelte';
-import Required from './Required.svelte';
-import CronInput, { OFFSET } from './CronInput.svelte';
+import Tooltip from './Tooltip.svelte';
+import { userStore, workspaceStore } from '../stores';
 import { faSave } from '@fortawesome/free-solid-svg-icons';
-import Drawer from './common/drawer/Drawer.svelte';
-import DrawerContent from './common/drawer/DrawerContent.svelte';
 import { createEventDispatcher } from 'svelte';
 let initialPath = '';
 let edit = true;

package/components/SchemaModal.svelte

@@ -83,6 +83,7 @@ else {
 						Name
 						<Required required={true} />
 					</div>
+					<!-- svelte-ignore a11y-autofocus -->
 					<input
 						autofocus
 						autocomplete="off"

package/components/SchemaModal.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import type { SchemaProperty } from '../common';
 export declare const ARG_TYPES: readonly ["integer", "number", "string", "boolean", "object", "array"];
-export type ArgType = typeof ARG_TYPES[number];
+export type ArgType = (typeof ARG_TYPES)[number];
 export interface ModalSchemaProperty {
     selectedType?: string;
     description: string;

package/components/ScriptEditor.svelte

@@ -68,7 +68,6 @@ async function inferSchema(code) {
         validCode = true;
     }
     catch (e) {
-        console.error("Couldn't infer args", e);
         validCode = false;
     }
     schema = schema;

package/components/SearchItems.svelte

@@ -13,7 +13,7 @@ function filterItems() {
         return;
     }
     // pre-filter
-    let idxs = uf.filter(plaintextItems, filter);
+    let idxs = uf.filter(plaintextItems, filter) ?? [];
     let info = uf.info(idxs, plaintextItems, filter);
     let order = uf.sort(info, plaintextItems, filter);
     let result = [];

package/components/SharedBadge.svelte

@@ -2,7 +2,6 @@
 import { Users } from 'lucide-svelte';
 import Badge from './common/badge/Badge.svelte';
 import Popover from './Popover.svelte';
-import Tooltip from './Tooltip.svelte';
 export let extraPerms = {};
 export let canWrite;
 let kind = undefined;

package/components/SimpleEditor.svelte

@@ -1,13 +1,9 @@
-<script>import { browser, dev } from '$app/environment';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import yamlWorker from 'monaco-yaml/yaml.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import { buildWorkerDefinition } from 'monaco-editor-workers';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+<script>import { browser } from '$app/environment';
 import { createHash, editorConfig, langToExt, updateOptions } from '../editorUtils';
-import { languages, editor as meditor, KeyCode, KeyMod, Uri as mUri } from 'monaco-editor';
+import { editor as meditor, KeyCode, KeyMod, languages, Uri as mUri } from 'monaco-editor';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 import libStdContent from '../es5.d.ts.txt?raw';
+import { buildWorkerDefinition } from 'monaco-editor-workers';
 meditor.defineTheme('myTheme', {
     base: 'vs',
     inherit: true,
@@ -44,30 +40,7 @@ export let autoHeight = false;
 export let fixedOverflowWidgets = true;
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.${langToExt(lang)}`;
-if (browser) {
-    if (dev) {
-        buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
-    }
-    else {
-        // @ts-ignore
-        self.MonacoEnvironment = {
-            getWorker: function (_moduleId, label) {
-                if (label === 'json') {
-                    return new jsonWorker();
-                }
-                else if (label === 'yaml') {
-                    return new yamlWorker();
-                }
-                else if (label === 'typescript' || label === 'javascript') {
-                    return new tsWorker();
-                }
-                else {
-                    return new editorWorker();
-                }
-            }
-        };
-    }
-}
+buildWorkerDefinition('../../../workers', import.meta.url, false);
 export function getCode() {
     return editor?.getValue() ?? '';
 }
@@ -99,7 +72,11 @@ let width = 0;
 async function loadMonaco() {
     model = meditor.createModel(code, lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = meditor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
+    let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
+    editor = meditor.create(divEl, {
+        ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
+        overflowWidgetsDomNode: widgets
+    });
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         timeoutModel && clearTimeout(timeoutModel);
@@ -116,18 +93,15 @@ async function loadMonaco() {
         });
     });
     if (autoHeight) {
-        let ignoreEvent = false;
         const updateHeight = () => {
             const contentHeight = Math.min(1000, editor.getContentHeight());
             if (divEl) {
                 divEl.style.height = `${contentHeight}px`;
             }
             try {
-                ignoreEvent = true;
                 editor.layout({ width, height: contentHeight });
             }
             finally {
-                ignoreEvent = false;
             }
         };
         editor.onDidContentSizeChange(updateHeight);

package/components/TemplateEditor.svelte

@@ -1,11 +1,9 @@
-<script>import { browser, dev } from '$app/environment';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import { buildWorkerDefinition } from 'monaco-editor-workers';
-import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+<script>import { browser } from '$app/environment';
 import { convertKind, createDocumentationString, createHash, displayPartsToString, editorConfig, updateOptions } from '../editorUtils';
-import { languages, editor as meditor, Uri as mUri, Range } from 'monaco-editor';
 import libStdContent from '../es5.d.ts.txt?raw';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import { editor as meditor, languages, Range, Uri as mUri } from 'monaco-editor';
+import { buildWorkerDefinition } from 'monaco-editor-workers';
+import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 languages.typescript.javascriptDefaults.setCompilerOptions({
     target: languages.typescript.ScriptTarget.Latest,
     allowNonTsExtensions: true,
@@ -344,24 +342,7 @@ if (typeof code != 'string') {
 const lang = 'template';
 const dispatch = createEventDispatcher();
 const uri = `file:///${hash}.ts`;
-if (browser) {
-    if (dev) {
-        buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
-    }
-    else {
-        // @ts-ignore
-        self.MonacoEnvironment = {
-            getWorker: function (_moduleId, label) {
-                if (label == 'typescript' || label == 'javascript') {
-                    return new tsWorker();
-                }
-                else {
-                    return new editorWorker();
-                }
-            }
-        };
-    }
-}
+buildWorkerDefinition('../../../workers', import.meta.url, false);
 export function insertAtCursor(code) {
     if (editor) {
         editor.trigger('keyboard', 'type', { text: code });
@@ -379,11 +360,13 @@ export function getCode() {
 let cip;
 let extraModel;
 let width = 0;
+let widgets = document.getElementById('monaco-widgets-root') ?? undefined;
 async function loadMonaco() {
     model = meditor.createModel(code, lang, mUri.parse(uri));
     model.updateOptions(updateOptions);
     editor = meditor.create(divEl, {
         ...editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets),
+        overflowWidgetsDomNode: widgets,
         lineNumbers: 'off',
         fontSize,
         suggestOnTriggerCharacters: true,
@@ -473,19 +456,15 @@ async function loadMonaco() {
         }, 200);
     });
     if (autoHeight) {
-        let ignoreEvent = false;
         const updateHeight = () => {
             const contentHeight = Math.min(1000, editor.getContentHeight());
             if (divEl) {
                 divEl.style.height = `${contentHeight}px`;
             }
             try {
-                ignoreEvent = true;
                 editor.layout({ width, height: contentHeight });
             }
-            finally {
-                ignoreEvent = false;
-            }
+            catch { }
         };
         editor.onDidContentSizeChange(updateHeight);
         updateHeight();

package/components/apps/components/display/AppBarChart.svelte

@@ -1,10 +1,10 @@
-<script>import { Bar, Line } from 'svelte-chartjs';
-import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement } from 'chart.js';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-import { concatCustomCss } from '../../utils';
+<script>import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from 'chart.js';
 import { getContext } from 'svelte';
+import { Bar, Line } from 'svelte-chartjs';
 import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
 export let configuration;

package/components/apps/components/display/AppImage.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from 'svelte';
 import { twMerge } from 'tailwind-merge';
 import { initConfig, initOutput } from '../../editor/appUtils';
-import { components, selectOptions } from '../../editor/component';
+import { components } from '../../editor/component';
 import { concatCustomCss } from '../../utils';
 import Loader from '../helpers/Loader.svelte';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';

package/components/apps/components/display/AppPdf.svelte

@@ -1,13 +1,14 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
+<script>import { Download, Loader2, MoveHorizontal, ZoomIn, ZoomOut } from 'lucide-svelte';
 import { getDocument } from 'pdfjs-dist';
-import { concatCustomCss } from '../../utils';
-import InputValue from '../helpers/InputValue.svelte';
+import 'pdfjs-dist/build/pdf.worker.entry';
+import { getContext } from 'svelte';
+import { fade } from 'svelte/transition';
+import { twMerge } from 'tailwind-merge';
 import { throttle } from '../../../../utils';
 import { Button } from '../../../common';
-import { Download, Loader2, MoveHorizontal, ZoomIn, ZoomOut } from 'lucide-svelte';
-import { fade } from 'svelte/transition';
 import { findGridItem, initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
 export let customCss = undefined;
@@ -174,13 +175,13 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 <InputValue {id} input={configuration.zoom} bind:value={zoom} />
 
 {#if render}
-	<div class="relative w-full h-full bg-gray-100">
+	<div class="relative flex flex-col w-full h-full bg-gray-100">
 		{#if source && zoom}
 			{#if pages?.length}
 				<div
 					bind:clientWidth={controlsWidth}
 					bind:clientHeight={controlsHeight}
-					class="fixed flex {$mode !== 'preview'
+					class="sticky flex {$mode !== 'preview'
 						? 'w-[calc(100%-2px)] top-[1px]'
 						: 'w-full top-0'} {wideView
 						? 'justify-center gap-14'
@@ -285,12 +286,12 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 				bind:this={wrapper}
 				on:scroll={throttledScroll}
 				class={twMerge('w-full h-full overflow-auto', css?.container?.class ?? '', 'bg-gray-100')}
-				style="padding-top: {controlsHeight ?? 0}px; {css?.container?.style ?? ''}"
+				style={css?.container?.style ?? ''}
 			/>
 		{/if}
 		{#if $mode !== 'preview' && $selectedComponent?.includes(id)}
 			<button
-				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90 
+				class="fixed z-10 bottom-0 left-0 px-2 py-0.5 bg-indigo-500/90
 			hover:bg-indigo-500 focus:bg-indigo-500 duration-200 text-white text-2xs"
 				on:click={() => syncZoomValue()}
 			>
@@ -299,7 +300,7 @@ $: css = concatCustomCss($app.css?.pdfcomponent, customCss);
 		{/if}
 		{#if error}
 			<div
-				class="absolute inset-0 z-20 center-center 
+				class="absolute inset-0 z-20 center-center
 		bg-gray-100 text-center text-gray-600 text-sm"
 			>
 				{error}

package/components/apps/components/display/AppPdf.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import 'pdfjs-dist/build/pdf.worker.entry';
 import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {