windmill-components 1.623.2 → 1.655.0

package/package/components/PageHeader.svelte.d.ts

@@ -1,33 +1,11 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const PageHeader: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     title: string;
     tooltip?: string;
     documentationLink?: string | undefined;
     primary?: boolean;
     childrenWrapperDivClasses?: string;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type PageHeader = InstanceType<typeof PageHeader>;
+    children?: import('svelte').Snippet;
+}
+declare const PageHeader: import("svelte").Component<Props, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
 export default PageHeader;

package/package/components/ParentWorkspaceProtectionAlert.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">import { userStore } from '../stores';
+import { fetchProtectionRulesForWorkspace, isRuleActiveInRulesets, canUserBypassRuleKindInRulesets, getActiveRulesetsForKindInRulesets, } from '../workspaceProtectionRules.svelte';
+import { Alert } from './common';
+import { untrack } from 'svelte';
+let { parentWorkspaceId, onUpdateCanDeploy = (value) => { } } = $props();
+let parentRulesets = $state([]);
+let overrideChecked = $state(false);
+let activeDeployRulesets = $derived(getActiveRulesetsForKindInRulesets(parentRulesets, 'DisableDirectDeployment'));
+let canBypass = $derived(canUserBypassRuleKindInRulesets(parentRulesets, 'DisableDirectDeployment', $userStore));
+let canDeploy = $derived(!isRuleActiveInRulesets(parentRulesets, 'DisableDirectDeployment') ||
+    (canBypass && overrideChecked));
+// Fetch parent workspace rules
+$effect(() => {
+    if (parentWorkspaceId) {
+        untrack(async () => {
+            const rules = await fetchProtectionRulesForWorkspace(parentWorkspaceId);
+            parentRulesets = rules;
+        });
+    }
+});
+// Reset override when parent workspace changes
+$effect(() => {
+    parentWorkspaceId;
+    overrideChecked = false;
+});
+// Communicate deployment status to parent
+$effect(() => {
+    onUpdateCanDeploy(canDeploy);
+});
+</script>
+
+{#if !$userStore?.operator && activeDeployRulesets.length > 0}
+	<Alert type="info" title="Parent workspace protection active" class="my-2">
+		<div class="flex flex-col gap-2">
+			<p>
+				The workspace {parentWorkspaceId} has a protection rule{activeDeployRulesets.length > 1 ? 's' : ''}
+				<b>{activeDeployRulesets.map((r) => r.name).join(', ')}</b>
+				that restrict{activeDeployRulesets.length > 1 ? '' : 's'} direct deployments. You need to merge changes through the synced git repo with Git Sync, or by asking a user with the rights to bypass this rule.
+			</p>
+			{#if canBypass}
+				<label class="flex items-center gap-2 cursor-pointer">
+					<input class="rounded max-w-4" type="checkbox" bind:checked={overrideChecked} />
+					<span class="text-xs">Bypass restriction and deploy anyway</span>
+				</label>
+			{/if}
+		</div>
+	</Alert>
+{/if}

package/package/components/ParentWorkspaceProtectionAlert.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    parentWorkspaceId: string;
+    onUpdateCanDeploy?: (value: boolean) => void;
+};
+declare const ParentWorkspaceProtectionAlert: import("svelte").Component<$$ComponentProps, {}, "">;
+type ParentWorkspaceProtectionAlert = ReturnType<typeof ParentWorkspaceProtectionAlert>;
+export default ParentWorkspaceProtectionAlert;

package/package/components/ParqetCsvTableRenderer.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { createGrid } from 'ag-grid-community';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { createGrid } from 'ag-grid-community';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import { twMerge } from 'tailwind-merge';
@@ -10,13 +11,10 @@ import { Download } from 'lucide-svelte';
 import { Loader2 } from 'lucide-svelte';
 // import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 let selectedRowIndex = -1;
-export let s3resource;
-export let storage;
-export let workspaceId;
-export let disable_download = false;
+let { s3resource, storage, workspaceId, disable_download = false } = $props();
 let lastSearch = undefined;
-let nbRows = undefined;
-let csvSeparatorChar = ',';
+let nbRows = $state(undefined);
+let csvSeparatorChar = $state(',');
 let datasource = {
     rowCount: 0,
     getRows: async function (params) {
@@ -83,9 +81,8 @@ function toggleRow(row) {
 function toggleRows(rows) {
     toggleRow(rows[0]);
 }
-let eGui;
-$: eGui && mountGrid();
-let error = undefined;
+let eGui = $state();
+let error = $state(undefined);
 async function mountGrid() {
     if (eGui) {
         try {
@@ -148,7 +145,10 @@ function onSelectionChanged(api) {
         toggleRows(rows);
     }
 }
-let darkMode = false;
+let darkMode = $state(false);
+run(() => {
+    eGui && mountGrid();
+});
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -160,7 +160,7 @@ let darkMode = false;
 				<label for="csvSeparatorChar" class="text-2xs text-secondary">Separator</label>
 
 				<div class="w-12 ml-2 mr-2">
-					<select class="h-8" bind:value={csvSeparatorChar} on:change={(e) => mountGrid()}>
+					<select class="h-8" bind:value={csvSeparatorChar} onchange={(e) => mountGrid()}>
 						<option value=",">,</option>
 						<option value=";">;</option>
 						<option value="\t">\t</option>

package/package/components/ParqetCsvTableRenderer.svelte.d.ts

@@ -1,25 +1,11 @@
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
-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 ParqetCsvTableRenderer: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     s3resource: string;
     storage: string | undefined;
     workspaceId: string | undefined;
     disable_download?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ParqetCsvTableRenderer = InstanceType<typeof ParqetCsvTableRenderer>;
+}
+declare const ParqetCsvTableRenderer: import("svelte").Component<Props, {}, "">;
+type ParqetCsvTableRenderer = ReturnType<typeof ParqetCsvTableRenderer>;
 export default ParqetCsvTableRenderer;

package/package/components/Path.svelte

@@ -19,7 +19,7 @@ import { tick } from 'svelte';
 import FolderPicker from './FolderPicker.svelte';
 import TextInput from './text_input/TextInput.svelte';
 let meta = $state(undefined);
-let { fullNamePlaceholder = undefined, namePlaceholder = '', initialPath, path = $bindable(undefined), error = $bindable(undefined), disabled = $bindable(false), checkInitialPathExistence = false, autofocus = true, dirty = $bindable(false), kind, hideUser = false, disableEditing = false } = $props();
+let { fullNamePlaceholder = undefined, namePlaceholder = '', initialPath, path = $bindable(undefined), error = $bindable(undefined), disabled = $bindable(false), checkInitialPathExistence = false, autofocus = true, dirty = $bindable(false), kind, hideUser = false, disableEditing = false, hideFullPath = false, size = 'md', drawerOffset = 0 } = $props();
 $effect.pre(() => {
     if (path == undefined) {
         path = '';
@@ -62,7 +62,7 @@ export function setName(x) {
     }
 }
 export async function reset() {
-    if (path == '' || path == 'u//' || path?.startsWith('tmp/')) {
+    if (path == '' || path == 'u//' || path?.startsWith('tmp/') || path?.startsWith('hub/')) {
         if ($lastMetaUsed == undefined || $lastMetaUsed.owner != $userStore?.username) {
             meta = {
                 ownerKind: hideUser ? 'folder' : 'user',
@@ -258,7 +258,7 @@ function validateName(meta) {
 }
 async function initPath() {
     await tick();
-    if (path != undefined && path != '' && !path?.startsWith('tmp/')) {
+    if (path != undefined && path != '' && !path?.startsWith('tmp/') && !path?.startsWith('hub/')) {
         meta = pathToMeta(path, hideUser);
         onMetaChange();
         return;
@@ -318,13 +318,12 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 </script>
 
 <div>
-	<div class="flex flex-col flex-wrap sm:flex-row sm:items-center gap-2 pb-0 mb-1">
+	<div class="flex gap-2 pb-0 mb-1 flex-col flex-wrap sm:flex-row sm:items-center">
 		{#if meta != undefined}
 			<!-- svelte-ignore a11y_label_has_associated_control -->
 			{#if !hideUser}
 				<div class="block">
 					<ToggleButtonGroup
-						class="mt-0.5"
 						bind:selected={meta.ownerKind}
 						on:selected={(e) => {
 							setDirty()
@@ -347,6 +346,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 								disabled={disabled || disableEditing}
 								value="user"
 								label="User"
+								{size}
 								{item}
 							/>
 							<!-- <ToggleButton light size="xs" value="group" position="center">Group</ToggleButton> -->
@@ -355,6 +355,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 								disabled={disabled || disableEditing}
 								value="folder"
 								label="Folder"
+								{size}
 								{item}
 							/>
 						{/snippet}
@@ -369,6 +370,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 					<label class="block shrink min-w-0">
 						<TextInput
 							class="!w-36"
+							{size}
 							bind:value={meta.owner}
 							inputProps={{
 								type: 'text',
@@ -380,8 +382,15 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 						/>
 					</label>
 				{:else if meta.ownerKind === 'folder'}
-					<label class="block grow w-48">
-						<FolderPicker bind:folderName={meta.owner} {initialPath} {disabled} {disableEditing} />
+					<label class="block grow w-42">
+						<FolderPicker
+							bind:folderName={meta.owner}
+							{initialPath}
+							{disabled}
+							{disableEditing}
+							{size}
+							{drawerOffset}
+						/>
 					</label>
 				{/if}
 			</div>
@@ -391,6 +400,7 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 				<TextInput
 					bind:this={inputP}
 					bind:value={meta.name}
+					{size}
 					{error}
 					inputProps={{
 						disabled: disabled || disableEditing,
@@ -406,28 +416,30 @@ let pathUsageInScriptsPromise = $derived(kind == 'script' &&
 		{/if}
 	</div>
 
-	<div class="flex flex-col w-full mt-2">
-		<div class="flex justify-start w-full">
-			<Badge
-				color="gray"
-				class="center-center !bg-surface-secondary !text-primary !w-[70px] !h-[24px] rounded-r-none border"
-			>
-				Full path
-			</Badge>
-			<input
-				type="text"
-				readonly
-				value={path}
-				size={path?.length || 50}
-				class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
-				onfocus={({ currentTarget }) => {
-					currentTarget.select()
-				}}
-			/>
-			<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+	{#if !hideFullPath}
+		<div class="flex flex-col w-full mt-2">
+			<div class="flex justify-start w-full">
+				<Badge
+					color="gray"
+					class="center-center !bg-surface-secondary !text-primary !w-[70px] !h-[24px] rounded-r-none border"
+				>
+					Full path
+				</Badge>
+				<input
+					type="text"
+					readonly
+					value={path}
+					size={path?.length || 50}
+					class="font-mono !text-xs max-w-[calc(100%-70px)] !w-auto !h-[24px] !py-0 !border-l-0 !rounded-l-none"
+					onfocus={({ currentTarget }) => {
+						currentTarget.select()
+					}}
+				/>
+				<!-- <span class="font-mono text-sm break-all">{path}</span> -->
+			</div>
+			<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">{error}</div>
 		</div>
-		<div class="text-red-600 dark:text-red-400 text-2xs mt-1.5">{error}</div>
-	</div>
+	{/if}
 
 	{#if pathUsageInFlowsPromise || pathUsageInAppsPromise || pathUsageInScriptsPromise}
 		{#await Promise.all( [pathUsageInAppsPromise, pathUsageInFlowsPromise, pathUsageInScriptsPromise] )}

package/package/components/Path.svelte.d.ts

@@ -12,6 +12,9 @@ interface Props {
     kind: PathKind;
     hideUser?: boolean;
     disableEditing?: boolean;
+    hideFullPath?: boolean;
+    size?: 'sm' | 'md';
+    drawerOffset?: number;
 }
 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> & {

package/package/components/PermissionHistory.svelte

@@ -56,12 +56,14 @@ function removeUPrefix(username) {
 		<p class="text-primary text-sm">No permission changes recorded yet</p>
 	{:else}
 		<TableCustom>
-			<tr slot="header-row">
-				<th>Changed By</th>
-				<th>Change Type</th>
-				<th>Affected</th>
-				<th>Date</th>
-			</tr>
+			{#snippet headerRow()}
+								<tr >
+					<th>Changed By</th>
+					<th>Change Type</th>
+					<th>Affected</th>
+					<th>Date</th>
+				</tr>
+							{/snippet}
 			{#snippet body()}
 				<tbody>
 					{#each history as change}

package/package/components/PersistentScriptDrawer.svelte

@@ -8,12 +8,12 @@ import { displayDate, sleep, sendUserToast } from '../utils';
 import TableCustom from './TableCustom.svelte';
 import { Hourglass, Loader2, Play, RefreshCw } from 'lucide-svelte';
 let dispatch = createEventDispatcher();
-let drawer;
-let script;
-let loadQueuedJobs = true;
-let queuedJobsLoading = false;
-let queuedJobs = [];
-let cancellingInProgress = false;
+let drawer = $state();
+let script = $state();
+let loadQueuedJobs = $state(true);
+let queuedJobsLoading = $state(false);
+let queuedJobs = $state([]);
+let cancellingInProgress = $state(false);
 async function continuouslyLoadQueuedJobs() {
     while (loadQueuedJobs) {
         loadQueuedJobsOnce();
@@ -29,7 +29,7 @@ async function loadQueuedJobsOnce() {
     let qjs = await JobService.listQueue({
         workspace: $workspaceStore ?? '',
         orderDesc: false,
-        scriptPathExact: script.path
+        scriptPathExact: script?.path
     });
     let loadingQueuedJobs = [];
     for (const qj of qjs) {
@@ -51,12 +51,12 @@ async function scaleToZero() {
     cancellingInProgress = true;
     await JobService.cancelPersistentQueuedJobs({
         workspace: $workspaceStore ?? '',
-        path: script.path,
+        path: script?.path ?? '',
         requestBody: {
             reason: undefined
         }
     });
-    sendUserToast(`All jobs cancelled for ${script.path}`);
+    sendUserToast(`All jobs cancelled for ${script?.path}`);
     cancellingInProgress = false;
 }
 export async function open(persistentScript) {
@@ -67,11 +67,11 @@ export async function open(persistentScript) {
     script = persistentScript;
     loadQueuedJobs = true;
     continuouslyLoadQueuedJobs();
-    drawer.openDrawer?.();
+    drawer?.openDrawer?.();
 }
 async function exit() {
     loadQueuedJobs = false;
-    drawer.closeDrawer?.();
+    drawer?.closeDrawer?.();
 }
 onDestroy(() => {
     loadQueuedJobs = false;
@@ -94,51 +94,57 @@ onDestroy(() => {
 	>
 		<div class="flex gap-2 items-center justify-between">
 			<h2>
-				Queued jobs for {script.path}
+				Queued jobs for {script?.path}
 			</h2>
 			<Button size="md" btnClasses="w-full h-8" variant="default" on:click={loadQueuedJobsOnce}>
 				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size={14} />
 			</Button>
 		</div>
 		<TableCustom>
-			<tr slot="header-row">
-				<th class="text-xs">Script Hash</th>
-				<th class="text-xs">Job ID</th>
-				<th class="text-xs">Status</th>
-				<th class="text-xs">Scheduled For</th>
-			</tr>
-			<tbody slot="body">
-				{#each queuedJobs as { jobId, status, scriptHash, scheduledFor }}
-					<tr class="">
-						<td class="text-xs">
-							<a
-								class="pr-3"
-								href="{base}/scripts/get/{scriptHash}?workspace={$workspaceStore}"
-								target="_blank"
-							>
-								{scriptHash}
-							</a>
-						</td>
-						<td class="text-xs">
-							<a class="pr-3" href="{base}/run/{jobId}?workspace={$workspaceStore}" target="_blank"
-								>{jobId.substring(24)}</a
-							>
-						</td>
-						<td class="text-xs">
-							{#if status === 'running'}
-								<Badge color="yellow" baseClass="!px-1.5">
-									<Play size={14} />
-								</Badge>
-							{:else}
-								<Badge baseClass="!px-1.5">
-									<Hourglass size={14} />
-								</Badge>
-							{/if}
-						</td>
-						<td class="text-xs">{scheduledFor}</td>
-					</tr>
-				{/each}
-			</tbody>
+			{#snippet headerRow()}
+				<tr>
+					<th class="text-xs">Script Hash</th>
+					<th class="text-xs">Job ID</th>
+					<th class="text-xs">Status</th>
+					<th class="text-xs">Scheduled For</th>
+				</tr>
+			{/snippet}
+			{#snippet body()}
+				<tbody>
+					{#each queuedJobs as { jobId, status, scriptHash, scheduledFor }}
+						<tr class="">
+							<td class="text-xs">
+								<a
+									class="pr-3"
+									href="{base}/scripts/get/{scriptHash}?workspace={$workspaceStore}"
+									target="_blank"
+								>
+									{scriptHash}
+								</a>
+							</td>
+							<td class="text-xs">
+								<a
+									class="pr-3"
+									href="{base}/run/{jobId}?workspace={$workspaceStore}"
+									target="_blank">{jobId.substring(24)}</a
+								>
+							</td>
+							<td class="text-xs">
+								{#if status === 'running'}
+									<Badge color="yellow" baseClass="!px-1.5">
+										<Play size={14} />
+									</Badge>
+								{:else}
+									<Badge baseClass="!px-1.5">
+										<Hourglass size={14} />
+									</Badge>
+								{/if}
+							</td>
+							<td class="text-xs">{scheduledFor}</td>
+						</tr>
+					{/each}
+				</tbody>
+			{/snippet}
 		</TableCustom>
 
 		{#snippet actions()}

package/package/components/PersistentScriptDrawer.svelte.d.ts

@@ -3,7 +3,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
-    (internal: unknown, props: Props & {
+    (internal: unknown, props: {
         $$events?: Events;
         $$slots?: Slots;
     }): Exports & {
@@ -12,14 +12,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PersistentScriptDrawer: $$__sveltets_2_IsomorphicComponent<{
-    open?: (persistentScript: Script | undefined) => Promise<void>;
-}, {
+declare const PersistentScriptDrawer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     close: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {
     open: (persistentScript: Script | undefined) => Promise<void>;
-}, string>;
+}, "">;
 type PersistentScriptDrawer = InstanceType<typeof PersistentScriptDrawer>;
 export default PersistentScriptDrawer;

package/package/components/PocketIdSetting.svelte

@@ -2,6 +2,7 @@
 import IconedResourceType from './IconedResourceType.svelte';
 import TextInput from './text_input/TextInput.svelte';
 import Toggle from './Toggle.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
 let enabled = $derived(value != undefined);
 // Initialize org from existing config or empty string
@@ -47,7 +48,7 @@ function handleToggle(e) {
 		<Toggle checked={enabled} on:change={handleToggle} />
 	</label>
 	{#if enabled}
-		<div class="border rounded p-4 flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label class="flex flex-col gap-1">
 				<span class="text-emphasis font-semibold text-xs">Pocket ID Url</span>
 				<span class="text-secondary font-normal text-xs">POCKET_ID_URL/authorize</span>
@@ -77,6 +78,6 @@ function handleToggle(e) {
 					bind:value={value['secret']}
 				/>
 			</label>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/Popover.svelte

@@ -8,9 +8,9 @@ import { twMerge } from 'tailwind-merge';
 import { ExternalLink } from 'lucide-svelte';
 import { untrack } from 'svelte';
 let { placement = 'bottom-end', notClickable = false, popupClass = '', disablePopup = false, disappearTimeout = 100, appearTimeout = 300, documentationLink = undefined, style = undefined, forceOpen = false, class: classNames = '', children, text, onClick } = $props();
-const [popperRef, popperContent] = createPopperActions({ placement });
+const [popperRef, popperContent] = createPopperActions({ placement: untrack(() => placement) });
 const popperOptions = {
-    placement,
+    placement: untrack(() => placement),
     strategy: 'fixed',
     modifiers: [
         { name: 'offset', options: { offset: [8, 8] } },

package/package/components/PrefixedInput.svelte

@@ -1,7 +1,7 @@
-<script lang="ts">"use strict";
+<script lang="ts">import { untrack } from 'svelte';
 let { prefix = '', value = $bindable(''), placeholder = '', class: className = '', ...restProps } = $props();
 let inputElement = $state(null);
-let internalValue = $state(prefix + value);
+let internalValue = $state(untrack(() => prefix) + value);
 // Update internal value when prop changes
 $effect(() => {
     internalValue = prefix + value;

package/package/components/QueueMetricsDrawer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { Drawer, DrawerContent } from './common';
 import QueueMetricsDrawerInner from './QueueMetricsDrawerInner.svelte';
 import QueueAlerts from './QueueAlerts.svelte';
-let drawer;
+let drawer = $state();
 export function openDrawer() {
     drawer?.openDrawer();
 }

package/package/components/QueueMetricsDrawer.svelte.d.ts

@@ -1,22 +1,5 @@
-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 QueueMetricsDrawer: $$__sveltets_2_IsomorphicComponent<{
-    openDrawer?: () => void;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {
+declare const QueueMetricsDrawer: import("svelte").Component<Record<string, never>, {
     openDrawer: () => void;
-}, string>;
-type QueueMetricsDrawer = InstanceType<typeof QueueMetricsDrawer>;
+}, "">;
+type QueueMetricsDrawer = ReturnType<typeof QueueMetricsDrawer>;
 export default QueueMetricsDrawer;