windmill-components 1.623.1 → 1.642.0

package/package/components/ObjectStoreConfigSettings.svelte.d.ts

@@ -1,46 +1,36 @@
-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 S3Config = {
+    type: 'S3';
+    bucket: string;
+    region: string;
+    access_key: string;
+    secret_key: string;
+    endpoint: string;
+    allow_http?: boolean;
+};
+type AzureConfig = {
+    type: 'Azure';
+    accountName: string;
+    containerName: string;
+    useSSL?: boolean;
+    tenantId: string;
+    clientId: string;
+    accessKey: string;
+    endpoint?: string;
+};
+type AwsOidcConfig = {
+    type: 'AwsOidc';
+    bucket: string;
+    region: string;
+    roleArn: string;
+};
+type GcsConfig = {
+    type: 'Gcs';
+    bucket: string;
+    serviceAccountKey: Record<string, string> | undefined;
+};
+interface Props {
+    bucket_config?: S3Config | AzureConfig | AwsOidcConfig | GcsConfig | undefined;
 }
-declare const ObjectStoreConfigSettings: $$__sveltets_2_IsomorphicComponent<{
-    bucket_config?: {
-        type: "S3";
-        bucket: string;
-        region: string;
-        access_key: string;
-        secret_key: string;
-        endpoint: string;
-        allow_http?: boolean;
-    } | {
-        type: "Azure";
-        accountName: string;
-        containerName: string;
-        useSSL?: boolean;
-        tenantId: string;
-        clientId: string;
-        accessKey: string;
-        endpoint?: string;
-    } | {
-        type: "AwsOidc";
-        bucket: string;
-        region: string;
-        roleArn: string;
-    } | {
-        type: "Gcs";
-        bucket: string;
-        serviceAccountKey: Record<string, string>;
-    } | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ObjectStoreConfigSettings = InstanceType<typeof ObjectStoreConfigSettings>;
+declare const ObjectStoreConfigSettings: import("svelte").Component<Props, {}, "bucket_config">;
+type ObjectStoreConfigSettings = ReturnType<typeof ObjectStoreConfigSettings>;
 export default ObjectStoreConfigSettings;

package/package/components/OktaSetting.svelte

@@ -4,6 +4,7 @@ import IconedResourceType from './IconedResourceType.svelte';
 import Toggle from './Toggle.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import SettingCard from './instanceSettings/SettingCard.svelte';
 let { value = $bindable() } = $props();
 let lastValues = { domain: undefined, custom: undefined };
 function changeDomain(domain, custom) {
@@ -49,7 +50,7 @@ $effect.pre(() => {
 		/></label
 	>
 	{#if enabled}
-		<div class="p-4 rounded border flex flex-col gap-6">
+		<SettingCard class="flex flex-col gap-6">
 			<label>
 				<div class="flex gap-2 items-start">
 					<div>
@@ -147,6 +148,6 @@ $effect.pre(() => {
 					</div>
 				</div>
 			</CollapseLink>
-		</div>
+		</SettingCard>
 	{/if}
 </div>

package/package/components/PageHeader.svelte

@@ -6,7 +6,7 @@ export let primary = true;
 export let childrenWrapperDivClasses = '';
 </script>
 
-<div class="flex flex-row flex-wrap justify-between pb-2 my-4 mr-2">
+<div class="flex flex-row flex-wrap justify-between items-center pb-2 my-4 mr-2 min-h-16">
 	{#if primary}
 		<span class="flex items-center gap-2">
 			<h1 class="text-2xl font-semibold text-emphasis whitespace-nowrap leading-6 tracking-tight"

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/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 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,17 +382,25 @@ 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>
 			<div class="text-sm text-secondary">/</div>
-			<label class="block grow w-full max-w-md">
+			<label class="block grow min-w-32 max-w-md">
 				<!-- svelte-ignore a11y_autofocus -->
 				<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> & {
@@ -34,6 +37,6 @@ declare const Path: $$__sveltets_2_IsomorphicComponent<Props, {
     focus: () => void;
     setName: (x: string) => void;
     reset: () => Promise<void>;
-}, "path" | "disabled" | "error" | "dirty">;
+}, "path" | "error" | "disabled" | "dirty">;
 type Path = InstanceType<typeof Path>;
 export default Path;

package/package/components/PocketIdSetting.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">import { untrack } from 'svelte';
+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
+let org = $state(value?.connect_config?.auth_url?.replace('/authorize', '') ?? '');
+// Update configs when org changes - use untrack to avoid infinite loop
+$effect(() => {
+    const currentOrg = org;
+    untrack(() => {
+        if (value && currentOrg) {
+            value = {
+                ...value,
+                connect_config: {
+                    auth_url: `${currentOrg}/authorize`,
+                    token_url: `${currentOrg}/api/oidc/token`,
+                    scopes: ['openid', 'profile', 'email']
+                },
+                login_config: {
+                    auth_url: `${currentOrg}/authorize`,
+                    token_url: `${currentOrg}/api/oidc/token`,
+                    userinfo_url: `${currentOrg}/api/oidc/userinfo`,
+                    scopes: ['openid', 'profile', 'email']
+                }
+            };
+        }
+    });
+});
+function handleToggle(e) {
+    if (e.detail) {
+        value = { id: '', secret: '' };
+        org = '';
+    }
+    else {
+        value = undefined;
+        org = '';
+    }
+}
+</script>
+
+<div class="flex flex-col gap-1">
+	<!-- svelte-ignore a11y_label_has_associated_control -->
+	<label class="text-xs font-semibold text-emphasis flex gap-4 items-center">
+		<div class="w-[120px]"><IconedResourceType name="pocketid" after={true} /></div>
+		<Toggle checked={enabled} on:change={handleToggle} />
+	</label>
+	{#if enabled}
+		<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>
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'https://id.example.com' }}
+					bind:value={org}
+				/>
+			</label>
+			<label class="flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">Custom Name</span>
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'Pocket ID' }}
+					bind:value={value['display_name']}
+				/>
+			</label>
+			<label class="flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">Client Id</span>
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'Client Id' }}
+					bind:value={value['id']}
+				/>
+			</label>
+			<label class="flex flex-col gap-1">
+				<span class="text-emphasis font-semibold text-xs">Client Secret</span>
+				<TextInput
+					inputProps={{ type: 'text', placeholder: 'Client Secret' }}
+					bind:value={value['secret']}
+				/>
+			</label>
+		</SettingCard>
+	{/if}
+</div>

package/package/components/PocketIdSetting.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    value: any;
+};
+declare const PocketIdSetting: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PocketIdSetting = ReturnType<typeof PocketIdSetting>;
+export default PocketIdSetting;

package/package/components/ResourceEditor.svelte

@@ -8,6 +8,7 @@ import Required from './Required.svelte';
 import { userStore, workspaceStore } from '../stores';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
+import FilesetEditor from './FilesetEditor.svelte';
 import Toggle from './Toggle.svelte';
 import { sendUserToast } from '../toast';
 import TestConnection from './TestConnection.svelte';
@@ -96,7 +97,7 @@ async function loadResourceType() {
                 resourceSchema.order =
                     resourceSchema.order ?? Object.keys(resourceSchema.properties).sort();
             }
-            if (resourceTypeInfo?.format_extension) {
+            if (resourceTypeInfo?.format_extension && !resourceTypeInfo?.is_fileset) {
                 textFileContent = args.content;
             }
         }
@@ -133,7 +134,7 @@ function switchTab(asJson) {
     }
     else {
         parseJson();
-        if (resourceTypeInfo?.format_extension) {
+        if (resourceTypeInfo?.format_extension && !resourceTypeInfo?.is_fileset) {
             textFileContent = args.content;
         }
     }
@@ -201,7 +202,7 @@ run(() => {
 				{#if can_write}
 					<Button
 						variant="subtle"
-						unifiedSize="sm"
+						unifiedSize="xs"
 						btnClasses={editDescription ? 'bg-surface-hover' : ''}
 						startIcon={{ icon: Pen }}
 						on:click={() => (editDescription = !editDescription)}
@@ -209,8 +210,8 @@ run(() => {
 				{/if}
 			</h4>
 			{#if can_write && editDescription}
-				<div>
-					<div class="flex flex-row-reverse text-2xs text-primary -mt-1">GH Markdown</div>
+				<div class="relative">
+					<div class="text-2xs text-primary absolute -top-4 right-0">GH Markdown</div>
 					<textarea
 						class="text-xs text-primary font-normal"
 						disabled={!can_write}
@@ -223,7 +224,7 @@ run(() => {
 				<div class="text-xs text-secondary font-normal">No description provided</div>
 			{:else}
 				<div class="text-xs text-primary font-normal">
-					<GfmMarkdown md={description} />
+					<GfmMarkdown md={description} noPadding />
 				</div>
 			{/if}
 		</div>
@@ -261,9 +262,14 @@ run(() => {
 			<div>
 				{#if loadingSchema}
 					<Skeleton layout={[[4]]} />
+				{:else if !viewJsonSchema && resourceTypeInfo?.is_fileset}
+					<h5 class="mt-1 inline-flex items-center gap-4">
+						Fileset
+					</h5>
+					<FilesetEditor bind:args />
 				{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
 					{#if resourceTypeInfo?.format_extension}
-						<h5 class="mt-4 inline-flex items-center gap-4 pb-2">
+						<h5 class="mt-1 inline-flex items-center gap-4">
 							File content ({resourceTypeInfo.format_extension})
 						</h5>
 						<div class="">

package/package/components/ResourcePicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { ResourceService } from '../gen';
-import { workspaceStore } from '../stores';
+import { globalDbManagerDrawer, workspaceStore } from '../stores';
 import { onMount, untrack } from 'svelte';
 import AppConnect from './AppConnectDrawer.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
@@ -7,7 +7,6 @@ import { Button } from './common';
 import { Loader2, Pen, Plus, RotateCw } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
 import Select from './select/Select.svelte';
-import DbManagerDrawer from './DBManagerDrawer.svelte';
 import ExploreAssetButton, { assetCanBeExplored } from './ExploreAssetButton.svelte';
 import DropdownV2 from './DropdownV2.svelte';
 let { initialValue = $bindable(undefined), value = $bindable(undefined), valueType = $bindable(undefined), resourceType = undefined, disabled = false, disablePortal = false, showSchemaExplorer = false, selectFirst = false, expressOAuthSetup = false, defaultValues = undefined, placeholder = undefined, selectInputClass = '', class: className = '', onClear = undefined, excludedValues = undefined } = $props();
@@ -47,6 +46,9 @@ let collection = $state(value ? [{ value, label: value, type: valueType }] : [])
 export async function askNewResource() {
     appConnect?.open?.(resourceType);
 }
+export async function refreshResources() {
+    await loadResources(resourceType);
+}
 let loading = $state(true);
 async function loadResources(resourceType) {
     loading = true;
@@ -100,7 +102,7 @@ $effect(() => {
 });
 let appConnect = $state();
 let resourceEditor = $state();
-let dbManagerDrawer = $state();
+let dbManagerDrawer = $derived(globalDbManagerDrawer.val);
 let hovering = $state(false);
 </script>
 
@@ -154,6 +156,7 @@ let hovering = $state(false);
 			inputClass={selectInputClass}
 			placeholder={placeholder ?? `${resourceType ?? 'any'} resource`}
 			itemLabelWrapperClasses="flex-1"
+			id="resource-picker-select"
 		>
 			{#snippet endSnippet({ item, close })}
 				<Button
@@ -243,5 +246,3 @@ let hovering = $state(false);
 		/>
 	{/if}
 </div>
-
-<DbManagerDrawer bind:this={dbManagerDrawer} />

package/package/components/ResourcePicker.svelte.d.ts

@@ -17,6 +17,7 @@ interface Props {
 }
 declare const ResourcePicker: import("svelte").Component<Props, {
     askNewResource: () => Promise<void>;
+    refreshResources: () => Promise<void>;
 }, "value" | "initialValue" | "valueType">;
 type ResourcePicker = ReturnType<typeof ResourcePicker>;
 export default ResourcePicker;

package/package/components/RightClickPopover.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">import { clickOutside } from '../utils';
+import { fly } from 'svelte/transition';
+import Portal from './Portal.svelte';
+const { children } = $props();
+let _isOpen = $state(false);
+let mousePos = $state({ x: 0, y: 0 });
+export function open(e) {
+    e.preventDefault();
+    _isOpen = true;
+    mousePos = { x: e.clientX, y: e.clientY };
+}
+export function close() {
+    _isOpen = false;
+}
+export function isOpen() {
+    return _isOpen;
+}
+</script>
+
+<Portal>
+	{#if _isOpen}
+		<div
+			in:fly={{ x: 0, y: -10, duration: 120 }}
+			use:clickOutside={{
+				onClickOutside: (e) => {
+					_isOpen = false
+					e.preventDefault()
+					e.stopPropagation()
+				}
+			}}
+			class="absolute left-0 top-0 z-[9999] w-fit"
+			style="transform: translate({mousePos.x + 2}px, {mousePos.y + 2}px)"
+		>
+			{@render children()}
+		</div>
+	{/if}
+</Portal>

package/package/components/RightClickPopover.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const RightClickPopover: import("svelte").Component<Props, {
+    open: (e: MouseEvent) => void;
+    close: () => void;
+    isOpen: () => boolean;
+}, "">;
+type RightClickPopover = ReturnType<typeof RightClickPopover>;
+export default RightClickPopover;

package/package/components/RunButton.svelte

@@ -1,30 +1,20 @@
-<script lang="ts">import { Button } from './common';
+<script lang="ts">import { Button, ButtonType } from './common';
 import { CornerDownLeft, Loader2 } from 'lucide-svelte';
-export let isLoading;
-export let hideShortcut = false;
-export let onRun;
-export let onCancel;
+let { isLoading, hideShortcut = false, onRun, onCancel, size = 'sm' } = $props();
 </script>
 
 {#if !isLoading}
 	<Button
 		loading={isLoading}
-		size="sm"
+		unifiedSize={size}
 		variant="accent"
-		btnClasses="!px-2 !py-1"
-		on:click={() => onRun()}
+		onClick={() => onRun()}
 		shortCut={{ Icon: CornerDownLeft, hide: hideShortcut }}
 	>
 		Run
 	</Button>
 {:else}
-	<Button
-		size="sm"
-		variant="accent"
-		destructive
-		btnClasses="!px-2 !py-1"
-		on:click={() => onCancel()}
-	>
+	<Button unifiedSize={size} variant="accent" destructive onClick={() => onCancel()}>
 		<Loader2 size={14} class="animate-spin mr-2" />
 		Cancel
 	</Button>